/* ==========================================================================
   IEI AGENCY, v2. Editorial.
   Reference points, in Tab's words: SWIPE (stretched display type, tiny corner
   annotations), the ransom-note collage (cut paper, organised chaos), and the
   black editorial card deck.
   Rule from the brief: the design can be experimental, the buying journey
   cannot be.
   ========================================================================== */

:root{
  --ink:#0D0B07;
  --ink-2:#111;
  --black:#0A0A0A;
  --paper:#FAF5EA;
  --white:#fff;
  --yellow:#FFD21A;
  --yellow-deep:#E6B800;
  --purple:#7B22FD;        /* electric purple, sampled off Tab's collage art */
  --stone:#8E887C;
  --stone-deep:#5D584E;
  --line-w:rgba(250,245,234,.14);
  --line-i:rgba(13,11,7,.14);

  --display:'Anton',Impact,'Haettenschweiler',sans-serif;
  --sans:'Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif;
  --hand:'Caveat','Segoe Script',cursive;

  --wrap:1280px;
  --pad:clamp(20px,4vw,64px);
  --nav-h:72px;
  --ease:cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--nav-h) + 28px)}
html.js{scroll-behavior:auto}
body{
  font-family:var(--sans);background:var(--ink);color:var(--paper);
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
/* max-width without height:auto is the classic squash: the width shrinks to fit
   the column, the height attribute does not, and the picture stretches. It was
   doing that to the three team photos on the About page, which are square files
   rendering 443x600 and 308x600. Anything that genuinely wants a fixed height
   sets one on its own, more specific rule. */
img,svg,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
::selection{background:var(--yellow);color:var(--ink)}

/* --- grain. One fixed overlay, cheap, never animated. --------------------- */
body::after{
  content:"";position:fixed;inset:0;z-index:300;pointer-events:none;opacity:.28;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}

/* --- layout -------------------------------------------------------------- */
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}
.bleed{width:100%;padding:0 var(--pad)}
section{position:relative}
.band{padding:clamp(72px,10vw,140px) 0}
.band.tight{padding:clamp(48px,6vw,80px) 0}
.paper{background:var(--paper);color:var(--ink)}
.black{background:var(--black);color:var(--paper)}
.yellowband{background:var(--yellow);color:var(--ink)}

/* --- type ----------------------------------------------------------------
   The SWIPE move: a condensed face scaled on one axis only, so it gets taller
   without getting heavier. --sy is the stretch, set per instance. */
.mega,.h1,.h2,.h3{
  font-family:var(--display);text-transform:uppercase;font-weight:400;
  line-height:.86;letter-spacing:-.005em;
}
.mega{
  font-size:clamp(62px,13.5vw,190px);
  transform:scaleY(var(--sy,1.28));transform-origin:center bottom;
  display:block;
}
.mega.tall{--sy:1.55}
.mega.wide{--sy:1}
.h1{font-size:clamp(42px,7.6vw,104px);line-height:.9}
.h2{font-size:clamp(30px,4.6vw,62px);line-height:.92}
.h3{font-size:clamp(20px,2.2vw,30px);line-height:1}

.lede{font-size:clamp(1.05rem,1.7vw,1.3rem);line-height:1.55;max-width:56ch;color:#e3ddcf}
.paper .lede,.yellowband .lede{color:#39342c}
.body{font-size:1rem;line-height:1.68;color:#cfc9bb;max-width:62ch}
.paper .body,.yellowband .body{color:#45403a}

/* the tiny editorial annotation, straight off the SWIPE poster */
.annot{
  font-weight:700;font-size:11px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--stone);
}
.paper .annot,.yellowband .annot{color:var(--stone-deep)}
.annot.yel{color:var(--yellow)}
.yellowband .annot.yel{color:var(--ink)}
.annot-row{display:flex;justify-content:space-between;align-items:baseline;gap:20px;flex-wrap:wrap}
.annot-corner{position:absolute;z-index:4}

.hl{background:var(--yellow);color:var(--ink);padding:0 .1em;display:inline-block;line-height:.92}
.purple{color:var(--purple)}
.hand{font-family:var(--hand);font-weight:600;text-transform:none;letter-spacing:0;font-size:1.45em;line-height:1.05}

/* --- rule lines, used as editorial furniture ------------------------------ */
.rule{height:1px;background:var(--line-w);width:100%}
.paper .rule{background:var(--line-i)}
.rule-y{height:3px;background:var(--yellow);width:100%}

/* --- buttons -------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;text-decoration:none;
  font-weight:800;font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  padding:17px 26px;background:var(--yellow);color:var(--ink);
  border:2px solid var(--yellow);border-radius:0;
  transition:background .18s,border-color .18s,transform .18s var(--ease);
}
.btn:hover{background:var(--ink);color:var(--yellow);transform:translate(-2px,-2px)}
.paper .btn:hover,.yellowband .btn:hover{background:var(--ink);color:var(--yellow);border-color:var(--ink)}
.btn-ghost{background:transparent;color:var(--paper);border-color:rgba(250,245,234,.34)}
.btn-ghost:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.paper .btn-ghost{color:var(--ink);border-color:rgba(13,11,7,.26)}
.paper .btn-ghost:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn-lg{padding:22px 34px;font-size:13px}
.arrow{font-family:var(--sans);font-weight:700}
a:focus-visible,button:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}

/* --- header --------------------------------------------------------------- */
.topbar{height:4px;background:var(--yellow)}
header.site{position:sticky;top:0;z-index:90;background:rgba(10,10,10,.93);backdrop-filter:blur(10px) saturate(140%);border-bottom:1px solid var(--line-w)}
.nav{display:flex;align-items:center;gap:30px;height:var(--nav-h)}
.wm{height:24px;width:auto}
.nav-links{display:flex;align-items:center;gap:30px;list-style:none;margin-left:auto}
.nav-links a{
  text-decoration:none;font-weight:700;font-size:11.5px;letter-spacing:.2em;
  text-transform:uppercase;color:#d6d0c2;white-space:nowrap;padding:6px 0;
  border-bottom:2px solid transparent;
}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--paper);border-bottom-color:var(--yellow)}
.nav-cta{margin-left:0}
.nav-toggle{display:none;margin-left:auto;width:44px;height:44px;background:transparent;border:1px solid rgba(250,245,234,.3);cursor:pointer;align-items:center;justify-content:center}
.nav-bars,.nav-bars::before,.nav-bars::after{display:block;width:20px;height:2px;background:var(--paper);transition:transform .22s var(--ease),opacity .14s}
.nav-bars{position:relative}
.nav-bars::before,.nav-bars::after{content:"";position:absolute;left:0}
.nav-bars::before{top:-6px}.nav-bars::after{top:6px}
.is-open .nav-bars{background:transparent}
.is-open .nav-bars::before{transform:translateY(6px) rotate(45deg)}
.is-open .nav-bars::after{transform:translateY(-6px) rotate(-45deg)}
@media (max-width:1080px){
  .nav-toggle{display:inline-flex}
  .nav-links{
    display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;
    align-items:stretch;gap:0;background:var(--black);border-bottom:1px solid var(--line-w);
    padding:4px var(--pad) 22px;box-shadow:0 20px 44px rgba(0,0,0,.5);margin-left:0;
  }
  .is-open .nav-links{display:flex}
  .nav-links li{border-bottom:1px solid var(--line-w)}
  .nav-links a{display:block;padding:17px 0;font-size:13px;border-bottom:0}
  .nav-cta{padding-top:20px;border-bottom:0!important}
  .nav-cta .btn{width:100%;justify-content:center}
}

/* --- hero ----------------------------------------------------------------- */
.hero{
  min-height:calc(100svh - var(--nav-h));display:flex;flex-direction:column;justify-content:center;
  padding:clamp(40px,7vw,90px) 0 0;position:relative;overflow:hidden;background:var(--black);
}
.hero-inner{position:relative;z-index:2}
.hero .mega{margin:0}
.hero-sub{margin-top:clamp(24px,3vw,40px);max-width:50ch}
.hero .annot-row{margin-bottom:clamp(20px,3vw,36px)}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(28px,3.5vw,44px)}
/* a halftone wash behind the headline, not an image */
.hero::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.5;
  background:
    radial-gradient(ellipse 50% 42% at 76% 34%,rgba(255,210,26,.20),transparent 62%),
    radial-gradient(circle at 76% 34%,rgba(255,210,26,.1) 1px,transparent 1.6px) 0 0/7px 7px;
  mask-image:radial-gradient(ellipse 58% 52% at 76% 34%,#000,transparent 72%);
}
.hero-foot{margin-top:auto;padding:clamp(22px,3vw,40px) 0 clamp(18px,2vw,26px);position:relative;z-index:2}

/* --- marquee. One, on the homepage, as a divider. ------------------------- */
.marquee{overflow:hidden;background:var(--yellow);color:var(--ink);padding:14px 0;border-top:3px solid var(--ink);border-bottom:3px solid var(--ink)}
.marquee-run{display:flex;width:max-content;animation:mq 38s linear infinite}
.marquee:hover .marquee-run{animation-play-state:paused}
.marquee span{
  font-family:var(--display);text-transform:uppercase;font-size:clamp(17px,2.1vw,26px);
  letter-spacing:.02em;white-space:nowrap;padding:0 clamp(18px,2.4vw,34px);
}
.marquee i{display:block;width:9px;height:9px;background:var(--ink);align-self:center;flex:none;transform:rotate(45deg)}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marquee-run{animation:none}}

/* --- THE JOURNEY. Horizontal on desktop, swipeable on phone. --------------
   Native scroll with snap. No scroll-jacking, no pinning: the brief says the
   journey must stay obvious, and a hijacked scroll is the first thing to break
   on a phone or with a keyboard. */
.journey{background:var(--black);padding:clamp(56px,7vw,96px) 0 clamp(40px,5vw,72px);overflow:hidden}
.journey-head{display:flex;justify-content:space-between;align-items:flex-end;gap:28px;flex-wrap:wrap;margin-bottom:clamp(26px,3vw,44px)}
.journey-track{
  display:flex;gap:clamp(16px,2vw,26px);overflow-x:auto;scroll-snap-type:x mandatory;
  padding:4px var(--pad) 30px;margin:0 calc(-1 * var(--pad));
  scroll-padding-left:var(--pad);scrollbar-width:none;cursor:grab;
  overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;
}
.journey-track::-webkit-scrollbar{display:none}
.journey-track.is-dragging{cursor:grabbing;scroll-snap-type:none}
.step{
  flex:0 0 auto;width:min(84vw,460px);scroll-snap-align:start;
  background:var(--ink-2);border:1px solid var(--line-w);
  padding:clamp(26px,3vw,38px);display:flex;flex-direction:column;gap:14px;
  position:relative;transition:border-color .3s,transform .3s var(--ease);
  text-decoration:none;color:inherit;
}
.step:hover{border-color:var(--yellow);transform:translateY(-4px)}
.step-n{position:absolute;top:18px;right:20px;font-family:var(--display);font-size:13px;letter-spacing:.14em;color:var(--stone)}
.step-word{
  font-family:var(--display);text-transform:uppercase;line-height:.84;
  font-size:clamp(46px,6.4vw,88px);transform:scaleY(1.34);transform-origin:left bottom;
  color:var(--yellow);margin:6px 0 20px;display:block;
}
.step-need{font-weight:800;font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--paper)}
.step-offer{font-family:var(--display);text-transform:uppercase;font-size:clamp(21px,2.4vw,30px);line-height:1;color:var(--paper)}
.step-price{font-weight:800;font-size:12px;letter-spacing:.14em;color:var(--yellow)}
.step p{font-size:.95rem;line-height:1.58;color:#b9b3a5;margin:0}
.step-go{margin-top:auto;padding-top:14px;display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--yellow);border-top:1px solid var(--line-w)}
.step:nth-child(2) .step-word,.step:nth-child(4) .step-word{color:var(--paper)}
.step.is-purple .step-word{color:var(--purple)}
.journey-foot{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:6px}
.jbtn{
  width:46px;height:46px;border:1px solid rgba(250,245,234,.3);background:transparent;color:var(--paper);
  cursor:pointer;font-size:17px;display:inline-flex;align-items:center;justify-content:center;flex:none;
}
.jbtn:hover{background:var(--yellow);color:var(--ink);border-color:var(--yellow)}
.jbtn[disabled]{opacity:.3;cursor:default}
.jbtn[disabled]:hover{background:transparent;color:var(--paper);border-color:rgba(250,245,234,.3)}
.jprog{flex:1;min-width:120px;height:2px;background:var(--line-w);position:relative}
.jprog i{position:absolute;left:0;top:0;bottom:0;background:var(--yellow);width:20%;transition:width .2s,transform .2s}

/* --- the four-I line ------------------------------------------------------- */
.four-i{display:flex;flex-wrap:wrap;align-items:baseline;gap:clamp(10px,1.6vw,26px)}
.four-i b{font-family:var(--display);text-transform:uppercase;font-weight:400;font-size:clamp(28px,5.4vw,76px);line-height:.9;transform:scaleY(1.2);transform-origin:bottom}
.four-i s{text-decoration:none;color:var(--yellow);font-family:var(--display);font-size:clamp(20px,3vw,44px)}

/* --- editorial panels (the card-deck reference) ---------------------------- */
.deck{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:clamp(14px,1.6vw,22px)}
.panel{
  background:var(--ink-2);border:1px solid var(--line-w);padding:clamp(24px,2.6vw,32px);
  display:flex;flex-direction:column;gap:12px;min-height:240px;
  text-decoration:none;color:inherit;transition:border-color .3s,transform .3s var(--ease);
}
.panel:hover{border-color:var(--yellow);transform:translateY(-3px)}
.paper .panel{background:var(--white);border-color:var(--line-i)}
.panel .h3{color:inherit}
.panel p{font-size:.93rem;line-height:1.58;color:#b9b3a5;margin:0}
.paper .panel p{color:#45403a}
.panel-go{margin-top:auto;font-weight:800;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--yellow)}
.paper .panel-go{color:var(--ink)}

/* --- case studies: full-bleed editorial ------------------------------------ */
.case{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,3.4vw,56px);align-items:center;padding:clamp(40px,5vw,72px) 0;border-top:1px solid var(--line-w)}
.paper .case{border-top-color:var(--line-i)}
.case:first-of-type{border-top:0}
.case-media{position:relative}
.case-media img,.case-media video{width:100%;height:auto;border:1px solid var(--line-w)}
.case-name{font-family:var(--display);text-transform:uppercase;font-size:clamp(34px,5.2vw,74px);line-height:.88;transform:scaleY(1.22);transform-origin:left bottom;margin-bottom:22px;display:block}
.case dl{display:flex;flex-direction:column;gap:16px;margin-top:20px}
.case dt{font-weight:800;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--yellow);margin-bottom:4px}
.paper .case dt{color:var(--yellow-deep)}
.case dd{margin:0;font-size:.97rem;line-height:1.6;color:#cfc9bb}
.paper .case dd{color:#45403a}
@media (max-width:860px){.case{grid-template-columns:minmax(0,1fr)}}

/* --- the ransom moment. One word, cut from different papers. --------------
   A nod to the collage reference. Used once per page at most. */
/* rotated boxes reach past their own edges at the corners, so the gap has to
   be wider than it looks like it needs to be */
.ransom{display:inline-flex;flex-wrap:wrap;gap:6px;vertical-align:baseline}
.ransom span{
  font-family:var(--display);text-transform:uppercase;line-height:1;
  padding:.04em .12em;display:inline-block;transform-origin:center;
}
.ransom span:nth-child(5n+1){background:var(--paper);color:var(--ink);transform:rotate(-3deg) scaleY(1.08)}
.ransom span:nth-child(5n+2){background:var(--yellow);color:var(--ink);transform:rotate(2deg) scaleY(1.14);font-size:1.12em}
.ransom span:nth-child(5n+3){background:var(--ink);color:var(--paper);transform:rotate(-1.5deg) scaleY(1.04);border:2px solid var(--paper)}
.ransom span:nth-child(5n+4){background:var(--purple);color:var(--paper);transform:rotate(3deg) scaleY(1.1);font-size:.94em}
.ransom span:nth-child(5n+5){background:var(--paper);color:var(--ink);transform:rotate(-2deg) scaleY(1.12);font-family:var(--sans);font-weight:800;font-size:.8em}

/* --- pricing rows on Ways to Work ------------------------------------------ */
.offer{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.5fr) auto;gap:clamp(20px,3vw,48px);align-items:start;padding:clamp(32px,4vw,52px) 0;border-top:1px solid var(--line-i)}
.offer:first-of-type{border-top:0}
.offer-name{font-family:var(--display);text-transform:uppercase;font-size:clamp(26px,3.4vw,46px);line-height:.92;transform:scaleY(1.18);transform-origin:left bottom}
.offer-price{margin-top:14px;font-weight:800;font-size:13px;letter-spacing:.12em;color:var(--ink);background:var(--yellow);display:inline-block;padding:7px 12px}
.offer-for{margin-top:12px;font-size:.84rem;color:var(--stone-deep);line-height:1.5}
.offer ul{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:7px 24px;margin-top:16px}
.offer li{position:relative;padding-left:17px;font-size:.92rem;line-height:1.5;color:#45403a}
.offer li::before{content:"";position:absolute;left:0;top:.52em;width:7px;height:7px;background:var(--yellow)}
.offer-cta{align-self:center}
@media (max-width:900px){.offer{grid-template-columns:minmax(0,1fr);gap:18px}.offer-cta{justify-self:start}}

/* --- quotes ----------------------------------------------------------------- */
.quote{border-left:4px solid var(--yellow);padding:4px 0 4px 24px;max-width:62ch}
.quote blockquote{font-family:var(--display);text-transform:uppercase;line-height:.98;font-size:clamp(22px,3vw,40px);margin:0}
.quote cite{display:block;margin-top:14px;font-style:normal;font-weight:700;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--stone)}
.paper .quote cite{color:var(--stone-deep)}
.quote-sm blockquote{font-family:var(--sans);text-transform:none;font-size:1.02rem;line-height:1.55;font-weight:500}

/* --- footer ------------------------------------------------------------------ */
footer.site{background:var(--black);border-top:1px solid var(--line-w);padding:clamp(56px,7vw,90px) 0 36px}
.foot-mega{font-family:var(--display);text-transform:uppercase;font-size:clamp(44px,11vw,150px);line-height:.84;transform:scaleY(1.3);transform-origin:left bottom;display:block;margin-bottom:clamp(30px,4vw,56px)}
.foot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:30px 24px;padding-top:34px;border-top:1px solid var(--line-w)}
.foot-col h4{font-weight:800;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--yellow);margin-bottom:14px}
.foot-col ul{list-style:none;display:flex;flex-direction:column;gap:9px}
.foot-col a{text-decoration:none;font-size:.88rem;color:#b9b3a5}
.foot-col a:hover{color:var(--paper)}
.foot-base{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-top:44px;padding-top:22px;border-top:1px solid var(--line-w)}

/* --- reveal. Opacity and a short rise. Nothing that blocks reading. -------- */
.js [data-r]{opacity:0;transform:translateY(22px);transition:opacity .66s var(--ease),transform .76s var(--ease)}
.js [data-r].in{opacity:1;transform:none}
.js [data-rg]>*{opacity:0;transform:translateY(22px);transition:opacity .62s var(--ease),transform .72s var(--ease)}
.js [data-rg].in>*{opacity:1;transform:none}
.js [data-rg].in>*:nth-child(2){transition-delay:70ms}
.js [data-rg].in>*:nth-child(3){transition-delay:140ms}
.js [data-rg].in>*:nth-child(4){transition-delay:210ms}
.js [data-rg].in>*:nth-child(5){transition-delay:280ms}
@media (prefers-reduced-motion:reduce){
  .js [data-r],.js [data-rg]>*{opacity:1;transform:none;transition:none}
  .mega,.step-word,.case-name,.foot-mega,.four-i b,.offer-name{transform:none!important}
}

/* --- mobile -------------------------------------------------------------- */
@media (max-width:620px){
  .mega{--sy:1.2}
  .hero-cta .btn{width:100%;justify-content:center}
  .step{width:84vw}
}

/* --- stretched type needs a line box that knows it ------------------------
   transform:scaleY stretches the glyph but leaves the line box at its
   unscaled height, so stacked lines collide. Every stretched element grows
   its own line-height from the same --sy, and scales about its centre so it
   stays inside that box. */
.mega{line-height:calc(.82 * var(--sy,1.28) + .07);transform-origin:center center}
.step-word{line-height:calc(.82 * 1.34 + .07);transform-origin:left center}
.case-name{line-height:calc(.82 * 1.22 + .07);transform-origin:left center}
.foot-mega{line-height:calc(.82 * 1.3 + .07);transform-origin:left center}
.offer-name{line-height:calc(.82 * 1.18 + .07);transform-origin:left center}
.four-i b{line-height:calc(.82 * 1.2 + .1);transform-origin:center center}
.hero .h1{line-height:1}

/* Each .mega is one deliberate line. Letting it wrap stacks two stretched
   lines inside one box and they collide, so the size is tuned to the longest
   line and wrapping is off. If a line ever overflows, that is a copy problem
   to fix in the copy, not something to hide. */
.mega{
  font-size:clamp(34px,8.2vw,112px);
  white-space:nowrap;
  --sy:1.45;
}
.mega.tall{--sy:1.5}
.hero .h1{display:flex;flex-direction:column;gap:calc(.06 * 1em)}
@media (max-width:820px){.mega{font-size:clamp(28px,8.6vw,64px);--sy:1.32}.mega.tall{--sy:1.35}}
@media (max-width:480px){.mega{font-size:clamp(25px,8.4vw,40px)}}

/* Mandatory snap wins against a programmatic smooth scroll and yanks it back,
   so proximity for the human, and snap off entirely while a button drives. */
.journey-track{scroll-snap-type:x proximity}
.journey-track.is-snapoff{scroll-snap-type:none}

/* ==========================================================================
   SOFTENING PASS + SCROLL BEHAVIOUR
   Cream becomes the ground again; black is a punch, not the floor. Sections
   pop as they arrive and ease back as they leave. Scroll-driven where the
   browser supports it, a plain fade everywhere else. Nothing is pinned and
   nothing hijacks the scroll.
   ========================================================================== */

body{background:var(--paper);color:var(--ink)}
.band.warm{background:#FFFCF4;color:var(--ink)}
.band.cream{background:var(--paper);color:var(--ink)}

/* soft edges: the editorial grid stays sharp, the human bits round off */
.panel,.step,.quote-card,.cf-field input,.cf-field select,.cf-field textarea{border-radius:14px}
.btn{border-radius:999px}
.jbtn{border-radius:50%}

/* warm hero: cream, with the light coming from behind the type */
.hero{background:var(--paper);color:var(--ink)}
.hero::before{
  opacity:.9;
  background:
    radial-gradient(ellipse 54% 46% at 78% 36%,rgba(255,210,26,.42),transparent 64%),
    radial-gradient(ellipse 80% 60% at 10% 90%,rgba(123,34,253,.10),transparent 62%);
  mask-image:none;
}
.hero .annot{color:var(--stone-deep)}
.hero .annot.yel{color:var(--yellow-deep)}
.hero .lede{color:#423c33}
.hero .btn-ghost{color:var(--ink);border-color:rgba(13,11,7,.26)}
.hero .btn-ghost:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.hero .rule{background:var(--line-i)}

/* light bands inherit the ink-band components */
.paper .panel,.warm .panel,.cream .panel{background:#fff;border-color:var(--line-i)}
.paper .panel p,.warm .panel p,.cream .panel p{color:#45403a}
.paper .panel-go,.warm .panel-go,.cream .panel-go{color:var(--ink)}
.warm .annot,.cream .annot{color:var(--stone-deep)}
.warm .annot.yel,.cream .annot.yel{color:var(--yellow-deep)}
.warm .lede,.cream .lede{color:#423c33}
.warm .body,.cream .body{color:#45403a}
.warm .case,.cream .case{border-top-color:var(--line-i)}
.warm .case dt,.cream .case dt{color:var(--yellow-deep)}
.warm .case dd,.cream .case dd{color:#45403a}
.warm .case-media img,.warm .case-media video,
.cream .case-media img,.cream .case-media video{border-color:var(--line-i)}
.warm .quote cite,.cream .quote cite{color:var(--stone-deep)}
.warm .rule,.cream .rule{background:var(--line-i)}
.warm .btn-ghost,.cream .btn-ghost{color:var(--ink);border-color:rgba(13,11,7,.26)}
.warm .btn-ghost:hover,.cream .btn-ghost:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}

/* --- pinned art, carried over from the light build ------------------------ */
.pin{--tilt:-2deg;position:relative;margin:0;transform:rotate(var(--tilt));transition:transform .5s var(--ease)}
.pin img{width:100%;height:auto;border:7px solid #fff;border-radius:3px;box-shadow:0 20px 50px rgba(13,11,7,.2)}
.pin::before{
  content:"";position:absolute;z-index:2;top:-13px;left:50%;width:110px;height:27px;
  transform:translateX(-50%) rotate(calc(var(--tilt) * -1.5));
  background:rgba(255,235,160,.78);box-shadow:0 1px 2px rgba(0,0,0,.14);
}
@media (hover:hover) and (pointer:fine){.pin:hover{transform:rotate(0) translateY(-6px)}}
[data-zoom]{cursor:zoom-in}

/* --- testimonial film + quotes --------------------------------------------- */
.voice-film{--tilt:-1.6deg;margin:0;transform:rotate(var(--tilt));transition:transform .5s var(--ease)}
.voice-film video{width:100%;height:auto;border:7px solid #fff;border-radius:3px;box-shadow:0 20px 50px rgba(13,11,7,.2);background:var(--ink)}
.voice-film figcaption{margin-top:16px;font-size:.88rem;line-height:1.5;color:#45403a}
.voice-film figcaption b{display:block;color:var(--ink)}
@media (hover:hover) and (pointer:fine){.voice-film:hover{transform:rotate(0)}}
.voices-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(26px,3.4vw,52px);align-items:start;margin-top:clamp(28px,3.4vw,46px)}
@media (max-width:900px){.voices-grid{grid-template-columns:minmax(0,1fr)}}
.quote-stack{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media (max-width:1150px){.quote-stack{grid-template-columns:minmax(0,1fr)}}
.quote-card{background:#fff;border:1px solid var(--line-i);padding:24px 24px 20px 28px;position:relative}
.quote-card::before{content:"";position:absolute;left:0;top:20px;bottom:20px;width:4px;background:var(--yellow);border-radius:0 4px 4px 0}
.quote-card blockquote{margin:0;font-size:1rem;line-height:1.55;color:var(--ink);font-weight:500}
.quote-card cite{display:block;margin-top:12px;font-style:normal;font-size:.8rem;color:#5a5449}
.quote-card cite b{color:var(--ink)}
.quote-card.is-big blockquote{font-family:var(--display);text-transform:uppercase;font-size:clamp(20px,2.4vw,30px);line-height:1.02;font-weight:400}

/* --- mission / vision ------------------------------------------------------- */
.mv{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(22px,3vw,44px);margin-top:clamp(24px,3vw,38px)}
@media (max-width:760px){.mv{grid-template-columns:minmax(0,1fr)}}
.mv h4{font-weight:800;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--yellow-deep);margin-bottom:10px}
.mv p{font-size:1.04rem;line-height:1.6;color:#45403a}
.pull{margin-top:clamp(30px,4vw,48px);padding-top:26px;border-top:1px solid var(--line-i);font-family:var(--display);text-transform:uppercase;font-size:clamp(22px,3.4vw,44px);line-height:1.02;max-width:24ch}
.yel-line{margin-top:14px;font-family:var(--display);text-transform:uppercase;font-size:clamp(18px,2.4vw,30px);color:var(--yellow-deep)}

/* --- the belief block ------------------------------------------------------- */
.belief{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,4vw,60px);align-items:center}
@media (max-width:880px){.belief{grid-template-columns:minmax(0,1fr)}}
.belief figcaption{margin-top:18px}
.belief-q{display:block;font-family:var(--display);text-transform:uppercase;font-size:clamp(18px,2.2vw,26px);line-height:1.05}
.belief-by{display:block;margin-top:8px;font-size:.8rem;color:#5a5449}
.echo{list-style:none;margin:22px 0;padding-left:22px;border-left:3px solid var(--yellow);display:flex;flex-direction:column;gap:9px}
.echo li{font-size:1.04rem;line-height:1.4;color:#39342c}
.echo-end{margin-top:22px;font-family:var(--display);text-transform:uppercase;font-size:clamp(22px,3vw,38px);line-height:1}

/* --- DYNAMIC SCROLL -------------------------------------------------------
   Where the browser has scroll-driven animation, a section pops as it enters
   and eases back as it leaves. Everywhere else the reveal still runs, so
   nothing depends on it. */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .js .pop{animation:pop-in linear both;animation-timeline:view();animation-range:entry 0% entry 46%}
    .js .collapse{animation:collapse-out linear both;animation-timeline:view();animation-range:exit 12% exit 94%}
    .js .riseslow{animation:rise linear both;animation-timeline:view();animation-range:entry 0% cover 34%}
  }
}
@keyframes pop-in{from{opacity:0;transform:translateY(46px) scale(.955)}to{opacity:1;transform:none}}
@keyframes collapse-out{from{opacity:1;transform:none}to{opacity:.32;transform:scale(.93) translateY(-26px)}}
@keyframes rise{from{transform:translateY(42px)}to{transform:none}}

/* --- resources ---------------------------------------------------------------- */
.res-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(16px,2vw,24px)}
.res{display:flex;flex-direction:column;text-decoration:none;color:inherit;background:#fff;border:1px solid var(--line-i);border-radius:14px;overflow:hidden;transition:transform .3s var(--ease),box-shadow .3s}
.res:hover{transform:translateY(-4px);box-shadow:0 22px 46px rgba(13,11,7,.13)}
.res-art{display:flex;background:var(--ink);padding:26px 18px;aspect-ratio:16/9;align-items:center;justify-content:center;overflow:hidden}
.res-art img{width:40%;margin-left:-11%;border-radius:4px;box-shadow:0 10px 24px rgba(0,0,0,.42)}
.res-art img:first-child{margin-left:0}
.res-art img:nth-child(odd){transform:rotate(-3deg)}
.res-art img:nth-child(even){transform:rotate(2.4deg)}
.res-body{padding:22px 22px 24px;display:flex;flex-direction:column;gap:9px;flex:1}
.res-body p{font-size:.92rem;line-height:1.56;color:#45403a;margin:0}
.res-go{margin-top:auto;padding-top:10px;font-weight:800;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink)}
.res.is-soon{opacity:.78}
.res.is-soon .res-go{color:var(--stone-deep)}
.res-art.is-dl{background:var(--yellow);color:var(--ink);font-family:var(--display);text-transform:uppercase;font-size:clamp(24px,3.2vw,40px);line-height:.92;padding:28px;text-align:center;display:flex;align-items:center;justify-content:center}

/* --- email capture on a download ------------------------------------------- */
.grab{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.grab input{
  flex:1;min-width:190px;font-family:var(--sans);font-size:.95rem;color:var(--ink);
  background:var(--paper);border:1px solid rgba(13,11,7,.2);border-radius:999px;padding:13px 18px;
}
.grab input:focus{outline:none;border-color:var(--yellow-deep);box-shadow:0 0 0 3px rgba(255,210,26,.3)}
.grab .btn{padding:13px 22px;font-size:11px}
.grab-note{margin-top:10px;font-size:.78rem;color:var(--stone-deep)}
.grab-done{font-family:var(--display);text-transform:uppercase;font-size:1.15rem;color:var(--ink);margin-top:14px}

/* ==========================================================================
   THE COMP PASS.
   Built to Tab's visual mock: torn newsprint ground, photo-led cards, circular
   arrow buttons alternating yellow and electric purple, handwritten margin notes, line
   icons, a quote carousel, and the collage label moment.
   Photography is commissioned and not here yet, so every image slot renders a
   textured placeholder and swaps to the real file the moment it exists.
   ========================================================================== */

/* --- newsprint ground ------------------------------------------------------ */
.band.news{
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.6' numOctaves='4'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23p)' opacity='.2'/%3E%3C/svg%3E");
  background-blend-mode:multiply;
}

/* --- circular arrow button ------------------------------------------------- */
.go{
  width:46px;height:46px;border-radius:50%;flex:none;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--yellow);color:var(--ink);font-weight:800;font-size:17px;
  border:0;transition:transform .25s var(--ease),background .2s;
}
.go.purple{background:var(--purple);color:#fff}
.go.open{background:transparent;border:2px solid currentColor}
a:hover > .go,a:hover .go{transform:translateX(4px)}

/* --- photo-led card -------------------------------------------------------- */
.pcard{
  position:relative;display:flex;flex-direction:column;overflow:hidden;
  background:var(--ink-2);color:var(--paper);text-decoration:none;border-radius:16px;
  min-height:340px;transition:transform .32s var(--ease),box-shadow .32s;
}
.pcard:hover{transform:translateY(-6px);box-shadow:0 26px 54px rgba(0,0,0,.4)}
.pcard .shot{
  position:absolute;inset:0;z-index:0;background:#1b1b1b;
  background-image:
    linear-gradient(180deg,rgba(10,10,10,.12) 0%,rgba(10,10,10,.82) 62%,rgba(10,10,10,.96) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.5' numOctaves='4'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)' opacity='.5'/%3E%3C/svg%3E");
  background-size:cover,180px;background-position:center;
}
.pcard .shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1}
.pcard .shot::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,10,10,.1) 0%,rgba(10,10,10,.8) 60%,rgba(10,10,10,.96) 100%);
}
.pcard-body{position:relative;z-index:1;margin-top:auto;padding:24px 22px 22px;display:flex;flex-direction:column;gap:9px}
.pcard-n{position:absolute;top:18px;left:22px;z-index:1;font-family:var(--display);font-size:clamp(26px,3vw,38px);line-height:1;color:var(--paper)}
.pcard-word{font-family:var(--display);text-transform:uppercase;font-size:clamp(26px,3.2vw,40px);line-height:.92;color:var(--paper)}
.pcard-kind{font-weight:800;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--yellow)}
.pcard p{font-size:.88rem;line-height:1.5;color:#c9c3b6;margin:0}
.pcard-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:6px}
.pcard-price{font-weight:800;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#b9b3a5}
.pcard-price b{display:block;font-family:var(--display);font-size:clamp(20px,2.3vw,28px);letter-spacing:.02em;color:var(--paper);margin-top:3px}

.cards5{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
@media (max-width:1100px){.cards5{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.cards5{grid-template-columns:minmax(0,1fr)}}
.cards4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
@media (max-width:1000px){.cards4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.cards4{grid-template-columns:minmax(0,1fr)}}

/* --- handwritten margin notes ---------------------------------------------- */
.note{
  font-family:var(--hand);font-weight:600;text-transform:uppercase;
  font-size:clamp(15px,1.5vw,20px);line-height:1.08;letter-spacing:.02em;
  transform:rotate(var(--r,-5deg));display:inline-block;max-width:16ch;
}
.note.yel{color:var(--yellow-deep)}
.black .note,.ink .note{color:var(--paper)}
.black .note.yel{color:var(--yellow)}
.head-row{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;flex-wrap:wrap}
.head-row h2{margin:0}
.arrowhead{display:inline-block;margin-left:.22em;font-family:var(--sans);font-weight:700}

/* --- three-up with line icons ---------------------------------------------- */
.pillars{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(22px,3vw,46px);margin-top:clamp(28px,3.4vw,46px)}
@media (max-width:820px){.pillars{grid-template-columns:minmax(0,1fr)}}
.pillar svg{width:40px;height:40px;stroke:var(--yellow);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;margin-bottom:16px}
.pillar h3{font-family:var(--display);text-transform:uppercase;font-size:clamp(17px,1.9vw,23px);line-height:1;margin-bottom:10px}
.pillar p{font-size:.93rem;line-height:1.56;color:#b9b3a5;margin:0}
.paper .pillar p,.cream .pillar p,.warm .pillar p{color:#45403a}

/* --- outlined org cards ------------------------------------------------------ */
.ocard{
  border:1px solid var(--line-i);border-radius:16px;padding:26px 22px 24px;
  display:flex;flex-direction:column;gap:10px;background:#fff;
  transition:border-color .3s,transform .3s var(--ease);text-decoration:none;color:inherit;
}
.ocard:hover{border-color:var(--yellow);transform:translateY(-4px)}
.ocard svg{width:42px;height:42px;stroke:var(--ink);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;margin-bottom:8px}
.ocard h3{font-family:var(--display);text-transform:uppercase;font-size:clamp(15px,1.7vw,20px);line-height:1.02}
.ocard p{font-size:.86rem;line-height:1.5;color:#45403a;margin:0}
.ocard .price{font-weight:800;font-size:11px;letter-spacing:.1em;color:var(--ink);background:var(--yellow);display:inline-block;padding:5px 9px;border-radius:999px;align-self:flex-start}

/* --- quote carousel ----------------------------------------------------------- */
.carousel{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:clamp(26px,3.4vw,54px);align-items:center}
@media (max-width:860px){.carousel{grid-template-columns:minmax(0,1fr)}}
.car-track{position:relative;min-height:9.5em}
.car-slide{position:absolute;inset:0;opacity:0;transition:opacity .45s var(--ease);pointer-events:none}
.car-slide.on{opacity:1;position:relative;pointer-events:auto}
.car-slide blockquote{margin:0;font-size:clamp(1.05rem,1.9vw,1.42rem);line-height:1.46;font-weight:500;color:var(--ink)}
.black .car-slide blockquote{color:var(--paper)}
.car-slide blockquote::before{content:"\201C";font-family:var(--display);font-size:2.6em;line-height:0;vertical-align:-.36em;margin-right:.08em;color:var(--yellow-deep)}
.black .car-slide blockquote::before{color:var(--yellow)}
.car-slide cite{display:block;margin-top:16px;font-style:normal;font-weight:800;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--stone-deep)}
.black .car-slide cite{color:var(--stone)}
.car-foot{display:flex;align-items:center;gap:14px;margin-top:26px}
.car-dots{display:flex;gap:8px;margin:0 auto 0 0}
.car-dot{width:9px;height:9px;border-radius:50%;background:rgba(13,11,7,.2);border:0;cursor:pointer;padding:0}
.car-dot.on{background:var(--ink)}
.black .car-dot{background:rgba(250,245,234,.26)}
.black .car-dot.on{background:var(--yellow)}
.car-btn{width:42px;height:42px;border-radius:50%;border:1px solid var(--line-i);background:transparent;cursor:pointer;color:inherit;font-size:15px}
.car-btn:hover{background:var(--yellow);border-color:var(--yellow);color:var(--ink)}
.black .car-btn{border-color:rgba(250,245,234,.28)}

/* --- more than a logo: collage labels ------------------------------------------ */
.collage{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4vw,60px);align-items:center}
@media (max-width:860px){.collage{grid-template-columns:minmax(0,1fr)}}
.collage-art{position:relative;min-height:320px}
.collage-art .shot{position:absolute;inset:0;border-radius:14px;overflow:hidden;background:#1b1b1b;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='h'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.5' numOctaves='4'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23h)' opacity='.5'/%3E%3C/svg%3E");
  background-size:180px}
.collage-art .shot img{width:100%;height:100%;object-fit:cover}
.tapes{position:absolute;inset:0;z-index:2;pointer-events:none}
.tape{
  position:absolute;font-family:var(--display);text-transform:uppercase;
  font-size:clamp(13px,1.5vw,20px);line-height:1;padding:7px 12px 6px;
  background:var(--yellow);color:var(--ink);box-shadow:0 3px 8px rgba(0,0,0,.22);
  transform:rotate(var(--r,-3deg));
}
.tape.purplet{background:var(--purple);color:#fff}
.tape.inkt{background:var(--ink);color:var(--paper)}

/* --- the yellow light bulb band ------------------------------------------------- */
.bulbband{background:var(--yellow);color:var(--ink);position:relative;overflow:hidden}
.bulbband .wrap{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(24px,3.4vw,52px);align-items:center}
@media (max-width:860px){.bulbband .wrap{grid-template-columns:minmax(0,1fr)}}
.bulbband .mega{--sy:1.42;font-size:clamp(30px,5.6vw,80px);white-space:normal}
.scrub{position:relative;display:inline-block}
.scrub svg{position:absolute;left:-2%;bottom:-.2em;width:104%;height:.46em;overflow:visible}
.scrub path{fill:none;stroke:var(--purple);stroke-width:8;stroke-linecap:round}
.bulbdoodle{width:clamp(56px,8vw,104px);height:auto;stroke:var(--ink);fill:none;stroke-width:5;stroke-linecap:round;stroke-linejoin:round}

/* --- hero photo slot ------------------------------------------------------------ */
.hero{overflow:hidden}
.hero-art{
  position:absolute;right:0;top:0;bottom:0;width:46%;z-index:1;pointer-events:none;
  background-size:cover;background-position:center top;
  mask-image:linear-gradient(90deg,transparent,#000 22%);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 22%);
}
.hero-art img{width:100%;height:100%;object-fit:cover;object-position:center top}
@media (max-width:960px){.hero-art{display:none}}
.hero-note{position:absolute;z-index:3}
@media (max-width:960px){.hero-note{display:none}}

/* The comp's hero is black with the photo bleeding in from the right. The
   softening pass turned every hero cream, so the dark variant is restated
   here, after it. */
.hero.black{background:var(--black);color:var(--paper)}
.hero.black::before{
  opacity:.55;
  background:
    radial-gradient(ellipse 52% 44% at 74% 34%,rgba(255,210,26,.24),transparent 64%),
    radial-gradient(circle at 74% 34%,rgba(255,210,26,.11) 1px,transparent 1.7px) 0 0/7px 7px;
  mask-image:radial-gradient(ellipse 58% 54% at 74% 34%,#000,transparent 74%);
  -webkit-mask-image:radial-gradient(ellipse 58% 54% at 74% 34%,#000,transparent 74%);
}
.hero.black .annot{color:var(--stone)}
.hero.black .annot.yel{color:var(--yellow)}
.hero.black .lede{color:#e3ddcf}
.hero.black .rule{background:var(--line-w)}
.hero.black .btn-ghost{color:var(--paper);border-color:rgba(250,245,234,.34)}
.hero.black .btn-ghost:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}

/* --- the conveyor ----------------------------------------------------------
   A continuous drift you can also grab. Two identical runs sit side by side
   and the track translates exactly one run's width, so the loop has no seam.
   Dragging converts the CSS drift into a scroll offset and hands control back
   when you let go. Stops dead under prefers-reduced-motion. */
.wall-band{padding-bottom:clamp(44px,6vw,80px);overflow:hidden}
.conveyor{
  margin-top:clamp(26px,3vw,42px);overflow-x:auto;overscroll-behavior-x:contain;
  scrollbar-width:none;cursor:grab;-webkit-overflow-scrolling:touch;
}
.conveyor::-webkit-scrollbar{display:none}
.conveyor.is-dragging{cursor:grabbing}
.conveyor-run{
  display:flex;gap:16px;width:max-content;padding:4px var(--pad);
  animation:drift 90s linear infinite;
}
.conveyor:hover .conveyor-run,
.conveyor.is-dragging .conveyor-run,
.conveyor.is-held .conveyor-run{animation-play-state:paused}
@keyframes drift{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.conveyor-run{animation:none}}

.tile{
  flex:0 0 auto;width:clamp(150px,17vw,230px);margin:0;position:relative;
  transition:transform .3s var(--ease);cursor:zoom-in;
}
.tile img{
  width:100%;height:auto;display:block;border-radius:10px;
  border:1px solid rgba(250,245,234,.1);box-shadow:0 14px 34px rgba(0,0,0,.42);
  -webkit-user-drag:none;user-select:none;pointer-events:none;
}
@media (hover:hover) and (pointer:fine){
  .tile:hover{transform:translateY(-8px) scale(1.04);z-index:2}
  .tile:hover img{border-color:var(--yellow);box-shadow:0 22px 48px rgba(0,0,0,.55)}
}
.wall-foot{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:22px}

/* --- hero as a single graphic ------------------------------------------------
   The headline is inside the artwork, so a visually hidden h1 carries the same
   words for search engines and screen readers. */
.hero-graphic{background:var(--black);padding:0;min-height:0;display:block}
.hero-graphic .shotwrap{position:relative;width:100%}
.hero-graphic img{width:100%;height:auto;display:block}
.hero-graphic .hero-cta{
  margin:0;padding:clamp(22px,3.4vw,40px) var(--pad) clamp(26px,4vw,52px);
  display:flex;gap:14px;flex-wrap:wrap;align-items:center;
}
.vh{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;
}


/* --- service cards: Tab's artwork is the whole card face --------------------
   Number, name and description are inside each graphic, so the markup adds only
   the price and the arrow underneath and never prints over her type. */
.scards{align-items:start}
.scard{
  display:flex;flex-direction:column;text-decoration:none;color:inherit;
  background:var(--black);border-radius:16px;overflow:hidden;
  transition:transform .32s var(--ease),box-shadow .32s;
}
.scard:hover{transform:translateY(-6px);box-shadow:0 26px 54px rgba(0,0,0,.42)}
.scard-art{display:block;line-height:0;background:var(--black)}
.scard-art img{width:100%;height:auto;display:block;aspect-ratio:3/4;object-fit:cover}
.scard-foot{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 18px 18px;
}
.scard-price{
  font-weight:800;font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--stone);line-height:1.3;
}
.scard-price b{
  display:block;font-family:var(--display);font-size:clamp(19px,2.1vw,26px);
  letter-spacing:.02em;color:var(--paper);margin-top:4px;
}

/* --- services page header, from Tab's backdrop ------------------------------ */
.svc-head{position:relative;background:var(--black);line-height:0}
.svc-head img{width:100%;height:auto;display:block}
.svc-head-copy{
  position:absolute;left:0;right:0;bottom:0;
  padding:0 var(--pad) clamp(26px,5vw,74px);line-height:1.55;
}
.svc-head-copy .lede{max-width:46ch;color:#39342c}
@media (max-width:720px){
  .svc-head-copy{position:static;background:var(--paper);padding:24px var(--pad) 30px}
}



/* --- service cards, slim, five on one line ----------------------------------
   Tab re-cut the cards at 9:16. Five of those fit the 1280 wrap with room to
   spare, so the row stops scrolling and becomes a plain grid. Everything the
   card says is painted into her artwork; the markup adds the button and nothing
   else. The card is the link, so the pill is a span, not a nested anchor. */
/* The copy is painted into Tab's artwork, so the only way to make it read
   larger is to give the card more width. The row leaves the 1280 wrap and runs
   on a narrow gutter instead, which buys about 40px a card at 1400 and more on
   anything wider, with all five still on one line. */
.scards-bleed{
  margin-top:clamp(26px,3vw,42px);
  padding:0 clamp(16px,2.2vw,40px);
}
.scards{
  display:grid;grid-template-columns:repeat(5,1fr);
  gap:clamp(10px,1.2vw,18px);
  margin:0;padding:0;
  overflow:visible;scroll-snap-type:none;cursor:auto;
}
.scards .scard{width:auto}
.scard{
  position:relative;display:block;background:transparent;
  border-radius:0;overflow:visible;
  transition:transform .32s var(--ease);
}
.scard-art{border-radius:14px;overflow:hidden;display:block;line-height:0}
.scard-art img{width:100%;height:auto;display:block;aspect-ratio:1080/1920;object-fit:cover}
.scard:hover{transform:translateY(-6px);box-shadow:none}
.scard:hover .scard-art{box-shadow:0 24px 50px rgba(13,11,7,.26)}

/* the button sits on the picture, under the copy. --cta-top is measured off
   each file in _svc_cards.py, because the copy stops at a different height on
   every card. */
/* The arrow sits on the artwork. Its line is shared by all five and set in
   _svc_cards.py by the card whose copy runs deepest, which is how it clears
   her type on every one of them. */
/* The description is live type now, sitting where hers was painted. Her left
   margin is 6.6% of the card, so this matches it. */
.scard-desc{
  position:absolute;left:7.04%;right:7%;top:62%;
  color:#F2EEE4;font-weight:500;letter-spacing:.002em;line-height:1.32;
  /* --ds is a share of the card's width, solved per card in _svc_desc.py from
     how deep that card's band is. The card holds a fixed aspect ratio, so the
     band scales with the width exactly as the type does and the fit holds at
     every breakpoint. The clamp is the fallback where cqw is not supported. */
  font-size:clamp(11px,1.05vw,15.5px);
  font-size:max(10px, calc(var(--ds,5.6) * 1cqw));
}
.scard{container-type:inline-size}
.scard-cta{
  position:absolute;left:7.04%;top:auto;bottom:3.4%;
  width:clamp(38px,3.3vw,54px);height:clamp(38px,3.3vw,54px);
  min-height:0;padding:0;font-size:clamp(16px,1.3vw,21px);
  transition:transform .25s var(--ease),filter .2s;
}
.scard:focus-visible{outline:3px solid var(--ink);outline-offset:6px}

/* under 980 the five would squeeze past readable, so the row goes back to a
   swipe. Cards keep a real width and the native scroll does the work. */
@media (max-width:980px){
  .scards-bleed{padding:0}
  .scards{
    display:flex;gap:14px;
    margin:0 calc(-1 * var(--pad)) 0;
    padding:4px var(--pad) 26px;
    overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x proximity;scroll-padding-left:var(--pad);
    scrollbar-width:none;cursor:grab;-webkit-overflow-scrolling:touch;
  }
  .scards::-webkit-scrollbar{display:none}
  .scards.is-dragging{cursor:grabbing;scroll-snap-type:none}
  /* The row scrolls below 980, so five-on-one-line does not bind here and the
     card can take the width the copy wants. At 268 the next card still peeks,
     which is what tells you to swipe. */
  .scards .scard{flex:0 0 auto;width:min(268px,72vw);scroll-snap-align:start}
  .scard-cta{width:42px;height:42px;font-size:18px}
}

/* --- above the fold ---------------------------------------------------------
   The artwork is 2.5:1. On a phone that renders about 150px tall, which puts
   the subcopy under 7px, so the small source is a crop of the collage alone and
   the copy is set live underneath, where it stays readable and the button is a
   real button. <picture> means only one of the two files is ever fetched. */
.hero-say{display:none}
@media (max-width:760px){
  .hero-frame img{aspect-ratio:900/712}
  .hero-hit{display:none}             /* the drawn button is not in the crop */
  .hero-say{
    display:block;background:var(--black);color:var(--paper);
    padding:26px var(--pad) 34px;
  }
  .hero-say-h{
    font-family:var(--display);text-transform:uppercase;
    font-size:clamp(30px,8.6vw,44px);line-height:.94;letter-spacing:.005em;
  }
  .hero-say-h em{font-style:normal;color:var(--yellow)}
  .hero-say-p{margin-top:14px;font-size:15px;line-height:1.55;color:#D8D2C6}
  .hero-say .btn{margin-top:22px}
}

/* --- torn paper between sections --------------------------------------------
   Tab asked for a torn edge where the bands meet, the way her own collages are
   cut. The strip sits above the band and is painted in that band's own colour,
   so the tear reads as this section ripping over the one before it. The shape is
   an SVG mask generated in _torn.py from a fixed seed, with three variants so
   consecutive tears do not look stamped from the same die.
   It is decoration, drawn by a pseudo-element and never announced. */
.band.rip{position:relative}
.band.rip::before{
  content:"";position:absolute;left:0;right:0;top:0;
  height:clamp(20px,2.6vw,38px);transform:translateY(-99%);
  background:var(--rip,transparent);pointer-events:none;z-index:1;
  /* the shadow follows the torn silhouette, which is what makes the edge read
     even when the band above shares its colour */
  filter:drop-shadow(0 3px 5px var(--rip-shade,rgba(13,11,7,.20)));
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
}
.band.cream.rip{--rip:var(--paper)}
.band.warm.rip{--rip:#FFFCF4}
.band.paper.rip{--rip:var(--paper)}
.band.black.rip{--rip:var(--black);--rip-shade:rgba(0,0,0,.55)}
.band.yellowband.rip,.band.bulbband.rip{--rip:var(--yellow)}
.band.rip1::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1000' height='46' viewBox='0 0 1000 46' preserveAspectRatio='none'%3E%3Cpath d='M0,46 L0,28.0 L33.7,28.0 L58.3,25.6 L82.4,17.3 L120.0,5.4 L157.2,3.7 L187.3,11.7 L230.1,20.3 L253.7,16.5 L280.9,7.2 L332.3,8.6 L377.3,9.5 L401.6,6.3 L448.1,3.7 L491.1,3.7 L541.7,3.7 L584.4,10.4 L632.7,19.1 L658.9,23.7 L686.4,15.4 L732.5,16.7 L786.0,20.2 L829.4,19.5 L881.6,19.0 L927.5,10.4 L972.8,16.2 L1000.0,19.2 L1000,46 Z' fill='%23000'/%3E%3Crect x='22.6' y='9.9' width='1.9' height='1.3'/%3E%3Crect x='59.0' y='15.3' width='1.8' height='1.6'/%3E%3Crect x='390.9' y='17.1' width='1.7' height='2.0'/%3E%3Crect x='549.4' y='17.3' width='4.0' height='2.9'/%3E%3Crect x='278.4' y='9.1' width='2.5' height='3.0'/%3E%3Crect x='957.7' y='4.5' width='2.0' height='1.6'/%3E%3Crect x='233.3' y='10.3' width='3.3' height='1.7'/%3E%3Crect x='4.1' y='9.2' width='2.6' height='2.3'/%3E%3Crect x='953.1' y='13.9' width='3.0' height='2.4'/%3E%3Crect x='676.2' y='2.8' width='4.3' height='2.7'/%3E%3Crect x='874.5' y='15.8' width='2.7' height='1.9'/%3E%3Crect x='103.5' y='12.9' width='1.6' height='1.2'/%3E%3Crect x='208.8' y='4.7' width='2.5' height='1.2'/%3E%3Crect x='0.2' y='4.5' width='1.7' height='1.9'/%3E%3Crect x='25.5' y='17.1' width='3.4' height='1.4'/%3E%3Crect x='252.3' y='7.9' width='2.6' height='1.4'/%3E%3Crect x='848.9' y='19.2' width='2.9' height='2.1'/%3E%3Crect x='85.9' y='3.6' width='2.5' height='1.7'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1000' height='46' viewBox='0 0 1000 46' preserveAspectRatio='none'%3E%3Cpath d='M0,46 L0,28.0 L33.7,28.0 L58.3,25.6 L82.4,17.3 L120.0,5.4 L157.2,3.7 L187.3,11.7 L230.1,20.3 L253.7,16.5 L280.9,7.2 L332.3,8.6 L377.3,9.5 L401.6,6.3 L448.1,3.7 L491.1,3.7 L541.7,3.7 L584.4,10.4 L632.7,19.1 L658.9,23.7 L686.4,15.4 L732.5,16.7 L786.0,20.2 L829.4,19.5 L881.6,19.0 L927.5,10.4 L972.8,16.2 L1000.0,19.2 L1000,46 Z' fill='%23000'/%3E%3Crect x='22.6' y='9.9' width='1.9' height='1.3'/%3E%3Crect x='59.0' y='15.3' width='1.8' height='1.6'/%3E%3Crect x='390.9' y='17.1' width='1.7' height='2.0'/%3E%3Crect x='549.4' y='17.3' width='4.0' height='2.9'/%3E%3Crect x='278.4' y='9.1' width='2.5' height='3.0'/%3E%3Crect x='957.7' y='4.5' width='2.0' height='1.6'/%3E%3Crect x='233.3' y='10.3' width='3.3' height='1.7'/%3E%3Crect x='4.1' y='9.2' width='2.6' height='2.3'/%3E%3Crect x='953.1' y='13.9' width='3.0' height='2.4'/%3E%3Crect x='676.2' y='2.8' width='4.3' height='2.7'/%3E%3Crect x='874.5' y='15.8' width='2.7' height='1.9'/%3E%3Crect x='103.5' y='12.9' width='1.6' height='1.2'/%3E%3Crect x='208.8' y='4.7' width='2.5' height='1.2'/%3E%3Crect x='0.2' y='4.5' width='1.7' height='1.9'/%3E%3Crect x='25.5' y='17.1' width='3.4' height='1.4'/%3E%3Crect x='252.3' y='7.9' width='2.6' height='1.4'/%3E%3Crect x='848.9' y='19.2' width='2.9' height='2.1'/%3E%3Crect x='85.9' y='3.6' width='2.5' height='1.7'/%3E%3C/svg%3E")}
.band.rip2::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1000' height='46' viewBox='0 0 1000 46' preserveAspectRatio='none'%3E%3Cpath d='M0,46 L0,27.7 L27.9,27.7 L67.2,33.0 L118.3,33.1 L148.8,7.7 L191.8,11.2 L222.2,3.7 L280.1,10.4 L324.3,7.3 L364.2,12.5 L399.5,18.2 L426.0,17.4 L467.8,17.1 L496.6,11.8 L527.0,6.5 L583.9,11.1 L633.3,15.2 L659.8,21.1 L689.0,28.1 L725.7,27.2 L761.6,25.2 L784.6,10.5 L842.3,10.4 L884.2,5.4 L928.1,7.6 L956.6,4.9 L1000.0,6.6 L1000,46 Z' fill='%23000'/%3E%3Crect x='306.6' y='3.6' width='1.6' height='2.8'/%3E%3Crect x='777.0' y='8.4' width='3.6' height='2.5'/%3E%3Crect x='898.7' y='18.6' width='2.7' height='3.2'/%3E%3Crect x='961.4' y='12.2' width='4.2' height='2.1'/%3E%3Crect x='375.6' y='6.2' width='4.2' height='1.4'/%3E%3Crect x='69.3' y='15.9' width='3.9' height='2.1'/%3E%3Crect x='837.0' y='2.8' width='2.2' height='1.7'/%3E%3Crect x='419.6' y='4.8' width='1.6' height='1.8'/%3E%3Crect x='899.1' y='19.0' width='3.8' height='2.1'/%3E%3Crect x='252.2' y='18.6' width='3.1' height='2.6'/%3E%3Crect x='28.3' y='5.5' width='4.1' height='2.8'/%3E%3Crect x='881.5' y='12.4' width='2.8' height='2.3'/%3E%3Crect x='849.3' y='7.2' width='3.1' height='1.7'/%3E%3Crect x='768.3' y='2.0' width='3.6' height='3.1'/%3E%3Crect x='23.5' y='12.2' width='3.5' height='2.9'/%3E%3Crect x='584.3' y='6.3' width='2.7' height='3.1'/%3E%3Crect x='905.6' y='4.2' width='1.7' height='1.3'/%3E%3Crect x='25.3' y='9.7' width='1.9' height='2.9'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1000' height='46' viewBox='0 0 1000 46' preserveAspectRatio='none'%3E%3Cpath d='M0,46 L0,27.7 L27.9,27.7 L67.2,33.0 L118.3,33.1 L148.8,7.7 L191.8,11.2 L222.2,3.7 L280.1,10.4 L324.3,7.3 L364.2,12.5 L399.5,18.2 L426.0,17.4 L467.8,17.1 L496.6,11.8 L527.0,6.5 L583.9,11.1 L633.3,15.2 L659.8,21.1 L689.0,28.1 L725.7,27.2 L761.6,25.2 L784.6,10.5 L842.3,10.4 L884.2,5.4 L928.1,7.6 L956.6,4.9 L1000.0,6.6 L1000,46 Z' fill='%23000'/%3E%3Crect x='306.6' y='3.6' width='1.6' height='2.8'/%3E%3Crect x='777.0' y='8.4' width='3.6' height='2.5'/%3E%3Crect x='898.7' y='18.6' width='2.7' height='3.2'/%3E%3Crect x='961.4' y='12.2' width='4.2' height='2.1'/%3E%3Crect x='375.6' y='6.2' width='4.2' height='1.4'/%3E%3Crect x='69.3' y='15.9' width='3.9' height='2.1'/%3E%3Crect x='837.0' y='2.8' width='2.2' height='1.7'/%3E%3Crect x='419.6' y='4.8' width='1.6' height='1.8'/%3E%3Crect x='899.1' y='19.0' width='3.8' height='2.1'/%3E%3Crect x='252.2' y='18.6' width='3.1' height='2.6'/%3E%3Crect x='28.3' y='5.5' width='4.1' height='2.8'/%3E%3Crect x='881.5' y='12.4' width='2.8' height='2.3'/%3E%3Crect x='849.3' y='7.2' width='3.1' height='1.7'/%3E%3Crect x='768.3' y='2.0' width='3.6' height='3.1'/%3E%3Crect x='23.5' y='12.2' width='3.5' height='2.9'/%3E%3Crect x='584.3' y='6.3' width='2.7' height='3.1'/%3E%3Crect x='905.6' y='4.2' width='1.7' height='1.3'/%3E%3Crect x='25.3' y='9.7' width='1.9' height='2.9'/%3E%3C/svg%3E")}
.band.rip3::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1000' height='46' viewBox='0 0 1000 46' preserveAspectRatio='none'%3E%3Cpath d='M0,46 L0,26.3 L54.9,26.3 L94.3,24.2 L132.4,22.0 L187.2,26.1 L211.2,26.9 L254.7,27.2 L310.2,20.8 L368.2,16.8 L406.0,14.6 L428.4,9.7 L451.2,13.9 L478.1,22.5 L525.3,24.0 L582.7,26.3 L605.3,21.6 L639.5,20.3 L693.7,11.6 L745.8,17.8 L778.5,22.6 L803.4,8.8 L833.7,3.7 L890.3,3.7 L923.2,8.8 L973.9,16.5 L1000.0,15.1 L1000,46 Z' fill='%23000'/%3E%3Crect x='132.9' y='8.2' width='3.0' height='2.9'/%3E%3Crect x='577.8' y='3.6' width='3.1' height='1.8'/%3E%3Crect x='805.9' y='16.5' width='3.3' height='2.5'/%3E%3Crect x='419.9' y='6.7' width='4.0' height='2.7'/%3E%3Crect x='556.9' y='18.1' width='4.0' height='2.6'/%3E%3Crect x='105.8' y='18.6' width='1.7' height='1.5'/%3E%3Crect x='123.0' y='4.9' width='3.6' height='2.3'/%3E%3Crect x='128.4' y='5.4' width='3.8' height='1.8'/%3E%3Crect x='216.2' y='15.9' width='2.2' height='1.3'/%3E%3Crect x='519.9' y='14.7' width='1.4' height='2.4'/%3E%3Crect x='184.6' y='17.0' width='2.9' height='1.8'/%3E%3Crect x='335.9' y='3.2' width='1.5' height='2.2'/%3E%3Crect x='494.6' y='4.6' width='1.8' height='2.0'/%3E%3Crect x='920.1' y='2.8' width='3.5' height='3.1'/%3E%3Crect x='299.9' y='8.3' width='3.2' height='1.6'/%3E%3Crect x='29.0' y='4.4' width='4.3' height='2.0'/%3E%3Crect x='878.2' y='4.8' width='3.8' height='1.6'/%3E%3Crect x='363.9' y='14.9' width='4.6' height='3.2'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1000' height='46' viewBox='0 0 1000 46' preserveAspectRatio='none'%3E%3Cpath d='M0,46 L0,26.3 L54.9,26.3 L94.3,24.2 L132.4,22.0 L187.2,26.1 L211.2,26.9 L254.7,27.2 L310.2,20.8 L368.2,16.8 L406.0,14.6 L428.4,9.7 L451.2,13.9 L478.1,22.5 L525.3,24.0 L582.7,26.3 L605.3,21.6 L639.5,20.3 L693.7,11.6 L745.8,17.8 L778.5,22.6 L803.4,8.8 L833.7,3.7 L890.3,3.7 L923.2,8.8 L973.9,16.5 L1000.0,15.1 L1000,46 Z' fill='%23000'/%3E%3Crect x='132.9' y='8.2' width='3.0' height='2.9'/%3E%3Crect x='577.8' y='3.6' width='3.1' height='1.8'/%3E%3Crect x='805.9' y='16.5' width='3.3' height='2.5'/%3E%3Crect x='419.9' y='6.7' width='4.0' height='2.7'/%3E%3Crect x='556.9' y='18.1' width='4.0' height='2.6'/%3E%3Crect x='105.8' y='18.6' width='1.7' height='1.5'/%3E%3Crect x='123.0' y='4.9' width='3.6' height='2.3'/%3E%3Crect x='128.4' y='5.4' width='3.8' height='1.8'/%3E%3Crect x='216.2' y='15.9' width='2.2' height='1.3'/%3E%3Crect x='519.9' y='14.7' width='1.4' height='2.4'/%3E%3Crect x='184.6' y='17.0' width='2.9' height='1.8'/%3E%3Crect x='335.9' y='3.2' width='1.5' height='2.2'/%3E%3Crect x='494.6' y='4.6' width='1.8' height='2.0'/%3E%3Crect x='920.1' y='2.8' width='3.5' height='3.1'/%3E%3Crect x='299.9' y='8.3' width='3.2' height='1.6'/%3E%3Crect x='29.0' y='4.4' width='4.3' height='2.0'/%3E%3Crect x='878.2' y='4.8' width='3.8' height='1.6'/%3E%3Crect x='363.9' y='14.9' width='4.6' height='3.2'/%3E%3C/svg%3E")}

/* --- About IEI ---------------------------------------------------------------
   Tab did not want this as a slab. It borrows the quote band's shape instead:
   her Founders First poster pinned on the left, the line and the lede on the
   right, then the light-bulb band, then who we are. The arrow is the same brush
   mark from her banner, inked so it holds on a light ground. */
/* The face, weight and size come from .h2 so this line sits at exactly the
   same pitch as "Where are you right now?". All that is added here is the row
   layout the inline brush arrow needs. */
.say-h{
  display:flex;flex-wrap:wrap;align-items:center;gap:0 .2em;margin-top:16px;
}
.say-h-ink{color:var(--ink)}
.say-arrow{width:.82em;height:auto;display:block;flex:none}
#about .lede{max-width:48ch}

/* --- the light-bulb band now carries the three pillars ---------------------- */
.bulbband .wrap{align-items:center}
.bulb-pillars{display:flex;flex-direction:column;gap:clamp(14px,1.8vw,22px)}
.bulb-pillars > div{display:flex;align-items:flex-start;gap:clamp(13px,1.5vw,20px)}
.bulb-pillars > div + div{
  padding-top:clamp(14px,1.8vw,22px);border-top:2px solid rgba(13,11,7,.26);
}
.bulb-pillars img{width:clamp(34px,3.4vw,50px);height:auto;flex:none;margin-top:2px}
.bulb-pillars h3{
  font-family:var(--display);text-transform:uppercase;color:var(--ink);
  font-size:clamp(17px,1.9vw,25px);line-height:1;margin-bottom:6px;
}
.bulb-pillars p{font-size:clamp(14px,1.15vw,16.5px);line-height:1.45;color:#2E2A22;margin:0}
.bulb-cta{display:block;padding-top:clamp(6px,1vw,10px);border-top:0 !important}

/* --- who we are, on the gritty ground ---------------------------------------
   The speckled tile and the two brush marks are lifted from Tab's banner by
   _banner_grit.py. This is the part of the old slab she wanted kept. */
.grit{
  background-image:url("/art/grit-tile.png");
  background-repeat:repeat;background-size:900px 400px;
}
.grit-mark{
  position:absolute;top:0;width:clamp(50px,6.4vw,116px);
  height:min(100%,760px);pointer-events:none;z-index:0;opacity:.82;
  background-repeat:no-repeat;background-size:100% auto;background-position:left top;
}
.grit-l{left:min(0px,calc(50vw - var(--wrap)/2 - 86px));background-image:url("/art/scribble-l.png")}
.grit-r{right:min(0px,calc(50vw - var(--wrap)/2 - 86px));background-image:url("/art/scribble-r.png");background-position:right top}
/* The tears reach up over the band above, so this cannot clip its own overflow.
   The brush marks it was clipping are pinned with min(0px, ...) and so can only
   ever run off the left or right edge, which body{overflow-x:hidden} catches. */
#who-we-are{overflow:visible}
#who-we-are .wrap{position:relative;z-index:1}

.about-grid{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(26px,4vw,58px);align-items:start;
}
.about-grid .mv{margin-top:0}
@media (max-width:880px){.about-grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:820px){
  .bulb-pillars{margin-top:clamp(24px,5vw,34px)}
}

/* the two lines Tab moved onto the philosophy read as the close of that column,
   so the rule above them is dropped where the column already has one */
.belief .pull{margin-top:clamp(26px,3.4vw,40px)}

/* Mission and vision were written for a cream band. About IEI runs on black
   now, so the body goes light and the label takes the brighter yellow. */
.black .mv h4{color:var(--yellow)}
.black .mv p{color:#CFC9BD}

/* Her collage wants more room than the old portrait did, so the philosophy row
   runs closer to even. An inline ratio here would have outranked the stacking
   rule below 880 and left the collage at a third of the width on a phone. */
.belief-art{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
/* Words lead, her collage answers on the right. The columns swap with the DOM
   order rather than with `direction` or `order`, so the reading order and the
   tab order follow what is on screen. */
.belief-flip{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
@media (max-width:880px){
  .belief-art,.belief-flip{grid-template-columns:minmax(0,1fr)}
}

/* Tab moved the marker off the heading and onto the margin note. Caveat sits
   high in its box, so the block needs a little lead under it or the yellow
   clips the descenders. */
.note-hl{
  background:var(--yellow);color:var(--ink);
  padding:.14em .3em .22em;border-radius:1px;
}
.black .note-hl,.ink .note-hl{color:var(--ink)}

/* It points at the next section, so it keeps gesturing that way: a small fall
   and settle, with a pause between, rather than a constant bob. */
@keyframes nudge{
  0%,62%,100%{transform:translateY(0)}
  72%{transform:translateY(7px)}
  82%{transform:translateY(0)}
  90%{transform:translateY(4px)}
}
.hero-cue:hover .go{animation:none;transform:translateY(6px)}
@media (prefers-reduced-motion:reduce){
  .hero-cue .go{animation:none}
}
.hero-cue:focus-visible{outline:3px solid var(--yellow);outline-offset:6px}

/* Tab wanted the edge over Who We Are scratchier than the rest, so that tear is
   drawn deeper. Same mask, more of it. */
.band.rip-deep::before{height:clamp(36px,4.8vw,74px)}

/* Founders First runs straight into Your Brand Is A Being, so the two bands
   give up most of the air where they meet. */
#about{padding-bottom:clamp(20px,2.4vw,38px)}
#philosophy{padding-top:clamp(22px,2.6vw,40px)}

/* --- Long live the light bulb moments ----------------------------------------
   Her banner carries the line and its own torn edges, both of which run into
   black, so the band is black and the two meet without a seam. The three
   pillars sit under it on the same ground, glyphs back in her yellow. */
/* The banner closes the page now, so it sits inside the wrap at a size that
   reads as a pasted piece rather than running edge to edge. Her torn top and
   bottom are what make it sit on the black without looking cropped. */
#bulb{padding:clamp(44px,5.4vw,84px) 0}
#bulb .band-art{margin:0 auto;max-width:960px}
#bulb .band-art img{border-radius:3px}
#bulb .bulb-pillars{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(20px,3vw,46px);
}
#bulb .bulb-pillars > div{display:flex;align-items:flex-start;gap:clamp(13px,1.5vw,20px)}
#bulb .bulb-pillars > div + div{padding-top:0;border-top:0}
#bulb .bulb-pillars h3{color:var(--paper)}
#bulb .bulb-pillars p{color:#CFC9BD}
#bulb .bulb-cta{grid-column:1/-1;display:flex;justify-content:center;padding-top:clamp(10px,1.6vw,22px)}
@media (max-width:820px){
  #bulb .bulb-pillars{grid-template-columns:minmax(0,1fr);gap:clamp(16px,4vw,24px)}
  #bulb .bulb-pillars > div + div{
    padding-top:clamp(16px,4vw,24px);border-top:2px solid var(--purple);
  }
  #bulb .bulb-cta{justify-content:flex-start}
}

/* --- the bulb, lighting up in Who We Are --------------------------------------
   It is her brush mark, lifted out of the About IEI banner. It comes up from
   under and brightens as the section arrives, which is the one piece of motion
   on this page that earns itself. Anyone who has asked their system to stop
   moving things gets it placed, not animated. */


.rip-stack{position:absolute;left:0;right:0;top:0;height:0;pointer-events:none;z-index:1}
.rip-stack i{
  position:absolute;left:0;right:0;display:block;
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
}
.rip-stack i:nth-child(1){
  /* cream on a cream band is no layer at all, so the top sheet is yellow */
  height:clamp(52px,6.6vw,104px);transform:translateY(-100%);
  background:var(--yellow);
}
.rip-stack i:nth-child(2){
  height:clamp(44px,5.6vw,88px);transform:translateY(-100%);
  background:var(--purple);
}
.rip-stack i:nth-child(1){-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1000' height='46' viewBox='0 0 1000 46' preserveAspectRatio='none'%3E%3Cpath d='M0,46 L0,27.7 L27.9,27.7 L67.2,33.0 L118.3,33.1 L148.8,7.7 L191.8,11.2 L222.2,3.7 L280.1,10.4 L324.3,7.3 L364.2,12.5 L399.5,18.2 L426.0,17.4 L467.8,17.1 L496.6,11.8 L527.0,6.5 L583.9,11.1 L633.3,15.2 L659.8,21.1 L689.0,28.1 L725.7,27.2 L761.6,25.2 L784.6,10.5 L842.3,10.4 L884.2,5.4 L928.1,7.6 L956.6,4.9 L1000.0,6.6 L1000,46 Z' fill='%23000'/%3E%3Crect x='306.6' y='3.6' width='1.6' height='2.8'/%3E%3Crect x='777.0' y='8.4' width='3.6' height='2.5'/%3E%3Crect x='898.7' y='18.6' width='2.7' height='3.2'/%3E%3Crect x='961.4' y='12.2' width='4.2' height='2.1'/%3E%3Crect x='375.6' y='6.2' width='4.2' height='1.4'/%3E%3Crect x='69.3' y='15.9' width='3.9' height='2.1'/%3E%3Crect x='837.0' y='2.8' width='2.2' height='1.7'/%3E%3Crect x='419.6' y='4.8' width='1.6' height='1.8'/%3E%3Crect x='899.1' y='19.0' width='3.8' height='2.1'/%3E%3Crect x='252.2' y='18.6' width='3.1' height='2.6'/%3E%3Crect x='28.3' y='5.5' width='4.1' height='2.8'/%3E%3Crect x='881.5' y='12.4' width='2.8' height='2.3'/%3E%3Crect x='849.3' y='7.2' width='3.1' height='1.7'/%3E%3Crect x='768.3' y='2.0' width='3.6' height='3.1'/%3E%3Crect x='23.5' y='12.2' width='3.5' height='2.9'/%3E%3Crect x='584.3' y='6.3' width='2.7' height='3.1'/%3E%3Crect x='905.6' y='4.2' width='1.7' height='1.3'/%3E%3Crect x='25.3' y='9.7' width='1.9' height='2.9'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1000' height='46' viewBox='0 0 1000 46' preserveAspectRatio='none'%3E%3Cpath d='M0,46 L0,27.7 L27.9,27.7 L67.2,33.0 L118.3,33.1 L148.8,7.7 L191.8,11.2 L222.2,3.7 L280.1,10.4 L324.3,7.3 L364.2,12.5 L399.5,18.2 L426.0,17.4 L467.8,17.1 L496.6,11.8 L527.0,6.5 L583.9,11.1 L633.3,15.2 L659.8,21.1 L689.0,28.1 L725.7,27.2 L761.6,25.2 L784.6,10.5 L842.3,10.4 L884.2,5.4 L928.1,7.6 L956.6,4.9 L1000.0,6.6 L1000,46 Z' fill='%23000'/%3E%3Crect x='306.6' y='3.6' width='1.6' height='2.8'/%3E%3Crect x='777.0' y='8.4' width='3.6' height='2.5'/%3E%3Crect x='898.7' y='18.6' width='2.7' height='3.2'/%3E%3Crect x='961.4' y='12.2' width='4.2' height='2.1'/%3E%3Crect x='375.6' y='6.2' width='4.2' height='1.4'/%3E%3Crect x='69.3' y='15.9' width='3.9' height='2.1'/%3E%3Crect x='837.0' y='2.8' width='2.2' height='1.7'/%3E%3Crect x='419.6' y='4.8' width='1.6' height='1.8'/%3E%3Crect x='899.1' y='19.0' width='3.8' height='2.1'/%3E%3Crect x='252.2' y='18.6' width='3.1' height='2.6'/%3E%3Crect x='28.3' y='5.5' width='4.1' height='2.8'/%3E%3Crect x='881.5' y='12.4' width='2.8' height='2.3'/%3E%3Crect x='849.3' y='7.2' width='3.1' height='1.7'/%3E%3Crect x='768.3' y='2.0' width='3.6' height='3.1'/%3E%3Crect x='23.5' y='12.2' width='3.5' height='2.9'/%3E%3Crect x='584.3' y='6.3' width='2.7' height='3.1'/%3E%3Crect x='905.6' y='4.2' width='1.7' height='1.3'/%3E%3Crect x='25.3' y='9.7' width='1.9' height='2.9'/%3E%3C/svg%3E")}
.rip-stack i:nth-child(2){-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1000' height='46' viewBox='0 0 1000 46' preserveAspectRatio='none'%3E%3Cpath d='M0,46 L0,26.3 L54.9,26.3 L94.3,24.2 L132.4,22.0 L187.2,26.1 L211.2,26.9 L254.7,27.2 L310.2,20.8 L368.2,16.8 L406.0,14.6 L428.4,9.7 L451.2,13.9 L478.1,22.5 L525.3,24.0 L582.7,26.3 L605.3,21.6 L639.5,20.3 L693.7,11.6 L745.8,17.8 L778.5,22.6 L803.4,8.8 L833.7,3.7 L890.3,3.7 L923.2,8.8 L973.9,16.5 L1000.0,15.1 L1000,46 Z' fill='%23000'/%3E%3Crect x='132.9' y='8.2' width='3.0' height='2.9'/%3E%3Crect x='577.8' y='3.6' width='3.1' height='1.8'/%3E%3Crect x='805.9' y='16.5' width='3.3' height='2.5'/%3E%3Crect x='419.9' y='6.7' width='4.0' height='2.7'/%3E%3Crect x='556.9' y='18.1' width='4.0' height='2.6'/%3E%3Crect x='105.8' y='18.6' width='1.7' height='1.5'/%3E%3Crect x='123.0' y='4.9' width='3.6' height='2.3'/%3E%3Crect x='128.4' y='5.4' width='3.8' height='1.8'/%3E%3Crect x='216.2' y='15.9' width='2.2' height='1.3'/%3E%3Crect x='519.9' y='14.7' width='1.4' height='2.4'/%3E%3Crect x='184.6' y='17.0' width='2.9' height='1.8'/%3E%3Crect x='335.9' y='3.2' width='1.5' height='2.2'/%3E%3Crect x='494.6' y='4.6' width='1.8' height='2.0'/%3E%3Crect x='920.1' y='2.8' width='3.5' height='3.1'/%3E%3Crect x='299.9' y='8.3' width='3.2' height='1.6'/%3E%3Crect x='29.0' y='4.4' width='4.3' height='2.0'/%3E%3Crect x='878.2' y='4.8' width='3.8' height='1.6'/%3E%3Crect x='363.9' y='14.9' width='4.6' height='3.2'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1000' height='46' viewBox='0 0 1000 46' preserveAspectRatio='none'%3E%3Cpath d='M0,46 L0,26.3 L54.9,26.3 L94.3,24.2 L132.4,22.0 L187.2,26.1 L211.2,26.9 L254.7,27.2 L310.2,20.8 L368.2,16.8 L406.0,14.6 L428.4,9.7 L451.2,13.9 L478.1,22.5 L525.3,24.0 L582.7,26.3 L605.3,21.6 L639.5,20.3 L693.7,11.6 L745.8,17.8 L778.5,22.6 L803.4,8.8 L833.7,3.7 L890.3,3.7 L923.2,8.8 L973.9,16.5 L1000.0,15.1 L1000,46 Z' fill='%23000'/%3E%3Crect x='132.9' y='8.2' width='3.0' height='2.9'/%3E%3Crect x='577.8' y='3.6' width='3.1' height='1.8'/%3E%3Crect x='805.9' y='16.5' width='3.3' height='2.5'/%3E%3Crect x='419.9' y='6.7' width='4.0' height='2.7'/%3E%3Crect x='556.9' y='18.1' width='4.0' height='2.6'/%3E%3Crect x='105.8' y='18.6' width='1.7' height='1.5'/%3E%3Crect x='123.0' y='4.9' width='3.6' height='2.3'/%3E%3Crect x='128.4' y='5.4' width='3.8' height='1.8'/%3E%3Crect x='216.2' y='15.9' width='2.2' height='1.3'/%3E%3Crect x='519.9' y='14.7' width='1.4' height='2.4'/%3E%3Crect x='184.6' y='17.0' width='2.9' height='1.8'/%3E%3Crect x='335.9' y='3.2' width='1.5' height='2.2'/%3E%3Crect x='494.6' y='4.6' width='1.8' height='2.0'/%3E%3Crect x='920.1' y='2.8' width='3.5' height='3.1'/%3E%3Crect x='299.9' y='8.3' width='3.2' height='1.6'/%3E%3Crect x='29.0' y='4.4' width='4.3' height='2.0'/%3E%3Crect x='878.2' y='4.8' width='3.8' height='1.6'/%3E%3Crect x='363.9' y='14.9' width='4.6' height='3.2'/%3E%3C/svg%3E")}

/* --- In their words ----------------------------------------------------------
   Tab's cards carry the quote, the credit and the label, so the section needs
   no heading of its own beyond one for the document outline. The track is
   scroll-snap, which means a swipe works with no script; the buttons and dots
   are the enhancement. One card holds the view with the next just showing, so
   it reads as a sequence rather than a single slide. */
.vslider{margin-top:clamp(8px,1.4vw,18px)}
.vtrack{
  display:flex;gap:clamp(14px,1.8vw,26px);
  margin:0 calc(-1 * var(--pad));padding:4px var(--pad) clamp(18px,2.2vw,28px);
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-padding-left:var(--pad);
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.vtrack::-webkit-scrollbar{display:none}
.vcard{
  flex:0 0 auto;margin:0;scroll-snap-align:start;
  width:min(680px,84%);
}
.vcard img{
  width:100%;height:auto;display:block;border-radius:4px;
  box-shadow:0 20px 50px rgba(13,11,7,.18);
}

/* the film stays, smaller, under the cards */
.vfilm{margin:clamp(30px,4vw,54px) auto 0;max-width:420px;text-align:center}
.vfilm video{
  width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;
  border:7px solid #fff;border-radius:3px;background:var(--ink);
  box-shadow:0 20px 50px rgba(13,11,7,.2);
}
.vfilm figcaption{
  margin-top:14px;font-size:13px;line-height:1.5;color:var(--stone-deep);
}
.vfilm figcaption b{color:var(--ink)}

/* Her quote is vector text inside a 3:2 card, so its size is set by the card's
   width. One card nearly fills a phone, and the track's gutter narrows with it,
   to buy back every pixel available. */
@media (max-width:760px){
  .vtrack{padding-left:16px;padding-right:16px;scroll-padding-left:16px;margin:0 -16px}
  .vcard{width:min(680px,94%)}
}

/* The two lines close the philosophy, and the button is what you do about it,
   so it sits with them rather than floating off on its own. */
.philo-cta{margin-top:clamp(22px,2.8vw,36px)}

/* --- the words on Tab's testimonial cards -------------------------------------
   They were vector text inside the SVG, which Safari will not render at all
   when the file is loaded through <img>, and which at phone width put her
   credit line near six pixels. They are live now, positioned over her torn
   panel from her own coordinates: --x and --y are percentages of the card,
   --s is the type size as a share of the card's width, so the whole
   composition holds together at any size the slider gives it. */
.vcard{position:relative;container-type:inline-size}
.vcard figcaption{position:absolute;inset:0;pointer-events:none}
.v-label,.v-quote,.v-credit{
  position:absolute;left:calc(var(--x) * 1%);top:calc(var(--y) * 1%);
  margin:0;color:#101010;
}
.v-label{
  font-weight:700;text-transform:uppercase;line-height:1;
  font-size:calc(var(--s) * 1cqw);letter-spacing:var(--ls,.26em);
}
.v-quote{
  right:9%;font-size:calc(var(--s) * 1cqw);line-height:1.26;font-weight:500;
}
.v-quote b{
  display:block;font-weight:700;line-height:1.1;margin-bottom:.22em;
  font-size:calc(var(--lead) / var(--s) * 1em);
}
.v-credit{
  right:12%;font-style:normal;font-weight:700;line-height:1.2;
  text-transform:uppercase;font-size:calc(var(--s) * 1cqw);letter-spacing:var(--ls,.037em);
}

/* Under 760 the card is about 315px, and type pinned to that width lands at
   10px with a 5px credit, which is the same trap the vector text was in. Her
   composition cannot hold the words at that size, so on a phone the artwork
   steps back and becomes the ground: taller crop, and the quote sits on a panel
   of its own at a size that is set in pixels, not in card widths. */
@media (max-width:760px){
  .vcard img{aspect-ratio:4/5;object-fit:cover;object-position:52% 26%}
  .v-label{
    left:6.5%;top:5.5%;font-size:10px;letter-spacing:.22em;
    background:#F4F0E7;padding:6px 10px;
  }
  .v-quote{
    left:5%;right:5%;top:auto;bottom:21%;
    background:#F4F0E7;padding:16px 16px 14px;
    font-size:15px;line-height:1.38;
  }
  .v-quote b{font-size:1.15em;margin-bottom:.3em}
  .v-credit{
    left:5%;right:5%;top:auto;bottom:7.5%;
    background:var(--yellow);padding:9px 12px;
    font-size:10px;letter-spacing:.05em;line-height:1.35;
  }
}

/* ==========================================================================
   ONE SCALE FOR THE SMALL PARTS
   Six arrow sizes and four different specs for what is really the same label
   had accumulated. These are the tokens, and everything that was drifting is
   pulled onto them.
   ========================================================================== */
:root{
  --go:48px;        /* a circular arrow that performs the page's action */
  --go-sm:44px;     /* a utility arrow: paging, stepping, nothing committed */
  --arrow:12px;     /* the inline arrow that rides inside a button */
  --eyebrow:11px;   /* the label above a heading, and anything of its rank */
}

/* --- arrows -------------------------------------------------------------- */
/* Size is one of two. Colour carries the meaning: yellow and electric purple
   for something that takes you somewhere, plain ink for paging about inside
   what you are already looking at. */
.go{width:var(--go);height:var(--go);font-size:19px;flex:none}
.go.purple{background:var(--purple);color:#fff}
.go.open{background:transparent;border:2px solid currentColor}
.hero-cue .go,.scard-cta{width:var(--go);height:var(--go);font-size:19px}
.car-btn{width:var(--go-sm);height:var(--go-sm);font-size:16px}
.arrow{font-size:var(--arrow);line-height:1}
/* It was set at 1em, which put a 62px arrow beside a 62px headline and had the
   two shouting over each other. It is a mark, not a second word. */
.arrowhead{font-size:.5em;vertical-align:.14em;margin-left:.3em}
.res-go,.panel-go{
  font-size:var(--eyebrow);font-weight:700;letter-spacing:.14em;text-transform:uppercase;
}

/* --- the small-label rank ------------------------------------------------ */
/* .annot, the mission and vision headings, the card labels and the resource
   links were all the same thing wearing four different specs. */
.annot,.mv h4,.v-label,.black .mv h4{
  font-size:var(--eyebrow);font-weight:700;letter-spacing:.28em;
  text-transform:uppercase;line-height:1.3;
}
.v-credit{font-size:12px;font-weight:700;letter-spacing:.04em;line-height:1.2}
figcaption,.belief-by,.vfilm figcaption{font-size:13px;line-height:1.5}

/* --- and what should stand out ------------------------------------------- */
/* The buttons are the loudest small element on the page, because they are the
   only ones asking for anything. */
.btn{font-size:12.5px;letter-spacing:.14em}
.btn-lg{font-size:13.5px}

/* --- the slider, made to handle ---------------------------------------------
   Grab anywhere and pull. Releasing lands on a card rather than wherever the
   hand stopped, the snap is mandatory so it never rests between two, and the
   track takes focus so the arrow keys work. */
.vtrack{cursor:grab;scroll-behavior:smooth}
.vtrack.is-dragging{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto}
.vtrack.is-dragging *{pointer-events:none}
.vtrack:focus-visible{outline:3px solid var(--yellow);outline-offset:4px}
.vcard{user-select:none;-webkit-user-drag:none}
.vcard img{pointer-events:none}

/* the controls read as one unit, and the ends tell you they are ends */
.vslider .car-foot{align-items:center;gap:clamp(10px,1.2vw,16px)}
.car-btn{transition:background .2s,color .2s,opacity .2s,transform .2s var(--ease)}
.car-btn:hover:not(:disabled){background:var(--ink);color:var(--paper);transform:translateY(-2px)}
.car-btn:disabled{opacity:.28;cursor:default}
.car-dot{transition:transform .25s var(--ease),background .25s}
.car-dot.on{transform:scale(1.5)}

/* --- Marco's film, beside the philosophy ------------------------------------
   It sits under the collage in the right-hand column, which puts it to the
   right of and below the two lines that close the left one. */
.belief-side{display:flex;flex-direction:column;gap:clamp(22px,2.6vw,38px)}
@media (max-width:880px){
}

/* ==========================================================================
   ABOVE THE FOLD
   Her hero used to be one SVG carrying a photograph, two fonts and the
   headline as vector text, loaded through <img>. Safari does not apply
   @font-face in that context, so the headline rendered in whatever the system
   had at her metrics; and nothing inside an <img> can be animated.
   It is three things now: the photograph as an ordinary cached image, her type
   as a small inline SVG over it, and the fonts here, shared by both builds.
   ========================================================================== */
@font-face{font-family:IEIHeadline;src:url(data:font/woff2;base64,d09GMgABAAAAABdkABEAAAAALswAABcEAAIdsgAAAAAAAAAAAAAAAAAAAAAAAAAAGkYbgXocgXgGYACBLgiBPgmcDBEICq4EqDIBNgIkA4FUC2wABCAFg0oHIAyBYRtiKgVy0025HUBS0ZohijKp2Qf/Xw44GZHQ+0DVTSjeqKwTi68ysfn1EXy5LGq0Vi0oClHCE15FOY1jJdpz/oQvcwzHwYABve/Xa3v/BRahDHcstvh71O909b5X6JzqaQGEEOg2Q4VgAoypxFCHMRLP/T+d5f9DkkYExrXHK8ukOWTdzgGBvPD6pAIsueqP61Sp01VpY4kum5ndtTm5AEOL4FfKlCffcwfqI1cP5TI2SfbCwaMilunaw0ZibQrpebzdSyaQJtj+jALyoId32zsj1wUZpm82RjRGwwPhWf9mJkm3qRbUgW73rK7Q9vhNLg52Buhm19Dmmx0mvPtGlAeCX72g/gco1w3Ppy0FrEKkwFd+Knu0ATKgjhI+OyQFtb71FbWLervqaU0XHpjnkAqktCvffYD+3mbavvd3Nbd3ZydRKgAsSoLOk6Khpvn7dr+0f3fFB6vV3dmSfBlbRsmEgskoiCUgSDLqzFyHuE/RuynTpuhSV+jvLdeQItqDzF8gsdSTb69tGU6rM333YJIA1cvMgAB4aH6qBDmIERATmAAxhWkQM1iAsIglECtYBbGObRAHOARxjHMQBEBiHafQ/fvWI7i7iX9+QxVuNIDvmYVWLq6rIgzgsWjIUyUmuY5zJCiIJGotCbdulW9dSzI28qFn0ISOQXNu68Q+rXFdZi6NArSMQL9KKzce4iBoCIHOoMQd1PBIBR0j4EhWtIAu43IQyQ+9gTEHUicjmewZhXfymHSKd8FUCoUUTUredm1RVXUliX7fpfNJ9wcv9JNbFVlZR/GQrhTBMO59VpNUtqmxZZhEA0UmA4aJnO5683ScRDNkkwV9KPFMGEynVvQgcqiCGWw4Oeeqjz//Y6IhMPxmjopkdax6rXsWRu+i/Qk8pi0pn2SJukFzbcE2VS1ubuCb0vnOvvyqExx95XPRY/UtxgMn/fkzEvTp0VBEkPHYn0AyERQn6eznMqOYQAXTWcByamikmaAFpKO5yEjGM5npzGcRK6mjmYCFB6wVX5kzY8pwWLNhzZtLAIlkN9IQqKBYkX8exmfhTD6FZ/kgh2jczjVpHHr6PtAJMTdB7/cx4gEj3/qAiXW241ln6RcQTe+NSzpD2oKmPc44pR9R2WtX2C7gK0/9YvHQf5Z5/oTXYM0mh7P/BseTo1k9GYBfLaAV8Dh0osjLEQSTXiIefg4cHbB4noZSP34GqcqfNtjsDHTXWAs8B4y2G0BM8g7UqHboIFqtWgfVUh3Q7OKYb5EaSclnkrV8rqiBmPf7gleWTWmVFezefkMIMckz2btuzeImyMe3rsuuSH2TYhpppcC9sBebAsmFgRXRmtyEwkehEM6dNVIJfxvY7HOzQN90Bh3E5WChVdz5ErqKTf1Mce/eV7LZJDkJJp98HiVTtqxYZAF5jB20Dw7A39PJUOrf13MgZTJsFbElYMfhuJdi7GkDqfDMAHgQgJssLbZMZqPS0c1yFMEguJYRh+0YqzKCdYxPAnEHKYz66OBaOgKrykqwTD9glR5bpo21H+vNtw4Rd16gLmRr2wuI/HaNH/TmIdpVFr6yLs9ILXb5Hdb5IK9gs+2Q+qbciUGjjULzMIC1wUfY1NJhaRyz0AABfbB3ySm9ClBulZDtIbgDtlgrh6PF6QaBGYwYbAvAftNGaCq1m5VJ3TgBmI6ftxkEbnlGuZ6ytWOtgIFVSTp1uZYq6kkYEDMNNaCJnAetgm5b113x5SSYDiNU7SAgzw7Zge8BHdYP1qiN89YR6kzIZXbXbUekwVaE0LyQpM94pY8mDeIDjLKOWAMjOquUEYOdulwTmyR1qzR3gq4y0S/fh8x22/EO/p7uG5CO3w4v3x0Txq6U9JyZzpCYD1ai2oNrT1xHwEAqn8MOo7nBQgVa9f0Ux1JY5evflf5stLLaHxpyDRsQXRqXCZHQ9JY86WYF0mqhcsQM8CrboAHOf0DE8yHL9VgGMux9ICm9dAhKj18iWi/ppNsdhxjOg/ceCcg2GFznzK75ox7cjo5CZ8hrR0czhC4j0GMU+ozBgHEYMgEbzIIRs2HMnKFaaxqaItqX74NKAb6eNHxZr0EdhfrVpfd1zNSv3zalxwjrcMeD66Mj1WVh4gQVbqLCEhVOUWGFCmeocI4KF6hwiQpXqPL7taxmLhwoTnRbaem806I2hy37Szd+UIesemWtwNtySIv0JKk5LRd1hq+d0TYowGHzkMuBuFx4rTi0yhzzTrgXg3WPxKl21vxRLY8DGDymx+o7uWzaB2uXqn/fFopPAMBZ18V8FPOQ35bjWlalF4YHGP4dOU7o4vKq4yRPHAzofXOf0plAUUmx8IFy0kx4Xv9+tRSFUsKuWXw3ovTNScT8wrzjtAaKd51lglWtAV919mAL1yzs1ftLkdX65HQ5Z1JS7KcKovRCvtAuLXM398MBU9PKqMJsuh/9gjtJGqlLQU+7iZ/IQIKgRc/cnBowkyqFm7Jaz8dMaeAmHSqKpkuVoZFn2i0XjSJNF1IhjbEHTdLZWksNyKSz8KqUFcE+bGYNqyRVYkFdyuSt0XEWEylmL5/Vnq4uejrOpZBsVpdIOyUzep7F8MpEnBuXeBQKWVVrwsexAqckjajg7Z7/hjHJrFr0Iml2mfvRC3cjCeLCt0+o2mEfotprtMYJTS5X3TGhb3ZikNVY5IOYLYQue3HMHdO/8y0VNQu+bKM5XWue/pLmTF2rDZXaQ6xP8hQhTMHBQbicgqJM3VkCvBJvbcaArpb2Dkuhi2aKr+gsWeXpNs/tv0SvmCk0Ws6ev6qLxpZNr43uwtUhOF2jI69Bvum12ougwrHA624+/pMNTHTrvK0dX12ZGxNu6gw4m+BEyd7SnDqG2yuC4rJKId26XKOWvKMzm7v0uaK7upEowxdoWBDvAiZYkAzKCEyxIN0FzLCKs/pAGFIxpwT5bmBBCYpHi8CSEpS7gRUlu2oah7EaNVDvAjZY0AzKSHRY0OoCtllOxz0cyrpGC71uYF/JGdRU41AJRt3AsdK0ic56iXSmgwmspTrDmD2PvtGgbS0cEVhhGUBZBYB1v7Zy3Kgbt+p2d1+hDXsELTwIIBwDwKlfoxbP6uBFHXTVwauo4RYA7gHkgzoOPtWDL/XgWz34ETV8A8AvQP6vm+gv3G0n78Z3qWFBrbEx+gVCH/H091ftyW4MpH/KeaDbG66Ytw9A9R0DtC8QLNDo2Wl2LFosgYEQ+IS6Mw4ykYFQIxikwF1JSR2aHch8xJEr0qkqL4bKcVvbmeUsyzSwmgbjPltw8rGfsemSpW/knjcasI34P8WVH8fPwWWyhcAA+wzWac5sQdSA43Yq/ELxUttU41YzyHb7dSHWs7IG8qtFq3PLF13zaMJ2/W2H7m3qTrV+zbyNQq5bFfCUSw4b0nTDu2HO4ASEyUmm8tIpXc86zas5dFeA3WYayA40kumQCkINaOuvk5IkZcYuwZo3J6kHMmraN5ec+voj0wit+MIaq3p3VgkX7ia3r4v1tPYKIk2o8m5Kp84useYtePxJhFM5895whFhVhGQNjB4jQhxh8ts6d4ewuwIpFEdQcctr4dC1NttZMkRJYq5jKgniTF7eQ6nq9VSynaK1dabf/Hgc/BI44FUA7OdIyQ4fQLzqLl9fT0OoSOuoPhJriXhf1Xgyw6ujy8776F2Bvoxfxi8JbHQz3kkH/ILnlI5zorD50ECQTeyyl91UiAc8AtCF52kA5EozbPEpMpNJVL7eVlOdodWG+D1+Tj6E/ib9PYe98LfTTmzpCnsmxIMtbgtV9LyIMZdjViz7HIavXeQab6YCvTitX7i0Pgwu+zgwv4A++Dy6zstzXgy0iCuMJF8/nkg3F005YiGnSgwJDZYMmJJ9iItMtCBdqfFE+gzkHA+nPOBaErLIyDPfVA41cWkerN5OH0bFZ15te1HwQh0lRLR0LLAHYwgQHa5ApvDIb910iBC78vCNL1PNrgc+1qYH44REKfyiKlot2rW1XEpWAHTH1m/emrs+LoFcaycYJW5z5+n+q1Z3YT0z3tREXdRce9RnbkbX9bFb0+6MUSKidP9hBj/3fP3iaHsxsAfuXb02M3gqX20Ow4QopLq00aVQ0354iZzppStuli8O/tPHyKbt+Wr57Peev4bA2406V1ydCsiPRsJggGbfeO1IFuYW5aEk1a8LcyK7Ip3eJ0p0peahqvRKO4GhsII1a4z54AZMY1M1IXIfwWvbrn0cumvLwba25O0a+pHaHOvb1NunWZEz7bAwI2XRX01y9q1xKncqS0z6PaSwXHppPnX2o5ZPhssCcl6CabP3f/3WfA+epLw33nC400/OQEXNGI2RDLByM9RtrBzpur7zn8M/ndqD2JbEymVnFQbJy8MI3Xvf/bo45cproR9TQiuesu46nUw3+VTvkPQecMvf5z7A7RW/lVhsNOEIDWaM0m8ijPYTdmO5DxxVDycwR79l03prwuFvKkNWn7viSUdXnCvOgTvjSX1ZMrg6LVx1NyVX+63rgsMU7prXxVqbuNk5MCWEPzj77GnLIj6oMy7aY0x4drT7VX4lSVPFtlHiGDvy6o1jTSA5kChFbgkAoDv8HVKTIxwCy2Oobz6qR81c5/dT4IJgMNYMJxh0/qJwCMYMIxxSEP5q0Ou1yChpzy/yfrQ+NGdwINOse4Oh7zf1mzkuCFwWa34pM/L9pQWDcdT7AyMcJLEdZv5XNItPdHNECmrKYPyitSW8tC+Ku16MXshh0OmJ9EIqvAafWYzGPHza/vR4+3/v9ARuqSHMmfksFtKw86IuViUehB7sox/qwIXFfXuTYEZwRRV9PMo3V5db1+vTp7phYnczmCW3yPJa8RtnojbTL6vga9RuaTm6zjKdiAsklyMf/cw/3fPS4ErRWM2Z9d6R7kHuPPjeQIDRsF7davvVW/OPVSEgtIQtNP7piLjWmQDQHTW1YlOibWwaCtdfTPcLUC8szhkurla79OcFw4FUBi/bLQGVBRi3LJG9hai7naCg3QKW1xnCH9zOvdsm8d533xd8Ihx4RHce6jlDgjPDXUPskrDC+nDTIAvvxCw/rYVVJp5WpWawCo8lTNvTSlXAURU+68EjZIm8B2LJMq8vIMa1oWC5O9PVRUnWTAnhw+JFSmJ/gyv/zqAcvXJ2TR5Git3pN1HKCmiNu+l4fPrdzgpoZeOfgGj3t5DbHD2T5xdShh6uwwPnYxOMAkyEH60uzAXphRQ2BsBOHmEtI5JtCSu+hf5u4Yp0Vw9FpVgeeym+eNNHni/Wmn1GNANKVpFuGJeBpTJbQ8f6/NS47r1JURPjYnUXlCVwyhY2mL93W73NCg5fp5y4WxUP3usRl9ztye2JckCpXcbJJ8oIyX4ZTxRA+4AtSe7KYy2OPpp2okZa58XcraU9vd+QFmmfk63HU4fvTheoZi5juAIJKi1G8OPQYou8E4B+P4Vx9xQY8ufjAVgSp4p7cp4EHWrDtMjGltsLyYnHE13hYrcF3Z8uErv+RYD3jgd7GQoIAYBFV6IABtnc+PaGJlpCR2WwUh1uWQUEZU8RFJeBY+EHBZQuANgk6Kn340W+zc0tHx5FD3XSU3Bewxe+H2hEtlGigw2C6PoFcO4LN5GXeAecDCnSkTgWcqZuLjgYWkUWanCEK34Thj73Ahbd2U8q+EOqPmCy1C8HZa+TxtDD8Iotp+rmJMjCFJ3lFv5JGFuMdw1yDJLAJb6GhfleJ4l8L0uwTGXJybqZ6vTAVVTFIT6fJ5EjW+GGQC8Mc9lPjHykQ4t+NuKSUwFclCMPviXnlM9PuNF/OnnevAiZXVK4U0iMEt0lQGEjVO+CE5tKYGNyJJv1dUnqUgf5SBLz+NWtgp2ZU0KrvsFjiBgfDbphdzquZp1MO+igPC3Dv1kRTEyQ03AwU2QwhrGx/sTiS9x855tfM4XtZvg/TEF9ssJawu4aXBEeqKaCP3R2/eZMkyIsLfR7nVza4dhjnYrpRgQBrJqxlxExUSiM+xOKLIZKVa0NvWE3D8cYUy7tPhSR66PsPIGkHMXk9Esqi9Ggp9nIRpPtuflubJ417rpDQgsIoaYGkVmzxaDVGMSg/mH0ttVjW4xAq0R7t9S5Cv7QousfpJlCh0F+WYfQ49XrTBRPt7wzWQ4HfMko9EsscWwLx6eTGcOsoIe+RLoDi29CofExQrdwmOMT18VtozG0qX4GBl6a08B4eZvKRCfjBnMzqcqUJ9OEjxtlYmubfIhsJopzPtbR22QoI+5n1jf/ebdhnjUxj1WWDsZC/xlI9527itCzO0K8wt9hAD+4Z0K8V1OoqwioJFXgCNUojoS+rKM1qCCdZmySRkJv7I5BVIYOQ9gl+1IYannWdH42U7mKwqAusiKmuvS9cE4zgA4/3hf7ToLvcwMPgrbxDLhMbp0FeegnmbDVq2EgpsiIayujjW4nSwI/TzHPYZrmOeOgabiQOizNE5FvhChjx5wI4ieuh57bzpdhfKLcFO1mJT0UVlIRpJygN/XxcjyE4FptDIih32RirZhXpsPOtWYpaF5+3ex3QEdt254aI2yuj2tVD/qdPJjLj1vkyMnto2jllwz6ONwBqOjnvnxaqYC1VxALOVvj3aSZAxgpEJWB6+bLUgs5wFJPkxBAYSziV9iUzBxhJtuETfXXc/mZIFGM1rQNxL84Bd1EM1mIYsq1TpnN22mYbZlq+pYQE5ICD5+C00TbM8X6WraZTcvYkQv1Z4pBehMwCKYuehEzoxEAM7/KQDy7fnGEYxreii7nUbtVLcdGvI7fsThKltXKpDHQI3E1IywIh+kKjZrWGuC6b0Gz22gEVDhVHc7ztmRpAuhPJ+N0DCMY2SxjG+frx36NgNpLhCKpCIfJBMI2b72MiVEKPSCiI07BabxxHqoRcvgWi86lyiHxT3c5j7T21LYeXx2Pl/No9CMszve6ReZYbtjivNqkcykKjiMkakiCCTpJXAkT8SdhF7dnGvo1lS+LPFsJxk6yWJXm+ZwAYlMaWXSKbkERFLpgUkRjBpV9B7jq5iYY5fPmSDHCSC8MyjwJjDPLpsLUFWb5LMZFhrs6gXNPkmRoSeUwqYJgNuRPBjVPy5oFAQ/uyOjJRGyllAIhhJJy7Akw0tir5lJo/vbixU5g+gIBAZnyXtbV+76aC/Y9a3vCANjsvwH2fVeCvHbFKLctAAwkAAL+DxQ3WkKa9Zx25U2jbuoa49UuUlWrPvV3BqpT1pgD2ecS/9BfXcE9+M8OvatQFZKp3+ilviVO3cdU2yjQFGNFVOsh7JFJH11Vf3GYIeoAfWV/Ftoq6jSqoKVTK8feqw6jVHMwUq6mrzjFcLGLiM6hjjJSXNGMiE51deJF+mrKOqWVHuJbIk3+9CNTf5AndoCsJUNdY6h+n3L1jnAVyxAEuqGhdIYhKaflTuBhtxOFAGzMQCE0O/AWoDMFJm+dKXHzyZmKcv45UyOR/87UGS7Cd88g8Qz6j13pGTiZKMkpWEBoFEojvgam6YAuIHs1EfFkArKyZWxRBFdZEM+FGQRzNp3lANMeWWRyymDxSoQkzk5ryp7SOQ072TXkMlgvXzPyMCPSmerZSPpNSnI9y7whExqJKtIWn9Ipe673h+5A5KUDl4fIP6TncctQ+RUc5PkyGeGTy56d8nxEcot+vBKHRMfeQQqmucVrhzKWPeYT/nfI1l3zzn6wbFeTWYNP/vDoPoZPRsAKrnXz1MPZm1Nn5g7MzKcGM0J+2fLF9N0JM3Nsqp6YTE0b4w/+n8N5OI2HxAISt0J6X2gEUdufQIGTp/jr9jOaX59h2GULf2RDJWcumjzn6X7Zv4yhFu/beeSgZgc2Tz2evj1xbubQ1HJiY0oEqxH+nwn7KxNn6QHfnYFLbQAA)}@font-face{font-family:IEIBody;src:url(data:font/woff2;base64,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)}svg .hh{font-family:IEIHeadline,Impact,sans-serif;fill:#faf5e9}svg .hb{font-family:IEIBody,Arial,sans-serif;fill:#faf5e9}

.hero-graphic{padding:0;background:#080808}
.hero-frame{position:relative;line-height:0}
.hero-stage{position:relative;aspect-ratio:var(--vw) / var(--vh);background:#080808}
.hero-stage img{width:100%;height:auto;display:block}
.hero-type{position:absolute;inset:0;width:100%;height:100%}
.hero-d{display:block}
.hero-m{display:none}
@media (max-width:767px){
  .hero-d{display:none}
  .hero-m{display:block}
  /* her phone build sits the photograph in the lower 44% of the frame */
  .hero-m img{position:absolute;left:0;top:55.8%;height:44.2%;object-fit:cover}
}

/* --- the title, arriving ------------------------------------------------- */
/* Three blocks: the two headline lines, the yellow line, the subcopy. Each
   rises and fades a beat after the one before. It runs once on load, because a
   hero that re-animates every time you scroll back is a hero you start to
   resent. */
@keyframes hero-line{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.hero-type text{
  opacity:0;transform-box:fill-box;transform-origin:left center;
  animation:hero-line .82s var(--ease) forwards;
  animation-delay:calc(.18s + var(--i) * .13s);
}
/* The cue's own rules went with the old hero block when it was cut, so it is
   written out again here rather than left inheriting ink on black. */
.hero-cue{
  position:absolute;left:4%;top:78.75%;
  display:inline-flex;align-items:center;gap:clamp(9px,1vw,15px);
  white-space:nowrap;text-decoration:none;color:var(--yellow);
  font-weight:800;text-transform:uppercase;letter-spacing:.16em;line-height:1;
  font-size:clamp(9px,.86vw,13px);
  opacity:0;animation:hero-line .7s var(--ease) .72s forwards;
}
@media (max-width:767px){
  .hero-cue{left:6%;top:47.3%;font-size:11px;gap:12px}
  .hero-cue .go{width:48px;height:48px;font-size:21px}
}

/* --- parallax ------------------------------------------------------------ */
/* The artwork drifts up slower than the page and dims as it leaves, so the
   section below arrives over it rather than shunting it off. Scroll-driven,
   so it costs no script and nothing runs when the hero is off screen. */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .hero-frame{
      animation:hero-park linear both;
      animation-timeline:view();
      animation-range:exit -10% exit 100%;
    }
    @keyframes hero-park{
      from{transform:translateY(0) scale(1);opacity:1}
      to{transform:translateY(-14%) scale(1.04);opacity:.15}
    }
  }
}
@media (prefers-reduced-motion: reduce){
  .hero-type text,.hero-cue{opacity:1;animation:none}
}

/* ==========================================================================
   4 OCT PASS
   ========================================================================== */

/* The whole headline takes the yellow now, not just the last two words. Her
   file painted that last line in a slightly different yellow, which once the
   rest went yellow read as a mistake; the colour is a class now so there is one
   yellow and one place that decides it. */
/* Half and half: the first lines keep her cream, the last line takes the
   yellow. The accent sits on whatever element carried her colour, which is a
   tspan on the wide build and the whole line on the phone one. */
svg .hh{fill:#faf5e9}
svg .accent,svg .hh.accent{fill:var(--yellow)}

/* The margin note was set at the small-label size and kept being read as one.
   It is a voice, so it is sized like one. */
.note-lg{font-size:clamp(20px,2.6vw,34px);max-width:12ch;line-height:1.02}

/* About IEI and Our Philosophy open their sections, so they are not eyebrows.
   The rest of the .annot rank is untouched. */
#about .about-head .annot,
#philosophy > .wrap > .annot{
  font-size:clamp(14px,1.5vw,19px);letter-spacing:.2em;color:var(--ink);
}
.black #about .about-head .annot{color:var(--yellow)}

/* In their words, with the film that comes just before it kept close. */
.voices-head{margin-bottom:clamp(18px,2.2vw,30px)}
#philosophy{padding-bottom:clamp(26px,3vw,46px)}
#voices{padding-top:clamp(26px,3vw,46px)}

/* The light bulb banner runs the full width of the screen. cover keeps the
   frame filled at any ratio without stretching the artwork; her torn top and
   bottom are what make the crop invisible. */
#bulb{padding:clamp(34px,4.4vw,70px) 0}
#bulb .band-art{margin:0;max-width:none;line-height:0}
/* full width of the screen, and cover rather than a stretch, so the artwork
   keeps its own proportions whatever the viewport does */
#bulb .band-art img{width:100%;height:auto;object-fit:cover;object-position:center}

/* The resource tiles hold square artwork, so the frame is square too. It was
   16:9, which left the cards floating in a letterbox. */
.res-art{aspect-ratio:1/1;padding:clamp(20px,3vw,34px)}
.res-art img{width:46%}
.res-art.is-dl{aspect-ratio:1/1}

/* ==========================================================================
   MOBILE FIRST, WHERE IT COUNTS
   Most of the page already reflows. These are the places where a phone was
   still being handed a desktop decision.
   ========================================================================== */
@media (max-width:760px){
  /* bands were carrying desktop air on a 375px screen */
  .band{padding:clamp(54px,11vw,86px) 0}
  .band.tight{padding:clamp(38px,8vw,60px) 0}

  /* headings were clamping to a floor set for a wider measure */
  .h2{font-size:clamp(27px,8.4vw,40px)}
  .h1{font-size:clamp(32px,10vw,50px)}
  .lede{font-size:clamp(1rem,4.4vw,1.14rem)}
  .note-lg{font-size:clamp(17px,5.4vw,24px);max-width:14ch}

  /* a single column reads better than two squeezed ones */
  .res-grid{grid-template-columns:minmax(0,1fr)}
  .mv{gap:clamp(20px,5vw,30px)}

  /* the banner gets more height back, since it is the only thing on screen */
  #bulb .band-art img{max-height:none}

  /* full-width buttons stop the thumb hunting for a 180px target */
  .philo-cta .btn,.wall-foot .btn{width:100%;justify-content:center}
}

/* The title opens the section across the full measure, and the poster and the
   lede sit under it as a pair rather than the title being stacked beside the
   artwork in a narrow column. */
.about-head{margin-bottom:clamp(26px,3.4vw,48px)}
.about-head .say-h{margin-top:12px}
#about .carousel{align-items:center}
#about .lede{max-width:46ch;margin:0}

/* The philosophy opens the same way About IEI does: label and title across the
   measure, then her collage and the copy underneath it. */
#philosophy .about-head{margin-bottom:clamp(24px,3vw,40px)}
#philosophy .about-head .h2{margin-top:12px}

/* The two lines and Marco's film close the philosophy together, out of the
   column that holds the collage, so the film sits beside the words rather than
   hanging 280px below them. */
.philo-close{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(26px,4vw,60px);align-items:center;
  margin-top:clamp(30px,4vw,56px);
}
.philo-close .pull{margin-top:0;padding-top:0;border-top:0}
@media (max-width:880px){
  .philo-close{grid-template-columns:minmax(0,1fr);align-items:start}
}

/* --- the quote cards, smaller and centred ---------------------------------- */
/* They were running 680px, which made one card most of the screen. Her torn
   panel is centred in the artwork, so the words sit centred on it. */
.vcard{width:min(540px,82%)}
.v-quote,.v-credit{text-align:center}
.v-quote{left:8%;right:8%}
.v-credit{left:10%;right:10%}
@media (max-width:760px){
  .vcard{width:min(540px,94%)}
  .v-quote,.v-credit{left:5%;right:5%}
}

/* One cover per resource, filling its square rather than a fan of three cards
   floating in the middle of the tile. */
.res-art{display:block;padding:0;overflow:hidden}
.res-art > img{
  width:100%;height:100%;object-fit:cover;object-position:center;
  margin:0;border-radius:0;box-shadow:none;transform:none;
  transition:transform .45s var(--ease);
}
.res:hover .res-art > img{transform:scale(1.04)}
.res-art.is-dl{display:flex}

/* --- 4 Oct, second pass --------------------------------------------------- */
/* Your Vision Deserves A Brand takes the yellow; the rest of the line stays
   cream. Which words those are is decided in _hero_split.py by content, since
   the two builds break the headline in different places. */
svg .hh{fill:#faf5e9}
svg .hh.accent,svg .accent{fill:var(--yellow)}

.hero-cue{font-size:clamp(11px,1.05vw,15px);letter-spacing:.17em}

/* Marco's film and the button that follows it make the right of the closing
   row; the two lines hold the left on their own. */
.philo-side{display:flex;flex-direction:column;align-items:flex-end;gap:clamp(16px,2vw,26px)}
.philo-side .philo-cta{margin-top:0;width:260px}
.philo-side .philo-cta .btn{width:100%;justify-content:center}
@media (max-width:880px){
  .philo-side{align-items:flex-start}
  .philo-side .philo-cta{width:260px}
}

/* smaller again: one card should read as a card, not as the section */
.vcard{width:min(420px,76%)}
@media (max-width:760px){.vcard{width:min(420px,92%)}}

/* the downloads tile carries no artwork, so its words have to do that work */
.res-art.is-dl{font-size:clamp(30px,4.6vw,56px);line-height:.9}

/* the banner runs straight into the footer */
#bulb{padding-bottom:0}

/* Her credit sits on a yellow bar painted into the artwork: 9.5% to 91% across
   and 65.9% to 75.6% down. One credit is 66 characters and cannot fit that on a
   single line at a readable size, and a second line falls off the bar onto the
   dark collage where ink text disappears. So the credit carries its own plate
   in her bar's own yellow, sampled from the file. On a one-line credit it lands
   exactly on the painted bar and is invisible; on a two-line one it extends it. */
.v-credit{
  left:9.5%;right:9.5%;top:65.9%;line-height:1.3;
  background:#FDC603;padding:1.1% 2% 1.3%;
  display:flex;align-items:center;justify-content:center;min-height:9.69%;
}

/* --- 4 Oct, third pass ---------------------------------------------------- */

/* Marco's film sits in the middle of its column and takes more of it. */
.philo-side{align-items:center}
.philo-side .vfilm{max-width:340px;width:100%}
.philo-side .philo-cta{width:340px;max-width:100%}
@media (max-width:880px){
  .philo-side{align-items:flex-start;margin-top:clamp(22px,5vw,34px)}
  .philo-side .vfilm{max-width:300px}
  .philo-side .philo-cta{width:300px}
}

/* --- the quote, centred on her panel --------------------------------------
   The graphics do not need remaking. The words are live HTML now, so they can
   sit wherever they read best. Her torn panel runs 27.4% to 65.6% down every
   card, measured off the files, so the quote is centred inside that band
   rather than hung from a baseline her export happened to use. */
.v-quote{
  top:27.4%;bottom:34.4%;left:8%;right:8%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;
}
.v-quote b{display:block;width:100%}

/* and one card holds the middle of the screen, rather than the row starting
   hard against the left edge */
.vtrack{scroll-snap-type:x mandatory;justify-content:safe center}
.vcard{scroll-snap-align:center}

/* --- joins ---------------------------------------------------------------- */
/* testimonials run into the resources */
#voices{padding-bottom:clamp(20px,2.4vw,34px)}
#resources-teaser{padding-top:clamp(24px,3vw,44px)}
/* and the banner into the footer. The footer is not a sibling of the section,
   so this asks the page whether it ends on the banner; its own 90px of air was
   reading as space under her artwork. */
body:has(#bulb) footer.site{padding-top:clamp(18px,2.2vw,34px)}

/* The page ground is cream with ink text, so the footer, which is black, has to
   say what colour it is. It never did: Start Here was ink on near-black and
   effectively invisible. */
footer.site{color:var(--paper)}
.foot-mega{color:#fff}
.foot-mega:hover{color:var(--yellow)}
/* the words read, the arrow is the part that is actually asking */
.foot-go{font-style:normal;color:var(--yellow)}

/* the banner opens the About page, so it sits flush under the nav */
#bulb{padding:0}
#bulb .band-art{margin:0;max-width:none;line-height:0}
#bulb .band-art img{width:100%;height:auto;object-fit:cover;object-position:center}

/* The nav styles its links with `.nav-links a`, which outranks `.btn` on
   specificity, so the Start Here pill was losing both the ink it should sit in
   and all of its horizontal padding: pale stone on yellow, with the words
   running into the rounded ends. */
.nav-links .btn{
  color:var(--ink);padding:10px 20px;border-bottom:0;
  letter-spacing:.14em;font-size:11.5px;
}
.nav-links .btn:hover,.nav-links .btn[aria-current="page"]{
  color:var(--ink);background:#FFDE4D;border-color:#FFDE4D;border-bottom:0;
}
.nav-links .btn .arrow{color:inherit}

/* Start Here was running to 150px at the foot of every page, which made it the
   loudest thing on the site. Still the biggest thing in the footer, just no
   longer shouting over the page above it. */
.foot-mega{font-size:clamp(34px,7.2vw,96px)}

/* --- resources ------------------------------------------------------------ */
/* Identity before image is the line the whole series rests on, so it leads the
   section from the left rather than hanging off the right of the heading. */
.being-note{display:inline-block;margin:14px 0 0}
#being .head-row,#brand-bars .head-row{display:block}
/* and the two paragraphs that carry the idea are set to be read */
.being-say{font-size:clamp(1.04rem,1.35vw,1.26rem);line-height:1.6;max-width:50ch}

/* The resources page closes on its own Clarity Call, so the footer's Start Here
   would be the second ask in a row. It stands down on that page only. */
.p-resources .foot-mega{display:none}

/* --- the philosophy, set to be read --------------------------------------- */
#philosophy .belief-flip .body{font-size:clamp(1.04rem,1.35vw,1.26rem);line-height:1.6}
#philosophy .belief-flip .body:first-of-type{margin-top:0}
#philosophy .echo{margin-top:clamp(14px,1.6vw,20px)}
#philosophy .echo li{font-size:clamp(1rem,1.25vw,1.18rem)}

/* --- add-ons --------------------------------------------------------------
   A table, because it is a table: three columns and seven rows of the same
   shape. On a phone each row stacks into a small card, with the column names
   carried by the cells rather than a header that has scrolled away. */
.addons{margin-top:clamp(26px,3vw,42px)}
.addons table{width:100%;border-collapse:collapse}
.addons thead th{
  text-align:left;font-size:var(--eyebrow);font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--stone-deep);
  padding:0 16px 12px 0;border-bottom:2px solid var(--ink);
}
.addons tbody th,.addons td{
  text-align:left;padding:16px 16px 16px 0;border-bottom:1px solid var(--line-i);
  vertical-align:top;font-weight:400;
}
.addons tbody th{
  font-family:var(--display);text-transform:uppercase;font-weight:400;
  font-size:clamp(16px,1.5vw,21px);line-height:1.1;width:34%;padding-right:24px;
}
.addons td{font-size:clamp(.92rem,1.1vw,1rem);line-height:1.5;color:#45403a}
.addon-price{
  white-space:nowrap;font-weight:800;color:var(--ink);text-align:right;
  padding-right:0;font-size:clamp(.92rem,1.1vw,1.02rem);
}
.addons thead th:last-child{text-align:right;padding-right:0}

@media (max-width:700px){
  .addons thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .addons tr{display:block;padding:16px 0;border-bottom:1px solid var(--line-i)}
  .addons tbody th,.addons td{display:block;width:auto;padding:0;border:0}
  .addons tbody th{margin-bottom:6px}
  .addons td{margin-top:4px}
  .addon-price{text-align:left;margin-top:8px}
}

/* --- Who we are, on Tab's composition --------------------------------------
   Her file is a 2:1 frame with the collage, the torn panels and the bulb as one
   raster and nineteen lines of live text over it. Her own note says it scales
   but does not reflow, and that is the trouble: at 375px her mission copy is 26
   of 1774 units, which is five and a half pixels. So the collage is an image
   and the words are HTML at her coordinates, held in place by a container
   query. Below 860 the frame steps back to being the ground and the words
   stack into something you can actually read. */
#who-we-are{padding:0;overflow:hidden}
.w-frame{position:relative;line-height:0;container-type:inline-size}
.w-frame img{width:100%;height:auto;display:block}
.w-type{position:absolute;inset:0;line-height:1.2}
/* Each single-line element carries --w, the width her file forces with
   lengthAdjust. HTML has no equivalent, so the line is given that width and
   squeezed onto it, which is what spacingAndGlyphs does. */
.w-label,.w-head,.w-sub,.w-body{
  position:absolute;left:calc(var(--x) * 1%);top:calc(var(--y) * 1%);
  font-size:calc(var(--s) * 1cqw);margin:0;white-space:nowrap;
}
.w-label,.w-head,.w-sub{
  width:calc(var(--w) * 1%);display:block;
  text-align:justify;text-align-last:justify;
}
.w-label{
  font-family:var(--display);text-transform:uppercase;color:#111;
  letter-spacing:.18em;line-height:1;
}
.w-head{
  font-family:var(--display);text-transform:uppercase;color:#f7f2e6;
  line-height:1;letter-spacing:-.005em;
}
.w-head:last-of-type{color:var(--yellow)}
.w-head.w-engine{background:#F4C900;color:#111;padding:0 .07em}
/* the yellow line is the last headline, not the highlighted word */
.w-head:last-of-type{color:#f7f2e6}
.w-head.w-last{color:var(--yellow)}
.w-sub{
  font-family:var(--display);text-transform:uppercase;color:#f7f2e6;
  line-height:1;letter-spacing:.01em;
}
.w-body{
  color:#111;white-space:normal;font-weight:500;
  /* her line pitch is 35 units on a 26-unit face; a percentage here resolves
     against the font size and collapses the lines onto each other */
  line-height:1.35;
}
.w-mission{width:20.2%}
.w-vision{width:19.6%}

@media (max-width:860px){
  /* the frame becomes the ground; the words leave it and stack */
  #who-we-are{padding:0 0 clamp(44px,9vw,72px)}
  .w-frame img{aspect-ratio:16/9;object-fit:cover;object-position:62% 40%}
  .w-type{
    position:static;display:block;padding:clamp(26px,7vw,40px) var(--pad) 0;
    line-height:1.3;
  }
  /* her forced widths belong to the fixed frame; off it they break the labels
     one word to a line */
  .w-label,.w-head,.w-sub,.w-body{
    position:static;white-space:normal;display:block;font-size:inherit;
    width:auto;text-align:left;text-align-last:auto;
  }
  .w-label{font-size:11px;letter-spacing:.28em;color:var(--yellow);margin-bottom:12px}
  .w-head{
    display:inline;font-size:clamp(28px,8.6vw,42px);line-height:1.02;color:#f7f2e6;
  }
  .w-head::after{content:" "}
  .w-head:last-of-type{color:var(--yellow)}
  .w-sub{
    font-size:clamp(17px,5vw,22px);color:var(--yellow);
    margin:clamp(26px,6vw,34px) 0 8px;
  }
  .w-body{
    color:#DBD5C8;font-size:clamp(15px,4.2vw,17px);line-height:1.5;width:auto;
  }
}

/* The official lockup closes the philosophy, under the two lines. It is inlined
   rather than linked: nine shapes, under a kilobyte, and the wordmark takes
   currentColor so it reads on whatever ground the section is. */
.iei-mark{
  width:auto;height:clamp(40px,4.4vw,62px);display:block;
  margin:clamp(26px,3.2vw,42px) 0 0;color:var(--ink);
}
.black .iei-mark,.ink .iei-mark{color:var(--paper)}

/* The logo closes the column, so it takes the room the column gives it. */
.iei-mark{height:clamp(54px,6.6vw,96px)}

/* Who We Are runs straight into About IEI. */
#about{padding-top:clamp(30px,3.6vw,58px)}

/* --- About: founder split, the seven chapters, values, the six moves ------- */
.about-split{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:clamp(28px,4vw,60px);align-items:start}
.about-split>img{border:1px solid var(--line-i);border-radius:14px}
@media (max-width:820px){.about-split{grid-template-columns:minmax(0,1fr)}
  .about-split>img{max-width:320px}}

.facts{margin-top:clamp(26px,3vw,38px);padding-top:24px;border-top:1px solid var(--line-i);
  display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.facts h4{font-weight:800;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--yellow-deep);margin:0 0 9px}
.facts p{margin:0;font-size:.93rem;line-height:1.56;color:#45403a}

.chapters .panel{position:relative;min-height:0;gap:10px}
.chap-n{font-family:var(--display);font-size:clamp(30px,3.4vw,46px);line-height:.9;
  color:var(--yellow);display:block}
.chapters .h3{font-size:clamp(16px,1.7vw,20px);line-height:1.12}

.sit{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,3vw,44px);
  margin-top:clamp(22px,2.6vw,34px)}
.sit>div{border-top:3px solid var(--line-w);padding-top:18px}
.sit>div:last-child{border-top-color:var(--yellow)}
.sit-k{display:block;font-weight:800;font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--stone)}
.sit-k.yel,.sit-v.yel{color:var(--yellow)}
.sit-v{display:block;margin-top:10px;font-family:var(--display);text-transform:uppercase;
  font-size:clamp(22px,3.2vw,42px);line-height:1}
@media (max-width:620px){.sit{grid-template-columns:minmax(0,1fr);gap:22px}}

.vals{margin:clamp(28px,3.4vw,44px) 0 0;display:grid;gap:0}
.vals>div{display:grid;grid-template-columns:minmax(0,.32fr) minmax(0,1fr);
  gap:clamp(16px,2.4vw,40px);padding:20px 0;border-top:1px solid var(--line-i)}
.vals>div:last-child{border-bottom:1px solid var(--line-i)}
.vals dt{font-family:var(--display);text-transform:uppercase;
  font-size:clamp(19px,2.3vw,30px);line-height:1}
.vals dd{margin:0;font-size:1.02rem;line-height:1.6;color:#45403a}
@media (max-width:620px){.vals>div{grid-template-columns:minmax(0,1fr);gap:8px}}

.moves{list-style:none;margin:clamp(28px,3.4vw,42px) 0 0;padding:0;display:grid;
  gap:clamp(12px,1.5vw,18px);grid-template-columns:repeat(auto-fit,minmax(252px,1fr))}
.moves li{display:flex;align-items:baseline;gap:14px;padding:18px 20px;
  background:var(--white);border:1px solid var(--line-i);border-radius:14px}
.moves b{font-family:var(--display);font-weight:400;font-size:clamp(20px,2.2vw,28px);
  line-height:1;color:var(--yellow-deep);flex:none}
.moves span{font-size:.97rem;line-height:1.45;font-weight:600}

/* Your Brand Is A Being: her words on the left, the artwork on the right. */
.being-split{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:clamp(28px,4vw,64px);align-items:center}
.being-split figure{margin:0}
.being-split img{width:100%;border-radius:14px}
@media (max-width:860px){.being-split{grid-template-columns:minmax(0,1fr);
  gap:clamp(22px,3vw,34px)}
  .being-split figure{order:-1;max-width:420px}}

/* The founder's hook, sitting with her name. */
.founder-hook{margin:18px 0 0;padding:4px 0 4px 20px;border-left:4px solid var(--yellow);
  font-family:var(--display);text-transform:uppercase;line-height:1.04;
  font-size:clamp(19px,2.3vw,30px);max-width:20ch}

/* The featured film in the Everything We Make band. */
.wall-film{margin:clamp(22px,2.8vw,34px) 0 0;max-width:520px}
.wall-film video{width:100%;display:block;border-radius:14px;background:#000}
.wall-film figcaption{margin-top:10px}

/* Joy's film is 9:16, taller than Marco's 3:4, so it gets a narrower column. */

/* --- Our Work: the client grid -------------------------------------------- */
.brands{display:grid;gap:clamp(16px,2vw,26px);margin-top:clamp(30px,3.6vw,48px);
  grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.brand{display:flex;flex-direction:column;margin:0;padding:clamp(14px,1.5vw,18px);
  background:var(--ink-2);border:1px solid var(--line-w);border-radius:16px;
  transition:border-color .3s,transform .3s var(--ease)}
.brand:hover{border-color:var(--yellow);transform:translateY(-3px)}
.brands{align-items:start}
.brand.is-wide{grid-column:span 2;display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  grid-template-rows:auto auto auto 1fr;
  column-gap:clamp(14px,1.6vw,22px);align-content:start}
.brand.is-wide .brand-lead{grid-column:1;grid-row:1/-1;align-self:start}
.brand.is-wide .brand-strip{grid-column:2;grid-row:1;margin-top:0}
.brand.is-wide .brand-name{grid-column:2;grid-row:2;margin-top:14px}
.brand.is-wide .brand-kind{grid-column:2;grid-row:3}
.brand.is-wide .brand-go{grid-column:2;grid-row:4;margin-top:14px}
@media (max-width:760px){.brand.is-wide{grid-column:span 1;display:flex}
  .brand.is-wide .brand-strip{margin-top:6px}}

.brand-lead img,.brand-lead video{width:100%;height:auto;display:block;
  border-radius:10px;background:#000}
.brand-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:6px;margin-top:6px}
.brand-strip img{width:100%;display:block;border-radius:6px;opacity:.82;
  transition:opacity .3s}
.brand:hover .brand-strip img{opacity:1}

.brand-name{font-family:var(--display);text-transform:uppercase;line-height:1.02;
  font-size:clamp(18px,2vw,26px);margin:16px 0 0;color:var(--paper)}
.brand-kind{margin:8px 0 0;font-size:.88rem;line-height:1.5;color:#b9b3a5}
.brand-go{margin-top:auto;padding-top:14px;display:inline-flex;align-items:center;
  gap:8px;font-weight:800;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--yellow);text-decoration:none;word-break:break-word}
.brand-go:hover{text-decoration:underline}

/* --- Our Work showcase: one brand, then its work scrolling sideways ------- */
.showcase{margin-top:clamp(26px,3.2vw,42px);display:flex;flex-direction:column;
  gap:clamp(34px,4.4vw,64px)}
.show{margin:0}
.show-head{display:flex;align-items:flex-end;justify-content:space-between;
  gap:18px;flex-wrap:wrap;padding:0 var(--pad)}
.show-name{font-family:var(--display);text-transform:uppercase;line-height:1;
  font-size:clamp(26px,4vw,54px);margin:0;color:var(--ink)}
.show-kind{margin:8px 0 0;font-size:.92rem;line-height:1.5;color:var(--stone-deep);
  max-width:46ch}
.show-go{flex:none;font-weight:800;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink);text-decoration:none;
  border-bottom:2px solid var(--yellow);padding-bottom:4px;white-space:nowrap}
.show-go:hover{background:var(--yellow)}
.show-track{display:flex;gap:clamp(10px,1.2vw,16px);overflow-x:auto;
  margin-top:clamp(16px,1.8vw,24px);padding:0 var(--pad) 6px;
  scroll-padding-left:var(--pad);
  scrollbar-width:none;overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;cursor:grab}
.show-track::-webkit-scrollbar{display:none}
.show-track.is-dragging{cursor:grabbing;scroll-snap-type:none}
.show-track img{flex:0 0 auto;width:min(68vw,330px);height:auto;display:block;
  border-radius:12px;
  box-shadow:0 14px 34px rgba(13,11,7,.14)}
@media (max-width:620px){.show-track img{width:76vw}}

/* The Offerings close: the line on the left, the ask on the right. */
.close-row{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  gap:clamp(24px,3.4vw,56px);align-items:center}
.close-ask{text-align:right}
@media (max-width:800px){.close-row{grid-template-columns:minmax(0,1fr)}
  .close-ask{text-align:left}}

/* Brand Bars runs into Your Brand Is A Being, no dead band between them. */
#brand-bars{padding-bottom:clamp(30px,3.6vw,56px)}
#being{padding-top:clamp(30px,3.6vw,56px)}

/* --- In their words: the two films share a line ---------------------------- */
#voices .films{display:flex;flex-wrap:wrap;justify-content:center;
  align-items:flex-start;gap:clamp(18px,2.6vw,46px);
  margin-top:clamp(20px,2.6vw,34px)}
#voices .films .vfilm{margin:0;max-width:100%}
#voices .films video{height:clamp(290px,34vw,420px);width:auto;max-width:100%;
  aspect-ratio:auto;object-fit:contain;border:0;border-radius:10px;
  background:#0d0b07;box-shadow:0 8px 26px rgba(13,11,7,.09)}
#voices .films figcaption{margin-top:12px;font-size:12px;color:var(--stone-deep)}
#voices .films figcaption b{font-weight:800;letter-spacing:.01em}
@media (max-width:620px){#voices .films video{height:auto;width:100%}}
/* the slider follows the films directly */
#voices .vslider{margin-top:clamp(22px,2.8vw,36px)}

/* --- the quote lifts in as its card scrolls across ------------------------- */
.vcard .v-quote,.vcard .v-credit{transition:opacity .5s var(--ease),transform .5s var(--ease)}
@media (prefers-reduced-motion:no-preference){
  .anim .vcard:not(.seen) .v-quote{opacity:0;transform:translateY(10px) scale(.985)}
  .anim .vcard:not(.seen) .v-credit{opacity:0;transform:translateY(8px)}
  .vcard.seen .v-credit{transition-delay:.12s}
}

/* --- Who We Are: the lines arrive one after another ------------------------ */
@media (prefers-reduced-motion:no-preference){
  #who-we-are .w-label,#who-we-are .w-head,#who-we-are .w-sub,#who-we-are .w-body{
    transition:opacity .6s var(--ease),transform .6s var(--ease)}
  .anim #who-we-are:not(.lit) .w-label,.anim #who-we-are:not(.lit) .w-head,
  .anim #who-we-are:not(.lit) .w-sub,.anim #who-we-are:not(.lit) .w-body{
    opacity:0;transform:translateY(12px)}
  #who-we-are.lit .w-head:nth-of-type(1){transition-delay:.06s}
  #who-we-are.lit .w-head:nth-of-type(2){transition-delay:.12s}
  #who-we-are.lit .w-head:nth-of-type(3){transition-delay:.18s}
  #who-we-are.lit .w-head:nth-of-type(4){transition-delay:.24s}
  #who-we-are.lit .w-head:nth-of-type(5){transition-delay:.30s}
  #who-we-are.lit .w-sub{transition-delay:.30s}
  #who-we-are.lit .w-body{transition-delay:.38s}
}

/* --- Start Here: the two doors --------------------------------------------- */
.doors{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(14px,1.8vw,24px)}
@media (max-width:760px){.doors{grid-template-columns:minmax(0,1fr)}}
.door{display:flex;flex-direction:column;gap:12px;text-decoration:none;color:inherit;
  background:var(--ink);border:1px solid rgba(250,245,234,.16);border-radius:16px;
  padding:clamp(24px,3vw,38px);transition:border-color .3s,transform .3s var(--ease)}
.door:hover{border-color:var(--yellow);transform:translateY(-3px)}
.door-h{font-family:var(--display);text-transform:uppercase;line-height:1.02;
  font-size:clamp(23px,2.8vw,36px);color:var(--paper)}
.door p{margin:0;font-size:.97rem;line-height:1.58;color:#b9b3a5}
.door-go{margin-top:auto;padding-top:14px;font-weight:800;font-size:11px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--yellow)}

/* The what-is-inside list on an offering's own page. */
.offer-list{list-style:none;margin:0;padding:0;display:grid;gap:0}
.offer-list li{padding:14px 0 14px 28px;border-top:1px solid var(--line-i);
  position:relative;font-size:1rem;line-height:1.5}
.offer-list li:last-child{border-bottom:1px solid var(--line-i)}
.offer-list li::before{content:"";position:absolute;left:2px;top:22px;
  width:10px;height:2px;background:var(--yellow)}

/* --- Our Work: the designer's graphic, live text on top -------------------- */
.ourwork-hero{background:#080808}
.ow-stage{max-width:none}
.ow-type g,.ow-type text{animation:hero-line .7s var(--ease) both;
  animation-delay:calc(.08s * var(--i, 0) + .1s)}
@media (prefers-reduced-motion:reduce){.ow-type g,.ow-type text{animation:none}}
.ow-d{display:block}
.ow-m{display:none}
@media (max-width:760px){
  .ow-d{display:none}
  .ow-m{display:block}
  /* the collage sits under the headline, the way the handoff asks for */
  .ow-m img{position:absolute;left:0;top:41%;height:59%;object-fit:cover}
}

/* --- the brand tracks drift, and an image pops out when clicked ------------ */
.show-track img{cursor:zoom-in}
.show-track.is-dragging img{cursor:grabbing}

.popout{position:fixed;inset:0;z-index:120;display:none;place-items:center;
  background:rgba(8,8,8,.86);padding:clamp(18px,5vw,56px);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.popout.is-open{display:grid}
.popout figure{margin:0;max-width:min(92vw,560px);text-align:center;
  animation:pop .26s var(--ease) both}
@keyframes pop{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
.popout img{width:100%;height:auto;display:block;border-radius:14px;
  box-shadow:0 30px 80px rgba(0,0,0,.6)}
.popout figcaption{margin-top:14px;font-weight:800;font-size:11px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--paper)}
.popout-x{position:absolute;top:clamp(12px,2vw,24px);right:clamp(12px,2vw,24px);
  width:46px;height:46px;border-radius:50%;border:1px solid rgba(250,245,234,.3);
  background:transparent;color:var(--paper);font-size:20px;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center}
.popout-x:hover{background:var(--yellow);color:var(--ink);border-color:var(--yellow)}

/* Offerings: the ladder runs straight into the add-ons, no dead band. */
.p-our-offerings .band.warm:has(#growth){padding-bottom:clamp(26px,3.2vw,46px)}
#add-ons{padding-top:clamp(26px,3.2vw,46px)}
/* Tab asked for the Start Here block off this page, same as Resources. */
.p-our-offerings .foot-mega{display:none}
.p-our-offerings footer.site{padding-top:clamp(18px,2.2vw,34px)}
/* Tab asked for the Start Here block off Organizations too. */
.p-for-organizations .foot-mega{display:none}
.p-for-organizations footer.site{padding-top:clamp(18px,2.2vw,34px)}
/* Brand Bars sit on the same five columns as the lessons underneath. */
#brand-bars .res-grid{gap:14px;align-items:end}
#brand-bars .res-grid .pin{width:100%}
#brand-bars .res-grid img{width:100%;height:auto}
/* the note rides next to the heading rather than under it */
#add-ons .head-row{align-items:center;gap:clamp(14px,2vw,30px)}

/* --- the form on Start Here ------------------------------------------------ */
.cform{display:flex;flex-direction:column;gap:18px}
.cf-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
@media (max-width:620px){.cf-row{grid-template-columns:minmax(0,1fr)}}
.cf-field{display:flex;flex-direction:column;gap:8px}
.cf-field>span{font-weight:800;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--stone)}
.cf-field input,.cf-field select,.cf-field textarea{
  font-family:var(--sans);font-size:1rem;color:var(--paper);background:#141414;
  border:1px solid rgba(250,245,234,.2);padding:14px 15px;width:100%;border-radius:0;
}
.cf-field textarea{resize:vertical;min-height:140px;line-height:1.55}
.cf-field input:focus,.cf-field select:focus,.cf-field textarea:focus{outline:none;border-color:var(--yellow)}
.cf-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.cf-foot{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:6px}
@media (max-width:900px){.org-split{grid-template-columns:minmax(0,1fr)!important}.voices2{grid-template-columns:minmax(0,1fr)!important}}