/* Shared layout and type tokens for every section below the hero. Spacing sits on a 4/8px grid; fluid values end on it at desktop. */
:root{
  /* spacing */
  --gutter:clamp(16px,4.4vw,64px);
  --section-y:clamp(80px,9.4vw,144px);
  --same-gap:clamp(24px,2.6vw,48px);  /* extra space where two neighbouring sections share a background */
  --head-gap:clamp(32px,3.4vw,48px);   /* section heading block to its content */
  --block-gap:16px;                    /* tabs to card, card to card */
  --card-pad:clamp(24px,2.4vw,40px);
  --container:1360px;
  --container-narrow:1232px;
  /* left and right edge that follows the gutter, then the centred container on wide screens (percent of the element's containing block) */
  --edge:max(var(--gutter),calc((100% - var(--container)) / 2));
  /* radius */
  --r-sm:8px;--r-md:12px;--r-lg:16px;--r-xl:24px;
  /* type */
  --h2:clamp(32px,3.6vw,56px);
  --h3-lg:clamp(28px,2.4vw,36px);
  --h3:clamp(20px,1.7vw,24px);
  --lead:clamp(16px,1.25vw,18px);
  --body:16px;
  --small:14px;
  --label:12px;
  --label-track:.12em;
  --stat:clamp(48px,4.6vw,72px);
}

/* scroll-blended background (assets/bgfade.js): sections go transparent and sit on one shared page colour */
body.fadebg .ins,body.fadebg .why,body.fadebg .story,body.fadebg .uc{background:transparent}
body.fadebg .close{background:linear-gradient(180deg,transparent 0,transparent calc(100% - clamp(48px,5vw,64px)),#121614 calc(100% - clamp(48px,5vw,64px)))}
body.fadebg .ins-head h2,body.fadebg .why-head h2,body.fadebg .story-head h2,body.fadebg .uc-head h2,body.fadebg .close-copy h2,body.fadebg .story-stat span,body.fadebg .story-row p,body.fadebg .story-photo blockquote{color:var(--fx-ink)}
body.fadebg .story-photo blockquote{color:#F7F7F5}
body.fadebg .close-copy h2,body.fadebg .close-copy p,body.fadebg .ins-head h2,body.fadebg .why-head h2,body.fadebg .story-head h2,body.fadebg .uc-head h2,body.fadebg .story-stat span,body.fadebg .story-row p,body.fadebg .ins-head p,body.fadebg .why-head p,body.fadebg .why-foot,body.fadebg .story-head p,body.fadebg .uc-head>p,body.fadebg .uc-head .uc-eyebrow,body.fadebg .story-row small{transition:color .4s ease}
body.fadebg .ins-head p,body.fadebg .why-head p,body.fadebg .why-foot,body.fadebg .story-head p,body.fadebg .uc-head>p,body.fadebg .uc-head .uc-eyebrow,body.fadebg .story-row small,body.fadebg .close-copy p{color:var(--fx-mute)}