/* ============================================================
   SUBPAGE CONTENT SYSTEM

   v5's section architecture (alternating text/image blocks, an
   at-a-glance checklist, a brand row, a closing CTA) rendered in
   OGv2's own design language — navy / teal / Clearface — rather
   than v5's parchment-and-sienna "Warm Luxury" palette.

   The per-page accent (--accent) is the SAME hue as that page's
   dot ribbon, so the header and the body read as one page.
   ============================================================ */
.sb, .sb *, .sb *::before, .sb *::after{ box-sizing:border-box }

.sb{
  --navy:#2E1F18;   /* espresso — matches home warm rebuild */
  --teal:#6E5747;
  --teal-soft:#5A4A3E;
  --parchment:#F5EDE2;   /* home --p-10 */
  --pale:#FAF5EE;
  --line:#E6D9C8;          /* matches home --w-rule */
  --accent:#29A3A3;
  --accent-ink:#BF3A28;                                     /* fallback */
  --accent-ink:color-mix(in srgb, var(--accent) 78%, #2E1F18);

  /* Section rhythm (2026-09-07): one token for every band's vertical
     padding so the page steps evenly; wrap matches home's --wrap. */
  --sb-pad:clamp(56px,7vw,96px);
  --sb-gutter:clamp(20px,4vw,32px);

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

  font-family:var(--sans);
  color:var(--teal-soft);
}

.sb .sb-wrap{
  /* 1120px of content, matching the form fields and footer columns
     exactly (they sit at the same x), with the gutter added outside. */
  max-width:calc(1120px + 2 * var(--sb-gutter));
  margin:0 auto;
  padding:0 var(--sb-gutter);
}
.sb .sb-wrap--wide{ max-width:1400px; }

/* ---------- ELEMENTOR RESET ----------
   The legacy Elementor kit applies uppercase transforms, its own heading
   colours and its own link styling site-wide. These sections are new markup
   and must opt out of all of it explicitly, or headings arrive in caps and
   the bands inherit the parchment body colour. */
.sb{ background:#F5EDE2; }   /* home --p-10 parchment — the home body never sits on bone */

/* ---------- SECTION BACKGROUNDS — THE HOME RAMP ----------
   The home page separates its sections with steps of the warm ramp
   (--p-00…--p-40 in v2-hero.css) rather than rules or borders, and its
   body runs between the two parchment steps — p-10 and p-20 — never
   the near-white bone. Same two shades here, alternating so every
   seam is visible. The first section takes the deeper step, echoing
   home's hero → trust-band transition (the hero fades out at p-10).
   :where() keeps these at class-only specificity, so the dark
   .sb-cta still wins. */
.sb > :where(section){ background:var(--p-20, #F0E5D7); }
.sb > :where(section:nth-of-type(even)){ background:var(--p-10, #F5EDE2); }
.sb h1, .sb h2, .sb h3, .sb h4,
.sb .sb-h2, .sb .sb-h3, .sb .sb-step h3, .sb .sb-card h3, .sb .sb-cta h2{
  text-transform:none !important;
  font-style:normal;
}
.sb a{ text-decoration:none; font-weight:inherit }
/* Elementor styles descendants of links at weight 700; pin body weights so
   card copy reads as prose rather than as a heading. */
.sb p, .sb li, .sb .sb-check p, .sb .sb-card p, .sb .sb-step p{ font-weight:400 }
.sb .sb-eyebrow, .sb .sb-card-go, .sb .sb-chip, .sb .sb-btn{ font-weight:600 }
.sb .sb-step-n{ font-weight:700 }
.sb a:hover{ font-size:inherit; font-weight:inherit }
.sb ul{ margin:0; padding:0 }

/* ---------- SHARED TYPE ---------- */
.sb .sb-eyebrow{
  font-size:12px; font-weight:700; letter-spacing:0.2em;
  text-transform:uppercase; color:var(--accent);
  margin:0 0 14px;
}
.sb .sb-h2{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(25px,2.7vw,38px); line-height:1.12;
  letter-spacing:-0.01em; color:var(--navy);
  margin:0 0 18px; text-wrap:balance;
}
.sb .sb-h3{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(19px,1.7vw,23px); line-height:1.2;
  color:var(--navy); margin:0 0 9px;
}
.sb p{ font-size:16px; line-height:1.62; margin:0 0 15px; }
.sb p:last-child{ margin-bottom:0 }
.sb strong{ color:var(--navy); font-weight:600 }

/* ---------- ALTERNATING TEXT / IMAGE BLOCKS ---------- */
.sb .sb-split{
  padding:var(--sb-pad) 0;
}
.sb .sb-split-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(32px,6vw,80px);
  align-items:center;
}
/* The photo stretches to the row. Short copy: the 4:3 photo sets the row
   height and the copy centres beside it. Long copy (bulleted sections):
   the photo grows to the copy's height instead of floating mid-column
   with dead parchment above and below it. */
.sb .sb-split-grid > picture{ display:block; align-self:stretch; min-height:0 }
.sb .sb-split-grid > .sb-shot,
.sb .sb-split-grid > picture > .sb-shot{ height:100%; min-height:100% }
/* Reversed rows put the image first so the page alternates. */
.sb .sb-split--rev .sb-split-grid{ direction:rtl }
.sb .sb-split--rev .sb-split-grid > *{ direction:ltr }

/* A split with no photograph renders as one readable centred column
   rather than half prose, half placeholder. */
.sb .sb-split-grid--solo{
  grid-template-columns:1fr;
  max-width:46rem;
  margin:0 auto;
}

.sb .sb-shot{
  width:100%;
  aspect-ratio:4/3;
  object-position:50% 40%;   /* faces sit above centre in most of the shoot */
  object-fit:cover;
  border-radius:16px;
  display:block;
  background:var(--pale);
}
/* Placeholder for blocks where no photograph exists yet. Deliberately
   plain and labelled — a fake stock image would be worse than an
   honest gap. */
.sb .sb-shot-ph{
  width:100%; aspect-ratio:4/3; border-radius:16px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px; text-align:center;
  background:var(--parchment);
  border:1px solid var(--line);
  color:var(--teal-soft);
}
.sb .sb-shot-ph svg{ width:30px; height:30px; opacity:.5 }
.sb .sb-shot-ph span{ font-size:12px; letter-spacing:.14em; text-transform:uppercase; font-weight:600; opacity:.72 }

/* Inline SVG diagram taking the image slot of a split (e.g. the myopia
   eye comparison). Transparent on purpose — it sits directly on the
   section's parchment rather than inside a photo frame. */
.sb .sb-diagram{ width:100% }
.sb .sb-diagram svg{ display:block; width:100%; height:auto }

/* ---------- BULLET LIST ---------- */
.sb .sb-list{ list-style:none; margin:6px 0 0; padding:0 }
.sb .sb-list li{
  position:relative;
  padding-left:22px;
  font-size:16px; line-height:1.55;
  margin:0 0 11px;
}
.sb .sb-list li::before{
  content:"";
  position:absolute; left:0; top:.6em;
  width:7px; height:7px; border-radius:50%;
  background:transparent;
  border:1.5px solid var(--accent);
  opacity:.75;
}

/* A bullet list can sit inside a lifted panel, the way the home page
   presents its symptom list. Add sb-list--panel to opt in. White, not
   parchment — the sections themselves are parchment shades now. */
.sb .sb-list--panel{
  padding:22px 24px;
  background:#FFFFFF;
  border:1px solid var(--line);
  border-radius:16px;
  margin-top:18px;
}
.sb .sb-list--panel li{ font-size:14.5px; line-height:1.5 }
.sb .sb-list--panel li + li{ margin-top:11px }

/* ---------- FULL-BLEED PHOTO ----------
   The home page bleeds its photographs edge to edge between text
   sections rather than boxing them in a column. Same device here. */
.sb .sb-bleed{
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  display:block;
}
.sb .sb-bleed img{
  width:100%; height:clamp(260px,38vw,440px);
  object-fit:cover; display:block;
}

/* ---------- AT-A-GLANCE CHECKLIST ---------- */
/* Background and borders removed: the alternating ramp above now
   carries this section's boundary, like every other seam. */
.sb .sb-glance{
  padding:var(--sb-pad) 0;
}
.sb .sb-glance-head{ text-align:center; max-width:44rem; margin:0 auto clamp(28px,4vh,42px) }
.sb .sb-glance-grid{
  display:grid; grid-template-columns:1fr 1fr;
  gap:14px clamp(26px,4vw,48px);
  max-width:56rem; margin:0 auto;
}
.sb .sb-check{ display:flex; align-items:flex-start; gap:12px }
.sb .sb-check svg{
  width:20px; height:20px; flex:0 0 auto; margin-top:2px;
  color:var(--accent);
}
.sb .sb-check p{ font-size:15px; line-height:1.5; margin:0 }

/* ---------- NUMBERED STEPS ---------- */
.sb .sb-steps{ padding:var(--sb-pad) 0 }
.sb .sb-steps-head{ text-align:center; max-width:44rem; margin:0 auto clamp(28px,4vh,44px) }
.sb .sb-steps-grid{
  display:grid;
  /* The builder sets --steps-cols to the card count (3 for six cards),
     so no row ever carries an orphan. Defaults to 5 for old pages. */
  grid-template-columns:repeat(var(--steps-cols,5), 1fr);
  gap:clamp(14px,1.6vw,20px);
}
.sb .sb-step{
  background:#FFFFFF;
  border:1px solid var(--line);
  border-radius:16px;
  padding:24px 22px 22px;
}
.sb .sb-step-n{
  display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:50%;
  background:var(--accent); color:#fff;
  font-size:13px; font-weight:700;
  margin-bottom:14px;
}
/* Unnumbered variant for parallel items (risks, causes, options):
   numbers would imply a sequence or ranking, so those cards carry no
   badge at all. */
.sb .sb-step h3{
  font-family:var(--serif); font-weight:400; font-size:19px;
  color:var(--navy); margin:0 0 7px;
}
.sb .sb-step p{ font-size:14.5px; line-height:1.52; margin:0 }

/* ---------- BRAND ROW ---------- */
.sb .sb-brands{ padding:var(--sb-pad) 0; text-align:center }
.sb .sb-brands-head{ max-width:42rem; margin:0 auto clamp(24px,3.4vh,36px) }
.sb .sb-chips{ display:flex; flex-wrap:wrap; justify-content:center; gap:11px }
.sb .sb-chip{
  font-size:14.5px; font-weight:600; color:var(--navy);
  padding:11px 20px; border-radius:999px;
  background:#FFFFFF; border:1px solid var(--line);
}

/* ---------- CARD GRID (cross-links) ---------- */
.sb .sb-cards{ padding:var(--sb-pad) 0 }
.sb .sb-cards-head{ text-align:center; max-width:44rem; margin:0 auto clamp(28px,4vh,42px) }
.sb .sb-cards-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));
  gap:clamp(16px,2.2vw,24px);
}
/* Six cards (the suburb pages' "What we offer") fall 4 + 2 on a wide
   screen; three columns gives two full rows instead. */
.sb .sb-cards-grid:has(> :nth-child(6)){ grid-template-columns:repeat(3, 1fr) }
@media (max-width:860px){
  .sb .sb-cards-grid:has(> :nth-child(6)){ grid-template-columns:repeat(auto-fit, minmax(250px, 1fr)) }
}
.sb .sb-card{
  display:block; text-decoration:none;
  background:#FFFFFF; border:1px solid var(--line);
  border-radius:16px; padding:24px 22px;
  border-top:3px solid var(--card-accent, var(--accent));
  transition:box-shadow .2s ease, border-color .2s ease;
}
.sb .sb-card:hover{
  box-shadow:0 12px 28px rgba(0,46,66,.09);
  border-color:color-mix(in srgb, var(--card-accent, var(--accent)) 42%, var(--line));
}
.sb .sb-card h3{
  font-family:var(--serif); font-weight:400; font-size:20px;
  color:var(--navy); margin:0 0 8px;
}
.sb .sb-card p{ font-size:14.5px; line-height:1.5; margin:0 0 12px }
.sb .sb-card-go{
  font-size:13px; font-weight:700; letter-spacing:.05em;
  color:var(--card-accent, var(--accent));
}

/* ---------- CLOSING CTA ---------- */
.sb .sb-cta{
  background:var(--navy);
  padding:var(--sb-pad) 0;
  text-align:center;
  position:relative;
  overflow:hidden;
}
/* A single arc of the page's hue, so even the CTA is colour-coded. */
.sb .sb-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,
    color-mix(in srgb, var(--accent) 34%, transparent) 0%,
    color-mix(in srgb, var(--accent) 10%, transparent) 60%,
    transparent 100%);
  pointer-events:none;
}
.sb .sb-cta-inner{ position:relative; z-index:1; max-width:40rem; margin:0 auto; padding:0 clamp(20px,5vw,40px) }
.sb .sb-cta .sb-eyebrow{ color:color-mix(in srgb, var(--accent) 70%, #FFFFFF) }
.sb .sb-cta h2{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(28px,3.4vw,46px); line-height:1.1;
  color:#fff; margin:0 0 16px; text-wrap:balance;
}
.sb .sb-cta p{ color:rgba(255,255,255,.76); margin:0 0 30px }
.sb .sb-cta-row{ display:flex; gap:13px; justify-content:center; flex-wrap:wrap }
.sb .sb-btn{
  display:inline-flex; align-items:center; gap:9px;
  font-size:15px; font-weight:600; text-decoration:none;
  padding:15px 30px; border-radius:999px;
  transition:transform .18s ease, box-shadow .18s ease;
}
.sb .sb-btn--primary{ background:#fff; color:var(--navy) }
.sb .sb-btn--ghost{ background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,.42) }
.sb .sb-btn--dark{ background:var(--navy); color:#fff }
.sb .sb-glance-foot{
  display:flex; align-items:center; justify-content:center; gap:28px;
  max-width:56rem; margin:clamp(20px,2.6vh,28px) auto 0;
}
.sb .sb-glance-foot .sb-glance-note{ text-align:left; margin:0; max-width:none; flex:1 }
.sb .sb-glance-foot .sb-btn{ flex:none }
@media (max-width:640px){
  .sb .sb-glance-foot{ flex-direction:column; gap:18px }
  .sb .sb-glance-foot .sb-glance-note{ text-align:center }
}
/* Three-fact row + phone-only booking, matching the home page teaser */
.sb .sb-facts{
  list-style:none; margin:22px 0 26px; padding:20px 0 0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:18px;
  border-top:1px solid color-mix(in srgb, var(--accent) 34%, transparent);
}
.sb .sb-facts li{ display:flex; flex-direction:column; gap:5px; margin:0; padding:0 }
.sb .sb-facts li::before{ content:none }
.sb .sb-facts b{ font-family:var(--serif); font-weight:400; font-size:22px; line-height:1.1; color:var(--navy) }
.sb .sb-facts span{ font-size:13.5px; line-height:1.5 }
.sb .sb-book{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin:0 }
.sb .sb-book .sb-btn{ padding:15px 26px }
.sb .sb-book .sb-book-note{ font-size:13.5px; line-height:1.5; margin:0; max-width:24ch }
.sb .sb-btn-icon{ width:18px; height:18px; flex:none }
@media (max-width:560px){
  .sb .sb-facts{ grid-template-columns:1fr; gap:14px }
  .sb .sb-book .sb-book-note{ max-width:none }
}
.sb .sb-btn:hover{ box-shadow:0 10px 24px rgba(0,0,0,.18) }
.sb .sb-btn:focus-visible{ outline:3px solid var(--accent); outline-offset:3px }

/* ---------- RESPONSIVE ---------- */
@media (max-width:1180px){
  .sb .sb-steps-grid{ grid-template-columns:repeat(3, 1fr) }
}
@media (max-width:760px){
  .sb .sb-steps-grid{ grid-template-columns:repeat(2, 1fr) }
}
@media (max-width:460px){
  .sb .sb-steps-grid{ grid-template-columns:1fr }
}
@media (max-width:860px){
  .sb .sb-split-grid{ grid-template-columns:1fr; gap:30px }
  .sb .sb-split-grid > .sb-shot,
  .sb .sb-split-grid > picture > .sb-shot{ height:auto; min-height:0 }
  .sb .sb-split--rev .sb-split-grid{ direction:ltr }
  /* On one column the image should always follow its text. */
  .sb .sb-split--rev .sb-shot,
  .sb .sb-split--rev .sb-shot-ph{ order:2 }
  .sb .sb-glance-grid{ grid-template-columns:1fr }
}
@media (prefers-reduced-motion: reduce){
  .sb .sb-card, .sb .sb-btn{ transition:none }
}

/* ---------- PRICING TIERS ----------
   Used on Eye Examinations and We Repair. Kept as a plain row of cards
   rather than the home page's ornate pricing block: this is reference
   information on a subpage, not a conversion moment. */
/* No fixed background: with the body alternating p-10/p-20, a pinned
   p-20 here could match its neighbours. The white tier cards lift
   off either shade. */
.sb .sb-pricing{ padding:var(--sb-pad) 0 }
.sb .sb-pricing-head{ text-align:center; max-width:46rem; margin:0 auto clamp(26px,3.6vh,38px) }
/* Tiers restyled to match the home page's pricing block (.v2-px-card):
   open cards on a 2px tan top rail rather than boxed white panels, a
   serif figure, and a gold rail on the one card carrying a price. */
.sb .sb-pricing-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(215px, 1fr));
  gap:22px clamp(22px,3vw,34px);
}
.sb .sb-tier{
  border-top:2px solid #D8C6AE;
  padding:13px 0 0;
}
.sb .sb-tier--fee{ border-top-color:#C0880B; }
.sb .sb-tier-who{
  font-size:11px; font-weight:600; letter-spacing:.11em;
  text-transform:uppercase; color:var(--teal); margin:0 0 6px;
}
.sb .sb-tier-fig{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(24px,2.6vw,29px); line-height:1.12;
  color:var(--navy); display:block; margin:0 0 5px;
  font-variant-numeric:lining-nums tabular-nums;
}
.sb .sb-tier p{ font-size:13.5px; line-height:1.45; margin:0 }
.sb .sb-pricing-note,
.sb .sb-glance-note{
  text-align:center; font-size:14px; margin:clamp(20px,2.6vh,28px) auto 0;
  max-width:44rem; opacity:.85;
}
/* An inline link out of the site, styled like the home page's detail
   links (.v2-px-more): an underline rule, not a button. */
.sb .sb-ext-link{
  font-weight:500; color:var(--navy);
  border-bottom:1px solid rgba(46,31,24,0.32);
  padding-bottom:1px;
  transition:border-color .16s;
}
.sb .sb-ext-link:hover{ border-bottom-color:var(--navy); }
.sb .sb-ext-link::after{ content:" \203A"; color:rgba(46,31,24,0.55); }

/* ---------- EYE CONDITIONS (live-site port) ----------
   The old WordPress page's "Eye Conditions" band, translated from its
   teal to the site's espresso: a dark section, a two-column lede, and
   a hairline-ruled grid whose last cell is a booking prompt. The dark
   ground opts this section out of the parchment alternation the same
   way .sb-cta does. */
.sb .sb-conds{
  background:var(--navy);
  padding:var(--sb-pad) 0;
}
.sb .sb-conds-head{ text-align:center; margin:0 auto clamp(20px,2.6vh,30px) }
.sb .sb-conds .sb-eyebrow{ color:#D9B98A; }
.sb .sb-conds .sb-h2{ color:#FBF6EF; }
.sb .sb-conds-lede{
  display:grid; grid-template-columns:1fr 1fr;
  gap:18px clamp(28px,4vw,56px);
  max-width:none; margin:0 0 clamp(30px,4vh,46px);
}
.sb .sb-conds-lede p{ margin:0; font-size:15px; line-height:1.6; color:#D8CABB }
.sb .sb-conds-grid{
  display:grid; grid-template-columns:repeat(3,1fr);
  border:1px solid rgba(251,246,239,0.26);
}
.sb .sb-cond{
  padding:clamp(22px,2.8vw,36px);
  border-right:1px solid rgba(251,246,239,0.26);
  border-bottom:1px solid rgba(251,246,239,0.26);
}
.sb .sb-cond:nth-child(3n){ border-right:0 }
.sb .sb-cond:nth-child(n+4){ border-bottom:0 }
.sb .sb-cond h3{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(19px,1.7vw,23px); line-height:1.25;
  color:#FBF6EF; margin:0 0 12px;
}
.sb .sb-cond p{ font-size:14px; line-height:1.55; margin:0; color:#D8CABB }
.sb .sb-cond--cta .sb-btn{ margin-top:16px }
/* Bullets inside a dark cell: the sb-list language (hollow dot markers)
   recoloured for the espresso ground. */
.sb .sb-cond .sb-list{ margin-top:14px }
.sb .sb-cond .sb-list li{
  font-size:14px; line-height:1.55;
  color:#D8CABB; margin-bottom:9px;
}
.sb .sb-cond .sb-list li::before{
  border-color:#D9B98A;
  opacity:.85;
}
/* Optional centred note under the grid (e.g. the reading-visualiser
   pointer on the visual-stress symptoms band), with the external-link
   underline re-inked in cream for the dark ground. */
.sb .sb-conds-note{
  text-align:center; margin:clamp(22px,3vh,32px) 0 0;
  font-size:14.5px; line-height:1.6; color:#D8CABB;
}
.sb .sb-conds .sb-ext-link{
  color:#FBF6EF;
  border-bottom-color:rgba(251,246,239,0.45);
}
.sb .sb-conds .sb-ext-link:hover{ border-bottom-color:#FBF6EF; }
.sb .sb-conds .sb-ext-link::after{ color:rgba(251,246,239,0.6); }
@media (max-width:860px){
  .sb .sb-conds-lede{ grid-template-columns:1fr }
  .sb .sb-conds-grid{ grid-template-columns:1fr }
  .sb .sb-cond{ border-right:0 }
  .sb .sb-cond:nth-child(n+4){ border-bottom:1px solid rgba(251,246,239,0.26) }
  .sb .sb-cond:last-child{ border-bottom:0 }
}

/* ---------- STATS ROW (About) ---------- */
.sb .sb-stats{
  padding:clamp(40px,5.4vh,64px) 0;
}
.sb .sb-stats-head{ text-align:center; max-width:40rem; margin:0 auto clamp(24px,3.2vh,34px) }
.sb .sb-stats-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(190px,1fr));
  gap:clamp(20px,3vw,34px); text-align:center;
}
.sb .sb-stat-fig{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(28px,3vw,42px); line-height:1.05;
  color:var(--accent); display:block; margin:0 0 8px;
}
.sb .sb-stat p{ font-size:14.5px; line-height:1.5; margin:0 }

/* ---------- TEAM ---------- */
.sb .sb-team{ padding:var(--sb-pad) 0 }
/* The padding collapse that lived here (.sb-split + .sb-team) is gone:
   the alternating ramp now gives the two sections different grounds,
   so each needs its full symmetric padding for the band to read. */
.sb .sb-team-head{ text-align:center; max-width:42rem; margin:0 auto clamp(28px,3.8vh,42px) }
.sb .sb-member{
  display:grid;
  grid-template-columns:160px 1fr;
  gap:clamp(20px,3vw,34px);
  align-items:start;
  padding:clamp(22px,3vh,30px) 0;
  border-top:1px solid var(--line);
}
.sb .sb-member:first-of-type{ border-top:0; padding-top:0 }
.sb .sb-member-photo{
  width:160px; height:160px; border-radius:50%;
  object-fit:cover; display:block; background:var(--pale);
}
.sb .sb-member-ph{
  width:160px; height:160px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  /* White, not parchment: the team section can now sit on a parchment
     ramp step, where a parchment circle would disappear into it. */
  background:#FFFFFF;
  border:1px solid var(--line);
  color:var(--teal-soft);
}
.sb .sb-member-ph span{
  font-family:var(--serif); font-size:40px; line-height:1; opacity:.6;
}
.sb .sb-member-name{
  font-family:var(--serif); font-weight:400; font-size:clamp(22px,2vw,28px);
  color:var(--navy); margin:0 0 4px;
}
.sb .sb-member-role{
  font-size:12.5px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent); margin:0 0 13px;
}

@media (max-width:640px){
  /* Stacked card: photo, name and role sit centred; the bio stays
     left-aligned so multi-line paragraphs remain easy to read. */
  .sb .sb-member{ grid-template-columns:1fr; gap:16px; text-align:left }
  .sb .sb-member-photo, .sb .sb-member-ph{ width:104px; height:104px; margin:0 auto }
  .sb .sb-member-ph span{ font-size:30px }
  .sb .sb-member-name, .sb .sb-member-role{ text-align:center }
}

/* ---------- FAQ ACCORDIONS ----------
   Native <details>/<summary>: works with JavaScript disabled, is keyboard
   accessible and screen-reader announced for free, and browsers handle
   open/close state. No script needed. */
/* Each FAQ group is its own ramp stripe now, so every group keeps
   symmetric padding — slightly tighter than a standard section, since
   the groups read as one continuing list. (The old padding-top:0
   collapse only worked when they all shared a ground.) */
.sb .sb-faq{ padding:clamp(38px,5vw,62px) 0 }
.sb .sb-faq-group{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(21px,2vw,27px); line-height:1.15;
  color:var(--navy); margin:0 0 18px;
  padding-bottom:12px;
  border-bottom:2px solid color-mix(in srgb, var(--accent) 34%, var(--line));
}
.sb .sb-q{
  border-bottom:1px solid var(--line);
}
.sb .sb-q > summary{
  display:flex; align-items:flex-start; gap:14px;
  padding:16px 0;
  cursor:pointer;
  list-style:none;
  font-size:16.5px; font-weight:600; line-height:1.45;
  color:var(--navy);
}
/* Hide the native disclosure marker in both engines. */
.sb .sb-q > summary::-webkit-details-marker{ display:none }
.sb .sb-q > summary::marker{ content:"" }

/* Custom +/- indicator, drawn with borders so it needs no icon asset. */
.sb .sb-q > summary::after{
  content:"";
  flex:0 0 auto; margin-left:auto; margin-top:7px;
  width:11px; height:11px;
  border-right:2px solid var(--accent);
  border-bottom:2px solid var(--accent);
  transform:rotate(45deg);
  transition:transform .2s ease;
}
.sb .sb-q[open] > summary::after{ transform:rotate(-135deg) }
.sb .sb-q > summary:hover{ color:var(--accent) }
.sb .sb-q > summary:focus-visible{
  outline:3px solid var(--accent); outline-offset:3px; border-radius:4px;
}
.sb .sb-q-body{
  padding:0 34px 20px 0;
  font-size:15.5px; line-height:1.62;
}
.sb .sb-q-body p{ margin:0 0 12px }
.sb .sb-q-body p:last-child{ margin-bottom:0 }

@media (max-width:560px){
  .sb .sb-q > summary{ font-size:15.5px; gap:10px }
  .sb .sb-q-body{ padding-right:20px; font-size:15px }
}
@media (prefers-reduced-motion: reduce){
  .sb .sb-q > summary::after{ transition:none }
}

/* ---------- VISUAL STRESS SELF-CHECK (.sb-vsdemo) ----------
   Interactive reading sample on the visual-stress page, modelled on
   Vision Through Colour's reading visualiser. The section itself takes
   its background from the parchment alternation above — no ground set
   here. The card holds a serif reading sample split into word spans
   (.sb-vsw) by the inline script; each span carries --i (index) and
   --w (a stable random 0–1) so the keyframes can de-phase per word.
   Two knobs arrive as custom properties on #sbVsdemo:
     --vs-amt  0.1–1   effect strength (Intensity slider)
     --vs-dur  time    animation cycle (Speed slider, inverted)
   Green (--accent) appears only as small marks: the active button
   rail and the sliders' accent-color. */
.sb .sb-vsdemo{ padding:var(--sb-pad) 0; }

.sb .sb-vsdemo-card{
  background:#FFFFFF;
  border:1px solid #E6D9C8;
  border-radius:16px;
  padding:clamp(22px,3vw,30px);
}
.sb .sb-vsdemo-text{
  font-family:var(--serif);
  font-size:17px; line-height:1.72;
  color:var(--navy);
  margin:0 0 22px;
  min-height:11em;   /* effects shift word widths; keep the card height steady */
}
.sb .sb-vsw{
  display:inline-block;   /* transforms need a box */
  will-change:transform, opacity;
}

/* Controls */
.sb .sb-vsdemo-controls{
  border-top:1px solid #E6D9C8;
  padding-top:18px;
}
.sb .sb-vsdemo-label{
  font-family:var(--sans);
  font-size:11px; font-weight:600;
  letter-spacing:.11em; text-transform:uppercase;
  color:#5A4A3E;
  margin:0 0 8px;
}
.sb .sb-vsdemo-fx{
  display:flex; flex-wrap:wrap;
  gap:4px 18px;
  margin-bottom:18px;
}
.sb .sb-vsdemo-fxbtn{
  appearance:none; background:none; border:0; cursor:pointer;
  font-family:var(--sans);
  font-size:11px; font-weight:600;
  letter-spacing:.11em; text-transform:uppercase;
  color:#5A4A3E;
  padding:5px 1px;
  border-bottom:2px solid transparent;
  transition:color .16s, border-color .16s;
}
.sb .sb-vsdemo-fxbtn:hover{ color:var(--navy); }
.sb .sb-vsdemo-fxbtn.is-active{
  color:var(--navy);
  border-bottom-color:var(--accent);
}
.sb .sb-vsdemo-sliders{
  display:grid; grid-template-columns:1fr 1fr;
  gap:20px;
}
.sb .sb-vsdemo-slider{ display:block; }
.sb .sb-vsdemo-slider .sb-vsdemo-label{ margin-bottom:6px; }
.sb .sb-vsdemo-slider input[type=range]{
  width:100%; display:block; margin:0;
  accent-color:var(--accent);
}
@media (max-width:460px){
  .sb .sb-vsdemo-sliders{ grid-template-columns:1fr; gap:14px }
}

/* --- Effects. One class on .sb-vsdemo-text at a time (vs-rivers,
   vs-shimmer, vs-doubling, vs-bending, vs-fading); none = plain. --- */

/* Rivers — gaps between words widen and close out of phase, so pale
   channels seem to drift down through the block of print. */
.sb .sb-vsdemo .vs-rivers .sb-vsw{
  animation:sbvs-river var(--vs-dur,3.2s) ease-in-out infinite;
  animation-delay:calc(var(--w,0) * -6s);
}
@keyframes sbvs-river{
  0%,100%{ margin-right:0; }
  50%{ margin-right:calc(var(--vs-amt,.55) * .85em); }
}

/* Shimmer — small fast per-word jitter with an opacity flicker. */
.sb .sb-vsdemo .vs-shimmer .sb-vsw{
  animation:sbvs-shimmer calc(var(--vs-dur,3.2s) / 9) ease-in-out infinite;
  animation-delay:calc(var(--w,0) * -2s);
}
@keyframes sbvs-shimmer{
  0%,100%{ transform:translate(0,0); opacity:1; }
  30%{ transform:translate(calc(var(--vs-amt,.55) * .9px), calc(var(--vs-amt,.55) * -.7px));
       opacity:calc(1 - var(--vs-amt,.55) * .38); }
  65%{ transform:translate(calc(var(--vs-amt,.55) * -.8px), calc(var(--vs-amt,.55) * .6px));
       opacity:1; }
}

/* Doubling — a ghost copy below the line, drifting slightly. */
.sb .sb-vsdemo .vs-doubling{
  animation:sbvs-double calc(var(--vs-dur,3.2s) / 2) ease-in-out infinite alternate;
}
@keyframes sbvs-double{
  from{ text-shadow:0 calc(var(--vs-amt,.55) * .3em) 0 rgba(46,31,24,.22); }
  to{   text-shadow:0 calc(var(--vs-amt,.55) * .5em) 0 rgba(46,31,24,.38); }
}

/* Bending — a slow wave runs along each line; the index-based delay
   phases neighbouring words so the baseline appears to curve. */
.sb .sb-vsdemo .vs-bending .sb-vsw{
  animation:sbvs-bend var(--vs-dur,3.2s) ease-in-out infinite;
  animation-delay:calc(var(--i,0) * var(--vs-dur,3.2s) / -12);
}
@keyframes sbvs-bend{
  0%,100%{ transform:translateY(calc(var(--vs-amt,.55) * -.22em)) rotate(calc(var(--vs-amt,.55) * -2deg)); }
  50%{     transform:translateY(calc(var(--vs-amt,.55) *  .22em)) rotate(calc(var(--vs-amt,.55) *  2deg)); }
}

/* Fading — patches of print thin out and recover, out of phase. */
.sb .sb-vsdemo .vs-fading .sb-vsw{
  animation:sbvs-fade calc(var(--vs-dur,3.2s) * 1.4) ease-in-out infinite;
  animation-delay:calc(var(--w,0) * -9s);
}
@keyframes sbvs-fade{
  0%,100%{ opacity:1; }
  50%{ opacity:calc(1 - var(--vs-amt,.55) * .78); }
}

/* Reduced motion: freeze everything and swap in static approximations
   of each distortion, driven by the same intensity variable. */
@media (prefers-reduced-motion: reduce){
  .sb .sb-vsdemo .sb-vsw,
  .sb .sb-vsdemo .sb-vsdemo-text{ animation:none !important; }
  .sb .sb-vsdemo .vs-rivers .sb-vsw{
    margin-right:calc(var(--vs-amt,.55) * var(--w,0) * .85em);
  }
  .sb .sb-vsdemo .vs-shimmer .sb-vsw{
    opacity:calc(1 - var(--vs-amt,.55) * .38 * var(--w,0));
    transform:translate(calc((var(--w,0) - .5) * var(--vs-amt,.55) * 1.6px),
                        calc((.5 - var(--w,0)) * var(--vs-amt,.55) * 1.2px));
  }
  .sb .sb-vsdemo .vs-doubling{
    text-shadow:0 calc(var(--vs-amt,.55) * .4em) 0 rgba(46,31,24,.3);
  }
  .sb .sb-vsdemo .vs-bending .sb-vsw{
    transform:translateY(calc(sin(var(--i,0) * 42deg) * var(--vs-amt,.55) * .22em));
  }
  .sb .sb-vsdemo .vs-fading .sb-vsw{
    opacity:calc(1 - var(--vs-amt,.55) * .78 * var(--w,0));
  }
}

/* Google Maps embed taking the image slot of a split (contact page).
   Same 4:3 frame and radius as .sb-shot so the row reads identically
   whether the slot holds a photograph or a map. */
.sb .sb-map{
  width:100%;
  /* Taller than the 4:3 photo frame: a map needs vertical room to show the
     streets around the centre, and the extra height balances the column of
     text beside it. Capped so it never outgrows the row. */
  aspect-ratio:1/1;
  max-height:520px;
  border-radius:16px;
  overflow:hidden;
  background:var(--pale);
  border:1px solid var(--line);
}
.sb .sb-map iframe{ width:100%; height:100%; border:0; display:block }

/* Full-bleed map band. The map is the subject of the contact page's
   location section, so it runs edge to edge at the width of the viewport
   like .sb-bleed photographs, rather than boxed in a split column. */
.sb .sb-mapbleed{
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  display:block;
}
.sb .sb-mapbleed .sb-map{
  aspect-ratio:auto;
  height:clamp(340px,42vw,560px);
  border-radius:0;
  border:0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

/* Nested bullets: a filled, smaller dot against the parent's hollow ring,
   so the hierarchy reads without extra indentation doing all the work. */
.sb .sb-list--sub{ margin:9px 0 0; padding-left:20px }
.sb .sb-list--sub li{ font-size:15px; margin:0 0 7px }
.sb .sb-list--sub li:last-child{ margin-bottom:0 }
.sb .sb-list--sub li::before{
  width:5px; height:5px; top:.62em;
  background:var(--accent);
  border:0;
  opacity:.55;
}

/* ---------- COLORIMETRY TINT DEMO (.sb-tint) ----------
   Visual-stress page, above "Reducing visual stress". Port of the home
   page's vs2 "find the colour" beat: a reading sample whose ground
   takes the chosen tint, seven chip buttons, a live readout. Card
   styling matches .sb-vsdemo-card so the two demos on the page read
   as one family. Section padding/ground come from .sb-split. */
.sb .sb-tint-card{
  background:#FFFFFF;
  border:1px solid #E6D9C8;
  border-radius:16px;
  padding:clamp(22px,3vw,30px);
}
.sb .sb-tint-title{
  font-family:var(--sans);
  font-size:11px; font-weight:600;
  letter-spacing:.11em; text-transform:uppercase;
  color:#5A4A3E;
  margin:0 0 14px;
}
.sb .sb-tint-stage{
  background:#FFFFFF;
  border:1px solid #E6D9C8;
  border-radius:10px;
  padding:18px 20px;
  transition:background .45s ease;
}
.sb .sb-tint-stage p{
  font-family:var(--serif);
  font-size:17px; line-height:1.72;
  color:var(--navy);
  margin:0;
}
.sb .sb-tint-chips{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:10px;
  margin-top:18px;
}
.sb .sb-tint-chip{
  appearance:none; width:38px; height:38px; border-radius:50%;
  border:2px solid transparent;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);
  cursor:pointer; padding:0;
  transition:transform .14s ease, border-color .14s ease;
}
.sb .sb-tint-chip:hover{ transform:scale(1.09); }
.sb .sb-tint-chip:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.sb .sb-tint-chip[aria-pressed=true]{ border-color:var(--navy); }
.sb .sb-tint-readout{
  font-family:var(--sans);
  font-size:13px; color:#5A4A3E;
  margin:12px 0 0; min-height:1.2em;
}
.sb .sb-tint-readout b{ color:var(--navy); font-weight:600; }
.sb .sb-tint-foot{
  font-family:var(--sans);
  font-size:13px; line-height:1.55; color:#5A4A3E;
  margin:14px 0 0; padding-top:14px;
  border-top:1px solid #E6D9C8;
}
@media (prefers-reduced-motion: reduce){
  .sb .sb-tint-stage, .sb .sb-tint-chip{ transition:none; }
}

/* ---------- LIFTED ENQUIRY FORM (.sb-formtop) ----------
   Contact page: build_all.lift_form_band() moves the home footer's
   WPForms band into <main>. Home styles that band via .elementor-11,
   a wrapper the lifted copy does not carry, so the form fell back to
   the WordPress defaults (navy caps heading, grey square button).
   Mirror of the home rules, scoped to .sb-formtop. */
.sb .sb-formtop{ padding:var(--sb-pad) 0; }
/* One gutter only (section + container both carried 24px, so the
   fields sat 48px in on a phone while body copy sat at 20px). */
.sb .sb-formtop .elementor-section{ max-width:none; padding:0; }
.sb .sb-formtop .elementor-container{ max-width:calc(1120px + 2 * var(--sb-gutter)); margin-inline:auto; padding:0 var(--sb-gutter); }
.sb .sb-formtop .elementor-widget-wrap{ padding:0; }
.sb .sb-formtop .elementor-heading-title{
  font-family:var(--serif) !important;
  font-size:clamp(28px,3.4vw,40px) !important; font-weight:400 !important;
  letter-spacing:-0.01em !important; text-transform:none !important;
  color:var(--navy) !important; text-align:center;
  margin:0 0 clamp(22px,3vw,34px) !important;
}
.sb .sb-formtop .wpforms-container{ max-width:760px; margin:0 auto; }
.sb .sb-formtop .wpforms-container input:not([type="submit"]),
.sb .sb-formtop .wpforms-container textarea,
.sb .sb-formtop .wpforms-container select,
.sb .sb-formtop .wpforms-field-large{
  background:#FFFDF9 !important; border:1px solid #D2BDA2 !important;
  border-radius:10px !important; color:var(--navy) !important;
  font-size:16px !important; text-transform:none !important;
  padding:13px 15px !important; transition:border-color .16s, box-shadow .16s;
}
.sb .sb-formtop .wpforms-container input:focus,
.sb .sb-formtop .wpforms-container textarea:focus{
  border-color:#8A6A4A !important; box-shadow:0 0 0 3px rgba(138,106,74,.14) !important; outline:none !important;
}
.sb .sb-formtop .wpforms-container input::placeholder,
.sb .sb-formtop .wpforms-container textarea::placeholder{ color:#7A6A5C !important; text-transform:none !important; opacity:1 !important; }
.sb .sb-formtop .wpforms-field-label{ color:var(--navy) !important; font-weight:600 !important; font-family:var(--sans) !important; }
.sb .sb-formtop .wpforms-required-label{ color:#A32017 !important; }
.sb .sb-formtop .wpforms-submit-container{ text-align:center; }
.sb .sb-formtop .wpforms-container button[type="submit"],
.sb .sb-formtop .wpforms-container input[type="submit"]{
  background:var(--navy) !important; color:#FBF6EF !important; border:0 !important;
  border-radius:999px !important; padding:15px 34px !important;
  font-family:var(--sans) !important; font-weight:600 !important; letter-spacing:.02em !important;
  transition:background-color .16s; cursor:pointer;
}
.sb .sb-formtop .wpforms-container button[type="submit"]:hover{ background:#432E23 !important; }

/* ---------- RELATED ("You might also need") ----------
   Moved out of <main> on 2026-09-07 so it reads AFTER the closing CTA and
   the enquiry form: it now sits inside the shared footer wrapper, between
   the form band (--p-30) and .v2-foot. Own .sb wrapper so the type and
   card styles still apply; sand ground steps back up from the form. */
.sb.sb--related{ background:var(--p-20, #F0E5D7); }
.sb.sb--related > :where(section){ background:var(--p-20, #F0E5D7); }
.sb.sb--related .sb-cards{ padding:clamp(44px,6vw,76px) 0 }

/* ---------- PHONE-ONLY BOOKING ----------
   Services the online diary cannot take (colorimetry). The CTA band
   drops its online button, so the note carries the reason. */
/* Selector must beat `.sb .sb-cta p` (0,2,1), which sets margin:0 0 30px
   and would otherwise kill the auto centring. */
.sb .sb-cta p.sb-cta-note{
  font-size:14px; line-height:1.55; margin:20px auto 0; max-width:44ch;
  color:rgba(255,255,255,.66);
}
.sb .sb-vsdemo-book{ margin:18px 0 8px }
.sb .sb-vsdemo-note{ font-size:13.5px; line-height:1.5; margin:0; max-width:46ch }

/* ---------- BRAND LOGO WALL ----------
   Chosen 2026-09-10 over the mural: every logo out, evenly set.
   Marks are the practice's own artwork (recovered from the old WordPress
   uploads, repainted espresso). The builder emits --logo-k per brand so
   they are normalised on area rather than height — without it the widest
   wordmark carries several times the weight of the squarest.

   Flex, not grid: a grid cannot centre a short final row, and with 14
   marks at five a row the last row is always short. */
.sb .sb-logos{ padding:var(--sb-pad) 0 }
.sb .sb-logos-head{ text-align:center; max-width:44rem; margin:0 auto clamp(30px,4vh,46px) }
.sb .sb-logos-grid{
  list-style:none; margin:0; padding:0;
  --gap-x:clamp(18px,2.6vw,34px);
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:clamp(26px,3.4vw,44px) var(--gap-x);
}
.sb .sb-logo{
  margin:0; padding:0;
  width:calc((100% - (var(--per-row) - 1) * var(--gap-x)) / var(--per-row));
  display:flex; align-items:center; justify-content:center;
  min-height:72px;
}
.sb .sb-logo::before{ content:none }   /* the .sb-list bullet must not apply */
/* max-height + max-width with auto dimensions: the mark scales to fit both
   without ever being squashed, which a fixed height would do. */
.sb .sb-logo img{
  display:block; width:auto; height:auto;
  max-height:calc(52px * var(--logo-k,1));
  max-width:100%;
  opacity:.88; transition:opacity .2s ease;
}
.sb .sb-logo:hover img{ opacity:1 }
.sb .sb-logo--type span{
  font-family:var(--serif); font-weight:400; font-size:23px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--navy);
  opacity:.88; text-align:center;
}
.sb .sb-logos-note{
  text-align:center; max-width:46rem; margin:clamp(28px,3.6vh,42px) auto 0;
  font-size:14.5px; line-height:1.55; color:var(--teal-soft);
}
@media (max-width:860px){
  .sb .sb-logos-grid{ --per-row:3 }
}
@media (max-width:600px){
  .sb .sb-logos-grid{ --per-row:2; gap:26px 16px }
  .sb .sb-logo{ min-height:58px }
  .sb .sb-logo img{ max-height:calc(46px * var(--logo-k,1)) }
  .sb .sb-logo--type span{ font-size:19px }
}
@media (prefers-reduced-motion:reduce){
  .sb .sb-logo img{ transition:none }
}

/* ---------- BRAND INDEX ----------
   The real range (2026-09-10): 52 frame brands in three groups. Logo
   artwork exists for only 8, so the range is set as a typographic index
   rather than a wall of marks — a wall would show a fraction and imply
   it was the whole list. Columns, because 42 optical names in one run
   would be a wall of text. */
.sb .sb-brandix{ padding:var(--sb-pad) 0 }
.sb .sb-brandix-head{ text-align:center; max-width:44rem; margin:0 auto clamp(30px,4vh,46px) }
.sb .sb-brandix-group + .sb-brandix-group{ margin-top:clamp(30px,4vh,44px) }
.sb .sb-brandix-label{
  display:flex; align-items:baseline; gap:12px;
  font-family:var(--sans); font-size:12px; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; color:var(--accent-ink,var(--navy));
  margin:0 0 16px; padding-bottom:11px; border-bottom:1px solid var(--line);
}
.sb .sb-brandix-count{
  font-size:11px; font-weight:700; letter-spacing:.1em; color:var(--teal-soft);
  font-variant-numeric:tabular-nums;
}
.sb .sb-brandix-count::before{ content:"" }
.sb .sb-brandix-list{
  list-style:none; margin:0; padding:0;
  columns:4; column-gap:clamp(20px,3vw,40px);
}
.sb .sb-brandix-list li{
  break-inside:avoid;
  margin:0; padding:0 0 0 0;
  font-size:15.5px; line-height:1.95; color:var(--navy);
}
.sb .sb-brandix-list li::before{ content:none }   /* .sb-list bullet must not apply */
.sb .sb-brandix-note{
  text-align:center; max-width:48rem; margin:clamp(30px,3.8vh,44px) auto 0;
  font-size:14.5px; line-height:1.55; color:var(--teal-soft);
}
@media (max-width:900px){ .sb .sb-brandix-list{ columns:3 } }
@media (max-width:620px){
  .sb .sb-brandix-list{ columns:2; column-gap:18px }
  .sb .sb-brandix-list li{ font-size:14.5px; line-height:1.85 }
}
@media (max-width:360px){ .sb .sb-brandix-list{ columns:1 } }