/* Pastel pink palette from "Pastel Pink website color preset" in the References folder.
   Intro uses the blush from Reference 1. Type: Kalam for headings, Manrope for reading text.
   Layout: centred intro, square portfolio cards, left-aligned case studies and reel row, centred contact. */
:root{
  --bg:#fbf0ec;          /* pastel pink page */
  --intro:#f3e6e0;       /* blush, sampled from Reference 1 */
  --tile:#ffffff;
  --sand:#e7cbb3;        /* peach from the preset */
  --bg2:#f2e1db;
  --rose:#ca9488;        /* preset rose: fills and lines */
  --rose-text:#a4675b;   /* deeper rose for text on pink */
  --ink:#45403e;         /* preset charcoal */
  --muted:#7d6e69;
  --line:#ecd4cc;
  --display:"Kalam","Segoe Print","Bradley Hand",cursive; --sans:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  --max:1180px; --gut:clamp(20px,5vw,48px);
  --ease:cubic-bezier(.2,.7,.2,1);
  color-scheme:light;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font:400 16px/1.7 var(--sans);-webkit-font-smoothing:antialiased}
img,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.25;color:var(--rose-text);text-wrap:balance}
h2{font-size:clamp(32px,4.6vw,48px)}
em{font-style:italic}
section{padding:clamp(56px,9vw,104px) max(var(--gut),env(safe-area-inset-left,0px));max-width:var(--max);margin:0 auto;text-align:center}
.eyebrow{font-size:13px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:18px}
:focus-visible{outline:2px solid var(--rose-text);outline-offset:4px;border-radius:6px}

/* INTRO */
.intro{background:var(--intro)}
.top{padding:22px max(var(--gut),env(safe-area-inset-left,0px));max-width:var(--max);margin:0 auto}
.brand{font:400 24px var(--display);letter-spacing:.02em;color:var(--rose-text)}
.hero{padding-top:clamp(24px,5vw,56px)}
.avatar{width:150px;height:150px;border-radius:50%;margin:0 auto 28px;overflow:hidden;box-shadow:0 14px 40px rgba(202,148,136,.35)}
.avatar img{width:100%;height:100%;object-fit:cover}
.hero h1{font-size:clamp(34px,5.8vw,64px);max-width:17ch;line-height:1.22;margin:0 auto 24px}
.hero h1 em{font-style:normal;color:var(--ink)}
.lead{max-width:620px;margin:0 auto;color:var(--muted);font:400 clamp(16px,1.9vw,19px)/1.75 var(--sans)}

/* PORTFOLIO CARDS */
.portfolio{text-align:left}
.portfolio h2{margin-bottom:clamp(24px,4vw,40px)}
.folio-grid{display:grid;grid-template-columns:repeat(2,minmax(0,340px));gap:clamp(18px,3vw,32px);justify-content:start}
.folio{display:block;text-align:left;outline-offset:6px}
.folio-tile{position:relative;aspect-ratio:1;border-radius:20px;background:var(--tile);display:grid;place-items:center;padding:14%;
  box-shadow:0 1px 0 var(--line),0 12px 30px rgba(165,103,91,.10);transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.folio-tile img{width:100%;max-height:100%;object-fit:contain;transition:transform .6s var(--ease)}
.folio-tile .open{position:absolute;right:14px;bottom:14px;width:34px;height:34px;border-radius:50%;background:var(--rose);color:#fff;
  display:grid;place-items:center;font-size:17px;opacity:0;transform:translateY(6px);transition:.35s var(--ease)}
.folio:hover .folio-tile,.folio:focus-visible .folio-tile{transform:translateY(-6px);box-shadow:0 1px 0 var(--line),0 24px 44px rgba(165,103,91,.20)}
.folio:hover .folio-tile img,.folio:focus-visible .folio-tile img{transform:scale(1.05)}
.folio:hover .open,.folio:focus-visible .open{opacity:1;transform:none}
.folio h3{font-size:25px;margin:16px 0 2px}
.folio p{font-size:15px;color:var(--muted)}

/* SELECTED WORK (case studies) */
.work,.reels-sec{text-align:left}
.section-head{margin-bottom:28px}
.section-head p{color:var(--muted);max-width:60ch;margin-top:10px}
.section-head p a{color:var(--rose-text);text-decoration:underline;text-underline-offset:3px}
.filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:36px}
.chip{font:500 14px var(--sans);padding:9px 20px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--muted);cursor:pointer;transition:.25s}
.chip:hover{border-color:var(--rose-text);color:var(--rose-text)}
.chip.active{background:var(--rose-text);border-color:var(--rose-text);color:#fff}
.cases{display:grid;grid-template-columns:repeat(3,1fr);gap:34px 26px}
.case{outline-offset:6px}
.case.hide{display:none}
.case-img{position:relative;aspect-ratio:1;border-radius:16px;overflow:hidden;background:var(--bg2)}
.case-img img{width:100%;height:100%;object-fit:cover}
.case-img.contain{background:#170d45}
.case-img.contain img{object-fit:contain}
.tag{position:absolute;left:12px;top:12px;font-size:12px;font-weight:500;padding:4px 12px;border-radius:999px;background:rgba(251,240,236,.93);color:var(--rose-text)}
.case .client{font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:16px 0 4px}
.case h3{font-size:24px;margin-bottom:4px}
.case .headline{font-size:15px;color:var(--ink)}

/* REELS (scroll row) */
.reels-sec{max-width:none;padding-inline:0}
.reels-sec .section-head{max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}
.reels{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x proximity;--pad:max(var(--gut),calc((100vw - var(--max))/2 + var(--gut)));scroll-padding-inline:var(--pad);padding:6px var(--pad) 24px;scrollbar-width:thin;scrollbar-color:var(--rose) transparent}
.reel{flex:0 0 clamp(190px,22vw,260px);scroll-snap-align:start;cursor:pointer;outline-offset:6px}
.thumb{position:relative;border-radius:18px;overflow:hidden;aspect-ratio:9/16;background:var(--sand);transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.thumb img,.thumb .preview{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.reel:hover .thumb,.reel:focus-visible .thumb{transform:translateY(-6px);box-shadow:0 20px 40px rgba(165,103,91,.24)}
.play{position:absolute;left:50%;top:50%;width:58px;height:58px;margin:-29px 0 0 -29px;border-radius:50%;background:rgba(69,64,62,.38);backdrop-filter:blur(4px);transition:.3s;z-index:2}
.play::after{content:"";position:absolute;left:23px;top:18px;border-left:18px solid #fff;border-top:11px solid transparent;border-bottom:11px solid transparent}
.reel:hover .play{background:var(--rose);transform:scale(1.1)}
.reel.previewing .play{opacity:0}
.reel h3{font-size:21px;margin-top:14px}

/* CONTACT */
.contact{padding-top:clamp(48px,8vw,88px)}
.contact h2{margin-bottom:24px}
.cta{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-width:150px;padding:14px 32px;border-radius:999px;border:1px solid var(--rose-text);color:var(--rose-text);font-weight:500;text-align:center;transition:.3s var(--ease)}
.btn:hover{background:var(--rose-text);color:#fff;transform:translateY(-2px)}
.btn .ico{width:18px;height:18px;flex:none;transition:transform .3s var(--ease)}
.btn:hover .ico{transform:scale(1.12)}
.btn.solid{background:var(--rose-text);color:#fff}
.btn.solid:hover{background:var(--ink);border-color:var(--ink)}
footer{text-align:center;padding:12px 20px 40px;font-size:14px;color:var(--muted)}

/* LIGHTBOX */
.modal{position:fixed;inset:0;z-index:100;background:rgba(69,64,62,.55);backdrop-filter:blur(6px);display:grid;place-items:center;padding:20px;animation:fade .3s}
.modal[hidden]{display:none}
.modal-box{background:var(--bg);border-radius:20px;max-width:960px;width:100%;max-height:92vh;overflow:auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);position:relative;animation:rise .4s var(--ease)}
.m-media{background:var(--bg2);min-height:320px;position:relative;overflow:hidden}
.m-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.m-body{padding:clamp(24px,4vw,44px)}
.m-body h3{font-size:clamp(26px,3.4vw,34px);margin-bottom:6px}
.m-body .meta{color:var(--muted);margin-bottom:8px}
.m-body h4{font:600 12px var(--sans);letter-spacing:.15em;text-transform:uppercase;color:var(--muted);margin:22px 0 8px}
.m-body ul{list-style:none}
.m-body li{padding:7px 0 7px 18px;border-bottom:1px solid var(--line);position:relative;font-size:15px}
.m-body li::before{content:"";position:absolute;left:0;top:16px;width:6px;height:6px;border-radius:50%;background:var(--rose)}
.modal.video .modal-box{max-width:420px;grid-template-columns:1fr;background:#2b2625}
.modal.video.wide .modal-box{max-width:900px}
.modal.video .m-media{background:#000;min-height:0}
.modal.video video{width:100%;max-height:78vh;display:block;margin:0 auto}
.modal.video .m-body{padding:14px 22px 18px}
.modal.video .m-body h3{font-size:22px;margin:0;color:#f6dcd4}
.close{position:absolute;top:10px;right:14px;z-index:5;width:40px;height:40px;border:0;border-radius:50%;background:rgba(251,240,236,.93);font-size:26px;line-height:1;color:var(--rose-text);cursor:pointer}
@keyframes fade{from{opacity:0}}
@keyframes rise{from{opacity:0;transform:translateY(24px) scale(.98)}}

/* CURSOR ORB. A soft light that trails the pointer in the same rose-to-peach hue as the card glow, and swells over anything clickable. */
.cursor-orb{--oh:calc(350 + (var(--xp) * 36));position:fixed;left:0;top:0;z-index:300;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;
  border:1.5px solid hsl(var(--oh) 66% 64% / .85);background:radial-gradient(circle,hsl(var(--oh) 72% 70% / .30),transparent 70%);
  pointer-events:none;opacity:0;will-change:transform;
  transition:width .4s var(--ease),height .4s var(--ease),margin .4s var(--ease),border-color .4s,opacity .35s}
.cursor-orb.on{opacity:1}
.cursor-orb.hot{width:68px;height:68px;margin:-34px 0 0 -34px;border-color:hsl(var(--oh) 60% 56% / .9)}
.cursor-orb.down{width:24px;height:24px;margin:-12px 0 0 -12px}

/* SPOTLIGHT GLOW. Ported from the supplied spotlight-card component: the pointer position (written to :root by script.js)
   lights a soft spot and a thin edge glow on cards near the cursor. Hue drifts from rose to peach (350 to 26) across the screen. */
:root{--x:-999;--y:-999;--xp:0}
.glow-on .folio-tile,.glow-on .case-img,.glow-on .thumb{
  --hue:calc(350 + (var(--xp) * 36));
  --bw:2px;
  background-image:radial-gradient(240px 240px at calc(var(--x) * 1px) calc(var(--y) * 1px),hsl(var(--hue) 70% 68% / .16),transparent);
  background-attachment:fixed}
.glow-on .folio-tile::before,.glow-on .case-img::before,.glow-on .thumb::before,
.glow-on .folio-tile::after{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:var(--bw);pointer-events:none;z-index:3;
  background:radial-gradient(170px 170px at calc(var(--x) * 1px) calc(var(--y) * 1px),hsl(var(--hue) 66% 62%),transparent 100%);
  background-attachment:fixed;
  -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 exclude,linear-gradient(#000 0 0)}
.glow-on .folio-tile::after{inset:-6px;padding:6px;border-radius:26px;z-index:0;filter:blur(9px);opacity:.6;
  background:radial-gradient(190px 190px at calc(var(--x) * 1px) calc(var(--y) * 1px),hsl(var(--hue) 72% 70%),transparent 100%);background-attachment:fixed}

/* SCROLL REVEAL (content is visible by default; script adds .js, then .in) */
.js .reveal{opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:var(--d,0s)}
.js .reveal.in{opacity:1;transform:none}

/* RESPONSIVE */
@media (max-width:960px){
  .cases{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:720px){
  .modal-box{grid-template-columns:1fr}
  .m-media{min-height:0;aspect-ratio:16/10}
  .modal.video .m-media{aspect-ratio:auto}
}
@media (max-width:560px){
  .cases{grid-template-columns:1fr}
  .folio-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .folio h3{font-size:20px}
  .folio p{font-size:13px}
  .avatar{width:120px;height:120px}
  .btn{min-width:120px;padding:14px 26px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
  .js .reveal{opacity:1;transform:none}
  .glow-on .folio-tile,.glow-on .case-img,.glow-on .thumb{background-image:none}
  .glow-on .folio-tile::before,.glow-on .case-img::before,.glow-on .thumb::before,.glow-on .folio-tile::after{display:none}
  .cursor-orb{display:none}
}