/* Base reset */
body{margin:0}
img{max-width:100%}
[hidden]{display:none!important}

/* Layout: one promise and one button. The page runs in a single line from the promise to the booking form:
   who we are (checkable), what the 45 minutes are, real signings, the two directors, book.
   Cobalt is reserved for the button and the verified mark; amber for the one underlined word and the "&". */
:root{
  --ground:#0a0f24;
  --surface:#111836;
  --ink:#eef1fb;
  --muted:#a2abc8;
  --line:#27305a;
  --cobalt:#2a4ce6;
  --on-cobalt:#f4f6ff;
  --link:#93a6ff;
  --amber:#ffc02e;
  --pitch:#12602f;
  --pitch-mow:#187238;
  --pitch-spot:#0e4f26;
  --panel:#141c42;
  --on-panel:#eef1fb;
  --panel-muted:#aab3d0;
  --panel-line:#2f3a6e;
  --shade:rgba(10,15,36,.9);
  --logo-ground:#ffffff;

  --display:"Archivo","Arial Narrow","Helvetica Neue",Arial,sans-serif;
  --body:"IBM Plex Sans","Segoe UI",system-ui,-apple-system,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;

  --gutter:clamp(16px,4vw,40px);
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{background:var(--ground);color:var(--ink);font:400 1.0625rem/1.6 var(--body);-webkit-font-smoothing:antialiased}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit}
:focus-visible{outline:3px solid var(--link);outline-offset:3px}

.wrap{max-width:1180px;margin-inline:auto;padding-inline:var(--gutter)}
.band{padding-block:clamp(56px,8vw,108px)}
.band + .band{border-top:1px solid var(--line)}

.eyebrow{font:500 .75rem/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.display{font-family:var(--display);font-stretch:125%;font-variation-settings:"wdth" 125;text-transform:uppercase;text-wrap:balance}
h2.display{font-weight:800;font-size:clamp(1.7rem,3.6vw,2.9rem);line-height:1.02;letter-spacing:-.015em}
h3{font:600 1.125rem/1.3 var(--body)}
.lead{font-size:clamp(1.0625rem,1.5vw,1.25rem);line-height:1.55;max-width:34em}
.copy{color:var(--muted);max-width:38em}
.note{font:400 .8125rem/1.5 var(--mono);color:var(--muted)}

.head{display:flex;flex-direction:column;gap:14px;margin-bottom:clamp(28px,4vw,48px);container-type:inline-size}
.head h2.display{font-size:min(clamp(1.7rem,3.6vw,2.9rem),7.4cqw)}
.head .lead{margin-top:6px}
.head.tight{margin-bottom:0}

/* Header: the mark, the language, the one button */
.site-head{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--ground);border-bottom:1px solid var(--line)}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:68px}
.wordmark{font:800 1.125rem/1 var(--display);font-stretch:125%;font-variation-settings:"wdth" 125;letter-spacing:.01em;text-transform:uppercase;text-decoration:none;white-space:nowrap}
.wordmark{display:inline-flex;align-items:center;gap:12px}
.wordmark b{color:var(--amber);font-weight:inherit}
.wordmark .mark{height:38px;width:auto;display:block}
.head-actions{display:flex;align-items:center;gap:clamp(10px,2vw,18px)}
.lang{display:flex;border:1px solid var(--line);border-radius:2px;overflow:hidden}
.lang button{font:500 .75rem/1 var(--mono);letter-spacing:.1em;background:none;color:var(--muted);border:0;padding:11px 11px;cursor:pointer}
.lang button[aria-pressed="true"]{background:var(--ink);color:var(--ground)}
.lang button:focus-visible{outline-offset:-3px}

.btn{display:inline-flex;align-items:center;justify-content:center;text-align:center;font:600 .9375rem/1.15 var(--body);text-decoration:none;border-radius:2px;padding:14px 20px;border:1px solid transparent;cursor:pointer;transition:transform .15s ease,background-color .15s ease}
.btn-primary{background:var(--cobalt);color:var(--on-cobalt)}
.btn-big{font-size:1.0625rem;padding:18px 26px}
.site-head .btn{padding:12px 16px}
.btn:hover{transform:translateY(-1px)}
.actions{display:flex;flex-wrap:wrap;gap:12px}

/* Hero */
.hero{padding-block:clamp(36px,5vw,72px) clamp(48px,7vw,96px)}
.hero-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,5vw,72px);align-items:center}
.hero-text{display:flex;flex-direction:column;gap:clamp(20px,2.6vw,30px);min-width:0;container-type:inline-size}
.hero h1{font-weight:900;font-size:clamp(2.3rem,7.4vw,6rem);font-size:min(clamp(2.3rem,7.4vw,6rem),12.5cqw);line-height:.94;letter-spacing:-.025em}
.hero h1 em{font-style:normal;text-decoration:underline;text-decoration-color:var(--amber);text-decoration-thickness:.11em;text-underline-offset:.1em}
.facts{display:flex;flex-direction:column;gap:8px;border-top:1px solid var(--line);padding-top:18px}
.facts li{font:400 .8125rem/1.5 var(--mono);color:var(--muted)}
.facts li.verified{color:var(--amber);font-weight:500}

.photo{margin:0;min-width:0;display:flex;flex-direction:column;gap:10px}
.photo img{display:block;width:100%;height:auto;border-radius:2px}
.photo figcaption,.shot figcaption{font:400 .8125rem/1.5 var(--mono);color:var(--muted)}
.hero .photo img{aspect-ratio:4 / 5;object-fit:cover}

/* Proof: three things anyone can check */
.creds{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,2vw,24px)}
.cred{display:flex;flex-direction:column;align-items:flex-start;gap:18px;padding:20px;background:var(--surface);border:1px solid var(--line);border-radius:2px;min-width:0}
.cred-logo{flex:none;width:136px;height:88px;padding:12px 14px;background:var(--logo-ground);border-radius:2px;display:flex;align-items:center;justify-content:center}
.cred-logo img{display:block;max-width:100%;max-height:100%;width:auto;height:auto}
.cred-logo.wide{padding:8px 6px}
.cred-text{display:flex;flex-direction:column;gap:6px;min-width:0}
.cred-title{font:700 1.0625rem/1.25 var(--body)}
.cred-sub{font-size:.9375rem;line-height:1.45;color:var(--muted)}
.cred-link{color:var(--link);font-weight:500;font-size:.9375rem;margin-top:4px}
.creds + .note{margin-top:18px}

/* Free profile: the form, then the result it produces */
.profile-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,72px);align-items:start}
.profile-form{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:18px}
.profile-form .full{grid-column:1 / -1}
.check{display:flex;gap:12px;align-items:flex-start;min-width:0}
.check input{flex:none;width:22px;height:22px;margin:2px 0 0;padding:0;accent-color:var(--cobalt)}
.check label{font-size:.9375rem;color:var(--muted)}
.result{display:flex;flex-direction:column;gap:22px;padding:clamp(22px,3vw,34px);background:var(--surface);border:1px solid var(--amber);border-radius:2px;margin-top:clamp(28px,4vw,44px);min-width:0}
.result:focus{outline:none}
.score{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px}
.score .amount{font:800 clamp(2.2rem,4.6vw,3.4rem)/1 var(--display);font-stretch:125%;font-variation-settings:"wdth" 125;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.score .per{color:var(--muted)}
.checks{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.checks li{display:grid;grid-template-columns:5em minmax(0,1fr);gap:2px 14px;padding-block:13px;border-bottom:1px solid var(--line)}
.checks .state{grid-row:1 / span 2;font:500 .75rem/2 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.checks .ok .state{color:var(--link)}
.checks .miss .state{color:var(--amber)}
.checks .what{font-weight:600}
.checks .why{grid-column:2;color:var(--muted);font-size:.9375rem}
.result-next{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 28px}
.result-next div{display:flex;flex-direction:column;gap:6px;flex:1 1 18em;min-width:0}
.result-next p{color:var(--muted)}

/* The evaluation */
.consult-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:start}
.steps{display:flex;flex-direction:column;counter-reset:step;border-top:1px solid var(--ink)}
.step{display:grid;grid-template-columns:2.2em minmax(0,1fr);column-gap:8px;row-gap:6px;padding-block:clamp(18px,2.4vw,26px);border-bottom:1px solid var(--line);counter-increment:step}
.step::before{content:counter(step);grid-row:1 / span 2;font:500 .8125rem/1.9 var(--mono);color:var(--amber)}
.step h3,.step p{grid-column:2;min-width:0}
.step p{color:var(--muted);font-size:1rem}
.session-card{display:flex;flex-direction:column;gap:24px;padding:clamp(22px,3vw,34px);background:var(--surface);border:1px solid var(--line);border-radius:2px;min-width:0}
.price{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px}
.price .amount{font:800 clamp(2.2rem,4.6vw,3.4rem)/1 var(--display);font-stretch:125%;font-variation-settings:"wdth" 125;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.price .per{color:var(--muted)}
.price-note{margin-top:-10px}
.ledger{display:grid;grid-template-columns:minmax(0,8em) minmax(0,1fr);border-top:1px solid var(--line)}
.ledger dt,.ledger dd{padding-block:14px;border-bottom:1px solid var(--line)}
.ledger dt{font:500 .75rem/1.6 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding-right:16px}
.days{display:flex;flex-direction:column;margin-top:6px}
.days li{display:flex;justify-content:space-between;gap:16px;padding-block:10px;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums}
.days li span:first-child{min-width:0}
.days li span:last-child{color:var(--muted);text-align:right}
.session-card .btn{align-self:stretch}
.terms{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,40px);margin-top:clamp(32px,5vw,56px)}
.term{display:flex;flex-direction:column;gap:8px;border-top:1px solid var(--line);padding-top:18px;min-width:0}
.term p{color:var(--muted);font-size:1rem}

/* Signings and countries */
.signings{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.6vw,20px);align-items:start}
.shot{margin:0;display:flex;flex-direction:column;gap:10px;min-width:0}
.shot img{display:block;width:100%;height:auto;aspect-ratio:4 / 5;object-fit:cover;border-radius:2px}
.world-intro{display:flex;flex-direction:column;gap:10px;margin-block:clamp(40px,6vw,72px) clamp(20px,3vw,32px)}
.regions{display:flex;flex-wrap:wrap;gap:clamp(12px,1.6vw,20px)}
.region{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;gap:10px;flex:1 1 230px;height:clamp(280px,26vw,360px);padding:18px;container-type:inline-size;scroll-snap-align:start;background:var(--panel) center bottom / cover no-repeat;border-radius:2px;color:var(--on-panel);min-width:0}
.region::before{content:"";position:absolute;z-index:-1;inset:0;background:linear-gradient(180deg,transparent 25%,var(--shade) 92%)}
.region.canada{background-image:url(../img/canada.jpg?v=407f0e5d)}
.region.usa{background-image:url(../img/usa.jpg?v=f1f66631);background-position:15% center}
.region.uk{background-image:url(../img/uk-stadium.jpg?v=dfd7633f);background-position:center bottom}
.region.venezuela{background-image:url(../img/venezuela.jpg?v=c047b97c);background-position:35% bottom}
.region.guatemala{background-image:url(../img/guatemala.jpg?v=b2656800);background-position:35% top}
.region.portugal{background-image:url(../img/portugal.jpg?v=78801ced);background-position:45% top}
.region.ecuador{background-image:url(../img/ecuador.jpg?v=f059c0f0);background-position:35% bottom}
.region .countries{font:500 .75rem/1.5 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--amber)}
.region .display{font-weight:800;font-size:1.25rem;font-size:clamp(1rem,10cqw,1.9rem);line-height:1;letter-spacing:-.02em;overflow-wrap:anywhere}

/* The agency: two halves of one pitch, two directors */
.agency-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,5vw,72px);align-items:center}
.agency-text{display:flex;flex-direction:column;gap:20px;min-width:0}
.agency-text .head{margin-bottom:0}
.pitch{min-width:0;margin:0}
.pitch svg{display:block;width:100%;height:auto;background:var(--pitch);border-radius:2px}
.pitch .mow{fill:var(--pitch-mow)}
.pitch .chalk{fill:none;stroke:var(--on-cobalt);stroke-width:2;opacity:.85}
.pitch .spot{fill:var(--on-cobalt)}
.pitch .circle{fill:var(--pitch-spot);stroke:var(--on-cobalt);stroke-width:2}
.pitch .half{fill:var(--on-cobalt);font:800 33px var(--display);font-stretch:125%;font-variation-settings:"wdth" 125}
.pitch .amp{fill:var(--amber);font:900 70px var(--display);font-stretch:125%;font-variation-settings:"wdth" 125}
.people{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,3vw,32px);margin-top:clamp(32px,5vw,56px)}
.person{display:flex;gap:22px;align-items:center;padding-block:24px;border-top:1px solid var(--ink);min-width:0}
.portrait{flex:none;width:128px;height:auto;aspect-ratio:4 / 5;object-fit:cover;display:block;border-radius:2px}
.person-text{display:flex;flex-direction:column;gap:6px;min-width:0}
.person-text .name{font:700 1.375rem/1.2 var(--body)}
.person-text .role{color:var(--muted)}
.person-text .place{font:400 .8125rem/1.5 var(--mono);letter-spacing:.04em;color:var(--muted)}
.licence{font:500 .75rem/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--link)}

/* Booking */
.book-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,72px);align-items:start}
.book-info{display:flex;flex-direction:column;gap:22px;min-width:0}
.points{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.points li{padding-block:12px;border-bottom:1px solid var(--line);color:var(--muted)}
form{display:grid;grid-template-columns:minmax(0,1fr);gap:22px;min-width:0;max-width:860px}
.req{color:var(--amber)}
.field{display:flex;flex-direction:column;gap:8px;min-width:0}
label{font:400 1rem/1.4 var(--body);color:var(--ink)}
input,select,textarea{width:100%;font:400 1rem/1.4 var(--body);color:var(--ink);background:var(--surface);border:1px solid var(--muted);border-radius:2px;padding:16px 16px}
textarea{min-height:150px;resize:vertical}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline-offset:0;border-color:var(--link)}
.form-foot{display:flex;flex-wrap:wrap;align-items:center;gap:16px}
.status{font-size:.9375rem;color:var(--muted);min-width:0;flex:1 1 16em}
.status a{color:var(--link)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.other{margin-top:clamp(40px,6vw,72px);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.other summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:20px;font-weight:500;color:var(--link)}
.other summary::-webkit-details-marker{display:none}
.other summary::after{content:"+";flex:none;font:500 1.25rem/1 var(--mono);color:var(--muted)}
.other[open] summary::after{content:"\2212"}
.other-body{padding-block:8px 32px}

/* Footer */
.site-foot{background:var(--panel);color:var(--on-panel);padding-block:clamp(40px,6vw,72px) 32px}
.foot-top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:32px;padding-bottom:36px;border-bottom:1px solid var(--panel-line)}
.foot-mark{font:900 clamp(1.8rem,5vw,3.4rem)/1 var(--display);font-stretch:125%;font-variation-settings:"wdth" 125;text-transform:uppercase;letter-spacing:-.02em}
.foot-mark span{color:var(--amber)}
.foot-brand{display:flex;flex-direction:column;gap:20px;min-width:0}
.foot-brand img{height:64px;width:auto;display:block;align-self:flex-start}
.foot-nav{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.foot-nav a{text-decoration:none;color:var(--panel-muted);font-size:.9375rem}
.foot-nav a:hover{color:var(--on-panel)}
.foot-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding-top:22px;font:400 .8125rem/1.5 var(--mono);color:var(--panel-muted)}

@media (max-width:860px){
  .hero-grid,.consult-grid,.agency-grid,.book-grid,.profile-grid,.terms{grid-template-columns:minmax(0,1fr);align-items:start}
  .creds{grid-template-columns:minmax(0,1fr)}
  .cred{flex-direction:row;align-items:center}
  .regions{flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:thin;padding-bottom:6px}
  .region{flex:0 0 min(64vw,280px)}
  .hero .photo{max-width:520px}
}
@media (max-width:600px){
  .wordmark span{display:none}
  .people,.profile-form{grid-template-columns:minmax(0,1fr)}
  .checks li{grid-template-columns:4.2em minmax(0,1fr)}
  .ledger{grid-template-columns:minmax(0,1fr)}
  .ledger dt{border-bottom:0;padding-bottom:0}
  .ledger dd{padding-top:4px}
  .portrait{width:96px}
  .cred-logo{width:104px;height:70px;padding:9px 10px}
  .signings{display:flex;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:thin;padding-bottom:6px;margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter)}
  .signings .shot{flex:0 0 72vw;scroll-snap-align:center}
  .form-foot .btn{flex:1 1 100%}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .btn{transition:none}
  .btn:hover{transform:none}
}

/* ===== Motion system =====
   Everything here is switched on by the script (class "fx" on the page). Without scripts, or when the
   visitor's device asks for reduced motion, the page is simply shown as it is. */
html{background:var(--ground)}
main section:focus,main:focus{outline:none}

/* Opening: three slanted bars and the logo, once, on arrival */
.stinger{display:none}
.fx-pending .stinger,.fx .stinger{display:block;position:fixed;inset:0;z-index:100;overflow:hidden;pointer-events:none}
.stinger i{position:absolute;top:-10%;bottom:-10%;left:-60%;width:220%;transform:translateX(-130%) skewX(-14deg)}
.stinger i:nth-child(1){background:var(--amber)}
.stinger i:nth-child(2){background:var(--cobalt)}
.stinger i:nth-child(3){background:var(--panel)}
.stinger-logo{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;opacity:0;color:var(--on-panel);font:800 clamp(1.4rem,4vw,2.4rem)/1 var(--display);font-stretch:125%;font-variation-settings:"wdth" 125;text-transform:uppercase;letter-spacing:.01em}
.stinger-logo img{height:clamp(64px,10vw,104px);width:auto}
.stinger-logo b{color:var(--amber);font-weight:inherit}
.fx-pending .stinger i{transform:translateX(0) skewX(-14deg)}
.fx-pending .stinger-logo{opacity:1}
.stinger.leave i{transform:translateX(130%) skewX(-14deg);transition:transform .6s cubic-bezier(.76,0,.24,1)}
.stinger.leave i:nth-child(2){transition-delay:.08s}
.stinger.leave i:nth-child(1){transition-delay:.16s}
.stinger.leave .stinger-logo{opacity:0;transition:opacity .15s ease}
.fx-pending .stinger{animation:stinger-fallback .4s ease 2.6s forwards}
@keyframes stinger-fallback{to{opacity:0;visibility:hidden}}

/* Reading progress along the bottom edge of the header */
.progress{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--amber);transform:scaleX(var(--p,0));transform-origin:left;pointer-events:none}
.site-head{transition:box-shadow .3s ease}
.site-head.scrolled{box-shadow:0 14px 30px -20px var(--shade)}

/* Blocks rise into place */
.fx .up{--dir:-1}
.fx .rv{opacity:0;transform:translateY(calc(54px * var(--dir,1)));transition:opacity .8s cubic-bezier(.16,1,.3,1) var(--d,0ms),transform 1s cubic-bezier(.16,1,.3,1) var(--d,0ms)}
.fx .rv.in{opacity:1;transform:none}
/* Country cards: an endless strip moving at one steady speed */
.regions:not(.loop){max-width:1180px;margin-inline:auto;padding-inline:var(--gutter)}
.regions.loop{display:block;overflow:hidden;padding-block:16px;margin-block:-16px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.regions.loop .regions-track{display:flex;width:max-content;animation:regions-loop 46s linear infinite;will-change:transform}
.regions.loop .region{flex:0 0 auto;width:clamp(230px,23vw,320px);margin-right:clamp(12px,1.6vw,20px)}
.region{transition:translate .35s ease,scale .35s ease}
@keyframes regions-loop{to{transform:translateX(-50%)}}
.fx .session-card.rv{transform:translateY(calc(54px * var(--dir,1))) scale(.96)}
.fx .session-card.rv.in{transform:none}

/* Headlines: each word rises out of a mask */
.fx .split .w{display:inline-block;overflow:hidden;vertical-align:bottom;padding:.1em .05em .26em;margin:-.1em -.05em -.26em}
.fx .split .wi{display:inline-block;transform:translateY(calc(120% * var(--dir,1))) rotate(calc(5deg * var(--dir,1)));transform-origin:left bottom;transition:transform 1s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--d,0ms) + var(--i,0) * 55ms)}
.fx .split.in .wi{transform:none}

/* Photos: unveiled from the top while zooming out, then drifting slightly with the scroll */
.fx .frame{display:block;overflow:hidden;border-radius:2px;clip-path:inset(0 0 100% 0);transition:clip-path 1.1s cubic-bezier(.16,1,.3,1) var(--d,0ms)}
.fx .rv-img.up .frame{clip-path:inset(100% 0 0 0)}
.fx .rv-img.in .frame{clip-path:inset(0 0 0 0)}
.fx .frame img{scale:1.3;translate:0 var(--py,0px);transition:scale 1.7s cubic-bezier(.16,1,.3,1) var(--d,0ms)}
.fx .rv-img.in .frame img{scale:1.08}
.fx .rv-img figcaption{opacity:0;transition:opacity .6s ease calc(var(--d,0ms) + 500ms)}
.fx .rv-img.in figcaption{opacity:1}

/* Responses to the pointer and to presses */
.btn{transition:transform .15s ease,background-color .15s ease,translate .3s cubic-bezier(.2,.8,.2,1)}
.btn:active{transform:scale(.96)}
.cred{transition:border-color .3s ease,translate .35s cubic-bezier(.2,.8,.2,1)}
.portrait{transition:scale .5s cubic-bezier(.2,.8,.2,1)}
@media (hover:hover){
  .cred:hover{border-color:var(--amber);translate:0 -4px}
  .person:hover .portrait{scale:1.05}
  .regions.loop:hover .regions-track{animation-play-state:paused}
  .regions.loop .region:hover{translate:0 -10px;scale:1.03}
  .fx .shot.rv-img.in:hover .frame img{scale:1.15;transition-duration:.7s;transition-delay:0s}
}
/* Pitch: tilts with the scroll, and the two names run in from their halves to meet at the centre circle */
.fx .pitch svg{transform:perspective(900px) rotateX(calc(var(--tilt,0) * 26deg)) scale(calc(1 - var(--away,0) * .07));transform-origin:50% 50%;will-change:transform}
.fx .pitch-l{transform:translateX(calc(var(--apart,0) * -96px));opacity:calc(1 - var(--apart,0))}
.fx .pitch-r{transform:translateX(calc(var(--apart,0) * 96px));opacity:calc(1 - var(--apart,0))}
.fx .pitch-amp{transform-box:fill-box;transform-origin:50% 50%;transform:rotate(calc(var(--apart,0) * -220deg)) scale(calc(1 - var(--apart,0) * .85))}
.fx .snap,.fx .snap *{transition:none!important}

@media (prefers-reduced-motion: reduce){
  .stinger{display:none!important}
  .btn,.cred,.portrait{transition:none}
}

.notfound{font-weight:800;font-size:clamp(2rem,6vw,4rem);line-height:1;letter-spacing:-.02em}
.notfound-actions{margin-top:28px}

/* Links inside consent boxes, and legal links in the footer */
.check label a{color:var(--link)}
.foot-legal{display:flex;flex-wrap:wrap;gap:8px 24px}
.foot-legal a{color:var(--panel-muted)}
.foot-legal a:hover{color:var(--on-panel)}

/* Consent banner (js/consent.js) */
.cc{position:fixed;left:16px;right:16px;bottom:16px;z-index:1000;display:flex;justify-content:center;pointer-events:none}
.cc-in{pointer-events:auto;max-width:640px;width:100%;background:var(--surface);color:var(--ink);border:1px solid var(--muted);border-radius:6px;padding:20px 22px;box-shadow:0 18px 50px rgba(0,0,0,.45)}
.cc-t{margin:0 0 6px;font:500 .75rem/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--amber)}
.cc-p{margin:0 0 8px;font-size:.9375rem;line-height:1.5}
.cc-links{margin:0 0 14px;font-size:.875rem}
.cc-links a{color:var(--link)}
.cc-b{display:flex;flex-wrap:wrap;gap:10px}
.cc-b button{flex:1 1 160px;min-height:44px;font:600 .9375rem/1 var(--body);border-radius:2px;cursor:pointer;padding:12px 16px}
.cc-r{background:transparent;color:var(--ink);border:1px solid var(--ink)}
.cc-a{background:var(--cobalt);color:var(--on-cobalt);border:1px solid var(--cobalt)}
.cookie-link{background:none;border:0;padding:0;font:inherit;color:var(--panel-muted);text-decoration:underline;cursor:pointer}
.cookie-link:hover{color:var(--on-panel)}
/* Visible checkboxes on the dark background */
input[type=checkbox]{-webkit-appearance:none;appearance:none;width:22px;height:22px;min-width:22px;padding:0;margin:2px 0 0;border:2px solid var(--muted);border-radius:4px;background:transparent;display:inline-grid;place-content:center;cursor:pointer}
input[type=checkbox]:checked{background:var(--cobalt);border-color:var(--cobalt)}
input[type=checkbox]:checked::after{content:"";width:6px;height:11px;border:solid #fff;border-width:0 3px 3px 0;transform:translate(0,-1px) rotate(45deg)}
input[type=checkbox]:focus-visible{outline:2px solid var(--link);outline-offset:2px}
/* Pathway division tag beside the wordmark */
.div-tag{font:500 .6875rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--amber);border:1px solid var(--amber);border-radius:2px;padding:5px 7px;margin-left:10px;white-space:nowrap}
@media (max-width:420px){.div-tag{display:none}}
