/* ========================================================================
   Base stylesheet: tokens, layout and the components every page shares.
   Light and dark themes · Clash Display + Satoshi + Instrument Serif
   ======================================================================== */

/* The hidden attribute only works through the browser's own [hidden]{display:none},
   which any author rule carrying a class beats. Giving .apply__done a display:grid
   silently un-hid the confirmation screen and it rendered underneath the live form.
   This guard means setting `hidden` always wins, whatever a component declares. */
[hidden] { display: none !important; }

/* Skip link: parked off-screen, a pill at the top-left once focused. */
.skip-link {
  position: fixed; left: 8px; top: -60px; z-index: 300;
  padding: 10px 16px; border-radius: 100px;
  background: #14130f; color: #fbfaf9;
  font-family: 'Satoshi', system-ui, sans-serif; font-size: 0.85rem; font-weight: 500;
}
.skip-link:focus { top: 8px; outline: 2px solid #0b3ae0; outline-offset: 2px; }

:root {
  /* One stable palette. Porcelain base — warmer than white, never beige,
     never icy — ink type, blue reserved for accents and the closing act. */
  --ink: #14130f;
  --ink-soft: #4a4740;
  --ice: #fbfaf9;
  --lift: #fafaf9;
  --well: #ebebe9;
  --line: #dbdad7;
  --blue: #0b3ae0;
  --blue-soft: color-mix(in srgb, var(--blue) 72%, #ffffff);
  --ease: cubic-bezier(0.65, 0.05, 0, 1);
  --nav-h: 72px;
  --pad: clamp(20px, 5vw, 80px);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* overflow-x: clip, not hidden: it stops a reveal that starts off-screen
   from widening the layout viewport, without making <html> a scroller. */
html { scroll-behavior: auto; overflow-x: clip; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
  font-family: 'Satoshi', system-ui, sans-serif;
  background: var(--ice);
  color: var(--ink);
  transition: background-color 0.7s var(--ease), color 0.7s var(--ease);
  /* clip, not hidden: hidden turns <body> into a scroll container and
     position: sticky descendants stop sticking on phones. <html> already
     clips horizontal overflow. */
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--blue); color: var(--ice); }

body::before {
  content: ''; position: fixed; inset: 0; z-index: 200; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.05; mix-blend-mode: multiply;
}

img { display: block; width: 100%; height: 100%; object-fit: cover; }
a { color: inherit; text-decoration: none; }
em { font-family: 'Instrument Serif', serif; font-style: italic; font-weight: 400; }

/* ---------- Nav ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 0 var(--pad);
  transition: transform 0.5s var(--ease);
}
.nav__actions { display: flex; align-items: center; gap: 12px; }

.nav__logo {
  font-family: 'Clash Display', sans-serif; font-weight: 600; font-size: 0.95rem;
  letter-spacing: 0.01em; white-space: nowrap;
  transition: opacity 0.45s var(--ease), transform 0.45s var(--ease), visibility 0s 0s;
}

/* ---------- Buttons ---------- */
/* Liquid glass: a tinted translucent lens that refracts what sits behind it,
   lit by a specular top edge and grounded by a soft contact shadow. */
.btn {
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; gap: 10px;
  font-family: 'Clash Display', sans-serif; font-weight: 600; font-size: 1rem;
  padding: 16px 30px; border-radius: 100px;
  background: color-mix(in srgb, var(--ice) 42%, transparent);
  color: var(--ink);
  border: 1px solid color-mix(in srgb, #fff 55%, transparent);
  -webkit-backdrop-filter: blur(28px) saturate(200%);
  backdrop-filter: blur(28px) saturate(200%);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 80%, transparent),
    inset 0 -1px 1px color-mix(in srgb, var(--ink) 8%, transparent),
    0 1px 2px color-mix(in srgb, var(--ink) 10%, transparent),
    0 10px 28px -8px color-mix(in srgb, var(--ink) 20%, transparent);
  transition: background 0.35s var(--ease), color 0.35s var(--ease),
    box-shadow 0.35s var(--ease), border-color 0.35s var(--ease);
}
/* Specular sheen — sits above the lens, below the label. */
.btn::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  border-radius: inherit; pointer-events: none;
  background: linear-gradient(
    148deg,
    color-mix(in srgb, #fff 42%, transparent) 0%,
    transparent 40%,
    transparent 62%,
    color-mix(in srgb, #fff 14%, transparent) 100%);
}
.btn__arrow { transition: transform 0.35s var(--ease); }
.btn:hover .btn__arrow { transform: translateX(5px); }

/* Two layers: a translucent blue lens, plus a deep-blue vibrancy veil that keeps
   white type at AA contrast while the backdrop still reads through the glass. */
.btn--primary, .btn--small {
  background:
    linear-gradient(
      color-mix(in srgb, #001a66 31%, transparent),
      color-mix(in srgb, #001a66 25%, transparent)
    ),
    color-mix(in srgb, var(--blue) 60%, transparent);
  color: #fff;
  border-color: color-mix(in srgb, #fff 40%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 60%, transparent),
    inset 0 -2px 6px color-mix(in srgb, #001a66 30%, transparent),
    0 2px 6px color-mix(in srgb, var(--blue) 24%, transparent),
    0 14px 34px -10px color-mix(in srgb, var(--blue) 40%, transparent);
}
.btn--primary:hover, .btn--small:hover {
  background:
    linear-gradient(
      color-mix(in srgb, #001a66 32%, transparent),
      color-mix(in srgb, #001a66 22%, transparent)
    ),
    color-mix(in srgb, var(--blue) 74%, transparent);
  border-color: color-mix(in srgb, #fff 58%, transparent);
}
.btn--small { padding: 10px 20px; font-size: 0.85rem; }

.btn--outline {
  background: color-mix(in srgb, currentColor 7%, transparent);
  color: inherit;
  border-color: color-mix(in srgb, currentColor 42%, transparent);
}
.btn--outline:hover {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
  box-shadow:
    0 1px 2px color-mix(in srgb, var(--blue) 22%, transparent),
    0 14px 30px -12px color-mix(in srgb, var(--blue) 50%, transparent);
}

.btn--invert {
  font-size: 1.15rem; padding: 20px 40px;
  background: color-mix(in srgb, var(--ink) 58%, transparent);
  color: var(--ice);
  border-color: color-mix(in srgb, #fff 24%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 26%, transparent),
    inset 0 -2px 6px color-mix(in srgb, #000 30%, transparent),
    0 2px 6px color-mix(in srgb, var(--ink) 22%, transparent),
    0 16px 38px -12px color-mix(in srgb, var(--ink) 42%, transparent);
}
.btn--invert:hover { background: color-mix(in srgb, var(--ink) 90%, transparent); }

/* Opaque fallbacks: no backdrop-filter, or the user asked for less transparency. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .btn { background: var(--ice); }
  .btn--primary, .btn--small { background: var(--blue); }
  .btn--invert { background: var(--ink); }
}
@media (prefers-reduced-transparency: reduce) {
  .btn {
    background: var(--ice);
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .btn::before { display: none; }
  .btn--primary, .btn--small { background: var(--blue); }
  .btn--outline { background: transparent; }
  .btn--invert { background: var(--ink); }
}

/* ---------- Sections (shared) ---------- */
.section { padding: clamp(90px, 14vh, 180px) var(--pad); max-width: 1500px; margin: 0 auto; }
.section__head { margin-bottom: clamp(36px, 6vh, 72px); }
.section__index {
  font-size: 0.8rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--blue); opacity: 0.9; margin-bottom: 18px;
}
.section__index::before {
  content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 2px;
  background: currentColor; margin-right: 10px; vertical-align: 1px;
}
.section__title {
  font-family: 'Clash Display', sans-serif; font-weight: 600;
  font-size: clamp(2.4rem, 6.5vw, 5.5rem); line-height: 1.06; letter-spacing: -0.02em;
}
.section__title em, .hero__title em, .cta__title em { color: var(--blue); }

/* ---------- Hero ---------- */
.hero {
  position: relative; min-height: 100svh;
  /* Centred, not bottom-hung: the headline owns the middle of the viewport
     instead of leaving a dead band under the header. */
  display: flex; flex-direction: column; justify-content: center;
  padding: calc(var(--nav-h) + 24px) var(--pad) clamp(40px, 7vh, 80px);
  overflow: hidden;
}
.hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.hero__content { position: relative; z-index: 1; }
.hero__title {
  font-family: 'Clash Display', sans-serif; font-weight: 600;
  font-size: clamp(3rem, 10.5vw, 9.5rem); line-height: 0.96; letter-spacing: -0.025em;
  text-transform: none;
}
.hero__bottom {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 32px;
  /* The sub sits close under the title — one composition, not two strata. */
  margin-top: clamp(20px, 3.2vh, 38px); flex-wrap: wrap;
}
.hero__sub { max-width: 30ch; font-size: clamp(1.05rem, 1.6vw, 1.35rem); line-height: 1.5; opacity: 0.85; }
.hero__sub strong { color: var(--blue); font-weight: 600; }
.hero__cta { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.hero__deadline {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 0.82rem; opacity: 0.8; letter-spacing: 0.04em;
  border: 1px solid color-mix(in srgb, currentColor 25%, transparent);
  border-radius: 100px; padding: 10px 18px;
}
.hero__deadline::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
  background: var(--blue); animation: livepulse 2.2s var(--ease) infinite;
}
@keyframes livepulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0, 65, 255, 0.35); }
  50% { box-shadow: 0 0 0 7px rgba(0, 65, 255, 0); }
}
.hero__scroll-hint {
  position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);
  width: 1px; height: 48px; overflow: hidden; z-index: 1; opacity: 0.5;
}
.hero__scroll-hint span {
  display: block; width: 100%; height: 100%;
  background: currentColor;
  animation: scrollhint 1.8s var(--ease) infinite;
}
@keyframes scrollhint {
  0% { transform: translateY(-100%); }
  55% { transform: translateY(0); }
  100% { transform: translateY(100%); }
}

/* ---------- Offer ---------- */
.offer__lead, .work__lead {
  max-width: 760px; font-size: clamp(1.05rem, 1.6vw, 1.35rem); line-height: 1.55; opacity: 0.85;
}
.offer__numbers {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: color-mix(in srgb, currentColor 14%, transparent);
  border-top: 1px solid color-mix(in srgb, currentColor 14%, transparent);
  border-bottom: 1px solid color-mix(in srgb, currentColor 14%, transparent);
  margin: clamp(48px, 8vh, 90px) 0;
}
.offer__num { background: var(--well); padding: clamp(24px, 3vw, 48px) clamp(16px, 2vw, 32px); transition: background-color 0.7s var(--ease); }
.offer__num-val {
  display: block; font-family: 'Clash Display', sans-serif; font-weight: 600;
  font-size: clamp(3rem, 6.5vw, 6rem); line-height: 1; color: var(--blue);
}
.offer__num-label { display: block; margin-top: 12px; font-size: 0.9rem; opacity: 0.65; }
.offer__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.offer__card {
  background: var(--lift);
  border: 1px solid color-mix(in srgb, currentColor 16%, transparent); border-radius: 16px;
  padding: clamp(20px, 2.5vw, 36px);
  transition: border-color 0.4s, transform 0.4s var(--ease);
}
.offer__card:hover { border-color: var(--blue); transform: translateY(-4px); }
.offer__card h3 {
  font-size: 0.78rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.14em;
  opacity: 0.55; margin-bottom: 14px;
}
.offer__card p { font-family: 'Clash Display', sans-serif; font-weight: 500; font-size: clamp(1.05rem, 1.5vw, 1.35rem); line-height: 1.3; }
.offer__card p span { font-family: 'Satoshi', sans-serif; font-weight: 400; font-size: 0.85rem; opacity: 0.6; }

/* ---------- Work (light) ---------- */
.work__cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 64px); margin-top: clamp(40px, 7vh, 80px); }
.work__col h3 {
  font-family: 'Clash Display', sans-serif; font-weight: 600; font-size: clamp(1.5rem, 2.6vw, 2.4rem);
  margin-bottom: 28px;
}
.work__col--yes h3 { color: var(--blue); }
.work__col--no h3 { opacity: 0.4; }
.work__col ul { list-style: none; }
.work__col li {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 22px 0; border-top: 1px solid color-mix(in srgb, currentColor 15%, transparent);
  font-size: clamp(1rem, 1.4vw, 1.15rem); line-height: 1.5;
}
.work__col li span {
  flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.85rem; margin-top: 2px;
}
.work__col--yes li span { background: var(--blue); color: var(--ice); }
.work__col--no li span { border: 1px solid color-mix(in srgb, currentColor 30%, transparent); }
.work__col--no li { opacity: 0.55; }

/* Cursor spotlight on the offer cards; js/main.js feeds --mx/--my. */
@media (hover: hover) {
  .offer__card { position: relative; }
  .offer__card::after {
    content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    opacity: 0; transition: opacity 0.4s;
    background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), rgba(0, 65, 255, 0.13), transparent 65%);
  }
  .offer__card:hover::after { opacity: 1; }
}

/* ---------- FAQ ---------- */
.faq .section__head { text-align: center; }
.faq__list { max-width: 1080px; margin: 0 auto; }
.faq__list details { border-top: 1px solid color-mix(in srgb, currentColor 16%, transparent); }
.faq__list details:last-child { border-bottom: 1px solid color-mix(in srgb, currentColor 16%, transparent); }
.faq__list summary {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  padding: clamp(20px, 3vh, 30px) 0;
  font-family: 'Clash Display', sans-serif; font-weight: 500;
  font-size: clamp(1.05rem, 1.8vw, 1.5rem);
  transition: color 0.3s;
}
.faq__list summary::-webkit-details-marker { display: none; }
.faq__list summary:hover { color: var(--blue); }
.faq__icon { position: relative; flex-shrink: 0; width: 16px; height: 16px; }
.faq__icon::before, .faq__icon::after {
  content: ''; position: absolute; background: currentColor;
  transition: transform 0.4s var(--ease);
}
.faq__icon::before { left: 0; right: 0; top: 7px; height: 2px; }
.faq__icon::after { top: 0; bottom: 0; left: 7px; width: 2px; }
details[open] .faq__icon::after { transform: scaleY(0); }
.faq__a { overflow: hidden; }
.faq__a p { padding: 0 0 28px; max-width: 700px; line-height: 1.6; opacity: 0.75; font-size: clamp(0.95rem, 1.3vw, 1.1rem); }

/* ---------- Final CTA ---------- */
.cta { text-align: center; padding-top: clamp(110px, 18vh, 220px); padding-bottom: clamp(110px, 18vh, 220px); }
.cta__title {
  font-family: 'Clash Display', sans-serif; font-weight: 600;
  font-size: clamp(3rem, 9.5vw, 8.5rem); line-height: 0.98; letter-spacing: -0.02em;
}
/* Keeps a short function word attached to the phrase it governs, in headings
   that SplitText rebuilds. &nbsp; cannot do this job here: SplitText re-tokenises
   a .split heading into one inline-block per word and normalises U+00A0 to an
   ordinary space, so a bound pair came apart anyway and stranded the "ki" or
   "za" at the end of a line. Wrapping the word AND the <em> in this class keeps
   the blue accent exactly where the design puts it while making the pair
   unbreakable. Measured at 390px, where Slovenian headings wrap first. */
.nb { white-space: nowrap; }

.cta__title em { color: var(--ink); }
/* The typing animation splits the title into one inline box per letter, which
   hands the browser a break opportunity between every two characters. The word
   wrapper takes it back: the line breaks between words, never inside one. */
.cta__title .cta-word { white-space: nowrap; }
.cta .btn { margin-top: clamp(36px, 6vh, 64px); }
/* A second button stacks under the first with a small gap, not the full
   margin that separates the first button from the line above it. */
.cta .btn + .btn { margin-top: 14px; }

/* ---------- Footer ---------- */
.footer { padding: clamp(60px, 10vh, 110px) var(--pad) 36px; max-width: 1500px; margin: 0 auto; }
.footer__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 4vw, 64px); }
.footer__cols h2 {
  font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.16em;
  opacity: 0.5; margin-bottom: 16px; font-weight: 500;
}
.footer__cols p { font-size: 0.92rem; line-height: 1.55; opacity: 0.7; margin-bottom: 14px; max-width: 300px; }
.footer__cols a { font-family: 'Clash Display', sans-serif; font-weight: 500; border-bottom: 1px solid var(--ink); padding-bottom: 2px; transition: opacity 0.3s; }
.footer__cols a:hover { opacity: 0.6; }

.footer__bottom {
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  margin-top: clamp(48px, 8vh, 80px); padding-top: 24px;
  border-top: 1px solid color-mix(in srgb, currentColor 25%, transparent);
  font-size: 0.8rem;
}
.footer__bottom > span { opacity: 0.5; }
.footer__brandline { display: inline-flex; align-items: center; gap: 12px; }
.footer__brandline span { opacity: 0.5; }
.footer__mark { width: 30px; height: 30px; flex-shrink: 0; opacity: 0.95; }

/* ---------- Reveal helpers ---------- */
/* overflow:hidden is what makes the word-reveal work, but at line-height 1.02
   it also cropped descenders. Pad the clip window below the baseline and pull
   it back with a negative margin, so nothing shifts. */
.split .line, .split-lines .line, #heroTitle .line, #ctaTitle .line {
  overflow: hidden;
  padding-bottom: 0.16em;
  margin-bottom: -0.16em;
}
html.js .reveal-line { opacity: 0; }

/* ========================================================================
   Responsive
   ======================================================================== */
@media (max-width: 1024px) {
  .offer__numbers, .offer__grid { grid-template-columns: repeat(2, 1fr); }
  .footer__cols { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
  .nav__logo { font-size: 0.85rem; }
  .hero__bottom { flex-direction: column; align-items: flex-start; }
  .hero__title { font-size: clamp(2.6rem, 13.5vw, 4.5rem); }
  .work__cols { grid-template-columns: 1fr; }
  .footer__cols { grid-template-columns: 1fr; }
  .hero__scroll-hint { display: none; }
}

@media (max-width: 480px) {
  .offer__numbers, .offer__grid { grid-template-columns: 1fr; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ---------- Dark mode (toggled by the footer star) ---------- */
html.mode-dark { --lift: #15151d; --well: #101018; }
html.mode-dark body { background: #0b0b10; color: var(--ice); }

/* Mode switch wipes across the screen from the star */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-new(root) { animation: modewipe 0.9s var(--ease); }
@keyframes modewipe {
  from { clip-path: circle(0px at var(--vt-x, 50%) var(--vt-y, 85%)); }
  to { clip-path: circle(160% at var(--vt-x, 50%) var(--vt-y, 85%)); }
}
html.mode-dark body::before { mix-blend-mode: screen; opacity: 0.035; }

/* ========================================================================
   Ghost CTA — off-white liquid glass
   ======================================================================== */
.cta { position: relative; isolation: isolate; }
/* Something for the glass to actually refract, without a colour flip. */
.cta::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 55% at 50% 62%, color-mix(in srgb, var(--blue) 13%, transparent), transparent 70%);
}
.cta__sub { margin-top: clamp(24px, 4vh, 40px); font-size: 1rem; color: var(--ink-soft); }
/* The pill wears the header's matte-glass tint and an ink hairline, so it
   keeps its shape on a near-white ground. */
.btn--ghost {
  font-size: 1.15rem; padding: 20px 40px;
  background: color-mix(in srgb, #ffffff 45%, transparent);
  color: var(--ink);
  border-color: color-mix(in srgb, var(--ink) 14%, transparent);
  box-shadow:
    inset 0 1px 0 #fff,
    inset 0 -2px 6px color-mix(in srgb, var(--ink) 7%, transparent),
    0 2px 6px color-mix(in srgb, var(--ink) 8%, transparent),
    0 18px 44px -14px color-mix(in srgb, var(--ink) 26%, transparent);
}
.btn--ghost:hover {
  background: color-mix(in srgb, #ffffff 72%, transparent);
  border-color: color-mix(in srgb, var(--ink) 28%, transparent);
}

/* ========================================================================
   Form page (brief.html)
   ======================================================================== */
.apply { max-width: 820px; margin: 0 auto; padding: calc(var(--nav-h) + clamp(50px, 9vh, 110px)) var(--pad) clamp(70px, 12vh, 140px); }
.apply__head { margin-bottom: clamp(40px, 7vh, 80px); }
.apply__title {
  font-family: 'Clash Display', sans-serif; font-weight: 600;
  font-size: clamp(2.6rem, 7vw, 5.2rem); line-height: 1; letter-spacing: -0.02em;
  margin: 14px 0 22px;
}
.apply__lead { font-size: clamp(1.05rem, 1.6vw, 1.3rem); line-height: 1.6; color: var(--ink-soft); max-width: 58ch; }

/* ---------- progress ---------- */
.steps { list-style: none; display: flex; flex-wrap: wrap; gap: clamp(10px, 2vw, 28px); margin-bottom: clamp(32px, 5vh, 56px); }
.steps__item {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 0.85rem; font-weight: 500; color: var(--ink-soft); opacity: 0.55;
  transition: opacity 0.35s var(--ease), color 0.35s var(--ease);
  /* These are buttons: strip the UA chrome and make them feel pressable. */
  background: none; border: 0; padding: 0; margin: 0;
  font-family: inherit; letter-spacing: inherit; cursor: pointer;
}
.steps__item:hover { opacity: 1; color: var(--ink); }
.steps__item:hover span { border-color: var(--blue); }
.steps__item:focus-visible {
  outline: 2px solid var(--blue); outline-offset: 6px; border-radius: 100px; opacity: 1;
}
.steps__item span {
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid var(--line); font-size: 0.78rem;
}
.steps__item.is-active { opacity: 1; color: var(--ink); }
.steps__item.is-active span { background: var(--blue); border-color: var(--blue); color: #fff; }
.steps__item.is-done { opacity: 0.9; }
.steps__item.is-done span { border-color: var(--blue); color: var(--blue); }

/* ---------- steps + fields ---------- */
.step { border: 0; display: none; }
.step.is-active { display: block; }
.step__legend {
  font-family: 'Clash Display', sans-serif; font-weight: 600;
  font-size: clamp(1.3rem, 2.4vw, 1.9rem); margin-bottom: clamp(24px, 4vh, 40px);
}
.field { margin-bottom: clamp(20px, 3vh, 30px); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2vw, 26px); }
.field > label { display: block; font-size: 0.92rem; font-weight: 500; margin-bottom: 9px; }
.field > label b { color: var(--blue); font-weight: 500; }
.field input[type='text'], .field input[type='email'], .field input[type='tel'],
.field input[type='url'], .field select, .field textarea {
  width: 100%; font-family: inherit; font-size: 1rem; color: var(--ink);
  padding: 14px 16px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--lift);
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.field textarea { resize: vertical; }
/* Radios and checkboxes are excluded on purpose. This halo is shaped for the
   rounded text fields; on a 16px round radio it painted a pale blue SQUARE
   around the circle. Those controls sit inside pills, so the pill carries the
   focus state instead — see .choice below. */
.field input:not([type='radio']):not([type='checkbox']):focus,
.field select:focus,
.field textarea:focus {
  outline: none; border-color: var(--blue);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 16%, transparent);
}
.field__hint { margin-top: 7px; font-size: 0.82rem; color: var(--ink-soft); opacity: 0.85; }
.field__err { margin-top: 7px; font-size: 0.82rem; color: #b3261e; min-height: 0; }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: #b3261e; }

/* ---------- choices ---------- */
.choices { display: flex; flex-wrap: wrap; gap: 10px; }
.choices--stack { flex-direction: column; }
.choice {
  display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
  padding: 12px 18px; border-radius: 100px;
  border: 1px solid var(--line); background: var(--lift);
  font-size: 0.92rem;
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease);
}
.choice--wide { border-radius: 12px; width: 100%; }
.choice:hover { border-color: color-mix(in srgb, var(--blue) 50%, var(--line)); }
.choice input { accent-color: var(--blue); width: 16px; height: 16px; }
.choice:has(input:checked) { border-color: var(--blue); background: color-mix(in srgb, var(--blue) 7%, var(--lift)); }

/* The browser draws a pale rounded square behind a focused radio or checkbox,
   which reads as a stray box dropped on top of the pill. Suppress it on the
   control itself and let the pill carry the focus state instead — same
   information, and it lands on the shape people are actually looking at. */
.choice input:focus { outline: none; }
.choice:has(input:focus-visible) {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 20%, transparent);
}

.step__nav { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(28px, 4vh, 44px); }
.apply__formnote { margin-top: 16px; font-size: 0.9rem; color: var(--ink-soft); }
.apply__formnote.is-error { color: #b3261e; }
.apply__formnote a { text-decoration: underline; }

/* ---------- confirmation ----------
   Submitting hides the intro, so this screen is the entire page and has to hold
   it alone: centred in what's left of the viewport, display-scale title, and a
   single hairline separating the message from the way out. Spacing is a grid
   row-gap rather than per-element margins, so a line can be left out without
   leaving a hole where its margin used to be. */
.apply__done {
  text-align: center;
  display: grid; justify-items: center; align-content: center;
  row-gap: clamp(20px, 3vh, 34px);
  min-height: 60vh;
  min-height: calc(100svh - var(--nav-h) - clamp(160px, 24vh, 280px));
  padding: clamp(20px, 4vh, 50px) 0;
}
.apply__done .apply__title {
  font-size: clamp(3.4rem, 10vw, 7.4rem);
  line-height: 0.92; letter-spacing: -0.03em;
  margin: 0 0 clamp(2px, 0.8vh, 10px);
}
.apply__done .apply__lead {
  font-size: clamp(1.15rem, 1.9vw, 1.5rem);
  line-height: 1.55; max-width: 34ch; margin: 0 auto;
}
.apply__rule {
  width: clamp(44px, 7vw, 80px); height: 1px; border: 0;
  margin: clamp(4px, 1vh, 12px) 0 0;
  background: color-mix(in srgb, var(--ink) 18%, transparent);
}
.apply__done .btn { padding: 17px 36px; font-size: 1rem; }

/* The page's top padding is sized for the intro. Once that's hidden it's just
   dead space above a vertically centred block. */
.apply:has(.apply__head[hidden]) {
  padding-top: var(--nav-h);
  padding-bottom: clamp(30px, 5vh, 60px);
}

.apply__footer {
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between;
  padding: 28px var(--pad); border-top: 1px solid var(--line);
  font-size: 0.85rem; color: var(--ink-soft);
}

@media (max-width: 620px) {
  .field-row { grid-template-columns: 1fr; }
}

/* ---------- Grouped track choices ---------- */
.trackgroup {
  font-family: 'Clash Display', sans-serif; font-weight: 600;
  font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--blue); margin: 26px 0 10px;
}
.trackgroup:first-of-type { margin-top: 4px; }
/* Only the track options stack — they pair a <b> title with an <em> description.
   Applied to every wide choice it also caught the single-sentence ones, pushing
   their trailing <b>*</b> onto a second line and making the box twice as tall. */
.choice--wide span:has(em) { display: flex; flex-direction: column; gap: 3px; }
.choice--wide span b { font-weight: 500; }
.choice--wide span em {
  font-family: 'Satoshi', system-ui, sans-serif; font-style: normal;
  font-size: 0.82rem; color: var(--ink-soft); opacity: 0.9;
}

/* ---------- Dark mode tokens ----------
   The footer star toggles html.mode-dark; every surface reads these. */
html.mode-dark {
  --ink: #f2efe8;
  --ink-soft: #a6a29a;
  --ice: #101014;
  --lift: #17171d;
  --well: #1c1c23;
  --line: #2c2c35;
  --blue: #5b7cff;
}
html.mode-dark body { background: #0d0d11; color: var(--ink); }
html.mode-dark .btn { background: color-mix(in srgb, var(--lift) 55%, transparent); color: var(--ink); border-color: color-mix(in srgb, #fff 14%, transparent); }
html.mode-dark .btn::before { background: linear-gradient(148deg, color-mix(in srgb, #fff 12%, transparent) 0%, transparent 45%, transparent 60%, color-mix(in srgb, #fff 5%, transparent) 100%); }
html.mode-dark .btn--ghost { background: color-mix(in srgb, var(--lift) 70%, transparent); color: var(--ink); border-color: color-mix(in srgb, #fff 18%, transparent); }
html.mode-dark .offer__card { background: var(--lift); border-color: var(--line); }
html.mode-dark .field input, html.mode-dark .field select,
html.mode-dark .field textarea, html.mode-dark .choice { background: var(--lift); border-color: var(--line); color: var(--ink); }

/* ========================================================================
   Refinement pass — work columns · FAQ
   ======================================================================== */

/* ---------- The work: give the two columns real hierarchy ---------- */
.work__cols { align-items: start; }
.work__col--yes {
  padding: clamp(26px, 3vw, 44px);
  background: var(--lift);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: 0 24px 60px -30px color-mix(in srgb, var(--ink) 30%, transparent);
}
.work__col--no { padding: clamp(26px, 3vw, 44px) clamp(4px, 1vw, 12px); }
.work__col h3 {
  font-family: 'Clash Display', sans-serif; font-weight: 600;
  font-size: clamp(1.4rem, 2.6vw, 2.1rem); margin-bottom: 22px;
}
.work__col li {
  display: flex; gap: 14px; align-items: flex-start;
  font-size: clamp(1rem, 1.35vw, 1.15rem); line-height: 1.5;
  padding: 16px 0; border-top: 1px solid var(--line);
}
.work__col li:first-of-type { border-top: 0; }
.work__col li span {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 24px; height: 24px; border-radius: 50%; margin-top: 2px;
  font-size: 0.72rem;
}
.work__col--no li { opacity: 0.5; }
.work__col--no li span { border-color: color-mix(in srgb, currentColor 28%, transparent); }

/* ---------- FAQ: quieter chrome, clearer open state ---------- */
.faq__list details {
  border: 1px solid var(--line); border-radius: 16px;
  background: var(--lift); margin-bottom: 12px;
  transition: border-color 0.35s var(--ease), background 0.35s var(--ease);
}
.faq__list details[open] { border-color: color-mix(in srgb, var(--blue) 45%, var(--line)); }
.faq__list summary {
  cursor: pointer; list-style: none;
  padding: clamp(18px, 2.2vw, 26px) clamp(20px, 2.4vw, 30px);
  font-family: 'Clash Display', sans-serif; font-weight: 600;
  font-size: clamp(1rem, 1.45vw, 1.2rem);
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.faq__list summary::-webkit-details-marker { display: none; }
.faq__a { padding: 0 clamp(20px, 2.4vw, 30px) clamp(20px, 2.4vw, 28px); }
.faq__a p { color: var(--ink-soft); line-height: 1.65; max-width: 70ch; }
.faq__a p + p { margin-top: 14px; }

/* The aurora: soft-focus washes of real colour — brand blue leading, violet
   bridging, coral and rose warming it — over a near-white field, fixed in
   place so the whole scroll travels through them. The film grain on top
   keeps the gradients from banding. Alive, never icy, never beige. */
body {
  background:
    radial-gradient(52% 46% at 84% 4%,  color-mix(in srgb, var(--blue) 22%, transparent), transparent 68%),
    radial-gradient(44% 40% at 2% 22%,  color-mix(in srgb, #ff8a65 24%, transparent), transparent 70%),
    radial-gradient(54% 48% at 94% 66%, color-mix(in srgb, #8f6bff 18%, transparent), transparent 70%),
    radial-gradient(58% 52% at 18% 96%, color-mix(in srgb, #ff5e92 16%, transparent), transparent 72%),
    var(--ice);
  background-attachment: fixed;
}
html.mode-dark body {
  background:
    radial-gradient(52% 46% at 84% 4%,  color-mix(in srgb, var(--blue) 26%, transparent), transparent 68%),
    radial-gradient(44% 40% at 2% 22%,  color-mix(in srgb, #ff7a50 12%, transparent), transparent 70%),
    radial-gradient(54% 48% at 94% 66%, color-mix(in srgb, #8f6bff 16%, transparent), transparent 70%),
    radial-gradient(58% 52% at 18% 96%, color-mix(in srgb, #ff5e92 10%, transparent), transparent 72%),
    #0d0d11;
  background-attachment: fixed;
}

/* Surfaces become frosted glass sitting on that tint rather than opaque cards.
   Same recipe as the header bar: a 32% half-tone with the frost doing the
   separating, plus an ink hairline. The blue hover border and the cursor
   spotlight live in their own rules and sit on top unchanged. */
.offer__card, .faq__list details, .work__col--yes {
  background: color-mix(in srgb, #ffffff 45%, transparent);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
  border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  box-shadow: 0 1px 0 color-mix(in srgb, #fff 80%, transparent) inset,
              0 20px 50px -34px color-mix(in srgb, var(--ink) 34%, transparent);
}
html.mode-dark .offer__card,
html.mode-dark .faq__list details, html.mode-dark .work__col--yes {
  background: color-mix(in srgb, #fff 5%, transparent);
  border-color: color-mix(in srgb, #fff 11%, transparent);
  box-shadow: 0 1px 0 color-mix(in srgb, #fff 8%, transparent) inset;
}

/* ---------- Primary button ----------
   Solid ink, with blue arriving on hover. This overrides the glass recipe
   above for the primary and small buttons; the off-white glass stays on
   .btn--ghost. */
.btn--primary, .btn--small {
  background: var(--ink);
  color: var(--ice);
  border: 1px solid var(--ink);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow:
    0 1px 2px color-mix(in srgb, var(--ink) 16%, transparent),
    0 10px 24px -12px color-mix(in srgb, var(--ink) 42%, transparent);
}
.btn--primary::before, .btn--small::before { display: none; }
.btn--primary:hover, .btn--small:hover {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
  box-shadow:
    0 1px 2px color-mix(in srgb, var(--blue) 22%, transparent),
    0 14px 30px -12px color-mix(in srgb, var(--blue) 50%, transparent);
}
html.mode-dark .btn--primary, html.mode-dark .btn--small {
  background: var(--ink); color: #111; border-color: var(--ink);
}
html.mode-dark .btn--primary:hover, html.mode-dark .btn--small:hover {
  background: var(--blue); border-color: var(--blue); color: #fff;
}

/* ---------- Header ----------
   Fixed, and a matte glass: from the viewer's side the bar is just a tint,
   barely a half-tone under the page, and the frost does the separating, not
   the colour. */
.nav {
  background: color-mix(in srgb, #ffffff 45%, transparent);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 6%, transparent);
}
html.mode-dark .nav {
  background: color-mix(in srgb, #0d0d11 74%, transparent);
  border-bottom-color: color-mix(in srgb, #fff 10%, transparent);
}

/* ---------- Stat band ----------
   Explicit hairlines and no cell fill, so the numerals carry the section. */
.offer__numbers {
  gap: 0;
  background: none;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.offer__num {
  background: none; box-shadow: none; border: 0; border-radius: 0;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  border-left: 1px solid var(--line);
  padding: clamp(30px, 3.6vw, 56px) clamp(20px, 2.2vw, 38px);
  transition: none;
}
.offer__num:first-child { border-left: 0; }
.offer__num-val { font-size: clamp(3.2rem, 7vw, 6.6rem); letter-spacing: -0.03em; }
.offer__num-label {
  margin-top: 14px; font-size: 0.88rem; line-height: 1.45;
  color: var(--ink-soft); opacity: 1; max-width: 22ch;
}
html.mode-dark .offer__numbers,
html.mode-dark .offer__num { border-color: var(--line); }

/* Hairlines have to follow the column count as it collapses. */
@media (max-width: 1024px) {
  .offer__num:nth-child(2n + 1) { border-left: 0; }
  .offer__num:nth-child(n + 3) { border-top: 1px solid var(--line); }
  /* Three stats on a two-column grid: the last one takes the full row rather
     than leaving a hole beside it. */
  .offer__num:last-child { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .offer__num { border-left: 0; }
  .offer__num:nth-child(n + 2) { border-top: 1px solid var(--line); }
}

/* ---------- Header edge: reading progress ----------
   A blue filament on the bar's top edge reports how far through the page the
   reader is (--read, set by js/main.js). A faint track shows the full width so
   the filled portion reads as progress rather than a stray line. */
.nav::before {
  content: ''; display: block;
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: color-mix(in srgb, var(--ink) 8%, transparent);
  pointer-events: none; z-index: 1;
}
.nav::after {
  content: '';
  position: absolute; top: 0; left: 0; height: 2px;
  width: calc(var(--read, 0) * 100%);
  pointer-events: none; z-index: 2;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--blue) 55%, transparent) 0%,
    var(--blue) 70%,
    var(--blue) 100%
  );
  box-shadow:
    0 0 8px 0 color-mix(in srgb, var(--blue) 70%, transparent),
    0 4px 16px 0 color-mix(in srgb, var(--blue) 45%, transparent),
    0 10px 30px -4px color-mix(in srgb, var(--blue) 26%, transparent);
}
html.mode-dark .nav::before { background: color-mix(in srgb, #fff 10%, transparent); }

/* ---------- How it works: horizontal stepper ----------
   Four columns hung off a single hairline rail. Nothing overlaps the rail, so
   no hover state can paint over it. */
.process__steps {
  position: relative;
  max-width: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(18px, 2.4vw, 44px);
  margin-top: clamp(46px, 7vh, 86px);
}
.process__rail {
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: var(--line);
}
.process__rail span {
  display: block; height: 100%; width: 100%;
  background: var(--blue);
  transform-origin: left; transform: scaleX(0);
  box-shadow: 0 0 8px 0 color-mix(in srgb, var(--blue) 45%, transparent);
}
.process__step {
  position: relative;
  padding-top: clamp(30px, 3.6vw, 52px);
}
/* the node sits on the rail, not over it */
.process__step::before {
  content: ''; position: absolute; top: 0; left: 0;
  width: 11px; height: 11px; margin-top: -5px;
  border-radius: 50%;
  background: var(--ice);
  border: 1px solid var(--line);
  transition: background 0.4s var(--ease), border-color 0.4s var(--ease),
    box-shadow 0.4s var(--ease);
}
/* Only is-active lights a node, so no step reads as done before the reader
   has scrolled to it. */
.process__step.is-active::before {
  background: var(--blue); border-color: var(--blue);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--blue) 14%, transparent);
}
.process__num {
  display: block;
  font-family: 'Clash Display', sans-serif; font-weight: 600;
  font-size: clamp(2rem, 3.4vw, 3.2rem); line-height: 1;
  color: color-mix(in srgb, var(--ink) 16%, transparent);
  transition: color 0.45s var(--ease);
}
.process__step.is-active .process__num { color: var(--blue); }
.process__step h3 {
  font-family: 'Clash Display', sans-serif; font-weight: 600;
  font-size: clamp(1.05rem, 1.5vw, 1.35rem); line-height: 1.2;
  margin: clamp(14px, 1.6vw, 22px) 0 10px;
}
.process__step p {
  font-size: clamp(0.9rem, 1.05vw, 1rem); line-height: 1.6;
  color: var(--ink-soft); max-width: 34ch;
}

@media (max-width: 900px) {
  .process__steps { grid-template-columns: repeat(2, 1fr); row-gap: clamp(34px, 5vw, 56px); }
  /* one continuous rail can't span two rows, so each step carries its own */
  .process__rail { display: none; }
  .process__step { border-top: 1px solid var(--line); }
}
@media (max-width: 560px) {
  .process__steps { grid-template-columns: 1fr; }
}

/* The final step uses the same four-point mark as the footer, not a glyph star,
   so the two read as one piece of iconography. Sized off the numerals' own
   font-size so it stays optically matched as they scale. */
.process__num--mark { line-height: 1; }
.process__num--mark svg {
  display: block; width: 0.86em; height: 0.86em;
  margin-top: 0.07em;
}

/* ========================================================================
   The closing statement: no colour slab. The title grows to wordmark size and
   the section takes a full viewport of air.
   ======================================================================== */
.cta {
  min-height: 92svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.cta__title { font-size: clamp(3.4rem, 11.5vw, 11rem); }
.cta__title em { color: var(--blue); }

/* ========================================================================
   Spotlights: one treatment for a highlighted fact — a blue hairline, a
   breath of blue in the fill and a soft lift.
   ======================================================================== */
.work__col--yes {
  border: 1.5px solid var(--blue);
  background:
    linear-gradient(
      color-mix(in srgb, var(--blue) 11%, transparent),
      color-mix(in srgb, var(--blue) 7%, transparent)
    ),
    color-mix(in srgb, #ffffff 55%, transparent);
  box-shadow:
    0 1px 0 color-mix(in srgb, #fff 80%, transparent) inset,
    0 34px 90px -34px color-mix(in srgb, var(--blue) 70%, transparent),
    0 10px 30px -14px color-mix(in srgb, var(--blue) 40%, transparent);
}
html.mode-dark .work__col--yes {
  border-color: var(--blue);
  background: color-mix(in srgb, var(--blue) 16%, transparent);
}

/* ========================================================================
   Promises, as a numbered list: numerals in the margin, a rule between each
   item, and every item at full contrast.
   ======================================================================== */
.promises {
  list-style: none; margin: clamp(38px, 6vh, 72px) 0 0; padding: 0;
  border-top: 1px solid var(--line);
  max-width: 1100px;
}
.promise {
  display: grid;
  grid-template-columns: minmax(3.4rem, 6%) 1fr;
  gap: clamp(16px, 3vw, 48px);
  align-items: start;
  padding: clamp(26px, 3.6vw, 46px) 0;
  border-bottom: 1px solid var(--line);
}
.promise__num {
  font-family: 'Clash Display', sans-serif; font-weight: 600;
  font-size: clamp(1.5rem, 3vw, 2.6rem); line-height: 0.9;
  letter-spacing: -0.02em; color: var(--blue);
  font-variant-numeric: tabular-nums;
}
.promise__body h3 {
  font-family: 'Clash Display', sans-serif; font-weight: 600;
  font-size: clamp(1.35rem, 2.5vw, 2.15rem); line-height: 1.08;
  letter-spacing: -0.015em; margin: 0;
}
.promise__body p {
  margin: clamp(10px, 1.4vh, 16px) 0 0;
  max-width: 56ch;
  font-size: clamp(1rem, 1.3vw, 1.15rem); line-height: 1.6;
  color: var(--ink-soft);
}

@media (max-width: 560px) {
  .promise { grid-template-columns: 1fr; gap: 6px; }
}

/* Footer star: the theme toggle, in the footer's bottom row. */
.footer__star {
  all: unset; cursor: pointer; display: inline-flex;
  width: 15px; height: 15px; margin-left: 4px;
  color: var(--ink-soft); flex: 0 0 auto;
  transition: color 0.25s var(--ease);
}
.footer__star svg { width: 100%; height: 100%; display: block; }
.footer__star:hover { color: var(--blue); }
.footer__star:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* Dial code and number as one control. The code select is sized to its content
   so the number keeps the room; below 480px they stack, because a 3-digit select
   plus a phone number does not fit a phone. */
.field-tel { display: flex; gap: 10px; align-items: stretch; }
.field-tel select { flex: 0 0 auto; width: 7.2rem; min-width: 0; padding-left: 14px; padding-right: 8px; }
.field-tel input { flex: 1 1 auto; min-width: 0; }
@media (max-width: 480px) {
  .field-tel { flex-direction: column; }
  .field-tel select { width: 100%; }
}

/* Question groups are fieldsets, so their legends label them. These rules
   strip the browser's fieldset border and padding and set the legend like a
   label. */
.field--group { border: 0; margin: 0; padding: 0; min-width: 0; }
.field__legend {
  display: block; padding: 0;
  font-size: 0.92rem; font-weight: 500; margin-bottom: 9px;
  color: inherit;
}
.field__legend b { color: var(--blue); font-weight: 500; }