/* techinnovations.ai | Option B, Infrastructure Atlas
   Built by Claude Code, 20 October 2026, v1, preview only.
   Tokens from 02_Brand_and_UX/20261020_TI_OptionB_Approved_DesignAndBuildHandoff_v1.md */

:root{
  --navy:#1F3864;
  --midnight:#071D35;
  --gold:#B8860B;
  /* Small gold text at 12 to 13.5 px fails WCAG AA against the light and navy
     backgrounds at 3.1 and 3.6 to 1. Two accessible variants, measured
     20 October 2026; the brand gold stays on rules, bars and borders. */
  --gold-on-light:#8A6508;
  --gold-on-navy:#D9A826;
  --warm-white:#FCFAF4;
  --cool-white:#F7FAFC;
  --ink:#16213A;
  --muted-text:#55617A;
  --rule:#E2E6EE;
  --accent-blue:#2A5CAA;
  --container:1240px;
  --gutter:clamp(20px,5vw,64px);
  /* One family for the whole site: Palatino throughout, decided by Mahesh,
     20 October 2026. There is deliberately no sans face anywhere. */
  --body:"Palatino Linotype",Palatino,"Book Antiqua","URW Palladio L",Georgia,serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--warm-white);color:var(--ink);
  font-family:var(--body);font-size:18px;line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--accent-blue)}
a:focus-visible,button:focus-visible{outline:3px solid var(--gold);outline-offset:3px}

.wrap{max-width:var(--container);margin:0 auto;padding-inline:var(--gutter)}

/* ---------- header ---------- */
.site-header{
  height:76px;display:flex;align-items:center;
  background:var(--warm-white);border-bottom:1px solid var(--rule);
  position:sticky;top:0;z-index:20;
}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;width:100%}
.brand img{height:34px;width:auto}
.nav{display:flex;gap:28px;align-items:center}
.nav a{
  color:var(--navy);text-decoration:none;font-size:16px;font-weight:600;
  letter-spacing:.01em;padding:6px 0;border-bottom:2px solid transparent;
}
.nav a:hover{border-bottom-color:var(--gold)}
.nav-cta{
  background:var(--navy);color:#fff !important;border-radius:3px;
  padding:10px 18px !important;border:0 !important;font-weight:600;
}
.nav-cta:hover{background:var(--midnight)}
.nav-toggle{display:none}

/* ---------- hero ---------- */
.hero{position:relative;min-height:600px;display:flex;align-items:center;background:var(--midnight)}
.hero-media{position:absolute;inset:0;overflow:hidden}
.hero-media img{width:100%;height:100%;object-fit:cover;opacity:.85}
.hero-media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(7,29,53,.94) 0%,rgba(7,29,53,.86) 38%,rgba(7,29,53,.35) 72%,rgba(7,29,53,.15) 100%);
}
.hero .wrap{position:relative;z-index:2;padding-block:72px;color:#fff}
.eyebrow{
  font-size:13.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-on-navy);font-weight:600;margin:0 0 18px;
}
.hero h1{
  font-size:clamp(32px,4.2vw,60px);line-height:1.1;letter-spacing:-.01em;
  margin:0 0 22px;max-width:18ch;font-weight:700;
}
.hero .qualifier{font-size:18px;max-width:58ch;margin:0 0 16px;color:#E8EDF6}
.hero .support{font-size:17px;max-width:56ch;margin:0 0 30px;color:#C3CEE2}
.cta-row{display:flex;gap:14px;flex-wrap:wrap}
.btn{
  display:inline-block;text-decoration:none;font-weight:600;font-size:16px;
  padding:14px 26px;border-radius:3px;transition:background .15s,color .15s;
}
.btn-primary{background:var(--gold);color:#1a1300}
.btn-primary:hover{background:#d19f1a}
.btn-ghost{border:1.5px solid rgba(255,255,255,.55);color:#fff}
.btn-ghost:hover{background:rgba(255,255,255,.12)}

/* ---------- fact columns ---------- */
.facts{background:var(--navy);color:#fff}
.facts .wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;padding-block:44px}
.fact h3{
  font-size:12px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--gold-on-navy);margin:0 0 10px;font-weight:600;
}
.fact p{margin:0;font-size:16px;color:#DCE4F1;line-height:1.55}

/* ---------- generic sections ---------- */
section{padding-block:clamp(56px,7vw,92px)}
.section-kicker{
  font-size:12px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--gold-on-light);font-weight:600;margin:0 0 14px;
}
h2{font-size:clamp(27px,3vw,40px);line-height:1.18;margin:0 0 20px;color:var(--navy);font-weight:600}
h3{font-size:19px;margin:0 0 10px;color:var(--navy)}
.lede{font-size:19px;max-width:62ch;color:var(--ink)}
p{max-width:68ch}
.alt{background:var(--cool-white)}
.rule{height:3px;width:56px;background:var(--gold);margin-bottom:26px}

/* ---------- split ---------- */
.split{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(28px,4vw,64px);align-items:center}
.split img,.split .ph{border-radius:4px}

/* ---------- image placeholder ---------- */
.ph{
  background:
    repeating-linear-gradient(135deg,#eef1f7 0 14px,#e7ebf3 14px 28px);
  border:1px dashed #9FB0CC;border-radius:4px;
  display:flex;align-items:center;justify-content:center;text-align:center;
  color:#51607A;font-size:13px;line-height:1.45;padding:22px;min-height:230px;
}
.ph span{max-width:34ch}
.ph strong{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#51607A;margin-bottom:6px}

/* ---------- cards ---------- */
.cards{display:grid;gap:22px}
.cards-4{grid-template-columns:repeat(4,1fr)}
.cards-2{grid-template-columns:repeat(2,1fr)}
.card{
  background:#fff;border:1px solid var(--rule);border-radius:4px;overflow:hidden;
  display:flex;flex-direction:column;text-decoration:none;color:inherit;
}
.card:hover{border-color:var(--gold)}
.card .media{aspect-ratio:16/10;overflow:hidden;background:#e7ebf3}
.card .media img{width:100%;height:100%;object-fit:cover}
.card .media .ph{height:100%;min-height:0;border:0;border-radius:0}
.card .body{padding:20px 22px 24px}
.card h3{margin:0 0 8px;font-size:18px}
.card p{margin:0;font-size:15px;color:var(--muted-text)}
.track-no{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-on-light);font-weight:600;margin:0 0 6px}

/* ---------- stage labels ---------- */
.stage{
  display:inline-block;font-size:12px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;padding:4px 10px;border-radius:2px;white-space:nowrap;
}
.stage-priority{background:#FBF0D6;color:#6B4E04;border:1px solid #E3C77A}
.stage-later{background:#EDF1F8;color:#3C5075;border:1px solid #C8D3E6}

/* ---------- discipline rows ---------- */
.disciplines{border-top:1px solid var(--rule)}
.disc{
  display:grid;grid-template-columns:minmax(220px,1fr) 2fr auto;gap:28px;
  padding:26px 0;border-bottom:1px solid var(--rule);align-items:start;
}
.disc h3{margin:0;font-size:18px}
.disc p{margin:0;font-size:16px;color:var(--muted-text)}

/* ---------- evidence list ---------- */
.evidence dt{font-weight:650;color:var(--navy);margin-top:18px}
.evidence dd{margin:6px 0 0;color:var(--muted-text);max-width:68ch}

/* ---------- notices ---------- */
.notice{background:var(--cool-white);border-top:1px solid var(--rule)}
.notice p{font-size:14.5px;color:var(--muted-text);max-width:92ch}

/* ---------- cta band ---------- */
.band{background:var(--midnight);color:#fff}
.band h2{color:#fff}
.band p{color:#C3CEE2}

/* ---------- footer ---------- */
.site-footer{background:var(--navy);color:#C9D4E6;font-size:14.5px}
.site-footer .wrap{padding-block:44px}
.site-footer a{color:#E4EAF5;text-decoration:none;border-bottom:1px solid rgba(228,234,245,.3)}
.site-footer a:hover{border-bottom-color:var(--gold)}
.footer-nav{display:flex;flex-wrap:wrap;gap:8px 20px;margin:0 0 22px;padding:0;list-style:none}
.footer-note{max-width:92ch;margin:0 0 12px;color:#AFBDD4}
.rule26{font-style:normal;font-size:13px;line-height:1.7;color:#9FB0CC;max-width:92ch;margin:0 0 4px}
.disclosure{border-top:1px solid rgba(255,255,255,.14);padding-top:18px;margin-top:22px;color:#9FB0CC;font-size:13.5px;max-width:92ch}

/* ---------- preview banner ---------- */
.preview-bar{
  background:#6B1D1D;color:#FFE9E9;font-size:13px;text-align:center;
  padding:8px 16px;letter-spacing:.02em;
}

/* ---------- responsive ---------- */
@media (max-width:1199px){
  .cards-4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:767px){
  body{font-size:16px}
  .nav{display:none}
  .hero{min-height:0}
  .hero .wrap{padding-block:48px}
  .hero h1{font-size:clamp(31px,8.6vw,36px);max-width:none}
  .hero .qualifier{font-size:16.5px}
  .facts .wrap{grid-template-columns:1fr;gap:26px;padding-block:34px}
  .split{grid-template-columns:1fr;gap:26px}
  .cards-4,.cards-2{grid-template-columns:1fr}
  .disc{grid-template-columns:1fr;gap:10px;padding:22px 0}
  .btn{width:100%;text-align:center}
  .cta-row{flex-direction:column;align-items:stretch}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important}
}

/* ---------- data tables (no diagrams rule: processes are written as text) ---------- */
.tbl{width:100%;border-collapse:collapse;margin-top:28px;font-size:16px}
.tbl caption{text-align:left;font-size:14px;color:var(--muted-text);padding-bottom:12px}
.tbl th,.tbl td{
  text-align:left;vertical-align:top;padding:14px 18px 14px 0;
  border-bottom:1px solid var(--rule);
}
.tbl thead th{
  font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--navy);
  font-weight:600;border-bottom:2px solid var(--gold);padding-bottom:10px;
}
.tbl tbody th{font-weight:650;color:var(--navy);white-space:nowrap}
.tbl td{color:var(--muted-text)}
.tbl .num{white-space:nowrap;color:var(--navy);font-weight:650}
.table-scroll{overflow-x:auto}

/* ---------- numbered steps ---------- */
.steps{counter-reset:step;list-style:none;margin:30px 0 0;padding:0;border-top:1px solid var(--rule)}
.steps > li{
  counter-increment:step;padding:26px 0 26px 62px;position:relative;
  border-bottom:1px solid var(--rule);max-width:76ch;
}
.steps > li::before{
  content:counter(step);position:absolute;left:0;top:24px;
  width:38px;height:38px;border-radius:50%;background:var(--navy);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:650;
}
.steps h3{margin:0 0 8px}
.steps p{margin:0 0 10px;font-size:16.5px}
.steps p:last-child{margin-bottom:0}

/* ---------- text pages ---------- */
.prose h2{font-size:clamp(23px,2.2vw,30px);margin-top:48px}
.prose h2:first-child{margin-top:0}
.prose p{font-size:17px}
.prose ul{max-width:68ch;font-size:17px}
.pending{
  background:#FBF0D6;border:1px solid #E3C77A;border-left:4px solid var(--gold);
  border-radius:3px;padding:14px 18px;margin:18px 0;font-size:15px;color:#6B4E04;
  max-width:78ch;
}
.pending strong{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:4px}
.page-lead{max-width:70ch;font-size:19px}
.updated{font-size:14px;color:var(--muted-text);margin-top:44px;border-top:1px solid var(--rule);padding-top:16px}

/* ---------- mobile navigation ----------
   The stylesheet hid .nav below 768px with nothing in its place, which left a phone
   with no navigation at all. Shown as a wrapped row instead; no script needed. */
@media (max-width:767px){
  .site-header{height:auto;position:static;padding-block:14px}
  .site-header .wrap{flex-direction:column;align-items:flex-start;gap:14px}
  .nav{display:flex;flex-wrap:wrap;gap:10px 18px;width:100%}
  .nav a{font-size:15px}
  .nav-cta{padding:9px 16px !important}
  .tbl,.tbl thead th,.tbl th,.tbl td{font-size:14.5px}
  .tbl th,.tbl td{padding:11px 12px 11px 0}
  .steps > li{padding-left:50px}
  .steps > li::before{width:32px;height:32px;font-size:15px;top:22px}
}

/* gold kickers inside dark sections use the navy-safe variant */
.band .section-kicker,.hero .section-kicker,.facts .section-kicker{color:var(--gold-on-navy)}

/* the filename a placeholder is waiting for, preview build only */
.imgfile{
  display:block;margin-top:8px;font-style:normal;font-size:11px;letter-spacing:.04em;
  color:#3C5075;background:rgba(255,255,255,.72);border:1px solid #C8D3E6;
  border-radius:2px;padding:3px 7px;
}

/* delivered photographs sit in the same slots the placeholders occupied.
   In a split panel the picture has auto height, so the image sets its own height from
   its aspect ratio. Giving it height:100% there collapsed the box to zero, and a
   zero-height lazy image never enters the viewport, so it never loaded at all. */
.split picture{display:block;border-radius:4px;overflow:hidden;min-height:0 !important}
.split picture img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;display:block}
.card .media picture{display:block;width:100%;height:100%}
.card .media picture img{width:100%;height:100%;object-fit:cover}

/* a photograph behind a page hero, under the existing navy overlay */
.hero-media picture{position:absolute;inset:0;display:block}
.hero-media picture img{width:100%;height:100%;object-fit:cover;opacity:.85}

/* statutory identity block: three lines, small type (Mahesh, L1; Cowork -51) */
.identity{
  font-size:14px;line-height:1.6;color:var(--muted-text);
  border-left:3px solid var(--rule);padding-left:16px;margin-top:26px;max-width:62ch;
}

/* Area finder. White band, navy and gold as text and lines only, Palatino throughout.
   40px desktop and 32px mobile breathing room per ChatGPT -71. */
.finder{background:#fff;border-top:1px solid #E6E9EF;border-bottom:1px solid #E6E9EF}
.finder .wrap{padding-block:40px}
.finder h2{margin:0 0 6px}
.f-label{display:block;font-size:15px;color:#4A5468;margin:0 0 8px}
.f-input{width:100%;max-width:560px;font-family:var(--body);font-size:18px;padding:13px 15px;
  border:1px solid #C7CEDB;border-radius:3px;background:#fff;color:var(--navy)}
.f-input:focus{outline:2px solid var(--gold-on-light);outline-offset:1px;border-color:var(--navy)}
.f-hint{font-size:14px;color:#6B7487;margin:8px 0 0;max-width:62ch}
.f-out{margin-top:20px;display:grid;gap:14px}
.f-hit{border-left:3px solid var(--gold-on-light);padding:12px 0 12px 16px}
.f-area{margin:0;font-size:18px;font-weight:700;color:var(--navy)}
.f-meta{margin:4px 0 6px;font-size:13.5px;display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.f-trk{color:#4A5468}
.f-stage{border:1px solid #C7CEDB;border-radius:2px;padding:1px 7px;font-size:12.5px;color:#4A5468}
.f-stage-p{border-color:var(--gold-on-light);color:var(--gold-on-light)}
.f-need{margin:0 0 10px;max-width:70ch;color:#2A3145}
.f-go{display:inline-block}
.f-none{margin:0;color:#4A5468}
.f-cards-h{margin:26px 0 0;font-size:15px;color:#4A5468}
.f-cards{margin-top:10px;display:grid;gap:10px;grid-template-columns:repeat(3,1fr)}
.f-card{display:block;padding:13px 15px;border:1px solid #C7CEDB;border-radius:3px;
  color:var(--navy);text-decoration:none;font-size:15.5px;background:#fff}
.f-card:hover{border-color:var(--gold-on-light);color:var(--gold-on-light)}
.f-fallback{margin-top:18px;font-size:15px}
.f-az{columns:2;margin-top:18px;font-size:15px}
.f-az .f-track{color:#6B7487;font-size:13px;display:block}
@media(max-width:767px){
  .finder .wrap{padding-block:32px}
  .f-cards{grid-template-columns:1fr}
  .f-az{columns:1}
}

/* Three-box strip under each track standfirst. White, navy heading, gold rule, Palatino;
   stacks on phones. 40px desktop and 32px mobile breathing room per ChatGPT -71. */
.threebox{background:#fff}
.threebox .wrap{padding-block:40px;display:grid;gap:26px;grid-template-columns:repeat(3,1fr)}
.tb h3{margin:0 0 10px;font-size:17px;color:var(--navy)}
.tb h3::after{content:"";display:block;width:34px;height:2px;background:var(--gold-on-light);margin-top:8px}
.tb p{margin:0;font-size:15.5px;line-height:1.62;color:#2A3145}
@media(max-width:767px){
  .threebox .wrap{padding-block:32px;grid-template-columns:1fr;gap:22px}
}

/* How it works sub-navigation, and the FAQ question blocks. */
.subnav{background:#fff;border-bottom:1px solid #E6E9EF}
.subnav .wrap{padding-block:16px;display:flex;flex-wrap:wrap;gap:22px}
.subnav a{color:var(--navy);font-size:15.5px;text-decoration:none;border-bottom:1px solid var(--gold-on-light);padding-bottom:2px}
.subnav a:hover{color:var(--gold-on-light)}
.faq-q{margin:0 0 26px;max-width:72ch}
.faq-q h3{margin:0 0 7px;font-size:17.5px;color:var(--navy)}
.faq-q h3 a{color:inherit;text-decoration:none}
.faq-q h3 a:hover{color:var(--gold-on-light)}
.faq-q p{margin:0;line-height:1.66}