/* ==========================================================================
   Credit Union Mortgages: main stylesheet
   Built from the Figma "Full Web Design" page (1600px artboards).
   No mobile design was supplied: small screens follow the same system.

   1. Tokens & base     5. Rates, calculator, segments, stories
   2. Buttons & links   6. Inner pages (heroes, products, why, journey, FAQs)
   3. Header & nav      7. About, Tools, Contact, Find
   4. Home hero         8. Regulatory band & footer
                        9. Motion  10. Responsive
   ========================================================================== */

@font-face { font-family: "Lato"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/lato-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Lato"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/lato-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Lato"; font-style: normal; font-weight: 900; font-display: swap; src: url("../fonts/lato-latin-900-normal.woff2") format("woff2"); }

/* 1. Tokens & base ======================================================== */
:root {
	/* Brand palette (guidelines V8) and the tints used in the design */
	--c-blue: #3e7cf2;        /* Cornflower Blue */
	--c-blue-text: #1f5fd6;   /* blue for small text and links (5.7:1) */
	--c-navy: #271e61;        /* Navy Blue */
	/* Design v2 palette */
	--c-purple: #ba87ee;
	--c-teal: #57c0b1;
	--c-pink: #ffadb4;
	--c-stone: #cfcac8;
	--c-teal-dark: #30718c;
	/* V1 names kept as aliases so older rules and saved content pick up the v2 colours */
	--c-lilac: var(--c-purple);
	--c-aqua: var(--c-teal);
	--c-pale: var(--c-stone);
	--c-mist: var(--c-pink);
	--c-blue-50: #9ebdf8;     /* Cornflower at 50% on white */
	--c-bg: #f5f5f2;
	--c-line: #6e7377;
	--c-muted: #5f6368;
	--c-error: #b42318;
	--c-ink: #000;
	--c-white: #fff;

	--font: "Lato", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

	--fs-display: clamp(2.75rem, 1.5rem + 4vw, 5rem);      /* 80 */
	--fs-hero: clamp(2.75rem, 1.4rem + 4.4vw, 5.625rem);    /* 90 */
	--fs-h2: clamp(2.125rem, 1.5rem + 2.1vw, 3.75rem);      /* 60 */
	--fs-h3: clamp(1.625rem, 1.3rem + 0.9vw, 2.1875rem);    /* 35 */
	--fs-h4: clamp(1.25rem, 1.1rem + .4vw, 1.375rem);       /* 22 */
	--fs-lead: clamp(1.125rem, 1rem + 0.4vw, 1.375rem);     /* 22 */
	--fs-body: 1.125rem;                                     /* 18 */
	--fs-ui: 1rem;                                           /* 16 */
	--fs-small: .875rem;                                     /* 14 */
	--fs-meta: .9375rem;                                     /* 15 */
	--fs-xs: .8125rem;                                       /* 13 */
	--fs-micro: .75rem;                                      /* 12 */
	--fs-tiny: .6875rem;                                     /* 11 */
	--fs-body-sm: 1.0625rem;                                 /* 17 */

	--container: 1300px;
	--wide: 1446px;
	--gutter: max(20px, min(5vw, 40px));
	--radius-card: 15px;
	--radius-panel: 10px;
	--section-y: clamp(56px, 1.75rem + 3.4vw, 82px);
	--section-y-lg: clamp(64px, 2rem + 4.9vw, 110px);
	--panel-y: clamp(48px, 6vw, 97px);
	--shadow-card: 0 3px 20px rgba(0, 0, 0, .05);
	--shadow-lift: 0 24px 40px -24px rgba(39, 30, 97, .32);   /* card hover */
	--shadow-lift-strong: 0 24px 40px -20px rgba(15, 30, 90, .45); /* card hover on blue */
	--shadow-pop: 0 20px 40px -20px rgba(0, 0, 0, .25);
	--shadow-header: 0 8px 24px -16px rgba(0, 0, 0, .25);
	--radius-pill: 131px;
	--radius-input: 6px;
	--c-blue-light: #4a85f3;
	--c-line-soft: #ececea;
	--c-error-bg: #fef3f2;
	--hairline: 1px solid rgba(0, 0, 0, .22);

	--ease-out: cubic-bezier(.22, 1, .36, 1);
	--ease-in-out: cubic-bezier(.65, 0, .35, 1);
	--dur-1: 200ms;
	--dur-2: 450ms;
	--dur-3: 800ms;

	--header-h: 112px;

	/* Snag tokens: disabled controls, touch tap areas, tool card icon column */
	--disabled-opacity: .55;  /* black at 55% on white is about 4.7:1, so still clear of 3:1 */
	--tap-extend: 12px;       /* extra invisible tap area above and below small links */
	--tap-min: 44px;          /* comfortable touch target height */
	--tool-icon-w: 76px;      /* widest tool icon, so all tool titles line up */
	--grid-gap-tablet: 16px;  /* card grid gap from 1080px down */
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
body { margin: 0; font-family: var(--font); font-size: var(--fs-body); line-height: 1.45; color: var(--c-ink); background: var(--c-white); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote, fieldset, address { margin: 0; }
ul, ol { padding: 0; list-style: none; }
fieldset { border: 0; padding: 0; min-width: 0; }
address { font-style: normal; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
table { border-collapse: collapse; width: 100%; }
[hidden] { display: none !important; }

:focus-visible { outline: 3px solid var(--focus, var(--c-ink)); outline-offset: 3px; border-radius: 4px; }
.regulatory { --focus: var(--c-white); }

.screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 16px; top: -100px; z-index: 1000; background: var(--c-ink); color: var(--c-white); padding: 12px 18px; border-radius: 40px; font-weight: 700; text-decoration: none; }
.skip-link:focus { top: 16px; }

.container { width: min(var(--container), 100% - 2 * var(--gutter)); margin-inline: auto; }
.container--narrow { width: min(820px, 100% - 2 * var(--gutter)); }
.panel { width: min(var(--wide), 100% - 2 * var(--gutter)); margin-inline: auto; background: var(--c-bg); border-radius: var(--radius-panel); padding-block: var(--panel-y); }
.section { padding-block: var(--section-y); position: relative; }

.display { font-size: var(--fs-display); line-height: 1; font-weight: 900; letter-spacing: -.01em; text-wrap: balance; }
.page-title { font-size: var(--fs-h2); line-height: 1.1; font-weight: 700; letter-spacing: -.005em; text-wrap: balance; }
.page-title--lg { line-height: 1.15; }
.h2 { font-size: var(--fs-h2); line-height: 1.25; font-weight: 700; letter-spacing: -.005em; text-wrap: balance; }
.h2 strong, .h3 strong { font-weight: 900; }
.h3 { font-size: var(--fs-h3); line-height: 1.15; font-weight: 700; text-wrap: balance; }
.lead { font-size: var(--fs-lead); line-height: 1.27; max-width: 62ch; text-wrap: pretty; }
.prose > * + * { margin-top: 1em; }
.prose p { line-height: 1.5; }

.eyebrow {
	display: inline-flex; align-items: center; justify-content: center; align-self: flex-start;
	min-height: 35px; padding: 3px 24px;
	border: .5px solid currentColor; border-radius: var(--radius-pill);
	font-size: var(--fs-ui); line-height: 1.75; white-space: nowrap;
}
.eyebrow--sm { min-height: 28px; padding: 1px 14px; font-size: var(--fs-small); margin-bottom: 18px; }

.section-head { display: grid; gap: 0; margin-bottom: clamp(40px, 4vw, 65px); }
.section-head__main { display: grid; justify-items: start; }
.section-head .eyebrow { margin-bottom: clamp(28px, 3vw, 45px); }
.section-head .h2 { margin-bottom: clamp(18px, 2vw, 32px); max-width: 987px; text-wrap: pretty; }
.section-head--center .h2 { margin-inline: auto; }
.section-head .h2:last-child { margin-bottom: 0; }
.section-head--center { text-align: center; justify-items: center; }
.section-head--center .section-head__main { justify-items: center; }
.section-head--center .lead { max-width: 970px; }
.section-head--split { grid-template-columns: 1fr auto; align-items: end; column-gap: 40px; }
.section-head--split .lead { max-width: 940px; }
.section-head--split > .btn { margin-bottom: 4px; }
.section-head--side { grid-template-columns: 1fr minmax(0, 640px); column-gap: 60px; align-items: end; }
.section-head--side .h2 { margin-bottom: 0; }
.section-head__side { padding-bottom: 10px; }

.breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; font-size: var(--fs-ui); line-height: 1.75; }
.breadcrumb li { display: inline-flex; align-items: center; gap: 18px; }
.breadcrumb li + li::before { content: ""; width: 6px; height: 10px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 12'%3E%3Cpath d='M1 1l5 5-5 5' fill='none' stroke='%23000' stroke-width='1.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 7 12'%3E%3Cpath d='M1 1l5 5-5 5' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") center/contain no-repeat; }
.breadcrumb a { text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; text-underline-offset: 4px; }
.breadcrumb [aria-current] { font-weight: 700; text-decoration: underline; text-underline-offset: 5px; }

/* Concentric brand rings (CSS only). Each section sets --ring, --rx, --ry, --rs. */
.rings { contain: layout paint; position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; --ring: var(--c-lilac); --rs: 1; --rx: 30%; --ry: 30%; --ro: .7; }
.rings i { position: absolute; left: var(--rx); top: var(--ry); width: calc(var(--d) * var(--rs)); aspect-ratio: 1; border-radius: 50%; background: var(--ring); opacity: var(--ro); box-shadow: 0 0 60px rgba(18, 16, 11, .22); transform: translate(-50%, -50%); }
.rings i:nth-child(1) { --d: 3188px; }
.rings i:nth-child(2) { --d: 2556px; }
.rings i:nth-child(3) { --d: 1924px; }
.rings i:nth-child(4) { --d: 1292px; }

/* 2. Buttons & links ===================================================== */
.btn {
	--btn-bg: var(--c-ink); --btn-fg: var(--c-white); --btn-circle: var(--c-white); --btn-arrow: var(--c-ink); --btn-border: var(--btn-bg);
	position: relative; display: inline-flex; align-items: center; gap: 12px;
	min-height: 60px; padding: 5px 5px 5px 30px;
	border-radius: var(--radius-pill); background: var(--btn-bg); color: var(--btn-fg); border: 2px solid var(--btn-border);
	font-size: var(--fs-ui); font-weight: 700; line-height: 1.2; text-decoration: none; white-space: nowrap;
	transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), background-color var(--dur-1), color var(--dur-1);
}
.btn__label { padding-right: 8px; }
.btn__icon { display: inline-flex; margin-right: 2px; }
.btn__icon svg { width: 17px; height: auto; }
.btn__icon svg path { fill: currentColor; }
.btn__arrow { position: relative; overflow: hidden; display: grid; place-items: center; flex: none; width: 46px; height: 46px; margin-left: auto; border-radius: 50%; background: var(--btn-circle); color: var(--btn-arrow); }
.btn__arrow svg { transition: transform var(--dur-2) var(--ease-out); }
.btn__arrow svg circle { display: none; }
.btn--outline { --btn-bg: transparent; --btn-fg: var(--c-ink); --btn-circle: var(--c-ink); --btn-arrow: var(--c-white); --btn-border: var(--c-ink); }
.btn--light { --btn-bg: var(--c-white); --btn-fg: var(--c-ink); --btn-circle: var(--c-ink); --btn-arrow: var(--c-white); }
.btn--ghost-light { --btn-bg: transparent; --btn-fg: var(--c-white); --btn-circle: var(--c-white); --btn-arrow: var(--c-ink); --btn-border: var(--c-white); }
.btn--back { --btn-bg: transparent; --btn-fg: var(--c-ink); --btn-circle: var(--c-ink); --btn-arrow: var(--c-white); --btn-border: var(--c-ink); flex-direction: row; padding: 5px 24px 5px 5px; }
.btn--back .btn__arrow { margin: 0; order: -1; }
.btn--back .btn__arrow svg { transform: rotate(180deg); }
.btn--back .btn__label { padding: 0 0 0 4px; }
.btn--plain { padding-inline: 28px; }
.btn--plain .btn__label { padding: 0; }
.btn--download .btn__arrow svg { width: 46px; height: 46px; }
/* Snag UI-06 (dev request 3): downloads without a file say "(coming soon)" in full-strength text with a dashed outline, instead of a faded button */
.btn.btn--download.is-disabled { opacity: 1; border-style: dashed; --btn-circle: var(--c-muted); }
.btn--download .btn__soon { font-weight: 400; white-space: nowrap; }
/* Snag UI-03: real disabled buttons (and aria-disabled ones) look disabled too: faded, not-allowed cursor, no hover lift */
.btn.is-disabled, .btn:disabled, .btn[aria-disabled="true"] { opacity: var(--disabled-opacity); cursor: not-allowed; }

@media (hover: hover) {
	.btn:not(.is-disabled):not(:disabled):not([aria-disabled="true"]):hover { transform: translateY(-2px); box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .45); }
	.btn--outline:not(.is-disabled):not(:disabled):not([aria-disabled="true"]):hover, .btn--back:not(:disabled):hover { --btn-bg: var(--c-ink); --btn-fg: var(--c-white); --btn-circle: var(--c-white); --btn-arrow: var(--c-ink); }
	.btn--ghost-light:not(:disabled):hover { --btn-bg: var(--c-white); --btn-fg: var(--c-navy); --btn-circle: var(--c-navy); --btn-arrow: var(--c-white); }
	.btn:not(.btn--back):not(.btn--download):not(:disabled):not([aria-disabled="true"]):hover .btn__arrow svg { animation: arrow-loop 600ms var(--ease-out); }
}
@keyframes arrow-loop { 0% { transform: translateX(0); } 45% { transform: translateX(140%); } 46% { transform: translateX(-140%); } 100% { transform: translateX(0); } }

.text-link { display: inline-flex; align-items: center; gap: 11px; font-size: var(--fs-ui); font-weight: 700; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; transition: text-underline-offset var(--dur-1); }
.text-link svg { width: 12px; height: auto; flex: none; }
.text-link:hover { text-underline-offset: 7px; }
.arrow-link { display: inline-flex; align-items: center; gap: 12px; font-size: var(--fs-ui); font-weight: 700; text-underline-offset: 4px; text-decoration: none; }
.arrow-link > span:first-child { text-decoration: underline; text-underline-offset: 4px; }
.arrow-link svg { transition: transform var(--dur-2) var(--ease-out); }
a.arrow-link:hover svg, .article-card:hover .arrow-link svg { transform: translateX(6px); }
.text-btn { font-size: var(--fs-ui); font-weight: 700; text-decoration: underline; text-underline-offset: 4px; color: var(--c-blue-text); }

.circle-btn { display: grid; place-items: center; flex: none; width: 49px; height: 49px; border-radius: 50%; background: var(--c-ink); color: var(--c-white); transition: transform var(--dur-1) var(--ease-out), opacity var(--dur-1); }
.circle-btn::before { content: ""; width: 22px; height: 16px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 16'%3E%3Cpath d='M1 8h19m-6-6 6 6-6 6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%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 22 16'%3E%3Cpath d='M1 8h19m-6-6 6 6-6 6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.circle-btn--prev::before { transform: rotate(180deg); }
.circle-btn:active { transform: scale(.96); }
.circle-btn[disabled] { opacity: .3; cursor: default; transform: none; }

/* 3. Header & nav ======================================================== */
.site-header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 100; background: var(--c-white); border-bottom: .5px solid rgba(0, 0, 0, .18); transition: box-shadow var(--dur-2) var(--ease-out); }
.site-header.is-scrolled { box-shadow: var(--shadow-header); }
.site-header__inner { width: min(var(--wide), 100% - 2 * var(--gutter)); margin-inline: auto; height: var(--header-h); display: flex; align-items: center; gap: 24px; }
.site-header__logo .logo { transform-origin: left center; transition: transform var(--dur-2) var(--ease-out); }
.site-header.is-scrolled .site-header__logo .logo { transform: scale(.82); }
.site-header__logo { flex: none; }
.site-header__logo .logo { width: 222px; height: auto; }
.site-nav { margin-left: auto; display: flex; align-items: center; gap: 46px; }
.nav__list { display: flex; align-items: center; gap: 50px; }
.nav__item { position: relative; }
.nav__link { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-ui); line-height: 1.2; text-decoration: none; padding: 8px 0; position: relative; }
.nav__link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1.5px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform var(--dur-2) var(--ease-out); }
.nav__link:hover::after, .nav__item.is-open > .nav__link::after, .nav__item.is-current > .nav__link::after { transform: scaleX(1); transform-origin: left; }
.nav__item.is-current > .nav__link { font-weight: 700; }
.nav__toggle svg { transition: transform var(--dur-2) var(--ease-out); }
.nav__item.is-open .nav__toggle svg { transform: rotate(180deg); }
.nav__sub { position: absolute; left: -24px; top: calc(100% + 18px); min-width: 250px; padding: 12px; background: var(--c-white); border-radius: 12px; border: var(--hairline); box-shadow: var(--shadow-pop); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity var(--dur-1), transform var(--dur-2) var(--ease-out), visibility 0s linear var(--dur-2); }
.nav__item.is-open .nav__sub { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.nav__sub a { display: block; padding: 10px 14px; border-radius: 8px; text-decoration: none; font-size: var(--fs-ui); }
.nav__sub a:hover { background: var(--c-bg); }
/* Snag UI-13: show which mortgage page you are on inside the dropdown (bold, tinted, bar on the left) */
.nav__sub a[aria-current="page"], .nav__sub li.is-current > a, .nav__sub .current-menu-item > a { font-weight: 700; background: var(--c-bg); box-shadow: inset 3px 0 0 var(--c-ink); }
/* Snag UI-13: the header "Find your Credit Union" button is filled in when you are on that page */
.site-header .btn--outline[aria-current="page"] { --btn-bg: var(--c-ink); --btn-fg: var(--c-white); --btn-circle: var(--c-white); --btn-arrow: var(--c-ink); }
.site-header .btn--outline { padding-left: 22px; }
.menu-toggle { display: none; margin-left: auto; width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--c-ink); place-items: center; }
.menu-toggle__bars { display: grid; gap: 5px; width: 20px; }
.menu-toggle__bars span { display: block; height: 2px; background: currentColor; border-radius: 2px; transition: transform var(--dur-2) var(--ease-out), opacity var(--dur-1); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* 4. Home hero =========================================================== */
.home { background: var(--c-bg); }
.home .hero { background: var(--c-white); padding-bottom: 16px; }
.hero { padding-top: 16px; }
.hero__card { position: relative; overflow: hidden; isolation: isolate; width: min(var(--wide), 100% - 2 * var(--gutter)); margin-inline: auto; min-height: 758px; border-radius: var(--radius-panel); box-shadow: var(--shadow-card); background: var(--c-blue); display: flex; align-items: center; }
.hero__media { position: absolute; inset: 0 0 0 14%; z-index: -2; }
.hero__media::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 12%; background: linear-gradient(90deg, var(--c-blue), rgba(62, 124, 242, 0)); }
.hero__img { width: 100%; height: 100%; object-fit: cover; object-position: 100% 50%; }
.rings--hero { z-index: -1; --ring: var(--c-bg); --ro: .1; --rx: 52%; --ry: -10%; --rs: .92; mix-blend-mode: hard-light; }
.hero__content { padding: 73px 56px 112px; max-width: 690px; }
.eyebrow--hero { margin-bottom: 90px; padding-inline: 36px; }
.hero__title { font-size: var(--fs-hero); line-height: .89; font-weight: 900; letter-spacing: -.012em; margin-bottom: 25px; max-width: 624px; }
.hero__title .w { display: inline-block; overflow: hidden; vertical-align: top; padding-block: .14em .08em; margin-block: -.14em -.08em; }
.hero__title .w > span { display: inline-block; }
.hero__text { font-size: var(--fs-lead); line-height: 1.27; max-width: 400px; margin-bottom: 50px; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 24px; }
.hero__actions .btn { padding-left: 21px; }

/* Photo hero (Figma v2: segment pages and Our Mortgages): coloured card, studio photo on the right */
.photo-hero { padding-top: 16px; }
.photo-hero__card { --tone: var(--c-blue); position: relative; overflow: hidden; isolation: isolate; width: min(var(--wide), 100% - 2 * var(--gutter)); margin-inline: auto; min-height: 680px; display: flex; align-items: stretch; border-radius: var(--radius-panel); background: var(--tone); box-shadow: var(--shadow-card); }
.photo-hero__card--purple { --tone: var(--c-purple); }
.photo-hero__card--teal { --tone: var(--c-teal); }
.photo-hero__card--pink { --tone: var(--c-pink); }
.photo-hero__card--stone { --tone: var(--c-stone); }
.photo-hero__media { position: absolute; z-index: -1; top: 0; right: 0; bottom: 0; width: 54%; }
.photo-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%); mask-image: linear-gradient(90deg, transparent, #000 14%); }
.photo-hero__content { display: flex; flex-direction: column; align-items: flex-start; padding: 36px 44px 66px 72px; width: 52%; }
.photo-hero__content .breadcrumb { margin-bottom: 0; }
.photo-hero__title { margin-top: clamp(48px, 7.5vw, 118px); max-width: 600px; }
.photo-hero__text { display: grid; gap: 12px; margin-top: 40px; max-width: 620px; font-size: var(--fs-lead); line-height: 1.27; }
.photo-hero__text strong { font-weight: 700; }
.photo-hero .hero__actions { margin-top: auto; padding-top: 48px; }
.photo-hero + .rates { margin-top: clamp(20px, 2.5vw, 40px); }

/* Icon cards (Credit Union difference / why) */
.difference { padding-bottom: clamp(64px, 6vw, 89px); }
.home .difference { padding-top: 74px; }
.difference--panel { background: var(--c-white); padding-block: 0 clamp(40px, 4vw, 64px); }
.icon-grid { display: grid; gap: 22px; }
.icon-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.icon-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 19px; }
.icon-card { position: relative; display: flex; flex-direction: column; min-height: 440px; padding: 30px 32px 40px; background: var(--c-white); border: var(--hairline); border-radius: var(--radius-card); box-shadow: var(--shadow-card); transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out); }
.icon-card__icon { align-self: flex-end; height: 96px; margin-bottom: auto; }
.icon-card__icon img { width: auto; height: 100%; }
.icon-card__figure { font-size: clamp(2.5rem, 2rem + 1.5vw, 3.75rem); line-height: 1; font-weight: 900; color: var(--c-blue-text); margin-top: 32px; }
.icon-card__title { font-size: var(--fs-h3); line-height: 1.14; font-weight: 700; margin: 56px 0 30px; max-width: 13ch; }
.icon-card__figure + .icon-card__title { margin-top: 8px; }
.icon-card p { line-height: 1.44; max-width: 348px; }
@media (min-width: 861px) { .icon-card:not(.icon-card--compact) > p:last-child { min-height: calc(4 * 1.44em); } }
.difference--panel .icon-card { padding-top: 47px; }
.difference--panel .icon-card__title { max-width: none; }
.icon-card--compact { min-height: 422px; padding: 36px 28px 40px; }
.icon-card--compact .icon-card__icon { height: 90px; margin-bottom: 0; }
.icon-card--compact .icon-card__title { max-width: none; font-size: clamp(1.4rem, 1.2rem + .6vw, 1.75rem); line-height: 1.2; margin: 0 0 12px; padding-top: 28px; }
@media (hover: hover) {
	.icon-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lift); }
	.icon-card:hover .icon-card__icon img { animation: float 1.6s var(--ease-in-out) infinite alternate; }
}
@keyframes float { to { transform: translateY(-6px); } }

/* 5. Rates, calculator, segments, stories ================================ */
.rates { overflow: hidden; overflow: clip; }
.rates--purple { background: var(--c-purple); }
.rates--teal { background: var(--c-teal); }
.rates--pink { background: var(--c-pink); }
.rates--blue { background: var(--c-blue); }
.rates--stone { background: var(--c-stone); }
.rates .container { position: relative; z-index: 1; }
.rings--rates { --ring: var(--c-lilac); --ro: .7; --rx: -12%; --ry: 60%; --rs: .85; opacity: .45; }
.rates--teal .rings--rates { --ring: var(--c-teal); }
.rate-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 23px; }
.rate-card { display: flex; flex-direction: column; overflow: hidden; background: var(--c-white); border: var(--hairline); border-radius: var(--radius-card); transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out); }
.rate-card__media { aspect-ratio: 418 / 207; overflow: hidden; background: var(--c-navy); }
.rate-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.rate-card__body { display: flex; flex-direction: column; flex: 1; padding: 31px 32px 34px; }
.rate-card__name { font-size: var(--fs-h3); line-height: 1; font-weight: 700; margin-bottom: 27px; max-width: 11ch; }
.rate-card__text { line-height: 1.44; margin-bottom: 23px; max-width: 348px; }
.rate-card__rate { margin-top: auto; margin-bottom: 18px; }
.rate-card__rate strong { display: block; font-size: 1.875rem; line-height: 1.33; font-weight: 900; }
.rate-card__rate span { display: block; font-size: var(--fs-meta); line-height: 1.9; font-weight: 700; }
.rate-card .arrow-link { align-self: flex-start; }
@media (hover: hover) {
	.rate-card:hover { transform: translateY(-6px); box-shadow: 0 28px 48px -28px rgba(39, 30, 97, .55); }
	.rate-card:hover .rate-card__media img { transform: scale(1.05); }
}

.calculator { background: var(--c-bg); }
.calc { position: relative; }
.calc__embed { min-height: 520px; }
.calc__embed:has(.cuc) { min-height: 0; }
.calc .cuc { max-width: none; }
/* Design v2: the calculator's highlight colour is teal */
.calc .cuc { --cuc-cyan: var(--c-teal); --cuc-blue-pale: var(--c-teal); --cuc-cyan-edge: var(--c-teal-dark); }
.calc__disclaimer { max-width: 713px; margin: 32px auto 0; text-align: center; font-size: var(--fs-small); line-height: 1.43; }

.segments { background: var(--c-white); overflow: hidden; overflow: clip; }
.segments .section-head { margin-bottom: 60px; }
.seg-tabs { display: flex; align-items: center; gap: 8px; border: var(--hairline); border-radius: 80px; padding: 5px; margin-bottom: 80px; }
.seg-tabs__list { position: relative; flex: 1; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; isolation: isolate; }
.seg-tabs__list button { position: relative; z-index: 1; min-height: 49px; padding: 8px 12px; border-radius: 80px; font-size: var(--fs-ui); white-space: nowrap; }
.seg-tabs__list button[aria-selected="true"] { font-weight: 700; }
.seg-tabs__pill { position: absolute; z-index: 0; top: 0; bottom: 0; left: 0; width: var(--pill-w, 25%); transform: translateX(var(--pill-x, 0)); background: var(--pill-bg, var(--c-purple)); border-radius: 80px; transition: transform var(--dur-3) var(--ease-out), width var(--dur-3) var(--ease-out), background-color var(--dur-3) var(--ease-out); }
.seg-viewport { overflow: visible; clip-path: inset(-40px -100vw -40px 0); }
.segments { overflow: hidden; overflow: clip; }
.seg-track { display: flex; gap: 30px; transition: transform var(--dur-3) var(--ease-out); will-change: transform; touch-action: pan-y; }
.seg-card { flex: 0 0 100%; display: grid; grid-template-columns: minmax(0, 637fr) minmax(0, 660fr); min-height: 547px; border-radius: var(--radius-panel); overflow: hidden; background: var(--c-aqua); }
.seg-card--purple { background: var(--c-purple); }
.seg-card--teal { background: var(--c-teal); }
.seg-card--pink { background: var(--c-pink); }
.seg-card--blue { background: var(--c-blue); }
.seg-card--stone { background: var(--c-stone); }
.seg-card__media { position: relative; overflow: hidden; border-radius: var(--radius-panel); }
.seg-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); transform: scale(1.06); transition: transform 1.4s var(--ease-out); }
.seg-card.is-active .seg-card__media img { transform: scale(1); }
.seg-card__body { padding: 59px 48px 59px 79px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
.seg-card__title { font-size: var(--fs-h3); line-height: 1.14; font-weight: 700; margin-bottom: 20px; }
.seg-card__subtitle { font-weight: 900; margin-bottom: 25px; line-height: 1.44; }
.seg-card__text { line-height: 1.44; max-width: 483px; margin-bottom: 31px; }
.ticks { display: grid; gap: 12px; margin-bottom: 36px; }
.ticks li { display: flex; align-items: flex-start; gap: 14px; font-weight: 700; line-height: 1.44; }
.ticks svg { width: 30px; height: 30px; flex: none; margin-top: -2px; }
.seg-card__body > * { transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out); }
.seg-card:not(.is-active) .seg-card__body > * { opacity: 0; transform: translateY(14px); }
.seg-card.is-active .seg-card__body > :nth-child(2) { transition-delay: 60ms; }
.seg-card.is-active .seg-card__body > :nth-child(3) { transition-delay: 120ms; }
.seg-card.is-active .seg-card__body > :nth-child(4) { transition-delay: 180ms; }
.seg-card.is-active .seg-card__body > :nth-child(5) { transition-delay: 240ms; }

.stories { background: var(--c-bg); overflow: hidden; overflow: clip; }
.stories__inner { display: grid; grid-template-columns: 532px minmax(0, 1fr); gap: 105px; align-items: start; }
.stories__intro .eyebrow { margin-bottom: 45px; }
.stories__intro .h2 { margin-bottom: 33px; }
.stories__intro .lead { margin-bottom: 38px; }
.stories__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; max-width: 500px; }
.avatars__row { display: flex; margin-bottom: 15px; }
.avatars__row img { width: 84px; height: 84px; border-radius: 50%; margin-right: -12px; }
.avatars p { font-size: var(--fs-meta); }
.stories__nav { display: flex; gap: 10px; }
.stories__viewport { position: relative; min-width: 0; margin-right: calc(-1 * (100vw - 100%) / 2); }
.stories__track { display: flex; gap: 30px; transition: transform var(--dur-3) var(--ease-out); }
.story { flex: 0 0 min(660px, 82vw); }
/* Carousels: cards that slide out of view fade away, and stories never pass over the text column beside them */
.stories__viewport { clip-path: inset(-40px -100vw -60px 0); }
.story, .step { transition: opacity var(--dur-3) var(--ease-out); }
.story[data-offscreen], .step[data-offscreen] { opacity: 0; }
.story figure { position: relative; min-height: 576px; border-radius: var(--radius-panel); overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; }
.story__media { position: absolute; inset: 0; bottom: 200px; overflow: hidden; }
.story__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.story__box { position: relative; background: var(--c-white); border: var(--hairline); border-radius: var(--radius-panel); padding: 51px 120px 40px 36px; min-height: 290px; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; }
.story__mark { position: absolute; right: 38px; top: 18px; font-family: Georgia, "Times New Roman", serif; font-weight: 700; font-size: 115px; line-height: 1; }
.story__quote p { line-height: 1.44; }
.story figcaption strong { display: block; font-size: 1.375rem; font-weight: 900; line-height: 1.2; }
.story figcaption span { display: block; font-size: var(--fs-ui); font-weight: 700; margin-top: 4px; }
@media (hover: hover) { .story:hover .story__media img { transform: scale(1.04); } }

/* 6. Inner pages ========================================================= */
/* Simple coloured page hero (About, Tools, Contact, Find) */
.page-hero { position: relative; overflow: hidden; isolation: isolate; padding-block: 36px clamp(56px, 6vw, 96px); }
.page-hero > .container { position: relative; z-index: 1; }
.page-hero--plain { background: var(--c-bg); }
.page-hero--blue { background: var(--c-blue); }
.page-hero--aqua { background: var(--c-aqua); }
.page-hero--short { padding-bottom: 56px; }
.page-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 640px); column-gap: 60px; row-gap: 0; align-items: start; }
.page-hero__grid .breadcrumb { grid-column: 1 / -1; margin-bottom: clamp(36px, 4vw, 52px); }
.page-hero__grid .page-title { max-width: 640px; }
.page-hero__grid .lead { padding-top: 14px; }
.page-hero__grid--single { grid-template-columns: 1fr; }
.page-hero--short .breadcrumb { margin-bottom: 28px; }
.rings--tools { --ring: var(--c-blue); --ro: .55; --rx: 82%; --ry: 108%; --rs: .7; opacity: .7; }
.rings--find { --ring: var(--c-aqua); --rx: 22%; --ry: 120%; --rs: .7; opacity: .6; }

/* Mortgages split hero */

/* Product sections (Mortgages page) */
.product { background: var(--c-white); }
.product.section, .enquiries.section { padding-block: var(--section-y-lg); }
.product--alt { background: var(--c-bg); }
.product .section-head .lead { max-width: 968px; }
.product .section-head .h2 { max-width: 760px; text-wrap: balance; }
.segments .section-head .h2 { max-width: 620px; }
.photo-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-bottom: clamp(56px, 6vw, 80px); }
.photo-card { display: flex; flex-direction: column; overflow: hidden; background: var(--c-white); border: var(--hairline); border-radius: var(--radius-card); box-shadow: var(--shadow-card); transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out); }
.photo-card__media { aspect-ratio: 418 / 270; overflow: hidden; }
.photo-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.photo-card__body { padding: 32px 32px 40px; display: grid; gap: 14px; }
.photo-card__title { font-size: var(--fs-h3); line-height: 1.14; font-weight: 700; }
.photo-card p { line-height: 1.44; }
@media (hover: hover) {
	.photo-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lift); }
	.photo-card:hover .photo-card__media img { transform: scale(1.05); }
}
.rate-table__title { font-size: var(--fs-h3); line-height: 1.14; font-weight: 700; margin-bottom: 28px; }
.table-scroll { overflow-x: auto; max-width: 100%; background: var(--c-white); border: var(--hairline); border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.rate-table table { min-width: 620px; text-align: left; font-variant-numeric: tabular-nums; }
.rate-table thead { background: var(--rt, var(--c-teal)); }
.rate-table--blue { --rt: var(--c-blue); }
.rate-table--purple { --rt: var(--c-purple); }
.rate-table--pink { --rt: var(--c-pink); }
.rate-table--stone { --rt: var(--c-stone); }
.rate-table th, .rate-table td { padding: 18px 40px; width: 25%; }
.rate-table thead th { font-size: var(--fs-ui); font-weight: 700; }
.rate-table tbody th, .rate-table tbody td { padding-block: 26px; font-size: var(--fs-lead); border-top: 1px solid rgba(0, 0, 0, .25); }
.rate-table tbody th { font-weight: 400; }
/* Snag UI-09: in tables with more than one row (capped variable), every row label is bold, so "Interest Rate" matches "Rate Cap" */
.rate-table tbody tr:not(:only-child) th { font-weight: 700; }
.rate-table tbody td strong { font-weight: 900; }
.rate-table__note { margin-top: 32px; font-size: var(--fs-ui); line-height: 1.5; }

/* Why choose (segment pages) */
.why { background: var(--c-white); padding-block: 44px 64px; }
.why__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 572px); align-items: start; column-gap: 60px; row-gap: clamp(46px, 5.25vw, 84px); margin-bottom: clamp(64px, 9vw, 144px); }
.why__head .eyebrow { grid-column: 1 / -1; justify-self: center; }
.why__head .h2 { max-width: 640px; }
.why__text { display: grid; align-content: start; gap: 10px; line-height: 1.44; padding-top: 22px; }
.why__text strong { font-weight: 700; }

/* Journey steps */
.journey { background: var(--c-white); overflow: hidden; overflow: clip; }
.journey .section-head { margin-bottom: clamp(44px, 4.2vw, 66px); }
.journey__viewport { position: relative; padding-left: max(var(--gutter), (100vw - var(--container)) / 2); }
.journey__viewport::before { content: ""; position: absolute; left: 0; right: 0; top: 24px; border-top: .5px solid rgba(0, 0, 0, .8); }
.journey__track { display: flex; gap: 20px; counter-reset: step; transition: transform var(--dur-3) var(--ease-out); touch-action: pan-y; }
.step { flex: 0 0 420px; display: grid; grid-template-rows: auto 1fr; align-content: start; gap: 40px; }
.step__num { position: relative; z-index: 1; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--c-white); font-weight: 700; }
.step__num::before { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--tone); border: .5px solid rgba(0, 0, 0, .3); z-index: -1; }
.step--aqua { --tone: var(--c-aqua); }
.step--lilac { --tone: var(--c-lilac); }
.step--blue { --tone: var(--c-blue); }
.step--pale { --tone: var(--c-stone); }
.step__card { display: flex; flex-direction: column; min-height: 531px; height: 100%; border: var(--hairline); border-radius: var(--radius-panel); overflow: hidden; background: var(--tone); }
.step__media { height: 259px; flex: none; overflow: hidden; }
.step__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.step__body { flex: 1; padding: 34px 35px 40px; border-top: .5px solid rgba(0, 0, 0, .2); border-radius: var(--radius-panel) var(--radius-panel) 0 0; margin-top: -10px; background: var(--tone); position: relative; }
.step__title { font-size: var(--fs-h4); line-height: 1.18; font-weight: 900; margin-bottom: 14px; }
.step__body p { line-height: 1.44; }
.journey__nav { display: flex; justify-content: flex-end; gap: 10px; margin-top: 40px; }

/* FAQs */
.faqs { background: var(--c-white); }
.faq-group + .faq-group { margin-top: clamp(40px, 4vw, 56px); }
.faq-group__title { font-size: var(--fs-h3); line-height: 1.14; font-weight: 700; margin-bottom: 24px; }
.faq { border: var(--hairline); border-radius: var(--radius-panel); background: var(--c-white); box-shadow: var(--shadow-card); transition: box-shadow var(--dur-2) var(--ease-out); }
.faq + .faq { margin-top: 15px; }
.faq summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 25px 32px; cursor: pointer; font-size: var(--fs-h4); line-height: 1.3; font-weight: 700; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover span { text-decoration: underline; text-underline-offset: 4px; }
.faq__icon { position: relative; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--c-ink); }
.faq__icon::before, .faq__icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 13px; height: 1.5px; background: var(--c-white); transform: translate(-50%, -50%); transition: transform var(--dur-2) var(--ease-out); }
.faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq[open] .faq__icon::after { transform: translate(-50%, -50%) rotate(0deg); }
.faq__answer { padding: 0 32px 30px; max-width: 980px; display: grid; gap: 14px; line-height: 1.5; }
.faq[open] { box-shadow: 0 16px 32px -24px rgba(39, 30, 97, .3); }
.faq.is-animating .faq__answer { overflow: hidden; }

/* 7. About, Tools, Contact, Find ========================================= */
.about .page-hero { padding-bottom: 64px; }
.mosaic { background: var(--c-bg); padding-bottom: 56px; }
.mosaic__grid { width: min(var(--wide), 100% - 2 * var(--gutter)); margin-inline: auto; display: grid; grid-template-columns: minmax(0, 590fr) minmax(0, 252fr) minmax(0, 590fr); grid-template-areas: "a b b" "c c d"; grid-auto-rows: minmax(455px, auto); gap: 14px; }
.mosaic__grid > :nth-child(1) { grid-area: a; }
.mosaic__grid > :nth-child(2) { grid-area: b; }
.mosaic__grid > :nth-child(3) { grid-area: c; }
.mosaic__grid > :nth-child(4) { grid-area: d; }
.mosaic__panel { position: relative; overflow: hidden; isolation: isolate; border-radius: var(--radius-panel); padding: clamp(28px, 4vw, 42px) clamp(28px, 4vw, 42px) 40px; display: flex; flex-direction: column; justify-content: center; gap: 24px; box-shadow: var(--shadow-card); }
.mosaic__panel .eyebrow { margin-bottom: 16px; }
.mosaic__panel p { line-height: 1.44; max-width: 480px; }
.mosaic__panel--blue { background: var(--c-blue); }
.mosaic__panel--aqua { background: var(--c-aqua); }
.rings--panel { --ring: var(--c-blue); --rx: 10%; --ry: 70%; --rs: .45; opacity: .6; z-index: -1; }
.mosaic__media { position: relative; border-radius: var(--radius-panel); overflow: hidden; box-shadow: var(--shadow-card); }
.mosaic__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.membership { background: var(--c-lilac); overflow: hidden; }
.membership .container { position: relative; z-index: 1; }
.rings--membership { --ring: var(--c-lilac); --rx: 50%; --ry: -18%; --rs: .62; opacity: .7; }
.two-col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 640px); column-gap: 60px; row-gap: 24px; margin-bottom: clamp(40px, 5vw, 70px); }
.two-col .eyebrow { margin-bottom: 40px; }
.two-col .prose, .two-col > .lead { padding-top: 76px; }
.photo-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.photo-row img { width: 100%; aspect-ratio: 418 / 440; object-fit: cover; border-radius: var(--radius-panel); box-shadow: var(--shadow-card); }

.media-panel { background: var(--c-white); }
.media-panel__grid { width: min(var(--wide), 100% - 2 * var(--gutter)); margin-inline: auto; display: grid; grid-template-columns: minmax(0, 842fr) minmax(0, 589fr); grid-auto-rows: minmax(620px, auto); gap: 15px; }
.media-panel__media { position: relative; border-radius: var(--radius-panel); overflow: hidden; box-shadow: var(--shadow-card); min-height: 0; }
.media-panel__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.media-panel--blue .media-panel__body { background: var(--c-blue); }
.media-panel__body { background: var(--c-stone); border-radius: var(--radius-panel); padding: clamp(32px, 5vw, 76px); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 28px; box-shadow: var(--shadow-card); }
.media-panel__body p { line-height: 1.44; max-width: 440px; }

.participating { background: var(--c-white); padding-top: 0; }
.az__letters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.az__letter { width: 36px; height: 36px; border: 1px solid var(--c-line); border-radius: 4px; font-size: var(--fs-meta); font-weight: 700; background: var(--c-white); transition: background var(--dur-1), color var(--dur-1); }
.az__letter[aria-pressed="true"] { background: var(--c-ink); color: var(--c-white); border-color: var(--c-ink); }
.az__list { position: relative; max-height: 640px; overflow-y: auto; border: 1px solid var(--c-line); border-radius: var(--radius-panel); padding: 8px 20px 12px; scroll-padding-top: 8px; scroll-behavior: smooth; overscroll-behavior: contain; }
.az__group { scroll-margin-top: 8px; }
.az__heading { font-size: var(--fs-meta); font-weight: 900; color: var(--c-blue-text); padding: 16px 0 6px; }
.az__group li, .radio-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; font-weight: 700; font-size: var(--fs-body-sm); border-bottom: 1px solid rgba(0, 0, 0, .12); }
.az__group li:last-child { border-bottom: 0; }
.az:not(.az--select) .az__group li { padding-block: 15px; }

.tools .page-hero { padding-bottom: 74px; }
.page-hero--blue .page-hero__grid .lead { max-width: 530px; justify-self: end; padding-top: 20px; }
.tools .page-hero .lead { color: var(--c-ink); }
.tool-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: clamp(48px, 5.5vw, 88px); }
.tool-grid > li { display: flex; }
.tool-card { flex: 1; display: grid; justify-items: center; align-content: start; gap: 35px; min-height: 263px; padding: 41px 32px 32px; background: var(--c-white); border-radius: var(--radius-panel); text-decoration: none; text-align: center; box-shadow: var(--shadow-card); transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out); }
.tool-card__icon img { height: 90px; width: auto; }
.tool-card__title { font-size: var(--fs-h4); font-weight: 700; line-height: 1.2; max-width: 15ch; }
.guides { background: var(--c-bg); }
.download-list { display: grid; gap: 12px; }
.guides .section-head { margin-bottom: 40px; }
.download { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 43px 56px; background: var(--c-white); border: var(--hairline); border-radius: var(--radius-panel); box-shadow: var(--shadow-card); }
.download__title { font-size: var(--fs-h3); line-height: 1.14; font-weight: 700; margin-bottom: 12px; }
.download p { max-width: 640px; line-height: 1.44; }
.btn--download { flex: none; padding-left: 26px; }
.news { background: var(--c-bg); }
.article-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.article-card { position: relative; display: flex; flex-direction: column; border: var(--hairline); border-radius: var(--radius-panel); overflow: hidden; background: var(--c-white); box-shadow: var(--shadow-card); transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out); }
.article-card__media { aspect-ratio: 420 / 290; overflow: hidden; background: var(--c-pale); }
.article-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.article-card__body { flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; padding: 30px 32px 34px; }
.article-card__title { font-size: clamp(1.5rem, 1.25rem + .7vw, 2.1875rem); line-height: 1.14; font-weight: 700; }
.article-card__title a { text-decoration: none; }
.article-card__title a::after { content: ""; position: absolute; inset: 0; }
.article-card .arrow-link { font-size: var(--fs-small); }
.page-default .article-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.entry__media { margin-bottom: 32px; border-radius: var(--radius-panel); overflow: hidden; }

.enquiries { background: var(--c-bg); }
.contact-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.contact-card { display: grid; align-content: start; gap: 14px; min-height: 324px; padding: 40px 36px 44px; background: var(--c-white); border: var(--hairline); border-radius: var(--radius-card); box-shadow: var(--shadow-card); line-height: 1.55; }
.contact-card__icon { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--c-aqua); margin-bottom: 42px; }
.contact-card__icon svg { width: 28px; height: 28px; }
.contact-card__title { font-size: var(--fs-h3); line-height: 1.14; font-weight: 700; }
.contact-card a { font-weight: 700; text-underline-offset: 4px; overflow-wrap: anywhere; }

/* Finder */
.find .page-hero { padding-bottom: 48px; }
.find .page-title { max-width: 22ch; }
.finder-section { background: var(--c-bg); }
.finder { width: min(960px, 100%); margin-inline: auto; background: var(--c-white); border: 1px solid rgba(0, 0, 0, .18); border-radius: var(--radius-panel); box-shadow: var(--shadow-card); }
.stepper { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); padding: 30px 48px 24px; border-bottom: 1px solid rgba(0, 0, 0, .14); }
.stepper__item { position: relative; display: grid; justify-items: center; gap: 8px; text-align: center; font-size: var(--fs-xs); color: var(--c-muted); }
.stepper__item::before { content: ""; position: absolute; top: 12px; left: calc(-50% + 14px); right: calc(50% + 14px); border-top: 1px solid var(--c-line); }
.stepper__item::after { content: ""; position: absolute; top: 12px; left: calc(-50% + 14px); right: calc(50% + 14px); border-top: 1px solid var(--c-blue); transform: scaleX(0); transform-origin: left center; transition: transform var(--dur-3) var(--ease-out); }
.stepper__item:first-child::before, .stepper__item:first-child::after { display: none; }
.stepper__dot { position: relative; z-index: 1; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--c-line); background: var(--c-white); font-size: var(--fs-micro); font-weight: 700; transition: background var(--dur-2), border-color var(--dur-2); }
.stepper__item.is-done { color: var(--c-ink); }
.stepper__item.is-done::after, .stepper__item.is-current::after { transform: scaleX(1); }
.stepper__dot { transition: background-color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out); }
.stepper__item.is-done .stepper__dot::after { animation: pop var(--dur-2) var(--ease-out); }
.stepper__item.is-done .stepper__dot { background: var(--c-blue); border-color: var(--c-blue); color: transparent; }
.stepper__item.is-done .stepper__dot::after { content: ""; position: absolute; width: 10px; height: 6px; border-left: 2px solid var(--c-white); border-bottom: 2px solid var(--c-white); transform: translateY(-1px) rotate(-45deg); }
.stepper__item.is-current { color: var(--c-ink); font-weight: 700; }
/* Snag UX-08 (dev request 1): steps the route skipped are muted with a dashed ring, never a tick */
.stepper__item.is-skipped { color: var(--c-muted); }
.stepper__item.is-skipped .stepper__dot { background: var(--c-white); border-style: dashed; border-color: var(--c-line); color: transparent; }
.stepper__item.is-skipped .stepper__dot::after { display: none; }
.stepper__item.is-skipped::after { transform: scaleX(1); opacity: .45; }
.stepper__item.is-current .stepper__dot { background: var(--c-ink); border-color: var(--c-ink); color: var(--c-white); }
.finder__body { padding: clamp(24px, 5vw, 64px); }
.finder__panel { display: grid; gap: 0; }
.finder__panel.is-entering > * { animation: panel-in var(--dur-3) var(--ease-out) both; }
.finder__panel.is-entering > :nth-child(2) { animation-delay: 40ms; }
.finder__panel.is-entering > :nth-child(3) { animation-delay: 80ms; }
.finder__panel.is-entering > :nth-child(n+4) { animation-delay: 120ms; }
[data-dir="back"] .finder__panel.is-entering > * { animation-name: panel-in-back; }
@keyframes panel-in { from { opacity: 0; transform: translateX(28px); } }
@keyframes panel-in-back { from { opacity: 0; transform: translateX(-28px); } }
.finder__panel > .eyebrow { justify-self: start; }
.finder__title { font-size: clamp(1.75rem, 1.1rem + 2vw, 3rem); line-height: 1.15; font-weight: 700; margin-bottom: 12px; outline: none; }
.finder__text { font-size: var(--fs-ui); line-height: 1.5; margin-bottom: 28px; }
.finder__actions { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 32px; flex-wrap: wrap; }
.finder__actions--end { justify-content: flex-end; }
.finder__count { font-size: var(--fs-small); font-weight: 700; margin: 14px 0 10px; }
.finder__privacy { font-size: var(--fs-small); color: var(--c-muted); margin-top: 18px; }
.finder__privacy a { color: var(--c-blue-text); }
.finder__noscript { padding: 16px; background: var(--c-bg); border-radius: 8px; }
.options { display: grid; gap: 12px; }
.options--2 { grid-template-columns: 1fr 1fr; }
.option { position: relative; display: flex; align-items: center; gap: 14px; min-height: 60px; padding: 24px 22px; border: 1px solid var(--c-line); border-radius: var(--radius-input); cursor: pointer; transition: background var(--dur-1), border-color var(--dur-1), box-shadow var(--dur-1); }
.option:hover { border-color: var(--c-ink); }
.option input, .radio-row input, .result input { appearance: none; flex: none; width: 20px; height: 20px; margin: 1px 0 0; border: 1.5px solid var(--c-ink); border-radius: 50%; background: var(--c-white); display: grid; place-items: center; }
.option input::after, .radio-row input::after, .result input::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--c-ink); transform: scale(0); transition: transform var(--dur-1) var(--ease-out); }
.option input:checked::after, .radio-row input:checked::after, .result input:checked::after { transform: scale(1); }
.option input:focus-visible, .radio-row input:focus-visible { outline: 3px solid var(--focus, var(--c-ink)); outline-offset: 3px; }
.option:has(input:checked) { background: var(--c-aqua); border: 2px solid var(--c-ink); padding: 17px; }
.option__body { display: grid; gap: 4px; font-size: var(--fs-meta); }
.option__body b { font-size: var(--fs-ui); }
.options--compact .option { min-height: 0; padding: 12px 14px; align-items: center; }
.options--compact .option:has(input:checked) { padding: 11px 13px; }
.radio-row { cursor: pointer; font-size: var(--fs-meta); padding-inline: 10px; border-radius: var(--radius-input); border-bottom-color: rgba(0, 0, 0, .1); }
.radio-row:has(input:checked) { background: var(--c-aqua); }
.az--select .az__list { max-height: 300px; padding: 4px 12px 10px; }
.az--select .az__group:last-child .radio-row:last-child { border-bottom: 0; }
.radio-row--dashed { margin-top: 18px; border: 1px dashed var(--c-line); padding: 14px; background: var(--c-bg); }
.notice { padding: 14px 16px; border-radius: var(--radius-input); background: var(--c-bg); font-size: var(--fs-meta); line-height: 1.5; margin-top: 12px; }
.notice--success { background: var(--c-aqua); display: flex; gap: 10px; }
.notice--success::before { content: ""; flex: none; width: 18px; height: 18px; margin-top: 2px; border-radius: 50%; background: var(--c-blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.2l2.6 2.6L13 6.4' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat; }
.field { display: grid; gap: 8px; margin-bottom: 18px; }
.field label { font-size: var(--fs-small); font-weight: 700; }
.field .req { font-weight: 400; color: var(--c-muted); }
.field input[type="text"], .field input[type="email"], .field input[type="tel"] { width: 100%; height: 50px; padding: 0 16px; border: 1px solid var(--c-line); border-radius: 5px; background: var(--c-white); font-size: var(--fs-ui); }
.field input:focus-visible { outline: 3px solid var(--focus, var(--c-ink)); outline-offset: 3px; }
.field input[readonly] { background: var(--c-bg); }
.field.has-error input { border: 2px solid var(--c-error); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field-row--wide { grid-template-columns: 2fr 1fr; }
.field-hint { font-size: var(--fs-small); color: var(--c-muted); margin: -2px 0 0; }
/* Address search: suggestions list under the input (combobox) */
.combo { position: relative; z-index: 3; } /* above the "search by name" link while the list is open */
.combo__list { position: absolute; z-index: 20; left: 0; right: 0; top: 100%; margin-top: 4px; max-height: 300px; overflow-y: auto; padding: 6px; background: var(--c-white); border: 1px solid var(--c-line); border-radius: var(--radius-input); box-shadow: var(--shadow-pop); }
.combo__option { display: grid; gap: 2px; padding: 12px 14px; border-radius: 4px; font-size: var(--fs-meta); line-height: 1.35; cursor: pointer; }
.combo__option span { font-size: var(--fs-small); color: var(--c-muted); }
.combo__option:hover, .combo__option[aria-selected="true"] { background: var(--c-bg); box-shadow: inset 3px 0 0 var(--c-ink); }
.finder__alt { margin: 4px 0 18px; }
.notice--error { border-left: 4px solid var(--c-error); background: var(--c-error-bg); display: grid; gap: 8px; justify-items: start; }
.field--check { margin-bottom: 12px; }
.check { display: flex; gap: 12px; align-items: flex-start; font-size: var(--fs-meta) !important; font-weight: 400 !important; line-height: 1.45; cursor: pointer; }
.check input { flex: none; width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--c-ink); }
.check input:focus-visible { outline: 3px solid var(--focus, var(--c-ink)); outline-offset: 3px; }
.field--check.has-error .check input { outline: 2px solid var(--c-error); outline-offset: 2px; }
.field-inline { display: flex; align-items: center; gap: 16px; }
.field-inline input { flex: 1; min-width: 0; }
.field-error { display: flex; gap: 8px; align-items: flex-start; color: var(--c-error); font-size: var(--fs-small); font-weight: 700; margin-top: 10px; }
.field .field-error { margin-top: 0; }
.field-error::before { content: "!"; flex: none; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--c-error); color: var(--c-white); font-size: var(--fs-micro); font-weight: 900; }
.input-icon { position: relative; }
.input-icon svg { position: absolute; left: 14px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); }
.input-icon input { padding-left: 42px !important; }
.located { display: flex; gap: 16px; padding: 18px; background: var(--c-bg); border-radius: 8px; font-size: var(--fs-meta); line-height: 1.4; }
.located__pin { display: grid; place-items: center; flex: none; width: 52px; height: 52px; border-radius: 50%; background: var(--c-aqua); }
.located__pin svg { width: 24px; height: 24px; }
.located small { display: block; margin-top: 4px; color: var(--c-muted); }
.checks { display: grid; gap: 16px; }
.checks li { display: flex; align-items: center; gap: 14px; font-weight: 700; font-size: var(--fs-meta); color: var(--c-muted); transition: color var(--dur-2); }
.checks__icon { position: relative; flex: none; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--c-line); }
.checks li.is-checking .checks__icon { border-color: var(--c-blue); border-right-color: transparent; animation: spin 700ms linear infinite; }
.checks li.is-done { color: var(--c-ink); }
.checks li.is-done .checks__icon { background: var(--c-blue); border-color: var(--c-blue); animation: none; }
.checks li.is-done .checks__icon::after { content: ""; position: absolute; left: 5px; top: 5px; width: 8px; height: 5px; border-left: 2px solid var(--c-white); border-bottom: 2px solid var(--c-white); transform: rotate(-45deg); }
@keyframes spin { to { transform: rotate(360deg); } }
.chip { justify-self: start; display: inline-flex; padding: 4px 12px; border-radius: 30px; background: var(--c-bg); font-size: var(--fs-xs); font-weight: 700; }
.results { display: grid; gap: 10px; }
.result { display: flex; gap: 14px; padding: 18px; border: 1px solid var(--c-line); border-radius: var(--radius-input); cursor: pointer; transition: border-color var(--dur-1), background var(--dur-1); }
.result:hover { border-color: var(--c-ink); }
.result:has(input:checked) { background: var(--c-aqua); border: 2px solid var(--c-ink); padding: 17px; }
.result:has(input:checked) .result__meta { color: var(--c-ink); } /* readable on the teal card */
.result__name { font-weight: 700; display: block; }
.result__meta { display: block; font-size: var(--fs-small); color: var(--c-muted); margin-top: 4px; }
.result__links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 8px; font-size: var(--fs-small); }
.result__links a { color: var(--c-blue-text); }
.error-summary { border: 3px solid var(--c-error); border-radius: var(--radius-input); padding: 18px 20px; margin-bottom: 24px; background: var(--c-error-bg); }
.error-summary h3 { display: flex; gap: 8px; align-items: center; font-size: var(--fs-ui); font-weight: 900; margin-bottom: 8px; }
.error-summary h3::before { content: "!"; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--c-error); color: var(--c-white); font-size: var(--fs-micro); }
.error-summary li + li { margin-top: 4px; }
.error-summary a { color: var(--c-error); font-weight: 700; font-size: var(--fs-meta); }
/* Snag UX-05 (dev request 6): a sending problem shown in the error summary, styled like the summary links */
.error-summary [data-summary-general] { font-size: var(--fs-meta); color: var(--c-error); font-weight: 700; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.finder__panel--done { justify-items: center; text-align: center; padding-block: 24px; }
.done-tick { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--c-aqua); margin-bottom: 24px; animation: pop 600ms var(--ease-out); }
.done-tick svg { width: 40px; height: 40px; }
.done-tick svg circle { display: none; }
@keyframes pop { from { transform: scale(.4); opacity: 0; } }

/* Default pages */
/* Snag UX-10 (dev request 5): space above the buttons on the 404 page */
.page-404__actions { margin-top: 32px; }
/* Snag N3: 404 text lines up with the heading, at a readable width */
.page-404__body .prose { max-width: 640px; }
.page-default { background: var(--c-white); }
.entry > * + * { margin-top: 1em; }
.entry h2 { font-size: var(--fs-h3); line-height: 1.2; margin-top: 1.6em; }
.entry h3 { font-size: var(--fs-h4); margin-top: 1.4em; }
.entry ul { list-style: disc; padding-left: 1.2em; }
.entry ol { list-style: decimal; padding-left: 1.2em; }

/* 8. Regulatory band & footer ============================================ */
.regulatory { position: relative; overflow: hidden; isolation: isolate; background: var(--c-navy); color: var(--c-white); padding-block: 110px 96px; }
.rings--navy { --ring: var(--c-navy); --ro: .6; --rx: 50%; --ry: 10%; --rs: .7; z-index: -1; }
.rings--navy i { box-shadow: 0 0 60px rgba(0, 0, 0, .55); }
.cta-band { position: relative; width: min(1300px, 100% - 2 * var(--gutter)); margin: -12px auto 0; min-height: 450px; display: grid; place-items: center; margin-bottom: 40px; }
.cta-band__content { position: relative; z-index: 1; text-align: center; display: grid; justify-items: center; gap: 30px; max-width: 600px; }
.cta-band__title { font-size: var(--fs-h2); line-height: 1.25; font-weight: 700; text-wrap: balance; max-width: 680px; }
.cta-band__text { font-size: var(--fs-lead); line-height: 1.27; }
.cta-band__float { position: absolute; inset: 0; pointer-events: none; }
.cta-avatar { position: absolute; width: 80px; height: 80px; border-radius: 50%; box-shadow: 0 0 0 3px var(--c-white); }
/* Positions from Figma v2, measured from the centre of the 1600px frame */
.cta-avatar--1 { left: max(6%, calc(50% - 564px)); top: -25px; }
.cta-avatar--2 { left: max(0px, calc(50% - 691px)); top: 164px; }
.cta-avatar--3 { left: max(14%, calc(50% - 447px)); top: 263px; }
.cta-avatar--4 { right: max(6%, calc(50% - 550px)); top: -20px; }
.cta-avatar--5 { right: max(0px, calc(50% - 681px)); top: 164px; }
.cta-avatar--6 { right: max(14%, calc(50% - 439px)); top: 263px; }
.regulatory__legal { position: relative; z-index: 1; width: min(914px, 100% - 2 * var(--gutter)); margin-inline: auto; text-align: center; }
.regulatory__criteria { width: min(764px, 100%); margin: 0 auto 52px; font-size: var(--fs-small); line-height: 1.43; }
.warnings { display: grid; gap: 15px; }
.warnings li { padding: 28px 24px; border: .5px solid rgba(255, 255, 255, .9); font-size: var(--fs-small); line-height: 1.43; }
.warnings strong { font-weight: 900; }

.site-footer { background: var(--c-white); }
.site-footer__main { display: grid; grid-template-columns: minmax(0, 440fr) repeat(4, minmax(0, 220fr)); gap: 32px; padding-block: 88px 104px; }
.site-footer__brand { display: grid; align-content: start; gap: 44px; font-size: var(--fs-small); line-height: 1.43; }
.site-footer__brand p { max-width: 290px; }
.site-footer__brand strong { font-weight: 700; }
.site-footer__logo .logo { width: 283px; height: auto; }
.site-footer__portal { font-size: var(--fs-small); font-weight: 700; text-underline-offset: 4px; margin-top: -24px; }
.site-footer__col h2 { font-size: var(--fs-small); font-weight: 700; margin-bottom: 26px; }
.site-footer__col li + li { margin-top: 15px; }
.site-footer__col a { font-size: var(--fs-small); text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size var(--dur-2) var(--ease-out); }
.site-footer__col a:hover { background-size: 100% 1px; }
.site-footer__legal { border-top: .5px solid rgba(0, 0, 0, .5); padding-block: 26px 40px; text-align: center; font-size: var(--fs-micro); line-height: 1.33; }
.site-footer__legal .container { display: grid; gap: 8px; max-width: 1190px; }
.site-footer__copy { margin-top: 16px; }

/* 9. Motion ============================================================== */
.js [data-reveal].is-pending { opacity: 0; transform: translateY(28px); }
.js [data-reveal].is-revealing { transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out); transition-delay: calc(var(--stagger, 0) * 90ms); }
.js .hero__title .w > span { transform: translateY(105%); transition: transform 900ms var(--ease-out); transition-delay: calc(120ms + var(--i) * 55ms); }
.js .hero__card .eyebrow, .js .hero__text, .js .home .hero__actions { opacity: 0; transform: translateY(16px); transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out); }
.js .hero__text { transition-delay: 420ms; }
.js .home .hero__actions { transition-delay: 520ms; }
.js .hero__img { transform: scale(1.06); transition: transform 1.8s var(--ease-out); }
.js .is-loaded .hero__title .w > span, .js .img-ready .hero__img { transform: none; }
.js .is-loaded.hero__card .eyebrow, .js .is-loaded .hero__text, .js .is-loaded .hero__actions { opacity: 1; transform: none; }
.rings i { animation: breathe 14s var(--ease-in-out) infinite alternate; }
.rings i:nth-child(2) { animation-delay: -3.5s; }
.rings i:nth-child(3) { animation-delay: -7s; }
.rings i:nth-child(4) { animation-delay: -10.5s; }
@keyframes breathe { from { transform: translate(-50%, -50%) scale(1); } to { transform: translate(-50%, -50%) scale(1.035); } }

@view-transition { navigation: auto; }
.site-header { view-transition-name: site-header; }
::view-transition-old(root) { animation: vt-out 180ms var(--ease-out) both; }
::view-transition-new(root) { animation: vt-in 320ms var(--ease-out) both; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(10px); } }

@media (prefers-reduced-motion: reduce) {
	@view-transition { navigation: none; }
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
	.js [data-reveal], .js .hero__title .w > span, .js .hero__img, .js .hero__text, .js .hero__actions, .js .hero__card .eyebrow { opacity: 1 !important; transform: none !important; }
}

/* 10. Responsive ========================================================= */
@media (max-width: 1220px) {
	.cta-avatar--3, .cta-avatar--6 { display: none; }
}
/* Between the stacked and full layouts, keep hero text clear of the photo */
@media (min-width: 1081px) and (max-width: 1279px) {
	.hero__content { max-width: 46%; padding-right: 0; }
	.hero__media { left: 42%; }
	.photo-hero__content { width: 52%; padding-inline: 48px; }
}
@media (max-width: 1280px) {
	.nav__list { gap: 32px; }
	.site-nav { gap: 28px; }
	.stories__inner { grid-template-columns: 420px minmax(0, 1fr); gap: 60px; }
	.seg-card__body { padding: 48px 40px 48px 52px; }
	.icon-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.icon-card--compact { min-height: 0; }
	.icon-card--compact .icon-card__icon { margin-bottom: 8px; }
	.site-footer__main { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.site-footer__brand { grid-column: 1 / -1; grid-template-columns: auto 1fr; align-items: center; gap: 24px 48px; }
	.site-footer__portal { margin-top: 0; }
}

@media (max-width: 1080px) {
	:root { --header-h: 80px; }
	.site-header__logo .logo { width: 170px; }
	.menu-toggle { display: grid; }
	.site-nav { position: fixed; inset: var(--header-h) 0 0 0; z-index: 99; flex-direction: column; align-items: stretch; gap: 32px; padding: 32px max(var(--gutter), env(safe-area-inset-right, 0px)) 48px max(var(--gutter), env(safe-area-inset-left, 0px)); background: var(--c-white); overflow-y: auto; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out), visibility 0s linear var(--dur-2); }
	.menu-open .site-nav { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
	.menu-open { overflow: hidden; }
	.nav__list { flex-direction: column; align-items: stretch; gap: 0; }
	.nav__item { border-bottom: 1px solid var(--c-line-soft); }
	.nav__link { width: 100%; justify-content: space-between; font-size: 1.375rem; font-weight: 700; padding: 18px 0; }
	.nav__link::after { display: none; }
	.nav__sub { position: static; min-width: 0; padding: 0 0 12px; border: 0; box-shadow: none; opacity: 1; visibility: visible; transform: none; display: none; }
	.nav__item.is-open .nav__sub { display: block; }
	.nav__sub a { padding: 10px 0; font-size: var(--fs-body-sm); }
	/* Snag UI-13: in the mobile submenu the current page's tint sits out to the left so its text stays lined up with the other links */
	.nav__sub a[aria-current="page"], .nav__sub li.is-current > a, .nav__sub .current-menu-item > a { padding-inline: 12px; margin-inline: -12px; }
	.site-nav .btn { align-self: flex-start; }

	.photo-hero__card { flex-direction: column; min-height: 0; }
	.photo-hero__content { width: auto; padding: 32px clamp(22px, 5vw, 40px) 40px; }
	.photo-hero__title { margin-top: 40px; }
	.photo-hero__text { margin-top: 24px; }
	.photo-hero .hero__actions { margin-top: 32px; }
	.photo-hero__media { position: relative; order: 2; width: auto; aspect-ratio: 4 / 3.4; max-height: 560px; }
	.hero__media { max-height: 560px; }
	.photo-hero__media img { object-position: 60% 20%; -webkit-mask-image: linear-gradient(transparent, #000 18%); mask-image: linear-gradient(transparent, #000 18%); }
	.hero__card { min-height: 0; flex-direction: column; align-items: stretch; }
	.hero__media { position: relative; order: 2; inset: auto; z-index: 0; aspect-ratio: 4 / 3.2; margin-top: -16px; }
	.hero__img { object-position: 82% 50%; }
	.hero__media::after { display: none; }
	.hero__media::before { content: ""; position: absolute; inset: 0 0 auto; height: 45%; z-index: 1; background: linear-gradient(var(--c-blue), rgba(62, 124, 242, 0)); }
	.hero__content { position: relative; z-index: 1; padding: 40px 32px 48px; max-width: none; background: var(--c-blue); }
	.eyebrow--hero { margin-bottom: 40px; }

	.icon-grid--3, .rate-grid, .photo-grid, .article-grid, .contact-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gap-tablet); }
	.tool-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.photo-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.icon-card { min-height: 0; }
	.icon-card__title { max-width: none; margin-top: 32px; }

	.stories__inner { grid-template-columns: minmax(0, 1fr); gap: 48px; }
	.stories__foot { max-width: none; }
	.stories__viewport { margin-right: calc(-1 * var(--gutter)); }

	.page-hero__grid, .why__head, .two-col, .section-head--side { grid-template-columns: 1fr; }
	.page-hero__grid .lead, .two-col .prose, .two-col > .lead { padding-top: 24px; }
	.why__head .eyebrow { justify-self: start; }
	.why__text { padding-top: 0; }
	.section-head--side .section-head__side { padding: 20px 0 0; }
	.page-hero--blue .page-hero__grid .lead { justify-self: start; max-width: 640px; padding-top: 24px; }

	.mosaic__grid, .media-panel__grid { grid-template-columns: 1fr; grid-template-areas: "a" "b" "d" "c"; grid-auto-rows: auto; }
	.mosaic__media { aspect-ratio: 16 / 10; }
	.media-panel__media { aspect-ratio: 16 / 11; min-height: 0; }

	.cta-band { min-height: 0; padding-block: 120px 40px; }
	.cta-avatar { width: 56px; height: 56px; box-shadow: 0 0 0 3px var(--c-white); }
	.cta-avatar--3, .cta-avatar--6 { display: none; }
	.cta-avatar--1 { left: 6%; top: 0; }
	.cta-avatar--2 { left: 28%; top: 44px; }
	.cta-avatar--4 { right: 6%; top: 0; }
	.cta-avatar--5 { right: 28%; top: 44px; }
}

@media (max-width: 860px) {
	.icon-grid--3, .rate-grid, .photo-grid, .article-grid, .contact-grid { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin-inline: auto; }
	.seg-tabs__list button:focus-visible { outline-offset: -4px; }
	.rings i { animation: none; box-shadow: none; }
	.section-head--split { grid-template-columns: 1fr; row-gap: 28px; }
	.section-head--split > .btn { justify-self: start; }

	.seg-tabs { border: 0; padding: 0; gap: 0; margin-bottom: 28px; }
	.seg-tabs .circle-btn { display: none; }
	.seg-tabs__list { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); }
	.seg-tabs__list::-webkit-scrollbar { display: none; }
	.seg-tabs__list button { flex: none; scroll-snap-align: start; border: .5px solid var(--c-ink); padding: 8px 20px; transition: background-color var(--dur-2) var(--ease-out); }
	.seg-tabs__list button[aria-selected="true"] { background: var(--pill-bg, var(--c-purple)); border-color: var(--c-ink); }
	.seg-tabs__pill { display: none; }
	.seg-track { gap: 16px; }
	.seg-card { grid-template-columns: 1fr; min-height: 0; }
	.seg-card__media { aspect-ratio: 16 / 11; }
	.seg-card__body { padding: 32px 24px 36px; }

	.story figure { height: auto; }
	.story__media { position: relative; bottom: auto; aspect-ratio: 4 / 3; }
	.story__box { margin-top: -24px; min-height: 0; padding: 36px 24px 28px; }
	.story__mark { font-size: 80px; right: 22px; top: 6px; }
	.story__quote p { padding-right: 40px; }

	.step { flex-basis: min(320px, 82vw); }
	.step__card { min-height: 0; }
	.step__media { height: 200px; }
	.download { flex-direction: column; align-items: flex-start; padding: 28px 24px; }
	.tool-grid { grid-template-columns: 1fr; }
	.tool-card { min-height: 0; grid-template-columns: auto 1fr; justify-items: start; align-items: center; align-content: center; text-align: left; padding: 20px 24px; gap: 20px; }
	.tool-card__icon img { height: 56px; }
	/* Snag UI-07: same-width icon column so the three tool titles line up */
	.tool-card__icon { flex: none; width: var(--tool-icon-w); display: flex; justify-content: center; }
	.photo-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
	.faq summary { padding: 20px; font-size: var(--fs-body-sm); }
	.faq__answer { padding: 0 20px 24px; font-size: var(--fs-ui); }
	.rate-table th, .rate-table td { padding-inline: 20px; }
	.rate-table tbody th, .rate-table tbody td { font-size: var(--fs-body-sm); }

	.site-footer__main { grid-template-columns: 1fr 1fr; padding-block: 56px; row-gap: 40px; }
	.site-footer__brand { grid-template-columns: 1fr; }
	.regulatory { padding-block: 72px 64px; }
	.warnings li { padding: 18px 16px; }
}

/* Snag UI-05: on tablets in portrait (561 to 860) card grids use two columns and line up with the headings, instead of one narrow centred column */
@media (min-width: 561px) and (max-width: 860px) {
	.icon-grid--3, .rate-grid, .photo-grid, .article-grid, .contact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; margin-inline: 0; }
	/* A lone last card (3 cards in 2 columns) sits centred under the pair rather than leaving a gap on the right */
	:is(.icon-grid--3, .rate-grid, .photo-grid, .article-grid, .contact-grid) > :last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - var(--grid-gap-tablet) / 2); }
	/* The lone contact card (email) spans both columns so the address does not break mid-word */
	.contact-grid > :last-child:nth-child(odd) { justify-self: stretch; width: auto; }
}

@media (max-width: 560px) {
	.site-header__logo .logo { width: 150px; }
	.btn { white-space: normal; text-align: left; }
	.eyebrow { white-space: normal; text-align: center; }
	/* Snag UI-08: long eyebrow pills that wrap keep their lines close together */
	.eyebrow { line-height: 1.3; padding-block: 6px; }
	/* Snag UI-14: smaller breadcrumb gaps so the trail stays on one line on phones */
	.breadcrumb ol { font-size: var(--fs-small); gap: 6px 10px; }
	.breadcrumb li { gap: 10px; }
	.hero__content { padding: 32px 22px 40px; }
	.hero__title { line-height: .95; }
	.hero__actions { flex-direction: column; align-items: flex-start; }
	.hero__media { aspect-ratio: 1 / 1; }
	.icon-card { padding: 24px 22px 28px; }
	.icon-card--compact .icon-card__title { padding-top: 16px; }
	.icon-grid--4 { grid-template-columns: 1fr; }
	.rate-card__body { padding: 24px 22px 28px; }
	.photo-card__body { padding: 24px 22px 28px; }
	.stories__foot { flex-direction: column; align-items: flex-start; }
	.btn { padding-left: 24px; }
	.options--2, .field-row, .field-row--wide { grid-template-columns: 1fr; }
	.stepper { padding-inline: 8px; }
	/* Snag UI-10: step label and step numbers at 14px on phones (were 11px and 12px) */
	.stepper__label { font-size: var(--fs-small); line-height: 1.2; }
	.stepper__dot { font-size: var(--fs-small); }
	/* Snag UI-10: first and last step labels line up with the edges so the larger text never runs off the card */
	.stepper__item:first-child .stepper__label { justify-self: start; text-align: left; }
	.stepper__item:last-child .stepper__label { justify-self: end; text-align: right; }
	.stepper__item:not(.is-current) .stepper__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
	/* Snag UI-01: finder buttons keep their label on one line; the main button drops to its own full-width row when both do not fit */
	/* Snag N2: a slightly tighter gap so short pairs such as Back and Submit still share a row */
	.finder__actions { flex-wrap: wrap; gap: 12px; }
	.finder__actions .btn { padding-left: 20px; white-space: nowrap; }
	.finder__actions .btn:not(.btn--back) { flex: 1 0 auto; }
	.finder__actions .btn--plain { justify-content: center; }
	/* Snag UI-04: the chosen Credit Union gets the full width, with "Change" underneath, so the name is not cut off */
	.field-inline { flex-wrap: wrap; gap: 8px 16px; }
	.field-inline input { flex: 1 1 100%; }
	.field-inline input[readonly] { padding-inline: 12px; font-size: var(--fs-small); }
	.az__letter { width: 44px; height: 44px; }
	.arrow-link { min-height: 44px; }
	.finder__actions .btn--back { padding-left: 5px; padding-right: 18px; }
	.contact-card { min-height: 0; padding: 28px 24px; }
	.contact-card__icon { margin-bottom: 24px; }
	.site-footer__main { grid-template-columns: 1fr 1fr; }
	.site-footer__logo .logo { width: 200px; }
	/* Snag UI-10: footer legal text and copyright at 14px on phones (was 12px) */
	.site-footer__legal { font-size: var(--fs-small); line-height: 1.43; }
}
/* Snag UI-01: on very small phones (under 360) long finder buttons may wrap again rather than overflow */
@media (max-width: 359px) {
	.finder__actions .btn { white-space: normal; }
}

@supports (overflow: clip) { body { overflow-x: clip; } }

@media (hover: hover) {
	.circle-btn:hover { transform: scale(1.06); }
	.step:hover .step__media img { transform: scale(1.05); }
	.az__letter:hover { background: var(--c-bg); }
	.tool-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lift-strong); }
	.article-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lift); }
	.article-card:hover .article-card__media img { transform: scale(1.05); }
}

/* Back to top: appears once the first screen is scrolled past */
.top-sentinel { position: absolute; top: 0; left: 0; width: 1px; height: 120vh; pointer-events: none; }
.to-top { position: fixed; right: clamp(16px, 2.5vw, 32px); bottom: clamp(16px, 2.5vw, 32px); z-index: 90; display: grid; place-items: center; width: 52px; height: 52px; border: 2px solid var(--c-white); border-radius: 50%; background: var(--c-ink); color: var(--c-white); box-shadow: var(--shadow-pop); cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out), visibility 0s linear var(--dur-2); }
.to-top[hidden] { display: none; }
.to-top.is-shown { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.to-top:focus-visible { outline-color: var(--c-ink); outline-offset: 4px; }
@media (hover: hover) { .to-top:hover { transform: translateY(-3px); } }
body.menu-open .to-top { display: none; }

/* Rate tables fit the screen on phones rather than scrolling sideways */
@media (max-width: 700px) {
	.rate-table table { min-width: 0; width: 100%; table-layout: fixed; }
	.rate-table th, .rate-table td { padding: 14px 10px; width: auto; }
	/* Snag UI-10: rate table column headings at 14px on phones (were 13px) */
	.rate-table thead th { font-size: var(--fs-small); line-height: 1.25; hyphens: auto; overflow-wrap: break-word; }
	.rate-table tbody th, .rate-table tbody td { padding-block: 18px; font-size: var(--fs-meta); }
}
@media (max-width: 360px) {
	.rate-table th, .rate-table td { padding-inline: 6px; }
	.rate-table thead th { hyphens: auto; overflow-wrap: anywhere; }
}
@media (max-width: 860px) {
	.to-top { width: 44px; height: 44px; }
	/* Bigger tap targets for small links */
	.breadcrumb a, .site-footer__col a, .site-footer__portal { display: inline-block; padding-block: 12px; margin-block: -12px; }
	.calc .cuc .cuc-step { min-width: 44px; min-height: 44px; }
	/* Snag UI-11: contact links, rate card links and the hero text link get a 44px tap height on phones and tablets */
	.contact-card a { display: inline-block; padding-block: var(--tap-extend); margin-block: calc(-1 * var(--tap-extend)); }
	.arrow-link, .hero__actions .text-link { min-height: var(--tap-min); }
}
/* Snag UI-11: on wider touch screens (iPad landscape and up) small links get an invisible taller tap area, with no change to the look */
@media (min-width: 861px) and (pointer: coarse) {
	.breadcrumb a, .site-footer__col a, .site-footer__portal, .contact-card a, .rate-card .arrow-link, .hero__actions .text-link { position: relative; }
	.breadcrumb a::after, .site-footer__col a::after, .site-footer__portal::after, .contact-card a::after, .rate-card .arrow-link::after, .hero__actions .text-link::after { content: ""; position: absolute; inset: calc(-1 * var(--tap-extend)) 0; }
}
/* Snag UI-12: calculator mode tabs and the "Send this" button fit on small phones (styling around the third-party calculator only) */
@media (max-width: 400px) {
	.calc .cuc .cuc-mode { font-size: var(--fs-small); padding-inline: 10px; }
	.calc .cuc .cuc-btn--light { padding-inline: 16px; }
}