@import url("https://fonts.googleapis.com/css2?family=Schibsted+Grotesk:ital,wght@0,400..800;1,400..600&display=swap");

:root {
  --font-sans: "Schibsted Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-display: var(--font-sans);
  --font-ui: var(--font-sans);
}

/* ThruLine color system — sampled from thrulineco.com.
   Three families: warm near-black (ink), paper (cream), and metal (brass →
   gold). Nothing else. Reach for the semantic aliases at the bottom. */
:root {
  /* Ink — warm near-black. Headlines and logo at the top of the ramp; the
     dark full-bleed sections sit at 700/800. */
  --ink-900: #14120f;
  --ink-800: #1e1c18;
  --ink-700: #2a2723;
  --ink-600: #3a362f;
  --ink-500: #4a453d;

  /* Brass — the deep metallic. Primary buttons, links and eyebrows on cream. */
  --brass-800: #574719;
  --brass-700: #6a5722;
  --brass-600: #7c6829;
  --brass-500: #96803a;
  --brass-400: #ab9550;

  /* Gold — the bright metallic. Accents on dark: step numerals, the send
     button, eyebrow text over photography. Too light to sit on cream as text. */
  --gold-500: #c9a63f;
  --gold-400: #d9b855;
  --gold-300: #e4cb83;
  --gold-200: #eeddae;
  --gold-100: #f6ecd2;

  /* Cream — paper. The page is 100; cards go white or 50. */
  --cream-50: #faf8f3;
  --cream-100: #f1eee7;
  --cream-200: #e8e3d8;
  --cream-300: #dad3c4;
  --white: #ffffff;

  /* Stone — warm grays for body copy and hairlines. Never blue-gray. */
  --stone-700: #55524c;
  --stone-600: #6a665f;
  --stone-500: #7c7871;
  --stone-400: #9c978e;
  --stone-300: #bdb8ae;
  --stone-200: #d8d4cb;
  --stone-100: #e9e5dd;

  /* Semantic status. Muted, rarely used — the site itself shows none. */
  --status-positive: #4a6b45;
  --status-caution: var(--brass-600);
  --status-critical: #97402e;
  --status-info: #3f5b63;

  /* ---------- Semantic aliases ---------- */
  --text-strong: var(--ink-900);
  --text-body: var(--stone-700);
  --text-muted: var(--stone-500);
  --text-accent: var(--brass-600);
  --text-on-dark: var(--cream-50);
  --text-on-dark-muted: #c9c4ba;
  --text-accent-on-dark: var(--gold-400);
  --text-on-brass: var(--cream-50);
  --text-on-gold: var(--ink-900);

  --surface-page: var(--cream-100);
  --surface-raised: var(--white);
  --surface-card: var(--white);
  --surface-sunken: var(--cream-200);
  --surface-inverse: var(--ink-700);
  --surface-inverse-deep: var(--ink-800);
  --surface-header: rgba(241, 238, 231, 0.92);

  --border-subtle: var(--stone-100);
  --border-default: var(--cream-300);
  --border-strong: var(--ink-900);
  --border-inverse: rgba(250, 248, 243, 0.28);
  --border-input-dark: rgba(250, 248, 243, 0.16);

  --action-primary: var(--brass-600);
  --action-primary-hover: var(--brass-700);
  --action-primary-active: var(--brass-800);
  --action-gold: var(--gold-400);
  --action-gold-hover: var(--gold-500);
  --action-outline-hover: var(--ink-900);

  --focus-ring: var(--brass-600);
  --rule-line: var(--brass-600);
  --rule-line-on-dark: var(--gold-400);

  /* The bottom scrim that protects text laid over photography. */
  --scrim-image: linear-gradient(to top, rgba(20, 18, 15, 0.92) 0%, rgba(20, 18, 15, 0.72) 26%, rgba(20, 18, 15, 0.12) 58%, rgba(20, 18, 15, 0) 78%); /* @kind other */
  /* The vignette on full-bleed dark sections — never a hue-shifting gradient. */
  --gradient-dark-section: radial-gradient(120% 90% at 78% 12%, #322e29 0%, #2a2723 42%, #1c1a16 100%); /* @kind other */
}

/* One family, three jobs: bold tight headlines, regular body, bold tracked-out
   micro labels. Headline weight is 700 — there is no light or thin weight in
   this brand, and no italics outside quoted material. */
:root {
  --text-display-1: 3.75rem;   /* 60px — hero headline */
  --text-display-2: 2.75rem;   /* 44px — section headline */
  --text-display-3: 2rem;      /* 32px — sub-section, stat value */
  --text-title: 1.375rem;      /* 22px — card title */
  --text-subtitle: 1.25rem;    /* 20px — lead paragraph */
  --text-body: 1.125rem;       /* 18px — default body */
  --text-small: 1rem;          /* 16px */
  --text-caption: 0.875rem;    /* 14px */
  --text-eyebrow: 0.8125rem;   /* 13px — bold, tracked, uppercase */

  --leading-tight: 1.05;
  --leading-display: 1.12;
  --leading-snug: 1.3;
  --leading-body: 1.55;
  --leading-loose: 1.7;

  --tracking-display: -0.025em;
  --tracking-tight: -0.015em;
  --tracking-normal: 0;
  --tracking-eyebrow: 0.16em;
  --tracking-counter: 0.1em;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --measure-prose: 62ch;
  --measure-lead: 44ch;
}

/* 4px base. Sections breathe: 96–128px of vertical air is normal. */
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  --section-y: var(--space-10);
  --section-y-tight: var(--space-9);
  --gutter: var(--space-7);
  --container-max: 1200px;
  --container-narrow: 760px;
  --header-height: 88px;

  /* Radii are generous and soft. Buttons are always fully round; media cards
     are 24–28px; inputs and small surfaces are 8–12px. Nothing is square. */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  --border-width: 1px;
  --border-width-strong: 1.5px;
  --rule-thickness: 2px;
  --rule-length: 28px;
}

/* Elevation is nearly absent. Media cards carry a soft warm drop shadow; flat
   surfaces are defined by a hairline or by contrast, not by shadow. */
:root {
  --shadow-none: none;
  --shadow-xs: 0 1px 2px rgba(20, 18, 15, 0.05);
  --shadow-sm: 0 1px 2px rgba(20, 18, 15, 0.05), 0 2px 8px rgba(20, 18, 15, 0.04);
  --shadow-md: 0 4px 10px rgba(20, 18, 15, 0.06), 0 12px 32px rgba(20, 18, 15, 0.08);
  --shadow-lg: 0 8px 20px rgba(20, 18, 15, 0.08), 0 28px 64px rgba(20, 18, 15, 0.14);
  --shadow-media: 0 18px 48px rgba(20, 18, 15, 0.18);
  --shadow-inset-hairline: inset 0 -1px 0 var(--border-default);
  --shadow-focus: 0 0 0 3px rgba(124, 104, 41, 0.3);

  --overlay-scrim: rgba(20, 18, 15, 0.66);
  --blur-header: saturate(120%) blur(10px); /* @kind other */
}

/* Short, flat, unshowy. Fades and 1–2px lifts; carousels slide horizontally
   with a long ease-out. No bounce, no spring, no scale-in entrances. */
:root {
  --duration-instant: 90ms;  /* @kind other */
  --duration-fast: 160ms;    /* @kind other */
  --duration-base: 240ms;    /* @kind other */
  --duration-slow: 420ms;    /* @kind other */
  --duration-carousel: 620ms; /* @kind other */

  --ease-standard: cubic-bezier(0.2, 0.6, 0.2, 1); /* @kind other */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);       /* @kind other */
  --ease-in: cubic-bezier(0.5, 0, 0.75, 0);        /* @kind other */

  --lift-hover: -1px;
  --press-scale: 0.985; /* @kind other */
}

/* Element defaults. Enough that unstyled markup already reads as ThruLine. */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-body);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  font-weight: var(--weight-bold);
  color: var(--text-strong);
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-display);
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}
h1 { font-size: var(--text-display-1); }
h2 { font-size: var(--text-display-2); }
h3 { font-size: var(--text-display-3); }
h4 { font-size: var(--text-title); letter-spacing: var(--tracking-tight); line-height: var(--leading-snug); }
h5 { font-size: var(--text-subtitle); letter-spacing: var(--tracking-tight); line-height: var(--leading-snug); }
h6 { font-size: var(--text-small); letter-spacing: var(--tracking-tight); }

p { margin: 0 0 var(--space-4); max-width: var(--measure-prose); }

a { color: var(--text-accent); text-decoration: none; font-weight: var(--weight-semibold); transition: color var(--duration-fast) var(--ease-standard), opacity var(--duration-fast) var(--ease-standard); }
a:hover { color: var(--brass-800); }
a:active { color: var(--brass-800); opacity: 0.85; }

strong { font-weight: var(--weight-bold); color: var(--text-strong); }
hr { border: 0; border-top: var(--border-width) solid var(--border-default); margin: var(--space-8) 0; }
::selection { background: var(--gold-200); color: var(--ink-900); }

:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }

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


* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
  body { margin: 0; background: var(--cream-50); font-family: var(--font-sans); overflow-x: hidden; }
  a { color: var(--brass-600); text-decoration: none; }
  a:hover { color: var(--brass-800); }

  @keyframes tl-line {
    0%   { transform: translateY(17%) rotate(0deg) scaleY(0); animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
    15%  { transform: translateY(17%) rotate(0deg) scaleY(1.19); }
    60%  { transform: translateY(17%) rotate(0deg) scaleY(1.19); animation-timing-function: cubic-bezier(0.5, 0, 0.2, 1); }
    78%  { transform: translateY(0%) rotate(90deg) scaleY(1); }
    100% { transform: translateY(0%) rotate(90deg) scaleY(1); }
  }
  @keyframes tl-left  { 0%, 24% { opacity: 0; transform: translateX(-38px); } 50%, 100% { opacity: 1; transform: translateX(0); } }
  @keyframes tl-right { 0%, 27% { opacity: 0; transform: translateX(38px); }  53%, 100% { opacity: 1; transform: translateX(0); } }
  @keyframes tl-dot   { 0%, 13% { opacity: 0; transform: translateY(-13px); } 22%, 100% { opacity: 1; transform: translateY(0); } }
  @keyframes tl-out   { 0% { opacity: 1; } 99% { opacity: 0; } 100% { opacity: 0; visibility: hidden; } }
  @media (max-width: 760px) { [data-nav-links] { display: none !important; } }
  @keyframes tl-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* --- 2026 redesign: page-level rules --- */
@keyframes tl-mark { 0% { opacity: 0; transform: translateY(10px); } 60%, 100% { opacity: 1; transform: translateY(0); } }
@keyframes tl-rule { 0% { transform: scaleX(0); } 70%, 100% { transform: scaleX(1); } }
@keyframes tl-out { 0% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } }
@keyframes tl-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (max-width: 860px) { [data-nav-links] { display: none !important; } }
@media (prefers-reduced-motion: reduce) { [data-marquee] { animation: none !important; } }
button { font-family: var(--font-sans); cursor: pointer; }
select, input, textarea { font-family: var(--font-sans); }

.hov-1:hover { color: #FEFDFB !important }
.hov-2:hover { color: #FEFDFB !important }
.hov-3:hover { color: #FEFDFB !important }
.hov-4:hover { color: #FEFDFB !important }
.hov-5:hover { background: #C9A63F !important; color: #1A1613 !important }
.hov-6:hover { background: #C9A63F !important; color: #1A1613 !important }
.hov-7:hover { background: #FEFDFB !important; color: #1A1613 !important; border-color: #FEFDFB !important }
.hov-8:hover { color: var(--brass-800) !important }
.hov-9:hover { color: var(--brass-800) !important }
.hov-10:hover { background: var(--gold-500) !important; color: var(--ink-900) !important }
.hov-11:hover { background: var(--gold-500) !important }
.hov-12:hover { color: var(--cream-50) !important }
.hov-13:hover { color: var(--cream-50) !important }