/* ============================================================
   SCUPP VENTURES — Landing
   Type: Archivo (display / wordmarks) + Hanken Grotesk (text)
   honoring the Neue Haas grotesque style of the reference DS.
   ============================================================ */

:root{
  /* ── Brand palette (from the brochure) ── */
  --coral:        #F4714F;
  --coral-light:  #F89A78;
  --coral-deep:   #EC5C42;
  --crimson:      #D62A50;
  --crimson-deep: #BE1F45;
  --plum:         #2B1426;
  --plum-deep:    #1B0C18;
  --cream:        #FBEDE2;
  --cream-dim:    rgba(251,237,226,.72);
  --cream-faint:  rgba(251,237,226,.45);
  --pink-bg:      #F8E6E5;
  --pink-bg-soft: #FCEFEC;
  --ink:          #2A1320;
  --ink-dim:      rgba(42,19,32,.62);
  --ink-faint:    rgba(42,19,32,.4);

  --font-display: "Archivo", system-ui, -apple-system, sans-serif;
  --font-body:    "Hanken Grotesk", system-ui, -apple-system, sans-serif;

  --maxw: 1280px;
  --gutter: clamp(20px, 5vw, 80px);
  --radius: 18px;
  --radius-lg: 28px;

  --ease: cubic-bezier(.625,.05,0,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family:var(--font-body);
  background:var(--plum-deep);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
::selection{ background:var(--crimson); color:var(--cream); }
a{ color:inherit; text-decoration:none; }
img,svg{ display:block; max-width:100%; }
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }

/* small helper */
.eyebrow{
  font-family:var(--font-body);
  font-size:clamp(11px,.86vw,13px);
  font-weight:700;
  letter-spacing:.22em;
  text-transform:uppercase;
}

/* =====================================================
   NAV
   ===================================================== */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  gap:24px;
  padding:18px var(--gutter);
  color:var(--cream);
  transition:background .5s var(--ease), color .5s var(--ease), padding .5s var(--ease), box-shadow .5s var(--ease);
}
.nav.scrolled{
  background:var(--cream);
  color:var(--ink);
  padding-block:12px;
  box-shadow:0 1px 0 rgba(42,19,32,.08), 0 14px 40px -28px rgba(42,19,32,.5);
}
.nav__brand{ display:flex; align-items:center; }
.nav__logo{
  height:30px; width:auto; display:block;
  transition:filter .5s var(--ease);
  filter:brightness(0) invert(1); /* cream/white on dark bg */
}
.nav.scrolled .nav__logo{
  filter:brightness(0); /* dark on cream scrolled nav */
}
.nav__links{ display:flex; align-items:center; gap:30px; margin-left:auto; }
.nav__link{
  position:relative; font-weight:500; font-size:14px; letter-spacing:.01em;
  opacity:.85; transition:opacity .3s;
}
.nav__link::after{
  content:""; position:absolute; left:0; bottom:-5px; height:2px; width:100%;
  background:currentColor; transform:scaleX(0); transform-origin:left;
  transition:transform .4s var(--ease);
}
.nav__link:hover{ opacity:1; }
.nav__link:hover::after{ transform:scaleX(1); }

/* language toggle */
.lang{
  display:flex; align-items:center; gap:2px;
  border:1px solid currentColor; border-radius:999px; padding:3px;
  opacity:.9;
}
.lang button{
  font-family:var(--font-body); font-weight:600; font-size:11px; letter-spacing:.06em;
  color:inherit; background:transparent; border:0; cursor:pointer;
  padding:5px 10px; border-radius:999px; line-height:1;
  transition:background .3s, color .3s, opacity .3s; opacity:.65;
}
.lang button:hover{ opacity:1; }
.lang button.active{ opacity:1; }
.nav .lang button.active{ background:var(--cream); color:var(--plum); }
.nav.scrolled .lang button.active{ background:var(--plum); color:var(--cream); }
.drawer .lang button.active{ background:var(--cream); color:var(--plum); }

/* pill CTA */
.btn{
  position:relative; overflow:hidden; isolation:isolate;
  display:inline-flex; align-items:center; gap:9px;
  font-weight:600; font-size:14px; letter-spacing:.01em;
  padding:12px 22px; border-radius:999px;
  border:1.5px solid currentColor; cursor:pointer; background:transparent; color:inherit;
  transition:color .5s var(--ease);
}
.btn::before{
  content:""; position:absolute; z-index:-1; left:50%; top:50%;
  width:130%; aspect-ratio:1; border-radius:50%;
  background:var(--crimson);
  transform:translate(-50%,-50%) scale(0); 
  transition:transform .6s var(--ease);
}
.btn:hover{ color:var(--cream); border-color:var(--crimson); }
.btn:hover::before{ transform:translate(-50%,-50%) scale(1); }
.btn--solid{ background:var(--crimson); border-color:var(--crimson); color:var(--cream); }
.btn--solid::before{ background:var(--plum); }
.btn--solid:hover{ border-color:var(--plum); }
.nav__cta{ margin-left:6px; }

.nav__burger{ display:none; }

/* =====================================================
   HERO
   ===================================================== */
.hero{
  position:relative; min-height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  color:var(--cream); overflow:hidden;
  padding:140px var(--gutter) 110px;
  isolation:isolate;
}
.hero__bg{ position:absolute; inset:0; z-index:0; }
.hero__bg svg{ width:100%; height:100%; }

/* subtle vignette overlay on top of bg */
.hero::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(120% 80% at 50% 100%, rgba(27,12,24,.55), transparent 60%),
    radial-gradient(60% 50% at 0% 0%, rgba(255,210,180,.18), transparent 70%);
}

/* fine grain noise overlay — feels like Linear / Vercel */
.hero__noise{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  opacity:.12; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .8 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size:220px 220px;
}

/* faint vertical grid columns — design system feel */
.hero__grid-lines{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  display:grid; grid-template-columns:repeat(5,1fr);
  padding:0 var(--gutter); max-width:var(--maxw);
  margin-inline:auto; left:0; right:0;
  opacity:.07;
}
.hero__grid-lines span{ border-right:1px solid var(--cream); }
.hero__grid-lines span:last-child{ border-right:0; }

/* cursor glow that follows pointer (driven by gsap-hero.js) */
.hero__cursor{
  position:absolute; left:0; top:0; z-index:2; pointer-events:none;
  width:520px; height:520px; margin-left:-260px; margin-top:-260px;
  background:radial-gradient(circle, rgba(255,220,200,.35), transparent 60%);
  filter:blur(20px); mix-blend-mode:screen; opacity:0;
  transition:opacity .5s var(--ease);
}
.hero:hover .hero__cursor{ opacity:1; }

/* drifting blurred light blobs for depth */
.blob{
  position:absolute; border-radius:50%; filter:blur(60px); opacity:.55;
  z-index:1; pointer-events:none; mix-blend-mode:screen;
  will-change:transform;
}
.blob--1{ width:46vw; height:46vw; left:-8vw; top:8vw; background:radial-gradient(circle, #FF9A6E, transparent 68%); animation:drift1 18s var(--ease) infinite alternate; }
.blob--2{ width:40vw; height:40vw; right:6vw; top:18vw;  background:radial-gradient(circle, #FF4D6D, transparent 66%); opacity:.4; animation:drift2 22s var(--ease) infinite alternate; }
.blob--3{ width:30vw; height:30vw; left:40vw; bottom:-8vw; background:radial-gradient(circle, #6B1F4E, transparent 70%); opacity:.5; animation:drift3 26s var(--ease) infinite alternate; }
@keyframes drift1{ to{ transform:translate(8vw,4vw) scale(1.12); } }
@keyframes drift2{ to{ transform:translate(-6vw,5vw) scale(1.18); } }
@keyframes drift3{ to{ transform:translate(5vw,-5vw) scale(1.1); } }

/* when gsap takes over, disable css drift to avoid conflicts */
body.gsap-on .blob{ animation:none; }
body.gsap-on .hero__shape{ animation:none !important; }

[data-motion="calm"] .blob{ animation:none; }
@media (prefers-reduced-motion: reduce){ .blob{ animation:none; } .hero__shape{ animation:none !important; } }

/* ─── centered, vertical-stack hero ─── */
.hero__inner{
  position:relative; z-index:4;
  width:100%; max-width:var(--maxw);
  margin-inline:auto;
  display:flex; flex-direction:column; align-items:center;
  text-align:center;
  gap:clamp(20px,2.4vw,32px);
}

/* hide hero pieces until GSAP plays the entry — fallback shows them */
.hero [data-hero-anim]{ opacity:0; }
.no-gsap .hero [data-hero-anim]{ opacity:1; }
@media (prefers-reduced-motion: reduce){ .hero [data-hero-anim]{ opacity:1; } }

/* status badge — glass pill */
.hero__badge{
  display:inline-flex; align-items:center; gap:10px;
  padding:8px 16px 8px 13px; border-radius:999px;
  background:rgba(251,237,226,.08);
  border:1px solid rgba(251,237,226,.22);
  backdrop-filter:blur(10px) saturate(140%);
  -webkit-backdrop-filter:blur(10px) saturate(140%);
  color:var(--cream);
  font-size:clamp(10.5px,.85vw,12px);
  font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  box-shadow:0 8px 24px -16px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.08);
}
.hero__dot{
  width:7px; height:7px; border-radius:50%; background:#7CF0A0;
  box-shadow:0 0 0 0 rgba(124,240,160,.6);
  animation:pulse 2.4s ease-in-out infinite; flex-shrink:0;
}
@keyframes pulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(124,240,160,.55); }
  50%{ box-shadow:0 0 0 8px rgba(124,240,160,0); }
}

/* WORDMARK — logo SVG */
.hero__wordmark{
  text-align:center; user-select:none;
  will-change:transform, opacity;
  display:flex; justify-content:center; align-items:center;
}
.hero__logo{
  width:clamp(260px,46vw,660px);
  height:auto; display:block;
  clip-path:circle(0% at 50% 50%);
  will-change:clip-path;
}
@keyframes imgCycle-in{
  0%    { clip-path:circle(0% at 50% 50%); }
  2.5%  { clip-path:circle(100% at 50% 50%); }
  100%  { clip-path:circle(100% at 50% 50%); }
}
.no-gsap .hero__logo{
  animation:imgCycle-in 1.2s var(--ease-out) .1s forwards;
}
@media (prefers-reduced-motion: reduce){
  .hero__logo{ clip-path:none; animation:none; }
}

/* HEADLINE — the message, smaller than wordmark, balanced */
.hero__headline{
  font-family:var(--font-body); font-weight:500;
  font-size:clamp(20px,2.2vw,30px); line-height:1.25; letter-spacing:-.012em;
  color:var(--cream);
  text-wrap:balance;
  max-width:26ch;
  margin-top:clamp(4px,.6vw,10px);
}
.hero__headline .accent{
  font-weight:800;
  background:linear-gradient(120deg, #FFE4D0 0%, #FFFFFF 40%, #FFD2C2 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  position:relative;
}
.hero__headline .accent::after{
  content:""; position:absolute; left:0; right:0; bottom:-.08em; height:2px;
  background:linear-gradient(90deg, transparent, rgba(251,237,226,.85), transparent);
  transform:scaleX(0); transform-origin:left;
  animation:underline-in 1.4s var(--ease-out) 1.6s forwards;
}
@keyframes underline-in{ to{ transform:scaleX(1); } }

/* split-word wrappers (injected by hero-gsap.js) */
.split-word{ display:inline-block; overflow:hidden; vertical-align:bottom; padding-right:.02em; }
.split-word__inner{ display:inline-block; will-change:transform; }

.hero__ctas{
  margin-top:clamp(8px,1vw,16px);
  display:flex; align-items:center; gap:20px; flex-wrap:wrap;
  justify-content:center;
}
.hero__cta{
  background:var(--cream); color:var(--plum); border-color:var(--cream);
  padding:14px 24px;
  box-shadow:0 18px 40px -22px rgba(0,0,0,.55);
}
.hero__cta::before{ background:var(--plum); }
.hero__cta:hover{ color:var(--cream); border-color:var(--plum); }
.hero__cta svg{ width:16px; height:16px; transition:transform .4s var(--ease); }
.hero__cta:hover svg{ transform:translateX(4px); }

/* glass pill — Conheça nosso ecossistema */
.hero__cta--eco{
  color:var(--cream);
  border-color:rgba(251,237,226,.4);
  background:rgba(251,237,226,.1);
  backdrop-filter:blur(10px) saturate(140%);
  -webkit-backdrop-filter:blur(10px) saturate(140%);
  padding:14px 24px;
  box-shadow:0 8px 28px -18px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.1);
}
.hero__cta--eco::before{ background:rgba(251,237,226,.15); }
.hero__cta--eco:hover{ color:var(--cream); border-color:rgba(251,237,226,.85); }
.hero__cta--eco svg{ transition:transform .5s var(--ease); }
.hero__cta--eco:hover svg{ transform:rotate(25deg) scale(1.15); }

.hero__cta-ghost{
  display:inline-flex; align-items:center; gap:10px;
  font-weight:600; font-size:14px; letter-spacing:.04em;
  color:var(--cream); opacity:.85;
  padding:6px 4px; transition:opacity .3s, gap .3s;
}
.hero__cta-ghost__dot{
  width:6px; height:6px; border-radius:50%; background:var(--cream);
  transition:transform .4s var(--ease), background .3s;
}
.hero__cta-ghost:hover{ opacity:1; gap:14px; }
.hero__cta-ghost:hover .hero__cta-ghost__dot{ transform:scale(1.6); background:#FFD2C2; }

.hero__foot{
  position:absolute; left:var(--gutter); right:var(--gutter); bottom:30px; z-index:5;
  display:flex; align-items:center; justify-content:center; gap:20px;
  color:var(--cream-dim); font-size:13px; letter-spacing:.04em;
  pointer-events:none;
}
.scrollcue{
  display:flex; flex-direction:column; align-items:center; gap:10px;
  text-transform:uppercase; letter-spacing:.22em; font-size:11px; font-weight:600;
  color:var(--cream-dim); transition:color .3s, transform .3s;
  pointer-events:auto;
  opacity:0;
  animation:scrollcue-in 1s var(--ease-out) 1.4s forwards;
}
.no-gsap .scrollcue{ opacity:1; animation:none; transform:none; }
body.gsap-on .scrollcue{ animation:none; }
@keyframes scrollcue-in{
  from{ opacity:0; transform:translateY(12px); }
  to  { opacity:1; transform:none; }
}
.scrollcue:hover{ color:var(--cream); }
.scrollcue__text{ line-height:1; }
.scrollcue__mouse{
  width:22px; height:34px;
  border:1.5px solid var(--cream-faint); border-radius:999px;
  display:flex; justify-content:center; padding-top:7px;
}
.scrollcue__wheel{
  width:3px; height:7px; border-radius:999px; background:var(--cream);
  animation:scroll-wheel 2s var(--ease) infinite;
}
.scrollcue__arrow{
  width:18px; height:18px; opacity:.75;
  animation:scroll-bounce 2s var(--ease) infinite;
}
@keyframes scroll-wheel{
  0%{ transform:translateY(0); opacity:1; }
  80%,100%{ transform:translateY(9px); opacity:0; }
}
@keyframes scroll-bounce{
  0%,100%{ transform:translateY(0); opacity:.55; }
  50%{ transform:translateY(5px); opacity:1; }
}
@media (prefers-reduced-motion: reduce){
  .scrollcue__wheel, .scrollcue__arrow{ animation:none; opacity:1; }
  .scrollcue{ opacity:1; animation:none; transform:none; }
}

/* hero animated svg shapes */
.hero__bg rect{ fill:var(--coral); }
.hero__shape--c{ fill:var(--coral-light); }
.hero__shape--a{ fill:var(--crimson); }
.hero__shape--b{ fill:var(--plum); }
.hero__shape{ transform-box:fill-box; transform-origin:center; will-change:transform; }
.hero__shape--a{ animation:sway-a 16s ease-in-out infinite alternate; }
.hero__shape--b{ animation:sway-b 20s ease-in-out infinite alternate; }
.hero__shape--c{ animation:sway-c 24s ease-in-out infinite alternate; }
@keyframes sway-a{ to{ transform:translate(-14px,10px) scale(1.03); } }
@keyframes sway-b{ to{ transform:translate(18px,-8px) scale(1.04); } }
@keyframes sway-c{ to{ transform:translate(-10px,-12px) scale(1.05); } }
[data-motion="calm"] .hero__shape{ animation:none; }

/* =====================================================
   STATS STRIP — enters with a "drop" reveal from the hero edge
   ===================================================== */
.stats{
  position:relative; isolation:isolate; z-index:2;
  background:var(--cream); color:var(--ink);
  padding:clamp(64px,9vw,120px) 0 clamp(48px,7vw,92px);
  /* initial drop state — circle mask collapsed at top center */
  clip-path:circle(0% at 50% 0%);
  will-change:clip-path;
}
/* fallback / reduced motion → fully visible */
.no-gsap .stats{ clip-path:none; }
@media (prefers-reduced-motion: reduce){ .stats{ clip-path:none; } }

/* subtle droplet accent behind the grid */
.stats::before{
  content:""; position:absolute; left:50%; top:-46px; transform:translateX(-50%);
  width:92px; height:92px; border-radius:50%;
  background:radial-gradient(circle at 50% 35%, rgba(214,42,80,.18), transparent 65%);
  filter:blur(6px); pointer-events:none; z-index:-1;
}

.stats__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(24px,4vw,60px); }
.stat{ position:relative; }
.stat + .stat{ border-left:1px solid rgba(42,19,32,.14); padding-left:clamp(20px,3vw,48px); }
.stat__num{
  font-family:var(--font-display); font-weight:900;
  font-size:clamp(60px,9vw,128px); line-height:.9; letter-spacing:-.04em;
  color:var(--crimson);
  display:flex; align-items:baseline; gap:.06em;
}
.stat__num small{ font-size:.42em; font-weight:800; color:var(--coral-deep); }
.stat__label{ margin-top:10px; font-weight:600; font-size:clamp(14px,1.3vw,17px); max-width:18ch; }
.stat__label span{ color:var(--ink-dim); font-weight:500; }

/* =====================================================
   PLUM BAND  (partners + about — single container)
   ===================================================== */
.plum-band{
  background:var(--plum);
  color:var(--cream);
  position:relative;
  overflow:hidden;
  z-index:2;
}
.plum-band__glow{
  position:absolute;
  pointer-events:none;
  z-index:0;
  filter:blur(40px);
  background:radial-gradient(circle, rgba(214,42,80,.55), transparent 62%);
}
.plum-band__glow--tr{
  right:-6vw; top:-6vw;
  width:42vw; height:42vw;
}
.plum-band__glow--bl{
  left:-8vw; top:38%;
  width:38vw; height:38vw;
}

/* =====================================================
   PARTNERS SLIDER
   ===================================================== */
.partners{
  background:transparent;
  padding:clamp(28px,4vw,48px) 0 clamp(8px,1.5vw,16px);
  overflow:visible;
  position:relative; z-index:1;
}
.partners__slider{
  position:relative; z-index:1;
  display:flex; width:max-content;
  gap:clamp(56px,7vw,88px);
  animation:partners-marq 38s linear infinite;
}
[data-motion="calm"] .partners__slider{ animation-duration:72s; }
.partners__track{
  display:flex; flex-shrink:0; align-items:center;
  gap:clamp(56px,7vw,88px);
}
.partners__logo{
  flex:0 0 clamp(110px,13vw,150px);
  width:clamp(110px,13vw,150px);
  height:clamp(28px,3.5vw,44px);
  object-fit:contain; object-position:center;
  display:block;
  filter:brightness(0) invert(1); opacity:.55;
  transition:opacity .35s var(--ease);
}
.partners:hover .partners__logo{ opacity:.85; }
.partners:hover .partners__slider{ animation-play-state:paused; }
@keyframes partners-marq{ to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){
  .partners__slider{ animation:none; width:100%; flex-wrap:wrap; justify-content:center; gap:clamp(32px,5vw,56px); }
  .partners__track{ flex-wrap:wrap; justify-content:center; gap:clamp(32px,5vw,56px); }
}

/* =====================================================
   ABOUT  (Quem somos)  — inside plum band
   ===================================================== */
.about{
  background:transparent;
  color:inherit;
  padding:clamp(48px,8vw,120px) 0 clamp(90px,13vw,180px);
  position:relative;
  overflow:visible;
  z-index:1;
}
.about__grid{ display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(30px,6vw,90px); align-items:start; position:relative; z-index:1; }
.about__eyebrow{ color:var(--coral-light); }
.about__kicker{
  font-family:var(--font-display); font-weight:900;
  font-size:clamp(40px,6vw,92px); line-height:.92; letter-spacing:-.03em; margin-top:14px;
}
.about__kicker.menu-open,
.about__body.menu-open{
  clip-path:polygon(0 0, 100% 0, 100% 0, 0 0);
  will-change:clip-path;
}
@keyframes menuOpen{
  from{ clip-path:polygon(0 0, 100% 0, 100% 0, 0 0); }
  to  { clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%); }
}
.no-gsap .about .menu-open{
  animation:menuOpen .6s cubic-bezier(.215,.61,.355,1) forwards;
}
.no-gsap .about__body.menu-open{ animation-delay:.2s; }
@media (prefers-reduced-motion: reduce){
  .about .menu-open{
    clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%);
    animation:none;
  }
}
.about__body{ font-size:clamp(20px,2.3vw,34px); font-weight:500; line-height:1.32; letter-spacing:-.01em; text-wrap:pretty; }
.about__body .hl{ color:var(--coral-light); font-weight:700; }

/* =====================================================
   PORTFOLIO  (Empresas)
   ===================================================== */
.portfolio{ background:var(--pink-bg); color:var(--ink); padding:clamp(72px,10vw,140px) 0; position:relative; overflow:hidden; }
.portfolio__deco{ position:absolute; pointer-events:none; }
.section-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:30px; flex-wrap:wrap; margin-bottom:clamp(34px,5vw,64px); }
.section-head h2{ font-family:var(--font-display); font-weight:900; font-size:clamp(40px,6.4vw,104px); line-height:.9; letter-spacing:-.035em; }
.section-head p{ max-width:34ch; color:var(--ink-dim); font-size:clamp(15px,1.4vw,18px); font-weight:500; }
.section-index{ font-family:var(--font-body); font-weight:600; letter-spacing:.2em; text-transform:uppercase; font-size:12px; color:var(--ink-faint); }

/* grid container — variants switch via [data-grid] on .portfolio__list */
.portfolio__list{ display:grid; gap:clamp(16px,1.6vw,22px); }
[data-grid="cards"]{ grid-template-columns:repeat(3,1fr); }
[data-grid="mosaic"]{ grid-template-columns:repeat(6,1fr); grid-auto-flow:dense; }
[data-grid="editorial"]{ grid-template-columns:1fr; gap:0; }

/* ── CARD (default) ── */
.co{
  position:relative; display:flex; flex-direction:column;
  background:var(--cream); border-radius:var(--radius-lg);
  padding:clamp(22px,2.4vw,32px);
  box-shadow:0 1px 0 rgba(42,19,32,.04), 0 30px 50px -42px rgba(42,19,32,.5);
  overflow:hidden; transition:transform .5s var(--ease), box-shadow .5s var(--ease);
}
.co::after{ content:""; position:absolute; left:0; right:0; top:0; height:4px; background:var(--crimson); transform:scaleX(0); transform-origin:left; transition:transform .5s var(--ease); }
.co:hover{ transform:translateY(-6px); box-shadow:0 40px 60px -38px rgba(42,19,32,.55); }
.co:hover::after{ transform:scaleX(1); }
.co__top{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:20px; }
.co__icon{
  flex-shrink:0; width:48px; height:48px; border-radius:13px;
  background:var(--crimson); color:var(--cream);
  display:grid; place-items:center;
}
.co__icon svg{ width:24px; height:24px; }
.co__cat{ font-weight:700; font-size:13px; letter-spacing:.04em; color:var(--crimson); text-transform:uppercase; margin-bottom:16px; }
.co__wordmark{ margin-bottom:14px; min-height:40px; display:flex; align-items:center; }
.co__logo{
  height:clamp(28px,3vw,40px);
  width:auto; max-width:100%;
  object-fit:contain; object-position:left center;
  display:block;
}
.co__desc{ font-size:clamp(14px,1.05vw,15.5px); line-height:1.5; color:var(--ink-dim); font-weight:500; flex:1; }
.co__link{
  margin-top:22px; display:inline-flex; align-items:center; gap:8px;
  font-weight:700; font-size:14px; color:var(--ink); align-self:flex-start;
  border-bottom:2px solid transparent; padding-bottom:2px; transition:border-color .3s, gap .3s;
}
.co__link svg{ width:15px; height:15px; transition:transform .3s var(--ease); }
.co__link:hover{ border-color:var(--crimson); gap:12px; }
.co__link:hover svg{ transform:translate(2px,-2px); }
.co__link.is-soon{ color:var(--ink-faint); pointer-events:none; }

/* ── MOSAIC variant: feature spans ── */
[data-grid="mosaic"] .co{ grid-column:span 2; }
[data-grid="mosaic"] .co:nth-child(1){ grid-column:span 3; }
[data-grid="mosaic"] .co:nth-child(2){ grid-column:span 3; }
[data-grid="mosaic"] .co:nth-child(7){ grid-column:span 6; flex-direction:row; align-items:center; gap:40px; }
[data-grid="mosaic"] .co:nth-child(7) .co__desc{ max-width:52ch; }
[data-grid="mosaic"] .co:nth-child(7) .co__body{ flex:1; }

/* ── EDITORIAL variant: full-width rows ── */
[data-grid="editorial"] .co{
  flex-direction:row; align-items:center; gap:clamp(24px,4vw,72px);
  border-radius:0; background:transparent; box-shadow:none;
  padding:clamp(28px,3.4vw,44px) 4px;
  border-top:1px solid rgba(42,19,32,.16);
}
[data-grid="editorial"] .co:last-child{ border-bottom:1px solid rgba(42,19,32,.16); }
[data-grid="editorial"] .co::after{ display:none; }
[data-grid="editorial"] .co:hover{ transform:none; }
[data-grid="editorial"] .co__top{ flex-direction:column; align-items:flex-start; gap:18px; width:clamp(160px,18vw,230px); margin-bottom:0; flex-shrink:0; }
[data-grid="editorial"] .co__cat{ margin-bottom:0; }
[data-grid="editorial"] .co__body{ flex:1; display:flex; flex-direction:column; }
[data-grid="editorial"] .co__wordmark{ margin-bottom:16px; }
[data-grid="editorial"] .co__desc{ max-width:60ch; font-size:clamp(15px,1.2vw,18px); }
[data-grid="editorial"] .co__num{
  font-family:var(--font-display); font-weight:900; font-size:clamp(28px,3vw,46px);
  color:var(--crimson); opacity:.18; letter-spacing:-.03em; align-self:flex-start;
}
.co__num{ display:none; }
[data-grid="editorial"] .co__num{ display:block; }

/* ── HORIZONTAL SCROLL (GSAP-driven) ── */
.portfolio{ padding:0; overflow:visible; }
.portfolio__track{
  display:flex; align-items:center; flex-wrap:nowrap;
  gap:clamp(80px,12vw,180px);
  padding:0 var(--gutter);
  padding-right:clamp(80px,12vw,160px);
  min-height:100vh;
  will-change:transform;
}
.portfolio__intro{
  flex-shrink:0; width:clamp(320px,40vw,540px);
  display:flex; flex-direction:column; justify-content:center;
  margin-right:clamp(24px,4vw,64px);
}
.portfolio__intro .section-head{
  flex-direction:column; align-items:flex-start;
  margin-bottom:0;
}

/* Nav Link Stagger — translateY(-100%) → 0, 600ms, 300ms stagger */
.link-stagger{ overflow:hidden; }
.link-stagger__inner{ will-change:transform; }
.no-gsap .link-stagger__inner{ transform:none; }
@media (prefers-reduced-motion: reduce){ .link-stagger__inner{ transform:none !important; } }

.portfolio .portfolio__list{
  display:flex; flex-wrap:nowrap;
  gap:clamp(18px,1.8vw,28px);
  align-items:stretch;
  padding-right:clamp(40px,6vw,80px);
}
.portfolio .portfolio__list .co{
  flex-shrink:0;
  width:clamp(320px,26vw,400px);
  transition:box-shadow .5s var(--ease);
}

/* =====================================================
   COMPANY WORDMARK PLACEHOLDERS (typographic)
   ===================================================== */
.wm{ font-family:var(--font-display); line-height:1; color:var(--ink); display:inline-flex; align-items:center; }
.wm--scupp{
  font-weight:900; font-size:24px; letter-spacing:-.02em; text-transform:uppercase;
  border:2.5px solid var(--ink); border-radius:8px 10px 9px 11px;
  padding:5px 9px 4px; transform:rotate(-2deg); position:relative;
}
.wm--scupp::after{ content:"."; }
.wm--sapucaia{ font-family:var(--font-body); font-weight:800; font-size:26px; letter-spacing:-.02em; text-transform:lowercase; }
.wm--sapucaia b{ color:#1f8a5b; }
.wm--svend{ font-weight:800; font-size:26px; letter-spacing:.04em; text-transform:uppercase; }
.wm--svend i{ font-style:normal; color:var(--coral-deep); }
.wm--aeos{ font-weight:800; font-size:27px; letter-spacing:.06em; text-transform:uppercase; color:#6d3bd6; }
.wm--jiro{ font-weight:900; font-size:30px; letter-spacing:-.02em; text-transform:lowercase; }
.wm--jiro .o{ display:inline-block; width:.62em; height:.62em; border:.16em solid var(--ink); border-radius:50%; position:relative; transform:translateY(.04em); }
.wm--jiro .o::after{ content:""; position:absolute; inset:32%; border-radius:50%; background:var(--ink); }
.wm--run{ font-family:var(--font-body); font-weight:800; font-size:23px; letter-spacing:-.01em; text-transform:lowercase; display:inline-flex; align-items:center; gap:7px; }
.wm--run .mk{ color:#19a0d8; font-weight:900; }
.wm--run small{ display:block; font-size:.5em; font-weight:600; letter-spacing:.06em; color:var(--ink-dim); margin-top:1px; }
.wm--shion{ font-weight:500; font-size:26px; letter-spacing:.02em; text-transform:uppercase; }
.wm--shion b{ font-weight:900; }

/* =====================================================
   CONTACT / CTA
   ===================================================== */
.contact{ background:var(--coral); color:var(--cream); padding:clamp(80px,12vw,170px) 0; position:relative; overflow:hidden; }
.contact__blob{ position:absolute; inset:0; z-index:0; }
.contact__inner{ position:relative; z-index:2; text-align:center; display:flex; flex-direction:column; align-items:center; }
.contact__eyebrow{ color:var(--cream); opacity:.8; }
.contact h2{ font-family:var(--font-display); font-weight:900; font-size:clamp(42px,8vw,128px); line-height:.9; letter-spacing:-.035em; margin:16px 0 8px; text-wrap:balance; }
.contact__mail{
  font-family:var(--font-display); font-weight:800; font-size:clamp(22px,3.6vw,52px);
  letter-spacing:-.02em; margin-top:24px; display:inline-block;
  border-bottom:3px solid var(--cream-faint); padding-bottom:6px; transition:border-color .3s;
}
.contact__mail:hover{ border-color:var(--cream); }
.contact__row{ display:flex; gap:14px; flex-wrap:wrap; justify-content:center; margin-top:42px; }
.contact .btn{ border-color:var(--cream); }
.contact .btn::before{ background:var(--plum); }
.contact .btn:hover{ color:var(--cream); border-color:var(--plum); }
.contact .btn--cream{ background:var(--cream); color:var(--crimson); border-color:var(--cream); }
.contact .btn--cream::before{ background:var(--plum); }
.contact .btn--cream:hover{ color:var(--cream); }

/* =====================================================
   FOOTER
   ===================================================== */
.footer{ background:var(--plum-deep); color:var(--cream); padding:clamp(54px,7vw,86px) 0 40px; }
.footer__top{ display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap; align-items:flex-start; }
.footer__logo{ width:clamp(140px,16vw,220px); height:auto; display:block; opacity:.9; }
.footer__cols{ display:flex; gap:clamp(40px,7vw,96px); flex-wrap:wrap; }
.footer__col h4{ font-size:12px; letter-spacing:.16em; text-transform:uppercase; opacity:.5; margin-bottom:16px; font-weight:600; }
.footer__col a, .footer__col p{ display:block; font-size:15px; font-weight:500; color:var(--cream-dim); margin-bottom:10px; transition:color .3s; }
.footer__col a:hover{ color:var(--cream); }
.footer__bottom{ display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-top:clamp(46px,7vw,80px); padding-top:26px; border-top:1px solid rgba(251,237,226,.14); font-size:13px; color:var(--cream-faint); }

/* =====================================================
   SCROLL REVEAL
   ===================================================== */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .9s var(--ease-out), transform .9s var(--ease-out); }
.reveal.in{ opacity:1; transform:none; }
.reveal[data-d="1"]{ transition-delay:.08s; }
.reveal[data-d="2"]{ transition-delay:.16s; }
.reveal[data-d="3"]{ transition-delay:.24s; }
.reveal[data-d="4"]{ transition-delay:.32s; }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; } }

/* =====================================================
   RESPONSIVE
   ===================================================== */
@media (max-width:980px){
  [data-grid="cards"]{ grid-template-columns:repeat(2,1fr); }
  [data-grid="mosaic"]{ grid-template-columns:repeat(2,1fr); }
  [data-grid="mosaic"] .co,
  [data-grid="mosaic"] .co:nth-child(n){ grid-column:span 1 !important; flex-direction:column !important; }
  .about__grid{ grid-template-columns:1fr; gap:30px; }
  .hero{ padding:130px var(--gutter) 130px; }
  .hero__wordmark .scupp{ font-size:clamp(82px,16vw,180px); }
  .hero__headline{ font-size:clamp(20px,2.8vw,28px); }
  .hero__grid-lines{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:760px){
  .nav__links{ display:none; }
  .nav__burger{ display:inline-flex; }
  .stats__grid{ grid-template-columns:1fr; gap:0; }
  .stat + .stat{ border-left:0; border-top:1px solid rgba(42,19,32,.14); padding-left:0; padding-top:28px; margin-top:28px; }
  [data-grid="cards"], [data-grid="mosaic"]{ grid-template-columns:1fr; }
  [data-grid="editorial"] .co{ flex-direction:column; align-items:flex-start; gap:18px; }
  [data-grid="editorial"] .co__top{ flex-direction:row; align-items:center; width:auto; }
  .portfolio{ padding:clamp(72px,10vw,140px) 0; overflow:hidden; }
  .portfolio__track{ flex-direction:column; min-height:auto; gap:30px; }
  .portfolio__intro{ width:100%; }
  .portfolio .portfolio__list{ flex-direction:column; padding-right:0; }
  .portfolio .portfolio__list .co{ width:100%; transition:transform .5s var(--ease), box-shadow .5s var(--ease); }

  /* hero — mobile */
  .hero{ min-height:100svh; padding:120px var(--gutter) 110px; }
  .hero__inner{ gap:22px; }
  .hero__badge{ font-size:10.5px; letter-spacing:.1em; padding:7px 14px 7px 11px; }
  .hero__badge span:last-child{ white-space:normal; }
  .hero__wordmark .scupp{ font-size:clamp(64px,22vw,120px); letter-spacing:-.035em; }
  .hero__wordmark .scupp::before{ transform:translate(3px,3px); }
  .hero__wordmark .ventures{ font-size:12px; letter-spacing:.42em; }
  .hero__headline{ font-size:clamp(18px,4.6vw,24px); max-width:22ch; }
  .hero__ctas{ flex-direction:column; gap:14px; width:100%; }
  .hero__cta{ width:100%; justify-content:center; padding:15px 22px; }
  .hero__cta--eco{ width:100%; justify-content:center; padding:14px 22px; }
  .hero__cta-ghost{ font-size:13px; }
  .hero__foot{ left:var(--gutter); right:var(--gutter); bottom:22px; }
  .scrollcue{ font-size:10px; gap:8px; }
  .scrollcue__text{ display:none; }
  .scrollcue__arrow{ width:22px; height:22px; opacity:1; }
  .hero__grid-lines{ display:none; }
  .hero__cursor{ display:none; }
  .blob{ filter:blur(40px); opacity:.4; }
}
@media (max-width:420px){
  .hero{ padding:110px var(--gutter) 100px; }
  .hero__wordmark .scupp{ font-size:clamp(58px,20vw,96px); }
  .hero__badge{ font-size:10px; padding:6px 12px 6px 10px; }
  .hero__headline{ font-size:18px; line-height:1.3; }
}

/* mobile menu drawer */
.drawer{
  position:fixed; inset:0; z-index:120; background:var(--plum); color:var(--cream);
  display:flex; flex-direction:column; justify-content:center; gap:8px; padding:var(--gutter);
  transform:translateY(-100%); transition:transform .6s var(--ease); pointer-events:none;
}
.drawer.open{ transform:translateY(0); pointer-events:auto; }
.drawer a{ font-family:var(--font-display); font-weight:900; font-size:38px; letter-spacing:-.02em; padding:6px 0; }
.drawer__close{ position:absolute; top:22px; right:var(--gutter); background:none; border:0; color:var(--cream); font-size:26px; cursor:pointer; }