/* =======================================================================
   goodcbt.com - layout corrections that survive a Nicepage republish.

   Loaded by the plg_system_goodcbtfixes plugin, which emits this file as the
   LAST style block in the page head. Nicepage never reads or writes either the plugin
   or this file, so nothing here is lost when the site is republished.

   Note on !important: Nicepage writes a 186KB inline style block into every page
   and also duplicates each media query as a .u-lg / .u-md / .u-sm class rule,
   so overrides need both !important and a .u-body prefix to win reliably.

   Every number below was measured in a real browser at the stated width.
   ======================================================================= */


/* -----------------------------------------------------------------------
   1. The menu must never sit on top of the logo.  (992-1199px, iPad landscape)

   Nicepage centres an 891px menu inside a 928px sheet, which put the first
   menu link 104px INSIDE the logo - the overlap reported on the iPad. Anchoring
   the menu clear of the logo and trimming the link padding lets all ten items
   still fit on one row. Also brings the header band back from 101px to 75px.
   Measured at 1024 and 1100: logo/menu gap -104px -> +23px.
   ----------------------------------------------------------------------- */
@media (max-width: 1199px) and (min-width: 992px) {
  .u-body .u-header .u-menu-1 {
    margin-left: 178px !important;
    margin-right: 0 !important;
    margin-bottom: 16px !important;
    width: auto !important;
  }
  .u-body .u-header .u-nav-link-2 {
    padding-left: 9px !important;
    padding-right: 9px !important;
  }
}


/* -----------------------------------------------------------------------
   2. Hero: keep the accreditation line off the triangle artwork.

   MEASUREMENT NOTE. An earlier check here was WRONG: it walked in from each
   edge while pixels looked "coloured" and stopped at the first pale one, but
   the artwork CONTAINS white and pale triangles, so it stopped inside the
   artwork and reported clearance that did not exist. The correct method (see
   tools/clearband.py) hides the text, screenshots the artwork alone, and takes
   the run of background pixels through the centre of each row.

   WHY A SINGLE WIDTH, NOT ONE PER BREAKPOINT.
   The artwork is scaled with "cover", so the hero's HEIGHT decides where the
   triangles land horizontally - and the hero's height depends on how many
   lines this very line takes. The client's iPad rendered it on ONE line where
   the same width here wrapped to TWO: different font metrics, different hero
   height, artwork in a different place, and the overlap he could see was real
   while my check said it was fine.

   520px is comfortably below the ~700px a single line needs at this size, so
   it wraps to two lines on ANY device. The height is then deterministic and
   the artwork cannot move between his screen and mine.
   Measured clearance with the correct method: 44-142px from 768 to 1366.

   The 160px of extra hero depth lets the "cover" artwork scale down and pulls
   the bottom-left cluster away from the text. It reads as more artwork rather
   than white space, because the section IS the image.
   Not applied below 576px: there the extra depth rescales the artwork so that
   it crosses the centre, which makes things worse. Phones have no artwork
   behind that line anyway - there the only problem was text size.
   ----------------------------------------------------------------------- */
/* 🛑 SCOPED TO THE HOMEPAGE HERO ONLY (#sec-edee).
   This was written as ".u-section-2 .u-sheet", which is section 2 of EVERY
   page - so it put 160px of dead space at the top of all 17 pages, not just
   the homepage. That is the "unnecessary space" the client then reported.
   Only the homepage hero has the artwork this padding exists to move. */
@media (min-width: 576px) {
  .u-body #sec-edee .u-sheet {
    padding-bottom: 160px !important;
  }
  .u-body .u-text-accredline {
    max-width: 520px !important;
  }
}

/* Client: "a couple of font sizes up ... maybe match this with the font for the
   Chevron section? Again not bold." The chevron line tops out at 1.2rem/400, so
   this line is set to the same. It was 1.05rem at iPad-landscape widths, which
   is why it looked undersized there. */
@media (min-width: 576px) {
  .u-body .u-text-accredline {
    font-size: 1.2rem !important;
    font-weight: 400 !important;
  }
}

@media (max-width: 991px) and (min-width: 576px) {
  .u-body .u-text-accredline { font-size: 1.2rem !important; }
  /* NOTE: the heading also clips the artwork at some widths, and did so long
     before any of this work. Deliberately NOT capped - capping it changes its
     line count, which changes the hero height, which moves the artwork and
     re-breaks the line below. */
}

/* On phones there is no artwork behind the text; the only problem was that at
   0.85rem the line was noticeably smaller than everything around it. */
@media (max-width: 575px) {
  .u-body .u-text-accredline {
    font-size: 1.05rem !important;
    font-weight: 400 !important;
    max-width: 92% !important;
  }
}


/* -----------------------------------------------------------------------
   3. Footer: "Privacy Notice" was breaking across two lines.

   The break was inside the link text itself, not between the two links, so
   stopping those two from wrapping internally puts the row back on one line
   at every width. Checked down to 375px, where the pair needs ~180px of a
   375px viewport.
   ----------------------------------------------------------------------- */
/* The real cause: Nicepage gives that paragraph a fixed 178px width, which is
   narrower than the two links need, so the row always broke somewhere. Letting
   it size to its content - and stopping either link breaking internally - puts
   "Sitemap  Privacy Notice" back on a single line. */
.u-body .u-footer p.u-text-2 {
  width: auto !important;
  max-width: 100% !important;
  white-space: nowrap !important;
}

.u-body .u-footer a[href*="osmap"],
.u-body .u-footer a[href*="id=37"] {
  white-space: nowrap !important;
}


/* -----------------------------------------------------------------------
   4. Header band depth at small-tablet widths (576-767px).
   ----------------------------------------------------------------------- */
@media (max-width: 767px) and (min-width: 576px) {
  .u-body .u-header .u-menu-1 { margin-bottom: 16px !important; }
}


/* -----------------------------------------------------------------------
   5. Sections must hug their content, not be held open by a minimum height.

   Nicepage pins each section's sheet to a fixed min-height taken from
   whatever the content measured when it was designed. Section 3's phone
   value is 2071px; when the content renders even slightly shorter than that
   the sheet stays open and the surplus shows as a block of white - the "big
   gap" above the grey About panel.

   This was fixed before as an inline style in the page, and the client's
   republish undid it. It is CSS, so it belongs here instead, where Nicepage
   cannot reach it and it never needs restoring again.
   ----------------------------------------------------------------------- */
/* Nicepage pins each sheet to a fixed min-height taken from whatever the
   content measured when it was designed. Where the content is now shorter, the
   surplus shows as a block of white. Letting every sheet hug its content
   removes that; it can never make a section shorter than its own content.
   The homepage hero is excluded - it is the one section whose height is
   deliberate, because it carries the triangle artwork. */
/* 🛑 SCOPED BACK. This was written as `section:not(.u-image)`, i.e. every
   section on every page. It did remove dead space - but Nicepage's min-height
   was also what kept text from touching the top and bottom edges of a section,
   and without it the About Us intro ended up flush against the edge of its
   panel (measured 0px above and below). Sections have no padding of their own
   to fall back on.
   Adding padding back instead would re-inflate exactly the gaps the client
   asked to have removed, so the blunt rule goes and only the two homepage
   sections it was originally written for keep it - the "big gap" above the
   grey About Good CBT panel, which he reported and confirmed. */
.u-body #sec-e169 .u-sheet,
.u-body #sec-109e .u-sheet {
  min-height: 0 !important;
}


/* -----------------------------------------------------------------------
   6. Contact page H1 must clear the fixed header.

   The header is position:fixed and floats over the page, and the contact
   page's first sheet has no top padding - so a heading placed at the very top
   of it renders completely underneath the header and cannot be read. Measured
   at 1280/1024/375: heading top 0, header bottom 66/75/70.

   Padding on the heading itself rather than the sheet, so it is scoped to this
   one heading and cannot shift any other page's layout.
   ----------------------------------------------------------------------- */
.u-body .u-text-contacth1 {
  padding-top: clamp(92px, 9vw, 120px) !important;
}


/* -----------------------------------------------------------------------
   7. The logo was being stretched horizontally.

   The artwork is 900x215 - an aspect of 4.19 - and Nicepage puts it in a slot
   of 149x28, an aspect of 5.32, with object-fit:fill. So it was squashed
   vertically / stretched sideways by about 27%. This was corrected once before
   directly in the header, and the client's republish reverted it.

   Heights below are each breakpoint's own slot WIDTH divided by 4.19, so the
   slot matches the artwork exactly. margin-top drops by the same number of
   pixels the box grows, so the header band depth is unchanged.
   object-fit:contain as well, so that even if Nicepage changes a slot size in
   future the logo can never be distorted again - only letterboxed.
   ----------------------------------------------------------------------- */
.u-body .u-header .u-logo-image-1,
.u-body .u-header .u-image-1 img {
  object-fit: contain !important;
}

.u-body .u-header .u-image-1 { height: 47px !important; margin-top: 8px !important; }
@media (max-width: 1399px) {
  .u-body .u-header .u-image-1 { height: 44px !important; margin-top: 5px !important; }
}
@media (max-width: 1199px) {
  .u-body .u-header .u-image-1 { height: 36px !important; margin-top: 14px !important; }
}
@media (max-width: 991px) {
  .u-body .u-header .u-image-1 { height: 36px !important; margin-top: 10px !important; }
}
@media (max-width: 767px) {
  .u-body .u-header .u-image-1 { margin-top: 18px !important; }
}
@media (max-width: 575px) {
  .u-body .u-header .u-image-1 { height: 41px !important; margin-top: 10px !important; }
}


/* -----------------------------------------------------------------------
   8. The two page headings: gap and typeface.

   CONTACT (#sec-e9e7). The paragraph that follows the heading carries
   margin-top:131px - spacing that existed to clear the fixed header back when
   it was the first thing on the page. The heading now provides that, so the
   131px shows as a large hole. The heading was also set bold while every other
   heading on these pages is regular weight, which is what read as "a different
   font" - same family, different weight.

   ABOUT US (#sec-48ad). Same shape of problem, smaller: 65px below the heading
   on a phone.

   Scoped by each page's own section id, so neither rule can affect anywhere
   else on the site.
   ----------------------------------------------------------------------- */
/* Both page headings get the SAME treatment, so the two pages match:
   regular weight (bold was what read as "a different font" - it is the same
   family as everything else, just heavier), one responsive size, and a
   comfortable 40px below the fixed header rather than sitting under it.
   The size sits above the 1.875rem "Confidential Contact Form" sub-heading so
   the page title is the larger of the two, which it was not before. */
/* One treatment for every PAGE TITLE, so the pages match each other. They
   ranged from 30px/400 through 34, 36/700 and 40/400 across the site.
   Only the first section's heading is touched - that is the page title. The
   homepage hero is excluded (it is deliberately large), and so are headings
   further down a page, such as "The ROCD Cycle", which are part of the
   individual page's design rather than its title. */
.u-body section:nth-of-type(1):not(.u-image) h1,
#sec-e9e7 .u-text-contacth1,
#sec-48ad .u-text-1 {
  font-weight: 400 !important;
  font-size: clamp(1.75rem, 3.4vw, 2.125rem) !important;
}

#sec-e9e7 .u-text-contacth1 {
  padding-top: 115px !important;   /* header is up to 75px tall -> ~40px clear */
  margin-bottom: 10px !important;
}

#sec-48ad .u-text-1 {
  margin-top: 0 !important;
  padding-top: 40px !important;    /* this section already has space above it */
}

#sec-e9e7 .u-text-contacth1 + p { margin-top: 16px !important; }
#sec-48ad .u-text-1 + p          { margin-top: 24px !important; }

/* "Confidential Contact Form" is set at 1.875rem inline, which left it LARGER
   than the page title on a phone and on iPad portrait. Brought down so it
   clearly reads as a sub-heading under the H1 rather than competing with it. */
#sec-e9e7 .u-text-1 span[style*="1.875rem"] {
  font-size: clamp(1.25rem, 2.6vw, 1.5rem) !important;
}


/* -----------------------------------------------------------------------
   9. Bullet points become blue ticks.

   24 content lists across 14 pages. The site's own blue is rgb(34,79,170) and
   its light blue is rgb(175,198,245) - both taken from the existing palette
   rather than invented.

   Eight of those lists sit on dark sections with white text, where the dark
   blue would be close to invisible, so those get the light blue instead. The
   dark section classes are listed explicitly; any section not named falls back
   to the dark blue, which is the safe way round on a mostly-light site.

   Navigation is excluded automatically: the menus live in the header element, and this
   only matches lists inside a section element. u-nav is excluded as well, belt and
   braces. The homepage's three-card grid is a div, not a list, so it is
   untouched.
   ----------------------------------------------------------------------- */
/* 3 Nov: lists built with Nicepage's own "custom list" (u-custom-list) draw their
   own tick icon, so they are left alone - otherwise they showed two ticks. */
.u-body section .u-sheet ul:not(.u-nav):not(.u-custom-list) {
  list-style: none !important;
  padding-left: 0 !important;
}

.u-body section .u-sheet ul:not(.u-nav):not(.u-custom-list) > li {
  list-style: none !important;
  position: relative !important;
  padding-left: 1.6em !important;
  margin-bottom: 0.35em !important;
}

.u-body section .u-sheet ul:not(.u-nav):not(.u-custom-list) > li::before {
  /* U+2714 HEAVY check mark rather than U+2713. The client asked for ticks
     "not too large, but more visually apparent" - the heavy glyph is denser,
     so it reads more strongly at a SMALLER size than the light one did. */
  /* U+FE0E is the TEXT presentation selector. Without it iOS renders U+2714 as
     an EMOJI, and an emoji ignores the CSS colour - so on an iPhone and iPad the
     ticks came out dark grey no matter what colour was set, while Chrome showed
     them correctly. That is why they looked wrong on his devices and right on
     mine. With FE0E it is drawn as an ordinary glyph and takes the colour. */
  content: "\2714\FE0E";            /* ✔ forced to text, not emoji */
  position: absolute;
  left: 0;
  top: 0.06em;
  color: rgb(34, 79, 170);
  font-size: 1.1em;
  line-height: 1.25;
  font-weight: 700;
  speak: never;
}

/* Lists on the dark sections - the same tick in the palette's light blue. */
.u-body section.u-palette-1-dark-1 .u-sheet ul:not(.u-nav):not(.u-custom-list) > li::before,
.u-body section.u-palette-1-dark-2 .u-sheet ul:not(.u-nav):not(.u-custom-list) > li::before,
.u-body section.u-palette-1-dark-3 .u-sheet ul:not(.u-nav):not(.u-custom-list) > li::before,
.u-body section.u-palette-5-dark-1 .u-sheet ul:not(.u-nav):not(.u-custom-list) > li::before,
.u-body section.u-palette-5-dark-2 .u-sheet ul:not(.u-nav):not(.u-custom-list) > li::before,
.u-body section.u-grey-70 .u-sheet ul:not(.u-nav):not(.u-custom-list) > li::before,
.u-body section.u-grey-75 .u-sheet ul:not(.u-nav):not(.u-custom-list) > li::before,
.u-body section.u-grey-80 .u-sheet ul:not(.u-nav):not(.u-custom-list) > li::before,
.u-body section.u-black .u-sheet ul:not(.u-nav):not(.u-custom-list) > li::before {
  /* A touch lighter than the palette's rgb(175,198,245): one of these sections
     is mid-grey rather than dark, where that value only reached a contrast of
     56 against its background. This clears 80 on every dark section. */
  color: rgb(205, 222, 255);
}


/* -----------------------------------------------------------------------
   10. Sections whose last paragraph sits against the bottom edge.

   Nicepage sheets carry no padding of their own, so where a section's final
   paragraph has no bottom margin the text finishes hard against the colour
   boundary - on the Harm and Checking page the closing paragraph ended 0px
   above the edge of its panel. Some of this is likely mine: stripping the
   stray blank lines removed spacing those sections were leaning on.

   Listed by section id rather than applied site-wide, deliberately. A blanket
   rule would add this padding to sections that already have 45-60px and
   re-inflate exactly the gaps the client asked to have removed - which is the
   mistake the min-height rule made. These nine were each measured at under
   14px on a phone or an iPad.

   The homepage hero (#sec-edee) is excluded: its 6px is the artwork band
   ending below the accreditation line, which is intended.
   ----------------------------------------------------------------------- */
.u-body #carousel_2c14 .u-sheet,
.u-body #sec-2ff3 .u-sheet,
.u-body #sec-3bd1 .u-sheet,
.u-body #sec-8b2c .u-sheet,
.u-body #sec-9752 .u-sheet,
.u-body #sec-a4d1 .u-sheet,
.u-body #sec-f31c .u-sheet,
.u-body #sec-f568 .u-sheet,
.u-body #sec-f9e0 .u-sheet {
  padding-bottom: 34px !important;
}


/* -----------------------------------------------------------------------
   11. OCD page: the "What is Obsessive Compulsive Disorder?" heading was
   running off the left edge of the page.

   It carries margin-left:-186px with a fixed 612px width, which put its left
   edge at -144px on a 1024 screen and -168px on a phone - off the page at
   every width, so the first words were unreadable. That is an editing
   accident in the page design rather than anything responsive.

   Scoped to that one section so no other heading is affected.
   ----------------------------------------------------------------------- */
.u-body #carousel_ba6c .u-text-1 {
  margin-left: 0 !important;
  margin-right: auto !important;
  width: auto !important;
  max-width: 100% !important;
}

/* -------------------------------------------------------------------------
   THE SITEMAP PAGE (/sitemap)

   This page comes from Joomla's own Cassiopeia template, not from Nicepage,
   because Nicepage only renders the pages it built. Left alone it arrives
   with the template's demo wordmark instead of the practice logo, a public
   LOGIN FORM in the sidebar, and the internal menu names as headings - none
   of which belong on a page linked from the footer.

   Everything here is scoped to body.com_osmap so no other page can be
   affected. It will never be pixel-identical to the Nicepage pages; the aim
   is a clean, plainly branded page rather than a broken-looking one.
   ------------------------------------------------------------------------- */

/* The login form has no business on a public sitemap. */
body.com_osmap .container-sidebar-right { display: none !important; }

body.com_osmap .site-grid { display: block !important; }

body.com_osmap .container-component {
  max-width: 1100px !important;
  margin: 0 auto !important;
  padding: 0 24px 64px !important;
  width: auto !important;
}

/* Header: white band carrying the real logo, linking home. */
body.com_osmap header.container-header {
  background: #ffffff !important;
  border-bottom: 1px solid #e6e8ee !important;
  padding: 14px 0 !important;
}

body.com_osmap header .grid-child {
  max-width: 1100px !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
}

body.com_osmap header img.logo { display: none !important; }

body.com_osmap header a.brand-logo {
  display: inline-block !important;
  width: 190px !important;
  height: 46px !important;
  background: url('/images/nicepage-images/GOODCBT-v3.jpg') no-repeat left center !important;
  background-size: contain !important;
  text-indent: -9999px !important;
  overflow: hidden !important;
}

/* Typography to match the rest of the site. */
body.com_osmap {
  font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  color: #2c2c2c !important;
  background: #ffffff !important;
}

body.com_osmap .container-component h2 {
  font-family: Montserrat, sans-serif !important;
  font-size: 1.5rem !important;
  font-weight: 500 !important;
  color: rgb(34, 79, 170) !important;
  margin: 40px 0 14px !important;
}

body.com_osmap .container-component h2:first-of-type { margin-top: 28px !important; }

body.com_osmap .container-component ul {
  list-style: none !important;
  padding-left: 0 !important;
  margin: 0 !important;
}

body.com_osmap .container-component ul ul {
  padding-left: 22px !important;
  margin-top: 6px !important;
}

body.com_osmap .container-component li { margin: 0 0 9px 0 !important; }

body.com_osmap .container-component li::before {
  content: "\2014";
  color: rgb(34, 79, 170);
  margin-right: 10px;
}

body.com_osmap .container-component a {
  color: #2c2c2c !important;
  text-decoration: none !important;
  font-size: 1.02rem !important;
}

body.com_osmap .container-component a:hover {
  color: rgb(34, 79, 170) !important;
  text-decoration: underline !important;
}

/* -------------------------------------------------------------------------
   SUB-HEADINGS (L2 / L3) - REGULARISED  (requested 30 Sep)

   The page titles were regularised earlier; the sub-headings were not, and they
   had drifted badly: measured across 21 pages they ran 18, 24, 28, 30, 32, 36
   and 48px, in both normal and bold, often changing size within a single page.
   The first sub-heading on the Pure O page sat at 32px while everything below
   it was 24px, which is what the client spotted.

   SCOPE. Only headings written into the body copy are touched. In Nicepage
   those sit as a direct child of the page sheet:
       section > div.u-sheet > h2
   Card and tile headings live inside div.u-container-layout instead - the OCD
   subtype cards, the three columns on the CBT page - so the child selector
   leaves every one of them exactly as it was.

   The first section is NOT excluded: several pages (EMDR, the Unified OCD
   Model) put real body copy in their first section, and excluding it left
   those headings behind at the old sizes. The home page hero heading is empty,
   so including it changes nothing visible.

   Weight is 400 to match the page titles, which are also 400.
   ------------------------------------------------------------------------- */

.u-body section > .u-sheet > h2 {
  font-size: clamp(1.5rem, 2.6vw, 1.75rem) !important;   /* 24px -> 28px */
  font-weight: 400 !important;
  line-height: 1.3 !important;
  margin-top: 26px !important;
  margin-bottom: 12px !important;
}

.u-body section > .u-sheet > h3 {
  font-size: clamp(1.3125rem, 2.2vw, 1.4375rem) !important;  /* 21px -> 23px */
  font-weight: 400 !important;
  line-height: 1.3 !important;
  margin-top: 22px !important;
  margin-bottom: 10px !important;
}

/* A heading with no text in it is a spacer left by the editor; collapse it so
   it cannot add a gap of its own. */
.u-body section > .u-sheet > h2:empty,
.u-body section > .u-sheet > h3:empty {
  margin: 0 !important;
  min-height: 0 !important;
}

/* -------------------------------------------------------------------------
   INTERNATIONAL SERVICES PAGE - hero image and heading gap  (6 Oct)

   Reported on iPhone and iPad: the map was cut off and the heading sat a long
   way down the page.

   The map is 1290 x 1024. Nicepage puts it in a box as a background set to
   "cover", and the box is a different shape at every width - 340 x 351 on a
   phone, 608 x 590 on desktop. Cover fills the box and crops whatever will not
   fit, so roughly 100px was being sliced off each side of the map. Scoped by
   the image's own dimensions, which appear on no other page.
   ------------------------------------------------------------------------- */

.u-body [data-image-width="1290"][data-image-height="1024"] {
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
}

/* Where the two columns stack, give the box the map's own proportions so the
   whole image shows with no empty band above and below it. */
@media (max-width: 767px) {
  .u-body [data-image-width="1290"][data-image-height="1024"] {
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 1290 / 1024 !important;
  }

  /* Stacked, the heading's 85px top margin - which centres it against a tall
     image when the two sit side by side - is just dead space. */
  .u-body [data-image-width="1290"] + div h1 {
    margin-top: 20px !important;
  }

  .u-body [data-image-width="1290"] + div .u-container-layout {
    padding-top: 16px !important;
  }
}

/* On a tablet the hero kept the two columns side by side, which left the text
   in a narrow strip running far longer than the map beside it, with empty space
   under the map.

   The breakpoint is 1365px because that is what the measurements required, not
   a round number: every iPad in LANDSCAPE gives the text column only 439px and
   wraps the heading onto SIX lines -
     iPad 10.2 / Air 10.5 / Air 11 / Pro 11 landscape  = 1080 to 1194px wide
     iPad Pro 12.9 landscape                           = 1366px
   A 1024 breakpoint missed all of them. 1366 is INCLUSIVE so the 12.9in Pro is
   covered too - I do not know which iPad he uses, and the cost of guessing
   wrong is another round of this. Two columns return above 1366px, where the
   text column is wide enough to read.

   Scoped with :has() to the section holding this particular map, so no other
   page's layout can be affected. Browsers without :has() simply keep the
   current behaviour. */
@media (max-width: 1024px) {
  /* The row is a flex row; the cells will not stack until it is told to run
     down the page instead of across. */
  .u-body section:has([data-image-width="1290"][data-image-height="1024"]) .u-layout-row {
    display: block !important;
  }

  .u-body section:has([data-image-width="1290"][data-image-height="1024"]) .u-layout-cell {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
  }

  .u-body section:has([data-image-width="1290"][data-image-height="1024"]) [data-image-width="1290"] {
    aspect-ratio: 1290 / 1024 !important;
    height: auto !important;
    min-height: 0 !important;
  }

  .u-body section:has([data-image-width="1290"][data-image-height="1024"]) h1 {
    margin-top: 20px !important;
  }

  .u-body section:has([data-image-width="1290"][data-image-height="1024"]) .u-container-layout {
    padding-top: 16px !important;
  }
}

/* Stacking alone made the map span the full 940px on a landscape tablet, which
   filled the screen and pushed every word of the text below the fold - wider
   text, but nothing to read without scrolling. On anything wider than a phone
   the map is capped and centred, so the text still gets the full width but the
   picture stays a sensible size. */
@media (min-width: 601px) and (max-width: 1024px) {
  .u-body section:has([data-image-width="1290"][data-image-height="1024"]) .u-layout-cell:first-child {
    max-width: 520px !important;
    /* Nicepage puts min-width:53.3333% on the cell, and a min-width always beats
       a max-width - at 1366px that worked out as 608px and the cap did nothing. */
    min-width: 0 !important;
    flex: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* -------------------------------------------------------------------------
   INTERNATIONAL PAGE - TABLET LANDSCAPE  (6 Oct, third pass)

   The 36/64 split gave the text room but left the map small, with a lot of
   blue space around it. Measured across 1080 / 1180 / 1366 there is no split
   that makes both the picture and the text bigger - inside a fixed row they
   trade off directly.

   The extra room comes from the page's side margins instead. At 1180 the
   content sat in 940px of an 1180px screen, so 240px was margin. Widening to
   95% gives both columns more to work with:
       map   338 x 269  ->  471 x 374
       text  602        ->  650
   and the dead blue space around the map drops from 285px to about 115px.

   Applied to EVERY section on the page, not just this one, so the blocks stay
   aligned with each other - that was the client's original point. Scoped with
   :has() on the body so only this page is affected.
   ------------------------------------------------------------------------- */
@media (min-width: 1025px) and (max-width: 1366px) {
  body:has([data-image-width="1290"][data-image-height="1024"]) section > .u-sheet {
    width: 95% !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .u-body section:has([data-image-width="1290"][data-image-height="1024"]) .u-layout-cell:first-child {
    width: 42% !important;
    min-width: 42% !important;
    max-width: 42% !important;
    flex: 0 0 42% !important;
  }

  .u-body section:has([data-image-width="1290"][data-image-height="1024"]) .u-layout-cell:last-child {
    width: 58% !important;
    min-width: 58% !important;
    max-width: 58% !important;
    flex: 0 0 58% !important;
  }
}

/* -------------------------------------------------------------------------
   LINKS ON THE DARK BLUE SECTIONS

   The email links carry u-text-palette-1-base, which is the same blue as the
   section behind them - so on this page they were invisible, leaving an empty
   gap in the sentence. Lightened so they read against the blue. Buttons are
   untouched: they use the active/hover variants of that class, not this one.
   ------------------------------------------------------------------------- */
.u-body section.u-palette-1-base a.u-text-palette-1-base,
.u-body section.u-palette-1-dark-1 a.u-text-palette-1-base,
.u-body section.u-palette-1-dark-2 a.u-text-palette-1-base {
  color: #bcd4ff !important;
  text-decoration: underline !important;
}

/* The pale blue tick clashed with the mid blue behind it - white reads cleanly. */
.u-body section.u-palette-1-base .u-sheet ul:not(.u-nav):not(.u-custom-list) > li::before {
  color: #ffffff !important;
}

/* The Clinical Training paragraph was bold. Most of it was bold tags in the copy,
   which have been removed, but one paragraph gets font-weight:700 from a
   Nicepage class (u-text-2) rather than from the text itself - so it survived
   and would come back on a republish. Body paragraphs on this page are set to
   normal weight; headings are h1/h2 and are not touched. */
body:has([data-image-width="1290"][data-image-height="1024"]) section > .u-sheet p {
  font-weight: 400 !important;
}

/* =========================================================================
   POCD PAGE - presentation  (26 Oct)

   The page arrived as a single plain white column: three transparent sections,
   no colour, and the POCD cycle diagram shown about 270px wide - far too small
   to read, since it is dense with text. Everything below is scoped with :has()
   to the page that carries POCDCYCLE.jpg, so no other page can be affected.

   The design takes its colours from the diagram itself, so the page and the
   diagram read as one piece:  trigger = black, obsessional thinking = red,
   compulsions = teal, predisposing factors = deep blue.
   ========================================================================= */

body:has(img[src*="POCDCYCLE"]) {
  --pocd-blue:  #224faa;
  --pocd-black: #1f2933;
  --pocd-red:   #b3261e;
  --pocd-teal:  #00566f;
  --pocd-tint:  #f4f7fb;
}

/* Lead paragraph - a little larger, to open the page. */
body:has(img[src*="POCDCYCLE"]) #block-1 > .u-sheet > p.u-text-2:first-of-type {
  font-size: 1.1rem !important;
  line-height: 1.7 !important;
}

/* The key reassurance, set apart. For someone frightened by these thoughts it
   is the single most important sentence on the page. */
body:has(img[src*="POCDCYCLE"]) .pocd-callout {
  background: #eef3fb !important;
  border-left: 5px solid var(--pocd-blue) !important;
  border-radius: 6px !important;
  padding: 18px 22px !important;
  margin: 22px 0 !important;
  font-size: 1.08rem !important;
  line-height: 1.65 !important;
  color: #1d2b3a !important;
}

/* The diagram - large, centred, framed, and clickable to open full size. */
body:has(img[src*="POCDCYCLE"]) .pocd-cycle-link {
  display: block !important;
  cursor: zoom-in;
  max-width: 820px;
  margin: 28px auto 0 !important;
}

body:has(img[src*="POCDCYCLE"]) img[src*="POCDCYCLE"] {
  display: block !important;
  width: 100% !important;
  max-width: 820px !important;
  height: auto !important;
  margin: 0 auto !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 28px rgba(16, 40, 80, 0.16) !important;
  object-fit: contain !important;
}

body:has(img[src*="POCDCYCLE"]) .pocd-cycle-link::after {
  content: "Tap or click the diagram to view it full size";
  display: block;
  text-align: center;
  font-size: 0.9rem;
  color: #5b6b7b;
  margin: 10px 0 30px;
}

/* The three stages of the cycle as cards, each edged in the colour of its own
   box in the diagram. The heading and the paragraph after it are styled as the
   top and bottom of one card. */
body:has(img[src*="POCDCYCLE"]) #block-1 > .u-sheet > h3 {
  /* Nicepage sizes these headings to their text, which left the coloured
     header as a narrow tab sticking up from a full-width card. */
  display: block !important;
  width: auto !important;
  max-width: none !important;
  background: var(--pocd-tint) !important;
  border-top: 5px solid var(--pocd-black) !important;
  border-radius: 10px 10px 0 0 !important;
  padding: 16px 22px 6px !important;
  margin: 22px 0 0 !important;
}

body:has(img[src*="POCDCYCLE"]) #block-1 > .u-sheet > h3 + p {
  display: block !important;
  width: auto !important;
  max-width: none !important;
  background: var(--pocd-tint) !important;
  border-radius: 0 0 10px 10px !important;
  padding: 6px 22px 20px !important;
  margin: 0 !important;
}

/* Colours keyed to each heading's own class, not its position, so the
   Predisposing Factors card added above them (26 Oct) cannot shift them. */
body:has(img[src*="POCDCYCLE"]) #block-1 > .u-sheet > h3.pocd-pre {
  border-top-color: var(--pocd-blue) !important;
}

body:has(img[src*="POCDCYCLE"]) #block-1 > .u-sheet > h3.u-text-9 {
  border-top-color: var(--pocd-red) !important;
}

body:has(img[src*="POCDCYCLE"]) #block-1 > .u-sheet > h3.u-text-11 {
  border-top-color: var(--pocd-teal) !important;
}

/* Section bands, so the page reads in clear stages instead of one long column. */
body:has(img[src*="POCDCYCLE"]) #block-1 { padding-bottom: 40px !important; }

body:has(img[src*="POCDCYCLE"]) #block-2 {
  background: var(--pocd-tint) !important;
  padding: 40px 0 !important;
  border-top: 1px solid #e3e9f1 !important;
  border-bottom: 1px solid #e3e9f1 !important;
}

body:has(img[src*="POCDCYCLE"]) #block-3 { padding: 40px 0 50px !important; }

/* Book Appointment button at the foot of the page. */
body:has(img[src*="POCDCYCLE"]) a.pocd-book {
  display: inline-block !important;
  margin: 26px 0 0 !important;
  padding: 14px 34px !important;
  border-radius: 4px !important;
  color: #ffffff !important;
  letter-spacing: 2px !important;
  font-size: 0.95rem !important;
  text-decoration: none !important;
}

@media (max-width: 575px) {
  body:has(img[src*="POCDCYCLE"]) .pocd-callout { padding: 16px 18px !important; }
  body:has(img[src*="POCDCYCLE"]) #block-1 > .u-sheet > h3,
  body:has(img[src*="POCDCYCLE"]) #block-1 > .u-sheet > h3 + p { padding-left: 18px !important; padding-right: 18px !important; }
}

/* The email and contact-form links carry Nicepage's u-btn-1 class, which pads
   each side by 30px and leaves big gaps mid-sentence. Keep them inline text. */
body:has(img[src*="POCDCYCLE"]) #block-1 p a.u-button-link {
  padding: 0 !important;
  margin: 0 !important;
}

/* =======================================================================
   OCD cycle pages - shared card layout (26 Oct, Contamination OCD first).
   The page markup carries gc-* classes (written by site-restore.php), so
   these rules apply only where those classes exist. Cards are light panels
   with dark text, so they read the same on white and on the dark sections.
   Colours match the boxes in his cycle diagrams.
   ----------------------------------------------------------------------- */
.u-body .gc-cycle-link {
  display: block !important;
  max-width: 820px !important;
  margin: 28px auto 6px !important;
  padding: 0 !important;
  cursor: zoom-in;
  text-decoration: none !important;
}
.u-body .gc-cycle-link img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  box-shadow: 0 8px 28px rgba(16, 40, 80, 0.22) !important;
}
.u-body .gc-cycle-link::after {
  content: "Tap or click the diagram to view it full size";
  display: block;
  text-align: center;
  font-size: 0.85rem;
  margin-top: 10px;
  opacity: 0.8;
}

.u-body .gc-card {
  background: #f4f7fb !important;
  color: #1f2933 !important;
  border-top: 5px solid #1f2933 !important;
  border-radius: 10px !important;
  padding: 16px 22px 8px !important;
  margin: 22px 0 0 !important;
}
.u-body .gc-card.gc-pre  { border-top-color: #224faa !important; }
.u-body .gc-card.gc-obs  { border-top-color: #b3261e !important; }
.u-body .gc-card.gc-comp { border-top-color: #00566f !important; }

.u-body .gc-card .gc-card-title {
  display: block !important;
  width: auto !important;
  margin: 0 0 10px !important;
  font-size: 1.5rem !important;
  font-weight: 400 !important;
  color: #1f2933 !important;
}
.u-body .gc-card p,
.u-body .gc-card li {
  color: #1f2933 !important;
  width: auto !important;
  max-width: none !important;
}
.u-body .gc-card p { margin: 0 0 14px !important; }
.u-body .gc-card ul.gc-list { margin: 0 0 14px !important; width: auto !important; }
/* ticks inside a light card stay dark blue, even on a dark section */
.u-body section .u-sheet .gc-card ul:not(.u-nav):not(.u-custom-list) > li::before { color: rgb(34, 79, 170) !important; }

.u-body .gc-callout {
  background: #eef3fb !important;
  color: #1f2933 !important;
  border-left: 5px solid #224faa !important;
  border-radius: 6px !important;
  padding: 18px 22px !important;
  margin: 26px 0 !important;
  width: auto !important;
  max-width: none !important;
}
.u-body .gc-callout a { padding: 0 !important; margin: 0 !important; color: #224faa !important; }

@media (max-width: 575px) {
  .u-body .gc-card { padding: 14px 18px 6px !important; }
  .u-body .gc-callout { padding: 16px 18px !important; }
}

/* Main OCD page: his generic cycle model (26 Oct) replaced the old landscape
   diagram. It is drawn as a background in a box sized for the old picture, and
   "cover" cropped the top and bottom off the new, taller one. Show it whole and
   let the box take the diagram's own proportions (778 x 856). */
.u-body .u-image[style*="OCDCYCLE-GENERIC"],
.u-body .u-image[style*="ROCDCYCLE"],
.u-body .u-image[style*="PUREOCYCLE"] {
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: 50% 50% !important;
  background-color: #ffffff !important;
  aspect-ratio: 778 / 856;
  min-height: 0 !important;
  height: auto !important;
}
.u-body .u-image[style*="OCDCYCLE-GENERIC"] > .u-container-layout { min-height: 0 !important; }
/* Relationship OCD's cycle diagram (ROCDCYCLE.jpg, 776 x 868) sits in the same
   kind of box and was being cropped the same way - by 356px top and bottom on
   an iPad held upright. Same fix, its own proportions. */
.u-body .u-image[style*="ROCDCYCLE"] { aspect-ratio: 776 / 868; }
.u-body .u-image[style*="ROCDCYCLE"] > .u-container-layout { min-height: 0 !important; }
/* Pure "O" page: his own version of the model (PUREOCYCLE.jpg, 778 x 889). */
.u-body .u-image[style*="PUREOCYCLE"] { aspect-ratio: 778 / 889; }
.u-body .u-image[style*="PUREOCYCLE"] > .u-container-layout { min-height: 0 !important; }

/* Below desktop width the diagram and "The OCD Cycle" panel sat side by side,
   which squeezed the diagram to ~360px on an iPad held upright - too small to
   read. Stack them so the diagram gets the full width. */
@media (max-width: 991px) {
  .u-body .u-layout-row:has(> .u-image[style*="OCDCYCLE-GENERIC"]) > .u-layout-cell,
  .u-body .u-layout-row:has(> .u-image[style*="PUREOCYCLE"]) > .u-layout-cell {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}

/* Main OCD page, the ten OCD-type cards: each card is
   ~190px wide (on desktop too) and "Contamination" does not fit at 24px, so
   the browser broke it mid-word ("Contaminatio / n OCD"). Slightly smaller
   titles, the same on every card, so every word fits at every width. */
body:has(.u-image[style*="OCDCYCLE-GENERIC"]) .u-similar-container h4 {
  font-size: 1.2rem !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}

/* Contamination OCD (26 Oct, his request): the long grey section becomes white
   like the rest of the site. Keyed to the page's own address so no other page
   can pick it up. The dark "What is Contamination OCD?" panel next to the photo
   is left as it is; only the section around it changes. */
html:is(:has(link[rel="canonical"][href$="/ocd/contamination-ocd"]), :has(link[rel="canonical"][href$="/ocd/existential-ocd"])) .u-body section#sec-4650 {
  background-color: #ffffff !important;
  background-image: none !important;
  color: rgb(34, 38, 42) !important;
}
html:is(:has(link[rel="canonical"][href$="/ocd/contamination-ocd"]), :has(link[rel="canonical"][href$="/ocd/existential-ocd"])) .u-body section#sec-4650 :is(h2, h3, h4, p, li, span):not(.u-palette-1-dark-3 *):not(.gc-card *):not(.gc-callout):not(.gc-callout *) {
  color: rgb(34, 38, 42) !important;
}
html:is(:has(link[rel="canonical"][href$="/ocd/contamination-ocd"]), :has(link[rel="canonical"][href$="/ocd/existential-ocd"])) .u-body section#sec-4650 a:not(.u-palette-1-dark-3 *):not(.gc-cycle-link):not(.gc-book) {
  color: #224faa !important;
}
html:is(:has(link[rel="canonical"][href$="/ocd/contamination-ocd"]), :has(link[rel="canonical"][href$="/ocd/existential-ocd"])) .u-body section#sec-4650 span.u-text-palette-3-base:not(.u-palette-1-dark-3 *) {
  color: #224faa !important;
  font-weight: 600;
}
html:is(:has(link[rel="canonical"][href$="/ocd/contamination-ocd"]), :has(link[rel="canonical"][href$="/ocd/existential-ocd"])) .u-body section#sec-4650 .u-sheet ul:not(.u-nav):not(.u-custom-list) > li::before {
  color: rgb(34, 79, 170) !important;
}

/* The dark panel's Book Appointment button sat ON TOP of the last line of the
   paragraph at every width: Nicepage puts the button first and pushes it down by
   a fixed margin, then pulls the heading and text up above it, and the text is
   now longer than that space. Lay the panel out in reading order instead. */
.u-body section#sec-4650 .u-container-layout:has(> a.u-btn-1 + h2.u-text-1 + p.u-text-2) {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}
.u-body section#sec-4650 .u-container-layout:has(> a.u-btn-1 + h2.u-text-1 + p.u-text-2) > h2.u-text-1 { order: 1; margin: 0 auto 0 !important; }
.u-body section#sec-4650 .u-container-layout:has(> a.u-btn-1 + h2.u-text-1 + p.u-text-2) > p.u-text-2  { order: 2; margin: 20px auto 0 !important; height: auto !important; }
.u-body section#sec-4650 .u-container-layout:has(> a.u-btn-1 + h2.u-text-1 + p.u-text-2) > a.u-btn-1   { order: 3; margin: 28px auto 0 !important; align-self: center; }

/* Unified OCD Model page: the new generic model is an ordinary picture there,
   in a box Nicepage sized for the old diagram - let the box follow the image. */
.u-body img.u-image[src*="OCDCYCLE-GENERIC"] { height: auto !important; }

/* 3 Nov: Nicepage "custom list" tick icons sit in the palette's dark blue, which
   all but disappears on a dark or photo-shaded section (William's profile). Use
   the same light blue as every other tick on a dark section. */
.u-body section:is(.u-shading, .u-palette-1-dark-1, .u-palette-1-dark-2, .u-palette-1-dark-3,
  .u-palette-5-dark-1, .u-palette-5-dark-2, .u-grey-70, .u-grey-75, .u-grey-80, .u-black)
  .u-custom-list .u-list-icon {
  color: rgb(205, 222, 255) !important;
  fill: rgb(205, 222, 255) !important;
}

/* =========================================================================
   L2 HEADINGS IN BOXES, PANELS AND RICH-TEXT BLOCKS (5 Nov)

   The 30 Sep rule above only reached headings sitting directly on the page
   sheet. Headings placed inside a layout box (the panel beside a diagram or
   photo), or inside a rich-text block (the Supervision page), were left at
   whatever Nicepage gave them: measured 24, 30 and 32px, regular and bold.
   And a size or weight typed INSIDE a heading (the home page "Online
   Video-based Therapy" carried an inline 2.25rem) overrode the heading
   itself. This brings every one of those to the same H2 standard.

   NOT touched: headings in a repeater grid (the CBT cards - handled below so
   they match each other), and the home page "Experts in CBT..." banner
   (section sec-e169), which is a designed element in its own font. Colours set
   for a dark panel are kept. A heading given a one-off font in Nicepage
   ("Working Together On ROCD" was in Montserrat) takes the site heading font.
   ------------------------------------------------------------------------- */
.u-body section .u-sheet :is(.u-layout-cell, .u-rich-text, .u-group, .u-container-style) h2:not(#sec-e169 *):not(.u-repeater *) {
  font-size: clamp(1.5rem, 2.6vw, 1.75rem) !important;   /* 24px -> 28px, as above */
  font-weight: 400 !important;
  line-height: 1.3 !important;
}
.u-body section .u-sheet :is(.u-layout-cell, .u-rich-text, .u-group, .u-container-style) h3:not(#sec-e169 *):not(.u-repeater *):not(.gc-card-title) {
  font-size: clamp(1.3125rem, 2.2vw, 1.4375rem) !important;  /* 21px -> 23px, as above */
  font-weight: 400 !important;
  line-height: 1.3 !important;
}
.u-body section .u-sheet h2.u-custom-font:not(#sec-e169 *):not(.u-repeater *) { font-family: inherit !important; }
/* Inline sizes / weights / colours typed inside a heading follow the heading. */
.u-body section .u-sheet :is(h2, h3):not(#sec-e169 *):not(.u-repeater *) :is(span, strong, b)[style*="font-size"] { font-size: inherit !important; }
.u-body section .u-sheet :is(h2, h3):not(#sec-e169 *):not(.u-repeater *) :is(span, strong, b) { font-weight: inherit !important; }
.u-body section .u-sheet .u-rich-text :is(h2, h3) span[class*="u-text-palette"] { color: inherit !important; }

/* The ten cards on the CBT page: five headings were bold and five regular,
   at random. One weight for all of them. */
.u-body .u-repeater h2,
.u-body .u-repeater h2 :is(span, strong, b) {
  font-weight: 400 !important;
}

/* Card titles on the OCD cycle pages follow the H3 standard too. */
.u-body .gc-card .gc-card-title { font-size: clamp(1.3125rem, 2.2vw, 1.4375rem) !important; }
/* Same breathing space above a heading in a rich-text block as anywhere else. */
.u-body section .u-sheet .u-rich-text :is(h2, h3) { margin-top: 26px !important; margin-bottom: 10px !important; }

/* Level-4 sub-heading in body copy (first used 6 Nov on the Integrated Model page,
   "Inferential Confusion" under "Loaded Triggers and Intrusions"): one step
   below an H3, same regular weight as every other heading. */
.u-body section > .u-sheet > h4.int-h4 {
  font-size: clamp(1.125rem, 1.8vw, 1.25rem) !important;   /* 18px -> 20px */
  font-weight: 400 !important;
  font-style: italic;
  line-height: 1.3 !important;
  margin-top: 20px !important;
  margin-bottom: 8px !important;
}

/* Integrated Model page (6 Nov, his request): the four stages of the model get the
   same colour-coded dividers as the Contamination / POCD cards - blue Background,
   black Triggers, red Obsessional Thinking, teal Compulsions, matching the boxes in
   the diagram. Each stage runs to many paragraphs, so the heading becomes a tinted
   strip with the coloured line on top rather than wrapping the whole stage. */
.u-body section > .u-sheet > h3:is(.int-pre, .int-trig, .int-obs, .int-comp) {
  display: block !important;
  width: auto !important;
  max-width: none !important;
  background: #f4f7fb !important;
  border-top: 5px solid #1f2933 !important;
  border-radius: 10px !important;
  padding: 14px 22px !important;
  margin: 44px 0 16px !important;
}
.u-body section > .u-sheet > h3.int-pre  { border-top-color: #224faa !important; }
.u-body section > .u-sheet > h3.int-obs  { border-top-color: #b3261e !important; }
.u-body section > .u-sheet > h3.int-comp { border-top-color: #00566f !important; }
@media (max-width: 575px) {
  .u-body section > .u-sheet > h3:is(.int-pre, .int-trig, .int-obs, .int-comp) { padding: 12px 18px !important; margin-top: 36px !important; }
}

/* Existential OCD page (8 Nov) - built on the Contamination page's layout.
   Split panel picture: portrait illustration (750 x 830) - let its box take
   the picture's own shape so the thought bubbles are not cropped off. */
.u-body .u-image[style*="EXISTOCD"] {
  background-size: cover !important;
  background-position: 50% 50% !important;
  aspect-ratio: 750 / 830;
  min-height: 0 !important;
  height: auto !important;
}
.u-body .u-image[style*="EXISTOCD"] > .u-container-layout { min-height: 0 !important; }

/* The cycle diagram on a cycle page, framed like the others. */
.u-body img.gc-cycle-img,
.u-body img[src*="EXISTCYCLE"] {
  display: block !important;
  width: 100% !important;
  max-width: 820px !important;
  height: auto !important;
  margin: 28px auto 10px !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  box-shadow: 0 8px 28px rgba(16, 40, 80, 0.16) !important;
}

/* A plain Book Appointment button at the foot of a cycle page. */
.u-body a.gc-book {
  display: inline-block !important;
  margin: 30px 0 50px !important;
  padding: 14px 34px !important;
  border-radius: 4px !important;
  background: #224faa !important;
  color: #ffffff !important;
  letter-spacing: 2px !important;
  font-size: 0.95rem !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
}
.u-body a.gc-book:hover { background: #1a3d86 !important; }

/* Existential OCD: top section white like the POCD page (8 Nov) */
html:has(link[rel="canonical"][href$="/ocd/existential-ocd"]) .u-body section#sec-4dd2 { background: #fff !important; background-image: none !important; color: #22262a !important; }
html:has(link[rel="canonical"][href$="/ocd/existential-ocd"]) .u-body section#sec-4dd2 :is(h1, p) { color: #22262a !important; }
html:has(link[rel="canonical"][href$="/ocd/existential-ocd"]) .u-body section#sec-4dd2 a { color: #224faa !important; font-weight: 400 !important; text-decoration: none !important; }
html:has(link[rel="canonical"][href$="/ocd/existential-ocd"]) .u-body section#sec-4dd2 a:hover { text-decoration: underline !important; }
/* intro callout under a page H1 (Existential OCD), sized like the POCD one */
.u-body .gc-callout.gc-intro { font-size: 1.08rem !important; line-height: 1.65 !important; margin: 22px 0 !important; }