/* ============================================================
   SUMMIT & STONE — The Frame
   The owner's "best of both": leather bands top and bottom,
   the crest hanging still, the mountains moving all around it.
   ============================================================ */
:root{
  --brass-hi:#E8CF98;
  --brass:#C1972F;
  --brass-lo:#7E5F1E;
  --plate-face:#12281B;
  --plate-face-2:#1B3D28;
}

/* ---------- TOP BAND: the owner's tooled leather rail ---------- */
:root{
  /* hand-stitched thread, as on the owner's band */
  --stitch: repeating-linear-gradient(90deg,
    rgba(226,190,120,.7) 0 6px,
    rgba(46,28,9,.55) 6px 7.5px,
    rgba(226,190,120,0) 7.5px 12.5px);
}
.nav{
  background-image:
    url("/assets/band-cap-left.png?v=16"),
    url("/assets/band-cap-right.png?v=16"),
    url("/assets/band-powell.jpg?v=6");
  background-repeat:no-repeat,no-repeat,repeat-x;
  background-position:left center,right center,center;
  background-size:auto 100%,auto 100%,auto 100%;
  border:0;
  box-shadow:0 10px 34px rgba(0,0,0,.5);
}
.nav::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(18,11,4,.16),rgba(18,11,4,.06) 45%,rgba(18,11,4,.2));
}
.nav::after{content:none} /* the band carries its own rim */
.nav .bar{position:relative;z-index:2}

.nav-corner{display:none}

/* Desktop utility links — Gallery / Contact / Concierges without crowding plaques */
.nav-utility{
  display:flex;align-items:center;justify-content:center;gap:10px;
  position:relative;z-index:2;
  padding:6px 16px 10px;
  font-family:var(--sans);font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;
}
.nav-utility a{color:rgba(232,207,152,.72);transition:color .25s}
.nav-utility a:hover,.nav-utility a:focus-visible{color:var(--brass-hi)}
.nav-utility__dot{color:rgba(143,168,146,.45)}
@media(max-width:900px){
  .nav-utility{display:none}
}

/* plates: green enamel + brass frame + studs (brand colours, not burgundy) */
.nav-links a{
  position:relative;white-space:nowrap;
  font-family:var(--serif);font-weight:600;
  font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--brass-hi);opacity:1;
  padding:9px 15px;margin:0 5px;
  background:linear-gradient(180deg,var(--plate-face-2) 0%,var(--plate-face) 58%,#0A1B12 100%);
  border:2px solid rgba(212,170,74,.92);
  border-radius:22px/50%;
  text-shadow:0 1px 2px rgba(0,0,0,.85);
  box-shadow:
    inset 0 1px 0 rgba(240,218,164,.38),
    inset 0 -3px 8px rgba(0,0,0,.66),
    0 0 0 2px rgba(52,36,12,.9),
    0 0 0 3px rgba(196,152,66,.55),
    0 3px 9px rgba(0,0,0,.55);
  transition:.4s var(--ease);
}
/* stud at the right shoulder too, as in the owner's plates */
.nav-links a > .stud{
  display:block;
  position:absolute;right:-6px;top:50%;transform:translateY(-50%);
  width:12px;height:12px;border-radius:50%;
  background:radial-gradient(circle at 34% 30%, #FFF3D6 0%, var(--brass-hi) 26%, var(--brass) 58%, var(--brass-lo) 100%);
  box-shadow:0 1px 3px rgba(0,0,0,.7);
}
.nav-links a::after{display:none}
.nav-links a::before{
  content:"";position:absolute;left:-6px;top:50%;transform:translateY(-50%);
  width:12px;height:12px;border-radius:50%;
  background:radial-gradient(circle at 34% 30%, #FFF3D6 0%, var(--brass-hi) 26%, var(--brass) 58%, var(--brass-lo) 100%);
  box-shadow:0 1px 3px rgba(0,0,0,.7);
}
.nav-links a:hover,.nav-links a.is-here{color:#FFF6E0;border-color:var(--brass-hi);filter:brightness(1.12)}

/* Reserve: the wide oval, studs both ends */
.nav .btn--ghost{
  position:relative;white-space:nowrap;
  font-family:var(--serif);font-weight:600;
  font-size:.86rem;letter-spacing:.14em;text-transform:uppercase;
  color:#FFF3D6;padding:10px 26px;margin-left:8px;
  background:linear-gradient(180deg,var(--plate-face-2) 0%,var(--plate-face) 56%,#08170F 100%);
  border:2px solid var(--brass-hi);
  border-radius:32px/50%;
  text-shadow:0 1px 3px rgba(0,0,0,.9);
  box-shadow:inset 0 1px 0 rgba(255,243,214,.42), inset 0 -3px 8px rgba(0,0,0,.6), 0 4px 14px rgba(0,0,0,.55), 0 0 20px rgba(193,151,47,.26);
}
.nav .btn--ghost::before,.nav .btn--ghost::after{
  display:block;
  content:"";position:absolute;top:50%;transform:translateY(-50%);
  width:13px;height:13px;border-radius:50%;
  background:radial-gradient(circle at 34% 30%, #FFF9E6 0%, var(--brass-hi) 26%, var(--brass) 58%, var(--brass-lo) 100%);
  box-shadow:0 1px 3px rgba(0,0,0,.7);
}
.nav .btn--ghost::before{left:-7px}
/* right stud: the base stylesheet's underline effect sets left:50% / bottom:2px on
   nav ::after (and moves it on hover) — neutralise both so the stud stays put */
.nav .nav-links a.btn--ghost::after,
.nav .nav-links a.btn--ghost:hover::after{
  left:auto;right:-7px;top:50%;bottom:auto;
  width:13px;height:13px;border-radius:50%;transform:translateY(-50%);
  background:radial-gradient(circle at 34% 30%, #FFF9E6 0%, var(--brass-hi) 26%, var(--brass) 58%, var(--brass-lo) 100%);
  box-shadow:0 1px 3px rgba(0,0,0,.7);
}
.nav .btn--ghost:hover{filter:brightness(1.14);transform:translateY(-1px)}

.nav-lockup{padding:0 16px;min-width:max-content}
/* the owner's call: no crest on the rail — the wordmark carries the band alone,
   in the same bronze as the shield below (solid at this size; the gradient
   clip trick drops glyphs at small sizes in Chromium) */
.nav .nav-lockup .crest{display:none}
.nav-lockup .wordmark{
  font-size:1.08rem;
  color:#DCB26A;
  text-shadow:0 2px 4px rgba(0,0,0,.85);
}
.nav-lockup::after{
  content:"";position:absolute;left:10%;right:10%;bottom:-4px;height:2px;
  background:linear-gradient(90deg,transparent,var(--brass-hi),transparent);opacity:.9;
}

/* ---------- THE VISTA: video framed between the bands ---------- */
.hero{min-height:100svh;align-items:stretch}
.hero-inner{
  display:flex;flex-direction:column;justify-content:flex-end;
  width:min(var(--maxw),90vw);
  margin-inline:auto;
  padding-bottom:calc(var(--band-h) + 52px);
  text-align:left;
}
:root{--band-h:78px}
.hero-crest{
  width:clamp(120px,13vw,190px);
  margin:0 0 14px 0;
  filter:drop-shadow(0 14px 40px rgba(0,0,0,.7));
}
/* the wordmark wears the crest's own antique bronze — sampled from the shield */
.hero-wordmark{
  font-size:clamp(2rem,5vw,3.6rem);
  background:linear-gradient(180deg,#F2DFAC 0%,#DDB166 34%,#B98443 62%,#7E5320 96%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;text-shadow:none;
  filter:drop-shadow(0 3px 10px rgba(0,0,0,.6));
}
.hero-tagline,.hero-rule{display:none}
.hero-head{
  font-size:clamp(1.35rem,2.4vw,2.1rem);
  margin:16px 0 0;max-width:24ch;
  text-shadow:0 2px 12px rgba(0,0,0,.7);
}
.hero-serve{margin-top:12px;text-shadow:0 1px 8px rgba(0,0,0,.8)}
.hero-ctas{justify-content:flex-start;margin-top:26px}
.hero-film{margin-top:18px}
.hero-scroll{display:none}

/* ---------- BOTTOM BAND: the tagline rail ---------- */
.hero-band{
  position:absolute;left:0;right:0;bottom:0;z-index:4;
  height:var(--band-h);
  background-image:
    url("/assets/band-cap-left.png?v=16"),
    url("/assets/band-cap-right.png?v=16"),
    url("/assets/band-powell.jpg?v=6");
  background-repeat:no-repeat,no-repeat,repeat-x;
  background-position:left center,right center,center;
  background-size:auto 100%,auto 100%,auto 100%;
  display:flex;align-items:center;
  box-shadow:0 -10px 34px rgba(0,0,0,.5);
}
.hero-band::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(18,11,4,.4),rgba(18,11,4,.18) 45%,rgba(18,11,4,.34));
}
.hero-band::after{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,rgba(40,26,9,.9),rgba(122,90,34,.6) 18%,rgba(158,120,52,.68) 50%,rgba(122,90,34,.6) 82%,rgba(40,26,9,.9));
}
.hero-band .band-inner{
  position:relative;z-index:2;width:min(var(--maxw),94vw);margin-inline:auto;
  display:flex;align-items:center;gap:26px;
}
/* the plaque is gone — the locations remain, in plain thread-gold */
.band-loc{
  flex:none;
  font-family:var(--serif);font-style:italic;font-weight:500;
  font-size:clamp(.78rem,1.1vw,.98rem);letter-spacing:.05em;
  color:var(--brass-hi);
  text-shadow:0 2px 5px rgba(0,0,0,.8);
  white-space:nowrap;
}
.band-motto{
  flex:1;text-align:center;
  font-family:var(--serif);font-style:italic;font-weight:500;
  font-size:clamp(.86rem,1.35vw,1.16rem);
  color:var(--brass-hi);
  text-shadow:0 2px 5px rgba(0,0,0,.8);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.band-motto .dot{color:var(--brass);margin:0 .55em;font-style:normal;font-size:.8em}

/* ---------- Green leather in the deep sections ---------- */
.section--deep,.section--panel{
  background-image:url("/assets/greenleather.jpg?v=2");
  background-size:400px;
  background-blend-mode:multiply;
  background-color:#0E1F16;
}

/* ---------- Footer closes with the same band — dressed identically:
     bolts, stitches, and the same dark vignette so the leathers match ---------- */
footer{
  background-image:
    url("/assets/band-cap-left.png?v=16"),
    url("/assets/band-cap-right.png?v=16"),
    url("/assets/band-powell.jpg?v=6");
  background-repeat:no-repeat,no-repeat,repeat-x;
  background-position:left top,right top,top center;
  background-size:auto 104px,auto 104px,auto 104px;
  padding-top:104px;position:relative;
}
footer::before{
  content:"";position:absolute;top:0;left:0;right:0;height:104px;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(18,11,4,.4),rgba(18,11,4,.18) 45%,rgba(18,11,4,.34));
  box-shadow:
    inset 0 0 0 2px rgba(14,8,3,.6),
    inset 0 0 0 3px rgba(140,102,40,.3),
    inset 0 12px 26px rgba(16,8,2,.36),
    inset 0 -12px 26px rgba(16,8,2,.36);
}
footer::after{content:"";position:absolute;top:104px;left:0;right:0;bottom:0;
  background:linear-gradient(180deg,#0B1510,#080F0B);z-index:0}
footer .wrap{position:relative;z-index:1}

/* ---------- Responsive: the frame adapts, never crops ---------- */
@media(max-width:1340px){
  .nav-links a{font-size:.68rem;padding:8px 13px;margin:0 5px;letter-spacing:.08em}
  .nav .btn--ghost{font-size:.74rem;padding:9px 20px;margin-left:8px}
  .nav-lockup{padding:0 12px}
}
@media(max-width:900px){
  :root{--band-h:62px}
  .hero-inner{text-align:center;align-items:center}
  .hero-crest{margin-inline:auto}
  .hero-head{margin-inline:auto;text-align:center}
  .hero-ctas{justify-content:center}
  .band-loc{display:none}            /* the phone keeps the motto, drops the locations */
  .hero-band{height:auto;min-height:var(--band-h);padding-block:12px}
  .band-motto{font-size:.74rem;white-space:normal;line-height:1.45}
  .band-motto .hide-s{display:none}
  .hamburger span{background:var(--brass-hi);box-shadow:0 1px 2px rgba(0,0,0,.7)}
  .m-menu{background-color:#0E1F16;background-image:url("/assets/greenleather.jpg?v=2");background-size:340px}
  .m-menu > a{
    width:min(330px,80vw);max-width:none;text-align:center;
    display:flex;align-items:center;justify-content:center;
    font-family:var(--serif);font-weight:600;font-size:1.02rem;letter-spacing:.08em;text-transform:uppercase;
    color:var(--brass-hi);padding:11px 20px;
    background:linear-gradient(180deg,var(--plate-face-2),var(--plate-face) 60%,#0A1B12);
    border:2px solid rgba(193,151,47,.8);border-radius:24px/50%;
    box-shadow:inset 0 1px 0 rgba(232,207,152,.24), 0 3px 8px rgba(0,0,0,.5);
    text-shadow:0 1px 2px rgba(0,0,0,.8);
  }
  .m-menu .m-small{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 14px;max-width:88vw;margin-top:22px}
  .m-menu .m-small a{background:none;border:0;box-shadow:none;padding:11px 0;border-radius:0;
    font-family:var(--sans);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--sage)}
  .nav-lockup::after{display:none}
  footer{
    background-position:left top,right top,top center;
    background-size:auto 70px,auto 70px,auto 70px;
    padding-top:82px;
  }
  footer::before{height:70px}
  footer::after{top:70px}
}

/* --- the crest, hanging: his shield with the dark field kept --- */
.hero-crest{
  filter:drop-shadow(0 18px 44px rgba(0,0,0,.75));
}
.hero .hero-crest{width:clamp(132px,14vw,208px);height:auto}
/* a slow glass sweep across the shield */
.crest-wrap{position:relative;display:inline-block;align-self:flex-start}
.crest-wrap::after{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:12%;
  background:linear-gradient(115deg,transparent 32%,rgba(255,247,225,.16) 46%,rgba(255,247,225,.05) 54%,transparent 66%);
  mix-blend-mode:screen;
}
@media(max-width:900px){.crest-wrap{align-self:center}}

.hero-crest{height:auto!important}
.crest-wrap{line-height:0}

/* --- balance: both groups centre within their half, around the crest --- */
.nav .nav-links{justify-content:center}
.nav .nav-links--r{justify-content:center}
/* --- even rhythm: no plate reads cramped next to its neighbour --- */
.nav-links a{min-width:148px;justify-content:center;text-align:center}
.nav .btn--ghost{min-width:148px}
@media(max-width:1340px){
  .nav-links a{min-width:120px}
  .nav .btn--ghost{min-width:120px}
}
@media(max-width:1180px){
  .nav-links a{min-width:0}
  .nav .btn--ghost{min-width:0}
}

/* --- true centring: equal side columns so the wordmark sits dead centre
       (desktop only — narrow bars hand the rail to lockup + hamburger) --- */
@media(min-width:981px){
  .nav .bar{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}
}
.nav-links a{min-width:122px;margin:0 5px}
.nav .btn--ghost{min-width:122px}
@media(max-width:1340px){
  .nav-links a{min-width:100px;margin:0 4px;padding:8px 11px;font-size:.65rem}
  .nav .btn--ghost{min-width:100px;padding:9px 15px}
}
@media(max-width:1180px){
  .nav-links a{min-width:0;padding:7px 8px;margin:0 3px;font-size:.58rem;letter-spacing:.04em}
  .nav .btn--ghost{min-width:0;padding:8px 12px;margin-left:6px;font-size:.62rem;letter-spacing:.1em}
  .nav-lockup{padding:0 10px}
  .nav-lockup .wordmark{font-size:.98rem}
}
/* six plates can't breathe under ~980 — hand the rail to the menu early */
@media(max-width:980px){
  .nav .nav-links{display:none}
  .nav .hamburger{display:flex;justify-self:end}
  .nav .bar{grid-template-columns:auto 1fr}
  .nav-lockup{justify-self:start}
}

/* plates never compress below their lettering */
.nav-links a{flex:0 0 auto}
.nav .btn--ghost{flex:0 0 auto}

/* ============================================================
   THE BAND'S FRAME — Pullman-car leather: hand-stitched thread
   edges, a dark seam, antiqued brass corner bolts. No bright
   yellow rules — the shine belongs to the plates and the crest.
   ============================================================ */
:root{
  --bolt: radial-gradient(circle closest-side at 50% 50%, #EFDCAE 0%, #D2B172 30%, #97701F 62%, #5C4413 86%, rgba(30,19,5,.55) 94%, transparent 96%);
}
.nav{
  background-image:
    url("/assets/band-cap-left.png?v=16"),
    url("/assets/band-cap-right.png?v=16"),
    url("/assets/band-powell.jpg?v=6");
  background-repeat:no-repeat,no-repeat,repeat-x;
  background-position:left center,right center,center;
  background-size:auto 100%,auto 100%,auto 100%;
}
/* the quiet frame: dark edge, a breath of old brass, vignette */
.nav::before{
  box-shadow:
    inset 0 0 0 2px rgba(14,8,3,.6),
    inset 0 0 0 3px rgba(140,102,40,.3),
    inset 0 16px 30px rgba(16,8,2,.38),
    inset 0 -16px 30px rgba(16,8,2,.38);
}
.hero-band{
  background-image:
    url("/assets/band-cap-left.png?v=16"),
    url("/assets/band-cap-right.png?v=16"),
    url("/assets/band-powell.jpg?v=6");
  background-repeat:no-repeat,no-repeat,repeat-x;
  background-position:left center,right center,center;
  background-size:auto 100%,auto 100%,auto 100%;
}
.hero-band::before{
  box-shadow:
    inset 0 0 0 2px rgba(14,8,3,.6),
    inset 0 0 0 3px rgba(140,102,40,.3),
    inset 0 12px 26px rgba(16,8,2,.36),
    inset 0 -12px 26px rgba(16,8,2,.36);
}
/* scrolled: the base sheet swaps the band to dark glass — keep the leather on.
   (The bar still compacts to 74px; the rail just never goes dark.) */
.nav.scrolled{
  background-color:transparent;
  background-image:
    url("/assets/band-cap-left.png?v=16"),
    url("/assets/band-cap-right.png?v=16"),
    url("/assets/band-powell.jpg?v=6");
  background-repeat:no-repeat,no-repeat,repeat-x;
  background-position:left center,right center,center;
  background-size:auto 100%,auto 100%,auto 100%;
  backdrop-filter:none;
  border-bottom:0;
  box-shadow:0 10px 34px rgba(0,0,0,.55);
}

/* --- the owner's note: the crest and its verbiage centre on the screen --- */
.hero-inner{align-items:center;text-align:center}
.crest-wrap{align-self:center}
.hero-crest{margin-inline:auto}
.hero-head{margin-inline:auto;max-width:26ch}
.hero-ctas{justify-content:center}
.hero-film{align-self:center}
.hero-serve{margin-inline:auto}

/* rule of thirds: the stack stays internally centred, seated left and low —
   and a size smaller now, so the moving vista is the true hero of the frame */
@media(min-width:1024px){
  .hero-inner{
    width:min(var(--maxw),90vw);
    display:grid;
    grid-template-columns:minmax(0,5fr) minmax(0,7fr);
    align-content:end;
    justify-items:center;
    padding-bottom:calc(var(--band-h) + 34px);
  }
  .hero-inner > *{grid-column:1}
  .hero .hero-crest{width:clamp(108px,10vw,148px);margin-bottom:10px}
  .hero-wordmark{font-size:clamp(1.6rem,3.4vw,2.55rem)}
  .hero-head{font-size:clamp(1.1rem,1.85vw,1.6rem);margin-top:12px}
  .hero-serve{margin-top:10px;font-size:.72rem}
  .hero-ctas{margin-top:20px}
  .hero-ctas .btn{padding:14px 26px;font-size:.72rem}
  .hero-film{margin-top:14px}
}

/* ============================================================
   POWELL'S PROPORTION GUIDE  (HOME_SCREEN__Reproportioned)
   Measured off his artwork on a 1672x941 canvas:
     nav wordmark  399px wide  = 23.9vw   (mine was 13.8vw)
     hero crest    180px wide  = 10.8vw ; wordmark 2.19x the crest
     stack centre  245px       = 14.7vw  (mine was 24.9vw)
     belt text     cap 19px on an 86px belt = 22%  small-caps, not italic
     stack bottom  15px above the belt
   ============================================================ */

/* ---- the rail: his wordmark is the centrepiece, 1.7x larger ---- */
.nav-lockup .wordmark{
  font-size:clamp(1.15rem,2.4vw,1.9rem);
  letter-spacing:.12em;
}
.nav-lockup::after{left:6%;right:6%;bottom:-2px;opacity:.72}
/* his plate faces read as dark stone over the brand green, not enamel */
.nav-links a{
  background-image:url("/assets/stone.jpg"),
    linear-gradient(180deg,var(--plate-face-2) 0%,var(--plate-face) 58%,#0A1B12 100%);
  background-size:150px,auto;
  background-position:center,center;
  background-blend-mode:soft-light,normal;
}
.nav .btn--ghost{
  background-image:url("/assets/stone.jpg"),
    linear-gradient(180deg,var(--plate-face-2) 0%,var(--plate-face) 56%,#08170F 100%);
  background-size:150px,auto;
  background-position:center,center;
  background-blend-mode:soft-light,normal;
}

/* ---- the hero: crest prominent, wordmark deferring to it ---- */
@media(min-width:1024px){
  .hero-inner{
    width:100%;
    max-width:none;
    margin-inline:0;
    padding-inline:3vw;
    grid-template-columns:minmax(0,24vw) minmax(0,1fr);
    padding-bottom:calc(var(--band-h) + 18px);
  }
  .hero .hero-crest{
    width:clamp(132px,10.8vw,208px);
    margin-bottom:14px;
  }
  .hero-wordmark{font-size:clamp(1.3rem,2.3vw,1.95rem)}
  .hero-head{font-size:clamp(1rem,1.6vw,1.42rem);margin-top:14px;max-width:100%}
  .hero-serve{margin-top:11px;font-size:.68rem;max-width:100%}
  .hero-ctas{margin-top:22px;max-width:100%;flex-wrap:wrap}
  .hero-ctas .btn{padding:13px 20px;font-size:.68rem;letter-spacing:.2em}
  .hero-film{margin-top:14px}
}

/* ---- the belt: one engraved line, small-caps, his larger scale ---- */
.hero-band .band-inner{width:min(1600px,94vw);gap:0}
.band-motto{
  font-style:normal;
  font-variant:small-caps;
  font-weight:600;
  font-size:clamp(.66rem,1.74vw,1.5rem);
  letter-spacing:.05em;
  color:#E3C489;
  text-shadow:0 1px 0 rgba(40,26,9,.9),0 2px 6px rgba(0,0,0,.75);
}
.band-motto .dot{font-size:.74em;margin:0 .66em;color:#C8A55E;font-variant:normal}
@media(max-width:900px){
  .band-motto{font-size:.74rem;letter-spacing:.03em}
}

/* ---- his antique bronze corners: all four, on the photographs ---- */
.frame{border-color:rgba(160,120,52,.5)}
.frame::before{
  content:"";position:absolute;inset:-3px;z-index:3;pointer-events:none;
  background-image:
    url("/assets/corner-tl.png"),url("/assets/corner-tr.png"),
    url("/assets/corner-bl.png"),url("/assets/corner-br.png");
  background-repeat:no-repeat;
  background-size:clamp(44px,5.2vw,74px) clamp(44px,5.2vw,74px);
  background-position:left top,right top,left bottom,right bottom;
  filter:drop-shadow(0 2px 5px rgba(0,0,0,.65));
}
.frame .plate{
  bottom:-16px;
  background-image:url("/assets/stone.jpg"),linear-gradient(180deg,#25250F,#12120A);
  background-size:150px,auto;background-blend-mode:soft-light,normal;
  border:2px solid rgba(201,162,74,.9);border-radius:3px;
  box-shadow:inset 0 0 0 1px rgba(20,14,4,.85),inset 0 0 0 3px rgba(201,162,74,.4),
             inset 0 2px 8px rgba(0,0,0,.7),0 3px 10px rgba(0,0,0,.55);
  color:#E8CF98;padding:9px 22px;
}

/* ---- corrections measured against his canvas at 1672x941 ---- */
/* his rail runs 84% of the screen, not the 1240 text column */
.nav .bar{width:min(1600px,92vw);max-width:none}
.hero-band .band-inner{width:min(1620px,96vw)}

/* wordmark: 399px at his 1672 canvas = 23.9vw */
.nav-lockup .wordmark{font-size:clamp(1.15rem,2.15vw,2.25rem)}

/* the crest carries no glass box — his shield sits clean on the vista */
.crest-wrap::after{display:none}

@media(min-width:1024px){
  /* wordmark 2.19x the crest, exactly his ratio */
  .hero-wordmark{font-size:clamp(1.25rem,2.06vw,2.3rem)}
  .hero-inner{grid-template-columns:minmax(0,25.5vw) minmax(0,1fr)}
  /* his serving line sits on two lines, his buttons stay shoulder to shoulder */
  .hero-serve{font-size:.6rem;letter-spacing:.16em}
  .hero-ctas{gap:12px}
  .hero-ctas .btn{padding:12px 16px;font-size:.61rem;letter-spacing:.16em}
  .hero-film{font-size:.66rem}
}

/* the belt engraves in one unbroken line — no ellipsis */
.band-motto{
  font-size:clamp(.66rem,1.42vw,1.5rem);
  letter-spacing:.015em;
  text-overflow:clip;
}
@media(min-width:1024px){ .hero-inner{padding-inline:2vw} }   /* stack centre -> his 14.7vw */
.band-motto{font-size:clamp(.66rem,1.34vw,1.42rem)}           /* one line, with headroom */

/* ---- holding his proportions on narrower desktops ---- */
.nav .nav-links:not(.nav-links--r){padding-left:9px}
.nav .nav-links--r{padding-right:9px}          /* the Reserve stud keeps inside the rail */
@media(min-width:1024px){
  /* the stack needs an absolute floor or his buttons stack and the serve line triples */
  .hero-inner{grid-template-columns:minmax(0,max(400px,25.5vw)) minmax(0,1fr)}
}
@media(min-width:1024px) and (max-width:1520px){
  .hero-serve{font-size:.55rem;letter-spacing:.12em}
  .hero-ctas .btn{padding:12px 14px;font-size:.58rem;letter-spacing:.13em}
}
/* 1341-1520: plates take a size down so Reserve's stud clears the rail edge */
@media(min-width:1341px) and (max-width:1520px){
  .nav-links a{min-width:104px;margin:0 4px;padding:8px 12px;font-size:.68rem;letter-spacing:.07em}
  .nav .btn--ghost{min-width:104px;padding:9px 17px;font-size:.78rem}
  .nav-lockup{padding:0 12px}
}

/* ---- his tagline: two lines, at his larger scale ---- */
@media(min-width:1024px){
  .hero-head{font-size:clamp(1.05rem,1.75vw,1.85rem);max-width:21ch;margin-top:12px}
}

/* ---- The Summit Table: his photograph reads, the copy sits on the meadow ---- */
.flagship img{aspect-ratio:16/9;object-position:center 34%}
.flagship .veil{background:linear-gradient(180deg,rgba(9,17,13,.12) 0%,rgba(9,17,13,.18) 38%,rgba(9,17,13,.86) 100%)}
.flagship .body{padding-bottom:clamp(22px,3.4vw,40px)}
.flagship .body .lede{text-shadow:0 2px 10px rgba(0,0,0,.9)}
.flagship .body h2{text-shadow:0 3px 14px rgba(0,0,0,.85)}
/* keep his host's face in frame — the scene is the point */
.flagship img{aspect-ratio:3/2;object-position:center 12%}
@media(min-width:1024px){ .hero-head{max-width:24ch} }   /* break exactly where his does */


/* ── the promise, spoken before the form asks anything ── */
.form-promise{
  margin:18px auto 0;max-width:52ch;
  font-family:var(--serif);font-style:italic;font-size:1.02rem;line-height:1.6;
  color:var(--gold-pale);
  border-left:2px solid rgba(193,151,47,.5);
  padding:10px 0 10px 18px;text-align:left;
}

/* ── the availability notice, under the hour the guest just chose ── */
.form-hint{display:none;margin:2px 0 18px;padding:15px 18px;
  border:1px solid var(--hairline);border-left:3px solid var(--gold);
  border-radius:3px;background:rgba(16,24,19,.82);
  font-family:var(--serif);font-size:1.05rem;line-height:1.6;text-align:left}
.form-hint.is-shown{display:block}
.form-hint.is-open{border-left-color:#7FA97B;background:rgba(14,24,16,.82)}
.form-hint.is-open .form-hint__lead{color:#CBE5C4}
.form-hint.is-warm{border-left-color:#D4AA4A;background:rgba(30,26,13,.72);
  box-shadow:inset 0 0 0 1px rgba(212,170,74,.14)}
.form-hint.is-warm .form-hint__lead{color:#F0E1B4}
.form-hint__lead{display:block;font-style:italic}
.form-hint__phone{display:block;margin-top:10px;font-size:.95rem;color:#CFC8B5}
.form-hint__phone a{color:var(--brass-hi);text-decoration:none;
  border-bottom:1px solid rgba(212,170,74,.5);transition:.3s var(--ease)}
.form-hint__phone a:hover{border-bottom-color:var(--brass-hi)}
.form-hint__alts{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.form-hint__alts span{font-family:var(--sans);font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--sage);align-self:center}
.form-hint__alts button{
  font-family:var(--sans);font-weight:600;font-size:.72rem;letter-spacing:.1em;
  min-height:40px;padding:8px 14px;cursor:pointer;
  color:var(--brass-hi);background:rgba(193,151,47,.12);
  border:1px solid rgba(212,170,74,.7);border-radius:999px;
  transition:.3s var(--ease)}
.form-hint__alts button:hover{background:rgba(193,151,47,.24);border-color:var(--brass-hi)}

/* ── the confirm card, finished properly ── */
.conf-email{margin:14px 0 0;font-size:.92rem;color:var(--sage)}
.conf-actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:22px}

/* ── the quiet doors, easier to find (Gallery · Contact · For Concierges) ── */
.nav-utility{padding:10px 0 9px}
.nav-utility a{
  font-size:.7rem;letter-spacing:.22em;color:var(--gold-bright);
  padding:10px 6px;display:inline-block;
}
.nav-utility a:hover{color:var(--brass-hi);text-decoration:underline;text-underline-offset:3px}


/* ---------- Powell: no borders on photos — a quiet bevel instead ---------- */
.frame{position:relative}
.frame::after,.panorama::after,.flagship::after{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:2px;
  box-shadow:
    inset 0 2px 3px rgba(255,246,224,.13),
    inset 0 -3px 8px rgba(0,0,0,.55),
    inset 3px 0 6px rgba(0,0,0,.28),
    inset -3px 0 6px rgba(0,0,0,.28);
}

/* =====================================================================
   PHONE LEGIBILITY (2026-09-22) - these are set in this file, after
   site.css, so their phone floors have to live here too.
   ===================================================================== */
@media(max-width:560px){
  .band-motto{font-size:.8rem;line-height:1.5}
  .nav-utility,.nav-utility a{font-size:.8rem}
  .m-menu .m-small,.m-menu .m-small a{font-size:.82rem}
  .svc small{font-size:.82rem}
}

/* =====================================================================
   RATES (2026-09-22) - Powell's published rates on the Services page.
   Phone sizes respect the 12px floor set in site.css.
   ===================================================================== */
.rates{max-width:820px;margin:0 auto}
.rate-block{margin-top:38px}
.rate-block:first-child{margin-top:0}
.rate-block h3{font-family:var(--serif);font-weight:500;font-size:1.4rem;color:var(--gold-pale);margin:0 0 5px}
.rate-block .rate-note{font-size:.92rem;color:var(--sage);margin:0 0 15px;line-height:1.65}
table.rates-table{width:100%;border-collapse:collapse;font-size:1rem}
.rates-table th{
  text-align:left;font-family:var(--sans);font-weight:600;font-size:.76rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--gold);
  padding:0 0 11px;border-bottom:1px solid var(--hairline);white-space:nowrap}
.rates-table th.num,.rates-table td.num{padding-left:18px}
.rates-table th.num,.rates-table td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.rates-table td{padding:12px 0;border-bottom:1px solid var(--hairline-soft);vertical-align:top;line-height:1.5}
.rates-table tr:last-child td{border-bottom:none}
.rates-table td:first-child{padding-right:16px}
.rate-fine{margin-top:40px;padding-top:24px;border-top:1px solid var(--hairline)}
.rate-fine ul{margin:0;padding-left:1.15em}
.rate-fine li{margin:0 0 10px;line-height:1.65;font-size:.95rem}
.rate-fine li:last-child{margin-bottom:0}
@media(max-width:560px){
  .rates-table{font-size:.95rem}
  .rates-table th{font-size:.78rem;letter-spacing:.06em}
  .rates-table th.num,.rates-table td.num{padding-left:12px}
  .rates-table td{padding:10px 0}
  .rates-table td:first-child{padding-right:10px}
}

/* ── The wordmark's tap area ──────────────────────────────────────────────
   Last in the file on purpose. Three shorthand `padding` rules above reset
   the block padding, so anything written earlier is quietly undone.

   min-height rather than padding, and it is safe at every width. Measured
   rather than assumed: .nav-lockup is position:static, so .nav-lockup::after,
   the brass line, is positioned against div.wrap.bar and not against this
   box. The bar's own height is fixed, 110px and 92px below 900px, so growing
   the lockup inside it to 44px cannot move that line by a hair.
   justify-content:center holds the wordmark in the middle of the taller box,
   and .bar centres the box in the rail, so the wordmark does not shift
   either. Where the lockup is already taller than 44px this does nothing. */
.nav-lockup{min-height:44px;justify-content:center}

/* ── The rail ─────────────────────────────────────────────────────────────
   The plates came out at 43px and the Reserve oval at 40, a whisker under
   the 44 a finger wants, and an iPad in landscape uses this same rail rather
   than the mobile menu. Padding rather than min-height so the type stays
   centred in the plate, and last in the file because the shorthand paddings
   in the width queries above would otherwise reset it. The utility links
   measured 43.59px at 12px, so they carry a quarter pixel more; they are
   inline, so the extra grows the hit area without moving the line box. */
.nav-links a{padding-block:11px}
.nav .btn--ghost{padding-block:11px}
.nav-utility a{padding-block:12.25px}

/* The mobile menu's small links, and the wordmark, at the width where the
   brass line beneath the wordmark is already hidden. */
@media(max-width:900px){
  .m-menu .m-small a{padding-block:12px}
}