/* ================= Modern layer ================= */
@view-transition{navigation:auto}
::view-transition-old(root){animation:.25s ease both vt-out}
::view-transition-new(root){animation:.35s ease both vt-in}
@keyframes vt-out{to{opacity:0;transform:translateY(-8px)}}
@keyframes vt-in{from{opacity:0;transform:translateY(12px)}}
html{scroll-behavior:smooth}
body{overflow-x:clip}
::selection{background:var(--red);color:#fff}
.wrap{max-width:1240px}
.progress{position:fixed;top:0;left:0;height:3px;background:var(--red);width:100%;transform-origin:0 50%;transform:scaleX(var(--sp,0));z-index:100}
header{background:rgba(255,255,255,.92);backdrop-filter:blur(10px)}
nav a{position:relative}
nav a:after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:var(--red);transform:scaleX(0);transform-origin:right;transition:transform .35s}
nav a:hover:after,nav a.active:after{transform:scaleX(1);transform-origin:left}

/* buttons */
.btn{border-radius:999px;padding:15px 26px;transition:transform .2s,background .2s}
.btn .arr{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s}
.btn:hover .arr{transform:translateX(4px)}

/* hero */
.hero{padding:70px 0 40px;border:0}
.hero h1{font-size:clamp(42px,6.6vw,92px);max-width:none}
.hero .lead{font-size:19px}
.status{display:inline-flex;align-items:center;gap:10px;font-size:14px;font-weight:600;color:var(--red);margin-bottom:22px}
.status i{width:10px;height:10px;border-radius:50%;background:#1f8f4e;position:relative}
.status i:after{content:"";position:absolute;inset:0;border-radius:50%;background:#1f8f4e;animation:ping 1.6s ease-out infinite}
@keyframes ping{to{transform:scale(2.6);opacity:0}}
.scene-wrap{transition:transform .3s ease-out;will-change:transform}
.facts{margin-top:40px}
.facts b{font-size:clamp(30px,4vw,48px);letter-spacing:-.03em}

/* marquee */
.marquee{background:var(--red);color:#fff;overflow:hidden;padding:20px 0;transform:rotate(-1.2deg);margin:30px -10px 20px}
.track{display:flex;align-items:center;gap:36px;width:max-content;animation:mq 28s linear infinite}
.track span{font-family:"Bricolage Grotesque",sans-serif;font-size:clamp(22px,3vw,36px);font-weight:700;letter-spacing:-.02em;white-space:nowrap}
.track svg{width:22px;height:22px;fill:#fff;flex:none}
@keyframes mq{to{transform:translateX(-50%)}}
.marquee:hover .track{animation-play-state:paused}

/* section heads */
.head h2,section h2{font-size:clamp(34px,4.6vw,60px)}
.split-head{max-width:none;display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:end}

/* service rows */
.rows{border-top:1px solid var(--ink)}
.row{display:grid;grid-template-columns:70px 1.1fr 1.4fr 60px;gap:24px;align-items:center;padding:30px 10px;border-bottom:1px solid var(--line);position:relative;overflow:hidden;isolation:isolate}
.row:before{content:"";position:absolute;inset:0;background:var(--red);transform:scaleY(0);transform-origin:bottom;transition:transform .45s cubic-bezier(.7,0,.2,1);z-index:-1}
.row:hover:before{transform:scaleY(1)}
.row:hover{color:#fff}
.rn{font-weight:600;color:var(--red);transition:color .3s}
.rt{font-family:"Bricolage Grotesque",sans-serif;font-size:clamp(22px,2.6vw,34px);font-weight:700;letter-spacing:-.02em;transition:transform .45s}
.rd{color:var(--muted);transition:color .3s}
.row:hover .rn,.row:hover .rd{color:#fff}
.row:hover .rt{transform:translateX(10px)}
.ra{width:52px;height:52px;border:1px solid currentColor;border-radius:50%;display:grid;place-items:center;transition:transform .45s}
.ra svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2}
.row:hover .ra{transform:rotate(45deg);background:#fff;color:var(--red);border-color:#fff}

/* before / after */
.ba{position:relative;border-radius:20px;background:#fff;border:1px solid var(--line);padding:20px;user-select:none}
.ba svg{display:block;width:100%;height:auto}
.ba-clip{position:absolute;inset:20px;clip-path:inset(0 calc(100% - var(--p)) 0 0)}
.ba input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.ba-h{position:absolute;top:20px;bottom:20px;left:calc(20px + (100% - 40px) * var(--pn,.5));width:3px;background:var(--red);pointer-events:none}
.ba-h:after{content:"\21C6";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;background:var(--red);color:#fff;display:grid;place-items:center;font-size:20px}

/* process */
.sticky{position:sticky;top:120px}
.process{position:relative;padding-left:70px}
.process:before{content:"";position:absolute;left:22px;top:10px;bottom:10px;width:2px;background:var(--line)}
.pline{position:absolute;left:21px;top:10px;width:4px;height:calc(100% - 20px)}
.pline path{stroke:var(--red);stroke-width:4;fill:none;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--pp,0))}
.pstep{position:relative;padding:22px 0 44px}
.pstep span{position:absolute;left:-70px;top:18px;width:46px;height:46px;border-radius:50%;background:#fff;border:2px solid var(--red);color:var(--red);display:grid;place-items:center;font-weight:700;transition:background .3s,color .3s}
.pstep.lit span{background:var(--red);color:#fff}
.pstep h3{font-size:28px}
.pstep p{color:var(--muted);margin-top:6px}

/* cards & band */
.card{border-radius:18px}
.band{margin:0 16px 16px;border-radius:28px;padding:70px 0}
.band h2{font-size:clamp(30px,4vw,52px)}
section{padding:100px 0}

@media(max-width:860px){
 .split-head{grid-template-columns:1fr;gap:10px}
 .row{grid-template-columns:40px 1fr 44px;padding:22px 4px;gap:12px}
 .rd{display:none}.ra{width:40px;height:40px}
 .sticky{position:static}
 section{padding:64px 0}
 .marquee{padding:14px 0}
}

/* ================= Palette + buttons v2 ================= */
:root{--red:#a51422;--red-d:#7d0f1a;--ink:#1c1917;--muted:#6b625d;--line:#ece4de;--bg:#fffcf9;--soft:#f8efe8;--wa:#128c4b;--wa-d:#0d6e3a;--gold:#e0a13a}
body{background:var(--bg)}
.facts b span+*,.facts b{color:var(--red)}
.status{color:var(--ink)}

/* pill buttons with icon chip and two-line label */
.btn{gap:12px;padding:8px 22px 8px 8px;border:0;border-radius:999px;font-weight:600;line-height:1.15;position:relative;overflow:hidden;isolation:isolate;box-shadow:0 1px 0 rgba(0,0,0,.04),0 8px 20px -10px currentColor}
.btn:before{content:"";position:absolute;inset:0;border-radius:inherit;transform:translateX(-101%);transition:transform .45s cubic-bezier(.7,0,.2,1);z-index:-1}
.btn:hover:before{transform:none}
.btn-red{background:var(--red);color:#fff;box-shadow:0 10px 24px -12px var(--red)}.btn-red:before{background:var(--red-d)}.btn-red:hover{background:var(--red)}
.btn-wa{background:var(--wa);color:#fff;box-shadow:0 10px 24px -12px var(--wa)}.btn-wa:before{background:var(--wa-d)}
.bi{width:42px;height:42px;border-radius:50%;background:#fff;display:grid;place-items:center;flex:none;transition:transform .45s cubic-bezier(.3,1.5,.5,1)}
.bi svg{width:20px;height:20px}
.btn-red .bi{color:var(--red)}.btn-red .bi svg{stroke:var(--red)}
.btn-wa .bi svg{fill:var(--wa);stroke:none}
.btn-red .bi svg{fill:none}
.btn:hover .bi{transform:rotate(-12deg) scale(1.08)}
.btn-red:hover .bi svg{animation:ringring .6s}
@keyframes ringring{20%,60%{transform:rotate(-14deg)}40%,80%{transform:rotate(14deg)}}
.bl{display:flex;flex-direction:column;font-size:16px}
.bl small{font-size:11px;font-weight:500;opacity:.8;letter-spacing:.04em;text-transform:uppercase}
.btn .arr{display:none}
.band .btn.on-red.btn-red{background:#fff;color:var(--red)}.band .btn.on-red.btn-red .bi{background:var(--red)}.band .btn.on-red.btn-red .bi svg{stroke:#fff}
.band .btn.on-red.btn-red:before{background:var(--soft)}
.band{background:var(--red)}

/* service icon chips */
.chip{width:56px;height:56px;border-radius:16px;background:var(--soft);color:var(--red);display:grid;place-items:center;margin-bottom:18px;transition:background .3s,color .3s,transform .4s cubic-bezier(.3,1.5,.5,1)}
.chip .ico{width:28px;height:28px;margin:0}
.chip .ico *{stroke-dasharray:80;stroke-dashoffset:80}
.reveal.in .chip .ico *{animation:draw 1.2s calc(var(--d,0ms) + 200ms) ease forwards}
.card:hover .chip{background:var(--red);color:#fff;transform:rotate(-6deg)}
.card:hover .ico{animation:none}
.card .act a{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:999px;background:var(--soft);color:var(--red);transition:.25s}
.card .act a:last-child{background:#e7f5ed;color:var(--wa)}
.card .act a:hover{transform:translateY(-2px)}

/* floating action buttons: expand label on hover */
.float a{width:auto;height:56px;border-radius:999px;padding:0 14px;display:flex;align-items:center;gap:0;background:var(--wa);color:#fff;box-shadow:0 12px 28px -10px rgba(0,0,0,.35);transition:gap .3s}
.float a.c{background:var(--red)}
.float a:after{border-color:currentColor;color:inherit}
.float .w:after{border-color:var(--wa)}.float .c:after{border-color:var(--red)}
.float svg{width:26px;height:26px;fill:#fff}
.float .c svg{fill:none;stroke:#fff}
.float span{max-width:0;overflow:hidden;white-space:nowrap;font-weight:600;transition:max-width .4s}
.float a:hover{gap:10px}.float a:hover span{max-width:180px}
.mbar a{display:flex;align-items:center;justify-content:center;gap:8px}
.mbar svg{width:20px;height:20px}
.mbar .w svg{fill:#fff}.mbar .c svg{fill:none;stroke:#fff}
.mbar .w{background:var(--wa)}