/* ============================================================
   Volcan Property Buyers — Paid Ads Landing Pages
   Shared design system  ·  Phase 4
   Prepared by Soohrab

   BRAND SOURCE OF TRUTH — pulled from the live site, not guessed:
     fonts   : Cormorant Garamond + Lora + Open Sans
               (all three are already loaded sitewide)
     colours : elementor/css/global.css
               #0F3D3E / #113D48 teal · #C86A2D / #C05C1F orange
               #F8EDE3 / #FAF6F0 cream · #E4D9CC border

   CONVENTION: every rule is a single .v-* class, so nothing leaks
   when this is pasted into WordPress alongside Hello Elementor.
   Section padding lives ONLY on .v-section*; colour modifiers
   never touch padding, so specificities never cancel out.
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root{
  /* Teal family */
  --ink:        #08211F;   /* page ground, darkest */
  --teal:       #0F3D3E;   /* site teal */
  --teal-blue:  #113D48;   /* site blue-teal */
  --teal-lift:  #16504F;   /* raised surfaces on dark */

  /* Accent — ACTIONS ONLY.
     Four shades because one orange cannot be accessible everywhere.
     The site's #C86A2D only reaches 3.78:1 against white, which fails
     WCAG AA for button labels, so white-on-orange uses a darker step
     and orange-as-text uses a shade tuned to its own background. */
  --orange:     #C86A2D;   /* brand accent — on DARK only, never behind white text */
  --orange-dk:  #C05C1F;   /* site's darker orange — borders, rules */
  --orange-fill:#BA5719;   /* white text on this = 4.70:1  ✓ AA  (buttons, tags) */
  --orange-ink: #AE5115;   /* orange text on cream = 4.89:1 ✓ AA  (links on light) */
  --orange-hi:  #DD7E38;   /* orange text on ink   = 5.70:1 ✓ AA  (links on dark) */
  /* Hover states must never REDUCE contrast. Buttons darken, links on
     dark brighten, links on light darken. */
  --orange-fill-h:#A64D14; /* white on this = 5.69:1 ✓ (button hover) */
  --orange-hi-h: #EE9455;  /* on ink        = 7.22:1 ✓ (link hover, dark) */
  --orange-ink-h:#8E400F;  /* on cream      = 6.75:1 ✓ (link hover, light) */

  /* Paper */
  --cream:      #FAF6F0;
  --cream-warm: #F8EDE3;
  --paper:      #FFFFFF;
  --line:       #E4D9CC;

  /* Text */
  --sand:       #B9CBC6;   /* secondary on dark */
  --sand-dim:   #8CA5A0;
  --body:       #3A4B49;   /* secondary on light */
  --body-dim:   #5A6C69;   /* on cream = 5.16:1 ✓ AA */
  --rule-dark:  rgba(250,246,240,.15);

  /* Type — matches the live site */
  --display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --accent:  "Lora", Georgia, "Times New Roman", serif;
  --text:    "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Scale. Cormorant has a small x-height, so display sizes run
     larger than a sans equivalent would. */
  --t-xs:  .8125rem;
  --t-sm:  .9375rem;
  --t-b:   1.0625rem;
  --t-md:  clamp(1.1rem,  .95rem + .5vw,  1.25rem);
  --t-lg:  clamp(1.35rem, 1.1rem + 1vw,   1.7rem);
  --t-xl:  clamp(1.8rem,  1.4rem + 1.9vw, 2.5rem);
  --t-2xl: clamp(2.3rem,  1.7rem + 2.9vw, 3.4rem);
  --t-3xl: clamp(2.5rem,  1.85rem + 3.1vw, 3.7rem);

  --gut: clamp(1.15rem, .6rem + 2.4vw, 2.5rem);
  --max: 1200px;
  --pad-y: clamp(2.8rem, 1.9rem + 3.4vw, 4.6rem);

  --r-s: 6px;
  --r-m: 12px;
  --r-l: 18px;

  --shadow-lift: 0 26px 64px -30px rgba(0,0,0,.62);
}

/* ---------- 2. Base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body.v-body{
  margin:0;
  background:var(--ink);
  color:var(--cream);
  font-family:var(--text);
  font-size:var(--t-b);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}

.v-wrap{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--gut); }
.v-narrow{ max-width:800px; }

.v-section{ padding-block:var(--pad-y); }
.v-section-tight{ padding-block:clamp(2.1rem,1.4rem + 2.4vw,3.2rem); }
.v-section-hero{ padding-block:clamp(2rem,1.3rem + 2.2vw,3.1rem) clamp(2.4rem,1.6rem + 2.8vw,3.8rem); }

/* Colour modifiers — colour only */
.v-on-ink{   background:var(--ink);        color:var(--cream); }
.v-on-teal{  background:var(--teal);       color:var(--cream); }
.v-on-cream{ background:var(--cream);      color:var(--ink); }
.v-on-warm{  background:var(--cream-warm); color:var(--ink); }
.v-on-paper{ background:var(--paper);      color:var(--ink); }

/* ---------- 3. Type ---------- */
.v-h1{
  font-family:var(--display);
  font-size:var(--t-3xl);
  font-weight:700;
  line-height:1.02;
  letter-spacing:-.012em;
  margin:0 0 1.05rem;
  text-wrap:balance;
}
.v-h2{
  font-family:var(--display);
  font-size:var(--t-2xl);
  font-weight:700;
  line-height:1.06;
  letter-spacing:-.01em;
  margin:0 0 .9rem;
  text-wrap:balance;
}
.v-h3{
  font-family:var(--accent);
  font-size:var(--t-lg);
  font-weight:600;
  line-height:1.24;
  letter-spacing:-.005em;
  margin:0 0 .5rem;
}
.v-h4{
  font-family:var(--accent);
  font-size:var(--t-md);
  font-weight:600;
  line-height:1.32;
  margin:0 0 .35rem;
}

/* Eyebrow — sentence case, never tracked-out caps */
.v-eyebrow{
  font-family:var(--accent);
  font-size:var(--t-sm);
  font-style:italic;
  color:var(--orange-hi);
  margin:0 0 .55rem;
}
.v-on-cream .v-eyebrow,.v-on-warm .v-eyebrow,.v-on-paper .v-eyebrow{ color:var(--orange-ink); }

.v-lede{
  font-size:var(--t-md);
  line-height:1.62;
  max-width:58ch;
  margin:0 0 1.4rem;
  color:var(--sand);
}
.v-on-cream .v-lede,.v-on-warm .v-lede,.v-on-paper .v-lede{ color:var(--body); }

.v-p{ margin:0 0 1rem; max-width:66ch; }
.v-p-dim{ color:var(--sand); }
.v-on-cream .v-p-dim,.v-on-warm .v-p-dim,.v-on-paper .v-p-dim{ color:var(--body); }
.v-small{ font-size:var(--t-sm); line-height:1.6; }
.v-fine{ font-size:var(--t-xs); line-height:1.55; color:var(--sand-dim); }
.v-on-cream .v-fine,.v-on-warm .v-fine,.v-on-paper .v-fine{ color:var(--body-dim); }
.v-num{ font-variant-numeric:tabular-nums; }

/* ---------- 4. Actions (orange = clickable, never decorative) ---------- */
.v-btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:.5rem;
  font-family:var(--text);
  font-size:1rem;
  font-weight:700;
  line-height:1;
  padding:1.05rem 1.6rem;
  border-radius:var(--r-s);
  border:1.5px solid transparent;
  text-decoration:none;
  cursor:pointer;
  text-align:center;
  transition:background-color .16s ease, border-color .16s ease, color .16s ease, transform .12s ease;
}
.v-btn:active{ transform:translateY(1px); }
.v-btn-primary{ background:var(--orange-fill); color:#fff; border-color:var(--orange-fill); }
.v-btn-primary:hover{ background:var(--orange-fill-h); border-color:var(--orange-fill-h); }
.v-btn-ghost{ background:transparent; color:var(--cream); border-color:rgba(250,246,240,.38); }
.v-btn-ghost:hover{ border-color:var(--cream); background:rgba(250,246,240,.08); }
.v-btn-dark{ background:var(--teal); color:var(--cream); border-color:var(--teal); }
.v-btn-dark:hover{ background:var(--teal-lift); border-color:var(--teal-lift); }
.v-btn-full{ width:100%; }
.v-btn-lg{ padding:1.18rem 1.9rem; font-size:1.0625rem; }

.v-actions{ display:flex; flex-wrap:wrap; gap:.7rem; align-items:center; }

.v-link{ color:var(--orange-hi); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1.5px; }
.v-link:hover{ color:var(--orange-hi-h); }
.v-on-cream .v-link:hover,.v-on-warm .v-link:hover,.v-on-paper .v-link:hover{ color:var(--orange-ink-h); }
.v-on-cream .v-link,.v-on-warm .v-link,.v-on-paper .v-link{ color:var(--orange-ink); }

.v-body a:focus-visible,
.v-body button:focus-visible,
.v-body input:focus-visible,
.v-body select:focus-visible,
.v-body textarea:focus-visible,
.v-body summary:focus-visible{
  outline:3px solid var(--orange-hi);
  outline-offset:2px;
  border-radius:3px;
}

.v-skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--orange-fill); color:#fff; padding:.8rem 1.2rem;
  font-weight:700; border-radius:0 0 var(--r-s) 0;
}
.v-skip:focus{ left:0; }

/* ---------- 5. Top bar ---------- */
.v-topbar{ background:var(--ink); border-bottom:1px solid var(--rule-dark); position:relative; z-index:20; }
.v-topbar-in{ display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:70px; padding-block:.7rem; }
.v-logo{ display:flex; align-items:center; gap:.7rem; text-decoration:none; }
.v-logo img{ height:38px; width:auto; display:block; filter:brightness(0) invert(1); }
.v-topbar-right{ display:flex; align-items:center; gap:1rem; text-align:right; }
.v-topbar-tel{
  font-family:var(--text); font-weight:700; font-size:1.125rem;
  color:var(--cream); text-decoration:none; white-space:nowrap;
  font-variant-numeric:tabular-nums; line-height:1.2;
}
.v-topbar-tel:hover{ color:#fff; }
.v-topbar-note{ display:block; font-size:var(--t-xs); color:var(--sand-dim); font-weight:400; }
@media (max-width:640px){ .v-topbar-note{ display:none; } .v-logo img{ height:32px; } }

/* Live indicator — real information: they do answer 24/7 */
.v-live{ display:inline-flex; align-items:center; gap:.5rem; font-size:var(--t-sm); color:var(--sand); margin:0 0 1rem; }
.v-live-dot{ width:8px; height:8px; border-radius:50%; background:#5FD08A; flex:none; box-shadow:0 0 0 4px rgba(95,208,138,.18); }

/* ---------- 6. Hero ---------- */
.v-hero{ position:relative; overflow:hidden; background:var(--ink); }
/* Photograph sits behind a heavy teal wash: keeps AA contrast on the
   headline while still showing a real Houston house. */
.v-hero-bg{
  position:absolute; inset:0; z-index:0;
  background-size:cover; background-position:center 58%;
  opacity:.62;
}
/* Wash is heavy on the left where the headline sits (AA contrast) and
   thins out to the right so the house is actually legible behind the
   form card / photo stack. */
.v-hero-veil{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(100deg,
      var(--ink) 0%,
      rgba(8,33,31,.95) 34%,
      rgba(8,33,31,.66) 62%,
      rgba(8,33,31,.42) 100%),
    linear-gradient(to bottom, rgba(8,33,31,.2), rgba(8,33,31,.62));
}
/* A hero already carrying its own photography does not get a second
   photo behind it — they compete and the edges go muddy. */
.v-hero-quiet .v-hero-bg{ display:none; }

/* MOBILE: the background photo is dropped entirely, on purpose.
   Once the hero stacks to one column the headline sits ON the photo, so
   the wash has to be heavy enough that the photo is barely visible — you
   pay the full download for almost no visual gain, and it becomes the LCP
   element on the slowest connections. Most of this traffic is phones. */
@media (max-width:980px){
  .v-hero-bg{ display:none; }
  .v-hero-veil{ background:linear-gradient(to bottom, rgba(8,33,31,.55), rgba(8,33,31,.9)); }
}
.v-hero-in{ position:relative; z-index:2; }

.v-hero-split{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:clamp(1.75rem,1rem + 3.4vw,3.4rem);
  align-items:center;
}
@media (max-width:980px){ .v-hero-split{ grid-template-columns:1fr; align-items:start; } }

/* Stacked photo pair — fills the Meta hero and shows the product at once */
.v-hero-stack{ position:relative; padding-bottom:2.6rem; padding-right:2.2rem; }
.v-hero-shot{
  border-radius:var(--r-l); overflow:hidden; display:block;
  border:1px solid rgba(250,246,240,.18);
  box-shadow:var(--shadow-lift);
  background:var(--teal-lift);
}
.v-hero-shot img{ width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; display:block; }
.v-hero-shot-sm{
  position:absolute; right:0; bottom:0; width:47%;
  border-radius:var(--r-m); overflow:hidden;
  border:3px solid var(--ink);
  box-shadow:var(--shadow-lift);
}
.v-hero-shot-sm img{ width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; display:block; }
.v-hero-tag{
  position:absolute; left:0; bottom:.55rem;
  background:var(--orange-fill); color:#fff;
  font-family:var(--text); font-weight:700; font-size:var(--t-sm);
  padding:.5rem .85rem; border-radius:var(--r-s);
  box-shadow:0 10px 26px -12px rgba(0,0,0,.7);
  font-variant-numeric:tabular-nums;
}
@media (max-width:980px){
  .v-hero-stack{ padding-bottom:2.2rem; padding-right:1.8rem; max-width:560px; }
}

/* ---------- 7. Stat band ---------- */
.v-stats{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:1px; background:var(--rule-dark);
  border-block:1px solid var(--rule-dark);
}
.v-on-cream .v-stats,.v-on-warm .v-stats,.v-on-paper .v-stats{ background:var(--line); border-color:var(--line); }
@media (max-width:760px){ .v-stats{ grid-template-columns:repeat(2,1fr); } }
.v-stat{ background:var(--ink); padding:1.25rem 1.1rem; text-align:left; }
.v-on-cream .v-stat{ background:var(--cream); }
.v-on-warm .v-stat{ background:var(--cream-warm); }
.v-on-paper .v-stat{ background:var(--paper); }
.v-on-teal .v-stat{ background:var(--teal); }
.v-stat-n{
  font-family:var(--display); font-weight:700; font-size:clamp(1.9rem,1.4rem + 1.6vw,2.6rem);
  line-height:1; color:var(--paper); display:block; margin-bottom:.25rem;
  font-variant-numeric:proportional-nums; letter-spacing:-.01em;
}
.v-on-cream .v-stat-n,.v-on-warm .v-stat-n,.v-on-paper .v-stat-n{ color:var(--teal); }
.v-stat-l{ font-size:var(--t-xs); color:var(--sand-dim); line-height:1.4; display:block; }
.v-on-cream .v-stat-l,.v-on-warm .v-stat-l,.v-on-paper .v-stat-l{ color:var(--body-dim); }

/* Inline chips (compact proof inside a hero) */
.v-chips{ display:flex; flex-wrap:wrap; gap:.5rem; margin:0 0 1.5rem; padding:0; list-style:none; }
.v-chip{
  display:flex; align-items:baseline; gap:.45rem;
  border:1px solid var(--rule-dark); border-radius:var(--r-s);
  padding:.55rem .8rem; background:rgba(250,246,240,.05);
}
.v-chip-n{ font-family:var(--display); font-weight:700; font-size:1.2rem; line-height:1; color:var(--paper); font-variant-numeric:tabular-nums; }
.v-chip-l{ font-size:var(--t-xs); color:var(--sand-dim); line-height:1.3; }
.v-on-cream .v-chip,.v-on-warm .v-chip{ border-color:var(--line); background:rgba(15,61,62,.04); }
.v-on-cream .v-chip-n,.v-on-warm .v-chip-n{ color:var(--teal); }
.v-on-cream .v-chip-l,.v-on-warm .v-chip-l{ color:var(--body-dim); }
@media (max-width:560px){ .v-chip{ width:100%; } }

/* Trust row — plain factual badges, no invented accreditations */
.v-trust{ display:flex; flex-wrap:wrap; gap:.5rem 1.4rem; margin:0; padding:0; list-style:none; }
.v-trust li{ display:flex; align-items:center; gap:.5rem; font-size:var(--t-sm); color:var(--sand); }
.v-on-cream .v-trust li,.v-on-warm .v-trust li,.v-on-paper .v-trust li{ color:var(--body); }
.v-trust-mk{ color:var(--orange-hi); font-weight:700; flex:none; }
.v-on-cream .v-trust-mk,.v-on-warm .v-trust-mk,.v-on-paper .v-trust-mk{ color:var(--orange-ink); }

/* ---------- 8. Form ---------- */
.v-form-card{
  background:var(--cream);
  color:var(--ink);
  border-radius:var(--r-l);
  padding:clamp(1.35rem,1rem + 1.5vw,1.9rem);
  border:1px solid var(--line);
  box-shadow:var(--shadow-lift);
}
.v-form-flag{
  display:inline-block; background:var(--teal); color:var(--cream);
  font-size:var(--t-xs); font-weight:700; padding:.3rem .6rem;
  border-radius:var(--r-s); margin-bottom:.7rem;
}
.v-form-head{ margin-bottom:1rem; }
.v-form-title{
  font-family:var(--display); font-weight:700; font-size:clamp(1.65rem,1.3rem + 1.1vw,2.1rem);
  line-height:1.1; margin:0 0 .25rem; color:var(--teal); letter-spacing:-.01em;
}
.v-form-sub{ font-size:var(--t-sm); color:var(--body); margin:0; }

.v-field{ margin-bottom:.8rem; }
.v-label{ display:block; font-size:var(--t-sm); font-weight:600; color:var(--ink); margin-bottom:.3rem; }
.v-req{ color:var(--orange-ink); }
.v-input,.v-select,.v-textarea{
  width:100%;
  font-family:var(--text);
  font-size:1.0625rem;
  line-height:1.4;
  color:var(--ink);
  background:var(--paper);
  border:1.5px solid var(--line);
  border-radius:var(--r-s);
  padding:.8rem .9rem;
  transition:border-color .14s ease, box-shadow .14s ease;
  -webkit-appearance:none; appearance:none;
}
.v-select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%233A4B49' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .9rem center; padding-right:2.4rem;
}
.v-textarea{ min-height:84px; resize:vertical; }
.v-input:hover,.v-select:hover,.v-textarea:hover{ border-color:#CDBFAC; }
.v-input:focus,.v-select:focus,.v-textarea:focus{
  border-color:var(--teal); box-shadow:0 0 0 3px rgba(15,61,62,.16); outline:none;
}
.v-input[aria-invalid="true"],.v-select[aria-invalid="true"]{
  border-color:#B5382B; box-shadow:0 0 0 3px rgba(181,56,43,.13);
}
.v-err{ display:none; font-size:var(--t-xs); color:#9B2A1E; margin-top:.26rem; font-weight:600; }
.v-err.is-on{ display:block; }

.v-row2{ display:grid; grid-template-columns:1fr 1fr; gap:.8rem; }
@media (max-width:440px){ .v-row2{ grid-template-columns:1fr; gap:0; } }

/* TCPA consent — required, never pre-ticked */
.v-consent{
  display:flex; gap:.7rem; align-items:flex-start;
  background:rgba(15,61,62,.06); border:1px solid var(--line);
  border-radius:var(--r-s); padding:.75rem .8rem; margin:.9rem 0 .8rem;
}
.v-consent input[type="checkbox"]{ width:20px; height:20px; flex:none; margin:.15rem 0 0; accent-color:var(--teal); cursor:pointer; }
.v-consent-t{ font-size:var(--t-xs); line-height:1.5; color:var(--body); }
.v-consent-t a{ color:var(--teal); text-decoration:underline; text-underline-offset:2px; }

.v-form-foot{ margin-top:.8rem; }

.v-sent{ display:none; }
.v-sent.is-on{ display:block; }
.v-sent-mark{
  width:54px; height:54px; border-radius:50%; background:var(--teal); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:1.7rem; margin-bottom:.9rem;
}
.is-hidden{ display:none !important; }

/* ---------- 9. Evidence index — the signature element ---------- */
.v-ev-head{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:.8rem 1.5rem; margin-bottom:1.4rem; }
.v-ev-grid{
  /* 8 items. 4 cols = 2 clean rows, 2 cols = 4 clean rows, 1 col = 8.
     Deliberately skips 3 cols, which would leave an orphaned cell. */
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:1px; background:var(--line); border:1px solid var(--line);
  border-radius:var(--r-m); overflow:hidden;
}
@media (max-width:1000px){ .v-ev-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){  .v-ev-grid{ grid-template-columns:1fr; } }
.v-ev{ background:var(--paper); display:flex; flex-direction:column; text-decoration:none; color:inherit; transition:background-color .16s ease; }
.v-ev:hover{ background:var(--cream-warm); }
.v-ev-img{
  aspect-ratio:4/3; width:100%; object-fit:cover; display:block; background:var(--line);
  /* height:auto is load-bearing. The markup carries width/height for CLS;
     without it that presentational attribute wins, aspect-ratio is ignored
     (it only applies when one dimension is auto) and the flex column
     squeezes the photo into a tall box that object-fit crops to sky. */
  height:auto; flex:none;
}
.v-ev-body{ padding:.85rem .95rem 1rem; display:flex; flex-direction:column; gap:.28rem; flex:1; }
.v-ev-st{ font-family:var(--accent); font-weight:600; font-size:1.0625rem; line-height:1.24; color:var(--teal); margin:0; }
.v-ev-loc{ font-size:var(--t-xs); color:var(--body-dim); margin:0; }
.v-ev-sit{ font-size:var(--t-sm); color:var(--body); margin:.1rem 0 0; }
.v-ev-days{
  margin-top:auto; padding-top:.65rem; display:flex; align-items:baseline; gap:.32rem;
  font-family:var(--text); font-weight:700; font-size:var(--t-sm);
  color:var(--orange-ink);
}
/* NO tabular-nums here. Cormorant tabular figures are extremely wide and
   rendered 13 as 1 3. These sit in separate cards so there is no column to
   align anyway — proportional figures set correctly. */
.v-ev-days b{
  font-family:var(--display); font-size:1.5rem; font-weight:700; line-height:1;
  font-variant-numeric:proportional-nums;
}

/* Horizontal rail — used on the Google page for a fast scan */
.v-ev-rail{
  display:grid; grid-auto-flow:column; grid-auto-columns:minmax(212px,1fr);
  gap:1px; background:var(--line); border:1px solid var(--line);
  border-radius:var(--r-m); overflow-x:auto;
  overscroll-behavior-x:contain; scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;
}
.v-ev-rail .v-ev{ scroll-snap-align:start; }
@media (max-width:900px){ .v-ev-rail{ grid-auto-columns:minmax(186px,74vw); } }

/* ---------- 10. Steps (a genuine sequence, so numbers earn their place) ---------- */
.v-steps{ display:grid; gap:0; margin:0; padding:0; list-style:none; counter-reset:vstep; }
.v-step{
  counter-increment:vstep; display:grid; grid-template-columns:auto 1fr;
  gap:1.1rem; padding:1.3rem 0; border-top:1px solid var(--line);
}
.v-step:last-child{ border-bottom:1px solid var(--line); }
.v-on-ink .v-step,.v-on-teal .v-step{ border-color:var(--rule-dark); }
.v-step::before{
  content:counter(vstep);
  font-family:var(--display); font-weight:700; font-size:1.2rem;
  width:38px; height:38px; border-radius:50%;
  background:var(--teal); color:var(--cream);
  display:flex; align-items:center; justify-content:center; line-height:1; margin-top:.1rem;
}
.v-on-ink .v-step::before,.v-on-teal .v-step::before{ background:var(--orange-fill); color:#fff; }
.v-step-b p{ margin:.15rem 0 0; max-width:62ch; }

/* ---------- 11. Ledger ---------- */
.v-ledger{ display:grid; grid-template-columns:1fr 1fr; border:1px solid var(--line); border-radius:var(--r-m); overflow:hidden; }
@media (max-width:720px){ .v-ledger{ grid-template-columns:1fr; } }
.v-ledger-col{ padding:1.5rem 1.4rem 1.7rem; }
.v-ledger-col + .v-ledger-col{ border-left:1px solid var(--line); }
@media (max-width:720px){ .v-ledger-col + .v-ledger-col{ border-left:0; border-top:1px solid var(--line); } }
.v-ledger-a{ background:var(--teal); color:var(--cream); }
.v-ledger-b{ background:var(--paper); color:var(--ink); }
.v-ledger-h{ font-family:var(--display); font-weight:700; font-size:var(--t-lg); margin:0 0 .9rem; letter-spacing:-.01em; }
.v-ledger-list{ list-style:none; margin:0; padding:0; display:grid; gap:.6rem; }
.v-ledger-list li{ display:grid; grid-template-columns:auto 1fr; gap:.65rem; align-items:baseline; font-size:var(--t-sm); line-height:1.55; }
.v-tick{ color:#8BD9AC; font-weight:700; }
.v-cross{ color:#C2604C; font-weight:700; }

/* ---------- 12. Situation cards ---------- */
/* Explicit column counts, never auto-fit. auto-fit picks whatever fits,
   which orphans cells whenever the item count does not divide evenly —
   6 situation cards landed as 4 + 2 empty beige cells. Each grid below
   is set to counts that always divide its own item count. */
.v-sit-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-m); overflow:hidden; }   /* 6 items = 2 rows */
@media (max-width:940px){ .v-sit-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .v-sit-grid{ grid-template-columns:1fr; } }
.v-sit{ background:var(--paper); padding:1.35rem 1.35rem 1.5rem; }
.v-sit-h{ font-family:var(--accent); font-weight:600; font-size:var(--t-md); margin:0 0 .4rem; color:var(--teal); }
.v-sit-p{ margin:0; font-size:var(--t-sm); color:var(--body); line-height:1.6; }

/* ---------- 13. Team ---------- */
.v-team{ display:grid; grid-template-columns:repeat(6,1fr); gap:1.4rem 1.1rem; }   /* 6 items = 1 row */
@media (max-width:1000px){ .v-team{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:560px){  .v-team{ grid-template-columns:repeat(2,1fr); } }
.v-team-img{
  width:100%; height:auto; aspect-ratio:1/1;   /* see .v-ev-img note */
  object-fit:cover; object-position:center top;
  border-radius:var(--r-m); display:block; margin-bottom:.6rem; background:var(--teal-lift);
}
.v-team-n{ font-family:var(--accent); font-weight:600; font-size:1rem; line-height:1.25; margin:0 0 .1rem; }
.v-team-r{ font-size:var(--t-xs); color:var(--sand); margin:0; }
.v-on-cream .v-team-r,.v-on-warm .v-team-r,.v-on-paper .v-team-r{ color:var(--body-dim); }

/* ---------- 14. Quotes ---------- */
.v-quotes{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-m); overflow:hidden; }
@media (max-width:900px){ .v-quotes{ grid-template-columns:1fr; } }
.v-quote{ display:flex; flex-direction:column; gap:.9rem; background:var(--paper); padding:1.5rem 1.4rem; margin:0; }
.v-quote-t{ font-family:var(--accent); font-size:1.0625rem; line-height:1.62; margin:0; color:var(--ink); }
.v-quote-w{ display:flex; align-items:center; gap:.65rem; margin-top:auto; }
.v-quote-av{ width:44px; height:44px; border-radius:50%; object-fit:cover; flex:none; background:var(--line); }
.v-quote-n{ font-weight:700; font-size:var(--t-sm); margin:0; line-height:1.25; color:var(--teal); display:block; }
.v-quote-c{ font-size:var(--t-xs); color:var(--body-dim); margin:0; display:block; }

/* ---------- 15. FAQ ---------- */
.v-faq{ border-top:1px solid var(--line); }
.v-on-ink .v-faq,.v-on-teal .v-faq{ border-color:var(--rule-dark); }
.v-faq-i{ border-bottom:1px solid var(--line); }
.v-on-ink .v-faq-i,.v-on-teal .v-faq-i{ border-color:var(--rule-dark); }
.v-faq-q{
  cursor:pointer; list-style:none;
  display:flex; align-items:flex-start; justify-content:space-between; gap:1rem;
  padding:1.1rem 0;
  font-family:var(--accent); font-weight:600; font-size:var(--t-md); line-height:1.35;
}
.v-faq-q::-webkit-details-marker{ display:none; }
.v-faq-q::after{
  content:'+'; font-family:var(--text); font-weight:700; font-size:1.4rem; line-height:1;
  color:var(--orange-ink); flex:none; margin-top:.15rem; transition:transform .18s ease;
}
.v-on-ink .v-faq-q::after,.v-on-teal .v-faq-q::after{ color:var(--orange-hi); }
.v-faq-i[open] .v-faq-q::after{ transform:rotate(45deg); }
.v-faq-a{ padding:0 0 1.15rem; max-width:68ch; }
.v-faq-a p{ margin:0; font-size:var(--t-sm); line-height:1.65; }

/* ---------- 16. Footer ---------- */
.v-foot{ background:var(--ink); color:var(--sand); border-top:1px solid var(--rule-dark); }
.v-foot-in{ padding-block:clamp(2.2rem,1.5rem + 2.4vw,3.2rem); }
/* Three columns. Two left a large void on the right at desktop. */
.v-foot-top{ display:grid; grid-template-columns:1.15fr .95fr .9fr; gap:2rem 2.4rem; padding-bottom:1.7rem; border-bottom:1px solid var(--rule-dark); }
@media (max-width:900px){ .v-foot-top{ grid-template-columns:1fr 1fr; gap:1.8rem; } }
@media (max-width:600px){ .v-foot-top{ grid-template-columns:1fr; gap:1.6rem; } }
.v-foot-areas{ margin:0; padding:0; list-style:none; font-size:var(--t-sm); line-height:1.75; column-count:2; column-gap:1.4rem; }
@media (max-width:600px){ .v-foot-areas{ column-count:2; } }
.v-foot-links-col{ display:grid; gap:.45rem; margin:0; padding:0; list-style:none; font-size:var(--t-sm); }
.v-foot-h{ font-family:var(--accent); font-weight:600; font-size:var(--t-md); color:var(--cream); margin:0 0 .6rem; }
.v-foot-p{ margin:0 0 .3rem; font-size:var(--t-sm); line-height:1.6; }
.v-foot a{ color:var(--sand); text-decoration:underline; text-underline-offset:2px; }
.v-foot a:hover{ color:var(--cream); }
.v-foot-links{ display:flex; flex-wrap:wrap; gap:.4rem 1.1rem; margin:.9rem 0 0; padding:0; list-style:none; font-size:var(--t-xs); }
.v-foot-legal{ padding-top:1.4rem; }
.v-foot-legal p{ font-size:var(--t-xs); color:var(--sand-dim); margin:0 0 .55rem; line-height:1.65; max-width:none; }
.v-foot-legal-cols{ display:grid; grid-template-columns:1fr 1fr; gap:.2rem 2.4rem; }
@media (max-width:820px){ .v-foot-legal-cols{ grid-template-columns:1fr; } }

/* ---------- 17. Sticky mobile bar ---------- */
.v-sticky{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  background:var(--ink); border-top:1px solid var(--rule-dark);
  padding:.6rem var(--gut) calc(.6rem + env(safe-area-inset-bottom));
  display:none; gap:.6rem; box-shadow:0 -10px 30px -12px rgba(0,0,0,.65);
}
.v-sticky .v-btn{ flex:1; padding:.95rem .8rem; font-size:.9375rem; }
@media (max-width:860px){ .v-sticky{ display:flex; } .v-body{ padding-bottom:78px; } }

/* ---------- 18. Media blocks ---------- */
.v-media{ width:100%; border-radius:var(--r-l); overflow:hidden; border:1px solid var(--rule-dark); display:block; box-shadow:var(--shadow-lift); }
.v-media img{ width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; display:block; }
.v-media-cap{
  display:block; padding:.6rem .85rem; font-size:var(--t-xs); line-height:1.45;
  background:rgba(8,33,31,.55); color:var(--sand);
}
.v-on-cream .v-media-cap,.v-on-warm .v-media-cap,.v-on-paper .v-media-cap{
  background:var(--cream-warm); color:var(--body-dim);
}
.v-on-cream .v-media,.v-on-warm .v-media,.v-on-paper .v-media{ border-color:var(--line); }

/* Band CTA */
.v-band{ display:grid; grid-template-columns:1.3fr auto; gap:1.5rem; align-items:center; }
@media (max-width:820px){ .v-band{ grid-template-columns:1fr; } }

/* ---------- 19. The single orchestrated reveal ---------- */
.v-rise{ opacity:0; transform:translateY(14px); animation:vRise .6s cubic-bezier(.2,.65,.3,1) forwards; }
.v-d1{ animation-delay:.04s; } .v-d2{ animation-delay:.13s; }
.v-d3{ animation-delay:.22s; } .v-d4{ animation-delay:.31s; } .v-d5{ animation-delay:.4s; }
@keyframes vRise{ to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ .v-rise{ opacity:1; transform:none; animation:none; } }

/* ---------- 20. Utilities ---------- */
.v-mt-l{ margin-top:1.9rem; }
.v-mt-s{ margin-top:1rem; }
.v-mb-0{ margin-bottom:0; }
.v-sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media print{ .v-sticky,.v-topbar{ display:none; } }