@font-face{font-family:"Noto Serif";font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/noto-serif-400-latin.bab33a2ba2.woff2") format("woff2");}
@font-face{font-family:"Noto Serif";font-style:italic;font-weight:100 900;font-display:swap;src:url("/fonts/noto-serif-italic-latin.ac3609ab60.woff2") format("woff2");}
@font-face{font-family:"Titillium Web";font-style:normal;font-weight:600;font-display:swap;src:url("/fonts/titillium-web-600-latin.f3bf982b36.woff2") format("woff2");}
@font-face{font-family:"Cardo";font-style:italic;font-weight:400;font-display:swap;src:url("/fonts/cardo-italic-latin.ba658f8e3c.woff2") format("woff2");}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/plus-jakarta-sans-400-latin.cbe13a5f72.woff2") format("woff2");}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:600;font-display:swap;src:url("/fonts/plus-jakarta-sans-600-latin.593bebce0a.woff2") format("woff2");}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:700;font-display:swap;src:url("/fonts/plus-jakarta-sans-700-latin.edc22fa6ae.woff2") format("woff2");}
@font-face{font-family:"Font Awesome 5 Brands Regular";font-style:normal;font-weight:400;font-display:block;src:url("/fonts/fa-brands-icons.64f3e19e43.woff2") format("woff2");}
:root{--font-serif:"Noto Serif",Georgia,"Times New Roman",serif;--font-header:"Titillium Web","Segoe UI",system-ui,sans-serif;--font-body:"Plus Jakarta Sans",-apple-system,"Segoe UI",sans-serif;--font-italic:"Cardo",Georgia,serif;}
:root {
--ink: #101A20;
--ink-2: #14293F;
--ivory: #F4F5F5;
--paper: #FFFFFF;
--gold: #C5A457;
--gold-light: #EAC36F;
--gold-deep: #8A6930;
--blue: #72B0F3;
--blue-light: #A8CFF8;
--blue-deep: #195FAA;
--line-dark: #343D42;
--line-light: #D4D6D7;
--guide-ink: #1F2322;
--tint: #262B27;
--bg-dark-2: #1E272D;
--bg-footer: #0E161C;
--foil-duo: linear-gradient(120deg, #EDD297 0%, #EAC36F 34%, #C5A457 100%);
--foil-duo-light: linear-gradient(120deg, #8A6930 0%, #72592D 52%, #5C4B2A 100%);
--foil-gold: linear-gradient(135deg, #EAC36F 0%, #C5A457 38%, #8A6930 100%);
--f-ui: "Plus Jakarta Sans", system-ui, sans-serif;
--f-display: "Noto Serif", Georgia, serif;
--f-head: "Titillium Web", system-ui, sans-serif;
--fs-display: clamp(2.375rem, 5.9vw, 4.125rem);
--fs-h2: clamp(1.625rem, 3.9vw, 2.5rem);
--fs-h3: clamp(1.125rem, 2.15vw, 1.375rem);
--fs-lead: clamp(1rem, 1.95vw, 1.25rem);
--fs-body: clamp(0.9375rem, 1.66vw, 1.0625rem);
--fs-small: clamp(0.875rem, 1.46vw, 0.9375rem);
--fs-xsmall: clamp(0.75rem, 1.2vw, 0.8125rem);
--fs-eyebrow: clamp(0.75rem, 1.17vw, 0.75rem);
--fs-stat: clamp(1.75rem, 4.3vw, 2.75rem);
--fs-numeral: clamp(2rem, 5.47vw, 3.5rem);
--gutter: 52px;
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-pill: 999px;
--radius-card: 12px;
--motion-fast: 150ms;
--motion-base: 240ms;
--motion-reveal: 620ms;
--motion-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}
@media (max-width: 899px) { :root { --gutter: 24px; } }
@media (max-width: 559px) { :root { --gutter: 18px; } }
@media (max-width: 359px) { :root { --gutter: 14px; } }
:root {
--gutter: 52px;
--ink: #0A0F13;
--ink-2: #121A20;
--ivory: #F7F3EC;
--ivory-2: #EFE8DE;
--paper: #FFFFFF;
--gold: #C5A457;
--gold-light: #EAC36F;
--gold-deep: #8A6930;
--rose: #A8823C;
--rose-light: #E5CE9A;
--rose-deep: #7A5E22;
--fs-display: clamp(2.375rem, 5.9vw, 4.125rem);
--fs-h2: clamp(1.625rem, 3.9vw, 2.5rem);
--fs-h3: clamp(1.125rem, 2.15vw, 1.375rem);
--fs-lead: clamp(1rem, 1.95vw, 1.25rem);
--fs-body: clamp(0.9375rem, 1.66vw, 1.0625rem);
--fs-small: clamp(0.875rem, 1.46vw, 0.9375rem);
--fs-eyebrow: clamp(0.75rem, 1.17vw, 0.75rem);
--fs-stat: clamp(1.75rem, 4.3vw, 2.75rem);
--fs-numeral: clamp(2rem, 5.47vw, 3.5rem);
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--ink); color: var(--ivory); font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.65; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
small { font-size: max(0.8em, 12px); }
a { color: var(--rose-light); text-decoration: none; }
a:hover { color: var(--gold-light); }
.pal-b { --ink: #0B1F3A; --ink-2: #123055; --ivory: #F8F5F0; --paper: #FFFFFF; --gold: #D4AF37; --gold-light: #E7C765; --gold-deep: #9A7C22; --rose: #B76E79; --rose-light: #D9A2AB; --rose-deep: #8C4B57; }
.pal-c { --ink: #07182D; --ink-2: #294463; --ivory: #F7F9FC; --paper: #FFFFFF; --gold: #E4B942; --gold-light: #F2D272; --gold-deep: #A5822A; --rose: #D29AA5; --rose-light: #E6C3C9; --rose-deep: #A76D78; }
.pal-d { --ink: #101B2D; --ink-2: #1B2A42; --ivory: #FAF7F2; --paper: #FFFFFF; --gold: #C9A45C; --gold-light: #E7D3A3; --gold-deep: #8E7233; --rose: #C08081; --rose-light: #DDB0B0; --rose-deep: #8F5B5C; }
.pal-e { --ink: #07111F; --ink-2: #16283E; --ivory: #EEF1F4; --paper: #FFFFFF; --gold: #CFAF3E; --gold-light: #E5CD73; --gold-deep: #94782A; --rose: #C47C89; --rose-light: #DFAAB3; --rose-deep: #8E5560; }
.pal-f { --ink: #081B33; --ink-2: #14233A; --ivory: #F7F5F2; --paper: #FFFFFF; --gold: #D4AF37; --gold-light: #EBCB6C; --gold-deep: #93761F; --rose: #C88994; --rose-light: #E8D7D2; --rose-deep: #96606A; }
.pal-g { --ink: #04101F; --ink-2: #0B1E36; --ivory: #F7F3EC; --paper: #FFFFFF; --gold: #C5A457; --gold-light: #EAC36F; --gold-deep: #8A6930; --rose: #A8823C; --rose-light: #E5CE9A; --rose-deep: #7A5E22; }
.shell {
--line-dark: color-mix(in srgb, var(--ivory) 16%, transparent);
--line-light: color-mix(in srgb, var(--ink) 14%, transparent);
--guide-ink: color-mix(in srgb, var(--ink) 88%, var(--gold-deep));
--tint: color-mix(in srgb, var(--gold) 12%, transparent);
--foil-gold: linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 38%, var(--gold-deep) 100%);
--foil-rose: linear-gradient(135deg, var(--rose-light) 0%, var(--rose) 44%, var(--rose-deep) 100%);
--foil-duo: linear-gradient(120deg, color-mix(in srgb, var(--gold-light) 70%, var(--ivory)) 0%, var(--gold-light) 34%, var(--gold) 100%);
--foil-duo-light: linear-gradient(120deg, var(--gold-deep) 0%, color-mix(in srgb, var(--gold-deep) 80%, var(--ink)) 52%, color-mix(in srgb, var(--gold-deep) 62%, var(--ink)) 100%);
--bg-hero: radial-gradient(120% 90% at 12% 18%, color-mix(in srgb, var(--gold) 32%, transparent) 0%, color-mix(in srgb, var(--rose) 20%, transparent) 34%, transparent 68%), linear-gradient(180deg, var(--ink) 0%, var(--ink-2) 78%, var(--ink) 100%);
--bg-dark-1: linear-gradient(180deg, var(--ink) 0%, var(--ink-2) 100%);
--bg-dark-2: color-mix(in srgb, var(--ink) 94%, var(--ivory));
--bg-guide: radial-gradient(115% 145% at 84% 82%, #4E6984 0%, #417099 18%, #1F4E7E 38%, rgba(14, 23, 28, 0) 66%), linear-gradient(180deg, var(--bg-footer) 0%, var(--bg-footer) 100%);
--bg-footer: color-mix(in srgb, var(--ink) 86%, #000000);
background: var(--ink); color: var(--ivory);
font-family: var(--f-ui, var(--font-body));
}
.pal-i { --ink: #0E171C; --ink-2: #162229; --ivory: #F4F5F5; --paper: #FFFFFF; --gold: #C5A457; --gold-light: #D8BC7E; --gold-deep: #8A6930; --rose: #195FAA; --rose-light: #72B0F3; --rose-deep: #134C88; --bg-hero: radial-gradient(circle at 18% 42%, #4A72A6 0%, #195FAA 28%, #162229 68%, #0E171C 100%); --bg-dark-1: linear-gradient(180deg, #0E171C 0%, #162229 100%); --bg-guide: linear-gradient(180deg, #D8BC7E 0%, #C5A457 34%, #8A6930 74%, #0E171C 100%); }
.type-a { --f-display: var(--font-serif); --f-head: var(--font-header); --f-ui: var(--font-body); --f-accent: var(--font-italic); --disp-track: -0.02em; }
.type-b { --f-display: var(--font-serif); --f-accent: var(--font-italic); --disp-track: -0.02em; --f-head: var(--font-header); --f-ui: "Jost", sans-serif; }
.type-c { --f-display: var(--font-serif); --f-accent: var(--font-italic); --disp-track: -0.02em; --f-head: var(--font-header); --f-ui: "Manrope", sans-serif; }
.type-d { --f-display: var(--font-serif); --f-accent: var(--font-italic); --disp-track: -0.02em; --f-head: var(--font-header); --f-ui: "Schibsted Grotesk", sans-serif; }
.type-e { --f-display: var(--font-serif); --f-accent: var(--font-italic); --disp-track: -0.02em; --f-head: var(--font-header); --f-ui: "Archivo", sans-serif; }
.type-f { --f-display: var(--font-serif); --f-accent: var(--font-italic); --disp-track: -0.02em; --f-head: var(--font-header); --f-ui: "DM Sans", sans-serif; }
.type-g { --f-display: var(--font-serif); --f-accent: var(--font-italic); --disp-track: -0.02em; --f-head: var(--font-header); --f-ui: "Syne", sans-serif; }
.type-h { --f-display: var(--font-serif); --f-accent: var(--font-italic); --disp-track: -0.02em; --f-head: var(--font-header); --f-ui: "Space Grotesk", sans-serif; }
.type-i { --f-display: var(--font-serif); --f-accent: var(--font-italic); --disp-track: -0.02em; --f-head: var(--font-header); --f-ui: "Bricolage Grotesque", sans-serif; }
.type-j { --f-display: var(--font-serif); --f-accent: var(--font-italic); --disp-track: -0.02em; --f-head: var(--font-header); --f-ui: "Epilogue", sans-serif; }
.type-k { --f-display: var(--font-serif); --f-accent: var(--font-italic); --disp-track: -0.02em; --f-head: var(--font-header); --f-ui: "Plus Jakarta Sans", sans-serif; }
.type-l { --f-display: var(--font-serif); --f-accent: var(--font-italic); --disp-track: -0.02em; --f-head: var(--font-header); --f-ui: "Sora", sans-serif; }
.type-m { --f-display: var(--font-serif); --f-accent: var(--font-italic); --disp-track: -0.02em; --f-head: var(--font-header); --f-ui: "Chivo", sans-serif; }
.type-n { --f-display: var(--font-serif); --f-accent: var(--font-italic); --disp-track: -0.02em; --f-head: var(--font-header); --f-ui: "Instrument Sans", sans-serif; }
.toolrow { display: flex; align-items: center; justify-content: flex-start; gap: 10px; width: 100%; text-align: left; padding-bottom: 11px; border-bottom: 1px solid var(--line-dark); }
.band { position: relative; width: 100%; overflow: clip; }
.pal-h { --ink: #101A20; --ink-2: #14293F; --ivory: #F4F5F5; --paper: #FFFFFF; --gold: #C5A457; --gold-light: #EAC36F; --gold-deep: #8A6930; --rose: #72B0F3; --rose-light: #A8CFF8; --rose-deep: #195FAA; --bg-hero: radial-gradient(ellipse at 10% 50%, #3F72A8 0%, #14538F 26%, #101A20 72%); --bg-dark-1: linear-gradient(180deg, #101A20 0%, #14293F 100%); }
.shell h1, .shell h2, .shell h3 { text-align: left; }
.shell h2 { width: 100%; max-width: none; }
.band-hero { background: var(--bg-hero); }
.band-dark { background-color: var(--ink); background-image: linear-gradient(195deg, #2C4B65 0%, var(--ink) 30%); }
.band-dark-2 { background-color: var(--bg-dark-2); background-image: linear-gradient(195deg, color-mix(in srgb, #2C4B65 72%, var(--ink)) 0%, var(--bg-dark-2) 30%); }
.band-light { background-color: var(--ivory); background-image: linear-gradient(195deg, #CADBEA 0%, var(--paper) 30%); color: var(--ink); }
.band-guide { background: var(--bg-guide); background-color: var(--bg-footer);
color: color-mix(in srgb, var(--ivory) 82%, transparent); }
.band-dark + .band-dark, .band-dark + .band-dark-2, .band-dark-2 + .band-dark, .band-dark-2 + .band-dark-2, .band-light + .band-light { background-image: none; }
.band-footer { background: var(--bg-footer); background-image: none; color: color-mix(in srgb, var(--ivory) 70%, transparent); }
.band-guide + .band-footer { margin-top: -1px; }
.inner, .band > .inner { width: min(100% - 2 * var(--gutter), 1024px); margin-inline: auto; }
.split, .split-a, .split-b, .g2, .g3, .g4 { display: grid; gap: clamp(20px, 3.4vw, 44px); }
.split { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; }
.split-a { grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); align-items: center; }
.split-b { grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr); align-items: stretch; }
.sec-head { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(10px, 1.6vw, 18px); width: 100%; }
.sec-head > div { width: 100%; }
.sec-head > p { max-width: none; }
.sec-head > .eyebrow { justify-self: start; }
.split-hero { display: grid; grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr); align-items: end; gap: clamp(10px, 1.6vw, 24px); }
.hero-cta .pill { padding: 14px clamp(13px, 1.5vw, 20px); letter-spacing: 0.06em; }
.hero-panel-col { position: sticky; top: calc(var(--header-h, 84px) + 16px); align-self: start; }
.hero-figure { position: relative; display: flex; justify-content: center; align-items: flex-end; width: 110%; max-width: none; margin-right: -10%; }
@media (min-width: 900px) { .hero-line1 { white-space: nowrap; } }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.foil-text { background: var(--foil-duo); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: 0.08em; }
.band-dark h2, .band-dark-2 h2, .band-hero h2 { color: var(--ivory); }
.band-dark h2 .foil-text, .band-dark-2 h2 .foil-text, .band-hero h2 .foil-text { background: var(--foil-duo); -webkit-background-clip: text; background-clip: text; color: transparent; }
.band-light .foil-text { background: var(--foil-duo-light); -webkit-background-clip: text; background-clip: text; color: transparent; }
.band-guide .foil-text { background: var(--foil-duo); -webkit-background-clip: text; background-clip: text; color: transparent; }
.eyebrow { font-size: var(--fs-eyebrow); letter-spacing: 0.28em; text-transform: uppercase; font-weight: 700; }
.eyebrow.foil-text { background: linear-gradient(120deg, #F3E3B8 0%, #EAC36F 55%, #D8B65F 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.serif { font-family: var(--f-display); font-weight: 400; letter-spacing: var(--disp-track, -0.02em); }
button, input, select, textarea { font-family: var(--f-ui, var(--font-body)); }
.pill { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; border-radius: 999px; font-weight: 700; font-size: var(--fs-small); letter-spacing: 0.12em; text-transform: uppercase; padding: 16px 34px; cursor: pointer; border: 0; transition: transform 0.15s ease, box-shadow 0.25s ease, background 0.25s ease, color 0.25s ease; }
.pill-foil { background: var(--foil-gold); color: var(--guide-ink); box-shadow: 0 10px 30px color-mix(in srgb, var(--gold) 25%, transparent); }
.pill-foil:hover { color: var(--guide-ink); transform: translateY(-1px); box-shadow: 0 14px 36px color-mix(in srgb, var(--gold) 35%, transparent); }
.pill-foil:active { transform: translateY(1px); }
.pill-rose { background: var(--foil-rose); color: var(--guide-ink); box-shadow: 0 10px 30px color-mix(in srgb, var(--gold) 24%, transparent); }
.pill-rose:hover { color: var(--guide-ink); transform: translateY(-1px); }
.pill-line { background: transparent; border: 1px solid var(--rose); color: var(--rose-light); }
.pill-line:hover { background: var(--rose); color: var(--ink); }
.pill-line-dark { background: transparent; border: 1px solid color-mix(in srgb, var(--ink) 35%, transparent); color: var(--ink); }
.pill-line-dark:hover { background: var(--ink); color: var(--ivory); }
.team-copy a { align-self: flex-start; }
.js-anim .reveal { opacity: 0; transition: opacity 0.9s cubic-bezier(0.22, 0.68, 0, 1), transform 0.9s cubic-bezier(0.22, 0.68, 0, 1); will-change: opacity, transform; }
.reveal { opacity: 1; }
.js-anim .reveal-l { transform: translate3d(-84px, 0, 0); }
.js-anim .reveal-r { transform: translate3d(84px, 0, 0); }
.js-anim .reveal-bleed { transform: translate3d(-84px, 0, 0) scale(1.04); }
.js-anim .reveal-up { transform: translate3d(0, 38px, 0); }
.js-anim .reveal-scale { transform: scale(1.06); }
.js-anim .kenburns { transition: transform 1.6s cubic-bezier(0.22, 0.68, 0, 1); transform: scale(1.12); }
.reveal.in, .js-anim .reveal.in, .js-anim .reveal-bleed.in, .js-anim .kenburns.in { transform: none; opacity: 1; }
.reveal-up { transform: translate3d(0, 38px, 0); }
.reveal-scale { transform: scale(1.06); }
.reveal.in { opacity: 1; }
.zoomwrap { overflow: hidden; border-radius: 4px; }
.kenburns { transform: none; }
.reveal-d1 { transition-delay: 0.09s; }
.reveal-d2 { transition-delay: 0.18s; }
.reveal-d3 { transition-delay: 0.27s; }
@media (prefers-reduced-motion: reduce) {
.js-anim .reveal, .js-anim .reveal-l, .js-anim .reveal-r, .js-anim .reveal-up, .js-anim .reveal-scale, .js-anim .reveal-bleed { opacity: 1; transform: none; transition: none; }
.js-anim .kenburns, .js-anim .kenburns.in { transform: none; transition: none; }
}
.teamgrid { row-gap: clamp(24px, 3.4vw, 34px); }
@keyframes lxDrift { from { transform: translateX(0); } to { transform: translateX(-50%); } }
body { overflow-x: clip; }
@keyframes navSlideIn { from { transform: translateX(100%); } to { transform: none; } }
:root { --fs-xsmall: 0.75rem; }
.navwrap { position: relative; display: flex; align-items: center; gap: clamp(14px, 1.8vw, 26px); width: 100%; padding: 14px 0; transition: padding 0.2s ease; }
.nav-scrolled .navwrap { padding: 10px 0; }
.navbar { display: flex; align-items: center; justify-content: center; gap: clamp(8px, 1.1vw, 20px); flex: 1 1 auto; }
.nav-top { position: relative; display: flex; align-items: center; gap: 5px; padding: 8px 2px; font-family: var(--f-ui); font-size: var(--fs-small); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: color-mix(in srgb, var(--ivory) 76%, transparent); background: transparent; border: 0; border-bottom: 2px solid transparent; white-space: nowrap; cursor: pointer; }
.nav-top:hover, .nav-top:focus-visible { color: var(--gold-light); }
.nav-top[data-nav-current], [data-nav-current] > .nav-top { color: var(--ivory); border-bottom-color: var(--gold); }
.nav-top svg { transition: transform 0.2s ease; }
[data-nav-open] > .nav-top svg { transform: rotate(180deg); }
.navbar > *, .nav-item, .nav-item-mega { position: relative; }
.nav-panel { display: flex; flex-direction: column; gap: 2px; }
.js-nav .nav-panel { display: none; position: absolute; top: calc(100% + 10px); left: -14px; z-index: 90; min-width: 236px; padding: 12px; border-radius: 14px; background: var(--ivory); border: 1px solid color-mix(in srgb, var(--gold-deep) 30%, transparent); box-shadow: 0 22px 48px rgba(0,0,0,0.34); }
.js-nav [data-nav-open] > .nav-panel { display: flex; }
.nav-panel a { display: block; padding: 9px 12px; border-radius: 8px; font-size: var(--fs-small); font-weight: 600; letter-spacing: 0.01em; color: var(--ink); }
.nav-panel a:hover, .nav-panel a:focus-visible { background: color-mix(in srgb, var(--gold-deep) 10%, transparent); color: var(--gold-deep); }
.nav-colhead { padding: 2px 12px 6px; font-size: var(--fs-xsmall); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-deep); }
.nav-colnote { padding: 0 12px 8px; font-size: var(--fs-xsmall); line-height: 1.5; color: color-mix(in srgb, var(--ink) 66%, transparent); }
.nav-divider { height: 1px; margin: 7px 12px; background: color-mix(in srgb, var(--gold-deep) 22%, transparent); }
.nav-child { position: relative; margin-left: 16px; padding-left: 12px; font-size: var(--fs-xsmall) !important; color: color-mix(in srgb, var(--ink) 70%, transparent) !important; }
.nav-child::before { content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 1px; background: color-mix(in srgb, var(--gold-deep) 25%, transparent); }
.nav-child:hover, .nav-child:focus-visible { color: var(--gold-deep) !important; }
.js-nav .nav-mega { left: -14px; right: auto; display: none;
width: min(760px, calc(100vw - 2 * var(--gutter))); max-width: calc(100vw - 2 * var(--gutter)); }
.js-nav [data-nav-open] > .nav-mega { display: grid; }
.nav-mega { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 18px; padding: 20px; }
.nav-megafoot { grid-column: 1 / -1; margin-top: 4px; padding-top: 12px; border-top: 1px solid color-mix(in srgb, var(--gold-deep) 22%, transparent); }
.nav-megafoot a { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-small); font-weight: 700; color: var(--gold-deep); }
.burger { display: none; }
.nav-drawer, .nav-backdrop { display: none; }
.js-nav .navbar, .js-nav .header-cta { display: flex; }
.shell header .inner, .shell .inner.navwrap { width: min(100% - 2 * var(--gutter), 1400px); max-width: none; }
.shell .navbar { min-width: 0; flex-shrink: 1; }
@media (min-width: 1024px) and (max-width: 1339px) {
.shell .navbar { gap: 8px; }
.shell .nav-top { font-size: var(--fs-xsmall); letter-spacing: 0.02em; }
}
@media (min-width: 1024px) and (max-width: 1179px) {
.navwrap { gap: 12px; }
.navbar { gap: 6px; }
.nav-top { font-size: var(--fs-xsmall); letter-spacing: 0.04em; }
.header-cta .cta-long { display: none; }
}
@media (min-width: 1180px) { .header-cta .cta-short { display: none; } }
@media (max-width: 1023px) {
.header-cta .cta-long { display: none; }
.js-nav .navbar, .js-nav .header-cta { display: none; }
html:not(.js-nav) .navwrap, html:not(.js-nav) .navbar { flex-wrap: wrap; }
html:not(.js-nav) .navbar { justify-content: center; row-gap: 4px; }
.js-nav .burger { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 46px; height: 46px; margin-left: auto; padding: 0; border: 1px solid var(--line-dark); border-radius: 12px; background: transparent; color: var(--ivory); cursor: pointer; }
.js-nav .nav-backdrop { display: block; position: fixed; inset: 0; z-index: 95; background: rgba(4,10,16,0.62); opacity: 0; pointer-events: none; transition: opacity 0.24s ease; }
.js-nav.nav-drawer-open .nav-backdrop { opacity: 1; pointer-events: auto; }
.js-nav .nav-drawer { display: none; flex-direction: column; position: fixed; top: 0; right: 0; bottom: 0; z-index: 96; width: min(88vw, 380px); padding: 18px 20px 20px; background: var(--ink); border-left: 1px solid var(--line-dark); }
.js-nav.nav-drawer-open .nav-drawer { display: flex; animation: navSlideIn 0.28s cubic-bezier(0.22,0.68,0,1) both; }
.nav-drawer-scroll { flex: 1 1 auto; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; margin-top: 10px; }
.nav-acc { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 14px 6px; font-family: var(--f-ui); font-size: var(--fs-small); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: color-mix(in srgb, var(--ivory) 86%, transparent); background: transparent; border: 0; border-bottom: 1px solid var(--line-dark); cursor: pointer; }
.nav-acc svg { transition: transform 0.2s ease; }
[data-nav-accsec][data-nav-open] .nav-acc { color: var(--gold-light); }
[data-nav-accsec][data-nav-open] .nav-acc svg { transform: rotate(180deg); }
.nav-accbody { display: flex; flex-direction: column; gap: 1px; padding: 6px 0 10px; }
.js-nav [data-nav-accsec]:not([data-nav-open]) .nav-accbody { display: none; }
.nav-accbody a, .nav-drawer-scroll > a { display: block; padding: 11px 10px; font-size: var(--fs-small); font-weight: 600; color: color-mix(in srgb, var(--ivory) 78%, transparent); border-radius: 8px; }
.nav-drawer-scroll > a { font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 14px 6px; border-bottom: 1px solid var(--line-dark); border-radius: 0; }
.nav-accbody a:hover, .nav-drawer-scroll > a:hover { background: var(--tint); color: var(--gold-light); }
.nav-accbody .nav-colhead { color: var(--gold); padding: 10px 10px 4px; }
.nav-accbody .nav-colnote { color: color-mix(in srgb, var(--ivory) 58%, transparent); padding: 0 10px 6px; }
.nav-accbody .nav-divider { background: var(--line-dark); margin: 6px 10px; }
.nav-accbody .nav-child { margin-left: 12px; padding-left: 10px; color: color-mix(in srgb, var(--ivory) 62%, transparent) !important; }
.nav-accbody .nav-child::before { background: color-mix(in srgb, var(--gold) 30%, transparent); }
.nav-drawer-foot { flex: none; display: flex; flex-direction: column; align-items: stretch; gap: 10px; padding-top: 14px; margin-top: 10px; border-top: 1px solid var(--line-dark); }
.nav-drawer-foot .pill { width: 100%; justify-content: center; }
.nav-drawer-foot a[href^="tel:"] { text-align: center; font-size: var(--fs-small); font-weight: 700; letter-spacing: 0.06em; color: var(--gold-light); }
}
@media (max-width: 899px) {
:root { --gutter: 24px; }
.split, .split-a, .split-b, .split-hero, .g2, .g3, .g4 { grid-template-columns: minmax(0, 1fr); text-align: center; justify-items: center; }
.teamgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hero-panel-col { position: static; top: auto; }
.split h1, .split h2, .split h3, .split-a h1, .split-a h2, .split-a h3, .split-b h1, .split-b h2, .split-b h3, .split-hero h1 { text-align: center; }
.hero-figure { width: 100%; margin-right: 0; max-width: 460px; }
.hero-badge { justify-content: center; }
.shell .inner, .shell .inner > *, .shell .inner p, .shell .inner li, .shell .inner h1, .shell .inner h2, .shell .inner h3, .shell .inner h4 { text-align: center; }
.shell .inner > div, .shell .inner > section, .shell .inner > article, .shell .inner > header, .shell .inner > figure { align-items: center; justify-items: center; }
.shell .inner p, .shell .inner .measure, .shell .inner blockquote { margin-inline: auto; }
.shell .inner img { margin-inline: auto; }
.shell .inner .pill, .shell .inner a.pill { align-self: center; }
.shell .inner ul, .shell .inner ol { list-style-position: inside; padding-left: 0; }
.shell .navwrap, .shell .annot .inner { text-align: initial; }
.shell #integrations .g4 > div, .shell #integrations .g4 > div * { text-align: left; }
.shell #integrations .g4 > div .toolrow { justify-content: flex-start; align-items: center; }
.m-center { text-align: center; align-items: center; justify-items: center; }
.shell .m-center h1, .shell .m-center h2, .shell .m-center h3 { text-align: center; }
.m-center img { margin-inline: auto; }
.m-hide { display: none; }
.team-copy { padding-block: 0; }
.team-copy h2, .team-copy p { max-width: none; margin-inline: auto; }
.team-copy a { align-self: center; }
.shell { text-align: center; }
.shell h1, .shell h2, .shell h3 { text-align: center; }
.shell img { margin-inline: auto; }
.shell p, .shell .eyebrow { margin-inline: auto; }
.sec-head { align-items: center; text-align: center; }
.sec-head > p, .sec-head > div { margin-inline: auto; text-align: center; }
.shell .pill { align-self: center !important; justify-self: center !important; }
.hero-cta, .hero-badge { justify-content: center; }
.shell .inner > div, .shell .inner > div > div { align-items: center; }
.shell .g2 > div, .shell .g3 > div, .shell .g4 > div, .shell .g2 > a, .shell .g3 > a { align-items: center; text-align: center; }
.shell #integrations .g4 > div { align-items: flex-start; text-align: left; }
.shell #integrations .g4 > div .toolrow { align-items: center; justify-content: flex-start; text-align: left; }
.shell .g2 > div > div, .shell .g4 > div > div { justify-content: center; }
.shell .g2 > div span, .shell .g3 > div span, .shell .g4 > div span { justify-content: center; }
.shell footer .g4 > div { align-items: center; }
.shell footer .g4 > div > div { justify-content: center; }
}
@media (max-width: 559px) {
:root { --gutter: 18px; }
.pill { padding: 14px 26px; white-space: normal; text-align: center; max-width: 100%; }
.teamgrid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 359px) {
:root { --gutter: 14px; }
}
.pagination { display: flex; align-items: center; justify-content: center; gap: clamp(10px, 2vw, 20px); flex-wrap: wrap; width: 100%; padding-top: clamp(18px, 2.6vw, 28px); border-top: 1px solid var(--line-light); }
.pag-list { display: flex; align-items: center; gap: 6px; list-style: none; margin: 0; padding: 0; }
.pag-num { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 10px; border-radius: 999px; font-size: var(--fs-small); font-weight: 600; color: var(--ink); text-decoration: none; border: 1px solid transparent; }
.pag-num:hover { border-color: color-mix(in srgb, var(--gold-deep) 40%, transparent); color: var(--gold-deep); }
.pag-num.is-current { background: var(--ink); color: var(--ivory); }
.pag-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: var(--fs-small); font-weight: 700; letter-spacing: 0.04em; color: var(--gold-deep); text-decoration: none; }
.pag-link:hover { color: var(--ink); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.shell img { height: auto; }
picture { display: contents; }
picture > source { display: none; }
@keyframes nnaRevealL { from { opacity: 0; transform: translate3d(-84px, 0, 0); } }
@keyframes nnaRevealR { from { opacity: 0; transform: translate3d(84px, 0, 0); } }
@keyframes nnaRevealUp { from { opacity: 0; transform: translate3d(0, 38px, 0); } }
@keyframes nnaRevealScale { from { opacity: 0; transform: scale(1.06); } }
@keyframes nnaRevealBleed { from { opacity: 0; transform: translate3d(-84px, 0, 0) scale(1.04); } }
@keyframes nnaRevealFade { from { opacity: 0; } }
.js-anim .in-initial {
animation: nnaRevealFade 0.9s cubic-bezier(0.22, 0.68, 0, 1) both;
}
.js-anim .reveal-l.in-initial { animation-name: nnaRevealL; }
.js-anim .reveal-r.in-initial { animation-name: nnaRevealR; }
.js-anim .reveal-up.in-initial { animation-name: nnaRevealUp; }
.js-anim .reveal-scale.in-initial { animation-name: nnaRevealScale; }
.js-anim .reveal-bleed.in-initial { animation-name: nnaRevealBleed; }
.js-anim .reveal-d1.in-initial { animation-delay: 0.09s; }
.js-anim .reveal-d2.in-initial { animation-delay: 0.18s; }
.js-anim .reveal-d3.in-initial { animation-delay: 0.27s; }
@media (prefers-reduced-motion: reduce) {
.js-anim .in-initial { animation: none; }
}
.statbar {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
border-top: 1px solid var(--line-dark);
margin-top: clamp(28px, 4vw, 44px);
}
.statbar > div {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 6px;
padding: clamp(20px, 2.6vw, 28px) clamp(12px, 2vw, 22px);
border-right: 1px solid var(--line-dark);
}
.statbar > div:last-child { border-right: 0; }
.statbar .eyebrow {
letter-spacing: 0.16em;
color: color-mix(in srgb, var(--ivory) 60%, transparent);
}
.statbar .stat {
font-size: var(--fs-stat, clamp(30px, 3.6vw, 44px));
line-height: 1;
}
@media (max-width: 899px) {
.statbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.statbar > div { align-items: center; text-align: center; padding-right: 0; }
.statbar > div:nth-child(2n) { border-right: 0; }
}
@media (max-width: 559px) {
.statbar { grid-template-columns: minmax(0, 1fr); }
.statbar > div { border-right: 0; border-bottom: 1px solid var(--line-dark); }
.statbar > div:last-child { border-bottom: 0; }
}
:root {
--metal-gold:
linear-gradient(101deg, transparent 0 34%, color-mix(in srgb, #FFF4D2 62%, transparent) 40%, transparent 46%),
linear-gradient(101deg, transparent 0 62%, color-mix(in srgb, #FFF9E8 48%, transparent) 66%, transparent 70%),
linear-gradient(168deg, color-mix(in srgb, #FFF1CC 55%, transparent) 0%, transparent 26%),
linear-gradient(348deg, color-mix(in srgb, #E9C778 70%, transparent) 0%, transparent 22%),
linear-gradient(101deg, #6E5320 0%, #A5822F 14%, #EBCB77 30%, #FBEFC9 39%, #D9B354 50%, #8A6930 64%, #C5A457 79%, #F3DFA4 88%, #8F6E31 100%);
}
.hero-curve {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 100%;
top: calc(-1 * var(--curve-rise, 250px));
background: var(--metal-gold);
opacity: 0.97;
clip-path: url(#riseCurve);
-webkit-clip-path: url(#riseCurve);
z-index: 0;
pointer-events: none;
}
.hero-spark {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 100%;
top: calc(-1 * var(--curve-rise, 250px));
height: calc(100% + var(--curve-rise, 250px));
pointer-events: none;
overflow: visible;
z-index: 1;
}
@media (prefers-reduced-motion: reduce) {
.hero-spark circle { display: none; }
}
@media (max-width: 899px) {
.hero-curve { top: 0; }
.hero-spark { top: 0; height: 100%; }
}
.hero-figure {
position: relative;
padding-top: clamp(20px, 3vw, 34px);
overflow: visible;
justify-content: flex-end;
}
.hero-cutout {
max-width: none;
margin-right: -7%;
align-self: flex-end;
}
@media (max-width: 899px) {
.hero-figure { justify-content: center; width: 100%; margin-right: 0; }
.hero-cutout { width: 100%; margin-right: 0; }
}
.hero-head { display: flex; flex-direction: column; gap: clamp(14px, 2vw, 22px); }
.hero-head h1 > span { display: block; }
.split-hero { margin-top: clamp(4px, 0.8vw, 10px); }
.hero-copy { display: flex; flex-direction: column; gap: clamp(18px, 2.6vw, 28px); align-self: start; }
.tpl-T01 .hero-copy .cta-row { margin-top: 0; gap: 10px; }
.statbadge {
margin-top: 4px;
max-width: 100%;
}
.statbadge img { display: block; height: auto; }
.statbadge,
.foot-brand .badge-shine {
position: relative;
display: inline-block;
overflow: hidden;
line-height: 0;
}
.statbadge { border-radius: 23.7%; }
.statbadge::after,
.foot-brand .badge-shine::after {
content: "";
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
background: linear-gradient(104deg,
transparent 38%,
color-mix(in srgb, #FFFFFF 62%, transparent) 48%,
transparent 58%);
transform: translateX(-130%);
animation: bSweep 7s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.foot-brand .badge-shine {
display: block;
width: min(100%, 300px);
font-size: 0;
margin-top: 2px;
}
.foot-brand .badge-shine {
-webkit-mask-image: url("/media/xero-badges-mask.png");
mask-image: url("/media/xero-badges-mask.png");
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
@keyframes bSweep {
0%, 66%   { transform: translateX(-130%); }
92%, 100% { transform: translateX(130%); }
}
@media (prefers-reduced-motion: reduce) {
.statbadge::after,
.foot-brand .badge-shine::after { animation: none; opacity: 0; }
}
.hero-cta .pill { padding: 16px 34px; letter-spacing: 0.12em; }
.tpl-T01 .hero-cta { justify-content: center; }
.hero-cutout {
position: relative;
z-index: 2;
width: 100%;
height: auto;
filter: drop-shadow(0 26px 54px rgba(0, 0, 0, 0.5));
}
.signals {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(14px, 1.8vw, 22px);
margin-top: clamp(22px, 3vw, 34px);
list-style: none;
padding-left: 0;
}
.signal {
display: flex;
align-items: flex-start;
gap: 12px;
font-size: var(--fs-small);
line-height: 1.65;
color: color-mix(in srgb, var(--ink) 78%, transparent);
text-wrap: pretty;
}
.signal svg { flex: none; margin-top: 3px; color: var(--gold-deep); }
.pressquote {
max-width: 46rem;
margin: clamp(22px, 3vw, 32px) auto 0;
padding-left: clamp(16px, 2vw, 24px);
border-left: 2px solid color-mix(in srgb, var(--gold) 55%, transparent);
}
.pressline {
margin: 0 0 8px;
font-size: var(--fs-h3);
line-height: 1.35;
color: var(--ivory);
text-wrap: pretty;
}
.pressquote cite {
display: block;
margin-top: 12px;
font-style: normal;
color: color-mix(in srgb, var(--ivory) 66%, transparent);
}
.band-dark .casepara { color: color-mix(in srgb, var(--ivory) 80%, transparent); }
.practnote {
margin-top: clamp(16px, 2.2vw, 22px);
font-weight: 600;
color: var(--blue-deep);
}
.band-dark .practnote, .band-hero .practnote { color: var(--rose-light); }
.saygrid { gap: clamp(18px, 2.4vw, 28px); margin-top: clamp(22px, 3vw, 34px); }
.saycard {
display: flex;
flex-direction: column;
gap: 14px;
margin: 0;
padding: clamp(20px, 2.6vw, 30px);
border: 1px solid var(--line-dark);
border-radius: 4px;
background: color-mix(in srgb, var(--ivory) 4%, transparent);
}
.saycard p {
margin: 0;
font-size: var(--fs-small);
line-height: 1.7;
color: color-mix(in srgb, var(--ivory) 78%, transparent);
text-wrap: pretty;
}
.saycard strong { color: var(--ivory); }
.saycard cite { font-style: normal; color: var(--gold-light); }
@media (max-width: 899px) {
.signals { grid-template-columns: minmax(0, 1fr); }
.signal { justify-content: flex-start; text-align: left; }
.pressquote { text-align: left; }
}
.promise {
border-block: 1px solid var(--line-dark);
background: var(--bg-dark-2);
background-image: none;
}
.tpl-T01 section.band.promise { padding: clamp(12px, 1.8vw, 18px) 0; }
.promise-row span {
font-size: var(--fs-h3);
color: color-mix(in srgb, var(--ivory) 82%, transparent);
}
.promise-row {
display: flex;
flex-wrap: wrap;
gap: clamp(10px, 2.4vw, 28px);
align-items: baseline;
justify-content: center;
text-align: center;
}
.nav-megacol {
display: flex;
flex-direction: column;
min-width: 0;
}
.nav-megacol > a { display: block; }
header.band[data-site-header] {
position: sticky;
top: 0;
z-index: 80;
background: color-mix(in srgb, var(--ink) 90%, transparent);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border-bottom: 1px solid var(--line-dark);
overflow: visible;
}
.band-light .eyebrow { color: var(--rose-deep); }
.band-guide .eyebrow { color: color-mix(in srgb, var(--ivory) 82%, transparent); }
.band-dark .sec-head > p,
.band-dark-2 .sec-head > p { color: color-mix(in srgb, var(--ivory) 74%, transparent); }
.lead { font-size: var(--fs-lead); line-height: 1.7; }
.band-hero .lead { color: var(--ivory); }
.sec-head > p:not(.lead) { line-height: 1.75; }
.tpl-T01 .band-hero .lead { color: var(--ivory); }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
section.band > .inner > .cta-row { margin-top: 0; }
.lead-inclusion {
display: flex;
flex-direction: column;
gap: 10px;
width: 100%;
padding: clamp(20px, 2.8vw, 28px);
border: 1px solid color-mix(in srgb, var(--gold) 40%, transparent);
border-radius: 12px;
background: color-mix(in srgb, var(--gold) 7%, transparent);
}
.lead-inclusion .eyebrow { color: var(--gold-light); letter-spacing: 0.16em; }
.lead-inclusion p { font-size: var(--fs-lead); font-weight: 500; line-height: 1.65; }
.faqitem { display: flex; flex-direction: column; gap: 10px; padding-top: clamp(18px, 2.4vw, 24px); }
.faq-q { display: block; font-family: var(--f-head); font-size: var(--fs-h3); font-weight: 600; line-height: 1.3; }
.faq-a { display: block; font-size: var(--fs-small); line-height: 1.7; }
.faqgrid { gap: clamp(18px, 2.6vw, 30px); }
.suitgrid { gap: clamp(14px, 2vw, 22px); }
.suitcard {
display: flex; flex-direction: column; gap: 8px;
padding: clamp(18px, 2.4vw, 24px); border-radius: 12px;
}
.suitlabel { font-family: var(--f-head); font-weight: 600; font-size: var(--fs-body); line-height: 1.3; }
.suitcopy { font-size: var(--fs-small); line-height: 1.6; }
.svcgrid {
gap: 1px;
background: var(--line-light);
border: 1px solid var(--line-light);
border-radius: 12px;
overflow: hidden;
}
.svccard {
display: flex; flex-direction: column; gap: 10px;
width: 100%;
min-height: 210px;
padding: clamp(20px, 2.6vw, 26px);
background: var(--paper);
}
.svccard .numeral { color: var(--rose-deep); }
.svctitle { font-family: var(--f-head); font-weight: 600; font-size: var(--fs-h3); line-height: 1.25; color: var(--ink); }
.svccopy { font-size: var(--fs-small); line-height: 1.6; color: color-mix(in srgb, var(--ink) 72%, transparent); }
.svcbook {
margin-top: auto;
display: inline-flex;
align-items: center;
gap: 7px;
font-size: max(0.75rem, 12px);
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--rose-deep);
}
.crossref {
margin-top: 14px;
padding-left: 14px;
border-left: 2px solid var(--gold);
font-size: var(--fs-small);
line-height: 1.55;
color: var(--ivory);
}
.crossref-after { display: block; margin-top: 4px; }
.crossref a {
color: var(--rose-light);
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 28px;
white-space: nowrap;
font-weight: 700;
}
.indcallout {
padding: clamp(18px, 2.4vw, 26px) clamp(18px, 2.6vw, 28px);
background: var(--bg-dark-2);
border: 1px solid var(--line-dark);
border-left: 3px solid var(--gold);
border-radius: 4px;
}
.indcallout p {
margin: 0;
max-width: 74ch;
font-size: var(--fs-body);
line-height: 1.75;
color: color-mix(in srgb, var(--ivory) 82%, transparent);
text-wrap: pretty;
}
.indcallout a {
color: var(--rose-light);
font-weight: 600;
text-decoration: underline;
text-underline-offset: 2px;
}
.indcallout a:hover, .indcallout a:focus-visible { color: var(--gold-light); }
.svcroutes {
margin-top: auto;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 2px;
}
.svcroute {
display: inline-flex;
align-items: center;
gap: 7px;
min-height: 28px;
font-size: max(0.75rem, 12px);
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--rose-deep);
}
.svcbody { grid-column: 2; }
.svcnum { grid-row: span 2; }
.homeroute { margin-top: 4px; color: var(--rose-light); }
.homeroute:hover, .homeroute:focus-visible { color: var(--gold-light); }
.indgrid { gap: clamp(14px, 2vw, 20px); }
.indcard {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
width: 100%;
padding: clamp(18px, 2.4vw, 24px);
background: color-mix(in srgb, var(--ivory) 5%, transparent);
border: 1px solid var(--line-dark);
border-radius: 999px;
color: var(--ivory);
}
.indid { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.indlabel { font-family: var(--f-head); font-weight: 600; font-size: var(--fs-body); line-height: 1.3; color: var(--ivory); }
.indcopy { font-size: max(0.75rem, 12px); line-height: 1.5; color: color-mix(in srgb, var(--ivory) 68%, transparent); }
.indcard svg { flex: none; color: var(--gold-light); }
.probcard { display: flex; flex-direction: column; gap: 10px; }
.numeral { font-size: var(--fs-numeral); line-height: 0.9; letter-spacing: -0.02em; }
.big { font-size: var(--fs-h3); font-weight: 600; line-height: 1.3; }
.client { font-size: var(--fs-h3); line-height: 1.2; letter-spacing: -0.02em; }
.clientline { display: inline-flex; align-items: center; gap: 10px; line-height: 1.7; }
.sector { font-size: var(--fs-small); line-height: 1.5; }
.reviewlink {
display: inline-flex; align-items: center; gap: 7px; margin-top: 14px;
font-size: var(--fs-small); font-weight: 600; line-height: 1.65;
}
.statrow {
gap: 0;
margin-top: clamp(22px, 3.2vw, 34px);
border-top: 1px solid var(--line-dark);
}
.statrow > div {
display: flex;
flex-direction: column;
gap: 5px;
padding: clamp(18px, 2.4vw, 24px) clamp(14px, 2vw, 20px) clamp(18px, 2.4vw, 24px) 0;
border-right: 1px solid var(--line-dark);
}
.statrow > div:last-child {
padding-right: 0;
padding-left: clamp(14px, 2vw, 20px);
border-right: 0;
}
.statrow .stat { font-size: var(--fs-stat); line-height: 1; }
.statrow .eyebrow {
color: color-mix(in srgb, var(--ivory) 72%, transparent);
letter-spacing: 0.14em;
}
.quotegrid { gap: clamp(18px, 2.6vw, 30px); }
.quotecard {
display: flex;
flex-direction: column;
gap: 14px;
width: 100%;
padding: clamp(20px, 2.8vw, 28px);
background: var(--paper);
border: 1px solid var(--line-light);
border-radius: 12px;
}
.quotehead { display: flex; align-items: center; gap: 14px; width: 100%; }
.quoteid { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.logoinitials {
font-size: var(--fs-h3);
line-height: 1;
letter-spacing: 0.06em;
color: var(--rose-deep);
}
.quotecard .client { color: var(--rose-deep); }
.quotecard p { font-size: var(--fs-body); line-height: 1.7; color: color-mix(in srgb, var(--ink) 80%, transparent); }
.quotecard p strong { font-weight: 700; color: var(--ink); }
:root {
--ink-muted: color-mix(in srgb, var(--ink) 68%, transparent);
--ivory-muted: color-mix(in srgb, var(--ivory) 60%, transparent);
}
.quotecard .sector { color: var(--ink-muted); }
.permission { font-size: max(0.75rem, 12px); line-height: 1.6; color: var(--ink-muted); }
.quotefoot { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.quoteservice {
font-size: max(0.75rem, 12px);
line-height: 1.6;
font-weight: 700;
color: var(--rose-deep);
border-bottom: 1px solid color-mix(in srgb, var(--rose-deep) 40%, transparent);
}
.postvideo {
position: relative;
display: block;
width: 100%;
aspect-ratio: 16 / 9;
margin: clamp(20px, 3vw, 30px) 0;
overflow: hidden;
border-radius: 12px;
background: color-mix(in srgb, var(--ink) 6%, transparent);
}
.postvideo iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.videolink { margin: 0 0 clamp(20px, 3vw, 30px); font-size: var(--fs-small); }
.videolink a { color: var(--gold-deep); text-underline-offset: 3px; }
.videogrid { gap: clamp(16px, 2.2vw, 24px); }
.videoslot { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.videoframe {
position: relative;
display: block;
width: 100%;
aspect-ratio: 16 / 10;
overflow: hidden;
border-radius: 12px;
background: color-mix(in srgb, var(--ivory) 8%, transparent);
border: 1px dashed color-mix(in srgb, var(--gold) 45%, transparent);
}
.playbtn { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.playcircle {
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border-radius: 999px;
background: var(--foil-gold);
color: var(--ink);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
.videoname { font-family: var(--f-head); font-weight: 600; font-size: var(--fs-body); line-height: 1.3; color: var(--ivory); }
.videonote { font-size: var(--fs-small); line-height: 1.6; color: color-mix(in srgb, var(--ivory) 70%, transparent); }
.casegrid { gap: clamp(16px, 2.2vw, 24px); }
.casecard {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
width: 100%;
padding: clamp(20px, 2.6vw, 26px);
background: var(--paper);
border: 1px solid var(--line-light);
border-radius: 12px;
color: var(--ink);
}
.caseid { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.caseid .eyebrow { color: var(--rose-deep); letter-spacing: 0.16em; }
.casetitle { font-family: var(--f-head); font-weight: 600; font-size: var(--fs-h3); line-height: 1.3; color: var(--ink); }
.casecard svg { flex: none; color: var(--rose-deep); }
.casecta { align-self: flex-start; }
.ticklist { font-weight: 500; line-height: 1.7; }
.g2.ticklist { gap: clamp(18px, 2.6vw, 30px); }
.tickitem {
display: flex;
align-items: flex-start;
gap: 12px;
width: 100%;
padding: 13px 0;
border-bottom: 1px solid;
}
.tickmark {
flex: none;
display: flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
margin-top: 2px;
border-radius: 999px;
background: var(--gold);
color: var(--ink);
}
.ticktext { font-size: var(--fs-body); font-weight: 500; line-height: 1.6; }
.hp-field { display: none !important; }
.teamlink { display: block; width: 100%; line-height: 0; }
.teamlink-round { max-width: 190px; margin-inline: auto; }
.teamlink:focus-visible { border-radius: 999px; outline-offset: 4px; }
.teamcap {
display: flex; flex-direction: column; gap: 3px;
align-items: center; text-align: center;
}
.teamcap .eyebrow { line-height: 1.5; letter-spacing: 0.14em; color: var(--ivory-muted); }
.teamcap a.serif {
font-size: var(--fs-h3);
line-height: 1.2;
color: var(--gold-light);
background: none;
-webkit-background-clip: border-box;
background-clip: border-box;
}
.teamcap .teamcred { color: var(--ivory-muted); }
.toolgrid { gap: clamp(14px, 2vw, 22px); }
.toolcard {
display: flex;
flex-direction: column;
gap: 8px;
width: 100%;
padding: clamp(18px, 2.4vw, 24px);
border: 1px solid;
border-radius: 12px;
}
.toolname { font-family: var(--f-head); font-weight: 600; font-size: var(--fs-body); line-height: 1.3; }
.toolcopy { font-size: var(--fs-small); line-height: 1.6; }
.toolcta { align-self: flex-start; }
.proofcard {
display: flex;
flex-direction: column;
gap: 16px;
width: 100%;
padding: clamp(22px, 3vw, 32px);
border: 1px solid;
border-radius: 12px;
}
.proofquote { font-size: var(--fs-lead); font-weight: 500; line-height: 1.65; }
.proofbody { font-size: var(--fs-body); line-height: 1.7; }
.proofattrib { display: flex; align-items: baseline; flex-wrap: wrap; gap: 12px; }
.proofname { font-size: var(--fs-h3); line-height: 1.2; }
.proofsector { letter-spacing: 0.14em; }
.proofpermission { font-size: max(0.75rem, 12px); line-height: 1.6; }
.confirm-slot {
border: 1px dashed color-mix(in srgb, var(--gold) 60%, transparent);
border-radius: 12px;
background: color-mix(in srgb, var(--gold) 7%, transparent);
}
.proof-empty {
display: flex;
flex-direction: column;
gap: 10px;
width: 100%;
padding: clamp(22px, 3vw, 32px);
}
.proof-empty .eyebrow { letter-spacing: 0.16em; }
.proof-empty p { font-size: var(--fs-body); line-height: 1.7; }
.proofcta { align-self: flex-start; }
.tpl-T10 section.band-other { padding: clamp(34px, 4.8vw, 58px) 0; }
.factstrip {
gap: 1px;
background: var(--line-dark);
margin-top: clamp(22px, 3.2vw, 34px);
}
.factstrip > div {
display: flex;
flex-direction: column;
gap: 5px;
width: 100%;
padding: clamp(18px, 2.4vw, 24px);
background: color-mix(in srgb, var(--ink) 55%, transparent);
font-size: var(--fs-body);
color: var(--ivory);
}
.factstrip > div > span:not(.eyebrow) { line-height: 1.5; }
.factstrip .eyebrow { color: var(--gold); letter-spacing: 0.16em; }
.band-hero .factstrip .eyebrow { color: var(--gold-light); }
.permission-note {
display: block;
margin-top: 12px;
font-size: max(0.75rem, 12px);
color: var(--ivory-muted);
}
.casepara { font-size: var(--fs-body); line-height: 1.8; color: color-mix(in srgb, var(--ink) 84%, transparent); }
.challengegrid { gap: 1px; background: var(--line-dark); }
.challengecard {
display: flex;
flex-direction: column;
gap: 10px;
width: 100%;
min-height: 180px;
padding: clamp(20px, 2.6vw, 26px);
background: color-mix(in srgb, var(--ink) 55%, transparent);
}
.challengecard .eyebrow { color: var(--gold); letter-spacing: 0.16em; }
.challengetitle { font-family: var(--f-head); font-weight: 600; font-size: var(--fs-h3); line-height: 1.28; color: var(--rose-light); }
.challengecopy { font-size: var(--fs-small); line-height: 1.6; color: color-mix(in srgb, var(--ivory) 74%, transparent); }
.didlist { display: flex; flex-direction: column; width: 100%; }
.diditem {
display: flex;
align-items: flex-start;
gap: 12px;
width: 100%;
padding: 12px 0;
border-bottom: 1px solid var(--line-light);
}
.didtick {
flex: none;
display: flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
margin-top: 2px;
border-radius: 999px;
background: var(--rose-deep);
color: var(--paper);
}
.didtext { font-size: var(--fs-body); font-weight: 500; line-height: 1.65; color: var(--ink); }
.outcomenote { font-size: var(--fs-small); line-height: 1.7; color: color-mix(in srgb, var(--ivory) 66%, transparent); width: 100%; }
.outcomegrid { gap: clamp(14px, 2vw, 20px); }
.outcomecard {
display: flex;
flex-direction: column;
gap: 8px;
width: 100%;
padding: clamp(18px, 2.4vw, 24px);
background: color-mix(in srgb, var(--ivory) 5%, transparent);
border: 1px solid var(--line-dark);
border-radius: 12px;
}
.outcomefigure { font-size: var(--fs-h3); line-height: 1.2; color: var(--gold-light); }
.outcomecopy { font-size: var(--fs-small); line-height: 1.6; color: color-mix(in srgb, var(--ivory) 78%, transparent); }
.casequote {
display: flex;
flex-direction: column;
gap: 12px;
width: 100%;
margin: 0;
padding: clamp(22px, 3vw, 30px) 0;
border-top: 1px solid var(--line-dark);
border-bottom: 1px solid var(--line-dark);
}
.casequote p { font-size: var(--fs-h2); line-height: 1.35; color: var(--ivory); }
.casequote .eyebrow { color: var(--gold); letter-spacing: 0.16em; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(20px, 2.8vw, 28px); }
.contactform { display: flex; flex-direction: column; gap: clamp(14px, 2vw, 18px); width: 100%; }
.fieldrow { gap: 14px; width: 100%; }
.contactform .pill { align-self: flex-start; }
.formnote { font-size: max(0.75rem, 12px); line-height: 1.6; color: color-mix(in srgb, var(--ink) 62%, transparent); }
.contactdetails { display: flex; flex-direction: column; gap: clamp(14px, 2vw, 20px); width: 100%; }
.contactcard {
display: flex;
flex-direction: column;
gap: 10px;
width: 100%;
padding: clamp(20px, 2.6vw, 26px);
background: var(--paper);
border: 1px solid var(--line-light);
border-radius: 12px;
}
.contactcard .eyebrow { color: var(--rose-deep); letter-spacing: 0.16em; }
.contactcard .eyebrow-spaced { padding-top: 6px; }
.contactcard p { font-size: var(--fs-body); line-height: 1.75; color: color-mix(in srgb, var(--ink) 84%, transparent); }
.contactphone { font-family: var(--f-head); font-weight: 600; font-size: var(--fs-h3); line-height: 1.3; color: var(--ink); }
.contactemail { font-size: var(--fs-small); line-height: 1.6; color: var(--rose-deep); word-break: break-word; }
.centred { align-items: center; justify-content: center; text-align: center; }
.destgrid { gap: clamp(14px, 2vw, 20px); }
.destcard {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
width: 100%;
padding: clamp(18px, 2.4vw, 24px);
background: var(--paper);
border: 1px solid var(--line-light);
border-radius: 12px;
color: var(--ink);
}
.destid { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.destlabel { font-family: var(--f-head); font-weight: 600; font-size: var(--fs-body); line-height: 1.3; color: var(--ink); }
.destnote { font-size: max(0.75rem, 12px); line-height: 1.5; color: color-mix(in srgb, var(--ink) 62%, transparent); }
.destcard svg { flex: none; color: var(--rose-deep); }
.stuckcard {
display: flex;
flex-direction: column;
gap: 10px;
width: 100%;
padding: clamp(18px, 2.4vw, 24px);
background: var(--paper);
border: 1px solid var(--line-light);
border-radius: 12px;
}
.stuckcard .eyebrow { color: var(--rose-deep); letter-spacing: 0.16em; }
.stuckcard p { font-size: var(--fs-body); line-height: 1.7; color: color-mix(in srgb, var(--ink) 82%, transparent); }
.stuckcard .pill { align-self: flex-start; }
.tpl-T08 section.band:not(.band-hero):not(.band-guide) > .inner {
display: flex;
flex-direction: column;
gap: clamp(20px, 3vw, 30px);
}
.filterbar {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 14px;
width: 100%;
}
.tagrow { display: flex; flex-wrap: wrap; gap: 8px; }
.resultcount { font-size: var(--fs-small); color: color-mix(in srgb, var(--ink) 66%, transparent); }
.postgrid { gap: clamp(20px, 2.8vw, 30px); }
.postcard { display: flex; flex-direction: column; gap: 12px; width: 100%; }
.postcard[hidden] { display: none; }
.postgrid-empty {
margin-top: clamp(20px, 2.8vw, 30px);
font-size: var(--fs-small);
color: color-mix(in srgb, var(--ink) 70%, transparent);
}
.postcard .zoomwrap { width: 100%; }
.postcard img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; object-position: 50% 40%; }
.postcard .eyebrow { color: var(--rose-deep); letter-spacing: 0.18em; }
.band-dark .postcard .eyebrow, .band-hero .postcard .eyebrow {
color: var(--rose-light);
}
.posttitle { font-family: var(--f-head); font-weight: 600; font-size: var(--fs-h3); line-height: 1.3; color: var(--ink); }
.band-dark .posttitle, .band-hero .posttitle { color: var(--ivory); }
.band-dark .postexcerpt, .band-hero .postexcerpt {
color: color-mix(in srgb, var(--ivory) 78%, transparent);
}
.band-dark .postmeta, .band-hero .postmeta {
color: color-mix(in srgb, var(--ivory) 72%, transparent);
}
.postexcerpt { font-size: var(--fs-small); line-height: 1.65; color: color-mix(in srgb, var(--ink) 70%, transparent); }
.postmeta {
font-size: max(0.75rem, 12px);
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-muted);
}
.storycol { display: flex; flex-direction: column; gap: clamp(18px, 2.6vw, 24px); }
.storycol p.storylead { font-size: var(--fs-lead); font-weight: 500; line-height: 1.7; color: var(--ink); }
.storycol p { font-size: var(--fs-body); line-height: 1.8; color: color-mix(in srgb, var(--ink) 84%, transparent); }
.commitcard {
display: flex;
flex-direction: column;
gap: 10px;
padding: clamp(18px, 2.4vw, 24px);
background: var(--paper);
border: 1px solid var(--line-light);
border-radius: 12px;
}
.commitcard .eyebrow { color: var(--rose-deep); letter-spacing: 0.16em; }
.commititem {
display: flex;
align-items: flex-start;
gap: 12px;
width: 100%;
padding: 9px 0;
border-bottom: 1px solid var(--line-light);
}
.commit-text { font-size: var(--fs-small); font-weight: 500; line-height: 1.6; color: var(--ink); }
.credgrid { gap: clamp(18px, 2.6vw, 30px); }
.credcard {
display: flex;
flex-direction: column;
gap: 10px;
width: 100%;
padding: clamp(20px, 2.6vw, 26px);
background: var(--paper);
border: 1px solid var(--line-light);
border-radius: 12px;
}
.credcard .eyebrow { color: var(--rose-deep); letter-spacing: 0.16em; }
.credcard p { font-size: var(--fs-body); line-height: 1.75; color: color-mix(in srgb, var(--ink) 82%, transparent); }
.legalpage .legal,
.legalpage .legal p,
.legalpage .legal li,
.legalpage .legal h1,
.legalpage .legal h2,
.legalpage .legal a,
.legalpage .legal span { font-family: Arial, Helvetica, sans-serif; }
.legalpage > .inner {
display: flex;
flex-direction: column;
gap: clamp(20px, 2.8vw, 28px);
}
.legal { width: 100%; max-width: none; }
.legal p, .legal li { font-size: 1rem; line-height: 1.9; color: color-mix(in srgb, var(--ink) 82%, transparent); }
.legal ul { margin: 0; padding-left: 1.2em; }
.legal-head { display: flex; flex-direction: column; gap: 12px; }
.legal-head h1 {
font-size: clamp(1.75rem, 3.4vw, 2.25rem);
font-weight: 700;
line-height: 1.2;
letter-spacing: -0.01em;
color: var(--ink);
}
.legal p.lastupdated { font-size: var(--fs-small); font-weight: 700; line-height: 1.9; color: var(--rose-deep); }
p.legalintro { color: color-mix(in srgb, var(--ink) 80%, transparent); }
.toc, .legalcontact {
padding: clamp(16px, 2.2vw, 20px);
background: var(--paper);
border: 1px solid var(--line-light);
border-radius: 8px;
}
.legal-label {
font-size: 0.8125rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink);
}
.toc { display: flex; flex-direction: column; gap: 0; }
.toc .legal-label { padding-bottom: 8px; }
.toc a {
display: block;
padding: 7px 0;
font-size: var(--fs-small);
line-height: 1.5;
color: var(--rose-deep);
border-bottom: 1px solid var(--line-light);
}
.legalcontact { display: flex; flex-direction: column; gap: 8px; }
.legalcontact a { color: var(--rose-deep); }
.legal-section { display: flex; flex-direction: column; gap: 10px; }
@media (max-width: 899px) {
.shell .legalpage > .inner > div,
.shell .legalpage > .inner > nav {
align-items: stretch;
justify-items: stretch;
}
.shell .legalpage .legal h1,
.shell .legalpage .legal h2,
.shell .legalpage .legal p,
.shell .legalpage .legal li,
.shell .legalpage .legal span,
.shell .legalpage .legal a {
text-align: left;
}
.shell .legalpage .legal p,
.shell .legalpage .legal .measure,
.shell .legalpage .legal blockquote {
margin-inline: 0;
}
}
.legalpage .legal-section h2 {
margin: clamp(10px, 1.6vw, 16px) 0 0;
font-size: 1.1875rem;
font-weight: 700;
line-height: 1.35;
letter-spacing: 0;
color: var(--ink);
}
.tagchip {
text-align: center; font-size: var(--fs-small); font-weight: 700;
letter-spacing: 0.06em;
}
.field { display: flex; flex-direction: column; gap: 6px; }
.field > label {
font-size: var(--fs-xsmall); font-weight: 700; line-height: 1.65;
letter-spacing: 0.1em; text-transform: uppercase; color: var(--rose-deep);
}
.field input, .field select, .field textarea {
width: 100%;
padding: 14px 16px;
font-family: var(--f-ui);
font-size: var(--fs-small);
color: var(--ink);
background: var(--paper);
border: 1px solid color-mix(in srgb, var(--ink) 22%, transparent);
border-radius: 8px;
outline: 0;
transition: border-color 0.2s, box-shadow 0.2s;
}
.field textarea { resize: vertical; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
border-color: var(--rose-deep);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--rose-deep) 18%, transparent);
}
.field ::placeholder { color: color-mix(in srgb, var(--ink) 45%, transparent); }
.lastupdated { font-size: var(--fs-small); font-weight: 700; line-height: 1.9; }
.guide-copy p { color: var(--ivory); }
.guide-copy {
display: flex;
flex-direction: column;
gap: clamp(14px, 2vw, 20px);
font-size: var(--fs-lead);
font-weight: 500;
line-height: 1.65;
}
.guide-title { margin: 0; font-size: var(--fs-h2); line-height: 1.1; color: var(--gold); }
.guide-form { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; width: 100%; }
.guide-note {
flex: 0 0 100%;
margin: 0;
font-size: var(--fs-small);
line-height: 1.5;
color: color-mix(in srgb, var(--ivory) 62%, transparent);
}
.guide-form input[type="email"] {
flex: 1 1 220px;
min-width: 0;
max-width: 320px;
padding: 15px 20px;
font-family: var(--f-ui, var(--font-body));
font-size: var(--fs-small);
color: var(--ivory);
background: color-mix(in srgb, var(--ivory) 10%, transparent);
border: 1px solid color-mix(in srgb, var(--ivory) 28%, transparent);
border-radius: 999px;
outline: 0;
}
.guide-form input[type="email"]::placeholder { color: color-mix(in srgb, var(--ivory) 62%, transparent); }
.guide-form input[type="email"]:focus-visible { border-color: var(--ivory); }
.pill-ink { background: var(--ink); color: var(--ivory); }
.pill-ink:hover, .pill-ink:focus-visible { background: var(--guide-ink); color: var(--ivory); }
.guide-book { display: flex; justify-content: center; margin-left: clamp(-300px, -19vw, -110px); }
.guide-book img {
display: block;
margin: clamp(-18px, -1.6vw, -8px) 0;
width: 100%;
max-width: var(--book-w, 640px);
height: auto;
transform: rotate(-6deg);
filter: drop-shadow(0 22px 44px rgba(0, 0, 0, 0.42));
}
.foot-col { display: flex; flex-direction: column; gap: 14px;
font-size: var(--fs-small); line-height: 1.65; }
.band-footer > .inner { width: min(100% - 2 * var(--gutter), 1400px); }
@media (min-width: 861px) {
.band-footer .g4 { grid-template-columns: 2fr 1fr 1fr 1.4fr; }
}
.foot-brand {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
width: min(100%, 330px);
text-align: center;
}
.foot-brand img { width: min(100%, 240px); height: auto; }
.foot-brand .foot-badges {
width: min(100%, 300px);
height: auto;
}
.foot-cred {
font-size: max(0.75rem, 12px);
line-height: 1.6;
color: var(--ivory-muted);
}
.foot-col-links { gap: 10px; }
.foot-col p { margin: 0; line-height: 1.75; }
.foot-col .eyebrow { letter-spacing: 0.18em; color: var(--gold); }
.foot-col a { color: color-mix(in srgb, var(--ivory) 70%, transparent); }
.foot-col a:hover, .foot-col a:focus-visible { color: var(--gold-light); }
.foot-social { display: flex; gap: 12px; }
.foot-social a {
min-width: 36px;
min-height: 36px;
padding: 2px;
display: flex;
align-items: center;
justify-content: center;
color: var(--paper);
}
.foot-social a:hover, .foot-social a:focus-visible {
color: var(--gold-light);
}
.foot-social a::before {
font-family: "Font Awesome 5 Brands Regular";
font-size: 34px;
font-style: normal;
font-weight: 400;
line-height: 1;
}
.foot-social .fs-linkedin::before { content: "\f08c"; }
.foot-social .fs-facebook::before { content: "\f09a"; }
.foot-social .fs-instagram::before { content: "\f16d"; }
.foot-legal > span:first-child { margin-right: auto; }
.foot-legal {
display: flex;
flex-wrap: wrap;
gap: 16px;
border-top: 1px solid var(--line-dark);
padding-top: 18px;
font-size: clamp(0.75rem, 1.05vw, 0.8125rem);
line-height: 1.65;
color: var(--ivory-muted);
}
.foot-legal a { color: var(--ivory-muted); }
.foot-legal a:hover, .foot-legal a:focus-visible { color: var(--gold-light); }
.foot-muted { font-size: var(--fs-small); line-height: 1.75; }
.tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
.bodytable { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.bodytable th {
text-align: left;
font-weight: 700;
padding: 11px 12px 11px 0;
border-bottom: 1px solid color-mix(in srgb, var(--ink) 30%, transparent);
color: var(--ink);
}
.bodytable td {
padding: 11px 12px 11px 0;
border-bottom: 1px solid var(--line-light);
color: color-mix(in srgb, var(--ink) 80%, transparent);
vertical-align: top;
}
.bodytable th, .bodytable td { min-width: 8.5ch; }
@media (max-width: 560px) { .bodytable { font-size: max(0.8125rem, 13px); } }
@media (max-width: 899px) {
.foot-legal { justify-content: center; }
.foot-legal > span:first-child { margin-right: 0; }
}
.steplist { display: flex; flex-direction: column; width: 100%; }
.stepitem {
display: grid;
grid-template-columns: 64px minmax(0, 1fr);
gap: clamp(14px, 2vw, 22px);
align-items: start;
padding: clamp(16px, 2.2vw, 22px) 0;
border-top: 1px solid var(--line-light);
width: 100%;
}
.stepnum { font-size: var(--fs-numeral); line-height: 0.9; }
.stepbody { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.stepbody > span:not(.steptitle) { line-height: 1.7; }
.steptitle {
font-family: var(--f-head);
font-weight: 600;
font-size: var(--fs-h3);
line-height: 1.25;
}
@media (max-width: 899px) {
.stepitem { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
.stepbody { align-items: center; }
}
@media (min-width: 900px) {
.stepitem:has(> .eyebrow:first-child) { grid-template-columns: minmax(0, 1fr); row-gap: 8px; }
}
section.band { padding: clamp(38px, 5.4vw, 68px) 0; }
main :is(h2, h3, h4)[id] { scroll-margin-top: 92px; }
section.band[id] { scroll-margin-top: 92px; }
.coursecard[id] { scroll-margin-top: 130px; }
@media (min-width: 1024px) {
main :is(h2, h3, h4)[id] { scroll-margin-top: 106px; }
section.band[id] { scroll-margin-top: 106px; }
.coursecard[id] { scroll-margin-top: 144px; }
}
header.band { padding: 0; }
section.band-hero { padding: clamp(34px, 5vw, 64px) 0 clamp(30px, 4.4vw, 54px); }
section.band-guide {
padding: clamp(18px, 2vw, 28px) 0 clamp(20px, 2.2vw, 32px);
position: relative;
overflow: clip;
}
.band-guide + .band-footer { margin-top: -1px; }
.guide-inner { max-width: 1240px; position: relative; z-index: 2; }
.guide-inner .split-a {
grid-template-columns: minmax(0, 0.52fr) minmax(0, 1.48fr);
gap: clamp(16px, 1.8vw, 26px);
align-items: center;
}
.guide-chamfer {
position: absolute;
top: 0;
bottom: 0;
width: calc((100% - 1240px) / 2 + 96px);
pointer-events: none;
}
.guide-chamfer-l { left: 0; background: var(--paper); clip-path: polygon(0 0, 100% 0, 0 100%); }
.guide-after-light .guide-chamfer-l { background: var(--paper); }
.guide-after-light.guide-after-flat .guide-chamfer-l { background: var(--ivory); }
.guide-after-dark .guide-chamfer-l { background: var(--ink); }
.guide-after-dark-2 .guide-chamfer-l { background: var(--bg-dark-2); }
.guide-after-hero .guide-chamfer-l { background: var(--ink); }
.guide-chamfer-r { right: 0; background: var(--bg-footer); clip-path: polygon(100% 0, 100% 100%, 0 100%); }
@media (max-width: 1000px) {
.guide-inner .split-a { grid-template-columns: minmax(0, 1fr); }
.guide-book { margin-left: 0; order: -1; }
.guide-inner { --book-w: 340px; }
}
@media (max-width: 700px) {
.guide-form { justify-content: center; }
.guide-form input[type="email"] { flex: 1 1 100%; max-width: none; }
}
.tpl-T01 section.band { padding: clamp(36px, 5vw, 64px) 0; }
.tpl-T01 section.band-hero { padding: 0; }
.tpl-T01 section.band-hero > .inner:first-child { padding: clamp(20px, 2.6vw, 36px) 0 0; }
.tpl-T01 .statbar { margin-top: 0; }
@media (min-width: 900px) {
.tpl-T01 .hero-panel-col {
align-self: stretch;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
}
.tpl-T05 section.band-pkg { padding: clamp(30px, 4.4vw, 54px) 0; }
.tpl-T08 section.band-hero { padding: clamp(34px, 5vw, 64px) 0 clamp(28px, 4vw, 46px); }
.tpl-T08 section.band:not(.band-hero):not(.band-guide) {
padding: clamp(30px, 4.4vw, 54px) 0 clamp(38px, 5.4vw, 68px);
}
.tpl-T15 section.band { padding: clamp(34px, 4.6vw, 58px) 0 clamp(40px, 5.6vw, 72px); }
.tpl-T17 section.band-hero { padding: clamp(44px, 6.4vw, 84px) 0 clamp(38px, 5.2vw, 64px); }
.shell:not(.tpl-T01) section.band:not(.band-hero):not(.band-guide) > [class="inner"]:has(> .sec-head) {
display: flex;
flex-direction: column;
gap: var(--band-gap, clamp(20px, 3vw, 30px));
}
.tpl-T05 section.band:nth-of-type(2),
.tpl-T05 section.band:nth-of-type(3),
.tpl-T05 section.band:nth-of-type(4),
.tpl-T06 section.band:nth-of-type(2),
.tpl-T06 section.band:nth-of-type(3) { --band-gap: clamp(22px, 3.2vw, 34px); }
.tpl-T05 section.band-pkg { --band-gap: clamp(16px, 2.4vw, 24px); }
.tpl-T05 section.band-pkg > .inner {
display: flex;
flex-direction: column;
gap: var(--band-gap);
}
.tpl-T10 section.band:nth-of-type(2),
.tpl-T10 section.band:nth-of-type(4) { --band-gap: clamp(18px, 2.6vw, 24px); }
.tpl-T10 section.band-other { --band-gap: clamp(18px, 2.6vw, 26px); }
.tpl-T12 section.band:nth-of-type(2) { --band-gap: clamp(18px, 2.6vw, 24px); }
.tpl-T12 section.band:nth-of-type(3) { --band-gap: clamp(24px, 3.4vw, 38px); }
h1, .h1 { font-size: var(--fs-display); line-height: 1.04; }
h2 { font-size: var(--fs-h2); line-height: 1.1; }
h3 { font-family: var(--f-head); font-size: var(--fs-h3); font-weight: 600; line-height: 1.25; }
.crumbs { margin-bottom: clamp(14px, 2vw, 22px); }
.crumbs > span { font-size: var(--fs-small); color: var(--ivory-muted); }
.band-light .crumbs > span { color: color-mix(in srgb, var(--ink) 55%, transparent); }
.crumbs a { color: color-mix(in srgb, var(--ivory) 70%, transparent); text-decoration: none; }
.crumbs a:hover, .crumbs a:focus-visible { color: var(--gold-light); }
.crumb-sep { padding: 0 8px; color: var(--ivory-muted); }
.crumb-current { color: var(--gold-light); }
.band-light .crumbs a, .band-light .crumb-sep { color: color-mix(in srgb, var(--ink) 70%, transparent); }
.band-light .crumb-current { color: var(--gold-deep); }
.band-light a:not([class]) { color: var(--rose-deep); }
.band-guide a:not([class]) { color: var(--rose-light); }
.svccard, .suitcard, .postcard, .pkgtile, .booklink:not(.pill) { color: inherit; }
.band-light .svccard, .band-light .suitcard,
.band-light .postcard, .band-light .pkgtile { color: var(--ink); }
.portrait {
aspect-ratio: 1 / 1;
width: 100%;
height: auto;
border-radius: 999px;
object-fit: cover;
object-position: 50% 12%;
border: 1px solid color-mix(in srgb, var(--gold-deep) 40%, transparent);
}
.portrait-wrap { display: block; width: 100%; }
.bio-intro { align-items: start; }
.bio-head { margin-bottom: clamp(14px, 1.8vw, 24px); }
.bio-figure {
margin: 0;
justify-self: end;
width: 100%;
max-width: 420px;
}
.bio-figure img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 2 / 3;
object-fit: cover;
object-position: 50% 30%;
border-radius: 14px;
border: 1px solid color-mix(in srgb, var(--gold-deep) 40%, transparent);
}
.bio-portrait-round { justify-self: end; max-width: 400px; }
@media (max-width: 900px) {
.bio-figure, .bio-portrait-round { justify-self: center; }
}
.portrait-empty {
display: flex;
align-items: center;
justify-content: center;
background: color-mix(in srgb, var(--gold-deep) 12%, transparent);
font-family: var(--f-display);
font-size: var(--fs-h2);
}
.teamgrid :is(.teamlink:has(.portrait-wrap), .portrait-wrap) {
max-width: 150px;
margin-inline: auto;
}
.teamgrid > div { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.probcard {
border: 1px solid;
border-radius: 12px;
padding: clamp(20px, 2.6vw, 26px);
gap: 10px;
}
.probtitle { font-size: var(--fs-h3); line-height: 1.2; }
.probcopy { font-size: var(--fs-small); line-height: 1.65; }
.suitcard, .pkgtile { border: 1px solid; }
.pkgtile {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
width: 100%;
padding: clamp(16px, 2vw, 22px);
border-radius: 12px;
}
.pkgtile-id { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pkgtile-label { font-family: var(--f-head); font-weight: 600; font-size: var(--fs-body); line-height: 1.3; }
.pkgtile-meta {
font-size: max(0.75rem, 12px);
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.pkgtile svg { flex: none; }
.pkggrid { gap: clamp(12px, 1.8vw, 18px); }
.pkg-intro { padding-bottom: clamp(8px, 1.4vw, 16px); }
.pkg-head { align-items: end; }
.pkg-name { font-size: var(--fs-h2); line-height: 1.1; }
.pkg-head .eyebrow { letter-spacing: 0.18em; }
.shell .site-logo { height: clamp(38px, 4.2vw, 60px); width: auto; display: block; }
@media (max-width: 1023px) {
.shell .site-logo { height: 46px; }
}
.nav-drawer-body { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; overflow-y: auto; }
.meta-row {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1px;
background: var(--line-dark);
margin-top: clamp(22px, 3.4vw, 36px);
}
.meta-row > div {
display: flex;
flex-direction: column;
gap: 6px;
width: 100%;
padding: clamp(18px, 2.4vw, 24px);
background: color-mix(in srgb, var(--ink) 55%, transparent);
font-size: var(--fs-body);
line-height: 1.5;
color: var(--ivory);
}
.meta-row .eyebrow { color: var(--gold); letter-spacing: 0.16em; }
.prep-note {
margin-top: clamp(16px, 2.2vw, 22px);
padding: clamp(16px, 2.2vw, 22px) clamp(18px, 2.4vw, 24px);
border-left: 3px solid var(--gold-deep);
border-radius: 0 12px 12px 0;
background: color-mix(in srgb, var(--gold) 9%, transparent);
font-size: var(--fs-small);
line-height: 1.7;
}
.calendly-wrap {
width: 100%;
max-width: 800px;
min-height: 700px;
margin-inline: auto;
border: 1px solid var(--line-dark);
border-radius: 12px;
overflow: hidden;
background: color-mix(in srgb, var(--ivory) 4%, transparent);
}
.calendly-wrap iframe {
display: block;
width: 100%;
height: 100%;
min-height: 700px;
border: 0;
}
@media (max-width: 559px) {
.calendly-wrap {
width: calc(100% + 2 * var(--gutter));
max-width: none;
margin-inline: calc(-1 * var(--gutter));
border-inline: 0;
border-radius: 0;
}
}
@media (max-width: 899px) {
.meta-row { grid-template-columns: minmax(0, 1fr); }
}
.byline { display: flex; align-items: center; gap: 12px; font-size: var(--fs-small); }
.avatar {
flex: none;
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
overflow: hidden;
border-radius: 999px;
border: 1px solid color-mix(in srgb, var(--gold-deep) 40%, transparent);
background: color-mix(in srgb, var(--ink) 8%, transparent);
}
.avatar img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; }
.avatar > span { font-size: max(0.75rem, 12px); font-weight: 700; color: var(--rose-deep); }
.takeaways {
display: flex;
flex-direction: column;
gap: 10px;
padding: clamp(16px, 2.2vw, 22px) clamp(18px, 2.4vw, 24px);
border-left: 3px solid var(--gold);
border-radius: 0 12px 12px 0;
background: color-mix(in srgb, var(--gold) 9%, transparent);
}
.pullquote {
margin: 0;
padding: clamp(18px, 2.6vw, 26px) 0;
border-top: 1px solid var(--line-light);
border-bottom: 1px solid var(--line-light);
font-size: var(--fs-lead);
line-height: 1.6;
}
.h3-accent { color: var(--rose-deep); }
.credential {
display: block;
font-size: var(--fs-small);
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--gold-light);
}
.band-light .credential { color: var(--gold-deep); }
.bio-second {
margin: 0;
font-size: var(--fs-body);
line-height: 1.75;
color: color-mix(in srgb, var(--ivory) 70%, transparent);
text-wrap: pretty;
}
.band-light .bio-second { color: color-mix(in srgb, var(--ink) 72%, transparent); }
.langs { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; font-size: var(--fs-small); }
.linkpage .inner {
width: min(100% - 40px, 440px);
display: flex;
flex-direction: column;
align-items: center;
gap: 22px;
padding: 44px 0 56px;
text-align: center;
}
.linkstack { display: flex; flex-direction: column; gap: 12px; width: 100%; }
.linkstack .pill { width: 100%; justify-content: center; min-height: 60px; }
.linkfoot { font-size: var(--fs-small); color: color-mix(in srgb, var(--ivory) 62%, transparent); }
.skiplink {
position: absolute;
left: -9999px;
top: 0;
z-index: 200;
padding: 12px 18px;
background: var(--ivory);
color: var(--ink);
font-family: var(--f-head);
font-weight: 700;
border-radius: 0 0 10px 0;
box-shadow: 0 2px 10px rgba(0, 0, 0, .3);
}
.skiplink:focus {
left: 0;
}
:root { --focus-ring: var(--blue-deep); }
.band-dark, .band-hero, .band-dark-2, header, footer, .nav-panel, .nav-drawer {
--focus-ring: var(--gold-light);
}
:focus-visible {
outline: 3px solid var(--focus-ring);
outline-offset: 2px;
border-radius: 2px;
}
.syllabus-row { margin-top: clamp(14px, 1.8vw, 20px); }
.coursesyllabus {
margin-top: 10px;
font-size: max(0.75rem, 12px);
font-weight: 700;
letter-spacing: 0.08em;
line-height: 1.45;
}
.coursesyllabus.is-pending { font-weight: 600; letter-spacing: 0.02em; }
.syllabus-pending {
font-size: var(--fs-small);
font-weight: 600;
line-height: 1.5;
color: color-mix(in srgb, var(--ink) 66%, transparent);
}
.band-dark .syllabus-pending, .band-hero .syllabus-pending {
color: color-mix(in srgb, var(--ivory) 78%, transparent);
}
.pending {
align-self: flex-start;
font-size: max(0.75rem, 12px);
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: color-mix(in srgb, var(--ink) 55%, transparent);
}
.tagchip {
display: inline-flex;
align-items: center;
padding: 8px 14px;
border-radius: 999px;
border: 1px solid var(--line-light);
color: var(--ink);
}
.tagchip:hover, .tagchip:focus-visible { border-color: var(--rose-deep); color: var(--rose-deep); }
.tagchip.is-active { background: var(--ink); border-color: var(--ink); color: var(--ivory); }
.tagchip.is-active:hover { color: var(--ivory); }
.cupfig { margin: 0; display: flex; justify-content: center; }
.cupfig img { width: 100%; }
.sec-head > p,
.lead,
p.measure,
.casepara,
.guide-copy p,
.proofcard p,
.lead-inclusion p,
.casequote p,
.quotecard p,
.team-copy p { text-wrap: pretty; }
.sec-head > p.outcomenote {
text-wrap: wrap;
line-height: 1.7;
color: color-mix(in srgb, var(--ivory) 66%, transparent);
}
.band h1, .band h2, .band h3, .band h4 { margin: 0; }
.sec-head > * { margin: 0; }
.sec-head p + p { margin-top: 0; }
.band p { margin: 0; }
.legalpage p { margin: 0; }
.tpl-T09 .measure + .measure { margin-top: clamp(14px, 2vw, 20px); }
.tpl-T09 .measure p + p { margin-top: 1em; }
.faqitem { border-top: 1px solid; }
.diagcard {
cursor: pointer;
text-align: left;
font-family: var(--f-ui);
background: var(--diag-bg, var(--paper));
border: 1px solid var(--diag-border, var(--line-light));
border-radius: 4px;
padding: clamp(20px, 2.6vw, 28px);
display: flex;
flex-direction: column;
gap: 12px;
min-height: 180px;
width: 100%;
transition: background 0.25s ease, border-color 0.25s ease;
}
.diag-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; }
.diag-num { font-size: var(--fs-stat); line-height: 1; }
.diag-dot {
width: 26px;
height: 26px;
border-radius: 999px;
border: 1px solid color-mix(in srgb, var(--gold) 60%, transparent);
display: flex;
align-items: center;
justify-content: center;
background: var(--diag-dot, transparent);
color: #FFFFFF;
transition: background 0.25s ease, border-color 0.25s ease;
}
.diag-tick { opacity: 0; transition: opacity 0.2s ease; }
.diag-title { font-family: var(--f-head); font-weight: 600; font-size: var(--fs-h3); line-height: 1.28; color: var(--rose-deep); }
.diag-body { font-size: var(--fs-small); line-height: 1.6; color: color-mix(in srgb, var(--ink) 70%, transparent); }
.diagcard:hover { border-color: color-mix(in srgb, var(--gold-deep) 55%, transparent); }
.diagcard:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 2px; }
.diagcard.is-ticked {
background: color-mix(in srgb, var(--gold) 14%, var(--paper));
border-color: var(--gold-deep);
}
.diagcard.is-ticked .diag-dot { background: var(--gold-deep); border-color: var(--gold-deep); }
.diagcard.is-ticked .diag-tick { opacity: 1; }
.diagtally { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; font-size: var(--fs-body); color: color-mix(in srgb, var(--ink) 72%, transparent); }
.diagcount { font-weight: 700; color: var(--rose-deep); }
@media (prefers-reduced-motion: reduce) {
.diagcard, .diag-dot, .diag-tick { transition: none; }
}
.pkg-detail { margin: clamp(18px, 2.6vw, 26px) 0 clamp(20px, 2.8vw, 30px); gap: clamp(20px, 3vw, 40px); }
.pkg-who, .pkg-includes { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.pkg-who p { margin: 0; line-height: 1.75; font-size: var(--fs-body); text-wrap: pretty; }
.pkg-includes .ticklist { gap: 8px; }
.pkg-includes .ticklist li { font-size: var(--fs-small); line-height: 1.6; }
.coursegrid { gap: clamp(14px, 2vw, 20px); }
.coursecard {
display: flex;
flex-direction: column;
gap: 10px;
width: 100%;
padding: clamp(20px, 2.6vw, 28px);
border: 1px solid;
border-radius: 4px;
transition: border-color 0.25s ease, transform 0.25s ease;
}
.coursecard:hover { border-color: color-mix(in srgb, var(--gold-deep) 60%, transparent); transform: translateY(-2px); }
.coursehead { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 14px; width: 100%; }
.coursename { font-size: var(--fs-h3); line-height: 1.25; }
.coursemeta { letter-spacing: 0.14em; white-space: nowrap; }
.coursecopy { font-size: var(--fs-small); line-height: 1.65; text-wrap: pretty; }
.coursebook { display: inline-flex; align-items: center; gap: 8px; letter-spacing: 0.12em; margin-top: 4px; }
@media (prefers-reduced-motion: reduce) {
.coursecard { transition: none; }
.coursecard:hover { transform: none; }
}
.intgrid { gap: clamp(14px, 2vw, 20px); }
.intgrid > :last-child:nth-child(odd) { grid-column: 1 / -1; }
.intcallout {
margin-top: clamp(18px, 2.4vw, 26px);
padding: clamp(18px, 2.4vw, 26px) clamp(18px, 2.6vw, 28px);
border: 1px solid;
border-radius: 4px;
box-shadow: inset 3px 0 0 var(--gold);
}
.intcallout p {
margin: 0;
max-width: 74ch;
font-size: var(--fs-body);
line-height: 1.75;
}
.intcard {
display: flex;
flex-direction: column;
gap: 12px;
width: 100%;
padding: clamp(20px, 2.6vw, 28px);
border: 1px solid;
border-radius: 4px;
}
.intgroup { letter-spacing: 0.18em; }
.intblurb { margin: 0; font-size: var(--fs-small); line-height: 1.65; text-wrap: pretty; }
.intlist { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 0; padding: 0; list-style: none; }
.inttool-logo { padding-left: 5px; padding-block: 5px; gap: 9px; }
.inttool img {
width: 40px;
height: 40px;
border-radius: 10px;
object-fit: contain;
background: #FFFFFF;
flex: none;
}
.inttool {
display: inline-flex;
align-items: center;
font-size: max(0.75rem, 12px);
font-weight: 600;
line-height: 1;
padding: 7px 12px;
border: 1px solid;
border-radius: 999px;
}
.band-light .intcard { background: var(--paper); border-color: var(--line-light); }
.band-light .intgroup { color: var(--rose-deep); }
.band-light .intblurb { color: color-mix(in srgb, var(--ink) 80%, transparent); }
.band-light .inttool { color: var(--ink); border-color: var(--line-light); }
.pillargrid { gap: clamp(16px, 2.2vw, 26px); margin-top: clamp(22px, 3vw, 34px); }
.pillarcard {
display: flex;
flex-direction: column;
gap: 10px;
padding: clamp(20px, 2.6vw, 28px);
background: var(--paper);
border: 1px solid var(--line-light);
border-radius: 12px;
}
.pillartitle { color: var(--rose-deep); letter-spacing: 0.16em; }
.pillarcard p { margin: 0; color: color-mix(in srgb, var(--ink) 80%, transparent); line-height: 1.7; }
.journey {
list-style: none;
margin: clamp(22px, 3vw, 34px) 0 0;
padding: 0;
display: grid;
gap: 0;
}
.journeystep {
display: grid;
grid-template-columns: minmax(74px, 92px) 220px minmax(0, 1fr);
gap: clamp(14px, 2vw, 26px);
align-items: start;
padding: clamp(16px, 2vw, 22px) 0;
border-top: 1px solid var(--line-dark);
}
.journeyphoto {
display: block;
width: 100%;
height: auto;
aspect-ratio: 4 / 3;
object-fit: cover;
border-radius: 8px;
border: 1px solid var(--line-dark);
}
.journeystep:last-child { border-bottom: 1px solid var(--line-dark); }
.journeyyear {
font-size: var(--fs-h3);
line-height: 1.1;
color: var(--gold-light);
font-variant-numeric: tabular-nums;
}
.journeybody { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.journeytitle { font-weight: 700; color: var(--ivory); line-height: 1.4; }
.journeytext {
font-size: var(--fs-small);
line-height: 1.65;
color: color-mix(in srgb, var(--ivory) 78%, transparent);
text-wrap: pretty;
}
@media (max-width: 899px) {
.journeystep { grid-template-columns: minmax(74px, 92px) minmax(0, 1fr); }
.journeybody { grid-column: 1 / -1; }
}
@media (max-width: 559px) {
.journeystep { grid-template-columns: minmax(0, 1fr); gap: 10px; }
.journeyphoto { max-width: 320px; }
}
.autogrid { gap: clamp(14px, 2vw, 20px); }
.autocard {
display: flex;
flex-direction: column;
gap: 10px;
width: 100%;
padding: clamp(20px, 2.6vw, 28px);
border: 1px solid;
border-radius: 4px;
}
.autoname { font-size: var(--fs-h3); line-height: 1.25; }
.autocopy { font-size: var(--fs-small); line-height: 1.65; text-wrap: pretty; }
.autonote {
max-width: 62ch;
margin: clamp(20px, 3vw, 30px) auto 0;
font-size: var(--fs-body);
line-height: 1.75;
text-align: center;
text-wrap: pretty;
}
.extragrid { gap: clamp(14px, 2vw, 20px); }
.extracard {
display: flex;
flex-direction: column;
gap: 10px;
width: 100%;
padding: clamp(20px, 2.6vw, 28px);
border: 1px solid;
border-radius: 4px;
}
.extratitle { font-size: var(--fs-h3); line-height: 1.25; }
.extracopy { font-size: var(--fs-small); line-height: 1.65; text-wrap: pretty; }
.extranote {
max-width: none;
margin: clamp(20px, 3vw, 30px) 0 0;
font-size: var(--fs-body);
line-height: 1.75;
text-align: left;
text-wrap: pretty;
}
.bandvideo {
position: relative;
display: block;
width: 100%;
max-width: 860px;
margin: clamp(20px, 3vw, 30px) auto 0;
aspect-ratio: 16 / 9;
overflow: hidden;
border-radius: 8px;
background: color-mix(in srgb, var(--ink) 8%, transparent);
}
.bandvideo iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.svcincludes { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 0; padding: 0; list-style: none; }
.svcincludes li {
position: relative;
padding-left: 16px;
font-size: max(0.8125rem, 13px);
line-height: 1.55;
color: color-mix(in srgb, var(--ink) 72%, transparent);
text-wrap: pretty;
}
.svcincludes li::before {
content: "";
position: absolute;
left: 0;
top: 0.62em;
width: 7px;
height: 1px;
background: var(--gold-deep);
}
.diagresult { display: inline; }
.diagnudge { margin-left: 6px; color: color-mix(in srgb, var(--ink) 72%, transparent); }
.diagcta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; justify-self: end; }
.diagguide[hidden] { display: none; }
.hero-close {
margin: clamp(10px, 1.6vw, 16px) 0 0;
font-size: var(--fs-lead);
font-weight: 700;
line-height: 1.55;
text-wrap: pretty;
}
@media (min-width: 900px) {
.tpl-T01 .split-hero { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
.tpl-T01 .hero-figure {
justify-content: flex-end;
width: 118%;
max-width: none;
margin-right: -16%;
}
.tpl-T01 .hero-cutout { width: 100%; max-width: none; margin-right: 0; }
}
.hero-ticks {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: clamp(10px, 1.4vw, 14px);
}
.hero-ticks li {
display: grid;
grid-template-columns: 30px minmax(0, 1fr);
gap: 12px;
align-items: center;
}
.hero-ticks svg { width: 30px; height: 30px; flex: none; }
.hero-ticks span {
font-size: var(--fs-body);
line-height: 1.6;
color: color-mix(in srgb, var(--ivory) 74%, transparent);
text-wrap: pretty;
}
.hero-ticks strong { font-weight: 600; color: var(--ivory); }
@media (max-width: 899px) {
.hero-ticks { max-width: 30rem; margin-inline: auto; }
.hero-ticks li, .hero-ticks span { text-align: left; }
.tpl-T01 .hero-head h1 > span { display: inline; }
.tpl-T01 .hero-head h1 { text-wrap: pretty; font-size: min(38px, 9.7vw); }
.tpl-T01 .band-hero .hero-copy .lead { text-align: center; }
.tpl-T01 .hero-copy .lead { order: 1; }
.tpl-T01 .hero-copy .hero-cta { order: 2; }
.tpl-T01 .hero-copy .hero-ticks { order: 3; }
.tpl-T01 .hero-cta { flex-wrap: nowrap; }
.tpl-T01 .hero-cta .pill {
flex: 0 1 auto;
min-width: 0;
padding-left: 14px;
padding-right: 14px;
letter-spacing: 0.06em;
}
}
@keyframes ctaHalo {
0%, 100% { filter: drop-shadow(0 0 0    color-mix(in srgb, var(--gold-light) 0%, transparent)); }
50%      { filter: drop-shadow(0 0 16px color-mix(in srgb, var(--gold-light) 60%, transparent)); }
}
.pill-foil {
animation: ctaHalo 4.4s ease-in-out infinite;
background-image:
linear-gradient(105deg, #C19E56 14%, #EAC36F 29%, #EAC36F 33%, #C49E53 42%, #BA944B 60%, #CAA358 65%, rgb(251 209 131 / .81) 73%, #B48E47 85%, #8A6930 100%),
linear-gradient(rgb(0, 109, 210), rgb(0, 109, 210));
}
@media (prefers-reduced-motion: reduce) {
.pill-foil { animation: none; filter: none; }
}
.tpl-T01 section.band-hero {
background-color: #0E171C;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
@media (min-width: 900px) {
.tpl-T01 section.band-hero {
background-image:
linear-gradient(to top, rgba(14, 23, 28, 0.62) 0%, rgba(14, 23, 28, 0.62) 26%, rgba(14, 23, 28, 0.24) 40%, transparent 56%),
url("/media/hero-gradient-bg.png");
}
}
@media (max-width: 899px) {
.tpl-T01 section.band-hero {
background-image:
linear-gradient(to top, rgba(14, 23, 28, 0.62) 0%, rgba(14, 23, 28, 0.62) 26%, rgba(14, 23, 28, 0.24) 40%, transparent 56%),
linear-gradient(180deg,
rgb(17, 23, 26) 0%,
rgb(19, 28, 36) 18%,
rgb(24, 44, 66) 38%,
rgb(38, 79, 118) 55%,
rgb(52, 101, 143) 66%,
rgb(30, 62, 95) 80%,
rgb(17, 25, 31) 100%);
}
}
@media (max-width: 899px) {
.shell #services .g2 > div,
.shell #services .g2 > div * { text-align: left; }
.shell #services .svcbody { grid-column: 1 / -1; }
.shell #services .svcnum { grid-row: auto; }
.shell #guide,
.shell #guide *,
.shell #blog,
.shell #blog * { text-align: center; }
}
@media (max-width: 899px) {
.shell section.band p,
.shell section.band li,
.shell .m-center p,
.shell .m-center li {
text-align: left;
text-wrap: pretty;
}
.shell section.band .eyebrow,
.shell section.band figcaption,
.shell section.band .statlabel,
.shell section.band p.serif {
text-align: center;
}
.shell section.band .faq-a,
.shell section.band .probcopy,
.shell section.band .extracopy,
.shell section.band .ticktext,
.shell section.band .didtext,
.shell section.band .toolcopy,
.shell section.band .challengecopy,
.shell section.band .outcomecopy,
.shell section.band .svccopy,
.shell section.band .coursecopy,
.shell section.band .suitcopy,
.shell section.band .commit-text,
.shell section.band .autocopy,
.shell section.band .permission-note,
.shell section.band .stepbody,
.shell section.band .stepbody span {
text-align: left;
text-wrap: pretty;
}
.shell section.band .stepitem span:not(.eyebrow),
.shell section.band .g2 span > span:last-child,
.shell section.band .g3:not(.factstrip) > div > span:last-child {
text-align: left;
text-wrap: pretty;
}
}
.foot-col a,
.foot-legal a,
.foot-nav a {
display: inline-block;
padding-block: 4px;
}
a.contactphone,
a.contactemail,
.teamcap a.serif,
.svccard a.svctitle,
.svccard a.svcbook,
a.reviewlink,
a.quoteservice,
.split .reveal > a {
display: inline-block;
padding-block: 4px;
}
.svccard a.svcbook,
a.reviewlink {
display: inline-flex;
align-items: center;
min-height: 28px;
}
@media (max-width: 559px) {
:root { --fs-body: 1rem; }
.shell section.band p:not(.lastupdated):not(.eyebrow),
.shell section.band li {
font-size: var(--fs-body);
}
}
@media (max-width: 899px) {
.shell input,
.shell select,
.shell textarea,
.shell .guide-form input[type="email"] {
font-size: 16px;
}
}
.guide-dl { align-items: center; gap: 14px; }
.dl-note {
font-family: var(--f-head);
font-size: var(--fs-small);
letter-spacing: .04em;
color: color-mix(in srgb, var(--ink) 62%, transparent);
}
.band-dark .dl-note, .band-hero .dl-note {
color: color-mix(in srgb, var(--ivory) 78%, transparent);
}
.hcmodal {
border: 0;
padding: 0;
background: transparent;
max-width: min(560px, calc(100vw - 32px));
width: 100%;
color: var(--ivory);
}
.hcmodal::backdrop {
background: rgba(9, 14, 18, 0.72);
backdrop-filter: blur(2px);
}
.hcmodal-panel {
position: relative;
display: flex;
flex-direction: column;
gap: 14px;
padding: clamp(26px, 4vw, 40px) clamp(20px, 3.4vw, 34px) clamp(22px, 3vw, 30px);
border-radius: 14px;
background:
radial-gradient(120% 90% at 12% 8%, rgba(25, 95, 170, 0.34) 0%, transparent 60%),
linear-gradient(168deg, #16232B 0%, #0E171C 62%, #131E26 100%);
box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5);
text-align: center;
}
.hcmodal-panel h2 {
margin: 0;
font-size: clamp(24px, 3.6vw, 32px);
line-height: 1.15;
color: var(--ivory);
text-wrap: balance;
text-align: center;
}
.hcmodal-panel > p {
margin: 0 0 4px;
font-size: var(--fs-body);
line-height: 1.6;
color: color-mix(in srgb, var(--ivory) 78%, transparent);
text-wrap: pretty;
}
.hcmodal-panel input[type="text"],
.hcmodal-panel input[type="email"] {
width: 100%;
padding: 14px 16px;
border: 1px solid transparent;
border-radius: 8px;
background: #FFFFFF;
color: var(--ink);
font-family: var(--f-body);
font-size: 16px;
line-height: 1.3;
}
.hcmodal-panel input::placeholder { color: color-mix(in srgb, var(--ink) 55%, transparent); }
.hcmodal-panel input:focus-visible {
outline: 2px solid var(--gold-light);
outline-offset: 2px;
}
.hcmodal-submit {
width: 100%;
justify-content: center;
margin-top: 2px;
}
.hcmodal-note {
margin: 0;
font-size: var(--fs-small);
line-height: 1.5;
color: color-mix(in srgb, var(--ivory) 62%, transparent);
}
.hcmodal-close {
position: absolute;
top: 10px;
right: 10px;
display: flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
padding: 0;
border: 0;
border-radius: 999px;
background: transparent;
color: color-mix(in srgb, var(--ivory) 70%, transparent);
cursor: pointer;
}
.hcmodal-close:hover { color: var(--ivory); }
.hcmodal-close:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 2px; }
html:not(.js-nav) .nav-panel {
display: none;
position: absolute;
top: calc(100% + 10px);
left: -14px;
z-index: 90;
min-width: 236px;
padding: 12px;
border-radius: 14px;
background: var(--ivory);
border: 1px solid color-mix(in srgb, var(--gold-deep) 30%, transparent);
box-shadow: 0 22px 48px rgba(0, 0, 0, 0.34);
}
html:not(.js-nav) .nav-item:hover > .nav-panel,
html:not(.js-nav) .nav-item:focus-within > .nav-panel,
html:not(.js-nav) .nav-item-mega:hover > .nav-panel,
html:not(.js-nav) .nav-item-mega:focus-within > .nav-panel {
display: flex;
}
@media (min-width: 900px) {
.tpl-T01 .hero-curve {
-webkit-mask-image:
linear-gradient(to right, #000 78%, transparent 100%),
linear-gradient(to bottom, #000 86%, transparent 100%);
mask-image:
linear-gradient(to right, #000 78%, transparent 100%),
linear-gradient(to bottom, #000 86%, transparent 100%);
-webkit-mask-composite: source-in;
mask-composite: intersect;
}
}
.hero-cutout {
-webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
}
@media (min-width: 900px) {
.shell .band:not(.band-footer) .g2:not(.fieldrow):has(> :nth-child(2n + 1):last-child) > :last-child {
grid-column: 1 / -1;
}
.shell .band:not(.band-footer) .g3:not(.factstrip):not(.postgrid):has(> :nth-child(3n + 1):last-child) > :last-child {
grid-column: 1 / -1;
}
.shell .band:not(.band-footer) .g3:not(.factstrip):not(.postgrid):has(> :nth-child(3n + 2):last-child) {
grid-template-columns: repeat(6, minmax(0, 1fr));
}
.shell .band:not(.band-footer) .g3:not(.factstrip):not(.postgrid):has(> :nth-child(3n + 2):last-child) > * {
grid-column: span 2;
}
.shell .band:not(.band-footer) .g3:not(.factstrip):not(.postgrid):has(> :nth-child(3n + 2):last-child) > :nth-last-child(-n + 2) {
grid-column: span 3;
}
.shell .band:not(.band-footer) .g3:not(.factstrip):not(.postgrid):has(> :nth-child(4):last-child) {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.shell .band:not(.band-footer) .g3:not(.factstrip):not(.postgrid):has(> :nth-child(4):last-child) > :last-child {
grid-column: auto;
}
.shell .band:not(.band-footer) .g4:has(> :nth-child(4n + 1):last-child) > :last-child {
grid-column: 1 / -1;
}
.shell .band:not(.band-footer) .g4:has(> :nth-child(5):last-child) {
grid-template-columns: repeat(6, minmax(0, 1fr));
}
.shell .band:not(.band-footer) .g4:has(> :nth-child(5):last-child) > * {
grid-column: span 2;
}
.shell .band:not(.band-footer) .g4:has(> :nth-child(5):last-child) > :nth-last-child(-n + 2) {
grid-column: span 3;
}
.shell .band:not(.band-footer) .g4:has(> :nth-child(4n + 2):last-child) {
grid-template-columns: repeat(12, minmax(0, 1fr));
}
.shell .band:not(.band-footer) .g4:has(> :nth-child(4n + 2):last-child) > * {
grid-column: span 3;
}
.shell .band:not(.band-footer) .g4:has(> :nth-child(4n + 2):last-child) > :nth-last-child(-n + 2) {
grid-column: span 6;
}
.shell .band:not(.band-footer) .g4:has(> :nth-child(4n + 3):last-child) {
grid-template-columns: repeat(12, minmax(0, 1fr));
}
.shell .band:not(.band-footer) .g4:has(> :nth-child(4n + 3):last-child) > * {
grid-column: span 3;
}
.shell .band:not(.band-footer) .g4:has(> :nth-child(4n + 3):last-child) > :nth-last-child(-n + 3) {
grid-column: span 4;
}
.shell .band .signals:has(> :nth-child(2n + 1):last-child) > :last-child {
grid-column: 1 / -1;
}
}
@media (max-width: 899px) {
.shell .cta-row,
.shell .guide-form {
justify-content: center;
}
.shell .guide-form input[type="email"] {
flex: 1 1 100%;
text-align: center;
}
}
.expiry {
display: flex;
flex-direction: column;
gap: 8px;
padding-bottom: clamp(18px, 2.4vw, 26px);
border-bottom: 1px solid var(--line);
}
.expiry .eyebrow { color: var(--rose-deep); letter-spacing: 0.16em; }
.expiry p {
margin: 0;
font-size: var(--fs-body);
font-weight: 500;
line-height: 1.7;
color: var(--ink);
}
.badge-stale {
align-self: flex-start;
font-size: var(--fs-eyebrow);
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--rose-deep);
border: 1px solid color-mix(in srgb, var(--rose-deep) 40%, transparent);
border-radius: 2px;
padding: 3px 8px;
}
@media (max-width: 899px) {
.shell .tickitem,
.shell .diditem,
.shell .signal,
.shell .hero-ticks li {
align-items: center;
text-align: left;
}
.shell .ticktext,
.shell .didtext,
.shell .signal > span,
.shell .hero-ticks li > span {
text-align: left;
}
.shell .inner ul.ticklist,
.shell .inner ul.svcincludes,
.shell .inner .pkg-includes ul {
list-style-position: outside;
padding-left: 1.15em;
text-align: left;
}
.shell .inner ul.ticklist li,
.shell .inner ul.svcincludes li,
.shell .inner .pkg-includes ul li {
text-align: left;
}
.shell .inner ul.intlist {
flex-direction: column;
align-items: flex-start;
padding-left: 0;
text-align: left;
align-self: flex-start;
}
.shell .inner ul.intlist li { text-align: left; }
.shell .inner :has(> .pill) {
justify-self: center;
align-self: center;
}
}
.pkgtile { flex-wrap: wrap; }
.pkgtile-facts {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 4px 10px;
font-size: max(0.75rem, 12px);
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.pkgtile-price { font-size: var(--fs-small); letter-spacing: 0.06em; }
.pkgtile-dur { opacity: 0.85; }
.pkgtile-cta {
padding: 11px 22px;
font-size: max(0.75rem, 12px);
letter-spacing: 0.1em;
flex: none;
}
.checklist { list-style: none; padding-left: 0; margin: 0; }
.tickitem-sub { margin-left: clamp(22px, 3vw, 34px); }
.tickitem-sub .tickmark { opacity: 0.55; transform: scale(0.82); }
.checklist .tickitem:last-child { border-bottom: 0; }
.pkg-includes .checklist .tickitem { padding: 9px 0; }
.pkg-includes .checklist .tickmark { width: 18px; height: 18px; margin-top: 0; }
.pkg-includes .checklist .ticktext { font-size: var(--fs-small); line-height: 1.6; }
@media (max-width: 899px) {
.shell .pkgtile { flex-direction: column; align-items: stretch; gap: 14px; }
.shell .pkgtile-cta { justify-content: center; width: 100%; }
.shell .inner ul.checklist { list-style: none; padding-left: 0; }
}
.in-practice {
margin-top: clamp(22px, 3vw, 32px);
padding-top: clamp(18px, 2.4vw, 26px);
border-top: 1px solid var(--line-light);
display: flex;
flex-direction: column;
gap: 10px;
}
.in-practice .eyebrow { color: var(--rose-deep); letter-spacing: 0.16em; }
.tickmark-quiet {
background: transparent;
border: 1px solid var(--gold-deep);
color: var(--gold-deep);
}
.coursecard { display: flex; flex-direction: column; }
.coursecta { align-self: flex-start; margin-top: auto; }
.coursecard .coursecopy { margin-bottom: clamp(14px, 2vw, 20px); }
.coursemeta { text-transform: none; letter-spacing: normal; }
.extracta { margin-top: clamp(18px, 2.4vw, 26px); }
@media (max-width: 899px) {
.shell .coursecta { align-self: stretch; justify-content: center; }
}
.sibgrid { gap: clamp(12px, 1.8vw, 18px); }
.sibcard {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
width: 100%;
padding: clamp(18px, 2.4vw, 24px);
background: var(--paper);
border: 1px solid var(--line-light);
border-radius: 12px;
color: var(--ink);
}
.sibcard:hover, .sibcard:focus-visible { border-color: var(--gold-deep); }
.sibcard svg { flex: none; color: var(--rose-deep); }
.sibid { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sibname { font-family: var(--f-head); font-weight: 600; font-size: var(--fs-h3); line-height: 1.3; }
.sibfacts {
font-size: max(0.75rem, 12px);
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--rose-deep);
}
.finderband { padding-bottom: clamp(34px, 4.6vw, 58px); }
.findergrid { gap: clamp(12px, 1.8vw, 18px); margin-top: clamp(20px, 2.8vw, 30px); }
.findercard {
display: flex;
flex-direction: column;
gap: 10px;
height: 100%;
padding: clamp(18px, 2.4vw, 24px);
background: var(--paper);
border: 1px solid var(--line-light);
border-radius: 12px;
color: var(--ink);
position: relative;
}
.findercard:hover, .findercard:focus-visible {
border-color: var(--gold-deep);
transform: translateY(-1px);
}
@media (prefers-reduced-motion: reduce) {
.findercard:hover, .findercard:focus-visible { transform: none; }
}
.findersituation {
font-size: var(--fs-body);
font-weight: 500;
line-height: 1.5;
color: var(--ink);
}
.finderto {
display: flex;
flex-direction: column;
gap: 3px;
margin-top: auto;
padding-top: 12px;
border-top: 1px solid var(--line-light);
}
.findername { font-family: var(--f-head); font-weight: 600; font-size: var(--fs-small); }
.finderfacts {
font-size: max(0.75rem, 12px);
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--rose-deep);
}
.findercard svg { position: absolute; top: clamp(18px, 2.4vw, 24px); right: clamp(18px, 2.4vw, 24px); color: var(--rose-deep); }
.findercard .findersituation { padding-right: 26px; }
.findernote {
display: flex;
flex-direction: column;
gap: 14px;
align-items: flex-start;
margin-top: clamp(20px, 2.8vw, 30px);
}
@media (max-width: 899px) {
.shell .findernote { align-items: center; }
.shell .findercard { text-align: left; align-items: stretch; }
.shell .findersituation, .shell .finderto { text-align: left; align-self: stretch; }
}
.finderband .finderintro { color: color-mix(in srgb, var(--ivory) 78%, transparent); }
.finderoutcome {
font-size: var(--fs-small);
line-height: 1.5;
color: var(--ink-soft, color-mix(in srgb, var(--ink) 74%, transparent));
margin-top: -2px;
}
@media (max-width: 899px) {
.shell .finderoutcome { text-align: left; align-self: stretch; }
}
@media (max-width: 1023px) {
.nav-accrow {
display: flex;
align-items: stretch;
border-bottom: 1px solid var(--line-dark);
}
.nav-accrow .nav-acc { flex: 1; width: auto; border-bottom: 0; }
.nav-accbtn {
flex: none;
display: flex;
align-items: center;
justify-content: center;
width: 52px;
padding: 0;
background: transparent;
border: 0;
color: color-mix(in srgb, var(--ivory) 86%, transparent);
cursor: pointer;
}
.nav-accbtn svg { transition: transform 0.2s ease; }
[data-nav-accsec][data-nav-open] .nav-accbtn { color: var(--gold-light); }
[data-nav-accsec][data-nav-open] .nav-accbtn svg { transform: rotate(180deg); }
[data-nav-accsec][data-nav-open] .nav-acclink { color: var(--gold-light); }
}
.motion-wait .pill-foil,
.motion-wait .statbadge::after,
.motion-wait .foot-brand .badge-shine::after { animation-play-state: paused; }