/* ---------- Tokens ---------- */
:root{
  --background:#ffffff; --foreground:#0e1430; --ink:#0c1330;
  --muted:#8a90a6; --line:#e4e7f0;
  --surface:#f2f4f9; --surface-2:#e3e7f1;
  --accent:#f7b523; --accent-from:#f9c548; --accent-to:#e89a12;
  --blue:#4366a6; --blue-from:#5179b7; --blue-to:#333d7c;
  --hero-from:#ecebe9; --hero-to:#c9c9c9;
  --radius-pill:9999px; --radius-card:2rem; --radius-card-sm:1.25rem; --radius-control:.875rem;
  --text-watermark:13rem; --container-shell:88rem;
  --e-out:cubic-bezier(.16,1,.3,1);
  --e-hdr:cubic-bezier(.22,1,.36,1);
  --e-cubic:cubic-bezier(.215,.61,.355,1);
  --e-quart:cubic-bezier(.165,.84,.44,1);
}

/* ---------- Reset / base ---------- */
*{ box-sizing:border-box; margin:0; padding:0 }
html{ font-size:16px; -webkit-font-smoothing:antialiased }
body{ background:#ffffff; color:var(--foreground); font-family:'Onest',sans-serif; overflow-x:hidden }
a{ color:inherit; text-decoration:none }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer }
ul{ list-style:none }
img{ display:block }
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }
@media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important } }

/* Adaptive rem grid */
@media (max-width:1920px){ html{ font-size:0.833333vw } }
@media (max-width:1440px){ html{ font-size:1.111111vw } }
@media (max-width:1024px){ html{ font-size:1.5625vw } }
@media (max-width:640px){  html{ font-size:4.444444vw } }

html.lenis, html.lenis body{ height:auto }
.lenis.lenis-smooth{ scroll-behavior:auto !important }

.shell{ max-width:var(--container-shell); margin-inline:auto }
.i{ width:1em; height:1em; flex-shrink:0; display:inline-block; vertical-align:middle }
.logo{ height:1em; width:1.6em; flex-shrink:0; display:inline-block; overflow:visible }
.ys{ color:var(--accent) }
span[data-h]{ display:inline-block }
[data-h]{ will-change:transform }
.topo{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none }
.topo path{ fill:none; stroke:#fff; stroke-width:1 }

/* ---------- Reveal primitives ---------- */
.rv{ opacity:0; transform:translate3d(0,var(--y,0px),0) scale(var(--s,1));
  transition:opacity var(--dur,.8s) var(--ease,var(--e-out)) var(--d,0ms), transform var(--dur,.8s) var(--ease,var(--e-out)) var(--d,0ms) }
.rv.in{ opacity:var(--o,1); transform:none }
[data-lines]{ visibility:hidden }
[data-lines].split, [data-lines].done{ visibility:visible }
.ln{ display:block; overflow:hidden; padding-bottom:.14em; margin-bottom:-.14em }
.lni{ display:block; transform:translate3d(0,100%,0); opacity:0; transition:transform .9s var(--e-cubic), opacity .9s var(--e-cubic) }
[data-lines].in .lni{ transform:none; opacity:1 }
[data-words] .wd{ display:inline-block; transform:translate3d(0,24px,0); opacity:0; transition:transform .7s var(--e-quart), opacity .7s var(--e-quart) }
[data-words].in .wd{ transform:none; opacity:1 }

.skip{ position:absolute; left:-9999px }
.skip:focus{ position:fixed; left:1rem; top:1rem; z-index:60; border-radius:.875rem; background:var(--ink); padding:.5rem 1rem; font-size:.875rem; color:#fff }

/* ---------- Shared components ---------- */
.eyebrow{ display:inline-flex; align-items:center; gap:.5rem; font-size:.875rem; font-weight:500; color:rgba(14,20,48,.7) }
.eyebrow::before{ content:""; width:.375rem; height:.375rem; border-radius:9999px; background:var(--accent) }
.eyebrow.light{ color:rgba(255,255,255,.75) }

.pill-btn{ display:inline-block }
.pb{ display:inline-flex; align-items:center; gap:.75rem; border-radius:9999px; font-size:.875rem; font-weight:500; padding:.875rem 1.75rem; white-space:nowrap }
.pb.arrow{ padding:.375rem .375rem .375rem 1.5rem }
.pb.dark{ background:var(--ink); color:#fff }
.pb.yellow{ background:var(--accent); color:var(--ink); font-weight:600 }
.pb.light{ background:#fff; color:var(--ink) }
.pb.outline{ border:1px solid var(--line); background:transparent; color:var(--ink) }
.pb.ghost{ border:1px solid rgba(255,255,255,.35); background:rgba(255,255,255,.06); color:#fff }
.pb-badge{ width:2.25rem; height:2.25rem; display:grid; place-items:center; border-radius:9999px; font-size:1rem; background:var(--ink); color:var(--accent) }
.pb.dark .pb-badge{ background:var(--accent); color:var(--ink) }
.pb-badge > span{ display:grid !important; place-items:center }
.tag{ display:inline-flex; border:1px solid rgba(255,255,255,.3); color:#fff; border-radius:9999px; padding:.375rem .75rem; font-size:.75rem; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); background:rgba(12,19,48,.2) }
.alink{ display:inline-flex }

/* ---------- Loader ---------- */
.loader{ position:fixed; inset:0; z-index:120; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2.5rem;
  background:linear-gradient(180deg,var(--blue-from),var(--blue-to)); color:#fff; border-radius:0 0 2rem 2rem; overflow:hidden;
  transition:transform .75s var(--e-hdr) }
.loader.exit{ transform:translate3d(0,-100%,0) }
.loader .topo{ opacity:.12 }
.loader-center{ position:relative; display:flex; flex-direction:column; align-items:center; gap:1.25rem; text-align:center; transition:opacity .6s var(--e-hdr), transform .6s var(--e-hdr) }
.loader.exit .loader-center{ opacity:0; transform:translate3d(0,-12px,0) }
.loader-logo{ width:9rem; height:auto; overflow:visible }
.loader-word{ font-size:1.875rem; font-weight:600; letter-spacing:-.01em }
.loader-tag{ font-size:.7rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.7) }
.loader-progress{ position:relative; width:min(22rem,72vw); display:flex; flex-direction:column; gap:.75rem }
.loader-track{ height:1px; background:rgba(255,255,255,.2) }
.loader-fill{ height:100%; width:0%; background:var(--accent); transition:width .1s ease-out }
.loader-row{ display:flex; justify-content:space-between; font-size:.75rem; font-weight:500; text-transform:uppercase; letter-spacing:.05em; color:rgba(255,255,255,.55) }
.loader-count{ font-variant-numeric:tabular-nums; color:#fff }

/* ---------- Header ---------- */
.header{ position:fixed; inset-inline:0; top:0; z-index:50; color:#fff; --y:-14px; --dur:.7s; --ease:var(--e-hdr); pointer-events:none }
.header-inner{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; padding:1.25rem; pointer-events:auto; border:1px solid transparent; border-radius:1.25rem;
  transition:background .45s var(--e-hdr), box-shadow .45s var(--e-hdr), padding .45s var(--e-hdr), margin .45s var(--e-hdr), border-color .45s, transform .5s var(--e-hdr) }
.header.scrolled .header-inner{ margin-top:.75rem; max-width:min(88rem, calc(100% - 1.5rem)); padding:.625rem .75rem .625rem 1.25rem;
  background:linear-gradient(135deg, rgba(81,121,183,.82), rgba(51,61,124,.88)); border-color:rgba(255,255,255,.14);
  -webkit-backdrop-filter:blur(16px) saturate(140%); backdrop-filter:blur(16px) saturate(140%); box-shadow:0 18px 40px -18px rgba(12,19,48,.55) }
.header.hidden .header-inner{ transform:translateY(-130%) }
.main-nav li{ position:relative }
.main-nav a > span, .main-nav button > span{ display:inline-flex !important; align-items:center; gap:.25rem }
.main-nav [aria-current] > span{ color:var(--accent) }
.caret{ font-size:.7rem; opacity:.6 }
.dropdown{ position:absolute; left:50%; top:calc(100% + .75rem); min-width:15rem; padding:.5rem; border-radius:1rem; background:#fff; color:var(--ink);
  box-shadow:0 24px 50px -20px rgba(12,19,48,.45), 0 0 0 1px rgba(14,20,48,.06); opacity:0; visibility:hidden; transform:translate(-50%,6px); transition:opacity .25s, transform .3s var(--e-out), visibility .25s }
.dropdown::before{ content:''; position:absolute; left:0; right:0; top:-.85rem; height:.85rem }
.main-nav li:hover .dropdown, .main-nav li:focus-within .dropdown{ opacity:1; visibility:visible; transform:translate(-50%,0) }
.dropdown a{ display:flex; flex-direction:column; gap:.125rem; padding:.625rem .75rem; border-radius:.75rem; transition:background .2s }
.dropdown a:hover{ background:var(--surface) }
.dropdown b{ font-size:.875rem; font-weight:600 }
.dropdown small{ font-size:.75rem; color:rgba(14,20,48,.55) }
.brand{ display:flex !important; align-items:center; gap:.625rem; font-size:1.125rem; font-weight:600; letter-spacing:-.01em }
.brand .logo{ font-size:1.5rem }
.main-nav{ display:none }
.main-nav ul{ display:flex; gap:2rem; font-size:.875rem; font-weight:500 }
.main-nav button[aria-current] > span{ color:var(--accent) }
.header-right{ display:flex; align-items:center; gap:.75rem }
.glass{ border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.08); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); border-radius:.875rem }
.clock-chip{ display:none; align-items:center; gap:.75rem; padding:.5rem .75rem; font-size:.75rem; color:rgba(255,255,255,.75); white-space:nowrap }
.clock-chip .lbl{ color:rgba(255,255,255,.55) }
.clock-chip .time{ min-width:3.5rem; font-variant-numeric:tabular-nums; font-weight:500; color:#fff }
.clock-chip .sep{ color:rgba(255,255,255,.35) }
.clock-chip .date{ font-weight:500 }
.menu-btn{ transition:background .2s }
.menu-btn:hover{ background:rgba(255,255,255,.18) }
.menu-btn > span{ display:flex !important; align-items:center; gap:.5rem; padding:.5rem 1rem; font-size:.75rem; font-weight:500; text-transform:uppercase; letter-spacing:.05em }
.menu-btn .i{ font-size:.875rem }
.menu-btn .word{ display:none }

/* ---------- Hero (light, centred founder cut-out) ---------- */
.hero{ position:relative; isolation:isolate; overflow:hidden; border-radius:0 0 2rem 2rem; color:#fff;
  background:linear-gradient(180deg,var(--blue-from) 0%,var(--blue) 45%,var(--blue-to) 100%) }
.hero .topo{ z-index:0; opacity:.14 }
.hero-vignette{ position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(42rem 42rem at 50% 45%, rgba(247,181,35,.2), rgba(247,181,35,0) 70%) }
.hero-mark{ pointer-events:none; position:absolute; inset-inline:0; bottom:6rem; z-index:1; text-align:center; user-select:none; -webkit-user-select:none;
  font-weight:700; line-height:1; font-size:4.5rem; letter-spacing:-.02em; color:rgba(255,255,255,.08); white-space:nowrap;
  --o:1; --y:20px; --dur:1.3s; --ease:cubic-bezier(.25,1,.5,1); --d:300ms }
.person{ position:absolute; z-index:2; left:50%; bottom:-1.25rem; transform:translateX(-50%); height:33rem; aspect-ratio:1969/2789; touch-action:pan-y }
.person-in{ position:absolute; inset:0; --y:40px; --dur:1.1s }
.person img, .person canvas{ position:absolute; inset:0; width:100%; height:100% }
.person img{ object-fit:contain }
/* soft depth behind him — a static gradient that fades out inside its own box, so it never shows a hard edge while the photo animates in */
.person::before{ content:''; position:absolute; left:-25%; right:-25%; top:8%; bottom:-10%; z-index:-1; pointer-events:none;
  background:radial-gradient(closest-side, rgba(12,19,48,.35), rgba(12,19,48,0)) }
.person canvas{ pointer-events:none }
.founder-chip{ position:absolute; z-index:4; right:-1rem; top:72%; display:flex; flex-direction:column; gap:.125rem; padding:.625rem .875rem; border-radius:1rem;
  background:rgba(12,19,48,.85); color:#fff; -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); box-shadow:0 12px 30px -12px rgba(12,19,48,.5); --y:12px }
.founder-chip b{ font-size:.875rem; font-weight:600 }
.founder-chip span{ font-size:.7rem; text-transform:uppercase; letter-spacing:.06em; color:var(--accent) }

.hero::after{ content:''; position:absolute; inset:auto 0 0 0; height:15%; z-index:3; pointer-events:none;
  background:linear-gradient(to top, rgba(51,61,124,.96) 0%, rgba(51,61,124,.6) 45%, rgba(51,61,124,0) 100%) }
.hero-grid{ position:relative; z-index:20; display:flex; flex-direction:column; gap:2rem; padding:7rem 1.25rem 30rem; pointer-events:none }
.hero-grid a, .hero-grid button, .hero-grid .hero-card, .hero-grid .shoots li{ pointer-events:auto }
.hero-left{ display:flex; flex-direction:column; align-items:flex-start; gap:1.5rem }
.hero-left > .rv{ --y:10px }
.hero-h1{ max-width:18ch; font-size:2.5rem; font-weight:600; line-height:.98; letter-spacing:-.025em }
.hero-h1 .hl{ color:var(--accent) }
.hero-sub{ max-width:24rem; font-size:1rem; line-height:1.55; color:rgba(255,255,255,.78) }
.rating{ display:flex; align-items:center; gap:.75rem }
.stars{ color:var(--accent); display:inline-flex; font-size:1rem }
.rating p{ font-size:.875rem; font-weight:500; color:rgba(255,255,255,.85) }
.cta-row{ display:flex; flex-wrap:wrap; gap:.75rem }
.hero-right{ display:none; flex-direction:column; align-items:flex-end; gap:2rem }
.shoots{ width:100%; --y:14px }
.shoots-lbl{ margin-bottom:.75rem; font-size:.75rem; font-weight:500; color:rgba(255,255,255,.6); text-align:right }
.shoots ul{ display:flex; flex-wrap:wrap; justify-content:flex-end; gap:.5rem }
.shoots li > span{ display:inline-flex !important; align-items:center; gap:.375rem; border-radius:9999px; padding:.375rem .75rem; font-size:.75rem;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); color:rgba(255,255,255,.88); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px) }
.shoots li .i{ font-size:.75rem; color:var(--accent) }

.lens-hint{ position:absolute; z-index:25; left:50%; top:40%; display:inline-flex; align-items:center; gap:.5rem; white-space:nowrap;
  padding:.375rem .75rem; font-size:.7rem; font-weight:500; text-transform:uppercase; letter-spacing:.06em; color:#fff; pointer-events:none;
  transition:opacity .5s ease; opacity:0 }
.lens-hint.show{ opacity:1 }
.lens-hint.hide{ opacity:0 !important }
.lens-hint .pulse{ width:.5rem; height:.5rem; border-radius:50%; background:var(--accent); box-shadow:0 0 0 0 rgba(247,181,35,.6); animation:pulse 1.8s infinite }
@keyframes pulse{ 0%{ box-shadow:0 0 0 0 rgba(247,181,35,.6) } 70%{ box-shadow:0 0 0 .6rem rgba(247,181,35,0) } 100%{ box-shadow:0 0 0 0 rgba(247,181,35,0) } }

.hero-card-wrap{ width:100%; max-width:21rem; --y:16px; --s:.96 }
.hero-card{ width:100%; border-radius:1.25rem; background:rgba(255,255,255,.92); padding:.5rem; color:var(--ink);
  box-shadow:0 1px 3px rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1),0 0 0 1px rgba(230,229,226,.7); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px) }
.hc-row{ display:flex; gap:.5rem; cursor:pointer; border-radius:.875rem }
.hc-tile{ aspect-ratio:1; width:5.5rem; flex-shrink:0; display:grid; place-items:center; border-radius:.875rem; background:linear-gradient(180deg,var(--blue-from),var(--blue-to)); font-size:1.75rem }
.hc-panel{ flex:1; border-radius:.875rem; background:rgba(241,240,238,.7); padding:.75rem; display:flex; flex-direction:column; justify-content:space-between; gap:.5rem }
.hc-slot{ position:relative; min-height:3.25rem; overflow:hidden }
.hc-item{ position:absolute; inset:0; transition:transform .55s var(--e-out), opacity .45s var(--e-out) }
.hc-cap{ font-size:.65rem; font-weight:500; text-transform:uppercase; letter-spacing:.05em; color:rgba(14,20,48,.5) }
.hc-title{ max-width:9rem; font-size:.875rem; font-weight:500; line-height:1.35 }
.hc-bottom{ display:flex; align-items:center; justify-content:space-between }
.hc-dots{ display:flex; gap:.25rem }
.hc-dots span{ height:.25rem; border-radius:9999px; width:.375rem; background:rgba(14,20,48,.2); transition:all .3s }
.hc-dots span.on{ width:1rem; background:var(--accent) }
.hc-nav{ display:flex; gap:.25rem }
.hc-nav button{ width:1.75rem; height:1.75rem; display:grid; place-items:center; border-radius:9999px; background:#fff; color:rgba(14,20,48,.7); box-shadow:0 0 0 1px var(--line); font-size:.875rem; transition:color .2s }
.hc-nav button:hover{ color:var(--ink) }
.hc-prev .i{ transform:rotate(180deg) }

.hero-status{ position:relative; z-index:20; display:flex; align-items:center; justify-content:space-between; gap:.75rem; border-top:1px solid rgba(255,255,255,.15);
  padding:1.25rem; font-size:.7rem; font-weight:500; text-transform:uppercase; letter-spacing:.04em; color:rgba(255,255,255,.7); white-space:nowrap; --d:900ms }
.hero-status .mid{ display:none }
.hero-status .scroll{ display:inline-flex; gap:.5rem }

/* ---------- About ---------- */
.about-inner{ display:grid; grid-template-columns:1fr; align-items:center; gap:3rem; padding:5rem 1.25rem }
.studio-block{ position:relative; min-height:16rem; display:flex; flex-direction:column; justify-content:space-between; align-items:flex-start; gap:2rem }
.studio-bg{ position:absolute; left:-1rem; top:50%; transform:translateY(-50%); width:20rem; opacity:.05; pointer-events:none; --logo-lens:#0e1430; --logo-c:#0e1430 }
.studio-block .eyebrow{ position:relative }
.founder-card{ position:relative; display:flex; align-items:center; gap:1rem; padding:.75rem 1.25rem .75rem .75rem; border-radius:1.25rem; background:var(--surface); --y:12px; max-width:26rem }
.founder-card img{ width:4rem; height:4rem; border-radius:50%; object-fit:cover; flex-shrink:0; box-shadow:0 0 0 3px #fff, 0 0 0 5px var(--accent) }
.founder-card q{ display:block; quotes:none; font-family:'IBM Plex Sans Arabic','Onest',sans-serif; font-weight:500; font-size:1rem; line-height:1.5; direction:rtl; text-align:right }
.founder-card .en{ display:block; margin-top:.125rem; font-size:.8rem; color:rgba(14,20,48,.55) }
.founder-card .who{ display:block; margin-top:.375rem; font-size:.75rem; font-weight:600; text-transform:uppercase; letter-spacing:.05em }
.statement{ display:flex; flex-direction:column; gap:2.5rem }
.statement h2{ font-size:1.5rem; font-weight:500; line-height:1.35; letter-spacing:-.01em }
.statement h2 .muted{ color:var(--muted) }
.about-foot{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:1.5rem; border-top:1px solid var(--line); padding-top:1.5rem; --y:12px; --d:200ms }
.about-foot .lbl{ font-size:.875rem; color:rgba(14,20,48,.5) }
.socials{ margin-top:.75rem; display:flex; gap:.5rem }
.social{ width:2.25rem; height:2.25rem; display:grid; place-items:center; border-radius:9999px; font-size:.95rem; background:var(--surface); color:rgba(14,20,48,.75) }
.social.main{ background:var(--accent); color:var(--ink) }
.social > span{ display:grid !important; place-items:center }

/* ---------- CreateBand ---------- */
.band{ display:flex; flex-direction:column; gap:.75rem; padding:2.5rem 1.25rem }
.band li{ flex:1; --y:28px }
.band li > span{ display:grid !important; place-items:center; width:100%; height:6rem; border-radius:9999px; font-size:1.875rem; font-weight:500 }
.tile-light{ background:var(--surface); color:var(--ink) }
.tile-accent{ background:linear-gradient(to bottom right,var(--accent-from),var(--accent-to)); color:var(--ink) }
.tile-dark{ background:linear-gradient(180deg,var(--blue-from),var(--blue-to)); color:var(--accent) }
.tile-dark .i{ font-size:2.25rem }
.tile-ghost{ background:rgba(242,244,249,.7); color:rgba(14,20,48,.35) }

/* ---------- Portfolio ---------- */
.works-inner{ padding:2.5rem 1.25rem 5rem }
.works-head{ display:flex; flex-direction:column; align-items:center; gap:1.25rem; margin-bottom:3rem; text-align:center }
.eyebrow.boxed{ border:1px solid var(--line); border-radius:9999px; padding:.375rem 1rem }
.works-head h2{ width:fit-content; font-size:2.25rem; font-weight:600; letter-spacing:-.02em }
.works-head p{ max-width:34rem; font-size:.95rem; color:rgba(14,20,48,.6); --y:10px; --d:200ms }
.cards{ display:grid; grid-template-columns:1fr; gap:1rem }
.cards > li{ --y:48px; --dur:.9s }
.pf-link{ display:block }
.pf-card{ position:relative; display:block; aspect-ratio:4/5; overflow:hidden; border-radius:1.5rem; background:var(--ink); color:#fff;
  box-shadow:0 0 0 1px rgba(14,20,48,.06) }
.pf-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform:scale(1.02); transition:transform 1s var(--e-out) }
.pf-link:hover .pf-img{ transform:scale(1.08) }
.pf-shade{ position:absolute; inset:0; background:linear-gradient(to top, rgba(12,19,48,.9) 0%, rgba(12,19,48,.35) 40%, rgba(12,19,48,0) 65%), linear-gradient(to bottom, rgba(12,19,48,.45), rgba(12,19,48,0) 25%) }
.pf-meta{ position:absolute; inset-inline:1.25rem; top:1.25rem; display:flex; justify-content:space-between; align-items:flex-start; font-size:.7rem; text-transform:uppercase; letter-spacing:.05em; color:rgba(255,255,255,.8) }
.pf-badge{ width:2.5rem; height:2.5rem; display:grid !important; place-items:center; border-radius:9999px; background:var(--accent); color:var(--ink); font-size:.95rem }
.pf-bottom{ position:absolute; inset-inline:1.25rem; bottom:1.25rem }
.pf-bottom h3{ font-size:1.375rem; font-weight:500; letter-spacing:-.01em }
.pf-tags{ margin-top:.75rem; display:flex; flex-wrap:wrap; gap:.375rem }
.works-cta{ margin-top:2.5rem; display:flex; justify-content:center; --y:12px }

/* ---------- Services ---------- */
.services-inner{ padding:5rem 1.25rem }
.services-inner h2{ margin:1.25rem 0 3rem; max-width:16ch; font-size:2.25rem; font-weight:600; letter-spacing:-.02em }
.svc-list > li{ border-top:1px solid var(--line); --y:24px }
.svc-list > li:first-child{ border-top:none }
.svc-link{ display:block }
.svc-row{ display:flex; align-items:center; gap:1rem; border-radius:1.25rem; padding:1.5rem; background:rgba(242,244,249,0) }
.svc-idx{ width:1.75rem; flex-shrink:0; font-size:.875rem; font-weight:500; color:rgba(14,20,48,.4) }
.svc-row h3{ flex:1; font-size:1.5rem; font-weight:500; letter-spacing:-.01em }
.svc-row p{ display:none; max-width:20rem; font-size:.875rem; color:rgba(14,20,48,.6) }
.svc-arrow{ width:2.5rem; height:2.5rem; flex-shrink:0; display:grid !important; place-items:center; border-radius:9999px; background:var(--ink); color:var(--accent); font-size:1rem }

/* ---------- Stats ---------- */
.stats-inner{ padding:0 1.25rem 5rem }
.stats-panel{ position:relative; overflow:hidden; isolation:isolate; border-radius:2rem; padding:3rem 1.5rem; color:#fff;
  background:linear-gradient(160deg,var(--blue-from),var(--blue-to)); --y:40px; --s:.99; --dur:.9s }
.stats-panel .topo{ z-index:-1; opacity:.12 }
.stats-panel h2{ margin-top:1rem; max-width:20ch; font-size:1.875rem; font-weight:500; letter-spacing:-.01em }
.stats-grid{ margin-top:3.5rem; display:grid; grid-template-columns:repeat(2,1fr); column-gap:2rem; row-gap:3rem }
.stats-grid > li{ --y:20px }
.stat-num{ font-size:3rem; font-weight:600; letter-spacing:-.02em; font-variant-numeric:tabular-nums; line-height:1.1 }
.stat-num .suf{ color:var(--accent) }
.stat-lbl{ margin-top:.75rem; font-size:.875rem; color:rgba(255,255,255,.7) }

/* ---------- Footer ---------- */
.footer{ position:relative; overflow:hidden; isolation:isolate; border-radius:2rem 2rem 0 0; color:#fff;
  background:linear-gradient(180deg,var(--blue-from) 0%,var(--blue) 45%,var(--blue-to) 100%) }
.footer .topo{ z-index:0; opacity:.12 }
.footer-inner{ position:relative; z-index:10; padding:5rem 1.25rem 2.5rem }
.f-cta{ display:flex; flex-direction:column; gap:2rem; border-bottom:1px solid rgba(255,255,255,.18); padding-bottom:4rem }
.f-cta h2{ max-width:16ch; font-size:2.25rem; font-weight:600; letter-spacing:-.02em }
.f-cols{ display:grid; grid-template-columns:1fr; gap:3rem; padding-block:4rem }
.f-brand{ display:flex; align-items:center; gap:.625rem; font-size:1.125rem; font-weight:600 }
.f-brand .logo{ font-size:1.5rem }
.f-tagline{ margin-top:1rem; max-width:20rem; font-size:.875rem; color:rgba(255,255,255,.75) }
.f-title{ margin-bottom:1.25rem; font-size:.75rem; text-transform:uppercase; letter-spacing:.04em; color:var(--accent) }
.f-links{ display:flex; flex-direction:column; gap:.75rem; font-size:.875rem }
.f-legal{ display:flex; flex-direction:column; align-items:center; justify-content:space-between; gap:1rem; border-top:1px solid rgba(255,255,255,.18); padding-top:2rem; font-size:.75rem; color:rgba(255,255,255,.7) }
.f-legal ul{ display:flex; gap:1.5rem }
.f-mark{ position:absolute; inset-inline:0; bottom:-1rem; z-index:0; text-align:center; pointer-events:none; user-select:none; -webkit-user-select:none;
  font-weight:700; line-height:1; font-size:4.5rem; letter-spacing:-.02em; color:rgba(255,255,255,.08); white-space:nowrap }

/* ---------- Nav overlay ---------- */
.navmenu{ position:fixed; inset:0; z-index:115; display:none; flex-direction:column; background:var(--ink); color:#fff; opacity:0; transition:opacity .45s var(--e-hdr) }
.navmenu.mounted{ display:flex }
.navmenu.open{ opacity:1 }
.nm-top{ width:100%; display:flex; align-items:center; justify-content:space-between; padding:1.25rem }
.nm-close{ display:inline-flex; align-items:center; gap:.5rem; border:1px solid rgba(255,255,255,.15); border-radius:.875rem; padding:.5rem 1rem;
  font-size:.75rem; font-weight:500; text-transform:uppercase; letter-spacing:.05em; color:rgba(255,255,255,.7); transition:border-color .2s,color .2s }
.nm-close:hover{ border-color:rgba(255,255,255,.4); color:#fff }
.nm-close .i{ font-size:.875rem }
.nm-nav{ width:100%; flex:1; display:flex; flex-direction:column; justify-content:center; padding-inline:1.25rem }
.nm-nav ul{ display:flex; flex-direction:column; gap:.25rem }
.nm-item{ width:100%; display:flex; align-items:baseline; gap:1rem; padding-block:.5rem; text-align:left; font-size:2.25rem; font-weight:600; letter-spacing:-.02em;
  transform:translateY(1rem); opacity:0; transition:all .5s ease-out }
.navmenu.open .nm-item{ transform:translateY(0); opacity:1 }
.nm-idx{ font-size:1rem; font-weight:400; letter-spacing:0; color:rgba(255,255,255,.3); transition:color .3s }
.nm-lbl{ color:rgba(255,255,255,.7); transition:color .3s }
.nm-item:hover .nm-idx{ color:var(--accent) }
.nm-item:hover .nm-lbl{ color:#fff }
.nm-bottom{ width:100%; display:flex; flex-direction:column; gap:.75rem; border-top:1px solid rgba(255,255,255,.1); padding:1.5rem 1.25rem;
  font-size:.75rem; text-transform:uppercase; letter-spacing:.04em; color:rgba(255,255,255,.45) }
.nm-start{ text-align:left; text-transform:uppercase; letter-spacing:.04em; color:var(--accent); transition:color .2s }
.nm-start:hover{ color:#fff; text-decoration:underline; text-underline-offset:4px }

/* ---------- Request modal ---------- */
.modal{ position:fixed; inset:0; z-index:110; display:none; align-items:flex-end; justify-content:center; padding:1rem;
  background:rgba(12,19,48,.35); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); opacity:0; transition:opacity .45s var(--e-hdr) }
.modal.mounted{ display:flex }
.modal.open{ opacity:1 }
.m-panel{ position:relative; width:100%; max-width:32rem; overflow:hidden; border-radius:2rem; background:#fff; padding:1.5rem;
  box-shadow:0 25px 50px -12px rgba(12,19,48,.35),0 0 0 1px var(--line); opacity:0; transform:translate3d(0,28px,0);
  transition:opacity .5s var(--e-hdr), transform .55s var(--e-hdr) }
.modal.open .m-panel{ opacity:1; transform:none }
.modal.closing .m-panel{ opacity:0; transform:translate3d(0,18px,0) }
.m-close{ position:absolute; right:1rem; top:1rem; width:2.25rem; height:2.25rem; display:grid; place-items:center; border-radius:9999px;
  background:var(--surface); color:rgba(14,20,48,.6); font-size:1rem; transition:background .2s,color .2s; z-index:1 }
.m-close:hover{ background:var(--surface-2); color:var(--ink) }
.m-head{ margin-bottom:1.5rem; display:flex; flex-direction:column; gap:.375rem }
.m-head h2{ font-size:1.5rem; font-weight:600; letter-spacing:-.01em; padding-right:2.5rem }
.m-form{ display:flex; flex-direction:column; gap:1rem }
.m-field{ display:flex; flex-direction:column; gap:.5rem }
.m-field > span{ font-size:.75rem; font-weight:500; text-transform:uppercase; letter-spacing:.03em; color:rgba(14,20,48,.5) }
.m-field input, .m-field textarea, .m-field select{ width:100%; border:1px solid var(--line); background:rgba(242,244,249,.6); border-radius:.875rem; padding:.75rem 1rem;
  font:inherit; font-size:.875rem; color:var(--ink); outline:none; transition:border-color .2s, background .2s }
.m-field textarea{ resize:none }
.m-field input:focus, .m-field textarea:focus, .m-field select:focus{ border-color:var(--blue); background:#fff }
.m-foot{ margin-top:.5rem; display:flex; align-items:center; justify-content:space-between; gap:1rem }
.m-foot p{ font-size:.75rem; color:rgba(14,20,48,.5) }
.m-foot p a{ color:var(--blue); font-weight:500 }
.m-success{ display:none; flex-direction:column; align-items:center; text-align:center; gap:1rem; padding-block:2rem }
.m-panel.sent .m-success{ display:flex }
.m-panel.sent .m-default{ display:none }
.m-success .badge{ width:4rem; height:4rem; display:grid; place-items:center; border-radius:9999px; background:linear-gradient(180deg,var(--blue-from),var(--blue-to)); font-size:1.5rem }
.m-success h2{ font-size:1.5rem; font-weight:600 }
.m-success p{ max-width:32ch; font-size:.875rem; color:rgba(14,20,48,.6) }

/* ---------- sm ≥ 640 ---------- */
@media (min-width:640px){
  .header-inner{ padding:1.5rem 2rem }
  .menu-btn .word{ display:inline }
  .hero-grid{ padding-inline:2rem }
  .hero-h1{ font-size:3.25rem }
  .person{ height:40rem; bottom:-1.5rem }
  .hero-grid{ padding-bottom:36rem }
  .hero-mark, .f-mark{ font-size:8rem }
  .hero-status{ padding-inline:2rem }
  .hero-status .mid{ display:inline }
  .about-inner{ padding-inline:2rem }
  .studio-bg{ width:26rem }
  .statement h2{ font-size:1.875rem }
  .band{ flex-direction:row; gap:1rem; padding-inline:2rem }
  .band li > span{ height:10rem; font-size:2.25rem }
  .tile-dark .i{ font-size:3rem }
  .works-inner{ padding-inline:2rem }
  .works-head h2{ font-size:3rem }
  .cards{ grid-template-columns:repeat(2,1fr) }
  .services-inner{ padding-inline:2rem }
  .services-inner h2{ margin-bottom:3.5rem; font-size:3rem }
  .svc-row{ gap:1.5rem; padding-block:2rem }
  .svc-idx{ width:2.5rem }
  .svc-row h3{ font-size:1.875rem }
  .svc-arrow{ width:3rem; height:3rem }
  .stats-inner{ padding-inline:2rem }
  .stats-panel{ padding:4rem 2rem }
  .stat-num{ font-size:3.75rem }
  .footer-inner{ padding-inline:2rem }
  .f-cta h2{ font-size:3rem }
  .f-legal{ flex-direction:row }
  .nm-top{ padding:1.5rem 2rem }
  .nm-nav{ padding-inline:2rem }
  .nm-item{ font-size:3.75rem }
  .nm-bottom{ flex-direction:row; justify-content:space-between; padding-inline:2rem }
  .modal{ align-items:center }
  .m-panel{ padding:2rem }
  .m-head h2{ font-size:1.875rem }
}
/* ---------- md ≥ 768 ---------- */
@media (min-width:768px){
  .clock-chip{ display:flex }
  .hero-h1{ font-size:3.75rem }
  .svc-row h3{ font-size:2.25rem }
  .stats-panel{ padding-inline:4rem }
  .stats-panel h2{ font-size:2.25rem }
  .stat-num{ font-size:4.5rem }
  .f-cta h2{ font-size:3.75rem }
  .f-cols{ grid-template-columns:repeat(2,1fr) }
}
/* ---------- lg ≥ 1024 ---------- */
@media (min-width:1024px){
  .main-nav{ display:flex }
  .hero-grid{ display:grid; align-items:center; min-height:100vh; min-height:100lvh; grid-template-columns:repeat(12,1fr); gap:2.5rem; padding:8rem 2rem 6rem }
  .hero-left{ grid-column:1 / span 4 }
  .hero-right{ display:flex; grid-column:10 / span 3 }
  .person{ left:54%; top:4.5rem; bottom:-1.5rem; height:auto }
  .hero-h1{ font-size:3.5rem }
  .hero-mark{ bottom:5rem }
  .hero-mark, .f-mark{ font-size:var(--text-watermark) }
  .about-inner{ grid-template-columns:1fr 1fr; padding-block:7rem }
  .studio-block{ min-height:22rem }
  .studio-bg{ left:-1.5rem; width:32rem }
  .works-inner{ padding-bottom:7rem }
  .cards{ grid-template-columns:repeat(4,1fr); gap:1.25rem }
  .services-inner{ padding-block:7rem }
  .svc-row p{ display:block }
  .stats-inner{ padding-bottom:7rem }
  .stats-grid{ grid-template-columns:repeat(4,1fr) }
  .footer-inner{ padding-top:6rem }
  .f-cta{ flex-direction:row; align-items:flex-end; justify-content:space-between }
  .f-cols{ grid-template-columns:1.4fr 1fr 1fr 1fr }
}

/* =========================================================
   Multi-page additions
   ========================================================= */
/* page transition: a blue circle grows from the click point, then shrinks back into it on the next page */
.veil{ position:fixed; inset:0; z-index:119; display:grid; place-items:center; pointer-events:none;
  background:linear-gradient(180deg,var(--blue-from),var(--blue-to));
  clip-path:circle(0% at var(--vx,50%) var(--vy,50%)); -webkit-clip-path:circle(0% at var(--vx,50%) var(--vy,50%));
  transition:clip-path .75s cubic-bezier(.76,0,.24,1), -webkit-clip-path .75s cubic-bezier(.76,0,.24,1) }
.veil .logo{ font-size:4rem; opacity:0; transform:scale(.6) rotate(-20deg); transition:opacity .35s ease, transform .6s var(--e-out) }
.veil.cover{ clip-path:circle(150% at var(--vx,50%) var(--vy,50%)); -webkit-clip-path:circle(150% at var(--vx,50%) var(--vy,50%)); pointer-events:auto }
.veil.cover .logo{ opacity:1; transform:none; transition-delay:.2s }
.veil.instant, .veil.instant .logo{ transition:none !important }
/* first-paint cover while arriving from another page (removed by site.js once the veil takes over) */
html.veil-in body::after{ content:''; position:fixed; inset:0; z-index:121; pointer-events:none;
  background:url(../logo.svg) center / 6.4rem 4rem no-repeat, linear-gradient(180deg,#5179b7,#333d7c) }
html.veil-in .loader{ display:none }

/* sub-page hero */
.page-hero{ position:relative; isolation:isolate; overflow:hidden; border-radius:0 0 2rem 2rem; color:#fff;
  background:linear-gradient(180deg,var(--blue-from) 0%,var(--blue) 45%,var(--blue-to) 100%) }
.page-hero .topo{ z-index:-1; opacity:.14 }
.page-hero .glow{ position:absolute; z-index:-1; width:40rem; height:40rem; right:-10rem; top:-12rem; border-radius:50%;
  background:radial-gradient(closest-side, rgba(247,181,35,.28), rgba(247,181,35,0)) }
.page-hero-inner{ position:relative; padding:9rem 1.25rem 4.5rem; display:flex; flex-direction:column; gap:1.5rem }
.page-hero h1{ max-width:16ch; font-size:2.75rem; font-weight:600; line-height:1; letter-spacing:-.025em }
.page-hero h1 .ys{ color:var(--accent) }
.page-hero .lead{ max-width:34rem; font-size:1.05rem; line-height:1.6; color:rgba(255,255,255,.8); --y:12px; --d:350ms }
.page-hero .crumbs{ display:flex; gap:.5rem; font-size:.75rem; text-transform:uppercase; letter-spacing:.06em; color:rgba(255,255,255,.6); --d:150ms }
.page-hero .crumbs a:hover{ color:#fff }
.page-mark{ position:absolute; right:-1rem; bottom:-1.5rem; z-index:-1; font-weight:700; line-height:1; font-size:7rem; letter-spacing:-.03em;
  color:rgba(255,255,255,.07); pointer-events:none; user-select:none; white-space:nowrap }

.section{ padding:5rem 1.25rem }
.section-head{ display:flex; flex-direction:column; gap:1.25rem; margin-bottom:3rem }
.section-head h2{ max-width:18ch; font-size:2.25rem; font-weight:600; letter-spacing:-.02em; line-height:1.05 }
.section-head p{ max-width:34rem; color:rgba(14,20,48,.6); --y:10px; --d:150ms }
.section-head.center{ align-items:center; text-align:center }

/* work filters + highlights */
.filters{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:2rem; --y:10px }
.filters button{ padding:.5rem 1rem; border-radius:9999px; font-size:.875rem; font-weight:500; border:1px solid var(--line); color:rgba(14,20,48,.7); transition:background .25s, color .25s, border-color .25s }
.filters button:hover{ border-color:var(--blue); color:var(--ink) }
.filters button[aria-pressed="true"]{ background:var(--ink); border-color:var(--ink); color:#fff }
.cards > li.is-hidden{ display:none }
.highlights{ display:flex; gap:1.5rem; overflow-x:auto; padding:.5rem .25rem 1rem; scrollbar-width:none }
.highlights::-webkit-scrollbar{ display:none }
.hl-item{ flex:0 0 auto; display:flex; flex-direction:column; align-items:center; gap:.75rem; width:7.5rem; --y:16px }
.hl-ring{ width:7rem; height:7rem; border-radius:50%; padding:.25rem; background:conic-gradient(from 200deg, var(--accent), var(--blue-from), var(--accent)); transition:transform .35s var(--e-out) }
.hl-item:hover .hl-ring{ transform:scale(1.06) rotate(-4deg) }
.hl-ring span{ display:block; width:100%; height:100%; border-radius:50%; overflow:hidden; border:.25rem solid #fff; background:linear-gradient(180deg,var(--blue-from),var(--blue-to)); display:grid; place-items:center; font-size:2.25rem }
.hl-ring img{ width:100%; height:100%; object-fit:cover }
.hl-item b{ font-size:.875rem; font-weight:500 }
.industries{ display:grid; grid-template-columns:repeat(2,1fr); gap:.75rem }
.industries li{ display:flex; align-items:center; gap:.75rem; padding:1rem 1.25rem; border-radius:1.25rem; background:var(--surface); font-weight:500; --y:14px }
.industries li .i{ color:var(--blue); font-size:1.125rem }

/* service detail rows */
.svc-detail{ display:grid; grid-template-columns:1fr; gap:2rem; align-items:center; padding-block:3rem; border-top:1px solid var(--line); scroll-margin-top:7rem }
.svc-detail:first-child{ border-top:none; padding-top:0 }
.svc-media{ position:relative; aspect-ratio:4/3; border-radius:1.75rem; overflow:hidden; background:var(--ink); --y:30px; --s:.98 }
.svc-media img{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--e-out) }
.svc-detail:hover .svc-media img{ transform:scale(1.05) }
.svc-media .num{ position:absolute; left:1.25rem; top:1.25rem; width:3rem; height:3rem; display:grid; place-items:center; border-radius:50%; background:var(--accent); color:var(--ink); font-weight:700 }
.svc-copy{ display:flex; flex-direction:column; gap:1.25rem }
.svc-copy h2{ font-size:2rem; font-weight:600; letter-spacing:-.02em; line-height:1.05 }
.svc-copy p{ color:rgba(14,20,48,.65); line-height:1.6; max-width:32rem }
.ticks{ display:grid; grid-template-columns:1fr; gap:.625rem; --y:12px }
.ticks li{ display:flex; align-items:flex-start; gap:.625rem; font-size:.95rem }
.ticks li .i{ flex-shrink:0; margin-top:.15rem; color:#fff; background:var(--blue); border-radius:50%; padding:.2rem; font-size:1.1rem }

/* process */
.process{ display:grid; grid-template-columns:1fr; gap:1rem }
.step{ position:relative; display:flex; flex-direction:column; gap:.75rem; padding:1.75rem; border-radius:1.5rem; background:var(--surface); overflow:hidden; --y:24px }
.step .n{ font-size:3rem; font-weight:700; line-height:1; color:var(--blue); letter-spacing:-.03em }
.step h3{ font-size:1.25rem; font-weight:600 }
.step p{ font-size:.9rem; color:rgba(14,20,48,.62); line-height:1.55 }
.step::after{ content:''; position:absolute; right:-2rem; bottom:-2rem; width:7rem; height:7rem; border-radius:50%; border:1.25rem solid rgba(247,181,35,.25) }

/* faq */
.faq{ display:flex; flex-direction:column; gap:.75rem; max-width:52rem }
.faq details{ border-radius:1.25rem; background:var(--surface); padding:0 1.5rem; --y:14px }
.faq summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.25rem 0; font-weight:500; font-size:1.05rem }
.faq summary::-webkit-details-marker{ display:none }
.faq summary .pm{ flex-shrink:0; width:2rem; height:2rem; border-radius:50%; display:grid; place-items:center; background:var(--ink); color:var(--accent); transition:transform .3s var(--e-out) }
.faq details[open] summary .pm{ transform:rotate(45deg) }
.faq details p{ padding-bottom:1.25rem; color:rgba(14,20,48,.65); line-height:1.6; max-width:44rem }

/* studio */
.founder-block{ display:grid; grid-template-columns:1fr; gap:2.5rem; align-items:center }
.founder-photo{ position:relative; aspect-ratio:4/5; border-radius:2rem; overflow:hidden; isolation:isolate;
  background:linear-gradient(180deg,var(--blue-from),var(--blue-to)); --y:30px }
.founder-photo .topo{ z-index:-1; opacity:.14 }
.founder-photo img{ position:absolute; left:50%; bottom:-6%; transform:translateX(-50%); height:108%; width:auto; max-width:none }
.founder-photo .tag-chip{ position:absolute; left:1.25rem; bottom:1.25rem; z-index:2; padding:.625rem .875rem; border-radius:1rem; background:rgba(12,19,48,.7); color:#fff;
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px) }
.founder-photo .tag-chip b{ display:block; font-size:.95rem }
.founder-photo .tag-chip span{ font-size:.7rem; text-transform:uppercase; letter-spacing:.06em; color:var(--accent) }
.founder-copy{ display:flex; flex-direction:column; gap:1.5rem }
.founder-copy h2{ font-size:2.25rem; font-weight:600; letter-spacing:-.02em; line-height:1.05 }
.founder-copy p{ color:rgba(14,20,48,.68); line-height:1.65 }
.founder-copy blockquote{ border-left:.25rem solid var(--accent); padding:.25rem 0 .25rem 1.25rem }
.founder-copy blockquote q{ display:block; quotes:none; font-family:'IBM Plex Sans Arabic','Onest',sans-serif; font-size:1.375rem; font-weight:500; direction:rtl; text-align:right }
.founder-copy blockquote span{ display:block; margin-top:.375rem; font-size:.875rem; color:rgba(14,20,48,.55) }
.link-row{ display:flex; flex-wrap:wrap; gap:.75rem }
.values{ display:grid; grid-template-columns:1fr; gap:1rem }
.value{ display:flex; flex-direction:column; gap:1rem; padding:2rem; border-radius:1.75rem; background:var(--ink); color:#fff; --y:24px }
.value:nth-child(2){ background:linear-gradient(160deg,var(--blue-from),var(--blue-to)) }
.value:nth-child(3){ background:linear-gradient(160deg,var(--accent-from),var(--accent-to)); color:var(--ink) }
.value .ic{ width:3rem; height:3rem; display:grid; place-items:center; border-radius:50%; background:rgba(255,255,255,.14); font-size:1.25rem }
.value h3{ font-size:1.375rem; font-weight:600 }
.value p{ font-size:.925rem; line-height:1.6; opacity:.82 }
.gallery{ display:grid; grid-template-columns:1fr; gap:1rem }
.gallery figure{ position:relative; border-radius:1.5rem; overflow:hidden; aspect-ratio:4/5; --y:30px }
.gallery img{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--e-out) }
.gallery figure:hover img{ transform:scale(1.06) }
.gallery figcaption{ position:absolute; left:1rem; bottom:1rem; padding:.375rem .75rem; border-radius:9999px; font-size:.75rem; background:rgba(12,19,48,.6); color:#fff; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px) }

/* careers */
.perks{ display:grid; grid-template-columns:1fr; gap:1rem }
.perk{ padding:1.75rem; border-radius:1.5rem; border:1px solid var(--line); display:flex; flex-direction:column; gap:.75rem; --y:20px }
.perk .ic{ width:2.75rem; height:2.75rem; display:grid; place-items:center; border-radius:.875rem; background:var(--accent); color:var(--ink); font-size:1.2rem }
.perk h3{ font-size:1.2rem; font-weight:600 }
.perk p{ font-size:.9rem; color:rgba(14,20,48,.62); line-height:1.55 }
.role-meta{ display:none; gap:.5rem }
.role-meta span{ padding:.25rem .625rem; border-radius:9999px; background:#fff; border:1px solid var(--line); font-size:.75rem; color:rgba(14,20,48,.65) }
.note-card{ margin-top:2.5rem; display:flex; flex-direction:column; gap:1.25rem; align-items:flex-start; padding:2rem; border-radius:1.75rem;
  background:linear-gradient(160deg,var(--blue-from),var(--blue-to)); color:#fff; --y:24px }
.note-card h3{ font-size:1.5rem; font-weight:600 }
.note-card p{ color:rgba(255,255,255,.8); max-width:34rem }

/* contact */
.contact-grid{ display:grid; grid-template-columns:1fr; gap:1.5rem; align-items:start }
.form-card{ position:relative; padding:1.5rem; border-radius:2rem; background:#fff; box-shadow:0 30px 60px -30px rgba(12,19,48,.35), 0 0 0 1px var(--line); --y:30px }
.form-card .m-success{ padding-block:3rem }
.form-card.sent .m-success{ display:flex }
.form-card.sent form, .form-card.sent .m-head{ display:none }
.info-list{ display:flex; flex-direction:column; gap:1rem }
.info{ display:flex; align-items:center; gap:1rem; padding:1.25rem; border-radius:1.5rem; background:var(--surface); transition:transform .3s var(--e-out), background .3s; --y:20px }
.info:hover{ transform:translateY(-3px); background:var(--surface-2) }
.info .ic{ width:3rem; height:3rem; flex-shrink:0; display:grid; place-items:center; border-radius:50%; background:var(--ink); color:var(--accent); font-size:1.2rem }
.info.main .ic{ background:var(--accent); color:var(--ink) }
.info b{ display:block; font-weight:600 }
.info span{ font-size:.85rem; color:rgba(14,20,48,.6) }
.info .go{ margin-left:auto; color:rgba(14,20,48,.45) }

@media (min-width:640px){
  .page-hero-inner{ padding:10rem 2rem 5rem }
  .page-hero h1{ font-size:4rem }
  .page-mark{ font-size:12rem }
  .section{ padding:6rem 2rem }
  .section-head h2{ font-size:3rem }
  .industries{ grid-template-columns:repeat(3,1fr) }
  .ticks{ grid-template-columns:1fr 1fr }
  .process{ grid-template-columns:repeat(2,1fr) }
  .gallery{ grid-template-columns:repeat(3,1fr) }
  .perks{ grid-template-columns:repeat(3,1fr) }
  .role-meta{ display:flex }
  .form-card{ padding:2.5rem }
}
@media (min-width:1024px){
  .page-hero-inner{ padding:12rem 2rem 6rem }
  .page-hero h1{ font-size:5rem }
  .page-mark{ font-size:var(--text-watermark) }
  .section{ padding-block:7rem }
  .svc-detail{ grid-template-columns:1fr 1fr; gap:4rem; padding-block:4rem }
  .svc-detail:nth-child(even) .svc-media{ order:2 }
  .svc-copy h2{ font-size:2.75rem }
  .process{ grid-template-columns:repeat(4,1fr) }
  .founder-block{ grid-template-columns:5fr 6fr; gap:5rem }
  .founder-copy h2{ font-size:3rem }
  .values{ grid-template-columns:repeat(3,1fr) }
  .contact-grid{ grid-template-columns:7fr 5fr; gap:2.5rem }
}

.info.wa .ic{ background:#25d366; color:#fff }

/* studio map */
.map-wrap{ position:relative; height:30rem; border-radius:2rem; overflow:hidden; isolation:isolate; background:#e8ebf3;
  box-shadow:0 30px 60px -30px rgba(12,19,48,.35), 0 0 0 1px var(--line); --y:30px }
.map{ position:absolute; inset:0; z-index:0 }
.map .leaflet-tile-pane{ filter:grayscale(.75) sepia(.12) hue-rotate(185deg) saturate(1.4) brightness(1.04) contrast(.95) }
.map iframe{ width:100%; height:100%; border:0; filter:grayscale(.4) }
.map-card{ position:absolute; z-index:500; left:1rem; right:1rem; bottom:1rem; display:flex; flex-wrap:wrap; align-items:center; gap:1rem;
  padding:1rem; border-radius:1.5rem; background:rgba(255,255,255,.94); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  box-shadow:0 20px 40px -20px rgba(12,19,48,.45) }
.map-tile{ width:3.5rem; height:3.5rem; flex-shrink:0; display:grid; place-items:center; border-radius:1rem; background:linear-gradient(180deg,var(--blue-from),var(--blue-to)); font-size:1.4rem }
.map-info{ flex:1; min-width:10rem; display:flex; flex-direction:column; gap:.125rem }
.map-info b{ font-size:1rem; font-weight:600 }
.map-info span{ font-size:.875rem; color:rgba(14,20,48,.65) }
.map-info small{ font-size:.72rem; color:rgba(14,20,48,.45); font-variant-numeric:tabular-nums }
.map-actions{ display:flex; align-items:center; gap:.5rem }
.map-wa{ width:3rem; height:3rem; display:grid; place-items:center; border-radius:50%; background:#25d366; color:#fff; font-size:1.25rem; transition:transform .3s var(--e-out) }
.map-wa:hover{ transform:scale(1.08) }
.map-open{ position:absolute; z-index:500; right:1rem; top:1rem; display:inline-flex; align-items:center; gap:.375rem; padding:.5rem .875rem; border-radius:9999px;
  background:rgba(255,255,255,.94); font-size:.75rem; font-weight:500; box-shadow:0 8px 20px -10px rgba(12,19,48,.4) }
.map-hint{ position:absolute; z-index:450; left:50%; top:1rem; transform:translateX(-50%); padding:.375rem .75rem; border-radius:9999px; background:rgba(12,19,48,.7); color:#fff;
  font-size:.7rem; pointer-events:none; opacity:0; transition:opacity .3s }
.map-wrap:hover .map-hint{ opacity:1 }
.map-wrap.zoom-on .map-hint{ opacity:0 }
.cs-pin{ position:relative; width:56px; height:56px }
.cs-pin .dot{ position:absolute; inset:0; border-radius:50% 50% 50% 0; transform:rotate(-45deg); background:linear-gradient(135deg,var(--blue-from),var(--blue-to));
  border:3px solid #fff; box-shadow:0 10px 24px -6px rgba(12,19,48,.6); display:grid; place-items:center }
.cs-pin .dot svg{ transform:rotate(45deg); width:30px; height:19px }
.cs-pin::before{ content:''; position:absolute; left:50%; bottom:-6px; width:18px; height:18px; margin-left:-9px; border-radius:50%; background:rgba(247,181,35,.55); animation:pinPulse 2s infinite }
@keyframes pinPulse{ 0%{ transform:scale(.6); opacity:1 } 100%{ transform:scale(3.2); opacity:0 } }
.leaflet-control-attribution{ font-size:10px }
@media (min-width:640px){
  .map-card{ right:auto; max-width:30rem; left:1.5rem; bottom:1.5rem; padding:1rem 1rem 1rem 1rem }
  .map-open{ right:1.5rem; top:1.5rem }
}
@media (min-width:1024px){ .map-wrap{ height:36rem } }

/* motion for white sections ------------------------------------------------ */
/* 5 · magnetic dot grid: a canvas behind the content that reacts to the cursor */
.has-dots{ position:relative; isolation:isolate }
.dots{ position:absolute; inset:0; width:100%; height:100%; display:block; z-index:-1; pointer-events:none;   /* explicit size: a canvas does not stretch with inset alone */
  -webkit-mask-image:radial-gradient(ellipse 75% 70% at 50% 50%, #000 45%, transparent 100%);
          mask-image:radial-gradient(ellipse 75% 70% at 50% 50%, #000 45%, transparent 100%) }

/* 6 · giant outline words that slide sideways with the scroll */
.outline-band{ position:relative; overflow:hidden; padding:1.5rem 0 2.5rem; background:#fff; user-select:none; -webkit-user-select:none }
.ow-row{ display:flex; width:max-content; white-space:nowrap; font-weight:700; font-size:4.5rem; line-height:1.08; letter-spacing:-.03em; text-transform:uppercase;
  color:transparent; -webkit-text-stroke:1.5px var(--blue); will-change:transform; backface-visibility:hidden; transform:translate3d(0,0,0) }
.outline-band{ contain:layout paint }
.ow-row + .ow-row{ -webkit-text-stroke-color:var(--accent-to) }
.ow-row .f{ color:var(--blue-to); -webkit-text-stroke:0 }
.ow-row + .ow-row .f{ color:var(--accent) }
.ow-row .dot{ display:inline-block; width:.22em; height:.22em; margin:0 .35em; border-radius:50%; background:var(--accent); vertical-align:middle; -webkit-text-stroke:0 }
.ow-row + .ow-row .dot{ background:var(--blue) }
@media (min-width:640px){ .ow-row{ font-size:7rem } }
@media (min-width:1024px){ .ow-row{ font-size:10rem; -webkit-text-stroke-width:2px } .outline-band{ padding:2rem 0 3.5rem } }