/* ==========================================================================
   Aitio Brands — tokens, base, global components.
   Section styles live in sections/{type}/style.css and load only where used.
   Animate only transform, opacity and clip-path (plan chapter 8).
   ========================================================================== */

/* Fonts: self-hosted, only the weights used, Latin + Latin Extended (Finnish ä ö å).
   Plan: Neue Montreal (Regular, Medium) + Alte Haas Grotesk (Bold). They need web licences, so the demo ships
   Inter Tight. To switch, drop the licensed WOFF2 files in assets/fonts and change --font-body / --font-head below. */
@font-face{font-family:"Inter Tight";font-weight:400;font-style:normal;font-display:swap;src:url(../fonts/inter-tight-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter Tight";font-weight:500;font-style:normal;font-display:swap;src:url(../fonts/inter-tight-latin-500-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter Tight";font-weight:700;font-style:normal;font-display:swap;src:url(../fonts/inter-tight-latin-700-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter Tight";font-weight:400;font-style:normal;font-display:swap;src:url(../fonts/inter-tight-latin-ext-400-normal.woff2) format("woff2");unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Inter Tight";font-weight:500;font-style:normal;font-display:swap;src:url(../fonts/inter-tight-latin-ext-500-normal.woff2) format("woff2");unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Inter Tight";font-weight:700;font-style:normal;font-display:swap;src:url(../fonts/inter-tight-latin-ext-700-normal.woff2) format("woff2");unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ---------- Design tokens (Appendix A) ---------- */
:root{
	--aitio-yellow:#FFFF05; --aitio-dark:#151515; --aitio-black:#000; --aitio-white:#F9F9F9; --aitio-pure-white:#FFF;
	--aitio-beige:#EBEBDF; --aitio-brown:#4A1B11; --placeholder:#D9D9D9;

	--font-body:"Neue Montreal","Inter Tight",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
	--font-head:"Alte Haas Grotesk","Inter Tight",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;

	/* Fluid type: 402 → 1440 (clamp). Desktop / mobile sizes from Appendix A. */
	--fs-h1:clamp(42px,30.38px + 2.89vw,72px);
	--fs-h2:clamp(32px,25.42px + 1.638vw,49px);
	--fs-h3:clamp(28px,24.9px + .771vw,36px);
	--fs-h4:clamp(24px,20.9px + .771vw,32px);
	--fs-h5:clamp(22px,21.2px + .193vw,24px);
	--fs-h6:20px; --fs-body-l:18px; --fs-body-m:16px; --fs-body-s:14px; --fs-overline:12px; --fs-btn:12px;
	--track-head:.03em;

	/* Layout */
	--design:1440px; --content:1280px; --gutter:clamp(20px,5.556vw,80px);
	--panel:280px; --panel-gap:16px; --card-w:217px; --card-h:60px;

	/* Motion (chapter 8) */
	--ease:cubic-bezier(.22,1,.36,1); --fast:200ms; --base:400ms; --slow:700ms;

	--header-h:64px;
}
@media (max-width:767px){:root{--gutter:20px;--header-h:56px}}

/* ---------- Section colour themes ---------- */
[data-theme="light"]{--bg:var(--aitio-white);--fg:#000;--muted:rgba(0,0,0,.62);--line:rgba(0,0,0,.16);--focus:#151515;--btn-bg:#151515;--btn-fg:#F9F9F9}
[data-theme="dark"]{--bg:var(--aitio-dark);--fg:var(--aitio-white);--muted:rgba(249,249,249,.66);--line:rgba(249,249,249,.22);--focus:#FFFF05;--btn-bg:#F9F9F9;--btn-fg:#151515}
[data-theme="brown"]{--bg:var(--aitio-brown);--fg:var(--aitio-white);--muted:rgba(249,249,249,.7);--line:rgba(249,249,249,.25);--focus:#FFFF05;--btn-bg:#F9F9F9;--btn-fg:#151515}
[data-theme="yellow"]{--bg:var(--aitio-yellow);--fg:#000;--muted:rgba(0,0,0,.66);--line:rgba(0,0,0,.28);--focus:#000;--btn-bg:#151515;--btn-fg:#F9F9F9}
[data-theme="beige"]{--bg:var(--aitio-beige);--fg:#000;--muted:rgba(0,0,0,.62);--line:rgba(0,0,0,.16);--focus:#151515;--btn-bg:#151515;--btn-fg:#F9F9F9}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 16px)}
body{margin:0;background:var(--aitio-white);color:#000;font-family:var(--font-body);font-size:var(--fs-body-m);line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
body.menu-open{overflow:hidden}
img,svg,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.18em}
h1,h2,h3,h4,h5,h6,p,ul,ol,dl,dd,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:2px solid var(--focus,#151515);outline-offset:3px;border-radius:2px}
::selection{background:var(--aitio-yellow);color:#000}
.sr-only{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:fixed;left:12px;top:-60px;z-index:200;background:var(--aitio-yellow);color:#000;padding:10px 16px;border-radius:999px;transition:transform var(--fast) var(--ease)}
.skip-link:focus{top:12px}

/* ---------- Type ---------- */
.h1,.h2,.h3,.h4,.h5,.h6{font-weight:500;letter-spacing:var(--track-head)}
.h1{font-family:var(--font-head);font-weight:700;font-size:var(--fs-h1);line-height:1.1;text-transform:uppercase}
.h2{font-size:var(--fs-h2);line-height:1.2}
.h3{font-size:var(--fs-h3);line-height:1.3}
.h4{font-size:var(--fs-h4);line-height:1.3;font-weight:400}
.h5{font-size:var(--fs-h5);line-height:1.4}
.h6{font-size:var(--fs-h6);line-height:1.4;font-weight:400}
.lead{font-size:var(--fs-body-l);line-height:1.5}
.overline{font-size:var(--fs-overline);line-height:1.2;text-transform:uppercase;letter-spacing:.04em;font-weight:400;color:var(--muted)}
.hl,mark.hl{background:var(--aitio-yellow);color:#000;padding:0 .18em;border-radius:2px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.tag{display:inline-block;font-size:12px;line-height:1;text-transform:uppercase;border:1px solid currentColor;border-radius:999px;padding:6px 10px;margin:0 6px 6px 0}
.pill{display:inline-block;font-size:11px;line-height:1.1;text-transform:uppercase;letter-spacing:.04em;padding:5px 10px;border-radius:999px}
.pill--yellow{background:var(--aitio-yellow);color:#000}
.pill--outline{border:1px solid currentColor}
.pill--black{background:#000;color:var(--aitio-yellow)}

/* ---------- Layout ---------- */
.sec{position:relative;background:var(--bg);color:var(--fg)}
.wrap{width:100%;max-width:var(--design);margin-inline:auto;padding-inline:var(--gutter)}
/* Content column left of the panel: 80 → 1144 at 1440, 16 px gap to the 280 px panel. */
@media (min-width:1024px){
	body.has-panel .wrap{padding-right:calc(var(--panel) + var(--panel-gap))}
}
.page-body{position:relative}
.main{display:block}
.sec--pad,.sec>.wrap:only-child{padding-block:clamp(56px,8vw,112px)}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.reveal{opacity:0;transform:translateY(16px);transition:opacity var(--slow) var(--ease),transform var(--slow) var(--ease)}
.reveal.is-in{opacity:1;transform:none}

/* ---------- Buttons: pill, label scrolls inside (chapter 7) ---------- */
.btn{--dur:12s;position:relative;display:inline-flex;align-items:center;justify-content:center;flex:none;width:163px;height:35px;border-radius:999px;border:1px solid transparent;overflow:hidden;
	font-family:var(--font-body);font-size:var(--fs-btn);font-weight:400;line-height:1.5;text-transform:uppercase;text-decoration:none;white-space:nowrap;cursor:pointer;isolation:isolate;
	background:var(--btn-bg,#151515);color:var(--btn-fg,#F9F9F9);transition:transform 120ms var(--ease);-webkit-tap-highlight-color:transparent}
.btn:active{transform:scale(.97)}
.btn__static{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;padding-inline:14px;pointer-events:none}
.btn__track{position:absolute;left:0;top:0;height:100%;display:flex;align-items:center;will-change:transform;animation:btn-marquee var(--dur) linear infinite}
.btn__group{display:flex;flex:none}
.btn__item{flex:none;padding-right:24px}
@keyframes btn-marquee{to{transform:translateX(-50%)}}
.btn:focus-visible{outline:2px solid var(--focus,#151515);outline-offset:3px}
.btn:focus-visible .btn__track,.btn.is-loading .btn__track,.btn:disabled .btn__track{animation:none;opacity:0}
.btn:focus-visible .btn__static,.btn.is-loading .btn__static,.btn:disabled .btn__static{opacity:1}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.4;cursor:not-allowed}
.btn--yellow{background:var(--aitio-yellow);color:#000}
.btn--dark{background:#151515;color:#F9F9F9}
.btn--light{background:#F9F9F9;color:#151515;border-color:rgba(21,21,21,.14)}
.btn--ghost{background:transparent;color:inherit;border-color:currentColor}
[data-theme="dark"] .btn--dark,[data-theme="brown"] .btn--dark{background:#F9F9F9;color:#151515}
[data-theme="dark"] .btn--light,[data-theme="brown"] .btn--light{background:#F9F9F9;color:#151515}
[data-theme="yellow"] .btn--yellow{background:#151515;color:#F9F9F9}
.btn--header{width:110px;height:24px;font-size:11px}
.btn--header .btn__item{padding-right:18px}
@media (pointer:coarse){.btn{height:44px}.btn--header{height:36px}}
@media (prefers-reduced-motion:reduce){.btn__track{animation:none;opacity:0}.btn__static{opacity:1}}

/* ---------- Online indicator ---------- */
.online{position:relative;display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--aitio-yellow);margin-right:8px;flex:none;animation:online-dot 2s var(--ease) infinite}
.online::after{content:"";position:absolute;inset:0;border-radius:50%;border:1px solid var(--aitio-yellow);animation:online-ring 2s var(--ease) infinite}
@keyframes online-dot{0%,100%{opacity:1}50%{opacity:.4}}
@keyframes online-ring{0%{transform:scale(1);opacity:.7}100%{transform:scale(3.2);opacity:0}}
[data-theme="yellow"] .online,[data-theme="light"] .online{background:#000;animation-name:online-dot}
[data-theme="yellow"] .online::after,[data-theme="light"] .online::after{border-color:#000}

/* ---------- Header ---------- */
.site-header{--fg:#F9F9F9;--focus:#FFFF05;position:fixed;inset:0 0 auto 0;z-index:100;color:var(--fg);transition:transform var(--base) var(--ease),color var(--fast) linear;will-change:transform}
.site-header[data-theme="light"],.site-header[data-theme="yellow"],.site-header[data-theme="beige"]{--fg:#000;--focus:#151515}
.site-header.is-hidden{transform:translateY(-110%)}
body.menu-open .site-header{transform:none;--fg:#F9F9F9;--focus:#FFFF05}
.site-header__in{display:flex;align-items:center;gap:32px;height:var(--header-h);padding-inline:var(--gutter);max-width:var(--design);margin-inline:auto}
.logo{display:inline-flex;align-items:center;color:inherit;text-decoration:none}
.nav{margin-inline:auto}
.nav__list{display:flex;gap:6px}
.nav__link{display:inline-block;padding:8px 14px;font-size:14px;text-decoration:none;border-radius:999px;transition:opacity var(--fast) linear}
.nav__link:hover{opacity:.6}
.nav__link.is-current{text-decoration:underline;text-underline-offset:.35em}
.site-header__right{display:flex;align-items:center;gap:20px}
.langs{display:inline-flex;align-items:center;gap:6px;font-size:13px}
.langs__a{text-decoration:none;opacity:.55;padding:6px 2px;transition:opacity var(--fast) linear}
.langs__a.is-on,.langs__a:hover{opacity:1}
.langs__a.is-on{text-decoration:underline;text-underline-offset:.35em}
.langs__a.is-dim{opacity:.28;pointer-events:none}
.mail{display:inline-flex;align-items:center;font-size:13px;text-decoration:none}
.mail__status{display:none}
.menu-btn{display:none;font-size:13px;text-transform:uppercase;padding:10px 0}
.menu-btn__close{display:none}
.menu-btn[aria-expanded="true"] .menu-btn__open{display:none}
.menu-btn[aria-expanded="true"] .menu-btn__close{display:inline}

/* Mega menu (content from the six service terms; hover + click; closes with a short delay) */
.nav__item{position:relative}
.mega{position:fixed;left:0;right:0;top:var(--header-h);background:#151515;color:#F9F9F9;padding:28px var(--gutter) 36px;opacity:0;transform:translateY(-8px);pointer-events:none;transition:opacity var(--fast) var(--ease),transform var(--base) var(--ease);--focus:#FFFF05}
.mega[hidden]{display:block;visibility:hidden}
.mega.is-open{opacity:1;transform:none;pointer-events:auto;visibility:visible}
.mega__list{display:grid;grid-template-columns:repeat(6,1fr);gap:20px;max-width:var(--design);margin-inline:auto}
.mega__link{display:grid;gap:8px;text-decoration:none}
.mega__img{aspect-ratio:4/3;overflow:hidden;border-radius:6px;background:#2a2a2a}
.mega__img img{width:100%;height:100%;object-fit:cover;transition:transform var(--base) var(--ease)}
.mega__link:hover img,.mega__link:focus-visible img{transform:scale(1.04)}
.mega__name{font-size:15px;line-height:1.25}
.mega__lead{font-size:12px;opacity:.65;line-height:1.35}

/* Mobile menu */
.mobile-menu{position:fixed;inset:0;z-index:90;background:#151515;color:#F9F9F9;padding:calc(var(--header-h) + 24px) var(--gutter) 32px;display:flex;flex-direction:column;justify-content:space-between;clip-path:inset(0 0 100% 0);visibility:hidden;transition:clip-path var(--base) var(--ease),visibility 0s linear var(--base);--focus:#FFFF05}
.mobile-menu[hidden]{display:flex}
.mobile-menu.is-open{clip-path:inset(0 0 0 0);visibility:visible;transition:clip-path var(--base) var(--ease)}
.mobile-menu ul{display:grid;gap:4px}
.mobile-menu li a{display:block;padding:8px 0;font-size:clamp(34px,10vw,48px);line-height:1.15;font-weight:500;letter-spacing:var(--track-head);text-decoration:none}
.mobile-menu__foot{display:grid;gap:10px;font-size:16px}
.mobile-menu__foot a{text-decoration:none}

/* Floating "Let's talk" (becomes the chatbot launcher later) */
.fab{position:fixed;right:clamp(16px,2.8vw,40px);bottom:clamp(16px,2.8vw,32px);z-index:60;width:76px;height:76px;border-radius:50%;background:var(--aitio-yellow);color:#000;display:grid;place-items:center;text-align:center;text-decoration:none;font-size:11px;line-height:1.15;text-transform:uppercase;letter-spacing:.03em;transition:transform var(--base) var(--ease);--focus:#000}
.fab:hover{transform:scale(1.06)}
.fab:active{transform:scale(.97)}
.fab span{max-width:54px}
@media (pointer:coarse){.fab{width:64px;height:64px}}

@media (max-width:1023px){
	.nav,.langs,.site-header__right .mail,.btn--header{display:none}
	.menu-btn{display:block}
	.site-header__in{justify-content:space-between}
	.site-header__right{gap:0}
	.mega{display:none}
}
@media (max-width:767px){.fab{width:60px;height:60px;bottom:96px}}

/* ---------- Marquees: constant slow speed, fade out at both edges (mask-image) ---------- */
.mq{--dur:40s;position:relative;overflow:hidden;white-space:nowrap;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 48px,#000 calc(100% - 48px),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 48px,#000 calc(100% - 48px),transparent 100%)}
@media (max-width:767px){.mq{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 24px,#000 calc(100% - 24px),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 24px,#000 calc(100% - 24px),transparent 100%)}}
.mq__track{display:flex;width:max-content;will-change:transform;animation:mq var(--dur) linear infinite}
.mq__grp{display:flex;align-items:center;flex:none}
.mq__item{display:inline-block;padding:0 24px;text-transform:uppercase;font-size:12px;letter-spacing:.04em}
.mq__dot{font-size:7px;opacity:.9}
.mq:hover .mq__track,.mq:focus-within .mq__track{animation-play-state:paused}
@keyframes mq{to{transform:translateX(-50%)}}
.mq--strip{background:var(--aitio-yellow);color:#000;padding-block:14px}
.mq--band{background:#000;color:var(--aitio-yellow);padding-block:22px}
.mq--band .mq__item{font-size:clamp(22px,3vw,36px);text-transform:none;letter-spacing:var(--track-head);font-weight:500}
.mq--coming{background:#000;color:#F9F9F9;padding-block:16px}
.mq--coming .mq__item--label{color:var(--aitio-yellow)}
.mq--logos{padding-block:24px;background:var(--aitio-white)}
.mq__logo{padding:0 28px;display:inline-flex;align-items:center}.mq__logo img{height:34px;width:auto}
@media (prefers-reduced-motion:reduce){.mq{-webkit-mask-image:none;mask-image:none}.mq__track{animation:none;flex-wrap:wrap;width:auto;justify-content:center}.mq__grp:nth-child(2){display:none}}

/* ---------- Shared cards ---------- */
.pcard{position:relative}
.pcard__a{display:block;color:inherit;text-decoration:none}
.pcard__cover{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;border-radius:6px;background:var(--placeholder)}
.pcard__cover img,.pcard__cover video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform var(--base) var(--ease)}
.pcard.is-link:hover .pcard__cover img,.pcard.is-link:hover .pcard__cover video,.pcard.is-link:focus-within .pcard__cover img{transform:scale(1.03)}
.pcard__cover::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.28),rgba(0,0,0,.05) 60%)}
.pcard__logo{position:absolute;inset:0;z-index:2;display:grid;place-items:center;pointer-events:none}
.pcard__logo img{max-width:40%;max-height:30%;width:auto;height:auto;object-fit:contain;position:static;transform:none}
.pcard__title{display:block;margin-top:16px;font-size:var(--fs-h6);line-height:1.3}
.pcard__meta{display:block;margin-top:6px;font-size:12px;text-transform:uppercase;letter-spacing:.03em;color:var(--muted)}
.pcard__client{color:var(--fg);font-weight:500}
.pcard__sep{margin:0 4px}
.bcard__a{display:grid;gap:12px;text-decoration:none;color:inherit}
.bcard__cover{position:relative;display:block;aspect-ratio:4/5;overflow:hidden;background:var(--placeholder);border-radius:4px}
.bcard__cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform var(--base) var(--ease)}
.bcard__a:hover .bcard__cover img{transform:scale(1.03)}
.bcard__tag{position:absolute;left:10px;top:10px;z-index:2;background:var(--aitio-yellow);color:#000;font-size:11px;line-height:1;text-transform:uppercase;padding:6px 9px;border-radius:999px}
.bcard__title{font-size:18px;line-height:1.3}
.bcard__cta{font-size:12px;text-transform:uppercase;letter-spacing:.04em;text-decoration:underline;text-underline-offset:.3em}
.logo-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(20px,3vw,44px) clamp(16px,2.6vw,40px);align-items:center}
.logo-grid__item{display:flex;align-items:center;justify-content:center;min-height:54px}
.logo-grid__item img{max-height:46px;width:auto;max-width:100%;object-fit:contain}
@media (max-width:767px){.logo-grid{grid-template-columns:repeat(3,1fr)}.logo-grid__item img{max-height:34px}}
.media-video{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 600ms linear}
.media-video.is-playing{opacity:1}
.bg-media{position:absolute;inset:0;overflow:hidden}
.bg-media img,.bg-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bg-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.32),rgba(0,0,0,.12) 45%,rgba(0,0,0,.45))}

/* ---------- Filter sentence: "Show me [all projects] in [any industry]." ---------- */
.fsentence{font-size:var(--fs-h3);line-height:1.35;font-weight:500;letter-spacing:var(--track-head)}
.fpick{position:relative;display:inline}
.fpick__btn{font:inherit;letter-spacing:inherit;border-bottom:2px solid currentColor;line-height:1.1;display:inline;padding:0}
.fpick__btn:hover{opacity:.7}
.fpick__list{position:absolute;left:0;top:calc(100% + 10px);z-index:20;min-width:240px;background:var(--aitio-dark);color:#F9F9F9;padding:10px;border-radius:8px;font-size:16px;line-height:1.3;font-weight:400;letter-spacing:0;box-shadow:0 18px 40px rgba(0,0,0,.25);opacity:0;transform:translateY(-6px);pointer-events:none;transition:opacity var(--fast) var(--ease),transform var(--base) var(--ease);display:block;--focus:#FFFF05}
.fpick__list[hidden]{display:block;visibility:hidden}
.fpick.is-open .fpick__list{opacity:1;transform:none;pointer-events:auto;visibility:visible}
.fpick__list li{padding:10px 12px;border-radius:6px;cursor:pointer;color:rgba(249,249,249,.72);transition:color var(--fast) linear,background var(--fast) linear}
.fpick__list li:hover,.fpick__list li:focus-visible,.fpick__list li[aria-selected="true"]{color:#fff;background:rgba(255,255,255,.08)}
.fpick__list li[hidden]{display:none}
@media (max-width:767px){
	.fsentence{font-size:clamp(26px,7.4vw,32px)}
	.fpick{display:inline}
	/* list opens in place under the sentence and pushes the rest down (expanded-filter-mobile) */
	.fpick__list{position:static;display:block;box-shadow:none;background:none;color:inherit;padding:0 0 0 36px;min-width:0;max-height:0;overflow:hidden;opacity:0;transform:none;font-size:22px;transition:max-height var(--base) var(--ease),opacity var(--fast) linear}
	.fpick.is-open .fpick__list{max-height:420px;opacity:1;padding-block:8px}
	.fpick__list li{padding:6px 0;color:var(--muted);background:none!important}
	.fpick__list li[aria-selected="true"]{color:var(--fg)}
}

/* ---------- Sticky panel and sidebar cards (chapter 7) ---------- */
.sticky-panel{position:absolute;inset:0;z-index:40;pointer-events:none}
.sticky-panel__in{position:relative;height:100%;max-width:var(--design);margin-inline:auto}
.card-stack{position:absolute;top:0;right:0;bottom:0;width:var(--panel);pointer-events:none}
.card-stack__sticky{position:sticky;top:calc(var(--header-h) + 24px);padding:0 40px 0 23px;display:flex;flex-direction:column;gap:8px;max-height:calc(100vh - var(--header-h) - 130px);transition:none}
.scard-wrap{pointer-events:none;height:0;opacity:0;transform:translateY(-12px);transition:opacity var(--base) var(--ease),transform var(--base) var(--ease),height 0s linear var(--base);overflow:visible}
.scard-wrap.is-in{pointer-events:auto;height:auto;opacity:1;transform:none;transition:opacity var(--base) var(--ease),transform var(--base) var(--ease)}
.scard{--cbg:rgba(255,255,255,.5);--cfg:#151515;width:var(--card-w);border-radius:5px;background:var(--cbg);color:var(--cfg);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 0 0 1px rgba(21,21,21,.04) inset;overflow:hidden;font-size:14px}
.scard-wrap.is-in{--x:1}
.card-stack[data-theme="light"] .scard{--cbg:rgba(255,255,255,.62);--cfg:#151515;background-image:linear-gradient(rgba(21,21,21,.04),rgba(21,21,21,.04))}
.card-stack[data-theme="yellow"] .scard{--cbg:rgba(255,255,255,.55);--cfg:#000}
.card-stack[data-theme="dark"] .scard{--cbg:rgba(255,255,255,.12);--cfg:#F9F9F9;box-shadow:0 0 0 1px rgba(255,255,255,.12) inset}
.card-stack[data-theme="brown"] .scard{--cbg:rgba(255,255,255,.14);--cfg:#F9F9F9;box-shadow:0 0 0 1px rgba(255,255,255,.14) inset}
.card-stack[data-theme="beige"] .scard{--cbg:rgba(255,255,255,.6)}
.scard__head{display:flex;align-items:center;justify-content:space-between;width:100%;height:var(--card-h);padding:0 17px;text-align:left;text-transform:uppercase;font-size:14px;letter-spacing:0;color:inherit}
.scard__title{flex:1;min-width:0;padding-right:10px;line-height:1.2}
.scard__icon{position:relative;width:12px;height:12px;flex:none}
.scard__icon::before,.scard__icon::after{content:"";position:absolute;left:0;top:50%;width:12px;height:1.5px;background:currentColor;transform:translateY(-50%);transition:transform var(--base) var(--ease)}
.scard__icon::after{transform:translateY(-50%) rotate(90deg)}
.scard.is-open .scard__icon::after{transform:translateY(-50%) rotate(0)}
.scard__body{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--base) var(--ease)}
.scard.is-open .scard__body{grid-template-rows:1fr}
.scard__body-in{overflow:hidden;min-height:0}
.scard__content{padding:0 17px 17px;opacity:0;transform:translateY(-6px);transition:opacity var(--base) var(--ease),transform var(--base) var(--ease)}
.scard.is-open .scard__content{opacity:1;transform:none}
.scard-wrap.is-compact .scard__body{grid-template-rows:0fr!important}
.scard__text{font-size:14px;line-height:1.4;margin-bottom:12px;text-transform:none}
.scard__link{display:inline-block;font-size:12px;text-transform:uppercase;letter-spacing:.03em;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:2px}
.scard__deck{position:relative;aspect-ratio:3/2;margin-bottom:14px}
.scard__page{position:absolute;inset:0;border-radius:3px;overflow:hidden;box-shadow:0 6px 18px rgba(0,0,0,.18);background:#151515}
.scard__page img{width:100%;height:100%;object-fit:cover}
.scard__page--3{transform:translate(0,0) scale(.9)}.scard__page--2{transform:translate(6px,6px) scale(.94);}.scard__page--1{transform:translate(12px,12px) scale(.98)}
.scard__person{display:flex;align-items:center;gap:12px;font-size:13px}
.scard__avatar{width:44px;height:44px;border-radius:50%;overflow:hidden;flex:none;background:#ccc}.scard__avatar img{width:100%;height:100%;object-fit:cover}
.scard__address{font-style:normal;font-size:13px;line-height:1.5}
.scard__video{position:relative;aspect-ratio:16/10;border-radius:3px;overflow:hidden;margin-bottom:10px}
.scard__news{display:flex;gap:6px}.scard__news input{flex:1;min-width:0;border:1px solid currentColor;background:transparent;color:inherit;border-radius:999px;padding:8px 12px;font-size:16px}

/* Recently played */
.player__cover-wrap{position:relative;width:120px;height:120px;margin:0 auto 12px}
.player__track{position:absolute;inset:0;opacity:0;transition:opacity var(--base) var(--ease)}
.player__track.is-current{opacity:1}
.player__cover{position:relative;display:block;width:120px;height:120px;background:#111}
.player__cover img{width:120px;height:120px;object-fit:cover}
.player__play{position:absolute;inset:0;margin:auto;width:42px;height:42px;border-radius:50%;background:#fff;color:#000;display:grid;place-items:center;opacity:0;transition:opacity var(--fast) linear}
.player__cover:hover .player__play,.player__play:focus-visible{opacity:1}
@media (hover:none){.player__play{opacity:1}}
.player__info{display:flex;gap:8px;align-items:center;min-width:0}
.player__title{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-transform:none}
.player__artist{font-size:12px;opacity:.6;margin:2px 0 8px;text-transform:none}
.eq{display:inline-flex;gap:2px;align-items:flex-end;height:12px;flex:none}.eq i{display:block;width:2px;height:100%;background:currentColor;transform-origin:bottom;animation:eq 1.1s ease-in-out infinite}
.eq i:nth-child(2){animation-delay:-.3s}.eq i:nth-child(3){animation-delay:-.6s}.eq i:nth-child(4){animation-delay:-.9s}
@keyframes eq{0%,100%{transform:scaleY(.3)}50%{transform:scaleY(1)}}
.player__progress{height:2px;background:rgba(21,21,21,.18);margin-bottom:10px;overflow:hidden}
.player__progress span{display:block;height:100%;width:100%;background:currentColor;transform-origin:left;animation:prog 8s linear infinite}
@keyframes prog{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.player__nav{display:flex;align-items:center;gap:10px;font-size:12px;margin-bottom:12px}
.player__nav button{font-size:18px;line-height:1;padding:4px 8px}
.player__pills{display:flex;gap:8px}
.player__pills .pill{flex:1;text-align:center;text-decoration:none;padding:7px 6px;font-size:11px;text-transform:none;letter-spacing:0}
.player__pills a[hidden]{display:none}
.card-stack[data-theme="dark"] .player__progress,.card-stack[data-theme="brown"] .player__progress{background:rgba(255,255,255,.25)}

/* Tablet and mobile: one compact card fixed at the bottom, the card of the section in view */
@media (max-width:1023px){
	.sticky-panel{position:fixed;inset:auto 0 0 0;z-index:70;height:auto;pointer-events:none}
	.sticky-panel__in{max-width:none;height:auto}
	.card-stack{position:static;width:auto;display:block}
	.card-stack__sticky{position:static;padding:0 var(--gutter) 12px;display:block;max-height:none}
	.scard-wrap{position:absolute;left:var(--gutter);right:var(--gutter);bottom:12px;height:auto;transform:translateY(16px);opacity:0;transition:opacity 300ms var(--ease),transform 300ms var(--ease);visibility:hidden}
	.scard-wrap.is-in{display:block}
	.scard-wrap.is-current{opacity:1;transform:none;pointer-events:auto;visibility:visible}
	.scard-wrap.is-in:not(.is-current){opacity:0;pointer-events:none}
	.scard{width:100%;max-width:420px;margin-left:0}
	.scard__body{max-height:60vh}
	.sticky-panel.is-hidden{display:none}
	.card-stack__sticky{height:0;padding:0}
}
@media (prefers-reduced-motion:reduce){.scard-wrap,.scard-wrap.is-in{transition:none;transform:none}.scard__body,.scard__content{transition:none}}

/* ---------- Footer ---------- */
.site-footer{background:var(--aitio-dark);color:#F9F9F9;--focus:#FFFF05}
.site-footer__in{padding-block:clamp(48px,7vw,96px) 28px;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,2.1fr);gap:clamp(24px,4vw,64px);align-items:start}
.site-footer__img{aspect-ratio:4/5;overflow:hidden;border-radius:6px;background:#222;max-width:340px}
.site-footer__img img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05)}
.site-footer__cols{display:grid;grid-template-columns:1.1fr 1fr 1.5fr 1.4fr;gap:28px}
.fcol .overline{margin-bottom:14px;color:rgba(249,249,249,.55)}
.fcol .overline--sp{margin-top:26px}
.fcol ul{display:grid;gap:8px}
.fcol a{text-decoration:none;font-size:15px;line-height:1.35}
.fcol a:hover{text-decoration:underline;text-underline-offset:.25em}
.fcol__tag{margin-top:18px;font-size:14px;color:rgba(249,249,249,.6)}
.social{display:flex!important;gap:16px!important}
.social a{display:grid;place-items:center;width:36px;height:36px;border:1px solid rgba(249,249,249,.3);border-radius:50%;transition:background var(--fast) linear,color var(--fast) linear}
.social a:hover{background:var(--aitio-yellow);color:#000;text-decoration:none}
.site-footer__bottom{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;gap:20px;border-top:1px solid rgba(249,249,249,.18);margin-top:24px;padding-top:20px;font-size:13px}
.site-footer__bottom a{text-decoration:none}
@media (max-width:1023px){.site-footer__in{grid-template-columns:1fr}.site-footer__img{max-width:260px}.site-footer__cols{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.site-footer__cols{grid-template-columns:1fr}.site-footer__img{display:none}}

/* ---------- Page transition (View Transitions API, chapter 8) ---------- */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-old 300ms var(--ease) both;mix-blend-mode:normal}
::view-transition-new(root){animation:vt-new 450ms var(--ease) 380ms both;mix-blend-mode:normal}
@keyframes vt-old{from{clip-path:inset(0 0 0 0)}to{clip-path:inset(100% 0 0 0)}}
@keyframes vt-new{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
::view-transition-group(root){animation-duration:0s}
::view-transition{background:#151515}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}

/* ---------- Loader (first visit only, at most 1.2 s) ---------- */
.loader{position:fixed;inset:0;z-index:300;background:#000;display:none;place-items:center;pointer-events:none}
.has-loader .loader{display:grid}
.loader img{animation:loader-pulse 1.1s var(--ease) infinite alternate}
.loader.is-done{animation:loader-wipe 600ms var(--ease) forwards}
@keyframes loader-pulse{from{opacity:.55;transform:scale(.94)}to{opacity:1;transform:scale(1)}}
@keyframes loader-wipe{from{clip-path:inset(0 0 0 0)}to{clip-path:inset(100% 0 0 0)}}
@media (prefers-reduced-motion:reduce){.has-loader .loader{display:none}.reveal{opacity:1;transform:none;transition:none}}

@media (prefers-reduced-motion:reduce){.eq i,.player__progress span,.online,.online::after{animation:none}.media-video{display:none}}