/*
Theme Name: Car Towing Service
Theme URI: https://example.com/
Author: Universal Digi
Author URI: https://universaldigi.com/
Description: Conversion focused theme for Car Towing Service, Hyderabad. Built as a Google Ads landing site. Call and WhatsApp CTAs only, no forms. Creates its own pages and menu on activation.
Version: 1.0.0
Requires at least: 5.9
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: car-towing-service
Tags: business, landing-page, one-column, custom-menu, custom-logo
*/

/* ==========================================================================
   Car Towing Service, Hyderabad
   Base stylesheet. White + blue system.
   ========================================================================== */

:root{
  --blue:#0B57D0;
  --blue-600:#1466E0;
  --blue-700:#0A47AB;
  --blue-900:#062F73;
  --navy:#07182E;
  --navy-2:#0C2444;
  --ink:#0D1B2A;
  --muted:#56667C;
  --tint:#EEF4FF;
  --tint-2:#F6F9FE;
  --line:#DCE5F2;
  --white:#FFFFFF;
  --star:#F5A524;
  --green:#1FA855;

  --wrap:1200px;
  --r-sm:10px;
  --r:14px;
  --r-lg:20px;

  --shadow-sm:0 1px 2px rgba(7,24,46,.06), 0 2px 8px rgba(7,24,46,.05);
  --shadow:0 10px 30px rgba(7,24,46,.09);
  --shadow-lg:0 24px 60px rgba(7,24,46,.16);

  --display:"Oswald", "Arial Narrow", Impact, sans-serif;
  --body:"Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

  --sp-sec:clamp(60px, 7.5vw, 104px);
}

*,*::before,*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%; scroll-behavior:smooth;
  color-scheme:light;
  scrollbar-color:#BCCCE6 var(--tint-2);
  scrollbar-width:thin;
}

/* Browser surfaces we did not draw, themed to the palette */
::selection{background:var(--blue); color:#fff}
::-webkit-scrollbar{width:11px; height:11px}
::-webkit-scrollbar-track{background:var(--tint-2)}
::-webkit-scrollbar-thumb{background:#C2D2EA; border-radius:99px; border:3px solid var(--tint-2)}
::-webkit-scrollbar-thumb:hover{background:#9DB4D6}
:focus-visible{outline:2px solid var(--blue); outline-offset:3px; border-radius:5px}
.section--navy :focus-visible,.ctaband :focus-visible,.hero :focus-visible,.phero :focus-visible,.footer :focus-visible{outline-color:#7FB0FF}

body{
  margin:0;
  font-family:var(--body);
  font-size:16px;
  line-height:1.65;
  color:var(--ink);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%; height:auto; display:block}
a{color:inherit; text-decoration:none; text-underline-offset:3px}
button{font:inherit}

h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:700;
  line-height:1.05;
  letter-spacing:-.004em;
  text-transform:uppercase;
  text-wrap:balance;
  margin:0 0 .5em;
  color:var(--ink);
}
h1{font-size:clamp(2.1rem, 5.4vw, 4rem); letter-spacing:-.012em}
h2{font-size:clamp(1.7rem, 3.6vw, 2.75rem)}
h3{font-size:clamp(1.12rem, 1.7vw, 1.4rem); letter-spacing:0}
h4{font-size:1.02rem; letter-spacing:.02em}
p{margin:0 0 1rem; text-wrap:pretty}
p:last-child{margin-bottom:0}

/* Phone numbers and figures line up column to column */
.num,.header__phone b,.footer__call,.ccard a.big,.hero__stats b,.gsummary b,.step__n,.stat-float b,.topbar__rate{
  font-variant-numeric:tabular-nums;
}

.wrap{width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:20px}
.section{padding-block:var(--sp-sec)}
.section--tint{background:var(--tint-2)}
.section--navy{background:var(--navy); color:#DCE6F5}
.section--navy h2,.section--navy h3{color:#fff}

.center{text-align:center}
.lead{font-size:clamp(1rem,1.25vw,1.12rem); color:var(--muted)}
.section--navy .lead{color:#A9BCD6}
.measure{max-width:62ch}

/* ---------- eyebrow ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--display); font-weight:600; font-size:.78rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--blue);
  margin-bottom:14px;
}
.eyebrow::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--blue)}
.eyebrow--light{color:#7FB0FF}
.eyebrow--light::before{background:#7FB0FF}
.eyebrow--onimg{color:#fff}
.eyebrow--onimg::before{background:#4E9BFF}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--display); font-weight:600; font-size:1rem;
  letter-spacing:.045em; text-transform:uppercase;
  padding:15px 26px; border-radius:var(--r-sm);
  border:2px solid transparent; cursor:pointer;
  transition:transform .16s ease, background .16s ease, box-shadow .16s ease, color .16s ease;
  white-space:nowrap;
}
.btn svg{width:19px; height:19px; flex:none}
.btn--primary{background:var(--blue); color:#fff; box-shadow:0 8px 20px rgba(11,87,208,.28)}
.btn--primary:hover{background:var(--blue-700); transform:translateY(-2px); box-shadow:0 12px 26px rgba(11,87,208,.34)}
.btn--ghost{background:transparent; color:#fff; border-color:rgba(255,255,255,.55)}
.btn--ghost:hover{background:#fff; color:var(--ink); border-color:#fff; transform:translateY(-2px)}
.btn--line{background:#fff; color:var(--blue); border-color:var(--line)}
.btn--line:hover{border-color:var(--blue); transform:translateY(-2px)}
.btn--wa{background:#1FA855; color:#fff; box-shadow:0 8px 20px rgba(31,168,85,.26)}
.btn--wa:hover{background:#188443; transform:translateY(-2px)}
.btn--lg{padding:17px 32px; font-size:1.06rem}

/* ---------- top bar ---------- */
.topbar{background:var(--navy); color:#B9CBE4; font-size:.83rem}
.topbar .wrap{display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:40px}
.topbar__list{display:flex; align-items:center; gap:22px; list-style:none; margin:0; padding:0}
.topbar__list li{display:flex; align-items:center; gap:7px}
.topbar svg{width:15px; height:15px; color:#4E9BFF; flex:none}
.topbar a{display:inline-block; padding-block:7px}
.topbar a:hover{color:#fff}
.topbar__rate strong{color:#fff}
.stars{color:var(--star); letter-spacing:.06em}

/* ---------- header ---------- */
.header{position:sticky; top:0; z-index:60; background:#fff; border-bottom:1px solid var(--line)}
.header.is-stuck{box-shadow:var(--shadow-sm)}
.header .wrap{display:flex; align-items:center; gap:18px; min-height:76px}

.brand{display:flex; align-items:center; gap:13px; flex:none}
.brand__mark{width:58px; height:auto; flex:none}
.brand__name{font-family:var(--display); font-weight:700; font-size:1.18rem; line-height:1; letter-spacing:.02em; text-transform:uppercase}
.brand__name span{color:var(--blue)}
.brand__sub{display:block; font-family:var(--body); font-size:.66rem; font-weight:600; letter-spacing:.18em; color:var(--muted); text-transform:uppercase; margin-top:5px}

/* The monogram is navy and blue, so on dark grounds it sits on a white chip */
.brand--light .brand__mark{
  background:#fff; border-radius:11px; padding:7px 9px; width:62px;
}

.nav{margin-left:auto}
.nav__list{display:flex; align-items:center; gap:30px; list-style:none; margin:0; padding:0}
.nav__list a{
  font-weight:600; font-size:.94rem; color:var(--ink);
  position:relative; padding-block:6px; transition:color .15s ease;
}
.nav__list a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:var(--blue); transform:scaleX(0); transform-origin:left; transition:transform .2s ease;
}
.nav__list a:hover{color:var(--blue)}
.nav__list a:hover::after,.nav__list a[aria-current="page"]::after{transform:scaleX(1)}
.nav__list a[aria-current="page"]{color:var(--blue)}

.header__cta{display:flex; align-items:center; gap:10px; flex:none}
.header__phone{
  display:flex; align-items:center; gap:11px;
  background:var(--blue); color:#fff; border-radius:var(--r-sm);
  padding:11px 20px; transition:background .16s ease, transform .16s ease;
}
.header__phone:hover{background:var(--blue-700); transform:translateY(-1px)}
.header__phone svg{width:26px; height:26px; flex:none}
.header__phone small{display:block; font-size:.66rem; letter-spacing:.13em; text-transform:uppercase; opacity:.82; line-height:1.3}
.header__phone b{font-family:var(--display); font-weight:600; font-size:1.06rem; letter-spacing:.02em; line-height:1.2}

.burger{
  display:none; width:46px; height:46px; border:1px solid var(--line); background:#fff;
  border-radius:var(--r-sm); cursor:pointer; align-items:center; justify-content:center; flex:none;
}
.burger span{display:block; width:20px; height:2px; background:var(--ink); position:relative}
.burger span::before,.burger span::after{content:""; position:absolute; left:0; width:20px; height:2px; background:var(--ink); transition:transform .2s ease, top .2s ease}
.burger span::before{top:-6px}
.burger span::after{top:6px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{top:0; transform:rotate(45deg)}
.burger[aria-expanded="true"] span::after{top:0; transform:rotate(-45deg)}

/* ---------- hero ---------- */
.hero{position:relative; background:var(--navy); color:#fff; overflow:hidden}
.hero__bg{position:absolute; inset:0}
.hero__bg img{width:100%; height:100%; object-fit:cover; object-position:center}
.hero__bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(5,17,33,.94) 0%, rgba(5,17,33,.86) 38%, rgba(5,17,33,.5) 68%, rgba(5,17,33,.38) 100%);
}
.hero__inner{position:relative; z-index:2; padding-block:clamp(56px, 8vw, 112px)}
.hero h1{color:#fff; max-width:19ch}
.hero h1 em{font-style:normal; color:#4E9BFF}
.hero__text{font-size:clamp(1rem,1.3vw,1.14rem); color:#C5D4E8; max-width:56ch; margin-bottom:28px}
.hero__actions{display:flex; flex-wrap:wrap; gap:14px; margin-bottom:34px}

.hero__chips{display:flex; flex-wrap:wrap; gap:10px; margin:0 0 38px; list-style:none; padding:0}
.hero__chips li{
  display:flex; align-items:center; gap:8px;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2);
  border-radius:100px; padding:8px 16px; font-size:.86rem; font-weight:500;
}
.hero__chips svg{width:15px; height:15px; color:#4E9BFF; flex:none}
.hero__chips .stars{font-size:.9rem}

.hero__stats{display:flex; flex-wrap:wrap; gap:clamp(24px,5vw,64px); border-top:1px solid rgba(255,255,255,.18); padding-top:28px}
.hero__stats div{min-width:110px}
.hero__stats b{display:block; font-family:var(--display); font-weight:700; font-size:clamp(1.8rem,3.2vw,2.6rem); line-height:1; color:#fff}
.hero__stats b i{font-style:normal; color:#4E9BFF}
.hero__stats span{display:block; font-size:.82rem; color:#A9BCD6; margin-top:8px; letter-spacing:.02em}

/* ---------- page hero (inner pages) ---------- */
.phero{position:relative; background:var(--navy); color:#fff; overflow:hidden}
.phero__bg{position:absolute; inset:0}
.phero__bg img{width:100%; height:100%; object-fit:cover}
.phero__bg::after{content:""; position:absolute; inset:0; background:linear-gradient(95deg, rgba(5,17,33,.93) 20%, rgba(5,17,33,.68) 100%)}
.phero__inner{position:relative; z-index:2; padding-block:clamp(48px,6vw,84px)}
.phero h1{color:#fff; margin-bottom:14px; font-size:clamp(1.9rem,4.4vw,3.2rem)}
.phero p{color:#BACBE2; max-width:60ch}
.crumbs{display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:.82rem; color:#8FA6C4; margin-top:16px}
.crumbs a{display:inline-block; padding-block:8px}
.crumbs a:hover{color:#fff}
.crumbs span{color:#4E9BFF}

/* ---------- assurance band, overlaps the hero ---------- */
.assure{position:relative; z-index:3; margin-top:-52px}
.assure__card{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg); overflow:hidden;
  display:grid; grid-template-columns:1fr 1fr 1fr auto;
}
.assure__item{padding:28px 30px; border-left:1px solid var(--line)}
.assure__item:first-child{border-left:0}
.assure__item h3{font-size:1.08rem; margin-bottom:7px; display:flex; align-items:center; gap:10px}
.assure__item h3 svg{width:20px; height:20px; color:var(--blue); flex:none}
.assure__item p{color:var(--muted); font-size:.9rem; line-height:1.55}
.assure__cta{
  display:flex; flex-direction:column; justify-content:center; gap:10px;
  padding:24px 30px; background:var(--tint); border-left:1px solid var(--line); min-width:250px;
}
.assure__cta small{font-size:.76rem; font-weight:600; letter-spacing:.11em; text-transform:uppercase; color:var(--muted)}

/* ---------- CTA panel, used where the forms used to sit ---------- */
.panel{
  background:var(--tint); border:1px solid #CFE0FA; border-radius:var(--r-lg);
  padding:clamp(28px,4vw,48px); display:flex; flex-wrap:wrap;
  align-items:center; justify-content:space-between; gap:28px;
}
.panel h2{margin-bottom:10px; max-width:22ch}
.panel p{color:var(--muted); max-width:52ch}
.panel__actions{display:flex; flex-wrap:wrap; gap:13px}

/* ---------- big call block on the contact page ---------- */
.bigcall{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--shadow); padding:clamp(26px,3vw,36px);
}
.bigcall__label{
  display:block; font-size:.76rem; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); margin-bottom:8px;
}
.bigcall__num{
  display:inline-block; font-family:var(--display); font-weight:700;
  font-size:clamp(1.9rem,3.6vw,2.7rem); line-height:1; letter-spacing:.01em;
  color:var(--blue); font-variant-numeric:tabular-nums; margin-bottom:24px;
  transition:color .16s ease;
}
.bigcall__num:hover{color:var(--blue-700)}
.bigcall__actions{display:flex; flex-wrap:wrap; gap:13px}
.bigcall__actions .btn{flex:1 1 180px}

/* ---------- section head ---------- */
.shead{max-width:64ch; margin-bottom:clamp(32px,4vw,52px)}
.shead--center{margin-inline:auto; text-align:center}
.shead p{color:var(--muted)}
.section--navy .shead p{color:#A9BCD6}

.srow{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:clamp(30px,4vw,48px)}
.srow .shead{margin-bottom:0}

/* ---------- grids ---------- */
.grid{display:grid; gap:20px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}

/* ---------- service card ---------- */
.scard{
  position:relative;
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden; display:flex; flex-direction:column;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.scard:hover{transform:translateY(-4px); box-shadow:var(--shadow); border-color:#BFD4F5}
.scard__img{position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--tint)}
.scard__img img{width:100%; height:100%; object-fit:cover; transition:transform .5s ease}
.scard:hover .scard__img img{transform:scale(1.05)}
.scard__body{padding:22px 22px 24px; display:flex; flex-direction:column; flex:1}
.scard__body h3{margin-bottom:10px}
.scard__body p{color:var(--muted); font-size:.94rem; margin-bottom:16px}
.scard__link{
  margin-top:auto; display:inline-flex; align-items:center; gap:8px;
  font-family:var(--display); font-weight:600; font-size:.88rem; letter-spacing:.06em;
  text-transform:uppercase; color:var(--blue); padding-block:9px;
}
/* The whole card is the target, not just the two words */
.scard__link::after{content:""; position:absolute; inset:0; border-radius:var(--r)}
.scard__link svg{width:15px; height:15px; transition:transform .18s ease}
.scard:hover .scard__link svg{transform:translateX(4px)}

.badge-24{
  position:absolute; top:12px; left:12px; z-index:2;
  background:var(--blue); color:#fff; font-family:var(--display); font-weight:600;
  font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
  padding:6px 12px; border-radius:100px;
}

/* ---------- reasons matrix, hairlines instead of six boxes ---------- */
.wgrid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line);
  border-radius:var(--r-lg); overflow:hidden;
}
.wgrid > div{
  background:#fff; padding:clamp(26px,2.6vw,34px) clamp(24px,2.4vw,32px);
  transition:background .22s ease;
}
.wgrid--4{grid-template-columns:repeat(4,1fr)}
.wgrid--2{grid-template-columns:repeat(2,1fr)}
.wgrid > div:hover{background:var(--tint-2)}
.wgrid h3{display:flex; align-items:center; gap:12px; font-size:1.08rem; margin-bottom:10px}
.wgrid h3 svg{width:22px; height:22px; color:var(--blue); flex:none}
.wgrid p{color:var(--muted); font-size:.93rem; line-height:1.6}

/* ---------- feature card ---------- */
.fcard{
  display:flex; gap:16px; background:#fff; border:1px solid var(--line);
  border-radius:var(--r); padding:22px; transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.fcard:hover{border-color:#BFD4F5; box-shadow:var(--shadow); transform:translateY(-3px)}
.fcard__ic{
  width:46px; height:46px; flex:none; border-radius:11px;
  background:var(--tint); color:var(--blue);
  display:flex; align-items:center; justify-content:center;
}
.fcard__ic svg{width:23px; height:23px}
.fcard h3{font-size:1.06rem; margin-bottom:7px}
.fcard p{color:var(--muted); font-size:.92rem}

/* ---------- media split ---------- */
.split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,68px); align-items:center}
.split--wide-text{grid-template-columns:1fr 1.1fr}
.split__media{position:relative}
.split__media img{border-radius:var(--r-lg); width:100%; object-fit:cover}
.split__media--tall img{aspect-ratio:4/5}
.split__media--wide img{aspect-ratio:4/3}
.split.is-reverse .split__media{order:2}

.stat-float{
  position:absolute; right:-14px; bottom:-22px;
  background:var(--blue); color:#fff; border-radius:var(--r);
  padding:20px 24px; box-shadow:var(--shadow-lg); max-width:230px;
}
.stat-float b{display:block; font-family:var(--display); font-weight:700; font-size:2.1rem; line-height:1}
.stat-float span{display:block; font-size:.8rem; opacity:.92; margin-top:6px; line-height:1.4}

/* ---------- ticks ---------- */
.ticks{list-style:none; margin:0 0 26px; padding:0; display:grid; gap:13px}
.ticks li{display:flex; gap:12px; align-items:flex-start; font-size:.97rem}
.ticks svg{width:21px; height:21px; flex:none; color:var(--blue); margin-top:2px}
.section--navy .ticks svg{color:#4E9BFF}
.ticks--2{grid-template-columns:repeat(2,1fr); gap:13px 26px}

/* ---------- steps ---------- */
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:20px}
.step{position:relative; background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:26px 22px}
.step__n{
  font-family:var(--display); font-weight:700; font-size:2.6rem; line-height:1;
  color:var(--tint); -webkit-text-stroke:1px #C3D6F5; margin-bottom:12px; display:block;
}
.step h3{font-size:1.06rem; margin-bottom:8px}
.step p{color:var(--muted); font-size:.92rem}
.section--navy .step{background:var(--navy-2); border-color:rgba(255,255,255,.12)}
.section--navy .step__n{color:transparent; -webkit-text-stroke:1px #3E6FB5}
.section--navy .step p{color:#A9BCD6}

/* ---------- areas ---------- */
.areas{display:flex; flex-wrap:wrap; gap:10px; list-style:none; margin:0; padding:0}
.areas li{
  display:flex; align-items:center; gap:8px;
  border:1px solid var(--line); background:#fff; border-radius:100px;
  padding:9px 18px; font-size:.9rem; font-weight:500;
  transition:border-color .16s ease, background .16s ease, color .16s ease;
}
.areas li:hover{border-color:var(--blue); background:var(--tint); color:var(--blue-700)}
.areas svg{width:14px; height:14px; color:var(--blue); flex:none}

/* ---------- reviews ---------- */
.rcard{background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:26px; display:flex; flex-direction:column}
.rcard .stars{font-size:1.05rem; margin-bottom:12px}
.rcard p{color:var(--ink); font-size:.97rem; margin-bottom:18px}
.rcard__who{margin-top:auto; padding-top:18px; border-top:1px solid var(--line)}
.rcard__who b{display:block; font-family:var(--display); font-weight:600; font-size:1.02rem; letter-spacing:.02em; text-transform:uppercase}
.rcard__who span{display:block; font-size:.82rem; color:var(--muted); margin-top:3px}

.gsummary{
  display:flex; flex-wrap:wrap; align-items:center; gap:14px 24px;
  background:var(--tint); border:1px solid #CFE0FA; border-radius:var(--r);
  padding:18px 24px; margin-bottom:30px;
}
.gsummary b{font-family:var(--display); font-weight:700; font-size:2rem; line-height:1}
.gsummary span{font-size:.9rem; color:var(--muted)}

/* ---------- CTA band ---------- */
.ctaband{position:relative; background:var(--blue); color:#fff; overflow:hidden}
.ctaband::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(900px 400px at 88% 0%, rgba(255,255,255,.16), transparent 70%);
}
.ctaband .wrap{position:relative; z-index:2; padding-block:clamp(48px,6vw,76px)}
.ctaband__in{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:28px}
.ctaband h2{color:#fff; margin-bottom:10px; max-width:20ch}
.ctaband p{color:rgba(255,255,255,.88); max-width:48ch}
.ctaband .btn--primary{background:#fff; color:var(--blue-700); box-shadow:0 10px 26px rgba(0,0,0,.18)}
.ctaband .btn--primary:hover{background:#EAF1FF; color:var(--blue-700)}
.ctaband__actions{display:flex; flex-wrap:wrap; gap:14px}

/* ---------- contact blocks ---------- */
.ccard{
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  padding:26px; display:flex; flex-direction:column; gap:12px; height:100%;
}
.ccard__ic{width:46px; height:46px; border-radius:11px; background:var(--tint); color:var(--blue); display:flex; align-items:center; justify-content:center}
.ccard__ic svg{width:23px; height:23px}
.ccard h3{margin-bottom:0}
.ccard p{color:var(--muted); font-size:.93rem}
.ccard a.big{font-family:var(--display); font-weight:600; font-size:1.35rem; color:var(--blue); letter-spacing:.02em}
.ccard a.big:hover{color:var(--blue-700)}

.mapbox{border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; background:var(--tint)}
.mapbox iframe{display:block; width:100%; height:420px; border:0}

/* ---------- footer ---------- */
.footer{background:var(--navy); color:#9FB4D0; padding-top:clamp(48px,6vw,72px); font-size:.93rem}
.footer a:hover{color:#fff}
.footer__top{display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:36px; padding-bottom:44px}
.footer h4{color:#fff; font-size:.92rem; letter-spacing:.11em; margin-bottom:18px}
.footer ul{list-style:none; margin:0; padding:0; display:grid; gap:7px}
.footer ul li{padding-block:3px}
.footer ul a{display:inline-block; padding-block:5px}
.footer .brand__name{color:#fff}
.footer .brand__sub{color:#7E96B8}
.footer__about{max-width:38ch; margin-top:18px; color:#9FB4D0}
.footer__call{
  display:inline-flex; align-items:center; gap:11px; margin-top:20px;
  background:var(--blue); color:#fff; padding:13px 22px; border-radius:var(--r-sm);
  font-family:var(--display); font-weight:600; letter-spacing:.03em; font-size:1.05rem;
}
.footer__call:hover{background:var(--blue-600); color:#fff}
.footer__call svg{width:20px; height:20px}
.footer__bottom{
  border-top:1px solid rgba(255,255,255,.12); padding-block:22px;
  display:flex; flex-wrap:wrap; gap:12px 24px; justify-content:space-between; font-size:.85rem; color:#7E96B8;
}

/* ---------- sticky mobile call bar ---------- */
.callbar{
  position:fixed; left:0; right:0; bottom:0; z-index:80;
  display:none; gap:10px; padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  background:#fff; border-top:1px solid var(--line); box-shadow:0 -6px 24px rgba(7,24,46,.12);
}
.callbar .btn{flex:1; padding:15px 12px; font-size:.98rem}

/* ---------- misc ---------- */
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
.skip{position:absolute; left:-9999px; top:0; z-index:200; background:var(--blue); color:#fff; padding:12px 18px}
.skip:focus{left:10px; top:10px}

/* One authored entrance: a short exponential settle, staggered across a row */
.reveal{opacity:0; transform:translateY(16px)}
.reveal.is-in{
  opacity:1; transform:none;
  transition:opacity .62s cubic-bezier(.16,1,.3,1), transform .62s cubic-bezier(.16,1,.3,1);
}
.stagger.is-in > *{animation:rise .62s cubic-bezier(.16,1,.3,1) backwards}
.stagger.is-in > *:nth-child(2){animation-delay:.06s}
.stagger.is-in > *:nth-child(3){animation-delay:.12s}
.stagger.is-in > *:nth-child(4){animation-delay:.18s}
.stagger.is-in > *:nth-child(5){animation-delay:.24s}
.stagger.is-in > *:nth-child(6){animation-delay:.3s}
@keyframes rise{from{opacity:0; transform:translateY(16px)} to{opacity:1; transform:none}}

@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1; transform:none}
  .stagger.is-in > *{animation:none}
  *{animation-duration:.01ms !important; transition-duration:.01ms !important; scroll-behavior:auto !important}
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1080px){
  .footer__top{grid-template-columns:1fr 1fr; gap:34px}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .nav__list{gap:22px}
  .header__phone{padding:10px 15px}
  .header__phone b{font-size:.98rem}
}

@media (max-width:900px){
  .topbar{display:none}
  .header .wrap{min-height:66px; gap:12px}
  .burger{display:flex}
  .nav{
    position:fixed; inset:66px 0 auto 0; background:#fff; border-bottom:1px solid var(--line);
    box-shadow:var(--shadow); padding:8px 20px 22px; margin:0;
    transform:translateY(-12px); opacity:0; pointer-events:none; transition:opacity .2s ease, transform .2s ease;
    max-height:calc(100vh - 66px); overflow-y:auto;
  }
  .nav.is-open{opacity:1; transform:none; pointer-events:auto}
  .nav__list{flex-direction:column; align-items:stretch; gap:0}
  .nav__list li{border-bottom:1px solid var(--line)}
  .nav__list li:last-child{border-bottom:0}
  .nav__list a{display:block; padding:15px 2px; font-size:1rem}
  .nav__list a::after{display:none}
  .header__cta{margin-left:auto}
  .header__phone small{display:none}
  .header__phone{padding:10px 13px; gap:8px}
  .header__phone svg{width:21px; height:21px}
  .brand{gap:10px; min-width:0}
  .brand__name{font-size:1.02rem}
  .brand__sub{font-size:.6rem; letter-spacing:.13em; margin-top:4px}

  .grid-3{grid-template-columns:repeat(2,1fr)}
  .wgrid,.wgrid--4,.wgrid--2{grid-template-columns:repeat(2,1fr)}
  .split{grid-template-columns:1fr; gap:34px}
  .split.is-reverse .split__media{order:0}
  .split__media--tall img{aspect-ratio:16/11}
  .stat-float{right:14px; bottom:-18px; padding:16px 20px}
  .stat-float b{font-size:1.7rem}
  .mapbox iframe{height:340px}
  .ctaband__in{flex-direction:column; align-items:flex-start}

  .assure__card{grid-template-columns:1fr 1fr}
  .assure__item:nth-child(3){border-left:0; border-top:1px solid var(--line)}
  .assure__cta{border-top:1px solid var(--line); min-width:0}
  .panel{flex-direction:column; align-items:flex-start}
}

@media (max-width:760px){
  body{padding-bottom:76px}
  .callbar{display:flex}
  .hero__inner{padding-block:34px 48px}
  .hero__bg::after{background:linear-gradient(180deg, rgba(5,17,33,.9) 0%, rgba(5,17,33,.82) 55%, rgba(5,17,33,.9) 100%)}
  .hero h1{max-width:none}
  .hero__text{font-size:1rem; line-height:1.55; margin-bottom:22px}
  .hero__actions{gap:11px; margin-bottom:24px}
  .hero__actions .btn{flex:1 1 100%}
  .hero__chips{margin-bottom:26px; gap:8px}
  .hero__chips li{padding:7px 14px; font-size:.82rem}
  .hero__stats{gap:20px 30px; padding-top:22px}
  .hero__stats div{min-width:0; flex:1 1 40%}
  .assure{margin-top:-28px}
  .brand__mark{width:44px}
  .brand--light .brand__mark{width:52px}
  .header .wrap{gap:10px}
}

@media (max-width:640px){
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .wgrid,.wgrid--4,.wgrid--2{grid-template-columns:1fr}
  .ticks--2{grid-template-columns:1fr}
  .footer__top{grid-template-columns:1fr; gap:30px; padding-bottom:34px}
  .gsummary{padding:16px 18px}
  .gsummary .btn{margin-left:0 !important; width:100%}
  .section{padding-block:52px}
  .ccard{padding:22px}
  .mapbox iframe{height:290px}

  .assure__card{grid-template-columns:1fr}
  .assure__item{border-left:0; border-top:1px solid var(--line); padding:22px 20px}
  .assure__item:first-child{border-top:0}
  .assure__cta{padding:20px}
  .panel{padding:26px 20px}
  .panel__actions{width:100%}
  .panel__actions .btn{flex:1 1 100%}
}

@media (max-width:400px){
  .wrap{padding-inline:16px}
  .btn{padding:14px 18px; font-size:.95rem}
  .callbar .btn{font-size:.92rem; padding:14px 8px}
  .header__phone b{display:none}
}