/* ==========================================================================
   KINISI PHYSIO — styles.css
   --------------------------------------------------------------------------
   Mobile-first. The base stylesheet targets a 360px viewport with no media
   query at all; every query below is min-width. There is deliberately not a
   single max-width query in this file — tools/check.js fails the build if one
   ever appears.

   The look, deliberately unlike the earlier demos: high contrast, one
   saturated accent, near-square 4px corners, hairline rules instead of boxes,
   and large type doing the work. The accent is cobalt in light and clay in
   dark, and it is reserved for buttons, the selected body-map region and the
   large numerals. Nothing else.
   --------------------------------------------------------------------------
    1  Tokens              10  Hours, info, map
    2  Reset & base        11  Body map
    3  Utilities           12  Form
    4  Buttons             13  Footer
    5  Header              14  Fixed chrome
    6  Mobile drawer       15  Reveal
    7  Hero                16  >=768px
    8  Editorial blocks    17  >=1024px
    9  Lists & panels      18  >=1180px  ·  19 >=1360px  ·  20 Print
   ========================================================================== */

/* ---------- 1. Tokens ----------------------------------------------------- */
:root{
  --bg:          #EEF0F4;      /* soft grey page */
  --surface:     #F7F8FA;
  --surface-2:   #E3E7ED;
  --ink:         #16203A;
  --muted:       #56607A;
  --line:        #D5DAE3;
  /* --line is a decorative hairline: section rules, list dividers, card edges.
     It is ~1.3:1 on --surface, which is fine for a divider and NOT fine for
     the boundary of a control. Anything a user has to find and operate — an
     input, a slot button, a day in the strip, a ghost button — takes
     --field-line, which clears WCAG 1.4.11's 3:1 on all three light surfaces
     (3.29 at worst). */
  --field-line:  #737E95;
  --primary:     #2F4BE0;      /* cobalt */
  --primary-ink: #FFFFFF;
  --primary-2:   #2439B4;      /* cobalt, hovered */
  --accent:      #2F4BE0;
  --hover-wash:  rgba(47,75,224,.09);

  /* A band is a full-width alternating section. In light it is deep navy and
     the text inverts.
     --band-muted, --band-line and --band-field-line are DERIVED, not given:
     muted copy, hairline dividers and control borders all exist inside those
     sections and need navy-safe values. Measured on the navy — --band-ink
     12.91:1, --band-muted 7.20:1, --band-field-line 3.29:1. */
  --band:            #1B2A4A;  /* deep navy, full-width alternating sections */
  --band-ink:        #F2F4F8;  /* text on navy bands */
  --band-muted:      #AEB9CE;
  --band-line:       #3A4869;
  --band-field-line: #6A7A99;
  --band-hover-wash: rgba(242,244,248,.12);
  /* The seam where a band meets the page. Navy in light, so no hairline shows
     against the band; --line in dark, where bands are what separates nothing
     and the hairline is doing the whole job. */
  --band-edge:       #1B2A4A;

  /* Two layers: a tight contact shadow and a wide soft one. Used only on the
     dropdown panel and the raised chrome — not on cards, which use hairlines. */
  --shadow:      0 1px 2px rgba(22,32,58,.10), 0 12px 32px rgba(22,32,58,.12);
  --ok:          #17703F;
  --err:         #B22B1E;

  --display: "Alegreya Sans", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --sans:    "Noto Sans", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --radius:   4px;
  --radius-s: 4px;
  --gutter:   20px;
  --header-h: 62px;
  --section:  clamp(3rem, 9vw, 6rem);
  --maxw:     1180px;
  color-scheme: light;
}

/* Dark. --primary is the lifted cobalt and --primary-ink is near-black, so
   every primary button, CTA band, selected map region and form submit carries
   a near-black label on cobalt — never dark on dark. Nothing below this point
   hardcodes a button colour, which is what makes that impossible rather than
   merely unlikely; tools/check.js fails the build if one ever appears.

   There are no navy bands in dark: --band is --surface, so .section--alt reads
   as a panel lifted just off the page, and --band-edge keeps the --line
   hairline between one section and the next. The same markup therefore carries
   a navy band in light and a barely-lifted one in dark, with no second class. */
[data-theme="dark"]{
  --bg:          #0B0C0F;
  --surface:     #131519;
  --surface-2:   #1B1E24;
  --ink:         #F2F3F5;
  --muted:       #9AA0AA;
  --line:        #262A31;
  --field-line:  #6E7480;      /* 3.5:1 at worst against the dark surfaces */
  --primary:     #6B84FF;      /* cobalt, lifted for contrast */
  --primary-ink: #0B0C0F;      /* near-black text on the button */
  --primary-2:   #8098FF;      /* cobalt, hovered */
  --accent:      #6B84FF;
  --hover-wash:  rgba(107,132,255,.14);

  --band:            #131519;       /* bands are barely lifted in dark */
  --band-ink:        #F2F3F5;
  --band-muted:      #9AA0AA;
  --band-line:       #262A31;
  --band-field-line: #6E7480;
  --band-hover-wash: rgba(107,132,255,.14);
  --band-edge:       #262A31;       /* a --line hairline at the band seam */

  --shadow:      0 1px 2px rgba(0,0,0,.5), 0 12px 32px rgba(0,0,0,.42);
  --ok:          #6FD39B;
  --err:         #FF8C7A;
  color-scheme: dark;
}

/* Light is the default theme. There is deliberately no
   @media (prefers-color-scheme: dark) block here: the OS preference does not
   decide, only an explicit choice from the header toggle does. Without
   JavaScript no data-theme lands on <html> at all, the :root tokens above
   apply, and the visitor gets light — which is the same answer the inline head
   script gives when nothing is stored. */


/* ---------- 2. Reset & base ----------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:1.0625rem;              /* 17px floor */
  font-weight:400;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3{
  font-family:var(--display);
  font-weight:800;
  line-height:1.06;
  letter-spacing:-.015em;
  margin:0 0 .5em;
  text-wrap:balance;
}
h1{font-size:clamp(2.2rem, 6vw, 4rem)}
h2{font-size:clamp(1.7rem, 4.6vw, 2.6rem)}
h3{font-size:1.3125rem;line-height:1.2}
h4{
  font-family:var(--sans);font-weight:600;font-size:.9375rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
  margin:0 0 .7rem;
}
p{margin:0 0 1.15em}
p:last-child{margin-bottom:0}
a{color:var(--primary);text-underline-offset:.18em}
a:hover{color:var(--ink)}
img,svg,iframe{max-width:100%;display:block}
ul,ol{margin:0 0 1.2em;padding-left:1.25rem}
li{margin:0 0 .5em}
hr{border:0;border-top:1px solid var(--line);margin:2.4rem 0}
strong{font-weight:600}
small{font-size:.875rem}            /* 14px floor */
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:var(--radius)}
::selection{background:var(--hover-wash)}

.skip-link{
  position:absolute;left:var(--gutter);top:-100px;z-index:200;
  background:var(--primary);color:var(--primary-ink);
  padding:.75rem 1.2rem;border-radius:var(--radius);
  font-weight:600;font-size:.9375rem;text-decoration:none;
  transition:top .15s;
}
.skip-link:focus{top:10px;color:var(--primary-ink)}

/* ---------- 3. Utilities -------------------------------------------------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--section)}
.section--tight{padding-block:calc(var(--section) * .6)}
/* One hairline rule is the divider between sections, in place of boxing every
   block. --surface-2 marks the few bands that need to sit apart. */
.section + .section{border-top:1px solid var(--line)}

.lede{font-size:1.1875rem;line-height:1.55;color:var(--muted)}
.muted{color:var(--muted)}
.eyebrow{
  font-family:var(--sans);font-weight:600;font-size:.875rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  margin:0 0 .9rem;
}
.h-lead{margin-bottom:1.1rem}
.nowrap{white-space:nowrap}
.measure{max-width:62ch}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* Aspect-ratio boxes. The suffix must match the file's own ratio or the render
   crops — tools/check.js enforces that pairing. */
.ratio{position:relative;overflow:hidden;border-radius:var(--radius);background:var(--surface-2)}
.ratio > img,.ratio > iframe{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0}
.ratio--4-3{padding-top:75%}
.ratio--3-4{padding-top:133.3333%}
.page-hero{margin-top:2rem}

.notice{
  background:var(--surface-2);
  border-left:3px solid var(--primary);
  border-radius:var(--radius);
  padding:1rem 1.15rem;
  font-size:1rem;color:var(--muted);
}
.notice strong{color:var(--ink)}

.crumbs{font-size:.9375rem;color:var(--muted);padding-block:.6rem 0}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.2rem .5rem}
.crumbs li{margin:0;display:flex;align-items:center;gap:.5rem}
.crumbs li + li::before{content:"\203A";color:var(--line);font-size:1.05rem;line-height:1}
/* Breadcrumb links are navigation, so they carry the same 44px target as the
   rest of the nav. Inline links inside a running sentence keep their natural
   height — that is the one documented exception (WCAG 2.5.8). */
.crumbs a,.crumbs [aria-current]{display:inline-flex;align-items:center;min-height:44px}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--primary)}
.crumbs [aria-current]{color:var(--ink);font-weight:600}

/* Not nowrap: the brief's nowrap rule covers nav items, the phone number and
   buttons. A sentence-length "read more" link is none of those, and holding it
   on one line pushed the homepage 8px past 360. It wraps; the arrow follows
   the last word. */
.link-more{
  display:inline-flex;align-items:center;gap:.5rem;min-height:44px;
  font-weight:600;color:var(--primary);text-decoration:none;
  max-width:100%;
}
.link-more::after{content:"\2192";transition:transform .15s}
.link-more:hover{color:var(--primary)}
.link-more:hover::after{transform:translateX(3px)}

/* ---------- 4. Buttons ---------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:48px;padding:.8rem 1.5rem;
  border:1px solid transparent;border-radius:var(--radius);
  font-family:var(--sans);font-weight:600;font-size:1rem;
  letter-spacing:.01em;
  text-decoration:none;white-space:nowrap;cursor:pointer;
  transition:background-color .15s, color .15s, border-color .15s;
}
.btn--sm{min-height:44px;padding:.55rem 1rem;font-size:.9375rem}
/* Every primary surface resolves through the tokens. In dark mode --primary is
   the lifted cobalt and --primary-ink is near-black, so this is never
   dark-on-dark. The header CTA, every CTA band and the booking submit all come
   through here. */
.btn--primary{background:var(--primary);color:var(--primary-ink);border-color:var(--primary)}
.btn--primary:hover{background:var(--primary-2);border-color:var(--primary-2);color:var(--primary-ink)}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--field-line)}
.btn--ghost:hover{background:var(--hover-wash);border-color:var(--primary);color:var(--ink)}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn-row{display:flex;flex-direction:column;gap:.7rem;margin-bottom:1.2rem}
.btn-row .btn{width:100%}

/* ---------- 5. Header ----------------------------------------------------- */
.header{
  position:sticky;top:0;z-index:90;
  background:var(--bg);
  border-bottom:1px solid var(--line);
}
.header__inner{
  display:flex;align-items:center;justify-content:space-between;gap:.75rem;
  min-height:var(--header-h);
}
/* Latin script, inherited colour, no underline. It must never render blue. */
.logo{display:block;color:inherit;text-decoration:none;white-space:nowrap;padding-block:.4rem}
.logo:hover,.logo:visited,.logo:focus{color:inherit}
.logo__name{
  display:block;font-family:var(--display);font-weight:800;
  font-size:1.375rem;line-height:1;letter-spacing:-.02em;color:var(--ink);
}
.logo__sub{
  display:block;font-family:var(--sans);font-weight:600;
  font-size:.875rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);line-height:1.4;margin-top:.25rem;
}
/* At the 14px floor the full kicker is too wide for a 360px header beside
   three action buttons, so the locality is added back from 768px up. */
.logo__at{display:none}

.nav{display:none}
/* Kept out of the desktop block so it holds at every width, not only where the
   nav happens to be visible. */
.nav__link,.dropdown a,.header__tel,.btn{white-space:nowrap}
.header__actions{display:flex;align-items:center;gap:.25rem}
.header__cta{display:none}
.header__tel{
  display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
  width:44px;height:44px;flex:none;border-radius:var(--radius);
  color:var(--muted);text-decoration:none;
  transition:background-color .15s, color .15s;
}
.header__tel:hover{background:var(--hover-wash);color:var(--ink)}
.header__tel svg{width:21px;height:21px;flex:none;fill:none;stroke:currentColor;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.header__tel span{display:none}

.icon-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;flex:none;
  border:1px solid transparent;border-radius:var(--radius);
  background:transparent;color:var(--muted);cursor:pointer;text-decoration:none;
  transition:background-color .15s, color .15s;
}
.icon-btn:hover{background:var(--hover-wash);color:var(--ink)}
.icon-btn svg{width:21px;height:21px;fill:none;stroke:currentColor;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.theme-toggle .i-moon{display:none}
[data-theme="dark"] .theme-toggle .i-sun{display:none}
[data-theme="dark"] .theme-toggle .i-moon{display:block}

.hamburger{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;flex:none;border:0;background:transparent;
  border-radius:var(--radius);color:var(--ink);cursor:pointer;text-decoration:none;
}
.hamburger:hover{background:var(--hover-wash)}
.hamburger svg{width:23px;height:23px;fill:none;stroke:currentColor;
  stroke-width:1.9;stroke-linecap:round}

/* ---------- 6. Mobile drawer ---------------------------------------------- */
.sheet{
  position:fixed;inset:0;z-index:95;
  background:var(--bg);
  padding:0 var(--gutter) calc(2rem + env(safe-area-inset-bottom));
  overflow-y:auto;overscroll-behavior:contain;
  visibility:hidden;opacity:0;
  /* visibility flips instantly on open and only AFTER the fade on close. It is
     deliberately not interpolated: while it was, the drawer stayed
     visibility:hidden for the length of the transition, and an element that is
     visibility:hidden cannot take focus — so focus stayed on the hamburger and
     Tab walked the page behind the open drawer. */
  transition:opacity .2s, visibility 0s linear .2s;
}
.sheet[data-open="true"]{visibility:visible;opacity:1;transition:opacity .2s, visibility 0s}
/* No-JS fallback: the hamburger is a real link to #sheet, so :target opens the
   menu. Scoped to .no-js so it can never fight the scripted state. */
.no-js .sheet:target{visibility:visible;opacity:1}
.sheet__top{
  display:flex;align-items:center;justify-content:space-between;
  min-height:var(--header-h);border-bottom:1px solid var(--line);
  margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter);
  position:sticky;top:0;background:var(--bg);z-index:2;
}
.sheet__nav{list-style:none;margin:0;padding:0}
.sheet__nav > li{margin:0;border-bottom:1px solid var(--line)}
.sheet__nav a,.sheet__nav summary{
  display:flex;align-items:center;justify-content:space-between;gap:.5rem;
  min-height:56px;padding:.85rem 0;
  font-weight:600;font-size:1.0625rem;color:var(--ink);text-decoration:none;
}
.sheet__nav a[aria-current="page"]{color:var(--primary)}
.sheet__nav summary{cursor:pointer;list-style:none}
.sheet__nav summary::-webkit-details-marker{display:none}
.sheet__nav .chev{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.sheet__nav details[open] summary .chev{transform:rotate(180deg)}
.sheet__sub{list-style:none;margin:0 0 .8rem;padding:0}
.sheet__sub li{border:0;margin:0}
.sheet__sub a{min-height:48px;padding:.5rem 0 .5rem 1.1rem;font-weight:400;font-size:1rem;color:var(--muted)}
.sheet__sub a:hover{color:var(--primary)}
.sheet__foot{margin-top:1.8rem;display:grid;gap:.7rem}
.sheet__meta{margin-top:1.4rem;font-size:.9375rem;color:var(--muted)}
.sheet__meta a{color:var(--ink);font-weight:600;text-decoration:none;
  display:inline-flex;align-items:center;min-height:44px}

/* ---------- 7. Hero ------------------------------------------------------- */
/* Mobile order is headline -> subhead -> CTA -> photo, which is the DOM order,
   so no reordering trick is needed here. The desktop grid puts the photo to
   the side. */
.hero{padding-block:2.4rem 0;border-bottom:1px solid var(--line)}
.hero__grid{display:grid;gap:2rem}
.hero h1{margin-bottom:.7rem}
.hero__sub{font-size:1.1875rem;line-height:1.55;color:var(--muted);margin-bottom:1.6rem;max-width:54ch}
.hero__media{margin-bottom:2.4rem}

.status{
  display:inline-flex;align-items:center;gap:.6rem;
  font-size:1rem;font-weight:600;color:var(--ink);
  border:1px solid var(--line);background:var(--surface);
  border-radius:var(--radius);padding:.55rem .9rem;min-height:44px;
  margin:0;
}
.status__dot{width:9px;height:9px;flex:none;border-radius:50%;background:var(--muted)}
.status__dot[data-open="true"]{background:var(--ok)}
.status__dot[data-open="false"]{background:var(--err)}

/* ---------- 8. Editorial blocks ------------------------------------------- */
/* The four steps. A numbered list separated by hairlines — no cards, no boxes,
   the numeral carries the weight. */
.editorial{list-style:none;margin:0 0 2rem;padding:0;border-top:1px solid var(--line)}
.editorial > li{
  margin:0;padding:1.6rem 0;border-bottom:1px solid var(--line);
  display:grid;grid-template-columns:auto 1fr;gap:1rem 1.2rem;align-items:start;
}
.editorial__n{
  font-family:var(--display);font-weight:800;font-size:2.25rem;line-height:.9;
  color:var(--primary);letter-spacing:-.03em;
}
.editorial__body h3{margin-bottom:.3rem}
.editorial__body p{color:var(--muted);margin:0}

.teaser{display:grid;gap:1.8rem;align-items:center}
.bignum{margin:0;display:flex;flex-direction:column;gap:.3rem}
.bignum__v{
  font-family:var(--display);font-weight:800;
  font-size:clamp(3.4rem, 15vw, 5.5rem);line-height:.86;
  color:var(--primary);letter-spacing:-.04em;
}
.bignum__l{font-size:1rem;color:var(--muted);font-weight:600}

.people{list-style:none;margin:0 0 1.4rem;padding:0;border-top:1px solid var(--line)}
.people li{margin:0;padding:1.5rem 0;border-bottom:1px solid var(--line)}
.people h3{margin-bottom:.15rem}
.people__role{
  font-size:.9375rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);margin-bottom:.6rem;
}
.people p:last-child{color:var(--muted)}

.split-info{display:grid;gap:2.2rem}
.article > h2{margin-top:2.6rem}
.article > h2:first-of-type{margin-top:2rem}
.article .lede{margin-bottom:1.4rem}

/* ---------- 9. Lists & panels --------------------------------------------- */
.ticks{list-style:none;margin:0 0 1.4rem;padding:0}
.ticks li{position:relative;padding-left:1.8rem;margin:0 0 .7rem;color:var(--muted)}
.ticks li::before{
  content:"";position:absolute;left:0;top:.55em;
  width:11px;height:6px;border-left:2px solid var(--primary);border-bottom:2px solid var(--primary);
  transform:rotate(-45deg);
}
.steps{list-style:none;margin:0 0 1.4rem;padding:0;counter-reset:step}
.steps li{counter-increment:step;position:relative;padding-left:2.8rem;margin:0 0 1.1rem;color:var(--muted)}
.steps li::before{
  content:counter(step);position:absolute;left:0;top:.02em;
  width:30px;height:30px;border-radius:var(--radius);
  background:var(--surface-2);border:1px solid var(--line);
  color:var(--primary);font-weight:600;font-size:.9375rem;
  display:flex;align-items:center;justify-content:center;
}
/* Red flags. Each row names what you would notice, then sends you to a doctor. */
.urgent{list-style:none;margin:0 0 1.4rem;padding:0;border-top:1px solid var(--line)}
.urgent li{
  margin:0;padding:.95rem 0 .95rem 1.1rem;
  border-bottom:1px solid var(--line);border-left:3px solid var(--err);
  color:var(--ink);font-size:1rem;
}

.linklist{list-style:none;margin:0 0 1.2rem;padding:0;border-top:1px solid var(--line)}
.linklist li{margin:0;border-bottom:1px solid var(--line)}
.linklist a{
  display:block;padding:1.05rem .4rem;min-height:44px;
  text-decoration:none;color:var(--ink);
  transition:background-color .15s;
}
.linklist a:hover{background:var(--hover-wash);color:var(--ink)}
.linklist strong{display:block;font-weight:600;margin-bottom:.1rem}
.linklist span{display:block;color:var(--muted);font-size:1rem;line-height:1.5}

.trust{display:grid;gap:1.8rem;list-style:none;margin:0;padding:0}
.trust li{margin:0;display:flex;gap:1rem;align-items:flex-start}
.trust__icon{
  width:44px;height:44px;flex:none;border-radius:var(--radius);
  background:var(--surface-2);color:var(--primary);
  display:flex;align-items:center;justify-content:center;
}
.trust__icon svg{width:22px;height:22px;fill:none;stroke:currentColor;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.trust h3{margin-bottom:.25rem}
.trust p{color:var(--muted);font-size:1rem;margin:0}

.band{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.6rem 1.3rem}
.band h2{margin-bottom:.6rem}
.band > p{color:var(--muted)}
.cta-band{background:var(--primary);color:var(--primary-ink);border-color:var(--primary)}
.cta-band h2,.cta-band .eyebrow{color:var(--primary-ink)}
.cta-band > p{color:var(--primary-ink);opacity:.9}
/* On the primary band the buttons invert: the ink becomes the fill and
   --primary the label, so this stays correct when the cobalt lifts in dark. */
.cta-band .btn--primary{background:var(--primary-ink);color:var(--primary);border-color:var(--primary-ink)}
.cta-band .btn--primary:hover{background:var(--surface-2);color:var(--primary);border-color:var(--surface-2)}
.cta-band .btn--ghost{background:transparent;color:var(--primary-ink);border-color:var(--primary-ink)}
.cta-band .btn--ghost:hover{background:color-mix(in srgb, var(--primary-ink) 16%, transparent);color:var(--primary-ink);border-color:var(--primary-ink)}
.cta-band .btn-row{margin-bottom:0}

/* ---------- 10. Hours, info, map ------------------------------------------ */
.hours{list-style:none;margin:0 0 1.4rem;padding:0;border-top:1px solid var(--line)}
.hours li{
  display:flex;justify-content:space-between;gap:1rem;align-items:baseline;
  padding:.7rem 0;border-bottom:1px solid var(--line);margin:0;font-size:1rem;
}
.hours .d{color:var(--muted)}
/* nowrap is right for a time value like 08:00–21:00, which must never split
   across lines. It would be wrong for a sentence — see .pricelist below. */
.hours .t{font-weight:600;white-space:nowrap;text-align:right}
.hours li[data-today="true"] .d{color:var(--ink);font-weight:600}
.pricelist .t{white-space:normal}

.info{display:grid;gap:1.2rem;list-style:none;margin:1.6rem 0 0;padding:0}
.info__item{display:flex;gap:.9rem;align-items:flex-start;margin:0}
.info__item svg{width:20px;height:20px;flex:none;margin-top:.35rem;fill:none;
  stroke:var(--primary);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
/* A phone number or an address is a tap target, not prose — 44px like any
   other, even though it sits on its own line rather than in a button. */
.info__item a,.footer__about a,.footer__legal a{display:inline-flex;align-items:center;min-height:44px}
.info__item a{color:var(--ink);text-decoration:none;font-weight:600}
.info__item a:hover{color:var(--primary)}
.info__label{
  display:block;font-size:.875rem;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);margin-bottom:.15rem;
}

/* Click-to-load map. Nothing reaches Google before the button is pressed. */
.map{
  position:relative;border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--line);background:var(--surface-2);
  min-height:280px;display:flex;align-items:center;justify-content:center;
}
.map iframe{position:absolute;inset:0;width:100%;height:100%;min-height:280px}
.map__ph{text-align:center;padding:1.8rem 1.3rem;max-width:38ch}
.map__ph p{color:var(--muted);font-size:.9375rem;margin-bottom:1.1rem}

.faq{margin:0 0 1.4rem;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  cursor:pointer;list-style:none;padding:1.1rem .2rem;min-height:44px;
  font-weight:600;display:flex;align-items:center;justify-content:space-between;gap:.9rem;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--primary);font-size:1.5rem;line-height:1;flex:none}
.faq details[open] summary::after{content:"\2212"}
.faq details > div{padding:0 .2rem 1.2rem;color:var(--muted)}
.faq details > div > p:last-child{margin-bottom:0}

/* ---------- 11. Body map --------------------------------------------------- */
.bmap-section{background:var(--surface-2);border-top:1px solid var(--line)}
.bmap__h{margin-bottom:.7rem}
.bmap__lede{margin-bottom:1.6rem}
.bmap__framing{background:var(--surface);margin-block:1.6rem}
.bmap{display:grid;gap:1.8rem;margin-top:1.8rem}
.bmap__figure{display:grid;gap:1.6rem;justify-items:center}

/* The figure sits on its own plate so the hairline silhouette has a surface
   to be drawn on, rather than floating on the section's tinted background. */
.bmap__plate{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.6rem 1rem;width:100%;display:flex;justify-content:center;
}
.bmap__svg{width:100%;max-width:170px;height:auto}
/* One closed path, filled and then outlined again on top so the contour stays
   crisp over the region fills. */
.bmap__silhouette{fill:var(--surface);stroke:none}
/* --muted, not --line: a hairline in --line disappears against the white plate
   the figure is drawn on, which is the whole point of drawing it there. */
.bmap__edge{fill:none;stroke:var(--muted);stroke-width:1.7;pointer-events:none}
/* Region zones read as the divisions of an anatomical chart: each is a lighter
   patch with a hairline boundary, clipped to the body contour. That is the
   affordance — which parts of the figure respond is legible before any hover. */
.bmap__hit{
  fill:var(--surface-2);stroke:var(--muted);stroke-opacity:.35;stroke-width:1.2;
  transition:fill .15s;
}
.bmap__region{cursor:pointer}
.bmap__region:hover .bmap__hit{fill:var(--hover-wash)}
/* Selected: a hatch, not a flat fill, so the selection survives greyscale and
   colour blindness. aria-pressed flips with it, the matching tap row grows a
   marker rule, and the panel names the region in words. */
.bmap__region[aria-pressed="true"] .bmap__hit{fill:url(#bmap-sel)}
.bmap__pat-bg{fill:var(--primary)}
.bmap__pat-fg{fill:var(--primary-ink);opacity:.45}
/* outline on an SVG <g> is not painted by every engine, so the focus ring is
   also expressed as a stroke change that all of them render. */
.bmap__region:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.bmap__region:focus-visible .bmap__hit{stroke:var(--accent);stroke-width:4}

.bmap__rows{list-style:none;margin:0;padding:0;width:100%;border-top:1px solid var(--line)}
.bmap__rows li{margin:0;border-bottom:1px solid var(--line)}
.bmap__row{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  width:100%;min-height:56px;padding:.85rem .3rem;
  background:transparent;border:0;border-left:3px solid transparent;
  font-family:var(--sans);font-size:1.0625rem;font-weight:600;
  color:var(--ink);text-align:left;cursor:pointer;
  transition:background-color .15s, border-color .15s;
}
.bmap__row:hover{background:var(--hover-wash)}
.bmap__row[aria-pressed="true"]{border-left-color:var(--primary);background:var(--hover-wash);padding-left:.9rem}
.bmap__row-meta{font-weight:400;font-size:.9375rem;color:var(--muted);white-space:nowrap}
.bmap__row[aria-pressed="true"] .bmap__row-meta{color:var(--primary);font-weight:600}

.bmap__panel{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:1.4rem 1.2rem;align-self:start;
}
.bmap__eyebrow{
  font-family:var(--display);font-weight:800;font-size:1.5rem;line-height:1.1;
  letter-spacing:-.015em;color:var(--ink);margin:0 0 .35rem;
}
.bmap__note{color:var(--muted);font-size:1rem;margin-bottom:1.1rem}
.bmap__results{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.bmap__results li{margin:0;border-bottom:1px solid var(--line)}
.bmap__results a{
  display:block;padding:.95rem .3rem;min-height:44px;
  color:var(--ink);text-decoration:none;transition:background-color .15s;
}
.bmap__results a:hover{background:var(--hover-wash)}
.bmap__results strong{display:block;font-weight:600}
.bmap__results span{display:block;color:var(--muted);font-size:1rem;line-height:1.5}
.bmap__empty{margin-top:1rem;color:var(--muted);font-size:1rem}
.bmap__reset{margin:1.2rem 0 0}
.bmap__reset .btn[hidden]{display:none}

/* ---------- 12. Form ------------------------------------------------------ */
.form{display:grid;gap:1.2rem}
.field{border:0;margin:0;padding:0;min-width:0;display:grid;gap:.4rem}
.field > label,.field > legend{font-weight:600;font-size:1rem;padding:0}
.req{color:var(--err)}
.field input,.field select,.field textarea{
  width:100%;
  font-family:var(--sans);
  font-size:1.0625rem;              /* >=16px so iOS never zooms on focus */
  line-height:1.5;
  color:var(--ink);background:var(--surface);
  border:1px solid var(--field-line);border-radius:var(--radius);
  padding:.75rem .9rem;min-height:48px;
  transition:border-color .15s, box-shadow .15s;
}
.field textarea{min-height:120px;resize:vertical}
.field select{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B6068' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .85rem center;background-size:18px;
  padding-right:2.6rem;
}
[data-theme="dark"] .field select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239AA0AA' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--primary)}
.field__err{margin:0;color:var(--err);font-size:1rem;font-weight:600}
.field__hint{margin:0;color:var(--muted);font-size:1rem}
.field[data-invalid="true"] input,.field[data-invalid="true"] select,
.field[data-invalid="true"] textarea{border-color:var(--err)}

.check{
  display:grid;grid-template-columns:auto 1fr;gap:.75rem;align-items:start;
  font-weight:400;font-size:1rem;cursor:pointer;min-height:44px;
}
.check input{width:24px;height:24px;min-height:24px;margin:.15rem 0 0;flex:none;accent-color:var(--primary)}
.consent[data-invalid="true"] .check{color:var(--err)}

/* Honeypot. Off-screen rather than display:none, which some bots skip. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* Matches the other inputs, so an audit never flags it as an iOS zoom trap. */
.hp input{font-size:1rem}

.form__status{
  margin:0;padding:.9rem 1.05rem;border-radius:var(--radius);
  background:var(--surface-2);border-left:3px solid var(--err);
  color:var(--ink);font-size:1rem;
}
.form__status[data-show="false"]{display:none}

/* ---------- 11b. Toolkit page --------------------------------------------- */
.jump{margin-top:2.4rem;border-top:1px solid var(--line);padding-top:1.2rem}
.jump__label{
  font-size:.875rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin:0 0 .5rem;
}
.jump ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.jump li{margin:0}
.jump a{
  display:flex;align-items:center;min-height:48px;
  color:var(--ink);text-decoration:none;font-weight:600;
  border-bottom:1px solid var(--line);
}
.jump a:hover{color:var(--primary)}

.tech{scroll-margin-top:calc(var(--header-h) + 16px)}
.tech__rule{margin:0 0 1.8rem;border-top:1px solid var(--line)}
.tech:first-child .tech__rule{display:none}
.tech__grid{display:grid;gap:1.6rem;padding-bottom:2.6rem}
.tech__n{
  font-family:var(--display);font-weight:800;font-size:1.125rem;
  letter-spacing:.06em;color:var(--primary);margin:0 0 .3rem;
}
.tech__body h2{margin-bottom:.7rem}
.tech__body h3{
  font-family:var(--sans);font-weight:600;font-size:.9375rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
  margin:1.6rem 0 .4rem;
}
/* A list, not a run of anchors glued together by a text separator: the
   separator is drawn between items so the first link still sits flush with
   the paragraph edge and every link keeps its own 44px target. */
.tech__links{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;align-items:center;column-gap:.1rem;
}
.tech__links li{margin:0;display:flex;align-items:center}
.tech__links li + li::before{content:"·";color:var(--line);font-weight:700}
.tech__links a{
  display:inline-flex;align-items:center;min-height:44px;
  padding-inline:.5rem;border-radius:var(--radius);
  text-decoration:none;font-weight:600;
}
.tech__links li:first-child a{margin-left:-.5rem}
.tech__links a:hover{background:var(--hover-wash)}

/* ---------- 11c. Team, captions, two-up ----------------------------------- */
.grid-2{display:grid;gap:1.8rem}
.grid-2 > *{min-width:0}
.cap{margin-top:.7rem;font-size:1rem;color:var(--muted)}

.team{display:grid;gap:2.6rem}
.person > .ratio{max-width:280px}
.person__body{margin-top:1.2rem}
.person__body h3{margin-bottom:.15rem}

/* ---------- 12b. Booking -------------------------------------------------- */
.booking{max-width:760px;min-width:0}
.progress{
  list-style:none;margin:0 0 2.4rem;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:.4rem;
  border-top:1px solid var(--line);padding-top:1rem;
}
.progress li{
  margin:0;display:flex;align-items:center;gap:.55rem;min-width:0;
  font-size:.9375rem;color:var(--muted);
}
.progress__n{
  display:flex;align-items:center;justify-content:center;flex:none;
  width:28px;height:28px;border-radius:var(--radius);
  border:1px solid var(--line);background:var(--surface);
  font-weight:600;font-size:.9375rem;
}
.progress__l{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* State is carried by the border weight and a tick as well as by colour. */
.progress li[data-state="now"]{color:var(--ink);font-weight:600}
.progress li[data-state="now"] .progress__n{border-color:var(--primary);border-width:2px;color:var(--primary)}
.progress li[data-state="done"] .progress__n{background:var(--primary);border-color:var(--primary);color:var(--primary-ink)}
.progress li[data-state="done"] .progress__n::after{content:"\2713"}
.progress li[data-state="done"] .progress__n{font-size:0}
.progress li[data-state="done"] .progress__n::after{font-size:.9375rem}

.step{border:0;margin:0 0 2.6rem;padding:0;min-width:0;display:grid;gap:1.1rem}
/* Grid items default to min-width:auto, so a child refuses to shrink below its
   own min-content width. The date strip is 14 buttons wide by that measure, so
   without this the step stretched the page to ~1030px at 360 and the strip's
   own overflow-x:auto never engaged. */
.step > *,.form > *,.booking > *{min-width:0}
.step__legend{
  display:flex;align-items:center;gap:.7rem;padding:0;margin-bottom:.3rem;
  font-family:var(--display);font-weight:800;font-size:1.5rem;letter-spacing:-.015em;
  color:var(--ink);
}
.step__n{
  display:flex;align-items:center;justify-content:center;flex:none;
  width:30px;height:30px;border-radius:var(--radius);
  background:var(--primary);color:var(--primary-ink);
  font-family:var(--sans);font-weight:600;font-size:1rem;
}

.picks{display:grid;gap:.6rem}
.pick{position:relative;display:block}
.pick input{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;cursor:pointer}
.pick__box{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  min-height:56px;padding:.85rem 1rem;
  border:1px solid var(--field-line);border-radius:var(--radius);
  background:var(--surface);
  transition:border-color .15s, background-color .15s;
}
.pick__label{font-weight:600}
.pick__meta{color:var(--muted);font-size:1rem;white-space:nowrap}
/* Checked state is a 2px border plus a leading marker, not colour alone. */
.pick input:checked + .pick__box{border-color:var(--primary);border-width:2px;padding:calc(.85rem - 1px) calc(1rem - 1px)}
.pick input:checked + .pick__box .pick__label::before{
  content:"\2713\00a0";color:var(--primary);font-weight:700;
}
.pick input:focus-visible + .pick__box{outline:3px solid var(--accent);outline-offset:2px}
.pick:hover .pick__box{border-color:var(--primary)}

.radios{display:flex;flex-wrap:wrap;gap:.6rem}
.radio{position:relative;display:inline-flex}
.radio input{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;cursor:pointer}
.radio span{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;padding:.6rem 1.1rem;
  border:1px solid var(--field-line);border-radius:var(--radius);
  background:var(--surface);color:var(--ink);font-weight:600;white-space:nowrap;
  transition:border-color .15s, background-color .15s, color .15s;
}
.radio input:checked + span{background:var(--primary);border-color:var(--primary);color:var(--primary-ink)}
.radio input:focus-visible + span{outline:3px solid var(--accent);outline-offset:2px}

/* The 14-day strip. Horizontal scroll on a phone, wraps into a grid from
   768px, where fourteen days fit without scrolling. */
.datestrip{margin-top:1rem;overflow-x:auto;overscroll-behavior-x:contain;
  scrollbar-width:thin;padding-bottom:.4rem}
.datestrip ul{
  list-style:none;margin:0;padding:0;display:flex;gap:.5rem;min-width:min-content;
}
.datestrip li{margin:0}
.daybtn{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.1rem;
  width:66px;min-height:78px;padding:.55rem .3rem;
  border:1px solid var(--field-line);border-radius:var(--radius);
  background:var(--surface);color:var(--ink);cursor:pointer;
  font-family:var(--sans);white-space:nowrap;
  transition:border-color .15s, background-color .15s;
}
.daybtn:hover:not([disabled]){border-color:var(--primary);background:var(--hover-wash)}
.daybtn__d{font-size:.875rem;color:var(--muted)}
.daybtn__n{font-family:var(--display);font-weight:800;font-size:1.375rem;line-height:1.1}
.daybtn__m{font-size:.875rem;color:var(--muted)}
.daybtn__x{font-size:.875rem;color:var(--muted)}
.daybtn[disabled]{cursor:not-allowed;opacity:.5;background:var(--surface-2)}
.daybtn[aria-pressed="true"]{
  border-color:var(--primary);border-width:2px;
  background:var(--primary);color:var(--primary-ink);
}
.daybtn[aria-pressed="true"] .daybtn__d,
.daybtn[aria-pressed="true"] .daybtn__m{color:var(--primary-ink);opacity:.85}

.slots{margin-top:1.4rem}
.slots__head{font-weight:600;margin-bottom:.8rem}
.slots__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:.5rem}
.slot{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-height:52px;padding:.5rem .4rem;
  border:1px solid var(--field-line);border-radius:var(--radius);
  background:var(--surface);color:var(--ink);cursor:pointer;
  font-family:var(--sans);font-size:1rem;font-weight:600;white-space:nowrap;
  transition:border-color .15s, background-color .15s;
}
.slot:hover:not([disabled]){border-color:var(--primary);background:var(--hover-wash)}
.slot[aria-pressed="true"]{
  border-color:var(--primary);border-width:2px;
  background:var(--primary);color:var(--primary-ink);
}
/* A taken slot says «κλεισμένο» and is struck through, so it does not depend
   on being greyer than the rest. */
.slot[disabled]{cursor:not-allowed;background:var(--surface-2);color:var(--muted)}
.slot[disabled] .slot__t{text-decoration:line-through}
.slot__x{font-size:.875rem;font-weight:400;color:var(--muted)}

.chosen{
  margin-top:1.2rem;padding:.85rem 1rem;
  background:var(--surface-2);border-left:3px solid var(--primary);
  border-radius:var(--radius);font-weight:600;
}

.confirm{
  border:1px solid var(--line);border-radius:var(--radius);
  background:var(--surface);padding:1.8rem 1.4rem;
}
.confirm:focus{outline:3px solid var(--accent);outline-offset:2px}
.confirm__list{
  margin:0 0 1.4rem;padding:0;border-top:1px solid var(--line);
  display:grid;grid-template-columns:1fr;
}
.confirm__list dt{
  padding-top:.9rem;font-size:.875rem;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
}
.confirm__list dd{
  margin:0;padding:.1rem 0 .9rem;border-bottom:1px solid var(--line);
  font-weight:600;
}

/* ---------- 13. Footer ---------------------------------------------------- */
.footer{background:var(--bg);border-top:1px solid var(--line);padding-block:3rem 1.6rem}
/* h3, not h4: the footer headings follow the page's h2s, and an h2 -> h4 jump
   skips a level for anyone navigating by heading. They keep the small-caps
   label look, so the display face is reset here. */
.footer h3{
  font-family:var(--sans);font-size:.875rem;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;line-height:1.4;
  color:var(--muted);margin:0 0 .7rem;
}
.footer__grid{display:grid;gap:2.2rem}
.footer ul{list-style:none;margin:0;padding:0}
.footer li{margin:0}
.footer li a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink);text-decoration:none;font-size:1rem}
.footer li a:hover{color:var(--primary)}
.footer__about p{color:var(--muted);font-size:1rem;max-width:44ch}
.footer__name{font-family:var(--display);font-weight:800;font-size:1.5rem;color:var(--ink);margin-bottom:.4rem;letter-spacing:-.02em}
.social{display:flex;flex-wrap:wrap;gap:.15rem;margin-top:1.2rem}
.social li{margin:0}
/* Has to outrank .footer li a, which sets colour and size on every other
   footer link. */
.footer .social a{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;min-height:44px;border-radius:var(--radius);
  color:var(--muted);transition:background-color .15s, color .15s;
}
.footer .social a:hover{background:var(--hover-wash);color:var(--primary)}
.social svg{width:20px;height:20px;fill:currentColor}
.footer__bottom{
  border-top:1px solid var(--line);margin-top:2.4rem;padding-top:1.2rem;
  display:flex;flex-direction:column;gap:.4rem;
  font-size:.9375rem;color:var(--muted);
}
.footer__bottom a{color:var(--muted);text-decoration:none}
.footer__bottom a:hover{color:var(--primary)}
.footer__legal{display:flex;flex-wrap:wrap;gap:.2rem 1.4rem}
.footer__pad{height:64px}

/* ---------- 14. Fixed chrome ---------------------------------------------- */
/* Back-to-top bottom-LEFT — the bottom-right corner belongs to the Viber float. */
.totop{
  position:fixed;left:var(--gutter);z-index:88;
  bottom:calc(var(--gutter) + env(safe-area-inset-bottom));
  width:46px;height:46px;border-radius:var(--radius);
  background:var(--surface);color:var(--ink);
  border:1px solid var(--line);box-shadow:var(--shadow);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity .2s, visibility .2s, transform .2s;
}
.totop[data-show="true"]{opacity:1;visibility:visible;transform:none}
.totop:hover{background:var(--hover-wash)}
.totop svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}

/* Square, not a circle: this site has no pills and no round buttons anywhere. */
.viber{
  position:fixed;right:var(--gutter);z-index:88;
  bottom:calc(var(--gutter) + env(safe-area-inset-bottom));
  width:52px;height:52px;border-radius:var(--radius);
  background:var(--primary);color:var(--primary-ink);box-shadow:var(--shadow);
  display:flex;align-items:center;justify-content:center;text-decoration:none;
  transition:background-color .15s;
}
.viber:hover{background:var(--primary-2);color:var(--primary-ink)}
.viber svg{width:26px;height:26px;fill:currentColor}

/* Bottom-centre, in the lane between the back-to-top button on the left and
   the Viber float on the right. Anywhere near the top overlaps the h1 at
   360px, which is the one place it must never sit. */
.ribbon{
  position:fixed;z-index:100;
  left:50%;transform:translateX(-50%);
  bottom:calc(var(--gutter) + 4px + env(safe-area-inset-bottom));
  background:var(--ink);color:var(--bg);
  font-family:var(--sans);font-weight:600;font-size:.875rem;letter-spacing:.03em;
  padding:.35rem .75rem;border-radius:var(--radius);
  pointer-events:none;opacity:.94;white-space:nowrap;
}

/* ---------- 14b. Bands ------------------------------------------------------ */
/* A full-width alternating band: deep navy in light, nothing at all in dark
   (--band is transparent there and --band-edge puts the hairline back).

   This block sits AFTER every component on purpose. Specificity ties are
   settled by source order, and .section--alt .people p ties exactly with
   .people p:last-child — from up here the component won and the muted copy
   stayed dark-on-navy. Anything band-related belongs below the components it
   has to override.

   The rules below are written as explicit selectors rather than by
   re-pointing --ink/--muted inside .section--alt. Re-pointing the tokens
   would also repaint anything nested that carries its OWN light background —
   the .map placeholder, a .notice, an input — leaving pale text on a pale
   surface. Naming what sits directly on the navy leaves nested surfaces
   alone. */
.section--alt{background:var(--band);color:var(--band-ink)}
.section + .section--alt,.section--alt + .section{border-top-color:var(--band-edge)}

.section--alt > .wrap > h2,
.section--alt > .wrap > h3,
.section--alt .people h3,
.section--alt .trust h3,
.section--alt > .wrap > .article h3,
.section--alt > .wrap > .band h2{color:var(--band-ink)}

.section--alt > .wrap > .eyebrow,
.section--alt > .wrap > p,
.section--alt .people p,
.section--alt .people__role,
.section--alt .trust p,
.section--alt > .wrap > .article p,
.section--alt > .wrap > .article li,
.section--alt > .wrap > .band > p,
.section--alt > .wrap > .band .eyebrow,
.section--alt .cap{color:var(--band-muted)}

.section--alt .people,
.section--alt .people li,
.section--alt .hours,
.section--alt .hours li{border-color:var(--band-line)}
.section--alt > .wrap > .article .ticks li::before{border-color:var(--band-ink)}
.section--alt .trust__icon{background:var(--band-line);color:var(--band-ink)}

/* The boxed .band component goes transparent on a navy section — a pale card
   floating on the navy reads as a mistake, and the section is already the
   panel. */
.section--alt > .wrap > .band{background:transparent;border-color:var(--band-line)}

.section--alt > .wrap > p > .link-more,
.section--alt > .wrap > .article .link-more,
.section--alt > .wrap > .band .link-more{color:var(--band-ink)}

/* Only a ghost button sitting DIRECTLY on the navy inverts. The one inside
   the click-to-load map is on the map's own light box, still inside a band —
   inverting that one put near-white text on pale grey (1.13:1). */
.section--alt > .wrap > .btn-row > .btn--ghost,
.section--alt > .wrap > .band .btn--ghost{color:var(--band-ink);border-color:var(--band-field-line)}
.section--alt > .wrap > .btn-row > .btn--ghost:hover,
.section--alt > .wrap > .band .btn--ghost:hover{background:var(--band-hover-wash);border-color:var(--band-ink)}

/* ---------- 15. Reveal ----------------------------------------------------- */
/* The hidden state is gated on a class main.js adds immediately before it
   starts observing. If the script never runs the content is simply visible,
   which is the only acceptable failure mode for a page whose body text is
   inside .reveal. */
.js-reveal .reveal{opacity:0;transition:opacity .4s ease}
.js-reveal .reveal[data-seen="true"]{opacity:1}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important;
  }
  .reveal{opacity:1}
}

/* ---------- 15b. >=480px ---------------------------------------------------- */
/* The header CTA appears as soon as there is room for it. At 360px the logo
   plus the phone, the theme toggle and the hamburger already fill the bar, so
   below this width the booking CTA lives in the drawer and in the hero instead
   of squeezing a fourth control into 360px. */
@media (min-width:480px){
  .header__cta{display:inline-flex;min-height:44px;padding:.6rem 1rem;margin-left:.3rem}
}

/* ---------- 16. >=768px ---------------------------------------------------- */
@media (min-width:768px){
  :root{--gutter:32px}
  .logo__at{display:inline}
  .btn-row{flex-direction:row;flex-wrap:wrap}
  .btn-row .btn{width:auto}
  .trust{grid-template-columns:repeat(3,1fr);gap:2rem}
  .trust li{flex-direction:column;gap:.9rem}
  .band{padding:2.4rem 2.2rem}
  .editorial > li{grid-template-columns:5.5rem 1fr;gap:1rem 1.6rem;padding:2rem 0}
  .editorial__n{font-size:3rem}
  .teaser{grid-template-columns:1fr auto;gap:3rem}
  .people{display:grid;grid-template-columns:repeat(2,1fr);gap:0 2.4rem;border-top:0}
  .people li{border-top:1px solid var(--line)}
  .split-info{grid-template-columns:1fr 1fr;gap:3rem;align-items:start}
  .footer__grid{grid-template-columns:1.6fr 1fr 1fr}
  .footer__bottom{flex-direction:row;justify-content:space-between;align-items:center}
  .footer__pad{display:none}
  .info{grid-template-columns:repeat(2,1fr)}
  .map,.map iframe{min-height:340px}
  .hero{padding-block:3.4rem 0}
  .bmap__svg{max-width:220px}
  .grid-2{grid-template-columns:repeat(2,1fr);gap:2.2rem}
  .team{grid-template-columns:repeat(2,1fr);gap:2.4rem}
  .person > .ratio{max-width:none}
  .tech__grid{grid-template-columns:1.25fr 1fr;gap:2.4rem;align-items:start}
  .jump ul{flex-direction:row;flex-wrap:wrap;gap:0 1.6rem}
  .jump a{border-bottom:0}
  .jump a::after{content:"";}
  /* Fourteen day buttons fit in two rows here, so the strip stops scrolling. */
  .datestrip{overflow:visible}
  .datestrip ul{flex-wrap:wrap;min-width:0}
  .progress{gap:1rem}
}

/* ---------- 17. >=1024px --------------------------------------------------- */
@media (min-width:1024px){
  .hero__grid{grid-template-columns:1.05fr .95fr;gap:3.5rem;align-items:center}
  .hero__media{margin-bottom:0}
  .hero{padding-block:4.5rem 4.5rem}
  /* Figure and panel side by side. The tap rows are the mobile route to the
     same panel; at this width the figure itself is large enough to aim at, and
     every region stays keyboard reachable through the SVG. */
  .bmap{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:3rem;align-items:start}
  .bmap__rows{display:none}
  .bmap__svg{max-width:250px}
  .bmap__panel{padding:1.8rem 1.7rem}
  .article{max-width:74ch}
}

/* ---------- 18. >=1180px --------------------------------------------------- */
@media (min-width:1180px){
  :root{--header-h:76px;--maxw:1220px}
  .hamburger,.sheet{display:none}

  .nav{display:flex;align-items:center;gap:.1rem;list-style:none;margin:0;padding:0}
  .nav > li{margin:0;position:relative}
  .nav__link{
    display:inline-flex;align-items:center;gap:.4rem;
    padding:.5rem .8rem;min-height:44px;border-radius:var(--radius);
    font-family:var(--sans);font-weight:600;font-size:.9375rem;
    color:var(--muted);text-decoration:none;
    transition:background-color .15s, color .15s;
  }
  /* Hover is a soft pill on the semi-transparent wash, never an underline, so
     it reads the same in both themes. */
  .nav__link:hover,.nav > li[data-open="true"] > .nav__link{background:var(--hover-wash);color:var(--ink)}
  /* Current page: a 6px accent dot before the label. Never an underline. */
  .nav__link[aria-current="page"],.nav__link[data-section="true"]{color:var(--ink)}
  .nav__link[aria-current="page"]::before,.nav__link[data-section="true"]::before{
    content:"";width:6px;height:6px;flex:none;border-radius:50%;background:var(--accent);
  }
  .nav__chev{width:12px;height:12px;flex:none;fill:none;stroke:currentColor;
    stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .18s}
  .nav > li[data-open="true"] .nav__chev{transform:rotate(180deg)}

  .dropdown{
    position:absolute;top:100%;left:0;z-index:95;width:340px;
    background:var(--surface-2);border:1px solid var(--line);
    border-radius:var(--radius);box-shadow:var(--shadow);
    padding:.4rem 0;margin-top:10px;list-style:none;
    opacity:0;visibility:hidden;transform:translateY(-4px);
    /* Same reason as the drawer: the panel opens on focusin, so its links have
       to be focusable the instant it opens, not .16s later. */
    transition:opacity .16s, transform .16s, visibility 0s linear .16s;
  }
  /* Invisible bridge across the 10px gap between trigger and panel. Without it
     the panel closes the instant the pointer leaves the trigger. The 200ms
     cancellable close delay in main.js is the other half of the same fix. */
  .dropdown::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
  .nav > li[data-open="true"] .dropdown{
    opacity:1;visibility:visible;transform:translateY(0);
    transition:opacity .16s, transform .16s, visibility 0s;
  }
  .dropdown li{margin:0}
  .dropdown a{
    display:flex;align-items:center;min-height:44px;padding:.5rem 1.1rem;
    text-decoration:none;color:var(--ink);font-size:1rem;line-height:1.45;
    transition:background-color .15s, color .15s;
  }
  .dropdown a:hover,.dropdown a:focus-visible{background:var(--hover-wash);color:var(--primary)}
  .dropdown a[aria-current="page"]{color:var(--primary);font-weight:600}
  .dropdown__all{border-top:1px solid var(--line);margin-top:.3rem;padding-top:.3rem}
  .dropdown__all a{font-size:.875rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--primary)}

  .header__cta{display:inline-flex;min-height:44px;padding:.6rem 1.15rem;margin-left:.4rem}
  .header__actions{gap:.35rem}
  .bmap__svg{max-width:270px}
}

/* ---------- 19. >=1360px --------------------------------------------------- */
@media (min-width:1360px){
  /* The container widens here purely so the full phone number can join the
     header: logo + six nav items + toggle + CTA + number needs ~1250px of
     content, which a 1220px wrap can never provide at any viewport. */
  :root{--gutter:40px;--maxw:1320px}
  .nav__link{padding:.5rem .95rem}
  .header__tel{width:auto;padding:0 .75rem;color:var(--ink);font-weight:600;font-size:.9375rem}
  .header__tel span{display:inline}
  .header__tel svg{width:16px;height:16px;stroke:var(--primary);stroke-width:1.9}
}

/* ---------- 20. Print ------------------------------------------------------ */
@media print{
  .header,.footer,.totop,.viber,.ribbon,.sheet,.map,.skip-link,.bmap__rows,
  .datestrip,.slots,.progress{display:none!important}
  body{background:#fff;color:#000;font-size:11pt}
  .reveal{opacity:1}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt}
}