/* Metric-adjusted local fallbacks — render at ~the same size/width as the webfonts
   so the pre-swap layout doesn't jump (FOUT fix, 2026-07-06). Tune %s if needed. */
@font-face{font-family:'Playfair Fallback';src:local('Georgia');
  size-adjust:103%;ascent-override:105%;descent-override:24%;line-gap-override:0%;}
@font-face{font-family:'Source Sans Fallback';src:local('Arial');
  size-adjust:94%;ascent-override:105%;descent-override:29%;line-gap-override:0%;}
/* ============================================================
   CCTE WEB DESIGN SYSTEM  —  single source of truth
   Change tokens here and every page restyles at once.
   Accent = evergreen (locked 2026-06-25). Red is reserved
   for genuine fraud/alert UI only — never general accents.
   ============================================================ */
:root{
  /* base */
  --navy:#14294C; --deep:#0C1B33; --steel:#2E6CA6; --ink:#1A222E;
  /* neutrals (cool) */
  --paper:#FBFCFD; --mist:#EDF1F6; --line:#E1E6EE; --muted:#5E6A7B;
  /* accent (evergreen) */
  --accent:#2E6B4F; --accent-deep:#1F4D39; --accent-rgb:46,107,79;
  /* alert only */
  --alert:#9E2A2B;
  /* type */
  --serif:'Playfair Display','Playfair Fallback',Georgia,serif;
  --sans:'Source Sans 3','Source Sans Fallback',system-ui,-apple-system,sans-serif;
  --hdr:72px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);color:var(--ink);line-height:1.6;background:var(--paper);-webkit-font-smoothing:antialiased}
h1,h2,h3,.serif{font-family:var(--serif);letter-spacing:-.01em}
img{display:block;max-width:100%}
a{color:var(--accent);text-decoration:none}
.wrap{max-width:1180px;margin:0 auto;padding:0 32px}
.eyebrow{font-size:12px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--accent)}
[id]{scroll-margin-top:88px}

/* ===== HEADER (transparent over hero -> solid on scroll) ===== */
header.site{position:fixed;top:0;left:0;right:0;z-index:50;background:transparent;border-bottom:1px solid transparent;transition:background .35s ease,box-shadow .35s ease,border-color .35s ease}
header.site.show{background:var(--deep);border-bottom-color:rgba(255,255,255,.08);box-shadow:0 6px 24px rgba(8,18,34,.28)}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;height:var(--hdr)}
.lockup{display:flex;align-items:center;gap:14px;min-width:0}
.lockup img{height:40px;width:auto;flex:0 0 auto;filter:drop-shadow(0 2px 10px rgba(8,18,34,.5))}
.lockup .wm{font-family:var(--serif);font-weight:700;font-size:20px;letter-spacing:.005em;color:#fff;white-space:nowrap;text-shadow:0 1px 14px rgba(8,18,34,.6);position:relative;top:-2px}  /* optical: Playfair's tall ascent renders glyphs low vs the sans nav */
.nav{display:flex;align-items:center;gap:34px}
.nav a{color:#fff;font-size:14.5px;font-weight:500;letter-spacing:.01em;text-shadow:0 1px 10px rgba(8,18,34,.55)}
.nav a:hover{opacity:.82}
.nav .pill{border:1px solid rgba(255,255,255,.45);border-radius:999px;padding:9px 19px;color:#fff;display:inline-flex;gap:7px;align-items:center;font-weight:600;text-shadow:none}
.nav .pill:hover{background:var(--accent);border-color:var(--accent);color:#fff;opacity:1}
.menu-btn,.menu-tgl{display:none}

/* ===== BUTTONS ===== */
.btn{display:inline-flex;align-items:center;gap:9px;padding:15px 28px;border-radius:6px;font-weight:600;font-size:15.5px;transition:.18s;font-family:var(--sans);cursor:pointer}
.btn-primary{background:var(--accent);color:#fff;box-shadow:0 8px 24px rgba(var(--accent-rgb),.32)}
.btn-primary:hover{background:var(--accent-deep);transform:translateY(-1px)}
.btn-ghost{color:#fff;border:1px solid rgba(255,255,255,.55)}
.btn-ghost:hover{background:rgba(255,255,255,.1)}

/* ===== HERO ===== */
.hero{position:relative;min-height:100vh;display:flex;align-items:flex-start;color:#fff;overflow:hidden}
.hero .bg{position:absolute;inset:0;background-position:center;background-size:cover;background-repeat:no-repeat}
/* image-agnostic scrim: darkens the left text column + top (breadcrumb) + bottom (content) so light text always reads */
.hero .bg::after{content:"";position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(10,23,41,.72) 0%,rgba(10,23,41,.34) 46%,rgba(10,23,41,0) 80%),
  linear-gradient(180deg,rgba(10,23,41,.55) 0%,rgba(10,23,41,.12) 26%,rgba(10,23,41,.18) 52%,rgba(10,23,41,.82) 100%)}
/* plain navy hero — used when we don't yet have a compelling, location-accurate photo */
.hero.plain{min-height:74vh;align-items:flex-end}
.hero.plain .bg{background:radial-gradient(120% 120% at 15% 10%,#1C3D69 0%,var(--navy) 48%,var(--deep) 100%)}
.hero.plain .bg::after{background:linear-gradient(180deg,rgba(10,23,41,.2),rgba(10,23,41,.5))}
.hero .wrap{position:relative;padding-top:clamp(300px,46vh,520px);padding-bottom:72px}
.hero.plain .wrap{padding-top:120px;padding-bottom:74px}
.hero .eyebrow{color:#EAF0F8;text-shadow:0 1px 10px rgba(8,18,34,.6)}
.hero h1{font-size:clamp(42px,6.2vw,84px);font-weight:700;line-height:1.02;margin:18px 0 22px;max-width:16ch}
.hero h1 em{font-style:italic;color:#fff}
.hero h1.rot{transition:opacity .45s ease,transform .45s ease}
.hero h1.rot.swap{opacity:0;transform:translateY(12px)}
.hero p.sub{font-size:clamp(18px,1.5vw,21px);max-width:60ch;color:#E8ECF3;line-height:1.65}
.hero .cta{display:flex;gap:16px;flex-wrap:wrap;margin-top:32px;align-items:center}
/* Locked hero layout (geo + home, not .plain): the text block is vertically
   centered in the viewport, and headline (3 lines) + subhead (4 lines) are
   reserved to a fixed height. Result: the eyebrow, headline, and buttons sit
   at the EXACT same position on the homepage, every hub, and every spoke —
   and the block re-centers on any screen height so the CTAs + scroll hint
   never fall off the bottom. Shorter headlines/subheads just leave whitespace. */
.hero:not(.plain){align-items:center}
.hero:not(.plain) .wrap{padding-top:90px;padding-bottom:90px}
.hero:not(.plain) h1{min-height:3.06em}
.hero:not(.plain) p.sub{min-height:6.6em}

/* ===== BREADCRUMB (hidden over hero; pins under the header on scroll) ===== */
.crumbs{position:fixed;top:var(--hdr);left:0;right:0;z-index:49;background:var(--deep);
  border-bottom:1px solid rgba(255,255,255,.08);opacity:0;transform:translateY(-10px);
  pointer-events:none;transition:opacity .3s ease,transform .3s ease}
.crumbs.show{opacity:1;transform:none;pointer-events:auto}
.crumbs .wrap{padding:11px 32px;font-size:13px;color:rgba(255,255,255,.7)}
.crumbs a{color:rgba(255,255,255,.7)}
.crumbs a:hover{color:#fff}
.crumbs span{color:#fff;font-weight:600}
.crumbs .sep{margin:0 9px;color:rgba(255,255,255,.4)}

/* ===== TRUST STRIP ===== */
.trust{background:var(--navy);color:#fff}
.trust .wrap{display:grid;grid-template-columns:repeat(4,1fr)}
.trust .cell{padding:40px 28px;border-right:1px solid rgba(255,255,255,.1)}
.trust .cell:last-child{border-right:none}
.trust .n{font-family:var(--serif);font-size:clamp(32px,3.4vw,46px);font-weight:600;line-height:1}
.trust .n span{color:#9FC3B0}
.trust .l{font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:#9FB0C6;margin-top:12px;line-height:1.5}

/* ===== EDITORIAL ===== */
.editorial{padding:104px 0 88px}
.editorial .grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:80px;align-items:start}
.editorial .lede-label{position:sticky;top:calc(var(--hdr) + 24px)}
.editorial h2{font-size:clamp(30px,3.4vw,44px);font-weight:600;color:var(--navy);line-height:1.12;margin-top:14px}
.editorial .body p{font-size:19px;color:var(--ink);margin-bottom:22px;line-height:1.7}
.editorial .body p:first-child{color:var(--navy)}
.editorial .body p:first-child::first-letter{font-family:var(--serif);font-size:60px;float:left;line-height:.72;padding:7px 14px 0 0;color:var(--accent);font-weight:700}

/* ===== PILLARS ===== */
.pillars{background:var(--mist);padding:96px 0}
.pillars .head{max-width:62ch;margin-bottom:56px}
.pillars h2{font-size:clamp(28px,3.2vw,40px);color:var(--navy);font-weight:600;line-height:1.14;margin-top:14px}
.pillars .lead{font-size:18px;color:var(--muted);margin-top:16px;line-height:1.65}
.pcols{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.pcard{background:var(--paper);border:1px solid var(--line);border-radius:4px;overflow:hidden;transition:.2s}
.pcard:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(20,41,76,.1)}
.pcard .ph{height:180px;background-size:cover;background-position:center;position:relative}
.pcard .ph::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(12,27,51,.45))}
.pcard .txt{padding:26px 26px 30px}
.pcard .num{font-family:var(--serif);font-size:14px;color:var(--accent);font-weight:700;letter-spacing:.1em}
.pcard h3{font-size:21px;color:var(--navy);margin:8px 0 10px;font-weight:600;line-height:1.2}
.pcard p{font-size:15.5px;color:var(--ink);line-height:1.62}

/* ===== SPLIT + PARTNER ===== */
.split{padding:100px 0}
.split .grid{display:grid;grid-template-columns:1.1fr .9fr;gap:64px;align-items:center}
.split h2{font-size:clamp(28px,3.2vw,40px);color:var(--navy);font-weight:600;line-height:1.14;margin:14px 0 26px}
.checklist{list-style:none}
.checklist li{display:flex;gap:16px;padding:20px 0;border-top:1px solid var(--line)}
.checklist li:first-child{border-top:none}
.checklist .mk{flex:0 0 auto;width:28px;height:28px;border-radius:50%;background:rgba(var(--accent-rgb),.12);color:var(--accent);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;margin-top:2px}
.checklist b{display:block;color:var(--navy);font-size:17.5px;font-weight:600;margin-bottom:3px}
.checklist span{color:var(--muted);font-size:15.5px;line-height:1.55}
.partner{background:var(--navy);color:#fff;border-radius:6px;padding:40px 38px;position:relative;overflow:hidden}
.partner::before{content:"";position:absolute;top:-40px;right:-40px;width:160px;height:160px;border:1px solid rgba(var(--accent-rgb),.45);border-radius:50%}
.partner .eyebrow{color:#9FC3B0}
.partner h3{font-size:25px;color:#fff;font-weight:600;margin:12px 0 22px;line-height:1.2}
.partner ul{list-style:none}
.partner li{padding:13px 0 13px 26px;position:relative;font-size:16px;color:#DCE3EF;border-top:1px solid rgba(255,255,255,.12)}
.partner li:first-of-type{border-top:none}
.partner li::before{content:"";position:absolute;left:0;top:19px;width:9px;height:9px;background:var(--accent);transform:rotate(45deg)}

/* ===== SPOKE GRID (hub -> towns) ===== */
.spokes{padding:96px 0}
.spokes .head{max-width:62ch;margin-bottom:48px}
.spokes h2{font-size:clamp(28px,3.2vw,40px);color:var(--navy);font-weight:600;line-height:1.14;margin-top:14px}
.spokes .lead{font-size:18px;color:var(--muted);margin-top:16px}
.spokegrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.spoke{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:6px;padding:26px 26px 24px;background:var(--paper);transition:.18s;color:inherit}
.spoke:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:0 16px 36px rgba(20,41,76,.1)}
.spoke .t{font-family:var(--serif);font-size:21px;color:var(--navy);font-weight:600}
.spoke .d{font-size:14.5px;color:var(--muted);margin-top:7px;line-height:1.55}
.spoke .go{display:inline-block;margin-top:auto;padding-top:16px;font-size:14px;font-weight:600;color:var(--accent)}

/* ===== QUOTE BAND ===== */
.band{background:var(--deep);color:#fff;padding:84px 0;text-align:center}
.band .q{font-family:var(--serif);font-size:clamp(24px,3vw,38px);font-weight:500;font-style:italic;max-width:24ch;margin:0 auto;line-height:1.3}
.band .q span{color:#9FC3B0}
.band .who{margin-top:22px;font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:#9FB0C6}

/* ===== FAQ ===== */
.faq{padding:96px 0}
.faq h2{font-size:clamp(28px,3.2vw,40px);color:var(--navy);font-weight:600;line-height:1.14;margin-bottom:10px}
.faq .lead{font-size:18px;color:var(--muted);margin-bottom:34px}
.faq .item{border-top:1px solid var(--line);padding:24px 0}
.faq .item:last-child{border-bottom:1px solid var(--line)}
.faq h3{font-size:19px;color:var(--navy);font-weight:600;margin-bottom:8px}
.faq p{font-size:16px;color:var(--ink);max-width:88ch;line-height:1.65}

/* ===== FINAL CTA ===== */
.final{padding:96px 0}
.final .box{background:linear-gradient(135deg,var(--navy),var(--deep));border-radius:8px;padding:64px 56px;color:#fff;display:flex;justify-content:space-between;align-items:center;gap:40px;flex-wrap:wrap}
.final h2{font-size:clamp(28px,3vw,38px);font-weight:600;line-height:1.12;max-width:18ch}
.final p{color:#C3CEDE;font-size:17px;margin-top:14px;max-width:42ch}

/* ===== FOOTER ===== */
footer{background:var(--navy);color:#fff;padding:58px 0 36px;border-top:2px solid var(--accent)}
.foot{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:40px;align-items:start}
footer .logo-full{background:#fff;border-radius:8px;padding:14px 16px;display:inline-block;margin-bottom:16px}
footer .logo-full img{height:54px;width:auto}
.foot .contact{font-size:14.5px;color:#C3CEDE;line-height:1.95}
.foot h4{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#9FC3B0;margin-bottom:14px}
.foot a{display:block;color:#C3CEDE;font-size:14.5px;padding:5px 0}
.foot a:hover{color:#fff}
.creditline{font-size:11px;color:#536480;margin-top:8px}
.fineprint{font-size:12px;color:#7E90A8;border-top:1px solid rgba(255,255,255,.12);margin-top:42px;padding-top:20px;line-height:1.7}

/* ===== MOBILE ===== */
@media(max-width:860px){
  .wrap{padding:0 22px}
  .nav{position:fixed;inset:var(--hdr) 0 auto 0;flex-direction:column;align-items:stretch;gap:0;
       background:var(--deep);border-bottom:1px solid rgba(255,255,255,.12);
       max-height:0;overflow:hidden;transition:max-height .28s ease;padding:0 22px}
  .nav a{padding:16px 0;border-top:1px solid rgba(255,255,255,.08);font-size:16px;text-shadow:none}
  .nav .pill{border:none;border-radius:6px;background:var(--accent);justify-content:center;margin:14px 0 18px;padding:14px}
  .menu-tgl:checked ~ .nav{max-height:360px}
  .menu-btn{display:inline-flex;flex-direction:column;gap:5px;width:30px;height:24px;justify-content:center;cursor:pointer}
  .menu-btn span{height:2px;background:#fff;border-radius:2px;transition:.25s;box-shadow:0 1px 6px rgba(8,18,34,.5)}
  .menu-tgl:checked ~ .menu-btn span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .menu-tgl:checked ~ .menu-btn span:nth-child(2){opacity:0}
  .menu-tgl:checked ~ .menu-btn span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .lockup .wm{font-size:15px}.lockup img{height:34px}

  .hero{min-height:auto}
  .hero .wrap{padding-top:120px;padding-bottom:54px}
  .trust .wrap{grid-template-columns:1fr 1fr}
  .trust .cell{padding:30px 22px;border-bottom:1px solid rgba(255,255,255,.1)}
  .trust .cell:nth-child(2){border-right:none}
  .editorial{padding:64px 0 56px}
  .editorial .grid,.split .grid,.foot{grid-template-columns:1fr;gap:38px}
  .editorial .lede-label{position:static}
  .pillars,.split,.faq,.final,.spokes{padding:64px 0}
  .pcols,.spokegrid{grid-template-columns:1fr}
  .band{padding:60px 0}
  .final .box{padding:44px 30px}
}