/* ============================================================================
   CONTENTS

   GLOBAL          Tokens · Custom cursor · Paper wallpaper · Scroll progress
   HERO            Stage · Wildlife · Scroll cue · Top bar · Status card ·
                   Headline · Sticky tags · Eyes · Tagline · Dock · Case stack
   ABOUT           Grid paper board
   PROJECTS        Cards over the hills · Flight path · Flowers
   SERVICES        Rows · Accordion mechanics
   RECOGNITION     Cards
   FAQs            Scattered pills
   FOOTER          Closing CTA · Saucer and beam · Marquee
   MODALS          Contact window · Case study window
   LAST            Hover-only rules · Responsive · Portrait · Reduced motion

   Every width override sits in RESPONSIVE near the bottom, widest first.
   Nothing overrides a breakpoint from further up the file.
   ============================================================================ */

/* ============================================================
   TOKENS
   ============================================================ */
:root{
  --glass:rgba(255,255,255,.22);
  --glass-line:rgba(255,255,255,.45);
  --shadow-soft:0 18px 40px -18px rgba(12,30,20,.45);
  --shadow-tag:0 10px 22px -10px rgba(12,30,20,.55);
  --pad:clamp(18px,3.2vw,44px);
  --font:"Inter Tight","Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ============================================================
   CUSTOM CURSOR — magnetic + morphing
   ============================================================ */
html.has-cursor,
html.has-cursor *{cursor:none !important}
html.has-cursor input,
html.has-cursor textarea{cursor:text !important}

.cursor-dot,
.cursor-ring{
  position:fixed;
  top:0;left:0;
  z-index:200;
  pointer-events:none;
  mix-blend-mode:difference;
  opacity:0;
  will-change:transform;
  transition:opacity .25s ease;
}
html.cur-ready .cursor-dot,
html.cur-ready .cursor-ring{opacity:1}
html.cur-off .cursor-dot,
html.cur-off .cursor-ring{opacity:0}

.cursor-dot{
  width:6px;height:6px;
  margin:-3px 0 0 -3px;
  border-radius:50%;
  background:#fff;
  transition:opacity .2s ease;
}
.cursor-dot.hidden{opacity:0}

.cursor-ring{
  display:grid;
  place-items:center;
  border:1.6px solid #fff;
  border-radius:999px;
  transition:border-radius .3s cubic-bezier(.2,.8,.3,1),
             background .3s ease,
             opacity .25s ease;
}
.cursor-ring.morphed{background:rgba(255,255,255,.16)}
.cursor-ring.press{background:rgba(255,255,255,.34)}

.cursor-ring .lbl{
  font-family:var(--font);
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:#fff;
  white-space:nowrap;
  opacity:0;
  transform:translateY(4px);
  transition:opacity .22s ease, transform .22s ease;
}
.cursor-ring.labelled .lbl{opacity:1;transform:none}

/* elastic return when the pointer leaves a magnetic target */
.chat-btn,.pin-cta,.submit,.app,.socials a,.wordmark,.foot-bar .mark{
  transition-property:transform, background, box-shadow, color, opacity, translate;
  transition-duration:.3s;
  transition-timing-function:cubic-bezier(.2,.8,.3,1);
}

.ripple{
  position:fixed;
  z-index:199;
  width:20px;height:20px;
  margin:-10px 0 0 -10px;
  border:1.6px solid #fff;
  border-radius:50%;
  pointer-events:none;
  mix-blend-mode:difference;
  animation:ripple .6s cubic-bezier(.2,.7,.3,1) forwards;
}
@keyframes ripple{
  from{transform:scale(.35);opacity:.95}
  to{transform:scale(4.8);opacity:0}
}

/* ============================================================
   PAPER WALLPAPER — one fixed grid behind the whole page
   ------------------------------------------------------------
   Pinned to the viewport, so the squares never move: only the
   words and pictures travel over them. Sections that have their
   own picture (the hero, the projects hills, the footer) are
   opaque and simply cover this up as they scroll past.
   A fixed element is used rather than background-attachment:fixed,
   which iOS Safari does not honour and which repaints on scroll.
   ============================================================ */
.paper-bg{
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  --line:rgba(120,168,205,.28);
  --grid:64px;
  background-color:#f6f3ea;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:var(--grid) var(--grid);
}
/* softens the grid towards the edges of the screen */
.paper-bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(120% 90% at 50% 45%, rgba(246,243,234,0) 45%, rgba(246,243,234,.85) 100%);
}

/* ============================================================
   SCROLL PROGRESS BAR
   ============================================================ */
.progress{
  position:fixed;
  top:0;left:0;
  z-index:90;
  width:100%;height:3px;
  transform:scaleX(0);
  transform-origin:0 50%;
  background:linear-gradient(90deg,#c6f042,#63d45f 55%,#2c9bf0);
  pointer-events:none;
  will-change:transform;
}
body{
  margin:0;
  font-family:var(--font);
  background:#0d1a24;
  color:#fff;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* ============================================================
   STAGE
   ============================================================ */
.stage{
  position:relative;
  min-height:100svh;
  width:100%;
  overflow:hidden;
  isolation:isolate;

  /* daylight palette — JS lerps these toward sunset as you scroll */
  --sky-top:#4a91cb;  --sky-mid:#7cb8df;  --sky-low:#b3d9ee;
  --hill-a:#5f8a2a;   --hill-b:#79a02c;   --hill-c:#4d6f22;
  --bright-a:#c3c93c; --bright-b:#a8bd33; --bright-c:#6f9227;
  --sun-core:#fffadc; --sun-glow:#ffeba5;
  --cloud:#fdfdfd;
  --fleece:#f4f1e8;   --beast:#3a2e26;
  --sun-o:.45;
  --veil:.22;
}

.scenery,
.grain{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:-2;
  display:block;
}
.grain{
  z-index:-1;
  opacity:.16;
  mix-blend-mode:overlay;
  pointer-events:none;
}

/* extra headroom so the hero scenery can drift on scroll without gapping */
.stage .scenery{
  top:-15%;
  height:130%;
  will-change:transform;
}

/* ============================================================
   WILDLIFE — birds crossing the sky, sheep and a dog on the ridge
   ============================================================ */
.flock{will-change:transform}
.flock-1{animation:fly1 38s linear infinite}
.flock-2{animation:fly2 27s linear infinite;animation-delay:-11s}

@keyframes fly1{
  0%{transform:translate(-300px,16px)}
  50%{transform:translate(960px,-22px)}
  100%{transform:translate(2240px,12px)}
}
@keyframes fly2{
  0%{transform:translate(-260px,-14px)}
  50%{transform:translate(980px,24px)}
  100%{transform:translate(2240px,-10px)}
}

.bird{
  fill:none;
  stroke:#2b3a46;
  stroke-width:2.2;
  stroke-linecap:round;
  opacity:.78;
  transform-box:fill-box;
  transform-origin:center;
  animation:flap .62s ease-in-out infinite;
}
.bird.f2{animation-duration:.51s;animation-delay:-.21s}
.bird.f3{animation-duration:.73s;animation-delay:-.36s}
@keyframes flap{
  0%,100%{transform:scaleY(1)}
  50%{transform:scaleY(.3)}
}

/* The drift down the slope. The ridge is nearly flat on the far left
   and steepest around the middle, so one shared path would leave some
   animals floating in the sky and bury others. Seven zones, each
   matching the real gradient of the hill where that animal stands. */
.walk{will-change:transform,opacity}
.z1,.z2,.z3,.z4,.z5,.z6,.z7{animation-duration:58s;animation-timing-function:linear;animation-iteration-count:infinite}
.z1{animation-name:descend1}
.z2{animation-name:descend2}
.z3{animation-name:descend3}
.z4{animation-name:descend4}
.z5{animation-name:descend5}
.z6{animation-name:descend6}
.z7{animation-name:descend7}

/* seven gradients covering the hill: 0.05 flat on the far left,
   0.39 at the steepest point in the middle, easing back to 0.26 */
@keyframes descend1{
  0%{transform:translate(0,0);opacity:0} 5%{opacity:1}
  50%{transform:translate(90px,4px)}
  93%{opacity:1} 100%{transform:translate(180px,9px);opacity:0}
}
@keyframes descend2{
  0%{transform:translate(0,0);opacity:0} 5%{opacity:1}
  50%{transform:translate(90px,11px)}
  93%{opacity:1} 100%{transform:translate(180px,23px);opacity:0}
}
@keyframes descend3{
  0%{transform:translate(0,0);opacity:0} 5%{opacity:1}
  50%{transform:translate(90px,17px)}
  93%{opacity:1} 100%{transform:translate(180px,36px);opacity:0}
}
@keyframes descend4{
  0%{transform:translate(0,0);opacity:0} 5%{opacity:1}
  50%{transform:translate(90px,22px)}
  93%{opacity:1} 100%{transform:translate(180px,47px);opacity:0}
}
@keyframes descend5{
  0%{transform:translate(0,0);opacity:0} 5%{opacity:1}
  50%{transform:translate(90px,27px)}
  93%{opacity:1} 100%{transform:translate(180px,56px);opacity:0}
}
@keyframes descend6{
  0%{transform:translate(0,0);opacity:0} 5%{opacity:1}
  50%{transform:translate(90px,30px)}
  93%{opacity:1} 100%{transform:translate(180px,63px);opacity:0}
}
@keyframes descend7{
  0%{transform:translate(0,0);opacity:0} 5%{opacity:1}
  50%{transform:translate(90px,34px)}
  93%{opacity:1} 100%{transform:translate(180px,70px);opacity:0}
}

/* Walk cycle. Pure translate — no rotation, so there is no
   transform-origin to get wrong on a zero-width vertical stroke.
   The hips sit under the body, so only the swing below shows. */
.leg{
  fill:none;
  stroke:var(--beast);
  stroke-width:2.2;
  stroke-linecap:round;
  animation:step var(--gait,1.5s) ease-in-out infinite;
}
.leg.far{opacity:.62}
.leg.b{animation-delay:calc(var(--gait,1.5s) * -0.5)}

@keyframes step{
  0%  {transform:translate(2.4px,0)}    /* planted, forward */
  55% {transform:translate(-2.4px,0)}   /* slid back under the body */
  72% {transform:translate(-.6px,-2.2px)} /* lifted, swinging through */
  100%{transform:translate(2.4px,0)}    /* landed */
}

/* the sheep tower. Only the one at the bottom walks — the two
   riding it keep their legs planted and just try not to fall off. */
.leg-still{
  fill:none;
  stroke:var(--beast);
  stroke-width:2.2;
  stroke-linecap:round;
}
.sway{
  transform-box:fill-box;
  transform-origin:50% 100%;   /* pivot on the bottom sheep's feet */
  animation:sway 3.4s ease-in-out infinite;
}
@keyframes sway{
  0%,100%{transform:rotate(-1.7deg)}
  50%    {transform:rotate(1.7deg)}
}
/* the one on top teeters against the sway, so it never settles */
.teeter{
  transform-box:fill-box;
  transform-origin:50% 100%;
  animation:teeter 2.1s ease-in-out infinite;
}
@keyframes teeter{
  0%,100%{transform:rotate(2.4deg)}
  50%    {transform:rotate(-2.4deg)}
}

/* head dips to the grass, holds, comes back up.
   Timing varies per animal via an inline style. */
.sheep-head{
  transform-box:fill-box;
  transform-origin:25% 79%;
  animation:graze 6.6s ease-in-out infinite;
}
@keyframes graze{
  0%,46%{transform:rotate(0deg)}
  60%,88%{transform:rotate(34deg)}
  100%{transform:rotate(0deg)}
}

.tail{
  transform-box:fill-box;
  transform-origin:100% 100%;
  animation:wag .38s ease-in-out infinite;
}
@keyframes wag{
  0%,100%{transform:rotate(-17deg)}
  50%{transform:rotate(17deg)}
}

/* ============================================================
   SCROLL CUE
   ============================================================ */
.scroll-cue{
  position:absolute;
  left:50%;
  bottom:calc(var(--pad) * .9 + 108px);
  z-index:4;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  font-size:10.5px;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(255,255,255,.92);
  text-shadow:0 2px 12px rgba(0,0,0,.4);
  pointer-events:none;
  transform:translateX(-50%);
  opacity:0;
  animation:cueIn .9s 1.1s cubic-bezier(.2,.85,.3,1) forwards;
  transition:opacity .45s ease;
}
.scroll-cue.gone{opacity:0 !important}
@keyframes cueIn{
  from{opacity:0;transform:translate(-50%,14px)}
  to{opacity:1;transform:translate(-50%,0)}
}
.scroll-cue i{
  position:relative;
  display:block;
  width:2px;height:40px;
  border-radius:2px;
  overflow:hidden;
  background:rgba(255,255,255,.28);
}
.scroll-cue i::after{
  content:"";
  position:absolute;
  left:0;top:0;
  width:100%;height:16px;
  border-radius:2px;
  background:#fff;
  animation:cueRun 2.2s cubic-bezier(.65,0,.35,1) infinite;
}
@keyframes cueRun{
  0%{transform:translateY(-18px)}
  55%,100%{transform:translateY(42px)}
}

/* soft vignette so white type always reads */
.stage::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(120% 80% at 50% 42%, rgba(0,0,0,var(--veil)), rgba(0,0,0,0) 62%),
    linear-gradient(180deg, rgba(0,0,0,.14), rgba(0,0,0,0) 26%);
}

/* ============================================================
   TOP BAR
   ============================================================ */
.topbar{
  position:relative;
  z-index:5;
  display:flex;
  justify-content:center;
  padding:calc(var(--pad) * .78) var(--pad) 0;
}
.wordmark{
  font-size:clamp(15px,1.35vw,21px);
  font-weight:800;
  letter-spacing:.02em;
  color:#fff;
  text-decoration:none;
  text-shadow:0 2px 14px rgba(0,0,0,.28);
  transition:opacity .25s ease;
}
.wordmark:hover{opacity:.72}

/* ============================================================
   STATUS CARD (top-left)
   ============================================================ */
.status{
  position:absolute;
  top:calc(var(--pad) * 1.65);
  left:var(--pad);
  z-index:6;
  display:flex;
  align-items:center;
  gap:14px;
  padding:12px 26px 12px 12px;
  border-radius:22px;
  background:var(--glass);
  border:1px solid var(--glass-line);
  backdrop-filter:blur(16px) saturate(1.4);
  -webkit-backdrop-filter:blur(16px) saturate(1.4);
  box-shadow:var(--shadow-soft);
  text-decoration:none;
  color:#fff;
  transition:transform .35s cubic-bezier(.2,.7,.3,1), background .35s ease;
}
.status:hover{transform:translateY(-2px);background:rgba(255,255,255,.3)}
.avatar{
  width:46px;height:46px;
  border-radius:50%;
  flex:0 0 auto;
  object-fit:cover;
  object-position:center 20%;
  background:#cfe0b8;
  border:2px solid rgba(255,255,255,.75);
  box-shadow:0 3px 10px -4px rgba(0,0,0,.4);
}
.status-copy{display:flex;flex-direction:column;gap:2px;line-height:1.15}
.status-top{
  display:flex;align-items:center;gap:7px;
  font-size:12.5px;font-weight:500;
  color:rgba(255,255,255,.92);
}
.dot{
  width:7px;height:7px;border-radius:50%;
  background:#4ade5e;
  animation:pulse 2.4s ease-out infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(74,222,94,.65)}
  70%{box-shadow:0 0 0 8px rgba(74,222,94,0)}
  100%{box-shadow:0 0 0 0 rgba(74,222,94,0)}
}
.status-name{
  font-size:14.5px;font-weight:700;letter-spacing:.055em;
  text-transform:uppercase;
}

/* ============================================================
   HEADLINE
   ============================================================ */
.hero{
  position:relative;
  z-index:3;
  display:grid;
  place-items:center;
  min-height:calc(100svh - 90px);
  padding:0 var(--pad);
  text-align:center;
}
.headline{
  margin:0;
  font-size:clamp(46px,10.2vw,152px);
  font-weight:900;
  line-height:.86;
  letter-spacing:-.035em;
  text-transform:uppercase;
  text-shadow:0 6px 34px rgba(10,26,16,.34);
}
.headline .ln{
  display:block;
  overflow:hidden;
}
.headline .ln > span{
  display:block;
  transform:translateY(102%);
  animation:riseIn .95s cubic-bezier(.22,.9,.28,1) forwards;
}
.headline .ln:nth-child(1) > span{animation-delay:.06s}
.headline .ln:nth-child(2) > span{animation-delay:.14s}
.headline .ln:nth-child(3) > span{animation-delay:.22s}
.headline .ln:nth-child(4) > span{animation-delay:.30s}
@keyframes riseIn{to{transform:translateY(0)}}

/* ============================================================
   FLOATING STICKY TAGS
   ============================================================ */
.tag{
  position:absolute;
  z-index:4;
  display:flex;
  align-items:center;
  padding:13px 22px;
  border-radius:5px;
  font-size:clamp(13px,1.15vw,18px);
  font-weight:600;
  color:#161a17;
  background:var(--tag-bg,#eef2df);
  box-shadow:var(--shadow-tag);
  white-space:nowrap;
  transform:rotate(var(--rot,0deg));
  opacity:0;
  animation:tagIn .8s cubic-bezier(.2,.85,.3,1) forwards;
  will-change:transform;
}
/* folded corner */
.tag::after{
  content:"";
  position:absolute;
  right:0;bottom:0;
  border-width:0 0 15px 15px;
  border-style:solid;
  border-color:transparent transparent var(--tag-fold,#1b1f1c) transparent;
}
.tag .badge{
  position:absolute;
  top:-19px;left:-15px;
  width:38px;height:38px;
  border-radius:50%;
  display:grid;place-items:center;
  background:var(--badge,#5fd35f);
  box-shadow:0 6px 14px -6px rgba(0,0,0,.5);
}
.tag .badge svg{width:18px;height:18px;fill:#fff}
.tag .clip{
  position:absolute;
  top:-16px;left:16px;
  width:16px;height:34px;
  opacity:.85;
  transform:rotate(-8deg);
}

.tag--ux{
  top:26%; right:12%;
  --tag-bg:#eef1dd; --tag-fold:#1d2a1a; --badge:#63d45f; --rot:-7deg;
  animation-delay:.42s;
}
.tag--illus{
  top:40%; left:52%;
  --tag-bg:#f6e6f6; --tag-fold:#3a1f4a; --badge:#d857e0; --rot:4deg;
  animation-delay:.5s;
}
.tag--3d{
  top:48%; left:30%;
  --tag-bg:#e6e3f7; --tag-fold:#1e1a3a; --badge:#7b5bea; --rot:-6deg;
  animation-delay:.58s;
}
@keyframes tagIn{
  from{opacity:0}
  to{opacity:1}
}

/* ============================================================
   EYES
   ============================================================ */
.eyes{
  position:absolute;
  top:50%; right:24%;
  z-index:4;
  display:flex;
  gap:8px;
  opacity:0;
  animation:fadeUp .8s .72s ease forwards;
}
.eye{
  width:clamp(22px,2.1vw,32px);
  height:clamp(30px,2.9vw,44px);
  border-radius:50%;
  background:#fff;
  display:grid;place-items:center;
  box-shadow:0 6px 16px -8px rgba(0,0,0,.5);
  overflow:hidden;
  transition:transform .11s ease;
}
.pupil{
  width:42%;
  height:42%;
  border-radius:50%;
  background:#111;
  transition:transform .12s ease-out;
}
.eyes.blink .eye{transform:scaleY(.08)}

/* ============================================================
   TAGLINE (bottom-left)
   ============================================================ */
.tagline{
  position:absolute;
  left:var(--pad);
  bottom:calc(var(--pad) * 1.5);
  z-index:5;
  margin:0;
  font-size:clamp(17px,1.85vw,29px);
  font-weight:700;
  line-height:1.18;
  letter-spacing:-.015em;
  text-shadow:0 4px 20px rgba(8,22,14,.4);
  opacity:0;
  animation:fadeUp .9s .62s cubic-bezier(.2,.85,.3,1) forwards;
}
.tagline .soft{
  display:block;
  padding-left:46px;
  font-weight:600;
  color:rgba(255,255,255,.94);
}
@keyframes fadeUp{
  from{opacity:0;transform:translateY(18px)}
  to{opacity:1;transform:translateY(0)}
}

/* ============================================================
   DOCK (bottom-center)
   ============================================================ */
.dock{
  position:fixed;
  left:50%;
  bottom:calc(var(--pad) * .9);
  z-index:60;
  display:flex;
  align-items:flex-end;
  gap:12px;
  padding:12px;
  border-radius:26px;
  background:var(--glass);
  border:1px solid var(--glass-line);
  backdrop-filter:blur(18px) saturate(1.5);
  -webkit-backdrop-filter:blur(18px) saturate(1.5);
  box-shadow:var(--shadow-soft);
  opacity:0;
  animation:dockIn .9s .8s cubic-bezier(.2,.85,.3,1) forwards;
}
@keyframes dockIn{
  from{opacity:0;transform:translate(-50%,18px)}
  to{opacity:1;transform:translate(-50%,0)}
}
.app{
  position:relative;
  width:clamp(48px,4.4vw,68px);
  height:clamp(48px,4.4vw,68px);
  border-radius:22%;
  border:1px solid rgba(255,255,255,.5);
  box-shadow:0 8px 18px -10px rgba(0,0,0,.55);
  display:grid;place-items:center;
  cursor:pointer;
  transition:transform .28s cubic-bezier(.2,.8,.3,1.3);
  /* no overflow:hidden here, it would clip the tooltip. The
     border-radius already crops the tile background, and
     nothing inside the tile overflows it. */
}

/* ---- dock tooltip ---- */
.app::after{
  content:attr(data-label);
  position:absolute;
  left:50%;
  bottom:calc(100% + 14px);
  padding:7px 14px;
  border-radius:9px;
  background:#fff;
  color:#14181a;
  font-family:var(--font);
  font-size:12.5px;
  font-weight:600;
  letter-spacing:-.01em;
  line-height:1;
  white-space:nowrap;
  box-shadow:0 10px 22px -10px rgba(0,0,0,.5), 0 0 0 1px rgba(0,0,0,.06);
  opacity:0;
  pointer-events:none;
  transform:translate(-50%,7px);
  transition:opacity .2s ease, transform .24s cubic-bezier(.2,.8,.3,1);
}
.app:focus-visible::after{opacity:1;transform:translate(-50%,0)}
.app.tapped::after{opacity:1;transform:translate(-50%,0)}
.app svg{width:58%;height:58%}

.app--notes{background:linear-gradient(180deg,#fdf3d4 0%,#fdf3d4 22%,#fffdf6 22%,#fffaf0 100%)}
.app--gallery{background:conic-gradient(from 0deg,#ff5b5b,#ffb03a,#ffe94d,#6ede6a,#4fc9e8,#6b7bf0,#c76bf0,#ff5b5b)}
.app--gallery span{
  width:42%;height:42%;border-radius:50%;
  background:rgba(255,255,255,.92);
  box-shadow:0 2px 6px rgba(0,0,0,.18);
}
.app--chat{background:linear-gradient(160deg,#5ec0ff,#1f7fe0)}
.app--mail{background:linear-gradient(160deg,#7fd2ff,#3ba0ef)}

/* ============================================================
   CASE STUDY STACK (bottom-right)
   ============================================================ */
.stack{
  position:absolute;
  right:var(--pad);
  bottom:calc(var(--pad) * 1.5);
  z-index:5;
  width:clamp(260px,24vw,340px);
  opacity:0;
  animation:fadeUp .9s .88s cubic-bezier(.2,.85,.3,1) forwards;
}
/* peeking edges only — kept short so they never bleed through the card */
.stack .sheet{
  position:absolute;
  z-index:0;
  height:30px;
  border-radius:14px;
  background:rgba(255,255,255,.26);
  border:1px solid rgba(255,255,255,.42);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.stack .sheet.s1{top:-19px;left:22px;right:22px}
.stack .sheet.s2{top:-10px;left:11px;right:11px}

.case{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  gap:14px;
  padding:12px 14px 12px 12px;
  border-radius:16px;
  background:rgba(16,26,20,.46);
  border:1px solid rgba(255,255,255,.34);
  backdrop-filter:blur(16px) saturate(1.3);
  -webkit-backdrop-filter:blur(16px) saturate(1.3);
  box-shadow:var(--shadow-soft);
  text-decoration:none;
  color:#fff;
  transition:transform .35s cubic-bezier(.2,.8,.3,1), background .3s ease;
}
.case:hover{transform:translateY(-4px);background:rgba(16,26,20,.6)}
.thumb{
  position:relative;
  width:74px;height:56px;
  border-radius:9px;
  flex:0 0 auto;
  overflow:hidden;
  background:linear-gradient(140deg,#f2efe6,#d8d2c2);
  border:1px solid rgba(255,255,255,.6);
}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}

.case-body{flex:1 1 auto;min-width:0}
.case-meta{
  display:flex;justify-content:space-between;
  font-size:11px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;
  color:rgba(255,255,255,.8);
}
.case-title{
  display:block;
  margin:2px 0 6px;
  font-size:16px;font-weight:800;letter-spacing:.03em;
  text-transform:uppercase;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.case-cta{
  display:flex;align-items:center;justify-content:space-between;
  font-size:11px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;
  color:rgba(255,255,255,.88);
}
.case-cta svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.8;transition:transform .3s ease}
.case:hover .case-cta svg{transform:translateX(4px)}

/* ============================================================
   ABOUT — GRID PAPER BOARD
   ============================================================ */
/* transparent on purpose: the fixed .paper-bg shows through */
.about{
  position:relative;
  overflow:hidden;
  padding:clamp(80px,10vw,150px) var(--pad) clamp(150px,16vw,230px);
  color:#14181a;
}

.about-inner{
  position:relative;
  z-index:2;
  max-width:1160px;
  margin:0 auto;
  text-align:center;
}

/* --- sticky "About" label --- */
.chip{
  position:relative;
  display:inline-flex;
  align-items:center;
  margin:0 auto -14px;
  padding:12px 26px 12px 22px;
  border-radius:5px;
  font-size:clamp(14px,1.2vw,19px);
  font-weight:600;
  color:#12202c;
  background:#dceaf8;
  box-shadow:0 10px 20px -12px rgba(20,40,60,.5);
  transform:rotate(-4deg) translateX(-150px);
}
.chip::after{
  content:"";
  position:absolute;right:0;top:0;
  border-width:0 14px 14px 0;
  border-style:solid;
  border-color:transparent #1d4e78 transparent transparent;
}
.chip .badge{
  position:absolute;top:-17px;left:-16px;
  width:36px;height:36px;border-radius:50%;
  display:grid;place-items:center;
  background:#2c9bf0;
  box-shadow:0 6px 14px -6px rgba(0,0,0,.45);
}
.chip .badge svg{width:17px;height:17px;fill:#fff}
.chip .clip{position:absolute;top:-15px;left:20px;width:15px;height:32px;transform:rotate(-10deg);opacity:.85}

/* --- headline + sub --- */
.about h2{
  margin:0;
  font-size:clamp(34px,5.6vw,80px);
  font-weight:900;
  line-height:.94;
  letter-spacing:-.032em;
  text-transform:uppercase;
}
.about .lede{
  margin:clamp(18px,2vw,28px) auto 0;
  max-width:20ch;
  font-size:clamp(18px,2.35vw,34px);
  font-weight:600;
  line-height:1.28;
  letter-spacing:-.018em;
  color:#20262a;
}
/* --- pinned CTA --- */
.pin-cta{
  position:relative;
  display:inline-block;
  margin-top:clamp(30px,4vw,52px);
  padding:15px 30px;
  border-radius:10px;
  background:#fff;
  color:#14181a;
  font-size:15px;
  font-weight:600;
  text-decoration:none;
  box-shadow:0 14px 26px -16px rgba(20,30,25,.6);
  transform:rotate(-2.5deg);
  transition:transform .3s cubic-bezier(.2,.8,.3,1), box-shadow .3s ease;
}
.pin-cta:hover{transform:rotate(-2.5deg) translateY(-4px);box-shadow:0 20px 32px -16px rgba(20,30,25,.55)}

.pin{
  position:absolute;
  width:19px;height:19px;
  border-radius:50%;
  background:radial-gradient(circle at 32% 28%, #ff8a80, #e02020 62%, #9c1010);
  box-shadow:0 4px 7px -2px rgba(0,0,0,.4), inset 0 -2px 3px rgba(0,0,0,.25);
}
.pin-cta .pin{top:-9px;right:-6px}

/* --- stat cards --- */
.stats{
  position:relative;
  z-index:2;
  display:flex;
  justify-content:center;
  align-items:flex-start;
  flex-wrap:wrap;
  gap:0;
  margin:clamp(56px,7vw,96px) auto 0;
  max-width:1300px;
}
.stat{
  position:relative;
  flex:0 1 300px;
  min-width:250px;
  margin:0 -14px;
  padding:26px 26px 30px;
  border-radius:16px;
  background:#fff;
  box-shadow:0 26px 44px -26px rgba(20,32,26,.55);
  transform:rotate(var(--tilt,0deg)) translateY(var(--drop,0px));
  transition:transform .35s cubic-bezier(.2,.8,.3,1), box-shadow .35s ease;
}
.stat:hover{
  transform:rotate(var(--tilt,0deg)) translateY(calc(var(--drop,0px) - 10px));
  box-shadow:0 34px 52px -26px rgba(20,32,26,.5);
  z-index:3;
}
.stat:nth-child(1){--tilt:-3.5deg;--drop:0px;z-index:4}
.stat:nth-child(2){--tilt:2.5deg;--drop:14px;z-index:3}
.stat:nth-child(3){--tilt:-2.5deg;--drop:-16px;z-index:2}
.stat:nth-child(4){--tilt:3deg;--drop:6px;z-index:1}

.stat .pin{top:-8px;left:14px}
/* folded corner flag */
.stat .flag{
  position:absolute;
  top:0;right:0;
  width:58px;height:58px;
  border-top-right-radius:16px;
  background:linear-gradient(45deg,#0d2b2b 0 50%,#c6f042 50% 100%);
}
.stat .num{
  display:block;
  font-size:clamp(34px,3.6vw,48px);
  font-weight:900;
  letter-spacing:-.035em;
  line-height:1;
  color:#14181a;
  font-variant-numeric:tabular-nums;
}
.stat .lbl{
  display:block;
  margin:12px 0 8px;
  font-size:17px;
  font-weight:700;
  letter-spacing:-.01em;
}
.stat .desc{
  margin:0;
  font-size:13.5px;
  line-height:1.45;
  color:#5c6360;
}

/* --- doodles --- */
.doodles{position:absolute;inset:0;z-index:1;pointer-events:none}
.dd{position:absolute;left:var(--x);top:var(--y);transform:rotate(var(--r,0deg));opacity:.95}
.dd svg{display:block;animation:float 7s ease-in-out infinite;animation-delay:var(--d,0s)}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

/* --- scroll reveal --- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.2,.8,.3,1), transform .8s cubic-bezier(.2,.8,.3,1)}
.reveal.in{opacity:1;transform:none}
.stat.reveal{transform:translateY(30px) rotate(var(--tilt,0deg))}
.stat.reveal.in{transform:rotate(var(--tilt,0deg)) translateY(var(--drop,0px))}
.reveal[style*="--i"]{transition-delay:calc(var(--i) * 90ms)}

/* ============================================================
   CONTACT — BROWSER-WINDOW MODAL
   ============================================================ */
body.modal-open{overflow:hidden}

.backdrop{
  position:fixed;inset:0;
  z-index:100;
  display:grid;
  place-items:center;
  padding:20px;
  background:rgba(14,18,16,.55);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
  opacity:0;
  visibility:hidden;
  transition:opacity .3s ease, visibility .3s;
}
.backdrop.open{opacity:1;visibility:visible}

.window{
  width:min(770px,100%);
  max-height:min(88svh,860px);
  display:flex;
  flex-direction:column;
  border-radius:16px;
  overflow:hidden;
  background:#fff;
  color:#14181a;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.6);
  transform:translateY(16px) scale(.97);
  transition:transform .38s cubic-bezier(.2,.85,.3,1);
}
.backdrop.open .window{transform:none}

.chrome{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:14px;
  padding:12px 14px;
  background:#f1f1f0;
  border-bottom:1px solid #e2e2e0;
}
.lights{display:flex;gap:8px}
.lights button{
  width:13px;height:13px;
  border:0;border-radius:50%;
  padding:0;cursor:pointer;
  transition:filter .2s ease;
}
.lights button:hover{filter:brightness(.85)}
.lights .r{background:#ff5f57}
.lights .y{background:#febc2e}
.lights .g{background:#28c840}

.omni{
  flex:1 1 auto;
  display:flex;
  align-items:center;
  gap:8px;
  height:30px;
  padding:0 12px;
  border-radius:8px;
  background:#e6e6e4;
  font-size:12.5px;
  color:#7b7b78;
}
.omni .grow{flex:1 1 auto;text-align:center}
.omni svg{width:14px;height:14px;stroke:#8b8b88;fill:none;stroke-width:1.9;flex:0 0 auto}
.chrome .mini-app{
  width:26px;height:26px;border-radius:6px;
  display:grid;place-items:center;
  background:linear-gradient(160deg,#7fd2ff,#3ba0ef);
}
.chrome .mini-app svg{width:15px;height:15px;stroke:#fff;fill:none;stroke-width:2}

.win-body{
  flex:1 1 auto;
  overflow-y:auto;
  padding:clamp(24px,3.4vw,40px);
}
.win-body h3{
  margin:0;
  font-size:clamp(24px,2.6vw,32px);
  font-weight:800;
  letter-spacing:-.025em;
}
.win-body .sub{
  margin:8px 0 0;
  font-size:15px;
  line-height:1.5;
  color:#7a807d;
}

.details{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px;
  margin-top:clamp(22px,2.6vw,32px);
}
.details dt{font-size:15px;font-weight:600;margin-bottom:6px}
.details dd{margin:0;font-size:15px;color:#5c6360}
.details a{color:inherit;text-decoration:none;border-bottom:1px solid #d8dcda}
.details a:hover{color:#14181a;border-color:#14181a}

.divider{border:0;border-top:1px solid #e6e6e3;margin:clamp(22px,2.6vw,30px) 0}

.form-title{font-size:15px;font-weight:600;margin:0 0 4px}
.form-hint{font-size:13px;line-height:1.5;color:#8b918e;margin:0 0 20px}
.field{margin-bottom:22px}
.field label{
  display:block;
  font-size:15px;font-weight:600;
  margin-bottom:9px;
}
.field label .req{color:#e02020;margin-left:2px}
.field input,
.field textarea{
  width:100%;
  padding:8px 0 11px;
  border:0;
  border-bottom:1px solid #e2e2df;
  background:transparent;
  font-family:inherit;
  font-size:15px;
  color:#14181a;
  outline:none;
  transition:border-color .25s ease;
  resize:vertical;
}
.field textarea{min-height:76px}
.field input::placeholder,
.field textarea::placeholder{color:#b3b7b5}
.field input:focus,
.field textarea:focus{border-color:#14181a}

.submit{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:15px 34px;
  border:0;border-radius:9px;
  background:#242826;
  color:#fff;
  font-family:inherit;
  font-size:14.5px;font-weight:700;
  cursor:pointer;
  transition:background .25s ease, transform .25s ease;
}
.submit:hover{background:#14181a;transform:translateY(-2px)}
.submit[disabled]{opacity:.65;cursor:default;transform:none}
.form-note{
  margin:14px 0 0;
  font-size:13px;
  color:#7a807d;
  min-height:18px;
}

/* ============================================================
   PROJECTS — CARDS PINNED OVER THE HILLS
   ============================================================ */
.projects{
  position:relative;
  overflow:hidden;
  padding:clamp(70px,8vw,120px) var(--pad) clamp(130px,15vw,200px);
  color:#151b18;

  /* Starts exactly where the hero's sunset finishes, so the two
     sections join without the sky snapping back to daylight.
     From here the scroll carries it down into full night. */
  --p-sky-top:#24245a; --p-sky-mid:#ac4670; --p-sky-low:#f28a4a;
  --p-far-a:#2c381e;   --p-far-b:#1e2818;
  --p-mid-a:#32401f;   --p-mid-b:#22301a;
  --p-near-a:#68582c;  --p-near-b:#363e1c;
  --p-cloud:#de9280;
  --p-moon:#ffeec6;
  --p-sun-core:#ffce78; --p-sun-glow:#ff783c; --p-sun-o:.6;
  --star:.12;
  --night:0;
}

/* stars and moon are simply absent in daylight */
.nightsky{opacity:var(--star,0)}

/* one filter dims the whole meadow rather than re-colouring every
   petal, stem and butterfly wing separately */
.meadow{filter:brightness(calc(.75 - var(--night,0) * .38))}
.projects .scene2{
  position:absolute;inset:0;
  width:100%;height:100%;
  display:block;
  z-index:0;
}
/* ---- paper plane and its flight path ----
   The svg is stretched over the whole section with
   preserveAspectRatio="none", so the curve always reaches corner to
   corner however tall the section grows. non-scaling-stroke keeps the
   line an even thickness despite that uneven stretch. */
.flightpath{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:4;
  pointer-events:none;
  overflow:visible;
}
.flightpath path{
  fill:none;
  stroke:#fff;
  stroke-linecap:round;
  vector-effect:non-scaling-stroke;
}
/* the route still to come: faint and dotted */
.flightpath .route{
  stroke-width:2.2;
  stroke-dasharray:5 12;
  opacity:.38;
}
/* the part already flown: solid, drawn in by the scroll */
.flightpath .flown{
  stroke-width:3;
  opacity:.85;
}

/* ---- drifting clouds ----
   Each bank starts fully clear of the left edge and ends fully clear
   of the right, so the loop restart happens off screen and is never
   seen. Different durations give the sky its depth. */
.cloudset{will-change:transform}
.cs1{animation:drift1 42s linear infinite}
.cs2{animation:drift2 58s linear infinite;animation-delay:-19s}
.cs3{animation:drift3 50s linear infinite;animation-delay:-33s}

/* ranges are tight enough that each bank is on screen roughly four
   fifths of its cycle, and the wrap still happens out of sight */
@keyframes drift1{
  from{transform:translateX(-1500px)}
  to  {transform:translateX(700px)}
}
@keyframes drift2{
  from{transform:translateX(-1300px)}
  to  {transform:translateX(900px)}
}
@keyframes drift3{
  from{transform:translateX(-800px)}
  to  {transform:translateX(1400px)}
}

/* ---- butterflies over the flowers ----
   Opacity rides the same --bloom the flowers use, so they fade in as
   the meadow opens instead of hovering over bare grass. */
.flit{
  opacity:var(--bloom,0);
  will-change:transform;
}
.fb1{animation:flit1 13s ease-in-out infinite}
.fb2{animation:flit2 16s ease-in-out infinite;animation-delay:-5s}
.fb3{animation:flit3 11s ease-in-out infinite;animation-delay:-8s}

/* closed loops, so each one wanders back to where it began */
@keyframes flit1{
  0%,100%{transform:translate(0,0)}
  25%{transform:translate(48px,-32px)}
  50%{transform:translate(96px,-6px)}
  75%{transform:translate(42px,-44px)}
}
@keyframes flit2{
  0%,100%{transform:translate(0,0)}
  30%{transform:translate(-54px,-26px)}
  55%{transform:translate(-96px,-52px)}
  80%{transform:translate(-38px,-14px)}
}
@keyframes flit3{
  0%,100%{transform:translate(0,0)}
  22%{transform:translate(38px,-40px)}
  48%{transform:translate(-30px,-58px)}
  74%{transform:translate(-62px,-18px)}
}

/* wings fold in towards the body, so each hinges on its inner edge */
.bw{
  transform-box:fill-box;
  animation:wingbeat 260ms ease-in-out infinite;
}
.bw.wl{transform-origin:100% 50%}
.bw.wr{transform-origin:0% 50%}
@keyframes wingbeat{
  0%,100%{transform:scaleX(1)}
  50%    {transform:scaleX(.28)}
}

/* ---- flowers along the grass ----
   Kept in their own short band pinned to the bottom of the section
   rather than inside .scene2. That svg is stretched over the full
   section height, which on a phone means a 3x zoom: flowers put in
   there would be giant and mostly cropped away. This band keeps them
   a sane size on every screen. */
.meadow{
  position:absolute;
  left:0;right:0;bottom:0;
  height:clamp(160px,22vw,360px);
  z-index:2;
  pointer-events:none;
  overflow:visible;
}
.bloom{
  transform-box:fill-box;
  transform-origin:50% 100%;   /* the foot of the stem */
  transform:scale(.08);
  will-change:transform;
}
.fl-w{--petal:#ffffff;--eye:#f5c451}
.fl-p{--petal:#f9aecb;--eye:#f2d05a}
.fl-y{--petal:#ffe486;--eye:#e79b3a}

.plane{
  position:absolute;
  top:0;
  left:0;
  z-index:5;
  width:clamp(32px,3.8vw,58px);
  pointer-events:none;
  will-change:transform;
  filter:drop-shadow(0 5px 9px rgba(20,50,80,.3));
}
.plane svg{display:block;width:100%;height:auto}

.projects-inner{position:relative;z-index:3;text-align:center}
.projects h2{
  margin:0;
  font-size:clamp(30px,4.8vw,64px);
  font-weight:900;
  line-height:.96;
  letter-spacing:-.03em;
  text-transform:uppercase;
  /* white throughout: the sky here starts at dusk and only gets
     darker, so it never needs to switch to a dark ink */
  color:#ffffff;
  text-shadow:0 2px 22px rgba(0,0,0,.38);
}
.projects .chip{
  background:#dceaf8;
  transform:rotate(-6deg) translateX(-120px);
  margin-bottom:-18px;
}

/* --- the scattered board --- */
.board{
  position:relative;
  z-index:3;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:flex-start;
  gap:clamp(14px,2vw,30px);
  max-width:1240px;
  margin:clamp(46px,6vw,84px) auto 0;
}
.proj{
  position:relative;
  flex:0 1 336px;
  min-width:262px;
  padding:9px 9px 0;
  border:0;
  border-radius:14px;
  background:#fff;
  color:inherit;
  font:inherit;
  text-align:left;
  cursor:pointer;
  box-shadow:0 30px 52px -28px rgba(12,28,18,.62);
  transform:rotate(var(--tilt,0deg)) translateY(var(--dy,0px));
  transition:transform .4s cubic-bezier(.2,.8,.3,1), box-shadow .4s ease;
}
.proj:hover,
.proj:focus-visible{
  transform:rotate(var(--tilt,0deg)) translateY(calc(var(--dy,0px) - 12px)) scale(1.025);
  box-shadow:0 40px 62px -28px rgba(12,28,18,.55);
  z-index:5;
  outline:none;
}
.proj:focus-visible{box-shadow:0 40px 62px -28px rgba(12,28,18,.55), 0 0 0 3px #2c6fe0}

.proj:nth-child(1){--tilt:-4deg;--dy:0px}
.proj:nth-child(2){--tilt:3deg;--dy:18px}
.proj:nth-child(3){--tilt:-2deg;--dy:-10px}
.proj:nth-child(4){--tilt:4deg;--dy:34px}
.proj:nth-child(5){--tilt:-3deg;--dy:52px}
.proj:nth-child(6){--tilt:2deg;--dy:26px}

.proj .bar{display:flex;gap:5px;padding:5px 4px 9px}
.proj .bar i{width:8px;height:8px;border-radius:50%;display:block}
.proj .bar i:nth-child(1){background:#ff5f57}
.proj .bar i:nth-child(2){background:#febc2e}
.proj .bar i:nth-child(3){background:#28c840}

.proj .foot{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  padding:12px 5px 14px;
}
.proj .foot b{
  font-size:15.5px;
  font-weight:800;
  letter-spacing:-.015em;
}
.proj .foot .meta{
  display:flex;
  gap:12px;
  font-size:10.5px;
  font-weight:600;
  letter-spacing:.055em;
  text-transform:uppercase;
  color:#9aa19d;
  white-space:nowrap;
}

/* paperclip on each card */
.proj .pclip{
  position:absolute;
  top:-16px;
  width:19px;height:40px;
  z-index:2;
}
.proj:nth-child(1) .pclip{right:26%;transform:rotate(12deg)}
.proj:nth-child(2) .pclip{left:34%;transform:rotate(-14deg)}
.proj:nth-child(3) .pclip{right:22%;transform:rotate(8deg)}
.proj:nth-child(4) .pclip{left:28%;transform:rotate(-9deg)}
.proj:nth-child(5) .pclip{left:22%;transform:rotate(15deg)}

/* --- mock artwork --- */
.art{
  position:relative;
  aspect-ratio:16 / 10;
  border-radius:9px;
  overflow:hidden;
  background:var(--bg,#e9e7e0);
}

.art > img{display:block;width:100%;height:100%;object-fit:cover}
.art::after{
  content:"";
  position:absolute;inset:0;
  pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.06), inset 0 -30px 50px -40px rgba(0,0,0,.4);
}
/* palettes */
.p-1{--bg:#d8d2c4;--ink:#2b3a33;--a:#3f6b58;--b:#e4b23c;--c:#f4f1ea}
.p-2{--bg:#d9cfe6;--ink:#3a2b4a;--a:#8e6bc4;--b:#f0a6c8;--c:#f7f4fb}
.p-3{--bg:#f5c9d8;--ink:#7a1f45;--a:#e0447c;--b:#ffe08a;--c:#fff5f8}
.p-4{--bg:#bfdcf2;--ink:#1d3f60;--a:#3e8fd0;--b:#f2b950;--c:#f3f9ff}
.p-5{--bg:#cfe0cd;--ink:#1f4a2c;--a:#3f8f52;--b:#e8e2cf;--c:#f5f8f3}

/* ============================================================
   CASE STUDY MODAL
   ============================================================ */
.window--case .win-body{padding:0}
.case-hero{
  margin:clamp(14px,2vw,20px) clamp(14px,2vw,20px) 0;
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 16px 30px -20px rgba(0,0,0,.5);
}
.case-pad{padding:clamp(20px,2.6vw,30px) clamp(20px,3vw,34px) clamp(26px,3.4vw,40px)}
.case-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
}
.case-head h3{
  margin:0;
  font-size:clamp(22px,2.4vw,30px);
  font-weight:800;
  letter-spacing:-.025em;
}
.preview-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  flex:0 0 auto;
  margin-top:5px;
  font-size:13px;
  font-weight:600;
  color:#2c6fe0;
  text-decoration:none;
}
.preview-link:hover{text-decoration:underline}
.preview-link svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2}

.case-desc{
  margin:12px 0 0;
  max-width:62ch;
  font-size:14.5px;
  line-height:1.55;
  color:#5c6360;
}
.meta-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px 26px;
  margin:clamp(22px,2.6vw,30px) 0 0;
}
.meta-grid dt{font-size:12.5px;color:#9aa19d;margin-bottom:5px}
.meta-grid dd{margin:0;font-size:15px;font-weight:600}

.case-note{
  margin:clamp(20px,2.4vw,26px) 0 0;
  padding:12px 14px;
  border-radius:9px;
  background:#f4f4f1;
  font-size:13px;
  line-height:1.5;
  color:#7a807d;
}
.case-shot{
  margin-top:clamp(20px,2.4vw,28px);
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 14px 28px -20px rgba(0,0,0,.45);
}
/* ============================================================
   SHARED PAPER BACKGROUND
   ============================================================ */
/* transparent on purpose: the fixed .paper-bg shows through */
.paper{
  position:relative;
  overflow:hidden;
  padding:clamp(70px,9vw,130px) var(--pad) clamp(90px,11vw,150px);
  color:#14181a;
}
.paper-inner{position:relative;z-index:3;max-width:1200px;margin:0 auto;text-align:center}
.paper h2{
  margin:0;
  font-size:clamp(30px,4.8vw,64px);
  font-weight:900;
  line-height:.96;
  letter-spacing:-.03em;
  text-transform:uppercase;
}

/* ============================================================
   SERVICES
   ============================================================ */
.srv-list{
  position:relative;
  z-index:3;
  max-width:1160px;
  margin:clamp(44px,5.5vw,78px) auto 0;
  display:flex;
  flex-direction:column;
  gap:clamp(13px,1.7vw,20px);
  text-align:left;
}
.srv{
  border-radius:18px;
  background:var(--sbg,#eee);
  box-shadow:0 16px 28px -20px rgba(20,32,26,.55);
  transition:box-shadow .35s ease, transform .35s cubic-bezier(.2,.8,.3,1);
}
.srv:hover{transform:translateY(-3px);box-shadow:0 24px 38px -22px rgba(20,32,26,.5)}

.srv-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  width:100%;
  padding:clamp(19px,2.3vw,28px) clamp(20px,2.6vw,34px);
  border:0;
  background:none;
  font:inherit;
  color:inherit;
  text-align:left;
  cursor:pointer;
  border-radius:18px;
}
.srv-head .t{
  font-size:clamp(18px,1.9vw,26px);
  font-weight:700;
  letter-spacing:-.022em;
}
.srv-icon{
  width:46px;height:46px;
  flex:0 0 auto;
  border-radius:50%;
  display:grid;place-items:center;
  background:var(--sic,#888);
  box-shadow:0 7px 15px -8px rgba(0,0,0,.55);
  transition:transform .38s cubic-bezier(.2,.8,.3,1.2);
}
.srv-icon svg{width:21px;height:21px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.srv.open .srv-icon{transform:scale(1.12) translateY(-2px)}

.s-1{--sbg:#fbe3e6;--sic:#ec6a7c}
.s-2{--sbg:#dbe6f7;--sic:#4a9de0}
.s-3{--sbg:#f3edc2;--sic:#e8bf1f}
.s-4{--sbg:#d9f0dd;--sic:#43c477}
.s-5{--sbg:#e7e0f6;--sic:#8b6ce8}

/* ============================================================
   ACCORDION MECHANICS (services + faqs)
   ============================================================ */
.acc-panel{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows .42s cubic-bezier(.2,.8,.3,1);
}
.open > .acc-panel{grid-template-rows:1fr}
.acc-panel > .inner{overflow:hidden}
.acc-panel p{
  margin:0;
  font-size:15px;
  line-height:1.6;
  color:#4c534f;
}
.srv .acc-panel p{
  padding:0 clamp(20px,2.6vw,34px) clamp(22px,2.4vw,28px);
  max-width:64ch;
}

/* ============================================================
   REVIEWS
   ============================================================ */
.rev-wrap{
  position:relative;
  z-index:3;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:flex-start;
  gap:clamp(16px,2vw,28px);
  max-width:1180px;
  margin:clamp(50px,6vw,90px) auto 0;
  text-align:left;
}
.rev{
  position:relative;
  flex:0 1 348px;
  min-width:268px;
  padding:26px 26px 34px;
  border-radius:18px;
  background:#fff;
  overflow:hidden;
  box-shadow:0 30px 52px -28px rgba(20,32,26,.52);
  transform:rotate(var(--tilt,0deg)) translateY(var(--dy,0px));
  transition:transform .4s cubic-bezier(.2,.8,.3,1), box-shadow .4s ease;
}
.rev:hover{
  transform:rotate(var(--tilt,0deg)) translateY(calc(var(--dy,0px) - 10px));
  box-shadow:0 40px 60px -28px rgba(20,32,26,.46);
  z-index:4;
}
.rev:nth-child(1){--tilt:-2deg;--dy:0px}
.rev:nth-child(2){--tilt:2.5deg;--dy:54px}
.rev:nth-child(3){--tilt:-3deg;--dy:18px}
.rev .pin{top:-7px;left:18px}

.who{display:flex;align-items:center;gap:11px}
.who .av{
  width:38px;height:38px;
  flex:0 0 auto;
  border-radius:50%;
  display:grid;place-items:center;
  font-size:13px;font-weight:800;
  color:#1e2a22;
  background:var(--avc,linear-gradient(150deg,#cfe3a8,#8fbf72));
  border:2px solid #fff;
  box-shadow:0 3px 8px -3px rgba(0,0,0,.35);
}
.who b{display:block;font-size:14.5px;font-weight:700;letter-spacing:-.01em}
.who span{font-size:12px;color:#8f9693}

.rev blockquote{
  margin:22px 0 0;
  font-size:clamp(18px,1.65vw,22px);
  font-weight:700;
  line-height:1.28;
  letter-spacing:-.022em;
}
.stars{display:flex;gap:3px;margin-top:16px}
.stars svg{width:16px;height:16px;fill:#f5a623}
.rev .brand{
  display:flex;align-items:center;gap:8px;
  margin-top:13px;
  font-size:14px;font-weight:700;letter-spacing:-.01em;
}
.rev .brand i{
  width:18px;height:18px;
  border-radius:50%;
  display:block;
  background:var(--bc,#333);
}
.rev .body{
  margin:22px 0 0;
  font-size:14px;
  line-height:1.55;
  color:#5c6360;
}
.rev .ribbon{
  position:absolute;
  right:-1px;bottom:-1px;
  width:66px;height:66px;
  border-bottom-right-radius:18px;
  background:linear-gradient(45deg,#f2762a 0 50%,#12333a 50% 100%);
}

/* ============================================================
   FAQs
   ============================================================ */
.faq-stage{
  position:relative;
  z-index:3;
  max-width:1320px;
  margin:0 auto;
  min-height:640px;
}
.faq-center{
  position:absolute;
  left:50%;top:50%;
  transform:translate(-50%,-50%);
  width:min(580px,88%);
  text-align:center;
}
.qa{
  position:absolute;
  width:var(--w,300px);
  border-radius:16px;
  background:var(--qbg,#eee);
  box-shadow:0 18px 32px -20px rgba(20,32,26,.55);
  transform:rotate(var(--tilt,0deg));
  text-align:left;
  transition:box-shadow .35s ease;
}
.qa:hover{box-shadow:0 26px 42px -22px rgba(20,32,26,.5)}
.qa-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  width:100%;
  padding:18px 20px;
  border:0;
  background:none;
  font:inherit;
  color:inherit;
  text-align:left;
  cursor:pointer;
  font-size:15.5px;
  font-weight:600;
  letter-spacing:-.012em;
  border-radius:16px;
}
.plus{position:relative;width:18px;height:18px;flex:0 0 auto}
.plus::before,.plus::after{
  content:"";
  position:absolute;
  background:#14181a;
  border-radius:2px;
}
.plus::before{left:0;top:8px;width:18px;height:2px}
.plus::after{left:8px;top:0;width:2px;height:18px;transition:transform .32s cubic-bezier(.2,.8,.3,1)}
.qa.open .plus::after{transform:scaleY(0)}
.qa .acc-panel p{padding:0 20px 20px;font-size:14px}

.q-1{--qbg:#fbdde2;--w:318px;--tilt:-1deg;left:1%;top:1%}
.q-2{--qbg:#dbf27f;--w:302px;--tilt:1.5deg;left:70%;top:11%}
.q-3{--qbg:#cddffa;--w:286px;--tilt:-2deg;left:0%;top:45%}
.q-4{--qbg:#f5eab4;--w:300px;--tilt:1deg;left:73%;top:52%}
.q-5{--qbg:#cdf2d8;--w:314px;--tilt:-1.5deg;left:31%;top:80%}

/* ============================================================
   FOOTER — CLOSING CTA
   ============================================================ */
.footer{
  position:relative;
  overflow:hidden;
  background:#f2eda2;
  /* the top gap is deliberately deep: it is the strip the drifting
     marquee shows through above the card. The sides are widened a
     little too, so the letters carry on past the card edges. */
  padding:clamp(46px,6vw,104px) clamp(18px,2.2vw,38px) clamp(96px,11vw,132px);
}

/* outlined text drifting behind the card */
.marquee{
  position:absolute;
  inset:0;
  z-index:0;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:.5vw 0;
  overflow:hidden;
  pointer-events:none;
  user-select:none;
}
.mrow{
  display:flex;
  width:max-content;
  white-space:nowrap;
  /* sized to fit the strip above the card. At the old 168px a row was
     taller than the gap, so all you ever saw was a sliver of letters. */
  font-size:clamp(34px,5.2vw,90px);
  font-weight:900;
  line-height:1;
  letter-spacing:-.03em;
  text-transform:uppercase;
  color:transparent;
  -webkit-text-stroke:2px rgba(255,255,255,.9);
}
.mrow span{
  padding-right:.35em;
  animation:slide 30s linear infinite;
}
.mrow.rev span{animation-direction:reverse}
@keyframes slide{
  from{transform:translateX(0)}
  to{transform:translateX(-100%)}
}

/* the big rounded card */
.cta-card{
  position:relative;
  z-index:2;
  min-height:min(86svh,780px);
  border-radius:26px;
  overflow:hidden;
  box-shadow:0 34px 64px -32px rgba(52,58,20,.55);
}
.cta-card .scene3{
  position:absolute;
  inset:0;
  width:100%;height:100%;
  display:block;
  z-index:0;
}
.cta-card::after{
  content:"";
  position:absolute;inset:0;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(10,20,35,.28), rgba(10,20,35,0) 26%),
    linear-gradient(0deg, rgba(10,20,20,.3), rgba(10,20,20,0) 34%);
}

.socials{
  position:absolute;
  z-index:4;
  top:clamp(18px,2.4vw,38px);
  left:clamp(18px,2.4vw,38px);
  display:flex;
  gap:10px;
}
.socials a{
  width:35px;height:35px;
  border-radius:9px;
  border:1.7px solid rgba(255,255,255,.85);
  display:grid;place-items:center;
  transition:background .25s ease, transform .25s ease;
}
.socials a:hover{background:rgba(255,255,255,.22);transform:translateY(-3px)}
.socials svg{width:16px;height:16px;stroke:#fff;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

.cta-note{
  position:absolute;
  z-index:4;
  top:clamp(18px,2.4vw,38px);
  right:clamp(18px,2.4vw,38px);
  max-width:24ch;
  margin:0;
  text-align:right;
  color:#fff;
  font-size:clamp(14px,1.3vw,20px);
  font-weight:700;
  line-height:1.32;
  letter-spacing:-.012em;
  text-shadow:0 3px 16px rgba(10,24,16,.45);
}
/* ---- the visitor ----
   Rig holds the saucer and its beam together so one transform lowers
   both. JS drives the descent; the beam then grows downward out of the
   hull, and the headline surfaces inside it. */
.ufo-rig{
  position:absolute;
  left:50%;
  top:0;
  z-index:5;
  pointer-events:none;
  will-change:transform;
  transform:translate(-50%,-210px);
}
.saucer{
  position:relative;
  z-index:2;
  display:block;
  width:clamp(130px,17vw,280px);
  height:auto;
  filter:drop-shadow(0 12px 30px rgba(120,255,210,.3));
}
.beam{
  position:absolute;
  left:50%;
  top:74%;
  z-index:1;
  width:clamp(240px,32vw,520px);
  height:clamp(300px,44vh,560px);
  transform:translateX(-50%) scaleY(0);
  transform-origin:top center;
  opacity:0;
  will-change:transform,opacity;
  /* narrow at the hull, splayed where it lands */
  clip-path:polygon(40% 0, 60% 0, 100% 100%, 0 100%);
  background:linear-gradient(180deg,
    rgba(178,255,224,.5),
    rgba(150,240,215,.16) 55%,
    rgba(140,230,210,0));
}
.rimlights circle{animation:rimpulse 1.6s ease-in-out infinite}
.rimlights circle:nth-child(2){animation-delay:.18s}
.rimlights circle:nth-child(3){animation-delay:.36s}
.rimlights circle:nth-child(4){animation-delay:.54s}
.rimlights circle:nth-child(5){animation-delay:.72s}
@keyframes rimpulse{
  0%,100%{opacity:.3}
  50%    {opacity:1}
}

/* idle hover, so it never freezes dead once it has arrived */
.ufo-bob{animation:ufobob 4.2s ease-in-out infinite}
@keyframes ufobob{
  0%,100%{transform:translateY(-6px)}
  50%    {transform:translateY(7px)}
}

/* the saucer is the one clickable thing in the rig */
.saucer{pointer-events:auto;cursor:pointer}
.ufo-rig.zap .ufo-bob{animation:zap .62s cubic-bezier(.2,.85,.3,1)}
.ufo-rig.zap .beam,
.ufo-rig.zap .pool{filter:brightness(2)}
@keyframes zap{
  0%  {transform:translateY(0) rotate(0)}
  22% {transform:translateY(-13px) rotate(-5deg)}
  55% {transform:translateY(5px) rotate(4deg)}
  100%{transform:translateY(0) rotate(0)}
}

/* dust drifting up the beam */
.motes{
  position:absolute;
  left:50%;
  top:74%;
  z-index:1;
  width:clamp(240px,32vw,520px);
  height:clamp(300px,44vh,560px);
  transform:translateX(-50%);
  opacity:0;
  pointer-events:none;
  clip-path:polygon(40% 0, 60% 0, 100% 100%, 0 100%);
}
.motes span{
  position:absolute;
  bottom:0;
  width:5px;height:5px;
  border-radius:50%;
  background:rgba(206,255,236,.95);
  box-shadow:0 0 8px 2px rgba(150,255,215,.5);
  animation:mote 5s linear infinite;
}
@keyframes mote{
  0%  {transform:translateY(0) scale(.6);opacity:0}
  12% {opacity:1}
  85% {opacity:.7}
  100%{transform:translateY(-88%) scale(1);opacity:0}
}

/* the puddle of light where the beam lands */
.pool{
  position:absolute;
  left:50%;
  top:calc(74% + clamp(300px,44vh,560px));
  z-index:0;
  width:clamp(260px,34vw,560px);
  height:clamp(54px,7.4vw,120px);
  transform:translate(-50%,-50%) scale(0);
  pointer-events:none;
  border-radius:50%;
  background:radial-gradient(ellipse at center, rgba(178,255,224,.6), rgba(160,245,215,.14) 55%, rgba(150,240,210,0) 72%);
}

/* one of the hero's sheep, on its way up */
.abductee{
  position:absolute;
  left:50%;
  top:0;
  z-index:2;
  width:clamp(44px,5.6vw,92px);
  height:auto;
  opacity:0;
  pointer-events:none;
  filter:drop-shadow(0 0 16px rgba(178,255,224,.55));
}

/* stars: same twinkle, staggered so the sky never pulses as one */
.f-stars circle{animation:twinkle 3.4s ease-in-out infinite}
.f-stars circle:nth-child(3n)  {animation-duration:4.6s;animation-delay:-1.2s}
.f-stars circle:nth-child(3n+1){animation-duration:2.8s;animation-delay:-2.1s}
.f-stars circle:nth-child(5n)  {animation-duration:5.4s;animation-delay:-0.6s}
@keyframes twinkle{
  0%,100%{opacity:.28}
  50%    {opacity:1}
}

/* a streak roughly every twenty seconds, so it feels stumbled upon */
.shooter{
  position:absolute;
  z-index:1;
  width:clamp(70px,9vw,140px);
  height:2px;
  border-radius:2px;
  background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.95));
  opacity:0;
  pointer-events:none;
}
.sh1{top:14%;left:6%;animation:shoot 21s linear infinite}
.sh2{top:26%;left:46%;animation:shoot 27s linear infinite;animation-delay:-11s}
@keyframes shoot{
  0%,90%{opacity:0;transform:rotate(19deg) translateX(0)}
  91%   {opacity:1;transform:rotate(19deg) translateX(30px)}
  97%   {opacity:0;transform:rotate(19deg) translateX(420px)}
  100%  {opacity:0;transform:rotate(19deg) translateX(420px)}
}

/* fireflies over the dark grass */
.firefly{
  position:absolute;
  z-index:3;
  width:6px;height:6px;
  border-radius:50%;
  background:#d2ff96;
  box-shadow:0 0 11px 3px rgba(184,255,130,.6);
  opacity:0;
  pointer-events:none;
  animation:fly 9s ease-in-out infinite;
}
@keyframes fly{
  0%,100%{transform:translate(0,0);opacity:0}
  14%    {opacity:.95}
  40%    {transform:translate(44px,-56px);opacity:.6}
  68%    {transform:translate(-18px,-34px);opacity:.95}
  88%    {opacity:0}
}

/* footer clouds drift too, blur on the inner group as before */
.fcloud{will-change:transform}
.fc1{animation:fdrift1 78s linear infinite}
.fc2{animation:fdrift2 104s linear infinite;animation-delay:-38s}
@keyframes fdrift1{
  from{transform:translateX(-1000px)}
  to  {transform:translateX(900px)}
}
@keyframes fdrift2{
  from{transform:translateX(-1200px)}
  to  {transform:translateX(700px)}
}

/* tooltips on the social icons, hanging below since they sit up top */
.socials a::after{
  content:attr(data-label);
  position:absolute;
  left:50%;
  top:calc(100% + 12px);
  padding:6px 12px;
  border-radius:8px;
  background:#fff;
  color:#14181a;
  font-family:var(--font);
  font-size:12px;
  font-weight:600;
  line-height:1;
  white-space:nowrap;
  box-shadow:0 10px 22px -10px rgba(0,0,0,.55);
  opacity:0;
  pointer-events:none;
  transform:translate(-50%,-6px);
  transition:opacity .2s ease, transform .24s cubic-bezier(.2,.8,.3,1);
}
.socials a:focus-visible::after,
.socials a.tapped::after{opacity:1;transform:translate(-50%,0)}

.cta-head{
  position:absolute;
  z-index:6;                    /* above the beam */
  left:50%;
  bottom:clamp(96px,13vh,170px);
  transform:translate(-50%,28px);
  opacity:0;                    /* revealed once the beam lands */
  margin:0;
  width:max-content;
  max-width:92%;
  text-align:center;
  color:#fff;
  font-size:clamp(34px,6.4vw,92px);
  font-weight:900;
  line-height:.88;
  letter-spacing:-.035em;
  text-transform:uppercase;
  text-shadow:0 0 44px rgba(150,255,220,.5), 0 6px 30px rgba(0,0,0,.55);
}

/* sits centred under the headline, inside the foot of the beam */
.chat-btn{
  position:absolute;
  z-index:6;
  left:50%;
  bottom:clamp(30px,5vh,64px);
  transform:translateX(-50%);
  padding:16px 34px;
  border-radius:12px;
  background:#fff;
  color:#14181a;
  font-size:15px;
  font-weight:700;
  text-decoration:none;
  box-shadow:0 16px 28px -16px rgba(0,0,0,.5);
  transition:transform .3s cubic-bezier(.2,.8,.3,1), box-shadow .3s ease;
}
/* keeps the -50% or the button jumps back to the left on hover */
.chat-btn:hover{transform:translate(-50%,-4px);box-shadow:0 24px 36px -18px rgba(0,0,0,.45)}

/* footer sticky notes */
.tag--f1{bottom:44%;left:2%;--tag-bg:#f6e6f6;--tag-fold:#3a1f4a;--badge:#d857e0;--rot:-6deg;z-index:5}
.tag--f2{bottom:32%;left:10%;--tag-bg:#eef1dd;--tag-fold:#1d2a1a;--badge:#7cc93f;--rot:5deg;z-index:5}
.tag--f3{bottom:20%;left:2%;--tag-bg:#e6e3f7;--tag-fold:#1e1a3a;--badge:#7b5bea;--rot:-7deg;z-index:5}

/* bottom bar */
.foot-bar{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  flex-wrap:wrap;
  padding:clamp(14px,1.6vw,22px) clamp(6px,1vw,14px) 0;
}
.foot-bar .mark{
  font-size:clamp(16px,1.5vw,22px);
  font-weight:800;
  letter-spacing:.01em;
  color:#2e3116;
  text-decoration:none;
}
.foot-clock{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#5c5f2c;
}
.foot-clock i{
  width:6px;height:6px;
  border-radius:50%;
  background:#7fae2c;
  animation:pulse 2.4s ease-out infinite;
}
.foot-clock time{font-variant-numeric:tabular-nums}
.foot-nav{display:flex;gap:clamp(13px,1.7vw,28px);flex-wrap:wrap}
.foot-nav a{
  font-size:12.5px;
  font-weight:700;
  letter-spacing:.085em;
  text-transform:uppercase;
  color:#4a4d22;
  text-decoration:none;
  transition:color .22s ease;
}
.foot-nav a:hover{color:#14181a;text-decoration:underline}

/* ============================================================
   HOVER-CAPABLE POINTERS ONLY
   ------------------------------------------------------------
   Touch screens fake :hover and leave it stuck on the last thing
   tapped, so anything that should only react to a real pointer
   lives in here. The touch equivalent is a .tapped class from JS.
   ============================================================ */
@media (hover:hover){
  /* the tile grows 1.1x, so the label is scaled back down by the
     same amount to keep the text at its true size */
  .app:hover{transform:translateY(-12px) scale(1.1)}
  .app:hover::after{opacity:1;transform:translate(-50%,0) scale(.909)}
  .socials a:hover::after{opacity:1;transform:translate(-50%,0)}
}


/* ============================================================
   RESPONSIVE
   ------------------------------------------------------------
   Every width override lives here, widest first, so a narrower
   breakpoint always wins. Rules inside each block keep the order
   they had beside their components.
   ============================================================ */

/* ---- 1180: the hero starts to crowd ---- */
@media (max-width:1180px){
  .eyes{right:14%}
  .tag--3d{left:16%}
  .tag--illus{left:56%}
}

/* ---- 1120: project and review cards drop to two across ---- */
@media (max-width:1120px){
  .board{max-width:760px}
  .proj{flex:0 1 46%}
  .proj:nth-child(3){--dy:26px}
  .proj:nth-child(4){--dy:12px}
  .proj:nth-child(5){--dy:40px}

  .rev{flex:0 1 46%;--dy:0px}
  .rev:nth-child(2){--dy:30px}

  /* the scattered FAQ pills collapse into a plain column */
  .faq-stage{min-height:0;display:flex;flex-direction:column;gap:16px;max-width:620px}
  .faq-center{position:static;transform:none;width:auto;margin-bottom:14px}
  .qa{position:static;width:auto;--tilt:0deg}
}

/* ---- 1080 ---- */
@media (max-width:1080px){
  .stat{flex:0 1 46%;margin:10px -8px}
}

/* ---- 860: the main phone breakpoint ---- */
@media (max-width:860px){

  /* hero */
  .scroll-cue{display:none}
  .hero{min-height:calc(100svh - 70px);padding-top:70px}
  .headline{font-size:clamp(40px,12vw,72px)}
  .status{padding:9px 18px 9px 9px;border-radius:18px;gap:10px}
  .avatar{width:38px;height:38px;font-size:13px}
  .status-name{font-size:12px}
  .status-top{font-size:11px}
  .tag{padding:10px 15px;font-size:12.5px}
  .tag .badge{width:30px;height:30px;top:-15px;left:-11px}
  .tag--ux{top:20%;right:4%}
  .tag--illus{top:34%;left:auto;right:8%}
  .tag--3d{top:60%;left:6%}
  .eyes{top:auto;bottom:34%;right:9%}
  .stack{display:none}
  .tagline{bottom:calc(var(--pad) * 5.4);font-size:16px}
  .tagline .soft{padding-left:0}
  .dock{gap:9px;padding:9px;border-radius:20px}

  /* about */
  .paper-bg{--grid:44px}
  .about{padding-bottom:170px}
  .chip{transform:rotate(-4deg);margin-bottom:2px}
  .about .lede{max-width:26ch}
  .stat{flex:0 1 100%;min-width:0;max-width:400px;margin:12px auto;--tilt:0deg;--drop:0px}
  .stat.reveal{transform:translateY(26px)}
  .stat.reveal.in,.stat:hover{transform:translateY(0)}
  .dd{transform:rotate(var(--r,0deg)) scale(.7)}
  .details{grid-template-columns:1fr;gap:16px}

  /* projects */
  .projects{padding-bottom:150px}
  .projects .chip{transform:rotate(-6deg);margin-bottom:0}
  .board{max-width:420px;gap:26px}
  .proj{flex:0 1 100%;--tilt:0deg;--dy:0px}
  .proj:hover,.proj:focus-visible{transform:translateY(-8px) scale(1.01)}
  .proj .foot{flex-direction:column;gap:7px}
  .meta-grid{grid-template-columns:1fr}

  /* footer */
  .cta-card{min-height:640px}
  .cta-note{
    top:74px;
    bottom:auto;
    left:clamp(18px,2.4vw,38px);
    right:auto;
    text-align:left;
    max-width:30ch;
    font-size:14px;
  }
  /* lifted to clear the button now sitting under it */
  .cta-head{bottom:118px;font-size:clamp(34px,9vw,56px)}
  .chat-btn{padding:14px 28px}
  /* The saucer cannot shrink past 130px, so on a phone it lands across
     the middle of the card and these three sat right on top of it. The
     same labels are already in the hero, so nothing is lost. */
  .tag--f1,.tag--f2,.tag--f3{display:none}
  .foot-bar{justify-content:center;text-align:center}
  .foot-nav{justify-content:center}
}

/* ---- 760 ---- */
@media (max-width:760px){
  .rev{flex:0 1 100%;max-width:420px;--tilt:0deg;--dy:0px}
  .rev:nth-child(2){--dy:0px}
  .rev:hover{transform:translateY(-8px)}
  .srv-head{padding:18px 20px}
  .srv-icon{width:40px;height:40px}
}

/* ---- 420 ---- */
@media (max-width:420px){
  .tag--illus{display:none}
}


/* ============================================================
   PORTRAIT
   ------------------------------------------------------------
   The hero is a 1.92:1 landscape drawing shown with "slice", so a
   portrait screen crops the sides away. On a 400x800 phone only
   viewBox x 768-1152 survives, which loses the sun and both dogs.
   Two fixes: hand back the width the parallax headroom was eating,
   then move the strays into what is left.
   ============================================================ */
@media (max-aspect-ratio: 1/1){
  /* 130% tall scenery costs about 30% of the visible width. Dropping
     it widens the band from 384 to 500 viewBox units. The matching
     parallax is switched off in JS. */
  .stage .scenery{top:0;height:100%}

  /* sun: x 1548 -> ~1003, high enough to stay clear of the ridge
     until the very end of the sunset, then it dips behind the hill */
  .sun-pos{transform:translate(-545px,-40px)}

  /* the left-hand dog moves into the surviving band, and is re-zoned:
     the slope at its new x is 0.38, not the 0.13 it had on the flat
     left shoulder */
  .dog-a{transform:translate(1015px,690px)}
  .dog-a .walk{animation-name:descend7}

  /* the sheep tower lives on the left shoulder on wide screens to
     keep clear of the headline. Here the headline is smaller and
     higher, so the tower comes back to the middle, which is also the
     only part of the hill the crop keeps. */
  .tower{transform:translate(944px,714px)}
  .tower .walk{animation-name:descend7}
}


/* ============================================================
   REDUCED MOTION
   ------------------------------------------------------------
   Last in the file on purpose: it has to outrank everything above.
   Scenery, layout and text all stay put; only the movement stops.
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *{
    animation-duration:.001s !important;
    animation-delay:0s !important;
    transition-duration:.001s !important;
  }

  /* things that animate in from a hidden state must be shown outright,
     or reduced motion would leave them invisible rather than still */
  .headline .ln > span{transform:none}
  .tag,.eyes,.tagline,.stack{opacity:1}
  .dock{opacity:1;transform:translate(-50%,0)}
  .scroll-cue{opacity:1;transform:translate(-50%,0)}
  .reveal{opacity:1;transform:none;transition:none}
  .stat.reveal{transform:rotate(var(--tilt,0deg)) translateY(var(--drop,0px))}
  .proj.reveal{transform:rotate(var(--tilt,0deg)) translateY(var(--dy,0px))}

  /* the hero scenery gives up its parallax headroom */
  .stage .scenery{top:0;height:100%}
  .scroll-cue i::after{animation:none;transform:translateY(12px)}
  .dd svg{animation:none}
  .mrow span{animation:none}

  /* every looping decoration: birds, herd, weather, wildlife, saucer */
  .flock,.bird,.sheep-head,.tail,.walk,.leg,.sway,.teeter,
  .cloudset,.flit,.bw,.rimlights circle,
  .ufo-bob,.motes span,.f-stars circle,.shooter,.firefly,.fcloud{
    animation:none !important;
  }
}