/* ============================================================
   Reliva Medical Institute — Pain Management

   Layout: the brand container (1800px) with the brand gutter.
   Content runs the full width of that container — no narrow
   editorial inset. One left line governs every band.

   Type: Hanken Grotesk throughout, figures and wordmark
   included. The wordmark used to be set in Cormorant, which
   left one serif on a page that had none anywhere else.
   ============================================================ */

:root{
  /* Two adjacent bands each contribute this, so the number to think about is
     double it: 112px between sections on a phone, 200px at 1440. The air the
     page was missing belonged inside the sections — after the heading, between
     the tiles, inside the panels — and that is where it went. */
  --band-y: clamp(3.5rem, 2.2rem + 4.5vw, 7rem);
  --ease: cubic-bezier(.16,1,.3,1);
  /* Gold is kept defined but no longer drawn anywhere on the page. Gradient
     rules, metallic diamonds and a gilt bar across the footer are decoration,
     and decoration is the first thing this layout had too much of. Restore by
     reintroducing the rules, not by hunting for the values. */
  --gold-hi:#EBD9A8; --gold-1:#C9A961; --gold-2:#9C7A3B;
}

*,*::before,*::after{ box-sizing:border-box; }
img{ display:block; max-width:100%; }
figure{ margin:0; }
html{ scroll-behavior:smooth; }
:where(section[id]){ scroll-margin-top:72px; }
::selection{ background:var(--garnet-tint); color:var(--garnet); }
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--garnet-link); outline-offset:3px; border-radius:var(--r-xs);
}

/* All figures tabular and lining, in the body face. */
.amt,.num{ font-variant-numeric:lining-nums tabular-nums; }

/* ---------------- Bands ---------------- */
.band{ padding-block:var(--band-y); }
.wrap{ max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); }
/* Centred, on its own rail, with no rule above it. The hairline plus a
   heading-left/lead-right split repeated five times down the page was the
   template the eye kept recognising; a section now announces itself with space
   and type alone. */
.head{ max-width:var(--rail); margin-inline:auto; text-align:center;
  display:grid; gap:1rem; margin-bottom:clamp(2.75rem,1.8rem + 3.2vw,5rem); }
.head .k{ margin:0; font-size:var(--step--1); font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.head h2{ margin:0; max-width:19ch; margin-inline:auto; }
.head .lead{ margin:0; max-width:54ch; margin-inline:auto; }

h2{ font-size:var(--step-3); }
.lead{ font-size:var(--step-1); color:var(--text-soft); line-height:1.5; }

/* ---------------- Buttons ---------------- */
/* Pill, and smaller than it was. A 54px-tall rectangle reads as a slab; the
   same label in a pill at 48px reads as a control. Hover darkens the fill and
   nothing moves — the lift plus coloured shadow was the loudest interaction on
   a page that is meant to be calm. */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.7em;
  font-family:var(--font-sans); font-weight:500; font-size:var(--step--1); line-height:1;
  letter-spacing:-.005em;
  padding:.95em 1.6em; border-radius:var(--r-pill); border:1px solid transparent;
  cursor:pointer; text-decoration:none; min-height:48px; text-align:center; white-space:nowrap;
  transition:background-color .2s ease,color .2s ease,border-color .2s ease,opacity .2s ease;
}
.btn-primary{ background:var(--garnet); color:var(--surface); }
.btn-primary:hover{ background:var(--garnet-hover); color:var(--surface); }
.btn-ghost{ background:transparent; border-color:var(--border-strong); color:var(--ink); }
.btn-ghost:hover{ background:var(--surface); border-color:var(--ink); }
/* The hero button carries the whole frame on its own — nothing else on that
   photograph is clickable — so it is set a step up from the buttons that sit
   inside bands next to other controls. */
.btn-hero{ font-size:var(--step-0); padding:1.05em 1.9em; min-height:60px; }
/* Darker fill rather than a faded one: dropping opacity on garnet mixes it
   with whatever is behind and the button goes muddy for the length of the press. */
.btn-primary:active{ background:var(--garnet-deep); }
.btn-ghost:active{ background:var(--mist); }
.btn-block{ width:100%; }
.actions{ display:flex; flex-wrap:wrap; gap:.75rem; }

/* ---------------- Header ---------------- */
.nav{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--paper) 90%, transparent);
  -webkit-backdrop-filter:saturate(1.15) blur(14px); backdrop-filter:saturate(1.15) blur(14px);
  border-bottom:1px solid var(--line);
}
.nav-inner{ max-width:var(--container); margin-inline:auto; padding:.5rem var(--gutter);
  display:flex; align-items:center; gap:1rem; min-height:60px; }
.brand{ display:flex; align-items:center; gap:.7rem; text-decoration:none; color:var(--ink); margin-right:auto; }
/* The mark is taller than it is wide, so it is sized by height and left to
   find its own width — fixing both dimensions squashed it. */
.brand img{ height:40px; width:auto; }
/* min-width:0 or the lockup overflows its own shrunken flex parent and lands under the CTA. */
.brand-text{ display:flex; flex-direction:column; gap:.22rem; min-width:0; }
/* Set in the page's own face, sentence case, tracked in — the same register the
   headings run in. As a tracked Cormorant capital it was the only serif on the
   site and read as a leftover from another identity. Sentence case also retires
   the three optical nudges the old caps needed around the I. */
.brand-name{ font-family:var(--font-sans); font-weight:500; font-size:1.45rem;
  line-height:1; letter-spacing:.05em; text-transform:uppercase;
  /* Tracking lands after the last letter too; pulled back so the lockup stays
     flush left with the sub-label under it. */
  margin-right:-.05em; }
/* Lockup sub-label: part of the mark, deliberately under body size. */
/* 15px floor applies here too — no text on this site drops below it, wordmark included. */
.brand-sub{ font-weight:500; font-size:15px; line-height:1; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); white-space:nowrap; }
.brand-sub .bs-full{ display:none; }
.nav .btn{ min-height:44px; padding:.85em 1.35em; }
/* Below ~440px the wordmark sub-label and the CTA compete for the bar.
   The label stays at 15px, so the room comes from the mark, the wordmark
   and the button padding instead of shrinking the type. */
@media (max-width:440px){
  .brand-sub{ letter-spacing:.04em; }
  .nav-inner{ gap:.5rem; padding-inline:1rem; }
  .nav .btn{ padding:.85em .9rem; }
  /* The wordmark keeps its natural width; the CTA gives up its tail instead
     of squeezing "PAIN MANAGEMENT" under the button. */
  .brand{ gap:.5rem; flex:none; }
  .brand img{ height:44px; }
  .brand-name{ font-size:1.2rem; letter-spacing:.04em; margin-right:-.04em; }
  .nav .btn .btn-rest{ display:none; }
}
/* At 15px the full lockup and the full CTA label cannot share a 320px row: the two
   need ~137px more than there is. The label drops to "Book" below 375px; the lockup
   stays whole. (The header already overflowed here at the old 12px, by 20px.) */
/* The label is split so the tail can drop on tiny screens. Flex gap would
   add a second space on top of the nbsp, so it is zeroed on this button. */
.nav .btn{ gap:0; }
@media (max-width:374px){ .nav .btn{ padding:.85em .8rem; } }
/* The mark can grow early; the full sub-label cannot. From 520 to 640 the bar
   is exactly full — the measured gap between lockup and button is 16px flat,
   which is the flex gap itself, meaning zero slack — so "Medical Institute · "
   spilled the row by up to 49px. It now waits until 660, where there is real
   room (53px) rather than none. */
@media (min-width:520px){ .brand img{ height:46px; } }
/* Was 660. The city joined the sub-label, so "Medical Institute · " has to
   wait longer: at 660 the full string overran the bar by 14px. */
@media (min-width:720px){ .brand-sub .bs-full{ display:inline; } }
/* On a 320px handset "PAIN MANAGEMENT · BUDAPEST" is 43px wider than the
   row. The city drops to its own line there instead of the type shrinking —
   nothing on this site goes under 15px, the wordmark included. */
@media (max-width:374px){
  .bs-city{ display:block; }
  .bs-dot{ display:none; }
}
@media (min-width:860px){ .brand-name{ font-size:1.6rem; } }

/* ---------------- Hero: full bleed ---------------- */
/* Nothing sits on top of the photograph and nothing is hidden behind a panel.
   The whole frame carries one even veil of ink and the type goes white on it.
   A flat veil rather than a gradient on purpose: a gradient has to go heavy
   somewhere to carry body text, and wherever it goes heavy it wipes out that
   part of the picture. An even 52% costs the same everywhere, keeps the room,
   the doctor and the framed plate all readable, and puts every line of text
   above 6:1. 68% is not a taste call: measured against this frame, 52% left the
   lead at 2.9:1 where it crossed the window and the papers on the desk. */
.hero{ position:relative; isolation:isolate; overflow:hidden; background:var(--graphite);
  min-height:min(92svh,880px); display:grid; align-content:center; }
/* The <picture> is positioned itself rather than dissolved with display:contents:
   under contents its <source> children became grid items of the hero and split
   the section into four rows. */
.hero-pic{ position:absolute; inset:0; z-index:0; display:block; }
.hero-bg{ width:100%; height:100%; object-fit:cover; object-position:50% 50%; }
.hero-scrim{ position:absolute; inset:0; z-index:1; pointer-events:none;
  background-color:color-mix(in srgb, var(--ink) 68%, transparent);
  background-image:linear-gradient(180deg, transparent 0%, transparent 62%,
    color-mix(in srgb, var(--ink) 14%, transparent) 100%); }
.hero-in{ position:relative; z-index:2; width:100%; max-width:var(--container); margin-inline:auto;
  text-align:center; color:var(--surface);
  padding:clamp(2.5rem,1.5rem + 4vw,5rem) var(--gutter); }
/* Sentence case, semibold, tracked in. Set on the photograph it needs weight
   more than the rest of the page does, which is why this one keeps 600 while
   the scrim underneath is left at the measured 68%. */
.hero h1{ margin:0 auto .45em; max-width:20ch;
  font-weight:600; letter-spacing:-.03em; line-height:1.04;
  color:var(--surface); text-shadow:0 2px 28px rgba(21,24,29,.4); }
.hero-lead{ font-size:var(--step-1); line-height:1.5; max-width:46ch; margin:0 auto 2.5rem; letter-spacing:-.01em;
  /* Solid white, not white thinned towards ink. Measured against the brightest
     patch of this photograph under the scrim (#5D6063), every grey soft enough
     to read as "secondary" lands under 4.5:1 — #D5DADE gets 4.49. Thinning the
     colour was buying softness by letting the photograph through the letters,
     which is what made it look dirty. Hierarchy here comes from size and
     weight instead: 40px semibold over 18px regular. */
  color:var(--surface);
  text-shadow:0 1px 16px rgba(21,24,29,.4); }
.hero-lead p{ margin:0; max-width:none; }
.hero .actions{ justify-content:center; }
/* ---- Phone and small tablet: type set into the picture's empty half ----
   The desktop frame lays type over a wide photograph under an even ink scrim.
   A phone cannot use that: the same picture has to become a portrait, and
   whatever the crop leaves is what the text lands on — last time, the doctor's
   face. So the picture is not cropped here at all. It runs the full width at
   its own proportions, and it is shot 9:16 with the two figures held in the
   top 45% and the bottom half left deliberately empty. The type goes into that
   empty half, over a paper gradient that fades out well before it reaches
   anybody — the photograph stays a photograph down to the 62% line.
   In the DOM the h1 sits last, because on desktop it is the bottom line of the
   frame; order restores the reading sequence here. */
@media (max-width:899px){
  /* The type block is close to a fixed 350px — the lead does not shrink and the
     button has a tap target to keep — while the picture's height falls with the
     screen width. On a narrow phone the block therefore reaches higher up the
     frame than the empty half starts, and the headline lands on the patient's
     shoulder. min-height buys the difference back as plain paper below the
     picture. The two coefficients are solved off the ends of the phone range
     rather than picked: they put the headline below the midpoint of the frame
     at 320px, where the block is worst off against the picture, and leave 390px
     where it already worked. Above ~415px the picture is taller than this and
     no paper shows at all. */
  .hero{ display:block; position:relative; overflow:hidden;
    min-height:calc(60vw + 480px); background:var(--paper); }
  /* The picture is the only thing in the flow, so its height is the section's
     height. height:auto rather than a declared aspect-ratio so the file's own
     proportions are the single source of truth. */
  /* On a short handset the picture's own 9:16 is taller than the screen and the
     button ends up below the fold, so the height is capped to what is left
     under the header. 179.1vw is that 9:16 expressed against the full width —
     while it wins the min(), the picture is at its own proportions and nothing
     is cropped at all. When the cap wins, the crop is taken off the TOP, not
     the bottom: the type is anchored to the foot of the section, so the empty
     floor it sits on has to be the part that survives. Cropping the other way
     drags the headline up onto the figures. */
  .hero-pic{ position:static; display:block; width:100%;
    height:min(179.1vw, calc(100svh - 3.75rem)); }
  .hero-bg{ width:100%; height:100%; object-fit:cover; object-position:50% 100%; }
  /* Paper, not ink, and stopped at 62%: solid at the foot where the button
     sits, gone by the time it reaches the desk. The stops are not evenly
     spaced on purpose — the fade has to be finished before the eye reaches the
     figures, or the picture reads as washed out rather than lit. */
  .hero-scrim{ display:block; background-color:transparent;
    background-image:linear-gradient(to top,
      color-mix(in srgb, var(--paper) 97%, transparent) 0%,
      color-mix(in srgb, var(--paper) 94%, transparent) 26%,
      color-mix(in srgb, var(--paper) 82%, transparent) 45%,
      color-mix(in srgb, var(--paper) 44%, transparent) 56%,
      color-mix(in srgb, var(--paper) 0%, transparent) 63%); }
  .hero-in{ position:absolute; left:0; right:0; bottom:0; z-index:2;
    max-width:none; container-type:inline-size;
    display:flex; flex-direction:column; align-items:flex-start;
    text-align:left; color:var(--ink); background:none;
    padding:0 var(--gutter) clamp(1.25rem,.9rem + 1.6vw,2.25rem);
    gap:clamp(.75rem,.5rem + 1vw,1.375rem); }
  /* Same device as the desktop line, folded onto two rows: the measurement is
     taken off "MANAGEMENT", the longer word, so it is the one that lands flush
     with both margins and "PAIN" sits above it at the same size. 15.15 is
     100 / 6.561 — "MANAGEMENT" inks 656.1px at 100px — less a 2px shoulder.
     The break is not forced: at this size the two words cannot share a line. */
  .hero-in h1{ order:-1; margin:0; max-width:none; color:var(--ink);
    font-size:15.15cqw; font-weight:400; text-transform:uppercase;
    letter-spacing:-.02em; line-height:.88; text-shadow:none; }
  .hero-lead{ font-size:var(--step-0); line-height:1.5; margin:0; max-width:none;
    color:var(--ink); text-shadow:none; }
  /* The button gets its own air rather than the shared gap: it is the one
     thing in the band that is not reading matter, and running it tight
     under the last line made it read as a fourth paragraph. */
  .hero .actions{ width:100%; margin-top:clamp(1.5rem,1.2rem + 2.2vw,3rem); }
  .hero .actions .btn{ width:100%; }
}

/* A tablet is wide enough that the picture's own proportions would fill the
   whole screen on its own. Above 600px it gets a height instead, and the crop
   is taken off the bottom — the figures sit in the top half of the frame, so
   they survive it, and enough empty floor is left for the type. */
@media (min-width:600px) and (max-width:899px){
  .hero-pic{ height:72svh; }
  .hero-bg{ height:100%; object-fit:cover; object-position:50% 12%; }
}

/* ---- Desktop hero: lead and booking on one line, the name across the floor ----
   The frame is read bottom-up: the headline is the largest thing on the page and
   the last thing in the DOM, so the photograph stays visible through the middle
   and the type occupies only the edges it needs.
   The headline is sized in cqw against .hero-in, not vw: .hero-in is capped at
   --container and carries the gutter, so vw would keep growing after the box had
   stopped and the line would run off the sides past 1800px. cqw is measured off
   this box's content width, which is exactly the width the line has to fill.
   11.4 is measured, not chosen. "PAIN MANAGEMENT" set at 100px in Hanken Grotesk
   400 at -0.02em inks 875.3px, so 100/8.753 = 11.425cqw fills the box exactly;
   11.4 is that figure with a 3px shoulder left for subpixel rounding. Change the
   string, the weight or the tracking and this number has to be re-measured. */
@media (min-width:900px){
  .hero{ align-content:stretch; }
  .hero-in{ container-type:inline-size;
    display:flex; flex-direction:column; justify-content:flex-end;
    gap:clamp(2rem,.8rem + 2.2vw,3.75rem);
    text-align:left;
    padding-block:clamp(4rem,2rem + 5vw,7rem) clamp(2.25rem,1.2rem + 2vw,4rem); }

  .hero-top{ display:flex; align-items:center; justify-content:space-between;
    gap:clamp(2rem,1rem + 3vw,5rem); }

  .hero-lead{ font-size:var(--step-1); line-height:1.45; margin:0;
    max-width:34ch; flex:0 1 auto; }

  .hero .actions{ justify-content:flex-end; flex:0 0 auto; }

  /* nowrap is load-bearing: the whole device is one unbroken line, and a wrap
     would drop a second line of 150px type into the photograph. */
  .hero h1{ margin:0; max-width:none;
    font-size:11.4cqw; font-weight:400; text-transform:uppercase;
    letter-spacing:-.02em; line-height:.84; white-space:nowrap;
    text-shadow:0 2px 44px rgba(21,24,29,.45); }
}

@media (prefers-reduced-motion:no-preference){
  .hero-in > *{ opacity:0; transform:translateY(16px); animation:rise .85s var(--ease) forwards; }
  .hero-in > *:nth-child(1){ animation-delay:.06s; }
  .hero-in > *:nth-child(2){ animation-delay:.16s; }
  .hero-in > *:nth-child(3){ animation-delay:.26s; }
  @keyframes rise{ to{ opacity:1; transform:none; } }
}

/* Facts bar closing the hero */

/* ---------------- How we treat: one rail at every width ----------------
   A rail, not a grid, on every screen. Four across made the photograph too
   small to read; two across made the section a wall. Scrolling keeps the card
   at a size where the picture works and costs the page only one row of height.

   No subgrid anywhere in here. It lined the facts up in Chrome and collapsed
   the picture row to a few pixels in Safari, which is what shipped. Alignment
   between cards is not worth a layout that only holds in one engine. */
.methods{ list-style:none; margin:0;
  display:flex; gap:clamp(1rem,.6rem + 1.6vw,2rem);
  overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory; scroll-padding-inline:var(--gutter);
  margin-inline:calc(var(--gutter) * -1); padding-inline:var(--gutter);
  padding-block-end:.5rem;
  scrollbar-width:none; -ms-overflow-style:none; }
.methods::-webkit-scrollbar{ display:none; }

/* The card is held short of the full width so the next one peeks in — a
   cut-off card is the only honest signal that the row scrolls, and it costs no
   chrome. Three fit on a desktop, two on a tablet, one on a phone. */
/* A plate, not loose contents. Without one the three cards on screen line their
   rows up with each other and the eye reads across the rail instead of down a
   card — four descriptions become one paragraph in stripes. The plate closes
   each card off, and it is the only thing in the section that is pure white,
   so the cards sit forward of the page rather than in it. */
.method{ flex:0 0 84%; scroll-snap-align:start;
  display:flex; flex-direction:column;
  background:var(--surface); border-radius:var(--r-lg); overflow:hidden;
  box-shadow:var(--shadow-sm);
  transition:transform .35s var(--ease), box-shadow .35s ease; }
.method-body{ flex:1; display:flex; flex-direction:column; gap:.5rem;
  padding:clamp(1rem,.85rem + .5vw,1.4rem) clamp(1.1rem,.9rem + .6vw,1.5rem)
          clamp(1.1rem,.9rem + .6vw,1.5rem); }
@media (min-width:700px){ .method{ flex-basis:47%; } }
@media (min-width:1100px){ .method{ flex-basis:31.5%; } }

/* display:block on both the figure and the picture. A <picture> is inline by
   default, and an inline box around an image with aspect-ratio is exactly how
   the row collapsed. */
/* The ratio lives on the frame, not on the image, and the image fills it at
   height:100%. That way the height of the row is decided by a block box with a
   declared aspect-ratio — it cannot be talked out of it by an inline <picture>
   or by whatever the parent layout thinks the content's height should be,
   which is how these came out as ten-pixel strips in Safari. */
/* The photograph is now the top edge of the plate, so it drops its own radius
   and shadow — the plate carries both. */
.method-media{ display:block; margin:0; overflow:hidden;
  aspect-ratio:16/9; background:var(--mist); }
.method-media picture{ display:block; width:100%; height:100%; }
.method-media img{ display:block; width:100%; height:100%;
  object-fit:cover; transition:transform .9s var(--ease); }
@media (hover:hover){
  .method:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }
  .method:hover .method-media img{ transform:scale(1.035); }
}
.method h3{ margin:0; font-size:var(--step-1); font-weight:600;
  letter-spacing:-.02em; line-height:1.2; }
/* step--1, not step-0. At a 443px card the larger size ran to five short lines
   and the card grew past the height a rail can carry; the smaller size fits
   more words per line and reads better at this measure. */
.method > p{ margin:0; font-size:var(--step--1); line-height:1.6;
  color:var(--text-soft); }

/* Facts sit at the foot of the card. margin-top:auto rather than subgrid: it
   lines them up across whichever cards are on screen together, using nothing
   but flexbox, and it degrades to "slightly out of line" instead of "the
   photograph is gone". */
/* A hairline instead of guesswork: the facts are a different kind of content
   from the description above them, and on a white plate a rule says so in less
   room than blank space would. */
.method-facts{ margin:auto 0 0; padding-top:.8rem;
  border-top:1px solid var(--line); }
.method-facts dt{ font-size:var(--step--1); font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); margin-bottom:.3rem; }
.method-facts dd{ margin:0 0 .6rem; font-size:var(--step--1); line-height:1.45;
  color:var(--text-soft); }
.method-facts dd:last-child{ margin-bottom:0; }

/* Controls. Arrows for a mouse, dots for a thumb — both drive the same rail. */
.methods-nav{ display:flex; align-items:center; justify-content:center;
  gap:1rem; margin-top:clamp(1.5rem,1.1rem + 1.4vw,2.25rem); }
.methods-arrow{ display:none; width:48px; height:48px; padding:0;
  border:1px solid var(--border-strong); border-radius:var(--r-pill);
  background:var(--surface); color:var(--ink); cursor:pointer; font:inherit;
  align-items:center; justify-content:center;
  transition:background-color .2s ease, border-color .2s ease, color .2s ease; }
.methods-arrow svg{ width:18px; height:18px; }
@media (hover:hover) and (min-width:700px){ .methods-arrow{ display:inline-flex; } }
.methods-arrow:hover{ background:var(--mist); border-color:var(--ink); }
/* Disabled is a lighter colour, not a faded one. Thinning a control with
   opacity drags whatever is behind it through the glyph; the page settled this
   argument once already, on the garnet buttons. */
.methods-arrow[disabled]{ color:var(--line); border-color:var(--line); cursor:default; }
.methods-arrow[disabled]:hover{ background:transparent; border-color:var(--line); }

.methods-dots{ display:flex; gap:.5rem; }
.methods-dots span{ width:7px; height:7px; border-radius:var(--r-pill);
  background:color-mix(in srgb, var(--border-strong) 45%, var(--paper));
  transition:background-color .25s ease, transform .25s var(--ease); }
.methods-dots span.on{ background:var(--garnet); transform:scale(1.25); }

/* ---------------- Navigator: the answer to one question ----------------
   Rebuilt. The old panel opened with a kicker, a title and four lines of prose,
   and only then reached the number of visits and the price — so the three things
   a patient came to find out sat at the bottom, in three different places. They
   are now one row near the top, and the prose is one sentence.

   It also used to hold a fixed min-height so switching card never reflowed the
   page: 928px of it on a phone, most of it empty before anything was picked.
   The panel simply is not there until there is an answer to put in it, and the
   pick scrolls it into view, so the height is free to be whatever it needs. */
.nt-prompt{ margin:clamp(1.75rem,1.2rem + 2vw,2.75rem) auto 0; text-align:center;
  font-size:var(--step--1); color:var(--muted); }

.nt{ margin-top:clamp(1.75rem,1.2rem + 2vw,2.75rem); scroll-margin-top:96px;
  border-radius:var(--r-lg); background:var(--surface); box-shadow:var(--shadow-md); }
.nt-body{ padding:clamp(1.25rem,.9rem + 1.6vw,3.5rem); display:grid; gap:0; }

.nt-k{ margin:0 0 .5rem; font-size:var(--step--1); font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted); }
.nt-title{ margin:0 0 .45rem; font-size:var(--step-2); letter-spacing:-.025em; line-height:1.1; }
/* Body size on a phone, lead size once there is room. The panel has to close
   inside one screen, and at --step-1 this paragraph alone ran to six lines. */
.nt-lead{ margin:0; font-size:var(--step-0); line-height:1.5; letter-spacing:-.01em;
  color:var(--text-soft); max-width:60ch; }
@media (min-width:720px){ .nt-lead{ font-size:var(--step-1); } }

/* Two facts, not three. On a phone the panel ran to 1026px — well past one
   screen — and the fact block was the heaviest part of it at 350px. Where you
   pay is reassurance rather than a fact you weigh, so it moved to one line by
   the buttons; the label and the figure now share a row instead of stacking. */
.nt-facts{ margin:clamp(1.1rem,.85rem + 1.2vw,2.25rem) 0 0; display:grid; gap:0; }
.nt-facts > div{ display:grid; grid-template-columns:1fr auto; column-gap:1rem;
  align-items:baseline; padding-block:.8rem; border-top:1px solid var(--line); }
.nt-facts > div:last-child{ border-bottom:1px solid var(--line); }
.nt-facts dt{ font-size:var(--step--1); font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted); }
.nt-facts dd{ margin:0; font-size:var(--step-1); font-weight:600; letter-spacing:-.02em;
  color:var(--ink); text-align:right; }
.nt-facts .amt{ font-size:var(--step-2); letter-spacing:-.035em; line-height:1.05; }
.nt-facts .nt-sub{ grid-column:1 / -1; margin-top:.15rem; text-align:left;
  font-size:var(--step--1); font-weight:400; letter-spacing:0; color:var(--text-soft); }
@media (min-width:720px){
  /* Room to breathe again: label above figure, the two split by a vertical rule. */
  .nt-facts{ grid-template-columns:repeat(2,minmax(0,1fr));
    padding-top:1.5rem; border-top:1px solid var(--line); }
  .nt-facts > div{ display:grid; grid-template-columns:1fr; gap:.2rem;
    padding:0 clamp(1.5rem,.8rem + 2vw,2.75rem);
    border-top:0; border-bottom:0 !important; border-left:1px solid var(--line); }
  .nt-facts > div:first-child{ padding-left:0; border-left:0; }
  .nt-facts dd{ text-align:left; }
  .nt-facts .nt-sub{ margin-top:0; }
}

/* Folded away on a phone. It is the proof, not the offer: worth reading, not
   worth 260px before the buttons. Opened on wider screens from script, where
   there is room for it and nothing is gained by hiding it. */
.nt-gets-wrap{ margin-top:clamp(1.25rem,1rem + 1.2vw,2rem); }
.nt-gets-k{ margin:0; padding:.9rem 2rem .9rem 0; position:relative; cursor:pointer;
  list-style:none; font-size:var(--step--1); font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted); transition:color .2s ease; }
.nt-gets-k::-webkit-details-marker{ display:none; }
.nt-gets-k:hover{ color:var(--ink); }
.nt-gets-k::before,.nt-gets-k::after{ content:""; position:absolute; right:.3rem; top:50%;
  background:var(--muted); transition:transform .3s var(--ease),opacity .3s ease; }
.nt-gets-k::before{ width:11px; height:1.5px; margin-top:-.75px; }
.nt-gets-k::after{ width:1.5px; height:11px; margin-top:-5.5px; right:calc(.3rem + 4.75px); }
.nt-gets-wrap[open] .nt-gets-k::after{ transform:rotate(90deg); opacity:0; }
.nt-gets-wrap[open] .nt-gets-k{ color:var(--ink); }
.nt-gets{ list-style:none; margin:0 0 .35rem; padding:0; display:grid; gap:.6rem 2.25rem; }
@media (min-width:720px){ .nt-gets{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.nt-gets li{ position:relative; padding-left:1.15rem; font-size:var(--step--1); line-height:1.55; color:var(--text-soft); }
.nt-gets li::before{ content:""; position:absolute; left:0; top:.68em; width:.45rem; height:1px;
  background:var(--border-strong); }

/* Two ways forward: book now, or read the programme first. Full width on a
   phone so neither is the small one. */
.nt-actions{ margin-top:clamp(1.35rem,1rem + 1.6vw,2.25rem); display:grid; gap:.75rem; }
@media (min-width:520px){ .nt-actions{ grid-auto-flow:column; justify-content:start; } }
.nt-pay{ margin:.8rem 0 0; font-size:var(--step--1); line-height:1.5; color:var(--muted); }

/* Short screens — a 2014-era 360x640 leaves 580px under the sticky header, and
   the panel has to close inside it. Everything here is either a duplicate of
   something on /book or pure air. Anything above 720px tall keeps it all. */
@media (max-height:720px) and (max-width:719px){
  .nt-body{ padding:1rem; }
  .nt-k{ margin-bottom:.3rem; }
  .nt-pay{ display:none; }
  .nt-facts{ margin-top:.9rem; }
  .nt-facts > div{ padding-block:.65rem; }
  .nt-actions{ margin-top:1rem; }
}

/* ---------------- The visit ----------------
   Six equal blocks in a 3x2 grid left the rows ragged (step 05 runs five lines,
   04 and 06 run three) and gave the eye nothing but hairlines. The content is a
   sequence, so it is set as one: a spine with numbered nodes, and the heading,
   promise and CTA held beside it on desktop. */
.visit{ display:grid; gap:clamp(2.5rem,1.5rem + 3.5vw,4.5rem); }
@media (min-width:1000px){
  /* Was half and half. The right column now carries the bone as well as the
     steps, and an even split left the descriptions at 349px — narrower than the
     aside beside them, which is the wrong way round for the column doing the
     reading. The right side takes the extra. */
  .visit{ grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
    column-gap:clamp(2.5rem,1rem + 4vw,5.5rem); align-items:start; }
  .visit-aside{ position:sticky; top:8rem; }
}
.visit-aside{ display:grid; gap:1.1rem; align-content:start; }
.visit-aside h2{ margin:0; }
.visit-aside .lead{ margin:0; }
.visit-note{ margin:0; padding-top:1.1rem; border-top:1px solid var(--line);
  font-size:var(--step--1); color:var(--text-soft); line-height:1.65; }
.visit-aside .btn{ justify-self:start; margin-top:.3rem; }

/* ---- The spine itself, instead of a drawn line ----
   The steps already ran down a 1px rule with numbered nodes on it; this puts
   the thing the rule was standing in for where the rule was. The photograph is
   decorative — the reading order is the list — so it is aria-hidden and carries
   an empty alt.
   height:100% with width:auto lets the column size itself off the picture: the
   list decides the row height, the picture takes it, and the auto track ends up
   exactly as wide as the bone at that height. Nothing has to be guessed, and
   the bone reaches the last step at any measure. */
/* Below 1280 the whole bone cannot fit: standing at the height of the list it
   would want ~285px of width on a 390px screen. So it is cut — but on one side
   only. The bone sits hard against the right edge of the screen with its left
   side whole, and the processes run off the edge. object-position:left is what
   holds that: cover scales it to the row height and then keeps the left of the
   frame, dropping the overflow off the right.
   The negative margin cancels the page gutter so the cut lands on the screen
   edge itself rather than in the margin, which is the difference between a bone
   running off the page and a bone that has simply been trimmed. */
.visit-track{ display:grid;
  grid-template-columns:minmax(0,1fr) clamp(60px,19vw,96px);
  column-gap:clamp(.8rem,.4rem + 1.4vw,1.4rem); align-items:stretch; }
.visit-steps{ grid-column:1; grid-row:1; }
.visit-spine{ grid-column:2; grid-row:1;
  display:block; width:calc(100% + var(--gutter)); height:100%;
  /* the global img rule caps every image at its container, which is exactly
     what stops this one reaching past the gutter */
  max-width:none;
  margin-right:calc(var(--gutter) * -1);
  object-fit:cover; object-position:left top; }
/* 1280, not 1000. The bone's own proportions decide how wide the column has to
   be for it to reach the last step — one part in 4.9 of the list's height — and
   below this width that column would leave the text too narrow to read. Under
   1280 the drawn rule does the job instead. */
/* From 1280 there is room for the whole bone, processes and all, so the crop
   is dropped and it is fitted by height instead. */
@media (min-width:1280px){
  /* A declared width, not auto. In an auto track the column is measured before
     the row height is known, so the picture got its natural width and the bone
     stopped half way down the steps. The number is chosen so the column is
     always at least list-height / 4.9 — the width the bone needs to stand at
     full height — and object-fit:contain then fits it by height and centres the
     slack. */
  .visit-track{ grid-template-columns:clamp(190px,15vw,240px) minmax(0,1fr);
    column-gap:clamp(1.25rem,.5rem + 1.6vw,2.5rem); align-items:stretch; }
  /* Back to the left, whole, and inside the gutter again. */
  .visit-steps{ grid-column:2; }
  .visit-spine{ grid-column:1; width:100%; margin-right:0;
    object-fit:contain; object-position:center top; }
}

.visit-steps{ list-style:none; margin:0; padding:0; display:grid; gap:0; counter-reset:none; }
.visit-steps > li{ position:relative; padding:0 0 clamp(1.9rem,1.4rem + 1.4vw,2.6rem) 2.9rem;
  display:grid; gap:.4rem; align-content:start; }
.visit-steps > li:last-child{ padding-bottom:0; }
/* The bone replaces the rule at every width now, so nothing is drawn. */
.visit-steps > li::before{ display:none; }
@media (min-width:1280px){
  .visit-steps > li{ padding-left:3.1rem; }
}
.vs-n{ position:absolute; left:0; top:0; width:2.1rem; height:2.1rem; border-radius:50%;
  display:grid; place-items:center; background:var(--surface); border:1px solid var(--line);
  font-size:var(--step--1); font-weight:600; color:var(--muted);
  font-variant-numeric:tabular-nums; line-height:1; }
.visit-steps h3{ margin:0; font-size:var(--step-1); font-weight:600; letter-spacing:-.02em;
  line-height:1.25; padding-top:.15rem; }
.visit-steps p{ margin:0; color:var(--text-soft); font-size:var(--step--1); line-height:1.65; max-width:66ch; }
.visit-aside .lead{ max-width:34ch; }
/* The last step is the payoff — the plan in hand — so the sequence lands on it. */
.vs-last .vs-n{ background:var(--garnet); border-color:var(--garnet); color:var(--surface); }
.vs-last h3{ color:var(--garnet); }
.vs-last .vs-n{ border-color:var(--garnet); }

/* ---------------- Fees: cards ---------------- */

/* ---------------- Conditions: photo cards ---------------- */
/* The photograph is left alone and the label sits under it on the page. Six
   images each wearing a dark gradient with white type burned across the bottom
   is the single most template-looking thing a page can do, and it cost the
   pictures as well: every one of them was being read through an 82% veil.
   Selection is now a ring on the image rather than a change of gradient. */
.conds{ display:grid; gap:clamp(1.75rem,1.2rem + 2vw,2.75rem) clamp(1.25rem,.9rem + 1.4vw,2rem); }
@media (min-width:600px){ .conds{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1000px){ .conds{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.cond{ display:grid; gap:1.1rem; align-content:start;
  width:100%; padding:0; border:0; background:none; cursor:pointer;
  text-align:left; font:inherit; color:var(--ink); }
.cond-media{ display:block; overflow:hidden; border-radius:var(--r-md); background:var(--mist);
  box-shadow:var(--shadow-sm);
  transition:transform .35s var(--ease), box-shadow .35s ease; }
/* height:auto or the intrinsic height="900" attribute wins and aspect-ratio
   never applies — the tiles came out 425x900. */
.cond img{ width:100%; height:auto; aspect-ratio:4/3; object-fit:cover;
  transition:transform .9s var(--ease); }
@media (hover:hover){
  .cond:hover .cond-media{ transform:translateY(-5px); box-shadow:var(--shadow-md); }
  .cond:hover img{ transform:scale(1.035); }
  .cond:hover .cond-txt b{ color:var(--garnet-link); }
  .cond:hover .arw{ transform:translateX(.28em); color:var(--garnet-link); }
}
/* A tile that is only a photograph and a label does not look pressable. The old
   answer was a circular badge floating on the picture; this one sits in the text,
   where a link mark belongs, and slides when the card is under the cursor. */
.cond-txt .arw{ display:inline-block; font-style:normal; color:var(--muted);
  transition:transform .25s var(--ease), color .2s ease; }
.cond.picked .arw{ color:var(--garnet); }
.cond-txt{ display:grid; gap:.35rem; padding-inline:.15rem; }
.cond-txt b{ font-size:var(--step-1); font-weight:600; letter-spacing:-.02em; line-height:1.25;
  color:var(--ink); transition:color .2s ease; }
.cond-txt span{ font-size:var(--step--1); line-height:1.5; color:var(--text-soft); max-width:34ch; }
/* Ring rather than fill: the picked card stays a photograph. */
.cond.picked .cond-media{ box-shadow:0 0 0 3px var(--garnet), var(--shadow-md); }
.cond.picked .cond-txt b{ color:var(--garnet); }

/* ---------------- Statement ---------------- */
/* Inset and rounded rather than edge-to-edge. A full-bleed dark band is a
   hard horizontal cut through the page; held inside the gutter with the same
   curvature as the photographs it reads as one more surface in the sequence. */
.statement{ position:relative; overflow:hidden; background:var(--ink); display:grid; place-items:center;
  min-height:clamp(21rem,15rem + 19vw,32rem);
  width:calc(100% - 2 * var(--gutter));
  max-width:calc(var(--container) - 2 * var(--gutter));
  margin-inline:auto; border-radius:var(--r-lg); }
.statement-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 42%; z-index:0; }
/* Neutral, not wine. Tinting a photograph garnet was colour used by the
   square metre; the accent now appears only where something is clickable. */
.statement-scrim{ position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(16,18,22,.58) 0%, rgba(16,18,22,.70) 55%, rgba(16,18,22,.80) 100%); }
.statement-in{ position:relative; z-index:2; max-width:min(54ch,92vw); text-align:center;
  padding:clamp(3rem,2rem + 5vw,5.5rem) var(--gutter); color:var(--surface); display:grid; gap:.9rem; justify-items:center; }
.statement-in .k{ font-size:var(--step--1); font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--surface); margin:0; }
.statement-in .big{ margin:.2rem 0 0; font-size:var(--step-3); font-weight:600; letter-spacing:-.03em; line-height:1.1; color:var(--surface); text-shadow:0 2px 24px rgba(16,18,22,.45); }
.statement-in .sub{ margin:.4rem 0 0; font-size:var(--step-0); line-height:1.6; color:var(--surface); text-shadow:0 1px 14px rgba(16,18,22,.45); max-width:46ch; }

/* ---------------- Neuro ---------------- */

/* ---------------- Scope ---------------- */

/* ---------------- Clinic ---------------- */
.mosaic{ display:grid; gap:clamp(.9rem,.6rem + .8vw,1.25rem); }
/* min-width/min-height 0 or the cells cannot shrink below the natural size of
   the photograph inside them (2000px and 800px here), the 2fr/1fr split stops
   being honoured, and the tall cell grows past its own column and slides under
   its neighbour. */
.mosaic figure{ overflow:hidden; border-radius:var(--r-md); background:var(--mist);
  min-width:0; min-height:0; }
.mosaic img{ width:100%; height:100%; object-fit:cover; aspect-ratio:4/3; transition:transform .7s var(--ease); }

@media (hover:hover){ .mosaic figure:hover img{ transform:scale(1.04); } }
/* Bento. The building is shown at its own 2000x1493, so the whole facade is
   in frame and nothing is cut. The 2fr/1fr split then leaves the two interior
   cells at about 4:3 as well, which is close to their native shape. */
@media (min-width:760px){
  /* The proportion is carried by the grid itself rather than by each cell.
     Three cells each declaring their own aspect-ratio inside 1fr tracks is what
     produced the overlap: every one of them asked for a size the track had not
     agreed to. At 2:1 the tall cell lands at 1.33, which is the facade's own
     shape, so nothing of the building is cut. */
  .mosaic{ grid-template-columns:2fr 1fr; grid-template-rows:1fr 1fr;
    gap:clamp(.9rem,.6rem + .8vw,1.25rem); align-items:stretch; aspect-ratio:2 / 1; }
  .mosaic figure{ display:grid; aspect-ratio:auto; }
  .mosaic figure:nth-child(1){ grid-area:1 / 1 / 3 / 2; }
  .mosaic figure:nth-child(2){ grid-area:1 / 2 / 2 / 3; }
  .mosaic figure:nth-child(3){ grid-area:2 / 2 / 3 / 3; }
  .mosaic img{ aspect-ratio:auto; height:100%; }
}
/* ---------------- FAQ ----------------
   Three questions in two columns left an empty cell bottom-right, and the heading
   sat alone above 1340px of nothing. Same split as the visit section: heading and
   the way to reach a human on the left, the questions stacked on the right. */
.qa{ display:grid; gap:clamp(2.25rem,1.4rem + 3vw,4rem); }
@media (min-width:1000px){
  .qa{ grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    column-gap:clamp(3rem,1rem + 5vw,7rem); align-items:start; }
}
.qa-aside{ display:grid; gap:1.1rem; align-content:start; }
.qa-aside h2{ margin:0; }
.qa-note{ margin:0; padding-top:1.1rem; border-top:1px solid var(--line);
  font-size:var(--step--1); color:var(--text-soft); line-height:1.65; max-width:38ch; }

.faq{ display:grid; align-content:start; }
.faq details{ border-top:1px solid var(--line); }
.faq details:last-of-type{ border-bottom:1px solid var(--line); }
.faq summary{ list-style:none; cursor:pointer; padding:1.55rem 2.5rem 1.55rem 0; position:relative;
  font-size:var(--step-1); font-weight:500; letter-spacing:-.015em; line-height:1.35; transition:color .2s ease; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary:hover{ color:var(--garnet-link); }
.faq summary::before,.faq summary::after{ content:""; position:absolute; right:.3rem; top:50%; background:var(--muted); transition:transform .3s var(--ease),opacity .3s ease; }
.faq summary::before{ width:13px; height:1.5px; margin-top:-.75px; }
.faq summary::after{ width:1.5px; height:13px; margin-top:-6.5px; right:calc(.3rem + 5.75px); }
.faq details[open] summary::after{ transform:rotate(90deg); opacity:0; }
.faq details p{ margin:0 0 1.6rem; color:var(--text-soft); font-size:var(--step-0); line-height:1.65; max-width:56ch; }

/* ---------------- Booking: the hand-off ----------------
   The form itself moved to /book. What closes the page is a photograph of the
   room you would actually walk into, with the invitation on a pane of frosted
   glass over it. The fees used to sit here as two large figures; they were the
   third and fourth time the page said 140 and 160, and by then the number is
   not information, it is nagging. The price lives on /book, where it belongs. */
.cta{ position:relative; isolation:isolate; overflow:hidden; border-radius:var(--r-lg);
  background:var(--mist);
  min-height:clamp(26rem,54vh,38rem);
  display:grid; place-items:center;
  padding:clamp(1.25rem,.8rem + 2.6vw,3.5rem); }
.cta-bg{ position:absolute; inset:0; z-index:0; display:block; }
.cta-bg img{ width:100%; height:100%; object-fit:cover; object-position:50% 45%; }

/* 78% is not a taste call: the darkest patch of the photograph behind this card
   measures rgb(84,87,87), and at that density the pane still lands on #D1D3D4,
   which holds ink at 11.8:1 and the muted grey at 5.8:1. Below ~70% the small
   grey line starts to fail on that patch. */
.cta-card{ position:relative; z-index:1; width:100%; max-width:42rem; text-align:center;
  background:color-mix(in srgb, var(--paper) 78%, transparent);
  -webkit-backdrop-filter:blur(18px) saturate(1.1); backdrop-filter:blur(18px) saturate(1.1);
  border-radius:var(--r-md);
  padding:clamp(1.75rem,1.2rem + 2.6vw,3.5rem);
  box-shadow:0 1px 0 rgba(255,255,255,.5) inset, var(--shadow-md);
  display:grid; justify-items:center; gap:1.1rem; }
/* Older Firefox and anything with backdrop filters switched off get a solid pane
   rather than illegible type over a photograph. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .cta-card{ background:color-mix(in srgb, var(--paper) 96%, transparent); }
}

.cta-k{ margin:0; font-size:var(--step--1); font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted); }
/* Off the shared scale on purpose. At --step-3 each of the two sentences ran to
   two lines inside the pane, so the heading arrived as four ragged rows with
   "Start with" stranded on its own. This tops out where both sentences hold a
   single line at the pane's width. */
.cta-h{ margin:0; font-size:clamp(1.5rem, 1rem + 1.7vw, 2.5rem); line-height:1.12;
  letter-spacing:-.03em; color:var(--ink); max-width:30ch; }
/* Second line on its own row, the same device the hero uses. */
.cta-h em{ display:block; font-style:normal; color:inherit; }
.cta-p{ margin:0; font-size:var(--step-0); line-height:1.6; max-width:44ch; color:var(--text-soft); }
.cta .btn{ margin-top:.6rem; }

/* Honeypot — still used by the form on /book. */
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* ---------------- Footer ---------------- */
/* Light. A full-width garnet slab with a gilt bar across the top was the
   heaviest thing on the page and it sat at the very end, so that is what the
   page left you with. Quiet grey, small type, one hairline. */
.footer{ background:var(--mist); color:var(--text-soft); border-top:1px solid var(--line); }
.footer-inner{ max-width:var(--container); margin-inline:auto; padding:clamp(2.75rem,2rem + 3vw,4.5rem) var(--gutter) 2rem;
  display:grid; grid-template-columns:1fr; gap:clamp(2rem,1.4rem + 2vw,3rem); }
@media (min-width:760px){ .footer-inner{ grid-template-columns:1.7fr 1fr 1.2fr; } }
.footer-brand img{ height:198px; width:auto; margin-bottom:1.25rem; }
.footer-brand .brand-name{ color:var(--ink); font-size:1.5rem; display:block; margin-bottom:.55rem; }
.footer-brand p{ font-size:var(--step--1); line-height:1.6; max-width:34ch; }
.footer h4{ font-size:var(--step--1); font-weight:600; letter-spacing:.14em; text-transform:uppercase; margin:0 0 1.1em; color:var(--ink); }
.footer a{ display:block; padding:.35em 0; font-size:var(--step--1); text-decoration:none; color:inherit; transition:color .18s ease; }
.footer a:hover{ color:var(--ink); }
.footer-bottom{ max-width:var(--container); margin-inline:auto; padding:1.25rem var(--gutter);
  display:flex; flex-wrap:wrap; gap:.7rem 1.5rem; justify-content:space-between; font-size:var(--step--1);
  color:var(--muted); border-top:1px solid var(--line); }
.footer-bottom a{ display:inline; padding:0; }
.footer-legal{ display:flex; gap:1.2rem; flex-wrap:wrap; }

.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; }
.skip{ position:absolute; left:-9999px; top:0; z-index:200; background:var(--garnet); color:var(--surface); padding:.8em 1.2em; }
.skip:focus{ left:.5rem; top:.5rem; }