:root{
  --soot:#17120f;
  --char:#241c17;
  --ash:#9d928a;
  --bone:#efe7dc;
  --ember:#e35d14;
  --brass:#d2a74b;
  --max:1120px;
  --display:"Barlow Condensed",Impact,"Arial Narrow",sans-serif;
  --body:"Lora",Georgia,serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--soot);color:var(--bone);font-family:var(--body);font-size:1.0625rem;line-height:1.65}
img,video{max-width:100%;display:block}
a{color:var(--brass)}
a:focus-visible,button:focus-visible{outline:3px solid var(--ember);outline-offset:3px}
h1,h2,h3{font-family:var(--display);font-weight:800;line-height:.92;letter-spacing:-.01em;margin:0 0 .4em;text-transform:uppercase}
h1{font-size:clamp(3.2rem,9.5vw,7.2rem)}
h2{font-size:clamp(2.2rem,5.5vw,4.2rem)}
h3{font-size:1.6rem;line-height:1.05}
p{margin:0 0 1.1em;max-width:62ch}
.wrap{max-width:var(--max);margin:0 auto;padding:0 20px}

/* header */
header{position:sticky;top:0;z-index:5;background:rgba(23,18,15,.92);backdrop-filter:blur(6px);border-bottom:1px solid #2e2520}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0}
.brand{font-family:var(--display);font-weight:800;font-size:1.5rem;text-decoration:none;color:var(--bone);text-transform:uppercase;letter-spacing:.02em}
.brand span{color:var(--ember)}
.nav ul{list-style:none;margin:0;padding:0;display:flex;gap:18px;flex-wrap:wrap}
.nav a{text-decoration:none;color:var(--ash);font-family:var(--display);font-size:1.1rem;text-transform:uppercase;letter-spacing:.04em}
.nav a:hover{color:var(--bone)}
.nav .sub{background:var(--ember);color:#fff;padding:7px 14px;border-radius:4px}
.nav .sub:hover{background:#ff6f1f;color:#fff}

/* hero */
.hero{position:relative;overflow:hidden;padding:48px 0 32px;background:
  radial-gradient(60% 50% at 70% 100%,rgba(227,93,20,.28),transparent 70%),
  radial-gradient(40% 40% at 10% 0%,rgba(210,167,75,.08),transparent 70%),var(--soot)}
.hero-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:32px;align-items:end}
.hero h1{margin-bottom:.25em}
.hero h1 .line2{color:var(--ember);display:block}
.lede{font-size:1.25rem;max-width:34ch;color:var(--bone)}
.cta{display:inline-flex;align-items:center;gap:10px;background:var(--ember);color:#fff;text-decoration:none;font-family:var(--display);font-size:1.35rem;text-transform:uppercase;letter-spacing:.04em;padding:14px 22px;border-radius:4px;margin:8px 12px 8px 0}
.cta:hover{background:#ff6f1f}
.cta.alt{background:transparent;border:2px solid var(--brass);color:var(--brass)}
.cta.alt:hover{background:rgba(210,167,75,.12)}
.phone{width:min(100%,320px);margin:0 auto;border-radius:22px;overflow:hidden;box-shadow:0 30px 60px rgba(0,0,0,.6),0 0 0 6px #0c0907}
.phone video,.phone iframe{aspect-ratio:9/16;width:100%;background:#000;object-fit:cover;border:0;display:block}

/* sections */
section{padding:72px 0;border-top:1px solid #2a2119}
.kicker{font-family:var(--display);color:var(--ember);font-size:1.25rem;text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}

/* offer */
.offer{background:linear-gradient(180deg,#2a1a0e,var(--soot));border-top:3px solid var(--ember)}
.offer h2 .big{display:block;color:var(--brass);font-size:1.4em}
.steps{counter-reset:s;list-style:none;padding:0;margin:24px 0;display:grid;gap:14px;max-width:62ch}
.steps li{counter-increment:s;display:grid;grid-template-columns:56px 1fr;gap:14px;align-items:start}
.steps li::before{content:counter(s);font-family:var(--display);font-weight:800;font-size:2.6rem;line-height:1;color:var(--ember)}
.steps b{font-family:var(--display);font-size:1.3rem;text-transform:uppercase;letter-spacing:.03em;display:block}
.fine{color:var(--ash);font-size:.95rem}

/* about */
.portrait{border-radius:50%;width:min(100%,360px);aspect-ratio:1;object-fit:cover;box-shadow:0 0 0 8px #2e2520}
blockquote{margin:0 0 1em;padding-left:18px;border-left:4px solid var(--ember);font-size:1.3rem;line-height:1.4;max-width:40ch}

/* cards */
.card{background:var(--char);border:1px solid #352a22;padding:22px;border-radius:6px}
.card img{border-radius:4px;margin-bottom:14px}
.card h3{margin-bottom:.3em}
.card p{font-size:1rem;color:#d8cfc4}
.card a.more{font-family:var(--display);text-transform:uppercase;letter-spacing:.04em;font-size:1.1rem}

/* video row */
.yt{aspect-ratio:16/9;width:100%;border:0;border-radius:6px;background:#000}
.shorts{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.shorts iframe{aspect-ratio:9/16;width:100%;border:0;border-radius:8px;background:#000}

/* contact */
.contact dl{display:grid;grid-template-columns:max-content 1fr;gap:10px 24px;max-width:62ch}
.contact dt{font-family:var(--display);text-transform:uppercase;color:var(--ash);letter-spacing:.04em}
.contact dd{margin:0}
.social{display:flex;gap:14px;flex-wrap:wrap;margin-top:18px}
.social a{font-family:var(--display);text-transform:uppercase;letter-spacing:.04em;text-decoration:none;border:1px solid #3d3129;padding:8px 14px;border-radius:4px;color:var(--bone)}
.social a:hover{border-color:var(--brass)}

footer{padding:40px 0;color:var(--ash);font-size:.95rem;border-top:1px solid #2a2119}
footer p{max-width:none}

@media (max-width:820px){
  .hero-grid,.two,.three,.shorts{grid-template-columns:1fr}
  .hero{padding-top:28px}
  .nav ul{display:none}
  .nav{padding:10px 0}
  .brand{font-size:1.25rem;white-space:nowrap}
  .nav .sub{display:inline-block;font-size:.95rem;padding:7px 11px;white-space:nowrap}
  .lede{font-size:1.1rem}
  .cta{font-size:1.15rem;padding:12px 18px;display:inline-flex}
  section{padding:52px 0}
  .phone{margin-top:8px}
}