/* =====================================================================
   CEEK — home: hero, the reel section, services index, Website-Check
   ===================================================================== */

/* ---------- hero: straight on the page's clouds (bg.js, the same sky as every page); the words lift away as you
   scroll down through them to the work ---------- */
.hero{position:relative;isolation:isolate;display:flex;flex-direction:column;min-height:100vh;min-height:100svh;overflow:hidden}
.hero-inner{position:relative;display:flex;flex-direction:column;flex:1 1 auto;padding-top:calc(18px + 66px + clamp(28px,4vh,64px));padding-bottom:clamp(18px,2vw,32px);
  transform:translate3d(0,calc(var(--out,0) * -12vh),0);opacity:calc(1 - var(--out,0) * 1.4)}
/* the words, set exactly as kota.co.uk sets "rebel against boring" (measured at 1440 × 900): Syne Bold at 16vw,
   letter spacing -.032em, three lines in a box 4.866em × 2.51em that starts 7.5vw from the left — the first line at the
   box's edge, the second stepped in 1.05em, the third .16em, baselines at .698, 1.415 and 2.241em. The o of "online" is a
   window onto our work, 0.595 × 0.508em with corners at 45%, and the sentence sits beside the last line */
.hero-copy{position:relative;display:flex;flex-direction:column;justify-content:center;flex:1 1 auto;padding:calc(clamp(12px,3vh,40px) + 4.6vh) 0 clamp(12px,3vh,40px)}
.hero-type{--fs:min(16vw,30vh);position:relative;width:calc(var(--fs) * 4.866);height:calc(var(--fs) * 2.51);margin-left:calc(7.5vw - var(--m))}
.hero-display{position:absolute;inset:0;font-family:"Syne",var(--sans);font-size:var(--fs);font-weight:700;line-height:1;letter-spacing:-.032em;color:var(--text);white-space:nowrap}
/* each line is its own mask, from the top of the tall letters to the bottom of the g */
.hd-line{position:absolute;display:block;overflow:hidden;padding:.04em .08em .26em;margin:-.04em 0 0 -.08em}
.hd-line>span{display:inline-block}
.hd-1{top:-.132em;left:0}
.hd-2{top:.585em;left:1.013em}
.hd-3{top:1.411em;left:.121em}
.hd-o{position:relative;display:inline-block;color:transparent}
.hd-oval{position:absolute;top:.3em;left:.0545em;width:.595em;height:.508em;border-radius:45%;overflow:hidden;background:var(--mist);transform:translateZ(0)}
.hd-oval img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;opacity:0;transform:scale(1.08);transition:opacity .9s var(--e-out),transform 3.4s var(--e-out)}
.hd-oval img.is-on{opacity:1;transform:none}
.hd-oval video{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;opacity:0;transition:opacity .8s var(--e-out)}
.hd-oval video.is-playing{opacity:1}
/* beside the last line, its foot on that line's baseline */
.hero-lead{position:absolute;left:calc(var(--fs) * 3.698);bottom:calc(var(--fs) * .234);width:calc(var(--fs) * 1.46);
  font-size:clamp(16px,1.5vw,26px);font-weight:400;line-height:1.25;letter-spacing:-.01em}
.hero-lead strong{font-weight:700}
.hero-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.hero-actions{display:flex;flex-wrap:wrap;gap:10px}
.hero-meta{text-align:right}
.hero-meta .muted{color:var(--text-2)}

/* the eyes in the logos */
.logo .hole{transition:transform .55s var(--e-spring)}
.logo .lash{transition:opacity .25s}

/* arriving, as kota.co.uk does it: each line rises out of its mask over 1s (power3.out), the next one .125s later */
html.js .hd-line>span{transform:translate3d(0,130%,0);transition:transform 1s cubic-bezier(.215,.61,.355,1)}
html.js .hd-2>span{transition-delay:.125s}
html.js .hd-3>span{transition-delay:.25s}
html.js .hero.is-ready .hd-line>span{transform:none}
html.js .hero-lead,html.js .hero-foot{opacity:0;translate:0 14px;transition:opacity 1s var(--e-out) .7s,translate 1.2s var(--e-out) .7s}
html.js .hero.is-ready .hero-lead,html.js .hero.is-ready .hero-foot{opacity:1;translate:none}

@media (max-width:812px){
  .hero-inner{padding-top:calc(18px + 60px + clamp(28px,6vh,56px))}
  .hero-copy{justify-content:flex-start;padding-top:4vh}
  .hero-type{--fs:min(22vw,17vh);width:auto;height:auto;margin-left:0}
  .hero-display{position:relative;inset:auto}
  .hd-line{position:relative;top:auto;left:auto;margin-bottom:-.41em}
  .hd-o{color:inherit}
  .hd-oval{display:none}
  .hero-lead{position:static;width:auto;max-width:30em;margin:clamp(40px,7vh,64px) 0 0;font-size:clamp(16px,4.2vw,19px)}
  .hero-foot{flex-direction:column;align-items:flex-start}
  .hero-meta{display:none}
}

/* ---------- reel: "Design that gets noticed" ---------- */
.reel{position:relative}
.reel-head{position:relative;padding-top:clamp(56px,7vw,140px)}
.reel-ribbon{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:0}
.reel-ribbon path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.reel-title{position:relative;z-index:1;margin-left:-.05em}
.reel-title .line>span{width:fit-content}
.reel-title .l1{padding-left:calc(var(--col) * 2 + var(--gap) * 2)}
.reel-intro{position:relative;z-index:1;margin-top:clamp(36px,4.2vw,84px);align-items:start}
.reel-copy{grid-column:7/span 6;grid-row:1}
.reel-copy .t-lead{max-width:31em}
.reel-copy .pill{margin-top:clamp(26px,2.6vw,48px)}
.reel-thumb{grid-column:1/span 5;grid-row:1;width:calc(100% + var(--gap));aspect-ratio:16/9;margin-top:clamp(90px,10.5vw,200px);border-radius:var(--r)}
.reel-stage{position:relative;height:200vh;margin-top:clamp(40px,5vw,96px)}
.reel-sticky{position:sticky;top:0;z-index:2;height:100vh;display:flex;align-items:center;justify-content:center}
.reel-frame{position:relative;width:min(100%,144vh);aspect-ratio:2/1}
.reel-crosses{position:absolute;left:0;right:0;min-height:0;height:clamp(28px,2.4vw,40px);color:var(--text);opacity:max(0,calc((var(--p,0) - .92) * 12.5))}
.reel-crosses--top{bottom:100%}
.reel-crosses--bottom{top:100%}
/* the WebGL sheet is drawn on a fixed canvas under the frame's labels */
.reel-gl{position:fixed;inset:0;z-index:2;display:none;width:100%;height:100%;pointer-events:none}
.reel.is-gl .reel-gl{display:block}
/* the media box: a button over the frame. With WebGL it's transparent and only takes clicks once the reel is open */
.reel-media{position:absolute;left:0;top:0;width:100%;height:100%;display:block;padding:0;border:0;border-radius:var(--r);overflow:hidden;isolation:isolate;background:var(--mist);color:var(--white);font:inherit;cursor:pointer;will-change:transform}
.reel.is-gl .reel-media{background:transparent;pointer-events:none}
.reel.is-gl.is-open .reel-media{pointer-events:auto}
.reel.is-gl .reel-ph,.reel.is-gl .reel-video{opacity:0}
.reel.has-video .reel-ph{display:none}
.reel-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* placeholder footage until the film is in: slow light drifting over mist */
.reel-ph{position:absolute;inset:0;overflow:hidden;background:
  radial-gradient(42% 60% at 30% 40%,rgba(232,221,202,.55),rgba(232,221,202,0) 70%),
  radial-gradient(38% 55% at 70% 62%,rgba(204,192,178,.5),rgba(204,192,178,0) 70%),
  radial-gradient(30% 45% at 55% 30%,rgba(244,239,231,.35),rgba(244,239,231,0) 70%),
  var(--mist);
  background-size:180% 180%,170% 170%,160% 160%,100% 100%;animation:ph-drift 18s ease-in-out infinite alternate}
.reel-ph::after{content:"";position:absolute;inset:0;opacity:.22;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")}
@keyframes ph-drift{
  0%{background-position:0% 0%,100% 100%,50% 0%,0 0}
  50%{background-position:100% 30%,0% 60%,0% 100%,0 0}
  100%{background-position:40% 100%,70% 0%,100% 40%,0 0}
}
.reel-shade{position:absolute;inset:0;background:var(--mist);opacity:0;transition:opacity .7s var(--e-out)}
.reel.is-open .reel-shade{opacity:.2}
.reel-label{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;gap:.24em;font-size:min(7.5vw,13.5vh);line-height:1;letter-spacing:-.035em;text-transform:uppercase;pointer-events:none}
.reel-word{display:flex;overflow:hidden;padding:.06em .02em .1em;margin:-.06em 0 -.1em}
.reel-word>span{display:block;transform:translate3d(0,115%,0);transition:transform 1s var(--e-out);transition-delay:calc(var(--i,0) * .045s)}
.reel.is-open .reel-word>span{transform:none}
/* the play button fills with mist from the bottom on hover */
.reel-play{position:relative;isolation:isolate;display:grid;place-items:center;width:1.25em;height:.8em;border-radius:99em;overflow:hidden;background:var(--white);color:var(--text);transform:scale(0);transition:transform .8s var(--e-spring),color .35s var(--e-swift)}
.reel-play::before{content:"";position:absolute;z-index:-1;inset:0;background:var(--mist);transform:scaleY(0);transform-origin:50% 100%;transition:transform .45s var(--e-swift)}
.reel.is-open .reel-play{transform:none;transition-delay:.15s,0s}
.reel-play-icon{width:.3em;height:.3em}
.reel-play-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}   /* the button's name on desktop, a visible label on phones */
@media (hover:hover){
  .reel-media:hover .reel-play{color:var(--white)}
  .reel-media:hover .reel-play::before{transform:none}
}
.reel-media:focus-visible{outline:2px solid var(--mist);outline-offset:6px}

/* without JS the reel is simply open */
html:not(.js) .reel{--p:1}
html:not(.js) .reel-thumb{display:none}
html:not(.js) .reel-word>span,html:not(.js) .reel-play{transform:none}

/* phones, tablets in portrait and reduced motion: no pin, the reel simply sits in the page */
.reel.is-static{--p:1}
.reel.is-static .reel-stage{height:auto;margin-top:clamp(40px,9vw,72px)}
.reel.is-static .reel-sticky{position:relative;height:auto;padding-block:0}
.reel.is-static .reel-thumb{display:none}
.reel.is-static .reel-frame{width:100%}
.reel.is-static .reel-crosses{display:none}
@media (max-width:812px){
  .reel-title .l1{padding-left:0}
  .reel-copy{grid-column:1/-1}
  .reel-ribbon{display:none}
  .reel-frame{aspect-ratio:4/3}
  .reel-word{display:none}
  .reel-label{font-size:16px}
  .reel-play{width:auto;height:auto;gap:.6em;grid-auto-flow:column;padding:1.05em 1.5em;font-weight:500;letter-spacing:.06em;font-size:13px}
  .reel-play-icon{width:1.2em;height:1.2em}
  .reel-play-text{position:static;width:auto;height:auto;overflow:visible;clip:auto}
}

/* ---------- player: the reel full screen ---------- */
html.player-open{overflow:hidden}
.player{position:fixed;inset:0;z-index:70;display:grid;place-items:center;padding:clamp(16px,4vw,64px);visibility:hidden;opacity:0;transition:opacity .5s var(--e-out),visibility 0s linear .5s}
html.player-open .player{visibility:visible;opacity:1;transition:opacity .5s var(--e-out)}
.player-scrim{position:absolute;inset:0;background:rgba(244,239,231,.9);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.player-box{position:relative;width:min(100%,calc((100vh - 2 * clamp(16px,4vw,64px) - 72px) * 16 / 9));transform:scale(.94) translate3d(0,14px,0);transition:transform .8s var(--e-out)}
html.player-open .player-box{transform:none}
.player-frame{position:relative;aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;background:var(--mist);color:var(--white)}
.player-video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:var(--mist)}
.player.has-video .player-ph{display:none}
.player-ph{position:absolute;inset:0;display:grid;place-items:center}
.player-note{position:relative;display:grid;justify-items:center;gap:1em;padding:24px;text-align:center}
.player-note .t-label{color:var(--on-mist-2)}
.player-note em{color:var(--sand)}
.player-close{position:absolute;right:0;top:calc(100% + 16px);display:inline-flex;align-items:center;gap:.5em;padding:.4em 0;font-size:clamp(12px,.85vw,15px);font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--text)}
.player-close svg{width:1.4em;height:1.4em;transition:transform .5s var(--e-swift)}
@media (hover:hover){.player-close:hover svg{transform:rotate(90deg)}}

/* ---------- featured work ---------- */
.featured{padding-top:clamp(40px,6vw,120px)}
/* the pictures are painted by cards-gl.js on a canvas over the page; the DOM ones keep their place, unseen */
.cards-gl{position:fixed;inset:0;z-index:1;width:100%;height:100%;pointer-events:none}
.project.is-gl .project-media{background:transparent}
.project.is-gl .project-img{opacity:0}
.featured-more{display:flex;justify-content:center;margin-top:clamp(64px,6.4vw,124px)}
.projects--cta{margin-top:clamp(64px,6.4vw,124px)}   /* after the button: the invitation, on its own */

/* ---------- services index ---------- */
.svc-list{border-top:1px solid var(--line)}
.svc-list>li{border-bottom:1px solid var(--line)}
.svc-row{position:relative;isolation:isolate;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);row-gap:.9em;align-items:start;padding:clamp(28px,3vw,56px) 0}
.svc-row::before{content:"";position:absolute;z-index:-1;inset:0 calc(var(--m) * -1);background:var(--sand);transform:scaleY(0);transform-origin:50% 100%;transition:transform .65s var(--e-swift)}
.svc-key{grid-column:1;grid-row:1/span 2;display:grid;place-items:center;width:2.6em;height:2.6em;margin-top:.15em;border-radius:50%;box-shadow:inset 0 0 0 1px var(--line-strong);transition:background-color .4s,color .4s,box-shadow .4s}
.svc-name{grid-column:2/span 5;grid-row:1}
.svc-name em{display:block;margin-top:.12em;font-size:.6em;color:var(--text-3)}
.svc-desc{grid-column:2/span 4;grid-row:2;color:var(--text);max-width:28em}
.svc-items{grid-column:7/span 5;grid-row:1/span 2;display:flex;flex-wrap:wrap;gap:8px;padding-top:.5em}
.svc-items>span{display:inline-flex;align-items:center;gap:.6em;padding:.62em 1.05em;border-radius:99px;box-shadow:inset 0 0 0 1px var(--line-strong);font-size:clamp(13px,.9vw,16px);font-weight:500;line-height:1.1;transition:background-color .4s,box-shadow .4s}
.svc-items b{padding:.25em .6em;margin:-.25em -.45em -.25em 0;border-radius:99px;background:var(--mist);color:var(--white);font-size:.72em;letter-spacing:.06em;text-transform:uppercase}
.svc-arrow{grid-column:12;grid-row:1/span 2;justify-self:end;width:clamp(30px,2.8vw,54px);padding-top:.35em;transition:transform .6s var(--e-swift)}
.svc-arrow svg{width:100%;height:auto}
@media (hover:hover){
  .svc-row:hover::before{transform:scaleY(1);transform-origin:50% 0}
  .svc-row:hover .svc-arrow{transform:rotate(-45deg)}
  .svc-row:hover .svc-items>span{background:var(--white);box-shadow:none}
  .svc-row:hover .svc-key{background:var(--mist);color:var(--white);box-shadow:none}
}
@media (max-width:812px){
  .svc-row{grid-template-columns:auto 1fr auto;column-gap:16px}
  .svc-key{grid-column:1;grid-row:1;margin-top:0}
  .svc-name{grid-column:2;grid-row:1}
  .svc-desc{grid-column:2/-1;grid-row:2}
  .svc-items{grid-column:2/-1;grid-row:3;padding-top:.3em}
  .svc-arrow{grid-column:3;grid-row:1;width:26px}
}

/* ---------- website-check ---------- */
.check{padding-bottom:clamp(96px,10vw,200px)}
.check-box{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);row-gap:48px;align-items:center;padding:clamp(28px,4.4vw,88px);border-radius:var(--r-lg);background:var(--sand)}
.check-copy{grid-column:1/span 6}
.check-title{margin:.45em 0 .5em;font-size:clamp(36px,4.2vw,92px)}
.check-text{max-width:30em;margin-bottom:clamp(28px,2.6vw,48px)}
.check-report{grid-column:8/span 5;padding:clamp(20px,1.9vw,34px);border-radius:var(--r);background:var(--white);box-shadow:0 40px 80px -48px rgba(106,129,147,.55)}
.report-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding-bottom:1em}
.report-site{font-size:clamp(13px,.88vw,15px);color:var(--text-3)}
.report-list li{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr) auto;align-items:center;gap:12px;padding:.85em 0;border-top:1px solid var(--line-soft);font-size:clamp(14px,.98vw,17px)}
.report-k{font-weight:500}
.report-v{color:var(--text-3)}
.st{display:grid;place-items:center;width:1.6em;height:1.6em;border-radius:50%}
.st svg{width:1.1em;height:1.1em}
.st--ok{background:var(--mist);color:var(--white)}
.st--warn{background:var(--taupe);color:var(--white)}
.st--bad{box-shadow:inset 0 0 0 1.5px var(--mist);color:var(--text)}
.report-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-top:1.1em;border-top:1px solid var(--line-soft);color:var(--text-3)}
.report-eyes{width:52px}
.report-eyes svg{width:100%;height:auto;overflow:visible}
html.js .report-list li{opacity:0;transform:translate3d(0,10px,0);transition:opacity .7s var(--e-out),transform .8s var(--e-out);transition-delay:calc(.45s + var(--i) * .12s)}
html.js .check-box.is-in .report-list li{opacity:1;transform:none}
@media (max-width:960px){.check-copy,.check-report{grid-column:1/-1}}
@media (prefers-reduced-motion:reduce){html.js .report-list li{opacity:1;transform:none}}