/* ============================================================
   VARIANT B — "Signal"
   Bold · kinetic · dark · colour-forward (brandbook accent panels)
   Mega uppercase Mont display · marquees · grid · full-bleed colour
   ============================================================ */
@import url("../shared/tokens.css");
@import url("../shared/components.css");

:root{
  --bg:#08080a;
  --bg2:#0f0f12;
  --fg:#ffffff;
  --muted:#8a8a94;
  --line:rgba(255,255,255,.13);
  --accent:var(--orange);
  --card:#111114;
  --radius:0px;
  --chip-radius:0px;
}

body{background:var(--bg);color:var(--fg);font-size:18px;line-height:1.55}
.wrap{width:100%;max-width:1560px;margin-inline:auto;padding-inline:clamp(20px,4.5vw,72px)}
.section{padding-block:clamp(80px,11vw,180px)}
.hr{height:1px;background:var(--line);border:0;margin:0}

/* faint engineering grid */
.gridbg{position:relative}
.gridbg::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:100% 25%,25% 100%;opacity:.5;-webkit-mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent)}
.gridbg>*{position:relative;z-index:1}

/* ---------- Type ---------- */
.tag{display:inline-flex;align-items:center;gap:.6em;font-size:.74rem;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:var(--muted)}
.tag .br{color:var(--accent);font-weight:800}
.tag.solid{background:var(--accent);color:#000;padding:.5em 1em;border-radius:0;letter-spacing:.2em}

.mega{font-weight:900;line-height:.86;letter-spacing:-.04em;text-transform:uppercase;margin:0}
.m1{font-size:clamp(3.2rem,12vw,13rem)}
.m2{font-size:clamp(2.6rem,8vw,8rem)}
.m3{font-size:clamp(2rem,5vw,4.4rem)}
.outline{color:transparent;-webkit-text-stroke:2px var(--fg);text-stroke:2px var(--fg)}
.outline.acc{-webkit-text-stroke-color:var(--accent);text-stroke-color:var(--accent)}
.thin{font-weight:200;text-transform:none;letter-spacing:-.02em}
.accent{color:var(--accent)}
.lead{font-size:clamp(1.1rem,1.7vw,1.5rem);font-weight:300;line-height:1.5;color:#c7c7d0;max-width:46ch}
.measure{max-width:60ch}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:.7em;font-weight:700;font-size:.92rem;letter-spacing:.04em;text-transform:uppercase;padding:1em 1.6em;border:1.5px solid transparent;border-radius:0;cursor:pointer;transition:transform .25s var(--ease),background .25s,color .25s,border-color .25s}
.btn .arw{transition:transform .3s var(--ease)}
.btn:hover .arw{transform:translateX(4px)}
.btn-primary{background:var(--fg);color:#000}
.btn-primary:hover{background:var(--accent);color:#000}
.btn-accent{background:var(--accent);color:#000}
.btn-accent:hover{transform:translateY(-2px)}
.btn-ghost{background:transparent;color:var(--fg);border-color:rgba(255,255,255,.4)}
.btn-ghost:hover{border-color:var(--fg);background:rgba(255,255,255,.06)}
.btn-dark{background:#000;color:#fff}
.btn-dark:hover{background:#1a1a1f}
.arrowlink{display:inline-flex;align-items:center;gap:.55em;font-weight:700;font-size:.86rem;letter-spacing:.08em;text-transform:uppercase;color:var(--fg);transition:gap .25s,color .25s}
.arrowlink:hover{gap:.9em;color:var(--accent)}
.arrowlink svg{width:1.05em;height:1.05em}

/* ---------- Marquee ---------- */
.marquee{overflow:hidden;border-block:1px solid var(--line);padding-block:1.1rem;white-space:nowrap}
.marquee .track{display:inline-block;animation:scrollx 28s linear infinite}
.marquee:hover .track{animation-play-state:paused}
.marquee span{font-size:clamp(1.4rem,3vw,2.6rem);font-weight:800;text-transform:uppercase;letter-spacing:-.01em;padding-inline:1.2rem}
.marquee .dot{color:var(--accent)}
@keyframes scrollx{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marquee .track{animation:none}}

/* ---------- Nav ---------- */
.nav{position:sticky;top:0;z-index:60;background:transparent;transition:background .3s,border-color .3s;border-bottom:1px solid transparent}
.nav.scrolled{background:rgba(8,8,10,.85);backdrop-filter:blur(14px);border-color:var(--line)}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:2rem;height:84px}
.brand{display:flex;align-items:center;color:var(--fg)}
.brand svg{height:26px;width:auto}
.nav-links{display:flex;gap:1.9rem;list-style:none;margin:0;padding:0;align-items:center}
.nav-item{position:relative;display:flex;align-items:center}
.nav-item>a{display:inline-flex;align-items:center;gap:.4em;font-size:.8rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#d4d4dc;transition:color .2s}
.nav-item>a:hover,.nav-item.is-active>a{color:var(--accent)}
.caret{width:0;height:0;border-left:3.5px solid transparent;border-right:3.5px solid transparent;border-top:4px solid currentColor;opacity:.6;transition:transform .25s var(--ease)}
.nav-item.has-dd:hover .caret,.nav-item.has-dd:focus-within .caret{transform:rotate(180deg)}
.dropdown{position:absolute;top:100%;left:-14px;min-width:218px;background:#0d0d10;border:1px solid var(--line);padding:.5rem;display:grid;gap:.1rem;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .22s var(--ease),transform .22s var(--ease),visibility .22s;box-shadow:0 24px 50px -24px rgba(0,0,0,.7);z-index:70}
.dropdown::before{content:"";position:absolute;top:-12px;left:0;right:0;height:12px}
.nav-item.has-dd:hover .dropdown,.nav-item.has-dd:focus-within .dropdown{opacity:1;visibility:visible;transform:none}
.dropdown a{display:block;padding:.62rem .8rem;font-size:.74rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#c4c4cc;transition:background .2s,color .2s}
.dropdown a:hover,.dropdown a[aria-current="page"]{background:rgba(255,255,255,.06);color:var(--accent)}
.nav-cta{display:flex;align-items:center;gap:1rem}
.burger{display:none;background:none;border:0;cursor:pointer;flex-direction:column;gap:5px;padding:8px}
.burger span{width:24px;height:2px;background:var(--fg)}
@media(max-width:1080px){.nav-links{display:none}.burger{display:flex}.nav-cta .btn{display:none}}
.mobile-menu{position:fixed;inset:84px 0 auto 0;z-index:55;background:var(--bg);border-bottom:1px solid var(--line);display:none;flex-direction:column;padding:1rem clamp(20px,5vw,72px) 2rem}
.mobile-menu.open{display:flex}
.mobile-menu{max-height:calc(100dvh - 84px);overflow:auto}
.mobile-menu .mm-top{font-size:1.25rem;font-weight:800;text-transform:uppercase;padding:.65rem 0;border-bottom:1px solid var(--line)}
.mobile-menu .mm-sub{font-size:.84rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:.4rem 0 .4rem 1rem}
.mobile-menu .btn{margin-top:1rem;justify-content:center}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:92vh;display:flex;flex-direction:column;justify-content:center;padding-top:5vh;overflow:hidden}
.hero-wave{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0;opacity:.55}
.hero .wrap{position:relative;z-index:2;width:100%}
.hero .tag{margin-bottom:clamp(20px,3vw,34px)}
.hero h1{max-width:16ch}
.hero-sub{margin-top:clamp(26px,3vw,40px);font-size:clamp(1.1rem,1.7vw,1.5rem);font-weight:300;color:#c7c7d0;max-width:46ch;line-height:1.5}
.hero-actions{display:flex;flex-wrap:wrap;gap:1rem;margin-top:clamp(30px,4vw,48px)}
.scrollcue{position:absolute;bottom:24px;left:0;right:0;z-index:2}

/* ---------- Section head ---------- */
.shead{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap;margin-bottom:clamp(40px,5vw,72px)}
.shead .lead{margin-bottom:.4rem}
.idx{font-size:.8rem;font-weight:800;letter-spacing:.2em;color:var(--accent);display:block;margin-bottom:1.2rem}

/* ---------- Continuum colour panels ---------- */
.panel{padding-block:clamp(56px,7vw,104px);color:#fff;position:relative;overflow:hidden}
.panel-petrol{background:var(--petrol)}
.panel-coral{background:var(--coral)}
.panel-orange{background:var(--orange);color:#1a0f06}
.panel-grid{display:grid;grid-template-columns:auto 1fr auto;gap:clamp(20px,4vw,72px);align-items:center}
.panel .pnum{font-size:clamp(3rem,7vw,7rem);font-weight:900;line-height:.8;opacity:.42}
.panel .pname{font-size:clamp(2.6rem,7vw,6.4rem);font-weight:900;text-transform:uppercase;letter-spacing:-.03em;line-height:.9;margin:0}
.panel .pstep{font-size:.78rem;font-weight:800;letter-spacing:.22em;text-transform:uppercase;opacity:.8;margin:0 0 .8rem}
.panel .pdesc{font-size:clamp(1rem,1.3vw,1.2rem);max-width:42ch;margin:1rem 0 0;opacity:.92}
.panel .arrowlink{color:inherit}
.panel .arrowlink:hover{color:#000}
@media(max-width:880px){.panel-grid{grid-template-columns:1fr;gap:1rem}.panel .pnum{font-size:3rem}}

/* ---------- Numbers ---------- */
.nums{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.nums .cell{background:var(--bg);padding:clamp(28px,3vw,52px) clamp(20px,2vw,36px)}
.nums .n{font-size:clamp(3.4rem,7vw,7rem);font-weight:900;letter-spacing:-.04em;line-height:.85;font-variant-numeric:tabular-nums}
.nums .n .accent{color:var(--accent)}
.nums .l{margin-top:1.1rem;font-size:.92rem;color:var(--muted);max-width:18ch;text-transform:uppercase;letter-spacing:.06em}
@media(max-width:820px){.nums{grid-template-columns:1fr 1fr}}

/* ---------- Ventures (full-bleed colour blocks) ---------- */
.vblock{position:relative;overflow:hidden;border-top:1px solid var(--line)}
.vblock .vin{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(28px,4vw,72px);align-items:center;padding-block:clamp(48px,6vw,104px)}
.vblock .vtag{font-size:.78rem;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:var(--accent)}
.vblock h3{font-size:clamp(3rem,8vw,8rem);font-weight:900;text-transform:uppercase;letter-spacing:-.04em;line-height:.84;margin:.6rem 0 1rem}
.vblock .vpos{font-size:clamp(1.05rem,1.5vw,1.35rem);font-weight:300;color:#c7c7d0;max-width:36ch;margin-bottom:2rem}
.vblock .vrow{display:flex;gap:2.6rem;flex-wrap:wrap;margin-bottom:2rem}
.vblock .vrow div{max-width:22ch}
.vblock .vrow b{display:block;font-size:.72rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:.5rem}
.vblock .vrow p{margin:0;font-size:.92rem;color:#aeaeb8}
.vmedia{position:relative;aspect-ratio:1/1;overflow:hidden;background:#000;border:1px solid var(--line)}
.vmedia .visual{position:absolute;inset:0}
.vmedia .vmark{position:absolute;left:24px;bottom:22px;z-index:2;color:#fff;height:34px}
.vmedia .pwr{position:absolute;right:22px;bottom:24px;z-index:2;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.8)}
.vblock[data-acc="eilink"]{--accent:#3a93c4}
.vblock[data-acc="drl"]{--accent:#f0626f}
.vblock[data-acc="waverity"]{--accent:#f5853f}
@media(max-width:880px){.vblock .vin{grid-template-columns:1fr;gap:24px}.vmedia{order:-1}}

/* ---------- Steps (methodology) ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.stp{background:var(--bg);padding:clamp(28px,2.6vw,46px);min-height:300px;display:flex;flex-direction:column;transition:background .3s}
.stp:hover{background:var(--bg2)}
.stp .sn{font-size:clamp(2.6rem,4vw,4rem);font-weight:900;color:var(--accent);line-height:.8;margin-bottom:auto}
.stp h4{font-size:1.7rem;font-weight:800;text-transform:uppercase;letter-spacing:-.01em;margin:1.6rem 0 .6rem}
.stp p{margin:0;color:#aeaeb8;font-size:.98rem}
@media(max-width:820px){.steps{grid-template-columns:1fr}.stp{min-height:0}}

/* ---------- Examples scroller ---------- */
.scroller{display:flex;gap:1px;overflow-x:auto;scroll-snap-type:x mandatory;background:var(--line);border:1px solid var(--line);scrollbar-width:thin}
.case{flex:0 0 min(440px,82vw);scroll-snap-align:start;background:var(--bg);padding:0}
.case .ph{aspect-ratio:16/10;position:relative;overflow:hidden}
.case .ph .visual{position:absolute;inset:0}
.case .ctag{position:absolute;top:0;left:0;z-index:2;background:var(--accent);color:#000;font-size:.7rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;padding:.5em .9em}
.case .cbody{padding:clamp(22px,2vw,32px)}
.case h4{font-size:1.3rem;font-weight:800;line-height:1.15;margin:0 0 .6rem}
.case .meta{font-size:.8rem;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}

/* ---------- Work-with-us colour blocks ---------- */
.aud{display:grid;grid-template-columns:repeat(4,1fr)}
.aud-card{padding:clamp(26px,2.4vw,40px);min-height:320px;display:flex;flex-direction:column;color:#fff;transition:flex .3s}
.aud-card:nth-child(1){background:var(--petrol)}
.aud-card:nth-child(2){background:var(--coral)}
.aud-card:nth-child(3){background:#11516e}
.aud-card:nth-child(4){background:var(--orange);color:#1a0f06}
.aud-card .an{font-size:.78rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;opacity:.8}
.aud-card h4{font-size:clamp(1.8rem,2.4vw,2.4rem);font-weight:900;text-transform:uppercase;letter-spacing:-.02em;margin:.6rem 0 auto}
.aud-card p{font-size:.98rem;margin:1.4rem 0 1rem;opacity:.92}
.aud-card .arrowlink{color:inherit}
@media(max-width:980px){.aud{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.aud{grid-template-columns:1fr}.aud-card{min-height:0}}

/* ---------- Insights ---------- */
.insights{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.art{background:var(--bg);transition:background .3s}
.art:hover{background:var(--bg2)}
.art .ph{aspect-ratio:16/10;position:relative;overflow:hidden}
.art .ph .visual{position:absolute;inset:0}
.art .abody{padding:clamp(22px,2vw,32px)}
.art .atag{font-size:.74rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.art h4{font-size:1.3rem;font-weight:800;line-height:1.18;margin:.8rem 0 .6rem}
.art .meta{font-size:.8rem;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
@media(max-width:880px){.insights{grid-template-columns:1fr}}

/* ---------- CTA giant ---------- */
.cta{background:var(--accent);color:#000;text-align:left}
.cta h2{font-size:clamp(2.6rem,8vw,8rem);font-weight:900;text-transform:uppercase;letter-spacing:-.04em;line-height:.86;margin:0 0 2rem;max-width:16ch}
.cta-actions{display:flex;gap:1rem;flex-wrap:wrap}

/* ---------- Footer ---------- */
.footer{background:#000;color:#cfcfd6;padding-block:clamp(56px,7vw,96px) 2.2rem;border-top:1px solid var(--line)}
.foot-top{display:grid;grid-template-columns:1.6fr repeat(4,1fr);gap:2.4rem}
.foot-brand svg{height:30px;width:auto}
.foot-brand p{color:#8a8a94;font-size:.95rem;max-width:30ch;margin:1.4rem 0 1.4rem}
.foot-col h5{font-size:.74rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:#fff;margin:0 0 1.2rem}
.foot-col ul{list-style:none;margin:0;padding:0;display:grid;gap:.7rem}
.foot-col a{color:#9a9aa4;font-size:.92rem;transition:color .2s}
.foot-col a:hover{color:var(--accent)}
.foot-bottom{display:flex;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;margin-top:clamp(48px,6vw,80px);padding-top:1.8rem;border-top:1px solid var(--line);font-size:.82rem;color:#7c7c86;text-transform:uppercase;letter-spacing:.06em}
@media(max-width:980px){.foot-top{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.foot-top{grid-template-columns:1fr}}
.pwr-mark{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:#7c7c86}

/* ---------- About specifics ---------- */
.pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.pillar{background:var(--bg);padding:clamp(26px,2.4vw,44px);min-height:280px;display:flex;flex-direction:column}
.pillar .pn{font-size:clamp(2.4rem,3.4vw,3.4rem);font-weight:900;color:var(--accent);line-height:.8;margin-bottom:auto}
.pillar h4{font-size:1.4rem;font-weight:800;text-transform:uppercase;letter-spacing:-.01em;margin:1.4rem 0 .6rem}
.pillar p{margin:0;color:#aeaeb8;font-size:.95rem}
@media(max-width:980px){.pillars{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.pillars{grid-template-columns:1fr}.pillar{min-height:0}}
.team{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.member{background:var(--bg)}
.member .ph{aspect-ratio:4/5;position:relative;overflow:hidden;filter:grayscale(1) contrast(1.05);transition:filter .55s var(--ease)}
.member:hover .ph{filter:grayscale(0) contrast(1)}
.member .ph .visual{position:absolute;inset:0}
.member .mbody{padding:1.2rem clamp(16px,1.4vw,22px) 1.6rem}
.member h4{font-size:1.1rem;font-weight:800;margin:0 0 .2rem}
.member .role{font-size:.82rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
@media(max-width:860px){.team{grid-template-columns:1fr 1fr}}
.two{display:grid;grid-template-columns:.7fr 1.3fr;gap:clamp(28px,5vw,90px);align-items:start}
@media(max-width:860px){.two{grid-template-columns:1fr;gap:24px}}
.bigquote{font-size:clamp(1.8rem,4vw,3.4rem);font-weight:300;line-height:1.18;letter-spacing:-.02em;max-width:22ch}

/* ---------- Waverity specifics ---------- */
.modules{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.module{background:var(--bg);padding:clamp(26px,2.4vw,42px);min-height:280px;display:flex;flex-direction:column}
.module .mi{width:52px;height:52px;display:grid;place-items:center;background:var(--accent);color:#000;margin-bottom:auto}
.module h4{font-size:1.5rem;font-weight:800;text-transform:uppercase;letter-spacing:-.01em;margin:1.6rem 0 .6rem}
.module p{margin:0;color:#aeaeb8;font-size:.95rem}
@media(max-width:860px){.modules{grid-template-columns:1fr}.module{min-height:0}}
.perf{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.perf .p{background:var(--bg);padding:clamp(28px,3vw,52px) clamp(20px,2vw,36px)}
.perf .n{font-size:clamp(3.2rem,6vw,6rem);font-weight:900;letter-spacing:-.04em;line-height:.82;color:var(--accent);font-variant-numeric:tabular-nums}
.perf .l{margin-top:1rem;color:#aeaeb8;font-size:.95rem;max-width:24ch}
@media(max-width:760px){.perf{grid-template-columns:1fr}}

/* ---------- Contact form ---------- */
.contact-form{display:grid;gap:1.1rem}
.contact-form .frow{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
.contact-form label{display:grid;gap:.45rem;font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.contact-form input,.contact-form select,.contact-form textarea{font-family:inherit;font-size:1rem;font-weight:400;letter-spacing:0;text-transform:none;color:#fff;background:#111114;border:1px solid var(--line);border-radius:0;padding:.9em 1em;transition:border-color .25s}
.contact-form input::placeholder,.contact-form textarea::placeholder{color:#6c6c76}
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{outline:none;border-color:var(--accent)}
.contact-form .btn{justify-self:start;margin-top:.4rem}
.contact-form .formmsg{color:var(--accent);font-weight:700;font-size:.9rem;text-transform:uppercase;letter-spacing:.06em}
@media(max-width:560px){.contact-form .frow{grid-template-columns:1fr}}

/* ---------- Crossed diagonal marquee (scroll-driven, opposite directions) ---------- */
.xmarquee{position:relative;height:clamp(280px,34vw,500px);overflow:hidden;margin-block:clamp(20px,3vw,48px)}
.xm-strip{position:absolute;top:50%;left:-12%;width:124%;padding-block:clamp(.9rem,1.9vw,1.7rem);white-space:nowrap;overflow:hidden;will-change:transform}
.xm-strip.xm-dark{transform:translateY(-50%) rotate(-7deg);background:#0d0d10;border-block:1px solid var(--line);z-index:1}
.xm-strip.xm-solid{transform:translateY(-50%) rotate(7deg);background:var(--accent);z-index:2;box-shadow:0 30px 80px -30px rgba(0,0,0,.8)}
.xm-track{display:inline-flex;align-items:center;gap:.9em;will-change:transform;transform:translateX(-25%)}
.xm-track span{font-size:clamp(1.9rem,4.5vw,4.1rem);font-weight:900;text-transform:uppercase;letter-spacing:-.015em;line-height:1.1}
.xm-dark .xm-track span{color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.85)}
.xm-solid .xm-track span{color:#000}
.xm-track .xdot{font-weight:900;font-size:.6em}
.xm-dark .xm-track .xdot{color:var(--accent);-webkit-text-stroke:0}
.xm-solid .xm-track .xdot{color:#000}

/* ---------- Text fill-on-scroll (Services-style highlight) ---------- */
/* two text-clipped layers: dim base (full) + bright fill sized by --fill (JS-driven) */
.fill-reveal{
  --fill-to:#ffffff;
  --fill-dim:rgba(255,255,255,.14);
  background-image:linear-gradient(var(--fill-to),var(--fill-to)),linear-gradient(var(--fill-dim),var(--fill-dim));
  background-repeat:no-repeat;
  background-size:var(--fill,0%) 100%,100% 100%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.fill-reveal .accent{-webkit-text-fill-color:var(--accent);color:var(--accent)}
p.fill-reveal,.lead.fill-reveal{--fill-to:#c7c7d0;--fill-dim:rgba(255,255,255,.12)}

/* ---------- Big directional arrows ---------- */
.big-arrow{width:clamp(84px,10vw,150px);aspect-ratio:1;color:var(--accent);flex:0 0 auto;transition:transform .45s var(--ease)}
.big-arrow svg{width:100%;height:100%;fill:currentColor;display:block;transition:transform .45s var(--ease)}
.big-arrow.ba-dl svg{transform:rotate(135deg)}   /* down-left */
.big-arrow.ba-d  svg{transform:rotate(90deg)}    /* down */
.big-arrow.ba-ur svg{transform:rotate(-45deg)}   /* up-right */
.big-arrow.ba-dr svg{transform:rotate(45deg)}    /* down-right */
.big-arrow.ba-white{color:#fff}
.big-arrow:hover{transform:translate(6px,0) scale(1.04)}
.shead .big-arrow{align-self:flex-end;margin-left:auto}
@media(max-width:880px){.shead .big-arrow{display:none}}

/* real-logo tiles need a light card on the dark theme so coloured/dark logos stay legible */
.logos div{background:#f3f3f5}
.logos img{opacity:1}

/* reveal */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}