@font-face{font-family:Fraunces;font-style:normal;font-weight:400 600;font-display:swap;src:url(/fonts/fraunces-latin.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:Fraunces;font-style:normal;font-weight:400 600;font-display:swap;src:url(/fonts/fraunces-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Outfit;font-style:normal;font-weight:300 500;font-display:swap;src:url(/fonts/outfit-latin.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:Outfit;font-style:normal;font-weight:300 500;font-display:swap;src:url(/fonts/outfit-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
:root{--bg:#f7f4ee;--fg:#1c1a16;--muted:#5d554a;--panel:#ffffff;--line:#e3dbcf;--accent:#a8582a;--ink:#ffffff;color-scheme:light}
*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
body{overflow-x:clip}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--fg);font-family:Outfit,"Helvetica Neue",Arial,sans-serif;font-weight:340;line-height:1.6}
h1,h2,h3{font-family:Fraunces,"Times New Roman",serif;font-weight:460;letter-spacing:-.02em;line-height:1.12;text-wrap:balance}
h1{font-size:clamp(2.1rem,4.6vw,3.4rem);margin:.3rem 0 .8rem;max-width:20ch}
h2{font-size:clamp(1.5rem,2.6vw,2rem);margin:0 0 .8rem}
h3{font-size:1.15rem;margin:.2rem 0 .4rem}
strong,b{font-weight:480}
a{color:inherit;text-underline-offset:.18em}
a:hover{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
img{max-width:100%;height:auto}
code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.9em;background:var(--panel);padding:.05em .35em;border-radius:.35em}
.shell{width:min(1120px,calc(100% - 2rem));margin-inline:auto}
.skip{position:absolute;left:1rem;top:-5rem;z-index:50;background:var(--accent);color:var(--ink);padding:.6rem 1rem;border-radius:999px;text-decoration:none}
.skip:focus{top:1rem}
.nav{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
.nav-row{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.75rem 0}
.nav-actions{display:flex;gap:.5rem;align-items:center}
.mark{font-family:Fraunces,serif;font-size:1.15rem;text-decoration:none}
.links{display:none;gap:1.1rem;align-items:center}
.links a,.links summary{text-decoration:none}
details.menu{position:relative}
details.menu summary{list-style:none;cursor:pointer}
details.menu summary::after{content:" ▾";font-size:.8em;color:var(--muted)}
details.menu summary::-webkit-details-marker{display:none}
.drop{display:none}
details[open] .drop{display:grid;position:absolute;left:0;top:1.8rem;width:min(620px,80vw);grid-template-columns:1fr 1fr;gap:1rem;padding:1.1rem;background:var(--panel);border:1px solid var(--line);border-radius:1rem;box-shadow:0 18px 40px rgb(60 40 20 / .12)}
.drop ul,.drawer ul,footer ul{list-style:none;padding:0;margin:.5rem 0 0;display:grid;gap:.35rem}
.drop a,.drawer a,footer ul a{text-decoration:none}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:.65rem 1.05rem;border-radius:999px;background:var(--accent);color:var(--ink);text-decoration:none;border:1px solid var(--accent);font:inherit;font-weight:480;cursor:pointer}
.btn:hover{color:var(--ink);filter:brightness(1.06)}
.ghost{background:transparent;color:var(--fg);border-color:var(--line);font-weight:340}
.ghost:hover{color:var(--fg);border-color:var(--accent)}
.burger{display:inline-flex}
.btn{white-space:nowrap}
.intro{display:grid;gap:.2rem}
.intro h1{margin-bottom:.4rem}
.intro .lede{margin:0}
.drawer-cta{margin:0;grid-column:1/-1}
@media(max-width:479px){.nav-quote{display:none}}
@media(min-width:480px){.drawer-cta{display:none}}
.drawer{display:none;padding-bottom:1rem}
.drawer.open{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
main.page{display:grid;gap:3rem;padding:2.5rem 0 1rem}
main.page>section,main.page>article{min-width:0}
.hero{display:grid;gap:1.5rem;padding:1rem 0}
.hero h1{font-size:clamp(2.4rem,5.4vw,4.4rem);max-width:16ch}
.actions{display:flex;flex-wrap:wrap;gap:.6rem}
.kicker{color:var(--accent);letter-spacing:.14em;text-transform:uppercase;font-size:.75rem;margin:0}
.lede{color:var(--muted);max-width:44rem;font-size:1.08rem}
p{max-width:68ch}
.note{color:var(--muted);font-size:.92rem}
.orbit{min-height:280px;border-radius:1.5rem;border:1px solid var(--line);display:grid;place-items:center;background:radial-gradient(280px 160px at 50% 40%,color-mix(in srgb,var(--accent) 28%,transparent),transparent 70%),var(--bg)}
.ring{width:210px;height:210px;border:1px solid color-mix(in srgb,var(--accent) 70%,transparent);border-radius:50%;position:relative}
.ring span{position:absolute;color:var(--accent);font-family:Fraunces,serif;font-size:1.25rem}
.ring span:nth-child(1){top:6%;left:42%}
.ring span:nth-child(2){top:38%;right:-4%}
.ring span:nth-child(3){bottom:8%;left:40%}
.ring span:nth-child(4){top:40%;left:-2%}
.ring span:nth-child(5){bottom:28%;right:16%}
.grid-4,.grid-2,.grid-3{display:grid;gap:.8rem;padding:0;margin:0;list-style:none}
.card{background:var(--panel);border:1px solid var(--line);border-radius:1.15rem;padding:1.1rem}
.creds{margin:0}
.creds .card{margin:0}
.steps{counter-reset:step}
.steps li{counter-increment:step}
.steps h3::before{content:counter(step) ". ";color:var(--accent)}
.link-cards a.card,.link-cards .card{display:grid;gap:.3rem;height:100%;text-decoration:none}
.link-cards a.card:hover{border-color:var(--accent);color:var(--fg)}
.link-cards a.card strong{font-family:Fraunces,serif;font-weight:460;font-size:1.1rem}
.stack{display:grid;gap:.6rem}
details.card summary{cursor:pointer;font-weight:480}
details.card p{margin:.6rem 0 0}
ul.ticks{list-style:none;padding:0;margin:0;display:grid;gap:.45rem}
ul.ticks li{padding-left:1.4rem;position:relative}
ul.ticks li::before{content:"";position:absolute;left:0;top:.62em;width:.6rem;height:.35rem;border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(-45deg)}
.cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem}
.cta p{margin:0}
.lang-wall{display:flex;flex-wrap:wrap;gap:.45rem;padding:0;list-style:none;margin:.4rem 0 1.2rem}
.lang-wall li{border:1px solid var(--line);border-radius:999px;padding:.35rem .75rem;background:var(--panel)}
.prose{max-width:68ch}
.prose h2{font-size:1.35rem;margin:2rem 0 .5rem}
.prose ul{padding-left:1.2rem;display:grid;gap:.4rem}
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:1rem}
table{border-collapse:collapse;width:100%;min-width:560px}
th,td{text-align:left;padding:.75rem 1rem;border-bottom:1px solid var(--line);vertical-align:top}
th{font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:480}
tr:last-child td{border-bottom:0}
td.n{font-variant-numeric:tabular-nums;white-space:nowrap}
.form{display:grid;gap:.4rem;max-width:860px}
.fields{display:grid;gap:.2rem 1rem}
.fields>div{min-width:0}
label{display:block;font-size:.92rem;margin:.8rem 0 .3rem}
input,select,textarea{width:100%;min-height:44px;border-radius:.8rem;border:1px solid var(--line);background:var(--bg);color:var(--fg);padding:.7rem .85rem;font:inherit}
input[type=file]{padding:.55rem}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:1px}
textarea{min-height:8rem;resize:vertical}
.check{display:flex;gap:.6rem;align-items:flex-start;max-width:none}
.check input{width:1.2rem;min-height:1.2rem;margin-top:.25rem;flex:none;accent-color:var(--accent)}
.check label{margin:0}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.demo{display:grid;gap:1rem}
.demo-tabs{display:flex;flex-wrap:wrap;gap:.5rem}
.demo-tabs button[aria-pressed=true]{border-color:var(--accent);color:var(--accent)}
.demo-card{display:grid;gap:.5rem;align-content:start}
.demo-card h3{font-size:1.4rem}
.demo-card p{margin:0}
.demo-info{display:grid;grid-template-columns:minmax(0,1fr);gap:.15rem;margin:0}
.demo-info dd+dt{margin-top:.6rem}
.demo-info dt{color:var(--muted);font-size:.9rem}
.demo-info dd{margin:0;font-variant-numeric:tabular-nums;min-width:0;overflow-wrap:anywhere}
footer{margin-top:3rem;border-top:1px solid var(--line);padding:2rem 0 2.5rem}
footer p{margin:.3rem 0}
.foot{display:grid;gap:1.5rem}
.foot-base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem;margin-top:2rem;padding-top:1rem;border-top:1px solid var(--line)}
@media(min-width:700px){
  .grid-2{grid-template-columns:1fr 1fr}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .fields{grid-template-columns:1fr 1fr}
  .fields .full{grid-column:1/-1}
  ul.ticks.cols{grid-template-columns:1fr 1fr;column-gap:2rem}
  .foot{grid-template-columns:1fr 1fr}
}
@media(min-width:1000px){
  .links{display:flex}
  .burger,.drawer,.drawer.open{display:none}
  .hero{grid-template-columns:1.1fr .9fr;align-items:center;min-height:min(640px,calc(100vh - 6rem))}
  .grid-3{grid-template-columns:repeat(3,1fr)}
  .grid-4{grid-template-columns:repeat(4,1fr)}
  .foot{grid-template-columns:1.3fr 1fr 1fr 1fr}
}
/* 3D backdrop, reveals and media */
#stage{position:fixed;inset:0;width:100vw;height:100vh;z-index:0;pointer-events:none;opacity:0;transition:opacity 1.4s ease}
.has3d #stage{opacity:1}
.has3d main :is(p,li,dd,dt,summary,figcaption,h2,h3,.kicker,td,th){text-shadow:0 0 18px var(--bg),0 0 6px var(--bg)}
main,footer{position:relative;z-index:1}
.nav{z-index:20}
.has3d .orbit .ring{visibility:hidden}
.has3d .orbit{background:transparent;border-color:transparent}
@media(max-width:899px){.has3d #stage{opacity:.42}}
.motion .rv{opacity:0;transform:perspective(1200px) rotateX(18deg) translateY(70px) scale(.96);transform-origin:50% 0}
.motion .rv,.motion .in{transition:opacity .9s ease,transform 1.1s cubic-bezier(.16,.84,.24,1)}
.motion .rv.in{opacity:1;transform:none}
.motion .rv:not(.in) :is(.link-cards>li,.steps>li,.stack>details,.lang-wall>li,.creds>li,.ticks>li){opacity:0}
.motion .rv.in :is(.link-cards>li,.steps>li,.stack>details,.creds>li,.ticks>li){animation:pop .9s cubic-bezier(.16,.84,.24,1) backwards;animation-delay:calc(var(--n,0)*55ms + .15s)}
.motion .rv.in .lang-wall>li{animation:chip .6s cubic-bezier(.3,1.6,.5,1) backwards;animation-delay:calc(var(--n,0)*18ms + .2s)}
@keyframes pop{from{opacity:0;transform:perspective(800px) rotateX(-35deg) rotateY(12deg) translateY(40px) translateZ(-60px)}}
@keyframes chip{from{opacity:0;transform:scale(.3) rotate(-12deg)}}
.tilt{position:relative;transition:transform .25s ease,border-color .25s;transform-style:preserve-3d;will-change:transform}
.tilt::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(circle at var(--gx,50%) var(--gy,50%),rgb(168 88 42 / .12),transparent 55%);opacity:0;transition:opacity .3s}
.tilt:hover::after{opacity:1}
.hero h1,.intro h1{background:linear-gradient(100deg,var(--fg) 40%,#d9894e 50%,var(--fg) 60%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 7s ease-in-out infinite}
@keyframes shine{0%,100%{background-position:100% 0}50%{background-position:0 0}}
.intro{position:relative}
.intro-art{margin:0;max-width:520px}
.intro-art img{display:block;width:100%;height:auto;filter:drop-shadow(0 24px 40px rgb(60 40 20 / .18))}
@media(min-width:1000px){
  .intro.has-art{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);column-gap:2rem;align-items:center}
  .intro.has-art>:not(.intro-art){grid-column:1}
  .intro.has-art .intro-art{grid-column:2;grid-row:1 / span 3}
  .has3d .intro-art{opacity:0;transition:opacity 1s}
}
.media{margin:0;display:grid;gap:.6rem}
.media video,.media img{display:block;width:100%;height:auto;border-radius:1.15rem;border:1px solid var(--line);background:var(--panel)}
.media figcaption{color:var(--muted);font-size:.92rem}
.shots{display:grid;gap:1rem}
@media(min-width:700px){.shots{grid-template-columns:2fr 1fr}}
@media(prefers-reduced-motion:reduce){.hero h1,.intro h1{animation:none;background:none;color:var(--fg)}}
.has3d main .btn{text-shadow:none}

/* ===== Teams, mega menu and motion layer ===== */
:root{--digital:#a8582a;--lang:#127569;--global:#5a4bbd}
.team-d{--team:var(--digital)}.team-l{--team:var(--lang)}.team-b{--team:var(--global)}
@property --spin{syntax:"<angle>";inherits:false;initial-value:0deg}

/* rolling text: the word rolls up and a coloured copy rolls in */
.roll{display:inline-flex;overflow:hidden;vertical-align:bottom;line-height:1.35}
.roll>span{display:block;transition:transform .55s cubic-bezier(.7,0,.2,1);text-shadow:0 1.35em 0 var(--team,var(--accent))}
a:hover>.roll>span,a:focus-visible>.roll>span,summary:hover .roll>span,details[open]>summary .roll>span,.mega-list a:hover .roll>span,.mega-list a:focus-visible .roll>span{transform:translateY(-1.35em)}

/* menu triggers */
.links{gap:1.4rem}
.links>a,details.menu>summary{position:relative;padding:.35rem 0}
.links>a::after,details.menu>summary::before{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--team,var(--accent));transform:scaleX(0);transform-origin:right;transition:transform .45s cubic-bezier(.7,0,.2,1)}
.links>a:hover::after,details.menu:hover>summary::before,details.menu[open]>summary::before{transform:scaleX(1);transform-origin:left}
details.menu summary::after{display:inline-block;transition:transform .3s}
details.menu[open] summary::after{transform:rotate(180deg)}

/* mega panel */
details[open] .drop{position:fixed;left:50%;top:4.4rem;transform:translateX(-50%);width:min(900px,94vw);grid-template-columns:1.35fr 1fr;gap:1.4rem;padding:1.4rem;border-radius:1.4rem;
  background:color-mix(in srgb,var(--panel) 92%,transparent);backdrop-filter:blur(18px);border:1px solid color-mix(in srgb,var(--team) 35%,var(--line));
  box-shadow:0 30px 70px rgb(60 40 20 / .16);animation:megaIn .5s cubic-bezier(.16,.84,.24,1) both;transform-origin:50% 0}
@keyframes megaIn{from{opacity:0;transform:translateX(-50%) perspective(900px) rotateX(-14deg) translateY(-14px) scale(.97)}}
.mega-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:.2rem .8rem}
.mega-list a{display:grid;gap:.05rem;padding:.55rem .7rem;border-radius:.8rem;text-decoration:none;transition:background .25s,transform .25s}
.mega-list a:hover,.mega-list a:focus-visible{background:color-mix(in srgb,var(--team) 12%,transparent);transform:translateX(4px)}
.mega-list small{color:var(--muted);font-size:.8rem;line-height:1.3}
details[open] .mega-list li{animation:itemIn .5s cubic-bezier(.16,.84,.24,1) both}
details[open] .mega-list li:nth-child(1){animation-delay:.04s}details[open] .mega-list li:nth-child(2){animation-delay:.08s}
details[open] .mega-list li:nth-child(3){animation-delay:.12s}details[open] .mega-list li:nth-child(4){animation-delay:.16s}
details[open] .mega-list li:nth-child(5){animation-delay:.2s}details[open] .mega-list li:nth-child(6){animation-delay:.24s}
details[open] .mega-list li:nth-child(7){animation-delay:.28s}details[open] .mega-list li:nth-child(8){animation-delay:.32s}
details[open] .mega-list li:nth-child(n+9){animation-delay:.36s}
@keyframes itemIn{from{opacity:0;transform:translateY(12px)}}
.mega-preview{display:grid;gap:.6rem;align-content:start;padding:1rem;border-radius:1.1rem;text-decoration:none;
  background:radial-gradient(120% 90% at 50% 20%,color-mix(in srgb,var(--team) 22%,transparent),transparent 70%),var(--bg);border:1px solid var(--line)}
.mega-preview img{width:100%;aspect-ratio:4/3;object-fit:contain;filter:drop-shadow(0 14px 24px rgb(60 40 20 / .18))}
.mega-preview img.swap{animation:swapIn .5s cubic-bezier(.16,.84,.24,1)}
@keyframes swapIn{from{opacity:0;transform:scale(.85) rotate(-6deg);filter:blur(8px)}}
.mega-desc{color:var(--muted);font-size:.92rem;min-height:2.6em}
.mega-more{color:var(--team);font-weight:480}
.drawer .kicker a{color:var(--team);text-decoration:none}
.drawer>div{border-left:2px solid var(--team,var(--line));padding-left:.8rem}

/* scroll progress */
.progress{position:fixed;left:0;right:0;top:0;height:3px;z-index:60;transform-origin:0 50%;transform:scaleX(0);
  background:linear-gradient(90deg,var(--digital),var(--lang),var(--global));pointer-events:none}
@supports (animation-timeline: scroll()){.progress{animation:grow linear both;animation-timeline:scroll(root)}}
@keyframes grow{to{transform:scaleX(1)}}

/* page transitions between pages */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vtOut .35s cubic-bezier(.7,0,.84,0) both}
::view-transition-new(root){animation:vtIn .55s cubic-bezier(.16,.84,.24,1) both}
@keyframes vtOut{to{opacity:0;transform:scale(.97);filter:blur(6px)}}
@keyframes vtIn{from{opacity:0;transform:translateY(24px) scale(1.01)}}

/* two teams split */
.teams{display:flex;flex-direction:column;gap:1rem}
.team{flex:1;display:grid;gap:.7rem;align-content:start;padding:1.8rem;border-radius:1.6rem;text-decoration:none;position:relative;overflow:hidden;isolation:isolate;
  background:var(--panel);border:1px solid color-mix(in srgb,var(--team) 40%,var(--line));transition:flex-grow .7s cubic-bezier(.16,.84,.24,1),border-color .3s,transform .4s}
.team::before{content:"";position:absolute;inset:-40%;z-index:-1;background:conic-gradient(from var(--spin),transparent 0 70%,color-mix(in srgb,var(--team) 45%,transparent),transparent);animation:spin 6s linear infinite;opacity:.0;transition:opacity .5s}
.team::after{content:"";position:absolute;inset:1px;z-index:-1;border-radius:inherit;background:radial-gradient(60% 70% at var(--gx,30%) var(--gy,20%),color-mix(in srgb,var(--team) 16%,transparent),transparent 70%),var(--panel)}
.team:hover::before{opacity:1}
.team h2{font-size:clamp(1.8rem,3.4vw,2.8rem);color:var(--fg)}
.team .kicker{color:var(--team)}
.team-more{color:var(--team);font-weight:480;margin-top:auto}
.team .ticks li::before{border-color:var(--team)}
@media(min-width:900px){.teams{flex-direction:row;min-height:440px}.teams:hover .team{flex-grow:.8}.teams .team:hover{flex-grow:1.4}}
@keyframes spin{to{--spin:360deg}}

/* global band */
.global-band{display:grid;gap:1.6rem;align-items:center;--team:var(--global);border-color:color-mix(in srgb,var(--global) 40%,var(--line));
  background:radial-gradient(80% 120% at 0% 0%,color-mix(in srgb,var(--global) 14%,transparent),transparent 60%),var(--panel)}
.global-band .kicker{color:var(--global)}
@media(min-width:1000px){.global-band{grid-template-columns:1fr 1.1fr;padding:2rem}}
.mini-steps{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem;padding:0;margin:.4rem 0 1rem;counter-reset:ms}
.mini-steps li{counter-increment:ms;padding:.3rem .75rem;border-radius:999px;border:1px solid var(--line);font-size:.88rem;background:var(--bg)}
.mini-steps li::before{content:counter(ms) " ";color:var(--global)}
.motion .rv.in .mini-steps li{animation:chip .6s cubic-bezier(.3,1.6,.5,1) backwards}
.motion .rv.in .mini-steps li:nth-child(2){animation-delay:.08s}.motion .rv.in .mini-steps li:nth-child(3){animation-delay:.16s}
.motion .rv.in .mini-steps li:nth-child(4){animation-delay:.24s}.motion .rv.in .mini-steps li:nth-child(5){animation-delay:.32s}
.motion .rv.in .mini-steps li:nth-child(6){animation-delay:.4s}

/* image cards */
.img-cards a.card{padding:0;overflow:hidden;gap:.2rem;padding-bottom:1rem;border-top:3px solid var(--team)}
.img-cards img{display:block;width:100%;aspect-ratio:16/10;object-fit:contain;padding:.6rem 1.5rem 0;
  background:radial-gradient(70% 80% at 50% 45%,color-mix(in srgb,var(--team) 18%,transparent),transparent 70%);transition:transform .7s cubic-bezier(.16,.84,.24,1)}
.img-cards a.card:hover img{transform:scale(1.08) rotate(-3deg)}
.img-cards strong,.img-cards .note{padding:0 1rem}
.motion .rv:not(.in) .img-cards img{clip-path:inset(0 0 100% 0)}
.motion .rv.in .img-cards img{clip-path:inset(0);transition:clip-path 1s cubic-bezier(.16,.84,.24,1),transform .7s cubic-bezier(.16,.84,.24,1)}

/* split copy blocks */
.split-copy{align-items:center;gap:1.6rem}
.split-copy>div{display:grid;gap:.8rem}

/* free offer card with spinning border */
.offer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.2rem;padding:1.6rem;border:1px solid transparent;
  background:linear-gradient(var(--panel),var(--panel)) padding-box,conic-gradient(from var(--spin),var(--digital),var(--lang),var(--global),var(--digital)) border-box;animation:spin 5s linear infinite}
.offer>div{display:grid;gap:.4rem;max-width:60ch}
.offer h2{margin:0}

/* paper statement */
.statement{margin:0;background:#f6f0e4;color:#2a241c;border-radius:.6rem;padding:1.4rem 1.5rem;display:grid;gap:.6rem;box-shadow:0 24px 50px rgb(60 40 20 / .16);
  transform:rotate(-1.5deg);transition:transform .5s cubic-bezier(.16,.84,.24,1);position:relative;text-shadow:none!important}
.statement:hover{transform:rotate(0) scale(1.02)}
.statement *{text-shadow:none!important}
.statement .kicker{color:#a2582a}
.statement .st-title{font-family:Fraunces,serif;font-size:1.25rem;margin:0}
.statement dl{display:grid;grid-template-columns:auto 1fr;gap:.3rem 1rem;margin:0;font-size:.92rem}
.statement dt{color:#7a6e60}.statement dd{margin:0;border-bottom:1px dashed #c9bda9}
.statement .note{color:#6c6255}
.statement::after{content:"✓";position:absolute;right:1rem;top:1rem;width:3.2rem;height:3.2rem;border-radius:50%;display:grid;place-items:center;font-size:1.4rem;
  color:#f6f0e4;background:radial-gradient(circle at 35% 30%,#e4a96e,#a2582a);box-shadow:0 0 0 4px #f6f0e4,0 0 0 6px #c98b52}
.byline{color:var(--muted);font-size:.9rem}

/* marquee of greetings */
.marquee{overflow:hidden;border-top:1px solid var(--line);padding:.6rem 0;position:relative;z-index:1;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex;width:max-content;gap:1.6rem;align-items:center;animation:marq 60s linear infinite;font-family:Fraunces,"Noto Sans JP","Noto Naskh Arabic",serif;font-size:clamp(1.8rem,4.5vw,3.6rem);white-space:nowrap}
.marquee.rev .marquee-track{animation-direction:reverse;color:transparent;-webkit-text-stroke:1px color-mix(in srgb,var(--fg) 45%,transparent)}
.marquee i{font-style:normal;color:var(--accent);font-size:.5em}
@keyframes marq{to{transform:translateX(-50%)}}
footer{margin-top:0}

/* footer wordmark */
.wordmark{font-family:Fraunces,serif;font-size:clamp(4.5rem,19vw,17rem);line-height:.85;letter-spacing:-.05em;margin:1.5rem auto 0;text-align:center;user-select:none;
  color:transparent;-webkit-text-stroke:1px color-mix(in srgb,var(--accent) 55%,transparent);background-size:300% 100%;-webkit-background-clip:text;background-clip:text}
.wordmark:hover{background-image:linear-gradient(90deg,var(--digital),var(--lang),var(--global),var(--digital));-webkit-text-stroke-color:transparent;animation:wm 4s linear infinite}
@keyframes wm{to{background-position:300% 0}}

/* custom cursor */
.cursor,.cursor-dot{position:fixed;left:0;top:0;pointer-events:none;z-index:80;border-radius:50%;transform:translate(-50%,-50%)}
.cursor{width:38px;height:38px;border:1.5px solid var(--accent);transition:width .35s cubic-bezier(.16,.84,.24,1),height .35s cubic-bezier(.16,.84,.24,1),background .3s,border-color .3s;display:grid;place-items:center;}
.cursor span{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:#fff;opacity:0;transition:opacity .2s}
.cursor.is-link{width:64px;height:64px;background:rgb(168 88 42 / .1)}
.cursor.is-view{width:92px;height:92px;background:var(--accent);border-color:var(--accent);mix-blend-mode:normal}
.cursor.is-view span{opacity:1}
.cursor-dot{width:6px;height:6px;background:var(--accent)}
.cursor.hide,.cursor-dot.hide{opacity:0}
.magnetic{transition:transform .35s cubic-bezier(.16,.84,.24,1)}

/* decode effect keeps width steady */
.decoding{font-variant-ligatures:none}

@media(prefers-reduced-motion:reduce){
  .marquee-track,.offer,.team::before,.wordmark{animation:none}
  details[open] .drop,details[open] .mega-list li,.mega-preview img.swap{animation:none}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
  .progress{display:none}
}
/* fixes */
details[open] .drop{background:var(--panel)}
.team,.team:hover{color:var(--fg)}
.team p:not(.kicker){color:var(--muted)}
.team:hover .team-more{letter-spacing:.02em}
@media(min-width:1000px){.foot{grid-template-columns:1.2fr repeat(4,1fr)}}

/* light theme details */
.nav{background:color-mix(in srgb,var(--bg) 86%,transparent)}
.card{box-shadow:0 1px 2px rgb(60 40 20 / .04),0 8px 24px rgb(60 40 20 / .05)}
.statement{border:1px solid #e3d6c2}
.btn:hover{color:var(--ink)}
.ghost:hover{color:var(--fg)}
.lang-wall li,.mini-steps li{background:var(--panel)}
.orbit{background:radial-gradient(280px 160px at 50% 40%,color-mix(in srgb,var(--accent) 14%,transparent),transparent 70%),var(--panel)}
.has3d main :is(p,li,dd,dt,summary,figcaption,h2,h3,.kicker,td,th){text-shadow:0 0 14px var(--bg),0 0 4px var(--bg)}
.media video,.media img{background:var(--panel)}

/* ===== Layout patterns adapted from the agencies we studied ===== */
:root{--dark:#1f1b16;--dark-fg:#f3ede3;--dark-muted:#b9ad9c;--tint:#efe8dc}
.text-link{color:var(--team,var(--accent));text-decoration:none;font-weight:480}
.text-link:hover{text-decoration:underline}
.sec-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.4rem 1.5rem;margin-bottom:1rem}
.sec-head h2{margin:0}

/* hero: copy on the left, facts on the right */
.intro-ticks{margin:.9rem 0 .2rem;font-size:.97rem}
.hero .actions,.intro .actions{margin-top:1.1rem}
.hero-facts{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--line);border-radius:1.4rem;background:var(--panel);overflow:hidden;box-shadow:0 18px 50px rgb(60 40 20 / .08)}
.hero-facts li{display:grid;gap:.25rem;align-content:start;padding:1.4rem 1.3rem;border-bottom:1px solid var(--line)}
.hero-facts li:nth-child(odd){border-right:1px solid var(--line)}
.hero-facts li:nth-last-child(-n+2){border-bottom:0}
.hero-facts strong{font-family:Fraunces,serif;font-weight:460;font-size:clamp(2.6rem,5vw,3.6rem);line-height:1;color:var(--accent)}
.hero-facts li:nth-child(2) strong{color:var(--lang)}.hero-facts li:nth-child(3) strong{color:var(--global)}
.hero-facts span{color:var(--muted);font-size:.92rem}

/* trust strip */
.trust{display:grid;gap:.8rem;padding:1.2rem 0;border-block:1px solid var(--line)}
.trust ul{list-style:none;margin:0;padding:0;display:grid;gap:.6rem 2rem}
.trust li{position:relative;padding-left:1.1rem;font-size:.95rem}
.trust li::before{content:"";position:absolute;left:0;top:.6em;width:.45rem;height:.45rem;border-radius:50%;background:var(--accent)}
@media(min-width:700px){.trust ul{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.trust{grid-template-columns:auto 1fr;align-items:center;column-gap:2.5rem}.trust ul{grid-template-columns:repeat(4,1fr)}}

/* heading on the left, content on the right */
.split{display:grid;gap:1rem 3rem}
.split>div{display:grid;gap:.8rem;align-content:start;min-width:0}
.split>div>p{margin:0}
@media(min-width:900px){
  .split{grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);align-items:start}
}

/* full-width bands */
.tint,.band{position:relative;padding-block:3rem;box-shadow:0 0 0 100vmax var(--band-bg);clip-path:inset(0 -100vmax);background:var(--band-bg)}
.tint{--band-bg:var(--tint)}
.band{--band-bg:var(--dark);color:var(--dark-fg)}
.band h2,.band h3{color:var(--dark-fg)}
.band .note{color:var(--dark-muted)}
.has3d main .band :is(p,li,h2,h3,.note){text-shadow:none}
.has3d main .tint :is(p,li,h2,h3,.note,.kicker){text-shadow:none}

/* numbered steps */
.num-list{list-style:none;margin:0;padding:0;display:grid;gap:1.4rem;counter-reset:num}
.num-list li{counter-increment:num;display:grid;grid-template-columns:2.6rem 1fr;column-gap:1rem;align-items:start}
.num-list li::before{content:counter(num,decimal-leading-zero);grid-row:span 2;width:2.6rem;height:2.6rem;border-radius:50%;display:grid;place-items:center;
  font-size:.85rem;font-weight:480;color:var(--dark);background:color-mix(in srgb,var(--team,var(--accent)) 55%,#fff)}
.num-list h3{margin:.45rem 0 .2rem}
.num-list p{margin:0}

/* cards with a coloured top edge */
.handle{gap:.9rem}
.handle>li{border-top:3px solid var(--team,var(--accent));font-weight:400}
.accent-cards a.card{border-top:3px solid var(--team,var(--accent));align-content:start}
.accent-cards .kicker{color:var(--team);font-size:.68rem}
.accent-cards a.card:hover{border-color:var(--team);border-top-color:var(--team)}

/* what you get */
.get-list{list-style:none;margin:0;padding:0;display:grid;gap:.7rem}
.get-list li{position:relative;padding:.9rem 1rem .9rem 2.6rem;background:var(--panel);border:1px solid var(--line);border-radius:.9rem}
.get-list li::before{content:"";position:absolute;left:1.05rem;top:1.3rem;width:.65rem;height:.36rem;border-left:2px solid var(--team,var(--accent));border-bottom:2px solid var(--team,var(--accent));transform:rotate(-45deg)}
@media(min-width:700px){.get-list{grid-template-columns:1fr 1fr}}

/* closing call to action */
.cta-band{display:grid;gap:1.4rem;align-items:center;padding:2rem;border-radius:1.6rem;background:radial-gradient(90% 140% at 100% 100%,rgb(168 88 42 / .35),transparent 60%),var(--dark);color:var(--dark-fg)}
.cta-band h2{color:var(--dark-fg);margin:.3rem 0 .9rem;max-width:26ch}
.cta-band .kicker{color:#e4a96e}
.cta-band p{margin:0}
.has3d main .cta-band :is(p,li,h2,.kicker){text-shadow:none}
ul.ticks.inline{display:flex;flex-wrap:wrap;gap:.4rem 1.6rem;font-size:.92rem;color:var(--dark-muted)}
.cta-band ul.ticks li::before{border-color:#e4a96e}
@media(min-width:900px){.cta-band{grid-template-columns:1fr auto;padding:2.4rem 2.6rem}}

/* footer second row */
.foot-row{display:grid;gap:1.5rem;margin-top:2rem;padding-top:1.6rem;border-top:1px solid var(--line)}
.foot-row ul.ticks{font-size:.9rem;gap:.3rem}
.foot-talk .btn{margin-top:.4rem}
@media(min-width:900px){.foot-row{grid-template-columns:1fr 1.4fr 1.2fr}}

/* intro with art: the extra rows (ticks, buttons) stay in the left column */
@media(min-width:1000px){.intro.has-art .intro-art{grid-row:1 / span 6}}
.motion .rv:not(.in) :is(.num-list>li,.get-list>li,.handle>li,.hero-facts>li,.trust li){opacity:0}
.motion .rv.in :is(.num-list>li,.get-list>li,.handle>li,.hero-facts>li,.trust li){animation:pop .9s cubic-bezier(.16,.84,.24,1) backwards;animation-delay:calc(var(--n,0)*70ms + .15s)}
.motion .in .hero-facts>li{animation:pop .9s cubic-bezier(.16,.84,.24,1) backwards;animation-delay:calc(var(--n,0)*90ms + .3s)}
footer{background:var(--bg)}
.has3d footer :is(p,li,a){text-shadow:none}
@media(max-width:699px){.tint .grid-4.accent-cards{grid-template-columns:1fr 1fr;gap:.6rem}.tint .accent-cards a.card{padding:.85rem}.tint .accent-cards .note{font-size:.82rem}}