/* =====================================================================
   CELLTOB — Design System
   Light theme only. No dark sections anywhere.
   ===================================================================== */

:root {
  /* Colour — sampled from the live celltob.in Elementor global palette.
     Dark text on the orange accent: white on #FD9800 is only 2.2:1. */
  --paper:       #FFFFFF;
  --white:       #FFFFFF;
  --alt:         #FEF9E1;
  --ink:         #0F172A;
  --muted:       #454F5E;
  --accent:      #FD9800;
  --accent-dark: #E98C00;
  --accent-tint: #FFEFCF;
  --accent-wash: #FFF8EA;
  --on-accent:   #0F172A;
  --hairline:    #E6E3DA;   /* neutral tint that reads on both surfaces */

  /* Their signature yellow. On celltob.in this is both a text highlighter
     ("We believe CREATIVITY is...") and the fill of the big Our Clients
     panel — the single most recognisable thing on the site. */
  --gold:        #FCCA49;   /* ast-global-color 6 family, used live */
  --gold-deep:   #F6D329;
  --cream-deep:  #F9F0C8;   /* ast-global-color-6 */
  --panel:       #000000;   /* hero panel */
  --mist:        #F2F2F2;   /* their hero band */

  /* Type */
  /* One family throughout - Lexend, the face celltob.in itself uses. */
  --display: "Lexend", "Segoe UI", system-ui, sans-serif;
  --body:    "Lexend", "Segoe UI", system-ui, sans-serif;
  --label:   "Lexend", "Segoe UI", system-ui, sans-serif;

  /* Space — 8px base. s5–s8 carry the vertical rhythm; tightened from the
     original 48/64/96/120 so sections sit closer together. */
  --s1: 8px;  --s2: 16px; --s3: 24px; --s4: 32px;
  --s5: 40px; --s6: 56px; --s7: 72px; --s8: 88px;

  /* Shape — one scale, four steps. Nothing should hardcode a radius.
       xs  tiny badges, key caps, table rows
       sm  anything you type into or click as a control
       md  content cards
       lg  large panels and dialogs                                    */
  --r-xs: 8px; --r-sm: 12px; --r-md: 16px; --r-lg: 20px;
  --shadow:      0 4px 20px rgba(15, 23, 42, .06);
  --shadow-lift: 0 12px 32px rgba(15, 23, 42, .09);
  --shadow-accent:  0 12px 32px rgba(253, 152, 0, .24);

  --shell:  1320px;   /* 1440 - (60 × 2) */
  --gutter: 60px;
  --nav-h:  80px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* stable gutter: the popup and video dialogs lock scrolling, and without it
   the page would jump sideways as the desktop scrollbar disappears */
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 16px); scrollbar-gutter: stable; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3, h4 { margin: 0; font-family: var(--display); font-weight: 700; letter-spacing: -.02em; }
p  { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure, figcaption { margin: 0; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
/* Honeypot: off-screen rather than display:none, because some bots skip
   hidden inputs but happily fill anything that is technically visible. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.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;
}
.label { font-family: var(--label); font-weight: 500; }

/* ---------- Layout ---------- */
/* Content column = --shell wide, sitting inside --gutter outer margins.
   1248px content + 96px × 2 = the 1440px frame. */
.shell {
  width: 100%;
  max-width: calc(var(--shell) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.shell--narrow { --shell: 800px; }

.sec { padding-block: var(--s8); }
.sec--paper { background: var(--paper); }
.sec--alt   { background: var(--alt); }
.sec--gold  { background: var(--gold); }
.sec--gold .sechead__sub,
.sec--gold .why__d,
.sec--gold .eyebrow { color: #6B4A12; }
.sec--tight { padding-top: var(--s6); }
.sec--tight-b { padding-bottom: var(--s6); }

.sechead { max-width: 640px; margin: 0 auto var(--s5); text-align: center; }
.sechead__sub { margin-top: var(--s2); color: var(--muted); font-size: 17px; }
.sec__cta { margin-top: var(--s5); text-align: center; }

.h2 { font-size: 44px; line-height: 1.1; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 0 0 var(--s2);
  font-family: var(--label); font-size: 12px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--accent);
}
.eyebrow__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }

.grid { display: grid; gap: var(--s3); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }

/* ---------- Highlighter marker ----------
   celltob.in highlights key words with a flat #FCCA49 block behind the
   text. Padding + a negative margin keep the line-height unchanged. */
.mark {
  background: var(--gold);
  padding: .02em .2em;
  margin-left: -.04em;
  margin-right: .03em;
  border-radius: 3px;
  color: var(--ink);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* ---------- Hand-drawn underline ---------- */
.ul-scribble { position: relative; display: inline-block; color: inherit; white-space: nowrap; }
.ul-scribble svg {
  position: absolute; left: -2px; right: -2px; bottom: -.16em;
  width: calc(100% + 4px); height: .28em; color: var(--accent); overflow: visible;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 28px; border-radius: var(--r-sm);
  background: var(--accent); color: var(--on-accent);
  font-size: 15px; font-weight: 600; line-height: 1.2;
  transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.btn:hover { background: var(--accent-dark); transform: translateY(-1px); box-shadow: var(--shadow-accent); }
.btn:active { transform: translateY(0); }
.btn svg { transition: transform .18s ease; }
.btn:hover svg { transform: translateX(3px); }

.btn--pill { padding: 14px 22px; border-radius: 999px; }
.btn--block { width: 100%; }
.btn--lg { padding-block: 16px; font-size: 16px; }

.iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--white); color: var(--ink);
  border: 1px solid var(--hairline);
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.iconbtn:hover { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.iconbtn--solid { background: var(--accent); color: var(--on-accent); border-color: var(--accent); flex: none; }
.iconbtn--solid:hover { background: var(--accent-dark); border-color: var(--accent-dark); }

/* ---------- Card base ---------- */
.card {
  position: relative;
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  box-shadow: var(--shadow);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

/* =====================================================================
   1. NAVIGATION
   ===================================================================== */
.nav {
  position: sticky; top: 0; z-index: 60;
  background: var(--white);
  border-bottom: 1px solid var(--hairline);
  transition: background .25s ease, box-shadow .25s ease;
}
.nav.is-scrolled {
  background: rgba(255, 255, 255, .78);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: 0 1px 20px rgba(15, 23, 42, .06);
}
.nav__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s4); height: var(--nav-h);
}
.logo {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  font-family: var(--display); font-weight: 700; font-size: 22px;
  letter-spacing: -.02em;
}
.logo img { height: 40px; width: auto; }
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(253, 152, 0, .6); }
  70%  { box-shadow: 0 0 0 7px rgba(253, 152, 0, 0); }
  100% { box-shadow: 0 0 0 0 rgba(253, 152, 0, 0); }
}
.nav__links { display: flex; gap: var(--s4); }
.nav__links a {
  position: relative; font-size: 15px; font-weight: 500; padding-block: 4px;
  white-space: nowrap;
}
.nav__links a::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform .2s ease;
}
.nav__links a:hover::after, .nav__links a.is-active::after { transform: scaleX(1); }
.nav__links .nav__ext { display: inline-flex; align-items: center; gap: 4px; color: var(--accent-dark); }
.nav__ext svg { flex: none; }

.nav__right { display: flex; align-items: center; gap: var(--s3); }
.nav__social { display: flex; gap: 8px; }
.nav__social .social { width: 32px; height: 32px; }
.nav__phone { font-size: 14px; color: var(--ink); }
.nav__phone:hover { color: var(--accent); }
.nav__dl {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 14px; font-weight: 500; color: var(--muted); white-space: nowrap;
  transition: color .18s ease;
}
.nav__dl:hover { color: var(--accent); }
.nav__burger { display: none; flex: none; padding: 6px; color: var(--ink); }

.nav__mobile {
  display: none; flex-direction: column; gap: var(--s2);
  padding: var(--s3) var(--s3) var(--s4);
  border-top: 1px solid var(--hairline); background: var(--white);
}
.nav__mobile[hidden] { display: none; }
.nav__mobile a { font-size: 16px; font-weight: 500; }

/* =====================================================================
   2. HERO
   ===================================================================== */
.hero {
  padding-block: var(--s7) var(--s6);
  background: var(--mist);
  border-bottom: 1px solid var(--hairline);
}

/* ---------- Split hero ----------
   Full-bleed two-up: a solid dark panel carrying the pitch and the proof
   numbers, and a light half holding the lead form. The panel padding uses
   max() so its text lines up with the shell gutter on wide screens and
   never goes narrower than the gutter on small ones. */
/* Two selectors, both doubled up: the modifier alone loses to the
   short-viewport @media .hero / .lp-hero rules further down the file. */
.hero.hero--split,
.lp-hero.hero--split {
  display: grid; grid-template-columns: 1fr 1fr;
  align-items: stretch;
  padding-block: 0;
  background: none;
  border-bottom: 0;
}
/* Copy starts at the top, level with the form card beside it (same top
   padding as .hero__aside), rather than floating in the middle. */
.hero__panel {
  display: flex; align-items: flex-start;
  background: var(--panel);
  color: var(--white);
  padding: var(--s6) var(--s5) var(--s7) max(var(--gutter), calc((100vw - var(--shell)) / 2));
}
.hero__panel-in { width: 100%; max-width: 620px; }
.hero__aside {
  display: flex; flex-direction: column; justify-content: center; gap: var(--s2);
  background: var(--mist);
  padding: var(--s6) max(var(--gutter), calc((100vw - var(--shell)) / 2)) var(--s5) var(--s5);
}

.hero--split .hero__h1  { color: var(--white); font-size: 54px; }
.hero--split .hero__sub { color: rgba(255,255,255,.72); max-width: 500px; }

/* Badge pill, echoing the reference layout */
.eyebrow--pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 15px 7px 12px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.07);
  color: rgba(255,255,255,.88);
}
.eyebrow--pill .eyebrow__dot { background: var(--gold); margin-right: 0; }

.hero__panel .lp-ticks li { color: rgba(255, 255, 255, .8); }

.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--s4); }
.btn--light { background: var(--white); color: var(--ink); }
.btn--light:hover { background: var(--alt); }

/* Numbers carry the proof here, so they lose the icons and get much larger */
.hero--split .hero__stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--s3); margin-top: var(--s6); max-width: 520px;
}
.hero--split .hstat { display: block; }
.hero--split .hstat + .hstat { padding-left: 0; border-left: 0; }
.hero--split .hstat__num   { font-size: 34px; font-weight: 600; line-height: 1; color: var(--white); }
.hero--split .hstat__label { margin-top: 9px; font-size: 13px; color: rgba(255,255,255,.6); }

/* Floating proof card - the reference puts one over the photo; here it sits
   under the form, where it backs the ask instead of competing with it. */
.prooflet {
  display: flex; align-items: center; gap: 14px;
  background: var(--white); border-radius: var(--r-md);
  box-shadow: var(--shadow-lift); padding: 14px 18px;
}
.prooflet__text { min-width: 0; }
.prooflet__t {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px;
  font-family: var(--display); font-weight: 600; font-size: 15px;
}
.prooflet__score { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; }
.prooflet__score svg { color: var(--accent); flex: none; }
.prooflet__c { margin-top: 4px; font-size: 12px; color: var(--muted); }
.avstack { display: flex; flex: none; }
.avstack img {
  width: 34px; height: 34px; border-radius: 50%; object-fit: cover;
  border: 2px solid var(--white); background: var(--alt);
}
.avstack img + img { margin-left: -11px; }

@media (max-width: 980px) {
  /* Must match the doubled-up base selector above - a bare .hero--split
     is (0,1,0) and loses to .hero.hero--split (0,2,0) no matter where it
     sits, so the hero never stacked on phones. */
  .hero.hero--split,
  .lp-hero.hero--split { grid-template-columns: 1fr; }
  .hero__panel,
  .hero__aside { padding-inline: var(--gutter); }
  .hero__panel { padding-block: var(--s6); }
  .hero__panel-in { max-width: none; }
  .hero--split .hero__h1 { font-size: 42px; }
  .hero--split .hero__stats { margin-top: var(--s5); max-width: none; }
  .hero--split .hstat__num { font-size: 28px; }
}
.hero__h1 { font-size: 62px; line-height: 1.16; margin-bottom: var(--s3); }
.hero__sub { max-width: 540px; font-size: 19px; color: var(--muted); }

.hero__stats {
  display: flex; align-items: center; gap: var(--s3);
  margin-top: var(--s4); flex-wrap: wrap;
}
.hstat { display: flex; align-items: center; gap: 10px; }
.hstat + .hstat { padding-left: var(--s3); border-left: 1px solid var(--hairline); }
.hstat__num { display: block; font-size: 16px; font-weight: 500; line-height: 1.3; }
.hstat__label { display: block; font-size: 13px; color: var(--muted); line-height: 1.3; }

/* Tick list — used by the web-development and seo-aeo heroes, which load
   only styles.css, so these cannot live in lead.css. */
.lp-ticks { display: flex; flex-direction: column; gap: 12px; margin-top: var(--s3); }
.lp-ticks li { display: flex; align-items: flex-start; gap: 11px; font-size: 15px; }
.lp-tick {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 22px; height: 22px; border-radius: 50%; margin-top: 1px;
  background: var(--accent); color: var(--on-accent);
}


/* --- right column --- */
.formcard {
  position: relative; z-index: 2;
  background: var(--white);
  border: 1px solid var(--hairline);
  border-top: 4px solid var(--accent);
  border-radius: var(--r-lg);
  padding: 32px;
  box-shadow: 0 18px 48px rgba(15, 23, 42, .10);
}
.formcard__badge {
  display: inline-block; padding: 6px 12px; border-radius: 999px;
  background: var(--accent); color: var(--on-accent);
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
}
.formcard__h { margin: 14px 0 var(--s3); font-size: 23px; line-height: 1.25; }
/* The sub-line reads as part of the heading, so it takes over the gap below it.
   (0,2,0) so the short-viewport .formcard__h margin further down cannot undo it. */
.formcard__h:has(+ .formcard__sub) { margin-bottom: 8px; }
.formcard__sub { margin-bottom: var(--s3); font-size: 14px; line-height: 1.5; color: var(--muted); }

.field { display: block; margin-bottom: 14px; }
.field label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 500; }
.field__opt { color: var(--muted); font-weight: 400; }
.field input, .field select, .miniform input, .captcha input {
  width: 100%; padding: 13px 14px; border-radius: var(--r-sm);
  border: 1.5px solid var(--ink); background: var(--white);
  font-size: 15px;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.field input::placeholder, .miniform input::placeholder, .captcha input::placeholder { color: #A29C8A; }
.field select { appearance: none; color: var(--ink); cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23454F5E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; padding-right: 38px;
}
.field select:invalid { color: #A29C8A; }
.field input:focus, .field select:focus, .miniform input:focus, .captcha input:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(253, 152, 0, .25);
}
.field input.is-error, .miniform input.is-error, .captcha input.is-error, .field select.is-error { border-color: var(--accent); background: var(--accent-wash); }

/* Name and phone sit side by side - one less row to scroll past */
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field-row .field { margin-bottom: 14px; }

/* Math captcha: the sum and a small answer box on one line. (0,2,0) on the
   box so the full-width input rules for each form cannot stretch it. */
.captcha { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.captcha__q { font-size: 13px; font-weight: 500; }
.captcha__q b { font-weight: 700; white-space: nowrap; }
.captcha .captcha__in { width: 72px; flex: none; text-align: center; }

.formcard .btn { margin-top: 10px; }
.formcard__micro {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin-top: 12px; font-size: 12px; color: var(--muted); text-align: center;
}
.formcard__micro svg { flex: none; }
.formstate {
  margin-top: 10px; font-size: 12px; text-align: center;
  color: var(--accent); min-height: 0;
}
.formstate.is-ok { color: #2C7A4B; }

/* =====================================================================
   3. SERVICES
   ===================================================================== */
.svc { padding: var(--s3); display: flex; flex-direction: column; }
.svc:hover { transform: translateY(-4px); box-shadow: var(--shadow-accent); border-color: rgba(253, 152, 0, .42); }
.svc__ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--accent-tint); color: var(--accent); margin-bottom: var(--s2);
}
.svc__t { font-size: 18px; line-height: 1.25; margin-bottom: 8px; }
.svc__d { font-size: 15px; color: var(--muted); flex: 1; }
.svc__link {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: var(--s2); color: var(--accent); font-size: 14px; font-weight: 500;
}
.svc__link svg { transition: transform .18s ease; }
.svc:hover .svc__link svg { transform: translateX(4px); }
.svc__glyph { position: absolute; top: 20px; right: 20px; color: rgba(253, 152, 0, .28); }
.svc:hover .svc__glyph { color: rgba(253, 152, 0, .50); }

/* =====================================================================
   4. TRUST BAR
   ===================================================================== */
/* White, not cream: several client logos ship with an opaque white
   plate, which would show as boxes on a tinted band. */
.trustbar {
  background: var(--white);
  border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline);
  padding-block: var(--s5);
}
.trustbar__label {
  text-align: center; font-size: 12px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted); margin-bottom: var(--s3);
}
.marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track { display: flex; width: max-content; animation: scroll 90s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__list { display: flex; align-items: center; gap: 68px; padding-right: 68px; }
.marquee__list li { display: flex; align-items: center; flex: none; }
.marquee__list img {
  /* source files are 120px tall, so this is still well within their
     resolution; max-width stops the widest wordmarks dominating */
  height: 52px; width: auto; max-width: 190px; object-fit: contain;
  opacity: .85; transition: opacity .2s ease;
}
.marquee__list li:hover img { opacity: 1; }
@keyframes scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* =====================================================================
   5. PROCESS
   ===================================================================== */
.timeline { position: relative; }
.timeline__line {
  position: absolute; top: 40px; left: 8%; right: 8%; height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent) 12%, var(--accent) 88%, transparent);
  opacity: .32;
}
.timeline__steps {
  position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s3);
}
.step { padding: var(--s3); display: flex; flex-direction: column; }
.step:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.step__num { font-size: 32px; font-weight: 500; color: var(--accent); line-height: 1; }
.step__t { margin: var(--s2) 0 8px; font-size: 18px; line-height: 1.25; }
.step__d { font-size: 14px; color: var(--muted); flex: 1; }
.step__tag {
  align-self: flex-start; margin-top: var(--s2);
  padding: 5px 12px; border-radius: 999px;
  background: var(--alt); color: var(--muted);
  font-size: 11px; letter-spacing: .08em;
}

.banner {
  display: flex; align-items: center; justify-content: center;
  gap: var(--s4); flex-wrap: wrap;
  margin-top: var(--s5); padding: var(--s5) var(--s4);
  background: var(--accent-tint); border-radius: var(--r-lg); text-align: center;
}
.banner__h { font-size: 24px; line-height: 1.25; }

/* =====================================================================
   6. WHY US
   ===================================================================== */
.why { padding: var(--s3); }
.why:hover { transform: translateY(-4px); box-shadow: var(--shadow-accent); border-color: rgba(253, 152, 0, .42); }
.tagpill {
  display: inline-block; padding: 5px 12px; border-radius: 999px;
  background: var(--accent-tint); color: var(--accent);
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
}
.why__t { margin: var(--s2) 0 8px; font-size: 18px; line-height: 1.3; }
.why__d { font-size: 15px; color: var(--muted); }

/* =====================================================================
   7. TESTIMONIALS
   ===================================================================== */
.tabs { display: flex; justify-content: center; gap: 12px; margin-bottom: var(--s4); }
.tab {
  padding: 11px 22px; border-radius: 999px;
  background: var(--white); color: var(--ink);
  box-shadow: inset 0 0 0 1.5px var(--hairline);
  font-size: 14px; font-weight: 500;
  transition: all .18s ease;
}
.tab:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }
.tab.is-active { background: var(--accent); color: var(--on-accent); box-shadow: inset 0 0 0 1.5px var(--accent); }

.rail-wrap { position: relative; }
.rail {
  display: grid; grid-auto-flow: column; grid-auto-columns: 292px;
  gap: var(--s3); overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: var(--s1); scrollbar-width: none;
}
.rail::-webkit-scrollbar { display: none; }
.rail[hidden] { display: none; }
.tcard { scroll-snap-align: start; padding: var(--s3); }
.tcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.tcard__head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.tcard__id { min-width: 0; }
.tcard__name {
  display: flex; align-items: center; gap: 5px;
  font-size: 15px; font-weight: 700; line-height: 1.3;
}
/* blue verified badge with a white tick (tick colour lives in the sprite) */
.tcard__verified { color: #1D9BF0; flex: none; }
.tcard__biz { display: block; font-size: 12px; color: var(--muted); }
.stars { display: flex; gap: 3px; color: var(--accent); margin-bottom: 10px; }
.tcard__quote {
  font-size: 15px; font-style: italic; color: #3B4757;
  /* the rail stretches every card to the tallest, so cap the copy to
     keep the row from being defined by one very long review */
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 8;
  overflow: hidden;
}

.tcard--video { padding-top: var(--s2); }
.rail--video { grid-auto-columns: 236px; }
.vthumb {
  display: block; position: relative; overflow: hidden;
  aspect-ratio: 9 / 16; border-radius: var(--r-sm); margin-bottom: 14px;
  background: var(--alt);
}
.vthumb img { width: 100%; height: 100%; object-fit: cover; }
.vthumb__play {
  position: absolute; inset: 0; margin: auto;
  width: 46px; height: 46px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .93); color: var(--accent);
  box-shadow: 0 4px 14px rgba(15, 23, 42, .28);
  transition: transform .2s ease;
}
.vthumb:hover .vthumb__play { transform: scale(1.1); }

/* ---------- Local SEO / GBP result cards ----------
   Each shot is a client's Google Business Profile performance report.
   The full portrait report sits on top (click opens it large), with the
   client's name and category underneath. */
.rail--gallery { grid-auto-columns: 300px; }
.gbp {
  scroll-snap-align: start;
  display: flex; flex-direction: column;
  background: var(--white);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform .18s ease, box-shadow .18s ease;
}
.gbp:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.gbp__shot { position: relative; display: block; line-height: 0; background: var(--alt); }
.gbp__shot img { display: block; width: 100%; height: auto; }
.gbp__shot::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(rgba(15, 23, 42, 0) 55%, rgba(15, 23, 42, .55));
  opacity: 0; transition: opacity .22s ease;
}
.gbp__shot:hover::after, .gbp__shot:focus-visible::after { opacity: 1; }
.gbp__shot:hover .cs__zoom, .gbp__shot:focus-visible .cs__zoom { opacity: 1; transform: none; }
.gbp__body {
  display: flex; flex-direction: column; flex: 1;
  padding: var(--s3); border-top: 1px solid var(--hairline);
}
.gbp__name { font-size: 17px; line-height: 1.3; }
.gbp__cat { margin-top: 4px; font-size: 13px; color: var(--muted); }

.railnav {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: var(--s3);
}
/* display:flex beats the UA [hidden] rule, so restate it - the script hides
   the nav whenever the rail fits without scrolling. */
.railnav[hidden] { display: none; }
.dots { display: flex; gap: 7px; }
.dots span {
  width: 7px; height: 7px; border-radius: 50%; background: var(--hairline);
  transition: all .2s ease;
}
.dots span.is-active { background: var(--accent); width: 22px; border-radius: 999px; }
.railnav__btns { display: flex; gap: 10px; }

/* Side arrows: prev/next sit on the left and right edges of the cards,
   vertically centred on them; the dots stay underneath. The rail is the
   wrap minus the railnav row (24px margin + 40px button), hence the 64px. */
.rail-wrap--side .railnav__btns { display: contents; }
.rail-wrap--side .railnav__prev,
.rail-wrap--side .railnav__next {
  position: absolute; z-index: 3; top: calc((100% - 64px) / 2); translate: 0 -50%;
  width: 46px; height: 46px; box-shadow: var(--shadow-lift);
}
.rail-wrap--side .railnav__prev { left: -22px; }
.rail-wrap--side .railnav__next { right: -22px; }
.rail-wrap--side .railnav { justify-content: center; }
@media (max-width: 640px) {
  .rail-wrap--side .railnav__prev { left: -10px; }
  .rail-wrap--side .railnav__next { right: -10px; }
}

/* =====================================================================
   9. CTA BANNER
   ===================================================================== */
.ctacard {
  background: var(--white); border: 2px solid var(--accent);
  border-radius: var(--r-lg); padding: var(--s6);
  text-align: center; box-shadow: var(--shadow);
}
.ctacard__sub { margin: var(--s2) auto 0; max-width: 520px; font-size: 16px; color: var(--muted); }
.ctacard__alt { margin-top: var(--s3); font-size: 14px; color: var(--muted); }
.ctacard__alt a {
  color: var(--accent); font-weight: 500;
  text-decoration: underline; text-underline-offset: 3px;
}
.ctacard__alt a:hover { color: var(--accent-dark); }
.ctacard__privacy { margin-top: 8px; font-size: 12px; color: var(--muted); }

.miniform {
  display: flex; justify-content: center; gap: 12px;
  margin-top: var(--s4); flex-wrap: wrap;
}
.miniform input { width: 240px; }
.miniform .btn { flex: none; }
.miniform .captcha { margin-bottom: 0; }

/* =====================================================================
   CASE STUDY CARDS — screenshot on top, numbers underneath
   ===================================================================== */
.cs { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.cs:hover { transform: translateY(-4px); box-shadow: var(--shadow-accent); border-color: rgba(253, 152, 0, .42); }

/* Each dashboard is cropped at its own clean row gap, so the heights
   differ slightly. A fixed box plus object-fit lines all four cards up. */
.cs__shot {
  position: relative; display: block; background: var(--alt); line-height: 0;
  aspect-ratio: 1300 / 438; overflow: hidden;
}
.cs__shot img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
/* SEO reports are dense tables - show the whole report, not a strip of it */
.cs__shot--full { aspect-ratio: 1536 / 1024; }
.cs__shot::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(rgba(15, 23, 42, 0) 45%, rgba(15, 23, 42, .55));
  opacity: 0; transition: opacity .22s ease;
}
.cs__zoom {
  position: absolute; left: 0; right: 0; bottom: 14px; z-index: 2;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  color: #fff; font-size: 14px; font-weight: 600; line-height: 1;
  opacity: 0; transform: translateY(6px);
  transition: opacity .22s ease, transform .22s ease;
}
.cs__shot:hover::after, .cs__shot:focus-visible::after { opacity: 1; }
.cs__shot:hover .cs__zoom, .cs__shot:focus-visible .cs__zoom { opacity: 1; transform: none; }

.cs__body { padding: var(--s4); display: flex; flex-direction: column; flex: 1; }
.cs__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); flex-wrap: wrap; }
.cs__name { font-size: 22px; line-height: 1.2; }
.cs__spend { margin-top: 12px; font-size: 15px; color: var(--muted); }
.cs__spend b { font-family: var(--display); font-size: 20px; color: var(--ink); }
.cs__note {
  max-width: 720px; margin: var(--s4) auto 0; text-align: center;
  font-size: 13px; color: var(--muted);
}

/* touch devices get no hover, so keep the prompt visible there */
@media (hover: none) {
  .cs__shot::after, .gbp__shot::after { opacity: 1; }
  .cs__zoom { opacity: 1; transform: none; }
}

@media (max-width: 640px) {
  .cs__body { padding: var(--s3); }
}

/* =====================================================================
   10. FAQ
   ===================================================================== */
.faq { display: flex; flex-direction: column; gap: 12px; }
.faq__item { border-radius: var(--r-sm); overflow: hidden; }
.faq__item.is-open { border-color: rgba(253, 152, 0, .45); box-shadow: var(--shadow-accent); }
.faq__q {
  display: flex; align-items: center; gap: 14px;
  width: 100%; padding: 20px; text-align: left;
}
.faq__n { font-size: 13px; color: var(--muted); flex: none; width: 18px; }
.faq__text { flex: 1; font-size: 17px; font-weight: 500; }
.faq__toggle {
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-tint); color: var(--accent);
  transition: transform .25s ease, background .2s ease, color .2s ease;
}
.faq__item.is-open .faq__toggle { transform: rotate(135deg); background: var(--accent); color: var(--on-accent); }
.faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .28s ease; }
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }
.faq__a-inner { overflow: hidden; }
.faq__a-inner p {
  margin: 0 20px 20px 52px; /* aligns under the question text, past number + gap */
  padding-top: 16px; border-top: 1px solid var(--hairline);
  font-size: 15px; color: var(--muted);
}

/* =====================================================================
   11. FOOTER
   ===================================================================== */
.footer {
  background: var(--alt);
  border-top: 1px solid var(--hairline);
  padding-block: var(--s7);
}
.footer__grid {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.4fr; gap: var(--s4);
}
.footer__blurb { margin: var(--s2) 0 var(--s3); font-size: 14px; color: var(--muted); max-width: 300px; }
/* White chips: several badge images carry their own white plate. */
.gbadge {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 8px 12px; border-radius: var(--r-sm);
  background: var(--white); border: 1.5px solid var(--ink);
  transition: border-color .18s ease, transform .18s ease;
}
.gbadge:hover { border-color: rgba(253, 152, 0, .5); transform: translateY(-2px); }
.gbadge img { height: 46px; width: auto; max-width: 150px; object-fit: contain; display: block; }

.footer__trust {
  display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap;
  margin-top: var(--s5); padding-top: var(--s4);
  border-top: 1px solid var(--hairline);
}
.footer__trust-label {
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.footer__trust-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.footer__h {
  font-family: var(--label); font-weight: 500; font-size: 12px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink);
  margin-bottom: var(--s2);
}
.footer__list { display: flex; flex-direction: column; gap: 10px; }
.footer__list a, .footer__list span { font-size: 14px; color: var(--muted); }
.footer__list a:hover { color: var(--accent); }
.footer__list--contact li { display: flex; align-items: flex-start; gap: 9px; }
.footer__list--contact svg { color: var(--accent); flex: none; margin-top: 3px; }


.footer__bottom {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s3); flex-wrap: wrap;
  margin-top: var(--s4); padding-top: var(--s3);
  border-top: 1px solid var(--hairline);
}
.footer__bottom p { font-size: 12px; color: var(--muted); }
.footer__social { display: flex; gap: 10px; margin-bottom: var(--s2); }
.footer__bottom-right { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.social {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  border: 1.5px solid var(--accent); color: var(--accent);
  transition: background .18s ease, color .18s ease;
}
.social:hover { background: var(--accent); color: var(--on-accent); }
.footer__legal { font-size: 12px; color: var(--muted); }
.footer__legal:hover { color: var(--accent); }

/* =====================================================================
   REVEAL ON SCROLL
   ===================================================================== */
/* Uses the standalone `translate` property, not `transform`, so it never
   collides with the hover lifts defined on cards above. */
.reveal { opacity: 0; translate: 0 18px; transition: opacity .6s ease, translate .6s ease; }
.reveal.is-in { opacity: 1; translate: none; }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 1240px) {
  :root { --gutter: 48px; }
}

/* Six nav items plus a phone number stop fitting around 1180px;
   the number is still in the footer and on the ads page header. */
@media (max-width: 1180px) {
  .nav__phone, .nav__dl { display: none; }
  .nav__links { gap: var(--s3); }
  .nav__inner { gap: var(--s3); }
}

@media (max-width: 1080px) {
  :root { --s8: 72px; --nav-h: 72px; }
  .hero__h1 { font-size: 48px; }
  .h2 { font-size: 32px; }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .grid--2 { grid-template-columns: 1fr; }
  .timeline__steps { grid-template-columns: repeat(2, 1fr); }
  .timeline__line { display: none; }
  .footer__grid { grid-template-columns: repeat(2, 1fr); row-gap: var(--s5); }
}

@media (max-width: 900px) {
  .nav__links, .nav__phone { display: none; }
  .nav__burger { display: inline-flex; }
  .nav.is-open .nav__mobile { display: flex; }
  .hero { padding-block: var(--s5) var(--s7); }
  .hero__sub { max-width: none; }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .ctacard { padding: var(--s5) var(--s3); }
}

/* Below ~560px the logo, CTA and burger stop fitting side by side. */
@media (max-width: 560px) {
  .nav__inner { gap: 10px; }
  .nav__right { gap: 8px; }
  .logo img { height: 28px; }
  .field-row { grid-template-columns: 1fr; gap: 0; }
}

@media (max-width: 640px) {
  :root { --s8: 60px; --gutter: 24px; }
  .logo img { height: 32px; }
  /* matches .hero--split .hero__h1 up in the hero block - a bare .hero__h1
     here is (0,1,0) and would be outranked, leaving 42px on a 360px screen */
  .hero--split .hero__h1 { font-size: 34px; }
  .hero__h1 { font-size: 36px; }
  .hero__sub { font-size: 16px; }
  .h2 { font-size: 28px; }
  .hero__stats { gap: 14px; }
  .hstat + .hstat { padding-left: 14px; }

  /* Below ~560 the three stats wrap to two rows and the divider on the first
     item of the second row reads as a stray vertical line. Nested so it lands
     after the 640 rule above, which would otherwise win on source order. */
  @media (max-width: 560px) {
    .hero__stats { gap: var(--s2) var(--s3); }
    .hstat + .hstat { padding-left: 0; border-left: 0; }
  }
  .formcard { padding: var(--s3); }
  .grid--4, .grid--3, .timeline__steps { grid-template-columns: 1fr; }
  .svc, .step { min-height: 0; }
  .footer__grid { grid-template-columns: 1fr; }
  .banner { padding: var(--s4) var(--s3); }
  .banner__h { font-size: 20px; }
  .miniform input { width: 100%; }
  .miniform .btn { width: 100%; }
  .rail { grid-auto-columns: 82%; }
  .footer__bottom { flex-direction: column; align-items: flex-start; }
}

/* Small phones (360px and under): logo, four social icons and the burger
   only fit side by side once each gives up a few pixels. After the 640
   block so its 32px logo does not win on source order. */
@media (max-width: 400px) {
  .logo img { height: 28px; }
  .nav__social { gap: 4px; }
  .nav__social .social { width: 28px; height: 28px; }
}

/* =====================================================================
   SHORT VIEWPORTS
   On a 1366x768 laptop the form's submit button fell below the fold,
   so the main CTA was never seen. These rules compact the hero (and
   only the hero) as the viewport gets shorter. Tall screens are
   untouched. Width guard keeps it off the stacked mobile layout.
   ===================================================================== */
@media (min-width: 901px) and (max-height: 900px) {
  :root { --nav-h: 70px; }

  .hero { padding-block: 34px var(--s5); }
  .hero__h1 { font-size: 48px; }
  .hero__sub { font-size: 17px; }
  .hero__stats { margin-top: var(--s3); }

  .formcard { padding: 24px; }
  .formcard__badge { padding: 5px 11px; }
  .formcard__h { margin: 22px 0 18px; font-size: 30px; }
  .formcard__sub { margin-bottom: 16px; font-size: 13px; }
  .hero__panel .lp-ticks { margin-top: var(--s2); gap: 8px; }
  .field { margin-bottom: 12px; }
  .field label { margin-bottom: 4px; font-size: 12px; }
  /* padding-block only - the select needs its right padding for the arrow */
  .field input, .field select { padding-block: 11px; }
  .btn--lg { padding-block: 13px; font-size: 15px; }
}

@media (min-width: 901px) and (max-height: 790px) {
  .hero { padding-block: 24px var(--s4); }
  .hero__h1 { font-size: 42px; margin-bottom: var(--s2); }
  .hero__sub { font-size: 16px; }
  .hero__stats { margin-top: var(--s2); }

  .formcard { padding: 20px; }
  .formcard__h { font-size: 26px; }
  .field { margin-bottom: 10px; }
  .field input, .field select { padding-block: 10px; }
  .btn--lg { padding-block: 12px; }
}

@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; translate: none; }
}

/* =====================================================================
   VIDEO TESTIMONIAL LIGHTBOX
   ===================================================================== */
.vmodal {
  position: fixed; inset: 0; z-index: 90;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.vmodal[hidden] { display: none; }
.vmodal__scrim {
  position: absolute; inset: 0;
  background: rgba(15, 23, 42, .74);
  backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
  animation: vFade .25s ease;
}
@keyframes vFade { from { opacity: 0; } to { opacity: 1; } }
.vmodal__box {
  position: relative; max-width: 100%;
  animation: vPop .3s cubic-bezier(.2, .9, .3, 1.1);
}
@keyframes vPop { from { opacity: 0; transform: translateY(16px) scale(.97); } to { opacity: 1; transform: none; } }

.vmodal__frame {
  position: relative;
  height: min(76vh, 660px); aspect-ratio: 9 / 16;
  max-width: calc(100vw - 48px);
  border-radius: var(--r-lg); overflow: hidden;
  background: #000;
  box-shadow: 0 24px 64px rgba(15, 23, 42, .45);
}
.vmodal__frame iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%; border: 0;
}

/* Landscape variant for the reporting screenshots. Sits right after the
   base rule so it wins on order; capped at the native 1536px so a dense
   dashboard is never upscaled into mush. */
.vmodal__frame--wide {
  width: auto; height: auto; aspect-ratio: auto;
  max-width: min(1536px, 97vw); max-height: 94vh;
  background: var(--white);
}
.vmodal__frame--wide img {
  display: block; width: auto; height: auto;
  max-width: min(1536px, 97vw); max-height: 94vh;
}
.vmodal__x {
  position: fixed; top: 16px; right: 16px; z-index: 3;
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .92); color: var(--ink);
  transition: background .16s ease, transform .16s ease;
}
.vmodal__x:hover { background: #fff; transform: scale(1.06); }
.vmodal__offline {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 28px; text-align: center; color: #fff;
}
.vmodal__offline svg { color: var(--accent); }
.vmodal__offline-h { font-family: var(--display); font-weight: 700; font-size: 19px; }
.vmodal__offline-p { font-size: 13px; line-height: 1.55; color: rgba(255, 255, 255, .78); }
.vmodal__offline-p b { color: #fff; font-weight: 600; }
.vmodal__offline .btn { margin-top: 6px; }

.vmodal__name {
  margin-top: 14px; text-align: center;
  color: #fff; font-weight: 600; font-size: 15px;
}
.vmodal .vmodal__frame--wide + .vmodal__name {
  position: absolute; left: 0; right: 0; bottom: 0; margin: 0;
  padding: 56px 16px 16px;
  background: linear-gradient(rgba(15, 23, 42, 0), rgba(15, 23, 42, .55) 45%, rgba(15, 23, 42, .92));
  text-shadow: 0 1px 3px rgba(15, 23, 42, .6);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  pointer-events: none;
}

/* the card thumbnail is now a button-like control */
.vthumb { cursor: pointer; }

@media (max-width: 560px) {
  .vmodal { padding: 10px; }
  .vmodal__frame { height: min(72vh, 560px); }
  .vmodal__x { top: 10px; right: 10px; }
  .vmodal .vmodal__frame--wide { max-width: 98vw; max-height: 90vh; }
  .vmodal .vmodal__frame--wide img { max-width: 98vw; max-height: 90vh; }
}

/* =====================================================================
   THANK-YOU PAGE
   ===================================================================== */
.ty { display: flex; align-items: center; min-height: calc(100vh - 72px); }
.ty__card {
  background: var(--white); border: 1px solid var(--hairline);
  border-top: 4px solid var(--accent);
  border-radius: var(--r-lg); padding: var(--s6);
  box-shadow: var(--shadow); text-align: center;
}
.ty__tick {
  display: inline-flex; align-items: center; justify-content: center;
  width: 62px; height: 62px; border-radius: 50%;
  background: var(--accent); color: var(--on-accent); margin-bottom: var(--s3);
}
.ty__h1 { font-size: 34px; line-height: 1.2; }
.ty__sub { margin-top: var(--s2); font-size: 17px; color: var(--muted); }
.ty__steps {
  max-width: 460px; margin-inline: auto; text-align: left;
  margin-top: var(--s4);
}
.ty__faster { margin-top: var(--s5); font-size: 15px; font-weight: 500; }
.ty__cta { display: flex; justify-content: center; gap: 12px; margin-top: var(--s2); flex-wrap: wrap; }
.ty__cta .btn--light { border: 1.5px solid var(--ink); }
.ty__alt { margin-top: var(--s4); font-size: 14px; color: var(--muted); }
.ty__back { margin-top: var(--s2); font-size: 14px; }
.ty__back a, .ty__alt a { color: var(--accent-dark); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 640px) {
  .ty__card { padding: var(--s4) var(--s3); }
  .ty__h1 { font-size: 26px; }
  .ty__sub { font-size: 16px; }
  .ty__cta .btn { width: 100%; }
}

/* =====================================================================
   FLOATING CALL + WHATSAPP
   Above the nav (60) so they never tuck under it, below the dialogs.
   WhatsApp uses the same teal as the audit page's WhatsApp buttons -
   the brighter #25D366 is too faint behind a white glyph.
   ===================================================================== */
.fab {
  position: fixed; right: 20px; bottom: 20px; z-index: 70;
  display: flex; flex-direction: column; gap: 12px;
}
.fab__btn {
  display: flex; align-items: center; justify-content: center;
  width: 54px; height: 54px; border-radius: 50%;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .22);
  transition: transform .18s ease, box-shadow .18s ease;
}
.fab__btn:hover { transform: scale(1.08); box-shadow: 0 12px 28px rgba(15, 23, 42, .28); }
.fab__btn--call { background: var(--accent); color: var(--on-accent); }
.fab__btn--wa   { background: #128C7E; color: #fff; }

@media (max-width: 640px) {
  .fab { right: 14px; bottom: 14px; gap: 10px; }
  .fab__btn { width: 50px; height: 50px; }
}

/* =====================================================================
   AUDIT POPUP
   The box is a .formcard, so it inherits the hero form's look; this only
   adds the overlay, the size cap and the close button.
   ===================================================================== */
.popup {
  position: fixed; inset: 0; z-index: 85;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.popup[hidden] { display: none; }
.popup__scrim {
  position: absolute; inset: 0;
  background: rgba(15, 23, 42, .62);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  animation: vFade .25s ease;
}
.popup__box {
  width: 100%; max-width: 440px;
  max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px);
  overflow-y: auto;
  animation: vPop .3s cubic-bezier(.2, .9, .3, 1.1);
}
.popup__box:focus { outline: none; }
.popup__x {
  position: absolute; top: 14px; right: 14px;
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--alt); color: var(--ink);
  transition: background .16s ease;
}
.popup__x:hover { background: var(--accent-tint); }
.popup .formcard__h { padding-right: 36px; }