/* ============================================================
   Anas Lataiwish — Portfolio
   ============================================================ */
@font-face{font-family:Poppins;font-weight:300;font-style:normal;font-display:swap;src:url(assets/fonts/poppins-300.woff2) format('woff2')}
@font-face{font-family:Poppins;font-weight:400;font-style:normal;font-display:swap;src:url(assets/fonts/poppins-400.woff2) format('woff2')}
@font-face{font-family:Poppins;font-weight:500;font-style:normal;font-display:swap;src:url(assets/fonts/poppins-500.woff2) format('woff2')}
@font-face{font-family:Poppins;font-weight:600;font-style:normal;font-display:swap;src:url(assets/fonts/poppins-600.woff2) format('woff2')}
@font-face{font-family:Poppins;font-weight:700;font-style:normal;font-display:swap;src:url(assets/fonts/poppins-700.woff2) format('woff2')}

:root{
  --bg:#08090a; --bg2:#0e1012; --card:#131518;
  --ink:#f2f3f4; --ink2:#9aa0a6; --ink3:#5b6167;
  --line:rgba(255,255,255,.10); --line2:rgba(255,255,255,.055);
  --ease:cubic-bezier(.22,1,.36,1);
  --pad:clamp(18px,4vw,64px);
  --plate-ratio:0.6129;
  --maxw:1600px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
html,body{margin:0;background:var(--bg);color:var(--ink)}
body{font-family:Poppins,system-ui,-apple-system,"Segoe UI",sans-serif;font-weight:400;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body.is-loading,body.cs-open{overflow:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:#e8e9ea;color:#08090a}

.eyebrow{margin:0;font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--ink3)}
.sec__t{margin:12px 0 0;font-size:clamp(26px,4.6vw,60px);font-weight:600;line-height:1.02;letter-spacing:-.038em}
/* two-tone split heading, as used throughout the PDF portfolio */
.sec__t--mute{color:var(--ink3)}
.sec__t em{font-style:normal;font-weight:300;color:var(--ink2)}
.sec__d{margin:16px 0 0;max-width:52ch;font-size:clamp(13px,1.05vw,15px);font-weight:300;line-height:1.7;color:var(--ink2)}

/* ══ STAGE ══ */
.stage{position:fixed;inset:0;z-index:30;pointer-events:none;perspective:1400px;contain:strict}
.stage__glow{position:absolute;left:50%;top:46%;width:min(120vw,1400px);aspect-ratio:1;translate:-50% -50%;
  background:radial-gradient(circle,rgba(150,170,190,.16),rgba(120,140,160,.05) 42%,transparent 68%);
  opacity:0;transition:opacity 1.4s var(--ease)}
body.ready .stage__glow{opacity:1}
.ring{position:absolute;inset:0;transform-style:preserve-3d}
.plate{position:absolute;left:0;top:0;width:var(--w);aspect-ratio:var(--plate-ratio);
  transform-origin:50% 50%;will-change:transform,opacity;backface-visibility:hidden;opacity:0}
.plate__inner{position:relative;width:100%;height:100%;border-radius:clamp(6px,1.1vw,14px);overflow:hidden}
.plate img{width:100%;height:100%;object-fit:contain}
.plate__sheen{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 32%,rgba(255,255,255,.42) 46%,rgba(255,255,255,.06) 55%,transparent 66%);
  translate:calc(var(--sheen,0) * 260% - 130%) 0;mix-blend-mode:screen;opacity:.75}
.plate__shadow{position:absolute;left:6%;right:6%;bottom:-9%;height:16%;
  background:radial-gradient(ellipse at center,rgba(0,0,0,.72),transparent 70%);filter:blur(10px);opacity:var(--shadow,0)}

/* ══ HEADER ══ */
.hdr{position:fixed;top:0;left:0;right:0;z-index:40;display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:16px var(--pad);opacity:0;transform:translateY(-12px);
  transition:opacity .9s var(--ease) .1s,transform .9s var(--ease) .1s,background .4s,backdrop-filter .4s}
body.ready .hdr{opacity:1;transform:none}
.hdr.stuck{background:rgba(8,9,10,.72);backdrop-filter:blur(16px);border-bottom:1px solid var(--line2)}
.hdr__mark{display:flex;align-items:baseline;gap:5px;font-size:15px}
.hdr__logo{font-weight:600;letter-spacing:-.02em}
.hdr__logo i{font-style:normal;color:var(--ink2)}
.hdr__logo2{font-weight:300;color:var(--ink2);letter-spacing:-.01em}
.hdr__nav{display:flex;gap:clamp(14px,2.2vw,28px)}
.hdr__nav a{font-size:12px;font-weight:400;letter-spacing:.04em;color:var(--ink2);transition:color .3s}
.hdr__nav a:hover{color:var(--ink)}
.hdr__cta{font-size:12px;font-weight:500;padding:9px 18px;border-radius:100px;
  background:linear-gradient(180deg,#f4f5f6,#c9ccd0);color:#0a0b0c;transition:transform .35s var(--ease),box-shadow .35s}
.hdr__cta:hover{transform:translateY(-1px);box-shadow:0 6px 22px rgba(220,225,230,.20)}

/* ══ HERO ══ */
.hero{position:relative;z-index:5;min-height:100svh;display:grid;place-items:center;padding:0 var(--pad);pointer-events:none}
/* The ring is position:fixed, so the figure must be too — otherwise it
   scrolls up through the orbit and the plates cut across the subject.
   Pinned here, it stays concentric with the ellipse at every scroll
   position, and --hero-fade clears it out as the plates start leaving.
   z-index 5 keeps it under the opaque .work section (6), which slides
   over it, while the plates (stage, 30) still fly above everything. */
.hero__center{
  position:fixed;left:50%;top:50%;translate:-50% -50%;
  display:grid;place-items:center;
  opacity:var(--hero-fade,1);
}
.hero__center.is-gone{visibility:hidden}

/* The figure lives inside the ring. Its height is driven by --fig-h,
   which JS derives from the ring's inner clearance so the plates
   orbiting outside can never overlap it. */
.hero__figure{
  margin:0;position:relative;
  height:var(--fig-h,54svh);
  aspect-ratio:234/549;
  display:grid;place-items:center;
  /* JS nudges the figure onto the ring's centre (vh*.455, not vh/2) so the
     subject is concentric with the orbit. `translate` is its own property,
     so it survives the `transform` keyframes of heroIn. */
  translate:0 var(--fig-dy,0px);
}
.hero__figure img,.hero__figure video{
  width:100%;height:100%;object-fit:contain;
  filter:drop-shadow(0 26px 50px rgba(0,0,0,.6));
}
/* soft pool of light under the subject, sits behind them */
.hero__figure::before{
  content:'';position:absolute;left:50%;bottom:-4%;translate:-50% 0;
  width:150%;height:16%;
  background:radial-gradient(ellipse at center,rgba(150,170,190,.20),transparent 70%);
  filter:blur(8px);z-index:-1;
}
.hero__center>*{opacity:0;transform:translateY(26px) scale(.97);filter:blur(6px)}
body.ready .hero__center>*{animation:heroIn 1.3s var(--ease) .18s forwards}
@keyframes heroIn{to{opacity:1;transform:none;filter:blur(0)}}
.hero__hint{position:absolute;left:50%;bottom:clamp(20px,4vh,40px);translate:-50% 0;display:flex;flex-direction:column;
  align-items:center;gap:10px;font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink3);
  opacity:0;transition:opacity .6s var(--ease)}
body.ready .hero__hint{opacity:1;transition-delay:1s}
.hero__hint.gone{opacity:0!important}
.hero__rule{width:1px;height:38px;background:linear-gradient(var(--ink3),transparent)}

/* ══ LOGOFOLIO GRID ══ */
.work{position:relative;z-index:6;background:var(--bg);padding:0 var(--pad) clamp(40px,7vh,90px)}
.work__head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;
  max-width:var(--maxw);margin-inline:auto;padding:clamp(20px,4vh,50px) 0 clamp(16px,2.4vh,28px);border-bottom:1px solid var(--line)}
.work__count{margin:0;font-size:11px;letter-spacing:.18em;color:var(--ink3);font-variant-numeric:tabular-nums;white-space:nowrap}
.work__count i{font-style:normal;opacity:.4;padding:0 2px}
.grid{display:grid;grid-template-columns:repeat(4,1fr);border-left:1px solid var(--line2);max-width:var(--maxw);margin-inline:auto}
.cell{position:relative;border-right:1px solid var(--line2);border-bottom:1px solid var(--line2);
  padding:clamp(12px,1.6vw,22px);display:flex;flex-direction:column;gap:12px;cursor:pointer;transition:background .45s var(--ease)}
.cell:hover{background:rgba(255,255,255,.025)}
.cell--empty,.cell--nolink{cursor:default}
.cell--empty:hover{background:none}
.cell__slot{position:relative;width:min(100%,290px);margin-inline:auto;aspect-ratio:var(--plate-ratio)}
.cell__img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;
  transition:opacity .5s var(--ease),transform .6s var(--ease)}
.cell.filled .cell__img{opacity:1}
.cell:hover .cell__img{transform:translateY(-4px)}
.cell__meta{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:8px;
  border-top:1px solid var(--line2);opacity:0;transform:translateY(8px);
  transition:opacity .7s var(--ease),transform .7s var(--ease)}
.cell.filled .cell__meta{opacity:1;transform:none}
.cell__n{font-size:10px;letter-spacing:.14em;color:var(--ink3);font-variant-numeric:tabular-nums;display:flex;align-items:center;gap:7px}
.dotmark{width:4px;height:4px;border-radius:50%;background:#5df2a0;display:inline-block}
.cell__view{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink3);
  opacity:0;transform:translateX(-4px);transition:opacity .4s var(--ease),transform .4s var(--ease),color .4s}
.cell:hover .cell__view{opacity:1;transform:none;color:var(--ink)}
.grid__note{max-width:var(--maxw);margin:18px auto 0;font-size:11px;color:var(--ink3);
  letter-spacing:.02em;line-height:1.7;max-inline-size:70ch}
.grid__note i{display:inline-block;vertical-align:middle;margin-inline:3px}
.sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ══ LIVE SITES ══
   Real deployed work. Anchors, not overlay triggers — they leave the page,
   so they get an explicit host label and an outbound arrow. */
.live{position:relative;z-index:6;background:var(--bg);padding:clamp(50px,9vh,120px) var(--pad);border-top:1px solid var(--line)}
.live__list{max-width:var(--maxw);margin-inline:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,30px)}
.lcard{position:relative;display:block;border-radius:8px;overflow:hidden;background:var(--card);
  border:1px solid var(--line2);text-decoration:none;color:inherit;
  transition:border-color .5s var(--ease),transform .6s var(--ease)}
.lcard:hover{border-color:rgba(255,255,255,.20);transform:translateY(-3px)}
.lcard__media{position:relative;aspect-ratio:16/10;overflow:hidden;background:#0a0b0c}
.lcard__media img{width:100%;height:100%;object-fit:cover;object-position:top center;
  transition:transform 1.1s var(--ease)}
.lcard:hover .lcard__media img{transform:scale(1.045)}
/* screenshots carry their own type, so the scrim has to be heavier than the
   case-card one or the two sets of words collide */
.lcard__media::after{content:'';position:absolute;inset:0;
  background:linear-gradient(to top,rgba(8,9,10,.97) 0%,rgba(8,9,10,.86) 26%,rgba(8,9,10,.45) 52%,transparent 82%)}
.lcard__body{position:absolute;left:0;right:0;bottom:0;padding:clamp(14px,1.6vw,22px);z-index:2;
  display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.lcard__t{margin:0;font-size:clamp(15px,1.3vw,19px);font-weight:500;letter-spacing:-.026em;line-height:1.2;
  text-wrap:balance}
.lcard__host{margin:5px 0 0;font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--ink2)}
.lcard__go{flex:none;width:32px;height:32px;border-radius:50%;border:1px solid rgba(255,255,255,.25);
  display:grid;place-items:center;font-size:12px;color:var(--ink);
  transition:background .4s,border-color .4s,transform .5s var(--ease)}
.lcard:hover .lcard__go{background:var(--ink);color:#0a0b0c;border-color:var(--ink);transform:translate(2px,-2px)}
@media (max-width:900px){ .live__list{grid-template-columns:1fr} }

/* ══ CASE LIST ══ */
.cases{position:relative;z-index:6;background:var(--bg);padding:clamp(50px,9vh,120px) var(--pad);border-top:1px solid var(--line)}
.cases__head{max-width:var(--maxw);margin:0 auto clamp(28px,4.5vw,56px)}
/* Cards carry three different aspect ratios, so rows must not stretch the
   short ones (that padded dead space under the artwork), and a 2-col span
   landing on an odd cursor must not leave a gap — dense back-fills it. */
.cases__list{max-width:var(--maxw);margin-inline:auto;display:grid;grid-template-columns:repeat(2,1fr);
  gap:clamp(14px,2vw,30px);grid-auto-flow:dense;align-items:start}
.case{position:relative;border-radius:8px;overflow:hidden;background:var(--card);cursor:pointer;
  border:1px solid var(--line2);transition:border-color .5s var(--ease),transform .6s var(--ease)}
.case:hover{border-color:rgba(255,255,255,.20);transform:translateY(-3px)}
.case--wide{grid-column:span 2}
.case__media{position:relative;aspect-ratio:16/10;overflow:hidden;background:#0a0b0c}
.case--wide .case__media{aspect-ratio:21/9}
.case--tall .case__media{aspect-ratio:4/5}
.case__media img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease),filter .6s}
/* A couple of 2-col cards top out at 1600-1920px of real source, just under the
   2646 device px a retina wide card wants. Let the GPU resample smoothly rather
   than showing the hard, blocky edges that read as pixelation. */
@media (min-resolution:1.5dppx){
  .case--wide .case__media img{image-rendering:auto}
}
/* Behance covers are ~1.28:1 artwork, not croppable photography — forcing one
   into a 21:9 or 4:5 card slices the mark in half. Give those cards the
   artwork's own ratio so the cover is shown whole, exactly as on Behance. */
.case--cover .case__media{aspect-ratio:1.278;background:#0d0f11}
.case:hover .case__media img{transform:scale(1.045)}
/* hover preview: the clip sits over the still and cross-fades in, so the
   swap reads as one continuous image rather than a cut */
.case__vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .5s var(--ease);pointer-events:none}
.case.playing .case__vid{opacity:1}
.case__media::after{content:'';position:absolute;inset:0;
  background:linear-gradient(to top,rgba(8,9,10,.92) 0%,rgba(8,9,10,.35) 38%,transparent 68%)}
.case__body{position:absolute;left:0;right:0;bottom:0;padding:clamp(14px,2vw,26px);z-index:2;
  display:flex;align-items:flex-end;justify-content:space-between;gap:14px}
.case__t{margin:0;font-size:clamp(16px,2vw,28px);font-weight:500;letter-spacing:-.028em;line-height:1.12}
.case__sub{margin:5px 0 0;font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink2)}
.case__go{flex:none;width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.25);
  display:grid;place-items:center;font-size:13px;color:var(--ink);
  transition:background .4s,border-color .4s,transform .5s var(--ease)}
.case:hover .case__go{background:var(--ink);color:#0a0b0c;border-color:var(--ink);transform:rotate(45deg)}
.case__yr{position:absolute;top:clamp(12px,1.6vw,20px);right:clamp(12px,1.6vw,20px);z-index:2;
  font-size:10px;letter-spacing:.14em;color:#fff;background:rgba(0,0,0,.42);backdrop-filter:blur(8px);
  padding:5px 10px;border-radius:100px;border:1px solid rgba(255,255,255,.14)}

/* ══ SERVICES ══ */
.svc{position:relative;z-index:6;background:var(--bg);padding:clamp(50px,9vh,120px) var(--pad);border-top:1px solid var(--line)}
.svc__head{max-width:var(--maxw);margin:0 auto clamp(26px,4vw,50px)}
.svc__grid{max-width:var(--maxw);margin-inline:auto;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.6vw,22px)}
.scard{background:linear-gradient(158deg,rgba(255,255,255,.055),rgba(255,255,255,.018) 52%,rgba(255,255,255,.008));
  backdrop-filter:blur(18px) saturate(1.5);-webkit-backdrop-filter:blur(18px) saturate(1.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), inset 0 -1px 0 rgba(0,0,0,.30);
  border:1px solid var(--line2);border-radius:10px;padding:clamp(18px,2.2vw,30px);
  display:flex;flex-direction:column;gap:14px;transition:border-color .5s var(--ease),background .5s,transform .6s var(--ease)}
.scard:hover{border-color:rgba(255,255,255,.18);background:#171a1d;transform:translateY(-3px)}
.scard__i{width:34px;height:34px;color:var(--ink2)}
.scard:hover .scard__i{color:var(--ink)}
.scard h3{margin:0;font-size:clamp(15px,1.5vw,19px);font-weight:500;letter-spacing:-.02em;line-height:1.2}
.scard p{margin:0;font-size:13px;font-weight:300;line-height:1.65;color:var(--ink2)}

/* ══ ABOUT ══ */
.about{position:relative;z-index:6;background:var(--bg);padding:clamp(50px,9vh,120px) var(--pad);
  display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:clamp(28px,5vw,80px);
  align-items:start;border-top:1px solid var(--line)}
.about__media{position:sticky;top:96px}
/* Full-length studio portrait (ar ≈ 0.435). The old 3/4 frame with a face-
   biased crop was built for a headshot and would have cut this one off at
   the chest, so the frame now carries the photograph's own tall ratio and
   shows the figure whole — which also echoes the standing figure in the
   hero ring. Capped so it can't outgrow the sticky column on short screens. */
/* max-height can make the box wider than the photo's own ratio, so the
   backdrop colour is painted behind it — the shot's own seamless black —
   which makes the letterboxing invisible rather than a grey gap. */
.about__media img{width:100%;aspect-ratio:827/1902;max-height:78vh;object-fit:contain;
  object-position:50% 50%;border-radius:6px;background:#0b0b0c;
  filter:grayscale(1) contrast(1.06);transition:filter .8s var(--ease)}
.about__media:hover img{filter:grayscale(0) contrast(1)}
.about__p{margin:0;max-width:62ch;font-size:clamp(13px,1.05vw,15px);font-weight:300;line-height:1.75;color:var(--ink2)}
/* first paragraph carries the section now that the pull-quote is gone */
.about__p--lead{margin-top:16px;max-width:56ch;font-size:clamp(16px,1.9vw,26px);font-weight:300;
  line-height:1.45;letter-spacing:-.022em;color:var(--ink)}
.xp{margin:clamp(26px,4vw,44px) 0 0;display:grid;gap:1px;background:var(--line2);border:1px solid var(--line2);border-radius:8px;overflow:hidden}
.xrow{background:var(--bg);padding:clamp(14px,1.8vw,22px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:14px}
.xrow__l h4{margin:0;font-size:14px;font-weight:500;letter-spacing:-.01em}
.xrow__l p{margin:3px 0 0;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3)}
.xrow__r{margin:0;font-size:13px;font-weight:300;line-height:1.65;color:var(--ink2)}
.facts{margin:clamp(24px,3.4vw,40px) 0 0;padding-top:20px;border-top:1px solid var(--line2);
  display:grid;grid-template-columns:repeat(2,1fr);gap:16px 24px}
.facts div{display:flex;flex-direction:column;gap:4px}
.facts dt{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink3)}
.facts dd{margin:0;font-size:13px;color:var(--ink)}

/* ══ CONTACT ══ */
.contact{position:relative;z-index:6;background:var(--bg);padding:clamp(50px,9vh,120px) var(--pad) clamp(24px,4vh,44px);border-top:1px solid var(--line)}
.contact__lead{margin:14px 0 18px;font-size:clamp(30px,7vw,96px);font-weight:500;line-height:.98;letter-spacing:-.04em}
.contact__d{margin:0 0 clamp(28px,4vw,48px);max-width:46ch;font-size:clamp(13px,1.05vw,15px);font-weight:300;color:var(--ink2)}
.contact__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.4vw,18px);margin-bottom:clamp(30px,4.6vw,56px)}
.ccard{background:linear-gradient(158deg,rgba(255,255,255,.055),rgba(255,255,255,.018) 52%,rgba(255,255,255,.008));
  backdrop-filter:blur(18px) saturate(1.5);-webkit-backdrop-filter:blur(18px) saturate(1.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), inset 0 -1px 0 rgba(0,0,0,.30);
  border:1px solid var(--line2);border-radius:10px;padding:clamp(16px,2vw,26px);
  display:flex;flex-direction:column;gap:8px;transition:border-color .45s,background .45s,transform .5s var(--ease)}
a.ccard:hover{border-color:rgba(255,255,255,.2);background:#171a1d;transform:translateY(-2px)}
.ccard__k{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink3)}
.ccard__v{font-size:clamp(13px,1.3vw,16px);font-weight:400;word-break:break-word}
.contact__links{list-style:none;margin:0;padding:0;border-top:1px solid var(--line2)}
.contact__links li{border-bottom:1px solid var(--line2)}
.contact__links a{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:clamp(13px,1.6vw,19px) 0;transition:padding .45s var(--ease)}
.contact__links a:hover{padding-left:clamp(8px,1.4vw,20px)}
.contact__links span{font-size:clamp(15px,1.9vw,24px);font-weight:400;letter-spacing:-.02em}
.contact__links i{font-style:normal;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3)}
.contact__links a:hover i{color:var(--ink)}
.foot{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-top:clamp(36px,6vh,80px);
  padding-top:18px;border-top:1px solid var(--line2);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink3)}

/* ══ CASE STUDY OVERLAY ══ */
.cs{position:fixed;inset:0;z-index:90;background:var(--bg);opacity:0;transition:opacity .5s var(--ease)}
.cs.on{opacity:1}
.cs__scroll{position:absolute;inset:0;overflow-y:auto;overscroll-behavior:contain;padding:clamp(70px,10vh,110px) var(--pad) clamp(50px,8vh,100px)}
.cs__close{position:fixed;top:clamp(16px,3vh,28px);right:var(--pad);z-index:3;background:rgba(20,22,25,.8);
  backdrop-filter:blur(10px);border:1px solid var(--line);color:var(--ink);font:inherit;font-size:10px;
  letter-spacing:.18em;text-transform:uppercase;padding:10px 16px;border-radius:100px;cursor:pointer;transition:background .3s,border-color .3s}
.cs__close:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.3)}
.cs__head{max-width:var(--maxw);margin:0 auto clamp(28px,4.6vw,56px)}
.cs__head h2{margin:12px 0 0;font-size:clamp(28px,5.4vw,74px);font-weight:600;line-height:1;letter-spacing:-.04em}
.cs__sub{margin:10px 0 0;font-size:clamp(13px,1.5vw,19px);font-weight:300;color:var(--ink2);letter-spacing:-.01em}
.cs__d{margin:clamp(18px,2.6vw,30px) 0 0;max-width:66ch;font-size:clamp(13px,1.1vw,16px);font-weight:300;line-height:1.78;color:var(--ink2)}
.cs__meta{margin:clamp(22px,3vw,36px) 0 0;padding-top:20px;border-top:1px solid var(--line2);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 24px;max-width:900px}
.cs__meta div{display:flex;flex-direction:column;gap:4px}
.cs__meta dt{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink3)}
.cs__meta dd{margin:0;font-size:13px;color:var(--ink)}
.cs__tags{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 0;padding:0}
.cs__tags li{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink2);
  border:1px solid var(--line2);border-radius:100px;padding:6px 13px}
.cs__shots{max-width:var(--maxw);margin-inline:auto;display:flex;flex-direction:column;gap:clamp(12px,1.8vw,26px)}
.cs__shots img,.cs__shots video{width:100%;height:auto;border-radius:8px;background:#0d0f11;border:1px solid var(--line2);
  opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.cs__shots img.in,.cs__shots video.in{opacity:1;transform:none}
.cs__link{display:inline-block;max-width:var(--maxw);margin:clamp(30px,5vw,60px) auto 0;
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;border:1px solid var(--line);
  padding:14px 26px;border-radius:100px;transition:background .4s,color .4s,border-color .4s}
.cs__link:hover{background:var(--ink);color:#0a0b0c;border-color:var(--ink)}

/* ══ REVEALS ══ */
[data-rv]{opacity:0;transform:translateY(24px);filter:blur(4px)}
[data-rv].in{opacity:1;transform:none;filter:blur(0);transition:opacity 1s var(--ease),transform 1s var(--ease),filter 1s var(--ease)}
.hero [data-rv]{opacity:1;transform:none;filter:none}

/* ══ RESPONSIVE ══ */
@media (max-width:1180px){
  .svc__grid{grid-template-columns:repeat(2,1fr)}
  .grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:900px){
  .about{grid-template-columns:1fr;gap:32px}
  .about__media{position:static;max-width:280px}
  .xrow{grid-template-columns:1fr;gap:8px}
  .cs__meta{grid-template-columns:repeat(2,minmax(0,1fr))}
  .contact__grid{grid-template-columns:1fr}
}
@media (max-width:720px){
  .grid{grid-template-columns:repeat(2,1fr)}
  .cases__list{grid-template-columns:1fr}
  .case--wide{grid-column:span 1}
  .facts{grid-template-columns:1fr}
  .hdr__nav{display:none}
  .contact__links i{display:none}
  .hero__eyebrow{font-size:9px;letter-spacing:.16em;max-width:18ch;margin-inline:auto}
  .hero__word{font-size:clamp(32px,12vw,54px)}
  .hero__sub{font-size:8px;letter-spacing:.14em;max-width:22ch;margin-inline:auto;line-height:1.9}
  .svc__grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
  .plate{display:none}
  .cell__img,.cell__meta{opacity:1!important;transform:none!important}
  [data-rv],.cs__shots img,.cs__shots video{opacity:1!important;transform:none!important;filter:none!important}
}

/* ══════════════════════════════════════════════════════════════════
   CUSTOM CURSOR — circular outline + centre dot
   Two independent layers: the dot tracks the pointer exactly, the ring
   trails it with easing (lerped in JS) so movement feels weighted.
   Pointer-events off so it can never intercept a click.
   ══════════════════════════════════════════════════════════════════ */
.cur,.cur__dot{position:fixed;top:0;left:0;z-index:9999;pointer-events:none;
  border-radius:50%;opacity:0;transition:opacity .35s var(--ease)}
.cur{width:34px;height:34px;border:1px solid rgba(255,255,255,.55);
  margin:-17px 0 0 -17px;
  backdrop-filter:blur(2px) saturate(1.2);
  box-shadow:0 0 0 1px rgba(0,0,0,.18) inset, 0 2px 14px rgba(0,0,0,.25);
  transition:opacity .35s var(--ease), width .38s var(--ease), height .38s var(--ease),
             margin .38s var(--ease), border-color .38s var(--ease),
             background .38s var(--ease), backdrop-filter .38s var(--ease)}
.cur__dot{width:5px;height:5px;margin:-2.5px 0 0 -2.5px;background:var(--ink);
  box-shadow:0 0 8px rgba(255,255,255,.5)}
body.cur-on .cur,body.cur-on .cur__dot{opacity:1}
/* over anything interactive the ring opens up and frosts */
.cur.is-hot{width:62px;height:62px;margin:-31px 0 0 -31px;
  border-color:rgba(255,255,255,.85);background:rgba(255,255,255,.07);
  backdrop-filter:blur(6px) saturate(1.5)}
.cur.is-down{width:26px;height:26px;margin:-13px 0 0 -13px;border-color:#fff}
/* only take over the pointer on real mouse hardware */
@media (hover:hover) and (pointer:fine){
  body.cur-on,body.cur-on a,body.cur-on button,
  body.cur-on .case,body.cur-on .scard,body.cur-on .cell,body.cur-on .lcard{cursor:none}
}

/* ══ GLOSSY iOS GLASS ══════════════════════════════════════════════
   Real glass = blur + saturation boost + a bright top edge and a dark
   bottom edge (the lens), not just a translucent fill.
   ══════════════════════════════════════════════════════════════════ */
.glass{position:relative;
  background:linear-gradient(158deg,rgba(255,255,255,.09) 0%,rgba(255,255,255,.035) 42%,rgba(255,255,255,.015) 100%);
  backdrop-filter:blur(22px) saturate(1.7);
  -webkit-backdrop-filter:blur(22px) saturate(1.7);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),
             inset 0 -1px 0 rgba(0,0,0,.35),
             0 12px 40px rgba(0,0,0,.42)}
/* the specular sweep across the top third */
.glass::before{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(to bottom,rgba(255,255,255,.16),rgba(255,255,255,.02) 38%,transparent 62%);
  opacity:.9}

/* header becomes true glass once it sticks */
.hdr.stuck{background:linear-gradient(180deg,rgba(14,16,18,.80),rgba(8,9,10,.62));
  backdrop-filter:blur(26px) saturate(1.8);-webkit-backdrop-filter:blur(26px) saturate(1.8);
  border-bottom:1px solid rgba(255,255,255,.09);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10), 0 10px 34px rgba(0,0,0,.40)}

/* pill buttons: glassy, with a lit top edge */
.hdr__cta{position:relative;overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55), 0 4px 16px rgba(0,0,0,.28)}
.hdr__cta::after{content:'';position:absolute;inset:0;
  background:linear-gradient(115deg,transparent 12%,rgba(255,255,255,.55) 32%,transparent 52%);
  transform:translateX(-130%);transition:transform .85s var(--ease)}
.hdr__cta:hover::after{transform:translateX(130%)}
.hdr__cta:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 8px 26px rgba(220,225,230,.26)}

.case__yr{background:rgba(12,14,16,.44);backdrop-filter:blur(14px) saturate(1.6);
  -webkit-backdrop-filter:blur(14px) saturate(1.6);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.20), 0 4px 14px rgba(0,0,0,.30)}

.cs__close{background:linear-gradient(180deg,rgba(26,29,33,.86),rgba(16,18,21,.78));
  backdrop-filter:blur(20px) saturate(1.7);-webkit-backdrop-filter:blur(20px) saturate(1.7);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 8px 26px rgba(0,0,0,.44)}

/* ══ RIM GLOW ══════════════════════════════════════════════════════
   A soft light that rides the top-left edge of a card, plus a wider
   ambient bloom underneath. Layered on ::after so it can fade
   independently of the card's own background.
   ══════════════════════════════════════════════════════════════════ */
.case,.scard,.ccard,.lcard{position:relative;isolation:isolate}
.case::after,.scard::after,.ccard::after,.lcard::after{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:3;
  padding:1px;
  background:linear-gradient(145deg,
    rgba(255,255,255,.55) 0%,
    rgba(255,255,255,.14) 22%,
    rgba(255,255,255,0) 46%,
    rgba(255,255,255,0) 72%,
    rgba(255,255,255,.10) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;
  opacity:0;transition:opacity .55s var(--ease)}
.case:hover::after,.scard:hover::after,.ccard:hover::after,.lcard:hover::after{opacity:1}
.case:hover,.lcard:hover{box-shadow:0 18px 50px -12px rgba(0,0,0,.65),
                                    0 0 42px -18px rgba(180,205,255,.32)}
.scard:hover,a.ccard:hover{box-shadow:0 14px 38px -14px rgba(0,0,0,.6),
                                      0 0 34px -16px rgba(180,205,255,.26)}

/* ══ SECTION TRANSITIONS ═══════════════════════════════════════════
   Each section fades its top hairline in as it arrives and carries a
   faint gradient wash, so one section melts into the next instead of
   butting against it.
   ══════════════════════════════════════════════════════════════════ */
.cases,.live,.svc,.about,.contact,.work{position:relative}
.cases::before,.live::before,.svc::before,.about::before,.contact::before{
  content:'';position:absolute;left:0;right:0;top:0;height:180px;pointer-events:none;z-index:0;
  background:linear-gradient(to bottom,rgba(255,255,255,.028),transparent)}
/* the hairline itself sweeps open from the centre on arrival */
.cases,.live,.svc,.about,.contact{border-top:0}
.cases::after,.live::after,.svc::after,.about::after,.contact::after{
  content:'';position:absolute;left:0;right:0;top:0;height:1px;z-index:1;
  background:linear-gradient(to right,transparent,var(--line) 18%,var(--line) 82%,transparent);
  transform:scaleX(.2);transform-origin:50% 50%;opacity:0;
  transition:transform 1.5s var(--ease),opacity 1.1s var(--ease)}
.cases.sec-in::after,.live.sec-in::after,.svc.sec-in::after,
.about.sec-in::after,.contact.sec-in::after{transform:scaleX(1);opacity:1}

/* ══ RICHER REVEALS ════════════════════════════════════════════════ */
[data-rv]{opacity:0;transform:translateY(30px) scale(.985);filter:blur(6px)}
[data-rv].in{opacity:1;transform:none;filter:blur(0);
  transition:opacity 1.05s var(--ease),transform 1.15s var(--ease),filter .9s var(--ease)}
.hero [data-rv]{opacity:1;transform:none;filter:none}

/* section headings rise a touch further and lead their content */
.cases__head[data-rv],.svc__head[data-rv],.work__head[data-rv]{transform:translateY(42px) scale(.99)}

@media (prefers-reduced-motion:reduce){
  .cur,.cur__dot{display:none}
  [data-rv]{opacity:1;transform:none;filter:none}
  .cases::after,.live::after,.svc::after,.about::after,.contact::after{transform:scaleX(1);opacity:1}
}

/* ══ CONTACT CARDS — actionable ════════════════════════════════════
   Email and WhatsApp are the two things a client actually needs to do,
   so both read as buttons: an icon in the label, and a call-to-action
   that slides up on hover.
   ══════════════════════════════════════════════════════════════════ */
.ccard__k{display:flex;align-items:center;gap:7px}
.ccard__i{width:15px;height:15px;flex:none;color:var(--ink3);transition:color .45s var(--ease)}
.ccard--act:hover .ccard__i{color:var(--ink)}
.ccard--wa:hover .ccard__i{color:#25D366}
.ccard--wa:hover{border-color:rgba(37,211,102,.42)}
.ccard--wa:hover::after{background:linear-gradient(145deg,
  rgba(37,211,102,.55) 0%,rgba(37,211,102,.16) 24%,
  rgba(255,255,255,0) 48%,rgba(255,255,255,0) 74%,rgba(37,211,102,.12) 100%)}
.ccard--wa:hover{box-shadow:0 14px 38px -14px rgba(0,0,0,.6),
                            0 0 34px -14px rgba(37,211,102,.40)}
.ccard__go{display:flex;align-items:center;gap:6px;margin-top:2px;
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink3);
  opacity:0;transform:translateY(6px);
  transition:opacity .45s var(--ease),transform .45s var(--ease),color .45s var(--ease)}
.ccard__go i{font-style:normal;font-size:11px}
.ccard--act:hover .ccard__go{opacity:1;transform:none;color:var(--ink2)}
.ccard--wa:hover .ccard__go{color:#25D366}
/* the CTA line only appears on hover, so reserve its height to stop reflow */
.ccard--act{padding-bottom:calc(clamp(16px,2vw,26px) - 2px)}
@media (hover:none){
  .ccard__go{opacity:1;transform:none}
}