/*
Theme Name: AA.co.za Ollie Child
Template: ollie
Description: Child theme for the activealigners.co.za v2 rebuild. Brand: Active Aligners (blue-on-light, Inter). SA patient-facing. Design lives in theme.json + patterns; this file is component polish only — no forced overrides, no per-page CSS.
Author: Active Aligners
Version: 1.5.3
*/

:root { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

/* ---- Eyebrow / kicker ---- */
.sc-eyebrow { display: flex; width: fit-content; align-items: center; gap: .5rem; font-family: var(--wp--preset--font-family--heading); font-weight: 600; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--wp--preset--color--primary); }
.sc-eyebrow.has-text-align-center { margin-left: auto; margin-right: auto; }
.sc-eyebrow.is-on-dark { color: var(--wp--preset--color--accent); }

/* ---- Cards ---- */
.sc-card { background: var(--wp--preset--color--white); border: 1px solid var(--wp--preset--color--border); border-radius: var(--wp--custom--radius--md); box-shadow: var(--wp--custom--shadow--soft); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; height: 100%; }
.sc-card:hover { transform: translateY(-6px); box-shadow: var(--wp--custom--shadow--lift); border-color: var(--wp--preset--color--primary-soft); }
.sc-card img { border-radius: var(--wp--custom--radius--sm); }
.sc-card-media { overflow: hidden; border-radius: var(--wp--custom--radius--sm); }
.sc-card-media img { width: 100%; aspect-ratio: 4 / 3; height: auto; object-fit: cover; display: block; transition: transform .4s ease; }
.sc-card:hover .sc-card-media img { transform: scale(1.04); }
.sc-card--pad { padding: 2rem 1.9rem; }
.sc-card--pad h3 { font-family: var(--wp--preset--font-family--heading); font-size: 1.2rem; font-weight: 700; margin: .9rem 0 .5rem; color: var(--wp--preset--color--ink); }
.sc-card--pad p { color: #5A6B78; line-height: 1.65; margin: 0; }
.sc-card-icon { display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: var(--wp--custom--radius--md); background: var(--wp--preset--color--primary-soft); color: var(--wp--preset--color--primary); line-height: 1; }
.sc-card-icon svg { width: 26px; height: 26px; }
.sc-card-media--tall img { aspect-ratio: 3 / 2; }

/* steps (column wrapper around sc-step-num) */
.sc-step h3 { font-family: var(--wp--preset--font-family--heading); font-size: 1.25rem; font-weight: 700; margin: 1rem 0 .5rem; color: var(--wp--preset--color--ink); }
.sc-step p { color: #5A6B78; line-height: 1.65; margin: 0; }

/* FAQ accordion */
.sc-faq { border: 1px solid var(--wp--preset--color--border); border-radius: var(--wp--custom--radius--md); margin: 0 0 .75rem; background: var(--wp--preset--color--white); overflow: hidden; }
.sc-faq summary { cursor: pointer; list-style: none; padding: 1.1rem 1.4rem; font-weight: 600; color: var(--wp--preset--color--ink); display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.sc-faq summary::-webkit-details-marker { display: none; }
.sc-faq summary::after { content: "+"; font-size: 1.4rem; color: var(--wp--preset--color--primary); font-weight: 400; transition: transform .2s ease; }
.sc-faq[open] summary::after { transform: rotate(45deg); }
.sc-faq summary:hover { color: var(--wp--preset--color--primary); }
.sc-faq-body { padding: 0 1.4rem 1.2rem; }
.sc-faq-body p { color: #5A6B78; line-height: 1.7; margin: 0; }
.sc-faq-body a, .sc-card--pad p a { color: var(--wp--preset--color--primary); font-weight: 600; }

/* CTA band */
.sc-cta-band .wp-block-heading { color: #fff; }

/* ---- Buttons ---- */
.wp-block-button__link { transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.wp-block-button__link:hover { transform: translateY(-2px); box-shadow: var(--wp--custom--shadow--soft); }

/* ---- Section rhythm ---- */
.sc-band { border-radius: var(--wp--custom--radius--lg); }
.sc-hero-media img { aspect-ratio:16/9; border-radius:var(--wp--custom--radius--lg); box-shadow:var(--wp--custom--shadow--card); display:block; object-fit:cover; object-position:center top; width:100%; }

/* brand logos on lead cards */
.sc-brand-logo { margin: 0 0 0.8rem; display: flex; align-items: flex-start; min-height: 50px; }
.sc-brand-logo img { width: auto; max-width: 100%; display: block; }
.sc-brand-logo--wide img { height: 26px; }
.sc-brand-logo--stack img { height: 50px; }

/* steps + stats */
.sc-step-num { display:inline-flex; align-items:center; justify-content:center; width:2.6rem; height:2.6rem; border-radius:var(--wp--custom--radius--pill); background:var(--wp--preset--color--primary-soft); color:var(--wp--preset--color--primary-dark); font-family:var(--wp--preset--font-family--heading); font-weight:800; font-size:1.1rem; }
.sc-stat-num { font-family:var(--wp--preset--font-family--heading); font-weight:800; font-size:clamp(2rem,4vw,3rem); line-height:1; color:var(--wp--preset--color--primary); }
.sc-stat-num.is-on-dark { color:var(--wp--preset--color--accent); }

/* gallery + proof */
.sc-gallery.wp-block-gallery img { border-radius: var(--wp--custom--radius--md); box-shadow: var(--wp--custom--shadow--soft); }
.sc-gallery.wp-block-gallery figure.wp-block-image { transition: transform .25s ease; }
.sc-gallery.wp-block-gallery figure.wp-block-image:hover { transform: translateY(-4px); }
.sc-proof img { width: 100%; height: auto; display: block; border-radius: var(--wp--custom--radius--md); box-shadow: var(--wp--custom--shadow--soft); }
.sc-chip { display: inline-flex; align-items: center; gap: .4rem; background: var(--wp--preset--color--primary-soft); color: var(--wp--preset--color--primary-dark); border-radius: var(--wp--custom--radius--pill); padding: .4rem .9rem; font-weight: 600; font-size: .9rem; }

/* ---- store-locator iframe (embeds .com /providers/) ---- */
/* Crop the embedded .com /providers/ page (WP Store Locator) from our side — we can't edit the live plugin.
   Pull the iframe up so the .com header + marketing hero are clipped and the search box + map show.
   Offsets measured on the live embed: desktop iframe renders ~1050px wide (search box ~574px down,
   map bottom ~1251px); mobile iframe renders ~308px wide (search box ~600px down, map bottom ~1349px). */
.sc-locator { width: 100%; height: 720px; border-radius: var(--wp--custom--radius--md); overflow: hidden; box-shadow: var(--wp--custom--shadow--card); border: 1px solid var(--wp--preset--color--border); position: relative; }
.sc-locator iframe { width: 100%; height: 1500px; border: 0; display: block; margin-top: -550px; }
@media (max-width: 860px) { .sc-locator { height: 790px; } .sc-locator iframe { height: 1600px; margin-top: -580px; } }

/* ---- Header / nav ---- */
.sc-header { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,.88); backdrop-filter: saturate(160%) blur(10px); border-bottom: 1px solid var(--wp--preset--color--border); }
.sc-logo { display: inline-flex; align-items: center; text-decoration: none; line-height: 1; }
.sc-logo img { display: block; height: 30px; width: auto; }
.sc-footer .sc-logo img { height: 34px; }
.sc-social { display: flex; gap: .75rem; margin-top: 1rem; }
.sc-social a { color: rgba(255,255,255,.78); display: inline-flex; transition: color .2s ease; }
.sc-social a:hover { color: #fff; }
.sc-nav { display: flex; gap: 1.15rem; align-items: center; }
.sc-nav a { color: var(--wp--preset--color--ink); text-decoration: none; font-weight: 500; font-size: 0.95rem; letter-spacing: -0.01em; white-space: nowrap; }
@media (min-width: 901px) and (max-width: 1180px) { .sc-nav { gap: 0.85rem; } .sc-nav a { font-size: 0.9rem; } }
.sc-nav a:hover { color: var(--wp--preset--color--primary); }
.sc-nav-parent-row { display:flex; align-items:center; }
.sc-submenu-toggle { display:none; }

/* mega menu */
.sc-has-mega { position: relative; }
.sc-mega { position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%) translateY(8px); min-width: min(560px, 92vw); background: var(--wp--preset--color--white); border: 1px solid var(--wp--preset--color--border); border-radius: var(--wp--custom--radius--md); box-shadow: var(--wp--custom--shadow--lift); padding: 1.4rem; display: grid; grid-template-columns: 1fr 1fr; gap: .4rem 2rem; opacity: 0; visibility: hidden; transition: opacity .2s ease, transform .2s ease; z-index: 200; }
.sc-has-mega:hover .sc-mega, .sc-has-mega:focus-within .sc-mega { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.sc-mega-col h4 { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--wp--preset--color--muted); margin: 0 0 .6rem; }
.sc-mega a { display: block; padding: .45rem .5rem; border-radius: 8px; color: var(--wp--preset--color--ink); text-decoration: none; font-weight: 500; }
.sc-mega a:hover { background: var(--wp--preset--color--surface); color: var(--wp--preset--color--primary); }
.sc-mega a small { display: block; color: var(--wp--preset--color--muted); font-weight: 400; font-size: .82rem; }

/* mobile nav */
.sc-nav-toggle { display: none; background: none; border: 0; cursor: pointer; }
@media (max-width: 900px) {
  .sc-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: flex-start; gap: .4rem; background: var(--wp--preset--color--white); border-bottom: 1px solid var(--wp--preset--color--border); padding: 1rem 1.25rem 1.5rem; }
  .sc-nav.is-open { display: flex; }
  .sc-nav-toggle { display: inline-flex; }
  .sc-has-mega { width:100%; }
  .sc-nav-parent-row { justify-content:space-between; width:100%; }
  .sc-nav-parent-row > a { flex:1 1 auto; padding:.65rem 0; }
  .sc-submenu-toggle { align-items:center; background:var(--wp--preset--color--surface); border:1px solid var(--wp--preset--color--border); border-radius:8px; cursor:pointer; display:inline-flex; flex:0 0 44px; height:44px; justify-content:center; }
  .sc-submenu-icon { border-bottom:2px solid var(--wp--preset--color--primary); border-right:2px solid var(--wp--preset--color--primary); height:8px; transform:rotate(45deg) translate(-2px,-2px); transition:transform .18s ease; width:8px; }
  .sc-has-mega.is-expanded .sc-submenu-icon { transform:rotate(225deg) translate(-1px,-1px); }
  .sc-nav .sc-has-mega > .sc-mega,
  .sc-nav .sc-has-mega:hover > .sc-mega,
  .sc-nav .sc-has-mega:focus-within > .sc-mega { display:none; opacity:0; visibility:hidden; }
  .sc-nav .sc-has-mega.is-expanded > .sc-mega { display:grid; opacity:1; visibility:visible; position:static; transform:none!important; box-shadow:none; border:0; padding:.4rem 0 .6rem 1rem; grid-template-columns:1fr; min-width:0; }
}

/* equal-height card columns */
.sc-grid .wp-block-column { display: flex; flex-direction: column; }
.sc-grid .wp-block-column > figure { margin: 0; }
.sc-grid .wp-block-column > .wp-block-group { flex: 1; }

/* footer */
.sc-footer a { color: rgba(255,255,255,.82); text-decoration: none; }
.sc-footer a:hover { color: #fff; }
.sc-footer-credit { color: rgba(255,255,255,.6); font-size: .9rem; }

/* responsive video embed */
.sc-video { position: relative; display: block; width: 100%; max-width: 820px; margin-inline: auto; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--wp--custom--radius--lg); box-shadow: var(--wp--custom--shadow--card); }
.sc-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* before/after comparison slider (custom, no plugin) */
.sc-ba { position: relative; width: 100%; max-width: 380px; margin: 0 auto; aspect-ratio: 500 / 956; border-radius: var(--wp--custom--radius--lg); overflow: hidden; box-shadow: var(--wp--custom--shadow--card); user-select: none; touch-action: pan-y; }
.sc-ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.sc-ba .sc-ba-before { clip-path: inset(0 calc(100% - var(--pos, 50%)) 0 0); }
.sc-ba-range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; opacity: 0; cursor: ew-resize; z-index: 3; }
.sc-ba-line { position: absolute; top: 0; bottom: 0; left: var(--pos, 50%); width: 3px; background: #fff; transform: translateX(-1.5px); box-shadow: 0 0 0 1px rgba(0,0,0,.12); z-index: 2; pointer-events: none; }
.sc-ba-knob { position: absolute; top: 50%; left: var(--pos, 50%); width: 40px; height: 40px; transform: translate(-50%,-50%); border-radius: 50%; background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.3); z-index: 2; pointer-events: none; display: grid; place-items: center; color: var(--wp--preset--color--primary); font-size: 15px; font-weight: 700; }
.sc-ba-tag { position: absolute; bottom: .7rem; padding: .25rem .65rem; font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #fff; background: rgba(14,36,51,.62); border-radius: 999px; z-index: 2; pointer-events: none; }
.sc-ba-tag--before { left: .7rem; } .sc-ba-tag--after { right: .7rem; }

/* before/after sliders: stack 1-up on mobile so faces stay legible */
@media (max-width: 781px) {
  .sc-ba-section .wp-block-columns { flex-wrap: wrap; gap: 2rem; }
  .sc-ba-section .wp-block-column { flex-basis: 100%; }
  .sc-ba { max-width: 320px; }
}

/* static side-by-side before/after (both visible — instant impact) */
.sc-baduo { position: relative; max-width: 620px; margin: 0 auto; border-radius: var(--wp--custom--radius--lg); overflow: hidden; box-shadow: var(--wp--custom--shadow--card); line-height: 0; }
.sc-baduo img { width: 100%; height: auto; display: block; }
.sc-baduo .sc-ba-tag { position: absolute; bottom: .7rem; line-height: 1; }
.sc-baduo .sc-ba-tag--before { left: .7rem; } .sc-baduo .sc-ba-tag--after { right: .7rem; }

/* === Jun 2026 (SC->AA parity): trust strip, dark-band buttons, card lift, results grid === */
.sc-stats-strip{display:flex;align-items:stretch;justify-content:center;gap:0;max-width:1080px;margin:0 auto}
.sc-stats-strip .sc-stat{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:.4rem 1.3rem;border-right:1px solid var(--wp--preset--color--border,#D7E5EF)}
.sc-stats-strip .sc-stat:last-child{border-right:none}
.sc-stats-strip .sc-stat-n{font-family:var(--wp--preset--font-family--heading);font-weight:800;font-size:clamp(1.3rem,2.1vw,2rem);line-height:1.1;color:var(--wp--preset--color--primary,#0072BC);letter-spacing:-.02em}
.sc-stats-strip .sc-stat-l{font-size:.8rem;color:var(--wp--preset--color--muted,#5A6B78);margin-top:.4rem;line-height:1.3}
@media(max-width:781px){.sc-stats-strip{flex-wrap:wrap;justify-content:center;overflow-x:visible;row-gap:1rem}.sc-stats-strip .sc-stat{flex:1 1 45%;min-width:0;padding:.5rem 1rem}.sc-stats-strip .sc-stat:nth-child(2n){border-right:none}}
/* solid white CTA for dark bands (beats any global button fill) */
.sc-btn-white .wp-block-button__link{background-color:#fff !important;color:var(--wp--preset--color--primary,#0072BC) !important;border:none}
.sc-btn-white .wp-block-button__link:hover{background-color:#eaf5fb !important}
/* card lift (AA cards were flat) */
.sc-card{box-shadow:0 1px 2px rgba(14,36,51,.05),0 12px 30px rgba(14,36,51,.06)}
.sc-card:hover{box-shadow:0 2px 4px rgba(14,36,51,.07),0 18px 44px rgba(14,36,51,.11)}
/* results before/after gallery grid (reuses sc-card-media) */
.aa-results-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem}
@media(max-width:1000px){.aa-results-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.aa-results-grid{grid-template-columns:1fr}}
.aa-result{background:#fff;border:1px solid var(--wp--preset--color--border,#D7E5EF);border-radius:14px;overflow:hidden;box-shadow:0 1px 2px rgba(14,36,51,.05),0 12px 30px rgba(14,36,51,.06)}
.aa-result img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.aa-result .aa-result-cap{padding:.8rem 1rem;font-size:.85rem;color:var(--wp--preset--color--muted,#5A6B78);display:flex;align-items:center;gap:.4rem}
/* === CREW D: verified arch results (framed composites lead + strips below) === */
.aa-results-v2{display:block}
.aa-results-v2 .aa-lead{display:grid;grid-template-columns:repeat(2,minmax(0,587px));gap:1.4rem;justify-content:center;max-width:1200px;margin:0 auto}
.aa-results-v2 .aa-strips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.2rem;max-width:1100px;margin:1.4rem auto 0}
/* composites + strips render UNCROPPED (full ACTIVE ALIGNER title + all quadrants; whole before->after pair) */
.aa-results-v2 .aa-result img{width:100%;height:auto;aspect-ratio:auto;object-fit:contain;display:block}
.aa-results-v2 .aa-result-cap{justify-content:center;text-align:center;font-weight:600}
@media(max-width:1000px){.aa-results-v2 .aa-lead{grid-template-columns:1fr;max-width:587px}.aa-results-v2 .aa-strips{grid-template-columns:1fr;max-width:587px}}
.sc-video{background:#0E2433}

/* === hero actions row (solid + outline + instagram glyph) === */
.aa-hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.9rem;margin-top:1.8rem}
.aa-hero-btn{display:inline-flex;align-items:center;justify-content:center;font-family:var(--wp--preset--font-family--heading);font-weight:600;font-size:1rem;line-height:1;padding:.9rem 1.6rem;border-radius:8px;text-decoration:none;transition:transform .2s ease,box-shadow .2s ease,background-color .2s ease,color .2s ease}
.aa-hero-btn--solid{background:var(--wp--preset--color--primary,#0072BC);color:#fff;border:2px solid var(--wp--preset--color--primary,#0072BC)}
.aa-hero-btn--solid:hover{background:var(--wp--preset--color--primary-dark,#005A96);border-color:var(--wp--preset--color--primary-dark,#005A96);transform:translateY(-2px);box-shadow:var(--wp--custom--shadow--soft)}
.aa-hero-btn--outline{background:transparent;color:var(--wp--preset--color--primary,#0072BC);border:2px solid var(--wp--preset--color--primary,#0072BC)}
.aa-hero-btn--outline:hover{background:var(--wp--preset--color--primary,#0072BC);color:#fff;transform:translateY(-2px)}
.aa-hero-ig{display:inline-flex;align-items:center;gap:.5rem;color:var(--wp--preset--color--primary,#0072BC);font-family:var(--wp--preset--font-family--heading);font-weight:600;font-size:1rem;text-decoration:none;padding:.9rem .6rem;transition:color .2s ease}
.aa-hero-ig svg{flex:0 0 auto}
.aa-hero-ig:hover{color:var(--wp--preset--color--primary-dark,#005A96)}

/* === Operation Smile testimonial card on navy === */
.aa-quote-card{display:flex;align-items:stretch;gap:0;max-width:880px;margin:0 auto;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:18px;overflow:hidden}
.aa-quote-media{flex:0 0 38%;min-height:240px}
.aa-quote-media img{width:100%;height:100%;object-fit:cover;display:block}
.aa-quote-body{flex:1;padding:2.2rem 2.4rem;display:flex;flex-direction:column;justify-content:center}
.aa-quote-mark{color:var(--wp--preset--color--accent,#00A0DF);opacity:.85;margin-bottom:.8rem}
.aa-quote-text{color:#fff;font-size:1.25rem;line-height:1.55;font-weight:500;margin:0 0 1.1rem}
.aa-quote-attr{color:#c7d6e2;font-size:.9rem;font-weight:600;letter-spacing:.02em;margin:0}
@media(max-width:781px){.aa-quote-card{flex-direction:column}.aa-quote-media{flex:0 0 auto;min-height:220px}.aa-quote-body{padding:1.8rem 1.6rem}.aa-quote-text{font-size:1.1rem}}

/* mega-menu stays open: bridge the 14px gap so the submenu does not vanish when the cursor moves onto it */
.sc-mega::before{content:"";position:absolute;top:-16px;left:0;right:0;height:18px}

/* teen card rows: never cram more than ~3-4 across, wrap instead of breaking words */
.wp-block-columns.aa-cardwrap{flex-wrap:wrap;gap:1.6rem}
.aa-cardwrap > .wp-block-column{flex:1 1 28%;min-width:240px}
/* wide banner: contain fully, do not crop into a small box */
.aa-wide-banner img{width:100%;height:auto;border-radius:16px;display:block}
/* force the teen card rows to wrap to 3 across (beat core column flex) */
.wp-block-columns.aa-cardwrap{flex-wrap:wrap !important}
.wp-block-columns.aa-cardwrap > .wp-block-column{flex:1 1 calc(33.333% - 1.1rem) !important;max-width:calc(33.333% - 1.1rem)}
@media(max-width:781px){.wp-block-columns.aa-cardwrap > .wp-block-column{flex-basis:calc(50% - .8rem) !important;max-width:calc(50% - .8rem)}}
@media(max-width:520px){.wp-block-columns.aa-cardwrap > .wp-block-column{flex-basis:100% !important;max-width:100%}}

/* ALTERNATING SPLIT SECTIONS: DOM order is always image-then-text (sensible mobile stacking).
   .aa-flip reverses to image-RIGHT on desktop only. */
.wp-block-columns.aa-flip{flex-direction:row-reverse}
@media(max-width:781px){.wp-block-columns.aa-flip{flex-direction:column}}

/* 3-STEPS: AA-blue line icon above each step number */
.aa-step-icon{display:flex;align-items:center;justify-content:center;width:3.4rem;height:3.4rem;margin:0 0 .9rem;border-radius:var(--wp--custom--radius--md,14px);background:var(--wp--preset--color--primary-soft,#E3F0FA);color:var(--wp--preset--color--primary,#0072BC)}
.aa-step-icon svg{width:1.9rem;height:1.9rem;display:block}

/* width-A standard 21 Jun: nav 1rem + generous gutter so low-res is not edge-to-edge */
.sc-nav a{font-size:1rem}
.wp-site-blocks .is-layout-constrained{padding-inline:clamp(20px,5vw,64px)}

/* mobile menu scroll-robustness 21 Jun */
@media (max-width:900px){ .sc-nav.is-open{ z-index:300; max-height:calc(100vh - 64px); overflow-y:auto; -webkit-overflow-scrolling:touch; } }

.sc-logo{flex:0 0 auto}
.sc-logo img{flex:0 0 auto;max-width:100%}

/* mobile: footer white wordmark (wide aspect) was overflowing the 390 viewport by 30px */
@media (max-width:768px){ .sc-footer .sc-logo img{ height:auto; max-width:240px; } }


/* ===== component CSS ported from .com (icon-cards + step-cards) ===== */
/* ===== STEP CARDS (process / journey pages) ===== */
.aa-steps{ display:grid; gap:1rem; max-width:840px; margin:0 auto; }
.aa-step-card{ display:flex; gap:1.2rem; align-items:flex-start; background:#fff; border:1px solid #D7E5EF; border-radius:14px; padding:1.4rem 1.6rem; box-shadow:0 1px 2px rgba(14,36,51,.05),0 12px 30px rgba(14,36,51,.06); transition:transform .25s ease, box-shadow .25s ease; }
.aa-step-card:hover{ transform:translateY(-4px); box-shadow:0 2px 4px rgba(14,36,51,.07),0 18px 44px rgba(14,36,51,.11); }
.aa-step-card .aa-step-num{ flex:0 0 auto; width:2.7rem; height:2.7rem; border-radius:999px; background:#DCEEF9; color:#0072bc; font-weight:800; font-size:1.15rem; display:flex; align-items:center; justify-content:center; }
.aa-step-card--plain{ border-left:3px solid #0072bc; background:#EEF7FB; }
.aa-step-body{ flex:1; min-width:0; }
.aa-step-body h3{ margin:.15rem 0 .5rem; font-size:1.18rem; color:#243746; letter-spacing:-.01em; }
.aa-step-body p, .aa-step-body ul{ color:#5A6B78; line-height:1.65; margin:0 0 .55rem; }
.aa-step-body ul{ padding-left:1.2rem; } .aa-step-body li{ margin-bottom:.35rem; }
.aa-step-body :last-child{ margin-bottom:0; }

/* ===== FEATURE ICON CARDS (benefit / feature pages) ===== */
.aa-feat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; max-width:1120px; margin:0 auto; }
.aa-feat-card{ background:#fff; border:1px solid #D7E5EF; border-radius:16px; padding:1.7rem 1.5rem; box-shadow:0 1px 2px rgba(14,36,51,.05),0 12px 30px rgba(14,36,51,.06); transition:transform .25s ease, box-shadow .25s ease; }
.aa-feat-card:hover{ transform:translateY(-6px); box-shadow:0 2px 4px rgba(14,36,51,.07),0 18px 44px rgba(14,36,51,.11); }
.aa-feat-ico{ width:3rem; height:3rem; border-radius:12px; background:#DCEEF9; color:#0072bc; display:inline-flex; align-items:center; justify-content:center; margin-bottom:1rem; }
.aa-feat-ico svg{ width:24px; height:24px; }
.aa-feat-card h3{ color:#243746; font-size:1.15rem; letter-spacing:-.01em; margin:0 0 .5rem; }
.aa-feat-card p{ color:#5A6B78; line-height:1.6; margin:0; }
@media(max-width:900px){ .aa-feat-grid{ grid-template-columns:1fr 1fr; } }
@media(max-width:600px){ .aa-feat-grid{ grid-template-columns:1fr; } }

/* prevent long headings/words overflowing on narrow mobile (e.g. "Troubleshooting:") */
.wp-site-blocks h1, .wp-site-blocks h2, .wp-site-blocks h3{ overflow-wrap:break-word; word-break:break-word; }

/* === Community / follow strip (ported from Smile Club) === */
.sc-community{display:flex;flex-wrap:wrap;justify-content:center;gap:1.1rem;margin-top:2rem}
.sc-comm-brand{flex:1 1 210px;max-width:250px;background:var(--wp--preset--color--white,#fff);border:1px solid var(--wp--preset--color--border,#E2E8F0);border-radius:var(--wp--custom--radius--md,14px);padding:1.3rem 1.1rem 1.4rem;text-align:center;transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.sc-comm-brand:hover{transform:translateY(-5px);box-shadow:0 2px 4px rgba(15,23,42,.05),0 16px 40px rgba(15,23,42,.09);border-color:var(--wp--preset--color--primary-soft,#cfe6f8)}
.sc-comm-name{font-family:var(--wp--preset--font-family--heading);font-weight:700;font-size:1rem;letter-spacing:-.01em;color:var(--wp--preset--color--ink,#13242F);margin:0}
.sc-comm-handle{font-size:.84rem;color:var(--wp--preset--color--muted,#566571);margin:.2rem 0 1rem}
.sc-comm-icons{display:flex;justify-content:center;gap:.55rem}
.sc-comm-ico{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:12px;border:1px solid var(--wp--preset--color--border,#E2E8F0);color:var(--wp--preset--color--ink,#13242F);background:#fff;transition:transform .18s ease,background .18s ease,color .18s ease,border-color .18s ease}
.sc-comm-ico svg{width:20px;height:20px}
.sc-comm-ico:hover{transform:translateY(-2px);color:#fff;border-color:transparent}
.sc-ico-fb:hover{background:#1877F2}
.sc-ico-ig:hover{background:linear-gradient(95deg,#515BD4 0%,#8134AF 30%,#DD2A7B 62%,#F58529 100%)}
.sc-ico-yt:hover{background:#FF0000}
.sc-ico-tt:hover{background:#111}
@media (max-width:600px){.sc-community{gap:.8rem;padding-left:1.1rem;padding-right:1.1rem}.sc-comm-brand{flex:1 1 100%;max-width:100%}}


/* ============================================================
   AA LIGHTBOX  (click-to-expand image viewer)
   Paired with assets/js/aa-lightbox.js — vanilla, no deps.
   ============================================================ */

/* Interactive tiles look interactive */
.aa-lb-tile { cursor: zoom-in; }
.aa-lb-tile:focus-visible {
  outline: 3px solid #1f6f78;
  outline-offset: 3px;
}

/* Scroll lock while the overlay is open */
html.aa-lb-lock, body.aa-lb-lock { overflow: hidden !important; }

/* Backdrop */
.aa-lb-overlay {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(14, 36, 51, 0.92);
  opacity: 0;
  transition: opacity 150ms ease;
  -webkit-tap-highlight-color: transparent;
}
.aa-lb-overlay.is-open { opacity: 1; }
.aa-lb-overlay[hidden] { display: none; }

/* Figure = image + caption */
.aa-lb-figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  max-width: 92vw;
  pointer-events: none; /* clicks pass through to backdrop except on the img */
}
.aa-lb-img {
  display: block;
  max-width: 92vw;
  max-height: 88vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45);
  background: #0e2433;
  pointer-events: auto;
}
.aa-lb-cap {
  color: #eaf1f4;
  font-size: 15px;
  line-height: 1.4;
  text-align: center;
  max-width: 62ch;
  padding: 0 8px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  pointer-events: auto;
}

/* Controls: shared look */
.aa-lb-close,
.aa-lb-nav {
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  cursor: pointer;
  transition: background 150ms ease, transform 150ms ease;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.aa-lb-close:hover,
.aa-lb-nav:hover { background: rgba(255, 255, 255, 0.26); }
.aa-lb-close:active,
.aa-lb-nav:active { transform: scale(0.94); }
.aa-lb-close:focus-visible,
.aa-lb-nav:focus-visible {
  outline: 3px solid #7fd3da;
  outline-offset: 2px;
}

.aa-lb-close { top: 16px; right: 16px; }

.aa-lb-nav { top: 50%; transform: translateY(-50%); }
.aa-lb-nav:active { transform: translateY(-50%) scale(0.94); }
.aa-lb-prev { left: 16px; }
.aa-lb-next { right: 16px; }
.aa-lb-nav[hidden] { display: none; }

.aa-lb-close svg,
.aa-lb-nav svg { display: block; }

/* Small screens: keep controls reachable and the image within bounds */
@media (max-width: 560px) {
  .aa-lb-overlay { padding: 12px; }
  .aa-lb-img { max-width: 94vw; max-height: 82vh; }
  .aa-lb-figure { max-width: 94vw; }
  .aa-lb-cap { font-size: 14px; }
  .aa-lb-nav { min-width: 40px; min-height: 40px; }
  .aa-lb-prev { left: 8px; }
  .aa-lb-next { right: 8px; }
  .aa-lb-close { top: 10px; right: 10px; }
}

/* Respect reduced motion: no transitions at all */
@media (prefers-reduced-motion: reduce) {
  .aa-lb-overlay,
  .aa-lb-close,
  .aa-lb-nav { transition: none !important; }
}

/* === CREW COZA-CHROME: nav CTA button matched to .com .sc-nav-cta (nav unify 2026-07-05) === */
.sc-nav-cta{ background:#0072bc; color:#fff !important; padding:.7rem 1.2rem; border-radius:8px; font-weight:600; transition:background-color .2s ease, transform .2s ease; }
.sc-nav-cta:hover{ background:#005A96; color:#fff !important; transform:translateY(-1px); }
@media (min-width:901px) and (max-width:1180px){ .sc-nav-cta{ font-size:.9rem; } }
@media (max-width:900px){ .sc-nav-cta{ margin-top:.4rem; display:inline-block; } }


/* === CREW COZA testimonials: quote-only cards (replaces flattened Smile Club / clinical images) 2026-07-06 === */
.sc-quote-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem; align-items:stretch; max-width:1000px; margin:0 auto; }
.sc-quote-card{ display:flex; flex-direction:column; background:var(--wp--preset--color--white,#fff); border:1px solid var(--wp--preset--color--border,#D7E5EF); border-radius:var(--wp--custom--radius--lg,18px); box-shadow:var(--wp--custom--shadow--card,0 1px 2px rgba(14,36,51,.05),0 12px 30px rgba(14,36,51,.06)); padding:1.9rem 1.7rem; margin:0; height:100%; }
.sc-quote-mark{ font-family:var(--wp--preset--font-family--heading); font-size:2.6rem; line-height:.7; color:var(--wp--preset--color--primary,#0072bc); margin-bottom:.6rem; }
.sc-quote-text{ flex:1 1 auto; margin:0 0 1.4rem; padding:0; border:0; font-size:1.02rem; line-height:1.6; color:var(--wp--preset--color--ink,#2B3A45); }
.sc-quote-foot{ display:flex; flex-direction:column; gap:.15rem; border-top:1px solid var(--wp--preset--color--border,#D7E5EF); padding-top:1rem; }
.sc-quote-name{ font-family:var(--wp--preset--font-family--heading); font-weight:700; font-size:1rem; color:var(--wp--preset--color--ink,#2B3A45); letter-spacing:.01em; }
.sc-quote-role{ font-size:.82rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--wp--preset--color--primary,#0072bc); }
@media(max-width:900px){ .sc-quote-row{ grid-template-columns:1fr; max-width:520px; gap:1.2rem; } }

/* === AA.co.za homepage Round 1 — treatment plan + inline step headers (2026-07-17) === */
.aa-home-plan .sc-plan-preview{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);
  align-items:center;
  gap:clamp(1.5rem,4vw,3.5rem);
  padding:clamp(1.25rem,3vw,2.25rem);
  background:#fff;
  border:1px solid #D7E5EF;
  border-radius:18px;
  box-shadow:0 1px 2px rgba(14,36,51,.05),0 16px 38px rgba(14,36,51,.08);
}
.aa-home-plan .sc-plan-preview__media{ margin:0; }
.aa-home-plan .sc-plan-preview__media img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:4/3;
  object-fit:cover;
  border-radius:14px;
  border:1px solid #D7E5EF;
}
.aa-home-plan .sc-plan-preview__media figcaption{
  margin:.65rem .25rem 0;
  color:#5A6B78;
  font-size:.78rem;
  line-height:1.45;
}
.aa-home-plan .sc-plan-preview__body h2{
  margin:.35rem 0 .8rem;
  color:var(--wp--preset--color--ink,#243746);
  font-family:var(--wp--preset--font-family--heading);
  font-size:clamp(1.65rem,3vw,2.35rem);
  line-height:1.12;
}
.aa-home-plan .sc-plan-preview__body p{
  color:#5A6B78;
  line-height:1.65;
  margin:0 0 .9rem;
}
.aa-home-plan .sc-plan-preview__body .sc-plan-preview__lead{
  color:var(--wp--preset--color--ink,#243746);
  font-size:1.08rem;
  font-weight:650;
  line-height:1.5;
}
.aa-home-plan .sc-plan-preview__body .sc-plan-link{ margin-bottom:0; }
.aa-home-plan .sc-plan-preview__body .sc-plan-link a{ font-weight:700; }

#how .aa-step-heading{
  display:grid;
  grid-template-columns:2.6rem 3.1rem minmax(0,1fr);
  align-items:center;
  gap:.55rem;
  min-height:3.1rem;
}
#how .aa-step-heading .sc-step-num{ width:2.6rem; height:2.6rem; }
#how .aa-step-heading .aa-step-icon{
  width:3.1rem;
  height:3.1rem;
  margin:0;
  border-radius:14px;
}
#how .aa-step-heading .aa-step-icon svg{ width:1.7rem; height:1.7rem; }
#how .aa-step-heading .aa-step-icon{ background-position:center; background-repeat:no-repeat; background-size:1.7rem 1.7rem; }
#how .aa-step-icon--scan{ background-image:url("assets/icons/aa-preview.svg"); }
#how .aa-step-icon--wear{ background-image:url("assets/icons/aa-removable.svg"); }
#how .aa-step-icon--retain{ background-image:url("assets/icons/aa-guided.svg"); }
#how .aa-step-heading h3{
  margin:0;
  color:var(--wp--preset--color--ink,#243746);
  font-family:var(--wp--preset--font-family--heading);
  font-size:1rem;
  font-weight:750;
  line-height:1.2;
}
#how .aa-step-heading + p{ margin-top:.9rem; }

@media(max-width:781px){
  .aa-home-plan .sc-plan-preview{ grid-template-columns:1fr; }
  #how .aa-step-heading{ grid-template-columns:2.6rem 3.1rem minmax(0,1fr); }
  #how .aa-step-heading h3{ font-size:1.08rem; }
}

.aa-lab-process-image{ margin:0 auto; max-width:900px; }
.aa-lab-process-image img{ aspect-ratio:16/9; border-radius:var(--wp--custom--radius--lg); box-shadow:var(--wp--custom--shadow--card); display:block; object-fit:cover; width:100%; }