@import url("https://fonts.googleapis.com/css2?family=Caveat:wght@500;600;700&family=Montserrat:wght@300;400;500;600;700;800;900&family=Poppins:wght@200;300;400;500;600;700&family=Sacramento&display=swap");
@import url("nav.css?v=18");
@font-face{font-family:"Cinzel";font-weight:400 900;font-style:normal;font-display:swap;src:url("../fonts/Cinzel-VariableFont_wght.ttf") format("truetype");}
@font-face{font-family:"Castoro";font-weight:400;font-style:normal;font-display:swap;src:url("../fonts/Castoro-Regular.ttf") format("truetype");}
@font-face{font-family:"Castoro";font-weight:400;font-style:italic;font-display:swap;src:url("../fonts/Castoro-Italic.ttf") format("truetype");}

/* ============================================================
 * Ted Saunders — Personal Brand
 * Colors, typography, gradients, shadows, and semantic tokens.
 * ============================================================ */

/* cyrillic-ext */

/* cyrillic */

/* vietnamese */

/* latin-ext */

/* latin */

/* cyrillic-ext */

/* cyrillic */

/* vietnamese */

/* latin-ext */

/* latin */

/* cyrillic-ext */

/* cyrillic */

/* vietnamese */

/* latin-ext */

/* latin */

/* cyrillic-ext */

/* cyrillic */

/* vietnamese */

/* latin-ext */

/* latin */

/* cyrillic-ext */

/* cyrillic */

/* vietnamese */

/* latin-ext */

/* latin */

/* cyrillic-ext */

/* cyrillic */

/* vietnamese */

/* latin-ext */

/* latin */

/* cyrillic-ext */

/* cyrillic */

/* vietnamese */

/* latin-ext */

/* latin */

/* devanagari */

/* latin-ext */

/* latin */

/* devanagari */

/* latin-ext */

/* latin */

/* devanagari */

/* latin-ext */

/* latin */

/* devanagari */

/* latin-ext */

/* latin */

/* devanagari */

/* latin-ext */

/* latin */

/* devanagari */

/* latin-ext */

/* latin */



/* Local brand font — Cinzel (uploaded by user, replaces Google CDN copy) */








:root {
  /* ----------------------------------------------------------
   * BRAND COLORS  —  the documented palette
   * (Signature Style page · "Brand Color Palette")
   * ---------------------------------------------------------- */

  /* Base — 60% of any composition (backgrounds, frames) */
  --c-black:           #000000;
  --c-midnight-slate:  #1D252D;
  --c-stormy-blue:     #415462;
  --c-linen:           #F5EDE3;

  /* Primary — 30% (foundational identity hues) */
  --c-soft-turquoise:  #52AAA5;
  --c-espresso:        #5A3419;
  --c-espresso-deep:   #221B0F;   /* used as section dark bg */

  /* Accent — 10% (warmth + pop) */
  --c-orange:          #D95F10;
  --c-harvest-gold:    #D89733;
  --c-butter:          #F6D36B;
  --c-cream:           #FFEACA;   /* warm parchment text */
  --c-cream-deep:      #FFF0D9;

  /* Bronze gradient stops — used on buttons, dividers, the
     gold triangle, type-fills, quote-marks, etc. The signature
     visual flourish of the brand. */
  --c-bronze-1: #BF8753;
  --c-bronze-2: #FAC288;
  --c-bronze-3: #C9915C;
  --c-bronze-4: #D39B65;
  --c-bronze-5: #AB7442;

  /* Borders / hairlines */
  --c-hairline:       #D19D63;     /* the warm gold hairlines bracketing sections */
  --c-hairline-soft:  rgba(209,157,99,0.4);

  /* ----------------------------------------------------------
   * SEMANTIC SURFACE / TEXT TOKENS
   * ---------------------------------------------------------- */
  --bg:             var(--c-black);
  --bg-elev:        #12161B;         /* slightly lifted dark */
  --bg-deep:        #0E191F;
  --bg-light:       #FFFFFF;         /* used in brand guide */
  --bg-warm:        var(--c-linen);

  --fg:             #FFFFFF;
  --fg-muted:       var(--c-cream);
  --fg-dim:         rgba(255,255,255,0.6);
  --fg-on-light:    #0E191F;

  --border:         rgba(255,255,255,0.12);
  --border-warm:    var(--c-hairline);

  /* ----------------------------------------------------------
   * SIGNATURE GRADIENTS
   * ---------------------------------------------------------- */

  /* The "bronze magic" — directional polished-metal sheen.
     Use on: primary buttons, the play triangle, quote marks,
     stat-label gold accents, dividers. */
  --grad-bronze: linear-gradient(
    135deg,
    #BF8753 1%,
    #FAC288 20%,
    #C9915C 35%,
    #FAC288 55%,
    #BF8753 69%,
    #D39B65 87%,
    #AB7442 100%
  ); /* @kind color */

  /* The "butter → bronze" — softer, used on light buttons
     ("Explore the Work", "View Full Case Study"). */
  --grad-butter-bronze: linear-gradient(180deg, #FFF2C6 0%, #BD8332 100%); /* @kind color */

  /* Espresso aura — the warm radial wash bleeding through dark
     sections. Applied behind the hero and feature panels. */
  --grad-espresso-aura: radial-gradient(
    60% 80% at 50% 0%,
    rgba(90,52,25,0.65) 0%,
    rgba(90,52,25,0) 70%
  ); /* @kind color */

  /* Vignette — fade content to pure black at the bottom of a
     full-bleed image. */
  --grad-vignette-bottom: linear-gradient(180deg, rgba(0,0,0,0) 0%, #000 100%); /* @kind color */
  --grad-vignette-top:    linear-gradient(180deg, #000 0%, rgba(0,0,0,0) 60%); /* @kind color */

  /* ----------------------------------------------------------
   * TYPOGRAPHY  —  three families, three voices
   *
   *  Cinzel    → display / poster / headline ("WEILDING MAGIC")
   *  Montserrat → eyebrow labels, nav, buttons, captions
   *               (substituted for proprietary Gotham + Mont)
   *  Poppins   → body, testimonial, stat numerals
   * ---------------------------------------------------------- */
  --font-display: "Castoro", "Cinzel", "Trajan Pro", "Times New Roman", serif;
  --font-sans:    "Montserrat", "Gotham", "Helvetica Neue", system-ui, sans-serif;
  --font-body:    "Poppins", "Helvetica Neue", system-ui, sans-serif;
  --font-serif:   "Castoro", "Cinzel", "Times New Roman", serif;

  /* Type scale (1920 design width) */
  --t-hero:       149px;   /* Cinzel · the brand wordmark moment */
  --t-display-1:  96px;    /* "Through film" */
  --t-display-2:  48px;    /* "The boy who brought…" / section H1 */
  --t-stat:       102.5px; /* Poppins ExtraLight numerals */
  --t-h1:         34px;    /* "Photography" archive tiles */
  --t-h2:         29px;    /* "Stories that dare…" */
  --t-eyebrow:    24px;    /* DIRECTOR · PHILOSOPHER · ARCHITECT */
  --t-body:       24px;    /* Poppins · hero body */
  --t-button:     20px;    /* Gotham Bold · CTA labels */
  --t-meta:       20px;    /* dates, captions */

  /* Tracking */
  --track-display:  -0.022em;
  --track-eyebrow:   0.130em;   /* the wide D I R E C T O R spacing */
  --track-display-body: 0.020em;

  /* ----------------------------------------------------------
   * SPACING (8px base)
   * ---------------------------------------------------------- */
  --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;

  /* Radii — corners are very subtle in this brand */
  --r-xs: 3px;
  --r-sm: 8px;
  --r-md: 16px;
  --r-lg: 19px;     /* archive cards */
  --r-xl: 24px;     /* video player frame */
  --r-pill: 999px;

  /* Shadows — soft, warm, gold-tinted */
  --shadow-card:      0px 12px 40px rgba(0,0,0,0.05);
  --shadow-glow-gold: 0px 1px 30px rgba(240,170,64,0.16);
  --shadow-stat-gold: 0px 4px 24px rgba(232,170,101,0.49);
  --shadow-display:   0px 4px 19px rgba(0,0,0,1);
}

/* ============================================================
 *  SEMANTIC TYPE RULES
 *  Use these classes instead of hand-rolling sizes.
 * ============================================================ */

.t-hero {
  font-family: var(--font-display);
  font-size: var(--t-hero);
  line-height: 0.92;
  letter-spacing: var(--track-display);
  text-transform: uppercase;
  color: var(--fg);
}

.t-display-1 {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--t-display-1);
  line-height: 1;
  color: var(--fg);
}

.t-display-2 {
  font-family: var(--font-display);
  font-size: var(--t-display-2);
  line-height: 0.92;
  letter-spacing: var(--track-display-body);
  text-transform: uppercase;
  color: var(--fg);
}

.t-eyebrow {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--t-eyebrow);
  line-height: 1;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--fg);
}

.t-eyebrow-gold {
  composes: t-eyebrow;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  background: var(--grad-bronze);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

.t-body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--t-body);
  line-height: 1.5;
  color: var(--fg-muted);
}

.t-stat {
  font-family: var(--font-body);
  font-weight: 200;
  font-size: var(--t-stat);
  line-height: 1;
  background: var(--grad-bronze);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

.t-stat-label {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.4;
  color: var(--c-cream);
}

.t-meta {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--t-meta);
  opacity: 0.73;
  color: var(--c-cream);
}

.t-quote-body {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.5;
  color: var(--fg);
}

.t-nav {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 20px;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg);
}

.t-button {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--t-button);
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* ============================================================
 * Ted Saunders — Website Kit · components.css
 * Hero matched 1:1 to "Header v2 — Futurism.png"
 * ============================================================ */

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: #000;

/* ---- Global cursor spotlight ---- */
/* A subtle warm gold radial follows the cursor everywhere on the page.
   The vars --glow-x / --glow-y / --glow-xp are set on <html> by OriginalIP's
   pointermove listener (fires once, lives for the whole session). */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: 9999;
  pointer-events: none;
  background: radial-gradient(
    600px 600px at calc(var(--glow-x, -9999) * 1px) calc(var(--glow-y, -9999) * 1px),
    rgba(201, 162, 75, 0.055) 0%,
    rgba(201, 162, 75, 0.018) 38%,
    transparent 70%
  );
  transition: background 0.08s linear;
}
  color: var(--fg);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.site { width: 100%; overflow-x: hidden; }

/* ============================================================
 *  RESPONSIVE SCALE WRAPPER
 *  The entire site is laid out at a 1920px design width with
 *  fixed pixel values. .tk-scaler shrinks (or grows) the stage
 *  proportionally so the design stays pixel-perfect at any
 *  viewport width.
 * ============================================================ */
.tk-scaler {
  position: relative;
  width: 100vw;
  overflow: hidden;
  background: #000;
}
.tk-stage {
  width: 1920px;
  transform-origin: top left;
}

/* ============================================================
 *  HERO — full-bleed video, content overlay, 1920 design width
 * ============================================================ */
.tk-hero {
  position: relative;
  width: 1920px;
  height: 1430px;
  background: #000;
  overflow: hidden;
  isolation: isolate;
}

.tk-hero__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
}

/* Side + bottom vignette so the type stays luminous against the room */
.tk-hero__vignette {
  position: absolute; inset: 0; z-index: 1;
  pointer-events: none;
  background:
    /* left curtain */
    linear-gradient(90deg,  #000 0%, rgba(0,0,0,0.85) 6%, rgba(0,0,0,0) 22%),
    /* right curtain */
    linear-gradient(270deg, #000 0%, rgba(0,0,0,0.85) 6%, rgba(0,0,0,0) 22%),
    /* bottom fade to black for stats area */
    linear-gradient(180deg, rgba(0,0,0,0) 52%, rgba(0,0,0,0.85) 78%, #000 100%),
    /* top brown wash */
    linear-gradient(180deg, rgba(13,9,5,0.55) 0%, rgba(0,0,0,0) 30%);
}

/* Centered black wash behind the text stack — subtle, no blur,
   feathered ellipse so the video still breathes. */
.tk-hero__veil {
  position: absolute;
  z-index: 2;
  left: 8%; right: 8%;
  top: 500px;
  height: 600px;
  background: radial-gradient(ellipse closest-side at center,
              rgba(0,0,0,0.55) 0%,
              rgba(0,0,0,0.30) 50%,
              rgba(0,0,0,0)    100%);
  pointer-events: none;
}

.tk-hero__content {
  position: relative; z-index: 3;
  width: 100%; height: 100%;
}

/* ----- Corner reticles (white L-brackets) — hidden per client request ----- */
.tk-hero__reticles { position: absolute; inset: 0; z-index: 3; pointer-events: none; display: none; }
.tk-hero__reticles .r {
  position: absolute;
  width: 64px; height: 64px;
}
.tk-hero__reticles .tl { top:  124px; left:  226px; border-top: 2px solid #fff; border-left: 2px solid #fff; }
.tk-hero__reticles .tr { top:  124px; right: 226px; border-top: 2px solid #fff; border-right: 2px solid #fff; }
.tk-hero__reticles .bl { top:  920px; left:  226px; border-bottom: 2px solid #fff; border-left: 2px solid #fff; }
.tk-hero__reticles .br { top:  920px; right: 226px; border-bottom: 2px solid #fff; border-right: 2px solid #fff; }

/* ----- HEADER + NAV + Portfolio mega-menu ----- moved to src/nav.css
   (single source, @imported at the top of this file). ----- */

/* ----- CENTER STACK ----- */
.tk-hero__center {
  position: absolute;
  left: 0; right: 0; top: 540px;
  z-index: 3;
  display: flex; flex-direction: column; align-items: center;
  padding: 0 226px;
}

/* Credits sit just above WEILDING MAGIC, centered, with bronze
   bullets between each role. */
.tk-hero .credits {
  display: flex; gap: 28px;
  align-items: center; justify-content: center;
  margin-bottom: 22px;
}
.tk-hero .credits span {
  font-family: var(--font-sans);
  font-size: 22px; line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
  font-weight: 400;
}
.tk-hero .credits .c-architect { font-weight: 400; }
.tk-hero .credits .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--grad-bronze);
  box-shadow: 0 0 14px rgba(232,170,101,0.55);
}

/* WEILDING MAGIC — bronze gradient text fill, Cinzel */
.tk-hero .wordmark {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 104px;
  line-height: 0.92;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  text-align: center;
  margin: 0;
  background: linear-gradient(180deg,
    #F7DBA0 0%,
    #E8B777 18%,
    #D29B5A 40%,
    #C18548 62%,
    #A26A30 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
  text-shadow: 0 2px 30px rgba(0,0,0,0.6);
  filter: drop-shadow(0 4px 18px rgba(0,0,0,0.5));
}

/* THROUGH FILM — Montserrat thin + black, all caps */
.tk-hero .through {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 62px;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-align: center;
  color: #fff;
  margin: 8px 0 0;
  text-shadow: 0 2px 24px rgba(0,0,0,0.5);
}
.tk-hero .through .film {
  font-weight: 900;
  margin-left: 30px;
  letter-spacing: 0;
  display: inline-flex;
  align-items: baseline;
  text-transform: uppercase;
}
.tk-hero .through .film-text {
  display: inline-block;
  min-width: 1ch;
}
/* "Magic" dissolve between words — blur + golden bloom + upward drift */
.tk-hero .through .film-magic {
  transition:
    opacity 700ms ease,
    filter 700ms ease,
    transform 700ms cubic-bezier(0.2, 0.7, 0.2, 1),
    letter-spacing 700ms ease,
    text-shadow 700ms ease;
  will-change: opacity, filter, transform;
}
.tk-hero .through .film-magic.is-in {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0) scale(1);
  letter-spacing: 0;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.5);
}
.tk-hero .through .film-magic.is-out {
  opacity: 0;
  filter: blur(12px);
  transform: translateY(-10px) scale(1.14);
  letter-spacing: 0.16em;
  text-shadow:
    0 0 18px rgba(246, 211, 107, 0.9),
    0 0 44px rgba(246, 211, 107, 0.55);
}
@media (prefers-reduced-motion: reduce) {
  .tk-hero .through .film-magic { transition: opacity 300ms ease; }
  .tk-hero .through .film-magic.is-out { filter: none; transform: none; letter-spacing: 0; }
}

/* Body subhead */
.tk-hero .subhead {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.5;
  color: #fff;
  text-align: center;
  max-width: 880px;
  margin: 68px auto 0;
  text-shadow: 0 1px 12px rgba(0,0,0,0.6);
}

/* Hero CTAs */
.tk-hero .actions {
  display: flex; gap: 28px;
  justify-content: center;
  margin: 30px 0 0;
}

/* ----- STATS ROW (left-aligned 4 cols, inside the hero) ----- */
.tk-hero__stats {
  position: absolute;
  left: 0; right: 0;
  bottom: 196px;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  padding: 0 226px;
}
.tk-stat { text-align: center; }
.tk-stat .num {
  font-family: var(--font-body);
  font-weight: 200;
  font-size: 102px;
  line-height: 1;
  background: linear-gradient(180deg,
    #F7DBA0 0%, #E8B777 30%, #D29B5A 60%, #B4823E 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
  text-shadow: 0 4px 24px rgba(232,170,101,0.30);
  filter: drop-shadow(0 2px 18px rgba(232,170,101,0.18));
}
.tk-stat .lbl {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 22px;
  line-height: 1.3;
  color: var(--c-cream);
  margin-top: 6px;
}

/* ----- TEDIVIDER (the hairlines + monogram disc at the hero's
   lower edge — sits under the stats, above the press marquee) ----- */
.tk-hero__divider {
  position: absolute;
  left: 0; right: 0;
  bottom: 64px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 0 226px;
}
.tk-hero__divider .rule {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg,
    rgba(209,157,99,0) 0%,
    rgba(209,157,99,0.9) 12%,
    rgba(209,157,99,0.9) 88%,
    rgba(209,157,99,0) 100%);
}
.tk-hero__divider .disc {
  width: 96px; height: 96px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: transparent;
  position: relative;
}
.tk-hero__divider .disc img {
  position: absolute;
  height: 92%; width: 92%;
  object-fit: contain;
  left: 4%; top: 4%;
  /* standalone compass emblem — centered & contained in the disc */
}

/* ============================================================
 *  BUTTONS
 * ============================================================ */
.tk-btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-sans);
  font-weight: 700; font-size: 20px;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  border: 0; cursor: pointer;
  height: 60px;
  padding: 0 36px;
  width: 312px;
  transition: transform 80ms ease, filter .35s ease;
}
.tk-btn:active { transform: scale(0.97); }

/* Butter → Bronze vertical — primary hero CTA, black text.
   Enhanced: luminous 3-stop fill, warm glow, metallic shimmer sweep
   so the primary CTA reads as the page's most clickable element. */
.tk-btn--bronze {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255,246,220,0.7) 0%, rgba(248,201,142,0.7) 40%, rgba(189,131,50,0.72) 100%),
    url("../assets/heading-texture.jpg") center / cover;
  color: #1A0E03;
  box-shadow:
    0 5px 20px rgba(191,135,83,0.45),
    inset 0 0 0 1px rgba(255,234,190,0.55);
  transition: transform 80ms ease, filter .35s ease, box-shadow .35s ease;
}
.tk-btn--bronze:hover {
  filter: brightness(1.05);
  box-shadow:
    0 7px 30px rgba(232,170,101,0.70),
    inset 0 0 0 1px rgba(255,242,198,0.85);
}
/* Shimmer sweep — a light raking across the button to prompt a click */
.tk-btn--bronze::after {
  content: ""; position: absolute; top: 0; left: 0; z-index: 1;
  width: 55%; height: 100%; pointer-events: none;
  background: linear-gradient(100deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.55) 50%,
    rgba(255,255,255,0) 100%);
  transform: translateX(-180%) skewX(-18deg);
  animation: bronzeShimmer 4.2s ease-in-out infinite;
}
@keyframes bronzeShimmer {
  0%   { transform: translateX(-180%) skewX(-18deg); }
  58%  { transform: translateX(320%)  skewX(-18deg); }
  100% { transform: translateX(320%)  skewX(-18deg); }
}
@media (prefers-reduced-motion: reduce) {
  .tk-btn--bronze::after { animation: none; opacity: 0; }
}

/* Turquoise → Stormy Blue — header top-right CTA, white text */
.tk-btn--turquoise {
  background: linear-gradient(180deg, #6FC8C2 0%, #3F5D6E 100%);
  color: #fff;
}
.tk-btn--turquoise:hover { filter: brightness(1.06); }

/* Thin gold border — "View the Reel" / similar */
.tk-btn--gold-outline {
  background: transparent;
  border: 1.5px solid #D19D63;
  color: #fff;
  height: 60px;
  gap: 12px;
  position: relative;
  overflow: hidden;
}
.tk-btn--gold-outline:hover { background: rgba(209,157,99,0.10); }
/* Play glyph — gold triangle in a thin ring, nudging the click */
.reel-play {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  border: 1.5px solid rgba(209,157,99,0.85);
  flex: 0 0 auto; position: relative; z-index: 2;
  transition: background .3s ease, box-shadow .3s ease;
}
.reel-play svg { margin-left: 1px; display: block; }
.tk-btn--gold-outline:hover .reel-play {
  background: rgba(209,157,99,0.18);
  box-shadow: 0 0 14px rgba(209,157,99,0.4);
}
.tk-btn--gold-outline > * { position: relative; z-index: 2; }
/* Shimmer sweep — a light raking across the button to prompt a click */
.tk-btn--gold-outline::after {
  content: ""; position: absolute; top: 0; left: 0; z-index: 1;
  width: 60%; height: 100%; pointer-events: none;
  background: linear-gradient(100deg,
    rgba(255,231,184,0) 0%,
    rgba(255,231,184,0.28) 50%,
    rgba(255,231,184,0) 100%);
  transform: translateX(-180%) skewX(-18deg);
  animation: reelShimmer 3.6s ease-in-out infinite;
}
@keyframes reelShimmer {
  0%   { transform: translateX(-180%) skewX(-18deg); }
  55%  { transform: translateX(280%)  skewX(-18deg); }
  100% { transform: translateX(280%)  skewX(-18deg); }
}
@media (prefers-reduced-motion: reduce) {
  .tk-btn--gold-outline::after { animation: none; opacity: 0; }
}

/* Legacy 3px dark slate outline (kept for other surfaces) */
.tk-btn--outline {
  background: transparent;
  border: 3px solid #383A4C;
  color: #fff;
  height: 56px;
}
.tk-btn--outline:hover { background: rgba(255,255,255,0.04); }

/* ============================================================
 *  REST OF SITE — preserved from previous build,
 *  used by Director / FeatureVideo / Archive / Footer
 * ============================================================ */

/* ============================================================
 *  PRESS + DIRECTOR section ("Visionary Director")
 *  Layered cinema-still feel:
 *  ┌────────────────────────────────────────────┐
 *  │   ⬚  press marquee (top)                  │
 *  │                                            │
 *  │   ┌── base image (vignetted)              │
 *  │   │  + lamp pattern (warm spill)          │
 *  │   │  + cutout (sharp Ted)        ▎ TEXT  │
 *  │   └──                                     │
 *  └────────────────────────────────────────────┘
 * ============================================================ */
.tk-press-section {
  position: relative;
  background: #000;
  padding: 110px 0 36px;
  overflow: hidden;
}

.tk-press { display: flex; overflow: hidden; }
.tk-press .marquee {
  display: flex; gap: 96px;
  align-items: center;
  opacity: 0.40;
  filter: grayscale(1) invert(1) brightness(1.4);
  white-space: nowrap;
  animation: marquee 40s linear infinite;
  min-width: 200%;
}
.tk-press img { height: 40px; flex-shrink: 0; }
@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ----- DIRECTOR row ----- */
.tk-director {
  position: relative;
  width: 1920px;
  margin-top: 80px;
  min-height: 1240px;
  padding: 0 64px 0 64px;
}

.tk-figure {
  position: absolute;
  left: 150px; top: 0;
  width: 1340px;
  height: 100%;          /* spans the full director row */
  z-index: 1;
  overflow: hidden;
}
/* Fades on every edge — strong on the right so the copy stays
   readable where the image runs underneath it, gentle elsewhere
   so the subject in the middle-left stays bright. */
.tk-figure::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, #000 0%, rgba(0,0,0,0) 16%),   /* top */
    linear-gradient(0deg,   #000 0%, rgba(0,0,0,0) 24%),   /* bottom */
    linear-gradient(90deg,  #000 0%, rgba(0,0,0,0) 12%),   /* left */
    linear-gradient(270deg, #000 0%, rgba(0,0,0,0.55) 30%, rgba(0,0,0,0) 58%);   /* right (under text) */
  z-index: 2;
  pointer-events: none;
}
.tk-figure img {
  display: block;
  width: 100%; height: 100%;
  object-fit: contain;
  object-position: 50% 45%;
  transform: scale(1.05);
  transform-origin: 50% 45%;
  pointer-events: none;
}

/* ----- TEXT column ----- */
.tk-director .copy {
  position: relative;
  z-index: 5;
  margin-left: 1040px;
  padding: 220px 0 0 0;
  max-width: 780px;
}
.tk-director .eyebrow {
  font-family: var(--font-sans);
  font-weight: 700; font-size: 22px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  background: linear-gradient(180deg, #E8B777 0%, #B4823E 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
  margin: 0 0 28px;
}
.tk-director h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 58px;
  line-height: 1.05;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  margin: 0 0 40px;
  background: linear-gradient(180deg,
    #F7DBA0 0%,
    #E8B777 28%,
    #D29B5A 60%,
    #B4823E 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
}
.tk-director p {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 22px;
  line-height: 1.5;
  color: #fff;
  margin: 0 0 28px;
}
.tk-director .cta-wrap { margin-top: 36px; }

/* ============================================================
 *  FEATURED WORK
 *  Black canvas (#040404), warm amber spotlight glows in the
 *  upper corners, film-crew still pinned at the bottom with
 *  top + bottom vignettes blending it into the canvas.
 * ============================================================ */
.tk-feature-section {
  position: relative;
  background: #0A0805;
  padding: 80px 0 110px;
  overflow: hidden;
  isolation: isolate;
}
/* Warm amber spotlight glows */
.tk-feature-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(60% 60% at 0% 0%,
      rgba(191,135,83,0.50) 0%,
      rgba(191,135,83,0.20) 30%,
      rgba(191,135,83,0)    65%),
    radial-gradient(45% 50% at 100% 0%,
      rgba(191,135,83,0.32) 0%,
      rgba(191,135,83,0.10) 35%,
      rgba(191,135,83,0)    70%);
}
/* Film-crew silhouette pinned at the bottom, blended top + bottom */
.tk-feature-section::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 780px;
  z-index: 0;
  pointer-events: none;
  background: url("../assets/opt/featured-bg.png") center bottom / cover no-repeat;
  opacity: 0.55;
  mix-blend-mode: screen;
  -webkit-mask-image: linear-gradient(180deg,
    rgba(0,0,0,0) 0%, #000 22%, #000 80%, rgba(0,0,0,0) 100%);
          mask-image: linear-gradient(180deg,
    rgba(0,0,0,0) 0%, #000 22%, #000 80%, rgba(0,0,0,0) 100%);
}
.tk-feature-section > * { position: relative; z-index: 1; }
/* Tedivider — reusable hairline + monogram-disc divider, used in
   the hero AND in section heads further down the page. */
.tk-tedivider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  width: 100%;
  padding: 0 200px;
}
.tk-tedivider .rule {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg,
    rgba(209,157,99,0) 0%,
    rgba(209,157,99,0.9) 12%,
    rgba(209,157,99,0.9) 88%,
    rgba(209,157,99,0) 100%);
}
.tk-tedivider .disc {
  width: 96px; height: 96px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  position: relative;
}
.tk-tedivider .disc img {
  position: absolute;
  height: 92%; width: 92%; object-fit: contain;
  left: 4%; top: 4%;
}
/* Logo variant — TEDFLIX wordmark flanked by gold rules */
.tk-tedivider--logo { gap: 40px; }
.tk-tedivider--logo .tk-tedflix {
  height: clamp(62px, 9.6vh, 128px); width: auto; flex-shrink: 0;
  filter: drop-shadow(0 8px 24px rgba(0,0,0,0.5));
}
.tk-stage.is-mobile .tk-tedivider--logo { gap: 18px; }
.tk-stage.is-mobile .tk-tedivider--logo .tk-tedflix { height: 56px; }

/* Per-category wordmark lockup — echoes the TEDFLIX logo (heavy gold + 3D
   extrude) for the non-film archive categories (TedShots / TedDrops / …). */
.tk-tedivider--logo .tk-tedword {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: clamp(50px, 8vh, 104px);
  line-height: 0.9;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  flex-shrink: 0;
  background: linear-gradient(180deg, #FCD877 0%, #F3B23A 50%, #E4961C 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  transform: scaleX(0.92);
  filter: drop-shadow(2px 3px 0 #815015) drop-shadow(4px 5px 0 rgba(0,0,0,0.4));
}
.tk-stage.is-mobile .tk-tedivider--logo .tk-tedword { font-size: 44px; }

.tk-section-head {
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  text-align: center; margin-bottom: 64px;
}
.tk-section-head .eyebrow {
  font-family: var(--font-sans);
  font-weight: 700; font-size: 18px;
  letter-spacing: 0.20em; text-transform: uppercase;
  background: var(--grad-bronze);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  margin-top: 24px;
}
.tk-section-head h2 {
  font-family: var(--font-display);
  font-size: 56px; line-height: 0.92;
  letter-spacing: 0.020em; text-transform: uppercase;
  margin: 8px 0 0;
  background: linear-gradient(180deg,
    #F7DBA0 0%, #E8B777 28%, #D29B5A 60%, #B4823E 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
}
.tk-section-head .blurb {
  font-family: var(--font-body);
  font-size: 22px; line-height: 1.5;
  color: var(--c-cream); max-width: 820px; margin: 12px auto 0;
}

.tk-video {
  position: relative;
  max-width: 1499px;
  margin: 0 auto;
  aspect-ratio: 1499 / 843;
  border-radius: 24px;
  overflow: hidden;
  background: #000 url("../assets/opt/film-still.jpg") center/cover;
  box-shadow: 0 40px 100px rgba(0,0,0,0.7);
  cursor: pointer;
}
.tk-video .play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 99px; height: 99px; background: #000; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: transform .3s ease;
}
.tk-video:hover .play { transform: translate(-50%,-50%) scale(1.06); }
.tk-video .play svg { width: 42px; height: 42px; }

.tk-testimonials {
  display: grid;
  grid-template-columns: 1fr 1px 1fr 1px 1fr;
  gap: 80px;
  max-width: 1500px;
  margin: 96px auto 0;
  padding: 0 200px;
}
.tk-testimonials .tk-vrule {
  width: 1px;
  align-self: stretch;
  background: linear-gradient(180deg,
    rgba(209,157,99,0) 0%,
    rgba(209,157,99,0.45) 25%,
    rgba(209,157,99,0.45) 75%,
    rgba(209,157,99,0) 100%);
}
.tk-testimonial { display: flex; flex-direction: column; align-items: flex-start; }
.tk-testimonial .quote-icon {
  width: 44px; height: 41px;
  background: var(--grad-bronze);
  -webkit-mask: url("../assets/icons/quote.svg") center/contain no-repeat;
          mask: url("../assets/icons/quote.svg") center/contain no-repeat;
  margin-bottom: 22px;
}
.tk-testimonial .body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.45;
  background: linear-gradient(180deg, #E8B777 0%, #B4823E 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
}
.tk-testimonial .by {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.5;
  color: #fff;
  margin-top: 30px;
}

.tk-feature-cta { display: flex; gap: 28px; justify-content: center; margin-top: 80px; }

.tk-archive-section { background: #000; padding: 0 0 140px; }
.tk-archive {
  max-width: 968px; margin: 64px auto 0;
  display: flex; flex-direction: column; gap: 28px;
  padding: 0 200px;
}
.tk-archive-card {
  background: #000; border-radius: 19px; padding: 28px;
  display: grid; grid-template-columns: 348px 1fr auto;
  gap: 56px; align-items: center;
  box-shadow: 0 1px 30px rgba(240,170,64,0.16);
  text-decoration: none; color: #fff;
  transition: transform .25s ease, box-shadow .25s ease;
  cursor: pointer;
}
.tk-archive-card:hover { transform: translateY(-2px); box-shadow: 0 6px 40px rgba(240,170,64,0.28); }
.tk-archive-card .thumb {
  width: 348px; height: 196px;
  background: url("../assets/opt/film-still.jpg") center/cover #221B0F;
  position: relative; overflow: hidden;
}
.tk-archive-card .thumb .tag {
  position: absolute; left: 28px; top: 50%; transform: translateY(-50%);
  font-family: var(--font-sans); font-size: 35px;
  text-transform: uppercase; font-weight: 400;
  color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,0.7);
}
.tk-archive-card .title {
  font-family: var(--font-body); font-weight: 400;
  font-size: 29px; line-height: 1.2;
  color: var(--c-cream-deep); max-width: 460px;
}
.tk-archive-card .date {
  font-family: var(--font-body); font-weight: 700; font-size: 20px;
  letter-spacing: 0.02em; color: var(--c-cream); opacity: 0.73;
  margin-top: 14px;
}
.tk-archive-card .arrow {
  font-family: var(--font-body); font-weight: 200; font-size: 40px;
  background: var(--grad-bronze);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

.tk-footer {
  padding: 64px 200px 80px; background: #000;
  border-top: 1px solid rgba(255,255,255,0.06);
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-sans);
  font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg-dim);
}
.tk-footer .links { display:flex; gap: 36px; }
.tk-footer a { color: var(--fg-dim); text-decoration: none; }
.tk-footer a:hover { color: var(--c-cream); }

/* ============================================================
 *  MOBILE LAYOUT (.tk-stage.is-mobile)
 *  Toggled by App.jsx when viewport < 768px. Replaces the
 *  scaled 1920 design with a true mobile-first reflow.
 * ============================================================ */
.tk-scaler { background: #000; }
.tk-stage.is-mobile {
  width: 100%;
  background: #000;
}

/* ----- HEADER ----- */
.tk-stage.is-mobile .tk-header {
  padding: 16px 20px 0;
  gap: 12px;
}
.tk-stage.is-mobile .tk-brand .logo { height: 42px; }
.tk-stage.is-mobile .tk-nav,
.tk-stage.is-mobile .tk-header > .tk-btn { display: none; }
.tk-stage.is-mobile .tk-menu-toggle {
  display: inline-flex;
  background: transparent; border: 0; cursor: pointer;
  color: #fff; padding: 8px;
  margin-left: auto;
  align-items: center; justify-content: center;
}
.tk-stage.is-mobile .tk-menu-toggle svg { width: 28px; height: 28px; }

/* Hide hamburger + mobile menu on desktop */
.tk-stage:not(.is-mobile) .tk-menu-toggle,
.tk-stage:not(.is-mobile) .tk-mobile-menu { display: none; }

/* Full-screen mobile menu */
.tk-mobile-menu {
  position: fixed; inset: 0; z-index: 9998;
  background: rgba(0,0,0,0.97);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 28px;
  transform: translateY(-100%);
  transition: transform .45s cubic-bezier(.4,0,.2,1);
}
.tk-mobile-menu.is-open { transform: translateY(0); }
.tk-mobile-menu a {
  font-family: var(--font-sans);
  font-size: 24px; font-weight: 400;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: #fff; text-decoration: none;
}
.tk-mobile-menu a.is-active {
  background: var(--grad-bronze);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.tk-mobile-menu .tk-btn {
  margin-top: 16px; width: 260px;
}
.tk-mobile-menu .close {
  position: absolute; top: 20px; right: 20px;
  background: transparent; border: 0; cursor: pointer;
  color: #fff; padding: 8px;
}
.tk-mobile-menu .close svg { width: 28px; height: 28px; }

/* ----- HERO ----- */
.tk-stage.is-mobile .tk-hero {
  width: 100%;
  height: auto;
  min-height: 100vh;
}
.tk-stage.is-mobile .tk-hero__reticles .r { width: 28px; height: 28px; }
.tk-stage.is-mobile .tk-hero__reticles .tl,
.tk-stage.is-mobile .tk-hero__reticles .tr { top: 88px; }
.tk-stage.is-mobile .tk-hero__reticles .tl,
.tk-stage.is-mobile .tk-hero__reticles .bl { left: 14px; }
.tk-stage.is-mobile .tk-hero__reticles .tr,
.tk-stage.is-mobile .tk-hero__reticles .br { right: 14px; }
.tk-stage.is-mobile .tk-hero__reticles .bl,
.tk-stage.is-mobile .tk-hero__reticles .br { top: auto; bottom: 70px; }

.tk-stage.is-mobile .tk-hero__center {
  position: relative;
  top: auto; left: auto; right: auto;
  padding: 150px 22px 0;
}
.tk-stage.is-mobile .tk-hero .credits {
  flex-wrap: wrap;
  gap: 10px 14px;
  margin-bottom: 18px;
  justify-content: center;
}
.tk-stage.is-mobile .tk-hero .credits span { font-size: 12px; letter-spacing: 0.16em; }
.tk-stage.is-mobile .tk-hero .credits .dot { width: 4px; height: 4px; }

.tk-stage.is-mobile .tk-hero .wordmark {
  font-size: 72px;
  line-height: 0.92;
}
.tk-stage.is-mobile .tk-hero .through {
  font-size: 40px; margin-top: 14px;
}
.tk-stage.is-mobile .tk-hero .through .film { margin-left: 12px; }
.tk-stage.is-mobile .tk-hero .through .film-caret {
  width: 4px; margin-left: 5px;
}

.tk-stage.is-mobile .tk-hero .subhead {
  font-size: 15px; line-height: 1.55;
  max-width: 100%;
  margin: 28px 0 0;
}
.tk-stage.is-mobile .tk-hero .actions {
  flex-direction: column;
  gap: 12px;
  align-items: stretch;
  margin: 32px 0 0;
}
.tk-stage.is-mobile .tk-hero .actions .tk-btn {
  width: 100%;
  height: 52px;
  font-size: 14px;
}

.tk-stage.is-mobile .tk-hero__veil {
  left: 0; right: 0; top: 110px; height: 75%;
}

/* Stats — 2×2 grid */
.tk-stage.is-mobile .tk-hero__stats {
  position: relative;
  bottom: auto;
  grid-template-columns: 1fr 1fr;
  gap: 36px 24px;
  padding: 64px 24px 24px;
}
.tk-stage.is-mobile .tk-stat .num { font-size: 56px; }
.tk-stage.is-mobile .tk-stat .lbl { font-size: 13px; margin-top: 4px; }

/* Hero tedivider */
.tk-stage.is-mobile .tk-hero__divider {
  position: relative;
  bottom: auto;
  padding: 32px 20px 24px;
}
.tk-stage.is-mobile .tk-hero__divider .disc { width: 56px; height: 56px; }

/* ----- PRESS / DIRECTOR ----- */
.tk-stage.is-mobile .tk-press-section {
  padding: 28px 0 36px;
}
.tk-stage.is-mobile .tk-press img { height: 22px; }
.tk-stage.is-mobile .tk-press .marquee { gap: 36px; }

.tk-stage.is-mobile .tk-director {
  width: 100%;
  min-height: auto;
  margin-top: 24px;
  padding: 0;
  display: block;
}
.tk-stage.is-mobile .tk-figure {
  position: relative;
  left: 0; top: 0;
  width: 100%;
  height: 420px;
}
.tk-stage.is-mobile .tk-figure::after { height: 42%; }
.tk-stage.is-mobile .tk-director .copy {
  position: relative;
  margin-left: 0;
  padding: 32px 22px 0;
  max-width: 100%;
  z-index: 5;
}
.tk-stage.is-mobile .tk-director .eyebrow {
  font-size: 13px; margin-bottom: 16px;
}
.tk-stage.is-mobile .tk-director h2 {
  font-size: 32px; line-height: 1.05;
  margin-bottom: 22px;
}
.tk-stage.is-mobile .tk-director p {
  font-size: 15px; line-height: 1.55;
  margin-bottom: 18px;
}
.tk-stage.is-mobile .tk-director .cta-wrap .tk-btn {
  width: 100%;
}

/* ----- FEATURED WORK ----- */
.tk-stage.is-mobile .tk-feature-section { padding: 56px 0 64px; }
.tk-stage.is-mobile .tk-section-head { margin-bottom: 40px; }
.tk-stage.is-mobile .tk-section-head .eyebrow { font-size: 13px; }
.tk-stage.is-mobile .tk-section-head h2 { font-size: 30px; padding: 0 24px; }
.tk-stage.is-mobile .tk-section-head .blurb {
  font-size: 15px; line-height: 1.55;
  padding: 0 24px;
}

.tk-stage.is-mobile .tk-video {
  margin: 0 16px;
  max-width: calc(100% - 32px);
  border-radius: 12px;
}
.tk-stage.is-mobile .tk-video .play { width: 56px; height: 56px; }
.tk-stage.is-mobile .tk-video .play svg { width: 24px; height: 24px; }

/* Testimonials — stacked single column with horizontal hairlines */
.tk-stage.is-mobile .tk-testimonials {
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  gap: 28px;
  padding: 0 24px;
  margin-top: 48px;
}
.tk-stage.is-mobile .tk-vrule {
  width: 100%;
  height: 1px;
  align-self: auto;
  background: linear-gradient(90deg,
    rgba(209,157,99,0) 0%,
    rgba(209,157,99,0.45) 50%,
    rgba(209,157,99,0) 100%);
}
.tk-stage.is-mobile .tk-testimonial .body { font-size: 16px; }
.tk-stage.is-mobile .tk-testimonial .by { font-size: 14px; margin-top: 18px; }

.tk-stage.is-mobile .tk-feature-cta {
  flex-direction: column;
  gap: 12px;
  padding: 0 24px;
  margin-top: 40px;
}
.tk-stage.is-mobile .tk-feature-cta .tk-btn { width: 100%; }

/* Tedivider (used inside section heads) */
.tk-stage.is-mobile .tk-tedivider {
  padding: 0 24px;
  gap: 14px;
}
.tk-stage.is-mobile .tk-tedivider .disc { width: 52px; height: 52px; }

/* ----- ARCHIVE ----- */
.tk-stage.is-mobile .tk-archive-section { padding: 0 0 56px; }
.tk-stage.is-mobile .tk-archive {
  padding: 0 16px;
  max-width: 100%;
  gap: 16px;
}
.tk-stage.is-mobile .tk-archive-card {
  grid-template-columns: 1fr;
  gap: 14px;
  padding: 14px;
}
.tk-stage.is-mobile .tk-archive-card .thumb {
  width: 100%;
  height: 180px;
}
.tk-stage.is-mobile .tk-archive-card .thumb .tag { font-size: 22px; left: 18px; }
.tk-stage.is-mobile .tk-archive-card .title { font-size: 18px; }
.tk-stage.is-mobile .tk-archive-card .date { font-size: 13px; margin-top: 8px; }
.tk-stage.is-mobile .tk-archive-card .arrow { display: none; }

/* ----- FOOTER ----- */
.tk-stage.is-mobile .tk-footer {
  padding: 32px 24px 40px;
  flex-direction: column;
  gap: 18px;
  font-size: 11px;
  text-align: center;
}
.tk-stage.is-mobile .tk-footer .links {
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px 20px;
}

/* ----- DESKTOP — hide mobile-only chrome ----- */
.tk-menu-toggle { display: none; }
.tk-mobile-menu { display: none; }
.tk-stage.is-mobile .tk-mobile-menu { display: flex; }