/* Globe Serur — recruiting + brand site
 * theme: "Ledger" · navy ink / near-white paper / Globe Life red for action only
 * type: Source Serif 4 (display) + Libre Franklin (text)
 *
 * Design position: this is regulated financial services. Familiarity is a trust signal,
 * so the structure is conventional on purpose — masthead, split hero, ruled facts,
 * comparison, proof, process, FAQ, close. The difference is craft, not novelty:
 * real hierarchy, generous air, one accent, restrained depth, two animations.
 *
 * Nothing on this page depends on JavaScript to be readable.
 */

@import url("tokens.css");

/* ══════════════════════════════════════════════ base */

*,*::before,*::after{box-sizing:border-box}
html,body{overflow-x:clip}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:96px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--color-paper);
  color:var(--color-ink);
  font-family:var(--font-text);
  font-size:var(--text-body);
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{max-width:100%; height:auto; display:block}
a{color:inherit}
figure{margin:0}

/* The ring sits OUTSIDE the control, so it is always measured against the page,
   never against a button fill it could not clear 3:1 on. Never transitioned. */
:focus-visible{outline:2px solid var(--color-focus); outline-offset:3px; border-radius:2px}
.bg-ink :focus-visible,
footer :focus-visible{outline-color:var(--color-focus-ink)}

.wrap{width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--space-lg)}
@media (max-width:640px){ .wrap{padding-inline:var(--space-md)} }

/* ══════════════════════════════════════════════ type */

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-style:normal;
  font-weight:600;
  letter-spacing:-.012em;
  line-height:1.12;
  margin:0;
  overflow-wrap:anywhere;
  min-width:0;
  text-wrap:balance;
  color:var(--color-ink);
}
h1{font-size:var(--text-display); line-height:1.05; letter-spacing:-.02em}
h2{font-size:var(--text-h2); line-height:1.1; letter-spacing:-.018em}
h3{font-size:var(--text-h3); line-height:1.2}
h4{font-size:var(--text-h4); font-family:var(--font-text); font-weight:600; letter-spacing:0}

p{margin:0 0 var(--space-md)}
p:last-child{margin-bottom:0}
b,strong{font-weight:600; color:var(--color-ink)}
em{font-style:italic}

.lede{
  font-size:var(--text-lede);
  line-height:1.58;
  color:var(--color-ink-2);
  max-width:60ch;
  font-weight:400;
}
.sub{color:var(--color-muted)}
.note{
  font-size:var(--text-sm);
  color:var(--color-muted);
  border-left:2px solid var(--color-line-2);
  padding-left:var(--space-md);
  margin-top:var(--space-lg);
}
.mono{font-family:var(--font-mono)}

/* a quiet label. Not an eyebrow on every section — used only where it earns its place. */
.rubric,.kick{
  display:block;
  font-family:var(--font-text);
  font-size:var(--text-label);
  font-weight:600;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--color-accent);
  margin-bottom:var(--space-sm);
}

/* ══════════════════════════════════════════════ concept ribbon */

.concept{
  position:relative; z-index:var(--z-ribbon);
  background:var(--color-navy-deep);
  color:var(--color-paper-ink);
  font-size:var(--text-xs);
  text-align:center;
  padding:10px var(--space-md);
  line-height:1.5;
  letter-spacing:.005em;
}
.concept b{color:#fff; font-weight:600}

/* ══════════════════════════════════════════════ header */

.hdr{
  position:sticky; top:0; z-index:var(--z-hdr);
  background:oklch(99.3% .003 255 / .86);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--color-line);
}
.hdr .in{
  display:flex; align-items:center; justify-content:space-between; gap:var(--space-md);
  min-height:74px;
}
.brand{display:flex; align-items:center}
.brand img{height:36px; width:auto}

.nav{display:flex; align-items:center; gap:var(--space-lg)}
.nav a{
  font-size:var(--text-sm);
  font-weight:500;
  text-decoration:none;
  color:var(--color-ink-2);
  white-space:nowrap;
  transition:color var(--dur-short) var(--ease-out);
}
.nav a:hover{color:var(--color-ink)}
.nav a.btn{color:#fff}
.nav a.btn:hover{color:#fff}

.burger{
  display:none; background:var(--color-paper); border:1px solid var(--color-line-2);
  border-radius:var(--r-sm); width:44px; height:44px; padding:0; cursor:pointer; color:var(--color-ink);
}
.burger svg{width:22px; height:22px; margin:auto; fill:none; stroke:currentColor; stroke-width:1.7}

/* the trust strip — carrier facts, stated once, quietly */
.dateline{
  background:var(--color-paper-2);
  border-bottom:1px solid var(--color-line);
  font-size:var(--text-xs);
  color:var(--color-muted);
  padding:11px 0;
}
.dateline .in{display:flex; flex-wrap:wrap; gap:var(--space-xs) var(--space-lg); justify-content:center}
.dateline span{display:inline-flex; align-items:center; gap:8px; white-space:nowrap}
.dateline span::before{
  content:''; width:5px; height:5px; border-radius:50%;
  background:var(--color-accent); flex:none; opacity:.65;
}

/* ══════════════════════════════════════════════ buttons */

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  background:var(--color-accent); color:#fff;
  border:1px solid transparent;
  border-radius:var(--r-sm);
  padding:13px 22px;
  font-family:var(--font-text);
  font-size:var(--text-sm);
  font-weight:600;
  letter-spacing:.002em;
  text-decoration:none;
  white-space:nowrap;
  cursor:pointer;
  box-shadow:var(--shadow-1);
  transition:background-color var(--dur-short) var(--ease-out),
             box-shadow var(--dur-short) var(--ease-out),
             transform var(--dur-short) var(--ease-out);
}
.btn svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; flex:none;
  transition:transform var(--dur-mid) var(--ease-out)}
.btn:hover{background:var(--color-accent-hover); box-shadow:var(--shadow-2)}
.btn:hover svg{transform:translateX(3px)}
.btn:active{background:var(--color-accent-press); transform:translateY(1px); box-shadow:var(--shadow-1)}
.btn[disabled],.btn:disabled{opacity:.5; pointer-events:none}

.btn.ghost{
  background:var(--color-paper); color:var(--color-ink);
  border-color:var(--color-line-2); box-shadow:none;
}
.btn.ghost:hover{background:var(--color-paper-2); border-color:var(--color-ink-2); box-shadow:var(--shadow-1)}
.btn.ghost:active{background:var(--color-paper-3)}
.btn.lg{padding:16px 28px; font-size:16px}
.btn.sm{padding:9px 15px; font-size:var(--text-xs)}

/* On the navy field the brand blue is only 2.04:1 against the background — the
   button would vanish. It inverts instead: white fill, navy label, 17.77:1. */
.bg-ink .btn{background:var(--color-paper); color:var(--color-navy-deep); border-color:transparent}
.bg-ink .btn:hover{background:#fff; box-shadow:var(--shadow-2)}
.bg-ink .btn:active{background:var(--color-paper-2); transform:translateY(1px)}

.cta{display:flex; flex-wrap:wrap; gap:var(--space-sm); margin-top:var(--space-xl)}

/* ══════════════════════════════════════════════ sections */

section{padding-block:var(--space-3xl)}
section.tight{padding-block:var(--space-2xl)}
.bg-wash{background:var(--color-paper-2); border-block:1px solid var(--color-line)}
.bg-ink{background:var(--color-navy-deep); color:var(--color-paper-ink)}
.bg-ink h1,.bg-ink h2,.bg-ink h3{color:#fff}
.bg-ink .lede{color:var(--color-paper-ink)}
.bg-ink .rubric,.bg-ink .kick{color:var(--color-accent-ink)}

.shd{max-width:62ch; margin-bottom:var(--space-2xl)}
.shd h2{margin-bottom:var(--space-md)}

/* ══════════════════════════════════════════════ hero */

.hero{padding-top:var(--space-2xl); padding-bottom:var(--space-2xl)}
.hero .grid{
  display:grid;
  grid-template-columns:minmax(0,1.03fr) minmax(0,.97fr);
  gap:var(--space-2xl);
  align-items:center;
}
.hero h1{max-width:15ch}
.hero .lede{margin-top:var(--space-md)}

/* three short proofs, full width under the fold — no numbers, no claims */
.assure{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-lg);
  margin-top:var(--space-2xl); padding-top:var(--space-lg);
  border-top:1px solid var(--color-line);
}
.assure div{display:flex; align-items:flex-start; gap:10px; font-size:var(--text-sm); color:var(--color-ink-2)}
.assure svg{width:18px; height:18px; flex:none; margin-top:3px; stroke:var(--color-accent); fill:none; stroke-width:2.2}
@media (max-width:760px){ .assure{grid-template-columns:minmax(0,1fr); gap:var(--space-sm)} }

/* the photograph */
.hero-fig{position:relative}
.hero-fig img{border-radius:var(--r-lg); box-shadow:var(--shadow-3); width:100%}
.pill{
  position:absolute; left:-18px; bottom:26px;
  background:var(--color-paper);
  border:1px solid var(--color-line);
  border-radius:var(--r);
  box-shadow:var(--shadow-2);
  padding:16px 20px;
  max-width:270px;
}
.pill b{display:block; font-size:var(--text-sm); margin-bottom:3px}
.pill span{font-size:var(--text-xs); color:var(--color-muted); line-height:1.5; display:block}

/* carrier line */
.crest{
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap;
  gap:var(--space-sm) var(--space-2xl);
  padding-block:var(--space-lg);
  border-top:1px solid var(--color-line);
  font-size:var(--text-xs);
  color:var(--color-muted);
  text-align:center;
}
.crest b{color:var(--color-ink-2); font-weight:600}

/* ══════════════════════════════════════════════ the terms, up front */

.terms{
  background:var(--color-paper);
  border:1px solid var(--color-line);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-2);
  overflow:hidden;
}
.terms dl{margin:0}
.lrow{
  display:grid;
  grid-template-columns:minmax(0,260px) minmax(0,1fr);
  gap:var(--space-sm) var(--space-xl);
  padding:var(--space-lg) var(--space-xl);
  border-top:1px solid var(--color-line);
  align-items:baseline;
}
.lrow:first-child{border-top:none}
.lrow dt{
  font-size:var(--text-sm); font-weight:600; color:var(--color-muted);
  letter-spacing:.01em;
}
.lrow dd{
  margin:0;
  font-family:var(--font-display);
  font-size:var(--text-h3);
  font-weight:600;
  line-height:1.3;
  color:var(--color-ink);
  letter-spacing:-.01em;
}
.terms-foot{
  background:var(--color-paper-2);
  border-top:1px solid var(--color-line);
  padding:var(--space-md) var(--space-xl);
  font-size:var(--text-sm);
  color:var(--color-muted);
}

/* ══════════════════════════════════════════════ the comparison */

.cols3{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-lg)}
.hcol{
  background:var(--color-paper);
  border:1px solid var(--color-line);
  border-radius:var(--r-lg);
  padding:var(--space-xl);
  box-shadow:var(--shadow-1);
}
.hcol.isnt{background:var(--color-negative-tint); border-color:var(--color-line-2)}
.hcol h3{margin-bottom:var(--space-md); font-size:var(--text-h3)}
.hcol h3 em{font-style:normal}
.hcol ul{list-style:none; margin:0; padding:0}
.hcol li{
  position:relative; padding-left:26px; padding-block:9px;
  font-size:var(--text-sm); line-height:1.6; color:var(--color-ink-2);
}
.hcol li + li{border-top:1px solid var(--color-line)}
.hcol li::before{
  position:absolute; left:0; top:11px;
  width:16px; height:16px; border-radius:50%;
  display:grid; place-items:center;
  font-size:10px; font-weight:700; line-height:1;
}
/* Three distinct markers: filled brand / filled graphite / small dot.
   Two filled grey circles make the last two columns read the same; a hollow
   ring reads as an unchecked radio button. Neither is what this list means. */
.hcol.is li::before   {content:'✓'; background:var(--color-accent);   color:#fff}
.hcol.isnt li::before {content:'−'; background:var(--color-negative); color:#fff}
.hcol.who li::before  {content:''; background:var(--color-faint); width:7px; height:7px; left:5px; top:16px}

/* the pull-quote */
.callout{
  margin:var(--space-2xl) auto 0;
  max-width:74ch;
  background:var(--color-paper);
  border:1px solid var(--color-line);
  border-left:3px solid var(--color-accent);
  border-radius:var(--r);
  box-shadow:var(--shadow-1);
  padding:var(--space-lg) var(--space-xl);
  font-size:var(--text-lede);
  line-height:1.6;
  color:var(--color-ink-2);
}
.callout b{color:var(--color-ink)}

/* ══════════════════════════════════════════════ feature rows */

.row{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:var(--space-2xl);
  align-items:center;
  padding-block:var(--space-2xl);
}
.row + .row{border-top:1px solid var(--color-line)}
.row.flip .fig{order:2}
.row h2{margin-bottom:var(--space-md); max-width:18ch; font-size:var(--text-h2)}
.row p{color:var(--color-ink-2); max-width:56ch}
.fig img{border-radius:var(--r-lg); box-shadow:var(--shadow-2); width:100%}

/* ══════════════════════════════════════════════ proof (empty on purpose) */

.proof{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); gap:var(--space-lg)}
.tcard{
  background:var(--color-paper);
  border:1px solid var(--color-line);
  border-radius:var(--r-lg);
  padding:var(--space-lg);
  box-shadow:var(--shadow-1);
}
.tcard .ph{
  width:52px; aspect-ratio:1/1; border-radius:50%;
  background:var(--color-paper-3);
  border:1px dashed var(--color-line-2);
  display:grid; place-items:center;
  font-size:9px; letter-spacing:.06em; text-transform:uppercase; line-height:1.3;
  color:var(--color-faint); text-align:center;
  margin-bottom:var(--space-md);
}
.tcard .slot{font-size:var(--text-sm); color:var(--color-muted); min-height:72px; margin-bottom:var(--space-md)}
.tcard .meta{
  display:block; border-top:1px solid var(--color-line); padding-top:12px;
  font-size:var(--text-xs); color:var(--color-faint);
}

/* ══════════════════════════════════════════════ process */

.steps{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr)); gap:var(--space-lg); counter-reset:step}
.step{counter-increment:step; padding-top:var(--space-md); border-top:2px solid var(--color-ink)}
.step::before{
  content:counter(step,decimal-leading-zero);
  display:block;
  font-family:var(--font-display); font-weight:700;
  font-size:15px; letter-spacing:.06em; color:var(--color-accent);
  font-variant-numeric:tabular-nums;
  margin-bottom:var(--space-sm);
}
.step h3{margin-bottom:var(--space-xs); font-size:var(--text-h4); font-family:var(--font-display); font-weight:600}
.step p{font-size:var(--text-sm); color:var(--color-muted); margin:0}

/* ══════════════════════════════════════════════ FAQ */

.faq{
  background:var(--color-paper);
  border:1px solid var(--color-line);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-1);
  overflow:hidden;
}
.faq details + details{border-top:1px solid var(--color-line)}
.faq summary{
  list-style:none; cursor:pointer;
  display:grid; grid-template-columns:minmax(0,1fr) 20px; align-items:center; gap:var(--space-md);
  padding:var(--space-lg) var(--space-xl);
  font-family:var(--font-display); font-weight:600;
  font-size:var(--text-h4); line-height:1.4; color:var(--color-ink);
  transition:background-color var(--dur-short) var(--ease-out);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{background:var(--color-paper-2)}
.faq summary::after{
  content:''; justify-self:end; width:13px; height:13px;
  background:
    linear-gradient(var(--color-accent) 0 0) center/100% 2px no-repeat,
    linear-gradient(var(--color-accent) 0 0) center/2px 100% no-repeat;
  transition:transform var(--dur-mid) var(--ease-out);
}
.faq details[open] summary::after{transform:rotate(90deg); background-size:100% 2px, 0 0}
.faq .a{padding:0 var(--space-xl) var(--space-lg); max-width:74ch}
.faq .a p{font-size:var(--text-sm); color:var(--color-ink-2)}

/* ══════════════════════════════════════════════ forms */

.formcard{
  background:var(--color-paper);
  border:1px solid var(--color-line);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-2);
  padding:var(--space-xl);
}
.field{margin-bottom:var(--space-md)}
.field label{
  display:block; margin-bottom:6px;
  font-size:var(--text-sm); font-weight:600; color:var(--color-ink-2);
}
.field input,.field select,.field textarea{
  width:100%; box-sizing:border-box;
  background:var(--color-paper);
  border:1px solid var(--color-line-2);
  border-radius:var(--r-sm);
  padding:12px 14px;
  font-family:var(--font-text); font-size:var(--text-body); color:var(--color-ink);
  transition:border-color var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out);
}
.field textarea{min-height:104px; resize:vertical; line-height:1.6}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--color-muted)}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--color-focus);
  box-shadow:0 0 0 3px oklch(48% .15 250 / .16);
  outline:none;
}
.field input[aria-invalid="true"]{border-color:var(--color-accent)}
.field .err{display:block; margin-top:6px; font-size:var(--text-xs); color:var(--color-accent)}
.grid2{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr)); gap:0 var(--space-md)}

.consent{
  display:grid; grid-template-columns:22px minmax(0,1fr); gap:var(--space-sm);
  align-items:start;
  border-top:1px solid var(--color-line);
  padding-top:var(--space-md); margin-top:var(--space-md);
  font-size:var(--text-sm); color:var(--color-ink-2); line-height:1.55;
}
.consent input{width:19px; height:19px; margin:2px 0 0; accent-color:var(--color-accent)}

/* Approved TCPA. The carrier requires a 10-point minimum; 13.5px = 10.125pt.
   Never shrink this below 13.5px, and never truncate the text to fit. */
.tcpa{
  border-top:1px solid var(--color-line);
  margin-top:var(--space-md); padding-top:var(--space-md);
  font-size:13.5px; line-height:1.5; color:var(--color-ink-2);
}
.tcpa p + p{margin-top:var(--space-sm)}
.tcpa a{color:var(--color-accent); text-decoration:underline; text-underline-offset:2px}

/* ══════════════════════════════════════════════ job header / facts */

.jobhd{margin-bottom:var(--space-2xl)}
.facts{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));
  gap:0;
  background:var(--color-paper);
  border:1px solid var(--color-line);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-1);
  overflow:hidden;
}
.fact{padding:var(--space-lg); border-left:1px solid var(--color-line)}
.fact:first-child{border-left:none}
.fact b{
  display:block; font-size:var(--text-label); font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--color-accent); margin-bottom:8px;
}
.fact span{font-size:var(--text-sm); line-height:1.55; color:var(--color-ink-2)}

/* ══════════════════════════════════════════════ video */

.vidwrap{
  position:relative; background:var(--color-navy-deep);
  aspect-ratio:16/9; display:grid; place-items:center; overflow:hidden;
  border-radius:var(--r-lg); box-shadow:var(--shadow-3);
}
.play{
  width:76px; height:76px; border-radius:50%;
  background:oklch(99.3% .003 255 / .92);
  display:grid; place-items:center; cursor:pointer;
  box-shadow:var(--shadow-2);
  transition:background-color var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out);
}
.play svg{width:24px; height:24px; fill:var(--color-accent); stroke:none; margin-left:4px}
.play:hover{background:#fff; transform:scale(1.04)}
.play:active{transform:scale(.99)}
.vidnote{
  position:absolute; left:0; right:0; bottom:0; padding:12px var(--space-md);
  font-size:var(--text-xs); color:var(--color-paper-ink); text-align:center;
}
.vidfill{
  position:absolute; inset:0; display:grid; place-items:center;
  background:var(--color-navy-deep); color:var(--color-faint);
  font-size:var(--text-xs); text-align:center; padding:var(--space-lg);
}
.figtag{display:none}          /* imagery is cleared — no placeholder captions */

/* ══════════════════════════════════════════════ disclosure + CONFIRM */

.disclosure{
  background:var(--color-paper-2);
  border:1px solid var(--color-line);
  border-radius:var(--r);
  padding:var(--space-md) var(--space-lg);
  font-size:var(--text-sm); line-height:1.6; color:var(--color-muted);
  max-width:76ch;
}
.disclosure b{color:var(--color-ink)}
.disclosure.standing{background:transparent; border:none; border-left:3px solid var(--color-line-2);
  border-radius:0; padding:var(--space-2xs) 0 var(--space-2xs) var(--space-lg); font-size:var(--text-body)}

.confirm{
  display:inline-block;
  background:var(--color-flag-tint);
  color:var(--color-flag);
  border:1px solid oklch(48% .105 75 / .35);
  border-radius:4px;
  font-size:10px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase;
  padding:2px 6px; margin-inline-end:6px;
  position:relative; top:-1px;
  vertical-align:middle;
  line-height:1.5;
}

/* ══════════════════════════════════════════════ two doors (apex) */

.doors{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr)); gap:var(--space-lg)}
.door{
  background:var(--color-paper);
  border:1px solid var(--color-line);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-1);
  overflow:hidden;
  text-decoration:none; display:flex; flex-direction:column;
  transition:box-shadow var(--dur-mid) var(--ease-out), transform var(--dur-mid) var(--ease-out),
             border-color var(--dur-mid) var(--ease-out);
}
.door:hover{box-shadow:var(--shadow-3); transform:translateY(-2px); border-color:var(--color-line-2)}
.door img{width:100%; aspect-ratio:16/10; object-fit:cover; object-position:center 26%}
.door .body{padding:var(--space-xl); display:flex; flex-direction:column; flex:1}
.door h3{margin-bottom:var(--space-sm)}
.door p{font-size:var(--text-sm); color:var(--color-muted); flex:1; margin-bottom:var(--space-lg)}
.door .btn{align-self:flex-start}

/* ══════════════════════════════════════════════ footer */

footer{background:var(--color-navy-deep); color:var(--color-paper-ink); padding-block:var(--space-2xl) var(--space-lg)}
/* a navy close above a navy footer reads as one undifferentiated slab */
section.bg-ink + footer{border-top:1px solid var(--color-line-ink)}
footer .cols{
  display:grid; grid-template-columns:minmax(0,1.7fr) minmax(0,1fr) minmax(0,1fr);
  gap:var(--space-xl);
  padding-bottom:var(--space-xl);
  border-bottom:1px solid var(--color-line-ink);
}
footer img{height:32px; width:auto; margin-bottom:var(--space-md); filter:brightness(0) invert(1); opacity:.92}
footer p{font-size:var(--text-sm); color:var(--color-paper-ink); opacity:.72; line-height:1.6}
footer h4{
  font-size:var(--text-label); font-weight:600; letter-spacing:.09em;
  text-transform:uppercase; color:var(--color-accent-ink); margin-bottom:var(--space-md);
  font-family:var(--font-text);
}
footer ul{list-style:none; margin:0; padding:0}
footer li{font-size:var(--text-sm); padding-block:5px; opacity:.8}
footer a{text-decoration:none; white-space:nowrap;
  border-bottom:1px solid transparent;
  transition:border-color var(--dur-short) var(--ease-out), opacity var(--dur-short) var(--ease-out)}
footer a:hover{border-bottom-color:var(--color-accent-ink); opacity:1}

.legal{padding-block:var(--space-lg); border-bottom:1px solid var(--color-line-ink)}
.legal p{font-size:12.5px; line-height:1.65; opacity:.62; max-width:none}
.legal b{opacity:1; color:#fff}

.foot-bottom{
  display:flex; flex-wrap:wrap; gap:var(--space-sm) var(--space-lg);
  justify-content:space-between; padding-top:var(--space-md);
  font-size:var(--text-xs); color:var(--color-paper-ink); opacity:.55;
}

/* ══════════════════════════════════════════════ prose (legal pages) */

.prose{max-width:72ch}
.prose h2{font-size:var(--text-h3); margin:var(--space-2xl) 0 var(--space-md)}
.prose h3{font-size:var(--text-h4); margin:var(--space-lg) 0 var(--space-xs)}
.prose p,.prose li{font-size:var(--text-sm); color:var(--color-ink-2); line-height:1.7}
.prose ul{padding-left:var(--space-md)}

/* ══════════════════════════════════════════════ motion — one primitive
   FAIL-OPEN: the hidden state is scoped to .js, which an inline head script adds.
   With JavaScript off, `[data-reveal]` is never hidden and the page just renders.
   Content must never be invisible because a script didn't run. */

.js [data-reveal]{
  opacity:0;
  transform:translateY(14px);
  transition:opacity var(--dur-long) var(--ease-out), transform var(--dur-long) var(--ease-out);
  transition-delay:calc(var(--i,0) * 80ms);
}
.js [data-reveal].in{opacity:1; transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .js [data-reveal]{opacity:1; transform:none}
}

/* ══════════════════════════════════════════════ responsive — 320 / 375 / 414 / 768 */

@media (max-width:1080px){
  .hero .grid{grid-template-columns:minmax(0,1fr); gap:var(--space-2xl)}
  .hero h1{max-width:18ch}
  .pill{left:auto; right:18px; bottom:18px}
  .row,.row.flip{grid-template-columns:minmax(0,1fr); gap:var(--space-lg)}
  .row.flip .fig{order:0}
  .cols3{grid-template-columns:minmax(0,1fr)}
  footer .cols{grid-template-columns:minmax(0,1fr); gap:var(--space-lg)}
  .lrow{grid-template-columns:minmax(0,200px) minmax(0,1fr); padding-inline:var(--space-lg)}
}

@media (max-width:860px){
  .burger{display:grid; place-items:center}
  .hdr .in{position:relative}
  .nav{
    display:none;
    position:absolute; left:0; right:0; top:100%;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--color-paper);
    border:1px solid var(--color-line);
    border-radius:var(--r);
    box-shadow:var(--shadow-3);
    padding:var(--space-xs) var(--space-md) var(--space-md);
    margin-top:6px;
  }
  .nav.open{display:flex}
  .nav a{padding-block:var(--space-md); font-size:var(--text-body)}
  .nav a + a{border-top:1px solid var(--color-line)}
  .nav a.btn{margin-top:var(--space-md); border-top:none}

  section{padding-block:var(--space-2xl)}
  .shd{margin-bottom:var(--space-xl)}
  .lrow{grid-template-columns:minmax(0,1fr); gap:6px; padding:var(--space-md) var(--space-lg)}
  .lrow dd{font-size:19px}
  .terms-foot{padding-inline:var(--space-lg)}
  .callout{padding:var(--space-lg)}
  .fact{border-left:none; border-top:1px solid var(--color-line); padding:var(--space-md) var(--space-lg)}
  .fact:first-child{border-top:none}
  .faq summary{padding:var(--space-md) var(--space-lg)}
  .faq .a{padding:0 var(--space-lg) var(--space-md)}
  .formcard{padding:var(--space-lg)}
  .hcol{padding:var(--space-lg)}
  .pill{position:static; margin-top:var(--space-md); max-width:none}
  .dateline .in{justify-content:flex-start; gap:var(--space-xs) var(--space-md)}
  .assure{gap:var(--space-sm) var(--space-md)}
}

@media (max-width:420px){
  .brand img{height:30px}
  .btn.lg{padding:14px 20px; font-size:15px}
  .cta{gap:10px}
  .cta .btn{width:100%}
}

/* ══════════════════════════════════════════════ per-page review band
   The page-by-page breakdown lives on the page it describes, not in a report.
   Collapsed by default; it must never obstruct the design it is describing. */
.concept details{margin-top:6px}
.concept summary{
  list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:6px;
  font-size:var(--text-xs); font-weight:600;
  color:#fff; opacity:.75;
  border-bottom:1px dotted oklch(88% .014 250 / .5); padding-bottom:1px;
}
.concept summary::-webkit-details-marker{display:none}
.concept summary:hover{opacity:1}
.concept summary::after{content:'+'; font-family:var(--font-mono); opacity:.8}
.concept details[open] summary::after{content:'−'}
.cnote{
  text-align:left; max-width:var(--wrap); margin:var(--space-md) auto 4px;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));
  gap:var(--space-lg);
  padding:var(--space-md) 0 var(--space-xs);
  border-top:1px solid var(--color-line-ink);
}
.cnote h4{
  font-size:var(--text-label); letter-spacing:.09em; text-transform:uppercase;
  margin-bottom:var(--space-xs); font-family:var(--font-text);
}
.cnote .was h4{color:var(--color-flag)}
.cnote .now h4{color:var(--color-accent-ink)}
.cnote ul{list-style:none; margin:0; padding:0}
.cnote li{
  position:relative; padding-left:14px; margin-bottom:6px;
  font-size:var(--text-xs); line-height:1.6; color:var(--color-paper-ink); opacity:.85;
}
.cnote li::before{content:'·'; position:absolute; left:2px; opacity:.6}

/* ══ The numbers (carrier brochure) ═══════════════════════════ */
.comp-src{font-size:.82rem;line-height:1.55;color:var(--color-muted);max-width:80ch;margin-top:var(--space-md)}
.bro-gallery{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--space-md);margin-top:var(--space-lg)}
@media (max-width:960px){.bro-gallery{grid-template-columns:repeat(3,1fr)}}
@media (max-width:600px){.bro-gallery{grid-template-columns:repeat(2,1fr)}}
.bro{display:block;text-decoration:none;color:var(--color-ink-2)}
.bro img{width:100%;height:auto;display:block;border:1px solid var(--color-line);border-radius:var(--r-sm);transition:transform .18s ease,box-shadow .18s ease}
.bro:hover img{transform:translateY(-3px);box-shadow:0 12px 26px oklch(26% 0.05 258 / .16)}
.bro span{display:block;font-size:.8rem;margin-top:8px;text-align:center}

/* ══ Proof: leadership + video ════════════════════════════════ */
.lgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--space-md)}
@media (max-width:1020px){.lgrid{grid-template-columns:repeat(4,1fr)}}
@media (max-width:620px){.lgrid{grid-template-columns:repeat(2,1fr)}}
.lcard{text-align:center}
.lcard img{width:100%;height:auto;display:block;border-radius:var(--r-md,12px);border:1px solid var(--color-line);background:var(--color-paper)}
.lcard b{display:block;margin-top:10px;font-size:.92rem;color:var(--color-ink)}
.lcard span{display:block;font-size:.78rem;color:var(--color-muted);margin-top:2px}
.vgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,235px),1fr));gap:var(--space-lg);margin-top:var(--space-xl)}
@media (max-width:860px){.vgrid{grid-template-columns:1fr}}
.vcard{margin:0}
.yt{position:relative;display:block;width:100%;aspect-ratio:16/9;border:0;padding:0;cursor:pointer;border-radius:var(--r-md,12px);overflow:hidden;background:var(--color-navy-deep)}
.yt img{width:100%;height:100%;object-fit:cover;display:block;opacity:.94}
.ytp{position:absolute;inset:0;display:grid;place-items:center}
.ytp::after{content:"";width:62px;height:62px;border-radius:50%;background:var(--color-accent) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M8 5v14l11-7z"/></svg>') center/24px no-repeat;box-shadow:0 8px 22px rgb(0 0 0/.35);transition:transform .15s ease,background-color .15s ease}
.yt:hover .ytp::after,.yt:focus-visible .ytp::after{transform:scale(1.07);background-color:var(--color-accent-hover)}
.vgrid iframe{width:100%;aspect-ratio:16/9;border:0;border-radius:var(--r-md,12px);display:block}
.vcard figcaption{font-size:.85rem;color:var(--color-ink-2);margin-top:10px}
.vary-note{font-size:.82rem;line-height:1.55;color:var(--color-muted);max-width:80ch;margin-top:var(--space-lg)}

/* ══ Pay paths, milestone blocks, no scroll anywhere ═════════ */
.paths{display:grid;gap:var(--space-lg)}
.path{border:1px solid var(--color-line);border-radius:var(--r-md,12px);background:var(--color-paper);padding:24px 24px 20px}
.path__head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:16px}
.path__head h3{font-size:1.02rem;margin:0}
.path__head span{font-size:.74rem;color:var(--color-muted);letter-spacing:.05em;text-transform:uppercase}
.miles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:1px;background:var(--color-line);border:1px solid var(--color-line);border-radius:var(--r-sm);overflow:hidden}
.miles li{background:var(--color-paper);padding:16px 10px;text-align:center}
.miles li span{display:block;font-size:.7rem;letter-spacing:.07em;text-transform:uppercase;color:var(--color-muted);margin-bottom:6px}
.miles li b{font-family:"Source Serif 4",Georgia,serif;font-size:clamp(1.1rem,2.4vw,1.45rem);color:var(--color-ink);font-variant-numeric:tabular-nums;white-space:nowrap}
@media (max-width:600px){.miles{grid-template-columns:repeat(2,1fr)}.miles li:last-child:nth-child(odd){grid-column:1/-1}}

/* ══ Lightbox / theater ═════════════════════════════════════ */
.lb{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:22px;background:oklch(21% 0.048 258 / .9);backdrop-filter:blur(4px)}
.lb img{max-width:min(94vw,900px);max-height:86vh;width:auto;height:auto;border-radius:8px;box-shadow:0 30px 80px rgb(0 0 0/.5)}
.lb iframe{width:min(96vw,1280px);aspect-ratio:16/9;max-height:86vh;border:0;border-radius:10px;box-shadow:0 30px 80px rgb(0 0 0/.5)}
.lb__x{position:fixed;top:16px;right:16px;width:54px;height:54px;border-radius:50%;border:0;cursor:pointer;background:#fff;color:var(--color-ink);display:grid;place-items:center;box-shadow:0 8px 24px rgb(0 0 0/.4);transition:transform .12s ease}
.lb__x svg{width:26px;height:26px;stroke:currentColor;stroke-width:2.4;fill:none}
.lb__x:hover{transform:scale(1.08)}
.lb__hint{position:fixed;bottom:16px;left:0;right:0;text-align:center;color:#fff;opacity:.7;font-size:.8rem;pointer-events:none}
body.lb-open{overflow:hidden}

/* Culture */
.culture-grid{display:grid;grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr);gap:var(--space-lg);margin-top:var(--space-xl);align-items:start}
.culture-grid figure{margin:0}
.culture-grid img{width:100%;height:auto;border-radius:var(--r-md,12px);display:block}
.culture-grid figcaption{font-size:.85rem;color:var(--color-ink-2);margin-top:10px}
@media (max-width:860px){.culture-grid{grid-template-columns:minmax(0,1fr)}}