/* =====================================================================
   AQUEDUCT MEDIA · styles.css
   Single source of truth = brand book v2 (canonical, saturated palette).
   Motion: SVG self-draw -> seamless dash-flow. Everything references #flow.
   ===================================================================== */

:root{
  /* foundation */
  --ink:        #0B0F1A;
  --ink-soft:   #121829;
  --ink-lift:   #1A2236;
  --line:       #1F2A40;
  --line-soft:  #18202F;
  /* paper */
  --paper:      #F4EFE6;
  --paper-dim:  #C9C2B4;
  --grey:       #8B8E97;
  /* brand */
  --amber:        #E8754A;
  --amber-light:  #F4A788;
  --amber-deep:   #C8472D;
  --teal:         #3FAFA6;
  --teal-light:   #7CC7C0;
  --teal-deep:    #1E7A72;
  /* the one gradient — water flowing down */
  --flow: linear-gradient(180deg,#C8472D 0%,#E8754A 40%,#F4A788 72%,#3FAFA6 100%);
  --flow-135: linear-gradient(135deg,#C8472D 0%,#E8754A 40%,#F4A788 75%,#3FAFA6 100%);

  --wrap: 1200px;
  --pad: clamp(20px, 5vw, 64px);
  --ease: cubic-bezier(.16,1,.3,1);     /* sharp out, hard settle */
  --ease-draw: cubic-bezier(.7,0,.2,1);

  --f-disp: 'Bebas Neue', system-ui, sans-serif;
  --f-label: 'Antonio', system-ui, sans-serif;
  --f-body: 'Inter', system-ui, sans-serif;
  --f-serif: 'Instrument Serif', Georgia, serif;
  --f-mono: 'JetBrains Mono', ui-monospace, monospace;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad); }

.skip{
  position:fixed; left:12px; top:-60px; z-index:200;
  background:var(--amber); color:var(--ink); padding:10px 16px; border-radius:8px;
  font-family:var(--f-label); font-weight:700; letter-spacing:.06em;
  transition:top .2s var(--ease);
}
.skip:focus{ top:12px; }

/* ---------------------------------------------------------------- atoms */
.eyebrow{
  font-family:var(--f-mono);
  font-size:12px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--amber); margin:0 0 18px;
}
.a{ color:var(--amber); }

.btn{
  --bg:var(--amber); --fg:var(--ink);
  display:inline-flex; align-items:center; gap:.6em;
  background:var(--bg); color:var(--fg);
  font-family:var(--f-label); font-weight:700;
  font-size:13px; letter-spacing:.12em; text-transform:uppercase;
  padding:13px 22px; border-radius:999px; border:1px solid transparent;
  cursor:pointer; position:relative; overflow:hidden;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .25s var(--ease), color .25s var(--ease);
}
.btn .arr{ transition:transform .35s var(--ease); }
.btn:hover{ transform:translateY(-2px); box-shadow:0 12px 30px rgba(232,117,74,.32); will-change:transform; }
.btn:hover .arr{ transform:translateX(4px); }
.btn:focus-visible{ outline:2px solid var(--teal-light); outline-offset:3px; }
.btn-lg{ font-size:14px; padding:16px 28px; }
.btn-sm{ font-size:11px; padding:10px 16px; }
.btn-ghost{
  background:transparent; color:var(--paper);
  border-color:var(--line);
}
.btn-ghost:hover{ border-color:var(--teal); color:var(--teal-light); box-shadow:none; }

/* --------------------------------------------------------------- grain */
.grain{
  position:fixed; inset:0; z-index:120; pointer-events:none;
  opacity:.04; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --------------------------------------------- left "water level" rail */
.rail{
  position:fixed; left:0; top:0; bottom:0; width:2px; z-index:110;
  background:var(--line-soft); pointer-events:none;
}
.rail-fill{
  position:absolute; left:0; top:0; width:100%; height:0%;
  background:var(--flow);
  box-shadow:0 0 10px rgba(63,175,166,.5);
}

/* =============================================================== NAV === */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:100;
  transition:background .3s var(--ease), border-color .3s var(--ease), backdrop-filter .3s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  background:rgba(11,15,26,.72);
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  border-bottom-color:var(--line);
}
.nav-in{ display:flex; align-items:center; gap:24px; height:86px; }
.brand{ display:flex; align-items:center; gap:13px; }
.brand img{ border-radius:10px; }
.brand-wm{ font-family:var(--f-disp); font-size:30px; letter-spacing:.05em; line-height:1; color:var(--paper); }
.brand-wm .a{ color:var(--amber); }
@media (max-width:560px){
  .nav .brand img{ width:42px; height:42px; }
  .nav .brand-wm{ font-size:24px; }
}

.nav-links{ display:flex; gap:30px; margin-left:auto; }
.nav-links a{
  font-size:15px; font-weight:500; color:var(--paper-dim);
  position:relative; padding:4px 0; transition:color .2s var(--ease);
}
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:-2px; width:0; height:1.5px;
  background:var(--flow-135); transition:width .3s var(--ease);
}
.nav-links a:hover,.nav-links a:focus-visible{ color:var(--paper); }
.nav-links a:hover::after,.nav-links a:focus-visible::after{ width:100%; }
.nav-links a:focus-visible{ outline:2px solid var(--teal-light); outline-offset:6px; border-radius:2px; }
.nav .btn-sm{ margin-left:4px; }

/* language switcher */
.lang{ display:flex; align-items:center; gap:2px; font-family:var(--f-mono); font-size:11px; letter-spacing:.08em; }
.lang a{ padding:5px 8px; color:var(--grey); border-radius:6px; line-height:1; transition:color .2s var(--ease), background .2s var(--ease); }
.lang a:hover{ color:var(--paper); }
.lang a.lang-on{ color:var(--ink); background:var(--amber); }
.lang a:focus-visible{ outline:2px solid var(--teal-light); outline-offset:2px; }

/* display headings: locale-aware uppercase (keeps Turkish dotted İ) */
.hero-title,.sec-title,.card-title,.step-title,.work-title,.cta-title{ text-transform:uppercase; }

.burger{
  display:none; margin-left:auto; width:42px; height:42px;
  background:transparent; border:1px solid var(--line); border-radius:10px;
  flex-direction:column; align-items:center; justify-content:center; gap:5px; cursor:pointer;
}
.burger:focus-visible{ outline:2px solid var(--teal-light); outline-offset:3px; }
.burger span{ width:18px; height:2px; background:var(--paper); transition:transform .3s var(--ease), opacity .2s; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(3.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ transform:translateY(-3.5px) rotate(-45deg); }

.mobile-menu{
  position:fixed; inset:86px 0 auto 0; z-index:99;
  max-height:calc(100dvh - 86px); overflow-y:auto;
  background:rgba(11,15,26,.97);
  -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px);
  display:flex; flex-direction:column; gap:6px; padding:24px var(--pad) 36px;
  border-bottom:1px solid var(--line);
  transform:translateY(-12px); opacity:0; visibility:hidden;
  transition:transform .35s var(--ease), opacity .3s var(--ease), visibility .3s;
}
.mobile-menu.open{ transform:translateY(0); opacity:1; visibility:visible; }
.mobile-menu a:not(.btn){ font-family:var(--f-disp); font-size:clamp(26px,8vw,32px); letter-spacing:.03em; color:var(--paper); padding:8px 0; }
.mobile-menu .btn{ margin-top:14px; justify-content:center; }
.mm-meta{ font-family:var(--f-mono); font-size:11px; letter-spacing:.06em; color:var(--grey); margin-top:18px; }

/* ============================================================== HERO === */
.hero{
  position:relative;
  min-height:100vh;            /* fallback for browsers without svh */
  min-height:100svh;
  display:flex; flex-direction:column; align-items:stretch; justify-content:flex-end;
  text-align:left; padding:0 0 clamp(36px,6vh,72px); overflow:hidden;
}
/* ambient colour wash so the hero isn't a flat black void */
.hero::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(58% 48% at 50% 30%, rgba(232,117,74,.16), transparent 70%),
    radial-gradient(60% 55% at 50% 92%, rgba(63,175,166,.18), transparent 72%),
    radial-gradient(90% 80% at 80% 10%, rgba(124,199,192,.06), transparent 60%);
}
/* scrim: media stays clear up top; bottom darkens for the lowered headline */
.hero::after{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(180deg,
    rgba(11,15,26,.55) 0%, rgba(11,15,26,.05) 15%, transparent 42%,
    rgba(11,15,26,.5) 68%, rgba(11,15,26,.86) 88%, rgba(11,15,26,.96) 100%);
}
/* ============ AQUEDUCT-MASKED MEDIA REEL (hero background) ============
   The studio's work plays THROUGH the aqueduct logo silhouette: games,
   video, ads, websites — crossfading on a loop. Pure CSS, no WebGL. */
.hero-media{ position:absolute; inset:0; z-index:1; pointer-events:none; }
.hm-stage{
  position:absolute; inset:0; background:#05080f;
  /* full-bleed aqueduct mask, inlined as a data-URI so it works on file:// */
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 1000' preserveAspectRatio='xMidYMid slice'%3E%3Cg fill='%23fff'%3E%3Crect x='110' y='130' width='300' height='830' rx='46'/%3E%3Crect x='650' y='80' width='300' height='880' rx='46'/%3E%3Crect x='500' y='80' width='600' height='150' rx='46'/%3E%3Crect x='1190' y='130' width='300' height='830' rx='46'/%3E%3C/g%3E%3C/svg%3E") center/cover no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 1000' preserveAspectRatio='xMidYMid slice'%3E%3Cg fill='%23fff'%3E%3Crect x='110' y='130' width='300' height='830' rx='46'/%3E%3Crect x='650' y='80' width='300' height='880' rx='46'/%3E%3Crect x='500' y='80' width='600' height='150' rx='46'/%3E%3Crect x='1190' y='130' width='300' height='830' rx='46'/%3E%3C/g%3E%3C/svg%3E") center/cover no-repeat;
}
.medium{ position:absolute; inset:0; opacity:0; overflow:hidden; animation:mShow 21s linear infinite; }
.m-games{ animation-delay:0s; } .m-video{ animation-delay:-7s; } .m-web{ animation-delay:-14s; }
@keyframes mShow{ 0%{opacity:0} 2%{opacity:1} 31%{opacity:1} 33%{opacity:0} 100%{opacity:0} }
/* a real clip from /videos plays over the mock when present (added by app.js) */
.med-vid{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .5s ease; z-index:5; }
.med-vid.ready{ opacity:1; }

/* — GAMES (synthwave) — */
.m-games{ background:linear-gradient(180deg,#4a2080 0%,#2a1252 40%,#0d0922 100%); }
.m-games::before{ content:""; position:absolute; left:0; right:0; top:-6%; height:54%;
  background:radial-gradient(70% 100% at 50% 0%, rgba(232,117,74,.7), rgba(232,117,74,0) 70%); }
.m-games::after{ content:""; position:absolute; left:30%; right:30%; top:18%; height:90px; border-radius:50%;
  background:radial-gradient(circle, #F4A788, #E8754A 55%, transparent 72%); box-shadow:0 0 50px rgba(232,117,74,.9); }
.g-grid{ position:absolute; left:-30%; right:-30%; bottom:0; height:56%; transform-origin:bottom; z-index:1;
  background-image:repeating-linear-gradient(0deg, rgba(124,199,192,.95) 0 2px, transparent 2px 40px), repeating-linear-gradient(90deg, rgba(124,199,192,.7) 0 2px, transparent 2px 40px);
  filter:drop-shadow(0 0 4px rgba(63,175,166,.9)); animation:gGrid .85s linear infinite; }
@keyframes gGrid{ from{ background-position:0 0,0 0 } to{ background-position:0 40px,0 0 } }
.g-blocks i{ position:absolute; top:28%; width:40px; height:40px; border-radius:8px; z-index:2; background:linear-gradient(135deg,#E8754A,#F4A788); box-shadow:0 0 22px rgba(232,117,74,.9); animation:gMove 2.3s linear infinite; }
.g-blocks i:nth-child(2){ top:48%; background:linear-gradient(135deg,#3FAFA6,#7CC7C0); box-shadow:0 0 22px rgba(63,175,166,.9); animation-delay:-.7s; }
.g-blocks i:nth-child(3){ top:18%; animation-delay:-1.4s; }
.g-blocks i:nth-child(4){ top:58%; background:linear-gradient(135deg,#7CC7C0,#3FAFA6); animation-delay:-2s; }
@keyframes gMove{ from{ left:106% } to{ left:-12% } }
.g-player{ position:absolute; left:26%; bottom:30%; width:50px; height:50px; border-radius:11px; z-index:3; background:linear-gradient(135deg,#fff,#9fe6dd); box-shadow:0 0 26px rgba(124,199,192,1),0 0 60px rgba(124,199,192,.6); animation:gJump 1s ease-in-out infinite; }
@keyframes gJump{ 0%,100%{ transform:translateY(0) } 42%{ transform:translateY(-54px) } }
.g-hud{ position:absolute; top:18px; left:22px; right:22px; z-index:4; display:flex; justify-content:space-between; font-family:var(--f-mono); font-size:15px; letter-spacing:.12em; text-shadow:0 2px 8px #000; }
.g-hud b{ color:#E8754A; } .g-score{ color:#fff; }

/* — VIDEO — */
.m-video{ background:#06080e; }
.v-footage{ position:absolute; inset:0; background:linear-gradient(115deg,#8B2E1A,#E8754A 28%,#1E7A72 64%,#0a0e18); background-size:220% 220%; animation:vPan 6s ease-in-out infinite, vCut 2.4s steps(1) infinite; }
@keyframes vPan{ 0%{ background-position:0% 50% } 50%{ background-position:100% 38% } 100%{ background-position:0% 50% } }
@keyframes vCut{ 0%,49%{ filter:brightness(1) hue-rotate(0deg) } 50%{ filter:brightness(2.4) } 51%,99%{ filter:brightness(1) hue-rotate(36deg) } 100%{ filter:brightness(2.4) } }
.v-bar{ position:absolute; left:0; right:0; height:9%; background:#000; z-index:2; }
.v-top{ top:0 } .v-bot{ bottom:0 }
.v-grain{ position:absolute; inset:0; opacity:.1; mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.v-ui{ position:absolute; top:13%; left:18px; right:18px; display:flex; justify-content:space-between; font-family:var(--f-mono); font-size:12px; color:#fff; z-index:3; text-shadow:0 1px 4px #000; }
.v-rec{ color:#ff5a4a; } .v-rec::before{ content:"● "; animation:vBlink 1s steps(1) infinite; }
@keyframes vBlink{ 50%{ opacity:0 } }
.v-scrub{ position:absolute; left:18px; right:18px; bottom:13%; height:3px; background:rgba(255,255,255,.25); z-index:3; }
.v-scrub i{ position:absolute; top:-3px; width:9px; height:9px; border-radius:50%; background:#fff; box-shadow:0 0 8px #fff; animation:vScrub 4s linear infinite; }
@keyframes vScrub{ from{ left:0 } to{ left:100% } }


/* — WEBSITE — */
.m-web{ background:#0e1424; }
.w-chrome{ position:absolute; top:0; left:0; right:0; height:13%; min-height:34px; background:#1a2336; display:flex; align-items:center; gap:7px; padding:0 16px; }
.w-chrome i{ width:9px; height:9px; border-radius:50%; background:#3a4660; }
.w-chrome i:nth-child(1){ background:#E8754A } .w-chrome i:nth-child(2){ background:#F4A788 } .w-chrome i:nth-child(3){ background:#3FAFA6 }
.w-chrome b{ margin-left:12px; font-family:var(--f-mono); font-size:12px; font-weight:400; color:var(--paper-dim); }
.w-page{ position:absolute; top:13%; left:0; right:0; bottom:-12%; padding:18px; animation:wScroll 6s ease-in-out infinite 1.6s; }
.w-hero{ height:120px; border-radius:12px; background:linear-gradient(135deg,#C8472D,#E8754A 45%,#3FAFA6); opacity:0; animation:wIn .6s ease forwards .2s; }
.w-rows{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; margin-top:14px; }
.w-rows span{ height:64px; border-radius:10px; background:#1c2740; opacity:0; animation:wIn .5s ease forwards; }
.w-rows span:nth-child(1){ animation-delay:.5s } .w-rows span:nth-child(2){ animation-delay:.62s } .w-rows span:nth-child(3){ animation-delay:.74s }
.w-rows span:nth-child(4){ animation-delay:.86s } .w-rows span:nth-child(5){ animation-delay:.98s } .w-rows span:nth-child(6){ animation-delay:1.1s }
@keyframes wIn{ from{ opacity:0; transform:translateY(16px) } to{ opacity:1; transform:none } }
@keyframes wScroll{ 0%,22%{ transform:translateY(0) } 64%,72%{ transform:translateY(-24%) } 100%{ transform:translateY(0) } }

/* — the "now playing" reel ticker — */
.hm-reel{ position:relative; z-index:4; display:inline-flex; align-items:center; gap:11px; margin-bottom:22px;
  padding:7px 14px; border:1px solid var(--line); border-radius:999px; background:rgba(11,15,26,.45);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  font-family:var(--f-mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase; }
.reel-dot{ width:8px; height:8px; border-radius:50%; background:#ff5a4a; box-shadow:0 0 10px #ff5a4a; animation:vBlink 1.2s steps(1) infinite; }
.reel-sep{ color:var(--line); }
.reel-item{ color:var(--grey); animation:reelOn 21s linear infinite; }
.r-games{ animation-delay:0s } .r-video{ animation-delay:-7s } .r-web{ animation-delay:-14s }
@keyframes reelOn{ 0%{ color:#8B8E97 } 3%{ color:#E8754A } 31%{ color:#E8754A } 33%{ color:#8B8E97 } 100%{ color:#8B8E97 } }

/* pause when the hero is off-screen / tab hidden (battery) */
.hero.paused .medium, .hero.paused .hm-stage *, .hero.paused .reel-item, .hero.paused .reel-dot{ animation-play-state:paused; }
.hero-in{ position:relative; z-index:3; }
.hero-coords,.scroll-cue{ position:absolute; z-index:4; }

/* SVG bodies / sheen / pools / outlines / channels ---------------------- */
.body{ fill:url(#flow); opacity:.24; }
.cap{ opacity:.34; }

.sheen{ opacity:.0; animation:sheenDown 4.6s var(--ease-draw) 1.7s infinite; }
.s2{ animation-delay:1.2s; }            /* center leads */
.s3{ animation-delay:2.3s; }
@keyframes sheenDown{
  0%{ transform:translateY(20px); opacity:0; }
  12%{ opacity:1; }
  88%{ opacity:1; }
  100%{ transform:translateY(300px); opacity:0; }
}

.poolfx{ opacity:0; animation:poolPulse 2.4s ease-in-out 2.4s infinite; }
.p2{ animation-delay:1.8s; }
.p3{ animation-delay:3.0s; }
@keyframes poolPulse{
  0%,100%{ opacity:.25; transform:scale(.85); }
  50%{ opacity:.7; transform:scale(1.05); }
}

.outlines{ filter:drop-shadow(0 0 6px rgba(232,117,74,.25)); }
.pier{
  fill:none; stroke:url(#flow); stroke-width:3;
  vector-effect:non-scaling-stroke;
  stroke-dasharray:100; stroke-dashoffset:100;
  animation:draw 1.5s var(--ease-draw) forwards;
}
.pier.lead{ animation-delay:.15s; }       /* center builds first impression */
.pier:nth-child(1){ animation-delay:.45s; }
.pier:nth-child(2){ animation-delay:.6s; }
.pier.flag-line{ animation-delay:.9s; stroke-width:2; }
@keyframes draw{ to{ stroke-dashoffset:0; } }

.chan{
  fill:none; stroke:url(#flow); stroke-width:4.5; stroke-linecap:round;
  stroke-dasharray:13 67;                  /* short dart, long gap */
  opacity:0;
  animation:flow 2.4s linear 1.7s infinite, chanOn .5s ease 1.7s forwards;
}
.c1{ animation-delay:-.8s, 1.7s; }
.c2{ animation-delay:0s, 1.55s; stroke-width:5.2; }   /* center = primary, leads */
.c3{ animation-delay:-1.6s, 1.85s; }
@keyframes flow{ to{ stroke-dashoffset:-80; } }   /* 13+67 = 80 → seamless loop */
@keyframes chanOn{ to{ opacity:1; } }

/* glow only where the GPU can take it */
@supports (filter:url(#glow)){
  @media (min-width:780px){ .chan{ filter:url(#glow); } }
}

/* hero type ------------------------------------------------------------- */
.hero-title{
  font-family:var(--f-disp); font-weight:400;
  font-size:clamp(48px,10vw,150px); line-height:.84; letter-spacing:.01em;
  margin:0; color:var(--paper);
  display:flex; flex-direction:column; align-items:flex-start; gap:.02em;
  text-shadow:0 2px 40px rgba(11,15,26,.7);
}
.hero-title .line{ display:block; }
.hero-title .line-2{
  color:var(--amber);   /* fallback if background-clip:text unsupported */
  background:var(--flow-135); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}
.hero-sub{
  max-width:46ch; margin:22px 0 0; font-size:clamp(16px,1.5vw,19px);
  color:var(--paper-dim); line-height:1.6;
  text-shadow:0 1px 16px rgba(11,15,26,.9);
}
.hero-sub strong{ color:var(--paper); font-weight:600; }
.hero-cta{ display:flex; gap:14px; justify-content:flex-start; flex-wrap:wrap; margin-top:28px; }
.hero-meta{
  display:flex; gap:14px; align-items:center; justify-content:flex-start; flex-wrap:wrap;
  margin:26px 0 0; font-family:var(--f-mono); font-size:11px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--grey);
  text-shadow:0 1px 10px rgba(11,15,26,.9);
}
.hero-meta .dot{ width:4px; height:4px; border-radius:50%; background:var(--amber); }

.hero-coords{
  left:var(--pad); bottom:26px; text-align:left;
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.16em;
  color:var(--grey); display:flex; flex-direction:column; gap:4px;
}
.scroll-cue{
  right:var(--pad); bottom:26px;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  font-family:var(--f-mono); font-size:10px; letter-spacing:.3em; color:var(--grey);
}
.scroll-cue-line{ width:1px; height:46px; background:linear-gradient(var(--teal),transparent); overflow:hidden; position:relative; }
.scroll-cue-line::after{ content:""; position:absolute; left:0; top:0; width:100%; height:40%; background:var(--teal-light); animation:cue 1.8s var(--ease) infinite; }
@keyframes cue{ 0%{ transform:translateY(-100%);} 60%,100%{ transform:translateY(280%);} }
.scroll-cue-txt{ writing-mode:vertical-rl; }

/* =========================================================== DIVIDER === */
.divider{ position:relative; height:1px; background:var(--line); margin:0 auto; max-width:calc(var(--wrap) - 2 * var(--pad)); overflow:hidden; }
.divider .pulse{
  position:absolute; top:0; left:-30%; width:30%; height:100%;
  background:linear-gradient(90deg,transparent,var(--amber),var(--teal),transparent);
}
.divider.in .pulse{ animation:sweep 1.5s var(--ease) forwards; }
@keyframes sweep{ to{ left:130%; } }

/* =========================================================== SECTIONS == */
.section{ padding:clamp(80px,11vw,160px) 0; position:relative; }
.sec-head{ max-width:760px; margin-bottom:clamp(48px,6vw,80px); }
.sec-title{
  font-family:var(--f-disp); font-weight:400;
  font-size:clamp(40px,6.5vw,92px); line-height:.92; letter-spacing:.01em;
  margin:0 0 24px; color:var(--paper);
}
.sec-lede{ font-size:clamp(17px,1.6vw,21px); line-height:1.55; color:var(--paper-dim); max-width:60ch; margin:0; }
.sec-lede strong,.studio-copy strong{ color:var(--paper); }

/* services cards -------------------------------------------------------- */
.cards{ display:grid; grid-template-columns:1fr 1.25fr 1fr; gap:20px; align-items:stretch; }
.card{
  position:relative; background:var(--ink-soft); border:1px solid var(--line);
  border-radius:20px; padding:36px 30px 30px; overflow:hidden;
  transition:transform .4s var(--ease), border-color .4s var(--ease), background .4s var(--ease);
}
.card-chan{ position:absolute; left:0; top:0; width:3px; height:100%; background:var(--flow); transform:scaleY(0); transform-origin:top; transition:transform .9s var(--ease); }
.card.in .card-chan{ transform:scaleY(1); }
.card.card-main .card-chan{ width:4px; transition-delay:.05s; }
.card:hover{ transform:translateY(-6px); border-color:rgba(63,175,166,.42); background:var(--ink-lift); }
.card-main{ background:linear-gradient(180deg,rgba(232,117,74,.07),var(--ink-soft) 60%); border-color:rgba(232,117,74,.28); }
.card-main:hover{ border-color:rgba(232,117,74,.5); }
.card-tag{
  display:inline-block; font-family:var(--f-mono); font-size:10px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink); background:var(--amber);
  padding:4px 10px; border-radius:999px; margin-bottom:16px;
}
.card-no{ font-family:var(--f-mono); font-size:12px; letter-spacing:.2em; color:var(--teal); margin-bottom:14px; }
.card-title{ font-family:var(--f-disp); font-weight:400; font-size:clamp(30px,3.4vw,46px); line-height:.92; letter-spacing:.01em; margin:0 0 16px; color:var(--paper); }
.card-copy{ color:var(--paper-dim); font-size:15.5px; margin:0 0 22px; }
.card-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.card-list li{ position:relative; padding-left:20px; font-size:14.5px; color:var(--paper); }
.card-list li::before{ content:""; position:absolute; left:0; top:.62em; width:8px; height:8px; border-radius:2px; background:var(--flow-135); }

/* process steps -------------------------------------------------------- */
.flow-steps{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:0; position:relative; counter-reset:step; }
.flow-steps::before{ content:""; position:absolute; left:0; right:0; top:42px; height:2px; background:var(--line); }
.flow-steps::after{ content:""; position:absolute; left:0; top:42px; height:2px; width:0; background:var(--flow-135); box-shadow:0 0 12px rgba(63,175,166,.4); transition:width 1.4s var(--ease) .2s; }
.process.in .flow-steps::after{ width:100%; }
.step{ position:relative; padding:0 22px; }
.step:first-child{ padding-left:0; }
.step-no{
  position:relative; z-index:2; display:flex; align-items:center; justify-content:center;
  width:54px; height:54px; border-radius:50%; background:var(--ink); border:2px solid var(--line);
  font-family:var(--f-mono); font-size:13px; color:var(--teal); margin-bottom:24px;
  transition:border-color .4s var(--ease), color .4s ease, box-shadow .4s ease;
}
.step.in .step-no{ border-color:var(--amber); color:var(--amber); box-shadow:0 0 0 5px rgba(232,117,74,.08); }
.step-title{ font-family:var(--f-disp); font-weight:400; font-size:clamp(24px,2.6vw,34px); letter-spacing:.02em; margin:0 0 12px; color:var(--paper); }
.step p{ margin:0; font-size:14.5px; color:var(--paper-dim); max-width:24ch; }

/* work ----------------------------------------------------------------- */
.work-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-bottom:72px; }
.work-item{
  border:1px solid var(--line); border-radius:20px; padding:30px;
  background:var(--ink-soft); position:relative; overflow:hidden;
  min-height:230px; display:flex; flex-direction:column;
  transition:transform .4s var(--ease), border-color .4s var(--ease);
}
.work-item::before{ content:""; position:absolute; inset:0; background:radial-gradient(120% 100% at 100% 0%, rgba(63,175,166,.10), transparent 60%); opacity:0; transition:opacity .4s var(--ease); }
.work-item:hover{ transform:translateY(-6px); border-color:var(--teal-deep); }
.work-item:hover::before{ opacity:1; }
.work-meta{ margin-bottom:auto; }
.work-kind{ font-family:var(--f-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--teal); }
.work-title{ font-family:var(--f-disp); font-weight:400; font-size:clamp(34px,4vw,52px); letter-spacing:.02em; margin:26px 0 14px; color:var(--paper); }
.work-copy{ margin:0; font-size:14.5px; color:var(--paper-dim); }

.proof{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:18px; overflow:hidden; }
.proof-item{ background:var(--ink); padding:34px 26px; display:flex; flex-direction:column; gap:8px; }
.proof-num{ font-family:var(--f-disp); font-weight:400; font-size:clamp(36px,4.4vw,58px); line-height:1; letter-spacing:.01em;
  color:var(--amber);
  background:var(--flow-135); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.proof-num .pm{ font-size:.4em; }
.proof-label{ font-family:var(--f-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--grey); }

/* products — sleek showcase blocks (NIZAM, CATastrophe) ---------------- */
.product-list{ margin-bottom:64px; }
.product{ display:grid; grid-template-columns:1.04fr 1fr; gap:clamp(28px,4vw,60px); align-items:center;
  padding:clamp(34px,5vw,68px) 0; border-top:1px solid var(--line); }
.product:first-child{ border-top:none; padding-top:8px; }
.product.reverse .product-media{ order:2; }
.product-media{ position:relative; border-radius:20px; overflow:hidden; border:1px solid var(--line);
  background:var(--ink-soft); aspect-ratio:16/10; box-shadow:0 34px 80px rgba(0,0,0,.45);
  transition:transform .5s var(--ease), border-color .5s var(--ease); }
.product:hover .product-media{ transform:translateY(-6px); border-color:color-mix(in srgb, var(--p-accent) 50%, var(--line)); }
.product-shot{ width:100%; height:100%; object-fit:cover; display:block; }
.product-media::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 55%, rgba(11,15,26,.5)); pointer-events:none; }
.product-badge{ position:absolute; left:18px; bottom:18px; z-index:2; width:62px; height:62px; border-radius:15px;
  border:1px solid rgba(255,255,255,.14); box-shadow:0 12px 30px rgba(0,0,0,.55); background:#0b0f1a; }
.product-kind{ font-family:var(--f-mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--p-accent); margin:0 0 12px; }
.product-name{ font-family:var(--f-disp); font-weight:400; font-size:clamp(40px,5.2vw,72px); line-height:.94; letter-spacing:.02em; text-transform:uppercase; margin:0 0 12px; color:var(--paper); }
.product-tag{ font-family:var(--f-serif); font-style:italic; font-size:clamp(18px,1.7vw,23px); line-height:1.3; color:var(--p-accent); margin:0 0 18px; }
.product-over{ color:var(--paper-dim); font-size:15.5px; line-height:1.62; margin:0 0 22px; max-width:56ch; }
.product-feats{ list-style:none; margin:0 0 22px; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:11px 24px; }
.product-feats li{ position:relative; padding-left:20px; font-size:14px; color:var(--paper); }
.product-feats li::before{ content:""; position:absolute; left:0; top:.52em; width:8px; height:8px; border-radius:2px; background:var(--p-accent); }
.product-tech{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 26px; }
.product-tech span{ font-family:var(--f-mono); font-size:11px; letter-spacing:.04em; color:var(--paper-dim);
  border:1px solid var(--line); border-radius:999px; padding:5px 12px; }
.product-foot{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:22px; }
.product-meta{ display:flex; gap:30px; margin:0; }
.product-meta dt{ font-family:var(--f-mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--grey); margin-bottom:5px; }
.product-meta dd{ margin:0; font-size:13px; color:var(--paper); font-family:var(--f-mono); display:flex; align-items:center; gap:7px; }
.product-dot{ width:7px; height:7px; border-radius:50%; background:var(--grey); flex:none; }
.product-dot.on{ background:#5A9E6F; box-shadow:0 0 9px #5A9E6F; }
.product-cta{ flex:none; }
.product-cta.btn-ghost{ cursor:default; }
@media (max-width:880px){
  .product{ grid-template-columns:1fr; gap:22px; padding:40px 0; }
  .product.reverse .product-media{ order:0; }
  .product-feats{ grid-template-columns:1fr; }
  .product-foot{ align-items:flex-start; }
}

/* studio --------------------------------------------------------------- */
.studio-in{ display:grid; grid-template-columns:1fr 1.15fr; gap:clamp(40px,7vw,110px); align-items:start; }
.pullquote{ font-family:var(--f-serif); font-style:italic; font-weight:400; font-size:clamp(46px,6.5vw,96px); line-height:.98; letter-spacing:0; margin:10px 0 0; color:var(--paper); }
.pullquote .a{ color:var(--amber); }
.studio-copy{ font-size:clamp(16px,1.5vw,19px); line-height:1.65; color:var(--paper-dim); margin:0 0 22px; }
.studio-copy:last-child{ margin-bottom:0; }

/* the studio is a LIGHT (limestone) section — a bright beat in a dark page */
.studio{ background:var(--paper); color:var(--ink); }
.studio .eyebrow{ color:var(--amber-deep); }
.studio .pullquote{ color:var(--ink); }
.studio .pullquote .a{ color:var(--amber-deep); }
.studio .studio-copy{ color:#3c4458; }
.studio .studio-copy strong{ color:var(--ink); }

/* faint colour wash so the dark sections feel alive, not flat */
.services::before,.work::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:radial-gradient(60% 45% at 50% -4%, rgba(63,175,166,.07), transparent 62%);
}
.services .wrap,.work .wrap{ position:relative; z-index:1; }

/* ============================================================== CTA === */
.cta{ position:relative; padding:clamp(90px,12vw,170px) 0 clamp(80px,10vw,140px); text-align:center; overflow:hidden; }
.cta::before{ content:""; position:absolute; inset:0; background:radial-gradient(80% 120% at 50% 120%, rgba(63,175,166,.14), transparent 60%); pointer-events:none; }
.converge{ position:absolute; left:0; top:0; width:100%; height:240px; pointer-events:none; opacity:.9; }
.conv-line{ fill:none; stroke:url(#conv); stroke-width:2; vector-effect:non-scaling-stroke; stroke-dasharray:6 14; animation:converge 2.2s linear infinite; animation-play-state:paused; }
.cta.in .conv-line{ animation-play-state:running; }   /* only runs once the CTA is on-screen */
@keyframes converge{ to{ stroke-dashoffset:-40; } }
.cta-in{ position:relative; z-index:2; }
.cta-title{ font-family:var(--f-disp); font-weight:400; font-size:clamp(54px,9vw,128px); line-height:.86; letter-spacing:.01em; margin:0 0 24px; }
.cta-title .a{ color:var(--amber); background:var(--flow-135); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.cta-sub{ max-width:54ch; margin:0 auto 36px; font-size:clamp(16px,1.6vw,20px); color:var(--paper-dim); }
.cta-actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* functional contact form (emails hello@aqueductmedia.ca via FormSubmit) */
.contact-form{ max-width:580px; margin:0 auto; display:flex; flex-direction:column; gap:12px; text-align:left; }
.cf-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.cf-input{ width:100%; background:var(--ink-soft); border:1px solid var(--line); border-radius:12px;
  padding:14px 16px; color:var(--paper); font-family:var(--f-body); font-size:15px;
  transition:border-color .2s var(--ease), background .2s var(--ease); }
.cf-input::placeholder{ color:var(--grey); }
.cf-input:focus{ outline:none; border-color:var(--teal); background:var(--ink-lift); }
.cf-input:focus-visible{ outline:2px solid var(--teal-light); outline-offset:2px; }
.cf-text{ resize:vertical; min-height:120px; line-height:1.5; }
.cf-honey{ position:absolute !important; left:-9999px; width:1px; height:1px; opacity:0; }
.cf-send{ align-self:flex-start; margin-top:4px; border:none; cursor:pointer; }
.cf-send:disabled{ opacity:.55; cursor:default; transform:none; box-shadow:none; }
.cf-status{ font-family:var(--f-mono); font-size:12px; letter-spacing:.04em; color:var(--grey); margin:2px 0 0; min-height:1.1em; }
.cf-status.ok{ color:var(--teal-light); }
.cf-status.err{ color:var(--amber); }
.cta-direct{ margin-top:24px; font-family:var(--f-mono); font-size:13px; letter-spacing:.04em; color:var(--paper-dim); }
.cta-direct a{ color:var(--teal-light); }
.cta-direct a:hover{ text-decoration:underline; }
.cta-direct .sep{ color:var(--line); margin:0 9px; }
@media (max-width:560px){ .cf-row{ grid-template-columns:1fr; } }

/* =========================================================== FOOTER === */
.footer{ border-top:1px solid var(--line); padding:clamp(56px,7vw,84px) 0 36px; background:var(--ink-soft); }
.footer-in{ display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:40px; }
.footer-tag{ font-family:var(--f-serif); font-style:italic; font-size:19px; color:var(--paper-dim); margin:18px 0 0; max-width:30ch; }
.footer-col h4{ font-family:var(--f-label); font-weight:700; font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--teal); margin:0 0 16px; }
.footer-col a,.footer-col span{ display:block; font-size:14px; color:var(--paper-dim); margin-bottom:10px; transition:color .2s var(--ease); }
.footer-col a:hover{ color:var(--teal-light); }
.footer-col a:focus-visible{ outline:2px solid var(--teal-light); outline-offset:3px; border-radius:2px; }
.footer-bottom{ display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-top:48px; padding-top:24px; border-top:1px solid var(--line); font-family:var(--f-mono); font-size:11px; letter-spacing:.08em; color:var(--grey); }

/* ====================================================== REVEAL system == */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.cards .card.reveal{ transition-delay:.05s; }
.cards .card:nth-child(2).reveal{ transition-delay:0s; }     /* main lands first */
.cards .card:nth-child(1).reveal{ transition-delay:.12s; }
.cards .card:nth-child(3).reveal{ transition-delay:.18s; }
.flow-steps .step:nth-child(1){ transition-delay:0s; }
.flow-steps .step:nth-child(2){ transition-delay:.1s; }
.flow-steps .step:nth-child(3){ transition-delay:.2s; }
.flow-steps .step:nth-child(4){ transition-delay:.3s; }

/* ====================================================== RESPONSIVE ===== */
@media (max-width:1000px){
  .nav-links{ display:none; }
  .nav .btn-sm{ display:none; }
  .lang{ margin-left:auto; margin-right:6px; }
  .burger{ display:flex; }
  .cards{ grid-template-columns:1fr; }
  .card-main{ order:-1; }
  .work-grid{ grid-template-columns:1fr 1fr; }
  .proof{ grid-template-columns:1fr 1fr; }
  .studio-in{ grid-template-columns:1fr; }
  .flow-steps{ grid-template-columns:1fr 1fr; gap:36px 0; }
  .flow-steps::before,.flow-steps::after{ display:none; }
  .footer-in{ grid-template-columns:1fr 1fr; }
  .footer-brand{ grid-column:1 / -1; }
}
@media (max-width:620px){
  .work-grid{ grid-template-columns:1fr; }
  .proof{ grid-template-columns:1fr 1fr; }
  .flow-steps{ grid-template-columns:1fr; gap:30px; }
  .step,.step:first-child{ padding:0; }
  .footer-in{ grid-template-columns:1fr 1fr; }
  .hero{ padding-top:108px; }
  .hero-coords{ display:none; }
  .scroll-cue{ display:none; }
  /* SVG recedes behind centered type on small screens */
  .hero-structure{ opacity:.34; }
  .aq{ width:min(560px,112vw); height:72vh; }
}

/* ================================================ REDUCED MOTION ======= */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation:none !important; transition-duration:.001ms !important; }
  .reveal{ opacity:1 !important; transform:none !important; }
  .pier{ stroke-dashoffset:0 !important; }            /* show built structure */
  .sheen{ opacity:0 !important; }
  .poolfx{ opacity:.4 !important; }
  .card-chan{ transform:scaleY(1) !important; }
  .chan{ opacity:.5 !important; stroke-dasharray:none !important; }  /* static light columns, no motion */
  .flow-steps::after{ width:100% !important; }
  .divider .pulse{ display:none; }
  /* masked media: show one static frame instead of the crossfade reel */
  .medium{ opacity:0 !important; }
  .medium.m-video{ opacity:1 !important; }
  .reel-item.r-video{ color:#E8754A !important; }
}

/* paused when hero is off-screen / tab hidden (battery) */
.hero.paused .sheen,
.hero.paused .poolfx,
.hero.paused .chan,
.hero.paused .scroll-cue-line::after{ animation-play-state:paused; }