/*
 * Glacial Blocks — the little CSS the blocks need beyond css/webflow.css.
 * Enqueued after the theme style chain (see blocks/glacial-blocks.php).
 */

/* Blocks inside the inner-page wrapper already sit in a 90%/1350px container — don't shrink again. */
.standard-inner-wrapper > .wrap {
	width: 100%;
}

/* Section spacing tokens (default = the Webflow class' own padding) */
.gl-section.gl-space-none { padding-top: 0; padding-bottom: 0; }
.gl-section.gl-space-small { padding-top: 2%; padding-bottom: 2%; }
.gl-section.gl-space-large { padding-top: 8%; padding-bottom: 8%; }
.gl-section > .wrap { padding-top: 0; padding-bottom: 0; }

/* Text helpers */
.gl-center { text-align: center; }
.gl-white,
.gl-white h1, .gl-white h2, .gl-white h3, .gl-white h4, .gl-white h5, .gl-white h6,
.gl-white p, .gl-white li { color: var(--color); }

/* Button row */
.gl-buttons { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0; }
.gl-buttons .button { margin: 0; }
.gl-buttons.gl-center { justify-content: center; }

/* Grid primitive — collapse point matches .wrap.flex in webflow.css (767px) */
.gl-grid { display: grid; gap: 40px; align-items: start; }
.gl-cols-2 { grid-template-columns: 1fr 1fr; }
.gl-cols-3 { grid-template-columns: 1fr 1fr 1fr; }
.gl-cols-4 { grid-template-columns: 1fr 1fr 1fr 1fr; }
.gl-cols-2-1 { grid-template-columns: 2fr 1fr; }
.gl-cols-1-2 { grid-template-columns: 1fr 2fr; }
/* Columns top-align so two text columns keep their first lines level. A column holding
   nothing but an image has no first line to match, though, so against a taller (or
   shorter) text column it leaves a block of dead band. Centre just those pairs.
   Browsers without :has() drop the rule and keep the start alignment. */
.gl-grid.gl-cols-2:has(> .gl-col > .gl-image:only-child) { align-items: center; }
@media (max-width: 767px) {
	.gl-grid.gl-cols-2:has(> .gl-col > .gl-image:only-child) { align-items: start; }
}
.gl-gap-small { gap: 20px; }
.gl-gap-large { gap: 60px; }
.gl-col > :first-child { margin-top: 0; }
@media (max-width: 991px) {
	.gl-cols-3, .gl-cols-4 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767px) {
	.gl-grid, .gl-cols-2, .gl-cols-3, .gl-cols-4, .gl-cols-2-1, .gl-cols-1-2 { grid-template-columns: 1fr; }
}

/* Two-column order swapping (grid + split-section) */
@media (min-width: 768px) {
	.gl-swap-desktop > :first-child { order: 2; }
	.gl-swap-desktop > :last-child { order: 1; }
}
@media (max-width: 767px) {
	.gl-swap-mobile > :first-child { order: 2; }
	.gl-swap-mobile > :last-child { order: 1; }
}

/* Split section: keep the image from collapsing to 0 height when its column stacks */
.gl-split .img-div._48 { min-height: 240px; }
.gl-split .img-div._48 .img { max-height: 600px; object-position: 50% 20%;}

/* Standalone image */
.gl-image .img { height: auto; }

/* Generic image cards (no Webflow IX2): overlay content always visible */
.gl-cards .age_wrapper.gl-card .age_content_div { display: flex; opacity: 1; }
@media (max-width: 991px) {
	.gl-circles { flex-flow: wrap; justify-content: center; gap: 15px; }
	.gl-circles .service-link { margin-left: 0; }
}

/* FAQ (native details/summary — no JS) */
.gl-faq { margin: 2rem 0; }
.gl-faq-item { border-bottom: 1px solid rgba(104, 44, 139, 0.25); }
.gl-faq-q { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem 0; }
.gl-faq-q::-webkit-details-marker { display: none; }
.gl-faq-q::after { content: "+"; flex: none; font-size: 1.6em; line-height: 1; color: var(--color-3); }
.gl-faq-item[open] > .gl-faq-q::after { content: "\2013"; }
.gl-faq-h { margin: 0; font-size: 1.15em; font-style: normal; font-family: itc-avant-garde-gothic-pro, sans-serif; }
.gl-faq-a { padding: 0 0 1.25rem; }
.gl-faq-q:focus-visible { outline: 2px solid var(--color-4); outline-offset: 2px; }

/* Device visibility */
@media (min-width: 992px) { .gl-hide-desktop { display: none !important; } }
@media (min-width: 768px) and (max-width: 991px) { .gl-hide-tablet { display: none !important; } }
@media (max-width: 767px) { .gl-hide-mobile { display: none !important; } }

/* Focus */
.button:focus-visible, .gl-faq-q:focus-visible, .service-link:focus-visible { outline: 2px solid var(--color-4); outline-offset: 3px; }

/* Reduced motion: let Webflow IX2 elements sit in their final state */
@media (prefers-reduced-motion: reduce) {
	[data-w-id] { transition: none !important; animation: none !important; }
}

/* Editor canvas only */
.editor-styles-wrapper .gl-hide-desktop,
.editor-styles-wrapper .gl-hide-tablet,
.editor-styles-wrapper .gl-hide-mobile { display: revert !important; opacity: 0.55; }
.editor-styles-wrapper .gl-img-placeholder { min-height: 120px; width: 100%; border: 1px dashed #999; }
.editor-styles-wrapper .hero { margin-top: 0; }
.editor-styles-wrapper .glacial-blocks-editor-note { font: 12px/1.4 sans-serif; color: #666; padding: 4px 0; }

/* =========================================================================
 * Inner-page design layer (Sept 2026) — brings the homepage's colour, rounded
 * cards and rhythm into the white inner-page wrapper.
 * ====================================================================== */

/* Section backgrounds beyond Webflow's white/purple */
.gl-section.gl-bg-light { background-color: #f6f0fa; padding-top: 6%; padding-bottom: 6%; }
/* The same brand artwork .gl-highlight-gradient uses, so a full-bleed band and a highlight
   card on one page read as one family. Anchored to the viewport (like the body gradient in
   css/fehs-inner.css) so a 1200px-tall band shows the artwork rather than a stretched crop,
   and every gradient surface down a page lines up on the same slice.
   `cover` is what holds it together where fixed attachment is not honoured: webflow's
   components.css forces `background-attachment: scroll` on touch, and mobile Safari ignores
   fixed regardless — there the artwork sizes to the band instead, and still fills it.
   The pink end of the artwork is too light for white text (2.6:1), so the deep-purple scrim
   stays on top: the hues survive and every part clears 4.5:1 against the white type. */
.gl-section.gl-bg-gradient { background-color: #660991; background-image: linear-gradient(rgba(51, 3, 73, .35), rgba(51, 3, 73, .35)), url("../../images/new-gradient.jpg"); background-position: 50% 50%; background-repeat: no-repeat; background-size: cover; background-attachment: fixed; padding-top: 6%; padding-bottom: 6%; }
.gl-section.gl-bg-gradient .wrap,
.gl-section.gl-bg-gradient h2, .gl-section.gl-bg-gradient h3, .gl-section.gl-bg-gradient h4,
.gl-section.gl-bg-gradient p, .gl-section.gl-bg-gradient li { color: var(--color); }
.gl-section.purple .wrap,
.gl-section.purple h2, .gl-section.purple h3, .gl-section.purple h4,
.gl-section.purple p, .gl-section.purple li { color: var(--color); }
.entry .gl-section.purple a:not(.button), .entry .gl-section.gl-bg-gradient a:not(.button) { color: var(--color); text-decoration-color: var(--color-6); }
.gl-section.purple .button:not(.blue), .gl-section.gl-bg-gradient .button:not(.blue) { background-color: var(--color); color: var(--color-3); }
.gl-section.purple .button:not(.blue):hover, .gl-section.gl-bg-gradient .button:not(.blue):hover { background-color: var(--color-4); color: var(--color); }
.gl-section.gl-bg-gradient .button.blue, .gl-section.purple .button.blue { background-color: var(--color); color: var(--color-3); border-color: var(--color); }
.gl-section.gl-bg-gradient .button.blue:hover, .gl-section.purple .button.blue:hover { background-color: var(--color-4); color: var(--color); }

/* Section rhythm: the white wrapper already pads the page; sections space themselves.
   Every band pads 6% top and bottom (the Webflow value .purple and .ip-section-white
   already use) so a colour change always lands on the same rhythm. */
.gl-section > .wrap > :first-child { margin-top: 0; }
.gl-section > .wrap > :last-child { margin-bottom: 0; }
.gl-section.ip-section-white { padding-top: 6%; padding-bottom: 6%; }
/* ...except where a white band meets another white band, or follows the opening split:
   there is no colour edge to clear, so the band above already supplies the whole gap. */
.standard-inner-wrapper > .gl-section:not(.gl-bg-light):not(.gl-bg-gradient):not(.purple) + .gl-section.ip-section-white,
.standard-inner-wrapper > .gl-split + .gl-section.ip-section-white { padding-top: 0; }
.standard-inner-wrapper > .gl-split { padding-bottom: 6%; }
.standard-inner-wrapper > .gl-split + .gl-split { padding-top: 3%; }
/* A split that follows a colour band has no gap above it: the band's 6% padding sits
   inside its own background, so the split's first line lands on the colour edge. */
.standard-inner-wrapper > .gl-section:not(.ip-section-white) + .gl-split { padding-top: 6%; }
/* That 6% is a share of the section's own width, so on a phone it resolves to about
   21px — less than the gap between two paragraphs inside the band. Hold a floor there
   (the gl-space-* tokens opt out; so does the white-on-white collapse rule above). */
@media (max-width: 767px) {
	.gl-section.gl-bg-light:not([class*="gl-space-"]),
	.gl-section.gl-bg-gradient:not([class*="gl-space-"]),
	.gl-section.purple:not([class*="gl-space-"]),
	.gl-section.ip-section-white:not([class*="gl-space-"]) { padding-top: 44px; padding-bottom: 44px; }
}
.standard-inner-wrapper > .gl-grid, .standard-inner-wrapper > .gl-info-cards, .standard-inner-wrapper > .gl-highlight, .standard-inner-wrapper > .gl-cards, .standard-inner-wrapper > .gl-circles { margin-top: 3%; margin-bottom: 3%; }

/* Lead paragraph look for the first split on a page */
.gl-split .txt-div._48 > p:first-child { font-size: 1.1em; }

/* Keep standalone prose readable inside the 1350px column */
.gl-section .wrap:not(.center) > p, .gl-section .wrap:not(.center) > ul[role=list]:not(.gl-checklist) { max-width: 60em; }
.gl-section .wrap.center > p { max-width: 60em; margin-left: auto; margin-right: auto; }

/* Info cards */
.gl-info-cards { display: grid; gap: 30px; margin: 30px 0; counter-reset: gl-step; align-items: stretch; }
.gl-info-cols-2 { grid-template-columns: repeat(2, 1fr); }
.gl-info-cols-3 { grid-template-columns: repeat(3, 1fr); }
.gl-info-cols-4 { grid-template-columns: repeat(4, 1fr); }
.gl-info-card { border-radius: 20px; padding: 36px 32px; position: relative; }
.gl-info-light .gl-info-card { background-color: #f6f0fa; }
.gl-bg-light .gl-info-light .gl-info-card { background-color: var(--color); box-shadow: 0 10px 30px rgba(104, 44, 139, 0.08); }
.gl-info-glass .gl-info-card { background-color: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.35); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
.gl-info-glass .gl-info-card, .gl-info-glass .gl-info-card h2, .gl-info-glass .gl-info-card h3, .gl-info-glass .gl-info-card h4, .gl-info-glass .gl-info-card p, .gl-info-glass .gl-info-card li { color: var(--color); }
.entry .gl-info-glass .gl-info-card a:not(.button) { color: var(--color); }
.gl-info-outline .gl-info-card { background-color: var(--color); border: 2px solid transparent; background-image: linear-gradient(var(--color), var(--color)), linear-gradient(143deg, #1e1e87, #660991 30%, #ef01a0 76%, #fc7d43); background-origin: border-box; background-clip: padding-box, border-box; }
.gl-info-card .gl-info-card-title { font-family: itc-avant-garde-gothic-pro, sans-serif; font-style: normal; text-transform: uppercase; letter-spacing: 3px; font-size: 1em; font-weight: 500; line-height: 1.5; color: var(--color-3); margin: 0 0 16px; }
.gl-info-glass .gl-info-card .gl-info-card-title { color: var(--color); }

/* Linked info cards: the anchor sits on the title and is stretched over the whole card,
   so there is one properly-labelled link per card and the body can still hold its own. */
.gl-info-card-linked { position: relative; }
.entry a.gl-info-card-link:not(.button), .entry a.gl-info-card-link:not(.button):hover { color: inherit; text-decoration: none; }
.gl-info-card-link::after { content: ""; position: absolute; inset: 0; border-radius: 20px; }
.gl-info-card-link:focus-visible::after { outline: 3px solid currentColor; outline-offset: 4px; }
/* The card's own links stay above the stretched overlay. */
.gl-info-card-linked .gl-info-card-body a { position: relative; z-index: 1; }
/* Hover states hang off :has(.gl-info-card-link) so they only fire on the real anchor —
   the editor renders the title as RichText, so the canvas gets no hover lift. */
.gl-info-card-linked:has(.gl-info-card-link) { transition: transform 200ms ease, background-color 200ms ease; }
.gl-info-card-linked:has(.gl-info-card-link):hover { transform: translateY(-3px); }
.gl-info-light .gl-info-card-linked:has(.gl-info-card-link):hover { background-color: #efe4f6; }
.gl-info-glass .gl-info-card-linked:has(.gl-info-card-link):hover { background-color: rgba(255, 255, 255, 0.22); }
/* Arrow marker so a linked card reads as a link and not just a tinted panel. It hangs off the
   title rather than the anchor because .gl-info-card-link::after is already the stretched overlay.
   Masked rather than inlined so it picks up whatever colour the card style sets. */
.gl-info-card-linked .gl-info-card-title::after { content: ""; display: inline-block; width: 0.9em; height: 0.9em; margin-left: 0.5em; vertical-align: -0.1em; background-color: currentColor; -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.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain 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.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform 200ms ease; }
.gl-info-card-linked:has(.gl-info-card-link):hover .gl-info-card-title::after { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) {
	.gl-info-card-linked:has(.gl-info-card-link) { transition: none; }
	.gl-info-card-linked:has(.gl-info-card-link):hover { transform: none; }
	.gl-info-card-linked .gl-info-card-title::after { transition: none; }
	.gl-info-card-linked:has(.gl-info-card-link):hover .gl-info-card-title::after { transform: none; }
}
.gl-info-card-body > :last-child { margin-bottom: 0; }
.gl-info-card-body p, .gl-info-card-body li { margin-bottom: 12px; }
.gl-info-card-body ul { padding-left: 20px; }
.gl-info-numbered .gl-info-card::before { counter-increment: gl-step; content: counter(gl-step); display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background-image: linear-gradient(143deg, #660991, #ef01a0); color: var(--color); font-family: itc-avant-garde-gothic-pro, sans-serif; font-size: 1.25em; font-weight: 500; line-height: 1; margin-bottom: 20px; }
.gl-info-glass.gl-info-numbered .gl-info-card::before { background-image: none; background-color: var(--color); color: var(--color-3); }
@media (max-width: 991px) {
	.gl-info-cols-3, .gl-info-cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
	.gl-info-cards, .gl-info-cols-2, .gl-info-cols-3, .gl-info-cols-4 { grid-template-columns: 1fr; gap: 20px; }
	.gl-info-card { padding: 28px 24px; }
}

/* Check list */
.gl-checklist { list-style: none; padding-left: 0; margin: 0 0 20px; display: grid; gap: 14px 40px; }
.gl-checklist-cols-2 { grid-template-columns: 1fr 1fr; }
.gl-checklist-cols-3 { grid-template-columns: 1fr 1fr 1fr; }
.gl-checklist li { position: relative; padding-left: 38px; margin-bottom: 0; }
.gl-checklist li::before { content: ""; position: absolute; left: 0; top: 0.3em; width: 24px; height: 24px; border-radius: 50%; background-color: var(--color-3); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 13px; }
.gl-white .gl-checklist li::before, .purple .gl-checklist li::before, .gl-bg-gradient .gl-checklist li::before, .gl-info-glass .gl-checklist li::before { background-color: var(--color); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23682c8b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E"); }

/* Swoosh marker (icon: "swoosh") — the brand mark in place of a check, for risk factors,
   symptoms, conditions and anything else a tick would wrongly congratulate. No chip: the mark
   sits bare so it reads as clearly NOT a check, but keeps the 38px indent so a page mixing both
   still lines up. These selectors must mirror the check rules above one-for-one — an element
   carrying .gl-checklist-swoosh also carries .gl-checklist, so a bare .gl-checklist-swoosh rule
   would lose to the two-class .gl-white .gl-checklist override on coloured bands. */
.gl-checklist-swoosh li::before { width: 28px; height: 12px; top: 0.42em; border-radius: 0; background-color: transparent; background-image: url("swoosh-bullet.svg"); background-size: 28px auto; background-position: left center; }
.gl-white .gl-checklist-swoosh li::before, .purple .gl-checklist-swoosh li::before, .gl-bg-gradient .gl-checklist-swoosh li::before, .gl-info-glass .gl-checklist-swoosh li::before { background-color: transparent; background-image: url("swoosh-bullet-white.svg"); }

/* Link lists (arrow: true) — for lists whose every item is a link to another page. Same arrow,
   travel and easing as the linked info-card above, so "this goes somewhere" reads identically
   wherever it appears. Masked rather than inlined so it takes the link's own colour (purple on
   light bands, white on coloured ones) with no per-context override. inline-block also stops an
   underlined link striking through the arrow: text decoration does not propagate into atomic
   inline boxes. */
.gl-checklist-arrow li > a::after { content: ""; display: inline-block; width: 0.85em; height: 0.85em; margin-left: 0.45em; vertical-align: -0.1em; background-color: currentColor; -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.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain 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.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform 200ms ease; }
.gl-checklist-arrow li > a:hover::after, .gl-checklist-arrow li > a:focus-visible::after { transform: translateX(4px); }

/* Boxed list — the Webflow .list-div panel that glacial/bullet-list renders when
   "Purple box" is on. It is the one list on the site that kept browser discs, and the
   list's own 30px bottom margin sat inside the panel, so the floor cleared the last
   line by 50px while the ceiling cleared the first by 20. Same check marker as
   .gl-checklist, white on the purple panel, and the panel pads evenly. */
.list-div { padding: 24px; }
.list-div > ul { list-style: none; margin: 0; padding-left: 0; display: grid; gap: 14px; }
.list-div > ul > li { position: relative; margin: 0; padding-left: 38px; }
.list-div > ul > li::before { content: ""; position: absolute; left: 0; top: 0.3em; width: 24px; height: 24px; border-radius: 50%; background-color: var(--color); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23682c8b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 13px; }
@media (prefers-reduced-motion: reduce) {
	.gl-checklist-arrow li > a::after { transition: none; }
	.gl-checklist-arrow li > a:hover::after, .gl-checklist-arrow li > a:focus-visible::after { transform: none; }
}
@media (max-width: 767px) {
	.gl-checklist-cols-2, .gl-checklist-cols-3 { grid-template-columns: 1fr; }
}

/* Highlight band */
.gl-highlight { border-radius: 20px; padding: 6% 8%; margin: 40px 0; text-align: center; color: var(--color); position: relative; overflow: hidden; }
.gl-highlight.alignfull { border-radius: 0; margin-top: 0; margin-bottom: 0; padding: 6% 8%; }
/* The band borrows the site's backdrop artwork — the same new-gradient.jpg webflow.css
   paints on <body> — scaled just past the band so the blue-to-magenta sweep reads end to
   end without the banding of the old four-stop CSS gradient. Percentage sizing keeps the
   same framing on the inset band and the alignfull one; the colour is the image's
   fallback. No <body> tint layer here: the band wants the artwork at full saturation. */
.gl-highlight-gradient { background-color: #660991; background-image: url("../../images/new-gradient.jpg"); background-position: 50% 50%; background-repeat: no-repeat; background-size: cover; background-attachment: fixed; }
.gl-highlight-purple { background-color: var(--color-3); }
.gl-highlight-light { background-color: #f6f0fa; color: var(--color-3); }
.gl-highlight-inner { max-width: 900px; margin: 0 auto; }
.gl-highlight .gl-highlight-text { font-family: century-old-style-std, serif; font-style: italic; font-weight: 400; font-size: 2em; line-height: 1.3em; margin: 0; color: inherit; }
.gl-highlight .gl-highlight-text + .button { margin: 28px 0 0; }
.gl-highlight .button { margin: 0; }
.gl-highlight-light .button { background-color: var(--color-3); color: var(--color); border-color: var(--color-3); }
.gl-highlight-light .button:hover { background-color: var(--color-4); border-color: var(--color-4); }
/* Optional points under a highlight statement: body-size, left-aligned inside the centred band */
.gl-highlight .gl-highlight-list { max-width: 620px; margin: 28px auto 0; text-align: left; gap: 10px 40px; font-size: 1rem; }
.gl-highlight .gl-highlight-list li { line-height: 1.55; margin-bottom: 0; }
.gl-highlight .gl-highlight-list + .button { margin-top: 28px; }
.gl-highlight-gradient .gl-highlight-list li::before, .gl-highlight-purple .gl-highlight-list li::before { background-color: var(--color); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23682c8b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E"); }
@media (max-width: 767px) {
	.gl-highlight { padding: 32px 24px; }
	.gl-highlight .gl-highlight-text { font-size: 1.5em; }
	.gl-highlight .gl-highlight-list { margin-top: 20px; }
}

/* Image cards / circle cards used inside inner pages */
.standard-inner-wrapper .gl-cards { margin-top: 30px; }
.standard-inner-wrapper .gl-circles { justify-content: center; gap: 20px; flex-wrap: wrap; margin: 30px 0; }
.standard-inner-wrapper .gl-circles .service-link { margin-left: 0; }

/* Cards keep left-aligned copy even inside a centered section; links inherit on coloured bands */
.wrap.center .gl-info-card { text-align: left; }
.entry .gl-highlight a:not(.button) { color: inherit; text-decoration: underline; }
.wrap.center .gl-info-cards, .wrap.center .gl-checklist { text-align: left; }

/* Circle cards on coloured bands keep their own dark copy inside the white pill */
.gl-section.purple .inside-service, .gl-section.gl-bg-gradient .inside-service, .gl-white .inside-service,
.gl-section.purple .inside-service h4, .gl-section.gl-bg-gradient .inside-service h4, .gl-white .inside-service h4 { color: #333; }
/* Link-only pills (no blurb) don't need the full 450px */
.gl-circles .service-link:has(.inside-service > div:empty) { min-height: 0; }
.gl-circles .service-link:has(.inside-service > div:empty) .inside-service { padding-bottom: 45px; }
.gl-circles .service-link:has(.inside-service > div:empty) .inside-service h4 { margin-bottom: 0; }

/* Two-card image rows: centre them instead of pinning to the edges */
.gl-cards:has(> .gl-card:nth-child(2):last-child) { justify-content: center; gap: 4%; }