/* =====================================================================
   CEEK — about: a signed hero, big uppercase section titles (Kota),
   the name panel, an arch image, pills around the logo, a dark band
   with the expertise columns and numbered rows (Lusion), the big call.
   Everything here is prefixed .ab- so nothing leaks into the core.
   ===================================================================== */

/* ---------- hero ---------- */
.ab-hero{display:flex;flex-direction:column;justify-content:center;min-height:92vh;min-height:92svh;padding-top:calc(var(--icon) + var(--nav-pad) * 2 + clamp(24px,3vw,60px));padding-bottom:clamp(40px,5vw,100px)}
.ab-title{max-width:9em;margin-left:-.05em;font-size:clamp(52px,8.2vw,176px);line-height:1;letter-spacing:-.048em}
.ab-title em{color:var(--text-3)}
.ab-sign{display:flex;align-items:center;gap:clamp(10px,1vw,18px);margin-top:clamp(40px,7vw,150px)}
.ab-caret{width:2px;height:clamp(28px,2.6vw,48px);background:currentColor;animation:ab-caret 1s steps(1) infinite}
@keyframes ab-caret{50%{opacity:0}}
.ab-sign-logo{display:block;width:clamp(110px,10vw,190px)}
.ab-sign-logo svg{width:100%;height:auto;overflow:visible}
html.js .ab-sign-logo{clip-path:inset(0 100% 0 0);transition:clip-path 1.4s steps(4,end) 1.1s}
html.js .ab-hero.is-in .ab-sign-logo{clip-path:inset(0 -10% 0 0)}

/* ---------- big uppercase titles: the second line steps in ---------- */
.ab-big{font-size:clamp(56px,9.4vw,200px);line-height:.9;letter-spacing:-.04em;text-transform:uppercase}
.ab-indent{padding-left:.8em}
.ab-big--sm{font-size:clamp(44px,6.4vw,136px);margin:clamp(90px,9vw,180px) 0 clamp(30px,3vw,60px)}

/* ---------- mission ---------- */
.ab-mission{padding-top:clamp(60px,7vw,140px);padding-bottom:clamp(96px,10vw,200px)}
.ab-big-row{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--gap)}
.ab-orb{flex:none;display:grid;place-items:center;width:clamp(130px,17vw,330px);aspect-ratio:1;margin-top:-1vw;border-radius:50%;background:var(--mist);--ink:var(--white)}
.ab-orb-eyes{display:block;width:62%}
.ab-orb-eyes svg{width:100%;height:auto;overflow:visible}
html.js .ab-orb[data-reveal]{transform:scale(.6) rotate(-20deg);transition:opacity 1s var(--e-out),transform 1.6s var(--e-spring)}
html.js .ab-orb[data-reveal].is-in{transform:none}
.ab-two{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);row-gap:32px;margin-top:clamp(50px,5vw,100px)}
.ab-two-a{grid-column:1/span 6;max-width:14em}
.ab-two-b{grid-column:8/span 5;max-width:30em}
@media (max-width:812px){.ab-two-a,.ab-two-b{grid-column:1/-1}.ab-big-row{flex-direction:column-reverse;gap:28px}.ab-orb{align-self:flex-end}}

/* ---------- approach: an arch-topped image beside four principles ---------- */
.ab-approach-row{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);row-gap:56px;align-items:start;margin-top:clamp(50px,5vw,100px)}
.ab-arch{grid-column:1/span 5;aspect-ratio:4/5;overflow:hidden;border-radius:clamp(120px,16vw,320px) 0 0 0;background:var(--sand)}
.ab-arch img{width:100%;height:100%;object-fit:cover;object-position:50% 0;transform:scale(1.15);transition:transform 2s var(--e-out)}
.ab-arch.is-in img{transform:none}
html.js .ab-arch[data-reveal]{clip-path:inset(18% 0 0 0);transform:none;transition:clip-path 1.6s var(--e-out),opacity 1s}
html.js .ab-arch[data-reveal].is-in{clip-path:inset(0)}
.ab-princ{grid-column:7/span 6;display:flex;flex-direction:column}
.ab-princ li{display:grid;grid-template-columns:3.2em 1fr;column-gap:12px;padding:clamp(20px,2vw,34px) 0;border-top:1px solid var(--line)}
.ab-princ li:last-child{border-bottom:1px solid var(--line)}
.ab-princ .t-label{padding-top:.5em;color:var(--text-3)}
.ab-princ p{grid-column:2;margin-top:.45em;max-width:30em;color:var(--text-3)}
@media (max-width:812px){.ab-arch,.ab-princ{grid-column:1/-1}.ab-arch{max-width:460px}}

/* ---------- culture: pills around the logo, drifting with the pointer and the scroll ---------- */
.ab-culture{padding-bottom:clamp(96px,10vw,200px);text-align:center}
.ab-cloud{position:relative;height:clamp(380px,42vw,720px);margin-bottom:clamp(20px,2vw,40px)}
.ab-cloud-logo{position:absolute;left:50%;top:50%;width:clamp(150px,16vw,300px);transform:translate(-50%,-50%)}
.ab-cloud-logo svg{width:100%;height:auto;overflow:visible}
.ab-pill{position:absolute;left:var(--x);top:var(--y);padding:.62em 1.1em .68em;border-radius:99px;font-size:clamp(16px,1.5vw,30px);line-height:1;white-space:nowrap;letter-spacing:-.01em;
  transform:translate3d(var(--dx,0px),var(--dy,0px),0) rotate(var(--r));will-change:transform;box-shadow:0 12px 30px -18px rgba(66,84,98,.4)}
.ab-pill--sand{background:var(--sand)}
.ab-pill--white{background:var(--white)}
.ab-pill--taupe{background:var(--taupe)}
.ab-pill--mist2{background:var(--mist-2);color:var(--white)}
html.js .ab-pill{opacity:0;scale:.6;transition:opacity .8s var(--e-out),scale 1.2s var(--e-spring)}
html.js .ab-cloud.is-in .ab-pill{opacity:1;scale:1}
.ab-cloud.is-in .ab-pill:nth-child(2){transition-delay:.08s}
.ab-cloud.is-in .ab-pill:nth-child(3){transition-delay:.16s}
.ab-cloud.is-in .ab-pill:nth-child(4){transition-delay:.24s}
.ab-cloud.is-in .ab-pill:nth-child(5){transition-delay:.32s}
.ab-cloud.is-in .ab-pill:nth-child(6){transition-delay:.4s}
.ab-culture-title{max-width:16em;margin-inline:auto}
.ab-culture-title em{color:var(--text-3)}
.ab-culture-cta{margin-top:clamp(26px,2.4vw,44px)}
@media (max-width:600px){.ab-pill{font-size:15px}.ab-cloud{height:420px}}

/* ---------- showreel (Kota): the word runs across a capsule of our work, Watch now underneath ---------- */
.ab-reel{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;max-width:100vw;padding:5rem 0;overflow:hidden;color:var(--white);--ink:var(--white)}
@media (min-width:850px){.ab-reel{padding:12rem 0}}
.ab-reel-media{position:relative;width:70%;aspect-ratio:812/511;overflow:hidden;border-radius:256px;background:var(--mist);isolation:isolate}
@media (min-width:769px){.ab-reel-media{width:60%}}
@media (min-width:850px){.ab-reel-media{width:min(50.75rem,64vw)}}
.ab-reel-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0;opacity:0;mix-blend-mode:luminosity;transform:scale(1.08);transition:opacity 1.1s ease,transform 4s var(--e-out)}
.ab-reel-media img.is-on{opacity:.55;transform:none}
/* the reel itself, in colour, dimmed just enough for the white words that run across it */
.ab-reel-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.1s ease}
.ab-reel-media video.is-playing{opacity:1}
.ab-reel-media::after{content:"";position:absolute;inset:0;background:rgba(18,20,23,.26);opacity:0;transition:opacity 1.1s ease;pointer-events:none}
.ab-reel-media:has(video.is-playing)::after{opacity:1}
@media (max-width:768px){.ab-reel-media img.is-on{opacity:.4}}
.ab-reel-text{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2rem;z-index:2}
.ab-marquee{display:flex;width:100%;overflow:hidden;padding-block:60px;margin-block:-60px;text-shadow:0 0 40px rgba(66,84,98,.3)}
.ab-marquee-in{display:flex;flex:none;align-items:center;gap:1.5625rem;padding-right:1.5625rem;white-space:nowrap;font-size:clamp(56px,13vw,150px);line-height:1;letter-spacing:-.02em;text-transform:uppercase;animation:ab-marquee 20s linear infinite;will-change:transform}
.ab-marquee-logo{display:block;flex:none;width:1.75em}
.ab-marquee-logo svg{width:100%;height:auto;overflow:visible}
@keyframes ab-marquee{to{transform:translate3d(-100%,0,0)}}
@media (min-width:769px){.ab-reel-text{gap:3.75rem}}

/* ---------- the dark band ---------- */
.ab-dark{background:var(--mist);color:var(--white);--ink:var(--white);border-radius:var(--r-lg);padding:clamp(90px,9vw,180px) 0 clamp(90px,9vw,180px)}
.ab-dark ::selection{background:var(--white);color:var(--text)}
.ab-dark-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--gap);flex-wrap:wrap}
.ab-dark-note{max-width:24em;color:var(--on-mist-2)}

/* expertise columns (Lusion): a big letter that flips to lowercase on hover */
.ab-exp{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap);margin-top:clamp(56px,5.5vw,110px)}
.ab-exp-link{display:block;height:100%;padding:clamp(20px,2vw,32px);border-radius:var(--r);box-shadow:inset 0 0 0 1px rgba(251,248,243,.22);transition:background-color .45s var(--e-swift),color .45s var(--e-swift)}
.ab-exp-letter{display:block;position:relative;height:1em;overflow:hidden;font-size:clamp(70px,8vw,170px);line-height:1;letter-spacing:-.05em}
.ab-exp-letter span{display:block;transition:transform .6s var(--e-swift)}
.ab-exp-letter span+span{position:absolute;inset:0;font-family:var(--serif);font-style:italic;transform:translate3d(0,100%,0)}
.ab-exp-name{margin:clamp(40px,4vw,80px) 0 1em}
.ab-exp-list li{padding:.45em 0;border-top:1px solid rgba(251,248,243,.18);color:var(--on-mist-2);transition:color .45s}
@media (hover:hover){
  .ab-exp-link:hover{background:var(--white);color:var(--text)}
  .ab-exp-link:hover .ab-exp-list li{color:var(--text);border-color:var(--line)}
  .ab-exp-link:hover .ab-exp-letter span:first-child{transform:translate3d(0,-100%,0)}
  .ab-exp-link:hover .ab-exp-letter span+span{transform:none}
}
@media (max-width:960px){.ab-exp{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.ab-exp{grid-template-columns:minmax(0,1fr)}}

/* numbered rows (Lusion awards table) */
.ab-rows{border-bottom:1px solid rgba(251,248,243,.22)}
.ab-row{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:baseline;padding:clamp(18px,1.8vw,30px) 0;border-top:1px solid rgba(251,248,243,.22);transition:padding .5s var(--e-swift)}
.ab-row-k{grid-column:1/span 4;font-size:clamp(20px,1.8vw,36px);letter-spacing:-.02em}
.ab-row-v{grid-column:5/span 5;color:var(--on-mist-2)}
.ab-row-n{grid-column:10/span 3;justify-self:end;font-size:clamp(20px,1.8vw,36px);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
@media (hover:hover){.ab-row:hover{padding-left:clamp(10px,1vw,20px);padding-right:clamp(10px,1vw,20px)}}
@media (max-width:700px){.ab-row-k{grid-column:1/span 8}.ab-row-n{grid-column:9/span 4}.ab-row-v{grid-column:1/-1;grid-row:2;margin-top:.4em}}

/* ---------- the big call: each letter rolls over on hover (Lusion) ---------- */
.ab-cta{padding:clamp(110px,11vw,220px) var(--m) clamp(110px,11vw,220px);text-align:center}
.ab-cta-kicker{color:var(--text-3)}
.ab-cta-big{display:inline-flex;flex-direction:column;align-items:center;margin:clamp(20px,2vw,40px) 0;font-size:clamp(56px,11vw,240px);line-height:.95;letter-spacing:-.05em;text-transform:uppercase}
.ab-cta-line{display:flex;white-space:nowrap}
.ab-ch{position:relative;display:inline-block;overflow:hidden;padding-bottom:.04em}
.ab-ch>span{display:block;transition:transform .6s var(--e-swift);transition-delay:calc(var(--i,0) * 22ms)}
.ab-ch>span+span{position:absolute;left:0;top:0;transform:translate3d(0,105%,0);font-family:var(--serif);font-style:italic;color:var(--text-3)}
.ab-sp{display:inline-block;width:.28em}
@media (hover:hover){
  .ab-cta-big:hover .ab-ch>span:first-child{transform:translate3d(0,-105%,0)}
  .ab-cta-big:hover .ab-ch>span+span{transform:none}
}
.ab-cta-foot{color:var(--text-3)}

/* ---------- the name: two e's, two eyes (kept from the first version) ---------- */
.ab-name{padding-top:clamp(8px,1.2vw,24px)}
.ab-name-panel{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;min-height:100vh;min-height:100svh;padding:clamp(22px,2.8vw,48px);border-radius:var(--r-lg);background:var(--mist);color:var(--white);--ink:var(--white);cursor:pointer;-webkit-tap-highlight-color:transparent}
.ab-name-panel ::selection{background:var(--white);color:var(--text)}
.ab-name-panel::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.2;mix-blend-mode:soft-light;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='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.ab-name-glow{position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(circle 34vw at var(--gx,50%) var(--gy,48%),rgba(251,248,243,.16),rgba(251,248,243,0) 72%),
  radial-gradient(circle 60vw at 100% 125%,rgba(232,221,202,.2),rgba(232,221,202,0) 70%)}
.ab-name-head,.ab-name-blink,.ab-name-stage,.ab-name-lines{position:relative;z-index:2}
.ab-name-kicker{margin-bottom:1.1em;color:var(--on-mist-2)}
.ab-name-title{max-width:9em}
.ab-name-title em{color:var(--sand)}
.ab-name-blink{position:absolute;top:clamp(22px,2.8vw,48px);right:clamp(22px,2.8vw,48px);padding:.9em 1.3em;border-radius:99px;color:var(--on-mist-2);box-shadow:inset 0 0 0 1px rgba(251,248,243,.3);transition:color .4s var(--e-swift),background-color .4s var(--e-swift),box-shadow .4s var(--e-swift)}
@media (hover:hover){.ab-name-blink:hover{color:var(--text);background:var(--white);box-shadow:none}}
.ab-hint-touch{display:none}
@media (hover:none){.ab-hint-fine{display:none}.ab-hint-touch{display:inline}}
.ab-name-stage{flex:1 1 auto;display:grid;place-items:center;padding-block:clamp(40px,5vw,96px)}
/* as big as the panel allows while it still fits one screen (the copy around the eyes takes about 26vw + 100px) */
.ab-name-focus{position:relative;width:max(min(56vw,calc(200vh - 52vw - 200px)),min(36vw,520px))}
.ab-name-eyes svg{width:100%;height:auto;overflow:visible}
/* registration marks: they lock on as the eyes open */
.ab-name-marks{position:absolute;inset:-17% -7.5%;pointer-events:none;color:rgba(251,248,243,.6)}
.ab-name-marks i{position:absolute;width:15px;height:15px;margin:-7.5px}
.ab-name-marks i::before,.ab-name-marks i::after{content:"";position:absolute;left:0;top:50%;width:100%;height:1.5px;margin-top:-.75px;border-radius:1px;background:currentColor}
.ab-name-marks i::after{transform:rotate(90deg)}
.ab-name-marks i:nth-child(1){left:0;top:0}
.ab-name-marks i:nth-child(2){right:0;top:0}
.ab-name-marks i:nth-child(3){left:0;bottom:0}
.ab-name-marks i:nth-child(4){right:0;bottom:0}
.ab-name-lines{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--gap)}
.ab-name-lines li{padding-top:1.1em;border-top:1px solid rgba(251,248,243,.24)}
.ab-name-lines .t-label{margin-bottom:.8em;color:var(--on-mist-2)}
.ab-name-lines .t-body{max-width:23em;text-wrap:pretty}

html.js .ab-name-panel{clip-path:inset(10% 3.5% 0 3.5% round var(--r-lg));transition:clip-path 1.7s var(--e-out)}
html.js .ab-name-panel.is-in{clip-path:inset(0 0 0 0 round var(--r-lg))}
html.js .ab-name-focus{opacity:0;transform:scale(.9) translate3d(0,4%,0);transition:opacity 1.2s var(--e-out) .25s,transform 1.9s var(--e-out) .25s}
html.js .ab-name-panel.is-in .ab-name-focus{opacity:1;transform:none}
html.js .ab-name-marks{opacity:0;transform:scale(1.14);transition:opacity .9s var(--e-out),transform 1.5s var(--e-out)}
html.js .ab-name-panel.is-awake .ab-name-marks{opacity:1;transform:none}
@media (max-width:812px){
  .ab-name-glow{background:
    radial-gradient(circle 64vw at var(--gx,50%) var(--gy,34%),rgba(251,248,243,.16),rgba(251,248,243,0) 72%),
    radial-gradient(circle 90vw at 100% 115%,rgba(232,221,202,.2),rgba(232,221,202,0) 70%)}
  .ab-name-panel{min-height:0}
  .ab-name-title{max-width:7em}
  .ab-name-blink{padding:.8em 1.1em}
  .ab-name-stage{padding-block:clamp(48px,14vw,80px) clamp(52px,15vw,88px)}
  .ab-name-focus{width:86%}
  .ab-name-lines{grid-template-columns:minmax(0,1fr);row-gap:24px}
}
.ab-name{padding-top:0}

@media (prefers-reduced-motion:reduce){
  html.js .ab-sign-logo,html.js .ab-arch[data-reveal]{clip-path:none}
  html.js .ab-pill{opacity:1;scale:1}
  html.js .ab-name-focus,html.js .ab-name-marks{opacity:1;transform:none}
  html.js .ab-name-panel{clip-path:none}
  .ab-caret{animation:none}
  .ab-marquee-in{animation:none}
}