/* ==========================================================================
AVERRO TECHNOLOGIES — "ATELIER" DESIGN SYSTEM
Editorial-luxury direction on warm paper. Brand colours kept (indigo for
action, cyan for signal); the ground moved off pure white so ink and accent
both have somewhere to sit.
This file is keyed to the class vocabulary the existing pages already use,
so every page picks up the new look without markup surgery. Two conventions
carry most of the visual weight:
· Card surfaces get a hairline, a warm inset highlight and a wide, soft
ambient shadow — never a hard drop shadow.
· `.btn .arrow` is rendered as a circular icon well inside the button, so
the existing `→` markup becomes the
nested-icon CTA with no HTML change.
Motion rules held throughout:
· UI feedback stays under 300ms. Scroll reveals are longer by design —
that is content arriving, not the interface answering a click.
· Only transform / opacity / clip-path animate. Nothing touches layout.
· Custom easing only; the stock CSS curves are too weak to read as
intentional. Never ease-in on UI.
· Every hover is gated behind (hover:hover) so touch does not fire it.
========================================================================== */
/* Generated by fetch-fonts.mjs. Do not edit by hand -- edit the generator.
Latin subset, self-hosted. font-display:swap so text paints in the fallback
immediately and reflows once, rather than being invisible while the font
loads. A weight RANGE on a face means that file is a variable font covering
the whole range from a single download.
Both families are SIL OFL 1.1; see OFL.md. */
@font-face{
font-family:"Newsreader";
font-style:italic;
font-weight:400;
font-display:swap;
src:url("../fonts/newsreader-400-italic.woff2") format("woff2");
unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
font-family:"Newsreader";
font-style:normal;
font-weight:400;
font-display:swap;
src:url("../fonts/newsreader-400.woff2") format("woff2");
unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
font-family:"Schibsted Grotesk";
font-style:normal;
font-weight:400 700;
font-display:swap;
src:url("../fonts/schibsted-grotesk-var.woff2") format("woff2");
unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root{
--font-display:"Newsreader",Georgia,"Times New Roman",serif;
--font-sans:"Schibsted Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
--font-mono:ui-monospace,"Cascadia Mono",Consolas,"SF Mono",Menlo,monospace;
/* Ground: warm paper, not pure white. Ink: deep indigo-black, not #000 —
on a light page a pure-black slab reads as a hole punched in the sheet. */
--paper:#FBFAF7;
--bg:#FBFAF7;
--bg-2:#F4F1EB;
--surface:#FFFFFF;
--surface-2:#F4F1EB;
--card:#FFFFFF;
--ink:#14131A;
--heading:#14131A;
--text:#3D3B47;
--text-muted:#6B6875;
--muted:#6B6875;
--border:rgba(20,19,26,.09);
--border-strong:rgba(20,19,26,.16);
--hair:rgba(20,19,26,.09);
--hair-2:rgba(20,19,26,.16);
--primary:#4F46E5;
--indigo:#4F46E5;
--primary-2:#3730A3;
--accent:#0E7490;
--cyan:#0E7490;
--on-primary:#ffffff;
--grad:linear-gradient(120deg,#4F46E5 0%,#3730A3 55%,#0E7490 100%);
--glow:rgba(79,70,229,.24);
--ring:rgba(79,70,229,.55);
/* Ink blocks (footer, CTA bands, bleed statements). */
--ink-2:#1C1B24;
--on-ink:#FFFFFF;
--ink-muted:rgba(255,255,255,.62);
--ink-border:rgba(255,255,255,.13);
--accent-on-ink:#67E8F9;
/* Spacing scale: 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96. Use these, not stray px. */
--s-1:.25rem; --s-2:.5rem; --s-3:1rem; --s-4:1.5rem;
--s-5:2rem; --s-6:3rem; --s-7:4rem; --s-8:6rem;
/* Elevation: a tight shadow for the crisp edge plus a wide soft one for
atmosphere. One shadow alone reads as fog. */
--sh-1:0 1px 2px rgba(20,19,26,.04);
--lift-1:0 1px 2px rgba(20,19,26,.04), 0 8px 24px -12px rgba(20,19,26,.10);
--lift-2:0 2px 4px rgba(20,19,26,.04), 0 24px 56px -24px rgba(20,19,26,.16);
--lift-3:0 4px 8px rgba(20,19,26,.05), 0 48px 96px -40px rgba(20,19,26,.22);
--sh-2:var(--lift-1); --sh-3:var(--lift-2); --sh-4:var(--lift-3);
--card-shadow:var(--lift-1);
--inner-hi:inset 0 1px 0 rgba(255,255,255,.9);
--ease-out:cubic-bezier(.23,1,.32,1);
--ease-in-out:cubic-bezier(.77,0,.175,1);
--ease-drawer:cubic-bezier(.32,.72,0,1);
--r-lg:28px; --r-md:20px; --r-sm:12px;
}
/* ---------- Reset & base -------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
margin:0;font-family:var(--font-sans);font-size:1.0625rem;line-height:1.65;
background:var(--paper);color:var(--text);overflow-x:hidden;
-webkit-font-smoothing:antialiased;
}
/* ---------- Backdrop: the tesseract fall (home page only) -----------------
The canvas is fixed behind everything and paints --paper itself, so the body
must stop painting its own ground — a z-index:-1 element sits BEHIND the
body background and would otherwise never be seen. .has-backdrop is set by
main.js only when the canvas is actually in the page, so every other page,
and any browser where the script does not run, keeps the plain paper ground. */
#tunnel{position:fixed;inset:0;width:100%;height:100%;display:block;
z-index:-1;pointer-events:none}
body.has-backdrop{background:transparent}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:rgba(79,70,229,.16)}
/* Film grain. Fixed and pointer-events:none, so it never repaints on scroll. */
body::after{
content:"";position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.035;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* The particle-globe canvases belong to the previous direction. Atelier is
paper and ink; a WebGL-ish starfield fights it. Hidden here so the pages stay
valid even where the canvas element is still in the markup.
NOTE: this list is class selectors only. The tesseract backdrop is `#tunnel`
(an id) and is deliberately live again — see the backdrop block above. Do not
add `#tunnel` here. */
/* .scene / .tunnel-veil are gone from the markup and scene.js was deleted;
only .glowball survives, on the contact page's panel. */
.glowball{display:none!important}
/* Leaving the site is information, so mark it. */
a[target="_blank"]:not(.btn)::after{content:"\2197";margin-left:.25em;font-size:.85em;opacity:.6}
.socials a[target="_blank"]::after,
a[target="_blank"] .partner-logo::after,
.marquee a[target="_blank"]::after{content:none}
:focus-visible{outline:2px solid var(--primary);outline-offset:3px;border-radius:4px}
/* ---------- Type ---------------------------------------------------------- */
h1,h2,h3,h4,h5{color:var(--heading);margin:0 0 .45em;font-weight:400}
h1{font-family:var(--font-display);font-size:clamp(2.7rem,6.4vw,5.6rem);line-height:.98;letter-spacing:-.026em}
h2{font-family:var(--font-display);font-size:clamp(2rem,4.2vw,3.5rem);line-height:1.04;letter-spacing:-.021em}
h3{font-family:var(--font-sans);font-size:clamp(1.12rem,1.7vw,1.32rem);line-height:1.26;letter-spacing:-.015em;font-weight:600}
h4,h5{font-family:var(--font-sans);font-size:1rem;line-height:1.3;letter-spacing:-.01em;font-weight:600}
h1 em,h2 em{font-style:italic}
p{margin:0 0 1rem;color:var(--text-muted)}
strong,b{font-weight:600;color:var(--heading)}
.accent-text{color:var(--primary);font-style:italic;font-family:var(--font-display)}
h3 .accent-text,h4 .accent-text{font-family:inherit;font-style:normal}
.container,.wrap{width:min(1240px,90%);margin-inline:auto}
section{position:relative}
.section-pad{padding:clamp(4.5rem,10vw,8.5rem) 0}
.lead,.lede{font-size:clamp(1.04rem,1.5vw,1.26rem);color:var(--text);max-width:56ch;line-height:1.6}
.center{text-align:center}
.center .lead{margin-inline:auto}
.muted{color:var(--text-muted)}
.lbl{font-size:.86rem;color:var(--text-muted)}
.sep{color:var(--border-strong)}
.link-underline{border-bottom:1px solid currentColor;padding-bottom:1px}
/* Section micro-label: an index entry, not a second headline. */
.eyebrow{
display:inline-flex;align-items:center;gap:.5rem;
padding:.32rem .75rem;border-radius:999px;
background:rgba(79,70,229,.07);border:1px solid rgba(79,70,229,.14);
font-family:var(--font-sans);font-size:.72rem;font-weight:600;letter-spacing:.18em;
text-transform:uppercase;color:var(--primary);margin-bottom:1.3rem;
}
.center .eyebrow{justify-content:center}
/* ---------- Buttons ------------------------------------------------------- */
/* `.arrow` is styled as a circular well so the existing markup renders as the
nested-icon CTA. The glyph never sits naked beside the label. */
.btn{
display:inline-flex;align-items:center;gap:.7rem;cursor:pointer;
padding:.62rem .7rem .62rem 1.5rem;border-radius:999px;
font-family:var(--font-sans);font-size:.95rem;font-weight:600;letter-spacing:-.01em;
border:1px solid transparent;text-align:left;
transition:transform 180ms var(--ease-out),box-shadow 180ms var(--ease-out),
background-color 180ms var(--ease-out),border-color 180ms var(--ease-out),
color 180ms var(--ease-out);
}
.btn:active{transform:scale(.97)}
.btn .arrow{
width:32px;height:32px;flex:0 0 32px;border-radius:50%;
display:inline-grid;place-items:center;font-size:.9rem;line-height:1;
transition:transform 220ms var(--ease-out),background-color 180ms var(--ease-out);
}
.btn-primary{background:var(--ink);color:#fff;box-shadow:var(--lift-2)}
.btn-primary .arrow{background:rgba(255,255,255,.14)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--border-strong)}
.btn-ghost .arrow{background:rgba(20,19,26,.05)}
@media (hover:hover) and (pointer:fine){
.btn-primary:hover{transform:translateY(-2px);box-shadow:var(--lift-3)}
.btn-primary:hover .arrow{background:rgba(255,255,255,.24)}
.btn-ghost:hover{border-color:var(--ink);background:rgba(20,19,26,.03);transform:translateY(-2px)}
.btn:hover .arrow{transform:translate(3px,-1px) scale(1.06)}
}
/* Buttons sitting on an ink ground invert. */
.cta-band .btn-primary,.contact-band .btn-primary,.bleed .btn-primary{background:#fff;color:var(--ink)}
.cta-band .btn-primary .arrow,.contact-band .btn-primary .arrow{background:rgba(20,19,26,.08)}
.cta-band .btn-ghost,.contact-band .btn-ghost{color:var(--on-ink);border-color:var(--ink-border)}
.cta-band .btn-ghost .arrow,.contact-band .btn-ghost .arrow{background:rgba(255,255,255,.1)}
.card-link,.go{
display:inline-flex;align-items:center;gap:.5rem;
font-size:.88rem;font-weight:600;color:var(--primary);
}
.card-link .arrow,.go .arrow{width:auto;height:auto;background:none;flex:none}
@media (hover:hover) and (pointer:fine){
.card:hover .card-link .arrow,.go:hover .arrow{transform:translateX(4px)}
}
/* ---------- Header: floating glass island --------------------------------- */
/* Padding is fixed; the shrink-on-scroll is a transform on the pill. Animating
padding would relayout the whole bar on every scroll frame. */
.site-header{
position:fixed;top:0;left:0;right:0;z-index:100;padding:1.15rem 0;
background:none;border:0;
}
.site-header .nav{
position:relative;
width:min(1240px,92%);margin-inline:auto;
display:flex;align-items:center;justify-content:space-between;gap:1rem;
padding:.5rem .5rem .5rem 1.45rem;border-radius:999px;
background:rgba(251,250,247,.72);
border:1px solid rgba(255,255,255,.7);
box-shadow:var(--inner-hi),var(--lift-1);
transform-origin:top center;
transition:transform 320ms var(--ease-out),box-shadow 320ms var(--ease-out),
background-color 320ms var(--ease-out);
}
/* The blur lives on a pseudo-element, NOT on .nav itself. backdrop-filter makes
an element the containing block for its fixed descendants, and the mobile menu
is a `position:fixed; inset:0` child of this pill — with the filter on .nav it
resolved inset:0 against the pill and rendered as a 357x128 box with seven
links spilling out over the hero. On the pseudo-element the glass looks
identical and the menu gets the viewport back. */
.site-header .nav::before{
content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;
backdrop-filter:blur(18px) saturate(1.5);
-webkit-backdrop-filter:blur(18px) saturate(1.5);
}
.site-header.scrolled .nav{
transform:translateY(-8px) scale(.975);
background:rgba(251,250,247,.9);
box-shadow:var(--inner-hi),var(--lift-2);
}
/* Fixed header needs the page pushed clear of it. */
body{padding-top:0}
.hero,.page-hero{padding-top:clamp(8.5rem,15vw,12rem)}
.brand{display:inline-flex;flex-direction:row;align-items:center;gap:.6rem;
line-height:1;color:var(--heading)}
.brand .wm{font-family:var(--font-sans);font-weight:600;font-size:1.05rem;letter-spacing:.2em}
.brand .wm-sub{display:block;font-weight:600;font-size:.46rem;letter-spacing:.44em;
color:var(--text-muted);margin-top:.3rem}
.site-footer .brand .wm-sub{color:var(--ink-muted)}
/* 34px box, of which the letter is 87.5% = 29.75px — matched to the wordmark
block (16.8 cap + 4.8 gap + 7.4 sub ≈ 29px), so the mark reads as the same
height as the two lines beside it rather than as an icon stuck on the front.
No fill of its own: currentColor gives it --heading here and #fff in the
footer, from one piece of markup. */
.brand-mark{width:34px;height:34px;flex:none;display:block}
.nav-links{display:flex;align-items:center;gap:.15rem;list-style:none;margin:0;padding:0}
.nav-links a{
display:block;padding:.5rem .85rem;border-radius:999px;font-size:.9rem;font-weight:500;
color:var(--text-muted);transition:color 160ms var(--ease-out),background-color 160ms var(--ease-out);
}
@media (hover:hover) and (pointer:fine){
.nav-links a:hover{color:var(--heading);background:rgba(20,19,26,.05)}
}
.nav-links a.active{color:var(--heading);background:rgba(20,19,26,.05)}
.nav-links a.btn-primary,.nav-links a.btn-primary:hover{color:#fff;background:var(--ink)}
.nav-links a.btn-ghost,.nav-links a.btn-ghost:hover{color:var(--ink)}
/* Dropdown scales out of its trigger, not out of nowhere. */
.has-dropdown{position:relative}
.dropdown{
position:absolute;top:calc(100% + 12px);left:0;min-width:310px;padding:.45rem;
background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);
box-shadow:var(--lift-3);
opacity:0;visibility:hidden;transform:scale(.96) translateY(-4px);transform-origin:top left;
transition:opacity 180ms var(--ease-out),transform 180ms var(--ease-out),visibility 180ms;
}
.has-dropdown:hover .dropdown,.has-dropdown:focus-within .dropdown{opacity:1;visibility:visible;transform:none}
.dropdown a{display:block;padding:.65rem .8rem;border-radius:var(--r-sm);color:var(--heading);
font-size:.9rem;font-weight:600;transition:background-color 140ms var(--ease-out)}
.dropdown a span{display:block;font-size:.77rem;color:var(--text-muted);font-weight:400;margin-top:.1rem}
@media (hover:hover) and (pointer:fine){.dropdown a:hover{background:var(--bg-2)}}
.nav-actions{display:flex;align-items:center;gap:.6rem}
.mobile-cta{display:none}
.nav-toggle{
display:none;width:40px;height:40px;border-radius:999px;
border:1px solid var(--border-strong);background:transparent;color:var(--ink);cursor:pointer;
position:relative;
}
.nav-toggle svg{display:none}
.nav-toggle::before,.nav-toggle::after{
content:"";position:absolute;left:11px;width:18px;height:1.5px;background:var(--ink);
transition:transform 300ms var(--ease-drawer);
}
.nav-toggle::before{top:15px}
.nav-toggle::after{top:23px}
.nav-toggle[aria-expanded="true"]::before{transform:translateY(4px) rotate(45deg)}
.nav-toggle[aria-expanded="true"]::after{transform:translateY(-4px) rotate(-45deg)}
@media (max-width:940px){
.desktop-cta{display:none}
/* The overlay comes after the button in the DOM, so without these it paints
over it and the menu cannot be closed by tapping the toggle at all — the
only ways out were picking a nav item or the browser back button. Escape
is already handled in main.js but there is no Escape key on a phone. */
.nav-toggle{display:block;z-index:2}
.nav-links{z-index:1}
/* No transform on the pill at this breakpoint. THIS IS LOAD-BEARING.
.nav-links below is `position:fixed; inset:0` to fill the viewport, and a
transform on ANY ancestor makes that ancestor the containing block for
fixed descendants — so `inset:0` silently resolves against the little nav
pill instead of the screen. Scrolling past 20px adds .scrolled, which
applied translateY+scale, and the full-screen menu collapsed to a 348x125
box showing two items. The scrolled state keeps its background and shadow
change; only the transform goes.
Same trap as the backdrop-filter that used to sit on .nav. Do not add
transform, filter, backdrop-filter, perspective or will-change to .nav or
.site-header inside this media query. */
.site-header.scrolled .nav{transform:none}
.site-header .nav{padding-left:1.25rem}
.nav-links{
position:fixed;inset:0;flex-direction:column;justify-content:center;align-items:stretch;
gap:.35rem;padding:5rem 8% 3rem;overflow-y:auto;
background:rgba(251,250,247,.94);backdrop-filter:blur(28px);
-webkit-backdrop-filter:blur(28px);
opacity:0;visibility:hidden;transform:none;
transition:opacity 300ms var(--ease-out),visibility 300ms;
}
.nav-links.open{opacity:1;visibility:visible}
.nav-links > li{opacity:0;transform:translateY(18px);
transition:opacity 420ms var(--ease-out),transform 420ms var(--ease-out)}
.nav-links.open > li{opacity:1;transform:none}
.nav-links.open > li:nth-child(1){transition-delay:60ms}
.nav-links.open > li:nth-child(2){transition-delay:100ms}
.nav-links.open > li:nth-child(3){transition-delay:140ms}
.nav-links.open > li:nth-child(4){transition-delay:180ms}
.nav-links.open > li:nth-child(5){transition-delay:220ms}
.nav-links.open > li:nth-child(6){transition-delay:260ms}
.nav-links.open > li:nth-child(7){transition-delay:300ms}
.nav-links > li > a{
font-family:var(--font-display);font-size:1.9rem;text-align:center;color:var(--heading);
padding:.5rem 1rem;
}
.dropdown{position:static;display:none}
.mobile-cta{display:block;margin-top:1.2rem}
.mobile-cta .btn{width:100%;justify-content:center}
.mobile-cta a{font-family:var(--font-sans)!important;font-size:.95rem!important}
}
/* ---------- Hero ---------------------------------------------------------- */
.hero{padding-bottom:clamp(3rem,6vw,5rem);overflow:hidden}
.hero-inner{position:relative;z-index:1}
.hero-split{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2rem,5vw,4.5rem);align-items:end}
.hero h1{margin-bottom:1.5rem;max-width:15ch}
.hero .lead{margin-bottom:2.2rem}
.hero-cta{display:flex;flex-wrap:wrap;gap:.7rem;margin-bottom:2rem}
.hero-meta{display:flex;flex-wrap:wrap;gap:1.6rem;font-size:.86rem;color:var(--text-muted)}
.hero-meta a{color:var(--heading);border-bottom:1px solid var(--border-strong);padding-bottom:1px}
@media (max-width:900px){.hero-split{grid-template-columns:1fr;gap:2.6rem}}
/* Inner-page hero. Photo backgrounds get a paper scrim so dark text holds. */
.page-hero{padding-bottom:clamp(3rem,6vw,4.5rem);overflow:hidden}
.page-hero .inner{position:relative;z-index:1}
.page-hero h1{max-width:18ch}
.hero-bg{position:absolute;inset:0;z-index:0;pointer-events:none}
/* The hero ground is drawn artwork now, not photography. A stock photo needed
opacity:.16 and a desaturating filter to stop it shouting; the plates arrive
already restrained -- ink hairlines at .07-.22 alpha with one lit element --
so knocking them back again would erase them. They paint at full strength and
the paper scrim below does the muting.
`.has-photo` keeps its name: it is on ten pages and in the mobile audit, and
renaming a class to match a change of medium is churn, not clarity. */
.page-hero.has-photo .hero-bg{
background-image:var(--hero-img);background-size:cover;background-position:center;
opacity:1;filter:none;
}
/* Vector strokes stay crisp when the plate is scaled past its 1600x900 box, so
a wide hero can afford to crop rather than letterbox. */
@media (min-width:1500px){.page-hero.has-photo .hero-bg{background-size:110% auto}}
.page-hero.has-photo::after{
content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
background:linear-gradient(180deg,rgba(251,250,247,.78) 0%,rgba(251,250,247,.92) 55%,var(--paper) 100%);
}
.breadcrumb{
display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;
font-size:.79rem;color:var(--text-muted);margin-bottom:1.4rem;
}
.breadcrumb a{color:var(--text-muted);border-bottom:1px solid transparent;transition:color 160ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){.breadcrumb a:hover{color:var(--heading);border-bottom-color:var(--border-strong)}}
/* The trail's separators and its current-page label are both bare spans, so
they cannot be told apart in CSS. Colour them as readable text — the "/"
glyph reads as a separator on its own, and the current page stays legible
instead of dropping to hairline grey. */
.breadcrumb span{color:var(--text-muted)}
/* ---------- Surfaces ------------------------------------------------------ */
.card,.plan,.principle,.stage-cell,.ed-tile,.insight-card,.partner-card,.form-card,
.cardpanel,.tile,.visual-panel,.ops,.quiz,.tier{
background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);
box-shadow:var(--inner-hi),var(--lift-1);
}
.card{padding:1.7rem 1.6rem;transition:transform 280ms var(--ease-out),box-shadow 280ms var(--ease-out)}
.card h3{margin-bottom:.5rem}
.card p:last-child{margin-bottom:0}
@media (hover:hover) and (pointer:fine){
.card:hover,.insight-card:hover,.partner-card:hover{transform:translateY(-4px);box-shadow:var(--inner-hi),var(--lift-3)}
}
.grid{display:grid;gap:1rem}
.cols-2{grid-template-columns:repeat(2,1fr)}
.cols-3{grid-template-columns:repeat(3,1fr)}
@media (max-width:1000px){.cols-3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:700px){.cols-2,.cols-3{grid-template-columns:1fr}}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.split.reverse > *:first-child{order:2}
@media (max-width:880px){.split{grid-template-columns:1fr}.split.reverse > *:first-child{order:0}}
.band{background:var(--bg-2)}
.band + .band{border-top:1px solid var(--border)}
/* ---------- Media --------------------------------------------------------- */
.media{position:relative;border-radius:var(--r-md);overflow:hidden;border:1px solid var(--border);
box-shadow:var(--lift-2)}
.media img{width:100%;height:100%;object-fit:cover;display:block}
/* The panels are inline