/* PFS Concrete & Asphalt — homepage v2 stylesheet.
   Loaded by index.html only; other pages keep css/style.css.
   Same class hooks as js/main.js expects (navbar, mobile-nav, modal, faq, fade-up, data-count). */

/* ── Tokens ─────────────────────────────────────────── */
:root{
  --ink:        oklch(0.16 0.012 60);
  --ink-2:      oklch(0.22 0.012 60);
  --ink-soft:   oklch(0.40 0.010 60);
  --paper:      oklch(0.98 0.004 80);
  --paper-2:    oklch(0.945 0.007 80);
  --line:       oklch(0.88 0.006 80);
  --line-dark:  oklch(1 0 0 / 0.14);
  --accent:     oklch(0.66 0.180 45);
  --accent-hot: oklch(0.71 0.185 48);
  --accent-deep:oklch(0.58 0.170 42);
  --on-dark:    oklch(0.97 0.003 80);
  --on-dark-2:  oklch(1 0 0 / 0.66);
  --font-head:'Big Shoulders Display',sans-serif;
  --font-body:'Libre Franklin',sans-serif;
  --r-card:14px;
  --r-btn:999px;
  --shadow-card:0 10px 40px oklch(0 0 0 / 0.10);
  --shadow-cta:0 8px 30px oklch(0.66 0.180 45 / 0.35);
  --pad-x:clamp(1.1rem, 4vw, 2.5rem);
}

/* ── Base ───────────────────────────────────────────── */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--paper);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font-family:inherit;cursor:pointer;background:none;border:none;color:inherit}
.container{max-width:1280px;margin:0 auto;padding-inline:var(--pad-x)}
body.menu-open,body.modal-open{overflow:hidden}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:4px}

h1,h2,h3,.display{
  font-family:var(--font-head);
  text-transform:uppercase;
  line-height:0.95;
  letter-spacing:0.005em;
  font-weight:800;
}
h2{font-size:clamp(2.1rem, 4.4vw, 3.4rem);color:var(--ink)}
.eyebrow{
  display:inline-block;
  font-size:0.78rem;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--accent-deep);margin-bottom:0.9rem;
}

/* ── Buttons ────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:0.5rem;
  font-weight:700;font-size:1rem;line-height:1.2;white-space:nowrap;
  border-radius:var(--r-btn);padding:0.95rem 1.9rem;
  transition:transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease;
}
.btn:active{transform:translateY(1px) scale(0.985)}
.btn-orange{background:var(--accent);color:oklch(0.13 0.01 60);box-shadow:var(--shadow-cta)}
.btn-orange:hover{background:var(--accent-hot);transform:translateY(-2px)}
.btn-ghost-light{border:2px solid oklch(1 0 0 / 0.55);color:var(--on-dark);background:oklch(0 0 0 / 0.18)}
.btn-ghost-light:hover{border-color:var(--on-dark);background:oklch(0 0 0 / 0.34)}
.btn-ghost-dark{border:2px solid var(--ink);color:var(--ink)}
.btn-ghost-dark:hover{background:var(--ink);color:var(--on-dark)}
.btn-xl{padding:1.15rem 2.4rem;font-size:1.08rem}
.btn-sm{padding:0.62rem 1.3rem;font-size:0.92rem}

/* ── Navbar ─────────────────────────────────────────── */
.navbar{
  position:fixed;inset-inline:0;top:0;z-index:100;height:72px;
  display:flex;align-items:center;
  background:transparent;
  transition:background 0.25s ease, box-shadow 0.25s ease, height 0.25s ease;
}
.navbar .container{display:flex;align-items:center;gap:2rem;width:100%}
.navbar.scrolled{
  height:64px;
  background:oklch(0.98 0.004 80 / 0.92);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:0 1px 0 var(--line), 0 8px 30px oklch(0 0 0 / 0.06);
}
.nav-logo img{height:44px;width:auto}
.navbar:not(.scrolled) .nav-logo img{filter:drop-shadow(0 1px 6px oklch(0 0 0 / 0.55))}
.nav-links{display:flex;gap:1.6rem;margin-left:auto}
.nav-links a{
  font-size:0.95rem;font-weight:600;color:var(--on-dark);
  padding:0.3rem 0;border-bottom:2px solid transparent;
  transition:color 0.15s ease, border-color 0.15s ease;
}
.navbar.scrolled .nav-links a{color:var(--ink-2)}
.nav-links a:hover,.nav-links a.active{border-color:var(--accent)}
.nav-right{display:flex;align-items:center;gap:1.2rem}
.nav-phone{font-weight:700;font-size:0.98rem;color:var(--on-dark);white-space:nowrap}
.navbar.scrolled .nav-phone{color:var(--ink)}
.nav-phone:hover{color:var(--accent-hot)}
.hamburger{display:none;flex-direction:column;gap:5px;padding:8px;margin-left:auto}
.hamburger span{width:26px;height:2.5px;background:var(--on-dark);border-radius:2px;transition:transform 0.2s ease, opacity 0.2s ease}
.navbar.scrolled .hamburger span{background:var(--ink)}
.hamburger.open span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

/* ── Mobile nav ─────────────────────────────────────── */
.mobile-nav{
  position:fixed;inset:0;z-index:99;
  background:oklch(0.15 0.012 60 / 0.98);
  display:flex;flex-direction:column;align-items:flex-start;justify-content:center;
  gap:1.3rem;padding:2rem var(--pad-x);
  opacity:0;visibility:hidden;transform:translateY(-12px);
  transition:opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
}
.mobile-nav.open{opacity:1;visibility:visible;transform:none}
.mobile-nav a{font-family:var(--font-head);font-size:1.7rem;font-weight:800;text-transform:uppercase;color:var(--on-dark)}
.mobile-nav a.btn{font-family:var(--font-body);font-size:1rem;text-transform:none}
.mobile-nav a:hover{color:var(--accent-hot)}
.mobile-close{position:absolute;top:1.1rem;right:1.3rem;font-size:2.4rem;line-height:1;color:var(--on-dark)}

/* ── Side quote tab ─────────────────────────────────── */
.side-quote{
  position:fixed;right:0;top:50%;z-index:90;
  transform:translateY(-50%) rotate(180deg);
  writing-mode:vertical-rl;
  background:var(--accent);color:oklch(0.13 0.01 60);
  font-weight:800;font-size:0.82rem;letter-spacing:0.14em;
  padding:1.1rem 0.6rem;border-radius:0 8px 8px 0;
  box-shadow:var(--shadow-cta);
  transition:padding 0.15s ease, background 0.15s ease;
}
.side-quote:hover{background:var(--accent-hot);padding-right:0.9rem}
@media(max-width:768px){.side-quote{display:none}}

/* ── Hero ───────────────────────────────────────────── */
.hero-home{
  position:relative;
  min-height:100dvh;
  display:flex;align-items:flex-end;
  color:var(--on-dark);
  isolation:isolate;
}
.hero-media{position:absolute;inset:0;z-index:-1;overflow:hidden;background:var(--ink)}
.hero-video{width:100%;height:100%;object-fit:cover}
.hero-overlay{
  position:absolute;inset:0;
  background:
    linear-gradient(78deg, oklch(0.10 0.012 60 / 0.88) 0%, oklch(0.10 0.012 60 / 0.55) 46%, oklch(0.10 0.012 60 / 0.20) 100%),
    linear-gradient(to top, oklch(0.10 0.012 60 / 0.85) 0%, transparent 45%);
}
.hero-wrap{
  max-width:820px;
  padding-block:9.5rem 4.5rem;
}
.hero-home h1{
  font-size:clamp(2.9rem, 7.2vw, 5.6rem);
  font-weight:900;
  color:var(--on-dark);
  margin-bottom:1.4rem;
}
.hero-home h1 em{font-style:normal;color:var(--accent-hot)}
.hero-home .lead{
  font-size:clamp(1.05rem, 1.6vw, 1.25rem);
  color:var(--on-dark-2);
  max-width:34rem;
  margin-bottom:2.2rem;
}
.hero-ctas{display:flex;flex-wrap:wrap;gap:1rem}

/* ── Stat band ──────────────────────────────────────── */
.stat-band{background:var(--ink);color:var(--on-dark)}
.stat-band .container{
  display:grid;grid-template-columns:repeat(4,1fr);
  padding-block:2.4rem;gap:2rem;
}
.stat-item{border-left:1px solid var(--line-dark);padding-left:1.4rem}
.stat-item:first-child{border-left:none;padding-left:0}
.stat-num{
  font-family:var(--font-head);font-size:clamp(2.2rem, 3.6vw, 3.2rem);
  font-weight:900;line-height:1;color:var(--accent-hot);display:block;
}
.stat-label{font-size:0.88rem;color:var(--on-dark-2);margin-top:0.35rem;display:block}
@media(max-width:820px){
  .stat-band .container{grid-template-columns:repeat(2,1fr);gap:1.6rem}
  .stat-item:nth-child(3){border-left:none;padding-left:0}
}

/* ── Problem / solution ─────────────────────────────── */
.problem-section{padding-block:clamp(4.5rem, 8vw, 7.5rem)}
.problem-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem, 5vw, 5rem);
  align-items:start;
}
.problem-copy h2{margin-bottom:1.1rem}
.problem-copy > p{color:var(--ink-soft);max-width:36rem;margin-bottom:1.8rem}
.pain-list{display:grid;gap:0.9rem}
.pain-item{
  position:relative;padding-left:1.6rem;color:var(--ink-2);font-size:0.98rem;
}
.pain-item::before{
  content:"";position:absolute;left:0;top:0.48em;
  width:0.7rem;height:2.5px;background:var(--accent);border-radius:2px;
}
.solution-card{
  background:var(--ink);color:var(--on-dark);
  border-radius:var(--r-card);
  padding:clamp(1.8rem, 3.4vw, 2.8rem);
  box-shadow:var(--shadow-card);
}
.solution-card h3{font-size:clamp(1.5rem, 2.4vw, 2rem);color:var(--on-dark);margin-bottom:0.9rem}
.solution-card > p{color:var(--on-dark-2);font-size:0.98rem;margin-bottom:1.5rem}
.solution-points{display:grid;gap:0.85rem;margin-bottom:2rem}
.solution-point{position:relative;padding-left:1.8rem;font-size:0.97rem;color:var(--on-dark)}
.solution-point::before{
  content:"";position:absolute;left:0;top:0.28em;
  width:0.95rem;height:0.95rem;border-radius:50%;
  background:var(--accent);
  clip-path:polygon(14% 44%, 0 58%, 40% 100%, 100% 18%, 84% 6%, 40% 70%);
}
.problem-cta-row{display:flex;flex-wrap:wrap;gap:0.9rem}
@media(max-width:900px){.problem-grid{grid-template-columns:1fr}}

/* ── Services grid ──────────────────────────────────── */
.services-section{padding-block:clamp(1rem, 2vw, 2rem) clamp(4.5rem, 8vw, 7rem)}
.sec-header{max-width:46rem;margin-bottom:2.6rem}
.sec-header.center{margin-inline:auto;text-align:center}
.sec-header p{color:var(--ink-soft);margin-top:0.9rem}
.svc-grid{
  display:grid;gap:1.1rem;
  grid-template-columns:repeat(6,1fr);
  grid-auto-rows:230px;
}
.svc-card{
  position:relative;overflow:hidden;border-radius:var(--r-card);
  display:flex;align-items:flex-end;
  isolation:isolate;
}
.svc-card img{
  position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;
  transition:transform 0.5s cubic-bezier(0.16,1,0.3,1);
}
.svc-card::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top, oklch(0.10 0.012 60 / 0.86) 0%, oklch(0.10 0.012 60 / 0.25) 55%, transparent 100%);
  transition:background 0.3s ease;
}
.svc-card:hover img{transform:scale(1.05)}
.svc-card-body{padding:1.4rem 1.5rem;color:var(--on-dark);width:100%}
.svc-card h3{font-size:clamp(1.35rem, 2vw, 1.8rem);color:var(--on-dark);margin-bottom:0.3rem}
.svc-card p{font-size:0.9rem;color:var(--on-dark-2);max-width:30rem;margin-bottom:0.55rem}
.svc-card .svc-more{
  font-size:0.85rem;font-weight:700;color:var(--accent-hot);
  display:inline-flex;align-items:center;gap:0.35rem;
}
.svc-card .svc-more::after{content:"\2192";transition:transform 0.2s ease}
.svc-card:hover .svc-more::after{transform:translateX(4px)}
.svc-lg,.svc-md,.svc-sm{grid-column:span 2}
@media(max-width:900px){
  .svc-grid{grid-template-columns:1fr 1fr;grid-auto-rows:210px}
  .svc-lg,.svc-md,.svc-sm{grid-column:span 1}
}
@media(max-width:560px){
  .svc-grid{grid-template-columns:1fr}
  .svc-lg,.svc-md,.svc-sm{grid-column:span 1;grid-row:span 1}
}
.section-action{margin-top:2.4rem;display:flex;justify-content:center;gap:1rem;flex-wrap:wrap}

/* ── Proof gallery (scroll-snap) ────────────────────── */
.proof-section{
  background:var(--paper-2);
  padding-block:clamp(4.5rem, 8vw, 7rem);
  border-block:1px solid var(--line);
}
.proof-rail{
  display:flex;gap:1.1rem;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  padding-bottom:0.8rem;
  margin-top:2.4rem;
  scrollbar-width:thin;
  scrollbar-color:var(--accent) transparent;
}
.proof-card{
  flex:0 0 clamp(260px, 30vw, 400px);
  scroll-snap-align:start;
}
.proof-card.featured{flex-basis:clamp(320px, 42vw, 560px)}
.proof-card figure{margin:0}
.proof-card img{
  width:100%;aspect-ratio:4/3;object-fit:cover;
  border-radius:var(--r-card);
  transition:transform 0.4s cubic-bezier(0.16,1,0.3,1);
}
.proof-card:hover img{transform:translateY(-4px)}
.proof-card figcaption{
  padding:0.75rem 0.2rem 0;
  display:flex;align-items:baseline;justify-content:space-between;gap:0.8rem;
}
.proof-card figcaption b{font-family:var(--font-head);text-transform:uppercase;font-size:1.05rem;letter-spacing:0.02em}
.proof-card figcaption span{font-size:0.85rem;color:var(--ink-soft);white-space:nowrap}

/* ── Video showcase ─────────────────────────────────── */
.video-showcase-section{padding-block:clamp(4.5rem, 8vw, 7.5rem)}
.video-showcase{
  display:grid;grid-template-columns:5fr 7fr;gap:clamp(2rem, 5vw, 4.5rem);
  align-items:center;
}
.video-showcase-copy h2{margin-bottom:1rem}
.video-showcase-copy > p{color:var(--ink-soft);margin-bottom:1.6rem}
.video-checks{display:grid;gap:0.85rem;margin-bottom:2rem}
.video-check{position:relative;padding-left:1.8rem;font-size:0.97rem;color:var(--ink-2)}
.video-check::before{
  content:"";position:absolute;left:0;top:0.28em;
  width:0.95rem;height:0.95rem;border-radius:50%;
  background:var(--accent);
  clip-path:polygon(14% 44%, 0 58%, 40% 100%, 100% 18%, 84% 6%, 40% 70%);
}
.video-cta-row{display:flex;flex-wrap:wrap;gap:0.9rem}
.video-player-shell{
  border-radius:var(--r-card);overflow:hidden;
  box-shadow:var(--shadow-card);
  background:var(--ink);
}
.showcase-video{width:100%;aspect-ratio:16/10;object-fit:cover}
@media(max-width:900px){.video-showcase{grid-template-columns:1fr}}

/* ── Testimonials ───────────────────────────────────── */
.testi-section{
  background:var(--ink);color:var(--on-dark);
  padding-block:clamp(4.5rem, 8vw, 7.5rem);
}
.testi-section h2{color:var(--on-dark)}
.featured-testi{max-width:52rem;margin:2.8rem auto 0;text-align:center}
.stars{color:var(--accent-hot);letter-spacing:0.2em;font-size:1.1rem;margin-bottom:1.1rem}
.featured-testi blockquote{
  font-family:var(--font-head);text-transform:uppercase;font-weight:700;
  font-size:clamp(1.4rem, 2.8vw, 2.1rem);line-height:1.15;
  color:var(--on-dark);
}
.testi-reviewer{display:flex;align-items:center;justify-content:center;gap:0.9rem;margin-top:1.6rem}
.testi-avatar{
  width:46px;height:46px;border-radius:50%;
  background:var(--accent);color:oklch(0.13 0.01 60);
  display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:0.95rem;
}
.testi-name{font-weight:700;font-size:0.97rem}
.testi-loc{font-size:0.85rem;color:var(--on-dark-2)}
.testi-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:1.1rem;
  max-width:60rem;margin:3rem auto 0;
}
.testi-card{
  border:1px solid var(--line-dark);border-radius:var(--r-card);
  padding:1.6rem 1.7rem;
  background:oklch(1 0 0 / 0.03);
}
.testi-card .stars{font-size:0.9rem;margin-bottom:0.8rem}
.testi-card > p{font-size:0.95rem;color:var(--on-dark-2);margin-bottom:1.2rem}
.testi-card .testi-reviewer{justify-content:flex-start;margin-top:0}
@media(max-width:700px){.testi-grid{grid-template-columns:1fr}}

/* ── Process ────────────────────────────────────────── */
.process-section{padding-block:clamp(4.5rem, 8vw, 7.5rem)}
.process-steps{
  max-width:44rem;margin:2.6rem auto 0;
  display:grid;gap:0;
}
.process-step{
  position:relative;
  padding:1.5rem 0 1.5rem 4.2rem;
  border-top:1px solid var(--line);
}
.process-step:last-child{border-bottom:1px solid var(--line)}
.ps-num{
  position:absolute;left:0;top:1.35rem;
  font-family:var(--font-head);font-weight:900;font-size:2rem;line-height:1;
  color:var(--accent);
}
.process-step h4{
  font-family:var(--font-head);text-transform:uppercase;font-weight:800;
  font-size:1.35rem;margin-bottom:0.35rem;
}
.process-step p{color:var(--ink-soft);font-size:0.96rem;max-width:34rem}

/* ── FAQ ────────────────────────────────────────────── */
.faq-section{
  background:var(--paper-2);border-block:1px solid var(--line);
  padding-block:clamp(4.5rem, 8vw, 7rem);
}
.faq-list{max-width:46rem;margin:2.4rem auto 0}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item:first-child{border-top:1px solid var(--line)}
.faq-q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem;
  text-align:left;font-weight:700;font-size:1.05rem;
  padding:1.25rem 0.2rem;
}
.faq-icon{
  font-size:1.5rem;font-weight:400;color:var(--accent-deep);
  transition:transform 0.25s ease;flex-shrink:0;line-height:1;
}
.faq-item.open .faq-icon{transform:rotate(45deg)}
.faq-a{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows 0.3s ease;
}
.faq-a > p{
  overflow:hidden;color:var(--ink-soft);font-size:0.97rem;max-width:42rem;
}
.faq-item.open .faq-a{grid-template-rows:1fr}
.faq-item.open .faq-a > p{padding-bottom:1.25rem}

/* ── Final CTA ──────────────────────────────────────── */
.cta-dark{
  background:var(--ink);color:var(--on-dark);
  padding-block:clamp(5rem, 10vw, 8.5rem);
  text-align:center;
  position:relative;overflow:hidden;
}
.cta-dark::before{
  content:"";position:absolute;inset:auto -10% -55% -10%;height:80%;
  background:radial-gradient(ellipse at center, oklch(0.66 0.180 45 / 0.22), transparent 65%);
  pointer-events:none;
}
.cta-dark h2{
  font-size:clamp(2.6rem, 6vw, 4.6rem);font-weight:900;color:var(--on-dark);
  margin-bottom:1.2rem;
}
.cta-dark h2 em{font-style:normal;color:var(--accent-hot)}
.cta-dark p{color:var(--on-dark-2);max-width:36rem;margin:0 auto 2.4rem}
.cta-dark .ctas{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem;position:relative}

/* ── Footer ─────────────────────────────────────────── */
footer{background:oklch(0.12 0.010 60);color:var(--on-dark-2);padding-block:4rem 2rem}
.footer-grid{
  display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:2.5rem;
  padding-bottom:2.8rem;border-bottom:1px solid var(--line-dark);
}
.footer-logo img{height:52px;width:auto}
.footer-brand p{font-size:0.92rem;margin-top:1.1rem;max-width:26rem}
.social-row{margin-top:1.2rem}
.social-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:50%;
  border:1px solid var(--line-dark);color:var(--on-dark);
  font-weight:700;transition:background 0.15s ease, border-color 0.15s ease;
}
.social-btn:hover{background:var(--accent);border-color:var(--accent);color:oklch(0.13 0.01 60)}
.footer-col h4{
  font-family:var(--font-head);text-transform:uppercase;font-weight:800;
  font-size:1.05rem;color:var(--on-dark);margin-bottom:1.1rem;letter-spacing:0.04em;
}
.footer-links{display:grid;gap:0.55rem}
.footer-links a{font-size:0.92rem;transition:color 0.15s ease}
.footer-links a:hover{color:var(--accent-hot)}
.footer-links li{font-size:0.92rem}
.footer-bottom{
  display:flex;flex-wrap:wrap;gap:0.6rem 2rem;justify-content:space-between;
  padding-top:1.6rem;font-size:0.84rem;
}
.footer-bottom a{text-decoration:underline;text-underline-offset:3px}
.footer-bottom a:hover{color:var(--accent-hot)}
@media(max-width:900px){.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.footer-grid{grid-template-columns:1fr}}

/* ── Mobile sticky bar ──────────────────────────────── */
.mobile-sticky{
  display:none;
  position:fixed;inset-inline:0;bottom:0;z-index:95;
  background:oklch(0.12 0.010 60 / 0.97);
  backdrop-filter:blur(10px);
  padding:0.65rem 0.8rem calc(0.65rem + env(safe-area-inset-bottom));
  gap:0.7rem;
}
.mobile-sticky a{
  flex:1;text-align:center;font-weight:700;font-size:0.95rem;
  padding:0.85rem 0.5rem;border-radius:var(--r-btn);
}
.ms-quote{background:var(--accent);color:oklch(0.13 0.01 60)}
.ms-call{border:2px solid oklch(1 0 0 / 0.5);color:var(--on-dark)}
@media(max-width:768px){
  .mobile-sticky{display:flex}
  body{padding-bottom:70px}
}

/* ── Mobile alignment: one rhythm — text left, buttons full-width ── */
@media(max-width:560px){
  .sec-header.center{text-align:left;margin-inline:0}
  .cta-dark{text-align:left}
  .cta-dark p{margin:0 0 2.4rem}
  .cta-dark .ctas{justify-content:flex-start}
  .featured-testi{text-align:left}
  .featured-testi .testi-reviewer{justify-content:flex-start}
  .section-action{justify-content:flex-start}
  .hero-ctas .btn,.section-action .btn,.cta-dark .ctas .btn{width:100%}
}

/* ── Quote modal ────────────────────────────────────── */
.modal-backdrop{
  position:fixed;inset:0;z-index:120;
  background:oklch(0.1 0.01 60 / 0.7);
  display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;transition:opacity 0.2s ease, visibility 0.2s;
  padding:1rem;
}
.modal-backdrop.open{opacity:1;visibility:visible}
.modal-box{
  background:var(--paper);border-radius:var(--r-card);
  width:min(720px, 100%);max-height:90dvh;
  display:flex;flex-direction:column;overflow:hidden;
}
.modal-head{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.1rem 1.4rem;border-bottom:1px solid var(--line);
}
.modal-head h3{font-size:1.3rem}
.modal-head h3 em{font-style:normal;color:var(--accent-deep)}
.modal-x{font-size:1.9rem;line-height:1;color:var(--ink-soft)}
.modal-body{flex:1;min-height:420px}
.modal-body iframe{width:100%;height:100%;border:0;min-height:420px}

/* ── Reveal animation ───────────────────────────────── */
/* Hidden state only when JS is running (main.js adds html.js) so
   no-JS visitors and crawlers always see full content. */
html.js .fade-up{opacity:0;transform:translateY(26px);transition:opacity 0.65s cubic-bezier(0.16,1,0.3,1), transform 0.65s cubic-bezier(0.16,1,0.3,1)}
html.js .fade-up.visible{opacity:1;transform:none}
section[id]{scroll-margin-top:84px}
.d1{transition-delay:0.08s}
.d2{transition-delay:0.16s}
.d3{transition-delay:0.24s}

@media print{
  html.js .fade-up{opacity:1;transform:none;transition:none}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  html.js .fade-up{opacity:1;transform:none;transition:none}
  .btn,.svc-card img,.proof-card img{transition:none}
  .hero-video{display:none}
}

/* ── Small screens ──────────────────────────────────── */
@media(max-width:900px){
  .nav-links,.nav-right{display:none}
  .hamburger{display:flex}
  .hero-wrap{padding-block:8rem 3.5rem}
}