/* ==========================================================================
   OM GAJANAND GARMENTS — design system
   Light editorial. Flat surfaces, one accent, one typeface.
   Every size lands on the Tailwind type scale. Every gap comes from the
   spacing token table. Backgrounds are never gradients; the single gradient
   in the system is the hero heading text.
   ========================================================================== */

:root {
  color-scheme: light;

  /* ---- Spacing tokens (the only permitted values) ---- */
  --sp-0:   0;
  --sp-25:  2px;
  --sp-50:  4px;
  --sp-75:  8px;
  --sp-100: 12px;
  --sp-200: 16px;
  --sp-300: 24px;
  --sp-400: 32px;
  --sp-500: 40px;
  --sp-600: 48px;
  --sp-700: 64px;
  --sp-800: 80px;
  --sp-900: 96px;

  /* ---- Type scale (Tailwind defaults, size / line height) ---- */
  --text-xs:   0.75rem;   --lh-xs:   16px;
  --text-sm:   0.875rem;  --lh-sm:   20px;
  --text-base: 1rem;      --lh-base: 24px;
  --text-lg:   1.125rem;  --lh-lg:   28px;
  --text-xl:   1.25rem;   --lh-xl:   28px;
  --text-2xl:  1.5rem;    --lh-2xl:  32px;
  --text-3xl:  1.875rem;  --lh-3xl:  36px;
  --text-4xl:  2.25rem;   --lh-4xl:  40px;
  --text-5xl:  3rem;      --lh-5xl:  1;
  --text-6xl:  3.75rem;   --lh-6xl:  1;
  --text-7xl:  4.5rem;    --lh-7xl:  1;

  /* ---- Radius (Tailwind) ---- */
  --r-sm:   2px;
  --r-md:   6px;
  --r-lg:   8px;
  --r-xl:   12px;
  --r-2xl:  16px;
  --r-3xl:  24px;
  --r-full: 9999px;

  /* ---- Colour. Flat only. ---- */
  --paper:       #faf8f4;
  --paper-2:     #f2eee6;
  --surface:     #ffffff;
  --ink:         #14120e;
  --ink-2:       #57534a;
  --ink-3:       #8b867a;
  --line:        #e5e0d5;
  --line-strong: #d6cfc0;
  --accent:      #9e4a24;
  --accent-deep: #7d3a1b;
  --accent-soft: #f6eae2;
  --positive:    #2f6b4f;
  --danger:      #a02a1f;

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --dur:  700ms;
  --dur-slow: 800ms;

  /* ---- Layout ---- */
  --container: 1200px;
  --measure: 680px;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Reserve the scrollbar track so locking scroll for a menu or modal does
     not widen the page and shunt the centred nav rail sideways. */
  scrollbar-gutter: stable;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Geist', ui-sans-serif, system-ui, sans-serif;
  font-size: var(--text-base);
  line-height: var(--lh-base);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: 600;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }

/* Nothing in this interface is italic. */
i, em, address { font-style: normal; }

::selection { background: var(--accent); color: #fff; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--paper-2); }
::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: var(--r-full); }
::-webkit-scrollbar-thumb:hover { background: var(--ink-3); }

/* ---- Focus. Visible, always. ---- */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

.skip-link {
  position: absolute;
  left: var(--sp-200);
  top: var(--sp-200);
  z-index: 200;
  transform: translateY(-200%);
  background: var(--ink);
  color: var(--paper);
  padding: var(--sp-75) var(--sp-100);
  border-radius: var(--r-lg);
  font-size: var(--text-sm);
  line-height: var(--lh-sm);
  font-weight: 600;
  text-decoration: none;
  transition: transform var(--dur) var(--ease);
}
.skip-link:focus-visible { transform: translateY(0); }

/* ==========================================================================
   Layout primitives
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--sp-300);
}

.section { padding-block: var(--sp-900); }
.section--tight { padding-block: var(--sp-700); }
.section--paper2 { background: var(--paper-2); }
.section--ink { background: var(--ink); color: var(--paper); }

.section-head { max-width: var(--measure); margin-bottom: var(--sp-600); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-75);
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: var(--text-xs);
  line-height: var(--lh-xs);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--sp-200);
}
.eyebrow::before {
  content: "";
  width: var(--sp-300);
  height: 1px;
  background: currentColor;
}
.section--ink .eyebrow { color: #d9a382; }

.h-display {
  font-size: var(--text-4xl);
  line-height: var(--lh-4xl);
  letter-spacing: -0.03em;
}
.h-section {
  font-size: var(--text-3xl);
  line-height: var(--lh-3xl);
}
.h-card {
  font-size: var(--text-xl);
  line-height: var(--lh-xl);
}
.lede {
  font-size: var(--text-lg);
  line-height: var(--lh-lg);
  color: var(--ink-2);
  max-width: var(--measure);
  margin-top: var(--sp-200);
}
.muted { color: var(--ink-2); }
.small { font-size: var(--text-sm); line-height: var(--lh-sm); }
.mono {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
}

.grid { display: grid; gap: var(--sp-300); }
@media (min-width: 720px)  { .grid-2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 720px)  { .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .grid-4 { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 620px)  { .grid-4 { grid-template-columns: repeat(2, 1fr); } }

/* ==========================================================================
   Buttons. Full state set: hover, active, focus, disabled, loading.
   Main buttons use 8px vertical and 12px horizontal padding.
   ========================================================================== */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-75);
  padding: var(--sp-75) var(--sp-100);
  min-height: 40px;
  border: 1px solid transparent;
  border-radius: var(--r-lg);
  font-size: var(--text-base);
  line-height: var(--lh-base);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--dur) var(--ease),
              color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.btn--sm { font-size: var(--text-sm); line-height: var(--lh-sm); min-height: 36px; }
.btn--wide { padding-inline: var(--sp-300); }
.btn--block { width: 100%; }

.btn--primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn--primary:hover { background: var(--accent-deep); border-color: var(--accent-deep); box-shadow: 0 var(--sp-75) var(--sp-300) rgba(158, 74, 36, 0.24); }
.btn--primary:active { transform: scale(0.98); box-shadow: none; }

.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn--ghost:hover { background: var(--surface); border-color: var(--ink); }
.btn--ghost:active { transform: scale(0.98); }

.btn--quiet { background: transparent; color: var(--ink-2); border-color: transparent; }
.btn--quiet:hover { color: var(--ink); background: var(--paper-2); }
.btn--quiet:active { transform: scale(0.98); }

.btn--onink { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.btn--onink:hover { background: #fff; border-color: #fff; }
.btn--onink:active { transform: scale(0.98); }

.btn[disabled], .btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
.btn.is-loading { color: transparent; pointer-events: none; }
.btn.is-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: var(--sp-200);
  height: var(--sp-200);
  border: 2px solid currentColor;
  border-radius: var(--r-full);
  border-top-color: transparent;
  color: #fff;
  animation: spin 800ms linear infinite;
}
.btn--ghost.is-loading::after, .btn--onink.is-loading::after { color: var(--ink); }
@keyframes spin { to { transform: rotate(360deg); } }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-75);
  font-weight: 600;
  text-decoration: none;
  color: var(--accent);
  transition: gap var(--dur) var(--ease), color var(--dur) var(--ease);
}
.link-arrow:hover { gap: var(--sp-100); color: var(--accent-deep); }
.link-arrow:active { transform: translateY(1px); }

/* ==========================================================================
   Navigation: a rail of three detached glass capsules rather than one bar.
   Brand, links and actions each float on their own. On scroll the rail
   contracts: the wordmark folds away, the status chip collapses, and the
   three capsules draw together into a compact cluster.
   ========================================================================== */

.nav-sentinel { position: absolute; top: 0; left: 0; width: 1px; height: var(--sp-75); }

.nav-wrap {
  position: sticky;
  top: 0;
  /* Above .menu (95) so the hamburger stays reachable once it has morphed
     into the close X. Modals (120) still cover it. */
  z-index: 100;
  display: flex;
  justify-content: center;
  padding-top: var(--sp-300);
  padding-inline: var(--sp-300);
  pointer-events: none;
}

.nav-rail {
  display: flex;
  align-items: center;
  gap: var(--sp-75);
  max-width: 100%;
  transition: gap var(--dur) var(--ease);
}
.nav-wrap.is-stuck .nav-rail { gap: var(--sp-50); }

.island {
  pointer-events: auto;
  display: flex;
  align-items: center;
  width: max-content;
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  transition: background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              padding var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.nav-wrap.is-stuck .island {
  background: rgba(255, 255, 255, 0.92);
  border-color: var(--line-strong);
  box-shadow: 0 var(--sp-75) var(--sp-300) rgba(20, 18, 14, 0.08);
}

/* ---- Capsule one: the brand, which folds to just its mark on scroll ---- */
.island--brand {
  gap: var(--sp-75);
  padding: var(--sp-50) var(--sp-200) var(--sp-50) var(--sp-50);
  text-decoration: none;
  color: var(--ink);
  overflow: hidden;
}
.nav-wrap.is-stuck .island--brand { padding-right: var(--sp-50); }

.brand-mark {
  width: var(--sp-400);
  height: var(--sp-400);
  border-radius: var(--r-full);
  background: var(--accent);
  color: #fff;
  display: grid;
  place-items: center;
  flex: none;
  font-size: var(--text-lg);
  transition: transform var(--dur) var(--ease);
}
.island--brand:hover .brand-mark { transform: rotate(-12deg); }

.brand-text {
  display: flex;
  flex-direction: column;
  white-space: nowrap;
  max-width: 200px;
  opacity: 1;
  transition: max-width var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.brand-text b {
  font-size: var(--text-sm);
  line-height: var(--lh-sm);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.brand-text span {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: var(--text-xs);
  line-height: var(--lh-xs);
  letter-spacing: 0.14em;
  color: var(--ink-3);
}
.nav-wrap.is-stuck .brand-text { max-width: 0; opacity: 0; }

/* ---- Capsule two: links, with a pill that slides under the cursor ---- */
.island--nav { position: relative; padding: var(--sp-50); gap: var(--sp-25); }

.nav-pill {
  position: absolute;
  top: var(--sp-50);
  bottom: var(--sp-50);
  left: 0;
  width: 0;
  border-radius: var(--r-full);
  background: var(--accent-soft);
  opacity: 0;
  transform: translateX(0);
  transition: transform var(--dur) var(--ease),
              width var(--dur) var(--ease),
              opacity var(--dur) var(--ease);
  pointer-events: none;
}
.island--nav.has-pill .nav-pill { opacity: 1; }

.island--nav a {
  position: relative;
  z-index: 1;
  padding: var(--sp-75) var(--sp-100);
  border-radius: var(--r-full);
  font-size: var(--text-sm);
  line-height: var(--lh-sm);
  font-weight: 500;
  color: var(--ink-2);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--dur) var(--ease);
}
.island--nav a:hover,
.island--nav a:focus-visible { color: var(--accent-deep); }
.island--nav a[aria-current="page"] { color: var(--accent-deep); font-weight: 600; }

/* ---- Capsule three: live status, account, and the menu trigger ---- */
.island--actions { gap: var(--sp-75); padding: var(--sp-50) var(--sp-50) var(--sp-50) var(--sp-100); }
.nav-wrap.is-stuck .island--actions { padding-left: var(--sp-50); }

.status {
  display: flex;
  align-items: center;
  gap: var(--sp-50);
  max-width: 200px;
  overflow: hidden;
  white-space: nowrap;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: var(--text-xs);
  line-height: var(--lh-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2);
  transition: max-width var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.nav-wrap.is-stuck .status { max-width: 0; opacity: 0; }

.status-dot {
  width: var(--sp-75);
  height: var(--sp-75);
  border-radius: var(--r-full);
  background: var(--ink-3);
  flex: none;
  position: relative;
}
.status.is-open .status-dot { background: var(--positive); }
.status.is-open .status-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--r-full);
  background: var(--positive);
  animation: ping 2.4s var(--ease) infinite;
}
@keyframes ping {
  0%   { transform: scale(1);   opacity: 0.6; }
  70%  { transform: scale(2.6); opacity: 0; }
  100% { transform: scale(2.6); opacity: 0; }
}

.nav-desktop-only { display: flex; align-items: center; gap: var(--sp-75); }

/* Hamburger. The lines rotate and translate into an X, they never vanish. */
.hamburger {
  display: none;
  position: relative;
  width: var(--sp-400);
  height: var(--sp-400);
  padding: 0;
  border: 0;
  border-radius: var(--r-full);
  background: var(--ink);
  cursor: pointer;
  flex: none;
  transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.hamburger:hover { background: var(--accent); }
.hamburger:active { transform: scale(0.92); }
.hamburger span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--sp-200);
  height: 1.5px;
  margin-left: -8px;
  border-radius: var(--r-full);
  background: var(--paper);
  transition: transform var(--dur) var(--ease), width var(--dur) var(--ease);
}
.hamburger span:nth-child(1) { transform: translateY(-5px); }
.hamburger span:nth-child(2) { transform: translateY(0) scaleX(0.66); transform-origin: left center; }
.hamburger span:nth-child(3) { transform: translateY(5px); }
.hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(0) rotate(45deg); }
/* The middle bar is short and left anchored when closed; it has to swing
   about its centre to land exactly on the other diagonal. */
.hamburger[aria-expanded="true"] span:nth-child(2) {
  transform: translateY(0) rotate(45deg) scaleX(1);
  transform-origin: center center;
}
.hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(0) rotate(-45deg); }

/* ---- Screen filling overlay menu ---- */
.menu {
  position: fixed;
  inset: 0;
  z-index: 95;
  /* Flex with margin:auto on the child, not grid centring. Centred grid
     content that outgrows the viewport overflows off the top, which puts the
     first links under the nav rail and out of reach. margin:auto collapses to
     zero once space runs out, so tall content starts at the padding edge and
     scrolls instead. */
  display: flex;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: var(--sp-900) var(--sp-300) var(--sp-600);
  background: rgba(250, 248, 244, 0.8);
  backdrop-filter: blur(48px) saturate(140%);
  -webkit-backdrop-filter: blur(48px) saturate(140%);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur) var(--ease), visibility 0s linear var(--dur);
}
.menu { cursor: default; }
.menu.is-open { opacity: 1; visibility: visible; transition: opacity var(--dur) var(--ease), visibility 0s; }

.menu-inner {
  width: 100%;
  max-width: var(--container);
  margin: auto;
  display: grid;
  gap: var(--sp-600);
}
@media (min-width: 860px) { .menu-inner { grid-template-columns: 1.4fr 1fr; gap: var(--sp-700); align-items: center; } }

.menu-list { display: grid; gap: var(--sp-50); }
.menu-item { overflow: hidden; }
.menu-item a {
  display: flex;
  align-items: baseline;
  gap: var(--sp-200);
  padding-block: var(--sp-75);
  font-size: var(--text-4xl);
  line-height: var(--lh-4xl);
  font-weight: 600;
  letter-spacing: -0.03em;
  text-decoration: none;
  color: var(--ink);
  transform: translateY(48px);
  opacity: 0;
  transition: transform var(--dur-slow) var(--ease),
              opacity var(--dur-slow) var(--ease),
              color var(--dur) var(--ease),
              padding-left var(--dur) var(--ease);
}
.menu-item a em {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: var(--text-xs);
  line-height: var(--lh-xs);
  font-weight: 400;
  letter-spacing: 0.1em;
  color: var(--ink-3);
  transition: color var(--dur) var(--ease);
}
.menu-item a:hover { color: var(--accent); padding-left: var(--sp-100); }
.menu-item a:hover em { color: var(--accent); }
.menu-item a[aria-current="page"] { color: var(--accent); }
.menu.is-open .menu-item a { transform: translateY(0); opacity: 1; }
.menu.is-open .menu-item:nth-child(1) a { transition-delay: 100ms; }
.menu.is-open .menu-item:nth-child(2) a { transition-delay: 150ms; }
.menu.is-open .menu-item:nth-child(3) a { transition-delay: 200ms; }
.menu.is-open .menu-item:nth-child(4) a { transition-delay: 250ms; }

.menu-side {
  display: grid;
  gap: var(--sp-300);
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--dur-slow) var(--ease) 320ms, transform var(--dur-slow) var(--ease) 320ms;
}
.menu.is-open .menu-side { opacity: 1; transform: translateY(0); }

.menu-office {
  padding: var(--sp-300);
  border: 1px solid var(--line);
  border-radius: var(--r-2xl);
  background: rgba(255, 255, 255, 0.6);
}
.menu-office h3 {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: var(--text-xs);
  line-height: var(--lh-xs);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: var(--sp-100);
}
.menu-office a {
  display: block;
  font-size: var(--text-lg);
  line-height: var(--lh-lg);
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  color: var(--ink);
  transition: color var(--dur) var(--ease);
}
.menu-office a:hover { color: var(--accent); }
.menu-office p { margin-top: var(--sp-50); font-size: var(--text-sm); line-height: var(--lh-sm); color: var(--ink-2); }

@media (max-width: 1000px) {
  .island--nav { display: none; }
  .nav-desktop-only { display: none; }
  .status { display: none; }
  .island--actions { padding: var(--sp-50); }
  .hamburger { display: block; }
}

/* On desktop the links are already in the rail, so neither the trigger nor
   the overlay has any job to do. */
@media (min-width: 1001px) {
  .menu { display: none; }
}

@media (max-height: 860px) {
  .menu { padding-bottom: var(--sp-400); }
}

@media (max-height: 760px) {
  .menu { padding-top: var(--sp-800); padding-bottom: var(--sp-400); }
  .menu-inner { gap: var(--sp-400); }
  .menu-item a { font-size: var(--text-3xl); line-height: var(--lh-3xl); }
  .menu-side { gap: var(--sp-200); }
  .menu-office { padding: var(--sp-200); }
}

@media (max-height: 620px) {
  .menu-item a { font-size: var(--text-2xl); line-height: var(--lh-2xl); }
  .menu-office p { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .status.is-open .status-dot::after { animation: none; }
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero { position: relative; padding-top: var(--sp-700); padding-bottom: var(--sp-900); overflow: hidden; }

.hero-grid { display: grid; gap: var(--sp-700); align-items: center; }
@media (min-width: 1000px) { .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-600); } }

.hero h1 {
  max-width: var(--measure);
  font-size: var(--text-4xl);
  line-height: var(--lh-4xl);
  letter-spacing: -0.04em;
  /* The one gradient in the system, and it is on text. */
  background: linear-gradient(90deg, #000000 0%, #666666 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-bottom: var(--sp-50);
}
/* Capped at 48px so the heading holds its intended break inside the 680px
   measure instead of fragmenting into four lines. */
@media (min-width: 720px) { .hero h1 { font-size: var(--text-5xl); line-height: var(--lh-5xl); } }

.hero-sub {
  max-width: var(--measure);
  margin-top: var(--sp-300);
  font-size: var(--text-lg);
  line-height: var(--lh-lg);
  color: var(--ink-2);
}

.hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-100); margin-top: var(--sp-400); }

.hero-proof {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-100) var(--sp-300);
  margin-top: var(--sp-500);
  padding-top: var(--sp-300);
  border-top: 1px solid var(--line);
  max-width: var(--measure);
}
.hero-proof li {
  display: flex;
  align-items: center;
  gap: var(--sp-75);
  font-size: var(--text-sm);
  line-height: var(--lh-sm);
  color: var(--ink-2);
}
.hero-proof i { color: var(--accent); font-size: var(--text-base); }

/* Hero visual: outer frame 24px radius, 8px pad, so the inner face is 16px. */
.hero-figure {
  position: relative;
  padding: var(--sp-75);
  border: 1px solid var(--line);
  border-radius: var(--r-3xl);
  background: var(--surface);
}
.hero-figure-inner {
  border-radius: var(--r-2xl);
  background: var(--paper-2);
  overflow: hidden;
}
.hero-figure figcaption {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-200);
  padding: var(--sp-100) var(--sp-200) var(--sp-50);
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: var(--text-xs);
  line-height: var(--lh-xs);
  color: var(--ink-3);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Stroke draw on the consignment drawing */
.draw { stroke-dasharray: var(--len, 600); stroke-dashoffset: var(--len, 600); }
.is-drawn .draw { animation: draw 1600ms var(--ease) forwards; }
.is-drawn .draw--2 { animation-delay: 160ms; }
.is-drawn .draw--3 { animation-delay: 320ms; }
.is-drawn .draw--4 { animation-delay: 480ms; }
@keyframes draw { to { stroke-dashoffset: 0; } }

.pop { opacity: 0; transform: translateY(8px); }
.is-drawn .pop { animation: pop var(--dur-slow) var(--ease) forwards; }
.is-drawn .pop--1 { animation-delay: 600ms; }
.is-drawn .pop--2 { animation-delay: 700ms; }
.is-drawn .pop--3 { animation-delay: 800ms; }
.is-drawn .pop--4 { animation-delay: 900ms; }
@keyframes pop { to { opacity: 1; transform: translateY(0); } }

.float-slow { animation: floaty 9s ease-in-out infinite; transform-origin: center; }
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* ==========================================================================
   Marquee
   ========================================================================== */

.marquee {
  overflow: hidden;
  border-block: 1px solid var(--line);
  background: var(--surface);
  padding-block: var(--sp-200);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track { display: flex; width: max-content; animation: slide 38s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-group { display: flex; align-items: center; gap: var(--sp-600); padding-right: var(--sp-600); }
.marquee-group span {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-100);
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: var(--text-sm);
  line-height: var(--lh-sm);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
  white-space: nowrap;
}
.marquee-group i { color: var(--accent); }
@keyframes slide { to { transform: translateX(-50%); } }

/* ==========================================================================
   Cards
   ========================================================================== */

.card {
  display: flex;
  flex-direction: column;
  padding: var(--sp-300);
  border: 1px solid var(--line);
  border-radius: var(--r-2xl);
  background: var(--surface);
  transition: transform var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.card:hover {
  transform: translateY(-4px);
  border-color: var(--line-strong);
  box-shadow: 0 var(--sp-100) var(--sp-400) rgba(20, 18, 14, 0.06);
}
.card h3 { margin-bottom: var(--sp-75); }
.card p { color: var(--ink-2); font-size: var(--text-sm); line-height: var(--lh-sm); }

.card-icon {
  width: var(--sp-500);
  height: var(--sp-500);
  display: grid;
  place-items: center;
  margin-bottom: var(--sp-200);
  border-radius: var(--r-md);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: var(--text-xl);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.card:hover .card-icon { background: var(--accent); color: #fff; transform: rotate(-6deg) scale(1.06); }

.card-list { margin-top: var(--sp-200); padding-top: var(--sp-200); border-top: 1px solid var(--line); display: grid; gap: var(--sp-75); }
.card-list li {
  display: flex;
  gap: var(--sp-75);
  align-items: flex-start;
  font-size: var(--text-sm);
  line-height: var(--lh-sm);
  color: var(--ink-2);
}
.card-list i { color: var(--accent); margin-top: var(--sp-25); flex: none; }

.card-index {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: var(--text-xs);
  line-height: var(--lh-xs);
  letter-spacing: 0.1em;
  color: var(--ink-3);
  margin-bottom: var(--sp-200);
}

/* Benefit rows */
.benefit {
  display: grid;
  gap: var(--sp-200);
  padding-block: var(--sp-300);
  border-top: 1px solid var(--line);
}
@media (min-width: 860px) { .benefit { grid-template-columns: var(--sp-500) minmax(0, 320px) minmax(0, 1fr); gap: var(--sp-400); align-items: start; } }
.benefit:last-child { border-bottom: 1px solid var(--line); }
.benefit-num {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: var(--text-sm);
  line-height: var(--lh-sm);
  color: var(--accent);
}
.benefit h3 { font-size: var(--text-xl); line-height: var(--lh-xl); }
.benefit p { color: var(--ink-2); }

/* ==========================================================================
   Tagline reveal. Words light up one at a time, in reading order.
   ========================================================================== */

.tagline { padding-block: var(--sp-900); background: var(--paper-2); }
.tagline p {
  max-width: var(--measure);
  font-size: var(--text-4xl);
  line-height: var(--lh-4xl);
  font-weight: 600;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
@media (min-width: 860px) { .tagline p { font-size: var(--text-5xl); line-height: 1.08; } }

.tagline .w {
  color: rgba(20, 18, 14, 0.3);
  transition: color var(--dur-slow) var(--ease);
}
.tagline .w.on { color: var(--ink); }
.tagline .w.accent.on { color: var(--accent); }

/* ==========================================================================
   Steps
   ========================================================================== */

.steps { counter-reset: step; display: grid; gap: var(--sp-300); }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(3, 1fr); } }

.step {
  position: relative;
  padding: var(--sp-300);
  border: 1px solid var(--line);
  border-radius: var(--r-2xl);
  background: var(--surface);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.step:hover { transform: translateY(-4px); box-shadow: 0 var(--sp-100) var(--sp-400) rgba(20, 18, 14, 0.06); }
.step-num {
  display: inline-grid;
  place-items: center;
  width: var(--sp-400);
  height: var(--sp-400);
  margin-bottom: var(--sp-200);
  border-radius: var(--r-full);
  background: var(--ink);
  color: var(--paper);
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: var(--text-sm);
  line-height: var(--lh-sm);
}
.step h3 { margin-bottom: var(--sp-75); font-size: var(--text-xl); line-height: var(--lh-xl); }
.step p { color: var(--ink-2); font-size: var(--text-sm); line-height: var(--lh-sm); }

/* ==========================================================================
   Stats
   ========================================================================== */

.stats { display: grid; gap: var(--sp-300); }
@media (min-width: 620px)  { .stats { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .stats { grid-template-columns: repeat(4, 1fr); } }

.stat { padding: var(--sp-300); border: 1px solid var(--line); border-radius: var(--r-2xl); background: var(--surface); }
.section--ink .stat { background: #1f1f1f; border-color: #313131; }
.stat b {
  display: block;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: var(--text-4xl);
  line-height: var(--lh-4xl);
  font-weight: 500;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.stat span { display: block; margin-top: var(--sp-75); font-size: var(--text-sm); line-height: var(--lh-sm); color: var(--ink-2); }
.section--ink .stat span { color: #9b9b9b; }

/* ==========================================================================
   Testimonials, people
   ========================================================================== */

.quote {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--sp-300);
  padding: var(--sp-300);
  border: 1px solid var(--line);
  border-radius: var(--r-2xl);
  background: var(--surface);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.quote:hover { transform: translateY(-4px); box-shadow: 0 var(--sp-100) var(--sp-400) rgba(20, 18, 14, 0.06); }
.quote blockquote { margin: 0; font-size: var(--text-lg); line-height: var(--lh-lg); letter-spacing: -0.01em; }
.quote-mark { color: var(--accent); font-size: var(--text-2xl); line-height: var(--lh-2xl); }

.person { display: flex; align-items: center; gap: var(--sp-100); }
.avatar {
  width: var(--sp-500);
  height: var(--sp-500);
  flex: none;
  border-radius: var(--r-full);
  display: grid;
  place-items: center;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: var(--text-sm);
  line-height: var(--lh-sm);
  font-weight: 500;
  color: #fff;
}
.person b { display: block; font-weight: 600; font-size: var(--text-sm); line-height: var(--lh-sm); }
.person span { display: block; font-size: var(--text-xs); line-height: var(--lh-xs); color: var(--ink-3); }

/* ==========================================================================
   FAQ
   ========================================================================== */

.faq { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q {
  display: flex;
  gap: var(--sp-200);
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--sp-300) var(--sp-0);
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  font-size: var(--text-lg);
  line-height: var(--lh-lg);
  font-weight: 600;
  letter-spacing: -0.01em;
  transition: color var(--dur) var(--ease);
}
.faq-q:hover { color: var(--accent); }
.faq-icon {
  position: relative;
  flex: none;
  width: var(--sp-400);
  height: var(--sp-400);
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.faq-q:hover .faq-icon { border-color: var(--accent); }
.faq-icon::before, .faq-icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--sp-100);
  height: 1.5px;
  margin-left: -6px;
  background: currentColor;
  border-radius: var(--r-full);
  transition: transform var(--dur) var(--ease);
}
.faq-icon::after { transform: rotate(90deg); }
.faq-q[aria-expanded="true"] .faq-icon { background: var(--accent); border-color: var(--accent); color: #fff; transform: rotate(180deg); }
.faq-q[aria-expanded="true"] .faq-icon::after { transform: rotate(0deg); }

.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur) var(--ease); }
.faq-a > div { overflow: hidden; }
.faq-item.is-open .faq-a { grid-template-rows: 1fr; }
.faq-a p { max-width: var(--measure); padding-bottom: var(--sp-300); color: var(--ink-2); }

/* ==========================================================================
   Forms
   ========================================================================== */

.field { display: grid; gap: var(--sp-50); margin-bottom: var(--sp-200); }
.field > label {
  font-size: var(--text-sm);
  line-height: var(--lh-sm);
  font-weight: 500;
  color: var(--ink-2);
}
.field input, .field textarea, .field select {
  width: 100%;
  padding: var(--sp-100);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  background: var(--surface);
  color: var(--ink);
  font-family: inherit;
  font-size: var(--text-base);
  line-height: var(--lh-base);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.field textarea { min-height: 120px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-3); }
.field input:hover, .field textarea:hover { border-color: var(--ink-3); }
.field input:focus, .field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(158, 74, 36, 0.14);
}
.field.has-error input, .field.has-error textarea { border-color: var(--danger); }
.field.has-error input:focus, .field.has-error textarea:focus { box-shadow: 0 0 0 3px rgba(160, 42, 31, 0.14); }

.field-error {
  display: none;
  align-items: center;
  gap: var(--sp-50);
  font-size: var(--text-xs);
  line-height: var(--lh-xs);
  color: var(--danger);
}
.field.has-error .field-error { display: flex; }

.check { display: flex; gap: var(--sp-75); align-items: flex-start; margin-bottom: var(--sp-200); }
.check input { margin-top: var(--sp-50); width: var(--sp-200); height: var(--sp-200); flex: none; accent-color: var(--accent); }
.check label { font-size: var(--text-xs); line-height: var(--lh-xs); color: var(--ink-2); }
.check a { color: var(--accent); }

.form-note {
  display: flex;
  gap: var(--sp-75);
  align-items: flex-start;
  margin-top: var(--sp-200);
  font-size: var(--text-xs);
  line-height: var(--lh-xs);
  color: var(--ink-3);
}

/* Inline result banners. No alert() anywhere in this build. */
.banner {
  display: none;
  gap: var(--sp-75);
  align-items: flex-start;
  padding: var(--sp-100);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  font-size: var(--text-sm);
  line-height: var(--lh-sm);
  margin-bottom: var(--sp-200);
}
.banner.is-shown { display: flex; }
.banner--error { border-color: rgba(160, 42, 31, 0.35); background: #fbeeec; color: var(--danger); }
.banner--ok { border-color: rgba(47, 107, 79, 0.35); background: #ecf4ef; color: var(--positive); }

/* Empty state: a composed getting started view, never a blank panel. */
.empty {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: var(--sp-100);
  padding: var(--sp-500) var(--sp-300);
  border: 1px solid var(--line);
  border-radius: var(--r-2xl);
  background: var(--paper);
}
.empty-icon {
  width: var(--sp-600);
  height: var(--sp-600);
  display: grid;
  place-items: center;
  border-radius: var(--r-full);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: var(--text-2xl);
}
.empty h4 { font-size: var(--text-lg); line-height: var(--lh-lg); }
.empty p { font-size: var(--text-sm); line-height: var(--lh-sm); color: var(--ink-2); max-width: 320px; }

/* Skeleton loaders shaped like the real layout */
.skeleton {
  border-radius: var(--r-md);
  background: var(--paper-2);
  position: relative;
  overflow: hidden;
}
/* A flat band with blurred edges, so the sweep needs no background gradient. */
.skeleton::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 40%;
  transform: translateX(-140%);
  background: rgba(255, 255, 255, 0.72);
  filter: blur(12px);
  animation: shimmer 1400ms var(--ease) infinite;
}
@keyframes shimmer { to { transform: translateX(340%); } }

/* ==========================================================================
   Modals
   ========================================================================== */

.modal {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: var(--sp-300);
  background: rgba(20, 18, 14, 0.4);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur) var(--ease), visibility 0s linear var(--dur);
}
.modal.is-open { opacity: 1; visibility: visible; transition: opacity var(--dur) var(--ease), visibility 0s; }

.modal-card {
  width: 100%;
  max-width: 460px;
  max-height: 86vh;
  overflow-y: auto;
  padding: var(--sp-400);
  border: 1px solid var(--line);
  border-radius: var(--r-3xl);
  background: var(--surface);
  transform: translateY(24px) scale(0.98);
  opacity: 0;
  transition: transform var(--dur-slow) var(--ease), opacity var(--dur-slow) var(--ease);
}
.modal.is-open .modal-card { transform: translateY(0) scale(1); opacity: 1; }

.modal-head { margin-bottom: var(--sp-300); padding-right: var(--sp-500); }
.modal-head h2 { font-size: var(--text-2xl); line-height: var(--lh-2xl); }
.modal-head p { margin-top: var(--sp-50); font-size: var(--text-sm); line-height: var(--lh-sm); color: var(--ink-2); }

.modal-close {
  position: absolute;
  top: var(--sp-300);
  right: var(--sp-300);
  width: var(--sp-400);
  height: var(--sp-400);
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  background: var(--surface);
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.modal-close:hover { background: var(--paper-2); border-color: var(--ink); }
.modal-close:active { transform: scale(0.94); }

.modal-card { position: relative; }
.modal-alt { margin-top: var(--sp-200); text-align: center; font-size: var(--text-sm); line-height: var(--lh-sm); color: var(--ink-2); }
.modal-alt button { background: none; border: 0; padding: 0; color: var(--accent); font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }

/* ==========================================================================
   Contact / locations
   ========================================================================== */

.office {
  padding: var(--sp-300);
  border: 1px solid var(--line);
  border-radius: var(--r-2xl);
  background: var(--surface);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.office:hover { border-color: var(--line-strong); transform: translateY(-4px); }
.office-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-50);
  padding: var(--sp-25) var(--sp-75);
  margin-bottom: var(--sp-200);
  border-radius: var(--r-full);
  background: var(--accent-soft);
  color: var(--accent-deep);
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: var(--text-xs);
  line-height: var(--lh-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.office dl { display: grid; gap: var(--sp-100); margin: var(--sp-200) 0 0; }
.office .row { display: flex; gap: var(--sp-100); align-items: flex-start; }
.office .row i { color: var(--accent); margin-top: var(--sp-25); flex: none; }
.office dt {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: var(--text-xs);
  line-height: var(--lh-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.office dd { margin: 0; font-size: var(--text-sm); line-height: var(--lh-sm); }
.office dd a { color: var(--ink); text-decoration: none; transition: color var(--dur) var(--ease); }
.office dd a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }

/* ==========================================================================
   Page header (inner pages)
   ========================================================================== */

.page-header { padding-top: var(--sp-700); padding-bottom: var(--sp-600); border-bottom: 1px solid var(--line); }
.page-header h1 {
  max-width: var(--measure);
  font-size: var(--text-4xl);
  line-height: var(--lh-4xl);
  letter-spacing: -0.04em;
  background: linear-gradient(90deg, #000000 0%, #666666 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-bottom: var(--sp-50);
}
@media (min-width: 860px) { .page-header h1 { font-size: var(--text-5xl); line-height: var(--lh-5xl); } }

.crumbs {
  display: flex;
  align-items: center;
  gap: var(--sp-75);
  margin-bottom: var(--sp-200);
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: var(--text-xs);
  line-height: var(--lh-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.crumbs a { color: var(--ink-3); text-decoration: none; transition: color var(--dur) var(--ease); }
.crumbs a:hover { color: var(--accent); }

/* Legal prose */
.prose { max-width: var(--measure); }
.prose h2 { font-size: var(--text-2xl); line-height: var(--lh-2xl); margin-top: var(--sp-600); margin-bottom: var(--sp-200); }
.prose h2:first-child { margin-top: 0; }
.prose p { color: var(--ink-2); margin-bottom: var(--sp-200); }
.prose ul { display: grid; gap: var(--sp-75); margin-bottom: var(--sp-200); }
.prose ul li { display: flex; gap: var(--sp-75); align-items: flex-start; color: var(--ink-2); }
.prose ul li i { color: var(--accent); margin-top: var(--sp-50); flex: none; font-size: var(--text-sm); }
.prose a { color: var(--accent); }

.toc { position: sticky; top: var(--sp-900); display: grid; gap: var(--sp-50); align-content: start; }
.toc a {
  padding: var(--sp-50) var(--sp-100);
  border-radius: var(--r-lg);
  font-size: var(--text-sm);
  line-height: var(--lh-sm);
  color: var(--ink-2);
  text-decoration: none;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.toc a:hover { background: var(--paper-2); color: var(--ink); }

/* ==========================================================================
   Footer
   ========================================================================== */

.footer { background: var(--ink); color: var(--paper); padding-block: var(--sp-800) var(--sp-400); }
.footer-grid { display: grid; gap: var(--sp-500); }
@media (min-width: 860px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: var(--sp-400); } }
.footer h4 {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: var(--text-xs);
  line-height: var(--lh-xs);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8b867a;
  margin-bottom: var(--sp-200);
}
.footer p { color: #9b9b9b; font-size: var(--text-sm); line-height: var(--lh-sm); }
.footer ul { display: grid; gap: var(--sp-75); }
.footer a { color: #d6cfc0; text-decoration: none; font-size: var(--text-sm); line-height: var(--lh-sm); transition: color var(--dur) var(--ease); }
.footer a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.footer .brand-name span { color: #8b867a; }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-200);
  justify-content: space-between;
  align-items: center;
  margin-top: var(--sp-600);
  padding-top: var(--sp-300);
  border-top: 1px solid #313131;
  font-size: var(--text-xs);
  line-height: var(--lh-xs);
  color: #8b867a;
}
.footer-bottom nav { display: flex; flex-wrap: wrap; gap: var(--sp-200); }
.footer-bottom a { font-size: var(--text-xs); line-height: var(--lh-xs); }

/* ==========================================================================
   Back to top
   ========================================================================== */

.to-top {
  position: fixed;
  right: var(--sp-300);
  bottom: var(--sp-300);
  z-index: 80;
  width: var(--sp-600);
  height: var(--sp-600);
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--ink);
  cursor: pointer;
  opacity: 0;
  transform: translateY(16px) scale(0.9);
  pointer-events: none;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.to-top.is-shown { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.to-top:hover { background: #fff; }
.to-top:active { transform: scale(0.94); }

/* ==========================================================================
   Scroll reveal. Heavy fade up with a blur, resolved by IntersectionObserver.
   ========================================================================== */

[data-reveal] {
  opacity: 0;
  transform: translateY(64px);
  filter: blur(12px);
  transition: opacity var(--dur-slow) var(--ease),
              transform var(--dur-slow) var(--ease),
              filter var(--dur-slow) var(--ease);
  will-change: opacity, transform, filter;
}
/* Release the compositing layer once the reveal has finished, so dozens of
   resolved elements are not each held on the GPU for the life of the page. */
[data-reveal].in { opacity: 1; transform: translateY(0); filter: none; will-change: auto; }
[data-reveal][data-delay="1"] { transition-delay: 80ms; }
[data-reveal][data-delay="2"] { transition-delay: 160ms; }
[data-reveal][data-delay="3"] { transition-delay: 240ms; }
[data-reveal][data-delay="4"] { transition-delay: 320ms; }
[data-reveal][data-delay="5"] { transition-delay: 400ms; }

/* ==========================================================================
   Reduced motion. Everything resolves instantly, nothing loops.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; filter: none; }
  .marquee-track { animation: none; }
  .float-slow { animation: none; }
  .draw { stroke-dashoffset: 0; }
  .pop { opacity: 1; transform: none; }
}

/* Travelling dot on the hero route */
.route-dot {
  offset-path: path('M 64 364 C 176 330, 384 398, 496 364');
  offset-rotate: 0deg;
  opacity: 0;
}
.is-drawn .route-dot { animation: travel 4.2s var(--ease) 1.2s infinite; }
@keyframes travel {
  0%   { offset-distance: 0%;   opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}

@media (min-width: 900px) { .cta-grid { grid-template-columns: 1.6fr auto; } }

/* Split layout used by the legal pages and the contact page */
.split { display: grid; gap: var(--sp-600); align-items: start; }
@media (min-width: 900px) { .split { grid-template-columns: 240px minmax(0, 1fr); gap: var(--sp-700); } }
@media (min-width: 900px) { .split--form { grid-template-columns: minmax(0, 1fr) minmax(0, 420px); } }

.panel {
  padding: var(--sp-400);
  border: 1px solid var(--line);
  border-radius: var(--r-3xl);
  background: var(--surface);
}

.pill-row { display: flex; flex-wrap: wrap; gap: var(--sp-75); }
.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-50);
  padding: var(--sp-50) var(--sp-100);
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  background: var(--surface);
  font-size: var(--text-sm);
  line-height: var(--lh-sm);
  color: var(--ink-2);
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.pill:hover { border-color: var(--accent); color: var(--ink); transform: translateY(-2px); }
.pill i { color: var(--accent); }

@media (prefers-reduced-motion: reduce) { .route-dot { animation: none; opacity: 1; } }