/* Hand-written overrides for this migration.
 *
 * DELIBERATELY OUTSIDE site/public/styles/ (gotcha 49): tools/port-css.mjs owns
 * that directory and clears its own hashed outputs on every run, so a hand-written
 * sheet placed there is deleted by the next port with no error anywhere — on one
 * site that silently removed the sheet that hides the inactive device bands, and
 * all three headers then rendered at every width.
 *
 * Keep this file minimal. Anything that can come from the ported cascade should.
 */

/* The honeypot. Positioned off-screen rather than display:none — bots skip
 * obviously-hidden fields, and taking it out of flow means it costs no layout,
 * which the pixel gate would otherwise measure. */
.mg-hp {
  position: absolute !important;
  left: -9999px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

/* SPECIFICITY NOTE — read before editing any rule below.
 *
 * Duda emits a per-widget rule for EVERY widget on the site, shaped
 *
 *     #dm .dmBody div.u_1213107879 { display: block !important }
 *
 * That is specificity (1,2,1) and it is `!important`. A hide written as a plain
 * `.mg-only-t { display:none !important }` is (0,1,0), so `!important` on both
 * sides means SPECIFICITY decides and Duda's rule wins — the element stays
 * visible and nothing in the console says so.
 *
 * Measured: with the plain selector, /blog rendered all THREE per-device widget
 * copies at once — 30 cards against live's 10, document height 7640px against
 * live's 3548px, and the gate scored 59.4%.
 *
 * So every gate below repeats its class three times behind `#dm`, giving (1,3,0),
 * which outranks (1,2,1) on class count without relying on source order. Do not
 * "tidy" the repetition away.
 */

/* Blog index: /blog serves 10 of 65 posts and pages the rest from Duda's backend,
 * which we do not have. All 65 ship; runtime.js shows one page of 10 at a time. */
#dm .mg-blog-hidden.mg-blog-hidden.mg-blog-hidden {
  display: none !important;
}

/* PER-DEVICE WIDGET FORKS.
 *
 * Duda builds .dmPhotoGallery and .mainBlog client-side and the three device
 * documents genuinely differ, so build-pages.py emits each widget three times and
 * stamps the copies mg-only-d / mg-only-t / mg-only-m. Without these rules ALL
 * THREE render at every width — which is exactly what the first gate run showed:
 * / came back at 77% with a +10458px height delta and /blog at 62% with +10150,
 * both of them simply the same widget painted three times over.
 *
 * The band boundaries are Duda's own, read out of the ported cascade: mobile
 * <=767, tablet 768-1024, desktop >=1025.
 *
 * These hide rather than remove, deliberately — the elements stay in the document
 * so the runtime can still address them, and display:none costs no layout.
 *
 * Only the INACTIVE bands are hidden, inside the media queries. The active band is
 * never touched, so it keeps whatever `display` the ported cascade gives it — an
 * earlier version hid all three and restored one with `display: revert`, which
 * reverts past the author cascade to the UA default and would have replaced the
 * widget's real display value with a plain `block`. */
@media (max-width: 767px) {
  #dm .mg-only-d.mg-only-d.mg-only-d,
  #dm .mg-only-t.mg-only-t.mg-only-t {
    display: none !important;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  #dm .mg-only-d.mg-only-d.mg-only-d,
  #dm .mg-only-m.mg-only-m.mg-only-m {
    display: none !important;
  }
}

@media (min-width: 1025px) {
  #dm .mg-only-t.mg-only-t.mg-only-t,
  #dm .mg-only-m.mg-only-m.mg-only-m {
    display: none !important;
  }
}

/* PARALLAX ATTACHMENT, MEASURED PER BAND (gotchas 22 and 44).
 *
 * Duda freezes parallax on touch in ITS RUNTIME, not in CSS. The ported cascade
 * therefore carries `background-attachment: fixed !important` at every width,
 * while live actually computes:
 *
 *     desktop 1440 = fixed      tablet 768 = scroll      mobile 375 = scroll
 *
 * (tools/probe-attachment.mjs, and tools/probe-fixed-bg.mjs confirms exactly ONE
 * element site-wide computes fixed with a real background image: u_1758549802 on
 * the home page. That probe scrolls to settle first — an earlier version read the
 * computed style ~2s after load, before Duda paints backgrounds from
 * data-background-image, and reported zero fixed backgrounds site-wide.)
 *
 * Left `fixed` below 1025px, the background attaches to the VIEWPORT, so a
 * full-page capture sizes it to the whole document and renders a completely
 * different crop of the same photograph.
 *
 * SPECIFICITY: Duda's own rule is `#dm .dmBody div.u_1758549802` — (1,2,1) and
 * !important. A `[class*=dmSectionParall]` selector is (0,1,0) and loses. The
 * class is repeated three times behind #dm for (1,3,0), which outranks it on
 * class count without depending on source order. Both of Duda's spellings are
 * matched — it ships dmSectionParallaxNew AND dmSectionParallex.
 *
 * Scoped to <=1024px, which is the band edge measured on this site (the desktop
 * header takes over at 1025). */
@media (max-width: 1024px) {
  #dm [class*="dmSectionParall"][class*="dmSectionParall"][class*="dmSectionParall"] {
    background-attachment: scroll !important;
  }
}

/* ----------------------------------------------------------- accordion arrow --
 * Duda's ssraccordion draws its indicator as two 11px bars forming a plus, and
 * flips it to a minus on open by swapping a styled-components class on each bar.
 * Those open-state classes (jxwvWq / kEBKQa on /faqs) are injected at runtime by
 * a React bundle we do not have, so they are absent from the ported cascade and
 * there is nothing to toggle. The rules below reproduce the SAME computed values,
 * measured off live at /faqs @1440 rather than guessed:
 *
 *   closed  bar 1  transform: matrix(0,-1,1,0,0,0)  = rotate(-90deg)  opacity 1
 *           bar 2  transform: matrix(0,-1,1,0,0,0)  = rotate(-90deg)  opacity 1
 *   open    bar 1  transform: matrix(0, 1,-1,0,0,0) = rotate( 90deg)  opacity 1
 *           bar 2  transform: matrix(0, 1,-1,0,0,0) = rotate( 90deg)  opacity 0
 *   both    transition: 0.5s ease-in-out
 *
 * i.e. both bars spin 180deg and the horizontal one fades out, turning the plus
 * into a minus. The open state is carried on the <li> as data-gy-acc="open",
 * set by runtime.js — an attribute rather than a class so it cannot collide with
 * any Duda class name in the ported sheets.
 *
 * SPECIFICITY: the ported closed-state rule is a bare styled-components class,
 * (0,1,0). `li[data-grab][data-gy-acc] > … > div` carries two attributes plus an
 * element, which outranks it without !important on the transform. The bars have
 * no id or class hook of their own — they are the two children of the arrow's
 * inner wrapper — so they are addressed positionally, which is how Duda's own
 * stylesheet addresses them too. */
li[data-grab="accordion-item-container"][data-gy-acc="open"]
  [data-grab="accordion-item-arrow"] > div > div {
  transform: rotate(90deg);
}
li[data-grab="accordion-item-container"][data-gy-acc="open"]
  [data-grab="accordion-item-arrow"] > div > div:last-child {
  opacity: 0;
}

/* -------------------------------------------------------- mobile click-to-call --
 * An ADDITION to the ported header, not a reproduction of it. Measured on live
 * at 390: the mobile header holds the logo, a booking icon linking to
 * /consultations, and the hamburger, and its only tel: link sits at x=456 in a
 * 390px viewport — off screen. So a visitor on a phone cannot reach the
 * practice's number without opening the menu first.
 *
 * It is anchored the way DUDA'S OWN HAMBURGER is anchored, which is the only
 * thing here that reliably lands in the header: the hamburger is not a child of
 * `#hamburger-header-container` at all — it is a sibling, `position: fixed`,
 * `top: 20.93px; right: 10px; z-index: 14`, measured on the build at 390. A
 * first attempt positioned this button absolutely inside the header container
 * and it rendered at y=5204, because that container is not its offset parent.
 *
 * So: fixed, right of the viewport, offset past the hamburger's own 40px box and
 * its 10px inset, and stretched over the 81px header band with its content
 * flex-centred — which puts the glyph's centre at 40.5px against the
 * hamburger's 40.9px, rather than depending on a fractional `top`.
 *
 * Being fixed inside the same transformed ancestor, it slides with the page when
 * the drawer opens, exactly as the hamburger does.
 *
 * Gated to the mobile band. Tablet and desktop already show a
 * "Call: (415) 923-3377" button on screen and must not gain a second one — which
 * is also why the element carries data-mg-band="m" and is pruned outright there.
 */
@media (max-width: 767px) {
  a.gy-mobile-call {
    position: fixed;
    top: 0;
    right: 58px;
    height: 81px;
    width: 40px;
    z-index: 14;
    display: flex;
    align-items: center;
    justify-content: center;
    color: inherit;
    text-decoration: none;
  }
  a.gy-mobile-call .dm-icon-phone {
    font-size: 22px;
    line-height: 1;
  }
}

/* Belt and braces: the element is pruned on the other bands, but if it is ever
 * emitted there it must not paint over the desktop header's own call button. */
@media (min-width: 768px) {
  a.gy-mobile-call {
    display: none !important;
  }
}

/* ------------------------------------------------------- /about page heading --
 * "About Dr. Karhade" is the /about page's own title and was marked up as an
 * <h2>, leaving that page with no h1 at all. Promoting it is an SEO fix, but
 * unlike the other thirteen pages given the same treatment this heading carries
 * NO size class — it inherited Duda's element default — so changing the tag also
 * changed its type:
 *
 *     as h2   font-size 42px   line-height 50.4px   page 4365px tall
 *     as h1   font-size 50px   line-height 60px     page 4375px tall
 *
 * The other thirteen all carry an explicit `size-56`/`size-40` class plus an
 * inner font-size span, so their metrics were identical before and after and
 * need no rule. This pins only this one heading back to the h2 metrics, so the
 * page reads as it did on live while still having a proper h1. Keyed on the
 * paragraph widget's own id, which is stable per page in Duda's markup.
 *
 * ATTRIBUTE SELECTOR, NOT `#1599897990`. Duda's ids are numeric, and a CSS id
 * selector may not start with a digit unescaped — the first attempt wrote both
 * forms in one comma list, which made the whole rule invalid and silently
 * dropped it, leaving /about still 10px taller than live. */
#dm .dmContent [id="1599897990"] h1 {
  font-size: 42px;
  line-height: 50.4px;
}

/* AND THE MOBILE DOCUMENT USES A DIFFERENT SIZE, which the first version of this
 * pin missed by measuring at 1440 only and then applying that value at every
 * width. Live per band, measured:
 *
 *     390   font-size 28px, line-height normal   heading 32px tall
 *     768   font-size 42px, line-height 50.4px   heading 101px tall
 *     1024  font-size 42px, line-height 50.4px   heading 50px tall
 *     1440  font-size 42px, line-height 50.4px   heading 50px tall
 *
 * Forcing 42px on the phone wrapped "About Dr. Karhade" onto a second line and
 * pushed the whole page down 69px (6661 -> 6730), which a 1440-only check could
 * never see. */
@media (max-width: 767px) {
  #dm .dmContent [id="1599897990"] h1 {
    font-size: 28px;
    line-height: normal;
  }
}

/* ------------------------------------- /melanin-rich-skin "Pigmentation" head --
 * This page carried TWO h1s — its own title and a mid-page section heading —
 * which is what live serves too. The section heading is demoted to h2 so the
 * page has one h1, but like /about's title it carries no size class and would
 * therefore change type with the tag (h1 50px -> h2 42px). Pinned back to the
 * h1 metrics so the section reads exactly as it does on live.
 *
 * Keyed through the paragraph widget's id with an attribute selector: Duda's
 * ids are numeric and `#1600964819` is not a valid CSS id selector. */
#dm .dmContent [id="1600964819"] h2 {
  font-size: 50px;
  line-height: 60px;
}

/* Same per-band caveat as /about's title: the mobile document sizes this
 * heading differently, so pinning the desktop value everywhere made the phone
 * 14px taller than live. Measured on live:
 *
 *     390   font-size 40px, line-height normal   heading 46px tall
 *     768   font-size 50px, line-height 60px     heading 60px tall
 *     1440  font-size 50px, line-height 60px     heading 60px tall  */
@media (max-width: 767px) {
  #dm .dmContent [id="1600964819"] h2 {
    font-size: 40px;
    line-height: normal;
  }
}

/* --------------------------------------------------- headings inside a popup --
 * Duda ships these as an inline <style> INSIDE the popup page's own markup, and
 * this port strips every <style> from emitted body markup (gotcha 47) and lets
 * the CSS port carry them — so without this the target page's h1/h3 render at
 * their full page size inside a 339px-tall popup box. Reproduced verbatim from
 * live's injected rule. */
#dm div.dmContent #dmPopup h1,
#dm div.dmContent #dmPopup h1 *,
#dm div.dmContent #dmPopup h3,
#dm div.dmContent #dmPopup h3 * {
  font-size: inherit;
}

/* ------------------------------------------- header-over-content clearance --
 * On desktop and tablet the page template is `header-over-content`: the header
 * paints on top of the first content row, and that row is a SPACER whose only
 * job is to push the real content clear of it. It over-shoots, leaving a band
 * of page background between the header's bottom border and the first section —
 * the "weird gap" below the header on almost every page.
 *
 * Measured across all 87 pages, at the header's own height per band:
 *
 *            header   spacer row   excess   pages
 *   1440     172px    200px        28px     80
 *   768      173px    200px        27px     80
 *
 * — the same three-figure shape everywhere, because the row is padding 50/50
 * around a 100px spacer on every one of them. The excess is taken off the row's
 * bottom padding so the first section begins exactly at the header's edge.
 *
 * NOT APPLIED TO MOBILE. That document does not overlay: it pushes content down
 * with siteContentMarginTop:84px, so the first row sits fully below the header
 * and is ordinary whitespace, not clearance.
 *
 * SCOPED WITH :has() TO SPACER-ONLY ROWS. Four pages — /, /acne, /book-in-sf and
 * /existing-patients — open with a real content row instead, and shrinking those
 * would eat 28px of their layout. The :not() guard excludes any first row that
 * carries text, media or a button. A browser without :has() support simply keeps
 * today's spacing rather than breaking.
 *
 * !important IS REQUIRED. Duda sets this row's padding per element —
 * `#dm .dmBody div.u_1901167026 { padding: 50px 40px !important }` — so the
 * first version of this rule, written without it, matched and lost silently. */
@media (min-width: 1025px) {
  #dm .dmContent > div > .dmRespRow:first-child:has(.dmSpacer):not(:has(p, h1, h2, h3, h4, h5, h6, img, iframe, video, .dmButtonLink, form)) {
    padding-bottom: 22px !important;
  }
}
@media (min-width: 768px) and (max-width: 1024px) {
  #dm .dmContent > div > .dmRespRow:first-child:has(.dmSpacer):not(:has(p, h1, h2, h3, h4, h5, h6, img, iframe, video, .dmButtonLink, form)) {
    padding-bottom: 23px !important;
  }
}

/* ------------------------------------------------- drawer close icon (the X) --
 * The hamburger rotates into an X when the drawer opens (that part already
 * matched live), but it keeps its at-rest ink, which is close to the colour of
 * the overlay it now sits on:
 *
 *     tablet  slices rgb(122, 98, 91)  over an overlay of almost the same brown
 *     mobile  slices rgb(33, 33, 33)   dark grey on that same brown
 *
 * so on tablet the close control is effectively invisible and on mobile it is
 * only just legible. Live has the same problem — its tablet X is fainter than
 * ours — so this is an improvement on live rather than a port fix.
 *
 * The slices are not painted with background-color; each is a 2px-tall box drawn
 * with `border-top: 1px <colour>`, which is why the override targets
 * border-top-color specifically. Scoped to the open state, so the closed
 * hamburger keeps the site's own colours on both bands. */
#dm-outer-wrapper.layout-drawer_open .layout-drawer-hamburger .hamburger__slice {
  border-top-color: #ffffff !important;
}

/* --------------------------------------------- testimonial photo on mobile --
 * The reviewer's photo in "What Our Patients Say" renders as a 382 x 382 circle
 * on a 390px-wide phone — measured on live and on the build, identical — so it
 * fills essentially the whole viewport width and pushes the review itself well
 * below the fold. Reduced to roughly a third (382 / 3 = 127.3, taken to 128px),
 * which reads as an avatar beside the quote rather than a hero image.
 *
 * Both the circle and the <img> inside it carry an explicit 382.188px in the
 * ported cascade, so both have to be overridden or the image keeps its size and
 * overflows the smaller circle. Addressed through Duda's own data-grab hooks
 * rather than the styled-components hashes (.blNMrw / .gxGGOQ), which are not
 * stable across builds, and behind #dm for specificity over those bare class
 * rules.
 *
 * Mobile only: at 768 and above the slide is wide enough that the photo is
 * already in proportion, and live is untouched there. */
@media (max-width: 767px) {
  #dm [data-grab="slide-media-container"] {
    /* flex-basis, not height, is what sizes this. It is a column-flex item with
     * `flex-basis: 39%` of a 980px slide = 382px, and `aspect-ratio: 1/1` then
     * derives the width from that. Overriding height alone left the circle
     * 128 wide and still 382 tall. The parent is `align-items: center`, so it
     * re-centres itself with no margin needed. */
    flex-basis: 128px !important;
    width: 128px !important;
    height: 128px !important;
  }
  #dm img[data-grab="slide-media"] {
    width: 128px !important;
    height: 128px !important;
    object-fit: cover !important;
  }
}

/* --------------------------------------------------- legal page section cards --
 * The Privacy Policy is built to match /terms-conditions, whose body sections
 * are each a bordered card. Those rows get their treatment from Duda's
 * per-element classes (`#dm .dmBody div.u_1224024984 { … }`), which exist only
 * for that page's own row ids, so a new page needs the same values declared for
 * it. Measured off /terms-conditions rather than chosen:
 *
 *     border   4px solid var(--color_1)   ( = rgb(236,226,224) )
 *     padding  30px at 1440 and 768, 20px at 390
 *     gap      a 50px spacer row between consecutive sections, all bands
 *     h2       42px desktop/tablet, 28px mobile, left aligned — inherited, so
 *              nothing is declared for it here
 *
 * Kept as its own class rather than reusing terms-conditions' u_ classes: those
 * are named for that page's element ids, and borrowing them would tie the two
 * pages together for anyone reading the markup later. */
#dm .dmBody div.gy-legal-section {
  border: 4px solid var(--color_1);
  padding: 30px;
  width: auto;
}
#dm .dmBody div.gy-legal-gap {
  height: 50px;
}
/* The gap ROW must lose Duda's default row padding too. `#dm .dmContent
 * .dmRespRow { padding: 120px 40px }` applies to every row, so a 50px spacer
 * inside an unstyled row measured 120 + 50 + 120 = 290px between cards against
 * the Terms page's 50. Terms' own gap rows zero it through their u_ classes. */
#dm .dmContent .dmRespRow.gy-legal-gap-row {
  padding: 0;
}
@media (max-width: 767px) {
  #dm .dmBody div.gy-legal-section {
    padding: 20px;
  }
}

/* ------------------------------------------------------ footer map height cap --
 * The GBP embed in the footer shipped at height="350" (live's own value). Capped
 * at 300px per the review checklist. The attribute is changed on the iframe so
 * the element reserves the right space from the start rather than being resized
 * after layout, and the row that holds it is capped to match so the section does
 * not keep 50px of empty footer where the map used to reach. */
#dm .dmFooter .dmRespRow.u_1878376191 {
  max-height: 300px;
  overflow: hidden;
}
#dm .dmFooter .dmCustomHtml iframe[src*="maps/embed"] {
  max-height: 300px;
  display: block;
}

/* --------------------------------------------------------------- /about CTA --
 * /about was the one page with no next step at all: no phone link, no internal
 * link and no button anywhere in its body, so a visitor finished Dr. Karhade's
 * bio with nowhere to go. It sits directly under the "She aims to provide skin
 * education…" paragraph, inside that text column, rather than in a row of its
 * own between sections.
 *
 * The button reuses the home page's primary CTA markup and its u_1973169835
 * class verbatim, so it inherits the site's own button styling — colour, radius,
 * gradient, icon — rather than introducing any of its own. Only the row around
 * it needs spacing. */
/* Only spacing is declared. The button is a DIRECT CHILD of the .dmRespCol, as
 * every other Duda button on the site is, so it picks up
 *   `#dm .dmRespRow .dmRespCol > .dmWidget { width: 280px; max-width: 100% }`
 * on its own. A first version wrapped it in a div for spacing, which broke that
 * child selector and left a 500px slab filling the whole text column. */
#dm .dmBody a.gy-about-cta {
  margin-top: 24px;
}
@media (max-width: 767px) {
  #dm .dmBody a.gy-about-cta {
    margin-top: 20px;
  }
}

/* ------------------------------------------------- blog pagination numbers --
 * The numbered pager under each blog post rendered its page numbers in WHITE on
 * a transparent background, so on the white page only the current page was
 * visible — it sits on a filled circle. "2", "3" and the next arrow were there,
 * correctly sized and clickable, and invisible. Measured, live and build alike:
 *
 *     li.active    background rgb(101,106,100), border-radius 50%
 *     a.active     colour #fff  — reads correctly on that circle
 *     a (others)   colour #fff  on transparent — invisible
 *
 * Inactive numbers now take the same rgb(101,106,100) the active pill is filled
 * with (--color_2), so the set reads as one control: filled circle for the page
 * you are on, plain numerals either side. The disabled arrow keeps live's own
 * grey rather than being pulled into this rule.
 *
 * Live has the identical problem, so this is an improvement on live rather than
 * a port fix — the numbers cannot be used there either. */
#dm .pagination-list a.pagination-link:not(.active):not(.disabled) {
  color: var(--color_2);
}

/* ------------------------------------- mobile sticky header: call + menu ink --
 * Once the mobile header goes sticky it turns brown, and Duda repaints its OWN
 * contents white for contrast — measured while scrolled at 390:
 *
 *     header background   rgb(122, 98, 91)
 *     booking icon        fill  #fff   (Duda's)
 *     KKMD logo           color #fff   (Duda's)
 *     call icon           color #000   <- ours, added for the review
 *     hamburger slices    border-top rgb(33,33,33)
 *
 * so the two controls on the right stayed dark on brown. Both are whitened in
 * that state to match the icons either side of them.
 *
 * SCOPED WITH :has() BECAUSE NEITHER CONTROL IS INSIDE THE HEADER. Duda renders
 * the hamburger — and this port's call button alongside it — as position:fixed
 * SIBLINGS of #mobile-hamburger-header, not children, so a descendant selector
 * off the sticky class cannot reach them. The state is read from the header
 * through their nearest common ancestor instead. Without :has() support the
 * icons simply keep today's colour.
 *
 * The hamburger targets border-top-color: its slices are 2px boxes drawn with a
 * 1px top border, not background fills. */
@media (max-width: 767px) {
  #dm-outer-wrapper:has(#mobile-hamburger-header.scroll-responder_set) a.gy-mobile-call,
  #dm-outer-wrapper:has(#mobile-hamburger-header.scroll-responder_set) a.gy-mobile-call .dm-icon-phone {
    color: #ffffff;
  }
  #dm-outer-wrapper:has(#mobile-hamburger-header.scroll-responder_set)
    .layout-drawer-hamburger .hamburger__slice {
    border-top-color: #ffffff;
  }
}

/* ------------------------------------------- In The Media: featured outlets --
 * Allure, Women's Health, Forbes, Elle and Byrdie are lifted out of the
 * accordion into logo cards — three on the first row, two on the second — while
 * the remaining thirteen outlets stay in the accordion below.
 *
 * The card treatment is the site's own: a 4px border in --color_1, the same one
 * the legal pages' section cards use, so these read as part of the design rather
 * than as a bolted-on grid. The logo sits on a tinted panel at the top of each
 * card, which separates the mark from the headline and gives the row a shape
 * beyond three floating images.
 *
 * THE LOGOS HAVE VERY DIFFERENT ASPECT RATIOS (Forbes 598x151, Byrdie 288x43,
 * Elle 369x148 after trimming), so the panel caps BOTH axes with object-fit:
 * contain. Sizing by width alone would render Byrdie almost three times Elle's
 * width; sizing by height alone does the reverse.
 *
 * Cards in a row share a baseline — the headline block grows so every "Full
 * Article" link sits on the same line however many lines the headline wraps to —
 * and the second row is centred so two cards sit under the middle of the three
 * above them.
 */
#dm .dmBody .gy-media-row .dmRespColsWrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
/* Duda pads every row 120px top and bottom, which put 240px of dead space
 * between the three logos and the two below them. */
#dm .dmContent .dmRespRow.gy-media-row {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
#dm .dmContent .dmRespRow.gy-media-row:first-of-type {
  padding-top: 20px !important;
}
#dm .dmBody .gy-media-row .dmRespCol {
  display: flex;
  padding: 12px;
}
#dm .dmBody .gy-media-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: #ffffff;
  border: 4px solid var(--color_1);
  /* Duda gives a column's child div ~16px of horizontal padding, which left the
     tinted logo panel floating inset with white either side of it instead of
     spanning the card. */
  padding: 0;
  text-align: center;
  overflow: hidden;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
#dm .dmBody .gy-media-card:hover {
  border-color: var(--color_3);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.08);
  transform: translateY(-3px);
}
#dm .dmBody .gy-media-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 104px;
  margin: 0;
  padding: 0 24px;
  background: var(--color_1);
}
#dm .dmBody .gy-media-logo img {
  max-height: 52px;
  max-width: 170px;
  width: auto;
  height: auto;
  object-fit: contain;
}
#dm .dmBody .gy-media-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 24px 22px 26px;
}
#dm .dmBody .gy-media-body p {
  margin: 0;
}
/* The <br> is a leftover from the accordion markup these cards were lifted out
   of, where it separated the headline from the link. Here the layout does that. */
#dm .dmBody .gy-media-body br {
  display: none;
}
#dm .dmBody .gy-media-body p:first-child {
  font-size: 17px;
  line-height: 1.5;
}
/* margin-top:auto pins the link to the bottom of the card, so the links line up
   across a row however many lines each headline wraps to. */
#dm .dmBody .gy-media-body p:last-child {
  margin-top: auto;
  padding-top: 18px;
}
#dm .dmBody .gy-media-body a {
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  letter-spacing: 0.04em;
  font-size: 14px;
  text-transform: uppercase;
}
#dm .dmBody .gy-media-body a:hover {
  color: var(--color_3);
}
@media (max-width: 767px) {
  #dm .dmBody .gy-media-row .dmRespCol {
    padding: 8px 0 12px;
  }
  #dm .dmBody .gy-media-logo {
    height: 88px;
  }
  #dm .dmBody .gy-media-logo img {
    max-height: 44px;
    max-width: 150px;
  }
  #dm .dmBody .gy-media-body {
    padding: 20px 18px 22px;
  }
}

/* -------------------------------------------- /patient FAQ question size --
 * The accordion's question headings render at 36px on desktop and tablet, which
 * is heading-scale for what is a list of eleven questions — mobile already sets
 * 24px. Brought down to 24px above the phone band so the list reads as a set of
 * questions rather than eleven section titles.
 *
 * Scoped to this page via body[data-page-alias="patient"]: the same widget
 * carries the outlet names on /in-the-media, which are short and are meant to
 * read large. */
@media (min-width: 768px) {
  body[data-page-alias="patient"] #dm .dmBody li.accordion-item .title-text h3 {
    font-size: 24px;
    line-height: 1.35;
  }
}

/* -------------------------------------- new service pages: "About" section --
 * The three Fotona treatment pages were built from the same shell, so their
 * second section sat on the same white ground as everything above it. A soft
 * tint in the site's own beige (--color_1, the header's colour) separates it
 * from the hero without introducing a colour the brand does not already use. */
#dm .dmContent .dmRespRow.gy-svc-about {
  background-color: var(--color_1);
  /* Duda pads every row 120px top and bottom. On a section this short that left
     a screen of empty tint below the copy before the CTA began. */
  padding-top: 56px !important;
  padding-bottom: 56px !important;
}
#dm .dmContent .dmRespRow.gy-svc-about p {
  margin-bottom: 14px;
}
/* The CTA's two paragraphs ran together as one block — Duda's <p> inside this
   column carries no bottom margin of its own. */
#dm .dmBody div.u_1568139668 .dmNewParagraph p + p {
  margin-top: 14px;
}
@media (max-width: 767px) {
  #dm .dmContent .dmRespRow.gy-svc-about {
    padding-top: 36px !important;
    padding-bottom: 36px !important;
  }
}