/* ============================================================
   THE SECRET CHEFS — design system
   Built by Lochside Digital
   ------------------------------------------------------------
   IMAGE REPLACEMENT
   Every photograph sits inside a .frame element and is styled
   with object-fit: cover. To swap in Andrew's own photography,
   change the src (and alt) only — no layout changes needed.
   Search this file for "REPLACE" to find them all.
   ============================================================ */

:root{
  /* Core palette — the client's navy / white / red.
     Navy and red are lifted from the logo; the pale lavender-grey is the
     page ground from the original thesecretchefs.co.uk site. */
  --navy-900:#141537;    /* deepest ground — nav, footer, dark sections */
  --navy-800:#1C1D4E;
  --navy-700:#2B2A68;    /* brand navy, straight off the logo */
  --navy-600:#3B3A82;
  --ink-900:#0A0B1E;
  --ink-800:#12132C;

  --paper:#FFFFFF;
  --paper-2:#F3F2F8;
  --paper-3:#E3E1EC;     /* the original site's lavender-grey */

  /* Red needs two values. The brand red is legible on white but only
     reaches ~2.4:1 on navy, so dark grounds get a lightened tint of the
     same hue instead. Same split the old palette used for gold. */
  --accent:#EE7361;      /* on dark grounds  — 6.1:1 on --navy-900 */
  --accent-ink:#B33326;  /* on light grounds — 6.2:1 on white, 4.8:1 on --paper-3 */
  --accent-brand:#C0392B;/* the exact logo red — fills and large display only */
  --accent-deep:#7E2118;

  /* Decorative accent (rules, underlines, focus rings). Defaults to the
     logo red for light grounds; the dark-section rule below reassigns it
     to the lightened tint, so individual rules never need to know which
     ground they are sitting on. */
  --accent-deco:var(--accent-brand);

  /* Form errors were coral, which read fine against the old green/gold but
     is now almost the accent colour. Amber keeps "something is wrong"
     distinguishable from "this is the brand". */
  --err:#F5B944;
  --err-rgb:245,185,68;

  --text-dark:#1A1B33;
  --text-mid:#52546E;
  --text-onDark:rgba(255,255,255,.78);

  --rule-dark:rgba(26,27,51,.14);
  --rule-light:rgba(255,255,255,.16);

  /* Channel values, so the alpha variants further down this file stay
     tied to the palette instead of being written out longhand. */
  --paper-rgb:255,255,255;
  --navy-900-rgb:20,21,55;
  --accent-rgb:238,115,97;
  --accent-ink-rgb:179,51,38;
  --text-dark-rgb:26,27,51;
  --shadow-rgb:10,11,30;  /* overlays and image scrims */

  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;

  --wrap:1240px;
  --gutter:clamp(1.25rem,5vw,3.5rem);
  --sec-y:clamp(4.5rem,10vw,9rem);

  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{
  margin:0;
  background:var(--paper);
  color:var(--text-dark);
  font-family:var(--sans);
  font-size:clamp(1rem,.97rem + .18vw,1.0625rem);
  line-height:1.65;
  font-weight:350;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit}

/* Headings ---------------------------------------------------- */
h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:400;
  font-variation-settings:"SOFT" 0,"WONK" 0,"opsz" 120;
  line-height:1.06;
  letter-spacing:-.015em;
  margin:0;
  text-wrap:balance;
}
h1{font-size:clamp(2.6rem,1.6rem + 4.4vw,5.1rem)}
h2{font-size:clamp(2.05rem,1.4rem + 2.8vw,3.6rem)}
h3{font-size:clamp(1.4rem,1.2rem + .9vw,2rem);line-height:1.14}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--sec-y)}

/* Eyebrow ----------------------------------------------------- */
.eyebrow{
  font-size:.6875rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  font-weight:500;
  color:var(--text-mid);
  display:flex;align-items:center;gap:.75rem;
  margin:0 0 1.4rem;
}
.eyebrow::before{content:"";width:1.75rem;height:1px;background:var(--accent-deco);flex:none}

.lede{
  font-size:clamp(1.075rem,1.01rem + .3vw,1.2rem);
  color:var(--text-mid);
  max-width:48ch;
}

/* Any section sitting on a dark ground inverts its supporting text */
.exp .eyebrow,.contact .eyebrow,.gallery .eyebrow{color:rgba(var(--paper-rgb),.62)}
.exp .lede,.contact .lede,.gallery .lede{color:var(--text-onDark)}

/* …and swaps the decorative red for the tint that reads on navy. */
.hero,.exp,.gallery,.contact,.foot,.phero,.band{--accent-deco:var(--accent)}

/* Buttons ----------------------------------------------------- */
.btn{
  --bg:var(--navy-900); --fg:var(--paper); --bd:var(--navy-900);
  position:relative;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  padding:1.025rem 1.9rem;
  min-height:52px;
  font-size:.8125rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  text-decoration:none;
  color:var(--fg);
  background:var(--bg);
  border:1px solid var(--bd);
  border-radius:2px;
  cursor:pointer;
  transition:color .45s var(--ease),border-color .45s var(--ease),transform .3s var(--ease);
  isolation:isolate;
}
.btn span{position:relative;z-index:2}
.btn::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:var(--accent);
  transform:scaleY(0);transform-origin:bottom;
  transition:transform .45s var(--ease);
}
.btn:hover::after,.btn:focus-visible::after{transform:scaleY(1)}
.btn:hover,.btn:focus-visible{color:var(--navy-900);border-color:var(--accent)}
.btn:active{transform:translateY(1px)}

.btn--light{--bg:var(--paper);--fg:var(--navy-900);--bd:var(--paper)}
.btn--ghost{--bg:transparent;--fg:var(--navy-900);--bd:rgba(var(--text-dark-rgb),.28)}
.btn--ghost-light{--bg:transparent;--fg:var(--paper);--bd:rgba(var(--paper-rgb),.36)}
.btn--ghost-light:hover,.btn--ghost-light:focus-visible{color:var(--navy-900)}

.btn-row{display:flex;flex-wrap:wrap;gap:.85rem}

/* Text link --------------------------------------------------- */
.tlink{
  display:inline-flex;align-items:center;gap:.55rem;
  font-size:.78125rem;letter-spacing:.14em;text-transform:uppercase;font-weight:500;
  text-decoration:none;padding-bottom:.35rem;
  border-bottom:1px solid var(--accent-deco);
  transition:gap .3s var(--ease);
}
.tlink:hover,.tlink:focus-visible{gap:1rem}
.tlink svg{width:14px;height:14px;flex:none}

:where(a,button,input,select,textarea,summary):focus-visible{
  outline:2px solid var(--accent-deco);outline-offset:3px;border-radius:2px;
}

.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--paper);color:var(--navy-900);
  padding:1rem 1.5rem;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;
}
.skip:focus{left:.75rem;top:.75rem}

/* Image frames ------------------------------------------------ */
.frame{
  position:relative;overflow:hidden;
  background:linear-gradient(145deg,var(--navy-700),var(--ink-800) 60%,var(--navy-800));
  border-radius:2px;
}
.frame img{
  width:100%;height:100%;object-fit:cover;
  transition:transform 1.1s var(--ease),opacity .8s ease;
}
.js .frame img:not(.is-loaded){opacity:0}
/* If a demo image 404s the frame keeps its navy ground + subtle grain */
.frame.is-failed::after{
  content:"";position:absolute;inset:0;
  background-image:radial-gradient(rgba(var(--accent-rgb),.16) 1px,transparent 1px);
  background-size:7px 7px;opacity:.5;
}
.frame.is-failed img{display:none}

/* ============================================================
   NAVIGATION
   ============================================================ */
/* The logo is navy artwork on transparency, so it needs a light ground to
   read at all. That makes the header white and, being opaque, sticky rather
   than fixed — it then occupies layout space and pushes the hero down on its
   own instead of every page hand-tuning a top offset. */
.nav{
  position:sticky;top:0;z-index:100;
  padding-block:.85rem;
  background:var(--paper);
  border-bottom:1px solid var(--rule-dark);
  transition:padding .4s var(--ease),box-shadow .4s var(--ease);
}
.nav.is-stuck{padding-block:.5rem;box-shadow:0 2px 14px rgba(var(--text-dark-rgb),.09)}
.nav__inner{display:flex;align-items:center;justify-content:space-between;gap:1.5rem}

.brand{display:flex;flex-direction:column;text-decoration:none;color:var(--navy-700);line-height:1}
.brand__logo{
  width:auto;height:clamp(42px,3.2vw + 30px,58px);
  transition:height .4s var(--ease);
}
.nav.is-stuck .brand__logo{height:clamp(36px,2.6vw + 26px,46px)}
.brand__sub{
  font-size:.5625rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--accent-ink);margin-top:.5rem;font-weight:500;
}
@media (max-width:600px){.brand__sub{display:none}}

.nav__links{display:flex;align-items:center;gap:2.1rem;list-style:none;margin:0;padding:0}
.nav__links a{
  position:relative;text-decoration:none;color:var(--navy-700);
  font-size:.78125rem;letter-spacing:.13em;text-transform:uppercase;font-weight:500;
  padding-block:.35rem;transition:color .3s var(--ease);
}
.nav__links a::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--accent-brand);
  transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease);
}
.nav__links a:hover,.nav__links a:focus-visible{color:var(--accent-ink)}
.nav__links a:hover::after,.nav__links a:focus-visible::after{transform:scaleX(1);transform-origin:left}

.nav__cta{
  display:inline-flex;align-items:center;
  padding:.72rem 1.3rem;min-height:44px;
  border:1px solid var(--navy-700);border-radius:2px;
  background:var(--navy-700);color:var(--paper);text-decoration:none;
  font-size:.71875rem;letter-spacing:.14em;text-transform:uppercase;font-weight:500;
  transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease);
}
.nav__cta:hover,.nav__cta:focus-visible{background:var(--accent-brand);border-color:var(--accent-brand);color:var(--paper)}

/* --bar/--bar-gap make the close animation derivable: the outer bars have to
   travel exactly one row to meet the middle one, so the X always closes no
   matter how the button is sized. The old fixed 5.5px was short of the real
   14.66px row pitch, which left the arms crossing as a "›" instead. */
.burger{
  --bar:1.5px; --bar-gap:5px;
  display:none;width:46px;height:46px;
  background:none;border:1px solid rgba(var(--text-dark-rgb),.3);border-radius:2px;
  cursor:pointer;padding:0;place-items:center;align-content:center;gap:var(--bar-gap);
}
.burger span{display:block;width:19px;height:var(--bar);background:var(--navy-700);transition:transform .4s var(--ease),opacity .3s var(--ease)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(calc(var(--bar) + var(--bar-gap))) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(calc(-1 * (var(--bar) + var(--bar-gap)))) rotate(-45deg)}

/* Mobile drawer */
.drawer{
  position:fixed;inset:0;z-index:99;
  height:100dvh;
  background:var(--paper);
  display:flex;flex-direction:column;
  padding:6rem var(--gutter) max(3rem,env(safe-area-inset-bottom,0px) + 2rem);
  overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .45s var(--ease),transform .45s var(--ease),visibility .45s;
}
/* Auto margins centre the menu when it fits and collapse to 0 when it
   doesn't, so tall content stays reachable — justify-content:center would
   push the overflow off both ends. */
.drawer>nav{margin-top:auto}
.drawer__foot{margin-bottom:auto}
.drawer.is-open{opacity:1;visibility:visible;transform:none}
/* The header already has its own opaque ground, and it outranks the drawer on
   z-index, so the menu scrolls cleanly beneath it — this just adds the shadow
   that separates the two while they overlap. */
body.has-drawer .nav{box-shadow:0 2px 14px rgba(var(--text-dark-rgb),.09)}
.drawer ul{list-style:none;margin:0 0 2.5rem;padding:0}
.drawer li{border-bottom:1px solid var(--rule-dark)}
.drawer a{
  display:block;padding:1.15rem 0;text-decoration:none;color:var(--navy-700);
  font-family:var(--serif);font-size:1.7rem;font-variation-settings:"opsz" 144;
}
.drawer__foot{color:var(--text-mid);font-size:.875rem}
.drawer__foot a{font-family:var(--sans);font-size:1rem;padding:.2rem 0;color:var(--accent-ink);text-decoration:none}

@media (max-width:960px){
  .nav__links,.nav__cta{display:none}
  .burger{display:grid}
}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative;min-height:min(100svh,880px);display:flex;flex-direction:column;background:var(--navy-900)}
.hero__media{position:absolute;inset:0;overflow:hidden}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:center 55%}
.hero__media::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(to right,rgba(var(--shadow-rgb),.9) 0%,rgba(var(--shadow-rgb),.72) 42%,rgba(var(--shadow-rgb),.34) 75%,rgba(var(--shadow-rgb),.55) 100%),
    linear-gradient(to top,rgba(var(--shadow-rgb),.92) 0%,rgba(var(--shadow-rgb),0) 45%);
}
.hero__body{position:relative;z-index:2;flex:1;display:flex;align-items:center;padding-top:4.5rem;padding-bottom:3rem}
.hero__inner{max-width:44rem}
.hero .eyebrow{color:var(--accent);margin-bottom:1.6rem}
.hero .eyebrow::before{background:var(--accent)}
.hero h1{color:var(--paper)}
.hero h1 em{font-style:italic;font-variation-settings:"opsz" 144;color:var(--accent)}
.hero__sub{
  margin:1.9rem 0 2.5rem;max-width:44ch;
  color:rgba(var(--paper-rgb),.82);
  font-size:clamp(1.0625rem,1rem + .35vw,1.24rem);line-height:1.6;
}
.hero .btn-row{gap:1rem}

/* Develop / Deliver / Delicious strip */
.ddd{position:relative;z-index:2;border-top:1px solid var(--rule-light);background:rgba(var(--shadow-rgb),.34);backdrop-filter:blur(3px)}
.ddd__grid{display:grid;grid-template-columns:repeat(3,1fr)}
.ddd__item{padding:1.6rem 0 1.7rem;padding-right:1.5rem}
.ddd__grid>*+*{border-left:1px solid var(--rule-light);padding-left:clamp(1rem,3vw,2.5rem)}
.ddd__word{
  font-family:var(--serif);font-size:clamp(1.05rem,.95rem + .5vw,1.45rem);
  color:var(--paper);font-variation-settings:"opsz" 144;
}
.ddd__word i{font-style:normal;color:var(--accent)}
.ddd__desc{margin:.5rem 0 0;font-size:.84375rem;line-height:1.5;color:rgba(var(--paper-rgb),.6)}
@media (max-width:600px){
  .ddd__desc{display:none}
  .ddd__item{padding:1.1rem 0;text-align:center}
  .ddd__grid>*+*{padding-left:0}
}

/* ============================================================
   TICKER
   ============================================================ */
.ticker{background:var(--navy-800);border-block:1px solid var(--rule-light);overflow:hidden;padding-block:1.15rem}
.ticker__track{display:flex;width:max-content;animation:slide 44s linear infinite}
.ticker__set{display:flex;flex:none}
.ticker span{
  display:inline-flex;align-items:center;gap:2.6rem;padding-right:2.6rem;
  font-size:.75rem;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(var(--paper-rgb),.66);white-space:nowrap;font-weight:400;
}
.ticker span::after{content:"";width:4px;height:4px;border-radius:50%;background:var(--accent);flex:none}
@keyframes slide{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .ticker__track{animation:none}
  .ticker{padding-inline:var(--gutter)}
  .ticker__set:nth-child(2){display:none}
  .ticker__track{width:auto;flex-wrap:wrap}
}

/* ============================================================
   ABOUT
   ============================================================ */
.about{background:var(--paper)}
.about__grid{display:grid;grid-template-columns:minmax(0,.88fr) minmax(0,1fr);gap:clamp(2.5rem,6vw,6rem);align-items:center}
.about__media{position:relative}
.about .frame{aspect-ratio:4/5}
.about__badge{
  position:absolute;right:-1.25rem;bottom:1.75rem;
  background:var(--navy-900);color:var(--paper);
  padding:1.35rem 1.6rem;max-width:14rem;border-radius:2px;
  box-shadow:0 22px 48px -24px rgba(var(--navy-900-rgb),.7);
}
.about__badge strong{display:block;font-family:var(--serif);font-size:1.6rem;color:var(--accent);line-height:1;font-variation-settings:"opsz" 144}
.about__badge span{display:block;margin-top:.55rem;font-size:.71875rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(var(--paper-rgb),.66);line-height:1.5}
@media (max-width:900px){
  .about__grid{grid-template-columns:1fr}
  .about__badge{right:1rem;bottom:1rem;max-width:12rem}
}

.sig{margin-top:2.5rem;padding-top:1.75rem;border-top:1px solid var(--rule-dark)}
.sig__name{font-family:var(--serif);font-size:1.35rem;font-variation-settings:"opsz" 144}
.sig__role{font-size:.71875rem;letter-spacing:.18em;text-transform:uppercase;color:var(--text-mid);margin-top:.4rem}

.facts{list-style:none;margin:2.25rem 0 0;padding:0;display:grid;gap:.9rem}
.facts li{display:flex;gap:.9rem;align-items:baseline;font-size:.9375rem;color:var(--text-mid)}
.facts li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--accent);flex:none;transform:translateY(-3px)}

/* ============================================================
   SERVICES
   ============================================================ */
.services{background:var(--paper-2)}
.sec-head{max-width:52rem;margin-bottom:clamp(2.75rem,6vw,4.5rem)}

.srv{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(1.75rem,4vw,4rem);align-items:center;padding-block:clamp(2.5rem,5vw,4rem)}
.srv__media{grid-column:span 6}
.srv__media .frame{aspect-ratio:5/4}
.srv__text{grid-column:span 6}
.srv--flip .srv__media{order:2}
.srv__num{
  font-family:var(--serif);font-size:1.125rem;letter-spacing:.16em;
  color:var(--accent-ink);display:block;margin-bottom:1rem;font-variation-settings:"opsz" 144;
}
.srv__text h3{margin-bottom:1rem}
.srv__text p{color:var(--text-mid);max-width:44ch}
.srv__text .tlink{margin-top:1.5rem}
@media (max-width:860px){
  .srv__media,.srv__text{grid-column:span 12}
  .srv--flip .srv__media{order:0}
}

/* Featured service — Home Dining */
.feature{
  background:var(--navy-900);color:var(--paper);
  border-radius:3px;overflow:hidden;
  margin-block:clamp(2rem,5vw,3.5rem);
  display:grid;grid-template-columns:repeat(12,1fr);
}
.feature__text{grid-column:span 5;padding:clamp(2.25rem,4.5vw,4.25rem)}
.feature__media{grid-column:span 7;position:relative;min-height:26rem}
.feature__media .frame{position:absolute;inset:0;border-radius:0}
.feature__tag{
  display:inline-flex;align-items:center;gap:.55rem;
  border:1px solid rgba(var(--accent-rgb),.5);color:var(--accent);
  padding:.45rem .9rem;border-radius:999px;
  font-size:.65625rem;letter-spacing:.18em;text-transform:uppercase;font-weight:500;
  margin-bottom:1.5rem;
}
.feature h3{font-size:clamp(1.85rem,1.4rem + 1.6vw,2.85rem);margin-bottom:1.15rem}
.feature p{color:var(--text-onDark);max-width:38ch}
.feature__list{list-style:none;margin:2rem 0 2.25rem;padding:0;display:grid;gap:.85rem}
.feature__list li{display:flex;gap:.85rem;font-size:.9375rem;color:rgba(var(--paper-rgb),.8);line-height:1.5}
.feature__list svg{width:15px;height:15px;flex:none;stroke:var(--accent);margin-top:.35rem}
@media (max-width:900px){
  .feature__text,.feature__media{grid-column:span 12}
  .feature__media{min-height:20rem;order:-1}
}

/* ============================================================
   EXPERIENCE
   ============================================================ */
.exp{background:var(--navy-900);color:var(--paper);position:relative;overflow:hidden}
.exp::before{
  content:"";position:absolute;inset:0;opacity:.09;
  background:radial-gradient(60rem 32rem at 78% -10%,var(--accent),transparent 68%);
}
.exp__inner{position:relative}
.exp__head{max-width:44rem;margin-bottom:clamp(3rem,7vw,5.5rem)}
.exp__head h2{color:var(--paper)}
.exp__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.exp__step{padding:0 clamp(1.25rem,3vw,2.75rem);position:relative}
.exp__step:first-child{padding-left:0}
.exp__step:last-child{padding-right:0}
.exp__step+.exp__step{border-left:1px solid var(--rule-light)}
.exp__n{
  font-family:var(--serif);font-size:clamp(3.5rem,2rem + 5vw,6rem);line-height:.85;
  color:transparent;-webkit-text-stroke:1px rgba(var(--accent-rgb),.55);
  display:block;margin-bottom:1.5rem;font-variation-settings:"opsz" 144;
}
.exp__step h3{margin-bottom:.85rem;color:var(--paper)}
.exp__step h3 i{font-style:italic;color:var(--accent)}
.exp__step p{color:var(--text-onDark);font-size:.9375rem;max-width:30ch}
@media (max-width:820px){
  .exp__grid{grid-template-columns:1fr;gap:2.75rem}
  .exp__step{padding:0}
  .exp__step+.exp__step{border-left:0;border-top:1px solid var(--rule-light);padding-top:2.5rem}
  .exp__n{margin-bottom:1rem}
}

/* ============================================================
   MENUS
   ============================================================ */
.menus{background:var(--paper)}
.menus__head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:clamp(1.5rem,5vw,4rem);align-items:end;margin-bottom:clamp(2.5rem,6vw,4rem)}
@media (max-width:820px){.menus__head{grid-template-columns:1fr}}

.mgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1rem,2vw,1.5rem)}
@media (max-width:980px){.mgrid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.mgrid{grid-template-columns:1fr}}

/* Type-led menu cards — deliberately photography-free so the
   gallery carries the imagery and nothing repeats. */
.mcard{
  position:relative;display:flex;flex-direction:column;
  min-height:15.5rem;padding:clamp(1.5rem,2.6vw,2rem);
  background:var(--navy-900);color:var(--paper);
  border-radius:2px;overflow:hidden;text-decoration:none;
  transition:transform .5s var(--ease),background .5s var(--ease);
}
.mcard::before{
  content:"";position:absolute;inset:0 0 auto 0;height:2px;background:var(--accent);
  transform:scaleX(0);transform-origin:left;transition:transform .55s var(--ease);
}
.mcard::after{
  content:"";position:absolute;right:-3rem;bottom:-3rem;width:11rem;height:11rem;border-radius:50%;
  background:radial-gradient(circle,rgba(var(--accent-rgb),.22),transparent 68%);
  opacity:0;transition:opacity .55s var(--ease);
}
.mcard:hover,.mcard:focus-visible{transform:translateY(-4px);background:var(--navy-800)}
.mcard:hover::before,.mcard:focus-visible::before{transform:scaleX(1)}
.mcard:hover::after,.mcard:focus-visible::after{opacity:1}
.mcard__k{
  position:relative;z-index:1;
  font-size:.625rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);
  display:block;padding-bottom:1.4rem;margin-bottom:1.4rem;border-bottom:1px solid var(--rule-light);
}
.mcard__t{
  position:relative;z-index:1;
  font-family:var(--serif);font-size:clamp(1.3rem,1.15rem + .5vw,1.55rem);
  line-height:1.14;font-variation-settings:"opsz" 144;margin:0;
}
.mcard__d{position:relative;z-index:1;margin:.75rem 0 0;font-size:.875rem;line-height:1.55;color:rgba(var(--paper-rgb),.66)}
.mcard__go{
  position:relative;z-index:1;margin-top:auto;padding-top:1.5rem;
  font-size:.65625rem;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(var(--paper-rgb),.55);display:inline-flex;align-items:center;gap:.5rem;
  transition:color .4s var(--ease),gap .4s var(--ease);
}
.mcard:hover .mcard__go,.mcard:focus-visible .mcard__go{color:var(--accent);gap:.85rem}
.mcard__go svg{width:13px;height:13px}

.menu-note{
  margin-top:clamp(2.25rem,5vw,3.25rem);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.5rem;
  padding-top:2rem;border-top:1px solid var(--rule-dark);
}
.menu-note p{color:var(--text-mid);max-width:52ch;font-size:.9375rem}

/* ============================================================
   GALLERY
   ============================================================ */
.gallery{background:var(--ink-900);color:var(--paper)}
.gallery h2{color:var(--paper)}
.gallery__head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:1.5rem;margin-bottom:clamp(2.25rem,5vw,3.5rem)}
.gal{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(.6rem,1.4vw,1.1rem)}
.gal figure{margin:0;position:relative;overflow:hidden;border-radius:2px}
.gal .frame{width:100%;height:100%;border-radius:0}
.gal figcaption{
  position:absolute;left:0;bottom:0;z-index:2;
  padding:1.1rem 1.15rem;width:100%;
  font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--paper);
  background:linear-gradient(to top,rgba(var(--shadow-rgb),.85),transparent);
  opacity:0;transform:translateY(6px);
  transition:opacity .45s var(--ease),transform .45s var(--ease);
}
.gal figure:hover figcaption,.gal figure:focus-within figcaption{opacity:1;transform:none}
.gal figure:hover img{transform:scale(1.05)}

.g1{grid-column:span 5;aspect-ratio:4/5}
.g2{grid-column:span 7;aspect-ratio:16/10}
.g3{grid-column:span 4;aspect-ratio:1}
.g4{grid-column:span 4;aspect-ratio:1}
.g5{grid-column:span 4;aspect-ratio:1}
@media (max-width:820px){
  .g1,.g2{grid-column:span 12;aspect-ratio:16/11}
  .g3,.g4{grid-column:span 6;aspect-ratio:1}
  .g5{grid-column:span 12;aspect-ratio:16/10}
  .gal figcaption{opacity:1;transform:none}
}
@media (max-width:520px){
  .g3,.g4{grid-column:span 12;aspect-ratio:4/3}
}

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.revs{background:var(--paper-2)}
.revs__head{text-align:center;max-width:38rem;margin:0 auto clamp(2.5rem,6vw,4rem)}
.revs__head .eyebrow{justify-content:center}
.rgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2.5vw,2rem)}
@media (max-width:900px){.rgrid{grid-template-columns:1fr;max-width:34rem;margin-inline:auto}}
.rev{
  background:var(--paper);border:1px solid var(--rule-dark);border-radius:2px;
  padding:clamp(1.75rem,3vw,2.4rem);display:flex;flex-direction:column;
}
.rev__stars{display:flex;gap:.2rem;margin-bottom:1.35rem}
.rev__stars svg{width:14px;height:14px;fill:var(--accent)}
.rev blockquote{
  margin:0 0 1.75rem;flex:1;
  font-family:var(--serif);font-size:1.135rem;line-height:1.42;
  font-variation-settings:"opsz" 60;color:var(--text-dark);
}
.rev cite{font-style:normal;display:block;padding-top:1.25rem;border-top:1px solid var(--rule-dark)}
.rev cite b{display:block;font-weight:500;font-size:.9375rem}
.rev cite span{display:block;margin-top:.28rem;font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-mid)}
.revs__foot{text-align:center;margin-top:2.5rem;font-size:.8125rem;color:var(--text-mid)}
.revs__foot a{color:var(--text-dark)}

/* ============================================================
   CONTACT
   ============================================================ */
.contact{background:var(--navy-900);color:var(--paper);position:relative;overflow:hidden}
.contact::before{
  content:"";position:absolute;inset:0;opacity:.1;
  background:radial-gradient(50rem 30rem at 12% 8%,var(--accent),transparent 70%);
}
.contact__grid{position:relative;display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1fr);gap:clamp(2.5rem,6vw,5.5rem)}
@media (max-width:900px){.contact__grid{grid-template-columns:1fr}}
.contact h2{color:var(--paper)}

.cdetails{list-style:none;margin:2.75rem 0 0;padding:0;display:grid;gap:1.6rem}
.cdetails li{display:flex;gap:1rem;align-items:flex-start}
.cdetails svg{width:17px;height:17px;stroke:var(--accent);flex:none;margin-top:.4rem}
.cdetails .k{display:block;font-size:.65625rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(var(--paper-rgb),.5);margin-bottom:.3rem}
.cdetails a,.cdetails .v{
  color:var(--paper);text-decoration:none;font-size:1.0625rem;
  border-bottom:1px solid transparent;transition:border-color .3s var(--ease),color .3s var(--ease);
}
.cdetails a:hover,.cdetails a:focus-visible{color:var(--accent);border-bottom-color:var(--accent)}

/* Form -------------------------------------------------------- */
.form{
  background:rgba(var(--paper-rgb),.045);
  border:1px solid var(--rule-light);
  border-radius:3px;
  padding:clamp(1.5rem,3.5vw,2.75rem);
}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:1.15rem}
.field{display:flex;flex-direction:column}
.field--full{grid-column:1/-1}
@media (max-width:560px){.fgrid{grid-template-columns:1fr}.field{grid-column:1/-1}}

.field label{
  font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(var(--paper-rgb),.66);margin-bottom:.6rem;font-weight:500;
}
.field .req{color:var(--accent)}
.field input,.field select,.field textarea{
  font-family:var(--sans);font-size:1rem;color:var(--paper);
  background:rgba(var(--shadow-rgb),.42);
  border:1px solid var(--rule-light);border-radius:2px;
  padding:.9rem 1rem;min-height:50px;width:100%;
  transition:border-color .3s var(--ease),background .3s var(--ease);
  -webkit-appearance:none;appearance:none;
}
.field textarea{min-height:8rem;resize:vertical;line-height:1.6}
.field input::placeholder,.field textarea::placeholder{color:rgba(var(--paper-rgb),.3)}
.field input:hover,.field select:hover,.field textarea:hover{border-color:rgba(var(--paper-rgb),.3)}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--accent);background:rgba(var(--shadow-rgb),.62);
}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:none}
.field select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23C6A664' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1rem center;background-size:12px;
  padding-right:2.6rem;cursor:pointer;
}
.field select option{background:var(--navy-800);color:var(--paper)}
/* date inputs on iOS/Safari */
.field input[type="date"]{min-height:50px}
.field input[type="date"]::-webkit-calendar-picker-indicator{filter:invert(72%) sepia(35%) saturate(500%) hue-rotate(2deg);cursor:pointer}

.field [aria-invalid="true"]{border-color:var(--err);background:rgba(var(--err-rgb),.12)}
.err{
  font-size:.78125rem;color:var(--err);margin-top:.5rem;
  display:flex;align-items:center;gap:.4rem;min-height:0;
}
.err:empty{display:none}
.err::before{content:"⚠";font-size:.85em}

.form__foot{margin-top:1.75rem;display:flex;flex-wrap:wrap;align-items:center;gap:1.25rem;justify-content:space-between}
.form__note{font-size:.78125rem;color:rgba(var(--paper-rgb),.5);max-width:26ch}

.success{
  display:none;text-align:center;padding:clamp(2rem,5vw,3.5rem) 1rem;
}
.success.is-shown{display:block;animation:pop .55s var(--ease)}
@keyframes pop{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.success__mark{
  width:60px;height:60px;margin:0 auto 1.6rem;border-radius:50%;
  border:1px solid var(--accent);display:grid;place-items:center;
}
.success__mark svg{width:24px;height:24px;stroke:var(--accent)}
.success h3{color:var(--paper);margin-bottom:.85rem}
.success p{color:var(--text-onDark);max-width:36ch;margin-inline:auto}

/* ============================================================
   FOOTER
   ============================================================ */
.foot{background:var(--ink-900);color:var(--paper);padding-block:clamp(3.5rem,7vw,5rem) 0}
.foot__grid{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(2,minmax(0,1fr));gap:clamp(2rem,5vw,4rem)}
@media (max-width:820px){.foot__grid{grid-template-columns:1fr 1fr}.foot__brand{grid-column:1/-1}}
@media (max-width:520px){.foot__grid{grid-template-columns:1fr}}
.foot__name{font-family:var(--serif);font-size:1.65rem;font-variation-settings:"opsz" 144}
.foot__tag{margin-top:.7rem;font-size:.71875rem;letter-spacing:.22em;text-transform:uppercase;color:var(--accent)}
.foot__blurb{margin-top:1.4rem;color:rgba(var(--paper-rgb),.55);font-size:.9375rem;max-width:34ch}
.foot h4{font-size:.65625rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(var(--paper-rgb),.45);margin:0 0 1.25rem;font-family:var(--sans);font-weight:500}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:.8rem}
.foot a{color:rgba(var(--paper-rgb),.8);text-decoration:none;font-size:.9375rem;transition:color .3s var(--ease)}
.foot a:hover,.foot a:focus-visible{color:var(--accent)}
.social{display:inline-flex;align-items:center;gap:.6rem;margin-top:.4rem}
.social svg{width:17px;height:17px;fill:currentColor}
.foot__bar{
  margin-top:clamp(3rem,6vw,4.5rem);border-top:1px solid var(--rule-light);
  padding-block:1.75rem;
  display:flex;flex-wrap:wrap;gap:.85rem;justify-content:space-between;
  font-size:.78125rem;color:rgba(var(--paper-rgb),.42);
}
.foot__bar a{font-size:.78125rem;color:rgba(var(--paper-rgb),.55)}

/* ============================================================
   REVEAL ANIMATION
   ============================================================ */
.js [data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:var(--d,0ms)}
.js [data-reveal].is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .js [data-reveal]{opacity:1;transform:none}
  .frame img{transition:none}
}

/* ============================================================
   NAV DROPDOWN (desktop)
   ============================================================ */
.nav__links li{position:relative}
.nav__item--has-drop>a,.nav__toggle{
  display:inline-flex;align-items:center;gap:.4rem;
  background:none;border:0;cursor:pointer;padding:.35rem 0;
  font-family:var(--sans);font-size:.78125rem;letter-spacing:.13em;
  text-transform:uppercase;font-weight:500;color:var(--navy-700);
  transition:color .3s var(--ease);
}
.nav__toggle svg{width:9px;height:9px;transition:transform .35s var(--ease);flex:none}
.nav__item--has-drop:hover .nav__toggle svg,
.nav__item--has-drop:focus-within .nav__toggle svg{transform:rotate(180deg)}
.nav__toggle:hover{color:var(--accent-ink)}

.drop{
  position:absolute;top:calc(100% + .9rem);left:50%;transform:translate(-50%,-6px);
  min-width:16.5rem;padding:.6rem;margin:0;list-style:none;
  background:var(--paper);
  border:1px solid var(--rule-dark);border-radius:3px;
  box-shadow:0 26px 60px -26px rgba(var(--shadow-rgb),.35);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s;
}
.drop::before{content:"";position:absolute;inset:-1rem 0 100% 0}
.nav__item--has-drop:hover .drop,
.nav__item--has-drop:focus-within .drop,
.drop.is-open{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0)}
.drop li{border:0}
.drop a{
  display:block;padding:.72rem .85rem;border-radius:2px;
  font-size:.8125rem;letter-spacing:.04em;text-transform:none;
  color:var(--navy-700);opacity:1;line-height:1.35;
  transition:background .25s var(--ease),color .25s var(--ease);
}
.drop a::after{display:none}
.drop a:hover,.drop a:focus-visible{background:rgba(var(--accent-ink-rgb),.08);color:var(--accent-ink)}
.drop a small{display:block;margin-top:.2rem;font-size:.6875rem;color:var(--text-mid);letter-spacing:.02em}
.drop a:hover small,.drop a:focus-visible small{color:var(--text-mid)}

/* Drawer submenu (mobile accordion) */
.drawer__sub{list-style:none;margin:0;padding:0 0 .9rem;display:none}
.drawer__sub.is-open{display:block}
.drawer__sub li{border:0}
.drawer__sub a{
  font-family:var(--sans);font-size:1rem;padding:.62rem 0 .62rem 1.1rem;
  color:var(--text-mid);border-left:1px solid var(--rule-dark);
}
.drawer__btn{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem;
  background:none;border:0;cursor:pointer;padding:1.15rem 0;text-align:left;
  font-family:var(--serif);font-size:1.7rem;color:var(--navy-700);
  font-variation-settings:"opsz" 144;
}
.drawer__btn svg{width:15px;height:15px;flex:none;transition:transform .35s var(--ease);stroke:var(--accent-ink)}
.drawer__btn[aria-expanded="true"] svg{transform:rotate(180deg)}

/* ============================================================
   SUBPAGE HERO
   ============================================================ */
.phero{position:relative;background:var(--navy-900);padding-top:clamp(3.5rem,7vw,5.5rem);padding-bottom:clamp(3.5rem,7vw,5.5rem);overflow:hidden}
.phero::before{
  content:"";position:absolute;inset:0;opacity:.13;
  background:radial-gradient(48rem 26rem at 82% -20%,var(--accent),transparent 68%);
}
.phero__inner{position:relative;max-width:52rem}
.phero h1{color:var(--paper);font-size:clamp(2.3rem,1.6rem + 3vw,4rem)}
.phero .lede{color:var(--text-onDark);margin-top:1.6rem}
.crumb{display:flex;flex-wrap:wrap;align-items:center;gap:.55rem;margin:0 0 1.5rem;padding:0;list-style:none;
  font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(var(--paper-rgb),.5)}
.crumb a{color:rgba(var(--paper-rgb),.7);text-decoration:none;transition:color .3s var(--ease)}
.crumb a:hover,.crumb a:focus-visible{color:var(--accent)}
.crumb li::after{content:"/";margin-left:.55rem;color:rgba(var(--paper-rgb),.3)}
.crumb li:last-child::after{display:none}
.crumb li[aria-current]{color:var(--accent)}

/* ============================================================
   SUBPAGE BODY
   ============================================================ */
.pbody{background:var(--paper)}
.pgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.62fr);gap:clamp(2.5rem,6vw,5rem);align-items:start}
@media (max-width:900px){.pgrid{grid-template-columns:1fr}}

.prose h2{font-size:clamp(1.7rem,1.35rem + 1.4vw,2.4rem);margin:2.75rem 0 1.15rem}
.prose h2:first-child{margin-top:0}
.prose p{color:var(--text-mid);max-width:60ch}
.prose>p:first-of-type{font-size:clamp(1.075rem,1.01rem + .3vw,1.2rem);color:var(--text-dark)}
.prose blockquote{
  margin:2.25rem 0;padding:1.5rem 0 1.5rem 1.75rem;border-left:2px solid var(--accent);
  font-family:var(--serif);font-size:clamp(1.2rem,1.05rem + .6vw,1.55rem);
  line-height:1.35;color:var(--text-dark);font-variation-settings:"opsz" 90;
}
.ticklist{list-style:none;margin:1.75rem 0;padding:0;display:grid;gap:1rem}
.ticklist li{display:flex;gap:.9rem;color:var(--text-mid);line-height:1.55}
.ticklist svg{width:16px;height:16px;flex:none;stroke:var(--accent-ink);margin-top:.32rem}

/* Sticky enquiry rail */
.rail{position:sticky;top:6.5rem;background:var(--navy-900);color:var(--paper);border-radius:3px;padding:clamp(1.6rem,3vw,2.15rem)}
.rail h3{color:var(--paper);font-size:1.5rem;margin-bottom:.85rem}
.rail p{color:var(--text-onDark);font-size:.9375rem;margin-bottom:1.5rem}
.rail .btn{width:100%}
.rail__num{margin-top:1.5rem;padding-top:1.35rem;border-top:1px solid var(--rule-light);display:grid;gap:.7rem}
.rail__num a{color:var(--paper);text-decoration:none;font-size:1rem;display:flex;gap:.7rem;align-items:center}
.rail__num a:hover,.rail__num a:focus-visible{color:var(--accent)}
.rail__num svg{width:15px;height:15px;stroke:var(--accent);flex:none}
@media (max-width:900px){.rail{position:static}}

/* ============================================================
   SAMPLE MENU SHEETS
   ============================================================ */
.sheets{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2.5vw,1.75rem)}
@media (max-width:980px){.sheets{grid-template-columns:1fr;max-width:34rem}}
.sheet{background:var(--navy-900);color:var(--paper);border-radius:3px;padding:clamp(1.75rem,3vw,2.25rem);display:flex;flex-direction:column}
.sheet__k{font-size:.625rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);display:block;margin-bottom:.8rem}
.sheet h3{color:var(--paper);margin-bottom:1.5rem;padding-bottom:1.25rem;border-bottom:1px solid var(--rule-light)}
.sheet ul{list-style:none;margin:0;padding:0;display:grid;gap:.85rem;flex:1}
.sheet li{font-size:.9375rem;line-height:1.45;color:rgba(var(--paper-rgb),.84)}
.sheet li em{display:block;font-style:normal;font-size:.8125rem;color:rgba(var(--paper-rgb),.5);margin-top:.15rem}
.sheet li.sep{text-align:center;color:var(--accent);font-family:var(--serif);font-size:.875rem;letter-spacing:.2em}
.sheet__dl{margin-top:1.75rem;padding-top:1.35rem;border-top:1px solid var(--rule-light)}

.themes{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.75rem;padding:0;list-style:none}
.themes li{
  border:1px solid var(--rule-dark);border-radius:999px;padding:.55rem 1.1rem;
  font-size:.8125rem;color:var(--text-mid);background:var(--paper);
}

/* ============================================================
   REVIEWS CAROUSEL
   ============================================================ */
.carousel{position:relative}
.carousel__track{
  display:flex;gap:clamp(1rem,2vw,1.5rem);
  overflow-x:auto;scroll-snap-type:x mandatory;
  padding-bottom:1.5rem;margin-bottom:.5rem;
  scrollbar-width:none;-ms-overflow-style:none;
  scroll-behavior:smooth;
}
.carousel__track::-webkit-scrollbar{display:none}
.carousel__track>*{scroll-snap-align:start;flex:0 0 clamp(17rem,26vw,22rem)}
.carousel.is-dragging .carousel__track{scroll-behavior:auto;cursor:grabbing;scroll-snap-type:none}
.carousel.is-dragging .rev{pointer-events:none}

.carousel__foot{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;margin-top:1.75rem}
.carousel__bar{position:relative;flex:1;height:2px;background:var(--rule-dark);border-radius:2px;overflow:hidden}
.carousel__bar span{position:absolute;top:0;bottom:0;left:0;background:var(--accent-ink);border-radius:2px;transition:left .25s var(--ease),width .25s var(--ease)}
.carousel__btns{display:flex;gap:.6rem;flex:none}
.cbtn{
  width:46px;height:46px;display:grid;place-items:center;
  background:transparent;border:1px solid var(--rule-dark);border-radius:50%;
  cursor:pointer;transition:background .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease),opacity .3s var(--ease);
}
.cbtn svg{width:16px;height:16px;stroke:currentColor}
.cbtn:hover:not(:disabled),.cbtn:focus-visible{background:var(--navy-900);border-color:var(--navy-900);color:var(--paper)}
.cbtn:disabled{opacity:.3;cursor:default}
.carousel .rev{height:100%}
.carousel .rev blockquote{font-size:1.075rem}

/* ============================================================
   REVIEWS WALL (all reviews page)
   ============================================================ */
.wall{columns:3;column-gap:clamp(1rem,2vw,1.5rem)}
@media (max-width:980px){.wall{columns:2}}
@media (max-width:640px){.wall{columns:1}}
.wall .rev{break-inside:avoid;margin-bottom:clamp(1rem,2vw,1.5rem);display:block}
.wall .rev blockquote{font-size:1.0625rem;margin-bottom:1.4rem}

.wall-head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:1.5rem;margin-bottom:clamp(2.25rem,5vw,3.5rem)}
.countbox{display:flex;gap:clamp(1.5rem,4vw,3rem)}
.countbox div strong{display:block;font-family:var(--serif);font-size:clamp(1.9rem,1.5rem + 1.4vw,2.6rem);color:var(--text-dark);line-height:1;font-variation-settings:"opsz" 144}
.countbox div span{display:block;margin-top:.5rem;font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-mid)}

/* ============================================================
   NEXT / RELATED LINKS
   ============================================================ */
.related{background:var(--paper-2)}
.rel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,1.5rem)}
@media (max-width:860px){.rel-grid{grid-template-columns:1fr}}
.rel{
  display:flex;flex-direction:column;justify-content:space-between;gap:2rem;
  padding:clamp(1.5rem,2.6vw,2rem);min-height:11rem;
  background:var(--paper);border:1px solid var(--rule-dark);border-radius:2px;
  text-decoration:none;color:var(--text-dark);
  transition:transform .45s var(--ease),border-color .45s var(--ease),background .45s var(--ease);
}
.rel:hover,.rel:focus-visible{transform:translateY(-3px);border-color:var(--navy-900);background:var(--paper)}
.rel__k{font-size:.625rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent-ink)}
.rel__t{font-family:var(--serif);font-size:1.3rem;line-height:1.15;margin:.7rem 0 0;font-variation-settings:"opsz" 144}
.rel__go{display:flex;align-items:center;gap:.5rem;font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-mid);transition:gap .35s var(--ease)}
.rel:hover .rel__go{gap:.85rem}
.rel__go svg{width:13px;height:13px}

/* CTA band */
.band{background:var(--navy-900);color:var(--paper);text-align:center;position:relative;overflow:hidden}
.band::before{content:"";position:absolute;inset:0;opacity:.12;background:radial-gradient(44rem 22rem at 50% 120%,var(--accent),transparent 70%)}
.band__inner{position:relative;max-width:40rem;margin-inline:auto}
.band h2{color:var(--paper)}
.band p{color:var(--text-onDark);margin:1.35rem auto 2.25rem}
.band .btn-row{justify-content:center}