@charset "utf-8";

/* =========================================================================
   MOBILE FOR YOU
   The print identity (navy band, orange swoosh, shield centred over the
   edge) drives the dark surfaces. The real shop — cool white walls, grey
   gloss floor, LED-backlit niches — drives the light ones.
   ========================================================================= */

:root {
  --paper:      #ffffff;
  --mist:       #eef0f2;
  --mist-deep:  #e0e4e8;
  --steel:      #c9cdd2;

  --navy:       #1e2230;
  --navy-soft:  #262b3a;
  --navy-line:  #363d50;
  --ink:        #12141c;
  --ink-deep:   #0c0e14;

  --orange:     #f5821f;
  --orange-lit: #ff9d45;
  --ember:      #ff6a2b;

  --open:       #35c07a;
  --closed:     #e05a4a;
  --warn:       #f5b027;

  --display: "Montserrat", system-ui, sans-serif;
  --text:    "Nunito", system-ui, -apple-system, sans-serif;

  --t-sm:   0.875rem;
  --t-base: 1rem;
  --t-md:   1.1rem;
  --t-lg:   clamp(1.25rem, 1.05rem + 0.7vw, 1.55rem);
  --t-xl:   clamp(1.6rem, 1.25rem + 1.6vw, 2.5rem);
  --t-2xl:  clamp(2.1rem, 1.45rem + 3vw, 4.1rem);
  --t-3xl:  clamp(2.9rem, 1.4rem + 6.6vw, 7.4rem);

  --gutter: 1.25rem;
  --shell:  78rem;
  --sect:   clamp(5rem, 3rem + 8vw, 10rem);

  --bar: 88px;
  --arc-h: clamp(118px, 13vw, 170px);

  --r:    16px;
  --r-lg: 26px;

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

@media (min-width: 48rem) { :root { --gutter: 2.25rem; } }

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: clip;
  scroll-padding-top: calc(var(--bar) + 1.5rem);
}

body {
  margin: 0;
  font-family: var(--text);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4 { margin: 0; line-height: 1.02; letter-spacing: -0.03em; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
[hidden] { display: none !important; }

:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--orange); color: #fff; }

.shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); }

.section { padding-block: var(--sect); position: relative; }
.section--dark { background: var(--navy); color: #fff; }
.section--ink  { background: var(--ink);  color: #fff; }
.section--mist { background: var(--mist); }

.skip { position: absolute; left: -9999px; background: var(--orange); color: #fff; padding: .75rem 1.25rem; z-index: 999; font-weight: 700; }
.skip:focus { left: 1rem; top: 1rem; }

/* ---------- type ---------- */

.lede { font-size: var(--t-md); line-height: 1.55; max-width: 48ch; color: #545b6d; }
.section--dark .lede, .section--ink .lede, .hero .lede, .wizard-sect .lede { color: #b3bacc; }

.section-head { display: grid; gap: 1rem; margin-bottom: clamp(2.5rem,1.5rem + 3vw,4.25rem); max-width: 56rem; }
.section-head h2 {
  font-family: var(--display); font-weight: 800; font-stretch: 108%;
  font-size: var(--t-2xl); letter-spacing: -0.04em; text-transform: uppercase;
}
.rule { width: 3.25rem; height: 5px; background: var(--orange); border-radius: 99px; }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  padding: 1.05rem 1.9rem; border-radius: 99px;
  font-weight: 800; font-size: var(--t-base); letter-spacing: -0.01em;
  transition: transform .4s var(--ease), background-color .25s, color .25s, box-shadow .4s var(--ease), border-color .25s;
  will-change: transform; position: relative; overflow: hidden;
}
.btn > * { position: relative; z-index: 1; }
.btn svg { width: 1.1em; height: 1.1em; flex: none; }

.btn--primary { background: #c2600c; color: #fff; }
.btn--primary::before { content: ""; position: absolute; inset: 0; background: #a14f08; opacity: 0; transition: opacity .35s; }
.btn--primary:hover::before { opacity: 1; }
.btn--primary:hover { box-shadow: 0 20px 44px -16px rgba(245,130,31,1); }

.btn--ghost { border: 2px solid rgba(255,255,255,.26); color: #fff; }
.btn--ghost:hover { border-color: #fff; background: rgba(255,255,255,.08); }

.btn--ink { border: 2px solid var(--navy); color: var(--navy); }
.btn--ink:hover { background: var(--navy); color: #fff; }

/* =========================================================================
   MASTHEAD
   ========================================================================= */

.masthead { position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 100; height: var(--bar); transition: height .45s var(--ease); }
.masthead.is-stuck { --bar: 62px; }

.masthead__bg {
  position: absolute; inset-block-start: 0; inset-inline: 0;
  width: 100%; height: calc(var(--bar) + 28px);
  pointer-events: none; filter: drop-shadow(0 14px 30px rgba(8,10,16,.42));
  transition: height .45s var(--ease);
}

.masthead__inner { position: relative; height: var(--bar); z-index: 2; display: grid; align-items: center; grid-template-columns: auto 1fr auto; gap: clamp(1rem, 2.4vw, 2.75rem); }
@media (max-width: 62rem) { .masthead__inner { grid-template-columns: auto 1fr auto; } }

.nav { display: none; gap: 1.4rem; font-size: .92rem; font-weight: 600; align-items: center; }
.nav--l { justify-content: flex-end; }
.nav--r { justify-content: flex-start; }
@media (min-width: 62rem) { .nav { display: flex; } }

.nav__link, .nav__trigger {
  position: relative; color: rgba(255,255,255,.82); padding-block: .4rem;
  display: inline-flex; align-items: center; gap: .35rem;
  font: inherit; font-weight: 600; transition: color .25s; white-space: nowrap;
}
.nav__link::after, .nav__trigger::after {
  content: ""; position: absolute; inset-inline: 0; inset-block-end: 0; height: 2px;
  background: var(--orange); border-radius: 2px;
  transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease);
}
.nav__link:hover, .nav__trigger:hover, .nav__item.is-open .nav__trigger { color: #fff; }
.nav__link:hover::after, .nav__trigger:hover::after, .nav__item.is-open .nav__trigger::after { transform: scaleX(1); }
.nav__caret { width: 9px; height: 9px; opacity: .55; transition: transform .4s var(--ease); }
.nav__item.is-open .nav__caret { transform: rotate(180deg); opacity: 1; }

/* the shield, hanging over the bar's edge */
.crest { position: relative; z-index: 6; width: clamp(76px,7.4vw,110px); margin: 0; translate: 0 18%; transition: width .45s var(--ease), translate .45s var(--ease); }
.masthead.is-stuck .crest { width: clamp(58px,5.2vw,78px); translate: 0 12%; }
.crest__img { width: 100%; animation: bob 7s ease-in-out infinite; }
@keyframes bob { 0%,100% { transform: translateY(0) rotate(-1.2deg); } 50% { transform: translateY(-7px) rotate(1.2deg); } }
@keyframes breathe { 0%,100% { opacity: .5; transform: scale(.94); } 50% { opacity: 1; transform: scale(1.07); } }

.masthead__side { display: flex; align-items: center; gap: .7rem; justify-content: flex-start; }
.masthead__side--r { justify-content: flex-end; }
.masthead .btn { padding: .66rem 1.15rem; font-size: .87rem; }
@media (max-width: 76rem) { .masthead .btn .lbl { display: none; } .masthead .btn { padding: .66rem .9rem; } }

.burger { display: grid; gap: 5px; padding: .55rem; position: relative; z-index: 102; }
@media (min-width: 62rem) { .burger { display: none; } }
.burger i { display: block; width: 24px; height: 2px; background: #fff; border-radius: 2px; transition: transform .4s var(--ease), opacity .25s; }
.burger[aria-expanded="true"] i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] i:nth-child(2) { opacity: 0; transform: scaleX(.2); }
.burger[aria-expanded="true"] i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- mega ---------- */

.mega { position: fixed; inset-inline: 0; inset-block-start: var(--bar); z-index: 95; pointer-events: none; padding-inline: var(--gutter); }
@media (max-width: 62rem) { .mega { display: none; } }
.mega__panel {
  max-width: var(--shell); margin-inline: auto; margin-block-start: 1.6rem;
  background: var(--paper); border-radius: var(--r-lg); overflow: hidden;
  box-shadow: 0 50px 110px -45px rgba(6,8,14,.8);
  visibility: hidden; opacity: 0; transform: translate3d(0,-16px,0) scale(.985);
  transition: opacity .3s var(--ease), transform .5s var(--soft), visibility .3s;
}
.mega.is-open { pointer-events: auto; }
.mega.is-open .mega__panel { visibility: visible; opacity: 1; transform: none; }

.mega__grid { display: grid; grid-template-columns: 1.7fr 1fr; }
.mega__main { padding: 1.8rem 2rem 2rem; }
.mega__side { padding: 1.8rem 2rem 2rem; background: var(--mist); }
.mega__label { font-size: .71rem; font-weight: 800; letter-spacing: .14em; color: #868e9f; margin-bottom: .95rem; }

.mega__links { display: grid; grid-template-columns: 1fr 1fr; gap: .1rem; }
.mega__link { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .8rem; padding: .62rem .7rem; border-radius: var(--r); transition: background-color .22s, transform .3s var(--ease); }
.mega__link:hover { background: var(--mist); transform: translateX(3px); }
.mega__ico { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: var(--mist); color: var(--navy); transition: background-color .22s, color .22s; }
.mega__link:hover .mega__ico { background: var(--navy); color: #fff; }
.mega__ico svg { width: 19px; height: 19px; }
.mega__link b { display: block; font-size: .91rem; font-weight: 700; letter-spacing: -0.015em; }
.mega__link i { display: block; font-style: normal; font-size: .76rem; color: #99a1b2; }
.mega__from { font-family: var(--display); font-weight: 800; font-size: .9rem; color: var(--navy); white-space: nowrap; }

.mega__store { display: block; padding: .9rem 1rem; border-radius: var(--r); background: var(--paper); transition: transform .3s var(--ease), box-shadow .3s; }
.mega__store + .mega__store { margin-top: .5rem; }
.mega__store:hover { transform: translateX(4px); box-shadow: 0 14px 28px -18px rgba(18,20,28,.6); }
.mega__store b { font-family: var(--display); font-weight: 800; font-size: 1rem; text-transform: uppercase; display: flex; align-items: center; gap: .45rem; }
.mega__store i { font-style: normal; display: block; font-size: .78rem; color: #99a1b2; margin-top: .1rem; }
.mega__cta { display: flex; align-items: center; justify-content: center; gap: .5rem; margin-top: .95rem; padding: .82rem 1.1rem; border-radius: 99px; background: var(--navy); color: #fff; font-weight: 800; font-size: .87rem; transition: background-color .25s; }
.mega__cta:hover { background: var(--orange); }

/* ---------- drawer ---------- */

.drawer {
  position: fixed; inset: 0; z-index: 99; background: var(--navy);
  padding: calc(var(--bar) + 2.5rem) var(--gutter) 1.5rem;
  display: grid; grid-template-rows: 1fr auto; overflow-y: auto; overscroll-behavior: contain;
  clip-path: circle(0% at calc(100% - 2.4rem) 2.4rem);
  transition: clip-path .65s var(--soft), visibility .65s;
  visibility: hidden;
}
.drawer.is-open { clip-path: circle(155% at calc(100% - 2.4rem) 2.4rem); visibility: visible; }
.drawer__list > * { opacity: 0; transform: translate3d(0,22px,0); transition: opacity .4s ease, transform .55s var(--soft); }
.drawer.is-open .drawer__list > * { opacity: 1; transform: none; }
.drawer.is-open .drawer__list > *:nth-child(1) { transition-delay: .18s; }
.drawer.is-open .drawer__list > *:nth-child(2) { transition-delay: .24s; }
.drawer.is-open .drawer__list > *:nth-child(3) { transition-delay: .30s; }
.drawer.is-open .drawer__list > *:nth-child(4) { transition-delay: .36s; }
.drawer.is-open .drawer__list > *:nth-child(5) { transition-delay: .42s; }

.drawer__top {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%;
  font-family: var(--display); font-weight: 800; font-stretch: 106%;
  font-size: clamp(1.6rem,7.2vw,2.2rem); text-transform: uppercase; letter-spacing: -0.035em;
  color: #fff; padding-block: .48rem; border-bottom: 1px solid var(--navy-line);
  list-style: none; cursor: pointer;
}
.drawer__top::-webkit-details-marker { display: none; }
.drawer__top svg { width: 20px; height: 20px; color: var(--orange); transition: transform .35s var(--ease); }
.drawer details[open] > .drawer__top svg { transform: rotate(45deg); }
.drawer__sub { display: grid; padding: .55rem 0 1rem; }
.drawer__sub a { display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-size: .93rem; font-weight: 600; color: #a8b0c2; padding: .5rem .15rem; }
.drawer__sub a:hover { color: #fff; }
.drawer__sub em { font-style: normal; font-weight: 800; color: var(--orange); font-size: .83rem; }

.drawer__foot { display: grid; gap: .85rem; padding-top: 1.4rem; border-top: 1px solid var(--navy-line); opacity: 0; transform: translate3d(0,16px,0); transition: opacity .4s ease .48s, transform .5s var(--soft) .48s; }
.drawer.is-open .drawer__foot { opacity: 1; transform: none; }
.drawer__status { display: grid; gap: .3rem; font-size: .83rem; color: #a8b0c2; }
.drawer__status p { display: flex; align-items: center; gap: .5rem; }
.drawer__status b { color: #fff; font-weight: 700; }

/* =========================================================================
   HERO
   ========================================================================= */

.hero { position: relative; background: var(--navy); color: #fff; overflow: hidden; padding-block: calc(var(--bar) + 2.5rem) 3rem; }
.hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .2; filter: grayscale(.45) contrast(1.06); }
.hero__veil { position: absolute; inset: 0; background: radial-gradient(88% 70% at 24% 36%, rgba(30,34,48,.18) 0%, rgba(30,34,48,.93) 56%, rgba(12,14,20,1) 100%), linear-gradient(180deg, rgba(12,14,20,.94) 0%, rgba(12,14,20,0) 24%); }
.hero__blob { position: absolute; inset-block-start: 6%; inset-inline-end: -10%; width: min(46rem,74vw); aspect-ratio: 1; background: radial-gradient(circle, rgba(245,130,31,.22) 0%, rgba(245,130,31,0) 62%); pointer-events: none; animation: drift 17s ease-in-out infinite; }
@keyframes drift { 0%,100% { transform: none; } 50% { transform: translate3d(-3%,5%,0) scale(1.1); } }

.hero .shell { position: relative; z-index: 2; }
.hero__grid { display: grid; gap: clamp(1.75rem,1rem + 2.4vw,3rem); align-items: start; }
@media (min-width: 66rem) { .hero__grid { grid-template-columns: minmax(0,1fr) minmax(0,1.05fr); align-items: start; } }

.hero h1 { font-family: var(--display); font-weight: 800; font-stretch: 116%; font-size: clamp(2.35rem, 1.5rem + 3vw, 4rem); text-transform: uppercase; letter-spacing: -0.045em; line-height: .86; margin-bottom: 1rem; }
.fx__line { display: block; overflow: hidden; padding-block: .03em; }
.fx__line > span { display: inline-block; transform: translate3d(0,110%,0) rotate(3deg); opacity: 0; }
.is-sealed .fx__line > span { transform: none; opacity: 1; transition: transform 1.05s var(--soft), opacity .55s ease .08s; }
.is-sealed .fx__line:nth-child(2) > span { transition-delay: .12s, .2s; }
.extrude { color: var(--orange); text-shadow: 2px 3px 0 #c2620e, 4px 6px 0 #8f4708, 6px 9px 0 rgba(12,14,20,.95); }
@media (max-width: 40rem) { .extrude { text-shadow: 1px 2px 0 #c2620e, 3px 4px 0 #8f4708, 4px 6px 0 rgba(12,14,20,.95); } }

.hero__cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }

/* today-promise — the urgency line, computed live */
.today {
  display: inline-flex; align-items: center; gap: .65rem; margin-top: 2rem;
  padding: .7rem 1.1rem .7rem .8rem; border-radius: 99px;
  background: rgba(53,192,122,.11); border: 1px solid rgba(53,192,122,.3);
  font-size: .86rem; font-weight: 600; color: #cfe6da; max-width: 100%;
}
.today--shut { background: rgba(245,176,39,.1); border-color: rgba(245,176,39,.3); color: #ecdcb8; }
.today b { color: #fff; font-weight: 800; }
.today__pulse { width: 26px; height: 26px; border-radius: 99px; display: grid; place-items: center; background: rgba(53,192,122,.2); flex: none; }
.today--shut .today__pulse { background: rgba(245,176,39,.2); }
.today__pulse svg { width: 14px; height: 14px; color: var(--open); }
.today--shut .today__pulse svg { color: var(--warn); }

.pills { display: grid; gap: .65rem; margin-top: 2.25rem; max-width: 36rem; }
@media (min-width: 42rem) { .pills { grid-auto-flow: column; grid-auto-columns: 1fr; max-width: none; } }
.pill { display: grid; gap: .28rem; padding: .95rem 1.1rem; border-radius: var(--r); background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.09); backdrop-filter: blur(10px); will-change: transform; }
.pill svg { width: 19px; height: 19px; color: var(--orange); }
.pill b { font-size: .9rem; font-weight: 800; letter-spacing: -0.015em; }
.pill span { font-size: .77rem; color: #9aa2b5; line-height: 1.4; }

.stage { position: relative; display: grid; place-items: center; }
@media (max-width: 66rem) { .stage { display: none; } }
.phone { width: min(20rem,29vw); filter: drop-shadow(0 50px 70px rgba(0,0,0,.7)); will-change: transform; animation: float 9s ease-in-out infinite; }
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-16px); } }
.phone__crack path { stroke-dasharray: var(--len,900); stroke-dashoffset: var(--len,900); }
.is-sealed .phone__crack path { animation: draw 1.4s var(--ease) .5s forwards, dim 1s ease 2.5s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes dim { to { opacity: 0; } }
.phone__sweep { opacity: 0; }
.is-sealed .phone__sweep { animation: sweep 1.6s var(--ease) 2.1s forwards; }
@keyframes sweep { 0% { transform: translateY(-620px); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(620px); opacity: 0; } }

.orbit { position: absolute; inset: 0; pointer-events: none; }
.orbit i { position: absolute; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: rgba(38,43,58,.82); border: 1px solid rgba(255,255,255,.1); backdrop-filter: blur(8px); color: var(--orange); will-change: transform; }
.orbit i svg { width: 22px; height: 22px; }
.orbit i:nth-child(1) { inset-block-start: 4%;  inset-inline-start: -2%; animation: float 7s ease-in-out infinite .4s; }
.orbit i:nth-child(2) { inset-block-start: 40%; inset-inline-end: -7%;  animation: float 8.5s ease-in-out infinite 1.1s; }
.orbit i:nth-child(3) { inset-block-end: 6%;    inset-inline-start: 4%; animation: float 7.8s ease-in-out infinite .7s; }

.scroll-hint { position: absolute; inset-block-end: 1.4rem; inset-inline-start: var(--gutter); z-index: 2; display: flex; align-items: center; gap: .6rem; font-size: .71rem; font-weight: 800; letter-spacing: .16em; color: rgba(255,255,255,.42); }
.scroll-hint i { display: block; width: 1px; height: 32px; background: linear-gradient(var(--orange), transparent); animation: trickle 2.4s ease-in-out infinite; transform-origin: top; }
@keyframes trickle { 0%,100% { transform: scaleY(.3); opacity: .35; } 50% { transform: scaleY(1); opacity: 1; } }

/* ---------- live ribbon ---------- */

.ribbon { background: var(--ink); color: #fff; padding-block: 1.3rem; position: relative; z-index: 4; }
.ribbon__row { display: grid; gap: .8rem; }
@media (min-width: 48rem) { .ribbon__row { grid-template-columns: 1fr 1fr; gap: 2.5rem; } }
.ribbon__store { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .7rem; font-size: var(--t-sm); padding-block: .28rem; }
@media (min-width: 48rem) { .ribbon__store + .ribbon__store { border-left: 1px solid rgba(255,255,255,.08); padding-left: 2.5rem; } }
.ribbon__name { font-family: var(--display); font-weight: 800; font-size: .97rem; text-transform: uppercase; letter-spacing: -0.025em; }
.ribbon__state { font-weight: 700; }
.ribbon__meta { color: #868e9f; }
.ribbon__link { color: var(--orange); font-weight: 700; margin-left: auto; }
.ribbon__link:hover { text-decoration: underline; }

.dot { width: 9px; height: 9px; border-radius: 99px; background: var(--closed); flex: none; }
.dot--open { background: var(--open); box-shadow: 0 0 0 0 rgba(53,192,122,.7); animation: pulse 2.6s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 9px rgba(53,192,122,0); } 100% { box-shadow: 0 0 0 0 rgba(53,192,122,0); } }

/* ---------- marquee ---------- */

.marquee { background: var(--orange); color: var(--ink); padding-block: .78rem; overflow: hidden; transform: rotate(-1.3deg) scaleX(1.07); position: relative; z-index: 5; margin-block: -2px; }
.marquee--navy { background: var(--navy); color: #fff; transform: rotate(1deg) scaleX(1.07); }
.marquee__track { display: flex; width: max-content; will-change: transform; }
.marquee__item { display: flex; align-items: center; gap: 1.5rem; padding-inline: .75rem; font-family: var(--display); font-weight: 800; font-stretch: 104%; font-size: clamp(.9rem,.8rem + .45vw,1.18rem); text-transform: uppercase; letter-spacing: -0.02em; white-space: nowrap; }
.marquee__item svg { width: 12px; height: 14px; opacity: .5; flex: none; }

/* =========================================================================
   SYMPTOM PICKER — what is it doing, rather than what part is broken
   ========================================================================= */

.symptoms { display: grid; gap: 1.5rem; }
@media (min-width: 62rem) { .symptoms { grid-template-columns: 1fr 1.05fr; gap: 3rem; align-items: start; } }

.sym-list { display: grid; gap: .5rem; }
.sym {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .9rem;
  padding: 1rem 1.15rem; border-radius: var(--r); text-align: left; width: 100%;
  border: 1.5px solid var(--mist-deep); background: var(--paper);
  transition: border-color .25s, background-color .25s, transform .35s var(--ease);
}
.sym:hover { border-color: var(--steel); transform: translateX(4px); }
.sym[aria-pressed="true"] { border-color: var(--navy); background: var(--navy); color: #fff; }
.sym__ico { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; background: var(--mist); color: var(--navy); transition: background-color .25s, color .25s; }
.sym[aria-pressed="true"] .sym__ico { background: rgba(255,255,255,.12); color: var(--orange); }
.sym__ico svg { width: 20px; height: 20px; }
.sym b { display: block; font-size: .96rem; font-weight: 700; letter-spacing: -0.015em; }
.sym em { font-style: normal; font-size: .79rem; color: #99a1b2; }
.sym[aria-pressed="true"] em { color: #a8b0c2; }
.sym__go { width: 16px; height: 16px; color: var(--orange); opacity: 0; transform: translateX(-6px); transition: opacity .3s, transform .3s var(--ease); }
.sym[aria-pressed="true"] .sym__go { opacity: 1; transform: none; }

.diag {
  border-radius: var(--r-lg); background: var(--navy); color: #fff;
  padding: clamp(1.5rem,1.1rem + 1.8vw,2.25rem);
  display: grid; gap: 1.15rem; align-content: start;
  position: relative; overflow: hidden; min-height: 22rem;
}
@media (min-width: 62rem) { .diag { position: sticky; top: calc(var(--bar) + 1.5rem); } }
.diag::after {
  content: ""; position: absolute; inset-block-start: -40%; inset-inline-end: -25%;
  width: 26rem; aspect-ratio: 1; pointer-events: none;
  background: radial-gradient(circle, rgba(245,130,31,.18) 0%, transparent 65%);
}
.diag > * { position: relative; z-index: 1; animation: wz-in .45s var(--soft) both; }
.diag > *:nth-child(2) { animation-delay: .05s; }
.diag > *:nth-child(3) { animation-delay: .1s; }
.diag > *:nth-child(4) { animation-delay: .15s; }
.diag > *:nth-child(5) { animation-delay: .2s; }

.diag__kicker { font-size: .73rem; font-weight: 800; letter-spacing: .13em; color: var(--orange-lit); }
.diag h3 { font-family: var(--display); font-weight: 800; font-stretch: 106%; font-size: var(--t-xl); text-transform: uppercase; letter-spacing: -0.035em; }
.diag p { font-size: var(--t-sm); color: #b3bacc; line-height: 1.6; max-width: 46ch; }
.diag__facts { display: grid; gap: .1rem; }
.diag__fact { display: grid; grid-template-columns: auto 1fr; gap: .9rem; padding-block: .6rem; border-bottom: 1px solid var(--navy-line); font-size: .85rem; }
.diag__fact:last-child { border-bottom: 0; }
.diag__fact dt { color: #9ba3b6; font-weight: 700; }
.diag__fact dd { margin: 0; text-align: right; font-weight: 700; }
.diag__fact dd b { color: var(--orange-lit); }
.diag__urgent { display: flex; gap: .7rem; padding: .9rem 1rem; border-radius: var(--r); background: rgba(224,90,74,.13); border: 1px solid rgba(224,90,74,.32); font-size: .82rem; line-height: 1.5; color: #f3cfc9; }
.diag__urgent svg { width: 18px; height: 18px; color: #ff8c7a; flex: none; margin-top: .1rem; }

/* =========================================================================
   REPAIR RAIL
   ========================================================================= */

.rail-sect { overflow: hidden; }
.rail { display: flex; gap: 1rem; padding-inline: var(--gutter); overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; padding-block: .5rem 1.25rem; }
.rail::-webkit-scrollbar { display: none; }

.fix {
  scroll-snap-align: center; flex: 0 0 min(18.5rem,78vw);
  display: grid; grid-template-rows: auto auto 1fr auto; gap: .9rem;
  padding: 1.55rem 1.6rem 1.45rem; border-radius: var(--r-lg);
  background: var(--paper); box-shadow: 0 0 0 1px var(--mist-deep);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
  position: relative; overflow: hidden;
}
.fix::before { content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; height: 3px; background: linear-gradient(90deg,var(--ember),var(--orange-lit)); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); }
.fix:hover { transform: translateY(-8px); box-shadow: 0 28px 54px -30px rgba(18,20,28,.5), 0 0 0 1px var(--mist-deep); }
.fix:hover::before { transform: scaleX(1); }
.fix__icon { width: 44px; height: 44px; color: var(--navy); transition: color .3s; }
.fix:hover .fix__icon { color: var(--orange); }
.fix__icon svg { width: 100%; height: 100%; }
.fix h3 { font-family: var(--display); font-weight: 800; font-stretch: 105%; font-size: var(--t-lg); text-transform: uppercase; }
.fix p { font-size: var(--t-sm); color: #5c6376; line-height: 1.5; }
.fix__foot { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding-top: .9rem; border-top: 1px solid var(--mist-deep); }
.fix__price { font-family: var(--display); font-weight: 800; font-size: 1.42rem; letter-spacing: -0.04em; }
.fix__price small { display: block; font-family: var(--text); font-size: .66rem; font-weight: 700; letter-spacing: .05em; color: #9aa2b4; }
.fix__time { font-size: .76rem; font-weight: 700; color: var(--navy); background: var(--mist); padding: .3rem .65rem; border-radius: 99px; }

.rail-nav { display: flex; gap: .55rem; margin-top: 1.25rem; }
.rail-nav button { width: 46px; height: 46px; border-radius: 99px; border: 2px solid var(--mist-deep); display: grid; place-items: center; transition: border-color .25s, background-color .25s, color .25s, transform .3s var(--ease); }
.rail-nav button:hover { border-color: var(--navy); background: var(--navy); color: #fff; transform: translateY(-2px); }
.rail-nav svg { width: 17px; height: 17px; }

/* =========================================================================
   CONVEYOR
   ========================================================================= */

.track { position: relative; }
.track__line { position: absolute; inset-inline: 0; inset-block-start: 50%; height: 2px; background: var(--navy-line); }
.track__fill { position: absolute; inset-block: 0; inset-inline-start: 0; width: 0; background: linear-gradient(90deg,var(--ember),var(--orange-lit)); border-radius: 2px; }
.track__crest { position: absolute; inset-block-start: 50%; inset-inline-start: 0; width: 54px; translate: -50% -50%; filter: drop-shadow(0 10px 20px rgba(0,0,0,.65)); z-index: 3; }
@media (max-width: 52rem) { .track__line, .track__crest { display: none; } }

.stations { display: grid; gap: 2.1rem; position: relative; z-index: 2; }
@media (min-width: 52rem) { .stations { grid-template-columns: repeat(4,1fr); gap: 1.5rem; min-height: 25rem; align-items: center; } }
.station { display: grid; gap: .55rem; align-content: start; }
@media (min-width: 52rem) {
  .station:nth-child(odd)  { align-self: start; padding-bottom: 7.5rem; }
  .station:nth-child(even) { align-self: end;   padding-top: 7.5rem; }
}
.station__dot { width: 13px; height: 13px; border-radius: 99px; background: var(--navy); border: 2px solid var(--navy-line); transition: background-color .4s, border-color .4s, transform .4s var(--ease); }
.station.is-live .station__dot { background: var(--orange); border-color: var(--orange-lit); transform: scale(1.3); }
@media (min-width: 52rem) {
  .station__dot { position: absolute; inset-block-start: 50%; translate: -50% -50%; }
  .station:nth-child(1) .station__dot { inset-inline-start: 12.5%; }
  .station:nth-child(2) .station__dot { inset-inline-start: 37.5%; }
  .station:nth-child(3) .station__dot { inset-inline-start: 62.5%; }
  .station:nth-child(4) .station__dot { inset-inline-start: 87.5%; }
}
.station__n { font-family: var(--display); font-weight: 800; font-size: 2.9rem; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px var(--navy-line); transition: -webkit-text-stroke-color .45s; }
.station.is-live .station__n { -webkit-text-stroke-color: var(--orange); }
.station h3 { font-size: var(--t-md); font-weight: 800; letter-spacing: -0.025em; }
.station p { font-size: var(--t-sm); color: #a4acbe; line-height: 1.5; max-width: 27ch; }

/* =========================================================================
   BEFORE / AFTER
   ========================================================================= */

.ba { position: relative; aspect-ratio: 16/10; width: 100%; border-radius: var(--r-lg); overflow: hidden; user-select: none; touch-action: pan-y; cursor: ew-resize; box-shadow: 0 50px 90px -50px rgba(0,0,0,.9); }
.ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ba__after { clip-path: inset(0 0 0 var(--split,50%)); }
.ba__handle { position: absolute; inset-block: 0; inset-inline-start: var(--split,50%); width: 2px; background: var(--orange); transform: translateX(-1px); pointer-events: none; box-shadow: 0 0 22px rgba(245,130,31,.85); }
.ba__grip { position: absolute; inset-block-start: 50%; inset-inline-start: 50%; translate: -50% -50%; width: 54px; height: 54px; border-radius: 99px; background: var(--orange); display: grid; place-items: center; box-shadow: 0 10px 30px -8px rgba(0,0,0,.8); }
.ba__grip svg { width: 22px; height: 22px; color: #fff; }
.ba__tag { position: absolute; inset-block-start: 1rem; font-size: .69rem; font-weight: 800; letter-spacing: .1em; padding: .4rem .8rem; border-radius: 99px; background: rgba(12,14,20,.8); color: #fff; backdrop-filter: blur(6px); }
.ba__tag--l { inset-inline-start: 1rem; }
.ba__tag--r { inset-inline-end: 1rem; }

/* =========================================================================
   FIGURES
   ========================================================================= */

.figures { display: grid; gap: 2.75rem; }
@media (min-width: 52rem) { .figures { grid-template-columns: repeat(3,1fr); gap: 2rem; align-items: start; } }
.figure { display: grid; gap: .6rem; will-change: transform; }
@media (min-width: 52rem) {
  .figure:nth-child(2) { margin-block-start: 4.5rem; }
  .figure:nth-child(3) { margin-block-start: 9rem; }
}
.figure b {
  font-family: var(--display); font-weight: 800; font-stretch: 112%;
  font-size: clamp(3.4rem,2rem + 6vw,7rem); line-height: .84; letter-spacing: -0.06em;
  color: transparent; background: linear-gradient(170deg,#fff 18%,#868da0 100%);
  -webkit-background-clip: text; background-clip: text;
}
.figure hr { border: 0; height: 3px; width: 3rem; background: var(--orange); border-radius: 2px; margin: .2rem 0 0; }
.figure span { font-size: var(--t-sm); color: #a4acbe; line-height: 1.5; max-width: 27ch; }

/* =========================================================================
   REVIEW RIBBONS
   ========================================================================= */

.ribbons { display: grid; gap: 1rem; }
.rib-wrap { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.rib { display: flex; width: max-content; gap: 1rem; will-change: transform; }
.quote { flex: 0 0 min(22rem,80vw); padding: 1.35rem 1.5rem; border-radius: var(--r); background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); display: grid; gap: .65rem; align-content: start; }
.quote__stars { display: flex; gap: 2px; color: var(--orange); }
.quote__stars svg { width: 14px; height: 14px; }
.quote p { font-size: .87rem; line-height: 1.55; color: #d3d8e4; }
.quote cite { font-style: normal; font-size: .77rem; font-weight: 700; color: #868e9f; }

/* =========================================================================
   PRICES
   ========================================================================= */

.tabs { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.6rem; }
.tab { padding: .66rem 1.15rem; border-radius: 99px; font-size: .87rem; font-weight: 700; border: 2px solid var(--mist-deep); transition: background-color .25s, border-color .25s, color .25s, transform .3s var(--ease); }
.tab[aria-selected="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.tab:hover:not([aria-selected="true"]) { border-color: var(--steel); transform: translateY(-2px); }

.price-table { display: grid; }
.price-row { display: grid; grid-template-columns: 1fr auto; gap: .32rem 1.5rem; align-items: baseline; padding-block: 1.05rem; border-bottom: 1px solid var(--mist-deep); opacity: 0; transform: translate3d(0,12px,0); animation: row-in .5s var(--soft) both; }
@keyframes row-in { to { opacity: 1; transform: none; } }
@media (min-width: 40rem) { .price-row { grid-template-columns: 1.4fr 1fr auto; } }
.price-row__name { font-weight: 700; letter-spacing: -0.015em; }
.price-row__note { font-size: var(--t-sm); color: #6b7183; grid-column: 1 / -1; }
@media (min-width: 40rem) { .price-row__note { grid-column: 2; } }
.price-row__amt { font-family: var(--display); font-weight: 800; font-size: 1.26rem; letter-spacing: -0.04em; white-space: nowrap; }
.price-row__amt small { font-family: var(--text); font-size: .66rem; font-weight: 700; color: #9aa2b4; letter-spacing: .04em; margin-right: .3rem; }
.price-note { margin-top: 1.5rem; font-size: var(--t-sm); color: #6b7183; max-width: 62ch; }

/* =========================================================================
   HONEST — what we do and don't
   ========================================================================= */

.honest { display: grid; gap: 1.25rem; }
@media (min-width: 52rem) { .honest { grid-template-columns: 1fr 1fr; gap: 2.5rem; } }
.honest__col { display: grid; gap: .1rem; align-content: start; }
.honest__head { display: flex; align-items: center; gap: .6rem; margin-bottom: .9rem; font-family: var(--display); font-weight: 800; font-size: 1.05rem; text-transform: uppercase; letter-spacing: -0.025em; }
.honest__head svg { width: 20px; height: 20px; }
.honest__col--yes .honest__head svg { color: var(--open); }
.honest__col--no  .honest__head svg { color: var(--closed); }
.honest__row { display: grid; grid-template-columns: auto 1fr; gap: .75rem; padding-block: .8rem; border-bottom: 1px solid var(--navy-line); font-size: var(--t-sm); line-height: 1.5; color: #b3bacc; }
.honest__row:last-child { border-bottom: 0; }
.honest__row svg { width: 16px; height: 16px; margin-top: .25rem; flex: none; }
.honest__col--yes .honest__row svg { color: var(--open); }
.honest__col--no  .honest__row svg { color: var(--closed); }
.honest__row b { color: #fff; font-weight: 700; }

/* =========================================================================
   STORY
   ========================================================================= */

.story { display: grid; gap: clamp(2.25rem,1.5rem + 3vw,4.5rem); align-items: center; }
@media (min-width: 60rem) { .story { grid-template-columns: .92fr 1.08fr; } }
.story__frame { position: relative; border-radius: var(--r-lg); overflow: hidden; background: var(--ink); }
.story__frame img { width: 100%; will-change: transform; }
.story__crest { position: absolute; inset-block-end: -1.4rem; inset-inline-end: -.9rem; width: clamp(84px,13vw,126px); z-index: 2; filter: drop-shadow(0 16px 26px rgba(0,0,0,.6)); animation: bob 8s ease-in-out infinite; }
.story__body p + p { margin-top: 1rem; }
.signature { margin-top: 1.6rem; display: flex; align-items: center; gap: .85rem; font-size: var(--t-sm); }
.signature__mark { width: 5px; height: 42px; background: var(--orange); border-radius: 99px; flex: none; }
.signature b { display: block; letter-spacing: -0.015em; }
.signature span { color: #6b7183; }

/* =========================================================================
   STORES
   ========================================================================= */

.store { display: grid; gap: 1.75rem; padding-block: clamp(2.25rem,1.5rem + 3vw,3.5rem); border-top: 1px solid var(--mist-deep); }
@media (min-width: 62rem) { .store { grid-template-columns: .85fr 1fr .9fr; gap: 3rem; align-items: start; } }
.store:last-child { border-bottom: 1px solid var(--mist-deep); }
.store__id { display: grid; gap: .75rem; align-content: start; }
.store__id h3 { font-family: var(--display); font-weight: 800; font-stretch: 110%; font-size: clamp(2.1rem,1.6rem + 2.6vw,3.3rem); text-transform: uppercase; letter-spacing: -0.05em; }
.store__id address { font-style: normal; color: #5c6376; font-size: var(--t-sm); line-height: 1.55; }
.badge { display: inline-flex; align-items: center; gap: .45rem; font-size: .71rem; font-weight: 800; letter-spacing: .04em; padding: .36rem .72rem; border-radius: 99px; background: var(--paper); color: var(--navy); width: fit-content; }
.hours { display: grid; font-size: var(--t-sm); }
.hours__row { display: grid; grid-template-columns: 1fr auto; padding-block: .4rem; border-bottom: 1px solid var(--mist-deep); }
.hours__row:last-child { border-bottom: 0; }
.hours__row.is-today { font-weight: 800; color: var(--navy); }
.hours__row span:last-child { font-variant-numeric: tabular-nums; }
.hours__row--shut span:last-child { color: #99a0b0; }
.store__aside { display: grid; gap: 1rem; align-content: start; }
.store__tip { font-size: var(--t-sm); color: #5c6376; line-height: 1.55; }
.store__tip b { color: var(--navy); }
.store__links { display: flex; flex-wrap: wrap; gap: .5rem; }
.store__links a { font-size: .83rem; font-weight: 700; padding: .56rem 1rem; border-radius: 99px; border: 2px solid var(--mist-deep); background: var(--paper); transition: border-color .25s, background-color .25s, color .25s, transform .3s var(--ease); }
.store__links a:hover { border-color: var(--navy); background: var(--navy); color: #fff; transform: translateY(-2px); }

/* =========================================================================
   FAQ
   ========================================================================= */

.faq { display: grid; max-width: 54rem; }
.qa { border-bottom: 1px solid var(--mist-deep); }
.qa:first-child { border-top: 1px solid var(--mist-deep); }
.qa__q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-block: 1.3rem; text-align: left; font-weight: 700; font-size: var(--t-md); letter-spacing: -0.02em; list-style: none; cursor: pointer; }
.qa__q::-webkit-details-marker { display: none; }
.qa__q svg { width: 20px; height: 20px; flex: none; color: var(--orange); transition: transform .4s var(--ease); }
.qa[open] .qa__q svg { transform: rotate(45deg); }
.qa__a { overflow: hidden; display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ease); }
.qa[open] .qa__a { grid-template-rows: 1fr; }
.qa__a > div { min-height: 0; }
.qa__a p { font-size: var(--t-sm); line-height: 1.65; color: #545b6d; max-width: 64ch; padding-bottom: 1.35rem; }

/* =========================================================================
   WIZARD
   ========================================================================= */

.wizard-sect { background: var(--ink); color: #fff; position: relative; overflow: hidden; }
.wizard-sect::before { content: ""; position: absolute; inset-block-start: -26%; inset-inline-start: 50%; width: 64rem; height: 64rem; translate: -50% 0; background: radial-gradient(circle, rgba(245,130,31,.12) 0%, transparent 62%); pointer-events: none; }

.wizard { position: relative; display: grid; gap: 1.1rem; }
@media (min-width: 64rem) { .wizard { grid-template-columns: 1.55fr .95fr; gap: 1.4rem; align-items: start; } }
.wizard__main { background: var(--navy-soft); border: 1px solid var(--navy-line); border-radius: var(--r-lg); padding: clamp(1.35rem,1rem + 2vw,2.3rem); min-height: 31rem; display: grid; grid-template-rows: auto 1fr auto; gap: 1.5rem; }

.wz-progress { display: grid; gap: .75rem; position: relative; }
.wz-bar { height: 4px; border-radius: 99px; background: rgba(255,255,255,.09); position: relative; }
.wz-bar i { display: block; height: 100%; width: 25%; background: linear-gradient(90deg,var(--ember),var(--orange-lit)); border-radius: 99px; transition: width .55s var(--soft); }
.wz-bar img { position: absolute; inset-block-start: 50%; width: 30px; translate: -50% -50%; left: 25%; transition: left .55s var(--soft); filter: drop-shadow(0 4px 10px rgba(0,0,0,.6)); }
.wz-steps { display: flex; flex-wrap: wrap; gap: .3rem 1.15rem; font-size: .75rem; font-weight: 700; color: #9aa3b6; margin-top: .55rem; }
.wz-steps span { display: flex; align-items: center; gap: .4rem; transition: color .3s; }
.wz-steps span::before { content: ""; width: 6px; height: 6px; border-radius: 99px; background: currentColor; opacity: .5; }
.wz-steps span.is-now { color: var(--orange-lit); }
.wz-steps span.is-done { color: #a4acbe; }

.wz-pane { display: none; }
.wz-pane.is-now { display: grid; gap: 1.1rem; align-content: start; }
.wz-pane.is-enter > * { animation: wz-in .5s var(--soft) both; }
.wz-pane.is-enter > *:nth-child(2) { animation-delay: .06s; }
.wz-pane.is-enter > *:nth-child(3) { animation-delay: .12s; }
.wz-pane.is-enter > *:nth-child(4) { animation-delay: .18s; }
@keyframes wz-in { from { opacity: 0; transform: translate3d(0,18px,0); } to { opacity: 1; transform: none; } }

.wz-q { font-family: var(--display); font-weight: 800; font-stretch: 106%; font-size: var(--t-xl); text-transform: uppercase; letter-spacing: -0.035em; }
.wz-hint { font-size: var(--t-sm); color: #9199ad; max-width: 52ch; margin-top: .32rem; }

.wz-tiles { display: grid; grid-template-columns: repeat(auto-fit,minmax(8.5rem,1fr)); gap: .6rem; }
.wz-tile { display: grid; gap: .45rem; justify-items: start; text-align: left; padding: 1rem 1.05rem; border-radius: var(--r); border: 1.5px solid var(--navy-line); background: rgba(255,255,255,.02); transition: border-color .25s, background-color .25s, transform .35s var(--ease); }
.wz-tile:hover { border-color: #545d75; transform: translateY(-3px); }
.wz-tile[aria-pressed="true"] { border-color: var(--orange); background: rgba(245,130,31,.12); }
.wz-tile svg { width: 24px; height: 24px; color: var(--orange); }
.wz-tile b { font-size: .92rem; font-weight: 700; letter-spacing: -0.015em; }
.wz-tile em { font-style: normal; font-size: .73rem; color: #8a92a6; }

.wz-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.wz-chip { display: inline-flex; align-items: center; gap: .5rem; padding: .66rem .95rem; border-radius: 99px; border: 1.5px solid var(--navy-line); font-size: .86rem; font-weight: 700; transition: border-color .25s, background-color .25s, color .25s, transform .3s var(--ease); }
.wz-chip:hover { border-color: #545d75; transform: translateY(-2px); }
.wz-chip[aria-pressed="true"] { border-color: var(--orange); background: var(--orange); color: #fff; }
.wz-chip svg { width: 16px; height: 16px; }
.wz-chip i { font-style: normal; font-size: .75rem; font-weight: 700; opacity: .7; }

.wz-stores { display: grid; gap: .6rem; }
@media (min-width: 34rem) { .wz-stores { grid-template-columns: 1fr 1fr; } }
.wz-store { display: grid; gap: .38rem; justify-items: start; text-align: left; padding: 1.1rem; border-radius: var(--r); border: 1.5px solid var(--navy-line); background: rgba(255,255,255,.02); transition: border-color .25s, background-color .25s, transform .35s var(--ease); }
.wz-store:hover { border-color: #545d75; transform: translateY(-3px); }
.wz-store[aria-pressed="true"] { border-color: var(--orange); background: rgba(245,130,31,.12); }
.wz-store b { font-family: var(--display); font-weight: 800; font-size: 1.08rem; text-transform: uppercase; letter-spacing: -0.035em; }
.wz-store em { font-style: normal; font-size: .78rem; color: #9199ad; }
.wz-store__state { display: flex; align-items: center; gap: .4rem; font-size: .76rem; font-weight: 700; }

.wz-fields { display: grid; gap: .8rem; }
@media (min-width: 34rem) { .wz-fields--2 { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: .32rem; }
.field label { font-size: .78rem; font-weight: 700; color: #a4acbe; }
.field input, .field select, .field textarea { font: inherit; font-size: .93rem; color: #fff; width: 100%; background: rgba(255,255,255,.05); border: 1.5px solid var(--navy-line); border-radius: var(--r); padding: .8rem .95rem; transition: border-color .25s, background-color .25s; }
.field textarea { resize: vertical; min-height: 5.5rem; }
.field input::placeholder, .field textarea::placeholder { color: #9aa3b6; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--orange); background: rgba(255,255,255,.08); }
.field select { appearance: none; cursor: pointer; }
.field select option { background: var(--navy); color: #fff; }
.field__err { font-size: .76rem; color: #ff9d8a; display: none; }
.field.is-bad input, .field.is-bad select { border-color: var(--closed); }
.field.is-bad .field__err { display: block; }

.wz-check { display: grid; grid-template-columns: auto 1fr; gap: .65rem; align-items: start; font-size: .8rem; color: #9199ad; line-height: 1.5; }
.wz-check input { width: 18px; height: 18px; margin-top: .15rem; accent-color: var(--orange); }

.wz-nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 1.1rem; border-top: 1px solid var(--navy-line); }
.wz-back { font-size: .88rem; font-weight: 700; color: #9199ad; display: inline-flex; align-items: center; gap: .4rem; transition: color .25s; }
.wz-back:hover { color: #fff; }
.wz-back svg { width: 15px; height: 15px; }
.wz-back.is-hidden { visibility: hidden; }

.wizard__side { background: var(--ink-deep); border: 1px solid var(--navy-line); border-radius: var(--r-lg); padding: clamp(1.35rem,1rem + 1.5vw,1.85rem); display: grid; gap: 1.1rem; align-content: start; }
@media (min-width: 64rem) { .wizard__side { position: sticky; top: calc(var(--bar) + 1.5rem); } }
.wz-sum__title { font-family: var(--display); font-weight: 800; font-size: 1rem; text-transform: uppercase; letter-spacing: -0.03em; }
.wz-sum__list { display: grid; font-size: .83rem; }
.wz-sum__row { display: grid; grid-template-columns: auto 1fr; gap: .9rem; padding-block: .55rem; border-bottom: 1px solid #1f232d; }
.wz-sum__row:last-child { border-bottom: 0; }
.wz-sum__k { color: #9aa3b6; font-weight: 700; }
.wz-sum__v { color: #fff; font-weight: 600; text-align: right; }
.wz-sum__v.is-empty { color: #454c5e; font-weight: 400; }
.wz-quote { padding: 1.1rem; border-radius: var(--r); background: rgba(245,130,31,.1); border: 1px solid rgba(245,130,31,.28); display: grid; gap: .22rem; }
.wz-quote small { font-size: .71rem; font-weight: 800; letter-spacing: .07em; color: var(--orange-lit); }
.wz-quote b { font-family: var(--display); font-weight: 800; font-size: clamp(1.65rem,1.35rem + 1.5vw,2.2rem); letter-spacing: -0.045em; line-height: 1; }
.wz-quote span { font-size: .74rem; color: #9199ad; line-height: 1.45; }
.wz-side__note { font-size: .76rem; color: #9aa3b6; line-height: 1.5; }

.wz-done { display: none; place-items: center; text-align: center; gap: .85rem; padding: 2.5rem 1rem; }
.wz-done.is-now { display: grid; }
.wz-done__mark { width: 72px; height: 72px; border-radius: 99px; background: rgba(53,192,122,.14); border: 2px solid var(--open); display: grid; place-items: center; color: var(--open); }
.wz-done__mark svg { width: 32px; height: 32px; }
.wz-done__mark path { stroke-dasharray: 40; stroke-dashoffset: 40; animation: tick .6s var(--ease) .15s forwards; }
@keyframes tick { to { stroke-dashoffset: 0; } }
.wz-done h3 { font-family: var(--display); font-weight: 800; font-size: var(--t-xl); text-transform: uppercase; letter-spacing: -0.035em; }
.wz-done p { font-size: var(--t-sm); color: #9199ad; max-width: 44ch; }
.wz-ref { font-family: var(--display); font-weight: 800; font-size: 1.32rem; letter-spacing: .05em; color: var(--orange); padding: .52rem 1.1rem; border-radius: 99px; background: rgba(245,130,31,.12); }

/* =========================================================================
   CLOSING BAND
   ========================================================================= */

.band { position: relative; background: var(--orange); color: var(--ink); padding-block: clamp(4rem,3rem + 5vw,7rem); overflow: hidden; }
.band h2 { font-family: var(--display); font-weight: 800; font-stretch: 112%; font-size: var(--t-2xl); text-transform: uppercase; letter-spacing: -0.05em; max-width: 17ch; }
.band p { margin-top: 1rem; max-width: 48ch; font-size: var(--t-md); }
.band__cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.band .btn--primary { background: var(--ink); color: #fff; box-shadow: none; }
.band .btn--primary::before { background: var(--navy); }
.band .btn--ink { border-color: var(--ink); color: var(--ink); }
.band .btn--ink:hover { background: var(--ink); color: #fff; }
.band__crest { position: absolute; inset-block-start: 50%; inset-inline-end: -3%; translate: 0 -50%; width: min(25rem,38vw); opacity: .2; pointer-events: none; animation: bob 10s ease-in-out infinite; }
@media (max-width: 60rem) { .band__crest { display: none; } }

/* =========================================================================
   FOOTER
   ========================================================================= */

.foot { background: var(--ink); color: #949cae; padding-block: clamp(3.5rem,2.5rem + 3vw,5rem) 0; font-size: var(--t-sm); position: relative; overflow: hidden; }
.foot__grid { display: grid; gap: 2.5rem; position: relative; z-index: 2; }
@media (min-width: 56rem) { .foot__grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 2rem; } }
.foot h4 { font-family: var(--display); font-weight: 800; font-size: .91rem; text-transform: uppercase; color: #fff; margin-bottom: .9rem; letter-spacing: -0.025em; }
.foot a:hover { color: var(--orange); }
.foot li + li { margin-top: .42rem; }
.foot__lead { max-width: 34ch; }
.foot__crest { width: 60px; margin-bottom: 1rem; animation: bob 9s ease-in-out infinite; }
.socials { display: flex; gap: .5rem; margin-top: 1.1rem; }
.socials a { width: 40px; height: 40px; border-radius: 99px; display: grid; place-items: center; border: 1px solid #262b36; transition: background-color .25s, border-color .25s, color .25s, transform .3s var(--ease); }
.socials a:hover { background: var(--orange); border-color: var(--orange); color: #fff; transform: translateY(-3px); }
.socials svg { width: 17px; height: 17px; }
.foot__base { margin-top: 2.75rem; padding-top: 1.35rem; border-top: 1px solid #1e222c; display: flex; flex-wrap: wrap; gap: .7rem 1.5rem; justify-content: space-between; font-size: .78rem; position: relative; z-index: 2; }
.foot__mark {
  display: block; width: 100%; margin-top: 1.25rem; margin-bottom: -.14em;
  font-family: var(--display); font-weight: 800; font-stretch: 125%;
  font-size: clamp(3.2rem,13vw,12.6rem); line-height: .78; letter-spacing: -0.06em; text-transform: uppercase;
  color: transparent; background: linear-gradient(180deg,#1f2430 0%,rgba(18,20,28,0) 86%);
  -webkit-background-clip: text; background-clip: text;
  text-align: center; white-space: nowrap; user-select: none; pointer-events: none;
}

/* =========================================================================
   SWOOSH
   ========================================================================= */

.swoosh { display: block; width: 100%; height: clamp(54px,7vw,112px); position: relative; z-index: 2; margin-block: -1px; }

/* =========================================================================
   MOTION
   ========================================================================= */

[data-reveal] { opacity: 0; transform: translate3d(0,28px,0); }
.is-in[data-reveal] { opacity: 1; transform: none; transition: opacity .7s var(--ease), transform .95s var(--soft); }
.is-in[data-reveal="2"] { transition-delay: .08s; }
.is-in[data-reveal="3"] { transition-delay: .16s; }
.is-in[data-reveal="4"] { transition-delay: .24s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  [data-reveal] { opacity: 1; transform: none; }
  .fx__line > span { opacity: 1; transform: none; }
}


/* =========================================================================
   THE FORM IN THE HERO
   It used to live in its own section halfway down the page. Here it sits
   beside the headline, so the first thing on screen is the thing we want
   people to do. One column, because the hero's half is narrower than a
   full-width section.
   ========================================================================= */

.hero__form { position: relative; z-index: 2; }
.hero__form .wizard { grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 64rem) { .hero__form .wizard { grid-template-columns: 1fr; } }
.hero__form .wizard__main { min-height: 0; padding: clamp(1.1rem,.85rem + 1vw,1.45rem); gap: 1.1rem; }
.hero__form .wizard__side { position: static; }
.hero__form .wz-side__note { display: none; }

/* the cogwheel rides the track where the shield used to */
.track__cog {
  position: absolute; inset-block-start: 50%; inset-inline-start: 0;
  width: 46px; height: 46px; translate: -50% -50%; z-index: 3;
}
@media (max-width: 52rem) { .track__cog { display: none; } }

/* the small crest inside the form's progress bar */
#wzCrest { width: 30px; height: auto; }


/* the hero's own trim: the summary panel repeats what the form already shows,
   so in here only the running price stays */
.hero__form .wz-sum__title,
.hero__form .wz-sum__list { display: none; }
.hero__form .wizard__side {
  background: none; border: 0; padding: 0;
}
.hero__form .wz-quote { margin: 0; }
.hero .lede { margin-bottom: 1rem; max-width: 34rem; }
.hero .today { margin-bottom: 0; }


/* the line that hands you on to the next thing */
.next-step { margin-top: 2rem; }
.next-step a {
  display: inline-flex; align-items: baseline; gap: .55rem;
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.05rem, .95rem + .4vw, 1.35rem);
  color: var(--orange); border-bottom: 2px solid transparent;
  transition: border-color .18s ease;
}
.next-step a::after { content: "→"; }
.next-step a:hover { border-bottom-color: var(--orange); }


/* =========================================================================
   THE HERO, CENTRED

   One column down the middle: the headline, one line of explanation, three
   ways on, and then the form — which is not a panel sitting next to a title
   any more. It carries the same centre line, so the whole thing reads as a
   single block instead of two things side by side.
   ========================================================================= */

.hero__box { text-align: center; display: grid; justify-items: center; gap: 1.15rem; }

/* the title scales with the screen and never outgrows its measure */
.hero h1 {
  font-size: clamp(2.1rem, 1.1rem + 4.4vw, 5.25rem);
  line-height: .88; letter-spacing: -.04em;
  max-width: 16ch; margin: 0;
}
.hero .lede { max-width: 46ch; margin: 0; }
.hero__links { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; }

/* the form shares the hero's surface — no card, no border, no second colour */
.hero__form { width: 100%; max-width: 54rem; margin-top: 1.5rem; }
.hero__form .wizard { grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 64rem) { .hero__form .wizard { grid-template-columns: 1fr; } }
.hero__form .wizard__main {
  background: none; border: 0; border-radius: 0; padding: 0;
  min-height: 0; gap: 1.1rem;

}
.hero__form .wizard__side { background: none; border: 0; padding: 0; position: static; }
.hero__form .wz-sum__title, .hero__form .wz-sum__list, .hero__form .wz-side__note { display: none; }
.hero__form .wz-quote { margin: 0; }

/* inside the hero the form keeps the centre line until the answers start */
.hero__form .wz-q, .hero__form .wz-hint, .hero__form .wz-steps { text-align: center; }
.hero__form .wz-tiles, .hero__form .wz-chips, .hero__form .wz-stores { justify-content: center; }
.hero__form .wz-foot { justify-content: center; }
.hero__form .field { text-align: left; }

@media (max-width: 40rem) {
  .hero__form .wizard__main { padding-top: 1.15rem; }
}

/* =========================================================================
   THE GEAR ON THE TRACK
   It sits on the line, not above it. The JS writes the whole transform, so
   nothing here may add a second offset — that was what knocked it out of
   place before.
   ========================================================================= */

.track__cog {
  position: absolute; inset-block-start: 50%; inset-inline-start: 0;
  width: 44px; height: 44px; z-index: 3;
  translate: none;
}
@media (max-width: 52rem) { .track__cog { display: none; } }

/* the swoosh hangs below the menu row, so the artwork is taller than the bar */
.masthead__bg { height: var(--arc-h); }
.masthead.is-stuck .masthead__bg { height: 130px; opacity: 1; }


/* =========================================================================
   THE STEPPER
   Four numbered steps with the shield's cogwheel riding the bar between
   them. The numbers are the structure — there is no dot, no pill.
   ========================================================================= */

.wz-progress { padding-top: .25rem; }

.wz-cog {
  position: absolute; inset-block-start: 50%; left: 25%;
  width: 34px; height: 34px; translate: -50% -50%;
  transition: left .55s var(--soft), rotate .55s var(--soft);
  z-index: 2;
}

.wz-steps { counter-reset: stap; gap: .4rem 1.6rem; font-size: .82rem; }
.wz-steps span { gap: .45rem; }
.wz-steps span::before {
  counter-increment: stap;
  content: counter(stap);
  width: auto; height: auto; border-radius: 0; background: none; opacity: 1;
  font-family: var(--display); font-weight: 800; font-size: 1.05rem;
  line-height: 1; color: inherit;
}
.wz-steps span.is-now::before { color: var(--orange-lit); }
.wz-steps span.is-done::before { content: "✓"; font-size: .9rem; }


/* =========================================================================
   THE FORM — CLEAN
   ========================================================================= */

/* --- the four steps, as a row of numbered headings --- */
.hero__form .wz-progress { display: block; padding: 0 0 1.35rem; }
.hero__form .wz-bar { display: none; }

.hero__form .wz-steps {
  counter-reset: stap;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 0; margin: 0; font-size: .8rem; font-weight: 600;
}
.hero__form .wz-steps span {
  display: grid; gap: .3rem; justify-items: center; text-align: center;
  padding-top: .85rem; border-top: 2px solid rgba(255,255,255,.12);
  color: #8e97aa; transition: color .3s var(--ease), border-color .3s var(--ease);
}
.hero__form .wz-steps span::before {
  counter-increment: stap; content: counter(stap);
  font-family: var(--display); font-weight: 800; font-size: .95rem; line-height: 1;
  width: auto; height: auto; background: none; border-radius: 0; opacity: 1; color: inherit;
}
.hero__form .wz-steps span.is-done { color: #aeb6c6; border-top-color: rgba(255,255,255,.3); }
.hero__form .wz-steps span.is-done::before { content: "✓"; }
.hero__form .wz-steps span.is-now { color: #fff; border-top-color: var(--orange); }
.hero__form .wz-steps span.is-now::before { color: var(--orange); }

/* --- the question --- */
.hero__form .wz-q {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(1.35rem, 1.1rem + 1vw, 2rem); line-height: 1;
  letter-spacing: -.025em; color: #fff; margin: 0 0 .4rem;
}
.hero__form .wz-hint { font-size: .92rem; color: #9aa3b6; margin: 0; }

/* --- the answers: ruled rows, marked by the orange edge --- */
.hero__form .wz-tiles,
.hero__form .wz-chips,
.hero__form .wz-stores {
  display: grid; gap: 0; margin-top: 1.25rem;
  border-top: 1px solid rgba(255,255,255,.1);
  justify-content: stretch;
}
@media (min-width: 40rem) {
  .hero__form .wz-tiles { grid-template-columns: repeat(2, minmax(0,1fr)); column-gap: 1.75rem; }
  /* the two shops stand next to each other, not stacked */
  .hero__form .wz-stores { grid-template-columns: repeat(2, minmax(0,1fr)); column-gap: 1.75rem; }
}

.hero__form .wz-opt {
  display: grid; gap: .1rem; justify-items: start; text-align: left; width: 100%;
  padding: .85rem 1rem .85rem .9rem;
  border: 0; border-bottom: 1px solid rgba(255,255,255,.1);
  border-left: 3px solid transparent; background: none; border-radius: 0;
  transition: border-color .18s var(--ease), background-color .18s var(--ease);
}
.hero__form .wz-opt:hover { background: rgba(255,255,255,.04); }
.hero__form .wz-opt b { font-size: 1.02rem; font-weight: 600; color: #fff; }
.hero__form .wz-opt em { font-style: normal; font-size: .82rem; color: #9aa3b6; }
.hero__form .wz-opt[aria-pressed="true"] { border-left-color: var(--orange); background: rgba(255,255,255,.05); }
.hero__form .wz-opt[aria-pressed="true"] em { color: var(--orange-lit); }

/* --- fields on one underline --- */
.hero__form .field { display: grid; gap: .35rem; margin-top: 1.25rem; text-align: left; }
.hero__form .field label { font-size: .82rem; font-weight: 600; color: #9aa3b6; }
.hero__form .field input,
.hero__form .field select,
.hero__form .field textarea {
  width: 100%; padding: .7rem 0; background: none; color: #fff;
  border: 0; border-bottom: 1px solid rgba(255,255,255,.18); border-radius: 0;
  transition: border-color .18s var(--ease);
}
.hero__form .field input:focus,
.hero__form .field select:focus,
.hero__form .field textarea:focus { outline: none; border-bottom-color: var(--orange); }
.hero__form .field select option { background: #1e2230; }

/* --- the footer --- */
.hero__form .wz-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid rgba(255,255,255,.1);
}

/* --- the price waits until there is something to price --- */
.hero__form .wizard__side { display: none; }
.hero__form .wizard:has(.wz-pane[data-pane="2"].is-now) .wizard__side,
.hero__form .wizard:has(.wz-pane[data-pane="3"].is-now) .wizard__side,
.hero__form .wizard:has(.wz-done.is-now) .wizard__side { display: block; }

.hero__form .wz-quote {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1.25rem;
  padding-top: 1.1rem; border-top: 1px solid rgba(255,255,255,.1); text-align: left;
}
.hero__form .wz-quote small {
  font-family: var(--text); font-size: .78rem; font-weight: 600;
  letter-spacing: 0; text-transform: none; color: #9aa3b6;
}
.hero__form .wz-quote b {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.2rem); line-height: 1; color: #fff;
}
.hero__form .wz-quote span { font-size: .82rem; color: #9aa3b6; flex-basis: 100%; }


/* =========================================================================
   LIGHT SECTIONS
   The muted greys were raised for the navy sections, which left them too
   pale on white. On a light band they go the other way.
   ========================================================================= */

.section:not(.section--dark):not(.section--ink) .sym em,
.section:not(.section--dark):not(.section--ink) .fix__price small,
.section:not(.section--dark):not(.section--ink) .fix__time,
.section:not(.section--dark):not(.section--ink) .price-row__amt small,
.section:not(.section--dark):not(.section--ink) .price-row__note,
.section:not(.section--dark):not(.section--ink) .hours__row span,
.section:not(.section--dark):not(.section--ink) .store__tip,
.section:not(.section--dark):not(.section--ink) .quote cite { color: #5d6473; }

/* the orange only carries on the dark; on white it needs to come down */
.section:not(.section--dark):not(.section--ink) .next-step a { color: #b45f11; }
.section:not(.section--dark):not(.section--ink) .next-step a:hover { border-bottom-color: #b45f11; }


/* =========================================================================
   THE HERO FORM AS ONE CONTAINER
   ========================================================================= */

/* the swoosh hangs 170px down while the bar is only 88px, so the hero has to
   start below the artwork — not below the bar — or the menu lands on the
   headline */
.hero { padding-block: calc(var(--arc-h) + 2.25rem) 3rem !important; }


.hero__form { max-width: 47rem; margin-top: 1.25rem; }

.hero__form .wizard__main {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 20px;
  backdrop-filter: blur(14px) saturate(140%);
  padding: 1.1rem 1.25rem 1.15rem;
  display: block;
}

/* the step row, small and out of the way */
.hero__form .wz-progress { padding: 0 0 .9rem; margin-bottom: .9rem; border-bottom: 1px solid rgba(255,255,255,.1); }
.hero__form .wz-steps { font-size: .72rem; }
.hero__form .wz-steps span { padding-top: .5rem; border-top-width: 2px; gap: .2rem; }
.hero__form .wz-steps span::before { font-size: .82rem; }

/* one working height, so the hero never jumps between steps */
.hero__form .wz-panes { position: relative; }
.hero__form .wz-pane { display: none; }
.hero__form .wz-pane.is-now { display: block; }

.hero__form .wz-q { font-size: 1.15rem; margin-bottom: .2rem; }
.hero__form .wz-hint { font-size: .82rem; }

/* the answers sit side by side instead of stacking */
.hero__form .wz-tiles,
.hero__form .wz-chips,
.hero__form .wz-stores {
  display: grid; margin-top: .85rem; border-top: 0;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  gap: .4rem;
}
.hero__form .wz-stores { grid-template-columns: repeat(2, minmax(0,1fr)); }

.hero__form .wz-opt {
  padding: .5rem .6rem .5rem .7rem;
  border: 1px solid rgba(255,255,255,.12);
  border-left-width: 3px; border-left-color: transparent;
  border-radius: 10px;
  gap: 0;
}
.hero__form .wz-opt b { font-size: .92rem; }
.hero__form .wz-opt em { font-size: .72rem; }
.hero__form .wz-opt[aria-pressed="true"] { border-color: rgba(255,255,255,.2); border-left-color: var(--orange); }

/* fields two across, underline only */
.hero__form .wz-pane[data-pane="3"] > div:last-child,
.hero__form .wz-fields { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .25rem .9rem; }
.hero__form .field { margin-top: .7rem; }
.hero__form .field label { font-size: .74rem; }
.hero__form .field input,
.hero__form .field select,
.hero__form .field textarea { padding: .5rem 0; font-size: .92rem; }
.hero__form .field textarea { min-height: 3rem; }

/* the footer tucks under the container's own line */
.hero__form .wz-foot { margin-top: .9rem; padding-top: .85rem; }
.hero__form .wz-foot .btn { padding: .55rem 1rem; font-size: .88rem; }

/* the price, once it is allowed to show, is one quiet line under the box */
.hero__form .wz-quote { padding: .85rem 0 0; margin-top: .85rem; border-top: 0; }
.hero__form .wz-quote b { font-size: 1.5rem; }
.hero__form .wz-quote small { font-size: .74rem; }
.hero__form .wz-quote span { font-size: .76rem; }

@media (max-width: 40rem) {
  
  .hero__form .wz-tiles,
  .hero__form .wz-chips { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .hero__form .wz-stores { grid-template-columns: 1fr; }
  .hero__form .wz-pane[data-pane="3"] > div:last-child,
  .hero__form .wz-fields { grid-template-columns: 1fr; }
}


/* the tallest step is 302px, so the container holds that and nothing shifts */



/* the shield always hangs over the artwork, collapsed bar included */
.crest { z-index: 5; }
.crest__img { position: relative; }
.masthead.is-stuck .crest { width: clamp(56px,5vw,74px); translate: 0 24%; }


/* =========================================================================
   THE FORM'S CHOICES, WITH THEIR MARKS BACK
   ========================================================================= */

.hero__form .wz-opt {
  display: grid; grid-template-columns: auto minmax(0,1fr);
  align-items: center; gap: .55rem;
  padding: .55rem .65rem .55rem .7rem;
}
.hero__form .wz-opt > span { display: grid; gap: .05rem; min-width: 0; }
.hero__form .wz-opt svg {
  width: 17px; height: 17px; flex: none;
  color: #9aa3b6; transition: color .18s var(--ease);
}
.hero__form .wz-opt[aria-pressed="true"] svg { color: var(--orange); }
.hero__form .wz-opt b { line-height: 1.2; }
.hero__form .wz-opt em { line-height: 1.2; }

/* --- where you are, in words --- */
.hero__form .wz-count {
  margin: 0 0 .55rem; font-size: .75rem; font-weight: 600;
  letter-spacing: .01em; color: #9aa3b6;
}
.hero__form .wz-count b {
  font-family: var(--display); font-weight: 800; font-size: 1rem;
  color: var(--orange); margin-right: .15rem;
}


/* =========================================================================
   THE FULL-SCREEN MENU            (reactbits: staggered-menu)
   A sheet slides down in three layers, then the items arrive one by one.
   ========================================================================= */



.screen {
  position: fixed; inset: 0; z-index: 120;
  visibility: hidden; pointer-events: none;
}
.screen.is-open { visibility: visible; pointer-events: auto; }

.screen__sheet { position: absolute; inset: 0; }
.screen__sheet i {
  position: absolute; inset: 0; display: block;
  transform: translateY(-100%);
  transition: transform .5s cubic-bezier(.76,0,.24,1);
}
.screen__sheet i:nth-child(1) { background: var(--orange); }
.screen__sheet i:nth-child(2) { background: #c9cdd2; transition-delay: .06s; }
.screen__sheet i:nth-child(3) { background: #171b27; transition-delay: .12s; }
.screen.is-open .screen__sheet i { transform: translateY(0); }

.screen__in {
  position: relative; height: 100%; overflow-y: auto;
  display: grid; align-content: center; gap: 2rem;
  padding: calc(var(--bar) + 2rem) var(--gutter) 2rem;
  max-width: var(--shell); margin-inline: auto;
}

.screen__list { list-style: none; margin: 0; padding: 0; display: grid; }
.screen__list li { border-bottom: 1px solid rgba(255,255,255,.12); }
.screen__list a {
  display: grid; grid-template-columns: auto 1fr; align-items: baseline;
  gap: .3rem 1rem; padding: clamp(.7rem,1.4vw,1.15rem) 0;
  opacity: 0; transform: translateY(24px);
}
.screen.is-open .screen__list a {
  animation: menuIn .5s var(--ease) both;
}
@keyframes menuIn {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}
.screen.is-open .screen__list li:nth-child(1) a { animation-delay: .26s; }
.screen.is-open .screen__list li:nth-child(2) a { animation-delay: .32s; }
.screen.is-open .screen__list li:nth-child(3) a { animation-delay: .38s; }
.screen.is-open .screen__list li:nth-child(4) a { animation-delay: .44s; }
.screen.is-open .screen__list li:nth-child(5) a { animation-delay: .50s; }
.screen.is-open .screen__list li:nth-child(6) a { animation-delay: .56s; }

.screen__no {
  font-family: var(--display); font-weight: 800; font-size: .85rem;
  color: var(--orange); letter-spacing: .04em;
}
.screen__lbl {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(1.9rem, 1rem + 4vw, 4rem); line-height: .95;
  letter-spacing: -.03em; color: #fff;
}
.screen__list em {
  grid-column: 2; font-style: normal; font-size: .88rem; color: #9aa3b6;
}
.screen__list a:hover .screen__lbl { color: var(--orange-lit); }

.screen__foot { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 2rem; font-size: .9rem; color: #9aa3b6; }
.screen__foot b { color: #fff; }

/* =========================================================================
   THE STEPPER                      (reactbits: stepper)
   Four numbered stops on one line, with the shield's cogwheel travelling
   between them and turning a quarter as each step is cleared.
   ========================================================================= */

.hero__form .wz-progress { position: relative; }

.hero__form .wz-steps {
  position: relative;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 0; margin: 0;
}
.hero__form .wz-steps::before {
  content: ""; position: absolute; inset-inline: 12.5%; inset-block-start: 11px;
  height: 2px; background: rgba(255,255,255,.14);
}
.hero__form .wz-steps span {
  position: relative; z-index: 1;
  display: grid; justify-items: center; gap: .3rem;
  padding-top: 0; border-top: 0;
  font-size: .7rem; font-weight: 600; color: #9aa3b6;
}
.hero__form .wz-steps span::before {
  counter-increment: stap; content: counter(stap);
  display: grid; place-items: center;
  width: 24px; height: 24px; border-radius: 50%;
  background: #171b27; border: 2px solid rgba(255,255,255,.18);
  font-family: var(--display); font-weight: 800; font-size: .78rem; line-height: 1;
  color: #9aa3b6;
  transition: border-color .3s var(--ease), color .3s var(--ease), background-color .3s var(--ease);
}
.hero__form .wz-steps span.is-done::before { content: "✓"; border-color: var(--orange); color: var(--orange); }
.hero__form .wz-steps span.is-now::before { border-color: var(--orange); background: var(--orange); color: #1a1005; }
.hero__form .wz-steps span.is-now { color: #fff; }

.wz-gear {
  position: absolute; inset-block-start: 11px; inset-inline-start: 12.5%;
  width: 26px; height: 26px; translate: -50% -50%; z-index: 2;
  transition: inset-inline-start .5s var(--ease), rotate .5s var(--ease);
  pointer-events: none;
}

/* =========================================================================
   SQUARE CHOICES                   fills the box instead of leaving a gap
   ========================================================================= */

.hero__form .wz-tiles,
.hero__form .wz-chips { grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr)); gap: .45rem; }
.hero__form .wz-stores { grid-template-columns: repeat(2, minmax(0,1fr)); gap: .45rem; }

.hero__form .wz-tiles .wz-opt,
.hero__form .wz-chips .wz-opt {
  grid-template-columns: 1fr; justify-items: center; text-align: center;
  aspect-ratio: 1 / .82; align-content: center; gap: .3rem;
  padding: .5rem;
}
.hero__form .wz-tiles .wz-opt > span,
.hero__form .wz-chips .wz-opt > span { justify-items: center; }
.hero__form .wz-tiles .wz-opt svg,
.hero__form .wz-chips .wz-opt svg { width: 21px; height: 21px; }
.hero__form .wz-opt b { font-size: .88rem; }
.hero__form .wz-opt em { font-size: .68rem; }

/* =========================================================================
   SCROLL REVEAL                    (reactbits: scroll-reveal)
   ========================================================================= */

[data-reveal-words] span { display: inline-block; overflow: hidden; vertical-align: bottom; }
[data-reveal-words] span i { display: inline-block; font-style: inherit; transform: translateY(105%); }
[data-reveal-words].is-in span i { transform: none; transition: transform .7s var(--ease); }
[data-reveal-words].is-in span:nth-child(1) i { transition-delay: 0s; }
[data-reveal-words].is-in span:nth-child(2) i { transition-delay: .05s; }
[data-reveal-words].is-in span:nth-child(3) i { transition-delay: .1s; }
[data-reveal-words].is-in span:nth-child(4) i { transition-delay: .15s; }
[data-reveal-words].is-in span:nth-child(5) i { transition-delay: .2s; }
[data-reveal-words].is-in span:nth-child(n+6) i { transition-delay: .25s; }

/* =========================================================================
   ANIMATED LIST                    (reactbits: animated-list)
   ========================================================================= */

.price-row { opacity: 0; transform: translateY(12px); }
.price-row.is-in { opacity: 1; transform: none; transition: opacity .45s var(--ease), transform .45s var(--ease); }

/* =========================================================================
   CLICK SPARK                      (reactbits: click-spark)
   ========================================================================= */

.spark { position: fixed; pointer-events: none; z-index: 999; }
.spark i {
  position: absolute; inset-block-start: 0; inset-inline-start: 0;
  width: 2px; height: 9px; background: var(--orange); border-radius: 2px;
  transform-origin: 50% 0;
}

@media (prefers-reduced-motion: reduce) {
  .screen__sheet i, .screen__list a, [data-reveal-words] span i, .price-row { transition: none !important; transform: none !important; opacity: 1 !important; }
}


/* --- the price line gets room to breathe --- */
.hero__form .wz-quote {
  padding: .9rem 1rem; margin-top: .9rem;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  border-left: 3px solid var(--orange);
  border-radius: 12px;
  display: grid; gap: .15rem; text-align: left;
}
.hero__form .wz-quote small { display: block; }
.hero__form .wz-quote b { display: block; }

/* --- the mega panel drops clear of the bar and keeps its distance --- */
.mega { inset-block-start: calc(var(--bar) + 14px); }
.masthead.is-stuck ~ .mega { inset-block-start: calc(var(--bar) + 8px); }
.mega__panel { padding-block: clamp(1.5rem, 2.4vw, 2.6rem); }
.mega__grid { gap: clamp(1rem,1.8vw,2rem) clamp(1.5rem,3vw,3.5rem); }

/* --- no orange button carries black text any more --- */
.btn--primary .lbl, .btn--primary svg { color: #fff; }


/* the drawn damage sits on the left half only; the repaired photo above it
   wipes it away as the handle travels */
.ba__crack { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.ba__after { z-index: 2; }
.ba__tag, .ba__handle { z-index: 3; }


/* the box grows to whatever the step needs, instead of holding a hole open */
.hero__form .wz-panes { overflow: hidden; }


/* the gear rides the line inside .wz-steps, so it is positioned against that
   same box — .wz-steps is already position: relative */
.hero__form .wz-steps { position: relative; }
.wz-gear { inset-block-start: 11px; }

/* the mega panel slides out from behind the bar and keeps clear of it */
.mega { z-index: 80; }
.masthead { z-index: 100; }
.mega__panel { border-radius: 0 0 var(--r-lg) var(--r-lg); padding-top: clamp(1.75rem, 2.6vw, 3rem); }


/* the 3px transparent left border reserved space, which read as an empty
   stripe beside every choice. An inset shadow marks the chosen one without
   taking any room, so unselected options show nothing at all. */
.hero__form .wz-opt {
  border: 1px solid rgba(255,255,255,.12);
  border-left-width: 1px;
  box-shadow: inset 3px 0 0 transparent;
  transition: border-color .18s var(--ease), background-color .18s var(--ease), box-shadow .18s var(--ease);
}
.hero__form .wz-opt[aria-pressed="true"] {
  border-color: rgba(255,255,255,.22);
  border-left-color: rgba(255,255,255,.22);
  box-shadow: inset 3px 0 0 var(--orange);
}


/* the gear carries the step number; the bullets behind it go quiet */
.wz-gear { width: 32px; height: 32px; }
.wz-gear__no {
  font-family: var(--display); font-weight: 800; font-size: 34px;
  fill: #c9cdd2; letter-spacing: -.02em;
}
.hero__form .wz-steps span::before {
  background: #171b27; border-color: rgba(255,255,255,.18); color: #9aa3b6;
}
.hero__form .wz-steps span.is-now::before,
.hero__form .wz-steps span.is-done::before {
  background: #171b27; border-color: rgba(255,255,255,.34); color: #c9cdd2;
}
.hero__form .wz-steps span.is-now { color: #fff; }


/* the menu runs on from the shield, one even gap between every item */
.masthead__inner .nav {
  display: flex; align-items: center; justify-content: flex-start;
  gap: clamp(1rem, 2.1vw, 2.4rem);
}
.masthead__side { display: flex; align-items: center; gap: clamp(.65rem, 1.2vw, 1.1rem); justify-self: end; }

/* the shield floats over the bar at every size — nothing may cover it */
.crest { grid-column: 1; overflow: visible; }
.crest__img { position: relative; z-index: 6; }
.masthead__inner { overflow: visible; }

@media (max-width: 62rem) {
  .masthead__inner .nav { display: none; }
}


/* the menu spreads from the shield out to the button on the right */
.masthead__inner .nav { justify-content: space-between; width: 100%; }


/* =========================================================================
   TWO FACES, EVERYWHERE

   Archivo carries every heading and every figure; Plus Jakarta Sans carries
   everything you read in sentences. Four h3's had slipped onto the body
   face, and the menu was set in it too — both corrected here.
   ========================================================================= */

h1, h2, h3, h4,
.wz-q, .screen__lbl, .screen__no, .wz-count b, .wz-gear__no {
  font-family: var(--display);
  font-weight: 800;
}

/* the menu, set in the heading face and evenly spaced after the shield */
.masthead__inner .nav {
  justify-content: flex-start;
  width: auto;
  gap: clamp(1.1rem, 2vw, 2.1rem);
}
.masthead__inner .nav a,
.masthead__inner .nav .nav__trigger {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -.005em;
  line-height: 1;
}


/* the shield is the one thing that breaks the bar — big enough to cross the
   orange and the white band, not just peek over the edge */
.crest { width: clamp(104px, 10.4vw, 162px); translate: 0 26%; }
.masthead.is-stuck .crest { width: clamp(70px, 6.2vw, 96px); translate: 0 30%; }


/* the shield is sized FROM the artwork, so it keeps the same relationship to
   the bands at every width — a fixed clamp made it poke over the lines once
   the arc shrank on small screens */
.crest { width: calc(var(--arc-h) * .92); translate: 0 24%; }
.masthead.is-stuck .crest { width: calc(var(--bar) * .95); translate: 0 26%; }

/* and it keeps its distance from the first menu item */
.masthead__inner { grid-template-columns: auto 1fr auto; gap: clamp(1.5rem, 3.4vw, 3.5rem); }


/* the form reads left to right: question, hint, answers and fields all share
   one edge. Centring only the question left the hint hanging under it. */
.hero__form,
.hero__form .wz-q,
.hero__form .wz-hint,
.hero__form .wz-pane,
.hero__form .field,
.hero__form .wz-quote { text-align: left; }

.hero__form .wz-tiles,
.hero__form .wz-chips,
.hero__form .wz-stores { justify-content: stretch; justify-items: stretch; }

/* the square choices keep their own centre, since the icon sits above the word */
.hero__form .wz-tiles .wz-opt,
.hero__form .wz-chips .wz-opt { text-align: center; }

.hero__form .wz-foot { justify-content: space-between; }
.hero__form .wz-steps { text-align: center; }


/* the sweep from the form is deeper than the band it replaces: 360 units
   against 160, so the artwork and the room the hero leaves grow with it */
:root { --arc-h: clamp(172px, 19vw, 268px); }
.masthead.is-stuck .masthead__bg { height: clamp(96px, 10vw, 130px); opacity: 1; }


/* the artwork box grew from 360 to 530 units (170 of plain navy on top), so
   the rendered height grows with it to keep the sweep at the same scale */
:root { --arc-h: clamp(250px, 27.5vw, 394px); }
.masthead.is-stuck .masthead__bg { height: clamp(130px, 13vw, 180px); }


/* =========================================================================
   THE SHIELD BACK IN THE MIDDLE
   Menu left, shield centred, actions right — and the shield hangs over the
   artwork in both states, including the collapsed bar.
   ========================================================================= */

.masthead__inner { grid-template-columns: 1fr auto 1fr; }
.masthead__inner .nav { grid-column: 1; justify-content: flex-start; }
.crest { grid-column: 2; justify-self: center; }
.masthead__side { grid-column: 3; justify-self: end; }

/* it overhangs whatever the artwork currently is */
.crest { width: calc(var(--arc-h) * .42); translate: 0 58%; }
.masthead.is-stuck .crest { width: clamp(64px, 7vw, 104px); translate: 0 46%; }


/* the grid columns are not symmetrical, so the middle cell is not the middle
   of the page — the shield is pinned to the real centre instead */
.crest {
  position: absolute; inset-inline-start: 50%; inset-block-start: 0;
  margin-inline-start: calc(var(--arc-h) * -.21);
  grid-column: auto; justify-self: auto;
}
.masthead.is-stuck .crest { margin-inline-start: clamp(-52px, -3.5vw, -32px); }

/* =========================================================================
   THE REVIEWS
   They were flat boxes with a border. Now the quote mark does the work: a
   big orange comma sits behind the words, the shop's name carries the same
   heading face, and the card has nothing but a rule at its foot.
   ========================================================================= */

.quote {
  position: relative;
  flex: 0 0 min(24rem, 82vw);
  padding: 2.6rem 1.75rem 1.5rem;
  border: 0; border-radius: 0;
  background: none;
  display: grid; gap: .8rem; align-content: start;
}
.quote::before {
  content: "\201C";
  position: absolute; inset-block-start: -.35em; inset-inline-start: .55rem;
  font-family: var(--display); font-weight: 800; font-size: 7rem; line-height: 1;
  color: var(--orange); opacity: .32; pointer-events: none;
}
.quote p {
  position: relative;
  font-family: var(--display); font-weight: 700;
  font-size: 1.12rem; line-height: 1.36; color: #fff;
  letter-spacing: -.012em;
}
.quote cite {
  display: flex; align-items: center; gap: .5rem;
  padding-top: .85rem; border-top: 1px solid rgba(255,255,255,.14);
  font-style: normal; font-size: .8rem; font-weight: 600; color: #9aa3b6;
}
.quote__stars { color: var(--orange); }
.quote__stars svg { width: 13px; height: 13px; }

/* on the light bands the same block flips its ink */
.section:not(.section--dark):not(.section--ink) .quote p { color: var(--ink, #14171f); }
.section:not(.section--dark):not(.section--ink) .quote cite { color: #5d6473; border-top-color: rgba(16,19,28,.14); }


/* =========================================================================
   TYPE, SET THE WAY ODIDO SETS THEIRS

   Measured from odido.nl: headings at weight 500 with line-height 1.11 and
   normal tracking; body at 400 with 1.5. Nothing is condensed, nothing is
   squeezed, and no heading shouts in 800.
   ========================================================================= */

h1, h2, h3, h4,
.wz-q, .screen__lbl, .hero h1 {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: normal;
  font-stretch: normal;
}
h1, .hero h1 { line-height: 1.08; }
h2 { line-height: 1.1; }
h3, h4, .wz-q { line-height: 1.18; }

body, p, li, input, select, textarea, .lede {
  font-family: var(--text);
  letter-spacing: normal;
}
body { line-height: 1.5; }
.lede { line-height: 1.55; }

/* figures keep the heading face but stay calm */
.price-row__amt, .station__n, .figure b, .wz-quote b, .fix__price,
.ribbon__name, .wz-gear__no, .wz-count b, .screen__no {
  font-family: var(--display); font-weight: 600; letter-spacing: normal;
}

/* the menu, matching their 16px medium */
.masthead__inner .nav a,
.masthead__inner .nav .nav__trigger {
  font-family: var(--text);
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: normal;
  line-height: 1.5;
}
.btn, .press { font-family: var(--text); font-weight: 500; letter-spacing: normal; }

/* =========================================================================
   MENU: THREE LEFT, THREE RIGHT, BUTTON ON THE END
   ========================================================================= */

.masthead__inner { grid-template-columns: 1fr auto 1fr; align-items: center; }
.masthead__inner .nav--l { grid-column: 1; justify-content: flex-start; }
.masthead__side {
  grid-column: 3; justify-self: end;
  display: flex; align-items: center; gap: clamp(1rem, 2vw, 2rem);
}
.masthead__inner .nav--r { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2rem); }
.masthead__inner .nav--l { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2rem); }
@media (max-width: 68rem) { .masthead__inner .nav--l, .masthead__inner .nav--r { display: none; } }

/* =========================================================================
   THE SHIELD CROSSES THE FOOT OF THE SWEEP
   On the printed form the shield hangs past the lower edge of the bands.
   At the centre of a 530-unit box that edge sits at about 375 units, so the
   shield is sized and dropped to clear it.
   ========================================================================= */

.crest { width: calc(var(--arc-h) * .52); translate: 0 0; }
.crest { inset-block-start: calc(var(--arc-h) * .30); }
.masthead.is-stuck .crest {
  width: clamp(66px, 7.4vw, 108px);
  inset-block-start: calc(var(--bar) * .34);
}


/* =========================================================================
   THE FULL-SCREEN MENU, TIDIED
   The list sits in the upper half, the two shops sit at the foot as blocks
   you can actually tap, and there is a cross to close it.
   ========================================================================= */

.screen__in {
  align-content: space-between;
  padding: calc(var(--bar) + 2.5rem) var(--gutter) calc(var(--gutter) + env(safe-area-inset-bottom));
  gap: 2rem;
}

.screen__close {
  position: absolute; inset-block-start: 1.1rem; inset-inline-end: var(--gutter);
  z-index: 4; width: 44px; height: 44px;
  display: grid; place-items: center;
  color: #fff; background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2); border-radius: 50%;
  opacity: 0; transition: opacity .3s var(--ease) .3s;
}
.screen.is-open .screen__close { opacity: 1; }
.screen__close svg { width: 19px; height: 19px; }

.screen__list a { align-items: center; }

.screen__foot { display: grid; gap: 1rem; align-content: end; }

.screen__shops { display: grid; gap: .6rem; }
@media (min-width: 30rem) { .screen__shops { grid-template-columns: 1fr 1fr; } }

.screen__shop {
  display: grid; gap: .1rem;
  padding: .85rem 1rem;
  border: 1px solid rgba(255,255,255,.16); border-radius: 14px;
  background: rgba(255,255,255,.05);
}
.screen__shop b { font-family: var(--display); font-weight: 600; font-size: 1.05rem; color: #fff; }
.screen__shop span { font-size: .82rem; color: #9aa3b6; }
.screen__shop em { font-style: normal; font-size: .82rem; color: var(--orange); }

.screen__call { width: 100%; justify-content: center; }


/* the panel has to fit one screen: the top gap shrinks, the items shrink,
   and the two shops sit side by side even on a narrow phone */
@media (max-width: 48rem) {
  .screen__in {
    padding-top: calc(var(--bar) + 1rem);
    padding-bottom: calc(1rem + env(safe-area-inset-bottom));
    gap: 1.25rem;
  }
  .screen__list a { padding-block: clamp(.45rem, 1.5vh, .8rem); }
  .screen__lbl { font-size: clamp(1.5rem, 6.4vw, 2.1rem); }
  .screen__list em { font-size: .78rem; }
  .screen__shop { padding: .7rem .85rem; }
  .screen__shop b { font-size: .95rem; }
  .screen__shop span, .screen__shop em { font-size: .74rem; }
  .screen__foot { gap: .7rem; }
}
.screen__shops { grid-template-columns: 1fr 1fr; }


/* the bands are thinner, so the artwork carries the menu at a much smaller
   overall height — the navy block is 47% of the box */
:root { --arc-h: clamp(186px, 20vw, 286px); --bar: 76px; }
.masthead.is-stuck { --bar: 60px; }
.masthead.is-stuck .masthead__bg { height: clamp(104px, 11vw, 150px); }
.crest { width: calc(var(--arc-h) * .46); inset-block-start: calc(var(--arc-h) * .26); }
.masthead.is-stuck .crest { width: clamp(60px, 6.6vw, 94px); inset-block-start: calc(var(--bar) * .3); }


/* with the bands thinner the foot of the sweep sits higher, so the shield
   drops further to keep crossing it the way it does on the printed form */
.crest { width: calc(var(--arc-h) * .50); inset-block-start: calc(var(--arc-h) * .40); }


/* the sweep is flattened to 55% of its printed depth, so the whole
   header fits in 270px while the wedge keeps the proportions from the form */
:root { --arc-h: clamp(182px, 19vw, 270px); --bar: 76px; }
.crest { width: calc(var(--arc-h) * .46); inset-block-start: calc(var(--arc-h) * .34); }


/* =========================================================================
   THE MENU AS ONE ROW

   Three items sit against the shield on the left, three on the right, and
   the button closes the line. Every gap is the same token, and the two nav
   groups push up to the shield rather than spreading to the page edges, so
   the whole thing reads as one object with the shield at its middle.
   ========================================================================= */

:root { --menu-gap: clamp(1.1rem, 1.9vw, 2.1rem); }

.masthead__inner {
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0;
}

/* left group hugs the shield, right group starts at it */
.masthead__inner .nav--l {
  grid-column: 1; justify-self: end;
  display: flex; align-items: center; gap: var(--menu-gap);
  padding-inline-end: calc(var(--arc-h) * .30);
}
.masthead__side {
  grid-column: 3; justify-self: start;
  display: flex; align-items: center; gap: var(--menu-gap);
  padding-inline-start: calc(var(--arc-h) * .30);
}
.masthead__inner .nav--r {
  display: flex; align-items: center; gap: var(--menu-gap);
}

/* the shield's own cell stays empty — it is pinned to the page centre */
.crest { pointer-events: auto; }

@media (max-width: 68rem) {
  .masthead__inner { grid-template-columns: 1fr auto 1fr; }
  .masthead__inner .nav--l, .masthead__inner .nav--r { display: none; }
  .masthead__side { justify-self: end; padding-inline-start: 0; }
}


/* Montserrat for headings, Nunito for everything read in sentences.
   Montserrat runs wide, so headings carry a touch of negative tracking to
   stop long Dutch words sprawling; Nunito is set a shade larger because its
   x-height is smaller than Inter's. */
h1, h2, h3, h4, .wz-q, .screen__lbl, .hero h1 {
  font-family: var(--display); font-weight: 700; letter-spacing: -.015em;
}
.price-row__amt, .station__n, .figure b, .wz-quote b, .fix__price,
.ribbon__name, .wz-gear__no, .wz-count b, .screen__no, .quote p {
  font-family: var(--display); font-weight: 700; letter-spacing: -.01em;
}
body, p, li, input, select, textarea, .lede { font-family: var(--text); }
.masthead__inner .nav a, .masthead__inner .nav .nav__trigger,
.btn, .press { font-family: var(--text); font-weight: 600; }


/* the shield's width and its centring offset come from one value, so the
   half-width correction can never drift out of step with the size again */
:root { --crest-w: calc(var(--arc-h) * .46); }
.crest {
  width: var(--crest-w);
  margin-inline-start: calc(var(--crest-w) / -2);
}
.masthead.is-stuck { --crest-w: clamp(60px, 6.6vw, 94px); }

/* both nav groups keep the same distance to the shield */
.masthead__inner .nav--l { padding-inline-end: calc(var(--crest-w) / 2 + var(--menu-gap)); }
.masthead__side { padding-inline-start: calc(var(--crest-w) / 2 + var(--menu-gap)); }


/* =========================================================================
   THE MENU, ACTUALLY BALANCED

   The button used to live inside the right-hand group, so that group ran
   almost 200px wider than the left one and the whole row sat off to one
   side — 239px of empty space on the left against 62px on the right.

   Now the two nav groups are the only things the grid balances, and the
   button is pinned to the edge like the shield is pinned to the middle.
   ========================================================================= */

.masthead__inner { position: relative; grid-template-columns: 1fr auto 1fr; }

.masthead__inner .nav--l { grid-column: 1; justify-self: end; }
.masthead__inner .nav--r {
  grid-column: 3; justify-self: start;
  display: flex; align-items: center; gap: var(--menu-gap);
  padding-inline-start: calc(var(--crest-w) / 2 + var(--menu-gap));
}

.masthead__side {
  position: absolute; inset-inline-end: 0; inset-block-start: 50%;
  translate: 0 -50%;
  grid-column: auto; justify-self: auto;
  padding-inline-start: 0;
  display: flex; align-items: center; gap: var(--menu-gap);
}

@media (max-width: 68rem) {
  .masthead__inner .nav--r { display: none; }
}


/* the phone sits at the left edge, mirroring the button on the right, so the
   row reads as one object instead of everything crowding to one side */
.masthead__tel {
  position: absolute; inset-inline-start: 0; inset-block-start: 50%;
  translate: 0 -50%;
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--text); font-weight: 600; font-size: 1rem;
  color: #fff; white-space: nowrap;
  padding-block: .4rem;
  border-bottom: 2px solid transparent;
  transition: border-color .18s var(--ease);
}
.masthead__tel:hover { border-bottom-color: var(--orange); }
.masthead__tel svg { width: 16px; height: 16px; color: var(--orange); }
@media (max-width: 68rem) { .masthead__tel { display: none; } }


/* =========================================================================
   ONE CENTRE LINE

   The menu sat on the old bar height while the shield hung far below it, so
   the row and the shield were on two different lines. The shield's middle is
   at --arc-h * .5325 (its top is .34 and it is .385 tall), so the whole row
   is given that centre: phone, menu, shield and button all sit on it.
   ========================================================================= */

.masthead__inner { height: calc(var(--arc-h) * 1.065); }
.masthead.is-stuck .masthead__inner { height: var(--bar); }

/* the shield keeps its own offset; the rest centre in the taller row */
.masthead.is-stuck .crest { inset-block-start: 50%; translate: 0 -50%; margin-block-start: 0; }


/* =========================================================================
   A PHOTO UNDER THE SWEEP
   The flat navy was dead space. The shop's own photo sits behind it and the
   navy band is painted at 88% instead of solid, so the picture reads as a
   texture without the menu ever losing its ground.
   ========================================================================= */

.masthead__arc { position: relative; }

.masthead__photo {
  position: absolute; inset-block-start: 0; inset-inline: 0;
  width: 100%; height: var(--arc-h);
  object-fit: cover; object-position: 50% 26%;
  filter: grayscale(.55) contrast(1.05) brightness(.85);
  z-index: 0; pointer-events: none;
}
.masthead__bg { position: absolute; inset-block-start: 0; inset-inline: 0; z-index: 1; }
.masthead__inner { position: relative; z-index: 2; }

.masthead.is-stuck .masthead__photo { height: clamp(104px, 11vw, 150px); }


/* The shield shares the menu's centre line, so the only way it can still
   cross the bands below is by being bigger — its lower half reaches past the
   foot of the sweep while its middle stays on the row. The nav groups move
   apart with it, since their padding is derived from --crest-w. */
:root { --crest-w: calc(var(--arc-h) * .84); }
.crest {
  inset-block-start: 50%;
  translate: 0 -50%;
  margin-block-start: 0;
}
.masthead.is-stuck { --crest-w: clamp(76px, 8vw, 116px); }


/* =========================================================================
   THE PHOTO BEHIND THE FORM

   It belongs in the hero, not the masthead: here the band is deep enough to
   show the shop rather than a 28% strip of it. A veil keeps the headline and
   the form readable over it.
   ========================================================================= */

.masthead__photo { display: none; }

.hero { position: relative; overflow: hidden; isolation: isolate; }

.hero__shot {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 30%;
  filter: grayscale(.5) contrast(1.04);
  opacity: .34;
}
.hero__veil {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(30,34,48,.96) 0%, rgba(30,34,48,.58) 42%, rgba(30,34,48,.92) 100%),
    radial-gradient(70% 60% at 68% 45%, rgba(30,34,48,0) 0%, rgba(30,34,48,.85) 100%);
}
.hero__box { position: relative; z-index: 1; }


/* the box lost 100 units of empty navy at the top, so the row sits lower in
   what is left and the header stops looking hollow above the menu */
.masthead__inner { height: calc(var(--arc-h) * 1.30); }
:root { --crest-w: calc(var(--arc-h) * .92); }

/* the photo carries the hero instead of hinting at it */
.hero__shot { opacity: .62; filter: grayscale(.34) contrast(1.06); }
.hero__veil {
  background:
    linear-gradient(180deg, rgba(30,34,48,.92) 0%, rgba(30,34,48,.34) 38%, rgba(30,34,48,.88) 100%),
    radial-gradient(76% 68% at 70% 46%, rgba(30,34,48,0) 0%, rgba(30,34,48,.72) 100%);
}


/* back to what worked, and then the one change asked for: the shield drops
   below the row. Size, menu and everything else stay exactly as they were. */
.masthead__inner { height: calc(var(--arc-h) * 1.065); }
:root { --crest-w: calc(var(--arc-h) * .84); }

/* the shield alone sits lower than the line the menu shares */
.crest { translate: 0 calc(-50% + var(--crest-drop)); }
:root { --crest-drop: 42px; }
.masthead.is-stuck { --crest-drop: 16px; }


/* =========================================================================
   ONE LINE, AS LOW AS THE NAVY ALLOWS

   The shield was dropped on its own, which left the menu sitting up at the
   top beside it. Everything shares one line again.

   How low that line can go is not a taste call: the navy runs out first on
   the LEFT, where the sweep starts at zero. At the first menu item the navy
   reaches 68.8% of the artwork's height, so the row centre can sit at most
   at 63% of it before the items land on the orange.
   ========================================================================= */

:root { --crest-drop: 0px; }
.crest { translate: 0 -50%; }

.masthead__inner { height: calc(var(--arc-h) * 1.26); }


/* =========================================================================
   THE BLUE ABOVE THE SHIELD, CUT BACK

   Worked out rather than guessed. With the navy block at 300 units and the
   sweep at 197, the navy under the FIRST menu item reaches A*(342/497) of
   the header height A — that is the shallowest point and it governs
   everything. Asking for only 30px of blue above the shield fixes the row
   centre at 30 + half the shield's height, and the two only agree from
   A = 125px upward. At A = 210 the shield also still crosses the sweep;
   from A = 240 it stops reaching it.

     A = 210px   row centre 104   shield 148px, foot at 178
                 navy under the first item 145   sweep foot 176
   ========================================================================= */

:root { --arc-h: clamp(158px, 15vw, 210px); }
.masthead__inner { height: calc(var(--arc-h) * .99); }


/* the shield drops below the menu line. Nothing else moves. */
:root { --crest-drop: 46px; }
.crest { translate: 0 calc(-50% + var(--crest-drop)); }
.masthead.is-stuck { --crest-drop: 18px; }


/* =========================================================================
   SHORTER HEADER, SAME SHIELD

   The row moves up and the foot of the sweep comes up with it, so the whole
   band shrinks instead of leaving a hole under the menu. The shield is taken
   off the header's height — it keeps the size that was approved — and still
   hangs its 46px below the menu line, past the foot of the sweep.

   How far the band can shrink is set by the PHONE LINK at the far left,
   where the sweep starts at zero and the navy is shallowest.
   ========================================================================= */

:root {
  --arc-h: clamp(118px, 11.6vw, 150px);
  --crest-w: clamp(124px, 12.4vw, 176px);
}
.masthead__inner { height: calc(var(--arc-h) * .99); }
.masthead.is-stuck { --crest-w: clamp(70px, 7vw, 100px); }


/* shorter again. The phone link at the far left is the limit: the sweep
   starts at zero there, so the navy under it is the shallowest point of the
   whole band. At 126px it still clears by 7px. */
:root { --arc-h: clamp(104px, 10vw, 126px); }


/* 126 put the phone link 3px over the orange. 134 is the shortest the band
   can be while every item still sits on navy. */
:root { --arc-h: clamp(110px, 10.6vw, 134px); }


/* the navy block grew to 520 units, so the band is proportionally deeper
   under the menu and the header can come down to 102px with the sweep
   still 28px tall. The phone link keeps 13px of navy under it. */
:root { --arc-h: clamp(86px, 8.2vw, 102px); }


/* =========================================================================
   THE MEGA PANEL TUCKS UNDER THE HEADER
   It starts above the foot of the sweep, so the top of the panel is hidden
   behind it. More room at the top means the first row of links clears the
   shield as well, and the whole thing reads as sliding out from behind.
   ========================================================================= */

.mega__panel { padding-top: clamp(4.5rem, 7vw, 7rem); }

/* =========================================================================
   THE HERO PHOTO — EDGE TO EDGE, DARKER
   The radial was pulling one side down and made it look cropped towards the
   right. An even veil keeps the picture full width and simply darker.
   ========================================================================= */

.hero__shot {
  inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 32%;
  opacity: .5;
  filter: grayscale(.28) contrast(1.06) brightness(.72);
}
.hero__veil {
  background: linear-gradient(180deg,
    rgba(22,26,38,.92) 0%,
    rgba(22,26,38,.70) 30%,
    rgba(22,26,38,.70) 70%,
    rgba(22,26,38,.94) 100%);
}


/* the panel moves up: just enough headroom to clear the shield, no more.
   It still starts above the foot of the sweep so the tuck stays visible. */
.mega { inset-block-start: calc(var(--arc-h) - 14px); }
.mega__panel { padding-top: clamp(2.6rem, 4.4vw, 4.4rem); }


/* =========================================================================
   TWO FIXES

   1. Four different patches had each left a rule for the collapsed bar, and
      the last one stood at 150px while the header itself is 102px — so
      scrolling made the menu GROW. One rule now, and it is smaller.

   2. The veil was mixed at #161a26 while the hero's own ground is #1e2230.
      Where the veil ran out, that difference showed as a hard line. Same
      colour throughout now.
   ========================================================================= */

.masthead.is-stuck .masthead__bg { height: clamp(58px, 5.6vw, 70px); opacity: 1; }
.masthead.is-stuck { --bar: 58px; }
.masthead.is-stuck .masthead__photo { height: clamp(58px, 5.6vw, 70px); }

.hero__veil {
  background: linear-gradient(180deg,
    rgba(30,34,48,.92) 0%,
    rgba(30,34,48,.70) 30%,
    rgba(30,34,48,.70) 70%,
    rgba(30,34,48,.96) 100%);
}


/* The picture carries a black film-burn frame: 96px down the left, 97px down
   the right and roughly 7% top and bottom. The element was always full
   width — the image simply had nothing but black out there. Scaling past the
   frame crops it away; 1.26 clears 13% a side against the 7.8% border. */
.hero__shot { transform: scale(1.26); transform-origin: 50% 32%; }


/* =========================================================================
   THE SHIELD IN THE COLLAPSED BAR — ONE RULE

   Nine separate rules had stacked up for this across the session, each from
   a different patch, and the last of them reset the drop to zero so the
   shield rode up out of the bar. This single rule replaces the lot: the
   shield sits low in the collapsed bar and hangs below it, the same way it
   does at full height.
   ========================================================================= */

.masthead.is-stuck .crest {
  width: clamp(74px, 7.4vw, 104px);
  inset-block-start: 50%;
  translate: 0 calc(-50% + 16px);
  margin-inline-start: calc(clamp(74px, 7.4vw, 104px) / -2);
  margin-block-start: 0;
}


/* =========================================================================
   THE PANEL TUCKS PROPERLY

   It was starting 11px above the foot of the sweep — too little to read as
   anything. Now it starts at 40px, so roughly 60px of it is hidden behind
   the header, and its own top padding drops the first row of links clear of
   the shield instead of behind it.
   ========================================================================= */

.mega { inset-block-start: 40px; }
.masthead.is-stuck ~ .mega { inset-block-start: 26px; }
.mega__panel { padding-top: clamp(9rem, 12vw, 11rem); }

/* the shield drops further in the collapsed bar */
.masthead.is-stuck .crest { translate: 0 calc(-50% + 30px); }


/* The padding was sized to clear the shield, but the shield only hangs over
   the middle of the panel. The columns clear the sweep instead, and only the
   ones that actually sit under the shield are pushed down. */
.mega__panel { padding-top: clamp(4.2rem, 5.6vw, 5.4rem); }
.mega__grid > *:nth-child(2),
.mega__grid > *:nth-child(3) { padding-top: clamp(2rem, 3.4vw, 3.4rem); }


/* the column count changes with the width, so singling out the middle ones
   by position is unreliable — a little more room for every column clears the
   shield whatever the layout does, and still costs far less than before */
.mega__grid > *:nth-child(2),
.mega__grid > *:nth-child(3) { padding-top: 0; }
.mega__panel { padding-top: clamp(5.2rem, 6.6vw, 6.4rem); }


/* =========================================================================
   A NEW TYPE SETTING

   Host Grotesk carries the headings — a recent grotesque with open shapes
   that stays calm at large sizes. Instrument Sans reads the body text.
   Neither has been on this page before.

   The scale is a fifth (1.5) at the top and a fourth (1.25) lower down, and
   the space under a heading is always half the space above it, so a block of
   text belongs to the heading over it rather than floating between two.
   ========================================================================= */

:root {
  --display: "Host Grotesk", system-ui, sans-serif;
  --text:    "Instrument Sans", system-ui, -apple-system, sans-serif;

  --stap-1: .5rem;
  --stap-2: 1rem;
  --stap-3: 1.5rem;
  --stap-4: 2.5rem;
  --stap-5: 4rem;
  --stap-6: 6rem;
}

h1, h2, h3, h4, .wz-q, .screen__lbl, .hero h1 {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -.02em;
}
h1, .hero h1 { font-size: clamp(2.4rem, 1.2rem + 4.4vw, 4.6rem); line-height: 1.04; }
h2 { font-size: clamp(1.75rem, 1.1rem + 2.4vw, 3rem); line-height: 1.1; }
h3 { font-size: clamp(1.15rem, .95rem + .8vw, 1.5rem); line-height: 1.22; }
h4 { font-size: 1.0625rem; line-height: 1.3; }

body, p, li, input, select, textarea, .lede {
  font-family: var(--text);
  letter-spacing: normal;
}
body { font-size: 1.0625rem; line-height: 1.6; }
.lede { font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem); line-height: 1.6; max-width: 62ch; }
p { max-width: 74ch; }

/* a heading owns the text under it: half the gap below, full gap above */
h1 + *, .hero h1 + * { margin-top: var(--stap-3); }
h2 + * { margin-top: var(--stap-2); }
h3 + *, h4 + * { margin-top: var(--stap-1); }
.section-head { margin-bottom: var(--stap-5); }
.section-head h2 + .lede { margin-top: var(--stap-2); }

/* the menu and buttons follow the body face */
.masthead__inner .nav a, .masthead__inner .nav .nav__trigger,
.masthead__tel, .btn, .press {
  font-family: var(--text); font-weight: 500; letter-spacing: normal;
}
.masthead__inner .nav a, .masthead__inner .nav .nav__trigger { font-size: 1rem; }

/* figures keep the heading face */
.price-row__amt, .station__n, .figure b, .wz-quote b, .fix__price,
.ribbon__name, .wz-gear__no, .wz-count b, .screen__no, .quote p {
  font-family: var(--display); font-weight: 600; letter-spacing: -.015em;
}


/* =========================================================================
   THE TYPE SCALE, MADE TO STICK

   .section-head h2 outranks a bare h2, so the new sizes were being ignored
   and the old 66px/800 setting stayed. These carry the same weight as the
   rules they replace.
   ========================================================================= */

.section-head h2, .head-row h2, .band h2, h2 {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.75rem, 1.1rem + 2.4vw, 3rem);
  line-height: 1.1; letter-spacing: -.02em;
}
.section-head h3, .fix h3, .station h3, .store__id h3, .qa__q, h3 {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.15rem, .95rem + .8vw, 1.5rem);
  line-height: 1.22; letter-spacing: -.015em;
}
.hero h1, h1 {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(2.4rem, 1.2rem + 4.4vw, 4.6rem);
  line-height: 1.04; letter-spacing: -.025em;
}

/* =========================================================================
   THE CALL BUTTON

   Bottom right, above everything, with the number unrolling on hover so it
   stays a small mark until someone reaches for it. On a phone it is a plain
   round button — that is where tapping to call actually happens.
   ========================================================================= */

.hotline {
  position: fixed; inset-block-end: clamp(16px, 2.4vw, 28px);
  inset-inline-end: clamp(16px, 2.4vw, 28px);
  z-index: 130;
  display: inline-flex; align-items: center; gap: .65rem;
  height: 58px; padding-inline: 18px;
  background: var(--orange); color: #16191f;
  border-radius: 999px;
  font-family: var(--text); font-weight: 600; font-size: .95rem;
  box-shadow: 0 10px 28px -10px rgba(0,0,0,.55);
  transition: background-color .2s var(--ease);
}
.hotline:hover { background: #ff9438; }
.hotline svg { width: 21px; height: 21px; flex: none; }

.hotline__tekst { display: grid; line-height: 1.15; white-space: nowrap;
  max-width: 0; overflow: hidden; opacity: 0;
  transition: max-width .32s var(--ease), opacity .2s var(--ease); }
.hotline:hover .hotline__tekst, .hotline:focus-visible .hotline__tekst { max-width: 12rem; opacity: 1; }
.hotline__tekst b { font-weight: 700; }

/* the ring that says it is live */
.hotline__ring {
  position: absolute; inset: 0; border-radius: inherit;
  border: 2px solid var(--orange); pointer-events: none;
  animation: hotlinePuls 2.6s ease-out infinite;
}
@keyframes hotlinePuls {
  0%   { transform: scale(1); opacity: .7; }
  70%  { transform: scale(1.28); opacity: 0; }
  100% { transform: scale(1.28); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .hotline__ring { animation: none; opacity: 0; } }

@media (max-width: 48rem) {
  .hotline { width: 56px; height: 56px; padding: 0; justify-content: center; }
  .hotline__tekst { display: none; }
}


/* headings go heavy, body stays plain: Host Grotesk at 700 against
   Instrument Sans at 400 */
.hero h1, h1,
.section-head h2, .head-row h2, .band h2, h2,
.section-head h3, .fix h3, .station h3, .store__id h3, .qa__q, h3,
h4, .wz-q, .screen__lbl {
  font-weight: 700;
}
.price-row__amt, .station__n, .figure b, .wz-quote b, .fix__price,
.ribbon__name, .wz-gear__no, .wz-count b, .screen__no, .quote p { font-weight: 700; }

body, p, li, .lede, input, select, textarea { font-weight: 400; }


/* =========================================================================
   HEAVY HEADINGS, CLEAN BODY

   Leftovers from the Archivo setting were still forcing uppercase, a
   stretched width and their own sizes on individual headings — .store__id h3
   was running at 40px against a scale that tops out at 24. Cleared here, and
   the titles go to 800.
   ========================================================================= */

h1, h2, h3, h4,
.diag h3, .fix h3, .station h3, .store__id h3, .wz-done h3,
.qa__q, .wz-q, .screen__lbl, .head-row h2, .band h2, .section-head h2, .section-head h3 {
  text-transform: none;
  font-stretch: normal;
  font-family: var(--display);
  font-weight: 800;
}

.hero h1, h1 { font-size: clamp(2.4rem, 1.2rem + 4.4vw, 4.6rem); line-height: 1.02; letter-spacing: -.03em; }
h2, .section-head h2, .head-row h2, .band h2 { font-size: clamp(1.75rem, 1.1rem + 2.4vw, 3rem); line-height: 1.08; letter-spacing: -.025em; }
h3, .diag h3, .fix h3, .station h3, .store__id h3, .wz-done h3, .qa__q, .section-head h3 {
  font-size: clamp(1.15rem, .95rem + .8vw, 1.5rem); line-height: 1.2; letter-spacing: -.02em;
}
h4 { font-size: 1.0625rem; line-height: 1.3; letter-spacing: -.015em; }

body, p, li, .lede, input, select, textarea { font-family: var(--text); font-weight: 400; text-transform: none; }


/* the last three that still shouted: the hero headline, the footer headings
   and the shop names in the mega panel. Each had its own rule with a class
   in front of it, so the general reset never reached them. */
.hero h1 {
  text-transform: none; font-stretch: normal; font-weight: 800;
  font-size: clamp(2.4rem, 1.2rem + 4.4vw, 4.6rem);
  line-height: 1.02; letter-spacing: -.03em;
}
.foot h4 { text-transform: none; font-weight: 700; font-size: 1rem; letter-spacing: -.015em; }
.mega__store b { text-transform: none; font-weight: 700; letter-spacing: -.015em; }


/* =========================================================================
   NO MORE DECORATIVE BARS, NO 3D

   The rules under the figures, the orange tick beside the signature and the
   stacked shadow on the headline all came out. The only lines left are the
   ones that carry meaning: the stepper's track and the underline that marks
   the menu item you are on.
   ========================================================================= */

.rule, .signature__mark, hr { display: none; }
.extrude { color: inherit; text-shadow: none; }
.hero h1 .extrude, .hero h1 span { color: inherit; text-shadow: none; }

/* =========================================================================
   ONE SCALE, TWO FACES

   Host Grotesk for headings and figures, Instrument Sans for everything
   read in sentences. Five sizes, nothing in between.
   ========================================================================= */

:root {
  --f1: 0.8125rem;   /* labels, meta            */
  --f2: 0.9375rem;   /* small print             */
  --f3: 1.0625rem;   /* body                    */
  --f4: 1.25rem;     /* lede                    */
  --f5: clamp(1.15rem, .95rem + .8vw, 1.5rem);      /* h3 */
  --f6: clamp(1.75rem, 1.1rem + 2.4vw, 3rem);       /* h2 */
  --f7: clamp(2.4rem, 1.2rem + 4.4vw, 4.6rem);      /* h1 */
}

.lede { font-size: var(--f4); }
.today, .wz-hint, .price-row__note, .fix p, .station p, .qa__a p,
.quote cite, .shop__state span, .hours div, .screen__list em { font-size: var(--f2); }
.wz-count, .wz-steps, .field label, .foot a, .mega a span,
.fix__time, .price-row__amt small, .fix__price small { font-size: var(--f1); }


/* the headline runs on one line so the shield, which hangs 170px down over
   the middle of the page, no longer lands on top of it. It still wraps by
   itself once the screen is too narrow to hold both halves. */
.hero h1 .fx__line { display: inline-block; margin-inline-end: .4em; }
.hero h1 { text-wrap: balance; }


/* the shield hangs to 170px over the middle of the page, so the hero starts
   below it rather than letting the headline run underneath */
.hero { padding-block: calc(var(--arc-h) + 6.5rem) 3rem !important; }
@media (max-width: 52rem) { .hero { padding-block: calc(var(--arc-h) + 5rem) 2.5rem !important; } }


/* the letters resolve from orange into white */
.hero h1[data-decrypt] { color: #fff; }


/* each character sits in its own mask and rises into it — the glyph never
   changes, so the line keeps its width and nothing on the page moves */
.sp-word { display: inline-block; white-space: nowrap; }
.sp-mask { display: inline-block; overflow: hidden; vertical-align: bottom; line-height: 1.02; }
.sp-ch {
  display: inline-block;
  transform: translateY(105%);
  color: var(--orange);
  transition: transform .62s cubic-bezier(.2,.75,.25,1), color .62s ease;
}
.is-uit .sp-ch { transform: translateY(0); color: #fff; }
.hero h1[data-decrypt] { color: #fff; }


/* the symptom block and the repair list belong together: one asks what is
   wrong, the next says what it costs. 160px of air underneath pushed them
   apart, and the answer panel beside the list ends higher still. */
#symptomen { padding-bottom: clamp(2.5rem, 4vw, 4rem); }
#reparaties { padding-top: 0; }


/* the two shops stand next to each other: they are alternatives, not a list
   you work through, so reading them side by side is how you pick one */
.stores { display: grid; gap: clamp(1.5rem, 3vw, 3rem); align-items: start; }
@media (min-width: 60rem) { .stores { grid-template-columns: 1fr 1fr; } }
.stores .store { border-top: 0; padding-block: 0; }
.stores .store + .store { border-top: 0; }
@media (max-width: 59.99rem) {
  .stores .store + .store { border-top: 1px solid var(--mist-deep); padding-top: clamp(1.75rem, 3vw, 2.5rem); }
}


/* over ons, winkels and vragen run on from one another: who we are, where we
   are, what people ask. 160px between each pushed them apart as if they were
   unrelated. */
#overons { padding-bottom: clamp(2.5rem, 4vw, 4rem); }
#winkels { padding-block: clamp(2.5rem, 4vw, 4rem); }
#vragen  { padding-top: clamp(2.5rem, 4vw, 4rem); }


/* =========================================================================
   THE BAR ON A SMALL SCREEN

   The side block and the phone link are pinned with inset-inline 0, which
   sits outside the row's own padding, so the burger ended up flush against
   the edge. They get the gutter themselves.

   The orange button also stayed in the bar, where its arrow read as a second
   control next to the burger. On a phone the burger is the only thing there.
   ========================================================================= */

@media (max-width: 68rem) {
  .masthead__side { inset-inline-end: var(--gutter); }
  .masthead__tel  { inset-inline-start: var(--gutter); }
}

@media (max-width: 48rem) {
  .masthead__side .btn { display: none; }
  .masthead__side { gap: 0; }
  .burger {
    display: grid; place-content: center; gap: 5px;
    width: 44px; height: 44px;
  }
  .burger i { display: block; width: 22px; height: 2px; background: #fff; border-radius: 2px; }
}


/* the shop's state reads as a line of type, not a pill with a coloured dot:
   open or closed, and when that changes */
.store .badge {
  display: block; width: auto;
  padding: 0; border-radius: 0; background: none;
  font-family: var(--text); font-weight: 600; font-size: .9rem;
  letter-spacing: normal; text-transform: none;
  color: #5c6376;
}
.store .badge.badge--open { color: #14171f; }


/* the reviews were fading out behind a mask at 7% and 93%, which sliced the
   first and last quote in half. They run edge to edge now; the strip is
   still clipped by the section, so nothing spills out. */
.rib-wrap { -webkit-mask-image: none; mask-image: none; }


/* the table keeps its layout; the right-hand column now invites a quote */
.price-row__amt--vraag a {
  font-family: var(--text); font-weight: 600; font-size: var(--f2, .9375rem);
  color: #b45f11; white-space: nowrap;
  border-bottom: 1px solid transparent; transition: border-color .18s var(--ease);
}
.price-row__amt--vraag a:hover { border-bottom-color: currentColor; }
.section--dark .price-row__amt--vraag a { color: var(--orange-lit); }

/* the repair cards lead with how long it takes */
.fix__price { font-size: var(--f5, 1.35rem); }
.fix__time { font-weight: 600; }


/* The grey column runs the full height of the mega panel. The panel's own
   top padding (which keeps the columns clear of the arc and the shield)
   moves into the columns, so the tint reaches the top edge and the rounded
   bottom corner. */
.mega__panel { padding-block: 0; }
.mega__main { padding: clamp(5.2rem, 6.6vw, 6.4rem) 2rem clamp(1.5rem, 2.4vw, 2.6rem); }
.mega__side { padding: clamp(5.2rem, 6.6vw, 6.4rem) 2rem clamp(1.5rem, 2.4vw, 2.6rem); border-radius: 0 0 var(--r-lg) 0; }
.mega__grid { gap: 0 clamp(1.5rem, 3vw, 3.5rem); }


/* The grey column lost its top padding to an older nth-child rule that
   outranks the class. Same selector strength, later in the file, so the
   label clears the arc like the left column does. */
.mega__grid > .mega__side { padding-top: clamp(5.2rem, 6.6vw, 6.4rem); }

/* Each shop is a card: storefront photo, then name and hours side by side,
   then the parking tip and the buttons. Times never wrap. */
.stores .store { grid-template-columns: 1fr; gap: 0; padding: 0; border: 1px solid var(--mist-deep); border-radius: var(--r-lg); overflow: hidden; background: var(--paper); }
.store__photo { margin: 0; aspect-ratio: 16 / 9; background: var(--mist); }
.store__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.store__in { padding: clamp(1.25rem, 2.4vw, 1.9rem); display: grid; gap: 1.5rem; }
@media (min-width: 40rem) {
  .store__in { grid-template-columns: 1fr 1.15fr; }
  .store__in .store__aside { grid-column: 1 / -1; }
}
.stores .store__id h3 { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem); }
.stores .hours__row { grid-template-columns: 6.6rem 1fr; gap: .5rem; }
.stores .hours__row span:last-child { white-space: nowrap; }
.stores .store__aside { grid-template-columns: 1fr; gap: 1rem; }

/* == SUBPAGES == guides, the guide hub and the legal pages */
.page-hero { position: relative; background: var(--navy); color: #fff; padding-block: calc(var(--arc-h) + 5.5rem) clamp(2.5rem, 4vw, 4rem); overflow: hidden; }
.page-hero h1 { font-family: var(--display); font-weight: 800; font-size: clamp(2rem, 1.2rem + 3vw, 3.6rem); line-height: 1.05; letter-spacing: -.03em; max-width: 22ch; margin: .8rem 0 1rem; text-transform: none; }
.page-hero .lede { color: #b3bacc; max-width: 62ch; }
.page-hero__voor { display: inline-flex; align-items: center; gap: .55rem; margin-top: 1.25rem; font-size: var(--t-sm); color: #b3bacc; }
.page-hero__voor svg { width: 18px; height: 18px; color: var(--orange); flex: none; }
.crumbs { display: flex; flex-wrap: wrap; gap: .5rem; font-size: var(--t-sm); color: #8d95a8; }
.crumbs a { color: #d6dae5; }
.crumbs a:hover { color: var(--orange); }
.crumbs [aria-current] { color: #fff; }

.guide { padding-top: clamp(2.5rem, 4vw, 4rem); }
.guide__grid { display: grid; gap: clamp(2rem, 4vw, 4rem); align-items: start; }
@media (min-width: 64rem) { .guide__grid { grid-template-columns: minmax(0, 1fr) 21rem; } }
.guide__body { max-width: 68ch; min-width: 0; }
.guide__body > p { line-height: 1.65; color: #3d4354; }
.guide__body > p + p { margin-top: 1rem; }
.guide__body h2 { font-size: clamp(1.45rem, 1.1rem + 1.2vw, 1.9rem); margin: 2.75rem 0 1rem; }
.guide__body h3 { font-size: 1.1rem; margin-bottom: .35rem; }
.guide__fig { margin: 0 0 2rem; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 16 / 9; background: var(--mist); }
.guide__fig img { width: 100%; height: 100%; object-fit: cover; display: block; }
.note { display: grid; grid-template-columns: auto 1fr; gap: 1rem; padding: 1.25rem 1.4rem; margin: 1.75rem 0; border-radius: var(--r); background: var(--mist); }
.note svg { width: 24px; height: 24px; color: var(--orange); margin-top: .15rem; }
.note b { display: block; margin-bottom: .25rem; color: var(--ink); }
.note p { font-size: var(--t-sm); line-height: 1.55; color: #3d4354; }
.guide__list { display: grid; gap: .5rem; padding-left: 1.25rem; margin: 0; line-height: 1.55; color: #3d4354; }
.guide__list--winkel { list-style: none; padding-left: 0; margin-block: 1rem; }
.guide__list--winkel li { display: grid; grid-template-columns: auto 1fr; gap: .7rem; align-items: start; }
.guide__list--winkel svg { width: 18px; height: 18px; color: var(--orange); margin-top: .2rem; }
.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; }
.steps li { display: grid; grid-template-columns: 2.6rem 1fr; gap: 1rem; padding: 1.25rem 1.4rem; border-radius: var(--r); border: 1px solid var(--mist-deep); background: var(--paper); }
.steps__no { width: 2.6rem; height: 2.6rem; border-radius: 50%; display: grid; place-items: center; background: var(--navy); color: #fff; font-family: var(--display); font-weight: 800; font-size: 1.05rem; }
.steps p { color: #3d4354; line-height: 1.6; font-size: var(--t-base); }
.guide__aside { display: grid; gap: 1.25rem; position: sticky; top: calc(var(--bar) + 2rem); }
.aside-card { padding: 1.5rem; border-radius: var(--r-lg); background: var(--mist); }
.aside-card h3 { font-size: 1.15rem; margin-bottom: .6rem; }
.aside-card p { font-size: var(--t-sm); line-height: 1.55; color: #3d4354; }
.aside-card--navy { background: var(--navy); color: #fff; }
.aside-card--navy h3 { color: #fff; }
.aside-card--navy p { color: #b3bacc; }
.aside-card__shops { list-style: none; padding: 0; margin: 1rem 0 1.25rem; display: grid; font-size: var(--t-sm); }
.aside-card__shops li { display: flex; justify-content: space-between; gap: 1rem; padding-block: .55rem; border-bottom: 1px solid var(--navy-line); }
.aside-card__shops b { color: #fff; }
.aside-card__shops span { color: #b3bacc; text-align: right; }
.aside-card .btn { width: 100%; justify-content: center; }
.aside-card__contact { display: grid; gap: .25rem; margin-top: .9rem; }
.aside-card__contact a { display: flex; align-items: center; gap: .6rem; font-size: var(--t-sm); font-weight: 600; color: #fff; padding: .5rem .2rem; }
.aside-card__contact a:hover { color: var(--orange-lit); }
.aside-card__contact svg { width: 18px; height: 18px; color: var(--orange); }
.aside-card__links { list-style: none; padding: 0; margin: 0; display: grid; }
.aside-card__links li + li { border-top: 1px solid var(--mist-deep); }
.aside-card__links a { display: block; padding: .7rem 0; font-size: var(--t-sm); font-weight: 600; color: var(--navy); }
.aside-card__links a:hover { color: #b45f11; }

.hub { padding-top: clamp(2.5rem, 4vw, 4rem); }
.hub__tools { display: grid; gap: 1rem; margin-bottom: clamp(2rem, 3vw, 3rem); }
.search { position: relative; max-width: 34rem; }
.search input { width: 100%; padding: .95rem 1.1rem .95rem 3rem; border-radius: 99px; border: 2px solid var(--mist-deep); background: var(--paper); font: inherit; font-size: var(--t-base); color: var(--navy); }
.search input:focus { outline: none; border-color: var(--navy); }
.search input::placeholder { color: #99a1b2; }
.search svg { position: absolute; left: 1.1rem; top: 50%; translate: 0 -50%; width: 20px; height: 20px; color: #868e9f; pointer-events: none; }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.chips__label { font-size: .8rem; font-weight: 700; color: #868e9f; margin-right: .25rem; }
.chip { font: inherit; font-size: .85rem; font-weight: 600; padding: .55rem 1rem; border-radius: 99px; border: 2px solid var(--mist-deep); background: var(--paper); color: var(--navy); cursor: pointer; transition: border-color .2s, background-color .2s, color .2s; }
.chip:hover { border-color: var(--navy); }
.chip[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.hub__count { font-size: var(--t-sm); color: #5c6376; margin-bottom: 1.5rem; }
.hub__group + .hub__group { margin-top: clamp(2.5rem, 4vw, 4rem); }
.hub__group h2 { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.8rem); margin-bottom: 1.25rem; }
.hub__empty { padding: 3rem 1rem; text-align: center; color: #5c6376; }
.hub__empty a { color: #b45f11; font-weight: 600; }
.gcards { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }
.gcard { display: grid; grid-template-rows: auto 1fr auto; border-radius: var(--r-lg); background: var(--paper); border: 1px solid var(--mist-deep); overflow: hidden; color: inherit; transition: transform .35s var(--ease), box-shadow .35s; }
.gcard:hover { transform: translateY(-6px); box-shadow: 0 28px 54px -30px rgba(18,20,28,.45); }
.gcard__img { aspect-ratio: 16 / 10; background: var(--mist); overflow: hidden; }
.gcard__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--soft); }
.gcard:hover .gcard__img img { transform: scale(1.04); }
.gcard__body { padding: 1.2rem 1.3rem .4rem; display: grid; gap: .5rem; align-content: start; }
.gcard h3 { font-size: 1.1rem; line-height: 1.25; }
.gcard p { font-size: var(--t-sm); color: #5c6376; line-height: 1.5; }
.gcard__go { display: flex; align-items: center; justify-content: space-between; padding: .9rem 1.3rem 1.2rem; font-size: .82rem; font-weight: 700; color: var(--navy); }
.gcard__go svg { width: 16px; height: 16px; color: var(--orange); }

.legal { max-width: 74ch; line-height: 1.65; color: #3d4354; }
.legal h2 { font-size: clamp(1.25rem, 1rem + .9vw, 1.6rem); margin: 2.5rem 0 .75rem; color: var(--ink); }
.legal > h2:first-child { margin-top: 0; }
.legal p + p { margin-top: .9rem; }
.legal ul, .legal ol { padding-left: 1.3rem; display: grid; gap: .4rem; margin: .75rem 0; }
.legal__meta { padding: 1.25rem 1.4rem; background: var(--mist); border-radius: var(--r); font-size: var(--t-sm); margin-bottom: 2rem; }
.legal__meta p + p { margin-top: .4rem; }
.legal table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); margin: .75rem 0 1.25rem; }
.legal th, .legal td { text-align: left; padding: .6rem .5rem; border-bottom: 1px solid var(--mist-deep); vertical-align: top; }
.legal th { color: var(--ink); }

/* the sticky bar sits on every subpage exactly as on the homepage, but the
   pages have no hero photo, so the arc's grey never meets a dark image */
body.sub .page-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 80% at 80% 0%, rgba(245,130,31,.14), transparent 60%); pointer-events: none; }
body.sub .page-hero .shell { position: relative; }

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }


/* the day label in the shop cards never wraps; the time takes the rest */
.stores .hours__row { grid-template-columns: auto 1fr; gap: 1rem; }
.stores .hours__row span:first-child { white-space: nowrap; }
.stores .hours__row span:last-child { text-align: right; }

/* Google reviews card next to the reviews heading */
.reviews-head { display: grid; gap: clamp(1.5rem, 3vw, 3rem); align-items: start; margin-bottom: clamp(2rem, 3vw, 3rem); }
@media (min-width: 60rem) { .reviews-head { grid-template-columns: 1fr minmax(20rem, 26rem); align-items: center; } }
.reviews-head .section-head { margin-bottom: 0; }
.greview { display: grid; grid-template-columns: auto 1fr; gap: 1.1rem; padding: 1.5rem; border-radius: var(--r-lg); background: #fff; color: var(--ink); }
.greview__g { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: var(--mist); }
.greview__g svg { width: 26px; height: 26px; }
.greview__body { display: grid; gap: .45rem; }
.greview__body b { font-family: var(--display); font-weight: 800; font-size: 1.05rem; letter-spacing: -.01em; }
.greview__stars { display: flex; gap: 3px; color: var(--orange); }
.greview__stars svg { width: 18px; height: 18px; }
.greview__body p { font-size: var(--t-sm); line-height: 1.5; color: #5c6376; }
.greview__links { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .35rem; }
.greview__links a { display: inline-flex; align-items: center; gap: .4rem; font-size: .83rem; font-weight: 700; padding: .5rem .9rem; border-radius: 99px; border: 2px solid var(--mist-deep); color: var(--navy); transition: border-color .25s, background-color .25s, color .25s; }
.greview__links a:hover { border-color: var(--navy); background: var(--navy); color: #fff; }
.greview__links svg { width: 14px; height: 14px; }

/* the Google card stacks the G above the text on narrow screens */
@media (max-width: 30rem) { .greview { grid-template-columns: 1fr; } }

.greview__score { font-size: 1.6rem; letter-spacing: -.03em; margin-right: .15rem; }

/* every guide opens with the same line: tips, own risk, come by */
.disclaimer { display: grid; grid-template-columns: auto 1fr; gap: .8rem; align-items: start; padding: 1rem 1.2rem; margin: 0 0 1.75rem; border-radius: var(--r); background: #fff4e8; color: #5a3a17; font-size: var(--t-sm); line-height: 1.55; }
.disclaimer svg { width: 20px; height: 20px; color: #c2600c; margin-top: .15rem; }
.disclaimer b { color: #3d2a12; }
.disclaimer a { color: #b45f11; font-weight: 600; text-decoration: underline; }


/* == HUB FILTERS == The subpage header is white: breadcrumb, title, lede. */
body.sub .page-hero { background: #fff; color: var(--ink); padding-bottom: clamp(1rem, 2.5vw, 2rem); }
body.sub .page-hero::before { display: none; }
body.sub .page-hero .lede { color: #545b6d; }
body.sub .crumbs { color: #99a1b2; }
body.sub .crumbs a { color: #545b6d; }
body.sub .crumbs a:hover { color: #b45f11; }
body.sub .crumbs [aria-current] { color: var(--ink); }
body.sub .page-hero__voor { color: #545b6d; }
body.sub .guide { padding-top: clamp(1rem, 2vw, 2rem); }

/* the hub: filter column left, results right, pages below */
.hub { padding-top: 0; }
.hub__layout { display: grid; gap: 1.5rem; align-items: start; }
@media (min-width: 64rem) {
  .hub__layout { grid-template-columns: 16rem minmax(0, 1fr); gap: 3rem; }
  .filters { position: sticky; top: calc(var(--bar) + 1.5rem); }
  .filters__toggle { display: none; }
}
.filters { display: grid; gap: 1.5rem; align-content: start; }
@media (max-width: 63.99rem) {
  .filters { display: none; padding: 1.25rem; border: 1px solid var(--mist-deep); border-radius: var(--r-lg); order: 2; }
  .filters.is-open { display: grid; }
  .hub__main { order: 1; }
}
.filters__head { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: .75rem; border-bottom: 1px solid var(--mist-deep); }
.filters__head h2 { font-size: 1.1rem; }
.filters__reset { font: inherit; font-size: .8rem; font-weight: 700; color: #b45f11; background: none; border: 0; cursor: pointer; padding: 0; }
.filters__group { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: .1rem; }
.filters__group legend { font-weight: 700; font-size: .92rem; margin-bottom: .55rem; color: var(--ink); padding: 0; }
.filters__opt { display: flex; align-items: center; gap: .6rem; padding: .45rem .6rem; border-radius: 10px; cursor: pointer; font-size: var(--t-sm); color: #3d4354; transition: background-color .15s; }
.filters__opt:hover { background: var(--mist); }
.filters__opt input { accent-color: var(--navy); width: 16px; height: 16px; margin: 0; flex: none; }
.filters__opt small { margin-left: auto; color: #868e9f; font-size: .78rem; font-variant-numeric: tabular-nums; }
.filters__opt:has(input:checked) { background: var(--navy); color: #fff; }
.filters__opt:has(input:checked) small { color: #b3bacc; }
.filters__opt:has(input:focus-visible) { outline: 2px solid var(--orange); outline-offset: 1px; }

.hub__main { min-width: 0; }
.hub__bar { display: grid; grid-template-columns: 1fr; gap: .75rem; margin-bottom: .9rem; }
@media (min-width: 40rem) { .hub__bar { grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; } }
.hub .search { max-width: none; }
.hub .search input { padding-block: .85rem; }
.sort select { font: inherit; font-size: var(--t-sm); font-weight: 600; padding: .82rem 2.6rem .82rem 1.1rem; border-radius: 99px; border: 2px solid var(--mist-deep); background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6 9l6 6 6-6' fill='none' stroke='%231e2230' stroke-width='2' stroke-linecap='round'/></svg>") no-repeat right .9rem center / 16px; appearance: none; -webkit-appearance: none; color: var(--navy); cursor: pointer; width: 100%; }
.sort select:focus { outline: none; border-color: var(--navy); }
.filters__toggle { font: inherit; font-size: var(--t-sm); font-weight: 600; padding: .82rem 1.2rem; border-radius: 99px; border: 2px solid var(--navy); background: #fff; color: var(--navy); cursor: pointer; }
.filters__toggle[aria-expanded="true"] { background: var(--navy); color: #fff; }
.hub__status { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-bottom: 1.25rem; font-size: var(--t-sm); color: #5c6376; }
.hub__status p { margin: 0; }
.hub__active { display: flex; flex-wrap: wrap; gap: .4rem; }
.tag { display: inline-flex; align-items: center; gap: .45rem; padding: .35rem .75rem; border-radius: 99px; background: var(--mist); color: var(--navy); font: inherit; font-size: .8rem; font-weight: 600; border: 0; cursor: pointer; }
.tag:hover { background: var(--mist-deep); }
.tag svg { width: 12px; height: 12px; }
.hub .gcards { grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr)); }
.gcard__foot { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .8rem 1.3rem 1.2rem; font-size: .78rem; color: #5c6376; }
.gcard__foot b { font-weight: 700; color: var(--navy); white-space: nowrap; }
.pager { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .4rem; margin-top: clamp(2rem, 3vw, 3rem); }
.pager button { font: inherit; font-size: var(--t-sm); font-weight: 600; min-width: 2.6rem; height: 2.6rem; padding: 0 .85rem; border-radius: 99px; border: 2px solid var(--mist-deep); background: #fff; color: var(--navy); cursor: pointer; transition: border-color .2s, background-color .2s; }
.pager button:hover:not(:disabled) { border-color: var(--navy); }
.pager button[aria-current="page"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.pager button:disabled { opacity: .35; cursor: default; }
.pager span { padding: 0 .3rem; color: #868e9f; }

/* phones: the filters slide up as a sheet over the list */
.filters__close { display: none; font: inherit; font-size: .85rem; font-weight: 700; padding: .5rem 1rem; border-radius: 99px; border: 0; background: var(--navy); color: #fff; cursor: pointer; }
@media (max-width: 63.99rem) {
  .filters.is-open { position: fixed; inset: auto 0 0 0; z-index: 120; max-height: 82vh; overflow: auto; margin: 0; padding: 1.25rem var(--gutter) calc(1.25rem + env(safe-area-inset-bottom)); border: 0; border-radius: var(--r-lg) var(--r-lg) 0 0; background: #fff; box-shadow: 0 -30px 60px -30px rgba(6,8,14,.5); }
  .filters.is-open .filters__close { display: inline-block; }
  .filters__head { gap: .75rem; }
  body.sheet-open::after { content: ""; position: fixed; inset: 0; z-index: 110; background: rgba(18,20,28,.45); }
}

/* the honeypot field is off screen; the error line shows when sending fails */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; opacity: 0; }
.wz-error { margin: .75rem 0 0; padding: .7rem 1rem; border-radius: 10px; background: #fdeceb; color: #8a2a22; font-size: var(--t-sm); line-height: 1.5; }

/* reviews: one row. Four across on a wide screen; on a phone the same row
   scrolls sideways and snaps card by card. */
.reviews-row { display: grid; grid-auto-flow: column; grid-auto-columns: min(19rem, 82vw); gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; padding: .25rem 0 .75rem; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.reviews-row::-webkit-scrollbar { display: none; }
.reviews-row .quote { flex: none; width: auto; min-width: 0; scroll-snap-align: start; }
@media (min-width: 64rem) { .reviews-row { grid-auto-flow: row; grid-template-columns: repeat(4, 1fr); grid-auto-columns: auto; overflow: visible; padding-bottom: 0; } }

/* figure has a browser default margin of 40px on each side; not here */
.reviews-row .quote { margin: 0; padding-top: 2.4rem; }
.quote blockquote { margin: 0; }
.quote p { width: auto; }

/* After sending: the empty button row goes, the confirmation sits compact
   in the card, so the card keeps its size and the hero does not grow. */
.wizard.is-done .wz-nav { display: none; }
.wizard.is-done .wz-done { padding: 1.1rem .5rem .4rem; gap: .6rem; }
.wizard.is-done .wz-done__mark { width: 56px; height: 56px; }
.wizard.is-done .wz-done__mark svg { width: 26px; height: 26px; }
.wizard.is-done .wz-done h3 { font-size: var(--t-lg); }
.wizard.is-done .wz-done p { max-width: 56ch; }
.wizard.is-done .wz-ref { margin-block: .1rem; }
.wizard.is-done .wz-done { padding: .5rem .5rem .1rem; }
.wizard.is-done .wizard__side { display: none; }

/* the open/closed strip: name and address on the first line, the state on
   the second; from tablet width everything on one line */
.ribbon__store { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "name link" "status status"; align-items: baseline; column-gap: 1rem; row-gap: .15rem; padding-block: .2rem; }
.ribbon__name { grid-area: name; }
.ribbon__link { grid-area: link; margin-left: 0; }
.ribbon__status { grid-area: status; display: flex; flex-wrap: wrap; gap: .25rem .35rem; }
.ribbon__state { color: #d6dae5; }
.ribbon__store.is-open .ribbon__state { color: var(--open); }
.ribbon__meta:not(:empty)::before { content: ", "; }
@media (min-width: 48rem) {
  .ribbon__store { grid-template-columns: auto 1fr auto; grid-template-areas: "name status link"; column-gap: .8rem; }
  .ribbon__link { justify-self: end; }
}