/* ============================================================
   CLTR. — Culture Lab — Design System
   Brutalism sofisticado / editorial / streetwear premium
   ============================================================ */

:root{
  --dark:#191919;
  --light:#fbf8fb;
  --ink:#191919;
  --gray:#a6a6a6;
  --gray-text:#6e6e72;
  --orange:#ff5b2e;
  --pink:#ff5ea8;
  --violet:#7b3cff;
  --blue:#2d5bff;
  --grad:linear-gradient(90deg,var(--orange),var(--pink) 38%,var(--violet) 68%,var(--blue));
  --line:#2a2a2a;
  --line-light:#e2e0ea;
  --maxw:1360px;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--light);color:var(--ink);
  font-family:'Inter',sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
::selection{background:var(--orange);color:#fff;}
.script{font-family:'Italianno',cursive;line-height:1;}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 6vw;}
@media (max-width:600px){ .wrap{padding:0 22px;} }

.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);}

/* ---------- Skip link (a11y) ---------- */
.skip-link{
  position:absolute;left:-999px;top:0;background:var(--orange);color:#fff;
  padding:10px 18px;z-index:999;font-size:14px;font-weight:700;
}
.skip-link:focus{left:0;}

/* ---------- Top bar ---------- */
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:200;
  display:flex;align-items:center;justify-content:space-between;
  padding:22px 6vw;
  transition:background .35s ease,padding .35s ease;
}
.topbar.solid{background:rgba(25,25,25,.78);backdrop-filter:blur(14px);padding:14px 6vw;}

/* Logo colour swap: default = white/light logo (for dark hero backgrounds).
   .on-light body sections show the dark logo instead, EXCEPT once the
   topbar goes solid (dark) on scroll, or the dark menu overlay is open —
   in both those cases the white logo is needed again regardless of page. */
.on-light .logo-on-dark{display:none;}
.on-light .logo-on-light{display:block;}
.topbar.solid .logo-on-light{display:none;}
.topbar.solid .logo-on-dark{display:block;}
.menu-open .logo-on-light{display:none;}
.menu-open .logo-on-dark{display:block;}
.topbar.on-light{ } /* toggled per-page when hero bg is light */
.brand{
  display:flex;align-items:center;position:relative;
}
.logo-img{height:22px;width:auto;display:block;position:relative;z-index:1;}

/* Soft "mancha" patch behind the logo so it stays legible when content
   scrolls underneath the (semi-)transparent topbar. Colour swaps in
   lockstep with the logo itself: a black patch backs the white logo,
   a white patch backs the dark logo — never overlapping visibly. */
.brand-patch{
  position:absolute;
  inset:-14px -20px;
  border-radius:50%;
  filter:blur(15px);
  z-index:0;
  pointer-events:none;
}
.brand-patch.logo-on-dark{background:var(--dark);}
.brand-patch.logo-on-light{background:var(--light);}
.logo-on-light{display:none;}

.menu-btn{
  position:relative;z-index:210;width:52px;height:52px;border:none;background:none;
  cursor:pointer;display:flex;flex-direction:column;justify-content:center;gap:6px;align-items:flex-end;
}
.menu-btn span{display:block;height:2px;background:#fff;transition:all .35s cubic-bezier(.22,1,.36,1);}
.menu-btn span:nth-child(1){width:28px;}
.menu-btn span:nth-child(2){width:20px;}
.on-light .menu-btn span{background:var(--ink);}
.menu-open .menu-btn span{background:#fff !important;}
.menu-open .menu-btn span:nth-child(1){width:28px;transform:translateY(4px) rotate(45deg);}
.menu-open .menu-btn span:nth-child(2){width:28px;transform:translateY(-4px) rotate(-45deg);}

.menu-label{font-size:12px;font-weight:700;letter-spacing:.08em;color:#fff;margin-right:14px;}
.on-light .menu-label{color:var(--ink);}
.menu-open .menu-label{color:#fff !important;}
@media (max-width:600px){ .menu-label{display:none;} }

/* ---------- Full-screen menu overlay ---------- */
.menu-overlay{
  position:fixed;inset:0;background:var(--dark);color:#fff;z-index:190;
  display:flex;flex-direction:column;justify-content:space-between;
  padding:110px 6vw 50px;
  transform:translateY(-100%);
  transition:transform .6s cubic-bezier(.16,1,.3,1);
  overflow-y:auto;
}
.menu-open .menu-overlay{transform:translateY(0);}
.menu-cols{display:grid;grid-template-columns:1.2fr .8fr;gap:6vw;}
@media (max-width:860px){ .menu-cols{grid-template-columns:1fr;gap:40px;} }

.menu-nav a{
  display:block;font-size:clamp(34px,6vw,72px);font-weight:800;letter-spacing:-.02em;
  padding:10px 0;border-bottom:1px solid #2a2a2a;color:#e9e9ea;
  transition:color .3s ease,padding-left .3s ease;
}
.menu-nav a:hover, .menu-nav a:focus{color:var(--orange);padding-left:14px;}
.menu-nav .mno{font-size:13px;color:#6b6b72;margin-right:16px;font-weight:600;vertical-align:middle;}

.menu-services{padding-top:8px;}
.menu-services .mk{font-size:12px;font-weight:700;letter-spacing:.08em;color:#6b6b72;margin-bottom:18px;}
.menu-services ul{list-style:none;display:flex;flex-direction:column;gap:14px;}
.menu-services li a{font-size:16px;color:#c6c6cb;transition:color .3s ease;}
.menu-services li a:hover{color:var(--orange);}

.menu-foot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;
  padding-top:34px;border-top:1px solid #2a2a2a;font-size:13px;color:#8b8b91;}
.menu-foot a{color:#e9e9ea;}
.menu-foot a:hover{color:var(--orange);}

/* ---------- Sections shared ---------- */
section{padding:min(13vw,150px) 0;}
.kicker{font-size:13px;font-weight:600;letter-spacing:.05em;color:var(--gray-text);margin-bottom:20px;}
.dark .kicker{color:#8b8b91;}
h1,h2,h3{letter-spacing:-.025em;line-height:1.02;text-transform:uppercase;}
h2{font-size:clamp(32px,4.6vw,58px);font-weight:800;}
.accent{font-family:'Italianno',cursive;color:var(--orange);font-size:clamp(36px,5.6vw,66px);display:block;line-height:1;margin-top:4px;font-weight:400;text-transform:none;}
p.lead{font-size:16px;line-height:1.8;color:var(--gray-text);max-width:52ch;}
.dark p.lead{color:#b9b9bf;}

.grid-2{display:grid;grid-template-columns:1.1fr .9fr;gap:6vw;align-items:start;}
@media (max-width:860px){ .grid-2{grid-template-columns:1fr;gap:40px;} }

.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1);}
.reveal.in{opacity:1;transform:translateY(0);}

.btn{
  display:inline-flex;align-items:center;gap:10px;background:var(--ink);color:#fff;
  border:none;padding:17px 34px;font-size:14px;font-weight:700;letter-spacing:.03em;
  cursor:pointer;position:relative;overflow:hidden;border-radius:0;
}
.btn span{position:relative;z-index:1;}
.btn::before{content:'';position:absolute;inset:0;background:var(--grad);transform:translateX(-101%);
  transition:transform .5s cubic-bezier(.22,1,.36,1);}
.btn:hover::before{transform:translateX(0);}
.btn.ghost{background:transparent;border:1px solid var(--ink);color:var(--ink);}
.dark .btn.ghost{border-color:#fff;color:#fff;}

/* Solid button on a dark background needs to invert (var(--ink) would
   otherwise match the section background and disappear). */
.dark .btn:not(.ghost),
.on-dark-bg .btn:not(.ghost){
  background:#fff;color:var(--ink);
}
.dark .btn:not(.ghost):hover span,
.on-dark-bg .btn:not(.ghost):hover span{
  color:#fff;
}

/* ---------- Index list (services / process) ---------- */
.idx-list{border-top:1px solid var(--line);}
.dark .idx-list{border-top-color:#2a2a2a;}
.idx-item{
  border-bottom:1px solid var(--line);padding:30px 0;
  display:grid;grid-template-columns:60px 1fr auto;align-items:center;gap:22px;position:relative;
}
.dark .idx-item{border-bottom-color:#2a2a2a;}
.idx-item .no{font-size:13px;color:var(--gray-text);font-weight:600;}
.idx-item h3{font-size:clamp(22px,3.4vw,36px);font-weight:700;transition:transform .4s cubic-bezier(.22,1,.36,1),color .3s ease;}
.idx-item .d{font-size:13px;color:var(--gray-text);max-width:280px;text-align:right;justify-self:end;}
.idx-item::before{content:'';position:absolute;left:0;bottom:-1px;height:1px;width:0;background:var(--grad);transition:width .55s cubic-bezier(.22,1,.36,1);}
.idx-item:hover::before{width:100%;}
.idx-item:hover h3{transform:translateX(12px);color:var(--orange);}
@media (max-width:720px){ .idx-item{grid-template-columns:36px 1fr;} .idx-item .d{display:none;} }

/* ---------- Portfolio grid ---------- */
.port-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:2px;background:var(--line-light);}
.port-card{background:var(--light);aspect-ratio:4/3;position:relative;overflow:hidden;}
.port-card a{display:block;height:100%;}
.port-card .field{position:absolute;inset:0;transition:transform .8s cubic-bezier(.16,1,.3,1);}
.port-card:hover .field{transform:scale(1.06);}
.port-card .meta{position:absolute;left:22px;bottom:22px;color:#fff;z-index:2;}
.port-card .meta .no{font-size:12px;color:rgba(255,255,255,.6);}
.port-card .meta h4{font-size:21px;font-weight:700;margin-top:6px;}
.port-card .meta .cat{font-size:12px;color:rgba(255,255,255,.75);margin-top:3px;}
@media (max-width:720px){ .port-grid{grid-template-columns:1fr;} }

/* ---------- Forms ---------- */
form{display:flex;flex-direction:column;gap:26px;}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
@media (max-width:560px){ .f-row{grid-template-columns:1fr;} }
.f-group label{font-size:12px;font-weight:600;letter-spacing:.04em;color:var(--gray-text);
  display:block;margin-bottom:10px;text-transform:uppercase;}
.f-group input,.f-group select,.f-group textarea{
  width:100%;background:transparent;border:none;border-bottom:1px solid #cfcedb;
  padding:10px 2px;font-size:17px;font-family:'Inter',sans-serif;color:var(--ink);outline:none;
  transition:border-color .3s ease;
}
.f-group textarea{resize:vertical;min-height:70px;}
.f-group input:focus,.f-group select:focus,.f-group textarea:focus{border-color:var(--orange);}
.honeypot{position:absolute;left:-9999px;top:-9999px;opacity:0;}
.form-msg{font-size:13px;font-weight:600;min-height:18px;}
.form-msg.ok{color:#2ba84a;}
.form-msg.err{color:var(--orange);}

/* ---------- Footer ---------- */
footer{background:var(--dark);color:#8b8b91;padding:60px 0 30px;}
.footer-top{display:grid;grid-template-columns:1.2fr .8fr .8fr;gap:6vw;padding-bottom:40px;border-bottom:1px solid #2a2a2a;}
@media (max-width:860px){ .footer-top{grid-template-columns:1fr;gap:36px;} }
.footer-top h4{color:#fff;font-size:13px;font-weight:700;letter-spacing:.05em;margin-bottom:16px;text-transform:uppercase;}
.footer-top a{display:block;color:#8b8b91;font-size:14px;margin-bottom:10px;transition:color .3s ease;}
.footer-top a:hover{color:#fff;}
.footer-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:12px;padding-top:22px;}

/* ---------- Utility: marquee ---------- */
.marquee-wrap{background:var(--dark);overflow:hidden;padding:26px 0;}
.marquee{display:flex;white-space:nowrap;animation:mscroll 34s linear infinite;width:max-content;}
.marquee span{font-family:'Italianno',cursive;font-size:38px;color:#fff;padding:0 30px;display:flex;align-items:center;gap:30px;}
.marquee span i{width:5px;height:5px;border-radius:50%;background:var(--orange);display:inline-block;}
@keyframes mscroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;}
}

/* ---------- Scroll progress bar ---------- */
.scroll-progress{
  position:fixed;top:0;left:0;right:0;height:3px;z-index:300;
  background:var(--grad);transform:scaleX(0);transform-origin:left;
  transition:transform .1s linear;
  pointer-events:none;
}

/* ---------- Hero title stagger-in ---------- */
.hero-line{overflow:hidden;display:block;}
.hero-line span{
  display:inline-block;transform:translateY(112%);opacity:0;
  animation:riseIn .9s cubic-bezier(.16,1,.3,1) forwards;
}
.hero-line:nth-child(1) span{animation-delay:.15s;}
.hero-line:nth-child(2) span{animation-delay:.3s;}
@keyframes riseIn{to{transform:translateY(0);opacity:1;}}

/* ---------- Staggered group reveals ----------
   Add .stagger to a container; its direct children with .reveal
   get an increasing transition-delay so they cascade in one after
   another instead of appearing all at once. */
.stagger > .reveal:nth-child(1){transition-delay:.05s;}
.stagger > .reveal:nth-child(2){transition-delay:.14s;}
.stagger > .reveal:nth-child(3){transition-delay:.23s;}
.stagger > .reveal:nth-child(4){transition-delay:.32s;}
.stagger > .reveal:nth-child(5){transition-delay:.41s;}

/* ---------- Magnetic buttons ---------- */
.btn{transition:transform .35s cubic-bezier(.22,1,.36,1),background .3s ease;}

/* ---------- Portfolio card tilt (JS sets --rx/--ry via inline style) ---------- */
.port-card{
  transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform .5s cubic-bezier(.22,1,.36,1);
}
.port-card .field{transition:transform .5s cubic-bezier(.22,1,.36,1);}