/* ============================================================
   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; min-width: 100%; animation: marquee 32s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-100%); } }
.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 */

/* ---------- 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: 6.04%; top: 37.2%; width: 22.1%; height: 62.8%;
  object-fit: cover; border-radius: 1.6vw 1.6vw 0 0; background: #000;
}

/* ---------- 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;
}
.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 2.6%, #000 97.5%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 2.6%, #000 97.5%, transparent 100%);
}
.collab-row-sec { text-align: center; padding: clamp(40px, 5vw, 80px) 0; background: #16213b; }
.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 */
.collab-row-sec .brand-pill.tile { padding: 0; overflow: hidden; }
.collab-row-sec .brand-pill.tile img { max-height: none; width: 100%; height: 100%; object-fit: cover; }

@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; }