@font-face{font-family:'Benang';src:url(fonts/Benang-Regular.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Benang';src:url(fonts/Benang-Bold.woff2) format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Benang';src:url(fonts/Benang-Black.woff2) format('woff2');font-weight:900;font-style:normal;font-display:swap}
@font-face{font-family:'Benang';src:url(fonts/Benang-BlackOblique.woff2) format('woff2');font-weight:900;font-style:italic;font-display:swap}

/* MOBILE FIRST.
   1. Base rules below are the phone design: one thumb, one column, 16px body text, 44px+ touch targets,
      a chapter menu in the top bar and a Call / Email dock at the bottom.
   2. From 600px wide the lists open out into two columns (large phones in landscape, tablets).
   3. From 901px wide they open out further (touch tablets in landscape).
   4. SCREEN mode (mouse-driven landscape windows: laptops, desktops, projectors) turns the same content into
      one-screen chapters drawn on a 1366 x 768 canvas that scales to fill the window and snaps chapter to chapter. */
:root{
  --navy:#000066; --navy2:#12128A; --navy3:#1B1BA3; --orange:#FE5000; --cyan:#00C8E0;
  --paper:#FFFFFF; --mist:#EEF0F6; --mist2:#DCE0EC; --palecyan:#E0F8F8; --paleorange:#FDE7DC;
  --ink:#000066; --muted:#4F5470; --onnavy:#FFFFFF; --onnavy-muted:#C3C9EA;
  --display:'Benang', Arial, Helvetica, sans-serif; --body:'Benang', Arial, Helvetica, sans-serif;
  --maxw:73.75rem; --gutter:1.25rem; --barh:3.5rem; --dockh:4.5rem; --k:1;
  --safe-t:env(safe-area-inset-top,0px); --safe-b:env(safe-area-inset-bottom,0px); --safe-l:env(safe-area-inset-left,0px); --safe-r:env(safe-area-inset-right,0px);
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:1rem;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden;overflow-x:clip;-webkit-tap-highlight-color:rgba(254,80,0,.18)}
h1,h2,h3,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
h1,h2,h3{text-wrap:balance}
p{text-wrap:pretty}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
button{font:inherit;color:inherit}
.num{font-variant-numeric:tabular-nums}
.wrap{max-width:var(--maxw);margin:0 auto;padding-left:max(var(--gutter),var(--safe-l));padding-right:max(var(--gutter),var(--safe-r))}
:focus-visible{outline:0.1875rem solid var(--cyan);outline-offset:0.1875rem}
.ico{fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;width:1.25rem;height:1.25rem;flex:none}
.skip{position:absolute;left:0.5rem;top:-5rem;z-index:100;background:var(--orange);color:#fff;font-weight:700;padding:0.75rem 1rem;border-radius:0.5rem;text-decoration:none}
.skip:focus{top:calc(0.5rem + var(--safe-t))}

/* ---------- top bar ---------- */
.bar{position:fixed;left:0;right:0;top:0;padding-top:var(--safe-t);z-index:50;color:var(--navy);background:rgba(255,255,255,.94);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:0.0625rem solid var(--mist2);transition:background .4s,border-color .4s,color .4s}
.bar .wrap{display:flex;align-items:center;gap:0.75rem;height:var(--barh)}
.bar .home{display:flex;align-items:center;flex:none;align-self:stretch}
.bar .logo{height:1.5rem;width:auto;display:block;color:var(--navy);--sym:var(--orange);transition:color .4s}
.bar .where{flex:1;min-width:0;text-align:right;font-size:0.875rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .4s}
.bar .where b{color:var(--navy);font-weight:700;transition:color .4s}
.where-tail,.counter,.bar .tag{display:none}
.bar .tag{font-size:0.75rem;letter-spacing:.08em;font-weight:700;color:var(--orange);white-space:nowrap}
.counter{font-size:0.75rem;color:var(--muted);white-space:nowrap}
.menu-btn{display:none}
.js .menu-btn{display:grid;place-items:center;flex:none;width:2.75rem;height:2.75rem;margin-right:-0.625rem;padding:0;border:0;border-radius:50%;background:none;cursor:pointer}
.menu-btn .ico{width:1.5rem;height:1.5rem}
.on-navy .bar{color:#fff;background:rgba(0,0,80,.78);border-bottom-color:rgba(255,255,255,.14)}
.on-navy .bar .where,.on-navy .bar .counter{color:var(--onnavy-muted)} .on-navy .bar .where b{color:#fff} .on-navy .bar .logo{color:#fff}
.progress{position:absolute;left:0;bottom:-0.0625rem;height:0.1875rem;width:100%;background:var(--mist2)}
.on-navy .progress{background:rgba(255,255,255,.16)}
.progress i{display:block;height:100%;width:0;background:var(--orange);transition:width .12s linear}

/* ---------- chapter menu (phone and tablet) ---------- */
.menu{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:var(--navy);color:#fff;overflow-y:auto;overscroll-behavior:contain}
.menu[open]{display:flex;flex-direction:column;animation:menu-in .28s cubic-bezier(.2,.8,.2,1)}
.menu::backdrop{background:var(--navy)}
@keyframes menu-in{from{opacity:0;transform:translateY(-0.75rem)}to{opacity:1;transform:none}}
.menu-top{flex:none;display:flex;align-items:center;justify-content:space-between;height:calc(var(--barh) + var(--safe-t));padding:var(--safe-t) max(var(--gutter),var(--safe-r)) 0 max(var(--gutter),var(--safe-l));border-bottom:0.0625rem solid rgba(255,255,255,.14)}
.menu-top .logo{height:1.5rem;width:auto;color:#fff;--sym:var(--orange)}
.menu-close{display:grid;place-items:center;width:2.75rem;height:2.75rem;margin-right:-0.625rem;padding:0;border:0;border-radius:50%;background:none;color:#fff;cursor:pointer}
.menu-close .ico{width:1.5rem;height:1.5rem}
.menu-list{flex:1 0 auto;display:flex;flex-direction:column;justify-content:center;padding:0.75rem max(var(--gutter),var(--safe-r)) 0.75rem max(var(--gutter),var(--safe-l))}
.menu-list a{display:flex;align-items:baseline;gap:0.875rem;min-height:3rem;padding:0.5625rem 0;border-bottom:0.0625rem solid rgba(255,255,255,.12);color:#fff;text-decoration:none;font-family:var(--display);font-weight:900;font-style:italic;font-size:clamp(1.375rem,6.4vw,1.875rem);line-height:1.1}
.menu-list li:last-child a{border-bottom:0}
.menu-list .num{flex:none;width:1.625rem;font-family:var(--body);font-style:normal;font-weight:700;font-size:0.8125rem;letter-spacing:.06em;color:var(--orange)}
.menu-list a[aria-current]{color:var(--cyan)}
.menu-actions{flex:none;display:grid;gap:0.625rem;padding:0.75rem max(var(--gutter),var(--safe-r)) calc(1.25rem + var(--safe-b)) max(var(--gutter),var(--safe-l))}

/* dot nav belongs to screen mode */
.dots{display:none}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:0.625rem;min-height:3.25rem;padding:0.75rem 1.5rem;border-radius:62.4375rem;font-family:var(--body);font-weight:700;font-size:1.0625rem;line-height:1.2;text-decoration:none;white-space:nowrap;border:0.125rem solid transparent;transition:background .2s,border-color .2s,color .2s}
.btn.primary{background:var(--orange);color:#fff}
.btn.primary:hover{background:#ff6a26}
.btn.ghost{border-color:rgba(255,255,255,.45);color:#fff}
.btn.ghost:hover{background:rgba(255,255,255,.12);border-color:#fff}
.btn.light{background:var(--mist);color:var(--navy)}

/* ---------- hero: photo on top, navy panel below, an orange rule between them ---------- */
.hero{position:relative;display:flex;flex-direction:column;background:var(--navy);color:var(--onnavy);min-height:calc(100vh - var(--dockh));min-height:calc(100svh - var(--dockh) - var(--safe-b));overflow:hidden;isolation:isolate}
.hero-photo{position:relative;flex:1 1 10.5rem;min-height:10.5rem;overflow:hidden;background:var(--navy3)}
.hero-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:40% 43%}
.hero-photo::after{content:"";position:absolute;inset:0;background:rgba(0,0,102,.2)}
.hero-echo{flex:none;height:0.375rem;background:var(--orange)}
.hero-panel{position:relative;flex:none;overflow:hidden;isolation:isolate;background:var(--navy)}
.hero-panel .wrap{position:relative;z-index:2;display:flex;flex-direction:column;gap:0.875rem;padding-top:1.5rem;padding-bottom:1.75rem}
.chev{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.chev svg{position:absolute;right:-48%;top:-12%;height:124%;width:auto;fill:var(--navy2);will-change:transform;animation:drift 18s ease-in-out infinite alternate}
.chev.soft svg{opacity:.6}
@keyframes drift{from{transform:translate3d(0,0,0) rotate(0deg)}to{transform:translate3d(-2%,3%,0) rotate(2deg)}}
.kick{display:flex;flex-wrap:wrap;align-items:center;gap:0.25rem 0.875rem;font-size:0.8125rem;font-weight:700;letter-spacing:.03em;color:var(--onnavy-muted)}
.kick li{display:flex;align-items:center;gap:0.4375rem}
.kick li::before{content:"";width:0.4375rem;height:0.4375rem;border-radius:50%;background:var(--orange);flex:none}
.h1{font-family:var(--display);font-weight:900;font-style:italic;font-size:clamp(2rem,9.6vw,3.5rem);line-height:1;letter-spacing:-.01em;overflow-wrap:break-word}
.hero .sub{font-weight:700;color:var(--orange);font-size:clamp(1.0625rem,4.6vw,1.375rem);line-height:1.3}
.hero .meta{display:flex;flex-wrap:wrap;gap:0.4375rem;font-size:0.8125rem}
.hero .meta b{font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#fff;border:0.0625rem solid rgba(255,255,255,.32);border-radius:62.4375rem;padding:0.3125rem 0.75rem}
.actions{display:flex;flex-direction:column;gap:0.625rem;margin-top:0.375rem}
.actions .call{display:none}
.cue{display:none}

/* ---------- chapters ---------- */
.chapter,.close{position:relative;display:flex;align-items:center;overflow:hidden;isolation:isolate;min-height:calc(100vh - var(--dockh));min-height:calc(100svh - var(--dockh) - var(--safe-b));padding-block:calc(var(--barh) + var(--safe-t) + 2.25rem) 3rem}
.chapter>.wrap,.close>.wrap{position:relative;z-index:2;width:100%}
.chapter.navy,.close{background:var(--navy);color:var(--onnavy)}
.chapter.mist{background:var(--mist)}
.ch-head{display:grid;gap:0.5rem;margin-bottom:1.375rem}
.eyebrow{font-size:0.8125rem;font-weight:700;letter-spacing:.14em;color:var(--orange)}
.ch-title{font-family:var(--display);font-weight:900;font-style:italic;font-size:clamp(2rem,8.8vw,2.875rem);line-height:1;letter-spacing:-.01em}
.lede{font-size:clamp(1.1875rem,5.1vw,1.5rem);font-weight:700;line-height:1.36}
.prose{font-size:1rem;line-height:1.62;margin-top:1em}
.label{font-size:0.8125rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--orange)}
.ic{display:inline-flex;align-items:center;justify-content:center;width:2.75rem;height:2.75rem;border-radius:50%;flex:none}
.ic-navy{background:var(--navy);color:var(--cyan)} .ic-orange{background:var(--orange);color:#fff} .ic-cyan{background:var(--cyan);color:var(--navy)}

/* reveal: each block eases in once as it scrolls into view. Without JavaScript everything is simply visible. */
.js .reveal{opacity:0;transform:translateY(1rem);transition:opacity .35s ease,transform .35s ease;will-change:opacity,transform}
.js .reveal.in{opacity:1;transform:none;transition:opacity .9s cubic-bezier(.16,.84,.3,1) var(--dl,.05s),transform .9s cubic-bezier(.16,.84,.3,1) var(--dl,.05s)}
.reveal[data-d="1"]{--dl:.1s}.reveal[data-d="2"]{--dl:.18s}.reveal[data-d="3"]{--dl:.26s}.reveal[data-d="4"]{--dl:.34s}.reveal[data-d="5"]{--dl:.42s}.reveal[data-d="6"]{--dl:.5s}

/* market need */
.ideal{margin-top:1.75rem;display:grid;gap:0.75rem}
.chips{display:flex;flex-wrap:wrap;gap:0.5rem}
.chips li{font-size:0.9375rem;font-weight:700;line-height:1.25;padding:0.5625rem 0.9375rem;border-radius:62.4375rem;background:var(--mist);color:var(--navy)}
.chips li:nth-child(3n+1){background:var(--palecyan)}

/* offering: the lifecycle as a vertical timeline */
.life{margin-top:1.5rem;background:var(--paper);border-radius:1rem;padding:1.125rem 1.125rem 1.25rem;display:grid;gap:1rem}
.life-cap{font-size:1rem;font-weight:700;line-height:1.4}
.seq{position:relative;display:grid;gap:0.5rem}
.seq::before{content:"";position:absolute;left:1.1875rem;top:1.25rem;bottom:1.25rem;width:0.125rem;background:var(--orange)}
.seq li{position:relative;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:0.875rem;min-width:0}
.seq .dot{width:2.5rem;height:2.5rem;border-radius:50%;background:var(--orange);color:#fff;display:grid;place-items:center;font-family:var(--display);font-weight:900;font-size:0.875rem}
.seq b{font-size:1.0625rem;font-weight:700;line-height:1.2}

/* project delivery */
.dlist{display:grid;gap:0.5rem}
.dlist li{display:flex;align-items:center;gap:0.875rem;min-width:0;min-height:4.25rem;padding:0.75rem 1rem;border-radius:0.875rem;background:rgba(255,255,255,.08);font-size:1.0625rem;font-weight:700;line-height:1.3}

/* capabilities: an accordion on phones, one open at a time */
.caps{display:grid;gap:0.5rem}
.cap{min-width:0;border-radius:0.875rem;background:var(--mist);color:var(--ink);transition:background .25s}
.cap h3{font-size:1rem;font-weight:700;line-height:1.28;text-wrap:wrap}
.cap-btn{display:flex;align-items:center;gap:0.75rem;width:100%;min-height:4.25rem;padding:0.75rem 1rem;margin:0;border:0;border-radius:0.875rem;background:none;font:inherit;font-weight:700;color:inherit;text-align:left;cursor:pointer}
.cap-btn .t{flex:1;min-width:0}
.pm{position:relative;flex:none;width:1.25rem;height:1.25rem}
.pm::before,.pm::after{content:"";position:absolute;left:0.125rem;right:0.125rem;top:50%;height:0.125rem;margin-top:-0.0625rem;border-radius:0.0625rem;background:currentColor;transition:transform .3s ease,opacity .3s ease}
.pm::after{transform:rotate(90deg)}
.cap.open .pm::after{transform:rotate(0deg);opacity:0}
.cap-body{display:grid;grid-template-rows:1fr;transition:grid-template-rows .32s ease}
.cap-body>div{min-height:0;overflow:hidden}
.cap-body p{padding:0 1rem 1rem 4.5rem;font-size:1rem;line-height:1.5}
.js .cap:not(.open) .cap-body{grid-template-rows:0fr}
.js .cap.open{background:var(--palecyan)}
.caps .photo{display:none}

/* decommissioning and funding models */
.feats{display:grid;gap:0.75rem}
.feat{min-width:0;display:grid;grid-template-columns:auto 1fr;column-gap:0.875rem;row-gap:0.75rem;align-items:center;padding:1.125rem 1.125rem 1.25rem;border-radius:1rem;background:var(--paper)}
.feat h3{font-size:1.1875rem;font-weight:700;line-height:1.2}
.feat p{grid-column:1 / -1;font-size:1rem;line-height:1.55}

/* key benefits */
.creds{display:grid;gap:0.5rem}
.cred{display:grid;grid-template-columns:auto 1fr;column-gap:0.875rem;row-gap:0.125rem;align-items:center;min-width:0;padding:0.875rem 1rem;border-radius:0.875rem;background:var(--mist)}
.cred.navy{background:var(--navy);color:#fff}
.cred .ic{grid-row:1 / span 2;align-self:start}
.cred h3{font-size:1.0625rem;font-weight:700;line-height:1.25;align-self:end}
.cred p{grid-column:2;font-size:0.9688rem;line-height:1.45;align-self:start}
.points{margin-top:1.75rem;display:grid;gap:1.25rem}
.pt{min-width:0}
.pt::before{content:"";display:block;width:2.5rem;height:0.1875rem;background:var(--orange);margin-bottom:0.625rem}
.pt h3{font-size:1.0625rem;font-weight:700;line-height:1.25}
.pt p{font-size:1rem;line-height:1.5;margin-top:0.25rem}

/* awards */
.awards li{display:grid;grid-template-columns:4.75rem 1fr;column-gap:1rem;row-gap:0.1875rem;align-items:start;padding:1.125rem 0;border-top:0.0625rem solid rgba(255,255,255,.18)}
.awards li:last-child{border-bottom:0.0625rem solid rgba(255,255,255,.18)}
.awards .big{grid-row:1 / span 2;font-family:var(--display);font-weight:900;font-size:2rem;line-height:1;letter-spacing:-.02em;color:var(--cyan)}
.awards h3{font-size:1.0625rem;font-weight:700;line-height:1.28}
.awards p{grid-column:2;font-size:0.9688rem;line-height:1.4;color:var(--onnavy-muted)}

/* business impact */
.shot{border-radius:1rem;overflow:hidden;aspect-ratio:16/10;background:var(--mist);margin-bottom:1.75rem}
.shot img{width:100%;height:100%;object-fit:cover}

/* contact */
.close{padding-bottom:calc(2.5rem + var(--dockh) + var(--safe-b));min-height:100vh;min-height:100svh}
.close>.wrap{display:grid;gap:1rem;justify-items:start}
.close .h1{font-size:clamp(2.75rem,13vw,4rem)}
.close .quote{font-weight:700;color:var(--orange);font-size:clamp(1.125rem,4.8vw,1.5rem);line-height:1.32}
.contact{display:flex;flex-direction:column;gap:0.625rem;width:100%;margin-top:0.5rem}
.cbtn{display:flex;align-items:center;gap:0.875rem;min-height:4.25rem;padding:0.625rem 1.25rem 0.625rem 0.75rem;border-radius:62.4375rem;background:rgba(255,255,255,.08);border:0.0625rem solid rgba(255,255,255,.2);color:#fff;text-decoration:none;transition:background .2s,border-color .2s}
.cbtn:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.5)}
.cbtn small{display:block;font-size:0.8125rem;letter-spacing:.1em;text-transform:uppercase;color:var(--onnavy-muted);line-height:1.2}
.cbtn b{display:block;font-size:1.125rem;font-weight:700;line-height:1.25;overflow-wrap:anywhere}
.close .logo{width:9rem;height:auto;color:#fff;--sym:var(--orange);margin-top:1.25rem}
.lic{font-size:0.875rem;line-height:1.5;color:var(--onnavy-muted)}

/* ---------- Call / Email dock ---------- */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:60;display:grid;grid-template-columns:1fr 1fr;gap:0.625rem;padding:0.625rem max(var(--gutter),var(--safe-r)) calc(0.625rem + var(--safe-b)) max(var(--gutter),var(--safe-l));background:rgba(255,255,255,.96);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-top:0.0625rem solid var(--mist2);transition:transform .35s ease}
.dock .btn{padding-inline:1rem}
.dock.away{transform:translateY(110%)}

/* very small phones */
@media (max-width:359px){
  .bar .where{display:none}
  .js .menu-btn{margin-left:auto}
  .cap-body p{padding-left:1rem}
}
/* landscape phones: no dock, chapters as tall as their content */
@media (max-height:480px) and (max-width:900px){
  :root{--dockh:0px}
  .dock{display:none}
  .hero,.close,.chapter{min-height:0}
  .hero-photo{flex:0 0 7.5rem;min-height:7.5rem}
  .actions{flex-direction:row;flex-wrap:wrap}
  .actions .btn{flex:1 1 12rem}
  .actions .call{display:inline-flex}
  .contact{flex-direction:row;flex-wrap:wrap}
  .contact li{flex:1 1 15rem}
}

/* ---------- from 600px: two columns ---------- */
@media (min-width:600px){
  :root{--gutter:2rem}
  .hero-panel .wrap{gap:1rem;padding-top:2rem;padding-bottom:2.25rem}
  .h1{max-width:16ch}
  .hero .sub{max-width:34ch}
  .actions{flex-direction:row;flex-wrap:wrap}
  .actions .btn{min-width:13rem}
  .lede{max-width:40ch}
  .prose{max-width:62ch}
  .seq{grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem 1rem}
  .seq::before{display:none}
  .dlist,.caps,.points,.creds,.feats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .feat{padding:1.5rem 1.5rem 1.625rem}
  .dlist,.caps{gap:0.75rem}
  /* no accordion from here up: every capability shows its detail */
  .js .cap:not(.open) .cap-body{grid-template-rows:1fr}
  .js .cap.open{background:var(--mist)}
  .cap-btn{cursor:default;align-items:flex-start;min-height:0;padding:1.125rem 1.125rem 0.5rem}
  .cap-btn .t{align-self:center}
  .pm{display:none}
  .cap-body p{padding:0 1.125rem 1.25rem}
  .caps .photo{display:block;position:relative;border-radius:0.875rem;overflow:hidden;min-height:10rem}
  .caps .photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .awards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:2rem}
  .awards li:nth-last-child(2){border-bottom:0.0625rem solid rgba(255,255,255,.18)}
  .contact{flex-direction:row;flex-wrap:wrap}
  .cbtn{padding-right:1.5rem}
  .dock{grid-template-columns:repeat(2,minmax(0,14rem));justify-content:center}
}
/* ---------- from 901px: touch tablets in landscape ---------- */
@media (min-width:901px){
  .dlist{grid-template-columns:repeat(3,minmax(0,1fr))}
  .caps{grid-template-columns:repeat(4,minmax(0,1fr))}
  .creds{grid-template-columns:repeat(4,minmax(0,1fr))}
  .points{grid-template-columns:repeat(3,minmax(0,1fr))}
  .split{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:2.5rem;align-items:center}
  .shot{margin-bottom:0;aspect-ratio:1/1.05}
}

/* ---------- SCREEN mode: mouse-driven landscape windows ---------- */
@media (min-width:901px) and (min-aspect-ratio:1001/1000) and (pointer:fine), (min-width:901px) and (min-aspect-ratio:1001/1000) and (pointer:none), (min-width:1201px) and (min-aspect-ratio:1001/1000){
  :root{--u:min(calc(100vw / 1366), calc(100vh / 768));--gutter:3rem;--barh:3.75rem;--dockh:0px}
  html{font-size:calc(var(--u) * 16 * var(--k));scroll-snap-type:y mandatory;scrollbar-width:none;-ms-overflow-style:none}
  html::-webkit-scrollbar{width:0;height:0;display:none}
  body{font-size:1.0625rem}
  .wrap{padding-inline:var(--gutter)}
  .dock,.js .menu-btn{display:none}

  .bar .wrap{gap:1.25rem}
  .bar .logo{height:1.625rem}
  .bar .where{text-align:left;font-size:0.8125rem}
  .where-tail{display:inline}
  .counter,.bar .tag{display:block}

  .dots{position:fixed;right:1.125rem;top:50%;transform:translateY(-50%);z-index:40;display:flex;flex-direction:column;gap:0.625rem}
  .dots li{position:relative}
  .dots a{display:block;width:0.625rem;height:0.625rem;border-radius:50%;background:var(--mist2);border:0.125rem solid transparent;transition:transform .2s,background .2s}
  .dots a.on{background:var(--orange);transform:scale(1.35)}
  .dots li span{position:absolute;right:1.25rem;top:50%;transform:translateY(-50%);white-space:nowrap;font-size:0.75rem;font-weight:700;color:var(--navy);background:var(--paper);padding:0.1875rem 0.5rem;border-radius:0.375rem;opacity:0;pointer-events:none;transition:opacity .15s;box-shadow:0 0.125rem 0.625rem rgba(0,0,102,.12)}
  .dots li:hover span,.dots a:focus-visible+span{opacity:1}
  .on-navy .dots a{background:rgba(255,255,255,.3)} .on-navy .dots a.on{background:var(--orange)}

  .btn{min-height:3rem;font-size:1rem}
  .ic{width:2.375rem;height:2.375rem} .ic .ico{width:1.125rem;height:1.125rem}

  /* hero: navy panel with the Benang zigzag edge over the photo */
  .hero,.close,.chapter{min-height:100vh;min-height:100svh;scroll-snap-align:start;scroll-snap-stop:always}
  .hero{display:block;height:100vh;height:100svh}
  .hero-photo{position:absolute;inset:0 0 0 50%;min-height:0}
  .hero-photo img{object-position:50% 40%}
  .hero-photo::after{background:rgba(0,0,102,.12)}
  .hero-echo,.hero-panel{position:absolute;top:0;bottom:0;left:0;width:72%;height:auto;clip-path:polygon(0 0,calc(100% - 12rem) 0,100% 25%,calc(100% - 13.5rem) 50%,calc(100% - 3.0625rem) 75%,calc(100% - 16.5625rem) 100%,0 100%)}
  .hero-echo{left:2rem}
  .hero-panel{display:flex}
  .hero-panel .wrap{max-width:none;width:100%;margin:0;justify-content:flex-end;gap:1.125rem;padding:5rem 18rem 3.5rem max(var(--gutter),calc((100vw - var(--maxw)) / 2 + var(--gutter)))}
  .hero-panel .chev svg{right:10%;top:-18%;height:140%}
  .chev svg{right:-14%;top:-18%;height:140%}
  .chev.soft svg{right:-22%}
  .kick{font-size:0.875rem;gap:0.375rem 1.25rem;margin-top:auto}
  .kick li::before{width:0.5rem;height:0.5rem}
  .h1{font-size:3.75rem;line-height:.98;max-width:none}
  .hero .sub{font-size:1.375rem;line-height:1.28;max-width:26ch}
  .hero .meta{font-size:0.8125rem;gap:0.5rem 0.625rem}
  .hero .meta b{padding:0.3125rem 0.875rem}
  .actions{flex-direction:row;gap:0.75rem;margin-top:0.5rem}
  .actions .btn{min-width:0}
  .actions .call{display:inline-flex}

  .chapter{padding-block:4.625rem 1.625rem}
  .ch-head{gap:0.375rem;margin-bottom:1.25rem;max-width:68ch}
  .eyebrow{font-size:0.6875rem}
  .ch-title{font-size:2.75rem;line-height:1.02}
  .lede{font-size:1.625rem;line-height:1.32;max-width:44ch}
  .prose{font-size:1rem;line-height:1.6}
  .label{font-size:0.75rem}

  /* screen mode fades a chapter out again when you leave it */
  .js .reveal{transform:translateY(1.5rem)}
  .js .reveal.in{opacity:0;transform:translateY(1.5rem);transition:opacity .35s ease,transform .35s ease}
  .js .on .reveal{opacity:1;transform:none;transition:opacity 1s cubic-bezier(.16,.84,.3,1) calc(var(--dl,.05s) * 1.5 + .05s),transform 1s cubic-bezier(.16,.84,.3,1) calc(var(--dl,.05s) * 1.5 + .05s)}

  .ideal{margin-top:2rem}
  .chips li{font-size:0.9375rem;padding:0.5625rem 1rem}

  #offering .lede{font-size:1.375rem;max-width:56ch}
  .life{margin-top:1.75rem;padding:1.5rem 1.75rem 1.75rem;gap:1.25rem}
  .life-cap{font-size:1.0625rem}
  .seq{grid-template-columns:repeat(6,minmax(0,1fr));gap:0.75rem}
  .seq::before{display:block;left:1.5rem;right:1.5rem;top:1.5rem;bottom:auto;width:auto;height:0.125rem}
  .seq li{grid-template-columns:1fr;justify-items:start;gap:0.75rem}
  .seq .dot{width:3rem;height:3rem;font-size:1rem;box-shadow:0 0 0 0.5rem var(--paper)}
  .seq b{font-size:1.1875rem}

  .dlist{gap:0.875rem}
  .dlist li{flex-direction:column;align-items:flex-start;justify-content:space-between;gap:1.5rem;min-height:9.5rem;padding:1.375rem 1.5rem 1.5rem;border-radius:0.875rem;font-size:1.25rem;line-height:1.25}
  .dlist .ic{width:3rem;height:3rem} .dlist .ic .ico{width:1.375rem;height:1.375rem}

  .caps{gap:0.75rem}
  .cap{border-radius:0.75rem;padding:1rem 1.125rem;display:flex;flex-direction:column;gap:0.5625rem}
  .cap.cyan,.js .cap.cyan.open{background:var(--palecyan)} .cap.orange,.js .cap.orange.open{background:var(--paleorange)} .cap.navy,.js .cap.navy.open{background:var(--navy);color:#fff}
  .cap h3{font-size:1.0312rem}
  .cap-btn{padding:0;gap:0.75rem;align-items:center;pointer-events:none;border-radius:0}
  .cap-body p{padding:0;font-size:0.875rem;line-height:1.45}
  .caps .photo{border-radius:0.75rem;min-height:8rem}

  .feats{gap:1rem}
  .feat{row-gap:1.125rem;padding:1.75rem 1.875rem 2rem;border-radius:1rem}
  .feat .ic{width:3rem;height:3rem} .feat .ic .ico{width:1.375rem;height:1.375rem}
  .feat h3{font-size:1.5rem;min-height:3.6rem;display:flex;align-items:center}
  .feat p{font-size:1.0625rem;line-height:1.55}
  .creds{gap:0.75rem}
  .cred{column-gap:0.75rem;row-gap:0.625rem;padding:1.25rem 1.375rem 1.375rem;border-radius:0.75rem;align-content:start}
  .cred .ic{grid-row:1;align-self:center}
  .cred h3{font-size:1.125rem;align-self:center}
  .cred p{grid-column:1 / -1;font-size:0.9375rem}
  .points{grid-template-columns:repeat(5,minmax(0,1fr));margin-top:1.5rem;gap:1.25rem}
  .pt{border-top:0.1875rem solid var(--orange);padding-top:1rem}
  .pt::before{display:none}
  .pt h3{font-size:1.125rem} .pt p{font-size:0.9375rem;line-height:1.45;margin-top:0.375rem}

  .awards{grid-template-columns:repeat(4,minmax(0,1fr));gap:0.75rem}
  .awards li,.awards li:last-child,.awards li:nth-last-child(2){display:flex;flex-direction:column;gap:0.5rem;padding:1.5rem 1.5rem 1.75rem;border:0;border-radius:0.75rem;background:rgba(255,255,255,.07)}
  .awards .big{font-size:3.5rem}
  .awards h3{font-size:1.25rem;line-height:1.25;margin-top:0.5rem}
  .awards p{font-size:0.9375rem}

  .split{gap:3rem}
  .shot{border-radius:1.25rem}
  .split .lede{font-size:1.375rem}

  .close{align-items:center;padding-bottom:1.625rem}
  .close>.wrap{gap:1.125rem;padding-block:0.375rem 1.875rem}
  .close .h1{font-size:5.5rem;max-width:12ch}
  .close .quote{font-size:1.625rem;line-height:1.3;max-width:36ch}
  .contact{margin-top:0.75rem;gap:0.75rem;width:auto}
  .cbtn{min-height:4rem;padding:0.625rem 1.5rem 0.625rem 0.75rem}
  .cbtn small{font-size:0.75rem} .cbtn b{font-size:1.1875rem}
  .close .logo{width:10.625rem;margin-top:1.5rem}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .reveal,.js .reveal.in,.js .on .reveal{opacity:1;transform:none;transition:none}
  .chev svg,.menu[open]{animation:none}
  .cap-body,.pm::before,.pm::after,.dock{transition:none}
}
@media print{
  html{scroll-snap-type:none;font-size:12px}
  .bar,.dots,.dock,.skip,.menu{display:none}
  .hero,.close,.chapter{min-height:0;break-inside:avoid}
  .js .reveal,.js .reveal.in{opacity:1;transform:none}
  .js .cap:not(.open) .cap-body{grid-template-rows:1fr}
}