/* ==========================================================================
   OK Clean — Design System
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@600;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root{
  /* Brand colours — derived from the existing OK Clean logo / site palette */
  --blue-50:  #eef6fc;
  --blue-100: #d7ebf9;
  --blue-200: #aed6f2;
  --blue-300: #74b7e6;
  --blue-400: #3a97d6;
  --blue-500: #1280c4;   /* primary brand blue  */
  --blue-600: #0d67a3;
  --blue-700: #0a5488;
  --blue-800: #0a4066;
  --blue-900: #0c2f4b;

  --amber-300: #ffd274;
  --amber-400: #ffc247;
  --amber-500: #ffb627;  /* accent amber */
  --amber-600: #ef9c0d;
  --amber-700: #c97e08;

  --ink-900: #121821;
  --ink-800: #1c2531;
  --ink-700: #2c3646;
  --body-600: #4c5666;
  --body-500: #626d7d;
  --line: #e2e8f0;
  --line-soft: #edf2f7;

  --surface: #ffffff;
  --surface-alt: #f4f8fb;
  --surface-blue: #eaf4fb;

  --success: #1f9d63;

  --font-head: 'Poppins', 'Segoe UI', sans-serif;
  --font-body: 'Inter', 'Segoe UI', sans-serif;

  --container: 1240px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 26px;
  --radius-full: 999px;

  --shadow-sm: 0 1px 2px rgba(12,32,58,.06), 0 1px 3px rgba(12,32,58,.08);
  --shadow-md: 0 8px 24px -8px rgba(12,32,58,.18);
  --shadow-lg: 0 24px 48px -16px rgba(12,32,58,.28);
  --shadow-glow: 0 0 0 1px rgba(18,128,196,.08), 0 16px 40px -12px rgba(18,128,196,.35);

  --ease: cubic-bezier(.65,0,.35,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

/* ---------- Reset ---------- */
*, *::before, *::after{ box-sizing: border-box; margin:0; padding:0; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}
body{
  font-family: var(--font-body);
  color: var(--body-600);
  background: var(--surface);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
input, textarea, select{ font:inherit; color:inherit; }
h1,h2,h3,h4{ font-family: var(--font-head); color: var(--ink-900); line-height:1.18; font-weight:700; letter-spacing:-.01em; }
h1{ font-weight:800; }

:focus-visible{ outline: 3px solid var(--amber-500); outline-offset: 3px; border-radius: 4px; }

.skip-link{
  position:absolute; left:1rem; top:-4rem; z-index:200;
  background:var(--blue-600); color:#fff; padding:.75rem 1.25rem; border-radius: var(--radius-sm);
  transition: top .25s var(--ease);
}
.skip-link:focus{ top:1rem; }

/* ---------- Layout ---------- */
.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:1.5rem; }
@media (min-width:768px){ .container{ padding-inline:2.5rem; } }

.section{ padding: clamp(3.5rem, 6vw, 6.5rem) 0; }
.section-alt{ background: var(--surface-alt); }
.section-dark{ background: var(--ink-900); color: #b9c3d1; }
.section-dark h2, .section-dark h3{ color:#fff; }

.eyebrow{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family: var(--font-head); font-weight:700; font-size:.78rem;
  letter-spacing:.14em; text-transform:uppercase; color: var(--blue-600);
  background: var(--surface-blue); padding:.4rem .9rem; border-radius: var(--radius-full);
  margin-bottom:1.1rem;
}
.eyebrow::before{ content:''; width:6px; height:6px; border-radius:50%; background: var(--amber-500); }

.section-head{ max-width: 640px; margin-bottom: 3rem; }
.section-head.center{ margin-inline:auto; text-align:center; }
.section-head h2{ font-size: clamp(1.7rem, 3vw, 2.4rem); margin-bottom:.85rem; }
.section-head p{ font-size:1.05rem; }

.grid{ display:grid; gap:1.75rem; }
@media (min-width:640px){ .grid-2{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:900px){ .grid-3{ grid-template-columns:repeat(3,1fr); } .grid-4{ grid-template-columns:repeat(4,1fr); } }
@media (min-width:640px) and (max-width:899px){ .grid-4{ grid-template-columns:repeat(2,1fr); } }

/* ---------- Buttons ---------- */
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  font-family: var(--font-head); font-weight:700; font-size:.95rem;
  padding: .95rem 1.7rem; border-radius: var(--radius-full);
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out), background-color .25s var(--ease), color .25s var(--ease);
  isolation:isolate; overflow:hidden; white-space:nowrap;
}
.btn svg{ width:18px; height:18px; transition: transform .35s var(--ease-out); }
.btn:hover{ transform: translateY(-3px); }
.btn:active{ transform: translateY(-1px); }

.btn-primary{ background: linear-gradient(135deg, var(--blue-500), var(--blue-700)); color:#fff; box-shadow: var(--shadow-glow); }
.btn-primary:hover{ box-shadow: 0 0 0 1px rgba(18,128,196,.12), 0 22px 48px -14px rgba(18,128,196,.55); }
.btn-primary:hover svg{ transform: translateX(4px); }

.btn-amber{ background: linear-gradient(135deg, var(--amber-400), var(--amber-600)); color: var(--ink-900); box-shadow: 0 16px 40px -14px rgba(239,156,13,.6); }
.btn-amber:hover svg{ transform: translateX(4px) rotate(8deg); }

.btn-ghost{ background: rgba(255,255,255,.08); color:#fff; border:1.5px solid rgba(255,255,255,.35); backdrop-filter: blur(6px); }
.btn-ghost:hover{ background: rgba(255,255,255,.16); border-color:#fff; }

.btn-outline{ background:transparent; color: var(--blue-600); border:1.5px solid var(--line); }
.btn-outline:hover{ border-color: var(--blue-500); background: var(--surface-blue); }

.btn-block{ width:100%; }
.btn-lg{ padding:1.1rem 2.1rem; font-size:1rem; }

/* ---------- Clip-path text reveal (hover micro-interaction) ---------- */
.reveal-text{ position:relative; display:inline-block; white-space:nowrap; }
.reveal-text::after{
  content: attr(data-text);
  position:absolute; inset:0; left:0; top:0;
  color: var(--amber-500);
  clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
  transition: clip-path .5s var(--ease-out);
  pointer-events:none;
}
a:hover .reveal-text::after, a:focus-visible .reveal-text::after, button:hover .reveal-text::after{
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
.reveal-text.on-dark::after{ color: var(--amber-400); }
.reveal-text.brand::after{ color: var(--blue-500); }

/* ==========================================================================
   Header
   ========================================================================== */
.top-strip{
  background: var(--ink-900); color:#c6cedb; font-size:.85rem;
}
.top-strip .container{ display:flex; align-items:center; justify-content:space-between; padding-block:.55rem; gap:1rem; flex-wrap:wrap; }
.top-strip-links{ display:flex; gap:1.5rem; flex-wrap:wrap; }
.top-strip-links a{ display:inline-flex; align-items:center; gap:.4rem; transition: color .2s var(--ease); }
.top-strip-links a:hover{ color: var(--amber-400); }
.top-strip-links svg{ width:15px; height:15px; flex-shrink:0; }
.top-strip-loc{ display:flex; align-items:center; gap:.4rem; color:#8b96a8; }
.top-strip-loc svg{ width:15px; height:15px; }

.site-header{
  position: sticky; top:0; z-index:100;
  background: rgba(255,255,255,.85); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-soft);
  transition: box-shadow .3s var(--ease), background-color .3s var(--ease);
}
.site-header.scrolled{ box-shadow: var(--shadow-md); }
.nav-row{ display:flex; align-items:center; justify-content:space-between; padding-block:.85rem; gap:1.5rem; }

/* Logo */
.brand{ display:flex; align-items:center; gap:.65rem; flex-shrink:0; }
.brand-mark{ width:44px; height:44px; flex-shrink:0; transition: transform .45s var(--ease-out); }
.brand:hover .brand-mark{ transform: rotate(-8deg) scale(1.06); }
.brand-word{ font-family:var(--font-head); font-weight:800; font-size:1.62rem; line-height:1; color: var(--ink-900); }
.brand-word .ok{ color: var(--blue-600); }
.brand-word small{ display:block; font-family:var(--font-body); font-weight:600; font-size:.66rem; letter-spacing:.145em; text-transform:uppercase; color: var(--body-500); margin-top:.22rem; }

.main-nav{ display:none; }
.main-nav ul{ display:flex; align-items:center; gap:2.1rem; }
.main-nav a{ position:relative; font-family:var(--font-head); font-weight:600; font-size:.96rem; color: var(--ink-800); padding:.4rem 0; }
.main-nav a::before{
  content:''; position:absolute; left:0; bottom:-2px; width:0; height:2px; background: var(--amber-500);
  transition: width .35s var(--ease-out);
}
.main-nav a:hover::before, .main-nav a.active::before{ width:100%; }
.main-nav a.active{ color: var(--blue-600); }

.header-cta{ display:none; align-items:center; gap:.9rem; }
.header-phone{ display:flex; align-items:center; gap:.55rem; font-family:var(--font-head); font-weight:700; color:var(--ink-900); }
.header-phone .icon-badge{ background: var(--surface-blue); color:var(--blue-600); }
.header-phone span small{ display:block; font-family:var(--font-body); font-weight:500; font-size:.68rem; color:var(--body-500); }

.icon-badge{ display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:50%; flex-shrink:0; }
.icon-badge svg{ width:18px; height:18px; }

.menu-toggle{ display:flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:var(--radius-sm); }
.menu-toggle svg{ width:24px; height:24px; }
@media (min-width:1024px){ .menu-toggle{ display:none; } .main-nav{ display:block; } .header-cta{ display:flex; } }

/* Mobile nav drawer */
.mobile-nav{
  position:fixed; inset:0 0 0 auto; width:min(88vw, 360px); background:#fff; z-index:200;
  transform: translateX(100%); transition: transform .4s var(--ease-out);
  box-shadow: -20px 0 60px rgba(12,32,58,.25); padding: 1.75rem 1.5rem; overflow-y:auto;
}
.mobile-nav.open{ transform: translateX(0); }
.mobile-nav-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:2rem; }
.mobile-nav ul{ display:flex; flex-direction:column; gap:.3rem; }
.mobile-nav ul a{ display:block; font-family:var(--font-head); font-weight:700; font-size:1.15rem; padding:.85rem 0; border-bottom:1px solid var(--line-soft); color:var(--ink-900); }
.mobile-nav-contact{ margin-top:2rem; padding-top:1.5rem; border-top:1px solid var(--line-soft); display:flex; flex-direction:column; gap:1rem; }
.scrim{ position:fixed; inset:0; background:rgba(10,20,35,.5); z-index:190; opacity:0; pointer-events:none; transition:opacity .35s var(--ease); backdrop-filter: blur(2px); }
.scrim.open{ opacity:1; pointer-events:auto; }
body.nav-open{ overflow:hidden; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  position:relative; overflow:hidden;
  background: radial-gradient(120% 140% at 15% -10%, #0f4a78 0%, var(--blue-800) 38%, var(--ink-900) 100%);
  color:#fff; padding: clamp(3.5rem,8vw,7rem) 0 clamp(4.5rem, 9vw, 8rem);
}
.hero-bg{ position:absolute; inset:0; z-index:0; opacity:.55; }
.hero-blob{ position:absolute; border-radius:50%; filter: blur(60px); opacity:.55; }
.hero-blob.b1{ width:520px; height:520px; background: radial-gradient(circle, var(--blue-400), transparent 70%); top:-160px; right:-120px; animation: float-slow 14s ease-in-out infinite; }
.hero-blob.b2{ width:380px; height:380px; background: radial-gradient(circle, var(--amber-500), transparent 70%); bottom:-140px; left:-80px; opacity:.28; animation: float-slow 18s ease-in-out infinite reverse; }
.hero-grid{ position:absolute; inset:0; background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px); background-size: 46px 46px; mask-image: radial-gradient(circle at 30% 20%, #000 0%, transparent 70%); }

@keyframes float-slow{ 0%,100%{ transform:translate(0,0) scale(1);} 50%{ transform:translate(-24px,26px) scale(1.06);} }

.hero-inner{ position:relative; z-index:2; display:grid; gap:3rem; align-items:center; }
@media (min-width:960px){ .hero-inner{ grid-template-columns: 1.15fr .85fr; } }

.hero-badge{ display:inline-flex; align-items:center; gap:.55rem; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.22); padding:.5rem 1rem .5rem .6rem; border-radius:var(--radius-full); font-size:.82rem; font-weight:600; margin-bottom:1.5rem; backdrop-filter: blur(6px); }
.hero-badge .dot{ width:9px; height:9px; border-radius:50%; background: var(--amber-400); box-shadow:0 0 0 4px rgba(255,198,71,.25); }

.hero h1{ font-size: clamp(2.3rem, 5vw, 3.6rem); color:#fff; margin-bottom:1.25rem; }
.hero h1 .accent{ color: var(--amber-400); }
.hero-lede{ font-size:1.13rem; color:#c7d3e2; max-width:46ch; margin-bottom:2.2rem; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:1rem; margin-bottom:2.75rem; }

.hero-services{ display:flex; flex-wrap:wrap; gap:.65rem; }
.pill{
  display:inline-flex; align-items:center; gap:.5rem; padding:.55rem 1.05rem; border-radius: var(--radius-full);
  background: rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.18); font-size:.85rem; font-weight:600; color:#e7edf6;
  transition: transform .3s var(--ease-out), background-color .3s var(--ease), border-color .3s var(--ease);
}
.pill svg{ width:16px; height:16px; color: var(--amber-400); }
.pill:hover{ transform: translateY(-3px); background: rgba(255,255,255,.14); border-color: var(--amber-400); }

.hero-visual{ position:relative; }
.hero-card{
  background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16); border-radius: var(--radius-lg);
  padding: 1.75rem; backdrop-filter: blur(14px); box-shadow: var(--shadow-lg);
}
.hero-card-illustration{ width:100%; aspect-ratio: 1/1; border-radius: var(--radius-md); overflow:hidden; margin-bottom:1.5rem; }
.hero-stats{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.hero-stat{ background: rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); border-radius: var(--radius-md); padding:1rem 1.1rem; transition: transform .3s var(--ease-out); }
.hero-stat:hover{ transform: translateY(-4px); border-color: var(--amber-400); }
.hero-stat strong{ display:block; font-family:var(--font-head); font-size:1.35rem; color:#fff; }
.hero-stat span{ font-size:.8rem; color:#aeb9ca; }

.float-chip{
  position:absolute; display:flex; align-items:center; gap:.55rem; background:#fff; color:var(--ink-900);
  padding:.7rem 1rem; border-radius: var(--radius-md); box-shadow: var(--shadow-lg); font-size:.82rem; font-weight:700;
  animation: bob 5s ease-in-out infinite;
}
.float-chip svg{ width:18px; height:18px; }
.float-chip.c1{ top:-18px; left:-18px; animation-delay:.4s; }
.float-chip.c2{ bottom:-16px; right:-14px; animation-delay:1.1s; color: var(--blue-700); }
@keyframes bob{ 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-10px);} }

/* Hero quote form */
.hero-form-card{
  background:#fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  padding: clamp(1.5rem, 2.6vw, 2.1rem); position:relative; z-index:2; color: var(--body-600);
}
.hero-form-head{ margin-bottom:1.35rem; }
.hero-form-badge{
  display:inline-flex; align-items:center; gap:.45rem; font-family: var(--font-head); font-weight:700;
  font-size:.74rem; letter-spacing:.06em; text-transform:uppercase; color: var(--blue-600);
  background: var(--surface-blue); padding:.4rem .8rem; border-radius: var(--radius-full); margin-bottom:.85rem;
}
.hero-form-badge svg{ width:15px; height:15px; }
.hero-form-head h2{ font-size: clamp(1.35rem, 2.2vw, 1.6rem); margin-bottom:.35rem; }
.hero-form-head p{ font-size:.92rem; color: var(--body-500); }
.hero-form-card .field{ margin-bottom:1rem; }
.hero-form-card .field-row{ margin-bottom:0; }
.hero-form-card .chip-select label{ padding:.5rem .85rem; font-size:.82rem; }
.hero-form-card button[type="submit"]{ margin-top:.35rem; }
.hero-form-note{ display:flex; align-items:center; justify-content:center; gap:.5rem; text-align:center; }
.hero-form-note svg{ width:15px; height:15px; flex-shrink:0; color: var(--blue-500); }

/* FAQ accordion */
.faq-help{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.75rem; }
.section-head.center .faq-help{ justify-content:center; }
.faq-grid{ display:grid; gap:.85rem; align-items:start; }
@media (min-width:760px){ .faq-grid{ grid-template-columns:1fr 1fr; column-gap:1.1rem; row-gap:.9rem; } }
.faq-item{
  background:#fff; border:1px solid var(--line-soft); border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm); overflow:hidden;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.faq-item:hover{ border-color: var(--blue-200); }
.faq-item.open{ border-color: var(--blue-300); box-shadow: var(--shadow-md); }
.faq-item h3{ margin:0; font-size:inherit; font-weight:inherit; letter-spacing:normal; }
.faq-q{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:1rem; text-align:left;
  padding:1.1rem 1.3rem; font-family: var(--font-head); font-weight:600; font-size:1.02rem; color: var(--ink-900);
  transition: color .25s var(--ease);
}
.faq-q:hover{ color: var(--blue-700); }
.faq-icon{
  flex-shrink:0; width:28px; height:28px; border-radius:50%; background: var(--surface-blue); color: var(--blue-600);
  display:flex; align-items:center; justify-content:center;
  transition: background-color .3s var(--ease), color .3s var(--ease);
}
.faq-icon svg{ width:15px; height:15px; transition: transform .35s var(--ease-out); }
.faq-item.open .faq-icon{ background: var(--blue-600); color:#fff; }
.faq-item.open .faq-icon svg{ transform: rotate(180deg); }
.faq-a{ display:grid; grid-template-rows:0fr; transition: grid-template-rows .35s var(--ease-out); }
.faq-item.open .faq-a{ grid-template-rows:1fr; }
.faq-a > div{ overflow:hidden; }
.faq-a p{ padding:0 1.3rem 1.2rem; font-size:.95rem; color: var(--body-600); }

/* ==========================================================================
   Feature / value cards
   ========================================================================== */
.feature-card{
  background: var(--surface); border:1px solid var(--line-soft); border-radius: var(--radius-lg);
  padding: 2rem 1.85rem; box-shadow: var(--shadow-sm);
  transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out), border-color .4s var(--ease);
}
.feature-card:hover{ transform: translateY(-8px); box-shadow: var(--shadow-md); border-color: var(--blue-200); }
.feature-icon{
  width:56px; height:56px; border-radius: var(--radius-md); display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, var(--blue-500), var(--blue-700)); color:#fff; margin-bottom:1.35rem;
  transition: transform .45s var(--ease-out);
}
.feature-card:hover .feature-icon{ transform: rotate(-8deg) scale(1.08); }
.feature-icon svg{ width:26px; height:26px; }
.feature-icon.amber{ background: linear-gradient(135deg, var(--amber-400), var(--amber-600)); color:var(--ink-900); }
.feature-card h3{ font-size:1.2rem; margin-bottom:.6rem; }
.feature-card p{ font-size:.96rem; }

/* ---------- Service cards (grid on Services page / Home) ---------- */
.svc-card{
  position:relative; display:flex; flex-direction:column; background:#fff; border-radius: var(--radius-lg);
  border:1px solid var(--line-soft); overflow:hidden; box-shadow: var(--shadow-sm);
  transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out);
}
.svc-card:hover{ transform: translateY(-8px); box-shadow: var(--shadow-lg); }
.svc-media{
  position:relative; aspect-ratio: 4/3; overflow:hidden;
  background: linear-gradient(135deg, var(--blue-100), var(--surface-blue));
}
.svc-media svg, .svc-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition: transform .6s var(--ease-out); }
.svc-card:hover .svc-media svg, .svc-card:hover .svc-media img{ transform: scale(1.08); }
.svc-body{ padding: 1.6rem 1.6rem 1.85rem; display:flex; flex-direction:column; flex:1; }
.svc-body h3{ font-size:1.22rem; margin-bottom:.55rem; }
.svc-body p{ font-size:.94rem; margin-bottom:1.25rem; flex:1; }
.svc-link{ display:inline-flex; align-items:center; gap:.45rem; font-family:var(--font-head); font-weight:700; color: var(--blue-600); font-size:.92rem; }
.svc-link svg{ width:16px; height:16px; transition: transform .3s var(--ease-out); }
.svc-card:hover .svc-link svg{ transform: translateX(5px); }
.svc-tag{ position:absolute; top:1rem; left:1rem; background:rgba(255,255,255,.92); backdrop-filter:blur(4px); color:var(--blue-700); font-family:var(--font-head); font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:.4rem .75rem; border-radius: var(--radius-full); }

/* ==========================================================================
   Why choose us checklist
   ========================================================================== */
.check-list{ display:flex; flex-direction:column; gap:1.1rem; }
.check-item{ display:flex; align-items:flex-start; gap:.9rem; }
.check-item .tick{
  flex-shrink:0; width:28px; height:28px; border-radius:50%; background: var(--surface-blue); color: var(--blue-600);
  display:flex; align-items:center; justify-content:center; margin-top:.1rem; transition: background-color .3s var(--ease), transform .3s var(--ease-out);
}
.check-item .tick svg{ width:15px; height:15px; }
.check-item:hover .tick{ background: var(--blue-600); color:#fff; transform: scale(1.12); }
.check-item p{ color: var(--ink-800); font-weight:500; font-size:1rem; }

/* ==========================================================================
   CTA banner
   ========================================================================== */
.cta-banner{
  position:relative; overflow:hidden; border-radius: var(--radius-lg);
  background: linear-gradient(120deg, var(--blue-700), var(--blue-500) 60%, #0d75b8);
  color:#fff; padding: clamp(2.25rem,4.5vw,3.25rem); display:grid; gap:1.75rem 2.5rem; align-items:center;
  box-shadow: var(--shadow-lg);
}
@media (min-width:800px){ .cta-banner{ grid-template-columns:1fr auto; } }
.cta-banner::before{
  content:''; position:absolute; width:340px; height:340px; border-radius:50%;
  background: radial-gradient(circle, rgba(255,198,71,.35), transparent 70%); top:-140px; right:-80px;
}
.cta-banner h2{ color:#fff; font-size: clamp(1.5rem,3vw,2.1rem); margin-bottom:.55rem; }
.cta-banner p{ color:#dbe8f5; max-width:54ch; margin-bottom:0; }
.cta-banner .btn-amber{ flex-shrink:0; justify-self:start; }
.cta-banner .eyebrow{ margin-bottom:.9rem; }

/* ==========================================================================
   Forms
   ========================================================================== */
.form-card{ background:#fff; border-radius: var(--radius-lg); border:1px solid var(--line-soft); box-shadow: var(--shadow-md); padding: clamp(1.75rem,4vw,2.75rem); }
.field{ position:relative; margin-bottom:1.4rem; }
.field label{ display:block; font-family:var(--font-head); font-weight:600; font-size:.86rem; color: var(--ink-800); margin-bottom:.45rem; }
.field .req{ color: var(--amber-600); }
.field input, .field select, .field textarea{
  width:100%; padding: .85rem 1rem; border-radius: var(--radius-sm); border:1.5px solid var(--line);
  background: var(--surface-alt); transition: border-color .25s var(--ease), box-shadow .25s var(--ease), background-color .25s var(--ease);
}
.field textarea{ resize:vertical; min-height:130px; }
.field input:hover, .field select:hover, .field textarea:hover{ border-color: var(--blue-300); }
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color: var(--blue-500); background:#fff; box-shadow: 0 0 0 4px rgba(18,128,196,.14);
}
.field-row{ display:grid; gap:1.4rem; }
@media (min-width:640px){ .field-row.two{ grid-template-columns:1fr 1fr; } }
.form-note{ font-size:.85rem; color: var(--body-500); margin-top:1rem; }
.form-success{
  display:none; align-items:flex-start; gap:.9rem; background:#eafaf1; border:1px solid #bfe9d3; color:#166a41;
  border-radius: var(--radius-md); padding:1.1rem 1.25rem; margin-top:1.25rem; font-weight:500; font-size:.92rem;
}
.form-success.show{ display:flex; }
.form-success svg{ width:20px; height:20px; flex-shrink:0; margin-top:.1rem; }
.form-success.is-error{ background:#fdecec; border-color:#f3c2c2; color:#a12020; }

/* radio-style service picker (home mini form) */
.chip-select{ display:flex; flex-wrap:wrap; gap:.6rem; }
.chip-select input{ position:absolute; opacity:0; pointer-events:none; }
.chip-select label{
  display:inline-flex; align-items:center; padding:.6rem 1.05rem; border-radius: var(--radius-full);
  border:1.5px solid var(--line); font-size:.86rem; font-weight:600; color: var(--ink-800); cursor:pointer;
  transition: all .25s var(--ease);
}
.chip-select input:checked + label{ background: var(--blue-600); border-color: var(--blue-600); color:#fff; }
.chip-select label:hover{ border-color: var(--blue-400); }

/* ==========================================================================
   Page header (sub-pages)
   ========================================================================== */
.page-header{
  position:relative; overflow:hidden; padding: clamp(3rem,6vw,4.5rem) 0 clamp(3.5rem,6vw,5rem);
  background: radial-gradient(120% 160% at 85% -20%, #0f4a78 0%, var(--blue-800) 45%, var(--ink-900) 100%);
  color:#fff;
}
.page-header .hero-grid{ opacity:.5; }
.breadcrumbs{ display:flex; align-items:center; gap:.5rem; font-size:.86rem; color:#a9b7c9; margin-bottom:1.4rem; position:relative; z-index:2; flex-wrap:wrap; }
.breadcrumbs a:hover{ color: var(--amber-400); }
.breadcrumbs svg{ width:13px; height:13px; opacity:.6; }
.page-header h1{ position:relative; z-index:2; color:#fff; font-size: clamp(2rem, 4.4vw, 3rem); max-width:20ch; }
.page-header .hero-lede{ position:relative; z-index:2; margin-top:1rem; margin-bottom:0; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{ background: var(--ink-900); color:#98a4b7; padding-top: clamp(3.5rem,6vw,5rem); }
.footer-top{ display:grid; gap:2.75rem; padding-bottom:3rem; border-bottom:1px solid rgba(255,255,255,.08); }
@media (min-width:768px){ .footer-top{ grid-template-columns: 1.3fr 1fr 1fr 1.1fr; } }
.footer-logo{ display:inline-flex; align-items:center; gap:.65rem; }
.footer-logo .brand-mark{ width:42px; height:42px; flex:0 0 auto; }
.footer-brand .brand-word{ color:#fff; }
.footer-brand .brand-word .ok{ color: var(--blue-300); }
.footer-brand p{ margin-top:1.1rem; font-size:.92rem; max-width:32ch; }
.footer-social{ display:flex; gap:.7rem; margin-top:1.5rem; }
.footer-social a{
  width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); transition: all .3s var(--ease);
}
.footer-social a:hover{ background: var(--blue-600); border-color:var(--blue-600); transform: translateY(-3px); }
.footer-social svg{ width:16px; height:16px; }
.footer-col h4{ color:#fff; font-size:.95rem; margin-bottom:1.2rem; letter-spacing:.03em; }
.footer-col ul{ display:flex; flex-direction:column; gap:.75rem; }
.footer-col a{ font-size:.92rem; transition: color .25s var(--ease), padding-left .25s var(--ease); }
.footer-col a:hover{ color:#fff; padding-left:.25rem; }
.footer-contact li{ display:flex; align-items:flex-start; gap:.65rem; font-size:.92rem; }
.footer-contact svg{ width:17px; height:17px; margin-top:.15rem; color: var(--amber-400); flex-shrink:0; }
.footer-bottom{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem; padding-block:1.75rem; font-size:.82rem; }
.footer-bottom a:hover{ color:#fff; }
.back-to-top{
  position:fixed; right:1.5rem; bottom:1.5rem; z-index:80; width:48px; height:48px; border-radius:50%;
  background: var(--blue-600); color:#fff; display:flex; align-items:center; justify-content:center; box-shadow: var(--shadow-lg);
  opacity:0; transform: translateY(12px); pointer-events:none; transition: all .35s var(--ease-out);
}
.back-to-top.show{ opacity:1; transform:translateY(0); pointer-events:auto; }
.back-to-top:hover{ background: var(--blue-700); transform: translateY(-4px); }
.back-to-top svg{ width:20px; height:20px; }

/* ==========================================================================
   Reveal-on-scroll
   ========================================================================== */
.reveal{ opacity:0; transform: translateY(28px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.reveal.in{ opacity:1; transform:none; }
.reveal-stagger.in > *{ transition-delay: calc(var(--i,0) * 80ms); }

/* misc */
.badge-row{ display:flex; flex-wrap:wrap; gap:.85rem; }
.trust-badge{ display:flex; align-items:center; gap:.6rem; font-size:.86rem; font-weight:600; color: var(--ink-800); background:#fff; border:1px solid var(--line-soft); padding:.6rem 1rem; border-radius: var(--radius-full); box-shadow: var(--shadow-sm); }
.trust-badge svg{ width:17px; height:17px; color: var(--blue-600); }

.divider-fade{ height:1px; background: linear-gradient(90deg, transparent, var(--line), transparent); margin-block: 2.5rem; }

.two-col{ display:grid; gap:3rem; align-items:center; }
@media (min-width:900px){ .two-col{ grid-template-columns:1fr 1fr; } .two-col.reverse > *:first-child{ order:2; } }

.list-check{ display:flex; flex-direction:column; gap:.9rem; margin-top:1.5rem; }
.list-check li{ display:flex; align-items:center; gap:.7rem; font-weight:500; color: var(--ink-800); font-size:.98rem; }
.list-check svg{ width:19px; height:19px; color: var(--success); flex-shrink:0; }

.info-tile{ background:#fff; border:1px solid var(--line-soft); border-radius: var(--radius-lg); padding:1.75rem; box-shadow: var(--shadow-sm); transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out); }
.info-tile:hover{ transform: translateY(-6px); box-shadow: var(--shadow-md); }
.info-tile .icon-badge{ width:48px; height:48px; background: var(--surface-blue); color:var(--blue-600); margin-bottom:1rem; }
.info-tile .icon-badge svg{ width:22px; height:22px; }
.info-tile h3{ font-size:1.05rem; margin-bottom:.4rem; }
.info-tile p{ font-size:.92rem; }
.info-tile a{ font-weight:700; color: var(--blue-600); }

.related-services{ display:flex; flex-wrap:wrap; gap:.8rem; }
.related-services a{
  display:inline-flex; align-items:center; gap:.55rem; padding:.75rem 1.15rem; border-radius: var(--radius-full);
  border:1.5px solid var(--line); font-weight:700; font-family:var(--font-head); font-size:.9rem; color: var(--ink-800);
  transition: all .3s var(--ease);
}
.related-services a:hover{ border-color: var(--blue-500); background: var(--surface-blue); color: var(--blue-700); transform: translateY(-3px); }
.related-services svg{ width:16px; height:16px; color: var(--blue-500); }

.map-frame{ border-radius: var(--radius-lg); overflow:hidden; border:1px solid var(--line-soft); box-shadow: var(--shadow-md); aspect-ratio:16/11; }
.map-frame iframe{ width:100%; height:100%; border:0; }

.whyus-media{ position:relative; border-radius: var(--radius-lg); overflow:hidden; aspect-ratio: 5/4; background: linear-gradient(135deg, var(--blue-700), var(--blue-500)); }
.whyus-media svg, .whyus-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }