/* ==========================================================================
   ElevNext - layouts.css  (loaded after style.css)
   --------------------------------------------------------------------------
   Same words, same pictures - a new way of showing them. Everything here is
   applied to the pages' existing markup, so no text or SVG changes and every
   page still reads fully without JavaScript:
     1. Big screens      the page widens and the type scales with the monitor
     2. Motion           smooth scrolling, calm reveals, press and hover effects
     3. Bento tiles      points, cards and service lists in mixed-size tiles
     4. Tabs             long lists of services, sectors and topics; FAQs
     5. Story steps      the stages of a method, with a pinned step counter
     6. Swipe sliders    rows of tiles you swipe on a phone
   Hover effects are written plainly (`:hover`); the build step wraps them in
   `@media (hover:hover)` so a tap on a phone never leaves a stuck hover.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. ROOT HELPERS
   -------------------------------------------------------------------------- */
:root{--stick:var(--header-h)}              /* where sticky things sit under the header */
html.hdr-hidden{--stick:0px}                 /* ...and when the header has tucked away */

/* Pointer variables are registered as NOT inherited, so moving the mouse over a tile or a hero
   re-styles that one element, not everything inside it. */
@property --mx{syntax:"<length-percentage>";inherits:false;initial-value:50%}
@property --my{syntax:"<length-percentage>";inherits:false;initial-value:50%}
@property --glow{syntax:"<number>";inherits:false;initial-value:0}

/* While the page is moving fast, hover is paused (layouts.js sets .is-scrolling): tiles under a
   resting mouse stop lifting, glowing and re-casting shadows frame after frame. */
html.is-scrolling body{pointer-events:none}
.split-sticky > :first-child{top:calc(var(--stick) + 40px)}

/* Smooth wheel scrolling (Lenis) - only runs for mouse users */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis:not(.lenis-autoToggle).lenis-stopped{overflow:clip}
.lenis [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-smooth iframe{pointer-events:none}

/* --------------------------------------------------------------------------
   1. BIG SCREENS
   Up to 1280px nothing changes. Above it the page, the type and the spacing
   grow with the monitor so a 1920px screen is used, not left as empty margins.
   -------------------------------------------------------------------------- */
@media (min-width:1280px){
  :root{
    --wrap:clamp(1200px,calc(1200px + (100vw - 1280px) * .92),2240px);
    --wrap-narrow:clamp(820px,calc(820px + (100vw - 1280px) * .5),1320px);
    --gutter:clamp(40px,3.2vw,88px);
    --fs-display:clamp(4.15rem,calc(4.15rem + (100vw - 1280px) * .031),6.6rem);
    --fs-h1:clamp(3.4rem,calc(3.4rem + (100vw - 1280px) * .0225),5.2rem);
    --fs-h2:clamp(2.7rem,calc(2.7rem + (100vw - 1280px) * .01875),4.2rem);
    --fs-h3:clamp(1.6rem,calc(1.6rem + (100vw - 1280px) * .0075),2.2rem);
    --fs-h4:clamp(1.22rem,calc(1.22rem + (100vw - 1280px) * .006),1.7rem);
    --fs-lead:clamp(1.2rem,calc(1.2rem + (100vw - 1280px) * .0056),1.65rem);
    --fs-body:clamp(1rem,calc(1rem + (100vw - 1280px) * .003125),1.25rem);
    --fs-sm:clamp(.9375rem,calc(.9375rem + (100vw - 1280px) * .0023),1.125rem);
    --fs-xs:clamp(.8125rem,calc(.8125rem + (100vw - 1280px) * .0023),1rem);
    --fs-kicker:clamp(.75rem,calc(.75rem + (100vw - 1280px) * .0025),.95rem);
  }
}
@media (min-width:1440px){
  :root{
    --section-y:clamp(112px,calc(112px + (100vw - 1440px) * .08),168px);
    --section-y-lg:clamp(144px,calc(144px + (100vw - 1440px) * .1),208px);
  }
}
@media (min-width:1700px){
  :root{--header-h:96px}
  .brand img{height:72px}
  .nav-link{font-size:1rem;padding:12px 16px}
}
@media (min-width:1280px){
  .hero-lead{font-size:var(--fs-lead);max-width:58ch}
  .btn{font-size:var(--fs-sm)}
  .btn-lg{font-size:clamp(1rem,calc(1rem + (100vw - 1280px) * .0023),1.2rem)}
  .section-head{max-width:60ch}
  .measure{max-width:64ch}
  .ico{width:52px;height:52px}
  .ico svg{width:24px;height:24px}
}

/* --------------------------------------------------------------------------
   2. MOTION
   -------------------------------------------------------------------------- */
/* Header: tucks away while you read down, returns the moment you scroll up */
.site-header{
  transition:transform .4s var(--ease-out),box-shadow var(--t-base) var(--ease),border-color var(--t-base) var(--ease);
  /* a blurred see-through backdrop is re-drawn on every scroll frame; a near-solid white looks the same and is far cheaper */
  background:rgba(255,255,255,.97);-webkit-backdrop-filter:none;backdrop-filter:none;
}
.site-header.is-hidden{transform:translateY(-101%);box-shadow:none}

/* Reading progress */
.scroll-progress{
  position:fixed;inset:0 0 auto 0;height:3px;z-index:1000;pointer-events:none;
  background:var(--grad-rise);transform-origin:0 50%;transform:scaleX(0);
}

/* Hero entrance: starts from a gentle offset, never from invisible */
@keyframes heroIn{from{opacity:.55;translate:0 22px}}
@media (prefers-reduced-motion:no-preference){
  .hero .kicker,.hero h1,.hero-lead,.hero .btn-row,.hero-meta,.hero-figure,
  .page-hero .crumbs,.page-hero .kicker,.page-hero h1,.page-hero .lead,.page-hero-aside{
    animation:heroIn .9s var(--ease-out) both;
  }
  .hero h1,.page-hero h1{animation-delay:.07s}
  .hero-lead,.page-hero .lead{animation-delay:.15s}
  .hero .btn-row,.page-hero-aside{animation-delay:.23s}
  .hero-meta{animation-delay:.31s}
  .hero-figure{animation-delay:.12s}
}

/* Light that follows the pointer across heroes (mouse only; layouts.js sets --mx --my --glow) */
.hero::after,.page-hero::after{
  content:"";position:absolute;left:0;top:0;width:1040px;height:1040px;border-radius:50%;z-index:1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(143,190,242,.15),transparent 62%);
  opacity:var(--glow);transition:opacity .5s var(--ease);
  /* it moves by transform only, so following the pointer never repaints the hero */
  transform:translate3d(calc(var(--mx) - 520px),calc(var(--my) - 520px),0);will-change:transform,opacity;
}

/* Buttons: a sheen on hover, a ripple where you press, a small squeeze */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(100deg,transparent 32%,rgba(255,255,255,.3) 50%,transparent 68%);
  transform:translateX(-130%);
}
.btn:focus-visible::before{transform:translateX(130%);transition:transform .75s var(--ease-out)}
@media (hover:hover){
.btn:hover::before{transform:translateX(130%);transition:transform .75s var(--ease-out)}}
.btn:active{transform:scale(.975)}
.btn .ripple{
  position:absolute;border-radius:50%;pointer-events:none;background:currentColor;opacity:.22;
  transform:scale(0);animation:ripple .65s var(--ease-out) forwards;
}
@keyframes ripple{to{transform:scale(1);opacity:0}}

/* Spotlight that follows the pointer over tiles (layouts.js adds .fx-spot) */
.fx-spot{position:relative}
.fx-spot::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;
  transition:opacity .4s var(--ease);
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),rgba(21,110,206,.1),transparent 62%);
}
.fx-spot:focus-visible::after{opacity:1}
@media (hover:hover){
.fx-spot:hover::after{opacity:1}}
.bg-deep .fx-spot::after,.bento > :first-child.fx-spot::after{
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.12),transparent 62%);
}

/* Reveal: blocks rise and settle as they come into view. Uses `translate` and
   `scale`, not `transform`, so it never fights a hover lift. layouts.js removes
   the classes once a block has arrived. */
.js-reveal.reveal-ready{opacity:0;transform:none;translate:0 28px;scale:.985}
.js-reveal.reveal-ready.is-in{
  opacity:1;translate:none;scale:none;
  transition:opacity .7s var(--ease-out),translate .85s var(--ease-out),scale .85s var(--ease-out);
}

/* --------------------------------------------------------------------------
   3. BENTO TILES
   `.bento` is a grid of tiles in mixed sizes. Pages say how many tiles it has
   (`data-n`), which picks the arrangement from 960px up; below that it is
   one column, then two. `.bento-compact` is two equal columns, for tiles that
   sit in a half-width column. Works on points, cards, posts and service rows.
   -------------------------------------------------------------------------- */
.bento{display:grid;gap:clamp(14px,1.6vw,24px);grid-template-columns:minmax(0,1fr);margin:0;padding:0;list-style:none;border-top:0}
@media (min-width:640px){
  .bento{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bento:is([data-n="3"],[data-n="5"],[data-n="7"]) > :first-child{grid-column:span 2}
}
@media (min-width:960px){
  .bento:not(.bento-compact){grid-template-columns:repeat(6,minmax(0,1fr))}
  .bento:not(.bento-compact) > *{grid-column:span 2}
  .bento[data-n="2"]:not(.bento-compact) > *{grid-column:span 3}
  .bento[data-n="4"]:not(.bento-compact) > :is(:nth-child(1),:nth-child(4)){grid-column:span 4}
  .bento[data-n="5"]:not(.bento-compact) > :first-child{grid-column:span 4}
  .bento[data-n="6"]:not(.bento-compact) > :is(:nth-child(1),:nth-child(4)){grid-column:span 4}
  .bento[data-n="6"]:not(.bento-compact) > :is(:nth-child(5),:nth-child(6)){grid-column:span 3}
  .bento[data-n="7"]:not(.bento-compact) > :first-child{grid-column:span 4}
  .bento[data-n="7"]:not(.bento-compact) > :is(:nth-child(6),:nth-child(7)){grid-column:span 3}
  .bento[data-n="8"]:not(.bento-compact) > :is(:nth-child(4),:nth-child(5)){grid-column:span 3}
  .bento-compact > *{grid-column:auto!important}
}

.bento > *{
  position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-3);
  height:auto;margin:0;padding:clamp(22px,2.3vw,38px);
  border:1px solid var(--line);border-radius:var(--r-xl);background:var(--surface);box-shadow:var(--sh-xs);color:var(--body);
  transition:transform var(--t-base) var(--ease-out),box-shadow var(--t-base) var(--ease),border-color var(--t-base) var(--ease);
}
.bg-surface .bento > *{background:#fff}
.bento > * > *{position:relative;z-index:1}
.bento > :focus-visible{transform:translateY(-4px);box-shadow:var(--sh-md);border-color:var(--blue-300)}
@media (hover:hover){
.bento > :hover{transform:translateY(-4px);box-shadow:var(--sh-md);border-color:var(--blue-300)}}
.bento > :active{transform:scale(.985)}
.bento > a{color:inherit}

/* the first tile is the feature: deep navy, with a warm glow like the logo's arrow */
.bento:not(.bento-compact) > :first-child{
  background:linear-gradient(150deg,var(--navy-800) 0%,var(--navy-950) 100%);border-color:transparent;color:#BFD5F0;
}
.bento:not(.bento-compact) > :first-child::before{
  content:"";position:absolute;right:-70px;bottom:-70px;width:260px;height:260px;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(254,106,1,.34),transparent);z-index:0;
}
.bento:not(.bento-compact) > :first-child :is(h3,strong){color:#fff}
.bento:not(.bento-compact) > :first-child :is(p,li,.mono-index){color:#BFD5F0}
.bento:not(.bento-compact) > :first-child .num{background:rgba(255,255,255,.12);color:var(--amber-500)}
.bento:not(.bento-compact) > :first-child :is(.link-arrow,.post-tag){color:var(--blue-300)}
.bento:not(.bento-compact) > :first-child .post-foot{color:#9FBBDD;border-color:rgba(255,255,255,.16)}
.bento:not(.bento-compact) > :first-child:focus-visible{border-color:transparent}
@media (hover:hover){
.bento:not(.bento-compact) > :first-child:hover{border-color:transparent}}
.bento:not(.bento-compact) > :first-child h3{font-size:var(--fs-h3)}

/* tile content: one set of rules for numbered points, service rows, cards and posts */
.bento .num{
  display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:34px;margin:0 0 4px;padding:0 14px;
  border-radius:var(--r-pill);background:rgba(1,60,157,.08);color:var(--navy-600);
  font:600 var(--fs-xs)/1 var(--font-mono);letter-spacing:.08em;
}
.bento h3{margin:0;font-size:var(--fs-h4)}
.bento p{margin:0;font-size:var(--fs-sm);color:var(--body)}
.bento > .point{padding-top:clamp(22px,2.3vw,38px);border-top:1px solid var(--line)}
.bento > .card{height:auto;box-shadow:var(--sh-xs)}
.bento > .card:focus-visible{box-shadow:var(--sh-md);transform:translateY(-4px)}
@media (hover:hover){
.bento > .card:hover{box-shadow:var(--sh-md);transform:translateY(-4px)}}
.bento > .card .ico{margin-bottom:var(--s-3)}
.bento > .card .link-arrow{margin-top:auto;padding-top:var(--s-3)}
.bento > .post{box-shadow:var(--sh-xs)}
.bento > .post:focus-visible{box-shadow:var(--sh-md)}
@media (hover:hover){
.bento > .post:hover{box-shadow:var(--sh-md)}}
.bento > .post .post-foot{width:100%}

/* service rows become tiles */
.bento > .svc-row{
  display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-3);grid-template-columns:none;
  padding:clamp(22px,2.3vw,38px);border:1px solid var(--line);border-bottom:1px solid var(--line);
}
.bento > a.svc-row:focus-visible{padding-inline-start:clamp(22px,2.3vw,38px)}
@media (hover:hover){
.bento > a.svc-row:hover{padding-inline-start:clamp(22px,2.3vw,38px)}}
.bento > .svc-row h3{font-size:var(--fs-h4)}
.bento > .svc-row .num,.bento > a.svc-row:focus-visible .num{color:var(--navy-600)}
@media (hover:hover){
.bento > a.svc-row:hover .num{color:var(--navy-600)}}
.bento > .svc-row .arw{display:block;margin-top:auto;align-self:flex-end;opacity:1;transform:none;color:var(--orange-700)}
.bento > a.svc-row:focus-visible .arw{transform:translateX(4px)}
@media (hover:hover){
.bento > a.svc-row:hover .arw{transform:translateX(4px)}}
.bento > a.svc-row:focus-visible h3{color:var(--navy-600)}
@media (hover:hover){
.bento > a.svc-row:hover h3{color:var(--navy-600)}}
.bento:not(.bento-compact) > a.svc-row:first-child .num,
.bento:not(.bento-compact) > .svc-row:first-child .arw,
.bento:not(.bento-compact) > a.svc-row:first-child:focus-visible .num,
.bento:not(.bento-compact) > a.svc-row:first-child:focus-visible .arw{color:var(--amber-500)}
@media (hover:hover){
.bento:not(.bento-compact) > a.svc-row:first-child:hover .num,
.bento:not(.bento-compact) > a.svc-row:first-child:hover .arw{color:var(--amber-500)}}
.bento:not(.bento-compact) > a.svc-row:first-child:focus-visible h3{color:#fff}
@media (hover:hover){
.bento:not(.bento-compact) > a.svc-row:first-child:hover h3{color:#fff}}

/* on dark sections the tiles are glass */
.bg-deep .bento > *{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);box-shadow:none;color:#BFD5F0}
.bg-deep .bento:not(.bento-compact) > :first-child{background:linear-gradient(150deg,rgba(254,106,1,.26),rgba(255,255,255,.07))}
.bg-deep .bento:not(.bento-compact) > :first-child::before{display:none}
.bg-deep .bento :is(h3,strong){color:#fff}
.bg-deep .bento :is(p,li){color:#BFD5F0}
.bg-deep .bento .num{background:rgba(255,255,255,.12);color:var(--amber-500)}
.bg-deep .bento > .svc-row .num,.bg-deep .bento > a.svc-row:focus-visible .num{color:var(--amber-500)}
@media (hover:hover){
.bg-deep .bento > a.svc-row:hover .num{color:var(--amber-500)}}
.bg-deep .bento > .svc-row .arw{color:var(--amber-500)}
.bg-deep .bento > :focus-visible{border-color:rgba(255,255,255,.4);box-shadow:none}
@media (hover:hover){
.bg-deep .bento > :hover{border-color:rgba(255,255,255,.4);box-shadow:none}}
.bg-deep .bento .link-arrow{color:var(--blue-300)}
.bg-deep .bento > a.svc-row:focus-visible h3{color:#fff}
@media (hover:hover){
.bg-deep .bento > a.svc-row:hover h3{color:#fff}}
.bg-deep .bento > a.card:focus-visible{background:rgba(255,255,255,.1)}
@media (hover:hover){
.bg-deep .bento > a.card:hover{background:rgba(255,255,255,.1)}}

/* --------------------------------------------------------------------------
   4. TABS
   Built by layouts.js from a list of `.split` blocks (services, sectors,
   topics) or from an FAQ. On a desktop the tabs are a list down the left with
   a sliding highlight; on a phone they are a row of pills that sticks under
   the header. All panels stay in the page (hidden until chosen or found), and
   without JavaScript they simply stack.
   -------------------------------------------------------------------------- */
.tabs{display:grid;gap:clamp(20px,3vw,32px);scroll-margin-top:calc(var(--header-h) + 16px)}
.faq.tabs{border-top:0}
.wrap-narrow.is-wide{max-width:var(--wrap)}
@media (min-width:900px){
  .tabs{grid-template-columns:minmax(0,clamp(280px,26vw,420px)) minmax(0,1fr);gap:clamp(32px,4vw,72px);align-items:start}
}
.tabs-nav{
  position:sticky;top:var(--stick);z-index:20;display:flex;gap:10px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;
  scrollbar-width:none;margin-inline:calc(var(--gutter) * -1);padding:12px var(--gutter);
  background:rgba(255,255,255,.97);
  border-bottom:1px solid var(--line);transition:top .35s var(--ease);
}
.bg-surface .tabs-nav{background:rgba(246,249,252,.97)}
.tabs-nav::-webkit-scrollbar{display:none}
.tab{
  position:relative;z-index:1;flex:none;display:inline-flex;align-items:center;gap:10px;scroll-snap-align:center;
  padding:11px 20px;border:1.5px solid var(--line);border-radius:var(--r-pill);background:#fff;cursor:pointer;
  font:650 var(--fs-sm)/1.2 var(--font-display);letter-spacing:-.01em;color:var(--ink);white-space:nowrap;
  transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),transform var(--t-base) var(--ease-out),box-shadow var(--t-base) var(--ease);
}
.tab-n{font:600 var(--fs-xs)/1 var(--font-mono);letter-spacing:.06em;color:var(--orange-700);transition:color var(--t-fast) var(--ease)}
.tab:focus-visible{border-color:var(--navy-600);color:var(--navy-600)}
@media (hover:hover){
.tab:hover{border-color:var(--navy-600);color:var(--navy-600)}}
.tab:active{transform:scale(.97)}
.tab[aria-selected="true"]{background:var(--navy-600);border-color:var(--navy-600);color:#fff;box-shadow:0 10px 22px -12px rgba(1,60,157,.7)}
.tab[aria-selected="true"] .tab-n{color:var(--amber-500)}
.tabs-ink{display:none}
@media (min-width:900px){
  .tabs-nav{
    position:sticky;top:calc(var(--stick) + 24px);flex-direction:column;gap:2px;overflow:visible;margin:0;padding:0;
    background:none;-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom:0;
  }
  .bg-surface .tabs-nav{background:none}
  .tabs-ink{
    display:block;position:absolute;left:0;right:0;top:0;z-index:0;height:var(--ink-h,0);transform:translateY(var(--ink-y,0));
    border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;box-shadow:var(--sh-sm);pointer-events:none;
    transition:transform .5s var(--ease-out),height .35s var(--ease-out);
  }
  .tabs-ink::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:4px;border-radius:4px;background:var(--grad-rise)}
  .tab{
    width:100%;align-items:baseline;gap:14px;padding:15px 20px 15px 24px;border:0;border-radius:var(--r-lg);background:none;text-align:left;
    white-space:normal;font-size:var(--fs-body);line-height:1.3;
  }
  .tab:focus-visible{background:var(--surface-2);color:var(--navy-600)}
  @media (hover:hover){
  .tab:hover{background:var(--surface-2);color:var(--navy-600)}}
  .tab[aria-selected="true"]{background:none;color:var(--ink);box-shadow:none}
  .tab[aria-selected="true"]:focus-visible{background:none}
  @media (hover:hover){
  .tab[aria-selected="true"]:hover{background:none}}
  .tab[aria-selected="true"] .tab-n{color:var(--orange-700)}
  .tab-n{flex:none;min-width:1.7em}
}
.tabs-panels{min-width:0}
.tab-panel{
  container-type:inline-size;padding:clamp(24px,3.4vw,52px);border:1px solid var(--line);border-radius:var(--r-xl);
  background:#fff;box-shadow:var(--sh-sm);
}
.bg-surface .tab-panel{border-color:transparent}
/* a panel that is not showing keeps no box at all (it stays findable: hidden=until-found) */
.tab-panel[hidden]{height:0;min-height:0;margin:0;padding:0;border:0;box-shadow:none;overflow:hidden}
.tab-panel.is-entering{animation:tabIn .55s var(--ease-out)}
@keyframes tabIn{from{opacity:.01;translate:0 16px}}
.tab-panel:focus-visible{outline-offset:4px}
/* inside a panel the old two-column block becomes a heading over the text */
.tab-panel.split{grid-template-columns:minmax(0,1fr);gap:clamp(18px,2.2vw,28px)}
.tab-panel .mono-index{display:none}
.tab-panel.split > :first-child h3{margin-top:0;font-size:clamp(1.6rem,1.3rem + 1.2vw,2.4rem);line-height:1.12}
.tab-panel.split > :first-child > p{font-size:var(--fs-lead);line-height:1.5;color:var(--body)}
.tab-panel.split-sticky > :first-child{position:static}
@container (min-width:640px){
  .tab-panel .ticks{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:36px}
}
/* an FAQ answer panel */
.tab-panel.faq-panel{border-left:4px solid var(--orange-500)}
.tab-panel.faq-panel .faq-body{padding-bottom:0;max-width:none}
.tab-panel.faq-panel .faq-body p{font-size:var(--fs-body);line-height:1.65}

/* --------------------------------------------------------------------------
   5. STORY STEPS
   The stages of a method as large cards, with a step counter pinned beside
   them on a desktop. As each card reaches the middle of the screen it lights
   up and the counter follows. Without JavaScript the original row of steps
   shows instead.
   -------------------------------------------------------------------------- */
.steps.is-story{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(14px,2vw,24px);position:relative}
.steps.is-story > .step{
  position:relative;padding:clamp(22px,2.4vw,38px) clamp(22px,2.6vw,42px);
  border:1px solid var(--line);border-top:1px solid var(--line);border-radius:var(--r-xl);background:var(--surface);box-shadow:var(--sh-xs);
  scroll-margin-top:calc(var(--header-h) + 80px);
  transition:background var(--t-base) var(--ease),border-color var(--t-base) var(--ease),box-shadow var(--t-base) var(--ease);
}
.bg-surface .steps.is-story > .step{background:#fff}
.steps.is-story > .step::before{
  position:static;display:inline-flex;align-items:center;justify-content:center;min-width:46px;height:34px;margin:0 0 14px;padding:0 14px;
  border-radius:var(--r-pill);background:var(--surface-2);color:var(--navy-600);letter-spacing:.08em;
  transition:background var(--t-base) var(--ease),color var(--t-base) var(--ease);
}
.steps.is-story > .step h3{margin:0 0 var(--s-2);font-size:var(--fs-h3)}
.steps.is-story > .step p{font-size:var(--fs-body);line-height:1.65}
.steps.is-story > .step::after{
  content:"";position:absolute;left:0;top:26px;bottom:26px;width:4px;border-radius:4px;background:var(--grad-rise);
  transform:scaleY(0);transform-origin:50% 0;transition:transform .6s var(--ease-out);
}
.steps.is-story > .step.is-active{border-color:var(--blue-300);box-shadow:var(--sh-md)}
.steps.is-story > .step.is-active::before{background:var(--navy-600);color:#fff}
.steps.is-story > .step.is-active::after{transform:scaleY(1)}
.bg-deep .steps.is-story > .step{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14);box-shadow:none}
.bg-deep .steps.is-story > .step::before{background:rgba(255,255,255,.12);color:var(--amber-500)}
.bg-deep .steps.is-story > .step.is-active{border-color:rgba(143,190,242,.5)}
.bg-deep .steps.is-story > .step.is-active::before{background:var(--amber-500);color:var(--navy-950)}
.story-rail{display:none}
@media (min-width:1000px){
  .steps.is-story{grid-template-columns:minmax(0,.46fr) minmax(0,1.54fr);column-gap:clamp(32px,5vw,96px);align-items:start}
  .steps.is-story > .step{grid-column:2;min-height:min(36vh,300px);display:flex;flex-direction:column;align-items:flex-start;justify-content:center}
  .story-rail{
    display:flex;flex-direction:column;gap:20px;grid-column:1;grid-row:1 / span var(--n,4);
    position:sticky;top:calc(var(--stick) + 56px);align-self:start;transition:top .35s var(--ease);
  }
  .story-num{
    font:800 clamp(5rem,9vw,10rem)/.9 var(--font-display);letter-spacing:-.05em;color:var(--navy-600);font-variant-numeric:tabular-nums;
  }
  .bg-deep .story-num{color:#fff}
  .story-dots{display:flex;gap:8px}
  .story-dots span{display:block;width:38px;height:4px;border-radius:2px;background:var(--line);transition:width .5s var(--ease-out),background .4s var(--ease)}
  .bg-deep .story-dots span{background:rgba(255,255,255,.2)}
  .story-dots span.is-on{width:64px;background:var(--grad-rise)}
}

/* --------------------------------------------------------------------------
   6. SWIPE SLIDER (phones)
   Rows of tiles become a swipeable strip that snaps. layouts.js adds the dots
   and arrows, and only when there is more than fits.
   -------------------------------------------------------------------------- */
@media (max-width:639px){
  .slider-sm{
    display:flex;gap:16px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);
    scrollbar-width:none;margin-inline:calc(var(--gutter) * -1);padding:8px var(--gutter) 22px;-webkit-overflow-scrolling:touch;align-items:stretch;
  }
  .slider-sm::-webkit-scrollbar{display:none}
  .slider-sm > *{flex:0 0 min(84%,340px);scroll-snap-align:start;min-width:0}
  .slider-sm > .card,.slider-sm > .post{height:auto}
  .slider-sm > .js-reveal.reveal-ready{scale:none}
  .slider-sm:focus-visible{outline-offset:-4px;border-radius:var(--r-lg)}
  .slider-sm.is-dragging{scroll-snap-type:none;cursor:grabbing;user-select:none}
  .slider-sm.is-dragging a{pointer-events:none}
}
.slider-ctl{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;margin-top:4px}
.slider-ctl[hidden]{display:none}
/* each dot is a 24px target (the visible dot is drawn inside it); a long row of
   dots wraps rather than push the page sideways on the narrowest phones */
.slider-dots{display:flex;flex-wrap:wrap;gap:0;max-width:100%;margin:0;padding:0;list-style:none}
.slider-dots li{margin:0}
.slider-dots button{position:relative;width:24px;height:24px;padding:0;border:0;background:none;cursor:pointer;transition:width .35s var(--ease-out)}
.slider-dots button::before{
  content:"";position:absolute;left:50%;top:50%;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:var(--r-pill);background:#B7C5DB;
  transition:width .35s var(--ease-out),margin .35s var(--ease-out),background var(--t-fast) var(--ease);
}
.slider-dots button:focus-visible::before{background:var(--navy-600)}
@media (hover:hover){
.slider-dots button:hover::before{background:var(--navy-600)}}
.slider-dots button[aria-current="true"]{width:44px}
.slider-dots button[aria-current="true"]::before{width:30px;margin-left:-15px;background:var(--orange-600)}
.slider-btns{display:flex;gap:10px}
.slider-btn{
  display:grid;place-items:center;width:48px;height:48px;padding:0;border:1.5px solid #C7D2E1;border-radius:50%;background:#fff;color:var(--navy-600);cursor:pointer;
  transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),transform var(--t-base) var(--ease-out);
}
.slider-btn:focus-visible:not(:disabled){background:var(--navy-600);border-color:var(--navy-600);color:#fff;transform:translateY(-2px)}
@media (hover:hover){
.slider-btn:hover:not(:disabled){background:var(--navy-600);border-color:var(--navy-600);color:#fff;transform:translateY(-2px)}}
.slider-btn:active:not(:disabled){transform:scale(.94)}
.slider-btn:disabled{opacity:.4;cursor:default}
.bg-deep .slider-dots button::before{background:rgba(255,255,255,.3)}
.bg-deep .slider-dots button[aria-current="true"]::before{background:var(--amber-500)}
.bg-deep .slider-btn{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.3);color:#fff}

/* --------------------------------------------------------------------------
   7. REDUCED MOTION AND PRINT
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .site-header{transition:none}
  .scroll-progress{display:none}
  .btn::before{display:none}
  .js-reveal.reveal-ready{opacity:1!important;translate:none!important;scale:none!important}
  .tab-panel.is-entering{animation:none}
}
@media print{
  .scroll-progress,.slider-ctl,.story-rail{display:none!important}
  .js-reveal.reveal-ready{opacity:1!important;translate:none!important;scale:none!important}
  .tab-panel[hidden]{display:block!important;height:auto!important;overflow:visible!important;padding:var(--s-5)!important;border:0!important}
  .tabs{display:block}
  .tabs-nav{display:none}
}