/* ==========================================================================
   ILM Day Nurseries — shared page template
   --------------------------------------------------------------------------
   One file that makes every page other than the home page look like part of
   the same site: a real page header, one vertical rhythm, one type scale, one
   button, one card, one form, one motion language.

   Loaded after ilm-ui.css, which holds the tokens and the home-page layer.
   Everything here is scoped to `main` so the JupiterX header and footer
   templates (which render outside <main>) keep their own hand-tuned styles.
   ========================================================================== */

/* ------------------------------------------------------ 01 wrapper reset --
   JupiterX wraps every page body in a 1100px Bootstrap column. Elementor
   already constrains its own content, so the wrapper only insets section
   backgrounds and clips the page header. Same reset the home page uses. */

body.ilm-has-ph .jupiterx-content,
body.ilm-has-ph .jupiterx-primary,
body.ilm-has-ph .jupiterx-post,
body.ilm-has-ph .jupiterx-post-body,
body.ilm-has-ph .jupiterx-post-content {
  max-width: none;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
}

body.ilm-has-ph .jupiterx-post-content > .elementor { width: 100%; }

body.ilm-has-ph .jupiterx-main-content > .container,
body.ilm-has-ph .jupiterx-main-content > .container > .row {
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 0;
}

body.ilm-has-ph .jupiterx-main .jupiterx-primary.col-lg-12 {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Elementor computes the offset of a "stretched" section in JavaScript against
   the old 1100px wrapper and writes `width: 1280px; left: -90px` inline. Once
   the wrapper is full width those offsets are wrong and push whole sections off
   the right edge (up to 1080px on /our-staff/). Parent and viewport are now the
   same width, so 100% is the correct answer. */
body.ilm-has-ph main .elementor-section-stretched,
body.ilm-has-ph main .elementor-section-full_width {
  width: 100% !important;
  max-width: 100% !important;
  left: 0 !important;
}

/* The two page-header patterns this template replaces. The Elementor title
   band is marked server-side (ilm-ui-src-header); the JupiterX title bar is
   matched on the body class only pages with a shared header carry. */
body.ilm-has-ph section.ilm-ui-src-header,
body.ilm-has-ph .jupiterx-main-header {
  display: none !important;
}

/* ----------------------------------------------------------- 02 page head --
   Navy band: breadcrumb, eyebrow, H1, lede, two actions, trust row.
   Consistent height on every page because the content, not the old Elementor
   section's own padding, sets it. */

.ilm-ph {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(22px, 2.6vw, 34px) 0 clamp(38px, 4.4vw, 58px);
  background:
    radial-gradient(120% 140% at 88% -10%, rgba(124, 196, 240, .26), transparent 58%),
    linear-gradient(158deg, #0a3a56 0%, var(--ilm-navy) 46%, #0f4e73 100%);
  color: #eaf3f9;
}

/* Soft cloud shape, no image request. */
.ilm-ph::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -180px;
  right: -120px;
  width: 560px;
  height: 560px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .10), transparent 72%);
  pointer-events: none;
}

/* Green hairline that ties the band to the content below. */
.ilm-ph::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--ilm-green), #59b98c 38%, var(--ilm-sun) 100%);
  opacity: .9;
}

.ilm-ph__in {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
  max-width: var(--ilm-container);
  margin: 0 auto;
  padding: 0 var(--ilm-gutter);
}

.ilm-ph__main { min-width: 0; }

/* -- right-hand card ----------------------------------------------------- */
.ilm-ph__aside {
  padding: 20px;
  border-radius: var(--ilm-radius);
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .07);
  backdrop-filter: blur(2px);
  margin-top: 40px;
}

.ilm-ph__aside-title {
  margin: 0 0 10px !important;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(214, 232, 243, .75) !important;
}

.ilm-ph__aside ul {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ilm-ph__place a {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 42px;
  padding: 8px 10px;
  margin: 0 -10px;
  border-radius: 10px;
  font-size: .9375rem;
  font-weight: 500;
  color: #eaf3f9;
  text-decoration: none;
  transition: background-color .16s ease, color .16s ease;
}

.ilm-ph__place svg { flex: none; color: #7fd3a8; }

.ilm-ph__place a:hover,
.ilm-ph__place a:focus-visible {
  background: rgba(255, 255, 255, .12);
  color: #fff;
}

.ilm-ph__place em {
  margin-left: auto;
  font-size: .6875rem;
  font-style: normal;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #a9e6c6;
}

.ilm-ph__place.is-current a {
  background: rgba(255, 255, 255, .18);
  box-shadow: inset 3px 0 0 #7fd3a8;
  color: #fff;
  font-weight: 600;
}

.ilm-ph__place.is-current svg { color: #a9e6c6; }

.ilm-ph__aside-cta {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 46px;
  margin-top: 14px;
  padding: 10px 16px;
  border: 1.5px solid rgba(255, 255, 255, .45);
  border-radius: 999px;
  background: transparent;
  color: #fff !important;
  font-size: .9375rem;
  font-weight: 600;
  text-decoration: none !important;
  transition: transform .16s ease, background-color .16s ease;
}

.ilm-ph__aside-cta svg:last-child { margin-left: auto; }

.ilm-ph__aside-cta:hover { transform: translateY(-1px); background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .8); }

/* -- breadcrumb ---------------------------------------------------------- */
.ilm-ph__crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: .8125rem;
  line-height: 1.4;
  color: rgba(222, 238, 247, .8);
}

.ilm-ph__crumbs li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
}

.ilm-ph__crumbs li + li::before {
  content: "";
  width: 5px;
  height: 5px;
  border-right: 1.5px solid rgba(214, 232, 243, .45);
  border-bottom: 1.5px solid rgba(214, 232, 243, .45);
  transform: rotate(-45deg);
  margin-right: 2px;
}

.ilm-ph__crumbs a {
  color: rgba(214, 232, 243, .82);
  text-decoration: none;
  transition: color .16s ease;
}

.ilm-ph__crumbs a:hover,
.ilm-ph__crumbs a:focus-visible {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ilm-ph__crumbs [aria-current="page"] {
  color: rgba(214, 232, 243, .68);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 34ch;
}

/* -- eyebrow / title / lede --------------------------------------------- */
.ilm-ph__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 18px 0 12px !important;
  font-size: .78125rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: #f4c46a !important;
  line-height: 1.3;
}

.ilm-ph__eyebrow::before {
  content: "";
  width: 24px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  opacity: .75;
}

.ilm-ph__title {
  margin: 0 0 14px !important;
  max-width: 26ch;
  font-size: clamp(2rem, 1.15rem + 3vw, 3.15rem) !important;
  line-height: 1.06 !important;
  font-weight: 700;
  letter-spacing: -.026em;
  color: #fff !important;
  text-wrap: balance;
}

.ilm-ph__lede {
  max-width: 56ch;
  margin: 0 !important;
  font-size: clamp(1.02rem, .95rem + .34vw, 1.18rem) !important;
  line-height: 1.62 !important;
  color: #cfe2ee !important;
}

/* -- actions ------------------------------------------------------------- */
.ilm-ph__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

.ilm-ph__actions .ilm-btn { min-height: 50px; }

/* On the navy band the primary button is white-on-navy inverted, so the two
   actions read as a clear pair rather than two dark pills. */
.ilm-ph__actions .ilm-btn--primary {
  --btn-bg: #fff;
  --btn-fg: var(--ilm-navy-deep);
  --btn-bd: #fff;
  box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .55);
}

.ilm-ph__actions .ilm-btn--primary:hover {
  --btn-bg: #f4f9fd;
  --btn-bd: #f4f9fd;
  transform: translateY(-1px);
}

.ilm-ph__actions .ilm-btn--light {
  --btn-bg: rgba(255, 255, 255, .08);
  --btn-fg: #fff;
  --btn-bd: rgba(255, 255, 255, .38);
  box-shadow: none;
  backdrop-filter: blur(2px);
}

.ilm-ph__actions .ilm-btn--light:hover {
  --btn-bg: rgba(255, 255, 255, .16);
  --btn-bd: rgba(255, 255, 255, .7);
}

/* -- trust row ----------------------------------------------------------- */
.ilm-ph__trust {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}

.ilm-ph__trust li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  font-size: .875rem;
  font-weight: 500;
  color: rgba(226, 240, 248, .9);
  line-height: 1.4;
}

.ilm-ph__trust svg {
  width: 16px;
  height: 16px;
  flex: none;
  color: #7fd3a8;
}

/* ------------------------------------------------------- 03 section rhythm --
   One vertical rhythm for every top-level content section. Before this the
   inner pages ran 0px, 10px, 20px, 30px, 45px and 50px between sections, so
   the same page had six different gaps. */

body main .elementor-top-section {
  padding-top: var(--ilm-section-y) !important;
  padding-bottom: var(--ilm-section-y) !important;
}

/* The first section after the header needs less air than the rest. */
.ilm-ph + .elementor-top-section,
.ilm-ph + .elementor,
.ilm-ph + div > .elementor-top-section:first-child {
  padding-top: clamp(32px, 3.6vw, 56px) !important;
}

/* A section that only holds a full-width image should not gain padding. */
body main .elementor-top-section.ilm-flush {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* --------------------------------------------------------- 04 type scale --
   One H2 and one H3 size across every page. The old site had 36px and 37.6px
   H2s side by side, and H3s at 16.5px, 21px and 28px. */

body main .elementor-widget-heading .elementor-heading-title {
  color: var(--ilm-ink);
  letter-spacing: -.02em;
  line-height: 1.16;
  text-wrap: balance;
}

/* Alignment: the same page used to centre seven blocks and left-align six,
   which read as unfinished. Long-form copy is left-aligned everywhere; only
   the call-to-action band that carries the enquiry form stays centred. */
body main .elementor-widget-heading .elementor-heading-title,
body main .elementor-widget-text-editor p,
body main .elementor-widget-text-editor li {
  text-align: left;
}

body main .elementor-top-section:has(.elementor-widget-form) .elementor-heading-title,
body main .elementor-top-section:has(.elementor-widget-form) .elementor-widget-text-editor p,
body main .elementor-top-section:has(.elementor-widget-form) .elementor-widget-text-editor li {
  text-align: center;
}

/* Only headings that sit at the top level of a section are the page's own
   section headings. A heading inside a card keeps the size the card was
   designed with — the previous blanket rule blew a 24px card title up to
   37.6px and wrapped it over six lines. */
body main .elementor-top-section > .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget-heading h2.elementor-heading-title {
  font-size: var(--ilm-fs-h2) !important;
  font-weight: 700;
}

body main .elementor-top-section > .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget-heading h3.elementor-heading-title {
  font-size: var(--ilm-fs-h3) !important;
  font-weight: 700;
}

body main .elementor-widget-heading h4.elementor-heading-title {
  font-size: 1.0625rem !important;
  font-weight: 700;
  letter-spacing: 0;
}

/* Measure: full-width paragraphs on a 1200px canvas are unreadable. */
body main .elementor-widget-text-editor p,
body main .elementor-widget-text-editor li {
  max-width: 62ch;
  font-size: var(--ilm-fs-body);
  line-height: 1.72;
  color: var(--ilm-body);
}

body main .elementor-widget-text-editor strong,
body main .elementor-widget-text-editor b {
  color: var(--ilm-ink);
  font-weight: 600;
}

/* Headings that live inside a text widget need their own rhythm — this is
   where most of the site's content actually sits. */
body main .elementor-widget-text-editor h2 {
  margin: 2.1em 0 .5em;
  font-size: var(--ilm-fs-h2) !important;
}

body main .elementor-widget-text-editor h3 {
  position: relative;
  margin: 1.9em 0 .4em;
  padding-left: 15px;
  font-size: clamp(1.08rem, 1rem + .45vw, 1.32rem) !important;
  line-height: 1.35;
  color: var(--ilm-navy);
}

body main .elementor-widget-text-editor h3::before {
  content: "";
  position: absolute;
  left: 0;
  top: .22em;
  bottom: .22em;
  width: 3px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--ilm-green), #7fd3a8);
}

body main .elementor-widget-text-editor h2:first-child,
body main .elementor-widget-text-editor h3:first-child {
  margin-top: 0;
}

body main .elementor-widget-text-editor > .elementor-widget-container > p:first-child {
  margin-top: 0;
}

/* Lists: one tick, one indent, one gap — instead of browser defaults inside a
   15px body text. */
body main .elementor-widget-text-editor ul,
body main .elementor-widget-text-editor ol {
  max-width: 62ch;
  margin: 0 0 1.35em;
  padding: 0;
  list-style: none;
}

body main .elementor-widget-text-editor ul li,
body main .elementor-widget-text-editor ol li {
  position: relative;
  margin: 0 0 .6em;
  padding-left: 30px;
}

body main .elementor-widget-text-editor ul li::before,
body main .elementor-widget-text-editor ol li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .2em;
  width: 18px;
  height: 18px;
  background: currentColor;
  color: var(--ilm-green);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5l4.5 4.5L19.5 6.5'/%3E%3C/svg%3E") center / 18px no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5l4.5 4.5L19.5 6.5'/%3E%3C/svg%3E") center / 18px no-repeat;
}

/* Numbered lists keep their meaning. */
body main .elementor-widget-text-editor ol {
  counter-reset: ilm-ol;
}

body main .elementor-widget-text-editor ol li {
  counter-increment: ilm-ol;
}

body main .elementor-widget-text-editor ol li::before {
  content: counter(ilm-ol);
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--ilm-sky-soft);
  color: var(--ilm-navy);
  font-size: .6875rem;
  font-weight: 700;
  -webkit-mask: none;
          mask: none;
}

/* Nested lists should not double the tick. */
body main .elementor-widget-text-editor li ul li::before,
body main .elementor-widget-text-editor li ol li::before {
  background: var(--ilm-muted);
}

body main .elementor-widget-text-editor blockquote {
  margin: 1.6em 0;
  padding: 20px 24px;
  border-left: 3px solid var(--ilm-green);
  border-radius: 0 var(--ilm-radius-sm) var(--ilm-radius-sm) 0;
  background: var(--ilm-sky-soft);
}

body main .elementor-widget-text-editor blockquote p {
  margin: 0;
  color: var(--ilm-ink);
}

/* Tables (terms, fees) get the same frame everywhere. */
body main .elementor-widget-text-editor table {
  width: 100%;
  margin: 0 0 1.5em;
  border-collapse: collapse;
  font-size: .9375rem;
}

body main .elementor-widget-text-editor th,
body main .elementor-widget-text-editor td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--ilm-line);
  text-align: left;
}

body main .elementor-widget-text-editor th {
  background: var(--ilm-sky-soft);
  color: var(--ilm-ink);
  font-weight: 600;
}

/* ------------------------------------------------------------ 05 buttons --
   Every Elementor button inherits the same shape as the hand-built .ilm-btn,
   so a button looks identical whether it came from the page builder or from
   the page header. */

body main .elementor-button,
body .elementor-widget-button .elementor-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 50px;
  padding: 13px 26px;
  border: 1.5px solid var(--ilm-navy);
  border-radius: 999px;
  background: var(--ilm-navy);
  color: #fff !important;
  font-family: var(--ilm-font);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0;
  text-decoration: none !important;
  box-shadow: 0 8px 18px -12px rgba(8, 43, 65, .6);
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease,
              border-color .18s ease, color .18s ease;
}

body main .elementor-button:hover {
  background: var(--ilm-navy-deep);
  border-color: var(--ilm-navy-deep);
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 16px 28px -14px rgba(8, 43, 65, .55);
}

body main .elementor-button:active { transform: translateY(0); }

body main .elementor-button .elementor-button-icon svg,
body main .elementor-button svg {
  width: 18px;
  height: 18px;
}

body main .elementor-widget-button { margin-block: 0; }

/* Elementor ships "pulse" as a widget animation on several buttons here. It
   runs forever and reads as a glitch, so it is replaced by the hover lift that
   every other button on the site uses. */
body main .elementor-button.elementor-animation-pulse,
body main .elementor-button.elementor-animation-pulse:hover {
  animation: none !important;
}

/* -------------------------------------------------------- 06 icon boxes --
   Contact blocks, feature lists and location cards: one icon chip, one title
   weight, one description size. The widget's own above/beside layout is left
   alone — several blocks are deliberately centred. */

body main .elementor-widget-icon-box .elementor-icon-box-wrapper {
  gap: 12px;
}

body main .elementor-widget-icon-box .elementor-icon-box-icon {
  margin: 0 !important;
  flex: none;
}

body main .elementor-widget-icon-box .elementor-icon-box-icon .elementor-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 10px;
  border-radius: 14px;
  background: var(--ilm-sky-soft);
  color: var(--ilm-navy);
  transition: background-color .2s ease, color .2s ease, transform .2s ease;
}

body main .elementor-widget-icon-box .elementor-icon-box-title {
  margin: 0 0 3px !important;
  font-size: 1rem !important;
  font-weight: 700;
  color: var(--ilm-ink);
}

body main .elementor-widget-icon-box .elementor-icon-box-description {
  margin: 0;
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--ilm-body);
}

body main .elementor-widget-icon-box .elementor-icon-box-description a {
  color: var(--ilm-navy);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(12, 65, 96, .28);
}

body main .elementor-widget-icon-box .elementor-icon-box-description a:hover {
  border-bottom-color: var(--ilm-navy);
}

body main .elementor-widget-icon-box:hover .elementor-icon {
  background: var(--ilm-navy);
  color: #fff;
  transform: translateY(-1px);
}

/* Icon lists: same tick, same spacing as text lists. */
body main .elementor-widget-icon-list .elementor-icon-list-item {
  align-items: flex-start;
}

body main .elementor-widget-icon-list .elementor-icon-list-icon {
  padding-right: 12px;
}

body main .elementor-widget-icon-list .elementor-icon-list-icon svg {
  width: 18px;
  height: 18px;
  color: var(--ilm-green);
}

body main .elementor-widget-icon-list .elementor-icon-list-text {
  font-size: .96875rem;
  line-height: 1.6;
  color: var(--ilm-body);
}

body main .elementor-widget-icon-list .elementor-icon-list-text a {
  color: var(--ilm-navy);
  text-decoration: none;
}

body main .elementor-widget-icon-list .elementor-icon-list-text a:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ------------------------------------------------------------ 07 imagery --
   One radius, one shadow, one object-fit rule for every picture on the site. */

body main .elementor-widget-image img,
body main .elementor-widget-text-editor img {
  max-width: 100%;
  height: auto;
  border-radius: var(--ilm-radius);
}

body main .elementor-widget-image .elementor-image > a,
body main .elementor-widget-image a img {
  border-radius: var(--ilm-radius);
}

/* -------------------------------------------------------------- 08 forms --
   The enquiry form appears on the contact page, on every location page and in
   the closing CTA band. One field style, visible labels, one focus ring. */

body main .elementor-form .elementor-field-textual,
body main .elementor-form .elementor-field {
  min-height: 52px;
  padding: 14px 16px;
  border: 1.5px solid #cbdae5;
  border-radius: 12px;
  background: #fff;
  font-family: var(--ilm-font);
  font-size: 1rem;
  line-height: 1.4;
  color: var(--ilm-ink);
  transition: border-color .16s ease, box-shadow .16s ease;
}

body main .elementor-form .elementor-field-textual:hover {
  border-color: #a9c3d4;
}

body main .elementor-form .elementor-field-textual:focus,
body main .elementor-form .elementor-field-textual:focus-visible {
  border-color: var(--ilm-navy);
  box-shadow: 0 0 0 4px rgba(12, 65, 96, .12);
  outline: none;
}

body main .elementor-form .elementor-field-group {
  margin-bottom: 18px;
}

body main .elementor-form .elementor-button {
  width: 100%;
  min-height: 54px;
}

body main .elementor-form .elementor-message {
  margin-top: 14px;
  padding: 12px 16px;
  border-radius: 12px;
  font-size: .9375rem;
}

/* A form inside a navy band gets a white card so labels stay readable. */
body main .elementor-top-section:has(.elementor-widget-form) .elementor-column > .elementor-widget-wrap:has(.elementor-widget-form) {
  padding: clamp(20px, 2.4vw, 32px) !important;
  border-radius: var(--ilm-radius-lg);
  background: #fff;
  box-shadow: var(--ilm-shadow-md);
}

/* ---------------------------------------------------------- 09 section air --
   Cards built as Elementor columns get a consistent inner padding, radius and
   hover state, so a "card" is a card on every page. */

body main .elementor-top-section .elementor-column > .elementor-widget-wrap:has(> .elementor-widget-heading + .elementor-widget-text-editor) {
  border-radius: var(--ilm-radius);
}

/* ------------------------------------------------------------ 10 motion --
   Reveal is opt-in through a class the script adds, so a failed script leaves
   the page fully visible. Elements already in the first viewport are skipped. */

@media (prefers-reduced-motion: no-preference) {
  .ilm-reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .6s cubic-bezier(.2, .6, .2, 1), transform .6s cubic-bezier(.2, .6, .2, 1);
    will-change: opacity, transform;
  }

  .ilm-reveal.is-in {
    opacity: 1;
    transform: none;
  }

  /* Card grids lift a little further so a row of cards animates as a group. */
  .ilm-reveal.ilm-reveal--card { transform: translateY(24px) scale(.985); }
  .ilm-reveal.ilm-reveal--card.is-in { transform: none; }
}

/* ------------------------------------------------------------- 11 tablet -- */
@media (max-width: 1024px) {
  .ilm-ph__in { grid-template-columns: 1fr; gap: 0; }
  .ilm-ph__aside { display: none; }
  .ilm-ph__title { max-width: 30ch; }
  .ilm-ph__lede { max-width: 62ch; }
}

/* ------------------------------------------------------------- 12 mobile -- */
@media (max-width: 767px) {
  :root { --ilm-section-y: 40px; }

  .ilm-ph {
    padding: 18px 0 34px;
  }

  .ilm-ph__in { padding: 0 20px; }

  .ilm-ph__eyebrow {
    margin: 14px 0 10px !important;
    font-size: .71875rem;
    letter-spacing: .11em;
  }

  .ilm-ph__title {
    max-width: none;
    margin-bottom: 12px !important;
    font-size: clamp(1.72rem, 1.1rem + 4.4vw, 2.35rem) !important;
    line-height: 1.1 !important;
  }

  .ilm-ph__lede {
    font-size: 1rem !important;
    line-height: 1.6 !important;
  }

  /* Two thumb-sized actions side by side: stacking them pushed the header to
     428px on a phone, half the first screen before any content. */
  .ilm-ph__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 20px;
  }

  .ilm-ph__actions .ilm-btn {
    width: 100%;
    min-height: 50px;
    padding-left: 14px;
    padding-right: 14px;
    font-size: .9375rem;
    gap: 8px;
  }

  .ilm-ph__actions .ilm-btn svg { width: 16px; height: 16px; }

  .ilm-ph__trust {
    gap: 6px 14px;
    margin-top: 16px;
  }

  .ilm-ph__trust li { font-size: .78125rem; }

  .ilm-ph__lede { margin-bottom: 0 !important; }

  body main .elementor-widget-text-editor p,
  body main .elementor-widget-text-editor li {
    font-size: 1rem;
    line-height: 1.68;
  }

  body main .elementor-widget-text-editor h2 { margin-top: 1.7em; }

  body main .elementor-widget-text-editor h3 {
    padding-left: 13px;
    margin-top: 1.6em;
  }

  body main .elementor-widget-text-editor ul li,
  body main .elementor-widget-text-editor ol li {
    padding-left: 27px;
  }

  body main .elementor-widget-icon-box .elementor-icon-box-icon .elementor-icon {
    width: 40px;
    height: 40px;
    padding: 9px;
  }

  /* Tap targets: never below 44px on a phone. */
  body main .elementor-widget-icon-list .elementor-icon-list-item a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

@media (max-width: 420px) {
  .ilm-ph__crumbs [aria-current="page"] { max-width: 20ch; }
  .ilm-ph__title { font-size: 1.68rem !important; }
}

/* -------------------------------------------------------- 13 closing CTA --
   The last band on every content page that does not already own an enquiry
   form. Same shape everywhere: copy and two actions on the left, the four
   settings as links on the right. */

.ilm-cta {
  background:
    radial-gradient(90% 120% at 12% 0%, rgba(255, 255, 255, .95), transparent 62%),
    linear-gradient(180deg, #ffffff 0%, #eaf3fb 100%);
  padding: clamp(40px, 4.4vw, 64px) 0;
  border-top: 1px solid rgba(12, 65, 96, .09);
  border-bottom: 1px solid rgba(12, 65, 96, .09);
}

.ilm-cta__in {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  max-width: var(--ilm-container);
  margin: 0 auto;
  padding: 0 var(--ilm-gutter);
}

.ilm-cta__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 12px !important;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ilm-green) !important;
}

.ilm-cta__eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}

.ilm-cta__title {
  margin: 0 0 12px !important;
  font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2.1rem) !important;
  line-height: 1.15;
  color: var(--ilm-navy-deep);
  max-width: 19ch;
  text-wrap: balance;
}

.ilm-cta__lede {
  margin: 0 0 22px !important;
  max-width: 54ch;
  font-size: 1rem !important;
  line-height: 1.62 !important;
  color: var(--ilm-body) !important;
}

.ilm-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* -- places ------------------------------------------------------------- */
.ilm-cta__places {
  padding: 22px;
  border-radius: var(--ilm-radius);
  background: rgba(255, 255, 255, .78);
  border: 1px solid rgba(12, 65, 96, .1);
  box-shadow: var(--ilm-shadow-sm);
}

.ilm-cta__places-title {
  margin: 0 0 12px !important;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ilm-muted) !important;
}

.ilm-cta__places ul {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ilm-cta__places a {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 42px;
  padding: 8px 10px;
  margin: 0 -10px;
  border-radius: 10px;
  font-size: .9375rem;
  font-weight: 500;
  color: var(--ilm-navy);
  text-decoration: none;
  transition: background-color .16s ease, color .16s ease;
}

.ilm-cta__places svg { color: var(--ilm-green); flex: none; }

.ilm-cta__places a:hover,
.ilm-cta__places a:focus-visible {
  background: var(--ilm-sky-soft);
  color: var(--ilm-navy-deep);
}

@media (max-width: 860px) {
  .ilm-cta__in { grid-template-columns: 1fr; }
  .ilm-cta__title { max-width: none; }
  .ilm-cta__actions { flex-direction: column; }
  .ilm-cta__actions .ilm-btn { width: 100%; }
}

/* ----------------------------------------------- 14 card-row alignment --
   Elementor centres a flex widget-wrap, so a two-up row of image cards sits
   30px inside the heading above it. The row should share the section's grid. */

body main .elementor-widget-wrap:has(> .elementor-widget-image-box) {
  justify-content: flex-start;
}

body main .elementor-widget-image-box {
  border-radius: var(--ilm-radius);
}

/* ------------------------------------------------- 15 column containment --
   A few pages carry columns with a pixel width set in the builder (1136px and
   similar). Inside a narrower container they push past the right edge, which on
   a phone means content is simply cut off. Cap every column at its container. */

body main .elementor-column,
body main .elementor-inner-column {
  max-width: 100% !important;
  box-sizing: border-box;
}

body main .elementor-widget,
body main .elementor-widget-container,
body main .elementor-widget-text-editor {
  max-width: 100%;
}

body main .elementor-widget-text-editor img,
body main .elementor-widget-image img,
body main table {
  max-width: 100% !important;
  height: auto;
}

/* Submit button: same pill and height as every other button on the site.
   Elementor's own rule wins on min-height, so this one has to be explicit. */
body .elementor-form .elementor-button,
body main .elementor-form .elementor-button {
  min-height: 54px !important;
  border-radius: 999px !important;
  padding: 15px 28px !important;
  font-size: 1.0625rem !important;
  font-weight: 600;
  letter-spacing: 0;
}

body .elementor-form .elementor-button:hover,
body main .elementor-form .elementor-button:hover {
  transform: translateY(-1px);
}

/* Transient guard: Elementor's stretch script can briefly place a section at
   the previous viewport's offset. Clipping on the main column means a half-done
   layout can never paint a horizontal scrollbar or a shifted page. */
body main {
  overflow-x: clip;
}