/* ===== PORTFOLIO — one long page, distinct animation per discipline ===== */

/* ---------- HERO: full-screen from load, sticky scroll phase for zoom + title-split animation ---------- */
/* Hero is 220vh tall so there's scroll distance for the animation before next section appears */
.hero{position:relative;height:100vh;background:var(--cream);}
.hero-sticky{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;align-items:center;justify-content:center;}
.hero-media{
  position:absolute;inset:0;
  width:100%;height:100%;border-radius:0;overflow:hidden;
  will-change:transform;
}
.hero-media image-slot{display:block;width:100%;height:100%;}
.hero-dim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,14,40,.08) 0%,rgba(8,14,40,.45) 55%,rgba(8,14,40,.7) 100%);opacity:1;pointer-events:none;}
.hero-titles{position:absolute;z-index:8;width:100%;top:50%;transform:translateY(-50%);display:flex;justify-content:center;gap:.22em;
  color:#fff;pointer-events:none;text-shadow:0 6px 40px rgba(0,0,0,.35);}
.hero-titles h1{font-size:clamp(54px,12.5vw,210px);font-weight:600;margin:0;will-change:transform;}
.t-left{transform:translateX(0);} .t-right{transform:translateX(0);}
.hero-doodles{position:absolute;inset:0;z-index:9;pointer-events:none;}
.hero-doodles .doodle{width:clamp(70px,9vw,120px);height:auto;}
.dd-name{position:absolute;left:50%;transform:translateX(-50%);bottom:30%;width:min(40vw,460px);height:auto;}
.hero-foot{position:absolute;left:0;right:0;bottom:5vh;z-index:8;display:flex;flex-direction:column;align-items:center;
  text-align:center;color:#fff;padding:0 24px;opacity:1;transform:translateY(0);}
.hero-eyebrow{font-size:clamp(11px,1.1vw,14px);letter-spacing:.34em;text-transform:uppercase;color:rgba(255,255,255,.85);margin:0 0 14px;font-weight:500;}
.hero-tag{max-width:34ch;font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(20px,2.4vw,32px);line-height:1.25;color:#fff;margin:0 0 26px;}
.scroll-cue{display:flex;flex-direction:column;align-items:center;gap:10px;font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.8);}
.scroll-cue svg{width:24px;height:40px;}

.port-head{padding:clamp(120px,16vw,190px) 0 clamp(40px,6vw,70px);}
.port-title{font-size:clamp(64px,15vw,210px);margin:.12em 0 0;line-height:.86;}
.port-sub{font-family:var(--serif);font-style:italic;font-size:clamp(20px,2.6vw,34px);color:var(--brown);margin:18px 0 0;max-width:24ch;}
.hairline{height:1px;background:rgba(36,31,26,.22);margin-top:clamp(30px,4vw,48px);transform-origin:left;transform:scaleX(0);transition:transform 1.1s var(--ease);}
.hairline.inview{transform:scaleX(1);}
.port-scroll{font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--brown);margin:22px 0 0;}

/* category section shell */
.cat{padding:clamp(64px,9vw,110px) 0;}
.cat.alt{background:var(--cream-deep);}
.cat.dark{background:var(--ink);color:var(--cream);}
.cat-head{display:flex;gap:clamp(18px,4vw,56px);align-items:flex-start;margin-bottom:clamp(34px,5vw,60px);}
.cat-num{font-family:var(--serif);font-style:italic;font-size:clamp(18px,2vw,30px);color:var(--terra);flex:none;padding-top:.35em;}
.cat-head h2{font-size:clamp(32px,6vw,84px);line-height:.96;}
.cat-desc{color:var(--ink-soft);font-size:clamp(16px,1.7vw,21px);max-width:52ch;margin:14px 0 0;}
.cat.dark .cat-desc{color:rgba(247,243,236,.72);}

/* 01 — logofolio + clientele marquees */
.logo-rows{display:flex;flex-direction:column;gap:16px;margin-bottom:clamp(36px,5vw,60px);}
.logo-marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);}
.logo-track{display:flex;gap:20px;width:max-content;animation:logoScroll 48s linear infinite;}
.logo-marquee.rev .logo-track{animation-direction:reverse;animation-duration:56s;}
.logo-marquee:hover .logo-track{animation-play-state:paused;}
@keyframes logoScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.logo-cell{width:188px;height:112px;border:1px solid rgba(36,31,26,.12);border-radius:14px;background:var(--cream);
  display:flex;align-items:center;justify-content:center;flex:none;padding:24px;}
.logo-cell img{height:52px;width:auto;max-width:140px;object-fit:contain;mix-blend-mode:multiply;
  filter:grayscale(1);opacity:.55;transition:filter .4s,opacity .4s;}
.logo-cell:hover img{filter:none;opacity:1;}
.lf-band{position:relative;}
.lf-label{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--terra);margin:0 0 18px;text-align:center;}
.lf-track{display:flex;gap:18px;width:max-content;animation:logoScroll 60s linear infinite;}
.lf-marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);}
.lf-marquee:hover .lf-track{animation-play-state:paused;}
.lf-cell{width:150px;height:150px;border-radius:16px;overflow:hidden;flex:none;background:var(--cream);
  box-shadow:0 18px 40px -30px rgba(36,31,26,.5);border:1px solid rgba(36,31,26,.08);}
.lf-cell img{width:100%;height:100%;object-fit:cover;}

/* generic editorial masonry (branding / photography) */
.masonry{columns:3;column-gap:18px;}
.masonry .m-item{break-inside:avoid;margin:0 0 18px;border-radius:14px;overflow:hidden;position:relative;
  background:var(--sand);box-shadow:0 26px 50px -38px rgba(36,31,26,.5);
  opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease);}
.masonry .m-item.in{opacity:1;transform:none;}
.masonry .m-item img{width:100%;display:block;transition:transform .8s var(--ease);}
.masonry .m-item:hover img{transform:scale(1.04);}
.m-cap{position:absolute;left:0;right:0;bottom:0;padding:46px 16px 14px;color:#fff;
  background:linear-gradient(transparent,rgba(20,16,12,.7));transform:translateY(10px);opacity:0;transition:.45s var(--ease);}
.masonry .m-item:hover .m-cap{transform:none;opacity:1;}
.m-cap .t{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--sand);}
.m-cap h4{font-family:var(--serif);font-weight:500;font-size:19px;margin:2px 0 0;}
@media(max-width:900px){.masonry{columns:2;}}
@media(max-width:560px){.masonry{columns:1;}}

/* 04 — photography uniform 6-grid */
.photo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
.pg-item{position:relative;aspect-ratio:3/4;border-radius:14px;overflow:hidden;background:var(--sand);
  box-shadow:0 26px 50px -38px rgba(36,31,26,.5);opacity:0;transform:translateY(28px);
  transition:opacity .8s var(--ease),transform .8s var(--ease);}
.pg-item.in{opacity:1;transform:none;}
.pg-item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s var(--ease);}
.pg-item:hover img{transform:scale(1.05);}
@media(max-width:760px){.photo-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:460px){.photo-grid{grid-template-columns:1fr;}}

/* 03 SMM mosaic */
.smm-mosaic{display:grid;grid-template-columns:repeat(8,1fr);gap:8px;}
.smm-tile{position:relative;aspect-ratio:1;border-radius:9px;overflow:hidden;background:var(--sand);
  box-shadow:0 14px 30px -24px rgba(36,31,26,.5);opacity:0;transform:scale(.7);
  transition:transform .55s var(--ease),opacity .55s var(--ease),box-shadow .35s;will-change:transform,opacity;}
.smm-tile.in{opacity:1;transform:scale(1);}
.smm-tile img,.smm-tile image-slot{display:block;width:100%;height:100%;object-fit:cover;}
.smm-mosaic:hover .smm-tile.in{opacity:.45;}
.smm-tile.in:hover{opacity:1!important;transform:scale(1.26) rotate(var(--r,0deg));z-index:6;
  box-shadow:0 30px 60px -20px rgba(36,31,26,.55);}
@media(max-width:900px){.smm-mosaic{grid-template-columns:repeat(6,1fr);}}
@media(max-width:560px){.smm-mosaic{grid-template-columns:repeat(4,1fr);}}

/* 05 — websites coverflow */
.coverflow{position:relative;height:clamp(400px,54vw,620px);perspective:1700px;}
.cf-track{position:absolute;inset:0;transform-style:preserve-3d;}
.cf-card{position:absolute;left:50%;top:50%;width:clamp(240px,30vw,400px);height:clamp(360px,46vw,580px);
  margin-left:calc(clamp(240px,30vw,400px)/-2);margin-top:calc(clamp(360px,46vw,580px)/-2);
  border-radius:16px;overflow:hidden;background:var(--sand);box-shadow:0 40px 80px -40px rgba(36,31,26,.55);
  transition:transform .6s var(--ease),filter .6s var(--ease),opacity .6s;will-change:transform;}
.cf-card img,.cf-card image-slot{display:block;width:100%;height:100%;object-fit:cover;object-position:top;}
.cf-cap{position:absolute;left:0;right:0;bottom:0;padding:40px 18px 14px;color:#fff;
  background:linear-gradient(transparent,rgba(20,16,12,.72));display:flex;align-items:flex-end;justify-content:space-between;gap:10px;}
.cf-cap h4{font-family:var(--serif);font-weight:500;font-size:20px;margin:0;}
.cf-tag{font-size:10px;letter-spacing:.18em;text-transform:uppercase;background:var(--terra);padding:5px 10px;border-radius:999px;align-self:center;}
.cf-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:20;width:54px;height:54px;border-radius:999px;
  border:1.5px solid var(--ink);background:var(--cream);color:var(--ink);font-size:20px;cursor:pointer;
  transition:background .3s,color .3s;display:flex;align-items:center;justify-content:center;}
.cf-arrow:hover{background:var(--ink);color:var(--cream);}
.cf-prev{left:clamp(8px,4vw,40px);} .cf-next{right:clamp(8px,4vw,40px);}

/* 06 — reels: hover-play / click-stop */
.reels{display:flex;gap:clamp(20px,3vw,44px);justify-content:center;flex-wrap:wrap;}
.reel-card{position:relative;width:clamp(260px,30vw,360px);aspect-ratio:9/16;border-radius:20px;overflow:hidden;
  background:var(--sand);box-shadow:0 40px 80px -44px rgba(36,31,26,.6);cursor:pointer;
  transition:transform .4s var(--ease),box-shadow .4s;}
.reel-card:hover{transform:translateY(-6px);box-shadow:0 50px 90px -40px rgba(36,31,26,.7);}
.reel-card video{width:100%;height:100%;object-fit:cover;display:block;}

/* 06 — revolving reel coverflow (one screen, videos revolve) */
.reel-flow{position:relative;height:clamp(440px,62vw,680px);perspective:1700px;margin-top:10px;}
.rf-track{position:absolute;inset:0;transform-style:preserve-3d;}
.rf-card{position:absolute;left:50%;top:50%;width:clamp(240px,26vw,360px);aspect-ratio:9/16;
  margin-left:calc(clamp(240px,26vw,360px)/-2);margin-top:calc(clamp(240px,26vw,360px)*16/9/-2);
  border-radius:22px;overflow:hidden;background:var(--ink);box-shadow:0 44px 90px -44px rgba(36,31,26,.65);
  transition:transform .6s var(--ease),filter .6s var(--ease),opacity .6s;will-change:transform;}
.rf-card video{width:100%;height:100%;object-fit:cover;display:block;}
.rf-mute{position:absolute;top:12px;right:12px;z-index:4;font-size:16px;opacity:0;transition:opacity .3s;
  background:rgba(20,16,12,.55);width:34px;height:34px;border-radius:999px;display:flex;align-items:center;justify-content:center;}
.rf-card.is-center .rf-mute{opacity:1;}
.rf-empty{display:flex;align-items:center;justify-content:center;border:2px dashed rgba(247,243,236,.35);}
.rf-ph{font-family:var(--serif);font-size:clamp(16px,1.6vw,21px);line-height:1.3;text-align:center;color:rgba(247,243,236,.7);}
.rf-ph span{display:block;font-size:34px;margin-bottom:8px;opacity:.6;}
.rf-prev{left:clamp(8px,4vw,40px);} .rf-next{right:clamp(8px,4vw,40px);}
.rf-hint{position:absolute;left:0;right:0;bottom:-2px;text-align:center;font-size:12px;letter-spacing:.04em;color:var(--brown);}

/* 07 — strategy story-scroll stack */
.strategy-flow{padding-bottom:0;}
.story{position:relative;}
.story-page{position:sticky;top:0;height:100vh;overflow:hidden;}
.sp-inner{height:100%;width:100%;transform-origin:bottom left;will-change:transform;
  display:flex;flex-direction:column;justify-content:space-between;padding:clamp(26px,5vw,68px) clamp(22px,5vw,72px);}
.sp-cream{background:var(--cream);color:var(--ink);}
.sp-ink{background:var(--ink);color:var(--cream);}
.sp-sand{background:var(--cream-deep);color:var(--ink);}
.sp-terra{background:var(--terra);color:#fff;}
.sp-eyebrow{font-size:clamp(11px,1.2vw,14px);letter-spacing:.24em;text-transform:uppercase;font-weight:700;margin:0;}
.sp-rule{border:none;border-top:1px solid currentColor;opacity:.34;margin:clamp(8px,1.4vw,16px) 0;width:100%;}
.sp-title{font-size:clamp(34px,7vw,104px);line-height:.86;letter-spacing:-.02em;margin:0;font-weight:600;}
.sp-body{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,4vw,56px);align-items:start;margin-top:clamp(14px,2vw,26px);}
.sp-lead{font-size:clamp(16px,1.7vw,21px);line-height:1.5;margin:0 0 18px;opacity:.95;max-width:48ch;}
.sp-points{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;}
.sp-points li{display:flex;gap:12px;font-size:clamp(14px,1.4vw,17px);line-height:1.4;}
.sp-points li::before{content:"";flex:none;width:7px;height:7px;border-radius:999px;background:currentColor;margin-top:.55em;opacity:.55;}
.sp-metrics{display:flex;gap:clamp(20px,3vw,46px);flex-wrap:wrap;}
.sp-metric .mv{font-family:var(--serif);font-weight:600;font-size:clamp(30px,4vw,56px);line-height:1;display:block;}
.sp-metric .ml{font-size:12px;letter-spacing:.06em;opacity:.8;margin-top:6px;display:block;max-width:18ch;}
.sp-foot{display:flex;justify-content:space-between;font-size:12px;letter-spacing:.2em;text-transform:uppercase;opacity:.7;}
@media(max-width:760px){.sp-body{grid-template-columns:1fr;gap:16px;}.sp-points{gap:8px;}}

/* 08 — AI apps container scroll + screens */
.built{position:relative;height:130vh;}
.built-sticky{position:sticky;top:0;height:100vh;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:0 20px;}
.browser{width:min(1000px,90vw);aspect-ratio:16/10;border-radius:14px;background:var(--warm-brown,#7A5C43);
  box-shadow:0 60px 110px -50px rgba(36,31,26,.7);overflow:hidden;will-change:transform;transform-style:preserve-3d;}
.browser-bar{display:flex;align-items:center;gap:7px;padding:12px 16px;background:rgba(0,0,0,.22);}
.bdot{width:11px;height:11px;border-radius:999px;background:rgba(255,255,255,.5);}
.burl{margin-left:14px;font-size:12px;color:rgba(255,255,255,.8);background:rgba(255,255,255,.14);padding:3px 14px;border-radius:6px;}
.browser-screen{width:100%;height:calc(100% - 39px);background:var(--cream);}
.browser-screen img,.browser-screen image-slot{display:block;width:100%;height:100%;object-fit:cover;object-position:top;}
.browser.sm{width:100%;aspect-ratio:16/10;box-shadow:0 40px 80px -46px rgba(36,31,26,.6);}

/* Kurly Katch description + aside */
.kk-desc{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,4vw,60px);align-items:start;margin-top:clamp(36px,5vw,64px);}
.kk-text .site-tag{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--terra);}
.kk-text h3{font-weight:500;font-size:clamp(30px,4vw,56px);margin:8px 0 16px;line-height:1;}
.kk-text p{color:var(--ink-soft);font-size:clamp(16px,1.6vw,19px);line-height:1.6;margin:0 0 20px;max-width:52ch;}
.kk-points{list-style:none;margin:0;padding:0;display:grid;gap:11px;}
.kk-points li{display:flex;gap:12px;font-size:16px;color:var(--ink);line-height:1.4;}
.kk-points li::before{content:"";flex:none;width:7px;height:7px;border-radius:999px;background:var(--terra);margin-top:.5em;}
.kk-aside{position:sticky;top:90px;}
@media(max-width:820px){.kk-desc{grid-template-columns:1fr;}.kk-aside{position:static;}}

/* big landscape screens gallery */
.screens-strip{margin-top:clamp(50px,7vw,84px);}
.ss-label{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--terra);text-align:center;margin:0 0 26px;}
.ss-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(18px,2.4vw,32px);}
.ss-item{border-radius:14px;overflow:hidden;background:var(--ink);border:1px solid rgba(36,31,26,.12);
  box-shadow:0 34px 64px -42px rgba(36,31,26,.55);opacity:0;transform:translateY(30px);
  transition:opacity .8s var(--ease),transform .8s var(--ease);}
.ss-item.in{opacity:1;transform:none;}
.ss-item img{width:100%;display:block;aspect-ratio:16/9;object-fit:cover;object-position:top;transition:transform .8s var(--ease);}
.ss-item:hover img{transform:scale(1.03);}
.ss-item figcaption{padding:13px 18px;font-size:13px;letter-spacing:.04em;color:var(--cream);background:var(--ink);}
@media(max-width:680px){.ss-grid{grid-template-columns:1fr;}}

/* AI stack marquee */
.kk-stack{margin-top:clamp(50px,7vw,84px);}
.stack-rows{display:flex;flex-direction:column;gap:14px;}
.stack-marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);}
.stack-track{display:flex;gap:14px;width:max-content;animation:logoScroll 44s linear infinite;}
.stack-marquee.rev .stack-track{animation-direction:reverse;animation-duration:52s;}
.stack-marquee:hover .stack-track{animation-play-state:paused;}
.stack-chip{flex:none;font-family:var(--sans);font-size:15px;font-weight:500;color:var(--ink);
  padding:12px 22px;border:1px solid rgba(36,31,26,.16);border-radius:999px;background:var(--cream);
  white-space:nowrap;transition:background .3s,color .3s,border-color .3s;}
.stack-chip:hover{background:var(--terra);color:#fff;border-color:var(--terra);}

/* closing */
.port-cta{padding:clamp(70px,11vw,150px) 0;text-align:center;}
.port-cta h2{font-size:clamp(44px,9vw,120px);}
.port-cta .btn{margin-top:30px;}
.mb-fill{font-family:monospace;font-size:12.5px;letter-spacing:.03em;color:var(--terra);opacity:.85;}

@media(max-width:820px){
  .built{height:120vh;}
  .film{height:240vh;}
}

/* ---------- 05 · live-site visit buttons ---------- */
.site-visit{margin-top:clamp(34px,5vw,58px);}
.sv-label{font-size:13px;letter-spacing:.04em;color:var(--brown);margin:0 0 18px;font-weight:500;text-transform:uppercase;}
.site-btns{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.site-btn{display:flex;flex-direction:column;gap:7px;padding:17px 20px;border-radius:13px;
  background:var(--cream-deep);border:1px solid rgba(36,31,26,.12);text-decoration:none;
  transition:transform .3s var(--ease),box-shadow .3s,border-color .3s;}
.site-btn:hover{transform:translateY(-3px);border-color:var(--terra);box-shadow:0 18px 38px -22px rgba(36,31,26,.5);}
.sb-name{font-family:var(--serif);font-size:clamp(18px,1.7vw,22px);color:var(--ink);font-weight:500;}
.sb-go{font-size:12px;letter-spacing:.02em;color:var(--brown);display:flex;align-items:center;gap:6px;}
.site-btn:hover .sb-go{color:var(--terra);}
.sb-go i{font-style:normal;transition:transform .3s var(--ease);}
.site-btn:hover .sb-go i{transform:translate(2px,-2px);}
@media(max-width:760px){.site-btns{grid-template-columns:repeat(2,1fr);}}
@media(max-width:460px){.site-btns{grid-template-columns:1fr;}}

/* ============================================================
   PORTFOLIO PAGE — MOBILE OPTIMISATION  (comprehensive rewrite)
   ============================================================ */

/* HERO */
@media(max-width:820px){
  .hero{height:100vh;}
  .hero-titles h1{font-size:clamp(44px,14vw,100px);}
  .dd-name{width:min(60vw,280px);}
}
@media(max-width:480px){
  .hero{height:100vh;}
  .hero-titles h1{font-size:clamp(38px,13vw,80px);}
}

/* PORTFOLIO PAGE HEADER */
@media(max-width:820px){
  .port-title{font-size:clamp(52px,16vw,140px);}
  .port-head{padding:clamp(90px,14vw,140px) 0 clamp(24px,4vw,44px);}
  .port-sub{font-size:clamp(17px,4.5vw,26px);}
}
@media(max-width:480px){
  .port-title{font-size:clamp(44px,14vw,100px);}
}

/* CATEGORY SECTION */
@media(max-width:820px){
  .cat{padding:clamp(44px,8vw,80px) 0;}
  .cat-head{flex-direction:column;gap:6px;}
  .cat-num{padding-top:0;}
  .cat-head h2{font-size:clamp(28px,9vw,60px);}
  .cat-desc{font-size:clamp(15px,4vw,19px);}
}

/* LOGOFOLIO */
@media(max-width:480px){
  .logo-cell{width:130px;height:80px;padding:14px;}
  .logo-cell img{height:36px;}
  .lf-cell{width:100px;height:100px;}
}

/* WEBSITES COVERFLOW */
@media(max-width:820px){
  .coverflow{height:clamp(340px,88vw,500px);overflow:hidden;}
  .cf-card{
    width:clamp(200px,66vw,320px);
    height:clamp(300px,88vw,460px);
    margin-left:calc(clamp(200px,66vw,320px)/-2);
    margin-top:calc(clamp(300px,88vw,460px)/-2);
  }
  .cf-arrow{width:40px;height:40px;font-size:16px;}
  .cf-prev{left:6px;} .cf-next{right:6px;}
}

/* REEL FLOW */
@media(max-width:820px){
  .reel-flow{height:clamp(360px,96vw,500px);overflow:hidden;}
  .rf-card{
    width:clamp(170px,46vw,250px);
    margin-left:calc(clamp(170px,46vw,250px)/-2);
    margin-top:calc(clamp(170px,46vw,250px)*16/9/-2);
  }
  .rf-prev{left:6px;} .rf-next{right:6px;}
}

/* STORY-SCROLL STACK */
@media(max-width:820px){
  .story-page{height:auto;min-height:100vh;position:relative;top:auto;}
  .sp-inner{padding:80px 24px 28px;}
  .sp-title{font-size:clamp(26px,9vw,56px);}
  .sp-body{grid-template-columns:1fr;gap:14px;}
  .sp-lead{font-size:clamp(15px,4vw,18px);}
}

/* BROWSER / BUILT SECTION */
@media(max-width:820px){
  .built{height:120vh;}
  .browser{width:calc(100vw - 40px);}
}

/* KK DESC */
@media(max-width:820px){
  .kk-desc{grid-template-columns:1fr;}
  .kk-aside{position:static;}
  .kk-text h3{font-size:clamp(22px,7vw,40px);}
  .kk-text p{font-size:clamp(15px,4vw,18px);}
}

/* SMM MOSAIC */
@media(max-width:640px){
  .smm-mosaic{grid-template-columns:repeat(4,1fr);gap:5px;}
  .smm-tile.in:hover{transform:scale(1.1) rotate(var(--r,0deg));}
}
@media(max-width:480px){
  .smm-mosaic{grid-template-columns:repeat(3,1fr);gap:4px;}
}

/* REELS GRID */
@media(max-width:640px){
  .reels{gap:14px;flex-wrap:wrap;justify-content:center;}
  .reel-card{width:clamp(180px,66vw,260px);}
}

/* PORT CTA */
@media(max-width:640px){
  .port-cta h2{font-size:clamp(36px,11vw,80px);}
}