/*
 * Small-screen corrections over the Webflow export.
 *
 * Loaded on every page ported from Webflow, after webflow.css and
 * legibility.css, so these win on equal specificity. Recorded in
 * docs/adr/0012-small-screens-over-parity.md.
 *
 * Webflow's stylesheet has four bands: desktop, 991px and down, 767px and down,
 * 479px and down. Most of what breaks does so because a component is only
 * re-laid-out in the smallest band, which leaves every width from 480px to 767px
 * — a large phone turned sideways, a small tablet, a folding phone — with the
 * desktop arrangement squeezed into a phone's width. The rules below mostly
 * carry the 479px layout up to where it is needed, rather than inventing one.
 *
 * Every rule names what it fixed, where it was seen, and at which width. None of
 * them changes the desktop page at 1200px and up, but two: the enquiry form's
 * Assessment picker keeps less room at its right (ticket 34), which moves no box,
 * and the Functional Needs Assessment's photograph on /services is placed at
 * every width (ticket 42), which moves no box either.
 *
 * The live Webflow site has every one of these defects, except that last rule:
 * its panel is this site's own.
 */


/* ===========================================================================
   Every width
   =========================================================================== */

/* Article tables. lib/rich-text.js wraps each table in `.table-scroll` so it
   scrolls in its own box, but the rule that makes it scroll lives in site.css,
   which the ported Article pages never load. On a phone the right-hand columns
   of the tables in 20 Articles were cut off with no way to reach them. The box is
   already a focus stop (ticket 13), so it also gets a ring to show it has focus. */
.table-scroll {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  /* A box that scrolls stops its child's margins collapsing through it, which
     added 17px above and 24px below every table at every width. The table's
     own 24px moves out here, where it collapses with its neighbours as before. */
  margin: 24px 0;
}
.table-scroll > table {
  margin-top: 0;
  margin-bottom: 0;
}
.table-scroll:focus-visible {
  outline: 3px solid #4ecfa2;
  outline-offset: 2px;
}

/* The enquiry form's Assessment picker. Webflow gives selects a fixed 38px, and
   Safari — on an iPhone, but not in Chrome — sizes the control from that rather
   than from the field's min-height, so 24px of padding left the chosen option
   14px of room and cut it in half. The height every other browser already used. */
select.text-field {
  height: 3.3em;
}

/* The same picker's right padding, at every width. Since ticket 34 it offers
   the clinic's own names, up to 40 characters. webflow.css keeps 3em clear at
   the right of every .text-field, room for the inputs' "Required" tag, and the
   closed select cut a page's own name on that page's form: "Speech and
   Language Assessment" at 390px and on tablets, where the Assessment pages set
   the form in two columns, and "Motor Development and Posture Assessment" on
   desktops from 1280px. A select needs room only for its arrow, which Chrome
   draws in its last 11px wherever the padding ends; at 0.5em the text stops
   10px or more short of it. The rule moves no box, so at 1200px and up it
   changes only how much of a long name shows. Safari ignores a select's
   padding and cuts by its own rule. Ticket 34 lists what is still cut, and
   where; the open list shows every name whole. */
select.text-field {
  padding-right: 0.5em;
}

/* A bare URL typed into an Article (goodhousekeeping.com/health/a41284506/…) is
   one unbreakable word; at 480px it ran 30px past the column and was cut off. */
.w-richtext a {
  overflow-wrap: anywhere;
}

/* The Functional Needs Assessment's photograph in its panel on /services
   (ticket 42, ADR-0015): which part of it each layout keeps. Not a defect of
   the live site, which has no such panel. It is in this file because it is a
   rule per width.

   The panel is Webflow's `.service-3` card. Its photograph is `object-fit:
   cover` at 50% 50%, in a box whose shape follows the layout, under a glass
   box of text that covers a different part of it in each of Webflow's bands:

     992px and up   the box is 2.6 to 3.2 times as wide as it is tall, and the
                    glass covers its left 41% to 50%
     768 to 991px   1.6 to 2.3 times as wide; the glass covers the left 62%
     480 to 767px   the picture is 120% of the card's height; the left 73%
     479px and down the box is twice as tall as it is wide, and only the
                    card's top 165px is clear

   The neighbours' photographs take what the centre gives them: at 390px two of
   the three show no person at all. This file (2688 × 1403, 1.92 times as wide
   as it is tall) is cut for the band instead. The two faces are side by side
   in its top third, right of its middle, so the wide layouts cut it top and
   bottom, the narrow ones left and right, and these rules say from where:

   - 992px and up: `0%` down keeps the top of the picture, so both heads and
     their hands are right of the glass.
   - 768 to 770px: `0%` across keeps its left edge, which brings both faces
     out from behind the glass. That holds only while the card's small
     uppercase line takes three lines and the card is 422px tall. From 771px
     the line takes two, the card is 406px tall, and the edge of the glass
     would cut through the daughter's face.
   - 771 to 991px: `100%` across. The clear strip is too narrow for two faces
     side by side, and the photograph has nothing more to its left. The father
     is whole in the strip and his daughter is behind the glass.
   - 600 to 767px: `43%`, and 480 to 599px: `62%`. The strip is narrower
     still, one face wide, and its place in the picture moves with the width.
     Each keeps the father's face in it.
   - 479px and down: `69%` centres both faces, eyes to toothbrushes, in the
     clear top of the card, from 360px to 479px wide.

   The selector names the file, so the rule goes where the photograph goes;
   lib/everyday-life-menu.test.js fails if the two names part. Its four
   classes and attributes outrank webflow.css's own `50% 20%` at 1920px. */
.service-3-item .cover-image.is-parallax[src$="/abc-everyday-brushing-teeth.jpg"] {
  object-position: 0% 0%;
}
@media screen and (min-width: 771px) and (max-width: 991px) {
  .service-3-item .cover-image.is-parallax[src$="/abc-everyday-brushing-teeth.jpg"] {
    object-position: 100% 0%;
  }
}
@media screen and (max-width: 767px) {
  .service-3-item .cover-image.is-parallax[src$="/abc-everyday-brushing-teeth.jpg"] {
    object-position: 43% 0%;
  }
}
@media screen and (max-width: 599px) {
  .service-3-item .cover-image.is-parallax[src$="/abc-everyday-brushing-teeth.jpg"] {
    object-position: 62% 0%;
  }
}
@media screen and (max-width: 479px) {
  .service-3-item .cover-image.is-parallax[src$="/abc-everyday-brushing-teeth.jpg"] {
    object-position: 69% 0%;
  }
}


/* ===========================================================================
   Desktop-width touch screens and small laptops: 992px to 1199px
   =========================================================================== */

/* The header. Eight links, a search button and a call to action share one row,
   the type is scaled to the window (.833vw), and each link hides what does not
   fit. Below 1200px the labels are cut — "ERVICES", "OUNSELLING", "EFERRALS" at
   1024px, an iPad on its side — in 8.5px type. Show the MENU button the site
   already uses below 992px instead; its full-screen menu works at these widths. */
@media screen and (min-width: 992px) and (max-width: 1199px) {
  .nav-links {
    display: none;
  }
  .fullscreen-menu-button {
    display: flex;
    flex: none;
    width: auto;
    padding-left: 2em;
    padding-right: 2em;
    grid-column-gap: 1.5em;
  }
  .nav-main-links .fs-menu-text {
    font-size: 12px;
  }
}


/* ===========================================================================
   Every touch-screen width: 1199px and down
   =========================================================================== */

/* Form fields in type under 16px make Safari zoom the page in when a field is
   tapped, and leave it zoomed: 15px on phones, 14.5px on an iPad held sideways.
   Enquiry forms on Contact, Questions, Testimonials and all seven Assessments. */
@media screen and (max-width: 1199px) {
  .text-field {
    font-size: max(16px, 1.7em); /* 1.7em is Webflow's own size; this only raises it */
  }
}


/* ===========================================================================
   Tablets and large phones: 991px and down
   =========================================================================== */

@media screen and (max-width: 991px) {
  /* The MENU label is sized .833vw of the window: 7px on an iPad held upright. */
  .nav-main-links .fs-menu-text {
    font-size: 12px;
  }

  /* Careers posting: the job-details card is 30% of the column, 204px at 768px,
     and "Administrative" and "indeterminate," ran out of it. Below the text
     instead, as it already is below 480px. */
  .content-7 {
    flex-wrap: wrap;
  }
  .div-block-64,
  .div-block-65 {
    width: 100%;
  }

  /* "Meet Our Expert Providers" (all seven Assessments and Counselling): each
     card is 60vw wide in an 18rem column, so from 768px to 991px every card lay
     half over the next and their credentials printed on top of each other. The
     card fills its column, as it already does below 768px. */
  .slider-snap-list .scroll-card {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  /* Counselling, "Who We Support": five cards side by side until 480px, each
     120px wide at 768px, so every title and sentence was cut — "Childre",
     "Adoles", "Parent & Familie". Two to a row, the fifth across the full width. */
  .support-section-list {
    flex-wrap: wrap;
  }
  .support-section-list > .service-2-block {
    width: calc(50% - 8px);
  }
  .support-section-list > .service-2-block:last-child:nth-child(odd) {
    width: 100%;
  }
  /* Webflow's clearfix pseudo-elements on .w-container become flex items once
     the row wraps, and pushed the first card onto a row of its own. */
  .support-section-list::before,
  .support-section-list::after {
    content: none;
  }
}

/* Footer, 768px to 991px: the four columns plus 66px of padding a side need
   more room than the window has, and the last column — phone, email, address —
   was cut off. Logo and blurb across the top, three columns under it. */
@media screen and (min-width: 768px) and (max-width: 991px) {
  .footer-5 {
    flex: 1;
    padding-left: 4vw;
    padding-right: 4vw;
  }
  .footer-grid-02 {
    grid-template-columns: 1fr 1fr 1.3fr;
  }
  /* The first column is placed by a generated id selector; !important is the
     alternative to repeating that id here, which a re-port would break. */
  .footer-grid-02 > .footer-column:first-child {
    grid-column: 1 / -1 !important;
  }
}


/* ===========================================================================
   Phones: 767px and down
   =========================================================================== */

@media screen and (max-width: 767px) {
  /* Justified text in a column this narrow opens rivers of white space between
     words. Home and About Us numbered sections, the About Us intro, the footer. */
  .para-blue,
  .paragraph.is-large.not-align,
  .heading.is-content-9-title.xssmallparag,
  .paragraph-10,
  .paragraph-27 {
    text-align: left;
  }

  /* Enquiry forms (Contact, Questions, Testimonials, all seven Assessments):
     name and surname, email and phone sat two to a row, 120px each at 375px, so
     a typed email showed as "example@e". One to a row. */
  .div-block-7,
  .div-block-8 {
    flex-direction: column;
  }
  /* Assessment pages, "Book your assessment": photograph and form side by side
     down to 480px, the form 240px wide and its Turnstile check cut off. */
  .inquiry-inner {
    flex-flow: column;
  }
  .div-block-73 {
    width: 100%;
  }

  /* Assessment pages, "Other Assessments": the one-column grid still sized its
     column to the card's widest content, 491px in a 480px window. */
  .services-4-list {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Contact: the three detail cards and the email/booking panel sat side by side
     down to 480px, 601px wide in a 480px window and cut off at both edges. */
  .div-block-9 {
    flex-flow: column;
  }

  /* Provider pages, "Background" and "Specialty": two columns 50% apart, so on a
     phone the specialty column started beyond the right edge. */
  .div-block-51 {
    flex-wrap: wrap;
    grid-column-gap: 2em;
    grid-row-gap: 1.5em;
  }
  /* Provider pages, related Assessment: the checklist carries a -50px right
     margin, which on a phone pushes every line 50px past the edge. */
  .custom-list {
    margin-right: 0;
  }

  /* Careers posting, the job details: label and value share a row half and half,
     so "hr@allbrainsclinic.com" — one word — was cut off in its half. Label above
     value, each the card's full width. */
  .flex-block-5,
  .flex-block-5-last-child {
    flex-direction: column;
    align-items: flex-start;
    grid-row-gap: 2px;
    padding-top: 8px;
    padding-bottom: 8px;
  }
  .text-block-16,
  .text-block-17 {
    width: 100%;
  }

  /* Counselling cards: one to a row on phones, as Webflow already has below
     480px. (The two-to-a-row rule above stops at 768px.) */
  .support-section-list > .service-2-block,
  .support-section-list > .service-2-block:last-child:nth-child(odd) {
    width: 100%;
  }
}

/* Home, "What Makes Us Different?": below 768px the three panels stack, each a
   fixed 100vh (90vh below 480px) tall. On a phone held sideways that is 375px
   for 730px of photograph and text, and the three panels' text printed over one
   another. At least a screen tall, as before, but never shorter than the content. */
@media screen and (max-width: 767px) {
  .slider-wrapper > .panel {
    height: auto;
    min-height: 100vh;
  }
  /* The middle panel ("Full Psychiatry Assessment") has none of its siblings'
     column layout, so its photograph shrank to a 70px sliver beside the text.
     Laid out like the other two, and only as tall as it needs to be — it was
     never a full screen. */
  .slider-wrapper > .panel:not(.is-red):not(.is-gray) {
    flex-flow: column;
    grid-row-gap: 24px;
    min-height: 0;
    padding: 48px 6%;
  }
}
@media screen and (max-width: 479px) {
  .slider-wrapper > .panel.is-red,
  .slider-wrapper > .panel.is-gray {
    min-height: 90vh;
  }
}

/* Footer, 480px to 767px: three columns in about 440px, and the contact column
   alone needs 220px. Two columns, with the blurb and the contact details each
   across the full width. (Below 480px Webflow already stacks it.) */
@media screen and (min-width: 480px) and (max-width: 767px) {
  /* flex: 1 because .footer-5 is a flex item sized to its content; once the
     content fits, it stopped short and left the dark .footer-1 showing. */
  .footer-5 {
    flex: 1;
    padding-left: 4vw;
    padding-right: 4vw;
  }
  .footer-grid-02 {
    grid-template-columns: 1fr 1fr;
  }
  .footer-grid-02 > .footer-column:first-child,
  .footer-grid-02 > .footer-column.lastfootercol {
    grid-column: 1 / -1 !important;
  }

  /* The booking form, once it sits under the photograph, runs to both edges of
     the window; below 480px Webflow gives this container 8vw a side. */
  .container-37 {
    padding-left: 6vw;
    padding-right: 6vw;
  }
}


/* ===========================================================================
   Small phones: 479px and down
   =========================================================================== */

@media screen and (max-width: 479px) {
  /* Search. Below 480px Webflow hides the whole button group, so on most phones
     the site had no search at all — not in the header, not in the menu. The
     booking button in that group stays hidden; the menu carries it. */
  .nav-buttons {
    display: flex;
  }
  .nav-search-button {
    width: auto;
    padding-left: 10px;
    padding-right: 10px;
  }
  /* The clinic-details dropdown in the same group stays hidden too: its address,
     phone and email are already in the menu, and the logo needs the room.
     Since 2026-10-03 no built page carries this dropdown (it was the older
     about-us header's); kept for a re-port — ADR-0004, "Re-porting /about-us". */
  .nav-buttons .dropdown-link-icon {
    display: none;
  }
  /* Home pins its logo at 180px, which with the search button beside it runs
     10px off a 320px screen. Let it give way on the narrowest phones. */
  .nav-main-links .nav-brand.w--current {
    width: auto;
    flex: 0 1 180px;
    min-width: 0;
  }

  /* Home, the providers tabs: four tabs in one scrolling row, and "Therapy Team"
     sat half off the screen. Two rows of two. (The Resources tabs, which fit,
     share the classes and are left alone.) */
  .container-providers:not(.resources-tabs) .tabs-2-links {
    flex-wrap: wrap;
  }
  .container-providers:not(.resources-tabs) .tab-2-link {
    flex: 1 1 calc(50% - 4px);
  }

  /* About Us, "Our Story / Our Team / Our Care": one scrolling row at 7vw type,
     so "Our Care" was cut in half. Let it wrap. */
  .content-9-menu:not(.book-sidebar) {
    flex-wrap: wrap;
    grid-row-gap: .25em;
  }

  /* Article pages, the author box: photograph beside the biography left the
     biography a column three words wide. Photograph above it. */
  .section-18 {
    flex-direction: column;
    grid-row-gap: 12px;
  }

  /* Psychoeducational Assessment: "Psychoeducational" set at 40px is wider than a
     320px phone and was cut off. 10.5vw is 40px at 381px, so the heading keeps
     its size on every phone that fits it and shrinks only on those that don't. */
  .assessment-title-2 {
    font-size: clamp(1.75rem, 10.5vw, 2.5rem);
  }
}

/* The Turnstile check is a fixed 300px. Below 360px the Assessment booking form
   is narrower than that once Webflow's 8vw padding is taken off, and the check
   was cut off. */
@media screen and (max-width: 359px) {
  .container-37 {
    padding-left: 10px;
    padding-right: 10px;
  }

  /* Volunteers: "Neurodevelopmental" in the page heading is wider than a 320px
     screen at the heading's 3em. */
  .rich-text-4 h2 {
    font-size: 2.6em;
  }
}


/* ===========================================================================
   2026-10-04: the pre-migration audit (§4.1), every width
   =========================================================================== */

/* In-page anchors landed under the fixed header and the funding belt: the
   ported pages never load site.css, which gives the hand-authored pages their
   scroll-padding-top, so /contact/#form (the target of every BOOK APPOINTMENT
   button), /assessments/#explore, /about-us/#explore, /blog/#explore,
   /counselling-psychotherapy/#therapists, /providers/#sec-N and the article
   pages' #article all opened with the target's top at 0, behind 105px of nav
   and belt at 375 and 107px at 1440. Two things scroll to an anchor here:

     - the browser, on a page opened with a fragment: this scroll-padding is
       what it keeps clear at the top;
     - Webflow's runtime, on a click on a same-page link: it animates to the
       target's offset minus the height of the first fixed `header`, `body >
       .header` or `body > .w-nav` it finds. The ported nav is inside
       .page-wrapper, so it found nothing and subtracted 0. lib/anchor-offset.js
       gives it the element below to find, sized to the same calc, so a click
       and a fragment land the same way.

   `--r-nav-h` is the nav's measured height, published on <html> by
   src/js/funding-belt.js and src/js/home.js (69px at 375, 67px at 1440,
   101px on the Assessment pages at 1440); 69px is the fallback for a page
   whose script has not run. 40px is the belt's height (36px below 761px),
   kept whether or not a page carries a belt: a page without one lands its
   anchor 40px lower than it must, never higher. 1rem is breathing room. */
html {
  scroll-padding-top: calc(var(--r-nav-h, 69px) + 40px + 1rem);
}
.r-anchor-offset {
  position: fixed;
  top: 0;
  left: 0;
  width: 1px;
  height: calc(var(--r-nav-h, 69px) + 40px + 1rem);
  margin: 0;
  padding: 0;
  border: 0;
  visibility: hidden;
  pointer-events: none;
}


/* ===========================================================================
   2026-10-04: the pre-migration audit (§4.1), touch-screen widths
   =========================================================================== */

@media screen and (max-width: 1199px) {
  /* The search field in the header's panel is 1.5em: 12.8px at 1024, where it
     made an iPad zoom the page, as the enquiry fields did before the rule
     above. Same floor, same reason. */
  .search-input {
    font-size: max(16px, 1.5em);
  }

  /* The header's search button: a 39×17 box around a 17px magnifier at 375,
     because it stretches to the height of the (hidden) buttons beside it, so
     most taps near the icon did nothing. 44×44, the icon where it was. */
  .nav-search-button {
    min-width: 44px;
    min-height: 44px;
  }

  /* The full-screen menu. Its small links (the Services, Resources and
     company lists: 25 of the menu's 35 links) are 27px tall at 375, .2em of
     padding around a 20px line; 12px each side makes them 44px, with the gap
     between them the same. The social circles were 35×35, the booking button
     127×38. */
  .fs-small-link {
    padding-top: 12px;
    padding-bottom: 12px;
  }
  .fs-social-link {
    min-width: 44px;
    min-height: 44px;
  }
  /* Its large links are 39px at 375 (8vw type on a 1.3em line); 3px a side
     makes 45. Its "Book Appointment" (`.fs-cta-link`) was 127×38: .8em of
     padding around 12.3px type inside `.fs-ctas`, which is .8em below 480px. */
  .fs-large-link {
    padding-top: 3px;
    padding-bottom: 3px;
  }
  .fs-cta-link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  /* While the menu is open, src/js/header-menu.js sets `overflow: hidden` on
     the document, which iOS Safari does not honour for touch scrolling. The
     menu's own scrolling boxes (`.fs-layout` below 768px, `.fs-main-links`
     above it) keep their scroll to themselves, so a swipe past their end does
     not move the page behind the menu. */
  .fullscreen-menu,
  .fs-layout,
  .fs-main-links {
    overscroll-behavior: contain;
  }
}

@media screen and (max-width: 767px) {
  /* Buttons. `.button` and `.button-16` are 11px pills whose label
     (`.button-text`) is 1.2em of a .8em button below 480px: 10.56px, and
     9.5px where a page sets the button smaller (the home and about-us CTAs,
     the FNA and Service pages' bottom CTAs, the funding pills). Uppercase and
     letter-spaced, at that size the longest labels — "START YOUR AUTISM
     ASSESSMENT - SEEN IN WEEKS, NOT YEARS", the services cards' Assessment
     names — were the hardest text on the page to read. 13px is the floor;
     where the label was already larger (the FNA hero, 15.36px) max() keeps
     it. The pill itself is at least 44px tall: it is a flex row that centres
     its label, so only its height changes. 38–40px before; the blog grid's
     READ buttons were 49×20. */
  .button-text {
    font-size: max(13px, 1.2em);
  }
  .button,
  .button-16,
  .r-btn,
  .r-pill,
  .r-pill-out,
  .r-fund-us {
    min-height: 44px;
  }
  .r-pill,
  .r-pill-out {
    font-size: 13px;
  }
  .r-fund.is-compact .r-pill,
  .r-fund.is-compact .r-pill-out {
    font-size: 13px;
  }

  /* The home page's eight-areas chips: 31px tall, 12.5px type. */
  .r-mapchip {
    min-height: 44px;
  }

  /* Footer links: 33px tall. Their line is 13.2px (body's 1.2em, inherited as
     a length) under 16.5px type, plus 10px of padding a side. 15.5px a side
     makes 44. */
  .footer-link-dark,
  .footer-link-dark-2 {
    min-width: 44px;
    padding-top: 15.5px;
    padding-bottom: 15.5px;
  }
  /* The footer's social icons: 28×35 boxes once `.social-flex` zeroed their
     padding. */
  .social-link-full {
    min-width: 44px;
    min-height: 44px;
    justify-content: center;
  }

  /* Card titles that are links: 29px (`.service-2-title-link`, home and
     counselling), 33px (`.service-3-title-link`, `.service-4-title-link`,
     `.news-2-title-link`); the therapist names in the counselling carousel,
     34px. */
  .service-2-title-link,
  .service-3-title-link,
  .service-4-title-link,
  .news-2-title-link {
    padding-top: 8px;
    padding-bottom: 8px;
  }
  .scroll-card .text-wrapper > a {
    padding-top: 6px;
    padding-bottom: 6px;
  }

  /* The home page's Blog / News tabs: 142×35, 1em of padding around a 13.2px
     line. 15.5px a side makes 44. */
  .tabs-nav-item {
    padding-top: 15.5px;
    padding-bottom: 15.5px;
  }

  /* The blog's pagination: 35px. */
  .w-pagination-next,
  .w-pagination-previous {
    padding-top: 13px;
    padding-bottom: 13px;
  }
}


/* ===========================================================================
   2026-10-04: the pre-migration audit (§4.2), page by page
   =========================================================================== */

/* Home, "What Makes Us Different?", 768px to 991px. In this band webflow.css
   stacks the three panels full-width, and the first and third carry 6% of
   padding a side of their own (`.panel.is-red`, `.panel.is-gray`: 46px at
   768). The middle one, "Full Psychiatry Assessment", is a bare `.panel`
   with none, so its heading and paragraph ran from the window's left edge to
   its right: text 0→768 at 768 wide, the neighbours' 46→722. Below 768px the
   phone rule above already gives it `48px 6%`; this is the band between, and
   it takes the neighbours' 6% and nothing else. From 992px the panels sit in
   a row inside the horizontal scroll, where the middle panel has no padding
   either and its text block runs past the panel's edge (1623 against 1587 at
   992 wide): a desktop defect the audit did not list, left as found. */
@media screen and (min-width: 768px) and (max-width: 991px) {
  .slider-wrapper > .panel:not(.is-red):not(.is-gray) {
    padding: 48px 6%; /* 2026-10-04 review: the phone rule's vertical padding too, not only the gutters */
  }
}

/* Service pages, "Other Services" (all eleven /service/<slug>/), 992px to
   1199px. The section is `.section.with-bg-color-13.xsptpb > .padding` with
   no `.container` between the two, and `.container` is what gives every
   other section its gutter (6em a side: 66px at 1024). `.max-width-80` is
   `width: 100vw`, so the h4 "Innovative Services for Enhanced Mental Health
   and Well-being" ran edge to edge: one 37.5px line from x=2 to x=1022 at
   1024 (36.4px at 992, 43.9px at 1199), no gutter at all. The container's
   own padding, on the wrapper the container would have wrapped; the service
   list under the heading sits inside the same gutters, as it would in a
   container. Measured after at 1024, the heading is two lines inside 66px
   a side. Below 992px the heading is narrower than the window (text 73→407
   at 480, 40→728 at 768, 51→940 at 991) and nothing changes. From 1200px
   it runs 3→1197 to 3→1437 the same way, on the desktop pages the clinic
   signed off (ADR-0012); that is left as it is, and this rule is one line
   should the clinic ask. */
@media screen and (min-width: 992px) and (max-width: 1199px) {
  .section.with-bg-color-13.xsptpb > .padding {
    padding-left: 6em;
    padding-right: 6em;
  }
}

/* Assessment pages, "Other Assessments", 767px and down. Each card is a tall
   portrait box (365×536 at 375 wide) under a landscape banner (1440×572 and
   1440×503), so `object-fit: cover` scales the picture to the box's height
   and keeps a slice about a quarter of it wide. Webflow's `50% 50%` keeps the
   middle quarter, and on two of the three banners the person is not in it:
   the woman in adhd-assessment-bc.jpg sits at about 65% across, so the card
   showed the plant beside her; the boy in AutismAssessment.webp at about
   80%, so his card showed the toys on the chest. PsychoeducationalAssessment
   .webp has its subject at 47% and keeps the default. Each rule names its
   file, as the Functional Needs Assessment rule above does: these are CMS
   pictures (`coverListImage` on the Assessment Item, editable in the panel),
   so a replaced picture matches no rule and gets Webflow's centre again.
   Which candidate the browser fetches for these boxes is the data file's
   business: src/assessment/assessment.11tydata.js, `SIZES.related`, same
   date. */
@media screen and (max-width: 767px) {
  .service-4-item .cover-image.is-parallax[src$="/adhd-assessment-bc.jpg"] {
    object-position: 68% 50%;
  }
  .service-4-item .cover-image.is-parallax[src$="/AutismAssessment.webp"] {
    object-position: 80% 50%;
  }
}