/* Service pages: same look as the home page (template tokens: #050505/#070707, orange #F16B0D→#E61416, Host Grotesk) */
:root{--bg:#070707;--o1:#F16B0D;--o2:#E61416;--mute:rgba(255,255,255,.7);--line:rgba(255,255,255,.2);--pad:4vw}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:"Host Grotesk",Arial,sans-serif;font-weight:400;background:#050505;color:#fff;overflow-x:hidden;-webkit-font-smoothing:antialiased}
::selection{color:#070707;background:#f16b0d}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
h1,h2,h3{font-weight:400;line-height:1.1}

/* header */
.hdr{position:fixed;inset:0 0 auto 0;z-index:99;display:flex;align-items:center;justify-content:space-between;padding:1.5vw var(--pad);transition:transform .5s cubic-bezier(.16,1,.3,1),backdrop-filter .5s}
.hdr.solid{backdrop-filter:blur(14px)}
.hdr.hide{transform:translateY(-100%)}
.hdr img{width:14.9vw}
.pill{position:relative;display:inline-flex;align-items:center;gap:.9vw;height:3.5vw;padding:0 2vw;border-radius:999px;background:#fff;color:#111;font-size:1.15vw;font-weight:500;white-space:nowrap;border:1px solid rgba(255,255,255,.2);overflow:hidden;cursor:pointer;transition:color .5s,background .5s}
.pill i{width:.5vw;height:.5vw;border-radius:50%;background:#070707;transition:transform .4s,background .4s}
.pill:hover{background:linear-gradient(90deg,var(--o1),var(--o2));color:#fff;border-color:transparent}
.pill:hover i{background:#fff}
.pill.ghost{background:rgba(255,255,255,.08);color:#fff}
.pill.ghost i{background:#fff}

/* hero */
.hero{position:relative;min-height:max(100vh,50vw);display:flex;flex-direction:column;justify-content:flex-end;padding:9vw var(--pad) 5vw;overflow:hidden;
  background-color:#180d08;background-image:radial-gradient(65% 55% at 92% 6%,#F0640D 0%,rgba(240,100,13,0) 65%),radial-gradient(60% 55% at 4% 82%,#EC690F 0%,rgba(236,105,15,0) 65%),radial-gradient(75% 80% at 48% 42%,#B01205 0%,rgba(176,18,5,0) 70%),linear-gradient(180deg,#D8470A 0%,#C0300A 28%,#B01205 46%,#7A1C08 68%,#2A1108 88%,#180D08 100%)}
.hero:after{content:"";position:absolute;inset:auto 0 0 0;height:30%;background:linear-gradient(transparent,var(--bg));pointer-events:none}
.hero>*{position:relative;z-index:2}
.eyebrow{font-size:1.25vw;margin-bottom:2vw;color:#fff}
.eyebrow a{opacity:.7}.eyebrow a:hover{opacity:1}
.hero h1{font-size:8vw;letter-spacing:-.02em;max-width:58vw}
.hero-row{display:flex;flex-direction:column;align-items:flex-start;gap:2.4vw;margin-top:2.6vw}
.hero-row p{font-size:1.5vw;line-height:1.4;max-width:34vw}
.hero-cta{display:flex;gap:1vw;flex-wrap:wrap}
.hero-shot{position:absolute!important;right:var(--pad);top:11vw;width:30vw;height:36vw;border-radius:.8vw;overflow:hidden;box-shadow:0 2vw 6vw rgba(0,0,0,.4)}
.hero-shot img{width:100%;height:100%;object-fit:cover}

/* sections */
.sec{background:var(--bg);padding:8vw var(--pad) 0}
.sec h2{font-size:5.5vw;letter-spacing:-.02em;margin-bottom:1.5vw}
.sec .sub{font-size:1.25vw;color:var(--mute);max-width:46vw;line-height:1.5;margin-bottom:4vw}
.grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}
.grid .it{padding:2.5vw 2.5vw 3vw 0;border-bottom:1px solid var(--line);min-height:15vw}
.grid .it:not(:nth-child(3n+1)){padding-left:2.5vw;border-left:1px solid var(--line)}
.num{font-size:1.1vw;color:var(--o1);margin-bottom:2.5vw}
.it h3{font-size:2vw;margin-bottom:1vw}
.it p{font-size:1.2vw;line-height:1.5;color:var(--mute)}

.steps{border-top:1px solid var(--line)}
.step{display:grid;grid-template-columns:8vw 28vw 1fr;gap:2vw;align-items:baseline;padding:2.2vw 0;border-bottom:1px solid var(--line)}
.step span{font-size:1.25vw;color:rgba(255,255,255,.35);letter-spacing:.05em}
.step h3{font-size:1.8vw}
.step p{font-size:1.2vw;color:var(--mute);line-height:1.5}

.band{display:grid;grid-template-columns:1fr 1fr;gap:2.5vw;margin-top:8vw}
.band img{width:100%;height:27vw;object-fit:cover;border-radius:.6vw}

.faq{border-top:1px solid var(--line);max-width:62vw}
details{border-bottom:1px solid var(--line)}
summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:2vw;padding:1.8vw 0;font-size:1.6vw}
summary::-webkit-details-marker{display:none}
summary:after{content:"+";font-size:2.2vw;line-height:1;transition:transform .3s;color:var(--o1)}
details[open] summary:after{transform:rotate(45deg)}
details p{font-size:1.2vw;line-height:1.6;color:var(--mute);padding:0 4vw 2vw 0}

.more{display:grid;grid-template-columns:repeat(5,1fr);gap:1.2vw}
.more a{border:1px solid var(--line);border-radius:.6vw;padding:1.4vw;font-size:1.25vw;display:flex;justify-content:space-between;gap:.5vw;transition:background .4s,border-color .4s}
.more a:hover{background:linear-gradient(90deg,var(--o1),var(--o2));border-color:transparent}

/* contact */
.contact{display:grid;grid-template-columns:1fr 1.3fr;gap:5vw;align-items:start}
form{display:grid;grid-template-columns:1fr 1fr;gap:1.2vw}
form .full{grid-column:1/-1}
input,textarea{width:100%;font:inherit;font-size:1.15vw;color:#fff;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.15);border-radius:999px;padding:1.1vw 1.8vw;outline:0;transition:border-color .3s}
textarea{border-radius:1.6vw;resize:vertical;min-height:9vw}
input::placeholder,textarea::placeholder{color:rgba(255,255,255,.55)}
input:focus,textarea:focus{border-color:var(--o1)}
.hp{position:absolute;left:-9999px}
#msg{font-size:1.15vw;margin-left:1vw;color:#ffb27a}
button.pill{font-family:inherit}

/* footer */
footer{position:relative;margin-top:8vw;background:var(--bg);overflow:hidden;padding:0 var(--pad)}
footer>img{position:absolute;left:0;right:0;bottom:-5vw;width:100%}
.fcard{position:relative;z-index:1;border:1px solid rgba(255,255,255,.3);border-radius:2.2vw;background:rgba(0,0,0,.05);backdrop-filter:blur(30px);padding:3vw;display:flex;flex-direction:column;gap:5vw}
.ftop{display:flex;justify-content:space-between;align-items:flex-start;gap:4vw}
.ftop img{width:27.3vw}
.ftop p{font-size:3.4vw;line-height:1.15;text-align:right;width:75%;margin-bottom:1.5vw}
.ftop div{display:flex;flex-direction:column;align-items:flex-end}
.fbot{display:flex;justify-content:space-between;align-items:flex-end;font-size:1.25vw;line-height:1.8}
.fbot h6{font-weight:400;text-transform:uppercase;margin-bottom:1vw;font-size:1.25vw}
.fbot a:hover{opacity:.7}
.socials{display:flex;gap:1vw}
.socials a{width:3.2vw;height:3.2vw;border:1px solid rgba(255,255,255,.4);border-radius:50%;display:grid;place-items:center}
.socials img{width:1.2vw}
.copy{position:relative;z-index:1;display:flex;justify-content:space-between;padding:2vw 0;font-size:1vw}

/* legal + small bits */
.hero.short{min-height:60vh}
.legal .lg{max-width:62vw;padding:2.2vw 0;border-top:1px solid var(--line)}
.legal .lg h3{font-size:1.8vw;margin-bottom:1vw}
.legal .lg p{font-size:1.2vw;line-height:1.65;color:var(--mute);margin-bottom:.8vw}
.legal a,.note a,.copy a{text-decoration:underline;text-underline-offset:.2em}
.note{font-size:1vw;color:var(--mute);margin-top:-.4vw}
.copy a:hover{opacity:.7}
/* reveal */
.rv{opacity:0;transform:translateY(40px);transition:opacity 1s cubic-bezier(.16,1,.3,1),transform 1s cubic-bezier(.16,1,.3,1)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}}

/* tablet */
@media (max-width:1025px){
  :root{--pad:5vw}
  .hero.short{min-height:50vh}.legal .lg{max-width:100%;padding:5vw 0}.legal .lg h3{font-size:4vw}.legal .lg p{font-size:2.8vw}.note{font-size:2.3vw}
  .hdr{padding:3vw var(--pad)}.hdr img{width:31vw}
  .pill{height:8vw;padding:0 3.5vw;font-size:3vw;gap:1.6vw}.pill i{width:1.5vw;height:1.5vw}
  .hero{padding-top:28vw;padding-bottom:10vw}.hero h1{font-size:12vw;max-width:100%}.eyebrow{font-size:2.6vw}
  .hero-cta{gap:2.5vw}
  .hero-row{flex-direction:column;align-items:flex-start;gap:5vw}.hero-row p{font-size:3vw;max-width:80%}
  .hero-shot{display:none}
  .sec{padding-top:15vw}.sec h2{font-size:7vw}.sec .sub{font-size:2.6vw;max-width:90%}
  .grid{grid-template-columns:1fr 1fr}
  .grid .it{min-height:0;padding:5vw 4vw 6vw 0}
  .grid .it:not(:nth-child(3n+1)){padding-left:0;border-left:0}
  .grid .it:nth-child(even){padding-left:4vw;border-left:1px solid var(--line)}
  .num{font-size:2.4vw;margin-bottom:3vw}.it h3{font-size:3.8vw}.it p{font-size:2.6vw}
  .step{grid-template-columns:12vw 1fr;gap:1vw 3vw;padding:4vw 0}.step h3{font-size:3.8vw}.step p{grid-column:2;font-size:2.6vw}.step span{font-size:2.4vw}
  .band img{height:35vw}
  .faq{max-width:100%}summary{font-size:3.4vw;padding:4vw 0}summary:after{font-size:5vw}details p{font-size:2.6vw;padding-bottom:4vw}
  .more{grid-template-columns:1fr 1fr}.more a{font-size:2.8vw;padding:3vw}
  .contact{grid-template-columns:1fr;gap:8vw}
  input,textarea{font-size:2.6vw;padding:2.6vw 4vw}textarea{border-radius:4vw;min-height:24vw}#msg{font-size:2.6vw}
  .ftop{flex-direction:column-reverse;align-items:center;gap:6vw}.ftop img{width:42.3vw}.ftop p{font-size:5vw;text-align:center;width:100%}.ftop div{align-items:center}
  .fcard{padding:6vw;border-radius:5vw}.fbot{flex-direction:column;align-items:center;text-align:center;gap:6vw;font-size:2.6vw}.fbot h6{font-size:2.6vw}
  .socials a{width:8vw;height:8vw}.socials img{width:3vw}.copy{font-size:2.4vw}
}
@media (max-width:640px){
  .legal .lg h3{font-size:5.8vw}.legal .lg p{font-size:4vw}.note{font-size:3.4vw}
  .hdr{padding:4vw var(--pad)}.hdr img{width:32vw;flex-shrink:0}.hdr .pill{padding:0 3.4vw}
  .pill{height:12vw;padding:0 5vw;font-size:4.2vw;gap:2.4vw}.pill i{width:2.3vw;height:2.3vw}
  .hero h1{font-size:15vw}.eyebrow{font-size:4vw}.hero-row p{font-size:4.5vw;max-width:100%}
  .sec h2{font-size:9vw}.sec .sub{font-size:4.2vw;max-width:100%;margin-bottom:8vw}
  .grid{grid-template-columns:1fr}
  .grid .it:nth-child(even){padding-left:0;border-left:0}
  .num{font-size:3.6vw}.it h3{font-size:5.8vw}.it p{font-size:4vw}
  .step{grid-template-columns:1fr;padding:6vw 0}.step p{grid-column:1}.step h3{font-size:5.8vw}.step span{font-size:3.6vw}
  .band{grid-template-columns:1fr}.band img{height:55vw}
  summary{font-size:5vw}summary:after{font-size:7vw}details p{font-size:4vw}
  .more a{font-size:4vw;padding:4vw}
  form{grid-template-columns:1fr}
  input,textarea{font-size:4vw;padding:4vw 6vw}textarea{border-radius:6vw;min-height:36vw}#msg{font-size:4vw;display:block;margin:3vw 0 0}
  .ftop p{font-size:7.5vw}.ftop img{width:57.3vw}.fbot,.fbot h6{font-size:4vw}.socials a{width:11vw;height:11vw}.socials img{width:4vw}.copy{flex-direction:column;align-items:center;gap:1vw;font-size:3.4vw}
}
