/* ============================================================
   AUGMENT — Shared Design Tokens  (one source of truth)
   Brand type: NEUE POWER (display) + ARTIFIC (body), per the
   Figma BRAND GUIDELINES page (frames 32 / 36). Colour from
   frame 46 (COLOUR PALETTE). Linked by the master one-pager so
   every section stays cohesive in colour, type & rhythm.
   ============================================================ */

/* ---------- LICENSED WEBFONTS · Power Type Foundry ----------
   Only the SIX cuts the agency licensed are declared. The trial
   package shipped twelve; the other six were never used by any rule
   and are gone — declaring a face we have no licence for would put
   it on the CDN for anyone to pull down.

   NOTE the weight mapping is deliberate, not conventional: 600 is
   Neue Power BOLD (not SemiBold) and 700 is HEAVY (not Bold). The
   design uses the heavier end of the family, so the scale is shifted
   up one step. Don't "correct" these numbers — the whole site is
   written against them.

   No italic/oblique faces are declared: two rules use font-style
   :italic and the browser synthesises them by slanting the roman.
   The obliques came bundled with the purchase if we ever want them.
   ---------------------------------------------------------------- */

/* ---------- NEUE POWER — display / headlines ---------- */
@font-face{font-family:'Neue Power';src:url('../fonts/NeuePower-Bold.woff2')  format('woff2');font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:'Neue Power';src:url('../fonts/NeuePower-Heavy.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:'Neue Power';src:url('../fonts/NeuePower-Ultra.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap;}

/* ---------- ARTIFIC — body / UI ---------- */
@font-face{font-family:'Artific';src:url('../fonts/Artific-Regular.woff2')  format('woff2');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Artific';src:url('../fonts/Artific-Medium.woff2')   format('woff2');font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:'Artific';src:url('../fonts/Artific-SemiBold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;}

:root{
  /* ---- Brand colour (Figma frame 46 — COLOUR PALETTE) ---- */
  --c-cyan:#00D8FF;       /* signature accent — footer + capabilities box */
  --c-cyan-deep:#00ADCC;  /* ~20% darker companion, kept in the same hue */
  --c-ink:#1D1E1D;        /* primary dark bg / text */
  --c-ink-2:#141514;
  --c-black:#0B0B0B;
  --c-g1:#727272;         /* header bg + gradient TOP */
  --c-g2:#ABABAB;
  --c-g3:#D6D6D6;
  --c-white:#FFFFFF;
  --c-paper:#F3F3F1;
  --c-red:#FF2D2D;        /* viewfinder bracket accent */

  /* gradient endpoints for sections 6→8 (capabilities → team) */
  --grad-top:#727272;     /* top of capabilities */
  --grad-bot:#1D1E1D;     /* just before the footer */

  /* ---- Type families ---- */
  --font-display:'Neue Power','Archivo','Helvetica Neue',system-ui,sans-serif;
  --font-sans:'Artific','Inter','Helvetica Neue',system-ui,sans-serif;
  --font-grotesk:'Artific','Inter',system-ui,sans-serif;
  --font-mono:ui-monospace,'SF Mono','SFMono-Regular',Menlo,'Roboto Mono',monospace;

  /* ---- Fluid type scale (consistent H-ramp; same value used everywhere) ---- */
  --fs-mega:clamp(4rem,19vw,22rem);        /* off-canvas AUGMT wordmarks */
  --fs-display:clamp(2.4rem,7.6vw,7.6rem); /* hero "A DISRUPTIVE FORCE…" (sized so the longer line fits) */
  --fs-h1:clamp(2.2rem,5.2vw,4.6rem);      /* MEET THE TEAM / PORTFOLIOS */
  --fs-h2:clamp(1.7rem,3.3vw,3rem);        /* CAPABILITIES… / section heads */
  --fs-h3:clamp(1.15rem,1.55vw,1.6rem);    /* row titles */
  --fs-body:clamp(1rem,1.05vw,1.18rem);
  --fs-small:0.92rem;
  --fs-label:0.72rem;

  /* ---- Spacing rhythm ---- */
  --s-1:0.25rem; --s-2:0.5rem; --s-3:0.75rem; --s-4:1rem; --s-5:1.5rem;
  --s-6:2rem; --s-7:3rem; --s-8:4rem; --s-9:6rem; --s-10:8rem; --s-11:12rem;
  --gutter:clamp(1.25rem,4.4vw,4.5rem);    /* page side margin (ruler) */
  --maxw:1512px;                            /* content frame width */
  --sec-pad:clamp(4.5rem,9vh,9rem);         /* vertical breathing per section */

  /* ---- Radius / misc ---- */
  --r-sm:6px; --r:12px; --r-lg:22px; --r-xl:34px; --r-pill:999px;
  --line:1px solid color-mix(in srgb, var(--c-g1) 38%, transparent);
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.5,0,.2,1);
}

/* ============================================================
   ULTRA-WIDE — scale the whole composition up so the 1512px frame
   doesn't strand in a sea of empty space on 21:9 / 32:9 displays.
   Bumping the root font-size grows everything rem-based in lockstep
   (the whole type ramp, spacing rhythm, gutters, ch-measures), while
   --maxw widens to match. Full-bleed elements (logo marquees, globe,
   the TEAM strip, the footer wordmark) already track the viewport.
   min-width only → phones and standard ≤16:9 desktops are untouched.
   ============================================================ */
@media (min-width:1700px){ :root{ --maxw:1640px; } html{ font-size:16.5px; } }
@media (min-width:2000px){ :root{ --maxw:1820px; } html{ font-size:17.5px; } }
@media (min-width:2400px){ :root{ --maxw:2000px; } html{ font-size:18.5px; } }
@media (min-width:2900px){ :root{ --maxw:2240px; } html{ font-size:20px;   } }
@media (min-width:3600px){ :root{ --maxw:2520px; } html{ font-size:21.5px; } }

/* ---- Reset ---- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
/* Lenis smooth-scroll: it owns the scroll position, so disable native smooth
   to avoid the two fighting; keep regions tagged [data-lenis-prevent] independent */
html.lenis,html.lenis body{height:auto;}
.lenis.lenis-smooth{scroll-behavior:auto!important;}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain;}
.lenis.lenis-stopped{overflow:hidden;}
.lenis.lenis-smooth iframe{pointer-events:none;}
body{
  font-family:var(--font-sans);
  font-size:var(--fs-body);
  line-height:1.5;
  color:var(--c-ink);
  background:var(--c-ink);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;line-height:.96;letter-spacing:-0.015em}
::selection{background:var(--c-cyan);color:var(--c-ink)}

/* ---- Shared utilities ---- */
.u-label{font-family:var(--font-mono);font-size:var(--fs-label);letter-spacing:.16em;text-transform:uppercase;color:var(--c-g1);}
.u-rule{height:1px;width:100%;background:color-mix(in srgb,currentColor 22%,transparent)}
.u-container{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}

/* Red focus brackets — brand "viewfinder" device */
.u-bracket{position:relative}
.u-bracket::before,.u-bracket::after{content:"";position:absolute;width:26px;height:26px;border:2px solid var(--c-red);}
.u-bracket::before{top:-6px;left:-6px;border-right:0;border-bottom:0}
.u-bracket::after{bottom:-6px;right:-6px;border-left:0;border-top:0}

/* Honour reduced motion everywhere */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* ============================================================
   PAGE TRANSITIONS — veil hand-off (nav-transition.js)
   Cross-document View Transitions can't be used here: cleanUrls
   308-redirects portfolio.html → /portfolio, and view transitions
   are abandoned across redirects. So instead a dark veil fades over
   the current page before an internal link resolves; the incoming
   page then plays its own content reveal from that same dark. Result
   is one smooth hand-off on every navigation — home → case study,
   case study → case study, and back — with no hard cut or flash.
   ============================================================ */
#ptVeil{position:fixed;inset:0;z-index:9500;background:var(--c-ink);opacity:0;
  pointer-events:none;will-change:opacity;transition:opacity .32s var(--ease);}
html.pt-leaving #ptVeil{opacity:1;}