/* =============================================================
   GI Insured — style.css
   Mobile-first. No frameworks.
   Sections: 1 Tokens · 2 Reset · 3 Utilities · 4 Components
             5 Layout · 6 Page sections · 7 Footer · 8 Overlays
             9 Breakpoints · 10 Motion & print
   ============================================================= */

/* ---------- 1. TOKENS ------------------------------------------------ */
:root{
  /* Brand — sampled from the approved design.
     To switch the site to the blue palette instead, change the four
     values below to: #0056d2 / #003b96 / #0b74ff / #e6f0ff */
  --primary:        #0b4e3b;
  --primary-dark:   #073626;
  --accent:         #17a673;
  --accent-soft:    #e8f5ef;

  --dark:           #1a1a1a;
  --gray:           #666666;
  --gray-light:     #8b9299;
  --bg:             #f7f9fc;
  --white:          #ffffff;
  --line:           #e6ebf1;
  --line-dark:      rgba(255,255,255,.14);

  --whatsapp:       #25d366;
  --star:           #f7b731;

  /* Type */
  --ff: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Space */
  --gap:      1.25rem;
  --pad-x:    1.25rem;
  --sec-y:    3.5rem;
  /* Content width, shared by every page so the left/right margins match
     site-wide. This is the width the home page was calibrated to; the old
     1200px default left the other pages noticeably narrower with wider gutters. */
  --maxw:     min(93.9vw, 1632px);

  /* Radius & shadow */
  --r-sm: 8px;
  --r:    14px;
  --r-lg: 20px;
  --r-pill: 999px;
  --sh-sm: 0 2px 8px rgba(16,42,67,.06);
  --sh:    0 8px 28px rgba(16,42,67,.08);
  --sh-lg: 0 18px 48px rgba(16,42,67,.13);

  --t: .28s cubic-bezier(.4,0,.2,1);

  --header-h: 68px;
}

/* ---------- 2. RESET ------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-h) + 16px);
}

body{
  margin:0;
  font-family:var(--ff);
  font-weight:400;
  font-size:.9375rem;      /* 15px */
  line-height:1.7;
  color:var(--gray);
  background:var(--white);
  overflow-x:hidden;
}
body.is-locked{ overflow:hidden; }

h1,h2,h3,h4{
  margin:0 0 .6em;
  color:var(--dark);
  font-weight:700;
  line-height:1.22;
  letter-spacing:-.01em;
}
h1{ font-size:clamp(1.9rem, 5.6vw, 2.875rem); }
h2{ font-size:clamp(1.5rem, 4.2vw, 2.125rem); }
h3{ font-size:1.0625rem; }

p{ margin:0 0 1rem; }
p:last-child{ margin-bottom:0; }

a{ color:var(--primary); text-decoration:none; transition:color var(--t); }
a:hover{ color:var(--accent); }

img,svg{ display:block; max-width:100%; }
img{ height:auto; }

ul,ol{ margin:0; padding:0; list-style:none; }

button{ font:inherit; color:inherit; cursor:pointer; border:0; background:none; }

input,select,textarea{ font:inherit; color:inherit; }

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

/* ---------- 3. UTILITIES --------------------------------------------- */
.container{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--pad-x);
}

.sr-only{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}

.skip-link{
  position:absolute; left:.75rem; top:-100px; z-index:200;
  padding:.7rem 1.1rem; border-radius:var(--r-sm);
  background:var(--primary); color:#fff; font-weight:600;
  transition:top var(--t);
}
.skip-link:focus{ top:.75rem; color:#fff; }

.sprite{ position:absolute; width:0; height:0; overflow:hidden; }

.ico{ width:1.125em; height:1.125em; flex:none; fill:none; }
.ico--lg{ width:1.6rem; height:1.6rem; }
.ico--xl{ width:2.25rem; height:2.25rem; }

.txt-accent{ color:var(--accent); }
.eyebrow{
  margin:0 0 .75rem;
  color:var(--accent);
  font-size:.75rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase;
}

/* Heading with hairlines either side (design's section titles) */
.rule-heading{
  display:flex; align-items:center; gap:1rem;
  margin:0 0 2rem;
  font-size:.8125rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--dark);
}
.rule-heading::before,
.rule-heading::after{
  content:""; flex:1 1 auto; height:1px;
  background:linear-gradient(90deg,transparent,var(--line));
}
.rule-heading::after{ background:linear-gradient(270deg,transparent,var(--line)); }
.rule-heading > span{ flex:none; text-align:center; }

/* Scroll reveal */
.reveal{
  opacity:0; transform:translateY(24px);
  transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1);
}
.reveal.is-visible{ opacity:1; transform:none; }

/* ---------- 4. COMPONENTS -------------------------------------------- */

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  padding:.75rem 1.35rem;
  border-radius:var(--r-sm);
  font-size:.875rem; font-weight:600; line-height:1.2;
  white-space:nowrap; cursor:pointer;
  transition:background var(--t), color var(--t), box-shadow var(--t), transform var(--t), border-color var(--t);
}
.btn:active{ transform:translateY(1px); }
.btn--lg{ padding:.95rem 1.65rem; font-size:.9375rem; }
.btn--block{ display:flex; width:100%; }

.btn--primary{ background:var(--primary); color:#fff; box-shadow:0 6px 18px rgba(11,78,59,.25); }
.btn--primary:hover{ background:var(--primary-dark); color:#fff; box-shadow:0 10px 26px rgba(11,78,59,.32); }

.btn--accent{ background:var(--accent); color:#fff; box-shadow:0 6px 18px rgba(23,166,115,.3); }
.btn--accent:hover{ background:#128f62; color:#fff; }

.btn--whatsapp{ background:#fff; color:var(--dark); box-shadow:var(--sh-sm); border:1px solid var(--line); }
.btn--whatsapp .ico{ color:var(--whatsapp); fill:currentColor; }
.btn--whatsapp:hover{ background:var(--whatsapp); color:#fff; border-color:var(--whatsapp); }
.btn--whatsapp:hover .ico{ color:#fff; }

.btn--outline{ border:1.5px solid var(--primary); color:var(--primary); background:transparent; }
.btn--outline:hover{ background:var(--primary); color:#fff; }

.btn--ghost{ border:1.5px solid rgba(255,255,255,.4); color:#fff; }
.btn--ghost:hover{ background:#fff; color:var(--primary); border-color:#fff; }

/* Arrow link */
.link-arrow{
  display:inline-flex; align-items:center; gap:.45rem;
  font-size:.8125rem; font-weight:600; color:var(--primary);
}
.link-arrow .ico{ transition:transform var(--t); }
.link-arrow:hover .ico{ transform:translateX(4px); }

/* Card */
.card{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r);
  box-shadow:var(--sh-sm);
  transition:box-shadow var(--t), transform var(--t), border-color var(--t);
}

/* Tick list */
.ticks li{
  display:flex; align-items:flex-start; gap:.6rem;
  margin-bottom:.6rem;
}
.ticks .ico{ margin-top:.32em; color:var(--accent); }

/* Stars */
.stars{ display:flex; gap:.15rem; color:var(--star); }
.stars .ico{ width:.9rem; height:.9rem; fill:currentColor; }

/* Form controls */
.field{ position:relative; }
.quote-form .field + .field{ margin-top:.75rem; }

.quote-form input,
.quote-form select,
.form-grid input,
.form-grid select,
.form-grid textarea{
  width:100%;
  padding:.8rem 1rem;
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  background:#fff;
  font-size:.875rem;
  color:var(--dark);
  transition:border-color var(--t), box-shadow var(--t);
}
.quote-form select,
.form-grid select{
  appearance:none;
  padding-right:2.4rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right .9rem center;
  background-size:1.05rem;
}
.quote-form textarea,
.form-grid textarea{ min-height:130px; resize:vertical; }

::placeholder{ color:var(--gray-light); opacity:1; }

.quote-form input:focus,
.quote-form select:focus,
.form-grid :is(input,select,textarea):focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(23,166,115,.18);
}

.field.is-invalid input,
.field.is-invalid select,
.field.is-invalid textarea{
  border-color:#e04f4f;
  box-shadow:0 0 0 3px rgba(224,79,79,.14);
}
.field__error{
  margin:.35rem 0 0;
  min-height:0;
  font-size:.75rem; font-weight:500; color:#ff8f8f;
}
.field.is-invalid .field__error{ min-height:1rem; }

.form-status{
  margin:.75rem 0 0;
  font-size:.8125rem; font-weight:500;
}
.form-status.is-ok{ color:#7ce8b6; }
.form-status.is-err{ color:#ff8f8f; }

/* ---------- 5. LAYOUT ------------------------------------------------ */

/* Top bar */
.topbar{
  background:var(--primary);
  color:rgba(255,255,255,.88);
  font-size:.75rem;
}
.topbar a{ color:inherit; }
.topbar a:hover{ color:#fff; }
.topbar__inner{
  display:flex; flex-wrap:wrap; align-items:center;
  justify-content:center; gap:.35rem 1.5rem;
  min-height:38px; padding-block:.4rem;
}
.topbar__list{ display:flex; flex-wrap:wrap; justify-content:center; gap:.35rem 1.5rem; }
.topbar__list li,
.topbar__hours,
.topbar__social{ display:inline-flex; align-items:center; gap:.4rem; }
.topbar__right{ display:none; align-items:center; gap:1.75rem; margin-left:auto; }
.topbar__social a{ display:inline-flex; }
.topbar__social .ico{ fill:currentColor; width:1rem; height:1rem; }
.topbar .ico{ opacity:.85; }

/* Header */
.header{
  position:sticky; top:0; z-index:90;
  background:#fff;
  border-bottom:1px solid var(--line);
  transition:box-shadow var(--t), padding var(--t);
}
.header.is-stuck{ box-shadow:0 6px 24px rgba(16,42,67,.1); }

.header__inner{
  display:flex; align-items:center; gap:1rem;
  min-height:var(--header-h);
}
.logo{ flex:none; }
.logo img{ width:auto; height:54px; }

.header__cta{ display:none; margin-left:auto; }

/* Sits above the open drawer so the X stays visible and clickable. The bars
   already morph into an X via [aria-expanded="true"], and .nav__list reserves
   3rem at the top of the drawer for exactly this — but .burger had no stacking
   position, so .nav (z-index:95) painted straight over it and the only close
   affordance disappeared the moment the menu opened. */
.burger{
  margin-left:auto;
  display:flex; flex-direction:column; justify-content:center; gap:5px;
  width:44px; height:44px; padding:10px;
  border-radius:var(--r-sm);
  position:relative; z-index:96;
}
.burger span{
  display:block; height:2px; width:100%;
  background:var(--primary); border-radius:2px;
  transition:transform var(--t), opacity var(--t);
}
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* Nav — mobile drawer */
.nav{
  position:fixed; inset:0 0 0 auto; z-index:95;
  width:min(84vw, 340px);
  padding:1.25rem 1.25rem 2rem;
  background:#fff;
  box-shadow:-12px 0 40px rgba(16,42,67,.16);
  transform:translateX(100%);
  transition:transform var(--t);
  overflow-y:auto;
  overscroll-behavior:contain;
}
.nav.is-open{ transform:none; }
.nav__list{ display:flex; flex-direction:column; padding-top:3rem; }
.nav__link{
  display:block; padding:.8rem .25rem;
  border-bottom:1px solid var(--line);
  color:var(--dark); font-size:.9375rem; font-weight:500;
}
.nav__link:hover,
.nav__link.is-active{ color:var(--primary); }
.nav__cta{ margin-top:1.5rem; width:100%; }

/* ---------- Dropdown menus ----------
   Base + mobile (drawer): the sub-menu is an accordion, opened by tapping the
   parent (JS toggles .is-open on the <li>). Desktop overrides below turn it into
   a hover flyout. */
.nav__caret{
  display:inline-block; width:0; height:0; margin-left:.4rem; vertical-align:middle;
  border-left:4px solid transparent; border-right:4px solid transparent;
  border-top:5px solid currentColor;
  transition:transform var(--t);
}
.has-dropdown.is-open > .nav__link .nav__caret{ transform:rotate(180deg); }
.nav__dropdown{
  list-style:none; margin:0; padding:0;
  display:none;
}
.has-dropdown.is-open > .nav__dropdown{ display:block; }
.nav__dropdown .nav__link{ padding-left:1.25rem; font-size:.875rem; color:var(--gray); }
.nav__dropdown .nav__link:hover{ color:var(--primary); }
.nav__dropdown .nav__dropdown .nav__link{ padding-left:2.25rem; }  /* 3rd level (models) */

/* The overlay must sit BELOW the header, not above it.

   .header is position:sticky with z-index:90, which makes it a stacking
   context — so .nav's z-index:95 only ranks it inside the header, never
   against this overlay. At body level the comparison is header 90 vs overlay,
   so anything above 90 paints over the whole header: the drawer looked dimmed
   and the overlay swallowed every click, including the close (X) button and
   the nav links.

   85 keeps it above page content, the floating tabs (80) and back-to-top (81),
   while leaving the header and its drawer on top and clickable. */
.nav-overlay{
  position:fixed; inset:0; z-index:85;
  background:rgba(10,28,22,.5);
  opacity:0; transition:opacity var(--t);
}
.nav-overlay.is-open{ opacity:1; }

/* Sections */
.section{ padding-block:var(--sec-y); }
.section--tight{ padding-block:calc(var(--sec-y) * .8); }
.section--flush{ padding-block:0 var(--sec-y); }

/* ---------- 6. PAGE SECTIONS ----------------------------------------- */

/* Hero */
.hero{
  position:relative;
  padding-block:2.75rem 3rem;
  background:linear-gradient(165deg,#f2f6f9 0%, #e9f0f4 46%, #dfe9ee 100%);
  overflow:hidden;
}
/* Blurred city skyline behind the hero, as in the approved design. The source
   is small, so it is deliberately blurred and scaled past the edges — that
   reads as depth of field rather than as a low-resolution image. */
.hero::before{
  content:"";
  position:absolute; inset:-20px;
  background:url("assets/photos/bg-skyline.jpg") center 30% / cover no-repeat;
  filter:blur(3px);
  opacity:.34;
  pointer-events:none;
}

.hero__bg{
  position:absolute; inset:0;
  background:
    linear-gradient(100deg, rgba(242,246,249,.97) 0%, rgba(242,246,249,.82) 38%, rgba(233,240,244,.28) 66%, rgba(223,233,238,0) 100%),
    radial-gradient(70% 60% at 78% 24%, rgba(23,166,115,.14), transparent 62%),
    radial-gradient(52% 46% at 12% 88%, rgba(11,78,59,.12), transparent 60%);
  pointer-events:none;
}
.hero__inner{ position:relative; display:grid; gap:2rem; }
.hero__lead{ max-width:34rem; margin-bottom:1.75rem; font-size:1rem; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:.75rem; margin-bottom:2rem; }

.hero__trust{
  display:grid; gap:1rem;
  padding-top:1.5rem;
  border-top:1px solid rgba(11,78,59,.12);
}
.hero__trust li{ display:flex; align-items:center; gap:.7rem; }
.hero__trust .ico{ color:var(--primary); }
.hero__trust span{ display:flex; flex-direction:column; font-size:.75rem; color:var(--gray); }
.hero__trust strong{ font-size:.8125rem; font-weight:600; color:var(--dark); }

/* Vehicle imagery. SVG illustrations ship by default; these slots also take
   transparent-background photo cutouts (PNG/WebP) with no other change.
   object-fit:contain keeps a rectangular photo from stretching if you use
   one whose aspect ratio doesn't match the slot. */
.hero__media img,
.service__img,
.split__media img{ object-fit:contain; }

.hero__media img{ width:100%; }

/* Services */
.services{ padding-top:2.5rem; }
.services__grid{ display:grid; gap:var(--gap); }

/* Cards in a row stretch to equal height, but their content does not: the
   vehicle images have different aspect ratios (230px tall vs 292px) and the
   copy runs to different lengths, so "Learn More" ended up at a different
   height in each card. Making the card a column and pushing the link with
   margin-top:auto pins it to the bottom, so the links line up across the row.
   align-self keeps the link hugging its text instead of stretching full width. */
.service{
  position:relative; padding:1.6rem 1.4rem 1.4rem; overflow:hidden;
  display:flex; flex-direction:column;
}
.service .link-arrow{ margin-top:auto; align-self:flex-start; }
.service:hover{ transform:translateY(-6px); box-shadow:var(--sh-lg); border-color:transparent; }
.service__icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:48px; height:48px; margin-bottom:1.1rem;
  border-radius:var(--r-sm);
  background:var(--primary); color:#fff;
}
.service__icon .ico{ width:1.5rem; height:1.5rem; }
.service__title{ font-size:1.125rem; margin-bottom:.5rem; }
.service p{ font-size:.8125rem; margin-bottom:1.25rem; }
.service__img{
  width:72%; max-width:260px; margin:0 0 1rem auto;
  transition:transform var(--t);
}
.service:hover .service__img{ transform:translateX(-6px) scale(1.04); }

/* Why choose us */
.why__grid{ display:grid; gap:.25rem; }
.why__item{
  padding:1.5rem 1rem;
  text-align:center;
  border-bottom:1px solid var(--line);
}
.why__item:last-child{ border-bottom:0; }
.why__item .ico{ margin:0 auto .9rem; color:var(--primary); }
.why__item h3{ font-size:.9375rem; margin-bottom:.35rem; }
.why__item p{ font-size:.8125rem; max-width:20rem; margin-inline:auto; }

/* How it works */
.steps{ display:grid; gap:1rem; counter-reset:step; }
.step{
  position:relative;
  display:flex; align-items:center; gap:.85rem;
  padding:1.15rem 1.1rem;
}
.step:hover{ border-color:var(--accent); box-shadow:var(--sh); }
.step__num{
  display:flex; align-items:center; justify-content:center;
  flex:none; width:34px; height:34px;
  border-radius:50%; background:var(--primary); color:#fff;
  font-size:.8125rem; font-weight:600;
}
.step__ico{ flex:none; color:var(--primary); }
.step h3{ font-size:.9375rem; margin-bottom:.15rem; }
.step p{ font-size:.75rem; }
/* connector arrows between steps (desktop only, see breakpoints) */
.step::after{ content:none; }

/* Stats */
.stats{
  display:grid; gap:1.5rem;
  padding:1.9rem 1.5rem;
  border-radius:var(--r);
  background:linear-gradient(115deg,var(--primary) 0%, #0d5c45 55%, var(--primary-dark) 100%);
  box-shadow:var(--sh-lg);
  color:#fff;
}
.stat{ display:flex; align-items:center; gap:.9rem; }
.stat .ico{ color:rgba(255,255,255,.9); }
.stat > div{ display:flex; flex-direction:column; }
.stat__num{ font-size:1.5rem; font-weight:700; line-height:1.15; color:#fff; }
.stat__num--text{ font-size:1.1875rem; }
.stat__label{ font-size:.75rem; color:rgba(255,255,255,.78); }

/* Testimonials */
.slider{ position:relative; }
.slider__viewport{ overflow:hidden; }
.slider__track{
  display:flex;
  transition:transform .5s cubic-bezier(.4,0,.2,1);
  will-change:transform;
}
/* The <li> is the flex unit (exact fractions, so the transform maths
   stays clean); the card inside it carries the visual gutter. */
.slide{ flex:0 0 100%; min-width:0; padding:.25rem .5rem .85rem; }
.testimonial{ height:100%; padding:1.4rem 1.3rem; }
.testimonial__mark{ color:var(--accent); opacity:.6; fill:currentColor; margin-bottom:.6rem; }
.testimonial blockquote{ margin:0 0 .9rem; }
.testimonial blockquote p{ font-size:.8125rem; color:var(--gray); }
.testimonial__author{
  display:flex; align-items:center; gap:.7rem;
  margin-top:.9rem; padding-top:.9rem;
  border-top:1px solid var(--line);
}
.testimonial__author img{ width:44px; height:44px; border-radius:50%; flex:none; }
.testimonial__author span{ display:flex; flex-direction:column; font-size:.75rem; color:var(--gray); }
.testimonial__author strong{ font-size:.875rem; font-weight:600; color:var(--dark); }

.slider__nav{
  position:absolute; top:calc(50% - 1.4rem); z-index:2;
  display:none; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:50%;
  background:#fff; border:1px solid var(--line);
  color:var(--primary); box-shadow:var(--sh-sm);
  transition:background var(--t), color var(--t), box-shadow var(--t);
}
.slider__nav:hover{ background:var(--primary); color:#fff; }
.slider__nav:disabled{ opacity:.35; cursor:default; }
.slider__nav:disabled:hover{ background:#fff; color:var(--primary); }
.slider__nav[hidden]{ display:none; }   /* beats the display:flex above */
.slider__nav--prev{ left:-.5rem; }
.slider__nav--next{ right:-.5rem; }

.slider__dots{
  display:flex; justify-content:center; gap:.4rem;
  margin-top:1rem;
}
.slider__dots button{
  width:8px; height:8px; border-radius:50%;
  background:var(--line); transition:background var(--t), width var(--t);
}
.slider__dots button[aria-selected="true"]{ width:22px; border-radius:4px; background:var(--accent); }

/* About band */
.about-band{ background:var(--bg); }
.about-band__inner{ display:grid; gap:2rem; }
.about-band h2{ margin-bottom:1rem; }
.about-band__panel{
  display:grid; grid-template-columns:repeat(2,1fr); gap:.75rem;
}
.mini-stat{
  display:flex; flex-direction:column; gap:.15rem;
  padding:1.1rem 1rem;
  background:#fff; border:1px solid var(--line);
  border-radius:var(--r); box-shadow:var(--sh-sm);
}
.mini-stat strong{ font-size:1.375rem; font-weight:700; color:var(--primary); line-height:1.2; }
.mini-stat span{ font-size:.75rem; }

/* Partners */
.partners{
  display:grid; grid-template-columns:repeat(2,1fr);
  border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden; background:#fff;
}
.partner{
  display:flex; align-items:center; justify-content:center;
  min-height:88px; padding:1rem .75rem;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.partner:nth-child(2n){ border-right:0; }
.partner:nth-last-child(-n+2){ border-bottom:0; }
/* Logos have very different aspect ratios, so cap the HEIGHT and let width
   follow — that balances a square roundel against a wide wordmark. */
.partner img{
  max-height:52px; max-width:100%;
  width:auto; height:auto;
  transition:transform var(--t);
}
.partner:hover img{ transform:scale(1.07); }
.partner img[alt="Haval"]{ max-height:24px; }
.partner img[alt="Kia"]{ max-height:30px; }

/* ---------- Inner-page helpers --------------------------------------- */
.page-head{
  position:relative;
  padding-block:3rem;
  background:linear-gradient(120deg,var(--primary) 0%, #0d5c45 60%, var(--primary-dark) 100%);
  color:#fff; text-align:center;
}
.page-head h1{ color:#fff; font-size:clamp(1.75rem,5vw,2.75rem); margin-bottom:.5rem; }
.page-head p{ max-width:44rem; margin-inline:auto; color:rgba(255,255,255,.85); font-size:.9375rem; }
.page-head .eyebrow{ color:#8fe3c0; }

.crumbs{
  display:flex; flex-wrap:wrap; justify-content:center; gap:.4rem;
  margin-top:1.1rem; font-size:.75rem; color:rgba(255,255,255,.7);
}
.crumbs a{ color:rgba(255,255,255,.9); }
.crumbs a:hover{ color:#fff; text-decoration:underline; }
.crumbs li+li::before{ content:"/"; margin-right:.4rem; opacity:.6; }
.crumbs li{ display:flex; align-items:center; }

.split{ display:grid; gap:2rem; align-items:center; }
.split--alt,
.section--alt{ background:var(--bg); }
.split h2{ margin-bottom:.85rem; }
.split__media img{ width:100%; }

.feature-grid{ display:grid; gap:var(--gap); }
.feature{
  padding:1.4rem 1.25rem;
}
.feature:hover{ transform:translateY(-4px); box-shadow:var(--sh); }
.feature .ico{ color:var(--accent); margin-bottom:.75rem; }
.feature h3{ font-size:1rem; margin-bottom:.35rem; }
.feature p{ font-size:.8125rem; }

.price-note{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.45rem .9rem; margin-bottom:1rem;
  border-radius:var(--r-pill);
  background:var(--accent-soft); color:var(--primary);
  font-size:.75rem; font-weight:600;
}

/* Accordion (FAQ) */
.acc{ border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:#fff; }
.acc__item + .acc__item{ border-top:1px solid var(--line); }
.acc__btn{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  width:100%; padding:1.05rem 1.15rem; text-align:left;
  font-size:.9375rem; font-weight:600; color:var(--dark);
  transition:color var(--t), background var(--t);
}
.acc__btn:hover{ color:var(--primary); background:var(--bg); }
.acc__btn::after{
  content:""; flex:none; width:11px; height:11px;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);
  transition:transform var(--t);
}
.acc__btn[aria-expanded="true"]::after{ transform:rotate(225deg) translate(-3px,-3px); }
.acc__panel{
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows var(--t);
}
.acc__panel[data-open="true"]{ grid-template-rows:1fr; }
.acc__panel > div{ overflow:hidden; }
.acc__panel p{ padding:0 1.15rem 1.15rem; font-size:.8125rem; }

/* CTA band */
.cta-band{
  padding-block:3rem; text-align:center; color:#fff;
  background:linear-gradient(115deg,var(--primary) 0%, #0d5c45 55%, var(--primary-dark) 100%);
}
.cta-band h2{ color:#fff; }
.cta-band p{ max-width:40rem; margin:0 auto 1.6rem; color:rgba(255,255,255,.85); font-size:.9375rem; }
.cta-band__actions{ display:flex; flex-wrap:wrap; justify-content:center; gap:.75rem; }

/* Contact-page form */
.contact-layout{ display:grid; gap:2rem; }
.form-grid{ display:grid; gap:.85rem; }
.form-grid .field--full{ grid-column:1 / -1; }
.form-grid label:not(.sr-only){
  display:block; margin-bottom:.3rem;
  font-size:.75rem; font-weight:600; color:var(--dark);
}
.info-card{ padding:1.4rem 1.3rem; }
.info-card h3{ font-size:1rem; }
.info-card .contact-list li{ color:var(--gray); }
.info-card .contact-list .ico{ color:var(--primary); }
.info-card .contact-list a{ color:var(--gray); }
.info-card .contact-list a:hover{ color:var(--primary); }

/* ---------- 7. FOOTER ------------------------------------------------ */
.footer{ background:#002923; color:rgba(255,255,255,.8); font-size:.8125rem; }
.footer a{ color:rgba(255,255,255,.8); }
.footer a:hover{ color:#fff; }

.footer__top{
  display:grid; gap:2.25rem;
  justify-items:center; text-align:center;
  padding-block:2.75rem;
}
.footer__top .footer__col{ text-align:left; }
.footer__h{
  margin:0 0 1.1rem;
  color:#fff; font-size:.8125rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
}

/* Contact list — plain version is reused on the light info cards, so the
   footer's circular icon chips live in a modifier. */
.contact-list li{
  display:flex; align-items:flex-start; gap:.65rem;
  margin-bottom:.7rem; line-height:1.6;
}
.contact-list .ico{ margin-top:.35em; flex:none; color:#8fe3c0; }

.contact-list--badged li{ align-items:center; gap:.8rem; margin-bottom:.85rem; }
.contact-list--badged .ico{ margin-top:0; width:.95rem; height:.95rem; color:#fff; }
.contact-list__ico{
  display:flex; align-items:center; justify-content:center;
  flex:none; width:34px; height:34px; border-radius:50%;
  background:rgba(255,255,255,.1);
  transition:background var(--t);
}
.contact-list--badged li:hover .contact-list__ico{ background:var(--accent); }

/* Circular brand badge. Built from type rather than an image so it stays
   sharp at any size and needs no extra request. */
.brand-badge{
  display:flex; align-items:center; justify-content:center;
  flex:none; width:auto; height:auto; padding:0;
  background:transparent; box-shadow:none;
  line-height:1; text-align:center;
  transition:transform var(--t);
}
.brand-badge:hover{ transform:translateY(-3px); }
/* Circular Get Insured badge (logo-footer.png); border-radius clips the square PNG's corners. */
.brand-badge__img{ display:block; width:152px; height:152px; border-radius:50%; box-shadow:0 12px 32px rgba(0,0,0,.28); }
.brand-badge__mark{
  font-size:2.6rem; font-weight:700; font-style:italic;
  letter-spacing:-.03em; color:#12336b;
}
.brand-badge__mark em{ font-style:italic; color:#1fb6d8; }
.brand-badge__word{
  margin-top:.15rem;
  font-size:1.1875rem; font-weight:600; color:#12336b;
}
.brand-badge__tag{
  margin-top:.5rem; padding-top:.45rem;
  border-top:1px solid rgba(18,51,107,.22);
  font-size:.5rem; font-weight:500; line-height:1.6;
  letter-spacing:.11em; text-transform:uppercase; color:#12336b;
}

/* Quote form — two-up on anything wider than a small phone */
.footer__quote{ width:100%; max-width:430px; }
.quote-form__grid{ display:grid; gap:.7rem; }
.quote-form .field + .field{ margin-top:0; }

/* background-color, not the `background` shorthand — the shorthand would
   reset the select's chevron position/repeat and tile it across the field. */
.footer__quote input,
.footer__quote select{
  border-color:transparent;
  background-color:#fff;
  color:var(--dark);
}
.footer__quote ::placeholder{ color:#98a2ab; }
.footer__quote select option{ color:var(--dark); background-color:#fff; }
.footer__quote input:focus,
.footer__quote select:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(23,166,115,.35);
}
.footer__quote .btn{ margin-top:.7rem; }
.footer__quote .btn--accent{ background:#0b7a5e; box-shadow:none; }
.footer__quote .btn--accent:hover{ background:#0f9573; }

/* Social */
.footer__social ul{ display:flex; gap:.7rem; }
.footer__social a{
  display:flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:50%;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16);
  color:#fff;
  transition:background var(--t), border-color var(--t), transform var(--t);
}
.footer__social a:hover{
  background:var(--accent); border-color:var(--accent);
  color:#fff; transform:translateY(-3px);
}
.footer__social .ico{ width:1.15rem; height:1.15rem; }

.footer__bottom{ border-top:1px solid rgba(255,255,255,.1); }
.footer__bottom-inner{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:.35rem 1.25rem; padding-block:.9rem;
  font-size:.75rem;
}
.footer__bottom-inner p{ margin:0; }
.footer__bottom-inner ul{ display:flex; gap:.75rem; }
.footer__bottom-inner li+li::before{ content:"|"; margin-right:.75rem; opacity:.4; }
.footer__bottom-inner li{ display:flex; }

/* ---------- 8. OVERLAYS ---------------------------------------------- */
.floaters{
  position:fixed; right:0; top:55%; z-index:80;
  display:none; flex-direction:column; gap:.4rem;
}
.floater{
  display:flex; align-items:center; gap:.45rem;
  padding:.5rem .75rem;
  border-radius:var(--r-sm) 0 0 var(--r-sm);
  color:#fff; font-size:.6875rem; font-weight:600;
  box-shadow:var(--sh);
  transition:transform var(--t), filter var(--t);
}
.floater .ico{ fill:currentColor; }
.floater:hover{ color:#fff; transform:translateX(-3px); filter:brightness(1.08); }
.floater--wa{ background:var(--whatsapp); }
/* Both floating buttons use the same bright green (matches the client's mockup),
   instead of the dark --primary green on the Call button. */
.floater--call{ background:var(--whatsapp); }
/* Stand down over the footer — it already carries every contact route, and
   the tabs would otherwise sit on top of the social icons. */
.floaters.is-hidden{
  opacity:0; visibility:hidden; transform:translateX(24px);
  transition:opacity var(--t), visibility var(--t), transform var(--t);
}

.to-top{
  position:fixed; right:1rem; bottom:1rem; z-index:81;
  display:flex; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:50%;
  background:var(--primary); color:#fff;
  box-shadow:var(--sh);
  opacity:0; visibility:hidden; transform:translateY(12px);
  transition:opacity var(--t), transform var(--t), visibility var(--t), background var(--t);
}
.to-top.is-visible{ opacity:1; visibility:visible; transform:none; }
.to-top:hover{ background:var(--accent); }

/* WhatsApp + Call floaters: round icon-only buttons in the bottom-LEFT corner,
   the SAME on desktop and mobile (client wanted them identical). The back-to-top
   button keeps the bottom-right corner, so nothing overlaps. */
.floaters{
  display:flex; left:1rem; right:auto; top:auto; bottom:1.25rem; gap:.6rem;
}
.floater{
  width:52px; height:52px; padding:0;
  border-radius:50%; justify-content:center;
}
.floater span{ display:none; }        /* icon only — no "WhatsApp"/"Call Now" label */
.floater .ico{ width:24px; height:24px; }
/* Stay visible everywhere, including over the footer. */
.floaters.is-hidden{ opacity:1; visibility:visible; transform:none; }

/* ---------- 9. BREAKPOINTS ------------------------------------------- */

/* ≥576px — large mobile */
@media (min-width:576px){
  :root{ --pad-x:1.5rem; --sec-y:4rem; }

  .hero__trust{ grid-template-columns:repeat(3,1fr); gap:1.25rem; }
  .hero__trust li{ flex-direction:column; align-items:flex-start; gap:.4rem; }
  .hero__trust li + li{ padding-left:1.25rem; border-left:1px solid rgba(11,78,59,.12); }

  .why__grid{ grid-template-columns:repeat(2,1fr); gap:0; }
  .why__item{ border-bottom:0; border-right:1px solid var(--line); }
  .why__item:nth-child(2n){ border-right:0; }

  .steps{ grid-template-columns:repeat(2,1fr); }
  .stats{ grid-template-columns:repeat(2,1fr); gap:1.5rem 1rem; }
  .about-band__panel{ gap:1rem; }
  .partners{ grid-template-columns:repeat(4,1fr); }
  .partner:nth-child(2n){ border-right:1px solid var(--line); }
  .partner:nth-child(4n){ border-right:0; }
  .partner:nth-last-child(-n+2){ border-bottom:1px solid var(--line); }
  .partner:nth-last-child(-n+4){ border-bottom:0; }

  .form-grid{ grid-template-columns:repeat(2,1fr); }
  .quote-form__grid{ grid-template-columns:1fr 1fr; }
  .floaters{ display:flex; }
  .to-top{ right:1.25rem; bottom:1.25rem; }
}

/* ≥768px — tablet */
@media (min-width:768px){
  :root{ --sec-y:4.5rem; --header-h:76px; }
  body{ font-size:.9375rem; }

  .topbar__inner{ justify-content:space-between; }
  .topbar__list{ justify-content:flex-start; }
  .topbar__right{ display:flex; }

  .logo img{ height:54px; }

  .services__grid{ grid-template-columns:repeat(3,1fr); }
  .service p{ min-height:3.4rem; }

  .slide{ flex:0 0 50%; }

  .slider__nav{ display:flex; }
  .slider__nav--prev{ left:-1rem; }
  .slider__nav--next{ right:-1rem; }

  .about-band__inner{ grid-template-columns:1.35fr 1fr; align-items:center; }
  .split{ grid-template-columns:1fr 1fr; }
  .feature-grid{ grid-template-columns:repeat(2,1fr); }
  .contact-layout{ grid-template-columns:1.3fr 1fr; align-items:start; }

  .footer__top{
    grid-template-columns:auto 1fr;
    gap:2.25rem 2.5rem;
    justify-items:start; align-items:center;
  }
  .footer__quote{ grid-column:1 / -1; justify-self:center; max-width:none; }
  .footer__social{ grid-column:1 / -1; justify-self:center; text-align:center; }
  .footer__bottom-inner{ justify-content:space-between; }

  .page-head{ padding-block:4rem; }
}

/* ≥992px — laptop */
@media (min-width:992px){
  :root{ --sec-y:5rem; }

  /* Larger header logo on desktop (client request). */
  .logo img{ height:81px; }

  /* Desktop nav */
  .burger{ display:none; }
  .nav{
    position:static; width:auto; padding:0;
    margin-left:auto;
    background:none; box-shadow:none; transform:none; overflow:visible;
  }
  .nav__list{ flex-direction:row; align-items:center; gap:.25rem; padding-top:0; }
  .nav__link{
    position:relative;
    padding:.4rem .7rem; border-bottom:0;
    font-size:.8125rem; font-weight:500;
  }
  .nav__link::after{
    content:""; position:absolute; left:.7rem; right:.7rem; bottom:.05rem;
    height:2px; border-radius:2px; background:var(--accent);
    transform:scaleX(0); transform-origin:left;
    transition:transform var(--t);
  }
  .nav__link:hover::after,
  .nav__link.is-active::after{ transform:scaleX(1); }
  .nav__cta{ display:none; }
  .nav-overlay{ display:none; }

  /* Desktop dropdowns: hover flyout under the parent item. */
  .has-dropdown{ position:relative; }
  .has-dropdown > .nav__link::after{ display:none; }   /* no underline bar on parents */
  .nav__dropdown{
    position:absolute; top:calc(100% + 2px); left:0; z-index:100;
    min-width:230px; padding:.4rem;
    background:#fff; border:1px solid var(--line); border-radius:var(--r-md);
    box-shadow:0 14px 34px rgba(16,42,67,.16);
  }
  .has-dropdown:hover > .nav__dropdown,
  .has-dropdown:focus-within > .nav__dropdown{ display:block; }
  .nav__dropdown .nav__link{
    display:block; padding:.55rem .7rem; border-radius:var(--r-sm);
    white-space:nowrap; font-size:.8125rem; color:var(--dark);
  }
  .nav__dropdown .nav__link::after{ display:none; }
  .nav__dropdown .nav__link:hover{ background:var(--accent-soft); color:var(--primary); }
  .nav__caret{ border-top-color:currentColor; }

  /* 3rd level (car models): a sub-dropdown flies out to the RIGHT of its brand. */
  .nav__dropdown .has-dropdown{ position:relative; }
  .nav__dropdown .has-dropdown > .nav__link{ display:flex; align-items:center; justify-content:space-between; gap:.75rem; }
  .nav__dropdown .has-dropdown > .nav__link .nav__caret{
    border-top:4px solid transparent; border-bottom:4px solid transparent;
    border-left:5px solid currentColor; margin-left:0;   /* right-pointing */
  }
  .nav__dropdown .nav__dropdown{ top:-.45rem; left:calc(100% + 4px); }
  .nav__dropdown .has-dropdown:hover > .nav__dropdown{ display:block; }

  .header__cta{ display:inline-flex; margin-left:1.25rem; }
  .header__inner{ gap:1.5rem; }

  /* Hero two-up */
  .hero{ padding-block:3.5rem 4rem; }
  .hero__inner{ grid-template-columns:1.15fr 1fr; align-items:center; gap:2.5rem; }
  .hero__media{ margin-right:-4rem; }

  /* Services overlap the hero, as in the design */
  .services{ margin-top:-3.5rem; padding-top:0; position:relative; z-index:2; }
  .service{ padding:1.75rem 1.5rem 1.5rem; }

  .why__grid{ grid-template-columns:repeat(5,1fr); }
  .why__item{ border-right:1px solid var(--line); }
  .why__item:nth-child(2n){ border-right:1px solid var(--line); }
  .why__item:last-child{ border-right:0; }

  /* Steps with connector arrows */
  .steps{ grid-template-columns:repeat(4,1fr); gap:2.4rem; }
  .step::after{
    content:""; position:absolute; right:-1.6rem; top:50%;
    width:.8rem; height:.8rem; margin-top:-.4rem;
    border-right:2px solid var(--line); border-top:2px solid var(--line);
    transform:rotate(45deg);
  }
  .steps li:last-child::after{ content:none; }

  .stats{ grid-template-columns:repeat(4,1fr); padding:2.1rem 2.25rem; }
  .stat + .stat{ padding-left:1.5rem; border-left:1px solid rgba(255,255,255,.18); }
  .stat__num{ font-size:1.75rem; }
  .stat__num--text{ font-size:1.25rem; }

  .slide{ flex:0 0 33.3333%; }

  .partners{ grid-template-columns:repeat(8,1fr); }
  .partner{ border-bottom:0; border-right:1px solid var(--line); }
  .partner:nth-child(2n),
  .partner:nth-child(4n){ border-right:1px solid var(--line); }
  .partner:last-child{ border-right:0; }
  .partner__mark{ font-size:1rem; }

  .feature-grid{ grid-template-columns:repeat(3,1fr); }

  /* badge | contact | form | social, as in the approved footer */
  /* badge | contact | form | social, as in the approved footer */
  .footer__top{
    grid-template-columns:auto auto minmax(400px,1fr) auto;
    gap:2.25rem; align-items:center;
    padding-block:3.25rem;
  }
  .footer__quote,
  .footer__social{ grid-column:auto; justify-self:auto; text-align:left; }
  .footer__quote{
    max-width:none;
    padding-left:2.25rem;
    border-left:1px solid rgba(255,255,255,.13);
  }
  /* the placeholder "Select Insurance Type" is the widest string in the
     form — keep the field type a notch smaller so it never clips */
  .footer__quote input,
  .footer__quote select{ font-size:.8125rem; }
  .footer__quote select{ padding-right:2.1rem; background-position:right .75rem center; }
  .footer__social{ padding-left:1rem; }
  .footer__social ul{ justify-content:flex-start; }
}

/* ≥1200px — desktop */
@media (min-width:1200px){
  :root{ --sec-y:5.5rem; --pad-x:2rem; }
  body{ font-size:1rem; }

  .nav__link{ font-size:.875rem; padding:.4rem .85rem; }
  .nav__link::after{ left:.85rem; right:.85rem; }

  .hero{ padding-block:4rem 5rem; }
  .hero__media{ margin-right:-6rem; }
  .service p{ font-size:.875rem; }
  .why__item p,
  .testimonial blockquote p{ font-size:.875rem; }
}

/* ---------- 10. MOTION & PRINT --------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal{ opacity:1; transform:none; }
}

@media print{
  .topbar,.header,.floaters,.to-top,.slider__nav,.slider__dots,.footer__map{ display:none !important; }
  body{ color:#000; font-size:11pt; }
  .card,.stats{ box-shadow:none; border:1px solid #ccc; }
  a[href^="http"]::after{ content:" (" attr(href) ")"; font-size:9pt; }
}

/* ============================================================
   Client testimonials — HIDDEN site-wide (data kept in the DB,
   nothing deleted) pending verified customer reviews.
   Covers all three places testimonials render:
     .testimonials-col            → Comprehensive & Takaful "FAQ + testimonials" pages
     #testimonialSlider           → the [gi_testimonials] shortcode slider
     .elementor-element-ccbedfc   → homepage Elementor section (heading + slider)
   To show testimonials again, delete this whole block.
   ============================================================ */
.testimonials-col,
#testimonialSlider,
.elementor-element-ccbedfc,
.elementor-element-ccbedfc .elementor-element{ display:none !important; }
/* Let the FAQ fill the row its testimonials column leaves behind. */
.split-panels{ grid-template-columns:1fr !important; }

/* ============================================================
   "Need Help Getting a Quote?" CTA band — HIDDEN site-wide
   (markup kept, nothing deleted) per client request. It renders
   from parts/cta-band.php on About, Insurance, Contact, Quote,
   Privacy, Terms, service pages and 404. To show it again,
   delete this rule.
   ============================================================ */
.cta-band{ display:none !important; }

/* ============================================================
   "Protect Your Vehicle Today" promo band (.cta-wide) — HIDDEN
   site-wide (markup kept) per client request. On the Takaful home
   page the contact rail (.cta-rail) lives INSIDE this band, so
   there we keep the band shell and hide only the promo copy and
   buttons, leaving the contact rail visible. On every other page
   the contact strip is a separate section, so the whole band is
   hidden. To show it again, delete this whole block.
   ============================================================ */
.cta-wide{ display:none !important; }
.home .cta-wide{ display:block !important; }
.home .cta-wide__inner,
.home .cta-wide__bg{ display:none !important; }