/* Chai of the Tiger — static site design system
   Brand tokens measured from the live Brizy pages, cott-page-design-standard.md (2026-08-29).
   Fonts are self-hosted (Martin approved 2026-09-15) — see the @font-face block below.
   Overpass (nav/button face in the design standard) is dropped on purpose: the standard's
   own §5 records it has never actually loaded on the live site (falls back to sans there
   too), so nav/buttons use Montserrat 600 — a real self-hosted face instead of an
   accidental fallback, matching what visitors already see. Logged in design-report.md. */

:root{
  --black:#000000;
  --orange:#F48D13;
  --orange-lift:#FFB35C;
  --ink:#1C1C1C;
  --white:#FFFFFF;
  --band:#0B0B0B;
  --hair:rgba(255,255,255,.13);
  --hair-soft:rgba(255,255,255,.08);
  --dim:rgba(255,255,255,.62);
  --dimmer:rgba(255,255,255,.5);
  --display:'Palanquin Dark','Helvetica Neue',Arial,sans-serif;
  --body:'Montserrat','Helvetica Neue',Arial,sans-serif;
  --wrap:1200px;
  --measure:70ch;
  --pad:clamp(20px,5vw,72px);
  --radius:8px;
  --focus:3px solid var(--orange);
  /* ---------- spacing rhythm ----------
     space-section: the gap between one section's last content and the next section's
     heading — the single number that used to be "184px between some, 0 between others"
     (design-overhaul-2026-09-16). space-band: tight bands (the delivery/find-us strip)
     that sit flush under the hero. space-inner: gaps *inside* a component (card grids). */
  --space-section:clamp(56px,7vw,88px);
  --space-band:20px;
  --space-inner:clamp(20px,3vw,30px);
}

/* ---------- fonts: self-hosted, latin subset, font-display:swap ----------
   Fetched once from the official Google Fonts CSS2 API 2026-09-15; see
   static/fonts/OFL.txt for the license and both families' copyright notices. */
@font-face{
  font-family:'Palanquin Dark';font-style:normal;font-weight:400;font-display:swap;
  src:url('/fonts/palanquin-dark-400.woff2') format('woff2');
}
@font-face{
  font-family:'Palanquin Dark';font-style:normal;font-weight:500;font-display:swap;
  src:url('/fonts/palanquin-dark-500.woff2') format('woff2');
}
@font-face{
  font-family:'Montserrat';font-style:normal;font-weight:400;font-display:swap;
  src:url('/fonts/montserrat-400.woff2') format('woff2');
}
@font-face{
  font-family:'Montserrat';font-style:normal;font-weight:600;font-display:swap;
  src:url('/fonts/montserrat-600.woff2') format('woff2');
}

/* ---------- reset / base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px}   /* anchors land below the sticky header */
body{
  margin:0;background:var(--black);color:var(--white);
  font-family:var(--body);font-size:16px;font-weight:400;line-height:1.7;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg{max-width:100%;height:auto;display:block}
a{color:var(--orange);text-decoration:none}
a:hover{color:var(--orange-lift)}
main p a:not(.btn){text-decoration:underline;text-underline-offset:3px}   /* links in running text are not colour-only (PSI a11y) */
ul{list-style:none;margin:0;padding:0}
button{font:inherit}

/* ---------- focus & motion ---------- */
a:focus-visible,button:focus-visible,input:focus-visible{
  outline:var(--focus);outline-offset:3px;border-radius:2px;
}
/* The tabs radio is visually clipped to 1x1 (see Tabs section) — its own focus ring would
   paint a stray dot at the clip point on top of the ring already shown on .tabs__tab via
   :checked/:focus-visible+.tabs__tab below, so suppress it here. */
.tabs__radio:focus-visible{outline:none}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;}
}

/* ---------- skip link ---------- */
.skip-link{
  position:absolute;left:12px;top:-60px;z-index:100;
  background:var(--orange);color:var(--ink);font-weight:600;
  padding:12px 20px;border-radius:6px;transition:top .15s ease;
}
.skip-link:focus{top:12px}

/* ---------- layout primitives ---------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}
/* One rhythm value, applied once per section as top-only padding: two adjacent sections
   then get exactly one gap between them, never two stacked (design-overhaul-2026-09-16).
   Scoped to direct children of <main> so it never reaches into nested <section>s — the
   menu's six .tabs__panel elements are themselves <section>s and must not get this. The
   last section's bottom gap comes from .site-footer's own top padding, not from here. */
main>section{padding-top:var(--space-section);padding-bottom:0}
/* The page's very first section has no previous section to separate from — only the sticky
   header above it — so it earns a smaller gap than the rhythm between two content sections.
   (.hero/.hero--photo already override padding to 0 at higher specificity, unaffected here.) */
main>section:first-child{padding-top:56px}
/* A trailing <p>'s own margin-bottom (p{margin:0 0 16px} above) otherwise collapses through
   .wrap and .section, adding a stray 16px to the gap before whatever section follows —
   measured on the home page (104px instead of 88px between "Book Your Seat Today" and
   "Visit Us", design-overhaul-2026-09-16). Zeroing the wrap's own last child keeps every
   section-to-section gap equal to exactly one --space-section, regardless of what element
   happens to end the section. */
.wrap>*:last-child{margin-bottom:0}
.measure{max-width:var(--measure)}
.disp{font-family:var(--display);font-weight:400;line-height:1.3}
h1,h2{font-family:var(--display);font-weight:400;line-height:1.12;margin:0 0 18px;letter-spacing:-.005em}
h1{font-size:clamp(32px,6vw,45px)}
h2{font-size:clamp(26px,4.2vw,36px)}
h3{font-family:var(--display);font-weight:500;font-size:20px;line-height:1.6;color:var(--orange);margin:0 0 8px}
h4{font-family:var(--display);font-weight:500;font-size:17px;line-height:1.6;color:var(--orange);margin:0 0 8px}
p{margin:0 0 16px}
.eyebrow{font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--orange);margin:0 0 14px}
.lede{font-size:clamp(17px,2vw,20px);line-height:1.55;color:rgba(255,255,255,.80);max-width:52ch}

/* ---------- grid utilities (for page-author fragments: hero, sections, facts...) ---------- */
.grid{display:grid;gap:var(--space-inner)}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.grid--auto{grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr))}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:44px;background:var(--orange);color:var(--ink);
  font-family:var(--body);font-size:15px;font-weight:600;
  padding:12px 32px;border-radius:6px;border:1px solid var(--orange);
  transition:background .15s ease,transform .15s ease;
}
.btn:hover{background:var(--orange-lift);color:var(--ink);transform:translateY(-1px)}
.btn--line{background:transparent;color:var(--white);border:1px solid rgba(255,255,255,.34);font-weight:500}
.btn--line:hover{background:rgba(255,255,255,.08);color:var(--white);border-color:rgba(255,255,255,.6)}
.btn--sm{font-size:14px;padding:11px 26px}

/* ---------- hero (generic; homepage and any full-bleed intro band) ----------
   Base .hero is the gradient-only band used with no photo (feedback, samosa-feedback,
   thank-you): height follows its own content via .wrap's padding-block, same as before.
   .hero--photo (home only) adds a full-bleed <img class="hero-photo"> as a sibling of
   .wrap — a direct child of .hero, NOT nested inside .wrap, so it can be absolutely
   positioned edge-to-edge independent of .wrap's 1200px column — plus a fixed min-height
   so the photo actually reads as a hero, not a strip. Padding:0 overrides main>section's
   top padding: the hero manages its own vertical space via .wrap, not the page rhythm. */
.hero{
  position:relative;overflow:hidden;isolation:isolate;padding:0;
  background:#241608;display:flex;align-items:center;
}
/* main>section:first-child{padding-top:56px} above outranks .hero{padding:0} (0,1,2 beats 0,1,0), which pushed the hero copy
   56px down on every page whose hero is the first section (closing review, 2026-09-16). This selector outranks both. */
main>section.hero:first-child{padding:0}
.hero::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(0,0,0,.88) 0%,rgba(0,0,0,.62) 46%,rgba(0,0,0,.22) 100%);
}
.hero::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(58% 74% at 74% 42%,rgba(244,141,19,.24) 0%,rgba(244,141,19,0) 68%);
}
/* --space-section, not the old bespoke clamp(64px,11vw,140px): the gradient-only hero
   (feedback/samosa-feedback/thank-you) is one of the pages the rhythm must stay consistent
   across, and the old value ran to 280px of combined padding alone (measured 734px total
   hero height at 1366x768, out of proportion with every other band on the site). */
.hero .wrap{position:relative;z-index:2;width:100%;padding-block:var(--space-section)}
.hero-copy{max-width:660px}
.hero-cta{display:flex;gap:14px;margin-top:32px;flex-wrap:wrap;align-items:center}
.cta-note{margin:0;color:rgba(255,255,255,.85)}   /* "or call ahead on …" beside a button (Martin, 2026-09-16) */

.hero--photo{min-height:clamp(440px,65vh,620px)}
.hero--photo .wrap{padding-block:48px}
.hero-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:0}
/* extra bottom-up darkening so buttons stay legible however the photo crops on narrow
   viewports, layered on top of the shared left-to-right gradient above. One fixed set of
   stops at every width, not a per-breakpoint patch: .hero-copy is a fixed 660px cap on a
   variable-width .hero, so what fraction of the hero its RIGHT edge reaches is not
   monotonic with viewport width — it peaks around 700-1000px (~95%, before the 660px cap
   starts to bite), not at the narrowest phones. Canvas-sampled against the actual photo
   (worst-case pixel under the text column, design-overhaul-2026-09-16): the live site's
   own values (46%/90deg stops, .lede at .80 opacity) gave 3.75:1 at 1366px and as low as
   2.57:1 at 700px — under the 4.5:1 the brief requires for non-large text. The floor here
   (.72 alpha, never lower at any x) measured 7.6-10.6:1 at every width tried (375/700/1366). */
.hero--photo::before{background:
  linear-gradient(0deg,rgba(0,0,0,.28) 0%,rgba(0,0,0,0) 42%),
  /* dark (.84+) exactly as far as the text column can reach — .hero-copy is 660px wide after the
     .wrap gutter, so its right edge is at most 740px on viewports up to 1344px and 50%+132px on
     wider ones — then fades over the next 260px so the right of the photo (plants, menu art) stays
     bright as on the live site, instead of dimming the whole picture (session review 2026-09-16). */
  linear-gradient(90deg,rgba(0,0,0,.46) 0,rgba(0,0,0,.42) max(740px,50% + 140px),rgba(0,0,0,.14) calc(max(740px,50% + 140px) + 260px));
}
/* Every stop above is half the 2026-09-16 morning value (.92/.84/.28 and .55 bottom-up): Martin asked to "decrease the black
   opacity gradient mask by about half — we want to see more of the background". A soft text shadow carries some of the
   legibility the darker mask used to provide. */
.hero--photo::after{content:none}   /* no orange haze over a real photo; the glow is for the gradient-only heroes */
.hero--photo .hero-copy{text-shadow:0 1px 2px rgba(0,0,0,.6),0 2px 18px rgba(0,0,0,.55)}
.hero--photo .lede{color:rgba(255,255,255,.94)}

/* ---------- cards (dish highlights, feature cards, blog cards share this base) ---------- */
.cards{display:grid;gap:var(--space-inner);grid-template-columns:repeat(auto-fit,minmax(min(100%,278px),1fr))}
.card{border:1px solid var(--hair);border-radius:var(--radius);padding:24px;background:rgba(255,255,255,.02)}
.card h3{margin-top:0}
.card p:last-child{margin-bottom:0}
.cards--blog{gap:32px 28px}

/* ---------- site header ---------- */
.site-header{border-bottom:1px solid var(--hair-soft);position:sticky;top:0;z-index:60;background:rgba(0,0,0,.93);backdrop-filter:blur(8px)}
.site-header__bar{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-block:12px}
.brand{display:inline-flex;align-items:center}
.brand img{height:48px;width:auto;display:block}
.nav{display:flex;align-items:center;gap:clamp(14px,2.6vw,30px);flex-wrap:wrap;row-gap:10px}
.nav a{font-size:14px;font-weight:600;color:var(--dim);min-height:44px;display:inline-flex;align-items:center}
.nav a:hover,.nav a[aria-current="page"]{color:var(--white)}
.nav a.btn{color:var(--ink);min-height:auto}
.nav a.btn:hover{color:var(--ink)}
@media(max-width:480px){
  /* one header row on phones: the two-row sticky header took ~a fifth of the screen (integration, 2026-09-15) */
  .site-header__bar{padding-block:8px;flex-wrap:nowrap;gap:10px}
  .brand img{height:36px}
  .nav{gap:12px;flex-wrap:nowrap}
  .nav a{font-size:13px}
  .nav a.btn{padding:9px 14px;font-size:13px}
  .hero .wrap{padding-block:36px 40px}
}

/* ---------- breadcrumbs ---------- */
/* No top margin: breadcrumbs is always the first thing inside a section, which already
   supplies its own top clearance via main>section/.post — an extra 24px here just stacked
   on top of that (part of the menu page's "no menu on open" bug). */
.breadcrumbs{margin:0;font-size:13px;color:var(--dimmer)}
.breadcrumbs ol{display:flex;flex-wrap:wrap;gap:0;list-style:none;margin:0;padding:0}
.breadcrumbs li{display:flex;align-items:baseline}
.breadcrumbs li+li::before{content:"\203A";margin:0 8px;color:var(--dimmer)}
.breadcrumbs a{color:var(--dim);font-weight:500}
.breadcrumbs a:hover{color:var(--orange)}
.breadcrumbs li[aria-current="page"]{color:var(--dimmer)}

/* ---------- post header / meta ---------- */
/* padding-bottom:0 — .site-footer's own padding-top is the sole gap before the footer,
   same rule as every other page kind; a bottom value here would double it (measured: 176px
   between "More articles" and the footer, design-overhaul-2026-09-16). */
.post{max-width:var(--measure);margin-inline:auto;padding-block:var(--space-band) 0}
.post__head{margin-top:20px}
.post-meta{font-size:14px;color:var(--dim);margin:0 0 28px}
.post-featured{margin:0 0 32px}
.post-featured img{border-radius:var(--radius)}
.post__more{margin-top:40px;font-weight:600}

/* ---------- prose (article typography) ---------- */
.prose{font-size:16px;line-height:1.75}
.prose > *:first-child{margin-top:0}
.prose h2,.prose h3,.prose h4{margin-top:1.6em}
.prose h2{font-size:clamp(22px,3.4vw,28px)}
.prose h2 .wp-block-heading,.prose h3 .wp-block-heading{font-size:inherit}
.prose p,.prose li{font-family:var(--body);font-size:16px;color:rgba(255,255,255,.92)}
.prose ul,.prose ol{margin:0 0 16px;padding-left:1.4em}
.prose ul{list-style:disc}
.prose ol{list-style:decimal}
.prose li{margin-bottom:6px}
.prose a{color:var(--orange);text-decoration:underline;text-underline-offset:2px}
.prose a:hover{color:var(--orange-lift)}
.prose strong{color:var(--white)}
.prose blockquote{
  margin:28px 0;padding-left:22px;border-left:3px solid var(--orange);
  font-family:var(--display);font-size:clamp(18px,2.4vw,22px);line-height:1.5;color:var(--white);
}
.prose figure{margin:28px 0}
.prose figure img{border-radius:var(--radius);width:100%;height:auto}
.prose figcaption{margin-top:8px;font-size:13px;color:var(--dimmer)}
.prose .wp-block-button__link{
  display:inline-flex;min-height:44px;align-items:center;
  background:var(--orange);color:var(--ink);font-family:var(--body);font-size:15px;font-weight:600;
  border-radius:6px;padding:12px 28px;text-decoration:none;
}
.prose .wp-block-button__link:hover{background:var(--orange-lift)}
/* Rank Math table-of-contents box, preserved verbatim by content.py — style the wrapper only. */
.prose .wp-block-rank-math-toc-block{
  border:1px solid var(--hair);border-radius:var(--radius);
  padding:20px 24px;margin:28px 0;background:rgba(255,255,255,.03);
}
.prose .wp-block-rank-math-toc-block nav > ul{list-style:none;margin:0;padding:0}
.prose .wp-block-rank-math-toc-block ul ul{list-style:none;margin:6px 0 0;padding-left:1.2em}
.prose .wp-block-rank-math-toc-block li{margin-bottom:6px}
.prose .wp-block-rank-math-toc-block a{color:var(--white);text-decoration:none;font-weight:500}
.prose .wp-block-rank-math-toc-block a:hover{color:var(--orange)}

/* ---------- conversion block (post footer CTA, outside #post-body) ---------- */
.convert-block{
  margin-top:48px;padding:24px;border:1px solid var(--hair);border-radius:var(--radius);
  background:rgba(244,141,19,.05);
}
.convert-block p{margin:0 0 16px;color:rgba(255,255,255,.85);font-size:14px}
.convert-block__links{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:0!important}

/* ---------- blog index & post cards ---------- */
.blog-index{padding-top:var(--space-section);padding-bottom:0}
.card--post{padding:0;overflow:hidden;display:flex;flex-direction:column}
.card--post .post-card__link{display:block}
.post-card__img{width:100%;aspect-ratio:16/10;object-fit:cover}
.card--post h2{font-size:19px;margin:16px 18px 6px}
.card--post h2 a{color:var(--white);text-decoration:none}
.card--post h2 a:hover{color:var(--orange)}
.post-card__date{font-size:12.5px;color:var(--dimmer);margin:0 18px 8px}
.post-card__excerpt{font-size:14px;color:rgba(255,255,255,.72);margin:0 18px 18px}

/* ---------- 404 ---------- */
/* padding-bottom:0 for the same reason as .post above: .site-footer already supplies the
   gap before itself, so a bottom value here would double it. */
.not-found{padding-top:var(--space-section);padding-bottom:0;text-align:center;max-width:640px}
.not-found__links{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:28px}

/* ---------- site footer ---------- */
.site-footer{border-top:1px solid var(--hair-soft);padding-block:var(--space-section) 0;font-size:14px;color:var(--dim)}
.footer__grid{display:grid;gap:32px;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));padding-bottom:32px}
.footer__name{font-family:var(--display);color:var(--white);font-size:17px;margin-bottom:10px}
.footer__nap p{margin:0 0 6px}
.footer__nap a{color:var(--white)}
.footer__nap a:hover{color:var(--orange)}
.footer__links{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.footer__social{display:flex;flex-wrap:wrap;gap:0 14px}
.footer__social a{color:var(--dim);display:inline-block;padding-block:12px}   /* 44px tap target */
.footer__social a:hover{color:var(--orange)}
.footer__bottom{border-top:1px solid var(--hair-soft);padding-block:18px;font-size:12.5px;color:var(--dimmer)}

/* ---------- tabs (CSS-only, radio-driven; no ARIA roles — see lib/layout.py docstring
   and the build spec: reuse the mechanism verbatim, don't rebuild it as an ARIA tablist,
   since roles without JS-managed state would lie about what's selected).

   Markup contract (all direct children of .tabs, radios and their labels adjacent so the
   `:checked + label` and `:focus-visible + label` selectors below apply):

   <div class="tabs">
     <input class="tabs__radio" type="radio" name="menu-tabs" id="tab-1" checked>
     <label class="tabs__tab" for="tab-1">Chef's Signatures</label>
     <input class="tabs__radio" type="radio" name="menu-tabs" id="tab-2">
     <label class="tabs__tab" for="tab-2">Iconic Street Chaats</label>
     ... (repeat per category; up to 8 supported)
     <div class="tabs__panels">
       <section class="tabs__panel">... signatures content ...</section>
       <section class="tabs__panel">... chaats content ...</section>
       ...
     </div>
   </div>

   With CSS off, .tabs__panel never gets display:none, so every panel reads in document
   order — nothing is ever hidden behind JS or CSS that isn't there. ---------- */
.tabs{position:relative;display:flex;flex-wrap:wrap;gap:8px 6px}
.tabs__radio{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.tabs__tab{
  display:inline-flex;align-items:center;min-height:44px;padding:0 20px;cursor:pointer;
  border:1px solid var(--hair);border-radius:999px;font-size:14px;font-weight:600;color:var(--dim);
  transition:background .15s ease,color .15s ease,border-color .15s ease;
}
.tabs__tab:hover{color:var(--white);border-color:rgba(255,255,255,.4)}
.tabs__radio:checked+.tabs__tab{background:var(--orange);border-color:var(--orange);color:var(--ink)}
.tabs__radio:focus-visible+.tabs__tab{outline:var(--focus);outline-offset:2px}
.tabs__panels{flex-basis:100%;width:100%;margin-top:24px}
/* padding:0 so a panel <section> never inherits any section rhythm if the main>section rule is ever loosened to a
   descendant selector; today main>section (child combinator) cannot reach it. */
.tabs__panel{display:none;padding:0}
.tabs__radio:nth-of-type(1):checked~.tabs__panels .tabs__panel:nth-of-type(1),
.tabs__radio:nth-of-type(2):checked~.tabs__panels .tabs__panel:nth-of-type(2),
.tabs__radio:nth-of-type(3):checked~.tabs__panels .tabs__panel:nth-of-type(3),
.tabs__radio:nth-of-type(4):checked~.tabs__panels .tabs__panel:nth-of-type(4),
.tabs__radio:nth-of-type(5):checked~.tabs__panels .tabs__panel:nth-of-type(5),
.tabs__radio:nth-of-type(6):checked~.tabs__panels .tabs__panel:nth-of-type(6),
.tabs__radio:nth-of-type(7):checked~.tabs__panels .tabs__panel:nth-of-type(7),
.tabs__radio:nth-of-type(8):checked~.tabs__panels .tabs__panel:nth-of-type(8){display:block}

/* ---------- menu tools (V/VG key + PDF link, a compact line beside the tabs) ---------- */
.menu-tools{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 24px;
  margin:24px 0 28px;padding-top:20px;border-top:1px solid var(--hair-soft);
}
.menu-tools p{margin:0;font-size:13.5px;color:var(--dim)}
.menu-tools__legend{max-width:60ch}
.menu-tools__pdf{white-space:nowrap}

/* ---------- delivery / find-us strip: a full-bleed dark band directly under the hero,
   one row on desktop, wrapping to two on phones. A <ul> of links, not running prose, so
   the site-wide "underline links in body text" rule correctly does not apply here (see
   main p a:not(.btn) above) — these read as links by weight/colour/position instead,
   same treatment the live site already uses for this band. ---------- */
section.strip{
  background:var(--band);border-block:1px solid var(--hair-soft);
  padding-block:var(--space-band);margin-block:0;
}
.strip__nav{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 28px}
.strip__group{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px}
.strip__label{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--dimmer);white-space:nowrap}
.strip__links{display:flex;flex-wrap:wrap;gap:6px 16px}
.strip__links a{font-size:14px;font-weight:600;color:rgba(255,255,255,.85);white-space:nowrap}
.strip__links a:hover{color:var(--orange)}

/* ---------- testimonials carousel (replaces the static 3x3 review grid) ----------
   Horizontal scroll-snap track: works fully via trackpad/touch/keyboard with no script.
   The optional prev/next buttons are inert markup (hidden) until the small inline script
   in pages/home.html un-hides and wires them — see build spec note in that file. */
.testimonials-rating{font-size:15px;font-weight:600;color:var(--white);margin:0 0 4px;line-height:1.7}   /* plain text so it wraps naturally on phones */
.testimonials-rating .star{color:var(--orange)}
.testimonials-rating a{font-weight:600}
.testimonials{position:relative;margin-top:24px}
/* the scroll container is a focusable region (div); the list inside keeps its list semantics for screen readers */
.testimonials__track{overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:2px 2px 12px}
.testimonials__list{display:flex;gap:20px;margin:0;padding:0;list-style:none}
.testimonials__track::-webkit-scrollbar{display:none}
.testimonials__track:focus-visible{outline:var(--focus);outline-offset:4px;border-radius:var(--radius)}
.testimonial{
  scroll-snap-align:start;flex:0 0 clamp(260px,42%,380px);
  border:1px solid var(--hair);border-radius:var(--radius);padding:24px;background:rgba(255,255,255,.02);
}
.testimonial__quote{font-family:var(--display);font-style:italic;font-weight:400;font-size:clamp(17px,1.8vw,19px);line-height:1.5;color:var(--white);margin:0 0 16px}
.testimonial__name{font-weight:600;color:var(--white);margin:0}
.testimonial__source{font-size:12.5px;color:var(--dimmer);margin:2px 0 0}
/* prev/next sit in the flow under the track (right-aligned), never over the cards: overlay
   arrows at the track's edges covered the first card's text (session review 2026-09-16). */
.testimonials__controls{display:flex;justify-content:flex-end;gap:10px;margin-top:6px}
.testimonials__controls[hidden]{display:none}
.testimonials__nav{
  display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:999px;
  border:1px solid rgba(255,255,255,.34);background:transparent;color:var(--white);font-size:22px;line-height:1;cursor:pointer;
  transition:background .15s ease,color .15s ease,border-color .15s ease;
}
.testimonials__nav:hover{background:var(--orange);border-color:var(--orange);color:var(--ink)}

/* ---------- small screens: keep gutters, never let anything force horizontal scroll ---------- */
@media(max-width:480px){
  .footer__links{align-items:stretch}
  .convert-block__links{flex-direction:column}
  .convert-block__links .btn{width:100%}
  .menu-tools{justify-content:flex-start}
}