:root{
  --black:#0a0a0a; --white:#ffffff;
  --serif:"Iowan Old Style","Source Serif 4","Palatino Linotype",Palatino,Baskerville,Georgia,serif;
  --sans:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  --max:1680px; --pad:clamp(20px,4vw,72px); --nav-h:78px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:20px}
body{margin:0;background:var(--black);color:var(--white);font-family:var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}
p{margin:0}
h1,h2,h3{margin:0;font-weight:400}
.container{width:min(var(--max),calc(100% - 2*var(--pad)));margin:0 auto}

/* Two themes only */
.w{background:var(--white);color:#0a0a0a;--fg:#0a0a0a;--body:#2b2b2b;--muted:#6b6b6b;--rule:rgba(0,0,0,.14)}
.b{background:var(--black);color:#fff;--fg:#ffffff;--body:rgba(255,255,255,.78);--muted:rgba(255,255,255,.55);--rule:rgba(255,255,255,.16)}

.label{font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.display{font-family:var(--serif);letter-spacing:-.04em;line-height:.96;text-wrap:balance}

/* Nav: transparent over the hero, solid black once scrolling */
.nav{position:fixed;z-index:50;top:0;left:0;right:0;height:var(--nav-h);display:flex;align-items:center;gap:24px;padding:0 clamp(20px,4vw,64px);color:#fff;transition:transform .35s ease,background .3s ease}
.nav.solid{background:var(--black);box-shadow:0 1px 0 rgba(255,255,255,.08)}
.brand{font-size:20px;font-weight:750;letter-spacing:.03em;text-transform:uppercase;margin-right:auto;white-space:nowrap}
.brand span{font-weight:400;opacity:.7}
.navlinks{display:flex;gap:clamp(16px,1.75vw,32px);font-size:14px;font-weight:600}
.navlinks a{opacity:.82;padding:6px 0;border-bottom:1px solid transparent;white-space:nowrap}
.navlinks a:hover{opacity:1}
.navlinks a[aria-current]{opacity:1;border-bottom-color:#fff}
.nav-cta{display:inline-flex;align-items:center;gap:22px;padding:14px 19px;background:#fff;color:#0a0a0a;font-size:13px;font-weight:700;white-space:nowrap}
.menu{display:none}
.menu summary{list-style:none;cursor:pointer;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:10px 0}
.menu summary::-webkit-details-marker{display:none}
.menu summary::after{content:"  +"}
.menu[open] summary::after{content:"  \2212"}
.drop{position:fixed;left:0;right:0;top:var(--nav-h);background:var(--black);padding:8px var(--pad) 28px;display:flex;flex-direction:column;border-top:1px solid rgba(255,255,255,.1)}
.drop a{padding:15px 0;border-bottom:1px solid rgba(255,255,255,.12);font-size:17px;font-weight:500}
.drop a[aria-current]{opacity:.6}
.drop .nav-cta{align-self:flex-start;margin-top:22px;border:0;font-size:13px}

/* 1. Hero (black) */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;padding-top:var(--nav-h)}
.hero-copy{padding-bottom:clamp(130px,18vh,200px)}
.hero .label{margin-bottom:clamp(22px,3vh,32px)}
.hero h1{font-size:clamp(46px,min(5.6vw,9vh),96px);line-height:.98;max-width:1240px}
.tabs{position:absolute;left:0;right:0;bottom:22px}
.tabs .container{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.tabs a{border-top:1px solid rgba(255,255,255,.4);padding-top:13px;display:flex;gap:18px;align-items:baseline;font-size:13px;color:rgba(255,255,255,.88);transition:border-color .2s}
.tabs a:hover{border-top-color:#fff}
.tabs span{font-size:10px;opacity:.5}

/* 2. Opening statement (white) */
.statement{min-height:92svh;display:flex;align-items:center;padding:clamp(110px,14vh,160px) 0}
.statement .rule{border-top:1px solid var(--rule);margin-bottom:26px}
.statement .label{margin-bottom:clamp(36px,5vh,56px)}
.statement-text{font-family:var(--serif);font-size:clamp(40px,min(5.4vw,8.6vh),92px);line-height:1.02;letter-spacing:-.04em;max-width:1400px}
.statement-lower{display:grid;grid-template-columns:1fr 1fr;margin-top:clamp(48px,7vh,90px)}
.statement-lower p{max-width:540px;font-size:clamp(16px,1.15vw,18px);line-height:1.62;color:var(--body)}

/* Panels */
.panel{padding:clamp(110px,15vh,180px) 0}
.panel h2{font-size:clamp(50px,min(6.4vw,9.4vh),110px)}
.head{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(40px,6vw,110px);align-items:end;margin-bottom:clamp(80px,12vh,140px)}
.head p{font-size:clamp(18px,1.45vw,23px);line-height:1.45;color:var(--body);max-width:520px}

/* Milestones: one per panel, unnumbered */
.milestone{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,6vw,120px);align-items:start;border-top:1px solid var(--rule);padding-top:28px}
.milestone .side{position:sticky;top:calc(var(--nav-h) + 32px)}
.milestone .side .label{display:block;margin-bottom:22px}
.milestone h3{font-family:var(--serif);font-size:clamp(40px,4.4vw,76px);line-height:.98;letter-spacing:-.04em}
.copy{max-width:680px}
.copy p{font-size:clamp(17px,1.25vw,20px);line-height:1.62;color:var(--body)}
.copy p + p{margin-top:1.05em}
.copy p.first{font-size:clamp(20px,1.65vw,26px);line-height:1.42;color:var(--fg)}

/* Business (black), inside (white) */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(40px,6vw,120px);align-items:start;border-top:1px solid var(--rule);padding-top:28px}
.split .copy p{font-size:clamp(19px,1.55vw,25px);line-height:1.45}
.split .copy p + p{margin-top:1em}
.copy p.meta{margin-top:36px;padding-top:16px;border-top:1px solid var(--rule);font-size:13px;line-height:1.5;letter-spacing:.01em;color:var(--muted)}
.tlink{display:inline-flex;align-items:center;gap:10px;margin-top:40px;padding-bottom:12px;min-width:240px;border-bottom:1px solid currentColor;font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--fg);transition:gap .25s}
.tlink:hover{gap:16px}

/* Closing (black) */
.closing{min-height:80svh;display:flex;align-items:center;padding:clamp(120px,16vh,180px) 0}
.closing-grid{display:grid;grid-template-columns:1.3fr .7fr;gap:70px;align-items:end}
.closing > .container{flex:none}
.closing h2{font-size:clamp(58px,min(7.6vw,10.4vh),128px)}
.closing p{font-size:clamp(18px,1.45vw,22px);line-height:1.5;color:var(--body);max-width:480px}
.closing p + p{margin-top:.6em}
.btn{display:inline-flex;align-items:center;justify-content:space-between;gap:28px;min-width:220px;margin-top:34px;padding:16px 18px;background:#fff;color:#0a0a0a;font-size:12.5px;font-weight:700;letter-spacing:.02em}
.btn:hover{background:#e9e9e9}

footer{border-top:1px solid rgba(255,255,255,.12);padding:56px 0 34px;color:rgba(255,255,255,.6)}
.foot-top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:48px;padding-bottom:48px}
.foot-brand{font-size:26px;font-weight:750;color:#fff;letter-spacing:.02em;text-transform:uppercase}
.foot-brand span{font-weight:400;opacity:.7}
.loc{margin-top:12px;font-size:13px}
footer h4{margin:0 0 18px;font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.4)}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:12px;font-size:14px}
footer ul a:hover{color:#fff}
.foot-bottom{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.12);padding-top:22px;font-size:12px}
.foot-bottom nav{display:flex;gap:22px}

/* Motion (content stays visible if scripts do not run) */
.js .rv{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.js .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .rv{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}}

@media (max-width:1180px){.navlinks{gap:16px;font-size:13px}.nav-cta{font-size:12.5px;padding:13px 16px}}
@media (max-width:1100px){.navlinks{display:none}.menu{display:block;margin-left:auto}.brand{margin-right:0}}
@media (max-width:980px){
  .statement-lower,.head,.milestone,.split,.closing-grid,.foot-top{grid-template-columns:1fr}
  .head{align-items:start;gap:26px}
  .milestone .side{position:relative;top:auto}
  .milestone,.split{gap:30px}
  .closing{min-height:0}
  .closing-grid{gap:30px}
}
@media (max-width:640px){
  :root{--nav-h:62px}
  .brand{font-size:16px}
  .nav > .nav-cta{display:none}
  .hero h1{font-size:clamp(38px,10.6vw,48px);line-height:1.02}
  .hero-copy{padding-bottom:190px}
  .tabs .container{grid-template-columns:1fr;gap:8px}
  .tabs a{padding-top:9px}
  .statement{min-height:0}
  .statement-text{font-size:clamp(34px,10vw,44px);line-height:1.05}
  .panel h2{font-size:clamp(42px,12vw,58px)}
  .milestone h3{font-size:clamp(36px,10.6vw,46px)}
  .closing h2{font-size:clamp(50px,14vw,66px)}
}


/* ==========================================================
   v0.7 VISUAL RHYTHM PASS
   Match homepage behavior: every major cube fills the viewport,
   alternating pure black / pure white with balanced typography.
   Locked copy is unchanged.
   ========================================================== */
:root{
  --screen:100svh;
  --section-y:clamp(88px,10.5vh,128px);
}

/* Every content cube becomes a full-screen visual field. Content may
   exceed one viewport on shorter screens, but never creates a short band. */
.hero,.statement,.panel,.closing{min-height:var(--screen)}
.statement,.panel,.closing{display:flex;align-items:center}
.panel{padding:var(--section-y) 0}
.panel>.container,.statement>.container,.closing>.container{width:min(var(--max),calc(100% - 2*var(--pad)))}

/* Hero: stronger editorial scale and a little more breathing room. */
.hero{justify-content:center;padding-top:var(--nav-h)}
.hero-copy{padding-top:clamp(48px,6vh,72px);padding-bottom:clamp(150px,18vh,190px)}
.hero .label{margin-bottom:clamp(24px,3.2vh,36px)}
.hero h1{font-size:clamp(54px,min(6.55vw,9.6vh),112px);line-height:.94;letter-spacing:-.048em;max-width:1360px}
.tabs{bottom:clamp(22px,3.2vh,34px)}
.tabs .container{gap:clamp(20px,2.4vw,38px)}
.tabs a{padding-top:15px;font-size:12.5px;letter-spacing:.005em}

/* Opening white cube: use the homepage's large editorial statement scale,
   while keeping the explanatory paragraph visually secondary. */
.statement{padding:var(--section-y) 0}
.statement .rule{margin-bottom:clamp(24px,3.2vh,34px)}
.statement-text{font-size:clamp(48px,min(6.0vw,9vh),102px);line-height:.98;letter-spacing:-.047em;max-width:1420px}
.statement-lower{grid-template-columns:minmax(0,1fr) minmax(0,1fr);margin-top:clamp(44px,6.2vh,72px)}
.statement-lower p{max-width:590px;font-size:clamp(17px,1.18vw,19px);line-height:1.58}

/* Section headings become consistent with the homepage's display system. */
.panel h2{font-size:clamp(52px,min(6.25vw,9vh),104px);line-height:.94;letter-spacing:-.047em}
.head{grid-template-columns:1.18fr .82fr;gap:clamp(44px,6vw,110px);align-items:end;margin-bottom:clamp(52px,7vh,78px)}
.head p{font-size:clamp(18px,1.35vw,22px);line-height:1.46;max-width:540px}

/* Milestones: each black/white cube has the same structural geometry. */
.milestone{grid-template-columns:minmax(0,4.8fr) minmax(0,7.2fr);gap:clamp(48px,6.5vw,124px);padding-top:clamp(24px,3vh,34px)}
.milestone .side{top:calc(var(--nav-h) + 32px)}
.milestone .side .label{margin-bottom:20px}
.milestone h3{font-size:clamp(44px,4.6vw,78px);line-height:.96;letter-spacing:-.045em;max-width:7.5em}
.copy{max-width:720px}
.copy p{font-size:clamp(17px,1.18vw,19.5px);line-height:1.58}
.copy p.first{font-size:clamp(20px,1.52vw,24px);line-height:1.43;letter-spacing:-.006em}
.copy p + p{margin-top:1.08em}

/* Transition / operating cubes: same vertical weight as the milestone cubes. */
.split{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(52px,7vw,126px);padding-top:clamp(24px,3vh,34px);align-items:start;width:100%}
.split .copy{padding-top:6px}
.split .copy p{font-size:clamp(19px,1.48vw,24px);line-height:1.46}
.copy p.meta{margin-top:34px;padding-top:16px;font-size:12.5px}
.tlink{margin-top:36px}

/* Closing cube now has the same full-screen weight as every other cube. */
.closing{min-height:var(--screen);padding:var(--section-y) 0}
.closing-grid{grid-template-columns:minmax(0,1.28fr) minmax(300px,.72fr);gap:clamp(50px,7vw,120px);align-items:end;width:100%}
.closing h2{font-size:clamp(62px,min(7.25vw,10vh),122px);line-height:.93;letter-spacing:-.05em;max-width:9em}
.closing p{font-size:clamp(18px,1.38vw,22px);line-height:1.5;max-width:520px}
.btn{margin-top:36px;padding:16px 20px;min-width:236px}

/* Slightly softer body contrast, matching the homepage's premium editorial feel. */
.w{--body:#343434;--muted:#6d6d6d}
.b{--body:rgba(255,255,255,.76);--muted:rgba(255,255,255,.52)}

/* Large but short desktop screens: keep all content readable without forcing
   overflow purely for visual symmetry. */
@media (min-width:981px) and (max-height:760px){
  :root{--section-y:76px}
  .hero h1{font-size:clamp(48px,6vw,88px)}
  .statement-text{font-size:clamp(42px,5.4vw,78px)}
  .panel h2{font-size:clamp(46px,5.7vw,84px)}
  .milestone h3{font-size:clamp(40px,4vw,64px)}
  .copy p{font-size:17px;line-height:1.5}
  .copy p.first{font-size:20px;line-height:1.4}
  .head{margin-bottom:42px}
}

@media (max-width:980px){
  :root{--section-y:clamp(78px,10vh,104px)}
  .hero,.statement,.panel,.closing{min-height:100svh}
  .statement-lower,.head,.milestone,.split,.closing-grid{grid-template-columns:1fr}
  .head{gap:28px;margin-bottom:56px}
  .milestone,.split{gap:34px}
  .milestone .side{position:relative;top:auto}
  .split .copy{padding-top:0}
  .closing-grid{align-items:start}
}

@media (max-width:640px){
  :root{--section-y:72px}
  .hero{min-height:100svh;justify-content:flex-end}
  .hero-copy{padding-top:110px;padding-bottom:190px}
  .hero h1{font-size:clamp(40px,10.8vw,50px);line-height:1.0}
  .statement-text{font-size:clamp(36px,10vw,46px);line-height:1.03}
  .panel h2{font-size:clamp(44px,12vw,60px);line-height:.98}
  .milestone h3{font-size:clamp(38px,10.5vw,48px)}
  .copy p.first{font-size:20px}
  .closing h2{font-size:clamp(52px,14vw,70px)}
}


/* ==========================================================
   v0.9 HERO IMAGE PASS
   Add approved full-bleed hero image with a dark overlay so the
   black opening cube gains the same cinematic atmosphere as the homepage.
   ========================================================== */
.hero{
  overflow:hidden;
  isolation:isolate;
  background:#070707;
}
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:url("../img/us-expansion-01.webp?v=1792008357");
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
  transform:scale(1.01);
  z-index:0;
}
.hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(5,5,5,.44) 0%, rgba(5,5,5,.30) 18%, rgba(5,5,5,.28) 42%, rgba(5,5,5,.58) 72%, rgba(5,5,5,.76) 100%),
    linear-gradient(90deg, rgba(5,5,5,.58) 0%, rgba(5,5,5,.35) 28%, rgba(5,5,5,.20) 58%, rgba(5,5,5,.44) 100%);
  z-index:1;
}
.hero > *{position:relative;z-index:2}
.hero-copy{max-width:min(var(--max),calc(100% - 2*var(--pad)));margin:0 auto;width:100%}
.hero h1{max-width:1180px;text-shadow:0 10px 28px rgba(0,0,0,.26)}
.hero .label,.tabs a{text-shadow:0 4px 16px rgba(0,0,0,.34)}
.tabs a{border-top-color:rgba(255,255,255,.46)}
@media (max-width:640px){
  .hero::before{background-position:68% center;}
  .hero::after{
    background:
      linear-gradient(180deg, rgba(5,5,5,.42) 0%, rgba(5,5,5,.28) 22%, rgba(5,5,5,.34) 52%, rgba(5,5,5,.72) 100%),
      linear-gradient(90deg, rgba(5,5,5,.46) 0%, rgba(5,5,5,.32) 34%, rgba(5,5,5,.28) 100%);
  }
}



/* ==========================================================
   v0.10 PROPOSITION IMAGE PASS
   Add approved buyer-desk image to the first "Where progress gets misread"
   black cube. Copy remains locked and unchanged.
   ========================================================== */
#proposition{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  background:#070707;
}
#proposition::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:url("../img/us-expansion-02.webp?v=1792008357");
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
  transform:scale(1.01);
  z-index:0;
}
#proposition::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(5,5,5,.46) 0%, rgba(5,5,5,.42) 38%, rgba(5,5,5,.62) 100%),
    linear-gradient(90deg, rgba(5,5,5,.78) 0%, rgba(5,5,5,.66) 34%, rgba(5,5,5,.46) 62%, rgba(5,5,5,.34) 100%);
  z-index:1;
}
#proposition > *{position:relative;z-index:2}
#proposition .head p,#proposition .copy p{text-shadow:0 4px 18px rgba(0,0,0,.30)}
#proposition .milestone{border-top-color:rgba(255,255,255,.28)}
@media (max-width:980px){
  #proposition::before{background-position:65% center;}
  #proposition::after{
    background:
      linear-gradient(180deg, rgba(5,5,5,.56) 0%, rgba(5,5,5,.48) 44%, rgba(5,5,5,.68) 100%),
      linear-gradient(90deg, rgba(5,5,5,.72) 0%, rgba(5,5,5,.56) 55%, rgba(5,5,5,.46) 100%);
  }
}



/* ==========================================================
   v0.11 CHANNEL IMAGE PASS
   Approved aerial interchange image for "The channel" cube.
   Coverage is visually expansive; copy intentionally challenges
   the assumption that access equals penetration.
   ========================================================== */
#channel{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  background:#070707;
}
#channel::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:url("../img/us-expansion-03.webp?v=1792008358");
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
  transform:scale(1.01);
  z-index:0;
}
#channel::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(5,5,5,.38) 0%, rgba(5,5,5,.44) 42%, rgba(5,5,5,.64) 100%),
    linear-gradient(90deg, rgba(5,5,5,.72) 0%, rgba(5,5,5,.58) 34%, rgba(5,5,5,.42) 65%, rgba(5,5,5,.34) 100%);
  z-index:1;
}
#channel > *{position:relative;z-index:2}
#channel .copy p,#channel .side{text-shadow:0 4px 18px rgba(0,0,0,.34)}
#channel .milestone{border-top-color:rgba(255,255,255,.30)}
@media (max-width:980px){
  #channel::before{background-position:58% center;}
  #channel::after{
    background:
      linear-gradient(180deg, rgba(5,5,5,.50) 0%, rgba(5,5,5,.50) 48%, rgba(5,5,5,.68) 100%),
      linear-gradient(90deg, rgba(5,5,5,.68) 0%, rgba(5,5,5,.54) 55%, rgba(5,5,5,.44) 100%);
  }
}


/* ==========================================================
   v0.12 BUSINESS IMAGE PASS
   Approved after-hours office image for "When it starts to become a U.S. business".
   Full-bleed background with dark overlay so the copy stays dominant.
   ========================================================== */
#business{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  background:#060606;
}
#business::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:url("../img/us-expansion-04.webp?v=1792008358");
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
  transform:scale(1.01);
  z-index:0;
}
#business::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(5,5,5,.40) 0%, rgba(5,5,5,.36) 30%, rgba(5,5,5,.58) 72%, rgba(5,5,5,.72) 100%),
    linear-gradient(90deg, rgba(5,5,5,.74) 0%, rgba(5,5,5,.60) 26%, rgba(5,5,5,.42) 58%, rgba(5,5,5,.48) 100%);
  z-index:1;
}
#business > *{position:relative;z-index:2}
#business .split{border-top-color:rgba(255,255,255,.30)}
#business h2,#business .copy p,#business .tlink{text-shadow:0 4px 18px rgba(0,0,0,.34)}
@media (max-width:980px){
  #business::before{background-position:64% center;}
  #business::after{
    background:
      linear-gradient(180deg, rgba(5,5,5,.48) 0%, rgba(5,5,5,.40) 28%, rgba(5,5,5,.62) 72%, rgba(5,5,5,.76) 100%),
      linear-gradient(90deg, rgba(5,5,5,.76) 0%, rgba(5,5,5,.62) 48%, rgba(5,5,5,.46) 100%);
  }
}


/* ==========================================================
   v0.14 BROADER MARKET LANGUAGE
   Reopen this cube for a lighter editorial hierarchy so the
   approved image remains visible and the argument lands faster.
   ========================================================== */
#proposition{padding:0;display:flex;align-items:center;}
#proposition .proposition-layout{
  min-height:100svh;
  display:flex;
  align-items:center;
  padding-top:calc(var(--nav-h) + 44px);
  padding-bottom:clamp(72px,9vh,112px);
}
#proposition .proposition-copy{
  width:min(620px,43vw);
  margin-left:0;
  padding:clamp(28px,3.5vw,54px) clamp(28px,3.2vw,48px) clamp(30px,3.8vw,58px) 0;
}
#proposition .proposition-eyebrow{
  color:rgba(255,255,255,.62);
  margin-bottom:clamp(20px,2.4vh,28px);
}
#proposition .proposition-title{
  font-size:clamp(62px,6.3vw,108px);
  line-height:.91;
  letter-spacing:-.052em;
  max-width:6.5em;
  margin-bottom:clamp(28px,4vh,42px);
}
#proposition .proposition-deck{
  font-family:var(--serif);
  font-size:clamp(23px,1.8vw,30px);
  line-height:1.28;
  letter-spacing:-.018em;
  color:#fff;
  max-width:570px;
}
#proposition .proposition-case{
  margin-top:clamp(24px,3vh,32px);
  max-width:560px;
  font-size:clamp(16px,1.08vw,18.5px);
  line-height:1.58;
  color:rgba(255,255,255,.74);
}
#proposition .proposition-payoff{
  margin-top:clamp(28px,3.5vh,38px);
  padding-top:18px;
  border-top:1px solid rgba(255,255,255,.38);
  max-width:560px;
  font-size:clamp(16.5px,1.12vw,19px);
  line-height:1.48;
  font-weight:650;
  color:#fff;
}
/* Reveal considerably more of the approved desk image. */
#proposition::before{background-position:56% center;}
#proposition::after{
  background:
    linear-gradient(180deg, rgba(5,5,5,.20) 0%, rgba(5,5,5,.18) 42%, rgba(5,5,5,.38) 100%),
    linear-gradient(90deg, rgba(5,5,5,.90) 0%, rgba(5,5,5,.78) 29%, rgba(5,5,5,.44) 48%, rgba(5,5,5,.16) 72%, rgba(5,5,5,.20) 100%);
}
#proposition .proposition-copy{text-shadow:0 4px 18px rgba(0,0,0,.32)}
@media (max-width:980px){
  #proposition .proposition-layout{align-items:flex-end;padding-top:calc(var(--nav-h) + 48px);padding-bottom:72px;}
  #proposition .proposition-copy{width:min(680px,92%);padding:28px 26px 32px 0;}
  #proposition::before{background-position:68% center;}
  #proposition::after{
    background:
      linear-gradient(180deg, rgba(5,5,5,.18) 0%, rgba(5,5,5,.24) 35%, rgba(5,5,5,.76) 76%, rgba(5,5,5,.90) 100%),
      linear-gradient(90deg, rgba(5,5,5,.52) 0%, rgba(5,5,5,.26) 60%, rgba(5,5,5,.20) 100%);
  }
}
@media (max-width:640px){
  #proposition .proposition-title{font-size:clamp(52px,14vw,68px);}
  #proposition .proposition-deck{font-size:21px;}
  #proposition .proposition-case{font-size:16px;line-height:1.52;}
}

/* ==========================================================
   v0.14 CHANNEL TYPOGRAPHY + BROADER MARKET LANGUAGE
   Route-to-market language now covers software, AI, services and
   physical products. Typography gives the payoff more emphasis.
   ========================================================== */
#channel .milestone{
  grid-template-columns:minmax(0,4.5fr) minmax(0,7.5fr);
  gap:clamp(56px,7vw,132px);
}
#channel .copy{max-width:650px}
#channel .copy p.first{font-size:clamp(21px,1.58vw,25px);line-height:1.42}
#channel .copy p:nth-child(2){font-size:clamp(17px,1.12vw,19px);line-height:1.58;color:rgba(255,255,255,.72)}
#channel .copy p:last-child{
  margin-top:clamp(24px,3vh,34px);
  font-family:var(--serif);
  font-size:clamp(25px,2vw,34px);
  line-height:1.08;
  letter-spacing:-.025em;
  color:#fff;
}
#channel h3{font-size:clamp(50px,5vw,82px);max-width:none}
#channel::after{
  background:
    linear-gradient(180deg, rgba(5,5,5,.32) 0%, rgba(5,5,5,.38) 42%, rgba(5,5,5,.60) 100%),
    linear-gradient(90deg, rgba(5,5,5,.74) 0%, rgba(5,5,5,.58) 31%, rgba(5,5,5,.36) 64%, rgba(5,5,5,.28) 100%);
}
@media (max-width:980px){
  #channel .milestone{grid-template-columns:1fr;gap:34px}
  #channel .copy{max-width:720px}
}


/* ==========================================================
   v0.15 CHANNEL CLARITY + COMPOSITION PASS
   Simpler language; content pulled left to preserve the interchange.
   ========================================================== */
#channel .milestone{
  grid-template-columns:minmax(260px,3.55fr) minmax(0,6.45fr);
  gap:clamp(26px,3.1vw,54px);
  width:min(1320px,88%);
}
#channel .copy{
  max-width:590px;
  justify-self:start;
}
#channel .copy p.first{
  font-size:clamp(20px,1.46vw,24px);
  line-height:1.40;
  max-width:570px;
}
#channel .copy p:nth-child(2){
  font-size:clamp(16.5px,1.05vw,18.5px);
  line-height:1.55;
  max-width:580px;
}
#channel .copy p:last-child{
  max-width:510px;
  font-size:clamp(24px,1.85vw,32px);
  line-height:1.08;
}
#channel h3{
  font-size:clamp(48px,4.65vw,78px);
}
#channel::after{
  background:
    linear-gradient(180deg, rgba(5,5,5,.27) 0%, rgba(5,5,5,.33) 42%, rgba(5,5,5,.56) 100%),
    linear-gradient(90deg, rgba(5,5,5,.76) 0%, rgba(5,5,5,.60) 26%, rgba(5,5,5,.34) 54%, rgba(5,5,5,.18) 82%, rgba(5,5,5,.14) 100%);
}
@media (max-width:1180px){
  #channel .milestone{width:94%;grid-template-columns:minmax(230px,3.25fr) minmax(0,6.75fr);gap:34px}
}
@media (max-width:980px){
  #channel .milestone{width:100%;grid-template-columns:1fr;gap:30px}
  #channel .copy{max-width:680px}
}


/* ==========================================================
   v0.16 CHANNEL LAYOUT OPTION 2
   Single editorial text column on the far left; preserve the
   right ~60% of the interchange as an unobstructed visual field.
   ========================================================== */
#channel .container{
  display:flex;
  align-items:center;
}
#channel .milestone{
  width:min(520px,39vw);
  display:block;
  margin:0;
  padding-top:24px;
  border-top:1px solid rgba(255,255,255,.34);
}
#channel .side{
  position:relative;
  top:auto;
  margin-bottom:clamp(30px,4vh,44px);
}
#channel .side .label{
  margin-bottom:14px;
  font-size:10px;
  letter-spacing:.20em;
}
#channel h3{
  font-size:clamp(54px,4.75vw,80px);
  line-height:.93;
  letter-spacing:-.05em;
}
#channel .copy{
  max-width:500px;
}
#channel .copy p.first{
  max-width:490px;
  font-size:clamp(19px,1.30vw,22px);
  line-height:1.43;
}
#channel .copy p:nth-child(2){
  max-width:485px;
  font-size:clamp(16px,1vw,18px);
  line-height:1.56;
  color:rgba(255,255,255,.72);
}
#channel .copy p:last-child{
  margin-top:clamp(24px,3.2vh,34px);
  max-width:450px;
  font-size:clamp(25px,1.9vw,32px);
  line-height:1.07;
  letter-spacing:-.028em;
}
#channel::before{
  background-position:60% center;
}
#channel::after{
  background:
    linear-gradient(180deg, rgba(5,5,5,.18) 0%, rgba(5,5,5,.22) 48%, rgba(5,5,5,.42) 100%),
    linear-gradient(90deg, rgba(5,5,5,.82) 0%, rgba(5,5,5,.74) 24%, rgba(5,5,5,.50) 40%, rgba(5,5,5,.19) 57%, rgba(5,5,5,.08) 72%, rgba(5,5,5,.05) 100%);
}
@media (max-width:1180px){
  #channel .milestone{width:min(500px,44vw)}
  #channel::before{background-position:64% center}
}
@media (max-width:980px){
  #channel .container{display:block}
  #channel .milestone{width:100%;max-width:620px}
  #channel::before{background-position:66% center}
  #channel::after{
    background:
      linear-gradient(180deg, rgba(5,5,5,.36) 0%, rgba(5,5,5,.42) 52%, rgba(5,5,5,.66) 100%),
      linear-gradient(90deg, rgba(5,5,5,.74) 0%, rgba(5,5,5,.54) 62%, rgba(5,5,5,.28) 100%);
  }
}



/* ==========================================================
   v0.17 BALANCED TEXT REAL ESTATE
   Both proposition and channel panels now use roughly half the
   viewport for text, with the composition shifted slightly right
   so the image does not feel pinned to the far-left margin.
   ========================================================== */
#proposition .proposition-layout{
  width:100%;
  justify-content:flex-start;
}
#proposition .proposition-copy{
  width:min(760px,48vw);
  margin-left:clamp(52px,6vw,118px);
  padding:clamp(30px,3.8vw,56px) 0 clamp(34px,4vw,60px) 0;
}
#proposition .proposition-title{
  font-size:clamp(68px,6.3vw,110px);
  max-width:7em;
}
#proposition .proposition-deck{
  max-width:660px;
  font-size:clamp(24px,1.85vw,31px);
}
#proposition .proposition-case,
#proposition .proposition-payoff{max-width:640px;}
#proposition::after{
  background:
    linear-gradient(180deg, rgba(5,5,5,.18) 0%, rgba(5,5,5,.16) 42%, rgba(5,5,5,.36) 100%),
    linear-gradient(90deg, rgba(5,5,5,.82) 0%, rgba(5,5,5,.72) 22%, rgba(5,5,5,.48) 41%, rgba(5,5,5,.20) 61%, rgba(5,5,5,.16) 100%);
}
#channel .milestone{
  width:min(720px,48vw);
  margin-left:clamp(52px,6vw,118px);
  padding-top:28px;
}
#channel h3{
  font-size:clamp(58px,5.2vw,86px);
}
#channel .copy{
  max-width:660px;
}
#channel .copy p.first{
  max-width:640px;
  font-size:clamp(20px,1.42vw,24px);
}
#channel .copy p:nth-child(2){
  max-width:635px;
  font-size:clamp(16.5px,1.04vw,18.5px);
}
#channel .copy p:last-child{
  max-width:600px;
  font-size:clamp(27px,2.05vw,36px);
}
#channel::after{
  background:
    linear-gradient(180deg, rgba(5,5,5,.18) 0%, rgba(5,5,5,.22) 48%, rgba(5,5,5,.42) 100%),
    linear-gradient(90deg, rgba(5,5,5,.80) 0%, rgba(5,5,5,.70) 22%, rgba(5,5,5,.48) 42%, rgba(5,5,5,.18) 64%, rgba(5,5,5,.08) 78%, rgba(5,5,5,.05) 100%);
}
@media (max-width:1180px){
  #proposition .proposition-copy{width:min(720px,52vw); margin-left:clamp(42px,5vw,88px);}
  #channel .milestone{width:min(660px,52vw); margin-left:clamp(42px,5vw,88px);}
}
@media (max-width:980px){
  #proposition .proposition-copy{
    width:min(700px,92%);
    margin-left:0;
    padding:28px 0 34px 0;
  }
  #channel .milestone{
    width:100%;
    max-width:700px;
    margin-left:0;
  }
}



/* ==========================================================
   v0.18 BUSINESS HEADING RIGHT
   Move the business heading into the right-hand text zone so the
   left side of the office image remains more visible.
   ========================================================== */
#business .split{
  width:min(1380px,92%);
  min-height:100svh;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(540px,1.06fr);
  grid-template-rows:auto auto;
  align-content:center;
  column-gap:clamp(40px,4.2vw,84px);
  row-gap:clamp(20px,2.6vh,28px);
  padding-top:calc(var(--nav-h) + 34px);
  padding-bottom:clamp(54px,7vh,84px);
}
#business h2{
  grid-column:2;
  grid-row:1;
  max-width:8.2ch;
  margin:0;
  font-size:clamp(70px,6.2vw,106px);
  line-height:.90;
  letter-spacing:-.055em;
  align-self:end;
}
#business .copy{
  grid-column:2;
  grid-row:2;
  max-width:720px;
}
#business .copy p:first-child{
  font-size:clamp(22px,1.62vw,28px);
  line-height:1.38;
  color:#fff;
}
#business .copy p:nth-child(2){
  max-width:660px;
  font-size:clamp(17px,1.08vw,19px);
  line-height:1.56;
  color:rgba(255,255,255,.78);
}
#business::after{
  background:
    linear-gradient(180deg, rgba(5,5,5,.26) 0%, rgba(5,5,5,.24) 28%, rgba(5,5,5,.50) 72%, rgba(5,5,5,.66) 100%),
    linear-gradient(90deg, rgba(5,5,5,.28) 0%, rgba(5,5,5,.22) 18%, rgba(5,5,5,.36) 34%, rgba(5,5,5,.64) 56%, rgba(5,5,5,.74) 100%);
}
#business::before{background-position:center center;}
@media (max-width:1180px){
  #business .split{
    grid-template-columns:minmax(0,1fr) minmax(500px,1fr);
    width:94%;
  }
  #business h2{font-size:clamp(64px,6vw,92px);}
}
@media (max-width:980px){
  #business .split{
    display:block;
    width:100%;
    min-height:auto;
    padding-top:calc(var(--nav-h) + 46px);
    padding-bottom:68px;
  }
  #business h2{
    max-width:10ch;
    margin:0 0 26px 0;
    font-size:clamp(56px,12vw,74px);
  }
  #business .copy{max-width:700px;}
  #business::after{
    background:
      linear-gradient(180deg, rgba(5,5,5,.34) 0%, rgba(5,5,5,.30) 30%, rgba(5,5,5,.62) 76%, rgba(5,5,5,.78) 100%),
      linear-gradient(90deg, rgba(5,5,5,.48) 0%, rgba(5,5,5,.42) 52%, rgba(5,5,5,.58) 100%);
  }
}


/* v0.20 copy refinement only — all approved image CSS preserved */
#proposition .proposition-bridge{
  margin-top:clamp(18px,2.4vh,26px);
  max-width:640px;
  font-size:clamp(16px,1.06vw,18px);
  line-height:1.56;
  color:rgba(255,255,255,.78);
}



/* ==========================================================
   v0.22 FINAL APPROVAL — NEW INTERPRETATION + MEETING CUBES
   The new black intro explains why U.S. progress is easy to misread;
   the meeting becomes the first concrete milestone.
   Existing approved photography and all prior layouts are preserved.
   ========================================================== */
.misread-intro{
  position:relative;
  overflow:hidden;
  background:#080808;
}
.misread-intro::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:1;
  background-image:
    linear-gradient(90deg, rgba(7,7,7,.86) 0%, rgba(7,7,7,.76) 24%, rgba(7,7,7,.54) 44%, rgba(7,7,7,.44) 60%, rgba(7,7,7,.58) 100%),
    linear-gradient(180deg, rgba(7,7,7,.22) 0%, rgba(7,7,7,.12) 30%, rgba(7,7,7,.38) 100%),
    url("../img/us-expansion-05.webp?v=1792008359");
  background-size:auto, auto, cover;
  background-repeat:no-repeat;
  background-position:center center, center center, 64% center;
}
.misread-intro::after{
  content:"";
  position:absolute;
  left:6.4%; right:6.4%; top:calc(var(--nav-h) + 15vh);
  height:1px;
  background:linear-gradient(90deg,rgba(255,255,255,.34),rgba(255,255,255,.06));
}
.misread-intro > *{position:relative;z-index:2}
.misread-intro-grid{
  min-height:100svh;
  display:grid;
  grid-template-columns:minmax(0,1.02fr) minmax(460px,.82fr);
  gap:clamp(70px,8vw,150px);
  align-items:center;
  padding-top:calc(var(--nav-h) + 76px);
  padding-bottom:clamp(76px,9vh,116px);
}
.misread-intro-heading{align-self:center;max-width:760px}
.misread-intro-heading .label{margin-bottom:clamp(24px,3.2vh,34px);color:rgba(255,255,255,.58)}
.misread-intro-heading h2{
  max-width:9.4ch;
  font-size:clamp(66px,6.2vw,106px);
  line-height:.91;
  letter-spacing:-.054em;
}
.misread-intro-copy{
  max-width:650px;
  align-self:center;
  padding-top:clamp(38px,5vh,62px);
}
.misread-intro-copy p{
  margin:0 0 24px;
  font-size:clamp(17px,1.12vw,19px);
  line-height:1.58;
  color:rgba(255,255,255,.74);
}
.misread-intro-copy p.first{
  font-family:var(--serif);
  font-size:clamp(24px,1.9vw,32px);
  line-height:1.31;
  letter-spacing:-.018em;
  color:#fff;
  margin-bottom:clamp(28px,3.5vh,38px);
}
.misread-intro-copy p:last-child{
  color:rgba(255,255,255,.90);
  margin-bottom:0;
}
.meeting-panel{position:relative;overflow:hidden}
.meeting-panel::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(ellipse at 86% 22%, rgba(182,144,93,.085), transparent 34%),
    linear-gradient(118deg,rgba(248,246,241,.38),rgba(255,255,255,0) 54%);
}
.meeting-panel > *{position:relative;z-index:2}
.meeting-milestone{
  grid-template-columns:minmax(300px,4.2fr) minmax(0,7.8fr);
  gap:clamp(54px,7vw,126px);
  width:min(1440px,100%);
}
.meeting-milestone .side{max-width:450px}
.meeting-milestone h3{
  font-size:clamp(58px,5.3vw,88px);
  line-height:.94;
  letter-spacing:-.05em;
}
.meeting-milestone .copy{max-width:720px}
.meeting-milestone .copy p.first{
  font-family:var(--serif);
  font-size:clamp(23px,1.75vw,29px);
  line-height:1.33;
  letter-spacing:-.015em;
  color:#111;
}
.meeting-milestone .copy p:not(.first){
  font-size:clamp(16.5px,1.06vw,18.5px);
  line-height:1.58;
  max-width:690px;
}
@media (max-width:1100px){
  .misread-intro-grid{grid-template-columns:1fr 1fr;gap:48px}
  .misread-intro-heading h2{font-size:clamp(58px,6vw,82px)}
  .meeting-milestone{grid-template-columns:minmax(250px,4fr) minmax(0,6fr);gap:44px}
}
@media (max-width:980px){
  .misread-intro-grid{
    grid-template-columns:1fr;
    align-content:center;
    gap:36px;
    padding-top:calc(var(--nav-h) + 62px);
    padding-bottom:72px;
  }
  .misread-intro-heading h2{max-width:10.5ch;font-size:clamp(52px,11vw,74px)}
  .misread-intro-copy{padding-top:0;max-width:720px}
  .meeting-milestone{grid-template-columns:1fr;gap:32px}
  .meeting-milestone .side{max-width:none}
  .meeting-milestone .copy{max-width:720px}
}
@media (max-width:640px){
  .misread-intro::after{top:calc(var(--nav-h) + 10vh)}
  .misread-intro-heading h2{font-size:clamp(48px,13.5vw,64px)}
  .misread-intro-copy p.first{font-size:22px}
  .meeting-milestone h3{font-size:clamp(50px,13vw,66px)}
  .meeting-milestone .copy p.first{font-size:21px}
}



/* ==========================================================
   v0.23 BUSINESS HEADER TWO-LINE TUNE
   Make the business-section heading read as two deliberate lines.
   ========================================================== */
#business h2{
  max-width:none;
  font-size:clamp(62px,5.45vw,90px);
  line-height:.92;
}
#business h2 br{display:block}
@media (max-width:1180px){
  #business h2{font-size:clamp(56px,5.6vw,80px);}
}
@media (max-width:980px){
  #business h2{
    max-width:none;
    font-size:clamp(48px,9.4vw,66px);
    line-height:.94;
  }
}



/* ==========================================================
   v0.24 MEETING IMAGE INSET
   Add a creative square inset image to the white meeting panel.
   ========================================================== */
.meeting-panel{
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
.meeting-panel .container{position:relative;z-index:2}
.meeting-art{
  position:absolute;
  top:clamp(92px,12vh,160px);
  right:clamp(54px,7vw,116px);
  width:clamp(220px,24vw,360px);
  aspect-ratio:1 / 1;
  background-image:url("../img/us-expansion-06.webp?v=1792008359");
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
  border-radius:4px;
  opacity:.56;
  box-shadow:0 28px 60px rgba(0,0,0,.10);
  overflow:hidden;
  z-index:1;
}
.meeting-art::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,.06) 100%),
    linear-gradient(90deg, rgba(255,255,255,.12) 0%, rgba(255,255,255,.00) 48%, rgba(255,255,255,.18) 100%);
}
.meeting-art::after{
  content:"";
  position:absolute;
  inset:-1px;
  border:1px solid rgba(17,17,17,.06);
}
.meeting-milestone{
  position:relative;
  z-index:2;
  grid-template-columns:minmax(300px,4.0fr) minmax(0,7.2fr);
  gap:clamp(54px,6.8vw,120px);
  width:min(1440px,100%);
}
.meeting-milestone .copy{max-width:760px}
@media (min-width:981px){
  .meeting-milestone{padding-top:clamp(130px,16vh,190px);}
}
@media (max-width:1280px){
  .meeting-art{right:clamp(34px,4vw,72px); width:clamp(200px,22vw,300px);}
}
@media (max-width:980px){
  .meeting-art{
    position:relative;
    top:auto;
    right:auto;
    width:min(360px,76vw);
    margin:calc(var(--nav-h) + 24px) auto 12px auto;
    opacity:.70;
  }
  .meeting-milestone{padding-top:0;}
}



/* ==========================================================
   v0.26 MEETING FULL-BLEED IMAGE
   Extend the handshake image across the full meeting panel,
   with a soft white editorial wash so the text stays readable.
   ========================================================== */
.meeting-panel{
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
.meeting-panel::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:1;
  background:
    linear-gradient(90deg, rgba(247,245,240,.94) 0%, rgba(247,245,240,.90) 26%, rgba(247,245,240,.74) 48%, rgba(247,245,240,.60) 66%, rgba(247,245,240,.72) 100%),
    linear-gradient(180deg, rgba(247,245,240,.10) 0%, rgba(247,245,240,.08) 52%, rgba(247,245,240,.18) 100%);
}
.meeting-panel .container{position:relative;z-index:2}
.meeting-art{
  position:absolute;
  inset:0;
  width:auto;
  aspect-ratio:auto;
  top:0;
  right:0;
  border-radius:0;
  box-shadow:none;
  opacity:.50;
  background-size:cover;
  background-position:center center;
  z-index:0;
}
.meeting-art::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.00) 100%);
}
.meeting-art::after{display:none;}
.meeting-milestone{
  position:relative;
  z-index:2;
  grid-template-columns:minmax(280px,3.8fr) minmax(0,7.4fr);
  gap:clamp(44px,6vw,104px);
  width:min(1440px,100%);
}
@media (min-width:981px){
  .meeting-milestone{padding-top:clamp(128px,16vh,188px);}
}
@media (max-width:980px){
  .meeting-panel::before{
    background:
      linear-gradient(180deg, rgba(247,245,240,.90) 0%, rgba(247,245,240,.82) 28%, rgba(247,245,240,.70) 55%, rgba(247,245,240,.86) 100%),
      linear-gradient(90deg, rgba(247,245,240,.84) 0%, rgba(247,245,240,.72) 100%);
  }
  .meeting-art{
    position:absolute;
    inset:0;
    width:auto;
    margin:0;
    opacity:.44;
    background-position:center center;
  }
  .meeting-milestone{padding-top:calc(var(--nav-h) + 54px);}
}


/* ==========================================================
   v0.28 OPENING STATEMENT FINAL LAYOUT
   ========================================================== */
.opening-statement{
  min-height:100svh;
  display:flex;
  align-items:center;
}
.opening-statement-grid{
  width:min(1440px,100%);
  min-height:100svh;
  display:grid;
  grid-template-columns:minmax(0,1.16fr) minmax(390px,.72fr);
  gap:clamp(72px,8vw,150px);
  align-items:center;
  padding-top:calc(var(--nav-h) + 56px);
  padding-bottom:clamp(68px,8vh,108px);
  border-top:1px solid rgba(17,17,17,.12);
}
.opening-statement-headline{
  max-width:880px;
}
.opening-statement-headline h2{
  margin:0;
  max-width:none;
  font-size:clamp(58px,5.15vw,88px);
  line-height:.98;
  letter-spacing:-.045em;
}
.opening-statement-copy{
  max-width:520px;
  align-self:center;
}
.opening-statement-copy p{
  margin:0;
  font-size:clamp(19px,1.25vw,22px);
  line-height:1.55;
  color:#2b2b2b;
}
@media (max-width:1100px){
  .opening-statement-grid{
    grid-template-columns:minmax(0,1fr) minmax(330px,.78fr);
    gap:52px;
  }
  .opening-statement-headline h2{
    font-size:clamp(52px,5.7vw,72px);
  }
}
@media (max-width:860px){
  .opening-statement{
    min-height:auto;
  }
  .opening-statement-grid{
    grid-template-columns:1fr;
    gap:36px;
    min-height:auto;
    padding-top:calc(var(--nav-h) + 72px);
    padding-bottom:72px;
  }
  .opening-statement-headline h2{
    font-size:clamp(48px,10vw,68px);
    line-height:1;
  }
  .opening-statement-copy{
    max-width:700px;
  }
  .opening-statement-copy p{
    font-size:19px;
  }
}


/* ==========================================================
   v0.30 MEETING COPY + IMAGE VISIBILITY FINAL
   Slightly stronger image presence while preserving readability.
   ========================================================== */
.meeting-panel::before{
  background:
    linear-gradient(90deg, rgba(247,245,240,.86) 0%, rgba(247,245,240,.82) 26%, rgba(247,245,240,.66) 48%, rgba(247,245,240,.52) 66%, rgba(247,245,240,.64) 100%),
    linear-gradient(180deg, rgba(247,245,240,.08) 0%, rgba(247,245,240,.06) 52%, rgba(247,245,240,.14) 100%);
}
.meeting-art{opacity:.58;}
@media (max-width:980px){
  .meeting-panel::before{
    background:
      linear-gradient(180deg, rgba(247,245,240,.84) 0%, rgba(247,245,240,.76) 28%, rgba(247,245,240,.64) 55%, rgba(247,245,240,.80) 100%),
      linear-gradient(90deg, rgba(247,245,240,.78) 0%, rgba(247,245,240,.66) 100%);
  }
  .meeting-art{opacity:.50;}
}


/* FINAL HERO CLEANUP — remove hero index and its fine lines only */
.hero .tabs,
.hero .tabs a{
  display:none !important;
  border-top:none !important;
}
/* responsive background variants */
@media (max-width:640px){.hero::before{background-image:url("../img/us-expansion-01-w640.webp?v=1792008357")}}
@media (min-width:641px) and (max-width:1200px){.hero::before{background-image:url("../img/us-expansion-01-w1200.webp?v=1792008357")}}
@media (max-width:640px){#proposition::before{background-image:url("../img/us-expansion-02-w640.webp?v=1792008357")}}
@media (min-width:641px) and (max-width:1200px){#proposition::before{background-image:url("../img/us-expansion-02-w1200.webp?v=1792008357")}}
@media (max-width:640px){#channel::before{background-image:url("../img/us-expansion-03-w640.webp?v=1792008358")}}
@media (min-width:641px) and (max-width:1200px){#channel::before{background-image:url("../img/us-expansion-03-w1200.webp?v=1792008358")}}
@media (max-width:640px){#business::before{background-image:url("../img/us-expansion-04-w640.webp?v=1792008358")}}
@media (min-width:641px) and (max-width:1200px){#business::before{background-image:url("../img/us-expansion-04-w1200.webp?v=1792008359")}}
@media (max-width:640px){.misread-intro::before{background-image:linear-gradient(90deg, rgba(7,7,7,.86) 0%, rgba(7,7,7,.76) 24%, rgba(7,7,7,.54) 44%, rgba(7,7,7,.44) 60%, rgba(7,7,7,.58) 100%),linear-gradient(180deg, rgba(7,7,7,.22) 0%, rgba(7,7,7,.12) 30%, rgba(7,7,7,.38) 100%),url("../img/us-expansion-05-w640.webp?v=1792008359")}}
@media (min-width:641px) and (max-width:1200px){.misread-intro::before{background-image:linear-gradient(90deg, rgba(7,7,7,.86) 0%, rgba(7,7,7,.76) 24%, rgba(7,7,7,.54) 44%, rgba(7,7,7,.44) 60%, rgba(7,7,7,.58) 100%),linear-gradient(180deg, rgba(7,7,7,.22) 0%, rgba(7,7,7,.12) 30%, rgba(7,7,7,.38) 100%),url("../img/us-expansion-05-w1200.webp?v=1792008359")}}
@media (max-width:640px){.meeting-art{background-image:url("../img/us-expansion-06-w640.webp?v=1792008359")}}