/* Concept 5: MOM'S MIX (Oct 19, 2026) = Storybook's pages (copied from c4.css below) + the main site's header + Passport's menu.
   Was Concept 4: STORYBOOK. Sky blue, white scalloped clouds (the brand's cloud bubble), mascots hosting each part in
   speech bubbles, wavy (scalloped) section edges, Lobster headlines. The most kid-focused of the five. */
body.c5 { background: #fff; --x-bg: #fff; --x-bg2: #e3f5ff; --x-hero-bg: #8fd3f4; --x-hero-ink: #1c2529; --x-hero-kicker: #b2258c;
  --x-radius: 34px; --x-frame-radius: 34px; --x-head-font: var(--f-script); --x-accent: #008ACD; }
.c5 .cx-inner h1, .c5 .cx-inner h2 { font-weight: 400; }
.c5 .cx-hero { background: linear-gradient(#8fd3f4, #c9ecfb); position: relative; }
.c5 .cx-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: #000; } /* Ender, Oct 24: solid, even, level line (no scallops, no wave) */

/* header */
.s-hdr { position: sticky; top: 0; z-index: 50; background: #8fd3f4; }
.s-hdr-in { display: flex; align-items: center; gap: 14px; padding-top: 8px; padding-bottom: 8px; }
.s-disc { width: 74px; height: 74px; border-radius: 50%; background: var(--b-teal); box-shadow: 0 0 0 3px #000; display: grid; place-items: center; }
.s-disc img { width: 68px; height: 68px; }
.s-nav { display: flex; gap: 6px; margin-left: auto; }
.s-nav a { font: 800 15.5px/1 var(--f-head); color: #000; text-decoration: none; background: #fff; border: 3px solid #000; border-radius: 999px; padding: 10px 14px; box-shadow: 0 3px 0 #000; transition: translate .2s; }
.s-nav a:hover { translate: 0 -2px; background: var(--b-lime); }

/* waves: one long gentle curve (Ender, Oct 24: "we don't like these u's ... something gentler, really subtle") */
.s-wave { height: 3px; background: #000; } /* Ender, Oct 24: solid, even, level line */
.s-wave.flip { transform: none; }


/* home */
.s { font-size: 18px; }
.s-hero { background: linear-gradient(#8fd3f4, #c9ecfb); padding-top: 30px; }
.s-hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 30px; align-items: center; padding-bottom: 10px; }
.s-kicker { color: #b2258c; font-size: clamp(22px, 2.6vw, 30px); margin: 0; }
.s h1 { font: 400 clamp(42px, 5.6vw, 72px)/1.05 var(--f-script); margin: 6px 0 14px; }
.s h2 { font: 400 clamp(34px, 4.4vw, 52px)/1.1 var(--f-script); }
.s-lede { font-size: 20px; color: #24363d; max-width: 560px; }
.s-hero-art { position: relative; }
.cx .s-lion { width: 100%; max-width: 330px; display: block; margin: 0 6% 0 auto; } /* Mom, Oct 19: the lion was a little too big (was ~500px wide) */
.s-bubble { position: absolute; left: 0; top: 6%; background: #fff; border: 3px solid #000; border-radius: 30px; padding: 14px 18px; font: 800 17px/1.3 var(--f-head); box-shadow: 0 5px 0 #000; }
.s-bubble::after { content: ""; position: absolute; right: -16px; top: 30px; border: 10px solid transparent; border-left: 16px solid #000; }
.s-sec { padding: 56px 0; }
.s-sky { background: #c9ecfb; padding: 0; }
.s-sky .in { padding-top: 40px; padding-bottom: 40px; }
.s-cream { background: #fff8e6; }
.s-center { text-align: center; }
.s-host { display: flex; align-items: flex-end; gap: 18px; margin-bottom: 26px; }
.s-host.right { justify-content: flex-end; }
.s-mascot { width: 180px; flex: none; } .s-mascot.tall { width: 150px; }
/* dentists: the giraffe stands next to the cards, not above them (Mom, Oct 19: too much white space) */
.s-docs-row { display: grid; grid-template-columns: 1fr auto; gap: 22px; align-items: end; }
.s-docs-say { display: inline-block; }
.s-docs-giraffe { width: 150px; height: auto; display: block; margin-bottom: 4px; }
.s-suites { font-weight: 700; }
.s-hdr .btn .cx-ic, .s-hdr .btn img { width: 20px; height: 20px; margin-right: 6px; vertical-align: -4px; }
.s-hdr .s-forms { margin-left: 4px; }
.s-say { background: #fff; border: 3px solid #000; border-radius: 30px; padding: 16px 22px; box-shadow: 0 5px 0 #000; max-width: 520px; }
.s-say .script { font-size: 30px; margin: 0; } .s-say p { margin: 4px 0 0; }
.s-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.s-step { position: relative; background: #fff; border: 3px solid #000; border-radius: 34px; padding: 26px 22px; text-decoration: none; color: inherit; box-shadow: 0 6px 0 #000; transition: translate .2s; }
.s-step:hover { translate: 0 -4px; }
.s-n { position: absolute; right: 18px; top: 14px; font: 400 44px/1 var(--f-script); color: var(--b-blue); }
.s-step p { color: #55656c; margin: 0; }
/* photos on the get-started cards (Mom, Oct 19: "photos or something to spice it up") */
.s-step { overflow: hidden; padding-top: 0; }
.cx .s-step-pic { display: block; width: calc(100% + 44px); max-width: none; height: auto; aspect-ratio: 3 / 2; object-fit: cover; margin: 0 -22px 16px; border-bottom: 3px solid #000; }
.s-step .s-n { top: 12px; right: 12px; width: 52px; height: 52px; display: grid; place-items: center; background: #fff; border: 3px solid #000; border-radius: 50%; font-size: 36px; box-shadow: 0 3px 0 #000; }
.s-offices { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; margin-top: 20px; }
.s-office { text-align: center; text-decoration: none; color: inherit; }
.s-ring { width: min(320px, 80%) !important; height: auto !important; aspect-ratio: 1; margin: 0 auto; border-radius: 50%; overflow: hidden; border: 8px solid #fff; box-shadow: 0 0 0 4px #000, 0 14px 30px rgba(0,0,0,.18); transition: translate .4s, box-shadow .4s; }
.s-ring img { width: 100%; height: 100%; object-fit: cover; display: block; transition: scale .8s; }
.s-office:hover .s-ring { translate: 0 -4px; } .s-office:hover .s-ring img { scale: 1.06; }
.s-office h3 { font-size: 44px; margin: 14px 0 4px; font-weight: 400; }
.s-office p { max-width: 420px; margin: 0 auto; color: #33454b; }
.s-two { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.s-cloud-box { background: #fff; border: 3px solid #000; border-radius: 40px; padding: 26px 30px; position: relative; box-shadow: 0 6px 0 #000; }
.s-cloud-box.big::before { content: ""; position: absolute; left: 30px; right: 30px; top: -22px; height: 24px; background: radial-gradient(circle at 18px 24px, #fff 17px, #000 18px, #000 20px, transparent 21px) 0 0 / 36px 24px repeat-x; }
.s-list { list-style: none; padding: 0; margin: 10px 0 18px; display: grid; gap: 8px; }
.s-list li { display: flex; gap: 10px; align-items: center; font: 700 17px/1.3 var(--f-head); }
.s-list li::before { content: ""; width: 14px; height: 14px; border-radius: 50%; background: var(--b-lime); border: 2px solid #000; flex: none; }
.c5 .h-reviews li { background: #fff; border: 3px solid #000; border-radius: 34px; padding: 24px; box-shadow: 0 6px 0 #000; }

/* footer */
.s-ftr { background: #008ACD; color: #fff; position: relative; padding: 0 0 40px; overflow: hidden; }
.s-ftr .s-wave.top { background: #000; }
.s-ftr-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 28px; padding-top: 40px; position: relative; z-index: 1; }
.s-ftr h3 { color: #fff; } .s-ftr a { color: #fff; } .s-ftr ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 7px; }
.s-ftr .s-cloud-box { color: #1c2529; } .s-ftr .s-cloud-box a { color: #1c2529; font-weight: 700; } .s-ftr .s-cloud-box .script { font-size: 34px; margin: 0; }
.s-ftr .cx-open { color: #fff; }
.s-social { display: flex !important; gap: 10px !important; } .s-social svg { width: 28px; height: 28px; }
.s-ftr-giraffe { position: absolute; right: 2%; bottom: 0; width: 120px; opacity: .95; }
.s-copy { opacity: .8; font-size: 14px; margin-top: 26px; }
.s-mbar { display: none; }

@media (max-width: 1100px) { .s-nav a { padding: 9px 10px; font-size: 14px; } }
@media (max-width: 900px) {
  .s-hdr .s-book, .s-hdr .s-forms { display: none; }
  .s-docs-row { grid-template-columns: 1fr; } .s-docs-giraffe { display: none; }
  .s-nav { position: absolute; top: 100%; left: 0; right: 0; background: #8fd3f4; padding: 12px 16px 18px; flex-wrap: wrap; display: none; border-bottom: 3px solid #000; }
  .s-nav.open { display: flex; } .cx-menu-btn { margin-left: auto; }
  .s-hero-grid, .s-two, .s-offices, .s-ftr-grid { grid-template-columns: 1fr; }
  .s-steps { grid-template-columns: 1fr; }
  .s-bubble { position: static; display: inline-block; margin-bottom: 10px; } .s-bubble::after { display: none; }
  .cx .s-lion { max-width: 260px; margin: 0 auto; }
  .s-host, .s-host.right { flex-direction: column; align-items: center; text-align: center; }
  .s-mascot { width: 140px; }
  .s-ftr { padding-bottom: 100px; } .s-ftr-giraffe { width: 80px; }
  .s-mbar { display: grid; grid-template-columns: 1fr 2fr; gap: 10px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; padding: 10px 14px; background: #8fd3f4; border-top: 3px solid #000; }
}

/* ---------- Mom's mix: header ---------- */
/* the "this is a different draft" signs: purple strip on top + a tag next to the yellow 5 */
.mx-flag { background: #B2258C; color: #fff; text-align: center; padding: 9px 46px 9px 150px; /* room for the fixed tag */ font: 700 15px/1.35 var(--f-head); border-bottom: 3px solid #000; }
.mx-flag b { display: inline-block; background: #fff; color: #B2258C; border: 2px solid #000; border-radius: 999px; padding: 2px 12px; margin-right: 10px; text-transform: uppercase; letter-spacing: .05em; font-weight: 900; }
.mx-tag { position: fixed; z-index: 2147483000; left: 30px; top: 8px; height: 24px; padding: 0 10px 0 9px; border-radius: 999px; background: #B2258C; color: #fff; border: 2px solid #000; font: 900 12px/20px var(--f-head); text-decoration: none; text-transform: uppercase; letter-spacing: .04em; box-shadow: 0 2px 6px rgba(0,0,0,.25); white-space: nowrap; }

/* top band = the main site's header (Mom: "we like the size of the logo ... along with the Spanish option and name") */
.mx-top { background: #008ACD; color: #fff; }
.cx .mx-top-in { display: flex; align-items: center; gap: 22px; padding-top: 14px; padding-bottom: 14px; } /* Ender, Oct 24: the logo looked cropped by the band */
.cx .mx-logo img, .mx-logo img { width: 108px; height: 108px; display: block; }
.mx-id { display: flex; align-items: center; gap: 16px; flex: 1; min-width: 0; }
.mx-name { color: #fff; text-decoration: none; font-size: 44px; line-height: 1.1; text-shadow: 0 1px 2px rgba(0,0,0,.25); }
.mx-top .lang-switch { position: static; width: auto; flex: none; color: #fff; }
.mx-contact { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.mx-social { gap: 8px; margin: 0; } .mx-social a { width: 32px; height: 32px; }
.mx-contact p { margin: 0; display: flex; flex-direction: column; align-items: flex-end; }
.mx-contact p a { color: #fff; font: 700 14px/20px var(--open, var(--f-body)); }

/* menu bar = Passport's (Mom: "I like the book a visit icon on this one and the menu at the top") */
.mx-hdr { background: #fff; }
.mx-stick { position: sticky; top: 0; z-index: 50; } /* Mom, Oct 22: logo always on screen (band + menu stick together) */
.cx .mx-bar { display: flex; align-items: center; gap: 10px; padding-top: 12px; padding-bottom: 14px; } /* Ender, Oct 24: buttons looked cropped at the top */
.mx-nav { display: flex; gap: 4px; margin-right: auto; margin-left: -12px; }
.mx-nav a { font: 800 16px/1 var(--f-head); color: #000; text-decoration: none; padding: 11px 13px; border-radius: 999px; white-space: nowrap; }
.mx-nav a:hover { background: var(--b-sky); }
.mx-hdr .btn .cx-ic svg { width: 20px; height: 20px; } .mx-hdr .btn .cx-ic { margin-right: 6px; }
.mx-route { height: 14px; border-bottom: 3px solid #000; background: repeating-linear-gradient(90deg, #000 0 14px, transparent 14px 26px) center 6px / 100% 2px no-repeat; position: relative; }
.mx-route .cx-ic { position: absolute; left: 42%; top: -9px; width: 30px; height: 30px; background: #fff; border-radius: 50%; color: #000; z-index: 1; }

@media (max-width: 1100px) { .mx-nav a { padding: 10px 8px; font-size: 14.5px; } .mx-name { font-size: 32px; } }
@media (max-width: 900px) {
  .mx-flag { font-size: 13px; padding: 8px 12px 8px 40px; text-align: left; } .mx-flag span { display: block; margin-top: 4px; }
  .mx-tag { display: none; }
  .cx .mx-top-in { gap: 12px; padding-top: 8px; padding-bottom: 8px; }
  .cx .mx-logo img, .mx-logo img { width: 64px; height: 64px; }
  .mx-name { display: none; }
  .mx-id { order: 3; flex: none; }
  .mx-contact { align-items: flex-start; margin-right: auto; } .mx-contact p { align-items: flex-start; } .mx-contact p a { font-size: 13px; }
  .mx-social a { width: 26px; height: 26px; }
  .cx .mx-bar { position: relative; padding-top: 8px; padding-bottom: 10px; }
  .mx-nav { position: absolute; top: 100%; left: 0; right: 0; margin: 0; background: #fff; border-bottom: 3px solid #000; flex-direction: column; padding: 10px 16px 18px; display: none; z-index: 2; }
  .mx-nav.open { display: flex; }
  /* Ender, Nov 7: the phone menu slides open smoothly and the three lines turn into an X. Pure CSS, so it always takes
     the same 0.22 s, however slow the internet is. Closed = invisible and untappable (visibility). */
  .mx-nav { display: flex; visibility: hidden; clip-path: inset(0 0 100% 0); opacity: 0;
    transition: clip-path .22s cubic-bezier(.2, .8, .2, 1), opacity .16s ease, visibility 0s linear .22s; }
  .mx-nav.open { visibility: visible; clip-path: inset(0 0 -20px 0); opacity: 1;
    transition: clip-path .22s cubic-bezier(.2, .8, .2, 1), opacity .12s ease, visibility 0s; }
  .cx-menu-btn span { transition: background-color .12s ease; }
  .cx-menu-btn span::before, .cx-menu-btn span::after { transition: top .22s cubic-bezier(.2, .8, .2, 1), transform .22s cubic-bezier(.2, .8, .2, 1); }
  .cx-menu-btn[aria-expanded="true"] span { background-color: transparent; }
  .cx-menu-btn[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
  .cx-menu-btn[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); }
  .mx-forms { margin-left: 0; } .mx-book { margin-right: auto; }
  .mx-hdr .btn { padding-left: 14px; padding-right: 14px; }
  .mx-hdr .cx-menu-btn { margin-left: auto; }
}
@media (max-width: 420px) { .mx-hdr .mx-forms .cx-ic { display: none; } .mx-hdr .btn { font-size: 14px; padding-left: 11px; padding-right: 11px; } }


/* ---------- Mom's notes, Oct 22 ---------- */
/* slimmer band once you scroll (c5.js adds .mx-small) */
.cx.mx-small .mx-top-in, .mx-small .cx .mx-top-in { padding-top: 6px; padding-bottom: 6px; gap: 16px; }
.cx .mx-small .mx-logo img, .mx-small .mx-logo img { width: 66px; height: 66px; }
.mx-small .mx-name { font-size: 30px; }
.mx-small .mx-contact { gap: 3px; }
.mx-small .mx-contact p a { font-size: 12.5px; line-height: 16px; } .mx-small .mx-social a { width: 26px; height: 26px; }
/* the plane line stays in the slim header too (Ender, Oct 24: "that airplane is part of the banner") */
.mx-small .cx .mx-bar { padding-top: 8px; padding-bottom: 10px; }


/* social icons in their real colors, each on a white disc (Mom: "in the color of the recognizable icon") */
.mx-social a, .s-social a { background: #fff; border-radius: 50%; display: grid; place-items: center; box-shadow: 0 0 0 2px #000; }
.mx-social a svg, .s-social a svg { width: 70%; height: 70%; }
.s-social a { width: 40px; height: 40px; }
.c5 .cx-social { gap: 22px; flex-wrap: wrap; }
.c5 .cx-social a { width: 92px; height: 92px; background: #fff; border-width: 4px; box-shadow: 0 5px 0 #000; } /* Mom: bigger */
.c5 .cx-social svg { width: 56px; height: 56px; }

/* Services drop-down */
.mx-dd { position: relative; display: flex; align-items: center; }
.mx-dd-top { padding-right: 4px !important; }
.mx-dd-btn { width: 26px; height: 30px; border: 0; background: none; cursor: pointer; border-radius: 8px; margin-left: -4px; position: relative; }
.mx-dd-btn::before { content: ""; position: absolute; left: 8px; top: 10px; width: 7px; height: 7px; border-right: 3px solid #000; border-bottom: 3px solid #000; rotate: 45deg; }
.mx-dd-btn:hover { background: var(--b-sky); }
.mx-dd-menu { display: none; position: absolute; left: 0; top: 100%; min-width: 270px; padding: 10px; margin-top: 6px; background: #fff; border: 3px solid #000; border-radius: 20px; box-shadow: 0 6px 0 #000; z-index: 3; flex-direction: column; gap: 2px; }
.mx-dd-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; } /* keeps hover alive across the gap */
.mx-dd:hover .mx-dd-menu, .mx-dd:focus-within .mx-dd-menu, .mx-dd.open .mx-dd-menu { display: flex; }
.mx-dd-menu a { padding: 10px 14px !important; border-radius: 12px !important; white-space: nowrap; }
.mx-dd-menu .mx-dd-all { border-top: 2px dashed #000; border-radius: 0 0 12px 12px !important; margin-top: 4px; color: #008ACD !important; }

/* home hero: Mom's longer headline */
.c5 .s-hero h1 { font-size: clamp(36px, 4.2vw, 58px); }

/* sub-menus that stay on screen under the header (Resources, Treatment options) */
.cx-subnav { position: sticky; top: var(--mx-h, 0px); z-index: 40; background: #fff; border-bottom: 3px solid #000; }
.cx-subnav .cx-chips { margin: 0; padding-top: 10px; padding-bottom: 10px; }
.cx-subnav .cx-chips b { font: 800 14px/32px var(--f-head); margin-right: 4px; }
.c5 .cx-sec[id], .c5 [id].cx-anchor { scroll-margin-top: calc(var(--mx-h, 0px) + 70px); }

/* Services: overview cards, the koala, photo spots still to fill */
.svc-cards .cx-card { text-decoration: none; color: inherit; }
.svc-cards .cx-card .more { display: inline-block; margin-top: 10px; font-weight: 800; color: #008ACD; }
.svc-koala { width: 100%; max-width: 380px; height: auto; display: block; margin: 0 auto; }
.svc-photo-todo { border: 3px dashed #000; border-radius: 34px; min-height: 260px; display: grid; place-items: center; text-align: center; padding: 24px; background: #fff; }
.svc-scales { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 16px; }
.svc-scales a { display: block; width: 220px; text-align: center; font-weight: 800; color: inherit; text-decoration: none; }
.svc-scales img { width: 100%; height: auto; border: 3px solid #000; border-radius: 16px; background: #fff; margin-bottom: 8px; }
.svc-quote { font-size: 16px; }
.c5 .cx-split.top > .cx-frame + .cx-frame { margin-top: 0; }

/* Referrals: pictures instead of the long box */
.ref-pics { display: grid; grid-template-columns: 1.2fr .8fr; gap: 30px; align-items: end; }
.ref-pics .cx-frame { max-width: 520px; }
.ref-pics .cx-frame img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 70%; display: block; }
.ref-mascot { width: 100%; max-width: 240px; height: auto; display: block; margin: 0 auto; }

/* What's new */
.wn-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
.wn-card { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.wn-card .wn-art, .wn-card .wn-pic { width: 72px; height: 72px; }
.wn-card img.wn-photo { width: calc(100% + 0px); height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 22px; border: 3px solid #000; }
.wn-msg { font: 700 19px/1.4 var(--f-head); margin: 0; }
.wn-card h3 { margin: 0; }

@media (max-width: 900px) {
  .mx-dd { flex-direction: column; align-items: stretch; } .mx-dd-btn { display: none; }
  .mx-dd-menu { display: flex; position: static; border: 0; box-shadow: none; padding: 0 0 0 18px; margin: 0; min-width: 0; background: none; }
  .mx-dd-menu::before { display: none; } .mx-dd-menu .mx-dd-all { display: none; }
  .mx-dd-menu a { font-size: 15px !important; padding: 8px 10px !important; }
  .mx-small .mx-name, .mx-small .mx-contact p { display: none; }
  .cx .mx-small .mx-logo img, .mx-small .mx-logo img { width: 44px; height: 44px; }
  .mx-small .mx-contact { margin-right: auto; }
  .mx-nav { max-height: calc(100vh - var(--mx-h, 150px)); overflow-y: auto; }
  .c5 .cx-social { gap: 14px; } .c5 .cx-social a { width: 66px; height: 66px; } .c5 .cx-social svg { width: 40px; height: 40px; }
  .ref-pics { grid-template-columns: 1fr; }
  .cx-subnav .cx-chips { flex-wrap: nowrap; overflow-x: auto; }
}

/* ---------- Ender, Oct 24 (video) ---------- */
/* page changes: the header stays still and only the page underneath cross-fades (it used to fade + jump with the page) */
@media (prefers-reduced-motion: no-preference) {
  .mx-stick { view-transition-name: site-header; }
  /* gentle scroll-in: blocks below the first screen rise a little as they come in (c5.js marks them) */
  .mx-rv:not(.is-in) { opacity: 0; translate: 0 20px; }
  .mx-rv { transition: opacity .7s ease, translate .7s cubic-bezier(.2,.7,.2,1); transition-delay: var(--rv-d, 0s); }
}
.cx-hol { margin: 14px 0; padding: 12px 16px; background: #FEF3EE; border: 2px solid #000; border-radius: 16px; }
.cx-hol h4 { margin: 0 0 4px; font: 800 16px/1.2 var(--f-head); }
.cx-hol p { margin: 0 0 6px; } .cx-hol-days { font-weight: 700; } .cx-hol .flag { margin: 6px 0 0; }

/* the map (Ender, Oct 24): clean, our own buttons, soft colors */
.mx-map { position: relative; overflow: hidden; min-height: 420px; background: #eef3f6; z-index: 0; }
.mx-map .leaflet-tile-pane { filter: saturate(.75) brightness(1.04); }
.mx-map-go { position: absolute; left: 14px; top: 14px; z-index: 500; }
.mx-map .leaflet-control-zoom { border: 0; box-shadow: none; margin: 0 14px 22px 0; display: flex; flex-direction: column; gap: 8px; }
.mx-map .leaflet-control-zoom a { width: 44px; height: 44px; line-height: 38px; border-radius: 50% !important; background: #52B74E; color: #000; border: 3px solid #000; box-shadow: 0 3px 0 #000; font: 900 24px/38px var(--f-head); }
.mx-map .leaflet-control-zoom a:hover { background: #8BC77C; }
.mx-map .leaflet-control-attribution { font-size: 11px; background: rgba(255,255,255,.85); }
.mx-pin { background: none; border: 0; }
.mx-pin span { display: block; width: 56px; height: 56px; border-radius: 50%; background: #008ACD; border: 3px solid #000; box-shadow: 0 4px 0 #000; position: relative; }
.mx-pin span::after { content: ""; position: absolute; left: 50%; bottom: -14px; translate: -50% 0; border: 9px solid transparent; border-top: 12px solid #000; }
.mx-pin img { width: 100%; height: 100%; display: block; border-radius: 50%; }
.mx-map .leaflet-popup-content-wrapper { border: 3px solid #000; border-radius: 16px; box-shadow: 0 4px 0 #000; font: 15px/1.4 var(--f-body); }
.cx .s-mascot-full { width: 160px; height: auto; align-self: flex-end; margin-bottom: 8px; } /* full-body hippo (Ender, Oct 24: no cut-off bodies) */
@media (max-width: 900px) { .cx .s-mascot-full { width: 120px; } }

/* Ender, Oct 24 pm: the header slimming was "a big jump". Now everything slides together over .35s
   (c5.js grows the header's margin by exactly what it loses, so the page below never moves). */
.mx-bar { position: relative; z-index: 2; }
@media (prefers-reduced-motion: no-preference) {
  .mx-stick, .mx-top-in, .mx-logo img, .mx-name, .mx-bar, .mx-social a, .mx-contact p a, .mx-contact {
    transition: margin-bottom .35s ease, padding .35s ease, width .35s ease, height .35s ease, font-size .35s ease, line-height .35s ease, gap .35s ease; }
  .mx-measuring, .mx-measuring * { transition: none !important; }
}

/* ---------- Ender's second video, Oct 24 (12:01) ---------- */
/* room between things and the lines: ".cx .in" was wiping out these paddings (same bug as the header) */
.cx .s-hero-grid { padding-bottom: 44px; }
.cx .s-ftr-grid { padding-top: 34px; }
@media (min-width: 901px) { .s-ftr { padding-bottom: 18px; } } /* phones keep the room for the Call / Book bar */
.s-ftr .s-cloud-box { padding: 18px 24px; }
.s-ftr-giraffe { width: 96px; }
.cx .s-copy { margin: 14px auto 0; }
/* "We decided we don't like this": no scalloped cloud tops on the boxes */
.s-cloud-box.big::before { display: none; }
/* the map keeps a normal size instead of stretching to the card's height */
.cx-contact { align-items: start; }
.mx-map { height: 460px; min-height: 0; }
.cx-hol-days { font-weight: 700; margin: 0; }
@media (max-width: 900px) { .mx-map { height: 340px; } }
/* shorter footer: the 7 family links in two columns */
@media (min-width: 901px) { .s-ftr-grid > div:nth-child(3) ul { grid-template-columns: auto auto; column-gap: 22px; justify-content: start; } }
.cx .s-cloud-box.big { padding-top: 24px; padding-bottom: 26px; } .cx .s-cloud-box.big h2 { margin: 0 0 12px; line-height: 1.15; } /* heading was touching the box's top line */
.s-two > .s-cloud-box.big { justify-self: center; } /* keeps the boxes the size Mom saw (the old "in" label used to center them) */

/* ---------- Ender's third video, Oct 24 (12:11) ---------- */
/* "Why is there extra space? I don't like extra space": less room under the page-top buttons */
.c5 .cx-hero { padding: 48px 0 40px; }
/* every button matches: the small chips (on this page / forms filters) are the same size and look as the white buttons */
.cx .cx-chips a, .cx .chip { font: 800 16px/1 var(--f-head); padding: 12px 20px; border: 3px solid #000; border-radius: 999px; box-shadow: 0 4px 0 #000; transition: translate .2s, box-shadow .2s, background-color .2s; }
.cx .cx-chips a:hover, .cx .chip:hover { translate: 0 -2px; box-shadow: 0 6px 0 #000; }
.cx .cx-chips { gap: 12px; }
.cx-subnav .cx-chips a { padding: 9px 16px; font-size: 15px; box-shadow: 0 3px 0 #000; }
@media (max-width: 900px) { .cx .cx-chips a, .cx .chip { font-size: 15px; padding: 10px 16px; } }
/* phones: things you tap are big enough (Ender, Oct 24 audit) */
.mx-map .leaflet-bar a, .leaflet-touch .mx-map .leaflet-bar a { width: 44px !important; height: 44px !important; line-height: 38px !important; }
.cx .cx-chips a, .cx .chip { white-space: nowrap; }
@media (max-width: 900px) { .mx-top .lang-switch { min-height: 36px; padding: 6px 12px; display: inline-flex; align-items: center; } }
/* the old Wix action icons, redone (Ender, Oct 24) */
.mx-acts { background: #F0F5FB; border-top: 3px solid #000; text-align: center; }
.cx.mx-acts .in { padding-top: 34px; padding-bottom: 40px; }
.mx-acts .script { font-size: 36px; margin: 0 0 14px; }
.mx-acts .cx-btns { justify-content: center; }
/* less empty space between sections (Ender, Oct 24: "I don't like extra space ... not wasting it") */
.c5 .cx-sec { padding: 56px 0; } .c5 .s-sec { padding: 48px 0; }
.c5 .cx-sec ul.cx-social { margin-bottom: 0; } .c5 .cx-sec .cx-social + * { margin-top: 0; }
.c5 .cx-sec > .in > :last-child, .c5 .s-sec > .in > :last-child { margin-bottom: 0; }
@media (max-width: 900px) { .c5 .cx-sec { padding: 34px 0; } .c5 .s-sec { padding: 32px 0; } .c5 .cx-hero { padding: 34px 0 30px; } .cx .s-hero-grid { padding-bottom: 30px; } .cx .s-ftr-grid { padding-top: 26px; } }
/* phones (Ender, Oct 24 video 3: "a lot of space ... I don't like all this stuff getting cropped off"):
   a shorter header (the phone number, email and social icons are already in the footer and the Call bar)
   and a shorter footer */
@media (max-width: 900px) {
  .mx-top .mx-contact { display: none; }
  .cx .mx-logo img, .mx-logo img { width: 54px; height: 54px; }
  .cx .mx-top-in { padding-top: 6px; padding-bottom: 6px; justify-content: space-between; }
  .mx-id { order: 0; margin-left: auto; }
  .mx-top .mx-name { display: block; font-size: 21px; margin-right: auto; }
  .cx .mx-bar { padding-top: 8px; padding-bottom: 9px; }
  .c5 .notice-in { padding-top: 7px; padding-bottom: 7px; font-size: 14px; line-height: 1.3; }
  .s-ftr-grid { grid-template-columns: 1fr 1fr !important; gap: 18px 16px; }
  .s-ftr-grid > .s-cloud-box, .s-ftr-grid > div:nth-child(3) { grid-column: 1 / -1; }
  .s-ftr-grid > div:nth-child(3) ul { grid-template-columns: 1fr 1fr; column-gap: 16px; }
  .s-ftr-grid > div:nth-child(2) { order: 3; } .s-ftr-grid > div:nth-child(4) { order: 4; } .s-ftr-grid > div:nth-child(3) { order: 2; }
  .s-ftr .s-cloud-box { padding: 14px 18px; } .s-ftr .s-cloud-box .script { font-size: 28px; }
  .s-ftr-giraffe { width: 64px; }
}
@media (max-width: 440px) { .mx-top .mx-name { font-size: 16px; } .cx .mx-top-in { gap: 10px; } .mx-top .lang-switch { padding: 6px 9px; } .mx-top .lang-switch svg { width: 14px; height: 14px; } }
@media (max-width: 360px) { .mx-top .mx-name { font-size: 14px; } }
.mx-logo { flex: none; } .mx-top .mx-name { min-width: 0; } /* the logo must never be squeezed away (Mom: always see the logo) */

/* ---------- Ender's 4th video, Oct 24 (5:07 PM) ---------- */
/* "Why is there a line in the middle?": the lines sat inside the blue sections. No lines between body sections now
   (like the inner pages); only under the top of each page and above the footer */
.s-sec .s-wave, .s-hero .s-wave { display: none; }
.s-hero { border-bottom: 3px solid #000; }
/* the map pin: just the round logo, no pointer arrow underneath */
.mx-pin span::after { display: none; }
.mx-pin span { border-color: #fff; box-shadow: 0 0 0 3px #000, 0 4px 10px rgba(0,0,0,.35); }
/* Contact / home: the map is as tall as the Visit us box next to it */
.cx-contact { align-items: stretch; }
.mx-map { height: auto; min-height: 380px; }
@media (max-width: 900px) { .mx-map { height: 340px; min-height: 0; } }
/* "Why is this footer enormous?": one compact row */
@media (min-width: 901px) {
  .cx .s-ftr-grid { padding-top: 22px; gap: 24px; align-items: start; grid-template-columns: 1.25fr .9fr 1.2fr 1fr; }
  .s-ftr .s-cloud-box { padding: 12px 18px; box-shadow: 0 4px 0 #000; }
  .s-ftr .s-cloud-box .script { font-size: 26px; }
  .s-ftr .s-cloud-box p { margin: 2px 0 0; font-size: 14px; line-height: 1.4; }
  .s-ftr h3 { margin: 0 0 6px; font-size: 17px; }
  .s-ftr ul { gap: 4px; }
  .cx .s-copy { margin: 10px auto 0; font-size: 12.5px; }
  .s-ftr { padding-bottom: 12px; }
  .s-ftr-giraffe { width: 70px; }
}
/* Our crew: strictly every other color (blue hero, white, blue, white ...) */
.c5 .cx-bios .d-bio { background: #fff; }
.c5 .cx-bios .d-bio:nth-child(odd) { background: var(--x-bg2); }
/* office tours: photos side by side again (Ender, Nov 7: one big photo was too tall to see the top, bottom and arrows at once) */
/* Mom's "On this page" bar on Resources stays, but thinner */
.cx-subnav .cx-chips { padding-top: 9px; padding-bottom: 11px; gap: 8px; }
.cx-subnav .cx-chips a { padding: 6px 13px; font-size: 14px; box-shadow: 0 2px 0 #000; border-width: 2px; }
.cx-subnav .cx-chips b { line-height: 28px; font-size: 13px; }
/* the last section before the footer ends sooner ("Why is there extra space right here?") */
.c5 main > .s-sec:last-of-type, .c5 .cx > .s-sec:last-of-type, .c5 .cx-inner > .cx-sec:last-of-type { padding-bottom: 30px; }

/* Leave a review (Mom, Oct 25): today's Google / Yelp / Facebook logos as three big buttons */
.cx .rv-btns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; max-width: 900px; margin: 0 auto; }
.cx .rv-btn { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 28px 16px; background: #fff; color: #1c2529;
  border: 3px solid #000; border-radius: 22px; box-shadow: 4px 4px 0 #000; text-decoration: none; font-weight: 700; font-size: 18px; text-align: center; }
.cx .rv-btn svg { width: 64px; height: 64px; }
.cx .rv-btn b { display: block; font-size: 24px; }
.cx .rv-btn:hover, .cx .rv-btn:focus-visible { background: #F7FBF4; }
@media (max-width: 700px) { .cx .rv-btns { grid-template-columns: 1fr; gap: 14px; } .cx .rv-btn { flex-direction: row; justify-content: center; padding: 16px; } .cx .rv-btn svg { width: 44px; height: 44px; } }

/* legal links next to the copyright (Mom OK'd the 4 legal pages, Oct 25) */
.cx .s-copy a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.cx .s-legal { white-space: normal; }

/* Home hippo (Ender, Oct 25): the full-body hippo, face in exactly the same spot and size as the old cut-off one
   (eyes measured in both pictures); the box keeps the old size so nothing moves, his legs go down behind step card 1 */
.cx .s-mascot-legs { display: block; position: relative; aspect-ratio: 336 / 258; height: auto; z-index: 0; }
.cx .s-mascot-legs img { position: absolute; left: .6%; top: -.9%; width: 95.7%; max-width: none; height: auto; }
.cx .s-steps, .cx .s-say { position: relative; z-index: 1; }
/* What's new header (Ender, Nov 7): the Santa hippo in the empty right side while the holiday banner runs; floats, so the header keeps its size */
.page-whats-new .cx-hero .in { position: relative; }
.page-whats-new .holiday-art { position: absolute; left: 70%; top: -38px; height: 214px; width: auto; transform: translateX(-50%); pointer-events: none; }
@media (max-width: 760px) { .page-whats-new .holiday-art { display: none; } }

/* Referrals (Mom + Ender, Oct 25): the photo sets the box's size (unchanged), the hippo is much smaller, page a bit tighter */
.page-referrals .ref-mascot { max-width: 165px; }
/* Oct 26 (Ender): on wide screens the hippo fills the whole right side, as tall as the photo (the photo still sets the
   height; nothing else changes size). A sharper cut-out from the original art: hippo-full-big.webp. */
@media (min-width: 901px) {
  .page-referrals .ref-pics > div:last-child { align-self: stretch; position: relative; min-height: 200px; }
  .page-referrals .ref-pics .ref-mascot { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: contain; object-position: 50% 100%; }
}
.page-referrals .cx-hero { padding-bottom: 28px; }
.page-referrals .cx-sec { padding-top: 34px; padding-bottom: 40px; }
@media (max-width: 700px) { .page-referrals .ref-mascot { max-width: 120px; } .page-referrals .cx-sec { padding-top: 22px; padding-bottom: 28px; } }

/* Sleep dentistry: a smaller "Nitrous oxide" photo next to the anesthesia options (Mom, Oct 25) */
.svc-anes { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 32px; align-items: start; }
.svc-anes-fig { margin: 0; }
.svc-anes > .cx-card { margin-top: 0; } /* Ender, Nov 7: the text box and the photo start at the same height */
.svc-anes-fig img { width: 100%; height: auto; display: block; border: 3px solid #000; border-radius: 26px; }
.svc-anes-fig figcaption { margin-top: 10px; text-align: center; font-weight: 800; font-size: 18px; }
@media (max-width: 800px) { .svc-anes { grid-template-columns: 1fr; } .svc-anes-fig { position: static; width: 100%; max-width: 340px; margin: 0 auto; } }

/* Oct 26: the seasonal newsletter on What's new (photo + words, alternating sides) */
.wn-news .cx-kicker { margin: 0 0 10px; }
.wn-story { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 32px; align-items: center; margin-bottom: 28px; }
.wn-story.flip .wn-story-photo { order: 2; }
.wn-story img.wn-story-photo { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 22px; border: 3px solid #000; }
.wn-story img.wn-story-photo.tall { aspect-ratio: 4 / 5; max-height: 520px; object-position: 50% 40%; }
.wn-story h2 { margin: 0 0 10px; }
.wn-story p { margin: 0 0 12px; }
.wn-story .wn-big { font: 700 20px/1.35 var(--f-head); }
.wn-story .wn-btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
/* Ender, Nov 7: the photo next to each story runs the full height of its words (top and bottom line up) */
@media (min-width: 761px) {
  .wn-story { align-items: stretch; grid-auto-rows: minmax(320px, auto); }
  .wn-story img.wn-story-photo, .wn-story img.wn-story-photo.tall { height: 100%; aspect-ratio: auto; max-height: none; contain: size; }
  .wn-story-text > :last-child { margin-bottom: 0; }
}
.wn-also { margin: 0 0 16px; }
.wn-grid .wn-card[data-id="santa2026"] { display: none; }  /* the Santa story above already covers it */
@media (max-width: 760px) {
  .wn-story { grid-template-columns: 1fr; gap: 16px; }
  .wn-story.flip .wn-story-photo { order: 0; }
  .wn-story img.wn-story-photo.tall { aspect-ratio: 3 / 2; }
}

/* Tongue tie before/after photos (Mom's photos, Oct 27) */
.tt-pairs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; margin-top: 18px; }
.tt-pair { margin: 0; }
.tt-pair figcaption { font-weight: 800; font-size: 1.1rem; margin-bottom: 10px; }
.tt-ba { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tt-ba .cx-frame { aspect-ratio: 1 / 1; }
.tt-ba span { display: block; text-align: center; font-weight: 700; margin-top: 6px; }
@media (max-width: 760px) { .tt-pairs { grid-template-columns: minmax(0, 1fr); } }

/* a section with no photo (yet) uses the full width instead of leaving half the row empty */
.cx-split > :only-child { grid-column: 1 / -1; max-width: 860px; }

/* Nov 3: photo inside a card (tongue tie page, "Why it matters to Dr. Stafford") */
.cx-card .card-photo { display: block; width: 100%; height: auto; border: 3px solid #000; border-radius: 24px; margin: 6px 0 14px; }

/* Nov 3 (Mom: "top blue box has weird spacing under it", Special needs): a hero with just a kicker + title gets no extra space under the title */
.c5 .cx-hero .in > h1:last-child { margin-bottom: 0; }
.c5 .cx-hero:has(.in > h1:last-child) { padding-bottom: 34px; }

/* people who ask their phone for less motion get the menu without the slide */
@media (prefers-reduced-motion: reduce) { .mx-nav, .mx-nav.open, .cx-menu-btn span, .cx-menu-btn span::before, .cx-menu-btn span::after { transition: none !important; } }

/* Phones: a button with long words (Spanish: "Formularios para pacientes adultos nuevos") may use two lines
   instead of pushing the page sideways (found by the Nov 11 site check on /es/grown-ups). */
@media (max-width: 640px) { .cx .btn { white-space: normal; max-width: 100%; text-align: center; line-height: 1.2; } }