/* Theme Name: Nimble Shift Theme URI: https://elliottgreenman.com/ Author: Elliott Greenman Author URI: https://elliottgreenman.com/ Description: Custom theme for Nimble Shift — The Digital Practice. Editorial, brand-coherent design for a specialist UK digital advisory practice. Version: 0.2.0 Requires at least: 6.0 Tested up to: 6.6 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: nimble-shift */ /* ════════════════════════════════════════════════════════════ FONT FACES — self-hosted, no third-party requests ════════════════════════════════════════════════════════════ */ @font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 400; font-display: block; src: url('assets/fonts/dm-sans-v17-latin-regular.woff2') format('woff2'); } @font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 500; font-display: block; src: url('assets/fonts/dm-sans-v17-latin-500.woff2') format('woff2'); } @font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 300; font-display: block; src: url('assets/fonts/cormorant-garamond-v21-latin-300.woff2') format('woff2'); } @font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 300; font-display: block; src: url('assets/fonts/cormorant-garamond-v21-latin-300italic.woff2') format('woff2'); } /* ════════════════════════════════════════════════════════════ TOKENS ════════════════════════════════════════════════════════════ */ :root { /* HereAfter brand palette — exact swatches retained for decorative use, with darker derivatives added for text/UI that must hit WCAG AA. Brand: Navy #003057 · Blush #bc8d7d · Brown #4C3732 · Cool Grey #A4A6A8 · White Derived: Rust #8a5b4a (darkened blush, hue-preserving) for text-grade accent. Warm Muted #6F605A (darkened cool grey pulled toward brand brown) for readable muted text. Lifted blush #e6c8bc for on-dark accent. */ --ink:#4C3732; /* brand brown — primary text + standard ink bg */ --ink-deep:#100A09; /* very dark — barely-there warm brown undertone — footer + heaviest dark sections */ --paper:#FAF7F2; /* soft warm cream — page background (not stark white) */ --gold:#8a5b4a; /* rust — text-grade accent (eyebrow, em, links, hover) */ --gold-light:#bc8d7d; /* brand blush — decorative (hairlines, large display, watermarks) */ --gold-soft:#e6c8bc; /* lifted blush — on-dark accent text (smaller / muted) */ --gold-glow:#f0d6cc; /* high-readability copper — on-dark DISPLAY italic (H1/H2 em) */ --slate:#A4A6A8; /* brand cool grey — decorative only (lines/icons on dark) */ --muted:#6F605A; /* warm muted — readable muted text on light */ --fog:#F4E8E2; --mist:#F2EEE6; --deep:#003057; /* fog now in the copper/blush hue family (hsl 15°, very pale wash) */ --rule:rgba(164,166,168,0.55); --rule-dark:rgba(164,166,168,0.35); --color-text:var(--ink); --color-text-muted:var(--muted); --color-text-inverse:var(--paper); --color-bg:var(--paper); --color-bg-alt:var(--mist); --color-bg-fog:var(--fog); --color-bg-deep:var(--deep); --color-bg-ink:var(--ink); --color-bg-ink-deep:var(--ink-deep); --color-accent:var(--gold); /* rust — text-grade on light cream */ --color-accent-bright:var(--gold-light); /* brand copper — borders + hover animations on dark/navy */ --color-accent-soft:var(--gold-soft); /* lifted blush — small/body text on dark */ --color-accent-glow:var(--gold-glow); /* high-readability copper — DISPLAY italic on dark */ --color-rule:var(--rule); --color-rule-dark:var(--rule-dark); /* Primary button colour — swap one place to change every ink button, nav CTA, services-dropdown hover/active, and dropdown-item hover/active. */ --color-btn:var(--deep); --color-btn-hover:var(--deep); /* ─ Tint scales (for hover backgrounds, borders, overlays) ─────── */ /* Blush tints (warm accents over light bg) — RGB 188,141,125 */ --gold-tint-04:rgba(188,141,125,0.04); --gold-tint-06:rgba(188,141,125,0.06); --gold-tint-10:rgba(188,141,125,0.10); --gold-tint-12:rgba(188,141,125,0.12); --gold-tint-18:rgba(188,141,125,0.18); --gold-tint-25:rgba(188,141,125,0.45); /* Paper tints (light overlays on dark bg) — RGB 255,255,255 */ --paper-tint-04:rgba(255,255,255,0.04); --paper-tint-12:rgba(255,255,255,0.12); --paper-tint-18:rgba(255,255,255,0.18); --paper-tint-32:rgba(255,255,255,0.32); --paper-tint-55:rgba(255,255,255,0.55); --paper-tint-65:rgba(255,255,255,0.65); --paper-tint-70:rgba(255,255,255,0.70); --paper-tint-78:rgba(255,255,255,0.78); --paper-tint-85:rgba(255,255,255,0.85); --font-display:'Cormorant Garamond','Times New Roman',Georgia,serif; --font-body:'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif; --font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace; --weight-display:300; --weight-body:500; --weight-text:400; --fs-caption:0.75rem; --fs-body-sm:1.025rem; --fs-body:1.333rem; --fs-pull:1.5rem; --fs-h3:1.75rem; --fs-h2:clamp(2rem,3.2vw,2.75rem); --fs-h1:clamp(2.5rem,4.8vw,4rem); --fs-display:clamp(3.25rem,6.5vw,5.5rem); /* Hero watermark numerals (decorative) */ --fs-watermark:clamp(10rem,22vw,20rem); --fs-watermark-compact:clamp(7rem,14vw,12rem); --lh-tight:1.05; --lh-snug:1.2; --lh-normal:1.6; --lh-loose:1.8; --track-tighter:-0.04em; --track-tight:-0.01em; --track-normal:0; --track-wide:0.1em; --track-wider:0.2em; --track-widest:0.3em; --s-1:0.25rem; --s-2:0.5rem; --s-3:0.75rem; --s-4:1rem; --s-5:1.5rem; --s-6:2rem; --s-7:3rem; --s-8:4rem; --s-9:6rem; --s-10:8rem; --section-y:clamp(4rem,8vw,6rem); --container:1280px; --gutter:clamp(1.5rem,4vw,4rem); --radius:0; --hairline:1px solid var(--color-rule); --hairline-dark:1px solid var(--color-rule-dark); --shadow-card:0 12px 40px rgba(0,0,0,0.09); --shadow-modal:0 18px 48px rgba(15,25,35,0.12); --shadow-bar:0 -8px 32px rgba(0,0,0,0.06); --dur-fast:150ms; --dur-base:250ms; --dur-slow:600ms; /* --ease: aggressive ease-out for entrance animations. --ease-smooth: symmetrical ease-in-out for state changes (hover, active, focus). */ --ease:cubic-bezier(0.2,0,0,1); --ease-smooth:cubic-bezier(0.4,0,0.2,1); } /* ════════════════════════════════════════════════════════════ RESET & BASE ════════════════════════════════════════════════════════════ */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scrollbar-gutter:stable} /* Anchor-link offset — the fixed .site-header covers the top of the viewport, so the default scroll target lands behind it. Push every anchored element below the header band so #section-N links work. */ [id]{scroll-margin-top:6rem} body{ font-family:var(--font-body); font-weight:var(--weight-text); font-size:var(--fs-body); line-height:var(--lh-normal); color:var(--color-text); background:var(--color-bg); overflow-x:hidden; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } p, li, .lead, .stat-cell-label, .step-body, .market-context p, .pricing-intro{font-weight:var(--weight-text)} img,svg{display:block;max-width:100%} a{color:inherit} button{font:inherit;cursor:pointer;background:none;border:0} ul{list-style:none} body::before{ content:''; position:fixed; inset:0; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E"); pointer-events:none; z-index:999; opacity:0.6; } :focus-visible{outline:2px solid var(--color-accent);outline-offset:2px} .skip-link{position:absolute;left:-9999px;top:0;background:var(--color-text);color:var(--color-bg);padding:var(--s-3) var(--s-5);font-size:var(--fs-caption);letter-spacing:var(--track-wide);text-transform:uppercase;z-index:10000} .skip-link:focus{left:var(--s-4);top:var(--s-4)} /* ════════════════════════════════════════════════════════════ TYPE ════════════════════════════════════════════════════════════ */ h1,h2,h3,.h1,.h2,.h3,.display{font-family:var(--font-display);font-weight:var(--weight-display);letter-spacing:var(--track-tight)} .display{font-size:var(--fs-display);line-height:var(--lh-tight)} h1,.h1{font-size:var(--fs-h1);line-height:var(--lh-tight)} h2,.h2{font-size:var(--fs-h2);line-height:var(--lh-snug)} h3,.h3{font-size:var(--fs-h3);line-height:var(--lh-snug);letter-spacing:var(--track-normal)} em,.accent{font-style:italic;color:var(--color-accent)} .on-dark em,.on-dark .accent{color:var(--color-accent-soft)} p{line-height:var(--lh-loose)} .eyebrow{ font-size:var(--fs-caption); font-weight:var(--weight-body); letter-spacing:var(--track-wider); text-transform:uppercase; color:var(--color-accent); display:inline-flex; align-items:center; gap:var(--s-3); margin-bottom:var(--s-5); } .eyebrow::before{content:'';width:2rem;height:1px;background:currentColor;opacity:0.6} .eyebrow.on-dark{color:var(--color-accent-soft)} .section-label{ font-size:var(--fs-caption); font-weight:var(--weight-body); letter-spacing:var(--track-widest); text-transform:uppercase; color:var(--color-accent); margin-bottom:var(--s-4); display:flex; align-items:center; gap:var(--s-3); } .section-label::before{content:'';width:1.5rem;height:1px;background:var(--color-accent)} .section-label.on-dark{color:var(--color-accent-soft)} .section-label.on-dark::before{background:var(--color-accent-soft)} /* ════════════════════════════════════════════════════════════ LAYOUT ════════════════════════════════════════════════════════════ */ .container{max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)} .section{padding-block:var(--section-y)} .section-header{margin-bottom:var(--s-8);max-width:62ch} /* ════════════════════════════════════════════════════════════ HEADER ════════════════════════════════════════════════════════════ */ .site-header{ position:fixed; inset:0 0 auto 0; z-index:200; padding-block:var(--s-4); background:var(--color-bg); backdrop-filter:blur(14px); border-bottom:var(--hairline); } /* Inner container — same max-width and gutter as body content, so nav left/right edges align perfectly with body text. */ .site-header-inner{ display:flex; justify-content:space-between; align-items:center; } .logo-block{text-decoration:none;display:flex;align-items:center;gap:var(--s-3)} .logo-img{display:block;height:40px;width:auto;aspect-ratio:500 / 94} /* Proposal logo (About page only) — SVG, no fixed aspect-ratio constraint, larger. */ .logo-img--proposal{height:48px;aspect-ratio:auto} .site-header .logo-img{height:40px} .site-header .logo-img--proposal{height:48px} .site-footer .logo-img{height:36px} .site-footer .logo-img--proposal{height:44px} .logo-name{ font-family:var(--font-body); font-weight:var(--weight-body); font-size:1.0625rem; letter-spacing:var(--track-wider); text-transform:uppercase; color:var(--color-text); } .logo-name span{color:var(--color-accent)} .logo-tag{ font-family:var(--font-body); font-weight:var(--weight-body); font-size:var(--fs-caption); letter-spacing:var(--track-wider); text-transform:uppercase; color:var(--color-text-muted); opacity:0.7; } .visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} .site-nav{display:flex;align-items:center;gap:var(--s-5)} .site-nav .nav-link{ font-size:var(--fs-caption); font-weight:var(--weight-body); letter-spacing:var(--track-wide); text-transform:uppercase; text-decoration:none; color:var(--color-text-muted); transition:color var(--dur-fast) var(--ease); } .site-nav .nav-link:hover,.site-nav .nav-link.active{color:var(--color-accent)} .nav-cta{ background:var(--color-btn); color:var(--color-bg)!important; border:1px solid var(--color-btn); padding:var(--s-3) var(--s-5); text-decoration:none; font-size:var(--fs-caption); font-weight:var(--weight-body); letter-spacing:var(--track-wide); text-transform:uppercase; box-shadow:inset 0 0 0 0 var(--color-accent); transition:background var(--dur-base) var(--ease-smooth), color var(--dur-base) var(--ease-smooth), border-color var(--dur-base) var(--ease-smooth), box-shadow var(--dur-base) var(--ease-smooth); } .nav-cta:hover{ background:var(--color-btn-hover); color:var(--color-accent-soft)!important; border-color:var(--color-accent-soft); box-shadow:inset 0 0 0 1px var(--color-accent-soft); } /* SERVICES BOX + DROPDOWN */ .nav-services{position:relative} .nav-services-toggle{ display:inline-flex; align-items:center; gap:var(--s-2); font-family:var(--font-body); font-weight:var(--weight-body); font-size:var(--fs-caption); letter-spacing:var(--track-wide); text-transform:uppercase; color:var(--color-text-muted); background:var(--color-bg-fog); border:var(--hairline); padding:var(--s-3) var(--s-5); cursor:pointer; transition:background var(--dur-base) var(--ease-smooth),color var(--dur-base) var(--ease-smooth),border-color var(--dur-base) var(--ease-smooth); } .nav-services-toggle::after{ content:''; width:7px; height:7px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:translateY(-2px) rotate(45deg); } .nav-services-toggle:hover, .nav-services-toggle[aria-expanded="true"], .nav-services-toggle.active{ background:var(--color-btn); color:var(--color-bg); border-color:var(--color-btn); } /* Arrow stays pointing down at all times — no flip on hover/open, no transition. */ .nav-services-toggle:hover::after, .nav-services-toggle[aria-expanded="true"]::after, .nav-services-toggle.active::after{transform:translateY(-2px) rotate(45deg)} .nav-services-menu{ position:absolute; top:calc(100% + var(--s-2)); left:0; min-width:280px; display:flex; flex-direction:column; gap:0; padding:0; background:var(--color-bg-fog); border:var(--hairline); transform:translateY(-6px); opacity:0; pointer-events:none; transition:transform var(--dur-base) var(--ease), opacity var(--dur-base) var(--ease); } /* Hover bridge — keeps :hover alive across the gap between trigger and menu */ .nav-services-menu::before{ content:''; position:absolute; left:0; right:0; bottom:100%; height:calc(var(--s-2) + 4px); } .nav-services[data-open="true"] .nav-services-menu, .nav-services:hover .nav-services-menu, .nav-services:focus-within .nav-services-menu{ transform:translateY(0); opacity:1; pointer-events:auto; } .nav-service-item{ font-size:var(--fs-caption); font-weight:var(--weight-body); letter-spacing:var(--track-wide); text-transform:uppercase; text-decoration:none; color:var(--color-text-muted); background:transparent; padding:var(--s-3) var(--s-5); border-bottom:var(--hairline); transition:background var(--dur-base) var(--ease-smooth),color var(--dur-base) var(--ease-smooth); } .nav-service-item:last-child{border-bottom:0} .nav-service-item:hover,.nav-service-item.active{ background:var(--color-btn); color:var(--color-bg); } /* HAMBURGER */ .hamburger{ display:none; flex-direction:column; justify-content:center; align-items:center; width:44px; height:44px; gap:6px; padding:0; } .hamburger span{ display:block; width:24px; height:1.5px; background:var(--color-text); transition:transform var(--dur-base) var(--ease), opacity var(--dur-fast) var(--ease); transform-origin:center; } .hamburger[aria-expanded="true"] span:nth-child(1){transform:translateY(7.5px) rotate(45deg)} .hamburger[aria-expanded="true"] span:nth-child(2){opacity:0} .hamburger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)} .mobile-nav{ position:fixed; top:0; left:0; right:0; bottom:0; background:var(--color-bg-deep); color:var(--color-bg); padding:7rem var(--gutter) var(--s-7); display:flex; flex-direction:column; gap:var(--s-5); transform:translateY(-20px); opacity:0; pointer-events:none; transition:transform var(--dur-base) var(--ease), opacity var(--dur-base) var(--ease); z-index:150; overflow-y:auto; } .mobile-nav.open{transform:translateY(0);opacity:1;pointer-events:auto} .mobile-nav .mn-link{ display:block; font-family:var(--font-display); font-weight:var(--weight-display); font-size:var(--fs-h3); color:var(--color-bg); text-decoration:none; line-height:var(--lh-snug); padding-block:var(--s-2); transition:color var(--dur-fast) var(--ease); } .mobile-nav .mn-link:hover,.mobile-nav .mn-link.active{color:var(--color-accent-soft)} .mobile-nav .mn-services{ display:flex; flex-direction:column; gap:0; margin-block:var(--s-3); border:1px solid rgba(255,255,255,0.32); } .mobile-nav .mn-services-label{ font-size:var(--fs-caption); color:var(--color-accent-soft); letter-spacing:var(--track-wider); text-transform:uppercase; padding:var(--s-4) var(--s-5); border-bottom:1px solid rgba(255,255,255,0.18); background:rgba(255,255,255,0.04); } .mobile-nav .mn-service-tile{ display:block; font-family:var(--font-body); font-weight:var(--weight-body); font-size:var(--fs-caption); letter-spacing:var(--track-wide); text-transform:uppercase; color:rgba(255,255,255,0.85); text-decoration:none; padding:var(--s-4) var(--s-5); border-bottom:1px solid rgba(255,255,255,0.18); background:transparent; transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease); } .mobile-nav .mn-service-tile:last-child{border-bottom:0} .mobile-nav .mn-service-tile:hover,.mobile-nav .mn-service-tile.active{ color:var(--color-bg); background:rgba(188,141,125,0.18); } .mobile-nav .mn-cta{ margin-top:auto; background:var(--color-accent); color:var(--color-bg); padding:var(--s-4) var(--s-6); text-align:center; font-size:var(--fs-caption); font-family:var(--font-body); font-weight:var(--weight-body); letter-spacing:var(--track-wide); text-transform:uppercase; text-decoration:none; transition:background var(--dur-fast) var(--ease); } .mobile-nav .mn-cta:hover{background:var(--color-bg);color:var(--color-text)} body.nav-locked{overflow:hidden} /* ════════════════════════════════════════════════════════════ BUTTONS ════════════════════════════════════════════════════════════ */ .btn{ display:inline-block; text-decoration:none; font-family:var(--font-body); font-weight:var(--weight-body); font-size:var(--fs-caption); letter-spacing:var(--track-wide); text-transform:uppercase; padding:var(--s-3) var(--s-6); border:0; cursor:pointer; transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease); } .btn--ink{ background:var(--color-btn); color:var(--color-bg); border:1px solid var(--color-btn); box-shadow:inset 0 0 0 0 var(--color-accent); transition:background var(--dur-base) var(--ease-smooth),color var(--dur-base) var(--ease-smooth),border-color var(--dur-base) var(--ease-smooth),box-shadow var(--dur-base) var(--ease-smooth); } .btn--ink:hover{ background:var(--color-btn-hover); color:var(--color-accent-soft); border-color:var(--color-accent-soft); box-shadow:inset 0 0 0 1px var(--color-accent-soft); } .btn--gold{background:var(--color-accent);color:var(--color-bg)} .btn--gold:hover{background:var(--color-bg);color:var(--color-text)} .btn--outline{background:transparent;color:var(--color-text);border:1px solid currentColor} .btn--outline:hover{color:var(--color-accent)} .btn--outline-light{background:transparent;color:rgba(255,255,255,0.85);border:1px solid rgba(255,255,255,0.3)} .btn--outline-light:hover{color:var(--color-accent-soft);border-color:currentColor} .cta-row{display:flex;gap:var(--s-4);align-items:center;flex-wrap:wrap} /* ════════════════════════════════════════════════════════════ HOME HERO — 3-CARD CHOOSER ════════════════════════════════════════════════════════════ */ .home-hero{ background:var(--color-bg-deep); display:flex; flex-direction:column; /* Top padding accounts for the inset gold ::after frame at var(--s-7). Eyebrow ends up at the same visual position as on About / service heroes (which have no inset frame): 8rem from a perceived top edge. */ align-items:center; text-align:center; padding:clamp(9.5rem, 12vw, 11rem) var(--gutter) var(--s-9); position:relative; overflow:hidden; } @media (max-width: 767px){ .home-hero{padding-top:9rem} } .home-hero::before{ content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 50% 40%, rgba(188,141,125,0.1) 0%, transparent 60%); pointer-events:none; } .home-hero::after{ content:''; position:absolute; inset:var(--s-7); border:1px solid rgba(188,141,125,0.12); pointer-events:none; } .home-hero > *{position:relative;z-index:2} .home-eyebrow{ font-size:var(--fs-caption); font-weight:var(--weight-body); letter-spacing:var(--track-widest); text-transform:uppercase; color:var(--color-accent-soft); margin-bottom:var(--s-6); display:flex; align-items:center; gap:var(--s-4); flex-wrap:wrap; justify-content:center; } .home-eyebrow::before,.home-eyebrow::after{ content:''; width:var(--s-7); height:1px; background:var(--color-accent-soft); opacity:0.6; } .home-hero h1{color:var(--color-bg);margin-bottom:var(--s-6);max-width:18ch} .home-hero h1 em{color:var(--color-accent-soft)} .home-hero-sub{ font-size:var(--fs-body-sm); line-height:var(--lh-loose); color:rgba(255,255,255,0.7); max-width:60ch; margin-bottom:var(--s-9); } .prop-chooser{ display:grid; grid-template-columns:1fr; gap:var(--s-5); width:100%; max-width:1200px; } /* Count-aware layout — homepage prop-chooser shifts between spaced cards and a tight scope-grid pattern depending on how many cards are present. Mobile: always 1-col stack. Desktop variants below. */ .prop-choose-card{ /* Border alpha lifted from 0.25 → 0.45 so the brand copper reads present-at-rest against the navy hero, not whisper-faint. */ border:1px solid rgba(188,141,125,0.45); padding:var(--s-7); text-decoration:none; display:flex; flex-direction:column; text-align:left; background:rgba(255,255,255,0.03); transition:background var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease), transform var(--dur-base) var(--ease); position:relative; overflow:hidden; color:var(--color-bg); } .prop-choose-card::before{ content:''; position:absolute; top:0; left:0; right:0; height:2px; background:var(--color-accent-bright); transform:scaleX(0); transform-origin:left; transition:transform var(--dur-slow) var(--ease); } .prop-choose-card:hover{background:rgba(188,141,125,0.1);border-color:var(--color-accent-bright)} .prop-choose-card:hover::before{transform:scaleX(1)} .prop-choose-number{ font-family:var(--font-display); font-weight:var(--weight-display); font-size:var(--fs-h1); color:rgba(188,141,125,0.55); line-height:1; display:block; margin-bottom:var(--s-4); } .prop-choose-label{ font-size:var(--fs-caption); font-weight:var(--weight-body); letter-spacing:var(--track-wider); text-transform:uppercase; color:var(--color-accent-soft); margin-bottom:var(--s-3); } .prop-choose-title{ font-family:var(--font-display); font-weight:var(--weight-display); font-size:var(--fs-h3); color:var(--color-bg); line-height:var(--lh-snug); margin-bottom:var(--s-4); } .prop-choose-title em{color:var(--color-accent-soft)} .prop-choose-desc{ font-size:var(--fs-body-sm); line-height:var(--lh-loose); color:rgba(255,255,255,0.65); flex:1; } .prop-choose-arrow{ margin-top:var(--s-6); font-size:var(--fs-caption); letter-spacing:var(--track-wide); text-transform:uppercase; color:var(--color-accent-soft); display:flex; align-items:center; gap:var(--s-2); } .prop-choose-arrow::after{content:'→';transition:transform var(--dur-fast) var(--ease)} .prop-choose-card:hover .prop-choose-arrow::after{transform:translateX(4px)} .cred-strip{ display:flex; flex-wrap:wrap; margin-top:var(--s-8); border:1px solid rgba(188,141,125,0.2); } .cred-strip-item{ padding:var(--s-4) var(--s-6); border-right:1px solid rgba(188,141,125,0.2); font-size:var(--fs-caption); letter-spacing:var(--track-wide); text-transform:uppercase; color:rgba(255,255,255,0.5); } .cred-strip-item:last-child{border-right:0} /* ════════════════════════════════════════════════════════════ SCOPE OF PRACTICE ════════════════════════════════════════════════════════════ */ .scope-section{background:var(--color-bg);padding-block:var(--section-y)} /* Section header — split row: text block on the left, optional verification badges on the right. Collapses to a stack on narrow screens. Overrides the default .section-header max-width so the row spans the container. */ .scope-section-header{ max-width:none; display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:var(--s-6); } .scope-section-header-text{max-width:62ch; flex:1 1 24rem} .scope-section-intro{ font-size:var(--fs-body-sm); color:var(--color-text-muted); line-height:var(--lh-loose); max-width:62ch; margin-top:var(--s-5); } .scope-header-badges{ list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:var(--s-4); flex:0 0 auto; align-self:center; } .scope-header-badge{ flex:0 0 auto; width:96px; height:96px; } .scope-header-badge a, .scope-header-badge img{ display:block; width:100%; height:100%; object-fit:contain; } .scope-header-badge a{ transition:transform var(--dur-fast) var(--ease); } .scope-header-badge a:hover, .scope-header-badge a:focus-visible{ transform:translateY(-2px); } .scope-grid{ display:grid; grid-template-columns:1fr; gap:0; margin-top:var(--s-7); border-top:var(--hairline); border-left:var(--hairline); } .scope-tile{ padding:var(--s-7) var(--s-5); border-right:var(--hairline); border-bottom:var(--hairline); text-decoration:none; color:var(--color-text); display:flex; flex-direction:column; gap:var(--s-3); background:transparent; transition:background var(--dur-base) var(--ease); position:relative; } .scope-tile:hover{background:rgba(188,141,125,0.04)} .scope-tile-num{ font-family:var(--font-display); font-weight:var(--weight-display); font-size:var(--fs-h3); color:var(--color-accent); line-height:1; } .scope-tile-title{ font-family:var(--font-display); font-weight:var(--weight-display); font-size:var(--fs-h3); line-height:var(--lh-snug); margin-bottom:var(--s-2); } .scope-tile-title em{color:var(--color-accent)} .scope-tile-desc{ font-size:var(--fs-body-sm); line-height:var(--lh-normal); color:var(--color-text-muted); flex:1; } .scope-tile-link{ margin-top:var(--s-4); font-size:var(--fs-caption); letter-spacing:var(--track-wide); text-transform:uppercase; color:var(--color-accent); display:flex; align-items:center; gap:var(--s-2); } .scope-tile-link::after{content:'→';transition:transform var(--dur-fast) var(--ease)} .scope-tile:hover .scope-tile-link::after{transform:translateX(4px)} /* ════════════════════════════════════════════════════════════ ABOUT-STRIP ════════════════════════════════════════════════════════════ */ .about-strip{background:var(--color-bg);padding-block:var(--section-y)} .about-strip-grid{display:grid; grid-template-columns:1fr; gap:var(--s-7); align-items:start} /* If only one column has content, let it expand to a single-column layout. */ .about-strip-grid:has(> :only-child){grid-template-columns:1fr} .about-strip-left, .about-strip-right{display:flex; flex-direction:column; gap:var(--s-5)} .about-strip-lead{ font-size:var(--fs-body); line-height:var(--lh-loose); color:var(--color-text); max-width:36ch; margin:0; } .about-strip-lead em{color:var(--color-accent);font-style:italic} .about-strip-body{ font-size:var(--fs-body-sm); line-height:var(--lh-loose); color:var(--color-text-muted); max-width:60ch; } .about-strip-body p+p{margin-top:var(--s-4)} /* Optional portrait / supporting image. */ .about-strip-figure{ margin:0; display:flex; flex-direction:column; gap:var(--s-3); /* Half the parent column's width, clamped between 150px (so it doesn't collapse on narrow screens) and 200px (so it doesn't dominate on wide ones). */ width:clamp(150px, 50%, 200px); } .about-strip-figure img{ width:100%; height:auto; display:block; border:1px solid var(--color-rule); } .about-strip-caption{ font-size:var(--fs-caption); letter-spacing:var(--track-wide); color:var(--color-text-muted); text-transform:uppercase; } .about-strip-image-link{ font-size:var(--fs-caption); letter-spacing:var(--track-wide); text-transform:uppercase; color:var(--color-accent); text-decoration:none; border-bottom:1px solid currentColor; align-self:flex-start; padding-bottom:2px; transition:color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); } .about-strip-image-link:hover{color:var(--color-text);border-color:var(--color-text)} /* ════════════════════════════════════════════════════════════ FAQ — single column 75% width ════════════════════════════════════════════════════════════ */ .faq-section{background:var(--color-bg-alt);padding-block:var(--section-y)} .faq-grid{ display:flex; flex-direction:column; width:75%; max-width:900px; margin:var(--s-7) auto 0; border-top:var(--hairline); } @media (max-width:767px){.faq-grid{width:100%}} .faq-item{border-bottom:var(--hairline);padding-block:var(--s-5)} .faq-q{ width:100%;text-align:left;background:transparent;border:0;padding:0;cursor:pointer; font-family:var(--font-display);font-weight:var(--weight-display); font-size:var(--fs-h3);color:var(--color-text);line-height:var(--lh-snug); display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s-5); transition:color var(--dur-fast) var(--ease); } .faq-q:hover{color:var(--color-accent)} .faq-q:focus-visible{outline:2px solid var(--color-accent);outline-offset:4px} .faq-icon{position:relative;width:18px;height:18px;flex-shrink:0;margin-top:10px} .faq-icon::before,.faq-icon::after{ content:'';position:absolute;left:0;top:50%; width:18px;height:1.5px;background:var(--color-accent); transition:transform var(--dur-base) var(--ease); } .faq-icon::before{transform:translateY(-50%)} .faq-icon::after{transform:translateY(-50%) rotate(90deg)} .faq-item.is-open .faq-icon::after{transform:translateY(-50%) rotate(0deg)} .faq-content{ display:grid; grid-template-rows:0fr; transition:grid-template-rows var(--dur-base) var(--ease); } .faq-item.is-open .faq-content{grid-template-rows:1fr} .faq-inner{ overflow:hidden; font-size:var(--fs-body-sm); line-height:var(--lh-loose); color:var(--color-text-muted); } .faq-item.is-open .faq-inner{padding-top:var(--s-4)} .faq-inner p+p{margin-top:var(--s-3)} .faq-inner strong{color:var(--color-text);font-weight:var(--weight-body)} .faq-inner a{color:var(--color-accent);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px} .faq-inner a:hover{color:var(--color-text)} /* ════════════════════════════════════════════════════════════ CTA — Bordered invitation card with gradient backgrounds ════════════════════════════════════════════════════════════ */ .cta-card-wrap{background:var(--color-bg);padding-block:var(--section-y)} .cta-card{ max-width:880px; margin-inline:auto; padding:var(--s-9) var(--s-8); border:1px solid var(--color-accent); position:relative; text-align:center; } @media (max-width: 639px){ .cta-card{padding:var(--s-7) var(--s-5)} .cta-card h2{font-size:1.625rem;line-height:var(--lh-snug)} .cta-card p{font-size:var(--fs-body-sm);margin-bottom:var(--s-5)} } .cta-card::before, .cta-card::after{content:'';position:absolute;width:24px;height:24px;border:1px solid var(--color-accent)} .cta-card::before{top:-1px;left:-1px;border-right:0;border-bottom:0} .cta-card::after{bottom:-1px;right:-1px;border-left:0;border-top:0} .cta-card.grad-a{ background: radial-gradient(ellipse at 78% 82%, rgba(255,253,247,0.65) 0%, transparent 48%), radial-gradient(ellipse at 20% 80%, rgba(188,141,125,0.10) 0%, transparent 50%), radial-gradient(ellipse at 18% 14%, rgba(188,141,125,0.08) 0%, transparent 55%), radial-gradient(ellipse at 62% 32%, rgba(61,74,92,0.06) 0%, transparent 55%), linear-gradient(135deg, var(--color-bg-fog) 0%, var(--color-bg-alt) 45%, var(--color-bg) 100%); } .cta-card.grad-a::before{background:var(--color-bg-fog)} .cta-card.grad-a::after{background:var(--color-bg)} .cta-card.grad-b{ background: radial-gradient(ellipse at 50% 8%, rgba(255,253,247,0.6) 0%, transparent 55%), radial-gradient(ellipse at 92% 50%, rgba(188,141,125,0.08) 0%, transparent 55%), radial-gradient(ellipse at 50% 95%, rgba(188,141,125,0.06) 0%, transparent 60%), linear-gradient(180deg, var(--color-bg) 0%, var(--color-bg-alt) 55%, var(--color-bg-fog) 100%); } .cta-card.grad-b::before{background:var(--color-bg)} .cta-card.grad-b::after{background:var(--color-bg-fog)} .cta-card.grad-c{ background: radial-gradient(ellipse at 50% 42%, rgba(255,252,243,0.7) 0%, transparent 55%), radial-gradient(ellipse at 85% 80%, rgba(188,141,125,0.10) 0%, transparent 50%), radial-gradient(ellipse at 20% 18%, rgba(188,141,125,0.07) 0%, transparent 50%), radial-gradient(ellipse 90% 100% at 50% 50%, var(--color-bg) 0%, var(--color-bg-alt) 60%, var(--color-bg-fog) 100%); } .cta-card.grad-c::before,.cta-card.grad-c::after{background:var(--color-bg-fog)} /* Gradient D — very pale blue (matches .ns-bg-grad-d, navy hue ~207°). No corner brackets — they don't read on this surface. */ .cta-card.grad-d{ background: linear-gradient(160deg, #eef2f6 0%, #f4f7fa 50%, #e9eef3 100%); } .cta-card.grad-d::before, .cta-card.grad-d::after{display:none} .cta-card .label{ font-size:var(--fs-caption); font-weight:var(--weight-body); letter-spacing:var(--track-widest); text-transform:uppercase; color:var(--color-accent); margin-bottom:var(--s-4); display:block; } .cta-card h2{font-size:var(--fs-h2);margin-bottom:var(--s-5)} .cta-card h2 em{color:var(--color-accent);font-style:italic} .cta-card p{ font-size:var(--fs-body); color:var(--color-text-muted); max-width:54ch; margin:0 auto var(--s-7); line-height:var(--lh-loose); } /* ════════════════════════════════════════════════════════════ FOOTER ════════════════════════════════════════════════════════════ */ .site-footer{ background:var(--color-bg-ink-deep); color:rgba(255,255,255,0.78); padding-block:var(--s-8) var(--s-6); font-size:var(--fs-caption); letter-spacing:var(--track-wide); } /* Footer uses the same .container as the rest of the site for left/right inset. */ .site-footer-grid{ display:grid; grid-template-columns:1fr; gap:var(--s-7); padding-bottom:var(--s-7); border-bottom:1px solid rgba(255,255,255,0.12); } .footer-brand{display:flex;flex-direction:column;gap:var(--s-6)} /* Shared baseline — every block of text under the footer logo is the same caption-sized, normal-line-height, paper-tinted block. Force the size + line-height on the inner

too (wysiwyg wraps the brand description in

, which would otherwise inherit the global p{line-height:--lh-loose} + body fs-body sizing). */ .site-footer .footer-brand .footer-brand-desc, .site-footer .footer-brand .footer-brand-desc p, .site-footer .footer-brand .footer-brand-address, .site-footer .footer-brand .footer-brand-contact, .site-footer .footer-brand .footer-brand-contact li, .site-footer .footer-brand .footer-brand-contact a{ /* Smaller version of body text — sentence-case, normal tracking, not the wide-spaced caption treatment used elsewhere. */ font-size:var(--fs-body-sm); line-height:var(--lh-normal); letter-spacing:var(--track-normal); font-weight:var(--weight-text); font-style:normal; margin:0; max-width:38ch; } /* Unified colour for all non-link text under the logo (description + address). Contact links keep their own brighter tint for affordance. */ .site-footer .footer-brand .footer-brand-desc, .site-footer .footer-brand .footer-brand-desc p, .site-footer .footer-brand .footer-brand-address{ color:rgba(255,255,255,0.7); } .site-footer .footer-brand .footer-brand-address{ white-space:pre-line; } .site-footer .footer-brand .footer-brand-contact{ list-style:none; padding:0; display:flex; flex-direction:column; gap:var(--s-3); } .site-footer .footer-brand .footer-brand-contact a{ color:rgba(255,255,255,0.78); text-decoration:none; transition:color var(--dur-fast) var(--ease); } .site-footer .footer-brand .footer-brand-contact a:hover{color:var(--color-accent-soft)} .footer-col-title{ font-size:var(--fs-caption); letter-spacing:var(--track-widest); text-transform:uppercase; color:var(--color-accent-soft); margin-bottom:var(--s-4); } .footer-links{display:flex;flex-direction:column;gap:var(--s-3);list-style:none} .footer-links a{ color:rgba(255,255,255,0.78); text-decoration:none; letter-spacing:var(--track-wide); text-transform:uppercase; transition:color var(--dur-fast) var(--ease); } .footer-links a:hover,.footer-links a:focus-visible{ color:var(--color-accent-soft); text-decoration:underline; text-underline-offset:4px; } /* ── Footer credentials column ───────────────────────────────── Right column rendered as a CTA-card-style invitation: light gradient bg, 1px copper border, dark text. Pops against the deep-brown footer the way the CTA card pops against the cream page. Managed via Site Settings → Footer credential badges. */ .footer-credentials-col{ position:relative; padding:var(--s-6) var(--s-5); border:1px solid var(--color-accent-bright); /* Dark surface that sits a single step lighter than the footer (footer is --ink-deep #100A09). Close enough to read as "in the footer family" but distinct enough to register as a framed card. */ background:#1F1815; } /* Title uses the on-dark accent (lifted blush) for AA contrast. */ .footer-credentials-col .footer-col-title{ color:var(--color-accent-soft); margin-bottom:var(--s-4); } .footer-credentials-list{ /* Equal-width cells via auto-fit grid — 2 badges = 50/50, 3 = 33s, 4 = 25s, all sharing the box width. Square aspect-ratio so each cell scales by width and the badge image fills it. */ display:grid; grid-template-columns:repeat(auto-fit, minmax(0, 1fr)); gap:var(--s-4); list-style:none; padding:0; margin:0; } .footer-credentials-item{ aspect-ratio:1; width:100%; height:auto; } .footer-credentials-item a, .footer-credentials-item img{ display:block; width:100%; height:100%; object-fit:contain; } .footer-credentials-item a{ opacity:1; transition:transform var(--dur-fast) var(--ease); } .footer-credentials-item a:hover, .footer-credentials-item a:focus-visible{ transform:translateY(-2px); } .site-footer-meta{ margin-top:var(--s-6); padding-top:var(--s-5); border-top:1px solid rgba(255,255,255,0.12); display:flex; justify-content:space-between; align-items:center; gap:var(--s-5); flex-wrap:wrap; color:rgba(255,255,255,0.55); font-size:var(--fs-caption); letter-spacing:var(--track-wide); } /* Inline legal links sit between copyright and tagline. */ .site-footer-meta-legal{ list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:var(--s-5); } .site-footer-meta-legal a{ color:rgba(255,255,255,0.55); text-decoration:none; text-transform:uppercase; letter-spacing:var(--track-wide); transition:color var(--dur-fast) var(--ease); } .site-footer-meta-legal a:hover, .site-footer-meta-legal a:focus-visible{ color:var(--color-accent-soft); } .site-footer .logo-name{color:var(--color-bg)} .site-footer .logo-tag{color:rgba(255,255,255,0.55)} @media (min-width: 768px){.site-footer-grid{grid-template-columns:1.4fr 1fr 1fr 1.8fr}} /* ════════════════════════════════════════════════════════════ SERVICE PAGE — HERO COVER ════════════════════════════════════════════════════════════ */ .hero-cover{ position:relative; background:var(--color-bg); /* Top padding matches the compact hero so the eyebrow / H1 starts at the same vertical position across every non-home page. Bottom padding is larger to keep the grand-hero feel on service pages. */ padding-block:clamp(6.5rem, 9vw, 8rem) clamp(4rem, 8vw, 6rem); display:block; overflow:hidden; } @media (max-width: 767px){ .hero-cover{padding-block:7rem var(--s-7)} } /* Compact variant — used on About, Insights, Start, Thank You, archive pages. Quieter than the home/service grand hero. Tight bottom padding because the next section has its own padding. */ .hero-cover--compact{ /* Bottom padding bumped from var(--s-5) → clamp scale so the hero breathes — the previous tight value left CTAs flush against the next section. */ padding-block:clamp(6.5rem, 9vw, 8rem) clamp(3rem, 6vw, 5rem); min-height:0; display:block; } /* Mobile: more clearance under the fixed header — matches the breathing room added under the mobile-nav close affordance. */ @media (max-width: 767px){ .hero-cover--compact{padding-block:7rem var(--s-7)} } .hero-cover--compact h1{ font-size:clamp(2rem, 4vw, 3.25rem); max-width:30ch; margin-bottom:var(--s-4); } .hero-cover--compact .lead{ font-size:var(--fs-body-sm); max-width:62ch; margin-bottom:var(--s-5); } .hero-cover--compact .cta-row{margin-top:var(--s-5)} .hero-cover--compact .hero-cover-num{ font-size:var(--fs-watermark-compact); opacity:0.55; } .hero-cover--compact .eyebrow{margin-bottom:var(--s-3)} .hero-cover-num{ position:absolute; font-family:var(--font-display); font-weight:var(--weight-display); font-size:var(--fs-watermark); color:rgba(188,141,125,0.07); line-height:1; pointer-events:none; user-select:none; letter-spacing:var(--track-tighter); } /* Anchored at 66% of the hero's height — sits in the lower-third of the hero band regardless of headline length or lead-copy depth. Percentage resolves against the .hero-cover parent (which is position:relative). */ .hero-cover-num--right{top:40%;right:0;padding-right:var(--gutter)} .hero-cover-inner{position:relative; z-index:1; text-align:left; width:100%} .hero-cover h1{font-size:var(--fs-h1);max-width:28ch;margin-bottom:var(--s-7);line-height:1.05} .hero-cover h1 em{color:var(--color-accent);font-style:italic} .hero-cover .lead{ font-size:var(--fs-body-sm); color:var(--color-text-muted); max-width:60ch; margin-bottom:var(--s-8); line-height:var(--lh-loose); } .hero-cover .cta-row{justify-content:flex-start} /* ════════════════════════════════════════════════════════════ SERVICE PAGE — STATS STRIP ════════════════════════════════════════════════════════════ */ .stats-strip{ background:var(--color-bg-alt); padding-block:var(--s-8); border-block:var(--hairline); } .stats-strip-grid{display:grid; grid-template-columns:1fr; gap:var(--s-7)} .stat-cell{text-align:center; padding-inline:var(--s-5)} .stat-cell + .stat-cell{border-top:var(--hairline)} .stat-cell-num{ font-family:var(--font-display); font-weight:var(--weight-display); font-size:calc(var(--fs-h1) * 0.85); color:var(--color-accent); line-height:1; margin-bottom:var(--s-3); display:block; } .stat-cell-label{font-size:var(--fs-body-sm);color:var(--color-text-muted);max-width:36ch;margin-inline:auto;line-height:var(--lh-normal)} .stat-cell-source{font-size:var(--fs-caption);letter-spacing:var(--track-wide);text-transform:uppercase;color:var(--color-accent);margin-top:var(--s-3)} @media (min-width: 768px){ .stats-strip-grid{grid-template-columns:repeat(3,1fr); gap:0} .stat-cell + .stat-cell{border-top:0; border-left:var(--hairline); padding-top:0} } /* ════════════════════════════════════════════════════════════ SERVICE PAGE — PRICING ════════════════════════════════════════════════════════════ */ .pricing-section{background:var(--color-bg);padding-block:var(--section-y)} .pricing-intro{font-size:var(--fs-body-sm);line-height:var(--lh-loose);color:var(--color-text-muted);max-width:62ch;margin-top:var(--s-5)} .pricing-grid{display:grid;grid-template-columns:1fr;gap:var(--s-5);margin-bottom:var(--s-7)} .price-card{ border:1px solid var(--color-rule); position:relative; background:white; display:flex; flex-direction:column; transition:background var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease); } .price-card::after{ content:''; position:absolute; top:-1px; left:0; right:0; height:2px; background:var(--color-accent); transform:scaleX(0); transform-origin:left; transition:transform var(--dur-slow) var(--ease); z-index:2; pointer-events:none; } .price-card:hover{background:rgba(188,141,125,0.04); border-color:var(--color-accent)} .price-card:hover::after{transform:scaleX(1)} .price-card.featured{border-color:var(--color-accent)} .price-card.featured::after{transform:scaleX(1)} .price-card.featured::before{ content:'Recommended'; position:absolute; top:-1px; right:var(--s-6); background:var(--color-accent); color:var(--color-bg); font-size:var(--fs-caption); letter-spacing:var(--track-wide); text-transform:uppercase; padding:var(--s-1) var(--s-3); } .card-top{padding:var(--s-7) var(--s-7) var(--s-6);border-bottom:var(--hairline)} .plan-name{font-family:var(--font-display);font-weight:var(--weight-display);font-size:var(--fs-h3);color:var(--color-text);margin-bottom:var(--s-1);line-height:var(--lh-snug)} .plan-subtitle{font-size:var(--fs-caption);color:var(--color-accent);letter-spacing:var(--track-wide);text-transform:uppercase;margin-bottom:var(--s-5)} .plan-price{display:flex;align-items:baseline;gap:var(--s-1)} .price-currency{font-family:var(--font-display);font-weight:var(--weight-display);font-size:var(--fs-h3);color:var(--color-text-muted)} .price-amount{font-family:var(--font-display);font-weight:var(--weight-display);font-size:var(--fs-h1);color:var(--color-text);line-height:1} .price-note{font-size:var(--fs-caption);color:var(--color-text-muted);margin-top:var(--s-2);font-family:var(--font-display);font-style:italic} .card-body{padding:var(--s-6) var(--s-7) var(--s-7);flex:1;display:flex;flex-direction:column} .card-body ul{flex:1} .card-body ul li{font-size:var(--fs-body-sm);color:var(--color-text-muted);padding:var(--s-3) 0;border-bottom:1px solid var(--color-bg-fog);display:flex;gap:var(--s-3);align-items:flex-start;line-height:var(--lh-normal)} .card-body ul li::before{content:'✓';color:var(--color-accent);flex-shrink:0} .card-body ul li:last-child{border-bottom:0} .card-cta{margin-top:var(--s-6);display:block;text-align:center;padding:var(--s-3);font-size:var(--fs-caption);font-weight:var(--weight-body);letter-spacing:var(--track-wide);text-transform:uppercase;text-decoration:none} .price-card.featured .card-cta{background:var(--color-accent);color:var(--color-bg)} .price-card.featured .card-cta:hover{background:var(--color-text)} .price-card:not(.featured) .card-cta{border:1px solid var(--color-text);color:var(--color-text)} .price-card:not(.featured) .card-cta:hover{border-color:var(--color-accent);color:var(--color-accent)} .market-context{padding:var(--s-7);background:var(--color-bg-fog);border-left:3px solid var(--color-accent);margin-top:var(--s-6)} .market-context h3{font-family:var(--font-display);font-weight:var(--weight-display);font-size:var(--fs-h3);color:var(--color-text);margin-bottom:var(--s-4);line-height:var(--lh-snug)} .market-context p{font-size:var(--fs-body-sm);color:var(--color-text-muted);line-height:var(--lh-loose);margin-bottom:var(--s-3)} .market-context p:last-child{margin-bottom:0} .market-context strong{color:var(--color-text);font-weight:var(--weight-body)} /* ════════════════════════════════════════════════════════════ SERVICE PAGE — PROCESS ════════════════════════════════════════════════════════════ */ .process-section{background:var(--color-bg-ink-deep);padding-block:var(--section-y);color:var(--color-bg)} .process-section h2{color:var(--color-bg)} .process-section h2 em{color:var(--color-accent-soft)} .process-steps{display:grid;grid-template-columns:1fr;margin-top:var(--s-8);border-top:1px solid var(--color-rule-dark)} .step{padding:var(--s-7) var(--s-5);border-bottom:1px solid var(--color-rule-dark)} .step:last-child{border-bottom:0} .step-number{font-family:var(--font-display);font-weight:var(--weight-display);font-size:var(--fs-h1);color:rgba(188,141,125,0.55);line-height:1;display:block;margin-bottom:var(--s-4)} .step-title{font-family:var(--font-display);font-weight:var(--weight-display);font-size:var(--fs-h3);color:var(--color-bg);margin-bottom:var(--s-3);line-height:var(--lh-snug)} .step-body{font-size:var(--fs-body-sm);line-height:var(--lh-loose);color:rgba(255,255,255,0.6)} /* ════════════════════════════════════════════════════════════ DELIVERABLES SECTION — replaces pricing on service pages ════════════════════════════════════════════════════════════ */ .deliverables-section{background:var(--color-bg);padding-block:var(--section-y)} .deliverables-intro{font-size:var(--fs-body-sm);line-height:var(--lh-loose);color:var(--color-text-muted);max-width:62ch;margin-top:var(--s-5)} .deliverables-grid{ display:grid; grid-template-columns:1fr; gap:0; margin-top:var(--s-7); border-top:var(--hairline); border-left:var(--hairline); } .deliverable-card{ padding:var(--s-7) var(--s-6); border-right:var(--hairline); border-bottom:var(--hairline); background:transparent; display:flex; flex-direction:column; gap:var(--s-3); position:relative; transition:background var(--dur-base) var(--ease); } .deliverable-card:hover{background:rgba(188,141,125,0.04)} .deliverable-card-image{ margin:0 0 var(--s-4); display:block; max-width:120px; } .deliverable-card-image img{ display:block; width:100%; height:auto; object-fit:contain; } .deliverable-num{ font-family:var(--font-display); font-weight:var(--weight-display); font-size:var(--fs-h3); color:var(--color-accent); line-height:1; margin-bottom:var(--s-2); } .deliverable-title{ font-family:var(--font-display); font-weight:var(--weight-display); font-size:var(--fs-h3); line-height:var(--lh-snug); margin-bottom:var(--s-2); } .deliverable-card p{ font-size:var(--fs-body-sm); line-height:var(--lh-normal); color:var(--color-text-muted); } @media (min-width: 640px){ .deliverables-grid{grid-template-columns:repeat(2, 1fr)} } @media (min-width: 1024px){ .deliverables-grid{grid-template-columns:repeat(4, 1fr)} } /* Modifier — 3 cards in one full-width row at desktop. */ @media (min-width: 1024px){ .deliverables-grid--3{grid-template-columns:repeat(3, 1fr)} } /* ─ Optional add-on card — sits below the deliverables grid. ─────── */ .deliverable-addon{ margin-top:var(--s-5); padding:var(--s-7) var(--s-6); border:1px dashed var(--color-accent); background:var(--gold-tint-04); display:flex; flex-direction:column; gap:var(--s-3); position:relative; } .deliverable-addon-meta{ font-size:var(--fs-caption); font-weight:var(--weight-body); letter-spacing:var(--track-widest); text-transform:uppercase; color:var(--color-accent); } .deliverable-addon-title{ font-family:var(--font-display); font-weight:var(--weight-display); font-size:var(--fs-h3); line-height:var(--lh-snug); color:var(--color-text); } .deliverable-addon-body{ font-size:var(--fs-body-sm); line-height:var(--lh-normal); color:var(--color-text-muted); max-width:62ch; } .deliverable-addon-body em{font-style:italic;color:var(--color-text-muted)} /* ════════════════════════════════════════════════════════════ /START — CONTACT + BOOKING FORM ════════════════════════════════════════════════════════════ */ .contact-section{background:var(--color-bg);padding-block:var(--section-y)} .contact-grid{ display:grid; grid-template-columns:1fr; gap:var(--s-8); } @media (min-width: 1024px){ .contact-grid{grid-template-columns:1.6fr 1fr; gap:var(--s-9)} } .contact-form-wrap{} .contact-form{display:flex;flex-direction:column;gap:var(--s-5)} .form-row{display:flex;flex-direction:column;gap:var(--s-2)} .form-row--two{display:grid;grid-template-columns:1fr;gap:var(--s-5)} @media (min-width: 640px){ .form-row--two{grid-template-columns:1fr 1fr;gap:var(--s-5)} } .form-row label{ font-size:var(--fs-caption); font-weight:var(--weight-body); letter-spacing:var(--track-wide); text-transform:uppercase; color:var(--color-text); } .form-row .req{color:var(--color-accent);margin-left:var(--s-1)} .form-row .opt{color:var(--color-text-muted);text-transform:none;letter-spacing:0;font-weight:var(--weight-text);margin-left:var(--s-1)} .form-row input[type="text"], .form-row input[type="email"], .form-row input[type="tel"], .form-row select, .form-row textarea{ width:100%; font-family:var(--font-body); font-weight:var(--weight-text); font-size:var(--fs-body-sm); line-height:var(--lh-normal); color:var(--color-text); background:var(--color-bg); border:1px solid var(--color-rule); padding:var(--s-3) var(--s-4); transition:border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); } .form-row textarea{resize:vertical;min-height:140px} .form-row select{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--color-text) 50%),linear-gradient(135deg,var(--color-text) 50%,transparent 50%);background-position:calc(100% - 22px) 55%, calc(100% - 16px) 55%;background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:var(--s-7)} .form-row input:focus, .form-row select:focus, .form-row textarea:focus{ outline:0; border-color:var(--color-accent); background:var(--color-bg-fog); } .form-row--checkbox{flex-direction:row;align-items:flex-start;gap:var(--s-3)} .form-row--checkbox input{margin-top:4px;accent-color:var(--color-accent)} .form-row--checkbox label{ text-transform:none; letter-spacing:0; font-size:var(--fs-body-sm); font-weight:var(--weight-text); color:var(--color-text-muted); line-height:var(--lh-normal); } .form-row--checkbox a{color:var(--color-accent);text-decoration:underline;text-underline-offset:3px} .form-actions{margin-top:var(--s-3)} .form-actions .btn{padding:var(--s-4) var(--s-7)} .hp-field{position:absolute!important;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden} .form-alert{ padding:var(--s-4) var(--s-5); border:1px solid var(--color-accent); background:var(--color-bg-fog); font-size:var(--fs-body-sm); color:var(--color-text); margin-bottom:var(--s-5); } .form-alert--error{border-color:#a04040;background:rgba(160,64,64,0.06);color:#7a2929} .contact-aside{display:flex;flex-direction:column;gap:var(--s-7)} .contact-aside-block{} .contact-aside-label{ font-size:var(--fs-caption); font-weight:var(--weight-body); letter-spacing:var(--track-widest); text-transform:uppercase; color:var(--color-accent); margin-bottom:var(--s-3); } .contact-aside p{ font-size:var(--fs-body-sm); color:var(--color-text-muted); line-height:var(--lh-loose); } .contact-aside a{color:var(--color-accent);text-decoration:underline;text-underline-offset:3px} .contact-aside a:hover{color:var(--color-text)} /* WYSIWYG-rendered lists inside aside blocks — scoped so any

    /