/* ============================================================
   CONCEPT D — "KINETIC SPECTRUM"
   The Spectrum logo is concentric rings of coloured dots.
   Here that mark is scaled up to become the hero itself: a living
   iris that slowly turns around the headline. Everything is drawn
   into ONE canvas element — no animated DOM.
   ============================================================ */
.kx-hero, .kx-hero *, .kx-hero *::before, .kx-hero *::after{box-sizing:border-box}
.kx-hero{
  --navy:#2E1F18;
  --teal:#6E5747;
  --teal-soft:#5A4A3E;
  --amber:#F2B01E;
  --parchment:#F6F1EF;
  --pale:#E1F3F9;

  --dot-orange:#F07E26;
  --dot-red:#E8412C;
  --dot-yellow:#F2B01E;
  --dot-green:#8CBF3F;
  --dot-teal:#29A3A3;
  --dot-blue:#2E6DB4;
  --dot-indigo:#3B3B8F;

  --serif:"Clearface", Georgia, "Times New Roman", serif;
  --sans:"trade-gothic-next", "Segoe UI", system-ui, -apple-system, sans-serif;
}


/* ---------- HERO SHELL ---------- */
.kx-hero{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  min-height:min(92vh, 860px);
  display:grid;
  place-items:center;
  padding:clamp(72px,10vh,132px) 20px clamp(72px,10vh,124px);
  /* Base wash: pale blue centre falling to a slightly cooler edge, so the
     canvas dots read as light-on-light rather than confetti on white. */
  background:
    radial-gradient(115% 90% at 50% 46%, #FFFFFF 0%, #F4FBFD 34%, var(--pale) 68%, #D2ECF5 100%);
}

/* The canvas holds every moving pixel. It sits behind the text and is
   purely decorative. */

/* ---------- THE CALM CORE ----------
   A soft lens of light directly under the copy. This is what guarantees
   H1 legibility: no matter which coloured dot drifts past, the centre
   stays a high-contrast, low-chroma field. Two stacked layers — a wide
   diffuse halo and a tighter, near-opaque core. */
/* Canvas fills the hero and sits beneath the copy. */
.kx-hero .kx-canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  z-index:0;
  pointer-events:none;
}
.kx-hero .kx-lens{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:min(1000px, 96%);
  height:min(640px, 88%);
  z-index:1;
  pointer-events:none;
  /* Tightened: near-opaque only over the text block itself, then falling
     away fast. A wider veil washed the cool inner rings out completely and
     left the palette reading all-orange. */
  background:
    radial-gradient(closest-side ellipse at 50% 50%,
      rgba(255,255,255,0.96) 0%,
      rgba(255,255,255,0.92) 26%,
      rgba(250,253,255,0.72) 42%,
      rgba(244,251,254,0.34) 58%,
      rgba(240,250,253,0.10) 76%,
      rgba(240,250,253,0) 100%);
}

/* ---------- CONTENT ---------- */
.kx-hero .kx-inner{
  position:relative;
  z-index:2;
  width:100%;
  max-width:880px;
  margin:0 auto;
  text-align:center;
}
.kx-hero .kx-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:11px;
  font-size:clamp(11px,1.05vw,13px);
  font-weight:600;
  letter-spacing:0.26em;
  text-transform:uppercase;
  color:var(--teal);
  margin:0 0 clamp(20px,3vh,30px);
}
/* Three dots from the mark, as a tiny signature beside the eyebrow. */
.kx-hero .kx-eyebrow::before, .kx-hero .kx-eyebrow::after{
  content:"";
  width:34px;
  height:1px;
  border-radius:0;
  background:currentColor;
  opacity:.45;
}
.kx-hero .kx-h1{
  text-transform:none;
  font-family:var(--serif);
  font-weight:400;
  /* Sentence case, not the current all-caps: at this size caps eat the
     line and hurt scan speed. Size is fluid from 360px to 1600px. */
  font-size:clamp(38px, 6.4vw, 82px);
  line-height:1.03;
  letter-spacing:-0.012em;
  color:var(--navy);
  margin:0 auto clamp(26px,3.6vh,38px);
  max-width:15ch;
  text-wrap:balance;
}
/* "brighter" carries the only colour in the headline — an amber-to-teal
   sweep that ties the copy to the ring behind it. Falls back to solid
   teal where background-clip:text is unsupported. */
.kx-hero .kx-glow{
  color:var(--teal);
  background:linear-gradient(96deg, var(--dot-orange) 0%, var(--amber) 34%, var(--dot-green) 66%, var(--dot-teal) 100%);
  -webkit-background-clip:text;
  background-clip:text;
}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
.kx-hero .kx-glow{ -webkit-text-fill-color:transparent; color:transparent; }
}
.kx-hero .kx-list{
  list-style:none;
  margin:0 auto clamp(30px,4.2vh,44px);
  padding:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:clamp(10px,1.4vh,15px);
}
.kx-hero .kx-list li{
  display:flex;
  align-items:center;
  gap:12px;
  font-size:clamp(15px,1.35vw,18px);
  line-height:1.35;
  color:var(--teal-soft);
  font-weight:400;
}
/* Each bullet gets its own logo colour — orange, green, blue, reading
   inward like the rings. */
.kx-hero .kx-list li::before{
  content:"";
  flex:0 0 auto;
  width:7px;
  height:7px;
  border-radius:50%;
  background:transparent;
  border:1.5px solid var(--teal-soft);
  opacity:.75;
}

/* ---------- CTA ---------- */
.kx-hero .kx-cta{
  display:inline-flex;
  align-items:center;
  gap:11px;
  font-family:var(--sans);
  font-size:clamp(14px,1.2vw,16px);
  font-weight:600;
  letter-spacing:0.02em;
  text-decoration:none;
  color:var(--parchment);
  background:var(--navy);
  border:0;
  padding:clamp(14px,1.7vh,18px) clamp(26px,3vw,36px);
  border-radius:999px;
  position:relative;
  overflow:hidden;
  box-shadow:0 10px 26px rgba(0,46,66,0.20), 0 2px 6px rgba(0,46,66,0.12);
  transition:transform .22s cubic-bezier(.2,.7,.3,1), box-shadow .22s ease;
}
.kx-hero .kx-cta:hover, .kx-hero .kx-cta:focus-visible{
  transform:none;
  box-shadow:0 16px 34px rgba(0,46,66,0.26), 0 3px 8px rgba(0,46,66,0.14);
}
.kx-hero .kx-cta:focus-visible{ outline:3px solid var(--amber); outline-offset:3px; }
.kx-hero .kx-cta:active{ transform:none; }

/* Elementor's `.elementor-kit-5 a:hover` reassigns font-size/weight; pin both
   so the CTA never changes size on hover. */
.kx-hero .kx-cta, .kx-hero .kx-cta:hover, .kx-hero .kx-cta:focus-visible{
  font-size:16px; font-weight:600;
}
.kx-hero .kx-arrow{ width:16px; height:16px; flex:0 0 auto; }

/* ---------- ENTRANCE ----------
   One transform+opacity settle per element, staggered. Runs once. */
@keyframes kx-rise{
from{ opacity:0; transform:translate3d(0,18px,0); }
to{ opacity:1; transform:translate3d(0,0,0); }
}
.kx-hero .kx-rise{ opacity:0; animation:kx-rise .82s cubic-bezier(.2,.75,.25,1) forwards; }
.kx-hero .kx-d1{animation-delay:.06s} .kx-d2{animation-delay:.18s}
.kx-hero .kx-d3{animation-delay:.32s} .kx-d4{animation-delay:.46s}

/* ---------- RESPONSIVE ---------- */
@media (max-width:900px){
.kx-hero{ min-height:auto; padding:clamp(56px,9vh,90px) 18px clamp(56px,9vh,88px); }
  /* The copy is nearly full-bleed on a phone, so the calm core has to cover
     more of the frame — otherwise ring dots land on the headline. */
.kx-hero .kx-lens{
    width:150%; height:86%;
    background:
      radial-gradient(closest-side ellipse at 50% 50%,
        rgba(255,255,255,0.97) 0%,
        rgba(255,255,255,0.95) 40%,
        rgba(250,253,255,0.82) 58%,
        rgba(244,251,254,0.44) 74%,
        rgba(240,250,253,0.12) 88%,
        rgba(240,250,253,0) 100%);
  }
.kx-hero .kx-h1{ max-width:17ch; }
}
@media (max-width:520px){
.kx-hero .kx-eyebrow{ letter-spacing:0.2em; gap:8px; }
.kx-hero .kx-eyebrow::before, .kx-hero .kx-eyebrow::after{ width:21px; }
.kx-hero .kx-list li{ gap:10px; }
/* CTA stays hugged to its label at every width (no full-bleed on mobile). */
.kx-hero .kx-cta{ width:auto; justify-content:center; }
}

/* ---------- REDUCED MOTION ----------
   Non-negotiable on a site that sells visual-stress assessments.
   All rings freeze at a deliberately composed angle (the JS draws exactly
   one static frame), the cursor field is never wired up, and the
   entrance animations resolve instantly. Nothing moves, ever. */
@media (prefers-reduced-motion: reduce){
.kx-hero .kx-rise{ opacity:1; animation:none; }
.kx-hero .kx-cta{ transition:none; }
*, *::before, *::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}

/* ============================================================
   TRUST STRIP — adapted from the V5 design, retuned to this
   site's palette (navy / teal / amber rather than V5's espresso
   and sienna). Replaces the two-testimonial band under the hero.
   ============================================================ */
.v2-trust{
  --navy:#2E1F18;
  --teal:#6E5747;
  --teal-soft:#5A4A3E;
  --parchment:#F6F1EF;
  --border:#DCD2CE;
  --serif:"Clearface", Georgia, "Times New Roman", serif;
  --sans:"trade-gothic-next", "Segoe UI", system-ui, -apple-system, sans-serif;

  background:var(--parchment);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  padding:20px 24px;
}
.v2-trust *{box-sizing:border-box}

.v2-trust .v2-trust-grid{
  max-width:var(--wrap);
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  text-align:center;
}
.v2-trust .v2-trust-item{ padding:2px 26px; }
/* Dividers between columns only — not on the outer edges. */
.v2-trust .v2-trust-item + .v2-trust-item{ border-left:1px solid var(--border); }

.v2-trust .v2-trust-figure{
  font-family:var(--serif);
  font-size:clamp(21px, 2.2vw, 27px);
  font-weight:400;
  line-height:1.15;
  color:var(--navy);
  text-transform:none;   /* Elementor forces capitalize on headings */
  margin:0;
}

.v2-trust .v2-trust-label{
  font-family:var(--sans);
  font-size:12px;
  font-weight:500;
  letter-spacing:0.15em;
  text-transform:uppercase;
  color:var(--teal-soft);        /* warm now; 6.8:1 on sand */
  margin:5px 0 0;
  line-height:1.35;
}

@media (max-width:760px){
  .v2-trust{ padding:16px 20px; }
  .v2-trust .v2-trust-grid{ grid-template-columns:1fr; }
  .v2-trust .v2-trust-item{ padding:13px 8px; }
  .v2-trust .v2-trust-item + .v2-trust-item{
    border-left:0;
    border-top:1px solid var(--border);
  }
}

/* ============================================================
   TRANSPARENT PRICING — variant B (price-first), reordered so the
   two bulk-billed cards pair on the bottom row and share one hue.
   ============================================================ */
/* ============================================================
   VARIANT B — PRICE-FIRST / BIG NUMBERS
   The price is the hero of each card. Colour enters through the
   numeral itself plus a hairline accent rule, nothing else.
   ============================================================ */
.v2-pricing{
  --navy:#2E1F18;
  --teal:#6E5747;
  --teal-soft:#5A4A3E;
  --parchment:#F6F1EF;
  --card:#FFFDFC;
  --border:#DCD2CE;
  --serif:"Clearface", Georgia, "Times New Roman", serif;
  --sans:"trade-gothic-next", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* Darkened spectrum — each verified >=5.3:1 on the card bg.
     Raw brand hues (#8CBF3F, #F07E26, #2E6DB4, #3B3B8F) are used
     only as low-opacity decorative tints, never as text. */
  --c-green:#4F6E1A;
  --c-orange:#A9500D;
  --c-blue:#245C9C;
  --c-indigo:#3B3B8F;

  padding:clamp(48px,7vw,88px) 24px;
  background:var(--parchment);
}
.v2-pricing *{box-sizing:border-box}

.v2-pricing .v2-pricing-inner{ max-width:1000px; margin:0 auto; }

/* ---------- HEADING ---------- */
.v2-pricing .v2-pricing-head{ text-align:center; margin-bottom:clamp(34px,4vw,54px); }
.v2-pricing .v2-pricing-head h2{
  font-family:var(--serif);
  font-size:clamp(30px,4vw,46px);
  font-weight:400;
  line-height:1.12;
  color:var(--navy);
  text-transform:none;
  margin:0;
}
.v2-pricing .v2-pricing-head p{
  font-family:var(--sans);
  font-size:clamp(16px,1.5vw,19px);
  line-height:1.6;
  color:var(--teal-soft);
  max-width:640px;
  margin:18px auto 0;
}

/* ---------- GRID ---------- */
.v2-pricing .v2-pricing-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:18px;
}

/* ---------- CARD ---------- */
.v2-pricing .v2-pricing-card{
  position:relative;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  padding:26px 26px 24px;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  transition:border-color .16s, box-shadow .16s;
}
/* Hairline accent along the top edge — the only block of raw hue. */
.v2-pricing .v2-pricing-card::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:3px;
  background:var(--accent);
}
.v2-pricing .v2-pricing-card:hover{
  border-color:rgba(0,46,66,0.22);
  box-shadow:0 2px 14px rgba(0,46,66,0.07);
}

/* ---------- EYEBROW (who it's for) ---------- */
.v2-pricing .v2-pricing-who{
  font-family:var(--sans);
  font-size:11.5px;
  font-weight:600;
  letter-spacing:0.15em;
  text-transform:uppercase;
  color:var(--teal);
  margin:0 0 12px;
}

/* ---------- PRICE RAIL ---------- */
.v2-pricing .v2-pricing-rail{
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:0 10px;
  margin:0 0 4px;
}
.v2-pricing .v2-pricing-fig{
  font-family:var(--serif);
  font-weight:400;
  line-height:0.92;
  letter-spacing:-0.015em;
  color:var(--accent-text);
  text-transform:none;
  margin:0;
  /* min() keeps the numeral from overflowing at 360px */
  font-size:clamp(46px, 7.4vw, 72px);
}
/* "Bulk Billed" is two words, not a numeral — it needs a smaller
   optical size to occupy the same visual weight as "$35". */
.v2-pricing .v2-pricing-fig--word{
  font-size:clamp(30px, 4.6vw, 44px);
  line-height:1.02;
  letter-spacing:-0.005em;
}
.v2-pricing .v2-pricing-qual{
  font-family:var(--sans);
  font-size:13px;
  font-weight:600;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--teal-soft);
  white-space:nowrap;
}

/* ---------- CARD 2: TWO PRICES ---------- */
/* Two figures share one rail, split by a vertical hairline. Each
   keeps its own day qualifier stacked beneath it. */
.v2-pricing .v2-pricing-rail--split{
  gap:0;
  align-items:stretch;
}
.v2-pricing .v2-pricing-tier{
  display:flex;
  flex-direction:column;
  padding-right:20px;
}
.v2-pricing .v2-pricing-tier + .v2-pricing-tier{
  padding-right:0;
  padding-left:20px;
  border-left:1px solid var(--border);
}
.v2-pricing .v2-pricing-tier .v2-pricing-fig{
  font-size:clamp(40px, 6.2vw, 60px);
}
.v2-pricing .v2-pricing-tier .v2-pricing-qual{
  margin-top:7px;
  font-size:12px;
}

/* ---------- CARD 4: NO PRICE ---------- */
/* There is no number, so the slot is filled by the thing that IS the
   value — the funds mark. Same optical mass, same baseline. */
.v2-pricing .v2-pricing-fig--funds{
  font-size:clamp(30px, 4.3vw, 42px);
}
.v2-pricing .v2-pricing-hicaps{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:12px;
  padding:6px 12px 6px 10px;
  border:1px solid rgba(59,59,143,0.28);
  border-radius:999px;
  background:rgba(59,59,143,0.06);
  font-family:var(--sans);
  font-size:12px;
  font-weight:600;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--c-indigo);
  align-self:flex-start;
}
.v2-pricing .v2-pricing-hicaps svg{ width:14px; height:14px; flex:0 0 auto; }

/* ---------- SUPPORTING COPY ---------- */
.v2-pricing .v2-pricing-card p.v2-pricing-note{
  font-family:var(--sans);
  font-size:14.5px;
  line-height:1.55;
  color:var(--teal-soft);
  margin:14px 0 0;
  padding-top:14px;
  border-top:1px solid var(--border);
}

/* ---------- FOOTER LINK ---------- */
.v2-pricing .v2-pricing-link{
  margin-top:24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:999px;
  padding:14px 18px 14px 26px;
  text-decoration:none;
  transition:background-color .16s, border-color .16s;
}
.v2-pricing .v2-pricing-link:hover{
  background:#F6F1EF;
  border-color:rgba(0,46,66,0.28);
}
.v2-pricing .v2-pricing-link-text{
  font-family:var(--sans);
  font-size:clamp(14px,1.3vw,16px);
  font-weight:500;
  color:var(--navy);
}
.v2-pricing .v2-pricing-link-cta{
  display:inline-flex;
  align-items:center;
  gap:7px;
  flex:0 0 auto;
  font-family:var(--sans);
  font-size:12px;
  font-weight:600;
  letter-spacing:0.15em;
  text-transform:uppercase;
  color:var(--teal);
}
.v2-pricing .v2-pricing-link-cta svg{ width:13px; height:13px; }

/* ---------- RESPONSIVE ---------- */
@media (max-width:720px){
  .v2-pricing .v2-pricing-grid{ grid-template-columns:1fr; }
  .v2-pricing .v2-pricing-card{ padding:22px 20px 20px; }
  /* Once single-column, vw-based figure sizes would balloon — pin them. */
  .v2-pricing .v2-pricing-fig{ font-size:58px; }
  .v2-pricing .v2-pricing-fig--word{ font-size:36px; }
  .v2-pricing .v2-pricing-fig--funds{ font-size:35px; }
  .v2-pricing .v2-pricing-tier .v2-pricing-fig{ font-size:50px; }
    .v2-pricing .v2-pricing-link{
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
    border-radius:16px;
    padding:18px 20px;
  }
}
@media (max-width:400px){
  .v2-pricing{ padding-left:18px; padding-right:18px; }
  .v2-pricing .v2-pricing-fig{ font-size:50px; }
  .v2-pricing .v2-pricing-fig--word{ font-size:31px; }
  .v2-pricing .v2-pricing-fig--funds{ font-size:30px; }
  .v2-pricing .v2-pricing-tier .v2-pricing-fig{ font-size:42px; }
    .v2-pricing .v2-pricing-tier{ padding-right:14px; }
  .v2-pricing .v2-pricing-tier + .v2-pricing-tier{ padding-left:14px; }
}

@media (prefers-reduced-motion: reduce){
  .v2-pricing .v2-pricing-card,
  .v2-pricing .v2-pricing-link{ transition:none; }
}

/* ============================================================
   MEET YOUR TEAM — adapted from V5, retuned to this site's
   palette (navy / teal rather than espresso / sienna).
   ============================================================ */
.v2-team{
  --navy:#2E1F18;
  --teal:#6E5747;
  --teal-soft:#5A4A3E;
  --parchment:#F6F1EF;
  --parchment-dark:#EFE7E3;
  --border:#DCD2CE;
  --serif:"Clearface", Georgia, "Times New Roman", serif;
  --sans:"trade-gothic-next", "Segoe UI", system-ui, -apple-system, sans-serif;

  padding:clamp(30px,3.6vw,48px) 24px clamp(48px,7vw,88px);
  /* Warm parchment, not the previous cool teal wash: a green-cyan ground
     is the complement of skin tone and made the portraits look sallow. */
  background:var(--parchment);
}
.v2-team *{box-sizing:border-box}
.v2-team .v2-team-inner{ max-width:var(--wrap); margin:0 auto; }

.v2-team .v2-team-head{ text-align:center; margin-bottom:clamp(34px,4vw,54px); }
.v2-team .v2-team-head h2{
  font-family:var(--serif);
  font-size:clamp(30px,4vw,46px);
  font-weight:400; line-height:1.12;
  color:var(--navy);
  text-transform:none;
  margin:0;
}
.v2-team .v2-team-head h2 em{
  font-style:italic;
  color:var(--teal);
}
.v2-team .v2-team-head p{
  font-family:var(--sans);
  font-size:clamp(15px,1.4vw,17px);
  line-height:1.6;
  color:var(--teal-soft);
  max-width:640px;
  margin:16px auto 0;
}

.v2-team .v2-team-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:clamp(16px,2vw,26px);
}
.v2-team .v2-team-member{ text-align:center; }

.v2-team .v2-team-photo{
  aspect-ratio:3/4;
  border-radius:16px;
  overflow:hidden;
  margin-bottom:18px;
  background:var(--parchment-dark);
}
.v2-team .v2-team-photo img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}

/* Placeholder card for a member without a photo yet. */
.v2-team .v2-team-photo.is-empty{
  border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
}

/* Wendy's portrait is a cut-out on transparency, not a full-bleed
   photograph like the other three. `cover` would crop into her head,
   and left on the parchment ground she reads as pasted on, so the tile
   gets the hero's pale wash instead and she is anchored to the bottom
   edge at her natural proportions - the same treatment as the services
   section, scaled down. */
.v2-team .v2-team-photo--cutout{
  background:
    radial-gradient(120% 96% at 50% 34%, #FFFFFF 0%, #F4FBFD 40%, #E1F3F9 78%, #D2ECF5 100%);
  display:flex;
  align-items:flex-end;
  justify-content:center;
}
.v2-team .v2-team-photo--cutout img{
  width:auto;
  height:96%;
  max-width:100%;
  object-fit:contain;
  object-position:50% 100%;
}
.v2-team .v2-team-placeholder{ text-align:center; padding:0 16px; }
.v2-team .v2-team-placeholder svg{
  width:30px; height:30px; color:var(--teal); opacity:.55;
  margin-bottom:10px;
}
.v2-team .v2-team-placeholder span{
  display:block;
  font-family:var(--sans);
  font-size:11px; letter-spacing:0.15em; text-transform:uppercase;
  color:var(--teal-soft);
}

.v2-team .v2-team-member h3{
  font-family:var(--serif);
  font-size:clamp(20px,1.9vw,25px);
  font-weight:400; line-height:1.15;
  color:var(--navy);
  text-transform:none;
  margin:0 0 5px;
}
.v2-team .v2-team-role{
  font-family:var(--sans);
  font-size:11.5px; font-weight:600;
  letter-spacing:0.15em; text-transform:uppercase;
  color:var(--teal);
  margin:0 0 12px;
}
.v2-team .v2-team-bio{
  font-family:var(--sans);
  font-size:14px; line-height:1.55;
  color:var(--teal-soft);
  max-width:290px;
  margin:0 auto;
}

.v2-team .v2-team-more{ text-align:center; margin-top:clamp(32px,4vw,52px); }
.v2-team .v2-team-more a{
  font-family:var(--sans);
  font-size:14px; font-weight:600;
  color:var(--navy);
  text-decoration:none;
  border-bottom:2px solid var(--teal);
  padding-bottom:3px;
  transition:color .16s;
}
.v2-team .v2-team-more a:hover{ color:var(--teal); }

@media (max-width:860px){
  .v2-team .v2-team-grid{ grid-template-columns:repeat(2, 1fr); gap:24px 18px; }
}
@media (max-width:460px){
  .v2-team .v2-team-grid{ grid-template-columns:1fr; }
  .v2-team .v2-team-photo{ max-width:280px; margin-inline:auto; margin-bottom:16px; }
}

/* ============================================================
   TESTIMONIALS — adapted from V5, retuned to this site's palette
   (navy ground rather than V5's espresso).
   ============================================================ */
.v2-quotes{
  --navy:#2E1F18;
  --navy-deep:#00212F;
  --parchment:#F6F1EF;
  --amber:#F2B01E;
  --serif:"Clearface", Georgia, "Times New Roman", serif;
  --sans:"trade-gothic-next", "Segoe UI", system-ui, -apple-system, sans-serif;

  position:relative;
  overflow:hidden;
  background:var(--navy);
  color:var(--parchment);
  padding:clamp(46px,6vw,72px) 24px;
}
.v2-quotes *{box-sizing:border-box}

/* Soft spectrum wash, echoing the hero without competing with it. */
.v2-quotes::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(circle at 18% 50%, rgba(240,126,38,0.30), transparent 58%),
    radial-gradient(circle at 82% 50%, rgba(41,163,163,0.26), transparent 58%);
  opacity:.5;
  pointer-events:none;
}

.v2-quotes .v2-quotes-inner{
  position:relative; z-index:1;
  max-width:940px; margin:0 auto;
  text-align:center;
}

.v2-quotes .v2-quote-mark{
  font-family:var(--serif);
  font-size:clamp(44px,6vw,68px);
  line-height:.6;
  color:rgba(242,176,30,0.45);
  margin:0 0 10px;
}
.v2-quotes .v2-quote-mark.is-close{ margin:6px 0 0; font-size:clamp(32px,4.4vw,50px); }

.v2-quotes .v2-quote-text{
  font-family:var(--serif);
  font-size:clamp(17px,1.85vw,25px);
  font-weight:400; font-style:italic;
  line-height:1.45;
  color:var(--parchment);
  text-transform:none;
  margin:0;
  min-height:5.8em;      /* sized to the longest quote so the section never jumps */
  transition:opacity .28s ease;
}
.v2-quotes .v2-quote-author{
  font-family:var(--sans);
  font-size:12.5px; font-weight:500;
  letter-spacing:0.15em; text-transform:uppercase;
  color:rgba(246,241,239,0.62);
  margin:20px 0 0;
  transition:opacity .28s ease;
}
.v2-quotes.is-fading .v2-quote-text,
.v2-quotes.is-fading .v2-quote-author{ opacity:0; }

.v2-quotes .v2-quote-nav{
  display:flex; align-items:center; justify-content:center;
  gap:14px; margin-top:26px;
}
.v2-quotes .v2-quote-btn{
  width:36px; height:36px;
  border-radius:50%;
  border:1px solid rgba(246,241,239,0.22);
  background:transparent;
  color:var(--parchment);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  transition:background-color .15s, border-color .15s;
}
.v2-quotes .v2-quote-btn:hover{
  background:rgba(246,241,239,0.10);
  border-color:rgba(246,241,239,0.38);
}
.v2-quotes .v2-quote-btn svg{ width:14px; height:14px; }

.v2-quotes .v2-quote-dots{ display:flex; align-items:center; gap:8px; }
.v2-quotes .v2-quote-dot{
  width:7px; height:7px;
  border-radius:50%;
  background:rgba(246,241,239,0.22);
  border:0; padding:0;
  cursor:pointer;
  transition:background-color .18s;
}
.v2-quotes .v2-quote-dot.is-active{ background:var(--amber); }

@media (max-width:560px){
  .v2-quotes{ padding:38px 20px; }
  .v2-quotes .v2-quote-text{ min-height:11em; }
}
@media (prefers-reduced-motion: reduce){
  .v2-quotes .v2-quote-text,
  .v2-quotes .v2-quote-author{ transition:none; }
}

/* ============================================================
   CLINIC COLLAGE — "Step inside Spectrum", adapted from V5.
   ============================================================ */
.v2-clinic{
  --navy:#2E1F18;
  --teal:#6E5747;
  --teal-soft:#5A4A3E;
  --serif:"Clearface", Georgia, "Times New Roman", serif;
  --sans:"trade-gothic-next", "Segoe UI", system-ui, -apple-system, sans-serif;

  padding:clamp(48px,7vw,88px) 24px;
  background:#FFFDFC;
}
.v2-clinic *{box-sizing:border-box}
.v2-clinic .v2-clinic-inner{ max-width:var(--wrap); margin:0 auto; }

.v2-clinic .v2-clinic-head{ text-align:center; margin-bottom:clamp(28px,3.4vw,44px); }
.v2-clinic .v2-clinic-head h2{
  font-family:var(--serif);
  font-size:clamp(30px,4vw,46px);
  font-weight:400; line-height:1.12;
  color:var(--navy);
  text-transform:none;
  margin:0;
}

/* One tall image on the left, two stacked on the right. */
.v2-clinic .v2-clinic-grid{
  display:grid;
  grid-template-columns:7fr 5fr;
  grid-template-rows:200px 200px;
  gap:16px;
}
.v2-clinic .v2-clinic-cell{
  border-radius:16px;
  overflow:hidden;
  background:#EFE7E3;
}
.v2-clinic .v2-clinic-cell:first-child{ grid-row:span 2; }
.v2-clinic .v2-clinic-cell img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}

@media (max-width:820px){
  .v2-clinic .v2-clinic-grid{
    grid-template-columns:1fr 1fr;
    grid-template-rows:auto;
    gap:12px;
  }
  .v2-clinic .v2-clinic-cell:first-child{
    grid-row:auto;
    grid-column:span 2;
    aspect-ratio:4/3;
  }
  .v2-clinic .v2-clinic-cell:not(:first-child){ aspect-ratio:1; }
}

/* ============================================================
   WHY CHOOSE US — adapted from V5, retuned to this site's
   palette (navy / teal rather than espresso / sage / sienna).
   ============================================================ */
.v2-why{
  --navy:#2E1F18;
  --teal:#6E5747;
  --teal-soft:#5A4A3E;
  --border:#DCD2CE;
  --serif:"Clearface", Georgia, "Times New Roman", serif;
  --sans:"trade-gothic-next", "Segoe UI", system-ui, -apple-system, sans-serif;

  padding:clamp(48px,7vw,88px) 24px;
  background:#FFFDFC;
}
.v2-why *{box-sizing:border-box}

.v2-why .v2-why-inner{
  max-width:1080px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(32px,4.5vw,64px);
  align-items:center;
}

.v2-why .v2-why-copy h2{
  font-family:var(--serif);
  font-size:clamp(28px,3.7vw,44px);
  font-weight:400;
  line-height:1.08;
  color:var(--navy);
  text-transform:none;
  margin:0 0 22px;
}
.v2-why .v2-why-copy h2 em{
  font-style:italic;
  color:var(--teal);
}
.v2-why .v2-why-copy p{
  font-family:var(--sans);
  font-size:clamp(15px,1.4vw,17px);
  line-height:1.65;
  color:var(--teal-soft);
  margin:0 0 18px;
}
.v2-why .v2-why-link{
  display:inline-block;
  margin-top:8px;
  font-family:var(--sans);
  font-size:14px;
  font-weight:600;
  color:var(--navy);
  text-decoration:none;
  border-bottom:2px solid var(--teal);
  padding-bottom:3px;
  transition:color .16s;
}
.v2-why .v2-why-link:hover{ color:var(--teal); }

.v2-why .v2-why-list{ display:flex; flex-direction:column; gap:16px; }
.v2-why .v2-why-card{
  background:#F6F1EF;
  border:1px solid var(--border);
  border-radius:16px;
  padding:22px;
}
.v2-why .v2-why-card-head{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:10px;
}
.v2-why .v2-why-num{
  flex:0 0 auto;
  width:34px; height:34px;
  border-radius:50%;
  background:rgba(37,89,91,0.14);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--serif);
  font-size:17px;
  color:var(--teal);
}
.v2-why .v2-why-card h3{
  font-family:var(--serif);
  font-size:clamp(17px,1.6vw,21px);
  font-weight:400;
  line-height:1.2;
  color:var(--navy);
  text-transform:none;
  margin:0;
}
.v2-why .v2-why-card p{
  font-family:var(--sans);
  font-size:14px;
  line-height:1.55;
  color:var(--teal-soft);
  margin:0;
  padding-left:46px;   /* aligns under the heading, clear of the number */
}

@media (max-width:820px){
  .v2-why .v2-why-inner{ grid-template-columns:1fr; gap:32px; }
  .v2-why .v2-why-card p{ padding-left:0; }
}

/* ============================================================
   SECTION TEXTURE — the original background-scaled.jpg is a photo
   of a dotted surface (perspective distortion, uneven lighting,
   irregular spacing), so it never aligned when scaled to cover.
   Replaced with a seamless 40px tile.
   ============================================================ */
.elementor-2 .elementor-element.elementor-element-9d8638f > .elementor-background-overlay{
  background-image:url("v2-images/dot-tile.png") !important;
  background-repeat:repeat !important;
  background-size:22px 22px !important;
  background-position:0 0 !important;
  mix-blend-mode:normal !important;
  opacity:1 !important;
}

/* ============================================================
   TEAM REASONS — the six "why choose us" points, folded into the
   Meet Your Team section beneath the portraits.
   ============================================================ */
.v2-team .v2-team-reasons{
  margin-top:clamp(34px,4vw,52px);
  padding-top:clamp(30px,3.4vw,42px);
  border-top:1px solid var(--border);
}
.v2-team .v2-team-reasons-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:clamp(18px,2.2vw,30px) clamp(24px,3vw,44px);
}
.v2-team .v2-team-reason{
  display:flex;
  align-items:flex-start;
  gap:12px;
}
/* Dot marker, one per logo hue — decorative only, never carries meaning. */
.v2-team .v2-team-reason::before{
  content:"";
  flex:0 0 auto;
  width:9px; height:9px;
  margin-top:7px;
  border-radius:50%;
  background:var(--rdot,#25595B);
}
.v2-team .v2-team-reason:nth-child(1){ --rdot:#F07E26; }
.v2-team .v2-team-reason:nth-child(2){ --rdot:#E8412C; }
.v2-team .v2-team-reason:nth-child(3){ --rdot:#F2B01E; }
.v2-team .v2-team-reason:nth-child(4){ --rdot:#8CBF3F; }
.v2-team .v2-team-reason:nth-child(5){ --rdot:#29A3A3; }
.v2-team .v2-team-reason:nth-child(6){ --rdot:#2E6DB4; }

.v2-team .v2-team-reason p{
  font-family:var(--sans);
  font-size:15px;
  line-height:1.5;
  color:var(--teal-soft);
  margin:0;
}
.v2-team .v2-team-reason strong{
  display:block;
  font-family:var(--serif);
  font-size:17px;
  font-weight:400;
  line-height:1.25;
  color:var(--navy);
  margin-bottom:3px;
}

@media (max-width:860px){
  .v2-team .v2-team-reasons-grid{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:520px){
  .v2-team .v2-team-reasons-grid{ grid-template-columns:1fr; }
}

/* ============================================================
   VARIANT E (Warm & Human) — comparison copy, sits under the
   live team/why section. Remove once a direction is chosen.
   ============================================================ */
/* ============================================================
   VARIANT E — "WARM & HUMAN"
   Why choose us? for Spectrum Family Eyecare.
   Six soft, tinted cards — one per hue of the logo's dot rings —
   written as if Paul, Gill and Megan were saying it out loud.
   Plain CSS. No JS. No animation. No hover-enlarge.
   ============================================================ */

/* --- preview page chrome only (not part of the section) --- */

/* ============================================================
   SECTION ROOT
   Every rule below is scoped under .ve-why so Elementor's
   .elementor-kit-5 a (0-1-1) cannot reach in.
   ============================================================ */
.ve-why{
  --navy:#2E1F18;
  --teal:#6E5747;
  --teal-soft:#5A4A3E;      /* body copy — 6.80:1 min over every tint used here */
  --border:#DCD2CE;
  --parchment:#F6F1EF;
  --paper:#FFFDFC;

  --serif:"Clearface", Georgia, "Times New Roman", serif;
  --sans:"trade-gothic-next", "Segoe UI", system-ui, -apple-system, sans-serif;

  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding:clamp(48px,7vw,88px) 24px;
  background:var(--paper);
}
.ve-why *,
.ve-why *::before,
.ve-why *::after{ box-sizing:border-box }

/* A single very soft warm wash in the top corners, so the section
   reads warmer than its neighbours without any saturated field.
   Decorative only; sits under everything. */
.ve-why::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(58% 46% at 6% 0%,  rgba(240,126,38,0.10), transparent 70%),
    radial-gradient(58% 46% at 96% 4%, rgba(41,163,163,0.11), transparent 70%);
}

.ve-why .ve-inner{
  position:relative;
  z-index:1;
  max-width:var(--wrap);
  margin:0 auto;
}

/* ---------- HEADING ---------- */
.ve-why .ve-head{
  max-width:780px;
  margin:0 auto clamp(34px,4.4vw,54px);
  text-align:center;
}

/* The dot rings from the logo mark, drawn small and quiet above the
   heading. Static SVG — it never moves. */
.ve-why .ve-mark{
  display:block;
  width:58px;
  height:58px;
  margin:0 auto 22px;
}

.ve-why .ve-head h2{
  font-family:var(--serif);
  font-size:clamp(31px,4.2vw,48px);
  font-weight:400;
  line-height:1.12;
  letter-spacing:-0.005em;
  text-wrap:balance;
  color:var(--navy);
  text-transform:none;      /* Elementor forces capitalize on h2 */
  margin:0;
}
.ve-why .ve-head h2 em{
  font-style:italic;
  color:var(--teal);        /* 7.79:1 on #FFFDFC */
}
.ve-why .ve-head p{
  font-family:var(--sans);
  font-size:clamp(16px,1.55vw,19px);
  line-height:1.62;
  color:var(--teal-soft);   /* 5.80:1 on #FFFDFC */
  margin:18px auto 0;
  max-width:600px;
  text-wrap:balance;
}

/* ---------- THE SIX ---------- */
.ve-why .ve-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:clamp(14px,1.7vw,20px);
}

.ve-why .ve-card{
  position:relative;
  border-radius:26px;                 /* generous, soft — the warm move */
  padding:clamp(24px,2.4vw,30px);
  background:var(--card-bg);
  border:1px solid var(--card-line);
  display:flex;
  flex-direction:column;
  gap:0;
}
/* PROXIMITY. The card was a flex column with a single gap:14px, which
   put the heading exactly as far from its icon as from its own body
   copy - so it read as belonging to neither. The icon now sits further
   off and the body tucks in under the heading. */
.ve-why .ve-card .ve-disc{ margin-bottom:16px; }

/* Per-card hue. Each --card-bg is the raw brand hue at 9% over
   #FFFDFC, pre-composited to a flat hex so contrast is verifiable
   rather than guessed at. --ink is the darkened version of the
   same hue, used only for the small icon glyph and the accent word. */
.ve-why .ve-card.is-orange{ --card-bg:#FEF2E9; --card-line:#F6DCC6; --disc:#FCE1CC; --ink:#A8480F; }
.ve-why .ve-card.is-teal  { --card-bg:#ECF5F4; --card-line:#CFE4E2; --disc:#CFE9E8; --ink:#186A6A; }
.ve-why .ve-card.is-amber { --card-bg:#FEF6E8; --card-line:#F4E3C4; --disc:#FCECCA; --ink:#8A5E06; }
.ve-why .ve-card.is-green { --card-bg:#F5F7EB; --card-line:#DDE6CA; --disc:#E5EFD1; --ink:#4C6A1B; }
.ve-why .ve-card.is-blue  { --card-bg:#ECF0F6; --card-line:#D3DDEB; --disc:#D0DCEC; --ink:#2A5FA0; }
.ve-why .ve-card.is-red   { --card-bg:#FDECE9; --card-line:#F3D4CE; --disc:#FAD2CD; --ink:#B02A19; }

/* Soft round icon well. No shadow, no ring — just a warmer disc. */
.ve-why .ve-disc{
  flex:0 0 auto;
  margin:0 auto;      /* centred in the card */
  width:52px;
  height:52px;
  border-radius:50%;
  background:var(--disc);
  display:flex;
  align-items:center;
  justify-content:center;
}
.ve-why .ve-disc svg{
  width:25px;
  height:25px;
  display:block;
  color:var(--ink);         /* >=4.66:1 on its own disc */
  fill:none;
  stroke:currentColor;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.ve-why .ve-card h3{
  font-family:var(--serif);
  font-size:clamp(19px,1.75vw,23px);
  font-weight:400;
  line-height:1.22;
  color:var(--navy);        /* >=12.49:1 on every tint */
  text-wrap:balance;
  text-transform:none;      /* Elementor forces capitalize on h3 */
  margin:0 0 7px;           /* PROXIMITY: body tucks under the heading,
                               icon sits 16px off. Was a single flex
                               gap of 14px, equal on both sides. */
}
.ve-why .ve-card p{
  font-family:var(--sans);
  font-size:clamp(14.5px,1.25vw,15.5px);
  line-height:1.62;
  color:var(--teal-soft);   /* >=5.14:1 on every tint */
  margin:0;
}
.ve-why .ve-card p b{
  font-weight:600;
  color:var(--ink);         /* >=5.30:1 on its own tint */
}

/* ---------- SIGN-OFF ---------- */
.ve-why .ve-signoff{
  margin-top:clamp(26px,3.2vw,40px);
  padding:clamp(22px,2.6vw,30px) clamp(24px,3vw,36px);
  border-radius:26px;
  background:var(--parchment);
  border:1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
}
.ve-why .ve-signoff p{
  font-family:var(--serif);
  font-size:clamp(18px,1.85vw,24px);
  font-style:italic;
  font-weight:400;
  line-height:1.35;
  color:var(--navy);        /* 12.76:1 on parchment */
  margin:0;
  max-width:44ch;
}
.ve-why .ve-signoff .ve-cta{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--sans);
  font-size:14px;
  font-weight:600;
  letter-spacing:0.02em;
  color:var(--paper);       /* white on navy — 14.09:1 */
  background:var(--navy);
  border:1px solid var(--navy);
  border-radius:999px;
  padding:14px 24px;
  text-decoration:none;
  transition:background-color .16s ease, border-color .16s ease;
}
.ve-why .ve-signoff .ve-cta:hover,
.ve-why .ve-signoff .ve-cta:focus-visible{
  background:#01415C;       /* colour shift only — nothing grows or moves */
  border-color:#01415C;
}
.ve-why .ve-signoff .ve-cta svg{
  width:13px; height:13px;
  fill:none; stroke:currentColor;
  stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width:960px){
  .ve-why .ve-grid{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:620px){
  .ve-why{ padding:44px 18px; }
  .ve-why .ve-grid{ grid-template-columns:1fr; gap:14px; }
  .ve-why .ve-card{ border-radius:22px; padding:22px; }
  .ve-why .ve-signoff{
    border-radius:22px;
    flex-direction:column;
    align-items:flex-start;
    text-align:left;
  }
  .ve-why .ve-signoff .ve-cta{ width:100%; justify-content:center; }
}
@media (max-width:380px){
  .ve-why{ padding:38px 15px; }
  .ve-why .ve-card{ padding:20px; }
  .ve-why .ve-disc{ width:46px; height:46px; }
  .ve-why .ve-disc svg{ width:22px; height:22px; }
}
@media (prefers-reduced-motion: reduce){
  .ve-why .ve-signoff .ve-cta{ transition:none; }
}

/* ============================================================
   REVIEWS — pull-quote carousel, Google review cards, and a
   leave-a-review CTA. Structure modelled on edeneyecare.co.uk.
   ============================================================ */
.v2-reviews{
  --navy:#2E1F18;
  --navy-deep:#00212F;
  --parchment:#F6F1EF;
  --amber:#F2B01E;
  --serif:"Clearface", Georgia, "Times New Roman", serif;
  --sans:"trade-gothic-next", "Segoe UI", system-ui, -apple-system, sans-serif;

  position:relative;
  overflow:hidden;
  background:var(--navy);
  color:var(--parchment);
  padding:clamp(48px,6vw,78px) 24px;
}
.v2-reviews *{box-sizing:border-box}
.v2-reviews::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(circle at 18% 45%, rgba(240,126,38,0.26), transparent 58%),
    radial-gradient(circle at 82% 55%, rgba(41,163,163,0.22), transparent 58%);
  opacity:.5;
  pointer-events:none;
}
.v2-reviews .v2-rv-inner{ position:relative; z-index:1; max-width:var(--wrap); margin:0 auto; }

.v2-reviews .v2-rv-eyebrow{
  font-family:var(--sans);
  font-size:12px; font-weight:600;
  letter-spacing:0.22em; text-transform:uppercase;
  color:rgba(246,241,239,0.62);
  text-align:center;
  margin:0 0 26px;
}

/* --- pull-quote carousel --- */
.v2-reviews .v2-rv-stage{
  display:flex; align-items:flex-start; gap:14px;
  justify-content:center;
}
.v2-reviews .v2-rv-quote{
  flex:1 1 auto;
  max-width:820px;
  text-align:center;
}
.v2-reviews .v2-rv-text{
  font-family:var(--serif);
  font-size:clamp(17px,1.8vw,24px);
  font-style:italic;
  line-height:1.45;
  color:var(--parchment);
  margin:0;
  min-height:5.4em;
  transition:opacity .28s ease;
}
.v2-reviews .v2-rv-author{
  font-family:var(--sans);
  font-size:12px; font-weight:500;
  letter-spacing:0.15em; text-transform:uppercase;
  color:rgba(246,241,239,0.6);
  margin:18px 0 0;
  transition:opacity .28s ease;
}
.v2-reviews.is-fading .v2-rv-text,
.v2-reviews.is-fading .v2-rv-author{ opacity:0; }

.v2-reviews .v2-rv-arrow{
  flex:0 0 auto;
  width:34px; height:34px;
  margin-top:14px;
  border-radius:50%;
  border:1px solid rgba(246,241,239,0.22);
  background:transparent;
  color:var(--parchment);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  transition:background-color .15s, border-color .15s;
}
.v2-reviews .v2-rv-arrow:hover{
  background:rgba(246,241,239,0.10);
  border-color:rgba(246,241,239,0.4);
}
.v2-reviews .v2-rv-arrow svg{ width:13px; height:13px; }

.v2-reviews .v2-rv-dots{
  display:flex; align-items:center; justify-content:center;
  gap:8px; margin-top:22px;
}
.v2-reviews .v2-rv-dot{
  width:7px; height:7px; border-radius:50%;
  background:rgba(246,241,239,0.24);
  border:0; padding:0; cursor:pointer;
  transition:background-color .18s;
}
.v2-reviews .v2-rv-dot.is-active{ background:var(--amber); }

/* --- Google review cards --- */
.v2-reviews .v2-rv-google{
  margin-top:clamp(38px,4.4vw,58px);
  padding-top:clamp(30px,3.4vw,44px);
  border-top:1px solid rgba(246,241,239,0.14);
}
.v2-reviews .v2-rv-rating{
  text-align:center;
  font-family:var(--sans);
  font-size:14px;
  color:rgba(246,241,239,0.72);
  margin:0 0 24px;
}
.v2-reviews .v2-rv-rating strong{
  font-family:var(--serif);
  font-size:22px; font-weight:400;
  color:var(--parchment);
}
.v2-reviews .v2-rv-cards{
  display:grid;
  /* Auto-fits however many cards exist, so 2 centre rather than leaving a hole. */
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:16px;
  max-width:760px;
  margin:0 auto;
}
.v2-reviews .v2-rv-cards:has(> :nth-child(3)){ max-width:none; }
/* Exactly 4 cards: 2x2 rather than an auto-fit 3+1 with one card stranded. */
.v2-reviews .v2-rv-cards:has(> :nth-child(4)):not(:has(> :nth-child(5))){
  grid-template-columns:repeat(2, 1fr);
  max-width:820px;
}
.v2-reviews .v2-rv-card{
  background:#FFFDFC;
  border-radius:14px;
  padding:22px;
  text-align:center;
  /* Cards are links to the review on Google. */
  display:flex;
  flex-direction:column;
  text-decoration:none;
  border:1px solid transparent;
  transition:border-color .16s, box-shadow .16s;
}
.v2-reviews .v2-rv-card:hover{
  border-color:rgba(0,46,66,0.18);
  box-shadow:0 6px 18px rgba(0,0,0,0.10);
}
.v2-reviews .v2-rv-card:focus-visible{
  outline:3px solid var(--amber);
  outline-offset:3px;
}
.v2-reviews .v2-rv-more{
  margin-top:auto;
  padding-top:14px;
  font-family:var(--sans);
  font-size:12px;
  font-weight:600;
  letter-spacing:0.08em;
  color:#6E5747;
  text-decoration:underline;
  text-underline-offset:3px;
}
.v2-reviews .v2-rv-card:hover .v2-rv-more{ color:var(--navy); }
.v2-reviews .v2-rv-card-name{
  font-family:var(--sans);
  font-size:15px; font-weight:600;
  color:var(--navy);
  margin:0 0 3px;
}
.v2-reviews .v2-rv-stars{
  color:var(--amber);
  font-size:14px;
  letter-spacing:2px;
  margin:0 0 4px;
}
.v2-reviews .v2-rv-when{
  font-family:var(--sans);
  font-size:12px;
  color:#7A8B8B;
  margin:0 0 12px;
}
.v2-reviews .v2-rv-card-text{
  font-family:var(--sans);
  font-size:14px; line-height:1.55;
  color:#5A4A3E;
  margin:0;
  /* Clamp to 4 lines; the full text stays in the DOM for search engines,
     and "Read on Google" opens the complete review. */
  display:-webkit-box;
  -webkit-line-clamp:4;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.v2-reviews .v2-rv-all{
  text-align:center;
  margin:26px 0 0;
}
.v2-reviews .v2-rv-all a{
  font-family:var(--sans);
  font-size:14px;
  font-weight:600;
  color:var(--parchment);
  text-decoration:none;
  border-bottom:1px solid rgba(246,241,239,0.4);
  padding-bottom:3px;
  transition:border-color .15s;
}
.v2-reviews .v2-rv-all a:hover{ border-bottom-color:var(--amber); }

/* --- leave a review --- */
.v2-reviews .v2-rv-leave{
  text-align:center;
  margin-top:clamp(32px,3.8vw,48px);
}
.v2-reviews .v2-rv-leave p{
  font-family:var(--sans);
  font-size:15px;
  color:rgba(246,241,239,0.78);
  margin:0 0 18px;
}
.v2-reviews .v2-rv-btn{
  display:inline-block;
  font-family:var(--sans);
  font-size:13px; font-weight:600;
  letter-spacing:0.14em; text-transform:uppercase;
  color:var(--navy);
  background:var(--amber);
  border-radius:999px;
  padding:14px 30px;
  text-decoration:none;
  transition:background-color .15s;
}
.v2-reviews .v2-rv-btn:hover{ background:#DE9F13; }

@media (max-width:820px){
  .v2-reviews .v2-rv-cards{ grid-template-columns:1fr; }
  .v2-reviews .v2-rv-text{ min-height:8em; }
}
@media (max-width:560px){
  .v2-reviews{ padding:38px 18px; }
  .v2-reviews .v2-rv-arrow{ display:none; }
}
@media (prefers-reduced-motion: reduce){
  .v2-reviews .v2-rv-text,
  .v2-reviews .v2-rv-author{ transition:none; }
}

/* ============================================================
   SERVICE HEADLINERS — eye examination (anchored by Wendy) and
   visual stress. Two stacked blocks, deliberately not matched:
   the exam sells the person, visual stress sells the symptom.
   ============================================================ */
.v2-svc{
  --navy:#2E1F18;
  --teal:#6E5747;
  --teal-soft:#5A4A3E;
  --parchment:#F6F1EF;
  --border:#DCD2CE;
  --amber:#F2B01E;
  --serif:"Clearface", Georgia, "Times New Roman", serif;
  --sans:"trade-gothic-next", "Segoe UI", system-ui, -apple-system, sans-serif;

  padding:clamp(48px,6.5vw,86px) 24px clamp(20px,2.4vw,34px);
  background:#FFFDFC;
}
.v2-svc *{box-sizing:border-box}
.v2-svc-inner{ max-width:var(--wrap); margin:0 auto; }

.v2-svc .v2-svc-eyebrow{
  font-family:var(--sans);
  font-size:12px; font-weight:600;
  letter-spacing:0.2em; text-transform:uppercase;
  color:var(--teal);
  margin:0 0 14px;
}
.v2-svc h2{
  font-family:var(--serif);
  font-size:clamp(28px,3.6vw,42px);
  font-weight:400; line-height:1.12;
  color:var(--navy);
  text-transform:none;
  margin:0 0 18px;
}
.v2-svc p{
  font-family:var(--sans);
  font-size:clamp(15px,1.4vw,17px);
  line-height:1.65;
  color:var(--teal-soft);
  margin:0 0 16px;
}
.v2-svc .v2-svc-link{
  display:inline-block;
  margin-top:6px;
  font-family:var(--sans);
  font-size:14px; font-weight:600;
  color:var(--navy);
  text-decoration:none;
  border-bottom:2px solid var(--teal);
  padding-bottom:3px;
  transition:color .16s;
}
.v2-svc .v2-svc-link:hover{ color:var(--teal); }

/* ---- Block 1: the exam, introduced by the optometrist ---- */
.v2-svc .v2-svc-person{
  display:grid;
  grid-template-columns:minmax(240px, 340px) 1fr;
  gap:clamp(26px,3.6vw,52px);
  align-items:center;
}
.v2-svc .v2-svc-photo{
  position:relative;
  aspect-ratio:4/5;
  display:flex; align-items:flex-end; justify-content:center;
}
.v2-svc .v2-svc-photo img{ position:relative; }

.v2-svc .v2-svc-photo img{
  width:100%; height:100%;
  object-fit:cover; display:block;
}
.v2-svc .v2-svc-photo .v2-svc-ph{
  text-align:center; padding:0 18px;
}
.v2-svc .v2-svc-photo .v2-svc-ph svg{
  width:30px; height:30px; color:var(--teal);
  opacity:.5; margin-bottom:10px;
}
.v2-svc .v2-svc-photo .v2-svc-ph span{
  display:block;
  font-family:var(--sans);
  font-size:11px; letter-spacing:0.15em; text-transform:uppercase;
  color:var(--teal-soft);
}
.v2-svc .v2-svc-name{
  font-family:var(--serif);
  font-size:clamp(20px,2vw,26px);
  font-weight:400; line-height:1.2;
  color:var(--navy);
  margin:0 0 4px;
}
.v2-svc .v2-svc-role{
  font-family:var(--sans);
  font-size:11.5px; font-weight:600;
  letter-spacing:0.15em; text-transform:uppercase;
  color:var(--teal);
  margin:0 0 18px;
}

/* ---- Block 2: visual stress, symptom-led ---- */
/* Eye examinations and visual stress are now two sibling sections
   rather than one block with a rule between them, so the separator
   that used to divide them is gone: the section grounds do that job.
   The bottom padding of the exam section and the top padding of the
   visual stress section already supply the gap. */
.v2-svc .v2-svc-vs{
  margin-top:0;
  padding-top:0;
  border-top:0;
}
.v2-svc .v2-svc-vs-grid{
  display:grid;
  grid-template-columns:1fr minmax(260px, 380px);
  gap:clamp(26px,3.6vw,52px);
  align-items:start;
}
/* Symptoms as the reader experiences them - how someone recognises
   themselves or their child, before the condition is ever named. */
.v2-svc .v2-svc-symptoms{
  list-style:none;
  margin:0;
  padding:22px 24px;
  background:var(--parchment);
  border:1px solid var(--border);
  border-radius:16px;
}
.v2-svc .v2-svc-symptoms li{
  position:relative;
  padding-left:22px;
  font-family:var(--sans);
  font-size:14.5px;
  line-height:1.5;
  color:var(--teal-soft);
}
.v2-svc .v2-svc-symptoms li + li{ margin-top:11px; }
.v2-svc .v2-svc-symptoms li::before{
  content:"";
  position:absolute;
  left:0; top:8px;
  width:7px; height:7px;
  border-radius:50%;
  border:1.5px solid var(--teal);
  opacity:.7;
}
.v2-svc .v2-svc-note{
  font-size:14px;
  color:var(--teal);
  margin-top:14px;
}

@media (max-width:820px){
  .v2-svc .v2-svc-person,
  .v2-svc .v2-svc-vs-grid{ grid-template-columns:1fr; }
  .v2-svc .v2-svc-photo{ max-width:300px; }
}


/* ============================================================
   CONTINUOUS-CURVATURE CORNERS (squircle)

   border-radius draws a circular arc, whose curvature jumps from
   0 to 1/r the instant it leaves the straight edge. The eye reads
   that discontinuity as a slight pinch at each corner. Apple ramps
   the curvature in gradually instead - a superellipse rather than
   an arc - which is why their corners look softer at the same
   nominal radius.

   CSS has no property for this, so the shape is supplied as a
   9-slice mask: corners hold their authored size, only the flat
   middle of each edge stretches. Generated by
   _build/squircle/build_css.py - edit there, not here.

   FIREFOX has no mask-border support in any form, and a masked
   element there falls back to a hard rectangle, not to the arc.
   So the whole block sits behind @supports and Firefox simply
   keeps the border-radius it already had.

   Masks clip box-shadow, so the four shadowed elements re-declare
   their shadow as filter: drop-shadow below.
   ============================================================ */
@supports (-webkit-mask-box-image: url("")) {

  /* --- pill --- */
  .v2-header .v2-book,
  .v2-header .v2-phone,
  .kx-hero .kx-cta,
  .v2-pricing .v2-pricing-hicaps,
  .v2-pricing .v2-pricing-link,
  .ve-why .ve-signoff .ve-cta,
  .v2-reviews .v2-rv-btn,
  .v2-cta .v2-cta-btn,
  .bs .bs-call,
  .v2-foot-book,
  .sb .sb-btn,
  .elementor-11 .elementor-element.elementor-element-32f02ca .wpforms-container input.wpforms-submit[type="submit"],
  .elementor-11 .elementor-element.elementor-element-32f02ca .wpforms-container button.wpforms-submit[type="submit"],
  .sb .sb-formtop .wpforms-container input.wpforms-submit[type="submit"],
  .sb .sb-formtop .wpforms-container button.wpforms-submit[type="submit"]{
    border-radius:0 !important;
    -webkit-mask-box-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='112' height='112' viewBox='0 0 112 112'%3E%3Cpath d='M 0,28.00 L 0.00,28.00 L 0.10,15.60 L 0.39,11.69 L 0.87,8.93 L 1.57,6.78 L 2.48,5.04 L 3.62,3.62 L 5.04,2.48 L 6.78,1.57 L 8.93,0.87 L 11.69,0.39 L 15.60,0.10 L 28.00,0.00 L 84.00,0 L 84.00,0.00 L 96.40,0.10 L 100.31,0.39 L 103.07,0.87 L 105.22,1.57 L 106.96,2.48 L 108.38,3.62 L 109.52,5.04 L 110.43,6.78 L 111.13,8.93 L 111.61,11.69 L 111.90,15.60 L 112.00,28.00 L 112.00,84.00 L 112.00,84.00 L 111.90,96.40 L 111.61,100.31 L 111.13,103.07 L 110.43,105.22 L 109.52,106.96 L 108.38,108.38 L 106.96,109.52 L 105.22,110.43 L 103.07,111.13 L 100.31,111.61 L 96.40,111.90 L 84.00,112.00 L 28.00,112.00 L 28.00,112.00 L 15.60,111.90 L 11.69,111.61 L 8.93,111.13 L 6.78,110.43 L 5.04,109.52 L 3.62,108.38 L 2.48,106.96 L 1.57,105.22 L 0.87,103.07 L 0.39,100.31 L 0.10,96.40 L 0.00,84.00 Z' fill='%23000'/%3E%3C/svg%3E") 25% stretch;
  }

  /* --- 26px --- */
  .ve-why .ve-card,
  .ve-why .ve-signoff{
    border-radius:0;
    -webkit-mask-box-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='104' height='104' viewBox='0 0 104 104'%3E%3Cpath d='M 0,26.00 L 0.00,26.00 L 0.09,14.49 L 0.36,10.86 L 0.81,8.29 L 1.45,6.30 L 2.30,4.68 L 3.37,3.37 L 4.68,2.30 L 6.30,1.45 L 8.29,0.81 L 10.86,0.36 L 14.49,0.09 L 26.00,0.00 L 78.00,0 L 78.00,0.00 L 89.51,0.09 L 93.14,0.36 L 95.71,0.81 L 97.70,1.45 L 99.32,2.30 L 100.63,3.37 L 101.70,4.68 L 102.55,6.30 L 103.19,8.29 L 103.64,10.86 L 103.91,14.49 L 104.00,26.00 L 104.00,78.00 L 104.00,78.00 L 103.91,89.51 L 103.64,93.14 L 103.19,95.71 L 102.55,97.70 L 101.70,99.32 L 100.63,100.63 L 99.32,101.70 L 97.70,102.55 L 95.71,103.19 L 93.14,103.64 L 89.51,103.91 L 78.00,104.00 L 26.00,104.00 L 26.00,104.00 L 14.49,103.91 L 10.86,103.64 L 8.29,103.19 L 6.30,102.55 L 4.68,101.70 L 3.37,100.63 L 2.30,99.32 L 1.45,97.70 L 0.81,95.71 L 0.36,93.14 L 0.09,89.51 L 0.00,78.00 Z' fill='%23000'/%3E%3C/svg%3E") 25% stretch;
  }

  /* --- 16px --- */
  .v2-pricing .v2-pricing-card,
  .v2-team .v2-team-photo,
  .v2-clinic .v2-clinic-cell,
  .v2-why .v2-why-card,
  .v2-svc .v2-svc-symptoms{
    border-radius:0;
    -webkit-mask-box-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cpath d='M 0,16.00 L 0.00,16.00 L 0.05,8.91 L 0.22,6.68 L 0.50,5.10 L 0.89,3.87 L 1.41,2.88 L 2.07,2.07 L 2.88,1.41 L 3.87,0.89 L 5.10,0.50 L 6.68,0.22 L 8.91,0.05 L 16.00,0.00 L 48.00,0 L 48.00,0.00 L 55.09,0.05 L 57.32,0.22 L 58.90,0.50 L 60.13,0.89 L 61.12,1.41 L 61.93,2.07 L 62.59,2.88 L 63.11,3.87 L 63.50,5.10 L 63.78,6.68 L 63.95,8.91 L 64.00,16.00 L 64.00,48.00 L 64.00,48.00 L 63.95,55.09 L 63.78,57.32 L 63.50,58.90 L 63.11,60.13 L 62.59,61.12 L 61.93,61.93 L 61.12,62.59 L 60.13,63.11 L 58.90,63.50 L 57.32,63.78 L 55.09,63.95 L 48.00,64.00 L 16.00,64.00 L 16.00,64.00 L 8.91,63.95 L 6.68,63.78 L 5.10,63.50 L 3.87,63.11 L 2.88,62.59 L 2.07,61.93 L 1.41,61.12 L 0.89,60.13 L 0.50,58.90 L 0.22,57.32 L 0.05,55.09 L 0.00,48.00 Z' fill='%23000'/%3E%3C/svg%3E") 25% stretch;
  }

  /* --- 14px --- */
  .v2-reviews .v2-rv-card{
    border-radius:0;
    -webkit-mask-box-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cpath d='M 0,14.00 L 0.00,14.00 L 0.05,7.80 L 0.19,5.85 L 0.44,4.47 L 0.78,3.39 L 1.24,2.52 L 1.81,1.81 L 2.52,1.24 L 3.39,0.78 L 4.47,0.44 L 5.85,0.19 L 7.80,0.05 L 14.00,0.00 L 42.00,0 L 42.00,0.00 L 48.20,0.05 L 50.15,0.19 L 51.53,0.44 L 52.61,0.78 L 53.48,1.24 L 54.19,1.81 L 54.76,2.52 L 55.22,3.39 L 55.56,4.47 L 55.81,5.85 L 55.95,7.80 L 56.00,14.00 L 56.00,42.00 L 56.00,42.00 L 55.95,48.20 L 55.81,50.15 L 55.56,51.53 L 55.22,52.61 L 54.76,53.48 L 54.19,54.19 L 53.48,54.76 L 52.61,55.22 L 51.53,55.56 L 50.15,55.81 L 48.20,55.95 L 42.00,56.00 L 14.00,56.00 L 14.00,56.00 L 7.80,55.95 L 5.85,55.81 L 4.47,55.56 L 3.39,55.22 L 2.52,54.76 L 1.81,54.19 L 1.24,53.48 L 0.78,52.61 L 0.44,51.53 L 0.19,50.15 L 0.05,48.20 L 0.00,42.00 Z' fill='%23000'/%3E%3C/svg%3E") 25% stretch;
  }

  /* --- 12px --- */
  .v2-header .v2-drop{
    border-radius:0;
    -webkit-mask-box-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M 0,12.00 L 0.00,12.00 L 0.04,6.69 L 0.17,5.01 L 0.37,3.83 L 0.67,2.91 L 1.06,2.16 L 1.55,1.55 L 2.16,1.06 L 2.91,0.67 L 3.83,0.37 L 5.01,0.17 L 6.69,0.04 L 12.00,0.00 L 36.00,0 L 36.00,0.00 L 41.31,0.04 L 42.99,0.17 L 44.17,0.37 L 45.09,0.67 L 45.84,1.06 L 46.45,1.55 L 46.94,2.16 L 47.33,2.91 L 47.63,3.83 L 47.83,5.01 L 47.96,6.69 L 48.00,12.00 L 48.00,36.00 L 48.00,36.00 L 47.96,41.31 L 47.83,42.99 L 47.63,44.17 L 47.33,45.09 L 46.94,45.84 L 46.45,46.45 L 45.84,46.94 L 45.09,47.33 L 44.17,47.63 L 42.99,47.83 L 41.31,47.96 L 36.00,48.00 L 12.00,48.00 L 12.00,48.00 L 6.69,47.96 L 5.01,47.83 L 3.83,47.63 L 2.91,47.33 L 2.16,46.94 L 1.55,46.45 L 1.06,45.84 L 0.67,45.09 L 0.37,44.17 L 0.17,42.99 L 0.04,41.31 L 0.00,36.00 Z' fill='%23000'/%3E%3C/svg%3E") 25% stretch;
  }

  /* --- 8px --- */
  .v2-header .v2-drop-item{
    border-radius:0;
    -webkit-mask-box-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M 0,8.00 L 0.00,8.00 L 0.03,4.46 L 0.11,3.34 L 0.25,2.55 L 0.45,1.94 L 0.71,1.44 L 1.04,1.04 L 1.44,0.71 L 1.94,0.45 L 2.55,0.25 L 3.34,0.11 L 4.46,0.03 L 8.00,0.00 L 24.00,0 L 24.00,0.00 L 27.54,0.03 L 28.66,0.11 L 29.45,0.25 L 30.06,0.45 L 30.56,0.71 L 30.96,1.04 L 31.29,1.44 L 31.55,1.94 L 31.75,2.55 L 31.89,3.34 L 31.97,4.46 L 32.00,8.00 L 32.00,24.00 L 32.00,24.00 L 31.97,27.54 L 31.89,28.66 L 31.75,29.45 L 31.55,30.06 L 31.29,30.56 L 30.96,30.96 L 30.56,31.29 L 30.06,31.55 L 29.45,31.75 L 28.66,31.89 L 27.54,31.97 L 24.00,32.00 L 8.00,32.00 L 8.00,32.00 L 4.46,31.97 L 3.34,31.89 L 2.55,31.75 L 1.94,31.55 L 1.44,31.29 L 1.04,30.96 L 0.71,30.56 L 0.45,30.06 L 0.25,29.45 L 0.11,28.66 L 0.03,27.54 L 0.00,24.00 Z' fill='%23000'/%3E%3C/svg%3E") 25% stretch;
  }

  /* --- bordered pills: ring tile via border-image --- */
  .sb .sb-btn.sb-btn--ghost{
    border-color:transparent;
    border-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='112' height='112' viewBox='0 0 112 112'%3E%3Cpath fill-rule='evenodd' fill='rgb(255,255,255)' fill-opacity='0.42' d='M 0,28.00 L 0.00,28.00 L 0.10,15.60 L 0.39,11.69 L 0.87,8.93 L 1.57,6.78 L 2.48,5.04 L 3.62,3.62 L 5.04,2.48 L 6.78,1.57 L 8.93,0.87 L 11.69,0.39 L 15.60,0.10 L 28.00,0.00 L 84.00,0 L 84.00,0.00 L 96.40,0.10 L 100.31,0.39 L 103.07,0.87 L 105.22,1.57 L 106.96,2.48 L 108.38,3.62 L 109.52,5.04 L 110.43,6.78 L 111.13,8.93 L 111.61,11.69 L 111.90,15.60 L 112.00,28.00 L 112.00,84.00 L 112.00,84.00 L 111.90,96.40 L 111.61,100.31 L 111.13,103.07 L 110.43,105.22 L 109.52,106.96 L 108.38,108.38 L 106.96,109.52 L 105.22,110.43 L 103.07,111.13 L 100.31,111.61 L 96.40,111.90 L 84.00,112.00 L 28.00,112.00 L 28.00,112.00 L 15.60,111.90 L 11.69,111.61 L 8.93,111.13 L 6.78,110.43 L 5.04,109.52 L 3.62,108.38 L 2.48,106.96 L 1.57,105.22 L 0.87,103.07 L 0.39,100.31 L 0.10,96.40 L 0.00,84.00 Z M 1.50,28.00 L 1.50,28.00 L 1.59,16.26 L 1.86,12.57 L 2.33,9.95 L 2.98,7.92 L 3.84,6.27 L 4.93,4.93 L 6.27,3.84 L 7.92,2.98 L 9.95,2.33 L 12.57,1.86 L 16.26,1.59 L 28.00,1.50 L 84.00,1.50 L 84.00,1.50 L 95.74,1.59 L 99.43,1.86 L 102.05,2.33 L 104.08,2.98 L 105.73,3.84 L 107.07,4.93 L 108.16,6.27 L 109.02,7.92 L 109.67,9.95 L 110.14,12.57 L 110.41,16.26 L 110.50,28.00 L 110.50,84.00 L 110.50,84.00 L 110.41,95.74 L 110.14,99.43 L 109.67,102.05 L 109.02,104.08 L 108.16,105.73 L 107.07,107.07 L 105.73,108.16 L 104.08,109.02 L 102.05,109.67 L 99.43,110.14 L 95.74,110.41 L 84.00,110.50 L 28.00,110.50 L 28.00,110.50 L 16.26,110.41 L 12.57,110.14 L 9.95,109.67 L 7.92,109.02 L 6.27,108.16 L 4.93,107.07 L 3.84,105.73 L 2.98,104.08 L 2.33,102.05 L 1.86,99.43 L 1.59,95.74 L 1.50,84.00 Z'/%3E%3C/svg%3E") 25% / 28px stretch;
  }

  .v2-header .v2-phone{
    border-color:transparent;
    border-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='112' height='112' viewBox='0 0 112 112'%3E%3Cpath fill-rule='evenodd' fill='rgb(0,46,66)' fill-opacity='0.22' d='M 0,28.00 L 0.00,28.00 L 0.10,15.60 L 0.39,11.69 L 0.87,8.93 L 1.57,6.78 L 2.48,5.04 L 3.62,3.62 L 5.04,2.48 L 6.78,1.57 L 8.93,0.87 L 11.69,0.39 L 15.60,0.10 L 28.00,0.00 L 84.00,0 L 84.00,0.00 L 96.40,0.10 L 100.31,0.39 L 103.07,0.87 L 105.22,1.57 L 106.96,2.48 L 108.38,3.62 L 109.52,5.04 L 110.43,6.78 L 111.13,8.93 L 111.61,11.69 L 111.90,15.60 L 112.00,28.00 L 112.00,84.00 L 112.00,84.00 L 111.90,96.40 L 111.61,100.31 L 111.13,103.07 L 110.43,105.22 L 109.52,106.96 L 108.38,108.38 L 106.96,109.52 L 105.22,110.43 L 103.07,111.13 L 100.31,111.61 L 96.40,111.90 L 84.00,112.00 L 28.00,112.00 L 28.00,112.00 L 15.60,111.90 L 11.69,111.61 L 8.93,111.13 L 6.78,110.43 L 5.04,109.52 L 3.62,108.38 L 2.48,106.96 L 1.57,105.22 L 0.87,103.07 L 0.39,100.31 L 0.10,96.40 L 0.00,84.00 Z M 1.00,28.00 L 1.00,28.00 L 1.09,16.04 L 1.37,12.28 L 1.84,9.61 L 2.51,7.54 L 3.39,5.86 L 4.50,4.50 L 5.86,3.39 L 7.54,2.51 L 9.61,1.84 L 12.28,1.37 L 16.04,1.09 L 28.00,1.00 L 84.00,1.00 L 84.00,1.00 L 95.96,1.09 L 99.72,1.37 L 102.39,1.84 L 104.46,2.51 L 106.14,3.39 L 107.50,4.50 L 108.61,5.86 L 109.49,7.54 L 110.16,9.61 L 110.63,12.28 L 110.91,16.04 L 111.00,28.00 L 111.00,84.00 L 111.00,84.00 L 110.91,95.96 L 110.63,99.72 L 110.16,102.39 L 109.49,104.46 L 108.61,106.14 L 107.50,107.50 L 106.14,108.61 L 104.46,109.49 L 102.39,110.16 L 99.72,110.63 L 95.96,110.91 L 84.00,111.00 L 28.00,111.00 L 28.00,111.00 L 16.04,110.91 L 12.28,110.63 L 9.61,110.16 L 7.54,109.49 L 5.86,108.61 L 4.50,107.50 L 3.39,106.14 L 2.51,104.46 L 1.84,102.39 L 1.37,99.72 L 1.09,95.96 L 1.00,84.00 Z'/%3E%3C/svg%3E") 25% / 28px stretch;
  }

  .v2-cta .v2-cta-btn.v2-cta-btn--ghost{
    border-color:transparent;
    border-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='112' height='112' viewBox='0 0 112 112'%3E%3Cpath fill-rule='evenodd' fill='rgb(251,246,239)' fill-opacity='0.42' d='M 0,28.00 L 0.00,28.00 L 0.10,15.60 L 0.39,11.69 L 0.87,8.93 L 1.57,6.78 L 2.48,5.04 L 3.62,3.62 L 5.04,2.48 L 6.78,1.57 L 8.93,0.87 L 11.69,0.39 L 15.60,0.10 L 28.00,0.00 L 84.00,0 L 84.00,0.00 L 96.40,0.10 L 100.31,0.39 L 103.07,0.87 L 105.22,1.57 L 106.96,2.48 L 108.38,3.62 L 109.52,5.04 L 110.43,6.78 L 111.13,8.93 L 111.61,11.69 L 111.90,15.60 L 112.00,28.00 L 112.00,84.00 L 112.00,84.00 L 111.90,96.40 L 111.61,100.31 L 111.13,103.07 L 110.43,105.22 L 109.52,106.96 L 108.38,108.38 L 106.96,109.52 L 105.22,110.43 L 103.07,111.13 L 100.31,111.61 L 96.40,111.90 L 84.00,112.00 L 28.00,112.00 L 28.00,112.00 L 15.60,111.90 L 11.69,111.61 L 8.93,111.13 L 6.78,110.43 L 5.04,109.52 L 3.62,108.38 L 2.48,106.96 L 1.57,105.22 L 0.87,103.07 L 0.39,100.31 L 0.10,96.40 L 0.00,84.00 Z M 1.50,28.00 L 1.50,28.00 L 1.59,16.26 L 1.86,12.57 L 2.33,9.95 L 2.98,7.92 L 3.84,6.27 L 4.93,4.93 L 6.27,3.84 L 7.92,2.98 L 9.95,2.33 L 12.57,1.86 L 16.26,1.59 L 28.00,1.50 L 84.00,1.50 L 84.00,1.50 L 95.74,1.59 L 99.43,1.86 L 102.05,2.33 L 104.08,2.98 L 105.73,3.84 L 107.07,4.93 L 108.16,6.27 L 109.02,7.92 L 109.67,9.95 L 110.14,12.57 L 110.41,16.26 L 110.50,28.00 L 110.50,84.00 L 110.50,84.00 L 110.41,95.74 L 110.14,99.43 L 109.67,102.05 L 109.02,104.08 L 108.16,105.73 L 107.07,107.07 L 105.73,108.16 L 104.08,109.02 L 102.05,109.67 L 99.43,110.14 L 95.74,110.41 L 84.00,110.50 L 28.00,110.50 L 28.00,110.50 L 16.26,110.41 L 12.57,110.14 L 9.95,109.67 L 7.92,109.02 L 6.27,108.16 L 4.93,107.07 L 3.84,105.73 L 2.98,104.08 L 2.33,102.05 L 1.86,99.43 L 1.59,95.74 L 1.50,84.00 Z'/%3E%3C/svg%3E") 25% / 28px stretch;
  }

  .v2-cta .v2-cta-btn.v2-cta-btn--ghost:hover{
    border-color:transparent;
    border-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='112' height='112' viewBox='0 0 112 112'%3E%3Cpath fill-rule='evenodd' fill='rgb(251,246,239)' fill-opacity='0.75' d='M 0,28.00 L 0.00,28.00 L 0.10,15.60 L 0.39,11.69 L 0.87,8.93 L 1.57,6.78 L 2.48,5.04 L 3.62,3.62 L 5.04,2.48 L 6.78,1.57 L 8.93,0.87 L 11.69,0.39 L 15.60,0.10 L 28.00,0.00 L 84.00,0 L 84.00,0.00 L 96.40,0.10 L 100.31,0.39 L 103.07,0.87 L 105.22,1.57 L 106.96,2.48 L 108.38,3.62 L 109.52,5.04 L 110.43,6.78 L 111.13,8.93 L 111.61,11.69 L 111.90,15.60 L 112.00,28.00 L 112.00,84.00 L 112.00,84.00 L 111.90,96.40 L 111.61,100.31 L 111.13,103.07 L 110.43,105.22 L 109.52,106.96 L 108.38,108.38 L 106.96,109.52 L 105.22,110.43 L 103.07,111.13 L 100.31,111.61 L 96.40,111.90 L 84.00,112.00 L 28.00,112.00 L 28.00,112.00 L 15.60,111.90 L 11.69,111.61 L 8.93,111.13 L 6.78,110.43 L 5.04,109.52 L 3.62,108.38 L 2.48,106.96 L 1.57,105.22 L 0.87,103.07 L 0.39,100.31 L 0.10,96.40 L 0.00,84.00 Z M 1.50,28.00 L 1.50,28.00 L 1.59,16.26 L 1.86,12.57 L 2.33,9.95 L 2.98,7.92 L 3.84,6.27 L 4.93,4.93 L 6.27,3.84 L 7.92,2.98 L 9.95,2.33 L 12.57,1.86 L 16.26,1.59 L 28.00,1.50 L 84.00,1.50 L 84.00,1.50 L 95.74,1.59 L 99.43,1.86 L 102.05,2.33 L 104.08,2.98 L 105.73,3.84 L 107.07,4.93 L 108.16,6.27 L 109.02,7.92 L 109.67,9.95 L 110.14,12.57 L 110.41,16.26 L 110.50,28.00 L 110.50,84.00 L 110.50,84.00 L 110.41,95.74 L 110.14,99.43 L 109.67,102.05 L 109.02,104.08 L 108.16,105.73 L 107.07,107.07 L 105.73,108.16 L 104.08,109.02 L 102.05,109.67 L 99.43,110.14 L 95.74,110.41 L 84.00,110.50 L 28.00,110.50 L 28.00,110.50 L 16.26,110.41 L 12.57,110.14 L 9.95,109.67 L 7.92,109.02 L 6.27,108.16 L 4.93,107.07 L 3.84,105.73 L 2.98,104.08 L 2.33,102.05 L 1.86,99.43 L 1.59,95.74 L 1.50,84.00 Z'/%3E%3C/svg%3E") 25% / 28px stretch;
  }

  /* Masks clip box-shadow, so the shadowed elements restate their
     shadow as a filter, which follows the masked silhouette. The hero
     CTA's two-layer shadow flattens to one drop-shadow: filter takes a
     single shadow, and stacking two filters doubles the blur cost for
     a difference nobody can see at this size. */
  .kx-hero .kx-cta{
    box-shadow:none;
    filter:drop-shadow(0 8px 20px rgba(0,46,66,0.22));
  }
  .kx-hero .kx-cta:hover{
    box-shadow:none;
    filter:drop-shadow(0 14px 28px rgba(0,46,66,0.26));
  }
  .v2-header .v2-drop{
    box-shadow:none;
    filter:drop-shadow(0 8px 24px rgba(0,46,66,0.12));
  }
  .v2-pricing .v2-pricing-card:hover{
    box-shadow:none;
    filter:drop-shadow(0 2px 12px rgba(0,46,66,0.07));
  }
  .v2-reviews .v2-rv-card:hover{
    box-shadow:none;
    filter:drop-shadow(0 6px 16px rgba(0,0,0,0.10));
  }
  .v2-cta .v2-cta-btn:hover,
  .bs .bs-call:hover{
    box-shadow:none;
    filter:drop-shadow(0 10px 24px rgba(26,16,10,0.20));
  }
  .sb .sb-btn:hover{
    box-shadow:none;
    filter:drop-shadow(0 10px 24px rgba(0,0,0,0.18));
  }
}

/* ============================================================
   WARM PAPER — the site's background system.

   One warm neutral ramp (bone -> biscuit) for the whole page, with
   exactly one dark block: the reviews section, in espresso.

   Replaces three separate problems in the previous design:
     - a pale-blue hero that was the only cool surface on the page,
       so it read as an island rather than the top of a document
     - two Elementor sections carrying photographic "texture"
       overlays that were photos OF a dotted surface, complete with
       perspective distortion and uneven lighting
     - a bottom that ran navy reviews -> textured help -> dark teal
       contact form -> footer, i.e. three heavy blocks in a row, so
       none of them landed

   Grounds alternate lift/settle so no two adjacent sections share a
   value. Contrast was measured, not estimated; the notes inline
   record the failures that were found and fixed.

   Elementor wrapper prefixes below are VERIFIED against index.html:
   generations and help are .elementor-2, the contact form is
   .elementor-11, and the footer is matched on
   footer.elementor-location-footer. The id 557b973 that looks like
   the footer is actually inside a popup template - styling it does
   nothing at all.
   ============================================================ */

/* THE RAMP. Nine warm neutrals, bone through biscuit. Every ground
   on the page is one of these; nothing is invented locally. */
:root{
  --p-00:#FDFAF6;   /* bone       L* 98.4 */
  --p-05:#FAF5EE;   /* paper      L* 96.7 */
  --p-10:#F5EDE2;   /* parchment  L* 94.1 */
  --p-20:#F0E5D7;   /* sand       L* 91.4 */
  --p-30:#E9DBC9;   /* clay-pale  L* 88.1 */
  --p-40:#DFCDB6;   /* biscuit    L* 83.3 */
  --w-rule:#E6D9C8;
  --w-rule-firm:#D8C6B2;
  --ink:#2E1F18;    /* espresso, the warm dark */
  --ink-deep:#1E140F;

  /* The type stacks were only ever declared inside section-scoped
     blocks, so any new section silently fell back to the browser
     default. They belong here; the local copies are harmless. */
  --serif:"Clearface", Georgia, "Times New Roman", serif;
  --sans:"trade-gothic-next", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* ONE CONTAINER. Every section's inner column is this width, so
     every left edge down the page lands on the same pixel. The page
     previously ran four widths - 1080/1100/1140/1160 - which put a
     40px wobble in the left margin that reads as carelessness long
     before anyone works out what is causing it. */

  /* Same problem as the type stacks: the colour tokens were only ever
     section-scoped, so a new section referencing var(--teal) got an
     invalid value and inherited instead - the .v2-cta eyebrow measured
     1.09:1 because of exactly that. */
  --navy:#2E1F18;
  --teal:#6E5747;
  --teal-soft:#5A4A3E;

  --wrap:1120px;
}

/* ============================================================
   ONE TEMPERATURE.
   The warm rebuild converted the grounds and the hero's type but
   stopped there: every heading below the hero was still #002E42
   (hue 198, a cold petrol blue) and every paragraph #457373 (hue
   180, teal), sitting on cream. Warm ground with cool type is the
   one neutral pairing that reads as unfinished rather than as a
   choice - and the teal was measuring 4.27:1 on the blue card
   tint, so it was failing anyway.

   --navy is now the hero's own espresso, so a heading is the same
   colour wherever it appears. --teal-soft becomes a warm mid at
   L*33, worst case 6.8:1. The names are kept because they are
   referenced in 40-odd places; only the values move.

   The per-card brand hues in .ve-why and the pricing rails are
   left alone. Those are accents - small, deliberate, and carrying
   meaning - which is the one job colour should still be doing.
   ============================================================ */

/* ============================================================
   1 · NAV — one state.
   With a light hero the nav no longer needs to dissolve and return;
   it is the parchment bar throughout, one rung below the hero's
   brightest core so it always separates from what scrolls under it.
   ============================================================ */
.v2-header{
  background:rgba(250,245,238,0.94);
  backdrop-filter:saturate(1.4) blur(12px);
  border-bottom:1px solid var(--w-rule);
}
.v2-header .v2-link,
.v2-header .v2-wordmark-main{ color:#2E1F18; }
.v2-header .v2-wordmark-sub{ color:#6B5A4E; }
.v2-header .v2-link:hover{ color:#8A3E0C; }
.v2-header .v2-phone{
  color:#2E1F18; border-color:rgba(46,31,24,0.22);
}
.v2-header .v2-book{ background:#2E1F18; color:#FBF6EF; }

/* ============================================================
   2 · HERO — light warm.
   Same radial geometry as the original so the dot field's tuning
   survives untouched. The edge lands on #F5EDE2: measured against
   all seven brand dots, that is the ONLY warm edge where nothing
   drops below 1.6:1. Amber is the binding constraint at 1.64:1 -
   and it already sat at 1.55:1 on the old blue ground, so the warm
   hero is a small improvement rather than a compromise.
   ============================================================ */
.kx-hero{
  background:radial-gradient(118% 92% at 50% 44%,
    #FFFFFF 0%, #FEFCF8 30%, #FAF4EA 66%, #F5EDE2 100%);
}
/* The lens stays white - it is back on a light ground doing the job
   it was designed for. Only its faint blue cast is corrected so it
   does not fight the warm ramp. */
.kx-hero .kx-lens{
  background:radial-gradient(closest-side ellipse at 50% 50%,
    rgba(255,253,249,0.96) 0%,
    rgba(255,253,249,0.92) 26%,
    rgba(253,248,241,0.72) 42%,
    rgba(251,244,234,0.34) 58%,
    rgba(250,242,231,0.10) 76%,
    rgba(250,242,231,0) 100%);
}
/* Espresso rather than navy, so the headline belongs to the warm
   system instead of pointing back at the old cool one. 13.4:1. */
.kx-hero .kx-h1{ color:#2E1F18; }
.kx-hero .kx-eyebrow{ color:var(--teal); }
.kx-hero .kx-list li{ color:#4A3C31; }
.kx-hero .kx-cta{
  background:#2E1F18; color:#FBF6EF;
  box-shadow:0 10px 26px rgba(46,31,24,0.20), 0 2px 6px rgba(46,31,24,0.14);
}
.kx-hero .kx-cta:hover{ background:#432E23; }

/* ============================================================
   3-14 · THE LIGHT PAGE.
   Alternating lift / settle so no two neighbours share a value.
   ============================================================ */
.v2-trust{
  background:var(--p-20);                   /* settle - a printed rule with content in it */
  border-top:1px solid #DFD0BC; border-bottom:1px solid #DFD0BC;
}
/* PEOPLE SECTIONS sit a step deeper than the rest of the light page.
   Wendy is a cutout, so this ground is literally her backdrop: her
   skin is L*46 and her hair and vest L*4, so separation is never in
   question, but the matte's soft edge carries a neutral L*64 grey.
   Halo visibility tracks the gap to the ground - 34.4 on p-00, 27.4
   here - so the brightest ground was maximising the one artefact
   while buying no clarity that p-20 does not already give. */
.v2-svc--exam{ background:var(--p-20); }   /* backdrop for a cutout portrait */
.v2-svc--vs{                               /* settle */
  background:var(--p-10);
}
/* No rule between eye examinations and visual stress: the two
   sections now sit on different grounds, and a hairline on top of a
   tone change reads as a stray line rather than a separator. */
.v2-svc--vs .v2-svc-inner{
  border-top:0;
}
.v2-pricing{ background:var(--p-20); }     /* deepest light - cards lift off it */
/* Three framed photographs, backdrops L*53-61, one of them green-cast.
   A deeper warm mount harmonises with them and stops the cards
   floating on paper-white. */
.v2-team{ background:var(--p-30); }        /* mount board for three portraits */
.ve-why{ background:var(--p-10); }         /* settle - pastel cards lift off it */
.v2-clinic{ background:var(--p-20); }      /* settle deeper - mount board for photos */
/* Reviews was the old dark block. The hero has taken that job, so it
   becomes the deepest light ground and the white cards lift off it. */
/* Reviews is the page's one dark block, in a deep forest green-grey.
   Green rather than the brand navy because the page is fully warm and
   a cool navy reads as a component from the old scheme; forest is dark
   without being brown, and sits warm-adjacent so it still belongs.

   It also does structural work: reviews and the contact form below it
   would otherwise both be clay, and their seam would disappear. */
.v2-reviews{
  background:linear-gradient(178deg, #24382C 0%, #1A2B21 100%);
  color:#F2EDE3;
}
.v2-reviews .v2-rv-eyebrow{ color:#A8BFA8; }
.v2-reviews .v2-rv-text{ color:#F2EDE3; }
.v2-reviews .v2-rv-author{ color:#C6D3C2; }
.v2-reviews .v2-rv-card{
  background:#FFFDF9; border:1px solid rgba(216,198,178,0.26);
}
.v2-reviews .v2-rv-all a{ color:#F2EDE3; }
.v2-reviews::before{
  background:
    radial-gradient(62% 48% at 8% 4%,  rgba(201,84,18,0.22), transparent 68%),
    radial-gradient(58% 46% at 94% 96%, rgba(150,116,60,0.18), transparent 68%);
  opacity:.34;
}
/* Amber returns now the ground is dark - 8.7:1 on forest. */
.v2-reviews .v2-rv-btn{ background:#F2B01E; color:#1A2B21; }

/* ---- Elementor. Wrapper prefixes VERIFIED against index.html:
   generations = .elementor-2, help = .elementor-2,
   contact = .elementor-11, footer = .elementor-11 (location-footer).
   557b973 is inside a POPUP template, not the footer - styling it
   would have silently done nothing. ---- */

/* 4 · Generations — kill the photographic texture. */
.elementor-2 .elementor-element.elementor-element-9d8638f{
  background-color:#F5EDE2 !important;
  background-image:none !important;
  border-width:0 !important;
  border-color:#E6D9C8 !important;
}
.elementor-2 .elementor-element.elementor-element-9d8638f > .elementor-background-overlay{
  background-image:none !important; background:none !important; opacity:0 !important;
}

/* 12 · How can we help — texture out, sand in, cards lifted. */
.elementor-2 .elementor-element.elementor-element-b0a3bf1{
  background-color:var(--p-20) !important;
  background-image:none !important;
  border-width:0 !important;
}
.elementor-2 .elementor-element.elementor-element-b0a3bf1 > .elementor-background-overlay{
  background-image:none !important; background:none !important; opacity:0 !important;
}

/* 13 · Get in touch — STOPS BEING DARK.
   A contact form is the highest-friction element on the site: seven
   inputs, each needing a visible boundary, a readable label and an
   error state. Dark grounds make all of those harder. All four specs
   independently said this should be light. */
.elementor-11 .elementor-element.elementor-element-32f02ca{
  background-color:var(--p-30) !important;
  background-image:none !important;
  border-top:1px solid #DCCBB4 !important;
}
.elementor-11 .elementor-element.elementor-element-32f02ca,
.elementor-11 .elementor-element.elementor-element-32f02ca h1,
.elementor-11 .elementor-element.elementor-element-32f02ca h2,
.elementor-11 .elementor-element.elementor-element-32f02ca h3,
.elementor-11 .elementor-element.elementor-element-32f02ca p,
.elementor-11 .elementor-element.elementor-element-32f02ca label,
.elementor-11 .elementor-element.elementor-element-32f02ca .elementor-heading-title{
  color:#2E1F18 !important;                                  /* 11.6:1 */
}
.elementor-11 .elementor-element.elementor-element-32f02ca input:not([type="submit"]),
.elementor-11 .elementor-element.elementor-element-32f02ca textarea,
.elementor-11 .elementor-element.elementor-element-32f02ca select{
  background:#FFFDF9 !important; border:1px solid #D2BDA2 !important; color:#2E1F18 !important;
}
.elementor-11 .elementor-element.elementor-element-32f02ca input[type="submit"],
.elementor-11 .elementor-element.elementor-element-32f02ca button[type="submit"]{
  background:#2E1F18 !important; color:#FBF6EF !important; border:0 !important;
}

/* 14 · Footer — biscuit. The ramp bottoms out, closing the page
   with weight instead of a second dark block. */
/* The Elementor footer was replaced by .v2-foot; its overrides
   are gone with it. */


/* ---- Owner portrait ----
   This was a background-removed cut-out until 2026-09-10, when it was
   replaced with the un-cut frame (DSC05559 - she is standing in front
   of the reception logo sign, so the background is brand, not clutter).
   A cut-out floats on the ground and needs no edge; a real photograph
   does, or it reads as a raw rectangle dropped on the parchment. So it
   takes the SAME mount as .bs-photo one section below - 18px radius,
   p-20 behind, the same soft drop - which is what makes the two
   photographs on this page read as one pair of prints rather than two
   unrelated images.

   The former cut-out notes, kept because they still describe the
   ground: there was a white radial pool here, added when this section
   was paper-white, on the reasoning that a warm ground casts sallow on
   skin. At this chroma it does not: sand is L*91.4 / chroma 8.3, which
   is a standard portrait seamless (#EDE3D6 is 90.7 / 7.6), and her
   skin is chroma 21.4 - nearly 3x the ground, so the face stays the
   most saturated thing in the frame. */
.v2-svc .v2-svc-photo{
  border-radius:18px; overflow:hidden;
  background:var(--p-20);
  box-shadow:0 18px 44px rgba(46,31,24,.12);
}
.v2-team .v2-team-photo--cutout{
  background:linear-gradient(172deg, #FFFFFF 0%, #FDFAF5 56%, #F3EBDF 100%);
}
/* The three photographic tiles get the same edge so all four read as
   one set of mounted prints - which is what stops her cut-out looking
   like the odd one out. */
.v2-team .v2-team-photo{ border:1px solid #E6D9C8; }

/* Body copy that lands under AA on the deeper warm grounds.
   Measured: #457373 on sand #F0E5D7 is 4.27:1 - a real failure, and
   it was present in the spec this section came from. */
.v2-pricing p,
.v2-pricing .v2-pricing-note{ color:#3C6262; }   /* 5.0:1 */

/* ============================================================
   VERTICAL RHYTHM

   Before this, every section carried its own padding formula -
   five different ones, plus a !important patch on .v2-clinic
   whose own comment recorded that two sections were stacking to
   ~176px of dead space. Because a boundary's gap is the SUM of
   one section's bottom padding and the next one's top, five
   formulas produced gaps ranging from 122px to 176px with no
   pattern behind the variation.

   One scale now governs all of it:

     --sec-y      the standard band, top and bottom
     --sec-y-tight   for a section that is a single strip
     --sec-y-loose   for the two sections that carry the most air

   A boundary between two standard sections is therefore always
   2 x --sec-y, and every boundary on the page is predictable.
   Sections whose neighbours share a ground get the loose value,
   because when the seam is not carrying the separation the space
   has to.
   ============================================================ */
:root{
  --sec-y:clamp(56px,6.2vw,84px);
  --sec-y-tight:clamp(18px,2vw,26px);
  --sec-y-loose:clamp(72px,7.6vw,104px);
  --sec-x:24px;
}

/* The strip is a rule with content in it, not a section. */
.v2-trust{ padding:var(--sec-y-tight) var(--sec-x); }

/* Standard band. */
.v2-svc--exam,
.v2-svc--vs,
.v2-pricing,
.v2-team,
.v2-clinic,
.v2-reviews{
  padding-top:var(--sec-y);
  padding-bottom:var(--sec-y);
  padding-left:var(--sec-x);
  padding-right:var(--sec-x);
}

/* Why-choose-us is the tallest section on the page and its six
   cards need room to breathe away from the sign-off bar. */
.ve-why{
  padding-top:var(--sec-y-loose);
  padding-bottom:var(--sec-y-loose);
  padding-left:var(--sec-x);
  padding-right:var(--sec-x);
}

/* Eye examinations and visual stress are siblings sharing a
   subject, so they sit closer together than two unrelated
   sections: the exam's bottom and the visual stress top are each
   trimmed, giving a boundary of ~2/3 the standard gap. The
   inset rule inside .v2-svc--vs does the separating instead. */
.v2-svc--exam{ padding-bottom:calc(var(--sec-y) * 0.62); }
.v2-svc--vs{ padding-top:calc(var(--sec-y) * 0.62); }

/* The Elementor sections carry their own generous padding from
   the page builder (80px each side). Left alone they are close
   enough to the scale to read as part of it; forcing them to
   match exactly would mean fighting inline builder styles for a
   difference of a few pixels. */


/* ============================================================
   COOL-SCHEME LEFTOVERS
   Elements that carried colours from the previous palette and
   would otherwise sit as foreign objects on the warm ground.
   ============================================================ */
/* ---- Cool-scheme leftovers inside .ve-why ----
   The section carries orange/teal corner washes and a navy CTA, both
   from the previous palette. On a warm ground the teal wash reads as
   a green stain in the corner and the navy pill as a foreign object. */
.ve-why::before{
  background:
    radial-gradient(58% 46% at 6% 0%,  rgba(201,84,18,0.055), transparent 70%),
    radial-gradient(58% 46% at 96% 4%, rgba(150,116,60,0.05), transparent 70%);
}
.ve-why .ve-signoff{ background:var(--p-00); border-color:#E3D5C2; }
.ve-why .ve-signoff .ve-cta{ background:#2E1F18; color:#FBF6EF; }

/* Pricing card rails and the HICAPS pill keep their brand colours -
   they are the page's remaining chroma and the warm ground was chosen
   not to fight them. But the cards themselves lift to bone so they
   read as objects on sand. */
.v2-pricing .v2-pricing-card{
  background:#FFFDF9; border-color:#E0D0BB;
}

/* Trust strip and clinic cells inherit parchment values that now sit
   too close to their grounds. */
.v2-clinic .v2-clinic-cell{ background:#FDFAF6; }

/* Reviews is dark again, so the prompt is light-on-dark. */
.v2-reviews .v2-rv-leave p{ color:#C6D3C2; }      /* 9.4:1 on forest */
/* Card interiors stay light - the cards are bone on espresso - so
   their copy is espresso, not the old cool-scheme teal. */
.v2-reviews .v2-rv-card p,
.v2-reviews .v2-rv-card .v2-rv-body{ color:#3F3229; }
.v2-reviews .v2-rv-when{ color:#6B5A4E; }
/* Amber on espresso is 8.3:1 and is the only high-chroma warm thing
   on a dark ground, so the button keeps it and stops competing with
   the hero CTA, which is now espresso rather than amber. */
.v2-reviews .v2-rv-btn{ background:#F2B01E; color:#241811; }

/* The contact section kept a navy bottom border from the previous
   palette - a hard cool line across the foot of a warm page. */
.elementor-11 .elementor-element.elementor-element-32f02ca{
  /* It also carried 1px navy borders down BOTH sides - a cool hairline
     the full height of the section, which is the blue line running
     beside the form. */
  border-bottom-width:0 !important;
  border-left-width:0 !important;
  border-right-width:0 !important;
}

/* ============================================================
   EXAM ROOM BAND
   A full-bleed letterbox photograph of an examination in progress.
   It sits between visual stress and the team, where the page has
   run through four text-and-card sections and needs a breath.

   Full-bleed and no padding on purpose: every other section on the
   page is a boxed 1080px column, so a photograph that runs edge to
   edge is the one moment the rhythm breaks - which is what makes it
   read as a pause rather than another section.
   ============================================================ */
.v2-exambar{
  padding:0;
  background:var(--p-20);
  line-height:0;            /* kills the inline-image descender gap */
}
.v2-exambar-figure{
  margin:0;
  width:100%;
}
.v2-exambar-figure img{
  display:block;
  width:100%;
  height:auto;
  /* The source is cropped to 21:9. Capping the height stops the band
     dominating on very wide monitors, where a full-width 21:9 image
     would be over 600px tall. */
  max-height:clamp(240px, 34vw, 460px);
  object-fit:cover;
  object-position:50% 42%;  /* both faces sit above centre */
}
@media (max-width:700px){
  .v2-exambar-figure img{
    /* On a phone a 21:9 strip is only ~90px tall and the faces become
       unreadable, so the crop tightens toward a 3:2 window. */
    aspect-ratio:3/2;
    max-height:none;
    object-position:50% 38%;
  }
}

/* ---- Fixes ---- */

/* Generations: Elementor draws a 1px navy box around the section and
   its inner column, which showed as a hard vertical line between the
   copy and the photograph. */
.elementor-2 .elementor-element.elementor-element-9d8638f .elementor-widget-wrap,
.elementor-2 .elementor-element.elementor-element-9d8638f .elementor-column,
.elementor-2 .elementor-element.elementor-element-9d8638f .elementor-element-populated{
  border-width:0 !important;
}

/* Reviews: the Google rating strip carried a top rule and a block of
   empty space above the cards. The section's own padding is the gap. */
.v2-reviews .v2-rv-google{
  border-top:0;
  padding-top:0;
  margin-top:0;
}

/* Stars are gold. The warm card-text override above was catching them
   and painting them espresso. */
/* The stars sit on a bone card, not on the forest ground, where bright
   amber measured 1.88:1 - the rating was the least legible thing in the
   card it was rating. This is the deepest gold that still reads as gold
   and clears the 3:1 floor for a graphic that carries meaning. */
.v2-reviews .v2-rv-card .v2-rv-stars,
.v2-reviews .v2-rv-stars{ color:#C0880B; }
/* One unclassed Elementor wrapper still carried the navy box border. */
.elementor-2 .elementor-element.elementor-element-9d8638f *{
  border-left-width:0 !important;
  border-right-width:0 !important;
}

/* Wendy is introduced in full in the eye examinations section above,
   so the grid holds the three people the visitor has not met yet.
   Three columns, capped so the cards do not stretch to fill a
   four-column measure. */
.v2-team .v2-team-grid{
  grid-template-columns:repeat(3, 1fr);
  max-width:860px;
  margin-inline:auto;
}

/* ============================================================
   CONTACT FORM
   The ground was warmed but the form itself was left on the old
   scheme. The serious defect: input text computed to #FFFFFF on a
   #FFFDF9 field - roughly 1.01:1 - so anything typed was invisible.
   WPForms' own stylesheet was overriding the earlier fix, hence the
   higher-specificity selectors and !important here.
   ============================================================ */
.elementor-11 .elementor-element.elementor-element-32f02ca .wpforms-container input:not([type="submit"]),
.elementor-11 .elementor-element.elementor-element-32f02ca .wpforms-container textarea,
.elementor-11 .elementor-element.elementor-element-32f02ca .wpforms-container select,
.elementor-11 .elementor-element.elementor-element-32f02ca .wpforms-field-large{
  background:#FFFDF9 !important;
  border:1px solid #D2BDA2 !important;
  border-radius:10px !important;
  color:#2E1F18 !important;              /* 11.6:1 - was white on white */
  font-size:16px !important;             /* 16px stops iOS zooming on focus */
  text-transform:none !important;        /* was uppercase, which fights typed input */
  padding:13px 15px !important;
  transition:border-color .16s, box-shadow .16s;
}
.elementor-11 .elementor-element.elementor-element-32f02ca .wpforms-container input:focus,
.elementor-11 .elementor-element.elementor-element-32f02ca .wpforms-container textarea:focus{
  border-color:#8A6A4A !important;
  box-shadow:0 0 0 3px rgba(138,106,74,0.14) !important;
  outline:none !important;
}
/* Placeholders were near-invisible. #7A6A5C is 4.6:1 on the field. */
.elementor-11 .elementor-element.elementor-element-32f02ca .wpforms-container input::placeholder,
.elementor-11 .elementor-element.elementor-element-32f02ca .wpforms-container textarea::placeholder{
  color:#7A6A5C !important;
  text-transform:none !important;
  opacity:1 !important;
}
/* The heading was all-caps, which no other heading on the site is. */
.elementor-11 .elementor-element.elementor-element-32f02ca .elementor-heading-title{
  text-transform:none !important;
  font-weight:400 !important;
  letter-spacing:-0.01em !important;
}
.elementor-11 .elementor-element.elementor-element-32f02ca .wpforms-field-label{
  color:#2E1F18 !important;
  font-weight:600 !important;
}
/* The submit button matches the site's pill CTAs rather than sitting
   as a 3px-radius rectangle. */
.elementor-11 .elementor-element.elementor-element-32f02ca .wpforms-container button[type="submit"],
.elementor-11 .elementor-element.elementor-element-32f02ca .wpforms-container input[type="submit"]{
  background:#2E1F18 !important;
  color:#FBF6EF !important;
  border:0 !important;
  border-radius:999px !important;
  padding:15px 34px !important;
  font-weight:600 !important;
  letter-spacing:0.02em !important;
  transition:background-color .16s;
}
.elementor-11 .elementor-element.elementor-element-32f02ca .wpforms-container button[type="submit"]:hover{
  background:#432E23 !important;
}



/* ============================================================
   FOOTER
   Rebuilt from scratch. The Elementor original was 19.5KB of
   nested wrappers carrying a hidden duplicate mobile menu, hard
   cell borders that made it read as a table, links at 700 weight
   competing with their own headings, and an email that overlapped
   the address because the columns had no gutter.

   This is 3.2KB of plain markup: a brand block and four columns,
   then a legal line. Same links, minus the duplicates.
   ============================================================ */
.v2-foot{
  background:var(--p-40);
  border-top:1px solid #D2BDA2;
  padding:var(--sec-y) var(--sec-x) clamp(26px,3vw,38px);
  font-family:var(--sans);
  color:#463227;
}
.v2-foot *{ box-sizing:border-box; }
.v2-foot-inner{ max-width:var(--wrap); margin:0 auto; }

.v2-foot-top{
  display:grid;
  grid-template-columns:1.35fr .92fr .92fr .92fr 1.6fr;
  gap:clamp(24px,3vw,44px);
  align-items:start;
}

/* ---- brand ---- */
.v2-foot-logo{
  display:inline-flex; align-items:center; gap:12px;
  text-decoration:none; margin-bottom:14px;
}
.v2-foot-logo img{ width:52px; height:52px; display:block; }
.v2-foot-word-main{
  display:block;
  font-family:var(--serif);
  font-size:21px; line-height:1;
  letter-spacing:0.04em;
  color:#2E1F18;
}
.v2-foot-word-sub{
  display:block; margin-top:3px;
  font-size:10px; font-weight:600;
  letter-spacing:0.22em; text-transform:uppercase;
  color:#645449;                 /* 4.65:1 on biscuit; was 4.24:1 */
}
.v2-foot-blurb{
  margin:0 0 18px;
  font-size:14px; line-height:1.5;
  color:#5A4A3E;
  max-width:26ch;
}
.v2-foot-book{
  display:inline-block;
  background:#2E1F18; color:#FBF6EF;
  font-size:13.5px; font-weight:600;
  padding:11px 20px; border-radius:999px;
  text-decoration:none;
  transition:background-color .16s;
}
.v2-foot-book:hover{ background:#432E23; }

/* ---- link columns ---- */
.v2-foot-h{
  margin:0 0 12px;
  font-family:var(--sans);
  font-size:11px; font-weight:600;
  letter-spacing:0.16em; text-transform:uppercase;
  color:#625549;                 /* 4.65:1 on biscuit; was 2.76:1 - the worst text on the page */
}
.v2-foot-col ul{ list-style:none; margin:0; padding:0; }
.v2-foot-col li + li{ margin-top:9px; }
.v2-foot-col a{
  font-size:14.5px; line-height:1.4;
  color:#463227; text-decoration:none;
  border-bottom:1px solid transparent;
  transition:border-color .16s, color .16s;
}
.v2-foot-col a:hover{ color:#2E1F18; border-bottom-color:#2E1F18; }

/* ---- contact ---- */
.v2-foot-contact address{ font-style:normal; }
.v2-foot-contact a{
  display:block;
  font-size:14.5px; line-height:1.5;
  color:#463227; text-decoration:none;
  border-bottom:1px solid transparent;
}
.v2-foot-contact a + a{ margin-top:10px; }
.v2-foot-contact a:hover{ color:#2E1F18; border-bottom-color:#2E1F18; }
.v2-foot-sub{
  display:block; margin-top:2px;
  font-size:12.5px; color:#645449;   /* 4.65:1 on biscuit; was 4.24:1 */
}
/* The address is one long unbreakable string in a narrow column,
   which is what made the old footer overlap. */
/* The address breaks at the @ (a <wbr> in the markup), not mid-word.
   overflow-wrap:anywhere was splitting it as "gmail.co / m". */
.v2-foot-mail{ overflow-wrap:break-word; }

/* ---- legal ---- */
.v2-foot-base{
  display:flex; align-items:baseline;
  justify-content:space-between; gap:16px; flex-wrap:wrap;
  margin-top:clamp(34px,3.6vw,48px);
  padding-top:20px;
  border-top:1px solid #D2BDA2;
}
.v2-foot-base p{ margin:0; font-size:13px; color:#6B5A4E; }
.v2-foot-links a{
  color:#6B5A4E; text-decoration:none;
  border-bottom:1px solid rgba(107,90,78,0.34);
}
.v2-foot-links a:hover{ color:#2E1F18; border-bottom-color:#2E1F18; }
.v2-foot-dot{ padding:0 7px; color:#635547; }   /* 4.65:1; was 1.98 and effectively absent */

@media (max-width:1000px){
  .v2-foot-top{ grid-template-columns:1fr 1fr 1fr; row-gap:36px; }
  .v2-foot-brand{ grid-column:1 / -1; }
}
@media (max-width:620px){
  .v2-foot-top{ grid-template-columns:1fr 1fr; }
  .v2-foot-base{ flex-direction:column; gap:10px; }
}

/* ============================================================
   PRICING — inside the eye examinations section.
   Single row of flat cards. Replaces a 2x2 grid that ran 882px
   for four facts.

   The positioning line is the argument, so it is the largest
   thing here and sits directly above the cards; it was a subhead
   under a heading before, which is why it read as decoration.
   ============================================================ */
.v2-svc .v2-svc-prices{
  margin-top:clamp(40px,4.6vw,64px);
  padding-top:clamp(34px,3.8vw,50px);
  border-top:1px solid #E6D9C8;
}
.v2-svc .v2-px-kicker{
  margin:0 0 10px;
  font-family:var(--sans);
  font-size:11px; font-weight:600;
  letter-spacing:0.16em; text-transform:uppercase;
  color:var(--teal);             /* one eyebrow colour for the whole page */
}
.v2-svc .v2-px-lede{
  margin:0 0 30px;
  max-width:56ch;           /* was 46em - at 23px that is 1058px, i.e. 92
                               characters. em is the font size, not the
                               character width. */
  font-family:var(--serif);
  font-size:clamp(19px,2.1vw,23px);
  line-height:1.42; font-weight:400;
  text-transform:none;
}
.v2-svc .v2-px-lede-them{ color:#736356; }   /* the muted half; 4.66:1 on sand */
.v2-svc .v2-px-lede-us{ color:#2E1F18; }     /* the firm half */
/* The one piece of brand colour in the section, marking the claim
   the whole page is built on. */
/* Emphasis is one colour on this page. This underline was the raw logo
   teal - after the type went warm it was the only cool mark left in the
   body, so it read as a leftover rather than as the system. It now uses
   the same gold as the review stars. */
.v2-svc .v2-px-mark{ border-bottom:2px solid #C0880B; padding-bottom:1px; }

.v2-svc .v2-px-row{
  display:grid;
  /* Three cards: the fee, everything bulk billed, and health funds.
     The two bulk-billed cards were merged - they said the same thing
     twice, and separating them by wording alone traded accuracy for
     variety. */
  grid-template-columns:repeat(3, 1fr);
  gap:0 34px;
  list-style:none;
  margin:0 0 24px;
  padding:0;
}
.v2-svc .v2-px-card{
  padding:13px 0 0;
  border:0;
  border-top:2px solid #D8C6AE;
  background:none;
}
/* The one card carrying a price still gets its own rule, but in the
   page's accent gold rather than the old brand blue - which, once the
   type went warm, was the only blue left and sat directly beside two
   tan rails. Same signal, one accent system. */
.v2-svc .v2-px-card--fee{ border-top-color:#C0880B; }

.v2-svc .v2-px-eyebrow{
  display:block; margin:0 0 6px;
  font-family:var(--sans);
  font-size:11px; font-weight:600;
  letter-spacing:0.11em; text-transform:uppercase;
  color:var(--teal);
}
.v2-svc .v2-px-figure{
  display:block; margin:0 0 5px;
  font-family:var(--serif);
  font-size:clamp(24px,2.6vw,29px);
  line-height:1.12; font-weight:400;
  color:#2E1F18;
  white-space:nowrap;
  font-variant-numeric:lining-nums tabular-nums;
}
/* $35 and $45 share one class with no size modifier, so they are
   identical by construction - an earlier version made the higher
   price smaller, which read as less important. */
.v2-svc .v2-px-unit{ font-size:15px; letter-spacing:0.01em; }
.v2-svc .v2-px-sep{ color:#9C7A4B; padding:0 2px; }   /* 3.20:1 at 29px on sand */
.v2-svc .v2-px-note{
  margin:0;
  font-family:var(--sans);
  font-size:13.5px; line-height:1.45;
  color:#5A4A3E;
}

/* A link, not a button. The page's calls to action are Book Now in
   the nav and Leave a Review further down; a button here would
   compete with those and imply this is the next step, when it is a
   detail link for someone who wants more before booking. */
.v2-svc .v2-px-more{ margin:0; }
.v2-svc .v2-px-more a{
  font-family:var(--sans);
  font-size:15px; font-weight:500;
  color:#2E1F18; text-decoration:none;
  border-bottom:1px solid rgba(46,31,24,0.32);
  padding-bottom:2px;
  transition:border-color .16s;
}
.v2-svc .v2-px-more a:hover{ border-bottom-color:#2E1F18; }
.v2-svc .v2-px-more a::after{ content:" \203A"; color:rgba(46,31,24,0.55); }

@media (max-width:900px){
  /* Two-up would orphan the third card, so three go to one column. */
  .v2-svc .v2-px-row{ grid-template-columns:1fr; gap:0; }
  .v2-svc .v2-px-card{ padding:12px 0 14px; border-top:1px solid #D8C6AE; }
  .v2-svc .v2-px-card:first-child{ border-top-width:2px; }
  .v2-svc .v2-px-figure{ white-space:normal; }
}

/* Elementor's kit styles h2 and a globally (.elementor-kit-5 h2 at
   0-1-1 beats .v2-foot-h at 0-1-0), which was rendering the footer
   column headings as 29px navy serif and swallowing the button text.
   These need the extra specificity, not !important. */
.v2-foot .v2-foot-h,
footer.v2-foot h2.v2-foot-h{
  font-family:var(--sans);
  font-size:11px; font-weight:600;
  letter-spacing:0.16em; text-transform:uppercase;
  color:#625549;                 /* 4.65:1 on biscuit; was 2.76:1 */
  margin:0 0 12px;
  line-height:1.3;
}
.v2-foot a.v2-foot-book,
footer.v2-foot a.v2-foot-book{ color:#FBF6EF; }
.v2-foot a.v2-foot-book:hover{ color:#FBF6EF; }
.v2-foot .v2-foot-col a,
.v2-foot .v2-foot-contact a,
.v2-foot .v2-foot-links a{ color:#463227; }
.v2-foot .v2-foot-col a:hover,
.v2-foot .v2-foot-contact a:hover,
.v2-foot .v2-foot-links a:hover{ color:#2E1F18; }
.v2-foot .v2-foot-word-main{ font-family:var(--serif); }


/* ============================================================
   MEASURE
   Body copy was running to 92 characters a line in the pricing
   lede and 81 in Wendy's biography. Past roughly 75 the eye
   loses the return sweep and starts re-reading lines. Capping
   the text, not the container, keeps every section's outer
   column on --wrap so the left edges still agree.
   ============================================================ */
.v2-svc--exam .v2-svc-person > div > p{ max-width:60ch; }
.v2-svc--vs .v2-svc-vs p{ max-width:66ch; }
/* ch is the width of the "0" glyph, which in Georgia is far wider than
   an average character - 66ch there measured ~84 real characters and so
   constrained nothing. The reading demo is capped by its panel instead,
   which also keeps it looking like a page rather than a wide column. */
.v2-svc--vs .vs2-fact,
.v2-svc--vs .vs2-turn,
.v2-svc--vs .vs2-foot{ max-width:60ch; }
.v2-svc--vs .vs2-stage{ max-width:520px; margin-inline:auto; }
.v2-clinic .v2-clinic-head p,
.v2-team .v2-team-head p{ max-width:62ch; }

/* At tablet the pricing row and the review row both collapse from
   three columns to one, and their copy - short and comfortable at
   desktop - was running to 107 and 96 characters. Capping the text
   costs nothing at desktop, where both are already well inside it. */
.v2-svc .v2-px-note{ max-width:64ch; }
.v2-reviews .v2-rv-card-text{ max-width:58ch; margin-inline:auto; }

/* ============================================================
   THE 227px BOUNDARY
   ve-why carried --sec-y-loose because its seams were not doing
   any work - it sat 1.7 L* from its neighbours on both sides.
   Now that it steps 4.3 either way, the ground carries the
   separation and the section returns to the standard band, which
   brings every boundary on the page inside 164-172px.
   ============================================================ */
.ve-why{
  padding-top:var(--sec-y);
  padding-bottom:var(--sec-y);
}

/* The required-field asterisk on the contact form was near-white on
   clay - 1.23:1, so the one mark telling you a field is mandatory
   was the least visible thing in the form. */
.elementor-11 .elementor-element-32f02ca .wpforms-required-label{
  color:#A32017 !important;      /* 5.56:1 on clay */
}

/* The Generations section's type comes from the Elementor kit, which
   is still on the old cool palette - it was the last navy heading and
   the last teal paragraph on the page. */
.elementor-2 .elementor-element.elementor-element-9d8638f h1,
.elementor-2 .elementor-element.elementor-element-9d8638f h2,
.elementor-2 .elementor-element.elementor-element-9d8638f h3,
.elementor-2 .elementor-element.elementor-element-9d8638f .elementor-heading-title{
  color:#2E1F18 !important;
}
.elementor-2 .elementor-element.elementor-element-9d8638f p,
.elementor-2 .elementor-element.elementor-element-9d8638f .elementor-widget-text-editor{
  color:#5A4A3E !important;
}

/* ============================================================
   THE TWO ELEMENTOR SECTIONS JOIN THE GRID
   Every hand-built section hangs off --wrap, so at 1440 they all
   start at x=160. These two did not: the Generations copy began
   at x=50 (a nested inner-section carrying a hardcoded 50px) and
   the contact form at x=150 (Elementor's own 1140px container).
   A left edge that moves by 110px down the page is the kind of
   defect a visitor feels without ever locating.

   The gutter is expressed the same way the flex containers derive
   it, so it collapses to --sec-x on narrow screens by itself.
   ============================================================ */
.elementor-2 .elementor-element.elementor-element-9d8638f .elementor-inner-section{
  padding-left:max(var(--sec-x), calc((100vw - var(--wrap)) / 2)) !important;
  padding-right:clamp(24px,3.4vw,56px) !important;
}
.elementor-11 .elementor-element.elementor-element-32f02ca > .elementor-container{
  max-width:var(--wrap) !important;
}
/* Elementor's own column padding was adding 20px inside the Generations
   inner section, and the contact section carries 20px of its own - both
   only visible once the desktop gutter was correct, because they are
   what the narrow-screen edge actually lands on. */
.elementor-2 .elementor-element.elementor-element-9d8638f .elementor-inner-section .elementor-element-populated{
  padding-left:0 !important;
  padding-right:0 !important;
}
.elementor-11 .elementor-element.elementor-element-32f02ca{
  padding-left:var(--sec-x) !important;
  padding-right:var(--sec-x) !important;
  /* 80px was close to the scale but not on it; every other standard
     boundary on the page is exactly 2 x --sec-y. */
  padding-top:var(--sec-y) !important;
  padding-bottom:var(--sec-y) !important;
}


/* ============================================================
   VISUAL STRESS SECTION  (replaces the old .v2-svc-vs two-column
   block, whose copy column ran out of content ~280px before the demo
   card finished and left a void bottom-left).
   ============================================================ */


  /* ============================================================
     TRUE EDITORIAL SPLIT — heights reconciled

     The old grid was 1fr minmax(260px,380px) with align-items:start.
     Two things broke it: the copy column simply ran out of things to
     say about 280px before the demo card finished, and the columns
     were so unequal in width that the short one looked abandoned
     rather than deliberate.

     Three moves fix it rather than disguise it:
       1. Near-equal columns (6fr / 5fr) so neither reads as a sidebar.
       2. The left column is GIVEN more to carry - the "common in
          children" note, the signs to look for, and the prevalence
          fact are pulled down into a bottom-anchored block.
       3. align-items:stretch plus margin-top:auto on the last child of
          each column, so the two columns terminate on exactly the
          same line by construction, not by luck. Whatever slack is
          left lands in one controlled gap, never at the very bottom.
     ============================================================ */
  .vs2-grid{
    --vs2-h2:clamp(28px,3.6vw,42px);
    --vs2-eyebrow-gap:15px;
    /* Clearface's caps begin 0.224em below its line box top (half the
       leading, plus the gap between ascender and cap height - measured
       off the loaded face, not guessed). Pushing the demo column down
       by the eyebrow block plus that figure lands the card's TOP EDGE
       on the cap line of the H2, which is the edge the eye actually
       reads as "the top". Aligning the two boxes instead leaves the
       heading looking like it has slipped. */
    --vs2-optical:calc(12px + var(--vs2-eyebrow-gap) + 0.224 * var(--vs2-h2));
    --vs2-rule:#E3D8CB;
    --vs2-gutter:clamp(20px,2.6vw,36px);

    display:grid;
    grid-template-columns:6fr 5fr;
    gap:0;                       /* the gutter is padding either side of the rule */
    align-items:stretch;
  }
  .vs2-copy{
    display:flex; flex-direction:column;
    padding-right:var(--vs2-gutter);
  }
  .vs2-demo{
    display:flex; flex-direction:column;
    padding-left:var(--vs2-gutter);
    padding-top:var(--vs2-optical);
    /* One hairline doing structural work: it runs the full stretched
       height, so the fact that both columns end together is visible
       rather than merely true. */
    border-left:1px solid var(--vs2-rule);
  }

  /* Own eyebrow class with line-height:1 so the optical offset above
     is arithmetic, not a guess about inherited leading. */
  .v2-svc .vs2-eyebrow{
    font-family:var(--sans);
    font-size:12px; font-weight:600; line-height:1;
    letter-spacing:.2em; text-transform:uppercase;
    color:var(--teal);
    margin:0 0 var(--vs2-eyebrow-gap);
  }
  .v2-svc .vs2-h2{
    font-family:var(--serif);
    font-size:var(--vs2-h2);
    font-weight:400; line-height:1.12;
    color:var(--navy);
    margin:0 0 20px;
    /* 19ch was tuned against a narrower test container; in the real
       1080px inner the copy column is ~610px, and 19ch forced a third
       line with "be." stranded on it. 23ch clears two lines with room
       to spare, and balance keeps those two lines even rather than
       long-then-short. */
    max-width:23ch;
    text-wrap:balance;
  }
  .v2-svc .vs2-body{
    font-family:var(--sans);
    font-size:clamp(15px,1.4vw,17px);
    line-height:1.65; color:var(--teal-soft);
    margin:0 0 17px; max-width:64ch;
  }
  .v2-svc .vs2-link{
    /* Now the last line of the column, inside .vs2-anchor (2026-09-07):
       the section reads intro → signs → fact → link. */
    display:inline-block; align-self:flex-start;
    margin:18px 0 0;
    font-family:var(--sans); font-size:14px; font-weight:600;
    color:var(--navy); text-decoration:none;
    border-bottom:2px solid var(--teal); padding-bottom:3px;
    transition:color .16s;
  }
  .v2-svc .vs2-link:hover{ color:var(--teal); }

  /* ---------- Lower-left anchor: the column's second half ----------
     margin-top:auto drops it to the floor of the stretched column, so
     its bottom hairline lands on the same line as the demo card's
     bottom border. The two rules read as one line across the section. */
  .vs2-anchor{
    /* One continuous column (user, 2026-09-07): no push to the column
       floor, no rules. The block follows the intro at paragraph rhythm. */
    margin-top:clamp(22px,2.6vw,32px);
    padding:0;
  }
  .v2-svc .vs2-anchor-lead{
    font-family:var(--serif); font-size:clamp(17px,1.6vw,19px);
    line-height:1.35; color:var(--navy); margin:0 0 13px;
  }
  /* The list and the fact line were sized as a compact panel back when
     this block was a bordered box pinned to the column floor. It now runs
     as one continuous column (2026-09-07), so three different body sizes
     (17 / 14.5 / 14) read as a mistake. All body copy here takes the same
     ramp as .vs2-body. */
  .vs2-signs{ list-style:none; margin:0 0 18px; padding:0; }
  .vs2-signs li{
    position:relative; padding-left:24px;
    font-family:var(--sans); font-size:clamp(15px,1.4vw,17px); line-height:1.55;
    color:var(--teal-soft);
  }
  .vs2-signs li + li{ margin-top:10px; }
  .vs2-signs li::before{
    content:""; position:absolute; left:0;
    /* centred on the first line whatever the clamp resolves to:
       (line box - dot box) / 2, dot box = 7px + 2 x 1.5px border. */
    top:calc((1.55em - 10px) / 2);
    width:7px; height:7px; border-radius:50%;
    border:1.5px solid var(--teal); opacity:.7;
  }
  .v2-svc .vs2-fact{
    font-family:var(--sans); font-size:clamp(15px,1.4vw,17px); line-height:1.55;
    color:var(--teal-soft); margin:0;
  }
  .v2-svc .vs2-fact b{
    color:var(--navy); font-weight:600;
    font-family:var(--serif); font-size:clamp(17px,1.6vw,19px);
  }

  /* ============================================================
     THE DEMO — two beats, and it genuinely fills its column.
     flex:1 on the card plus margin-top:auto on the closing line means
     any leftover height becomes breathing room inside the card, not a
     white void beneath it.
     ============================================================ */
  .vs2-card{
    flex:1;
    display:flex; flex-direction:column;
    background:var(--parchment);
    border:1px solid var(--border);
    border-radius:16px;
    padding:24px 24px 22px;
  }
  .v2-svc .vs2-card-title{
    font-family:var(--sans); font-size:12px; font-weight:600;
    letter-spacing:.14em; text-transform:uppercase; color:var(--teal);
    margin:0 0 15px;
  }
  .v2-svc .vs2-para{
    font-family:Georgia,"Times New Roman",serif;
    font-size:15px; line-height:1.75; color:#20303A; margin:0;
  }

  /* ---------- Beat 1: the shimmer ---------- */
  .vs2-stage{
    position:relative; background:#fff; border-radius:10px;
    padding:18px 18px; overflow:hidden; border:1px solid #E7DED6;
  }
  /* Each word carries its own delay - moving in unison would read as
     a slide, not as a page that will not hold still. */
  .vs2-stage--live .vs2-para span{
    display:inline-block;
    animation:vs2-drift 3.1s ease-in-out infinite;
  }
  @keyframes vs2-drift{
    0%,100%{transform:translate(0,0);filter:blur(0);}
    35%{transform:translate(.6px,-.7px);filter:blur(.35px);}
    70%{transform:translate(-.5px,.8px);filter:blur(.2px);}
  }
  .vs2-stage--live::after{
    content:""; position:absolute; inset:0; pointer-events:none;
    background:repeating-linear-gradient(0deg,rgba(255,255,255,0) 0 3px,rgba(0,0,0,.035) 3px 6px);
    animation:vs2-glare 4.2s ease-in-out infinite;
  }
  @keyframes vs2-glare{0%,100%{opacity:.5}50%{opacity:1}}

  /* ---------- The hinge ---------- */
  .v2-svc .vs2-turn{
    font-family:var(--sans); font-size:13.5px; line-height:1.55;
    color:var(--teal-soft);
    margin:18px 0 0; padding-top:17px;
    border-top:1px solid var(--border);
  }

  /* ---------- Beat 2: find the colour ---------- */
  .vs2-stage--tint{ margin-top:15px; transition:background .45s ease; }
  .vs2-chips{
    display:flex; gap:9px; margin-top:17px; flex-wrap:wrap; align-items:center;
  }
  .vs2-chip{
    width:38px; height:38px; border-radius:50%;
    border:2px solid transparent; box-shadow:inset 0 0 0 1px rgba(0,0,0,.06);
    cursor:pointer; padding:0;
    transition:transform .14s ease,border-color .14s ease;
  }
  .vs2-chip:hover{ transform:scale(1.09); }
  .vs2-chip:focus-visible{ outline:2px solid var(--teal); outline-offset:3px; }
  .vs2-chip[aria-pressed=true]{ border-color:var(--navy); }

  .v2-svc .vs2-readout{
    font-family:var(--sans); font-size:13px;
    margin:12px 0 0; min-height:1.2em; color:var(--teal-soft);
  }
  .v2-svc .vs2-readout b{ color:var(--navy); font-weight:600; }
  .v2-svc .vs2-foot{
    font-family:var(--sans); font-size:13px; line-height:1.55;
    color:var(--teal-soft);
    margin:12px 0 0;             /* auto top margin applied below */
    margin-top:auto; padding-top:12px;
  }
  .v2-svc .vs2-foot b{ color:var(--teal); font-weight:600; }

  /* Motion is the point of beat 1, and also exactly what some visitors
     to THIS page cannot tolerate. Hold it still; the glare banding on
     its own still says "hostile page". */
  @media (prefers-reduced-motion:reduce){
    .vs2-stage--live .vs2-para span,
    .vs2-stage--live::after{ animation:none!important; }
    .vs2-stage--live::after{ opacity:.6; }
    .vs2-chip{ transition:none; }
  }

  /* Between 900 and 1180 the demo card is the column that suffers from
     being squeezed - its text rewraps and it grows, while the copy
     column shrinks. Equal columns hand the card back the width it
     needs and keep the two natural heights converging instead of
     diverging. */
  @media (max-width:1180px){
    .vs2-grid{ grid-template-columns:1fr 1fr; }
  }

  /* Below ~980px even equal columns cannot keep the card wide enough:
     the beats rewrap to six lines, the card overshoots the copy, and
     the reconciliation the whole layout is built on stops holding. The
     split collapses there. Stacked, the rule and the optical offset
     have nothing to align and are removed rather than left dangling. */
  @media (max-width:980px){
    .vs2-grid{ grid-template-columns:1fr; gap:clamp(28px,5vw,40px); }
    .vs2-copy{ padding-right:0; }
    .vs2-demo{
      padding-left:0; padding-top:0; border-left:0;
    }
    .vs2-anchor{ margin-top:0; }
    .v2-svc .vs2-h2{ max-width:22ch; }
    .v2-svc .vs2-body{ max-width:58ch; }
  }
  @media (max-width:430px){
    .vs2-card{ padding:18px 16px 16px; }
    .vs2-stage{ padding:14px 14px; }
    .vs2-chips{ gap:8px; }
  }

/* ============================================================
   TEAM — CONTINUOUS STRIP (replaces the three identical centred
   cards). The old .v2-team rules above are KEPT deliberately:
   rv-lab.html and bg-lab.html still render with them.
   ============================================================ */

/* ==========================================================================
   T2 — CONTINUOUS STRIP
   All three portraits were shot on the same day against the same signage
   wall. The design exploits that: the three frames are butted edge to edge
   with no gap, no border and no radius, so they read as ONE photograph of
   one team standing along one wall. Everything below exists to protect that
   illusion — matched eye-line, matched head size, matched exposure.
   ========================================================================== */


.t2{
  --navy:#2E1F18;
  --teal:#6E5747;
  --teal-soft:#5A4A3E;
  /* Was #F6F1EF / #DCD2CE - hue 17, where every other ground on the
     page is hue ~35, and only 1.4 L* from .v2-svc--vs above and
     .ve-why below, so the section barely separated from either.
     On the ramp at sand it steps 2.7 both ways. */
  --parchment:var(--p-20);
  --border:var(--w-rule-firm);
  --serif:"Clearface", Georgia, "Times New Roman", serif;
  --sans:"trade-gothic-next", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* Sampled from the photographs themselves: the wall behind them, after
     the exposure match. Any sub-pixel seam between frames lands on this
     colour instead of on the page ground, so no hairline ever shows. */
  --wall:#E9E3D9;

  /* The widest the band is allowed to get. Below this it is genuinely
     edge to edge; above it the band stops growing so the columns never
     get wider than the portraits can cover. */
  --band-max:1900px;

  /* The text measure. Deliberately much narrower than the band — the
     contrast between the constrained column of type and the full-bleed
     photograph is the whole point of the section. */
  --measure:1120px;

  background:var(--parchment);
  padding:clamp(46px,5.5vw,84px) 0 clamp(44px,5vw,76px);
  overflow:hidden; /* the scaled portraits are clipped by their own frames,
                      but this guarantees nothing can ever push the page wide */
}
.t2 *{ box-sizing:border-box; }

/* ---------- heading + intro, on the normal measure ---------- */

.t2-measure{
  max-width:var(--measure);
  margin:0 auto;
  padding-inline:clamp(20px,4vw,32px);
}
.t2-eyebrow{
  font-family:var(--sans);
  font-size:11px; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--teal);
  margin:0 0 14px;
}
/* Specificity raised to `.t2 .t2-title`, and transform/colour stated
   explicitly: the WordPress theme applies `text-transform:uppercase` and
   the OLD cool navy (#002E42) to every h2 on the page. The section reads
   correctly standalone and only breaks once the theme sheets load, which
   is why the old .v2-team h2 rule carried the same two declarations. */
.t2 .t2-title{
  font-family:var(--serif);
  font-size:clamp(30px,4vw,46px);
  font-weight:400; line-height:1.1;
  color:var(--navy);
  text-transform:none;
  letter-spacing:normal;
  margin:0;
  /* 13ch broke "Meet the rest of the team." over two lines. Wide enough
     for one line at the 46px top of the clamp; still wraps on its own
     at mobile sizes, where balance keeps the rag even. */
  max-width:30ch;
  text-wrap:balance;
}

/* ---------- the band ---------- */

.t2-band{
  position:relative;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0;                       /* the point of the whole section */
  max-width:var(--band-max);
  margin:clamp(34px,4vw,54px) auto 0;
  background:var(--wall);
}

/* Band height is fluid rather than a fixed aspect-ratio so the column
   width never outgrows the narrowest portrait's coverage. Deliberately a
   height (not a width) in vw — a vw width would overflow by the scrollbar. */
.t2-frame{
  position:relative;
  overflow:hidden;
  height:clamp(250px, calc(25.7vw + 150px), 620px);
  background:var(--wall);
}

/* Each portrait is sized and offset from the SAME two constants: head
   height = 44% of the band, eye-line = 38.5% down the band. --h and --t
   are those constants resolved against each source photo's own framing,
   which is how three different crops end up with one shared eye-line and
   one shared head size. --x parks the person's face on the column centre;
   the matching transform-origin means a hover scale grows them about
   their own eyes, so the eye-line never moves. */
.t2 .t2-img{
  position:absolute;
  left:50%;
  top:var(--t);
  height:var(--h);
  width:auto;
  max-width:none;             /* beats the theme's global img{max-width:100%} */
  display:block;
  transform:translateX(var(--x));
  transform-origin:var(--ox) var(--oy);
  /* --b is a per-photo exposure correction measured off the wall in each
     frame; the rest of the chain is identical for all three so the whole
     band shares one warm, slightly desaturated grade. */
  filter:brightness(var(--b)) saturate(.90) contrast(1.02) sepia(.10);
}

.t2-frame[data-p="paul"]  .t2-img{ --h:255.200%; --t:-59.462%; --x:-50.0%; --ox:50.0%; --oy:38.39%; --b:1;  }
.t2-frame[data-p="gill"]  .t2-img{ --h:255.200%; --t:-61.953%; --x:-50.0%; --ox:50.0%; --oy:39.36%; --b:1;  }
.t2-frame[data-p="megan"] .t2-img{ --h:267.520%; --t:-74.460%; --x:-52.2%; --ox:52.2%; --oy:42.22%; --b:1;  }

/* One wash across the whole band, never per frame — a single sheet of
   light is what makes three exposures look like one negative. The heavier
   bottom stop dissolves the band into the parchment exactly where the
   caption rule begins, and quietly evens out three very different shirts. */
.t2-band::after{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  background:linear-gradient(to bottom,
    rgba(246,241,239,.13) 0%,
    rgba(246,241,239,.05) 30%,
    rgba(246,241,239,.05) 62%,
    rgba(246,241,239,.26) 86%,
    rgba(246,241,239,.48) 100%);
}

/* The band is deliberately static. An earlier version dimmed the other
   two portraits when you hovered a caption; it was removed because a
   photograph that changes contrast under the cursor fights the one thing
   this section is for — looking like a single, settled picture of a team.
   Each caption sits directly beneath its own person, which is all the
   identification the section needs. */

/* ---------- captions: same grid, hung under a shared rule ---------- */

.t2-caps{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0;
  max-width:var(--band-max);
  margin:0 auto;
}

.t2-cap{
  position:relative;
  display:block;
  width:100%;
  min-width:0;
  margin:0;
  font:inherit;
  color:inherit;
  text-align:left;
  background:none;
  border:0;
  /* The shared baseline. Three butted borders read as one unbroken rule
     because the columns have no gap between them. */
  border-top:1px solid var(--border);
  padding:16px clamp(14px,1.5vw,28px) 0;
  /* Stated rather than inherited: the theme sets white-space:nowrap on
     some elements, and at 390px the roles overflow their 130px columns
     and collide with each other without this. */
  white-space:normal;
}

/* Each person's colour is lifted out of their own photograph — Paul's
   hibiscus shirt, Gill's scrub top, the red sofa behind Megan — so the
   legend dots belong to the picture rather than being applied to it.
   They are also three beads from the brand's ring of dots. */
.t2-cap[data-p="paul"],  .t2-bio[data-p="paul"]  { --c:#F07E26; }
.t2-cap[data-p="gill"],  .t2-bio[data-p="gill"]  { --c:#29A3A3; }
.t2-cap[data-p="megan"], .t2-bio[data-p="megan"] { --c:#E8412C; }

.t2-dot{
  display:block;
  width:8px; height:8px;
  border-radius:50%;
  background:var(--c);
  margin-bottom:11px;
}

.t2-name{
  display:block;
  font-family:var(--serif);
  font-size:clamp(19px,1.7vw,26px);
  font-weight:400; line-height:1.1;
  color:var(--navy);
  margin-bottom:6px;
}
.t2-role{
  display:block;
  font-family:var(--sans);
  font-size:clamp(9.5px,.78vw,11px);
  font-weight:600;
  letter-spacing:.13em; text-transform:uppercase;
  line-height:1.5;
  color:var(--teal);
  overflow-wrap:break-word;
}
.t2-hint{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap;
}

.t2-bio{
  min-width:0;
  font-family:var(--sans);
  font-size:14px; line-height:1.6;
  color:var(--teal-soft);
  max-width:44ch;
  margin:14px 0 0;
  padding-inline:clamp(14px,1.5vw,28px);
}
.t2-bio b{ display:none; }              /* only needed once the bios unstack */

.t2-more{ margin-top:clamp(40px,4.6vw,64px); }
.t2-more a{
  font-family:var(--sans);
  font-size:14px; font-weight:600;
  color:var(--navy);
  text-decoration:none;
  border-bottom:2px solid var(--teal);
  padding-bottom:3px;
  transition:color .16s;
}
.t2-more a:hover{ color:var(--teal); }

/* ---------- narrower ----------
   The band never breaks into cards, at any width — that is the idea and it
   survives to 320px. What gives way instead is the bio text, which cannot
   be read in a 110px column: below 880px the bios drop out of their columns
   and stack full width, each labelled with its name. Name and role stay in
   column, so the captions are still aligned under their person everywhere. */
@media (max-width:880px){
  .t2-bio{
    grid-column:1 / -1;
    max-width:62ch;
    margin-top:12px;
    padding-inline:clamp(20px,4vw,32px);
  }
  .t2-bio b{ display:inline; color:var(--navy); font-weight:600; }
  .t2-bio::before{
    content:"";
    display:inline-block;
    width:7px; height:7px; border-radius:50%;
    background:var(--c);
    margin-right:9px;
    vertical-align:middle;
    position:relative; top:-1px;
  }
  .t2-cap{ padding-top:13px; }
  .t2-name{ margin-bottom:4px; }
}
@media (max-width:560px){
  .t2-role{ letter-spacing:.09em; }
  .t2-dot{ width:7px; height:7px; margin-bottom:9px; }
}


/* ============================================================
   CLOSING CTA
   The homepage's version of .sb-cta, the band that closes every
   subpage above the contact form. Same structure - "Ready?"
   eyebrow, one serif line, a supporting sentence, then a solid
   primary and a ghost secondary - so the site reads as one thing.

   Two differences from the subpage original, both forced by where
   it sits. The subpage version is navy with an arc of that page's
   hue; navy is the old cool palette and the homepage has no single
   accent hue, so this one is espresso with an amber arc. And the
   reviews section directly above it is already the page's one dark
   block, so the DARK / LIGHT switch below decides whether the two
   read as one closing movement or as call-and-response.
   ============================================================ */
.v2-cta{
  padding:var(--sec-y) var(--sec-x);
  text-align:center;
  position:relative;
  overflow:hidden;
}
.v2-cta-inner{
  position:relative; z-index:1;
  max-width:640px;              /* narrower than --wrap on purpose:
                                   a centred CTA needs a short measure */
  margin:0 auto;
}
.v2-cta .v2-cta-eyebrow{
  margin:0 0 14px;
  font-family:var(--sans);
  font-size:11px; font-weight:600;
  letter-spacing:0.2em; text-transform:uppercase;
}
section.v2-cta h2{
  margin:0 0 16px;
  font-family:var(--serif); font-weight:400;
  font-size:clamp(28px,3.4vw,44px); line-height:1.12;
  letter-spacing:-0.01em;
  text-transform:none;          /* Elementor's kit capitalises h2 */
  text-wrap:balance;
}
.v2-cta .v2-cta-sub{
  margin:0 auto 30px;
  max-width:46ch;
  font-family:var(--sans);
  font-size:clamp(15px,1.3vw,16.5px); line-height:1.6;
}
.v2-cta-row{
  display:flex; gap:13px;
  justify-content:center; flex-wrap:wrap;
}
.v2-cta .v2-cta-btn{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--sans);
  font-size:15px; font-weight:600;
  text-decoration:none;
  padding:15px 30px;
  border-radius:999px;
  border:1.5px solid transparent;
  transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.v2-cta .v2-cta-btn:hover{ box-shadow:0 10px 24px rgba(26,16,10,.20); }
.v2-cta .v2-cta-btn:focus-visible{ outline:3px solid #F2B01E; outline-offset:3px; }

/* ---------- GROUND: DARK or LIGHT ----------
   Dark is the subpages' treatment and is active. The catch is that the
   reviews section immediately above is already the page's one dark
   block, so the two together make a 1,055px unbroken dark run before
   the form. Light makes the CTA a bright release between them instead.
   To switch: comment out the DARK group, uncomment the LIGHT group. */

/* ---- DARK (active) ---- */
.v2-cta{
  background:linear-gradient(176deg, #362619 0%, #241811 100%);
}
.v2-cta::before{
  content:"";
  position:absolute; right:-8%; top:50%;
  transform:translateY(-50%);
  width:min(620px,54%); aspect-ratio:1; border-radius:50%;
  background:radial-gradient(closest-side circle,
    rgba(242,176,30,0.16) 0%, rgba(242,176,30,0.05) 60%, transparent 100%);
  pointer-events:none;
}
.v2-cta .v2-cta-eyebrow{ color:#D9B98A; }          /* 6.6:1 on espresso */
section.v2-cta h2{ color:#FBF6EF; }                /* 14.6:1 */
.v2-cta .v2-cta-sub{ color:#D8CABB; }              /* 8.9:1 */
.v2-cta .v2-cta-btn--primary{ background:#FBF6EF; color:#2E1F18; }
.v2-cta .v2-cta-btn--primary:hover{ background:#FFFFFF; }
.v2-cta .v2-cta-btn--ghost{
  background:transparent; color:#FBF6EF;
  border-color:rgba(251,246,239,0.42);
}
.v2-cta .v2-cta-btn--ghost:hover{ border-color:rgba(251,246,239,0.75); }

/* ---- LIGHT (alternative) ----
.v2-cta{ background:var(--p-00); }
.v2-cta::before{
  content:"";
  position:absolute; right:-8%; top:50%;
  transform:translateY(-50%);
  width:min(620px,54%); aspect-ratio:1; border-radius:50%;
  background:radial-gradient(closest-side circle,
    rgba(242,176,30,0.14) 0%, rgba(242,176,30,0.05) 60%, transparent 100%);
  pointer-events:none;
}
.v2-cta .v2-cta-eyebrow{ color:var(--teal); }
section.v2-cta h2{ color:#2E1F18; }
.v2-cta .v2-cta-sub{ color:#5A4A3E; }
.v2-cta .v2-cta-btn--primary{ background:#2E1F18; color:#FBF6EF; }
.v2-cta .v2-cta-btn--primary:hover{ background:#432E23; }
.v2-cta .v2-cta-btn--ghost{
  background:transparent; color:#2E1F18;
  border-color:rgba(46,31,24,0.30);
}
.v2-cta .v2-cta-btn--ghost:hover{ border-color:rgba(46,31,24,0.60); }
*/

@media (prefers-reduced-motion:reduce){
  .v2-cta .v2-cta-btn{ transition:none; }
}
@media (max-width:520px){
  .v2-cta-row{ flex-direction:column; }
  .v2-cta .v2-cta-btn{ width:100%; justify-content:center; }
}


/* ============================================================
   BLEPHASTEAM. Under the team, above why-choose-us. Ground steps
   up to bone between sand (.t2) and parchment (.ve-why) so the
   seam carries the separation. Photo left, copy right; the copy
   column mirrors the eye-exam / visual-stress type system.
   ============================================================ */
.bs{
  --navy:#2E1F18; --teal:#6E5747; --teal-soft:#5A4A3E;
  --serif:"Clearface", Georgia, "Times New Roman", serif;
  --sans:"trade-gothic-next", "Segoe UI", system-ui, -apple-system, sans-serif;
  background:var(--p-00, #FDFAF6);
  padding:var(--sec-y, 72px) var(--sec-x, 24px);
}
.bs *{ box-sizing:border-box; }
.bs-inner{
  max-width:var(--wrap, 1120px); margin:0 auto;
  display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr);
  gap:clamp(32px,5vw,72px); align-items:center;
}
.bs-photo{
  border-radius:18px; overflow:hidden;
  background:var(--p-20);
  box-shadow:0 18px 44px rgba(46,31,24,.12);
}
.bs-photo img{ display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; }
.bs .bs-eyebrow{
  font-family:var(--sans); font-size:12px; font-weight:600; line-height:1;
  letter-spacing:.2em; text-transform:uppercase; color:var(--teal);
  margin:0 0 15px;
}
.bs .bs-title{
  font-family:var(--serif); font-weight:400; line-height:1.12;
  font-size:clamp(28px,3.6vw,42px); color:var(--navy);
  text-transform:none; margin:0 0 18px; max-width:20ch; text-wrap:balance;
}
.bs .bs-body{
  font-family:var(--sans); font-size:clamp(15px,1.4vw,17px); line-height:1.65;
  color:var(--teal-soft); margin:0 0 22px; max-width:58ch;
}
.bs-facts{
  list-style:none; margin:0 0 26px; padding:0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:18px;
  border-top:1px solid var(--w-rule-firm, #D8C6B2); padding-top:20px;
}
.bs-facts li{ display:flex; flex-direction:column; gap:5px; }
.bs-facts b{ font-family:var(--serif); font-weight:400; font-size:22px; line-height:1.1; color:var(--navy); }
.bs-facts span{ font-family:var(--sans); font-size:13.5px; line-height:1.5; color:var(--teal-soft); }
.bs-book{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin:0 0 22px; }
.bs .bs-call{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--sans); font-size:15px; font-weight:600;
  color:#fff; background:var(--navy); text-decoration:none;
  padding:15px 26px; border-radius:999px;
  transition:transform .18s ease, box-shadow .18s ease;
}
.bs .bs-call svg{ width:18px; height:18px; flex:none; }
.bs .bs-call:hover{ box-shadow:0 10px 24px rgba(26,16,10,.20); }
.bs .bs-call:focus-visible{ outline:3px solid #F2B01E; outline-offset:3px; }
.bs .bs-note{ font-family:var(--sans); font-size:13.5px; line-height:1.5; color:var(--teal-soft); margin:0; max-width:24ch; }
.bs .bs-link{
  display:inline-block; font-family:var(--sans); font-size:14px; font-weight:600;
  color:var(--navy); text-decoration:none;
  border-bottom:2px solid var(--teal); padding-bottom:3px; transition:color .16s;
}
.bs .bs-link:hover{ color:var(--teal); }
@media (max-width:900px){
  .bs-inner{ grid-template-columns:1fr; gap:clamp(24px,5vw,36px); }
  .bs-photo{ max-width:560px; }
}
@media (max-width:560px){
  .bs-facts{ grid-template-columns:1fr; gap:14px; }
  .bs .bs-note{ max-width:none; }
}

/* ============================================================
   MOBILE-ONLY LAYOUT (2026-09-09)
   Rules here change the phone layout without touching desktop.
   ============================================================ */

/* Wendy's cut-out was capped at 300px inside a 342px column with no
   centring, so she sat 42px left of centre on every phone. */
@media (max-width:820px){
  .v2-svc .v2-svc-photo{ margin-inline:auto; }
}

/* "Generations of clear vision": photo first, copy under it.
   Elementor stacks this section's two columns at 767px; above that
   they sit side by side and the order must not change. */
@media (max-width:767px){
  .elementor-element-9d8638f > .elementor-container{ flex-wrap:wrap; }
  .elementor-element-9d8638f > .elementor-container > .elementor-element-fc40e1c{ order:-1; }
  .elementor-element-9d8638f > .elementor-container > .elementor-element-8486aff{ order:0; }
  /* Leading the section now, so the letterbox crop matters: 200px on a
     390px screen is nearly 2:1 and cut the heads off. Taller, and the
     crop biased upward to hold the three faces. */
  .elementor-2 .elementor-element.elementor-element-9d8638f img{
    height:270px !important; object-position:50% 34% !important;
  }
}