/* =====================================================
   DAKPION IMC — 360° Marketing Solutions · v4
   Light theme built only on the two logo colours:
   Graphite #58595B  ·  Lime #9BCB3C
   Fonts: Syne (display) · Inter (text)
   ===================================================== */

:root {
  /* Lime family */
  --lime:       #9BCB3C;
  --lime-hi:    #B4DD62;
  --lime-soft:  #EAF4D6;
  --lime-wash:  #F4F9EA;
  --lime-deep:  #557D12;   /* lime for text on white (AA) */

  /* Graphite family */
  --g-900: #2C2D2F;        /* headings */
  --g-800: #3A3B3D;
  --g-700: #4A4B4D;        /* body text */
  --g:     #58595B;        /* logo grey */
  --g-500: #76777A;        /* muted */
  --g-300: #B9BAB8;
  --line:  #E4E5E0;
  --line-2:#D6D8D1;

  /* Surfaces */
  --white: #FFFFFF;
  --paper: #F6F7F3;
  --paper-2:#EDEFE8;

  --shadow-sm: 0 2px 10px rgba(44,45,47,.05);
  --shadow-md: 0 14px 40px rgba(44,45,47,.08);
  --shadow-lg: 0 30px 80px rgba(44,45,47,.14);

  --r-md: 18px;
  --r-lg: 28px;
  --r-xl: 40px;
  --r-full: 999px;

  --ff-d: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
  --ff: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --max-w: 1320px;
  --gutter: clamp(18px, 4vw, 44px);
  --ease: cubic-bezier(.22,1,.36,1);
  --ease-io: cubic-bezier(.76,0,.24,1);
}

/* ── Reset ───────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
html.lenis, html.lenis body { height:auto; }
.lenis.lenis-smooth { scroll-behavior:auto !important; }
body {
  margin:0; font-family:var(--ff); font-size:16px; line-height:1.65;
  color:var(--g-700); background:var(--white);
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
main { overflow-x:clip; }
img, svg { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }
ul { list-style:none; margin:0; padding:0; }
button, input, textarea, select { font:inherit; color:inherit; }
button { cursor:pointer; background:none; border:0; padding:0; }
h1,h2,h3,h4 { font-family:var(--ff-d); color:var(--g-900); margin:0 0 .45em; font-weight:700; line-height:1; letter-spacing:-.035em; }
h2 { font-size:clamp(38px, 6vw, 92px); font-weight:800; }
h3 { font-size:clamp(22px, 2.2vw, 30px); letter-spacing:-.02em; line-height:1.1; }
h4 { font-size:19px; letter-spacing:-.01em; line-height:1.2; }
p { margin:0 0 1em; }
::selection { background:var(--lime); color:var(--g-900); }
:focus-visible { outline:2.5px solid var(--lime-deep); outline-offset:3px; border-radius:8px; }
.icon { width:22px; height:22px; flex:none; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* Accent treatments */
.hl { position:relative; display:inline-block; z-index:0; }
.hl::after {
  content:''; position:absolute; left:-.06em; right:-.06em; bottom:.06em; height:.34em;
  background:var(--lime); z-index:-1; border-radius:.08em;
  transform-origin:left; transform:scaleX(var(--hl, 1));
}
.stroke { color:transparent; -webkit-text-stroke:1.5px var(--g-900); }
.lime-text { color:var(--lime-deep); }

/* ── Layout ──────────────────────────────────────── */
.container { max-width:var(--max-w); margin:0 auto; padding:0 var(--gutter); }
.section { padding:clamp(88px, 12vw, 170px) 0; position:relative; }
.section--paper { background:var(--paper); }
.section--lime { background:var(--lime); color:var(--g-900); }
.section--lime p { color:var(--g-800); }
.round-top { border-radius:var(--r-xl) var(--r-xl) 0 0; }
.round { border-radius:var(--r-xl); }

.label {
  display:inline-flex; align-items:center; gap:10px;
  font-size:12.5px; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:var(--g); margin-bottom:26px;
}
.label::before { content:''; width:10px; height:10px; border-radius:50%; background:var(--lime); box-shadow:0 0 0 5px var(--lime-soft); }
.section--lime .label { color:var(--g-900); }
.section--lime .label::before { background:var(--g-900); box-shadow:0 0 0 5px rgba(44,45,47,.12); }
.lead { font-size:clamp(17px, 1.4vw, 20px); color:var(--g-500); max-width:620px; line-height:1.6; }

.head { display:flex; justify-content:space-between; align-items:flex-end; gap:24px 48px; flex-wrap:wrap; margin-bottom:clamp(44px, 6vw, 80px); }
.head > div { max-width:860px; }
.head h2 { margin:0; }
.head .lead { margin:0; }

/* ── Buttons ─────────────────────────────────────── */
.btn {
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:12px;
  padding:17px 28px; border-radius:var(--r-full); overflow:hidden; isolation:isolate;
  font-weight:600; font-size:15px; line-height:1; white-space:nowrap;
  border:1.5px solid transparent; transition:color .45s var(--ease), border-color .3s;
}
.btn::before {
  content:''; position:absolute; inset:0; z-index:-1; border-radius:inherit;
  transform:translateY(101%); transition:transform .5s var(--ease);
}
.btn:hover::before { transform:none; }
.btn .icon { width:17px; height:17px; transition:transform .45s var(--ease); }
.btn:hover .icon { transform:rotate(-45deg); }
.btn--lime { background:var(--lime); color:var(--g-900); }
.btn--lime::before { background:var(--g-900); }
.btn--lime:hover { color:#fff; }
.btn--grey { background:var(--lime); color:var(--g-900); }
.btn--grey::before { background:var(--g-900); }
.btn--grey:hover { color:#fff; }
.btn--line { border-color:var(--lime); color:var(--g-900); background:transparent; }
.btn--line::before { background:var(--lime); }
.btn--line:hover { color:var(--g-900); border-color:var(--lime); }
.btn--lg { padding:21px 34px; font-size:16px; }

.link { display:inline-flex; align-items:center; gap:8px; font-weight:600; color:var(--g-900); position:relative; }
.link::after { content:''; position:absolute; left:0; right:0; bottom:-3px; height:1.5px; background:currentColor; transform-origin:right; transform:scaleX(0); transition:transform .5s var(--ease); }
.link:hover::after { transform-origin:left; transform:scaleX(1); }
.link .icon { width:16px; height:16px; }

.btn-orb {
  position:relative; display:grid; place-items:center; text-align:center;
  width:clamp(150px, 16vw, 210px); aspect-ratio:1; border-radius:50%;
  background:var(--lime); color:var(--g-900); font-family:var(--ff-d); font-weight:700; font-size:17px; line-height:1.15;
  transition:background .4s, color .4s;
}
.btn-orb:hover { background:var(--g-900); color:#fff; }
.btn-orb > span { display:block; }
.btn-orb .icon { width:26px; height:26px; margin:10px auto 0; }

.tag { display:inline-flex; padding:7px 14px; border-radius:var(--r-full); border:1px solid var(--line-2); font-size:13px; font-weight:500; color:var(--g-700); background:var(--white); }
.tags { display:flex; flex-wrap:wrap; gap:8px; }

/* ── Chrome: progress, cursor, loader, transition ─ */
.progress { position:fixed; top:0; left:0; right:0; height:3px; background:var(--lime); transform-origin:left; transform:scaleX(0); z-index:200; pointer-events:none; }

.cursor, .cursor-dot { position:fixed; top:0; left:0; pointer-events:none; z-index:300; border-radius:50%; opacity:0; }
.cursor {
  width:44px; height:44px; margin:-22px 0 0 -22px; border:1.5px solid var(--g);
  display:grid; place-items:center; transition:width .35s var(--ease), height .35s var(--ease), margin .35s var(--ease), background .35s, border-color .35s, opacity .3s;
}
.cursor span { font-size:12.5px; font-weight:700; color:var(--g-900); opacity:0; transition:opacity .2s; letter-spacing:.02em; }
.cursor-dot { width:6px; height:6px; margin:-3px 0 0 -3px; background:var(--g-900); }
.cursor.is-hover { width:64px; height:64px; margin:-32px 0 0 -32px; border-color:var(--lime); background:rgba(155,203,60,.18); }
.cursor.is-label { width:96px; height:96px; margin:-48px 0 0 -48px; background:var(--lime); border-color:var(--lime); }
.cursor.is-label span { opacity:1; }
.has-cursor .cursor, .has-cursor .cursor-dot { opacity:1; }

.loader { position:fixed; inset:0; z-index:400; background:var(--lime); display:none; align-items:flex-end; justify-content:space-between; padding:var(--gutter); }
.show-loader .loader { display:flex; }
.loader b { font-family:var(--ff-d); font-weight:800; font-size:clamp(90px, 22vw, 320px); line-height:.8; letter-spacing:-.06em; color:var(--g-900); }
.loader span { font-family:var(--ff-d); font-weight:700; font-size:18px; color:var(--g-900); }

.pt { position:fixed; inset:0; z-index:350; background:var(--lime); transform:translateY(100%); pointer-events:none; }
.pt::after { content:''; position:absolute; inset:0; background:var(--g-900); transform:translateY(100%); transition:inherit; }
.pt-enter .pt { transform:none; }

/* ── Header ──────────────────────────────────────── */
.site-header { position:fixed; top:0; left:0; right:0; z-index:100; padding:22px 0; transition:transform .6s var(--ease), padding .4s var(--ease), background .4s, box-shadow .4s; }
.site-header.is-scrolled { padding:12px 0; background:rgba(255,255,255,.86); backdrop-filter:saturate(1.6) blur(16px); -webkit-backdrop-filter:saturate(1.6) blur(16px); box-shadow:0 1px 0 var(--line); }
.site-header.is-hidden { transform:translateY(-110%); }
.header-inner { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.brand img { height:40px; width:auto; }
.nav { display:flex; gap:2px; padding:5px; border-radius:var(--r-full); background:rgba(246,247,243,.8); border:1px solid var(--line); backdrop-filter:blur(10px); }
.nav a { position:relative; display:block; overflow:hidden; padding:10px 16px; border-radius:var(--r-full); font-size:14px; font-weight:500; color:var(--g-700); transition:background .3s, color .3s; }
.nav a span { display:block; transition:transform .45s var(--ease); }
.nav a::after { content:attr(data-text); position:absolute; left:16px; right:16px; top:100%; padding-top:10px; transition:transform .45s var(--ease); }
.nav a:hover span, .nav a:hover::after { transform:translateY(-100%); }
.nav a:hover::after { transform:translateY(calc(-100% - 10px)); }
.nav li.active a { background:var(--g-900); color:#fff; }
.header-right { display:flex; align-items:center; gap:10px; }
.menu-btn { display:none; align-items:center; gap:10px; padding:12px 18px; border-radius:var(--r-full); background:var(--lime); color:var(--g-900); font-weight:600; font-size:14px; }
.menu-btn i { display:grid; gap:4px; }
.menu-btn i b { display:block; width:18px; height:2px; background:currentColor; border-radius:2px; transition:transform .4s var(--ease); }
.menu-open .brand { background:#fff; border-radius:14px; padding:6px 10px; margin:-6px -10px; }
.menu-open .menu-btn i b:first-child { transform:translateY(3px) rotate(45deg); }
.menu-open .menu-btn i b:last-child { transform:translateY(-3px) rotate(-45deg); }

.menu { position:fixed; inset:0; z-index:95; background:var(--lime); padding:110px var(--gutter) 32px; display:flex; flex-direction:column; justify-content:space-between; clip-path:circle(0% at calc(100% - 60px) 44px); transition:clip-path .8s var(--ease-io); visibility:hidden; }
.menu-open .menu { clip-path:circle(150% at calc(100% - 60px) 44px); visibility:visible; }
.menu ul a { display:block; font-family:var(--ff-d); font-weight:800; font-size:clamp(40px, 11vw, 72px); line-height:1.05; letter-spacing:-.04em; color:var(--g-900); transform:translateY(40px); opacity:0; transition:transform .7s var(--ease), opacity .7s var(--ease); transition-delay:calc(.25s + var(--i) * .05s); }
.menu-open .menu ul a { transform:none; opacity:1; }
.menu-foot { display:flex; flex-direction:column; gap:6px; font-size:15px; color:var(--g-800); }

/* ── Hero ────────────────────────────────────────── */
.hero { position:relative; min-height:100svh; display:flex; flex-direction:column; justify-content:center; padding:120px 0 40px; overflow:hidden; background:var(--white); }
.hero-bg { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.hero-bg::before { content:''; position:absolute; inset:0; background-image:radial-gradient(var(--line-2) 1.2px, transparent 1.2px); background-size:28px 28px; mask-image:radial-gradient(ellipse 80% 70% at 70% 35%, #000 10%, transparent 70%); -webkit-mask-image:radial-gradient(ellipse 80% 70% at 70% 35%, #000 10%, transparent 70%); }
.blob { position:absolute; border-radius:50%; filter:blur(60px); will-change:transform; }
.blob--1 { width:46vmax; height:46vmax; right:-12vmax; top:-14vmax; background:radial-gradient(circle, rgba(155,203,60,.55), rgba(155,203,60,0) 65%); }
.blob--2 { width:30vmax; height:30vmax; left:-10vmax; bottom:-12vmax; background:radial-gradient(circle, rgba(88,89,91,.16), rgba(88,89,91,0) 65%); }
.hero .container { position:relative; width:100%; }
.hero-title { font-family:var(--ff-d); font-weight:800; font-size:clamp(40px, 5.3vw, 86px); line-height:.9; letter-spacing:-.05em; color:var(--g-900); margin:0 0 26px; text-transform:uppercase; }
.hero-title .ln { display:block; overflow:hidden; padding:.02em 0 .04em; margin-bottom:-.04em; }
.hero-title .lni { display:inline-flex; align-items:center; gap:.18em; }
.hero-badge { position:relative; width:.82em; height:.82em; flex:none; border-radius:50%; background:var(--lime); display:grid; place-items:center; }
.hero-badge svg { position:absolute; inset:0; width:100%; height:100%; animation:spin 14s linear infinite; }
.hero-badge text { font-family:var(--ff); font-size:10.5px; font-weight:700; letter-spacing:.2em; fill:var(--g-900); text-transform:uppercase; }
.hero-badge b { font-family:var(--ff-d); font-size:.22em; letter-spacing:-.04em; color:var(--g-900); }
.rotator { position:relative; display:inline-grid; overflow:hidden; vertical-align:bottom; color:var(--lime-deep); line-height:1; padding-bottom:.02em; }
.rotator > span { grid-area:1/1; transform:translateY(105%); transition:transform .9s var(--ease); }
.rotator > span.is-on { transform:none; }
.rotator .dot { font-style:normal; margin-left:-.12em; }
.rotator > span.is-out { transform:translateY(-105%); }
.hero-foot { display:grid; grid-template-columns:1.1fr auto auto; gap:32px; align-items:end; padding-top:28px; border-top:1px solid var(--line); }
.hero-foot p { margin:0; max-width:520px; font-size:clamp(16px, 1.3vw, 19px); color:var(--g-500); }
.hero-foot p b { color:var(--g-900); font-weight:600; }
.hero-cta { display:flex; gap:10px; flex-wrap:wrap; }
.scroll-hint { display:flex; align-items:center; gap:12px; font-size:12.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--g-500); }
.scroll-hint i { position:relative; width:1.5px; height:46px; background:var(--line-2); overflow:hidden; }
.scroll-hint i::after { content:''; position:absolute; left:0; top:0; width:100%; height:40%; background:var(--g-900); animation:drip 1.8s var(--ease-io) infinite; }
@keyframes drip { 0% { transform:translateY(-100%); } 100% { transform:translateY(260%); } }
@keyframes spin { to { transform:rotate(360deg); } }


/* ── Hero: minimal, pinned 360° ring drawn on scroll ── */
.hero { min-height:0; display:block; padding:0; overflow:visible; background:var(--white); }
.hero-pin { position:relative; height:100svh; min-height:620px; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.hero-ring { position:absolute; left:50%; top:50%; width:min(84vmin, 720px); height:min(84vmin, 720px); transform:translate(-50%, -50%) rotate(-90deg); pointer-events:none; }
.hero-ring circle { fill:none; }
.hr-track { stroke:var(--line); stroke-width:1.2; }
.hr-prog { stroke:var(--lime); stroke-width:3; stroke-linecap:round; stroke-dasharray:1759.3; stroke-dashoffset:1759.3; }
.hero-center { position:relative; z-index:1; text-align:center; }
.hero-center > *:not(.hero-ring):not(.ring-words) { position:relative; z-index:1; }
.ring-words { position:absolute; left:50%; top:50%; width:min(84vmin, 720px); height:min(84vmin, 720px); transform:translate(-50%, -50%); pointer-events:none; z-index:2; }
.rw { position:absolute; transform:translate(-50%, -50%); padding:8px 16px; border-radius:var(--r-full); background:var(--white); border:1.5px solid var(--lime); box-shadow:var(--shadow-sm); font-family:var(--ff-d); font-size:14px; font-weight:700; color:var(--g-900); white-space:nowrap; }
.rw::before { content:''; display:inline-block; width:7px; height:7px; margin-right:8px; border-radius:50%; background:var(--lime); vertical-align:middle; position:relative; top:-1px; }
.hero-kicker { display:inline-block; margin-bottom:28px; font-size:13px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--g-500); }
.hero .hero-title { font-size:clamp(40px, 6vw, 92px); line-height:1; letter-spacing:-.035em; margin:0 0 28px; }
.hero .hero-title .ln { display:block; }
.hero .hero-title .lni { display:inline-block; }
.hero-sub { max-width:500px; margin:0 auto 34px; font-size:clamp(16px, 1.25vw, 18px); color:var(--g-500); }
.hero-cta { justify-content:center; }
.hero-deg { position:absolute; right:var(--gutter); bottom:40px; font-family:var(--ff-d); font-weight:700; font-size:15px; letter-spacing:.04em; color:var(--g-500); }
.hero-deg b { font-weight:700; color:var(--g-900); font-variant-numeric:tabular-nums; }
.hero-pin .scroll-hint { position:absolute; left:var(--gutter); bottom:40px; }
.js .hero-center { visibility:hidden; }
.no-anim .hero-center { visibility:visible !important; }
.no-anim .hr-prog { stroke-dashoffset:0; }

/* ── Ring (rotating text) ────────────────────────── */
.ring { position:absolute; width:clamp(180px, 26vw, 390px); aspect-ratio:1; right:var(--gutter); top:clamp(100px, 12vh, 150px); pointer-events:none; }
.ring svg { width:100%; height:100%; animation:spin 28s linear infinite; }
.ring text { font-family:var(--ff-d); font-weight:700; font-size:15.5px; letter-spacing:.24em; text-transform:uppercase; fill:var(--g); }
.ring-core { position:absolute; inset:27%; border-radius:50%; background:var(--white); border:1.5px solid var(--line); display:grid; place-items:center; box-shadow:var(--shadow-md); }
.ring-core b { font-family:var(--ff-d); font-weight:800; font-size:clamp(34px, 4.4vw, 64px); letter-spacing:-.06em; color:var(--g-900); line-height:1; }
.ring-core b sup { color:var(--lime-deep); font-size:.5em; }

/* ── Tape marquee ────────────────────────────────── */
.tapes { position:relative; padding:clamp(34px, 5vw, 64px) 0; overflow:hidden; background:var(--white); }
.tape { display:flex; white-space:nowrap; padding:18px 0; margin:0 -2vw; }
.tape--a { background:var(--lime); transform:rotate(-2.2deg); position:relative; z-index:2; }
.tape--b { background:var(--g); transform:rotate(1.6deg); margin-top:-14px; }
.tape-track { display:flex; flex:none; will-change:transform; }
.tape-track span { display:inline-flex; align-items:center; gap:.5em; padding-right:.5em; font-family:var(--ff-d); font-weight:800; font-size:clamp(26px, 4vw, 58px); letter-spacing:-.03em; text-transform:uppercase; line-height:1.05; }
.tape-track span::after { content:'✺'; font-size:.7em; }
.tape--a span { color:var(--g-900); }
.tape--b span { color:#fff; }
.tape--b span::after { color:var(--lime); }

/* ── Manifesto ───────────────────────────────────── */
.manifesto { font-family:var(--ff-d); font-weight:700; font-size:clamp(30px, 4.6vw, 72px); line-height:1.08; letter-spacing:-.035em; color:var(--g-900); max-width:1180px; margin:0; }
.manifesto .w { opacity:.14; }
.manifesto em { font-style:normal; color:var(--lime-deep); }
.manifesto-foot { display:flex; gap:48px; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; margin-top:clamp(40px, 6vw, 80px); }
.manifesto-foot p { max-width:420px; margin:0; color:var(--g-500); }

/* ── Services horizontal ─────────────────────────── */
.hs { position:relative; background:var(--paper); }
.hs-pin { height:100vh; display:flex; align-items:center; overflow:hidden; }
.hs-track { display:flex; gap:22px; padding:0 var(--gutter); will-change:transform; align-items:stretch; }
.hs-intro { flex:0 0 min(520px, 86vw); display:flex; flex-direction:column; justify-content:center; padding-right:40px; }
.hs-intro h2 { font-size:clamp(44px, 5.8vw, 96px); }
.svc {
  position:relative; flex:0 0 min(400px, 84vw); min-height:min(580px, 72vh);
  border-radius:var(--r-lg); padding:32px; overflow:hidden; isolation:isolate;
  display:flex; flex-direction:column; background:var(--white); border:1px solid var(--line);
  transition:color .5s var(--ease), border-color .5s;
}
.svc::before { content:''; position:absolute; inset:0; z-index:-1; background:var(--lime); clip-path:circle(0% at 100% 0%); transition:clip-path .8s var(--ease); }
.svc:hover::before { clip-path:circle(150% at 100% 0%); }
.svc:hover { border-color:var(--lime); }
.svc .n { font-family:var(--ff-d); font-weight:800; font-size:clamp(80px, 9vw, 128px); line-height:.8; letter-spacing:-.06em; color:transparent; -webkit-text-stroke:1.5px var(--g-300); transition:-webkit-text-stroke-color .5s; }
.svc:hover .n { -webkit-text-stroke-color:var(--g-900); }
.svc .ic { width:62px; height:62px; border-radius:18px; display:grid; place-items:center; background:var(--g-900); color:var(--lime); margin:auto 0 26px; transition:transform .6s var(--ease), background .5s, color .5s; }
.svc .ic .icon { width:28px; height:28px; }
.svc:hover .ic { transform:rotate(-12deg) scale(1.06); background:var(--white); color:var(--g-900); }
.svc h3 { margin-bottom:12px; }
.svc p { font-size:15px; color:var(--g-500); margin-bottom:22px; transition:color .5s; }
.svc:hover p { color:var(--g-800); }
.svc .go { position:absolute; top:28px; right:28px; width:48px; height:48px; border-radius:50%; border:1.5px solid var(--line-2); display:grid; place-items:center; transition:transform .6s var(--ease), background .4s, border-color .4s; }
.svc .go .icon { width:18px; height:18px; }
.svc:hover .go { transform:rotate(45deg); background:var(--g-900); color:#fff; border-color:var(--g-900); }
.svc .tags .tag { background:transparent; }
.hs-end { flex:0 0 min(360px, 84vw); display:grid; place-items:center; }

/* ── Stats ───────────────────────────────────────── */
.stats { display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-top:1.5px solid rgba(44,45,47,.18); }
.stat { padding:36px 28px 0 0; }
.stat + .stat { padding-left:28px; border-left:1.5px solid rgba(44,45,47,.18); }
.stat b { display:block; font-family:var(--ff-d); font-weight:800; font-size:clamp(56px, 7.6vw, 120px); line-height:.9; letter-spacing:-.06em; color:var(--g-900); }
.stat span { display:block; margin-top:14px; font-size:15px; font-weight:500; color:var(--g-800); max-width:220px; }
.big-360 { position:absolute; right:-2vw; top:50%; transform:translateY(-50%); font-family:var(--ff-d); font-weight:800; font-size:34vw; line-height:.8; letter-spacing:-.07em; color:transparent; -webkit-text-stroke:1.5px rgba(44,45,47,.1); pointer-events:none; }

/* ── Work list + hover preview ───────────────────── */
.wl { border-bottom:1px solid var(--line); }
.wl-row { position:relative; display:grid; grid-template-columns:70px 1.4fr 1fr auto; gap:24px; align-items:center; padding:clamp(24px, 3vw, 40px) 0; border-top:1px solid var(--line); }
.wl-row::before { content:''; position:absolute; inset:0 calc(-1 * var(--gutter)); background:var(--lime-wash); transform:scaleY(0); transform-origin:bottom; transition:transform .5s var(--ease); z-index:-1; }
.wl-row:hover::before { transform:none; }
.wl-row .i { font-family:var(--ff-d); font-weight:700; color:var(--g-300); font-size:15px; }
.wl-row h3 { font-size:clamp(28px, 3.8vw, 58px); letter-spacing:-.045em; margin:0; transition:transform .6s var(--ease); }
.wl-row:hover h3 { transform:translateX(18px); }
.wl-row .meta { font-size:14.5px; color:var(--g-500); }
.wl-row .kpi { font-family:var(--ff-d); font-weight:800; font-size:clamp(24px, 2.6vw, 38px); letter-spacing:-.04em; color:var(--lime-deep); text-align:right; }
.wl-row .kpi small { display:block; font-family:var(--ff); font-size:12.5px; font-weight:500; letter-spacing:0; color:var(--g-500); }
.preview { position:fixed; top:0; left:0; z-index:60; width:340px; aspect-ratio:4/3; border-radius:var(--r-lg); overflow:hidden; pointer-events:none; opacity:0; transform:scale(.6); }
.preview .thumb { position:absolute; inset:0; opacity:0; transition:opacity .35s; }
.preview .thumb.on { opacity:1; }

/* Gradient thumbs (logo colours only) */
.thumb { position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; padding:24px; color:var(--g-900); }
.thumb::before, .thumb::after { content:''; position:absolute; border-radius:50%; }
.thumb > * { position:relative; }
.thumb--1 { background:var(--lime); }
.thumb--1::before { width:90%; aspect-ratio:1; right:-30%; top:-40%; background:var(--lime-hi); }
.thumb--1::after { width:50%; aspect-ratio:1; left:-10%; bottom:-25%; border:26px solid rgba(44,45,47,.12); }
.thumb--2 { background:var(--g); color:#fff; }
.thumb--2::before { width:80%; aspect-ratio:1; right:-25%; bottom:-45%; background:var(--lime); }
.thumb--2::after { width:36%; aspect-ratio:1; left:12%; top:-12%; border:18px solid rgba(255,255,255,.12); }
.thumb--3 { background:var(--paper-2); }
.thumb--3::before { width:70%; aspect-ratio:1; right:-18%; top:-20%; background:var(--lime); }
.thumb--3::after { width:60%; aspect-ratio:1; left:-18%; bottom:-40%; background:var(--g-300); }
.thumb--4 { background:var(--g-900); color:#fff; }
.thumb--4::before { width:110%; aspect-ratio:1; left:-30%; bottom:-80%; border:40px solid var(--lime); }
.thumb--4::after { width:20%; aspect-ratio:1; right:12%; top:14%; background:var(--lime); }
.thumb--5 { background:var(--lime-soft); }
.thumb--5::before { width:60%; aspect-ratio:1; right:-10%; bottom:-20%; background:var(--g); }
.thumb--5::after { width:40%; aspect-ratio:1; left:-8%; top:-14%; background:var(--lime); }
.thumb--6 { background:var(--white); border:1px solid var(--line); }
.thumb--6::before { width:80%; aspect-ratio:1; left:10%; top:25%; border:30px solid var(--lime); }
.thumb--6::after { width:30%; aspect-ratio:1; right:-6%; top:-8%; background:var(--g); }
.thumb .tt { display:flex; justify-content:space-between; align-items:center; }
.thumb .tt span { padding:6px 12px; border-radius:var(--r-full); background:rgba(255,255,255,.75); color:var(--g-900); font-size:12.5px; font-weight:600; backdrop-filter:blur(6px); }
.thumb .kb b { display:block; font-family:var(--ff-d); font-weight:800; font-size:clamp(44px, 4.6vw, 68px); line-height:.9; letter-spacing:-.06em; }
.thumb .kb small { display:block; margin-top:6px; font-size:13.5px; font-weight:500; opacity:.85; }

/* Work cards (portfolio page) */
.work-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(20px, 3vw, 40px); }
.work-card { display:block; }
.work-card:nth-child(even) { margin-top:clamp(0px, 8vw, 120px); }
.work-card .thumb { aspect-ratio:5/4; border-radius:var(--r-lg); padding:clamp(22px, 3vw, 34px); transition:border-radius .6s var(--ease); }
.work-card:hover .thumb { border-radius:calc(var(--r-lg) * 2); }
.work-card .thumb .kb b { font-size:clamp(56px, 7vw, 104px); transition:transform .7s var(--ease); transform-origin:left bottom; }
.work-card:hover .thumb .kb b { transform:scale(1.06); }
.work-info { padding:22px 4px 0; }
.work-info .m { font-size:12.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--lime-deep); }
.work-info h3 { margin:10px 0 8px; font-size:clamp(24px, 2.4vw, 34px); }
.work-info p { color:var(--g-500); margin:0 0 16px; max-width:520px; }
.filter { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:clamp(36px, 5vw, 60px); }
.filter button, .filter a { padding:12px 20px; border-radius:var(--r-full); border:1.5px solid var(--line-2); font-size:14px; font-weight:500; color:var(--g-700); transition:all .3s var(--ease); }
.filter button:hover, .filter a:hover { border-color:var(--g-900); }
.filter button.active, .filter a.active { background:var(--g-900); border-color:var(--g-900); color:#fff; }

/* ── Process stack ───────────────────────────────── */
.stack-card {
  position:sticky; top:calc(96px + var(--i) * 26px);
  display:grid; grid-template-columns:auto 1fr 1fr; gap:clamp(24px, 4vw, 64px); align-items:start;
  min-height:clamp(300px, 40vh, 400px); padding:clamp(28px, 4vw, 56px);
  border-radius:var(--r-xl); margin-bottom:28px; transform-origin:center top;
  background:var(--white); border:1px solid var(--line); box-shadow:0 -10px 40px rgba(44,45,47,.05);
}
.stack-card:nth-child(2) { background:var(--paper-2); }
.stack-card:nth-child(3) { background:var(--lime); border-color:var(--lime); }
.stack-card:nth-child(4) { background:var(--g); border-color:var(--g); color:#fff; }
.stack-card:nth-child(4) h3, .stack-card:nth-child(4) .sn { color:#fff; }
.stack-card:nth-child(4) p { color:rgba(255,255,255,.8); }
.stack-card:nth-child(4) .tag { background:transparent; color:#fff; border-color:rgba(255,255,255,.3); }
.stack-card:nth-child(5) { background:var(--lime-soft); border-color:var(--lime-soft); }
.stack-card .sn { font-family:var(--ff-d); font-weight:800; font-size:clamp(64px, 8vw, 128px); line-height:.8; letter-spacing:-.06em; color:var(--g-900); }
.stack-card h3 { font-size:clamp(30px, 3.6vw, 52px); letter-spacing:-.04em; }
.stack-card p { font-size:16.5px; color:var(--g-700); margin-bottom:18px; }

/* ── Team ────────────────────────────────────────── */
.team-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(14px, 2vw, 24px); }
.member { position:relative; perspective:900px; }
.member .card { position:relative; aspect-ratio:3/4; border-radius:var(--r-lg); overflow:hidden; transform-style:preserve-3d; transition:transform .5s var(--ease), box-shadow .5s; will-change:transform; }
.member:hover .card { box-shadow:var(--shadow-lg); }
.member .art { position:absolute; inset:0; display:grid; place-items:center; }
.member .art img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.member:hover .art img { transform:scale(1.06); }
.member .art .ini { font-family:var(--ff-d); font-weight:800; font-size:clamp(48px, 6vw, 88px); letter-spacing:-.06em; line-height:1; position:relative; transition:transform .8s var(--ease); }
.member:hover .art .ini { transform:scale(1.12) rotate(-4deg); }
.member .art::before { content:''; position:absolute; width:120%; aspect-ratio:1; border-radius:50%; transition:transform 1s var(--ease); }
.member:hover .art::before { transform:translate(-8%, 6%) scale(1.1); }
.m1 .art { background:var(--lime); color:var(--g-900); } .m1 .art::before { right:-60%; top:-60%; background:var(--lime-hi); }
.m2 .art { background:var(--g); color:#fff; } .m2 .art::before { left:-50%; bottom:-70%; background:rgba(155,203,60,.9); }
.m3 .art { background:var(--paper-2); color:var(--g-900); } .m3 .art::before { right:-55%; bottom:-60%; background:var(--lime); }
.m4 .art { background:var(--g-900); color:var(--lime); } .m4 .art::before { left:-60%; top:-70%; border:36px solid var(--g); }
.m5 .art { background:var(--lime-soft); color:var(--g-900); } .m5 .art::before { right:-40%; top:-50%; background:var(--g-300); }
.m6 .art { background:var(--lime); color:var(--g-900); } .m6 .art::before { left:-45%; bottom:-60%; border:34px solid rgba(44,45,47,.14); }
.m7 .art { background:var(--g); color:var(--lime); } .m7 .art::before { right:-50%; bottom:-55%; background:var(--g-800); }
.member .who { position:absolute; left:12px; right:12px; bottom:12px; padding:16px 18px; border-radius:18px; background:rgba(255,255,255,.92); backdrop-filter:blur(8px); display:flex; justify-content:space-between; align-items:center; gap:10px; transform:translateZ(30px); }
.member .who b { display:block; font-family:var(--ff-d); font-size:17px; color:var(--g-900); letter-spacing:-.02em; line-height:1.2; }
.member .who span { display:block; font-size:13px; color:var(--g-500); }
.member .soc { display:flex; gap:6px; }
.member .soc a { width:34px; height:34px; border-radius:50%; display:grid; place-items:center; background:var(--g-900); color:#fff; transform:scale(0); transition:transform .45s var(--ease), background .3s; }
.member .soc a:nth-child(2) { transition-delay:.05s; }
.member:hover .soc a { transform:scale(1); }
.member .soc a:hover { background:var(--lime); color:var(--g-900); }
.member .soc .icon { width:15px; height:15px; }
.member--join .card { background:var(--white); border:2px dashed var(--line-2); display:grid; place-items:center; text-align:center; padding:28px; transition:background .4s, border-color .4s; }
.member--join:hover .card { background:var(--lime); border-color:var(--lime); }
.member--join h3 { font-size:clamp(26px, 2.6vw, 36px); }
.member--join p { color:var(--g-500); font-size:14.5px; }
.member--join:hover p { color:var(--g-800); }
.member--join .plus { width:64px; height:64px; margin:0 auto 22px; border-radius:50%; background:var(--g-900); color:var(--lime); display:grid; place-items:center; transition:transform .6s var(--ease); }
.member--join:hover .plus { transform:rotate(90deg); }

/* ── Testimonials marquee ────────────────────────── */
.tm { display:flex; overflow:hidden; mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.tm-track { display:flex; gap:22px; padding-right:22px; flex:none; animation:slide 50s linear infinite; }
.tm:hover .tm-track { animation-play-state:paused; }
@keyframes slide { to { transform:translateX(-100%); } }
.quote { flex:0 0 min(440px, 82vw); padding:34px; border-radius:var(--r-lg); background:var(--white); border:1px solid var(--line); display:flex; flex-direction:column; gap:26px; }
.quote .qm { font-family:var(--ff-d); font-weight:800; font-size:72px; line-height:.5; color:var(--lime); height:30px; }
.quote blockquote { margin:0; font-size:18px; line-height:1.55; color:var(--g-900); font-weight:500; letter-spacing:-.01em; }
.quote .by { display:flex; align-items:center; gap:12px; margin-top:auto; }
.quote .av { width:46px; height:46px; border-radius:50%; background:var(--g-900); color:var(--lime); display:grid; place-items:center; font-family:var(--ff-d); font-weight:700; font-size:15px; }
.quote .by b { display:block; font-size:15px; color:var(--g-900); }
.quote .by span { font-size:13px; color:var(--g-500); }
.note { margin:28px 0 0; font-size:12.5px; color:var(--g-500); text-align:center; }

/* ── Industries ──────────────────────────────────── */
.ind-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:0; border-top:1px solid var(--line); }
.ind { position:relative; display:grid; grid-template-columns:auto 1fr auto; gap:24px; align-items:start; padding:clamp(28px, 3.4vw, 48px) clamp(12px, 2vw, 32px); border-bottom:1px solid var(--line); overflow:hidden; isolation:isolate; scroll-margin-top:110px; }
.ind:nth-child(odd) { border-right:1px solid var(--line); }
.ind::before { content:''; position:absolute; inset:0; z-index:-1; background:var(--lime); transform:translateY(101%); transition:transform .6s var(--ease); }
.ind:hover::before { transform:none; }
.ind .ic { width:56px; height:56px; border-radius:16px; display:grid; place-items:center; background:var(--lime-soft); color:var(--lime-deep); transition:background .4s, color .4s, transform .6s var(--ease); }
.ind:hover .ic { background:var(--g-900); color:var(--lime); transform:rotate(-10deg); }
.ind h3 { font-size:clamp(24px, 2.4vw, 34px); margin-bottom:10px; }
.ind p { color:var(--g-500); margin-bottom:16px; transition:color .4s; }
.ind:hover p { color:var(--g-800); }
.ind .tags .tag { background:transparent; }
.ind .n { font-family:var(--ff-d); font-weight:700; color:var(--g-300); transition:color .4s; }
.ind:hover .n { color:var(--g-900); }

/* ── Services page rows ──────────────────────────── */
.srow { display:grid; grid-template-columns:1fr 1.15fr; gap:clamp(32px, 6vw, 100px); padding:clamp(56px, 7vw, 100px) 0; border-top:1px solid var(--line); scroll-margin-top:90px; }
.srow-l { position:sticky; top:120px; align-self:start; }
.srow-l .n { font-family:var(--ff-d); font-weight:800; font-size:clamp(90px, 12vw, 190px); line-height:.8; letter-spacing:-.07em; color:transparent; -webkit-text-stroke:1.5px var(--g-300); display:block; margin-bottom:24px; }
.srow-l h2 { font-size:clamp(36px, 4.6vw, 72px); }
.srow-l .ic { width:64px; height:64px; border-radius:18px; display:grid; place-items:center; background:var(--lime); color:var(--g-900); margin-top:24px; }
.srow-l .ic .icon { width:30px; height:30px; }
.srow-r .lead { color:var(--g-700); margin-bottom:34px; }
.dlist { display:grid; grid-template-columns:1fr 1fr; gap:0 28px; margin-bottom:34px; }
.dlist li { display:flex; align-items:center; gap:12px; padding:16px 0; border-bottom:1px solid var(--line); font-weight:500; color:var(--g-900); }
.dlist li::before { content:''; width:9px; height:9px; border-radius:50%; background:var(--lime); flex:none; transition:transform .4s var(--ease); }
.dlist li:hover::before { transform:scale(1.8); }
.kpis { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:34px; }
.kpis div { flex:1 1 140px; padding:20px; border-radius:var(--r-md); background:var(--paper); }
.kpis b { display:block; font-family:var(--ff-d); font-size:26px; letter-spacing:-.04em; color:var(--g-900); }
.kpis span { font-size:13px; color:var(--g-500); }

/* Packages */
.pkg-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; align-items:stretch; }
.pkg { position:relative; display:flex; flex-direction:column; padding:clamp(28px, 3vw, 40px); border-radius:var(--r-xl); background:var(--white); border:1px solid var(--line); transition:transform .5s var(--ease), box-shadow .5s; }
.pkg:hover { transform:translateY(-8px); box-shadow:var(--shadow-lg); }
.pkg--hot { background:var(--lime); border-color:var(--lime); }
.pkg .badge { position:absolute; top:24px; right:24px; padding:7px 13px; border-radius:var(--r-full); background:var(--g-900); color:var(--lime); font-size:12px; font-weight:700; }
.pkg h3 { font-size:30px; }
.pkg > p { color:var(--g-500); }
.pkg--hot > p { color:var(--g-800); }
.pkg .price { font-family:var(--ff-d); font-weight:700; color:var(--g-900); margin:6px 0 22px; }
.pkg ul { margin-bottom:30px; }
.pkg li { display:flex; gap:10px; padding:10px 0; border-bottom:1px solid rgba(44,45,47,.08); font-size:15px; color:var(--g-800); }
.pkg li .icon { width:18px; height:18px; color:var(--lime-deep); margin-top:3px; }
.pkg--hot li .icon { color:var(--g-900); }
.pkg .btn { margin-top:auto; }

/* ── About ───────────────────────────────────────── */
.split { display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px, 6vw, 100px); align-items:center; }
.orbit-art { position:relative; aspect-ratio:1; max-width:560px; width:100%; margin:0 auto; }
.orbit-art .o { position:absolute; border-radius:50%; }
.orbit-art .o1 { inset:0; border:1.5px dashed var(--line-2); animation:spin 60s linear infinite; }
.orbit-art .o2 { inset:14%; background:var(--lime-soft); }
.orbit-art .o3 { inset:30%; background:var(--lime); display:grid; place-items:center; text-align:center; }
.orbit-art .o3 b { font-family:var(--ff-d); font-weight:800; font-size:clamp(44px, 6vw, 88px); letter-spacing:-.06em; line-height:1; color:var(--g-900); }
.orbit-art .o3 span { display:block; font-size:11px; letter-spacing:.2em; font-weight:700; text-transform:uppercase; color:var(--g-800); }
.orbit-art .dot { position:absolute; left:50%; top:50%; width:0; height:0; animation:spin 24s linear infinite; }
.orbit-art .dot i { position:absolute; left:calc(min(280px, 44vw) * .86 * -1); top:-9px; width:18px; height:18px; border-radius:50%; background:var(--g); }
.orbit-art .dot--2 { animation-duration:34s; animation-direction:reverse; }
.orbit-art .dot--2 i { left:auto; right:calc(min(280px, 44vw) * .62 * -1); background:var(--lime); width:14px; height:14px; }
.values { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.value { padding:30px 26px; border-radius:var(--r-lg); background:var(--white); border:1px solid var(--line); transition:transform .5s var(--ease), background .4s; }
.value:hover { transform:translateY(-8px) rotate(-1deg); background:var(--lime); }
.value .ic { width:52px; height:52px; border-radius:15px; display:grid; place-items:center; background:var(--g-900); color:var(--lime); margin-bottom:40px; }
.value p { font-size:15px; color:var(--g-500); margin:0; }
.value:hover p { color:var(--g-800); }
.timeline { display:grid; grid-template-columns:repeat(4,1fr); gap:0; position:relative; }
.timeline::before { content:''; position:absolute; left:0; right:0; top:10px; height:2px; background:var(--line); }
.timeline .bar { position:absolute; left:0; right:0; top:10px; height:2px; background:var(--lime); transform-origin:left; transform:scaleX(var(--p, 1)); }
.tl { position:relative; padding:44px 28px 0 0; }
.tl::before { content:''; position:absolute; top:2px; left:0; width:18px; height:18px; border-radius:50%; background:var(--white); border:3px solid var(--lime); }
.tl b { display:block; font-family:var(--ff-d); font-weight:800; font-size:clamp(34px, 3.6vw, 52px); letter-spacing:-.05em; color:var(--g-900); line-height:1; margin-bottom:14px; }
.tl p { color:var(--g-500); margin:0; }

/* ── FAQ ─────────────────────────────────────────── */
.faq { display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(32px, 6vw, 100px); align-items:start; }
.faq-item { border-bottom:1px solid var(--line); }
.faq-item:first-child { border-top:1px solid var(--line); }
.faq-q { width:100%; display:flex; justify-content:space-between; align-items:center; gap:24px; padding:26px 0; text-align:left; font-family:var(--ff-d); font-size:clamp(18px, 1.6vw, 22px); font-weight:700; color:var(--g-900); letter-spacing:-.02em; }
.faq-q .pm { width:42px; height:42px; border-radius:50%; flex:none; display:grid; place-items:center; border:1.5px solid var(--line-2); transition:transform .5s var(--ease), background .3s, border-color .3s; }
.faq-q .pm .icon { width:16px; height:16px; }
.faq-q:hover .pm { border-color:var(--g-900); }
.faq-item.open .pm { transform:rotate(135deg); background:var(--lime); border-color:var(--lime); }
.faq-a { display:grid; grid-template-rows:0fr; transition:grid-template-rows .5s var(--ease); }
.faq-a > div { overflow:hidden; }
.faq-a p { padding-bottom:26px; margin:0; color:var(--g-500); max-width:640px; }
.faq-item.open .faq-a { grid-template-rows:1fr; }

/* ── CTA ─────────────────────────────────────────── */
.cta { position:relative; overflow:hidden; }
.cta-inner { position:relative; z-index:1; display:grid; grid-template-columns:1fr auto; gap:40px; align-items:center; }
.cta h2 { font-size:clamp(52px, 10vw, 170px); line-height:.88; letter-spacing:-.06em; margin:0; text-transform:uppercase; }
.cta p { margin:28px 0 0; max-width:520px; font-size:18px; color:var(--g-800); }
.cta .ring { position:absolute; right:-6vw; top:-10vw; width:40vw; max-width:none; opacity:.35; }
.cta .ring text { fill:var(--g-900); }

/* ── Page hero ───────────────────────────────────── */
.page-hero { position:relative; padding:clamp(150px, 20vh, 220px) 0 clamp(60px, 8vw, 110px); overflow:hidden; }
.page-hero .container { position:relative; }
.page-hero h1 { font-family:var(--ff-d); font-weight:800; font-size:clamp(52px, 10vw, 168px); line-height:.88; letter-spacing:-.055em; text-transform:uppercase; margin:0 0 clamp(28px, 4vw, 48px); max-width:1200px; }
.page-hero .lead { color:var(--g-500); }
.page-hero .ring { width:clamp(160px, 22vw, 320px); top:clamp(110px, 16vh, 160px); }
.crumbs { display:flex; gap:10px; font-size:13.5px; font-weight:500; color:var(--g-500); margin-bottom:28px; }
.crumbs a:hover { color:var(--g-900); }
.jump { display:flex; flex-wrap:wrap; gap:8px; margin-top:36px; }
.jump a { padding:11px 18px; border-radius:var(--r-full); border:1.5px solid var(--line-2); font-size:14px; font-weight:500; transition:all .3s var(--ease); }
.jump a:hover { background:var(--lime); border-color:var(--lime); color:var(--g-900); }

/* ── Contact ─────────────────────────────────────── */
.contact { display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(32px, 5vw, 80px); align-items:start; }
.c-info a.big { display:block; font-family:var(--ff-d); font-weight:800; font-size:clamp(22px, 2.3vw, 34px); letter-spacing:-.03em; color:var(--g-900); line-height:1.15; margin-bottom:10px; overflow-wrap:anywhere; }
.c-info a.big:hover { color:var(--lime-deep); }
.c-list { margin-top:40px; border-top:1px solid var(--line); }
.c-list li { display:flex; gap:16px; padding:20px 0; border-bottom:1px solid var(--line); }
.c-list .ic { width:44px; height:44px; border-radius:14px; flex:none; display:grid; place-items:center; background:var(--lime-soft); color:var(--lime-deep); }
.c-list .ic .icon { width:19px; height:19px; }
.c-list b { display:block; color:var(--g-900); font-size:15px; }
.c-list span { font-size:14.5px; color:var(--g-500); }
.form { padding:clamp(24px, 4vw, 52px); border-radius:var(--r-xl); background:var(--paper); }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:0 18px; }
.field { position:relative; margin-bottom:22px; }
.field label { display:block; font-size:13px; font-weight:600; color:var(--g-800); margin-bottom:8px; }
.field input, .field select, .field textarea { width:100%; padding:16px 18px; border-radius:14px; border:1.5px solid transparent; background:var(--white); font-size:15.5px; transition:border-color .3s, box-shadow .3s; }
.field textarea { min-height:140px; resize:vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline:none; border-color:var(--lime); box-shadow:0 0 0 5px var(--lime-soft); }
.chips { display:flex; flex-wrap:wrap; gap:8px; }
.chips label { position:relative; cursor:pointer; margin:0; }
.chips input { position:absolute; left:0; top:0; width:1px; height:1px; opacity:0; pointer-events:none; }
.chips span { display:inline-block; padding:10px 16px; border-radius:var(--r-full); background:var(--white); border:1.5px solid var(--line-2); font-size:14px; font-weight:500; color:var(--g-700); transition:all .3s var(--ease); }
.chips span:hover { border-color:var(--g-900); }
.chips input:checked + span { background:var(--lime); border-color:var(--lime); color:var(--g-900); transform:scale(1.04); }
.chips input:focus-visible + span { outline:2.5px solid var(--lime-deep); outline-offset:2px; }
.form-success { display:none; text-align:center; padding:60px 12px; }
.form-success.show { display:block; }
.form-success .ok { width:80px; height:80px; margin:0 auto 24px; border-radius:50%; display:grid; place-items:center; background:var(--lime); color:var(--g-900); }
.form-success .ok .icon { width:34px; height:34px; }

/* ── Footer ──────────────────────────────────────── */
.site-footer { position:relative; background:var(--lime); color:var(--g-900); padding:clamp(72px, 9vw, 120px) 0 28px; border-radius:var(--r-xl) var(--r-xl) 0 0; overflow:hidden; }
.f-top { display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:40px; }
.f-top h2 { font-size:clamp(36px, 4vw, 60px); margin-bottom:26px; text-transform:uppercase; }
.f-top h5 { font-size:12.5px; letter-spacing:.16em; text-transform:uppercase; font-weight:700; margin:0 0 20px; color:var(--g-900); }
.f-top li + li { margin-top:10px; }
.f-top a { font-size:15px; font-weight:500; }
.f-top .link::after { bottom:-2px; }
.f-contact li { display:flex; gap:10px; font-size:15px; }
.f-contact .icon { width:18px; height:18px; margin-top:3px; }
.social { display:flex; gap:8px; margin-top:28px; }
.social a { width:44px; height:44px; border-radius:50%; display:grid; place-items:center; background:var(--g-900); color:#fff; transition:transform .45s var(--ease), background .3s, color .3s; }
.social a:hover { transform:translateY(-4px) rotate(-8deg); background:#fff; color:var(--g-900); }
.social .icon { width:18px; height:18px; }
.f-word { display:flex; justify-content:space-between; font-family:var(--ff-d); font-weight:800; font-size:clamp(64px, 17.5vw, 290px); line-height:.78; letter-spacing:-.06em; color:var(--g-900); margin:clamp(56px, 8vw, 100px) 0 clamp(24px, 3vw, 36px); overflow:hidden; padding-top:.06em; }
.f-word span { display:inline-block; }
.f-word span:last-child { color:#fff; }
.f-bottom { display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px; font-size:14px; font-weight:500; padding-top:22px; border-top:1.5px solid rgba(44,45,47,.2); }
.f-bottom .links { display:flex; gap:22px; }
.to-top { display:inline-flex; align-items:center; gap:8px; font-weight:600; }
.to-top .icon { width:16px; height:16px; transform:rotate(-90deg); }

/* ── Animation initial states (JS-gated) ─────────── */
.js [data-reveal] { opacity:0; transform:translateY(40px); }
.js [data-split] { visibility:hidden; }
.js .hero-title, .js .hero-foot { visibility:hidden; }
.no-anim [data-reveal] { opacity:1 !important; transform:none !important; }
.no-anim [data-split], .no-anim .hero-title, .no-anim .hero-foot { visibility:visible !important; }
.no-anim .manifesto .w { opacity:1; }
.split-line { padding-bottom:.06em; margin-bottom:-.06em; }

/* ── Responsive ──────────────────────────────────── */
@media (max-width:1100px) {
  .team-grid { grid-template-columns:repeat(3,1fr); }
  .values { grid-template-columns:repeat(2,1fr); }
  .f-top { grid-template-columns:1fr 1fr; }
  .wl-row { grid-template-columns:50px 1.4fr auto; }
  .wl-row .meta { display:none; }
}
@media (max-width:980px) {
  .nav, .header-right .btn { display:none; }
  .menu-btn { display:inline-flex; }
  .hero-foot { grid-template-columns:1fr; gap:24px; }
  .scroll-hint { display:none; }
  .ring { width:clamp(150px, 34vw, 260px); opacity:.9; }
  .hs-pin { height:auto; display:block; overflow:visible; padding:clamp(88px, 12vw, 140px) 0; }
  .hs-track { flex-direction:column; }
  .hs-intro, .svc, .hs-end { flex:none; }
  .hs-intro { padding:0 0 20px; }
  .svc { min-height:0; }
  .svc .ic { margin-top:28px; }
  .hs-end { display:none; }
  .stats { grid-template-columns:1fr 1fr; }
  .stat:nth-child(3) { padding-left:0; border-left:0; }
  .stat:nth-child(n+3) { border-top:1.5px solid rgba(44,45,47,.18); margin-top:36px; }
  .stack-card { grid-template-columns:1fr; position:relative; top:auto; gap:16px; }
  .faq, .split, .srow, .contact, .cta-inner { grid-template-columns:1fr; }
  .srow-l { position:static; }
  .pkg-grid { grid-template-columns:1fr; max-width:560px; }
  .timeline { grid-template-columns:1fr 1fr; row-gap:40px; }
  .timeline::before, .timeline .bar { display:none; }
  .ind-grid { grid-template-columns:1fr; }
  .ind:nth-child(odd) { border-right:0; }
  .cta .ring { width:70vw; right:-20vw; }
}
@media (max-width:640px) {
  .brand img { height:32px; }
  .hero { padding-top:110px; }
  .ring { top:92px; right:-40px; width:170px; opacity:.55; }
  .hero .hero-title { font-size:clamp(30px, 9.4vw, 52px); }
  .hero-pin { min-height:560px; }
  .hero-kicker { font-size:11.5px; letter-spacing:.14em; }
  .hero-ring { width:min(122vw, 560px); height:min(122vw, 560px); }
  .ring-words { display:none; }
  .hero-cta .btn { flex:1 1 100%; }
  .team-grid { grid-template-columns:1fr 1fr; }
  .member .who { left:8px; right:8px; bottom:8px; padding:12px; }
  .member .who b { font-size:14.5px; }
  .member .who span { font-size:12px; }
  .member .soc { display:none; }
  .values, .work-grid, .form-row, .dlist, .f-top, .timeline { grid-template-columns:1fr; }
  .work-card:nth-child(even) { margin-top:0; }
  .wl-row { grid-template-columns:1fr auto; gap:12px; }
  .wl-row .i { display:none; }
  .stat { padding-right:12px; }
  .stat + .stat { padding-left:12px; }
  .stat:nth-child(3) { padding-left:0; }
  .ind { grid-template-columns:auto 1fr; }
  .ind .n { display:none; }
  .f-bottom { flex-direction:column; }
}
@media (hover:none) {
  .preview, .cursor, .cursor-dot { display:none !important; }
}
@media (prefers-reduced-motion:reduce) {
  .hr-prog { stroke-dashoffset:0; }
}
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation:none !important; transition-duration:.01ms !important; }
}

/* ── CMS additions: uploaded images, client logos, WhatsApp, form states ── */
.thumb--img { color:#fff; }
.thumb--img::before { display:none; }
.thumb--img::after { inset:0; width:auto; aspect-ratio:auto; border:0; border-radius:0; background:linear-gradient(180deg, rgba(30,31,33,.25), transparent 35%, transparent 50%, rgba(30,31,33,.8)); }
.thumb--img > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.thumb--img > :not(img) { z-index:1; }
.work-card:hover .thumb--img > img { transform:scale(1.05); }
.quote .av { overflow:hidden; }
.quote .av img { width:100%; height:100%; object-fit:cover; }
.logos { padding:clamp(24px, 4vw, 56px) 0 clamp(40px, 6vw, 80px); }
.logos-row { display:flex; overflow:hidden; margin-top:10px; mask-image:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); -webkit-mask-image:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.logos-track { display:flex; align-items:center; gap:clamp(40px, 6vw, 88px); padding-right:clamp(40px, 6vw, 88px); flex:none; animation:slide 40s linear infinite; }
.logos-row:hover .logos-track { animation-play-state:paused; }
.logo-item img { height:clamp(34px, 4vw, 48px); width:auto; max-width:160px; object-fit:contain; filter:grayscale(1); opacity:.6; transition:filter .4s, opacity .4s; }
.logo-item img:hover { filter:none; opacity:1; }
.c-list div a { font-size:14.5px; color:var(--g-700); text-decoration:underline; text-decoration-color:var(--lime); text-underline-offset:3px; }
.hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.form-error { margin:0 0 16px; padding:12px 16px; border-radius:14px; background:#FDECEA; color:#9B2C1F; font-size:14.5px; }
.form-error[hidden] { display:none; }
.wa-float { position:fixed; right:20px; bottom:20px; z-index:70; display:flex; align-items:center; gap:8px; padding:12px 18px 12px 14px; border-radius:var(--r-full); background:#25D366; color:#fff; font-weight:600; font-size:14.5px; box-shadow:0 12px 30px rgba(37,211,102,.35); transition:transform .4s var(--ease); }
.wa-float:hover { transform:translateY(-3px); }
.wa-float .icon { width:22px; height:22px; }
@media (max-width:640px) { .wa-float span { display:none; } .wa-float { padding:14px; right:14px; bottom:14px; } }

/* ── Offer bar & popup ── */
.offer-bar { background:var(--g-900); color:#fff; text-align:center; font-size:14px; padding:9px var(--gutter); }
.offer-bar p { margin:0; }
.offer-bar a { color:var(--lime); font-weight:600; margin-left:6px; white-space:nowrap; }
.has-bar .site-header, .has-bar .site-header.is-scrolled { padding-top:0; }
.has-bar .site-header .offer-bar { margin-bottom:14px; }
.has-bar .site-header.is-scrolled .offer-bar { margin-bottom:10px; }
.has-bar .page-hero { padding-top:calc(clamp(150px, 20vh, 220px) + 30px); }
.has-bar .article-head { padding-top:calc(clamp(140px, 18vh, 200px) + 30px); }
.popup { position:fixed; inset:0; z-index:300; display:grid; place-items:center; padding:20px; background:rgba(30,31,33,.45); backdrop-filter:blur(4px); opacity:0; transition:opacity .35s; }
.popup[hidden] { display:none; }
.popup.show { opacity:1; }
.popup-card { position:relative; width:min(460px, 100%); max-height:calc(100svh - 40px); overflow:auto; background:var(--white); border-radius:var(--r-lg); box-shadow:var(--shadow-lg); transform:translateY(24px) scale(.97); transition:transform .5s var(--ease); }
.popup.show .popup-card { transform:none; }
.popup-card > img { width:100%; aspect-ratio:16/9; object-fit:cover; display:block; }
.popup-body { padding:28px 28px 30px; }
.popup-body h3 { font-size:clamp(26px, 3vw, 34px); margin-bottom:10px; }
.popup-body p { color:var(--g-500); margin:0 0 22px; line-height:1.6; }
.popup-x { position:absolute; top:12px; right:12px; z-index:1; width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.92); font-size:24px; line-height:1; color:var(--g-900); box-shadow:var(--shadow-sm); }

/* ── Blog ── */
.post-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:clamp(20px, 2.4vw, 34px); }
.post-card { display:flex; flex-direction:column; gap:16px; }
.post-body { display:flex; flex-direction:column; gap:10px; }
.post-img { position:relative; aspect-ratio:16/10; border-radius:var(--r-lg); overflow:hidden; background:var(--lime-soft); }
.post-img img { width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.post-card:hover .post-img img { transform:scale(1.05); }
.post-ph { position:absolute; inset:0; display:grid; place-items:center; font:800 clamp(64px, 8vw, 120px) var(--ff-d); color:var(--lime-deep); opacity:.35; }
.post-meta { display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:13px; color:var(--g-500); }
.post-card h3 { font-size:clamp(20px, 1.7vw, 25px); line-height:1.2; letter-spacing:-.02em; margin:0; transition:color .3s; }
.post-card:hover h3 { color:var(--lime-deep); }
.post-card p { margin:0; color:var(--g-500); font-size:15px; line-height:1.6; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.post-card--big { grid-column:1 / -1; display:grid; grid-template-columns:1.25fr 1fr; gap:16px clamp(24px, 4vw, 56px); align-items:center; }
.post-card--big h3 { font-size:clamp(28px, 3vw, 44px); }
.pager { display:flex; gap:8px; justify-content:center; margin-top:clamp(40px, 5vw, 64px); }
.pager a { min-width:44px; height:44px; display:grid; place-items:center; border-radius:var(--r-full); border:1.5px solid var(--line-2); font-weight:600; }
.pager a[aria-current] { background:var(--g-900); border-color:var(--g-900); color:#fff; }
.article-head { padding:clamp(140px, 18vh, 200px) var(--gutter) clamp(30px, 4vw, 50px); max-width:960px; }
.article-head h1 { font-size:clamp(36px, 5vw, 68px); line-height:1.05; margin:14px 0 18px; }
.article-meta { display:flex; gap:8px 18px; flex-wrap:wrap; color:var(--g-500); font-size:14.5px; }
.article-meta span + span::before { content:'·'; margin-right:18px; }
.article-cover { max-width:1200px; margin:0 auto clamp(36px, 5vw, 64px); }
.article-cover img { width:100%; border-radius:var(--r-lg); aspect-ratio:16/8; object-fit:cover; }
.prose { max-width:740px; margin:0 auto; font-size:clamp(17px, 1.25vw, 19px); line-height:1.75; color:var(--g-700); }
.prose > * + * { margin-top:1.1em; }
.prose h2 { font-size:clamp(28px, 2.6vw, 36px); line-height:1.2; margin-top:1.8em; letter-spacing:-.025em; }
.prose h3 { font-size:clamp(22px, 2vw, 27px); line-height:1.25; margin-top:1.6em; letter-spacing:-.02em; }
.prose h4 { font-size:20px; margin-top:1.4em; }
.prose a { color:var(--lime-deep); text-decoration:underline; text-underline-offset:3px; }
.prose ul, .prose ol { padding-left:1.3em; }
.prose li + li { margin-top:.4em; }
.prose li::marker { color:var(--lime-deep); }
.prose blockquote { margin-left:0; padding:6px 0 6px 24px; border-left:4px solid var(--lime); font-family:var(--ff-d); font-size:1.2em; font-weight:600; color:var(--g-900); line-height:1.5; }
.prose img { width:100%; border-radius:var(--r-md); }
.prose figcaption { font-size:14px; color:var(--g-500); text-align:center; margin-top:8px; }
.prose hr { border:0; border-top:1px solid var(--line); margin:2.4em 0; }
.prose pre { background:var(--paper); padding:16px 20px; border-radius:var(--r-md); overflow:auto; font-size:15px; }
.share { max-width:740px; margin:clamp(40px, 5vw, 64px) auto 0; padding-top:24px; border-top:1px solid var(--line); display:flex; align-items:center; gap:10px; }
.share span { font-weight:600; color:var(--g-900); margin-right:6px; }
.share a { width:42px; height:42px; border-radius:50%; display:grid; place-items:center; background:var(--paper); color:var(--g-900); transition:background .3s, transform .3s; }
.share a:hover { background:var(--lime); transform:translateY(-3px); }
.share .icon { width:18px; height:18px; }
@media (max-width:980px) {
  .post-grid { grid-template-columns:1fr 1fr; }
  .post-card--big { grid-template-columns:1fr; }
}
@media (max-width:640px) {
  .post-grid { grid-template-columns:1fr; }
  .offer-bar { font-size:13px; padding:8px 14px; }
}
.popup-card:focus { outline:none; }