/* The Loft — site stylesheet
   Design tokens audited from the approved prototypes (tokens.css / DESIGN-SYSTEM.md).
   Two accessibility-tuned tokens replace failing pairs:
     --muted-text (#70685C) replaces ink-500 for muted TEXT  (>=4.5:1 on paper/sand/card)
     --gold-link  (#836515) replaces gold-800 for small link TEXT (>=4.5:1 on paper/sand) */

:root {
  /* Ink */
  --ink-900:#170E00; --ink-800:#2A2114; --ink-700:#4A4234; --ink-600:#5B5142; --ink-500:#8A8071;
  /* Gold */
  --gold-500:#FFB135; --gold-600:#F0A21F; --gold-300:#FFC659; --gold-800:#8A6A16;
  /* Surfaces */
  --paper:#F4F1EB; --card:#FBFBFA; --sand:#EFE9DF; --on-dark:#FBFBFA;
  /* Accessibility-tuned text */
  --muted-text:#70685C; --gold-link:#836515;
  /* Rules */
  --rule-header:rgba(23,14,0,.08); --rule-card:rgba(23,14,0,.10); --rule-footer:rgba(23,14,0,.14);
  --rule-grid:rgba(23,14,0,.18); --rule-strong:rgba(23,14,0,.40); --rule-on-dark:rgba(251,251,250,.40);
  /* Type */
  --font-display:Georgia,'Times New Roman',serif; --font-ui:Inter,system-ui,sans-serif;
  --track-label:.16em; --track-eyebrow:.24em;
  /* Radii */
  --r-pill:999px; --r-card:16px; --r-panel:18px; --r-band:24px; --r-photo:10px;
  /* Shadows */
  --sh-button:0 6px 16px rgba(23,14,0,.16); --sh-cta:0 8px 20px rgba(23,14,0,.20);
  --sh-menu:0 26px 48px rgba(23,14,0,.13); --sh-sheet:0 18px 34px rgba(23,14,0,.12);
  /* Motion */
  --dur-micro:.18s; --dur-row:.20s; --dur-panel:.46s; --ease-micro:ease; --ease-panel:cubic-bezier(.16,1,.3,1);
  /* Layout */
  --shell-max:1440px; --content-max:1180px; --prose-max:680px;
  --gutter:clamp(16px,4vw,52px); --section-y:clamp(48px,7vw,80px); --content-half:668px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; overflow-x:hidden}
html.sheet-open{overflow:hidden}
body{
  margin:0; background:var(--paper); color:var(--ink-800);
  font-family:var(--font-ui); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img,svg{max-width:100%}
img{display:block}
[hidden]{display:none!important}
h1,h2,h3,h4{font-family:var(--font-display); font-weight:500; margin:0; text-wrap:pretty}
p{text-wrap:pretty}
a{color:var(--ink-900)}
button{font-family:inherit}

/* Focus & skip link (a11y) */
:focus-visible{outline:2px solid var(--ink-900); outline-offset:2px; border-radius:2px}
.skip{
  position:absolute; left:16px; top:-60px; z-index:200;
  background:var(--ink-900); color:var(--on-dark); padding:12px 18px; border-radius:0 0 10px 10px;
  font:500 13px/1 var(--font-ui); text-decoration:none; transition:top var(--dur-micro) var(--ease-micro);
}
.skip:focus{top:0; color:var(--on-dark)}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Shell & bleed */
.shell{max-width:var(--shell-max); margin:0 auto}
/* Full-bleed background, but content re-inset to EXACTLY the section gutter.
   The 50vw terms cancel (margin + padding), so it is immune to scrollbar width. */
.bleed{margin-inline:calc(50% - 50vw); padding-inline:calc(50vw - 50% + var(--gutter))}
.wrap{padding-inline:var(--gutter)}
.section{padding-block:var(--section-y)}

/* ---------- Utility bar ---------- */
.util{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px 26px;
  padding-block:18px; background:var(--ink-900); color:var(--on-dark);
  font:400 11px/1.4 var(--font-ui); letter-spacing:.18em; text-transform:uppercase;
}
.util a{color:var(--on-dark); text-decoration:none; transition:color var(--dur-micro) var(--ease-micro)}
.util a:hover{color:var(--gold-300)}
.util a:focus-visible{outline-color:var(--gold-300)}
.util__left{display:flex; align-items:center; gap:10px 18px; flex-wrap:wrap}
.util__right{display:flex; flex-wrap:wrap; gap:10px 26px; align-items:center}
.util__hours{color:var(--gold-300)}
.util__dir{white-space:nowrap; border-bottom:1px solid var(--rule-on-dark); padding-bottom:3px}
.util__dir:hover{border-bottom-color:var(--gold-300)}
@media (max-width:760px){ .util__addr{display:none} }

/* ---------- Header ---------- */
.hdr{
  position:sticky; top:0; z-index:50; background:var(--paper);
  border-bottom:1px solid var(--rule-header);
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px 20px;
  padding-block:14px;
}
.hdr__logo{display:block; line-height:0; flex:none}
.hdr__logo img{height:34px; width:auto}
.nav{display:flex; align-items:center; flex-wrap:wrap; gap:12px 30px;
  font:400 12px/1 var(--font-ui); letter-spacing:var(--track-label); text-transform:uppercase}
.nav__link{color:var(--ink-800); text-decoration:none; background:none; border:0; margin:0; padding:4px 0; cursor:pointer;
  font:400 12px/1 var(--font-ui); letter-spacing:var(--track-label); text-transform:uppercase;
  display:inline-flex; align-items:center; gap:7px; transition:box-shadow var(--dur-micro) var(--ease-micro)}
.nav__link:hover{box-shadow:inset 0 -1px 0 var(--gold-500)}
.nav__link[aria-current="page"]{color:var(--ink-900); box-shadow:inset 0 -1px 0 var(--gold-500)}
.nav__caret{width:14px; height:14px; flex:none; display:block; transition:transform var(--dur-panel) var(--ease-panel)}
.hdr__mobile{display:none; align-items:center; gap:10px}

/* Buttons */
.btn{display:inline-block; text-decoration:none; text-align:center; border:0; cursor:pointer;
  font:500 13px/1 var(--font-ui); letter-spacing:var(--track-label); text-transform:uppercase;
  border-radius:var(--r-pill); transition:transform var(--dur-micro) var(--ease-micro),
  background var(--dur-micro) var(--ease-micro), box-shadow var(--dur-micro) var(--ease-micro)}
.btn--gold{background:var(--gold-500); color:var(--ink-900); padding:14px 26px}
.btn--gold:hover{background:var(--gold-600); transform:translateY(-1px); box-shadow:var(--sh-button)}
.btn--lg{padding:18px 38px}
.btn--dark{background:var(--ink-900); color:var(--paper); padding:18px 38px}
.btn--dark:hover{background:var(--ink-800); transform:translateY(-1px); box-shadow:var(--sh-cta)}
.btn--sm{padding:16px 24px; font-size:12px; letter-spacing:.14em}

/* Text link with gold underline */
.tlink{color:var(--ink-900); text-decoration:none; border-bottom:1px solid var(--gold-500);
  padding-bottom:4px; transition:border-color var(--dur-micro) var(--ease-micro)}
.tlink:hover{border-bottom-color:var(--ink-900)}
.tlink--label{font:500 12.5px/1 var(--font-ui); letter-spacing:var(--track-label); text-transform:uppercase}

/* ---------- Mega dropdown (desktop) ---------- */
.has-mega{position:static}
.mega{
  position:absolute; left:max(var(--gutter),calc(50vw - var(--content-half)));
  right:max(var(--gutter),calc(50vw - var(--content-half))); top:calc(100% + 10px);
  background:var(--card); border:1px solid var(--rule-card); border-radius:var(--r-card); overflow:hidden;
  text-transform:none; letter-spacing:normal;
  opacity:0; transform:translateY(-14px) scale(.985); clip-path:inset(0 0 100% 0 round 16px);
  visibility:hidden; pointer-events:none; box-shadow:0 26px 48px rgba(23,14,0,0);
  transition:opacity .3s var(--ease-micro), transform var(--dur-panel) var(--ease-panel),
    clip-path .5s var(--ease-panel), box-shadow .4s var(--ease-micro), visibility 0s linear .5s;
}
.has-mega.is-open .mega{
  opacity:1; transform:translateY(0) scale(1); clip-path:inset(0 0 0 0 round 16px);
  visibility:visible; pointer-events:auto; box-shadow:var(--sh-menu); transition-delay:0s;
}
.has-mega.is-open .nav__caret{transform:rotate(180deg)}
/* invisible bridge across the 10px gap so hover survives the trip to the panel (button isn't clipped) */
.nav__services{position:relative}
.has-mega.is-open .nav__services::after{content:""; position:absolute; left:0; right:0; top:100%; height:14px}
.mega__grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr))}
.mega__col{padding:34px 30px 30px; display:flex; flex-direction:column; gap:16px;
  border-right:1px solid var(--rule-card);
  opacity:0; transform:translateY(10px); transition:opacity .4s var(--ease-micro), transform .5s var(--ease-panel)}
.mega__col:last-child{border-right:0}
.has-mega:hover .mega__col, .has-mega.is-open .mega__col{opacity:1; transform:translateY(0)}
.mega__col:nth-child(1){transition-delay:.06s}
.mega__col:nth-child(2){transition-delay:.11s}
.mega__col:nth-child(3){transition-delay:.16s}
.mega__col:nth-child(4){transition-delay:.21s}
.mega__mark{height:40px; width:auto; align-self:flex-start; opacity:.8}
.mega__head{text-decoration:none; color:var(--ink-900); font:500 23px/1.2 var(--font-display);
  border-bottom:1px solid var(--gold-500); padding-bottom:8px; transition:border-color var(--dur-micro) var(--ease-micro)}
.mega__head:hover{border-bottom-color:var(--ink-900)}
.mega__items{display:flex; flex-direction:column; gap:2px; font-size:14.5px}
.mega__items a{display:block; width:fit-content; padding:7px 0; text-decoration:none; color:var(--ink-700);
  transition:color var(--dur-row) var(--ease-micro), transform .3s var(--ease-panel), box-shadow var(--dur-row) var(--ease-micro)}
.mega__items a:hover{color:var(--ink-900); transform:translateX(5px); box-shadow:inset 0 -1px 0 var(--gold-500)}

/* ---------- Mobile sheet (<=760px): fills the screen below the header ---------- */
.hamburger{width:48px; height:48px; flex:none; border-radius:var(--r-pill); border:1px solid rgba(23,14,0,.22);
  background:transparent; cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px}
.hamburger span{display:block; width:18px; height:1.5px; background:var(--ink-900);
  transition:transform var(--dur-panel) var(--ease-panel), opacity var(--dur-micro) var(--ease-micro)}
.hamburger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.hamburger[aria-expanded="true"] span:nth-child(2){opacity:0}
.hamburger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
/* --sheet-top is set by main.js to the header's bottom edge, so the panel always
   starts right under the nav and runs to the bottom of the screen. */
.sheet{position:fixed; left:0; right:0; bottom:0; top:var(--sheet-top,0px); z-index:60;
  background:var(--card); overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
  opacity:0; visibility:hidden; transform:translateY(-12px);
  transition:opacity .3s var(--ease-micro), transform var(--dur-panel) var(--ease-panel), visibility 0s linear var(--dur-panel)}
.sheet.is-open{opacity:1; visibility:visible; transform:none; transition-delay:0s}
.sheet[hidden]{display:none}
.sheet__inner{min-height:calc(100% + 1px); display:flex; flex-direction:column;
  padding:6px var(--gutter) max(24px,env(safe-area-inset-bottom))}
.sheet__group{font:400 11px/1 var(--font-ui); letter-spacing:var(--track-eyebrow); text-transform:uppercase;
  color:var(--ink-600); padding:24px 0 8px}
.sheet a.sheet__link{padding:13px 0; border-bottom:1px solid var(--rule-card); text-decoration:none;
  color:var(--ink-900); font:500 clamp(22px,5.6vw,28px)/1.2 var(--font-display); transition:color var(--dur-micro) var(--ease-micro)}
.sheet a.sheet__link:hover{color:var(--gold-link)}
.sheet a.sheet__link[aria-current="page"]{border-bottom-color:var(--gold-500)}
.sheet__foot{margin-top:auto; padding-top:32px}
.sheet__book{display:block}
.sheet__meta{display:flex; flex-wrap:wrap; gap:10px 22px; padding-top:22px;
  font:400 11px/1.6 var(--font-ui); letter-spacing:var(--track-label); text-transform:uppercase; color:var(--ink-600)}
.sheet__meta a{color:var(--ink-600); text-decoration:none; border-bottom:1px solid var(--rule-strong); padding-bottom:2px}
/* Items rise in sequence once the panel opens */
.sheet__inner > *{opacity:0; transform:translateY(10px);
  transition:opacity .35s var(--ease-micro), transform .55s var(--ease-panel)}
.sheet.is-open .sheet__inner > *{opacity:1; transform:none}
.sheet.is-open .sheet__inner > :nth-child(1){transition-delay:.04s}
.sheet.is-open .sheet__inner > :nth-child(2){transition-delay:.08s}
.sheet.is-open .sheet__inner > :nth-child(3){transition-delay:.12s}
.sheet.is-open .sheet__inner > :nth-child(4){transition-delay:.16s}
.sheet.is-open .sheet__inner > :nth-child(5){transition-delay:.20s}
.sheet.is-open .sheet__inner > :nth-child(6){transition-delay:.24s}
.sheet.is-open .sheet__inner > :nth-child(7){transition-delay:.28s}
.sheet.is-open .sheet__inner > :nth-child(8){transition-delay:.32s}
.sheet.is-open .sheet__inner > :nth-child(n+9){transition-delay:.36s}

/* ---------- Eyebrows / headings ---------- */
.eyebrow{font:400 11.5px/1 var(--font-ui); letter-spacing:var(--track-eyebrow); text-transform:uppercase; color:var(--ink-600)}
.h1{font:500 clamp(32px,5.6vw,64px)/1.06 var(--font-display)}
.h1--page{font-size:clamp(32px,5.4vw,62px); line-height:1.04}
.h2{font:500 clamp(26px,3.4vw,40px)/1.14 var(--font-display)}
.h2--sm{font-size:clamp(24px,3vw,30px); line-height:1.2}
.lead{font-size:16.5px; line-height:1.7; color:var(--ink-700)}

/* ---------- Hero (landing, centered) ---------- */
.hero{padding:44px var(--gutter) 0; text-align:center}
.hero__title{margin:0 auto 22px; max-width:860px}
.hero__lead{margin:0 auto 30px; max-width:540px}
.hero__cta{margin-bottom:40px}
.flowers{display:flex; align-items:flex-end; justify-content:center; flex-wrap:wrap;
  gap:clamp(18px,4vw,44px); opacity:.5; padding-bottom:34px}
.flowers img{display:block}
.hero__photo{position:relative; width:100%; height:clamp(260px,46vw,520px);
  border-radius:clamp(60px,26vw,340px) clamp(60px,26vw,340px) 18px 18px; overflow:hidden}
.hero__photo img{width:100%; height:100%; object-fit:cover}

/* ---------- Hero (inner, split) ---------- */
.phero{padding:clamp(28px,4vw,40px) var(--gutter) 0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr)); gap:clamp(28px,4vw,52px); align-items:center}
.breadcrumb{display:flex; align-items:center; flex-wrap:wrap; gap:10px;
  font:400 11.5px/1 var(--font-ui); letter-spacing:.2em; text-transform:uppercase; color:var(--ink-600); margin-bottom:22px}
.breadcrumb a{color:var(--ink-600); text-decoration:none}
.breadcrumb a:hover{color:var(--ink-900)}
.breadcrumb__sep{color:rgba(23,14,0,.3)}
.phero__title{margin:0 0 20px}
.phero__lead{margin:0 0 28px; max-width:460px}
.phero__actions{display:flex; align-items:center; flex-wrap:wrap; gap:18px 26px}
.phero__photo{height:clamp(300px,42vw,430px); border-radius:clamp(120px,24vw,240px) clamp(120px,24vw,240px) 16px 16px; overflow:hidden}
.phero__photo img{width:100%; height:100%; object-fit:cover}

/* ---------- Service section + cards ---------- */
.svc-head{display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:20px 40px; margin-bottom:34px}
.svc-head p{margin:0; max-width:360px; font-size:14px; line-height:1.7; color:var(--ink-600)}
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr)); gap:18px}
.card{background:var(--card); border:1px solid var(--rule-card); border-radius:var(--r-card); overflow:hidden; display:flex; flex-direction:column}
.card__media{position:relative; height:220px; overflow:hidden}
.card__media img{width:100%; height:100%; object-fit:cover}
.card__notch{position:absolute; left:18px; bottom:-1px; width:74px; height:86px; background:var(--card);
  border-radius:44px 44px 0 0; display:flex; align-items:flex-end; justify-content:center; padding-bottom:10px}
.card__notch img{height:56px; width:auto; opacity:.85}
.card__body{padding:24px 24px 26px; display:flex; flex-direction:column; gap:16px; flex:1}
.card__title{font-size:24px; line-height:1.2}
.card__list{display:flex; flex-direction:column; gap:10px; font-size:14.5px; color:var(--ink-700)}
.card__li{display:flex; align-items:baseline; gap:10px}
.card__dot{width:4px; height:4px; border-radius:50%; background:var(--gold-500); flex:none; transform:translateY(-2px)}
.card__seeall{margin-top:4px; width:fit-content; text-decoration:none; color:var(--ink-900); font-size:14.5px;
  border-bottom:1px solid var(--gold-500); padding-bottom:3px; transition:border-color var(--dur-micro) var(--ease-micro)}
.card__seeall:hover{border-bottom-color:var(--ink-900)}
.card__foot{margin-top:auto; padding-top:18px; border-top:1px solid var(--rule-card)}

/* ---------- Service index rows ---------- */
.idx-group{font:400 11.5px/1 var(--font-ui); letter-spacing:var(--track-eyebrow); text-transform:uppercase;
  color:var(--muted-text); padding:26px 0 10px}
.idx-group--mt{padding-top:34px; border-top:1px solid var(--rule-footer)}
.idx-head{display:flex; align-items:baseline; padding-bottom:14px; border-bottom:1px solid var(--rule-strong)}
.idx-row{display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 20px; padding:16px 8px;
  border-top:1px solid var(--rule-footer); text-decoration:none; color:var(--ink-900);
  transition:background var(--dur-row) var(--ease-micro)}
.idx-row:hover{background:var(--sand)}
.idx-row--last{border-bottom:1px solid var(--rule-strong)}
.idx-row__n{width:40px; flex:none; font:400 12px/1 var(--font-ui); color:var(--muted-text)}
.idx-row__name{flex:1 1 220px; font:500 20px/1.3 var(--font-display)}
.idx-row__desc{flex:2 1 260px; font-size:14px; line-height:1.6; color:var(--ink-600)}
.idx-row__book{flex:none; margin-left:auto; font:600 11px/1 var(--font-ui);
  letter-spacing:var(--track-label); text-transform:uppercase; color:var(--gold-link)}

/* ---------- Reviews ---------- */
.reviews{position:relative; overflow:hidden; background:var(--sand); border-radius:var(--r-band);
  padding:clamp(32px,5vw,64px) clamp(20px,4vw,52px); margin:0 clamp(12px,2vw,24px)}
.reviews__wm{position:absolute; right:-60px; bottom:-30px; width:70%; opacity:.065; pointer-events:none}
.reviews__grid{position:relative; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(290px,100%),1fr));
  gap:clamp(28px,4vw,52px); align-items:center}
.reviews__photo{height:clamp(260px,36vw,420px); border-radius:var(--r-panel); overflow:hidden}
.reviews__photo img{width:100%; height:100%; object-fit:cover}
.reviews__body{display:flex; flex-direction:column; gap:22px}
.reviews__mid{display:flex; flex-direction:column; gap:14px}
.reviews__quote{margin:0; font:500 clamp(22px,2.6vw,30px)/1.34 var(--font-display)}
.reviews__meta{font:400 12px/1 var(--font-ui); letter-spacing:.2em; text-transform:uppercase; color:var(--ink-600)}
.reviews__nav{display:flex; align-items:center; gap:14px; margin-top:6px}
.rbtn{width:46px; height:46px; border-radius:50%; border:1px solid rgba(23,14,0,.28); background:transparent;
  color:var(--ink-900); font-size:15px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:background var(--dur-micro) var(--ease-micro), color var(--dur-micro) var(--ease-micro), border-color var(--dur-micro) var(--ease-micro)}
.rbtn:hover{background:var(--ink-900); color:var(--paper); border-color:var(--ink-900)}
.reviews__count{font:400 11.5px/1 var(--font-ui); letter-spacing:.18em; text-transform:uppercase; color:var(--ink-600); margin-left:8px}

/* ---------- Feature band (about teaser) ---------- */
.feature{padding:var(--section-y) var(--gutter);
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr)); gap:clamp(30px,4vw,56px); align-items:center}
.feature__photo{height:clamp(300px,36vw,420px); border-radius:16px 16px clamp(80px,20vw,260px) clamp(80px,20vw,260px); overflow:hidden}
.feature__photo img{width:100%; height:100%; object-fit:cover}
.feature__title{margin:0 0 18px}
.feature__body{margin:0 0 26px; font-size:15.5px; line-height:1.75; color:var(--ink-700)}

/* ---------- Gallery ---------- */
.gallery-wrap{padding:16px var(--gutter) var(--section-y)}
.gallery{border-top:1px solid var(--rule-grid); border-left:1px solid var(--rule-grid);
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); grid-auto-rows:clamp(150px,20vw,280px)}
.gcell{border-right:1px solid var(--rule-grid); border-bottom:1px solid var(--rule-grid); padding:18px}
.gcell--flower{display:flex; align-items:center; justify-content:center}
.gcell--flower img{height:124px; opacity:.55}
.gcell__img{height:100%; border-radius:var(--r-photo); overflow:hidden}
.gcell__img img{width:100%; height:100%; object-fit:cover}
.span2{grid-column:span 2}.span3{grid-column:span 3}.row2{grid-row:span 2}
.gcell--arch .gcell__img{border-radius:999px 999px 10px 10px}

/* ---------- Prose (about) ---------- */
.prose{max-width:var(--prose-max); margin:0 auto; padding:clamp(40px,6vw,66px) var(--gutter) 0;
  font-size:17px; line-height:1.8; color:var(--ink-800)}
.prose p{margin:0 0 26px}
.prose h2{margin:44px 0 18px; font-size:clamp(24px,3vw,32px); line-height:1.2}
.prose h2:first-child{margin-top:0}
.prose h3{margin:26px 0 10px; font-size:20px; line-height:1.3}
.prose ul{margin:0 0 26px; padding-left:1.25em}
.prose li{margin:0 0 8px; line-height:1.7}
.prose a{color:var(--ink-900); text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--gold-500)}
.prose a:hover{text-decoration-color:var(--ink-900)}
.pquote{margin:40px 0; padding:30px 0; border-top:1px solid rgba(23,14,0,.2); border-bottom:1px solid rgba(23,14,0,.2)}
.pquote p{margin:0; font:500 clamp(21px,2.6vw,27px)/1.38 var(--font-display)}
.figs{max-width:var(--content-max); margin:0 auto; padding:clamp(18px,3vw,32px) var(--gutter) 0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr)); gap:16px}
.fig{margin:0}
.fig__img{height:clamp(220px,28vw,340px); border-radius:var(--r-card); overflow:hidden}
.fig__img img{width:100%; height:100%; object-fit:cover}
.fig--wide{max-width:var(--content-max); margin:0 auto; padding:clamp(18px,3vw,32px) var(--gutter) 0}
.fig--wide .fig__img{height:clamp(240px,36vw,440px)}
.fig figcaption{margin-top:12px; font-size:13.5px; line-height:1.6; color:var(--muted-text)}
.intro-center{padding:clamp(40px,6vw,72px) var(--gutter) 0; max-width:900px; margin:0 auto; text-align:center}
.intro-center h1{margin:22px 0}
.intro-center .lead{max-width:600px; margin:0 auto; font-size:17px; line-height:1.75; color:var(--ink-700)}
.banner{max-width:var(--content-max); margin:0 auto; padding:clamp(28px,4vw,44px) var(--gutter) 0}
.banner__img{height:clamp(240px,42vw,480px); border-radius:var(--r-panel); overflow:hidden}
.banner__img img{width:100%; height:100%; object-fit:cover}

/* ---------- Timeline cards ---------- */
.timeline{max-width:var(--content-max); margin:0 auto; padding:clamp(44px,6vw,70px) var(--gutter) 0}
.timeline__grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr)); gap:18px}
.tcard{background:var(--card); border:1px solid var(--rule-card); border-radius:var(--r-card); padding:26px 24px}
.tcard img{height:40px; margin-bottom:16px; opacity:.75}
.tcard h2,.tcard h3{margin:0 0 8px; font-size:20px; line-height:1.25}
.tcard p{margin:0; font-size:14.5px; line-height:1.65; color:var(--ink-600)}

/* ---------- CTA band (sand, about) ---------- */
.ctaband{max-width:var(--content-max); margin:var(--section-y) auto 0; padding:0 var(--gutter)}
.ctaband__inner{position:relative; overflow:hidden; background:var(--sand); border-radius:var(--r-band);
  padding:clamp(36px,5vw,60px) clamp(20px,4vw,52px);
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr)); gap:clamp(26px,4vw,48px); align-items:center}
.ctaband__wm{position:absolute; right:-60px; bottom:-30px; width:60%; opacity:.065; pointer-events:none}
.ctaband__body{position:relative}
.ctaband__body h2{margin:0 0 16px; font-size:clamp(26px,3.4vw,36px); line-height:1.2}
.ctaband__body p{margin:0 0 26px; font-size:15.5px; line-height:1.75; color:var(--ink-700)}
.ctaband__photo{position:relative; height:clamp(240px,30vw,360px);
  border-radius:16px 16px clamp(80px,18vw,200px) clamp(80px,18vw,200px); overflow:hidden}
.ctaband__photo img{width:100%; height:100%; object-fit:cover}

/* ---------- Quote band (ink, service page) ---------- */
.qband{margin:var(--section-y) var(--gutter) 0; position:relative; overflow:hidden;
  background:var(--ink-900); color:var(--on-dark); border-radius:var(--r-band);
  padding:clamp(36px,5vw,52px) clamp(20px,4vw,44px); text-align:center}
.qband__wm{position:absolute; right:-60px; bottom:-30px; width:60%; opacity:.09; pointer-events:none}
.qband p{position:relative; margin:0 auto 16px; max-width:680px; font:500 clamp(21px,2.6vw,27px)/1.4 var(--font-display)}
.qband__meta{position:relative; font:400 11.5px/1 var(--font-ui); letter-spacing:.2em; text-transform:uppercase; color:var(--gold-300)}

/* ---------- Footer ---------- */
.footer{position:relative; background:var(--sand); color:var(--ink-900);
  padding:0 calc(50vw - 50% + var(--gutter)) 40px; text-align:center; overflow:hidden}
.footer__rule{height:1px; background:var(--rule-footer)}
.footer__crownrow{display:flex; align-items:flex-start; justify-content:center; gap:16px; margin-top:-1px}
.footer__crown{width:220px; height:118px; border:1px solid var(--rule-footer); border-top:none;
  border-radius:0 0 130px 130px; background:var(--sand);
  display:flex; align-items:center; justify-content:center; gap:12px; padding-bottom:10px}
.footer__crown img{height:52px}
.footer__mark{transform:scaleX(-1)}
.footer__man{opacity:.85}
.footer__line{margin:26px auto 22px; max-width:520px; font:500 clamp(26px,3.2vw,34px)/1.24 var(--font-display)}
.footer__cta{margin-bottom:38px}
.footer__grid{display:grid; grid-template-columns:repeat(3,1fr); gap:0;
  border-top:1px solid var(--rule-footer); border-bottom:1px solid var(--rule-footer); text-align:left}
.fcell{padding:34px 30px; border-right:1px solid var(--rule-footer); border-bottom:1px solid var(--rule-footer)}
.fcell:nth-child(3),.fcell:nth-child(6){border-right:0}
.fcell:nth-child(4),.fcell:nth-child(5),.fcell:nth-child(6){border-bottom:0}
.fcell__label{font:400 11px/1 var(--font-ui); letter-spacing:var(--track-eyebrow); text-transform:uppercase; color:var(--ink-600); margin-bottom:14px}
.fcell address{font:500 19px/1.5 var(--font-display); font-style:normal}
.fcell__dirlink{display:inline-block; margin-top:14px; color:var(--ink-900); text-decoration:none; font-size:13.5px;
  border-bottom:1px solid var(--rule-strong); padding-bottom:3px; transition:border-color var(--dur-micro) var(--ease-micro)}
.fcell__dirlink:hover{border-bottom-color:var(--ink-900)}
.week{display:flex; flex-direction:column; gap:9px; font-size:14.5px}
.week__row{display:flex; justify-content:space-between; gap:16px}
.week__row span{white-space:nowrap}
.week__day{color:var(--ink-800)}
.week__val{color:var(--ink-700)}
.week__val--closed{color:var(--muted-text)}
.fcell__phone{margin:0 0 10px; font:500 19px/1.5 var(--font-display)}
.fcell__phone a{text-decoration:none; color:var(--ink-900); transition:box-shadow var(--dur-micro) var(--ease-micro)}
.fcell__phone a:hover{box-shadow:inset 0 -1px 0 var(--rule-strong)}
.fcell__ig{display:block; width:fit-content; color:var(--ink-900); text-decoration:none; font-size:13.5px;
  border-bottom:1px solid var(--rule-strong); padding-bottom:3px; transition:border-color var(--dur-micro) var(--ease-micro)}
.fcell__ig:hover{border-bottom-color:var(--ink-900)}
.fnav{display:flex; flex-direction:column; gap:2px; font-size:14.5px}
.fnav a{display:block; width:fit-content; padding:8px 0; text-decoration:none; color:var(--ink-900);
  transition:color var(--dur-row) var(--ease-micro), transform .3s var(--ease-panel), box-shadow var(--dur-row) var(--ease-micro)}
.fnav a:hover{color:var(--gold-link); transform:translateX(5px); box-shadow:inset 0 -2px 0 var(--gold-500)}
.footer__horizon{width:100%; height:auto; margin-top:26px; opacity:.4}
.footer__legal{display:flex; justify-content:center; flex-wrap:wrap; gap:12px 22px;
  font:400 11px/1 var(--font-ui); letter-spacing:var(--track-label); text-transform:uppercase; color:var(--ink-600);
  margin-top:10px; padding-top:32px}
.footer__legal a{color:var(--ink-600); text-decoration:none; transition:color var(--dur-micro) var(--ease-micro)}
.footer__legal a:hover{color:var(--ink-900)}
.footer__legal .sep{color:rgba(23,14,0,.3)}

/* ---------- Responsive: single 760px breakpoint ---------- */
@media (max-width:760px){
  .hdr{flex-wrap:nowrap; gap:10px}
  .hdr__mobile{display:flex; flex:none}
  .nav{display:none}
  .footer__grid{grid-template-columns:1fr}
  .fcell{border-right:0}
  .fcell{border-bottom:1px solid var(--rule-footer)}
  .fcell:last-child{border-bottom:0}
  /* Gallery: drop the masonry spans, stack to one clean column */
  .gallery{grid-template-columns:1fr; grid-auto-rows:auto}
  .gallery .span2, .gallery .span3{grid-column:auto}
  .gallery .row2{grid-row:auto}
  .gcell__img{height:clamp(220px,62vw,320px)}
  .gcell--flower{display:none}
}
/* Decorative SVGs keep their intrinsic aspect (height-driven -> auto width; width-driven -> auto height) */
.flowers img, .gcell--flower img, .footer__crown img, .mega__mark, .card__notch img, .tcard img{width:auto}
.reviews__wm, .qband__wm, .ctaband__wm{height:auto}
@media (min-width:761px){
  .sheet{display:none}
  /* Testimonial column spans the image height: eyebrow top, quote centered, arrows bottom.
     Long quotes keep the image fixed and push the eyebrow/arrows above and below it. */
  .reviews__body{justify-content:space-between; min-height:clamp(260px,36vw,420px)}
}

/* ---------- Scroll reveal ---------- */
/* .reveal: a block fades up once as it enters the viewport.
   .reveal--stagger: the block's direct children fade up in sequence.
   Active only when main.js adds html.js (IntersectionObserver present, no reduced-motion). */
@media (prefers-reduced-motion:no-preference){
  .js .reveal, .js .reveal--stagger > *{opacity:0; transform:translateY(18px);
    transition:opacity .7s var(--ease-micro), transform .9s var(--ease-panel)}
  .js .reveal.is-visible, .js .reveal--stagger.is-visible > *{opacity:1; transform:none}
  .js .reveal--stagger.is-visible > :nth-child(2){transition-delay:.08s}
  .js .reveal--stagger.is-visible > :nth-child(3){transition-delay:.16s}
  .js .reveal--stagger.is-visible > :nth-child(4){transition-delay:.24s}
  .js .reveal--stagger.is-visible > :nth-child(5){transition-delay:.32s}
  .js .reveal--stagger.is-visible > :nth-child(6){transition-delay:.40s}
  .js .reveal--stagger.is-visible > :nth-child(n+7){transition-delay:.48s}
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important; animation-iteration-count:1!important;
    transition-duration:.001ms!important; scroll-behavior:auto!important}
  .mega{transition:opacity .001ms, visibility .001ms}
  .mega__col{transition:none}
}
html{scroll-behavior:smooth}