/* ============================================================
   SUMMIT & STONE — Design System v2 (per the owner's notes)
   Headings: Cormorant Garamond · Body: Source Sans 3
   Wordmark: always vintage gold, never white · Crest prominent
   ============================================================ */
:root{
  --green-0:#0B1510;      /* deepest field */
  --green-1:#0E1F18;      /* house green   */
  --green-2:#13291F;      /* raised panel  */
  --green-3:#183326;      /* hover panel   */
  --gold:#C1972F;         /* antique bronze/vintage gold (crest match) */
  --gold-bright:#D8BD83;
  --gold-pale:#E7D3A3;
  --cream:#F2EAD8;        /* body text on green — copy only, never the wordmark */
  --sage:#A8B8A5;
  --taupe:#8C9B8A;
  --hairline:rgba(193,151,47,.32);
  --hairline-soft:rgba(193,151,47,.15);
  --shadow:0 30px 80px rgba(0,0,0,.5);
  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans:"Source Sans 3","Source Sans Pro",system-ui,sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
  --maxw:1240px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--green-1);color:var(--cream);
  font-family:var(--sans);font-weight:300;font-size:18.5px;line-height:1.75;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;
}
h1,h2,h3,h4{font-family:var(--serif);font-weight:500;margin:0;line-height:1.12;letter-spacing:.012em}
p{margin:0 0 1.15em}
a{color:inherit;text-decoration:none}
img,svg,video{display:block;max-width:100%}
.wrap{width:min(var(--maxw),91vw);margin-inline:auto}
.wrap--narrow{width:min(860px,91vw);margin-inline:auto}

/* --- texture: quiet vertical grain --- */
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.35;
  background:
   radial-gradient(120% 70% at 50% 0%, rgba(24,51,38,.35) 0%, transparent 60%),
   repeating-linear-gradient(90deg, rgba(255,255,255,.011) 0 1px, transparent 1px 7px);}
main,header,footer{position:relative;z-index:1}

/* ============ WORDMARK (the law: gold, never white; big S's) ============ */
.wordmark{font-family:var(--serif);font-weight:600;color:var(--gold);letter-spacing:.16em;text-transform:uppercase;line-height:1;white-space:nowrap}
.wordmark .S{font-size:1.28em;letter-spacing:.1em}
.wordmark .amp{color:inherit;font-weight:inherit;font-style:italic;font-size:1em;margin:0 .09em}
.wordmark--bright{color:var(--gold-bright)}
.tagline{font-family:var(--sans);font-weight:400;font-size:.62rem;letter-spacing:.42em;text-transform:uppercase;color:var(--gold-bright);opacity:.92}

/* ============ TYPE SCALE ============ */
.display{font-size:clamp(2.7rem,6vw,5rem);font-weight:500}
.display i,.display em{font-style:italic;font-weight:500;color:var(--gold-pale)}
.h2{font-size:clamp(2rem,4.2vw,3.3rem)}
.h3{font-size:clamp(1.45rem,2.4vw,1.9rem)}
.kicker{font-family:var(--sans);font-weight:600;font-size:.72rem;letter-spacing:.4em;text-transform:uppercase;color:var(--gold-bright);margin:0 0 18px}
.lede{font-size:1.28rem;line-height:1.7;color:var(--cream);font-weight:300}
.lede em{font-family:var(--serif);font-style:italic;color:var(--gold-pale);font-size:1.06em}
.muted{color:var(--sage)}
.gold{color:var(--gold-bright)}
.rule{border:0;width:74px;height:1px;background:linear-gradient(90deg,var(--gold),transparent);margin:0}
.rule--center{margin-inline:auto;background:linear-gradient(90deg,transparent,var(--gold),transparent)}

/* ============ BUTTONS ============ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.7em;cursor:pointer;border:0;background:none;
  font-family:var(--sans);font-weight:600;font-size:.78rem;letter-spacing:.26em;text-transform:uppercase;
  padding:17px 34px;border-radius:2px;transition:.5s var(--ease);position:relative}
.btn--gold{background:linear-gradient(180deg,#D8BD83,#C1972F);color:#1d1508;box-shadow:0 14px 34px -14px rgba(193,151,47,.55)}
.btn--gold:hover{transform:translateY(-2px);filter:brightness(1.06);box-shadow:0 20px 44px -16px rgba(193,151,47,.7)}
.btn--ghost{border:1px solid var(--hairline);color:var(--gold-bright)}
.btn--ghost:hover{border-color:var(--gold);background:rgba(193,151,47,.08);color:var(--gold-pale)}
.btn--line{padding:8px 2px;color:var(--gold-bright);letter-spacing:.22em}
.btn--line::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--gold);transform:scaleX(.35);transform-origin:left;opacity:.5;transition:.5s var(--ease)}
.btn--line:hover::after{transform:scaleX(1);opacity:1}

/* ============ NAV ============ */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;transition:.55s var(--ease)}
.nav .bar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:110px;transition:.5s var(--ease)}
.nav.scrolled{background:rgba(11,21,16,.9);backdrop-filter:blur(16px);border-bottom:1px solid var(--hairline-soft)}
.nav.scrolled .bar{height:88px}
.nav-links{display:flex;gap:34px;align-items:center}
.nav-links--r{justify-content:flex-end}
.nav-links a{font-family:var(--sans);font-weight:600;font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:var(--cream);opacity:.85;position:relative;padding:8px 0;transition:.4s}
.nav-links a::after{content:"";position:absolute;left:50%;right:50%;bottom:2px;height:1px;background:var(--gold);transition:.45s var(--ease)}
.nav-links a:hover{color:var(--gold-pale);opacity:1}
.nav-links a:hover::after{left:0;right:0}
.nav-links a.is-here{color:var(--gold-bright);opacity:1}
.nav-lockup{display:flex;flex-direction:column;align-items:center;gap:7px;padding:0 30px}
.nav-lockup .crest{width:44px;transition:.5s var(--ease)}
.nav.scrolled .nav-lockup .crest{width:36px}
.nav-lockup .wordmark{font-size:1.06rem}
.nav-cta{margin-left:6px}
.nav .btn--ghost{padding:12px 22px;font-size:.68rem}
.hamburger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:10px}
.hamburger span{width:26px;height:1.5px;background:var(--gold-bright);transition:.35s}

/* mobile menu */
.m-menu{position:fixed;inset:0;z-index:99;background:rgba(9,17,13,.985);backdrop-filter:blur(12px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  opacity:0;pointer-events:none;transition:.5s var(--ease)}
.m-menu.open{opacity:1;pointer-events:auto}
.m-menu a{font-family:var(--serif);font-size:1.7rem;color:var(--cream);padding:9px 0;letter-spacing:.04em}
.m-menu a:hover{color:var(--gold-pale)}
.m-menu .m-small{font-family:var(--sans);font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;color:var(--taupe);margin-top:16px}
.m-menu .crest{width:52px;margin-bottom:18px}

/* ============ HERO ============ */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden}
.hero-media{position:absolute;inset:0}
.hero-media video,.hero-media img{width:100%;height:100%;object-fit:cover}
/* Steward Settings: warm film vs uploaded still + Ken Burns */
.hero-media{overflow:hidden}
.hero-media .hero-plate-alt-wrap{
  position:absolute;inset:0;z-index:1;overflow:hidden;
  display:none;pointer-events:none;
}
.hero-media .hero-plate-alt{
  display:block;width:112%;height:112%;max-width:none;
  object-fit:cover;object-position:center;
  will-change:transform;transform-origin:center center;
}
.hero-media.is-custom video{display:none!important;visibility:hidden!important}
.hero-media.is-custom .hero-plate-alt-wrap{display:block}
.hero-media.is-custom .hero-plate-alt{
  animation:hero-kenburns 18s ease-in-out infinite alternate;
}
@keyframes hero-kenburns{
  0%{transform:scale(1) translate3d(0,0,0)}
  100%{transform:scale(1.18) translate3d(-4.5%,-3%,0)}
}
@media (prefers-reduced-motion:reduce){
  .hero-media.is-custom .hero-plate-alt{animation:none;transform:scale(1.08)}
}
.hero-veil{position:absolute;inset:0;background:
  radial-gradient(130% 90% at 50% 0%, transparent 35%, rgba(8,15,11,.6) 100%),
  linear-gradient(180deg, rgba(8,15,11,.62) 0%, rgba(8,15,11,.15) 34%, rgba(8,15,11,.4) 62%, rgba(9,17,13,.97) 100%)}
.hero-inner{position:relative;z-index:2;width:100%;padding-bottom:min(8vh,84px);text-align:center}
.hero-crest{width:clamp(88px,10vw,128px);margin:0 auto 18px;filter:drop-shadow(0 10px 30px rgba(0,0,0,.5))}
.hero-wordmark{font-size:clamp(1.7rem,4.2vw,3rem)}
.hero-tagline{margin-top:12px;font-size:clamp(.6rem,1vw,.74rem)}
.hero-rule{width:min(430px,70vw);height:1px;margin:26px auto;background:linear-gradient(90deg,transparent,var(--gold),transparent);position:relative}
.hero-rule::after{content:"✦";position:absolute;left:50%;top:50%;transform:translate(-50%,-52%);color:var(--gold);font-size:11px;background:transparent}
.hero-head{font-size:clamp(2rem,4.6vw,3.9rem);font-style:italic;font-weight:500;color:var(--cream);max-width:21ch;margin-inline:auto}
.hero-sub{font-family:var(--serif);font-size:clamp(1.15rem,2vw,1.5rem);color:var(--gold-pale);margin-top:18px;letter-spacing:.04em}
.hero-serve{font-family:var(--sans);font-weight:400;font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;color:var(--sage);margin-top:14px}
.hero-ctas{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-top:34px}
.hero-film{display:inline-flex;align-items:center;gap:12px;margin-top:26px;background:none;border:0;cursor:pointer;color:var(--gold-bright)}
.hero-film .ring{width:42px;height:42px;border:1px solid var(--hairline);border-radius:50%;display:grid;place-items:center;font-size:9px;padding-left:3px;transition:.5s var(--ease)}
.hero-film span.lab{font-family:var(--sans);font-weight:600;font-size:.7rem;letter-spacing:.26em;text-transform:uppercase}
.hero-film:hover .ring{border-color:var(--gold);transform:scale(1.07)}
.hero-scroll{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);z-index:3;display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--taupe);font-family:var(--sans);font-size:.58rem;letter-spacing:.4em;text-transform:uppercase}
.hero-scroll i{width:1px;height:42px;background:linear-gradient(var(--gold),transparent);animation:cue 2.6s var(--ease) infinite}
@keyframes cue{0%{transform:scaleY(.15);transform-origin:top;opacity:.2}45%{transform:scaleY(1);opacity:1}100%{transform:scaleY(.15);transform-origin:bottom;opacity:.2}}

/* ============ SECTIONS ============ */
.section{padding:clamp(90px,11vh,140px) 0;position:relative}
.section--tight{padding:clamp(80px,10vh,120px) 0}
.section--deep{background:var(--green-0)}
.section--panel{background:linear-gradient(180deg,var(--green-0),var(--green-1))}
.sec-num{position:absolute;top:clamp(40px,6vh,70px);font-family:var(--serif);font-style:italic;font-size:clamp(3.4rem,7vw,6rem);color:rgba(193,151,47,.09);line-height:1;user-select:none}
.sec-num--l{left:4vw}.sec-num--r{right:4vw}

/* stanza — Powell's creed lines */
.stanza{font-family:var(--serif);font-size:clamp(1.35rem,2.5vw,1.9rem);line-height:1.55;color:var(--cream)}
.stanza .accent{font-style:italic;color:var(--gold-pale)}
.creed{display:grid;gap:14px;margin:34px 0}
.creed p{margin:0;font-family:var(--serif);font-size:clamp(1.15rem,1.9vw,1.5rem);color:var(--cream)}
.creed p b{font-weight:600;color:var(--gold-pale);font-style:italic}

/* two-column feature */
.feature{display:grid;grid-template-columns:1.05fr .95fr;gap:min(6.5vw,84px);align-items:center}
.feature--flip{grid-template-columns:.95fr 1.05fr}
.frame{position:relative;border:1px solid var(--hairline);padding:10px;background:linear-gradient(180deg,var(--green-2),var(--green-0));box-shadow:var(--shadow)}
.frame img{width:100%;height:100%;object-fit:cover;aspect-ratio:15/10}
.frame--tall img{aspect-ratio:4/5}
.frame .plate{position:absolute;left:50%;bottom:-14px;transform:translateX(-50%);background:var(--green-0);border:1px solid var(--hairline);color:var(--gold-bright);font-family:var(--sans);font-weight:600;font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;padding:8px 18px;white-space:nowrap}

/* WHY — five pillars */
.pillars{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--hairline-soft);border:1px solid var(--hairline-soft);margin-top:64px}
.pillar{background:var(--green-1);padding:40px 26px 44px;text-align:center;transition:.5s var(--ease)}
.pillar:hover{background:var(--green-2)}
.pillar .ico{width:44px;height:44px;margin:0 auto 22px;color:var(--gold)}
.pillar h3{font-size:1.28rem;color:var(--gold-pale)}
.pillar p{font-size:.95rem;color:var(--sage);margin:12px 0 0;line-height:1.6}

/* CABIN captions */
.captions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:26px}
.cap{border:1px solid var(--hairline-soft);border-radius:2px;padding:10px 16px;font-family:var(--sans);font-weight:400;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-bright);background:rgba(193,151,47,.05)}
.cap b{font-weight:600;color:var(--gold-pale)}

/* panorama */
.panorama{position:relative;margin-top:60px;border:1px solid var(--hairline);box-shadow:var(--shadow)}
.panorama img{width:100%;aspect-ratio:21/9;object-fit:cover}
.panorama .veil{position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(9,17,13,.85))}
.panorama .label{position:absolute;left:0;right:0;bottom:0;padding:26px;text-align:center;font-family:var(--sans);font-weight:600;font-size:.68rem;letter-spacing:.32em;text-transform:uppercase;color:var(--gold-bright)}

/* testimonials */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:44px;margin-top:60px}
.quote{text-align:center}
.quote .stars{color:var(--gold);letter-spacing:.32em;font-size:.8rem;margin-bottom:16px}
.quote p{font-family:var(--serif);font-style:italic;font-size:1.22rem;line-height:1.55;color:var(--cream)}
.quote .who{font-family:var(--sans);font-weight:600;font-size:.64rem;letter-spacing:.26em;text-transform:uppercase;color:var(--taupe);margin-top:14px}

/* service area */
.area{display:grid;grid-template-columns:1.1fr .9fr;gap:min(6vw,80px);align-items:center}
.area-map{border:1px solid var(--hairline);background:linear-gradient(180deg,var(--green-2),var(--green-0));box-shadow:var(--shadow);padding:14px}
.area-map svg{width:100%;height:auto}
.svc-list{display:grid;gap:0}
.svc{display:flex;align-items:baseline;gap:16px;padding:15px 4px;border-bottom:1px solid var(--hairline-soft);font-family:var(--serif);font-size:1.3rem;color:var(--cream);transition:.4s;flex-wrap:wrap;min-width:0}
a.svc:hover{color:var(--gold-pale);padding-left:10px}
a.svc{cursor:pointer}
.svc .d{color:var(--gold);font-size:.7rem}
.svc small{font-family:var(--sans);font-weight:400;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--taupe);margin-left:auto;overflow-wrap:anywhere;text-align:right}

/* closing CTA */
.cta-final{text-align:center;position:relative;overflow:hidden}
.cta-final .crest{width:64px;margin:0 auto 22px;opacity:.9}
.cta-final .h2 i{color:var(--gold-pale)}

/* ============ FOOTER ============ */
footer{background:var(--green-0);border-top:1px solid var(--hairline-soft);padding:78px 0 40px}
.f-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:48px}
.f-brand .crest{width:52px;margin-bottom:16px}
.f-brand .wordmark{font-size:1.15rem}
.f-brand p{color:var(--taupe);font-size:.95rem;margin-top:16px;max-width:30ch;line-height:1.7}
.f-col h2{font-family:var(--sans);font-weight:600;font-size:.66rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-bright);margin:0 0 18px}
.f-col a,.f-col p{display:block;color:var(--cream);opacity:.8;font-size:.95rem;margin-bottom:11px;transition:.3s}
.f-col a:hover{color:var(--gold-pale);opacity:1}
.f-bot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;margin-top:60px;padding-top:28px;border-top:1px solid var(--hairline-soft);font-family:var(--sans);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--taupe)}
.f-bot a:hover{color:var(--gold-pale)}

/* ── Touch targets ────────────────────────────────────────────────────────
   A guest reads this site on a telephone and an iPad, and so does the owner.
   Every one of these was under the 44px a finger actually needs.

   Vertical padding only, and never a pseudo-element: .nav-lockup::after and
   .nav-links a::after already carry the brass detail and the underline, and
   this must not go near either.

   On an inline link, vertical padding grows the area without moving a line of
   type, so the pages look exactly as they did. Where the link is a block, the
   margin gives back most of what the padding takes. */
.f-col a{padding:9px 0;margin-bottom:2px}
.f-bot a{padding:13px 2px}
.m-menu .m-small a{padding:10px 2px}
.svc small a{padding:15px 0}
p a[href^="tel:"],p a[href^="mailto:"]{padding:12px 0}
.btn{min-height:44px}
p.muted a{padding:14px 0}

/* ============ FILM MODAL ============ */
.film-modal{position:fixed;inset:0;z-index:1200;display:flex;align-items:center;justify-content:center;padding:clamp(16px,4vw,40px)}
.film-modal[hidden]{display:none}
.film-scrim{position:absolute;inset:0;background:rgba(6,10,8,.93);backdrop-filter:blur(10px)}
.film-shell{position:relative;z-index:2;width:min(1080px,96vw)}
.film-crest{margin:0 auto 16px;display:block;width:40px}
.film-frame{border:1px solid var(--hairline);background:#000;box-shadow:var(--shadow)}
.film-frame video{width:100%;aspect-ratio:16/9;height:auto;background:#000}
.film-close{position:absolute;top:-56px;right:0;width:44px;height:44px;background:none;border:1px solid var(--hairline);border-radius:50%;color:var(--cream);cursor:pointer;font-size:15px;transition:.4s}
.film-close:hover{border-color:var(--gold);color:var(--gold-pale)}
.vh{position:absolute!important;clip:rect(0 0 0 0);clip-path:inset(50%);width:1px;height:1px;overflow:hidden;white-space:nowrap}

/* ============ REVEALS ============ */
.reveal{opacity:0;transform:translateY(26px);transition:1.05s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.1s}.reveal.d2{transition-delay:.2s}.reveal.d3{transition-delay:.3s}

/* ============ RESPONSIVE ============ */
@media(max-width:1080px){
  .pillars{grid-template-columns:repeat(3,1fr)}
  .pillar:nth-child(4),.pillar:nth-child(5){border-top:1px solid var(--hairline-soft)}
  .feature,.feature--flip,.area{grid-template-columns:1fr;gap:44px}
  .quotes{grid-template-columns:1fr;gap:36px}
}
@media(max-width:900px){
  .nav-links{display:none}
  .nav .bar{grid-template-columns:auto 1fr auto;height:92px}
  .nav-lockup{flex-direction:row;gap:12px;padding:0}
  .nav-lockup .crest{width:34px}
  .nav-lockup .wordmark{font-size:.95rem}
  .hamburger{display:flex;justify-self:end}
  .pillars{grid-template-columns:1fr}
  .f-grid{grid-template-columns:1fr 1fr;gap:36px}
  .hero-ctas .btn{width:min(320px,84vw)}
}
@media(max-width:560px){
  body{font-size:17.5px}
  .f-grid{grid-template-columns:1fr;gap:40px}
  footer{text-align:center}
  .f-brand .crest{margin-inline:auto}
  .f-brand p{margin-inline:auto}
  .f-bot{flex-direction:column;justify-content:center;text-align:center}
  /* The footer's two lines are sized to their content by align-items:center,
     and at this width the type grows to .8rem. Without these they cannot
     wrap, and every page drifts 14px sideways on a telephone. */
  .f-bot div{justify-content:center;flex-wrap:wrap;max-width:100%}
  .fld{margin-bottom:12px;gap:6px}
  .fld input,.fld select,.fld textarea{padding:11px 12px}
  .panorama img{aspect-ratio:4/3}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
  html{scroll-behavior:auto}
}

/* ============ INTERIOR PAGES (Phase B) ============ */
.page-hero{padding:180px 0 70px;text-align:center;background:
  radial-gradient(90% 70% at 50% 0%, rgba(24,51,38,.55) 0%, transparent 70%)}
.page-hero .crest-sm{width:64px;margin:0 auto 18px;display:block;opacity:.95}
.page-hero h1{font-size:clamp(2.6rem,5.4vw,4.4rem);font-style:italic;color:var(--cream)}
.page-hero .lede{max-width:52ch;margin:20px auto 0}
.marker{border:1px dashed var(--hairline);background:rgba(193,151,47,.04);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:10px;padding:34px;min-height:280px}
.marker .cam{width:34px;height:34px;color:var(--gold);opacity:.8}
.marker .t{font-family:var(--sans);font-weight:600;font-size:.66rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-bright)}
.marker .d{font-family:var(--serif);font-style:italic;font-size:1.05rem;color:var(--sage);max-width:38ch}
.journey{display:grid;gap:0;margin-top:24px;position:relative}
.leg{display:grid;grid-template-columns:84px 1fr;gap:26px;padding:38px 0;border-bottom:1px solid var(--hairline-soft)}
.leg:last-child{border-bottom:0}
.leg .no{font-family:var(--serif);font-style:italic;font-size:2.4rem;color:var(--gold);line-height:1}
.leg h3{font-size:1.55rem;color:var(--gold-pale)}
.leg p{color:var(--cream);opacity:.9;margin:10px 0 0;max-width:58ch}
.amen-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--hairline-soft);border:1px solid var(--hairline-soft);margin-top:50px}
.amen{background:var(--green-1);padding:30px 26px;text-align:center}
.amen .t{font-family:var(--serif);font-size:1.2rem;color:var(--gold-pale)}
.amen .s{font-size:.88rem;color:var(--sage);margin-top:8px;line-height:1.6}
.svc-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:26px;margin-top:54px}
.svc-card{border:1px solid var(--hairline-soft);background:linear-gradient(180deg,var(--green-2),var(--green-1));padding:34px 32px;transition:.5s var(--ease)}
.svc-card:hover{border-color:var(--hairline);transform:translateY(-3px)}
.svc-card h3{font-size:1.45rem;color:var(--gold-pale)}
.svc-card p{font-size:.98rem;color:var(--sage);margin:10px 0 0;line-height:1.7}
.flagship{position:relative;border:1px solid var(--hairline);box-shadow:var(--shadow);overflow:hidden;margin-top:70px}
.flagship img{width:100%;aspect-ratio:21/10;object-fit:cover}
.flagship .veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(9,17,13,.25),rgba(9,17,13,.92))}
.flagship .body{position:absolute;left:0;right:0;bottom:0;padding:clamp(26px,5vw,54px);text-align:center}
.flagship .body h2 i{color:var(--gold-pale)}
.bio-figure{position:relative}
.bio-figure .frame img{aspect-ratio:4/5}
.mission-card{border:1px solid var(--hairline);background:linear-gradient(180deg,var(--green-2),var(--green-0));box-shadow:var(--shadow);padding:clamp(34px,5vw,60px);text-align:center}
.mission-card .k{font-family:var(--sans);font-weight:600;font-size:.72rem;letter-spacing:.4em;text-transform:uppercase;color:var(--gold-bright);border-bottom:1px solid var(--hairline);display:inline-block;padding-bottom:10px;margin-bottom:26px}
.mission-card p{font-family:var(--serif);font-size:clamp(1.2rem,2vw,1.5rem);line-height:1.75;color:var(--gold-pale);margin:0;text-align:left}
.cred{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--hairline-soft);border:1px solid var(--hairline-soft);margin-top:54px}
.cred .c{background:var(--green-0);padding:40px 22px;text-align:center}
.cred .n{font-family:var(--serif);font-size:1.5rem;color:var(--gold-bright);font-style:italic}
.cred .k{font-family:var(--sans);font-weight:600;font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;color:var(--taupe);margin-top:8px;line-height:1.7}
@media(max-width:900px){.amen-grid{grid-template-columns:1fr 1fr}.svc-cards{grid-template-columns:1fr}.cred{grid-template-columns:1fr 1fr}.leg{grid-template-columns:56px 1fr;gap:18px}}

/* ============ PHASE C: forms, faq, gallery, contact ============ */
.form-card{border:1px solid var(--hairline);background:linear-gradient(180deg,var(--green-2),var(--green-0));box-shadow:var(--shadow);padding:clamp(28px,4vw,50px)}
.f-sec{font-family:var(--sans);font-weight:600;font-size:.68rem;letter-spacing:.32em;text-transform:uppercase;color:var(--gold-bright);border-bottom:1px solid var(--hairline-soft);padding-bottom:12px;margin:38px 0 24px}
.f-sec:first-child{margin-top:0}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:18px}
.fld{display:flex;flex-direction:column;gap:8px;margin-bottom:18px}
.fld label{font-family:var(--sans);font-weight:600;font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-bright)}
.fld label small{color:var(--taupe);letter-spacing:.08em;text-transform:none;font-weight:400}
.fld input,.fld select,.fld textarea{background:var(--green-0);border:1px solid var(--hairline-soft);border-radius:2px;color:var(--cream);font-family:var(--sans);font-weight:300;font-size:1rem;padding:13px 14px;outline:none;transition:.35s;width:100%}
.fld textarea{min-height:92px;resize:vertical}
.fld input:focus,.fld select:focus,.fld textarea:focus{border-color:var(--gold)}
.fld select option{background:#12241b}
.fld input::-webkit-calendar-picker-indicator{filter:invert(.75) sepia(1) saturate(3) hue-rotate(5deg);opacity:.75;cursor:pointer}
.fld-reveal{display:grid;grid-template-rows:0fr;opacity:0;margin:0;pointer-events:none;transition:grid-template-rows .35s ease,opacity .3s ease,margin .35s ease}
.fld-reveal.is-open{grid-template-rows:1fr;opacity:1;margin-top:4px;pointer-events:auto}
.fld-reveal__inner{overflow:hidden;min-height:0;display:flex;flex-direction:column;gap:8px}
.form-note{font-size:.82rem;color:var(--taupe);line-height:1.7}
.form-alert{display:none;margin:0 0 18px;padding:14px 16px;border:1px solid var(--gold);border-left-width:3px;border-radius:2px;background:rgba(193,151,47,.08);font-family:var(--sans);font-weight:300;font-size:.92rem;line-height:1.65;color:var(--cream)}
.form-alert.is-shown{display:block}
.confirm-card{text-align:center;padding:30px 10px}
.confirm-card .seal{width:70px;margin:0 auto 20px;color:var(--gold)}
.confirm-card h2{font-size:2rem;font-style:italic;color:var(--gold-pale)}
.confirm-card .conf{font-family:var(--sans);font-weight:600;font-size:.7rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gold-bright);margin:16px 0}
details.qa{border-bottom:1px solid var(--hairline-soft)}
details.qa summary{cursor:pointer;list-style:none;display:flex;align-items:baseline;gap:16px;padding:22px 4px;font-family:var(--serif);font-size:1.3rem;color:var(--cream);transition:.3s}
details.qa summary::-webkit-details-marker{display:none}
details.qa summary .d{color:var(--gold);font-size:.72rem;transition:.4s var(--ease)}
details.qa[open] summary .d{transform:rotate(90deg)}
details.qa summary:hover{color:var(--gold-pale)}
details.qa .a{padding:0 4px 24px 30px;color:var(--sage);max-width:64ch;line-height:1.75}
.g-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:50px}
.g-frame{border:1px dashed var(--hairline);background:rgba(193,151,47,.04);aspect-ratio:4/3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:20px;text-align:center;transition:.4s;position:relative;overflow:hidden}
.g-frame .g-photo{display:none}
.g-frame .cam{width:30px;height:30px;color:var(--gold);opacity:.75}
.g-frame .t{font-family:var(--serif);font-size:1.15rem;color:var(--gold-pale)}
.g-frame .d{font-family:var(--sans);font-size:.74rem;color:var(--taupe);letter-spacing:.06em;max-width:26ch;line-height:1.6}
.g-frame.has-photo{border-style:solid;border-color:var(--hairline);padding:0;justify-content:flex-end;background:var(--green-0);box-shadow:var(--shadow)}
.g-frame.has-photo .g-photo{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.g-frame.has-photo .cam{display:none}
.g-frame.has-photo .t,.g-frame.has-photo .d{position:relative;z-index:1;max-width:none;padding:0 16px;text-shadow:0 1px 12px rgba(0,0,0,.55)}
.g-frame.has-photo .t{padding-top:48px;color:var(--cream);background:linear-gradient(180deg,transparent,rgba(8,15,11,.82) 42%)}
.g-frame.has-photo .d{padding-bottom:18px;color:var(--gold-pale);background:rgba(8,15,11,.82)}
.map-frame{border:1px solid var(--hairline);box-shadow:var(--shadow);overflow:hidden;background:var(--green-0)}
.map-frame iframe{display:block;width:100%;height:380px;border:0;filter:grayscale(.35) sepia(.15) hue-rotate(60deg) saturate(.7) brightness(.85)}
@media(max-width:800px){.grid2,.grid3{grid-template-columns:1fr}.g-grid{grid-template-columns:1fr 1fr}}
@media(max-width:540px){.g-grid{grid-template-columns:1fr}}

@media(max-width:560px){.cred{grid-template-columns:1fr 1fr}.cred .c{padding:20px 12px}.cred .n{font-size:1.2rem}.cred .k{letter-spacing:.16em;font-size:.55rem}.svc small{margin-left:0;text-align:left}}

@media(max-width:560px){.frame .plate{white-space:normal;max-width:88%;text-align:center;line-height:1.6}}

/* =====================================================================
   PHONE LEGIBILITY (2026-09-22)
   1. The hero is bottom-anchored, so on a short phone the content grows
      past the viewport and the crest ends up behind the fixed nav.
      Reserve the nav's height so it cannot.
   2. Uppercase, letter-spaced labels read far smaller than their pixel
      size, and several were landing between 9px and 11px on a phone.
      Raise the floor on a phone only; desktop is untouched. Selectors
      here match the specificity of the rules they override.
   ===================================================================== */
@media(max-width:900px){
  .hero{padding-top:100px}
}
@media(max-width:560px){
  .nav-links a{font-size:.78rem}
  .nav .btn--ghost,.nav-cta{font-size:.8rem}
  .tagline,.hero-tagline{font-size:.78rem}
  .frame .plate{font-size:.78rem}
  .panorama .label{font-size:.8rem}
  .f-bot{font-size:.8rem}
  .hide-s{font-size:.8rem}
  .m-menu .m-small{font-size:.82rem}
  .m-menu a{font-size:1rem}
  .kicker{font-size:.82rem}
  .cap{font-size:.82rem}
  .hero-film span.lab{font-size:.82rem}
  .f-col h2{font-size:.82rem}
  small{font-size:.82rem}
}


/* ── Where the keyboard is ────────────────────────────────────────────────
   Measured before a line of this was written. The browser's own ring
   computes to `outline: auto 0px` on the gold buttons, on the film button
   and on the service cards, and to near black on the wordmark, so a guest
   working the site from a keyboard could not see where they were standing.

   Every focusable element on all eleven pages sits on the house green,
   luminance between .005 and .011, none of them on cream. One brass ring
   therefore serves the whole site, at 11:1 against the darkest of those
   backgrounds, where a focus indicator is asked for 3:1.

   :focus-visible, so a mouse or a fingertip never summons it and nothing
   Powell approved looks any different. outline rather than border, so
   nothing on the page moves when it appears. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible{
  outline:2px solid var(--gold-bright);
  outline-offset:3px;
}
/* The plates and the ovals carry `transition:.4s`, shorthand for every
   property, so the ring grows in rather than snapping on. I tried naming the
   transitioned properties here to stop that and left it out again: those
   rules live in frame.css at the same specificity and later in the cascade,
   so the override did not win, and forcing it risked the hover behaviour
   Powell signed off. Measured instead: the easing is front loaded, so the
   ring is already at 1px and clearly legible 40ms after the Tab key, and
   full at 400ms. That is a bloom, not a delay, and it suits the house. */
/* main takes focus only because somebody used the skip link to get there on
   purpose. A ring drawn around the whole page would tell them nothing. */
main[tabindex="-1"]:focus{outline:none}

/* ── The skip link ────────────────────────────────────────────────────────
   Above the top of the screen until a keyboard finds it, and it is the
   first thing Tab reaches on every page. It drops down as a small brass
   plate in the house's own lettering. The reduced-motion rule earlier in
   this file already turns off its travel for anyone who asks for that.

   Set to the left rather than the middle on purpose: the wordmark is centred
   in the rail, and nothing should be dropped on top of it, even for the
   second somebody's finger is on the Tab key. */
.skip{
  position:fixed;top:0;left:18px;z-index:1300;
  transform:translateY(-160%);
  display:flex;align-items:center;min-height:44px;
  background:var(--green-1);color:var(--gold-bright);
  border:1px solid var(--hairline);border-top:0;
  font-family:var(--sans);font-weight:600;font-size:.72rem;
  letter-spacing:.24em;text-transform:uppercase;text-decoration:none;
  padding:0 26px;box-shadow:0 12px 34px rgba(0,0,0,.55);
  transition:transform .25s var(--ease);
}
.skip:focus{transform:translateY(0)}