/* ==========================================================================
   SCHOLAR HEALTH — Design tokens & base styles
   Source: scholar-health-style-guide.html (Annie Schultz, updated 8/24/26)
   Target: HubSpot Power Pro child theme (Scholar Health brand)

   Usage: drop into the child theme's CSS (e.g. child.css / theme-overrides.css)
   so custom modules inherit the brand system. Power's own theme settings
   should be set to match — see the mapping notes at the bottom.

   Fonts are all on Google Fonts. Attach via theme settings or require_css:
   https://fonts.googleapis.com/css2?family=Figtree:wght@300;400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500&family=Newsreader:ital,opsz,wght@0,6..72,300..600;1,6..72,300..600&family=Nothing+You+Could+Do&display=swap
   ========================================================================== */

:root {
  /* ---- Color ------------------------------------------------------------ */
  --sh-purple:        #0024ef;  /* primary brand: eyebrows, accents, trust bar */
  --sh-magenta:       #9786f9;  /* gradient partner, rarely flat */
  --sh-teal:          #00E0B7;  /* primary button fill — #333333 type ONLY */
  --sh-mint:          #3AF4D2;  /* panels, icons on dark, quiet accents */
  --sh-lavender:      #F4EDFF;  /* section tint, cards, quiet panels */
  --sh-warm-white:    #FFFBF8;  /* page ground */
  --sh-ink-heading:   #17180F;  /* headings */
  --sh-ink-body:      #23251C;  /* body copy */
  --sh-ink-ui:        #333333;  /* button + link type on light fills — NOT page text */
  --sh-grey-micro:    #5F5C52;  /* lightest grey allowed on warm white (6.6:1) */
  --sh-ink-quiet:     #33352A;  /* third ink step, below body */
  --sh-grey-disabled: #C9C6BB;  /* disabled/placeholder only — fails AA as text */
  --sh-paper-2:       #FBF6F2;  /* alternating section ground */
  --sh-paper-3:       #FBFCFA;  /* coolest paper, panels */
  --sh-error:         #B3261E;  /* errors — always paired with words, never colour alone */
  --sh-white:         #FFFFFF;
  --sh-white-94:      rgba(255, 255, 255, 0.94); /* body copy reversed on ink/purple */
  --sh-gradient:      linear-gradient(135deg, #0024ef, #9786f9); /* ONE surface per page max */

  /* ---- Families ---------------------------------------------------------- */
  --sh-serif: 'Newsreader', Georgia, serif;              /* voice: headings, stats, quotes */
  --sh-sans:  'Figtree', Helvetica, Arial, sans-serif;   /* information: body + UI */
  --sh-mono:  'IBM Plex Mono', ui-monospace, monospace;  /* machinery: eyebrows, labels */
  --sh-hand:  'Nothing You Could Do', cursive;           /* tertiary buttons ONLY */

  /* ---- Fluid type scale --------------------------------------------------- */
  --sh-fs-h1:      clamp(52px, 6.1vw, 100px);  /* hero — once per page */
  --sh-fs-h2:      clamp(36px, 3.4vw, 58px);   /* section head */
  --sh-fs-h3:      clamp(21px, 1.6vw, 26px);   /* step title */
  --sh-fs-stat:    clamp(44px, 4.4vw, 76px);   /* stat figure, tabular-nums */
  --sh-fs-quote:   clamp(19px, 1.65vw, 27px);  /* pull quote — roman, not italic */
  --sh-fs-lead:    clamp(18px, 1.4vw, 23px);
  --sh-fs-body:    clamp(16px, 1.2vw, 19px);
  --sh-fs-caption: clamp(16px, 1.15vw, 17px);
  --sh-fs-micro:   13px;                        /* weight 400, grey #5F5C52 */
}

/* ==========================================================================
   Page ground & body — Figtree 300 everywhere, serif carries the weight
   ========================================================================== */

body {
  /* Follows Colors -> HubSpot -> HTML -> Background color rather than hardcoding
     the cream. This was pinned to --sh-warm-white, which silently overrode the
     theme setting: JP set the page white on 2026-09-01 and only the html element
     changed, because this rule kept repainting body cream on top of it.
     One knob now drives the page ground, and the trust bar and frosted header
     below follow the same variable so they cannot drift apart. */
  background: var(--clr-background-html, var(--sh-warm-white));
  color: var(--sh-ink-body);
  font-family: var(--sh-sans);
  font-weight: 300;
  font-size: var(--sh-fs-body);
  line-height: 1.6;
}

/* ---- Display roles — Newsreader ----------------------------------------- */

h1, .sh-h1 {
  font-family: var(--sh-serif);
  font-optical-sizing: auto;
  font-size: var(--sh-fs-h1);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.02em;
  color: var(--sh-ink-heading);
}

h2, .sh-h2 {
  font-family: var(--sh-serif);
  font-optical-sizing: auto;
  font-size: var(--sh-fs-h2);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -0.018em;
  color: var(--sh-ink-heading);
}

h3, .sh-h3 {
  font-family: var(--sh-serif);
  font-optical-sizing: auto;
  font-size: var(--sh-fs-h3);
  font-weight: 500; /* holds against the Figtree beneath it */
  line-height: 1.2;
  letter-spacing: -0.008em;
  color: var(--sh-ink-heading);
}

.sh-stat {
  font-family: var(--sh-serif);
  font-optical-sizing: auto;
  font-size: var(--sh-fs-stat);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums; /* keeps count-ups from jittering */
  color: var(--sh-ink-heading);
}

.sh-quote {
  font-family: var(--sh-serif);
  font-optical-sizing: auto;
  font-size: var(--sh-fs-quote);
  font-weight: 400;
  font-style: normal; /* testimony, not emphasis */
  line-height: 1.5;
  letter-spacing: 0;
}

/* Accent: short Newsreader italic phrase inside Figtree copy. One per section. */
.sh-accent {
  font-family: var(--sh-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.05em;
}

/* ---- Text & UI roles — Figtree ------------------------------------------- */

.sh-lead    { font-size: var(--sh-fs-lead); font-weight: 300; line-height: 1.55; max-width: 62ch; }
.sh-body    { font-size: var(--sh-fs-body); font-weight: 300; line-height: 1.6; color: var(--sh-ink-body); }
.sh-caption { font-size: var(--sh-fs-caption); font-weight: 300; line-height: 1.45; }
.sh-caption strong, .sh-caption .sh-name { font-weight: 600; }
.sh-micro   { font-size: var(--sh-fs-micro); font-weight: 400; line-height: 1.4; color: var(--sh-grey-micro); }

.sh-nav-link {
  font-family: var(--sh-sans);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none; /* nav items are not links in the underline sense */
}

.sh-wordmark {
  font-family: var(--sh-sans);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.sh-trustbar { font-family: var(--sh-sans); font-size: 15px; font-weight: 600; }

/* ---- Machinery — IBM Plex Mono. One size, one weight, one tracking. ------ */

.sh-eyebrow {
  font-family: var(--sh-mono);
  font-size: 12px;      /* also the minimum — nothing mono goes smaller */
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sh-purple); /* mint on dark grounds */
}

/* ==========================================================================
   Buttons & links
   ========================================================================== */

.sh-btn-primary,
.sh-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  padding: 0 28px;
  border-radius: 999px;
  font-family: var(--sh-sans);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

/* One per view. The consultation ask. */
.sh-btn-primary {
  background: var(--sh-teal);
  color: var(--sh-ink-ui); /* NEVER white on teal (1.7:1) */
  border: none;
}
.sh-btn-primary:hover {
  background: var(--sh-ink-heading); /* hover → ink */
  color: var(--sh-white);
}

.sh-btn-secondary {
  background: transparent;
  border: 1px solid var(--sh-purple);
  color: var(--sh-purple);
}
.sh-btn-secondary:hover {
  background: var(--sh-purple);
  color: var(--sh-white);
}

/* Nav CTA: the one size exception — 14px on a 40px pill.
   44px tap target earned back with margin/padding on the hit area. */
.sh-btn-nav {
  height: 40px;
  padding: 0 20px;
  font-size: 14px;
}

/* Tertiary: the ONLY place handwriting appears. Light grounds only,
   one per screen, never the only way forward. */
.sh-btn-tertiary {
  font-family: var(--sh-hand);
  font-size: 21px; /* ~1.5x the 15px sans beside it — small x-height */
  color: var(--sh-purple);
  -webkit-text-stroke: 0.5px var(--sh-purple); /* bolder sibling of the single weight */
  paint-order: stroke fill; /* outline under the letterform, not eating into it */
  background: none;
  border: none;
  padding: 0;
  text-decoration: none;
  cursor: pointer;
}

/* Links: inherit size + weight; underline and purple do the work. */
.sh-link, .sh-body a, .sh-lead a, p a {
  color: var(--sh-purple);
  font-weight: inherit;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

/* ==========================================================================
   Surfaces & reversed type
   ========================================================================== */

.sh-panel-lavender { background: var(--sh-lavender); }
.sh-surface-gradient { background: var(--sh-gradient); } /* ONE per page max */

/* On ink or purple: body copy at 94% white, headings pure white.
   Short text on colored grounds (trust bar, badges, labels) → Figtree 600. */
.sh-on-dark { color: var(--sh-white-94); }
.sh-on-dark h1, .sh-on-dark h2, .sh-on-dark h3,
.sh-on-dark .sh-h1, .sh-on-dark .sh-h2, .sh-on-dark .sh-h3 { color: var(--sh-white); }
.sh-on-dark .sh-eyebrow { color: var(--sh-mint); }

/* ==========================================================================
   Icons — Phosphor Duotone only. Purple on light, mint on dark.
   ========================================================================== */

.sh-icon       { width: 20px; height: 20px; color: var(--sh-purple); } /* inline with body */
.sh-icon-block { width: 40px; height: 40px; color: var(--sh-purple); } /* step & feature blocks */
.sh-on-dark .sh-icon, .sh-on-dark .sh-icon-block { color: var(--sh-mint); }

/* ==========================================================================
   THE NEVERS (hard stops, WCAG AA minimum — enforce in review)
   - No Figtree 300 below 16px; no weight 200 anywhere. Under 16px → weight 400.
   - No grey lighter than #5F5C52 on warm white; no opacity below 94% on ink/purple.
   - No white type on mint (1.4:1) or teal (1.7:1) — #333333 only.
   - Handwriting only on tertiary buttons; one per screen; never headings/body/labels/errors.
   - Color never the only signal: links keep underlines, errors get words.
   - Tap targets >= 44px; mono >= 12px; all-caps runs <= 4 words.
   - Negative tracking above 34px only; caps/mono get positive tracking.
   - Newsreader italic accents and handwriting never share a block.

   POWER PRO THEME SETTINGS — set these to match (Settings > Themes > Power child):
   - Primary color: #6212E8 (purple)   - Secondary: #BB0DEE (magenta)
   - Button color: #00E0B7 with #333333 text; pill radius (999px), 50px height
   - Page background: #FFFBF8   - Headings font: Newsreader (Google)
   - Body font: Figtree 300 (Google)   - Heading color: #17180F, body #23251C
   ========================================================================== */

/* @import url('http://example.com/example_style.css'); */

/***********************************************/
/* CSS @imports must be at the top of the file */
/* Add them above this section                 */
/***********************************************/

/*****************************************/
/* Start your style declarations here    */
/*****************************************/
/* ==========================================================================
   POWER PARENT REMAP
   POWER Professional is entirely custom-property driven (415 variables), so the
   whole parent theme can be re-pointed at the Scholar Health tokens from here.
   This replaces the "set it in Theme Settings" step: child.css loads after
   template_pwr.min.css, so these win.
   Values below are only ever `var(--sh-*)` — the token layer stays the one
   source of truth, and nothing is hardcoded twice.
   ========================================================================== */

:root {
  /* ---- What is left here, and why --------------------------------------
     The 49 brand values that used to live in this block now live in POWER's
     THEME SETTINGS (entered 2026-08-29), so all 50+ POWER modules inherit the
     brand instead of only the hand-built sections. They were removed from here
     deliberately: child.css loads AFTER POWER's generated variables, so leaving
     them would silently override anything edited in the settings UI — the exact
     trap JP would have hit the first time he changed a colour.

     What remains is only what theme settings cannot express.

     Full mapping of the 49 -> their settings paths:
     https://claude.ai/code/artifact/e9785e19-c059-4ef9-84c3-01f2ae572328 */

  /* Primary CTA gradient — Marlee + Ed's final call, 2026-09-01.
     Both stops carry white text at AA: #6212E8 is 7.58:1, #BB0DEE is 4.77:1
     (checked, since 14px button text needs 4.5:1). */
  --sh-gradient-btn: linear-gradient(90deg, #0024ef, #9786f9);

  /* --tt-nav / --tt-title / --tt-link now come from theme settings
     (Fonts -> Formatting -> Uppercase), unchecked 2026-08-31. Nothing to
     override here any more. */

  /* POWER steps type down at tablet/mobile via separate variables that the
     settings UI does not surface. Pinned to the desktop values so the footer
     does not drift off the Figma spec on smaller screens. */
  --fs-footer-txt-tablet:    16px;
  --fs-footer-txt-mobile:    16px;
  --ls-footer-txt-tablet:    0;
  --ls-footer-txt-mobile:    0;

  --fs-footer-menu-tablet:   16px;
  --fs-footer-menu-mobile:   16px;
  --ls-footer-menu-tablet:   0;
  --ls-footer-menu-mobile:   0;

  --fs-footer-legal-tablet:  12px;
  --fs-footer-legal-mobile:  12px;
  --ls-footer-legal-tablet:  0;
  --ls-footer-legal-mobile:  0;
}

/* Section radii (--br-box / --br-sec / --br-img) are deliberately left at
   POWER's defaults: the style guide specifies a pill for buttons but does not
   define a card radius, and inventing one is not our call. Revisit in Phase C
   against Figma. */


/* ---- header menu line-height ---------------------------------------------
   POWER hardcodes `line-height: 1em` on .hs-menu-wrapper li a, so the 24px
   from the spec cannot come from a variable. */
.pwr-header .hs-menu-wrapper li a { line-height: 24px; }

/* ---- header menu vertical padding ----------------------------------------
   Same class of problem as the line-height above. POWER hardcodes
   `padding: 36px 25px` on the depth-1 menu anchor with no variable behind it,
   and that anchor is the tallest item in the row, so it alone sets the bar
   height: 36 + 24 + 36 = 96px, plus 20px top and bottom on .pwr-header--padding
   = 136px. Theme settings cannot reach either literal.

   16px gives a 56px row and an 80px bar. Do not go below 10px: that is where
   the anchor stops clearing the 44px tap target in THE NEVERS. The floor is
   85px at 20px wrapper padding anyway, from `min-height: 45px` on
   .pwr-header-full and the 43px logo.

   POWER's selector is (0,3,2); the `body` prefix takes these to (0,3,3) and
   (0,1,1) so they win on specificity rather than stylesheet order. */
body .pwr-header__menu .hs-menu-wrapper li.hs-menu-depth-1 > a {
  padding-top: 16px;
  padding-bottom: 16px;
}

body .pwr-header--padding {
  padding-top: 12px;
  padding-bottom: 12px;
}

/* ---- Footer legal separator ----------------------------------------------
   Figma separates the legal line with a bullet:
     "… All Rights Reserved • Privacy Policy • Terms of Use"
   POWER instead draws a 1px x 0.75em background block (pwr-footer.css), for
   both the item boundary (notice | menu) and between the menu's own <li>s.

   The dot is drawn in CSS, NOT as a "\2022" glyph: the Google Fonts subset
   loaded for the footer has no U+2022, so a text bullet renders as tofu.
   The .pwr--dark variants only re-declare background-color, so they have to
   be listed too, otherwise the bar colour comes back. */
.pwr-footer-legal__content .pwr-footer__item:not(:last-child):after,
.pwr-footer-legal__content .pwr-footer__item .hs-menu-wrapper li:not(:last-child):after,
.pwr--dark .pwr-footer-legal__content .pwr-footer__item:not(:last-child):after,
.pwr--dark .pwr-footer-legal__content .pwr-footer__item .hs-menu-wrapper li:not(:last-child):after {
  content: "";
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background-color: currentColor;
  vertical-align: middle;
  margin-right: 8px;
  margin-left: 8px;
}


/* ---- Footer legal: line-height, colour, underlined links ------------------
   POWER exposes no line-height or text-decoration variable for the legal row,
   so these three are genuine overrides rather than variable assignments. */
.pwr-footer-legal,
.pwr-footer-legal__content .pwr-footer__item,
.pwr-footer-legal__content .pwr-footer__item .hs-menu-wrapper a {
  line-height: 16px;
  color: #FFF;
}

.pwr-footer-legal__content .pwr-footer__item .hs-menu-wrapper a {
  text-decoration: underline;
  text-underline-position: from-font;
}


/* ===========================================================================
   FOOTER — built to the decoded Figma frame 'footer'
   ---------------------------------------------------------------------------
   frame    1440 x 300, fill #333333, 80px gutters
   logo     (80,  84)  228 x 24   wordmark + gradient dot
   desc     (80, 124)  Newsreader 400  16px / lh 16px  #FFF
   legal    (80, 204)  Figtree    400  12px / lh 16px  #FFF
   menu     (534, 87)  Figtree    400  16px / normal   #FFF, 40px gap
   social  (1232, 80)  3 x 32px, 48px pitch (16px gap), flush right

   Vertical maths: 84 (top) + 24 (logo) + 16 + 16 (desc) + 64 + 16 (legal)
                   + 80 (bottom) = 300.

   STRUCTURE OF THIS BLOCK
   Part A — colour and type. Safe at every width, so it is unscoped.
   Part B — layout. The Figma frame is a 1440px desktop composition and there
            is no mobile footer frame in the file yet (owed by Annie), so every
            absolute position and every hard pixel offset is confined to
            min-width 992px — POWER's own footer breakpoint (pwr-footer.css
            switches the legal row to stacked at max-width 991px). Below that
            the theme's stacked default is left completely alone.
   =========================================================================== */

/* ---------------------------- A. colour + type --------------------------- */

/* Ground. POWER paints the footer from the generic
   `.pwr--dark { background-color: var(--clr-background-dk) }` rule in pwr.css,
   and --clr-background-dk is #17180F site-wide, so this is scoped rather than
   changing every dark section. */
.pwr-footer.pwr--dark {
  background-color: var(--sh-ink-ui);   /* #333333 */
}

/* Statement. The font properties are pushed onto descendants too, because
   POWER only targets .pwr-footer-company-info__desc and its <p> — the teal
   "seen." lives in an inner <span> that would otherwise keep the rich-text
   default. Colour is deliberately NOT forced on descendants, so the teal
   survives. */
.pwr-footer .pwr-footer-company-info__desc,
.pwr-footer .pwr-footer-company-info__desc p,
.pwr-footer .pwr-footer-company-info__desc * {
  max-width: none;
  font-family: var(--sh-serif);   /* Newsreader */
  font-size: 16px;
  font-weight: 400;
  font-style: normal;
  line-height: 16px;
}

.pwr-footer .pwr-footer-company-info__desc,
.pwr-footer .pwr-footer-company-info__desc p {
  color: #FFF;
}

/* Menu links. Needs (0,5,2): POWER's
   `.pwr-footer:not(.pwr-footer-advanced).pwr--dark a:not(.pwr-link):not(.pwr-back-to-top)`
   scores (0,5,1) and paints links TRANSLUCENT white
   — rgba(--clr-txt-nav-lt-rgb, --opc-footer-hover) — solid only on hover.
   In Footer Full these depth-1 items are styled as COLUMN TITLES
   (--*-footer-menu-title + `text-transform: var(--tt-title)`), which is why
   they arrive bold and uppercase. */
.pwr-footer .pwr-footer-full__menu .hs-menu-wrapper.hs-menu-flow-vertical li.hs-menu-depth-1 > a,
.pwr-footer .pwr-footer-full__menu .hs-menu-wrapper.hs-menu-flow-vertical li.hs-menu-depth-1 > a:hover {
  color: #FFF;
  font-family: var(--sh-sans);
  font-size: 16px;
  font-weight: 400;
  font-style: normal;
  line-height: normal;
  text-transform: none;
}

/* Back-to-top. Not present in the Figma frame, and its page-settings toggle is
   not reachable through the API. To restore it, delete this rule and the
   `.pwr-footer-legal__content { width: 100% }` rule in part B. */
.pwr-footer-legal__back-to-top {
  display: none;
}

/* ------------------------------- B. layout ------------------------------- */
/* Desktop only — see the note at the top of this block. */

@media (min-width: 992px) {

  /* Vertical rhythm. POWER ships `padding: 25px 0` on .pwr-footer and
     `padding-bottom: 105px` on the row wrapper; both are replaced by the
     measured Figma offsets. */
  .pwr-footer {
    padding-top: 84px;
    padding-bottom: 80px;
  }

  .pwr-footer-full__content {
    position: relative;
    padding-bottom: 64px;          /* desc baseline -> legal */
  }

  .pwr-footer-full__content .pwr-footer-company-info {
    margin-top: 0;                 /* POWER's 5px nudge */
    position: static;              /* see the icons note below */
  }

  .pwr-footer .pwr-footer-company-info__desc {
    margin-top: 16px;
  }

  /* Social icons, flush right and level with the logo (Figma y=80 vs logo 84).
     .pwr-footer-company-info carries `position: relative` in pwr-footer.css,
     so an absolutely-positioned child would anchor to that 33% column — hence
     the `position: static` above, which hands the anchor to the row wrapper.
     svg is `height/width: 1em` (pwr.css), so font-size IS the icon size. */
  .pwr-footer-full__content .pwr-footer-company-info__icons {
    position: absolute;
    top: -4px;
    right: 0;
    margin-top: 0;                 /* beats `__desc + __icons { margin-top: 20px }` */
    font-size: 32px;
  }

  .pwr-footer-full__content .pwr-footer-company-info__icons .pwr-social-icon {
    padding: 0 8px;                /* 48px pitch; POWER zeroes first/last */
  }

  /* The four links: one centred row, not four stacked column titles.
     POWER puts them in `calc(25% - 25px)` of a 33% container, which is what
     made them wrap. Figma runs them x=534..906 in a 1440 frame, centred on 720. */
  .pwr-footer-full__content .pwr-footer-full__menu {
    position: absolute;
    top: 3px;                      /* Figma y=87 against a row top of 84 */
    left: 50%;
    transform: translateX(-50%);
    float: none;
    width: auto;
  }

  .pwr-footer-full__menu .hs-menu-wrapper.hs-menu-flow-vertical > ul {
    display: flex;
    gap: 40px;
  }

  .pwr-footer-full .hs-menu-wrapper.hs-menu-flow-vertical li.hs-menu-depth-1 {
    width: auto;
    margin: 0;
  }

  .pwr-footer .pwr-footer-full__menu .hs-menu-wrapper.hs-menu-flow-vertical li.hs-menu-depth-1 > a {
    white-space: nowrap;
  }

  /* Reclaims the 16.7% POWER reserves for the hidden back-to-top button. */
  .pwr-footer-legal__content {
    width: 100%;
  }
}


/* ===========================================================================
   HEADING SIZE OVERRIDES  (JP, home-page feedback p.2 + p.9)
   ---------------------------------------------------------------------------
   JP asked for two separate things that were tangled together: the ability to
   choose the heading LEVEL, and control over its SIZE — "these two text look
   off in sizing and their hierarchy gets broken". Tying size to level is what
   breaks it, because a page needs exactly one H1 for SEO and screen readers
   while several sections may need to read at that scale.

   So the module fields are independent: `heading_level` sets the tag,
   `heading_size` optionally sets the scale. Leaving size on "Section default"
   emits no class at all, and the module's own Figma size is untouched.

   The class is doubled deliberately. Each module styles its heading with a
   single class — `.sh-cta__heading` — which is (0,1,0), exactly the same
   specificity as a single `.sh-hsize--h1`, so the winner would come down to
   stylesheet order between child.css and HubSpot's compiled module_assets.
   Doubling to (0,2,0) settles it on specificity instead, which does not depend
   on load order. Values are the same scale as the h1/h2/h3 roles above.
   =========================================================================== */

.sh-hsize--h1.sh-hsize--h1 {
  font-size: var(--sh-fs-h1);
  line-height: 0.98;
  letter-spacing: -0.02em;
}

.sh-hsize--h2.sh-hsize--h2 {
  font-size: var(--sh-fs-h2);
  line-height: 1.06;
  letter-spacing: -0.018em;
}

.sh-hsize--h3.sh-hsize--h3 {
  font-size: var(--sh-fs-h3);
  font-weight: 500;              /* holds against the Figtree beneath it */
  line-height: 1.2;
  letter-spacing: -0.008em;
}


/* ---- Highlighted words: gradient fill (JP, feedback p.1) ------------------
   "Is there any way to enable us to make the words that are highlighted a
   gradient or a solid color, we can choose what colors in the editor?"

   Solid is just an inline `color`. Gradient has to paint the glyphs with a
   background and clip it to the text, which means the element's own colour must
   drop out — hence both `color` and `-webkit-text-fill-color`, since WebKit
   ignores the former once a fill colour is set.

   The gradient itself is written inline by the module, because the stops and
   direction are editor-chosen; this class only supplies the clipping. */
.sh-accent-fill--gradient {
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  /* Gradient text can't be contrast-checked the way flat text can. Keep
     highlights to short phrases inside a heading, never body copy. */
}


/* ===========================================================================
   HEADER CTA — "Book a Free Consultation"
   ---------------------------------------------------------------------------
   From the screen recording (2026-08-28): the header does NOT collapse into a
   pill or island. It stays a full-width bar at the same height throughout; the
   only thing that changes on scroll is that a teal CTA appears at the right and
   the nav links slide left to make room. The earlier scroll-island block was
   removed above, because it contradicted this.

   The button is POWER's own header CTA (`btn_type` -> `header_btn`, rendered as
   .pwr-header-right-bar__cta), styled to match .sh-hero__btn-primary exactly so
   the same action looks the same wherever it appears.

   Reveal timing: in the recording the CTA appears as the hero and its trust bar
   leave the viewport — sensible, because until then the hero is already showing
   this very button, and two identical CTAs on screen at once is noise. POWER
   toggles `.scroll` on the header, which fires a little earlier than the hero's
   own edge but needs no JavaScript. Delete the two visibility rules to have the
   button always present instead.
   =========================================================================== */

.pwr-header .pwr-header-right-bar__cta [class*="cta_button"],
.pwr-header .pwr-header-right-bar__cta a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 24px;
  border-radius: 999px;
  background: var(--sh-teal);
  font-family: var(--sh-sans);
  font-size: 14px;
  font-weight: 600;
  line-height: 24px;
  color: var(--sh-ink-ui);        /* #333 — never white on teal, 1.7:1 fails AA */
  text-transform: none;           /* POWER uppercases header CTAs; the hero
                                     button is title case, and the same action
                                     should not be typeset two different ways */
  text-decoration: none;
  transition: background-color .18s ease, color .18s ease;
}

.pwr-header .pwr-header-right-bar__cta [class*="cta_button"]:hover,
.pwr-header .pwr-header-right-bar__cta a:hover,
.pwr-header .pwr-header-right-bar__cta a:focus-visible {
  background: var(--sh-ink-heading);
  color: var(--sh-white);
}

/* Desktop header becomes a flex row so the CTA can sit BESIDE the nav.
   POWER absolutely positions `.pwr-header__menu--right` AND
   `.pwr-header-right-bar` both at `right: 0` inside `.pwr-header-full`, so out
   of the box they stack on top of each other and the button lands on "Contact
   Us". (POWER's own answer to this is `--right-with-lang { right: 80px }`, a
   hardcoded offset for the language switcher — no use for a button whose width
   depends on its label.)

   Laying the row out with flex instead means the nav is pushed left by exactly
   the button's width, whatever the label says, and `margin-right: auto` on the
   logo keeps it hard left. Scoped to >=992px: below that POWER hides this menu
   and shows the burger, and that layout must be left alone.

   The reveal animates `max-width` rather than toggling `display`, because
   `display` cannot transition — this is what makes the nav *slide* left as the
   button grows in, the way the recording shows, instead of jumping. 320px is an
   arbitrary ceiling above any real label; the button never actually reaches it,
   since `width` is still driven by its own padding and text.

   Vertical alignment (JP, 2026-09-24): the CTA sat 4-5px above the nav text.
   The row itself was centred, but INSIDE the right bar the CTA wrapper was an
   inline-block with `overflow: hidden`, and an inline-block with overflow
   hidden aligns its bottom edge to the parent's text baseline. That left
   descender space under the button and lifted it off centre. The right bar is
   now a flex row and the wrapper is inline-flex, so both centre on the row
   axis and the baseline never enters into it. The max-width slide still
   works on inline-flex. */
@media (min-width: 1201px) {

  .pwr-header .pwr-header-full {
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }

  .pwr-header .pwr-header-logo {
    position: static;
    transform: none;
    margin-right: auto;
  }

  .pwr-header .pwr-header__menu,
  .pwr-header .pwr-header__menu--right {
    position: static;
    transform: none;
    left: auto;
    right: auto;
  }

  .pwr-header .pwr-header-right-bar {
    position: static;
    transform: none;
    right: auto;
    display: flex;
    align-items: center;
  }

  .pwr-header .pwr-header-right-bar__cta {
    display: inline-flex;
    align-items: center;
    overflow: hidden;
    max-width: 0;
    opacity: 0;
    transition: max-width .34s ease, opacity .2s ease, margin-left .34s ease;
  }

  .pwr-header.sh-cta-ready .pwr-header-right-bar__cta {
    max-width: 320px;
    opacity: 1;
    margin-left: 40px;
  }

  /* POWER hangs a 30px margin on the CTA anchor itself; the gap is handled by
     the wrapper above so it can animate with the slide. */
  .pwr-header .pwr-header-right-bar [class*="cta_button"],
  .pwr-header .pwr-header-right-bar__cta a {
    margin-left: 0;
    white-space: nowrap;
  }
}


/* ===========================================================================
   SCROLLED HEADER — light frosted bar
   ---------------------------------------------------------------------------
   `color_scheme_on_scroll` defaults to "dark", so POWER emits
   pwr-header--dark-on-scroll and repaints the scrolled bar dark:

     .pwr-header--dark-on-scroll.scroll { background-color: var(--clr-background-dk); }
     .pwr-header--dark-on-scroll.scroll .hs-menu-wrapper li a { color: var(--clr-txt-nav-lt); }

   Both are overridden below. Unlike the island version these are NOT limited to
   >=992px: with no island, the header is the same light bar at every width, so
   the dark treatment is wrong on mobile too. Setting page settings ->
   colour scheme on scroll -> Light would do this natively and retire the block.

   (2026-09-24: the opening of this comment had been lost in an earlier edit,
   which left the two POWER rules above as live CSS and swallowed the
   .pwr-header-fixed transition rule below it. Restored.)
   =========================================================================== */

.pwr-header.pwr-header-fixed {
  transition: background-color .28s ease, box-shadow .28s ease;
}

/* (0,3,0) beats POWER's (0,2,0) `.pwr-header--dark-on-scroll.scroll`. */
.pwr-header.pwr-header-fixed.scroll {
  background-color: rgba(255, 251, 248, .85);   /* fallback for older browsers */
  background-color: color-mix(in srgb, var(--clr-background-html, #FFFBF8) 85%, transparent);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  backdrop-filter: blur(12px) saturate(1.4);
  box-shadow: 0 8px 28px rgba(19, 19, 28, .12);
  color: var(--clr-text-lt);
}

/* (0,4,2) beats POWER's (0,3,2) link rule. */
.pwr-header.pwr-header--dark-on-scroll.scroll .hs-menu-wrapper li a,
.pwr-header.pwr-header--dark-on-scroll.scroll .hs-menu-wrapper li a:after,
.pwr-header.pwr-header--dark-on-scroll.scroll .pwr-header-logo,
.pwr-header.pwr-header--dark-on-scroll.scroll .pwr-header-logo:hover {
  color: var(--clr-txt-nav-dk);   /* #333 */
}

@media (prefers-reduced-motion: reduce) {
  .pwr-header.pwr-header-fixed { transition: none; }
}


/* ===========================================================================
   POWER CTA geometry — match the hero/nav button
   ---------------------------------------------------------------------------
   JP, 2026-08-29: "make it so that our CTA styling for the template across all
   CTA options it offers match the height and font that we have in the hero/nav
   ... I just can't seem to get the foundation styling updating on my end."

   He couldn't, because half of it is not exposed. POWER's CTA base rule
   (pwr.css) sets `padding: 15px 21px` and `line-height: 1.6em` as literals with
   no variable behind them — roughly 51px tall against our 40px — so no theme
   setting can reach it. Font family/size/weight/tracking and the uppercase
   toggle ARE settings and are handled there; only the geometry and the
   underline are overridden here.

   40px = 24px line box + 8px top and bottom. Border variants get 6px + a 2px
   border so they measure the same 40px and sit level beside a solid one.

   Deliberately NOT touched: background, colour, border colour and gradients.
   Those are what JP wants to customise per CTA, and this is only the
   foundation he asked for.

   Prefixed with `body` for (0,2,1) so it beats POWER's (0,2,0) on specificity
   rather than relying on stylesheet order. */

body .cta_button:not(.pwr-cta--hubspot-style),
body .pwr-cta_button:not(.pwr-cta--hubspot-style),
body .hs-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 24px;
  line-height: 24px;
  text-decoration: none;
}

body .pwr-cta--regular-border [class*="cta_button"]:not(.pwr-cta):not(.pwr-cta--hubspot-style),
body .pwr-btn--regular-border .hs-submit,
body [class*="cta_button"].pwr-cta--regular-border,
body .pwr-cta--primary-border [class*="cta_button"]:not(.pwr-cta):not(.pwr-cta--hubspot-style),
body .pwr-btn--primary-border .hs-submit,
body [class*="cta_button"].pwr-cta--primary-border {
  padding: 6px 22px;   /* + 2px border = the same 40px */
}

/* POWER pads the inner .hs-button of a form submit separately. */
body .hs-submit .hs-button {
  padding: 8px 24px;
  line-height: 24px;
}


/* ---- Header CTA below POWER's desktop menu breakpoint ----------------------
   JP, 2026-08-31: "once the desktop reaches a certain threshold it also has
   overlap on the CTA in the header."

   POWER hides .pwr-header__menu at max-width 1200px and hands over to the
   burger. My CTA rules were gated at min-width 992px, so between 992 and 1200
   the burger and the CTA were both on screen — and since POWER absolutely
   positions the right bar at right:0, the CTA sat straight on top of the burger
   icon. Measured overlap was 30px at both 1100px and 1200px.

   Below the burger breakpoint the CTA is simply not shown: the hero still
   carries the same button, and the burger panel is where navigation belongs at
   that size. */
@media (max-width: 1200px) {
  .pwr-header .pwr-header-right-bar__cta {
    display: none;
  }
}

/* ---- Burger icon colour ----------------------------------------------------
   Meti, 2026-08-31: on mobile the burger turns white once you scroll down.

   Same root cause as the nav links and logo: `color_scheme_on_scroll` defaults
   to "dark", so POWER emits pwr-header--dark-on-scroll and repaints the burger
   bars light for a dark scrolled bar:

     .pwr-header--dark-on-scroll.scroll .pwr-burger__icon-open span,
     ...:after, ...:before { background-color: var(--clr-txt-nav-lt); }

   Our scrolled header is the light frosted bar, so the bars stay dark. Not
   limited by width — the burger only exists below 1200px anyway. */
.pwr-header.pwr-header--dark-on-scroll.scroll .pwr-burger__icon-open span,
.pwr-header.pwr-header--dark-on-scroll.scroll .pwr-burger__icon-open:before,
.pwr-header.pwr-header--dark-on-scroll.scroll .pwr-burger__icon-open:after {
  background-color: var(--clr-txt-nav-dk);   /* #333 */
}


/* ===========================================================================
   POWER card titles — Services + Bento Grid
   ---------------------------------------------------------------------------
   JP, 2026-09-01: he could not find what controlled these titles, and the two
   modules looked different from each other. They are styled through two
   unrelated routes:

     .pwr-services-item__title  ->  font-family: var(--ff-accent)
                                    font-size: 19px  }  hardcoded literals,
                                    font-weight: 700 }  no setting reaches them

     .pwr-adc-content__title    ->  var(--ff-amm-menu-title)
                                    var(--fs-amm-menu-title)
                                    var(--fw-amm-menu-title)

   The second is the giveaway: `amm` is POWER's ADVANCED MEGA MENU. A bento-grid
   card title is styled by the mega-menu title settings — which is both why JP
   could not find it and why one module rendered serif and the other sans.

   Both are now matched to our own card titles (.sh-steps__title): Newsreader
   400. Prefixed with `body` for (0,1,1) so this beats POWER's (0,1,0) on
   specificity rather than on stylesheet order. */

body .pwr-services-item__title,
body .pwr-adc-content__title {
  font-family: var(--sh-serif);      /* Newsreader — matches the homepage cards */
  font-size: 21px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0;
  color: var(--sh-ink-ui);           /* #333 */
}

/* ---- Opt-in variants -------------------------------------------------------
   Type one of these into the module's CSS class field (Styles tab → Advanced →
   CSS class) to change just that instance. Nothing else on the site moves.

     sh-title-sm     smaller
     sh-title-lg     larger
     sh-title-sans   Figtree instead of Newsreader

   Note for the Bento Grid: it has its own per-item "Title Font Size" field.
   POWER writes that inline, and an inline style beats a class, so if that field
   is set it wins over sh-title-sm / sh-title-lg. Clear it to use these. */

body .sh-title-sm .pwr-services-item__title,
body .sh-title-sm .pwr-adc-content__title {
  font-size: 18px;
}

body .sh-title-lg .pwr-services-item__title,
body .sh-title-lg .pwr-adc-content__title {
  font-size: 26px;
  line-height: 1.15;
}

body .sh-title-sans .pwr-services-item__title,
body .sh-title-sans .pwr-adc-content__title {
  font-family: var(--sh-sans);       /* Figtree */
  font-weight: 600;
}


/* ===========================================================================
   PRIMARY BUTTON — purple gradient
   ---------------------------------------------------------------------------
   Annie relaying Marlee + Ed, 2026-09-01: the primary CTA moves from teal to
   the purple gradient. Applied to our own primary buttons and to POWER's
   primary CTAs, so JP's landing pages pick it up too.

   Hover collapses to solid #6212E8 — a clear state change, and the darkest
   stop, so contrast improves rather than degrades on hover.

   NOTE: the teal closing band (.sh-cta) is deliberately NOT changed here — see
   the end of this block. */

body .pwr-cta--primary-solid [class*="cta_button"]:not(.pwr-cta):not(.pwr-cta--hubspot-style),
body [class*="cta_button"].pwr-cta--primary-solid,
body .pwr-btn--primary-solid .hs-submit,
body .pwr-header .pwr-header-right-bar__cta [class*="cta_button"],
body .pwr-header .pwr-header-right-bar__cta a {
  background-image: var(--sh-gradient-btn);
  background-color: transparent;
  color: var(--sh-white);
}

body .pwr-cta--primary-solid [class*="cta_button"]:not(.pwr-cta):not(.pwr-cta--hubspot-style):hover,
body [class*="cta_button"].pwr-cta--primary-solid:hover,
body .pwr-header .pwr-header-right-bar__cta a:hover,
body .pwr-header .pwr-header-right-bar__cta a:focus-visible {
  background-image: none;
  background-color: var(--sh-purple);
  color: var(--sh-white);
}


/* ===========================================================================
   FORM SUBMIT BUTTONS — same purple gradient as every other primary CTA
   ---------------------------------------------------------------------------
   JP, 2026-09-01: he set POWER's "Custom Button 01" to the purple gradient, it
   worked in PWR Sec CTA but not in PWR Sec Form.

   It is a specificity fight, not a missing setting. POWER DOES wire Custom 01
   into submit buttons (`.pwr-cta--custom-01 .hs-submit:before`, (0,2,1)) but its
   own HubSpot-forms rule outranks it:

     div:not(.pwr-form) > .hs_cos_wrapper_type_form form.hs-form .hs-submit:before
       { background-color: var(--clr-btn-background-hs); }        (0,4,3)

   `--clr-btn-background-hs` is the teal from Colors -> HubSpot -> Forms ->
   Submit button, which is why the form button stayed teal whatever JP picked.
   No theme setting can win that, so it is fixed here instead.

   Two details that matter:
   1. The colour lives on a `:before` LAYER, not on the button — setting
      background on `.hs-submit` itself does nothing.
   2. POWER also sets the label to `--clr-btn-txt-hs` (#333). Dark text on this
      gradient fails contrast, so the label is forced to white — 4.77:1 at the
      lightest stop, which passes AA.

   The `body` prefix takes these to (0,4,4)/(0,4,3)+1 so they beat POWER on
   specificity rather than on stylesheet order. */

body div:not(.pwr-form) > .hs_cos_wrapper_type_form form.hs-form .hs-submit:before,
body .pwr-form .hs_cos_wrapper_type_form form.hs-form .hs-submit:before,
body .hs_cos_wrapper_type_form form.hs-form .hs-submit:before {
  background-image: var(--sh-gradient-btn);
  background-color: transparent;
}

body div:not(.pwr-form) > .hs_cos_wrapper_type_form form.hs-form .hs-submit,
body .pwr-form .hs_cos_wrapper_type_form form.hs-form .hs-submit,
body .hs_cos_wrapper_type_form form.hs-form .hs-submit {
  color: var(--sh-white);
}

body div:not(.pwr-form) > .hs_cos_wrapper_type_form form.hs-form .hs-submit:hover,
body .hs_cos_wrapper_type_form form.hs-form .hs-submit:hover {
  color: var(--sh-white);
}

/* Plain (non-embed) form submits fall through to --clr-btn-primary, which is
   still the teal. Match them so a stray form doesn't look like the odd one out. */
body form > input[type="submit"],
body form > input[type="button"],
body #email-prefs-form .hs-button,
body .hs-search-module .hs-button {
  background-image: var(--sh-gradient-btn);
  background-color: transparent;
  color: var(--sh-white);
}


/* ---- Form buttons: HubSpot's NEW form renderer -----------------------------
   HubSpot has two form markups in play, and they are styled by different rules
   in different POWER stylesheets. The block above covers the legacy one
   (`form.hs-form .hs-submit`). This covers the current renderer, whose markup is
   `form.hsfc-Form` / `button.hsfc-Button` — the consultation page uses it.

   POWER styles it from pwr-defer.min.css, not pwr.css:

     .pwr-form-style-v4 .hsfc-Button::before { background-color: var(--clr-btn-primary); }

   So it follows Colors -> POWER -> CTAs -> CTA Color Primary. A THIRD route,
   different again from the Custom Button styles and from the HubSpot Forms
   submit settings. A colour picker cannot express a gradient, which is why this
   has to be CSS.

   The label colour goes through POWER's own custom property rather than a plain
   `color` declaration, so it has to be set the same way or the #333 label stays
   and fails contrast on the gradient. */

body .pwr-form-style-v4 .hsfc-Button::before,
body .pwr-form-style-v4 .pwr-btn--primary-solid .hsfc-Button::before {
  background-image: var(--sh-gradient-btn);
  background-color: transparent;
}

body .pwr-form-style-v4 .hsfc-Button,
body .pwr-form-style-v4 .pwr-btn--primary-solid .hsfc-Button {
  --hsf-button__color: var(--sh-white);
  --hsf-button--hover__color: var(--sh-white);
  color: var(--sh-white);
}

/* Hover collapses to the darkest stop, as the other primary buttons do. */
body .pwr-form-style-v4 .hsfc-Button:hover::after {
  background-color: var(--sh-purple);
}

/* ---- Mobile tap targets ---------------------------------------------------
   Audited 2026-09-01 at 375px: every pill renders 40px tall and the handwritten
   tertiary links only 24px — both under the 44px minimum (WCAG 2.5.5, Apple
   HIG). Nothing moves visually: min-height wins over the declared height, and
   these are already inline-flex + centred, so the hit area grows around the
   label rather than the label shifting. Relevant to JP's accessibility item. */
@media (max-width: 760px) {
  .sh-hero__btn-primary,
  .sh-cta__btn,
  .sh-stagger__btn,
  .sh-btn-primary,
  .sh-btn-secondary { min-height: 44px; }

  /* Bare text links — no pill, so give them a box to grow inside. */
  .sh-hero__btn-tertiary,
  .sh-cta__btn--tertiary,
  .sh-stagger__btn--tertiary,
  .sh-btn-tertiary {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}
/* ==========================================================
   Scholar Health: mobile gutter fix (v2)
   Replace the existing @media (max-width:767px) block in
   child.css with this block. Applies to every page on the theme.
   ========================================================== */
@media (max-width: 767px) {

  :root { --sh-gutter-mobile: 20px; }

  /* 1. One gutter, not four.
        POWER adds: .dnd-section padding 40px, .page-center margin 40px,
        boxed-section margin 40px. Child adds 16px padding on top. */
  body .dnd-section {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  body .page-center {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: var(--sh-gutter-mobile);
    padding-right: var(--sh-gutter-mobile);
  }
  body .pwr-sec-form { margin-left: 0; margin-right: 0; }

  /* 2. Mobile heading scale */
  body h2.pwr-sec__title,
  body .pwr-sec-cta__title {
    font-size: 32px;
    line-height: 1.1;
  }

  /* 3. Hero form: full width, lighter box padding */
  body .pwr-sec-form__form-wrapper,
  body .pwr-sec-form .pwr-form {
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
  }
  body .pwr-sec-form__form-wrapper--hor-boxed .pwr-form.pwr--light,
  body .pwr-sec-form .pwr-form.pwr--colored-box {
    padding: 24px 20px;
  }

  /* 4. Problem cards: 20px inside instead of 30px */
  body .pwr-adc__content-wrapper--padding {
    padding: 24px 20px !important;
  }
  body .pwr-adc-content__title { line-height: 1.15 !important; }

  /* 5. Bottom CTA box: 16px outside, 20px inside */
  body .pwr-sec-cta {
    margin-left: var(--sh-gutter-mobile) !important;
    margin-right: var(--sh-gutter-mobile) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  body .pwr-sec-cta > .page-center {
    padding-left: 20px;
    padding-right: 20px;
  }
  body .pwr-sec-cta__desc { max-width: none; }

  /* 6. Custom Scholar sections own their gutter */
  body .sh-faq,
  body .sh-quotes,
  body .sh-steps {
    padding-left: var(--sh-gutter-mobile);
    padding-right: var(--sh-gutter-mobile);
  }
}
 .pwr-sec-accordion .pwr-accordion__title {
  font-family: var(--ff-accent);  /* Newsreader */
  font-weight: 400;
  font-size: 25px;
  }


/* ===========================================================================
   CONSULTATION FORM — first-paint layout (safety net)
   ---------------------------------------------------------------------------
   JP, 2026-09-28: /consultation jumped on first load (CLS 0.19). POWER loads
   pwr-sec-form.css asynchronously, so the first frame had no side-by-side
   layout and the form rendered full width under the heading.
 
   The PRIMARY fix is the section's "is in viewport" setting in the page
   editor, which makes POWER load that CSS up front. These rules mirror
   POWER's own values so the layout also holds if that setting is ever turned
   off, or the form section is reused near the top of another page.
   Desktop only: POWER stacks the section below 992px.
   =========================================================================== */
@media (min-width: 992px) {
  .pwr-sec-form__content--v-align {
    display: flex;
    align-items: center;
  }
 
  .pwr-sec-form__intro-sec--hor-boxed {
    float: left;
    width: 53%;
  }
 
  .pwr-sec-form__form-wrapper--hor-boxed {
    float: left;
    width: 40%;
    margin-left: 7%;
  }
}
 
 
CONSULTATION FORM — first-paint layout (safety net)
   ---------------------------------------------------------------------------
   JP, 2026-09-28: /consultation jumped on first load (CLS 0.19). POWER loads
   pwr-sec-form.css asynchronously, so the first frame had no side-by-side
   layout and the form rendered full width under the heading.

   The PRIMARY fix is the section's "is in viewport" setting in the page
   editor, which makes POWER load that CSS up front. These rules mirror
   POWER's own values so the layout also holds if that setting is ever turned
   off, or the form section is reused near the top of another page.
   Desktop only: POWER stacks the section below 992px.
   =========================================================================== */
@media (min-width: 992px) {
  .pwr-sec-form__content--v-align {
    display: flex;
    align-items: center;
  }

  .pwr-sec-form__intro-sec--hor-boxed {
    float: left;
    width: 53%;
  }

  .pwr-sec-form__form-wrapper--hor-boxed {
    float: left;
    width: 40%;
    margin-left: 7%;
  }
}

/* ===========================================================================
   CONSULTATION FORM — tighter spacing, smaller type, site CTA button
   ---------------------------------------------------------------------------
   JP, 2026-09-28: the form read too spread out, the disclaimer was too large,
   the gap around the checkboxes was huge, and the button did not match the
   site CTAs. Measured on /consultation: form height 971px -> 768px.
   =========================================================================== */

/* Row spacing. HubSpot's form renderer spaces rows with this variable, and
   the gap above the button defaults to 2x the same value. 20px -> 14px. */
body .pwr-sec-form {
  --hsf-row__vertical-spacing: 14px;
}

/* Input height: 51px -> 39px (JP, 2026-10-09). POWER pads every box input
   16px 18px, and also feeds that value into HubSpot's renderer variable, so
   both the variable and the direct padding are overridden. Covers text,
   email, phone, number inputs and the dropdowns (which are a read-only
   .hsfc-TextInput inside .hsfc-DropdownInput). Row spacing, labels and the
   button are unchanged. */
body .pwr-form-style-v4 form,
body .pwr-form-style-v4 .pwr-form.pwr--light form {
  --hsf-field-input__padding: 10px 16px;
  --hsf-field-textarea__padding: 10px 16px;
}

body .pwr-form-style-v4 form input[type="text"],
body .pwr-form-style-v4 form input[type="email"],
body .pwr-form-style-v4 form input[type="tel"],
body .pwr-form-style-v4 form input[type="number"],
body .pwr-form-style-v4 form select,
body .pwr-form-style-v4 form [data-hsfc-id="Renderer"] .hsfc-TextInput {
  padding: 10px 16px;
}

/* Form box padding. POWER ships 40px 30px. */
body .pwr-sec-form__form-wrapper--hor-boxed .pwr-form.pwr--light {
  padding: 32px 20px;
}

/* Invisible rows. The form has hidden fields (marketing_information_consent
   and five UTM fields) after the checkboxes. Each row is 0px tall but still
   carried the row margin, which added about 120px of dead space. Only the
   margin goes; hidden fields still submit. The :empty rich text case covers
   any empty rich text field added to the form later. */
body .pwr-sec-form .hsfc-Row:has(> input[type="hidden"]:only-child),
body .pwr-sec-form .hsfc-Row:has(> .hsfc-RichText:empty) {
  margin-bottom: 0;
}

/* Checkbox labels: 16px -> 14px, the same size as the field labels. POWER
   styles checkbox text with the form INPUT size, not the label size, which is
   why it read larger. POWER sets padding-left with !important, so this has to
   match it. 32px = the 20px box below + a 12px gap to the text. */
body .body-wrapper .hsfc-CheckboxField input[type="checkbox"] + span:not(.slider) {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  margin-top: 4px;
  margin-bottom: 4px;
  padding-left: 32px !important;
}

/* Checkbox box: 28px -> 20px (JP, 2026-09-28). POWER draws the box as a
   ::before and the checked mark as an ::after, both centred on the label with
   translateY(-50%). The mark keeps POWER's proportion: half the box, centred. */
body .body-wrapper .hsfc-CheckboxField input[type="checkbox"] + span:not(.slider)::before {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  transform: translateY(-50%);
}

body .body-wrapper .hsfc-CheckboxField input[type="checkbox"]:checked + span:not(.slider)::after {
  width: 10px;
  height: 10px;
  left: 5px;
  border-radius: 2px;
  transform: translateY(-50%);
}

/* Disclaimer: the style guide's micro text, 13px / 400 / #5F5C52. It was
   Figtree 300 at 14px, which breaks THE NEVERS (no 300 below 16px). The size
   is set inline by the form editor (font-size: 14px; line-height: 125%), so
   !important is needed to override it. Remove that inline size in the form
   editor to drop the two !important flags. */
body .pwr-sec-form .hsfc-RichText p {
  font-size: 13px !important;
  font-weight: 400;
  line-height: 18px !important;
  color: var(--sh-grey-micro);
  margin: 8px 0;
}

/* Disclaimer spacing. SMS checkbox text -> disclaimer: 15px (the 14px row
   margin + the label's own bottom margin, pulled up 6px). Disclaimer ->
   button: 24px, set on the navigation row below. Both measured on
   /consultation, 2026-09-28. */
body .pwr-sec-form .hsfc-Row:has(> .hsfc-RichText:not(:empty)) {
  margin-top: -6px;
  margin-bottom: 0;
}

body .pwr-sec-form .hsfc-RichText > :first-child {
  margin-top: 0;
}

body .pwr-sec-form .hsfc-RichText > :last-child {
  margin-bottom: 0;
}

body .pwr-sec-form .hsfc-NavigationRow {
  margin-top: 24px;
}

/* Submit button: same 40px pill height as the header and hero CTAs, with
   wider 40px side padding so it reads as the main action (123px -> 155px
   wide). POWER pads the new-renderer button 15px 21px (52px tall), and the
   site-wide CTA geometry rules above only cover the legacy .hs-submit markup. */
body .pwr-form-style-v4 .hsfc-Button {
  padding: 8px 40px;
  line-height: 24px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 999px;
}

/* Multi-select dropdown ("What would you like support with?"). This field is
   a custom multi-select (.hsq-msd), not a HubSpot field, so POWER's box input
   style never reaches it and it kept the old line style: transparent with a
   2px bottom border. Matched to the boxed inputs, measured 2026-09-28:
   5% ink fill, no border, 6px radius. Height and side padding follow the
   compact inputs above (39px tall, 16px sides, JP 2026-10-09). */
body .pwr-sec-form .hsq-msd .hsq-msd-trigger {
  box-sizing: border-box;
  height: 39px;
  padding: 0 16px;
  border: 0;
  border-radius: 6px;
  background-color: rgba(23, 27, 37, 0.05);
}

/* ===========================================================================
   CONSULTATION FORM — polish after the compact inputs (JP, 2026-10-09)
   ---------------------------------------------------------------------------
   Inputs are now 37px with 14px text (--fs-form-input). Four things did not
   follow: the custom multi-select trigger kept the 16px from its footer
   snippet, the error text read large, the dropdown carets (12x6) were heavy
   next to 14px type, and the option rows inside the two multi-select panels
   still used POWER's 28px boxes with 7px margins and a 50px indent.
   =========================================================================== */

/* Multi-select trigger text: same size as the inputs (14px), and the
   selected values stay on one line with an ellipsis instead of wrapping
   past the 39px box. The value is a flex child, so it needs min-width: 0
   for the ellipsis to work. */
body .pwr-sec-form .hsq-msd .hsq-msd-trigger {
  font-size: var(--fs-form-input);
}

body .pwr-sec-form .hsq-msd .hsq-msd-value {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  line-height: 19px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Error text: 14px / 300 -> 12px / 400, tighter line and a 6px gap to the
   field (POWER sets margin-top: 1em). */
body .pwr-form-style-v4 [data-hsfc-id="Renderer"] form .hsfc-ErrorAlert {
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  margin-top: 6px;
}

/* Carets: 12x6 -> 10x5 on the native dropdowns, the phone flag, and the
   multi-select trigger. Centres stay aligned: native 20px padding + 5px,
   multi-select 16px padding + 4px margin + 5px, both 25px from the edge. */
body .pwr-sec-form [data-hsfc-id="Renderer"] .hsfc-DropdownInput__Caret > span,
body .pwr-sec-form [data-hsfc-id="Renderer"] .hsfc-PhoneInput__FlagAndCaret__Caret {
  border-left-width: 5px;
  border-right-width: 5px;
  border-top-width: 5px;
}

body .pwr-sec-form .hsq-msd .hsq-msd-trigger::after {
  border-left-width: 5px;
  border-right-width: 5px;
  border-top-width: 5px;
  margin-right: 4px;
}

/* Multi-select panel options ("What would you like support with?" and
   "I plan to use one of the following"). The Sept 28 checkbox rules only
   cover single .hsfc-CheckboxField fields; these options sit in a
   .hsfc-CheckboxFieldGroup, so POWER's defaults still applied (28px box,
   7px margins, 50px indent, 37px rows). Same 20px box and 32px indent as
   the SMS checkbox; 3px margins give 26px rows. POWER sets the margin and
   indent with !important, so these have to match it. */
body .body-wrapper .hsfc-CheckboxFieldGroup input[type="checkbox"] + span:not(.slider) {
  font-size: 14px;
  line-height: 20px;
  margin: 3px 0 !important;
  padding-left: 32px !important;
}

body .body-wrapper .hsfc-CheckboxFieldGroup input[type="checkbox"] + span:not(.slider)::before {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  transform: translateY(-50%);
}

body .body-wrapper .hsfc-CheckboxFieldGroup input[type="checkbox"]:checked + span:not(.slider)::after {
  width: 10px;
  height: 10px;
  left: 5px;
  border-radius: 2px;
  transform: translateY(-50%);
}

/* ---- Trust bar icons (pwr-sec-services) ------------------------------------
   POWER sets `.pwr-services-item__img { width: 100% }` inside an inline-block
   span. The span has no width of its own, so Safari falls back to the SVG's
   24x24 viewBox. Chrome renders the same icon at the module's 50px setting.
   A fixed width and height give every browser the same size. Applies at every
   width, on every page that uses this module. */
:root { --sh-trust-icon: 56px; }

body .pwr-sec-services .pwr-services-item__icon {
  width: var(--sh-trust-icon);
  font-size: var(--sh-trust-icon) !important;
  line-height: 0;
}
body .pwr-sec-services .pwr-services-item__img {
  width: var(--sh-trust-icon) !important;
  height: var(--sh-trust-icon) !important;
  max-width: none !important;
  max-height: none !important;
  margin-top: 0;
}

@media (max-width: 767px) {
  :root { --sh-trust-icon: 48px; }
}
/* ---- Header logo size -------------------------------------------------------
   Sets the logo width on every page that uses the global PWR Header.
   Height follows the width, so the logo keeps its proportions.
   Change the two --sh-logo-w values to resize. */
:root { --sh-logo-w: 175px; }

@media (max-width: 767px) {
  :root { --sh-logo-w: 150px; }
}

body .pwr-header .pwr-header-logo {
  max-width: none;
  width: var(--sh-logo-w);
}
body .pwr-header .pwr-header-logo__img {
  width: var(--sh-logo-w) !important;
  max-width: none !important;
  height: auto !important;
}
/* ---- Multi-select caret ("What would you like support with?") -------------
   The native dropdown caret sits in a 52px box at the right edge, so its
   center is 26px from the edge. The trigger now has 16px side padding:
   16px padding + 4px margin + 6px half-width = 26px. */
body .pwr-sec-form .hsq-msd .hsq-msd-trigger::after {
  margin-right: 4px;
}

/* ---- Footer columns on phones ----------------------------------------------
   POWER sets column widths only at 575px and up. Below 575px, each footer
   column shrinks to the width of its content, so "center" centers the logo
   inside a 145px column that sits on the left. Full-width columns fix it. */
@media (max-width: 574px) {
  body .pwr-footer .pwr-adc__col,
  body footer .pwr-adc__col {
    width: 100%;
  }
}