/* ══════════════════════════════════════════════════════════
   GÖKHAN GÜLDÜK · Online personal training
   White ground · saturated poster colour · oversized grotesk
   Display: Archivo (variable wdth 62 to 125 / wght 100 to 900)
   Body: Inter Tight · Micro and data: DM Mono
   ══════════════════════════════════════════════════════════ */

/* ─────────── colour ───────────
   Monochrome, after the Equinox reference: black, white, grey, no accent
   colour used decoratively. Red appears only on errors, where it is
   carrying meaning rather than decoration.

   Two surfaces exist. The page surface flips with the mode. The dark
   panels (nav, band, booking form) stay dark in both modes, so anything
   sitting on them uses --on-panel, never --ink. */

:root {
  color-scheme: light;

  --paper:  #ffffff;   /* page surface */
  --ink:    #0b0b0b;   /* text, borders, marks */
  --mist:   #f5f5f3;   /* quiet fill */
  --gray:   #5a5a56;   /* secondary text, 6.4:1 */
  --hair:   #e3e3df;   /* hairline */
  --line:   #d8d8d3;   /* grid lines between cards */

  --panel:    #0b0b0b; /* inverted panel background */
  --on-panel: #ffffff; /* anything sitting on a panel */

  --brand:    #0b0b0b; /* primary action */
  --on-brand: #ffffff;

  --focus:  #0b0b0b;
  --accent: #b3372a;   /* errors only */
  --accent-text:  #b3372a;
  --accent-onink: #ff8577;

  --wash-1: #efefec;   /* ambient hero wash, deliberately almost nothing */
  --wash-2: #e9e9e6;
  --hero-bg: linear-gradient(170deg, #fbfbf9, #f3f3f0);

  --font-d: "Archivo", "Arial Black", sans-serif;
  --font-b: "Inter Tight", system-ui, sans-serif;
  --font-m: "DM Mono", ui-monospace, monospace;

  --pad: clamp(1.15rem, 4.5vw, 5.5rem);
  --ease: cubic-bezier(.16,1,.3,1);
  --maxw: 1440px;
}

:root[data-mode="dark"] {
  color-scheme: dark;

  --paper:  #0a0a0a;
  --ink:    #f2f2f0;
  --mist:   #141414;
  --gray:   #a3a39e;   /* 7.2:1 on the dark surface */
  --hair:   #272725;
  --line:   #2b2b28;

  --panel:    #161616;
  --on-panel: #f2f2f0;

  --brand:    #f2f2f0;
  --on-brand: #0a0a0a;

  --focus:  #f2f2f0;
  --accent: #ff8577;
  --accent-text:  #ff8577;
  --accent-onink: #ff8577;

  --wash-1: #1b1b1b;
  --wash-2: #161616;
  --hero-bg: linear-gradient(170deg, #131313, #0c0c0c);
}

/* follow the operating system until the visitor chooses for themselves */
@media (prefers-color-scheme: dark) {
  :root:not([data-mode="light"]) {
    color-scheme: dark;
    --paper: #0a0a0a; --ink: #f2f2f0; --mist: #141414; --gray: #a3a39e;
    --hair: #272725; --line: #2b2b28;
    --panel: #161616; --on-panel: #f2f2f0;
    --brand: #f2f2f0; --on-brand: #0a0a0a;
    --focus: #f2f2f0;
    --accent: #ff8577; --accent-text: #ff8577; --accent-onink: #ff8577;
    --wash-1: #1b1b1b; --wash-2: #161616;
    --hero-bg: linear-gradient(170deg, #131313, #0c0c0c);
  }
}

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

/* a class-level `display` must never beat the hidden attribute */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-b);
  font-size: 1rem;
  line-height: 1.55;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
::selection { background: var(--brand); color: var(--on-brand); }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 3px; }
.apply-shell :focus-visible,
.nav-pill :focus-visible,
.band :focus-visible { outline-color: var(--on-panel); }

.mono {
  font-family: var(--font-m);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

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

/* ─────────── texture + ambient flow ───────────
   Grain filters and the inset panel treatment are lifted from the
   sample-prompts reference. */

.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* page-wide soft grain */
.bg-noise {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .04;
  filter: url(#grainSoft);
}

/* finer grain, sits over a coloured panel */
.grain-overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: .07;
  mix-blend-mode: overlay;
  filter: url(#grainFine);
}

.flowfield {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  filter: blur(64px);
  opacity: .9;
}

.blob { position: absolute; border-radius: 50%; will-change: transform; }
.blob-a { width: 52vw; height: 52vw; background: var(--wash-1); top: -18vw; left: -10vw;  animation: drift-a 34s ease-in-out infinite; }
.blob-b { width: 42vw; height: 42vw; background: var(--wash-2); bottom: -16vw; right: -8vw; animation: drift-b 42s ease-in-out infinite; }
.blob-c { width: 30vw; height: 30vw; background: var(--wash-1); top: 4vw; right: 12vw;    animation: drift-c 38s ease-in-out infinite; opacity: .7; }

@keyframes drift-a { 50% { transform: translate3d(9vw, 7vh, 0) scale(1.16); } }
@keyframes drift-b { 50% { transform: translate3d(-11vw, -6vh, 0) scale(.86); } }
@keyframes drift-c { 50% { transform: translate3d(7vw, -8vh, 0) scale(1.14); } }

main, .nav, .footer, .dock, .band { position: relative; z-index: 2; }

/* ─────────── skip link ─────────── */

.skip {
  position: fixed;
  top: .5rem;
  left: 50%;
  transform: translate(-50%, -200%);
  z-index: 80;
  background: var(--panel);
  color: var(--on-panel);
  font-size: .8rem;
  font-weight: 600;
  padding: .8rem 1.4rem;
  border-radius: 999px;
  transition: transform .25s var(--ease);
}
.skip:focus-visible { transform: translate(-50%, 0); }

/* ─────────── buttons ─────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55em;
  font-family: var(--font-b);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .04em;
  line-height: 1;
  padding: .95rem 1.5rem;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: none;
  color: var(--ink);
  cursor: pointer;
  white-space: nowrap;
  transition: transform .3s var(--ease), background .2s, color .2s, box-shadow .3s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-lg { padding: 1.15rem 2rem; font-size: .9rem; }

.btn-brand { background: var(--brand); color: var(--on-brand); border-color: var(--brand); }
.btn-brand:hover { box-shadow: 0 8px 0 -2px var(--ink); }

.btn-ink { background: var(--ink); color: var(--paper); }
.btn-ink:hover { box-shadow: 0 8px 0 -2px var(--brand); }

.btn-outline { background: var(--paper); }
.btn-outline:hover { background: var(--ink); color: var(--paper); }

.btn-quiet { border-color: transparent; padding-left: .8rem; padding-right: .8rem; }
.btn-quiet:hover { border-color: var(--ink); }

.btn:disabled { opacity: .32; cursor: not-allowed; transform: none; box-shadow: none; }

/* ─────────── micro labels ─────────── */

.microlabel {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font-family: var(--font-m);
  font-size: .7rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink);
}
.microlabel .ico { font-size: .95rem; color: var(--gray); }
.microlabel-muted { color: var(--gray); }
.microlabel-muted .ico { color: var(--gray); }
.microlabel-onDark { color: var(--on-panel); }
.microlabel-onDark .ico { color: var(--on-panel); }

/* ─────────── nav: pill hanging from the top edge ─────────── */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.nav-pill {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2rem);
  padding: .5rem .5rem .5rem 1.25rem;
  background: var(--panel);
  color: var(--on-panel);
  border-radius: 0 0 20px 20px;
  transition: box-shadow .35s var(--ease), transform .35s var(--ease);
}
.nav.is-stuck .nav-pill { box-shadow: 0 10px 30px -12px rgba(11,11,11,.55); }

.nav-logo { display: inline-flex; align-items: center; gap: .55rem; }
.logo-mark { width: 24px; height: 24px; color: var(--on-panel); }
.nav-word {
  font-family: var(--font-d);
  font-variation-settings: "wdth" 100, "wght" 800;
  font-size: .95rem;
  letter-spacing: .02em;
  white-space: nowrap;
}

.nav-links { display: flex; gap: clamp(.9rem, 1.8vw, 1.5rem); }
.nav-links a {
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .01em;
  color: rgba(255,255,255,.72);
  position: relative;
  padding: .2rem 0;
  transition: color .2s;
}
.nav-links a:hover { color: var(--on-panel); }
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%; bottom: 0;
  height: 1.5px;
  background: var(--on-panel);
  transition: right .3s var(--ease);
}
.nav-links a:hover::after { right: 0; }

.nav-cta { padding: .68rem 1.2rem; font-size: .76rem; border-color: var(--on-panel); }

.nav-burger {
  display: none;
  flex-direction: column;
  gap: 4px;
  padding: .6rem;
  border: 0;
  background: none;
  cursor: pointer;
}
.nav-burger span { width: 20px; height: 2px; background: var(--on-panel); border-radius: 2px; }

.mobile-menu[hidden] { display: none; }
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 59;
  background: var(--panel);
  color: var(--on-panel);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.6rem;
}
.mobile-menu a {
  font-family: var(--font-d);
  font-variation-settings: "wdth" 105, "wght" 800;
  font-size: clamp(2rem, 9vw, 3rem);
  text-transform: uppercase;
  line-height: 1;
}
.mobile-menu .btn { font-family: var(--font-b); font-size: .9rem; margin-top: .8rem; background: var(--on-panel); color: var(--panel); border-color: var(--on-panel); }

/* ─────────── hero: inset rounded panel ─────────── */

.hero-inset { padding: clamp(.6rem, 1.1vw, 1.1rem); }

.hero {
  position: relative;
  overflow: hidden;
  border-radius: clamp(1.25rem, 2.4vw, 2rem);
  background: var(--hero-bg);
  padding: clamp(6.5rem, 12vh, 9rem) clamp(1.25rem, 4vw, 4.5rem) clamp(2.5rem, 5vw, 4rem);
}

.hero-inner {
  position: relative;
  z-index: 2;
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, clamp(330px, 31vw, 470px));
  grid-template-areas:
    "micro  photo"
    "title  photo"
    "body   photo";
  column-gap: clamp(1.5rem, 4vw, 4rem);
  align-items: start;
}

.hero-micro { grid-area: micro; margin-bottom: 1.3rem; }

/* the container context the headline is measured against */
.hero-title {
  grid-area: title;
  display: flex;
  flex-direction: column;
  container-type: inline-size;
}

.hero-small {
  font-family: var(--font-d);
  font-variation-settings: "wdth" 90, "wght" 500;
  font-size: clamp(1.3rem, 3.2vw, 2.4rem);
  text-transform: uppercase;
  line-height: 1.05;
  letter-spacing: .01em;
  color: var(--gray);
}
.hero-small-2 { margin-top: .35rem; color: var(--ink); }

/* SIGNATURE, hero: three lines of BETTER, each one wider and heavier than
   the last, so the word visibly grows from move to perform to live. The
   first two are outlined; the last is solid and fills the column. */
.hero-motto { gap: clamp(.5rem, 1.2vw, 1rem); }
.hm-row { display: block; }
.hm-verb {
  display: flex;
  align-items: baseline;
  gap: .7em;
  font-family: var(--font-d);
  font-variation-settings: "wdth" 100, "wght" 700;
  font-size: clamp(.9rem, 1.6vw, 1.3rem);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: .15em;
}
.hm-verb i {
  font-family: var(--font-m);
  font-style: normal;
  font-weight: 400;
  font-size: .68em;
  letter-spacing: .12em;
  color: var(--gray);
}
.hm-word {
  display: block;
  width: max-content;
  font-family: var(--font-d);
  text-transform: uppercase;
  line-height: .8;
  letter-spacing: -.01em;
  white-space: nowrap;
  font-size: clamp(3rem, 12vw, 10rem);
  font-variation-settings: "wdth" 62, "wght" 300;
  transition: font-variation-settings 1.4s var(--ease);
}
.hm-1 .hm-word,
.hm-2 .hm-word { color: transparent; -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; }
.hm-1 .hm-word { -webkit-text-stroke-color: var(--gray); }
.hm-2 .hm-word { transition-delay: .18s; }
.hm-3 .hm-word { transition-delay: .36s; }
body.lit .hm-1 .hm-word { font-variation-settings: "wdth" 72, "wght" 500; }
body.lit .hm-2 .hm-word { font-variation-settings: "wdth" 98, "wght" 700; }
body.lit .hm-3 .hm-word { font-variation-settings: "wdth" 125, "wght" 900; }

.hl {
  background: var(--brand);
  color: var(--on-brand);
  box-shadow: .22em 0 0 var(--brand), -.22em 0 0 var(--brand);
  padding: 0 .02em;
}

.hero-huge {
  display: flex;
  font-family: var(--font-d);
  line-height: .84;
  letter-spacing: -.015em;
  margin: .12em 0 .1em;
  /* fallback: sized off the viewport, kept small enough to never collide */
  font-size: clamp(3rem, 10vw, 11rem);
}

/* At full weight the word measures 5.87x its font size, so 1/5.87 of the
   column makes STRONGER span the text column exactly, at every width. */
@supports (font-size: 1cqw) {
  .hero-huge { font-size: 16.8cqw; }
  .hm-word { font-size: 17.4cqw; }
}

/* SIGNATURE: each letter is wider and heavier than the last */
.hero-huge .fl {
  display: inline-block;
  font-variation-settings: "wdth" 62, "wght" 400;
  transition: font-variation-settings 1.3s var(--ease), color .25s;
}
body.lit .hero-huge .fl { font-variation-settings: "wdth" var(--w, 118), "wght" var(--g, 900); }
.hero-huge .fl:nth-child(1) { transition-delay: .04s }
.hero-huge .fl:nth-child(2) { transition-delay: .10s }
.hero-huge .fl:nth-child(3) { transition-delay: .16s }
.hero-huge .fl:nth-child(4) { transition-delay: .22s }
.hero-huge .fl:nth-child(5) { transition-delay: .28s }
.hero-huge .fl:nth-child(6) { transition-delay: .34s }
.hero-huge .fl:nth-child(7) { transition-delay: .40s }
.hero-huge .fl:nth-child(8) { transition-delay: .46s }
.hero-huge .fl:hover { color: var(--gray); }

.hero-body { grid-area: body; max-width: 44ch; margin-top: 1.6rem; }
.hero-lede { font-size: clamp(1rem, 1.35vw, 1.14rem); }
.dim { color: var(--gray); }

.hero-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.8rem; }
@media (max-width: 760px) {  /* both buttons on one row on phones */
  .hero-actions { flex-wrap: nowrap; gap: .5rem; }
  .hero-actions .btn-lg { flex: 1 1 auto; padding: 1.05rem clamp(.7rem, 3.4vw, 1.2rem); font-size: clamp(.72rem, 3.4vw, .9rem); letter-spacing: .02em; }
}
.hero-trust { margin-top: 1.4rem; color: var(--gray); font-size: .66rem; }
.hero-trust .ico { color: var(--gray); }

.hero-photo { grid-area: photo; align-self: center; margin-right: clamp(3.6rem, 4vw, 4rem); }  /* clear of the fixed load gauge */

.frame {
  position: relative;
  border: 2.5px solid var(--ink);
  border-radius: 6px;
  overflow: hidden;
  background: var(--mist);
}
.frame-volt { box-shadow: 12px 12px 0 -1px var(--brand), 12px 12px 0 1.5px var(--ink); }
.frame img { width: 100%; height: auto; aspect-ratio: 4/5; object-fit: cover; object-position: 50% 30%; }

.halftone { filter: grayscale(1) contrast(1.22) brightness(1.04); }
.frame-volt::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(var(--ink) 32%, transparent 33%);
  background-size: 5px 5px;
  mix-blend-mode: overlay;
  opacity: .5;
}

.photo-cap {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: .8rem;
  font-size: .72rem;
  color: var(--gray);
}
.photo-cap .mono { color: var(--gray); }

/* ─────────── positioning band ───────────
   One sentence carrying the search terms, with each specialism linking to
   its card. Replaces the decorative ticker that said nothing. */

.band {
  background: var(--panel);
  color: var(--on-panel);
  padding: clamp(2rem, 4.5vw, 3.4rem) var(--pad);
}

.band-line {
  max-width: var(--maxw);
  margin: 0 auto;
  font-family: var(--font-d);
  font-variation-settings: "wdth" 96, "wght" 600;
  font-size: clamp(1.35rem, 3.1vw, 2.5rem);
  line-height: 1.18;
  letter-spacing: -.01em;
  text-wrap: balance;
}

.band-line a {
  color: var(--on-panel);
  font-variation-settings: "wdth" 100, "wght" 800;
  /* real underlines, not a pseudo element: these links wrap across lines */
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: .16em;
  text-decoration-color: rgba(255,255,255,.38);
  transition: text-decoration-color .25s;
}
.band-line a:hover,
.band-line a:focus-visible { text-decoration-color: var(--on-panel); }

.band-dim {
  display: block;
  margin-top: .5em;
  color: rgba(255,255,255,.55);
  font-variation-settings: "wdth" 92, "wght" 400;
  font-size: .62em;
}

/* ─────────── sections ─────────── */

.section {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(4.5rem, 9vw, 8rem) var(--pad);
}

.sec-head { max-width: 60ch; margin-bottom: clamp(2.4rem, 5vw, 3.8rem); }

.sec-title {
  font-family: var(--font-d);
  font-variation-settings: "wdth" 108, "wght" 800;
  font-size: clamp(2.4rem, 6.6vw, 5.2rem);
  line-height: .93;
  letter-spacing: -.018em;
  text-transform: uppercase;
  margin: .55rem 0 1rem;
}

.outline-type {
  color: transparent;
  -webkit-text-stroke: 2px var(--ink);
  paint-order: stroke fill;
}

.hl-block {
  background: var(--brand);
  color: var(--on-brand);
  box-shadow: .16em 0 0 var(--brand), -.16em 0 0 var(--brand);
}

.sec-lede { color: var(--gray); max-width: 48ch; font-size: 1.02rem; }

/* ─────────── stats ─────────── */

.stats {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(3rem, 6vw, 4.5rem) var(--pad);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1rem, 3vw, 2.5rem);
}
.stat { display: flex; flex-direction: column; gap: .3rem; border-top: 2.5px solid var(--ink); padding-top: 1rem; }
.stat-n {
  font-family: var(--font-d);
  font-variation-settings: "wdth" 96, "wght" 800;
  font-size: clamp(2.4rem, 5.4vw, 4.4rem);
  line-height: .9;
  font-variant-numeric: tabular-nums;
}
.stat-l { font-size: .82rem; color: var(--gray); font-weight: 500; }
.stat-word { letter-spacing: -.02em; }

/* ─────────── about ───────────
   Three bands: title and lead, a fact strip, then the full story beside
   the credentials card. Phones stack everything into one column. */

.about-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: end;
}
.about-head .sec-title { margin-bottom: 0; }

.about-intro { display: flex; flex-direction: column; gap: 1rem; padding-bottom: .4rem; }

.about-lead {
  font-size: clamp(1.18rem, 1.9vw, 1.6rem);
  line-height: 1.32;
  font-weight: 500;
  letter-spacing: -.01em;
  max-width: 38ch;
  text-wrap: pretty;
}

/* fact strip */
.about-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: clamp(2.6rem, 5.5vw, 4.5rem) 0;
  border-top: 2.5px solid var(--ink);
  border-bottom: 1px solid var(--hair);
}
.about-fact {
  padding: 1.2rem clamp(.9rem, 2vw, 1.6rem) 1.4rem;
  display: flex;
  flex-direction: column;
  gap: .55rem;
  min-width: 0;
}
.about-fact:first-child { padding-left: 0; }
.about-fact + .about-fact { border-left: 1px solid var(--line); }
.about-fact dt {
  font-size: .66rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gray);
}
.about-fact dd { font-size: .95rem; font-weight: 500; }
.about-fact dd b {
  font-family: var(--font-d);
  font-variation-settings: "wdth" 96, "wght" 800;
  font-size: clamp(1.5rem, 2.8vw, 2.4rem);
  line-height: .95;
  text-transform: uppercase;
  letter-spacing: -.01em;
}
.about-fact dd span { display: block; margin-top: .35rem; font-size: .84rem; color: var(--gray); }

/* story + credentials */
.about-body {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}

.about-copy { display: flex; flex-direction: column; gap: 1.15rem; max-width: 60ch; }
.about-copy p { font-size: 1.04rem; line-height: 1.62; }
.about-copy strong { font-weight: 700; }
.about-copy .about-sub {
  font-family: var(--font-d);
  font-variation-settings: "wdth" 104, "wght" 800;
  font-size: clamp(1.35rem, 2.2vw, 1.8rem);
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: -.01em;
  margin-top: 1.2rem;
  padding-top: 1.4rem;
  border-top: 2.5px solid var(--ink);
}
.about-copy .about-motto {
  margin-top: .6rem;
  border: 1px solid var(--line);
  padding: 1.1rem 1.3rem;
  border-radius: 8px;
  background: var(--panel);
  color: var(--on-panel);
  font-family: var(--font-d);
  font-variation-settings: "wdth" 104, "wght" 800;
  font-size: clamp(1.05rem, 1.8vw, 1.35rem);
  line-height: 1.15;
  text-transform: uppercase;
}

.about-card {
  position: sticky;
  top: 6.5rem;
  border: 2.5px solid var(--ink);
  border-radius: 12px;
  background: var(--paper);
  padding: clamp(1.3rem, 2.4vw, 1.9rem);
  box-shadow: 10px 10px 0 -1px var(--brand), 10px 10px 0 1.5px var(--ink);
}

.about-card-h {
  font-size: .66rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gray);
  margin-bottom: .6rem;
}

.certs { list-style: none; }
.certs li {
  display: grid;
  grid-template-columns: 6.6rem minmax(0, 1fr);
  gap: .2rem 1rem;
  align-items: baseline;
  padding: .72rem 0;
  border-top: 1px solid var(--hair);
}
.certs b {
  font-family: var(--font-d);
  font-variation-settings: "wdth" 96, "wght" 800;
  font-size: .98rem;
  text-transform: uppercase;
  letter-spacing: .01em;
}
.certs span { font-size: .9rem; color: var(--gray); }


@media (max-width: 1080px) {
  .about-head { grid-template-columns: 1fr; align-items: start; }
  .about-lead { max-width: 40ch; }
  .about-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .about-fact:nth-child(3) { padding-left: 0; border-left: 0; }
  .about-fact:nth-child(n+3) { border-top: 1px solid var(--hair); }
  .about-body { grid-template-columns: 1fr; }
  .about-card { position: static; max-width: 620px; }
}

@media (max-width: 760px) {
  .about-card { box-shadow: 7px 7px 0 -1px var(--brand), 7px 7px 0 1.5px var(--ink); }
  .certs li { grid-template-columns: 1fr; }
}

@media (max-width: 420px) {
  .about-fact { padding-left: .8rem; padding-right: .6rem; }
  .about-fact:nth-child(odd) { padding-left: 0; }
}

/* ─────────── method phases ─────────── */

.phases { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2.4vw, 2rem); }

.phase {
  border: 2.5px solid var(--ink);
  border-radius: 10px;
  padding: clamp(1.4rem, 2.6vw, 2.2rem);
  background: var(--paper);
  display: flex;
  flex-direction: column;
  gap: .7rem;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.phase:hover { transform: translate(-3px, -3px); box-shadow: 9px 9px 0 -1px var(--brand), 9px 9px 0 1.5px var(--ink); }

.phase-icon { width: 44px; height: 44px; color: var(--ink); }
.phase-icon svg { width: 100%; height: 100%; }

.phase-tag { color: var(--gray); margin-top: .4rem; }
.phase-name {
  font-family: var(--font-d);
  font-variation-settings: "wdth" 104, "wght" 800;
  font-size: clamp(1.8rem, 3.4vw, 2.7rem);
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: -.01em;
}
.phase-copy { color: var(--gray); font-size: .95rem; }

.fineprint { margin-top: 1rem; font-size: .74rem; color: var(--gray); }

/* ─────────── stories ─────────── */

.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.2rem, 3vw, 2.4rem); }

.quote { display: flex; flex-direction: column; gap: 1.1rem; }
.quote blockquote {
  font-family: var(--font-d);
  font-variation-settings: "wdth" 88, "wght" 500;
  font-size: clamp(1.15rem, 1.9vw, 1.45rem);
  line-height: 1.28;
  letter-spacing: -.005em;
  border-left: 4px solid var(--ink);
  padding-left: 1.1rem;
}
.quote figcaption { display: flex; flex-direction: column; gap: .15rem; padding-left: 1.1rem; }
.q-name { font-weight: 700; font-size: .92rem; }
.q-meta { color: var(--gray); }

/* ─────────── application funnel ─────────── */

.apply-shell {
  border: 2.5px solid var(--ink);
  border-radius: 16px;
  background: var(--panel);
  color: var(--on-panel);
  padding: clamp(1.6rem, 4.5vw, 3.4rem);
  box-shadow: 16px 16px 0 -1px var(--brand), 16px 16px 0 2px var(--ink);
  max-width: 1000px;
  margin: 0 auto;
}

.apply-head { max-width: 46ch; }
.apply-title {
  font-family: var(--font-d);
  font-variation-settings: "wdth" 110, "wght" 800;
  font-size: clamp(2.3rem, 6vw, 4.4rem);
  line-height: .92;
  letter-spacing: -.02em;
  text-transform: uppercase;
  margin: .6rem 0 .9rem;
}
.apply-lede { color: rgba(255,255,255,.6); font-size: 1rem; }

.fun { margin-top: clamp(2rem, 4vw, 3rem); }

.fun-rail { height: 4px; background: rgba(255,255,255,.16); border-radius: 999px; overflow: hidden; }
.fun-rail-fill { display: block; height: 100%; width: 20%; background: var(--on-panel); border-radius: 999px; transition: width .5s var(--ease); }
.fun-count { color: rgba(255,255,255,.5); margin: .9rem 0 1.6rem; }

.q { border: 0; display: none; }
.q.is-on { display: block; animation: qin .45s var(--ease); }
@keyframes qin { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.q-title {
  font-family: var(--font-d);
  font-variation-settings: "wdth" 98, "wght" 700;
  font-size: clamp(1.4rem, 3vw, 2.1rem);
  line-height: 1.08;
  text-transform: uppercase;
  letter-spacing: -.01em;
  margin-bottom: 1.2rem;
}
.q-sub { color: rgba(255,255,255,.55); font-size: .93rem; margin: -.6rem 0 1.4rem; max-width: 52ch; }

.opts { display: grid; gap: .7rem; }
.opts-2 { grid-template-columns: repeat(2, 1fr); }
.opts-3 { grid-template-columns: repeat(3, 1fr); }

.opt { cursor: pointer; }
.opt input { position: absolute; opacity: 0; pointer-events: none; }
.opt-face {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: 1.05rem 1.15rem;
  border: 2px solid rgba(255,255,255,.28);
  border-radius: 8px;
  font-weight: 600;
  font-size: .96rem;
  transition: border-color .2s, background .2s, color .2s, transform .25s var(--ease);
}
.opt-face b {
  display: grid;
  place-items: center;
  width: 24px; height: 24px;
  border: 1.5px solid currentColor;
  border-radius: 5px;
  font-size: .62rem;
  opacity: .7;
  flex: none;
}
.opt:hover .opt-face { border-color: var(--on-panel); transform: translateY(-2px); }
.opt input:checked + .opt-face { background: var(--on-panel); border-color: var(--on-panel); color: var(--panel); }
.opt input:focus-visible + .opt-face { outline: 3px solid var(--on-panel); outline-offset: 2px; }

.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.f { display: flex; flex-direction: column; gap: .45rem; }
.f-wide { grid-column: 1 / -1; }
.f-label { color: rgba(255,255,255,.55); }
.f input {
  font-family: var(--font-b);
  font-size: 1rem;
  color: var(--on-panel);
  background: rgba(255,255,255,.06);
  border: 2px solid rgba(255,255,255,.28);
  border-radius: 8px;
  padding: .95rem 1.05rem;
  transition: border-color .2s, background .2s;
}
.f input::placeholder { color: rgba(255,255,255,.32); }
.f input:focus { outline: none; border-color: var(--brand); background: rgba(255,255,255,.1); }
.f-hint { font-size: .78rem; color: rgba(255,255,255,.58); }

.fun-nav { display: flex; align-items: center; gap: 1rem; margin-top: 2rem; }
.fun-nav[hidden] { display: none; }
.fun-next { margin-left: auto; }
.fun-back { color: rgba(255,255,255,.7); }
.fun-back:hover { border-color: rgba(255,255,255,.5); color: var(--on-panel); }

.fun-err { margin-top: 1rem; font-size: .88rem; font-weight: 600; color: var(--accent-onink); }

.fun-privacy {
  margin-top: 1.1rem;
  font-size: .78rem;
  color: rgba(255,255,255,.5);
  max-width: 52ch;
}


.fun-done { text-align: center; padding: 1.5rem 0; }
.done-mark { width: 64px; height: 64px; margin: 0 auto 1.2rem; color: var(--on-panel); }
.done-mark svg { width: 100%; height: 100%; }
.done-title {
  font-family: var(--font-d);
  font-variation-settings: "wdth" 106, "wght" 800;
  font-size: clamp(1.9rem, 4vw, 2.8rem);
  text-transform: uppercase;
  line-height: 1;
}
.done-copy { margin: .8rem auto 0; max-width: 44ch; color: rgba(255,255,255,.62); }

/* ─────────── faq ─────────── */

.faqs { border-top: 2px solid var(--hair); max-width: 900px; }

.faq-item { border-bottom: 2px solid var(--hair); }

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.4rem 0;
  cursor: pointer;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary h3 {
  font-family: var(--font-b);
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  font-weight: 600;
  letter-spacing: -.005em;
}

.faq-mark {
  position: relative;
  width: 16px;
  height: 16px;
  flex: none;
}
.faq-mark::before, .faq-mark::after {
  content: "";
  position: absolute;
  background: var(--ink);
  transition: transform .3s var(--ease);
}
.faq-mark::before { top: 7px; left: 0; width: 16px; height: 2px; }
.faq-mark::after  { left: 7px; top: 0; width: 2px; height: 16px; }
.faq-item[open] .faq-mark::after { transform: scaleY(0); }
.faq-item[open] .faq-mark::before { background: var(--ink); }

.faq-item > p {
  padding: 0 0 1.5rem;
  max-width: 62ch;
  color: var(--gray);
  font-size: .98rem;
}

/* ─────────── direct contact ─────────── */

.direct {
  position: relative;
  z-index: 2;
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: clamp(1.6rem, 3vw, 2.2rem);
  border-top: 2px solid rgba(255,255,255,.14);
}

.direct-label { color: rgba(255,255,255,.58); margin-bottom: 1rem; }

.direct-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; }

.direct-link {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "icon what" "icon detail";
  column-gap: .85rem;
  align-items: center;
  padding: 1rem 1.15rem;
  border: 2px solid rgba(255,255,255,.2);
  border-radius: 10px;
  transition: border-color .25s, background .25s, transform .3s var(--ease);
}
.direct-link:hover {
  border-color: var(--on-panel);
  background: rgba(255,255,255,.07);
  transform: translateY(-2px);
}
.direct-link .ico { grid-area: icon; width: 22px; height: 22px; color: var(--on-panel); }
.direct-what {
  grid-area: what;
  font-size: .82rem;
  font-weight: 600;
  color: var(--on-panel);
}
.direct-detail {
  grid-area: detail;
  font-family: var(--font-m);
  font-size: .74rem;
  color: rgba(255,255,255,.5);
}

/* ─────────── footer ─────────── */

/* the old hero line, kept as the sign-off */
.foot-motto {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(3rem, 7vw, 6rem) 0 clamp(.5rem, 2vw, 1.5rem);
}
.foot-motto .hl { margin-left: .2em; }

.footer {
  border-top: 2.5px solid var(--ink);
  margin-top: clamp(3rem, 7vw, 6rem);
  padding: 0 var(--pad);
}

.foot-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(2.8rem, 6vw, 4.5rem) 0;
}

.foot-cta-line {
  font-family: var(--font-d);
  font-variation-settings: "wdth" 104, "wght" 700;
  font-size: clamp(1.8rem, 4.5vw, 3.2rem);
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: -.015em;
}

.foot-cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.3fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(2.2rem, 4vw, 3.2rem) 0;
  border-top: 1px solid var(--hair);
}

.foot-col { display: flex; flex-direction: column; align-items: flex-start; gap: .55rem; }

.foot-h {
  font-family: var(--font-m);
  font-size: .66rem;
  font-weight: 400;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gray);
  margin-bottom: .35rem;
}

.foot-col a {
  font-size: .88rem;
  font-weight: 500;
  color: var(--ink);
  transition: color .2s;
}
.foot-col a:hover { text-decoration: underline; text-underline-offset: 3px; }

.foot-sign { gap: .9rem; }
.foot-logo { display: inline-flex; align-items: center; gap: .5rem; }
.foot-logo .logo-mark { color: var(--ink); }
.foot-note { font-size: .88rem; color: var(--gray); max-width: 30ch; }

.foot-base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .8rem 2rem;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 1.4rem 0 1.8rem;
  border-top: 1px solid var(--hair);
  color: var(--gray);
}

/* ─────────── sticky dock ─────────── */

.dock[hidden] { display: none; }
.dock {
  position: fixed;
  bottom: 1.1rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 55;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .95rem 1.6rem;
  background: var(--panel);
  color: var(--on-panel);
  border: 2.5px solid var(--ink);
  border-radius: 999px;
  font-size: .84rem;
  font-weight: 600;
  box-shadow: 0 6px 0 -1px var(--brand), 0 6px 0 1px var(--ink);
  animation: dockin .45s var(--ease);
}
.dock:hover { background: var(--on-panel); color: var(--panel); }
@keyframes dockin { from { opacity: 0; transform: translate(-50%, 20px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* ─────────── floating WhatsApp ─────────── */

.wa-float {
  position: fixed;
  right: clamp(1rem, 2.4vw, 1.6rem);
  bottom: 1.1rem;
  z-index: 56;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--panel);
  color: var(--on-panel);
  border: 2.5px solid var(--ink);
  box-shadow: 0 6px 0 -1px var(--brand), 0 6px 0 1px var(--ink);
  transition: transform .3s var(--ease), background .25s, color .25s;
}
.wa-float .ico { width: 27px; height: 27px; }
.wa-float.is-away { opacity: 0; pointer-events: none; transform: translateY(24px); transition: opacity .25s, transform .3s var(--ease); }
.wa-float:hover { transform: translateY(-3px); background: #25d366; color: #fff; }
.wa-float-tip {
  position: absolute;
  right: calc(100% + .7rem);
  white-space: nowrap;
  padding: .45rem .8rem;
  border-radius: 999px;
  background: var(--panel);
  color: var(--on-panel);
  border: 2px solid var(--ink);
  font-size: .76rem;
  font-weight: 600;
  opacity: 0;
  transform: translateX(6px);
  pointer-events: none;
  transition: opacity .2s, transform .3s var(--ease);
}
.wa-float:hover .wa-float-tip,
.wa-float:focus-visible .wa-float-tip { opacity: 1; transform: none; }

.done-wa { margin-top: 1.4rem; display: inline-flex; gap: .6rem; }
.done-wa .ico { width: 20px; height: 20px; }

/* ─────────── reveal ───────────
   Content is visible by default and only animates where the browser
   supports scroll-driven animation. Nothing here can leave a section
   stuck invisible, and it needs no JavaScript. */

@keyframes rise {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .reveal {
      animation: rise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 55%;
    }
  }
}

/* ─────────── responsive ─────────── */

@media (max-width: 1080px) {
  .hero-inner {
    grid-template-columns: 1fr;
    grid-template-areas: "micro" "title" "body" "photo";
  }
  .hero-photo { margin-top: 2.8rem; margin-right: 0; max-width: 400px; }
  .phases, .quotes { grid-template-columns: 1fr; }
  .quotes { max-width: 620px; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .foot-cols { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
  .nav-links, .nav-cta { display: none; }
  .nav-burger { display: flex; }
  .opts-2, .opts-3 { grid-template-columns: 1fr; }
  .fields { grid-template-columns: 1fr; }
  .apply-shell { box-shadow: 8px 8px 0 -1px var(--brand), 8px 8px 0 2px var(--ink); }
  .direct-row { grid-template-columns: 1fr; }
  .dock { font-size: .78rem; padding: .85rem 1.3rem; }
  .wa-float { width: 52px; height: 52px; }
  .wa-float .ico { width: 24px; height: 24px; }
}

/* phone footer: one CTA, Site and Contact side by side, logo sign-off */
@media (max-width: 760px) {
  .foot-motto { padding-top: 2.4rem; }
  .foot-cta { padding: 1.6rem 0 1.8rem; gap: 1rem; }
  .foot-cta-line { font-size: 1.5rem; }
  .foot-cta .btn { width: 100%; justify-content: center; }
  .foot-cols { grid-template-columns: auto minmax(0, 1fr); gap: 1.6rem clamp(1.4rem, 8vw, 3rem); padding: 1.6rem 0; }
  .foot-train { display: none; }
  .foot-site a[href="#apply"] { display: none; }  /* the CTA button sits right above */
  .foot-col { gap: .5rem; }
  .foot-col a { font-size: .92rem; padding: .15rem 0; overflow-wrap: anywhere; }
  .foot-sign { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; gap: 1rem;
               padding-top: 1.4rem; border-top: 1px solid var(--hair); }
  .foot-sign .foot-logo { padding: 0; }
  .foot-sign .nav-word { font-size: 1rem; }
  .foot-note { font-size: .78rem; max-width: 19ch; text-align: right; }
  .foot-base { flex-direction: column; gap: .3rem; padding: 1.1rem 0 calc(1.8rem + env(safe-area-inset-bottom)); }
  .foot-base p { font-size: .66rem; }
}
@media (max-width: 360px) {
  .foot-col a { font-size: .84rem; }
  .foot-sign { flex-direction: column; align-items: flex-start; gap: .6rem; }
  .foot-note { text-align: left; max-width: 30ch; }
}

/* ─────────── reduced motion ─────────── */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-huge .fl { transition: none; font-variation-settings: "wdth" 118, "wght" 900; }
  .hm-word { transition: none; }
  .blob { animation: none; }
  .flowfield { opacity: .35; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ─────────── appearance toggle ─────────── */

.mode {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1.5px solid rgba(255,255,255,.28);
  border-radius: 999px;
  background: none;
  color: var(--on-panel);
  cursor: pointer;
  flex: none;
  transition: border-color .2s, background .2s;
}
.mode:hover { border-color: var(--on-panel); background: rgba(255,255,255,.08); }
.mode svg { width: 17px; height: 17px; }

/* show whichever icon describes the mode you would switch TO */
.mode-moon { display: block; }
.mode-sun  { display: none; }
:root[data-mode="dark"] .mode-moon { display: none; }
:root[data-mode="dark"] .mode-sun  { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-mode="light"]) .mode-moon { display: none; }
  :root:not([data-mode="light"]) .mode-sun  { display: block; }
}

/* the halftone dots read as light specks once the page goes dark */
:root[data-mode="dark"] .frame-volt::after { opacity: .35; }
@media (prefers-color-scheme: dark) {
  :root:not([data-mode="light"]) .frame-volt::after { opacity: .35; }
}

/* the philosophy panel sits on a near-black card in dark mode, so outline it */
:root[data-mode="dark"] @media (prefers-color-scheme: dark) {
  :root:not([data-mode="light"]) }

/* ══════════ rolling button labels ══════════ */
.roll {
  display: inline-block;
  overflow: hidden;
  height: 1.2em;
  line-height: 1.2;
  margin: -.1em 0;
  vertical-align: top;
}
.roll > span { display: block; transition: transform .45s var(--ease); }
.roll > span > span { display: block; }
.btn:hover .roll > span,
.btn:focus-visible .roll > span { transform: translateY(-50%); }

/* ══════════ hero label: Vienna clock ══════════ */
.hero-clock {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  margin-left: .35em;
  padding-left: .8em;
  border-left: 1.5px solid currentColor;
  font-variant-numeric: tabular-nums;
}
.hero-clock:has(time:empty) { display: none; }

/* ══════════ load gauge (homepage) ══════════
   Scroll progress read as a lift. A barbell climbs the track and plates
   load onto both sleeves, heaviest first: 20 kg empty, 200 kg at the
   footer. Difference blending keeps it legible on paper and panel. */
.gauge {
  position: fixed;
  right: clamp(.6rem, 1.2vw, 1.1rem);
  top: 50%;
  z-index: 40;
  transform: translateY(-50%);
  display: grid;
  justify-items: center;
  gap: .9rem;
  color: #fff;
  mix-blend-mode: difference;
  pointer-events: none;
  font-family: var(--font-m);
  font-size: .62rem;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.gauge-h { writing-mode: vertical-rl; transform: rotate(180deg); }
.gauge-track {
  position: relative;
  width: 84px;
  height: min(38vh, 320px);
  background:
    repeating-linear-gradient(to top, currentColor 0 1.5px, transparent 1.5px 16.6667%) center / 9px 100% no-repeat;
}
.gauge-track::before {
  content: "";
  position: absolute;
  left: 50%; top: 0; bottom: 0;
  width: 1.5px;
  transform: translateX(-50%);
  background: currentColor;
  opacity: .4;
}
.gauge-fill {
  position: absolute;
  left: 50%; bottom: 0;
  width: 3px;
  height: 100%;
  transform-origin: 50% 100%;
  transform: translateX(-50%) scaleY(var(--p, 0));
  background: currentColor;
}
/* the barbell: sleeve, plates, bar, plates, sleeve */
.gauge-bell {
  position: absolute;
  left: 50%;
  bottom: calc(var(--p, 0) * 100%);
  transform: translate(-50%, 50%);
  display: flex;
  align-items: center;
}
.bell-bar { width: 18px; height: 3px; background: currentColor; box-shadow: -2px 0 0 1px currentColor, 2px 0 0 1px currentColor; }
.bell-side {
  display: flex;
  align-items: center;
  gap: 1.5px;
  width: 33px;
  height: 30px;
  background: linear-gradient(currentColor, currentColor) center / 100% 3px no-repeat;
}
.bell-l { flex-direction: row-reverse; }
.bell-side i {
  flex: none;
  width: 4px;
  height: var(--h);
  border-radius: 1.5px;
  background: currentColor;
  transform: scaleY(0);
  opacity: 0;
  transition: transform .4s cubic-bezier(.3, 1.5, .5, 1), opacity .2s;
}
.bell-side i.on { transform: scaleY(1); opacity: 1; }
.gauge-read { display: grid; justify-items: center; gap: .1rem; }
.gauge-kg {
  font-family: var(--font-d);
  font-variation-settings: "wdth" 125, "wght" 900;
  font-size: 1.15rem;
  letter-spacing: -.01em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 900px) { .gauge { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .roll > span, .bell-side i { transition: none; }
}