/* =========================================================================
   TYTAN AFRICAN RESOURCES — THEME STYLESHEET
   Tokens sourced from the design handoff's tokens.css (1:1, --tar- namespace
   kept as-is). Component CSS is layered in during Phase 2 (chrome) and
   Phase 3 (homepage) — this file currently holds tokens + base resets only.
   ========================================================================= */

:root {
  /* ---------- CORE PALETTE ---------------------------------------------- */
  --tar-cobalt-900: #091530;
  --tar-cobalt-800: #0c2a4f;
  --tar-cobalt-700: #104176;
  --tar-cobalt-600: #145194;     /* PRIMARY brand cobalt — from logo */
  --tar-cobalt-500: #2a6db5;
  --tar-cobalt-400: #5a92cf;
  --tar-cobalt-200: #c5dbef;
  --tar-cobalt-100: #e6eef8;
  --tar-cobalt-50:  #f3f6fb;

  --tar-iron-900: #050608;
  --tar-iron-800: #11161e;
  --tar-iron-700: #1d2530;
  --tar-iron-600: #2a3340;
  --tar-iron-500: #424c5b;
  --tar-iron-400: #6c7686;
  --tar-iron-300: #9aa3b1;
  --tar-iron-200: #c5cad3;
  --tar-iron-100: #e4e6eb;
  --tar-iron-50:  #f4f5f7;

  --tar-bone-100: #ffffff;
  --tar-bone-200: #fbfaf6;
  --tar-bone-300: #f3f0e8;
  --tar-bone-400: #e6e1d2;

  /* ---------- ACCENTS ----------------------------------------------------
     Ore/gold is the raw design-system default; the live site overrides it to
     a verdigris teal below (per the handoff README, this override IS part of
     production — only the Tweaks panel JS that lets reviewers swap it is not). */
  --tar-ore-600:    #c8851a;
  --tar-ore-500:    #e0a23a;
  --tar-ore-200:    #f4e1b4;

  --tar-ember-600:  #c44a1f;
  --tar-ember-500:  #de6235;
  --tar-ember-200:  #f5c8b5;

  --tar-earth-700:  #3a4a2e;
  --tar-earth-500:  #5a6f47;
  --tar-earth-200:  #c9d1bc;

  /* ---------- SEMANTIC TOKENS --------------------------------------------- */
  --tar-bg:              var(--tar-bone-200);
  --tar-bg-elevated:     var(--tar-bone-100);
  --tar-bg-sunken:       var(--tar-bone-300);
  --tar-bg-inverse:      var(--tar-cobalt-900);

  --tar-surface:         var(--tar-bone-100);
  --tar-surface-muted:   var(--tar-cobalt-50);
  --tar-surface-deep:    var(--tar-cobalt-900);

  --tar-border:          var(--tar-bone-400);
  --tar-border-strong:   var(--tar-iron-200);
  --tar-border-inverse:  rgba(255,255,255,0.12);

  --tar-text:            var(--tar-iron-900);
  --tar-text-muted:      var(--tar-iron-500);
  --tar-text-subtle:     var(--tar-iron-400);
  --tar-text-inverse:    var(--tar-bone-200);
  --tar-text-inverse-muted: rgba(251,250,246,0.7);

  --tar-brand:           var(--tar-cobalt-600);
  --tar-brand-deep:      var(--tar-cobalt-800);
  --tar-brand-hover:     var(--tar-cobalt-700);

  /* ---------- TYPOGRAPHY --------------------------------------------------
     Display: Editorial New, falls back to Fraunces (opsz 144).
     Heading: Inter Tight. Body: Inter. Mono: IBM Plex Mono. */
  --tar-font-display: "Editorial New", "Tiempos Headline", "Times New Roman", Georgia, serif;
  --tar-font-heading: "Inter Tight", "Inter", "Helvetica Neue", system-ui, sans-serif;
  --tar-font-body:    "Inter", "Helvetica Neue", system-ui, sans-serif;
  --tar-font-mono:    "IBM Plex Mono", "JetBrains Mono", ui-monospace, monospace;

  --tar-text-display-xl: clamp(56px, 8vw, 128px);
  --tar-text-display-l:  clamp(44px, 6vw, 88px);
  --tar-text-display-m:  clamp(36px, 4.5vw, 64px);

  --tar-text-h1: 48px;
  --tar-text-h2: 36px;
  --tar-text-h3: 28px;
  --tar-text-h4: 22px;
  --tar-text-h5: 18px;
  --tar-text-h6: 14px;

  --tar-text-lead: 20px;
  --tar-text-body: 16px;
  --tar-text-small: 14px;
  --tar-text-micro: 12px;

  --tar-text-label: 12px;
  --tar-tracking-eyebrow: 0.16em;
  --tar-tracking-tight: -0.02em;
  --tar-tracking-display: -0.03em;

  --tar-lh-display: 0.98;
  --tar-lh-heading: 1.12;
  --tar-lh-body: 1.55;
  --tar-lh-tight: 1.25;

  /* ---------- SPACING — base 4px ---------------------------------------- */
  --tar-space-1:  4px;
  --tar-space-2:  8px;
  --tar-space-3:  12px;
  --tar-space-4:  16px;
  --tar-space-5:  20px;
  --tar-space-6:  24px;
  --tar-space-8:  32px;
  --tar-space-10: 40px;
  --tar-space-12: 48px;
  --tar-space-16: 64px;
  --tar-space-20: 80px;
  --tar-space-24: 96px;
  --tar-space-32: 128px;

  /* ---------- RADII -------------------------------------------------------- */
  --tar-radius-none: 0;
  --tar-radius-sm:   2px;
  --tar-radius-md:   4px;
  --tar-radius-lg:   8px;
  --tar-radius-pill: 999px;

  /* ---------- SHADOWS -------------------------------------------------------- */
  --tar-shadow-1: 0 1px 0 rgba(7,24,47,0.04), 0 1px 2px rgba(7,24,47,0.06);
  --tar-shadow-2: 0 2px 4px rgba(7,24,47,0.05), 0 6px 12px rgba(7,24,47,0.08);
  --tar-shadow-3: 0 4px 8px rgba(7,24,47,0.06), 0 16px 32px rgba(7,24,47,0.10);
  --tar-shadow-inset: inset 0 1px 0 rgba(255,255,255,0.06);

  /* ---------- MOTION -------------------------------------------------------- */
  --tar-ease: cubic-bezier(0.2, 0.6, 0.2, 1);
  --tar-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --tar-dur-fast: 150ms;
  --tar-dur:      240ms;
  --tar-dur-slow: 480ms;

  /* ---------- ACCENT — Tytan blue (production default) ------------------
     The accent is one blue expressed at two ends, mapped onto the ore tokens:
       ore-600 = DARK blue  → accents/links/buttons on light (white) surfaces
       ore-500 = LIGHT blue → highlights/figures/buttons on navy (dark) surfaces
                              (the logo's icy light-blue)
       ore-200 = light-blue tint.
     Green is kept only as a rare, occasional accent (see --tar-green). */
  --tar-ore-600: #0b3160;
  --tar-ore-500: #93dbf4;
  --tar-ore-200: #d4ecfb;

  --tar-green:   #3f9a74;   /* occasional only — status / verified touches */
}

/* =========================================================================
   BASE RESETS & TYPOGRAPHY
   ========================================================================= */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--tar-bg);
  color: var(--tar-text);
  font-family: var(--tar-font-body);
  font-size: var(--tar-text-body);
  line-height: var(--tar-lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

.container { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 32px; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--tar-cobalt-900); color: #fff; padding: 12px 20px;
  font-family: var(--tar-font-heading); font-size: 14px;
}
.skip-link:focus { left: 12px; top: 12px; }

.tar-display {
  font-family: "Fraunces", "Editorial New", Georgia, serif;
  font-variation-settings: "opsz" 144;
  font-weight: 500;
  letter-spacing: var(--tar-tracking-display);
  line-height: var(--tar-lh-display);
}

.tar-h1, .tar-h2, .tar-h3, .tar-h4, .tar-h5 {
  font-family: var(--tar-font-heading);
  font-weight: 600;
  letter-spacing: var(--tar-tracking-tight);
  line-height: var(--tar-lh-heading);
  margin: 0;
}
.tar-h1 { font-size: var(--tar-text-h1); font-weight: 700; }
.tar-h2 { font-size: var(--tar-text-h2); }
.tar-h3 { font-size: var(--tar-text-h3); }
.tar-h4 { font-size: var(--tar-text-h4); }
.tar-h5 { font-size: var(--tar-text-h5); font-weight: 500; }

.tar-eyebrow {
  font-family: var(--tar-font-heading);
  font-size: var(--tar-text-label);
  font-weight: 600;
  letter-spacing: var(--tar-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--tar-text-muted);
}

.tar-mono { font-family: var(--tar-font-mono); }

.tar-lead {
  font-size: var(--tar-text-lead);
  line-height: 1.45;
  color: var(--tar-text);
  font-weight: 400;
}

/* =========================================================================
   CHROME — eyebrow, buttons, nav, hero shell, footer
   Lifted 1:1 from the design handoff's tytan-site.css (class names kept
   identical to the mockup so later phases can copy markup without renaming).
   ========================================================================= */

.eyebrow {
  font-family: var(--tar-font-mono); font-size: 12px; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--tar-ore-600);
  display: inline-flex; align-items: center; gap: 10px; margin: 0;
}
.eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--tar-ore-600); display: inline-block; }
.eyebrow.center { justify-content: center; }

/* ---------- BUTTONS ---------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--tar-font-heading); font-size: 14px; font-weight: 600;
  letter-spacing: 0.01em; padding: 15px 24px; border-radius: var(--tar-radius-sm);
  border: 1px solid transparent; cursor: pointer;
  transition: background var(--tar-dur) var(--tar-ease), color var(--tar-dur) var(--tar-ease), border-color var(--tar-dur) var(--tar-ease);
}
.btn .arr { transition: transform var(--tar-dur) var(--tar-ease); }
.btn:hover .arr { transform: translateX(4px); }
.btn-ore { background: var(--tar-ore-600); color: #fff; }
.btn-ore:hover { background: var(--tar-cobalt-600); } /* lighten to blue; keep white text readable (ore-500 is a light blue) */
/* On navy/dark sections the primary button flips to LIGHT blue with navy text,
   so it stays visible against the dark ground — a dark-blue fill would vanish. */
.hero .btn-ore, .page-hero .btn-ore, .cta-lite .btn-ore, .foot-cta .btn-ore, .nav-drawer .btn-ore {
  background: var(--tar-ore-500); color: var(--tar-cobalt-900);
}
.hero .btn-ore:hover, .page-hero .btn-ore:hover, .cta-lite .btn-ore:hover, .foot-cta .btn-ore:hover, .nav-drawer .btn-ore:hover {
  background: #6ec7ec; color: var(--tar-cobalt-900);
}
.btn-dark { background: var(--tar-cobalt-900); color: #fff; }
.btn-dark:hover { background: var(--tar-brand); }
.btn-line-light { background: transparent; color: #fff; border-color: rgba(255,255,255,0.45); }
.btn-line-light:hover { background: rgba(255,255,255,0.12); border-color: #fff; }
.btn-line-dark { background: transparent; color: var(--tar-cobalt-900); border-color: var(--tar-iron-900); }
.btn-line-dark:hover { background: var(--tar-cobalt-900); color: #fff; }

/* =========================================================================
   NAV  (transparent over the hero; pins to the viewport on scroll and picks
   up a light background + color logo once the hero has scrolled past)
   ========================================================================= */
.site-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 40px;
  background: transparent;
  transition: background var(--tar-dur) var(--tar-ease), box-shadow var(--tar-dur) var(--tar-ease);
}
.site-nav.is-scrolled {
  /* High opacity + a hairline border so the bar stays visually distinct even
     over light/white page sections, not just the dark hero — a lower-opacity
     fill blended into the page's own off-white background almost invisibly. */
  background: rgba(251,250,246,0.98); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--tar-border);
  box-shadow: var(--tar-shadow-2);
}
.site-nav .brand { display: inline-flex; }
.site-nav .brand img {
  height: 62px;
  filter: brightness(0) invert(1); /* forces the color logo to solid white over the hero */
  transition: filter var(--tar-dur) var(--tar-ease);
}
.site-nav.is-scrolled .brand img { filter: none; }
.site-nav .links { display: flex; gap: 36px; }
.site-nav .links a {
  display: inline-flex; align-items: center;
  padding: 8px 0;
  font-family: var(--tar-font-heading); font-size: 16px; font-weight: 500;
  color: rgba(255,255,255,0.86); letter-spacing: 0.005em;
  transition: color var(--tar-dur-fast) var(--tar-ease);
}
.site-nav .links a:hover { color: var(--tar-ore-500); }
.site-nav .links a.active { color: #fff; font-weight: 600; }
/* Current page — a dot before the label, not an underline/chip. Every link
   (not just .active) reserves the same dot space, just transparent, so the
   links block is always the same total width — otherwise the active item
   alone being ~16px wider shifts the whole row (it sits between two other
   flex items via justify-content:space-between, which re-centers on any
   width change), producing a visible jump every time the active page changes. */
.site-nav .links a::before {
  content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  margin-right: 9px; background: transparent;
}
.site-nav .links a.active::before { background: var(--tar-ore-500); }
.site-nav.is-scrolled .links a { color: var(--tar-text-muted); }
.site-nav.is-scrolled .links a:hover { color: var(--tar-ore-600); }
.site-nav.is-scrolled .links a.active { color: var(--tar-cobalt-900); }
.site-nav.is-scrolled .links a.active::before { background: var(--tar-ore-600); }
.site-nav .lang-toggle { display: flex; align-items: center; gap: 6px; margin-right: 20px; }
.site-nav .lang-toggle a {
  font-family: var(--tar-font-mono); font-size: 12px; font-weight: 600; letter-spacing: 0.06em;
  color: rgba(255,255,255,0.6); transition: color var(--tar-dur-fast) var(--tar-ease);
}
.site-nav .lang-toggle a.active,
.site-nav .lang-toggle a:hover { color: #fff; }
.site-nav .lang-toggle .sep { color: rgba(255,255,255,0.35); }
.site-nav.is-scrolled .lang-toggle a { color: var(--tar-text-subtle); }
.site-nav.is-scrolled .lang-toggle a.active,
.site-nav.is-scrolled .lang-toggle a:hover { color: var(--tar-cobalt-900); }
.nav-cta {
  position: relative;
  font-family: var(--tar-font-heading); font-size: 13px; font-weight: 600;
  color: var(--tar-cobalt-900); background: #fff; padding: 11px 20px;
  border-radius: var(--tar-radius-sm);
  transition: background var(--tar-dur) var(--tar-ease), color var(--tar-dur) var(--tar-ease), box-shadow var(--tar-dur) var(--tar-ease);
}
.nav-cta:hover { background: var(--tar-ore-600); color: #fff; }
.site-nav.is-scrolled .nav-cta { background: var(--tar-cobalt-900); color: #fff; }
.site-nav.is-scrolled .nav-cta:hover { background: var(--tar-ore-600); }
/* Current page — an accent ring, echoing the nav links' active chip without
   fighting the button's own fill color. */
.nav-cta.active { box-shadow: 0 0 0 2px var(--tar-ore-500); }
.site-nav.is-scrolled .nav-cta.active { box-shadow: 0 0 0 2px var(--tar-ore-600); }
.nav-burger { display: none; }
.site-nav.is-scrolled .nav-burger span { background: var(--tar-cobalt-900); }

/* mobile nav drawer (built out — mockup left the burger unwired) */
.nav-drawer {
  position: fixed; inset: 0; z-index: 60; background: var(--tar-cobalt-900);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px;
  transform: translateX(100%); transition: transform var(--tar-dur) var(--tar-ease);
}
.nav-drawer.is-open { transform: translateX(0); }
.nav-drawer a {
  font-family: var(--tar-font-heading); font-size: 20px; font-weight: 500; color: #fff;
}
.nav-drawer a.active { color: var(--tar-ore-500); }
.nav-drawer-close {
  position: absolute; top: 26px; right: 24px; width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center; color: #fff; cursor: pointer;
}
body.nav-open { overflow: hidden; }

/* =========================================================================
   HERO shell  (full content styling arrives with the homepage/page templates)
   ========================================================================= */
.hero, .page-hero {
  position: relative; display: flex; align-items: flex-end;
  color: #fff; overflow: hidden; isolation: isolate;
}
.hero { min-height: 100vh; }
.page-hero { min-height: 640px; }
.hero .hero-img, .page-hero .hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.hero::after, .page-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgba(7,24,47,0.93) 0%, rgba(7,24,47,0.72) 44%, rgba(7,24,47,0.34) 78%, rgba(7,24,47,0.5) 100%),
    linear-gradient(180deg, rgba(7,24,47,0.6) 0%, rgba(7,24,47,0.0) 20%),
    linear-gradient(0deg, rgba(7,24,47,0.88) 0%, rgba(7,24,47,0.0) 40%);
}
.hero-inner { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 40px 0; }
.hero-copy { padding: 130px 0 56px; max-width: 920px; }
.hero .eyebrow, .page-hero .eyebrow { color: var(--tar-ore-500); margin-bottom: 28px; }
.hero .eyebrow::before, .page-hero .eyebrow::before { background: var(--tar-ore-500); }
.hero h1, .page-hero h1 {
  font-family: var(--tar-font-display); font-weight: 500;
  font-size: clamp(40px, 5vw, 80px); line-height: 1.02; letter-spacing: -0.03em;
  margin: 0; color: #fff; max-width: 16ch;
}
.hero h1 em, .page-hero h1 em { font-style: italic; color: var(--tar-ore-500); font-weight: 400; }
.hero .lede, .page-hero .lede {
  margin: 30px 0 0; font-size: 20px; line-height: 1.5; max-width: 56ch;
  color: rgba(255,255,255,0.82); font-weight: 400;
}
.hero .actions, .page-hero .actions { display: flex; gap: 16px; margin-top: 40px; flex-wrap: wrap; }

/* hero credentials strip */
.hero-strip { border-top: 1px solid rgba(255,255,255,0.16); background: rgba(7,24,47,0.34); backdrop-filter: blur(2px); }
.hero-strip .row {
  max-width: 1240px; margin: 0 auto; padding: 26px 40px;
  display: grid; grid-template-columns: auto repeat(4,1fr); gap: 28px; align-items: center;
}
.hero-strip .tag {
  font-family: var(--tar-font-mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: rgba(255,255,255,0.6); line-height: 1.5; max-width: 18ch;
}
.hero-strip .stat .v { font-family: var(--tar-font-display); font-size: 34px; line-height: 1; letter-spacing: -0.03em; color: #fff; }
.hero-strip .stat .v sup { font-size: 14px; color: var(--tar-ore-500); top: -1em; }
.hero-strip .stat .l {
  font-family: var(--tar-font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(255,255,255,0.55); margin-top: 8px;
}

/* =========================================================================
   SECTION SCAFFOLD  (shared by every content section)
   ========================================================================= */
section { padding: 118px 0; }
.sec-head { display: grid; grid-template-columns: 1.05fr 1fr; gap: 64px; align-items: end; margin-bottom: 60px; }
.sec-head .left { display: flex; flex-direction: column; gap: 18px; }
.sec-head h2 {
  font-family: var(--tar-font-display); font-weight: 500;
  font-size: clamp(36px,4.4vw,60px); line-height: 1.0; letter-spacing: -0.03em;
  margin: 0; color: var(--tar-cobalt-900); max-width: 15ch;
}
.sec-head h2 em { font-style: italic; color: var(--tar-brand); }
.sec-head .deck { font-size: 17px; line-height: 1.6; color: var(--tar-text-muted); margin: 0 0 6px; max-width: 54ch; }
.sec-head.center { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 18px; }
.sec-head.center h2 { max-width: 20ch; }
.sec-head.center .deck { max-width: 60ch; }

/* =========================================================================
   FOOTER
   ========================================================================= */
.foot-cta { background: var(--tar-cobalt-800); color: #fff; }
.foot-cta .container { display: flex; align-items: center; justify-content: space-between; gap: 40px; padding-top: 54px; padding-bottom: 54px; flex-wrap: wrap; }
.foot-cta h3 { font-family: var(--tar-font-display); font-weight: 500; font-size: clamp(26px,2.8vw,40px); line-height: 1.06; letter-spacing: -0.02em; margin: 0; max-width: 20ch; }
.foot-cta h3 em { font-style: italic; color: var(--tar-ore-500); }

footer.site-foot { background: var(--tar-cobalt-900); color: rgba(255,255,255,0.72); padding: 84px 0 30px; }
.foot-grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: 56px; padding-bottom: 56px; border-bottom: 1px solid rgba(255,255,255,0.12); }
.foot-grid .colophon img { height: 42px; margin-bottom: 22px; }
.foot-grid .colophon p { font-size: 14px; line-height: 1.6; max-width: 34ch; margin: 0 0 22px; }
/* Label/value grid so multi-line values (the postal address) align under each
   other instead of wrapping back under the HQ/MAIL/TEL label. */
.foot-contact { display: grid; grid-template-columns: auto 1fr; column-gap: 16px; row-gap: 7px; font-family: var(--tar-font-mono); font-size: 12px; line-height: 1.7; letter-spacing: 0.04em; color: rgba(255,255,255,0.6); }
.foot-contact span { color: var(--tar-ore-500); }
.foot-contact a { font-size: 12px; color: inherit; }
.foot-contact a:hover { color: #fff; }
.foot-grid h5 { font-family: var(--tar-font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tar-ore-500); margin: 0 0 18px; font-weight: 500; }
.foot-grid ul { list-style: none; padding: 0; margin: 0; }
.foot-grid li { padding: 6px 0; }
.foot-grid a { font-size: 14px; transition: color var(--tar-dur-fast) var(--tar-ease); }
.foot-grid a:hover { color: #fff; }
.foot-end { display: flex; align-items: center; justify-content: space-between; padding-top: 28px; flex-wrap: wrap; gap: 16px; font-family: var(--tar-font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.42); }
.foot-end .socials { display: flex; gap: 12px; }
.foot-end .socials a { width: 32px; height: 32px; border: 1px solid rgba(255,255,255,0.18); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.6); transition: all var(--tar-dur) var(--tar-ease); }
.foot-end .socials a:hover { color: #fff; border-color: #fff; }
.foot-end .socials svg { width: 15px; height: 15px; }

/* =========================================================================
   WHAT WE DO   (tall image + 4 list rows)
   ========================================================================= */
.dowedo { background: var(--tar-bone-100); border-top: 1px solid var(--tar-border); border-bottom: 1px solid var(--tar-border); }
.dowedo-grid { display: grid; grid-template-columns: 0.82fr 1.18fr; gap: 48px; align-items: stretch; }
.dowedo-photo { position: relative; overflow: hidden; min-height: 560px; }
.dowedo-photo img, .dowedo-photo .tytan-imgslot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background-size: cover; background-position: center; }
.dowedo-photo .cap {
  position: absolute; left: 24px; bottom: 22px; z-index: 2;
  font-family: var(--tar-font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: #fff; background: rgba(7,24,47,0.5); padding: 8px 12px; backdrop-filter: blur(2px);
}
.dowedo-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(7,24,47,0.4), transparent 50%); }

.dlist { display: flex; flex-direction: column; justify-content: center; }
.drow {
  display: grid; grid-template-columns: 54px 1fr 92px; gap: 22px; align-items: center;
  padding: 24px 16px 24px 0; border-top: 1px solid var(--tar-border); cursor: pointer;
  text-decoration: none; color: inherit;
  transition: background var(--tar-dur) var(--tar-ease), padding var(--tar-dur) var(--tar-ease);
}
.drow:first-child { border-top: 0; }
.drow:hover { background: var(--tar-cobalt-50); padding-left: 16px; padding-right: 0; }
.drow .ic {
  width: 54px; height: 54px; border: 1px solid var(--tar-border-strong); display: flex; align-items: center; justify-content: center;
  color: var(--tar-brand); background: var(--tar-bone-100); flex-shrink: 0;
}
.drow .ic svg { width: 26px; height: 26px; }
.drow .txt h3 { font-family: var(--tar-font-heading); font-size: 19px; font-weight: 600; letter-spacing: -0.01em; margin: 0 0 4px; color: var(--tar-cobalt-900); }
.drow .txt p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--tar-text-muted); max-width: 46ch; }
.drow .thumb { width: 92px; height: 68px; overflow: hidden; position: relative; }
.drow .thumb img, .drow .thumb .tytan-imgslot { width: 100%; height: 100%; object-fit: cover; background-size: cover; background-position: center; filter: saturate(0.92); }
.drow .thumb::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px rgba(7,24,47,0.12); }
.dowedo-foot { display: flex; align-items: center; gap: 20px; margin-top: 44px; }

/* =========================================================================
   WHO WE ARE   (cobalt band)
   ========================================================================= */
.whoweare { background: var(--tar-cobalt-900); color: #fff; position: relative; overflow: hidden; }
.whoweare::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 85% 20%, rgba(20,81,148,0.4), transparent 55%); }
.whoweare .container { position: relative; }
.whoweare-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 72px; align-items: start; }
.whoweare h2 {
  font-family: var(--tar-font-display); font-weight: 500; font-size: clamp(38px,4.6vw,66px);
  line-height: 1.0; letter-spacing: -0.03em; margin: 0; color: #fff;
}
.whoweare h2 em { font-style: italic; color: var(--tar-ore-500); }
.whoweare .body p { font-size: 18px; line-height: 1.65; color: rgba(255,255,255,0.82); margin: 0 0 20px; }
.whoweare .body p:last-child { margin-bottom: 0; }
.whoweare .sig {
  margin-top: 34px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.16);
  font-family: var(--tar-font-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(255,255,255,0.6);
}
.whoweare .sig strong { color: #fff; font-weight: 500; }

/* =========================================================================
   IMAGE SLOT — empty placeholder (no client photo uploaded yet)
   Same cobalt gradient + faint line texture as the leader-card portraits, so
   every unphotographed frame reads as an obvious placeholder rather than a
   stand-in graphic. Hero photos are excluded on purpose (tytan_image_slot_url()).
   ========================================================================= */
.tytan-imgslot { position: relative; }
.tytan-imgslot--empty {
  background: linear-gradient(165deg, var(--tar-cobalt-700) 0%, var(--tar-cobalt-900) 100%);
}
.tytan-imgslot--empty::before {
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 100% 13px; opacity: 0.5;
}

/* =========================================================================
   LEADERSHIP
   ========================================================================= */
.leaders { background: var(--tar-bone-200); }
.leaders-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 32px; }
.lcard { background: var(--tar-bone-100); border: 1px solid var(--tar-border); display: flex; flex-direction: column; }
.lcard .portrait {
  aspect-ratio: 1/1.04; position: relative; overflow: hidden;
  background: linear-gradient(165deg, var(--tar-cobalt-700) 0%, var(--tar-cobalt-900) 100%);
}
.lcard .portrait::before {
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 100% 13px; opacity: 0.5;
}
.lcard .portrait .initials {
  position: absolute; left: 26px; bottom: 22px; font-family: var(--tar-font-display); font-weight: 500;
  font-size: 74px; line-height: 0.85; color: rgba(255,255,255,0.42); letter-spacing: -0.03em;
}
.lcard .portrait .tagp {
  position: absolute; top: 22px; right: 24px; z-index: 2; font-family: var(--tar-font-mono); font-size: 10px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--tar-ore-500);
}
/* Whole-portrait click target to the profile page (over the image, under the tag). */
.lcard .portrait-link { position: absolute; inset: 0; z-index: 1; }
.lcard:hover .portrait img { transform: scale(1.03); }
.lcard .portrait img { transition: transform var(--tar-dur-slow) var(--tar-ease); }
.lcard .body { padding: 26px 28px 28px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.lcard .name { font-family: var(--tar-font-heading); font-size: 21px; font-weight: 600; letter-spacing: -0.01em; color: var(--tar-cobalt-900); margin: 0; }
.lcard .role { font-family: var(--tar-font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tar-text-muted); }
.lcard .bio { font-size: 14px; line-height: 1.55; color: var(--tar-text); margin: 10px 0 0; }
.lcard-profile { align-self: flex-start; margin-top: 16px; font-size: 13px; }
.lcard .social { display: flex; gap: 10px; margin-top: auto; padding-top: 20px; }
.lcard .social a {
  width: 34px; height: 34px; border: 1px solid var(--tar-border-strong); display: flex; align-items: center; justify-content: center;
  color: var(--tar-cobalt-900); transition: background var(--tar-dur) var(--tar-ease), color var(--tar-dur) var(--tar-ease), border-color var(--tar-dur) var(--tar-ease);
}
.lcard .social a:hover { background: var(--tar-cobalt-900); color: #fff; border-color: var(--tar-cobalt-900); }
.lcard .social svg { width: 16px; height: 16px; }
.leaders-foot { display: flex; justify-content: center; margin-top: 48px; }

/* =========================================================================
   LEADER PROFILE (single team_member)
   ========================================================================= */
.profile { background: var(--tar-bone-200); }
.profile-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 72px; align-items: start; }
.profile-aside { position: sticky; top: 120px; }
.profile-portrait {
  position: relative; aspect-ratio: 1/1.12; overflow: hidden;
  background: linear-gradient(165deg, var(--tar-cobalt-700) 0%, var(--tar-cobalt-900) 100%);
  border: 1px solid var(--tar-border);
}
.profile-portrait::before {
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 100% 13px; opacity: 0.5;
}
.profile-portrait img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.profile-portrait .initials {
  position: absolute; left: 30px; bottom: 26px; font-family: var(--tar-font-display); font-weight: 500;
  font-size: 96px; line-height: 0.85; color: rgba(255,255,255,0.42); letter-spacing: -0.03em;
}
.profile-portrait .tagp {
  position: absolute; top: 24px; right: 26px; z-index: 2; font-family: var(--tar-font-mono); font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--tar-ore-500);
}
.profile-social { display: flex; gap: 10px; margin-top: 22px; }
.profile-social a {
  width: 38px; height: 38px; border: 1px solid var(--tar-border-strong); display: flex; align-items: center; justify-content: center;
  color: var(--tar-cobalt-900); transition: background var(--tar-dur) var(--tar-ease), color var(--tar-dur) var(--tar-ease), border-color var(--tar-dur) var(--tar-ease);
}
.profile-social a:hover { background: var(--tar-cobalt-900); color: #fff; border-color: var(--tar-cobalt-900); }
.profile-social svg { width: 17px; height: 17px; }

.profile-quote {
  font-family: var(--tar-font-display); font-weight: 500;
  font-size: clamp(24px,2.6vw,36px); line-height: 1.2; letter-spacing: -0.02em;
  color: var(--tar-cobalt-900); margin: 0 0 36px; padding: 0 0 0 26px;
  border-left: 3px solid var(--tar-ore-500); max-width: 26ch;
}
.profile-lead { font-size: 20px; line-height: 1.5; color: var(--tar-text); margin: 0 0 30px; max-width: 54ch; }
.profile-bio { max-width: 62ch; }
.profile-bio p { font-size: 16.5px; line-height: 1.7; color: var(--tar-text); margin: 0 0 18px; }
.profile-bio p:last-child { margin-bottom: 0; }
.profile-body .row-foot { margin-top: 40px; }

/* =========================================================================
   STANDARDS
   ========================================================================= */
.standards { background: var(--tar-bone-300); border-top: 1px solid var(--tar-border); }
.std-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 0; border: 1px solid var(--tar-border); background: var(--tar-bone-100); }
.std-card { padding: 40px 36px; border-right: 1px solid var(--tar-border); display: flex; flex-direction: column; gap: 18px; }
.std-card:last-child { border-right: 0; }
.std-card .ic { width: 52px; height: 52px; border: 1px solid var(--tar-border-strong); display: flex; align-items: center; justify-content: center; color: var(--tar-brand); }
.std-card .ic svg { width: 26px; height: 26px; }
.std-card h3 { font-family: var(--tar-font-heading); font-size: 20px; font-weight: 600; letter-spacing: -0.01em; margin: 0; color: var(--tar-cobalt-900); }
.std-card p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--tar-text-muted); }
.std-card .meta { font-family: var(--tar-font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tar-ore-600); margin-top: auto; padding-top: 8px; }
.standards-foot { display: flex; justify-content: center; margin-top: 44px; }

/* ---------- CAREERS ---------------------------------------------------- */
.why-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 1px; border: 1px solid var(--tar-border); background: var(--tar-border); }
.why-card { background: var(--tar-bone-100); padding: 40px 36px; display: flex; flex-direction: column; gap: 16px; }
.why-card .ic { width: 52px; height: 52px; border: 1px solid var(--tar-border-strong); display: flex; align-items: center; justify-content: center; color: var(--tar-brand); }
.why-card .ic svg { width: 26px; height: 26px; }
.why-card h3 { font-family: var(--tar-font-heading); font-size: 20px; font-weight: 600; letter-spacing: -0.01em; margin: 0; color: var(--tar-cobalt-900); }
.why-card p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--tar-text-muted); }
.careers-apply { padding: 96px 0; background: var(--tar-bone-200); border-top: 1px solid var(--tar-border); }
@media (max-width: 1000px) { .why-grid { grid-template-columns: 1fr; } }

/* =========================================================================
   TRACK RECORD  (cobalt figures band)
   ========================================================================= */
.track { background: var(--tar-cobalt-900); color: #fff; position: relative; overflow: hidden; }
.track::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 15% 90%, rgba(20,81,148,0.42), transparent 50%); }
.track .container { position: relative; }
.track .head { text-align: center; margin-bottom: 64px; }
.track .head h2 { font-family: var(--tar-font-display); font-weight: 500; font-size: clamp(34px,4.2vw,56px); line-height: 1.04; letter-spacing: -0.03em; margin: 14px 0 0; color: #fff; }
.track .head h2 em { font-style: italic; color: var(--tar-ore-500); }
.track-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 0; border: 1px solid rgba(255,255,255,0.16); }
.tr-cell { padding: 44px 40px; border-right: 1px solid rgba(255,255,255,0.16); display: flex; flex-direction: column; gap: 14px; }
.tr-cell:last-child { border-right: 0; }
.tr-cell .place { font-family: var(--tar-font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tar-ore-500); }
.tr-cell .v { font-family: var(--tar-font-display); font-size: clamp(48px,5vw,72px); line-height: 0.95; letter-spacing: -0.03em; color: #fff; }
.tr-cell .v sup { font-size: 0.32em; color: var(--tar-ore-500); top: -1.4em; margin-left: 2px; }
.tr-cell .d { font-size: 14.5px; line-height: 1.55; color: rgba(255,255,255,0.74); margin: 0; }
.track-foot { display: flex; justify-content: center; gap: 36px; flex-wrap: wrap; margin-top: 48px; font-family: var(--tar-font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.55); }
.track-foot span::before { content: ""; display: inline-block; width: 6px; height: 6px; background: var(--tar-ore-500); margin-right: 10px; vertical-align: 2px; }

/* =========================================================================
   CONTACT  (form + image split)
   ========================================================================= */
.contact { padding: 0; background: var(--tar-bone-100); border-top: 1px solid var(--tar-border); }
.contact-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; }
.contact-form { padding: 104px 64px 104px max(32px, calc((100vw - 1240px) / 2 + 32px)); width: 100%; } /* left edge tracks the site container gutter instead of hugging the viewport edge */
.contact-form .eyebrow { margin-bottom: 18px; }
.contact-form h2 { font-family: var(--tar-font-display); font-weight: 500; font-size: clamp(32px,3.6vw,50px); line-height: 1.02; letter-spacing: -0.03em; margin: 0 0 14px; color: var(--tar-cobalt-900); max-width: 16ch; }
.contact-form h2 em { font-style: italic; color: var(--tar-brand); }
.contact-form > p { font-size: 16px; line-height: 1.6; color: var(--tar-text-muted); margin: 0 0 34px; max-width: 48ch; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 18px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field.full { margin-bottom: 18px; }
.field label { font-family: var(--tar-font-heading); font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--tar-iron-500); }
.field input, .field textarea {
  font-family: var(--tar-font-body); font-size: 15px; color: var(--tar-cobalt-900);
  background: var(--tar-bone-200); border: 1px solid var(--tar-border-strong); border-radius: var(--tar-radius-sm);
  padding: 13px 14px; width: 100%; transition: border-color var(--tar-dur-fast) var(--tar-ease), box-shadow var(--tar-dur-fast) var(--tar-ease);
}
.field textarea { resize: vertical; min-height: 120px; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--tar-brand); box-shadow: 0 0 0 3px var(--tar-cobalt-100); }
.field input::placeholder, .field textarea::placeholder { color: var(--tar-iron-300); }
.contact-form .btn { width: 100%; justify-content: center; margin-top: 6px; }
.contact-photo { position: relative; overflow: hidden; min-height: 640px; }
.contact-photo img, .contact-photo .tytan-imgslot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background-size: cover; background-position: center; }
.contact-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, rgba(7,24,47,0.5), rgba(7,24,47,0.1)); }
.contact-photo .cap {
  position: absolute; left: 28px; bottom: 26px; z-index: 2; max-width: 24ch;
  font-family: var(--tar-font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: #fff; line-height: 1.6;
}
.contact-photo .cap strong { color: var(--tar-ore-500); display: block; font-weight: 500; margin-bottom: 4px; }

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 1000px) {
  .site-nav { padding: 20px 22px; }
  .site-nav .links, .site-nav .lang-toggle, .nav-cta { display: none; }
  .nav-burger { display: flex; flex-direction: column; gap: 5px; cursor: pointer; }
  .nav-burger span { width: 26px; height: 2px; background: #fff; display: block; }
  .hero-copy { padding-top: 120px; }
  .hero-strip .row { grid-template-columns: 1fr 1fr; gap: 22px; }
  .hero-strip .tag { grid-column: 1 / -1; }
  .sec-head, .dowedo-grid, .whoweare-grid, .contact-grid, .profile-grid { grid-template-columns: 1fr; gap: 36px; }
  .leaders-grid, .std-grid, .track-grid { grid-template-columns: 1fr; }
  .profile-aside { position: static; max-width: 420px; }
  .std-card { border-right: 0; border-bottom: 1px solid var(--tar-border); }
  .tr-cell { border-right: 0; border-bottom: 1px solid rgba(255,255,255,0.16); }
  .contact-form { padding: 72px 22px; max-width: none; }
  .contact-photo { min-height: 340px; }
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
  section { padding: 84px 0; }
}
@media (max-width: 600px) {
  .container, .hero-inner { padding-left: 22px; padding-right: 22px; }
  .hero-strip .row { grid-template-columns: 1fr 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr; }
}

/* =========================================================================
   INNER PAGES  (lifted from the design handoff's tytan-pages.css; the
   Tweaks panel is intentionally omitted — mockup-only, not shipped)
   ========================================================================= */

/* ---------- PAGE HERO (shorter than home hero) ------------------------- */
.page-hero .hero-inner { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 40px; }
.page-hero .hero-copy { padding: 0 0 64px; max-width: 880px; }
.page-hero .hero-strip { position: absolute; left: 0; right: 0; bottom: 0; }

/* =========================================================================
   EDITORIAL INTRO BAND  (lead statement)
   ========================================================================= */
.lead-band { background: var(--tar-bone-100); border-bottom: 1px solid var(--tar-border); }
.lead-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 64px; align-items: start; }
.lead-grid .statement {
  font-family: var(--tar-font-display); font-weight: 500;
  font-size: clamp(30px,3.4vw,46px); line-height: 1.08; letter-spacing: -0.03em;
  color: var(--tar-cobalt-900); margin: 14px 0 0; max-width: 16ch;
}
.lead-grid .statement em { font-style: italic; color: var(--tar-brand); }
.lead-grid .support p { font-size: 17px; line-height: 1.65; color: var(--tar-text-muted); margin: 0 0 18px; }
.lead-grid .support p:last-child { margin-bottom: 0; }

/* =========================================================================
   ALTERNATING TEXT + IMAGE ROWS  (mission / vision)
   ========================================================================= */
.alt-rows { background: var(--tar-bone-200); }
.alt-row { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.alt-row + .alt-row { margin-top: 96px; }
.alt-row.flip .alt-text { order: 2; }
.alt-row.flip .alt-photo { order: 1; }
.alt-text .kicker {
  font-family: var(--tar-font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--tar-ore-600); margin: 0 0 16px;
}
.alt-text h2 {
  font-family: var(--tar-font-display); font-weight: 500;
  font-size: clamp(30px,3.6vw,48px); line-height: 1.02; letter-spacing: -0.03em;
  margin: 0 0 18px; color: var(--tar-cobalt-900);
}
.alt-text h2 em { font-style: italic; color: var(--tar-brand); }
.alt-text p { font-size: 16.5px; line-height: 1.62; color: var(--tar-text-muted); margin: 0 0 16px; max-width: 50ch; }
.alt-text .row-foot { margin-top: 26px; display: flex; gap: 14px; flex-wrap: wrap; }
.alt-photo { position: relative; overflow: hidden; min-height: 440px; }
.alt-photo img, .alt-photo .tytan-imgslot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background-size: cover; background-position: center; }
.alt-photo .cap {
  position: absolute; left: 22px; bottom: 20px; z-index: 2;
  font-family: var(--tar-font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: #fff; background: rgba(7,24,47,0.5); padding: 8px 12px; backdrop-filter: blur(2px);
}
.alt-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(7,24,47,0.34), transparent 55%); }

/* Commitment row: a dense portrait technical map shown IN FULL as a framed,
   matted document (contain, not cover) rather than a bled/cropped photo. */
.alt-photo--map {
  overflow: visible; min-height: 0; aspect-ratio: 30 / 42;
  background: #fff; border: 1px solid var(--tar-border);
  border-radius: var(--tar-radius-sm); box-shadow: var(--tar-shadow-2);
  padding: 16px 16px 46px;
}
.alt-photo--map .tytan-imgslot {
  inset: 16px 16px 46px; width: auto; height: auto;
  background-size: contain; background-repeat: no-repeat; background-position: center;
}
.alt-photo--map::after { display: none; }
.alt-photo--map .cap {
  left: 0; right: 0; bottom: 16px; text-align: center;
  color: var(--tar-text-subtle); background: none; backdrop-filter: none; padding: 0;
}

/* =========================================================================
   OPERATION CARDS  (2x2, image + icon + body + link)
   ========================================================================= */
.ops { background: var(--tar-bone-100); border-top: 1px solid var(--tar-border); }
.ops-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.op-card {
  background: var(--tar-bone-200); border: 1px solid var(--tar-border); display: flex; flex-direction: column;
  transition: box-shadow var(--tar-dur) var(--tar-ease), transform var(--tar-dur) var(--tar-ease);
}
.op-card:hover { box-shadow: var(--tar-shadow-2); transform: translateY(-2px); }
.op-photo { position: relative; aspect-ratio: 16/8; overflow: visible; }
.op-photo img, .op-photo .tytan-imgslot { width: 100%; height: 100%; object-fit: cover; background-size: cover; background-position: center; }
.op-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(7,24,47,0.46), transparent 55%); }
.op-photo .step {
  position: absolute; top: 18px; left: 20px; z-index: 2;
  font-family: var(--tar-font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.85);
}
.op-photo .ic {
  position: absolute; left: 20px; bottom: -26px; z-index: 3;
  width: 54px; height: 54px; background: var(--tar-cobalt-900); color: var(--tar-ore-500);
  display: flex; align-items: center; justify-content: center;
}
.op-photo .ic svg { width: 26px; height: 26px; }
.op-body { padding: 42px 28px 28px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.op-body h3 { font-family: var(--tar-font-display); font-weight: 500; font-size: 28px; line-height: 1.0; letter-spacing: -0.02em; color: var(--tar-cobalt-900); margin: 0; }
.op-body p { font-size: 15px; line-height: 1.6; color: var(--tar-text-muted); margin: 0; }
.op-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-top: auto; padding-top: 20px; border-top: 1px solid var(--tar-border);
}
.op-foot .meta { font-family: var(--tar-font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tar-ore-600); max-width: 22ch; line-height: 1.4; }
.op-link {
  font-family: var(--tar-font-heading); font-size: 13px; font-weight: 600; color: var(--tar-cobalt-900);
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
}
.op-link .arr { transition: transform var(--tar-dur) var(--tar-ease); }
.op-link:hover .arr { transform: translateX(4px); }

/* =========================================================================
   ASSET FEATURE  (big image + fact sheet)
   ========================================================================= */
.assets { background: var(--tar-bone-300); border-top: 1px solid var(--tar-border); }
.asset-feature { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 0; border: 1px solid var(--tar-border); background: var(--tar-bone-100); }
.asset-feature .photo { position: relative; min-height: 480px; overflow: hidden; }
.asset-feature .photo img, .asset-feature .photo .tytan-imgslot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background-size: cover; background-position: center; }
.asset-feature .photo .badge {
  position: absolute; top: 22px; left: 22px; z-index: 2;
  font-family: var(--tar-font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--tar-cobalt-900); background: var(--tar-ore-500); padding: 8px 12px;
}
.asset-feature .info { padding: 48px 44px; display: flex; flex-direction: column; }
.asset-feature .info .kicker { font-family: var(--tar-font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--tar-ore-600); margin: 0 0 14px; }
.asset-feature .info h3 { font-family: var(--tar-font-display); font-weight: 500; font-size: clamp(30px,3.4vw,44px); line-height: 1.0; letter-spacing: -0.03em; color: var(--tar-cobalt-900); margin: 0 0 16px; }
.asset-feature .info p { font-size: 15.5px; line-height: 1.62; color: var(--tar-text-muted); margin: 0 0 26px; }
.fact-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid var(--tar-border); margin-top: auto; }
.fact { padding: 18px 0; border-bottom: 1px solid var(--tar-border); }
.fact:nth-child(odd) { padding-right: 18px; border-right: 1px solid var(--tar-border); }
.fact:nth-child(even) { padding-left: 18px; }
.fact .k { font-family: var(--tar-font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tar-text-subtle); margin-bottom: 6px; }
.fact .v { font-family: var(--tar-font-heading); font-size: 17px; font-weight: 600; color: var(--tar-cobalt-900); letter-spacing: -0.01em; }

.asset-mini { display: grid; grid-template-columns: repeat(3,1fr); gap: 0; border: 1px solid var(--tar-border); border-top: 0; background: var(--tar-bone-100); }
.asset-mini .cell { padding: 32px 32px; border-right: 1px solid var(--tar-border); display: flex; flex-direction: column; gap: 8px; }
.asset-mini .cell:last-child { border-right: 0; }
.asset-mini .place { font-family: var(--tar-font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tar-ore-600); }
.asset-mini .v { font-family: var(--tar-font-display); font-weight: 500; font-size: clamp(30px,3vw,44px); line-height: 0.95; letter-spacing: -0.03em; color: var(--tar-cobalt-900); }
.asset-mini .v sup { font-size: 0.32em; color: var(--tar-ore-600); top: -1.4em; margin-left: 2px; }
.asset-mini .d { font-size: 14px; line-height: 1.55; color: var(--tar-text-muted); margin: 4px 0 0; }

/* =========================================================================
   NEWSROOM — featured + feed
   ========================================================================= */
.news-feature { background: var(--tar-bone-100); border-top: 1px solid var(--tar-border); }
.feature-lead { display: grid; grid-template-columns: 1.1fr 0.9fr; border: 1px solid var(--tar-border); background: var(--tar-bone-200); }
.feature-lead .photo { position: relative; min-height: 420px; overflow: hidden; }
.feature-lead .photo img, .feature-lead .photo .tytan-imgslot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background-size: cover; background-position: center; }
.feature-lead .body { padding: 48px 44px; display: flex; flex-direction: column; justify-content: center; }
.news-meta { display: flex; align-items: center; gap: 14px; font-family: var(--tar-font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tar-text-subtle); margin-bottom: 18px; }
.news-cat { color: var(--tar-ore-600); }
.news-cat::after { content: "·"; margin-left: 14px; color: var(--tar-border-strong); }
.feature-lead .body h3 { font-family: var(--tar-font-display); font-weight: 500; font-size: clamp(28px,3.2vw,42px); line-height: 1.04; letter-spacing: -0.03em; color: var(--tar-cobalt-900); margin: 0 0 16px; }
.feature-lead .body p { font-size: 16px; line-height: 1.62; color: var(--tar-text-muted); margin: 0 0 26px; max-width: 46ch; }

.news-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 28px; margin-top: 28px; }
.ncard { background: var(--tar-bone-200); border: 1px solid var(--tar-border); display: flex; flex-direction: column; transition: box-shadow var(--tar-dur) var(--tar-ease), transform var(--tar-dur) var(--tar-ease); }
.ncard:hover { box-shadow: var(--tar-shadow-2); transform: translateY(-2px); }
.ncard .photo { aspect-ratio: 16/9; overflow: hidden; }
.ncard .photo img, .ncard .photo .tytan-imgslot { width: 100%; height: 100%; object-fit: cover; background-size: cover; background-position: center; }
.ncard .body { padding: 24px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.ncard h4 { font-family: var(--tar-font-heading); font-size: 18px; font-weight: 600; line-height: 1.22; letter-spacing: -0.01em; color: var(--tar-cobalt-900); margin: 0 0 10px; }
.ncard p { font-size: 14px; line-height: 1.55; color: var(--tar-text-muted); margin: 0 0 18px; }
.ncard .op-link { margin-top: auto; }

/* feed */
.feed { background: var(--tar-bone-200); }
.feed-controls { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 36px; }
.chips { display: flex; gap: 10px; flex-wrap: wrap; }
.chip {
  font-family: var(--tar-font-heading); font-size: 13px; font-weight: 500; color: var(--tar-text-muted);
  padding: 9px 18px; border: 1px solid var(--tar-border-strong); background: var(--tar-bone-100);
  border-radius: var(--tar-radius-pill); cursor: pointer;
  transition: background var(--tar-dur) var(--tar-ease), color var(--tar-dur) var(--tar-ease), border-color var(--tar-dur) var(--tar-ease);
}
.chip:hover { border-color: var(--tar-cobalt-900); color: var(--tar-cobalt-900); }
.chip.active { background: var(--tar-cobalt-900); color: #fff; border-color: var(--tar-cobalt-900); }
.feed-search { position: relative; min-width: 280px; flex: 0 1 320px; }
.feed-search input {
  width: 100%; font-family: var(--tar-font-body); font-size: 14px; color: var(--tar-cobalt-900);
  background: var(--tar-bone-100); border: 1px solid var(--tar-border-strong); border-radius: var(--tar-radius-pill);
  padding: 11px 16px 11px 42px; transition: border-color var(--tar-dur-fast) var(--tar-ease), box-shadow var(--tar-dur-fast) var(--tar-ease);
}
.feed-search input:focus { outline: none; border-color: var(--tar-brand); box-shadow: 0 0 0 3px var(--tar-cobalt-100); }
.feed-search svg { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--tar-text-subtle); }

.feed-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; }
.feed-item {
  display: grid; grid-template-columns: 96px 1fr; gap: 20px; align-items: center;
  padding: 22px 0; border-top: 1px solid var(--tar-border);
  transition: background var(--tar-dur) var(--tar-ease);
}
.feed-item:hover { background: var(--tar-bone-100); }
.feed-item .thumb { width: 96px; height: 72px; overflow: hidden; position: relative; }
.feed-item .thumb img, .feed-item .thumb .tytan-imgslot { width: 100%; height: 100%; object-fit: cover; background-size: cover; background-position: center; filter: saturate(0.92); }
.feed-item .thumb::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px rgba(7,24,47,0.12); }
.feed-item .fi-meta { font-family: var(--tar-font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tar-text-subtle); margin-bottom: 7px; }
.feed-item .fi-meta b { color: var(--tar-ore-600); font-weight: 500; }
.feed-item h4 { font-family: var(--tar-font-heading); font-size: 16px; font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; color: var(--tar-cobalt-900); margin: 0 0 5px; }
.feed-item p { font-size: 13.5px; line-height: 1.5; color: var(--tar-text-muted); margin: 0; }
.feed-empty { grid-column: 1 / -1; padding: 48px 0; text-align: center; font-family: var(--tar-font-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tar-text-subtle); }
.feed-foot { display: flex; justify-content: center; margin-top: 44px; }

/* =========================================================================
   LEGAL — sticky TOC + prose sections
   ========================================================================= */
.legal { background: var(--tar-bone-100); }
.legal-layout { display: grid; grid-template-columns: 260px 1fr; gap: 72px; align-items: start; }
.legal-toc { position: sticky; top: 40px; }
.legal-toc .kicker { font-family: var(--tar-font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--tar-ore-600); margin: 0 0 18px; }
.legal-toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.legal-toc li { counter-increment: toc; border-top: 1px solid var(--tar-border); }
.legal-toc a {
  display: flex; gap: 12px; padding: 13px 0; font-family: var(--tar-font-heading); font-size: 14px; font-weight: 500;
  color: var(--tar-text-muted); transition: color var(--tar-dur-fast) var(--tar-ease);
}
.legal-toc a::before { content: counter(toc,decimal-leading-zero); font-family: var(--tar-font-mono); font-size: 11px; color: var(--tar-text-subtle); }
.legal-toc a:hover, .legal-toc a.is-active { color: var(--tar-cobalt-900); }
.legal-section { padding-bottom: 52px; margin-bottom: 52px; border-bottom: 1px solid var(--tar-border); scroll-margin-top: 40px; }
.legal-section:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.legal-section .sub { font-family: var(--tar-font-heading); font-size: 13px; font-weight: 600; letter-spacing: 0.02em; color: var(--tar-ore-600); margin: 0 0 12px; }
.legal-section h2 { font-family: var(--tar-font-display); font-weight: 500; font-size: clamp(28px,3vw,40px); line-height: 1.04; letter-spacing: -0.03em; color: var(--tar-cobalt-900); margin: 0 0 18px; }
.legal-section p { font-size: 16px; line-height: 1.66; color: var(--tar-text); margin: 0 0 16px; max-width: 62ch; }
.legal-section p:last-child { margin-bottom: 0; }
.legal-section ul { margin: 18px 0 0; padding: 0; list-style: none; max-width: 62ch; }
.legal-section li { position: relative; padding: 0 0 12px 24px; font-size: 15px; line-height: 1.6; color: var(--tar-text-muted); }
.legal-section li::before { content: ""; position: absolute; left: 0; top: 10px; width: 7px; height: 7px; background: var(--tar-ore-600); }

/* =========================================================================
   LIGHTER INNER-PAGE CTA  (reuses .foot-cta band styling)
   ========================================================================= */
.cta-lite { background: var(--tar-cobalt-800); color: #fff; }
.cta-lite .container { display: flex; align-items: center; justify-content: space-between; gap: 40px; padding-top: 56px; padding-bottom: 56px; flex-wrap: wrap; }
.cta-lite .copy { max-width: 30ch; }
.cta-lite .eyebrow { color: var(--tar-ore-500); margin-bottom: 16px; }
.cta-lite .eyebrow::before { background: var(--tar-ore-500); }
.cta-lite h3 { font-family: var(--tar-font-display); font-weight: 500; font-size: clamp(26px,2.8vw,40px); line-height: 1.06; letter-spacing: -0.02em; margin: 0; }
.cta-lite h3 em { font-style: italic; color: var(--tar-ore-500); }
.cta-lite .actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* =========================================================================
   LEADERSHIP — grouped officer / director sets
   ========================================================================= */
.leaders .lead-group + .lead-group { margin-top: 104px; }

/* =========================================================================
   CONTACT — offices / details band
   ========================================================================= */
.offices { background: var(--tar-bone-300); border-top: 1px solid var(--tar-border); }
.offices-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap: 0; border: 1px solid var(--tar-border); background: var(--tar-bone-100); } /* auto-fit so the row stays even whether 2 or 3 office cards are shown */
.office { padding: 38px 34px; border-right: 1px solid var(--tar-border); display: flex; flex-direction: column; gap: 10px; }
.office:last-child { border-right: 0; }
.office .k { font-family: var(--tar-font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tar-ore-600); }
.office h4 { font-family: var(--tar-font-heading); font-size: 19px; font-weight: 600; letter-spacing: -0.01em; color: var(--tar-cobalt-900); margin: 0; }
.office p { font-size: 15px; line-height: 1.6; color: var(--tar-text-muted); margin: 0; }
.office a { color: var(--tar-brand); transition: color var(--tar-dur-fast) var(--tar-ease); }
.office a:hover { color: var(--tar-cobalt-900); }

/* =========================================================================
   RESPONSIVE — inner pages
   ========================================================================= */
@media (max-width: 1000px) {
  .page-hero .hero-copy { padding-top: 120px; }
  .lead-grid, .alt-row, .ops-grid, .asset-feature, .feature-lead, .legal-layout { grid-template-columns: 1fr; gap: 36px; }
  .alt-row + .alt-row { margin-top: 56px; }
  .alt-row.flip .alt-text, .alt-row.flip .alt-photo { order: 0; }
  .alt-photo, .asset-feature .photo, .feature-lead .photo { min-height: 320px; }
  .news-cards { grid-template-columns: 1fr; }
  .asset-mini { grid-template-columns: 1fr; }
  .asset-mini .cell { border-right: 0; border-bottom: 1px solid var(--tar-border); }
  .feed-list { grid-template-columns: 1fr; gap: 0; }
  .legal-toc { position: static; }
  .offices-grid { grid-template-columns: 1fr; }
  .office { border-right: 0; border-bottom: 1px solid var(--tar-border); }
}
@media (max-width: 600px) {
  .feature-lead .body, .asset-feature .info { padding: 32px 22px; }
  .fact-list { grid-template-columns: 1fr; }
  .fact:nth-child(odd) { border-right: 0; padding-right: 0; }
  .fact:nth-child(even) { padding-left: 0; }
}