/* H&H Smash Repairs. Premium dark site in his charcoal / off-white / orange.
   Signature: the logo's roofline angle, used as a clipped photo edge and an orange "crease" line.
   Fonts: Poppins (headings, buttons), Inter (body). Barlow Condensed only inside the logo. */
:root{
  --ink:#111111; --ink-2:#181818; --ink-3:#222222; --line-d:rgba(255,255,255,.1);
  --paper:#f0f0e8; --paper-2:#ffffff; --line-l:rgba(24,24,24,.12);
  --orange:#f05828; --orange-2:#ff7a4d; --orange-dark:#d94a1c;
  --text-d:#f2f2f0; --muted-d:#a8a8a2; --text-l:#181818; --muted-l:#5c5c58;
  --wrap:72vw; --r:16px; --h:'Poppins',system-ui,sans-serif; --b:'Inter',system-ui,sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--b);background:var(--ink);color:var(--text-d);line-height:1.6;font-size:16px;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px;border-radius:4px}
.wrap{width:var(--wrap);max-width:1240px;margin:0 auto}
@media (max-width:1279px){:root{--wrap:86vw}}
@media (max-width:820px){:root{--wrap:calc(100vw - 44px)}}
.sr{position:absolute;left:-9999px}
.skip{position:absolute;left:-9999px;top:0;background:var(--orange);color:#fff;padding:8px 12px}
.skip:focus{left:8px;z-index:100}

.sec{padding:120px 0}
@media (max-width:820px){.sec{padding:80px 0}}
.light{background:var(--paper);color:var(--text-l)}
.light .muted{color:var(--muted-l)}
.muted{color:var(--muted-d)}
.tag{display:inline-flex;align-items:center;gap:12px;font-family:var(--h);font-weight:600;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--orange);margin-bottom:20px}
.tag::before{content:"";width:34px;height:2px;background:var(--orange);transform:skewY(-12deg)}
.light .tag{color:var(--orange-dark)}
h1,h2,h3{font-family:var(--h);line-height:1.04;letter-spacing:-.015em;text-wrap:balance}
h2{font-size:clamp(34px,4.2vw,58px);font-weight:800}
h2 em,h1 em{font-style:normal;color:var(--orange);position:relative}
h3{font-size:22px;font-weight:700}
.lead{font-size:clamp(17px,1.3vw,19px);max-width:56ch}
.head{max-width:680px;margin-bottom:64px}
.head .lead{margin-top:18px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;white-space:nowrap;font-family:var(--h);font-weight:700;font-size:16px;padding:16px 28px;border-radius:8px;border:2px solid transparent;text-decoration:none;cursor:pointer;transition:transform .25s var(--ease),background .2s,color .2s,border-color .2s,box-shadow .25s}
.btn .arr{display:inline-block;transition:transform .25s var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn:hover .arr{transform:translateX(4px)}
.btn-brand{background:var(--orange);color:#fff;box-shadow:0 10px 30px -12px rgba(240,88,40,.7)}
.btn-brand:hover{background:var(--orange-2)}
.btn-ghost{border-color:rgba(255,255,255,.3);color:#fff;background:transparent}
.btn-ghost:hover{border-color:#fff}
.light .btn-ghost{border-color:rgba(24,24,24,.3);color:var(--ink)}
.light .btn-ghost:hover{border-color:var(--ink)}
.btn-dark{background:var(--ink);color:#fff}
.btns{display:flex;flex-wrap:wrap;gap:14px;align-items:center}

/* Reveal + stagger */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}
[data-delay="1"]{transition-delay:.1s}[data-delay="2"]{transition-delay:.2s}[data-delay="3"]{transition-delay:.3s}[data-delay="4"]{transition-delay:.4s}[data-delay="5"]{transition-delay:.5s}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}*{animation:none!important}}

/* Header */
.site-header{position:fixed;inset:0 0 auto 0;z-index:50;transition:background .3s,border-color .3s;border-bottom:1px solid transparent}
.site-header.solid{background:rgba(17,17,17,.9);backdrop-filter:blur(12px);border-color:var(--line-d)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;height:84px;gap:24px}
.brand svg{width:170px;height:auto;display:block}
.nav{display:flex;align-items:center;gap:30px}
.nav a{text-decoration:none;font-family:var(--h);font-weight:600;font-size:15px;color:#d8d8d4;transition:color .2s;position:relative}
.nav a:not(.btn)::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:var(--orange);transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease)}
.nav a:not(.btn):hover::after{transform:scaleX(1)}
.nav a.btn,.nav a.btn:hover{color:#fff}
.nav .btn{padding:11px 20px;font-size:14px}
.nav-toggle{display:none;background:none;border:0;width:44px;height:44px;cursor:pointer}
.nav-toggle span:not(.sr){display:block;width:24px;height:2px;background:#fff;margin:5px auto}
@media (max-width:1180px){
  .nav{position:fixed;top:84px;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:var(--ink);border-bottom:1px solid var(--line-d);padding:8px 24px 24px;transform:translateY(-12px);opacity:0;visibility:hidden;pointer-events:none;transition:none}
  .nav.open{opacity:1;visibility:visible;transform:none;pointer-events:auto;transition:opacity .25s,transform .25s}
  .nav a{padding:16px 0;border-bottom:1px solid var(--line-d);font-size:18px;text-align:center}
  .nav a:not(.btn)::after{display:none}
  .nav .btn{margin-top:18px;justify-content:center;border-bottom:0}
  .nav-toggle{display:block}
}

/* Hero: split, photo clipped on the roofline angle, orange crease, floating rating card */
.hero{position:relative;padding:150px 0 0;overflow:hidden;background:radial-gradient(1200px 600px at 20% 0%,#1e1e1e,var(--ink) 60%)}
.hero-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:48px;align-items:center}
.hero h1{font-size:clamp(44px,5.6vw,84px);font-weight:800}
.hero h1 .line{display:block;overflow:hidden;padding-bottom:.06em}
.hero h1 .line>span{display:inline-block;transform:translateY(110%);animation:rise 1s var(--ease) forwards}
.hero h1 .line:nth-child(2)>span{animation-delay:.1s}
.hero h1 .line:nth-child(3)>span{animation-delay:.2s}
@keyframes rise{to{transform:none}}
.hero .lead{margin:26px 0 36px;color:#d6d6d2}
.hero-visual{position:relative;align-self:stretch;min-height:560px}
.hero-photo{position:absolute;inset:0 -6vw 0 0;clip-path:polygon(0 12%,100% 0,100% 100%,0 100%);overflow:hidden;will-change:transform}
.hero-photo img{width:100%;height:118%;object-fit:cover;object-position:60% 60%;transform:scale(1.08);animation:slowzoom 10s ease-out forwards}
@keyframes slowzoom{to{transform:scale(1)}}
.hero-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(17,17,17,.75),rgba(17,17,17,0) 45%),linear-gradient(0deg,rgba(17,17,17,.6),rgba(17,17,17,0) 40%)}
.crease{position:absolute;left:-8%;right:-8%;top:12%;height:3px;background:var(--orange);transform:rotate(-6.4deg);transform-origin:left center;box-shadow:0 0 24px rgba(240,88,40,.6)}
.float-card{position:absolute;left:-24px;bottom:48px;background:rgba(24,24,24,.9);backdrop-filter:blur(10px);border:1px solid var(--line-d);border-radius:var(--r);padding:18px 22px;text-decoration:none;display:grid;gap:2px;min-width:200px;box-shadow:0 30px 60px -30px rgba(0,0,0,.8)}
.float-card .stars{color:var(--orange);letter-spacing:2px;font-size:14px}
.float-card strong{font-family:var(--h);font-size:22px;font-weight:800}
.float-card .muted{font-size:13px}
.float-card:hover{border-color:var(--orange)}

/* Stats bar */
.stats{border-top:1px solid var(--line-d);border-bottom:1px solid var(--line-d);background:var(--ink-2)}
.stats ul{list-style:none;display:grid;grid-template-columns:repeat(4,1fr)}
.stats li{padding:34px 24px;border-left:1px solid var(--line-d)}
.stats li:first-child{border-left:0}
.stats strong{display:block;font-family:var(--h);font-weight:800;font-size:34px;line-height:1;color:#fff;margin-bottom:8px}
.stats span:not([data-count]){font-size:14px;color:var(--muted-d)}

/* Services: tiles with an orange crease that slides in on hover */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.svc{position:relative;display:block;background:var(--paper-2);border:1px solid var(--line-l);border-radius:var(--r);padding:34px 30px 30px;text-decoration:none;color:inherit;overflow:hidden;transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .3s}
.svc::before{content:"";position:absolute;left:0;top:0;width:100%;height:4px;background:var(--orange);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.svc:hover{transform:translateY(-6px);box-shadow:0 30px 50px -30px rgba(24,24,24,.35);border-color:transparent}
.svc:hover::before{transform:scaleX(1)}
.svc .n{font-family:var(--h);font-weight:800;font-size:13px;letter-spacing:.14em;color:var(--orange-dark)}
.svc h3{margin:16px 0 10px;font-size:24px}
.svc p{color:var(--muted-l);font-size:15px}
.svc .go{display:inline-flex;align-items:center;gap:8px;margin-top:22px;font-family:var(--h);font-weight:700;font-size:14px;color:var(--ink)}
.svc .arr{transition:transform .25s var(--ease)}
.svc:hover .arr{transform:translateX(4px)}

/* Gallery: asymmetric, one large, hover lift + caption slide */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:220px;gap:16px}
.gallery figure{position:relative;margin:0;overflow:hidden;border-radius:var(--r);background:var(--ink-3)}
.g1{grid-column:span 2;grid-row:span 2}
.g2{grid-column:span 2}
.g3,.g4{grid-column:span 1}
.gallery img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.gallery figure:hover img{transform:scale(1.05)}
.gallery figcaption{position:absolute;left:0;right:0;bottom:0;padding:40px 20px 18px;background:linear-gradient(0deg,rgba(17,17,17,.85),transparent);font-family:var(--h);font-weight:600;font-size:14px;color:#fff;transform:translateY(8px);opacity:.85;transition:.4s var(--ease)}
.gallery figure:hover figcaption{transform:none;opacity:1}

/* Timeline that draws itself as it reveals */
.timeline{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:40px;position:relative;padding-top:34px;counter-reset:s}
.timeline::before{content:"";position:absolute;left:0;right:0;top:10px;height:2px;background:var(--line-l)}
.timeline li{position:relative}
.timeline .dot{position:absolute;left:0;top:-34px;width:22px;height:22px;border-radius:50%;background:var(--paper);border:3px solid var(--orange);transform:scale(0);transition:transform .5s var(--ease) .3s}
.timeline li.in .dot{transform:scale(1)}
.timeline li::before{counter-increment:s;content:"0" counter(s);font-family:var(--h);font-weight:800;font-size:13px;letter-spacing:.14em;color:var(--orange-dark)}
.timeline h3{margin:10px 0 8px}
.timeline p{color:var(--muted-l);font-size:15px}

/* Reviews: centred grid */
.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.review{background:var(--ink-2);border:1px solid var(--line-d);border-radius:var(--r);padding:30px 28px;transition:transform .35s var(--ease),border-color .3s}
.review:hover{transform:translateY(-6px);border-color:rgba(240,88,40,.5)}
.review .stars{color:var(--orange);letter-spacing:2px;font-size:14px;margin-bottom:14px}
.review p{font-size:16px;color:#e4e4e0}
.review footer{margin-top:16px;font-family:var(--h);font-weight:600;font-size:14px;color:var(--muted-d)}
.reviews-sec .btns{justify-content:flex-start;margin-top:36px}

/* Visit */
.visit{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.hours{list-style:none;margin-top:28px;max-width:420px}
.hours li{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--line-l)}
.map{aspect-ratio:4/3;border:0;width:100%;border-radius:var(--r)}

/* CTA */
.cta{position:relative;overflow:hidden;text-align:center;background:var(--ink-2)}
.cta::before{content:"";position:absolute;left:-10%;right:-10%;top:50%;height:3px;background:var(--orange);transform:rotate(-6.4deg);opacity:.35}
.cta .gem{position:absolute;left:50%;top:50%;width:760px;height:760px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(240,88,40,.2),transparent 65%);pointer-events:none}
.cta .wrap{position:relative;max-width:760px}
.cta .tag{justify-content:center}
.cta .lead{margin:18px auto 34px;color:#d6d6d2}
.cta .btns{justify-content:center}

/* Footer */
.site-footer{background:#0c0c0c;padding:72px 0 120px;border-top:1px solid var(--line-d);font-size:15px;color:#d8d8d4}
.site-footer .grid-3{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:40px;align-items:start}
.site-footer a{color:#f2f2f0;text-decoration:none}
.site-footer a:hover{color:var(--orange)}
.site-footer .eyebrow{font-family:var(--h);font-weight:600;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:#8a8a84;margin-bottom:12px}
.site-footer .links{list-style:none}
.site-footer .links li{padding:5px 0}
.site-footer .hours li{border-color:var(--line-d)}
.footer-badge svg{width:120px;height:120px;margin-bottom:16px}
.legal{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:48px;padding-top:24px;border-top:1px solid var(--line-d);color:#8a8a84;font-size:13px}

.callbar{display:none}

@media (max-width:1100px){
  body{text-align:center}
  .tag,.btns,.hero-meta{justify-content:center}
  .lead,.hours,.head,.hero h1{margin-left:auto;margin-right:auto}
  .hero-copy{padding-bottom:56px}
  .crease{top:9%;transform:rotate(-3.5deg)}
  .hero-photo{clip-path:polygon(0 12%,100% 2%,100% 100%,0 100%)}
  .reviews{grid-template-columns:1fr 1fr}
  .reviews-sec .btns{justify-content:center}
  .hero-grid{grid-template-columns:1fr;gap:40px}
  .hero-visual{min-height:440px}
  .hero-photo{inset:0 -8vw 0 -8vw}
  .float-card{left:50%;transform:translateX(-50%);text-align:center}
  .reveal.float-card{transform:translate(-50%,28px)}.reveal.float-card.in{transform:translateX(-50%)}
  .svc-grid{grid-template-columns:1fr 1fr}
  .stats ul{grid-template-columns:1fr 1fr}
  .stats li:nth-child(3){border-left:0}
  .stats li:nth-child(n+3){border-top:1px solid var(--line-d)}
  .timeline{grid-template-columns:1fr;gap:28px;padding-top:0;padding-left:34px}
  .timeline::before{left:10px;right:auto;top:0;bottom:0;width:2px;height:auto}
  .timeline .dot{left:-34px;top:0}
  .visit{grid-template-columns:1fr}
}
@media (max-width:820px){
  .hero{padding-top:120px}
  .hero h1{margin:0 auto}
  .hero-visual{min-height:380px}
  .float-card{left:50%;transform:translateX(-50%);bottom:24px;text-align:center}
  .reveal.float-card{transform:translate(-50%,28px)}.reveal.float-card.in{transform:translateX(-50%)}
  .gallery{grid-template-columns:1fr 1fr;grid-auto-rows:180px}
  .g1{grid-column:span 2}.g2{grid-column:span 2}
  .timeline{text-align:left}
  .site-footer .grid-3{grid-template-columns:1fr;gap:36px}
  .footer-badge svg{margin:0 auto 16px}
  .legal{flex-direction:column;align-items:center}
  .callbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;gap:8px;padding:10px 16px;background:rgba(17,17,17,.95);border-top:1px solid var(--line-d);backdrop-filter:blur(10px)}
  .callbar .btn{flex:1;padding:12px 10px;font-size:15px}
}
@media (max-width:600px){
  .svc-grid,.reviews{grid-template-columns:1fr}
  .stats ul{grid-template-columns:1fr}
  .stats li{border-left:0;border-top:1px solid var(--line-d);padding:22px 0}
  .stats li:first-child{border-top:0}
  .review{flex-basis:300px}
  .gallery{grid-auto-rows:200px}
  .g1,.g2,.g3,.g4{grid-column:span 2}
}

/* Hero copy fades in with CSS instead of waiting for main.js, so the first screen (and LCP) doesn't
   depend on JavaScript. Same rise and stagger as .reveal; `translate` leaves the float card's own transform alone. */
.hero .reveal{opacity:1;transform:none;transition:none;animation:herofade .8s var(--ease) both}
.hero .reveal[data-delay="2"]{animation-delay:.2s}.hero .reveal[data-delay="3"]{animation-delay:.3s}.hero .reveal[data-delay="4"]{animation-delay:.4s}
@keyframes herofade{from{opacity:0;translate:0 28px}}
@media (max-width:1100px){.hero .reveal.float-card{transform:translateX(-50%)}}