/* ==========================================================================
   MPO INNER PAGES — Azar-Mehr Orthodontics
   Design system mirrors the approved homepage (.mpo-sec / .mpo-rev / .mpo-ft):
   DM Serif Display headings, Open Sans body, plum palette, 88% wrappers,
   no flat backgrounds, no max-width caps on body copy.
   Everything is scoped under .mpo-ip so Divi's stylesheet cannot reach in.
   ========================================================================== */

.mpo-ip{
  --p:#5c5378;--pd:#3f3652;--pl:#7b7196;--gold:#c2ad74;
  --ink:#241f33;--ink2:#4a4360;--mut:#6f6885;--ln:#e2dfec;
  position:relative;isolation:isolate;
  font-family:"Open Sans",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  color:var(--ink);
}
.mpo-ip *{box-sizing:border-box}
.mpo-ip p{padding:0!important;margin:0}
.mpo-ip ul,.mpo-ip ol,.mpo-ip li{list-style:none!important;margin:0;padding:0}
.mpo-ip a{text-decoration:none}
.mpo-ip img{max-width:100%;height:auto}
.mpo-ip h1,.mpo-ip h2,.mpo-ip h3,.mpo-ip h4,.mpo-ip h5{
  font-family:"DM Serif Display",Georgia,"Times New Roman",serif!important;
  font-weight:400!important;text-transform:none!important;letter-spacing:-.004em;
  margin:0;padding:0;line-height:1.14;color:var(--ink)}


/* --------------------------------------------------------------------------
   SMOOTH-SCROLL ANCHORS (jump rails on First Visit / Emergencies / FAQ).
   The two GHL embed pages override this back to `auto !important` in their own
   head block — a smooth scroll there loses the race with the iframe's own
   scroll and defeats the no-scroll-jump guard.
   -------------------------------------------------------------------------- */
html{scroll-behavior:smooth;scroll-padding-top:26px}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}


/* --------------------------------------------------------------------------
   STICKY-BAR CLEARANCE
   .mpo-sticky is position:fixed at the viewport bottom, so without this the
   last band of the page — in practice the footer's Privacy Policy / Terms /
   MyPracticeOnline credit row — sits under it permanently and cannot be
   scrolled clear. These are the floor; mpo-inner.js overwrites them with the
   bar's measured height so the clearance stays right if the bar changes.
   -------------------------------------------------------------------------- */
/* MPO FLOATING CTA v1 (2026-09-08) replaced the full-width .mpo-sticky bar.
   The capsule floats, auto-hides once the footer scrolls in, and is dismissible,
   so the page no longer needs permanent bottom clearance. */
body{padding-bottom:0}

/* width — 88% of the viewport, never capped (global PAGE WIDTH rule) */
.ip-w{position:relative;z-index:1;width:88%;margin:0 auto}

/* --------------------------------------------------------------------------
   HERO
   -------------------------------------------------------------------------- */
/* The floor has to sit ABOVE the tallest hero's own content at each width,
   otherwise content drives the height — and when DM Serif Display swaps in the
   H1 re-wraps, the hero resizes and everything below it jumps (measured 0.186
   CLS at 390px). Tallest measured content: 373px @390, 300px @768, 430px @1440. */
.ip-hero{position:relative;isolation:isolate;overflow:hidden;
  min-height:clamp(400px,30vw,430px);display:flex;align-items:flex-end;
  background:linear-gradient(135deg,#5c5378 0%,#564e75 55%,#4b4367 100%)}
.ip-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:.42;z-index:0;animation:ipKen 26s ease-in-out infinite alternate}
@keyframes ipKen{from{transform:scale(1)}to{transform:scale(1.08)}}
@media(prefers-reduced-motion:reduce){.ip-hero-img{animation:none}}
.ip-hero::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(100deg,rgba(28,23,48,.90) 0%,rgba(36,29,56,.70) 42%,rgba(36,29,56,.14) 78%),
             linear-gradient(to top,rgba(20,16,36,.72),transparent 58%)}
.ip-hero .ip-w{z-index:2;padding:clamp(46px,7vw,84px) 0 clamp(30px,4vw,48px)}
.ip-hero-rule{width:56px;height:3px;background:var(--gold);border-radius:2px;margin-bottom:16px}
.ip-kicker{display:block;color:var(--gold);font-family:"Open Sans",system-ui,sans-serif;
  font-size:11px;font-weight:700;letter-spacing:2.6px;text-transform:uppercase;margin-bottom:13px}
.ip-hero h1{color:#fff!important;font-size:clamp(29px,3.5vw,52px);line-height:1.08}
.ip-hero h1 em{font-style:italic;color:var(--gold)}
.ip-hero-sub{margin-top:16px!important;color:#ded8ee;font-size:clamp(15px,1.15vw,17.5px);
  line-height:1.72;font-family:"Open Sans",system-ui,sans-serif}
.ip-chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:22px}
.ip-chip{display:inline-flex;align-items:center;gap:7px;padding:8px 15px;border-radius:40px;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.24);
  color:#efeaf9;font-size:12.5px;font-weight:600;letter-spacing:.2px;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.ip-chip svg{width:14px;height:14px;flex:none;fill:none;stroke:var(--gold);stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}

/* breadcrumbs */
.ip-crumb{position:relative;isolation:isolate;padding:13px 0;
  background:linear-gradient(180deg,#f4f1fa,#ece8f4);border-bottom:1px solid var(--ln)}
.ip-crumb::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:repeating-linear-gradient(-38deg,rgba(36,31,51,.03) 0 1px,transparent 1px 13px)}
.ip-crumb ol{display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  font-size:12.5px;color:var(--mut);font-family:"Open Sans",system-ui,sans-serif}
.ip-crumb a{color:var(--p);font-weight:600}
.ip-crumb a:hover{color:var(--pd);text-decoration:underline}
.ip-crumb li::after{content:'›';margin-left:8px;color:#b3abc8}
.ip-crumb li:last-child::after{content:''}
.ip-crumb li[aria-current]{color:var(--ink);font-weight:600}

/* --------------------------------------------------------------------------
   SECTION BANDS — never a flat background, never two neighbours alike
   -------------------------------------------------------------------------- */
.ip-sec{position:relative;isolation:isolate;padding:clamp(46px,5vw,72px) 0}
.ip-sec>.ip-w{position:relative;z-index:1}

.tone-a{background:linear-gradient(180deg,#faf9fd,#f1eef8)}
.tone-a::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(56% 62% at 0% 0%,rgba(123,113,150,.20),transparent 66%),
             radial-gradient(rgba(36,31,51,.09) 1.1px,transparent 1.1px);
  background-size:auto,24px 24px}

.tone-b{background:linear-gradient(180deg,#f6f3fb,#e9e4f3)}
.tone-b::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(52% 58% at 100% 0%,rgba(194,173,116,.16),transparent 64%),
             repeating-linear-gradient(-38deg,rgba(36,31,51,.028) 0 1px,transparent 1px 14px)}

.tone-c{background:linear-gradient(165deg,#564e75 0%,#4b4367 58%,#443d5c 100%);color:#fff}
.tone-c::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(52% 58% at 100% 0%,rgba(194,173,116,.13),transparent 64%),
             radial-gradient(48% 54% at 0% 100%,rgba(123,113,150,.30),transparent 66%)}
.tone-c h2,.tone-c h3,.tone-c h4{color:#fff!important}
.tone-c .ip-prose,.tone-c .ip-prose p,.tone-c .ip-prose li{color:#cdc5e0}
.tone-c .ip-prose strong{color:#fff}
.tone-c .ip-prose a{color:var(--gold);border-bottom-color:rgba(194,173,116,.5)}

.tone-d{background:linear-gradient(180deg,#fdfcff,#f3f1f9)}
.tone-d::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(58% 60% at 100% 100%,rgba(123,113,150,.18),transparent 66%),
             repeating-linear-gradient(38deg,rgba(36,31,51,.026) 0 1px,transparent 1px 15px)}

/* section headers — heading-only, supporting line flows as body copy */
.ip-head{display:block;margin-bottom:26px}
.ip-head h2{font-size:clamp(25px,2.75vw,50px)}
.ip-head h2::after{content:'';display:block;width:52px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--gold),rgba(194,173,116,0));margin-top:16px}
.ip-sup{margin-top:18px!important;color:var(--ink2);font-size:clamp(15.5px,1.05vw,17px);
  line-height:1.82;font-family:"Open Sans",system-ui,sans-serif}
.tone-c .ip-sup{color:#c8c0dd}

/* --------------------------------------------------------------------------
   PROSE — one column, full width, no measure cap
   -------------------------------------------------------------------------- */
.ip-prose{max-width:none;font-family:"Open Sans",system-ui,sans-serif;
  font-size:clamp(15.5px,1.05vw,17px);line-height:1.85;color:var(--ink2)}
.ip-prose p{margin:0 0 20px!important}
.ip-prose p:last-child{margin-bottom:0!important}
.ip-prose strong,.ip-prose b{color:var(--ink);font-weight:700}
.ip-prose a{color:var(--p);font-weight:600;border-bottom:1px solid rgba(92,83,120,.35)}
.ip-prose a:hover{color:var(--pd);border-bottom-color:var(--pd)}
.ip-prose h2{font-size:clamp(23px,2vw,32px);margin:38px 0 16px}
.ip-prose h3{font-size:clamp(19px,1.5vw,24px);margin:30px 0 12px;color:var(--p)}
.ip-prose h4{font-size:18px;margin:24px 0 10px}
.ip-prose ul{margin:0 0 20px!important}
.ip-prose ul li{position:relative;padding-left:24px!important;margin-bottom:10px}
.ip-prose ul li::before{content:'';position:absolute;left:4px;top:.72em;width:7px;height:7px;
  border-radius:50%;background:var(--gold)}
.ip-prose ol{counter-reset:ipn;margin:0 0 20px!important}
.ip-prose ol li{position:relative;padding-left:30px!important;margin-bottom:10px;counter-increment:ipn}
.ip-prose ol li::before{content:counter(ipn) '.';position:absolute;left:0;top:0;
  color:var(--p);font-weight:700}

/* gold-rule callout */
.ip-note{position:relative;margin:26px 0 0;padding:20px 24px;border-radius:0 10px 10px 0;
  border-left:4px solid var(--gold);background:linear-gradient(120deg,#f5f1e6,#efeaf6);
  font-family:"Open Sans",system-ui,sans-serif;font-size:15.5px;line-height:1.8;color:var(--ink2)}
.tone-c .ip-note{background:linear-gradient(120deg,rgba(255,255,255,.10),rgba(255,255,255,.04));
  color:#d3cce4;border-left-color:var(--gold)}

/* --------------------------------------------------------------------------
   GRIDS
   -------------------------------------------------------------------------- */
.ip-g2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.ip-g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.ip-g4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}

/* --------------------------------------------------------------------------
   LINK CARDS (hub pages)
   -------------------------------------------------------------------------- */
.ip-lc{position:relative;display:flex;flex-direction:column;gap:12px;padding:28px 26px 26px;
  border-radius:14px;overflow:hidden;background:linear-gradient(168deg,#ffffff,#f2eff9);border:1px solid var(--ln);
  box-shadow:0 12px 30px rgba(36,31,51,.10);transition:transform .25s cubic-bezier(.4,0,.2,1),box-shadow .25s}
.ip-lc::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(60% 70% at 100% 0%,rgba(123,113,150,.14),transparent 68%)}
.ip-lc:hover{transform:translateY(-4px);box-shadow:0 22px 46px rgba(36,31,51,.19)}
.ip-lc>*{position:relative;z-index:1}
.ip-lc-ic{width:44px;height:44px;border-radius:11px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--pl),var(--p));box-shadow:0 6px 16px rgba(92,83,120,.30)}
.ip-lc-ic svg{width:22px;height:22px;fill:none;stroke:#fff;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.ip-lc h3{font-size:20px;line-height:1.28}
.ip-lc p{font-family:"Open Sans",system-ui,sans-serif;font-size:14.5px;line-height:1.7;color:var(--ink2)}
.ip-lc-go{display:inline-flex;align-items:center;gap:7px;margin-top:auto;padding-top:6px;
  color:var(--p);font-family:"Open Sans",system-ui,sans-serif;font-size:11.5px;font-weight:700;
  letter-spacing:2px;text-transform:uppercase}
.ip-lc-go svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;transition:transform .22s}
.ip-lc:hover .ip-lc-go svg{transform:translateX(4px)}

/* --------------------------------------------------------------------------
   PHOTO TILES (hub pages) — a destination card is a real client photograph,
   never a white box. Box ratio 3/2 matches the source photos within ~11%.
   -------------------------------------------------------------------------- */
.ip-pt-grid .ip-pt-b{padding:18px 20px 18px}
.ip-pt-grid .ip-pt-go{margin-top:10px}
.ip-pt{position:relative;display:block;overflow:hidden;border-radius:16px;isolation:isolate;
  background:#241f33;box-shadow:0 16px 38px rgba(36,31,51,.20);
  transition:transform .3s cubic-bezier(.4,0,.2,1),box-shadow .3s}
.ip-pt:hover{transform:translateY(-5px);box-shadow:0 28px 58px rgba(36,31,51,.30)}
.ip-pt-fig{position:relative;margin:0;aspect-ratio:3/2;overflow:hidden}
.ip-pt-fig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s cubic-bezier(.22,.61,.36,1)}
.ip-pt:hover .ip-pt-fig img{transform:scale(1.055)}
.ip-pt-fig::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(23,19,36,.94) 0%,rgba(28,23,44,.80) 26%,
             rgba(36,31,51,.34) 55%,rgba(36,31,51,.06) 100%),
             radial-gradient(70% 60% at 100% 0%,rgba(194,173,116,.16),transparent 66%)}
.ip-pt-b{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:22px 24px 20px}
.ip-pt-b::before{content:'';display:block;width:40px;height:2px;border-radius:2px;
  background:var(--gold);margin-bottom:12px;transition:width .3s}
.ip-pt:hover .ip-pt-b::before{width:70px}
.ip-pt h3{color:#fff!important;font-size:clamp(19px,1.35vw,24px);line-height:1.2}
.ip-pt p{margin-top:8px!important;font-family:"Open Sans",system-ui,sans-serif;
  font-size:14px;line-height:1.62;color:#ded8ee}
.ip-pt-go{display:inline-flex;align-items:center;gap:7px;margin-top:14px;
  font-family:"Open Sans",system-ui,sans-serif;font-size:11px;font-weight:700;
  letter-spacing:2.2px;text-transform:uppercase;color:var(--gold)}
.ip-pt-go svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .22s}
.ip-pt:hover .ip-pt-go svg{transform:translateX(5px)}
/* On a phone the overlay would cover ~87% of the photo — so the caption drops
   BELOW the image instead of sitting on it. Still no white box: the caption
   panel is the dark plum band. */
@media(max-width:640px){
  .ip-pt{display:flex;flex-direction:column;
    background:linear-gradient(165deg,#564e75 0%,#4b4367 60%,#443d5c 100%)}
  .ip-pt-fig{aspect-ratio:16/9;flex:none}
  .ip-pt-fig::after{background:linear-gradient(to top,rgba(28,23,44,.55),transparent 46%)}
  .ip-pt-b{position:static;padding:18px 20px 20px}
  .ip-pt h3{font-size:21px}
}

/* --------------------------------------------------------------------------
   MAP PANEL — the practice's own Google Business listing, never an address pin
   -------------------------------------------------------------------------- */
/* contact band: copy column + live GBP map, equal height, no dead air */
.ip-contact2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.06fr);
  gap:clamp(26px,3.2vw,54px);align-items:stretch}
.ip-contact2-a{display:flex;flex-direction:column;gap:26px}
.ip-contact2-a .ip-head{margin-bottom:0}
.ip-contact2-a .ip-btns{margin-top:auto;padding-top:4px}
.ip-hoursbox{padding-top:22px;border-top:1px solid rgba(255,255,255,.15)}
.ip-hourshd{display:block;font-family:"Open Sans",system-ui,sans-serif;font-size:11.5px;
  font-weight:700;letter-spacing:2.4px;text-transform:uppercase;color:var(--gold);margin-bottom:14px}
.ip-contact2 .ip-hours li{justify-content:flex-start}
.ip-contact2 .ip-hours li span:first-child{width:170px}
@media(max-width:900px){.ip-contact2{grid-template-columns:minmax(0,1fr)}
  .ip-contact2-b{order:-1}.ip-contact2 .ip-map{min-height:340px}}
.ip-contact2-b{display:flex}
.ip-contact2 .ip-map{position:relative;flex:1;min-height:100%;border-radius:16px;overflow:hidden;
  background:#4c4466;border:1px solid rgba(255,255,255,.16);
  box-shadow:0 16px 38px rgba(15,12,26,.36)}
.ip-contact2 .ip-map iframe{position:absolute;inset:0;width:100%;height:100%;
  min-height:320px;border:0;filter:saturate(.94)}

/* --------------------------------------------------------------------------
   50/50 SPLIT (image + copy)
   -------------------------------------------------------------------------- */
/* The media block is always first in the DOM, so the media column is the FIRST
   track by default and the SECOND when .rev flips it with order. --m pins that
   track to the photo's own pixel width, which is what stops a 540px source
   being stretched across a 675px slot. */
.ip-split{display:grid;grid-template-columns:minmax(0,var(--m,1fr)) minmax(0,1fr);
  gap:clamp(28px,3.6vw,58px);align-items:center}
.ip-split.rev{grid-template-columns:minmax(0,1fr) minmax(0,var(--m,1fr))}
.ip-split.rev .ip-split-media{order:2}
.ip-split-media{position:relative;border-radius:14px;overflow:hidden;
  box-shadow:0 16px 38px rgba(36,31,51,.20)}
.ip-split-media img{display:block;width:100%;height:auto;transition:transform .6s cubic-bezier(.4,0,.2,1)}
.ip-split-media:hover img{transform:scale(1.05)}
.ip-split-media figcaption{font-family:"Open Sans",system-ui,sans-serif;font-size:12.5px;
  color:var(--mut);padding:10px 2px 0}

/* stacked media column */
.ip-stack{display:grid;gap:20px}
.ip-frame{border-radius:14px;overflow:hidden;box-shadow:0 14px 34px rgba(36,31,51,.18);background:#efecf7}
.ip-frame img{display:block;width:100%;height:auto;transition:transform .6s cubic-bezier(.4,0,.2,1)}
.ip-frame:hover img{transform:scale(1.04)}

/* --------------------------------------------------------------------------
   PEOPLE (team)
   -------------------------------------------------------------------------- */
.ip-person{display:flex;flex-direction:column;background:linear-gradient(168deg,#ffffff,#f2eff9);border:1px solid var(--ln);
  border-radius:14px;overflow:hidden;box-shadow:0 12px 30px rgba(36,31,51,.11);
  transition:transform .25s cubic-bezier(.4,0,.2,1),box-shadow .25s}
.ip-person:hover{transform:translateY(-4px);box-shadow:0 22px 46px rgba(36,31,51,.19)}
.ip-person-shot{overflow:hidden;aspect-ratio:499/334;background:#e8e4f1}
.ip-person-shot img{display:block;width:100%;height:100%;object-fit:cover;
  transition:transform .6s cubic-bezier(.4,0,.2,1)}
.ip-person:hover .ip-person-shot img{transform:scale(1.06)}
.ip-person-body{padding:22px 24px 26px;display:flex;flex-direction:column;gap:10px}
.ip-person-body h2,.ip-person-body h3{font-size:23px;line-height:1.15}
.ip-person-role{font-family:"Open Sans",system-ui,sans-serif;font-size:11.5px;font-weight:700;
  letter-spacing:1.9px;text-transform:uppercase;color:var(--gold)}
.ip-person-body p:not(.ip-person-role){font-family:"Open Sans",system-ui,sans-serif;
  font-size:15px;line-height:1.8;color:var(--ink2)}

/* --------------------------------------------------------------------------
   ACCORDION (FAQ)
   -------------------------------------------------------------------------- */
.ip-acc{display:grid;gap:12px}
.ip-acc-i{background:linear-gradient(168deg,#ffffff,#f2eff9);border:1px solid var(--ln);border-radius:11px;overflow:hidden;
  box-shadow:0 6px 18px rgba(36,31,51,.07);transition:box-shadow .25s,transform .25s}
.ip-acc-i:hover{box-shadow:0 14px 32px rgba(36,31,51,.14);transform:translateY(-2px)}
.ip-acc-q{width:100%;display:flex;align-items:flex-start;justify-content:space-between;gap:18px;
  padding:19px 22px;background:none;border:0;cursor:pointer;text-align:left;
  font-family:"Open Sans",system-ui,sans-serif;font-size:16px;font-weight:700;
  line-height:1.5;color:var(--ink)}
.ip-acc-q:hover{color:var(--p)}
.ip-acc-q svg{width:19px;height:19px;flex:none;margin-top:2px;fill:none;stroke:var(--p);
  stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round;transition:transform .28s cubic-bezier(.4,0,.2,1)}
.ip-acc-i.open .ip-acc-q svg{transform:rotate(180deg)}
.ip-acc-i.open .ip-acc-q{color:var(--p)}
.ip-acc-a{display:none;padding:0 22px 22px;font-family:"Open Sans",system-ui,sans-serif;
  font-size:15.5px;line-height:1.85;color:var(--ink2);border-top:1px solid #f0edf7}
.ip-acc-i.open .ip-acc-a{display:block;padding-top:17px}
.ip-acc-a p{margin:0 0 14px!important}
.ip-acc-a p:last-child{margin-bottom:0!important}

/* --------------------------------------------------------------------------
   GALLERY + LIGHTBOX
   -------------------------------------------------------------------------- */
.ip-gal{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.ip-gal-i{position:relative;display:block;border-radius:13px;overflow:hidden;cursor:zoom-in;
  box-shadow:0 12px 30px rgba(36,31,51,.16);background:#e8e4f1;
  transition:transform .25s cubic-bezier(.4,0,.2,1),box-shadow .25s}
.ip-gal-i:hover{transform:translateY(-4px);box-shadow:0 22px 46px rgba(36,31,51,.24)}
.ip-gal-i img{display:block;width:100%;height:100%;aspect-ratio:1104/737;object-fit:cover;
  transition:transform .6s cubic-bezier(.4,0,.2,1)}
.ip-gal-i:hover img{transform:scale(1.06)}
.ip-gal-cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:26px 16px 13px;
  font-family:"Open Sans",system-ui,sans-serif;font-size:13px;font-weight:600;color:#fff;
  background:linear-gradient(to top,rgba(22,17,36,.86),transparent)}

.ip-lb{position:fixed;inset:0;z-index:99999;display:none;align-items:center;justify-content:center;
  background:rgba(18,14,32,.94);padding:24px}
.ip-lb.on{display:flex}
.ip-lb img{max-width:94vw;max-height:84vh;width:auto;height:auto;border-radius:8px;
  box-shadow:0 30px 80px rgba(0,0,0,.6)}
.ip-lb-cap{position:absolute;left:0;right:0;bottom:26px;text-align:center;color:#e6e0f2;
  font-family:"Open Sans",system-ui,sans-serif;font-size:14px}
.ip-lb-x,.ip-lb-p,.ip-lb-n{position:absolute;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28);
  color:#fff;width:46px;height:46px;border-radius:50%;cursor:pointer;display:grid;place-items:center;
  font-size:22px;line-height:1;transition:.2s}
.ip-lb-x:hover,.ip-lb-p:hover,.ip-lb-n:hover{background:rgba(255,255,255,.24)}
.ip-lb-x{top:22px;right:22px}
.ip-lb-p{left:20px;top:50%;transform:translateY(-50%)}
.ip-lb-n{right:20px;top:50%;transform:translateY(-50%)}

/* --------------------------------------------------------------------------
   BEFORE / AFTER  (matches the homepage ms-ba pattern)
   -------------------------------------------------------------------------- */
/* The before/after source photos are only 303px wide each, so a track is
   capped at 606px (2 x 303). auto-fit then packs as many columns as fit,
   which fills the row at every viewport without ever upscaling them. */
.ip-ba{display:grid;gap:26px;justify-content:center;
  grid-template-columns:repeat(2,minmax(0,606px));align-items:stretch}
@media(max-width:1300px){.ip-ba{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px){.ip-ba{grid-template-columns:minmax(0,1fr)}}
/* the before/after source files are 303px wide, so a 606px card renders the
   pair at exactly 1x — any wider and the teeth go soft. */
.ip-ba-card{display:flex;flex-direction:column;height:100%}
.ip-ba-card{position:relative;background:#fff;justify-self:stretch;border-radius:13px;overflow:hidden;
  box-shadow:0 14px 34px rgba(36,31,51,.16);
  transition:transform .26s cubic-bezier(.4,0,.2,1),box-shadow .26s}
.ip-ba-card:hover{transform:translateY(-5px);box-shadow:0 22px 46px rgba(36,31,51,.24)}
.ip-ba-pair{position:relative;display:grid;grid-template-columns:1fr 1fr;width:100%;flex:none}
.ip-ba-shot{position:relative;overflow:hidden}
.ip-ba-shot img{display:block;width:100%!important;max-width:100%!important;height:100%;aspect-ratio:3/2;object-fit:cover}
.ip-ba-shot.after{border-left:2px solid #fff}
.ip-ba-tag{position:absolute;top:8px;z-index:2;display:inline-block;
  font-family:"Open Sans",system-ui,sans-serif;font-size:9px;font-weight:700;line-height:1;
  letter-spacing:1.1px;text-transform:uppercase;
  padding:4px 8px;border-radius:20px;color:#fff;background:rgba(30,24,46,.72)}
.ip-ba-shot.before .ip-ba-tag{left:8px}
.ip-ba-shot.after .ip-ba-tag{right:8px;background:rgba(194,173,116,.88);color:#2a2038}
.ip-ba-arrow{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;
  width:38px;height:38px;border-radius:50%;background:#fff;display:grid;place-items:center;
  box-shadow:0 4px 14px rgba(30,24,46,.30)}
.ip-ba-arrow svg{width:16px;height:16px;fill:none;stroke:var(--p);stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round}
/* .ip-ba-cap is a <p>, and the global `.mpo-ip p{padding:0!important}` reset
   was zeroing its padding, so the caption sat flush on the card edge. */
.mpo-ip p.ip-ba-cap{flex:1;margin:0!important;padding:13px 18px 16px!important;
  font-family:"Open Sans",system-ui,sans-serif;
  font-size:13px;line-height:1.5;color:var(--ink2)}

/* --------------------------------------------------------------------------
   VIDEO (click-to-load YouTube facade + transcript)
   -------------------------------------------------------------------------- */
/* Patient videos: 4 across, centred so a short last row does not sit ragged
   at the left. These are old 240p/480p phone recordings — the source has no
   higher resolution — so the sharp frame is never scaled past 1x; the tile is
   filled by a blurred copy of the same frame instead of black letterbox bars. */
.ip-vids{display:flex;flex-wrap:wrap;justify-content:center;gap:22px}
.ip-vids>.ip-vid{flex:0 0 calc(25% - 16.5px);max-width:calc(25% - 16.5px)}
/* a lone video must never sit in a 3-up grid - it left 859px of dead band at
   1440 and 1141px at 1920 on /los-angeles-orthodontist/ (measured 2026-09-08) */
.ip-vids:has(> .ip-vid:only-child){grid-template-columns:repeat(2,minmax(0,1fr))}

/* ---- merged media band: one video + the office photos, 4 equal tiles ---- */
.ip-media{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,1.4vw,26px)}
@media(min-width:1600px){.ip-media{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:700px){.ip-media{grid-template-columns:1fr}}
.ip-mt{position:relative;margin:0;border-radius:13px;overflow:hidden;background:#4b4364;
  box-shadow:0 16px 38px -18px rgba(14,10,26,.72)}
.ip-mt>img,.ip-mt .ip-vid-fr{display:block;width:100%;aspect-ratio:16/10;object-fit:cover}
.ip-mt .ip-vid-fr{position:relative;cursor:pointer;border:0;padding:0;background:none}
.ip-mt .ip-vid-fr img{display:block;width:100%;height:100%;object-fit:cover}
.ip-mt .ip-vid-fr::after{content:'';position:absolute;inset:0;background:rgba(28,23,48,.24);transition:.24s}
.ip-mt .ip-vid-fr:hover::after{background:rgba(28,23,48,.06)}
.ip-mt figcaption{position:absolute;left:0;right:0;bottom:0;z-index:3;pointer-events:none;
  padding:26px 16px 13px;color:#fff;font-weight:700;font-size:clamp(13px,.82vw,15.5px);letter-spacing:.01em;
  background:linear-gradient(to top,rgba(20,15,34,.86),transparent)}
.ip-mt-vid{outline:1px solid rgba(194,173,116,.45);outline-offset:-1px}
.ip-vid{position:relative;border-radius:13px;overflow:hidden;background:#4b4364;
  box-shadow:0 14px 34px rgba(36,31,51,.20);
  transition:transform .25s cubic-bezier(.4,0,.2,1),box-shadow .25s}
.ip-vid:hover{transform:translateY(-4px);box-shadow:0 22px 46px rgba(36,31,51,.28)}
.ip-vid-fr{position:relative;aspect-ratio:3/4;cursor:pointer;display:flex;align-items:center;
  justify-content:center;overflow:hidden;width:100%;border:0;padding:0;background:#241f33}
.ip-vid-bg{position:absolute;inset:-8%;z-index:0;background-size:cover;background-position:center;
  filter:blur(24px) saturate(1.05) brightness(.52);transform:scale(1.12)}
.ip-vid-fr img{position:relative;z-index:1;display:block;width:auto;height:auto;
  max-width:100%!important;max-height:100%!important;object-fit:contain;
  box-shadow:0 10px 30px rgba(12,9,22,.45)}
.ip-vid-fr::after{content:'';position:absolute;inset:0;background:rgba(28,23,48,.22);transition:.24s}
.ip-vid-fr:hover::after{background:rgba(28,23,48,.06)}
.ip-vid-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;
  width:62px;height:44px;border-radius:11px;background:rgba(92,83,120,.92);display:grid;place-items:center;
  box-shadow:0 8px 22px rgba(18,14,32,.44);transition:transform .24s,background .24s}
.ip-vid-fr:hover .ip-vid-play{transform:translate(-50%,-50%) scale(1.09);background:var(--gold)}
.ip-vid-play svg{width:20px;height:20px;fill:#fff}
.ip-vid-fr:hover .ip-vid-play svg{fill:#2a2038}
.ip-vid iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.ip-vid-cap{padding:14px 17px 15px;font-family:"Open Sans",system-ui,sans-serif;
  display:flex;flex-direction:column;gap:3px}
.ip-vid-cap strong{font-size:15.5px;font-weight:700;color:#fff;letter-spacing:.01em}
.ip-vid-cap span{font-size:11.5px;font-weight:700;letter-spacing:1.8px;text-transform:uppercase;color:#e8dfc4}
.ip-vids .video-transcript{border-top:1px solid rgba(255,255,255,.13)}
@media(max-width:1400px){.ip-vids>.ip-vid{flex:0 0 calc(33.333% - 15px);max-width:calc(33.333% - 15px)}}
@media(max-width:1000px){.ip-vids>.ip-vid{flex:0 0 calc(50% - 11px);max-width:calc(50% - 11px)}}
@media(max-width:640px){.ip-vids>.ip-vid{flex:0 0 100%;max-width:100%}}

/* --------------------------------------------------------------------------
   HOURS / NAP block
   -------------------------------------------------------------------------- */
.ip-info{display:grid;gap:14px;font-family:"Open Sans",system-ui,sans-serif;font-size:15.5px;line-height:1.7}
.ip-info-row{display:flex;align-items:flex-start;gap:13px;color:var(--ink2)}
.ip-info-row svg{width:19px;height:19px;flex:none;margin-top:3px;fill:none;stroke:var(--p);
  stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.tone-c .ip-info-row{color:#cdc5e0}
.tone-c .ip-info-row svg{stroke:var(--gold)}
.ip-info-row a{color:var(--p);font-weight:600}
.tone-c .ip-info-row a{color:#fff}
.ip-hours{display:grid;gap:9px;font-family:"Open Sans",system-ui,sans-serif;font-size:15.5px}
.ip-hours li{display:flex;gap:12px;color:var(--ink2)}
.ip-hours li span:first-child{width:104px;flex:none;color:var(--ink);font-weight:700}
.tone-c .ip-hours li{color:#cdc5e0}
.tone-c .ip-hours li span:first-child{color:#fff}

.ip-map{border-radius:14px;overflow:hidden;box-shadow:0 16px 38px rgba(36,31,51,.20);
  border:1px solid var(--ln);background:#efecf7;line-height:0}
.ip-map iframe{display:block;width:100%;height:clamp(320px,38vw,470px);border:0}


/* --------------------------------------------------------------------------
   SUPPORTING SENTENCE under a section heading — flows as the section's first
   paragraph, never parked in a right-hand column (retired split header).
   -------------------------------------------------------------------------- */
.ip-head-sup{font-family:"Open Sans",system-ui,sans-serif;font-size:clamp(15px,.95vw,17.5px);
  line-height:1.78;margin:16px 0 0!important;color:var(--ink2)}
.tone-c .ip-head-sup{color:#cdc5e0}

/* --------------------------------------------------------------------------
   REVIEW RAIL — auto-scrolling, pauses on hover/focus/hidden tab, off under
   reduced motion. Track is duplicated in the markup so the loop is seamless.
   -------------------------------------------------------------------------- */
.ip-rail{position:relative;overflow:hidden;margin-top:8px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.ip-rail-t{display:flex;gap:22px;width:max-content;animation:ipRail 92s linear infinite}
.ip-rail:hover .ip-rail-t,.ip-rail:focus-within .ip-rail-t,
.ip-rail[data-paused] .ip-rail-t{animation-play-state:paused}
@keyframes ipRail{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){
  .ip-rail-t{animation:none}
  .ip-rail{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
}
.ip-rv{flex:0 0 clamp(300px,25vw,430px);margin:0;display:flex;flex-direction:column;
  gap:16px;padding:26px 26px 22px;border-radius:16px;position:relative;isolation:isolate;
  background:linear-gradient(168deg,#ffffff,#f4f1fa);border:1px solid var(--ln);
  box-shadow:0 14px 34px rgba(36,31,51,.13)}
.ip-rv::before{content:'';position:absolute;inset:0;z-index:-1;border-radius:16px;pointer-events:none;
  background:radial-gradient(62% 70% at 100% 0%,rgba(194,173,116,.18),transparent 66%)}
.ip-rv blockquote{margin:0!important;padding:0!important;border:0!important;background:none!important;display:flex;flex-direction:column;gap:12px}
.ip-rv-stars{display:inline-flex;gap:3px}
.ip-rv-stars svg{width:16px;height:16px;fill:var(--gold)}
.ip-rv p{font-family:"Open Sans",system-ui,sans-serif;font-size:14.8px;line-height:1.75;color:var(--ink2)}
.ip-rv figcaption{display:flex;align-items:center;gap:12px;margin-top:auto;
  padding-top:16px;border-top:1px solid var(--ln)}
.ip-rv-av{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--pl),var(--p));color:#fff;
  font-family:"Open Sans",system-ui,sans-serif;font-size:13.5px;font-weight:700;letter-spacing:.5px}
.ip-rv-who{display:flex;flex-direction:column;gap:1px;font-family:"Open Sans",system-ui,sans-serif}
.ip-rv-who strong{font-size:14.5px;color:var(--ink)}
.ip-rv-who em{font-style:normal;font-size:12px;color:var(--mut)}


/* --------------------------------------------------------------------------
   BLOG INDEX — featured article + archive grid. Photo tiles, never white boxes.
   -------------------------------------------------------------------------- */
.ip-posts-feat{display:block}
.ip-post{position:relative;display:flex;flex-direction:column;overflow:hidden;border-radius:16px;
  isolation:isolate;background:linear-gradient(168deg,#564e75 0%,#4b4367 60%,#443d5c 100%);
  box-shadow:0 16px 38px rgba(36,31,51,.20);
  transition:transform .28s cubic-bezier(.4,0,.2,1),box-shadow .28s}
.ip-post:hover{transform:translateY(-5px);box-shadow:0 28px 58px rgba(36,31,51,.30)}
.ip-post-fig{position:relative;margin:0;aspect-ratio:16/10;overflow:hidden;flex:none}
.ip-post-fig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s cubic-bezier(.22,.61,.36,1)}
.ip-post:hover .ip-post-fig img{transform:scale(1.055)}
.ip-post-fig::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(28,23,44,.55),transparent 52%)}
.ip-post-b{display:flex;flex-direction:column;gap:11px;padding:22px 24px 24px;flex:1}
.ip-post-date{font-family:"Open Sans",system-ui,sans-serif;font-size:11px;font-weight:700;
  letter-spacing:2.2px;text-transform:uppercase;color:var(--gold)}
.ip-post h3{color:#fff!important;font-size:clamp(19px,1.32vw,25px);line-height:1.22}
.ip-post p{font-family:"Open Sans",system-ui,sans-serif;font-size:14.5px;line-height:1.7;color:#ded8ee}
.ip-post-go{display:inline-flex;align-items:center;gap:8px;margin-top:auto;padding-top:6px;
  font-family:"Open Sans",system-ui,sans-serif;font-size:11px;font-weight:700;
  letter-spacing:2.2px;text-transform:uppercase;color:var(--gold)}
.ip-post-go svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .22s}
.ip-post:hover .ip-post-go svg{transform:translateX(5px)}

/* the newest article runs full width — image left, copy right */
.ip-post.feat{flex-direction:row;align-items:stretch}
.ip-post.feat .ip-post-fig{flex:0 0 52%;aspect-ratio:auto}
.ip-post.feat .ip-post-fig::after{
  background:linear-gradient(to right,transparent 52%,rgba(28,23,44,.60))}
.ip-post.feat .ip-post-b{justify-content:center;gap:14px;padding:clamp(26px,3vw,52px)}
.ip-post.feat h3{font-size:clamp(24px,2.3vw,42px)}
.ip-post.feat p{font-size:clamp(15px,.95vw,17.5px);line-height:1.78}

.ip-posts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
@media(max-width:1500px){.ip-posts{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:1100px){.ip-posts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px){.ip-post.feat{flex-direction:column}
  .ip-post.feat .ip-post-fig{flex:none;aspect-ratio:16/9}
  .ip-post.feat .ip-post-fig::after{background:linear-gradient(to top,rgba(28,23,44,.55),transparent 52%)}}
@media(max-width:640px){.ip-posts{grid-template-columns:1fr!important}}


/* gallery caption written as a <figcaption> (contest winners, dated) */
.ip-gal-i{margin:0}
.ip-gal-i figcaption{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:30px 16px 14px;
  font-family:"Open Sans",system-ui,sans-serif;font-size:13px;line-height:1.5;color:#efeaf9;
  background:linear-gradient(to top,rgba(18,14,32,.92),rgba(18,14,32,.55) 52%,transparent)}
.ip-gal-i figcaption strong{display:block;color:#e8dfc4;font-size:11px;font-weight:700;
  letter-spacing:2px;text-transform:uppercase;margin-bottom:4px}

/* plain archive link list — two/three columns so it fills the band */
.ip-linklist{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px 26px}
.ip-linklist li{border-bottom:1px solid var(--ln)}
.ip-linklist a{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:15px 2px;font-family:"Open Sans",system-ui,sans-serif;font-size:15px;
  font-weight:600;color:var(--ink2);transition:color .18s,padding .18s}
.ip-linklist a:hover{color:var(--p);padding-left:8px}
.ip-linklist svg{width:15px;height:15px;flex:none;fill:none;stroke:var(--gold);stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round;opacity:.75}
.tone-c .ip-linklist li{border-color:rgba(255,255,255,.14)}
.tone-c .ip-linklist a{color:#cdc5e0}
.tone-c .ip-linklist a:hover{color:#fff}
@media(max-width:1000px){.ip-linklist{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.ip-linklist{grid-template-columns:1fr}}


/* --------------------------------------------------------------------------
   PORTED CONTENT — a figure with its own caption prose, and grids of them.
   Images are never rendered past their natural width (IMAGE STRETCH RULE).
   -------------------------------------------------------------------------- */
.ip-figgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(26px,2.6vw,46px)}
.ip-figgrid.cols-4{grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,1.8vw,32px)}
.ip-fighead h2,.ip-fighead h3{font-size:clamp(18px,1.2vw,23px)}
.ip-figgrid .ip-fig{width:100%}
.ip-figgrid .ip-fig img{width:100%}
@media(max-width:1200px){.ip-figgrid.cols-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.ip-figgrid.cols-4{grid-template-columns:1fr}}
.ip-figblock{display:flex;flex-direction:column;gap:16px}
.ip-figblock + .ip-figblock,.ip-prose + .ip-figblock{margin-top:34px}
.ip-fig{margin:0;border-radius:14px;overflow:hidden;align-self:flex-start;
  box-shadow:0 14px 34px rgba(36,31,51,.16);background:#efecf7}
.ip-fig img{display:block;width:100%;height:auto}
.ip-figblock .ip-prose h2,.ip-figblock .ip-prose h3{font-size:clamp(19px,1.35vw,25px);
  margin-bottom:10px!important}
.tone-c .ip-fig{box-shadow:0 14px 34px rgba(12,9,22,.42);background:#4c4466}
@media(max-width:900px){.ip-figgrid{grid-template-columns:minmax(0,1fr)}}

/* reference link lists keep their bullets and underlines */
.ip-reflinks ul{list-style:disc!important;padding-left:22px!important}
.ip-reflinks li{list-style:disc!important;margin-bottom:8px}


/* a single ported video sits full width in its band, not in the tile grid */
.ip-vid-wide{max-width:900px;margin:0 auto}
.ip-vid-fr.wide{aspect-ratio:16/9;display:block}
.ip-vid-fr.wide img{position:static;width:100%;height:100%;max-width:100%!important;
  max-height:none!important;object-fit:cover;box-shadow:none}
.ip-vid-fr.wide .ip-vid-bg{display:none}

/* ported Divi contact forms keep working; only the chrome is restyled */
.ip-raw .et_pb_contact_form_container{max-width:none}
.ip-raw .et_pb_contact_field{padding:0 0 16px!important}
.ip-raw input[type=text],.ip-raw input[type=email],.ip-raw input[type=tel],.ip-raw textarea{
  width:100%;padding:13px 15px;border:1px solid var(--ln);border-radius:6px;
  font-family:"Open Sans",system-ui,sans-serif;font-size:15px;background:#fff;color:var(--ink)}
.ip-raw .et_pb_contact_submit,.ip-raw button[type=submit],.ip-raw input[type=submit]{
  display:inline-flex;align-items:center;justify-content:center;border:0;cursor:pointer;
  border-radius:5px;padding:15px 28px;font-family:"Open Sans",system-ui,sans-serif;
  font-size:14.5px;font-weight:700;color:#fff!important;
  background:linear-gradient(135deg,var(--pl),var(--p));box-shadow:0 7px 20px rgba(92,83,120,.32)}
.ip-raw .et_pb_contact_field_checkbox{display:flex;gap:10px;align-items:flex-start}
.ip-raw .et_pb_contact_field_checkbox label{font-size:13.5px;line-height:1.6;color:var(--ink2)}
.tone-c .ip-raw .et_pb_contact_field_checkbox label,.tone-c .ip-raw label{color:#cdc5e0}


/* plain fact list — the client's own PIF wording, presented as facts */
.ip-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.ip-facts li{display:flex;flex-direction:column;gap:7px;padding:24px 26px;border-radius:14px;
  background:linear-gradient(168deg,#ffffff,#f2eff9);border:1px solid var(--ln);
  box-shadow:0 12px 30px rgba(36,31,51,.10)}
.ip-facts strong{font-family:"DM Serif Display",Georgia,serif;font-weight:400;
  font-size:clamp(18px,1.3vw,23px);line-height:1.2;color:var(--ink)}
.ip-facts span{font-family:"Open Sans",system-ui,sans-serif;font-size:15.5px;line-height:1.72;color:var(--ink2)}
.tone-c .ip-facts li{background:linear-gradient(120deg,rgba(255,255,255,.10),rgba(255,255,255,.04));
  border-color:rgba(255,255,255,.16)}
.tone-c .ip-facts strong{color:#fff}.tone-c .ip-facts span{color:#cdc5e0}
@media(max-width:820px){.ip-facts{grid-template-columns:1fr}}

/* --------------------------------------------------------------------------
   BUTTONS + CTA BAND
   -------------------------------------------------------------------------- */
.ip-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border-radius:5px;
  padding:15px 28px;font-family:"Open Sans",system-ui,sans-serif;font-size:14.5px;font-weight:700;
  line-height:1.3;background:linear-gradient(135deg,var(--pl),var(--p));color:#fff!important;
  box-shadow:0 7px 20px rgba(92,83,120,.32);transition:transform .18s,box-shadow .18s}
.ip-btn:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(92,83,120,.40)}
/* an inline <svg> with only a viewBox falls back to 300x150 and squashes the
   label; size it explicitly. white-space:nowrap keeps a phone number on one
   line (feedback_phone_never_wrap). */
.ip-btn{white-space:nowrap}
.ip-btn svg{width:17px;height:17px;flex:none;fill:none;stroke:currentColor;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ip-btn.ghost{background:transparent;border:1.6px solid rgba(255,255,255,.55);box-shadow:none}
.ip-btn.ghost:hover{background:rgba(255,255,255,.12)}
/* ghost button on a LIGHT band — white-on-white is invisible */
.tone-a .ip-btn.ghost,.tone-b .ip-btn.ghost,.tone-d .ip-btn.ghost{
  color:var(--p)!important;border-color:rgba(92,83,120,.45)}
.tone-a .ip-btn.ghost:hover,.tone-b .ip-btn.ghost:hover,.tone-d .ip-btn.ghost:hover{
  background:rgba(92,83,120,.10);border-color:var(--p)}
.ip-btn.dark{background:linear-gradient(135deg,#5c5378,#4b4364);box-shadow:0 7px 20px rgba(30,24,46,.34)}
.ip-btns{display:flex;flex-wrap:wrap;gap:14px;margin-top:26px}

.ip-cta{position:relative;isolation:isolate;overflow:hidden;padding:clamp(48px,5vw,72px) 0;
  background:linear-gradient(120deg,#5c5378 0%,#5c5378 52%,#524a75 100%);color:#fff}
.ip-cta::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(50% 60% at 12% 0%,rgba(194,173,116,.22),transparent 62%),
             radial-gradient(46% 58% at 100% 100%,rgba(255,255,255,.12),transparent 64%),
             repeating-linear-gradient(-38deg,rgba(255,255,255,.035) 0 1px,transparent 1px 15px)}
.ip-cta h2{color:#fff!important;font-size:clamp(25px,2.4vw,38px)}
.ip-cta p{margin-top:16px!important;color:#ded8ee;font-family:"Open Sans",system-ui,sans-serif;
  font-size:clamp(15px,1.1vw,17px);line-height:1.75}
.ip-cta-in{display:flex;align-items:center;justify-content:space-between;gap:clamp(26px,4vw,60px);flex-wrap:wrap}
.ip-cta-in>div:first-child{flex:1 1 460px}
.ip-cta .ip-btns{margin-top:0;flex:none}

/* --------------------------------------------------------------------------
   FORMS (Divi contact form re-skin) + GHL embeds
   -------------------------------------------------------------------------- */
.ip-formwrap{background:linear-gradient(168deg,#ffffff,#f2eff9);border:1px solid var(--ln);border-radius:16px;
  padding:clamp(24px,3vw,42px);box-shadow:0 18px 44px rgba(36,31,51,.13)}
.mpo-ip .et_pb_contact_form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.mpo-ip .et_pb_contact_field{margin:0!important;padding:0!important;width:auto!important;float:none!important}
.mpo-ip .et_pb_contact_field:not(.et_pb_contact_field_half){grid-column:1/-1}
.mpo-ip .et_pb_contact_form_label{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mpo-ip .et_pb_contact_form input[type=text],
.mpo-ip .et_pb_contact_form input[type=email],
.mpo-ip .et_pb_contact_form select,
.mpo-ip .et_pb_contact_form textarea{width:100%!important;padding:14px 16px!important;
  border:1px solid #ddd8ea!important;border-radius:8px!important;background:#fbfafe!important;
  font-family:"Open Sans",system-ui,sans-serif!important;font-size:15px!important;color:var(--ink)!important;
  box-shadow:none!important;transition:border-color .18s,box-shadow .18s}
.mpo-ip .et_pb_contact_form input:focus,
.mpo-ip .et_pb_contact_form select:focus,
.mpo-ip .et_pb_contact_form textarea:focus{outline:none;border-color:var(--pl)!important;
  box-shadow:0 0 0 3px rgba(123,113,150,.18)!important}
.mpo-ip .et_pb_contact_form textarea{min-height:150px!important;resize:vertical}
.mpo-ip .et_pb_contact_field_options_wrapper{display:block}
.mpo-ip .et_pb_contact_field_options_title{display:block;font-family:"Open Sans",system-ui,sans-serif;
  font-size:12px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:var(--p);margin-bottom:9px}
.mpo-ip .et_pb_contact_field_options_list{display:flex;flex-wrap:wrap;gap:10px 20px}
.mpo-ip .et_pb_contact_field_checkbox,.mpo-ip .et_pb_contact_field_radio{display:flex;align-items:flex-start;gap:9px}
.mpo-ip .et_pb_contact_field_checkbox label,.mpo-ip .et_pb_contact_field_radio label{
  font-family:"Open Sans",system-ui,sans-serif;font-size:14px;line-height:1.6;color:var(--ink2);
  position:static!important;width:auto!important;height:auto!important;clip:auto!important;overflow:visible!important;white-space:normal!important}
.mpo-ip .et_pb_contact_submit{grid-column:1/-1;justify-self:start;border:0;cursor:pointer;
  display:inline-flex;align-items:center;border-radius:5px;padding:15px 34px;
  font-family:"Open Sans",system-ui,sans-serif;font-size:14.5px;font-weight:700;
  background:linear-gradient(135deg,var(--pl),var(--p))!important;color:#fff!important;
  box-shadow:0 7px 20px rgba(92,83,120,.32);transition:transform .18s}
.mpo-ip .et_pb_contact_submit:hover{transform:translateY(-2px)}
.mpo-ip .et_pb_contact_submit::before,.mpo-ip .et_pb_contact_submit::after{display:none!important}

/* GHL embeds — the iframe owns its own height, never capped here */
.ip-embed{background:linear-gradient(168deg,#ffffff,#f2eff9);border:1px solid var(--ln);border-radius:16px;overflow:hidden;
  box-shadow:0 18px 44px rgba(36,31,51,.13)}
.ip-embed iframe{display:block;width:100%;border:0}
#appt-form-wrap,#appt-form-wrap *{overflow-anchor:none}

/* PDF / download rows */
.ip-files{display:grid;gap:14px}
.ip-file{display:flex;align-items:center;gap:16px;padding:20px 24px;border-radius:12px;
  background:linear-gradient(168deg,#ffffff,#f2eff9);border:1px solid var(--ln);box-shadow:0 10px 26px rgba(36,31,51,.09);
  transition:transform .25s cubic-bezier(.4,0,.2,1),box-shadow .25s}
.ip-file:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(36,31,51,.17)}
.ip-file-ic{width:44px;height:44px;flex:none;border-radius:11px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--pl),var(--p))}
.ip-file-ic svg{width:21px;height:21px;fill:none;stroke:#fff;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.ip-file-t{flex:1;min-width:0}
.ip-file-t strong{display:block;font-family:"Open Sans",system-ui,sans-serif;font-size:16px;
  font-weight:700;color:var(--ink);line-height:1.4}
.ip-file-t span{display:block;margin-top:3px;font-family:"Open Sans",system-ui,sans-serif;
  font-size:12.5px;color:var(--mut)}
.ip-file-go{flex:none;color:var(--p);font-family:"Open Sans",system-ui,sans-serif;font-size:11.5px;
  font-weight:700;letter-spacing:1.8px;text-transform:uppercase;display:inline-flex;align-items:center;gap:7px}
.ip-file-go svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;transition:transform .22s}
.ip-file:hover .ip-file-go svg{transform:translateX(4px)}

/* jump-link rail */
.ip-jumps{display:flex;flex-wrap:wrap;gap:10px}
.ip-jump{display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border-radius:40px;
  background:linear-gradient(168deg,#ffffff,#f2eff9);border:1px solid var(--ln);box-shadow:0 6px 16px rgba(36,31,51,.07);
  font-family:"Open Sans",system-ui,sans-serif;font-size:13.5px;font-weight:600;color:var(--p);
  transition:transform .2s,box-shadow .2s,background .2s}
.ip-jump:hover{transform:translateY(-2px);background:var(--p);color:#fff;box-shadow:0 12px 26px rgba(92,83,120,.28)}
.ip-jump::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--gold)}

/* area-served pills */
.ip-pills{display:flex;flex-wrap:wrap;gap:10px}
.ip-pill{display:inline-flex;align-items:center;gap:7px;padding:9px 16px;border-radius:40px;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.22);
  font-family:"Open Sans",system-ui,sans-serif;font-size:13px;font-weight:600;color:#efeaf9}
.ip-pill svg{width:13px;height:13px;flex:none;fill:none;stroke:var(--gold);stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}

/* numbered steps */
.ip-steps{display:grid;gap:18px}
.ip-step{display:flex;gap:20px;padding:24px 26px;border-radius:13px;background:linear-gradient(168deg,#ffffff,#f2eff9);
  border:1px solid var(--ln);box-shadow:0 10px 26px rgba(36,31,51,.09);
  transition:transform .25s cubic-bezier(.4,0,.2,1),box-shadow .25s}
.ip-step:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(36,31,51,.16)}
.ip-step-n{flex:none;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--pl),var(--p));color:#fff;
  font-family:"DM Serif Display",Georgia,serif;font-size:21px;
  box-shadow:0 6px 16px rgba(92,83,120,.30)}
.ip-step-b{flex:1;min-width:0}
.ip-step-b h3{font-size:19px;margin-bottom:9px}
.ip-step-b p,.ip-step-b h3+*{font-family:"Open Sans",system-ui,sans-serif;font-size:15.5px;
  line-height:1.82;color:var(--ink2)}

/* --------------------------------------------------------------------------
   SCROLL REVEAL
   -------------------------------------------------------------------------- */
/* Only hide for the reveal animation once JS has confirmed it is running —
   with scripting off nothing is ever invisible. */
.ip-anim [data-reveal]{opacity:0;transform:translateY(22px);
  transition:opacity .62s cubic-bezier(.4,0,.2,1),transform .62s cubic-bezier(.4,0,.2,1)}
.ip-anim [data-reveal].in{opacity:1;transform:none}
.ip-anim [data-reveal-delay="1"]{transition-delay:.10s}
.ip-anim [data-reveal-delay="2"]{transition-delay:.20s}
.ip-anim [data-reveal-delay="3"]{transition-delay:.30s}
.ip-anim [data-reveal-delay="4"]{transition-delay:.40s}
@media(prefers-reduced-motion:reduce){
  .ip-anim [data-reveal]{opacity:1!important;transform:none!important;transition:none!important}
}

/* --------------------------------------------------------------------------
   RESPONSIVE — every card grid collapses to ONE column on a phone
   -------------------------------------------------------------------------- */
@media(max-width:1100px){
  .ip-g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ip-g3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ip-gal{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:900px){
  .ip-g3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ip-ba{grid-template-columns:minmax(0,1fr)}
  .ip-split,.ip-split.rev{grid-template-columns:minmax(0,1fr)}
  .ip-split .ip-split-media,.ip-split.rev .ip-split-media{order:-1}
  .ip-split-media{max-width:100%!important}
  .ip-cta-in{align-items:flex-start}
}
@media(max-width:640px){
  .ip-w{width:92%}
  .ip-g2,.ip-g3,.ip-g4,.ip-gal,.ip-ba{grid-template-columns:1fr!important}
  .mpo-ip .et_pb_contact_form{grid-template-columns:1fr}
  .ip-btn,.mpo-ip .et_pb_contact_submit{width:100%;justify-content:center;text-align:center}
  .ip-btns{flex-direction:column;align-items:stretch}
  .ip-cta .ip-btns{flex:1 1 100%;width:100%}
  .ip-step{flex-direction:column;gap:14px}
  .ip-hours li{flex-direction:column;gap:1px}
  .ip-hours li span:first-child{width:auto}
  .ip-lb-p,.ip-lb-n{width:40px;height:40px}
}

/* --------------------------------------------------------------------------
   VIDEO TRANSCRIPT — verbatim YouTube auto-captions, indexable, closed by
   default (CLAUDE.md Step 7.5)
   -------------------------------------------------------------------------- */
.mpo-ip .video-transcript{border-top:1px solid rgba(255,255,255,.14);
  font-family:"Open Sans",system-ui,sans-serif}
.mpo-ip .video-transcript summary{cursor:pointer;padding:11px 18px;font-size:12px;font-weight:700;
  letter-spacing:1.6px;text-transform:uppercase;color:var(--gold);list-style:none}
.mpo-ip .video-transcript summary::-webkit-details-marker{display:none}
.mpo-ip .video-transcript summary::before{content:'▸ ';display:inline-block;transition:transform .2s}
.mpo-ip .video-transcript[open] summary::before{content:'▾ '}
.mpo-ip .video-transcript .vt-text{padding:0 18px 18px;font-size:13.5px;line-height:1.8;
  color:#000;max-height:280px;overflow:auto}
.mpo-ip .ip-vid .video-transcript .vt-text{color:#cdc5e0}
.mpo-ip .tone-a .ip-vid .video-transcript .vt-text,
.mpo-ip .tone-b .ip-vid .video-transcript .vt-text{color:#000}

/* Eyebrow TEXT contrast — the purple bands are lighter than the old near-black,
   so the decorative gold no longer clears AA as text. Decoration keeps --gold;
   text gets a per-band value. Measured: dark 4.56-5.88:1, light 4.49-5.33:1. */
.ip-kicker{color:#7a6626}
.tone-c .ip-kicker,.ip-hero .ip-kicker,.ip-cta .ip-kicker{color:#dccfa6}
.mpo-ft2 .f2-eyebrow{color:#dccfa6}
.ip-hourshd{color:#dccfa6}
.ip-pt-go,.ip-post-go,.ip-vid-cap span{color:#dccfa6}
.tone-a .ip-post-go,.tone-b .ip-post-go,.tone-d .ip-post-go{color:#7a6626}

/* inline prose links on LIGHT bands — the gold read 3.47:1 as text.
   Brand purple at 7.09:1 vs white, gold kept as the underline. */
.tone-a .ip-prose a,.tone-b .ip-prose a,.tone-d .ip-prose a,
.ip-reflinks a,.ip-prose a{color:#5c5378;border-bottom:1px solid rgba(194,173,116,.65)}
.tone-a .ip-prose a:hover,.tone-b .ip-prose a:hover,.tone-d .ip-prose a:hover,
.ip-reflinks a:hover{color:#3f3652;border-bottom-color:#c2ad74}
.tone-c .ip-prose a{color:#e8dfc4;border-bottom-color:rgba(232,223,196,.5)}
.ip-kicker{color:#7a6626}
.tone-c .ip-kicker,.ip-hero .ip-kicker,.ip-cta .ip-kicker{color:#e8dfc4}
.ip-hourshd{color:#e8dfc4}

/* last of the gold-as-text debt from the purple lift, measured per band */
.ip-person-role{color:#7a6626}          /* on a light card: 5.33:1 */
.ip-post-date{color:#e8dfc4}            /* on the dark plum post card */
.tone-a .ip-post-date,.tone-b .ip-post-date,.tone-d .ip-post-date{color:#e8dfc4}

/* on-page jump rail carried over from the Divi banner (nav > .ip-w > ul > li > a).
   Scoped so the older .ip-jumps/.ip-jump markup is untouched. */
nav.ip-jumps{display:block;position:relative;isolation:isolate;padding:14px 0;
  background:linear-gradient(180deg,#efecf7,#e5e0f0);border-bottom:1px solid var(--ln)}
nav.ip-jumps::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:repeating-linear-gradient(-38deg,rgba(36,31,51,.035) 0 1px,transparent 1px 13px)}
nav.ip-jumps ul{display:flex;flex-wrap:wrap;gap:9px 10px;position:relative;z-index:1;
  list-style:none!important;margin:0;padding:0}
nav.ip-jumps li{list-style:none!important;margin:0;padding:0}
nav.ip-jumps a{display:inline-block;padding:8px 16px;border-radius:40px;line-height:1.25;
  background:rgba(255,255,255,.78);border:1px solid var(--ln);
  font-family:"Open Sans",system-ui,sans-serif;font-size:13.5px;font-weight:600;
  color:var(--p);text-decoration:none;transition:.18s}
nav.ip-jumps a:hover{background:var(--p);border-color:var(--p);color:#fff;
  box-shadow:0 8px 20px rgba(92,83,120,.26)}
@media(max-width:640px){nav.ip-jumps a{font-size:12.5px;padding:7px 13px}}

/* text-only cards size to their own content — a stretched grid row left
   176-349px of empty space under the short ones. Photo tiles still stretch. */
.ip-g3:not(:has(.ip-pt)):not(:has(img)),
.ip-g2:not(:has(.ip-pt)):not(:has(img)),
.ip-g4:not(:has(.ip-pt)):not(:has(img)){align-items:start}

/* legacy WordPress float classes carried over in ported copy. Divi used to
   style these; without it they escape their section. Render as a grid. */
.mpo-ip .ip-prose:has(> .one_half,> .one_third,> .one_fourth){
  display:grid;gap:clamp(20px,2.4vw,38px)}
.mpo-ip .ip-prose:has(> .one_half){grid-template-columns:repeat(2,minmax(0,1fr))}
.mpo-ip .ip-prose:has(> .one_third){grid-template-columns:repeat(3,minmax(0,1fr))}
.mpo-ip .one_half,.mpo-ip .one_third,.mpo-ip .one_fourth,
.mpo-ip .two_third,.mpo-ip .three_fourth{float:none!important;width:auto!important;margin:0!important}
.mpo-ip .one_half h5,.mpo-ip .one_third h5{margin:0 0 10px!important;font-size:19px;text-align:left!important}
@media(max-width:820px){.mpo-ip .ip-prose:has(> .one_half),
  .mpo-ip .ip-prose:has(> .one_third){grid-template-columns:minmax(0,1fr)}}

/* --------------------------------------------------------------------------
   A film sits BESIDE its own copy, never marooned in the middle of a band with
   the text stranded underneath. The media column is sized `auto` so it takes
   the video's own capped width — the copy takes the rest, and the poster is
   never stretched past its natural size.
   -------------------------------------------------------------------------- */
/* only when the band is exactly [video + one copy block]; with more children a
   flex row produces 300px text ribbons, so those stay stacked. */
.ip-sec .ip-w:has(> .ip-vid-wide):has(> .ip-prose):not(:has(> :nth-child(3))){
  display:flex;align-items:center;gap:clamp(26px,3.2vw,54px)}
/* basis 52%, then each video's own max-width clamps it, so the film never
   exceeds its poster's natural size and the copy always keeps a real column */
.ip-sec .ip-w:has(> .ip-vid-wide):not(:has(> :nth-child(3))) > .ip-vid-wide{flex:0 1 52%}
.ip-sec .ip-w:has(> .ip-vid-wide):not(:has(> :nth-child(3))) > .ip-prose{flex:1 1 0%;min-width:300px}
.ip-sec .ip-w:has(> .ip-vid-wide):not(:has(> :nth-child(3))) > .ip-vid-wide{margin:0}
.ip-sec .ip-w:has(> .ip-vid-wide):not(:has(> :nth-child(3))) > .ip-prose > :first-child{margin-top:0!important}
@media(max-width:1000px){
  .ip-sec .ip-w:has(> .ip-vid-wide):has(> .ip-prose):not(:has(> :nth-child(3))){flex-direction:column;align-items:stretch}
  .ip-sec .ip-w:has(> .ip-vid-wide) > .ip-vid-wide{margin:0 auto}
}

/* section-level action buttons align right, consistently, on every band */
.ip-sec .ip-w > .ip-btns{justify-content:flex-end}
@media(max-width:640px){.ip-sec .ip-w > .ip-btns{justify-content:stretch}}
.ip-sec .ip-w:has(> :nth-child(3)) > .ip-vid-wide{margin:8px auto 26px}

/* --------------------------------------------------------------------------
   Same rule for stills: a figure sits beside its copy, not marooned under a
   full-width paragraph. Only when the band is exactly [copy + one figure] —
   with more children a flex row would squeeze the text into a ribbon.
   The figure keeps its own max-width, so nothing is upscaled.
   -------------------------------------------------------------------------- */
.ip-sec .ip-w:has(> .ip-figblock):has(> .ip-prose):not(:has(> :nth-child(3))){
  display:flex;align-items:center;gap:clamp(28px,3.4vw,56px)}
.ip-sec .ip-w:has(> .ip-figblock):not(:has(> :nth-child(3))) > .ip-figblock{flex:0 1 44%;margin:0}
.ip-sec .ip-w:has(> .ip-figblock):not(:has(> :nth-child(3))) > .ip-prose{flex:1 1 0%;min-width:330px}
.ip-sec .ip-w:has(> .ip-figblock):not(:has(> :nth-child(3))) > .ip-prose > :first-child{margin-top:0!important}
/* alternate the side band to band so the page does not read as one column */
.ip-sec:nth-of-type(even) .ip-w:has(> .ip-figblock):not(:has(> :nth-child(3))){flex-direction:row-reverse}
@media(max-width:1000px){
  .ip-sec .ip-w:has(> .ip-figblock):has(> .ip-prose):not(:has(> :nth-child(3))),
  .ip-sec:nth-of-type(even) .ip-w:has(> .ip-figblock):not(:has(> :nth-child(3))){
    flex-direction:column;align-items:stretch}
  .ip-sec .ip-w:has(> .ip-figblock):not(:has(> :nth-child(3))) > .ip-figblock{margin:0 auto}
}

/* a lone figure block carries its own heading + copy inside it, so there is no
   sibling to pair with — lay the block itself out as figure beside copy. */
.ip-sec .ip-w:not(:has(> :nth-child(2))) > .ip-figblock:has(> .ip-fig):has(> .ip-prose){
  display:flex;flex-direction:row;align-items:center;gap:clamp(28px,3.4vw,56px)}
.ip-sec .ip-w:not(:has(> :nth-child(2))) > .ip-figblock > .ip-fig{flex:0 1 44%;margin:0}
.ip-sec .ip-w:not(:has(> :nth-child(2))) > .ip-figblock > .ip-prose{flex:1 1 0%;min-width:330px}
.ip-sec .ip-w:not(:has(> :nth-child(2))) > .ip-figblock > .ip-prose > :first-child{margin-top:0!important}
.ip-sec:nth-of-type(even) .ip-w:not(:has(> :nth-child(2))) > .ip-figblock:has(> .ip-fig):has(> .ip-prose){
  flex-direction:row-reverse}
@media(max-width:1000px){
  .ip-sec .ip-w:not(:has(> :nth-child(2))) > .ip-figblock:has(> .ip-fig):has(> .ip-prose),
  .ip-sec:nth-of-type(even) .ip-w:not(:has(> :nth-child(2))) > .ip-figblock:has(> .ip-fig):has(> .ip-prose){
    flex-direction:column;align-items:stretch}
  .ip-sec .ip-w:not(:has(> :nth-child(2))) > .ip-figblock > .ip-fig{margin:0 auto}
}

/* ==========================================================================
   MOBILE SWIPE RAILS
   ~90% of this practice's traffic is phone. A 13-image gallery stacked one per
   row is 3,354px of scroll before the next section; the video wall was 8,020px.
   On a phone those grids become a single-item swipe rail with scroll-snap, so
   the page below stays reachable. Desktop is untouched.
   Each item still gets the full text measure (one per view), so the
   one-column-on-mobile rule is respected — this is not a 2-up grid.
   ========================================================================== */
@media(max-width:640px){
  .mpo-ip .ip-gal,
  .mpo-ip .ip-vids,
  .mpo-ip .ip-ba,
  .mpo-ip .ip-posts,
  .mpo-ip .ip-pt-grid,
  .mpo-ip .ip-g3:has(> .ip-pt),
  .mpo-ip .ip-g3:has(> .ip-person){
    display:flex!important;
    grid-template-columns:none!important;
    flex-wrap:nowrap;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    gap:14px;
    padding:2px 0 16px;
    /* let the rail bleed to the screen edges so the next card peeks in */
    margin-inline:calc(50% - 50vw);
    padding-inline:max(4vw,16px);
    scroll-padding-inline:max(4vw,16px);
  }
  .mpo-ip .ip-gal > *,
  .mpo-ip .ip-vids > *,
  .mpo-ip .ip-ba > *,
  .mpo-ip .ip-posts > *,
  .mpo-ip .ip-pt-grid > *,
  .mpo-ip .ip-g3:has(> .ip-pt) > *,
  .mpo-ip .ip-g3:has(> .ip-person) > *{
    flex:0 0 84%;
    max-width:84%!important;
    scroll-snap-align:start;
  }
  /* thin scrollbar as the swipe affordance */
  .mpo-ip .ip-gal::-webkit-scrollbar,
  .mpo-ip .ip-vids::-webkit-scrollbar,
  .mpo-ip .ip-ba::-webkit-scrollbar,
  .mpo-ip .ip-posts::-webkit-scrollbar,
  .mpo-ip .ip-pt-grid::-webkit-scrollbar,
  .mpo-ip .ip-g3::-webkit-scrollbar{height:4px}
  .mpo-ip .ip-gal::-webkit-scrollbar-thumb,
  .mpo-ip .ip-vids::-webkit-scrollbar-thumb,
  .mpo-ip .ip-ba::-webkit-scrollbar-thumb,
  .mpo-ip .ip-posts::-webkit-scrollbar-thumb,
  .mpo-ip .ip-pt-grid::-webkit-scrollbar-thumb,
  .mpo-ip .ip-g3::-webkit-scrollbar-thumb{background:rgba(92,83,120,.42);border-radius:4px}

  /* a rail is horizontal, so the tall portrait video tiles come down too */
  .mpo-ip .ip-vids .ip-vid-fr{aspect-ratio:4/5}
  .mpo-ip .ip-posts .ip-post-fig{aspect-ratio:16/10}
}

/* review cards widen on a phone — the clamp floor of 300px left a 246px text
   ribbon inside the padding. */
@media(max-width:640px){
  .mpo-ip .ip-rv{flex:0 0 88vw;max-width:88vw;padding:22px 20px 18px}
  .mpo-ip .ip-rail{margin-inline:calc(50% - 50vw);padding-inline:max(4vw,16px)}
}

/* hero chips stay on ONE line on a phone. Three chips measured 444px against
   358px of usable width, so they wrapped. The location chip goes — the address
   is already in the top bar and the footer (no repeated fact). */
@media(max-width:640px){
  .mpo-ip .ip-chips{flex-wrap:nowrap;gap:7px}
  .mpo-ip .ip-chip{font-size:11.5px;padding:7px 11px;white-space:nowrap}
  .mpo-ip .ip-chip svg{width:12px;height:12px}
  .mpo-ip .ip-chip:has(svg path[d^="M21 10c0 7"]){display:none}
  /* trim band padding: ~16px per band back across the page */
  .mpo-ip .ip-sec{padding:38px 0}
}