/* ==========================================================================
   Webstoep — site styles
   Idea: Dutch street furniture. Enamel street-name signs (blue, white border),
   herringbone pavement, shop-window lettering. Everything else stays quiet.
   ========================================================================== */

@font-face {
  font-family: "Barlow Condensed";
  src: url("../fonts/barlow-condensed-latin-600-normal.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Barlow Condensed";
  src: url("../fonts/barlow-condensed-latin-700-normal.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Barlow";
  src: url("../fonts/barlow-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  /* Romanian characters (ș, ț, ă, î, â) */
  font-family: "Barlow";
  src: url("../fonts/barlow-latin-ext-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Barlow";
  src: url("../fonts/barlow-latin-400-italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Barlow";
  src: url("../fonts/barlow-latin-700-normal.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  --scroll: 0;
  /* colour */
  --sign: #1B3F8F;        /* enamel street-sign blue */
  --sign-deep: #142F6B;
  --paper: #F6F7F4;       /* cool off-white, like painted plaster */
  --white: #FFFFFF;
  --ink: #15191F;
  --stone: #5C626A;       /* secondary text (5.9:1 on paper) */
  --kerb: #DADCD6;        /* lines, borders */
  --klinker: #E9EAE5;     /* light pavement surface */
  --signal: #F5C431;      /* road-marking yellow, only on blue */
  --ok: #1F6B3A;
  --error: #B3261E;

  /* type */
  --display: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;
  --text: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;

  --step--1: clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem);
  --step-0: clamp(1.0625rem, 1.02rem + 0.2vw, 1.1875rem);
  --step-1: clamp(1.25rem, 1.15rem + 0.45vw, 1.5rem);
  --step-2: clamp(1.6rem, 1.4rem + 0.9vw, 2.125rem);
  --step-3: clamp(2.1rem, 1.7rem + 1.8vw, 3.25rem);
  --step-4: clamp(2.75rem, 2rem + 3.6vw, 5.25rem);

  /* space */
  --gutter: clamp(1rem, 0.6rem + 2vw, 2.5rem);
  --section: clamp(3.5rem, 2.5rem + 5vw, 7rem);
  --measure: 62ch;
  --wide: 76rem;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--text);
  font-size: var(--step-0);
  line-height: 1.6;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; height: auto; }
h1, h2, h3 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.005em;
  margin: 0 0 0.5em;
  text-wrap: balance;
}
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); font-weight: 600; line-height: 1.2; letter-spacing: 0.01em; }
p { margin: 0 0 1em; max-width: var(--measure); text-wrap: pretty; }
a { color: var(--sign); text-decoration-thickness: 0.08em; text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 0.14em; }
strong { font-weight: 700; }
::selection { background: var(--signal); color: var(--ink); }

:focus-visible {
  outline: 3px solid var(--sign);
  outline-offset: 3px;
  border-radius: 2px;
}
.on-blue :focus-visible { outline-color: var(--signal); }

.skip {
  position: absolute; left: 1rem; top: -4rem; z-index: 100;
  background: var(--ink); color: var(--white); padding: 0.6rem 1rem; text-decoration: none;
}
.skip:focus { top: 1rem; }

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

.wrap { width: min(100% - 2 * var(--gutter), var(--wide)); margin-inline: auto; }
.lede { font-size: var(--step-1); line-height: 1.5; color: var(--ink); }
.muted { color: var(--stone); }
.small { font-size: var(--step--1); }

/* ---------- the street sign (logo + hero) ---------- */
.sign {
  --pad: 0.32em;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--sign);
  color: var(--white);
  font-family: var(--display);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.02em;
  border-radius: 0.28em;
  padding: calc(var(--pad) + 0.12em) calc(var(--pad) * 2.2) var(--pad);
  box-shadow: inset 0 0 0 0.07em var(--sign), inset 0 0 0 0.12em var(--white);
  text-decoration: none;
}
.logo { font-size: 1.65rem; }
.logo:hover { text-decoration: none; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  min-height: 3rem; padding: 0.7rem 1.35rem;
  font: 700 var(--step-0)/1.1 var(--text);
  text-decoration: none; cursor: pointer;
  border: 2px solid var(--sign); border-radius: 0.4rem;
  background: var(--sign); color: var(--white);
  transition: background-color 0.15s ease, color 0.15s ease;
}
.btn:hover { background: var(--sign-deep); border-color: var(--sign-deep); text-decoration: none; }
.btn--line { background: transparent; color: var(--sign); }
.btn--line:hover { background: var(--sign); color: var(--white); }
.btn--signal { background: var(--signal); border-color: var(--signal); color: var(--ink); }
.btn--signal:hover { background: #FFD65C; border-color: #FFD65C; }
.btn[disabled] { opacity: 0.6; cursor: progress; }
.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; }

/* ---------- header ---------- */
.site-header { background: var(--paper); border-bottom: 1px solid var(--kerb); position: sticky; top: 0; z-index: 20; transition: box-shadow 0.25s ease; }
.site-header.is-scrolled { box-shadow: 0 10px 24px -18px rgba(21, 25, 31, 0.45); }
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 4.75rem;
}
.nav-toggle {
  display: none;
  font: 700 var(--step--1)/1 var(--text);
  background: none; border: 2px solid var(--ink); color: var(--ink);
  border-radius: 0.4rem; min-height: 2.75rem; padding: 0 0.9rem; cursor: pointer;
}
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: clamp(0.75rem, 2vw, 2rem); }
.site-nav a:not(.btn) {
  color: var(--ink); text-decoration: none; font-weight: 700; font-size: var(--step--1);
  padding: 0.5rem 0.1rem; border-bottom: 3px solid transparent;
}
.site-nav a:not(.btn):hover { border-bottom-color: var(--kerb); }
.site-nav a[aria-current="page"] { border-bottom-color: var(--sign); }
.site-nav .btn { min-height: 2.75rem; padding: 0.5rem 1rem; font-size: var(--step--1); }

@media (max-width: 52rem) {
  .nav-toggle { display: inline-flex; align-items: center; }
  .site-nav {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--paper); border-bottom: 1px solid var(--kerb);
    padding: 0.5rem var(--gutter) 1.5rem;
  }
  .site-nav.is-open { display: block; }
  .site-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .site-nav li { border-bottom: 1px solid var(--kerb); }
  .site-nav li:last-child { border-bottom: 0; padding-top: 1rem; }
  .site-nav a:not(.btn) { display: block; padding: 0.95rem 0; font-size: var(--step-0); border-bottom: 0; }
  .site-nav a[aria-current="page"] { color: var(--sign); }
  .site-nav .btn { width: 100%; min-height: 3rem; font-size: var(--step-0); }
  .no-js .site-nav { display: block; position: static; padding: 0 0 1rem; }
}

/* ---------- pavement band ---------- */
.pavement {
  height: clamp(2.5rem, 4vw, 3.5rem);
  background: #A9ACA5 url("../img/paving.svg") repeat;
  background-size: 48px 48px;
  border-top: 6px solid #8E9189; /* the kerb */
}

/* ---------- hero (home) ---------- */
.hero { padding-top: clamp(2.5rem, 2rem + 4vw, 5.5rem); padding-bottom: clamp(2.5rem, 2rem + 3vw, 4.5rem); }
.hero .wrap { display: grid; gap: clamp(2rem, 4vw, 4rem); align-items: end; }
@media (min-width: 60rem) { .hero .wrap { grid-template-columns: 1.25fr 0.75fr; } }
.hero h1 { max-width: 13ch; margin-bottom: 0.35em; }
.hero .lede { max-width: 40ch; }

.street {
  display: grid; justify-items: start; gap: 0.6rem;
  padding-bottom: 0.5rem;
}
.street .sign { font-size: clamp(2.6rem, 1.6rem + 5vw, 5.75rem); }
.street .sign--small {
  font-size: clamp(1rem, 0.9rem + 0.6vw, 1.35rem);
  font-weight: 600; letter-spacing: 0.04em;
  box-shadow: inset 0 0 0 0.12em var(--sign), inset 0 0 0 0.2em var(--white);
  padding: 0.55em 1em 0.45em;
}
.street .post {
  width: 0.7rem; height: clamp(3rem, 6vw, 5.5rem);
  margin-left: clamp(2.5rem, 7vw, 5.5rem);
  background: linear-gradient(90deg, #6F737A, #9A9EA4 45%, #5E6268);
  border-radius: 2px 2px 0 0;
}
@media (max-width: 59.99rem) {
  .street { grid-row: 1; }
  .street .post { display: none; }
}

/* ---------- sections ---------- */
.section { padding-block: var(--section); }
.section--tight { padding-top: 1rem; }
.section--white { background: var(--white); border-block: 1px solid var(--kerb); }
.section-head { max-width: 46rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.section-head p { color: var(--stone); }

/* what's included: plain two-column list, not cards */
.included { display: grid; gap: 0 clamp(2rem, 5vw, 5rem); margin: 0; padding: 0; }
@media (min-width: 44rem) { .included { grid-template-columns: 1fr 1fr; } }
.included div { padding: 1.1rem 0; border-top: 1px solid var(--kerb); }
.included dt { font-weight: 700; margin-bottom: 0.2rem; }
.included dd { margin: 0; color: var(--stone); max-width: 42ch; }

/* how it works: a real sequence, so numbered */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 2rem; counter-reset: step; }
@media (min-width: 52rem) { .steps { grid-template-columns: repeat(4, 1fr); gap: 1.5rem; } }
.steps li { counter-increment: step; position: relative; padding-top: 3.6rem; }
.steps li::before {
  content: counter(step);
  position: absolute; top: 0; left: 0;
  width: 2.6rem; height: 2.6rem; display: grid; place-items: center;
  font: 700 1.35rem/1 var(--display);
  background: var(--white); color: var(--sign);
  border: 2px solid var(--sign); border-radius: 50%;
}
@media (min-width: 52rem) {
  .steps li::after {
    content: ""; position: absolute; top: 1.3rem; left: 3.1rem; right: -1rem;
    border-top: 2px dashed var(--kerb);
  }
  .steps li:last-child::after { display: none; }
}
.steps h3 { margin-bottom: 0.3rem; }
.steps p { color: var(--stone); font-size: var(--step--1); margin: 0; }

/* price teaser */
.price-teaser { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 52rem) { .price-teaser { grid-template-columns: 1fr auto; } }
.price-teaser .from { font: 700 var(--step-4)/1 var(--display); color: var(--sign); margin: 0; }
.price-teaser .from small { display: block; font: 400 var(--step-0)/1.4 var(--text); color: var(--stone); margin-top: 0.4rem; }

/* honesty note */
.note {
  border-left: 4px solid var(--signal);
  background: var(--white);
  padding: 1.25rem 1.5rem;
  max-width: 48rem;
}
.note p:last-child { margin-bottom: 0; }

/* blue contact band */
.band { background: var(--sign); color: var(--white); padding-block: clamp(3rem, 2rem + 4vw, 5rem); }
.band h2 { color: var(--white); max-width: 18ch; }
.band p { color: #DCE3F2; }
.band a:not(.btn) { color: var(--white); }
.band .wrap { display: grid; gap: 1.5rem; align-items: end; }
@media (min-width: 52rem) { .band .wrap { grid-template-columns: 1fr auto; } }

/* ---------- page header (inner pages) ---------- */
.page-head { padding-top: clamp(2.5rem, 2rem + 3vw, 4.5rem); padding-bottom: clamp(1.5rem, 1rem + 2vw, 2.5rem); }
.page-head h1 { font-size: var(--step-4); max-width: 16ch; }
.page-head .lede { max-width: 50ch; color: var(--stone); }

/* ---------- prices ---------- */
.menu { border-top: 3px solid var(--ink); }
.menu-item {
  display: grid; gap: 0.75rem 2rem;
  padding: clamp(1.5rem, 3vw, 2.25rem) 0;
  border-bottom: 1px solid var(--kerb);
}
@media (min-width: 52rem) {
  .menu-item { grid-template-columns: 14rem 1fr 11rem; align-items: start; }
}
.menu-item h3 { font: 700 var(--step-2)/1 var(--display); margin: 0; }
.menu-item .for { color: var(--stone); font-size: var(--step--1); margin: 0.35rem 0 0; }
.menu-item ul { margin: 0; padding-left: 1.1rem; }
.menu-item li { margin-bottom: 0.25rem; }
.menu-item .price { font: 700 var(--step-3)/1 var(--display); color: var(--sign); margin: 0; }
@media (min-width: 52rem) { .menu-item .price { text-align: right; } }
.menu-item .price span { display: block; font: 400 var(--step--1)/1.4 var(--text); color: var(--stone); margin-top: 0.35rem; }
.menu-item--pick { background: var(--white); margin-inline: calc(-1 * clamp(0.75rem, 2vw, 1.5rem)); padding-inline: clamp(0.75rem, 2vw, 1.5rem); }
.tag {
  display: inline-block; margin-top: 0.6rem;
  font-size: var(--step--1); font-weight: 700;
  background: var(--signal); color: var(--ink); padding: 0.15rem 0.55rem; border-radius: 0.25rem;
}

.two-col { display: grid; gap: clamp(2rem, 5vw, 4rem); }
@media (min-width: 52rem) { .two-col { grid-template-columns: 1fr 1fr; } }

.plan { border: 2px solid var(--ink); border-radius: 0.5rem; padding: 1.5rem; background: var(--white); }
.plan + .plan { margin-top: 1rem; }
.plan header { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.plan h3 { margin: 0; font-size: var(--step-2); font-family: var(--display); font-weight: 700; }
.plan .per { font: 700 var(--step-2)/1 var(--display); color: var(--sign); }
.plan .per small { font: 400 var(--step--1) var(--text); color: var(--stone); }
.plan p { margin: 0; color: var(--stone); }

.extras { width: 100%; border-collapse: collapse; }
.extras th, .extras td { text-align: left; padding: 0.8rem 0; border-bottom: 1px solid var(--kerb); vertical-align: top; }
.extras td:last-child, .extras th:last-child { text-align: right; white-space: nowrap; padding-left: 1rem; }
.extras th { font-size: var(--step--1); color: var(--stone); font-weight: 700; }

/* FAQ disclosure */
.faq { max-width: 50rem; }
.faq details { border-bottom: 1px solid var(--kerb); }
.faq summary {
  cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; gap: 1rem; align-items: center;
  padding: 1.1rem 0; font-weight: 700;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; font: 700 1.6rem/1 var(--display); color: var(--sign);
  flex: none; width: 1.5rem; text-align: center; transition: transform 0.2s ease;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > div { padding: 0 0 1.25rem; color: var(--stone); }
.faq details > div p:last-child { margin-bottom: 0; }

/* ---------- work (concepts) ---------- */
.concepts { display: grid; gap: clamp(3rem, 6vw, 5rem); }
.concept { display: grid; gap: 1.5rem 3rem; align-items: center; }
@media (min-width: 56rem) {
  .concept { grid-template-columns: 1.15fr 0.85fr; }
  .concept:nth-child(even) .browser { order: 2; }
}
.concept h2 { font-size: var(--step-2); }
.concept dl { margin: 1rem 0 0; display: grid; gap: 0.5rem; }
.concept dt { font-weight: 700; }
.concept dd { margin: 0 0 0.5rem; color: var(--stone); }
.label-concept {
  display: inline-block; font-size: var(--step--1); font-weight: 700;
  border: 1.5px solid var(--stone); color: var(--stone);
  border-radius: 999px; padding: 0.1rem 0.7rem; margin-bottom: 0.9rem;
}

/* little browser frame drawn in CSS */
.browser {
  border-radius: 0.6rem; overflow: hidden;
  border: 1px solid #C9CBC5; background: var(--white);
  box-shadow: 0 1px 0 #C9CBC5, 0 18px 40px -24px rgba(21, 25, 31, 0.45);
}
.browser-bar {
  display: flex; align-items: center; gap: 0.35rem;
  padding: 0.55rem 0.75rem; background: #EDEEEA; border-bottom: 1px solid #DADCD6;
}
.browser-bar i { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: #C9CBC5; }
.browser-bar span {
  margin-left: 0.6rem; flex: 1; font-size: 0.75rem; color: var(--stone);
  background: var(--white); border-radius: 0.3rem; padding: 0.15rem 0.6rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mock { aspect-ratio: 16 / 10; position: relative; overflow: hidden; font-size: clamp(0.55rem, 0.4rem + 0.6vw, 0.85rem); }

/* concept 1: barber */
.mock--barber { background: #1E2A24; color: #F1EDE4; padding: 1.4em 1.8em; display: grid; grid-template-rows: auto 1fr auto; }
.mock--barber .m-nav { display: flex; justify-content: space-between; font-weight: 700; letter-spacing: 0.08em; font-size: 0.85em; }
.mock--barber .m-nav b { color: #D8B26E; }
.mock--barber .m-hero { align-self: center; }
.mock--barber .m-hero strong { display: block; font: 700 3.4em/0.95 var(--display); }
.mock--barber .m-hero em { font-style: normal; color: #B8C2B9; }
.mock--barber .m-book { display: inline-block; margin-top: 1em; background: #D8B26E; color: #1E2A24; font-weight: 700; padding: 0.55em 1.1em; border-radius: 0.3em; }
.mock--barber .m-hours { display: flex; gap: 1.8em; font-size: 0.85em; color: #B8C2B9; border-top: 1px solid #3A4A40; padding-top: 0.8em; }

/* concept 2: café */
.mock--cafe { background: #FBF6EE; color: #2B2118; display: grid; grid-template-columns: 1.1fr 0.9fr; }
.mock--cafe .m-text { padding: 1.6em 1.8em; display: flex; flex-direction: column; justify-content: center; }
.mock--cafe .m-text strong { font: 700 2.8em/0.95 var(--display); color: #8A3B12; }
.mock--cafe .m-text span { margin-top: 0.6em; color: #6B5A4A; }
.mock--cafe .m-menu { margin-top: 1em; display: grid; gap: 0.35em; font-size: 0.9em; }
.mock--cafe .m-menu div { display: flex; justify-content: space-between; border-bottom: 1px dotted #CDBFAE; padding-bottom: 0.2em; }
.mock--cafe .m-pic {
  background:
    radial-gradient(circle at 50% 46%, #F6EBDD 0 18%, #6B3E1F 19% 27%, #EDE1D0 28% 40%, transparent 41%),
    linear-gradient(160deg, #C7A27C, #8E6542);
}

/* concept 3: personal trainer */
.mock--pt { background: #F3F5F7; color: #0F1720; padding: 1.4em 1.8em; display: grid; grid-template-rows: auto 1fr; gap: 1em; }
.mock--pt .m-nav { display: flex; justify-content: space-between; font-weight: 700; font-size: 0.85em; }
.mock--pt .m-nav b { background: #C2410C; color: #fff; padding: 0.2em 0.7em; border-radius: 999px; }
.mock--pt .m-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 1.2em; align-items: center; }
.mock--pt .m-grid strong { font: 700 2.9em/0.95 var(--display); }
.mock--pt .m-grid p { margin: 0.6em 0 0; color: #4A5562; font-size: 0.9em; }
.mock--pt .m-slots { display: grid; gap: 0.45em; }
.mock--pt .m-slots span { background: #fff; border: 1px solid #D5DBE1; border-radius: 0.4em; padding: 0.5em 0.7em; display: flex; justify-content: space-between; font-size: 0.85em; }
.mock--pt .m-slots span b { color: #C2410C; }

/* ---------- about ---------- */
.story { display: grid; gap: clamp(2rem, 5vw, 5rem); }
@media (min-width: 56rem) { .story { grid-template-columns: 1fr 18rem; align-items: start; } }
.story-text p:first-of-type::first-line { font-weight: 700; }
.story-text h2 { font-size: var(--step-2); margin-top: 2.5rem; }
.facts { position: sticky; top: 1.5rem; background: var(--white); border: 1px solid var(--kerb); border-radius: 0.5rem; padding: 1.5rem; }
.facts h2 { font-size: var(--step-1); margin-bottom: 0.75rem; }
.facts dl { margin: 0; }
.facts dt { font-size: var(--step--1); color: var(--stone); }
.facts dd { margin: 0 0 0.9rem; font-weight: 700; }

.people { display: grid; gap: 2rem; margin-top: 1rem; }
@media (min-width: 40rem) { .people { grid-template-columns: 1fr 1fr; } }
.person { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start; }
.person .initial {
  width: 3.5rem; height: 3.5rem; border-radius: 0.3rem;
  display: grid; place-items: center;
  background: var(--sign); color: var(--white);
  font: 600 1.8rem/1 var(--display);
  box-shadow: inset 0 0 0 3px var(--sign), inset 0 0 0 5px var(--white);
}
.person h3 { margin: 0.2rem 0 0.25rem; }
.person p { margin: 0; color: var(--stone); font-size: var(--step--1); }

.langs { display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0; margin: 1rem 0 0; list-style: none; }
.langs li { background: var(--klinker); border-radius: 0.3rem; padding: 0.3rem 0.7rem; font-size: var(--step--1); font-weight: 700; }

.ticks, .crosses { list-style: none; padding: 0; margin: 0 0 1em; display: grid; gap: 0.45rem; }
.ticks li, .crosses li { position: relative; padding-left: 1.9rem; max-width: var(--measure); }
.ticks li::before, .crosses li::before {
  position: absolute; left: 0; top: 0.1em;
  width: 1.3rem; height: 1.3rem; display: grid; place-items: center;
  border-radius: 0.25rem; font: 700 0.9rem/1 var(--text);
}
.ticks li::before { content: "\2713"; background: var(--sign); color: var(--white); }
.crosses li::before { content: "\2715"; background: var(--kerb); color: var(--ink); }

/* ---------- contact ---------- */
.contact-grid { display: grid; gap: clamp(2.5rem, 5vw, 5rem); }
@media (min-width: 56rem) { .contact-grid { grid-template-columns: 1.3fr 0.7fr; } }

.form { display: grid; gap: 1.25rem; max-width: 40rem; }
.form .row { display: grid; gap: 1.25rem; }
@media (min-width: 36rem) { .form .row { grid-template-columns: 1fr 1fr; } }
.field label { display: block; font-weight: 700; margin-bottom: 0.35rem; }
.field .hint { display: block; font-weight: 400; color: var(--stone); font-size: var(--step--1); }
.field input:not([type="checkbox"]), .field select, .field textarea {
  width: 100%; font: inherit; color: var(--ink);
  background: var(--white);
  border: 2px solid #9EA3A9; border-radius: 0.4rem;
  padding: 0.7rem 0.85rem; min-height: 3rem;
}
.field textarea { min-height: 9rem; resize: vertical; line-height: 1.5; }
.field select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: calc(100% - 1.15rem) 55%, calc(100% - 0.8rem) 55%;
  background-size: 0.35rem 0.35rem; background-repeat: no-repeat;
  padding-right: 2.5rem;
}
.field input:not([type="checkbox"]):focus, .field select:focus, .field textarea:focus { border-color: var(--sign); outline: 3px solid rgba(27, 63, 143, 0.25); outline-offset: 0; }
.field [aria-invalid="true"] { border-color: var(--error); }
.field .error { display: none; color: var(--error); font-size: var(--step--1); font-weight: 700; margin-top: 0.35rem; }
.field .error:not(:empty) { display: block; }
.check { display: flex; gap: 0.7rem; align-items: flex-start; }
.check input { width: 1.35rem; height: 1.35rem; margin-top: 0.2rem; flex: none; accent-color: var(--sign); }
.check label { font-weight: 400; margin: 0; }
.hp { position: absolute; left: -9999px; }

.status { padding: 1rem 1.25rem; border-radius: 0.4rem; font-weight: 700; }
.status:empty { display: none; }
.status--ok { background: #E3F1E7; color: var(--ok); border-left: 4px solid var(--ok); }
.status--error { background: #FBE9E7; color: var(--error); border-left: 4px solid var(--error); }

.direct { display: grid; gap: 1.5rem; align-content: start; }
.direct h2 { font-size: var(--step-2); margin-bottom: 0.25rem; }
.direct ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.direct li span { display: block; font-size: var(--step--1); color: var(--stone); }
.direct li a { font-weight: 700; font-size: var(--step-1); }

/* ---------- prose (privacy) ---------- */
.prose { max-width: 46rem; }
.prose h2 { font-size: var(--step-2); margin-top: 2.5rem; }
.prose ul { padding-left: 1.2rem; }
.prose li { margin-bottom: 0.4rem; max-width: var(--measure); }

/* ---------- 404 ---------- */
.lost { padding-block: clamp(4rem, 10vw, 8rem); }
.lost .sign { font-size: clamp(1.8rem, 0.8rem + 6vw, 6rem); max-width: 100%; margin-bottom: 2rem; }

/* ---------- footer ---------- */
.site-footer { background: #2A2E33; color: #D4D7DB; font-size: var(--step--1); }
.site-footer .wrap { padding-block: 3rem 2rem; display: grid; gap: 2rem; }
@media (min-width: 48rem) { .site-footer .wrap { grid-template-columns: 1.5fr 1fr 1fr; } }
.site-footer h2 { font: 700 var(--step-0)/1.2 var(--text); color: var(--white); margin-bottom: 0.75rem; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.45rem; }
.site-footer a { color: var(--white); }
.site-footer :focus-visible { outline-color: var(--signal); }
.site-footer .legal { grid-column: 1 / -1; border-top: 1px solid #454A50; padding-top: 1.25rem; color: #B5BAC0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
.site-footer .logo { font-size: 1.4rem; margin-bottom: 1rem; }

@media print {
  .site-header, .site-footer, .pavement, .band { display: none; }
}

/* ==========================================================================
   Motion
   Everything below that moves on its own is scoped to html.motion, which is only
   set when the visitor hasn't asked their device to reduce motion. Without it,
   all content is simply shown, in place.
   ========================================================================== */

/* ---------- hero: little browser that builds itself behind the sign ---------- */
.street { position: relative; padding-top: clamp(3.75rem, 6vw, 5.5rem); }
.street .sign, .street .post { position: relative; z-index: 1; }
.mini {
  position: absolute; top: 0; right: 0; z-index: 0;
  width: clamp(8.5rem, 12vw, 12rem);
  background: var(--white); border: 1px solid #C9CBC5; border-radius: 0.5rem;
  box-shadow: 0 18px 40px -24px rgba(21, 25, 31, 0.45);
  overflow: hidden;
}
.mini-bar { display: flex; gap: 0.25rem; padding: 0.4rem 0.5rem; background: #EDEEEA; border-bottom: 1px solid #DADCD6; }
.mini-bar i { width: 0.4rem; height: 0.4rem; border-radius: 50%; background: #C9CBC5; }
.mini-body { display: grid; gap: 0.4rem; padding: 0.7rem 0.7rem 0.85rem; }
.mini-line { display: block; height: 0.42rem; border-radius: 99px; background: #DADCD6; transform-origin: left; }
.mini-line--title { height: 0.7rem; width: 78%; background: var(--ink); }
.mini-line--short { width: 55%; }
.mini-btn { display: block; width: 3.2rem; height: 0.95rem; margin-top: 0.2rem; border-radius: 0.25rem; background: var(--signal); }

/* ---------- ticker ---------- */
.ticker-section { background: var(--ink); color: var(--white); padding-block: clamp(2.5rem, 2rem + 3vw, 4rem); overflow: hidden; }
.ticker-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem 2rem; margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.ticker-head h2 { color: var(--white); font-size: var(--step-2); max-width: 24ch; margin: 0; }
.ticker-toggle {
  font: 700 var(--step--1)/1 var(--text); color: var(--white);
  background: transparent; border: 2px solid rgba(255, 255, 255, 0.55); border-radius: 0.4rem;
  min-height: 2.75rem; padding: 0 1rem; cursor: pointer;
}
.ticker-toggle:hover { border-color: var(--white); }
.ticker-section :focus-visible { outline-color: var(--signal); }
.ticker { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.ticker + .ticker { margin-top: 0.25rem; }
.ticker-track { display: flex; width: max-content; }
.ticker-list { display: flex; list-style: none; margin: 0; padding: 0; }
.ticker-list li {
  display: flex; align-items: center; white-space: nowrap;
  font: 700 clamp(1.7rem, 1rem + 3vw, 3.25rem)/1.25 var(--display);
  padding-right: 0.9em;
}
.ticker-list li::after { content: ""; width: 0.28em; height: 0.28em; margin-left: 0.9em; border-radius: 50%; background: var(--signal); }
.ticker--reverse .ticker-list li { color: #A9BCE6; }
.ticker--reverse .ticker-list li::after { background: #A9BCE6; }
html:not(.motion) .ticker-list[aria-hidden="true"] { display: none; }
html:not(.motion) .ticker-track { width: auto; }
html:not(.motion) .ticker-list { flex-wrap: wrap; padding-inline: var(--gutter); }
html:not(.motion) .ticker { -webkit-mask-image: none; mask-image: none; }

/* ---------- small interactions (respond to the visitor, so always on) ---------- */
.btn { position: relative; overflow: hidden; transition: background-color 0.15s ease, color 0.15s ease, transform 0.2s ease, box-shadow 0.2s ease; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 20px -12px rgba(27, 63, 143, 0.7); }
.btn:active { transform: translateY(0) scale(0.98); box-shadow: none; }
.logo { transition: transform 0.25s cubic-bezier(.3, 1.6, .5, 1); }
.logo:hover { transform: rotate(-3deg) scale(1.04); }
.site-nav a:not(.btn) { transition: border-color 0.2s ease, color 0.2s ease; }
.included div { transition: border-color 0.3s ease; }
.included div:hover { border-top-color: var(--sign); }
.plan { transition: transform 0.25s ease, box-shadow 0.25s ease; }
.plan:hover { transform: translateY(-4px); box-shadow: 0 16px 30px -20px rgba(21, 25, 31, 0.55); }
.menu-item { transition: background-color 0.25s ease; }
.concept .browser { transition: transform 0.45s cubic-bezier(.2, .8, .2, 1), box-shadow 0.45s ease; }
.concept:hover .browser { transform: perspective(900px) rotateX(2deg) rotateY(-4deg) translateY(-6px); box-shadow: 0 1px 0 #C9CBC5, 0 30px 50px -26px rgba(21, 25, 31, 0.55); }
.faq summary { transition: color 0.2s ease; }
.faq summary:hover { color: var(--sign); }
.count { font-variant-numeric: tabular-nums; }

/* ---------- things that move on their own ---------- */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}

/* headline: words rise out of an invisible line */
[data-split] .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.1em; margin-bottom: -0.1em; }
[data-split] .w > span { display: inline-block; }
.motion [data-split]:not(.is-split) { visibility: hidden; animation: show-anyway 0s 1.2s forwards; }
.motion [data-split] .w > span { animation: rise 0.9s cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: calc(var(--i, 0) * 70ms + 100ms); }
.motion .hero-in { animation: fade-up 0.8s cubic-bezier(.2, .8, .2, 1) backwards; }
.motion .hero-in--1 { animation-delay: 0.55s; }
.motion .hero-in--2 { animation-delay: 0.75s; }

/* the street scene */
.motion .street .sign:not(.sign--small) { transform-origin: 18% 100%; animation: hang 1s cubic-bezier(.2, .8, .2, 1) 0.3s backwards; }
.motion .street .sign--small { animation: drop 0.7s cubic-bezier(.3, 1.4, .5, 1) 0.8s backwards; }
.motion .street .post { transform-origin: bottom; animation: grow-up 0.6s ease-out 0.15s backwards; }
.motion .mini { animation: fade-up 0.7s cubic-bezier(.2, .8, .2, 1) 1s backwards; }
.motion .mini-line { animation: grow-x 0.6s cubic-bezier(.2, .8, .2, 1) backwards; }
.motion .mini-line--title { animation-delay: 1.35s; }
.motion .mini-line:nth-child(2) { animation-delay: 1.5s; }
.motion .mini-line--short { animation-delay: 1.65s; }
.motion .mini-btn { animation: pop 0.5s cubic-bezier(.3, 1.6, .5, 1) 1.85s backwards, pulse 1.4s ease-in-out 2.5s 3; }

/* the pavement moves along when you scroll, like walking down the street */
.motion .pavement { background-position: calc(var(--scroll) * -0.35px) 0; }

/* ticker */
.motion .ticker-track { animation: ticker 45s linear infinite; }
.motion .ticker--reverse .ticker-track { animation-direction: reverse; animation-duration: 55s; }
.ticker-section:hover .ticker-track,
.ticker-section:focus-within .ticker-track,
.ticker-section.is-paused .ticker-track { animation-play-state: paused; }

/* sections slide in as you scroll to them */
.motion [data-reveal] { opacity: 0; }
.motion [data-reveal].is-in { opacity: 1; animation: reveal 0.85s cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: calc(var(--i, 0) * 90ms); }

/* steps: numbers pop, the dashed line draws itself */
.motion .steps li.is-in::before { animation: pop 0.55s cubic-bezier(.3, 1.6, .5, 1) backwards; animation-delay: calc(var(--i, 0) * 90ms + 0.25s); }
.motion .steps li::after { transform: scaleX(0); transform-origin: left; transition: transform 0.8s ease; transition-delay: calc(var(--i, 0) * 90ms + 0.4s); }
.motion .steps.is-in li::after { transform: scaleX(1); }

/* FAQ answers slide open */
.motion .faq details[open] > div { animation: fade-up 0.35s ease; }

/* button shine */
.motion .btn::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.35) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform 0.6s ease;
}
.motion .btn:hover::after { transform: translateX(120%); }

@keyframes rise { from { transform: translateY(110%); } }
@keyframes fade-up { from { opacity: 0; transform: translateY(16px); } }
@keyframes reveal { from { opacity: 0; transform: translateY(28px); } }
@keyframes show-anyway { to { visibility: visible; } }
@keyframes hang { from { transform: rotate(-5deg) translateY(-10px); opacity: 0; } 60% { transform: rotate(1.5deg); opacity: 1; } }
@keyframes drop { from { transform: translateY(-18px) rotate(3deg); opacity: 0; } }
@keyframes grow-up { from { transform: scaleY(0); } }
@keyframes grow-x { from { transform: scaleX(0); } }
@keyframes pop { from { transform: scale(0.4); opacity: 0; } }
@keyframes pulse { 50% { transform: scale(1.12); } }
@keyframes ticker { to { transform: translateX(-50%); } }

/* Reduced motion: no movement anywhere, including hover effects. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
  .btn:hover, .plan:hover, .logo:hover, .concept:hover .browser { transform: none; }
}