/* ============================================================================
   Laundry Inc. — house stylesheet
   One file. No preprocessor, no framework, no build step.

   Palette, ratio and typography follow the Laundry Inc. Brand Identity &
   Standards Guide. Everything structural follows the Bilt Web Standard.

   Brand ratio target (guide §16):  45% linen/warm ivory · 30% powder blue
                                    15% soft powder blue · 10% deep slate
   The ivory and the blue do the work. Slate is an accent, never a ground
   for whole pages. There is no black anywhere in this file.
   ========================================================================== */

/* ---------------------------------------------------------------- 1. TOKENS */
:root{
  /* --- palette: exactly the brand guide ---------------------------------- */
  --powder:#B7CDE1;          /* Powder Blue      — primary brand colour   */
  --powder-soft:#DCE8F2;     /* Soft Powder Blue — secondary surface      */
  --linen:#F2EFE6;           /* Linen Ivory      — primary neutral        */
  --warm-ivory:#F7F3EA;      /* Warm Ivory       — secondary neutral      */
  --slate:#3E4A56;           /* Deep Slate       — used instead of black  */

  /* --- derived, and only where the brand five cannot carry AA text ------- */
  --powder-deep:#33546E;     /* links, eyebrows, accent word.
                                4.87:1 on powder blue, 6.93:1 on linen —
                                AA on every ground in this palette.       */
  --slate-soft:#57636F;      /* secondary copy. 5.34:1 on linen.
                                Never placed on powder blue.              */
  --slate-faint:#5A6673;     /* captions and micro-labels. 5.10:1 on linen,
                                4.71:1 on soft powder. Never on powder blue. */
  --blue-deep:#5E7FA3;       /* the visible powder blue, matched to the
                                DryClean Inc. site. 3.62:1 on linen — LARGE
                                text only: the script accent word and the
                                script taglines. Never small copy.        */

  /* --- semantic roles: reference THESE in component css ------------------ */
  --on-light:var(--slate);
  --on-light-muted:var(--slate-soft);
  --on-light-faint:var(--slate-faint);
  --on-dark:var(--linen);
  --on-dark-muted:var(--powder-soft);
  --on-dark-faint:var(--powder);
  --line-light:rgba(62,74,86,.14);
  --line-light-soft:rgba(62,74,86,.08);
  --line-blue:rgba(51,84,110,.28);      /* the thin blue rule from the brand board */
  --line-dark:rgba(242,239,230,.22);
  --line-dark-soft:rgba(242,239,230,.12);
  --focus-ring:0 0 0 3px rgba(51,84,110,.38);

  /* --- type -------------------------------------------------------------- */
  --f-sans:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --f-script:"Dancing Script","Snell Roundhand","Apple Chancery",cursive;

  /* --- layout ------------------------------------------------------------ */
  --maxw:1220px;
  --wide:1380px;
  --narrow:760px;
  --gutter:clamp(24px,5vw,72px);
  --ease:cubic-bezier(.16,1,.3,1);

  /* soft, residential, not clinical — matched to the DryClean Inc. site */
  --r-sm:8px; --r-md:12px; --r-lg:18px; --r-xl:22px;
  --shadow:0 1px 2px rgba(62,74,86,.05),0 24px 54px -30px rgba(62,74,86,.35);

  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px;
}

/* ---------------------------------------------------------------- 2. RESET */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
html,body{overflow-x:hidden}
body{
  margin:0;
  background:var(--linen);
  color:var(--on-light);
  font-family:var(--f-sans);
  font-size:1rem;
  font-weight:400;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg,video{display:block;max-width:100%;height:auto}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit}
section[id],div[id]{scroll-margin-top:124px}
:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:var(--r-sm)}
::selection{background:var(--powder);color:var(--slate)}

.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--slate);color:var(--linen);
  padding:14px 22px;font-size:.85rem;font-weight:600;letter-spacing:.06em;
  border-radius:0 0 var(--r-md) 0;
}
.skip:focus{left:12px;top:12px}

/* ------------------------------------------------------------ 3. TYPOGRAPHY */
h1,h2,h3,h4{margin:0;font-weight:600;color:var(--slate);text-wrap:balance}
h1{font-size:clamp(2.3rem,5.2vw,4rem);line-height:1.14;letter-spacing:-.02em}
h2{font-size:clamp(1.8rem,3.4vw,2.75rem);line-height:1.2;letter-spacing:-.015em}
h3{font-size:clamp(1.18rem,1.85vw,1.45rem);line-height:1.26;letter-spacing:-.006em}
h4{font-size:1.02rem;line-height:1.38;letter-spacing:-.002em}
h2.hsm,h3.hsm{font-size:1.02rem;line-height:1.38;letter-spacing:-.002em;font-weight:600}
p{margin:0 0 1.05em}
p:last-child{margin-bottom:0}
.lede{font-size:clamp(1.08rem,1.55vw,1.28rem);line-height:1.58;color:var(--on-light-muted);max-width:56ch;font-weight:400}
.prose{max-width:64ch}
.muted{color:var(--on-light-muted)}
.faint{color:var(--on-light-faint)}

/* --- the one decorative gesture: the brand script -------------------------
   One word or one short phrase. Never a headline, never body copy.

   Dancing Script 700, not a light script. The Laundry Inc. logo lettering is
   a BOLD connected script (guide §8: "substantially heavier than a delicate
   wedding-style script"), so the accent has to carry that weight.

   Script x-heights run far smaller than Manrope's, so 1.5em here renders at
   roughly the same optical size as the surrounding headline — it is not
   oversized, it is compensated. */
.accent{
  font-family:var(--f-script);
  font-weight:700;
  font-size:1.5em;
  line-height:.85;
  letter-spacing:0;
  text-transform:none;
  color:var(--blue-deep);    /* clearly blue, not another slate */
  padding-right:.1em;
}
.script{
  font-family:var(--f-script);
  font-weight:700;
  font-size:2.3rem;
  line-height:1.05;
  color:var(--blue-deep);
}
.sec.powder .accent,.sec.powder .script{color:var(--slate)}

/* --- eyebrow: the brand board's letterspaced blue caps with a hairline ---- */
.eyebrow{
  display:flex;align-items:center;gap:14px;
  font-size:.7rem;font-weight:600;
  letter-spacing:.24em;text-transform:uppercase;
  color:var(--powder-deep);
  margin:0 0 22px;
}
.eyebrow::after{
  content:"";flex:1;height:1px;background:var(--line-blue);max-width:180px;
}
.sec.slate .eyebrow,.cta-band .eyebrow{color:var(--powder)}
.sec.slate .eyebrow::after,.cta-band .eyebrow::after{background:var(--line-dark)}

.label{
  font-size:.68rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--on-light-faint);
}
.tnum{font-variant-numeric:tabular-nums}

/* --------------------------------------------------------------- 4. LAYOUT */
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.wrap-wide{max-width:var(--wide)}
.wrap-narrow{max-width:var(--narrow)}

.sec{padding:clamp(72px,9vw,128px) 0;position:relative}
.sec.tight{padding:clamp(48px,6vw,72px) 0}
.sec.deep{padding:clamp(104px,12vw,180px) 0}

/* the four grounds. 45 / 15 / 30 / 10, in that order of frequency. */
.sec.light{background:var(--linen)}
.sec.ivory{background:var(--warm-ivory)}
.sec.soft{background:var(--powder-soft)}
.sec.powder{background:linear-gradient(140deg,var(--powder),var(--powder-soft))}
.sec.slate,.sec.dark{background:linear-gradient(150deg,var(--slate),#2B3540);color:var(--on-dark)}
.sec.slate h1,.sec.slate h2,.sec.slate h3,.sec.slate h4,
.sec.dark h1,.sec.dark h2,.sec.dark h3,.sec.dark h4{color:var(--on-dark)}
.sec.slate .lede,.sec.slate .muted,.sec.dark .lede,.sec.dark .muted{color:var(--on-dark-muted)}
.sec.slate .faint,.sec.slate .label,.sec.dark .faint,.sec.dark .label{color:var(--on-dark-faint)}
.sec.slate .accent,.sec.dark .accent{color:var(--powder)}
/* Powder blue is the one ground the grey text steps cannot carry at AA
   (muted 3.75:1, faint 2.79:1). Everything on it resolves to deep slate,
   which is 5.53:1 — and which is the brand-specified pairing anyway. */
.sec.powder,
.sec.powder .lede,.sec.powder .muted,.sec.powder .faint,.sec.powder p,
.sec.powder li,.sec.powder figcaption,.sec.powder .label,.sec.powder .hint,
.sec.powder .formnote,.sec.powder .pq cite,.sec.powder .crumbs,
.sec.powder .crumbs a,.sec.powder .tbl td,.sec.powder .tbl th,
.sec.powder .faq .ans p,.sec.powder .field label,.sec.powder legend,
.sec.powder .rs-card p{color:var(--slate)}
.sec.powder .tbl caption,.sec.powder figcaption b,.sec.powder .idx,
.sec.powder .process .step,.sec.powder .tlink,.sec.powder .rs-card .go{color:var(--powder-deep)}
.sec.powder .tbl th{border-bottom-color:rgba(51,84,110,.45)}
.sec.powder .tbl td{border-bottom-color:rgba(62,74,86,.18)}
.sec.powder .faq{border-top-color:rgba(51,84,110,.45)}
.sec.powder .faq details{border-bottom-color:rgba(62,74,86,.18)}
.sec.powder .formwrap,.sec.powder .rs-card{background:var(--warm-ivory);border-color:rgba(51,84,110,.35)}
.sec.powder .process::before{background:rgba(51,84,110,.4)}
.sec.powder .eyebrow{color:var(--powder-deep)}
.sec.powder .eyebrow::after{background:rgba(51,84,110,.4)}

.sec.hair{border-top:1px solid var(--line-light)}
.rule{height:1px;background:var(--line-light);border:0;margin:0}

.band{position:relative;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw;width:100vw}

/* asymmetric editorial grids — never repeat(3,1fr) by default */
.split{display:grid;gap:clamp(32px,5vw,80px);align-items:center}
.split-a{grid-template-columns:1.05fr 1.15fr}
.split-b{grid-template-columns:1.15fr 1.05fr}
.split-c{grid-template-columns:0.85fr 1.3fr}
.split-d{grid-template-columns:1fr 1fr}
.split-head{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(28px,5vw,72px);align-items:end;margin-bottom:clamp(40px,5vw,72px)}

/* ruled column group — the default alternative to cards */
.ruled{display:grid;gap:0;border-top:1px solid var(--line-blue)}
.ruled>*{padding:32px 34px 36px 0;border-bottom:1px solid var(--line-light-soft)}
.ruled-2{grid-template-columns:1fr 1fr}
.ruled-3{grid-template-columns:1fr 1fr 1fr}
.ruled-4{grid-template-columns:1fr 1fr 1fr 1fr}
.ruled-2>*+*,.ruled-3>*+*,.ruled-4>*+*{border-left:1px solid var(--line-light-soft);padding-left:34px}
.ruled h3,.ruled h4,.ruled .hsm{margin-bottom:10px}
.ruled p{font-size:.94rem;color:var(--on-light-muted);margin:0}
.sec.slate .ruled,.sec.dark .ruled{border-top-color:var(--line-dark)}
.sec.slate .ruled>*,.sec.dark .ruled>*{border-bottom-color:var(--line-dark-soft)}
.sec.slate .ruled>*+*,.sec.dark .ruled>*+*{border-left-color:var(--line-dark-soft)}
.sec.slate .ruled p,.sec.dark .ruled p{color:var(--on-dark-muted)}
.sec.powder .ruled{border-top-color:rgba(51,84,110,.35)}
.sec.powder .ruled>*{border-bottom-color:rgba(62,74,86,.16)}
.sec.powder .ruled>*+*{border-left-color:rgba(62,74,86,.16)}
.sec.powder .ruled p{color:var(--slate)}
.ruled .idx{
  display:block;font-size:.68rem;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--powder-deep);margin-bottom:14px;
}
.sec.slate .ruled .idx,.sec.dark .ruled .idx{color:var(--powder)}

/* plain list of checks — no icon rows */
.checks{list-style:none;margin:0;padding:0}
.checks li{
  position:relative;padding:11px 0 11px 26px;
  border-bottom:1px solid var(--line-light-soft);
  font-size:.95rem;color:var(--on-light-muted);
}
.checks li::before{
  content:"";position:absolute;left:0;top:1.18em;
  width:12px;height:1px;background:var(--powder-deep);
}
.sec.slate .checks li,.sec.dark .checks li{border-bottom-color:var(--line-dark-soft);color:var(--on-dark-muted)}
.sec.slate .checks li::before,.sec.dark .checks li::before{background:var(--powder)}
.sec.powder .checks li{color:var(--slate);border-bottom-color:rgba(62,74,86,.16)}
.checks.two{columns:2;column-gap:48px}
.checks.two li{break-inside:avoid}

/* -------------------------------------------------------------- 5. BUTTONS */
.btn{
  display:inline-flex;align-items:center;gap:11px;
  min-height:50px;padding:0 28px;
  font-size:.92rem;font-weight:600;letter-spacing:.02em;
  text-decoration:none;white-space:nowrap;
  border:1.5px solid transparent;border-radius:10px;
  cursor:pointer;
  transition:.25s var(--ease);
}
.btn:active{transform:translateY(0)}
.btn .arw{width:14px;height:1px;background:currentColor;position:relative;transition:width .25s var(--ease)}
.btn .arw::after{
  content:"";position:absolute;right:0;top:-3px;
  width:7px;height:7px;border-top:1px solid currentColor;border-right:1px solid currentColor;
  transform:rotate(45deg);
}
.btn:hover .arw{width:22px}

/* guide §41: primary is powder blue with deep slate text */
.btn-primary{background:var(--powder);color:var(--slate);border-color:var(--powder)}
.btn-primary:hover{background:var(--blue-deep);border-color:var(--blue-deep);color:#fff;transform:translateY(-2px);box-shadow:0 14px 30px -14px rgba(94,127,163,.6)}

/* guide §41: secondary is ivory with a slate border */
.btn-outline{background:transparent;color:var(--slate);border-color:rgba(62,74,86,.3)}
.btn-outline:hover{border-color:var(--blue-deep);color:var(--blue-deep);transform:translateY(-2px)}

.btn-slate{background:var(--slate);color:var(--linen);border-color:var(--slate)}
.btn-slate:hover{background:#2B3540;border-color:#2B3540;transform:translateY(-2px);box-shadow:0 14px 30px -14px rgba(43,53,64,.5)}
.btn-dark{background:var(--slate);color:var(--linen);border-color:var(--slate)}
.btn-dark:hover{background:#2B3540;border-color:#2B3540;transform:translateY(-2px);box-shadow:0 14px 30px -14px rgba(43,53,64,.5)}

.sec.slate .btn-outline,.sec.dark .btn-outline,.cta-band .btn-outline{color:var(--linen);border-color:var(--line-dark)}
.sec.slate .btn-outline:hover,.sec.dark .btn-outline:hover,.cta-band .btn-outline:hover{border-color:var(--linen);background:rgba(242,239,230,.1)}
.sec.powder .btn-outline{border-color:rgba(62,74,86,.38)}
.sec.powder .btn-outline:hover{background:rgba(247,243,234,.55);border-color:var(--slate)}

.btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}

.tlink{
  display:inline-block;position:relative;text-decoration:none;
  font-weight:600;font-size:.9rem;letter-spacing:.02em;color:var(--powder-deep);
  padding-bottom:3px;
}
.tlink::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform .3s var(--ease);
}
.tlink:hover::after,.tlink:focus-visible::after{transform:scaleX(1)}
.sec.slate .tlink,.sec.dark .tlink{color:var(--powder)}

/* --------------------------------------------------------- 6. NAV / HEADER
   Fixed to the top of the viewport at all times. Transparent-to-ivory
   gradient at rest so it reads over the hero, solid on scroll. */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:200;
  background:linear-gradient(180deg,rgba(247,243,234,.92),rgba(247,243,234,.55) 55%,rgba(247,243,234,0));
  border-bottom:1px solid transparent;
  transition:background-color .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease);
}
.nav.solid{
  background:rgba(247,243,234,.95);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom-color:var(--line-light);
  box-shadow:0 8px 26px -22px rgba(62,74,86,.5);
}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:22px;min-height:104px;transition:min-height .3s var(--ease)}
.nav.solid .nav-in{min-height:84px}

/* every page starts under the fixed bar */
main>section:first-child:not(.hero):not(.phero):not(.cta-band){padding-top:clamp(150px,17vh,190px)}

/* LOGO — drawn, not placed.
   Inline SVG heart-hanger + live type. One variable drives the whole lockup:
   --wm-size. Colour comes from `color`, so the reverse variant is a one-line
   change. Nothing here is a raster, so nothing goes soft or ghosts out. */
.wm{
  display:inline-flex;flex-direction:column;align-items:center;
  text-decoration:none;line-height:1;
  color:var(--blue-deep);
  font-size:var(--wm-size,15px);
  transition:font-size .3s var(--ease);
}
.wm-reverse{color:var(--linen)}

.wm-mark{position:relative;display:block;width:13.6em;height:5em}
.wm-hanger{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.wm-hanger path{
  fill:none;stroke:currentColor;
  stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round;
}
.wm-hanger .wm-heart{stroke-width:3}

.wm-script{
  position:absolute;left:50%;bottom:-.15em;transform:translateX(-50%);
  font-family:var(--f-script);font-weight:700;
  font-size:3.05em;line-height:1;white-space:nowrap;
  letter-spacing:-.01em;
}
.wm-script em{
  font-family:var(--f-sans);font-style:normal;font-weight:500;
  font-size:.33em;letter-spacing:0;margin-left:.12em;vertical-align:.15em;
}
.wm-desc{
  display:flex;align-items:center;gap:.75em;margin-top:.7em;
  font-family:var(--f-sans);font-size:.8em;font-weight:600;
  letter-spacing:.3em;text-transform:uppercase;
  padding-left:.3em;
}
.wm-desc::before,.wm-desc::after{content:"";width:2.4em;height:1px;background:currentColor;opacity:.7}

/* one variable per context */
.nav .wm{--wm-size:15px}
.nav.solid .wm{--wm-size:12.5px}
.foot .wm{--wm-size:16px}
@media(max-width:720px){
  .nav .wm{--wm-size:11px}
  .nav.solid .wm{--wm-size:9.5px}
  .foot .wm{--wm-size:13px}
}

.nav-phone{
  display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 16px;
  font-size:.66rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  border-radius:var(--r-md);border:1px solid var(--line-light);
  background:rgba(220,232,242,.55);color:var(--slate);text-decoration:none;
  transition:border-color .2s var(--ease),background-color .2s var(--ease);
}
.nav-phone::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--blue-deep);flex:none}
.nav-phone:hover{border-color:var(--blue-deep);background:rgba(220,232,242,.9)}
@media(max-width:1340px){.nav-phone{display:none}}

.menu{display:flex;align-items:center;gap:clamp(12px,1.5vw,22px);list-style:none;margin:0;padding:0}
.menu a{
  position:relative;text-decoration:none;
  font-size:.83rem;font-weight:500;letter-spacing:.005em;color:var(--slate);
  padding:6px 0;white-space:nowrap;transition:color .2s var(--ease);
}
.menu a::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;
  background:var(--powder-deep);transform:scaleX(0);transform-origin:left;
  transition:transform .3s var(--ease);
}
.menu a:hover::after,.menu a:focus-visible::after,.menu a[aria-current="page"]::after{transform:scaleX(1)}
.menu a[aria-current="page"]{color:var(--powder-deep)}
.nav-cta{display:flex;align-items:center;gap:12px;margin-left:auto}
.nav-cta .btn{min-height:42px;padding:0 20px;font-size:.82rem}

.burger{
  display:none;width:46px;height:46px;align-items:center;justify-content:center;
  background:none;border:1px solid var(--line-blue);border-radius:var(--r-md);cursor:pointer;
}
.burger span{display:block;width:19px;height:1px;background:var(--slate);position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:19px;height:1px;background:var(--slate);transition:transform .3s var(--ease),top .3s var(--ease)}
.burger span::before{top:-6px}.burger span::after{top:6px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.burger[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}

.mobile{
  display:none;position:fixed;inset:0;z-index:69;
  background:var(--linen);padding:150px var(--gutter) 48px;
  overflow-y:auto;
}
.mobile.open{display:block}
.mobile ul{list-style:none;margin:0 0 32px;padding:0;border-top:1px solid var(--line-blue)}
.mobile li{border-bottom:1px solid var(--line-light-soft)}
.mobile a{display:block;padding:17px 0;text-decoration:none;font-size:1.08rem;font-weight:500;color:var(--slate)}
.mobile a[aria-current="page"]{color:var(--powder-deep)}
.mobile .btn{width:100%;justify-content:space-between}

/* soft powder mesh — used sparingly behind a light band */
.mesh{position:relative;overflow:hidden}
.mesh::before{
  content:"";position:absolute;inset:-40%;z-index:0;pointer-events:none;
  background:
    radial-gradient(42% 42% at 22% 28%, rgba(183,205,225,.35), transparent 62%),
    radial-gradient(38% 38% at 78% 18%, rgba(220,232,242,.55), transparent 60%),
    radial-gradient(46% 46% at 70% 82%, rgba(183,205,225,.22), transparent 60%);
  filter:blur(12px);
}
.mesh>.wrap{position:relative;z-index:1}

/* ------------------------------------------------------------------ 7. HERO
   Light. The photograph sits behind a linen scrim so the copy is deep slate,
   not white-on-black. Fresh linen and morning light — brand guide §6. */
.hero{position:relative;min-height:clamp(560px,86vh,840px);display:flex;align-items:flex-end;isolation:isolate}
.hero-media{position:absolute;inset:0;z-index:-2;overflow:hidden;background:var(--powder-soft)}
.hero-media img{width:100%;height:100%;object-fit:cover}
.hero-media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,
    rgba(242,239,230,.975) 0%,
    rgba(242,239,230,.94) 30%,
    rgba(242,239,230,.72) 52%,
    rgba(242,239,230,.22) 76%,
    rgba(242,239,230,.06) 100%);
}
.hero-in{padding:clamp(156px,20vh,224px) 0 clamp(52px,8vh,84px);width:100%}
.hero h1{max-width:16ch}
.hero .lede{max-width:48ch;margin-top:26px}
.hero .btns{margin-top:36px}
.hero-foot{
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  margin-top:clamp(48px,7vh,84px);padding-top:22px;border-top:1px solid var(--line-blue);
  max-width:760px;
}
.hero-foot p{margin:0;font-size:.72rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--slate-faint)}
.hero-foot .pillars-line{display:flex;gap:22px;flex-wrap:wrap}
.hero-foot .pillars-line span{color:var(--powder-deep)}

/* compact interior-page hero, same light treatment */
.phero{position:relative;isolation:isolate;min-height:clamp(400px,56vh,580px);display:flex;align-items:flex-end}
.phero .hero-media::after{
  background:linear-gradient(100deg,
    rgba(242,239,230,.98) 0%,
    rgba(242,239,230,.95) 34%,
    rgba(242,239,230,.74) 56%,
    rgba(242,239,230,.26) 80%,
    rgba(242,239,230,.08) 100%);
}
.phero-in{padding:clamp(146px,18vh,200px) 0 clamp(44px,6vh,68px);width:100%}
.phero h1{max-width:18ch;font-size:clamp(2.05rem,4.3vw,3.4rem)}
.phero .lede{max-width:52ch;margin-top:22px}

.crumbs{margin:0 0 22px;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--slate-faint)}
.crumbs a{text-decoration:none;color:var(--slate-faint);transition:color .2s var(--ease)}
.crumbs a:hover{color:var(--powder-deep)}
.crumbs span{padding:0 8px;opacity:.5}

/* --------------------------------------------------------------- 8. FIGURES */
figure{margin:0}
.fig{position:relative;overflow:hidden;background:var(--powder-soft);border-radius:var(--r-lg)}
.fig img{width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.1s var(--ease)}
.fig img.loaded{opacity:1}
.fig-4x3{aspect-ratio:4/3}
.fig-3x2{aspect-ratio:3/2}
.fig-16x9{aspect-ratio:16/9}
.fig-1x1{aspect-ratio:1/1}
.fig-tall{aspect-ratio:4/5}
figcaption{
  margin-top:14px;font-size:.78rem;line-height:1.55;letter-spacing:.01em;
  color:var(--on-light-faint);max-width:46ch;
}
.sec.slate figcaption,.sec.dark figcaption{color:var(--on-dark-faint)}
.sec.powder figcaption{color:var(--slate)}
figcaption b{
  font-weight:600;color:var(--powder-deep);letter-spacing:.16em;text-transform:uppercase;
  font-size:.65rem;display:block;margin-bottom:5px;
}
.sec.slate figcaption b,.sec.dark figcaption b{color:var(--powder)}

/* ---------------------------------------------------- 9. BEFORE / AFTER SLIDER */
.ba{position:relative;width:100%;aspect-ratio:3/2;overflow:hidden;border-radius:var(--r-lg);background:var(--powder-soft);touch-action:pan-y}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ba-after{clip-path:inset(0 0 0 50%)}
.ba-handle{
  position:absolute;top:0;bottom:0;left:50%;width:2px;background:var(--linen);
  transform:translateX(-1px);z-index:3;pointer-events:none;
  box-shadow:0 0 0 1px rgba(62,74,86,.2);
}
.ba-grip{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:54px;height:54px;border-radius:50%;
  background:var(--linen);border:1px solid var(--powder);
  display:flex;align-items:center;justify-content:center;gap:5px;z-index:4;
  box-shadow:0 2px 12px rgba(62,74,86,.14);
}
.ba-grip::before,.ba-grip::after{
  content:"";width:6px;height:6px;border-top:1.5px solid var(--powder-deep);border-left:1.5px solid var(--powder-deep);
}
.ba-grip::before{transform:rotate(-45deg)}
.ba-grip::after{transform:rotate(135deg)}
.ba-range{position:absolute;inset:0;width:100%;height:100%;margin:0;z-index:5;opacity:0;cursor:ew-resize}
.ba-range:focus-visible+.ba-handle{box-shadow:var(--focus-ring)}
.ba-tag{
  position:absolute;bottom:16px;z-index:4;
  font-size:.62rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  padding:7px 13px;border-radius:var(--r-sm);
  background:rgba(242,239,230,.94);color:var(--slate);
  backdrop-filter:blur(6px);border:1px solid var(--line-blue);
}
.ba-tag.l{left:16px}.ba-tag.r{right:16px}

/* --------------------------------------------------- 10. PAIRING (BUILDING→ROOM) */
.pairs{display:grid;gap:clamp(28px,4vw,56px)}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:6px;align-items:stretch}
.pair .fig{border-radius:0}
.pair figure:first-child .fig{border-radius:var(--r-lg) 0 0 var(--r-lg)}
.pair figure:last-child .fig{border-radius:0 var(--r-lg) var(--r-lg) 0}
.pair-meta{display:flex;align-items:baseline;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--line-blue)}
.pair-meta h3{margin:0}
.sec.slate .pair-meta,.sec.dark .pair-meta{border-bottom-color:var(--line-dark)}

/* ------------------------------------------------------- 11. PROCESS TIMELINE */
.process{position:relative;list-style:none;margin:0;padding:0}
.process::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:1px;background:var(--line-blue)}
.sec.slate .process::before,.sec.dark .process::before{background:var(--line-dark)}
.process li{position:relative;padding:0 0 clamp(36px,4vw,56px) clamp(40px,5vw,84px)}
.process li:last-child{padding-bottom:0}
.process li::before{
  content:"";position:absolute;left:-4px;top:12px;width:9px;height:9px;border-radius:50%;
  background:var(--linen);border:1px solid var(--powder-deep);
  transition:background-color .5s var(--ease);
}
.sec.slate .process li::before,.sec.dark .process li::before{background:var(--slate);border-color:var(--powder)}
.sec.soft .process li::before{background:var(--powder-soft)}
.process li.in::before{background:var(--powder-deep)}
.sec.slate .process li.in::before,.sec.dark .process li.in::before{background:var(--powder)}
.process .step{
  display:block;font-size:.66rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--powder-deep);margin-bottom:10px;
}
.sec.slate .process .step,.sec.dark .process .step{color:var(--powder)}
.process h3{margin-bottom:10px}
.process p{max-width:60ch;color:var(--on-light-muted);font-size:.96rem;margin:0}
.sec.slate .process p,.sec.dark .process p{color:var(--on-dark-muted)}

/* ------------------------------------------------------------ 12. PULL QUOTE */
.pq{max-width:22ch;margin:0}
.pq blockquote{
  margin:0;font-size:clamp(1.6rem,3.2vw,2.5rem);line-height:1.2;letter-spacing:-.015em;
  font-weight:500;color:var(--slate);text-wrap:balance;
}
.sec.slate .pq blockquote,.sec.dark .pq blockquote{color:var(--on-dark)}
.pq cite{display:block;margin-top:22px;font-style:normal;font-size:.7rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--on-light-faint)}
.sec.slate .pq cite,.sec.dark .pq cite{color:var(--on-dark-faint)}

/* ------------------------------------------------------- 14. STANDARDS TABLE */
.tbl{width:100%;border-collapse:collapse;font-size:.92rem}
.tbl caption{text-align:left;font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:var(--powder-deep);padding-bottom:14px}
.tbl th{
  text-align:left;font-size:.66rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--on-light-muted);padding:0 20px 12px 0;border-bottom:2px solid var(--line-blue);
}
.tbl td{padding:15px 20px 15px 0;border-bottom:1px solid var(--line-light-soft);vertical-align:top;color:var(--on-light-muted)}
.tbl td:first-child{color:var(--slate);font-weight:600;width:34%}
.tbl tr:last-child td{border-bottom:0}
.sec.slate .tbl caption,.sec.dark .tbl caption{color:var(--powder)}
.sec.slate .tbl th,.sec.dark .tbl th{color:var(--on-dark-muted);border-bottom-color:var(--line-dark)}
.sec.slate .tbl td,.sec.dark .tbl td{color:var(--on-dark-muted);border-bottom-color:var(--line-dark-soft)}
.sec.slate .tbl td:first-child,.sec.dark .tbl td:first-child{color:var(--on-dark)}
.scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ------------------------------------------------------------- 15. PROJECTS */
.plist{display:grid;gap:clamp(48px,6vw,88px)}
.pitem{display:grid;grid-template-columns:1.35fr 1fr;gap:clamp(28px,4vw,64px);align-items:center;text-decoration:none;color:inherit}
.pitem:nth-child(even) .pitem-media{order:2}
.pitem-body h3{margin-bottom:12px}
.pitem:hover .tlink::after{transform:scaleX(1)}

.tierlist{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line-blue)}
.tier{padding:34px 30px 38px 0;border-bottom:1px solid var(--line-light-soft)}
.tier+.tier{border-left:1px solid var(--line-light-soft);padding-left:30px}
.tier .fig{margin-bottom:22px;border-radius:var(--r-md)}

/* -------------------------------------------------------- 16. FORMS / INPUTS */
.formwrap{
  background:var(--warm-ivory);
  border:1px solid var(--line-light);border-radius:var(--r-lg);
  padding:clamp(28px,4vw,48px);
  box-shadow:var(--shadow);
}
.sec.soft .formwrap{background:var(--linen)}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:20px 24px}
.f-full{grid-column:1/-1}
.field{display:flex;flex-direction:column;gap:7px}
.field label{font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--on-light-muted)}
.field label .req{color:var(--powder-deep)}
.field input,.field select,.field textarea{
  width:100%;background:#FFFFFF;color:var(--slate);
  border:1px solid var(--line-light);border-radius:var(--r-md);
  padding:13px 14px;font-size:.95rem;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.field input:hover,.field select:hover,.field textarea:hover{border-color:rgba(62,74,86,.3)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--powder-deep);box-shadow:var(--focus-ring)}
.field textarea{min-height:130px;resize:vertical}
.field .hint{font-size:.78rem;color:var(--on-light-faint)}
.field .err{font-size:.78rem;color:#8F3C36;display:none}
.field.invalid input,.field.invalid select,.field.invalid textarea{border-color:#8F3C36}
.field.invalid .err{display:block}

fieldset{border:0;margin:0;padding:0}
legend{font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--on-light-muted);padding:0 0 12px}
.opts{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.opt{
  display:flex;align-items:center;gap:11px;
  padding:12px 14px;border:1px solid var(--line-light);border-radius:var(--r-md);
  background:#FFFFFF;cursor:pointer;font-size:.9rem;
  transition:border-color .2s var(--ease),background-color .2s var(--ease);
}
.opt:hover{border-color:rgba(62,74,86,.3)}
.opt input{width:16px;height:16px;accent-color:var(--powder-deep);flex:none}
.opt:has(input:checked){border-color:var(--powder-deep);background:var(--powder-soft)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.formnote{font-size:.8rem;color:var(--on-light-faint);margin-top:18px;max-width:62ch}
.formmsg{display:none;margin-top:20px;padding:16px 18px;border-radius:var(--r-md);font-size:.92rem}
.formmsg.ok{display:block;background:var(--powder-soft);border:1px solid var(--powder);color:var(--slate)}
.formmsg.bad{display:block;background:#F6E9E7;border:1px solid #D9B7B2;color:#73302A}

/* ---------------------------------------------------------------- 17. FAQ */
.faq{border-top:1px solid var(--line-blue)}
.faq details{border-bottom:1px solid var(--line-light-soft)}
.faq summary{
  list-style:none;cursor:pointer;position:relative;
  padding:22px 52px 22px 0;
  font-size:1.02rem;font-weight:600;color:var(--slate);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after,.faq summary::before{
  content:"";position:absolute;right:8px;top:50%;background:var(--powder-deep);
  transition:transform .3s var(--ease);
}
.faq summary::after{width:15px;height:1px}
.faq summary::before{width:1px;height:15px;margin-top:-7px;right:15px}
.faq details[open] summary::before{transform:rotate(90deg)}
.faq details[open] summary::after{transform:rotate(180deg)}
.faq .ans{padding:0 52px 26px 0;max-width:68ch}
.faq .ans p{font-size:.96rem;color:var(--on-light-muted)}
.faq summary:focus-visible{box-shadow:var(--focus-ring)}

/* ----------------------------------------------------- 18. RESIDENT SUPPORT */
.rs-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.rs-card{
  display:flex;flex-direction:column;justify-content:space-between;gap:22px;
  min-height:172px;padding:26px 24px 24px;
  background:var(--warm-ivory);border:1px solid var(--line-light);border-radius:var(--r-lg);
  text-decoration:none;color:inherit;
  transition:border-color .25s var(--ease),background-color .25s var(--ease);
}
.rs-card:hover{border-color:var(--blue-deep);background:var(--powder-soft);transform:translateY(-2px);box-shadow:var(--shadow)}
.rs-card h2,.rs-card h3{font-size:1.12rem;margin-bottom:8px}
.rs-card p{font-size:.9rem;color:var(--on-light-muted);margin:0}
.rs-card .go{display:flex;align-items:center;gap:10px;font-size:.74rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--powder-deep)}

.callout{
  border-left:2px solid var(--powder);
  padding:4px 0 4px 24px;margin:28px 0;
  font-size:.95rem;color:var(--on-light-muted);max-width:64ch;
}
.sec.slate .callout,.sec.dark .callout{border-left-color:var(--powder);color:var(--on-dark-muted)}
.sec.powder .callout{border-left-color:var(--powder-deep);color:var(--slate)}

.placeholder{
  display:inline-block;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.82em;letter-spacing:.02em;
  background:var(--powder-soft);color:var(--powder-deep);
  border:1px dashed rgba(51,84,110,.45);border-radius:var(--r-sm);
  padding:1px 7px;
}
.sec.slate .placeholder,.sec.dark .placeholder{background:rgba(183,205,225,.16);color:var(--powder);border-color:rgba(183,205,225,.45)}
.sec.powder .placeholder{background:rgba(247,243,234,.7)}

/* ------------------------------------------------------------- 19. CTA BAND */
.cta-band{position:relative;isolation:isolate;overflow:hidden;background:var(--powder-soft)}
.cta-band .hero-media::after{
  background:linear-gradient(100deg,
    rgba(220,232,242,.97) 0%,
    rgba(220,232,242,.93) 34%,
    rgba(220,232,242,.7) 58%,
    rgba(220,232,242,.24) 82%,
    rgba(220,232,242,.08) 100%);
}
.cta-band h2{max-width:20ch}
.cta-band .eyebrow{color:var(--powder-deep)}
.cta-band .eyebrow::after{background:rgba(51,84,110,.4)}
.cta-band .lede{color:var(--slate)}
.cta-band .btn-outline{color:var(--slate);border-color:rgba(62,74,86,.38)}
.cta-band .btn-outline:hover{border-color:var(--slate);background:rgba(247,243,234,.6)}
.cta-in{padding:clamp(80px,10vw,140px) 0}

/* --------------------------------------------------------------- 20. FOOTER */
.foot{background:var(--slate);color:var(--on-dark-muted);padding:clamp(56px,7vw,88px) 0 0}
.foot-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.3fr;gap:clamp(28px,4vw,56px);padding-bottom:clamp(40px,5vw,64px)}
.foot h2{font-size:.66rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--on-dark-faint);margin-bottom:18px}
.foot ul{list-style:none;margin:0;padding:0}
.foot li{margin-bottom:10px}
.foot a{text-decoration:none;font-size:.9rem;color:var(--on-dark-muted);transition:color .2s var(--ease)}
.foot a:hover{color:var(--powder)}
.foot-brandline{
  margin-top:20px;font-size:.7rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--powder);
}
.foot-tagline{font-family:var(--f-script);font-weight:600;font-size:1.35rem;color:var(--powder-soft);margin-top:14px}
.foot-blurb{margin-top:16px;font-size:.88rem;line-height:1.62;max-width:34ch;color:var(--on-dark-muted)}
.foot-bot{
  border-top:1px solid var(--line-dark);
  padding:22px 0 30px;
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center;
  font-size:.76rem;color:var(--on-dark-faint);
}
.foot-bot ul{display:flex;gap:20px;flex-wrap:wrap}
.foot-bot li{margin:0}
.foot-bot a{font-size:.76rem;color:var(--on-dark-faint)}

/* ------------------------------------------------------- 21. STICKY MOBILE CTA */
.sticky-cta{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:65;
  background:rgba(242,239,230,.96);backdrop-filter:blur(12px);
  border-top:1px solid var(--line-blue);
  padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
  gap:10px;
}
.sticky-cta .btn{flex:1;min-height:46px;justify-content:center;font-size:.82rem;padding:0 14px}

/* ---------------------------------------------------------------- 22. MOTION */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}
.d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s}.d4{transition-delay:.32s}

/* --------------------------------------------------------- 23. BREAKPOINTS */
@media (max-width:1180px){
  .menu{display:none}
  .burger{display:flex}
  .nav-cta .btn{display:none}
  .split-a,.split-b,.split-c,.split-d,.split-head{grid-template-columns:1fr}
  .ruled-4{grid-template-columns:1fr 1fr}
  .ruled-4>*:nth-child(odd){border-left:0;padding-left:0}
  .ruled-3{grid-template-columns:1fr}
  .ruled-3>*+*{border-left:0;padding-left:0}
  .tierlist{grid-template-columns:1fr}
  .tier+.tier{border-left:0;padding-left:0}
  .pitem{grid-template-columns:1fr}
  .pitem:nth-child(even) .pitem-media{order:0}
  .sticky-cta{display:flex}
  body{padding-bottom:74px}
  .foot-top{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  /* the scrim turns bottom-up so the copy still sits on linen when the
     photograph is cropped to a portrait-ish frame */
  .hero-media::after,.phero .hero-media::after{
    background:linear-gradient(to top,
      rgba(242,239,230,.985) 0%,
      rgba(242,239,230,.96) 42%,
      rgba(242,239,230,.72) 66%,
      rgba(242,239,230,.3) 88%,
      rgba(242,239,230,.12) 100%);
  }
  .cta-band .hero-media::after{
    background:linear-gradient(to top,
      rgba(220,232,242,.985) 0%,
      rgba(220,232,242,.95) 44%,
      rgba(220,232,242,.7) 70%,
      rgba(220,232,242,.26) 90%,
      rgba(220,232,242,.1) 100%);
  }
}
@media (max-width:720px){
  .util-in{justify-content:center;gap:16px;font-size:.66rem}
  .nav-in{min-height:66px}
  .wm-name{font-size:1.6rem}
  .hero{min-height:0}
  .hero-in{padding:150px 0 44px}
  .hero-foot .pillars-line{gap:14px;font-size:.64rem}
  .ruled-2,.ruled-4{grid-template-columns:1fr}
  .ruled>*{border-left:0!important;padding-left:0!important;padding-right:0}
  .fgrid,.opts,.rs-grid{grid-template-columns:1fr}
  .checks.two{columns:1}
  .pair{grid-template-columns:1fr;gap:4px}
  .pair figure:first-child .fig{border-radius:var(--r-lg) var(--r-lg) 0 0}
  .pair figure:last-child .fig{border-radius:0 0 var(--r-lg) var(--r-lg)}
  .foot-top{grid-template-columns:1fr;gap:34px}
  .btns .btn{width:100%;justify-content:space-between}
  .ba{aspect-ratio:4/3}
  .process li{padding-left:30px}
}

/* the kill switch — last rule in the file */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation:none!important;transition:none!important;scroll-behavior:auto!important;
  }
  .reveal{opacity:1;transform:none}
  .fig img{opacity:1}
}