tags with no class of their own, so they were inheriting
's 14.13px — the WordPress global-styles size, which nothing else on the page actually uses. Sitting directly above and below a .ce-checklist whose items are var(--ci-text-body) at 17px, they read as noticeably smaller than the list they introduce. Matched to the checklist and to body copy everywhere else on the site. */ .ce-sup-expertise__left > p { font-family: var(--ci-font-primary); font-size: var(--ci-text-body); line-height: 1.7; color: var(--ci-color-navy); } .ce-sup-expertise__right { flex: 1; min-width: 0; } .ce-sup-expertise__list { grid-template-columns: repeat(2, 1fr); width: 100%; } /* SUBGRID, so the two cards in a row share their title and description rows. A card is as tall as its content, and its title row is as tall as its title. Put "Face-to-face and virtual support" beside "Pricing and value" and one title wraps while the other does not, so the two descriptions start 18px apart and the pair reads as misaligned rather than as two cards. It was never only that pair — "Tailored 1:1 curriculum consultancy" sits beside "In-depth guidance" with exactly the same step. Reserving a second line with min-height fixes the desktop case and then fails at iPad landscape, where the cards narrow to 298px and the longest titles take THREE lines. Any fixed reserve is a guess about how the titles will break at a width nobody has measured yet. Subgrid makes the question go away. The two rows belong to the parent grid, so every card in a row is measured against its neighbour whatever the titles do — two lines, three, or one. That subgrid now lives in feature-list.css and covers every card of this shape on the site; only the gap stays here. row-gap is restated here on purpose: a subgrid inherits its parent's gutters, so without it the 1.5rem meant to separate one card from the next would also open up between a title and its own description. Stating it overrides the inherited value for the tracks this card spans, and leaves the parent's gap to do its real job between the cards. */ .ce-sup-expertise__list .ce-feature-list__item { min-height: 0; row-gap: 0.5rem; cursor: default; } .ce-sup-expertise__list .ce-feature-list__item:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65), 0 4px 20px rgba(0, 0, 0, 0.05); transform: none; } /* The hover lift, restored for the one card that goes somewhere. Was :nth-child(6) — the Pricing card's position in the list, which is only true until someone reorders the array in acf-support.php. Keyed on the card actually containing a link instead, it stays right whatever the order, and says what it means. cursor is no longer needed here: the stretched link above covers the card, so the pointer comes from the anchor itself. */ .ce-sup-expertise__list .ce-feature-list__item:has(.ce-sup-expertise__card-link):hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 8px 28px rgba(0, 0, 0, 0.08); } .ce-sup-expertise__title-row { display: flex; align-items: center; gap: 0.65rem; } .ce-sup-expertise__title-row .ce-feature-list__title { margin: 0; } .ce-sup-expertise__list .ce-feature-list__badge { font-size: 1.75rem; flex-shrink: 0; } /* This is the only card in the grid whose description is a link, so it has to carry the affordance itself. No underline by choice — the chevron, the brand colour and the hover response do that work. Sized to match the sibling cards' body copy so it reads as the same kind of text, only linked. */ .ce-sup-expertise__card-link { font-family: var(--ci-font-primary); font-size: var(--ci-text-card-body); font-weight: 600; color: var(--ci-color-develop); text-decoration: none; transition: color 0.2s ease; } /* ── The whole card is the link, not just its last two lines ───────────────── The card is 356x179 and only the ~250px of link text at the bottom of it did anything. Everything above — the coins icon, "Pricing and value", the space between — looked like part of a button and was inert. A stretched pseudo-element rather than wrapping the card in an . Wrapping would mean moving .ce-feature-list__item onto the anchor so it stays the grid child, and that class carries the glass tint, the nth-child colour cycle and the hover lift shared with a dozen other pages. The ::after belongs to the link, so the card inherits the link's cursor and :hover for free, and the accessible name stays the link's own text rather than the whole card read aloud. position: relative is stated even though .ce-feature-list__item's translateZ(0) already makes it a containing block. That transform is there for paint promotion, not layout, and would be a silent thing to depend on: drop it one day and the overlay quietly stretches to the section instead. */ .ce-sup-expertise__list .ce-feature-list__item:has(.ce-sup-expertise__card-link) { position: relative; } .ce-sup-expertise__card-link::after { content: ''; position: absolute; inset: 0; border-radius: inherit; } .ce-sup-expertise__card-link:hover, .ce-sup-expertise__card-link:focus-visible { color: #8a3a5c; text-decoration: none; } /* Not underlined, and nudged along on hover so the link reacts as a whole. */ .ce-sup-expertise__card-link-chevron { display: inline-block; margin-left: 0.35rem; text-decoration: none; font-weight: 700; transition: transform 0.2s ease; } .ce-sup-expertise__card-link:hover .ce-sup-expertise__card-link-chevron { transform: translateX(3px); } @media (prefers-reduced-motion: reduce) { .ce-sup-expertise__card-link-chevron { transition: none; } .ce-sup-expertise__card-link:hover .ce-sup-expertise__card-link-chevron { transform: none; } } @media (max-width: 900px) { .ce-sup-expertise { padding: 3rem 0; } .ce-sup-expertise__columns { flex-direction: column; gap: 2.5rem; } .ce-sup-expertise__left { flex: none; max-width: 100%; } } @media (max-width: 600px) { .ce-sup-expertise__list { grid-template-columns: 1fr; } } /* ── Dual-button CTA ────────────────────────────────────────────────────────── */ .ce-support-cta__btns { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; align-items: center; } /* ═══════════════════════════════════════════════════════════════════════════ ROUTES FOR EXISTING CUSTOMERS — [ce_sup_routes] Sits under the hero. Built on .ce-feature-list; only the things that differ from that component are set here. ═══════════════════════════════════════════════════════════════════════════ */ /* White, not the component's #f9f9f9. The section directly below this one is a .page-split--light, whose text panel is #f9f9f9 — a grey band here would run straight into it and read as one undifferentiated slab. The two grey diamonds are the same treatment .ce-mae-reassurance uses on white. */ .ce-sup-routes { background: #ffffff; position: relative; overflow: clip; /* The header is position: fixed, so an #get-support landing puts this section's top edge under it and eats the 5rem of breathing room above the heading. scroll-margin-top is the house pattern for this — same --nav-bottom fallback as cpd.css, faq.css and enquire.css. */ scroll-margin-top: var(--nav-bottom, 64px); } .ce-sup-routes::before { content: ''; position: absolute; width: 450px; height: 450px; background: #f9f9f9; border-radius: 2.75rem; transform: rotate(45deg); top: -80px; left: -90px; pointer-events: none; z-index: 0; } .ce-sup-routes::after { content: ''; position: absolute; width: 260px; height: 260px; background: #f9f9f9; border-radius: 2rem; transform: rotate(45deg); top: 300px; left: 178px; pointer-events: none; z-index: 0; } .ce-sup-routes .site-container { position: relative; z-index: 1; } .ce-sup-routes__title-row { display: flex; align-items: center; justify-content: center; gap: 0.65rem; margin-bottom: 0.75rem; } .ce-sup-routes .ce-feature-list__heading { margin: 0; } .ce-sup-routes__sub { font-family: var(--ci-font-primary); font-size: var(--ci-text-body); color: #7a8a9a; text-align: center; margin: 0 auto 3rem; line-height: 1.7; } /* ── Equal columns, non-negotiable ────────────────────────────────────────── feature-list.css uses repeat(3, 1fr), and 1fr is minmax(auto, 1fr): an item whose MIN-CONTENT is wider than its share may take more. The email address has no break opportunity in it, so as a button its min-content forced its own column to 400px while the other two were squeezed to 314px — three visibly different card widths. minmax(0, ...) caps each column at its share; letting the address wrap keeps the button inside that cap. Both halves are needed — the cap alone would clip, the wrap alone would not stop the column growing. */ .ce-sup-routes__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } /* And the collapse has to be restated for THIS selector. The responsive rules in feature-list.css target .ce-feature-list__grid at the same 0,1,0 specificity but earlier in the cascade, so the rule above was beating them at every width — at phone width the grid stayed three columns of 98px and the buttons broke to one character per line. Straight to one column, because feature-list.css already refuses to put three cards two-up. */ @media (max-width: 900px) { .ce-sup-routes__grid { grid-template-columns: 1fr; } } /* Cards are header + button only — no body copy — so the 13rem floor tuned for cards carrying a paragraph would leave a block of empty space. */ .ce-sup-routes .ce-feature-list__item { min-height: 0; gap: 0.75rem; } .ce-sup-routes .ce-feature-list__header { display: flex; align-items: center; gap: 0.65rem; } .ce-sup-routes .ce-feature-list__badge { font-size: 1.75rem; flex-shrink: 0; } /* Full width is not decoration — it is what makes the address fit. A button sized to its own label would be sized by the longest of the three, and that one is 37 characters. margin-top: auto pins all three to the bottom so they line up across the row whatever the titles do. 16px rather than the base 20px, which is the site's floor for any text: at 20px the address needs a 438px button inside a 344px card. */ .ce-sup-routes .ce-feature-list__item .ci-btn { align-self: stretch; margin-top: auto; max-width: 100%; font-size: var(--ci-text-utility); padding: calc(0.7rem - 2px) calc(1.25rem - 2px); line-height: 1.35; text-align: center; /* break-word, not anywhere: the label carries a