/* ============================================================
   Bread Butter Jamm — style.css  (v2)
   Palette: navy #27477C · blue #32A4F9 · deep #004B83
            lime #C9F660 · ice #BED8EC · ink #222 · dark #050b1a
   Type: Poppins (display) · Inter (footer/ui)
   ============================================================ */

:root {
  --navy: #27477c;
  --blue: #32a4f9;
  --deep: #004b83;
  --lime: #c9f660;
  --ice: #bed8ec;
  --ink: #222222;
  --dark: #050b1a;
  --dark-2: #0a1428;
  --white: #ffffff;
  --nav-h: 99px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scrollbar-width: thin; scrollbar-color: rgba(50,164,249,.6) #050b1a; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
  font-family: 'Poppins', sans-serif;
  background: var(--dark);
  color: var(--white);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--blue); color: #fff; }

/* ---------- grain overlay ---------- */
/* subtle STATIC grain (no animation = no flicker; SVG = resolution-independent, never pixelates) */
.grain {
  position: fixed; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 200; opacity: .035;
  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='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

/* ---------- loader ---------- */
.loader {
  position: fixed; inset: 0; z-index: 1000; background: var(--navy);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px;
}
.loader-title {
  font-size: clamp(34px, 4.6vw, 88px); font-weight: 700; letter-spacing: -0.02em;
  display: flex; gap: 0.35em; overflow: hidden;
}
.loader-title .lw { display: inline-block; transform: translateY(120%); }
.loader-line { width: min(420px, 60vw); height: 2px; background: rgba(255,255,255,.15); position: relative; overflow: hidden; }
.loader-line::after {
  content: ""; position: absolute; inset: 0; background: var(--blue);
  transform: scaleX(0); transform-origin: left; transition: transform 1.6s var(--ease-out);
}
.loader.is-loading .loader-line::after { transform: scaleX(1); }

/* ---------- nav ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; height: var(--nav-h); z-index: 500;
  background: var(--navy);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 clamp(20px, 12.2vw, 235px);
  transition: transform .5s var(--ease-out), box-shadow .5s;
}
.nav.is-hidden { transform: translateY(-100%); }
.nav.is-scrolled { box-shadow: 0 10px 40px rgba(0,0,0,.35); }
.nav-logo img { height: 55px; width: auto; }
.nav-links { display: flex; gap: 30px; list-style: none; align-items: center; }
.nav-links a { font-size: 15px; font-weight: 400; color: #fff; position: relative; padding-bottom: 6px; }
.nav-links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--blue);
  transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease-out);
}
.nav-links a:hover::after { transform: scaleX(1); }
.nav-links a.active { color: var(--blue); }
.nav-links a.active::after { transform: scaleX(1); }
.nav-burger { display: none; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: 8px; }
.nav-burger span { width: 26px; height: 2px; background: #fff; transition: transform .35s var(--ease-out), opacity .3s; }
.nav.open .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav.open .nav-burger span:nth-child(2) { opacity: 0; }
.nav.open .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- dot nav ---------- */
.dots { position: fixed; right: 26px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 14px; z-index: 400; }
.dots a { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.25); transition: background .3s, transform .3s; }
.dots a.active { background: var(--blue); transform: scale(1.5); }

/* ---------- worlds (section backgrounds) ---------- */
/* smooth crisp gradients (no raster = never pixelated); grid + grain add texture */
.blue-world {
  position: relative;
  background:
    radial-gradient(78% 55% at 22% 9%, rgba(8,115,186,.55), transparent 62%),
    radial-gradient(70% 50% at 85% 26%, rgba(20,95,155,.45), transparent 60%),
    linear-gradient(180deg, #1b4f86 0%, #123a6b 26%, #0c2547 52%, #08203e 75%, var(--dark) 100%);
}
.dark-world {
  position: relative;
  background:
    radial-gradient(90% 50% at 80% 8%, rgba(50,164,249,.12), transparent 55%),
    radial-gradient(70% 40% at 12% 38%, rgba(0,75,131,.16), transparent 60%),
    linear-gradient(180deg, #05101f 0%, var(--dark) 50%, #04101e 100%);
}
.blue-world > *, .dark-world > * { position: relative; z-index: 1; }
/* square-design grid (matches Figma: ~59px squares, #0D5F91 lines) */
.blue-world::after, .dark-world::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(13, 95, 145, 0.32) 1px, transparent 1px),
    linear-gradient(90deg, rgba(13, 95, 145, 0.32) 1px, transparent 1px);
  background-size: 59.3px 59.3px;
}
.dark-world::after {
  background-image:
    linear-gradient(rgba(50, 164, 249, 0.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(50, 164, 249, 0.10) 1px, transparent 1px);
  -webkit-mask-image: radial-gradient(120% 80% at 50% 30%, #000 35%, transparent 85%);
          mask-image: radial-gradient(120% 80% at 50% 30%, #000 35%, transparent 85%);
}

.puzzle-bg { position: absolute; left: 0; right: 0; opacity: .22; pointer-events: none; z-index: 0; }
.puzzle-bg img { width: 100%; height: auto; }

/* ---------- torn paper transitions (flush, no gap) ---------- */
.torn { position: relative; z-index: 8; width: 100%; line-height: 0; pointer-events: none; }
.torn img { width: 100%; height: auto; display: block; }
.torn.flip img { transform: scaleY(-1); }
/* bridges previous section into the next without a dead band */
.torn-bridge { position: relative; z-index: 8; margin-top: -8%; margin-bottom: -1px; pointer-events: none; line-height: 0; }
.torn-bridge img { width: 100%; height: auto; display: block; }

.container { width: min(1710px, 89vw); margin: 0 auto; }
h1, h2, h3 { font-weight: 700; line-height: 1.45; }
.eyebrow-underline { display: block; width: 221px; height: 24px; margin: 6px auto 0; background: url("../assets/scribble-underline.png") center bottom / contain no-repeat; }

/* ============================================================
   HOME — hero
   ============================================================ */
.hero { position: relative; padding-top: var(--nav-h); background: var(--navy); }
/* banner (video or image) shows full width at its natural aspect — never cropped */
.hero-banner { position: relative; overflow: hidden; font-size: 0; line-height: 0; }
.hero-banner .hero-media { width: 100%; height: auto; display: block; }
/* torn edge as an OVERLAY at the blue-world top — blue sits flush under the video
   (no dead gap / black patch); the white tear straddles the seam, full-bleed */
.torn-top { position: absolute; top: 0; left: 0; width: 100%; transform: translateY(-50%); z-index: 8; pointer-events: none; line-height: 0; }
.torn-top img { width: 100%; height: auto; display: block; }
/* clean in-flow paper-cutout separator: occupies its own band between sections,
   overlaps NOTHING (video ends clean, tear sits on the next section's background) */
.torn-sep { position: relative; width: 100%; line-height: 0; pointer-events: none; z-index: 2; }
.torn-sep img { width: 100%; height: auto; display: block; }

/* ---------- curate ---------- */
.curate { padding: clamp(70px, 9vw, 170px) 0 clamp(30px, 3vw, 60px); text-align: center; }
.curate h2 { font-size: clamp(30px, 3.02vw, 58px); font-weight: 600; line-height: 1.5; }
.curate h3 { font-size: clamp(22px, 2.08vw, 40px); margin-top: clamp(20px, 2.2vw, 42px); line-height: 1.6; }
.curate .sub { font-weight: 400; font-size: clamp(15px, 1.25vw, 24px); line-height: 1.62; max-width: 680px; margin: clamp(18px, 2vw, 36px) auto 0; color: rgba(255,255,255,.92); }
.assemble .aw { display: inline-block; white-space: pre; will-change: transform, opacity; }

/* ---------- ecosystem / portfolio cards ---------- */
.eco-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 474px));
  gap: clamp(28px, 4vw, 79px); justify-content: center;
  padding: clamp(40px, 4.5vw, 90px) 0 clamp(80px, 9vw, 170px);
}
.eco-card {
  position: relative; display: block; overflow: hidden;
  height: clamp(380px, 29.8vw, 572px);
  border-radius: 26px;
  background: linear-gradient(180deg, var(--blue) 0%, var(--deep) 100%);
  box-shadow: 0 24px 60px rgba(0, 10, 30, .35);
  will-change: transform; isolation: isolate;
  transition: box-shadow .55s var(--ease-out);
}
/* white surface revealed on hover — sits under label, over gradient, behind photo */
.eco-card::before {
  content: ""; position: absolute; inset: 0; background: #fff; z-index: 1;
  opacity: 0; transition: opacity .5s var(--ease-out);
}
/* hover: white wash + deeper shadow (transform stays free for the scroll animation) */
.eco-card:hover { box-shadow: 0 40px 90px rgba(0, 12, 34, .5); }
.eco-card:hover::before { opacity: 1; }
.eco-card .eco-label {
  position: absolute; top: clamp(28px, 2.85vw, 54px); left: 0; right: 0; text-align: center; z-index: 3;
  font-size: clamp(19px, 1.46vw, 28px); font-weight: 500; letter-spacing: .02em; color: #fff;
  transition: color .45s var(--ease-out);
}
.eco-card:hover .eco-label { color: var(--navy); }
.eco-card .eco-num { position: absolute; top: clamp(14px, 1.4vw, 26px); right: clamp(18px, 1.7vw, 32px); font-size: clamp(12px, .83vw, 16px); font-weight: 600; color: rgba(255,255,255,.55); z-index: 3; letter-spacing: .1em; transition: color .45s; }
.eco-card:hover .eco-num { color: rgba(39,71,124,.5); }
.eco-card .eco-arrow {
  position: absolute; bottom: clamp(16px,1.6vw,28px); right: clamp(18px,1.7vw,30px); z-index: 4;
  width: 44px; height: 44px; border-radius: 50%; background: var(--lime); color: var(--ink);
  display: grid; place-items: center; font-size: 20px;
  opacity: 0; transform: translateY(10px) scale(.8); transition: all .45s var(--ease-out);
}
.eco-card:hover .eco-arrow { opacity: 1; transform: translateY(0) scale(1); }
/* v2 card art — cutouts positioned per Figma masks (percent of 474.917x572 card),
   clipped by the card's rounded rect; sits above the hover white wash.
   Each spot holds a B&W and a color variant — hover crossfades to color. */
.eco-card .eco-photos { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.eco-card .eco-photos img { position: absolute; height: auto; filter: drop-shadow(0 14px 22px rgba(0,0,0,.35)); transition: opacity .5s var(--ease-out); }
.eco-card .eco-photos img.clr { opacity: 0; }
.eco-card:hover .eco-photos img.clr { opacity: 1; }
.eco-card:hover .eco-photos img.bw { opacity: 0; }
.ep-c1a { left: 0.2%;   top: 20.8%; width: 110%;   transform: rotate(0.89deg); }
.ep-c1b { left: 33.1%;  top: 38.5%; width: 70.8%; }
.ep-c2a { left: -12.4%; top: 20.1%; width: 166%; }
.ep-c3a { left: -4%;    top: 28.1%; width: 111.8%; }
.ep-c4a { left: -57.4%; top: 20.9%; width: 162.3%; }
.ep-c4b { left: -1.7%;  top: 38.9%; width: 113.2%; }

/* ---------- WORK — reference-style stacking panels ---------- */
.work { position: relative; z-index: 2; }
.work-intro { text-align: center; padding: clamp(40px,5vw,90px) 0 clamp(20px,2vw,40px); }
.work-intro h2 { font-size: clamp(30px, 3.02vw, 58px); font-weight: 600; line-height: 1.5; }
.work-stack { position: relative; }
.work-panel {
  position: sticky; top: var(--nav-h);
  min-height: calc(100vh - var(--nav-h));
  display: flex; align-items: center;
  background: #fff; color: var(--ink);
  box-shadow: 0 -24px 60px rgba(0, 8, 24, .45);
}
.work-panel .work-torn { position: absolute; top: 0; left: 0; width: 100%; transform: translateY(-46%); z-index: 3; pointer-events: none; line-height: 0; }
.work-panel .work-torn img { width: 100%; height: auto; display: block; }
.work-inner { width: min(1710px, 89vw); margin: 0 auto; padding: clamp(50px,7vh,110px) 0; width: min(1710px,89vw); }
.work-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
.work-title { font-size: clamp(44px, 7.4vw, 150px); font-weight: 700; line-height: 0.9; letter-spacing: -0.02em; max-width: 11ch; }
.work-num { font-size: clamp(58px, 9vw, 168px); font-weight: 700; line-height: 0.78; color: rgba(39,71,124,.14); flex: 0 0 auto; }
.work-bottom {
  display: grid; grid-template-columns: 0.55fr 1fr 1.15fr; gap: clamp(18px,2.2vw,46px);
  margin-top: clamp(36px,5vh,72px); padding-top: clamp(22px,2.6vw,38px);
  border-top: 1px solid rgba(0,0,0,.16); align-items: start;
}
.work-bottom .lbl { font-weight: 600; font-size: clamp(15px,1.1vw,19px); color: var(--navy); }
.work-bottom .copy p { color: rgba(20,20,20,.72); font-size: clamp(14px,1.05vw,18px); line-height: 1.55; margin-bottom: 14px; }
.work-bottom .copy .cta { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; color: var(--navy); font-weight: 600; }
.work-bottom .copy .cta .arr { transition: transform .35s var(--ease-out); }
.work-panel:hover .work-bottom .copy .cta .arr { transform: translate(4px,-4px); }
.work-shot { border-radius: 14px; overflow: hidden; aspect-ratio: 16/10; box-shadow: 0 24px 50px rgba(0,0,0,.25); }
.work-shot img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out); }
.work-panel:hover .work-shot img { transform: scale(1.05); }
@media (max-width: 768px) {
  .work-panel { position: relative; top: 0; min-height: 0; padding: 0; }
  .work-inner { padding: 60px 0; }
  .work-top { flex-direction: column; }
  .work-num { font-size: 64px; }
  .work-bottom { grid-template-columns: 1fr; gap: 18px; }
}

/* ---------- brands marquee ---------- */
.brands { padding: clamp(60px, 6vw, 120px) 0; text-align: center; overflow: hidden; }
.brands h3 { font-size: clamp(22px, 2.08vw, 40px); line-height: 1.6; }
.marquee { margin-top: clamp(36px, 4vw, 76px); display: flex; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { display: flex; gap: 23px; padding-right: 23px; flex-shrink: 0; width: max-content; animation: marquee 45s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
/* track holds the pill set twice, so -50% lands on an identical frame — gapless loop */
@keyframes marquee { to { transform: translateX(-50%); } }
.brand-pill { width: 226px; height: 92px; flex: 0 0 auto; background: #fff; border-radius: 12px; display: flex; align-items: center; justify-content: center; padding: 14px 26px; transition: transform .35s var(--ease-out); }
.brand-pill:hover { transform: translateY(-6px); }
.brand-pill img { max-height: 64px; width: auto; max-width: 100%; object-fit: contain; }
/* SPF and Muthoot SVGs stretch to 100% by default — size from their viewBox ratios */
.brand-pill.spf img { width: 100px; height: 56px; flex: 0 0 auto; max-width: none; }     /* 131.7 x 73.3 */
.brand-pill.muthoot img { width: 129px; height: 50px; flex: 0 0 auto; max-width: none; } /* 174.9 x 67.5 */
.brand-pill.wide img { max-height: 46px; }
/* square marks read small against wide wordmarks — give them the full pill height */
.brand-pill.square { padding: 4px 18px; }
.brand-pill.square img { max-height: 84px; }

/* ---------- movements ---------- */
.movements { padding: clamp(70px, 7vw, 130px) 0 clamp(60px,7vw,120px); text-align: center; position: relative; }
.movements h2 { font-size: clamp(30px, 3.02vw, 58px); line-height: 1.5; }
.btn-lime { display: inline-block; margin-top: clamp(20px, 2.2vw, 40px); background: var(--lime); color: var(--ink); font-family: 'Inter', sans-serif; font-weight: 600; font-size: clamp(16px, 1.1vw, 21px); padding: 14px 46px; border-radius: 45px; transition: transform .35s var(--ease-out), box-shadow .35s; }
.btn-lime:hover { transform: translateY(-3px) scale(1.03); box-shadow: 0 14px 34px rgba(201,246,96,.25); }
/* collage — exact Figma geometry (1920x641 band, % positions, aspect-locked boxes) */
.collage { position: relative; width: 100%; aspect-ratio: 1920 / 641; margin-top: clamp(34px, 4vw, 70px); }
.collage-item { position: absolute; will-change: transform; }
.collage-item img { width: 100%; height: 100%; object-fit: cover; display: block; filter: drop-shadow(0 22px 38px rgba(0,0,0,.45)); }
.c8  { left: 11.15%; top: 0;      width: 23.96%; aspect-ratio: 460/622;     z-index: 1; }
.c5  { left: 19.90%; top: 25.74%; width: 47.76%; aspect-ratio: 917/476;     z-index: 2; }
.c7  { left: 52.29%; top: 2.03%;  width: 20.29%; aspect-ratio: 389.5/569.5; z-index: 3; }
.c3  { left: 61.15%; top: 9.83%;  width: 35.57%; aspect-ratio: 683/578;     z-index: 4; }
.c9  { left: 90.73%; top: 7.33%;  width: 7.08%;  aspect-ratio: 136/536;     z-index: 5; }
.c6  { left: 0.94%;  top: 31.36%; width: 17.76%; aspect-ratio: 341/421;     z-index: 6; }
.c10 { left: 16.67%; top: 43.99%; width: 8.59%;  aspect-ratio: 165/359;     z-index: 7; }

/* ============================================================
   FOOTER (shared)
   ============================================================ */
.footer { position: relative; overflow: hidden; background: url("../assets/bg-footer.png") center bottom / cover no-repeat, #03091a; padding: clamp(70px, 7vw, 130px) 0 40px; }
/* v2 giant faint "Jamm" watermark behind footer content */
.footer::before {
  content: "Jamm."; position: absolute; left: -2%; bottom: -0.18em;
  font-family: 'Poppins', sans-serif; font-weight: 700; line-height: 1;
  font-size: clamp(160px, 26vw, 500px); letter-spacing: -0.02em;
  color: rgba(255,255,255,.035); -webkit-text-stroke: 1px rgba(255,255,255,.05);
  pointer-events: none; z-index: 0; white-space: nowrap;
}
.footer > .container { position: relative; z-index: 1; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: clamp(24px, 3vw, 60px); align-items: start; position: relative; z-index: 2; }
.footer-wordmark { font-weight: 700; line-height: .95; letter-spacing: -0.03em; font-size: clamp(44px, 4.7vw, 90px); color: #fff; }
.footer-wordmark .plus { color: var(--blue); }
.footer h4 { font-family: 'Inter', sans-serif; font-weight: 500; font-size: clamp(18px, 1.46vw, 28px); letter-spacing: -0.04em; margin-bottom: clamp(16px, 1.8vw, 34px); }
.footer ul { list-style: none; }
.footer ul li { margin-bottom: clamp(10px, 1.2vw, 22px); }
.footer ul a { font-family: 'Inter', sans-serif; font-weight: 400; font-size: clamp(14px, 1.04vw, 20px); letter-spacing: -0.04em; color: rgba(255,255,255,.85); transition: color .3s, padding-left .3s; }
.footer ul a:hover { color: var(--blue); padding-left: 6px; }
.footer-divider { height: 1px; background: rgba(255,255,255,.35); margin: clamp(40px, 4vw, 70px) 0 clamp(20px, 2.4vw, 40px); transform-origin: left; }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 18px; font-family: 'Inter', sans-serif; font-size: clamp(14px, 1.46vw, 28px); letter-spacing: -0.04em; }
.footer-bottom .legal { display: flex; gap: clamp(20px, 3vw, 60px); opacity: .5; }
.footer-bottom .legal a:hover { opacity: 1; }
.socials { display: flex; gap: 22px; margin-top: clamp(20px, 2.4vw, 44px); }
.socials img { width: 34px; height: 34px; filter: brightness(0) invert(1); opacity: .85; transition: opacity .3s, transform .3s; }
.socials a:hover img { opacity: 1; transform: translateY(-3px); }

/* ============================================================
   TEAM PAGE
   ============================================================ */
.team-hero { padding: calc(var(--nav-h) + clamp(60px, 7vw, 138px)) 0 clamp(30px, 4vw, 60px); }
.team-hero h1 { font-size: clamp(40px, 5.63vw, 108px); font-weight: 600; line-height: 0.95; letter-spacing: -0.01em; }
.team-hero h1 b { font-weight: 700; }

.founder { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(30px, 5vw, 100px); align-items: center; padding: clamp(50px, 5.5vw, 105px) 0; }
.founder.reverse { grid-template-columns: 1fr 1.05fr; }
.founder.reverse .founder-copy { order: 2; text-align: right; }
.founder.reverse .founder-photo { order: 1; }
.founder-copy p { font-size: clamp(15px, 1.25vw, 24px); font-weight: 500; line-height: 1.67; color: rgba(255,255,255,.95); }
.founder-name { margin-top: clamp(24px, 2.5vw, 48px); color: var(--blue); }
.founder-name .nm { font-size: clamp(24px, 2.08vw, 40px); font-weight: 700; line-height: 1.25; letter-spacing: .01em; display: block; }
.founder-name .rl { font-size: clamp(22px, 2.08vw, 40px); font-weight: 600; line-height: 1.25; display: block; }
.founder-name .rl .sep { font-weight: 300; }
/* blue puzzle panel behind the cutout person */
.founder-photo { position: relative; min-height: clamp(420px, 34vw, 620px); display: flex; align-items: flex-end; justify-content: center; }
.founder-puzzle {
  position: absolute; bottom: 6%; width: 78%; aspect-ratio: 640 / 600;
  background: url("../assets/puzzle-piece.svg") center / 100% 100% no-repeat;
  filter: drop-shadow(0 30px 60px rgba(0,0,0,.45)); will-change: transform; z-index: 1;
}
.founder.reverse .founder-puzzle { transform: scaleX(-1); }
/* v2: offset blue puzzle outline behind the panel */
.founder-puzzle::after {
  content: ""; position: absolute; inset: 0;
  background: url("../assets/puzzle-outline-stroke.svg") center / 100% 100% no-repeat;
  transform: translate(9%, -9%) scale(1.04); opacity: .9;
}
.founder-photo img { position: relative; z-index: 2; width: auto; max-width: 86%; max-height: clamp(420px, 34vw, 620px); height: auto; will-change: transform; }

/* collaborators */
.collab { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 3vw, 60px); align-items: center; padding: clamp(60px, 7vw, 140px) 0; }
.collab-copy h2 { font-size: clamp(30px, 3.02vw, 58px); line-height: 1.48; font-weight: 700; }
.collab-copy h2 .hl { color: var(--blue); position: relative; display: inline-block; }
.collab-copy h2 .hl .scribble { position: absolute; left: 0; right: 0; bottom: -10px; height: 20px; background: url("../assets/scribble-collab.svg") center / 100% 100% no-repeat; }
.collab-copy .village { margin-top: clamp(28px, 3vw, 56px); color: var(--blue); font-weight: 700; font-size: clamp(30px, 3.02vw, 58px); line-height: 1.45; }
.collab-visual { position: relative; }
.collab-visual > img { width: 100%; height: auto; }
.pill { position: absolute; z-index: 3; font-weight: 600; color: #fff; font-size: clamp(13px, 1.17vw, 22.5px); padding: .55em 1.35em; border-radius: 150px; background: var(--navy); white-space: nowrap; box-shadow: 0 12px 30px rgba(0,0,0,.35); will-change: transform; }
.pill.bl { background: var(--blue); }
.pill.ic { background: var(--ice); color: var(--navy); }
.pl-technicians { left: 4%; top: -4%; } .pl-designers { left: 60%; top: 2%; } .pl-operators { left: 86%; top: 22%; }
.pl-artists { left: -4%; top: 42%; } .pl-strategists { left: 72%; top: 70%; } .pl-producers { left: 38%; top: 86%; }

/* ---------- v2 "How we work" network diagram ---------- */
.network-sec { text-align: center; padding: clamp(40px,5vw,90px) 0 clamp(60px,7vw,120px); }
.network-sec h2 { font-size: clamp(26px, 2.4vw, 46px); line-height: 1.5; font-weight: 700; }
.network-sec h2 .hl { color: var(--blue); position: relative; display: inline-block; }
.network-sec h2 .hl .scribble { position: absolute; left: 0; right: 0; bottom: -8px; height: 16px; background: url("../assets/scribble-collab.svg") center / 100% 100% no-repeat; }
.network-wrap { max-width: 1240px; margin: clamp(30px,4vw,70px) auto 0; }
.network-wrap svg { width: 100%; height: auto; display: block; }
.network-sec .village { margin-top: clamp(26px,3vw,50px); color: var(--blue); font-weight: 700; font-size: clamp(26px, 2.4vw, 46px); }
.network-sec .np1 { margin-top: 10px; font-size: clamp(16px, 1.25vw, 24px); font-weight: 400; color: #fff; }
.network-sec .np2 { font-size: clamp(16px, 1.25vw, 24px); font-weight: 700; color: #fff; }

/* v2 statement band (blue gradient, left aligned) */
.statement { text-align: left; padding: clamp(60px, 7vw, 130px) 0; position: relative;
  background:
    radial-gradient(90% 120% at 8% 0%, rgba(50,164,249,.5), transparent 60%),
    linear-gradient(100deg, #123a6b 0%, var(--deep) 45%, #071c38 100%);
}
.statement p { font-size: clamp(24px, 2.5vw, 48px); font-weight: 600; line-height: 1.5; text-transform: capitalize; color: #fff; }
.statement p b { font-weight: 700; }

/* ============================================================
   PORTFOLIO DETAIL PAGES
   ============================================================ */
.detail-hero { position: relative; padding-top: var(--nav-h); overflow: hidden;
  background:
    radial-gradient(70% 70% at 78% 28%, rgba(50,164,249,.40), transparent 60%),
    linear-gradient(180deg, #0f315a 0%, #0a2546 45%, #061a33 100%);
}
.detail-hero-inner { position: relative; display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; min-height: clamp(520px, 52vw, 760px); padding: clamp(40px,5vw,90px) 0 clamp(80px,9vw,150px); }
.detail-hero h1 { font-size: clamp(48px, 5.63vw, 108px); font-weight: 600; line-height: .92; }
.detail-hero .lede { margin-top: clamp(20px,2vw,34px); font-size: clamp(16px,1.35vw,26px); font-weight: 500; line-height: 1.54; max-width: 566px; color: rgba(255,255,255,.95); }
.detail-hero .tagline { margin-top: clamp(22px,2.4vw,42px); color: var(--blue); font-weight: 600; font-size: clamp(20px,1.67vw,32px); line-height: 1.45; text-transform: capitalize; }
.detail-puzzle { position: relative; display: grid; place-items: center; }
.detail-puzzle img { width: clamp(280px, 32vw, 600px); height: auto; filter: drop-shadow(0 40px 60px rgba(0,0,0,.4)); will-change: transform; }
.detail-arrows { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.detail-arrows a {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 52px; height: 52px; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.45);
  display: grid; place-items: center; color: rgba(255,255,255,.85);
  font-size: 20px; background: rgba(255,255,255,.05);
  pointer-events: auto; cursor: pointer;
  transition: background .3s var(--ease-out), color .3s, border-color .3s, transform .3s var(--ease-out);
}
.detail-arrows a:hover { background: var(--blue); color: #fff; border-color: var(--blue); transform: translateY(-50%) scale(1.12); }
.detail-arrows .l { left: -6px; } .detail-arrows .r { right: -6px; }
@media (max-width: 1024px) { .detail-arrows .l { left: 2%; } .detail-arrows .r { right: 2%; } }

.detail-tabs { position: relative; background: var(--dark); padding: clamp(28px,3vw,46px) 0; }
.detail-tabs ul { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 0; }
.detail-tabs li { position: relative; padding: 6px clamp(18px,2.2vw,40px); font-size: clamp(14px,1.3vw,25px); font-weight: 500; text-transform: capitalize; color: #fff; text-align: center; }
.detail-tabs li + li::before { content: ""; position: absolute; left: 0; top: 12%; bottom: 12%; width: 1px; background: rgba(255,255,255,.25); }
.detail-tabs li.active { color: var(--blue); }

.detail-case { background: var(--dark); padding: 0 0 clamp(40px,5vw,80px); }
.detail-case-img { width: 100%; }
.detail-case-img img { width: 100%; height: auto; display: block; }

/* v2 stacked full-bleed case bands (torn separator straddles the top seam) */
.detail-cases { position: relative; background: var(--dark); }
.detail-cases .torn-top { position: absolute; top: 0; left: 0; width: 100%; transform: translateY(-50%); z-index: 8; pointer-events: none; line-height: 0; }
.detail-cases .torn-top img { width: 100%; height: auto; display: block; }
.case-band { width: 100%; line-height: 0; }
.case-band img { width: 100%; height: auto; display: block; }
/* stacked mode (set by caseStack JS): all bands share one full-width slot,
   each next one slides up over the previous while the section is pinned */
.detail-cases.stacked { aspect-ratio: 1920 / 1080; overflow: hidden; }
.detail-cases.stacked .case-band { position: absolute; inset: 0; will-change: transform; }
.detail-cases.stacked .case-band img { width: 100%; height: 100%; object-fit: cover; }

/* video overlay riding on a case band (phone screen inside the flattened art) */
.case-band { position: relative; }
.case-band .band-video {
  position: absolute; left: 5.99%; top: 36.2%; width: 22.14%; height: 63.8%;
  object-fit: cover; background: #000;
  /* The art is a real iPhone: rounded screen corners (~68px across x 110px down) AND a
     notch holding the speaker grille + camera. The video sits on top of the flat image,
     so without this it covered the notch and ran to the top bezel. This path rounds the
     two top corners and cuts a notch-shaped hole so the artwork's own notch shows through. */
  clip-path: polygon(0.00% 16.00%, 0.40% 12.44%, 1.58% 9.06%, 3.49% 6.02%, 6.02% 3.49%, 9.06% 1.58%, 12.44% 0.40%, 16.00% 0.00%, 25.17% 0.00%, 25.17% 6.25%, 76.92% 6.25%, 76.92% 0.00%, 84.00% 0.00%, 87.56% 0.40%, 90.94% 1.58%, 93.98% 3.49%, 96.51% 6.02%, 98.42% 9.06%, 99.60% 12.44%, 100.00% 16.00%, 100.00% 100.00%, 0.00% 100.00%);
}

/* ---------- sound toggle button ---------- */
.snd-btn {
  position: absolute; z-index: 6; width: 44px; height: 44px; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.5); background: rgba(5,11,26,.55);
  color: #fff; font-size: 18px; line-height: 1; display: grid; place-items: center;
  cursor: pointer; backdrop-filter: blur(6px);
  transition: background .3s, border-color .3s, transform .3s var(--ease-out);
}
.snd-btn:hover { background: var(--blue); border-color: var(--blue); transform: scale(1.1); }
.case-band .snd-btn { left: 21%; bottom: 4%; }

/* ---------- phone mockup (CSS frame + video) ---------- */
.phone-mock {
  position: relative; width: min(300px, 72vw); aspect-ratio: 300 / 610;
  border-radius: 44px; background: #0b0d12;
  border: 3px solid #a8c6cf; box-shadow: 0 30px 70px rgba(0,0,0,.55), inset 0 0 0 6px #10131a;
  overflow: hidden; margin: 0 auto;
}
.phone-mock video { position: absolute; inset: 6px; width: calc(100% - 12px); height: calc(100% - 12px); object-fit: cover; border-radius: 36px; background: #000; }
.phone-mock .notch { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); width: 38%; height: 20px; border-radius: 12px; background: #0b0d12; z-index: 4; }
.phone-mock .snd-btn { right: 12px; bottom: 14px; }

/* ---------- soul celebration case sections ----------
   flat navy matching the slice backgrounds — the baked-in Figma grid inside
   the slices is the ONLY grid here (no CSS grid collision at the seams) */
.soul-case { padding: clamp(50px, 6vw, 110px) 0 0; background: #08101f !important; }
.soul-case::after { display: none !important; }
.soul-case .sc-title {
  display: flex; align-items: center; justify-content: center; gap: clamp(16px, 2vw, 34px);
  font-size: clamp(22px, 1.77vw, 34px); font-weight: 700;
  /* the title wraps to 2-3 lines on a phone; without this the lines stack left-aligned
     between the two arrows while the scribble stays centred */
  text-align: center;
}
.soul-case .sc-title .sc-arrow {
  color: var(--blue); font-size: clamp(20px, 1.8vw, 30px); line-height: 1;
  transition: transform .3s var(--ease-out); display: inline-block;
}
.soul-case .sc-title a:hover .sc-arrow,
.soul-case .sc-title .sc-nav:hover .sc-arrow { transform: scale(1.25); }
.sc-nav { background: none; border: 0; padding: 6px; cursor: pointer; }
.soul-slide { will-change: transform, opacity; }
.soul-slide[hidden] { display: none; }
.soul-case .sc-underline { display: block; width: 150px; height: 18px; margin: 2px auto 0; background: url("../assets/scribble-underline.png") center / contain no-repeat; }
.soul-grid2 {
  display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
  gap: clamp(30px, 6vw, 120px); align-items: center;
  max-width: 1180px; margin: clamp(30px, 4vw, 70px) auto 0;
}
.soul-copy h3 { color: var(--blue); font-size: clamp(18px, 1.35vw, 26px); font-weight: 600; line-height: 1.45; }
.soul-copy p { margin-top: clamp(14px, 1.5vw, 26px); font-size: clamp(14px, 1.05vw, 20px); font-weight: 400; line-height: 1.6; color: rgba(255,255,255,.95); }
/* gallery slice runs full-bleed like the Figma band; bottom sits flush on the footer */
.soul-gallery { margin-top: clamp(34px, 4vw, 70px); width: 100vw; margin-left: 50%; transform: translateX(-50%); line-height: 0; }
.soul-gallery img { width: 100%; height: auto; display: block; }

/* ---------- team v3: crew + creative collaborators ---------- */
/* crew band is a full-bleed Figma slice (heading + scribble baked in).
   No extra strips or backgrounds around it — the slice IS the segment, and its
   top/bottom edges fade into the page background so no seam line can appear. */
.crew-sec { text-align: center; padding: clamp(36px, 5vw, 90px) 0 0; background: transparent; }
.collab-row-sec h2 { font-size: clamp(24px, 1.87vw, 36px); font-weight: 700; line-height: 1.5; }
.crew-band { width: 100%; margin: 0 auto; line-height: 0; }
/* fade depths are % of the image so they scale with it and never touch the heading */
.crew-band img {
  width: 100%; height: auto; display: block;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 1.5%, #000 97.5%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 1.5%, #000 97.5%, transparent 100%);
}
.collab-row-sec { text-align: center; padding: clamp(40px, 5vw, 80px) 0; background: #16213b; }
/* half this track is a duplicate set (like the home marquee), so -50% is exactly one
   set. 16 pills x 249px = 3984px, travelling 1992px in 30s = the home strip's speed. */
.collab-row-sec .marquee-track { animation-duration: 30s; }
.collab-row { max-width: 1920px; margin: clamp(16px, 2vw, 36px) auto 0; }
.collab-row img { width: 100%; height: auto; display: block; }
/* full-bleed brand tile (e.g. AR Bridal Stylist green logo) inside a pill */
/* the AR artwork is a 600x600 square with "BRIDAL STYLIST" under the monogram;
   `cover` in a 226x92 pill sliced off the A's apex and the whole wordmark, so
   contain it and carry the logo's own background colour onto the pill instead */
.collab-row-sec .brand-pill.tile { padding: 0; overflow: hidden; background: #212e23; }
.collab-row-sec .brand-pill.tile img { max-height: none; width: 100%; height: 100%; object-fit: contain; }

@media (max-width: 860px) {
  .soul-grid2 { grid-template-columns: 1fr; }
  .case-band .snd-btn { width: 34px; height: 34px; font-size: 14px; }
}

/* ---------- reveal helpers ---------- */
[data-reveal] { will-change: transform, opacity; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  :root { --nav-h: 76px; }
  .nav { padding: 0 24px; }
  .nav-logo img { height: 36px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .collab-logos { grid-template-columns: repeat(4, 1fr); gap: 16px; }
  .detail-hero-inner { grid-template-columns: 1fr; text-align: center; }
  .detail-hero .lede { margin-left: auto; margin-right: auto; }
  .detail-puzzle { order: -1; }
}
@media (max-width: 768px) {
  .dots { display: none; }
  .nav-burger { display: flex; }
  .nav nav { position: fixed; inset: var(--nav-h) 0 auto 0; background: var(--navy);
    transform: translateY(-130%); transition: transform .45s var(--ease-out), visibility .45s;
    padding: 10px 0 26px; box-shadow: 0 20px 40px rgba(0,0,0,.4);
    visibility: hidden; pointer-events: none; } /* fully hidden when closed — no sliver/box over the video */
  .nav.open nav { transform: translateY(0); visibility: visible; pointer-events: auto; }
  .nav-links { flex-direction: column; gap: 0; }
  .nav-links li { width: 100%; text-align: center; }
  .nav-links a { display: block; padding: 16px; font-size: 18px; }
  .eco-grid { grid-template-columns: minmax(0, 474px); }
  .founder, .founder.reverse { grid-template-columns: 1fr; }
  .founder.reverse .founder-copy { order: 1; text-align: left; }
  .founder.reverse .founder-photo { order: 2; }
  .collab { grid-template-columns: 1fr; }
  .collab-visual { margin-top: 70px; }
  .collab-logos { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  /* collage keeps the cohesive overlapping Figma band at all widths (no separated grid) */
  .detail-tabs ul { gap: 6px; } .detail-tabs li + li::before { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation-duration: 120s; }
}

/* ---------- legal pages (privacy + terms) ---------- */
.legal-page { padding: calc(var(--nav-h) + clamp(40px, 5vw, 90px)) 0 clamp(60px, 7vw, 130px); position: relative; }
.legal-page .container { max-width: 880px; }
.legal-head { text-align: center; padding-bottom: clamp(30px, 4vw, 60px); border-bottom: 1px solid rgba(255,255,255,.12); margin-bottom: clamp(30px, 4vw, 60px); position: relative; z-index: 2; }
.legal-head h1 { font-size: clamp(36px, 4.4vw, 78px); font-weight: 700; line-height: 1.05; letter-spacing: -0.02em; }
.legal-updated { margin-top: 14px; font-family: 'Inter', sans-serif; color: rgba(255,255,255,.55); font-size: 14px; letter-spacing: .02em; }
.legal-body { position: relative; z-index: 2; font-family: 'Inter', sans-serif; font-size: clamp(15px, 1.05vw, 17px); line-height: 1.75; color: rgba(255,255,255,.86); }
.legal-body h2 { font-family: 'Poppins', sans-serif; font-size: clamp(20px, 1.8vw, 28px); font-weight: 600; line-height: 1.35; margin: clamp(28px, 3vw, 46px) 0 clamp(12px, 1.2vw, 18px); color: #fff; }
.legal-body p { margin: 0 0 clamp(12px, 1.2vw, 18px); }
.legal-body ul { margin: 0 0 clamp(14px, 1.4vw, 22px); padding-left: 22px; }
.legal-body li { margin-bottom: 8px; }
.legal-body a { color: var(--blue); border-bottom: 1px solid rgba(50,164,249,.35); transition: color .3s, border-color .3s; }
.legal-body a:hover { color: #fff; border-bottom-color: #fff; }
.legal-body strong { color: #fff; font-weight: 600; }
.legal-back { margin-top: clamp(40px, 5vw, 70px); text-align: center; position: relative; z-index: 2; }
.legal-back a { color: var(--blue); font-family: 'Inter', sans-serif; font-size: 15px; }
.legal-back a:hover { color: #fff; }

/* ---------- back-to-top floating button ---------- */
.to-top {
  position: fixed; right: clamp(16px, 2.8vw, 54px); bottom: clamp(16px, 2.8vw, 54px);
  z-index: 450; width: clamp(46px, 3.6vw, 70px); height: clamp(46px, 3.6vw, 70px);
  border-radius: 50%; border: 0; background: #050a13; color: var(--blue);
  padding: 0; cursor: pointer; display: grid; place-items: center;
  opacity: 0; visibility: hidden; transform: translateY(14px) scale(.9);
  transition: opacity .35s var(--ease-out), transform .35s var(--ease-out),
              visibility .35s, background .3s;
  box-shadow: 0 10px 30px rgba(0,0,0,.45);
}
.to-top svg { width: 56%; height: 56%; display: block; pointer-events: none; }
.to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.to-top:hover { background: #0b1526; transform: translateY(-3px) scale(1.06); }
.to-top:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

/* ---------- home v4: single-band collage (replaces positioned cutouts) ---------- */
.collage-band { width: 100%; margin: clamp(24px, 3vw, 50px) auto 0; line-height: 0; }
.collage-band img { width: 100%; height: auto; display: block; }

/* ============================================================
   PHONE / TABLET: real-text versions of the two baked-artwork
   blocks on the Team page.
   The crew band is a single 1920x2060 image with names and roles
   painted into it, and the operating model is a 1260x640 SVG —
   both shrink below legibility on a phone (names land near 5px).
   Below 1024px we swap in HTML carrying the SAME portraits, names,
   roles and copy. Desktop is untouched.
   ============================================================ */
.crew-mobile, .om-mobile { display: none; }

@media (max-width: 1024px) {
  .crew-band { display: none; }
  .crew-mobile { display: block; }

  .crew-head {
    font-size: clamp(24px, 5.4vw, 34px); font-weight: 700; line-height: 1.3;
    margin: 0 auto clamp(26px, 5vw, 40px); text-align: center;
  }
  .crew-head .eyebrow-underline { width: clamp(120px, 34vw, 190px); height: 18px; }

  .crew-grid {
    list-style: none; margin: 0 auto; padding: 0;
    width: min(560px, 90vw);
    display: grid; gap: clamp(14px, 3.4vw, 24px);
  }
  .crew-card {
    display: grid; grid-template-columns: clamp(96px, 26vw, 132px) 1fr;
    align-items: center; gap: clamp(12px, 3.4vw, 22px);
    text-align: left;
    padding: clamp(10px, 2.6vw, 16px);
    border-radius: 16px;
    background: rgba(255, 255, 255, .035);
    border: 1px solid rgba(50, 164, 249, .18);
  }
  .crew-card img { width: 100%; height: auto; display: block; }
  .crew-meta { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
  .crew-name {
    color: var(--blue); font-weight: 700; line-height: 1.25;
    font-size: clamp(15px, 4vw, 19px);
  }
  .crew-role {
    color: rgba(255, 255, 255, .82); font-family: 'Inter', sans-serif;
    font-size: clamp(12.5px, 3.2vw, 15px); line-height: 1.4;
  }

  /* ---- operating model: desktop diagram redrawn as a vertical spine ---- */
  .network-wrap { display: none; }
  .om-mobile { display: block; width: min(560px, 90vw); margin: clamp(26px, 5vw, 44px) auto 0; }

  /* central puzzle box, same silhouette as the SVG (knob right, notch bottom) */
  /* The shape keeps its own aspect so the knob stays round and the stroke weight stays
     even — the box is sized by aspect-ratio rather than stretched to fit the text.
     Its body spans x 6..294 of a 324 viewBox, so the label is nudged right to sit
     centred inside the box rather than inside the element. */
  .om-core { position: relative; aspect-ratio: 324 / 150; width: 100%;
    display: grid; place-items: center; padding: 0 7.4% 0 0;
    margin: 0 auto clamp(2px, 1vw, 8px); }
  .om-core-shape { position: absolute; inset: 0; width: 100%; height: 100%;
    fill: none; stroke: var(--blue); stroke-width: 2.5; }
  .om-core-txt { position: relative; display: block; text-align: center; font-weight: 700;
    line-height: 1.35; font-size: clamp(16px, 4.2vw, 21px); letter-spacing: .01em; }
  .om-core-txt b { color: var(--blue); }

  /* spine runs from the first node's centre to the last node's centre — it used to
     start at the list's top edge, leaving a stub pointing up at nothing */
  .om-mobile { --om-node: clamp(30px, 8vw, 36px); --om-gutter: clamp(42px, 11vw, 54px); }
  .om-list { list-style: none; margin: 0; padding: 0 0 0 var(--om-gutter);
    position: relative; display: grid; gap: clamp(18px, 4.4vw, 28px); text-align: left; }
  .om-list::before { content: ""; position: absolute;
    left: calc(var(--om-node) / 2 - 1px);
    top: calc(2px + var(--om-node) / 2); bottom: calc(2px + var(--om-node) / 2);
    width: 2px; background: linear-gradient(180deg, var(--blue), rgba(50,164,249,.25)); }

  .om-group { position: relative; }
  .om-group::before { content: ""; position: absolute;
    left: calc(var(--om-node) - var(--om-gutter)); top: calc(2px + var(--om-node) / 2);
    width: calc(var(--om-gutter) - var(--om-node)); height: 2px; background: rgba(50,164,249,.55); }
  .om-node { position: absolute; left: calc(var(--om-gutter) * -1); top: 2px;
    width: var(--om-node); height: var(--om-node); border-radius: 50%;
    display: grid; place-items: center; background: #0a1428; border: 1.5px solid rgba(50,164,249,.45); }
  .om-icon { width: 58%; height: 58%; fill: var(--blue); display: block; }

  .om-pill { display: inline-block; background: var(--ice); color: var(--navy);
    font-weight: 600; font-size: clamp(13px, 3.4vw, 16px); padding: 7px 16px; border-radius: 17px; }
  .om-group ul { list-style: none; margin: 10px 0 0; padding: 0;
    font-family: 'Inter', sans-serif; color: rgba(255, 255, 255, .86);
    font-size: clamp(13px, 3.3vw, 15.5px); line-height: 1.8; }
  .om-group li::before { content: "\2022"; color: var(--blue); margin-right: 9px; }
}

/* Final phone alignment and usable touch controls. */
@media (max-width: 768px) {
  .loader { padding: 24px; }
  .loader-title { width: 100%; justify-content: center; font-size: clamp(22px, 6.5vw, 46px); gap: .3em; flex-shrink: 0; }
  .loader-title .lw { flex-shrink: 0; }
  .nav-burger { min-width: 44px; min-height: 44px; }
  .nav.open { transform: translateY(0); }
  .sc-nav { min-width: 44px; min-height: 44px; flex-shrink: 0; }
  .case-band .snd-btn { width: 44px; height: 44px; }
  .founder-photo { min-height: 0; height: min(100vw, 460px); }
  .founder-photo img { max-height: 100%; max-width: 72%; object-fit: contain; }
  .founder-puzzle { width: 86%; bottom: 4%; }
}