/* Site-wide alignment corrections (audit 2026-10-19). Loaded after every other
 * stylesheet. Each block names the problem it fixes so it can be folded into
 * the owning stylesheet later. */

/* 1. Card grids whose last row left one or two cards stranded on the left.
 * Desktop/tablet only: the grids become centred flex rows with the same column
 * count and gap, so full rows look unchanged and a short last row is centred.
 * Flex rows still stretch cards to equal height within a row. */
:root { --da-cols: 3; --da-gap: 20px; }
@media (min-width: 768px) {
	.smh-card-grid,
	.dih-industry-grid,
	.dis-local-areas__grid,
	.dis .dis-band--server-benefits .dis-dental-benefits__grid,
	.sah-grid,
	.dis-cards:not(.dis-cards--cta-grid):not(.dis-cards--grouped) {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: var(--da-gap);
	}
	:is(.smh-card-grid, .dih-industry-grid, .dis-local-areas__grid, .dis-dental-benefits__grid, .sah-grid, .dis-cards:not(.dis-cards--cta-grid):not(.dis-cards--grouped)) > * {
		flex: 0 0 calc((100% - (var(--da-cols) - 1) * var(--da-gap)) / var(--da-cols));
		max-width: calc((100% - (var(--da-cols) - 1) * var(--da-gap)) / var(--da-cols));
		min-width: 0;
	}
	.smh-card-grid { --da-cols: 2; --da-gap: 22px; }
	.dih-industry-grid { --da-cols: 2; --da-gap: 20px; }
	.dis-local-areas__grid, .dis .dis-band--server-benefits .dis-dental-benefits__grid { --da-cols: 2; --da-gap: 18px; }
	.sah-grid { --da-cols: 2; --da-gap: 20px; }
	.dis-cards:not(.dis-cards--cta-grid):not(.dis-cards--grouped) { --da-cols: 2; --da-gap: 18px; }
}
@media (min-width: 721px) and (max-width: 767px) {
	.dih-industry-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; }
	.dih-industry-grid > * { flex: 0 0 calc((100% - 20px) / 2); max-width: calc((100% - 20px) / 2); }
}
@media (min-width: 901px) {
	.dis-local-areas__grid, .dis .dis-band--server-benefits .dis-dental-benefits__grid { --da-cols: 3; }
	.dis-cards:not(.dis-cards--cta-grid):not(.dis-cards--grouped) { --da-cols: 3; }
}
@media (min-width: 1001px) {
	.dih-industry-grid, .sah-grid { --da-cols: 3; }
}
@media (min-width: 1024px) {
	.smh-card-grid { --da-cols: 3; }
}
/* The default card band fitted four 288px cards per row on wide screens. */
@media (min-width: 1240px) {
	.dis-cards:not(.dis-cards--cta-grid):not(.dis-cards--grouped):not(:is(.dis-band--comprehensive, .dis-band--tech-support-services) .dis-cards) { --da-cols: 4; }
}

/* 2. Card links/buttons at different heights across a row: pin them to the
 * bottom of each card. */
.dih-capability,
.da-service-scope > article,
.da-native-blog-card__body,
.dab-blog-related__card,
.dab-blog-related__body,
.dih-card__link {
	display: flex;
	flex-direction: column;
}
.da-native-blog-card__body, .dab-blog-related__body { flex: 1 1 auto; }
.dih-capability > a:last-child,
.da-service-scope > article > a:last-child,
.da-native-blog-card__body > a:last-child,
.dab-blog-related__read,
.dih-card__more {
	margin-top: auto;
	padding-top: 14px;
	align-self: flex-start;
}

/* 3. Blog listing: card titles inherited the global section-heading size
 * (heading-system.css, !important) and link underline, which made cards
 * ragged. Keep them a readable card-title size. */
body[class] main .da-native-blog-card h2 {
	margin: 10px 0 12px;
	font-size: clamp(20px, 1.7vw, 23px) !important;
	line-height: 1.3 !important;
	letter-spacing: -.01em;
}
body .da-native-blog-card h2 a { color: #0f1d3d; text-decoration: none; }
body .da-native-blog-card h2 a:hover, body .da-native-blog-card h2 a:focus-visible { color: #1667d9; text-decoration: underline; }
body .da-native-blog-card__body > p:first-child { margin: 0; color: #5b6b82; font-size: 14px; }
body .da-native-blog-card__body > a:last-child { font-weight: 600; text-decoration: none; }

/* 4. Generic page hero (Privacy Policy and other plain pages) was boxed at
 * 980px, so its text started ~130px right of the logo and the page body. */
.da-page-hero .da-wrap { max-width: none; }
.da-page-hero .da-wrap > h1, .da-page-hero .da-wrap > p { max-width: 760px; }

/* 5. IT service pages mixed centred and left-aligned section headings. Card
 * bands keep their centred head; the heading above a centred card grid now
 * uses the same treatment on every page, and the oversized empty gap after
 * the service cards is reduced. */
.dis .dis-band--server-benefits .dis-band__head { text-align: center; margin-left: auto; margin-right: auto; }
.dis .dis-band--server-benefits .dis-band__head h2::after { left: 50%; transform: translateX(-50%); }
/* "Need a different service?" added 80px of top padding on top of the
 * previous band's bottom padding, leaving a large empty gap. */
.dis-catalogue > .da-section { padding-top: clamp(16px, 2.5vw, 32px); }

/* AI service FAQ: the wrapper was capped at 920px, so the two-column FAQ sat
 * indented inside the page instead of lining up with the sections above. */
.ai-section--faq .ai-faq-wrap, .ai-section--faq > .da-wrap { max-width: none; }

/* 6. Google review sections render their reviews from an external Trustindex
 * script. Until that script has drawn the widget, the section was an empty
 * heading. Show the section only once reviews are actually on the page. */
section:has(.da-google-reviews > pre.ti-widget):not(:has(.ti-widget-container)) { display: none; }
/* The Trustindex loader swaps the <pre> for a <template> + empty <div>, so also hide the location-page block until reviews exist. */
section.dal-reviews:not(:has(.ti-widget-container, .ti-review-item)) { display: none; }

/* 7. Hire a Techie: the enquiry guidance heading sat directly under the cards. */
.da-native-service .da-service-scope + h2 { margin-top: clamp(40px, 5vw, 64px); }

/* 8. Sections with a centred heading must centre the loose text and button
 * beneath it (About "Client Feedback & Reviews", homepage "Find services that
 * fit your work" → "View all industries"). Card grids inside stay left-aligned. */
.da-about-rebuild-reviews .da-google-reviews { text-align: center; }
.da-about-rebuild-reviews .da-google-reviews > p { max-width: 640px; margin-left: auto; margin-right: auto; }

/* 9. Whole-card links (card-links.js marks cards with one destination). */
.da-card-click { cursor: pointer; }
.da-card-click:focus-within { outline: 3px solid rgba(22, 103, 217, .35); outline-offset: 3px; }

/* 10. Marketing service FAQs: answers were capped at 75ch while the question
 * row spans the full width, so answers wrapped early. Match the question width. */
.da-native-service details p { max-width: none; }

/* 11. Homepage type sizes. ".da-hero p" (style.css) also enlarged the hero's
 * small label to 21px on desktop, so it wrapped; labels are 12px site-wide.
 * On phones the three service-card headings were 23px, nearly the size of the
 * section heading above them; other card headings are 18-20px. */
body .da-hero .da-eyebrow { font-size: 12px !important; letter-spacing: .14em; }
@media (max-width: 760px) {
	body.home .da-services-studio .da-service-card h3 { font-size: 20px !important; line-height: 1.25 !important; }
}

/* 12. Homepage "Your industry" section: photo tiles for every industry instead
 * of four link bars and a pill button. Whole tile is the link. */
.da-industries-section .da-ind-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px 48px; margin-bottom: 36px; }
.da-industries-section .da-ind-head > div { max-width: 640px; }
.da-industries-section .da-ind-head h2 { margin: 10px 0 12px; text-align: left; }
.da-industries-section .da-ind-head p:not(.da-eyebrow) { margin: 0; color: #c6d4ef; font-size: 17px; line-height: 1.6; }
.da-industries-section .da-ind-head__link { flex: none; color: #fff; font-weight: 700; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .35); padding-bottom: 4px; transition: border-color .2s ease; }
.da-industries-section .da-ind-head__link span { display: inline-block; transition: transform .2s ease; }
.da-industries-section .da-ind-head__link:hover { border-color: #fff; }
.da-industries-section .da-ind-head__link:hover span { transform: translateX(4px); }
.da-ind-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.da-ind-tile { position: relative; display: flex; flex-direction: column; gap: 12px; min-height: 100%; padding: 24px 22px 22px; border: 1px solid rgba(143, 194, 255, .18); border-radius: 18px; background: linear-gradient(160deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .025)); color: #fff; text-decoration: none; transition: transform .25s ease, border-color .25s ease, background-color .25s ease; }
.da-ind-tile__icon { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 4px; border-radius: 14px; background: linear-gradient(135deg, #1667d9, #b13cc7); box-shadow: 0 10px 24px rgba(22, 103, 217, .28); color: #fff; }
.da-ind-tile__icon svg { width: 28px; height: 28px; }
.da-ind-tile__name { font-size: 17px; font-weight: 700; line-height: 1.3; }
.da-ind-tile__text { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; color: #b9c8e6; font-size: 14px; line-height: 1.55; }
.da-ind-tile__more { position: absolute; top: 24px; right: 22px; display: flex; align-items: center; height: 52px; color: #8fc2ff; font-size: 20px; line-height: 1; transition: transform .25s ease; } /* top right, centred on the icon row */
.da-ind-tile:hover, .da-ind-tile:focus-visible { transform: translateY(-4px); border-color: rgba(143, 194, 255, .55); background-color: rgba(255, 255, 255, .04); }
.da-ind-tile:hover .da-ind-tile__more { transform: translateX(4px); }
.da-ind-tile:focus-visible { outline: 3px solid #39cce8; outline-offset: 3px; }
@media (max-width: 1100px) { .da-ind-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) {
	.da-industries-section .da-ind-head { flex-direction: column; align-items: flex-start; }
	.da-ind-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.da-ind-tile { padding: 18px 16px; gap: 10px; }
	.da-ind-tile__icon { width: 44px; height: 44px; border-radius: 12px; }
	.da-ind-tile__more { top: 18px; right: 16px; height: 44px; font-size: 18px; }
	.da-ind-tile__icon svg { width: 24px; height: 24px; }
	.da-ind-tile__name { font-size: 15px; }
	.da-ind-tile__text { display: none; }
}
@media (prefers-reduced-motion: reduce) { .da-ind-tile, .da-ind-tile__more, .da-industries-section .da-ind-head__link span { transition: none; } }

/* 13. Marketing service pages: problems, deliverables and process sections. */
.da-ms-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px 64px; align-items: start; }
.da-ms-split h2 { margin-top: 10px; }
.da-ms-checklist, .da-ms-ticks, .da-ms-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.da-ms-checklist li { position: relative; padding: 16px 18px 16px 50px; border: 1px solid #dce7fb; border-radius: 14px; background: #fff; color: #243e70; line-height: 1.55; }
.da-ms-checklist li::before { content: ""; position: absolute; left: 18px; top: 19px; width: 18px; height: 18px; border-radius: 50%; background: linear-gradient(135deg, #1667d9, #b13cc7); -webkit-mask: radial-gradient(circle, transparent 3px, #000 3.5px); mask: radial-gradient(circle, transparent 3px, #000 3.5px); }
.da-ms-columns { display: grid; grid-template-columns: 1.25fr 1fr; gap: 20px; align-items: stretch; }
.da-ms-card { padding: 30px; border: 1px solid #dce7fb; border-radius: 18px; background: #fff; }
.da-ms-card--plain { background: #f5f9ff; }
.da-ms-card h3 { margin: 0 0 18px; }
.da-ms-ticks li, .da-ms-list li { position: relative; padding-left: 30px; color: #243e70; line-height: 1.55; }
.da-ms-ticks li::before { content: ""; position: absolute; left: 2px; top: 6px; width: 14px; height: 8px; border-left: 2.5px solid #1667d9; border-bottom: 2.5px solid #1667d9; transform: rotate(-45deg); }
.da-ms-list li::before { content: ""; position: absolute; left: 6px; top: 10px; width: 7px; height: 7px; border-radius: 50%; background: #b13cc7; }
.da-ms-note { margin: 20px 0 0; padding-top: 16px; border-top: 1px solid #dce7fb; color: #4f6488; font-size: 15px; }
.da-ms-steps { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; counter-reset: none; }
.da-ms-steps li { padding: 26px 24px; border: 1px solid #dce7fb; border-radius: 18px; background: #fff; }
.da-ms-steps__num { display: inline-block; margin-bottom: 14px; color: #1667d9; font-size: 13px; font-weight: 800; letter-spacing: .12em; }
.da-ms-steps h3 { margin: 0 0 10px; }
.da-ms-steps p { margin: 0; color: #4f6488; line-height: 1.6; }
@media (max-width: 980px) {
	.da-ms-split, .da-ms-columns { grid-template-columns: 1fr; }
	.da-ms-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) { .da-ms-steps { grid-template-columns: 1fr; } .da-ms-card { padding: 24px 20px; } }

/* 14. Homepage service cards: the IT card was the only dark one. Match the
 * light Marketing and AI cards; its top accent uses the brand purple. */
body .da-service-card.da-service-card--ink { background: #fffdf9 !important; border-color: #e7e1d8 !important; border-top-color: #5146c7 !important; color: #101a3b !important; }
body.home main#content section.da-services-studio .da-service-card.da-service-card--ink h3 { color: #101a3b !important; }
body .da-service-card.da-service-card--ink p:not(.da-eyebrow),
body .da-service-card.da-service-card--ink li,
body .da-service-card.da-service-card--ink li a { color: #526b91 !important; }
body .da-service-card.da-service-card--ink li a:hover { color: #1667d9 !important; }

/* 15. Contact map: Google's square business-info card sits in the map's top-left
 * corner and was clipped by the 26px rounded corner. The map now sits inside a
 * rounded white frame with padding, and keeps only a slight corner itself. */
.da-contact-map .da-wrap { padding: 12px; border: 1px solid #dce7fb; border-radius: 26px; background: #fff; box-shadow: 0 18px 45px #142b5717; box-sizing: border-box; }
.da-contact-map iframe { border-radius: 6px !important; box-shadow: none !important; }
@media (max-width: 700px) { .da-contact-map .da-wrap { padding: 8px; border-radius: 20px; } .da-contact-map iframe { border-radius: 6px !important; } }
.da-ms-ticks--two { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 32px; }
@media (max-width: 760px) { .da-ms-ticks--two { grid-template-columns: 1fr; } }

/* 16. Homepage section order (main is a flex column ordered in brand-colors.css):
 * hero → about → what we do → industries → process → technology → contact → blog → FAQ. */
body.home #content > .da-about-home { order: 3 !important; }
body.home #content > .da-services-studio { order: 4 !important; }
body.home #content > .da-industries-section { order: 5 !important; }
body.home #content > .da-process-section { order: 8 !important; }
body.home #content > .da-tech-partners { order: 9 !important; }
body.home #content > .da-home-contact-section { order: 10 !important; }

/* 17. Homepage industry tiles: 12 industries in an even 4 x 3 grid (3 x 4 tablet, 2 x 6 phone), full descriptions. */
.da-ind-grid { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.da-ind-grid > .da-ind-tile { min-width: 0; max-width: none; }
.da-ind-tile { gap: 10px; padding: 22px 22px 24px; }
.da-ind-tile__icon { margin-bottom: 6px; }
.da-ind-tile__text { display: block; -webkit-line-clamp: unset; overflow: visible; }
@media (max-width: 1100px) { .da-ind-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) { .da-ind-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .da-ind-tile__text { display: none; } }

/* 18. Industry pages: delivery & pickup apps block (Restaurants & Banquet Halls). */
.dip-platforms__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 32px 56px; align-items: center; }
.dip-platforms h2 { margin: 10px 0 14px; }
.dip-platforms p { line-height: 1.65; }
.dip-platforms__tasks { margin: 18px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.dip-platforms__tasks li { position: relative; padding-left: 28px; color: #243e70; }
.dip-platforms__tasks li::before { content: ""; position: absolute; left: 2px; top: 6px; width: 13px; height: 7px; border-left: 2.5px solid #1667d9; border-bottom: 2.5px solid #1667d9; transform: rotate(-45deg); }
.dip-platforms__list { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.dip-platforms__list li { display: flex; align-items: center; justify-content: center; min-height: 64px; padding: 12px; border: 1px solid #dce7fb; border-radius: 14px; background: #fff; box-shadow: 0 10px 24px rgba(20, 43, 87, .06); color: #101a3b; font-size: 17px; font-weight: 700; text-align: center; }
.dip-platforms__note { margin: 14px 0 0; color: #5b6b82; font-size: 13px; line-height: 1.5; }
@media (max-width: 900px) { .dip-platforms__grid { grid-template-columns: 1fr; } }
@media (max-width: 420px) { .dip-platforms__list li { min-height: 54px; font-size: 15px; } }

/* 19. Homepage "What we do": cleaner cards, service lists as clear link rows, aligned lists. */
body.home main#content section#services .da-service-grid { gap: 20px; align-items: stretch; }
body.home main#content section#services .da-service-card { display: grid !important; grid-template-columns: auto 1fr; grid-template-rows: auto auto minmax(0, auto) 1fr auto; column-gap: 14px; align-content: start; padding: 30px 28px 28px !important; border: 1px solid #e3e9f4 !important; border-top: 4px solid var(--svc-accent, #1667d9) !important; border-radius: 20px !important; background: #fff !important; box-shadow: 0 18px 40px rgba(16, 26, 59, .07) !important; overflow: hidden; }
body.home main#content section#services .da-service-card:nth-child(1) { --svc-accent: #1667d9; }
body.home main#content section#services .da-service-card:nth-child(2) { --svc-accent: #5146c7; }
body.home main#content section#services .da-service-card:nth-child(3) { --svc-accent: #b13cc7; }
body.home main#content section#services .da-service-card::after, body.home main#content section#services .da-service-card::before { display: none !important; }
body.home main#content section#services .da-service-icon { grid-column: 1; grid-row: 1; align-self: center; width: 40px !important; height: 40px !important; margin: 0 !important; font-size: 13px !important; }
body.home main#content section#services .da-service-card > .da-eyebrow { grid-column: 2; grid-row: 1; align-self: center; margin: 0 !important; color: var(--svc-accent) !important; }
body.home main#content section#services .da-service-card > .da-eyebrow::before { display: none !important; }
body.home main#content section#services .da-service-card > h3 { grid-column: 1 / -1; margin: 22px 0 10px !important; color: #101a3b !important; }
body.home main#content section#services .da-service-card > p:not(.da-eyebrow) { grid-column: 1 / -1; min-height: calc(1.6em * 3); margin: 0 0 18px !important; color: #526b91 !important; line-height: 1.6 !important; }
body.home main#content section#services .da-service-card > ul { grid-column: 1 / -1; align-self: start; margin: 0 0 26px !important; padding: 0 !important; list-style: none !important; border-top: 1px solid #e8edf6; }
body.home main#content section#services .da-service-card > ul li { margin: 0 !important; padding: 0 !important; border-bottom: 1px solid #e8edf6; }
body.home main#content section#services .da-service-card > ul li::before { display: none !important; }
body.home main#content section#services .da-service-card > ul li a { display: flex !important; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 2px !important; color: #1a2b4f !important; font-size: 15px !important; font-weight: 600 !important; text-decoration: none !important; transition: color .2s ease, padding .2s ease; }
body.home main#content section#services .da-service-card > ul li a::after { content: "→"; color: var(--svc-accent); font-weight: 400; opacity: .55; transition: transform .2s ease, opacity .2s ease; }
body.home main#content section#services .da-service-card > ul li a:hover, body.home main#content section#services .da-service-card > ul li a:focus-visible { color: var(--svc-accent) !important; padding-left: 6px !important; }
body.home main#content section#services .da-service-card > ul li a:hover::after, body.home main#content section#services .da-service-card > ul li a:focus-visible::after { opacity: 1; transform: translateX(3px); }
body.home main#content section#services .da-service-card > .da-service-cta { grid-column: 1 / -1; grid-row: 5; justify-self: start; margin: 0 !important; }
body.home main#content section#services .da-service-card > h3 { min-height: 54px; }
@media (max-width: 1000px) { body.home main#content section#services .da-service-card > h3, body.home main#content section#services .da-service-card > p:not(.da-eyebrow) { min-height: 0; } }
@media (prefers-reduced-motion: reduce) { body.home main#content section#services .da-service-card > ul li a, body.home main#content section#services .da-service-card > ul li a::after { transition: none; } }
/* 19b. Keep the service link rows visible on tablets and phones. */
@media (max-width: 1000px) { body.home main#content section#services .da-service-card > ul { display: block !important; margin-bottom: 22px !important; } body.home main#content section#services .da-service-card > ul li { display: block !important; } }

/* 20. Pre-launch polish: arrow spacing in buttons, balanced hero headline, footer hub links. */
a.da-cta, a.da-secondary { gap: 8px; }
body.home .da-hero h1 { text-wrap: balance; }
.da-site-footer .da-footer-hub { margin-bottom: 6px; }
@media (min-width: 701px) and (max-width: 1000px) { body.home main#content section#services .da-service-grid > .da-service-card:nth-child(3):last-child { grid-column: 1 / -1; } }
.da-about-rebuild-value__copy > h2 + p, .da-about-rebuild-prose > h2 + p { margin-top: 16px !important; }
main .da-home-contact-section h2 + p, main section .da-wrap > h2 + p { margin-top: 14px; }
/* AI service pages on phones: no fixed card heights, so short cards don't leave empty space. */
@media (max-width: 700px) {
	.ai-benefit-grid { gap: 12px !important; }
	.ai-benefit-grid > .ai-benefit { min-height: 0 !important; flex-direction: row !important; align-items: center; gap: 16px; padding: 18px 20px !important; }
	.ai-benefit-grid > .ai-benefit > span { flex: none; margin: 0 !important; }
	.ai-benefit-grid > .ai-benefit > h3 { margin: 0 !important; }
	.da-service-scope > article { min-height: 0 !important; justify-content: flex-start !important; }
	.da-service-scope > article > h3 { margin-bottom: 10px !important; }
	.da-service-scope > article > p { margin-top: 0 !important; }
	.da-service-scope > article > h3:first-child, .ai-benefit-grid > .ai-benefit > h3 { margin-top: 0 !important; }
}
/* Balanced line breaks for section headings, so short last lines ("us.") don't sit alone. */
main h1, main .da-section-head h2, main section h2 { text-wrap: balance; }
main p { text-wrap: pretty; }
/* 404 page: room under the header, space around the button, tidy link pills. */
.da-404 > .da-wrap { padding-top: clamp(56px, 9vw, 110px); padding-bottom: clamp(56px, 8vw, 96px); }
.da-404 .da-cta { margin-top: 26px; }
.da-404__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 30px; }
.da-404__links a { padding: 10px 18px; border: 1px solid #dce7fb; border-radius: 999px; background: #fff; color: #101a3b; font-weight: 600; text-decoration: none; transition: border-color .2s ease, color .2s ease; }
.da-404__links a:hover, .da-404__links a:focus-visible { border-color: #1667d9; color: #1667d9; }
/* "Related services" links on service pages: tidy pills instead of underlined boxes. */
.da-section--soft .da-service-related { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.da-section--soft .da-service-related a { display: inline-flex; align-items: center; padding: 12px 20px; border: 1px solid #d6e2f7; border-radius: 999px; background: #fff; box-shadow: 0 8px 20px rgba(16, 26, 59, .06); color: #101a3b; font-weight: 600; text-decoration: none; transition: border-color .2s ease, color .2s ease, transform .2s ease; }
.da-section--soft .da-service-related a:hover, .da-section--soft .da-service-related a:focus-visible { border-color: #1667d9; color: #1667d9; transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .da-section--soft .da-service-related a { transition: none; } .da-section--soft .da-service-related a:hover { transform: none; } }