/* Brand typeface: Rinter (Thunder Type, free for commercial use) — self-hosted, see ../fonts/README.md */
@font-face {
  font-family: "Rinter";
  src: url("/assets/fonts/Rinter.otf") format("opentype");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

/* =============================================================================
   Abkons wireframes — design tokens
   Source: McCann "Abkons Brand Upgrade & Visual Identity" (2026) + DESIGN-BRIEF.md
   Every colour, font, size, space and timing used by the system lives here.
   ========================================================================== */
:root {
  /* ---- Palette ---------------------------------------------------------- */
  --prussian: #0D132A;   /* Prussian Blue — primary dark, headings, dark bands */
  --aqua: #70CAD0;       /* Pearl Aqua — primary accent, display numbers, links on dark */
  --frosted: #A8E4E9;    /* Frosted Blue */
  --cyan: #E4FDFC;       /* Light Cyan — pale tint backgrounds */
  --icy: #A9CEF4;        /* Icy Blue */
  --platinum: #EBEBEB;   /* header bar, neutral surfaces */
  --willow: #83C17A;     /* sparingly: sustainability accents / success */
  --terracotta: #E2523C; /* the single warm accent: focus, "to confirm", one CTA hover */
  --white: #FFFFFF;
  --navy-2: #142A4A;     /* gradient mid-stop */
  --teal-deep: #1F6E86;  /* gradient mid-stop */
  --aqua-ink: #2B7F86;   /* aqua darkened for small text on light (AA) */

  /* ---- Text ------------------------------------------------------------- */
  --ink: #0D132A;
  --ink-2: rgba(13, 19, 42, .72);
  --ink-3: rgba(13, 19, 42, .52);
  --on-dark: #FFFFFF;
  --on-dark-2: rgba(255, 255, 255, .85);
  --on-dark-3: rgba(255, 255, 255, .62);

  /* ---- Surfaces & hairlines --------------------------------------------- */
  --surface: #FFFFFF;
  --surface-alt: #F4F5F6;               /* very light neutral for alternating bands */
  --rule: rgba(13, 19, 42, .14);        /* 1px hairline on light */
  --rule-strong: rgba(13, 19, 42, .28);
  --rule-dark: rgba(255, 255, 255, .35);/* 1px hairline on dark / on photos */
  --rule-dark-soft: rgba(255, 255, 255, .18);

  /* ---- Gradients -------------------------------------------------------- */
  --grad-signature: linear-gradient(90deg, #A9CEF4 0%, #0D132A 28%, #70CAD0 58%, #A8E4E9 72%, #0D132A 100%);
  --grad-layered: linear-gradient(135deg, #0D132A 0%, #142A4A 45%, #1F6E86 75%, #70CAD0 100%);
  --grad-band: linear-gradient(90deg, #0D132A 0%, #0D132A 40%, #142A4A 66%, #1F6E86 90%, #70CAD0 100%); /* snapshot metric band */
  --grad-hero-scrim: linear-gradient(0deg, rgba(13,19,42,.82) 0%, rgba(13,19,42,.45) 30%, rgba(13,19,42,0) 60%);
  --grad-hero-top: linear-gradient(100deg, rgba(13,19,42,.5) 0%, rgba(13,19,42,.14) 45%, rgba(13,19,42,0) 70%);
  /* homepage (snapshot) variants — added for the high-fidelity home hero / stripe / metrics band */
  --grad-stripe: linear-gradient(90deg, #BFEDFD 0%, #A9CEF4 6%, #0D132A 30%, #1F4A5A 39%, #70CAD0 53%, #74CDD7 61%, #2C4E68 76%, #0D132A 87%, #05070F 100%); /* sampled from the snapshot band */
  /* Sweep version of the stripe: 1.5 periods of [mirrored half | resting half]. With background-size 400% and
     background-position 100% the visible quarter is exactly --grad-stripe; animating 0% -> 100% travels 1.5 periods. */
  --grad-stripe-sweep: linear-gradient(90deg, #05070F 0%, #0D132A 3.25%, #2C4E68 6%, #74CDD7 9.75%, #70CAD0 11.75%, #1F4A5A 15.25%, #0D132A 17.5%, #A9CEF4 23.5%, #BFEDFD 25%, #A9CEF4 26.5%, #0D132A 32.5%, #1F4A5A 34.75%, #70CAD0 38.25%, #74CDD7 40.25%, #2C4E68 44%, #0D132A 46.75%, #05070F 50%, #0D132A 53.25%, #2C4E68 56%, #74CDD7 59.75%, #70CAD0 61.75%, #1F4A5A 65.25%, #0D132A 67.5%, #A9CEF4 73.5%, #BFEDFD 75%, #A9CEF4 76.5%, #0D132A 82.5%, #1F4A5A 84.75%, #70CAD0 88.25%, #74CDD7 90.25%, #2C4E68 94%, #0D132A 96.75%, #05070F 100%);
  --grad-home-scrim: linear-gradient(0deg, rgba(13,19,42,.66) 0%, rgba(13,19,42,.36) 22%, rgba(13,19,42,.06) 40%, rgba(13,19,42,0) 52%);
  --grad-home-top: linear-gradient(100deg, rgba(13,19,42,.26) 0%, rgba(13,19,42,.08) 40%, rgba(13,19,42,0) 60%);
  --grad-band-home: radial-gradient(120% 140% at 100% 100%, rgba(169,206,244,.95) 0%, rgba(112,184,214,.5) 22%, rgba(31,60,110,.25) 42%, rgba(13,19,42,0) 60%),
                    linear-gradient(90deg, #03050F 0%, #070B1E 40%, #0D132A 58%, #142A4A 76%, #3E5F86 90%, #8DB8E6 100%);

  /* Client gradients (Gradients.ai, 21 Oct 2026, pages 1–4). Pure CSS: radial glows over linear bases, colours
     sampled from the artboards (mean error 4–6/255 vs the originals at 754×315). The faceted mesh texture of the
     originals is not reproduced. Usage: g1 About hero (+ grad-mark) · g2 enquiry bands (.inquiry) ·
     g3 default inner hero (.page-hero--dark and the other inner heroes) · g4 landing heroes (.page-hero--g4 + grad-mark). */
  --grad-g1: /* deep navy, aqua glow top-centre, right side to near-black along the mark's diagonal */
    radial-gradient(ellipse 30% 62% at 48% 0%, rgba(126,228,231,1) 0%, rgba(112,202,208,.78) 30%, rgba(90,160,172,.35) 65%, rgba(90,160,172,0) 100%),
    radial-gradient(ellipse 26% 70% at 38% 26%, rgba(70,128,145,.7) 0%, rgba(50,92,112,.42) 45%, rgba(30,50,78,0) 100%),
    radial-gradient(ellipse 22% 48% at 28% 74%, rgba(28,46,76,.55) 0%, rgba(24,38,66,.25) 55%, rgba(20,32,60,0) 100%),
    linear-gradient(126deg, rgba(0,0,0,0) 50%, #000 58%),
    linear-gradient(180deg, #000016 0%, #03041D 55%, #080A24 100%);
  --grad-g2: /* navy left -> black centre -> teal right, pale blue/white glow bottom-right */
    radial-gradient(ellipse 30% 78% at 100% 100%, rgba(185,222,255,1) 0%, rgba(140,178,218,.78) 32%, rgba(80,108,150,.32) 62%, rgba(70,95,140,0) 88%),
    radial-gradient(ellipse 42% 135% at 100% 0%, rgba(116,210,214,1) 0%, rgba(96,170,184,.82) 32%, rgba(40,90,110,.36) 60%, rgba(35,80,100,0) 85%),
    linear-gradient(90deg, rgba(0,0,0,0) 0%, #000 44%),
    linear-gradient(180deg, #111A45 0%, #1E2951 100%);
  --grad-g3: /* navy/black, aqua glow top-right */
    radial-gradient(ellipse 48% 125% at 100% 0%, rgba(114,208,212,1) 0%, rgba(84,148,162,.75) 30%, rgba(40,70,100,.38) 65%, rgba(35,60,90,0) 100%),
    radial-gradient(ellipse 45% 110% at 100% 100%, rgba(40,62,95,.95) 0%, rgba(30,45,80,.45) 55%, rgba(30,45,80,0) 100%),
    linear-gradient(90deg, rgba(0,0,0,0) 0%, #000 46%),
    linear-gradient(180deg, #080A28 0%, #131D33 100%);
  --grad-g4: /* like g1's palette, glows at the right: aqua top-right, pale blue bottom-right */
    radial-gradient(ellipse 36% 80% at 100% 100%, rgba(180,220,255,1) 0%, rgba(130,162,205,.7) 30%, rgba(60,70,112,.32) 65%, rgba(60,70,110,0) 100%),
    radial-gradient(ellipse 36% 95% at 100% 0%, rgba(118,212,218,1) 0%, rgba(84,156,166,.75) 30%, rgba(30,70,85,.38) 65%, rgba(30,70,85,0) 100%),
    linear-gradient(90deg, rgba(0,0,0,0) 10%, #000116 50%),
    linear-gradient(180deg, #0E1930 0%, #151F36 100%);

  /* ---- Typography ------------------------------------------------------- */
  --font-main: "Rinter", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-ui: "Archivo", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;

  /* Fluid scale (base 16px). Display sizes use clamp(min, vw, max). */
  --fs-display: clamp(2.6rem, 6vw, 5.5rem);     /* hero h1 */
  --fs-mega: clamp(2.75rem, 5.6vw, 5.25rem);     /* dark-band display words */
  --fs-h1: clamp(2.3rem, 4.6vw, 4.25rem);        /* inner-page h1 */
  --fs-h2: clamp(1.9rem, 3.4vw, 3.25rem);        /* section titles */
  --fs-h3: clamp(1.35rem, 1.9vw, 1.75rem);       /* card / block titles */
  --fs-h4: clamp(1.125rem, 1.3vw, 1.25rem);
  --fs-num: clamp(2.5rem, 4vw, 3.75rem);         /* 01 02 03 numerals */
  --fs-lead: clamp(1.125rem, 1.35vw, 1.3125rem); /* intro paragraphs */
  --fs-body: 1.0625rem;
  --fs-small: .9375rem;
  --fs-xs: .8125rem;
  --fs-eyebrow: .78rem;

  --lh-tight: 1.02;
  --lh-heading: 1.12;
  --lh-snug: 1.35;
  --lh-body: 1.6;
  --tracking-eyebrow: .12em;
  --tracking-display: -.02em;
  --measure: 68ch;

  /* ---- Spacing (4/8/12/16/24/32/48/64/96/128) ---------------------------- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;  --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;  --s-10: 128px;
  --section-pad: clamp(64px, 9vw, 128px);
  --section-pad-sm: clamp(40px, 5vw, 72px);
  --gutter: clamp(16px, 4vw, 48px);   /* container side padding */
  --gap: clamp(16px, 2.4vw, 32px);    /* grid gap */
  --container: 1320px;
  --container-narrow: 880px;

  /* ---- Header ----------------------------------------------------------- */
  --header-h: 84px;
  --header-h-compact: 64px;
  --stripe-h: 6px;
  --logo-h: 40px;           /* snapshot: logo ~40px at 1440 */
  --nav-pad: 26px;          /* horizontal padding each side of a nav item (≈ 28px to the hairline) */

  /* ---- Shape ------------------------------------------------------------ */
  --radius: 0px;      /* architectural: square corners */
  --radius-xs: 2px;
  --chamfer: clamp(28px, 9%, 72px); /* angled-corner size for masked media */

  /* ---- Motion (see motion.css / data/mottmac-effects.md) ---------------- */
  --ease-out: cubic-bezier(.2, .7, .2, 1);        /* brief: reveal */
  --ease-circ: cubic-bezier(.075, .82, .165, 1);  /* mottmac title wipe */
  --ease-io: ease-in-out;
  --dur-fast: .2s;
  --dur-med: .35s;
  --dur-slow: .65s;
  --dur-title: 2s;
  --stagger-step: 80ms;

  /* ---- Layers ----------------------------------------------------------- */
  --z-header: 50;
  --z-menu: 60;
  --z-drawer: 80;
  --z-skip: 100;

  /* ---- Focus ------------------------------------------------------------ */
  --focus-ring: 2px solid var(--prussian);   /* brand blues for focus/hover; terracotta is reserved for "to confirm" and errors */
  --focus-offset: 3px;
}

@media (max-width: 1439px) {
  :root { --nav-pad: 18px; } /* v1.3 menu has six items + Contact */
}
@media (max-width: 1279px) {
  :root { --nav-pad: 13px; }
}
@media (max-width: 1024px) {
  :root { --header-h: 72px; --logo-h: 34px; }
  /* Narrow screens: text runs the full width of the band, so it crosses the glows. Same composition, glows
     deepened so white text keeps AA (brightest glow pixel ≤ relative luminance ~0.18) and pulled into the corners. */
  :root {
    --grad-g1:
      radial-gradient(ellipse 70% 36% at 62% 0%, rgba(74,130,142,.95) 0%, rgba(60,108,122,.6) 40%, rgba(40,70,95,0) 100%),
      linear-gradient(150deg, rgba(0,0,0,0) 55%, #000 80%),
      linear-gradient(180deg, #000016 0%, #03041D 55%, #0A0E28 100%);
    --grad-g2:
      radial-gradient(ellipse 80% 34% at 100% 100%, rgba(98,122,160,.95) 0%, rgba(80,100,140,.6) 40%, rgba(60,80,120,0) 100%),
      radial-gradient(ellipse 80% 40% at 100% 0%, rgba(70,128,138,.95) 0%, rgba(55,104,116,.6) 40%, rgba(35,80,100,0) 100%),
      linear-gradient(180deg, #111A45 0%, #04071F 45%, #000 70%, #0B1028 100%);
    --grad-g3:
      radial-gradient(ellipse 85% 42% at 100% 0%, rgba(70,128,138,.95) 0%, rgba(55,100,116,.6) 40%, rgba(35,60,90,0) 100%),
      radial-gradient(ellipse 80% 40% at 100% 100%, rgba(40,62,95,.9) 0%, rgba(30,45,80,0) 100%),
      linear-gradient(180deg, #080A28 0%, #000 55%, #0B1028 100%);
    --grad-g4:
      radial-gradient(ellipse 80% 32% at 100% 100%, rgba(98,122,160,.95) 0%, rgba(80,100,140,.55) 40%, rgba(60,70,110,0) 100%),
      radial-gradient(ellipse 80% 38% at 100% 0%, rgba(70,128,138,.95) 0%, rgba(55,104,116,.55) 40%, rgba(30,70,85,0) 100%),
      linear-gradient(180deg, #0E1930 0%, #000116 55%, #151F36 100%);
  }
}
@media (max-width: 640px) {
  :root { --header-h: 64px; --header-h-compact: 56px; --logo-h: 28px; }
}
@media (max-width: 400px) {
  :root { --fs-display: 2.3rem; } /* keeps "Local knowledge." on one line at 360px */
}