@font-face{font-family:'Oswald';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/oswald-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Oswald';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/oswald-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/inter-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/inter-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/inter-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/inter-latin-700-normal.woff2) format('woff2')}
:root{
  --bg:#0b0b0c; --bg-2:#111114; --card:#151518; --line:#26262c;
  --text:#f5f5f6; --soft:#d9d9de; --muted:#a2a2ac;
  --paper:#f3f2ee; --ink:#121214; --ink-muted:#5a5a63; --paper-line:#dddcd5;
  --red:#e30613; --red-2:#ff2d3a; --star:#fbbc04; --wa:#25d366; --wa-ink:#062b14;
  --display:'Oswald','Arial Narrow',Impact,sans-serif;
  --body:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --header-h:72px; --radius:16px; --wrap:1240px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-padding-top:calc(var(--header-h) + 12px); background:#050506; overscroll-behavior-y:none}
@media (prefers-reduced-motion:no-preference){ html{scroll-behavior:smooth} }
body{margin:0; background:var(--bg); color:var(--text); font:16px/1.6 var(--body); -webkit-font-smoothing:antialiased; overflow-x:clip}
img{max-width:100%; height:auto; display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--display); font-weight:600; text-transform:uppercase; letter-spacing:.01em; line-height:1.04; margin:0; text-wrap:balance}
p{margin:0}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 20px}
.red{color:var(--red)}
.eyebrow{font:600 13px/1.2 var(--body); letter-spacing:.14em; text-transform:uppercase; color:var(--red-2); margin-bottom:14px}
.section{padding:clamp(64px,9vw,120px) 0}
.section--paper{background:var(--paper); color:var(--ink)}
.section--paper .eyebrow{color:var(--red)}
.section-head{max-width:760px; margin-bottom:clamp(32px,5vw,56px)}
.section-head h2{font-size:clamp(34px,5vw,58px)}
.section-head p{margin-top:16px; font-size:18px; color:var(--muted)}
.section--paper .section-head p{color:var(--ink-muted)}
.skip{position:absolute; left:-9999px; top:8px; z-index:100; background:#fff; color:#000; padding:10px 14px; border-radius:8px}
.skip:focus{left:8px}
:focus-visible{outline:3px solid var(--star); outline-offset:3px}

/* Buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:50px; padding:0 24px; border-radius:999px;
  border:2px solid var(--red); background:var(--red); color:#fff; font:600 15px/1 var(--body); text-decoration:none; white-space:nowrap;
  transition:background .2s,border-color .2s,color .2s,transform .2s}
.btn:hover{background:var(--red-2); border-color:var(--red-2)}
.btn svg{width:20px; height:20px; flex:none}
.btn--ghost{background:transparent; border-color:rgba(255,255,255,.28); color:var(--text)}
.btn--ghost:hover{background:transparent; border-color:#fff}
.btn--wa{background:var(--wa); border-color:var(--wa); color:var(--wa-ink)}
.btn--wa:hover{background:#3be07a; border-color:#3be07a}
.btn--light{background:#fff; border-color:#fff; color:var(--ink)}
.btn--light:hover{background:#f1f1f1; border-color:#f1f1f1}
.btn--outline-light{background:transparent; border-color:rgba(255,255,255,.6); color:#fff}
.btn--outline-light:hover{background:rgba(255,255,255,.12); border-color:#fff}
.btn--sm{min-height:42px; padding:0 16px; font-size:14px}

/* Header */
.header{position:fixed; inset:0 0 auto 0; z-index:50; height:var(--header-h);
  background:rgba(11,11,12,.95); -webkit-backdrop-filter:saturate(140%) blur(14px); backdrop-filter:saturate(140%) blur(14px);
  border-bottom:1px solid rgba(255,255,255,.06)}
.header .wrap{height:100%; display:flex; align-items:center; gap:24px}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; flex:none}
.brand img:first-child{height:44px; width:auto}
.brand img:last-child{height:24px; width:auto}
.nav{display:flex; gap:24px; margin-left:auto}
.nav a[aria-current="page"]{color:#fff; text-decoration:underline; text-decoration-color:var(--red); text-underline-offset:6px; text-decoration-thickness:2px}
.nav a{font-size:15px; font-weight:500; color:var(--soft); text-decoration:none}
.nav a:hover{color:#fff}
.header__actions{display:flex; align-items:center; gap:10px}
.header__phone{font-weight:600; font-size:15px; text-decoration:none; color:#fff; padding:0 6px}
.menu{display:none; position:relative}
.menu summary{list-style:none; cursor:pointer; width:44px; height:44px; display:grid; place-items:center; border-radius:12px; border:1px solid var(--line)}
.menu summary::-webkit-details-marker{display:none}
.menu summary svg{width:22px; height:22px}
.menu__panel{position:absolute; right:0; top:52px; width:min(78vw,300px); background:#141417; border:1px solid var(--line); border-radius:14px; padding:8px; box-shadow:0 20px 50px rgba(0,0,0,.5)}
.menu__panel a{display:block; padding:12px 14px; border-radius:10px; text-decoration:none; font-weight:500}
.menu__panel a:hover{background:#1d1d22}
@media (max-width:1120px){ .nav{display:none} .header__actions{margin-left:auto} .menu{display:block} }
@media (max-width:640px){
  :root{--header-h:64px}
  .brand img:first-child{height:38px}
  .brand img:last-child{height:19px}
  .header__phone{display:none}
  .header .btn--wa{padding:0 14px}
}
@media (max-width:380px){ .brand img:last-child{display:none} }

/* ================= HERO SEQUENCE ================= */
.seq{position:relative; background:#000}
.seq-on .seq{height:300vh}
.seq__stage{position:relative; height:100vh; height:100svh; min-height:540px; overflow:hidden; background:#000}
.seq-on .seq__stage{position:sticky; top:0}
.seq__media{position:absolute; inset:0}
.seq__media picture,.seq__media img,.seq__media canvas{position:absolute; inset:0; width:100%; height:100%}
.seq__media img{object-fit:cover; object-position:50% 60%; transition:opacity .4s}
.seq__media canvas{display:none}
.seq-on .seq__media canvas{display:block}
.seq.has-frame .seq__media img{opacity:0}
.seq__scrim{position:absolute; inset:0 0 auto 0; height:66%; pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.9) 0%,rgba(0,0,0,.74) 36%,rgba(0,0,0,.34) 68%,transparent 100%)}
@media (min-aspect-ratio:1/1) and (max-height:820px){
  .seq__scrim{height:80%; background:linear-gradient(180deg,rgba(0,0,0,.92) 0%,rgba(0,0,0,.84) 40%,rgba(0,0,0,.5) 66%,transparent 100%)}
}
.seq__copy{position:absolute; inset:0 0 auto 0; padding-top:calc(var(--header-h) + clamp(22px,5vh,60px))}
.seq__inner{display:grid}
.seq__text{grid-area:1/1; will-change:opacity,transform}
.seq__text--b{opacity:0; visibility:hidden}
html:not(.seq-on) .seq__text--b{display:none}
.seq__row{display:grid; grid-template-columns:minmax(0,1.45fr) minmax(0,1fr); gap:20px 56px; align-items:end}
.seq .eyebrow{display:inline-block; margin-bottom:14px; padding:5px 8px 4px; border-radius:4px; background:rgba(52,52,58,.58); border:1px solid rgba(255,255,255,.1); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); color:#fff; font-size:12px; letter-spacing:.14em}
.seq h1,.seq .seq__h{font-family:var(--display); font-weight:600; text-transform:uppercase; line-height:1.02; letter-spacing:.01em;
  font-size:clamp(38px,4.4vw,68px); text-shadow:0 2px 30px rgba(0,0,0,.45); text-wrap:balance}
.seq__sub{font-size:17px; color:#e9e9ee; max-width:500px; text-shadow:0 1px 14px rgba(0,0,0,.5)}
.seq__more{display:block; margin-top:.75em}
.seq__btns{display:flex; flex-wrap:wrap; gap:12px; margin-top:18px}
.rating{display:inline-flex; align-items:center; gap:10px; margin-top:16px; font-size:14px; color:#d4d4da; text-decoration:none}
.rating strong{color:#fff}
.stars{display:inline-flex; gap:2px; color:var(--star)}
.stars svg{width:16px; height:16px}
.seq__cue{position:absolute; left:50%; bottom:24px; transform:translateX(-50%); z-index:2; display:flex; align-items:center; gap:10px;
  padding:9px 16px; border-radius:999px; background:rgba(0,0,0,.55); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  color:#fff; font:600 12px/1 var(--body); letter-spacing:.14em; text-transform:uppercase; pointer-events:none}
.seq__cue span{display:block; width:14px; height:22px; border:2px solid #fff; border-radius:8px; position:relative}
.seq__cue span::after{content:""; position:absolute; left:50%; top:4px; width:2px; height:5px; margin-left:-1px; background:#fff; border-radius:2px; animation:cue 1.6s ease-in-out infinite}
@keyframes cue{0%{transform:translateY(0); opacity:1} 70%{transform:translateY(7px); opacity:0} 100%{opacity:0}}
html:not(.seq-on) .seq__cue{display:none}
@media (max-aspect-ratio:1/1){
  .seq-on .seq{height:260vh}
  .seq__media img{object-position:50% 50%}
  .seq__scrim{inset:auto 0 0 0; height:72%;
    background:linear-gradient(0deg,rgba(0,0,0,.95) 0%,rgba(0,0,0,.84) 40%,rgba(0,0,0,.5) 72%,transparent 100%)}
  .seq__copy{inset:auto 0 0 0; padding:0 0 calc(24px + env(safe-area-inset-bottom))}
  .seq__row{grid-template-columns:1fr; gap:0}
  .seq h1,.seq .seq__h{font-size:clamp(34px,9.6vw,56px)}
  .seq__sub{font-size:15px; margin-top:10px}
  .seq__text{align-self:end}
  .seq__text--b{padding-bottom:72px}
  .seq__text--b .seq__btns{display:none}
  .seq__btns{margin-top:16px}
  .seq__btns .btn{flex:1; min-height:48px; padding:0 12px}
  .rating{margin-top:14px; font-size:13px}
  .seq__cue{display:none}
}
@media (prefers-reduced-motion:reduce){ .seq__cue span::after{animation:none} }

/* Trust bar */
.trust{background:var(--bg-2); border-block:1px solid var(--line)}
.trust ul{list-style:none; margin:0 auto; padding:0 20px; max-width:var(--wrap); display:grid; grid-template-columns:repeat(4,1fr)}
.trust li{display:flex; align-items:center; gap:14px; padding:24px 20px; border-left:1px solid var(--line)}
.trust li:first-child{border-left:0; padding-left:0}
.trust svg{width:30px; height:30px; flex:none; color:var(--red)}
.trust strong{display:block; font-family:var(--display); font-weight:600; font-size:19px; text-transform:uppercase; letter-spacing:.02em}
.trust span{display:block; font-size:14px; color:var(--muted); line-height:1.4}
@media (max-width:900px){ .trust ul{grid-template-columns:1fr 1fr} .trust li{border-left:0; padding:18px 12px 18px 0} }
@media (max-width:420px){ .trust ul{grid-template-columns:1fr} }

/* Services */
.services{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.service{position:relative; padding:26px 22px 24px; border:1px solid var(--line); border-radius:var(--radius);
  background:linear-gradient(180deg,#18181b,#131316); transition:border-color .2s,transform .2s}
.service:hover{border-color:rgba(227,6,19,.7); transform:translateY(-2px)}
.service::before{content:""; display:block; width:28px; height:3px; border-radius:2px; background:var(--red); margin-bottom:18px}
.service h3{font-size:22px; margin-bottom:10px}
.service p{font-size:15px; color:var(--muted); line-height:1.55}
.service{cursor:pointer; display:flex; flex-direction:column}
.service h3{margin-bottom:10px}
.service__open{all:unset; cursor:pointer}
.service__open::after{content:""; position:absolute; inset:0; border-radius:inherit}
.service:has(.service__open:focus-visible){outline:3px solid var(--star); outline-offset:3px}
.service__more{display:inline-flex; align-items:center; gap:6px; margin-top:auto; padding-top:16px; font:600 13px/1 var(--body); color:var(--red-2)}
.service__more svg{width:15px; height:15px; transition:transform .25s ease}
.service:hover .service__more svg{transform:translateX(3px)}

/* Service explainer modal */
html.modal-open{overflow:hidden}
.svc{border:0; padding:0; margin:auto; background:transparent; color:var(--text); width:min(560px, calc(100vw - 32px)); max-width:none; max-height:min(86vh, 720px); overflow:visible}
.svc::backdrop{background:rgba(5,5,6,.55); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); opacity:0; transition:opacity .28s ease}
.svc.is-open::backdrop{opacity:1}
.svc__inner{position:relative; max-height:min(86vh, 720px); overflow:auto; overscroll-behavior:contain; padding:32px 30px 26px; border:1px solid var(--line); border-radius:20px;
  background:linear-gradient(180deg,#1b1b1f 0%,#131316 100%); box-shadow:0 30px 80px rgba(0,0,0,.55);
  opacity:0; transform:translateY(14px) scale(.985); transition:opacity .28s ease, transform .34s cubic-bezier(.2,.8,.2,1)}
.svc.is-open .svc__inner{opacity:1; transform:none}
.svc__close{position:absolute; top:14px; right:14px; width:40px; height:40px; display:grid; place-items:center; border-radius:50%; border:1px solid var(--line); background:#1f1f24; color:var(--soft); cursor:pointer; transition:border-color .2s,color .2s}
.svc__close:hover{border-color:#fff; color:#fff}
.svc__close svg{width:18px; height:18px}
.svc__bar{display:block; width:32px; height:3px; border-radius:2px; background:var(--red); margin-bottom:16px}
.svc__title{font-size:clamp(26px,3.4vw,32px); padding-right:44px}
.svc__lead{margin-top:12px; font-size:17px; line-height:1.6; color:var(--soft)}
.svc__sub{margin:22px 0 10px; font:600 12px/1 var(--body); letter-spacing:.14em; text-transform:uppercase; color:var(--red-2)}
.svc__points{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.svc__points li{display:grid; grid-template-columns:22px 1fr; gap:10px; font-size:15px; line-height:1.45; color:var(--text)}
.svc__points svg{width:22px; height:22px; padding:4px; border-radius:50%; background:rgba(227,6,19,.16); color:var(--red-2)}
.svc__note{margin-top:20px; padding:14px 16px; border-radius:12px; background:#0f0f12; border:1px solid var(--line); border-left:3px solid var(--red); font-size:14px; line-height:1.55; color:var(--muted)}
.svc__actions{display:flex; flex-wrap:wrap; gap:10px; margin-top:22px}
.svc__actions .btn{flex:1 1 200px}
.svc__guide{display:inline-flex; align-items:center; gap:6px; margin-top:16px; font-size:14px; font-weight:600; color:var(--soft); text-decoration:underline; text-underline-offset:3px; text-decoration-color:rgba(255,255,255,.3)}
.svc__guide:hover{color:#fff; text-decoration-color:var(--red)}
.svc__handle{display:none}
@media (max-width:560px){
  .svc{width:100vw; max-height:90vh; margin:auto 0 0}
  .svc__inner{max-height:90vh; border-radius:20px 20px 0 0; border-bottom:0; padding:14px 20px calc(20px + env(safe-area-inset-bottom)); transform:translateY(48px)}
  .svc__handle{display:block; width:40px; height:4px; border-radius:2px; background:#3a3a42; margin:0 auto 18px}
  .svc__close{top:10px; right:12px}
  .svc__title{font-size:26px}
  .svc__lead{font-size:16px}
  .svc__actions .btn{flex:1 1 100%}
}
@media (prefers-reduced-motion:reduce){
  .svc__inner,.svc::backdrop{transition:opacity .15s ease}
  .svc__inner{transform:none}
}
@media (max-width:1060px){ .services{grid-template-columns:repeat(3,1fr)} }
@media (max-width:780px){ .services{grid-template-columns:1fr 1fr} }
@media (max-width:560px){
  .services{grid-template-columns:1fr 1fr; gap:8px}
  .service{padding:14px 14px 16px; border-radius:12px}
  .service:hover{transform:none}
  .service::before{width:22px; margin-bottom:12px}
  .service h3{font-size:17px; line-height:1.12; margin:0}
  .service p{display:none}
  .service h3{padding-right:18px}
  .service__more{position:absolute; top:12px; right:12px; margin:0; padding:0; width:22px; height:22px; justify-content:center; border-radius:50%; background:rgba(227,6,19,.16)}
  .service__more span{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}
  .service__more svg{width:13px; height:13px}
}

/* SMART vs body shop */
.compare{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:clamp(28px,5vw,72px); align-items:center}
.compare__intro p{font-size:18px; color:var(--ink-muted); margin-top:16px}
.compare__intro p strong{color:var(--ink)}
.compare__cards{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.ccard{border-radius:var(--radius); padding:26px 22px; border:1px solid var(--paper-line); background:#fff}
.ccard h3{font-size:20px; margin-bottom:16px}
.ccard ul{list-style:none; margin:0; padding:0; display:grid; gap:12px}
.ccard li{display:flex; gap:10px; font-size:15px; line-height:1.45}
.ccard li svg{width:20px; height:20px; flex:none; margin-top:1px}
.ccard--old{color:var(--ink-muted)}
.ccard--old svg{color:#9b9ba3}
.ccard--new{background:var(--ink); color:#fff; border-color:var(--ink); box-shadow:0 24px 50px rgba(0,0,0,.18)}
.ccard--new h3 span{color:var(--red-2)}
.ccard--new svg{color:var(--red-2)}
@media (max-width:900px){ .compare{grid-template-columns:1fr} }
@media (max-width:520px){ .compare__cards{grid-template-columns:1fr} }

/* Steps */
.steps{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:16px; counter-reset:step}
.step{padding:28px 22px; border-radius:var(--radius); background:var(--card); border:1px solid var(--line)}
.step::before{counter-increment:step; content:"0" counter(step); display:block; font:600 44px/1 var(--display); color:var(--red); margin-bottom:18px}
.step h3{font-size:22px; margin-bottom:10px}
.step p{font-size:15px; color:var(--muted)}
.step a{color:#fff; font-weight:600}
.steps-cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:32px}
@media (max-width:1000px){ .steps{grid-template-columns:1fr 1fr} }
@media (max-width:560px){
  .steps{grid-template-columns:1fr; gap:10px}
  .step{display:grid; grid-template-columns:48px 1fr; column-gap:12px; padding:18px 18px 18px 16px; border-radius:12px}
  .step::before{grid-row:span 2; font-size:30px; margin:2px 0 0}
  .step h3{font-size:19px; margin-bottom:4px}
  .step p{font-size:14px; line-height:1.5}
  .steps-cta{flex-direction:column}
  .steps-cta .btn{width:100%}
}

/* Gallery */
.gallery{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.gallery figure{position:relative; margin:0; border-radius:var(--radius); overflow:hidden; background:#18181b}
.gallery button{all:unset; display:block; cursor:zoom-in; width:100%}
.gallery button:focus-visible{outline:3px solid var(--star); outline-offset:-3px}
.gallery img{width:100%; aspect-ratio:4/5; object-fit:cover; transition:transform .5s}
.gallery figure:hover img{transform:scale(1.03)}
.gallery figcaption{position:absolute; inset:auto 0 0 0; padding:40px 16px 14px; font-size:14px; font-weight:500; line-height:1.35;
  background:linear-gradient(transparent,rgba(0,0,0,.82)); pointer-events:none}
.gallery-more{margin-top:24px; text-align:center}
@media (max-width:1000px){ .gallery{grid-template-columns:repeat(3,1fr)} }
@media (max-width:700px){ .gallery{grid-template-columns:1fr 1fr; gap:10px} .gallery figure{border-radius:12px} .gallery figcaption{font-size:12px; padding:30px 10px 10px} }
.lightbox{border:0; padding:0; background:transparent; max-width:min(92vw,1100px); max-height:92vh}
.lightbox::backdrop{background:rgba(0,0,0,.88)}
.lightbox img{max-height:82vh; width:auto; margin:0 auto; border-radius:12px}
.lightbox p{color:#fff; text-align:center; margin-top:12px; font-size:15px}
.lightbox__close{position:fixed; top:16px; right:16px; width:48px; height:48px; border-radius:50%; border:1px solid rgba(255,255,255,.4); background:rgba(0,0,0,.5); color:#fff; font-size:26px; cursor:pointer}

/* About */
.about{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:clamp(28px,5vw,72px); align-items:center}
.about__media{position:relative}
.about__media img:first-child{border-radius:var(--radius); width:100%; aspect-ratio:4/3; object-fit:cover}
.about__media img:last-child{position:absolute; right:-14px; bottom:-28px; width:38%; aspect-ratio:3/4; object-fit:cover; border-radius:14px; border:5px solid var(--paper); box-shadow:0 18px 40px rgba(0,0,0,.25)}
.about h2{font-size:clamp(32px,4.4vw,52px); margin-bottom:18px}
.about p{font-size:17px; color:var(--ink-muted); margin-bottom:14px}
.stats{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:26px}
.stats div{padding:16px; border-radius:12px; background:#fff; border:1px solid var(--paper-line)}
.stats b{display:block; font:600 32px/1 var(--display); color:var(--ink)}
.stats span{display:block; font-size:13px; color:var(--ink-muted); margin-top:6px; line-height:1.3}
@media (max-width:900px){ .about{grid-template-columns:1fr} .about__media{margin-bottom:24px} }
@media (max-width:420px){ .stats b{font-size:26px} .stats div{padding:12px} }

/* Areas */
.areas{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(28px,5vw,64px); align-items:center}
.chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:24px; padding:0; list-style:none}
.chips li{padding:8px 14px; border-radius:999px; border:1px solid var(--line); font-size:14px; color:var(--soft); background:#141417}
.chips li{white-space:nowrap}
@media (max-width:560px){ .chips{gap:6px} .chips li{padding:6px 11px; font-size:13px} }
.map{border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); aspect-ratio:4/3; background:#141417}
.map iframe{width:100%; height:100%; border:0; filter:grayscale(.2) contrast(1.05)}
@media (max-width:900px){ .areas{grid-template-columns:1fr} }

/* Guide cards (homepage + blog) */
.gcards{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.gcard{position:relative; display:flex; flex-direction:column; border-radius:var(--radius); overflow:hidden; background:var(--card); border:1px solid var(--line); text-decoration:none; color:inherit; transition:border-color .2s,transform .2s}
.gcard:hover{border-color:rgba(227,6,19,.7); transform:translateY(-2px)}
.gcard img{width:100%; aspect-ratio:16/9; object-fit:cover; background:#1b1b1f}
.gcard__body{display:flex; flex-direction:column; gap:10px; padding:20px 20px 22px; flex:1}
.gcard__cat{font:600 12px/1 var(--body); letter-spacing:.12em; text-transform:uppercase; color:var(--red-2)}
.gcard h3{font-size:22px; line-height:1.12}
.gcard p{font-size:15px; color:var(--muted); line-height:1.55}
.gcard__meta{margin-top:auto; padding-top:6px; font-size:13px; color:var(--muted)}
.gcard__meta span{color:#fff; font-weight:600}
.guides-more{margin-top:28px; text-align:center}
@media (max-width:980px){ .gcards{grid-template-columns:1fr 1fr} }
@media (max-width:620px){
  .gcards{grid-template-columns:1fr; gap:12px}
  .gcard{display:grid; grid-template-columns:120px 1fr; border-radius:12px}
  .gcard img{height:100%; aspect-ratio:auto; min-height:120px}
  .gcard__body{padding:14px 14px 14px 14px; gap:6px}
  .gcard h3{font-size:18px}
  .gcard p{display:none}
  .gcard__meta{padding-top:2px; font-size:12px}
}

/* Quote band */
.quote{position:relative; overflow:hidden; background:radial-gradient(120% 140% at 0% 0%,#ff2d3a 0%,#e30613 38%,#8e0510 100%); color:#fff}
.quote__gun{position:absolute; right:3%; top:50%; transform:translateY(-50%) rotate(-8deg); height:130%; width:auto; opacity:.18; pointer-events:none}
.quote .wrap{position:relative; display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:32px 64px; align-items:center}
.quote h2{font-size:clamp(36px,5.4vw,66px)}
.quote p{font-size:18px; margin-top:14px; color:rgba(255,255,255,.9); max-width:560px}
.quote__btns{display:flex; flex-wrap:wrap; gap:12px; margin-top:26px}
.hours{background:rgba(0,0,0,.28); border:1px solid rgba(255,255,255,.2); border-radius:var(--radius); padding:24px}
.hours h3{font-size:20px; margin-bottom:12px}
.hours dl{display:grid; grid-template-columns:auto 1fr; gap:6px 18px; margin:0 0 16px; font-size:15px}
.hours dt{color:rgba(255,255,255,.8)} .hours dd{margin:0; font-weight:600; text-align:right}
.hours address{font-style:normal; font-size:15px; color:rgba(255,255,255,.9); border-top:1px solid rgba(255,255,255,.2); padding-top:14px}
@media (max-width:900px){ .quote .wrap{grid-template-columns:1fr} .quote__gun{height:80%; top:12%; transform:rotate(-8deg); right:-4%} }
@media (max-width:560px){
  .quote__btns{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
  .quote__btns .btn{min-height:46px; padding:0 8px; font-size:14px}
  .quote__btns .btn:nth-child(-n+2){grid-column:1 / -1; min-height:52px; font-size:15px}
  .hours{padding:20px}
}

/* Footer */
.footer{background:#050506; border-top:1px solid var(--line); padding:64px 0 28px; font-size:15px; color:var(--muted)}
.footer__grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px}
.footer__logo{width:220px; height:auto; margin-bottom:16px}
.footer h3{font-size:16px; color:#fff; margin-bottom:14px; letter-spacing:.06em}
.footer ul{list-style:none; margin:0; padding:0; display:grid; gap:8px}
.footer a{text-decoration:none} .footer a:hover{color:#fff}
.footer__legal{margin-top:48px; padding-top:22px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px 24px; font-size:13px; line-height:1.5}
.footer__legal a{color:#fff; text-decoration:underline; text-underline-offset:3px}
@media (max-width:900px){ .footer__grid{grid-template-columns:1fr 1fr} }
@media (max-width:520px){
  .footer{padding-top:48px}
  .footer__grid{grid-template-columns:1fr 1fr; gap:28px 20px}
  .footer__grid > div:first-child{grid-column:1 / -1}
  .footer__grid > div:nth-child(3){grid-column:1 / -1; order:3}
  .footer__logo{width:180px}
}

/* Mobile action bar */
.actionbar{display:none}
@media (max-width:760px){
  .actionbar{position:fixed; left:0; right:0; bottom:0; z-index:40; display:grid; grid-template-columns:1fr 1fr; gap:10px;
    padding:10px 12px calc(10px + env(safe-area-inset-bottom)); background:rgba(11,11,12,.92); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
    border-top:1px solid var(--line); transform:translateY(110%); transition:transform .3s}
  .actionbar .btn{min-height:48px; padding:0 12px}
  .show-bar .actionbar{transform:none}
  .footer{padding-bottom:calc(28px + 74px + env(safe-area-inset-bottom))}
}

/* ================= BLOG ================= */
body.blog{padding-top:var(--header-h)}
.crumbs{display:flex; flex-wrap:wrap; gap:6px; margin:0 0 18px; padding:0; list-style:none; font-size:14px; color:var(--muted)}
.crumbs li:not(:last-child)::after{content:"/"; margin-left:6px; color:#55555e}
.crumbs a{color:var(--soft); text-decoration:none} .crumbs a:hover{color:#fff}
.crumbs [aria-current]{color:var(--muted); display:inline-block; max-width:52ch; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; vertical-align:bottom}
.bhero{position:relative; overflow:hidden; padding:clamp(40px,6vw,76px) 0 clamp(28px,4vw,44px); border-bottom:1px solid var(--line)}
.bhero::before{content:""; position:absolute; left:-10%; right:-10%; top:-140px; height:380px; background:radial-gradient(50% 55% at 20% 50%,rgba(227,6,19,.22),transparent 70%); pointer-events:none}
.bhero .wrap{position:relative}
.bhero h1{font-size:clamp(34px,5vw,60px); max-width:18ch}
.bhero p.lead{margin-top:16px; font-size:18px; color:var(--soft); max-width:62ch}
.filters{display:flex; flex-wrap:wrap; gap:8px; margin-top:26px}
.filters button{border:1px solid var(--line); background:#141417; color:var(--soft); font:500 14px/1 var(--body); padding:10px 16px; border-radius:999px; cursor:pointer}
.filters button[aria-pressed="true"]{background:var(--red); border-color:var(--red); color:#fff}
.bindex{padding:clamp(36px,5vw,64px) 0 clamp(64px,8vw,110px)}
.gcard.is-hidden{display:none}
.gcard--feature{grid-column:1 / -1; display:grid; grid-template-columns:1.25fr 1fr}
.gcard--feature img{height:100%; aspect-ratio:auto; min-height:300px}
.gcard--feature .gcard__body{padding:32px; justify-content:center}
.gcard--feature h3{font-size:clamp(26px,3vw,36px)}
.gcard--feature p{font-size:16px}
@media (max-width:620px){
  .gcard--feature{grid-template-columns:1fr}
  .gcard--feature img{aspect-ratio:16/9; min-height:0}
  .gcard--feature .gcard__body{padding:18px}
  .gcard--feature p{display:block; font-size:15px}
}

.post-hero{position:relative; overflow:hidden; padding:clamp(28px,4vw,56px) 0 0}
.post-hero::before{content:""; position:absolute; left:-10%; right:-10%; top:-140px; height:380px; background:radial-gradient(50% 55% at 20% 50%,rgba(227,6,19,.22),transparent 70%); pointer-events:none}
.post-hero .wrap{position:relative; max-width:1080px}
.post-cat{display:inline-block; font:600 12px/1 var(--body); letter-spacing:.12em; text-transform:uppercase; color:#fff; background:var(--red); padding:7px 10px; border-radius:6px; text-decoration:none}
.post-hero h1{margin-top:16px; font-size:clamp(32px,4.8vw,58px); max-width:22ch}
.post-hero .lead{margin-top:16px; font-size:clamp(17px,1.6vw,20px); color:var(--soft); max-width:60ch}
.post-meta{display:flex; flex-wrap:wrap; align-items:center; gap:6px 16px; margin-top:20px; font-size:14px; color:var(--muted)}
.post-meta strong{color:#fff; font-weight:600}
.post-meta .dot{width:4px; height:4px; border-radius:50%; background:#55555e}
.post-img{margin:clamp(24px,3vw,36px) 0 0; position:relative; z-index:1}
.post-img img{width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:var(--radius); background:#18181b; box-shadow:0 30px 60px rgba(0,0,0,.45)}
.post-body{background:var(--paper); color:var(--ink); margin-top:calc(-1 * clamp(80px,12vw,180px)); padding:calc(clamp(80px,12vw,180px) + clamp(28px,4vw,48px)) 0 clamp(56px,8vw,96px)}
.post-grid{max-width:1080px; margin:0 auto; padding:0 20px; display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:56px; align-items:start}
.prose{font-size:18px; line-height:1.72; color:#2a2a30; max-width:720px}
.prose > * + *{margin-top:1.05em}
.prose h2{margin-top:1.9em; font-size:clamp(26px,2.6vw,34px); color:var(--ink); scroll-margin-top:calc(var(--header-h) + 20px)}
.prose h2 + *{margin-top:.7em}
.prose a{color:#b0040f; text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px}
.prose a:hover{color:var(--red)}
.prose strong{color:var(--ink)}
.prose ul,.prose ol{padding-left:1.3em}
.prose li + li{margin-top:.45em}
.prose li::marker{color:var(--red); font-weight:700}
.prose ul.cols{columns:3 150px; column-gap:24px}
.prose ul.cols li{margin:0 0 .35em}
.table-wrap{overflow-x:auto; border:1px solid var(--paper-line); border-radius:12px; background:#fff}
.prose table{width:100%; border-collapse:collapse; font-size:15px; line-height:1.45; min-width:520px}
.prose th,.prose td{padding:12px 14px; text-align:left; vertical-align:top; border-bottom:1px solid var(--paper-line)}
.prose thead th{background:var(--ink); color:#fff; font-weight:600}
.prose tbody th{font-weight:600; color:var(--ink); white-space:nowrap}
.prose tr:last-child th,.prose tr:last-child td{border-bottom:0}
.cta-box{margin:2em 0 0; padding:26px; border-radius:var(--radius); background:var(--ink); color:#fff; display:grid; gap:14px}
.cta-box h3{font-size:24px; color:#fff}
.cta-box p{color:#cfcfd6; font-size:16px; line-height:1.55}
.cta-box .row{display:flex; flex-wrap:wrap; gap:10px}
.faq{margin-top:2.4em}
.faq h2{margin-bottom:.8em}
.faq details{border-top:1px solid var(--paper-line); padding:4px 0}
.faq details:last-child{border-bottom:1px solid var(--paper-line)}
.faq summary{cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:16px; padding:16px 0; font-weight:600; color:var(--ink); font-size:17px; line-height:1.4}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; font:600 24px/1 var(--display); color:var(--red); flex:none}
.faq details[open] summary::after{content:"\2212"}
.faq details p{padding:0 0 18px; font-size:16px; line-height:1.65; color:#3a3a42}
.aside{position:sticky; top:calc(var(--header-h) + 24px); display:grid; gap:16px}
.toc{border:1px solid var(--paper-line); background:#fff; border-radius:14px; padding:20px}
.toc summary{list-style:none; cursor:default; font:600 13px/1 var(--body); letter-spacing:.12em; text-transform:uppercase; color:var(--red); margin-bottom:12px}
.toc summary::-webkit-details-marker{display:none}
.toc ol{margin:0; padding:0; list-style:none; display:grid; gap:10px; counter-reset:t}
.toc li{counter-increment:t; display:grid; grid-template-columns:24px 1fr; font-size:15px; line-height:1.35}
.toc li::before{content:counter(t,decimal-leading-zero); font:600 13px/1.5 var(--display); color:#9a9aa3}
.toc a{color:var(--ink); text-decoration:none} .toc a:hover{color:var(--red)}
.side-cta{border-radius:14px; background:var(--ink); color:#fff; padding:22px; display:grid; gap:12px}
.side-cta h3{font-size:22px}
.side-cta p{font-size:15px; color:#cfcfd6; line-height:1.5}
.side-cta .btn{width:100%}
.side-cta .stars{margin-top:2px}
.related{padding:clamp(56px,8vw,96px) 0}
.related h2{font-size:clamp(30px,4vw,44px); margin-bottom:28px}
@media (max-width:1000px){
  .post-grid{grid-template-columns:1fr; gap:0}
  .aside{position:static; order:-1; margin-bottom:28px}
  .side-cta{display:none}
  .toc summary{cursor:pointer; margin:0; display:flex; justify-content:space-between}
  .toc summary::after{content:"+"; font:600 20px/1 var(--display); color:var(--red)}
  .toc[open] summary{margin-bottom:12px}
  .toc[open] summary::after{content:"\2212"}
}
@media (max-width:560px){
  .prose{font-size:17px; line-height:1.68}
  .post-img{margin-left:-20px; margin-right:-20px}
  .post-img img{border-radius:0}
  .cta-box{padding:20px}
  .cta-box .btn{flex:1 1 100%}
  .crumbs [aria-current]{max-width:26ch}
}