/* =========================================================
   TGA Craftworks — stylesheet
   ========================================================= */
:root {
  --bg: #0f0e0d;          /* page */
  --surface: #1a1816;     /* raised panels */
  --ink: #ece5d8;         /* primary text */
  --on-ink: #0f0e0d;      /* text on light (bone) cards */
  --muted: rgba(236, 229, 216, 0.62);
  --line: rgba(236, 229, 216, 0.16);
  --line-strong: rgba(236, 229, 216, 0.3);
  --white: #fff;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --pad: 1.5rem;
  --sans: "Familjen Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "Instrument Serif", Georgia, serif;
}
@media (min-width: 768px) { :root { --pad: 2.5rem; } }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; color-scheme: dark; background: var(--bg); }
::selection { background: var(--ink); color: var(--on-ink); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; }
main { overflow-x: clip; }
.serif { font-family: var(--serif); font-weight: 400; }
.eyebrow { font-size: 10px; text-transform: uppercase; letter-spacing: 0.2em; }
@media (min-width: 1024px) { .eyebrow { font-size: 11px; } }
.dim { opacity: 0.45; }

/* text-mask used for line reveals */
.mask { display: block; overflow: hidden; padding: 0.06em 0 0.18em; margin: -0.06em 0 -0.18em; }

/* split helpers (generated by JS) */
.split-line { display: block; overflow: hidden; padding-bottom: 0.12em; margin-bottom: -0.12em; }
.split-line > span { display: inline-block; }
.split-char { display: inline-block; }
.split-wrap { display: inline-block; overflow: hidden; vertical-align: bottom; }

/* hover text roll */
.hr { position: relative; display: inline-block; overflow: hidden; vertical-align: bottom; }
.hr__a, .hr__b { display: block; transition: transform 0.55s var(--ease); }
.hr__b { position: absolute; left: 0; top: 0; transform: translateY(105%); }
a:hover .hr__a, button:hover .hr__a, [data-hover-reveal]:hover .hr__a { transform: translateY(-105%); }
a:hover .hr__b, button:hover .hr__b, [data-hover-reveal]:hover .hr__b { transform: translateY(0); }

/* =========================================================
   NAV
   ========================================================= */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Brand: its own fixed layer so it can invert against light imagery */
/* Brand: TGA logo on the same frosted capsule as the menu button,
   so it reads clearly over any photo, video or section */
.nav__brand {
  --h: 2.75rem;
  position: fixed; z-index: 100; top: 0.75rem; left: calc(var(--pad) - 0.35rem);
  display: flex; align-items: center; gap: 0.55rem;
  height: var(--h); padding: 0 1.05rem 0 0.4rem; border-radius: 999px;
  background: rgba(22, 20, 18, 0.55); border: 1px solid rgba(236, 229, 216, 0.18);
  -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
  transition: border-color 0.4s var(--ease), background-color 0.4s var(--ease);
}
.nav__brand:hover { border-color: rgba(236, 229, 216, 0.4); background: rgba(22, 20, 18, 0.7); }
.nav__brand:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.nav__brand img { display: block; height: auto; }
.nav__brand-emblem { width: calc(var(--h) - 0.8rem); }
.nav__brand-word { width: 4.4rem; }
@media (min-width: 768px) {
  .nav__brand { --h: 3rem; gap: 0.65rem; padding-right: 1.25rem; }
  .nav__brand-word { width: 5.1rem; }
}

/* Menu button: frosted capsule + round icon disc */
.nav { position: fixed; z-index: 101; top: 0.75rem; right: calc(var(--pad) - 0.35rem); }
.nav__toggle {
  --h: 2.75rem;
  position: relative; display: flex; align-items: center; gap: 0.85rem;
  height: var(--h); padding: 0 0.3rem 0 1.15rem; border-radius: 999px;
  color: var(--ink); background: rgba(22, 20, 18, 0.55);
  border: 1px solid rgba(236, 229, 216, 0.18);
  -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
  font-size: 0.75rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.16em; line-height: 1;
  transition: border-color 0.4s var(--ease), background-color 0.4s var(--ease);
  will-change: transform;
}
@media (min-width: 768px) { .nav__toggle { --h: 3rem; padding-left: 1.35rem; } }
.nav__toggle:hover { border-color: rgba(236, 229, 216, 0.4); background: rgba(22, 20, 18, 0.7); }
.nav__toggle:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.nav__word { display: block; height: 1.15em; overflow: hidden; }
.nav__word span { display: block; height: 1.15em; line-height: 1.15em; transition: transform 0.7s var(--ease); }
.nav.is-open .nav__word span { transform: translateY(-100%); }

.nav__icon {
  position: relative; flex: none; width: calc(var(--h) - 0.6rem); height: calc(var(--h) - 0.6rem);
  border-radius: 50%; background: var(--ink); color: var(--on-ink);
  transition: transform 0.6s var(--ease);
}
.nav__icon i {
  position: absolute; left: 50%; top: 50%; height: 1.5px; border-radius: 2px; background: currentColor;
  transition: transform 0.6s var(--ease), width 0.6s var(--ease);
}
.nav__icon i:nth-child(1) { width: 14px; transform: translate(-50%, calc(-50% - 3px)); }
.nav__icon i:nth-child(2) { width: 8px; transform: translate(calc(-50% - 3px), calc(-50% + 3px)); }
.nav__toggle:hover .nav__icon { transform: scale(1.08); }
.nav__toggle:hover .nav__icon i:nth-child(2) { width: 14px; transform: translate(-50%, calc(-50% + 3px)); }
.nav.is-open .nav__icon { transform: rotate(90deg); }
.nav.is-open .nav__icon i:nth-child(1) { width: 15px; transform: translate(-50%, -50%) rotate(45deg); }
.nav.is-open .nav__icon i:nth-child(2) { width: 15px; transform: translate(-50%, -50%) rotate(-45deg); }
@media (prefers-reduced-motion: reduce) { .nav__toggle { will-change: auto; } }

/* ---------- Full-screen menu ---------- */
.menu {
  position: fixed; inset: 0; z-index: 90; background: var(--bg); color: var(--ink);
  visibility: hidden; clip-path: inset(0 0 100% 0);
}
.menu.is-open { visibility: visible; }
.menu__inner {
  height: 100%; display: grid; gap: 2rem;
  grid-template-columns: 1fr; grid-template-rows: 1fr auto;
  padding: 5.5rem var(--pad) 1.5rem;
}
@media (min-width: 1024px) {
  .menu__inner { grid-template-columns: 1.35fr 1fr; column-gap: 4vw; padding: 6rem 2.5rem 2rem; }
}
.menu__list { align-self: center; counter-reset: none; }
.menu__list a { position: relative; display: flex; align-items: flex-start; gap: 1rem; padding: 0.15em 0; transition: opacity 0.4s var(--ease); }
.menu__num { flex: 0 0 2.2rem; padding-top: 0.55em; font-size: 0.7rem; letter-spacing: 0.12em; font-variant-numeric: tabular-nums; color: var(--muted); }
.menu__mask { display: block; overflow: hidden; padding: 0.04em 0.1em 0.2em 0; margin: -0.04em 0 -0.2em; }
.menu__label {
  display: block; font-weight: 500; letter-spacing: -0.05em; line-height: 0.95;
  font-size: min(8.6vh, 11vw); transition: transform 0.6s var(--ease), color 0.4s;
}
@media (min-width: 1024px) { .menu__label { font-size: min(9.4vh, 6.4vw); } }
.menu__list:hover a { opacity: 0.28; }
.menu__list a:hover, .menu__list a:focus-visible { opacity: 1; }
.menu__list a:hover .menu__label, .menu__list a:focus-visible .menu__label { transform: translateX(0.18em); }
.menu__list a:focus-visible { outline: none; }
.menu__list a[aria-current="page"] .menu__label { font-family: var(--serif); font-weight: 400; letter-spacing: -0.02em; }
.menu__list a[aria-current="page"] .menu__label::after {
  content: ""; display: inline-block; width: 0.16em; height: 0.16em; margin-left: 0.18em; border-radius: 50%;
  background: currentColor; vertical-align: 0.12em;
}

.menu__media { display: none; position: relative; align-self: center; aspect-ratio: 4 / 3.2; border-radius: 24px; overflow: hidden; background: var(--surface); }
@media (min-width: 1024px) { .menu__media { display: block; } }
.menu__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.08); transition: opacity 0.7s var(--ease), transform 1.2s var(--ease); }
.menu__media img.is-active { opacity: 1; transform: scale(1); }
.menu__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.45), transparent 45%); }
.menu__caption { position: absolute; left: 1.25rem; bottom: 1.1rem; z-index: 1; color: #fff; font-size: 10px; text-transform: uppercase; letter-spacing: 0.2em; }

.menu__foot {
  grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem 1.5rem; align-items: end;
  padding-top: 1.25rem; border-top: 1px solid var(--line); font-size: 0.8125rem; line-height: 1.4;
}
@media (min-width: 1024px) { .menu__foot { grid-template-columns: 1.2fr 1fr 0.8fr auto; font-size: 0.9375rem; } }
.menu__col { display: flex; flex-direction: column; gap: 0.3rem; }
.menu__col:first-child { grid-column: 1 / -1; }
@media (min-width: 1024px) { .menu__col:first-child { grid-column: auto; } }
.menu__col a { width: fit-content; transition: opacity 0.3s; }
.menu__col a:hover { opacity: 0.6; }
.menu__k { margin-bottom: 0.25rem; font-size: 10px; text-transform: uppercase; letter-spacing: 0.18em; color: var(--muted); }
.menu__cta { grid-column: 1 / -1; justify-self: start; border-color: var(--line-strong); }
@media (min-width: 1024px) { .menu__cta { grid-column: auto; justify-self: end; } }
@media (max-height: 560px) { .menu__foot { display: none; } }

/* =========================================================
   HERO
   ========================================================= */
.hero {
  position: sticky; top: 0; z-index: 0;
  height: 100svh; min-height: 100svh; width: 100%;
  overflow: hidden; background: #000; color: #fff; user-select: none;
}
@media (min-width: 1024px) { .hero { height: 100vh; } }
.hero__media { position: absolute; inset: 0; pointer-events: none; }
.hero__img { width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 60%; }
.hero__video { display: block; background: #000; }
.hero__shade { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.38); }
.hero__content { position: absolute; inset: 0; z-index: 10; }
.hero__head { position: absolute; left: var(--pad); top: 16%; }
@media (min-width: 1024px) { .hero__head { top: 9%; } }
.hero__title {
  font-size: clamp(2.75rem, 12vw, 4.5rem); line-height: 0.94; color: #fff;
}
@media (min-width: 768px) { .hero__title { font-size: 5rem; } }
@media (min-width: 1024px) { .hero__title { font-size: 5.64rem; } }
.hero__actions { margin-top: 1rem; display: flex; flex-direction: column; }
@media (min-width: 640px) { .hero__actions { flex-direction: row; flex-wrap: wrap; gap: 1.25rem; } }
.link-arrow { display: flex; align-items: center; gap: 0.75rem; padding: 0.375rem 0; font-size: 0.875rem; text-transform: uppercase; }
@media (min-width: 768px) { .link-arrow { font-size: 1rem; } }
@media (min-width: 1024px) { .link-arrow { font-size: 1.125rem; padding: 0; } }
.link-arrow .u { border-bottom: 1px solid currentColor; }
.link-arrow .arr { display: inline-block; transition: transform 0.3s; }
.link-arrow:hover .arr { transform: translateX(4px); }

.hero__meta {
  position: absolute; left: 0; right: 0; bottom: 13%;
  padding: 0 var(--pad);
  display: grid; grid-template-columns: 1fr 1fr; gap: 0.25rem 1.5rem;
  pointer-events: none;
}
@media (min-width: 768px) { .hero__meta { display: flex; justify-content: space-between; align-items: flex-end; } }
@media (min-width: 1024px) { .hero__meta { top: 0; bottom: 0; align-items: center; } }
.hero__meta p { font-size: 11px; text-transform: uppercase; letter-spacing: 0.18em; }
@media (min-width: 768px) { .hero__meta p { font-size: 0.875rem; } }
@media (min-width: 1024px) { .hero__meta p { font-size: 1.125rem; } }
.hero__bottom { position: absolute; bottom: 1.5rem; width: 100%; padding: 0 var(--pad); text-align: center; }
@media (min-width: 768px) { .hero__bottom { bottom: 1.75rem; } }
.hero__bottom p { font-size: 0.875rem; line-height: 1.2; }
@media (min-width: 768px) { .hero__bottom p { font-size: 1rem; } }
@media (min-width: 1024px) { .hero__bottom p { font-size: 1.125rem; } }

/* =========================================================
   MIST + WASH (shared transitions)
   ========================================================= */
.mist { pointer-events: none; position: absolute; left: 0; top: -42vh; z-index: 30; width: 100%; height: 112vh; }
@media (min-width: 768px) { .mist { top: -52vh; } }
.mist img { position: absolute; left: 0; width: 100%; max-width: none; height: auto; opacity: 0; will-change: transform, opacity; }
.mist__a { top: 25%; }
.mist__b { top: 20%; }
@media (min-width: 1024px) { .mist__a { top: 0; } .mist__b { top: 8%; } }
/* Colour wash that fades the previous section into this one. It only needs to
   span the seam (40vh above to 60vh below the section top); a plain gradient is
   far cheaper to composite than a CSS mask over a tall layer. */
.wash {
  --wc: 15, 14, 13;
  pointer-events: none; position: absolute; left: 0; right: 0; top: -40vh; height: 100vh; z-index: 35;
  opacity: 0; will-change: opacity;
  background: linear-gradient(to bottom, rgba(var(--wc), 0) 0%, rgba(var(--wc), 0.25) 15%, rgba(var(--wc), 0.6) 30%, rgba(var(--wc), 0.9) 42%, rgb(var(--wc)) 50%);
}
.wash--white { --wc: 26, 24, 22; }

/* =========================================================
   ABOUT
   ========================================================= */
.about { position: relative; z-index: 20; overflow-x: clip; background: var(--bg); color: var(--ink); }
.about__stage { position: relative; z-index: 40; height: 100svh; width: 100%; overflow: hidden; }
@media (min-width: 1024px) { .about__stage { height: 100vh; } }
.about__slot-center { position: absolute; visibility: hidden; pointer-events: none; left: 4%; top: 18%; width: 92%; height: 56%; }
@media (min-width: 768px) { .about__slot-center { left: 5%; top: 14%; width: 90%; height: 68%; } }
@media (min-width: 1024px) { .about__slot-center { left: 10%; top: 11%; width: 80%; height: 78%; } }
.about__gallery { position: absolute; inset: 0; }
.about__phrase {
  position: absolute; left: 0; right: 0; top: 12%; padding: 0 var(--pad);
  text-align: center; font-size: 1.875rem; line-height: 1.15;
}
@media (min-width: 1024px) {
  .about__phrase { left: 50%; right: auto; top: 50%; width: 22%; padding: 0; font-size: 3.5vw; line-height: 1.05; transform: translate(-50%, -50%); }
}
.tile {
  position: absolute; display: none; overflow: hidden; border-radius: 0.75rem;
  left: var(--l); top: var(--t); width: var(--w); height: var(--h); rotate: var(--r);
}
/* Own GPU layer: tiles move/fade while scrubbing; without this Chrome re-rasterises
   six rotated photos every frame. */
.tile { will-change: transform, opacity; backface-visibility: hidden; }
.tile img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 1024px) { .tile { display: block; } }

.about__text { position: absolute; inset: 0; display: flex; align-items: center; padding: 0 var(--pad); opacity: 0; }
.grid12 { display: grid; width: 100%; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1rem; }
@media (min-width: 1024px) { .grid12 { gap: 1.5rem; } }
.about__label { grid-column: span 12; }
.about__body { grid-column: span 12; }
@media (min-width: 1024px) { .about__label { grid-column: span 2; } .about__body { grid-column: span 10; } }
.about__para {
  font-size: clamp(1.75rem, 7vw, 2.5rem); line-height: 1.05; letter-spacing: -0.045em;
}
@media (min-width: 1024px) { .about__para { font-size: 5.2vw; line-height: 0.86; } }
.about__slot-inline { display: inline-block; width: 1.7em; height: 0.82em; margin: 0 0.18em 0.14em 0; vertical-align: bottom; }
.about__word-wrap { display: inline-block; overflow: hidden; vertical-align: bottom; padding: 0.12em 0 0.24em; margin: -0.12em 0 -0.24em; }
.about__word { display: inline-block; }
.about__rule { margin-top: 1rem; height: 1px; width: 100%; background: var(--ink); transform-origin: left; }
@media (min-width: 1024px) { .about__rule { margin-top: 1.5rem; } }
.about__copy { margin-top: 1rem; max-width: 350px; font-size: 0.875rem; line-height: 1.35; letter-spacing: -0.01em; opacity: 0; }
@media (min-width: 1024px) { .about__copy { margin-top: 1.5rem; font-size: 1.125rem; } }

.about__box { position: absolute; left: 0; top: 0; z-index: 50; overflow: hidden; border-radius: 0.75rem; opacity: 0; }
/* Inactive slides are visibility:hidden (not just transparent) so the GPU
   doesn't composite seven stacked full-size photos. */
.about__slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; visibility: hidden; transition: opacity 0.6s ease, visibility 0s linear 0.6s; }
.about__slide.is-active { opacity: 1; visibility: visible; transition: opacity 0.6s ease, visibility 0s; }
.about__arrows { position: absolute; bottom: 1rem; left: 50%; z-index: 10; display: flex; gap: 0.75rem; transform: translateX(-50%); }
.round-btn {
  display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 50%;
  background: var(--bg); color: var(--ink); transition: transform 0.3s;
}
.round-btn:hover { transform: scale(1.06); }
@media (min-width: 1024px) { .round-btn { width: 3.25rem; height: 3.25rem; } .about__arrows { bottom: 1.75rem; gap: 1rem; } }

/* =========================================================
   MARQUEE → FULLSCREEN SYSTEMS
   ========================================================= */
.mq { position: relative; z-index: 20; background: var(--bg); color: var(--ink); }
.mq__stage { position: relative; height: 100vh; width: 100%; overflow: hidden; background: var(--bg); }
.mq__marquee { pointer-events: none; position: absolute; inset: 0; z-index: 10; display: flex; align-items: center; overflow: hidden; }
.mq__track {
  display: flex; white-space: nowrap; will-change: transform;
  font-size: clamp(2.5rem, 10vw, 8rem); font-weight: 500; line-height: 1; letter-spacing: -0.07em;
}
@media (min-width: 1024px) { .mq__track { font-size: clamp(3.5rem, 7.5vw, 8rem); } }
.mq__track span { padding-right: 0.35em; }
.mq__card { position: absolute; inset: 0; z-index: 40; overflow: hidden; background: #1b1918; will-change: clip-path; }
.mq__layer { position: absolute; inset: 0; opacity: 0; transition: opacity 0.9s var(--ease); }
.mq__layer.is-active { opacity: 1; }
.mq__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mq__prompt {
  position: absolute; bottom: 2rem; left: 50%; z-index: 45; transform: translateX(-50%);
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.2em; color: var(--muted);
}

.hud { position: absolute; inset: 0; z-index: 50; color: #fff; opacity: 0; pointer-events: none; }
.hud.is-live { pointer-events: auto; }
.hud__rail {
  position: absolute; right: 1rem; top: 38%; transform: translateY(-50%) scale(0.9);
  display: flex; flex-direction: column; align-items: center; gap: 1rem;
}
@media (min-width: 1024px) { .hud__rail { right: 2.5rem; top: 50%; transform: translateY(-50%); } }
.hud__rail-line, .hud__rail-fill { position: absolute; left: 50%; top: 0.625rem; width: 1px; height: calc(100% - 1.25rem); transform: translateX(-50%); background: rgba(255,255,255,.2); }
.hud__rail-fill { background: #fff; box-shadow: 0 0 8px rgba(255,255,255,.45); transform-origin: top; transform: translateX(-50%) scaleY(0); }
.hud__dot { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; width: 1.25rem; height: 1.25rem; }
.hud__dot span { display: block; width: 0.5rem; height: 0.5rem; border-radius: 50%; border: 1px solid rgba(255,255,255,.4); background: transparent; transition: all 0.3s; }
.hud__dot.is-active span { width: 0.875rem; height: 0.875rem; border-color: #fff; background: #fff; box-shadow: 0 0 0 4px rgba(255,255,255,.2); }
.hud__panel {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 5rem var(--pad) 1.5rem;
  background: linear-gradient(to top, rgba(0,0,0,.65), rgba(0,0,0,.25) 55%, transparent);
}
@media (min-width: 1024px) { .hud__panel { padding: 7rem 2.5rem 2rem; } }
.hud__row { display: flex; flex-direction: column; gap: 1rem; }
@media (min-width: 640px) { .hud__row { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 1.5rem; } }
.hud__info { min-width: 0; padding-right: 2.5rem; }
.hud__eyebrow { margin-bottom: 0.75rem; display: flex; align-items: center; gap: 0.5rem; font-size: 10px; text-transform: uppercase; letter-spacing: 0.2em; color: rgba(255,255,255,.7); }
.hud__dash { width: 1.5rem; height: 1px; background: rgba(255,255,255,.6); }
.hud__title { font-weight: 400; font-size: 1.875rem; line-height: 1; letter-spacing: -0.04em; }
@media (min-width: 768px) { .hud__title { font-size: 2.25rem; } }
@media (min-width: 1024px) { .hud__title { font-size: 3.75rem; } }
.hud__sub { margin-top: 0.75rem; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.14em; color: rgba(255,255,255,.75); }
@media (min-width: 768px) { .hud__sub { font-size: 0.875rem; } }
.hud__desc { margin-top: 0.5rem; max-width: 34rem; font-size: 0.8125rem; line-height: 1.45; color: rgba(255,255,255,.85); }
@media (min-width: 1024px) { .hud__desc { font-size: 0.9375rem; } }
.hud__count { flex-shrink: 0; text-align: right; }
.hud__num { font-size: 2.25rem; line-height: 1; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; }
@media (min-width: 768px) { .hud__num { font-size: 3rem; } }
@media (min-width: 1024px) { .hud__num { font-size: 6rem; } }
.hud__of { margin-top: 0.5rem; font-size: 10px; text-transform: uppercase; letter-spacing: 0.2em; color: rgba(255,255,255,.6); }
.hud__progress { position: relative; margin-top: 1.5rem; height: 2px; width: 100%; background: rgba(255,255,255,.25); }
.hud__progress-fill { position: absolute; inset: 0; background: #fff; transform-origin: left; transform: scaleX(0); }
.hud__progress span { position: absolute; top: 50%; width: 1px; height: 0.5rem; transform: translateY(-50%); background: rgba(255,255,255,.5); }
.hud__progress-knob { position: absolute; top: 50%; left: 0; width: 0.625rem; height: 0.625rem; border-radius: 50%; background: #fff; box-shadow: 0 0 10px rgba(255,255,255,.6); transform: translate(-50%, -50%); }

/* =========================================================
   SPLIT SLIDES
   ========================================================= */
.rs { position: relative; z-index: 20; width: 100%; background: var(--bg); color: var(--ink); }
.rs__stage { position: relative; height: 100vh; width: 100%; overflow: hidden; padding: 0.75rem; }
@media (min-width: 768px) { .rs__stage { padding: 1.25rem; } }
@media (min-width: 1024px) { .rs__stage { padding: 2rem; } }
.rs__inner { position: relative; height: 100%; width: 100%; }
.rs__slide { position: absolute; inset: 0; display: grid; grid-template-rows: 1fr 1fr; gap: 12px; pointer-events: none; }
@media (min-width: 1024px) { .rs__slide { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; } }
.rs__slide[data-i="1"] { z-index: 2; }
.rs__text {
  pointer-events: auto; position: relative; display: flex; flex-direction: column; justify-content: space-between;
  overflow: hidden; border-radius: 28px; padding: 1.25rem;
}
@media (min-width: 768px) { .rs__text { border-radius: 36px; padding: 2rem; } }
@media (min-width: 1024px) { .rs__text { padding: 2.5rem; } .rs__slide--right .rs__text { grid-column-start: 2; } }
.rs__text--dark { background: var(--surface); color: var(--ink); }
.rs__text--light { background: var(--ink); color: var(--on-ink); }
.rs__h { font-weight: 400; font-size: clamp(2rem, 8vw, 3.75rem); line-height: 0.95; letter-spacing: -0.04em; }
@media (min-width: 1024px) { .rs__h { font-size: 4.4vw; } }
.rs__line { display: block; }
.rs__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; }
.rs__counter { display: flex; flex-shrink: 0; font-size: 0.875rem; }
.rs__counter span { display: flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: 50%; border: 1px solid currentColor; }
.rs__counter span + span { margin-left: -1px; }
@media (min-width: 768px) { .rs__counter span { width: 3.5rem; height: 3.5rem; } }
.rs__copy { max-width: 22rem; font-size: 0.75rem; line-height: 1.4; letter-spacing: -0.01em; }
@media (min-width: 768px) { .rs__copy { font-size: 1rem; } }
.rs__swiper {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 50; isolation: isolate;
  height: calc(50% - 6px); overflow: hidden; border-radius: 28px;
}
@media (min-width: 768px) { .rs__swiper { border-radius: 36px; } }
@media (min-width: 1024px) { .rs__swiper { top: 0; left: auto; right: 0; height: auto; width: calc(50% - 6px); } }
.rs__item { position: absolute; inset: 0; overflow: hidden; }
.rs__item--2 { z-index: 2; clip-path: inset(100% 0 0 0); }
.rs__img { width: 100%; height: 100%; object-fit: cover; will-change: transform; }

/* =========================================================
   TRANSITION
   ========================================================= */
.tr { position: relative; z-index: 30; height: 160vh; width: 100%; overflow-x: clip; background: var(--surface); color: var(--ink); }
.tr__sticky { position: sticky; top: 0; z-index: 40; display: flex; height: 100vh; align-items: center; justify-content: center; padding: 0 var(--pad); }
.tr__copy { display: flex; flex-direction: column; align-items: center; text-align: center; }
.tr__copy .eyebrow { margin-bottom: 1.25rem; }
.tr__h { max-width: 15ch; font-size: clamp(2.25rem, 9vw, 8rem); line-height: 0.94; }

/* =========================================================
   SERVICES
   ========================================================= */
.ap { position: relative; z-index: 30; width: 100%; background: var(--surface); color: var(--ink); }
.ap__stage { position: relative; height: 100vh; width: 100%; overflow: hidden; background: var(--surface); }
.ap__frame { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; border-radius: 0; }
.ap__img { position: absolute; inset: 0; overflow: hidden; }
.ap__img + .ap__img { clip-path: inset(100% 0 0 0); }
.ap__img img { width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.ap__shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.55), transparent 55%); pointer-events: none; }
.ap__hero { position: absolute; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; flex-direction: column; gap: 1rem; padding: 1.5rem; color: #fff; }
@media (min-width: 768px) { .ap__hero { padding: 2rem; } }
@media (min-width: 1024px) { .ap__hero { padding: 3rem; gap: 1.25rem; } }
.ap__hh { font-weight: 400; font-size: clamp(2.75rem, 12vw, 5.5rem); line-height: 0.92; letter-spacing: -0.05em; }
@media (min-width: 1024px) { .ap__hh { font-size: 7vw; } }
.ap__hp { display: block; }
.ap__texts { position: absolute; left: 6%; right: 6%; top: 56%; bottom: 12%; }
@media (min-width: 1024px) { .ap__texts { left: 74%; right: 3%; top: 18%; bottom: 24%; } }
.ap__text { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 0.75rem; }
@media (min-width: 1024px) { .ap__text { gap: 1.25rem; } }
.ap__h { font-weight: 400; font-size: clamp(1.75rem, 6.5vw, 2.75rem); line-height: 0.98; letter-spacing: -0.04em; }
@media (min-width: 1024px) { .ap__h { font-size: 2.8vw; } }
.ap__p { display: block; }
.ap__copy { max-width: 24rem; font-size: 0.75rem; line-height: 1.5; letter-spacing: -0.01em; }
@media (min-width: 768px) { .ap__copy { font-size: 0.875rem; } }
.ap__tags { font-size: 10px; text-transform: uppercase; line-height: 1.6; letter-spacing: 0.16em; opacity: 0.7; }
.ap__label {
  position: absolute; left: 2.6%; bottom: 3%; z-index: 20; display: none; align-items: center; gap: 1rem;
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.18em; opacity: 0;
}
@media (min-width: 1024px) { .ap__label { display: flex; } }
.ap__counter { display: flex; align-items: center; gap: 0.25rem; font-variant-numeric: tabular-nums; }
.ap__count-win { display: block; height: 1.4em; overflow: hidden; line-height: 1.4em; }
.ap__count-col { display: flex; flex-direction: column; }
.ap__count-col span { display: block; height: 1.4em; line-height: 1.4em; }

/* =========================================================
   STANDARDS
   ========================================================= */
.st { position: relative; z-index: 30; background: var(--bg); color: var(--ink); padding: 8rem var(--pad) 6rem; }
@media (min-width: 1024px) { .st { padding: 12rem 2.5rem 8rem; } }
.st__head { display: flex; flex-direction: column; gap: 1.25rem; margin-bottom: 4rem; }
@media (min-width: 1024px) { .st__head { margin-bottom: 6rem; } }
.st__h { font-size: clamp(2.5rem, 7vw, 6.5rem); line-height: 0.94; }
.st__row {
  position: relative; display: grid; grid-template-columns: 3rem 1fr; gap: 0.5rem 1rem;
  padding: 1.75rem 0; transition: color 0.5s var(--ease);
}
@media (min-width: 1024px) { .st__row { grid-template-columns: 10% 40% 1fr; align-items: center; padding: 2.5rem 0; gap: 1.5rem; } }
.st__row::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--line); transform: scaleX(var(--rule, 0)); transform-origin: left; }
.st__row:last-child::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--line); transform: scaleX(var(--rule, 0)); transform-origin: left; }
.st__row::marker { content: none; }
.st__num { font-size: 0.875rem; font-variant-numeric: tabular-nums; padding-top: 0.6em; }
@media (min-width: 1024px) { .st__num { padding: 0; } }
.st__name { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.st__name .mask:first-child { font-size: clamp(2.25rem, 5.5vw, 5rem); line-height: 0.95; letter-spacing: -0.05em; }
.st__name em { font-family: var(--serif); font-size: clamp(1.25rem, 2vw, 2rem); opacity: 0.55; }
.st__r { display: block; }
.st__copy { grid-column: 2; max-width: 30rem; font-size: 0.875rem; line-height: 1.45; }
@media (min-width: 1024px) { .st__copy { grid-column: auto; font-size: 1rem; } }
.st__row > * { position: relative; z-index: 1; }
@media (hover: hover) {
  .st__row:hover { color: var(--on-ink); }
  .st__row { isolation: isolate; }
  .st__row > .st__fill { position: absolute; inset: 0; z-index: 0; background: var(--ink); border-radius: 14px; transform: scaleY(0); transform-origin: bottom; transition: transform 0.55s var(--ease); }
  .st__row:hover > .st__fill { transform: scaleY(1); }
  .st__row > .st__num { margin-left: 1rem; }
}

/* =========================================================
   PARTNERS
   ========================================================= */
.pt { position: relative; z-index: 30; background: var(--bg); color: var(--ink); padding: 4rem var(--pad) 10rem; }
.pt__head { display: grid; gap: 1.25rem; margin-bottom: 3.5rem; }
@media (min-width: 1024px) { .pt__head { grid-template-columns: 2fr 6fr 4fr; align-items: end; margin-bottom: 5rem; } }
.pt__h { font-weight: 400; font-size: clamp(2.25rem, 5.2vw, 5.5rem); line-height: 0.92; letter-spacing: -0.045em; }
.pt__sub { max-width: 20rem; font-size: 0.875rem; line-height: 1.4; }
@media (min-width: 1024px) { .pt__sub { font-size: 1.125rem; justify-self: end; text-align: right; } }
.pt__grid { display: grid; gap: 1rem; }
@media (min-width: 640px) { .pt__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .pt__grid { grid-template-columns: repeat(4, 1fr); gap: 1.25rem; } }
.pt__card { display: flex; flex-direction: column; gap: 1rem; }
.pt__logo {
  display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3;
  border-radius: 24px; background: var(--ink); overflow: hidden; padding: 12%;
  transition: border-radius 0.6s var(--ease);
}
.pt__logo--dark { background: #000; box-shadow: inset 0 0 0 1px var(--line); }
.pt__logo img { width: 100%; height: auto; object-fit: contain; transition: transform 0.8s var(--ease); }
.pt__card:hover .pt__logo { border-radius: 60px; }
.pt__card:hover .pt__logo img { transform: scale(1.06); }
.pt__card h3 { display: flex; justify-content: space-between; align-items: baseline; font-weight: 500; font-size: 1.25rem; letter-spacing: -0.03em; padding-top: 0.25rem; border-top: 1px solid var(--line); }
.pt__card h3 span { font-size: 10px; text-transform: uppercase; letter-spacing: 0.18em; font-weight: 400; opacity: 0.6; }
.pt__card p { font-size: 0.8125rem; line-height: 1.5; opacity: 0.8; }

/* =========================================================
   ATELIER (tour)
   ========================================================= */
.tour { position: relative; z-index: 30; width: 100%; background: var(--bg); color: #fff; }
.tour__stage { position: relative; height: 100vh; width: 100%; overflow: hidden; background: var(--bg); }
.tour__box { position: absolute; left: 4%; top: 12%; width: 92%; height: 70%; overflow: hidden; border-radius: 28px; }
@media (min-width: 1024px) { .tour__box { left: 19%; top: 14%; width: 62%; height: 72%; } }
.tour__img { width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.tour__shade { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,.45), rgba(0,0,0,.15) 40%, rgba(0,0,0,.6)); }
.tour__ui { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; padding: 4.5rem 1.5rem 1.5rem; }
@media (min-width: 768px) { .tour__ui { padding: 5rem 2.5rem 2.5rem; } }
.tour__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem; }
.tour__p { display: block; }
.tour__keys-wrap { display: none; }
@media (min-width: 1024px) { .tour__keys-wrap { display: block; } }
.tour__keys { display: flex; align-items: center; gap: 1.5rem; font-size: 10px; text-transform: uppercase; letter-spacing: 0.18em; }
.tour__keys li { display: flex; align-items: center; gap: 0.625rem; }
.tour__keys kbd {
  display: inline-flex; align-items: center; justify-content: center; height: 1.75rem; min-width: 1.75rem; padding: 0 0.375rem;
  border: 1px solid rgba(255,255,255,.7); border-radius: 0.375rem; font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: 0;
}
.tour__bottom { display: flex; flex-direction: column; gap: 1.5rem; }
@media (min-width: 1024px) { .tour__bottom { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 2.5rem; } }
.tour__h { font-weight: 400; font-size: clamp(2.75rem, 12vw, 5.5rem); line-height: 0.9; letter-spacing: -0.05em; }
@media (min-width: 1024px) { .tour__h { font-size: 7.5vw; } }
.tour__side { display: flex; max-width: 28rem; flex-direction: column; align-items: flex-start; gap: 1.25rem; font-size: 0.75rem; line-height: 1.5; letter-spacing: -0.01em; }
@media (min-width: 768px) { .tour__side { font-size: 0.875rem; } }
.tour__cta-wrap { position: relative; }
.pill {
  display: inline-block; border-radius: 999px; border: 1px solid rgba(255,255,255,.7); padding: 0.75rem 1.5rem;
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.18em; transition: background-color 0.3s, color 0.3s;
}
.pill:hover { background: #fff; color: var(--on-ink); }
.tour__hint { pointer-events: none; position: absolute; right: -3rem; top: 50%; width: 2.25rem; height: 2.25rem; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; }
.tour__hint-ring { position: absolute; inset: 0; border-radius: 50%; background: rgba(255,255,255,.6); animation: ping 1.6s cubic-bezier(0,0,.2,1) infinite; }
.tour__hint-dot { position: relative; display: flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: #fff; color: var(--on-ink); box-shadow: 0 10px 20px rgba(0,0,0,.2); font-size: 0.875rem; }

/* =========================================================
   FOOTER
   ========================================================= */
.ft {
  position: relative; z-index: 30; display: flex; flex-direction: column; min-height: 100svh; width: 100%;
  background: var(--bg); color: var(--ink); padding: 4.25rem 1rem max(1rem, env(safe-area-inset-bottom));
}
@media (min-width: 768px) { .ft { padding: 4.5rem 2.5rem 1.5rem; } }
@media (min-width: 1024px) { .ft { display: block; height: 100vh; min-height: 640px; padding: 4rem 2.5rem; } }
.ft__frame {
  display: flex; flex: 1; flex-direction: column; justify-content: space-between;
  border: 1px solid var(--line); border-radius: 20px; padding: 1.5rem 1.25rem;
}
@media (min-width: 768px) { .ft__frame { border-radius: 30px; padding: 2.5rem; } }
@media (min-width: 1024px) { .ft__frame { display: block; height: 100%; } }
.ft__r { display: block; }
.ft__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 2rem; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.12em; }
@media (min-width: 768px) { .ft__top { font-size: 0.875rem; } }
.ft__logo { display: flex !important; align-items: center; gap: 0.75rem; width: fit-content; transition: opacity 0.3s; }
.ft__logo:hover { opacity: 0.75; }
.ft__logo-emblem { width: 2.5rem; height: auto; }
.ft__logo-word { width: 5.5rem; height: auto; }
@media (min-width: 768px) { .ft__logo-emblem { width: 3rem; } .ft__logo-word { width: 6.75rem; } }
.ft__top { align-items: center; }
.ft__credit a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; transition: text-decoration-color 0.3s; }
.ft__credit a:hover { text-decoration-color: currentColor; }
.ft__tag { display: none; text-align: right; }
@media (min-width: 768px) { .ft__tag { display: block; } }
.ft__rule { margin: 2rem 0; height: 1px; background: var(--line); transform: scaleX(0); transform-origin: left; }
@media (min-width: 768px) { .ft__rule { margin: 3rem 0; } }
@media (min-width: 1024px) { .ft__rule { margin: 3.5vh 0; } }
.ft__grid { display: grid; gap: 2.5rem; }
@media (min-width: 1024px) { .ft__grid { grid-template-columns: 1fr auto; gap: 4rem; } }
.ft__h { max-width: 12ch; font-size: clamp(3rem, 13vw, 7rem); line-height: 0.88; letter-spacing: -0.03em; }
@media (min-width: 1024px) { .ft__h { font-size: clamp(2.75rem, 7vw, 7rem); } }
.ft__lead { margin-top: 1.5rem; max-width: 36rem; font-size: 1.125rem; line-height: 1.2; }
@media (min-width: 768px) { .ft__lead { font-size: 1.25rem; } }
.ft__addr { margin-top: 1rem; max-width: 30rem; font-size: 0.8125rem; line-height: 1.4; opacity: 0.65; }
.ft__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; font-size: 0.875rem; }
@media (min-width: 768px) { .ft__cols { gap: 3rem; } }
@media (min-width: 1024px) { .ft__cols { min-width: 360px; gap: 5rem; font-size: 1rem; } }
.ft__col { display: flex; flex-direction: column; gap: 1rem; }
.ft__col a { padding: 0.25rem 0; transition: opacity 0.3s; }
@media (min-width: 1024px) { .ft__col a { padding: 0; } }
.ft__col a:hover { opacity: 0.6; }
.ft__k { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); }
.ft__bottom { display: flex; flex-direction: column; gap: 1rem; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.12em; }
@media (min-width: 1024px) { .ft__bottom { flex-direction: row; align-items: center; justify-content: space-between; font-size: 0.875rem; } }
.ft__legal { display: flex; flex-direction: column; gap: 0.375rem; }
.ft__small { font-size: 10px; color: var(--muted); }
@media (min-width: 768px) { .ft__small { font-size: 11px; } }
.ft__status { display: flex !important; align-items: center; gap: 0.625rem; font-size: 11px; color: var(--muted); transition: opacity 0.3s; }
.ft__status:hover { opacity: 0.6; }
.ping { position: relative; display: flex; width: 0.5rem; height: 0.5rem; flex-shrink: 0; }
.ping i { position: absolute; inset: 0; border-radius: 50%; background: rgba(63,168,91,.7); animation: ping 1s cubic-bezier(0,0,.2,1) infinite; }
.ping b { position: relative; display: inline-flex; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: #3fa85b; }
@keyframes ping { 75%, 100% { transform: scale(2); opacity: 0; } }

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

/* =========================================================
   WELCOME ANIMATION — "the polish"
   Dull emblem → rotary-polisher sweep → showroom shine → wordmark
   (no image masks, so it also works when opened from disk)
   ========================================================= */
.no-intro .intro { display: none !important; }
.intro {
  position: fixed; inset: 0; z-index: 200; background: var(--bg); color: var(--ink);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  clip-path: inset(0 0 0 0);
}
.intro__lockup { display: flex; flex-direction: column; align-items: center; gap: 1.75rem; }
@media (min-width: 768px) { .intro__lockup { flex-direction: row; gap: 2.75rem; } }

.intro__emblem { position: relative; width: clamp(110px, 14vw, 190px); aspect-ratio: 1; }
.intro__emblem img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.intro__dull { opacity: 0; filter: blur(0.6px) grayscale(1); }
.intro__polish, .intro__shine { position: absolute; inset: 0; }
/* rotary sweep: conic gradient driven by --a */
.intro__polish {
  --a: 0deg;
  -webkit-mask-image: conic-gradient(from 0deg, #000 0deg, #000 max(0deg, calc(var(--a) - 28deg)), transparent var(--a));
          mask-image: conic-gradient(from 0deg, #000 0deg, #000 max(0deg, calc(var(--a) - 28deg)), transparent var(--a));
}
/* specular streak: linear gradient band driven by --s */
.intro__shine {
  --s: -30%; pointer-events: none;
  -webkit-mask-image: linear-gradient(105deg, transparent calc(var(--s) - 14%), #000 var(--s), transparent calc(var(--s) + 14%));
          mask-image: linear-gradient(105deg, transparent calc(var(--s) - 14%), #000 var(--s), transparent calc(var(--s) + 14%));
}
.intro__shine img { filter: brightness(1.35) drop-shadow(0 0 10px rgba(255, 255, 255, 0.55)); }

.intro__ring { position: absolute; inset: -14%; width: 128%; height: 128%; overflow: visible; transform: rotate(-90deg); }
.intro__ring circle { fill: none; }
.intro__ring-track { stroke: var(--line); stroke-width: 0.35; opacity: 0; }
.intro__ring-path { stroke: var(--ink); stroke-width: 0.5; stroke-dasharray: 1; stroke-dashoffset: 1; stroke-linecap: round; }
.intro__pad { opacity: 0; }
.intro__pad circle { fill: var(--ink); filter: drop-shadow(0 0 2px rgba(236, 229, 216, 0.9)); }

.intro__brand { display: flex; flex-direction: column; align-items: center; gap: 0.9rem; }
@media (min-width: 768px) { .intro__brand { align-items: flex-start; } }
.intro__mask { overflow: hidden; padding: 0.15rem 0; }
.intro__word { position: relative; width: clamp(170px, 24vw, 330px); transform: translateY(110%); }
.intro__word > img { display: block; width: 100%; height: auto; }
.intro__shine--word img { position: absolute; inset: 0; width: 100%; height: 100%; }
.intro__tag { display: block; width: clamp(200px, 28vw, 380px); height: auto; transform: translateY(130%); }

.intro__foot {
  position: absolute; left: var(--pad); right: var(--pad); bottom: 1.5rem;
  display: flex; align-items: flex-end; justify-content: space-between;
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.22em; color: var(--ink);
}
.intro__steps { position: relative; display: block; height: 1.3em; min-width: 14em; overflow: hidden; }
.intro__step { position: absolute; left: 0; top: 0; display: block; line-height: 1.3em; white-space: nowrap; }
.intro__count { font-size: clamp(1.75rem, 2.8vw, 3rem); letter-spacing: -0.05em; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.intro__skip { position: absolute; top: 1.25rem; right: var(--pad); font-size: 10px; text-transform: uppercase; letter-spacing: 0.2em; color: var(--muted); opacity: 0; }

/* Phones: keep the whole footer within one screen so the logo rests
   clear of the fixed header at the bottom of every page */
@media (max-width: 767px) {
  .ft__grid { gap: 1.5rem; }
  .ft__rule { margin: 1.1rem 0; }
  .ft__h { font-size: clamp(2.3rem, 11vw, 3rem); }
  .ft__lead { margin-top: 0.9rem; font-size: 0.95rem; }
  .ft__addr { margin-top: 0.6rem; font-size: 0.75rem; }
  .ft__cols { gap: 1.25rem; font-size: 0.85rem; }
  .ft__col { gap: 0.45rem; }
  .ft__col a { padding: 0.15rem 0; }
  .ft__bottom { gap: 0.6rem; }
  .ft__frame { padding: 1.25rem 1.25rem; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .ft__rule { margin: 2rem 0; }
  .ft__grid { gap: 2rem; }
  .ft__col { gap: 0.7rem; }
  .ft__frame { padding: 2rem 2.5rem; }
}