/* Ooh My Brand! */
:root{
  --blue:#1B20C4;
  --blue-2:#2A30DE;
  --blue-deep:#1216A0;
  --night:#0B0D3D;
  --yellow:#FFC830;
  --yellow-2:#FFD766;
  --paper:#F5F2EA;
  --paper-2:#EAE5D7;
  --paper-3:#DFD8C6;
  --ink:#0D0E2B;
  --muted:#55576F;
  --line:rgba(13,14,43,.14);
  --on-dark:rgba(245,242,234,.72);

  --display:"Bricolage Grotesque",system-ui,sans-serif;
  --body:"Instrument Sans",system-ui,sans-serif;
  --serif:"Instrument Serif",Georgia,serif;

  --ease:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --spring:cubic-bezier(.34,1.56,.64,1);

  --gutter:clamp(16px,4vw,56px);
  --maxw:1400px;
  --r-lg:clamp(24px,3vw,44px);
  --inset:clamp(8px,1.1vw,16px);
  --section:clamp(88px,11vw,170px);
}

*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:90px}
body{background:var(--paper);color:var(--ink);font-family:var(--body);font-size:clamp(16px,1.05vw,18px);line-height:1.55;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip;text-rendering:optimizeLegibility}
body.no-scroll{overflow:hidden}
img,video,svg{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit}
ul,ol{list-style:none}
::selection{background:var(--yellow);color:var(--ink)}

/* paper grain */
body::after{content:"";position:fixed;inset:0;z-index:200;pointer-events:none;opacity:.07;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.skip{position:fixed;left:16px;top:-60px;z-index:300;background:var(--yellow);color:var(--ink);padding:.7em 1.1em;border-radius:12px;font-weight:600;text-decoration:none;transition:top .3s var(--ease)}
.skip:focus{top:16px}
:focus-visible{outline:3px solid var(--yellow);outline-offset:3px;border-radius:6px}
.contact :focus-visible,.form-card :focus-visible{outline-color:var(--blue)}

.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}

/* ---------- type ---------- */
h1,h2,h3,h4{font-family:var(--display);font-weight:760;letter-spacing:-.035em;line-height:.95;font-variation-settings:"opsz" 96}
h2{font-size:clamp(2.6rem,6.4vw,6.2rem)}
h2 em,.story__title em,.contact__title em{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.02em;color:var(--blue)}
.kicker{display:inline-flex;align-items:center;gap:.7em;font-size:.82rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;margin-bottom:clamp(18px,2vw,28px)}
.kicker span{display:inline-grid;place-items:center;min-width:2.4em;height:2.4em;padding:0 .5em;border-radius:999px;background:var(--ink);color:var(--paper);font-size:max(.78em,11px);letter-spacing:0}
.kicker--light span,.work .kicker span{background:var(--yellow);color:var(--ink)}

/* ---------- buttons ---------- */
.btn{position:relative;display:inline-flex;align-items:center;gap:.55em;padding:.95em 1.45em;border:0;border-radius:999px;font-weight:600;font-size:1rem;line-height:1;text-decoration:none;white-space:nowrap;cursor:pointer;isolation:isolate;overflow:hidden;transition:transform .5s var(--spring),color .35s,box-shadow .35s}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--hover,var(--ink));transform:translateY(101%);transition:transform .5s var(--ease)}
.btn:hover::before{transform:none}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.97)}
.btn .arr{width:1.05em;height:1.05em;transition:transform .45s var(--ease)}
.btn:hover .arr{transform:translate(2px,-2px) rotate(45deg)}
.btn--yellow{background:var(--yellow);color:var(--ink);--hover:var(--paper)}
.btn--blue{background:var(--blue);color:var(--paper);--hover:var(--ink)}
.btn--ink{background:var(--ink);color:var(--paper);--hover:var(--blue)}
.btn--ghost{color:currentColor;box-shadow:inset 0 0 0 1.5px currentColor;--hover:var(--paper)}
.btn--ghost:hover{color:var(--blue);box-shadow:inset 0 0 0 1.5px var(--paper)}
.btn--lg{padding:1.1em 1.7em;font-size:1.05rem}
.arr{width:1em;height:1em;display:inline-block;vertical-align:-.12em}
.arr--up{transform:rotate(-45deg)}

/* ---------- intro: the first moment of each visit ----------
   Two eyes pop in, look around, blink, the h! rises to spell ooh!, sparkles burst,
   then the view dives into a pupil and opens onto the page */
html.is-intro body::before{content:"";position:fixed;inset:0;z-index:240;background:var(--blue)}
.intro{position:fixed;inset:0;z-index:250;display:grid;place-items:center;background:var(--blue);color:var(--paper);overflow:hidden;cursor:pointer;transition:opacity .5s ease}
.intro.is-gone{opacity:0;pointer-events:none}
.intro__bg{position:absolute;inset:0;pointer-events:none;background:radial-gradient(45% 55% at 80% 15%,rgba(70,78,255,.6),transparent 70%),radial-gradient(40% 45% at 15% 90%,rgba(255,200,48,.14),transparent 70%),radial-gradient(rgba(245,242,234,.12) 1.2px,transparent 1.6px) 0 0/30px 30px}
.intro__stage{position:relative;display:flex;flex-direction:column;align-items:center;transition:transform .95s cubic-bezier(.7,0,.84,0)}
.intro.is-out .intro__stage{transform:scale(44)}
.intro__word{display:flex;align-items:baseline;font-family:var(--display);font-weight:800;font-size:min(40vw,46vh);line-height:.8;letter-spacing:-.05em;color:var(--yellow);font-variation-settings:"opsz" 96;animation:introBreathe 1.4s 2.15s ease-in-out}
.intro__eye{position:relative;display:inline-block;width:.6em;height:.6em;margin-right:.03em;border-radius:50%;background:var(--paper);box-shadow:inset 0 0 0 .1em var(--yellow);overflow:hidden;transform:scale(0);animation:introPop .75s var(--spring) .1s forwards}
.intro__eye+.intro__eye{animation-delay:.22s}
.intro__eye::after{content:"";position:absolute;inset:-2px;background:var(--yellow);transform:translateY(-101%);animation:introBlink .6s 1.5s}
.intro__pupil{position:absolute;left:50%;top:50%;width:.2em;height:.2em;margin:-.1em 0 0 -.1em;border-radius:50%;background:var(--night);animation:introLook 1.6s .6s var(--ease) forwards}
.intro__pupil::after{content:"";position:absolute;left:22%;top:20%;width:30%;height:30%;border-radius:50%;background:rgba(255,255,255,.85)}
.intro__h{display:inline-block;overflow:hidden;padding:.04em .02em 0 0}
.intro__h span{display:inline-block;transform:translateY(110%) rotate(6deg);transform-origin:0 100%;animation:introRise .8s var(--ease) 1.85s forwards}
.intro__line{max-width:88vw;margin-top:min(5vh,44px);font-family:var(--body);font-weight:600;font-size:clamp(.72rem,1.3vw,1rem);line-height:1.6;letter-spacing:.2em;text-align:center;text-transform:uppercase;opacity:0;animation:introFade .7s ease 2.3s forwards}
.intro__spark{position:absolute;left:var(--x);top:var(--y);width:var(--s);height:var(--s);color:var(--c,var(--yellow));transform:scale(0) rotate(-60deg);animation:introSpark .9s var(--spring) forwards;animation-delay:calc(2.15s + var(--k) * 60ms)}
.intro__skip{position:absolute;right:var(--gutter);bottom:clamp(18px,3vh,32px);font-size:.82rem;font-weight:600;letter-spacing:.06em;color:var(--on-dark);opacity:0;animation:introFade .6s ease .9s forwards}
@keyframes introPop{to{transform:scale(1)}}
@keyframes introLook{0%{translate:0 0}22%,38%{translate:-.13em .03em}52%,68%{translate:.13em -.05em}84%,100%{translate:0 -.03em;scale:1.3}}
@keyframes introBlink{0%,100%{transform:translateY(-101%)}18%,28%{transform:translateY(0)}46%{transform:translateY(-101%)}62%,72%{transform:translateY(0)}}
@keyframes introRise{to{transform:none}}
@keyframes introFade{to{opacity:.85}}
@keyframes introSpark{60%{transform:scale(1.2) rotate(12deg)}100%{transform:scale(1) rotate(0)}}
@keyframes introBreathe{50%{transform:scale(1.045)}}

/* ---------- start a project page ---------- */
.khead{position:relative;min-height:min(86vh,860px);display:flex;align-items:center;padding:clamp(130px,16vh,170px) 0 clamp(110px,12vw,170px);background:var(--blue);color:var(--paper);overflow:hidden;isolation:isolate}
.khead__inner{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;text-align:center;pointer-events:none}
.khead .whead__lede{margin-inline:auto}
.khead__inner a{pointer-events:auto}
.khead__title{font-size:clamp(3.6rem,11vw,11rem);font-weight:800;letter-spacing:-.055em;line-height:.86;font-variation-settings:"opsz" 96}
.khead__title .ooh{color:var(--yellow)}
.khead__jump{margin-top:clamp(26px,3vw,40px);opacity:0;transform:translateY(16px);transition:opacity 1s var(--ease) .85s,transform 1s var(--ease) .85s}
.is-loaded .khead__jump{opacity:1;transform:none}
.arr--down,.btn:hover .arr--down{transform:rotate(135deg)}
.contact--page{margin-top:0}

/* ---------- nav ---------- */
.nav{position:fixed;top:clamp(10px,1.4vw,18px);left:0;right:0;z-index:60;padding-inline:var(--gutter);transition:transform .6s var(--ease)}
.nav.is-hidden{transform:translateY(calc(-100% - 24px))}
.nav__pill{max-width:calc(var(--maxw) - 2 * var(--gutter));margin-inline:auto;display:flex;align-items:center;gap:clamp(12px,2vw,28px);padding:8px 8px 8px clamp(14px,1.6vw,22px);background:rgba(245,242,234,.84);-webkit-backdrop-filter:blur(16px) saturate(1.5);backdrop-filter:blur(16px) saturate(1.5);border-radius:999px;box-shadow:0 12px 34px -14px rgba(11,13,61,.45),inset 0 0 0 1px rgba(255,255,255,.55);transition:box-shadow .4s}
.nav__logo{display:block;flex:none;text-decoration:none}

/* logo: the original artwork, cut into layers so the two o's can blink and the bars can move.
   On hover the eyes widen, the high o rises, the top bar lifts like an eyebrow and the ! tips over */
.brandmark{--lh:clamp(30px,2.6vw,38px);position:relative;display:block;height:var(--lh);aspect-ratio:1700/949}
.brandmark img{position:absolute;display:block;max-width:none;height:auto;transition:translate .45s var(--spring),rotate .5s var(--spring),scale .45s var(--spring)}
.brandmark__base{left:0;top:0;width:100%}
.brandmark__o1{left:0;top:0;width:18.706%}
.brandmark__bar1{left:1.588%;top:37.408%;width:15.176%}
.brandmark__o2{left:19.118%;top:11.064%;width:18.706%}
.brandmark__bar2{left:21%;top:.105%;width:14.941%}
.brandmark__bang{left:86.059%;top:60.906%;width:5.882%;transform-origin:50% 95%}
.brandmark__o1,.brandmark__o2{transform-origin:50% 55%;animation:logoBlink 7s infinite}
.brandmark__o2{animation-delay:.04s}
.nav__logo:hover .brandmark__o1,.nav__logo:hover .brandmark__o2{scale:1.07}
.nav__logo:hover .brandmark__o1{translate:0 calc(var(--lh) * -.05)}
.nav__logo:hover .brandmark__bar2{translate:0 calc(var(--lh) * -.08)}
.nav__logo:hover .brandmark__bang{rotate:14deg}
@keyframes logoBlink{0%,92%,100%{transform:none}94%{transform:scaleY(.12)}96%{transform:none}}
.nav__links{position:relative;display:flex;gap:2px;margin-left:auto}
.nav__links a{position:relative;z-index:1;padding:.6em 1em;border-radius:999px;font-weight:500;font-size:.95rem;text-decoration:none;transition:color .3s}
.nav__links a:hover,.nav__links a[aria-current="page"]{color:var(--blue)}
/* a soft blob slides to the link under the pointer, and rests on the current page */
.nav__blob{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:999px;background:var(--paper-2);opacity:0;pointer-events:none;transition:transform .55s var(--spring),width .55s var(--spring),opacity .3s}
.nav__links.has-blob .nav__blob{opacity:1}
.nav__links.no-anim .nav__blob{transition:none}
/* each label rolls up to a blue copy of itself */
.roll{position:relative;display:block;overflow:hidden;line-height:1.3}
.roll>span{display:block;transition:transform .45s var(--ease)}
.roll>span+span{position:absolute;left:0;top:100%;color:var(--blue);font-weight:600}
.nav__links a:hover .roll>span{transform:translateY(-100%)}
/* local time in New Cairo */
.nav__clock{display:flex;align-items:center;gap:8px;padding:.5em .9em;border-radius:999px;background:var(--paper-2);font-size:.8rem;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:.02em;white-space:nowrap}
.nav__sun{position:relative;width:10px;height:10px;border-radius:50%;background:var(--yellow);box-shadow:0 0 0 3px rgba(255,200,48,.35);animation:sunPulse 2.6s ease-in-out infinite}
.nav__clock.is-night .nav__sun{background:transparent;box-shadow:inset -3px -2px 0 0 var(--blue);animation:none}
@keyframes sunPulse{50%{box-shadow:0 0 0 6px rgba(255,200,48,.12)}}
/* the call to action keeps an eye on you */
.nav__eyes{font-size:1.7em;line-height:0;margin:-.3em -.2em -.3em 0}
/* scroll progress along the bottom of the pill */
.nav__pill{position:relative}
.nav__pill::after{content:"";position:absolute;left:28px;right:28px;bottom:3px;height:2px;border-radius:2px;background:var(--yellow);transform:scaleX(var(--progress,0));transform-origin:0 50%;pointer-events:none}
.nav__cta{padding:.85em 1.2em;font-size:.93rem}
.lang{display:grid;place-items:center;flex:none;min-width:46px;height:46px;margin-inline:2px 8px;padding:0 .8em;border-radius:999px;background:var(--paper-2);font-family:"IBM Plex Sans Arabic","Instrument Sans",system-ui,sans-serif;font-size:.9rem;font-weight:700;line-height:1;text-decoration:none;transition:background .3s,color .3s}
.lang[lang="en"]{font-family:var(--body);letter-spacing:.04em}
.lang:hover{background:var(--yellow)}
.menu__foot .lang{width:100%;margin:6px 0 0;padding:.55em 0;border-radius:0;background:none;color:var(--yellow);font-size:1.05rem;justify-content:start;place-items:center start}
.nav__burger{display:none;position:relative;width:48px;height:48px;margin-left:auto;border:0;border-radius:50%;background:var(--blue);cursor:pointer}
.nav__burger span:not(.sr){position:absolute;left:14px;right:14px;height:2px;border-radius:2px;background:var(--paper);transition:transform .5s var(--ease)}
.nav__burger span:nth-child(1){top:20px}
.nav__burger span:nth-child(2){top:27px}
.nav__burger[aria-expanded="true"] span:nth-child(1){transform:translateY(3.5px) rotate(45deg)}
.nav__burger[aria-expanded="true"] span:nth-child(2){transform:translateY(-3.5px) rotate(-45deg)}

.menu{position:fixed;inset:0;z-index:55;display:flex;flex-direction:column;justify-content:flex-end;gap:40px;padding:110px var(--gutter) 40px;background:var(--blue);color:var(--paper);clip-path:circle(0 at calc(100% - var(--gutter) - 32px) 40px);visibility:hidden;transition:clip-path .8s var(--ease-io),visibility 0s .8s}
.menu.is-open{clip-path:circle(160% at calc(100% - var(--gutter) - 32px) 40px);visibility:visible;transition:clip-path .8s var(--ease-io),visibility 0s}
.menu__links{display:flex;flex-direction:column}
.menu__links a{display:flex;align-items:baseline;gap:14px;padding:.12em 0;font-family:var(--display);font-weight:760;font-size:clamp(2.6rem,12vw,4.5rem);line-height:1;letter-spacing:-.04em;text-decoration:none;opacity:0;transform:translateY(30px);transition:opacity .5s,transform .7s var(--ease),color .3s}
.menu__links a small{font-family:var(--body);font-size:.85rem;font-weight:600;letter-spacing:0;color:var(--yellow)}
.menu.is-open .menu__links a{opacity:1;transform:none}
.menu.is-open .menu__links a:nth-child(2){transition-delay:.05s}
.menu.is-open .menu__links a:nth-child(3){transition-delay:.1s}
.menu.is-open .menu__links a:nth-child(4){transition-delay:.15s}
.menu.is-open .menu__links a:nth-child(5){transition-delay:.2s}
.menu.is-open .menu__links a:first-child{transition-delay:.0s}
.menu__links a:hover,.menu__links a[aria-current="page"]{color:var(--yellow)}
.menu__foot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px 20px;padding-top:20px;border-top:1px solid rgba(245,242,234,.25);color:var(--on-dark);font-size:.95rem}
.menu__foot a{text-decoration:none;color:var(--paper)}

@media (max-width:1180px){
  .nav__clock{display:none}
}
@media (max-width:900px){
  .nav__links,.nav__cta{display:none}
  .nav__burger{display:block;margin-left:0}
  .nav__pill{padding:6px 6px 6px 16px}
  .lang{margin-left:auto;margin-right:8px}
}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:clamp(120px,15vh,170px) 0 clamp(140px,16vw,210px);background:var(--blue);color:var(--paper);overflow:hidden;isolation:isolate;cursor:default}
.hero__bg{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(40% 55% at 85% 18%,rgba(70,78,255,.65),transparent 70%),
    radial-gradient(35% 40% at 12% 95%,rgba(255,200,48,.16),transparent 70%),
    radial-gradient(rgba(245,242,234,.13) 1.2px,transparent 1.6px) 0 0/30px 30px;
  -webkit-mask-image:linear-gradient(180deg,#000 55%,rgba(0,0,0,.4));mask-image:linear-gradient(180deg,#000 55%,rgba(0,0,0,.4))}
.hero__inner{position:relative;z-index:2;pointer-events:none}
.hero__inner a,.hero__inner button{pointer-events:auto}
.eyebrow{display:inline-flex;align-items:center;gap:.7em;padding:.55em 1em .55em .8em;margin-bottom:clamp(22px,3vw,36px);border-radius:999px;background:rgba(245,242,234,.1);box-shadow:inset 0 0 0 1px rgba(245,242,234,.22);font-size:.9rem;font-weight:500;opacity:0;transform:translateY(12px);transition:opacity .8s var(--ease) .1s,transform .8s var(--ease) .1s}
.pulse{position:relative;width:9px;height:9px;border-radius:50%;background:var(--yellow)}
.pulse::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid var(--yellow);animation:pulse 2.2s var(--ease) infinite}
@keyframes pulse{from{transform:scale(.4);opacity:1}to{transform:scale(1.6);opacity:0}}

.hero__title{font-weight:800;letter-spacing:-.05em;line-height:.88;font-variation-settings:"opsz" 96}
.hero__title .line{display:block;overflow:hidden;padding-bottom:.16em;margin-bottom:-.16em}
.hero__title .line>span{display:inline-block;transform:translateY(108%) rotate(4deg);transform-origin:0 100%;transition:transform 1.25s var(--ease);transition-delay:calc(.15s + var(--d) * .11s)}
.hero__title .line:not(.line--ooh){font-size:clamp(2.7rem,7.6vw,8.2rem)}
.line--ooh{font-size:clamp(7.2rem,25vw,24rem);line-height:.8;color:var(--yellow);margin-left:-.03em;padding-top:.04em}
.is-loaded .hero__title .line>span,.is-loaded .eyebrow{transform:none;opacity:1}

/* the eyes: two letter o's that look around */
.ooh{white-space:nowrap}
.eye{position:relative;display:inline-block;width:.6em;height:.6em;margin-right:.025em;border-radius:50%;background:var(--paper);box-shadow:inset 0 0 0 .1em var(--yellow);overflow:hidden;vertical-align:baseline;transition:transform .45s var(--spring)}
.pupil{position:absolute;left:50%;top:50%;width:.17em;height:.17em;margin:-.085em 0 0 -.085em;border-radius:50%;background:var(--night);transition:width .35s var(--spring),height .35s var(--spring),margin .35s var(--spring)}
.pupil::after{content:"";position:absolute;width:30%;height:30%;left:22%;top:20%;border-radius:50%;background:rgba(255,255,255,.85)}
.eye::after{content:"";position:absolute;inset:-2px;background:var(--yellow);transform:translateY(-101%);transition:transform .08s ease-in}
.eye.blink::after{transform:translateY(0)}
.wow .eye{transform:scale(1.08)}
.wow .pupil{width:.23em;height:.23em;margin:-.115em 0 0 -.115em}

.hero__foot{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:24px 40px;margin-top:clamp(28px,4vw,52px);max-width:900px;opacity:0;transform:translateY(16px);transition:opacity 1s var(--ease) .75s,transform 1s var(--ease) .75s}
.is-loaded .hero__foot{opacity:1;transform:none}
.hero__lede{max-width:28em;font-size:clamp(1.05rem,1.35vw,1.25rem);line-height:1.5;color:var(--on-dark)}
.hero__ctas{display:flex;flex-wrap:wrap;gap:12px}

.hero__hint{position:absolute;right:var(--gutter);bottom:clamp(110px,12vw,150px);z-index:2;display:flex;align-items:flex-end;gap:8px;font-family:var(--serif);font-style:italic;font-size:clamp(1rem,1.3vw,1.2rem);color:var(--yellow);opacity:0;transition:opacity 1s 1.6s}
.hero__hint svg{width:52px;height:26px;transform:scaleX(-1) rotate(-12deg);margin-bottom:6px}
.is-loaded .hero__hint{opacity:.9}

/* stickers */
.stickers{position:absolute;inset:0;z-index:3;pointer-events:none}
.sticker{position:absolute;left:var(--x);top:var(--y);pointer-events:auto;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;transform:translate(var(--dx,0px),var(--dy,0px)) rotate(var(--rot,0deg)) scale(var(--s,0));transition:transform .7s var(--spring);transition-delay:var(--delay,0s)}
.is-loaded .sticker{--s:1}
.sticker:nth-child(1){--delay:1s}.sticker:nth-child(2){--delay:1.12s}.sticker:nth-child(3){--delay:1.24s}.sticker:nth-child(4){--delay:1.36s}.sticker:nth-child(5){--delay:1.48s}
.sticker.is-touched{--delay:0s}
.sticker:hover{--s:1.05}
.sticker.is-drag{cursor:grabbing;--s:1.1;transition:transform .25s var(--ease)}
.sticker__in{display:inline-flex;align-items:center;gap:.45em;padding:.6em 1.05em;border-radius:16px;font-family:var(--display);font-weight:720;font-size:clamp(1rem,1.5vw,1.45rem);letter-spacing:-.02em;white-space:nowrap;box-shadow:0 18px 30px -16px rgba(5,6,40,.7),0 2px 0 rgba(0,0,0,.08);animation:bob 6s ease-in-out infinite alternate;animation-delay:calc(var(--delay) * -3)}
.sticker.is-drag .sticker__in{box-shadow:0 30px 50px -18px rgba(5,6,40,.75)}
@keyframes bob{from{transform:translateY(-5px) rotate(-1.5deg)}to{transform:translateY(6px) rotate(1.5deg)}}
.sticker--yellow .sticker__in{background:var(--yellow);color:var(--ink)}
.sticker--paper .sticker__in{background:var(--paper);color:var(--blue)}
.sticker--ink .sticker__in{background:var(--night);color:var(--paper)}
.sticker--outline .sticker__in{background:var(--blue-2);color:var(--paper);box-shadow:inset 0 0 0 2px var(--paper),0 18px 30px -16px rgba(5,6,40,.7)}
.star-ico{width:.85em;height:.85em;color:var(--yellow)}
.sticker--badge .sticker__in{position:relative;display:grid;place-items:center;width:clamp(120px,11vw,168px);height:clamp(120px,11vw,168px);padding:0;border-radius:50%;background:var(--yellow);color:var(--ink)}
.badge__ring{position:absolute;inset:0;width:100%;height:100%;animation:spin 18s linear infinite}
.badge__ring text{font-family:var(--body);font-weight:700;font-size:14px;fill:var(--ink)}
.sticker--badge b{font-family:var(--display);font-weight:800;font-size:clamp(2.6rem,3.6vw,3.8rem);line-height:1;color:var(--blue)}
@keyframes spin{to{transform:rotate(360deg)}}

/* the homepage badge: a new shape, colour and fact on every visit (double-click for another) */
[data-badge] .sticker__in{--b-bg:var(--yellow);--b-fg:var(--ink);--b-ac:var(--blue);background:none;color:var(--b-fg);box-shadow:none;filter:drop-shadow(0 18px 20px rgba(5,6,40,.45))}
[data-badge].is-drag .sticker__in{box-shadow:none}
.badge__shape{position:absolute;inset:-6%;border-radius:50%;background:var(--b-bg);transition:transform .6s var(--spring)}
[data-badge] .badge__ring text{fill:var(--b-fg)}
[data-badge] b{position:relative;color:var(--b-ac);transition:transform .6s var(--spring)}
[data-badge] b svg{width:.8em;height:.8em}
[data-badge] .badge__eyes{font-size:.95em;line-height:.8}
[data-badge] .badge__eyes .eye{background:#fff;box-shadow:inset 0 0 0 .1em var(--b-ac)}
[data-badge] .badge__eyes .eye::after{background:var(--b-ac)}
[data-badge].is-shuffling .badge__shape{transform:scale(.6) rotate(-90deg)}
[data-badge].is-shuffling b{transform:scale(0)}
[data-badge][data-shape="burst"] .badge__shape{inset:-17%;border-radius:0;clip-path:polygon(50.0% 0.0%,59.8% 7.1%,71.7% 5.0%,77.4% 15.6%,89.1% 18.8%,89.6% 30.9%,98.7% 38.9%,94.0% 50.0%,98.7% 61.1%,89.6% 69.1%,89.1% 81.2%,77.4% 84.4%,71.7% 95.0%,59.8% 92.9%,50.0% 100.0%,40.2% 92.9%,28.3% 95.0%,22.6% 84.4%,10.9% 81.2%,10.4% 69.1%,1.3% 61.1%,6.0% 50.0%,1.3% 38.9%,10.4% 30.9%,10.9% 18.8%,22.6% 15.6%,28.3% 5.0%,40.2% 7.1%)}
[data-badge][data-shape="squircle"] .badge__shape{inset:-4%;border-radius:32%;rotate:14deg}
[data-badge][data-shape="blob"] .badge__shape{inset:-9%;border-radius:42% 58% 63% 37%/41% 44% 56% 59%;animation:badgeBlob 7s ease-in-out infinite alternate}
[data-badge][data-shape="hex"] .badge__shape{inset:-15%;border-radius:0;clip-path:polygon(25% 4%,75% 4%,99% 50%,75% 96%,25% 96%,1% 50%)}
[data-badge][data-shape="stamp"] .badge__shape{outline:3px dashed var(--b-bg);outline-offset:7px}
[data-badge][data-color="paper"] .sticker__in{--b-bg:var(--paper);--b-fg:var(--blue);--b-ac:var(--ink)}
[data-badge][data-color="night"] .sticker__in{--b-bg:var(--night);--b-fg:var(--yellow);--b-ac:var(--paper)}
[data-badge][data-color="outline"] .sticker__in{--b-bg:var(--blue-2);--b-fg:var(--paper);--b-ac:var(--yellow)}
[data-badge][data-color="outline"] .badge__shape{box-shadow:inset 0 0 0 3px var(--paper)}
[data-badge][data-spin="back"] .badge__ring{animation-direction:reverse}
@keyframes badgeBlob{to{border-radius:58% 42% 37% 63%/56% 59% 41% 44%;rotate:20deg}}

/* click pops */
.pop{position:absolute;z-index:4;pointer-events:none;font-family:var(--display);font-weight:800;font-size:clamp(1.6rem,3vw,2.8rem);letter-spacing:-.03em;color:var(--yellow);white-space:nowrap;transform:translate(-50%,-50%);animation:pop 1.5s var(--ease) forwards}
.pop:nth-child(odd){color:var(--paper)}
@keyframes pop{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.2) rotate(0)}
  18%{opacity:1;transform:translate(-50%,-70%) scale(1.15) rotate(var(--rot))}
  100%{opacity:0;transform:translate(-50%,-260%) scale(1) rotate(var(--rot))}
}

@media (max-width:1180px){
  .sticker--outline,.sticker--ink{display:none}
}
@media (max-width:900px){
  .hero{justify-content:flex-start;padding-top:120px}
  .hero__foot{flex-direction:column;align-items:flex-start}
  .hero__hint{position:relative;right:auto;bottom:auto;margin:28px var(--gutter) 0;align-self:flex-start}
  .hero__hint svg{display:none}
  .khead{flex-direction:column;justify-content:center}
  .khead__inner{width:100%}
  .khead .hero__hint{align-self:center;margin-top:26px}
  .line--ooh{font-size:min(40vw,11rem)}
  .sticker--badge{left:auto;right:var(--gutter);top:174px}
  .sticker--badge .sticker__in{width:104px;height:104px}
  .sticker--yellow{left:var(--gutter);top:auto;bottom:72px}
  .sticker--paper{left:auto;right:calc(var(--gutter) + 8px);top:auto;bottom:84px}
  .badge__ring text{font-size:15px}
}

/* ---------- tapes ---------- */
.tapes{position:relative;z-index:6;height:clamp(110px,12vw,170px);margin-top:calc(clamp(110px,12vw,170px) / -2);margin-bottom:calc(clamp(110px,12vw,170px) / -2);pointer-events:none;overflow-x:clip}
.tape{position:absolute;left:-6%;right:-6%;top:50%;overflow:hidden;padding:.8em 0;font-family:var(--display);font-weight:720;font-size:clamp(1.1rem,2.1vw,1.8rem);letter-spacing:-.02em;white-space:nowrap}
.tape--yellow{background:var(--yellow);color:var(--ink);transform:translateY(-50%) rotate(-2.4deg);box-shadow:0 14px 30px -18px rgba(0,0,0,.5)}
.tape--ink{background:var(--ink);color:var(--paper);transform:translateY(-50%) rotate(1.8deg)}
.tape__track{display:inline-flex;align-items:center;animation:marquee 42s linear infinite}
.tape--ink .tape__track{animation-direction:reverse;animation-duration:55s}
.tape{pointer-events:auto}
.tape__set{display:inline-flex;align-items:center}
.tape__track a{padding:.05em .7em;color:inherit;text-decoration:none;background:linear-gradient(currentColor,currentColor) 50% 100%/0 2px no-repeat;background-origin:content-box;transition:color .3s,background-size .35s var(--ease)}
.tape__track a:hover,.tape__track a:focus-visible{background-size:100% 2px}
.tape--yellow .tape__track a:hover{color:var(--blue)}
.tape--ink .tape__track a:hover{color:var(--yellow)}
.tape:hover .tape__track,.tape:focus-within .tape__track{animation-play-state:paused}
.tape__track svg{width:.8em;height:.8em;flex:none;color:var(--blue)}
.tape--ink .tape__track svg{color:var(--yellow)}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ---------- reveal ---------- */
.js [data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .95s var(--ease);transition-delay:calc(min(var(--i,0),4) * .08s)}
.js [data-reveal].is-in{opacity:1;transform:none}

/* draw-on paths */
.draw path,.draw circle{fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:var(--len,400);stroke-dashoffset:var(--len,400);transition:stroke-dashoffset 1.6s var(--ease) .25s}
.is-in .draw path,.is-in .draw circle,.draw.is-in path,.draw.is-in circle{stroke-dashoffset:0}

/* ---------- story ---------- */
.story{padding:calc(var(--section) + 30px) 0 var(--section)}
.story__title{font-size:clamp(3.2rem,10vw,10rem);font-weight:800;letter-spacing:-.05em;line-height:.9;margin-bottom:clamp(36px,5vw,72px)}
.story__title em{font-size:1.08em;padding-right:.04em}
.who{position:relative;display:inline-block;color:rgba(13,14,43,.3)}
.strike{position:absolute;left:-4%;top:28%;width:108%;height:46%;overflow:visible}
.strike path{stroke:var(--yellow);stroke-width:18;stroke-dasharray:var(--len,400);stroke-dashoffset:var(--len,400);transition:stroke-dashoffset 1s var(--ease) .5s}
.story__title.is-in .strike path{stroke-dashoffset:0}
.story__text{max-width:21em;font-family:var(--display);font-weight:520;font-size:clamp(1.55rem,3.3vw,3rem);line-height:1.16;letter-spacing:-.025em;font-variation-settings:"opsz" 60}
.story__text .w{opacity:.16;transition:opacity .35s}
.story__text .w.on{opacity:1}
.story__text mark{background:linear-gradient(transparent 58%,var(--yellow) 58%,var(--yellow) 92%,transparent 92%);color:inherit;padding:0 .05em}


/* ---------- principles: three cards that stack as you scroll ---------- */
.principles{padding:0 0 var(--section)}
.principles__title{font-size:clamp(3rem,8vw,8rem);font-weight:800;letter-spacing:-.05em;line-height:.9}
.principles__title em{font-family:var(--display);font-style:normal;font-weight:800;color:var(--blue)}
.principles__title .eye{background:#fff;box-shadow:inset 0 0 0 .1em var(--blue)}
.principles__title .eye::after{background:var(--blue)}
.pstack{display:grid;gap:clamp(20px,4vh,40px)}
.pcard{--p-bg:var(--blue);--p-fg:var(--paper);--p-ac:var(--yellow);--p-mut:var(--on-dark);position:sticky;top:calc(clamp(84px,11vh,112px) + var(--i) * 24px);display:grid;grid-template-columns:1.3fr 1fr;align-items:center;gap:clamp(24px,4vw,64px);min-height:min(64vh,540px);padding:clamp(28px,4.4vw,72px);border-radius:var(--r-lg);background:var(--p-bg);color:var(--p-fg);box-shadow:0 -24px 60px -36px rgba(5,6,40,.45);transform-origin:50% 0;transform:scale(calc(1 - var(--cover,0) * .06))}
/* the card being covered dims a little */
.pcard::after{content:"";position:absolute;inset:0;border-radius:inherit;background:#05062A;opacity:calc(var(--cover,0) * .3);pointer-events:none}
.pcard--yellow{--p-bg:var(--yellow);--p-fg:var(--ink);--p-ac:var(--blue);--p-mut:rgba(13,14,43,.75)}
.pcard--night{--p-bg:var(--night)}
.pcard__tag{display:inline-block;padding:.35em .65em .3em;background:var(--p-ac);color:var(--p-bg);font-family:var(--display);font-weight:800;font-size:clamp(.9rem,1.2vw,1.1rem);letter-spacing:.04em;text-transform:uppercase;transform:rotate(-2.5deg)}
.pcard__word{margin:.3em 0 .35em;font-size:clamp(2.6rem,5.2vw,5.6rem);font-weight:800;letter-spacing:-.055em;line-height:.88}
.pcard__word em{font-style:normal;color:var(--p-ac)}
.pcard p{max-width:30em;font-size:clamp(1.02rem,1.3vw,1.22rem);line-height:1.6;color:var(--p-mut)}
.pcard__art{justify-self:center;width:min(100%,340px);height:auto;color:var(--p-ac);overflow:visible}
.pcard__art path{stroke:currentColor;stroke-width:5}
.pcard__art.draw path{transition-duration:2.2s}
@media (max-width:900px){
  .pcard{grid-template-columns:1fr;gap:0;min-height:0;top:calc(80px + var(--i) * 16px);padding:26px 22px 30px}
  .pcard__art{grid-row:1;justify-self:end;width:112px;margin:-6px -4px -64px 0}
  .pcard__word{font-size:clamp(2rem,9.4vw,3.6rem)}
}

/* ---------- stats ---------- */
.stats{padding-inline:var(--inset)}
.stats__card{position:relative;overflow:hidden;display:grid;grid-template-columns:repeat(4,1fr);align-items:start;gap:clamp(18px,2.4vw,36px);padding:clamp(120px,13vw,190px) max(var(--gutter),calc((100% - var(--maxw)) / 2 + var(--gutter))) clamp(64px,7vw,110px);border-radius:var(--r-lg);background:var(--blue);color:var(--paper)}
.squiggle{position:absolute;left:0;top:clamp(10px,2vw,30px);width:100%;height:clamp(80px,10vw,150px);overflow:visible}
.squiggle path{fill:none;stroke:var(--yellow);stroke-width:4;stroke-linecap:round}
.stat{position:relative;display:flex;flex-direction:column;align-items:flex-start;padding:clamp(24px,2.4vw,36px) clamp(22px,2.2vw,32px) clamp(26px,2.6vw,38px);border-radius:28px;background:var(--paper);color:var(--ink);box-shadow:0 34px 50px -34px rgba(5,6,40,.75);transform:rotate(calc((var(--i) - 1.5) * 1.6deg));transition:transform .6s var(--spring)}
.stat:hover{transform:rotate(0deg) translateY(-8px)}
/* a little drawn badge pinned to each card: laurel, burst, globe, orbit */
.stat__icon{position:absolute;top:-24px;right:20px;display:grid;place-items:center;width:clamp(66px,5.6vw,82px);aspect-ratio:1;border-radius:50%;background:var(--yellow);box-shadow:0 14px 24px -14px rgba(5,6,40,.7);transform:rotate(-8deg);transition:transform .6s var(--spring)}
.stat:hover .stat__icon{transform:rotate(8deg) scale(1.08)}
.stat__icon svg{width:74%;height:74%;overflow:visible}
.stat__icon path{stroke:var(--blue);stroke-width:9}
.stat__icon--rays svg{animation:spin 40s linear infinite}
.stat__orbit{transform-box:view-box;transform-origin:100px 100px;animation:spin 14s linear infinite}
.stat__orbit circle{fill:var(--blue);stroke:none}
.stat__num{display:block;margin-top:clamp(18px,2.4vw,34px);font-family:var(--display);font-weight:800;font-size:clamp(4.2rem,7vw,7.2rem);line-height:.82;letter-spacing:-.06em;color:var(--blue);font-variant-numeric:tabular-nums}
.stat__label{display:block;margin-top:.55em;font-family:var(--display);font-weight:760;font-size:clamp(1.1rem,1.45vw,1.4rem);line-height:1.1;letter-spacing:-.025em}
.stat__note{display:block;margin-top:.45em;font-family:var(--serif);font-style:italic;font-size:clamp(1rem,1.2vw,1.15rem);line-height:1.25;color:var(--muted)}

/* ---------- section heads ---------- */
.sec-head{display:grid;grid-template-columns:1.25fr 1fr;align-items:end;gap:24px clamp(24px,5vw,80px);margin-bottom:clamp(40px,5vw,72px)}
.sec-head__lede{max-width:30em;color:var(--muted);font-size:clamp(1.02rem,1.2vw,1.15rem);padding-bottom:.4em}
.sec-head--row{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap}

/* ---------- services ---------- */
.services{padding:var(--section) 0}
.svc{display:flex;gap:10px;height:clamp(500px,64vh,620px)}
.svc__item{position:relative;flex:1 1 0;min-width:0;border-radius:26px;background:var(--paper-2);color:var(--ink);overflow:hidden;transition:flex-grow .85s var(--ease),background-color .5s,color .5s}
.svc__item:hover:not(.is-open){background:var(--paper-3)}
.svc__item.is-open{flex-grow:3.8;background:var(--blue);color:var(--paper)}
.svc__head{position:absolute;inset:0;display:block;width:100%;padding:0;border:0;background:none;text-align:left;cursor:pointer;border-radius:inherit}
.svc__no{position:absolute;top:22px;left:22px;font-size:.82rem;font-weight:600;opacity:.6}
.svc__name{position:absolute;top:50px;left:22px;right:18px;font-family:var(--display);font-weight:720;font-size:clamp(1.05rem,1.35vw,1.35rem);line-height:1.08;letter-spacing:-.02em;-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word}
.svc__letter{position:absolute;left:14px;bottom:-.14em;font-family:var(--display);font-weight:800;font-size:clamp(6rem,10.5vw,11rem);line-height:1;letter-spacing:-.05em;color:var(--blue);transition:color .5s,transform .9s var(--ease)}
.svc__item:hover .svc__letter{transform:translateY(-8px)}
.svc__item.is-open .svc__letter{color:var(--yellow);transform:none}
.svc__plus{display:none}
.svc__body{position:absolute;top:clamp(120px,15vh,150px);left:22px;width:clamp(250px,28vw,420px);pointer-events:none;opacity:0;transform:translateY(18px);transition:opacity .3s,transform .6s var(--ease)}
.svc__item.is-open .svc__body{opacity:1;transform:none;transition:opacity .6s .3s,transform .9s var(--ease) .3s}
.svc__tag{font-family:var(--serif);font-style:italic;font-size:clamp(1.7rem,2.6vw,2.6rem);line-height:1.05;letter-spacing:-.01em;margin-bottom:.7em;color:var(--yellow)}
.svc__body li{position:relative;padding:.55em 0 .55em 1.6em;border-top:1px solid rgba(245,242,234,.22);font-weight:500}
.svc__body li::before{content:"";position:absolute;left:0;top:.95em;width:.7em;height:.7em;background:var(--yellow);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0c.6 6.4 5.6 11.4 12 12-6.4.6-11.4 5.6-12 12-.6-6.4-5.6-11.4-12-12C6.4 11.4 11.4 6.4 12 0Z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0c.6 6.4 5.6 11.4 12 12-6.4.6-11.4 5.6-12 12-.6-6.4-5.6-11.4-12-12C6.4 11.4 11.4 6.4 12 0Z'/%3E%3C/svg%3E") center/contain no-repeat}

@media (max-width:900px){
  .svc{flex-direction:column;height:auto;gap:8px}
  .svc__item{flex:none;border-radius:20px}
  .svc__item.is-open{flex-grow:0}
  .svc__head{position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;padding:16px 18px}
  .svc__no{display:none}
  .svc__letter{position:static;order:-1;font-size:3.2rem;line-height:.9;width:1.05em;text-align:center}
  .svc__item:hover .svc__letter{transform:none}
  .svc__name{position:static;font-size:1.3rem}
  .svc__plus{display:block;position:relative;width:34px;height:34px;border-radius:50%;box-shadow:inset 0 0 0 1.5px currentColor;opacity:.7}
  .svc__plus::before,.svc__plus::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;margin:-1px 0 0 -6px;background:currentColor;transition:transform .5s var(--ease)}
  .svc__plus::after{transform:rotate(90deg)}
  .is-open .svc__plus::after{transform:rotate(0)}
  .svc__body{position:static;width:auto;display:grid;grid-template-rows:0fr;padding:0 18px;opacity:1;transform:none;pointer-events:auto;transition:grid-template-rows .6s var(--ease)}
  .svc__item.is-open .svc__body{grid-template-rows:1fr;transition:grid-template-rows .6s var(--ease)}
  .svc__in{overflow:hidden}
  .svc__item.is-open .svc__in{padding-bottom:18px}
  .svc__tag{font-size:1.7rem}
}

.svc__more{display:flex;justify-content:center;margin-top:clamp(28px,3.4vw,44px)}

/* ---------- work ---------- */
.work{--h-lg:clamp(280px,40vw,600px);--h-sm:clamp(240px,27vw,400px);margin-inline:var(--inset);padding:var(--section) 0;border-radius:var(--r-lg);background:var(--night);color:var(--paper)}
.work h2 em{color:var(--yellow)}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(36px,4vw,56px) clamp(14px,2vw,26px)}
.card{grid-column:span var(--span,6);display:block;text-decoration:none;color:inherit;cursor:pointer}
.card__media{position:relative;height:var(--h);border-radius:22px;overflow:hidden;background:#1A1D5C;isolation:isolate;transform:translateZ(0)}
.card__media::before{content:attr(data-name);position:absolute;inset:0;z-index:-1;display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:2.4rem;letter-spacing:-.04em;color:rgba(245,242,234,.25)}
.card__media img,.card__media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease),opacity .6s}
.card__media video{opacity:0}
.card.is-playing video{opacity:1}
.card:hover .card__media img,.card:hover .card__media video{transform:scale(1.045)}
.card__media::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);pointer-events:none}
.card__meta{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding-top:18px}
.card__title{font-size:clamp(1.7rem,2.8vw,2.7rem);letter-spacing:-.04em;line-height:1;transition:color .3s}
.card:hover .card__title{color:var(--yellow)}
.card__tags{color:rgba(245,242,234,.6);font-size:.88rem;line-height:1.4;text-align:right}

@media (max-width:900px){
  .work{--h-lg:68vw;--h-sm:68vw}
  .card{grid-column:span 12}
}
@media (min-width:600px) and (max-width:900px){
  .card[style*="--span:4"]{grid-column:span 6}
  .work{--h-sm:46vw}
}

/* cursor bubble */
.cursor{position:fixed;left:0;top:0;z-index:150;pointer-events:none;will-change:transform}
.cursor__dot{display:grid;place-items:center;width:94px;height:94px;margin:-47px 0 0 -47px;border-radius:50%;background:var(--yellow);color:var(--ink);font-weight:700;font-size:.95rem;transform:scale(0);transition:transform .45s var(--spring)}
.cursor.is-on .cursor__dot{transform:scale(1)}
@media (hover:none),(pointer:coarse){.cursor{display:none}}

/* ---------- under one roof ---------- */
.roof{padding:var(--section) 0 calc(var(--section) * .7)}
.roof__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.6vw,22px)}
.rcard{position:relative;display:flex;flex-direction:column;min-height:clamp(440px,38vw,540px);padding:clamp(22px,2.4vw,34px);border-radius:28px;overflow:hidden}
.rcard h3{font-size:clamp(1.8rem,2.6vw,2.6rem);margin:auto 0 .45em}
.rcard p{max-width:26em;opacity:.8}
.rcard__art{position:relative;height:clamp(200px,18vw,250px);margin-bottom:28px}
.rcard--print{background:var(--yellow);color:var(--ink)}
.rcard--btl{background:var(--blue);color:var(--paper)}
.rcard--ai{background:var(--ink);color:var(--paper)}

.sheet{position:absolute;left:50%;top:50%;width:46%;aspect-ratio:3/4;border-radius:10px;transform-origin:50% 90%;transition:transform .9s var(--spring)}
.sheet--1{background:var(--blue);transform:translate(-50%,-50%) rotate(-12deg)}
.sheet--2{background:var(--paper);transform:translate(-50%,-50%) rotate(7deg)}
.sheet--3{background:var(--ink);transform:translate(-50%,-50%) rotate(-2deg);display:flex;flex-direction:column;justify-content:flex-end;gap:7px;padding:16px}
.sheet--3 i{display:block;height:7px;border-radius:4px;background:var(--yellow)}
.sheet--3 i:nth-child(2){width:70%;background:var(--paper)}
.sheet--3 i:nth-child(3){width:45%;background:var(--paper);opacity:.5}
.sheet--3::before{content:"";position:absolute;left:16px;top:16px;width:34%;aspect-ratio:1;border-radius:50%;background:var(--yellow)}
.rcard--print:hover .sheet--1{transform:translate(-92%,-52%) rotate(-22deg)}
.rcard--print:hover .sheet--2{transform:translate(-8%,-52%) rotate(18deg)}
.rcard--print:hover .sheet--3{transform:translate(-50%,-56%) rotate(0)}

/* the BTL factory: an exhibition booth under two swaying spotlights */
.booth{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.booth path{stroke:var(--paper);stroke-width:3}
.booth .booth__ac{stroke:var(--yellow)}
.booth__beam{fill:var(--yellow);opacity:.16;transform-box:fill-box;transform-origin:50% 0;animation:beam 4.5s ease-in-out infinite alternate;transition:opacity .4s}
.booth__beam--r{animation-delay:-2.2s}
.rcard--btl:hover .booth__beam{opacity:.34}
@keyframes beam{from{transform:rotate(-7deg)}to{transform:rotate(7deg)}}

.spark{position:absolute;color:var(--yellow)}
.spark--1{width:42%;left:29%;top:12%;animation:twinkle 5s ease-in-out infinite}
.spark--2{width:16%;left:14%;top:8%;color:var(--paper);animation:twinkle 4s ease-in-out infinite -1.5s}
.spark--3{width:20%;right:12%;bottom:6%;color:#7C82FF;animation:twinkle 4.6s ease-in-out infinite -3s}
@keyframes twinkle{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(.72) rotate(45deg)}}
.tag-new{position:absolute;right:4%;top:4%;padding:.35em .8em;border-radius:999px;background:var(--yellow);color:var(--ink);font-family:var(--display);font-weight:760;font-size:.95rem;transform:rotate(8deg)}

@media (max-width:900px){
  .roof__grid{grid-template-columns:1fr}
  .rcard{min-height:0}
  .rcard h3{margin-top:0}
}

/* ---------- awards ---------- */
.awards{padding:calc(var(--section) * .7) 0 var(--section)}
.awards__grid{display:grid;grid-template-columns:1fr 1.25fr;gap:clamp(40px,6vw,110px);align-items:start}
.awards__side{position:sticky;top:120px}
.awards__big{display:flex;align-items:center;gap:20px;margin-top:clamp(32px,4vw,56px)}
.awards__num{display:grid;place-items:center;flex:none;width:clamp(120px,11vw,160px);aspect-ratio:1;border-radius:50%;background:var(--yellow);font-family:var(--display);font-weight:800;font-size:clamp(3.4rem,5vw,4.6rem);letter-spacing:-.06em;line-height:1;transform:rotate(-8deg)}
.awards__big p{max-width:15em;color:var(--muted);font-weight:500}
.awards__list{border-top:2px solid var(--ink)}
/* doodles that say "this is where we got recognised" */
.circled{position:relative;display:inline-block}
.circled__ring{position:absolute;left:-16%;top:-6%;width:132%;height:118%;overflow:visible;pointer-events:none}
.circled__ring path{stroke:var(--yellow);stroke-width:4}
.awards__num{position:relative}
.awards__trophy{position:absolute;right:-34%;top:-36%;width:64%;height:auto;overflow:visible;transform:rotate(14deg)}
.awards__trophy path{stroke:var(--blue);stroke-width:7}
.awards__table{position:relative}
.awards__note{position:absolute;right:0;top:-54px;display:flex;align-items:flex-end;gap:8px;font-family:var(--serif);font-style:italic;font-size:clamp(1.05rem,1.4vw,1.3rem);color:var(--blue);transform:rotate(-2deg)}
.awards__note svg{width:54px;height:34px;overflow:visible;transform:scaleX(-1) rotate(-10deg);order:-1}
.awards__note path{stroke:var(--blue);stroke-width:2.5}
.awards__cols{display:grid;grid-template-columns:4.2em 1fr 1.4fr auto;gap:12px 20px;padding:0 14px 12px;font-size:.74rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.awards__cols span:last-child{justify-self:end}
.a-proj a{display:inline-flex;align-items:center;gap:.3em;color:inherit;text-decoration:none}
.a-proj a::after{content:"";position:absolute;inset:0}
.a-arr{width:.7em;height:.7em;opacity:0;transform:translate(-4px,4px);transition:opacity .3s,transform .4s var(--ease)}
.awards__list li:hover .a-arr{opacity:1;transform:none;color:var(--yellow)}
.a-what{display:inline-flex;align-items:center;gap:.6em}
.a-src{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:50%;background:var(--yellow);color:var(--ink);font-family:var(--display);font-weight:800;font-size:.8rem;letter-spacing:-.02em}
.a-src svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.a-src--be{background:#1769FF;color:#fff}
.awards__list li{position:relative;display:grid;grid-template-columns:4.2em 1fr 1.4fr auto;align-items:baseline;gap:12px 20px;padding:20px 14px;border-bottom:1px solid var(--line);isolation:isolate;transition:color .35s}
.awards__list li::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--blue);transform:scaleY(0);transform-origin:50% 100%;transition:transform .5s var(--ease);border-radius:14px}
.awards__list li:hover{color:var(--paper)}
.awards__list li:hover::before{transform:none}
.a-year{font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums;transition:color .35s}
.a-proj{font-family:var(--display);font-weight:720;font-size:clamp(1.3rem,1.9vw,1.75rem);letter-spacing:-.03em;line-height:1.1}
.a-what{color:var(--muted);transition:color .35s}
.a-type{justify-self:end;padding:.3em .8em;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line);font-size:.82rem;font-weight:600;white-space:nowrap;transition:background .35s,color .35s,box-shadow .35s}
.awards__list li:hover .a-year,.awards__list li:hover .a-what{color:var(--on-dark)}
.awards__list li:hover .a-type{background:var(--yellow);color:var(--ink);box-shadow:none}

@media (max-width:900px){
  .awards__grid{grid-template-columns:1fr}
  .awards__side{position:static}
  .awards__list li{grid-template-columns:3.6em minmax(0,1fr);gap:8px 14px;padding:16px 6px}
  .a-year{grid-column:1;grid-row:1}
  .a-proj{grid-column:2;grid-row:1}
  .a-what{grid-column:2;grid-row:2;font-size:.9rem}
  .a-type{grid-column:2;grid-row:3;justify-self:start;font-size:.76rem}
  .awards__cols{grid-template-columns:3.6em minmax(0,1fr);gap:12px 14px;padding:0 6px 10px}
  .awards__cols span:nth-child(n+3){display:none}
  .awards__note{top:-44px}
  .awards__trophy{right:-24%}
}

/* ---------- testimonials ---------- */
.voices{padding:var(--section) 0 0;overflow:hidden}
.voices h2 em{color:var(--blue)}
.voices__nav{display:flex;gap:10px}
.voices__btn{display:grid;place-items:center;width:58px;height:58px;border:0;border-radius:50%;background:var(--ink);color:var(--paper);cursor:pointer;transition:background-color .3s,transform .5s var(--spring)}
.voices__btn:hover{background:var(--blue);transform:scale(1.08)}
.voices__btn:disabled{opacity:.3;cursor:default;transform:none}
.voices__btn .arr{width:22px;height:22px;transform:rotate(45deg)}
.voices__btn--prev .arr{transform:rotate(-135deg)}
.voices__track{--pad:max(var(--gutter),calc((100% - var(--maxw)) / 2 + var(--gutter)));display:flex;gap:clamp(14px,1.8vw,24px);padding:24px var(--pad) 80px;margin-bottom:-36px;overflow-x:auto;scroll-snap-type:x mandatory;cursor:grab;user-select:none;-webkit-user-select:none;scroll-padding-inline:var(--pad);scrollbar-width:none;outline-offset:-4px}
.voices__track::-webkit-scrollbar{display:none}
.voices__track.is-dragging{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto}
.voices__track.is-dragging .voice{pointer-events:none}
.voice{--v-bg:var(--blue);--v-fg:var(--paper);--v-ac:var(--yellow);--v-mut:var(--on-dark);position:relative;flex:0 0 min(84vw,600px);display:flex;flex-direction:column;min-height:clamp(380px,32vw,470px);margin:0;padding:clamp(26px,3vw,44px);border-radius:28px;background:var(--v-bg);color:var(--v-fg);scroll-snap-align:start;box-shadow:0 2px 4px rgba(5,6,40,.04),0 18px 40px -18px rgba(5,6,40,.22),0 40px 70px -40px rgba(5,6,40,.18)}
.voice:nth-child(odd){transform:rotate(-.8deg)}
.voice:nth-child(even){transform:rotate(.8deg)}
.voice--yellow{--v-bg:var(--yellow);--v-fg:var(--ink);--v-ac:var(--blue);--v-mut:rgba(13,14,43,.7)}
.voice--night{--v-bg:var(--night)}
.voice--paper{--v-bg:var(--paper-2);--v-fg:var(--ink);--v-ac:var(--blue);--v-mut:var(--muted)}
.voice__mark{width:56px;height:42px;margin-bottom:clamp(18px,2.4vw,28px);fill:var(--v-ac)}
.voice blockquote p{font-family:var(--display);font-weight:600;font-size:clamp(1.12rem,1.5vw,1.4rem);line-height:1.42;letter-spacing:-.015em}
.voice figcaption{display:flex;flex-direction:column;gap:3px;margin-top:auto;padding-top:clamp(20px,2.4vw,28px)}
.voice__name{font-family:var(--display);font-weight:760;font-size:1.15rem;letter-spacing:-.02em;color:var(--v-ac)}
.voice__role{font-size:.92rem;font-weight:500;color:var(--v-mut)}
.voice__for{font-family:var(--serif);font-style:italic;font-size:1.02rem;color:var(--v-mut)}
.voice__sample{position:absolute;top:18px;right:18px;padding:.35em .8em;border-radius:999px;background:var(--paper);color:var(--ink);font-size:.74rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;transform:rotate(4deg);box-shadow:inset 0 0 0 1.5px var(--ink)}
.voices__dots{display:flex;justify-content:center;gap:8px}
.voices__dots button{width:10px;height:10px;padding:0;border:0;outline:none;border-radius:999px;background:var(--paper-3);cursor:pointer;transition:width .4s var(--ease),background-color .3s}
.voices__dots button.is-on{width:30px;background:var(--blue)}

/* ---------- believers ---------- */
.believers{padding-inline:var(--inset)}
.believers__card{padding:var(--section) 0;border-radius:var(--r-lg);background:var(--blue);color:var(--paper);overflow:hidden}
.believers__title{font-size:clamp(3rem,8.4vw,8.6rem);font-weight:800;letter-spacing:-.05em;line-height:.9}
.flip{display:block;min-height:1em;color:var(--yellow);white-space:nowrap}
.believers__lede{max-width:30em;margin-top:clamp(24px,3vw,40px);color:var(--on-dark);font-size:clamp(1.05rem,1.3vw,1.2rem)}
.logos{margin:clamp(40px,5.6vw,80px) 0 clamp(24px,3.6vw,48px);padding-block:16px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.logos__track{display:flex;gap:14px;width:max-content;animation:marquee 36s linear infinite}
.logos:hover .logos__track{animation-play-state:paused}
.logo-tile{display:block;flex:none;width:clamp(170px,16vw,220px);height:clamp(100px,9vw,124px);padding:14px 22px;border-radius:20px;background:#fff;transition:transform .5s var(--spring)}
.logo-tile:hover{transform:translateY(-6px) rotate(-2deg)}
.logo-tile img{width:100%;height:100%;object-fit:contain}
.countries{display:flex;flex-wrap:wrap;gap:10px}
.countries li{border-radius:999px;box-shadow:inset 0 0 0 1.5px rgba(245,242,234,.35);font-weight:500;transition:background .4s,color .4s,box-shadow .4s,transform .5s var(--spring)}
.countries li.is-on{background:var(--yellow);color:var(--ink);box-shadow:none;transform:translateY(-3px) rotate(-3deg)}
.countries button{padding:.5em 1em;border:0;border-radius:inherit;background:none;color:inherit;font:inherit;cursor:pointer}
.countries li:not(.is-on):hover{box-shadow:inset 0 0 0 1.5px var(--yellow)}

/* a doodle for each country, drawn in as the name flips */
/* the doodle sits right beside the paragraph */
.believers__head{display:grid;grid-template-columns:max-content minmax(0,1fr);column-gap:clamp(24px,3vw,56px);align-items:center}
.believers__head>*{grid-column:1/-1}
.believers__title{grid-column:1;grid-row:2}
/* the flipping country keeps the width of the longest name, so the doodle never jumps */
.flip{min-width:var(--flip-w,auto)}
.doodles{grid-column:2;grid-row:2;align-self:center;justify-self:center;width:clamp(204px,20.4vw,300px);height:auto;overflow:visible;pointer-events:none}
.doodles path{fill:none;stroke:var(--yellow);stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
.doodle{opacity:0;transition:opacity .4s}
.doodle path{stroke-dasharray:var(--len,400);stroke-dashoffset:var(--len,400);transition:stroke-dashoffset .4s ease-in}
.doodle.is-on{opacity:1}
.doodle.is-on path{stroke-dashoffset:0;transition:stroke-dashoffset 1.2s var(--ease);transition-delay:calc(var(--k,0) * .1s)}
.doodle__spin{transform-box:view-box;transform-origin:100px 84px;animation:spin 10s linear infinite}
@media (max-width:900px){
  .believers__head{display:block}
  .doodles{display:block;width:150px;margin:24px 0 -24px auto}
}

/* ---------- contact ---------- */
.contact{margin-top:calc(var(--section) * .6);padding:var(--section) 0;background:var(--yellow);color:var(--ink)}
.contact .kicker span{background:var(--blue)}
.contact__grid{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(40px,6vw,100px);align-items:start}
.contact__title{font-size:clamp(3rem,7vw,7rem);font-weight:800;letter-spacing:-.05em;line-height:.9}
.contact__lede{max-width:24em;margin-top:clamp(20px,2.4vw,32px);font-size:clamp(1.05rem,1.3vw,1.2rem)}
.contact__list{margin-top:clamp(36px,4vw,60px);border-top:1.5px solid var(--ink)}
.contact__list li{display:grid;grid-template-columns:7em 1fr;gap:16px;padding:18px 0;border-bottom:1px solid rgba(13,14,43,.2)}
.contact__list li>span{font-size:.82rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding-top:.3em}
.contact__list a{font-weight:500;text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/0 1.5px no-repeat;transition:background-size .5s var(--ease)}
.contact__list a:hover{background-size:100% 1.5px}
.big-link{font-family:var(--display);font-weight:720!important;font-size:clamp(1.3rem,2.2vw,2rem);letter-spacing:-.03em;line-height:1.1;word-break:break-word}

.form-card{position:relative;padding:clamp(24px,3vw,44px);border-radius:30px;background:var(--paper);box-shadow:0 40px 80px -40px rgba(80,50,0,.55)}
.form{display:grid;grid-template-columns:1fr 1fr;gap:22px 18px}
.form[hidden],.form__done[hidden]{display:none}
.field{display:flex;flex-direction:column;gap:8px;min-width:0;border:0}
.field--full{grid-column:1/-1}
.field>label,.field>legend{font-size:.82rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.field legend{margin-bottom:10px}
.field input,.field textarea{width:100%;padding:.85em 1em;border:1.5px solid var(--line);border-radius:14px;background:#fff;color:var(--ink);font:inherit;font-size:1rem;transition:border-color .3s,box-shadow .3s;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:#9A9AAE}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px rgba(27,32,196,.14)}
.field input[aria-invalid="true"]{border-color:#D23B3B;box-shadow:0 0 0 4px rgba(210,59,59,.12)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{position:relative;cursor:pointer}
.chip input{position:absolute;opacity:0;width:1px;height:1px}
.chip span{display:inline-flex;align-items:center;gap:.4em;padding:.6em 1em;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1.5px var(--line);font-size:.93rem;font-weight:500;user-select:none;transition:background .3s,color .3s,box-shadow .3s,transform .4s var(--spring)}
.chip span::before{content:"+";font-weight:700;transition:transform .4s var(--ease)}
.chip:hover span{box-shadow:inset 0 0 0 1.5px var(--blue)}
.chip input:checked+span{background:var(--blue);color:var(--paper);box-shadow:none;transform:rotate(-2deg)}
.chip input:checked+span::before{transform:rotate(45deg)}
.chip input:focus-visible+span{outline:3px solid var(--blue);outline-offset:2px}
.form__error{grid-column:1/-1;padding:.7em 1em;border-radius:12px;background:#FDE3E3;color:#9B1C1C;font-weight:500;font-size:.95rem}
.form__foot{display:flex;align-items:center;flex-wrap:wrap;gap:14px 22px}
.form__note{flex:1 1 14em;font-size:.86rem;color:var(--muted)}
.form__done{text-align:left}
.form__done:focus{outline:none}
.ooh--done{font-family:var(--display);font-weight:800;font-size:clamp(5rem,9vw,7.5rem);line-height:.8;letter-spacing:-.05em;color:var(--blue);margin-bottom:24px}
.ooh--done .eye{background:#fff;box-shadow:inset 0 0 0 .1em var(--blue)}
.ooh--done .eye::after{background:var(--blue)}
.form__done h3{font-size:clamp(1.8rem,2.6vw,2.4rem);margin-bottom:.4em}
.form__done p{color:var(--muted);margin-bottom:24px;max-width:30em}

@media (max-width:900px){
  .contact__grid{grid-template-columns:1fr}
}
@media (max-width:560px){
  .form{grid-template-columns:1fr}
  .contact__list li{grid-template-columns:1fr;gap:4px}
}

/* ---------- footer ---------- */
.footer{position:relative;padding:clamp(64px,8vw,110px) 0 28px;background:var(--night);color:var(--paper);overflow:hidden}
.footer__cols{display:grid;grid-template-columns:repeat(4,1fr);gap:32px}
.footer h4,.footer .footer__h{margin-bottom:14px;font-family:var(--body);font-size:.8rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--yellow)}
.footer__cols a{text-decoration:none;color:var(--on-dark);transition:color .3s}
.footer__cols a:hover{color:var(--paper)}
.footer__cols p{color:var(--on-dark)}
.socials{display:flex;flex-direction:column;gap:4px}
.footer__mark{margin:clamp(48px,7vw,100px) 0 clamp(18px,2vw,28px);padding-inline:var(--inset);font-family:var(--display);font-weight:800;font-size:15.2vw;line-height:.82;letter-spacing:-.065em;white-space:nowrap;color:var(--blue-2);text-align:center;user-select:none}
.footer__mark .eye{background:var(--paper);box-shadow:inset 0 0 0 .1em var(--yellow)}
.footer__mark>span:last-child{color:var(--blue-2)}
.footer__base{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px 24px;padding-top:22px;border-top:1px solid rgba(245,242,234,.15);font-size:.9rem;color:var(--on-dark)}
.to-top{display:inline-flex;align-items:center;gap:.4em;color:var(--paper);text-decoration:none;font-weight:600}
.to-top:hover{color:var(--yellow)}

@media (max-width:900px){
  .footer__cols{grid-template-columns:1fr 1fr}
  .stats__card{grid-template-columns:1fr 1fr;row-gap:44px}
  .sec-head{grid-template-columns:1fr}
}
@media (max-width:480px){
  .footer__cols{grid-template-columns:1fr 1fr;gap:28px 16px}
  .hero__ctas .btn{flex:1 1 auto;justify-content:center}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important}
  .tape__track,.logos__track{animation:none!important}
  .doodle path{transition:none!important}
  .js [data-reveal]{transform:none;transition:opacity .6s}
  .hero__title .line>span{transform:none;transition:none}
  .sticker{transition:none}
}

/* set from the site editor: show something on desktop only, or on phones and tablets only */
@media (max-width:900px){html:not(.omb-edit) .omb-hide-mobile{display:none!important}}
@media (min-width:901px){html:not(.omb-edit) .omb-hide-desktop{display:none!important}}

html:not(.omb-edit) .omb-hide-all{display:none!important}

/* motion set from the site editor's Style tab. Entrances play once when the part scrolls into view (main.js adds
   .omb-in); loops and hovers use translate, scale and rotate so they never fight an entrance's transform. */
[data-anim].omb-in{animation:var(--an) var(--ad,.8s) var(--ae,cubic-bezier(.2,.7,.2,1)) var(--adl,0s) backwards}
[data-loop]{animation:var(--ln) var(--ld,3s) ease-in-out infinite}
[data-anim][data-loop].omb-in{animation:var(--an) var(--ad,.8s) var(--ae,cubic-bezier(.2,.7,.2,1)) var(--adl,0s) backwards,var(--ln) var(--ld,3s) ease-in-out calc(var(--ad,.8s) + var(--adl,0s)) infinite}
.js [data-anim]:not(.omb-in){opacity:0}
[data-anim=fade]{--an:omb-fade}[data-anim=fade-up]{--an:omb-up}[data-anim=fade-down]{--an:omb-down}
[data-anim=slide-start]{--an:omb-start}[data-anim=slide-end]{--an:omb-end}[data-anim=zoom-in]{--an:omb-zoom-in}
[data-anim=zoom-out]{--an:omb-zoom-out}[data-anim=blur]{--an:omb-blur}[data-anim=flip]{--an:omb-flip}
[data-anim=pop]{--an:omb-pop}[data-anim=tilt]{--an:omb-tilt}[data-anim=wipe]{--an:omb-wipe}
@keyframes omb-fade{from{opacity:0}}
@keyframes omb-up{from{opacity:0;transform:translateY(48px)}}
@keyframes omb-down{from{opacity:0;transform:translateY(-48px)}}
@keyframes omb-start{from{opacity:0;transform:translateX(-64px)}}
@keyframes omb-end{from{opacity:0;transform:translateX(64px)}}
[dir=rtl] [data-anim=slide-start]{--an:omb-end}[dir=rtl] [data-anim=slide-end]{--an:omb-start}
@keyframes omb-zoom-in{from{opacity:0;transform:scale(.82)}}
@keyframes omb-zoom-out{from{opacity:0;transform:scale(1.18)}}
@keyframes omb-blur{from{opacity:0;filter:blur(14px)}}
@keyframes omb-flip{from{opacity:0;transform:perspective(900px) rotateX(70deg);transform-origin:50% 100%}}
@keyframes omb-pop{0%{opacity:0;transform:scale(.6)}60%{opacity:1;transform:scale(1.06)}}
@keyframes omb-tilt{from{opacity:0;transform:translateY(36px) rotate(-6deg)}}
@keyframes omb-wipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}
[data-loop=float]{--ln:omb-float}[data-loop=pulse]{--ln:omb-pulse}[data-loop=spin]{--ln:omb-spin;--ld:8s}
[data-loop=wiggle]{--ln:omb-wiggle}[data-loop=bounce]{--ln:omb-bounce}[data-loop=swing]{--ln:omb-swing}
[data-loop=spin]{animation-timing-function:linear}
@keyframes omb-float{50%{translate:0 -12px}}
@keyframes omb-pulse{50%{scale:1.06}}
@keyframes omb-spin{to{rotate:360deg}}
@keyframes omb-wiggle{25%{rotate:-4deg}75%{rotate:4deg}}
@keyframes omb-bounce{0%,100%{translate:0 0}40%{translate:0 -18px}60%{translate:0 -6px}}
@keyframes omb-swing{50%{rotate:8deg}}
[data-hover]{transition:translate .45s cubic-bezier(.34,1.56,.64,1),scale .45s cubic-bezier(.34,1.56,.64,1),rotate .45s cubic-bezier(.34,1.56,.64,1),box-shadow .35s,opacity .35s,filter .35s}
[data-hover=lift]:hover{translate:0 -8px}
[data-hover=grow]:hover{scale:1.05}
[data-hover=shrink]:hover{scale:.96}
[data-hover=tilt]:hover{rotate:-2.5deg}
[data-hover=glow]:hover{box-shadow:0 22px 50px -16px rgba(27,32,196,.55)}
[data-hover=dim]:hover{opacity:.72}
[data-hover=color]:hover{filter:saturate(1.35) brightness(1.06)}
@media (prefers-reduced-motion:reduce){[data-anim].omb-in,[data-loop]{animation:none}.js [data-anim]:not(.omb-in){opacity:1}}

/* the Gulf offer banner on the home and services pages (links to gcc-branding-offer/) */
.gpromo{padding:clamp(28px,4vw,56px) var(--gutter)}
.gpromo__card{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px clamp(20px,4vw,60px);max-width:calc(var(--maxw) - 2 * var(--gutter));margin-inline:auto;padding:clamp(22px,3vw,40px) clamp(22px,3.4vw,48px);border-radius:clamp(24px,3vw,36px);background:var(--yellow);color:var(--ink);text-decoration:none;overflow:hidden;isolation:isolate;box-shadow:0 30px 60px -36px rgba(80,50,0,.6);transition:transform .6s var(--spring)}
.gpromo__card::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(rgba(13,14,43,.09) 1.3px,transparent 1.7px) 0 0/26px 26px}
.gpromo__card:hover{transform:translateY(-4px) rotate(-.4deg)}
.gpromo__tag{grid-column:1;justify-self:start;display:inline-flex;align-items:center;gap:.5em;padding:.45em .9em;border-radius:999px;background:var(--ink);color:var(--yellow);font-size:.8rem;font-weight:700;letter-spacing:.04em}
.gpromo__tag svg{width:12px;height:12px}
.gpromo__h{grid-column:1;font-family:var(--display);font-weight:760;font-size:clamp(1.4rem,2.6vw,2.4rem);line-height:1.1;letter-spacing:-.03em}
.gpromo__price{color:var(--blue);font-weight:800}
.gpromo__h s{font-size:.6em;opacity:.55;text-decoration-color:var(--red,#D23B3B);text-decoration-thickness:2px}
.gpromo__sub{grid-column:1;font-weight:600;opacity:.75}
.gpromo__go{grid-column:2;grid-row:1/4;display:inline-flex;align-items:center;gap:.55em;padding:1em 1.5em;border-radius:999px;background:var(--blue);color:var(--paper);font-weight:700;white-space:nowrap;transition:background-color .3s}
.gpromo__card:hover .gpromo__go{background:var(--ink)}
.gpromo__eyes{position:absolute;inset-inline-end:clamp(-10px,1vw,20px);bottom:-.18em;z-index:-1;font-family:var(--display);font-weight:800;font-size:clamp(5rem,10vw,9rem);line-height:.8;color:var(--ink);opacity:.12}
.gpromo .money{unicode-bidi:isolate;direction:ltr}
@media (max-width:900px){
  .gpromo__card{grid-template-columns:1fr}
  .gpromo__go{grid-column:1;grid-row:auto;justify-self:start;margin-top:6px}
}

/* without JavaScript (some crawlers, link previews) every headline, tile and sticker shows at rest */
html:not(.js) .hero__title .line>span,html:not(.js) .wline>span{transform:none}
html:not(.js) .tile{animation:none}
html:not(.js) .sticker{--s:1}
html:not(.js) :is(.khead__jump,.hero__hint,.eyebrow,.hero__foot,.jhead__ctas,.jhead__case,.whead__lede,.deck__card,.chead__top,.chead__lede,.chead__meta){opacity:1;transform:none}

/* phone field: the country code picker next to the number (filled by assets/main.js) */
.phone{display:flex;gap:8px;direction:ltr}
.phone__cc{position:relative;flex:none;display:flex;align-items:center;gap:.35em;padding:0 .8em;border:1.5px solid var(--line);border-radius:14px;background:#fff;color:var(--ink);font-size:1rem;white-space:nowrap;transition:border-color .3s,box-shadow .3s}
.phone__cc::after{content:"";width:.42em;height:.42em;border:solid currentColor;border-width:0 1.5px 1.5px 0;transform:translateY(-25%) rotate(45deg);opacity:.5}
.phone__cc select{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;font-size:16px;padding:0;border:0}
.phone__cc:focus-within{border-color:var(--blue);box-shadow:0 0 0 4px rgba(27,32,196,.14)}
.phone input{flex:1;min-width:0}
.field__hint{margin:0;font-size:.88rem;color:var(--muted)}
.field__hint button{padding:0;border:0;background:none;color:var(--blue);font:inherit;font-weight:600;text-decoration:underline;cursor:pointer}