/* Safa Vibe: site stylesheet. Colours, type and spacing are the tokens in :root.
   Built by tools/build_theme.py, edit the design source rather than this file. */
/* Layout: a deep green room lit by one apricot light that follows the visitor.
   One typeface in two cuts (wide + condensed) carries the hierarchy. Sections
   alternate between the dark room and sheets of warm paper. Service cards stack like a deck. */
:root{
  color-scheme:dark;
  --forest:#0B211A; --forest-2:#0F2A21; --forest-3:#16372B;
  --cream:#F1EFE4; --mist:#A9C0B3;
  --paper:#EDEBDD; --paper-2:#E0DECD; --paper-3:#CFCDBA; --ink:#0B211A; --ink-soft:#3C5247;
  --apricot:#F6A66B; --apricot-deep:#A8481A; --butter:#F2D98B;
  --bg:var(--forest); --fg:var(--cream); --muted:var(--mist);
  --rule:#21463A; --rule-strong:#4B7A66; --accent-ink:var(--apricot); --card:var(--forest-2);
  --font:"Mona Sans","Archivo","Helvetica Neue",Arial,sans-serif;
  --mono:"Martian Mono","DejaVu Sans Mono",ui-monospace,Menlo,monospace;
  --ease:cubic-bezier(.22,1,.36,1);
  --gut:clamp(18px,4vw,56px);
  --max:1320px;
  --nav-h:68px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 12px)}
body{margin:0;background:var(--forest);color:var(--cream);font-family:var(--font);font-size:1.0625rem;line-height:1.6;font-stretch:100%;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit;color:inherit}
svg{display:block}
::selection{background:var(--apricot);color:var(--forest)}
:focus-visible{outline:2px solid var(--apricot);outline-offset:3px;border-radius:4px}
.paper :focus-visible{outline-color:var(--ink)}
.skip{position:absolute;left:12px;top:-60px;z-index:50;background:var(--apricot);color:var(--forest);padding:10px 16px;border-radius:99px;font-weight:600}
.skip:focus{top:12px}

/* ---------- environment: drifting glow, grain, cursor light ---------- */
.env{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.env i{position:absolute;border-radius:50%;filter:blur(90px);opacity:.5}
.env i:nth-child(1){width:52vw;height:52vw;left:-14vw;top:-18vw;background:var(--env-a);animation:drift1 70s ease-in-out infinite alternate}
.env i:nth-child(2){width:38vw;height:38vw;right:-10vw;top:30vh;background:var(--env-b);opacity:.32;animation:drift2 90s ease-in-out infinite alternate}
@keyframes drift1{to{transform:translate(18vw,22vh) scale(1.15)}}
@keyframes drift2{to{transform:translate(-22vw,-16vh) scale(.9)}}
.grain{position:fixed;inset:0;z-index:40;pointer-events:none;opacity:.07;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.lamp{position:fixed;left:0;top:0;width:680px;height:680px;margin:-340px 0 0 -340px;z-index:30;pointer-events:none;border-radius:50%;background:radial-gradient(circle,rgba(var(--acc-rgb),.17) 0%,rgba(var(--acc-rgb),.07) 32%,rgba(var(--acc-rgb),0) 64%);opacity:0;transition:opacity .8s;will-change:transform}
.lamp.on{opacity:1}
.lamp b{position:absolute;left:50%;top:50%;width:150px;height:150px;margin:-75px 0 0 -75px;border-radius:50%;background:radial-gradient(circle,rgba(var(--acc-rgb),.09),rgba(var(--acc-rgb),0) 70%)}
@media (hover:none){.lamp{display:none}}

main,footer{position:relative;z-index:1}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}
.sec{padding-block:clamp(72px,11vw,148px);background:var(--bg);color:var(--fg);position:relative}
.sec.clear{background:transparent}
.paper{--bg:var(--paper);--fg:var(--ink);--muted:var(--ink-soft);--rule:var(--p-rule);--rule-strong:var(--p-rule-strong);--accent-ink:var(--apricot-deep);border-radius:clamp(20px,3vw,40px)}

/* ---------- type ---------- */
.mono{font-family:var(--mono);font-stretch:87.5%;font-size:.7rem;line-height:1.5;letter-spacing:.09em;text-transform:uppercase;font-weight:500}
.label{display:inline-flex;align-items:center;gap:.8em;color:var(--muted)}
.label::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent-ink);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent-ink) 22%,transparent)}
.h2{font-size:clamp(2rem,4.7vw,4.1rem);line-height:1.02;letter-spacing:-.022em;font-weight:680;font-stretch:118%;text-wrap:balance}
.cond{font-stretch:75%;font-weight:300;letter-spacing:-.005em}
.hl{color:var(--accent-ink)}
.lead{font-size:clamp(1.05rem,1.35vw,1.25rem);line-height:1.6;color:var(--muted);max-width:34em}
.sec-head{display:grid;gap:20px;margin-bottom:clamp(36px,5vw,72px)}
.sec-head .lead{max-width:30em}
@media (min-width:900px){.sec-head.split{grid-template-columns:minmax(0,7fr) minmax(0,4fr);align-items:end;column-gap:48px}.sec-head.split .label{grid-column:1/-1}}

/* ---------- buttons ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.9em;min-height:54px;padding:0 1.6em;border:0;border-radius:999px;font-weight:620;font-size:.95rem;font-stretch:108%;letter-spacing:.005em;cursor:pointer;overflow:hidden;isolation:isolate;white-space:nowrap;transition:color .5s var(--ease),transform .5s var(--ease)}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--apricot);color:var(--forest);padding-right:7px}
.btn-primary::before{content:"";position:absolute;z-index:-1;right:7px;top:50%;width:40px;height:40px;margin-top:-20px;border-radius:50%;background:var(--cream);transform:scale(0);transition:transform .7s var(--ease)}
.btn-primary:hover::before,.btn-primary:focus-visible::before{transform:scale(14)}
.disc{position:relative;flex:none;width:40px;height:40px;border-radius:50%;background:var(--forest);color:var(--apricot);overflow:hidden}
.disc svg{position:absolute;left:12px;top:12px;width:16px;height:16px;transition:transform .55s var(--ease)}
.disc svg+svg{transform:translateX(-34px)}
.btn:hover .disc svg:first-child,.btn:focus-visible .disc svg:first-child{transform:translateX(34px)}
.btn:hover .disc svg+svg,.btn:focus-visible .disc svg+svg{transform:none}
.btn-ghost{color:var(--fg);box-shadow:inset 0 0 0 1px var(--rule-strong)}
.btn-ghost::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--fg);border-radius:inherit;transform:translateY(102%);transition:transform .6s var(--ease)}
.btn-ghost:hover,.btn-ghost:focus-visible{color:var(--bg)}
.btn-ghost:hover::before,.btn-ghost:focus-visible::before{transform:none}
.chev{display:inline-flex;gap:1px}
.chev i{width:6px;height:6px;border-right:1.5px solid currentColor;border-top:1.5px solid currentColor;transform:rotate(45deg);opacity:.35}
.btn-ghost:hover .chev i{animation:chev 1s infinite}
.chev i:nth-child(2){animation-delay:.12s!important}.chev i:nth-child(3){animation-delay:.24s!important}
@keyframes chev{0%,100%{opacity:.25}40%{opacity:1}}

/* ---------- nav ---------- */
.nav{position:fixed;left:0;right:0;top:0;z-index:20;padding:calc(10px + env(safe-area-inset-top,0px)) var(--gut) 10px;transition:transform .6s var(--ease)}
.nav-in{max-width:var(--max);margin-inline:auto;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:48px;padding:5px 5px 5px 20px;border-radius:999px;background:rgba(var(--bg-rgb),.8);box-shadow:inset 0 0 0 1px rgba(var(--mist-rgb),.16);-webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%)}
.brand{font-weight:760;font-stretch:122%;letter-spacing:-.02em;font-size:1.05rem;display:inline-flex;align-items:center;gap:.5em;white-space:nowrap}
.brand i{width:9px;height:9px;border-radius:50%;background:var(--apricot);box-shadow:0 0 14px 2px rgba(var(--acc-rgb),.7);animation:pulse 3.6s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 22px 6px rgba(var(--acc-rgb),.35);transform:scale(.86)}}
.links{position:relative;display:none;align-items:center;gap:2px}
.links a{position:relative;z-index:1;padding:9px 16px;font-size:.88rem;font-weight:520;color:var(--mist);border-radius:99px;transition:color .35s}
.links a:hover,.links a.is-on{color:var(--forest)}
.pill{position:absolute;z-index:0;left:0;top:0;height:100%;width:0;border-radius:99px;background:linear-gradient(100deg,var(--apricot),var(--butter));opacity:0;transition:transform .55s var(--ease),width .55s var(--ease),opacity .3s}
.nav .btn{min-height:42px;font-size:.86rem;padding-left:1.3em}
.nav .disc{width:30px;height:30px}.nav .disc svg{left:8px;top:8px;width:14px;height:14px}
.nav .btn-primary::before{width:30px;height:30px;margin-top:-15px}
@media (min-width:900px){.links{display:flex}}

/* ---------- hero ---------- */
.hero{position:relative;padding-top:calc(var(--nav-h) + clamp(44px,8vw,104px));padding-bottom:clamp(48px,7vw,96px)}
.hero .label{margin-bottom:clamp(20px,2.6vw,34px)}
.hero-h{font-size:clamp(2.4rem,6vw,5.75rem);line-height:.98;letter-spacing:-.03em;font-weight:720;font-stretch:125%}
.hero-h .ln{display:block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.1em}
.hero-h .ln>span{display:inline-block;animation:rise 1.1s var(--ease) both}
.hero-h .ln:nth-child(2)>span{animation-delay:.12s}
.hero-h .cond{font-size:1.16em;letter-spacing:-.012em}
@keyframes rise{from{transform:translateY(108%) rotate(2deg)}to{transform:none}}
.hero-grid{display:grid;gap:clamp(32px,5vw,64px);margin-top:clamp(28px,4vw,56px);align-items:start}
.hero-copy{display:grid;gap:28px;animation:fadeup 1.1s .35s var(--ease) both}
@keyframes fadeup{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.cta-row{display:flex;flex-wrap:wrap;gap:12px}
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--rule);margin-top:8px}
.facts li{padding:14px 12px 0 0;color:var(--mist)}
.facts li+li{padding-left:14px;border-left:1px solid var(--rule)}
.facts b{display:block;font-family:var(--font);font-stretch:112%;font-weight:650;font-size:.98rem;letter-spacing:-.01em;text-transform:none;color:var(--cream);margin-bottom:2px}
@media (min-width:980px){.hero-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}}

.stage{position:relative;aspect-ratio:7/5;min-height:330px;animation:fadeup 1.3s .5s var(--ease) backwards;transform:perspective(1400px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transform-style:flat}
.stage canvas{position:absolute;inset:0;width:100%;height:100%}
.src{position:absolute;left:0;z-index:2;display:grid;gap:3px;padding:11px 16px 11px 13px;border-radius:14px;background:rgba(var(--bg2-rgb),.82);box-shadow:inset 0 0 0 1px var(--rule),0 18px 40px -18px rgba(0,0,0,.6);transform:translate(calc(var(--px,0)*14px),calc(var(--py,0)*14px))}
.src b{display:flex;align-items:center;gap:8px;font-weight:650;font-stretch:110%;font-size:.86rem;letter-spacing:-.005em}
.src b::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--apricot);box-shadow:0 0 10px rgba(var(--acc-rgb),.8)}
.src span{color:var(--mist);font-size:.58rem}
.src.a{top:12%}.src.b{top:66%;left:5%}
.stage .win{right:0;top:5%;width:57%;transform:translate(calc(var(--px,0)*-8px),calc(var(--py,0)*-8px))}

/* ---------- mock screens (drawn in code, always sharp) ---------- */
.win{position:absolute;z-index:1;background:var(--paper);color:var(--ink);border-radius:12px;box-shadow:0 34px 70px -24px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.07);overflow:hidden;font-size:12px;line-height:1.4}
.win-bar{display:flex;align-items:center;gap:6px;padding:9px 12px;background:var(--paper-2)}
.win-bar i{width:7px;height:7px;border-radius:50%;background:#B4B29E}
.win-url{margin-left:8px;flex:1;min-width:0;background:var(--paper);border-radius:99px;padding:3px 10px;font-family:var(--mono);font-size:9px;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sk{display:block;height:7px;border-radius:99px;background:var(--paper-3)}
.shop{display:grid;grid-template-columns:46% 1fr}
.shop-img{position:relative;display:grid;place-items:center;min-height:210px;overflow:hidden;background:linear-gradient(160deg,#EAE3C6,#D8D0AC)}
.shop-img::before{content:"";position:absolute;width:70%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 30%,#FCF1C6,#F2D98B 60%,#E6C367)}
.pk{position:relative;width:27%;filter:drop-shadow(0 16px 12px rgba(70,45,10,.38));animation:float 6s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-6px) rotate(-1.5deg)}}
.pk i{display:block;margin-inline:auto}
.pk-cap{width:46%;aspect-ratio:1/1.2;border-radius:4px 4px 2px 2px;background:linear-gradient(90deg,#08170F,#2E5143 38%,#102820 70%,#06120D)}
.pk-neck{width:32%;height:5px;background:#6B3A16}
.pk-body{position:relative;aspect-ratio:1/1.72;border-radius:16%/9%;background:linear-gradient(95deg,#4A2209 0%,#A7591E 22%,#EBA65E 36%,#B96724 55%,#6C330E 80%,#3A1A06 100%);overflow:hidden}
.pk-body::after{content:"";position:absolute;left:13%;top:5%;width:8%;height:90%;border-radius:99px;background:linear-gradient(rgba(255,255,255,.6),rgba(255,255,255,0))}
.pk-body b{position:absolute;left:0;right:0;top:34%;height:38%;background:#F5F1E1;display:grid;place-items:center}
.pk-body b::before{content:"";width:34%;aspect-ratio:1;border-radius:50%;border:1.5px solid #0B211A}
.shop-info{display:flex;flex-direction:column;gap:9px;padding:16px 14px}
.shop-info .cat{font-family:var(--mono);font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.shop-info h4{margin:0;font-size:15px;line-height:1.15;font-weight:720;font-stretch:112%;letter-spacing:-.015em}
.price{font-weight:600;font-size:13px}
.opts{display:flex;gap:5px}
.opts span{padding:3px 9px;border-radius:99px;font-size:9.5px;box-shadow:inset 0 0 0 1px #A9A894}
.opts span:first-child{background:var(--ink);color:var(--paper);box-shadow:none}
.atc{display:block;text-align:center;padding:9px;border-radius:99px;background:var(--ink);color:var(--paper);font-weight:600;font-size:11px}
.atc.bump{animation:bump .6s var(--ease)}
@keyframes bump{30%{transform:scale(1.06);background:var(--apricot-deep)}}
.toast{position:absolute;right:10px;bottom:10px;z-index:3;display:flex;align-items:center;gap:7px;padding:8px 11px;border-radius:10px;background:var(--forest);color:var(--cream);font-family:var(--mono);font-size:8.5px;letter-spacing:.06em;text-transform:uppercase;box-shadow:0 10px 24px -8px rgba(0,0,0,.5);animation:toast 6s var(--ease) infinite}
.toast::before{content:"";width:9px;height:5px;border-left:1.5px solid var(--apricot);border-bottom:1.5px solid var(--apricot);transform:rotate(-45deg) translateY(-1px)}
@keyframes toast{0%,18%{transform:translateY(160%)}26%,70%{transform:none}80%,100%{transform:translateY(160%)}}
.tag-ill{position:absolute;left:14px;top:9px;z-index:3;color:rgba(255,255,255,.55);font-size:.56rem}

/* ---------- ticker ---------- */
.ticker{position:relative;z-index:1;border-block:1px solid var(--rule);overflow:hidden;padding-block:18px}
.ticker-track{display:flex;width:max-content;will-change:transform}
.ticker ul{display:flex;align-items:center;flex:none}
.ticker li{display:flex;align-items:center;font-size:clamp(1.2rem,2.3vw,1.9rem);font-weight:650;font-stretch:122%;letter-spacing:-.02em;white-space:nowrap}
.ticker li:nth-child(even){font-stretch:75%;font-weight:300;color:var(--mist)}
.ticker li::after{content:"";width:9px;height:9px;margin-inline:clamp(18px,2.6vw,36px);background:var(--apricot);transform:rotate(45deg)}

/* ---------- manifesto ---------- */
.magic{font-size:clamp(1.55rem,3.5vw,3.2rem);line-height:1.14;letter-spacing:-.02em;font-weight:560;font-stretch:104%;max-width:24em}
.magic .w{opacity:var(--o,1);transition:opacity .25s linear}
.rules{display:grid;gap:0;margin-top:clamp(48px,7vw,96px);border-top:1px solid var(--rule)}
.rules li{display:grid;align-content:start;gap:10px;padding:26px 0;border-bottom:1px solid var(--rule)}
.rules h3{font-size:1.25rem;line-height:1.15;font-weight:700;font-stretch:116%;letter-spacing:-.015em}
.rules p{color:var(--muted);font-size:.98rem;max-width:30em}
.rules .mono{color:var(--accent-ink)}
@media (min-width:860px){.rules{grid-template-columns:repeat(3,minmax(0,1fr))}.rules li{padding:28px 32px 6px 0;border-bottom:0}.rules li+li{padding-left:32px;border-left:1px solid var(--rule)}}

/* ---------- services stack ---------- */
.glow{position:relative;background:var(--card);border-radius:24px;box-shadow:inset 0 0 0 1px var(--rule)}
.glow::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(var(--acc-rgb),.95),rgba(var(--acc-rgb),0) 62%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .5s;pointer-events:none;z-index:2}
.glow::after{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(620px circle at var(--mx,50%) var(--my,0%),rgba(var(--acc-rgb),.075),rgba(var(--acc-rgb),0) 60%);opacity:0;transition:opacity .5s;pointer-events:none}
.glow:hover::before,.glow:hover::after{opacity:1}
.stack{display:grid;gap:22px}
.svc{display:grid;gap:22px;padding:clamp(18px,2.4vw,30px);transform-origin:50% 0;will-change:transform}
.svc-text{display:flex;flex-direction:column;gap:16px;padding:clamp(4px,1vw,14px);min-width:0}
.svc h3{font-size:clamp(1.8rem,3.1vw,2.9rem);line-height:1;letter-spacing:-.025em;font-weight:700;font-stretch:100%;transition:font-stretch .9s var(--ease),color .5s}
.svc:hover h3{font-stretch:120%}
.svc-text>p{color:var(--mist);max-width:27em}
.az{position:relative;display:grid;gap:7px;margin-top:auto;padding:4px 0 4px 34px;font-size:.93rem;line-height:1.4}
.az::before{content:"";position:absolute;left:8px;top:22px;bottom:22px;width:1px;background:linear-gradient(var(--apricot),var(--rule-strong))}
.az li{position:relative}
.az li::before{content:"";position:absolute;left:-29px;top:.55em;width:7px;height:1px;background:var(--rule-strong)}
.az li:first-child::before,.az li:last-child::before{content:"A";left:-34px;top:.15em;width:18px;height:auto;background:none;font-family:var(--mono);font-size:.66rem;font-weight:600;color:var(--apricot);text-align:center}
.az li:last-child::before{content:"Z";color:var(--mist)}
.svc .dim{position:absolute;inset:0;border-radius:inherit;background:var(--forest);opacity:var(--dim,0);pointer-events:none;z-index:3}
.vis{position:relative;min-height:340px;border-radius:16px;overflow:hidden;background:radial-gradient(120% 90% at 82% 0%,var(--vis-a) 0%,var(--vis-b) 52%,var(--vis-c) 100%)}
@media (min-width:960px){
  .svc{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:30px}
}
@media (min-width:960px) and (min-height:760px){
  .svc{position:sticky;top:calc(var(--nav-h) + 18px + var(--i)*14px);height:min(590px,calc(100vh - var(--nav-h) - 96px))}
  .stack{gap:36px}
}

/* shopify mock */
.m-shop .win{left:8%;top:10%;right:-6%;bottom:-8%}
.m-shop .shop{height:100%}
.m-shop .shop-img{min-height:0;padding-bottom:18%}
.m-shop .shop-img::before{margin-bottom:0}
.acc{display:grid;margin-top:8px;border-top:1px solid var(--paper-3)}
.acc span{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--paper-3);font-size:10.5px;font-weight:600}
.acc span::after{content:"+";font-weight:400;color:var(--ink-soft)}
/* wordpress mock */
.wp-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.wp-cols i{height:64px;border-radius:6px;background:var(--paper-2)}
.m-wp .win{left:7%;top:12%;right:7%;bottom:-8%}
.wp{display:grid;grid-template-columns:1fr 33%;height:calc(100% - 30px)}
.wp-page{position:relative;display:flex;flex-direction:column;gap:11px;padding:14px 16px;min-width:0}
.wp-nav{display:flex;gap:8px;align-items:center}
.wp-nav .sk{width:34px}.wp-nav .sk:first-child{width:46px;height:9px;background:var(--ink);margin-right:auto}
.wp-block{position:relative;padding:12px 10px 10px;border-radius:6px;outline:1.5px dashed var(--apricot-deep);outline-offset:0;margin-top:10px}
.wp-block em{position:absolute;left:8px;top:-12px;padding:3px 7px;border-radius:4px;background:var(--ink);color:var(--paper);font-family:var(--mono);font-style:normal;font-size:7.5px;letter-spacing:.08em;text-transform:uppercase}
.wp-block h4{margin:0 0 7px;font-size:15px;line-height:1.1;font-weight:720;letter-spacing:-.015em;font-stretch:100%;animation:wpw 7s ease-in-out infinite alternate}
@keyframes wpw{0%,12%{font-stretch:78%}88%,100%{font-stretch:124%}}
.wp-img{flex:none;height:96px;border-radius:6px;background:radial-gradient(60% 90% at 78% 110%,#C9853F 0 60%,transparent 61%),radial-gradient(50% 80% at 28% 115%,#E0A862 0 60%,transparent 61%),linear-gradient(#F3DFA6,#EFCB86)}
.wp-side{display:flex;flex-direction:column;gap:13px;padding:14px 12px;background:#F6F4E9;border-left:1px solid var(--paper-3)}
.wp-side label{display:block;font-family:var(--mono);font-size:7.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:6px}
.sw{display:flex;gap:5px}.sw i{width:14px;height:14px;border-radius:50%}
.sw i:nth-child(1){background:var(--ink);box-shadow:0 0 0 2px #F6F4E9,0 0 0 3.5px var(--apricot-deep)}.sw i:nth-child(2){background:var(--apricot-deep)}.sw i:nth-child(3){background:#2E6B55}.sw i:nth-child(4){background:var(--butter)}
.sl{position:relative;height:3px;border-radius:9px;background:var(--paper-3)}
.sl i{position:absolute;top:-5px;left:0;width:13px;height:13px;margin-left:-6px;border-radius:50%;background:var(--ink);animation:knob 7s ease-in-out infinite alternate}
@keyframes knob{0%,12%{left:14%}88%,100%{left:90%}}
.tg{width:26px;height:14px;border-radius:99px;background:var(--apricot-deep);position:relative}.tg::after{content:"";position:absolute;right:2px;top:2px;width:10px;height:10px;border-radius:50%;background:var(--paper)}
/* meta mock */
.meta{position:absolute;inset:0;display:grid;grid-template-columns:44% 1fr;gap:18px;padding:26px 22px 0 26px;align-items:start}
.phone{position:relative;align-self:stretch;margin-bottom:-30px;background:var(--paper);color:var(--ink);border:5px solid #06140E;border-bottom:0;border-radius:26px 26px 0 0;padding:12px 10px 0;font-size:11px;line-height:1.35;box-shadow:0 30px 60px -20px rgba(0,0,0,.6)}
.ph-top{display:flex;align-items:center;gap:7px;margin-bottom:9px}
.ph-top i{width:22px;height:22px;border-radius:50%;background:linear-gradient(140deg,var(--apricot),var(--butter))}
.ph-top b{display:block;font-weight:700;font-size:10.5px;line-height:1.1}
.ph-top span{font-family:var(--mono);font-size:7px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
.creative{position:relative;aspect-ratio:1;border-radius:10px;overflow:hidden;background:linear-gradient(150deg,#F6A66B,#F2D98B);display:grid;place-items:center}
.creative .pk{width:22%;margin-top:14%}
.creative strong{position:absolute;left:10px;top:9px;right:10px;font-size:14px;line-height:1.02;font-weight:760;font-stretch:120%;letter-spacing:-.02em;color:#3A1A06}
.ph-cta{display:flex;justify-content:space-between;align-items:center;margin-top:7px;padding:7px 9px;border-radius:8px;background:var(--paper-2);font-weight:650;font-size:10px}
.ph-cta::after{content:"";width:6px;height:6px;border-right:1.5px solid;border-top:1.5px solid;transform:rotate(45deg)}
.ph-act{display:flex;gap:10px;padding:9px 2px}
.ph-act i{width:15px;height:15px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--ink)}
.ph-act i:first-child{box-shadow:none;background:var(--apricot-deep);animation:heart 3.2s ease-in-out infinite;clip-path:path("M7.5 14 1.6 8.2a3.7 3.7 0 1 1 5.9-4.3 3.7 3.7 0 1 1 5.9 4.3z")}
@keyframes heart{0%,60%,100%{transform:scale(1)}70%{transform:scale(1.35)}}
.panels{display:grid;gap:12px;padding-top:14px;min-width:0}
.panel{padding:14px;border-radius:14px;background:rgba(var(--bg-rgb),.7);box-shadow:inset 0 0 0 1px var(--rule);color:var(--cream)}
.panel>.mono{display:block;color:var(--mist);font-size:.56rem;margin-bottom:11px}
.trow{display:grid;grid-template-columns:4.6em 1fr auto;align-items:center;gap:9px;font-size:11px;margin-top:8px}
.trow s{height:5px;border-radius:9px;background:var(--forest-3);overflow:hidden;text-decoration:none}
.trow s::after{content:"";display:block;height:100%;width:var(--w);border-radius:inherit;background:var(--c,var(--rule-strong));animation:bar 5s var(--ease) infinite alternate}
@keyframes bar{from{width:12%}}
.trow em{font-family:var(--mono);font-style:normal;font-size:7.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--mist)}
.trow.win-row em{color:var(--apricot)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips span{padding:4px 9px;border-radius:99px;font-size:10px;box-shadow:inset 0 0 0 1px var(--rule-strong);color:var(--cream)}
.chips span.on{background:var(--apricot);color:var(--forest);box-shadow:none;font-weight:600}
/* search mock */
.m-search .win{left:8%;top:11%;right:8%;bottom:-8%;padding:16px}
.sbox{display:flex;align-items:center;gap:9px;padding:9px 14px;border-radius:99px;box-shadow:inset 0 0 0 1.5px var(--ink);font-size:12.5px;font-weight:520;min-height:38px}
.sbox::before{content:"";flex:none;width:9px;height:9px;border-radius:50%;box-shadow:0 0 0 1.5px var(--ink)}
.caret{display:inline-block;width:1.5px;height:1.05em;margin-left:1px;background:var(--apricot-deep);vertical-align:-.15em;animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.ad{display:grid;gap:6px;margin-top:13px;padding:13px;border-radius:10px;background:#F6F4E9;box-shadow:inset 0 0 0 1px var(--paper-3)}
.ad small{font-family:var(--mono);font-size:8px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
.ad small b{color:var(--ink);font-weight:700;margin-right:6px}
.ad h4{margin:0;font-size:15px;line-height:1.15;font-weight:680;letter-spacing:-.01em;color:#17624A;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;min-height:1.15em}
.ad .chips span{color:var(--ink);box-shadow:inset 0 0 0 1px #A9A894}
.org{display:grid;gap:6px;margin-top:14px;opacity:.55}
.kw{position:absolute;right:14px;bottom:14px;z-index:2;display:grid;gap:6px;justify-items:end}
.kw span{padding:5px 10px;border-radius:8px;background:var(--forest);outline:1px solid var(--rule-strong);color:var(--cream);font-family:var(--mono);font-size:8.5px;letter-spacing:.05em;box-shadow:0 8px 20px -8px rgba(0,0,0,.5)}
.kw span b{color:var(--apricot);font-weight:600;margin-right:5px}

/* ---------- AI visibility ---------- */
.ai{display:grid;gap:clamp(28px,4vw,56px);padding:clamp(22px,4vw,56px);border-radius:28px;overflow:hidden}
.ai .h2{font-size:clamp(1.9rem,4vw,3.4rem)}
.ai-copy{display:grid;gap:20px;align-content:start;min-width:0}
.ticks{display:grid;gap:10px;margin-top:6px}
.ticks li{position:relative;padding-left:26px;font-size:.98rem}
.ticks li::before{content:"";position:absolute;left:2px;top:.5em;width:11px;height:6px;border-left:1.5px solid var(--apricot);border-bottom:1.5px solid var(--apricot);transform:rotate(-45deg)}
.note{padding-top:16px;border-top:1px solid var(--rule);color:var(--mist);font-size:.9rem;max-width:34em}
.chat{position:relative;align-self:center;display:grid;gap:12px;padding:clamp(16px,2vw,24px);border-radius:20px;background:var(--forest);box-shadow:inset 0 0 0 1px var(--rule);min-height:320px;align-content:start}
.chat .mono{color:var(--mist);font-size:.58rem}
.bub{max-width:88%;padding:12px 15px;border-radius:16px;font-size:.92rem;line-height:1.45}
.bub.u{justify-self:end;background:var(--forest-3);border-bottom-right-radius:5px;min-height:2.6em}
.bub.a{display:grid;gap:9px;background:var(--paper);color:var(--ink);border-bottom-left-radius:5px;width:88%}
.ans-wrap{position:relative}
.ans-wrap .dots{position:absolute;left:0;top:0}
.bub.a{transition:opacity .4s}
.bub.a:not(.show){opacity:0}
.bub.a .row{display:flex;align-items:center;gap:9px;opacity:0;transform:translateY(8px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.bub.a.show .row{opacity:1;transform:none}
.bub.a.show .row:nth-child(2){transition-delay:.18s}.bub.a.show .row:nth-child(3){transition-delay:.36s}.bub.a.show .row:nth-child(4){transition-delay:.54s}
.bub.a .n{flex:none;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;font-family:var(--mono);font-size:8.5px;background:var(--paper-2)}
.bub.a .you{padding:3px 10px;border-radius:99px;background:var(--ink);color:var(--apricot);font-weight:650;font-size:.82rem}
.bub.a .sk{flex:1}
.dots{display:inline-flex;gap:4px;padding:12px 15px;border-radius:16px;background:var(--paper);width:max-content}
.dots i{width:6px;height:6px;border-radius:50%;background:var(--ink-soft);animation:dot 1s infinite}
.dots i:nth-child(2){animation-delay:.15s}.dots i:nth-child(3){animation-delay:.3s}
@keyframes dot{50%{transform:translateY(-4px);opacity:.4}}
@media (min-width:960px){.ai{grid-template-columns:minmax(0,6fr) minmax(0,5fr)}}

/* ---------- also in the toolbox ---------- */
.also{display:grid;gap:clamp(28px,4vw,64px)}
.also-list{border-top:1px solid var(--rule)}
.also-list li{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px 20px;padding:22px 4px;border-bottom:1px solid var(--rule);overflow:hidden}
.also-list li::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(var(--acc-rgb),.09),rgba(var(--acc-rgb),0) 70%);transform:translateX(-101%);transition:transform .8s var(--ease)}
.also-list li:hover::before{transform:none}
.also-list h3{position:relative;font-size:clamp(1.25rem,2.2vw,1.8rem);line-height:1.1;font-weight:620;font-stretch:88%;letter-spacing:-.015em;transition:font-stretch .7s var(--ease),transform .7s var(--ease)}
.also-list li:hover h3{font-stretch:120%;transform:translateX(10px)}
.also-list p{position:relative;grid-column:1;color:var(--mist);font-size:.94rem;max-width:36em;transition:transform .7s var(--ease)}
.also-list li:hover p{transform:translateX(10px)}
.mini{position:relative;grid-column:2;grid-row:1/3;width:84px;height:62px;border-radius:12px;background:var(--forest-2);box-shadow:inset 0 0 0 1px var(--rule);display:grid;place-items:center;transition:transform .7s var(--ease);transform:translate(calc(var(--tx,0)*1px),calc(var(--ty,0)*1px)) rotate(calc(var(--tr,0)*1deg))}
.also-list li:hover .mini{box-shadow:inset 0 0 0 1px var(--apricot)}
.mini.bars{display:flex;align-items:flex-end;justify-content:center;gap:5px;padding:14px}
.mini.bars i{width:7px;border-radius:2px;background:var(--rule-strong);height:var(--h);transition:height .7s var(--ease),background .4s}
.mini.bars i:last-child{background:var(--apricot)}
li:hover .mini.bars i{height:calc(var(--h) + 22%)}
.mini.rings i{position:absolute;width:26px;height:26px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--rule-strong);transition:transform .7s var(--ease)}
.mini.rings i:nth-child(1){transform:translateX(-9px)}.mini.rings i:nth-child(2){transform:translateX(9px);box-shadow:inset 0 0 0 1.5px var(--apricot)}
li:hover .mini.rings i:nth-child(1){transform:translateX(-3px)}li:hover .mini.rings i:nth-child(2){transform:translateX(3px)}
.mini.shapes i{position:absolute;transition:transform .7s var(--ease)}
.mini.shapes i:nth-child(1){width:24px;height:24px;border-radius:50%;background:var(--apricot);transform:translate(-13px,-3px)}
.mini.shapes i:nth-child(2){width:22px;height:22px;background:var(--cream);transform:translate(8px,6px) rotate(12deg)}
.mini.shapes i:nth-child(3){width:14px;height:14px;background:var(--rule-strong);transform:translate(16px,-14px) rotate(45deg)}
li:hover .mini.shapes i:nth-child(1){transform:translate(-8px,2px)}li:hover .mini.shapes i:nth-child(2){transform:translate(6px,-2px) rotate(90deg)}li:hover .mini.shapes i:nth-child(3){transform:translate(18px,10px) rotate(135deg)}
.mini.cells{display:grid;grid-template-columns:repeat(4,10px);gap:3px}
.mini.cells i{width:10px;height:7px;border-radius:1.5px;background:var(--forest-3);transition:background .4s;transition-delay:calc(var(--k)*50ms)}
.mini.cells i.f{background:var(--rule-strong)}
li:hover .mini.cells i{background:var(--apricot)}
@media (min-width:960px){.also{grid-template-columns:minmax(0,4fr) minmax(0,7fr)}.also .sec-head{position:sticky;top:calc(var(--nav-h) + 40px);align-self:start;margin:0}}

/* ---------- process ---------- */
.steps-wrap{position:relative}
.steps{display:grid;gap:0}
.wave{display:none}
.steps li{position:relative;display:grid;align-content:start;gap:10px;padding:0 0 34px 44px}
.steps li::before{content:"";position:absolute;left:11px;top:14px;bottom:-14px;width:1px;background:var(--rule)}
.steps li:last-child::before{display:none}
.steps .node{position:absolute;left:0;top:2px;width:23px;height:23px;border-radius:50%;display:grid;place-items:center;font-family:var(--mono);font-size:.6rem;font-weight:600;background:var(--paper);box-shadow:inset 0 0 0 1px var(--rule-strong);color:var(--ink-soft);transition:background .6s var(--ease),color .6s,box-shadow .6s,transform .6s var(--ease)}
.steps li.on .node{background:var(--ink);color:var(--apricot);box-shadow:0 0 0 6px rgba(var(--accd-rgb),.14);transform:scale(1.08)}
.steps h3{font-size:clamp(1.5rem,2.4vw,2.1rem);line-height:1;font-weight:700;font-stretch:122%;letter-spacing:-.025em}
.steps p{color:var(--muted);font-size:.97rem;max-width:26em}
@media (min-width:960px){
  .steps{grid-template-columns:repeat(4,minmax(0,1fr));column-gap:28px;padding-top:74px}
  .wave{display:block;position:absolute;left:0;top:0;width:100%;height:60px;overflow:visible}
  .wave path{fill:none;stroke-width:1.5;vector-effect:non-scaling-stroke}
  .wave.bg path{stroke:var(--rule)}
  .wave.fg path{stroke:var(--apricot-deep)}
  .wave.fg{clip-path:inset(-4px calc(var(--off,1)*100%) -4px 0)}
  .steps li{padding:0 12px 0 0}
  .steps li::before{display:none}
  .steps .node{top:-58px;left:0}
}

/* ---------- faq ---------- */
.faq{display:grid;gap:clamp(28px,4vw,64px)}
.qa{border-bottom:1px solid var(--rule)}
.qa:first-child{border-top:1px solid var(--rule)}
.qa h3{font:inherit}
.qa button{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:20px;width:100%;padding:22px 4px;background:none;border:0;text-align:left;cursor:pointer;font-size:clamp(1.08rem,1.7vw,1.4rem);line-height:1.2;font-weight:600;font-stretch:96%;letter-spacing:-.012em;transition:font-stretch .7s var(--ease),color .4s}
.qa button:hover,.qa.open button{font-stretch:112%}
.qa.open button{color:var(--apricot)}
.pm{position:relative;width:34px;height:34px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--rule-strong);transition:background .5s var(--ease),transform .6s var(--ease)}
.pm::before,.pm::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.5px;margin:-.75px 0 0 -6px;background:currentColor;transition:transform .6s var(--ease)}
.pm::after{transform:rotate(90deg)}
.qa.open .pm{background:var(--apricot);color:var(--forest);box-shadow:none;transform:rotate(180deg)}
.qa.open .pm::after{transform:rotate(0)}
.qa-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .7s var(--ease)}
.qa.open .qa-panel{grid-template-rows:1fr}
.qa-in{overflow:hidden;visibility:hidden;transition:visibility 0s .7s}
.qa.open .qa-in{visibility:visible;transition-delay:0s}
.qa-in p{padding:0 56px 26px 4px;color:var(--mist);max-width:40em}
.qa.open .w{animation:word .8s var(--ease) both;animation-delay:calc(var(--i)*16ms)}
@keyframes word{from{opacity:0;filter:blur(7px)}to{opacity:1;filter:blur(0)}}
@media (min-width:960px){.faq{grid-template-columns:minmax(0,4fr) minmax(0,7fr)}.faq .sec-head{position:sticky;top:calc(var(--nav-h) + 40px);align-self:start;margin:0}}

/* ---------- contact ---------- */
.contact{display:grid;gap:clamp(32px,5vw,72px);align-items:center}
.form{display:grid;gap:24px;margin-top:40px}
.field{display:grid;gap:8px}
.field label,.field legend{color:var(--mist);padding:0}
.field input[type=text],.field input[type=email],.field textarea{width:100%;padding:12px 2px;background:none;border:0;border-bottom:1px solid var(--rule-strong);border-radius:0;font-size:1.05rem;outline:none;transition:border-color .4s,box-shadow .4s;resize:vertical}
.field textarea{min-height:92px}
.field input:focus,.field textarea:focus{border-color:var(--apricot);box-shadow:0 1px 0 0 var(--apricot)}
.field ::placeholder{color:#7F9A8C;opacity:1}
fieldset.field{border:0;margin:0;padding:0;min-width:0}
.picks{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.picks label{position:relative;cursor:pointer;color:var(--cream)}
.picks input{position:absolute;opacity:0;inset:0;cursor:pointer}
.picks span{display:block;padding:9px 16px;border-radius:99px;font-size:.9rem;box-shadow:inset 0 0 0 1px var(--rule-strong);transition:background .4s var(--ease),color .4s,box-shadow .4s}
.picks input:checked+span{background:var(--apricot);color:var(--forest);box-shadow:none;font-weight:600}
.picks input:focus-visible+span{outline:2px solid var(--apricot);outline-offset:3px}
.two{display:grid;gap:22px}
@media (min-width:620px){.two{grid-template-columns:1fr 1fr}}
.form-foot{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px}
.status{color:var(--apricot);font-size:.92rem;max-width:26em}
.globe-box{position:relative;justify-self:center;width:min(100%,560px);aspect-ratio:1}
.globe-box canvas{width:100%;height:100%;cursor:grab;touch-action:pan-y}
.globe-box canvas:active{cursor:grabbing}
.globe-box .mono{position:absolute;left:0;right:0;bottom:2%;text-align:center;color:var(--mist);font-size:.58rem}
@media (min-width:960px){.contact{grid-template-columns:minmax(0,6fr) minmax(0,5fr);align-items:start}.globe-box{position:sticky;top:calc(var(--nav-h) + 30px)}}

/* ---------- footer ---------- */
footer{position:relative;overflow:hidden;padding-top:clamp(40px,6vw,80px)}
#embers{position:absolute;left:0;bottom:0;width:100%;height:100%;pointer-events:none}
footer::before{content:"";position:absolute;left:-10%;right:-10%;bottom:-40%;height:80%;background:radial-gradient(50% 60% at 50% 100%,rgba(var(--acc-rgb),.36),rgba(var(--acc-rgb),0) 70%);pointer-events:none}
.foot-top{position:relative;display:flex;flex-wrap:wrap;justify-content:space-between;gap:20px 40px;padding-bottom:clamp(20px,4vw,48px);border-bottom:1px solid var(--rule);color:var(--mist)}
.foot-top ul{display:flex;flex-wrap:wrap;gap:6px 26px}
.foot-top a{position:relative;color:var(--cream);font-size:.95rem;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .5s var(--ease);padding-bottom:2px}
.foot-top a:hover{background-size:100% 1px}
.mark{position:relative;display:flex;justify-content:center;white-space:nowrap;padding-block:clamp(10px,2vw,28px) clamp(18px,3vw,36px);font-size:clamp(3rem,12.2vw,13rem);line-height:.9;font-weight:800;letter-spacing:-.035em;color:var(--cream);user-select:none}
.mark span{display:inline-block;font-stretch:var(--s,100%);transition:font-stretch .5s var(--ease),color .5s}
.mark span.sp{width:.28em}
.mark span.hot{color:var(--apricot)}
.foot-bot{position:relative;display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;padding-bottom:calc(22px + env(safe-area-inset-bottom,0px));color:var(--mist)}

/* ---------- scroll reveal ---------- */
.rv{opacity:0;transform:translateY(28px);filter:blur(6px);transition:opacity 1s var(--ease),transform 1.1s var(--ease),filter 1s var(--ease);transition-delay:calc(var(--d,0)*90ms)}
.rv.in{opacity:1;transform:none;filter:none}

@media (max-width:520px){
  .facts{grid-template-columns:1fr}.facts li+li{padding-left:0;border-left:0;border-top:1px solid var(--rule);margin-top:12px}
  .stage{aspect-ratio:auto;height:400px}
  .stage .win{width:66%}
  .src.b{left:0;top:70%}
  .meta{padding:20px 14px 0 16px;gap:12px;grid-template-columns:50% 1fr}
  .mini{width:64px;height:52px}
  .qa-in p{padding-right:8px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .lamp{display:none}
  .rv{opacity:1;transform:none;filter:none}
}

/* ================= v2: louder type, service pages, more motion ================= */
:root{
  --serif:"Bodoni Moda","Bodoni 72","Didot","Playfair Display",Georgia,serif;
  --disp:"Mona Sans","Archivo Narrow","Arial Narrow","Helvetica Neue",Arial,sans-serif;
}
/* display voice: condensed black capitals. accent voice: high-contrast italic serif */
.disp,.steps h3,.svc h3,.rel h3{font-family:var(--disp);font-stretch:75%;font-weight:900;text-transform:uppercase;letter-spacing:-.012em;line-height:.9}
.ital{font-family:var(--serif);font-style:italic;font-weight:500;font-stretch:normal;text-transform:none;letter-spacing:-.025em;line-height:1.02}
.h2{font-size:clamp(2.7rem,7.4vw,6.75rem);line-height:.9;letter-spacing:-.012em;font-weight:900;font-stretch:75%;text-wrap:balance}
.h2 .ital{display:block;font-size:.54em;line-height:1.04;margin-top:.24em;font-weight:500}
.h2 .ital.inl{display:inline;font-size:.94em;margin:0}
.h2.sm{font-size:clamp(2.3rem,4.8vw,4.4rem)}
.ai .h2{font-size:clamp(2.4rem,5.6vw,5rem)}

/* fitted lines: JS sizes the type so the line fills its container exactly */
.fit{display:block;white-space:nowrap}
.fit-in{display:inline-block}
.wm{display:inline-block;overflow:hidden;vertical-align:top;padding:.08em .06em .17em;margin:-.08em -.06em -.17em}
.wi{display:inline-block}
.sm .wi{transform:translateY(110%);transition:transform 1.05s var(--ease);transition-delay:calc(var(--w)*45ms)}
.sm.in .wi{transform:none}

/* ---------- hero ---------- */
.hero-h{font-family:var(--disp);font-size:clamp(3rem,9.4vw,9.4rem);line-height:.88;font-weight:900;font-stretch:75%;letter-spacing:-.012em;text-transform:uppercase}
.hero-h .g{display:inline-block}
.hero-h .wi{animation:rise 1.15s var(--ease) both;animation-delay:calc(var(--w)*85ms)}
.hero-sub{display:block;font-size:clamp(2.15rem,6.2vw,5.7rem);margin-top:.12em;padding-left:clamp(0px,9vw,150px);animation:fadeup 1.1s .5s var(--ease) both}
@media (max-width:759px){.hero-h .g,.sp-h .g.brk{display:block}.hero-sub{padding-left:0}}

/* ---------- home service cards ---------- */
.svc h3{font-size:clamp(2.2rem,3.9vw,3.6rem);line-height:.9;transition:color .5s}
.svc:hover h3{font-stretch:75%;color:var(--apricot)}
.more{display:inline-flex;align-items:center;gap:.8em;align-self:flex-start;padding:4px 0;font-weight:620;font-size:.93rem;font-stretch:108%;color:var(--apricot);background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .6s var(--ease),gap .5s var(--ease)}
.more:hover,.more:focus-visible{background-size:100% 1px;gap:1.1em}
.more .chev i{opacity:.8}
.more:hover .chev i{animation:chev 1s infinite}
@media (min-width:960px) and (min-height:760px){.svc{height:min(620px,calc(100vh - var(--nav-h) - 96px))}}
.steps h3{font-size:clamp(2rem,3.1vw,2.8rem);letter-spacing:-.008em}

/* ---------- nav, menu ---------- */
.nav-end{display:flex;align-items:center;gap:8px}
@media (min-width:900px) and (max-width:1139px){.links{display:none}}
.menu-btn{display:inline-flex;align-items:center;gap:9px;min-height:42px;padding:0 16px;border:0;border-radius:99px;background:none;color:var(--cream);cursor:pointer;box-shadow:inset 0 0 0 1px var(--rule-strong);transition:background .4s,color .4s}
.menu-btn:hover{background:var(--cream);color:var(--forest)}
.menu-btn i{width:14px;height:7px;border-block:1.5px solid currentColor}
@media (min-width:1140px){.nav .menu-btn{display:none}}
@media (max-width:520px){.nav-end .btn{display:none}.nav-in{padding-right:5px}}
.menu{position:fixed;inset:0;z-index:50;display:flex;flex-direction:column;gap:28px;padding:calc(92px + env(safe-area-inset-top,0px)) var(--gut) calc(28px + env(safe-area-inset-bottom,0px));background:var(--forest);overflow:auto;clip-path:inset(0 0 100% 0);visibility:hidden;transition:clip-path .75s cubic-bezier(.76,0,.24,1),visibility 0s .75s}
.menu.open{clip-path:inset(0);visibility:visible;transition-delay:0s}
.menu-top{position:absolute;left:var(--gut);right:var(--gut);top:calc(14px + env(safe-area-inset-top,0px));display:flex;align-items:center;justify-content:space-between;min-height:52px}
.menu ul{display:grid;margin-block:auto}
.menu .big{display:block;padding:.1em 0 .06em;border-bottom:1px solid var(--rule);font-size:clamp(2.8rem,14vw,6rem);opacity:0;transform:translateY(46px);transition:transform .9s var(--ease),opacity .6s,color .3s;transition-delay:calc(var(--k)*55ms + .18s)}
.menu.open .big{opacity:1;transform:none}
.menu .big:hover{color:var(--apricot)}
.menu>.btn{align-self:flex-start}

/* ---------- scroll progress, cursor ring, page curtain ---------- */
.prog{position:fixed;left:0;right:0;top:0;height:2px;z-index:26;background:var(--apricot);transform:scaleX(var(--p,0));transform-origin:0 50%;pointer-events:none}
.ring{position:fixed;left:0;top:0;width:38px;height:38px;margin:-19px 0 0 -19px;border-radius:50%;z-index:45;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(var(--acc-rgb),.8);opacity:0;transition:opacity .4s,width .45s var(--ease),height .45s var(--ease),margin .45s var(--ease),background .4s;will-change:transform}
.ring.on{opacity:1}
.ring.big{width:74px;height:74px;margin:-37px 0 0 -37px;background:rgba(var(--acc-rgb),.13)}
@media (hover:none){.ring{display:none}}
.curtain{position:fixed;inset:0;z-index:60;display:grid;place-items:center;background:var(--apricot);color:var(--forest);transform:translateY(101%);pointer-events:none;will-change:transform}
.curtain.cover{transform:none;transition:transform .6s cubic-bezier(.76,0,.24,1)}
.curtain.leave{transform:translateY(-101%);transition:transform .7s cubic-bezier(.76,0,.24,1)}
.curtain span{font-size:clamp(3rem,13vw,12rem);opacity:0;transform:translateY(30px);transition:opacity .4s .2s,transform .7s .2s var(--ease)}
.curtain.cover span{opacity:1;transform:none}

/* ---------- service pages ---------- */
.page[hidden]{display:none}
.sp-hero{padding-top:calc(var(--nav-h) + clamp(36px,6vw,84px));padding-bottom:clamp(56px,8vw,110px)}
.sp-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 24px;margin-bottom:clamp(18px,2.6vw,34px)}
.back{display:inline-flex;align-items:center;gap:.9em;padding:8px 0;color:var(--mist);transition:color .3s,gap .5s var(--ease)}
.back::before{content:"";width:7px;height:7px;border-left:1.5px solid;border-bottom:1.5px solid;transform:rotate(45deg)}
.back:hover{color:var(--apricot);gap:1.4em}
.sp-h{font-size:clamp(3rem,12vw,11rem);line-height:.86}
.sp-h .g{display:inline-block}
.sp-sub{display:block;font-size:clamp(1.75rem,5vw,4.5rem);margin-top:.18em;color:var(--apricot)}
.sp-grid{display:grid;gap:clamp(28px,4vw,56px);margin-top:clamp(28px,4vw,60px);align-items:start}
.sp-copy{display:grid;gap:26px}
.sp-vis{min-height:0;aspect-ratio:4/3.3}
@media (min-width:980px){.sp-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}.sp-vis{aspect-ratio:7/5}}
.sp-vis-wrap{will-change:transform}

.fam{display:grid;border-top:1px solid var(--rule)}
.fam li{display:grid;gap:14px;align-content:start;padding:28px 0;border-bottom:1px solid var(--rule)}
.fam h3{font-family:var(--serif);font-style:italic;font-weight:500;font-size:clamp(1.7rem,2.6vw,2.4rem);line-height:1.06;letter-spacing:-.022em}
.fam p{color:var(--muted);font-size:.98rem;max-width:28em}
.fam .mono{color:var(--accent-ink)}
@media (min-width:860px){.fam{grid-template-columns:repeat(3,minmax(0,1fr))}.fam li{padding:30px 32px 8px 0;border-bottom:0}.fam li+li{padding-left:32px;border-left:1px solid var(--rule)}}

.inc{display:grid;gap:clamp(28px,4vw,64px)}
.inc-rail{position:relative;padding:18px 0 18px 48px}
.inc-rail::before,.inc-rail::after{content:"";position:absolute;left:11px;top:26px;bottom:26px;width:1px;background:var(--rule)}
.inc-rail::after{background:var(--apricot);transform:scaleY(var(--p,0));transform-origin:50% 0}
.inc-rail .a,.inc-rail .z{position:absolute;left:0;width:23px;text-align:center;font-weight:600}
.inc-rail .a{top:0;color:var(--apricot)}.inc-rail .z{bottom:0;color:var(--mist)}
.inc-list li{position:relative;display:grid;gap:6px 28px;padding:22px 0;border-bottom:1px solid var(--rule)}
.inc-list li:first-child{border-top:1px solid var(--rule)}
.inc-list li::before{content:"";position:absolute;left:-41px;top:30px;width:9px;height:9px;border-radius:50%;background:var(--forest);box-shadow:0 0 0 1px var(--rule-strong);transition:background .5s,box-shadow .5s}
.inc-list li.on::before{background:var(--apricot);box-shadow:0 0 0 5px rgba(var(--acc-rgb),.16)}
.inc-list h3{font-size:clamp(1.2rem,1.9vw,1.6rem);line-height:1.15;font-weight:660;font-stretch:108%;letter-spacing:-.015em;color:var(--mist);transition:color .5s}
.inc-list li.on h3{color:var(--cream)}
.inc-list p{color:var(--mist);font-size:.96rem}
@media (min-width:960px){
  .inc{grid-template-columns:minmax(0,4fr) minmax(0,7fr)}
  .inc .sec-head{position:sticky;top:calc(var(--nav-h) + 40px);align-self:start;margin:0}
  .inc-list li{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:baseline}
}

.rel{display:grid;gap:16px;margin-top:clamp(28px,4vw,56px)}
.rel a{display:flex;flex-direction:column;gap:12px;min-height:240px;padding:24px;transition:transform .8s var(--ease)}
.rel a:hover{transform:translateY(-8px)}
.rel h3{margin-top:auto;font-size:clamp(2.2rem,3.6vw,3.3rem);transition:color .4s}
.rel a:hover h3{color:var(--apricot)}
.rel p{color:var(--mist);font-size:.93rem;max-width:22em}
.rel .disc{position:absolute;right:20px;top:20px;background:var(--forest-3)}
.rel a:hover .disc svg:first-child{transform:translateX(34px)}
.rel a:hover .disc svg+svg{transform:none}
@media (min-width:760px){.rel{grid-template-columns:repeat(3,minmax(0,1fr))}}

.band{position:relative;z-index:1;display:grid;gap:26px;margin:0 var(--gut) clamp(40px,6vw,80px);padding:clamp(40px,7vw,100px) clamp(22px,5vw,76px);border-radius:clamp(20px,3vw,40px);background:var(--apricot);color:var(--forest);overflow:hidden}
.band p{max-width:30em;font-size:1.1rem;line-height:1.5}
.band .btn-primary{background:var(--forest);color:var(--cream)}
.band .btn-primary:hover,.band .btn-primary:focus-visible{color:var(--forest)}
.band .disc{background:var(--apricot);color:var(--forest)}
.band :focus-visible{outline-color:var(--forest)}
.band ::selection{background:var(--forest);color:var(--apricot)}

/* ---------- footer wordmark ---------- */
.mark{display:block;text-align:center;font-family:var(--disp);font-size:clamp(3rem,13vw,13rem);font-weight:900;line-height:.84;letter-spacing:-.008em}
.mark .fit-in{display:inline-flex;font-stretch:normal;transition:none}
.mark .fit-in span{font-stretch:var(--s,80%)}
.mark span.sp{width:.2em}

@media (max-width:520px){
  .inc-rail{padding-left:40px}.inc-list li::before{left:-33px}
  .h2{font-size:clamp(2.6rem,13.5vw,4rem)}.h2.sm{font-size:clamp(2.3rem,11vw,3.4rem)}
}
@media (prefers-reduced-motion:reduce){
  .sm .wi{transform:none}.ring,.curtain{display:none}
  .menu .big{opacity:1;transform:none}
}

/* ================= v3: contact box, WhatsApp, UGC ================= */
@property --ang{syntax:"<angle>";initial-value:0deg;inherits:false}
.con-head{display:grid;gap:20px;margin-bottom:clamp(28px,4vw,52px)}
.contact{align-items:start}
.form-card{position:relative;padding:clamp(22px,3.4vw,46px);border-radius:30px;background:var(--bg);color:var(--fg);box-shadow:0 0 0 1px rgba(var(--acc-rgb),.5),0 50px 110px -34px rgba(var(--acc-rgb),.45),0 0 90px -20px rgba(var(--acc-rgb),.22)}
.form-card::before{content:"";position:absolute;inset:-3px;border-radius:33px;padding:3px;background:conic-gradient(from var(--ang),var(--apricot),rgba(var(--acc-rgb),0) 22%,rgba(var(--acc-rgb),0) 48%,var(--butter) 60%,rgba(var(--acc-rgb),0) 78%,var(--apricot));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:ang 7s linear infinite;pointer-events:none}
@keyframes ang{to{--ang:360deg}}
.fc-top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 20px;padding-bottom:18px;border-bottom:1px solid var(--rule)}
.fc-live{display:inline-flex;align-items:center;gap:.8em;color:var(--ink-soft)}
.fc-live i{width:8px;height:8px;border-radius:50%;background:#2E8B57;box-shadow:0 0 0 4px rgba(46,139,87,.2);animation:pulse 2.4s ease-in-out infinite}
.fc-lead{margin-top:20px;font-size:clamp(1.15rem,1.7vw,1.45rem);line-height:1.3;font-weight:560;font-stretch:104%;letter-spacing:-.015em;max-width:24em}
.form-card .form{margin-top:26px}
.form-card .field label,.form-card .field legend{color:var(--ink-soft)}
.form-card .field input[type=text],.form-card .field input[type=email],.form-card .field textarea{border-bottom-color:var(--rule-strong);color:var(--ink)}
.form-card .field input:focus,.form-card .field textarea:focus{border-color:var(--apricot-deep);box-shadow:0 1px 0 0 var(--apricot-deep)}
.form-card .field ::placeholder{color:var(--muted);opacity:.65}
.form-card .picks label{color:var(--ink)}
.form-card .picks input:checked+span{background:var(--ink);color:var(--apricot);box-shadow:none}
.form-card .picks input:focus-visible+span{outline-color:var(--ink)}
.form-card .btn-primary{background:var(--ink);color:var(--cream);min-height:60px;font-size:1.02rem;padding-left:1.8em}
.form-card .btn-primary::before{background:var(--apricot);right:9px}
.form-card .btn-primary:hover,.form-card .btn-primary:focus-visible{color:var(--ink)}
.form-card .disc{background:var(--apricot);color:var(--forest);width:44px;height:44px}
.form-card .disc svg{left:14px;top:14px}
.form-card .status{color:var(--ink-soft);font-size:.9rem;max-width:22em}
.con-side{display:grid;gap:20px}
.con-side .globe-box{position:relative;top:auto;width:min(100%,440px)}
.wa{display:grid;gap:10px;padding:22px 24px}
.wa-num{position:relative;font-size:clamp(2rem,3.4vw,3rem);line-height:1;color:var(--apricot);transition:letter-spacing .6s var(--ease)}
.wa-num:hover{letter-spacing:.02em}
.wa-row{position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;color:var(--mist);font-size:.92rem}
.copy{min-height:36px;padding:0 14px;border:0;border-radius:99px;background:none;color:var(--cream);cursor:pointer;box-shadow:inset 0 0 0 1px var(--rule-strong);transition:background .4s,color .4s}
.copy:hover{background:var(--cream);color:var(--forest)}
@media (min-width:960px){.contact{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}.con-side{position:sticky;top:calc(var(--nav-h) + 24px)}}
.foot-top p a{display:inline-block;margin-top:10px;color:var(--apricot)}

/* floating WhatsApp button */
.wa-fab{position:fixed;right:max(16px,env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:24;display:inline-flex;align-items:center;gap:9px;min-height:50px;padding:0 18px 0 14px;border-radius:99px;background:var(--apricot);color:var(--forest);font-weight:640;font-size:.9rem;font-stretch:106%;box-shadow:0 14px 34px -10px rgba(0,0,0,.6),0 0 0 0 rgba(var(--acc-rgb),.5);animation:fab 3.2s ease-out infinite;transition:transform .5s var(--ease),background .4s}
.wa-fab svg{width:22px;height:22px}
.wa-fab:hover{transform:translateY(-4px);background:var(--cream)}
@keyframes fab{0%{box-shadow:0 14px 34px -10px rgba(0,0,0,.6),0 0 0 0 rgba(var(--acc-rgb),.5)}70%,100%{box-shadow:0 14px 34px -10px rgba(0,0,0,.6),0 0 0 16px rgba(var(--acc-rgb),0)}}
@media (max-width:520px){.wa-fab span{display:none}.wa-fab{padding:0 14px}}

/* UGC band + mock */
.ai.flip .ai-copy{order:2}
.ai .vis{min-height:380px}
.ai .more{margin-top:4px}
.ugc{position:absolute;inset:0;display:grid;grid-template-columns:42% 1fr;gap:18px;padding:26px 22px 0 26px;align-items:start}
.reel{position:relative;align-self:stretch;margin-bottom:-30px;border:5px solid #06140E;border-bottom:0;border-radius:26px 26px 0 0;overflow:hidden;box-shadow:0 30px 60px -20px rgba(0,0,0,.6);min-height:300px}
.reel-scene{position:absolute;inset:0;display:grid;place-items:center;background:radial-gradient(70% 42% at 50% 60%,rgba(252,241,198,.95),rgba(252,241,198,0) 72%),linear-gradient(175deg,#E7B383,#F6A66B 46%,#C2672F)}
.reel-scene .pk{width:30%;margin-top:22%}
.reel-bars{position:absolute;left:9px;right:9px;top:9px;display:flex;gap:3px}
.reel-bars i{flex:1;height:2.5px;border-radius:9px;background:rgba(255,255,255,.4);overflow:hidden}
.reel-bars i::after{content:"";display:block;height:100%;background:#fff;width:0}
.reel-bars i:nth-child(1)::after{width:100%}
.reel-bars i:nth-child(2)::after{animation:reel 4.5s linear infinite}
@keyframes reel{from{width:0}to{width:100%}}
.reel-cap{position:absolute;left:11px;top:30px;padding:5px 9px;border-radius:7px;background:#fff;color:var(--ink);font-size:12.5px;font-weight:800;letter-spacing:-.01em;transform:rotate(-3deg);box-shadow:0 6px 14px -6px rgba(0,0,0,.4)}
.reel-ui{position:absolute;left:10px;right:10px;bottom:38px;display:flex;align-items:center;gap:8px;color:#fff;font-size:8px}
.reel-ui .play{width:22px;height:22px;border-radius:50%;background:rgba(var(--bg-rgb),.65);position:relative}
.reel-ui .play::after{content:"";position:absolute;left:8.5px;top:6.5px;border-left:7px solid #fff;border-block:4.5px solid transparent}
.sb{display:grid;grid-template-columns:3.2em 1fr;gap:8px;margin-top:4px;padding:6px 8px;border-radius:8px;font-size:11px;animation:sb 8s infinite}
.sb em{font-family:var(--mono);font-style:normal;font-size:8.5px;color:var(--mist);align-self:center}
.sb:nth-child(3){animation-delay:2s}.sb:nth-child(4){animation-delay:4s}.sb:nth-child(5){animation-delay:6s}
@keyframes sb{0%,24%{background:rgba(var(--acc-rgb),.18)}25%,100%{background:rgba(var(--acc-rgb),0)}}

/* related cards: four across */
.rel h3{font-size:clamp(1.9rem,2.7vw,2.7rem)}
@media (min-width:760px){.rel{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.rel{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:520px){.ugc{padding:20px 14px 0 16px;gap:12px;grid-template-columns:48% 1fr}}
@media (prefers-reduced-motion:reduce){.form-card::before{animation:none}}

/* ================= v4: colour palettes (preview switcher) ================= */
:root{
  --acc-rgb:246,166,107;--accd-rgb:168,72,26;--bg-rgb:11,33,26;--bg2-rgb:15,42,33;--mist-rgb:169,192,179;--dot-rgb:241,239,228;
  --env-a:#1C5A45;--env-b:#5A3A1E;--vis-a:#1F4D3C;--vis-b:#12322A;--vis-c:#0C251D;--globe-a:#1F4F3D;--globe-b:#0A1F18;
  --p-rule:#CFCDBA;--p-rule-strong:#7C8A7E;
}
/* the mock screens are illustrations: they keep their own colours in every palette */
.win,.phone,.bub.a,.dots,.reel,.reel-cap{--paper:#EDEBDD;--paper-2:#E0DECD;--paper-3:#CFCDBA;--ink:#0B211A;--ink-soft:#3C5247;--apricot:#F6A66B;--apricot-deep:#A8481A;--butter:#F2D98B}

/* ================= v4: privacy page, sample slots ================= */
.doc{display:grid;gap:0;max-width:880px;border-top:1px solid var(--rule)}
.doc section{display:grid;gap:12px;padding:30px 0;border-bottom:1px solid var(--rule)}
.doc h2{font-size:clamp(1.3rem,2vw,1.7rem);line-height:1.15;font-weight:680;font-stretch:112%;letter-spacing:-.018em}
.doc p,.doc li{color:var(--mist);max-width:42em}
.doc ul{display:grid;gap:8px;padding-left:22px;list-style:disc}
.doc a{color:var(--apricot);text-decoration:underline;text-underline-offset:3px}
.samples{display:grid;gap:18px;margin-top:clamp(28px,4vw,56px)}
@media (min-width:700px){.samples{grid-template-columns:repeat(3,minmax(0,1fr))}}
.slot{position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:10px;aspect-ratio:9/14;padding:22px;border-radius:22px;overflow:hidden;background:radial-gradient(90% 60% at 50% 30%,var(--vis-a),var(--vis-c) 80%);box-shadow:inset 0 0 0 1px var(--rule);color:#F1EFE4;transition:transform .8s var(--ease)}
.slot:hover{transform:translateY(-8px)}
.slot::before{content:"";position:absolute;left:50%;top:42%;width:74px;height:74px;margin:-37px 0 0 -37px;border-radius:50%;background:var(--apricot);transition:transform .6s var(--ease)}
.slot::after{content:"";position:absolute;left:50%;top:42%;margin:-12px 0 0 -7px;border-left:20px solid var(--forest);border-block:12px solid transparent}
.slot:hover::before{transform:scale(1.14)}
.slot h3{font-family:var(--disp);font-stretch:75%;font-weight:900;text-transform:uppercase;font-size:clamp(1.8rem,2.8vw,2.6rem);line-height:.9}
.slot p{font-size:.92rem;color:rgba(241,239,228,.78);max-width:20em}
.slot .mono{color:rgba(241,239,228,.7)}
.slot .tag{position:absolute;left:16px;top:16px;padding:5px 10px;border-radius:99px;background:rgba(0,0,0,.4);color:#F1EFE4}

/* ================= v5: logo, about, AI page ================= */
.brand svg{display:block;height:19px;width:auto;overflow:visible}
.brand .ld{fill:var(--apricot);animation:ld 3.4s ease-in-out infinite}
@keyframes ld{50%{opacity:.5}}
.menu .brand svg{height:22px}
.statement{font-size:clamp(1.7rem,4vw,3.5rem);line-height:1.1;letter-spacing:-.022em;font-weight:560;font-stretch:104%;max-width:23em}
.statement .ital{font-size:1.08em;color:var(--accent-ink)}
.cols2{display:grid;gap:20px 56px;margin-top:clamp(36px,5vw,72px);padding-top:clamp(24px,3vw,40px);border-top:1px solid var(--rule)}
.cols2 p{color:var(--muted);max-width:34em}
@media (min-width:860px){.cols2{grid-template-columns:1fr 1fr}}
.creed{border-top:1px solid var(--rule)}
.creed li{display:grid;gap:10px 44px;align-items:baseline;padding:clamp(22px,3vw,36px) 0;border-bottom:1px solid var(--rule)}
.creed h3{font-family:var(--serif);font-style:italic;font-weight:500;font-size:clamp(1.8rem,3.4vw,3rem);line-height:1.04;letter-spacing:-.025em;transition:color .5s,transform .7s var(--ease)}
.creed li:hover h3{color:var(--apricot);transform:translateX(10px)}
.creed p{color:var(--mist);max-width:30em}
@media (min-width:900px){.creed li{grid-template-columns:minmax(0,6fr) minmax(0,5fr)}}
.m-ai .chat{position:absolute;left:8%;right:8%;top:11%;bottom:-6%;min-height:0;align-self:stretch;border-radius:20px 20px 0 0}
@media (min-width:1100px){.rel{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}.rel h3{font-size:clamp(1.7rem,2.25vw,2.4rem)}.rel a{padding:22px 20px}}

/* ================= v6: Midnight & Gold is the brand palette (default) ================= */
:root{
  --forest:#0A1424;--forest-2:#0F1C31;--forest-3:#172945;--cream:#F2EFE6;--mist:#A8B6CF;
  --paper:#ECE9DF;--paper-2:#DFDCCF;--paper-3:#CECBBC;--ink:#0A1424;--ink-soft:#3E4A61;
  --apricot:#E8B54D;--apricot-deep:#875808;--butter:#F4DC98;--rule:#20334F;--rule-strong:#4F6C9C;--p-rule:#CECBBC;--p-rule-strong:#7E8799;
  --acc-rgb:232,181,77;--accd-rgb:135,88,8;--bg-rgb:10,20,36;--bg2-rgb:15,28,49;--mist-rgb:168,182,207;--dot-rgb:242,239,230;
  --env-a:#1D3F7A;--env-b:#5A4416;--vis-a:#1E3A66;--vis-b:#12243F;--vis-c:#0C1930;--globe-a:#1E3F73;--globe-b:#08111F;
}

/* ================= v7: contact page ================= */
.next{display:grid;gap:0;counter-reset:n}
.next li{position:relative;display:grid;gap:4px;padding:16px 0 16px 46px;border-bottom:1px solid var(--rule);counter-increment:n}
.next li:first-child{border-top:1px solid var(--rule)}
.next li::before{content:counter(n);position:absolute;left:0;top:16px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-family:var(--mono);font-size:.68rem;font-weight:600;color:var(--apricot);box-shadow:inset 0 0 0 1px var(--rule-strong)}
.next b{font-weight:650;font-stretch:108%;letter-spacing:-.01em}
.next span{color:var(--mist);font-size:.94rem}
.reply{display:flex;align-items:baseline;gap:14px;padding:22px 24px}
.reply strong{font-family:var(--disp);font-stretch:75%;font-weight:900;font-size:clamp(3rem,5vw,4.4rem);line-height:.86;color:var(--apricot)}
.reply span{color:var(--mist);font-size:.95rem;max-width:14em}

/* ================= v8: AI tools named in the chat illustration ================= */
.tools{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding-bottom:14px;border-bottom:1px solid var(--rule)}
.tools span{padding:7px 13px;border-radius:99px;font-size:.84rem;font-weight:620;font-stretch:104%;line-height:1;color:var(--mist);box-shadow:inset 0 0 0 1px var(--rule-strong);transition:background .5s var(--ease),color .5s,box-shadow .5s}
.tools span.on{background:var(--apricot);color:var(--forest);box-shadow:none}
.tools em{margin-left:auto;font-style:normal;color:var(--mist);font-size:.56rem}

/* ================= v9: the UGC reel actually plays (four scenes, synced to the storyboard) ================= */
.sb{animation:none;transition:background .5s}
.sb.on{background:rgba(var(--acc-rgb),.2)}
.reel .pk{position:relative;z-index:1;animation:none;transition:transform .9s var(--ease),filter .7s}
.reel-scene::after{content:"";position:absolute;inset:0;background:linear-gradient(175deg,#A39C96,#6D6865);opacity:0;transition:opacity .7s}
.reel[data-s="0"] .pk{transform:scale(.8) rotate(-8deg) translateY(5%)}
.reel[data-s="1"] .reel-scene::after{opacity:.92}
.reel[data-s="1"] .pk{transform:scale(.6) rotate(10deg) translate(10%,30%);filter:drop-shadow(0 16px 12px rgba(0,0,0,.3)) grayscale(.8)}
.reel[data-s="2"] .pk{transform:scale(1.16) rotate(-150deg) translateY(14%)}
.reel[data-s="3"] .pk{transform:scale(.94) translateY(-14%)}
.drop{position:absolute;z-index:2;left:35%;top:75%;width:10px;height:13px;margin-left:-5px;border-radius:50% 50% 50% 50%/62% 62% 38% 38%;background:#FFF3CF;box-shadow:0 0 10px rgba(255,243,207,.8);opacity:0}
.reel[data-s="2"] .drop{animation:drop .9s .8s ease-in infinite}
@keyframes drop{0%{opacity:0;transform:translateY(0) scale(.5)}15%{opacity:1}100%{opacity:0;transform:translateY(64px) scale(1)}}
.reel-cta{position:absolute;left:50%;bottom:74px;z-index:2;padding:9px 18px;border-radius:99px;background:#0B211A;color:#F1EFE4;font-size:11.5px;font-weight:700;white-space:nowrap;opacity:0;transform:translate(-50%,26px);transition:transform .6s var(--ease),opacity .5s}
.reel[data-s="3"] .reel-cta{opacity:1;transform:translate(-50%,0)}
.reel-cap{z-index:2}
.reel-cap.pop{animation:cap .55s var(--ease)}
@keyframes cap{from{opacity:0;transform:rotate(-3deg) scale(.7) translateY(8px)}}
.reel-bars{z-index:2}
.reel-bars i:nth-child(2)::after{animation:none}
.reel.playing .reel-bars i:nth-child(1)::after{width:0}
.reel.playing .reel-bars i.done::after{width:100%}
.reel.playing .reel-bars i.cur::after{animation:reel 2.4s linear forwards}
.reel-ui{z-index:2}
.reel.playing .play::after{left:7px;top:6.5px;width:8px;height:9px;border-block:0;border-left:2.5px solid #fff;border-right:2.5px solid #fff}

/* ================= v10: real-page mode (WordPress theme) ================= */
.sv-in .curtain{transform:none;transition:none}
.sv-in .curtain span{opacity:1;transform:none;transition:none}
.slot.has-video{padding:0;cursor:pointer}
.slot.has-video video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.slot.has-video::before,.slot.has-video::after{z-index:2;pointer-events:none;transition:opacity .3s,transform .6s var(--ease)}
.slot.has-video.playing::before,.slot.has-video.playing::after{opacity:0}
.slot-info{position:relative;z-index:2;display:grid;gap:8px;padding:60px 22px 22px;background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.72));pointer-events:none;transition:opacity .4s}
.slot.has-video.playing .slot-info{opacity:0}
.shots{display:grid;gap:16px;margin-top:clamp(28px,4vw,56px)}
.shots figure{margin:0;border-radius:22px;overflow:hidden;background:var(--forest-2);box-shadow:inset 0 0 0 1px var(--rule)}
.shots img,.shots video{display:block;width:100%;height:auto}
@media (min-width:760px){.shots{grid-template-columns:repeat(3,minmax(0,1fr))}.shots.n1{grid-template-columns:minmax(0,1fr)}.shots.n2{grid-template-columns:repeat(2,minmax(0,1fr))}}
.wp-extra .wrap>*{max-width:880px}
.wp-extra p,.wp-extra li{color:var(--mist)}
.wp-extra img,.wp-extra video{max-width:100%;height:auto;border-radius:22px}
.wp-extra figure{margin:0 0 24px}
.wp-extra h2,.wp-extra h3{font-weight:680;font-stretch:112%;letter-spacing:-.018em;line-height:1.15;margin:1.2em 0 .5em}
.wp-extra a{color:var(--apricot);text-decoration:underline;text-underline-offset:3px}

/* ================= WordPress ================= */
[hidden]{display:none!important}
img,video{max-width:100%}
/* the black WordPress bar that logged-in users see sits above the navigation */
.admin-bar .nav{top:32px}
.admin-bar .menu{top:32px}
@media (max-width:782px){.admin-bar .nav,.admin-bar .menu{top:46px}}
.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;word-wrap:normal!important}
.shots{align-items:start}
/* a very tall picture or phone video is shown whole, never taller than the screen */
.shots img,.shots video{max-height:min(80vh,760px);object-fit:contain}
/* text typed in the WordPress editor */
.wp-doc{display:block;padding-top:30px}
.wp-doc>*{margin-bottom:1.1em}
.wp-doc h2,.wp-doc h3{margin:1.5em 0 .5em;font-weight:680;font-stretch:112%;letter-spacing:-.018em;line-height:1.15}
.wp-doc h3{font-size:1.2rem}
.wp-doc ol{display:grid;gap:8px;padding-left:22px;list-style:decimal}
.wp-doc img,.wp-doc video{height:auto;border-radius:22px}
.wp-doc section{padding:22px 0}
.wp-extra .wrap>*{margin-bottom:1.1em}
.wp-extra ul{padding-left:22px;list-style:disc}
.wp-extra ol{padding-left:22px;list-style:decimal}
.wp-extra .alignwide,.wp-extra .alignfull{max-width:none}
.aligncenter{margin-inline:auto;text-align:center}
.wp-caption-text,.wp-element-caption,figcaption{font-size:.86rem;color:var(--mist);margin-top:8px}
.nav-links{display:flex;flex-wrap:wrap;gap:10px}
.nav-links .page-numbers{padding:6px 12px;border-radius:99px;box-shadow:inset 0 0 0 1px var(--rule-strong)}
.nav-links .current{background:var(--apricot);color:var(--forest);box-shadow:none}

/* ---------- email next to WhatsApp ---------- */
.wa-mail-row{padding-top:12px;margin-top:2px;border-top:1px solid var(--rule)}
.wa-mail{color:var(--fg);font-weight:600;text-decoration:underline;text-decoration-color:var(--rule-strong);text-underline-offset:4px;transition:color .3s}
.wa-mail:hover{color:var(--apricot)}

/* ---------- phones: the two ads sit on top, the light falls down into the store ---------- */
@media (max-width:600px){
  .stage{aspect-ratio:auto;height:auto;min-height:0;padding-top:150px}
  .stage .src{padding:9px 12px 9px 11px}
  .stage .src.a{top:0;left:0;right:auto}
  .stage .src.b{top:0;left:auto;right:0}
  .stage .win{position:relative;top:auto;right:auto;left:auto;width:auto;margin:0 3%}
}