/* Luxe Blo marketing site. Components translated from the Luxe Blo Design System
   (claude.ai/design project 267a983f). Tokens are verbatim; do not hardcode values here. */

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  margin:0;
  background:var(--color-bg-page);
  color:var(--color-text-primary);
  font-family:var(--font-sans);
  font-size:var(--type-body-size);
  line-height:var(--type-body-line);
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;display:block}

:focus-visible{
  outline:2px solid var(--color-focus-ring);
  outline-offset:2px;
  border-radius:var(--radius-sm);
}

/* ---------- Layout ---------- */

.container{
  max-width:var(--container-max-width);
  margin:0 auto;
  padding-inline:var(--gutter-mobile);
}

.section{padding-block:var(--section-padding-mobile)}
.section--alt{background:var(--color-bg-alt)}
.section--dark{background:var(--color-bg-dark);color:var(--color-text-on-dark)}
.section--narrow .container{max-width:640px}
.section--form .container{max-width:560px}

@media (min-width:900px){
  .container{padding-inline:var(--gutter-desktop)}
  .section{padding-block:var(--section-padding-desktop)}
}

.stack{display:flex;flex-direction:column;gap:var(--space-5)}
.stack-lg{display:flex;flex-direction:column;gap:var(--space-7)}
.center{text-align:center}

/* ---------- Typography ---------- */

.display,.h1,.h2{
  font-family:var(--font-serif);
  font-weight:var(--type-h1-weight);
  margin:0;
}

.display{
  font-size:var(--type-display-size-mobile);
  line-height:var(--type-display-line-mobile);
  letter-spacing:var(--type-display-tracking);
}

.h1{
  font-size:var(--type-h1-size-mobile);
  line-height:var(--type-h1-line-mobile);
  letter-spacing:var(--type-h1-tracking);
}

.h2{
  font-size:var(--type-h2-size);
  line-height:var(--type-h2-line);
  letter-spacing:var(--type-h2-tracking);
}

.h3{
  font-family:var(--font-sans);
  font-size:var(--type-h3-size);
  line-height:var(--type-h3-line);
  font-weight:var(--type-h3-weight);
  margin:0;
}

@media (min-width:900px){
  .display{font-size:var(--type-display-size);line-height:var(--type-display-line)}
  .h1{font-size:var(--type-h1-size);line-height:var(--type-h1-line)}
}

.eyebrow{
  font-family:var(--font-sans);
  font-size:var(--type-eyebrow-size);
  line-height:var(--type-eyebrow-line);
  font-weight:var(--type-eyebrow-weight);
  letter-spacing:var(--type-eyebrow-tracking);
  text-transform:uppercase;
  color:var(--color-accent);
  margin:0;
}

.lede{
  font-size:var(--type-body-lg-size);
  line-height:var(--type-body-lg-line);
  margin:0;
}

.body{margin:0}
.muted{color:var(--color-text-muted)}
.small{font-size:var(--type-body-sm-size);line-height:var(--type-body-sm-line)}
.measure{max-width:60ch}

/* EyebrowHeading block */
.heading-block{display:flex;flex-direction:column;gap:var(--space-3);max-width:640px}
.heading-block--center{margin-inline:auto;text-align:center;align-items:center}

/* ---------- Link ---------- */

.link{
  color:var(--color-text-primary);
  text-decoration:underline;
  text-underline-offset:4px;
  transition:color var(--motion-fast);
}
.link:hover{color:var(--color-accent)}
.on-dark .link,.section--dark .link{color:var(--color-text-on-dark)}
.on-dark .link:hover,.section--dark .link:hover{color:var(--color-highlight)}

/* ---------- Button ---------- */

.btn{
  font-family:var(--font-sans);
  font-size:var(--type-button-size);
  line-height:var(--type-button-line);
  font-weight:var(--type-button-weight);
  letter-spacing:var(--type-button-tracking);
  border-radius:var(--radius-md);
  padding-inline:var(--space-5);
  height:48px;
  border:1px solid transparent;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  transition:background-color var(--motion-fast),color var(--motion-fast),border-color var(--motion-fast);
}

.btn--lg{height:56px}

.btn--primary{
  background:var(--color-accent);
  color:var(--color-text-on-accent);
  border-color:var(--color-accent);
}
.btn--primary:hover{background:var(--color-accent-hover);border-color:var(--color-accent-hover)}

.btn--secondary{
  background:transparent;
  color:var(--color-text-primary);
  border-color:var(--color-text-primary);
}
.btn--secondary:hover{background:var(--color-bg-alt)}

.btn--ghost{
  background:transparent;
  color:var(--color-text-primary);
  text-decoration:underline;
  text-decoration-color:transparent;
  text-underline-offset:4px;
}
.btn--ghost:hover{text-decoration-color:currentColor}

.btn--on-dark{
  background:var(--color-bg-page);
  color:var(--color-text-primary);
  border-color:var(--color-bg-page);
}
.btn--on-dark:hover{background:var(--ivory-100);border-color:var(--ivory-100)}

.btn-row{display:flex;flex-wrap:wrap;gap:var(--space-4)}

@media (max-width:599px){
  .btn--block-mobile{width:100%}
  .btn-row .btn{width:100%}
}

/* ---------- Badge ---------- */

.badge{
  display:inline-block;
  background:var(--color-highlight);
  color:var(--color-text-primary);
  font-size:var(--type-eyebrow-size);
  line-height:var(--type-eyebrow-line);
  font-weight:var(--type-eyebrow-weight);
  letter-spacing:var(--type-eyebrow-tracking);
  text-transform:uppercase;
  border-radius:var(--radius-full);
  padding:6px 12px;
}

/* ---------- Navigation ---------- */

.nav{
  position:sticky;
  top:0;
  z-index:10;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-5);
  padding:var(--space-4) var(--gutter-mobile);
  background:var(--color-bg-page);
  border-bottom:1px solid transparent;
  transition:background-color var(--motion-fast),border-color var(--motion-fast);
}

.nav.is-scrolled{
  background:rgba(251,248,243,0.95);
  backdrop-filter:saturate(1.2) blur(6px);
  border-bottom-color:var(--color-border);
}

.wordmark{
  font-family:var(--font-serif);
  font-weight:600;
  font-size:24px;
  color:var(--color-text-primary);
  text-decoration:none;
}

.nav-links{display:none;gap:var(--space-6)}
.nav-links a{color:var(--color-text-primary);text-decoration:none;font-size:var(--type-body-size)}
.nav-links a:hover{color:var(--color-accent)}

@media (min-width:900px){
  .nav{padding:20px var(--gutter-desktop)}
  .nav-links{display:flex}
}

/* ---------- Hero ---------- */

.hero{
  position:relative;
  display:flex;
  align-items:center;
  min-height:560px;
  padding:var(--section-padding-mobile) var(--gutter-mobile);
  background:var(--espresso-900);
  color:var(--ivory-50);
  overflow:hidden;
}

.hero__media{
  position:absolute;
  inset:0;
  background:var(--espresso-900);
  border-radius:0;
}

.hero__media img{width:100%;height:100%;object-fit:cover;object-position:center 30%}

/* Scrim for headline legibility. Heavier behind the text, clearing toward the photo. */
.hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(36,25,21,0.55) 0%,rgba(36,25,21,0.78) 100%);
  pointer-events:none;
}

.hero__inner{z-index:1}

@media (min-width:900px){
  .hero::after{
    background:linear-gradient(90deg,rgba(36,25,21,0.88) 0%,rgba(36,25,21,0.72) 42%,rgba(36,25,21,0.12) 100%);
  }
}

.hero__inner{position:relative;max-width:640px;display:flex;flex-direction:column;gap:20px}
.hero__sub{font-size:var(--type-body-lg-size);line-height:var(--type-body-lg-line);color:rgba(251,248,243,0.85);margin:0}

@media (min-width:900px){
  .hero{min-height:640px;padding-inline:var(--gutter-desktop)}
}

/* ---------- Photo placeholder ---------- */

.photo{
  position:relative;
  background:var(--sand-200);
  border-radius:var(--radius-lg);
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:var(--space-2);
  overflow:hidden;
}

.photo__label{
  font-size:var(--type-body-sm-size);
  line-height:var(--type-body-sm-line);
  color:var(--color-text-muted);
}

.photo img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}

.photo--hero{aspect-ratio:4/5}
.photo--gallery{aspect-ratio:4/5}
.photo--portrait{aspect-ratio:3/4}
.photo--square{aspect-ratio:1/1}

@media (min-width:900px){
  .photo--hero{aspect-ratio:16/9}
}

/* ---------- Grids ---------- */

.grid-3{display:grid;grid-template-columns:1fr;gap:var(--space-6)}
.grid-gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--grid-gap)}
.grid-split{display:grid;grid-template-columns:1fr;gap:var(--space-7);align-items:center}
.grid-pricing{display:grid;grid-template-columns:1fr;gap:var(--space-6);max-width:700px;margin-inline:auto}

@media (min-width:900px){
  .grid-3{grid-template-columns:repeat(3,1fr)}
  .grid-gallery{grid-template-columns:repeat(4,1fr)}
  .grid-split{grid-template-columns:1fr 1fr}
  .grid-pricing{grid-template-columns:1fr 1fr}
}

/* ---------- StepCard ---------- */

.step{display:flex;flex-direction:column;gap:var(--space-3)}

.step__number{
  font-family:var(--font-serif);
  font-weight:500;
  font-size:var(--type-h1-size);
  line-height:1;
  color:var(--color-accent);
}

/* ---------- PricingCard ---------- */

.pricing{
  position:relative;
  background:var(--color-bg-card);
  border-radius:var(--radius-md);
  padding:var(--card-padding-mobile);
  box-shadow:var(--shadow-card);
  border:1px solid transparent;
  display:flex;
  flex-direction:column;
  gap:var(--space-4);
}

.pricing--highlighted{border-color:var(--color-accent)}

.pricing__badge{position:absolute;top:-14px;left:var(--space-6)}

.pricing__price{display:flex;align-items:baseline;gap:6px}
.pricing__amount{
  font-family:var(--font-serif);
  font-size:var(--type-h1-size-mobile);
  font-weight:500;
}
.pricing__period{font-size:var(--type-body-sm-size);color:var(--color-text-muted)}

.pricing__features{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.pricing__features li{display:flex;gap:var(--space-2)}
.pricing__features li::before{content:"\2014";color:var(--color-text-muted)}

.pricing .btn{margin-top:auto}

@media (min-width:900px){
  .pricing{padding:var(--card-padding-desktop)}
}

/* ---------- StatStrip ---------- */

.stat-strip{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--space-5);
  text-align:center;
}

.stat__value{
  font-family:var(--font-serif);
  font-weight:500;
  font-size:var(--type-h2-size);
  line-height:1.1;
  display:block;
}

.stat__label{font-size:var(--type-body-sm-size);color:var(--color-text-muted)}

@media (min-width:700px){
  .stat-strip{grid-template-columns:repeat(3,1fr)}
}

/* ---------- TestimonialCard ---------- */

.testimonial{
  background:var(--color-bg-card);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-card);
  padding:var(--card-padding-mobile);
  display:flex;
  flex-direction:column;
  gap:var(--space-4);
}

.testimonial__quote{
  font-family:var(--font-serif);
  font-style:italic;
  font-weight:500;
  font-size:var(--type-h2-size);
  line-height:var(--type-h2-line);
  margin:0;
}

.testimonial__attr{font-size:var(--type-body-sm-size);color:var(--color-text-muted)}

@media (min-width:900px){
  .testimonial{padding:var(--card-padding-desktop)}
}

/* ---------- ServiceAreaBlock ---------- */

.service-area{display:grid;grid-template-columns:1fr;gap:var(--space-7);align-items:start}

.neighborhoods{
  list-style:none;
  padding:0;
  margin:0;
  columns:2;
  column-gap:var(--space-6);
}

.neighborhoods li{padding-block:var(--space-2);break-inside:avoid}

@media (min-width:900px){
  .service-area{grid-template-columns:1fr 1fr}
}

/* ---------- FAQ (native details/summary) ---------- */

.faq{border-top:1px solid var(--color-border);max-width:720px}

.faq details{border-bottom:1px solid var(--color-border)}

.faq summary{
  list-style:none;
  cursor:pointer;
  padding-block:var(--space-5);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-4);
  font-size:var(--type-h3-size);
  line-height:var(--type-h3-line);
  font-weight:var(--type-h3-weight);
}

.faq summary::-webkit-details-marker{display:none}

.faq summary::after{
  content:"";
  flex:none;
  width:12px;
  height:12px;
  border-right:1.5px solid var(--color-text-primary);
  border-bottom:1.5px solid var(--color-text-primary);
  transform:rotate(45deg);
  transition:transform var(--motion-fast);
}

.faq details[open] summary::after{transform:rotate(-135deg)}

.faq__answer{padding-bottom:var(--space-5);margin:0;color:var(--color-text-muted);max-width:60ch}

/* ---------- Forms ---------- */

.form{display:flex;flex-direction:column;gap:20px;text-align:left}

.field{display:flex;flex-direction:column;gap:6px}

.field label{
  font-size:var(--type-body-sm-size);
  line-height:var(--type-body-sm-line);
  font-weight:500;
}

.field input,.field select,.field textarea{
  height:48px;
  background:var(--white);
  border:1px solid var(--color-border);
  border-radius:var(--radius-sm);
  font-size:16px;
  font-family:var(--font-sans);
  color:var(--color-text-primary);
  padding:0 14px;
  outline:none;
  transition:border-color var(--motion-fast),box-shadow var(--motion-fast);
}

.field textarea{height:auto;padding:12px 14px;min-height:96px;resize:vertical}

.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--color-accent);
  box-shadow:0 0 0 2px var(--color-focus-ring);
}

.field select{
  appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--color-text-primary) 50%),linear-gradient(135deg,var(--color-text-primary) 50%,transparent 50%);
  background-position:calc(100% - 20px) 21px,calc(100% - 14px) 21px;
  background-size:6px 6px,6px 6px;
  background-repeat:no-repeat;
}

.form__note{font-size:var(--type-body-sm-size);color:var(--color-text-muted);margin:0}

/* ---------- Footer ---------- */

.footer{
  background:var(--color-bg-dark);
  color:var(--color-text-on-dark);
  padding:var(--space-9) var(--gutter-mobile) var(--space-6);
}

.footer__inner{max-width:var(--container-max-width);margin-inline:auto}

.footer__cols{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--space-7);
  margin-bottom:var(--space-7);
}

.footer__blurb{font-size:var(--type-body-sm-size);color:rgba(251,248,243,0.7);max-width:280px;margin:var(--space-2) 0 0}

.footer__col{display:flex;flex-direction:column;gap:10px;font-size:var(--type-body-sm-size)}
.footer__col a{color:var(--color-text-on-dark);text-decoration:none}
.footer__col a:hover{color:var(--color-highlight)}

.footer__legal{
  border-top:1px solid rgba(251,248,243,0.15);
  padding-top:var(--space-4);
  font-size:12px;
  color:rgba(251,248,243,0.6);
}

@media (min-width:900px){
  .footer{padding-inline:var(--gutter-desktop)}
  .footer__cols{grid-template-columns:2fr 1fr 1fr}
}

/* ---------- Motion ---------- */

/* Only hide when JS is running, so content is never invisible without it. */
.js .fade-up{
  opacity:0;
  transform:translateY(12px);
  transition:opacity var(--motion-fade-up),transform var(--motion-fade-up);
}

.js .fade-up.is-visible{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
  .fade-up{opacity:1;transform:none}
}