@charset "UTF-8";
/* ==========================================================================
   Hioki
   Dark-first, blue-led, carried by photography.

   Dials: DESIGN_VARIANCE 7 / MOTION_INTENSITY 5 / VISUAL_DENSITY 4.
   No build step on this project, so this is native CSS with a semantic token
   layer. Both colour schemes are designed; dark is the primary.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Blue is the brand and the only accent. It appears as a field, never a glow.
     --blue        #2C6DDD  hsl(218 72% 52%), under the 80% saturation ceiling
     --blue-lift   the text-safe tint for dark grounds (8.1:1 on --bg)
     --blue-press  the darker step for light grounds (6.6:1 on white) */
  --blue:       #2C6DDD;
  --blue-lift:  #6FA8FF;
  --blue-press: #1E56C4;

  --radius:    2px;
  --radius-lg: 4px;

  --shell: 1440px;
  --gutter: 20px;

  --font: "Satoshi", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Motion: one curve, two durations. */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --fast: .22s;
  --slow: .62s;
}

/* Dark: the designed primary. */
:root {
  --bg:      #0A0E14;
  --bg-2:    #11161F;
  --bg-3:    #19202B;
  --bg-blue: #0D1B33;

  --fg:      #EDF1F6;
  --fg-2:    #A5B2C2;
  --fg-3:    #76849A;

  --line:    rgba(255, 255, 255, .10);
  --line-2:  rgba(255, 255, 255, .20);

  --accent:      var(--blue);
  --accent-text: var(--blue-lift);
  --on-accent:   #FFFFFF;

  --scrim:   linear-gradient(180deg, rgba(10,14,20,0) 0%, rgba(10,14,20,.72) 58%, rgba(10,14,20,.96) 100%);

  color-scheme: dark;
}

@media (prefers-color-scheme: light) {
  :root {
    --bg:      #FBFCFD;
    --bg-2:    #F2F5F8;
    --bg-3:    #E8EDF3;
    --bg-blue: #0D1B33;

    --fg:      #0C1420;
    --fg-2:    #4B5768;
    --fg-3:    #647182;

    --line:    rgba(12, 20, 32, .12);
    --line-2:  rgba(12, 20, 32, .22);

    --accent:      var(--blue);
    --accent-text: var(--blue-press);
    --on-accent:   #FFFFFF;

    --scrim:   linear-gradient(180deg, rgba(8,14,22,0) 0%, rgba(8,14,22,.55) 55%, rgba(8,14,22,.88) 100%);

    color-scheme: light;
  }
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; padding: 0; }
table { border-collapse: collapse; width: 100%; }

::selection { background: var(--blue); color: #fff; }
:root { caret-color: var(--accent-text); }

:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 3px;
  border-radius: var(--radius);
}

* { scrollbar-color: var(--line-2) transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-2); }
::-webkit-scrollbar-thumb { background: var(--line-2); }
::-webkit-scrollbar-thumb:hover { background: var(--fg-3); }

a { color: var(--accent-text); text-underline-offset: .2em; text-decoration-thickness: 1px; }

.ico { width: 1em; height: 1em; flex: none; fill: currentColor; }

/* --------------------------------------------------------------------------
   3. Type
   -------------------------------------------------------------------------- */

h1, h2, h3, h4 { font-weight: 700; line-height: 1.04; letter-spacing: -.032em; }

.t-hero {
  font-size: clamp(2.375rem, 1.1rem + 3.6vw, 4.25rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.042em;
  text-wrap: balance;
}
.t-h2 {
  font-size: clamp(1.75rem, 1.1rem + 2vw, 2.75rem);
  letter-spacing: -.036em;
  text-wrap: balance;
}
.t-h3 { font-size: clamp(1.2rem, 1.05rem + .5vw, 1.5rem); letter-spacing: -.024em; }
.t-h4 { font-size: 1.0625rem; font-weight: 700; letter-spacing: -.016em; }

.t-lead {
  font-size: clamp(1.0625rem, 1rem + .4vw, 1.25rem);
  line-height: 1.5;
  color: var(--fg-2);
  max-width: 46ch;
  text-wrap: pretty;
}
.t-body { color: var(--fg-2); max-width: 64ch; text-wrap: pretty; }
.t-small { font-size: .875rem; color: var(--fg-2); }

/* The measured quantity is the one thing an engineer already knows when they
   arrive, so it is set in the data face at display scale and leads every
   product surface. */
.t-quantity {
  font-family: var(--mono);
  font-size: clamp(1.4rem, 1rem + 1.6vw, 2.125rem);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -.045em;
  color: var(--fg);
}
.t-data {
  font-family: var(--mono);
  font-size: .8125rem;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
  color: var(--fg-2);
}
.t-num { font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   4. Shell and rhythm
   -------------------------------------------------------------------------- */

@media (min-width: 64em) { :root { --gutter: 48px; } }

.shell {
  width: min(100% - (var(--gutter) * 2), var(--shell));
  margin-inline: auto;
}

.band { padding-block: clamp(3.5rem, 6vw, 6rem); }
.band--tight { padding-block: clamp(2.5rem, 4vw, 4rem); }
.band--tint { background: var(--bg-2); }
.band + .band--tint, .band--tint + .band { border-top: 1px solid var(--line); }

.stack > * + * { margin-top: 1rem; }
.mt-3 { margin-top: .75rem; }
.mt-5 { margin-top: 1.5rem; }
.mt-7 { margin-top: 3rem; }
.mt-9 { margin-top: 5rem; }

.head { max-width: 44ch; }
.head .t-lead { margin-top: 1.25rem; max-width: 56ch; }

.u-vh {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* --------------------------------------------------------------------------
   5. Controls
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .875rem 1.375rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--on-accent);
  font-size: .9375rem; font-weight: 500; letter-spacing: -.012em;
  text-decoration: none; white-space: nowrap;
  transition: background var(--fast) var(--ease), transform var(--fast) var(--ease),
              border-color var(--fast) var(--ease), color var(--fast) var(--ease);
}
.btn .ico { font-size: 1.125em; transition: transform var(--fast) var(--ease); }
.btn:hover { background: var(--blue-press); color: var(--on-accent); }
.btn:hover .ico { transform: translateX(3px); }
.btn:active { transform: translateY(1px); }

.btn--quiet { background: transparent; color: var(--fg); border-color: var(--line-2); }
.btn--quiet:hover { background: var(--bg-2); border-color: var(--fg-3); color: var(--fg); }

.btn--on-photo {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .38);
  color: #fff;
  backdrop-filter: blur(10px) saturate(140%);
}
.btn--on-photo:hover { background: rgba(255, 255, 255, .22); border-color: rgba(255,255,255,.64); color: #fff; }

.btn--block { display: flex; width: 100%; justify-content: center; }
.btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }

.link {
  display: inline-flex; align-items: center; gap: .4375rem;
  font-size: .9375rem; font-weight: 500;
  color: var(--accent-text); text-decoration: none;
}
.link .ico { font-size: 1.05em; transition: transform var(--fast) var(--ease); }
.link:hover .ico { transform: translateX(3px); }
.link:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   6. Header
   -------------------------------------------------------------------------- */

.skip {
  position: fixed; left: 1rem; top: -5rem; z-index: 200;
  padding: .75rem 1.125rem; background: var(--accent); color: #fff;
  font-weight: 500; text-decoration: none; border-radius: var(--radius);
  transition: top var(--fast) var(--ease);
}
.skip:focus { top: 1rem; }

.hdr {
  position: fixed; inset: 0 0 auto; z-index: 100;
  border-bottom: 1px solid transparent;
  transition: background var(--slow) var(--ease), border-color var(--slow) var(--ease);
}
/* Over the hero photograph the bar is transparent; past it, it takes the page. */
.hdr[data-stuck] {
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(14px) saturate(160%);
  border-bottom-color: var(--line);
}
.hdr__in { display: flex; align-items: center; gap: 2rem; height: 72px; }

/* The transparent state exists only where a dark-scrimmed photograph is
   behind the bar. Everywhere else the bar is on the page and takes its
   colours, which is what keeps it legible in the light scheme. */
.hdr:not([data-stuck]) .brand,
.hdr:not([data-stuck]) .nav__a:hover,
.hdr:not([data-stuck]) .nav__a[aria-current] { color: #fff; }
.hdr:not([data-stuck]) .nav__a { color: rgba(255,255,255,.84); }
.hdr:not([data-stuck]) .hdr__burger { border-color: rgba(255,255,255,.30); color: #fff; }

.brand {
  display: inline-flex; align-items: baseline; gap: .5rem;
  margin-right: auto; text-decoration: none; color: var(--fg);
}
.brand__name { font-size: 1.375rem; font-weight: 700; letter-spacing: -.05em; }
.brand__mark {
  width: .5rem; height: .5rem; border-radius: 50%;
  background: var(--blue-lift); transform: translateY(-.15em);
}

.nav { display: none; }
.nav__a {
  position: relative;
  font-size: .9375rem; font-weight: 400; color: var(--fg-2); text-decoration: none;
  transition: color var(--fast) var(--ease);
}
.nav__a:hover, .nav__a[aria-current] { color: var(--fg); }
.nav__a[aria-current]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -.5rem;
  height: 1px; background: var(--blue-lift);
}

.hdr__burger {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem; margin-left: auto;
  border: 1px solid var(--line-2); border-radius: var(--radius);
  color: var(--fg);
}
.hdr__burger .ico { font-size: 1.375rem; }

@media (min-width: 62em) {
  .nav { display: flex; align-items: center; gap: 1.75rem; }
  .hdr__burger { display: none; }
  .menu { display: none; }
}

/* Full-screen menu: on a four-tab site the whole viewport is free, and the
   product index fits inside it without a second level. */
.menu {
  position: fixed; inset: 0; z-index: 150;
  background: var(--bg);
  padding: 6rem var(--gutter) 3rem;
  overflow-y: auto;
  opacity: 0; visibility: hidden;
  transition: opacity var(--slow) var(--ease), visibility var(--slow);
}
.menu[data-open] { opacity: 1; visibility: visible; }
.menu__close {
  position: absolute; right: var(--gutter); top: 1.125rem;
  width: 2.75rem; height: 2.75rem;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-2); border-radius: var(--radius); color: var(--fg);
}
.menu__close .ico { font-size: 1.375rem; }
.menu__top { display: grid; gap: .25rem; padding-bottom: 2rem; border-bottom: 1px solid var(--line); }
.menu__top a {
  font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem);
  font-weight: 700; letter-spacing: -.038em;
  color: var(--fg); text-decoration: none;
  padding-block: .375rem;
  transition: color var(--fast) var(--ease);
}
.menu__top a:hover { color: var(--accent-text); }
.menu__groups { display: grid; gap: 2rem; padding-top: 2rem; }
@media (min-width: 48em) { .menu__groups { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 72em) { .menu__groups { grid-template-columns: repeat(4, 1fr); } }
.menu__col h2 {
  font-size: .8125rem; font-weight: 500; color: var(--fg-3);
  padding-bottom: .75rem; margin-bottom: .75rem; border-bottom: 1px solid var(--line);
}
.menu__col a {
  display: block; padding-block: .3125rem;
  font-size: .9375rem; color: var(--fg-2); text-decoration: none;
  transition: color var(--fast) var(--ease);
}
.menu__col a:hover { color: var(--fg); }

/* --------------------------------------------------------------------------
   7. Hero: asymmetric split, the photograph runs off the page edge
   -------------------------------------------------------------------------- */

.hero { position: relative; background: var(--bg); overflow: hidden; }
.hero__in {
  display: grid;
  min-height: 100svh;
  padding-top: 7.5rem; padding-bottom: 3rem;
  align-content: center;
  gap: 2.5rem;
}
@media (min-width: 62em) {
  .hero__in {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr);
    align-items: center;
    padding-top: 6rem; padding-bottom: 4rem;
    gap: 4rem;
  }
}

.hero__copy { position: relative; z-index: 2; max-width: 36rem; }
.hero__copy .t-lead { margin-top: 1.5rem; }
.hero__cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2.25rem; }

.hero__media { position: relative; }
.hero__media img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--radius-lg);
}
@media (min-width: 62em) {
  .hero__media { margin-right: calc(var(--gutter) * -1); }
  .hero__media img { aspect-ratio: 5 / 4; border-radius: var(--radius-lg); }
}

/* A measured value read off the photograph, in the data face. */
.hero__read {
  position: absolute; left: 1.25rem; bottom: 1.25rem;
  display: flex; align-items: baseline; gap: .5rem;
  padding: .625rem .875rem;
  background: rgba(10, 14, 20, .74);
  backdrop-filter: blur(12px) saturate(150%);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--radius);
  font-family: var(--mono); color: #fff;
}
.hero__read b { font-size: 1.125rem; font-weight: 500; letter-spacing: -.03em; }
.hero__read span { font-size: .75rem; color: rgba(255,255,255,.68); }

/* --------------------------------------------------------------------------
   8. The quantity index: 18 groups, grouped into four, no row-per-hairline
   -------------------------------------------------------------------------- */

.index { display: grid; gap: 2.5rem 2rem; }
@media (min-width: 48em) { .index { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 72em) { .index { grid-template-columns: repeat(4, 1fr); gap: 3rem 2rem; } }

.index__col > h3 {
  display: flex; align-items: center; gap: .5rem;
  font-size: .875rem; font-weight: 500; color: var(--fg-3);
  padding-bottom: .875rem; margin-bottom: .25rem;
  border-bottom: 1px solid var(--line-2);
}
.index__col > h3 .ico { font-size: 1.125rem; color: var(--accent-text); }

.index__a {
  display: block; padding-block: .8125rem;
  text-decoration: none; color: var(--fg);
  border-bottom: 1px solid var(--line);
  transition: color var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.index__a:last-child { border-bottom: 0; }
.index__a:hover { color: var(--accent-text); transform: translateX(4px); }
.index__name { display: block; font-size: .9375rem; font-weight: 400; line-height: 1.3; }
.index__q {
  display: block; margin-top: .25rem;
  font-family: var(--mono); font-size: .75rem; color: var(--fg-3); letter-spacing: -.01em;
}

/* --------------------------------------------------------------------------
   9. Product tiles: quantity-led, a photograph drops in behind when supplied
   -------------------------------------------------------------------------- */

.tiles { display: grid; gap: 1px; background: var(--line); border-block: 1px solid var(--line); }
@media (min-width: 40em) { .tiles { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64em) { .tiles { grid-template-columns: repeat(3, 1fr); } }

.tile {
  position: relative; display: flex; flex-direction: column;
  min-height: 15rem; padding: 1.75rem;
  background: var(--bg);
  text-decoration: none; color: var(--fg);
  overflow: hidden;
  transition: background var(--slow) var(--ease);
}
.tile:hover { background: var(--bg-2); }
.tile__q { position: relative; z-index: 1; }
.tile__name {
  position: relative; z-index: 1; margin-top: auto; padding-top: 1.5rem;
  font-size: 1.0625rem; font-weight: 500; letter-spacing: -.018em; line-height: 1.25;
}
.tile__meta {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  margin-top: .625rem;
}
.tile__cat { font-size: .75rem; color: var(--fg-3); }
.tile__go { color: var(--accent-text); font-size: 1.125rem; display: inline-flex; }
.tile__go .ico { transition: transform var(--fast) var(--ease); }
.tile:hover .tile__go .ico { transform: translateX(3px); }
.tile__photo {
  position: absolute; inset: 0; z-index: 0;
  object-fit: cover; width: 100%; height: 100%;
  opacity: .20; filter: grayscale(.25);
  transition: opacity var(--slow) var(--ease), transform var(--slow) var(--ease);
}
.tile:hover .tile__photo { opacity: .32; transform: scale(1.04); }

/* --------------------------------------------------------------------------
   10. Industry panels: asymmetric bento, photography-led
   -------------------------------------------------------------------------- */

.panels { display: grid; gap: 1rem; }
@media (min-width: 52em) {
  .panels { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 15rem; }
  .panels > :nth-child(1) { grid-column: span 2; grid-row: span 2; }
  .panels > :nth-child(4) { grid-column: span 3; }
}

.panel {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 15rem; padding: 1.75rem;
  border-radius: var(--radius-lg); overflow: hidden;
  text-decoration: none; color: #fff; background: var(--bg-3);
}
.panel img {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.1s var(--ease);
}
.panel::after { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--scrim); }
.panel > * { position: relative; z-index: 2; }
.panel:hover img { transform: scale(1.05); }
.panel__name { font-size: clamp(1.35rem, 1.1rem + 1vw, 2rem); font-weight: 700; letter-spacing: -.032em; }
.panel__desc {
  margin-top: .5rem; max-width: 42ch; font-size: .9375rem; color: rgba(255,255,255,.84);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.panel__go {
  display: inline-flex; align-items: center; gap: .4375rem;
  margin-top: 1rem; font-size: .875rem; font-weight: 500; color: #fff;
}
.panel__go .ico { transition: transform var(--fast) var(--ease); }
.panel:hover .panel__go .ico { transform: translateX(3px); }

/* --------------------------------------------------------------------------
   11. Full-bleed statement
   -------------------------------------------------------------------------- */

.statement {
  position: relative;
  display: grid; align-items: center;
  min-height: 32rem; padding: clamp(3rem, 7vw, 7rem) 0;
  color: #fff; background: var(--bg-3); overflow: hidden;
}
.statement img { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; }
.statement::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(8,12,20,.94) 0%, rgba(8,12,20,.72) 48%, rgba(8,12,20,.30) 100%);
}
.statement > .shell { position: relative; z-index: 2; }
.statement__copy { max-width: 40rem; }
.statement__copy h2 { color: #fff; }
.statement__copy p { margin-top: 1.25rem; color: rgba(255,255,255,.86); max-width: 52ch; }

/* --------------------------------------------------------------------------
   12. Criteria: editorial stack, no cards, no numbering
   -------------------------------------------------------------------------- */

.crit { display: grid; gap: 2.5rem 3.5rem; }
@media (min-width: 52em) { .crit { grid-template-columns: repeat(2, 1fr); } }
.crit__item { padding-top: 1.5rem; border-top: 1px solid var(--line-2); max-width: 40ch; }
.crit__t { font-size: 1.125rem; font-weight: 500; letter-spacing: -.022em; }
.crit__f { margin-top: .25rem; font-size: .875rem; color: var(--accent-text); }
.crit__b { margin-top: .875rem; color: var(--fg-2); font-size: .9375rem; }

/* --------------------------------------------------------------------------
   13. Records, key/value, benefits, applications
   -------------------------------------------------------------------------- */

.recs {
  display: grid; gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden;
}
@media (min-width: 60em) { .recs { grid-template-columns: repeat(2, 1fr); } }
.rec { background: var(--bg); padding: 1.5rem; }
.rec__k { font-size: .75rem; color: var(--fg-3); }
.rec__v { margin-top: .375rem; font-size: 1.0625rem; font-weight: 500; letter-spacing: -.018em; }
.rec__b { margin-top: .5rem; font-size: .9375rem; color: var(--fg-2); }
.rec__go { margin-top: .875rem; }

.kv { display: grid; gap: 1.5rem; margin-top: 2.5rem; padding-top: 1.75rem; border-top: 1px solid var(--line); }
@media (min-width: 48em) { .kv { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.kv__k { font-size: .75rem; color: var(--fg-3); }
.kv__v { margin-top: .3125rem; font-size: .9375rem; }

.bens { display: grid; gap: 1.75rem 3rem; }
@media (min-width: 60em) { .bens { grid-template-columns: repeat(2, 1fr); } }
.ben { display: grid; grid-template-columns: 1.375rem 1fr; gap: .875rem; align-items: start; max-width: 46ch; }
.ben .ico { font-size: 1.25rem; color: var(--accent-text); margin-top: .1875rem; }
.ben p { color: var(--fg-2); font-size: .9375rem; }

.apps { display: grid; gap: 0 3rem; }
@media (min-width: 60em) { .apps { grid-template-columns: repeat(2, 1fr); } }
.apps li { padding-block: 1rem; border-bottom: 1px solid var(--line); color: var(--fg-2); font-size: .9375rem; }

/* --------------------------------------------------------------------------
   14. The pending marker: product policy, not a placeholder style
   -------------------------------------------------------------------------- */

.pending {
  display: inline-flex; align-items: center; gap: .4375rem;
  padding: .3125rem .625rem;
  border: 1px dashed var(--line-2); border-radius: var(--radius);
  font-size: .75rem; color: var(--fg-3);
}
.pending .ico { font-size: 1rem; }

/* --------------------------------------------------------------------------
   15. Forms
   -------------------------------------------------------------------------- */

.field { display: block; margin-bottom: 1.125rem; }
.field__l { display: block; margin-bottom: .4375rem; font-size: .875rem; font-weight: 400; color: var(--fg); }
.field__l span { color: var(--fg-3); font-weight: 400; }
.field__i {
  display: block; width: 100%;
  padding: .8125rem .9375rem;
  background: var(--bg);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  color: var(--fg);
  transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.field__i::placeholder { color: var(--fg-3); }
.field__i:hover { border-color: var(--fg-3); }
.field__i:focus { outline: none; border-color: var(--accent-text); background: var(--bg-2); }
textarea.field__i { resize: vertical; min-height: 8rem; line-height: 1.5; }

.field--bad .field__i { border-color: #E4736B; }
.field__e { display: block; margin-top: .375rem; font-size: .8125rem; color: #E4736B; }
.field__h { display: block; margin-top: .375rem; font-size: .8125rem; color: var(--fg-3); }
.row2 { display: grid; gap: 0 1.25rem; }
@media (min-width: 40em) { .row2 { grid-template-columns: 1fr 1fr; } }
.u-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.note {
  display: grid; grid-template-columns: 1.25rem 1fr; gap: .875rem;
  padding: 1rem 1.125rem; margin-bottom: 1.5rem;
  border: 1px solid var(--line-2); border-radius: var(--radius);
  background: var(--bg-2); font-size: .9375rem;
}
.note .ico { font-size: 1.25rem; color: var(--accent-text); margin-top: .0625rem; }
.note--bad { border-color: #8A3A34; }
.note--bad .ico { color: #E4736B; }

.contact { display: grid; gap: 3rem; }
/* Where a split pairs prose with an image, centre them: top alignment leaves
   the shorter column hanging and reads as a gap rather than a composition. */
.contact--middle { align-items: center; }
@media (min-width: 64em) { .contact { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 5rem; } }
.contact__aside { display: grid; gap: 2.5rem; align-content: start; }
.reach { display: grid; gap: .875rem; }
.reach li { display: grid; grid-template-columns: 1.25rem 1fr; gap: .75rem; font-size: .9375rem; color: var(--fg-2); }
.reach .ico { font-size: 1.125rem; color: var(--fg-3); margin-top: .1875rem; }
.reach a { color: var(--fg); text-decoration: none; }
.reach a:hover { color: var(--accent-text); text-decoration: underline; }

/* --------------------------------------------------------------------------
   16. Interior page head
   -------------------------------------------------------------------------- */

.phead { position: relative; padding-top: 8.5rem; padding-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.phead--photo { color: #fff; padding-bottom: clamp(3rem, 6vw, 6rem); background: var(--bg-3); overflow: hidden; }
.phead--photo img { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; }
.phead--photo::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(8,12,20,.90) 0%, rgba(8,12,20,.64) 42%, rgba(8,12,20,.88) 100%);
}
.phead--photo > .shell { position: relative; z-index: 2; }
.phead--photo .t-lead, .phead--photo .kv__v { color: rgba(255,255,255,.88); }
.phead--photo .kv__k { color: rgba(255,255,255,.64); }
.phead--photo .kv { border-top-color: rgba(255,255,255,.24); }
.phead__title { margin-top: 1.25rem; }
.phead__cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }

.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: .8125rem; color: var(--fg-3); }
.crumbs a { color: var(--fg-3); text-decoration: none; }
.crumbs a:hover { color: var(--fg); }
.phead--photo .crumbs, .phead--photo .crumbs a { color: rgba(255,255,255,.70); }
.phead--photo .crumbs a:hover { color: #fff; }
.crumbs .ico { font-size: .875rem; opacity: .5; }

/* --------------------------------------------------------------------------
   17. Close: the conversion block is a form, not a band of buttons
   -------------------------------------------------------------------------- */

.close { background: var(--bg-blue); color: #EDF1F6; }
.close__in { display: grid; gap: 3rem; padding-block: clamp(4rem, 7vw, 7rem); }
@media (min-width: 64em) { .close__in { grid-template-columns: minmax(0, 1fr) minmax(0, 26rem); gap: 5rem; align-items: start; } }
.close h2 { color: #fff; }
.close p { color: #A8BBD6; }
.close .field__l { color: #DCE6F4; }
.close .field__i { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.20); color: #fff; }
.close .field__i:focus { border-color: var(--blue-lift); background: rgba(255,255,255,.09); }
.close .field__i::placeholder { color: #8195AF; }
.close .field__h { color: #93A7C2; }
.close .link { color: var(--blue-lift); }
.close .pending { border-color: rgba(255,255,255,.26); color: #A8BBD6; }

/* --------------------------------------------------------------------------
   18. Footer
   -------------------------------------------------------------------------- */

.ftr { background: var(--bg); border-top: 1px solid var(--line); padding-top: 4rem; }
.ftr__grid { display: grid; gap: 2.5rem; padding-bottom: 3rem; }
@media (min-width: 48em) { .ftr__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64em) { .ftr__grid { grid-template-columns: 1.4fr repeat(3, 1fr); gap: 3rem; } }
.ftr h2 { font-size: .8125rem; font-weight: 500; color: var(--fg-3); margin-bottom: 1rem; }
.ftr__list { display: grid; gap: .625rem; font-size: .9375rem; }
.ftr__list a { color: var(--fg-2); text-decoration: none; }
.ftr__list a:hover { color: var(--fg); }
.ftr__list li { color: var(--fg-2); }
.ftr__claim { color: var(--fg-2); max-width: 26ch; margin-top: 1rem; }
.ftr__bar {
  display: flex; flex-wrap: wrap; gap: .75rem 2rem; align-items: center;
  padding-block: 1.5rem; border-top: 1px solid var(--line);
  font-size: .8125rem; color: var(--fg-3);
}
.ftr__bar nav { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-left: auto; }
.ftr__bar a { color: var(--fg-3); text-decoration: none; }
.ftr__bar a:hover { color: var(--fg); }

/* --------------------------------------------------------------------------
   19. Motion. Two moments: the hero settles, sections arrive.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  .js [data-rise] { opacity: 0; transform: translateY(20px); }
  .js [data-rise].is-in {
    opacity: 1; transform: none;
    transition: opacity var(--slow) var(--ease), transform .8s var(--ease);
    transition-delay: calc(var(--i, 0) * 70ms);
  }

  /* The hero uses the same class-and-transition mechanism as everything else
     rather than a keyframe animation. A transition that is disabled still
     lands on its end state, so the copy is readable even if animation never
     runs; a forwards animation that is disabled leaves it at zero opacity. */
  .js .hero__copy > *, .js .hero__media { opacity: 0; transform: translateY(16px); }
  .js .hero.is-in .hero__copy > *, .js .hero.is-in .hero__media {
    opacity: 1; transform: none;
    transition: opacity .8s var(--ease), transform .9s var(--ease);
  }
  .js .hero.is-in .hero__copy > :nth-child(1) { transition-delay: .06s; }
  .js .hero.is-in .hero__copy > :nth-child(2) { transition-delay: .16s; }
  .js .hero.is-in .hero__copy > :nth-child(3) { transition-delay: .26s; }
  .js .hero.is-in .hero__media { transition-delay: .1s; transition-duration: 1s; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-delay: 0ms !important;
    transition-duration: .001ms !important;
  }
  .js [data-rise] { opacity: 1; transform: none; }
  .js .hero__copy > *, .js .hero__media { opacity: 1; transform: none; }
}

@media (prefers-reduced-transparency: reduce) {
  .hdr[data-stuck], .hero__read, .btn--on-photo { backdrop-filter: none; }
  .hdr[data-stuck] { background: var(--bg); }
  .hero__read { background: rgba(10, 14, 20, .94); }
}

/* --------------------------------------------------------------------------
   20. Print
   -------------------------------------------------------------------------- */

@media print {
  .hdr, .menu, .skip, .close, .ftr__grid { display: none; }
  body { background: #fff; color: #000; }
  .panel, .statement, .phead--photo { color: #000; }
  a { text-decoration: none; }
}