/* ============================================================ PlanItBetter — pib.events · v7 "Paper & Espresso" Cormorant Garamond + Outfit (self-hosted) Near-black wine #1f0d11 · Porcelain #f4efe6 · Champagne #d9c9a4 ============================================================ */ /* ---------- Self-hosted fonts ---------- *//* ============================================================ PlanItBetter — pib.events · v7 "Paper & Espresso" Cormorant Garamond + Outfit (self-hosted) Near-black wine #1f0d11 · Porcelain #f4efe6 · Champagne #d9c9a4 ============================================================ */ /* ---------- Self-hosted fonts ---------- *//* ============================================================ PlanItBetter — pib.events · v7 "Paper & Espresso" Cormorant Garamond + Outfit (self-hosted) Near-black wine #1f0d11 · Porcelain #f4efe6 · Champagne #d9c9a4 ============================================================ */ /* ---------- Self-hosted fonts ---------- *//* ============================================================ PlanItBetter — pib.events · v7 "Paper & Espresso" Cormorant Garamond + Outfit (self-hosted) Near-black wine #1f0d11 · Porcelain #f4efe6 · Champagne #d9c9a4 ============================================================ */ /* ---------- Self-hosted fonts ---------- */ @font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/CormorantGaramond-500.woff2") format("woff2"); } @font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/CormorantGaramond-600.woff2") format("woff2"); } @font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 500; font-display: swap; src: url("../fonts/CormorantGaramond-500i.woff2") format("woff2"); } @font-face { font-family: "Outfit"; font-style: normal; font-weight: 300; font-display: swap; src: url("../fonts/Outfit-300.woff2") format("woff2"); } @font-face { font-family: "Outfit"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/Outfit-400.woff2") format("woff2"); } @font-face { font-family: "Outfit"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/Outfit-500.woff2") format("woff2"); } /* ---------- Tokens Legacy names kept so every page re-skins automatically: maroon-* now maps to the night/wine scale, gold-* to champagne, cream-* to porcelain. ---------- */ :root { /* v6 "Paper & Espresso" — legacy names, repainted: maroon-*→espresso, cream-*→paper, gold-*→bronze */ --maroon-990: #0d0d0c; --maroon-950: #131312; --maroon-900: #1a1a18; --maroon-800: #232321; --maroon-700: #2e2e2b; --maroon-600: #3d3d39; --maroon-500: #55554f; --maroon-400: #71716b; --cream-50: #fcfbf7; --cream-100: #f6f4ee; --cream-200: #ece9e0; --cream-300: #ded9ce; --gold-200: #eaddc2; --gold-300: #d9c9a4; --gold-400: #c2b084; --gold-500: #a08e66; /* Claret — the brand red, sampled from page 1 of the 2026 deck (#7d1f23). Across the deck the palette is ~55% cream, ~30% claret: this is the second primary, not a decorative accent. On the site it is reserved for one job — ACTION. Primary buttons, the closing CTA band, focus rings, and the single emphasised word per heading. Nothing else may use it, because its scarcity is what makes a visitor's eye go straight to the thing worth pressing. Contrast, measured: 700 on cream-50 = 9.69:1; white on 700 = 10.04:1; 300 on ink-950 = 7.35:1. All clear AA comfortably. */ --claret-800: #5e161a; /* pressed / hover on solid fills */ --claret-700: #7d1f23; /* the deck red — default action colour */ --claret-600: #93262c; /* gradient partner, never a text colour on cream */ --ink-900: #1c1c1a; --ink-700: #45453f; --ink-500: #6b6b63; --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif; --sans: "Outfit", "Segoe UI", system-ui, -apple-system, sans-serif; --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-luxe: cubic-bezier(0.65, 0, 0.15, 1); --radius: var(--r-lg); --radius-sm: var(--r-md); --nav-h: 76px; --gutter: clamp(1.25rem, 4vw, 3rem); /* v12 - claret-dark ramp. Content bands go wine, not black; the neutral --maroon-* ramp is kept for the header, sticky bar, footer, loader, menu. Measured: cream-100 on 900 = 15.0:1, gold-300 on 900 = 10.1:1, ink-500 on cream-blush = 4.69:1. */ --claret-950: #2a0b0e; --claret-900: #3b1015; --claret-850: #4a1319; --cream-blush: #f2eae4; /* v12 - type scale. Every step still moves at phone width (the old clamps all sat on their floor at 390px, so the phone had no hierarchy). */ --fs--1: clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem); --fs-0: clamp(1.0625rem, 1rem + 0.28vw, 1.125rem); --fs-1: clamp(1.156rem, 1.094rem + 0.278vw, 1.344rem); --fs-2: clamp(1.375rem, 1.25rem + 0.556vw, 1.75rem); --fs-3: clamp(2.125rem, 1.667rem + 2.037vw, 3.5rem); --fs-4: clamp(2.625rem, 2rem + 2.778vw, 4.5rem); --fs-5: clamp(2.875rem, 2rem + 3.889vw, 5.5rem); /* v12 - spacing + radius */ --sp-1: 0.5rem; --sp-2: 1rem; --sp-3: 1.5rem; --sp-4: 2rem; --sp-5: 3rem; --sp-6: 4rem; --sp-fluid-sm: clamp(1.25rem, 0.875rem + 1.5vw, 2rem); --sp-fluid-md: clamp(2rem, 1.25rem + 3vw, 4rem); --sp-fluid-lg: clamp(3rem, 1.5rem + 5vw, 6rem); --r-xs: 8px; --r-sm: 12px; --r-md: 16px; --r-lg: 22px; --r-pill: 999px; } /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } body { font-family: var(--sans); font-weight: 300; font-size: var(--fs-0); line-height: 1.65; color: var(--ink-900); background: var(--cream-100); overflow-x: hidden; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } main { overflow-x: clip; width: 100%; max-width: 100%; } img, svg, video { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } ::selection { background: var(--claret-700); color: var(--cream-50); } .skip-link { position: absolute; left: -999px; top: 0; z-index: 300; background: var(--maroon-900); color: var(--cream-100); padding: 0.8rem 1.4rem; border-radius: 0 0 14px 0; font-weight: 500; } .skip-link:focus { left: 0; } :focus-visible { outline: 2px solid var(--claret-700); outline-offset: 3px; } /* On dark grounds the claret ring would disappear, so flip it to champagne there. */ .theme-maroon :focus-visible, .cta-band :focus-visible, .site-footer :focus-visible, .checkdate :focus-visible, .venue :focus-visible, .mobile-menu :focus-visible, .theme-ink :focus-visible { outline-color: var(--gold-300); } /* Film grain */ body::after { content: ""; position: fixed; inset: -50%; z-index: 120; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); opacity: 0.035; mix-blend-mode: overlay; } /* ---------- Preloader ---------- */ .loader { position: fixed; inset: 0; z-index: 500; display: flex; align-items: center; justify-content: center; background: var(--maroon-950); transition: opacity 0.7s var(--ease-luxe), visibility 0s linear 0.7s; } .loader img { height: 84px; opacity: 0; animation: loaderMark 1s var(--ease-out) 0.1s forwards; } @keyframes loaderMark { from { opacity: 0; transform: translateY(14px) scale(0.96); } to { opacity: 1; transform: none; } } .loader.done { opacity: 0; visibility: hidden; } /* ---------- Progress thread (JS-injected, desktop) ---------- */ .thread { position: fixed; left: clamp(0.9rem, 1.6vw, 1.8rem); top: 0; bottom: 0; z-index: 150; width: 1px; pointer-events: none; } .thread::before { content: ""; position: absolute; inset: 12vh 0; background: rgba(168, 152, 124, 0.22); } .thread .thread-fill { position: absolute; top: 12vh; left: 0; width: 100%; height: 0; max-height: 76vh; background: linear-gradient(180deg, var(--gold-200), var(--gold-500)); } .thread .thread-tip { position: absolute; left: 50%; transform: translate(-50%, -50%) rotate(45deg); width: 7px; height: 7px; background: var(--gold-300); border-radius: 2px 60% 2px 60%; } /* Particle canvases (JS-injected) */ .fx-particles { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; } /* ---------- Typography ---------- */ h1, h2, h3, .serif { font-family: var(--serif); font-weight: 600; line-height: 1.04; letter-spacing: -0.005em; color: var(--maroon-900); } h1 { font-size: var(--fs-4); line-height: 1.02; } h2 { font-size: var(--fs-3); line-height: 1.06; } h3 { font-size: var(--fs-2); font-weight: 500; line-height: 1.15; } .theme-maroon h1, .theme-maroon h2, .theme-maroon h3, .theme-ink h1, .theme-ink h2, .theme-ink h3 { color: var(--cream-100); } em { font-style: italic; font-weight: 500; } h1 em, h2 em { color: var(--gold-300); font-weight: 500; } .theme-cream h2 em, .theme-cream-deep h2 em { color: var(--claret-700); } /* Ghost display word */ .ghost { position: absolute; z-index: 0; pointer-events: none; user-select: none; font-family: var(--serif); font-weight: 600; font-style: italic; font-size: clamp(6rem, 18vw, 17rem); line-height: 1; white-space: nowrap; color: transparent; -webkit-text-stroke: 1px rgba(213, 200, 173, 0.16); } .theme-cream .ghost, .theme-cream-deep .ghost { -webkit-text-stroke: 1px rgba(51, 22, 29, 0.1); } .kicker { display: inline-flex; align-items: center; gap: 0.9rem; font-family: var(--sans); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.32em; text-transform: uppercase; color: var(--ink-500); margin-bottom: 1.4rem; } /* every dark ground, not just .theme-maroon — page heroes and the CTA band too */ .theme-maroon .kicker, .page-hero .kicker, .cta-band .kicker, .site-footer .kicker, .theme-ink .kicker { color: var(--gold-300); } .kicker::before { content: ""; width: 34px; height: 1px; background: var(--gold-500); } .kicker--bare::before { display: none; } .lede { font-size: var(--fs-1); line-height: 1.6; color: var(--ink-700); max-width: 56ch; font-weight: 300; } .theme-maroon .lede, .theme-ink .lede { color: var(--cream-200); } .measure { max-width: 62ch; } /* ---------- Layout ---------- */ .container { width: min(1240px, 100% - 2 * var(--gutter)); margin-inline: auto; } .container--wide { width: min(1380px, 100% - 2 * var(--gutter)); margin-inline: auto; } section { position: relative; } .section { padding-block: clamp(3.5rem, 1.5rem + 7vw, 8rem); } /* 390: 51 1440: 125 */ .section--tight { padding-block: clamp(2.5rem, 1rem + 5vw, 5.5rem); } .section--band { padding-block: clamp(2rem, 1rem + 3.5vw, 4rem); } .theme-maroon { background: linear-gradient(180deg, var(--claret-900), var(--claret-850) 45%, var(--claret-900)); color: var(--cream-100); } .theme-cream { background: var(--cream-100); } .theme-cream-deep { background: var(--cream-blush); } .section-head { max-width: 900px; margin-bottom: var(--sp-fluid-md); } .section-head--split { max-width: none; display: flex; align-items: flex-end; justify-content: space-between; gap: 1.25rem 3rem; flex-wrap: wrap; } .section-head--split .aside-note { max-width: 34ch; color: var(--ink-500); font-size: 1rem; padding-bottom: 0.5rem; } .theme-maroon .section-head--split .aside-note, .theme-ink .section-head--split .aside-note { color: var(--cream-300); } /* ---------- Buttons ---------- */ .btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 0.7rem; padding: 1.02rem 2.1rem; border-radius: 999px; font-family: var(--sans); font-weight: 500; font-size: 0.95rem; letter-spacing: 0.04em; white-space: nowrap; overflow: hidden; transition: transform 0.5s var(--ease-out), background-color 0.35s, color 0.35s, border-color 0.35s, box-shadow 0.5s; will-change: transform; } .btn > * { position: relative; z-index: 1; } .btn::before { content: ""; position: absolute; top: 0; bottom: 0; left: -80%; width: 55%; z-index: 0; background: linear-gradient(100deg, transparent, rgba(255, 250, 240, 0.5), transparent); transform: skewX(-20deg); transition: left 0.7s var(--ease-luxe); } .btn:hover::before { left: 125%; } /* button-in-button trailing icon */ .btn .arr { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(20, 20, 18, 0.08); font-size: 0.9em; margin-right: -0.7rem; transition: transform 0.45s var(--ease-out), background 0.35s; } .btn--solid .arr, .btn--ghost .arr { background: rgba(253, 251, 247, 0.14); } .btn:hover .arr { transform: translate(3px, -1px) scale(1.05); } .btn:active { transform: scale(0.98); } .btn--solid { background: var(--claret-700); color: var(--cream-50); box-shadow: 0 14px 34px -14px rgba(125, 31, 35, 0.55); } .btn--solid:hover { background: var(--claret-800); transform: translateY(-2px); box-shadow: 0 18px 40px -14px rgba(125, 31, 35, 0.6); } .btn--cream { background: var(--cream-50); color: var(--maroon-900); box-shadow: 0 16px 38px -16px rgba(10, 3, 5, 0.55); } .btn--cream:hover { background: #fff; transform: translateY(-2px); } .btn--ghost { border: 1px solid rgba(213, 200, 173, 0.5); color: var(--cream-100); background: rgba(255, 255, 255, 0.02); backdrop-filter: blur(6px); } .btn--ghost:hover { border-color: var(--gold-200); background: rgba(213, 200, 173, 0.1); transform: translateY(-2px); } .btn--ghost-dark { border: 1px solid rgba(41, 18, 23, 0.35); color: var(--maroon-900); } .btn--ghost-dark:hover { border-color: var(--maroon-800); background: rgba(41, 18, 23, 0.05); transform: translateY(-2px); } .btn--lg { padding: 1.2rem 2.6rem; font-size: 1.02rem; } .link-arrow { display: inline-flex; align-items: center; gap: 0.55rem; font-weight: 500; letter-spacing: 0.05em; color: var(--claret-700); text-transform: uppercase; font-size: 0.8rem; } .theme-maroon .link-arrow, .theme-ink .link-arrow { color: var(--gold-300); } .link-arrow .arr { transition: transform 0.4s var(--ease-out); } .link-arrow:hover .arr { transform: translateX(6px); } /* ---------- Header / Nav ---------- */ .site-header { position: fixed; top: 18px; left: 0; right: 0; z-index: 200; display: flex; justify-content: center; pointer-events: none; transition: top 0.45s var(--ease-out), transform 0.5s var(--ease-out); } .nav-pill { pointer-events: auto; display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 2.2rem); padding: 0.62rem 0.7rem 0.62rem 1.5rem; border-radius: 999px; background: rgba(20, 8, 11, 0.55); border: 1px solid rgba(244, 239, 230, 0.12); backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2); box-shadow: 0 18px 50px -20px rgba(8, 3, 4, 0.6); transition: background 0.4s, box-shadow 0.4s; } /* 0.85 left body text legible-but-blurred behind a centred pill, so a full-width line looked like it had words missing rather than scrolling under chrome. */ .scrolled .nav-pill { background: rgba(16, 6, 8, 0.94); box-shadow: 0 20px 55px -18px rgba(8, 3, 4, 0.78); } .brand { display: flex; align-items: center; gap: 0.75rem; } .brand img { height: 40px; width: auto; } .brand .brand-word { font-family: var(--serif); font-size: 1.25rem; font-weight: 600; color: var(--cream-100); letter-spacing: 0.01em; line-height: 1; transform: translateY(1px); } .nav-links { display: flex; align-items: center; gap: clamp(0.9rem, 1.8vw, 1.7rem); } .nav-links a { position: relative; font-size: 0.9rem; font-weight: 400; color: var(--cream-200); letter-spacing: 0.03em; padding: 0.4rem 0.1rem; transition: color 0.3s; } .nav-links a::after { content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%; background: var(--gold-300); transform: scaleX(0); transform-origin: right; transition: transform 0.45s var(--ease-out); } .nav-links a:hover, .nav-links a[aria-current="page"] { color: #fff; } .nav-links a:hover::after, .nav-links a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; } .nav-cta { padding: 0.72rem 1.5rem; font-size: 0.85rem; } .nav-toggle { display: none; position: relative; width: 44px; height: 44px; border-radius: 50%; } .nav-toggle span { position: absolute; left: 11px; right: 11px; height: 1.6px; background: var(--cream-100); transition: transform 0.45s var(--ease-out), opacity 0.3s; border-radius: 2px; } .nav-toggle span:nth-child(1) { top: 16px; } .nav-toggle span:nth-child(2) { top: 22px; } .nav-toggle span:nth-child(3) { top: 28px; } .menu-open .nav-toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); } .menu-open .nav-toggle span:nth-child(2) { opacity: 0; } .menu-open .nav-toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } .mobile-menu { position: fixed; inset: 0; z-index: 190; display: flex; flex-direction: column; justify-content: center; padding: 6rem var(--gutter) 3rem; background: linear-gradient(160deg, var(--maroon-950), var(--maroon-800)); visibility: hidden; opacity: 0; transition: opacity 0.45s var(--ease-out), visibility 0s linear 0.45s; } .menu-open .mobile-menu { visibility: visible; opacity: 1; transition: opacity 0.45s var(--ease-out), visibility 0s; } .mobile-menu ul { display: flex; flex-direction: column; gap: 0.3rem; } .mobile-menu ul li, .mobile-menu .mm-meta { opacity: 0; transform: translateY(34px); transition: opacity 0.55s var(--ease-out), transform 0.65s var(--ease-out); } .menu-open .mobile-menu ul li, .menu-open .mobile-menu .mm-meta { opacity: 1; transform: none; } .menu-open .mobile-menu ul li:nth-child(1) { transition-delay: 0.08s; } .menu-open .mobile-menu ul li:nth-child(2) { transition-delay: 0.14s; } .menu-open .mobile-menu ul li:nth-child(3) { transition-delay: 0.2s; } .menu-open .mobile-menu ul li:nth-child(4) { transition-delay: 0.26s; } .menu-open .mobile-menu ul li:nth-child(5) { transition-delay: 0.32s; } .menu-open .mobile-menu ul li:nth-child(6) { transition-delay: 0.38s; } .menu-open .mobile-menu .mm-meta { transition-delay: 0.46s; } .mobile-menu a.mm-link { font-family: var(--serif); font-size: clamp(2rem, 8vw, 3rem); font-weight: 500; color: var(--cream-100); display: inline-block; padding: 0.35rem 0; } .mobile-menu a.mm-link em { color: var(--gold-300); font-style: italic; } .mobile-menu .mm-meta { margin-top: 2.5rem; color: var(--cream-300); font-size: 0.95rem; display: flex; flex-direction: column; gap: 0.4rem; } .mobile-menu .mm-meta a:hover { color: var(--gold-300); } /* ============================================================ HERO v6 — light editorial split (paper & espresso) ============================================================ */ .hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; background: radial-gradient(70% 55% at 85% 8%, rgba(217, 201, 164, 0.14), transparent 60%), var(--cream-50); color: var(--ink-900); overflow: hidden; padding-top: calc(var(--nav-h) + 3rem); } /* v7 cinematic hero: centered copy above an expanding frame */ .hero--cinema .hero-copy { position: relative; z-index: 3; text-align: center; width: min(1080px, 100% - 2 * var(--gutter)); margin-inline: auto; padding-top: clamp(0.5rem, 3vh, 2.5rem); } .hero--cinema .display { margin-top: 1.5rem; font-size: var(--fs-5); } .hero--cinema .lede { margin-inline: auto; text-align: center; } .hero--cinema .hero-ctas { justify-content: center; } .hero--cinema .hero-note { justify-content: center; } .eyebrow { display: inline-flex; align-items: center; gap: 0.7rem; padding: 0.45rem 1.05rem; border-radius: 999px; border: 1px solid var(--cream-300); background: rgba(255, 255, 255, 0.6); font-size: 0.66rem; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-500); } .eyebrow::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--gold-500); } .hero .display { font-family: var(--serif); font-weight: 600; font-size: var(--fs-5); line-height: 1.02; color: var(--maroon-900); text-wrap: balance; margin-top: 1.6rem; } .hero .display em { color: var(--claret-700); font-weight: 500; } .hero h1 { font-family: var(--sans); font-weight: 400; font-size: clamp(0.82rem, 1vw, 0.95rem); line-height: 1.6; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-500); margin-top: 1.6rem; } .hero .lede { margin-top: 1.2rem; color: var(--ink-700); max-width: 54ch; } .hero-ctas { display: flex; gap: 1rem; margin-top: 2.4rem; flex-wrap: wrap; align-items: center; } .hero-note { margin-top: 1.3rem; font-size: 0.85rem; letter-spacing: 0.05em; color: var(--ink-500); display: flex; align-items: center; gap: 0.6rem; } .hero-note::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--gold-500); } /* expanding cinema frame */ .hero-cine { position: relative; z-index: 2; flex: 1; display: flex; align-items: flex-end; justify-content: center; margin-top: clamp(1.5rem, 4vh, 3rem); min-height: 28vh; } .cine-frame { width: min(52vw, 680px); height: min(40vh, 400px); border-radius: 22px 22px 0 0; overflow: hidden; transform-origin: center bottom; box-shadow: 0 -24px 70px -30px rgba(20, 20, 18, 0.45), 0 0 0 1px rgba(20, 20, 18, 0.08); will-change: transform; } .cine-frame img { width: 100%; height: 100%; object-fit: cover; object-position: center 62%; } .cine-caption { position: absolute; z-index: 3; bottom: 1.6rem; left: 50%; transform: translateX(-50%); font-size: 0.62rem; font-weight: 500; letter-spacing: 0.26em; text-transform: uppercase; color: var(--cream-100); background: rgba(13, 13, 12, 0.55); backdrop-filter: blur(8px); padding: 0.45rem 1rem; border-radius: 999px; border: 1px solid rgba(226, 214, 186, 0.25); white-space: nowrap; opacity: 0; } .motion-off .cine-caption, html:not(.js) .cine-caption { opacity: 1; } /* Stat ticker */ /* ============================================================ CHECK-YOUR-DATE band (conversion) ============================================================ */ .checkdate { position: relative; background: var(--claret-900); color: var(--cream-100); padding-block: clamp(2.5rem, 1rem + 5vw, 5rem); border-top: 1px solid rgba(217, 201, 164, 0.14); } .checkdate .container { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: clamp(2rem, 4vw, 4rem); align-items: center; } .checkdate h2 { font-size: var(--fs-3); color: var(--cream-50); max-width: 16ch; } .checkdate .cd-sub { margin-top: 0.8rem; color: var(--cream-300); font-size: 0.98rem; max-width: 40ch; } /* Four fields + button. Labels are now real and visible: the old version was placeholder-only, so the moment a visitor typed, the field lost its meaning (and at 1440px the first placeholder clipped to "Event date or m"). */ /* 2x2 + full-width button. A single row of four fields plus a button only had ~half the section width to live in, so every placeholder clipped ("you@exam") and an inline error shoved its neighbours out of alignment. */ .cd-form { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem 0.9rem; align-items: start; } .cd-form .btn { grid-column: 1 / -1; justify-self: start; } .cd-f { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; } .cd-f label { font-family: var(--sans); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-300); } .cd-form input { font: inherit; font-weight: 300; color: var(--cream-50); background: rgba(244, 239, 230, 0.06); border: 1px solid rgba(234, 221, 194, 0.22); border-radius: var(--r-xs); padding: 0.95rem 1.15rem; transition: border-color 0.3s, background 0.3s; min-width: 0; } .cd-form input::placeholder { color: rgba(234, 227, 212, 0.72); } .cd-form input:focus { border-color: var(--gold-300); background: rgba(244, 239, 230, 0.1); } .cd-form input:focus-visible { outline: 2px solid var(--gold-300); outline-offset: 2px; } .cd-form .btn { border-radius: 12px; } /* services index: per-row detail chips */ /* ============================================================ PROMISE — statement + commitment ledger ============================================================ */ .promise-wrap { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(2.5rem, 6vw, 7rem); align-items: start; } .promise-statement { font-family: var(--serif); font-weight: 500; font-style: italic; font-size: calc(var(--fs-5) * 0.7); line-height: 1.22; color: var(--maroon-900); max-width: 20ch; } /* ============================================================ VENUE — dedicated section + enquiry ============================================================ */ .venue { position: relative; overflow: hidden; } .venue h2 { max-width: 15ch; } .venue .lede { margin-top: 1.4rem; } /* ============================================================ JOURNEY v2 — compact interactive stepper ============================================================ */ .jrny { max-width: none; } .jrny-rail { position: relative; display: flex; gap: 0.4rem; margin-top: 2.4rem; } .jrny-rail::before { content: ""; position: absolute; left: 0; right: 0; top: 13px; height: 1px; background: var(--cream-300); } /* Full-width line scaled from the left by JS (scaleX), so moving between steps never triggers layout. */ .jrny-rail .jr-fill { position: absolute; left: 0; top: 13px; height: 1px; background: var(--gold-500); width: 100%; transform: scaleX(0.2); transform-origin: left center; transition: transform 0.65s var(--ease-luxe); } .jr-step { position: relative; flex: 1; padding-top: 0; text-align: left; display: flex; flex-direction: column; align-items: flex-start; gap: 0.7rem; background: none; border: 0; cursor: pointer; } .jr-dot { width: 27px; height: 27px; border-radius: 50%; display: grid; place-items: center; background: var(--cream-100); border: 1px solid var(--cream-300); font-family: var(--serif); font-size: 0.82rem; color: var(--ink-500); font-variant-numeric: oldstyle-nums; transition: background 0.4s, border-color 0.4s, color 0.4s, transform 0.5s var(--ease-out); } .jr-step:hover .jr-dot { border-color: var(--gold-400); transform: scale(1.08); } .jr-step[aria-selected="true"] .jr-dot { background: var(--claret-700); border-color: var(--claret-700); color: var(--cream-50); transform: scale(1.12); } .jr-label { font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-500); transition: color 0.35s; line-height: 1.35; } .jr-step[aria-selected="true"] .jr-label { color: var(--maroon-900); } .jrny-panel { margin-top: 2.4rem; min-height: 148px; background: var(--cream-50); border: 1px solid var(--cream-300); border-radius: var(--r-lg); padding: clamp(1.5rem, 2.8vw, 2.2rem); } /* every step ships in the HTML (crawlable, works without JS); JS reveals one */ .jrny-slide { display: none; } .jrny-slide.is-active { display: block; } html:not(.js) .jrny-slide { display: block; margin-bottom: 1.6rem; } .jrny-panel h3 { font-size: var(--fs-2); color: var(--maroon-900); } .jrny-panel p { margin-top: 0.7rem; color: var(--ink-500); max-width: 62ch; font-size: 1.02rem; } .jrny-panel .jp-tag { display: inline-block; margin-top: 1rem; font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--claret-700); } /* ============================================================ FLEET v2 — vehicle cards ============================================================ */ .fleet-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(0.9rem, 1.6vw, 1.3rem); } .veh { background: var(--card-bg); border: 1px solid var(--card-bd); border-radius: var(--r-md); padding: var(--card-pad); display: flex; flex-direction: column; transition: border-color 0.4s, transform 0.55s var(--ease-out), background 0.4s; } .veh:hover { border-color: var(--card-hover-bd); transform: translateY(-5px); box-shadow: var(--card-shadow-hover); } .veh-art { color: var(--claret-700); margin-bottom: 1.1rem; } .theme-maroon .veh-art, .page-hero .veh-art, .theme-ink .veh-art { color: var(--gold-300); } .veh-art svg { width: 100%; height: auto; } .veh h3 { font-family: var(--serif); font-size: var(--fs-2); font-weight: 500; color: var(--card-title); } .veh .veh-for { margin-top: 0.4rem; font-size: var(--fs--1); color: var(--card-text); } .veh-meta { display: flex; gap: 1.4rem; margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--card-bd); } .veh .veh-for { margin-bottom: 1.1rem; } .veh-meta div span { display: block; font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--card-text); } .veh-meta div b { display: block; font-family: var(--serif); font-size: 1.15rem; font-weight: 500; color: var(--card-title); margin-top: 0.2rem; } .theme-maroon .veh-meta div b, .theme-ink .veh-meta div b { color: var(--gold-200); } /* ---------- Interior page hero ---------- */ .page-hero { position: relative; overflow: hidden; padding: calc(var(--nav-h) + clamp(3.5rem, 8vh, 6rem)) 0 clamp(3rem, 5vw, 5rem); background: linear-gradient(165deg, var(--claret-950), var(--claret-850) 75%, var(--claret-900)); color: var(--cream-100); } .page-hero .watermark { position: absolute; right: -4%; bottom: -22%; height: 130%; opacity: 0.04; pointer-events: none; } .page-hero h1 { color: var(--cream-50); max-width: 24ch; font-size: var(--fs-4); } .page-hero .lede { margin-top: 1.6rem; color: var(--cream-200); } .page-hero .hero-ctas { justify-content: flex-start; margin-top: 2.4rem; } .breadcrumbs { display: flex; flex-wrap: wrap; gap: 0.55rem; align-items: center; font-size: 0.82rem; letter-spacing: 0.06em; color: var(--cream-300); margin-bottom: 2.2rem; } .breadcrumbs a:hover { color: var(--gold-200); } .breadcrumbs .sep { color: var(--gold-400); } /* ---------- Bento grid (hub page) ---------- */ .bento { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-flow: dense; gap: clamp(0.9rem, 1.6vw, 1.4rem); } .bento > * { border-radius: var(--radius); overflow: hidden; position: relative; } .b-span3 { grid-column: span 3; } .b-span2 { grid-column: span 2; } .svc-card { display: flex; flex-direction: column; justify-content: flex-end; gap: 0.6rem; min-height: 340px; padding: 2rem; background: linear-gradient(170deg, var(--claret-850), var(--claret-950)); color: var(--cream-100); isolation: isolate; } .svc-card > * { position: relative; z-index: 2; } .svc-card .svc-bg { position: absolute; inset: 0; z-index: 0; } .svc-card .svc-bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.4; transition: transform 1s var(--ease-out), opacity 0.6s; } .svc-card::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(185deg, rgba(23, 10, 13, 0.1) 20%, rgba(16, 6, 8, 0.9) 82%); } .svc-card:hover .svc-bg img { transform: scale(1.06); opacity: 0.55; } .svc-card h3 { color: var(--cream-50); font-size: var(--fs-2); } .svc-card p { color: var(--cream-200); font-size: 0.98rem; max-width: 42ch; } .svc-card .svc-icon { width: 44px; height: 44px; color: var(--gold-300); margin-bottom: auto; } .svc-card .link-arrow { margin-top: 0.6rem; } /* ---------- Editorial rows ---------- */ .ed-row { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(1.5rem, 3.5vw, 4rem); align-items: center; } .ed-row + .ed-row { margin-top: clamp(4.5rem, 8vw, 7.5rem); } .ed-row .ed-media { grid-column: span 6; } .ed-row .ed-copy { grid-column: span 6; } .ed-row--flip .ed-media { order: 1; } .ed-row--flip .ed-copy { order: 2; } .ed-copy h2 { max-width: 16ch; } .ed-copy .lede { margin-top: 1.3rem; } ul.ticks { display: flex; flex-direction: column; gap: 0.85rem; } .ed-copy ul.ticks { margin-top: 1.6rem; } /* A flex li turns every inline child into its own column: any tick containing a link split into "text | link | text" side by side. Block flow with the mark positioned keeps the sentence intact. */ ul.ticks li { display: block; position: relative; padding-left: 2.15rem; color: var(--ink-700); } .theme-maroon ul.ticks li, .theme-ink ul.ticks li { color: var(--cream-200); } ul.ticks li::before { content: ""; position: absolute; left: 0; top: 0.28em; width: 20px; height: 20px; background: var(--gold-500); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat; } /* Image treatments */ .img-frame { border-radius: var(--radius); overflow: hidden; position: relative; box-shadow: 0 34px 70px -34px rgba(23, 10, 13, 0.4); } .img-frame img { width: 100%; height: 100%; object-fit: cover; } .js .img-reveal { clip-path: inset(10% 8% 10% 8% round var(--radius)); } .js .img-reveal img { transform: scale(1.14); } .img-frame--portrait { aspect-ratio: 3 / 4; } .img-frame--wide { aspect-ratio: 16 / 10; } .img-frame .caption { position: absolute; left: 1.2rem; bottom: 1.2rem; z-index: 2; background: rgba(16, 6, 8, 0.6); backdrop-filter: blur(10px); color: var(--cream-100); padding: 0.55rem 1.1rem; border-radius: 999px; font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; } .testi-card { background: var(--card-bg); border: 1px solid var(--card-bd); border-radius: var(--card-r); padding: var(--card-pad); backdrop-filter: blur(8px); transition: border-color 0.4s, transform 0.5s var(--ease-out); } .testi-card:hover { border-color: var(--card-hover-bd); transform: translateY(-3px); } .testi-card::before { content: "\201C"; font-family: var(--serif); font-size: 1.8rem; line-height: 0.4; color: var(--claret-700); display: block; margin-bottom: 0.7rem; } .theme-maroon .testi-card::before, .theme-ink .testi-card::before { color: var(--gold-300); } .testi-card p { font-family: var(--serif); font-style: italic; font-size: var(--fs-1); line-height: 1.5; color: var(--card-title); } .testi-card .attr { margin-top: 0.8rem; font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--card-text); } /* ---------- Horizontal accordion ---------- */ .h-acc { display: flex; gap: 0.8rem; min-height: 420px; } .h-acc-item { position: relative; flex: 1; overflow: hidden; border-radius: var(--radius); background: linear-gradient(180deg, var(--claret-850), var(--claret-950)); cursor: pointer; transition: flex 0.85s var(--ease-luxe); display: flex; align-items: flex-end; isolation: isolate; } .h-acc-item.active { flex: 3.2; } .h-acc-item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.58; z-index: 0; transition: opacity 0.6s, transform 1.2s var(--ease-out); } .h-acc-item.active img { opacity: 0.7; transform: scale(1.04); } .h-acc-item::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(185deg, rgba(23, 10, 13, 0.15), rgba(16, 6, 8, 0.85) 85%); } .h-acc-content { position: relative; z-index: 2; padding: 1.8rem; width: 100%; } .h-acc-item .ha-title { position: relative; z-index: 2; font-family: var(--serif); font-size: 1.35rem; font-weight: 500; color: var(--cream-50); writing-mode: vertical-rl; rotate: 180deg; transition: opacity 0.4s; white-space: nowrap; padding: 1.4rem; } .h-acc-item.active .ha-title { display: none; } .h-acc-detail { opacity: 0; transform: translateY(14px); transition: opacity 0.5s 0.25s, transform 0.6s 0.25s var(--ease-out); } .h-acc-item.active .h-acc-detail { opacity: 1; transform: none; } .h-acc-detail h3 { color: var(--cream-50); font-size: var(--fs-2); } .h-acc-detail p { color: var(--cream-200); font-size: 0.98rem; max-width: 46ch; margin-top: 0.5rem; } /* ---------- FAQ ---------- */ .faq-list { max-width: 860px; } .faq-item { border-bottom: 1px solid var(--cream-300); } .theme-maroon .faq-item, .theme-ink .faq-item { border-color: rgba(244, 239, 230, 0.15); } .faq-q { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 2rem; padding: 1.7rem 0.2rem; text-align: left; font-family: var(--serif); font-size: var(--fs-2); font-weight: 500; color: var(--maroon-900); transition: color 0.3s, transform 0.45s var(--ease-out); line-height: 1.25; } .faq-q:hover { color: var(--claret-700); transform: translateX(0.7rem); } .theme-maroon .faq-q, .theme-ink .faq-q { color: var(--cream-100); } .faq-q .faq-icon { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--gold-400); position: relative; transition: transform 0.5s var(--ease-out), background 0.3s; } .faq-q .faq-icon::before, .faq-q .faq-icon::after { content: ""; position: absolute; inset: 0; margin: auto; background: var(--gold-500); width: 12px; height: 1.6px; border-radius: 2px; transition: transform 0.5s var(--ease-out); } .faq-q .faq-icon::after { transform: rotate(90deg); } .faq-item.open .faq-icon { transform: rotate(45deg); background: rgba(193, 178, 148, 0.12); } .faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.55s var(--ease-luxe); } .faq-item.open .faq-a { grid-template-rows: 1fr; } .faq-a-inner { overflow: hidden; min-height: 0; color: var(--ink-700); max-width: 68ch; } .faq-a-inner p { padding: 0.2rem 3.5rem 1.7rem 0.2rem; } .theme-maroon .faq-a-inner, .theme-ink .faq-a-inner { color: var(--cream-200); } /* ---------- Process steps ---------- */ .steps { counter-reset: step; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: clamp(1.4rem, 2.5vw, 2rem); } .step { background: var(--card-bg); border: 1px solid var(--card-bd); border-radius: var(--card-r); padding: var(--card-pad); position: relative; overflow: hidden; transition: transform 0.55s var(--ease-out), box-shadow 0.55s var(--ease-out), border-color 0.4s; } .step::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--gold-400), transparent 70%); transform: scaleX(0); transform-origin: left; transition: transform 0.6s var(--ease-luxe); } .step:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -30px rgba(23, 10, 13, 0.3); border-color: var(--gold-400); } .step:hover::before { transform: scaleX(1); } .theme-maroon .step, .theme-ink .step { background: rgba(244, 239, 230, 0.04); border-color: rgba(244, 239, 230, 0.12); } .theme-maroon .step:hover, .theme-ink .step:hover { box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.6); border-color: rgba(213, 200, 173, 0.45); } .step .s-num { font-family: var(--serif); font-variant-numeric: oldstyle-nums; font-size: 2.4rem; color: var(--gold-500); line-height: 1; } .step h3 { margin-top: 1.1rem; font-size: var(--fs-2); } .theme-maroon .step h3, .theme-ink .step h3 { color: var(--cream-50); } .step p { margin-top: 0.5rem; font-size: 0.97rem; color: var(--ink-500); } .theme-maroon .step p, .theme-ink .step p { color: var(--cream-200); } /* Pills */ .pill-row { display: flex; flex-wrap: wrap; gap: 0.7rem; } .pill { padding: 0.55rem 1.25rem; border-radius: 999px; font-size: 0.88rem; font-weight: 400; border: 1px solid rgba(244, 239, 230, 0.25); color: var(--cream-100); background: rgba(244, 239, 230, 0.04); transition: border-color 0.3s, background 0.3s, transform 0.4s var(--ease-out); } .pill:hover { border-color: rgba(213, 200, 173, 0.55); transform: translateY(-2px); } .theme-cream .pill, .pill--dark { border-color: rgba(41, 18, 23, 0.28); color: var(--maroon-900); background: rgba(41, 18, 23, 0.03); } /* ---------- CTA band + footer ---------- */ /* The closing CTA is the ONLY drenched-claret surface on the site. Everything else is off-white or near-black, so this band is the single most saturated moment a visitor meets — which is exactly where we want their eye when we finally ask for something. Padding cut ~40%: the old band was 1,470px tall at 1440w with content occupying the middle 450px. */ .cta-band { position: relative; overflow: hidden; text-align: center; background: linear-gradient(168deg, var(--claret-800), var(--claret-700) 55%, #6b1a1e); color: var(--cream-100); padding-block: clamp(4.5rem, 9vw, 7.5rem); } .cta-band h2 { color: var(--cream-50); font-size: clamp(2.8rem, 6.6vw, 5.6rem); max-width: 18ch; margin-inline: auto; text-wrap: balance; } .cta-band .lede { margin: 1.6rem auto 0; text-align: center; color: var(--cream-200); } .cta-band p, .page-hero p:not(.kicker):not(.lede) { color: var(--cream-200); } .cta-band h2 em { color: var(--gold-300); } /* One dominant action, the promise directly beneath it, and email demoted from a same-size button to a text link. Two equal-weight buttons split attention at the exact moment we least want it split. */ .cta-stack { display: flex; flex-direction: column; align-items: center; gap: 1rem; margin-top: 2.4rem; } .btn--go { background: var(--cream-50); color: var(--claret-800); box-shadow: 0 18px 42px -16px rgba(0, 0, 0, 0.5); font-size: 1.05rem; padding: 1.25rem 2.8rem; } .btn--go:hover { background: #fff; transform: translateY(-2px); } .btn--go .arr { background: rgba(94, 22, 26, 0.12); } .cta-assure { font-size: 0.94rem; line-height: 1.5; color: var(--gold-200); } .cta-band .cta-assure { color: var(--gold-200); } .cta-alt { font-size: 0.94rem; color: var(--cream-200); text-decoration: underline; text-decoration-color: rgba(236, 233, 224, 0.45); text-underline-offset: 5px; transition: color 0.3s, text-decoration-color 0.3s; } .cta-alt:hover { color: #fff; text-decoration-color: #fff; } .cta-band .band-logo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); height: 130%; opacity: 0.04; pointer-events: none; } .site-footer { background: var(--maroon-990); color: var(--cream-200); padding: clamp(4rem, 7vw, 6rem) 0 7.5rem; position: relative; } .footer-sign { font-family: var(--serif); font-weight: 600; font-style: italic; font-size: var(--fs-5); line-height: 1.1; color: var(--cream-100); margin-bottom: clamp(3rem, 6vw, 5rem); max-width: 16ch; } .footer-sign em { color: var(--gold-300); } .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.2fr; gap: clamp(2rem, 4vw, 4rem); } .footer-brand img { height: 64px; } .footer-brand p { margin-top: 1.3rem; font-size: 0.95rem; color: var(--cream-300); max-width: 34ch; } .footer-col h3, .footer-col .footer-col-title { font-family: var(--sans); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.28em; text-transform: uppercase; color: var(--gold-300); margin-bottom: 1.3rem; } .footer-col ul { display: flex; flex-direction: column; gap: 0.65rem; } .footer-col a { display: inline-block; font-size: 0.95rem; color: var(--cream-200); transition: color 0.3s, transform 0.3s var(--ease-out); } .footer-col a:hover { color: var(--gold-200); transform: translateX(4px); } .footer-meta { margin-top: clamp(3rem, 5vw, 4.5rem); padding-top: 2rem; border-top: 1px solid rgba(244, 239, 230, 0.1); display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; font-size: 0.85rem; color: var(--cream-300); } .footer-meta a:hover { color: var(--gold-200); } /* ---------- Sticky bottom CTA bar ---------- */ .sticky-cta { position: fixed; left: 50%; bottom: 1.1rem; z-index: 180; transform: translate(-50%, 140%); display: flex; align-items: center; gap: 1.1rem; padding: 0.6rem 0.7rem 0.6rem 1.6rem; background: rgba(16, 6, 8, 0.82); border: 1px solid rgba(193, 178, 148, 0.35); border-radius: 999px; backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2); box-shadow: 0 24px 60px -20px rgba(6, 2, 3, 0.8); color: var(--cream-100); white-space: nowrap; transition: transform 0.7s var(--ease-luxe); } .sticky-cta.visible { transform: translate(-50%, 0); } .sticky-cta .sc-label { font-family: var(--serif); font-style: italic; font-size: 1.08rem; color: var(--cream-100); } .sticky-cta .sc-label em { color: var(--gold-200); } .sticky-cta .btn { padding: 0.7rem 1.4rem; font-size: 0.85rem; flex: 0 0 auto; } /* the CTA must never be squeezed by the label on narrow screens */ .sticky-cta .sc-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .sticky-cta .sc-alt { font-size: 0.85rem; color: var(--cream-300); transition: color 0.3s; } .sticky-cta .sc-alt:hover { color: var(--gold-200); } /* ---------- Contact ---------- */ .contact-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(2.5rem, 5vw, 5rem); align-items: start; } .form-field { display: flex; flex-direction: column; gap: 0.45rem; margin-bottom: 1.4rem; } .form-field label { font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-500); font-weight: 500; } .form-field input, .form-field textarea, .form-field select { font: inherit; color: var(--ink-900); background: var(--cream-50); border: 1px solid var(--cream-300); border-radius: var(--radius-sm); padding: 0.95rem 1.2rem; transition: border-color 0.3s, box-shadow 0.3s; appearance: none; } .form-field textarea { min-height: 140px; resize: vertical; } .form-field input:focus, .form-field textarea:focus, .form-field select:focus { outline: none; border-color: var(--gold-400); box-shadow: 0 0 0 3px rgba(193, 178, 148, 0.18); } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; } /* ---------- Reveal primitives ---------- */ .js [data-reveal] { opacity: 0; transform: translateY(38px); } .js [data-reveal].in { opacity: 1; transform: none; } .js [data-reveal-group] > * { opacity: 0; transform: translateY(34px); } .js.motion-off [data-reveal], .js.motion-off [data-reveal-group] > * { opacity: 1; transform: none; } .split-h .w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: 0.1em; margin-bottom: -0.1em; } .split-h .wi { display: inline-block; transform: translateY(118%); will-change: transform; } .motion-off .split-h .wi { transform: none !important; opacity: 1 !important; } /* resting state stays readable — the scrub darkens rather than reveals */ .scrub-words .sw { opacity: 0.32; transition: none; } .motion-off .scrub-words .sw { opacity: 1; } .draw-svg path, .draw-svg circle, .draw-svg line, .draw-svg polyline { fill: none; stroke: currentColor; } /* ---------- Utility ---------- */ .center { text-align: center; } .center .section-head, .center .lede { margin-inline: auto; } .mt-1 { margin-top: 1rem; } .mt-2 { margin-top: 2rem; } .mt-3 { margin-top: 3rem; } .hide-mobile { display: initial; } /* ---------- Responsive ---------- */ @media (max-width: 1080px) { .footer-grid { grid-template-columns: 1fr 1fr; } .thread { display: none; } .checkdate .container { grid-template-columns: 1fr; }.promise-wrap { grid-template-columns: 1fr; } .fleet-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 900px) { .nav-links, .nav-cta { display: none; } .nav-toggle { display: block; } .site-header { top: 16px; } .ed-row .ed-media, .ed-row .ed-copy { grid-column: span 12; } .ed-row--flip .ed-media, .ed-row--flip .ed-copy { order: 0; } .b-span3, .b-span2 { grid-column: span 6; } .svc-card { min-height: 300px; } .h-acc { flex-direction: column; min-height: 0; } .h-acc-item { min-height: 84px; } .h-acc-item.active { flex: 1; min-height: 320px; } .h-acc-item .ha-title { writing-mode: horizontal-tb; rotate: none; padding: 1.6rem 1.8rem; } .contact-grid { grid-template-columns: 1fr; } .cd-form .btn { grid-column: 1 / -1; justify-self: stretch; } .cine-frame { width: min(78vw, 640px); } } @media (max-width: 640px) { :root { --nav-h: 64px; } .brand img { height: 34px; } .form-row { grid-template-columns: 1fr; } .hero-ctas .btn { width: 100%; justify-content: center; } .sticky-cta { left: 0.8rem; right: 0.8rem; bottom: 0.8rem; transform: translateY(160%); justify-content: space-between; padding-left: 1.2rem; } .sticky-cta.visible { transform: translateY(0); } .sticky-cta .sc-alt { display: none; } .sticky-cta .sc-label { font-size: 0.98rem; } .sticky-cta .sc-lead { display: none; } /* drop the first clause, keep the hook */ .footer-grid { grid-template-columns: 1fr; } .site-footer { padding-bottom: 8.5rem; } .hide-mobile { display: none; } .cd-form { grid-template-columns: 1fr; } .fleet-grid { grid-template-columns: 1fr; } /* journey stepper: stack the rail vertically on phones */ .jrny-rail { flex-direction: column; gap: 0; } .jrny-rail::before, .jrny-rail .jr-fill { display: none; } .jr-step { flex-direction: row; align-items: center; gap: 0.9rem; padding: 0.75rem 0; border-top: 1px solid var(--cream-300); width: 100%; } .jr-step:first-child { border-top: 0; } .jrny-panel { min-height: 0; } } /* Manual motion-off (?motion=off) */ .motion-off .img-reveal { clip-path: inset(0 round var(--radius)) !important; } .motion-off .img-reveal img { transform: none !important; } .motion-off .loader { display: none; } /* The why-diagram's SVG text cannot respond to user text-zoom and falls below readable size on phones. The .why-list beside it makes the same argument in prose, so hide the graphic rather than ship unreadable labels. */ /* Reduced motion: stop looping and auto-playing motion (WCAG 2.2.2) while keeping the design fully visible. Scroll reveals are gated in JS. */ /* Motion is deliberately always-on (client decision, 2026-09-07): the client's own preview environment reports prefers-reduced-motion and the site looked broken when it was honoured. `?motion=off` remains the explicit opt-out. */ /* ============================================================ FORM FEEDBACK — shared by all three forms Every submit now produces a visible outcome. Previously the enquiry form failed silently on an empty name (focus moved, nothing was said) and the date-checker validated nothing at all. ============================================================ */ .field-err { margin-top: 0.45rem; font-family: var(--sans); font-size: 0.82rem; color: var(--claret-600); font-weight: 500; } .theme-maroon .field-err, .checkdate .field-err, .venue .field-err, .theme-ink .field-err { color: #f0a7ab; } [aria-invalid="true"] { border-color: var(--claret-600) !important; } .theme-maroon [aria-invalid="true"], .checkdate [aria-invalid="true"], .venue [aria-invalid="true"], .theme-ink [aria-invalid="true"] { border-color: #f0a7ab !important; } .form-status { margin-top: 1.1rem; font-family: var(--sans); font-size: 0.92rem; line-height: 1.55; } .form-status:empty { display: none; } .form-status a { text-decoration: underline; text-underline-offset: 3px; } .form-status.is-ok { color: var(--ink-700); } .form-status.is-err { color: var(--claret-600); font-weight: 500; } .theme-maroon .form-status.is-ok, .checkdate .form-status.is-ok, .venue .form-status.is-ok, .theme-ink .form-status.is-ok { color: var(--gold-200); } .theme-maroon .form-status.is-err, .checkdate .form-status.is-err, .venue .form-status.is-err, .theme-ink .form-status.is-err { color: #f0a7ab; }.cd-form .form-status { grid-column: 1 / -1; } .form-field label .req { font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--claret-700); margin-left: 0.5rem; font-weight: 500; } /* ============================================================ SERVICES MOSAIC - image-led, replaces the 7-row text index. The old index was 42 same-weight text elements whose images only appeared on desktop hover, so a phone visitor never saw a single picture of the work. The intro copy lives inside the grid so the block reads as one composition rather than "text, then a list". ============================================================ */ .svc-mosaic { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(200px, auto); gap: clamp(0.7rem, 1.2vw, 1rem); } .svc-intro { grid-column: 1 / 3; grid-row: 1; display: flex; flex-direction: column; justify-content: center; gap: 1.1rem; padding: clamp(0.5rem, 1.5vw, 1.4rem) clamp(0.5rem, 2vw, 1.6rem) clamp(0.5rem, 1.5vw, 1.4rem) 0; } .svc-intro h2 { font-size: var(--fs-3); max-width: 14ch; } .svc-intro .lede { max-width: 40ch; font-size: var(--fs-1); } .svc-intro .btn { align-self: flex-start; margin-top: 0.4rem; } .svc-tile { position: relative; display: block; overflow: hidden; border-radius: var(--radius-sm); background: var(--claret-900); aspect-ratio: 4 / 3; isolation: isolate; } .svc-tile--lead { grid-column: 3 / 5; grid-row: 1 / 3; aspect-ratio: auto; min-height: 100%; } .svc-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.001); transition: transform 0.9s var(--ease-out), filter 0.6s; filter: saturate(0.92); } .svc-tile::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(13,13,12,0) 38%, rgba(13,13,12,0.55) 72%, rgba(13,13,12,0.86) 100%); transition: opacity 0.5s; } .svc-tile-text { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; flex-direction: column; gap: 0.2rem; padding: clamp(0.9rem, 1.6vw, 1.4rem); color: var(--cream-50); } .svc-tile-name { font-family: var(--serif); font-weight: 500; font-size: clamp(1.25rem, 1.7vw, 1.65rem); line-height: 1.1; } .svc-tile--lead .svc-tile-name { font-size: clamp(1.8rem, 2.6vw, 2.6rem); } .svc-tile-line { font-family: var(--sans); font-size: 0.88rem; color: var(--cream-200); opacity: 0.92; } .svc-tile:hover img, .svc-tile:focus-visible img { transform: scale(1.045); filter: saturate(1); } .svc-tile:hover::after { opacity: 0.92; } @media (max-width: 1100px) { .svc-mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; } .svc-intro { grid-column: 1 / 3; grid-row: auto; padding-inline: 0; } .svc-tile--lead { grid-column: 1 / 3; grid-row: auto; aspect-ratio: 16 / 10; min-height: 0; } } @media (max-width: 560px) { /* Two-up on phones. Seven full-width tiles stacked to 1,900px; two columns with the lead spanning both keeps every service on one or two screens. */ .svc-mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; } .svc-intro, .svc-tile--lead { grid-column: 1 / 3; } .svc-tile { aspect-ratio: 4 / 3; } .svc-tile--lead { aspect-ratio: 16 / 10; } .svc-tile-text { padding: 0.7rem 0.75rem; } .svc-tile-name { font-size: 1.05rem; } .svc-tile--lead .svc-tile-name { font-size: 1.6rem; } .svc-tile-line { font-size: 0.74rem; } /* In a ~170px tile a two-line name plus a two-line subline eats the photo; the name alone carries it. The lead tile keeps its line. */ .svc-tile:not(.svc-tile--lead) .svc-tile-line { display: none; } .svc-tile:not(.svc-tile--lead) .svc-tile-name { text-wrap: balance; } } /* ============================================================ DESTINATIONS STRIP - horizontal, photo-led. 17 places take the vertical room that 8 empty cards used to; the strip reads as "we go everywhere" at a glance instead of two rows of watermarks. ============================================================ */ .loc-strip-wrap { position: relative; margin-top: clamp(1.6rem, 3vw, 2.6rem); } .loc-strip { display: flex; gap: clamp(0.7rem, 1.1vw, 1rem); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); padding: 0.25rem var(--gutter) 1.1rem; margin-inline: calc(-1 * var(--gutter)); scrollbar-width: none; } .loc-strip::-webkit-scrollbar { display: none; } .loc-strip:focus-visible, .snap-strip:focus-visible { outline-offset: -3px; } .loc-tile { position: relative; flex: 0 0 clamp(190px, 17vw, 240px); aspect-ratio: 4 / 5; border-radius: var(--radius-sm); overflow: hidden; scroll-snap-align: start; background: var(--claret-900); isolation: isolate; } .loc-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease-out); filter: saturate(0.94); } .loc-tile::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(13,13,12,0) 45%, rgba(13,13,12,0.82) 100%); } .loc-tile-text { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 1rem 1.05rem; color: var(--cream-50); display: flex; flex-direction: column; gap: 0.15rem; } .loc-tile-name { font-family: var(--serif); font-weight: 500; font-size: 1.35rem; line-height: 1.1; } .loc-tile-line { font-family: var(--sans); font-size: 0.78rem; color: var(--cream-200); opacity: 0.9; } .loc-tile:hover img, .loc-tile:focus-visible img { transform: scale(1.05); } .loc-nav { display: flex; gap: 0.6rem; justify-content: flex-end; margin-top: 0.4rem; } .loc-btn, .strip-btn { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--cream-300); background: var(--cream-50); color: var(--ink-900); font-size: 1.1rem; cursor: pointer; transition: background 0.3s, border-color 0.3s, transform 0.3s var(--ease-out); } .loc-btn:hover, .strip-btn:hover { background: var(--claret-700); border-color: var(--claret-700); color: var(--cream-50); transform: translateY(-1px); } .theme-cream-deep .loc-btn, .theme-cream-deep .strip-btn { background: var(--cream-100); } @media (pointer: coarse) { .loc-nav { display: none; } } /* ============================================================ PARTNER LOGOS - real marks from the deck replace the scrolling text marquee. Names in a ticker are not proof; logos are. ============================================================ */ .partner-row { list-style: none; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(0.6rem, 1vw, 1rem); max-width: 1180px; margin: 0 auto; padding: 0 var(--gutter); } .partner-row li { background: #fff; border: 1px solid var(--cream-300); border-radius: var(--radius-sm); aspect-ratio: 5 / 2; display: grid; place-items: center; overflow: hidden; transition: transform 0.4s var(--ease-out), box-shadow 0.4s; } .partner-row img { width: 82%; height: auto; display: block; transition: transform 0.4s var(--ease-out); } .partner-row li:hover { transform: translateY(-3px); box-shadow: 0 16px 34px -18px rgba(23,10,13,0.35); } @media (max-width: 900px) { .partner-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 480px) { .partner-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* CC-BY attribution for the destination photographs; collapsed so it never competes with the strip, but present and linked as the licences require. */ .photo-credits { margin-top: 1.4rem; font-family: var(--sans); font-size: 0.8rem; color: var(--ink-500); max-width: 72ch; } .photo-credits summary { cursor: pointer; letter-spacing: 0.04em; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--cream-300); } .photo-credits summary:hover { color: var(--ink-700); } .photo-credits p { margin-top: 0.7rem; } .photo-credits ul { list-style: none; margin-top: 0.5rem; columns: 2; column-gap: 2rem; } .photo-credits li { margin-bottom: 0.25rem; break-inside: avoid; } .photo-credits a { text-decoration: underline; text-underline-offset: 3px; } @media (max-width: 700px) { .photo-credits ul { columns: 1; } } /* ============================================================ ASSESSMENT-B FIXES (measured, post-critique) ============================================================ */ /* Focus ring: the claret ring was invisible (1.25-2.24:1) on dark chrome the earlier override list did not name. Champagne on every dark surface. */.nav-pill :focus-visible, .page-hero :focus-visible, .breadcrumbs :focus-visible, .sticky-cta :focus-visible, .pill-row :focus-visible, .skip-link:focus-visible, .theme-maroon .pill:focus-visible, .theme-ink .pill:focus-visible { outline-color: var(--gold-300); } /* Contact-form fields used outline:none + a gold-400 border (1.94:1). */ .form-field input:focus-visible, .form-field textarea:focus-visible, .form-field select:focus-visible { outline: 2px solid var(--claret-700); outline-offset: 2px; border-color: var(--claret-700); } /* Nav pill at scroll 0 over the cream hero composited to mid-grey: links 3.7:1. .55 -> .72 alpha keeps the glass, clears 4.5 with room. */ .nav-pill { background: rgba(20, 8, 11, 0.72); } /* Contact placeholders were the UA default #757575 = 4.45:1. */ .form-field ::placeholder { color: var(--ink-500); opacity: 1; } /* Tap targets: breadcrumbs 22px and inline-list links 19-21px sat under the 24px floor; pills were 43.5px; footer links 26px. */ .breadcrumbs a { display: inline-block; padding-block: 0.3rem; } .pill { min-height: 44px; display: inline-flex; align-items: center; } .footer-col a, .mm-meta a { padding-block: 0.3rem; } .in > a, .mt-2.in > a, .mt-3.in > a { display: inline-block; padding-block: 0.25rem; } .cta-alt { padding-block: 0.65rem; } /* ============================================================ v12 DESIGN SYSTEM - cards, tables, snap strips, utilities ============================================================ */ :root { --card-bg: var(--cream-50); --card-bd: var(--cream-300); --card-hover-bd: var(--gold-400); --card-r: var(--r-md); --card-pad: clamp(1.1rem, 0.8rem + 1.2vw, 1.75rem); --card-shadow: 0 1px 0 rgba(23, 10, 13, 0.03), 0 18px 40px -28px rgba(23, 10, 13, 0.25); --card-shadow-hover: 0 30px 60px -30px rgba(23, 10, 13, 0.3); --card-lift: -4px; --card-title: var(--maroon-900); --card-text: var(--ink-500); } .theme-maroon, .checkdate, .page-hero, .theme-ink { --card-bg: rgba(252, 251, 247, 0.05); --card-bd: rgba(252, 251, 247, 0.13); --card-hover-bd: rgba(217, 201, 164, 0.45); --card-shadow: none; --card-shadow-hover: 0 30px 60px -30px rgba(0, 0, 0, 0.55); --card-title: var(--cream-50); --card-text: var(--cream-200); } .card { background: var(--card-bg); border: 1px solid var(--card-bd); border-radius: var(--card-r); padding: var(--card-pad); box-shadow: var(--card-shadow); position: relative; transition: transform 0.5s var(--ease-out), box-shadow 0.5s, border-color 0.4s; } .card:hover { transform: translateY(var(--card-lift)); border-color: var(--card-hover-bd); box-shadow: var(--card-shadow-hover); } @media (hover: none) { .card:hover { transform: none; box-shadow: var(--card-shadow); } } .card h3 { font-size: var(--fs-2); color: var(--card-title); } .card p { margin-top: 0.45rem; font-size: var(--fs-0); color: var(--card-text); } .card--icon .lg-mark { width: 2.4rem; height: 2.4rem; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--claret-700); color: var(--claret-700); margin-bottom: 0.9rem; flex: 0 0 auto; } .card--icon .lg-mark svg { width: 15px; height: 15px; } .theme-maroon .card--icon .lg-mark, .checkdate .card--icon .lg-mark, .page-hero .card--icon .lg-mark, .theme-ink .card--icon .lg-mark { border-color: var(--gold-300); color: var(--gold-300); } .card--num .c-num { font-family: var(--serif); font-variant-numeric: oldstyle-nums; font-size: var(--fs-3); line-height: 1; color: transparent; -webkit-text-stroke: 1px var(--ink-500); margin-bottom: 0.6rem; } .theme-maroon .card--num .c-num, .theme-ink .card--num .c-num { -webkit-text-stroke-color: var(--gold-300); } .card-grid { display: grid; gap: clamp(0.6rem, 0.4rem + 1vw, 1.2rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); } .card-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .card-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (max-width: 900px) { .card-grid--4, .card-grid--3 { grid-template-columns: 1fr 1fr; } } @media (max-width: 640px) { .card-grid--2up { grid-template-columns: 1fr 1fr; gap: 0.6rem; } } /* Photo tint on claret bands (CSS-only; no treated files) */ .theme-maroon .img-frame img, .theme-ink .img-frame img { filter: saturate(0.85) contrast(1.04); } .theme-maroon .img-frame::after, .theme-ink .img-frame::after { content: ""; position: absolute; inset: 0; background: var(--claret-800); mix-blend-mode: multiply; opacity: 0.28; pointer-events: none; } /* Tables: one component replaces ~700 inline cell styles */ .tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: var(--sp-fluid-sm); scrollbar-width: thin; } .tbl { width: 100%; border-collapse: collapse; font-size: var(--fs--1); line-height: 1.5; color: var(--ink-700); } .tbl--wide { min-width: 720px; } .tbl caption { caption-side: top; text-align: left; padding-bottom: 0.9rem; font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-500); } .tbl th, .tbl td { text-align: left; vertical-align: top; padding: 0.85rem 1rem; border-bottom: 1px solid var(--cream-300); } .tbl th:first-child, .tbl td:first-child { padding-left: 0; } .tbl th:last-child, .tbl td:last-child { padding-right: 0; } .tbl thead th { font-family: var(--sans); font-weight: 500; font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-500); border-bottom-color: var(--ink-900); } .tbl tbody th { font-family: var(--serif); font-weight: 600; font-size: var(--fs-1); color: var(--maroon-900); } .tbl .is-us { color: var(--claret-700); } .tbl tbody th, .tbl td:first-child { position: sticky; left: 0; background: inherit; } .theme-maroon .tbl, .theme-ink .tbl { color: var(--cream-200); } .theme-maroon .tbl th, .theme-maroon .tbl td, .theme-ink .tbl th, .theme-ink .tbl td { border-bottom-color: rgba(244, 239, 230, 0.15); } .theme-maroon .tbl thead th, .theme-ink .tbl thead th { color: var(--cream-300); border-bottom-color: var(--gold-300); } .theme-maroon .tbl tbody th, .theme-ink .tbl tbody th { color: var(--cream-50); } .theme-maroon .tbl .is-us, .theme-ink .tbl .is-us { color: var(--gold-300); } @media (max-width: 640px) { .tbl--stack thead { display: none; } .tbl--stack tr { display: block; border: 1px solid var(--cream-300); border-radius: var(--r-md); padding: 0.8rem 1rem; margin-bottom: 0.6rem; } .tbl--stack th, .tbl--stack td { display: block; padding: 0.2rem 0; border: 0; position: static; } .tbl--stack td::before { content: attr(data-th); display: block; font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-500); } } /* Snap strips: the destination-strip mechanics, generalised */ .snap-strip { display: flex; gap: clamp(0.7rem, 1.1vw, 1rem); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); padding: 0.25rem var(--gutter) 1.1rem; margin-inline: calc(-1 * var(--gutter)); scrollbar-width: none; } .snap-strip::-webkit-scrollbar { display: none; } .snap-strip > * { flex: 0 0 var(--strip-w, min(86vw, 340px)); scroll-snap-align: start; } .strip-nav { display: flex; gap: 0.6rem; justify-content: flex-end; margin-top: 0.4rem; } @media (pointer: coarse) { .strip-nav { display: none; } } .strip-bar { height: 2px; background: var(--cream-300); margin-top: 0.6rem; overflow: hidden; border-radius: 2px; } .strip-bar i { display: block; height: 100%; width: 100%; background: var(--claret-700); transform-origin: left center; transform: scaleX(var(--p, 0.06)); } .theme-maroon .strip-bar, .theme-ink .strip-bar { background: rgba(244, 239, 230, 0.15); } .theme-maroon .strip-bar i, .theme-ink .strip-bar i { background: var(--gold-300); } /* Utilities */ .small { font-size: var(--fs--1); } .mt-f { margin-top: var(--sp-fluid-md); } .section p a:not([class]), .section--tight p a:not([class]), .section li a:not([class]), .checkdate p a:not([class]), .faq-a a:not([class]) { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--gold-500); } .section p a:not([class]):hover, .faq-a a:not([class]):hover { text-decoration-color: currentColor; } /* ============================================================ v12 COMPONENTS ============================================================ */ /* trust band */ .trust .kicker { justify-content: center; margin-bottom: 1.1rem; } .trust .partner-row { padding: 0; max-width: none; } /* strips */ @media (pointer: fine) { .snap-strip, .loc-strip { cursor: grab; } } .snap-strip.is-grab, .loc-strip.is-grab { cursor: grabbing; scroll-snap-type: none; user-select: none; } .loc-tile.is-centre img { transform: scale(1.05); filter: saturate(1); } .testi-card.is-centre { border-color: var(--card-hover-bd); } /* fleet calculator */ .calc { display: grid; gap: 1rem; } .calc-row { display: flex; flex-direction: column; gap: 0.4rem; font-size: var(--fs--1); letter-spacing: 0.04em; text-transform: uppercase; color: var(--card-text); } .calc-row > span { display: flex; justify-content: space-between; align-items: baseline; } .calc-row output { font-family: var(--serif); font-size: var(--fs-1); text-transform: none; letter-spacing: 0; color: var(--card-title); } .calc input[type="range"] { width: 100%; height: 44px; accent-color: var(--claret-700); cursor: pointer; } .theme-maroon .calc input[type="range"], .theme-ink .calc input[type="range"] { accent-color: var(--gold-300); } .calc-seg { border: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; } .calc-seg legend { width: 100%; font-size: var(--fs--1); letter-spacing: 0.04em; text-transform: uppercase; color: var(--card-text); margin-bottom: 0.5rem; } .calc-seg label { position: relative; min-height: 44px; display: inline-flex; align-items: center; padding: 0 1rem; border: 1px solid var(--card-bd); border-radius: var(--r-pill); cursor: pointer; font-size: var(--fs--1); color: var(--card-title); transition: background 0.3s, border-color 0.3s, color 0.3s; } .calc-seg input { position: absolute; inset: 0; opacity: 0; margin: 0; } .calc-seg label:has(input:checked) { border-color: var(--claret-700); background: var(--claret-700); color: var(--cream-50); } .theme-maroon .calc-seg label:has(input:checked), .theme-ink .calc-seg label:has(input:checked) { border-color: var(--gold-300); background: var(--gold-300); color: var(--claret-900); } .calc select { min-height: 44px; padding: 0.5rem 0.9rem; border-radius: var(--r-xs); border: 1px solid var(--card-bd); background: var(--card-bg); color: var(--card-title); font: inherit; font-size: var(--fs-0); } .calc-out { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.8rem; margin-top: 0.4rem; } .calc-out b { display: block; font-family: var(--serif); font-weight: 600; font-variant-numeric: oldstyle-nums; font-size: var(--fs-3); line-height: 1; color: var(--card-title); } .calc-out span { display: block; margin-top: 0.3rem; font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--card-text); } .calc-picto { display: flex; flex-wrap: wrap; gap: 0.4rem; min-height: 26px; color: var(--claret-700); } .theme-maroon .calc-picto, .theme-ink .calc-picto { color: var(--gold-300); } .calc-picto svg { width: 44px; height: 22px; } summary { padding-block: 0.7rem; } .calc-table summary { cursor: pointer; text-decoration: underline; text-underline-offset: 3px; } .calc-table[open] summary { margin-bottom: 0.6rem; } /* live date check */ .cd-months { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0.4rem; } .chip-m { min-height: 44px; padding: 0 0.9rem; border-radius: var(--r-pill); border: 1px solid rgba(217, 201, 164, 0.35); background: transparent; color: var(--cream-100); font: inherit; font-size: var(--fs--1); cursor: pointer; transition: background 0.3s, border-color 0.3s, color 0.3s; } .chip-m:hover, .chip-m[aria-pressed="true"] { background: var(--gold-300); border-color: var(--gold-300); color: var(--claret-900); } .cd-live { grid-column: 1 / -1; color: var(--gold-200); } .cd-live:empty { display: none; } /* hamper reveal */ .hamper { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.2rem; align-items: center; } .hamper-art { width: 100%; height: auto; } .hamper-lid { transform-origin: 8% 92%; transition: transform 0.7s var(--ease-luxe); } .hamper.is-open .hamper-lid { transform: rotate(-16deg); } .hamper-items g { opacity: 0; transform: translateY(10px); transition: opacity 0.45s, transform 0.45s var(--ease-out); } .hamper.is-open .hamper-items g { opacity: 1; transform: none; } .hamper-items g:nth-child(2) { transition-delay: 0.08s; } .hamper-items g:nth-child(3) { transition-delay: 0.16s; } .hamper-items g:nth-child(4) { transition-delay: 0.24s; } .hamper-items g:nth-child(5) { transition-delay: 0.32s; } .hamper-items g.is-on { filter: drop-shadow(0 0 6px rgba(125, 31, 35, 0.55)); } .hamper-list { display: flex; flex-direction: column; gap: 0.4rem; } .hamper-list button { min-height: 44px; width: 100%; text-align: left; padding: 0 0.9rem; border: 1px solid var(--card-bd); border-radius: var(--r-sm); background: transparent; font: inherit; font-size: var(--fs-0); color: var(--card-title); cursor: pointer; transition: border-color 0.3s, color 0.3s; } .hamper-list li.is-on button { border-color: var(--claret-700); color: var(--claret-700); } .hamper-list li span { display: none; padding: 0.3rem 0.9rem 0.5rem; font-size: var(--fs--1); color: var(--card-text); } .hamper-list li.is-on span { display: block; } .hamper-open { grid-column: 1 / -1; justify-self: start; } .hamper.is-open .hamper-open { display: none; } html:not(.js) .hamper-items g { opacity: 1; transform: none; } html:not(.js) .hamper-list li span { display: block; } @media (max-width: 640px) { .hamper { grid-template-columns: 1fr; } } /* v12c phone-height fixes */ @media (max-width: 640px) { .hero { min-height: min(100svh, 760px); } .hero-cine { min-height: 0; } .cine-frame { height: min(32vh, 300px); } .footer-grid { grid-template-columns: 1fr 1fr; gap: 1.6rem 1.2rem; } .footer-brand { grid-column: 1 / -1; } .footer-brand + .footer-col { grid-row: span 2; } .calc { gap: 0.75rem; } } .chip-m { padding: 0 0.72rem; font-size: 0.8rem; } /* v12d about + tables */ .portrait-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; align-items: start; max-width: 520px; } .portrait-pair figure:nth-child(2) { margin-top: 2.5rem; } .img-frame--arch { aspect-ratio: 1 / 2.2; border-radius: 999px 999px var(--r-lg) var(--r-lg); } .bio + .bio { margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--cream-300); } .bio h3 { font-family: var(--serif); } .bio .role { display: block; margin: 0.35rem 0 0.7rem; font-size: 0.72rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--claret-700); } .bio p { color: var(--ink-700); max-width: 52ch; } .tbl--stack td.is-us { color: var(--claret-700); } @media (max-width: 640px) { .tbl--stack tbody th { display: block; padding: 0 0 0.4rem; border: 0; position: static; font-size: var(--fs-1); } .tbl--stack td { padding: 0.35rem 0; } .tbl--stack td::before { margin-bottom: 0.1rem; } .tbl--stack tr { padding: 0.9rem 1rem 0.7rem; } .theme-maroon .tbl--stack tr, .theme-ink .tbl--stack tr { border-color: rgba(244, 239, 230, 0.15); } .theme-maroon .tbl--stack td::before, .theme-ink .tbl--stack td::before { color: var(--cream-300); } .trust .partner-row { grid-template-columns: repeat(3, 1fr); gap: 0.5rem; } } /* v12e phone grids */ @media (max-width: 640px) { .b-span3, .b-span2 { grid-column: span 3; } .bento { gap: 0.6rem; } .svc-card { min-height: 0; padding: 1rem 0.9rem; } .svc-card h3 { font-size: var(--fs-1); } .svc-card p { font-size: var(--fs--1); } .svc-card .svc-icon { width: 30px; height: 30px; margin-bottom: 0.6rem; } .svc-card .link-arrow { font-size: 0.72rem; } .card-grid--3:not(.card-grid--2up) { grid-template-columns: 1fr; } } /* v12f h-acc phones */ @media (max-width: 900px) { .h-acc-item.active { min-height: 0; } .h-acc-item.active .h-acc-content { padding: 1.4rem 1.3rem; } .h-acc-item .ha-title { padding: 1.4rem 1.3rem; font-size: var(--fs-1); } } /* v12g hamper */ .hamper-lid { transform-box: fill-box; transform-origin: 6% 100%; } .hamper-items g { transform-box: fill-box; } .hamper { padding: var(--card-pad); } .hamper-art { max-width: 420px; justify-self: center; } .hamper-list li { border-bottom: 1px solid var(--card-bd); } .hamper-list li:last-child { border-bottom: 0; } .hamper-list button { border: 0; border-radius: 0; padding: 0.7rem 0.2rem; } .hamper-list li.is-on button { color: var(--claret-700); border: 0; } .hamper-list li span { padding: 0 0.2rem 0.7rem; } /* v12h tap targets */ .chip-m { min-width: 44px; } /* v12i audit fixes */ .theme-maroon .tbl caption, .checkdate .tbl caption, .theme-ink .tbl caption { color: var(--cream-300); } h2.kicker { font-size: 0.72rem; line-height: 1.5; font-family: var(--sans); font-weight: 500; } .footer-meta a, .link-arrow { display: inline-flex; align-items: center; min-height: 44px; } /* ============================================================ v13 - trust ledger, one-team graphic, pinned journey, ink fleet, calculator v2, interior hero v2 ============================================================ */ /* Logo marks: every height-only rule now pins width:auto (the width attribute was stretching them). */ .loader img, .footer-brand img, .cta-band .band-logo, .page-hero .watermark { width: auto; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* --- trust band: colour marks straight on the paper, numbers as a ledger --- */ .trust { padding-block: clamp(2.4rem, 1.4rem + 3.5vw, 4.5rem); } .partner-row { gap: clamp(0.5rem, 1.6vw, 2rem); align-items: center; } .partner-row li { background: transparent; border: 0; border-radius: 0; aspect-ratio: auto; min-height: 64px; padding: 0.3rem 0.4rem; } /* Sized by HEIGHT, not width: the six marks now share one canvas height with their optical scale baked in, so a square monogram and a long wordmark carry the same weight in the row. */ .partner-row img { height: clamp(30px, 6.2vw, 40px); width: auto; max-width: 100%; mix-blend-mode: multiply; } .partner-row li:hover { transform: none; box-shadow: none; } .partner-row li:hover img { transform: translateY(-2px); } .trust-ledger { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: clamp(1.4rem, 3vw, 2.4rem); padding-top: clamp(1.4rem, 2.6vw, 2.2rem); border-top: 1px solid var(--cream-300); } .trust-ledger::before { content: ""; position: absolute; left: 0; top: -1px; width: 100%; height: 1px; background: linear-gradient(90deg, var(--claret-700), var(--gold-400) 55%, transparent); transform-origin: left center; transform: scaleX(var(--p, 1)); } .trust-ledger li { position: relative; padding-inline: clamp(0.8rem, 2.2vw, 2rem); } .trust-ledger li + li::before { content: ""; position: absolute; left: 0; top: 0.35rem; bottom: 0.35rem; width: 1px; background: var(--cream-300); } .trust-ledger li:first-child { padding-left: 0; } .trust-ledger b { display: block; font-family: var(--serif); font-weight: 600; font-variant-numeric: oldstyle-nums; font-size: clamp(2.3rem, 1.5rem + 3vw, 4rem); line-height: 1; letter-spacing: -0.01em; color: var(--maroon-900); } .trust-ledger b i { font-style: normal; color: var(--claret-700); } .trust-ledger li > span { display: block; margin-top: 0.55rem; font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-500); } @media (max-width: 640px) { .trust-ledger { grid-template-columns: 1fr 1fr; row-gap: 1.4rem; } .trust-ledger li:nth-child(3) { padding-left: 0; } .trust-ledger li:nth-child(3)::before { display: none; } .trust-ledger b { font-size: 2rem; } } /* --- one team: six vendor lines become one --- */ .oneteam { position: relative; } .ot-stage { position: relative; width: 100%; max-width: 560px; aspect-ratio: 10 / 9; margin-inline: auto; } .ot-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } .ot-lines line { stroke: var(--ink-500); stroke-opacity: 0.4; stroke-width: 1.2; stroke-linecap: round; transition: stroke 0.6s, stroke-opacity 0.6s; } .oneteam.is-b .ot-lines line { stroke: var(--claret-700); stroke-opacity: 0.7; } .ot-lines line.l-main { stroke: var(--claret-700); stroke-opacity: 1; stroke-width: 2; } .ot-node { position: absolute; translate: -50% -50%; white-space: nowrap; font-family: var(--sans); font-weight: 400; font-size: clamp(0.68rem, 0.58rem + 0.45vw, 0.86rem); line-height: 1; } .ot-you { width: clamp(50px, 4.6vw, 66px); aspect-ratio: 1; border-radius: 50%; border: 1.5px solid var(--maroon-900); background: var(--cream-50); color: var(--maroon-900); display: grid; place-items: center; font-weight: 500; letter-spacing: 0.06em; } .ot-pib { padding: 0.75em 1.15em; border-radius: 999px; background: var(--claret-700); color: var(--cream-50); font-weight: 500; letter-spacing: 0.03em; box-shadow: 0 16px 34px -16px rgba(125, 31, 35, 0.7); } .ot-chip { display: grid; padding: 0.7em 1em; border-radius: 999px; border: 1px solid var(--cream-300); background: var(--cream-50); color: var(--ink-700); box-shadow: 0 10px 24px -18px rgba(23, 10, 13, 0.5); transition: border-color 0.5s, color 0.5s; } .ot-chip > span { grid-area: 1 / 1; text-align: center; transition: opacity 0.45s; } .ot-chip .ot-b { opacity: 0; } .ot-chip.is-b { border-color: rgba(125, 31, 35, 0.35); color: var(--maroon-900); } .ot-chip.is-b .ot-a { opacity: 0; } .ot-chip.is-b .ot-b { opacity: 1; } .ot-legend { display: grid; gap: 0.55rem; margin-top: 1.4rem; max-width: 44ch; } .ot-legend li { display: flex; gap: 0.85rem; align-items: baseline; font-size: var(--fs--1); line-height: 1.5; color: var(--ink-500); transition: color 0.4s; } .ot-legend li b { flex: 0 0 1.5rem; font-family: var(--serif); font-weight: 600; font-size: 1.05rem; color: var(--ink-500); transition: color 0.4s; } .ot-legend li.is-on { color: var(--ink-900); } .ot-legend li.is-on b { color: var(--claret-700); } .ot-replay { margin-top: 0.6rem; min-height: 44px; padding: 0 0.2rem; font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-500); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--gold-500); } .ot-replay:hover { color: var(--claret-700); } html:not(.js) .ot-stage, .motion-off .ot-replay { display: none; } @media (max-width: 640px) { .ot-stage { max-width: none; aspect-ratio: 1 / 1; } .ot-node { font-size: 0.66rem; } .ot-chip { padding: 0.6em 0.75em; } } /* --- guest journey: photo + numeral panel, pinned on fine pointers --- */ .jrny-panel { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(1.4rem, 3vw, 2.8rem); align-items: center; min-height: 0; } .jp-media { position: relative; aspect-ratio: 4 / 3; border-radius: var(--r-md); overflow: hidden; background: var(--claret-900); isolation: isolate; } .jp-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); transition: opacity 0.7s, transform 1.4s var(--ease-out); } .jp-media img.is-active { opacity: 1; transform: none; } .jp-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 60%, rgba(42, 11, 14, 0.45)); pointer-events: none; } .jp-body { position: relative; padding-right: clamp(3rem, 8vw, 6rem); } .jp-num { position: absolute; right: 0; top: -0.15em; font-family: var(--serif); font-weight: 600; font-variant-numeric: oldstyle-nums; font-size: clamp(3.2rem, 7vw, 6rem); line-height: 1; color: transparent; -webkit-text-stroke: 1px var(--gold-400); pointer-events: none; } .jrny.is-pinned .jr-fill { transition: none; } @media (max-width: 760px) { .jrny-panel { grid-template-columns: 1fr; gap: 1rem; } .jp-media { aspect-ratio: 16 / 9; max-height: 220px; } .jp-body { padding-right: 0; } .jp-num { display: none; } } /* --- ink ground + fleet cards + calculator v2 --- */ .theme-ink { background: linear-gradient(180deg, var(--maroon-950), var(--maroon-900) 55%, var(--maroon-950)); color: var(--cream-100); } .theme-ink h1, .theme-ink h2, .theme-ink h3 { color: var(--cream-100); } .checkdate > .container, .theme-ink > .container { position: relative; z-index: 2; } .veh { padding: clamp(1rem, 0.8rem + 1vw, 1.5rem); } .veh-art { width: min(100%, 150px); margin-bottom: 0.9rem; } .veh h3 { font-size: var(--fs-1); } .calc { max-width: none; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(1.4rem, 3vw, 2.8rem) clamp(1.6rem, 4vw, 4rem); align-items: start; padding: clamp(1.4rem, 1rem + 2vw, 2.6rem); } .calc-head { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.4rem 2rem; } .calc-head h3 { font-size: var(--fs-2); } .calc-head p { margin: 0; max-width: 40ch; color: var(--card-text); } .calc-in { display: grid; gap: 1.3rem; } .calc-seg legend { margin-bottom: 0.6rem; } .calc-res { position: relative; display: grid; gap: 1rem; padding: clamp(1.2rem, 2.4vw, 1.8rem); border-radius: var(--r-md); background: var(--calc-res-bg, rgba(125, 31, 35, 0.045)); border: 1px solid var(--card-bd); } .theme-ink .calc-res, .theme-maroon .calc-res { --calc-res-bg: rgba(252, 251, 247, 0.05); } .calc-res::before { content: ""; position: absolute; left: 1.4rem; right: 1.4rem; top: -1px; height: 2px; background: linear-gradient(90deg, var(--claret-700), transparent); } .theme-ink .calc-res::before, .theme-maroon .calc-res::before { background: linear-gradient(90deg, var(--gold-300), transparent); } .calc-k { font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--card-text); } .calc-out { margin: 0; } .calc-note { font-size: var(--fs--1); color: var(--card-text); margin: 0; } .calc-table { grid-column: 1 / -1; } @media (max-width: 800px) { .calc { grid-template-columns: 1fr; } } /* --- interior hero v2: ambient photo backdrop, framed image, floating proof chip --- */ .page-hero--v2 { padding: calc(var(--nav-h) + clamp(2.2rem, 5vh, 4rem)) 0 clamp(3rem, 6vw, 5.5rem); min-height: min(88vh, 860px); display: flex; align-items: center; isolation: isolate; } .page-hero--v2 > .container { position: relative; z-index: 2; } .ph-bg { position: absolute; left: -6%; top: -6%; width: 112%; height: 112%; object-fit: cover; z-index: 0; filter: blur(22px) saturate(0.7); opacity: 0.35; transform: scale(1.08); pointer-events: none; } .ph-veil { position: absolute; inset: 0; z-index: 0; background: linear-gradient(165deg, rgba(42, 11, 14, 0.94) 0%, rgba(74, 19, 25, 0.78) 55%, rgba(59, 16, 21, 0.94) 100%); } .ph-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; } .ph-figure { position: relative; } .ph-frame { position: relative; margin: 0; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 5 / 4; background: var(--claret-900); box-shadow: 0 48px 90px -40px rgba(0, 0, 0, 0.75); outline: 1px solid rgba(217, 201, 164, 0.32); outline-offset: 12px; } .ph-frame--arch { aspect-ratio: 4 / 5; border-radius: 999px 999px var(--r-lg) var(--r-lg); max-width: 400px; margin-left: auto; } .ph-frame img { width: 100%; height: 100%; object-fit: cover; } .ph-frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(42, 11, 14, 0.5)); pointer-events: none; } .ph-chip { position: absolute; z-index: 3; left: clamp(-0.5rem, -1.5vw, -1.5rem); bottom: 9%; display: grid; gap: 0.15rem; margin: 0; padding: 0.85rem 1.15rem; border-radius: var(--r-md); background: rgba(252, 251, 247, 0.97); box-shadow: 0 26px 50px -24px rgba(0, 0, 0, 0.65); } .page-hero p.ph-chip:not(.kicker):not(.lede) { color: var(--maroon-900); } .ph-chip b { font-family: var(--serif); font-weight: 600; font-variant-numeric: oldstyle-nums; font-size: 1.7rem; line-height: 1; } .ph-chip b i { font-style: normal; color: var(--claret-700); } .ph-chip span { font-size: 0.64rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-500); } @media (max-width: 1000px) { .page-hero--v2 { min-height: 0; display: block; } .ph-grid { grid-template-columns: minmax(0, 1fr); gap: 2rem; } .ph-copy, .ph-figure { min-width: 0; } .ph-frame, .ph-frame--arch { width: 100%; aspect-ratio: 16 / 9; max-width: none; max-height: none; margin-left: 0; border-radius: var(--r-lg); outline-offset: 8px; } .ph-chip { left: 1rem; bottom: 1rem; } } @media (max-width: 640px) { .ph-chip b { font-size: 1.35rem; } } /* ============================================================ v14 - fewer boxes, uniform phone rhythm, looping one-team, robust logos ============================================================ */ /* Logo marks are sized by WIDTH only; height stays auto from the reset, so nothing can stretch them. */ .footer-brand img { width: 76px; height: auto; } .cta-band .band-logo { width: min(58vw, 620px); height: auto; max-width: none; } .loader img { width: 100px; height: auto; } .page-hero .watermark { width: min(50vw, 640px); height: auto; } /* Icon, numeral and step "cards" become editorial columns: a hairline on top, no box. */ .card--icon, .card--num, .step { background: transparent; border: 0; border-radius: 0; box-shadow: none; overflow: visible; padding: 1.4rem 0 0; border-top: 1px solid var(--cream-300); } .card--icon:hover, .card--num:hover, .step:hover { transform: none; box-shadow: none; border-top-color: var(--gold-400); } .step::before { display: none; } .theme-maroon .card--icon, .theme-maroon .card--num, .theme-maroon .step, .theme-ink .card--icon, .theme-ink .card--num, .theme-ink .step, .page-hero .card--icon, .page-hero .card--num, .checkdate .card--icon { background: transparent; border-color: rgba(244, 239, 230, 0.18); } .theme-maroon .step:hover, .theme-ink .step:hover { box-shadow: none; border-top-color: rgba(213, 200, 173, 0.6); } .card-grid, .steps { gap: 1.8rem clamp(1.5rem, 3vw, 3rem); } /* De-boxed steps sit on cream, where gold-500 numerals measured 2.91:1. Claret on cream is 9.69:1 and reads as the same accent the rest of the page uses for numbers. */ .step .s-num { font-size: 2rem; color: var(--claret-700); } .theme-maroon .step .s-num, .theme-ink .step .s-num, .page-hero .step .s-num { color: var(--gold-300); } .step h3 { margin-top: 0.8rem; } .card--icon .lg-mark { margin-bottom: 0.8rem; } /* Vehicles: pictogram columns, not boxes */ .veh { background: transparent; border: 0; border-radius: 0; box-shadow: none; padding: 1.2rem 0 0; border-top: 1px solid rgba(244, 239, 230, 0.18); } .theme-cream .veh, .theme-cream-deep .veh { border-top-color: var(--cream-300); } .veh:hover { transform: none; box-shadow: none; border-top-color: var(--gold-400); } .veh-meta { border-top: 0; padding-top: 0.6rem; } /* One-team loop: no replay control needed */ .ot-replay { display: none; } /* --- phones: one rhythm --- */ @media (max-width: 640px) { .section { padding-block: var(--sp-sec); } .section--tight { padding-block: 3rem; } .section--band, .trust { padding-block: 3rem; } .section-head { margin-bottom: 2rem; } .section-head--split { gap: 0.9rem; } .section-head--split .aside-note { padding-bottom: 0; } .mt-3 { margin-top: 2.4rem; } /* one column; boxed plain cards keep a gap, hairline rows sit flush */ .card-grid, .card-grid--2up, .card-grid--3, .card-grid--4, .steps { grid-template-columns: 1fr; gap: 0; } .card-grid > .card:not(.card--icon):not(.card--num) { margin-bottom: 1rem; } .card--icon, .card--num, .step { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); column-gap: 1rem; align-items: start; padding: 1.1rem 0 1.2rem; } .card--icon .lg-mark { margin: 0; width: 2.2rem; height: 2.2rem; grid-row: 1 / 3; } .card--num .c-num { font-size: 1.6rem; margin: 0.15rem 0 0; grid-row: 1 / 3; } .step .s-num { font-size: 1.5rem; margin-top: 0.15rem; grid-row: 1 / 3; } .card--icon h3, .card--num h3, .step h3 { grid-column: 2; margin-top: 0; font-size: var(--fs-1); } .card--icon p, .card--num p, .step p { grid-column: 2; margin-top: 0.3rem; font-size: var(--fs--1); } .card--icon .link-arrow, .step .link-arrow, .step .btn { grid-column: 2; } /* stacked tables: hairline rows */ .tbl--stack tr { border: 0; border-top: 1px solid var(--cream-300); border-radius: 0; padding: 0.9rem 0 0.7rem; margin-bottom: 0.2rem; } .theme-maroon .tbl--stack tr, .theme-ink .tbl--stack tr { border-color: rgba(244, 239, 230, 0.15); } /* vehicles: two compact columns */ .card-grid--2up:has(.veh) { grid-template-columns: 1fr 1fr; column-gap: 1.2rem; } .veh, .card-grid--2up .veh { padding: 1rem 0 1.1rem; } .veh-art { width: 96px; margin-bottom: 0.5rem; } .veh h3, .card-grid--2up .veh h3 { font-size: 1.05rem; } .veh .veh-for { display: none; } .card-grid--2up .veh-meta, .veh-meta { display: flex; gap: 0.8rem; padding-top: 0.3rem; margin-top: auto; border-top: 0; } .veh-meta div span { font-size: 0.62rem; letter-spacing: 0.14em; } .veh-meta div b { font-size: 0.95rem; } /* interior hero */ .page-hero--v2 { padding-top: calc(var(--nav-h) + 2rem); padding-bottom: 3rem; } .page-hero .breadcrumbs { margin-bottom: 1.4rem; } .page-hero .lede { margin-top: 1.1rem; } .page-hero .hero-ctas { margin-top: 1.6rem; gap: 0.7rem; } .pill-row { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); } .pill-row::-webkit-scrollbar { display: none; } .pill { white-space: nowrap; flex: 0 0 auto; } .ph-grid { gap: 1.6rem; } .ph-frame, .ph-frame--arch { max-height: 220px; } /* calculator */ .calc { padding: 1.3rem 1.1rem; gap: 1.2rem; } .calc-head p { display: none; } .calc-head h3 { font-size: var(--fs-1); } .calc-in { gap: 1rem; } .calc-res { padding: 1.1rem 1rem; gap: 0.8rem; } .calc-out b { font-size: 1.9rem; } .calc-picto { display: none; } .calc-note { font-size: 0.82rem; } /* journey, promise, footer */ .jrny-rail { margin-top: 1.4rem; } .jrny-panel { margin-top: 1.4rem; padding: 1.1rem; } .promise-wrap { gap: 2rem; } .oneteam { margin-top: 0.5rem; } .ot-legend { margin-top: 1rem; } .site-footer { padding-top: 3.5rem; } .footer-sign { margin-bottom: 2.2rem; } .loc-strip-wrap { margin-top: 1.4rem; } } /* ============================================================ v16 - phone pass from the 15-agent audit: one heading rhythm, the last boxes removed, and the black transport band brought back to size. One block, last in the file, so it wins on order and not on specificity. ============================================================ */ @media (max-width: 640px) { /* --- one heading rhythm. The gap between a heading and the line under it was 0px inside .section-head, 14.4 in split heads, 17.6 in heroes, 20.8 in editorial rows and 38.4 in the FAQ: five numbers for one relationship. --- */ .section-head > .lede { margin-top: 1.1rem; } .section-head--split { gap: 1.25rem; } .ed-copy h2 { max-width: none; } .ed-row { gap: 2rem; } /* cream band meeting cream band needs less air than a colour change does */ .trust + .section { padding-top: 2.5rem; } /* --- the last boxed surfaces in the body flow become hairline rows --- */ .calc-out span { letter-spacing: 0.1em; } /* the journey panel was three nested rounded surfaces around one photo */ .jrny-panel { margin-top: 1.6rem; background: transparent; border: 0; border-radius: 0; box-shadow: none; padding: 1.4rem 0 0; border-top: 1px solid var(--cream-300); } /* --- hairline row interiors: one step down from body, not two --- */ .card--icon p, .card--num p, .step p { grid-column: 2; margin-top: 0.5rem; font-size: 0.95rem; } /* --- interior hero --- */ .ph-frame, .ph-frame--arch { max-height: 280px; } .page-hero--v2 h1 { font-size: 2.1rem; line-height: 1.1; } .page-hero--v2 .lede { font-size: 1rem; } /* the proof chip cropped the photo it sat on, and its number already appears in the trust ledger one screen below, where it has siblings to give it scale */ .ph-chip { display: none; } /* --- trust band: six logos in three columns left two marks as specks --- */ .trust .partner-row { grid-template-columns: repeat(2, 1fr); gap: 0.9rem 1.2rem; } .partner-row li { min-height: 76px; } /* --- stacked tables: group the label with its value, separate the groups --- */ .tbl--stack tbody th { padding: 0; } .tbl--stack td + td { padding-top: 0.85rem; } .tbl--stack tr { padding: 1.2rem 0 0.85rem; margin-bottom: 0; } /* the caption repeats the h2 above it; keep it for assistive tech only */ .tbl--stack caption { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* --- services bento: seven cards in two 170px columns left a 141px measure --- */ .b-span3, .b-span2 { grid-column: span 6; } .svc-card { min-height: 0; padding: 1.3rem 1.2rem; } /* --- home page --- */ .cine-frame { width: 100%; height: min(38vh, 312px); border-radius: 16px 16px 0 0; } .ot-stage { aspect-ratio: 1 / 0.78; } .ot-node { font-size: 0.72rem; } .ot-chip { padding: 0.55em 0.8em; } .jr-label br { display: none; } .jr-step { padding: 0.95rem 0; } .veh-art { width: 100%; max-width: 124px; margin-bottom: 0.5rem; } } /* ============================================================ v16b - the black band back to size ============================================================ */ /* The fleet is a swipe strip on phones (one row, not a 2x2 block) and the familiar four-up grid from tablet width upward. */ .veh-strip > .veh { flex: 0 0 var(--strip-w, 188px); } @media (min-width: 801px) { .veh-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(0.9rem, 1.6vw, 1.3rem); overflow: visible; margin-inline: 0; padding: 0; scroll-snap-type: none; } .veh-strip > .veh { flex: none; } .veh-strip + .strip-bar { display: none; } } @media (max-width: 640px) { .veh-strip + .strip-bar { margin-top: 0.2rem; } /* the three options fit one row of equal buttons instead of wrapping to two */ .calc-seg { flex-wrap: nowrap; gap: 0.4rem; } .calc-seg label { flex: 1 1 0; min-width: 0; justify-content: center; text-align: center; padding: 0 0.5rem; font-size: 0.8rem; } .calc-seg legend { margin-bottom: 0.45rem; } /* one line, not two */ .calc-k { letter-spacing: 0.12em; } /* the arithmetic is detail; the phone keeps the claim */ .calc-note-more { display: none; } } /* ============================================================ v17 - no-JS fallbacks and the tablet fleet grid ============================================================ */ /* main.js adds `.js` to before anything else, so these are the states that apply when the script never runs. Without them the home page is a black screen behind the preloader, every FAQ answer is collapsed to zero height, and a phone has no navigation. */ html:not(.js) .loader { display: none; } html:not(.js) .faq-a { grid-template-rows: 1fr; } html:not(.js) .faq-q { cursor: default; } html:not(.js) .faq-q .faq-icon { display: none; } html:not(.js) .nav-toggle { display: none; } html:not(.js) .mobile-menu { position: static; visibility: visible; opacity: 1; height: auto; min-height: 0; padding: 1.25rem var(--gutter) 1.5rem; background: var(--maroon-950); } html:not(.js) .mobile-menu ul { flex-direction: row; flex-wrap: wrap; gap: 0.25rem 1.4rem; } html:not(.js) .mobile-menu ul li, html:not(.js) .mobile-menu .mm-meta { opacity: 1; transform: none; } html:not(.js) .mm-link { font-size: 1.1rem; } @media (min-width: 901px) { html:not(.js) .mobile-menu { display: none; } } /* The four-up fleet grid needs ~190px per card. Reverting at 641px squeezed them to 137px, wrapped "Up to 7" onto two lines and pushed the band to 1,702px - taller than it ever was on a phone; a two-up grid there was worse again at 1,924px. The swipe strip simply holds until there is room for four, which is also the width where the calculator goes two-column. */ /* Row-header links inside the stacked phone tables were 22px standalone targets. */ @media (max-width: 640px) { .tbl--stack th[scope="row"] a { display: inline-block; min-height: 24px; padding-block: 0.25rem; } } /* ============================================================ v18 - verification pass follow-ups ============================================================ */ /* A link that looks exactly like a paragraph is not a link. De-boxing took the only affordance off the four destination cards, so the arrow now carries it. */ a.card--icon h3, a.card--num h3 { display: flex; align-items: baseline; justify-content: space-between; gap: 0.8rem; } a.card--icon h3::after, a.card--num h3::after { content: "\2192"; font-family: var(--sans); font-size: 0.85em; line-height: 1; color: var(--claret-700); transition: transform 0.35s var(--ease-out); flex: 0 0 auto; } .theme-maroon a.card--icon h3::after, .theme-ink a.card--icon h3::after, .page-hero a.card--icon h3::after { color: var(--gold-300); } a.card--icon:hover h3::after, a.card--num:hover h3::after { transform: translateX(4px); } /* the fleet strip is a plain grid above 800px, so stop advertising a drag it does not have */ @media (min-width: 801px) { .veh-strip { cursor: auto; } } @media (max-width: 640px) { /* One heading-to-subline value. The v16 rule only reached .section-head > .lede, so the hero, the check-date band, editorial rows and the CTA each kept their own number. */ .section-head > .lede, .ed-copy .lede, .cta-band .lede, .page-hero .lede, .hero .lede { margin-top: 1.1rem; } .checkdate .cd-sub { margin-top: 1.1rem; } /* One hairline-row padding, so the air across every rule is the same. */ .tbl--stack tr { padding: 1.1rem 0 1.2rem; } /* one gap for stacked full-width panels */ /* tight sections were 12px tighter than normal ones for no visible gain */ } /* ============================================================ v19 - narrow-phone grid overflow and band rhythm ============================================================ */ @media (max-width: 640px) { /* .ed-row is a 12-column grid. Its 11 column gaps came to 352px, more than the 280-350px the row actually has on a phone, so both children were laid out 352px wide and the overflow was clipped in silence - 72px of copy lost at 320px. Both children span the full width here anyway, so one track is the honest description. */ .ed-row { grid-template-columns: minmax(0, 1fr); } .ed-row .ed-media, .ed-row .ed-copy { grid-column: auto; } /* the check-date band was the one coloured band left off the rhythm */ /* the marks were floored at 30px inside 76px cells: bigger mark, tighter cell */ .partner-row img { height: clamp(38px, 9vw, 40px); } .partner-row li { min-height: 58px; } /* the tightened seam was written for cream meeting cream; scope it to that case */ } /* Below ~360px a nowrap button label is wider than the column it sits in ("Explore event transportation" measured 307px inside a 280px container and was clipped in silence). */ @media (max-width: 380px) { .btn { white-space: normal; text-align: center; max-width: 100%; padding-inline: 1.5rem; } .btn--lg { padding-inline: 1.6rem; } } /* ============================================================ v20 - post-verification fixes ============================================================ */ @media (max-width: 640px) { /* Seven identical dark rounded cards in a column is the client's "too many card sections" complaint in one block. Three of these tiles carry a photograph; the other four were painting a claret gradient with nothing behind it. Photos keep their frame, the rest become hairline rows like every other list on the site. */ /* These tiles sit on the claret band, so the de-boxed ones keep cream type and a champagne hairline - the same treatment every other list on a dark ground uses. */ .svc-card:not(:has(.svc-bg)) { background: var(--card-bg); border: 1px solid var(--card-bd); border-radius: var(--card-r); padding: var(--card-pad); min-height: 0; } .svc-card:not(:has(.svc-bg))::after { display: none; } .svc-card:not(:has(.svc-bg)) h3 { color: var(--cream-50); } .svc-card:not(:has(.svc-bg)) p { color: var(--cream-200); } .svc-card:not(:has(.svc-bg)) .svc-icon, .svc-card:not(:has(.svc-bg)) .link-arrow { color: var(--gold-300); } .theme-cream .svc-card:not(:has(.svc-bg)), .theme-cream-deep .svc-card:not(:has(.svc-bg)) { border-color: var(--cream-300); } .theme-cream .svc-card:not(:has(.svc-bg)) h3, .theme-cream-deep .svc-card:not(:has(.svc-bg)) h3 { color: var(--maroon-900); } .theme-cream .svc-card:not(:has(.svc-bg)) p, .theme-cream-deep .svc-card:not(:has(.svc-bg)) p { color: var(--ink-500); } .bento { gap: 0; } /* The photo tiles go full-bleed so their text sits on the same left edge as the hairline rows between them; otherwise the column has two different margins down one scroll. */ .svc-card:has(.svc-bg) { padding-inline: var(--card-pad); } /* photo tiles inherit .bento > * { border-radius: var(--radius) } = 22px; the card token is 16 */ .bento > .svc-card { border-radius: var(--card-r); } /* a wrapped vehicle title pushed its label row a line below its neighbour's */ .card-grid--2up .veh h3 { min-height: 2.3em; } } /* ============================================================ v21 - mobile header and hero ============================================================ */ @media (max-width: 640px) { /* The pill read as glued to the top edge. A little more air above it, and a little less inside it, so the header looks placed rather than pinned. */ .site-header { top: 18px; } .nav-pill { padding: 0.5rem 0.5rem 0.5rem 1.15rem; } .brand img { height: 30px; } .brand-word { font-size: 1.02rem; } /* the copy needs to clear the pill without the hero feeling top-heavy */ .page-hero--v2 { padding-top: calc(var(--nav-h) + 2.4rem); } } /* ============================================================ v22 - containment: lists stay flat, objects keep their card ============================================================ */ @media (max-width: 640px) { /* A card again, because these are discrete things a reader compares or operates: a quote from one client, a hamper tier, a service model, the hamper itself. */ .card-grid > .card:not(.card--icon):not(.card--num):not(.svc-card), .card.hamper { background: var(--card-bg); border: 1px solid var(--card-bd); border-radius: var(--card-r); box-shadow: var(--card-shadow); padding: 1.15rem 1.1rem 1.25rem; } .card-grid > .card:not(.card--icon):not(.card--num):not(.svc-card) { margin-bottom: 0.7rem; } .card-grid > .card:not(.card--icon):not(.card--num):not(.svc-card):last-child { margin-bottom: 0; } .card.hamper { padding: 1.25rem 1.1rem 0.9rem; } /* Hairline lists opened with a rule and never closed, so each one ran out into the section padding with nothing to finish it. The closing rule resolves the bottom edge. */ .card-grid > .card--icon:last-child, .card-grid > .card--num:last-child, .steps > .step:last-child, .card-grid > .step:last-child, .tbl--stack tbody tr:last-child { border-bottom: 1px solid var(--cream-300); } .theme-maroon .card-grid > .card--icon:last-child, .theme-maroon .card-grid > .card--num:last-child, .theme-maroon .card-grid > .step:last-child, .theme-maroon .steps > .step:last-child, .theme-ink .card-grid > .card--icon:last-child, .theme-ink .card-grid > .card--num:last-child, .theme-ink .card-grid > .step:last-child, .theme-ink .steps > .step:last-child { border-bottom-color: rgba(244, 239, 230, 0.18); } .theme-maroon .tbl--stack tbody tr:last-child, .theme-ink .tbl--stack tbody tr:last-child { border-bottom-color: rgba(244, 239, 230, 0.15); } } /* ============================================================ v23 - the phone spacing scale 8 / 16 / 24 / 32 / 48 / 56, and a seam sized by whether the ground changes ============================================================ */ @media (max-width: 640px) { :root { --sp-sec: 3.5rem; } /* 56px: the body-section padding */ /* --- seams --------------------------------------------------------------- Where the ground changes, the colour does the separating and the padding only has to keep the band off the content: 56 + 56 = 112. Where it does not change, 144px of one unbroken cream reads as a mistake rather than a boundary, so the heading does the work and the seam closes to 96. */ .checkdate { padding-block: 3rem; } .cta-band { padding-block: 3.5rem; } /* the home hero ends on a full-bleed photograph with no padding of its own */ .hero--cinema + .trust { padding-top: 3rem; } /* the interior hero is claret, so the trust band under it needs less, not more */ /* --- one value for a heading block and the content under it --------------- */ .section-head { margin-bottom: 2rem; } /* 32 */ .section-head--split { gap: 1rem; } /* 16 */ .mt-3 { margin-top: 2rem; } /* 32, was 38.4 */ .kicker { margin-bottom: 1rem; } /* 16, was 22.4 */ .section > .container > h2:first-child:not(.kicker) { margin-bottom: 2rem; } /* --- one value for a row --------------------------------------------------- 178 hairline rows were running 17.6 top / 19.2 bottom: two numbers, neither on any scale, for one relationship. */ .card--icon, .card--num, .step { padding: 1rem 0; } .tbl--stack tr { padding: 1rem 0; } .card--icon p, .card--num p, .step p { margin-top: 0.5rem; } /* 8 */ /* the closing rule needs to clear the text it closes */ .card-grid > .card--icon:last-child, .card-grid > .card--num:last-child, .card-grid > .step:last-child, .steps > .step:last-child { padding-bottom: 1rem; } /* --- interior hero --------------------------------------------------------- */ .page-hero .breadcrumbs { margin-bottom: 1rem; } .page-hero .lede { margin-top: 1rem; } .page-hero .hero-ctas { margin-top: 2rem; gap: 1rem; } .page-hero .pill-row { margin-top: 1.5rem; } /* --- services bento: a flex column whose own gaps put 70px between the rule and the title it belongs to ------------------------------------------- */ .svc-card { gap: 0.5rem; } .svc-card .svc-icon { margin-bottom: 0.5rem; } .svc-card .link-arrow { margin-top: 0.5rem; } /* --- type: the page title must outrank the section titles under it --------- .page-hero--v2 h1 was 33.6px and every section h2 was 34.6px, so the page opened with its smallest big heading. */ .section h2:not(.kicker), .section--tight h2:not(.kicker), .checkdate h2, .ed-copy h2, .svc-intro h2 { font-size: 1.9rem; } .cta-band h2 { font-size: 2.4rem; line-height: 1.06; } } /* ============================================================ v24 - the instruments and the things you choose between ============================================================ */ @media (max-width: 640px) { /* One box, not two: the shell is the card, the result panel is a ruled block inside it. */ .calc { background: var(--card-bg); border: 1px solid var(--card-bd); border-radius: var(--card-r); box-shadow: var(--card-shadow); padding: 1.15rem 1.1rem 1.25rem; gap: 1.2rem; } .calc-res { background: transparent; border: 0; border-radius: 0; padding: 1.1rem 0 0; border-top: 1px solid var(--card-bd); } .calc-res::before { display: none; } /* Four things you compare, in a strip you swipe: a top rule per column read as one broken line across the band, not as four cards. */ .veh { background: var(--card-bg); border: 1px solid var(--card-bd); border-radius: var(--card-r); box-shadow: var(--card-shadow); border-top-width: 1px; padding: 1rem 0.9rem 1.1rem; } .card-grid--2up:has(.veh) { column-gap: 0.7rem; row-gap: 0.7rem; } .veh-art { max-width: 108px; } /* the quote accent survives the frame */ .testi-card { border-left: 2px solid var(--gold-400); } } /* ============================================================ v25 - the ruling: one card padding, one scale, and the accordion opened up ============================================================ */ @media (max-width: 640px) { :root { --card-pad: 1rem; } /* one padding for every boxed surface */ .card-grid > .card:not(.card--icon):not(.card--num):not(.svc-card), .card.hamper, .calc { padding: var(--card-pad); } .card-grid > .card:not(.card--icon):not(.card--num):not(.svc-card) { margin-bottom: 1rem; } .calc-res { padding: 1rem 0 0; } .veh, .card-grid--2up .veh, .veh-strip > .veh { padding: 1rem 0.8rem; } .card-grid--2up:has(.veh) { column-gap: 1rem; row-gap: 1rem; } .bento { gap: 1rem; } /* an instrument should not lift under a thumb */ .card.hamper:hover, .testi-card:hover, .calc:hover { transform: none; box-shadow: var(--card-shadow); } /* the 20-26px band: six values doing one job */ .section-head > .lede, .ed-copy .lede, .cta-band .lede, .page-hero .lede, .hero .lede { margin-top: 1rem; } .checkdate .cd-sub { margin-top: 1rem; } .trust-ledger { row-gap: 1rem; } .trust .partner-row { gap: 1rem 1.2rem; } .h-acc { gap: 1rem; } .jr-step { padding: 1rem 0; } .jrny-panel { margin-top: 2rem; padding: 1rem 0; } .footer-col h3, .footer-col .footer-col-title { margin-bottom: 1rem; } .ph-grid { gap: 2rem; } .page-hero .pill-row { margin-top: 2rem; } .faq-q { padding: 1rem 0.2rem; } ul.ticks { gap: 1rem; } .ed-copy ul.ticks { margin-top: 2rem; } .form-field { gap: 0.5rem; margin-bottom: 1rem; } .cd-f { gap: 0.5rem; } .cd-form { gap: 1rem 0.9rem; } /* the placeholder ran to five lines in a four-line box */ .form-field textarea { min-height: 176px; } /* three 44px-wide options in a 313px row */ .calc-seg { gap: 0.3rem; } .calc-seg label { padding: 0 0.3rem; font-size: 0.78rem; } /* Two of the three accordion panels collapsed to inert 84px bars with nothing to tap, and because the collapse is CSS while the opening is JavaScript, they were unreachable with JS off. On a phone there is no room for the horizontal idiom anyway: show all three. */ .h-acc-item, .h-acc-item.active { min-height: 0; cursor: default; } .h-acc-item .ha-title { display: none; } .h-acc-item .h-acc-content { display: block; padding: var(--card-pad); } .h-acc-detail { opacity: 1; transform: none; } /* tap targets that sat under the 44px floor */ .footer-col a { padding-block: 0.62rem; } .breadcrumbs a { padding-block: 0.72rem; margin-block: -0.42rem; } .brand { padding-block: 0.45rem; } .footer-col ul li a, .tbl--stack th[scope="row"] a { padding-block: 0.62rem; } .footer-col ul li span { font-size: 0.95rem; line-height: 1.65; color: var(--cream-300); } /* the contact label was ellipsed mid-word inside the sticky pill */ .sticky-cta { gap: 0.7rem; } .sticky-cta .btn { padding-inline: 1.15rem; } /* a 3:4 portrait took 57% of the viewport */ .ed-media .img-frame--portrait { aspect-ratio: 1 / 1; } .ed-media .img-frame--portrait img { object-position: 50% 72%; } .portrait-pair { gap: 0.8rem; } .portrait-pair figure:nth-child(2) { margin-top: 0; } }