/* ============================================================
   ATS Dachblitz – Website styles
   Reproduced from the Claude Design prototype (light "solide" theme)
   ============================================================ */

:root {
  --bg:#ffffff;
  --surface:#f6f4ef;
  --surface2:#ffffff;
  --text:#1b1d20;
  --muted:#5b6168;
  --border:#e7e4db;
  --accent:#F4A014;
  --accent2:#d98c0a;
  --accent-ink:#1b1d20;
  --accent-text:#a4640a;
  --hero:rgba(16,17,19,.5);
  --foot:#1b1d20;
  --footText:#aeb4bb;
  --maxw:1180px;
}

* { box-sizing:border-box; }
html, body { margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  font-family:'Mulish',sans-serif;
  -webkit-font-smoothing:antialiased;
  background:var(--bg);
  color:var(--text);
  /* container-type lets the design's clamp(... cqw ...) values resolve against viewport width */
  container-type:inline-size;
  overflow-x:hidden;
}
img { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }
button { font-family:inherit; }
::selection { background:#F4A014; color:#1b1d20; }

h1,h2,h3,h4 { font-family:'Archivo',sans-serif; }

.wrap { max-width:var(--maxw); margin:0 auto; padding-left:24px; padding-right:24px; }
.eyebrow {
  display:inline-flex; align-items:center; gap:8px;
  color:var(--accent-text); font-weight:800; font-size:13px;
  letter-spacing:1.5px; text-transform:uppercase; margin-bottom:12px;
}
.section-head { text-align:center; max-width:620px; margin:0 auto 42px; }
.section-head h2 { margin:0; }
h2.title, .title {
  font-weight:800; font-size:clamp(28px,4cqw,40px); line-height:1.08;
  letter-spacing:-.6px; margin:0; color:var(--text);
}

/* ---------- Buttons ---------- */
.btn { display:inline-flex; align-items:center; gap:9px; font-weight:800; cursor:pointer; border:none; border-radius:8px; transition:background .15s, transform .2s, box-shadow .2s, color .15s; }
.btn-accent { background:var(--accent); color:var(--accent-ink); }
.btn-accent:hover { background:var(--accent2); }
.btn-dark { background:var(--text); color:var(--bg); }
.btn-ghost-dark { background:transparent; border:1.5px solid rgba(255,255,255,.45); color:#fff; }
.btn-ghost-dark:hover { background:rgba(255,255,255,.1); }
.btn-lg { font-size:16px; padding:17px 28px; }
.btn-md { font-size:15px; padding:14px 24px; }
.btn-sm { font-size:14px; padding:12px 20px; border-radius:7px; }

/* ============================================================
   HEADER
   ============================================================ */
.site-header { position:sticky; top:0; z-index:50; background:var(--bg); border-bottom:1px solid var(--border); }
.topbar { background:#1b1d20; color:#fff; }
.topbar .wrap { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; padding-top:7px; padding-bottom:7px; font-size:12.5px; font-weight:600; }
.topbar svg { stroke:#fff; }
.topbar-info { display:inline-flex; align-items:center; gap:7px; }
.topbar-contact { display:flex; flex-wrap:wrap; gap:18px; }
.topbar-contact a { display:inline-flex; align-items:center; gap:7px; color:#fff; }
.topbar-contact a.phone { font-weight:800; }

.navbar { display:flex; align-items:center; justify-content:space-between; gap:20px; padding-top:14px; padding-bottom:14px; }
.brand { display:flex; align-items:center; cursor:pointer; flex:0 0 auto; transition:opacity .15s; }
.brand:hover { opacity:.85; }
.brand img { height:clamp(40px,5cqw,52px); width:auto; }

.nav-links { display:flex; align-items:center; gap:26px; }
.nav-links a {
  color:var(--text); border-bottom:2px solid transparent; padding-bottom:5px;
  font-weight:700; font-size:14.5px; cursor:pointer; white-space:nowrap; transition:color .15s;
}
.nav-links a:hover { color:var(--accent); }
.nav-links a.active { color:var(--accent-text); border-bottom-color:var(--accent); }

.nav-cta { flex:0 0 auto; }

.nav-toggle {
  flex:0 0 auto; width:44px; height:44px; display:none; align-items:center; justify-content:center;
  background:var(--surface); border:1px solid var(--border); border-radius:9px; cursor:pointer;
}
.nav-toggle svg { stroke:var(--text); }

.mobile-menu { display:none; border-top:1px solid var(--border); background:var(--bg); padding:8px 24px 18px; }
.mobile-menu.open { display:block; }
.mobile-menu a.mlink {
  color:var(--text); font-weight:700; font-size:17px; cursor:pointer;
  padding:13px 0; border-bottom:1px solid var(--border); display:block;
}
.mobile-menu a.mlink.active { color:var(--accent-text); }
.mobile-menu .btn { margin-top:14px; display:flex; justify-content:center; width:100%; font-size:15px; padding:14px; border-radius:8px; }

/* ============================================================
   PAGE FADE
   ============================================================ */
.page { animation:atsfade .4s ease; }

/* ============================================================
   HERO
   ============================================================ */
.hero { position:relative; background:#15171a; color:#fff; overflow:hidden; }
.hero .glow1 { position:absolute; inset:0; background:radial-gradient(115% 80% at 88% 6%, rgba(244,160,20,.18), transparent 56%); pointer-events:none; }
.hero .glow2 { position:absolute; inset:0; background:radial-gradient(circle at 78% 32%, rgba(255,255,255,.9), transparent 60%); mix-blend-mode:screen; opacity:0; animation:heroFlash 7s ease-in-out infinite; pointer-events:none; }
.hero .bolt-bg { position:absolute; right:clamp(-30px,1cqw,70px); top:34%; transform:translateY(-50%); width:clamp(190px,32cqw,440px); height:auto; pointer-events:none; z-index:1; }
.hero .bolt-bg .flick { opacity:.06; animation:boltFlicker 7s ease-in-out infinite; }
.hero .bolt-bg .outline { opacity:.32; filter:drop-shadow(0 0 7px rgba(244,160,20,.45)); }
.hero-inner { position:relative; z-index:2; max-width:1240px; margin:0 auto; padding:clamp(34px,5.5cqw,64px) 24px clamp(30px,4cqw,52px); }
.hero-badge { display:inline-flex; align-items:center; gap:10px; border:1px solid rgba(255,255,255,.2); padding:8px 15px; border-radius:30px; font-size:11.5px; font-weight:800; letter-spacing:2px; color:#cdd2d8; }
.hero-badge .dot { width:7px; height:7px; border-radius:50%; background:#F4A014; box-shadow:0 0 10px #F4A014; animation:pulseDot 2.4s ease-in-out infinite; }
.hero h1 { font-weight:900; font-size:clamp(42px,8cqw,104px); line-height:.9; letter-spacing:-2.5px; margin:20px 0 0; text-transform:uppercase; max-width:1000px; text-wrap:balance; }
.hero h1 .accent { color:#F4A014; }
.hero-cols { display:flex; flex-wrap:wrap; gap:clamp(26px,4cqw,56px); align-items:flex-end; margin-top:clamp(28px,4cqw,44px); }
.hero-cols .col { flex:1 1 440px; min-width:0; }
.hero-cols p { font-size:clamp(15px,1.7cqw,19px); line-height:1.55; max-width:500px; margin:0; color:#aeb4bb; }
.hero-actions { display:flex; flex-wrap:wrap; gap:14px; margin-top:28px; }
.hero-actions .btn-accent:hover { background:#ffb633; }

/* ============================================================
   FEATURES
   ============================================================ */
.features { max-width:var(--maxw); margin:0 auto; padding:clamp(40px,7cqw,72px) 24px clamp(6px,2cqw,14px); }
.features-row { display:flex; flex-wrap:wrap; gap:18px; }
.feature {
  flex:1 1 260px; background:var(--surface2); border:1px solid var(--border); border-radius:14px;
  padding:clamp(20px,5cqw,28px) clamp(18px,5cqw,26px); box-shadow:0 18px 40px rgba(10,12,16,.10);
}
.feature .top { display:flex; align-items:center; gap:13px; margin-bottom:14px; }
.feature .num { font-family:'Archivo'; font-weight:900; font-size:22px; color:var(--accent-text); }
.feature .rule { height:1px; flex:1; background:var(--border); }
.feature h3 { font-weight:800; font-size:19px; margin:0 0 9px; color:var(--text); }
.feature p { font-size:14.5px; line-height:1.55; color:var(--muted); margin:0; }

/* ============================================================
   ABOUT
   ============================================================ */
.about { max-width:var(--maxw); margin:0 auto; padding:24px 24px clamp(46px,10cqw,80px); }
.about-grid { display:flex; flex-wrap:wrap; gap:48px; align-items:center; }
.about-media { flex:1 1 360px; position:relative; }
.about-media img { width:100%; border-radius:16px; aspect-ratio:4/3; object-fit:cover; }
.about-stat {
  position:absolute; right:-14px; bottom:-22px; background:var(--accent); color:var(--accent-ink);
  border-radius:14px; padding:20px 24px; box-shadow:0 16px 36px rgba(244,160,20,.42);
}
.about-stat .big { font-family:'Archivo'; font-weight:900; font-size:40px; line-height:1; }
.about-stat .lbl { font-size:12.5px; font-weight:700; letter-spacing:.5px; opacity:.92; }
.about-text { flex:1 1 380px; }
.about-text h2 { font-weight:800; font-size:clamp(28px,4cqw,40px); line-height:1.08; letter-spacing:-.6px; margin:0 0 18px; color:var(--text); }
.about-text p { font-size:15.5px; line-height:1.65; color:var(--muted); margin:0 0 14px; }
.about-text p.last { margin-bottom:26px; }
.about-text strong { color:var(--text); }

/* ============================================================
   SERVICES
   ============================================================ */
.band { background:var(--surface); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.band.no-bottom { border-bottom:none; }
.band-inner { max-width:var(--maxw); margin:0 auto; padding:clamp(44px,9cqw,74px) 24px; }
.services-row { display:flex; flex-wrap:wrap; gap:22px; }
.service-card {
  flex:1 1 300px; background:var(--surface2); border:1px solid var(--border); border-radius:16px;
  overflow:hidden; cursor:pointer; transition:transform .2s, box-shadow .2s;
}
.service-card:hover { transform:translateY(-6px); box-shadow:0 24px 50px rgba(10,12,16,.16); }
.service-card .media { position:relative; aspect-ratio:3/2; overflow:hidden; }
.service-card .media img { width:100%; height:100%; object-fit:cover; transition:transform .5s cubic-bezier(.2,.7,.2,1); }
.service-card:hover .media img { transform:scale(1.06); }
.service-card .tag {
  position:absolute; left:14px; top:14px; background:var(--accent); color:var(--accent-ink);
  font-size:11.5px; font-weight:800; letter-spacing:.4px; padding:6px 11px; border-radius:30px;
}
.service-card .body { padding:24px 24px 26px; }
.service-card h3 { font-weight:800; font-size:21px; margin:0 0 9px; color:var(--text); }
.service-card p { font-size:14.5px; line-height:1.55; color:var(--muted); margin:0 0 16px; }
.link-accent { display:inline-flex; align-items:center; gap:8px; color:var(--accent-text); font-weight:800; font-size:14px; }

/* ============================================================
   REFERENZEN TEASER (carousel)
   ============================================================ */
.refs-teaser { max-width:var(--maxw); margin:0 auto; padding:clamp(44px,9cqw,74px) 24px; }
.refs-teaser-head { display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:18px; margin-bottom:30px; }
.refs-teaser-head h2 { margin:0; }
.link-underline { display:inline-flex; align-items:center; gap:8px; color:var(--text); font-weight:800; font-size:15px; cursor:pointer; border-bottom:2px solid var(--accent); padding-bottom:3px; }
.carousel { position:relative; border-radius:18px; overflow:hidden; background:#0e1012; aspect-ratio:16/9; box-shadow:0 24px 60px rgba(10,12,16,.18); cursor:pointer; }
.carousel .bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:blur(28px) brightness(.55); transform:scale(1.1); }
.carousel .fg { position:relative; width:100%; height:100%; object-fit:contain; }
.carousel .scrim { position:absolute; inset:0; background:linear-gradient(transparent 45%, rgba(10,12,16,.78)); }
.carousel .cap { position:absolute; left:0; right:0; bottom:0; padding:clamp(20px,3cqw,34px); display:flex; align-items:flex-end; justify-content:space-between; gap:16px; }
.pill { display:inline-block; background:var(--accent); color:var(--accent-ink); font-size:13px; font-weight:800; letter-spacing:.5px; padding:8px 16px; border-radius:30px; }
.carousel .navbtns { display:flex; gap:10px; flex:0 0 auto; }
.round-btn { width:48px; height:48px; border-radius:50%; border:none; background:rgba(255,255,255,.16); backdrop-filter:blur(6px); color:#fff; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; transition:background .15s, color .15s; }
.round-btn:hover { background:var(--accent); color:var(--accent-ink); }
.carousel .dots { position:absolute; top:clamp(16px,2.5cqw,24px); left:50%; transform:translateX(-50%); display:flex; gap:8px; align-items:center; }
.carousel .dots button { width:9px; height:9px; border-radius:20px; border:none; cursor:pointer; padding:0; transition:all .3s; background:rgba(255,255,255,.5); }
.carousel .dots button.active { width:26px; background:var(--accent); }

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.testi-row { display:flex; flex-wrap:wrap; gap:20px; }
.testi-card { flex:1 1 300px; background:var(--surface2); border:1px solid var(--border); border-radius:16px; padding:30px 28px; }
.testi-card .quote { color:var(--accent-text); font-size:46px; font-family:'Archivo'; font-weight:900; line-height:.6; height:26px; }
.testi-card p { font-size:15px; line-height:1.6; color:var(--text); margin:0 0 20px; }
.testi-card .person { display:flex; align-items:center; gap:13px; }
.testi-card .avatar { width:44px; height:44px; border-radius:50%; background:var(--accent); color:var(--accent-ink); display:inline-flex; align-items:center; justify-content:center; font-family:'Archivo'; font-weight:900; font-size:17px; }
.testi-card .name { font-weight:800; font-size:14.5px; color:var(--text); }
.testi-card .role { font-size:12.5px; color:var(--muted); }
.testi-ph { flex:1 1 300px; background:transparent; border:1.5px dashed var(--border); border-radius:16px; padding:30px 28px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; min-height:200px; }
.testi-ph .plus { width:44px; height:44px; border-radius:50%; border:1.5px dashed var(--border); display:inline-flex; align-items:center; justify-content:center; color:var(--muted); margin-bottom:14px; }
.testi-ph .name { font-weight:800; font-size:15px; color:var(--text); margin-bottom:5px; }
.testi-ph .role { font-size:13px; color:var(--muted); }

/* ============================================================
   CTA BAND
   ============================================================ */
.cta { background:var(--accent); color:#1b1d20; position:relative; overflow:hidden; clip-path:polygon(0 26px,100% 0,100% 100%,0 100%); }
.cta .bolt { position:absolute; right:40px; top:-30px; width:260px; height:360px; opacity:.14; }
.cta-inner { position:relative; max-width:var(--maxw); margin:0 auto; padding:clamp(40px,8cqw,56px) 24px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:28px; }
.cta .text { flex:1 1 380px; }
.cta h2 { font-weight:900; font-size:clamp(26px,4cqw,40px); line-height:1.08; letter-spacing:-.6px; margin:0 0 10px; }
.cta p { font-size:16px; line-height:1.55; margin:0; color:rgba(27,29,32,.82); max-width:480px; }
.cta-actions { display:flex; flex-wrap:wrap; gap:14px; flex:0 0 auto; }
.cta-btn-primary { background:#1b1d20; color:#fff; font-size:16px; padding:16px 28px; }
.cta-btn-second { background:rgba(27,29,32,.07); border:1.5px solid rgba(27,29,32,.4); color:#1b1d20; font-size:16px; padding:16px 28px; }

/* ============================================================
   SERVICE DETAIL
   ============================================================ */
.svc-hero { position:relative; background-color:#16181b; background-size:cover; background-position:center; color:#fff; }
.svc-hero-inner { position:relative; max-width:var(--maxw); margin:0 auto; padding:clamp(42px,9cqw,70px) 24px clamp(46px,10cqw,76px); }
.breadcrumb { font-size:13px; font-weight:700; opacity:.85; margin-bottom:14px; }
.breadcrumb span.home { cursor:pointer; }
.svc-tag { display:inline-block; background:var(--accent); color:var(--accent-ink); font-size:12px; font-weight:800; letter-spacing:.5px; padding:6px 13px; border-radius:30px; margin-bottom:16px; }
.svc-hero h1 { font-weight:900; font-size:clamp(32px,5cqw,54px); line-height:1.03; letter-spacing:-1px; margin:0; max-width:680px; }
.svc-hero p { font-size:clamp(16px,2cqw,19px); line-height:1.55; max-width:560px; margin:18px 0 0; color:rgba(255,255,255,.9); }
.svc-body { max-width:var(--maxw); margin:0 auto; padding:clamp(42px,9cqw,70px) 24px; }
.svc-grid { display:flex; flex-wrap:wrap; gap:48px; align-items:flex-start; }
.svc-main { flex:1 1 460px; min-width:0; }
.svc-main h2 { font-weight:800; font-size:clamp(24px,3.5cqw,34px); line-height:1.1; letter-spacing:-.5px; margin:0 0 18px; color:var(--text); }
.svc-lead { font-size:16px; line-height:1.65; color:var(--muted); margin:0 0 36px; max-width:560px; }
.svc-sections { display:flex; flex-direction:column; gap:30px; }
.svc-sec { display:flex; gap:18px; align-items:flex-start; }
.svc-sec .check { flex:0 0 auto; width:30px; height:30px; border-radius:50%; background:var(--accent); display:inline-flex; align-items:center; justify-content:center; margin-top:2px; }
.svc-sec h3 { font-weight:800; font-size:19px; margin:0 0 8px; color:var(--text); }
.svc-sec p { font-size:15px; line-height:1.62; color:var(--muted); margin:0; }
.svc-cta { margin-top:38px; }
.svc-gallery { flex:1 1 300px; display:flex; flex-direction:column; gap:14px; position:sticky; top:90px; }
.svc-gallery img { width:100%; border-radius:14px; aspect-ratio:3/2; object-fit:cover; }
.more-services h3 { font-weight:800; font-size:22px; margin:0 0 24px; color:var(--text); }
.more-row { display:flex; flex-wrap:wrap; gap:18px; }
.more-card { flex:1 1 280px; display:flex; align-items:center; gap:16px; background:var(--surface2); border:1px solid var(--border); border-radius:13px; padding:16px; cursor:pointer; transition:border-color .15s; }
.more-card:hover { border-color:var(--accent); }
.more-card img { width:74px; height:74px; border-radius:10px; object-fit:cover; flex:0 0 auto; }
.more-card .t { font-family:'Archivo'; font-weight:800; font-size:17px; color:var(--text); }
.more-card .m { font-size:13px; color:var(--accent-text); font-weight:700; margin-top:4px; }

/* ============================================================
   PAGE HEADERS (Referenzen / Kontakt / Legal)
   ============================================================ */
.page-head { background:var(--surface); border-bottom:1px solid var(--border); }
.page-head-inner { max-width:var(--maxw); margin:0 auto; padding:clamp(38px,8cqw,60px) 24px clamp(32px,7cqw,50px); }
.page-head h1 { font-weight:900; font-size:clamp(32px,5cqw,52px); line-height:1.03; letter-spacing:-1px; margin:0; color:var(--text); }
.page-head p { font-size:16px; line-height:1.6; color:var(--muted); margin:16px 0 0; max-width:560px; }

/* ---------- Referenzen grid ---------- */
.ref-chips { display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; }
.chip { padding:10px 18px; border-radius:30px; border:1.5px solid var(--border); cursor:pointer; font-size:14px; font-weight:700; background:var(--surface2); color:var(--text); transition:all .15s; }
.chip.active { border-color:transparent; background:var(--accent); color:var(--accent-ink); }
.ref-wrap { max-width:var(--maxw); margin:0 auto; padding:clamp(24px,6cqw,36px) 24px clamp(46px,10cqw,80px); }
.ref-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:16px; }
.ref-item { position:relative; aspect-ratio:4/3; border-radius:14px; overflow:hidden; background:var(--surface); cursor:pointer; }
.ref-item img { width:100%; height:100%; object-fit:cover; transition:transform .35s; }
.ref-item:hover img { transform:scale(1.05); }
.ref-item .expand { position:absolute; top:12px; right:12px; width:34px; height:34px; border-radius:50%; background:rgba(0,0,0,.5); backdrop-filter:blur(4px); display:inline-flex; align-items:center; justify-content:center; }
.ref-item .cap { position:absolute; left:0; right:0; bottom:0; padding:16px 14px 14px; background:linear-gradient(transparent,rgba(0,0,0,.72)); color:#fff; }
.ref-item .cap .cat { font-weight:800; font-size:15px; }

/* ---------- Kontakt ---------- */
.contact-wrap { max-width:var(--maxw); margin:0 auto; padding:clamp(32px,7cqw,50px) 24px clamp(46px,10cqw,80px); }
.contact-cards { display:flex; flex-wrap:wrap; gap:20px; align-items:stretch; }
.contact-card { flex:1 1 300px; display:flex; flex-direction:column; justify-content:space-between; gap:30px; border-radius:18px; padding:clamp(28px,4cqw,40px); min-height:200px; transition:transform .2s; }
.contact-card:hover { transform:translateY(-5px); }
.contact-card.phone { background:var(--text); color:var(--bg); }
.contact-card.mail { background:var(--accent); color:var(--accent-ink); }
.contact-card .head { display:flex; align-items:center; justify-content:space-between; }
.contact-card .ico { width:52px; height:52px; border-radius:13px; display:inline-flex; align-items:center; justify-content:center; font-size:22px; }
.contact-card.phone .ico { background:var(--accent); }
.contact-card.mail .ico { background:rgba(27,29,32,.12); }
.contact-card .kicker { font-size:12px; font-weight:800; letter-spacing:1.5px; text-transform:uppercase; opacity:.55; }
.contact-card .sub { font-size:12.5px; font-weight:700; opacity:.6; margin-bottom:6px; }
.contact-card .big { font-family:'Archivo'; font-weight:900; line-height:1; letter-spacing:-.5px; }
.contact-card.phone .big { font-size:clamp(26px,3.2cqw,36px); }
.contact-card.mail .big { font-size:clamp(20px,2.5cqw,28px); line-height:1.05; word-break:break-all; }
.contact-meta { display:flex; flex-wrap:wrap; gap:20px; margin-top:20px; }
.meta-card { flex:1 1 300px; background:var(--surface2); border:1px solid var(--border); border-radius:18px; padding:clamp(24px,3cqw,30px); }
.meta-card.addr { display:flex; align-items:center; gap:16px; }
.meta-card .ico { width:48px; height:48px; border-radius:12px; background:var(--accent); display:inline-flex; align-items:center; justify-content:center; font-size:20px; flex:0 0 auto; }
.meta-card .lbl { font-size:12px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:1px; margin-bottom:4px; }
.meta-card .val { font-weight:800; font-size:16px; color:var(--text); }
.meta-card h4 { font-weight:800; font-size:16px; margin:0 0 12px; color:var(--text); }
.hours-row { display:flex; justify-content:space-between; font-size:14.5px; color:var(--muted); padding:6px 0; }
.hours-row.bordered { border-bottom:1px solid var(--border); }
.hours-row strong { font-weight:800; color:var(--text); }

/* ---------- Legal ---------- */
.legal-head .page-head-inner { max-width:880px; }
.legal-wrap { max-width:880px; margin:0 auto; padding:clamp(32px,6cqw,52px) 24px clamp(46px,10cqw,80px); }
.legal-card { background:var(--surface2); border:1px solid var(--border); border-radius:16px; padding:clamp(26px,4cqw,44px); }
.legal-block { margin-bottom:22px; }
.legal-block h2 { font-weight:800; font-size:clamp(17px,2cqw,21px); line-height:1.25; margin:0 0 8px; color:var(--text); }
.legal-block p { font-size:14.5px; line-height:1.7; color:var(--muted); margin:0; white-space:pre-line; }
.legal-block p.p2 { margin-top:12px; }
.legal-block ul { font-size:14.5px; line-height:1.7; color:var(--muted); margin:10px 0 0; padding-left:20px; }
.legal-block li { margin-bottom:4px; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer { background:var(--foot); color:var(--footText); }
.footer-main { max-width:var(--maxw); margin:0 auto; padding:clamp(40px,8cqw,60px) 24px 30px; display:flex; flex-wrap:wrap; gap:40px; justify-content:space-between; }
.footer-brand { flex:1 1 280px; max-width:340px; }
.footer-brand img { height:48px; width:auto; margin-bottom:18px; }
.footer-brand p { font-size:14px; line-height:1.6; margin:0; }
.footer-col { flex:0 1 auto; }
.footer-col h4 { color:#fff; font-weight:800; font-size:14px; letter-spacing:.5px; margin:0 0 16px; text-transform:uppercase; }
.footer-col .links { display:flex; flex-direction:column; gap:11px; }
.footer-col .links a { font-size:14px; cursor:pointer; color:var(--footText); transition:color .15s; }
.footer-col .links a:hover { color:#fff; }
.footer-contact { display:flex; flex-direction:column; gap:11px; font-size:14px; }
.footer-contact a:hover { color:#fff; }
.footer-contact a.phone { color:#fff; font-weight:800; }
.footer-contact .muted { opacity:.7; }
.footer-bar { border-top:1px solid rgba(255,255,255,.1); }
.footer-bar-inner { max-width:var(--maxw); margin:0 auto; padding:18px 24px; display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; font-size:13px; }
.footer-bar a { color:var(--footText); cursor:pointer; transition:color .15s; }
.footer-bar a:hover { color:#fff; }
.footer-bar .legal-links { display:flex; gap:22px; }

/* ============================================================
   LIGHTBOX
   ============================================================ */
.lightbox { position:fixed; inset:0; z-index:120; background:rgba(8,9,11,.92); backdrop-filter:blur(8px); display:flex; align-items:center; justify-content:center; padding:24px; animation:lbIn .25s ease; }
.lightbox[hidden] { display:none; }
.lb-close { position:absolute; top:20px; right:20px; width:48px; height:48px; }
.lb-prev { position:absolute; left:clamp(12px,3vw,40px); top:50%; transform:translateY(-50%); width:54px; height:54px; }
.lb-next { position:absolute; right:clamp(12px,3vw,40px); top:50%; transform:translateY(-50%); width:54px; height:54px; }
.lb-btn { border-radius:50%; border:none; background:rgba(255,255,255,.14); color:#fff; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; z-index:2; transition:background .15s, color .15s; }
.lb-btn:hover { background:var(--accent); color:var(--accent-ink); }
.lb-stage { max-width:1000px; width:100%; display:flex; flex-direction:column; align-items:center; gap:16px; }
.lb-stage img { max-width:100%; max-height:78vh; border-radius:12px; object-fit:contain; box-shadow:0 30px 80px rgba(0,0,0,.5); }
.lb-cap { text-align:center; color:#fff; }

/* ============================================================
   BLITZ PAGE TRANSITION
   ============================================================ */
.blitz { position:fixed; inset:0; z-index:90; pointer-events:none; overflow:hidden; }
.blitz .wipe { position:absolute; top:-15%; left:0; height:130%; width:72%; background:linear-gradient(100deg, transparent 0%, var(--accent) 24%, #ffd784 50%, var(--accent) 76%, transparent 100%); filter:drop-shadow(0 0 70px var(--accent)); animation:blitzWipe .62s cubic-bezier(.66,0,.34,1) forwards; }
.blitz .flash { position:absolute; inset:0; background:#fff; mix-blend-mode:screen; opacity:0; animation:wipeFlash .62s ease forwards; }
.blitz .pop { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); animation:boltPop .62s ease forwards; }

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.reveal { opacity:0; transform:translateY(28px); transition:opacity .7s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
.reveal.shown { opacity:1; transform:none; }

/* ============================================================
   KEYFRAMES
   ============================================================ */
@keyframes atsfade { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
@keyframes boltFlicker { 0%,40%{opacity:.10}42%{opacity:.5}44%{opacity:.13}46.5%{opacity:.62}49%{opacity:.16}52%,100%{opacity:.10} }
@keyframes heroFlash { 0%,40%{opacity:0}42%{opacity:.07}44%{opacity:0}46.5%{opacity:.14}49%{opacity:0}52%,100%{opacity:0} }
@keyframes blitzWipe { 0%{transform:translateX(-150%) skewX(-11deg)}100%{transform:translateX(178%) skewX(-11deg)} }
@keyframes wipeFlash { 0%,100%{opacity:0}36%{opacity:.24}58%{opacity:0} }
@keyframes boltPop { 0%{opacity:0;transform:translate(-50%,-50%) scale(.5) rotate(-7deg)}34%{opacity:1;transform:translate(-50%,-50%) scale(1.12) rotate(0)}60%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(1)} }
@keyframes pulseDot { 0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.55);opacity:.55} }
@keyframes lbIn { from{opacity:0}to{opacity:1} }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .reveal { opacity:1; transform:none; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:860px) {
  .nav-links, .nav-cta { display:none; }
  .nav-toggle { display:inline-flex; }
}
@media (max-width:560px) {
  .about-stat { right:10px; bottom:-18px; padding:16px 18px; }
  .about-stat .big { font-size:32px; }
  .svc-gallery { position:static; }
  /* CTA: stack buttons full-width so the phone button isn't clipped */
  .cta-actions { width:100%; }
  .cta-actions .btn { flex:1 1 100%; justify-content:center; }
  .hero-actions .btn { flex:1 1 100%; justify-content:center; }
}