/*
Theme Name:   Innovative Care
Theme URI:    https://innovativecarewa.com.au
Description:  Child theme of Hello Elementor for Innovative Care. Implements the Option 1 redesign. Layout is built with Elementor flex containers; this theme carries design tokens, custom post types, and anything Elementor should not own.
Author:       BrainFeed
Author URI:   https://brainfeed.com.au
Template:     hello-elementor
Version:      0.3.2
Text Domain:  innovative-care
Tags:         accessibility-ready, custom-colors, custom-menu
*/

/* -----------------------------------------------------------------------------
   Design tokens
   Mirrors the Global Colors / Global Fonts set in Elementor, so custom CSS and
   any hand-coded template parts stay in sync with what the page builder uses.
   Change a value in BOTH places, or the two drift apart.
   Source of truth: design.pen (Option 1 v3)
----------------------------------------------------------------------------- */

:root {
  /* Brand */
  --ic-teal:        #00B5A5;
  --ic-teal-deep:   #008F82;
  --ic-teal-tint:   #F0FBFA;
  --ic-teal-tint-2: #E0F8F5;
  --ic-purple:      #6B4C9A;

  /* Text */
  --ic-ink:    #1A1A1A;
  --ic-ink-2:  #333333;
  --ic-body:   #555555;
  --ic-muted:  #7A7A7A;

  /* Surfaces */
  --ic-white:   #FFFFFF;
  --ic-surface: #F7F9F9;
  --ic-line:    #E4E7E7;

  /* Accents used in reviews / status indicators */
  --ic-star:    #F5A623;
  --ic-success: #3DA35D;
  --ic-warning: #E0A800;
  --ic-danger:  #D64545;

  /* Type */
  --ic-font: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Layout */
  --ic-container: 1440px;
  --ic-gutter: 80px;
  --ic-gutter-mobile: 20px;
  --ic-radius: 14px;
  --ic-radius-sm: 9px;
  --ic-radius-pill: 20px;
}

/* -----------------------------------------------------------------------------
   Base
----------------------------------------------------------------------------- */

body {
  font-family: var(--ic-font);
  color: var(--ic-body);
  -webkit-font-smoothing: antialiased;
}

/* Fallback for headings rendered OUTSIDE the builder (archive titles, plugin
   output, form markup). Wrapped in :where() so it has zero specificity and never
   competes with Elementor's per-widget typography.

   Deliberately no letter-spacing or line-height here: a blanket -0.02em was
   silently retracking every Elementor heading - it put -0.3px on the footer
   column headings, which the design specifies at 0. Tracking belongs to the kit
   and to individual widgets, not to a global rule. */
:where(h1, h2, h3, h4, h5, h6) {
  color: var(--ic-ink);
  font-family: var(--ic-font);
}

/* -----------------------------------------------------------------------------
   Accessibility
   Healthcare/disability audience - keyboard and screen reader support is a
   requirement here, not a nice-to-have.
----------------------------------------------------------------------------- */

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--ic-teal-deep);
  outline-offset: 2px;
  border-radius: 2px;
}

.ic-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10000;
  padding: 12px 20px;
  background: var(--ic-white);
  color: var(--ic-teal-deep);
  font-weight: 700;
  border-radius: 0 0 var(--ic-radius-sm) 0;
}

.ic-skip-link:focus {
  left: 0;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* -----------------------------------------------------------------------------
   Sticky mobile call bar
   Present on every mobile frame in the design. Elementor renders the bar's
   contents; pinning it is done here rather than with Elementor's sticky feature,
   which depends on scroll listeners and is heavier than it needs to be.
----------------------------------------------------------------------------- */

@media (max-width: 767px) {
  .ic-sticky-call-bar {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 999;
    box-shadow: 0 -2px 12px rgb(0 0 0 / 8%);
    /* Keeps the bar clear of the iOS home indicator. */
    padding-bottom: calc(12px + env(safe-area-inset-bottom)) !important;
  }

  /* Reserve space so the last section is never hidden behind the bar. */
  body.ic-has-sticky-bar {
    padding-bottom: calc(72px + env(safe-area-inset-bottom));
  }
}

/* -----------------------------------------------------------------------------
   Header
----------------------------------------------------------------------------- */

/* -----------------------------------------------------------------------------
   Flex sizing helpers

   Elementor containers default to `--width: 100%`, and its width control only
   emits numeric values - there is no way to express "auto" through it. Left
   alone, every container in a row therefore claims an equal share, which turns
   the header into three equal columns instead of logo / menu / actions.

   These three classes carry that intent instead. They are applied via each
   container's CSS Classes field, so they stay visible and editable in Elementor.
----------------------------------------------------------------------------- */

/* Elementor styles containers as `.elementor-element.e-con`, so a single class
   selector loses on specificity. `.e-con.ic-*` matches that weight and, loading
   later, wins. An explicit `--width` on the element still beats these, so the
   fixed-size boxes keep their dimensions and only stop shrinking. */

/* Hug the content: no grow, no shrink. */
.e-con.ic-hug {
  --width: auto;
  flex: 0 0 auto;
}

/* Absorb the free space between the logo and the header actions. */
.e-con.ic-nav-center {
  --width: auto;
  flex: 1 1 auto;
  min-width: 0;
}

/* Elementor's row preset hard-codes `--flex-wrap-mobile: wrap`, which breaks the
   header into three stacked rows on phones. The header bars are deliberately a
   single row at every width, so opt them out. */
@media (max-width: 767px) {
  .e-con.ic-nav-row,
  .e-con.ic-nav-row > .e-con-inner {
    --flex-wrap-mobile: nowrap;
    flex-wrap: nowrap;
  }
}

/* The design's hamburger is a 38px dark square. Elementor's toggle sizes itself
   from its icon plus padding, which comes out taller and drives the whole mobile
   header height. */
.ic-nav-row .elementor-menu-toggle {
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 9px;
}

/* -----------------------------------------------------------------------------
   Link boxes

   Elementor renders no anchor at all for a `link` set on a container, so every
   pill, card and ghost button built that way looked clickable and did nothing.
   The link therefore lives on a widget inside the box - which gives a real `<a>`
   with the label as its accessible name - and this stretches that anchor's hit
   area over the whole box.

   The anchor itself stays in flow so the label keeps its position; the
   pseudo-element does the covering. `position: relative` on the box is what the
   pseudo-element resolves against, so it has to be applied together with the
   class, never separately.
----------------------------------------------------------------------------- */

.ic-linkbox {
  position: relative;
}

/* Elementor gives both `.elementor-widget` and `.e-con` `position: relative`, so
   without this the stretched pseudo-element resolves against the widget holding
   the label and covers only that, not the box. Descendants only - `.ic-linkbox`
   is itself an `.e-con` and has to stay the positioned ancestor. */
.ic-linkbox .elementor-widget,
.ic-linkbox .e-con {
  position: static;
}

.ic-linkbox .elementor-heading-title a {
  color: inherit;
  text-decoration: none;
}

.ic-linkbox .elementor-heading-title a::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Above the box's own background, below anything that needs its own hit
     area - there is nothing else interactive inside these boxes. */
  z-index: 1;
}

/* Language pill in the utility bar: 31px on desktop, 27px on mobile, per the
   design's two utility bars (H0TUcw and Syd8g).

   Padding was already right in both - 6/12 and 5/10. The label is a `span`, so
   its widget wrapper picks up a 24px line-box strut from the inherited body
   line-height and holds the pill open regardless of the line-height set on the
   label itself, which is what put the bars at 56 and 52 instead of 51 and 45.
   Same mechanism as `.ic-stack-tight` further down, fixed the same way.

   Deliberately not scoped to a breakpoint: both bars have the strut, and both
   labels carry an explicit line-height that should govern. */
.ic-language-switcher .elementor-heading-title {
  display: block;
}

/* -----------------------------------------------------------------------------
   Mobile header row

   `.ic-nav-center` absorbs the free space so the menu sits centred on desktop.
   Below 768px there is no menu in that slot - only Elementor's burger - so the
   same rule left the toggle floating in the middle of the header, 51px from the
   logo and 74px from the actions.

   Elementor also renders the dropdown panel *in flow*: `position: static` with a
   10px top margin. Closed, that still added ~24px to the row (96px tall against
   the design's 72). Open, it would have unfolded as a 139px-wide box hanging
   under the middle of the header rather than spanning the screen.
----------------------------------------------------------------------------- */

@media (max-width: 1024px) {
  /* Hug the toggle and move it to the end: logo | call | burger. */
  .e-con.ic-nav-center {
    --width: auto;
    flex: 0 0 auto;
    order: 3;
  }

  /* Nothing in the row grows now, so the logo does the pushing. */
  .ic-nav-row .ic-logo {
    margin-right: auto;
  }

  /* Anchor the dropdown to the nav row, which is the full viewport width. Both
     of these are `position: relative` by default and would otherwise become the
     containing block - which is exactly how the panel ended up 139px wide. */
  .ic-nav-row .ic-nav-center,
  .ic-nav-row .elementor-widget-nav-menu {
    position: static;
  }

  .ic-nav-row .elementor-nav-menu--dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: auto;
    margin-top: 0;
    overscroll-behavior: contain;
    padding-bottom: 8px;
  }

  /* Elementor's default active item is a dark slate bar (#3F444B) that reads as
     a heavy block across a full-width panel. The design marks the current page
     in teal, so use the same tint the mobile call button sits on. */
  .ic-nav-row .elementor-nav-menu--dropdown .elementor-item.elementor-item-active {
    background-color: var(--ic-teal-tint-2);
    color: var(--ic-teal-deep);
    box-shadow: inset 3px 0 0 var(--ic-teal);
  }

  /* Same dark slate turns up again on a parent while its submenu is open -
     SmartMenus adds `.highlighted` - so it needs the same treatment. Lighter
     tint than the active item, so "expanded" and "current page" stay
     distinguishable when they are the same row. */
  .ic-nav-row .elementor-nav-menu--dropdown .elementor-item.highlighted,
  .ic-nav-row .elementor-nav-menu--dropdown .elementor-item:hover,
  .ic-nav-row .elementor-nav-menu--dropdown .elementor-item:focus {
    background-color: var(--ic-teal-tint);
    color: var(--ic-teal-deep);
  }

  /* Open state: a full-screen panel, not a dropdown.

     Every rule below has to be written against the open-state selector
     `.elementor-menu-toggle.elementor-active + …`, and not the plainer
     `.ic-nav-row .elementor-nav-menu--dropdown`. Elementor drives the panel from
     (0,4,0) selectors (four classes plus an adjacent-sibling combinator) and
     writes its per-post item styles at (0,4,1); a two- or three-class rule loses
     silently, applying some declarations and dropping others, which looks like a
     half-broken rule. Matching that weight and loading later wins the tie. */

  /* The page behind the panel must not scroll. */
  body:has(.ic-nav-row .elementor-menu-toggle.elementor-active) {
    overflow: hidden;
  }

  /* Pin the header above the panel. Without this, opening the menu part-way down
     a page would leave the close control off-screen with no way back. */
  body:has(.ic-nav-row .elementor-menu-toggle.elementor-active) .elementor-location-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 200;
  }

  /* The panel fills everything below the pinned header.

     It is anchored at `top: 125px` rather than `inset: 0` with matching padding,
     because the panel is a *descendant* of the header: any z-index high enough
     to clear the page content also paints it over the header's own logo and
     close button, which sit in the same stacking context. Starting below the
     header sidesteps that entirely. The offset differs by breakpoint, so it is
     carried in --ic-header-h rather than hard-coded: 118px on mobile (utility
     bar 45 + nav row 73), and the tablet value is set in its own block below.

     The mobile nav row is 73 rather than the design's 66 because the design
     frame carries the wrong logo - a 38px mark-and-wordmark lockup. The real
     logo is 44px tall and correct, so the extra 7px stays. */
  .ic-nav-row .elementor-menu-toggle.elementor-active + .elementor-nav-menu--dropdown {
    position: fixed;
    top: var(--ic-header-h);
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 150;
    width: auto;
    max-height: none;
    margin: 0;
    /* Clear the panel's own action block pinned at its foot, so the last menu
       item is never trapped behind it once a submenu is expanded. */
    padding: 8px 0 calc(150px + env(safe-area-inset-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;
    background-color: #FFFFFF;
    border-top: 0;
    box-shadow: none;
  }

  /* The panel's action block: phone number + Enquire, pinned to its foot.

     It lives outside the panel in the markup - Elementor owns the nav output, so
     nothing can be added inside it - and is positioned into place here. Hidden
     entirely unless the menu is open. */
  .ic-menu-cta {
    display: none;
  }

  body:has(.ic-nav-row .elementor-menu-toggle.elementor-active) .ic-menu-cta {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 160;
    padding-bottom: calc(14px + env(safe-area-inset-bottom));
  }

  /* One set of actions, not two: the sticky bar carries the same pair, and it
     paints above the panel. */
  body:has(.ic-nav-row .elementor-menu-toggle.elementor-active) .ic-sticky-call-bar {
    display: none;
  }

  /* The CTA buttons are button widgets rather than linked containers, so they
     need to fill their wrapper the way the old containers did. */
  .ic-menu-cta .ic-cta-btn .elementor-button,
  .ic-sticky-call-bar .ic-cta-btn .elementor-button {
    width: 100%;
    justify-content: center;
  }

  /* A full-screen panel carries bigger touch rows than a dropdown did. */
  .ic-nav-row .elementor-menu-toggle.elementor-active + .elementor-nav-menu--dropdown a.elementor-item {
    padding: 15px 20px;
    font-size: 17px;
    font-weight: 500;
  }

  .ic-nav-row .elementor-menu-toggle.elementor-active + .elementor-nav-menu--dropdown a.elementor-sub-item {
    padding: 12px 20px 12px 36px;
    font-size: 15px;
  }

  /* The panel is absolutely positioned, so it needs to paint over the hero. */
  .elementor-location-header {
    position: relative;
    z-index: 100;
  }

  /* The utility bar's phone row is a 13px line of text, so its anchor is only
     15px tall - tappable in principle, awkward in practice. Grow the hit area to
     the full height of the bar without moving the text. The bar is 45px and the
     row sits centred in it, so 15px of bleed each way fills it exactly and stops
     short of the language pill on the right. */
  .elementor-location-header .elementor-icon-list-item {
    position: relative;
  }

  .elementor-location-header .elementor-icon-list-item > a::after {
    content: "";
    position: absolute;
    inset: -15px -8px;
  }

  /* Elementor's container width control never emitted the 38px set in
     build-header.php - the element keeps `--width: 100%`, and with the wrapper
     hugging its content that resolved to the icon's own 18px. Sized here
     instead so the button is the design's square rather than a thin oval. */
  .ic-nav-row .ic-mobile-call {
    --width: 38px;
    width: 38px;
    min-width: 38px;
  }

  /* 38px is the design's square. WCAG 2.5.8 asks for 44, so grow the hit area
     without changing the painted box.

     The toggle gets a transparent overlay; the call button instead stretches its
     own anchor, because an overlay there would sit on top of the link and
     swallow the tap it is meant to make easier. */
  .ic-nav-row .elementor-menu-toggle,
  .ic-nav-row .ic-mobile-call {
    position: relative;
  }

  .ic-nav-row .elementor-menu-toggle::after {
    content: "";
    position: absolute;
    inset: -3px;
  }

  /* Taking the anchor out of flow collapses the icon widget around it, and the
     widget is `position: relative` - so without these the anchor would size
     against a 0-wide containing block and land at 6x6. Static ancestors make
     `.ic-mobile-call` itself the containing block. */
  .ic-nav-row .ic-mobile-call .elementor-widget-icon,
  .ic-nav-row .ic-mobile-call .elementor-icon-wrapper {
    position: static;
  }

  .ic-nav-row .ic-mobile-call .elementor-icon {
    position: absolute;
    inset: -3px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
  }
}

/* Header offsets, and the rules that only make sense at one of the two widths.

   The block above is shared: below 1025px the menu is a burger and a full-screen
   panel at both tablet and phone. These differ. */

@media (max-width: 1024px) {
  :root {
    /* Utility bar 51 + nav row 84 at tablet. The nav row is shorter than the
       desktop 95 because the burger replaces the taller menu row. */
    --ic-header-h: 135px;
  }
}

@media (max-width: 767px) {
  :root {
    /* Utility bar 45 + nav row 73 at phone. */
    --ic-header-h: 118px;
  }

  /* The 24px row gap was sized for the desktop logo / menu / actions split. On
     a phone it is only the gap between two icons, which the design draws at 10.
     At tablet the row still carries the call block and Enquire button, so it
     keeps the wider gap. The logo's auto margin does the separating on the
     left, so this does not affect it. */
  .ic-nav-row > .e-con-inner {
    gap: 10px;
  }
}

/* Fixed width, never shrink - e.g. the hero copy column at 620px. */
.e-con.ic-nogrow {
  flex: 0 0 auto;
}

/* Take the remaining space in a row - e.g. the hero media panel. */
.e-con.ic-grow {
  --width: auto;
  flex: 1 1 auto;
  min-width: 0;
}

/* Keep a row a row on phones.

   Elementor's row preset hard-codes `--flex-wrap-mobile: wrap`, and an
   `ic-grow` column inside it has `flex-basis: auto` - so its base size is its
   max-content width, which never fits beside a sibling, and the row silently
   becomes one item per line. The tell is a "column" that measures the full
   content width of its parent rather than the space left over.

   `.ic-nav-row` above is the header's copy of this rule, kept separate because
   it also has to reach the container's own `.e-con-inner`. This is the general
   one, for any row that the design draws as a row at 390 too: the Thank You
   page's numbered steps and its "While You Wait" cards, which measured
   302px and 318px wide text columns against the frames' 260 and 241, three
   stacked lines each. */
.e-con.ic-row-nowrap {
  --flex-wrap-mobile: nowrap;
  flex-wrap: nowrap;
}

/* Share a row equally - the two buttons in the sticky mobile bar. Without this
   they inherit --width: 100% and wrap onto separate lines. */
.e-con.ic-split {
  --width: auto;
  flex: 1 1 0;
}

/* Fixed 360px brand column in the footer, per the design. */
.e-con.ic-footer-brand {
  flex: 0 0 360px;
}

@media (max-width: 1024px) {
  .e-con.ic-footer-brand {
    flex: 1 1 100%;
  }
}

/* design.pen's Button component pairs a 15px label with a 17px arrow. Elementor
   derives button icon size from the label, so set it explicitly. */
.ic-btn .elementor-button-icon svg,
.ic-btn .elementor-button-icon {
  width: 17px;
  height: 17px;
  font-size: 17px;
}

/* -----------------------------------------------------------------------------
   Icon + text vertical alignment

   Elementor's icon widget wraps its SVG in `.elementor-icon-wrapper`, which is
   plain block/inline-block layout. When that widget sits beside a heading
   widget in a row and both get stretched to the same height (the usual case
   for icon+label pairs across this design - trust strip, credential strips,
   contact rows, the utility bar's language switcher and NDIS badge), the SVG
   lands on the text baseline instead of centering in the box: browsers reserve
   descender space below the baseline even when no descender is present, which
   pushes the icon ~3-4px above the label it sits next to. Confirmed by measuring
   both centers directly (icon 768.77 vs label 772.27 in the trust strip) before
   applying this fix, and again after (0.5px apart).

   The `icon-list` widget used in the utility bar's phone/mobile/address items
   does not have this bug - it already centers its own icon with flex - so this
   rule only needed to target the icon widget specifically.
----------------------------------------------------------------------------- */
.elementor-icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}

.ic-language-switcher {
  cursor: pointer;
}

/* -----------------------------------------------------------------------------
   Tightly-stacked span headings (e.g. the header's "Talk to us" / phone number)

   header_size: 'span' renders an inline <span>. Two of them stacked in a
   column still sit in an inline formatting context, so each one's line box
   height comes from the "strut" of its container's inherited font metrics
   (Hello Elementor's body line-height, ~24px) - not from the smaller
   line-height set on the span's own typography control. That inflated each
   line to a 24px box regardless of its actual ~13-17px line-height, adding
   roughly 9px of invisible padding per line the design does not have.
   display: block drops the span out of that inline context so its box is
   sized by its own line-height alone. Confirmed live: container height
   48px -> 29.4px (= exactly the two lines' own line-heights, touching, no
   extra gap) - matching the design's zero-gap column.
----------------------------------------------------------------------------- */
.ic-stack-tight .elementor-heading-title {
  display: block;
}

/* -----------------------------------------------------------------------------
   Shared form chrome
   (Enquiry: design.pen U11TxU / form card e84pGc.
    Referral: design.pen rJsY4 / form card HeMKx.)

   The Elementor Pro form widget exposes controls for field colour, typography,
   border colour/width/radius, gaps and the submit button, and those are all set
   on the widget in scripts/build-enquiry.php and scripts/build-referral.php. It
   has no control at all for the things below, so they live here, scoped to the
   `ic-enquiry-form` / `ic-referral-form` CSS classes on those two widgets:

     - 48px input height and 16px inset (Elementor sizes inputs from its own
       `elementor-size-*` padding scale; none of the five steps is the design's
       48px box)
     - placeholder colour (#7A7A7A in the design, Elementor inherits the browser's)
     - the radio/checkbox option pills - the design draws each option as a
       bordered 9px-radius box, where Elementor renders a bare native control
       followed by a text label
     - the custom check mark, because a native control cannot be filled teal

   Specificity note: every rule here is at least three classes deep, which beats
   both Elementor's frontend stylesheet (`.elementor-field-textual.elementor-size-sm`,
   two classes) and the widget's own generated rules, so load order does not
   matter. `:is()` takes the specificity of its most specific argument, and both
   arguments are a single class, so widening the scope from one form to two left
   every weight in this block exactly as it was.
----------------------------------------------------------------------------- */

/* Inputs and selects: the design's 48px box with a 16px inset. */
:is(.ic-enquiry-form, .ic-referral-form) .elementor-field-group .elementor-field-textual,
:is(.ic-enquiry-form, .ic-referral-form) .elementor-field-group .elementor-select-wrapper select {
  min-height: 48px;
  padding: 0 16px;
}

/* Textarea is 120 tall with a 14/16 inset, and wraps at 1.6. */
:is(.ic-enquiry-form, .ic-referral-form) .elementor-field-type-textarea .elementor-field-textual {
  min-height: 120px;
  padding: 14px 16px;
  line-height: 1.6;
}

:is(.ic-enquiry-form, .ic-referral-form) .elementor-field-group .elementor-field-textual::placeholder {
  color: #7a7a7a;
  /* Firefox dims placeholders to 54% by default, which reads lighter than the design. */
  opacity: 1;
}

/* The select's own chevron. `field_border_color` drives this pseudo-element's
   colour as well as the border, so it has to be reset separately. */
:is(.ic-enquiry-form, .ic-referral-form) .elementor-field-group .elementor-select-wrapper::before {
  color: #7a7a7a;
  font-size: 17px;
}

/* A select has no placeholder control, so "Select a time" is the first option
   with an empty value. While that option is the one selected it should read as
   a placeholder (#7A7A7A), not as an answer (#333333). */
:is(.ic-enquiry-form, .ic-referral-form) .elementor-field-group .elementor-select-wrapper select:has(option[value=""]:checked) {
  color: #7a7a7a;
}

/* The required asterisk. Elementor's own rule paints it `red` at whatever weight
   the label carries; the design's is #D64545 at 700, set 5px off the label. */
:is(.ic-enquiry-form, .ic-referral-form) .elementor-field-group .elementor-field-label::after {
  font-weight: 700;
  padding-left: 5px;
}

/* -- Option pills ----------------------------------------------------------

   Acceptance fields render through the same `.elementor-field-subgroup` wrapper
   as radios and checkboxes but are a paragraph of consent copy, not a pill, so
   they are excluded here and styled on their own below. */

:is(.ic-enquiry-form, .ic-referral-form) .elementor-field-group:not(.elementor-field-type-acceptance) .elementor-field-subgroup {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

:is(.ic-enquiry-form, .ic-referral-form) .elementor-field-group:not(.elementor-field-type-acceptance) .elementor-field-option {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 16px;
  background-color: #ffffff;
  border: 1.5px solid #e4e7e7;
  border-radius: 9px;
  cursor: pointer;
}

:is(.ic-enquiry-form, .ic-referral-form) .elementor-field-group:not(.elementor-field-type-acceptance) .elementor-field-option:has(input:checked) {
  background-color: #f0fbfa;
  border-color: #00b5a5;
}

:is(.ic-enquiry-form, .ic-referral-form) .elementor-field-group:not(.elementor-field-type-acceptance) .elementor-field-option label {
  margin: 0;
  cursor: pointer;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
}

/* -- The box itself --------------------------------------------------------

   Native radios and checkboxes cannot be filled teal, so they are reset to a
   blank 17px box and redrawn. `appearance: none` also removes the focus ring,
   which is put back explicitly below - a form is the one place on this site
   where keyboard focus must stay visible. */

:is(.ic-enquiry-form, .ic-referral-form) .elementor-field-subgroup input[type="radio"],
:is(.ic-enquiry-form, .ic-referral-form) .elementor-field-subgroup input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 17px;
  width: 17px;
  height: 17px;
  margin: 0;
  background-color: #ffffff;
  border: 1.5px solid #e4e7e7;
  display: grid;
  place-content: center;
}

:is(.ic-enquiry-form, .ic-referral-form) .elementor-field-subgroup input[type="radio"] {
  border-radius: 9px;
}

:is(.ic-enquiry-form, .ic-referral-form) .elementor-field-subgroup input[type="checkbox"] {
  border-radius: 5px;
}

:is(.ic-enquiry-form, .ic-referral-form) .elementor-field-subgroup input[type="radio"]:checked,
:is(.ic-enquiry-form, .ic-referral-form) .elementor-field-subgroup input[type="checkbox"]:checked {
  background-color: #00b5a5;
  border-color: #00b5a5;
}

/* The design's 11px white tick, drawn from two borders rather than an icon font
   so it needs no extra request and scales with the box. */
:is(.ic-enquiry-form, .ic-referral-form) .elementor-field-subgroup input[type="radio"]:checked::before,
:is(.ic-enquiry-form, .ic-referral-form) .elementor-field-subgroup input[type="checkbox"]:checked::before {
  content: "";
  width: 4px;
  height: 8px;
  border: solid #ffffff;
  border-width: 0 2px 2px 0;
  transform: translateY(-1px) rotate(45deg);
}

:is(.ic-enquiry-form, .ic-referral-form) .elementor-field-subgroup input:focus-visible {
  outline: 2px solid #008f82;
  outline-offset: 2px;
}

/* The acceptance control is the one input inside `.elementor-field-subgroup`
   that Elementor also tags `.elementor-field`, so the widget's own
   `field_background_color`, `field_border_color` and `field_border_radius`
   rules reach it - at `{{WRAPPER}} .elementor-field-group .elementor-field`
   weight, which is four classes plus a `:not()` and beats every rule above.

   Left alone the consequence is not cosmetic: a ticked consent box keeps the
   widget's white fill, and the white tick drawn above is then invisible on it.
   The visitor gets no confirmation that the one mandatory agreement on the form
   registered. Both forms were shipping that until this rule was added; the
   radius went the same way (9px from the widget, where the design draws 5).

   `!important` because out-specifying the widget means naming its generated
   element id, which changes on every rebuild of the page. */

:is(.ic-enquiry-form, .ic-referral-form) .elementor-field-group.elementor-field-type-acceptance input[type="checkbox"] {
  border-radius: 5px !important;
}

:is(.ic-enquiry-form, .ic-referral-form) .elementor-field-group.elementor-field-type-acceptance input[type="checkbox"]:checked {
  background-color: #00b5a5 !important;
  border-color: #00b5a5 !important;
}

/* -- Consent line ----------------------------------------------------------

   The `.elementor-field-group` qualifier is load-bearing, not decoration. The
   widget's own `field_typography` rule targets `.elementor-field-subgroup label`
   under a wrapper Elementor expands to several classes; matching it needs four
   classes plus the element. The pill rules above clear that bar because
   `:not(.elementor-field-type-acceptance)` counts its argument towards
   specificity - these rules have no `:not()` to lean on, so they name the group
   class explicitly instead. Without it the consent line silently keeps the
   widget's 14.5px/#333333 field type rather than the design's 13.5px/#555555. */

:is(.ic-enquiry-form, .ic-referral-form) .elementor-field-group.elementor-field-type-acceptance .elementor-field-subgroup {
  padding-top: 4px;
}

:is(.ic-enquiry-form, .ic-referral-form) .elementor-field-group.elementor-field-type-acceptance .elementor-field-option {
  display: flex;
  align-items: flex-start;
  gap: 11px;
}

:is(.ic-enquiry-form, .ic-referral-form) .elementor-field-group.elementor-field-type-acceptance input[type="checkbox"] {
  flex: 0 0 19px;
  width: 19px;
  height: 19px;
  /* Nudge onto the first line's cap height rather than its box top. */
  margin-top: 2px;
}

:is(.ic-enquiry-form, .ic-referral-form) .elementor-field-group.elementor-field-type-acceptance .elementor-field-option label {
  margin: 0;
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.6;
  color: #555555;
}

/* -- Submit button ---------------------------------------------------------

   Same problem as `.ic-btn`: Elementor derives the button's icon size from its
   label, and the design pairs a 16px label with an 18px arrow. */
:is(.ic-enquiry-form, .ic-referral-form) .elementor-button .elementor-button-icon,
:is(.ic-enquiry-form, .ic-referral-form) .elementor-button .elementor-button-icon svg {
  width: 18px;
  height: 18px;
  font-size: 18px;
}

/* -----------------------------------------------------------------------------
   Referral form (design.pen frame rJsY4 / EHozO, form card HeMKx / bjCYK)

   Everything above is shared with the Enquiry form. This block is the parts of
   the referral form that have no equivalent there, all of which exist because
   the design puts non-field content *between* fields - and an Elementor Pro
   form renders one flat list of field groups with no way to nest or interleave
   widgets.

   The mechanism throughout is the widget's own `html` field type: it is a real
   field group in the flow, so it inherits the form's row rhythm for free, and
   it is the only way to get a rule, a section heading or a drop zone to sit
   between two inputs of the same form.

   Field groups are addressed by `elementor-field-group-{custom_id}`, which
   Elementor puts on every group itself, NOT by the repeater's `css_classes`
   control - that one lands on the field's `input`, so it renders nowhere at all
   for an `html` field. The `custom_id`s are set in scripts/build-referral.php;
   renaming one there means renaming it here.
----------------------------------------------------------------------------- */

/* -- Numbered section headers ---------------------------------------------

   Five of these split the form into the design's numbered sections. The 1px
   rule above each one is part of the same html field rather than a field of
   its own, so the 28px above it is the rule's own margin and the 28px below
   the heading is the form's row gap - which is exactly the design's rhythm. */

.ic-referral-form .ic-formrule {
  height: 1px;
  margin: 0 0 28px;
  border: 0;
  background-color: #e4e7e7;
}

.ic-referral-form .ic-formsec {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ic-referral-form .ic-formsec-num {
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  display: grid;
  place-content: center;
  border-radius: 50%;
  background-color: #00b5a5;
  color: #ffffff;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1;
}

.ic-referral-form .ic-formsec-title {
  font-size: 17px;
  font-weight: 700;
  color: #1a1a1a;
  line-height: 1.3;
}

/* The design's referral textareas are 110 tall, not the 120 the enquiry form
   uses, and there are three of them in a row - the difference is visible. */
.ic-referral-form .elementor-field-type-textarea .elementor-field-textual {
  min-height: 110px;
}

/* The supports group sets its label 10px off the pills, where every text field
   in the same form sets it 8px off the input. `label_spacing` is one control
   for the whole widget, so the 2px lives here.

   `!important` rather than a longer selector: label_spacing generates
   `body {{WRAPPER}} .elementor-labels-above .elementor-field-group > label`,
   and {{WRAPPER}} alone expands to three classes (compare/README.md), so
   out-specifying it would take a six-class selector to move one label 2px. */
.ic-referral-form .elementor-field-group-supports > label {
  padding-bottom: 10px !important;
}

/* -- Consent box -----------------------------------------------------------

   One box in the design, two field groups here: an `acceptance` control renders
   its text inside the checkbox's own label, so a second paragraph placed there
   would be indented under the tick rather than starting at the box's padding
   edge. Splitting it into the acceptance field plus an html note and drawing
   them as the top and bottom halves of one box keeps the design's alignment and
   keeps the consent statement - the part being agreed to - as the whole of the
   label.

   `row_gap` is applied as `margin-bottom` on every field group, so zeroing it
   on the top half is what makes the two halves meet.

   The four `!important`s are load-bearing, not laziness. Elementor writes two
   rules that would otherwise flatten this box, both at `{{WRAPPER}}` weight
   (four classes - see compare/README.md) and both in the per-page stylesheet
   that loads after this one:
     - `column_gap` puts `padding-left/right: calc(8px)` on every field group,
       which would leave the consent copy 8px from the tint's edge instead of 22
     - the HTML Field section puts `padding-bottom: 0` on every
       `.elementor-field-type-html`, which would collapse the bottom of the box
       onto the note's last line
   Out-specifying either would take a five-class selector built out of the
   widget's generated element id, which changes on every rebuild. */

.ic-referral-form .elementor-field-group-consent {
  margin-bottom: 0 !important;
  padding: 22px 22px 0 !important;
  background-color: #f0fbfa;
  border: 1px solid #e0f8f5;
  border-bottom: 0;
  border-radius: 12px 12px 0 0;
}

.ic-referral-form .elementor-field-group-consent_note {
  padding: 12px 22px 22px !important;
  background-color: #f0fbfa;
  border: 1px solid #e0f8f5;
  border-top: 0;
  border-radius: 0 0 12px 12px;
}

/* The consent tick is teal-outlined in the design, unlike every other box on
   the page, because it is the one the visitor has to make a decision about. */
.ic-referral-form .elementor-field-group.elementor-field-group-consent input[type="checkbox"] {
  /* Same override battle as the acceptance rules in the shared block above -
     the widget paints this one #E4E7E7 from `field_border_color`. */
  border-color: #00b5a5 !important;
}

/* The shared block already sizes the acceptance label at 13.5/1.6; the design
   sets this one at 600 rather than 400 - it is a statement being agreed to,
   not supporting copy. That distinction is the whole point of the two weights,
   so it is worth the override. */
.ic-referral-form .elementor-field-group.elementor-field-group-consent .elementor-field-option label {
  font-weight: 600;
  color: #333333;
}

.ic-referral-form .ic-consent-note {
  margin: 0;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.6;
  color: #555555;
}

/* -- Upload drop zone ------------------------------------------------------

   Elementor's upload field renders a bare `<input type="file">` with no wrapper
   and no pseudo-element support (it is a replaced element), so the design's
   104px zone with an icon and two lines cannot be drawn on the input itself.

   The input is instead stretched to the zone's size and made transparent, and
   an html field immediately after it is pulled back up underneath by exactly
   the input's height to supply the visuals. The real input stays on top and
   keeps everything that matters: click to browse, keyboard focus, and native
   drag-and-drop onto the zone. If the html field were ever removed the field
   still works - it just looks like a default file input again. */

.ic-referral-form .elementor-field-group-documents {
  position: relative;
  z-index: 2;
  margin-bottom: 0 !important;
}

.ic-referral-form .elementor-field-group-documents input[type="file"] {
  display: block;
  width: 100%;
  height: 104px;
  opacity: 0;
  cursor: pointer;
}

.ic-referral-form .elementor-field-group-documents_zone {
  position: relative;
  z-index: 1;
  margin-top: -104px;
  pointer-events: none;
}

.ic-referral-form .ic-dropzone {
  height: 104px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 16px;
  background-color: #ffffff;
  border: 1.5px solid #e4e7e7;
  border-radius: 9px;
  text-align: center;
}

.ic-referral-form .ic-dropzone-icon {
  font-size: 22px;
  color: #7a7a7a;
}

.ic-referral-form .ic-dropzone-lead {
  font-size: 14px;
  font-weight: 600;
  color: #333333;
}

.ic-referral-form .ic-dropzone-hint {
  font-size: 12.5px;
  font-weight: 400;
  color: #7a7a7a;
}

/* The file input carries no visible box of its own, so its focus ring has to be
   drawn on the zone the visitor can actually see. */
.ic-referral-form .elementor-field-group-documents:has(input:focus-visible) + .elementor-field-group-documents_zone .ic-dropzone {
  outline: 2px solid #008f82;
  outline-offset: 2px;
}

/* Set by assets/js/forms.js once files are chosen, so the zone confirms what it
   is holding instead of staying on "Drag files here". */
.ic-referral-form .ic-dropzone.is-filled {
  background-color: #f0fbfa;
  border-color: #00b5a5;
}

.ic-referral-form .ic-dropzone.is-filled .ic-dropzone-icon {
  color: #008f82;
}

/* The drop zone is the one place the design words itself differently by size
   ("Drag files here, or browse" vs "Tap to attach files"), which a single
   widget cannot express - so both strings ship and the breakpoint picks one. */
.ic-referral-form .ic-dz-mobile {
  display: none;
}

@media (max-width: 767px) {
  .ic-referral-form .ic-dz-desktop {
    display: none;
  }

  .ic-referral-form .ic-dz-mobile {
    display: inline;
  }

  .ic-referral-form .ic-formrule {
    margin-bottom: 20px;
  }

  .ic-referral-form .ic-formsec {
    gap: 10px;
  }

  .ic-referral-form .ic-formsec-num {
    flex-basis: 24px;
    width: 24px;
    height: 24px;
    font-size: 11.5px;
  }

  .ic-referral-form .ic-formsec-title {
    font-size: 16px;
  }

  .ic-referral-form .elementor-field-group .elementor-field-textual,
  .ic-referral-form .elementor-field-group .elementor-select-wrapper select {
    padding: 0 15px;
  }

  .ic-referral-form .elementor-field-type-textarea .elementor-field-textual {
    min-height: 104px;
    padding: 13px 15px;
  }

  /* The design stacks the support options full width on mobile rather than
     letting eight pills wrap into ragged rows. */
  .ic-referral-form .elementor-field-group:not(.elementor-field-type-acceptance) .elementor-field-subgroup {
    flex-direction: column;
    gap: 8px;
  }

  .ic-referral-form .elementor-field-group:not(.elementor-field-type-acceptance) .elementor-field-option {
    width: 100%;
    padding: 13px 15px;
  }

  .ic-referral-form .elementor-field-group:not(.elementor-field-type-acceptance) .elementor-field-option label {
    font-size: 13.5px;
  }

  .ic-referral-form .elementor-field-group-supports > label {
    padding-bottom: 9px !important;
  }

  .ic-referral-form .elementor-field-group-consent {
    padding: 20px 20px 0 !important;
    border-radius: 11px 11px 0 0;
  }

  .ic-referral-form .elementor-field-group-consent_note {
    padding: 11px 20px 20px !important;
    border-radius: 0 0 11px 11px;
  }

  .ic-referral-form .elementor-field-group.elementor-field-group-consent .elementor-field-option label {
    font-size: 13px;
  }

  .ic-referral-form .ic-consent-note {
    font-size: 12.5px;
  }

  .ic-referral-form .elementor-field-group-documents input[type="file"] {
    height: 96px;
  }

  .ic-referral-form .elementor-field-group-documents_zone {
    margin-top: -96px;
  }

  .ic-referral-form .ic-dropzone {
    height: 96px;
    gap: 6px;
  }

  .ic-referral-form .ic-dropzone-icon {
    font-size: 20px;
  }

  .ic-referral-form .ic-dropzone-lead {
    font-size: 13.5px;
  }

  .ic-referral-form .ic-dropzone-hint {
    font-size: 12px;
  }

  .ic-referral-form .elementor-button .elementor-button-icon,
  .ic-referral-form .elementor-button .elementor-button-icon svg {
    width: 17px;
    height: 17px;
    font-size: 17px;
  }
}

/* -----------------------------------------------------------------------------
   Suburb template (design.pen VbAhm desktop / RlE4M mobile)
   scripts/build-suburb-template.php
----------------------------------------------------------------------------- */

/* Hero photo fills its 460x340 rounded panel. The image widget renders an
   <img> at its natural aspect ratio, which letterboxes inside a fixed-height
   container; the panel sets overflow:hidden so the crop stays inside the
   16px radius. */
.ic-cover-img,
.ic-cover-img .elementor-widget-container,
.ic-cover-img figure,
.ic-cover-img img {
  width: 100%;
  height: 100%;
  display: block;
}

.ic-cover-img img {
  object-fit: cover;
}

/* Nearby-suburb chips sit two per row and hug their label. Without an explicit
   basis they inherit --width: 100% from Elementor and the second chip in each
   row wraps onto its own line. */
.e-con.ic-chip {
  --width: auto;
  flex: 0 1 auto;
  min-width: 0;
}

/* "Other areas we cover" links: plain body text in the design, teal on hover.
   The heading widget renders the link inside .elementor-heading-title, so the
   colour has to be set on the anchor rather than the widget's title_color. */
.ic-area-link .elementor-heading-title a {
  color: inherit;
  text-decoration: none;
}

.ic-area-link .elementor-heading-title a:hover,
.ic-area-link .elementor-heading-title a:focus-visible {
  color: #008F82;
  text-decoration: underline;
}

/* -----------------------------------------------------------------------------
   Blog archive (design.pen Dv7tP desktop 1440 / h0fmKx mobile 390)
   scripts/build-blog-archive.php + inc/blog-archive.php

   The Elementor template owns the hero, the section bands and the closing CTA.
   The query-driven parts - chips, featured card, grid, pagination - are
   shortcodes, so their type and spacing live here rather than in widget
   controls. Every value below is read from the two frames, not assumed.
----------------------------------------------------------------------------- */

/* Section backgrounds are inverted between the two frames: on desktop the
   Featured band is white over a surface Latest band, on mobile it is surface
   over white. Elementor's background_color control is not responsive, so both
   bands are left transparent in the template and coloured here. Two classes
   beat the single .elementor-element-{id} rule Elementor would otherwise emit. */
.e-con.ic-blog-featured-band { background-color: var(--ic-white); }
.e-con.ic-blog-latest-band   { background-color: var(--ic-surface); }

/* No featured post: page 2+, a category archive, a search. The band carries 72px
   of padding and its own background, so an empty one reads as a broken gap. */
body.ic-no-featured .ic-blog-featured-band { display: none; }

/* --- Hero ----------------------------------------------------------------- */

.ic-crumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  line-height: 1;
  color: var(--ic-muted);
}

.ic-crumbs a {
  color: var(--ic-muted);
  text-decoration: none;
}

.ic-crumbs a:hover { text-decoration: underline; }

.ic-crumbs [aria-current="page"] {
  color: var(--ic-teal-deep);
  font-weight: 600;
}

.ic-crumb-sep {
  flex: 0 0 auto;
  color: var(--ic-muted);
}

.ic-blog-title {
  max-width: 900px;
  margin: 0;
  color: var(--ic-ink);
  font-size: 44px;
  font-weight: 700;
  letter-spacing: -1.1px;
  line-height: 1.16;
}

.ic-blog-intro {
  max-width: 840px;
  margin: 0;
  color: var(--ic-body);
  font-size: 16.5px;
  font-weight: 400;
  line-height: 1.65;
}

/* Search: 560x52 panel, 1.5px border, icon then field. The input is stripped of
   its own chrome so the panel itself reads as the control. */
.ic-blog-search {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 560px;
  max-width: 100%;
  height: 52px;
  padding: 0 18px;
  background: var(--ic-white);
  border: 1.5px solid var(--ic-line);
  border-radius: var(--ic-radius-sm);
}

.ic-blog-search__icon {
  flex: 0 0 auto;
  color: var(--ic-muted);
}

.ic-blog-search input[type="search"] {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ic-ink);
  font-family: var(--ic-font);
  font-size: 14.5px;
  font-weight: 400;
}

.ic-blog-search input[type="search"]::placeholder {
  color: var(--ic-muted);
  opacity: 1;
}

.ic-blog-search input[type="search"]:focus { outline: none; }

.ic-blog-search:focus-within {
  border-color: var(--ic-teal);
  outline: 3px solid var(--ic-teal-deep);
  outline-offset: 2px;
}

/* --- Category chips ------------------------------------------------------- */

.ic-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

/* Scoped to an anchor throughout: the Suburb template already owns .ic-chip as
   an Elementor container class (.e-con.ic-chip above), and the two must not
   collide. */
a.ic-chip {
  display: inline-flex;
  align-items: center;
  padding: 10px 18px;
  border: 1.5px solid var(--ic-line);
  border-radius: var(--ic-radius-pill);
  background: var(--ic-white);
  color: var(--ic-ink-2);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
}

a.ic-chip:hover {
  border-color: var(--ic-teal);
  color: var(--ic-teal-deep);
}

a.ic-chip.is-active {
  background: var(--ic-teal);
  border-color: var(--ic-teal);
  color: var(--ic-white);
}

/* --- Service Areas region filter ----------------------------------------- *
   inc/area-archive.php renders the row, assets/js/area-filter.js drives it.

   The chips above are scoped to `a.ic-chip` because the Suburb template owns
   `.ic-chip` as an Elementor container class. These are <button>s, so they
   need their own selector rather than widening that one and colliding with
   the container. Same visual, different element. */
button.ic-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 18px;
  border: 1.5px solid var(--ic-line);
  border-radius: var(--ic-radius-pill);
  background: var(--ic-white);
  color: var(--ic-ink-2);
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
}

button.ic-chip:hover {
  border-color: var(--ic-teal);
  color: var(--ic-teal-deep);
}

button.ic-chip.is-active {
  background: var(--ic-teal);
  border-color: var(--ic-teal);
  color: var(--ic-white);
}

/* The count rides inside the chip, so it has to invert with it. */
.ic-chip__n {
  opacity: 0.6;
  font-variant-numeric: tabular-nums;
}

.ic-area-filter {
  margin-bottom: 4px;
}

/* The live region is for screen readers; the chips themselves show the state
   visually, so this would only repeat it. */
.ic-area-filter__status {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --- Shared card meta row ------------------------------------------------- */

.ic-post-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.ic-post-card__cat {
  padding: 5px 10px;
  border-radius: 5px;
  background: var(--ic-teal-tint-2);
  color: var(--ic-teal-deep);
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1;
}

.ic-post-card__date,
.ic-post-card__read {
  color: var(--ic-muted);
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1;
}

.ic-post-card__dot {
  width: 3px;
  height: 3px;
  border-radius: 2px;
  background: var(--ic-muted);
}

/* --- Featured card -------------------------------------------------------- */

.ic-featured {
  display: flex;
  align-items: stretch;
  background: var(--ic-surface);
  border: 1px solid var(--ic-line);
  border-radius: 16px;
  overflow: hidden;
}

/* 620x360 in the frame. Positioned rather than sized so the <img> has a
   definite box to cover: the panel is a stretched flex item, and an img at
   height:100% inside an auto-height stretched parent resolves inconsistently. */
.ic-featured > .ic-post-card__img {
  position: relative;
  flex: 0 0 620px;
  width: 620px;
  height: auto;
  min-height: 360px;
}

.ic-featured > .ic-post-card__img img {
  position: absolute;
  inset: 0;
}

.ic-featured__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  flex: 1 1 auto;
  min-width: 0;
  padding: 44px;
}

.ic-featured__tag {
  align-self: flex-start;
  padding: 6px 11px;
  border-radius: 5px;
  background: var(--ic-teal);
  color: var(--ic-white);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.8px;
  line-height: 1;
}

.ic-featured__title {
  margin: 0;
  color: var(--ic-ink);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.7px;
  line-height: 1.25;
}

.ic-featured__title a {
  color: inherit;
  text-decoration: none;
}

.ic-featured__title a:hover { text-decoration: underline; }

.ic-featured__excerpt {
  margin: 0;
  color: var(--ic-body);
  font-size: 15.5px;
  font-weight: 400;
  line-height: 1.7;
}

/* Matches ic_button() and the Button component in design.pen: 16/32 padding,
   radius 8, 15px 600 label, 17px arrow. A span rather than a link because the
   title above already points at the same post - see ic_blog_sc_featured(). */
.ic-featured__cta {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 10px;
  margin-top: 6px;
  padding: 16px 32px;
  border-radius: 8px;
  background: var(--ic-teal);
  color: var(--ic-white);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
}

/* --- Post grid ------------------------------------------------------------ */

/* The frame stores the grid as two Row frames inside a 36px-gap column, each
   row a 20px-gap flex row - so the vertical gap between rows is 36 and the
   horizontal gap between cards is 20. One grid with an asymmetric gap is the
   same thing without the intermediate wrappers, and it reflows on its own when
   the post count is not a multiple of three. */
.ic-post-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 36px 20px;
}

.ic-post-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--ic-white);
  border: 1px solid var(--ic-line);
  border-radius: 14px;
  overflow: hidden;
}

.ic-post-card__img {
  flex: 0 0 auto;
  height: 180px;
  background: var(--ic-teal-tint-2);
}

.ic-post-card__img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ic-post-card__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
}

.ic-post-card__title {
  margin: 0;
  color: var(--ic-ink);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.35;
}

.ic-post-card__title a {
  color: inherit;
  text-decoration: none;
}

/* Whole card clickable, one link in the tab order. */
.ic-post-card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.ic-post-card:hover .ic-post-card__title { color: var(--ic-teal-deep); }

/* The focus ring belongs on the card, not on the title text: the link box is
   the title but the click target is the whole card. */
.ic-post-card__title a:focus-visible { outline: none; }

.ic-post-card:has(.ic-post-card__title a:focus-visible) {
  outline: 3px solid var(--ic-teal-deep);
  outline-offset: 2px;
}

.ic-post-card__excerpt {
  margin: 0;
  color: var(--ic-body);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
}

.ic-post-card__more {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 4px;
  color: var(--ic-teal-deep);
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1;
}

.ic-blog-empty {
  margin: 0;
  color: var(--ic-body);
  font-size: 16px;
  line-height: 1.65;
}

/* --- Latest heading row --------------------------------------------------- */

.ic-blog-count {
  color: var(--ic-muted);
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
}

/* --- Pagination ----------------------------------------------------------- */

.ic-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
}

.ic-page {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  border: 1.5px solid var(--ic-line);
  border-radius: 8px;
  background: var(--ic-white);
  color: var(--ic-ink-2);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
}

a.ic-page:hover {
  border-color: var(--ic-teal);
  color: var(--ic-teal-deep);
}

.ic-page.is-current {
  background: var(--ic-teal);
  border-color: var(--ic-teal);
  color: var(--ic-white);
  font-weight: 700;
}

/* The design draws the previous arrow muted and the next arrow in ink: on page
   one, previous is the unavailable direction. */
.ic-page--prev { color: var(--ic-muted); }

/* Stand-ins for the ends paginate_links() omits - see ic_blog_sc_pagination().
   Not a link, so no hover and no pointer. */
.ic-page.is-disabled {
  color: var(--ic-muted);
  cursor: default;
}

.ic-page--dots {
  border-color: transparent;
  background: none;
  color: var(--ic-muted);
}

/* --- Tablet --------------------------------------------------------------- */

@media (max-width: 1024px) {
  .ic-post-grid { grid-template-columns: repeat(2, 1fr); }

  .ic-featured { flex-direction: column; }

  .ic-featured > .ic-post-card__img {
    flex: 0 0 auto;
    width: 100%;
    min-height: 0;
    height: 260px;
  }

  .ic-featured__body { padding: 32px; }
}

/* --- Mobile 390 ----------------------------------------------------------- */

@media (max-width: 767px) {
  .e-con.ic-blog-featured-band { background-color: var(--ic-surface); }
  .e-con.ic-blog-latest-band   { background-color: var(--ic-white); }

  .ic-crumbs {
    gap: 6px;
    font-size: 11.5px;
  }

  .ic-crumb-sep {
    width: 12px;
    height: 12px;
  }

  .ic-blog-title {
    font-size: 32px;
    letter-spacing: -0.9px;
    line-height: 1.18;
  }

  .ic-blog-intro { font-size: 15px; }

  .ic-blog-search {
    width: 100%;
    height: 50px;
    gap: 10px;
    padding: 0 16px;
  }

  .ic-blog-search__icon {
    width: 17px;
    height: 17px;
  }

  .ic-blog-search input[type="search"] { font-size: 14px; }

  .ic-chips { gap: 9px 8px; }

  a.ic-chip { padding: 9px 15px; }

  .ic-post-card__meta { gap: 9px; }

  .ic-post-card__cat { font-size: 11px; }

  .ic-post-card__date,
  .ic-post-card__read { font-size: 11.5px; }

  .ic-featured {
    background: var(--ic-white);
    border-radius: 14px;
  }

  .ic-featured > .ic-post-card__img { height: 200px; }

  .ic-featured__body {
    gap: 12px;
    padding: 22px;
  }

  .ic-featured__tag {
    padding: 5px 10px;
    font-size: 10.5px;
    letter-spacing: 0.7px;
  }

  .ic-featured__title {
    font-size: 21px;
    letter-spacing: -0.5px;
    line-height: 1.3;
  }

  .ic-featured__excerpt {
    font-size: 14px;
    line-height: 1.65;
  }

  /* Full-width button, 15px 700 label, 16px arrow - the mobile frame b1. */
  .ic-featured__cta {
    justify-content: center;
    align-self: stretch;
    gap: 9px;
    margin-top: 0;
    padding: 15px 0;
    border-radius: var(--ic-radius-sm);
    font-size: 15px;
    font-weight: 700;
  }

  .ic-featured__cta .ic-arrow {
    width: 16px;
    height: 16px;
  }

  .ic-post-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .ic-post-card { border-radius: 12px; }

  .ic-post-card__img { height: 170px; }

  .ic-post-card__body {
    gap: 10px;
    padding: 20px;
  }

  .ic-post-card__title { font-size: 17px; }

  .ic-post-card__excerpt { font-size: 13.5px; }

  .ic-post-card__more {
    gap: 6px;
    font-size: 13px;
  }

  .ic-blog-count { font-size: 13px; }

  .ic-pagination { margin-top: 0; }

  .ic-page {
    width: 38px;
    height: 38px;
    font-size: 13.5px;
  }

  .ic-page svg {
    width: 16px;
    height: 16px;
  }
}

/* -----------------------------------------------------------------------------
   Blog post - single (design.pen n456U desktop 1440 / s0OHy mobile 390)
   scripts/build-single-post.php + inc/blog-single.php

   The Elementor template owns the bands and the two-column body row. Two kinds
   of thing land here instead:

   1. The article body. `theme-post-content` renders the_content() and its only
      controls are align / colour / typography on the wrapper, so every h2,
      list, blockquote, callout and takeaway value from the frame has to be CSS.
      There is no widget-level alternative - the body is authored HTML.
   2. The shortcode blocks from inc/blog-single.php, whose type and spacing
      cannot live in widget controls for the same reason as the archive's.

   Every value below is read from the two frames. Where the two disagree the
   mobile value is in the @media block at the end of this section, never guessed
   from the desktop one.
----------------------------------------------------------------------------- */

/* --- Article header ------------------------------------------------------- */

/* The frame caps the H1 at 1000 and the standfirst at 900 against a 1280 inner
   width. Per compare/README.md the heading widget has no width control at all -
   a raw 'width' setting is dropped in silence - so both caps are max-widths. */
.ic-article-h1 .elementor-heading-title { max-width: 1000px; }

/* Elementor caps every widget inside a container with
   `.elementor.elementor .e-con > .elementor-widget` - four classes, escalated on
   purpose - so the frame's 900px standfirst cap has to out-specify it, not just
   load after it. A bare `.ic-article-standfirst` is one class and loses in
   silence: the standfirst renders the full 1280 and only reads as slightly wide.
   The H1 above escapes this because it caps `.elementor-heading-title`, an inner
   element Elementor does not touch. The excerpt widget renders its text as a
   bare text node with no inner element to aim at, so the widget itself is the
   only target.

   Note the descendant combinator. Elementor writes the cap as two branches, one
   for a widget directly inside `.e-con` and one for a widget inside the
   `.e-con-inner` of a boxed container. This band is boxed, so the widget's
   parent is `.e-con-inner` and a `> .elementor-widget` selector matches nothing
   at all. */
.elementor.elementor .e-con .elementor-widget.ic-article-standfirst {
  max-width: 900px;
}

/* The header's pill is 6/11, a touch larger than the 5/10 the cards use, so it
   cannot reuse .ic-post-card__cat. */
.ic-post-tag {
  display: inline-flex;
  align-items: center;
  padding: 6px 11px;
  border-radius: 5px;
  background: var(--ic-teal-tint-2);
  color: var(--ic-teal-deep);
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
}

.ic-post-tag:hover { background: #CFF3EE; }

/* Round initials avatar, shared by the byline and the author box. Both sizes
   change between the frames (byline 44/15 -> 40/14, author box 72/24 -> 56/19),
   so they are custom properties set per context here rather than inline styles
   from PHP - an inline style outranks the mobile rule and would pin both to
   their desktop size. */
.ic-byline .ic-avatar {
  --ic-avatar-size: 44px;
  --ic-avatar-font: 15px;
}

.ic-author .ic-avatar {
  --ic-avatar-size: 72px;
  --ic-avatar-font: 24px;
}

.ic-avatar {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: var(--ic-avatar-size, 44px);
  height: var(--ic-avatar-size, 44px);
  border-radius: 50%;
  background: var(--ic-teal);
  color: var(--ic-white);
  font-size: var(--ic-avatar-font, 15px);
  font-weight: 700;
  line-height: 1;
}

.ic-byline {
  display: flex;
  align-items: center;
  gap: 14px;
  /* The Byline frame carries 8px of its own top padding on top of the band's
     18px gap, so it sits further from the standfirst than the rows above it
     sit from each other. */
  padding-top: 8px;
}

.ic-byline__who {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.ic-byline__name {
  color: var(--ic-ink);
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.4;
}

.ic-byline__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  color: var(--ic-muted);
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.5;
}

/* --- Hero image ----------------------------------------------------------- */

/* 1280x420 desktop, 350x220 mobile. The widget has no height control and the
   column is fluid, so the frame's proportions are held as an aspect ratio. */
.ic-hero-img img {
  display: block;
  width: 100%;
  aspect-ratio: 1280 / 420;
  object-fit: cover;
}

.ic-hero-caption {
  margin: 0;
  color: var(--ic-muted);
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.5;
}

/* No featured image: hide the band rather than let it render 420px of empty
   panel plus 44px of padding. Same mechanism as the archive's ic-no-featured. */
body.ic-no-hero .ic-hero-band { display: none; }

/* Under two headings there is no contents list worth showing, and an empty
   bordered card reads as a broken component. */
body.ic-no-toc .ic-toc-band { display: none; }

/* --- Article body --------------------------------------------------------- */

/* Flow spacing. The frame's Body column is a 20px-gap flex column, and the h2
   and disclaimer frames carry their own top padding on top of that gap - so an
   h2 sits 20 + 14 = 34px below whatever precedes it, not 20. */
.ic-article-body > *,
.ic-article-body > .elementor-widget-container > * { margin: 0; }

.ic-article-body > * + *,
.ic-article-body > .elementor-widget-container > * + * { margin-top: 20px; }

.ic-article-body > h2,
.ic-article-body > .elementor-widget-container > h2 { margin-top: 34px; }

/* The lead paragraph is a size and a weight up from body copy, and darker. */
.ic-article-body > p:first-child,
.ic-article-body > .elementor-widget-container > p:first-child {
  color: var(--ic-ink-2);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.75;
}

.ic-article-body p {
  color: var(--ic-body);
  font-size: 16.5px;
  font-weight: 400;
  line-height: 1.75;
}

.ic-article-body h2 {
  color: var(--ic-ink);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.6px;
  line-height: 1.3;
  /* Anchor targets from the contents list; without this a heading lands hard
     against the top of the viewport. */
  scroll-margin-top: 24px;
}

/* --- Legal / compliance pages -------------------------------------------- *
   scripts/build-legal-pages.php. These are the only pages whose prose carries
   inline links, so without this they render in the browser's default blue-
   magenta - the same tell the unstyled archive had. Matches the article body
   rather than inventing a third link style. */
.ic-legal a {
  color: var(--ic-teal-deep);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.ic-legal a:hover {
  color: var(--ic-teal);
}

.ic-article-body a {
  color: var(--ic-teal-deep);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.ic-article-body a:hover { color: var(--ic-teal); }

/* Lists. Both markers are drawn as boxes in the frame, not as text bullets, and
   both sit flush with the TOP of the item rather than centred on it - measured
   at y 0 in a 28px line box, on the two-line items as well as the one-line. */
.ic-article-body ul,
.ic-article-body ol {
  display: flex;
  flex-direction: column;
  padding: 0;
  list-style: none;
}

.ic-article-body ul { gap: 12px; }

.ic-article-body ol {
  gap: 14px;
  counter-reset: ic-step;
}

.ic-article-body li {
  display: flex;
  align-items: flex-start;
  color: var(--ic-body);
  font-size: 16.5px;
  font-weight: 400;
  line-height: 1.7;
}

.ic-article-body ul > li { gap: 11px; }

.ic-article-body ol > li { gap: 13px; }

.ic-article-body ul > li::before {
  content: "";
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ic-teal);
}

.ic-article-body ol > li::before {
  counter-increment: ic-step;
  content: counter(ic-step);
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--ic-teal-tint-2);
  color: var(--ic-teal-deep);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1;
}

.ic-article-body blockquote {
  margin: 0;
  padding: 8px 0 8px 26px;
  border-left: 4px solid var(--ic-teal);
  color: var(--ic-ink);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.3px;
  line-height: 1.6;
}

.ic-article-body blockquote p {
  margin: 0;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
}

/* Callout: the teal-tint panel with an icon heading. Authored into the body as
   a div, because it is editorial content - one article has two, another may
   have none - not a slot in the template. */
.ic-callout {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 26px;
  border: 1px solid var(--ic-teal-tint-2);
  border-radius: var(--ic-radius);
  background: var(--ic-teal-tint);
}

.ic-callout__title {
  display: flex;
  align-items: center;
  gap: 9px;
  line-height: 1.4;
}

/* The title is a <p>, so `.ic-article-body p` (0,1,1) outranks a bare
   `.ic-callout__title` (0,1,0) and the heading rendered as body copy - 15.5px,
   400, #555. Both callout rules are therefore scoped to the article and the
   body-copy one excludes the title explicitly. */
.ic-article-body p.ic-callout__title {
  color: var(--ic-ink);
  font-size: 16.5px;
  font-weight: 700;
}

.ic-callout__title svg {
  flex: 0 0 auto;
  width: 19px;
  height: 19px;
  color: var(--ic-teal-deep);
}

.ic-article-body .ic-callout p:not(.ic-callout__title) {
  font-size: 15.5px;
  line-height: 1.7;
}

/* Key takeaways: a surface panel closing the article. Its heading is a real h2
   so the contents list picks it up - the frame lists "Key takeaways" alongside
   the four section headings - and the smaller size here is the frame's own, not
   a downgrade of the h2 rule. */
.ic-takeaways {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 28px;
  border: 1px solid var(--ic-line);
  border-radius: var(--ic-radius);
  background: var(--ic-surface);
}

.ic-article-body .ic-takeaways h2 {
  margin: 0;
  font-size: 18px;
  letter-spacing: 0;
  line-height: 1.4;
}

.ic-disclaimer {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin: 0;
  /* 18px of its own on top of the column's 20px gap. */
  padding-top: 18px;
  color: var(--ic-muted);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.6;
}

.ic-disclaimer svg {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  /* Optical: line up with the first line's centre rather than its box top. */
  margin-top: 2px;
}

/* --- Sidebar -------------------------------------------------------------- */

/* The frame draws a 761px sidebar against a 2291px body: top-aligned, and far
   shorter than what it sits beside. A contents list that scrolls away after the
   first section is not a contents list, so it travels with the reader. The
   frame cannot express this - stickiness is behaviour, not a value - so it is
   the one thing on this page added rather than transcribed. */
.e-con.ic-article-aside {
  position: sticky;
  top: 24px;
}

/* --- Contents ------------------------------------------------------------- */

.ic-toc {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--ic-line);
}

.ic-toc--sidebar {
  gap: 10px;
  padding: 24px;
  border-radius: var(--ic-radius);
  background: var(--ic-white);
}

.ic-toc--mobile {
  gap: 9px;
  padding: 20px;
  border-radius: 12px;
  background: var(--ic-surface);
}

.ic-toc__title {
  margin: 0;
  color: var(--ic-ink);
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.4;
}

.ic-toc__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.ic-toc__chevron {
  flex: 0 0 auto;
  color: var(--ic-muted);
  transition: transform 0.15s ease;
}

.ic-toc.is-collapsed .ic-toc__chevron { transform: rotate(-90deg); }

.ic-toc.is-collapsed .ic-toc__list { display: none; }

.ic-toc__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ic-toc__item {
  padding: 7px 0 7px 13px;
  border-left: 2px solid var(--ic-line);
}

.ic-toc__item a {
  color: var(--ic-body);
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.5;
  text-decoration: none;
}

.ic-toc__item a:hover { color: var(--ic-teal-deep); }

.ic-toc__item.is-active { border-left-color: var(--ic-teal); }

.ic-toc__item.is-active a {
  color: var(--ic-teal-deep);
  font-weight: 700;
}

/* --- Share ---------------------------------------------------------------- */

.ic-share {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--ic-line);
  background: var(--ic-white);
}

.ic-share--sidebar {
  gap: 12px;
  padding: 24px;
  border-radius: var(--ic-radius);
}

.ic-share--mobile {
  gap: 11px;
  padding: 20px;
  border-radius: 12px;
}

.ic-share__title {
  margin: 0;
  color: var(--ic-ink);
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.4;
}

.ic-share__row {
  display: flex;
  gap: 9px;
}

.ic-share__btn {
  display: inline-flex;
  position: relative;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--ic-line);
  border-radius: 8px;
  background: var(--ic-surface);
  color: var(--ic-ink-2);
  cursor: pointer;
}

.ic-share__btn:hover {
  border-color: var(--ic-teal);
  color: var(--ic-teal-deep);
}

/* The tick swaps in for the link glyph for two seconds after a copy, so the
   button confirms itself without moving anything around it. */
.ic-share__tick { display: none; }

.ic-share__copy.is-copied .ic-ico:not(.ic-share__tick) { display: none; }

.ic-share__copy.is-copied .ic-share__tick {
  display: block;
  color: var(--ic-teal-deep);
}

/* --- Sidebar help CTA ----------------------------------------------------- */

/* The phone number is a heading widget with a link, so the anchor - not the
   heading - carries the colour. */
.ic-help-phone .elementor-heading-title a { color: inherit; }

/* --- Author box ----------------------------------------------------------- */

/* Desktop: a surface row - avatar, then name over bio in one column beside it.
   A grid rather than nested flex boxes, because the mobile frame reflows the
   bio to full width under the avatar row, which is one grid-column change
   instead of a different DOM. __top is display:contents so its two children
   place themselves directly on the grid. */
.ic-author {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 7px 22px;
  align-items: center;
  padding: 32px;
  border: 1px solid var(--ic-line);
  border-radius: 16px;
  background: var(--ic-surface);
}

.ic-author__top { display: contents; }

.ic-author .ic-avatar { grid-row: 1 / span 2; }

.ic-author__name {
  color: var(--ic-ink);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.4;
}

.ic-author__bio {
  grid-column: 2;
  margin: 0;
  color: var(--ic-body);
  font-size: 14.5px;
  font-weight: 400;
  line-height: 1.7;
}

/* --- Related articles ----------------------------------------------------- */

.ic-rels {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.ic-rel {
  display: flex;
  position: relative;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--ic-line);
  border-radius: var(--ic-radius);
  background: var(--ic-white);
}

.ic-rel__img {
  aspect-ratio: 413 / 160;
  background: var(--ic-teal-tint-2);
}

.ic-rel__img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ic-rel__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px;
}

.ic-rel__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.ic-rel__title {
  margin: 0;
  color: var(--ic-ink);
  font-size: 16.5px;
  font-weight: 700;
  line-height: 1.35;
}

.ic-rel__title a {
  color: inherit;
  text-decoration: none;
}

/* Whole card clickable, without a second link in the tab order. */
.ic-rel__title a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.ic-rel__title a:hover { color: var(--ic-teal-deep); }

.ic-rel:focus-within {
  outline: 3px solid var(--ic-teal-deep);
  outline-offset: 2px;
}

/* --- Mobile (design.pen s0OHy) -------------------------------------------- */

@media (max-width: 767px) {
  /* The archive's breadcrumb is 12.5 at gap 8, which is also this page's
     desktop value; only the mobile frame differs, so the override is scoped to
     the post rather than applied to .ic-crumbs everywhere. */
  body.single-post .ic-crumbs {
    gap: 6px;
    font-size: 11.5px;
  }

  .ic-post-tag {
    padding: 5px 10px;
    font-size: 11px;
  }

  .ic-byline {
    gap: 12px;
    padding-top: 0;
  }

  .ic-byline .ic-avatar {
    --ic-avatar-size: 40px;
    --ic-avatar-font: 14px;
  }

  .ic-author .ic-avatar {
    --ic-avatar-size: 56px;
    --ic-avatar-font: 19px;
  }

  .ic-byline__name { font-size: 14px; }

  .ic-byline__meta {
    gap: 8px;
    font-size: 11.5px;
  }

  .ic-hero-img img { aspect-ratio: 350 / 220; }

  .ic-hero-caption { font-size: 11.5px; }

  .ic-article-body > * + *,
.ic-article-body > .elementor-widget-container > * + * { margin-top: 18px; }

  .ic-article-body > h2,
.ic-article-body > .elementor-widget-container > h2 { margin-top: 28px; }

  .ic-article-body > p:first-child,
.ic-article-body > .elementor-widget-container > p:first-child { font-size: 16.5px; }

  .ic-article-body p { font-size: 15.5px; }

  .ic-article-body h2 {
    font-size: 21px;
    letter-spacing: -0.4px;
    line-height: 1.32;
  }

  .ic-article-body li { font-size: 15.5px; }

  .ic-article-body ul { gap: 11px; }

  .ic-article-body ol { gap: 13px; }

  .ic-article-body ul > li { gap: 10px; }

  .ic-article-body ol > li { gap: 11px; }

  .ic-article-body ul > li::before {
    width: 6px;
    height: 6px;
  }

  .ic-article-body ol > li::before {
    width: 24px;
    height: 24px;
    font-size: 11.5px;
  }

  .ic-article-body blockquote {
    padding: 6px 0 6px 18px;
    font-size: 17.5px;
    letter-spacing: -0.2px;
    line-height: 1.55;
  }

  .ic-callout {
    gap: 9px;
    padding: 20px;
    border-radius: 12px;
  }

  .ic-article-body p.ic-callout__title { font-size: 15px; }

  .ic-callout__title svg {
    width: 17px;
    height: 17px;
  }

  .ic-article-body .ic-callout p:not(.ic-callout__title) { font-size: 14px; }

  .ic-takeaways {
    gap: 12px;
    padding: 22px;
    border-radius: 12px;
  }

  .ic-article-body .ic-takeaways h2 { font-size: 16.5px; }

  .ic-disclaimer {
    gap: 10px;
    padding-top: 8px;
    font-size: 12.5px;
  }

  .ic-disclaimer svg {
    width: 15px;
    height: 15px;
  }

  .ic-toc__title { font-size: 15px; }

  .ic-toc__item { padding: 6px 0 6px 12px; }

  .ic-toc__item a { font-size: 13px; }

  .ic-share__title { font-size: 15px; }

  /* Four buttons filling the card's 310px content width: 4 x 71 + 3 x 9. */
  .ic-share__btn {
    flex: 1 1 0;
    width: auto;
    height: 44px;
  }

  /* The mobile frame stacks the bio under the avatar row rather than beside the
     avatar, so the bio spans both columns and the avatar stops spanning two. */
  .ic-author {
    gap: 14px;
    padding: 24px;
    border-radius: 12px;
    background: var(--ic-white);
  }

  .ic-author .ic-avatar { grid-row: auto; }

  .ic-author__name { font-size: 17.5px; }

  .ic-author__bio {
    grid-column: 1 / -1;
    font-size: 13.5px;
  }

  .ic-rels {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .ic-rel { border-radius: 12px; }

  .ic-rel__img { aspect-ratio: 350 / 140; }

  .ic-rel__body {
    gap: 9px;
    padding: 18px;
  }

  .ic-rel__meta { gap: 9px; }

  .ic-rel__title { font-size: 15.5px; }

  .ic-rel .ic-post-card__cat { font-size: 11px; }

  .ic-rel .ic-post-card__read { font-size: 11.5px; }
}

/* -----------------------------------------------------------------------------
   Thank You page (design.pen g6rUhc desktop 1440 / GUvMI mobile 390)

   The Elementor page (scripts/build-thank-you.php) carries every value it has a
   control for. Three things it does not:

     - the reference chip, which is a shortcode (inc/thank-you.php) because the
       frames draw a placeholder with no data behind it
     - the "While You Wait" card's mobile description colour, because Elementor
       colour controls are not responsive and the frames use #555555 at 1440 and
       #7A7A7A at 390
     - the strip buttons' 16px icons, because Elementor sizes a button icon from
       its label and the shared .ic-btn rule pins every other button to the
       design's 17px
----------------------------------------------------------------------------- */

/* design.pen measures a text node's box as the font's natural LINE box - for
   Poppins that is ~1.5em once ascent, descent and line gap are counted. Two
   Elementor defaults disagree with that, and both are invisible in an
   `audit-page.js` run because the type is correct and only the boxes are wrong:

     - `frontend.css` pins `.elementor-heading-title` to `line-height: 1`, so a
       heading whose frame node specifies no line-height renders a third short
       (the "What happens next" H2: 24px tall against the frame's 36)
     - a `header_size: 'span'` heading is inline, so its box comes from the
       parent's line-height strut rather than its own (the "WHILE YOU WAIT"
       eyebrow: a 17px span in a 24px box against the frame's 19) - the same
       mechanism as `.ic-stack-tight` further up, which fixes it the same way

   `ic-lh-natural` is applied per widget, NOT to the page, because the widgets
   whose frames DO specify a line-height already carry it as an Elementor
   control, and a blanket rule here has equal specificity and loads later - it
   would silently overwrite every value that was read from the design.

   This is a site-wide characteristic, not a Thank You one: every page built so
   far has it. Fixing it globally is nine pages that were each checked against
   their own frames at the current heights, so it is recorded in
   compare/README.md as a decision rather than taken here. */
.ic-lh-natural .elementor-heading-title {
  line-height: normal;
  display: block;
}

/* Elementor leaves the text-editor's <p> with the theme's 14.4px bottom margin.
   The frames space these bands with explicit gaps and nothing else, so that
   margin is 14.4px of spacing the design does not have, once per paragraph -
   which is the whole of the Confirmation band's 29px overshoot. Scoped to the
   page for the same reason as above: every other page carries the same margin
   and was measured with it. */
.ic-thank-you .elementor-widget-text-editor p:last-child {
  margin-bottom: 0;
}

/* Reference chip. Sized from the frame's Ref node (nf5HX / L3IPU): white fill,
   10px radius, 14/24 padding, 10px gap, 17px icon, 14.5/700 label. It is an
   inline-flex <p> inside a shortcode widget set to width:auto, so the
   Confirmation column's align-items:center centres it. */
.ic-ty-ref {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 14px 24px;
  border-radius: 10px;
  background: var(--ic-white);
  color: var(--ic-ink);
  font-family: var(--ic-font);
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.5;
}

.ic-ty-ref__ico {
  flex: 0 0 auto;
  color: var(--ic-teal-deep);
}

/* The mobile frame (L3IPU) tightens all of it: 13/20 padding, 9px gap, a 16px
   icon and a 13.5px label. The SVG's width/height attributes are the desktop
   size, so the icon is resized here rather than by branching in PHP. */
@media (max-width: 767px) {
  .ic-ty-ref {
    gap: 9px;
    padding: 13px 20px;
    font-size: 13.5px;
  }

  .ic-ty-ref__ico {
    width: 16px;
    height: 16px;
  }
}

/* "While You Wait" card. One markup at both breakpoints - a vertical card at
   1440, a horizontal row at 390 - so everything responsive that Elementor can
   express is on the container. What is left is the anchor reset (the card is an
   <a> via html_tag, and Hello Elementor underlines and recolours links) and the
   mobile-only description colour. */
.e-con.ic-wyw-card {
  color: inherit;
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.e-con.ic-wyw-card:hover,
.e-con.ic-wyw-card:focus-visible {
  box-shadow: 0 6px 20px rgba(26, 26, 26, 0.08);
  transform: translateY(-2px);
}

@media (max-width: 767px) {
  /* The frame drops the body copy to muted at 390. Two classes plus an element
     beats Elementor's own three-class text_color rule only because that rule
     targets the widget wrapper, not the paragraph inside it. */
  .ic-wyw-card__desc .elementor-widget-container p,
  .ic-wyw-card__desc p {
    color: var(--ic-muted);
  }

  /* The trailing chevron is a flex item with `width: auto`, so it defaults to
     `flex-shrink: 1` and the copy column squeezes it - it rendered 9.66px wide
     against the frame's 15, which reads as a rendering artefact rather than a
     layout bug. */
  .ic-wyw-card > .elementor-widget-icon {
    flex: 0 0 auto;
  }

  /* A row that has already grown a tap target does not also need to lift. */
  .e-con.ic-wyw-card:hover,
  .e-con.ic-wyw-card:focus-visible {
    box-shadow: none;
    transform: none;
  }
}

/* Contact strip buttons. The design pairs a 15px label with a 16px icon here,
   where design.pen's Button component (and therefore .ic-btn) is 15/17. */
.ic-btn-16 .elementor-button-icon svg,
.ic-btn-16 .elementor-button-icon {
  width: 16px;
  height: 16px;
  font-size: 16px;
}

/* Elementor pins .elementor-button to `line-height: 1`, so a button's height is
   its font size plus its padding - 15 + 30 = 45 here, against the frame's 53.
   The 8px is the difference between a 15px em box and a 15px Poppins line box
   (~22.5px with the font's own ascent, descent and line gap), which is what the
   frame measures. `normal` restores it and lands on exactly 53, measured.

   Scoped to this page's two buttons on purpose. design.pen's Button component
   (fz4Xi) is 55px tall for the same reason and ic_button() renders it at 47, so
   every button on the site is ~8px short - but that is nine other pages, each
   checked against its own frames at the current height, and is recorded in
   compare/README.md rather than changed here. */
.ic-btn-16 .elementor-button {
  line-height: normal;
}

/* --- 404 ------------------------------------------------------------------ */

/* Same margin reset as .ic-thank-you above, for the same reason: Elementor
   leaves the text-editor's <p> carrying the theme's 14.4px bottom margin, and
   the frames space these bands with explicit gaps and nothing else. Scoped per
   page rather than globally because every earlier page was measured with that
   margin in place. */
.ic-404 .elementor-widget-text-editor p:last-child {
  margin-bottom: 0;
}

/* The same reset on the shared link card, which carries a text-editor for its
   description and is used on pages that do not have a band-level scope class.
   No-op on Thank You, where .ic-thank-you already zeroed it. */
.ic-wyw-card .elementor-widget-text-editor p:last-child {
  margin-bottom: 0;
}


/* -----------------------------------------------------------------------------
   Site search panel
   design.pen S0PxKD / n12ccV (404) and bU7OK / zBBbq (search results)

   One control, not a field with a button beside it: a 1.5px outlined panel
   holding a 19px magnifier, the field, and a filled teal submit button.
   Elementor Pro's Search Form widget has neither the leading icon nor a
   responsive button label, so both pages render inc/site-search.php's
   ic_search_panel() and are styled here.

   The two frames differ only in desktop width, so that is the only thing the
   modifiers carry. The 404 widths are exact: 620 - 36 padding - 19 icon - 12
   gap - 12 gap - 91 button leaves that frame's 450px field, and 350 - 28 - 17
   - 10 - 10 - 51 leaves its 234.
----------------------------------------------------------------------------- */

.ic-sitesearch {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 100%;
  height: 56px;
  padding: 0 18px;
  background: var(--ic-white);
  border: 1.5px solid var(--ic-line);
  border-radius: var(--ic-radius-sm);
}

.ic-sitesearch--404     { width: 620px; }
.ic-sitesearch--results { width: 760px; }

.ic-sitesearch__icon {
  flex: 0 0 auto;
  color: var(--ic-muted);
}

.ic-sitesearch input[type="search"] {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ic-ink);
  font-family: var(--ic-font);
  font-size: 15px;
  font-weight: 400;
}

.ic-sitesearch input[type="search"]::placeholder {
  color: var(--ic-muted);
  opacity: 1;
}

.ic-sitesearch input[type="search"]:focus { outline: none; }

.ic-sitesearch:focus-within {
  border-color: var(--ic-teal);
  outline: 3px solid var(--ic-teal-deep);
  outline-offset: 2px;
}

.ic-sitesearch__btn {
  flex: 0 0 auto;
  padding: 11px 20px;
  border: 0;
  border-radius: 7px;
  background: var(--ic-teal);
  color: var(--ic-white);
  font-family: var(--ic-font);
  font-size: 14px;
  font-weight: 700;
  /* The frame's label box is 21px tall on a 14px face, which is Poppins' own
     line box - the same 1.5 the rest of the design's small labels sit in. */
  line-height: 1.5;
  cursor: pointer;
}

.ic-sitesearch__btn:hover,
.ic-sitesearch__btn:focus-visible {
  background: var(--ic-teal-deep);
}

/* The button says "Search" at 1440 and "Go" at 390. Two different words, so
   both are rendered and one is hidden per breakpoint - this is not the same as
   splitting one design text node across two spans. display:none also keeps the
   inactive one out of the accessibility tree. */
.ic-sitesearch__label--narrow { display: none; }

@media (max-width: 767px) {
  .ic-sitesearch {
    height: 50px;
    gap: 10px;
    padding: 0 14px;
  }

  .ic-sitesearch--404,
  .ic-sitesearch--results { width: 100%; }

  .ic-sitesearch__icon {
    width: 17px;
    height: 17px;
  }

  .ic-sitesearch input[type="search"] { font-size: 14px; }

  .ic-sitesearch__btn {
    padding: 9px 16px;
    font-size: 13px;
  }

  .ic-sitesearch__label--wide { display: none; }
  .ic-sitesearch__label--narrow { display: inline; }
}

/* -----------------------------------------------------------------------------
   Search results (design.pen rAQkk desktop 1440 / UKkwT mobile 390)
   scripts/build-search-results.php + inc/site-search.php

   The Elementor template owns the three bands and the static H1. Everything the
   query decides - breadcrumb, box, count, filters, rows, pagination and the
   no-results card - is a shortcode, so its type and spacing live here.

   The breadcrumb is the blog archive's .ic-crumbs component unchanged: both
   frames specify the same 12.5px type on an 8px gap (11.5/6 at 390) and the
   same 13px chevron (12 at 390), so there is nothing to add for it.
----------------------------------------------------------------------------- */

/* The no-results card sits on a surface band where the list sits on white
   (frames X9zNU vs pGHWu), and Elementor's background_color control cannot
   answer a query - so the band is left transparent in the template and coloured
   here. Two classes beat the single .elementor-element-{id} rule Elementor
   would otherwise emit. */
.e-con.ic-search-results-band { background-color: var(--ic-white); }
body.ic-search-noresults .e-con.ic-search-results-band { background-color: var(--ic-surface); }

/* A term with no results anywhere has nothing to filter, and the band carries
   26px of padding and its own background - so an empty one reads as a broken
   strip. Keyed to ic-search-barren, not ic-search-noresults: a hand-typed empty
   filter still needs its chips to get back to all results. */
body.ic-search-barren .ic-search-filters-band { display: none; }

/* paginate_links() returns nothing for a single page, but the shortcode widget
   is still a flex item and the band's 36px gap would open above a row that is
   not there. */
body.ic-search-onepage .ic-search-pagination { display: none; }

.ic-search-count {
  margin: 0;
  color: var(--ic-body);
  font-size: 15px;
  font-weight: 400;
}

/* --- Type filters --------------------------------------------------------- */

/* The chip row is the blog archive's component unchanged - the filter row is
   `class="ic-chips ic-search-filters"` - because the two frames specify it
   identically: 10px gap at 1440, 9px between rows and 8 between chips at 390,
   and a 13.5px/600 pill on 10/18 padding with a 1.5px line border.
   `.ic-search-filters` exists only as a scoping hook, for the one value that
   genuinely differs and for hiding the band above.

   Writing a second `.ic-chip` block here instead was the first attempt and it
   silently lost: the archive's rule is `a.ic-chip` (a class AND an element)
   where a fresh `.ic-chip` is one class, so it wins wherever it sits in the
   file. The chips rendered at the blog's 13.5px at 390 and nothing else moved,
   which is exactly how a collision of this shape reads. Note a THIRD owner of
   the bare name exists - `.e-con.ic-chip`, the Suburb template's container -
   which is why the archive scoped itself to an anchor in the first place. */
.ic-search-filters a.ic-chip { font-size: 13.5px; }

/* --- Result rows ---------------------------------------------------------- */

/* The frame draws a 1px rule between rows as its own node and never after the
   last one - which is exactly what an adjacent-sibling border gives, so the
   separators are not markup. */
.ic-result {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 24px 0;
}

.ic-result + .ic-result { border-top: 1px solid var(--ic-line); }

.ic-result__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.ic-result__badge {
  padding: 5px 10px;
  border-radius: 5px;
  background: var(--ic-teal-tint-2);
  color: var(--ic-teal-deep);
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
}

.ic-result__path {
  color: var(--ic-muted);
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.5;
}

/* The mobile frame's trail drops the "Home" crumb, so both trails are rendered
   whole and one is hidden per breakpoint - same reasoning as the search
   button's two labels above. */
.ic-result__path--narrow { display: none; }

.ic-result__title {
  margin: 0;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.35;
}

.ic-result__title a {
  color: var(--ic-teal-deep);
  text-decoration: none;
}

.ic-result__title a:hover { text-decoration: underline; }

.ic-result__excerpt {
  margin: 0;
  color: var(--ic-body);
  font-size: 14.5px;
  font-weight: 400;
  line-height: 1.65;
}

/* The frame hangs the pagination 24px below the band's own 36px gap. The base
   .ic-pagination rule is one class, so this two-class one wins in both
   directions. */
.ic-search .ic-pagination { margin-top: 24px; }

/* --- No results ----------------------------------------------------------- */

.ic-noresults {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 56px;
  background: var(--ic-white);
  border: 1px solid var(--ic-line);
  border-radius: 16px;
  text-align: center;
}

.ic-noresults__icon {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--ic-teal-tint);
  color: var(--ic-teal-deep);
}

.ic-noresults__title {
  margin: 0;
  color: var(--ic-ink);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.6px;
}

.ic-noresults__text {
  max-width: 620px;
  margin: 0;
  color: var(--ic-body);
  font-size: 15.5px;
  font-weight: 400;
  line-height: 1.65;
}

.ic-noresults__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 6px;
}

.ic-noresults__btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 9px;
  padding: 15px 26px;
  /* 8, not the 9 of --ic-radius-sm: the frame's two buttons (c4QJ8f / xGeN6)
     are the only 8px radius on this page. */
  border-radius: 8px;
  font-size: 14.5px;
  font-weight: 700;
  /* Not an Elementor button, so nothing pins line-height to 1 here - and the
     frame's box is the natural Poppins line box, which is what 1.5 gives. */
  line-height: 1.5;
  text-decoration: none;
}

/* The transparent border is load-bearing. Only the ghost button carries a
   1.5px outline in the frame, but Pencil does not add a stroke to a frame's
   height and CSS does - so a bordered ghost beside an unbordered fill rendered
   3px taller (52 against 50 at 390), which the frame does not draw. Giving the
   fill the same border box lands both on one height. */
.ic-noresults__btn--primary {
  border: 1.5px solid transparent;
  background: var(--ic-teal);
  color: var(--ic-white);
}

.ic-noresults__btn--primary:hover,
.ic-noresults__btn--primary:focus-visible { background: var(--ic-teal-deep); }

.ic-noresults__btn--ghost {
  background: var(--ic-white);
  border: 1.5px solid var(--ic-teal);
  color: var(--ic-teal-deep);
}

.ic-noresults__btn--ghost:hover,
.ic-noresults__btn--ghost:focus-visible { background: var(--ic-teal-tint); }

@media (max-width: 767px) {
  .ic-search-count { font-size: 14px; }

  /* The one value the two chip frames disagree on: the blog's mobile chip stays
     at 13.5px (frame fWvF0), this one drops to 12.5 (frame cU87Q). Everything
     else at 390 - the 9/15 padding and the 9px/8px gaps - is already the
     archive's, and the two rows of 3 and 2 the frame draws are what wrapping
     produces on those gaps. */
  .ic-search-filters a.ic-chip { font-size: 12.5px; }

  .ic-result {
    gap: 8px;
    padding: 20px 0;
  }

  .ic-result__top { gap: 9px; }

  .ic-result__badge { font-size: 10.5px; }

  .ic-result__path { font-size: 11.5px; }

  .ic-result__path--wide   { display: none; }
  .ic-result__path--narrow { display: inline; }

  .ic-result__title { font-size: 16.5px; }

  .ic-result__excerpt { font-size: 13.5px; }

  /* The mobile frame has no padding above the pagination - the band's own 20px
     gap is the whole space. */
  .ic-search .ic-pagination { margin-top: 0; }

  .ic-noresults {
    gap: 14px;
    padding: 32px;
    border-radius: var(--ic-radius);
  }

  .ic-noresults__icon {
    width: 58px;
    height: 58px;
  }

  .ic-noresults__icon svg {
    width: 26px;
    height: 26px;
  }

  .ic-noresults__title {
    font-size: 21px;
    letter-spacing: -0.5px;
  }

  .ic-noresults__text {
    max-width: 100%;
    font-size: 14px;
  }

  /* The mobile frame has no button row: both buttons are direct children of the
     card on its own 14px gap, full width. Matching that with the wrapper still
     in place means clearing its padding and taking the card's gap.

     align-items:stretch is the one that makes them full width, and it is easy
     to miss: align-self:stretch widens the wrapper correctly, and the base
     rule's align-items:center then shrinks each button back to its own label
     inside it - measured 154px and 132px against the frame's 286. Same shape as
     the Thank You page's stacked CTA in compare/README.md. */
  .ic-noresults__actions {
    flex-direction: column;
    align-self: stretch;
    align-items: stretch;
    gap: 14px;
    padding-top: 0;
  }

  .ic-noresults__btn {
    gap: 8px;
    padding: 14px 0;
  }

  .ic-noresults__btn svg {
    width: 15px;
    height: 15px;
  }
}

/* Photo panels - `ic_image_box()` in scripts/lib-elementor.php.

   The design draws every photo as a fixed-height rounded box that the image
   fills, which is `object-fit: cover` on an <img> stretched to the container
   rather than a CSS background - a background has nowhere to put alt text, and
   none of these photos are decorative.

   The image widget is taken out of flow and pinned to the box instead of being
   sized in percentages. The boxes are sized with `min-height`, not `height`, so
   a percentage height on a descendant has nothing definite to resolve against
   and collapses to the image's intrinsic ratio - a 520px box with a 387px photo
   in it and a band of tint underneath. Pinning also stops the photo having any
   say in the box's own height, which is what keeps the card image bands even.

   `overflow: hidden` clips the photo to the container's radius, including the
   top-two-corners-only radius the cards use, so the <img> needs no radius. */
.e-con.ic-media {
  position: relative;
  overflow: hidden;
}

.ic-media > .elementor-widget-image {
  position: absolute;
  inset: 0;
  width: auto;
  max-width: none;
  margin: 0;
}

.ic-media .elementor-widget-container,
.ic-media .elementor-image {
  height: 100%;
}

.ic-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}