/* ==========================================================================
   NOA — שיווק רפואי מדויק
   Brand system 2026: off-white / deep green / mint / charcoal
   Headlines: Karantina · Text: Heebo · Tags: IBM Plex Mono
   ========================================================================== */
/* ---------- Self-hosted fonts (OFL) ---------- */
@font-face{font-family:'Heebo';font-style:normal;font-weight:300 900;font-display:swap;src:url(/assets/fonts/heebo-hebrew.woff2) format('woff2');unicode-range:U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F}
@font-face{font-family:'Heebo';font-style:normal;font-weight:300 900;font-display:swap;src:url(/assets/fonts/heebo-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Karantina';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/karantina-700-hebrew.woff2) format('woff2');unicode-range:U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F}
@font-face{font-family:'Karantina';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/karantina-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'NOA Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/plexmono-400.woff2) format('woff2');unicode-range:U+0021-007E, U+00A0-00FF, U+2010-2027}
@font-face{font-family:'NOA Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/plexmono-500.woff2) format('woff2');unicode-range:U+0021-007E, U+00A0-00FF, U+2010-2027}
@font-face{font-family:'NOA Mono';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/plexmono-600.woff2) format('woff2');unicode-range:U+0021-007E, U+00A0-00FF, U+2010-2027}
:root{
  --paper:#F3F1EA;
  --paper-2:#EAE7DD;
  --paper-3:#FBFAF6;
  --forest:#173B32;
  --forest-2:#102C25;
  --forest-3:#0B1F1A;
  --mint:#67ED99;
  --mint-2:#A6F5C4;
  --char:#111714;

  /* contextual tokens (re-scoped inside dark sections) */
  --bg:var(--paper);
  --ink:var(--forest);
  --text:var(--forest);
  --muted:#52665F;
  --line:rgba(23,59,50,.14);
  --card:var(--paper-3);
  --accent:var(--forest);
  --accent-ink:var(--paper);
  --hl-bg:var(--forest);
  --hl-ink:var(--paper);

  --f-display:'Karantina','Heebo',system-ui,sans-serif;
  --f-text:'Heebo',system-ui,sans-serif;
  --f-mono:'NOA Mono','Heebo',ui-monospace,monospace;

  --radius:22px;
  --ease:cubic-bezier(.22,1,.36,1);
  --shadow:0 30px 60px -30px rgba(17,23,20,.28);
  --fz:100%;

  /* legacy aliases (kept so older inline styles still resolve) */
  --green:var(--forest);
  --green-2:var(--mint);
  --grad:linear-gradient(120deg,var(--mint),var(--mint-2));
  --light-bg:var(--paper);
  --light-card:var(--paper-3);
  --dark-on-light:var(--forest);
  --muted-on-light:#52665F;
}
.dark,.alt,footer,#sticky-bar.dark{
  --bg:var(--forest);
  --ink:var(--paper);
  --text:var(--paper);
  --muted:rgba(243,241,234,.68);
  --line:rgba(103,237,153,.16);
  --card:rgba(255,255,255,.04);
  --accent:var(--mint);
  --accent-ink:var(--forest);
  --hl-bg:var(--mint);
  --hl-ink:var(--forest);
}
.mint-sec{
  --bg:var(--mint);
  --ink:var(--forest);
  --text:var(--forest);
  --muted:rgba(23,59,50,.78);
  --line:rgba(23,59,50,.22);
  --card:rgba(255,255,255,.35);
  --accent:var(--forest);
  --accent-ink:var(--mint);
  --hl-bg:var(--forest);
  --hl-ink:var(--mint);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px;font-size:var(--fz);background:var(--paper)}
body{
  font-family:var(--f-text);background:var(--paper);color:var(--forest);
  line-height:1.7;overflow-x:hidden;-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
/* paper grain */
body::before{
  content:'';position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.05;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
::selection{background:var(--mint);color:var(--forest)}
img,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font-family:inherit;cursor:pointer}
.container{width:min(1240px,90%);margin-inline:auto}
.mono{font-family:var(--f-mono)}

/* ---------- Accessibility ---------- */
.skip-link{position:fixed;top:-60px;right:16px;z-index:3000;background:var(--forest);color:var(--paper);font-weight:700;padding:10px 22px;border-radius:99px;transition:top .25s}
.skip-link:focus{top:14px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
body.high-contrast{--paper:#fff;--paper-2:#fff;--paper-3:#fff;--muted:#000;--line:#000}
body.high-contrast .dark,body.high-contrast .alt,body.high-contrast footer{--bg:#000;--muted:#fff;background:#000!important}
body.reduce-motion *,body.reduce-motion *::before,body.reduce-motion *::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important;scroll-behavior:auto!important}
body.underline-links a{text-decoration:underline!important;text-underline-offset:3px}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,label:focus-within{outline:3px solid var(--mint);outline-offset:3px;border-radius:6px}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important}}

/* ---------- Scroll progress ---------- */
#progress{position:fixed;top:0;right:0;height:3px;width:0;background:var(--mint);z-index:2500}

/* ---------- Nav ---------- */
nav.site-nav{
  position:fixed;inset-inline:0;top:0;z-index:2000;
  transition:background .35s,box-shadow .35s,transform .45s var(--ease);
}
nav.site-nav.scrolled{background:rgba(243,241,234,.86);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);box-shadow:0 1px 0 var(--line)}
nav.site-nav.hide{transform:translateY(-100%)}
.nav-inner{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:84px}
.logo{display:inline-flex;align-items:center;gap:.9rem;justify-self:start;color:var(--forest);line-height:1}
.logo svg{height:30px;width:auto;overflow:visible}
.logo .brand-sub{font-family:var(--f-text);font-size:.8rem;font-weight:500;color:var(--muted);white-space:nowrap;padding-inline-start:.9rem;border-inline-start:1px solid var(--line)}
.logo .brand-top{display:none}
.noa-mark .s{fill:none;stroke:currentColor;stroke-width:8.9;stroke-linecap:round;stroke-linejoin:round}
.noa-mark .t{fill:currentColor}
html.js .noa-mark.draw .s{stroke-dasharray:1;stroke-dashoffset:1;animation:noaDraw 1.8s var(--ease) forwards}
html.js .noa-mark.draw .s.o{animation-delay:.55s}
html.js .noa-mark.draw .t{opacity:0;animation:fadeIn .4s 1.6s forwards}
@keyframes noaDraw{to{stroke-dashoffset:0}}
html.js .noa-mark.dov .s{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 2.6s var(--ease)}
html.js .noa-mark.dov .s.o{transition-delay:.7s}
html.js .noa-mark.dov .t{opacity:0;transition:opacity .5s 2.4s}
html.js .noa-mark.dov.in .s{stroke-dashoffset:0}
html.js .noa-mark.dov.in .t{opacity:1}
@keyframes fadeIn{to{opacity:1}}

.nav-links{display:flex;align-items:center;gap:2rem;font-weight:500;font-size:.98rem;justify-self:center}
.nav-links a{color:var(--forest);opacity:.78;transition:opacity .2s;position:relative;padding:.3rem 0}
.nav-links a::after{content:'';position:absolute;bottom:-2px;right:0;width:100%;height:2px;background:var(--mint);transform:scaleX(0);transform-origin:right;transition:transform .35s var(--ease)}
.nav-links a:hover,.nav-links a[aria-current="page"]{opacity:1}
.nav-links a:hover::after,.nav-links a[aria-current="page"]::after{transform:scaleX(1)}
.nav-links li:last-child{position:absolute;inset-inline-end:5%;}
.nav-links a.btn{opacity:1;padding:.7rem 1.5rem;color:var(--paper)}
.nav-links a.btn:hover{color:var(--forest)}
.nav-links a.btn::after{display:none}

.has-sub{position:relative}
.has-sub > a{display:inline-flex;align-items:center;gap:.4rem}
.has-sub .caret{font-size:.55rem;transition:transform .25s}
.sub{
  position:absolute;top:calc(100% + 16px);right:-18px;min-width:250px;
  background:var(--forest);border-radius:18px;padding:.6rem;box-shadow:var(--shadow);
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .22s,transform .3s var(--ease),visibility .22s;z-index:50;
}
.sub::before{content:'';position:absolute;top:-16px;inset-inline:0;height:16px}
.has-sub:hover .sub,.has-sub:focus-within .sub{opacity:1;visibility:visible;transform:none}
.has-sub:hover .caret{transform:rotate(180deg)}
.sub a{display:block;padding:.6rem 1rem;border-radius:11px;color:var(--paper);opacity:.85;font-size:.95rem}
.sub a::after{display:none}
.sub a:hover{background:rgba(103,237,153,.12);color:var(--mint);opacity:1}

#hamburger{display:none;background:none;border:none;width:46px;height:46px;position:relative;z-index:2100;justify-self:end;grid-column:3;border-radius:50%}
#hamburger span{display:block;width:24px;height:2px;background:var(--forest);margin:5px auto;transition:.35s var(--ease)}
#hamburger.open span{background:var(--paper)}
#hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
#hamburger.open span:nth-child(2){opacity:0}
#hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  padding:1rem 2rem;border-radius:99px;font-weight:700;font-size:1rem;font-family:var(--f-text);
  border:1.5px solid transparent;transition:background .3s,color .3s,border-color .3s,transform .3s var(--ease);
  position:relative;isolation:isolate;overflow:hidden;white-space:nowrap;
}
.btn::before{content:'';position:absolute;inset:0;z-index:-1;background:var(--mint);transform:translateY(102%);border-radius:inherit;transition:transform .45s var(--ease)}
.btn:hover::before{transform:none}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--accent);color:var(--accent-ink)}
.btn-primary:hover{color:var(--forest)}
.dark .btn-primary::before,.alt .btn-primary::before,footer .btn-primary::before{background:var(--paper)}
.mint-sec .btn-primary::before{background:var(--paper)}
.btn-ghost{background:transparent;color:var(--ink);border-color:currentColor}
.btn-ghost:hover{color:var(--forest);border-color:var(--mint)}
.btn-nav{padding:.7rem 1.5rem;font-size:.92rem}
.btn-wa{background:#25D366;color:#073B1C}
.btn-wa::before{background:var(--forest)}
.btn-wa:hover{color:var(--paper)}
.btn .arr{display:inline-block;transition:transform .35s var(--ease)}
.btn:hover .arr{transform:translateX(-5px)}

/* ---------- Highlight boxes (the brand "sticker") ---------- */
.hl,.grad{
  display:inline;background:var(--hl-bg);color:var(--hl-ink);
  padding:0 .18em .02em;-webkit-box-decoration-break:clone;box-decoration-break:clone;
}
.hl-mint{--hl-bg:var(--mint);--hl-ink:var(--forest)}
.hl-paper{--hl-bg:var(--paper);--hl-ink:var(--forest)}
html.js .reveal .hl,html.js .reveal.hl{clip-path:inset(0 0 0 100%);transition:clip-path .9s .25s var(--ease)}
html.js .reveal.in .hl,html.js .reveal.hl.in{clip-path:inset(0 0 0 0)}

/* ---------- Type ---------- */
.display,h1,h2.sec-title,.cta-band h2,.page-hero h1{font-family:var(--f-display);font-weight:700;letter-spacing:0}
h2.sec-title{font-size:clamp(3rem,6.4vw,5.6rem);line-height:.92;max-width:22ch;color:var(--ink)}
.sec-sub{color:var(--muted);margin-top:1.2rem;max-width:56ch;font-size:1.12rem}
.sec-sub strong{color:var(--ink)}
.eyebrow{display:none}
.center h2.sec-title,.center .sec-sub{margin-inline:auto;text-align:center}

/* section header bar — like the post header: dot + label right, index left */
.sec-bar{display:flex;justify-content:space-between;align-items:center;font-family:var(--f-mono);font-size:.82rem;color:var(--muted);padding-bottom:1.2rem;margin-bottom:3rem;border-bottom:1px solid var(--line)}
.sec-bar .lbl{display:inline-flex;align-items:center;gap:.6rem;color:var(--ink)}
.sec-bar .lbl::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 0 rgba(103,237,153,.6);animation:dot 2.4s 3}
@keyframes dot{70%{box-shadow:0 0 0 9px rgba(103,237,153,0)}100%{box-shadow:0 0 0 0 rgba(103,237,153,0)}}

/* ---------- Sections ---------- */
section{padding:7.5rem 0;background:var(--bg);color:var(--ink);position:relative}
.alt,.dark{background:var(--forest);color:var(--paper)}
.light{background:var(--paper)}
.mint-sec{background:var(--mint);color:var(--forest)}

/* ---------- Hero (home) ---------- */
#hero{
  min-height:100svh;position:relative;overflow:hidden;
  padding:120px 0 0;display:flex;flex-direction:column;background:var(--paper);
}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:2rem;align-items:center;flex:1}
.pov{font-family:var(--f-display);font-weight:700;color:var(--forest);font-size:clamp(4rem,8.6vw,8.6rem);line-height:.86;letter-spacing:-.005em}
.pov .row{display:block;overflow:hidden;padding-bottom:.04em}
.pov .row > span{display:inline-block}
.pov .swap{display:inline-block;position:relative}
html.js .pov .swap.swap.out{animation:swapOut .5s var(--ease) forwards}
html.js .pov .swap.inn{animation:swapIn .7s var(--ease) both}
@keyframes swapOut{to{transform:translateY(-105%);opacity:0}}
@keyframes swapIn{from{transform:translateY(105%);opacity:0}to{transform:none;opacity:1}}
.pov .hl{display:inline-block;margin-top:.12em;font-size:.72em;padding:.04em .18em .1em;line-height:1}
html.js .pov .row > span{transform:translateY(105%);animation:rowUp 1s var(--ease) forwards}
html.js .pov .row:nth-child(2) > span{animation-delay:.12s}
html.js .pov .row:nth-child(3) > span{animation-delay:.24s}
@keyframes rowUp{to{transform:none}}
html.js .pov .hl{clip-path:inset(0 0 0 100%);animation:wipe .9s .7s var(--ease) forwards}
@keyframes wipe{to{clip-path:inset(0 0 0 0)}}
@keyframes wipe2{from{clip-path:inset(0 0 0 100%)}to{clip-path:inset(0 0 0 0)}}
html.js .pov .hl.swap.inn{animation:wipe2 .8s .1s var(--ease) both}
.hero-copy{margin-top:1.8rem;max-width:46ch}
.hero-copy h1{font-family:var(--f-text);font-size:clamp(1.15rem,1.6vw,1.4rem);font-weight:800;line-height:1.45;color:var(--forest)}
.hero-copy p{color:var(--muted);font-size:1.08rem;margin-top:.5rem}
.hero-ctas{display:flex;gap:.9rem;flex-wrap:wrap;margin-top:2rem}
.hero-visual{position:relative;aspect-ratio:4/5;width:100%;max-width:470px;justify-self:center}
.hero-visual video,.hero-visual img{width:100%;height:100%;object-fit:cover;
  -webkit-mask-image:radial-gradient(closest-side,#000 72%,transparent 100%);mask-image:radial-gradient(closest-side,#000 72%,transparent 100%)}
.hero-visual .media{width:100%;height:100%;transition:transform .6s var(--ease)}
.chip-float{position:absolute;font-family:var(--f-mono);font-size:.8rem;font-weight:500;background:var(--paper-3);color:var(--forest);border:1px solid var(--line);padding:.45rem .95rem;border-radius:99px;box-shadow:0 14px 30px -18px rgba(17,23,20,.4);white-space:nowrap;animation:bob 6s ease-in-out infinite;transition:translate .6s var(--ease)}
.chip-float.c1{top:14%;inset-inline-start:-4%}
.chip-float.c2{top:46%;inset-inline-end:-6%;animation-delay:-2s;background:var(--forest);color:var(--mint);border-color:transparent}
.chip-float.c3{bottom:16%;inset-inline-start:2%;animation-delay:-4s;background:var(--mint);border-color:transparent}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.hero-meta{display:flex;gap:2.4rem;flex-wrap:wrap;align-items:center;padding:1.2rem 0 1.4rem;border-top:1px solid var(--line);margin-top:1.6rem;font-family:var(--f-mono);font-size:.85rem;color:var(--muted)}
.hero-meta b{font-family:var(--f-display);font-size:2rem;color:var(--forest);font-weight:700;margin-inline-end:.4rem;vertical-align:-.15em}
.hero-meta .scroll{margin-inline-start:auto;display:inline-flex;align-items:center;gap:.6rem}
.hero-meta .scroll i{width:1px;height:28px;background:var(--forest);position:relative;overflow:hidden;display:inline-block}
.hero-meta .scroll i::after{content:'';position:absolute;inset:0;background:var(--mint);animation:drip 1.8s infinite}
@keyframes drip{from{transform:translateY(-100%)}to{transform:translateY(100%)}}

/* ---------- The brand line (loop divider) ---------- */
.loopline{display:block;width:100%;height:auto;overflow:visible;pointer-events:none}
.loopline path{fill:none;stroke:var(--line-c,var(--mint));stroke-width:3;stroke-linecap:round;vector-effect:non-scaling-stroke}
html.js .loopline path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 2.2s var(--ease)}
html.js .loopline.in path{stroke-dashoffset:0}
.loopline.forest{--line-c:var(--forest)}

/* ---------- Marquee (kinetic type) ---------- */
.marquee{background:var(--forest);color:var(--paper);overflow:hidden;padding:1.6rem 0;direction:ltr;border-block:1px solid rgba(103,237,153,.12)}
.marquee-track{display:flex;width:max-content;animation:marq 38s linear infinite}
.marquee-track span{font-family:var(--f-display);font-weight:700;font-size:clamp(2.6rem,5vw,4.4rem);line-height:1;display:inline-flex;align-items:center;gap:2.2rem;padding-inline-end:2.2rem;direction:rtl;white-space:nowrap}
.marquee-track span em{font-style:normal;color:transparent;-webkit-text-stroke:1.5px var(--mint)}
.marquee-track svg{height:.55em;width:auto;color:var(--mint)}
@keyframes marq{to{transform:translateX(-50%)}}
.marquee:hover .marquee-track{animation-play-state:paused}

/* ---------- Manifesto (neon video) ---------- */
#manifesto{background:#071410;color:var(--paper);overflow:hidden;padding:9rem 0;isolation:isolate}
#manifesto .bgv{position:absolute;inset:0;z-index:-2}
#manifesto .bgv video,#manifesto .bgv img{width:100%;height:100%;object-fit:cover;object-position:left center}
#manifesto::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(270deg,rgba(7,20,16,.96) 0%,rgba(7,20,16,.88) 40%,rgba(7,20,16,.25) 75%,rgba(7,20,16,.1) 100%)}
#manifesto .display{font-size:clamp(3.4rem,8vw,7.4rem);line-height:.9;max-width:12ch}
.mani-list{margin-top:3.2rem;max-width:620px;counter-reset:m}
.mani-list li{counter-increment:m;display:grid;grid-template-columns:3.2rem 1fr;gap:1rem;padding:1.4rem 0;border-top:1px solid rgba(103,237,153,.18);font-size:1.15rem;color:rgba(243,241,234,.5);transition:color .6s}
.mani-list li::before{content:'0' counter(m);font-family:var(--f-mono);font-size:.85rem;color:var(--mint);padding-top:.3rem}
.mani-list li b{display:block;color:inherit;font-weight:700;font-size:1.3rem}
.mani-list li.lit{color:var(--paper)}
.ai-tag{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--f-mono);font-size:.8rem;color:rgba(243,241,234,.55);position:absolute;bottom:1.2rem;inset-inline-end:1.4rem}

/* ---------- Services (editorial rows) ---------- */
.svc-list{border-top:1px solid var(--line)}
.svc-row{
  display:grid;grid-template-columns:5rem 1.2fr 1fr 3rem;gap:1.5rem;align-items:center;
  padding:2rem 1.2rem;border-bottom:1px solid var(--line);position:relative;isolation:isolate;
  transition:color .4s var(--ease),padding .4s var(--ease);
}
.svc-row::before{content:'';position:absolute;inset:0;z-index:-1;background:var(--forest);transform:scaleY(0);transform-origin:bottom;transition:transform .5s var(--ease)}
.svc-row .n{font-family:var(--f-mono);font-size:.9rem;color:var(--muted);transition:color .4s}
.svc-row h3{font-family:var(--f-display);font-weight:700;font-size:clamp(2.4rem,4.4vw,4rem);line-height:.95}
.svc-row p{color:var(--muted);font-size:1rem;transition:color .4s}
.svc-row .go{width:3rem;height:3rem;border-radius:50%;border:1.5px solid currentColor;display:grid;place-items:center;transition:transform .5s var(--ease),background .4s,border-color .4s,color .4s}
.svc-row:hover,.svc-row:focus-visible{color:var(--paper);padding-inline:2rem}
.svc-row:hover::before,.svc-row:focus-visible::before{transform:scaleY(1)}
.svc-row:hover .n,.svc-row:hover p{color:rgba(243,241,234,.75)}
.svc-row:hover .go{background:var(--mint);border-color:var(--mint);color:var(--forest);transform:rotate(-45deg)}
.svc-preview{position:fixed;top:0;left:0;width:240px;aspect-ratio:4/5;border-radius:16px;overflow:hidden;pointer-events:none;z-index:1800;opacity:0;transform:translate(-50%,-50%) scale(.6) rotate(-6deg);transition:opacity .3s,transform .5s var(--ease);box-shadow:var(--shadow)}
.svc-preview.on{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(-3deg)}
.svc-preview img{width:100%;height:100%;object-fit:cover}

/* ---------- Cases (sticky stack) ---------- */
#cases{background:var(--forest);color:var(--paper);padding-bottom:4rem}
.case-stack{position:relative}
.case{
  position:sticky;top:110px;min-height:560px;margin-bottom:4vh;
  display:grid;grid-template-columns:1.1fr .9fr;gap:3rem;align-items:center;
  background:linear-gradient(160deg,#1C4539,#112F27);border:1px solid rgba(103,237,153,.16);
  border-radius:30px;padding:3.2rem;overflow:hidden;transform-origin:center top;
  box-shadow:0 -30px 60px -40px rgba(0,0,0,.6);
}
.case::after{content:'';position:absolute;inset-inline-start:-12%;bottom:-30%;width:70%;aspect-ratio:3/1;opacity:.07;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='12 8 440 152'%3E%3Cg fill='none' stroke='%2367ED99' stroke-width='8.9' stroke-linecap='round'%3E%3Cpath d='M22.39 149.55 L22.39 50.99 A26.89 26.89 0 0 1 69.10 32.81 L151.84 123.00 A85.25 85.25 0 0 0 207.23 150.29 A66.52 66.52 0 0 0 267.40 122.35 L334.00 27.85 A22.05 22.05 0 0 1 371.09 29.48 L441.87 151.39'/%3E%3Cpath d='M267.40 122.35 A66.52 66.52 0 1 0 147.41 95.00'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;pointer-events:none}
.case .k{font-family:var(--f-mono);font-size:.85rem;color:var(--mint);display:flex;gap:1rem;margin-bottom:1.4rem}
.case .k span+span{opacity:.6}
.case h3{font-family:var(--f-display);font-weight:700;font-size:clamp(3rem,5.6vw,5.4rem);line-height:.9;color:var(--paper)}
.case p{color:rgba(243,241,234,.75);font-size:1.08rem;margin-top:1.2rem;max-width:46ch}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.6rem}
.chips span{font-family:var(--f-mono);font-size:.78rem;padding:.38rem .9rem;border-radius:99px;border:1px solid rgba(103,237,153,.45);color:var(--mint)}
.chips span.f{background:var(--mint);color:var(--forest);border-color:var(--mint);font-weight:600}
.case .vis{position:relative;justify-self:center;width:100%;max-width:400px}
.case .vis img{width:100%;-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent),linear-gradient(transparent,#000 7%,#000 72%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent),linear-gradient(transparent,#000 7%,#000 72%,transparent);mask-composite:intersect}
.case .vis video{width:100%;max-width:320px;margin-inline:auto;border-radius:22px;aspect-ratio:9/16;object-fit:cover;border:1px solid rgba(103,237,153,.25)}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;width:100%}
.tile{background:rgba(7,20,16,.45);border:1px solid rgba(103,237,153,.16);border-radius:18px;padding:1.3rem 1.4rem}
.tile b{display:block;font-family:var(--f-display);font-size:clamp(2.6rem,4vw,3.6rem);line-height:1;color:var(--paper);direction:ltr;text-align:right}
.tile span{font-size:.92rem;color:var(--mint);font-weight:600}
.src{font-family:var(--f-mono);font-size:.8rem;color:rgba(243,241,234,.5);margin-top:1rem;display:block}
.case-more{display:flex;justify-content:center;margin-top:2rem}

/* ---------- Audit (mint, interactive) ---------- */
#audit{overflow:hidden}
.audit-grid{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:start}
.audit-list{display:flex;flex-direction:column}
.audit-item{display:grid;grid-template-columns:2.6rem 1fr auto;gap:1rem;align-items:center;padding:1.15rem .2rem;border-bottom:1.5px solid rgba(23,59,50,.25);cursor:pointer;user-select:none;transition:padding .35s var(--ease)}
.audit-item:hover{padding-inline-start:.8rem}
.audit-item input{position:absolute;opacity:0;pointer-events:none}
.audit-item .box{width:2rem;height:2rem;border:2px solid var(--forest);border-radius:8px;display:grid;place-items:center;transition:background .25s}
.audit-item .box svg{opacity:0;transform:scale(.4);transition:.35s var(--ease)}
.audit-item input:checked + .box{background:var(--forest)}
.audit-item input:checked + .box svg{opacity:1;transform:none}
.audit-item b{font-size:1.18rem;font-weight:700;display:block;line-height:1.35}
.audit-item small{display:block;color:rgba(23,59,50,.75);font-size:.95rem}
.audit-item .no{font-family:var(--f-mono);font-size:.8rem;opacity:.6}
.score{position:sticky;top:120px;background:var(--forest);color:var(--paper);border-radius:28px;padding:2.4rem;text-align:center;--accent:var(--mint);--accent-ink:var(--forest)}
.score .btn-primary::before{background:var(--paper)}
.score svg{width:180px;height:180px;margin:0 auto}
.score .ring-bg{fill:none;stroke:rgba(103,237,153,.15);stroke-width:10}
.score .ring{fill:none;stroke:var(--mint);stroke-width:10;stroke-linecap:round;transform:rotate(-90deg);transform-origin:center;transition:stroke-dashoffset .8s var(--ease)}
.score .num{font-family:var(--f-display);font-size:4.4rem;fill:var(--paper);font-weight:700}
.score h3{font-family:var(--f-display);font-size:2.4rem;line-height:1;margin-top:1rem}
.score p{color:rgba(243,241,234,.72);margin:.6rem auto 1.6rem;max-width:34ch}

/* ---------- Generic grids & cards (inner pages) ---------- */
.cards-2{display:grid;grid-template-columns:repeat(2,1fr);gap:1.2rem;margin-top:3rem}
.cards-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-top:3rem}
.cards-4{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem;margin-top:3rem}
.card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);color:var(--ink);
  padding:2.2rem 2rem;transition:transform .5s var(--ease),border-color .3s,background .3s;position:relative;overflow:hidden;display:block
}
.card:hover{transform:translateY(-6px);border-color:var(--accent)}
.card .ico,.feature .ico,.contact-card .ico{width:52px;height:52px;border-radius:14px;background:var(--forest);display:grid;place-items:center;color:var(--mint);margin-bottom:1.2rem;transition:transform .5s var(--ease)}
.alt .card .ico,.alt .feature .ico,.alt .contact-card .ico,.dark .card .ico{background:var(--mint);color:var(--forest)}
.card:hover .ico{transform:rotate(-8deg) scale(1.06)}
.card h3{font-family:var(--f-display);font-size:2.1rem;line-height:1;font-weight:700;margin-bottom:.6rem}
.card p{color:var(--muted);font-size:.98rem}
.card .more{display:inline-flex;align-items:center;gap:.4rem;color:var(--ink);font-weight:700;font-size:.92rem;margin-top:1.1rem;border-bottom:2px solid var(--mint);padding-bottom:2px}
.card .num{position:absolute;top:1.5rem;inset-inline-end:1.6rem;font-family:var(--f-mono);font-size:.85rem;color:var(--muted)}

.feature{display:flex;gap:1.1rem;align-items:flex-start;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:1.5rem;margin-bottom:.9rem;transition:transform .4s var(--ease),border-color .3s}
.feature:hover{transform:translateX(-6px);border-color:var(--accent)}
.feature .ico{flex-shrink:0;margin:0}
.feature h4{font-size:1.1rem;font-weight:800;margin-bottom:.15rem}
.feature p{color:var(--muted);font-size:.96rem;margin:0}

.checks{margin-top:1.6rem;display:flex;flex-direction:column;gap:1rem}
.checks li{display:flex;align-items:flex-start;gap:.9rem;color:var(--ink);font-weight:500;font-size:1.05rem}
.checks .ck{width:28px;height:28px;border-radius:8px;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;font-size:.8rem;font-weight:900;flex-shrink:0;margin-top:.1rem}

/* process */
.process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem;margin-top:3.4rem;position:relative}
.process-line{position:absolute;top:30px;inset-inline:0;height:60px;pointer-events:none;z-index:0}
.step{position:relative;z-index:1;padding:0 .4rem}
.step .circle{width:60px;height:60px;border-radius:50%;background:var(--paper);border:2px solid var(--forest);color:var(--forest);display:grid;place-items:center;font-family:var(--f-mono);font-weight:600;font-size:1rem;margin-bottom:1.4rem;transition:background .5s,color .5s,transform .5s var(--ease)}
.alt .step .circle,.dark .step .circle{background:var(--forest);border-color:var(--mint);color:var(--mint)}
.step.on .circle,.step:hover .circle{background:var(--mint);border-color:var(--mint);color:var(--forest);transform:scale(1.08)}
.step h4{font-family:var(--f-display);font-size:2rem;line-height:1;font-weight:700;margin-bottom:.5rem}
.step p{color:var(--muted);font-size:.96rem}
.process-grid:not(.has-line)::before{content:'';position:absolute;top:30px;inset-inline:3%;height:2px;background:var(--line);z-index:0}
.pline{position:absolute;top:29px;inset-inline:30px calc(25% - 30px);height:2px;background:var(--line);z-index:0}
.pfill{height:100%;background:var(--mint);transform-origin:right;transform:scaleX(var(--p,0))}
.alt .pfill,.dark .pfill{background:var(--mint)}

/* ---------- Clients ticker ---------- */
#clients{padding:5rem 0;background:var(--paper)}
.ticker-wrap{overflow:hidden;position:relative;direction:ltr;mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.ticker{display:flex;gap:4.5rem;width:max-content;animation:scroll 46s linear infinite;padding:.5rem 0;align-items:center}
.ticker:hover{animation-play-state:paused}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.logo-card{flex-shrink:0;width:150px;height:84px;display:grid;place-items:center}
.logo-card img{max-height:66px;max-width:100%;object-fit:contain;mix-blend-mode:multiply;filter:grayscale(1) contrast(1.1);opacity:.62;transition:filter .4s,opacity .4s,transform .4s var(--ease)}
.logo-card:hover img{filter:none;opacity:1;transform:scale(1.06)}

/* ---------- Results / case mini / testimonials (inner pages) ---------- */
.result,.testi{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:2.2rem;transition:transform .5s var(--ease),border-color .3s;position:relative;overflow:hidden}
.result:hover,.testi:hover{transform:translateY(-6px);border-color:var(--accent)}
.result .who{font-family:var(--f-mono);font-size:.85rem;color:var(--muted)}
.result .sector{color:var(--muted);font-size:.85rem;margin-bottom:1rem}
.result .big{font-family:var(--f-display);font-size:clamp(3rem,5vw,4.2rem);line-height:1;font-weight:700}
.result .what{font-weight:700;font-size:1.08rem;margin:.3rem 0 .8rem}
.result p{color:var(--muted);font-size:.96rem;margin-bottom:1.2rem}
.result .tags{display:flex;gap:.5rem;flex-wrap:wrap}
.result .tags span{font-family:var(--f-mono);font-size:.75rem;color:var(--ink);border:1px solid var(--line);padding:.25rem .8rem;border-radius:99px}
.case-mini{
  background:var(--forest);color:var(--paper);border-radius:28px;padding:2.6rem;margin-top:3rem;position:relative;overflow:hidden;
}
.case-mini::after{content:'';position:absolute;inset-inline-start:-6%;bottom:-40%;width:55%;aspect-ratio:3/1;opacity:.08;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='12 8 440 152'%3E%3Cg fill='none' stroke='%2367ED99' stroke-width='8.9' stroke-linecap='round'%3E%3Cpath d='M22.39 149.55 L22.39 50.99 A26.89 26.89 0 0 1 69.10 32.81 L151.84 123.00 A85.25 85.25 0 0 0 207.23 150.29 A66.52 66.52 0 0 0 267.40 122.35 L334.00 27.85 A22.05 22.05 0 0 1 371.09 29.48 L441.87 151.39'/%3E%3Cpath d='M267.40 122.35 A66.52 66.52 0 1 0 147.41 95.00'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat}
.case-mini .label{font-family:var(--f-mono);color:var(--mint);font-size:.85rem;margin-bottom:.8rem}
.case-mini h3{font-family:var(--f-display);font-size:clamp(2.2rem,3.6vw,3.2rem);line-height:1;font-weight:700;margin-bottom:.7rem}
.case-mini p{color:rgba(243,241,234,.78);max-width:62ch}
.case-mini .nums{display:flex;gap:1rem;flex-wrap:wrap;margin-top:1.6rem}
.case-mini .nums div{background:rgba(7,20,16,.4);border:1px solid rgba(103,237,153,.16);border-radius:16px;padding:1rem 1.3rem;min-width:150px}
.case-mini .nums b{display:block;font-family:var(--f-display);font-size:2.6rem;line-height:1;color:var(--paper);direction:ltr;text-align:right}
.case-mini .nums span{color:var(--mint);font-size:.88rem;font-weight:600}
.testi{display:flex;flex-direction:column}
.stars{color:var(--accent);letter-spacing:3px;margin-bottom:1rem}
.testi blockquote{font-size:1.04rem;flex:1}
.testi .person{display:flex;align-items:center;gap:.9rem;margin-top:1.5rem;padding-top:1.3rem;border-top:1px solid var(--line)}
.avatar{width:46px;height:46px;border-radius:50%;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;font-weight:800}
.testi .person span{color:var(--muted);font-size:.85rem;display:block}

/* ---------- Instagram feed ---------- */
.ig-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.ig-grid a{position:relative;border-radius:16px;overflow:hidden;aspect-ratio:4/5;background:var(--paper-2);display:block;transform:translateY(var(--py,0));transition:transform .2s linear}
.ig-grid img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease),filter .5s}
.ig-grid a::after{content:'';position:absolute;inset:0;background:linear-gradient(transparent 55%,rgba(23,59,50,.55));opacity:0;transition:opacity .4s}
.ig-grid a:hover img{transform:scale(1.06)}
.ig-grid a:hover::after{opacity:1}
.ig-head{display:flex;justify-content:space-between;align-items:end;gap:2rem;flex-wrap:wrap;margin-bottom:2.6rem}

/* ---------- Forms ---------- */
.form-card{background:var(--paper-3);color:var(--forest);border-radius:28px;padding:2.6rem;box-shadow:var(--shadow);position:relative;overflow:hidden;
  --ink:var(--forest);--muted:#52665F;--line:rgba(23,59,50,.16);--accent:var(--forest);--accent-ink:var(--paper)}
.form-card h3{font-family:var(--f-display);font-size:2.6rem;line-height:1;font-weight:700;margin-bottom:.4rem}
.form-card .sub{color:var(--muted);font-size:.98rem;margin-bottom:1.6rem}
.wa-btn{display:flex;align-items:center;justify-content:center;gap:.7rem;width:100%;background:#25D366;color:#073B1C;font-weight:800;font-size:1.05rem;padding:1rem;border-radius:16px;transition:transform .3s var(--ease),box-shadow .3s}
.wa-btn:hover{transform:translateY(-2px);box-shadow:0 14px 30px -12px rgba(37,211,102,.6)}
.divider{display:flex;align-items:center;gap:1rem;color:var(--muted);font-size:.85rem;margin:1.4rem 0;font-family:var(--f-mono)}
.divider::before,.divider::after{content:'';flex:1;height:1px;background:var(--line)}
.field{margin-bottom:1rem;position:relative}
.field input,.field select,.field textarea{
  width:100%;background:transparent;border:none;border-bottom:1.5px solid var(--line);border-radius:0;
  padding:1rem .2rem;color:var(--forest);font-family:inherit;font-size:1.05rem;transition:border-color .3s;
  appearance:none;-webkit-appearance:none;
}
.field::after{content:'';position:absolute;bottom:0;right:0;width:100%;height:2px;background:var(--forest);transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease)}
.field:focus-within::after{transform:scaleX(1)}
.field textarea{min-height:110px;resize:vertical}
.field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23173B32' stroke-width='2' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:left .3rem center}
.field input:focus,.field select:focus,.field textarea:focus{outline:none}
.field input::placeholder,.field textarea::placeholder{color:#7A8A84}
.form-note{color:var(--muted);font-size:.8rem;text-align:center;margin-top:.9rem}
.submit-btn{width:100%;padding:1.1rem;font-size:1.08rem;margin-top:.6rem}

/* ---------- FAQ ---------- */
.faq-list{max-width:900px;margin:3rem 0 0}
details{border-bottom:1px solid var(--line)}
summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.6rem .2rem;font-weight:700;font-size:1.18rem;transition:color .2s,padding .35s var(--ease)}
summary:hover{padding-inline-start:.6rem}
summary::-webkit-details-marker{display:none}
summary .plus{width:36px;height:36px;border-radius:50%;border:1.5px solid currentColor;display:grid;place-items:center;transition:transform .4s var(--ease),background .3s,color .3s;flex-shrink:0;font-weight:400}
details[open] .plus{transform:rotate(45deg);background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
details .ans{padding:0 .2rem 1.6rem;color:var(--muted);max-width:70ch;font-size:1.04rem}
details .ans a{color:var(--ink)!important;text-decoration:underline;text-decoration-color:var(--mint);text-underline-offset:4px;text-decoration-thickness:2px}

/* ---------- CTA band ---------- */
.cta-band{background:var(--forest);color:var(--paper);text-align:center;padding:7rem 0;position:relative;overflow:hidden;
  --ink:var(--paper);--muted:rgba(243,241,234,.7);--accent:var(--mint);--accent-ink:var(--forest);--line:rgba(103,237,153,.18)}
.cta-band h2{font-size:clamp(3rem,6vw,5.4rem);line-height:.92;max-width:16ch;margin-inline:auto}
.cta-band p{color:var(--muted);margin:1.2rem auto 2.2rem;max-width:52ch;font-size:1.1rem}
.cta-band .hero-ctas{justify-content:center}
.cta-band .btn-primary::before{background:var(--paper)}
.cta-band .loopline{position:absolute;bottom:2.2rem;inset-inline:0;opacity:.7}

/* ---------- Contact cards ---------- */
.contact-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:2rem;text-align:center;transition:transform .5s var(--ease),border-color .3s;display:block;color:var(--ink)}
.contact-card:hover{transform:translateY(-6px);border-color:var(--accent)}
.contact-card .ico{margin:0 auto 1rem}
.contact-card b{display:block;font-size:1.18rem;margin-bottom:.2rem}
.contact-card span{color:var(--muted);font-size:.95rem}

/* ---------- Blog ---------- */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-top:3rem}
.post-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:transform .5s var(--ease),border-color .3s;display:flex;flex-direction:column;color:var(--ink)}
.post-card:hover{transform:translateY(-6px);border-color:var(--accent)}
.post-card .thumb{height:170px;background:var(--forest);display:grid;place-items:center;color:var(--mint);position:relative;overflow:hidden}
.post-card .thumb::after{content:'';position:absolute;inset:auto -10% -45% -10%;height:90%;border:2px solid rgba(103,237,153,.3);border-radius:50%;transition:transform .8s var(--ease)}
.post-card:hover .thumb::after{transform:translateY(-12%) scale(1.05)}
.post-card .thumb svg{width:46px;height:46px;transition:transform .6s var(--ease)}
.post-card:hover .thumb svg{transform:scale(1.15) rotate(-6deg)}
.post-card .body{padding:1.7rem;display:flex;flex-direction:column;flex:1}
.post-card .meta{font-family:var(--f-mono);color:var(--muted);font-size:.76rem;margin-bottom:.6rem}
.post-card h3{font-size:1.2rem;font-weight:800;line-height:1.4;margin-bottom:.6rem}
.post-card p{color:var(--muted);font-size:.95rem;flex:1}
.post-card .more{font-weight:700;font-size:.92rem;margin-top:1.1rem;display:inline-flex;gap:.4rem;border-bottom:2px solid var(--mint);align-self:flex-start;padding-bottom:2px}

/* ---------- Article ---------- */
.article-wrap{max-width:780px;margin-inline:auto}
article.post{padding-bottom:3rem}
article.post h1{font-size:clamp(3rem,6vw,4.6rem);line-height:.95;margin-bottom:1rem}
article.post .post-meta{font-family:var(--f-mono);color:var(--muted);font-size:.82rem;margin-bottom:2rem;display:flex;gap:1.2rem;flex-wrap:wrap}
.expert-box{background:var(--forest);color:var(--paper);border-radius:22px;padding:1.8rem 2rem;margin:0 0 2.6rem}
.expert-box .label{font-family:var(--f-mono);color:var(--mint);font-size:.82rem;margin-bottom:.6rem;display:flex;align-items:center;gap:.5rem}
.expert-box p{color:var(--paper)!important;font-size:1.06rem;margin:0!important}
article.post h2{font-family:var(--f-display);font-size:clamp(2.4rem,4vw,3.2rem);font-weight:700;margin:3rem 0 .8rem;line-height:1}
article.post h3{font-size:1.3rem;font-weight:800;margin:2rem 0 .6rem}
article.post p{color:#3C4F48;margin-bottom:1.15rem;font-size:1.08rem}
article.post ul,article.post ol{margin:0 1.4rem 1.2rem 0;color:#3C4F48}
article.post ul{list-style:disc}
article.post ol{list-style:decimal}
article.post li{margin-bottom:.5rem;font-size:1.05rem}
article.post li::marker{color:var(--forest)}
article.post a{color:var(--forest);text-decoration:underline;text-decoration-color:var(--mint);text-decoration-thickness:2px;text-underline-offset:4px}
article.post strong{color:var(--forest)}
article.post table{width:100%;border-collapse:collapse;margin:1.4rem 0;font-size:.96rem}
article.post th{background:var(--forest);color:var(--paper);font-weight:700;padding:.85rem;text-align:right}
article.post td{padding:.85rem;border-bottom:1px solid var(--line);color:#3C4F48}
.related{margin-top:3rem;padding-top:2rem;border-top:1px solid var(--line)}
.related h2{font-size:2.2rem!important;margin-top:0!important}

/* ---------- Page hero (inner pages) ---------- */
.page-hero{position:relative;overflow:hidden;padding:170px 0 170px;background:var(--paper)}
.page-hero::after{content:'';position:absolute;inset-inline-start:-6%;bottom:-8%;width:min(620px,60vw);aspect-ratio:440/152;opacity:.07;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='12 8 440 152'%3E%3Cg fill='none' stroke='%23173B32' stroke-width='8.9' stroke-linecap='round'%3E%3Cpath d='M22.39 149.55 L22.39 50.99 A26.89 26.89 0 0 1 69.10 32.81 L151.84 123.00 A85.25 85.25 0 0 0 207.23 150.29 A66.52 66.52 0 0 0 267.40 122.35 L334.00 27.85 A22.05 22.05 0 0 1 371.09 29.48 L441.87 151.39'/%3E%3Cpath d='M267.40 122.35 A66.52 66.52 0 1 0 147.41 95.00'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat}
.page-hero h1{font-size:clamp(3.2rem,6.6vw,6.4rem);line-height:.92;max-width:20ch;position:relative;z-index:1}
.page-hero h1 .grad{display:inline-block;padding:0 .14em .06em;line-height:1}
.page-hero .lead{color:var(--muted);font-size:clamp(1.05rem,1.5vw,1.22rem);max-width:58ch;margin-top:1.6rem;position:relative;z-index:1}
.page-hero .hero-ctas{margin-top:2rem;position:relative;z-index:1}
.page-hero .loopline{position:absolute;bottom:10px;inset-inline:0;z-index:0}
.breadcrumbs{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;font-family:var(--f-mono);color:var(--muted);font-size:.8rem;margin-bottom:1.8rem}
.breadcrumbs a:hover{color:var(--forest)}
.breadcrumbs .sep{opacity:.5}
.breadcrumbs span[aria-current]{color:var(--forest)}
.breadcrumbs::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--mint);margin-inline-end:.3rem}
.blob{display:none}

/* ---------- Two-col ---------- */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:4.5rem;align-items:center}
.split.rev{grid-template-columns:.95fr 1.05fr}

/* ---------- Big contact (home) ---------- */
#contact-home{background:var(--forest);color:var(--paper);overflow:hidden}
#contact-home .display{font-size:clamp(5rem,13vw,12rem);line-height:.86;margin-bottom:1.6rem}
#contact-home .direct{display:flex;flex-direction:column;gap:.2rem;margin-top:2.4rem}
#contact-home .direct a{display:flex;justify-content:space-between;align-items:center;padding:1.2rem .2rem;border-bottom:1px solid rgba(103,237,153,.2);font-size:1.25rem;font-weight:700;transition:padding .35s var(--ease),color .3s}
#contact-home .direct a:hover{padding-inline-start:1rem;color:var(--mint)}
#contact-home .direct a span{font-family:var(--f-mono);font-size:.8rem;font-weight:400;color:rgba(243,241,234,.55)}

/* ---------- Footer ---------- */
footer{background:var(--forest-3);padding:6rem 0 2rem;color:var(--paper);position:relative;overflow:hidden}
.foot-mark{color:var(--mint);width:100%;margin-bottom:4rem;opacity:.95}
.foot-mark svg{width:100%;height:auto;overflow:visible}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2.5rem;margin-bottom:3rem}
.footer-grid .about p{color:rgba(243,241,234,.62);font-size:.95rem;margin-top:1.2rem;max-width:36ch}
footer .logo{color:var(--paper)}
footer .logo .brand-sub{color:rgba(243,241,234,.6);border-color:rgba(243,241,234,.2)}
.footer-grid h5{font-family:var(--f-mono);font-size:.8rem;font-weight:500;margin-bottom:1.1rem;color:var(--mint)}
.footer-grid ul li{margin-bottom:.6rem}
.footer-grid a{color:rgba(243,241,234,.78);font-size:.95rem;transition:color .2s}
.footer-grid a:hover{color:var(--mint)}
.copy{font-family:var(--f-mono);color:rgba(243,241,234,.45);font-size:.78rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;padding-top:1.6rem;border-top:1px solid rgba(243,241,234,.1)}

/* ---------- Floating ---------- */
.wa-float{position:fixed;bottom:24px;inset-inline-start:24px;z-index:1500;width:58px;height:58px;border-radius:50%;background:#25D366;display:grid;place-items:center;box-shadow:0 12px 30px -8px rgba(37,211,102,.6);transition:transform .3s var(--ease),bottom .4s var(--ease)}
.wa-float::before{content:'';position:absolute;inset:-6px;border-radius:50%;border:2px solid #25D366;opacity:0;animation:ring 3.6s 4s infinite}
@keyframes ring{0%{transform:scale(.85);opacity:.7}100%{transform:scale(1.35);opacity:0}}
.wa-float:hover{transform:scale(1.08)}
#sticky-bar{position:fixed;bottom:16px;inset-inline:0;margin-inline:auto;width:min(620px,calc(100% - 32px));z-index:1400;background:var(--forest);color:var(--paper);border-radius:99px;box-shadow:0 20px 40px -18px rgba(17,23,20,.6);display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.55rem .55rem .55rem 1.6rem;padding-inline-start:1.6rem;transform:translateY(150%);transition:transform .5s var(--ease);
  --accent:var(--mint);--accent-ink:var(--forest)}
#sticky-bar.show{transform:translateY(0)}
#sticky-bar p{font-weight:700;font-size:1rem}
#sticky-bar .btn{padding:.7rem 1.5rem;font-size:.95rem}
#sticky-bar .btn-primary::before{background:var(--paper)}
body.bar-visible .wa-float{bottom:96px}
body.bar-visible #a11y-toggle{bottom:96px}
body.bar-visible #a11y-panel{bottom:156px}

/* ---------- A11y widget ---------- */
#a11y-toggle{position:fixed;bottom:24px;inset-inline-end:24px;z-index:1500;width:48px;height:48px;border-radius:50%;background:var(--forest);border:none;color:var(--mint);display:grid;place-items:center;transition:transform .3s var(--ease),bottom .4s var(--ease)}
#a11y-toggle:hover{transform:scale(1.08)}
#a11y-panel{position:fixed;bottom:84px;inset-inline-end:24px;z-index:1500;background:var(--paper-3);border:1px solid var(--line);border-radius:18px;padding:1.2rem;width:230px;display:none;box-shadow:var(--shadow);color:var(--forest)}
#a11y-panel.open{display:block}
#a11y-panel h5{font-size:.95rem;margin-bottom:.8rem}
.a11y-row{display:flex;gap:.5rem;margin-bottom:.55rem}
.a11y-row button,.a11y-row a{flex:1;background:var(--paper);border:1px solid var(--line);color:var(--forest)!important;border-radius:10px;padding:.45rem;font-size:.85rem;text-align:center}
.a11y-row button:hover,.a11y-row a:hover{border-color:var(--forest)}

/* ---------- Reveal ---------- */
html.js .reveal{opacity:0;transform:translateY(40px);transition:opacity .9s var(--ease),transform 1.1s var(--ease)}
html.js .reveal.in{opacity:1;transform:none}
html.js .reveal.d1{transition-delay:.08s}
html.js .reveal.d2{transition-delay:.16s}
html.js .reveal.d3{transition-delay:.24s}
html.js h2.sec-title.reveal,html.js .page-hero h1{clip-path:inset(0 0 100% 0);transform:translateY(30px);transition:clip-path 1.1s var(--ease),transform 1.1s var(--ease),opacity .6s}
html.js h2.sec-title.reveal.in{clip-path:inset(-30% -60% -40% -60%);transform:none}
html.js .page-hero h1{opacity:1;animation:heroIn 1.1s .15s var(--ease) forwards}
@keyframes heroIn{to{clip-path:inset(-30% -60% -40% -60%);transform:none}}
.magnetic{transition:transform .4s var(--ease)}

/* ---------- Responsive ---------- */
@media (max-width:1080px){
  .hero-grid{grid-template-columns:1fr;gap:0}
  .hero-visual{max-width:380px;margin-top:-1rem;order:2}
  .case{grid-template-columns:1fr;position:relative;top:auto;min-height:0;padding:2.4rem;gap:2rem}
  .audit-grid{grid-template-columns:1fr;gap:2.4rem}
  .score{position:relative;top:auto}
  .svc-row{grid-template-columns:3.5rem 1fr 3rem}
  .svc-row p{grid-column:2/3}
  .svc-row .go{grid-row:1;grid-column:3}
  .ig-grid{grid-template-columns:repeat(3,1fr)}
  .ig-grid a:nth-child(n+7){display:none}
}
@media (max-width:980px){
  .cards-2,.cards-3,.blog-grid{grid-template-columns:1fr}
  .cards-4{grid-template-columns:repeat(2,1fr)}
  .process-grid{grid-template-columns:repeat(2,1fr);row-gap:2.4rem}
  .process-line{display:none}
  .process-grid::before{display:none}
  .split,.split.rev{grid-template-columns:1fr;gap:2.8rem}
  .footer-grid{grid-template-columns:1fr 1fr}
  .nav-links li:last-child{position:static}
}
@media (max-width:1024px){
  .nav-links{
    position:fixed;inset:0;width:100%;height:100dvh;background:var(--forest);
    flex-direction:column;justify-content:center;align-items:flex-start;gap:1.1rem;padding:6rem 8% 3rem;
    opacity:0;visibility:hidden;pointer-events:none;clip-path:circle(0% at 92% 42px);
    transition:clip-path .7s var(--ease),opacity .3s,visibility .7s;z-index:2050;overflow-y:auto;
  }
  .nav-links.open{opacity:1;visibility:visible;pointer-events:auto;clip-path:circle(150% at 92% 42px)}
  .nav-links > li > a{font-family:var(--f-display);font-size:3rem;line-height:1;color:var(--paper);opacity:1}
  .nav-links a::after{display:none}
  .has-sub .caret{display:none}
  .has-sub .sub{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;background:transparent;min-width:0;padding:.4rem 0 0}
  .sub a{padding:.25rem 0;font-size:1rem;color:rgba(243,241,234,.7)}
  .nav-links a.btn{font-family:var(--f-text);font-size:1.05rem;margin-top:1rem;background:var(--mint);color:var(--forest)}
  #hamburger{display:block}
  .logo .brand-sub{display:none}
}
@media (max-width:760px){
  section{padding:5rem 0}
  #sticky-bar p{display:none}
  #sticky-bar{width:auto;inset-inline:16px;justify-content:center;padding:.5rem}
  #sticky-bar .btn{width:100%}
  .form-card{padding:1.8rem}
  .page-hero{padding:130px 0 140px}
  #manifesto{padding:6rem 0}
  #manifesto::after{background:linear-gradient(180deg,rgba(7,20,16,.55),rgba(7,20,16,.92) 45%)}
  .ig-grid{grid-template-columns:repeat(2,1fr)}
  .ig-grid a:nth-child(n+5){display:none}
  .chip-float{font-size:.72rem}
}
@media (max-width:560px){
  #hero{padding-top:118px}
  .pov{font-size:clamp(3.6rem,17vw,5.2rem)}
  .hero-ctas{flex-direction:column;align-items:stretch}
  .hero-ctas .btn{width:100%}
  .hero-meta{gap:1.2rem 1.8rem}
  .hero-meta .scroll{display:none}
  .process-grid,.cards-4{grid-template-columns:1fr}
  h2.sec-title{font-size:clamp(2.8rem,13vw,3.6rem)}
  .card,.testi,.result,.contact-card{padding:1.6rem}
  .case{padding:1.8rem;border-radius:24px}
  .tiles{gap:.6rem}
  .tile{padding:1rem}
  .svc-row{padding:1.5rem .4rem;gap:1rem}
  .svc-row:hover{padding-inline:1rem}
  .wa-float{width:52px;height:52px}
  .footer-grid{grid-template-columns:1fr;gap:2rem}
  .logo-card{width:120px;height:70px}
  .ticker{gap:3rem}
}
@media (max-width:380px){
  .container{width:92%}
  .btn{padding:.9rem 1.4rem;font-size:.95rem}
}

/* ==========================================================================
   v2 refinements: motion, mobile UX
   ========================================================================== */
/* cross-page transitions (supported browsers) */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vtOut .32s var(--ease) both}
::view-transition-new(root){animation:vtIn .55s var(--ease) both}
@keyframes vtOut{to{opacity:0;transform:translateY(-10px)}}
@keyframes vtIn{from{opacity:0;transform:translateY(14px)}}
@media (prefers-reduced-motion:reduce){::view-transition-old(root),::view-transition-new(root){animation:none}}

.hero-visual{will-change:translate}
.sb-wa{display:none}
.audit-pill{display:none}
#clients .ticker-wrap{margin-top:0}

@media (max-width:1080px){
  .audit-pill{display:flex;align-items:center;gap:.8rem;position:sticky;top:86px;z-index:5;width:max-content;
    background:var(--forest);color:var(--paper);border-radius:99px;padding:.55rem 1.1rem;margin:0 0 1.2rem;box-shadow:0 12px 26px -14px rgba(17,23,20,.5)}
  .ap-num{font-family:var(--f-display);font-size:1.6rem;line-height:1;color:var(--mint);direction:ltr}
  .ap-bar{width:110px;height:6px;border-radius:9px;background:rgba(103,237,153,.18);overflow:hidden}
  .ap-bar i{display:block;height:100%;width:var(--ap,0%);background:var(--mint);transition:width .6s var(--ease)}
}
@media (max-width:760px){
  .hero-visual{max-width:200px;margin:1.6rem auto 0}
  .chip-float{display:none}
  .hero-meta{margin-top:1rem}
  .case .vis{max-width:270px}
  .case .vis video{max-width:230px}
  .footer-grid ul li{margin-bottom:.2rem}
  .footer-grid a{display:inline-block;padding:.45rem 0}
  .breadcrumbs a{padding:.4rem 0}
  .sb-wa{display:inline-flex}
  #sticky-bar{gap:.5rem}
  #sticky-bar .btn{flex:1;width:auto;padding:.8rem 1rem}
  body.bar-visible .wa-float{opacity:0;pointer-events:none;transform:scale(.6)}
  .wa-float{transition:opacity .3s,transform .3s var(--ease),bottom .4s var(--ease)}
  .svc-row h3{font-size:2.3rem}
  .ig-head{margin-bottom:1.8rem}
}

@media (max-width:1180px){.logo .brand-sub{display:none}}

article.post aside.note{background:var(--paper-2);border-inline-start:4px solid var(--mint);border-radius:14px;padding:1.2rem 1.4rem;margin:2rem 0}
article.post aside.note p{margin:0;font-size:.98rem}
.expert-box span.label{display:flex}
article.post .related a{text-decoration-color:var(--mint)}

/* case visuals: keep screenshots at a size they stay sharp */
.case .vis{max-width:340px}
.case .vis img{display:block;margin-inline:auto}
@media (max-width:760px){
  .case{gap:1.4rem}
  .case .vis{max-width:none;width:100%}
  .case .vis img{width:200px;height:250px;object-fit:cover;object-position:50% 0;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent),linear-gradient(transparent,#000 6%,#000 62%,transparent);-webkit-mask-composite:source-in;
    mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent),linear-gradient(transparent,#000 6%,#000 62%,transparent);mask-composite:intersect}
  .case .vis video{max-width:200px}
}
@media (max-width:560px){
  .footer-grid{grid-template-columns:1fr 1fr;gap:1.8rem 1rem}
  .footer-grid .about{grid-column:1/-1}
  .foot-mark{margin-bottom:2.4rem}
  footer{padding-top:4rem}
  #a11y-toggle{width:42px;height:42px}
}