/* Self-hosted fonts (latin subset), 14 Nov. Preloaded in includes/head.php. */
@font-face{font-family:"Fraunces";font-style:normal;font-weight:500 700;font-display:swap;src:url(../fonts/fraunces-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Figtree";font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/figtree-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* Studio Key tokens, compiled from tokens.json */
:root {
--sand: #ece2d4;
--sand-2: #e2d5c2;
--cream: #f7f1e8;
--charcoal: #1c1f22;
--charcoal-2: #2a2e32;
--charcoal-3: #30353a;
--charcoal-4: #3a3f44;
--charcoal-line: #4a4f55;
--ink-2: #4a443d;
--text-muted: #625b52;
--mint: #14cb94;
--mint-hover: #3ddcac;
--mint-ink: #075c45;
--sky: #9aa6e8;
--mustard: #e3ad3b;
--coral: #d9604e;
--coral-light: #f08a78;
--on-dark: #f7f1e8;
--on-dark-2: #c9c0b4;
--placeholder-dark: #9d968c;
--line: #857867;
--whatsapp: #25d366;
--success-ink: #075c45;
--success-tint: #c4eedd;
--warning-ink: #7a5410;
--warning-tint: #f5e2b8;
--error-ink: #9c3526;
--error-tint: #f4d9d3;
--error-on-dark: #ffb3a8;
--error-border-dark: #ff8a7a;
--info-ink: #3a4399;
--info-tint: #d9ddf5;
--primary: var(--mint);
--primary-hover: var(--mint-hover);
--on-primary: var(--charcoal);
--secondary: var(--charcoal);
--accent: var(--sky);
--highlight: var(--mustard);
--background: var(--sand);
--surface: var(--cream);
--surface-sunk: var(--sand-2);
--surface-dark: var(--charcoal);
--surface-dark-raised: var(--charcoal-2);
--text-primary: var(--charcoal);
--text-secondary: var(--ink-2);
--border: var(--line);
--border-subtle: var(--sand-2);
--focus: var(--mint-ink);
--focus-on-dark: var(--mint);
--link: var(--mint-ink);
--success: var(--mint);
--warning: var(--mustard);
--error: var(--coral);
--information: var(--sky);
--space-4: 4px;
--space-8: 8px;
--space-12: 12px;
--space-16: 16px;
--space-24: 24px;
--space-32: 32px;
--space-48: 48px;
--space-64: 64px;
--space-80: 80px;
--space-96: 96px;
--space-128: 128px;
--radius-none: 0;
--radius-sm: 12px;
--radius-md: 24px;
--radius-input: 26px;
--radius-textarea: 22px;
--radius-faq: 28px;
--radius-tile: 32px;
--radius-coupon: 40px;
--radius-pill: 999px;
--radius-circle: 50%;
--shadow-subtle: 0 2px 8px -4px rgba(28, 31, 34, 0.25);
--shadow-card: 0 10px 30px -18px rgba(28, 31, 34, 0.35);
--shadow-elevated: 0 24px 48px -24px rgba(28, 31, 34, 0.45);
--shadow-floating: 0 32px 80px -24px rgba(28, 31, 34, 0.55);
--fs-display: clamp(2.6rem, 1.6rem + 3.6vw, 5rem);
--fs-h1: clamp(2.4rem, 1.5rem + 3vw, 4.25rem);
--fs-h2: clamp(2rem, 1.4rem + 2.2vw, 3.4rem);
--fs-h3: clamp(1.35rem, 1.15rem + 0.7vw, 1.75rem);
--fs-h4: clamp(1.2rem, 1.1rem + 0.4vw, 1.375rem);
--fs-body: clamp(1.0625rem, 0.98rem + 0.4vw, 1.25rem);
--fs-small: 0.9375rem;
--fs-caption: 0.8125rem;
--fs-quote: clamp(1.3rem, 1.1rem + 0.7vw, 1.6rem);
--fs-quote-lead: clamp(1.4rem, 1.1rem + 1.4vw, 2.25rem);
--fs-about: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem);
--fs-price: clamp(3.5rem, 2.6rem + 3vw, 5.25rem);
--section-space: clamp(5rem, 3rem + 7vw, 9rem);
--head-gap: clamp(2.5rem, 2rem + 2vw, 4rem);
--tile-pad: clamp(1.75rem, 1rem + 2vw, 2.75rem);
--gutter: max(16px, 4vw);
--field-inset: max(8px, 1.5vw);
--radius-field: clamp(32px, 6vw, 72px);
--container: 76rem;
--container-narrow: 52rem;
--measure: 34em;
--measure-tight: 52ch;
--header-height: 4.8rem;
--touch-target: 2.75rem;
--button-height: 3.25rem;
--grid-columns: 12;
--bp-xs: 360px;
--bp-sm: 560px;
--bp-md: 768px;
--bp-steps: 900px;
--bp-lg: 1024px;
--bp-xl: 1100px;
--border-hairline: 1px;
--border-control: 2px;
--border-focus: 3px;
--border-perforation: 6px;
--duration-micro: 180ms;
--duration-state: 220ms;
--duration-state-slow: 260ms;
--duration-enter: 700ms;
--duration-shutter: 1100ms;
--duration-boil: 0.5s;
--ease: cubic-bezier(0.22, 1, 0.36, 1);
--ease-boil: steps(1);
--z-grain: 0;
--z-content: 1;
--z-sticky-bar: 15;
--z-header: 20;
--z-overlay: 40;
--z-toast: 50;
--shape-blob: 61% 39% 54% 46% / 43% 58% 42% 57%;
--shape-blob-rotate: -8deg;
--shape-arch: 999px 999px 32px 32px;
--grain-opacity: 0.55;
--grain-size: 220px;
--font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
--font-body: "Figtree", "Segoe UI", system-ui, sans-serif;
}
/* Studio Key: one shape, the round bow of a key, runs everything. Values come from tokens.json
(compiled to tokens.css, loaded first). Every rule here is ported from the approved homepage. */
/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: 7rem; color-scheme: light; }
body { margin: 0; background: var(--sand); color: var(--charcoal); font: 400 var(--fs-body)/1.55 var(--font-body); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul[class], ol[class] { list-style: none; padding: 0; }
a { color: var(--mint-ink); text-underline-offset: 0.2em; text-decoration-thickness: 1.5px; }
:focus-visible { outline: var(--border-focus) solid var(--focus); outline-offset: 3px; border-radius: var(--radius-sm); }
::selection { background: var(--mint); color: var(--charcoal); }
img, video, svg { max-width: 100%; }
p { text-wrap: pretty; }
[hidden]:not([hidden=until-found i]) { display: none !important; }
.icon { width: 1.25em; height: 1.25em; flex: none; fill: currentColor; }
.icon.icon--wa, .top__wa svg { fill: var(--whatsapp); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 1rem; top: -4rem; z-index: 60; padding: 0.75rem 1.25rem; border-radius: var(--radius-pill); background: var(--charcoal); color: var(--on-dark); font-weight: 700; }
.skip:focus { top: 1rem; }
/* ---------- Grain: a 3 to 4 frame hand-drawn boil ---------- */
:root { --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.24 0 0 0 0 0.19 0 0 0 0 0.12 0 0 0 0.55 -0.12'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.grain { position: fixed; inset: 0; z-index: var(--z-grain); pointer-events: none; background-image: var(--noise); background-size: var(--grain-size); opacity: var(--grain-opacity); animation: boil var(--duration-boil) steps(1) infinite; }
.grain--local { position: absolute; }
@keyframes boil { 0% { background-position: 0 0; } 25% { background-position: -37px 23px; } 50% { background-position: 19px -41px; } 75% { background-position: -13px -17px; } }
main, .foot { position: relative; z-index: var(--z-content); }
/* ---------- Layout ---------- */
.wrap { max-width: calc(var(--container) + 2 * var(--gutter)); margin-inline: auto; padding-left: max(var(--gutter), env(safe-area-inset-left, 0px)); padding-right: max(var(--gutter), env(safe-area-inset-right, 0px)); }
.wrap--narrow { max-width: calc(var(--container-narrow) + 2 * var(--gutter)); }
.section { padding-block: var(--section-space); }
.section--flush-top { padding-top: 0; }
.grid-12 { display: grid; gap: var(--space-32); }
@media (min-width: 1024px) { .grid-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); } }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.75rem; }
/* Dark field: charcoal, big round ends, inset from the page edge */
.field { background: var(--charcoal); color: var(--on-dark); border-radius: var(--radius-field); margin-inline: var(--field-inset); }
.field, .on-dark { --focus: var(--mint); }
.field :where(p, dd, figcaption, td) > a:not([class]), .on-dark :where(p, dd, figcaption, td) > a:not([class]) { color: var(--mint); }
.field .h2, .field .h3, .field .display { color: var(--on-dark); }
.field .lead, .on-dark .lead { color: var(--on-dark-2); }
/* ---------- Type ---------- */
.display, .h1, .h2 { font-family: var(--font-display); font-weight: 600; font-variation-settings: "SOFT" 100, "opsz" 96; letter-spacing: -0.025em; line-height: 1.04; text-wrap: balance; }
.display { font-size: var(--fs-display); }
.h1 { font-size: var(--fs-h1); }
.h2 { font-size: var(--fs-h2); }
.h3 { font-family: var(--font-display); font-weight: 600; font-variation-settings: "SOFT" 100, "opsz" 36; font-size: var(--fs-h3); line-height: 1.2; letter-spacing: -0.01em; text-wrap: balance; }
.h4 { font-family: var(--font-display); font-weight: 600; font-variation-settings: "SOFT" 100, "opsz" 24; font-size: var(--fs-h4); line-height: 1.25; letter-spacing: -0.005em; }
.h5 { font-family: var(--font-body); font-weight: 700; font-size: 1.125rem; line-height: 1.35; }
.h6 { font-family: var(--font-body); font-weight: 700; font-size: 1rem; line-height: 1.35; letter-spacing: 0.01em; }
.lead { font-size: var(--fs-body); color: var(--ink-2); max-width: var(--measure); text-wrap: pretty; }
.small { font-size: var(--fs-small); line-height: 1.45; }
.caption { font-size: var(--fs-caption); line-height: 1.4; color: var(--text-muted); }
.meta { font-size: var(--fs-small); color: var(--text-muted); }
.eyebrow { font: 700 var(--fs-caption)/1.3 var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--mint-ink); }
.quote { font-family: var(--font-display); font-variation-settings: "SOFT" 100, "opsz" 48; font-weight: 500; font-size: var(--fs-quote); line-height: 1.3; letter-spacing: -0.01em; }
.quote--lead { font-size: var(--fs-quote-lead); line-height: 1.2; }
/* ---------- Links ---------- */
.link { display: inline-flex; align-items: center; gap: 0.4em; min-height: var(--touch-target); font-weight: 700; color: var(--charcoal); text-decoration: underline; text-decoration-color: var(--mint); text-decoration-thickness: 3px; text-underline-offset: 0.3em; transition: text-underline-offset var(--duration-micro) var(--ease); }
.link:hover { text-underline-offset: 0.45em; }
button.link { background: none; border: 0; padding: 0; font: inherit; font-weight: 700; cursor: pointer; }
.link .icon { transition: transform var(--duration-micro) var(--ease); }
.link:hover .icon:last-child { transform: translateX(4px); }
.field .link, .on-dark .link { color: var(--on-dark); }
/* ---------- Buttons: pills only. The primary is the round end of the key, filled mint ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.6em; min-height: var(--button-height); padding: 0 1.6rem; border-radius: var(--radius-pill); border: var(--border-control) solid var(--charcoal); font: 700 1.0625rem/1 var(--font-body); color: var(--charcoal); text-decoration: none; background: transparent; cursor: pointer; transition: transform var(--duration-micro) var(--ease), background-color var(--duration-micro) var(--ease), border-color var(--duration-micro) var(--ease), color var(--duration-micro) var(--ease); }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(1px) scale(0.98); }
.btn--primary { background: var(--mint); border-color: var(--mint); }
.btn--primary:hover { background: var(--mint-hover); border-color: var(--mint-hover); }
.btn--ghost:hover { background: var(--cream); }
.btn .icon { transition: transform var(--duration-micro) var(--ease); }
.btn:hover .icon:last-child:not(:first-child) { transform: translateX(4px); }
.field .btn--ghost, .on-dark .btn--ghost { border-color: var(--charcoal-line); color: var(--on-dark); }
.field .btn--ghost:hover, .on-dark .btn--ghost:hover { background: var(--charcoal-2); }
/* ---------- The motif at text size: icons sit bare, never in circles ---------- */
.dot { display: inline-grid; place-items: center; flex: none; color: var(--mint-ink); }
.dot .icon { width: 1.6rem; height: 1.6rem; }
.dot--sm .icon { width: 1.35rem; height: 1.35rem; }
.dot--coral { color: var(--coral-light); }
.field .dot, .coupon .dot, .on-dark .dot { color: var(--mint); }
.field .dot--coral, .on-dark .dot--coral { color: var(--coral-light); }
.avatar { display: inline-grid; place-items: center; flex: none; width: 3.25rem; height: 3.25rem; border-radius: var(--radius-circle); background: var(--charcoal); color: var(--on-dark); font-weight: 700; font-size: 1rem; overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.stars { display: inline-flex; gap: 2px; color: var(--mustard); }
.stars .icon { width: 1rem; height: 1rem; }
.rating { display: inline-flex; flex-direction: column; gap: 0.2rem; color: var(--charcoal); font-weight: 700; font-size: var(--fs-small); text-decoration: none; }
.rating:hover span:last-child { text-decoration: underline; text-underline-offset: 0.25em; }
.rating .stars .icon { width: 1.25rem; height: 1.25rem; }
/* ---------- Tiles ---------- */
.tile { background: var(--cream); border-radius: var(--radius-tile); padding: var(--tile-pad); display: grid; gap: 1.5rem; align-content: start; }
.tile--sand2 { background: var(--sand-2); }
.tile--mint { background: var(--mint); }
.tile--sky { background: var(--sky); }
.tile--mustard { background: var(--mustard); }
.tile--dark { background: var(--charcoal); color: var(--on-dark); --focus: var(--mint); }
.tile--dark-raised { background: var(--charcoal-2); color: var(--on-dark); --focus: var(--mint); }
/* ---------- Header ---------- */
.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: var(--z-header); background: var(--sand); isolation: isolate; transition: background-color var(--duration-state-slow) var(--ease), box-shadow var(--duration-state-slow) var(--ease); }
.top::before { content: ""; position: absolute; inset: 0; z-index: -1; overflow: hidden; background-image: var(--noise); background-size: var(--grain-size); opacity: var(--grain-opacity); animation: boil var(--duration-boil) steps(1) infinite; pointer-events: none; }
.top.is-scrolled { background: color-mix(in srgb, var(--sand) 70%, transparent); -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%); box-shadow: var(--shadow-card); }
.top.is-scrolled::before { opacity: calc(var(--grain-opacity) * 0.5); }
.top__inner { display: flex; align-items: center; gap: 1.5rem; min-height: var(--header-height); }
.brand { display: inline-flex; align-items: center; gap: 0.75rem; color: var(--charcoal); text-decoration: none; }
.brand .logo { width: 8.5rem; height: auto; }
.nav { display: none; gap: 2rem; margin-left: auto; }
.nav a { color: var(--charcoal); text-decoration: none; font-family: var(--font-display); font-variation-settings: "SOFT" 100, "opsz" 24; font-weight: 500; font-size: 1.1875rem; padding-block: 0.5rem; border-bottom: var(--border-focus) solid transparent; transition: border-color var(--duration-micro) var(--ease); }
.nav a:hover, .nav a[aria-current="page"] { border-color: var(--mint); }
.top__actions { display: flex; align-items: center; gap: 0.75rem; margin-left: auto; }
.top__phone { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: var(--touch-target); min-width: var(--touch-target); color: var(--charcoal); text-decoration: none; font-family: var(--font-display); font-variation-settings: "SOFT" 100, "opsz" 24; font-weight: 500; font-size: 1.1875rem; white-space: nowrap; }
.top__phone:hover { color: var(--mint-ink); }
.top__wa { display: inline-grid; place-items: center; width: var(--touch-target); height: var(--touch-target); border-radius: var(--radius-circle); transition: transform var(--duration-micro) var(--ease); }
.top__wa:hover { transform: scale(1.08); }
.top__wa svg { width: 1.6rem; height: 1.6rem; }
.top .btn { display: none; min-height: 3rem; padding: 0 1.4rem; }
@media (min-width: 560px) { .top .btn { display: inline-flex; } }
@media (min-width: 1024px) { .nav { display: flex; } .top__actions { margin-left: 2rem; } }
@media (max-width: 400px) { .top__phone { font-size: 1.0625rem; } .brand .logo { width: 7.5rem; } }
/* ---------- Hero: 9:16 arch video on an organic mint blob ---------- */
.hero { position: relative; overflow: clip; padding-bottom: clamp(3rem, 2rem + 4vw, 6rem); }
.hero__grid { display: grid; gap: 2.5rem; align-items: center; }
.hero__copy { display: grid; gap: 1.5rem; }
.hero h1 { font-size: var(--fs-display); max-width: 14ch; }
.hero__media { position: relative; display: grid; place-items: center; padding-block: 2rem; }
.hero__media::before, .blob { content: ""; position: absolute; z-index: 0; width: min(150vw, 46rem); aspect-ratio: 1; background: var(--mint); left: 50%; top: 50%; translate: -50% -50%; border-radius: var(--shape-blob); rotate: var(--shape-blob-rotate); }
.video { position: relative; z-index: 1; width: min(68vw, 19rem); aspect-ratio: 9 / 16; border-radius: var(--shape-arch); background: var(--charcoal); color: var(--on-dark); display: grid; place-content: center; justify-items: center; gap: 0.75rem; padding: 2rem 1.5rem; text-align: center; overflow: hidden; animation: shutter var(--duration-shutter) var(--ease) both; }
.video > video, .video > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video__play { position: relative; display: grid; place-items: center; width: 5rem; height: 5rem; border-radius: var(--radius-circle); background: var(--mint); color: var(--charcoal); margin-bottom: 0.5rem; border: 0; cursor: pointer; transition: transform var(--duration-state) var(--ease); }
.video:hover .video__play { transform: scale(1.06); }
.video__play svg { width: 2.25rem; height: 2.25rem; fill: currentColor; }
.video__title { font-family: var(--font-display); font-weight: 600; font-variation-settings: "SOFT" 100; font-size: 1.5rem; line-height: 1.15; }
.video__note { color: var(--on-dark-2); font-size: var(--fs-small); }
.video__ratio { position: absolute; bottom: 1.25rem; left: 0; right: 0; color: var(--on-dark-2); font-size: var(--fs-caption); }
@keyframes shutter { from { clip-path: inset(100% 0 0 0 round 999px 999px 32px 32px); } to { clip-path: inset(0 0 0 0 round 999px 999px 32px 32px); } }
@media (min-width: 1024px) {
.hero { display: grid; min-height: calc(100vh - var(--header-height)); min-height: calc(100svh - var(--header-height)); padding-block: 0; --blob: min(46rem, calc(100svh - var(--header-height) - 5rem)); }
.hero__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2rem; align-items: center; height: 100%; }
.hero__media { grid-column: 1 / span 5; grid-row: 1; justify-items: start; padding-block: 2.5rem; }
.hero__media::before { width: var(--blob); left: auto; right: 6%; translate: 0 -50%; }
.hero .video { width: auto; height: calc(var(--blob) * 0.78); margin-left: clamp(0rem, 3vw, 3rem); }
.hero__copy { grid-column: 7 / span 6; grid-row: 1; }
}
@media (max-width: 1023px) { .hero__media { order: 2; } }
/* ---------- Promise tile ---------- */
.promise { background: var(--cream); border-radius: var(--radius-tile); padding: clamp(1.75rem, 1rem + 2.5vw, 2.75rem); display: grid; gap: 1.75rem; align-content: start; }
.promise ul { display: grid; gap: 1.5rem; }
.promise li { display: flex; gap: 1rem; align-items: flex-start; }
.promise li strong { display: block; }
.promise li span span { display: block; color: var(--ink-2); margin-top: 0.15rem; }
/* ---------- Compare: the dark problems vs solutions field ---------- */
.compare__head { text-align: center; margin-bottom: var(--head-gap); }
.compare__head .h2 { max-width: 18ch; margin-inline: auto; }
.compare { display: grid; gap: 1.25rem; }
.compare__col { border-radius: var(--radius-tile); padding: var(--tile-pad); background: var(--charcoal-2); }
.compare__col--good { background: var(--mint); color: var(--charcoal); }
.compare__col .h3 { margin-bottom: 1.5rem; }
.compare__col--good .h3 { color: var(--charcoal); }
.compare ul { display: grid; gap: 1rem; }
.compare li { display: flex; align-items: center; gap: 0.9rem; line-height: 1.45; }
.field .compare__col--good .dot { color: var(--charcoal); }
.compare__note { display: flex; align-items: center; justify-content: center; gap: 0.9rem; max-width: 40rem; margin: clamp(2rem, 1.5rem + 2vw, 3rem) auto 0; font-family: var(--font-display); font-variation-settings: "SOFT" 100, "opsz" 36; font-weight: 500; font-size: var(--fs-body); text-align: left; color: var(--on-dark); }
@media (min-width: 768px) { .compare { grid-template-columns: 1fr 1fr; } }
/* ---------- Steps: round markers on one path (the only place icons sit in circles) ---------- */
.steps { display: grid; gap: 2rem; position: relative; }
.steps li { display: grid; gap: 0.75rem; align-content: start; }
.steps .stop { width: 4.5rem; height: 4.5rem; border-radius: var(--radius-circle); display: grid; place-items: center; background: var(--cream); color: var(--charcoal); position: relative; z-index: 1; font: 600 1.5rem/1 var(--font-display); transition: transform var(--duration-state) var(--ease), background-color var(--duration-state) var(--ease); }
.steps li:last-child .stop { background: var(--mint); }
.steps .stop .icon { width: 2rem; height: 2rem; }
.steps p { color: var(--ink-2); }
@media (min-width: 900px) {
.steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.steps::before { content: ""; position: absolute; top: 2.25rem; left: 2.25rem; right: calc(25% - 2.25rem); height: 4px; border-radius: 4px; background: var(--sand-2); }
}
/* ---------- Newbie pill and the round video thumbnail ---------- */
.newbie-row { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem 2rem; }
.newbie-row .newbie { flex: 1 1 30rem; margin: 0; }
.newbie { display: flex; gap: 1rem; align-items: center; padding: 1.25rem 1.5rem 1.25rem 1.25rem; border-radius: var(--radius-pill); background: var(--cream); max-width: 58rem; }
@media (max-width: 640px) { .newbie { border-radius: var(--radius-tile); align-items: flex-start; } }
.clip { position: relative; flex: none; width: clamp(8rem, 6rem + 6vw, 11rem); aspect-ratio: 1; border-radius: var(--radius-circle); border: 0; padding: 0; overflow: hidden; background: var(--sky); cursor: pointer; display: grid; place-items: center; }
.clip__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.clip__play { position: relative; display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: var(--radius-circle); background: var(--mint); color: var(--charcoal); transition: scale var(--duration-state-slow) var(--ease); }
.clip__play svg { width: 1.6rem; height: 1.6rem; fill: currentColor; }
.clip:hover .clip__play, .clip:focus-visible .clip__play { scale: 1.2; }
.clip:focus-visible { outline: var(--border-focus) solid var(--focus); outline-offset: 4px; border-radius: var(--radius-circle); }
/* ---------- Plans: stepped tiles with dark button strips ---------- */
.price { display: grid; gap: 1.25rem; align-items: end; }
.plan { border-radius: var(--radius-tile); overflow: hidden; display: grid; }
.plan__body { padding: var(--tile-pad); display: grid; gap: 1rem; align-content: start; }
.plan--std { background: var(--mint); }
.plan--man { background: var(--sky); }
.plan--man .plan__body { gap: 1.25rem; }
.amount { display: flex; align-items: baseline; gap: 0.5rem; }
.amount b { font-family: var(--font-display); font-variation-settings: "SOFT" 100, "opsz" 144; font-weight: 600; font-size: var(--fs-price); line-height: 0.9; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.amount span { font-size: var(--fs-body); font-weight: 500; }
.ticks { display: grid; gap: 0.6rem; margin-top: 0.5rem; }
.ticks li { display: flex; gap: 0.7rem; align-items: center; }
.ticks .dot { color: var(--charcoal); }
.plan__strip { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4.5rem; padding: 0 var(--tile-pad); background: var(--charcoal); color: var(--on-dark); font-weight: 700; text-decoration: none; transition: background-color var(--duration-micro) var(--ease); --focus: var(--mint); }
.plan__strip:hover { background: var(--charcoal-3); }
.plan__strip .icon { transition: transform var(--duration-micro) var(--ease); }
.plan__strip:hover .icon { transform: translateX(4px); }
.plan__strip:focus-visible { outline-offset: -6px; border-radius: 0 0 var(--radius-tile) var(--radius-tile); }
.net { background: var(--cream); border-radius: var(--radius-tile); padding: var(--tile-pad); display: grid; gap: 1.5rem; align-self: stretch; }
.net dl { display: grid; gap: 1.25rem; }
.net dl > div { display: grid; grid-template-columns: auto 1fr; gap: 0.25rem 1rem; }
.net dt { font-weight: 700; align-self: center; }
.net dd { grid-column: 2; color: var(--ink-2); }
.net .dot { grid-row: span 2; }
@media (min-width: 1024px) {
.price { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.price .plan--std { grid-column: 1 / span 5; }
.price .plan--man { grid-column: 6 / span 3; }
.price .net { grid-column: 9 / span 4; }
.price .plan--man .amount { flex-direction: column; align-items: flex-start; gap: 0.25rem; }
}
@media (min-width: 700px) and (max-width: 1023px) { .price { grid-template-columns: 1fr 1fr; } .price .net { grid-column: 1 / -1; } }
/* ---------- Reviews: two cards only ---------- */
.reviews { display: grid; gap: 1.25rem; }
.review { background: var(--cream); border-radius: var(--radius-tile); padding: clamp(1.5rem, 1rem + 1.5vw, 2.25rem); display: grid; gap: 1.25rem; align-content: start; }
.review blockquote { font-family: var(--font-display); font-variation-settings: "SOFT" 100, "opsz" 48; font-weight: 500; font-size: var(--fs-quote); line-height: 1.3; letter-spacing: -0.01em; }
.review--lead { background: var(--mustard); }
.review--lead .stars { color: var(--charcoal); }
.review--lead blockquote { font-size: var(--fs-quote-lead); line-height: 1.2; }
.review__by { display: flex; align-items: center; gap: 0.9rem; }
.review__by strong { display: block; }
.review__by span span { display: inline-flex; align-items: center; gap: 0.35rem; font-size: var(--fs-small); color: var(--ink-2); }
.review--lead .review__by span span { color: var(--charcoal); }
.review details summary { cursor: pointer; font-weight: 700; font-size: var(--fs-small); text-decoration: underline; text-underline-offset: 0.25em; min-height: var(--touch-target); display: inline-flex; align-items: center; list-style: none; }
.review details summary::-webkit-details-marker { display: none; }
.review details p { margin-top: 0.5rem; }
@media (min-width: 900px) {
.reviews { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; }
.reviews .review--lead { grid-column: 1 / span 6; grid-row: 1 / span 2; }
.reviews .review:nth-child(2) { grid-column: 7 / span 6; margin-top: 3rem; }
}
/* ---------- FAQ: filled tiles, the open one turns mint, one open at a time ---------- */
.faq__list { display: grid; gap: 0.6rem; }
.faq__list details { background: var(--cream); border-radius: var(--radius-faq); transition: background-color var(--duration-state) var(--ease); }
.faq__list details[open] { background: var(--mint); }
.faq__list summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4.5rem; padding: 1rem 1.25rem 1rem 1.75rem; cursor: pointer; font-weight: 700; font-size: 1.125rem; line-height: 1.35; list-style: none; border-radius: var(--radius-faq); }
.faq__list summary::-webkit-details-marker { display: none; }
.faq__list .pm { position: relative; flex: none; width: 2.5rem; height: 2.5rem; border-radius: var(--radius-circle); background: var(--sand); }
.faq__list details[open] .pm { background: var(--charcoal); }
.faq__list .pm::before, .faq__list .pm::after { content: ""; position: absolute; left: 50%; top: 50%; width: 1rem; height: 3px; margin: -1.5px 0 0 -0.5rem; border-radius: 3px; background: var(--charcoal); transition: rotate var(--duration-state) var(--ease); }
.faq__list details[open] .pm::before, .faq__list details[open] .pm::after { background: var(--mint); }
.faq__list .pm::after { rotate: 90deg; }
.faq__list details[open] .pm::after { rotate: 0deg; }
.faq__list details > p, .faq__list details > div { padding: 0 1.75rem 1.5rem; max-width: var(--measure-tight); }
.ask { display: flex; align-items: center; gap: 1rem; padding: 1.25rem; border-radius: var(--radius-tile); background: var(--cream); width: fit-content; max-width: 100%; flex-wrap: wrap; }
.ask strong { display: block; }
.ask span span { font-size: var(--fs-small); color: var(--ink-2); }
/* ---------- Coupon: round notches and a dotted perforation ---------- */
.coupon { position: relative; display: grid; border-radius: var(--radius-coupon); background: var(--charcoal); color: var(--on-dark); --notch: 1.75rem; --focus: var(--mint);
-webkit-mask: radial-gradient(circle var(--notch) at 42% 0, #0000 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle var(--notch) at 42% 100%, #0000 98%, #000) bottom / 100% 51% no-repeat;
mask: radial-gradient(circle var(--notch) at 42% 0, #0000 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle var(--notch) at 42% 100%, #0000 98%, #000) bottom / 100% 51% no-repeat; }
.coupon__left, .coupon__right { padding: clamp(2rem, 1.25rem + 3vw, 3.5rem); display: grid; gap: 1.25rem; align-content: start; }
.coupon .h2 { color: var(--on-dark); max-width: 12ch; }
.coupon .lead { color: var(--on-dark-2); }
.coupon a:not([class]) { color: var(--mint); }
.contact { display: grid; gap: 0.25rem; }
.contact a, .contact li > span { display: inline-flex; align-items: center; gap: 0.75rem; min-height: var(--touch-target); color: var(--on-dark); text-decoration: none; font-weight: 500; }
.contact a:hover { color: var(--mint); }
.contact .icon { color: var(--mint); }
.contact .hours { color: var(--on-dark-2); min-height: 0; }
.next { display: grid; gap: 0.75rem; color: var(--on-dark-2); }
.next li { display: flex; gap: 0.75rem; align-items: flex-start; }
.next strong { color: var(--on-dark); }
.next .dot { margin-top: 0.1rem; }
@media (min-width: 1024px) { .coupon { grid-template-columns: 42% 58%; } .coupon__right { border-left: var(--border-perforation) dotted var(--sand); } }
@media (max-width: 1023px) { .coupon { -webkit-mask: none; mask: none; } .coupon__right { border-top: var(--border-perforation) dotted var(--sand); } }
/* ---------- Dark form (inside the coupon or any dark field) ---------- */
.form { display: grid; gap: 1.25rem; }
.form__bar { display: flex; gap: 0.5rem; }
.form__bar span { flex: 1; height: 6px; border-radius: 6px; background: var(--charcoal-4); transition: background-color var(--duration-state) var(--ease); }
.form__bar span.on { background: var(--mint); }
.form__count { color: var(--on-dark-2); }
.form fieldset { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: 1rem; }
.form fieldset[hidden] { display: none; }
.form legend { padding: 0; margin-bottom: 1rem; }
.choices { display: grid; gap: 0.6rem; }
@media (min-width: 560px) { .choices { grid-template-columns: 1fr 1fr; } }
.choice { position: relative; display: grid; gap: 0.2rem; padding: 1rem 1.25rem; border-radius: var(--radius-md); background: var(--charcoal-2); color: var(--on-dark); cursor: pointer; transition: background-color var(--duration-micro) var(--ease), transform var(--duration-micro) var(--ease); }
.choice:hover { transform: translateY(-2px); background: var(--charcoal-3); }
.choice input { position: absolute; opacity: 0; inset: 0; cursor: pointer; margin: 0; }
.choice b { font-weight: 700; padding-right: 1.75rem; }
.choice small { font-size: var(--fs-small); color: var(--on-dark-2); }
.choice::after { content: ""; position: absolute; top: 1rem; right: 1rem; width: 1.1rem; height: 1.1rem; border-radius: var(--radius-circle); border: 2px solid var(--on-dark-2); transition: background-color var(--duration-micro) var(--ease), border-color var(--duration-micro) var(--ease); }
.choice:has(input:checked) { background: var(--mint); color: var(--charcoal); }
.choice:has(input:checked) small { color: var(--charcoal); }
.choice:has(input:checked)::after { background: var(--charcoal); border-color: var(--charcoal); }
.choice:has(input:focus-visible) { outline: var(--border-focus) solid var(--mint); outline-offset: 3px; }
.f { display: grid; gap: 0.4rem; }
.f label, .f legend { font-weight: 500; font-size: var(--fs-small); margin: 0; }
.opt { color: var(--on-dark-2); font-weight: 400; }
.f input, .f textarea, .f select { width: 100%; min-height: var(--button-height); padding: 0.75rem 1.25rem; border-radius: var(--radius-input); border: var(--border-control) solid transparent; background: var(--charcoal-2); color: var(--on-dark); font: inherit; transition: border-color var(--duration-micro) var(--ease); }
.f textarea { min-height: 6rem; resize: vertical; border-radius: var(--radius-textarea); }
.f input:focus, .f textarea:focus, .f select:focus { outline: none; border-color: var(--mint); }
.f input::placeholder, .f textarea::placeholder { color: var(--placeholder-dark); }
.f [aria-invalid="true"] { border-color: var(--error-border-dark); }
.err { color: var(--error-on-dark); font-size: var(--fs-small); font-weight: 500; }
.row2 { display: grid; gap: 1rem; }
@media (min-width: 560px) { .row2 { grid-template-columns: 1fr 1fr; } }
.chips, .seg { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chips label, .seg label { position: relative; cursor: pointer; }
.chips input, .seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chips span, .seg span { display: inline-flex; align-items: center; min-height: var(--touch-target); padding: 0 1.1rem; border-radius: var(--radius-pill); background: var(--charcoal-2); color: var(--on-dark); font-size: var(--fs-small); font-weight: 500; transition: background-color var(--duration-micro) var(--ease), color var(--duration-micro) var(--ease); }
.chips input:checked + span, .seg input:checked + span { background: var(--mint); color: var(--charcoal); }
.chips input:focus-visible + span, .seg input:focus-visible + span { outline: var(--border-focus) solid var(--mint); outline-offset: 2px; }
.check { display: flex; gap: 0.75rem; align-items: flex-start; color: var(--on-dark-2); cursor: pointer; }
.check input { width: 1.25rem; height: 1.25rem; accent-color: var(--mint); margin-top: 0.1rem; flex: none; }
.privacy { color: var(--on-dark-2); }
.privacy a { color: var(--mint); }
.form__nav { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: space-between; margin-top: 0.5rem; }
.form__nav [data-next], .form__nav [data-submit] { margin-left: auto; }
.promise-line { display: flex; align-items: center; gap: 0.6rem; color: var(--on-dark-2); }
.promise-line .icon { color: var(--mint); }
.done { text-align: center; display: grid; justify-items: center; gap: 0.75rem; padding-block: 2rem; }
.done .dot { animation: pop 420ms var(--ease); }
.done .dot .icon { width: 4rem; height: 4rem; }
.done p { color: var(--on-dark-2); }
@keyframes pop { 0% { scale: 0.4; opacity: 0; } 60% { scale: 1.12; opacity: 1; } 100% { scale: 1; } }
/* ---------- Footer: the dark rounded field ---------- */
.foot { padding-block: clamp(4rem, 3rem + 4vw, 6rem) clamp(2.5rem, 2rem + 2vw, 3.5rem); margin-bottom: var(--field-inset); }
.foot__cols { display: grid; gap: 2.5rem 2rem; }
.foot__about { font-family: var(--font-display); font-variation-settings: "SOFT" 100, "opsz" 48; font-weight: 500; font-size: var(--fs-about); line-height: 1.2; letter-spacing: -0.01em; color: var(--on-dark); max-width: 16ch; text-wrap: balance; }
.foot__intro .btn { margin-top: 1.5rem; }
.foot__cols h2 { font-family: var(--font-display); font-variation-settings: "SOFT" 100, "opsz" 36; font-weight: 600; font-size: var(--fs-h3); color: var(--mint); margin-bottom: 0.75rem; }
.foot__cols ul { display: grid; list-style: none; padding: 0; gap: 0.15rem; }
.foot__cols a { display: inline-flex; align-items: center; gap: 0.6rem; min-height: var(--touch-target); color: var(--on-dark); text-decoration: none; transition: color var(--duration-micro) var(--ease); }
.foot__cols a:hover { color: var(--mint); }
.foot__cols .icon { color: var(--mint); }
.foot__cols .btn .icon { color: inherit; }
.foot__cols a.btn--primary, .field .foot__cols a.btn--primary { color: var(--on-primary); }
.foot__cols a.btn--primary:hover, .field .foot__cols a.btn--primary:hover { color: var(--on-primary); }
.foot__legal { margin-top: clamp(2.5rem, 2rem + 2vw, 4rem); color: var(--on-dark-2); max-width: 52rem; }
@media (min-width: 700px) { .foot__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } .foot__intro { grid-column: 1 / -1; } }
@media (min-width: 1100px) { .foot__cols { grid-template-columns: 1.6fr 1fr 1.2fr 1fr; } .foot__intro { grid-column: auto; } }
/* ---------- Motion ---------- */
/* Parts settle in on load from a visible state; nothing waits on scroll */
.rise { animation: rise var(--duration-enter) var(--ease) both; }
.rise-2 { animation-delay: 90ms; } .rise-3 { animation-delay: 180ms; } .rise-4 { animation-delay: 270ms; }
@keyframes rise { from { translate: 0 20px; } to { translate: 0 0; } }
/* Scroll-driven drift: translate only, never an opacity-0 resting state. Without support, parts sit at rest. */
@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) {
.drift { animation: drift linear both; animation-timeline: view(); animation-range: entry 0% entry 60%; }
@keyframes drift { from { translate: 0 28px; } to { translate: 0 0; } }
}
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation: none !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
.btn:hover, .choice:hover { transform: none; }
}
/* ---------- Documentation-only helpers (ds-*): previews use these; never ship them ---------- */
.ds { padding: 24px; display: grid; gap: 24px; }
.ds > *, .ds section { min-width: 0; }
.ds-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.ds-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(var(--ds-min, 240px), 1fr)); }
.ds-label { font: 700 0.75rem/1.3 var(--font-body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.ds-note { font-size: var(--fs-small); color: var(--ink-2); max-width: 60ch; }
.ds-dark { background: var(--charcoal); color: var(--on-dark); border-radius: var(--radius-tile); padding: 24px; --focus: var(--mint); }
.ds-dark .ds-label { color: var(--on-dark-2); }
.ds-do, .ds-dont { display: grid; gap: 8px; padding: 16px; border-radius: var(--radius-md); background: var(--cream); }
.ds-do > .ds-label { color: var(--success-ink); }
.ds-dont > .ds-label { color: var(--error-ink); }
.ds-frame { border-radius: var(--radius-md); overflow: hidden; background: var(--sand); outline: 2px dashed var(--sand-2); outline-offset: 0; position: relative; }
.ds-sample { display: inline-block; padding: 2px 10px; border-radius: var(--radius-pill); background: var(--warning-tint); color: var(--warning-ink); font: 700 0.75rem/1.6 var(--font-body); letter-spacing: 0.04em; text-transform: uppercase; }
.ds-state { pointer-events: none; }
/* ==================== Navigation ==================== */
/* ---------- Header variants (extend the base .top) ---------- */
.top .btn.hdr__cta { min-height: var(--button-height); padding: 0 1.6rem; }
.top .nav a.is-hover { border-color: var(--mint); }
.top .is-focus { outline: var(--border-focus) solid var(--focus); outline-offset: 3px; border-radius: var(--radius-sm); }
.top .top__phone.is-hover { color: var(--mint-ink); }
/* Secondary: a second row of in-page links under the main bar */
.hdr__sub { display: flex; gap: 0.5rem; overflow-x: auto; padding-bottom: 0.75rem; scrollbar-width: none; }
.hdr__sub::-webkit-scrollbar { display: none; }
/* Minimal: logo and phone only (checkout-style or campaign pages) */
.hdr--minimal .top__actions { gap: 0.25rem; }
/* Transparent over media: no fill and no grain at the top; becomes the normal scrolled bar */
.hdr--transparent { background: transparent; }
.hdr--transparent::before { opacity: 0; }
.hdr--transparent.hdr--on-dark { color: var(--on-dark); --focus: var(--mint); }
.hdr--transparent.hdr--on-dark .brand,
.hdr--transparent.hdr--on-dark .nav a,
.hdr--transparent.hdr--on-dark .top__phone,
.hdr--transparent.hdr--on-dark .hdr__menu { color: var(--on-dark); border-color: transparent; }
.hdr--transparent.hdr--on-dark .hdr__menu { border-color: var(--on-dark); }
.hdr--transparent.hdr--on-dark .nav a:hover { border-color: var(--mint); }
.hdr--transparent.hdr--on-dark .top__phone:hover { color: var(--mint); }
.hdr--transparent.is-scrolled { --focus: var(--mint-ink); color: var(--charcoal); }
.hdr--transparent.is-scrolled::before { opacity: calc(var(--grain-opacity) * 0.5); }
.hdr--transparent.is-scrolled .brand,
.hdr--transparent.is-scrolled .nav a,
.hdr--transparent.is-scrolled .top__phone,
.hdr--transparent.is-scrolled .hdr__menu { color: var(--charcoal); }
.hdr--transparent.is-scrolled .hdr__menu { border-color: var(--charcoal); }
/* Fixed: pinned to the viewport; the page must add padding-top: var(--header-height) */
.hdr--fixed { position: fixed; top: env(safe-area-inset-top, 0px); left: 0; right: 0; }
.hdr-offset { padding-top: var(--header-height); }
/* Doc frames for header demos: transform contains position: fixed */
.hdr-demo { position: relative; transform: translateZ(0); overflow: hidden; border-radius: var(--radius-md); background: var(--sand); }
.hdr-demo--scroll { height: 22rem; overflow: auto; overscroll-behavior: contain; }
.hdr-demo__body { padding: 2rem var(--gutter) 4rem; display: grid; gap: 1rem; }
.hdr-demo__block { height: 9rem; border-radius: var(--radius-tile); background: var(--cream); }
.hdr-demo__block--sand2 { background: var(--sand-2); }
.hdr-demo__media { position: relative; min-height: 20rem; margin-top: calc(-1 * var(--header-height)); padding-top: var(--header-height); background: var(--charcoal); color: var(--on-dark); overflow: clip; display: grid; align-items: center; }
.hdr-demo__media .wrap { position: relative; z-index: 1; padding-block: 3rem; }
/* ---------- Mobile navigation bar ---------- */
.hdr__menu { display: inline-flex; align-items: center; gap: 0.5rem; min-height: var(--touch-target); padding: 0 1rem; border-radius: var(--radius-pill); border: var(--border-control) solid var(--charcoal); background: transparent; color: var(--charcoal); font: 700 1rem/1 var(--font-body); cursor: pointer; transition: background-color var(--duration-micro) var(--ease), transform var(--duration-micro) var(--ease); }
.hdr__menu:hover, .hdr__menu.is-hover { background: var(--cream); }
.hdr__menu:active, .hdr__menu.is-active { transform: scale(0.97); }
.hdr__menu[aria-expanded="true"] { background: var(--charcoal); color: var(--on-dark); }
@media (min-width: 1024px) { .hdr__menu { display: none; } }
@media (max-width: 1023px) {
.top.hdr--menu .top__actions { gap: 0.5rem; }
.top.hdr--menu .btn--primary { display: none; }
}
@media (min-width: 768px) and (max-width: 1023px) { .top.hdr--menu .btn--primary { display: inline-flex; } }
@media (max-width: 479px) { .top.hdr--menu .top__wa { display: none; } }
@media (max-width: 400px) { .top.hdr--menu .brand .logo { width: 6.75rem; } .top.hdr--menu .top__phone { font-size: 1rem; } .hdr__menu { padding: 0 0.85rem; } }
/* ---------- Mobile menu sheet ---------- */
.menu { position: fixed; inset: 0; z-index: var(--z-overlay); display: grid; grid-template-rows: auto 1fr auto; background: var(--sand); color: var(--charcoal); overflow-y: auto; box-shadow: var(--shadow-floating); animation: menu-in var(--duration-state-slow) var(--ease) both; }
.menu[hidden] { display: none; }
.menu::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: var(--noise); background-size: var(--grain-size); opacity: var(--grain-opacity); pointer-events: none; }
.menu__top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: var(--header-height); }
.menu__close { display: inline-flex; align-items: center; gap: 0.5rem; min-height: var(--touch-target); padding: 0 1rem; border-radius: var(--radius-pill); border: var(--border-control) solid var(--charcoal); background: var(--charcoal); color: var(--on-dark); font: 700 1rem/1 var(--font-body); cursor: pointer; }
.menu__close:hover { background: var(--charcoal-3); border-color: var(--charcoal-3); }
.menu__links { display: grid; align-content: start; gap: 0.25rem; padding-block: 1.5rem 2rem; }
.menu__links a { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4rem; color: var(--charcoal); text-decoration: none; font-family: var(--font-display); font-variation-settings: "SOFT" 100, "opsz" 96; font-weight: 600; font-size: var(--fs-h2); line-height: 1.04; letter-spacing: -0.025em; }
.menu__links a .icon { width: 1.75rem; height: 1.75rem; transition: transform var(--duration-micro) var(--ease); }
.menu__links a:hover .icon { transform: translateX(4px); }
.menu__links a:hover, .menu__links a[aria-current="page"] { color: var(--mint-ink); }
.menu__foot { display: grid; gap: 1rem; padding-block: 1.5rem max(1.5rem, env(safe-area-inset-bottom, 0px)); }
.menu__phone { display: inline-flex; align-items: center; min-height: var(--touch-target); color: var(--charcoal); text-decoration: none; font-family: var(--font-display); font-variation-settings: "SOFT" 100, "opsz" 36; font-weight: 600; font-size: var(--fs-h3); }
.menu__row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; }
.menu__wa { display: inline-flex; align-items: center; gap: 0.6rem; min-height: var(--touch-target); color: var(--charcoal); font-weight: 700; text-decoration: none; }
.menu__wa svg { width: 1.6rem; height: 1.6rem; }
.menu__foot .btn { width: 100%; }
.menu__hours { color: var(--ink-2); font-size: var(--fs-small); }
.menu--static { position: relative; inset: auto; z-index: auto; min-height: 36rem; box-shadow: none; animation: none; border-radius: var(--radius-md); }
@keyframes menu-in { from { translate: 0 -1.5rem; } to { translate: 0 0; } }
html.sk-locked { overflow: hidden; }
/* ---------- Dropdown and mega menu ---------- */
.dropdown { position: relative; }
.dropdown__trigger { display: inline-flex; align-items: center; gap: 0.35rem; min-height: var(--touch-target); padding: 0.5rem 0; border: 0; border-bottom: var(--border-focus) solid transparent; background: none; color: var(--charcoal); font-family: var(--font-display); font-variation-settings: "SOFT" 100, "opsz" 24; font-weight: 500; font-size: 1.1875rem; cursor: pointer; transition: border-color var(--duration-micro) var(--ease); }
.dropdown__trigger:hover, .dropdown__trigger.is-hover, .dropdown__trigger[aria-expanded="true"] { border-color: var(--mint); }
.dropdown__trigger .icon { width: 1rem; height: 1rem; transition: rotate var(--duration-state) var(--ease); }
.dropdown__trigger[aria-expanded="true"] .icon { rotate: 180deg; }
.dropdown__panel { position: absolute; top: calc(100% + 0.75rem); left: -1rem; z-index: var(--z-overlay); min-width: 17rem; padding: 0.5rem; display: grid; gap: 0.15rem; background: var(--cream); border-radius: var(--radius-md); box-shadow: var(--shadow-elevated); animation: drop-in var(--duration-state) var(--ease) both; }
.dropdown__panel[hidden] { display: none; }
.dropdown__panel--end { left: auto; right: -1rem; }
.dropdown__item { display: grid; gap: 0.1rem; min-height: var(--touch-target); padding: 0.65rem 1rem; border-radius: 18px; color: var(--charcoal); text-decoration: none; font-weight: 700; transition: background-color var(--duration-micro) var(--ease); }
.dropdown__item small { font-weight: 400; font-size: var(--fs-small); color: var(--ink-2); }
.dropdown__item:hover, .dropdown__item.is-hover { background: var(--sand-2); }
.dropdown__item[aria-current="page"] { background: var(--mint); }
.dropdown__item[aria-current="page"] small { color: var(--charcoal); }
.dropdown__static { position: relative; display: inline-grid; padding-bottom: 1rem; }
.dropdown__static .dropdown__panel { position: relative; top: auto; left: auto; margin-top: 0.75rem; animation: none; }
@keyframes drop-in { from { translate: 0 -0.5rem; } to { translate: 0 0; } }
.mega { position: absolute; top: calc(100% + 0.75rem); left: 50%; translate: -50% 0; z-index: var(--z-overlay); width: min(56rem, calc(100vw - 2 * var(--gutter))); display: grid; gap: 1.5rem; padding: 1.5rem; background: var(--cream); border-radius: var(--radius-tile); box-shadow: var(--shadow-elevated); animation: drop-in var(--duration-state) var(--ease) both; }
.mega[hidden] { display: none; }
.mega__col { display: grid; gap: 0.15rem; align-content: start; }
.mega__head { font: 600 var(--fs-h3)/1.2 var(--font-display); font-variation-settings: "SOFT" 100, "opsz" 36; letter-spacing: -0.01em; padding: 0.25rem 1rem 0.5rem; }
.mega__promo { display: grid; gap: 1rem; align-content: start; padding: 1.5rem; border-radius: var(--radius-md); background: var(--mint); }
.mega__promo .h4 { color: var(--charcoal); }
.mega--static { position: relative; top: auto; left: auto; translate: none; width: 100%; margin-top: 0.75rem; animation: none; }
@media (min-width: 768px) { .mega { grid-template-columns: 1fr 1fr 1.1fr; } }
/* ---------- Navigation links: secondary pills, utility, sidebar ---------- */
.navlinks { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.navlinks a { display: inline-flex; align-items: center; gap: 0.5rem; min-height: var(--touch-target); padding: 0 1.1rem; border-radius: var(--radius-pill); color: var(--charcoal); text-decoration: none; font-weight: 500; white-space: nowrap; transition: background-color var(--duration-micro) var(--ease), color var(--duration-micro) var(--ease); }
.navlinks a:hover, .navlinks a.is-hover { background: var(--cream); }
.navlinks a[aria-current] { background: var(--charcoal); color: var(--on-dark); --focus: var(--mint-ink); }
.navlinks--dark a { color: var(--on-dark); }
.navlinks--dark a:hover, .navlinks--dark a.is-hover { background: var(--charcoal-2); }
.navlinks--dark a[aria-current] { background: var(--mint); color: var(--charcoal); }
.nav-demo { display: flex; flex-wrap: wrap; gap: 2rem; }
.nav-demo a { color: var(--charcoal); text-decoration: none; font-family: var(--font-display); font-variation-settings: "SOFT" 100, "opsz" 24; font-weight: 500; font-size: 1.1875rem; padding-block: 0.5rem; border-bottom: var(--border-focus) solid transparent; transition: border-color var(--duration-micro) var(--ease); }
.nav-demo a:hover, .nav-demo a.is-hover, .nav-demo a[aria-current="page"] { border-color: var(--mint); }
.nav-demo a.is-focus { outline: var(--border-focus) solid var(--focus); outline-offset: 3px; border-radius: var(--radius-sm); }
.utility { background: var(--charcoal); color: var(--on-dark-2); font-size: var(--fs-small); --focus: var(--mint); }
.utility__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 1.5rem; min-height: var(--touch-target); }
.utility ul { display: flex; flex-wrap: wrap; gap: 0 1.5rem; }
.utility a, .utility li > span { display: inline-flex; align-items: center; gap: 0.5rem; min-height: var(--touch-target); color: var(--on-dark); text-decoration: none; }
.utility a:hover { color: var(--mint); }
.utility .icon { color: var(--mint); width: 1.1rem; height: 1.1rem; }
@media (max-width: 559px) { .utility__hours { display: none !important; } }
.sidenav { display: grid; gap: 0.15rem; align-content: start; }
.sidenav__head { font: 700 1rem/1.35 var(--font-body); letter-spacing: 0.01em; padding: 0 1rem 0.5rem; }
.sidenav a { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; min-height: var(--touch-target); padding: 0.5rem 1rem; border-radius: 18px; color: var(--charcoal); text-decoration: none; font-weight: 500; transition: background-color var(--duration-micro) var(--ease); }
.sidenav a:hover, .sidenav a.is-hover { background: var(--sand-2); }
.sidenav a[aria-current] { background: var(--cream); font-weight: 700; }
.sidenav a[aria-current]::after { content: ""; flex: none; width: 0.6rem; height: 0.6rem; border-radius: var(--radius-circle); background: var(--mint-ink); }
/* ---------- Breadcrumbs and back navigation ---------- */
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0 0.35rem; list-style: none; padding: 0; margin: 0; font-size: var(--fs-small); }
.crumbs li { display: inline-flex; align-items: center; gap: 0.35rem; }
.crumbs li + li::before { content: ""; width: 0.45rem; height: 0.45rem; border-right: 2px solid var(--text-muted); border-top: 2px solid var(--text-muted); rotate: 45deg; margin-right: 0.35rem; }
.crumbs a { display: inline-flex; align-items: center; min-height: var(--touch-target); color: var(--mint-ink); font-weight: 500; }
.crumbs a:hover { text-decoration-thickness: 3px; }
.crumbs [aria-current="page"] { color: var(--ink-2); }
.on-dark .crumbs a, .field .crumbs a { color: var(--mint); }
.on-dark .crumbs [aria-current="page"], .field .crumbs [aria-current="page"] { color: var(--on-dark-2); }
@media (max-width: 559px) { .crumbs--collapse li:not(:nth-last-child(2)) { display: none; } .crumbs--collapse li:nth-last-child(2)::before { display: none; } .crumbs--collapse li:nth-last-child(2) a::before { content: ""; width: 0.45rem; height: 0.45rem; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; rotate: 45deg; margin-right: 0.6rem; } }
.back { display: inline-flex; align-items: center; gap: 0.5rem; min-height: var(--touch-target); color: var(--charcoal); font-weight: 700; text-decoration: underline; text-decoration-color: var(--mint); text-decoration-thickness: 3px; text-underline-offset: 0.3em; transition: text-underline-offset var(--duration-micro) var(--ease); }
.back .icon { transition: transform var(--duration-micro) var(--ease); }
.back:hover, .back.is-hover { text-underline-offset: 0.45em; }
.back:hover .icon, .back.is-hover .icon { transform: translateX(-4px); }
/* ---------- Pagination ---------- */
.pager { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.pager ol { display: flex; flex-wrap: wrap; gap: 0.35rem; list-style: none; padding: 0; margin: 0; }
.pager__num { display: inline-grid; place-items: center; min-width: var(--touch-target); height: var(--touch-target); padding: 0 0.5rem; border-radius: var(--radius-pill); color: var(--charcoal); text-decoration: none; font-weight: 700; font-variant-numeric: tabular-nums; transition: background-color var(--duration-micro) var(--ease); }
.pager__num:hover, .pager__num.is-hover { background: var(--cream); }
.pager__num[aria-current="page"] { background: var(--mint); }
.pager__gap { display: inline-grid; place-items: center; min-width: 1.5rem; height: var(--touch-target); color: var(--text-muted); }
.pager__step { display: inline-flex; align-items: center; gap: 0.5rem; min-height: var(--touch-target); padding: 0 1.1rem; border-radius: var(--radius-pill); border: var(--border-control) solid var(--charcoal); color: var(--charcoal); text-decoration: none; font-weight: 700; transition: background-color var(--duration-micro) var(--ease), transform var(--duration-micro) var(--ease); }
.pager__step:hover, .pager__step.is-hover { background: var(--cream); transform: translateY(-2px); }
.pager__step[aria-disabled="true"] { border-color: var(--line); color: var(--text-muted); pointer-events: none; }
.pager__status { font-size: var(--fs-small); color: var(--ink-2); display: none; }
@media (max-width: 559px) {
.pager ol { display: none; }
.pager__status { display: inline; margin-inline: auto; }
.pager { width: 100%; }
}
/* ---------- Announcement bar ---------- */
.announce { display: flex; align-items: center; gap: 0.75rem; padding: 0.35rem 0.35rem 0.35rem 1.25rem; border-radius: var(--radius-pill); background: var(--charcoal); color: var(--on-dark); --focus: var(--mint); }
.announce[hidden] { display: none; }
.announce p { flex: 1; font-size: var(--fs-small); line-height: 1.4; padding-block: 0.5rem; }
.announce a { color: var(--mint); font-weight: 700; }
.announce__close { flex: none; display: inline-grid; place-items: center; width: var(--touch-target); height: var(--touch-target); border: 0; border-radius: var(--radius-circle); background: transparent; color: inherit; cursor: pointer; transition: background-color var(--duration-micro) var(--ease); }
.announce__close:hover { background: var(--charcoal-2); }
.announce--mint { background: var(--mint); color: var(--charcoal); --focus: var(--mint-ink); }
.announce--mint a { color: var(--charcoal); }
.announce--mint .announce__close:hover { background: var(--mint-hover); }
.announce--cream { background: var(--cream); color: var(--charcoal); --focus: var(--mint-ink); }
.announce--cream a { color: var(--mint-ink); }
.announce--cream .announce__close:hover { background: var(--sand-2); }
.announce-wrap { padding-top: 0.5rem; }
@media (max-width: 559px) { .announce { border-radius: var(--radius-md); align-items: flex-start; } }
@media (prefers-reduced-motion: reduce) { .menu, .dropdown__panel, .mega { animation: none; } }
.hdr-demo__over { position: absolute; inset: 0 0 auto; }
.hdr-demo--tall { min-height: 27rem; overflow: visible; }
.mega__promo .btn { justify-self: start; }
@media (min-width: 1024px) { .dropdown--mega { position: static; } .dropdown--mega .mega { left: 50%; top: calc(var(--header-height) - 0.25rem); } .nav:has(.dropdown) { align-items: center; } }
.menu > .wrap { width: 100%; }
.dropdown__item .ds-sample { justify-self: start; }
.utility ul { list-style: none; padding: 0; margin: 0; }
@media (max-width: 559px) { .pager { flex-wrap: nowrap; } }
@media (max-width: 419px) { .pager__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .pager__step { padding: 0; width: var(--touch-target); justify-content: center; } }
/* ==================== Footer (extends the base .foot dark field) ==================== */
.foot { --focus: var(--mint); }
.foot a:focus-visible { outline-color: var(--mint); }
.foot-logo { display: inline-flex; color: var(--on-dark); min-height: var(--touch-target); align-items: center; }
.foot-logo .logo { width: 8.5rem; height: auto; }
.foot-list { display: grid; gap: 0.15rem; list-style: none; padding: 0; margin: 0; }
.foot-list li > span, .foot-list address { display: inline-flex; align-items: flex-start; gap: 0.6rem; min-height: var(--touch-target); padding-top: 0.55rem; color: var(--on-dark); font-style: normal; }
.foot-list .icon { color: var(--mint); margin-top: 0.15em; }
.foot-list .foot-muted { color: var(--on-dark-2); }
.foot-hours { display: grid; grid-template-columns: auto 1fr; gap: 0.25rem 1rem; color: var(--on-dark); }
.foot-hours dt { color: var(--on-dark-2); }
/* Bottom bar: legal links, copyright, back to top */
.foot-base { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; margin-top: clamp(2.5rem, 2rem + 2vw, 4rem); padding-top: 1.5rem; }
.foot-base .foot__legal { margin-top: 0; }
.foot-legal-links { display: flex; flex-wrap: wrap; gap: 0 1.5rem; list-style: none; padding: 0; margin: 0; }
.foot-legal-links a { display: inline-flex; align-items: center; min-height: var(--touch-target); color: var(--on-dark); text-decoration: underline; text-decoration-color: var(--charcoal-line); text-underline-offset: 0.3em; text-decoration-thickness: 2px; transition: text-decoration-color var(--duration-micro) var(--ease); }
.foot-legal-links a:hover { text-decoration-color: var(--mint); }
.foot-copy { color: var(--on-dark-2); font-size: var(--fs-small); }
/* Back to top: a pill, outline on dark */
.totop { display: inline-flex; align-items: center; gap: 0.5rem; min-height: var(--touch-target); padding: 0 1.1rem; border-radius: var(--radius-pill); border: var(--border-control) solid var(--charcoal-line); background: transparent; color: var(--on-dark); font: 700 1rem/1 var(--font-body); text-decoration: none; cursor: pointer; transition: background-color var(--duration-micro) var(--ease), transform var(--duration-micro) var(--ease); }
.totop:hover, .totop.is-hover { background: var(--charcoal-2); }
.totop .icon { transition: transform var(--duration-micro) var(--ease); }
.totop:hover .icon, .totop.is-hover .icon { transform: translateY(-3px); }
.totop:active { transform: scale(0.97); }
/* Social links: bare icons, never in circles */
.social { display: flex; flex-wrap: wrap; gap: 0.25rem; list-style: none; padding: 0; margin: 0; }
.social a { display: inline-grid; place-items: center; width: var(--touch-target); height: var(--touch-target); color: var(--on-dark); transition: color var(--duration-micro) var(--ease), transform var(--duration-micro) var(--ease); }
.social a:hover { color: var(--mint); transform: translateY(-2px); }
.social .icon { width: 1.6rem; height: 1.6rem; }
/* Trust badges: real claims only, icon plus words */
.badges { display: flex; flex-wrap: wrap; gap: 1rem 2rem; list-style: none; padding: 0; margin: 0; }
.badges li { display: flex; align-items: center; gap: 0.75rem; font-size: var(--fs-small); line-height: 1.35; color: var(--on-dark-2); }
.badges strong { display: block; color: var(--on-dark); }
.badges .icon { width: 1.6rem; height: 1.6rem; color: var(--mint); }
.badges .stars .icon { width: 1rem; height: 1rem; color: var(--mustard); }
.badges--light li { color: var(--ink-2); }
.badges--light strong { color: var(--charcoal); }
.badges--light .icon { color: var(--mint-ink); }
.foot-badges { margin-top: clamp(2rem, 1.5rem + 2vw, 3rem); }
/* Minimal footer: one row */
.foot--minimal { padding-block: 2rem; }
.foot-min { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; }
/* Large editorial footer: a big statement, then the columns */
.foot-ed { display: grid; gap: 2rem; padding-bottom: clamp(2.5rem, 2rem + 3vw, 4.5rem); margin-bottom: clamp(2.5rem, 2rem + 3vw, 4.5rem); }
.foot-ed__line { font-family: var(--font-display); font-variation-settings: "SOFT" 100, "opsz" 96; font-weight: 600; font-size: var(--fs-h1); line-height: 1.04; letter-spacing: -0.025em; color: var(--on-dark); max-width: 14ch; text-wrap: balance; }
.foot-ed__line em { font-style: normal; color: var(--mint); }
.foot-ed__phone { font-family: var(--font-display); font-variation-settings: "SOFT" 100, "opsz" 48; font-weight: 500; font-size: var(--fs-quote); color: var(--on-dark); text-decoration: none; display: inline-flex; align-items: center; min-height: var(--touch-target); }
.foot-ed__phone:hover { color: var(--mint); }
@media (min-width: 1024px) { .foot-ed { grid-template-columns: 1fr auto; align-items: end; } }
/* Newsletter footer: the signup sits on a raised dark tile */
.foot-news { display: grid; gap: 1.25rem; padding: var(--tile-pad); border-radius: var(--radius-tile); background: var(--charcoal-2); margin-bottom: clamp(2.5rem, 2rem + 3vw, 4rem); }
.foot-news .h3 { color: var(--on-dark); }
.foot-news p { color: var(--on-dark-2); }
.foot-news__form { display: grid; gap: 0.75rem; }
.foot-news .f input { background: var(--charcoal); }
@media (min-width: 768px) {
.foot-news { grid-template-columns: 1fr 1.1fr; align-items: center; }
.foot-news__form { grid-template-columns: 1fr auto; align-items: end; }
.foot-news__form .err, .foot-news__form .foot-news__note { grid-column: 1 / -1; }
}
/* Multi-column: five columns at wide widths */
@media (min-width: 1100px) { .foot__cols--5 { grid-template-columns: 1.5fr 1fr 1fr 1.2fr 1fr; } }
.foot-muted { color: var(--on-dark-2); }
.foot-news__note a { color: var(--mint); }
.foot-min .foot-legal-links { margin-right: auto; }
.badges li > span:last-child { display: block; }
/* Base .field a:not([class]) would turn footer links mint; footer links stay on-dark and turn mint on hover */
.field .foot__cols a, .field .foot-list a, .field .foot-legal-links a { color: var(--on-dark); }
.field .foot__cols a:hover, .field .foot-list a:hover, .field .foot-legal-links a:hover { color: var(--mint); }
/* ================= Actions: buttons and interactive elements ================= */
/* Glyph masks: shapes only, the colour comes from a token as background */
:root {
--mask-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z'/%3E%3C/svg%3E");
--mask-caret: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E");
--mask-dash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M228,128a12,12,0,0,1-12,12H40a12,12,0,0,1,0-24H216A12,12,0,0,1,228,128Z'/%3E%3C/svg%3E");
}
/* ---------- Button variants (base owns .btn, .btn--primary, .btn--ghost) ---------- */
.btn { position: relative; }
.btn--secondary { background: var(--charcoal); border-color: var(--charcoal); color: var(--on-dark); }
.btn--secondary:hover, .btn--secondary.is-hover { background: var(--charcoal-3); border-color: var(--charcoal-3); }
.btn--outline:hover, .btn--outline.is-hover, .btn--ghost.is-hover { background: var(--cream); }
.btn--tertiary { background: var(--cream); border-color: var(--cream); }
.btn--tertiary:hover, .btn--tertiary.is-hover { background: var(--sand-2); border-color: var(--sand-2); }
.btn--text { min-height: var(--touch-target); padding: 0 0.25rem; border-color: transparent; border-radius: var(--radius-sm); text-decoration: underline; text-decoration-color: var(--mint); text-decoration-thickness: 3px; text-underline-offset: 0.3em; transition: text-underline-offset var(--duration-micro) var(--ease), color var(--duration-micro) var(--ease); }
.btn--text:hover, .btn--text.is-hover { transform: none; text-underline-offset: 0.45em; }
.btn--primary.is-hover { background: var(--mint-hover); border-color: var(--mint-hover); }
.btn.is-hover { transform: translateY(-2px); }
.btn.is-active, .btn--text.is-active { transform: translateY(1px) scale(0.98); }
.btn.is-hover .icon:last-child:not(:first-child) { transform: translateX(4px); }
.btn.is-focus { outline: var(--border-focus) solid var(--focus); outline-offset: 3px; }
.btn--sm { min-height: var(--touch-target); padding: 0 1.15rem; font-size: 0.9375rem; gap: 0.5em; }
.btn--lg { min-height: 3.75rem; padding: 0 2rem; font-size: 1.1875rem; }
.btn--block { display: flex; width: 100%; }
.btn--icon-only { padding: 0; width: var(--button-height); }
/* Disabled: one quiet look for every variant. Keep the label; never rely on opacity alone. */
.btn:disabled, .btn[aria-disabled="true"]:not([aria-busy="true"]) { background: var(--sand-2); border-color: var(--sand-2); color: var(--text-muted); cursor: not-allowed; transform: none; text-decoration-color: transparent; }
.btn--text:disabled, .btn--text[aria-disabled="true"]:not([aria-busy="true"]) { background: transparent; border-color: transparent; }
.btn:disabled .icon, .btn[aria-disabled="true"] .icon { transform: none !important; }
/* Loading: the label stays in the DOM for screen readers; a spinner sits over it, so the width never jumps */
.btn[aria-busy="true"] { color: transparent !important; cursor: progress; pointer-events: none; transform: none; text-decoration-color: transparent; }
.btn[aria-busy="true"]::after { content: ""; position: absolute; inset: 0; margin: auto; width: 1.25rem; height: 1.25rem; border-radius: var(--radius-circle); border: 3px solid var(--spin, var(--charcoal)); border-right-color: transparent; animation: spin 700ms linear infinite; }
.btn--secondary[aria-busy="true"] { --spin: var(--on-dark); }
@keyframes spin { to { rotate: 360deg; } }
/* On dark (fields, coupon, footer, dark tiles) */
:is(.field, .on-dark, .tile--dark, .ds-dark, .coupon) .btn:not(.btn--primary) { border-color: var(--on-dark); color: var(--on-dark); }
:is(.field, .on-dark, .tile--dark, .ds-dark, .coupon) .btn.btn--outline:hover, :is(.field, .on-dark, .tile--dark, .ds-dark, .coupon) .btn.btn--outline.is-hover { background: var(--charcoal-2); }
:is(.field, .on-dark, .tile--dark, .ds-dark, .coupon) .btn.btn--ghost { border-color: var(--charcoal-line); }
:is(.field, .on-dark, .tile--dark, .ds-dark, .coupon) .btn.btn--ghost.is-hover { background: var(--charcoal-2); }
:is(.field, .on-dark, .tile--dark, .ds-dark, .coupon) .btn.btn--secondary { background: var(--cream); border-color: var(--cream); color: var(--charcoal); --spin: var(--charcoal); }
:is(.field, .on-dark, .tile--dark, .ds-dark, .coupon) .btn.btn--secondary:hover, :is(.field, .on-dark, .tile--dark, .ds-dark, .coupon) .btn.btn--secondary.is-hover { background: var(--sand); border-color: var(--sand); }
:is(.field, .on-dark, .tile--dark, .ds-dark, .coupon) .btn.btn--tertiary { background: var(--charcoal-2); border-color: var(--charcoal-2); }
:is(.field, .on-dark, .tile--dark, .ds-dark, .coupon) .btn.btn--tertiary:hover, :is(.field, .on-dark, .tile--dark, .ds-dark, .coupon) .btn.btn--tertiary.is-hover { background: var(--charcoal-3); border-color: var(--charcoal-3); }
:is(.field, .on-dark, .tile--dark, .ds-dark, .coupon) .btn.btn--text { border-color: transparent; }
:is(.field, .on-dark, .tile--dark, .ds-dark, .coupon) .btn:not(.btn--primary) { --spin: var(--on-dark); }
:is(.field, .on-dark, .tile--dark, .ds-dark, .coupon) .btn:disabled, :is(.field, .on-dark, .tile--dark, .ds-dark, .coupon) .btn[aria-disabled="true"]:not([aria-busy="true"]) { background: var(--charcoal-2); border-color: var(--charcoal-2); color: var(--placeholder-dark); }
:is(.field, .on-dark, .tile--dark, .ds-dark, .coupon) .btn.btn--text:disabled { background: transparent; border-color: transparent; }
/* Social, download and WhatsApp buttons */
.btn--social { background: var(--cream); border-color: var(--cream); font-weight: 500; }
.btn--social:hover, .btn--social.is-hover { background: var(--sand-2); border-color: var(--sand-2); }
.btn--social .icon { width: 1.4rem; height: 1.4rem; }
.btn__meta { font-weight: 400; font-size: var(--fs-small); color: var(--ink-2); }
.btn--secondary .btn__meta { color: var(--on-dark-2); }
.btn--whatsapp .icon:first-child { width: 1.5rem; height: 1.5rem; }
/* ---------- Button group and split button ---------- */
.btn-group { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.btn-group--joined { gap: 0; flex-wrap: nowrap; }
.btn-group--joined > .btn { border-radius: 0; }
.btn-group--joined > .btn + .btn { margin-left: calc(-1 * var(--border-control)); }
.btn-group--joined > .btn:first-child { border-radius: var(--radius-pill) 0 0 var(--radius-pill); }
.btn-group--joined > .btn:last-child { border-radius: 0 var(--radius-pill) var(--radius-pill) 0; }
.btn-group--joined > .btn:hover, .btn-group--joined > .btn.is-hover { transform: none; }
.btn-group--joined > .btn[aria-pressed="true"] { background: var(--charcoal); color: var(--on-dark); position: relative; z-index: 1; }
.btn-group--joined > .btn:focus-visible { z-index: 2; }
.split-btn { position: relative; display: inline-flex; gap: 3px; }
.split-btn > .btn:first-child { border-radius: var(--radius-pill) 8px 8px var(--radius-pill); }
.split-btn__toggle { border-radius: 8px var(--radius-pill) var(--radius-pill) 8px !important; padding: 0 1rem 0 0.85rem; }
.split-btn__toggle .icon { transition: rotate var(--duration-state) var(--ease); }
.split-btn__toggle[aria-expanded="true"] .icon { rotate: 180deg; transform: none !important; }
.split-btn > .btn:hover { transform: none; }
.split-btn__menu { position: absolute; z-index: var(--z-overlay); top: calc(100% + 8px); right: 0; min-width: 16rem; padding: 8px; display: grid; gap: 2px; background: var(--cream); border-radius: var(--radius-md); box-shadow: var(--shadow-elevated); }
.split-btn__menu[hidden] { display: none; }
.split-btn__menu a, .split-btn__menu button { display: flex; align-items: center; gap: 0.75rem; min-height: var(--touch-target); padding: 0.5rem 1rem; border: 0; border-radius: 16px; background: none; color: var(--charcoal); font: 500 var(--fs-small)/1.3 var(--font-body); text-align: left; text-decoration: none; cursor: pointer; transition: background-color var(--duration-micro) var(--ease); }
.split-btn__menu a:hover, .split-btn__menu button:hover { background: var(--sand-2); }
.split-btn__menu .icon { color: var(--mint-ink); }
/* ---------- Icon buttons: bare glyph, round hit area. Never a tinted disc behind a plain icon ---------- */
.icon-btn { display: inline-grid; place-items: center; flex: none; width: var(--touch-target); height: var(--touch-target); padding: 0; border: 0; border-radius: var(--radius-circle); background: transparent; color: var(--charcoal); cursor: pointer; text-decoration: none; transition: color var(--duration-micro) var(--ease), background-color var(--duration-micro) var(--ease), border-color var(--duration-micro) var(--ease); }
.icon-btn .icon { width: 1.5rem; height: 1.5rem; transition: transform var(--duration-micro) var(--ease); }
.icon-btn:hover, .icon-btn.is-hover { color: var(--mint-ink); }
.icon-btn:hover .icon, .icon-btn.is-hover .icon { transform: scale(1.12); }
.icon-btn:active .icon, .icon-btn.is-active .icon { transform: scale(0.92); }
.icon-btn.is-focus { outline: var(--border-focus) solid var(--focus); outline-offset: 3px; }
.icon-btn:focus-visible { border-radius: var(--radius-circle); }
.icon-btn--sm .icon { width: 1.15rem; height: 1.15rem; }
.icon-btn--outline { border: var(--border-control) solid var(--charcoal); }
.icon-btn--outline:hover, .icon-btn--outline.is-hover { background: var(--cream); color: var(--charcoal); }
.icon-btn--primary { width: var(--button-height); height: var(--button-height); background: var(--mint); color: var(--charcoal); }
.icon-btn--primary:hover, .icon-btn--primary.is-hover { background: var(--mint-hover); color: var(--charcoal); }
.icon-btn--on-dark, :is(.field, .on-dark, .tile--dark, .ds-dark, .coupon) .icon-btn:not(.icon-btn--primary):not(.icon-btn--play) { color: var(--on-dark); }
.icon-btn--on-dark:hover, :is(.field, .on-dark, .tile--dark, .ds-dark, .coupon) .icon-btn:not(.icon-btn--primary):not(.icon-btn--play):hover { color: var(--mint); }
:is(.field, .on-dark, .tile--dark, .ds-dark, .coupon) .icon-btn--outline { border-color: var(--on-dark); }
:is(.field, .on-dark, .tile--dark, .ds-dark, .coupon) .icon-btn--outline:hover { background: var(--charcoal-2); }
.icon-btn:disabled, .icon-btn[aria-disabled="true"] { color: var(--text-muted); cursor: not-allowed; }
.icon-btn:disabled .icon { transform: none; }
.icon-btn--primary:disabled { background: var(--sand-2); }
.icon-btn[aria-busy="true"] { color: transparent; pointer-events: none; position: relative; }
.icon-btn[aria-busy="true"]::after { content: ""; position: absolute; inset: 0; margin: auto; width: 1.25rem; height: 1.25rem; border-radius: var(--radius-circle); border: 3px solid var(--charcoal); border-right-color: transparent; animation: spin 700ms linear infinite; }
/* Play button: the mint circle from the hero video. Grows on hover. */
.icon-btn--play { width: 5rem; height: 5rem; background: var(--mint); color: var(--charcoal); transition: transform var(--duration-state) var(--ease), background-color var(--duration-micro) var(--ease); }
.icon-btn--play .icon { width: 2.25rem; height: 2.25rem; margin-left: 4px; }
.icon-btn--play:hover, .icon-btn--play.is-hover { color: var(--charcoal); transform: scale(1.06); }
.icon-btn--play:hover .icon, .icon-btn--play.is-hover .icon { transform: none; }
.icon-btn--play.icon-btn--sm { width: 3.5rem; height: 3.5rem; }
.icon-btn--play.icon-btn--sm .icon { width: 1.6rem; height: 1.6rem; margin-left: 2px; }
.icon-btn--play.icon-btn--sm:hover, .icon-btn--play.icon-btn--sm.is-hover { transform: scale(1.2); }
/* Floating action button: only thing here with a shadow, because it floats */
.fab { position: fixed; right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: var(--z-sticky-bar); box-shadow: var(--shadow-floating); }
.fab--static { position: static; }
.fab.icon-btn { width: 3.75rem; height: 3.75rem; background: var(--mint); color: var(--charcoal); }
.fab.icon-btn:hover { background: var(--mint-hover); color: var(--charcoal); }
/* ---------- Toggle switch ---------- */
.switch { display: inline-flex; align-items: center; gap: 0.85rem; min-height: var(--touch-target); cursor: pointer; font-weight: 500; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.switch__track { position: relative; flex: none; width: 3.25rem; height: 2rem; border-radius: var(--radius-pill); background: var(--line); transition: background-color var(--duration-state) var(--ease); }
.switch__track::after { content: ""; position: absolute; top: 4px; left: 4px; width: 1.5rem; height: 1.5rem; border-radius: var(--radius-circle); background: var(--cream); transition: translate var(--duration-state) var(--ease), background-color var(--duration-state) var(--ease); }
.switch input:checked + .switch__track { background: var(--mint); }
.switch input:checked + .switch__track::after { translate: 1.25rem 0; background: var(--charcoal); }
.switch input:focus-visible + .switch__track, .switch.is-focus .switch__track { outline: var(--border-focus) solid var(--focus); outline-offset: 3px; }
.switch:hover .switch__track::after, .switch.is-hover .switch__track::after { scale: 1.08; }
.switch input:disabled + .switch__track { background: var(--sand-2); }
.switch input:disabled + .switch__track::after { background: var(--cream); }
.switch:has(input:disabled) { color: var(--text-muted); cursor: not-allowed; }
.switch__state { font-size: var(--fs-small); color: var(--ink-2); font-weight: 400; }
:is(.field, .on-dark, .tile--dark, .ds-dark, .coupon) .switch__track { background: var(--placeholder-dark); }
:is(.field, .on-dark, .tile--dark, .ds-dark, .coupon) .switch__track::after { background: var(--charcoal); }
:is(.field, .on-dark, .tile--dark, .ds-dark, .coupon) .switch input:checked + .switch__track { background: var(--mint); }
:is(.field, .on-dark, .tile--dark, .ds-dark, .coupon) .switch__state { color: var(--on-dark-2); }
/* ---------- Checkbox and radio ---------- */
.cbx, .rdo { display: flex; align-items: flex-start; gap: 0.85rem; min-height: var(--touch-target); padding-block: 0.6rem; cursor: pointer; line-height: 1.4; }
.cbx input, .rdo input { appearance: none; -webkit-appearance: none; flex: none; display: grid; place-items: center; width: 1.6rem; height: 1.6rem; margin: -0.05rem 0 0; border: var(--border-control) solid var(--line); background: var(--cream); cursor: pointer; transition: background-color var(--duration-micro) var(--ease), border-color var(--duration-micro) var(--ease); }
.cbx input { border-radius: 8px; }
.rdo input { border-radius: var(--radius-circle); }
.cbx input::before { content: ""; width: 1rem; height: 1rem; background: var(--mint); -webkit-mask: var(--mask-check) center / contain no-repeat; mask: var(--mask-check) center / contain no-repeat; scale: 0; transition: scale var(--duration-micro) var(--ease); }
.rdo input::before { content: ""; width: 0.65rem; height: 0.65rem; border-radius: var(--radius-circle); background: var(--mint); scale: 0; transition: scale var(--duration-micro) var(--ease); }
.cbx input:checked, .cbx input:indeterminate, .rdo input:checked { background: var(--charcoal); border-color: var(--charcoal); }
.cbx input:checked::before, .rdo input:checked::before { scale: 1; }
.cbx input:indeterminate::before { scale: 1; -webkit-mask-image: var(--mask-dash); mask-image: var(--mask-dash); }
.cbx:hover input:not(:checked):not(:disabled), .rdo:hover input:not(:checked):not(:disabled), .cbx.is-hover input:not(:checked), .rdo.is-hover input:not(:checked) { border-color: var(--charcoal); }
.cbx.is-focus input, .rdo.is-focus input { outline: var(--border-focus) solid var(--focus); outline-offset: 3px; }
.cbx input:focus-visible, .rdo input:focus-visible { border-radius: inherit; }
.cbx input:focus-visible { border-radius: 8px; }
.rdo input:focus-visible { border-radius: var(--radius-circle); }
.cbx input[aria-invalid="true"], .rdo input[aria-invalid="true"] { border-color: var(--error-ink); }
.cbx:has(input:disabled), .rdo:has(input:disabled) { color: var(--text-muted); cursor: not-allowed; }
.cbx input:disabled, .rdo input:disabled { background: var(--sand-2); border-color: var(--sand-2); cursor: not-allowed; }
.cbx input:disabled:checked::before, .rdo input:disabled:checked::before { background: var(--text-muted); }
.cbx small, .rdo small { display: block; font-size: var(--fs-small); color: var(--ink-2); }
:is(.field, .on-dark, .tile--dark, .ds-dark, .coupon) :is(.cbx, .rdo) input { background: var(--charcoal-2); border-color: var(--on-dark-2); }
:is(.field, .on-dark, .tile--dark, .ds-dark, .coupon) :is(.cbx, .rdo) input:checked, :is(.field, .on-dark, .tile--dark, .ds-dark, .coupon) .cbx input:indeterminate { background: var(--mint); border-color: var(--mint); }
:is(.field, .on-dark, .tile--dark, .ds-dark, .coupon) :is(.cbx, .rdo) input::before { background: var(--charcoal); }
:is(.field, .on-dark, .tile--dark, .ds-dark, .coupon) :is(.cbx, .rdo) small { color: var(--on-dark-2); }
:is(.field, .on-dark, .tile--dark, .ds-dark, .coupon) :is(.cbx, .rdo):hover input:not(:checked) { border-color: var(--on-dark); }
/* ---------- Select (styled native) ---------- */
.select { position: relative; display: block; }
.select select { appearance: none; -webkit-appearance: none; width: 100%; min-height: var(--button-height); padding: 0.75rem 3.25rem 0.75rem 1.25rem; border-radius: var(--radius-input); border: var(--border-control) solid var(--line); background: var(--cream); color: var(--charcoal); font: inherit; cursor: pointer; transition: border-color var(--duration-micro) var(--ease); }
.select::after { content: ""; position: absolute; right: 1.15rem; top: 50%; width: 1.15rem; height: 1.15rem; margin-top: -0.575rem; background: var(--charcoal); -webkit-mask: var(--mask-caret) center / contain no-repeat; mask: var(--mask-caret) center / contain no-repeat; pointer-events: none; }
.select select:hover, .select.is-hover select { border-color: var(--ink-2); }
.select select:focus-visible, .select.is-focus select { outline: var(--border-focus) solid var(--focus); outline-offset: 2px; border-color: var(--mint-ink); border-radius: var(--radius-input); }
.select select[aria-invalid="true"] { border-color: var(--error-ink); }
.select select:disabled { background: var(--sand-2); border-color: var(--sand-2); color: var(--text-muted); cursor: not-allowed; }
.select:has(select:disabled)::after { background: var(--text-muted); }
:is(.field, .on-dark, .tile--dark, .ds-dark, .coupon) .select select { background: var(--charcoal-2); border-color: transparent; color: var(--on-dark); }
:is(.field, .on-dark, .tile--dark, .ds-dark, .coupon) .select::after { background: var(--on-dark); }
:is(.field, .on-dark, .tile--dark, .ds-dark, .coupon) .select select:focus-visible { outline: none; border-color: var(--mint); }
:is(.field, .on-dark, .tile--dark, .ds-dark, .coupon) .select select[aria-invalid="true"] { border-color: var(--error-border-dark); }
/* ---------- Segmented control: one joined track (light), separate pills (dark = base .seg) ---------- */
.segmented { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: var(--radius-pill); background: var(--sand-2); }
.segmented label { position: relative; cursor: pointer; }
.segmented input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.segmented span { display: inline-flex; align-items: center; justify-content: center; gap: 0.4em; min-height: var(--touch-target); padding: 0 1.2rem; border-radius: var(--radius-pill); font-size: var(--fs-small); font-weight: 500; color: var(--charcoal); transition: background-color var(--duration-micro) var(--ease), color var(--duration-micro) var(--ease); }
.segmented label:hover span, .segmented .is-hover span { background: var(--cream); }
.segmented input:checked + span { background: var(--charcoal); color: var(--on-dark); font-weight: 700; }
.segmented input:focus-visible + span, .segmented .is-focus span { outline: var(--border-focus) solid var(--focus); outline-offset: 2px; }
.segmented input:disabled + span { color: var(--text-muted); cursor: not-allowed; background: transparent; }
.segmented--block { display: flex; }
.segmented--block label { flex: 1; }
.segmented--block span { width: 100%; }
:is(.field, .on-dark, .tile--dark, .ds-dark, .coupon) .segmented { background: var(--charcoal-2); }
:is(.field, .on-dark, .tile--dark, .ds-dark, .coupon) .segmented span { color: var(--on-dark); }
:is(.field, .on-dark, .tile--dark, .ds-dark, .coupon) .segmented label:hover span { background: var(--charcoal-3); }
:is(.field, .on-dark, .tile--dark, .ds-dark, .coupon) .segmented input:checked + span { background: var(--mint); color: var(--charcoal); }
@media (prefers-reduced-motion: reduce) {
.btn[aria-busy="true"]::after, .icon-btn[aria-busy="true"]::after { border-right-color: var(--spin, var(--charcoal)); border-style: dotted; }
.icon-btn--play:hover { transform: none; }
}
/* Documentation-only helpers for the Actions and Forms previews (dsa-*): never ship them */
.dsa-block { display: grid; gap: 12px; }
.dsa-block > .h6 code { font-weight: 400; margin-left: 0.5em; }
.dsa-cells { align-items: flex-end; gap: 20px 16px; }
.dsa-cell { display: grid; gap: 8px; justify-items: start; }
.dsa-blockdemo { display: grid; gap: 12px; max-width: 22rem; }
.dsa-tall { min-height: 13rem; align-items: flex-start; }
.dsa-split { display: grid; gap: 24px; }
@media (min-width: 900px) { .dsa-split { grid-template-columns: 1fr 1fr; align-items: start; } }
:is(.field, .on-dark, .tile--dark, .ds-dark, .coupon) .btn.btn--secondary[aria-busy="true"] { --spin: var(--charcoal); }
.dsa-top { align-items: start; }
/* ================= Forms (light on sand and cream; dark inside fields uses base .f) ================= */
.ff { display: grid; gap: 0.4rem; align-content: start; min-width: 0; }
.ff__label { font-weight: 500; font-size: var(--fs-small); line-height: 1.4; color: var(--charcoal); }
.ff__opt { color: var(--text-muted); font-weight: 400; }
.req { color: var(--error-ink); font-weight: 700; margin-left: 0.15em; text-decoration: none; }
.ff__help { font-size: var(--fs-small); line-height: 1.45; color: var(--ink-2); }
.ff__error, .ff__success { display: flex; align-items: flex-start; gap: 0.45rem; font-size: var(--fs-small); line-height: 1.45; font-weight: 500; color: var(--error-ink); }
.ff__success { color: var(--success-ink); }
.ff__error .icon, .ff__success .icon { width: 1.15rem; height: 1.15rem; margin-top: 0.1rem; }
.ff__error[hidden], .ff__success[hidden] { display: none; }
.ff__row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.ff__count { font-size: var(--fs-small); color: var(--text-muted); font-variant-numeric: tabular-nums; margin-left: auto; }
.ff__count.is-low { color: var(--warning-ink); font-weight: 700; }
.ff-set { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: 0.25rem; }
.ff-set > legend { padding: 0; margin-bottom: 0.5rem; }
.ff-set--inline { grid-template-columns: repeat(auto-fit, minmax(10rem, max-content)); column-gap: 1.5rem; }
.ff-set--inline > legend { grid-column: 1 / -1; }
/* Input: cream field, 2px line border (3.36:1 on sand, 3.83:1 on cream) */
.input { width: 100%; min-height: var(--button-height); padding: 0.75rem 1.25rem; border-radius: var(--radius-input); border: var(--border-control) solid var(--line); background: var(--cream); color: var(--charcoal); font: inherit; line-height: 1.4; transition: border-color var(--duration-micro) var(--ease); }
.input::placeholder { color: var(--text-muted); }
.input:hover, .input.is-hover { border-color: var(--ink-2); }
.input:focus, .input.is-focus { outline: var(--border-focus) solid var(--focus); outline-offset: 2px; border-color: var(--mint-ink); }
.input[aria-invalid="true"] { border-color: var(--error-ink); }
.input.is-valid { border-color: var(--success-ink); }
.input:disabled { background: var(--sand-2); border-color: var(--sand-2); color: var(--text-muted); cursor: not-allowed; }
.input[readonly] { background: transparent; border-style: dashed; }
textarea.input, .textarea { min-height: 8rem; border-radius: var(--radius-textarea); resize: vertical; padding-block: 0.9rem; }
.input[type="date"], .input[type="time"] { cursor: pointer; }
.input[type="date"]::-webkit-calendar-picker-indicator, .input[type="time"]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: 0.75; }
.input[type="search"]::-webkit-search-cancel-button { cursor: pointer; }
/* Input with icon, prefix, suffix or a trailing button. The wrapper is the field. */
.input-wrap { display: flex; align-items: center; min-height: var(--button-height); border-radius: var(--radius-input); border: var(--border-control) solid var(--line); background: var(--cream); color: var(--charcoal); transition: border-color var(--duration-micro) var(--ease); }
.input-wrap:hover { border-color: var(--ink-2); }
.input-wrap:focus-within, .input-wrap.is-focus { outline: var(--border-focus) solid var(--focus); outline-offset: 2px; border-color: var(--mint-ink); }
.input-wrap:has([aria-invalid="true"]) { border-color: var(--error-ink); }
.input-wrap:has(input:disabled) { background: var(--sand-2); border-color: var(--sand-2); color: var(--text-muted); }
.input-wrap > .input { flex: 1; min-width: 0; min-height: calc(var(--button-height) - 2 * var(--border-control)); border: 0; background: transparent; outline: none; }
.input-wrap > .icon { width: 1.3rem; height: 1.3rem; margin-left: 1.15rem; color: var(--ink-2); }
.input-wrap > .icon + .input { padding-left: 0.7rem; }
.input-wrap__affix { flex: none; padding: 0 0 0 1.25rem; color: var(--ink-2); font-weight: 500; white-space: nowrap; }
.input-wrap__affix + .input { padding-left: 0.35rem; }
.input-wrap > .input + .input-wrap__affix { padding: 0 1.25rem 0 0; }
.input-wrap > .icon-btn { margin-right: 4px; }
.input-wrap--pill-btn { padding-right: 4px; }
.input-wrap--pill-btn > .btn { min-height: calc(var(--button-height) - 12px); padding: 0 1.25rem; }
/* Dark: inside fields, the coupon or dark tiles the light classes adopt the coupon look */
:is(.field, .on-dark, .tile--dark, .ds-dark, .coupon) :is(.input, .input-wrap) { background: var(--charcoal-2); border-color: transparent; color: var(--on-dark); }
:is(.field, .on-dark, .tile--dark, .ds-dark, .coupon) .input-wrap > .input { background: transparent; }
:is(.field, .on-dark, .tile--dark, .ds-dark, .coupon) :is(.input:focus, .input-wrap:focus-within) { outline: none; border-color: var(--mint); }
:is(.field, .on-dark, .tile--dark, .ds-dark, .coupon) .input::placeholder { color: var(--placeholder-dark); }
:is(.field, .on-dark, .tile--dark, .ds-dark, .coupon) :is(.input[aria-invalid="true"], .input-wrap:has([aria-invalid="true"])) { border-color: var(--error-border-dark); }
:is(.field, .on-dark, .tile--dark, .ds-dark, .coupon) :is(.input-wrap > .icon, .input-wrap__affix) { color: var(--on-dark-2); }
:is(.field, .on-dark, .tile--dark, .ds-dark, .coupon) .ff__label { color: var(--on-dark); }
:is(.field, .on-dark, .tile--dark, .ds-dark, .coupon) :is(.ff__help, .ff__opt, .ff__count) { color: var(--on-dark-2); }
:is(.field, .on-dark, .tile--dark, .ds-dark, .coupon) .ff__error { color: var(--error-on-dark); }
:is(.field, .on-dark, .tile--dark, .ds-dark, .coupon) .ff__success { color: var(--mint); }
:is(.field, .on-dark, .tile--dark, .ds-dark, .coupon) .req { color: var(--error-on-dark); }
/* ---------- Light choice cards and chips (same shapes as the coupon) ---------- */
.choice.choice--light { background: var(--cream); color: var(--charcoal); }
.choice.choice--light:hover, .choice.choice--light.is-hover { background: var(--cream); transform: translateY(-2px); }
.choice--light small { color: var(--ink-2); }
.choice--light::after { border-color: var(--line); }
.choice--light:has(input:focus-visible), .choice--light.is-focus { outline: var(--border-focus) solid var(--mint-ink); outline-offset: 3px; }
.choice--multi::after { border-radius: 6px; }
.choice--sand2 { background: var(--sand-2); }
.choices--3 { grid-template-columns: 1fr; }
@media (min-width: 768px) { .choices--3 { grid-template-columns: repeat(3, 1fr); } }
.chips.chips--light span, .seg.seg--light span { background: var(--cream); color: var(--charcoal); }
.chips--light label:hover span, .seg--light label:hover span { background: var(--sand-2); }
.chips--light input:checked + span, .seg--light input:checked + span { background: var(--mint); color: var(--charcoal); font-weight: 700; }
.chips--light input:focus-visible + span, .seg--light input:focus-visible + span { outline-color: var(--mint-ink); }
.chips--light input:checked + span::before { content: ""; width: 0.95em; height: 0.95em; margin-right: 0.45em; background: currentColor; -webkit-mask: var(--mask-check) center / contain no-repeat; mask: var(--mask-check) center / contain no-repeat; }
.chips input:disabled + span, .seg input:disabled + span { opacity: 0.55; cursor: not-allowed; }
/* ---------- Multi-select: a field of chips plus a floating listbox ---------- */
.multiselect { position: relative; }
.multiselect__field { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; width: 100%; min-height: var(--button-height); padding: 6px 3.25rem 6px 6px; border-radius: var(--radius-input); border: var(--border-control) solid var(--line); background: var(--cream); color: var(--charcoal); font: inherit; text-align: left; cursor: pointer; position: relative; }
.multiselect__field::after { content: ""; position: absolute; right: 1.15rem; top: 50%; width: 1.15rem; height: 1.15rem; margin-top: -0.575rem; background: var(--charcoal); -webkit-mask: var(--mask-caret) center / contain no-repeat; mask: var(--mask-caret) center / contain no-repeat; transition: rotate var(--duration-state) var(--ease); }
.multiselect__field[aria-expanded="true"]::after { rotate: 180deg; }
.multiselect__field:hover { border-color: var(--ink-2); }
.multiselect__field:focus-visible { outline: var(--border-focus) solid var(--focus); outline-offset: 2px; border-color: var(--mint-ink); border-radius: var(--radius-input); }
.multiselect__placeholder { padding-left: 0.85rem; color: var(--text-muted); }
.multiselect__tag { display: inline-flex; align-items: center; gap: 0.35rem; min-height: 2.25rem; padding: 0 0.5rem 0 0.9rem; border-radius: var(--radius-pill); background: var(--mint); font-size: var(--fs-small); font-weight: 700; }
.multiselect__tag .icon { width: 1rem; height: 1rem; }
.multiselect__list { position: absolute; z-index: var(--z-overlay); left: 0; right: 0; top: calc(100% + 8px); max-height: 18rem; overflow: auto; margin: 0; padding: 8px; list-style: none; background: var(--cream); border-radius: var(--radius-md); box-shadow: var(--shadow-elevated); }
.multiselect__list[hidden] { display: none; }
.multiselect__list [role="option"] { display: flex; align-items: center; gap: 0.75rem; min-height: var(--touch-target); padding: 0.5rem 0.85rem; border-radius: 16px; cursor: pointer; font-size: var(--fs-small); font-weight: 500; }
.multiselect__list [role="option"]::before { content: ""; flex: none; width: 1.35rem; height: 1.35rem; border-radius: 7px; border: var(--border-control) solid var(--line); background: var(--cream); }
.multiselect__list [role="option"][aria-selected="true"]::before { border-color: var(--charcoal); background: var(--charcoal); }
.multiselect__list [role="option"] { position: relative; }
.multiselect__list [role="option"][aria-selected="true"]::after { content: ""; position: absolute; left: calc(0.85rem + 4px); width: 1rem; height: 1rem; background: var(--mint); -webkit-mask: var(--mask-check) center / contain no-repeat; mask: var(--mask-check) center / contain no-repeat; }
.multiselect__list [role="option"]:hover, .multiselect__list [role="option"].is-active { background: var(--sand-2); }
/* ---------- Date and time ---------- */
.datepick { width: min(100%, 22rem); padding: 1rem; display: grid; gap: 0.5rem; background: var(--cream); border-radius: var(--radius-md); }
.datepick--floating { box-shadow: var(--shadow-elevated); }
.datepick__head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.datepick__month { font: 600 1.25rem/1.2 var(--font-display); font-variation-settings: "SOFT" 100, "opsz" 24; }
.datepick__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; text-align: center; }
.datepick__dow { font-size: var(--fs-caption); font-weight: 700; color: var(--text-muted); padding-block: 0.35rem; }
.datepick__day { display: grid; place-items: center; width: 100%; aspect-ratio: 1; min-height: var(--touch-target); max-width: 2.9rem; margin-inline: auto; padding: 0; border: 0; border-radius: var(--radius-circle); background: none; color: var(--charcoal); font: 500 var(--fs-small)/1 var(--font-body); font-variant-numeric: tabular-nums; cursor: pointer; transition: background-color var(--duration-micro) var(--ease); }
.datepick__day:hover { background: var(--sand-2); }
.datepick__day[aria-current="date"] { box-shadow: inset 0 0 0 2px var(--charcoal); }
.datepick__day[aria-pressed="true"] { background: var(--mint); font-weight: 700; }
.datepick__day:disabled { color: var(--text-muted); text-decoration: line-through; cursor: not-allowed; background: none; }
.datepick__day:focus-visible { border-radius: var(--radius-circle); }
.timepick { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.timepick label { position: relative; cursor: pointer; }
.timepick input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.timepick span { display: inline-flex; align-items: center; min-height: var(--touch-target); padding: 0 1.1rem; border-radius: var(--radius-pill); background: var(--cream); font-size: var(--fs-small); font-weight: 500; font-variant-numeric: tabular-nums; transition: background-color var(--duration-micro) var(--ease); }
.timepick label:hover span { background: var(--sand-2); }
.timepick input:checked + span { background: var(--mint); font-weight: 700; }
.timepick input:focus-visible + span { outline: var(--border-focus) solid var(--focus); outline-offset: 2px; }
.timepick input:disabled + span { color: var(--text-muted); text-decoration: line-through; cursor: not-allowed; background: transparent; }
/* ---------- File upload ---------- */
.upload { position: relative; display: grid; justify-items: center; gap: 0.5rem; padding: 2rem 1.5rem; border-radius: var(--radius-tile); border: var(--border-control) dashed var(--line); background: var(--cream); text-align: center; cursor: pointer; transition: border-color var(--duration-micro) var(--ease), background-color var(--duration-micro) var(--ease); }
.upload > .icon { width: 2.5rem; height: 2.5rem; color: var(--mint-ink); transition: translate var(--duration-state) var(--ease); }
.upload:hover, .upload.is-hover { border-color: var(--charcoal); }
.upload:hover > .icon { translate: 0 -3px; }
.upload.is-over { border-style: solid; border-color: var(--mint-ink); background: var(--success-tint); }
.upload:focus-within, .upload.is-focus { outline: var(--border-focus) solid var(--focus); outline-offset: 3px; }
.upload input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.upload__title { font-weight: 700; }
.upload__title u { text-decoration-color: var(--mint); text-decoration-thickness: 3px; text-underline-offset: 0.25em; }
.upload__hint { font-size: var(--fs-small); color: var(--ink-2); }
.upload--error { border-color: var(--error-ink); }
.upload-btn { position: relative; }
.upload-btn input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.upload-btn:focus-within { outline: var(--border-focus) solid var(--focus); outline-offset: 3px; }
.file-list { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; padding: 0; margin: 0; }
.file-chip { display: inline-flex; align-items: center; gap: 0.6rem; min-height: var(--touch-target); padding: 0 1.1rem; border-radius: var(--radius-pill); background: var(--cream); font-size: var(--fs-small); font-weight: 500; max-width: 100%; }
.file-chip > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-chip--error { border-radius: var(--radius-md); padding-block: 0.6rem; }
.file-chip--error > span { white-space: normal; }
.file-chip .icon { width: 1.2rem; height: 1.2rem; color: var(--mint-ink); }
.file-chip .icon-btn { margin-right: -0.85rem; }
.file-chip--error { background: var(--error-tint); }
.file-chip--error .icon { color: var(--error-ink); }
/* ---------- Range slider ---------- */
.range { --fill: 50%; width: 100%; height: var(--touch-target); margin: 0; background: transparent; appearance: none; -webkit-appearance: none; cursor: pointer; }
.range::-webkit-slider-runnable-track { height: 8px; border-radius: var(--radius-pill); background: linear-gradient(to right, var(--mint-ink) 0 var(--fill), var(--line) var(--fill) 100%); }
.range::-moz-range-track { height: 8px; border-radius: var(--radius-pill); background: var(--line); }
.range::-moz-range-progress { height: 8px; border-radius: var(--radius-pill); background: var(--mint-ink); }
.range::-webkit-slider-thumb { -webkit-appearance: none; width: 1.75rem; height: 1.75rem; margin-top: calc(4px - 0.875rem); border-radius: var(--radius-circle); background: var(--mint); border: 3px solid var(--charcoal); transition: scale var(--duration-micro) var(--ease); }
.range::-moz-range-thumb { width: 1.75rem; height: 1.75rem; border-radius: var(--radius-circle); background: var(--mint); border: 3px solid var(--charcoal); box-sizing: border-box; }
.range:hover::-webkit-slider-thumb, .range:active::-webkit-slider-thumb { scale: 1.12; }
.range:focus-visible { outline: none; }
.range:focus-visible::-webkit-slider-thumb { outline: var(--border-focus) solid var(--focus); outline-offset: 3px; }
.range:focus-visible::-moz-range-thumb { outline: var(--border-focus) solid var(--focus); outline-offset: 3px; }
.range:disabled { cursor: not-allowed; }
.range:disabled::-webkit-slider-thumb { background: var(--sand-2); border-color: var(--text-muted); }
.range__out { font: 600 var(--fs-h3)/1 var(--font-display); font-variation-settings: "SOFT" 100, "opsz" 36; font-variant-numeric: tabular-nums; }
.range__scale { display: flex; justify-content: space-between; font-size: var(--fs-small); color: var(--ink-2); }
:is(.field, .on-dark, .tile--dark, .ds-dark, .coupon) .range::-webkit-slider-runnable-track { background: linear-gradient(to right, var(--mint) 0 var(--fill), var(--placeholder-dark) var(--fill) 100%); }
:is(.field, .on-dark, .tile--dark, .ds-dark, .coupon) .range::-moz-range-track { background: var(--placeholder-dark); }
:is(.field, .on-dark, .tile--dark, .ds-dark, .coupon) .range::-moz-range-progress { background: var(--mint); }
:is(.field, .on-dark, .tile--dark, .ds-dark, .coupon) .range::-webkit-slider-thumb { border-color: var(--on-dark); }
:is(.field, .on-dark, .tile--dark, .ds-dark, .coupon) .range__scale { color: var(--on-dark-2); }
/* ---------- Form-level messages and error summary ---------- */
.msg { display: grid; grid-template-columns: auto 1fr; gap: 0.25rem 0.85rem; align-items: start; padding: 1.1rem 1.35rem; border-radius: var(--radius-md); background: var(--info-tint); color: var(--charcoal); }
.msg > .icon { width: 1.5rem; height: 1.5rem; grid-row: span 2; color: var(--info-ink); }
.msg__title { font-weight: 700; }
.msg p, .msg ul { grid-column: 2; font-size: var(--fs-small); line-height: 1.45; }
.msg ul { margin: 0.25rem 0 0; padding-left: 1.1rem; display: grid; gap: 0.15rem; }
.msg a { color: var(--charcoal); font-weight: 700; }
.msg--error { background: var(--error-tint); }
.msg--error > .icon { color: var(--error-ink); }
.msg--success { background: var(--success-tint); }
.msg--success > .icon { color: var(--success-ink); }
.msg--warning { background: var(--warning-tint); }
.msg--warning > .icon { color: var(--warning-ink); }
.msg:focus { outline: var(--border-focus) solid var(--focus); outline-offset: 3px; }
:is(.field, .on-dark, .tile--dark, .ds-dark, .coupon) .msg { background: var(--charcoal-2); color: var(--on-dark); }
:is(.field, .on-dark, .tile--dark, .ds-dark, .coupon) .msg a { color: var(--on-dark); }
:is(.field, .on-dark, .tile--dark, .ds-dark, .coupon) .msg--error > .icon { color: var(--error-on-dark); }
:is(.field, .on-dark, .tile--dark, .ds-dark, .coupon) .msg--success > .icon { color: var(--mint); }
/* ---------- Form progress: bar (homepage) and labelled steps ---------- */
.form-progress { display: grid; gap: 0.6rem; }
.form-progress .form__bar span { background: var(--sand-2); }
.form-progress .form__bar span.on { background: var(--mint-ink); }
.form-progress__count { font-size: var(--fs-small); color: var(--ink-2); }
:is(.field, .on-dark, .tile--dark, .ds-dark, .coupon) .form-progress .form__bar span { background: var(--charcoal-4); }
:is(.field, .on-dark, .tile--dark, .ds-dark, .coupon) .form-progress .form__bar span.on { background: var(--mint); }
:is(.field, .on-dark, .tile--dark, .ds-dark, .coupon) .form-progress__count { color: var(--on-dark-2); }
.stepper { display: flex; gap: 0.5rem; list-style: none; margin: 0; padding: 0; counter-reset: st; }
.stepper li { flex: 1; display: grid; justify-items: center; gap: 0.5rem; position: relative; text-align: center; font-size: var(--fs-small); font-weight: 500; color: var(--ink-2); counter-increment: st; }
.stepper li::before { content: counter(st); display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: var(--radius-circle); background: var(--cream); color: var(--charcoal); font: 600 1.15rem/1 var(--font-display); position: relative; z-index: 1; transition: background-color var(--duration-state) var(--ease); }
.stepper li + li::after { content: ""; position: absolute; top: calc(1.375rem - 2px); right: calc(50% + 1.375rem + 4px); width: calc(100% - 2.75rem - 8px + 0.5rem); height: 4px; border-radius: 4px; background: var(--sand-2); }
.stepper li.is-done::before { background: var(--charcoal); color: var(--mint); }
.stepper li.is-done { color: var(--charcoal); }
.stepper li.is-done + li::after, .stepper li.is-done + li.is-done::after { background: var(--mint-ink); }
.stepper li[aria-current="step"] { color: var(--charcoal); font-weight: 700; }
.stepper li[aria-current="step"]::before { background: var(--mint); }
:is(.field, .on-dark, .tile--dark, .ds-dark, .coupon) .stepper li { color: var(--on-dark-2); }
:is(.field, .on-dark, .tile--dark, .ds-dark, .coupon) .stepper li::before { background: var(--charcoal-2); color: var(--on-dark); }
:is(.field, .on-dark, .tile--dark, .ds-dark, .coupon) .stepper li[aria-current="step"] { color: var(--on-dark); }
:is(.field, .on-dark, .tile--dark, .ds-dark, .coupon) .stepper li[aria-current="step"]::before { background: var(--mint); color: var(--charcoal); }
:is(.field, .on-dark, .tile--dark, .ds-dark, .coupon) .stepper li + li::after { background: var(--charcoal-4); }
/* Light multi-step and contact forms reuse .form; on light, override the dark-only colours */
.form--light .form__count { color: var(--ink-2); }
.form--light .form__bar span { background: var(--sand-2); }
.form--light .form__bar span.on { background: var(--mint-ink); }
.form--light .privacy, .form--light .promise-line { color: var(--ink-2); }
.form--light .privacy a { color: var(--mint-ink); }
.form--light .promise-line .icon { color: var(--mint-ink); }
.form--light .done p { color: var(--ink-2); }
.form--light .done .dot { color: var(--mint-ink); }
@media (prefers-reduced-motion: reduce) {
.upload:hover > .icon { translate: none; }
}
/* [hidden] must win over display rules on these blocks (the multi-step form toggles them) */
.btn[hidden], .icon-btn[hidden], .done[hidden], .msg[hidden], .form[hidden], .ff[hidden], .f[hidden] { display: none; }
.done--light p { color: var(--ink-2); }
.done--light .dot { color: var(--mint-ink); }
/* ---------- Content: headings in context, prose, lists, quotes, callouts, meta ---------- */
/* Section introduction: H2 then a lead. Space under it separates it from what follows. */
.section-intro { display: grid; gap: 1rem; margin-bottom: var(--head-gap); }
.section-intro .h2 { max-width: 18ch; }
.section-intro--center { justify-items: center; text-align: center; }
.section-intro--center .lead { margin-inline: auto; }
.section-intro--split { gap: 1rem 2rem; }
@media (min-width: 1024px) { .section-intro--split { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: end; } .section-intro--split .h2 { grid-column: 1 / span 6; } .section-intro--split .lead { grid-column: 8 / span 5; } }
.heading-stack { display: grid; gap: 0.75rem; align-content: start; }
/* Prose: long-form text from a CMS. One paragraph size; rhythm from space, never rules. */
.prose { max-width: var(--measure-tight); font-size: var(--fs-body); line-height: 1.55; }
.prose > * + * { margin-top: 1.1em; }
.prose > h2 { font-family: var(--font-display); font-weight: 600; font-variation-settings: "SOFT" 100, "opsz" 96; font-size: var(--fs-h3); line-height: 1.2; letter-spacing: -0.01em; margin-top: 2em; text-wrap: balance; }
.prose > h3 { font-family: var(--font-display); font-weight: 600; font-variation-settings: "SOFT" 100, "opsz" 24; font-size: var(--fs-h4); line-height: 1.25; margin-top: 1.75em; }
.prose > h4 { font-family: var(--font-body); font-weight: 700; font-size: 1.125rem; line-height: 1.35; margin-top: 1.5em; }
.prose > h2 + *, .prose > h3 + *, .prose > h4 + * { margin-top: 0.6em; }
.prose > :first-child { margin-top: 0; }
.prose ul:not([class]), .prose ol:not([class]) { padding-left: 1.4em; display: grid; gap: 0.5em; }
.prose ul:not([class]) li::marker { color: var(--mint-ink); }
.prose ol:not([class]) li::marker { color: var(--mint-ink); font-weight: 700; }
.prose a:not([class]) { color: var(--mint-ink); font-weight: 500; }
.prose a:not([class]):hover { text-decoration-thickness: 3px; }
.prose strong { font-weight: 700; }
.prose blockquote { padding: var(--tile-pad); border-radius: var(--radius-tile); background: var(--cream); font-family: var(--font-display); font-variation-settings: "SOFT" 100, "opsz" 48; font-weight: 500; font-size: var(--fs-quote); line-height: 1.3; letter-spacing: -0.01em; }
.prose blockquote p + p { margin-top: 0.75em; }
.prose blockquote footer, .prose blockquote cite { display: block; margin-top: 1rem; font: 400 var(--fs-small)/1.45 var(--font-body); font-style: normal; color: var(--ink-2); }
.prose figure img { border-radius: var(--radius-tile); display: block; width: 100%; height: auto; }
.prose figcaption { margin-top: 0.6rem; font-size: var(--fs-caption); line-height: 1.4; color: var(--text-muted); }
.prose code { font-size: 0.9em; padding: 0.1em 0.4em; border-radius: var(--radius-sm); background: var(--sand-2); }
.prose--wide { max-width: var(--container-narrow); }
.field .prose a:not([class]), .on-dark .prose a:not([class]) { color: var(--mint); }
.field .prose blockquote, .on-dark .prose blockquote { background: var(--charcoal-2); }
/* Highlighted text: a soft highlighter stroke behind the words */
mark, .highlight { background: linear-gradient(transparent 58%, var(--mint) 58%, var(--mint) 96%, transparent 96%); color: inherit; padding-inline: 0.12em; border-radius: 0.2em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.highlight--mustard { background: linear-gradient(transparent 58%, var(--mustard) 58%, var(--mustard) 96%, transparent 96%); }
.highlight--block { background: var(--mint); padding: 0.05em 0.3em; }
/* Lists with meaning: icons sit bare in mint-ink, never in circles */
.icon-list, .checklist, .numlist { display: grid; gap: 1rem; }
.icon-list li, .checklist li { display: flex; gap: 0.9rem; align-items: flex-start; }
.icon-list .icon, .checklist .icon { width: 1.5rem; height: 1.5rem; margin-top: 0.12em; color: var(--mint-ink); }
.icon-list strong { display: block; }
.icon-list li > span > span { display: block; color: var(--ink-2); margin-top: 0.15rem; }
.checklist--tight { gap: 0.6rem; }
.checklist--cross .icon { color: var(--error-ink); }
.field .icon-list .icon, .field .checklist .icon, .on-dark .icon-list .icon, .on-dark .checklist .icon { color: var(--mint); }
.field .icon-list li > span > span, .on-dark .icon-list li > span > span { color: var(--on-dark-2); }
.numlist { counter-reset: n; }
.numlist li { counter-increment: n; display: grid; grid-template-columns: 2.5rem 1fr; gap: 0.25rem 0.9rem; align-items: baseline; }
.numlist li::before { content: counter(n); font: 600 1.5rem/1 var(--font-display); font-variation-settings: "SOFT" 100, "opsz" 36; color: var(--mint-ink); text-align: right; }
.numlist strong { display: block; }
.numlist li > span > span { display: block; color: var(--ink-2); }
/* Pull quote: Fraunces, no quotation marks drawn as art, a mint bar of space beneath */
.pullquote { display: grid; gap: 1rem; padding-block: 0.5rem; max-width: 28ch; }
.pullquote p { font-family: var(--font-display); font-variation-settings: "SOFT" 100, "opsz" 48; font-weight: 500; font-size: var(--fs-quote-lead); line-height: 1.2; letter-spacing: -0.01em; text-wrap: balance; }
.pullquote cite { font: 700 var(--fs-small)/1.45 var(--font-body); font-style: normal; color: var(--ink-2); }
.pullquote--center { margin-inline: auto; text-align: center; justify-items: center; }
.pullquote--wide { max-width: 34ch; }
/* Text with image */
.text-media { display: grid; gap: 2rem; align-items: center; }
.text-media__body { display: grid; gap: 1rem; align-content: start; }
.text-media__body p { max-width: var(--measure); }
.text-media__media { position: relative; margin: 0; }
.text-media__media img, .text-media__ph { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-tile); }
.text-media__media--arch { max-width: 26rem; justify-self: center; width: 100%; }
.text-media__media--arch img, .text-media__media--arch .text-media__ph { aspect-ratio: 4 / 5; border-radius: var(--shape-arch); }
.prose .text-media__ph { aspect-ratio: 16 / 9; border-radius: var(--radius-tile); }
.text-media__ph { display: grid; place-items: center; align-content: center; gap: 0.5rem; background: var(--sky); color: var(--charcoal); font-size: var(--fs-small); font-weight: 500; text-align: center; padding: 1rem; }
.text-media__ph--mint { background: var(--mint); }
.text-media__ph--sand2 { background: var(--sand-2); color: var(--ink-2); }
@media (min-width: 900px) { .text-media { grid-template-columns: 1fr 1fr; gap: 4rem; } .text-media--flip .text-media__media { order: -1; } }
/* Callout tile, notice and disclaimer */
.callout { display: flex; gap: 1rem; align-items: flex-start; padding: clamp(1.25rem, 1rem + 1vw, 1.75rem); border-radius: var(--radius-tile); background: var(--cream); max-width: 46rem; }
.callout > .icon { width: 1.6rem; height: 1.6rem; color: var(--mint-ink); margin-top: 0.1em; }
.callout__body { display: grid; gap: 0.4rem; }
.callout__body strong:first-child { font-weight: 700; }
.callout--mint { background: var(--mint); }
.callout--mint > .icon { color: var(--charcoal); }
.callout--sky { background: var(--sky); }
.callout--sky > .icon { color: var(--charcoal); }
.callout--dark { background: var(--charcoal); color: var(--on-dark); --focus: var(--mint); }
.callout--dark > .icon { color: var(--mint); }
.callout--dark a:not([class]) { color: var(--mint); }
.callout--pill { border-radius: var(--radius-pill); padding: 1rem 1.75rem 1rem 1.25rem; align-items: center; }
@media (max-width: 640px) { .callout--pill { border-radius: var(--radius-tile); align-items: flex-start; } }
.notice { display: flex; gap: 0.75rem; align-items: flex-start; padding: 0.9rem 1.25rem; border-radius: var(--radius-md); background: var(--sand-2); font-size: var(--fs-small); line-height: 1.45; color: var(--charcoal); max-width: 46rem; }
.notice .icon { width: 1.25rem; height: 1.25rem; color: var(--info-ink); margin-top: 0.1em; }
.notice--inline { display: inline-flex; border-radius: var(--radius-pill); padding: 0.55rem 1.1rem; align-items: center; }
.disclaimer { font-size: var(--fs-small); line-height: 1.45; color: var(--ink-2); max-width: 52rem; }
.disclaimer strong { color: var(--charcoal); }
.field .disclaimer, .on-dark .disclaimer { color: var(--on-dark-2); }
.field .disclaimer strong, .on-dark .disclaimer strong { color: var(--on-dark); }
/* Author attribution, reading time, metadata, sharing */
.byline { display: flex; align-items: center; gap: 0.9rem; }
.byline strong { display: block; }
.byline__role { display: block; font-size: var(--fs-small); color: var(--ink-2); }
.byline--lg .avatar { width: 4.5rem; height: 4.5rem; font-size: 1.25rem; }
.byline .avatar--mint { background: var(--mint); color: var(--charcoal); }
.readtime { display: inline-flex; align-items: center; gap: 0.4rem; font-size: var(--fs-small); color: var(--text-muted); }
.readtime .icon { width: 1.1rem; height: 1.1rem; }
.metalist { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 1.25rem; font-size: var(--fs-small); color: var(--text-muted); }
.metalist li { display: inline-flex; align-items: center; gap: 0.4rem; }
.metalist .icon { width: 1.1rem; height: 1.1rem; }
.metalist a { color: var(--mint-ink); font-weight: 500; }
.field .metalist, .on-dark .metalist, .field .readtime, .on-dark .readtime { color: var(--on-dark-2); }
.share { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1rem; }
.share__label { font-size: var(--fs-small); font-weight: 700; margin-right: 0.25rem; }
.share a, .share button { display: inline-flex; align-items: center; gap: 0.5rem; min-height: var(--touch-target); padding: 0; border: 0; background: none; color: var(--charcoal); font: 500 var(--fs-small)/1 var(--font-body); text-decoration: none; cursor: pointer; transition: color var(--duration-micro) var(--ease); }
.share a:hover, .share button:hover, .share .is-hover { color: var(--mint-ink); }
.share .icon { width: 1.4rem; height: 1.4rem; }
.share--icons a span, .share--icons button span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.share--icons { gap: 0.25rem; }
.share--icons a, .share--icons button { min-width: var(--touch-target); justify-content: center; }
.share .is-focus { outline: var(--border-focus) solid var(--focus); outline-offset: 3px; border-radius: var(--radius-sm); }
.field .share a, .field .share button, .on-dark .share a, .on-dark .share button { color: var(--on-dark); }
.field .share a:hover, .on-dark .share a:hover { color: var(--mint); }
.article-head { display: grid; gap: 1.25rem; max-width: var(--container-narrow); }
.article-head__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; }
/* ---------- Card: one flexible tile. Tone, media, layout and content are modifiers ---------- */
.card { position: relative; display: grid; grid-template-rows: auto 1fr; align-content: start; border-radius: var(--radius-tile); background: var(--cream); color: var(--charcoal); overflow: hidden; min-width: 0; transition: transform var(--duration-micro) var(--ease), background-color var(--duration-micro) var(--ease); }
.card:not(:has(.card__media)) { grid-template-rows: 1fr; }
.card__body { display: grid; gap: 0.75rem; align-content: start; padding: clamp(1.5rem, 1rem + 1.5vw, 2.25rem); }
.card__title { font-family: var(--font-display); font-weight: 600; font-variation-settings: "SOFT" 100, "opsz" 36; font-size: var(--fs-h3); line-height: 1.2; letter-spacing: -0.01em; text-wrap: balance; }
.card__title a { color: inherit; text-decoration: none; }
.card__text { color: var(--ink-2); }
.card__kicker { font: 700 var(--fs-small)/1.35 var(--font-body); color: var(--ink-2); }
.card__meta { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; font-size: var(--fs-small); color: var(--text-muted); }
.card__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; margin-top: 0.5rem; }
.card__icon { width: 2rem; height: 2rem; color: var(--mint-ink); }
.card__list { display: grid; gap: 0.6rem; }
.card__list li { display: flex; gap: 0.7rem; align-items: center; }
.card__list .icon { color: var(--mint-ink); }
.card .ds-sample { justify-self: start; }
/* Media: a 32px-radius picture inset in the tile, or the arch */
.card__media { margin: 0.75rem 0.75rem 0; border-radius: calc(var(--radius-tile) - 0.75rem); overflow: hidden; aspect-ratio: 16 / 10; background: var(--sky); }
.card__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: scale var(--duration-state-slow) var(--ease); }
.card__media--bleed { margin: 0; border-radius: 0; }
.card__media--arch { margin: 1.25rem 1.25rem 0; aspect-ratio: 4 / 5; border-radius: var(--shape-arch); }
.card__media--square { aspect-ratio: 1; }
.card__ph { width: 100%; height: 100%; display: grid; place-items: center; align-content: center; gap: 0.5rem; padding: 1rem; text-align: center; font-size: var(--fs-small); font-weight: 500; color: var(--charcoal); }
.card__ph svg { width: 100%; height: 100%; position: absolute; inset: 0; }
.card__ph--sky { background: var(--sky); }
.card__ph--mint { background: var(--mint); }
.card__ph--mustard { background: var(--mustard); }
.card__ph--sand2 { background: var(--sand-2); color: var(--ink-2); }
.card__ph--dark { background: var(--charcoal-2); color: var(--on-dark-2); }
.card__media:has(.card__ph svg) { position: relative; }
/* Tones */
.card--sand2 { background: var(--sand-2); }
.card--mint { background: var(--mint); }
.card--sky { background: var(--sky); }
.card--mustard { background: var(--mustard); }
.card--mint .card__text, .card--sky .card__text, .card--mustard .card__text { color: var(--charcoal); }
.card--mint .card__icon, .card--sky .card__icon, .card--mustard .card__icon, .card--mint .card__list .icon, .card--sky .card__list .icon, .card--mustard .card__list .icon { color: var(--charcoal); }
.card--mint .card__meta, .card--sky .card__meta, .card--mustard .card__meta, .card--mint .card__kicker, .card--sky .card__kicker, .card--mustard .card__kicker { color: var(--charcoal); }
.card--dark { background: var(--charcoal); color: var(--on-dark); --focus: var(--mint); }
.card--dark .card__text, .card--dark .card__kicker, .card--dark .card__meta { color: var(--on-dark-2); }
.card--dark .card__icon, .card--dark .card__list .icon { color: var(--mint); }
.card--dark .link { color: var(--on-dark); }
.field .card { background: var(--charcoal-2); color: var(--on-dark); --focus: var(--mint); }
.field .card .card__text { color: var(--on-dark-2); }
.field .card .card__icon { color: var(--mint); }
/* Whole-card link: the title link stretches over the tile. Hover lifts like a button, never a shadow */
.card--link .card__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: var(--radius-tile); }
.card--link .card__foot a, .card--link .card__foot button { position: relative; z-index: 2; }
.card--link:hover, .card--link.is-hover { transform: translateY(-2px); }
.card--link:hover .card__media img, .card--link.is-hover .card__media img { scale: 1.03; }
.card--link:active, .card--link.is-active { transform: translateY(1px) scale(0.99); }
.card--link:has(.card__title a:focus-visible), .card--link.is-focus { outline: var(--border-focus) solid var(--focus); outline-offset: 3px; }
.card--link .card__title a:focus-visible { outline: none; }
.card__go { display: inline-flex; align-items: center; gap: 0.4em; font-weight: 700; text-decoration: underline; text-decoration-color: var(--mint); text-decoration-thickness: 3px; text-underline-offset: 0.3em; transition: text-underline-offset var(--duration-micro) var(--ease); }
.card--link:hover .card__go, .card--link.is-hover .card__go { text-underline-offset: 0.45em; }
.card__go .icon { transition: transform var(--duration-micro) var(--ease); }
.card--link:hover .card__go .icon, .card--link.is-hover .card__go .icon { transform: translateX(4px); }
.card--mint .card__go, .card--sky .card__go, .card--mustard .card__go { text-decoration-color: var(--charcoal); }
/* Dark strip footer, as on the plan tiles */
.card__strip { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4.5rem; padding: 0 clamp(1.5rem, 1rem + 1.5vw, 2.25rem); background: var(--charcoal); color: var(--on-dark); font-weight: 700; text-decoration: none; transition: background-color var(--duration-micro) var(--ease); --focus: var(--mint); align-self: end; }
.card__strip:hover, .card__strip.is-hover { background: var(--charcoal-3); }
.card__strip .icon { transition: transform var(--duration-micro) var(--ease); }
.card__strip:hover .icon, .card__strip.is-hover .icon { transform: translateX(4px); }
.card__strip:focus-visible { outline-offset: -6px; border-radius: 0 0 var(--radius-tile) var(--radius-tile); }
.card:has(.card__strip) { grid-template-rows: auto 1fr auto; }
.card:has(.card__strip):not(:has(.card__media)) { grid-template-rows: 1fr auto; }
/* Content types */
.card__stat { font-family: var(--font-display); font-variation-settings: "SOFT" 100, "opsz" 144; font-weight: 600; font-size: var(--fs-price); line-height: 0.9; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.card__quote { font-family: var(--font-display); font-variation-settings: "SOFT" 100, "opsz" 48; font-weight: 500; font-size: var(--fs-quote); line-height: 1.3; letter-spacing: -0.01em; }
.card--quote .card__quote { font-size: var(--fs-quote-lead); line-height: 1.2; }
.card__quote-mark { width: 2.25rem; height: 2.25rem; color: var(--mint-ink); }
.card--mustard .card__quote-mark, .card--mint .card__quote-mark, .card--sky .card__quote-mark { color: var(--charcoal); }
.card--dark .card__quote-mark { color: var(--mint); }
.card__by { display: flex; align-items: center; gap: 0.9rem; }
.card__by strong { display: block; }
.card__by span span { display: inline-flex; align-items: center; gap: 0.35rem; font-size: var(--fs-small); color: var(--ink-2); }
.card--mustard .card__by span span { color: var(--charcoal); }
.card--mustard .stars { color: var(--charcoal); }
.card__price { display: flex; align-items: baseline; gap: 0.5rem; }
.card__price b { font-family: var(--font-display); font-variation-settings: "SOFT" 100, "opsz" 144; font-weight: 600; font-size: clamp(2.6rem, 2rem + 2vw, 3.75rem); line-height: 0.9; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.card__price span { font-weight: 500; }
.card__date { display: grid; justify-items: start; line-height: 1; }
.card__date b { font-family: var(--font-display); font-variation-settings: "SOFT" 100, "opsz" 144; font-weight: 600; font-size: 3rem; letter-spacing: -0.03em; }
.card__date span { font-weight: 700; font-size: var(--fs-small); text-transform: none; }
.card__file { display: inline-flex; align-items: center; gap: 0.5rem; font-size: var(--fs-small); color: var(--ink-2); }
.card__file .icon { color: var(--mint-ink); }
.card__tags { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.card__tags li { display: inline-flex; align-items: center; min-height: 1.9rem; padding: 0 0.8rem; border-radius: var(--radius-pill); background: var(--sand-2); font-size: var(--fs-small); font-weight: 500; }
.card--sand2 .card__tags li { background: var(--cream); }
.card--dark .card__tags li { background: var(--charcoal-2); color: var(--on-dark); }
/* Layouts */
.card-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--card-min, 18rem)), 1fr)); align-items: stretch; }
@media (min-width: 640px) {
.card--horizontal { grid-template-columns: minmax(10rem, 2fr) 3fr; grid-template-rows: 1fr; }
.card--horizontal .card__media { margin: 0.75rem 0 0.75rem 0.75rem; aspect-ratio: auto; min-height: 100%; }
.card--horizontal .card__body { align-content: center; }
}
.card--featured .card__title { font-size: var(--fs-h2); font-variation-settings: "SOFT" 100, "opsz" 96; letter-spacing: -0.025em; line-height: 1.04; }
@media (min-width: 900px) {
.card--featured { grid-template-columns: 7fr 5fr; grid-template-rows: 1fr; }
.card--featured .card__media { order: 2; margin: 0.75rem 0.75rem 0.75rem 0; aspect-ratio: auto; min-height: 22rem; }
.card--featured .card__body { align-content: center; padding: var(--tile-pad); }
.card-grid > .card--featured { grid-column: 1 / -1; }
}
/* Hover reveal: extra detail slides open on hover or focus. Touch screens always show it. */
.card__reveal { display: grid; grid-template-rows: 1fr; transition: grid-template-rows var(--duration-state) var(--ease); }
.card__reveal > div { overflow: hidden; display: grid; gap: 0.75rem; }
@media (hover: hover) {
.card--reveal .card__reveal { grid-template-rows: 0fr; }
.card--reveal:hover .card__reveal, .card--reveal:focus-within .card__reveal, .card--reveal.is-hover .card__reveal { grid-template-rows: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .card--link:hover, .card--link.is-hover { transform: none; } .card--link:hover .card__media img { scale: 1; } }
/* ================= Media: images, galleries, video, players, avatars =================
Every picture sits in the same rounded language: 32px tiles, arches, circles. Text never sits
straight on a photo; it sits on a solid charcoal, cream or mint panel laid over it. */
/* ---------- Sample photo placeholder (until real photos exist) ---------- */
:where(.img-ph) { position: relative; display: block; aspect-ratio: var(--ratio, 3 / 2); }
.img-ph { overflow: hidden; background: var(--ph-ground, var(--sand-2)); --ph-ground: var(--sand-2); --ph-shape: var(--cream); --ph-figure: var(--charcoal); --ph-accent: var(--mint); }
.img-ph > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.img-ph__ground { fill: var(--ph-ground); }
.img-ph__shape { fill: var(--ph-shape); }
.img-ph__figure { fill: var(--ph-figure); opacity: 0.85; }
.img-ph__accent { fill: var(--ph-accent); }
.img-ph[data-ds-ph="sky"] { --ph-ground: var(--sky); --ph-shape: var(--cream); --ph-accent: var(--mint); }
.img-ph[data-ds-ph="mint"] { --ph-ground: var(--mint); --ph-shape: var(--cream); --ph-accent: var(--mustard); }
.img-ph[data-ds-ph="mustard"] { --ph-ground: var(--mustard); --ph-shape: var(--cream); --ph-accent: var(--mint); }
.img-ph[data-ds-ph="cream"] { --ph-ground: var(--cream); --ph-shape: var(--sand-2); --ph-accent: var(--sky); }
.img-ph[data-ds-ph="charcoal"] { --ph-ground: var(--charcoal-2); --ph-shape: var(--charcoal-3); --ph-figure: var(--on-dark-2); --ph-accent: var(--mint); }
/* ---------- Image ---------- */
.img { display: grid; gap: 0.75rem; margin: 0; align-content: start; }
.img__media { display: block; width: 100%; height: auto; aspect-ratio: var(--ratio, auto); object-fit: cover; border-radius: var(--radius-tile); background: var(--sand-2); }
.img__media[data-ds-ph] { aspect-ratio: var(--ratio, 3 / 2); }
.img--square { --ratio: 1; }
.img--portrait { --ratio: 4 / 5; }
.img--wide { --ratio: 16 / 9; }
.img--arch .img__media { border-radius: var(--shape-arch); --ratio: 3 / 4; }
.img--round .img__media { border-radius: var(--radius-circle); --ratio: 1; }
.img__caption { font-size: var(--fs-small); line-height: 1.45; color: var(--ink-2); max-width: var(--measure); }
.img__caption strong { color: var(--charcoal); }
.img__credit { display: block; font-size: var(--fs-caption); line-height: 1.4; color: var(--text-muted); }
.img__credit a { color: inherit; }
.on-dark .img__caption, .field .img__caption { color: var(--on-dark-2); }
.on-dark .img__credit, .field .img__credit { color: var(--on-dark-2); }
/* Overlay: words sit on a solid panel laid over the picture, never on the photo itself */
.overlay { position: relative; display: grid; min-height: 22rem; border-radius: var(--radius-tile); overflow: hidden; isolation: isolate; }
.overlay > .img__media, .overlay > .img-ph { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; z-index: -1; }
.overlay__panel { align-self: end; justify-self: start; display: grid; gap: 0.5rem; max-width: 26rem; margin: 1rem; padding: 1.25rem 1.5rem; border-radius: var(--radius-md); background: var(--charcoal); color: var(--on-dark); --focus: var(--mint); }
.overlay__panel p { color: var(--on-dark-2); }
.overlay__panel .link { color: var(--on-dark); }
.overlay--cream .overlay__panel { background: var(--cream); color: var(--charcoal); --focus: var(--mint-ink); }
.overlay--cream .overlay__panel p { color: var(--ink-2); }
.overlay--cream .overlay__panel .link { color: var(--charcoal); }
.overlay--mint .overlay__panel { background: var(--mint); color: var(--charcoal); --focus: var(--charcoal); }
.overlay--mint .overlay__panel p { color: var(--charcoal); }
.overlay--top .overlay__panel { align-self: start; }
@media (min-width: 768px) { .overlay__panel { margin: 1.5rem; } }
/* Background image section: the picture fills a field-shaped block, content sits in a cream panel */
.bg-media { position: relative; display: grid; align-items: end; min-height: clamp(26rem, 60vh, 40rem); padding: var(--tile-pad); border-radius: var(--radius-field); margin-inline: var(--field-inset); overflow: hidden; isolation: isolate; }
.bg-media__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; aspect-ratio: auto; }
.bg-media__panel { display: grid; gap: 1rem; max-width: 34rem; padding: var(--tile-pad); border-radius: var(--radius-tile); background: var(--cream); }
.bg-media__panel .lead { color: var(--ink-2); }
@media (max-width: 560px) { .bg-media { padding: 1rem; padding-top: 8rem; } .bg-media__panel { padding: 1.5rem; } }
.bg-media__pause { position: absolute; top: 1rem; right: 1rem; }
@media (min-width: 1024px) { .bg-media__panel { justify-self: start; } }
/* Full-bleed: edge to edge of its section. The house version sits in by the field inset with field corners */
.bleed { display: block; width: 100%; }
.bleed .img__media, .bleed > .img-ph { border-radius: 0; }
.bleed--inset { width: auto; margin-inline: var(--field-inset); }
.bleed--inset .img__media, .bleed--inset > .img-ph { border-radius: var(--radius-field); }
/* Markup sample inside docs and articles */
.img-code { min-width: 0; max-width: 100%; overflow-x: auto; padding: 1rem 1.25rem; border-radius: var(--radius-md); background: var(--cream); font-size: var(--fs-caption); line-height: 1.5; }
.img-stage code { overflow-wrap: anywhere; }
/* Decorative image: shape only, hidden from assistive tech. Its parent becomes an .img-stage */
.img--decor { position: absolute; z-index: 0; pointer-events: none; }
.img-stage { position: relative; overflow: clip; min-height: 16rem; isolation: isolate; }
.img-stage > :not(.img--decor) { position: relative; z-index: 1; }
.img-stage > .img--decor.blob { width: min(120%, 30rem); left: 85%; top: 85%; }
/* Image with floating content: a cream card sits over one corner, cut out of the picture by a sand gap */
.float-media { position: relative; display: grid; padding-bottom: 3rem; }
.float-media__card { position: absolute; bottom: 0; left: 1rem; display: flex; align-items: center; gap: 0.9rem; max-width: calc(100% - 2rem); padding: 1rem 1.25rem; border-radius: var(--radius-md); background: var(--cream); border: 8px solid var(--sand); }
.float-media__card strong { display: block; }
.float-media__card span span { display: block; font-size: var(--fs-small); color: var(--ink-2); }
.float-media--right .float-media__card { left: auto; right: 1rem; }
@media (min-width: 768px) { .float-media__card { left: -1.5rem; } .float-media--right .float-media__card { left: auto; right: -1.5rem; } }
/* ---------- Gallery ---------- */
.gallery { display: grid; gap: var(--space-16); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) { .gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-24); } }
.gallery--wide-first > :first-child { grid-column: span 2; }
.gallery__item { margin: 0; display: grid; gap: 0.5rem; align-content: start; }
.gallery__item .img__media { --ratio: 1; }
.gallery--wide-first > :first-child .img__media { --ratio: 2 / 1; }
.gallery__open { display: block; width: 100%; padding: 0; border: 0; background: none; border-radius: var(--radius-tile); cursor: zoom-in; overflow: hidden; }
.gallery__open .img__media, .gallery__open .img-ph { transition: scale var(--duration-state-slow) var(--ease); }
.gallery__open:hover .img__media, .gallery__open:hover .img-ph, .gallery__open.is-hover .img__media, .gallery__open.is-hover .img-ph { scale: 1.03; }
.gallery__open.is-focus { outline: var(--border-focus) solid var(--focus); outline-offset: 3px; }
.masonry { columns: 2 10rem; column-gap: var(--space-16); }
@media (min-width: 900px) { .masonry { columns: 3; column-gap: var(--space-24); } }
.masonry > * { break-inside: avoid; margin-bottom: var(--space-16); }
@media (min-width: 900px) { .masonry > * { margin-bottom: var(--space-24); } }
/* Carousel: scroll snap, buttons below. Never for reviews on Studio Key. */
.carousel { display: grid; gap: 1rem; }
.carousel__track { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(15rem, 82%); gap: var(--space-16); overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; border-radius: var(--radius-tile); }
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__track > * { scroll-snap-align: start; }
@media (min-width: 768px) { .carousel__track { grid-auto-columns: calc((100% - 2 * var(--space-16)) / 3); } }
.carousel__nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.carousel__count { font-size: var(--fs-small); color: var(--ink-2); }
.carousel__btns { display: flex; gap: 0.5rem; }
/* Lightbox: a native dialog on a charcoal backdrop */
.lightbox { width: min(64rem, 100% - 2rem); max-width: none; max-height: calc(100% - 2rem); padding: 0; border: 0; background: transparent; color: var(--on-dark); overflow: visible; --focus: var(--mint); }
.lightbox::backdrop { background: color-mix(in srgb, var(--charcoal) 92%, transparent); }
.lightbox[open] { animation: lightbox-in var(--duration-state-slow) var(--ease); }
@keyframes lightbox-in { from { scale: 0.96; translate: 0 12px; } to { scale: 1; translate: 0 0; } }
.lightbox__inner { position: relative; display: grid; gap: 1rem; }
.lightbox__inner .img__media, .lightbox__inner .img-ph { border-radius: var(--radius-tile); box-shadow: var(--shadow-floating); }
.lightbox__caption { color: var(--on-dark-2); font-size: var(--fs-small); }
.lightbox__close { position: absolute; top: 0.75rem; right: 0.75rem; }
/* Before and after: a range input moves the divide (core JS writes --pos) */
.before-after { position: relative; overflow: hidden; border-radius: var(--radius-tile); aspect-ratio: var(--ratio, 3 / 2); --pos: 50%; background: var(--sand-2); }
.before-after__img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; border-radius: 0; }
.before-after__after { clip-path: inset(0 0 0 var(--pos)); }
.before-after__line { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 4px; translate: -2px 0; background: var(--cream); pointer-events: none; }
.before-after__knob { position: absolute; top: 50%; left: var(--pos); translate: -50% -50%; display: flex; align-items: center; justify-content: center; width: 3.5rem; height: 3.5rem; border-radius: var(--radius-circle); background: var(--mint); color: var(--charcoal); pointer-events: none; transition: scale var(--duration-micro) var(--ease); }
.before-after__knob .icon { width: 1.1rem; height: 1.1rem; }
.before-after input[type="range"] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.before-after:has(input:focus-visible) .before-after__knob { outline: var(--border-focus) solid var(--focus); outline-offset: 3px; }
.before-after:hover .before-after__knob { scale: 1.08; }
.before-after__tag { position: absolute; top: 1rem; padding: 0.3rem 0.9rem; border-radius: var(--radius-pill); background: var(--charcoal); color: var(--on-dark); font-size: var(--fs-small); font-weight: 700; pointer-events: none; }
.before-after__tag--before { left: 1rem; }
.before-after__tag--after { right: 1rem; }
/* ---------- Video ---------- */
/* Arch stage: the approved 9:16 frame on the organic mint blob, outside the hero */
.arch { position: relative; display: grid; place-items: center; overflow: clip; padding-block: 2rem; container-type: inline-size; --arch-max: 40rem; }
.arch { --arch-h: min(var(--arch-max) * 0.78, 100cqi * 1.21); }
.arch .blob { width: min(var(--arch-h) / 0.78, max(100cqi, var(--arch-h) * 1.05)); }
.arch .video { width: auto; height: var(--arch-h); }
.arch--sm { --arch-max: 26rem; }
.video.is-hover .video__play { transform: scale(1.06); }
/* Embed: 16:9 in a 32px tile, as a click-to-load facade */
.embed { position: relative; display: grid; place-items: center; aspect-ratio: var(--ratio, 16 / 9); width: 100%; border-radius: var(--radius-tile); overflow: hidden; background: var(--charcoal); color: var(--on-dark); --focus: var(--mint); isolation: isolate; }
.embed > .img-ph, .embed > img, .embed > iframe, .embed > video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; aspect-ratio: auto; object-fit: cover; z-index: -1; }
.embed__load { display: grid; justify-items: center; gap: 0.75rem; padding: 1.5rem; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; text-align: center; border-radius: var(--radius-tile); }
.embed__load .video__play { margin: 0; }
.embed__load:hover .video__play, .embed__load.is-hover .video__play { transform: scale(1.06); }
.embed__title { font-family: var(--font-display); font-variation-settings: "SOFT" 100; font-weight: 600; font-size: 1.5rem; line-height: 1.15; }
.embed__note { font-size: var(--fs-small); color: var(--on-dark-2); }
.embed__label { position: absolute; left: 1rem; top: 1rem; display: inline-flex; padding: 0.3rem 0.9rem; border-radius: var(--radius-pill); background: var(--charcoal); color: var(--on-dark); font-size: var(--fs-small); font-weight: 700; }
@media (max-width: 560px) { .embed:not(:has(iframe)) { --ratio: 4 / 3; } .embed .video__play { width: 4rem; height: 4rem; } }
.embed--vertical { --ratio: 9 / 16; max-width: 22rem; border-radius: var(--shape-arch); }
/* Video thumbnail: a tile you press to open a video */
.embed-thumb { display: grid; gap: 0.75rem; padding: 0; border: 0; background: none; color: var(--charcoal); font: inherit; text-align: left; cursor: pointer; border-radius: var(--radius-tile); }
.embed-thumb__media { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; border-radius: var(--radius-tile); overflow: hidden; isolation: isolate; }
.embed-thumb__media > .img-ph, .embed-thumb__media > img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; z-index: -1; }
.embed-thumb .clip__play { transition: scale var(--duration-state-slow) var(--ease); }
.embed-thumb:hover .clip__play, .embed-thumb:focus-visible .clip__play, .embed-thumb.is-hover .clip__play { scale: 1.2; }
.embed-thumb__time { position: absolute; right: 0.75rem; bottom: 0.75rem; padding: 0.2rem 0.7rem; border-radius: var(--radius-pill); background: var(--charcoal); color: var(--on-dark); font-size: var(--fs-caption); font-weight: 700; font-variant-numeric: tabular-nums; }
.embed-thumb__title { font-weight: 700; }
/* ---------- Round video thumbnail: extra sizes and documented states ---------- */
.clip--sm { width: 6rem; }
.clip--sm .clip__play { width: 2.75rem; height: 2.75rem; }
.clip--sm .clip__play svg { width: 1.25rem; height: 1.25rem; }
.clip--lg { width: clamp(10rem, 8rem + 8vw, 15rem); }
.clip--lg .clip__play { width: 4.5rem; height: 4.5rem; }
.clip.is-hover .clip__play { scale: 1.2; }
.clip.is-focus { outline: var(--border-focus) solid var(--focus); outline-offset: 4px; }
.clip.is-focus .clip__play { scale: 1.2; }
.clip.is-active .clip__play { scale: 1.1; }
.clip:disabled, .clip[aria-disabled="true"] { cursor: default; }
.clip:disabled .clip__play, .clip[aria-disabled="true"] .clip__play { background: var(--cream); scale: 1; }
/* ---------- Media player ---------- */
.player { position: relative; display: grid; border-radius: var(--radius-tile); overflow: hidden; background: var(--charcoal); color: var(--on-dark); --focus: var(--mint); }
.player__screen { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; }
.player__screen > video, .player__screen > .img-ph { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; }
.player__bar { display: flex; align-items: center; gap: 0.35rem; margin: 0.75rem; padding: 0.375rem 0.75rem 0.375rem 0.375rem; border-radius: var(--radius-pill); background: var(--charcoal-2); }
.player__btn { display: grid; place-items: center; flex: none; width: var(--touch-target); height: var(--touch-target); padding: 0; border: 0; border-radius: var(--radius-circle); background: transparent; color: var(--on-dark); cursor: pointer; transition: background-color var(--duration-micro) var(--ease), scale var(--duration-micro) var(--ease); }
.player__btn:hover, .player__btn.is-hover { background: var(--charcoal-3); }
.player__btn:active, .player__btn.is-active { scale: 0.94; }
.player__btn.is-focus { outline: var(--border-focus) solid var(--focus); outline-offset: 2px; }
.player__btn .icon { width: 1.35rem; height: 1.35rem; }
.player__btn--play { background: var(--mint); color: var(--charcoal); }
.player__btn--play:hover, .player__btn--play.is-hover { background: var(--mint-hover); }
.player__btn:disabled { color: var(--on-dark-2); cursor: default; background: transparent; }
.player__time { flex: none; padding-inline: 0.35rem; font-size: var(--fs-small); font-weight: 500; font-variant-numeric: tabular-nums; color: var(--on-dark-2); white-space: nowrap; }
.player__seek { flex: 1; min-width: 3rem; height: var(--touch-target); margin: 0; background: transparent; appearance: none; -webkit-appearance: none; cursor: pointer; --fill: 0%; }
.player__seek::-webkit-slider-runnable-track { height: 6px; border-radius: 6px; background: linear-gradient(to right, var(--mint) var(--fill), var(--charcoal-4) var(--fill)); }
.player__seek::-moz-range-track { height: 6px; border-radius: 6px; background: linear-gradient(to right, var(--mint) var(--fill), var(--charcoal-4) var(--fill)); }
.player__seek::-webkit-slider-thumb { -webkit-appearance: none; width: 1.1rem; height: 1.1rem; margin-top: calc(3px - 0.55rem); border-radius: var(--radius-circle); background: var(--on-dark); border: 0; }
.player__seek::-moz-range-thumb { width: 1.1rem; height: 1.1rem; border-radius: var(--radius-circle); background: var(--on-dark); border: 0; }
.player__seek:focus-visible { outline: var(--border-focus) solid var(--focus); outline-offset: 2px; border-radius: var(--radius-pill); }
.player__title { display: grid; gap: 0.1rem; min-width: 0; padding-inline: 0.5rem 0.25rem; }
.player__title strong { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player__title span { font-size: var(--fs-small); color: var(--on-dark-2); }
.player--audio { border-radius: var(--radius-pill); }
.player--audio .player__bar { margin: 0; background: transparent; padding: 0.5rem 1rem 0.5rem 0.5rem; }
.player--audio .player__btn--play { width: 3.25rem; height: 3.25rem; }
@media (max-width: 480px) { .player__time--total, .player__btn--extra { display: none; } }
/* ---------- Avatar, portrait, logo ---------- */
.avatar--sm { width: var(--touch-target); height: var(--touch-target); font-size: 0.875rem; }
.avatar--lg { width: 4.5rem; height: 4.5rem; font-size: 1.25rem; }
.avatar--xl { width: 6.5rem; height: 6.5rem; font: 600 1.75rem/1 var(--font-display); font-variation-settings: "SOFT" 100; }
.avatar--mint { background: var(--mint); color: var(--charcoal); }
.avatar--sky { background: var(--sky); color: var(--charcoal); }
.avatar--mustard { background: var(--mustard); color: var(--charcoal); }
.avatar--cream { background: var(--cream); color: var(--charcoal); }
.avatar .img-ph { width: 100%; height: 100%; aspect-ratio: 1; }
.avatar-stack { display: flex; }
.avatar-stack > .avatar { border: 3px solid var(--sand); }
.avatar-stack > .avatar + .avatar { margin-left: -0.9rem; }
.portrait { display: grid; gap: 0.9rem; margin: 0; align-content: start; }
.portrait__frame { position: relative; display: grid; isolation: isolate; padding: 1rem 1rem 0; }
.portrait__frame::before { content: ""; position: absolute; z-index: -1; inset: 18% 0 0; background: var(--portrait-blob, var(--mint)); border-radius: var(--shape-blob); rotate: var(--shape-blob-rotate); }
.portrait__frame .img__media, .portrait__frame .img-ph { border-radius: var(--shape-arch); --ratio: 3 / 4; aspect-ratio: 3 / 4; }
.portrait--sky { --portrait-blob: var(--sky); }
.portrait--mustard { --portrait-blob: var(--mustard); }
.portrait__name { font-family: var(--font-display); font-variation-settings: "SOFT" 100, "opsz" 36; font-weight: 600; font-size: var(--fs-h3); line-height: 1.2; }
.portrait__role { font-size: var(--fs-small); color: var(--ink-2); }
.logo-img { display: inline-flex; align-items: center; padding: 1.5rem; color: var(--charcoal); }
.logo-img .logo { width: var(--logo-w, 8.5rem); height: auto; }
.logo-img--dark { color: var(--on-dark); background: var(--charcoal); border-radius: var(--radius-md); }
.logo-img--mint { background: var(--mint); border-radius: var(--radius-md); }
.logo-img--clear { outline: 2px dashed var(--line); outline-offset: -2px; border-radius: var(--radius-sm); }
@media (prefers-reduced-motion: reduce) {
.gallery__open:hover .img__media, .gallery__open:hover .img-ph, .before-after:hover .before-after__knob { scale: 1; }
}
/* Controls laid over pictures get a solid charcoal disc so they read on any photo */
.bg-media__pause, .lightbox__close { background: var(--charcoal); color: var(--on-dark); --focus: var(--mint); }
.bg-media__pause:hover, .lightbox__close:hover { background: var(--charcoal-3); color: var(--mint); }
/* ================= Data and information =================
Numbers in Fraunces, labels in Figtree. Tone steps separate rows; 1px rules only in data tables. */
/* ---------- Statistic ---------- */
.stat { display: grid; gap: 0.4rem; align-content: start; }
.stat__value { font-family: var(--font-display); font-variation-settings: "SOFT" 100, "opsz" 144; font-weight: 600; font-size: var(--fs-h1); line-height: 0.95; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.stat__value small { font-size: 0.45em; letter-spacing: -0.01em; font-weight: 500; }
.stat__label { font-weight: 700; }
.stat__note { color: var(--ink-2); }
.stat--tile { padding: var(--tile-pad); border-radius: var(--radius-tile); background: var(--cream); }
.stat--mint { background: var(--mint); }
.stat--sky { background: var(--sky); }
.stat--mustard { background: var(--mustard); }
.stat--mint .stat__note, .stat--sky .stat__note, .stat--mustard .stat__note { color: var(--charcoal); }
.stat--dark { background: var(--charcoal-2); color: var(--on-dark); }
.stat--dark .stat__note { color: var(--on-dark-2); }
.stat--dark .stat__value { color: var(--mint); }
.stat-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.stat-grid--plain { gap: 2rem; }
/* KPI: a value, a label and a change against last period */
.kpi { display: grid; gap: 0.6rem; padding: 1.5rem; border-radius: var(--radius-tile); background: var(--cream); align-content: start; }
.kpi__label { font-size: var(--fs-small); font-weight: 500; color: var(--ink-2); }
.kpi__value { font-family: var(--font-display); font-variation-settings: "SOFT" 100, "opsz" 96; font-weight: 600; font-size: var(--fs-h2); line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.kpi__delta { display: inline-flex; align-items: center; gap: 0.35rem; width: fit-content; padding: 0.25rem 0.75rem; border-radius: var(--radius-pill); font-size: var(--fs-small); font-weight: 700; }
.kpi__delta .icon { width: 1rem; height: 1rem; }
.kpi__delta--up { background: var(--success-tint); color: var(--success-ink); }
.kpi__delta--down { background: var(--error-tint); color: var(--error-ink); }
.kpi__delta--flat { background: var(--sand-2); color: var(--ink-2); }
/* Milestones: round markers on a track (numerals, never icons) */
.milestones { display: grid; gap: 1.5rem; position: relative; }
.milestones li { display: grid; grid-template-columns: auto 1fr; gap: 0.25rem 1rem; align-items: center; }
.milestones__mark { grid-row: span 2; display: grid; place-items: center; width: 4.5rem; height: 4.5rem; border-radius: var(--radius-circle); background: var(--cream); font: 600 1.25rem/1 var(--font-display); font-variation-settings: "SOFT" 100; font-variant-numeric: tabular-nums; position: relative; z-index: 1; }
.milestones li.is-reached .milestones__mark { background: var(--mint); }
.milestones li.is-next .milestones__mark { background: var(--sand); outline: var(--border-control) dashed var(--line); outline-offset: -2px; }
.milestones strong { align-self: end; }
.milestones span:not(.milestones__mark) { color: var(--ink-2); align-self: start; }
.milestones li { position: relative; }
.milestones li:not(:last-child)::after { content: ""; position: absolute; left: 2.25rem; top: 4.5rem; bottom: -1.5rem; width: 4px; translate: -2px 0; border-radius: 4px; background: var(--sand-2); }
@media (min-width: 900px) {
.milestones { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.milestones li { grid-template-columns: 1fr; justify-items: start; }
.milestones__mark { grid-row: auto; }
.milestones li:not(:last-child)::after { left: 4.5rem; right: -1.5rem; top: 2.25rem; bottom: auto; width: auto; height: 4px; translate: 0 -2px; }
}
/* ---------- Progress ---------- */
.progress { display: grid; gap: 0.5rem; }
.progress__head { display: flex; justify-content: space-between; gap: 1rem; font-size: var(--fs-small); font-weight: 500; }
.progress__head output, .progress__value { font-weight: 700; font-variant-numeric: tabular-nums; }
.progress__bar { display: block; width: 100%; height: 12px; border: 0; border-radius: var(--radius-pill); background: var(--sand-2); appearance: none; -webkit-appearance: none; overflow: hidden; }
.progress__bar::-webkit-progress-bar { background: var(--sand-2); border-radius: var(--radius-pill); }
.progress__bar::-webkit-progress-value { background: var(--progress-fill, var(--mint-ink)); border-radius: var(--radius-pill); transition: width var(--duration-state) var(--ease); }
.progress__bar::-moz-progress-bar { background: var(--progress-fill, var(--mint-ink)); border-radius: var(--radius-pill); }
.progress--mint { --progress-fill: var(--mint); }
.progress--thin .progress__bar { height: 6px; }
.progress--dark .progress__bar, .on-dark .progress__bar, .field .progress__bar { background: var(--charcoal-4); }
.progress--dark .progress__bar::-webkit-progress-bar, .on-dark .progress__bar::-webkit-progress-bar, .field .progress__bar::-webkit-progress-bar { background: var(--charcoal-4); }
.progress--dark, .on-dark .progress, .field .progress { --progress-fill: var(--mint); }
.progress__help { font-size: var(--fs-small); color: var(--ink-2); }
.progress__bar:indeterminate { background: linear-gradient(90deg, var(--sand-2) 0 30%, var(--mint-ink) 30% 55%, var(--sand-2) 55%) 0 0 / 300% 100%; animation: progress-slide 1.4s var(--ease) infinite; }
.progress__bar:indeterminate::-webkit-progress-bar { background: transparent; }
@keyframes progress-slide { from { background-position: 100% 0; } to { background-position: 0 0; } }
/* Ring: an SVG circle with pathLength="100"; --val sets the arc */
.ring { position: relative; display: inline-grid; place-items: center; width: var(--ring-size, 7.5rem); aspect-ratio: 1; flex: none; }
.ring svg { position: absolute; inset: 0; width: 100%; height: 100%; rotate: -90deg; }
.ring__track, .ring__fill { fill: none; stroke-width: 10; }
.ring__track { stroke: var(--sand-2); }
.ring__fill { stroke: var(--ring-fill, var(--mint-ink)); stroke-linecap: round; stroke-dasharray: var(--val, 0) 100; transition: stroke-dasharray var(--duration-state) var(--ease); }
.ring__value { font: 600 1.75rem/1 var(--font-display); font-variation-settings: "SOFT" 100; font-variant-numeric: tabular-nums; }
.ring--sm { --ring-size: 4.5rem; }
.ring--sm .ring__value { font-size: 1.125rem; }
.ring--dark .ring__track { stroke: var(--charcoal-4); }
.ring--dark { --ring-fill: var(--mint); color: var(--on-dark); }
.ring-row { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.ring-row p { max-width: 20rem; }
/* ---------- Timeline (vertical process) ---------- */
.timeline { display: grid; gap: 2rem; position: relative; padding-left: 4rem; }
.timeline::before { content: ""; position: absolute; left: 1.25rem; top: 1.25rem; bottom: 1.25rem; width: 4px; translate: -2px 0; border-radius: 4px; background: var(--sand-2); }
.timeline > li { position: relative; display: grid; gap: 0.35rem; }
.timeline__mark { position: absolute; left: -4rem; top: 0; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: var(--radius-circle); background: var(--cream); font: 600 1.0625rem/1 var(--font-display); font-variation-settings: "SOFT" 100; }
.timeline > li.is-done .timeline__mark, .timeline > li.is-current .timeline__mark { background: var(--mint); }
.timeline__when { font-size: var(--fs-small); font-weight: 500; color: var(--text-muted); }
.timeline p { color: var(--ink-2); max-width: var(--measure); }
.timeline > li.is-current .timeline__when { color: var(--mint-ink); font-weight: 700; }
.on-dark .timeline::before, .field .timeline::before { background: var(--charcoal-4); }
.on-dark .timeline__mark, .field .timeline__mark { background: var(--charcoal-2); color: var(--on-dark); }
.on-dark .timeline p, .field .timeline p { color: var(--on-dark-2); }
/* Numbered steps: big Fraunces numerals, no circles, for instructions inside articles */
.numsteps { display: grid; gap: 1.5rem; counter-reset: numstep; }
.numsteps > li { display: grid; grid-template-columns: 3rem 1fr; gap: 0.25rem 1rem; counter-increment: numstep; }
.numsteps > li::before { content: counter(numstep); grid-row: span 2; font: 600 2.5rem/1 var(--font-display); font-variation-settings: "SOFT" 100, "opsz" 96; color: var(--mint-ink); font-variant-numeric: tabular-nums; }
.numsteps strong { display: block; }
.numsteps p { color: var(--ink-2); }
/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; padding: 0.75rem; border-radius: var(--radius-tile); background: var(--cream); }
.table-wrap:focus-visible { outline-offset: 3px; }
.table { width: 100%; border-collapse: separate; border-spacing: 0; text-align: left; font-variant-numeric: tabular-nums; }
.table caption { caption-side: top; text-align: left; padding: 1rem 1rem 0.75rem; font-family: var(--font-display); font-variation-settings: "SOFT" 100, "opsz" 36; font-weight: 600; font-size: var(--fs-h3); line-height: 1.2; }
.table th, .table td { padding: 0.9rem 1rem; vertical-align: top; }
.table th:first-child, .table td:first-child { padding-left: 1.25rem; }
.table th:last-child, .table td:last-child { padding-right: 1.25rem; }
.table thead th { vertical-align: bottom; font-weight: 700; font-size: var(--fs-small); color: var(--ink-2); }
.table tbody th { font-weight: 700; }
.table tbody tr:nth-child(odd) > * { background: var(--sand); }
.table tbody tr:nth-child(odd) > :first-child { border-radius: var(--radius-md) 0 0 var(--radius-md); }
.table tbody tr:nth-child(odd) > :last-child { border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.table .num { text-align: right; }
.table__yes, .table__no { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 500; }
.table__yes .icon { color: var(--mint-ink); }
.table__no { color: var(--ink-2); }
.table__no .icon { color: var(--text-muted); }
/* Data table: hairline rules allowed here, and only here */
.table--data tbody tr > * { background: none !important; border-radius: 0 !important; border-bottom: var(--border-hairline) solid var(--line); }
.table--data thead th { border-bottom: var(--border-control) solid var(--charcoal); }
.table--data tbody tr:last-child > * { border-bottom: var(--border-hairline) solid var(--line); }
.table--data tfoot td, .table--data tfoot th { font-weight: 700; }
.table__status { display: inline-flex; padding: 0.15rem 0.7rem; border-radius: var(--radius-pill); font-size: var(--fs-small); font-weight: 700; }
.table__status--ok { background: var(--success-tint); color: var(--success-ink); }
.table__status--due { background: var(--warning-tint); color: var(--warning-ink); }
.table__sort { display: inline-flex; align-items: center; gap: 0.35rem; min-height: var(--touch-target); padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; }
/* Comparison: the house column is filled mint, the other stays on cream */
.cmp-table thead th { vertical-align: bottom; padding-top: var(--tile-pad); }
.cmp-table thead .cmp-table__col { font: 600 var(--fs-h3)/1.2 var(--font-display); font-variation-settings: "SOFT" 100, "opsz" 36; color: var(--charcoal); }
.cmp-table .is-house { background: var(--mint) !important; }
.cmp-table thead .is-house { border-radius: var(--radius-md) var(--radius-md) 0 0; }
.cmp-table tbody tr:last-child .is-house { border-radius: 0 0 var(--radius-md) var(--radius-md); }
.cmp-table .is-house .table__yes .icon { color: var(--charcoal); }
.cmp-table .is-sky { background: var(--sky) !important; }
.cmp-table thead .is-sky { border-radius: var(--radius-md) var(--radius-md) 0 0; }
.cmp-table tbody tr:last-child .is-sky { border-radius: 0 0 var(--radius-md) var(--radius-md); }
.cmp-table .is-sky .table__yes .icon { color: var(--charcoal); }
.cmp-table__price { font: 600 var(--fs-h3)/1 var(--font-display); font-variation-settings: "SOFT" 100; }
.cmp-table tbody tr > :is(.is-house, .is-sky) { border-radius: 0 !important; }
.cmp-table tbody tr:last-child > :is(.is-house, .is-sky) { border-radius: 0 0 var(--radius-md) var(--radius-md) !important; }
/* Stack: under 640px each row becomes a block, labels from data-label */
@media (max-width: 639px) {
.table--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.table--stack, .table--stack tbody, .table--stack tr, .table--stack th, .table--stack td { display: block; }
.table--stack tbody tr { padding: 0.75rem 0; border-radius: var(--radius-md); }
.table--stack tbody tr:nth-child(odd) { background: var(--sand); }
.table--stack tbody tr > * { background: none !important; border-radius: 0 !important; padding: 0.35rem 1rem !important; border-bottom: 0 !important; }
.table--stack tbody th { font-size: 1.125rem; }
.table--stack caption { display: block; }
.table--stack tfoot tr { display: flex; justify-content: space-between; gap: 1rem; padding-inline: 1rem; }
.table--stack td[data-label] { display: flex; justify-content: space-between; gap: 1rem; text-align: right; }
.table--stack td[data-label]::before { content: attr(data-label); font-weight: 500; color: var(--ink-2); text-align: left; }
.table--stack tbody tr > :is(.is-house, .is-sky) { border-radius: var(--radius-sm) !important; }
.table--stack td.is-house, .table--stack td.is-sky { background: var(--mint) !important; margin-inline: 0.5rem; }
.table--stack td.is-sky { background: var(--sky) !important; }
}
/* Pricing table: every price on one tile */
.price-table { display: grid; gap: 0.75rem; padding: var(--tile-pad); border-radius: var(--radius-tile); background: var(--cream); }
.price-table__list { display: grid; gap: 0.35rem; }
.price-table__list > div { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 0.25rem 1rem; padding: 0.9rem 1.25rem; border-radius: var(--radius-md); }
.price-table__list > div:nth-child(odd) { background: var(--sand); }
.price-table dt { font-weight: 700; }
.price-table dd { font: 600 var(--fs-h4)/1.1 var(--font-display); font-variation-settings: "SOFT" 100; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.price-table dd small { font: 500 var(--fs-small)/1.3 var(--font-body); color: var(--ink-2); }
.price-table__note { grid-column: 1 / -1; font-size: var(--fs-small); color: var(--ink-2); }
.price-table__title { margin-bottom: 0.25rem; }
/* ---------- Key-value, specification, hours, address ---------- */
.kv { display: grid; gap: 1.1rem; }
.kv > div { display: grid; grid-template-columns: minmax(8rem, 1fr) 2fr; gap: 0.15rem 1.5rem; }
.kv dt { font-weight: 700; }
.kv dd { color: var(--ink-2); }
@media (max-width: 480px) { .kv > div { grid-template-columns: 1fr; } }
.on-dark .kv dd, .field .kv dd { color: var(--on-dark-2); }
.spec { display: grid; gap: 0.25rem; padding: 1rem; border-radius: var(--radius-tile); background: var(--cream); }
.spec > div { display: grid; grid-template-columns: minmax(9rem, 1fr) 1.4fr; gap: 0.15rem 1.25rem; padding: 0.75rem 1rem; border-radius: var(--radius-md); }
.spec > div:nth-child(odd) { background: var(--sand); }
.spec dt { font-weight: 700; }
.spec dd { color: var(--ink-2); }
@media (max-width: 480px) { .spec > div { grid-template-columns: 1fr; } }
.hours { display: grid; gap: 0.25rem; }
.hours > div { display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: var(--touch-target); padding: 0.4rem 1rem; border-radius: var(--radius-pill); }
.hours dt { font-weight: 500; }
.hours dd { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.hours .is-closed dd { color: var(--ink-2); font-weight: 500; }
.hours .is-today { background: var(--mint); }
.hours .is-today dt::after { content: " (today)"; font-weight: 400; }
.hours__head { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.5rem; }
.hours__head .icon { color: var(--mint-ink); }
.address { display: grid; gap: 0.25rem; font-style: normal; }
.address a, .address__row { display: inline-flex; align-items: center; gap: 0.75rem; min-height: var(--touch-target); color: var(--charcoal); text-decoration: none; font-weight: 500; }
.address a:hover { color: var(--mint-ink); text-decoration: underline; text-underline-offset: 0.25em; }
.address .icon { color: var(--mint-ink); }
.address__row--muted { color: var(--ink-2); font-weight: 400; }
.address--dark a, .address--dark .address__row { color: var(--on-dark); }
.address--dark a:hover { color: var(--mint); }
.address--dark .icon { color: var(--mint); }
.address--dark .address__row--muted { color: var(--on-dark-2); }
.address--legal { font-size: var(--fs-small); color: var(--ink-2); line-height: 1.45; }
/* ---------- Location map (static, illustrative) ---------- */
.map { position: relative; display: grid; aspect-ratio: var(--ratio, 4 / 3); border-radius: var(--radius-tile); overflow: hidden; background: var(--sand-2); isolation: isolate; }
.map__art { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.map__land { fill: var(--sand-2); }
.map__area { fill: var(--cream); }
.map__road { fill: none; stroke: var(--cream); stroke-width: 6; stroke-linecap: round; }
.map__water { fill: none; stroke: var(--sky); stroke-width: 10; stroke-linecap: round; }
.map__park { fill: var(--mint); opacity: 0.35; }
.map__pin { position: absolute; left: var(--x, 50%); top: var(--y, 50%); translate: -50% -100%; display: grid; justify-items: center; gap: 0.35rem; }
.map__pin::before { content: ""; width: 2.75rem; height: 2.75rem; border-radius: 50% 50% 50% 0; rotate: -45deg; background: var(--mint); box-shadow: inset 0 0 0 0.85rem var(--mint), inset 0 0 0 2rem var(--charcoal); order: 2; }
.map__label { order: 1; padding: 0.3rem 0.9rem; border-radius: var(--radius-pill); background: var(--charcoal); color: var(--on-dark); font-size: var(--fs-small); font-weight: 700; white-space: nowrap; }
.map__town { position: absolute; left: var(--x); top: var(--y); translate: -50% -50%; padding: 0.1rem 0.6rem; border-radius: var(--radius-pill); background: var(--cream); font-size: var(--fs-caption); font-weight: 700; white-space: nowrap; }
.map__consent { position: absolute; left: 1rem; right: 1rem; bottom: 1rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1rem; padding: 0.75rem 0.75rem 0.75rem 1.25rem; border-radius: var(--radius-md); background: var(--charcoal); color: var(--on-dark); --focus: var(--mint); }
.map__consent p { font-size: var(--fs-small); color: var(--on-dark-2); max-width: 30rem; }
.map__note { font-size: var(--fs-caption); color: var(--text-muted); }
.map-wrap { display: grid; gap: 0.75rem; }
.map-towns { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.map-towns li { padding: 0.35rem 0.9rem; border-radius: var(--radius-pill); background: var(--cream); font-size: var(--fs-small); font-weight: 500; }
@media (max-width: 480px) { .map__town { display: none; } .map { --ratio: 1; } }
/* ---------- Logos, trust indicators, awards ---------- */
.logos { display: grid; gap: var(--space-16); grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr)); align-items: center; }
.logos__item { display: grid; place-items: center; gap: 0.35rem; min-height: 5.5rem; padding: 1rem; border-radius: var(--radius-md); background: var(--cream); color: var(--ink-2); text-align: center; font-size: var(--fs-small); font-weight: 500; }
.logos__item img, .logos__item svg { max-height: 2.5rem; width: auto; filter: grayscale(1); opacity: 0.9; }
.logos__item--sample { background: var(--sand-2); }
.logos--strip { display: flex; gap: var(--space-16); overflow-x: auto; scrollbar-width: none; }
.logos--strip .logos__item { flex: 0 0 9.5rem; }
.logos--badges .logos__item { border-radius: var(--radius-circle); aspect-ratio: 1; width: 7.5rem; min-height: 0; justify-self: start; }
.trust { display: grid; gap: 1.25rem 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.trust li { display: flex; align-items: center; gap: 0.75rem; line-height: 1.35; }
.trust li > .icon, .trust li > .stars { color: var(--mint-ink); }
.trust li > .icon { width: 1.6rem; height: 1.6rem; }
.trust strong { display: block; }
.trust span span { display: block; font-size: var(--fs-small); color: var(--ink-2); }
.trust li > .stars { color: var(--mustard); flex-direction: column; gap: 0; }
.trust--row { display: flex; flex-wrap: wrap; gap: 0.75rem 1.75rem; }
.trust--row span span { display: none; }
.on-dark .trust li > .icon, .field .trust li > .icon { color: var(--mint); }
.on-dark .trust span span, .field .trust span span { color: var(--on-dark-2); }
@media (prefers-reduced-motion: reduce) {
.progress__bar:indeterminate { animation: none; background: var(--sand-2); }
}
/* ---------- Feedback: alerts, toasts, tooltips, dialogs, loading, states, cookies ---------- */
/* Alert: a tone tile with an icon AND a word, so colour is never the only cue */
.alert { display: flex; gap: 0.9rem; align-items: flex-start; padding: 1rem 1.25rem; border-radius: var(--radius-md); background: var(--info-tint); color: var(--charcoal); }
.alert > .icon { width: 1.5rem; height: 1.5rem; margin-top: 0.1rem; color: var(--info-ink); }
.alert__body { flex: 1; display: grid; gap: 0.25rem; min-width: 0; }
.alert__title { font-weight: 700; }
.alert__title b { color: var(--info-ink); }
.alert__body p { font-size: var(--fs-body); }
.alert__body .actions { margin-top: 0.5rem; gap: 0.5rem 1.25rem; }
.alert--success { background: var(--success-tint); }
.alert--success > .icon, .alert--success .alert__title b { color: var(--success-ink); }
.alert--warning { background: var(--warning-tint); }
.alert--warning > .icon, .alert--warning .alert__title b { color: var(--warning-ink); }
.alert--error { background: var(--error-tint); }
.alert--error > .icon, .alert--error .alert__title b { color: var(--error-ink); }
.alert--info { background: var(--info-tint); }
.alert--banner { border-radius: var(--radius-pill); padding: 0.75rem 0.75rem 0.75rem 1.5rem; align-items: center; }
.alert--banner .alert__body { display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; align-items: baseline; }
@media (max-width: 640px) { .alert--banner { border-radius: var(--radius-md); align-items: flex-start; padding: 1rem 0.75rem 1rem 1.25rem; } }
.alert__close { flex: none; display: inline-grid; place-items: center; width: var(--touch-target); height: var(--touch-target); margin: -0.6rem -0.6rem -0.6rem 0; border: 0; border-radius: var(--radius-circle); background: transparent; color: var(--charcoal); cursor: pointer; transition: background-color var(--duration-micro) var(--ease); }
.alert__close:hover, .alert__close.is-hover { background: color-mix(in srgb, var(--charcoal) 8%, transparent); }
.alert__close .icon { width: 1.25rem; height: 1.25rem; }
/* Inline message: a single line under a field or in a tile, no fill */
.status-msg { display: flex; gap: 0.5rem; align-items: flex-start; font-size: var(--fs-small); font-weight: 500; line-height: 1.45; color: var(--info-ink); }
.status-msg .icon { width: 1.15rem; height: 1.15rem; margin-top: 0.1rem; }
.status-msg--success { color: var(--success-ink); }
.status-msg--warning { color: var(--warning-ink); }
.status-msg--error { color: var(--error-ink); }
.field .status-msg--error, .on-dark .status-msg--error, .coupon .status-msg--error { color: var(--error-on-dark); }
.field .status-msg--success, .on-dark .status-msg--success, .coupon .status-msg--success { color: var(--mint); }
.field .status-msg--info, .on-dark .status-msg--info, .coupon .status-msg--info { color: var(--on-dark-2); }
/* Alerts inside a dark field */
.alert--dark { background: var(--charcoal-2); color: var(--on-dark); }
.alert--dark > .icon, .alert--dark .alert__title b { color: var(--mint); }
.alert--dark.alert--error > .icon, .alert--dark.alert--error .alert__title b { color: var(--error-on-dark); }
.alert--dark .alert__close { color: var(--on-dark); }
/* Toasts: float bottom right, charcoal, the only toast surface */
.toasts { position: fixed; z-index: var(--z-toast); right: 1.5rem; bottom: 1.5rem; display: grid; gap: 0.6rem; width: min(26rem, calc(100vw - 2rem)); pointer-events: none; }
.toasts--static { position: static; width: 100%; max-width: 26rem; }
.toast { pointer-events: auto; display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 0.6rem 0.6rem 1.25rem; min-height: 3.75rem; border-radius: var(--radius-md); background: var(--charcoal); color: var(--on-dark); box-shadow: var(--shadow-floating); animation: toast-in var(--duration-state-slow) var(--ease) both; --focus: var(--mint); }
.toast > .icon { width: 1.4rem; height: 1.4rem; color: var(--mint); }
.toast--error > .icon { color: var(--error-on-dark); }
.toast--warning > .icon { color: var(--mustard); }
.toast--info > .icon { color: var(--sky); }
.toast p { flex: 1; font-size: var(--fs-small); font-weight: 500; line-height: 1.4; }
.toast p b { display: block; font-size: var(--fs-body); }
.toast .icon-btn { flex: none; display: inline-grid; place-items: center; width: var(--touch-target); height: var(--touch-target); border: 0; border-radius: var(--radius-circle); background: transparent; color: var(--on-dark); cursor: pointer; }
.toast .icon-btn:hover { background: var(--charcoal-2); }
.toast .icon-btn .icon { width: 1.2rem; height: 1.2rem; }
@keyframes toast-in { from { translate: 0 16px; } to { translate: 0 0; } }
@media (max-width: 1023px) { .toasts:not(.toasts--static) { left: 0.75rem; right: 0.75rem; width: auto; bottom: calc(5.25rem + env(safe-area-inset-bottom, 0px)); } }
/* Notification: a quiet cream row in a list (inbox style), not floating */
.notice-list { display: grid; gap: 0.5rem; }
.notification { display: flex; gap: 1rem; align-items: flex-start; padding: 1rem 1.25rem; border-radius: var(--radius-md); background: var(--cream); }
.notification > .icon { width: 1.5rem; height: 1.5rem; color: var(--mint-ink); margin-top: 0.15rem; }
.notification__body { flex: 1; display: grid; gap: 0.15rem; }
.notification__body strong { font-weight: 700; }
.notification__body span { color: var(--ink-2); font-size: var(--fs-small); }
.notification--unread { background: var(--mint); }
.notification--unread > .icon { color: var(--charcoal); }
.notification--unread .notification__body span { color: var(--charcoal); }
/* Tooltip: a small charcoal label, shown on hover and focus */
.tip { position: relative; display: inline-flex; }
.tooltip { position: absolute; left: 50%; bottom: calc(100% + 10px); translate: -50% 4px; z-index: var(--z-overlay); width: max-content; max-width: 16rem; padding: 0.5rem 0.85rem; border-radius: var(--radius-sm); background: var(--charcoal); color: var(--on-dark); font: 500 var(--fs-small)/1.4 var(--font-body); text-align: center; box-shadow: var(--shadow-elevated); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--duration-micro) var(--ease), translate var(--duration-micro) var(--ease), visibility var(--duration-micro); }
.tooltip::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -6px; border: 6px solid transparent; border-top-color: var(--charcoal); }
.tip:hover .tooltip, .tip:focus-within .tooltip, .tooltip.is-open { opacity: 1; visibility: visible; translate: -50% 0; }
.tooltip--below { bottom: auto; top: calc(100% + 10px); }
.tooltip--below::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: var(--charcoal); }
.tip-trigger { display: inline-grid; place-items: center; width: var(--touch-target); height: var(--touch-target); border: 0; border-radius: var(--radius-circle); background: transparent; color: var(--mint-ink); cursor: help; }
.tip-trigger .icon { width: 1.4rem; height: 1.4rem; }
.tip-term { font-weight: 700; text-decoration: underline dotted var(--mint-ink) 2px; text-underline-offset: 0.25em; cursor: help; border-radius: 4px; }
/* Popover: a cream panel that floats; opened by a button */
.pop { position: relative; display: inline-block; }
.popover { position: absolute; left: 0; top: calc(100% + 10px); z-index: var(--z-overlay); width: min(22rem, calc(100vw - 2rem)); padding: 1.25rem 1.25rem 1.25rem 1.5rem; border-radius: var(--radius-md); background: var(--cream); color: var(--charcoal); box-shadow: var(--shadow-elevated); display: grid; gap: 0.6rem; }
.popover[hidden] { display: none; }
.popover__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-right: -0.5rem; }
.popover p { font-size: var(--fs-body); color: var(--ink-2); }
.popover--static { position: static; }
/* Dialog: a cream tile over a charcoal veil */
.dialog { width: min(34rem, calc(100vw - 2rem)); max-height: calc(100svh - 2rem); padding: 0; border: 0; border-radius: var(--radius-tile); background: var(--cream); color: var(--charcoal); box-shadow: var(--shadow-floating); overflow: auto; }
.dialog::backdrop { background: rgba(28, 31, 34, 0.6); }
.dialog[open] { animation: dialog-in var(--duration-state-slow) var(--ease) both; }
@keyframes dialog-in { from { translate: 0 24px; scale: 0.98; } to { translate: 0 0; scale: 1; } }
.dialog__inner { padding: var(--tile-pad); display: grid; gap: 1.25rem; }
.dialog__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.dialog__head .h3 { padding-top: 0.35rem; }
.dialog__x { flex: none; display: inline-grid; place-items: center; width: var(--touch-target); height: var(--touch-target); margin: -0.25rem -0.75rem 0 0; border: 0; border-radius: var(--radius-circle); background: transparent; color: var(--charcoal); cursor: pointer; transition: background-color var(--duration-micro) var(--ease); }
.dialog__x:hover { background: var(--sand-2); }
.dialog__x .icon { width: 1.4rem; height: 1.4rem; }
.dialog__body { display: grid; gap: 0.75rem; color: var(--ink-2); }
.dialog__foot { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: flex-end; }
.dialog--static { position: static; display: block; box-shadow: var(--shadow-floating); margin: 0; }
.confirm .dialog__head { justify-content: flex-start; }
.confirm__mark { color: var(--warning-ink); }
.confirm__mark .icon { width: 2rem; height: 2rem; }
.confirm--danger .confirm__mark { color: var(--error-ink); }
.btn--danger { background: var(--coral); border-color: var(--coral); color: var(--charcoal); }
.btn--danger:hover { background: color-mix(in srgb, var(--coral) 85%, var(--cream)); border-color: color-mix(in srgb, var(--coral) 85%, var(--cream)); }
@media (max-width: 559px) { .dialog__foot .btn { flex: 1 1 100%; } }
/* Loading: a mint arc on a sand-2 ring, plus skeletons */
.spinner { display: inline-block; width: 2.5rem; height: 2.5rem; border-radius: var(--radius-circle); border: 4px solid var(--sand-2); border-top-color: var(--mint); animation: spin 0.9s linear infinite; flex: none; }
.spinner--sm { width: 1.25rem; height: 1.25rem; border-width: 3px; }
.spinner--lg { width: 4rem; height: 4rem; border-width: 6px; }
.on-dark .spinner, .field .spinner, .ds-dark .spinner { border-color: var(--charcoal-2); border-top-color: var(--mint); }
@keyframes spin { to { rotate: 360deg; } }
.loading { display: inline-flex; align-items: center; gap: 0.75rem; color: var(--ink-2); font-weight: 500; }
.loading-dots { display: inline-flex; gap: 6px; }
.loading-dots span { width: 10px; height: 10px; border-radius: var(--radius-circle); background: var(--mint); animation: bob 1s var(--ease) infinite; }
.loading-dots span:nth-child(2) { animation-delay: 120ms; }
.loading-dots span:nth-child(3) { animation-delay: 240ms; }
@keyframes bob { 0%, 60%, 100% { translate: 0 0; } 30% { translate: 0 -6px; } }
.skeleton { display: block; border-radius: var(--radius-pill); background: var(--sand-2); position: relative; overflow: hidden; }
.skeleton::after { content: ""; position: absolute; inset: 0; translate: -100% 0; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--cream) 60%, transparent), transparent); animation: shimmer 1.6s var(--ease) infinite; }
@keyframes shimmer { to { translate: 100% 0; } }
.skeleton--line { height: 1rem; }
.skeleton--title { height: 1.75rem; width: 70%; }
.skeleton--short { width: 45%; }
.skeleton--block { border-radius: var(--radius-tile); aspect-ratio: 16 / 10; }
.skeleton--circle { border-radius: var(--radius-circle); width: 3.25rem; height: 3.25rem; flex: none; }
.skeleton-card { background: var(--cream); border-radius: var(--radius-tile); padding: var(--tile-pad); display: grid; gap: 0.9rem; }
.skeleton-card .skeleton { background: var(--sand-2); }
.skeleton-row { display: flex; gap: 0.9rem; align-items: center; }
.skeleton-row > div { flex: 1; display: grid; gap: 0.5rem; }
@media (prefers-reduced-motion: reduce) { .skeleton::after { display: none; } .spinner { animation: spin 2.4s linear infinite !important; } }
/* Status states: empty, error, success. A big bare icon, a Fraunces line, one action */
.state { display: grid; justify-items: center; text-align: center; gap: 1rem; padding: clamp(2.5rem, 2rem + 3vw, 4.5rem) var(--tile-pad); border-radius: var(--radius-tile); background: var(--cream); }
.state > .icon { width: 3.5rem; height: 3.5rem; color: var(--mint-ink); }
.state .h3 { max-width: 20ch; }
.state p { color: var(--ink-2); max-width: 36ch; }
.state .actions { justify-content: center; margin-top: 0.5rem; }
.state--error > .icon { color: var(--error-ink); }
.state--success { background: var(--mint); }
.state--success > .icon { color: var(--charcoal); }
.state--success p { color: var(--charcoal); }
.state--bare { background: transparent; }
.state__code { font-family: var(--font-display); font-variation-settings: "SOFT" 100, "opsz" 144; font-weight: 600; font-size: var(--fs-price); line-height: 0.9; letter-spacing: -0.04em; }
/* Cookie consent: Accept and Reject share one style and size */
.cookie { position: fixed; z-index: var(--z-overlay); left: var(--field-inset); right: var(--field-inset); bottom: calc(var(--field-inset) + env(safe-area-inset-bottom, 0px)); margin-inline: auto; max-width: 60rem; padding: 1.25rem 1.25rem 1.25rem 1.75rem; border-radius: var(--radius-tile); background: var(--charcoal); color: var(--on-dark); box-shadow: var(--shadow-elevated); display: grid; gap: 1rem; align-items: center; --focus: var(--mint); }
.cookie--static { position: static; }
.cookie[hidden] { display: none; }
.cookie__text { display: grid; gap: 0.25rem; }
.cookie__text strong { font-family: var(--font-display); font-variation-settings: "SOFT" 100, "opsz" 36; font-weight: 600; font-size: var(--fs-h4); }
.cookie__text p { color: var(--on-dark-2); }
.cookie__text a { color: var(--mint); }
.cookie__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }
.cookie__actions .btn { min-width: 9rem; }
.cookie__choice { background: var(--cream); border-color: var(--cream); color: var(--charcoal); }
.cookie__choice:hover { background: var(--mint); border-color: var(--mint); }
.cookie__manage { color: var(--on-dark); }
@media (min-width: 900px) { .cookie { grid-template-columns: 1fr auto; } }
@media (max-width: 559px) { .cookie__actions .btn { flex: 1 1 8rem; min-width: 0; } .cookie { padding: 1.25rem; } }
/* Privacy preference panel */
.prefs { display: grid; gap: 0.6rem; }
.prefs__row { display: flex; gap: 1rem; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; border-radius: var(--radius-md); background: var(--sand); }
.prefs__row div { display: grid; gap: 0.15rem; }
.prefs__row strong { font-weight: 700; }
.prefs__row span { font-size: var(--fs-small); color: var(--ink-2); }
.prefs__switch { position: relative; flex: none; display: inline-flex; align-items: center; min-height: var(--touch-target); cursor: pointer; }
.prefs__switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.prefs__switch i { display: block; width: 3.25rem; height: 1.9rem; border-radius: var(--radius-pill); background: var(--line); position: relative; transition: background-color var(--duration-micro) var(--ease); }
.prefs__switch i::after { content: ""; position: absolute; top: 0.25rem; left: 0.25rem; width: 1.4rem; height: 1.4rem; border-radius: var(--radius-circle); background: var(--cream); transition: translate var(--duration-micro) var(--ease); }
.prefs__switch input:checked + i { background: var(--mint-ink); }
.prefs__switch input:checked + i::after { translate: 1.35rem 0; }
.prefs__switch input:focus-visible + i { outline: var(--border-focus) solid var(--focus); outline-offset: 3px; }
.prefs__switch input:disabled { cursor: not-allowed; }
.prefs__switch input:disabled + i { opacity: 0.6; }
.prefs__lock { font-size: var(--fs-small); font-weight: 700; color: var(--mint-ink); display: inline-flex; align-items: center; gap: 0.35rem; }
/* Buttons styled as text links inside feedback and consent UI */
.pop > button.link, .cookie__manage { background: none; border: 0; padding: 0; font: inherit; font-weight: 700; cursor: pointer; }
/* ---------- Conversion: CTAs, contact routes, lead forms, sticky bar, trust ---------- */
/* CTA section: dark field (primary) or cream tile (secondary). Copy left, actions right on desktop */
.cta { display: grid; gap: 1.5rem 3rem; align-items: center; padding: var(--tile-pad); border-radius: var(--radius-tile); background: var(--cream); }
.cta__copy { display: grid; gap: 1rem; }
.cta__copy .h2 { max-width: 16ch; }
.cta__copy p { color: var(--ink-2); max-width: var(--measure); }
.cta .actions { gap: 0.75rem 1.75rem; }
.cta--dark { background: var(--charcoal); color: var(--on-dark); border-radius: var(--radius-field); padding: clamp(2.5rem, 1.5rem + 4vw, 5rem); --focus: var(--mint); }
.cta--dark .h2 { color: var(--on-dark); }
.cta--dark .cta__copy p { color: var(--on-dark-2); }
.cta--dark .link { color: var(--on-dark); }
.cta--mint { background: var(--mint); }
.cta--mint .cta__copy p { color: var(--charcoal); }
.cta--sky { background: var(--sky); }
.cta--sky .cta__copy p { color: var(--charcoal); }
@media (min-width: 900px) { .cta--split { grid-template-columns: minmax(0, 1.4fr) auto; } .cta--split .actions { justify-content: flex-end; } }
.cta__aside { display: flex; align-items: center; gap: 0.6rem; font-size: var(--fs-small); color: var(--ink-2); }
.cta--dark .cta__aside { color: var(--on-dark-2); }
.cta__aside .icon { color: var(--mint-ink); }
.cta--dark .cta__aside .icon { color: var(--mint); }
/* Full-width CTA band: a dark field across the page, centred, the blob peeking from one edge */
.cta-band { position: relative; overflow: clip; text-align: center; padding-block: var(--section-space); padding-inline: var(--gutter); background: var(--charcoal); color: var(--on-dark); border-radius: var(--radius-field); margin-inline: var(--field-inset); display: grid; justify-items: center; gap: 1.25rem; --focus: var(--mint); }
.cta-band .display, .cta-band .h2 { color: var(--on-dark); max-width: 16ch; position: relative; }
.cta-band p { color: var(--on-dark-2); max-width: var(--measure); position: relative; }
.cta-band .actions { justify-content: center; position: relative; margin-top: 0.5rem; }
.cta-band .link { color: var(--on-dark); }
.cta-band__blob { position: absolute; width: clamp(14rem, 10rem + 18vw, 30rem); aspect-ratio: 1; background: var(--mint); border-radius: var(--shape-blob); rotate: var(--shape-blob-rotate); right: -8%; bottom: -40%; }
/* Resource CTA: a tile with a big file glyph (bare, never in a circle) */
.cta-resource { display: grid; gap: 1rem 2rem; align-items: center; padding: var(--tile-pad); border-radius: var(--radius-tile); background: var(--sky); }
.cta-resource > .icon { width: 4rem; height: 4rem; color: var(--charcoal); }
.cta-resource p { color: var(--charcoal); }
.cta-resource .meta { color: var(--charcoal); }
@media (min-width: 768px) { .cta-resource { grid-template-columns: auto 1fr auto; } }
/* Contact banner: one cream pill with the three routes */
.contact-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; padding: 1.25rem 1.25rem 1.25rem 2rem; border-radius: var(--radius-pill); background: var(--cream); }
.contact-banner__lead { display: grid; gap: 0.15rem; }
.contact-banner__lead strong { font-family: var(--font-display); font-variation-settings: "SOFT" 100, "opsz" 36; font-weight: 600; font-size: var(--fs-h3); line-height: 1.2; }
.contact-banner__lead span { color: var(--ink-2); font-size: var(--fs-small); }
.contact-banner__routes { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.25rem; }
@media (max-width: 767px) { .contact-banner { border-radius: var(--radius-tile); padding: 1.5rem; } }
/* Contact card: a tile, Rich's routes, hours and promise */
.contact-card { display: grid; gap: 1.25rem; padding: var(--tile-pad); border-radius: var(--radius-tile); background: var(--cream); align-content: start; }
.contact-card--dark { background: var(--charcoal); color: var(--on-dark); --focus: var(--mint); }
.contact-card__who { display: flex; align-items: center; gap: 0.9rem; }
.contact-card__who strong { display: block; font-family: var(--font-display); font-variation-settings: "SOFT" 100, "opsz" 36; font-weight: 600; font-size: var(--fs-h3); line-height: 1.2; }
.contact-card__who span span { color: var(--ink-2); font-size: var(--fs-small); }
.contact-card--dark .contact-card__who span span { color: var(--on-dark-2); }
.contact-card__routes { display: grid; gap: 0.15rem; }
.contact-card__hours { display: flex; align-items: center; gap: 0.6rem; color: var(--ink-2); font-size: var(--fs-small); }
.contact-card__hours .icon { color: var(--mint-ink); }
.contact-card--dark .contact-card__hours { color: var(--on-dark-2); }
.contact-card--dark .contact-card__hours .icon { color: var(--mint); }
/* Route links: phone in Fraunces, email, WhatsApp. Icons bare, never in circles */
.phone-cta, .email-cta, .wa-cta { display: inline-flex; align-items: center; gap: 0.7rem; min-height: var(--touch-target); color: var(--charcoal); text-decoration: none; font-weight: 500; transition: color var(--duration-micro) var(--ease); }
.phone-cta { font-family: var(--font-display); font-variation-settings: "SOFT" 100, "opsz" 36; font-weight: 600; font-size: var(--fs-h3); letter-spacing: -0.01em; }
.phone-cta--xl { font-size: var(--fs-h2); letter-spacing: -0.025em; font-variation-settings: "SOFT" 100, "opsz" 96; }
.phone-cta .icon, .email-cta .icon { color: var(--mint-ink); }
.phone-cta:hover, .email-cta:hover, .wa-cta:hover, .phone-cta.is-hover { color: var(--mint-ink); }
.wa-cta .icon { width: 1.6rem; height: 1.6rem; }
.email-cta span, .wa-cta span { text-decoration: underline; text-decoration-color: var(--mint); text-decoration-thickness: 3px; text-underline-offset: 0.3em; }
.on-dark .phone-cta, .on-dark .email-cta, .on-dark .wa-cta, .contact-card--dark .phone-cta, .contact-card--dark .email-cta, .contact-card--dark .wa-cta, .field .phone-cta, .field .email-cta, .field .wa-cta { color: var(--on-dark); }
.on-dark .phone-cta .icon, .on-dark .email-cta .icon, .contact-card--dark .phone-cta .icon, .contact-card--dark .email-cta .icon, .field .phone-cta .icon, .field .email-cta .icon { color: var(--mint); }
.on-dark .phone-cta:hover, .contact-card--dark .phone-cta:hover, .contact-card--dark .email-cta:hover, .contact-card--dark .wa-cta:hover { color: var(--mint); }
.btn--wa { background: var(--whatsapp); border-color: var(--whatsapp); color: var(--charcoal); }
.btn--wa .icon path { fill: var(--charcoal); }
.btn--wa:hover { background: color-mix(in srgb, var(--whatsapp) 80%, var(--cream)); border-color: color-mix(in srgb, var(--whatsapp) 80%, var(--cream)); }
/* Lead forms on light: a cream tile around light fields (.ff/.input from Forms) */
.lead-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; padding: var(--tile-pad); border-radius: var(--radius-tile); background: var(--cream); align-content: start; }
.lead-form__head { display: grid; gap: 0.5rem; }
.lead-form__head p { color: var(--ink-2); }
.lead-form .row2 { gap: 1rem; }
.lead-form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; }
.lead-form__note { display: flex; align-items: center; gap: 0.5rem; font-size: var(--fs-small); color: var(--ink-2); }
.lead-form__note .icon { color: var(--mint-ink); }
.lead-form--dark { background: var(--charcoal); color: var(--on-dark); --focus: var(--mint); }
.lead-form--dark .lead-form__head p, .lead-form--dark .lead-form__note { color: var(--on-dark-2); }
.lead-form--dark .lead-form__note .icon { color: var(--mint); }
/* Fallback light field, in case the Forms partial is not loaded: scoped to lead forms only */
.lead-form .ff { display: grid; gap: 0.4rem; }
.lead-form .ff__label { font-weight: 500; font-size: var(--fs-small); }
.lead-form .input { width: 100%; min-height: var(--button-height); padding: 0.75rem 1.25rem; border-radius: var(--radius-input); border: var(--border-control) solid var(--line); background: var(--cream); color: var(--charcoal); font: inherit; }
.lead-form .input:focus { outline: none; border-color: var(--mint-ink); box-shadow: 0 0 0 1px var(--mint-ink); }
.lead-form textarea.input { border-radius: var(--radius-textarea); min-height: 6rem; resize: vertical; }
.lead-form .ff__error { color: var(--error-ink); font-size: var(--fs-small); font-weight: 500; }
.lead-form .input[aria-invalid="true"] { border-color: var(--error-ink); }
.lead-form .ff__help { color: var(--ink-2); font-size: var(--fs-small); }
/* Light chips (quote form) */
.lead-form .chips span, .lead-form .seg span { background: var(--sand); color: var(--charcoal); }
.lead-form .chips input:checked + span, .lead-form .seg input:checked + span { background: var(--mint); }
.lead-form .chips input:focus-visible + span, .lead-form .seg input:focus-visible + span { outline-color: var(--mint-ink); }
.lead-form--dark .chips span, .lead-form--dark .seg span { background: var(--charcoal-2); color: var(--on-dark); }
.lead-form--dark .chips input:checked + span, .lead-form--dark .seg input:checked + span { background: var(--mint); color: var(--charcoal); }
.lead-form .check { color: var(--ink-2); }
.lead-form .check input { accent-color: var(--mint-ink); }
.lead-form--dark .check { color: var(--on-dark-2); }
.lead-form--dark .check input { accent-color: var(--mint); }
.quote-form__est { display: flex; align-items: baseline; gap: 0.5rem; padding: 1rem 1.25rem; border-radius: var(--radius-md); background: var(--sand); }
.quote-form__est b { font-family: var(--font-display); font-variation-settings: "SOFT" 100, "opsz" 96; font-weight: 600; font-size: var(--fs-h2); line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.quote-form__est span { color: var(--ink-2); }
/* Callback: one row, name + phone + button */
.callback { display: grid; gap: 0.75rem; }
.callback__row { display: grid; gap: 0.6rem; }
@media (min-width: 700px) { .callback__row { grid-template-columns: 1fr 1fr auto; align-items: end; } }
/* Newsletter: a pill of field plus button */
.newsletter { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.newsletter__row { display: flex; gap: 0.5rem; padding: 0.4rem; border-radius: var(--radius-pill); background: var(--cream); }
.newsletter__row input { flex: 1; min-width: 0; min-height: var(--button-height); border: 0; padding: 0 1.25rem; border-radius: var(--radius-pill); background: transparent; color: var(--charcoal); font: inherit; }
.newsletter__row input:focus { outline: none; }
.newsletter__row:focus-within { outline: var(--border-focus) solid var(--focus); outline-offset: 3px; }
.newsletter__row input::placeholder { color: var(--text-muted); }
.newsletter__row .btn { flex: none; }
.on-dark .newsletter__row, .field .newsletter__row, .lead-form--dark .newsletter__row { background: var(--charcoal-2); }
.on-dark .newsletter__row input, .field .newsletter__row input, .lead-form--dark .newsletter__row input { color: var(--on-dark); }
.on-dark .newsletter__row input::placeholder, .field .newsletter__row input::placeholder, .lead-form--dark .newsletter__row input::placeholder { color: var(--placeholder-dark); }
@media (max-width: 479px) { .newsletter__row { flex-direction: column; border-radius: var(--radius-md); } .newsletter__row .btn { width: 100%; } }
/* Sticky contact bar: phones and tablets only */
.sticky-bar { position: fixed; z-index: var(--z-sticky-bar); left: 0; right: 0; bottom: 0; padding: 0.6rem 0.75rem calc(0.6rem + env(safe-area-inset-bottom, 0px)); background: color-mix(in srgb, var(--sand) 85%, transparent); -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%); box-shadow: var(--shadow-subtle); display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: 0.5rem; }
.sticky-bar--static { position: relative; }
.sticky-bar a { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.15rem; min-height: 3.25rem; border-radius: var(--radius-pill); color: var(--charcoal); text-decoration: none; font-weight: 700; font-size: var(--fs-small); background: var(--cream); transition: background-color var(--duration-micro) var(--ease); }
.sticky-bar a:hover, .sticky-bar a.is-hover { background: var(--sand-2); }
.sticky-bar a .icon { width: 1.35rem; height: 1.35rem; }
.sticky-bar a .icon:not([fill]) { color: var(--mint-ink); }
.sticky-bar a.sticky-bar__main { flex-direction: row; gap: 0.5rem; background: var(--mint); font-size: 1.0625rem; }
.sticky-bar a.sticky-bar__main:hover { background: var(--mint-hover); }
.sticky-bar a.sticky-bar__main .icon { color: var(--charcoal); }
@media (min-width: 1024px) { .sticky-bar:not(.sticky-bar--static) { display: none; } }
@media (max-width: 1023px) { body:has(.sticky-bar:not(.sticky-bar--static)) { padding-bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px)); } }
/* Exit intent: documented, NOT used on Studio Key */
.exit { position: relative; display: grid; gap: 1rem; max-width: 30rem; padding: var(--tile-pad); border-radius: var(--radius-tile); background: var(--cream); box-shadow: var(--shadow-floating); }
.exit__ban { position: absolute; inset: 0; display: grid; place-items: center; border-radius: inherit; background: rgba(28, 31, 34, 0.72); color: var(--on-dark); text-align: center; padding: 1.5rem; font-weight: 700; }
.exit__ban span { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.6rem 1.1rem; border-radius: var(--radius-pill); background: var(--error-tint); color: var(--error-ink); }
/* Testimonial carousel: documented, NOT used on the homepage */
.tcarousel { position: relative; display: grid; gap: 1rem; }
.tcarousel .carousel__track { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(18rem, 85%); gap: 1.25rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 0.25rem; overscroll-behavior-x: contain; }
.tcarousel .carousel__track::-webkit-scrollbar { display: none; }
.tcarousel .carousel__track > * { scroll-snap-align: start; }
@media (min-width: 900px) { .tcarousel .carousel__track { grid-auto-columns: calc(50% - 0.625rem); } }
.tcarousel__nav { display: flex; gap: 0.5rem; justify-content: flex-end; }
.tcarousel__btn { display: inline-grid; place-items: center; width: var(--button-height); height: var(--button-height); border-radius: var(--radius-circle); border: var(--border-control) solid var(--charcoal); background: transparent; color: var(--charcoal); cursor: pointer; transition: background-color var(--duration-micro) var(--ease), transform var(--duration-micro) var(--ease); }
.tcarousel__btn:hover { background: var(--cream); transform: translateY(-2px); }
.tcarousel__btn .icon { width: 1.3rem; height: 1.3rem; }
.tcarousel .review { height: 100%; }
/* Review summary: stars, a word, a link. No count, no schema */
.review-summary { display: inline-flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; }
.review-summary__g { width: 2rem; height: 2rem; }
.review-summary__text { display: grid; gap: 0.15rem; }
.review-summary__text strong { font-weight: 700; }
.review-summary .stars .icon { width: 1.25rem; height: 1.25rem; }
.review-summary--tile { padding: 1.25rem 1.5rem; border-radius: var(--radius-pill); background: var(--cream); }
.review-summary--dark { color: var(--on-dark); }
.review-summary--dark .link { color: var(--on-dark); }
/* Safety net band: the .net list laid out across the page */
.safety { display: grid; gap: 1.5rem; padding: var(--tile-pad); border-radius: var(--radius-tile); background: var(--cream); }
.safety dl { display: grid; gap: 1.5rem 2rem; }
.safety dl > div { display: grid; grid-template-columns: auto 1fr; gap: 0.25rem 1rem; align-content: start; }
.safety dt { font-weight: 700; align-self: center; }
.safety dd { grid-column: 2; color: var(--ink-2); }
.safety .dot { grid-row: span 2; }
@media (min-width: 768px) { .safety dl { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .safety dl { grid-template-columns: repeat(4, minmax(0, 1fr)); } .safety dl > div { grid-template-columns: 1fr; } .safety .dot { grid-row: auto; justify-self: start; } .safety dd { grid-column: 1; } }
.safety--dark { background: var(--charcoal); color: var(--on-dark); --focus: var(--mint); }
.safety--dark dd { color: var(--on-dark-2); }
.safety--dark .dot { color: var(--mint); }
/* Client logo strip: placeholders only until Rich has written permission */
.logo-strip { display: grid; gap: 1.25rem; }
.logo-strip__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem 2.5rem; }
.logo-strip__slot { display: grid; place-items: center; min-width: 8.5rem; height: 3.5rem; padding: 0 1.25rem; border-radius: var(--radius-pill); background: var(--sand-2); color: var(--ink-2); font: 600 1rem/1 var(--font-display); font-variation-settings: "SOFT" 100; }
.logo-strip__slot img { max-height: 2rem; width: auto; filter: grayscale(1); opacity: 0.8; }
.lead-form fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.lead-form .newsletter__row { background: var(--sand); }
.lead-form--dark .quote-form__est { background: var(--charcoal-2); }
.lead-form--dark .quote-form__est span { color: var(--on-dark-2); }
.contact-card--dark .avatar { background: var(--charcoal-2); }
@media (min-width: 700px) { .callback__row { align-items: start; } .callback__row > .btn { margin-top: 1.7rem; } }
/* ==========================================================================
Sections (sec-*): page-level patterns. The homepage sections live in base;
these add the layout wrappers the homepage used inline, plus new patterns
drawn in the same language: round bow, tone steps, no lines, no rest shadows.
========================================================================== */
/* ---------- Section heading block ---------- */
.sec-head { display: grid; gap: 1rem; margin-bottom: var(--head-gap); }
.sec-head .h2 { max-width: 20ch; }
.sec-head--center { text-align: center; justify-items: center; }
.sec-head--center .h2 { max-width: 18ch; }
.sec-head--row { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem 2rem; }
/* ---------- Image placeholder (until real photos exist) ---------- */
.sec-ph { position: relative; display: grid; place-items: center; align-content: center; gap: 0.5rem; aspect-ratio: var(--ratio, 4 / 3); border-radius: var(--radius-tile); background: var(--sand-2); color: var(--ink-2); font-size: var(--fs-small); text-align: center; overflow: hidden; padding: 1rem; }
.sec-ph .icon { width: 2rem; height: 2rem; }
.sec-ph--sky { background: var(--sky); color: var(--charcoal); }
.sec-ph--mint { background: var(--mint); color: var(--charcoal); }
.sec-ph--cream { background: var(--cream); }
.sec-ph--mustard { background: var(--mustard); color: var(--charcoal); }
.sec-ph--dark { background: var(--charcoal-2); color: var(--on-dark-2); }
.sec-ph--arch { border-radius: var(--shape-arch); aspect-ratio: var(--ratio, 3 / 4); }
.sec-ph--round { border-radius: var(--radius-circle); aspect-ratio: 1; }
.sec-ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* ---------- Hero variants ---------- */
.sec-hero { position: relative; overflow: clip; padding-block: clamp(3rem, 2rem + 4vw, 6rem); }
.sec-hero__grid { display: grid; gap: 2.5rem; align-items: center; }
.sec-hero__copy { display: grid; gap: 1.5rem; align-content: center; }
.sec-hero__copy .display { max-width: 14ch; }
.sec-hero__copy .h1 { max-width: 16ch; }
@media (min-width: 1024px) {
.sec-hero__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2rem; }
.sec-hero__copy { grid-column: 1 / span 6; grid-row: 1; }
.sec-hero__media { grid-column: 8 / span 5; grid-row: 1; }
.sec-hero--flip .sec-hero__copy { grid-column: 7 / span 6; }
.sec-hero--flip .sec-hero__media { grid-column: 1 / span 5; }
}
/* Split image: a photo tile on a sky blob */
.sec-hero__media { position: relative; display: grid; place-items: center; padding-block: 1.5rem; }
.sec-hero__media .blob { width: min(110%, 36rem); background: var(--sky); }
.sec-hero__media .sec-ph { position: relative; z-index: 1; width: min(76%, 24rem); }
/* Background image: inside a field, a charcoal scrim keeps on-dark text at 7:1 or better even over white */
.sec-hero-bg { position: relative; overflow: hidden; display: grid; align-items: end; min-height: clamp(28rem, 20rem + 20vw, 40rem); padding: var(--tile-pad); padding-top: 6rem; color: var(--on-dark); --focus: var(--mint); }
.sec-hero-bg__img { position: absolute; inset: 0; z-index: 0; background: var(--sky); }
.sec-hero-bg__img .sec-ph { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0; }
.sec-hero-bg__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sec-hero-bg::after { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(to top, color-mix(in srgb, var(--charcoal) 92%, transparent), color-mix(in srgb, var(--charcoal) 78%, transparent)); }
.sec-hero-bg__copy { position: relative; z-index: 1; display: grid; gap: 1.5rem; max-width: 40rem; }
.sec-hero-bg .display, .sec-hero-bg .h1 { color: var(--on-dark); max-width: 14ch; }
.sec-hero-bg .lead { color: var(--on-dark-2); }
.sec-hero-bg .rating { color: var(--on-dark); }
/* Overlapping: a wide photo tile with the copy tile laid over its lower edge */
.sec-hero-overlap { display: grid; }
.sec-hero-overlap__img .sec-ph { --ratio: 16 / 9; }
.sec-hero-overlap__card { position: relative; z-index: 1; display: grid; gap: 1.25rem; margin: -4rem 1rem 0; padding: var(--tile-pad); border-radius: var(--radius-tile); background: var(--cream); }
.sec-hero-overlap__card .h1 { max-width: 14ch; }
@media (min-width: 1024px) {
.sec-hero-overlap { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: end; }
.sec-hero-overlap__img { grid-column: 4 / -1; grid-row: 1; }
.sec-hero-overlap__img .sec-ph { --ratio: 16 / 10; }
.sec-hero-overlap__card { grid-column: 1 / span 6; grid-row: 1; margin: 0 0 -3rem; align-self: end; }
}
/* Floating cards: small tiles hovering round the media. Tone steps only, no shadows at rest. */
.sec-float { position: relative; display: grid; place-items: center; padding: 2rem 0 4rem; }
.sec-float .blob { width: min(110%, 34rem); }
.sec-float .sec-ph { position: relative; z-index: 1; width: min(78%, 20rem); --ratio: 9 / 16; border-radius: var(--shape-arch); }
.sec-float__card { position: absolute; z-index: 2; display: flex; align-items: center; gap: 0.75rem; padding: 0.9rem 1.25rem; border-radius: var(--radius-pill); background: var(--cream); font-weight: 700; font-size: var(--fs-small); line-height: 1.3; }
.sec-float__card .icon { width: 1.5rem; height: 1.5rem; color: var(--mint-ink); }
.sec-float__card--dark { background: var(--charcoal); color: var(--on-dark); }
.sec-float__card--dark .icon { color: var(--mint); }
.sec-float__card--a { top: 12%; left: 0; }
.sec-float__card--b { top: 46%; right: 0; }
.sec-float__card--c { bottom: 6%; left: 6%; }
.sec-float__card b { font-family: var(--font-display); font-variation-settings: "SOFT" 100, "opsz" 48; font-size: 1.5rem; font-weight: 600; letter-spacing: -0.02em; }
@media (prefers-reduced-motion: no-preference) {
.sec-float__card { animation: sec-bob 6s var(--ease) infinite alternate; }
.sec-float__card--b { animation-delay: -2s; }
.sec-float__card--c { animation-delay: -4s; }
}
@keyframes sec-bob { from { translate: 0 0; } to { translate: 0 -8px; } }
/* Inner page hero: title, lead, actions, and a quiet cluster of bows */
.sec-pagehero { position: relative; overflow: clip; padding-block: clamp(3rem, 2rem + 5vw, 7rem) clamp(2.5rem, 2rem + 3vw, 5rem); }
.sec-pagehero__copy { position: relative; z-index: 1; display: grid; gap: 1.25rem; max-width: 46rem; }
.sec-pagehero__shapes { display: none; }
@media (min-width: 1024px) {
.sec-pagehero__shapes { display: block; position: absolute; right: max(var(--gutter), calc((100vw - var(--container)) / 2)); top: 50%; translate: 0 -50%; width: 22rem; aspect-ratio: 1; }
.sec-pagehero__shapes span { position: absolute; border-radius: var(--radius-circle); }
.sec-pagehero__shapes span:nth-child(1) { inset: 0 18% 18% 0; background: var(--mint); border-radius: var(--shape-blob); rotate: var(--shape-blob-rotate); }
.sec-pagehero__shapes span:nth-child(2) { width: 38%; aspect-ratio: 1; right: 0; bottom: 4%; background: var(--sky); }
.sec-pagehero__shapes span:nth-child(3) { width: 16%; aspect-ratio: 1; right: 30%; top: 2%; background: var(--mustard); }
}
.sec-crumbs { display: flex; flex-wrap: wrap; gap: 0.25rem 0.6rem; font-size: var(--fs-small); color: var(--ink-2); }
.sec-crumbs a { display: inline-flex; align-items: center; min-height: var(--touch-target); color: var(--charcoal); font-weight: 500; }
.sec-crumbs li { display: inline-flex; align-items: center; gap: 0.6rem; }
.sec-crumbs li + li::before { content: "/"; color: var(--text-muted); }
/* ---------- Qualifier: copy beside the promise tile ---------- */
.sec-qual { display: grid; gap: 3rem; }
.sec-qual__main { display: grid; gap: 1.25rem; align-content: start; }
.sec-qual__main .h2 { margin-bottom: 0.5rem; max-width: 16ch; }
.sec-qual__main p { max-width: var(--measure); }
.sec-qual__main .actions { margin-top: 1rem; }
@media (min-width: 1024px) { .sec-qual { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2rem; } .sec-qual__main { grid-column: 1 / span 7; } .sec-qual > .promise { grid-column: 8 / span 5; } }
/* Plain intro: one heading, one or two paragraphs, centred or left */
.sec-intro { display: grid; gap: 1.25rem; max-width: 44rem; }
.sec-intro p { max-width: var(--measure); }
.sec-intro--center { margin-inline: auto; text-align: center; justify-items: center; }
.sec-intro .h2 { max-width: 18ch; }
/* ---------- Media split and alternating rows ---------- */
.sec-split { display: grid; gap: 2rem; align-items: center; }
.sec-split__text { display: grid; gap: 1.25rem; align-content: center; }
.sec-split__text p { max-width: var(--measure); }
.sec-split__text .h2 { max-width: 16ch; }
.sec-split__media { position: relative; display: grid; place-items: center; }
.sec-split__media .blob { width: 92%; }
.sec-split__media .sec-ph { position: relative; z-index: 1; }
@media (min-width: 1024px) {
.sec-split { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2rem; }
.sec-split__media { grid-column: 1 / span 6; grid-row: 1; }
.sec-split__text { grid-column: 8 / span 5; grid-row: 1; }
.sec-split--reverse .sec-split__media { grid-column: 7 / span 6; }
.sec-split--reverse .sec-split__text { grid-column: 1 / span 5; }
}
.sec-alt { display: grid; gap: clamp(4rem, 3rem + 4vw, 7rem); }
/* ---------- Services and features ---------- */
.sec-services { display: grid; gap: 1.25rem; }
@media (min-width: 700px) { .sec-services { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .sec-services { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sec-service { display: grid; gap: 1rem; align-content: start; padding: var(--tile-pad); border-radius: var(--radius-tile); background: var(--cream); }
.sec-service > .icon { width: 2.25rem; height: 2.25rem; color: var(--mint-ink); }
.sec-service p { color: var(--ink-2); }
.sec-service__price { display: flex; align-items: baseline; gap: 0.4rem; margin-top: auto; }
.sec-service__price b { font-family: var(--font-display); font-variation-settings: "SOFT" 100, "opsz" 96; font-weight: 600; font-size: 2.25rem; line-height: 1; letter-spacing: -0.03em; }
.sec-service__price span { font-weight: 500; color: var(--ink-2); }
.sec-service--mint { background: var(--mint); }
.sec-service--sky { background: var(--sky); }
.sec-service--mint > .icon, .sec-service--sky > .icon { color: var(--charcoal); }
.sec-service--mint p, .sec-service--sky p, .sec-service--mint .sec-service__price span, .sec-service--sky .sec-service__price span { color: var(--charcoal); }
.sec-service--quiet { background: var(--sand-2); }
.sec-service .link { margin-top: auto; }
/* Services list: rows as filled tiles, price on the right */
.sec-svclist { display: grid; gap: 0.6rem; }
.sec-svclist li { display: grid; grid-template-columns: auto 1fr; gap: 0.25rem 1rem; align-items: center; padding: 1.25rem 1.5rem; border-radius: var(--radius-faq); background: var(--cream); }
.sec-svclist .icon { width: 1.75rem; height: 1.75rem; color: var(--mint-ink); grid-row: span 2; }
.sec-svclist strong { font-size: 1.125rem; }
.sec-svclist span { color: var(--ink-2); grid-column: 2; }
.sec-svclist em { font-style: normal; font-weight: 700; grid-column: 2; }
@media (min-width: 768px) {
.sec-svclist li { grid-template-columns: auto 1fr auto; }
.sec-svclist em { grid-column: 3; grid-row: 1 / span 2; font-family: var(--font-display); font-variation-settings: "SOFT" 100, "opsz" 36; font-weight: 600; font-size: var(--fs-h3); text-align: right; }
}
/* Feature grid: bare icons, no tiles */
.sec-features { display: grid; gap: 2.25rem 2rem; }
@media (min-width: 700px) { .sec-features { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .sec-features { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sec-features li { display: grid; gap: 0.6rem; align-content: start; }
.sec-features .icon { width: 2rem; height: 2rem; color: var(--mint-ink); margin-bottom: 0.25rem; }
.sec-features p { color: var(--ink-2); }
/* Benefits: one mint field-tile with a two-column tick list */
.sec-benefits { display: grid; gap: 2rem; padding: var(--tile-pad); border-radius: var(--radius-tile); background: var(--mint); }
.sec-benefits .h2 { max-width: 16ch; }
.sec-benefits ul { display: grid; gap: 1rem 2rem; }
.sec-benefits li { display: flex; gap: 0.8rem; align-items: flex-start; }
.sec-benefits li .icon { width: 1.5rem; height: 1.5rem; margin-top: 0.15em; }
@media (min-width: 900px) { .sec-benefits { grid-template-columns: 5fr 7fr; align-items: start; } .sec-benefits ul { grid-template-columns: 1fr 1fr; } }
/* ---------- Process timeline (vertical, round step markers) ---------- */
.sec-timeline { display: grid; gap: 0; position: relative; max-width: 46rem; }
.sec-timeline::before { content: ""; position: absolute; left: 2.25rem; top: 2.25rem; bottom: 2.25rem; width: 4px; margin-left: -2px; border-radius: 4px; background: var(--sand-2); }
.sec-timeline li { position: relative; display: grid; grid-template-columns: 4.5rem 1fr; gap: 0.35rem 1.5rem; padding-bottom: 2.5rem; }
.sec-timeline li:last-child { padding-bottom: 0; }
.sec-timeline .stop { grid-column: 1; grid-row: 1 / span 3; width: 4.5rem; height: 4.5rem; border-radius: var(--radius-circle); display: grid; place-items: center; background: var(--cream); position: relative; z-index: 1; font: 600 1.5rem/1 var(--font-display); font-variation-settings: "SOFT" 100; }
.sec-timeline li:last-child .stop { background: var(--mint); }
.sec-timeline li > :not(.stop) { grid-column: 2; }
.sec-timeline .meta { padding-top: 0.6rem; }
.sec-timeline p { color: var(--ink-2); }
/* ---------- Statistics ---------- */
.sec-stats { display: grid; gap: 1.25rem; }
@media (min-width: 700px) { .sec-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .sec-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.sec-stat { display: grid; gap: 0.5rem; align-content: start; padding: var(--tile-pad); border-radius: var(--radius-tile); background: var(--cream); }
.sec-stat b { font-family: var(--font-display); font-variation-settings: "SOFT" 100, "opsz" 144; font-weight: 600; font-size: clamp(3rem, 2.4rem + 2vw, 4.25rem); line-height: 0.95; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.sec-stat span { color: var(--ink-2); }
.sec-stat--mint { background: var(--mint); }
.sec-stat--sky { background: var(--sky); }
.sec-stat--mustard { background: var(--mustard); }
.sec-stat--mint span, .sec-stat--sky span, .sec-stat--mustard span { color: var(--charcoal); }
.field .sec-stat { background: var(--charcoal-2); }
.field .sec-stat span { color: var(--on-dark-2); }
/* ---------- Logo strip (sample only until Rich has permission to show clients) ---------- */
.sec-logos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
@media (min-width: 700px) { .sec-logos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .sec-logos { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.sec-logos li { display: grid; place-items: center; min-height: 5.5rem; padding: 1rem; border-radius: var(--radius-pill); background: var(--cream); color: var(--text-muted); font-weight: 700; font-size: var(--fs-small); text-align: center; }
.sec-logos img { max-height: 2.5rem; width: auto; filter: grayscale(1); opacity: 0.8; }
/* ---------- Work: case studies and portfolio ---------- */
.sec-feature-case { display: grid; gap: 0; border-radius: var(--radius-tile); overflow: hidden; background: var(--cream); }
.sec-feature-case .sec-ph { border-radius: 0; height: 100%; }
.sec-feature-case__body { display: grid; gap: 1.25rem; align-content: center; padding: var(--tile-pad); }
.sec-feature-case__body p { color: var(--ink-2); max-width: var(--measure); }
@media (min-width: 900px) { .sec-feature-case { grid-template-columns: 1fr 1fr; } }
.sec-facts { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.sec-facts li { display: inline-flex; align-items: center; min-height: 2.25rem; padding: 0 1rem; border-radius: var(--radius-pill); background: var(--sand); font-size: var(--fs-small); font-weight: 500; }
.sec-work { display: grid; gap: 1.25rem; }
@media (min-width: 700px) { .sec-work { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .sec-work { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sec-work__item { display: grid; gap: 1rem; align-content: start; color: var(--charcoal); text-decoration: none; border-radius: var(--radius-tile); }
.sec-work__item .sec-ph { transition: border-radius var(--duration-state) var(--ease); }
.sec-work__item:hover .sec-ph, .sec-work__item.is-hover .sec-ph { border-radius: var(--shape-arch); }
.sec-work__item h3 { text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 3px; text-underline-offset: 0.25em; transition: text-decoration-color var(--duration-micro) var(--ease); }
.sec-work__item:hover h3, .sec-work__item.is-hover h3 { text-decoration-color: var(--mint); }
.sec-work__item p { color: var(--ink-2); }
/* ---------- Meet Rich ---------- */
.sec-meet { display: grid; gap: 2.5rem; align-items: center; }
.sec-meet__media { position: relative; display: grid; place-items: center; padding-block: 1.5rem; }
.sec-meet__media .blob { width: min(88%, 30rem); background: var(--mustard); }
.sec-meet__media .sec-ph { position: relative; z-index: 1; width: min(70%, 18rem); }
.sec-meet__copy { display: grid; gap: 1.25rem; }
.sec-meet__copy p { max-width: var(--measure); }
.sec-meet__sig { font-family: var(--font-display); font-variation-settings: "SOFT" 100, "opsz" 48; font-weight: 500; font-size: var(--fs-quote); }
@media (min-width: 1024px) { .sec-meet { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2rem; } .sec-meet__media { grid-column: 1 / span 5; } .sec-meet__copy { grid-column: 7 / span 6; } }
/* ---------- FAQ layout ---------- */
.sec-faq { display: grid; gap: 2rem; }
.sec-faq__side { display: grid; gap: 1rem; align-content: start; }
.sec-faq__side .h2 { max-width: 18ch; }
.sec-faq__side .ask { margin-top: 1rem; }
@media (min-width: 1024px) { .sec-faq { grid-template-columns: repeat(12, minmax(0, 1fr)); } .sec-faq__side { grid-column: 1 / span 4; position: sticky; top: calc(var(--header-height) + 2rem); } .sec-faq > .faq__list { grid-column: 6 / span 7; } }
/* ---------- Blog preview and latest news ---------- */
.sec-posts { display: grid; gap: 1.25rem; }
@media (min-width: 700px) { .sec-posts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .sec-posts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sec-post { position: relative; display: grid; gap: 0.9rem; align-content: start; padding: 0.75rem 0.75rem 1.75rem; border-radius: var(--radius-tile); background: var(--cream); transition: background-color var(--duration-micro) var(--ease); }
.sec-post .sec-ph { border-radius: calc(var(--radius-tile) - 0.75rem); }
.sec-post > :not(.sec-ph) { padding-inline: 1rem; }
.sec-post a { color: var(--charcoal); text-decoration: none; }
.sec-post a::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-tile); }
.sec-post:hover, .sec-post.is-hover { background: var(--sand-2); }
.sec-post:hover h3, .sec-post.is-hover h3 { text-decoration: underline; text-decoration-color: var(--mint); text-decoration-thickness: 3px; text-underline-offset: 0.25em; }
.sec-post:has(a:focus-visible) { outline: var(--border-focus) solid var(--focus); outline-offset: 3px; }
.sec-post a:focus-visible { outline: none; }
.sec-post p { color: var(--ink-2); }
.sec-news { display: grid; gap: 0.6rem; }
.sec-news a { display: grid; grid-template-columns: 1fr auto; gap: 0.25rem 1rem; align-items: center; min-height: 4.5rem; padding: 1rem 1.25rem 1rem 1.75rem; border-radius: var(--radius-faq); background: var(--cream); color: var(--charcoal); text-decoration: none; transition: background-color var(--duration-micro) var(--ease); }
.sec-news a:hover, .sec-news a.is-hover { background: var(--mint); }
.sec-news .meta { grid-column: 1; }
.sec-news strong { grid-column: 1; font-size: 1.125rem; line-height: 1.35; }
.sec-news .icon { grid-column: 2; grid-row: 1 / span 2; width: 1.5rem; height: 1.5rem; transition: transform var(--duration-micro) var(--ease); }
.sec-news a:hover .icon, .sec-news a.is-hover .icon { transform: translateX(4px); }
.sec-news a:hover .meta, .sec-news a.is-hover .meta { color: var(--charcoal); }
/* ---------- Gallery ---------- */
.sec-gallery { display: grid; gap: 0.75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sec-gallery figure { display: grid; min-width: 0; }
.sec-gallery .sec-ph { aspect-ratio: 1; }
@media (min-width: 900px) {
.sec-gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 13rem; gap: 1rem; }
.sec-gallery .sec-ph { aspect-ratio: auto; height: 100%; }
.sec-gallery > :nth-child(1) { grid-column: span 2; grid-row: span 2; }
.sec-gallery > :nth-child(1) .sec-ph { border-radius: var(--shape-arch); }
.sec-gallery > :nth-child(4), .sec-gallery > :nth-child(5), .sec-gallery > :nth-child(6) { grid-column: span 2; }
.sec-gallery > :nth-child(5) { grid-column: span 1; }
.sec-gallery > :nth-child(6) { grid-column: span 3; }
}
/* ---------- Video showcase ---------- */
.sec-video { display: grid; gap: 2.5rem; align-items: center; }
.sec-video__stage { position: relative; display: grid; place-items: center; padding-block: 2rem; }
.sec-video__stage .blob { width: min(88%, 34rem); background: var(--sky); }
.sec-video__stage .video { animation: none; }
.sec-video__more { display: grid; gap: 1.25rem; }
.sec-clips { display: flex; flex-wrap: wrap; gap: 1.25rem 2rem; }
.sec-clips li { display: flex; align-items: center; gap: 1rem; }
.sec-clips .clip { width: 6.5rem; }
.sec-clips .clip__play { width: 2.75rem; height: 2.75rem; }
.sec-clips .clip__play svg { width: 1.25rem; height: 1.25rem; }
.sec-clips strong { display: block; }
.sec-clips span span { color: var(--ink-2); font-size: var(--fs-small); }
@media (min-width: 1024px) { .sec-video { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2rem; } .sec-video__stage { grid-column: 1 / span 5; } .sec-video__more { grid-column: 7 / span 6; } }
/* ---------- Location ---------- */
.sec-location { display: grid; gap: 2rem; }
.sec-map { position: relative; display: grid; place-items: center; min-height: 20rem; border-radius: var(--radius-tile); background: var(--sand-2); overflow: hidden; }
.sec-map::before { content: ""; position: absolute; width: 70%; aspect-ratio: 1; border-radius: var(--shape-blob); rotate: var(--shape-blob-rotate); background: var(--cream); }
.sec-map__pin { position: relative; display: grid; justify-items: center; gap: 0.5rem; font-family: var(--font-display); font-variation-settings: "SOFT" 100, "opsz" 36; font-weight: 600; font-size: var(--fs-h3); }
.sec-map__pin .icon { width: 3rem; height: 3rem; color: var(--mint-ink); }
.sec-map__note { position: absolute; bottom: 1rem; left: 1rem; right: 1rem; text-align: center; }
.sec-location__info { display: grid; gap: 1.5rem; align-content: start; }
.sec-towns { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.sec-towns li { display: inline-flex; align-items: center; min-height: var(--touch-target); padding: 0 1.1rem; border-radius: var(--radius-pill); background: var(--cream); font-size: var(--fs-small); font-weight: 500; }
.sec-towns li:first-child { background: var(--mint); font-weight: 700; }
.sec-kv { display: grid; gap: 1rem; }
.sec-kv > div { display: grid; grid-template-columns: auto 1fr; gap: 0.15rem 1rem; align-items: start; }
.sec-kv .icon { width: 1.5rem; height: 1.5rem; color: var(--mint-ink); grid-row: span 2; margin-top: 0.15em; }
.sec-kv dt { font-weight: 700; }
.sec-kv dd { grid-column: 2; color: var(--ink-2); }
.sec-kv a { color: var(--charcoal); font-weight: 500; }
@media (min-width: 1024px) { .sec-location { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: stretch; } .sec-map { grid-column: 1 / span 7; min-height: 28rem; } .sec-location__info { grid-column: 9 / span 4; } }
/* ---------- Newsletter ---------- */
.sec-news-signup { display: grid; gap: 2rem; padding: var(--tile-pad); align-items: center; }
.sec-news-signup .h2 { max-width: 14ch; }
.sec-news-signup__form { display: grid; gap: 1rem; }
.sec-news-signup__row { display: grid; gap: 0.75rem; }
@media (min-width: 560px) { .sec-news-signup__row { grid-template-columns: 1fr auto; align-items: end; } }
@media (min-width: 1024px) { .sec-news-signup { grid-template-columns: repeat(12, minmax(0, 1fr)); padding: clamp(3rem, 2rem + 3vw, 5rem); } .sec-news-signup__intro { grid-column: 1 / span 5; } .sec-news-signup__form { grid-column: 7 / span 6; } }
.sec-news-signup--light { border-radius: var(--radius-tile); background: var(--sky); }
.sec-news-signup--light .lead { color: var(--charcoal); }
.sec-news-signup--light .f input { background: var(--cream); color: var(--charcoal); }
.sec-news-signup--light .f input::placeholder { color: var(--text-muted); }
.sec-news-signup--light .f input:focus { border-color: var(--charcoal); }
.sec-news-signup--light .opt { color: var(--charcoal); }
/* ---------- Full-width CTA: a dark field with the bow bleeding off the edges ---------- */
.sec-cta { position: relative; overflow: hidden; text-align: center; padding-inline: var(--gutter); }
.sec-cta__inner { position: relative; z-index: 1; display: grid; justify-items: center; gap: 1.5rem; max-width: 44rem; margin-inline: auto; }
.sec-cta .display, .sec-cta .h2 { max-width: 14ch; }
.sec-cta .actions { justify-content: center; }
.sec-cta__bow { position: absolute; z-index: 0; border-radius: var(--radius-circle); pointer-events: none; }
.sec-cta__bow--a { width: clamp(10rem, 6rem + 14vw, 22rem); aspect-ratio: 1; left: 0; top: 0; translate: -45% -40%; background: var(--mint); }
.sec-cta__bow--b { width: clamp(7rem, 4rem + 9vw, 14rem); aspect-ratio: 1; right: 0; bottom: 0; translate: 35% 40%; background: var(--sky); }
.sec-cta__phone { display: inline-flex; align-items: center; gap: 0.5rem; min-height: var(--touch-target); font-family: var(--font-display); font-variation-settings: "SOFT" 100, "opsz" 24; font-weight: 500; font-size: 1.1875rem; color: var(--on-dark); text-decoration: none; }
.sec-cta__phone:hover { color: var(--mint); }
.sec-cta__wa { display: inline-flex; align-items: center; gap: 0.5rem; min-height: var(--touch-target); font-weight: 700; color: var(--on-dark); }
.sec-cta__wa svg { width: 1.5rem; height: 1.5rem; }
.sec-cta--mint { background: var(--mint); color: var(--charcoal); border-radius: var(--radius-field); margin-inline: var(--field-inset); --focus: var(--charcoal); }
.sec-cta--mint .sec-cta__bow--a { background: var(--sand); }
.sec-cta--mint .sec-cta__bow--b { background: var(--charcoal); }
.sec-cta--mint .btn--primary { background: var(--charcoal); border-color: var(--charcoal); color: var(--on-dark); }
.sec-cta--mint .btn--primary:hover { background: var(--charcoal-3); border-color: var(--charcoal-3); }
.sec-cta--mint .sec-cta__phone, .sec-cta--mint .sec-cta__wa { color: var(--charcoal); }
.sec-cta--mint .lead { color: var(--charcoal); }
/* ---------- Static state classes for previews ---------- */
.sec-service.is-hover .link, .sec-service .link.is-hover { text-underline-offset: 0.45em; }
.steps + .newbie-row { margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem); }
/* Base has no [hidden] reset, and .btn/.form/.done set display. Keep hidden steps, buttons and the done panel hidden. */
.coupon [hidden], .sec-news-signup [hidden] { display: none !important; }
/* ---------- Page templates (tpl-): layout glue for full-page compositions ---------- */
/* Inside a design-system card the frame can be very tall, so the hero is capped at a laptop viewport. */
@media (min-width: 1024px) {
.tpl-page .hero { min-height: 51.5rem; --blob: 46rem; }
}
/* Until base carries a global rule, hidden parts of composed sections (form steps, done state, Back) stay hidden. */
.tpl-page [hidden]:not([hidden=until-found i]) { display: none !important; }
.tpl-page .top__wa .wa-glyph { width: 1.6rem; height: 1.6rem; }
/* Breadcrumbs and back links */
.tpl-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; list-style: none; padding: 0; margin: 0; font-size: var(--fs-small); }
.tpl-crumbs li { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--ink-2); }
.tpl-crumbs li + li::before { content: ""; width: 0.4rem; height: 0.4rem; border-radius: var(--radius-circle); background: var(--mint-ink); }
.tpl-crumbs a { display: inline-flex; align-items: center; min-height: var(--touch-target); color: var(--charcoal); font-weight: 500; }
.tpl-crumbs [aria-current] { font-weight: 700; color: var(--charcoal); }
/* Inner page heading */
.tpl-head { padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem) clamp(2rem, 1.5rem + 3vw, 4rem); }
.tpl-head__inner { display: grid; gap: 1.25rem; align-items: center; }
.tpl-head .h1 { max-width: 18ch; }
.tpl-head__media { position: relative; display: grid; place-items: center; min-height: 18rem; }
.tpl-head__media .blob { width: min(80vw, 26rem); }
@media (min-width: 1024px) {
.tpl-head--split .tpl-head__inner { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2rem; }
.tpl-head--split .tpl-head__copy { grid-column: 1 / span 7; display: grid; gap: 1.25rem; }
.tpl-head--split .tpl-head__media { grid-column: 8 / span 5; min-height: 26rem; }
}
.tpl-head__copy { display: grid; gap: 1.25rem; }
/* Split layout: main column and a side column */
.tpl-split { display: grid; gap: 2.5rem; align-items: start; }
.tpl-split__main { display: grid; gap: 1.25rem; align-content: start; }
.tpl-split__main > p { max-width: var(--measure); }
@media (min-width: 1024px) {
.tpl-split { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2rem; }
.tpl-split__main { grid-column: 1 / span 7; }
.tpl-split__side { grid-column: 8 / span 5; }
.tpl-split--flip .tpl-split__main { grid-column: 6 / span 7; grid-row: 1; }
.tpl-split--flip .tpl-split__side { grid-column: 1 / span 4; grid-row: 1; }
.tpl-split--sticky .tpl-split__side { position: sticky; top: calc(var(--header-height) + 1.5rem); }
}
/* Section heading block */
.tpl-sechead { display: grid; gap: 1rem; margin-bottom: var(--head-gap); }
.tpl-sechead .h2 { max-width: 20ch; }
.tpl-sechead--row { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem 2rem; }
/* Grids of tiles and cards */
.tpl-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); }
@media (min-width: 1100px) { .tpl-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .tpl-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .tpl-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* A simple content card for listings (blog, portfolio, case studies) */
.tpl-card { position: relative; display: grid; grid-template-rows: auto 1fr; background: var(--cream); border-radius: var(--radius-tile); overflow: hidden; transition: transform var(--duration-micro) var(--ease); }
.tpl-card:hover, .tpl-card:focus-within { transform: translateY(-4px); }
.tpl-card__body { display: grid; gap: 0.75rem; align-content: start; padding: clamp(1.25rem, 1rem + 1vw, 1.75rem); }
.tpl-card__body p { color: var(--ink-2); }
.tpl-card__title a { color: var(--charcoal); text-decoration: none; }
.tpl-card__title a::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-tile); }
.tpl-card__title a:hover { text-decoration: underline; text-decoration-color: var(--mint); text-decoration-thickness: 3px; text-underline-offset: 0.2em; }
.tpl-card__title a:focus-visible { outline: none; }
.tpl-card:has(.tpl-card__title a:focus-visible) { outline: var(--border-focus) solid var(--focus); outline-offset: 3px; }
.tpl-card--wide { grid-template-rows: none; }
@media (min-width: 768px) { .tpl-card--wide { grid-template-columns: 1fr 1fr; } .tpl-card--wide .tpl-ph { aspect-ratio: auto; min-height: 100%; } }
/* Placeholder media: tone fields with a bare glyph, never a photo we don't have */
.tpl-ph { position: relative; display: grid; place-items: center; align-content: center; gap: 0.5rem; aspect-ratio: 4 / 3; background: var(--sand-2); color: var(--ink-2); overflow: hidden; text-align: center; padding: 1rem; }
.tpl-ph .icon { width: 2.5rem; height: 2.5rem; }
.tpl-ph span { font-size: var(--fs-caption); }
.tpl-ph--mint { background: var(--mint); color: var(--charcoal); }
.tpl-ph--sky { background: var(--sky); color: var(--charcoal); }
.tpl-ph--mustard { background: var(--mustard); color: var(--charcoal); }
.tpl-ph--dark { background: var(--charcoal-2); color: var(--on-dark-2); }
.tpl-ph--tile { border-radius: var(--radius-tile); }
.tpl-ph--wide { aspect-ratio: 16 / 9; }
.tpl-ph--arch { aspect-ratio: 4 / 5; border-radius: var(--shape-arch); width: min(100%, 22rem); position: relative; z-index: 1; }
.tpl-ph--portrait { aspect-ratio: 9 / 16; border-radius: var(--shape-arch); width: min(64vw, 17rem); position: relative; z-index: 1; background: var(--charcoal); color: var(--on-dark-2); }
/* Services and extras tiles */
.tpl-svc { background: var(--cream); border-radius: var(--radius-tile); padding: var(--tile-pad); display: grid; gap: 1rem; align-content: start; }
.tpl-svc--mint { background: var(--mint); }
.tpl-svc--sky { background: var(--sky); }
.tpl-svc p { color: var(--ink-2); }
.tpl-svc--mint p, .tpl-svc--sky p { color: var(--charcoal); }
.tpl-svc > .dot { justify-self: start; }
.tpl-price-sm { display: flex; align-items: baseline; gap: 0.4rem; }
.tpl-price-sm b { font-family: var(--font-display); font-variation-settings: "SOFT" 100, "opsz" 96; font-weight: 600; font-size: clamp(2rem, 1.6rem + 1.4vw, 2.75rem); line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.tpl-price-sm span { font-weight: 500; }
/* Facts and key-value lists */
.tpl-kv { display: grid; gap: 1rem; }
.tpl-kv > div { display: grid; gap: 0.15rem; }
.tpl-kv dt { font-size: var(--fs-small); color: var(--ink-2); }
.tpl-kv dd { font-weight: 700; }
.tile--dark .tpl-kv dt, .field .tpl-kv dt { color: var(--on-dark-2); }
/* Dark call to action field */
.tpl-cta { text-align: center; display: grid; justify-items: center; gap: 1.25rem; }
.tpl-cta .h2 { max-width: 18ch; }
.tpl-cta .lead { margin-inline: auto; }
.tpl-cta .actions { justify-content: center; }
.tpl-cta + .foot { margin-top: 0; }
.tpl-gap { height: clamp(1rem, 0.5rem + 2vw, 2rem); }
/* Long-form text: articles and legal pages */
.tpl-prose { display: grid; gap: 1.25rem; max-width: 40rem; }
.tpl-prose h2 { margin-top: 1.75rem; }
.tpl-prose h3 { margin-top: 0.75rem; }
.tpl-prose ul, .tpl-prose ol { padding-left: 1.4rem; display: grid; gap: 0.5rem; }
.tpl-prose li::marker { color: var(--mint-ink); font-weight: 700; }
.tpl-prose blockquote { padding: var(--tile-pad); background: var(--cream); border-radius: var(--radius-tile); }
.tpl-prose .tpl-callout { display: flex; gap: 1rem; align-items: flex-start; padding: 1.5rem; border-radius: var(--radius-tile); background: var(--cream); }
.tpl-prose .tpl-callout strong { display: block; }
/* Contents list for legal pages and the FAQ page */
.tpl-toc { display: grid; gap: 0.75rem; align-content: start; }
.tpl-toc ol { list-style: none; padding: 0; display: grid; gap: 0.15rem; }
.tpl-toc a { display: inline-flex; align-items: center; min-height: var(--touch-target); color: var(--charcoal); text-decoration: none; font-weight: 500; border-bottom: var(--border-focus) solid transparent; transition: border-color var(--duration-micro) var(--ease); }
.tpl-toc a:hover, .tpl-toc a[aria-current="true"] { border-color: var(--mint); }
.tpl-toc a[aria-current="true"] { font-weight: 700; }
.tpl-legal { display: grid; gap: 2.5rem; }
@media (min-width: 1024px) {
.tpl-legal { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2rem; }
.tpl-legal .tpl-toc { grid-column: 1 / span 3; position: sticky; top: calc(var(--header-height) + 1.5rem); }
.tpl-legal .tpl-prose, .tpl-legal .tpl-legal__main { grid-column: 5 / span 8; }
}
.tpl-legal__main { display: grid; gap: 3rem; }
.tpl-faqgroup { display: grid; gap: 1rem; }
/* Tables: the one place lines separate rows */
.tpl-table-wrap { position: relative; overflow-x: auto; border-radius: var(--radius-tile); background: var(--cream); }
.tpl-table-wrap:focus-visible { outline-offset: 3px; }
.tpl-table { width: 100%; min-width: 34rem; border-collapse: collapse; font-size: var(--fs-body); }
.tpl-table caption { text-align: left; padding: 1.5rem 1.75rem 0; font-family: var(--font-display); font-variation-settings: "SOFT" 100, "opsz" 36; font-weight: 600; font-size: var(--fs-h3); }
.tpl-table th, .tpl-table td { text-align: left; padding: 1rem 1.75rem; border-bottom: var(--border-hairline) solid var(--line); vertical-align: top; }
.tpl-table tbody tr:last-child th, .tpl-table tbody tr:last-child td { border-bottom: 0; }
.tpl-table thead th { font-family: var(--font-display); font-variation-settings: "SOFT" 100, "opsz" 24; font-weight: 600; font-size: 1.1875rem; }
.tpl-table tbody th { font-weight: 500; }
.tpl-table .icon { color: var(--mint-ink); vertical-align: -0.2em; }
.tpl-table .tpl-no { color: var(--ink-2); }
/* Towns served */
.tpl-pills { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; padding: 0; }
.tpl-pills li { display: inline-flex; align-items: center; gap: 0.5rem; min-height: var(--touch-target); padding: 0 1.25rem; border-radius: var(--radius-pill); background: var(--cream); font-weight: 500; }
.tpl-pills li.is-home { background: var(--mint); font-weight: 700; }
/* Map placeholder: a calm tone field with the blob and a pin; the live map loads only after consent */
.tpl-map { position: relative; display: grid; place-items: center; min-height: 20rem; border-radius: var(--radius-tile); background: var(--sky); overflow: hidden; color: var(--charcoal); text-align: center; padding: 1.5rem; }
.tpl-map .blob { width: 18rem; background: var(--cream); }
.tpl-map__pin { position: relative; z-index: 1; display: grid; justify-items: center; gap: 0.5rem; }
.tpl-map__pin .icon { width: 3rem; height: 3rem; color: var(--mint-ink); }
.tpl-map__pin b { font-family: var(--font-display); font-variation-settings: "SOFT" 100, "opsz" 36; font-weight: 600; font-size: var(--fs-h3); }
/* Filters (portfolio, blog) */
.tpl-filter { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.tpl-filter button { min-height: var(--touch-target); padding: 0 1.25rem; border: 0; border-radius: var(--radius-pill); background: var(--cream); color: var(--charcoal); font: 500 var(--fs-small)/1 var(--font-body); cursor: pointer; transition: background-color var(--duration-micro) var(--ease), color var(--duration-micro) var(--ease); }
.tpl-filter button:hover { background: var(--sand-2); }
.tpl-filter button[aria-pressed="true"] { background: var(--charcoal); color: var(--on-dark); }
/* Pagination */
.tpl-pages { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.5rem; margin-top: var(--head-gap); list-style: none; padding: 0; }
.tpl-pages a, .tpl-pages span { display: inline-grid; place-items: center; min-width: var(--touch-target); height: var(--touch-target); padding: 0 0.75rem; border-radius: var(--radius-pill); color: var(--charcoal); text-decoration: none; font-weight: 700; }
.tpl-pages a:hover { background: var(--cream); }
.tpl-pages [aria-current="page"] { background: var(--mint); }
.tpl-pages .tpl-pages__step { gap: 0.5rem; display: inline-flex; align-items: center; }
/* Article byline and share links */
.tpl-byline { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem; }
.tpl-byline strong { display: block; }
.tpl-share { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; }
.tpl-share a { display: inline-grid; place-items: center; width: var(--touch-target); height: var(--touch-target); border-radius: var(--radius-circle); color: var(--charcoal); transition: transform var(--duration-micro) var(--ease); }
.tpl-share a:hover { transform: scale(1.08); color: var(--mint-ink); }
.tpl-share .icon { width: 1.5rem; height: 1.5rem; }
/* Newsletter band */
.tpl-news { display: grid; gap: 1.25rem; padding: var(--tile-pad); border-radius: var(--radius-tile); background: var(--cream); }
.tpl-news form { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.tpl-news label { width: 100%; font-weight: 500; font-size: var(--fs-small); }
@media (min-width: 900px) { .tpl-news { grid-template-columns: 1fr 1fr; align-items: center; } }
/* Light inputs used inside templates (search, newsletter) */
.tpl-input { flex: 1 1 14rem; min-width: 0; min-height: var(--button-height); padding: 0.75rem 1.25rem; border-radius: var(--radius-input); border: var(--border-control) solid var(--line); background: var(--cream); color: var(--charcoal); font: inherit; transition: border-color var(--duration-micro) var(--ease); }
.tpl-news .tpl-input { background: var(--sand); }
.tpl-input:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 1px var(--focus); }
.tpl-input::placeholder { color: var(--text-muted); }
/* Search */
.tpl-search { display: flex; flex-wrap: wrap; gap: 0.75rem; max-width: 44rem; }
.tpl-search__field { position: relative; flex: 1 1 16rem; display: flex; }
.tpl-search__field .icon { position: absolute; left: 1.15rem; top: 50%; translate: 0 -50%; color: var(--ink-2); pointer-events: none; }
.tpl-search__field .tpl-input { padding-left: 3.1rem; }
.tpl-results { display: grid; gap: 0.75rem; list-style: none; padding: 0; }
.tpl-result { position: relative; display: grid; gap: 0.4rem; padding: 1.5rem 1.75rem; border-radius: var(--radius-tile); background: var(--cream); transition: transform var(--duration-micro) var(--ease); }
.tpl-result:hover { transform: translateY(-2px); }
.tpl-result p { color: var(--ink-2); }
.tpl-result mark { background: var(--mint); color: var(--charcoal); border-radius: 4px; padding: 0 0.15em; }
.tpl-result .tpl-card__title a::after { border-radius: var(--radius-tile); }
/* Empty, error and not-found states */
.tpl-empty { display: grid; justify-items: center; text-align: center; gap: 1.25rem; padding: clamp(2.5rem, 1.5rem + 4vw, 5rem) var(--tile-pad); border-radius: var(--radius-tile); background: var(--cream); }
.tpl-empty p { color: var(--ink-2); max-width: var(--measure); }
.tpl-empty .actions { justify-content: center; }
.tpl-empty__shape { width: 7rem; aspect-ratio: 1; background: var(--mint); border-radius: var(--shape-blob); rotate: var(--shape-blob-rotate); display: grid; place-items: center; }
.tpl-empty__shape .icon { width: 2.75rem; height: 2.75rem; rotate: 8deg; color: var(--charcoal); }
.tpl-404 { display: grid; gap: 2.5rem; align-items: center; padding-block: clamp(3rem, 2rem + 5vw, 7rem); }
.tpl-404__mark { position: relative; display: grid; place-items: center; min-height: 20rem; }
.tpl-404__mark .blob { width: min(80vw, 28rem); }
.tpl-404__mark b { position: relative; z-index: 1; font-family: var(--font-display); font-variation-settings: "SOFT" 100, "opsz" 144; font-weight: 600; font-size: clamp(6rem, 4rem + 8vw, 11rem); line-height: 0.9; letter-spacing: -0.04em; }
.tpl-404__copy { display: grid; gap: 1.25rem; }
.tpl-404__links { display: grid; gap: 0.25rem; list-style: none; padding: 0; }
@media (min-width: 1024px) {
.tpl-404 { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2rem; }
.tpl-404__mark { grid-column: 1 / span 5; }
.tpl-404__copy { grid-column: 7 / span 6; }
}
/* At a glance stats (sample only until Rich has real figures) */
.tpl-glance { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); }
.tpl-glance > div { display: grid; gap: 0.25rem; padding: 1.5rem; border-radius: var(--radius-tile); background: var(--cream); }
.tpl-glance b { font-family: var(--font-display); font-variation-settings: "SOFT" 100, "opsz" 96; font-weight: 600; font-size: clamp(2rem, 1.6rem + 1.4vw, 2.75rem); line-height: 1; letter-spacing: -0.03em; }
.tpl-glance span { font-size: var(--fs-small); color: var(--ink-2); }
/* Before and after placeholder pair */
.tpl-pair { display: grid; gap: 1.25rem; }
@media (min-width: 768px) { .tpl-pair { grid-template-columns: 1fr 1fr; } }
.tpl-pair figure { display: grid; gap: 0.5rem; }
.tpl-pair figcaption { font-size: var(--fs-small); color: var(--ink-2); }
/* Person card (team) */
.tpl-person { display: grid; gap: 1.5rem; align-items: center; background: var(--cream); border-radius: var(--radius-tile); padding: var(--tile-pad); }
.tpl-person .tpl-ph--arch { width: min(100%, 16rem); justify-self: center; }
@media (min-width: 768px) { .tpl-person { grid-template-columns: auto 1fr; } }
.tpl-person__copy { display: grid; gap: 1rem; }
/* A next or back link row */
.tpl-nextrow { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; margin-top: var(--head-gap); }
@media (prefers-reduced-motion: reduce) {
.tpl-card:hover, .tpl-card:focus-within, .tpl-result:hover, .tpl-share a:hover { transform: none; }
}
.tpl-page .contact .hours strong { color: var(--on-dark); }
/* Amends, 13 Nov */
.promise ul, .compare ul { padding: 0; list-style: none; }
.promise .dot .icon { width: 2rem; height: 2rem; }
.compare .dot--sm .icon { width: 1.75rem; height: 1.75rem; }
@media (min-width: 768px) { .compare ul { gap: 0.6rem; } .compare li { min-height: 2.9em; } }
.compare__note { display: block; max-width: none; text-align: center; font-size: var(--fs-body); }
@media (min-width: 1100px) { .compare__note { white-space: nowrap; } }
.foot__legal { font-size: 0.8125rem; line-height: 1.5; }
.coupon__left .promise-line { color: var(--on-dark); }
/* Preview site: keep the logo full size beside the header actions */
.top__inner .brand { flex: none; }
/* Amends, 14 Nov: linked town pills on Areas I cover */
.tpl-pills li:has(> a) { padding: 0; }
.tpl-pills li > a { display: inline-flex; align-items: center; gap: 0.5rem; min-height: var(--touch-target); padding: 0 1.25rem; border-radius: inherit; color: inherit; text-underline-offset: 0.2em; }
/* Amends, 14 Nov: lead form in place of header media (free hosting check) */
.tpl-head__form { display: grid; align-content: center; }
@media (min-width: 1024px) { .tpl-head--split .tpl-head__form { grid-column: 8 / span 5; } }
.lead-form:not(.lead-form--dark) .privacy { color: var(--ink-2); font-size: var(--fs-small); }
.lead-form:not(.lead-form--dark) .privacy a { color: var(--mint-ink); }
.lead-form.done p { color: var(--ink-2); }
.lead-form.done a { color: var(--mint-ink); }
@media (max-width: 1023px) { .tpl-head__form { margin-top: 2rem; } }
/* Amends, 14 Nov: safety net icon sits inside the (valid markup), same look as before */
.net dl > div { display: block; position: relative; padding-left: 2.6rem; }
.net dt > .dot { position: absolute; left: 0; top: 0; }
.net dl > div > dd { margin-top: 0.25rem; }
/* Amends, 14 Nov: the grain boils by moving a composited layer (transform) instead of
repainting the background each frame. Same offsets, timing and steps as before. */
.grain:not(.grain--local) { inset: -48px; will-change: transform; animation-name: boil-shift; }
@keyframes boil-shift { 0% { transform: translate(0, 0); } 25% { transform: translate(-37px, 23px); } 50% { transform: translate(19px, -41px); } 75% { transform: translate(-13px, -17px); } }
@media (prefers-reduced-motion: reduce) { .grain:not(.grain--local) { animation: none; } }
/* Amends, 14 Nov: skip rendering work for sections below the fold until they're near the screen. */
main > section ~ section { content-visibility: auto; contain-intrinsic-size: auto 720px; }
/* Amends, 15 Nov: five nav links (Home, Hosting, Blog, About, Contact). Nothing in the header wraps. */
.top .nav a, .top .btn, .top__phone { white-space: nowrap; }
/* Amends, 15 Nov: calmer footer. Smaller intro line, every link on one line, columns sized to their content. */
.foot__about { font-size: var(--fs-h3); max-width: 20ch; }
.foot__cols a { white-space: nowrap; }
@media (min-width: 1100px) {
.foot__cols--5 { grid-template-columns: minmax(17rem, 1fr) repeat(4, max-content); column-gap: clamp(1.75rem, 3vw, 3.5rem); }
}
/* Amends, 15 Nov: WhatsApp chat widget (bottom right, every page). It is meant to look like WhatsApp,
so it uses WhatsApp's own colours, scoped here as --wa-* rather than added to the site tokens. */
.wa { --wa-green: #25d366; --wa-green-dark: #128c7e; --wa-teal: #075e54; --wa-chat: #efeae2; --wa-bubble: #ffffff; --wa-bar: #f0f2f5; --wa-text: #111b21;
position: fixed; right: max(1rem, env(safe-area-inset-right, 0px)); bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); z-index: calc(var(--z-header) + 1); display: grid; justify-items: end; gap: 0.75rem; font-family: var(--font-body); }
.wa__fab { width: 3.5rem; height: 3.5rem; border: 0; border-radius: 50%; background: var(--wa-green); display: grid; place-items: center; cursor: pointer; box-shadow: var(--shadow-elevated); transition: transform var(--duration-micro) var(--ease), background-color var(--duration-micro) var(--ease); }
.wa__fab .icon { width: 1.9rem; height: 1.9rem; }
.wa__fab:hover { transform: translateY(-2px); background: var(--wa-green-dark); }
.wa__fab:focus-visible { outline: 3px solid var(--mint-ink); outline-offset: 3px; }
.wa__panel { width: min(22rem, calc(100vw - 2rem)); border-radius: 1.25rem; overflow: hidden; background: var(--wa-chat); box-shadow: var(--shadow-floating); }
.wa__head { display: flex; align-items: center; gap: 0.75rem; padding: 0.85rem 0.75rem 0.85rem 1rem; background: var(--wa-teal); color: #fff; }
.wa__avatar { flex: none; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--mint); color: var(--charcoal); display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; }
.wa__who { display: grid; flex: 1; line-height: 1.3; }
.wa__who strong { font-size: 1rem; }
.wa__who span { font-size: 0.8125rem; opacity: 0.85; }
.wa__close { flex: none; width: 2.75rem; height: 2.75rem; border: 0; border-radius: 50%; background: transparent; color: #fff; display: grid; place-items: center; cursor: pointer; }
.wa__close:hover { background: rgba(255, 255, 255, 0.12); }
.wa__close:focus-visible, .wa__send:focus-visible { outline: 3px solid #fff; outline-offset: -3px; }
.wa__close .icon { width: 1.25rem; height: 1.25rem; }
.wa__body { padding: 1.25rem 1rem 1.5rem 1.5rem; }
.wa__bubble { position: relative; max-width: 88%; margin: 0; padding: 0.6rem 0.8rem; border-radius: 0 0.6rem 0.6rem 0.6rem; background: var(--wa-bubble); color: var(--wa-text); font-size: 0.95rem; line-height: 1.45; box-shadow: 0 1px 0.5px rgba(11, 20, 26, 0.13); }
.wa__bubble::before { content: ""; position: absolute; top: 0; left: -8px; border-right: 8px solid var(--wa-bubble); border-bottom: 10px solid transparent; }
.wa__form { display: flex; align-items: flex-end; gap: 0.5rem; padding: 0.6rem 0.6rem 0.6rem 0.75rem; background: var(--wa-bar); }
.wa__form textarea { flex: 1; min-height: 2.75rem; max-height: 7.5rem; resize: none; border: 0; border-radius: 1.4rem; padding: 0.7rem 1rem; background: #fff; color: var(--wa-text); font: inherit; font-size: 1rem; line-height: 1.35; }
.wa__form textarea:focus-visible { outline: 2px solid var(--wa-green-dark); outline-offset: 0; }
.wa__send { flex: none; width: 2.75rem; height: 2.75rem; border: 0; border-radius: 50%; background: var(--wa-green-dark); color: #fff; display: grid; place-items: center; cursor: pointer; }
.wa__send .icon { width: 1.25rem; height: 1.25rem; }
.wa__send:hover { background: var(--wa-teal); }
/* Phones and tablets: sit above the sticky contact bar. Hidden while the mobile menu is open. */
@media (max-width: 1023px) { .wa { bottom: calc(5.25rem + env(safe-area-inset-bottom, 0px)); } .wa__fab { display: none; } }
.sk-locked .wa { display: none; }
@media (prefers-reduced-motion: reduce) { .wa__fab { transition: none; } .wa__fab:hover { transform: none; } }