/* VulcanAX site shell: shared tokens, nav, footer, baseline typography. Used by every page. Page-specific styles live inline in each page file. */ /* Self-hosted variable fonts (W7c) — Latin subset woff2, font-display:swap. Replaces Google Fonts; preconnects removed from page heads. */ @font-face{font-family:'Syne';font-style:normal;font-weight:400 800;font-display:swap;src:url(/fonts/syne-var.woff2) format('woff2')} @font-face{font-family:'Newsreader';font-style:normal;font-weight:200 800;font-display:swap;src:url(/fonts/newsreader-var.woff2) format('woff2')} @font-face{font-family:'Newsreader';font-style:italic;font-weight:200 800;font-display:swap;src:url(/fonts/newsreader-italic-var.woff2) format('woff2')} @font-face{font-family:'DM Sans';font-style:normal;font-weight:100 1000;font-display:swap;src:url(/fonts/dmsans-var.woff2) format('woff2')} /* Metric-adjusted fallbacks (W10 font-swap CLS) — local system font sized to match. */ @font-face{font-family:'Syne Fallback';src:local('Arial');size-adjust:124.6%;ascent-override:74.24%;descent-override:22.07%;line-gap-override:0%} @font-face{font-family:'Newsreader Fallback';src:local('Times New Roman');size-adjust:135.58%;ascent-override:54.21%;descent-override:19.55%;line-gap-override:0%} @font-face{font-family:'DM Sans Fallback';src:local('Arial');size-adjust:122.34%;ascent-override:81.09%;descent-override:25.34%;line-gap-override:0%} :root{ --paper:#F2EDE2;--paper-2:#E9E2D2;--paper-3:#DFD6C2; --ink:#1A1614;--ink-2:#3D3631;--ink-muted:#6E665F;--ink-dim:#726A64; --bg:#1E1B18;--bg-2:#272421;--bg-3:#302D2A; --border:rgba(255,255,255,0.10);--border-2:rgba(255,255,255,0.16); --text-primary:#F5F5F7;--text-muted:#A1A1AA;--text-dim:#78787E; --red:#E8232A;--red-accessible:#C41E24;--ember:#FF7A2D; --chrome-frost:rgba(20,18,16,.72);--chrome-solid:rgba(20,18,16,.94); /* Ink for chrome brand marks (nav/footer lockup). Theme-aware on its own, NOT --text-primary: cream on dark chrome, dark ink on cream chrome. */ --chrome-ink:var(--text-primary); /* Forge light system: one implied source at the page's top right, decaying down-page. Heat tints are rim-light values, never washes. --cream-dim is the cold/ash text tone for de-emphasized-but-readable content (AA on bg). */ --cream-dim:#C9C1B4; --heat-edge:rgba(255,138,64,.32); --heat-edge-dim:rgba(255,138,64,.14); --forge-fill:radial-gradient(120% 150% at 80% 120%,#FF7A2D 0%,#E8232A 55%,#B81A20 100%); --font-display:'Syne','Syne Fallback',sans-serif;--font-body:'Newsreader','Newsreader Fallback',serif;--font-label:'DM Sans','DM Sans Fallback',sans-serif; --nav-h:61px;--nav-h-mobile:52px; --util-h:0px; /* util bar removed (W22); kept for calc() refs that now collapse */ } /* =================================================================== THEME SYSTEM (W21) — light / system / dark The site ships dark-native; these blocks remap the SEMANTIC tokens to the cream-editorial palette for light. Bespoke dark tokens (--bg etc.) keep their dark values under :root and [data-theme="dark"]; everything downstream reads the semantic names, so the whole site re-tints from one place. Ember stays the accent and red stays identity in both, shifted to accessible values on cream. Preference (light/system/dark) is stored in localStorage and written to before paint by /assets/js/theme.js (CSP forbids inline script); "system" resolves via the prefers-color-scheme media query below. No attribute at all = dark, which matches the site's native mode (zero FOUC if the script is blocked). =================================================================== */ :root,[data-theme="dark"]{color-scheme:dark} /* the light token recipe, shared by explicit light and resolved-system-light */ [data-theme="light"]{ --bg:#F2EDE2;--bg-2:#E9E2D2;--bg-3:#DFD6C2; --border:rgba(26,22,20,0.14);--border-2:rgba(26,22,20,0.22); --text-primary:#1A1614;--text-muted:#544C44;--text-dim:#7A726A; --red:#C81E25;--red-accessible:#B01A20;--ember:#C8590F; --cream-dim:#6E665F; --heat-edge:rgba(200,89,15,.30);--heat-edge-dim:rgba(200,89,15,.13); /* Chrome reads DARKER than the page in light (paper-2), mirroring dark mode where frost is darker than bg. Going lighter would drift toward white. */ --chrome-frost:rgba(233,226,210,.80);--chrome-solid:rgba(233,226,210,.96); --chrome-ink:var(--ink); --forge-fill:radial-gradient(120% 150% at 80% 120%,#C8590F 0%,#C81E25 55%,#9A1218 100%); color-scheme:light; } @media(prefers-color-scheme:light){ [data-theme="system"]{ --bg:#F2EDE2;--bg-2:#E9E2D2;--bg-3:#DFD6C2; --border:rgba(26,22,20,0.14);--border-2:rgba(26,22,20,0.22); --text-primary:#1A1614;--text-muted:#544C44;--text-dim:#7A726A; --red:#C81E25;--red-accessible:#B01A20;--ember:#C8590F; --cream-dim:#6E665F; --heat-edge:rgba(200,89,15,.30);--heat-edge-dim:rgba(200,89,15,.13); --chrome-frost:rgba(233,226,210,.80);--chrome-solid:rgba(233,226,210,.96); --chrome-ink:var(--ink); --forge-fill:radial-gradient(120% 150% at 80% 120%,#C8590F 0%,#C81E25 55%,#9A1218 100%); color-scheme:light; } } [data-theme="system"]{color-scheme:light dark} *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth;scroll-padding-top:calc(var(--util-h) + var(--nav-h) + 24px)} /* The page field: warm ember light enters from the top right (same origin as the homepage hero fire) and decays toward charcoal as the page scrolls away from it. px-sized so the glow stays behind the first viewport on every page; the homepage hero paints its own fire over this on an opaque base. Pure gradient, zero raster. */ body{background-color:var(--bg);background-image:radial-gradient(1100px 720px at 100% -140px,rgba(255,122,45,.10) 0%,rgba(232,35,42,.05) 45%,rgba(232,35,42,0) 72%);background-repeat:no-repeat;font-family:var(--font-label);color:var(--text-primary);-webkit-font-smoothing:antialiased;overflow-x:hidden;padding-top:var(--util-h)} /* light: the same single ember source, softened so it reads as warmth on cream, not a wash */ [data-theme="light"] body{background-image:radial-gradient(1100px 720px at 100% -140px,rgba(200,89,15,.08) 0%,rgba(200,30,37,.04) 45%,rgba(200,30,37,0) 72%)} @media(prefers-color-scheme:light){[data-theme="system"] body{background-image:radial-gradient(1100px 720px at 100% -140px,rgba(200,89,15,.08) 0%,rgba(200,30,37,.04) 45%,rgba(200,30,37,0) 72%)}} a{color:inherit} /* One focus language site-wide: ember ring, offset, distinct from every hover state (hovers shift color or background, never draw a ring). */ a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--ember);outline-offset:3px} /* Frost nav (site-wide): transparent over the hero so the fire flows into it; tint + backdrop blur once scrolled (.frost toggled by /assets/js/nav.js). Nav is always visible — no hide/show on scroll (headroom removed). */ .site-nav{display:flex;align-items:center;padding:20px clamp(24px,6vw,96px);background:transparent;position:fixed;top:var(--util-h);left:0;right:0;z-index:100;transition:background .3s ease,backdrop-filter .3s ease,-webkit-backdrop-filter .3s ease} .site-nav.frost{background:var(--chrome-frost);backdrop-filter:blur(16px) saturate(125%);-webkit-backdrop-filter:blur(16px) saturate(125%)} /* opacity fallback where backdrop-filter is unsupported: near-opaque tint */ @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .site-nav.frost{background:var(--chrome-solid)} .nav-mobile{background:var(--chrome-solid)} } .nav-brand{flex:1;color:var(--chrome-ink);text-decoration:none;display:inline-flex;align-items:center} /* Inline brand lockup: wordmark + mark structure ride currentColor (chrome-ink, theme-aware); the X/flame stays brand red in both modes. Sized via CSS so the same SVG serves nav (36px) and footer (24px). */ .brand-lockup{display:block;height:36px;width:auto} .brand-lockup path[fill="#E8232A"]{fill:var(--red)} .footer-brand .brand-lockup{height:24px;width:auto} .nav-links{flex:1;display:flex;align-items:center;gap:0;justify-content:flex-end} .nav-item{position:relative;padding:0 18px} .nav-link{font-family:var(--font-label);font-weight:500;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted);text-decoration:none;transition:color .2s;display:block;padding:8px 0} .nav-link:hover{color:var(--text-primary)} .nav-dropdown{display:none;position:absolute;top:100%;left:0;background:var(--chrome-solid);backdrop-filter:blur(16px) saturate(125%);-webkit-backdrop-filter:blur(16px) saturate(125%);border:1px solid var(--border);padding:12px 0;min-width:200px;z-index:110} .nav-item:hover .nav-dropdown{display:block} .nav-drop-link{display:block;font-family:var(--font-label);font-weight:400;font-size:11px;letter-spacing:.08em;color:var(--text-muted);text-decoration:none;padding:8px 20px;transition:color .15s,background .15s} .nav-drop-link:hover{color:var(--ember);background:var(--bg-2)} /* Get in touch: forge-heat fill driven by scroll. --heat = flame opacity, --theat = text crossfade dark->cream (both set inline by nav.js). */ .nav-cta{position:relative;overflow:hidden;font-family:var(--font-label);font-weight:700;font-size:11px;letter-spacing:.12em;text-transform:uppercase;background:var(--text-primary);padding:10px 24px;text-decoration:none;margin-left:18px;color:var(--bg);color:color-mix(in srgb,var(--bg),var(--text-primary) calc(var(--theat,0)*100%))} .nav-cta::before{content:"";position:absolute;inset:0;opacity:var(--heat,0);background:radial-gradient(125% 150% at 82% 125%,#FF7A2D 0%,#E8232A 52%,#b81a20 100%);animation:flicker 2.3s ease-in-out infinite} .nav-cta span{position:relative;z-index:1} .nav-cta-secondary{font-family:var(--font-label);font-weight:700;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-primary);border:1px solid var(--border-2);padding:8px 18px;text-decoration:none;transition:color .2s,border-color .2s,background .2s;display:inline-block} .nav-cta-secondary:hover{border-color:var(--text-muted);background:rgba(255,255,255,.06)} /* light: the lift must darken toward ink, not wash toward white */ [data-theme="light"] .nav-cta-secondary:hover{background:rgba(26,22,20,.05)} @media(prefers-color-scheme:light){[data-theme="system"] .nav-cta-secondary:hover{background:rgba(26,22,20,.05)}} /* fiery hamburger: ember bars that morph to an X; flicker pulses the heat */ .nav-hamburger{display:none;cursor:pointer;width:24px;height:18px;position:relative;z-index:120;background:transparent;border:0;padding:0;animation:flicker 2.3s ease-in-out infinite} .nav-hamburger span{display:block;height:2px;width:100%;position:absolute;left:0;border-radius:2px;background:linear-gradient(90deg,var(--red),var(--ember));box-shadow:0 0 8px rgba(255,110,40,.6);transition:transform .38s cubic-bezier(.5,0,.2,1),top .38s cubic-bezier(.5,0,.2,1),opacity .2s ease} .nav-hamburger span:nth-child(1){top:0}.nav-hamburger span:nth-child(2){top:8px}.nav-hamburger span:nth-child(3){top:16px} .nav-hamburger.open span:nth-child(1){top:8px;transform:rotate(45deg)} .nav-hamburger.open span:nth-child(2){opacity:0} .nav-hamburger.open span:nth-child(3){top:8px;transform:rotate(-45deg)} .nav-mobile{display:none;position:fixed;top:calc(var(--util-h) + var(--nav-h));left:0;right:0;bottom:0;background:var(--chrome-frost);backdrop-filter:blur(18px) saturate(125%);-webkit-backdrop-filter:blur(18px) saturate(125%);z-index:99;padding:32px 24px;flex-direction:column;gap:0} .nav-mobile.open{display:flex} .nav-mobile a{display:block;font-family:var(--font-label);font-weight:500;font-size:14px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted);text-decoration:none;padding:16px 0;border-bottom:1px solid var(--border)} /* mobile Get in touch: always forge-filled (overlay, not scroll-driven) */ .nav-mobile .nav-mobile-cta{position:relative;overflow:hidden;margin-top:24px;color:var(--text-primary);background:var(--red);text-align:center;padding:16px 24px;border:none} .nav-mobile .nav-mobile-cta::before{content:"";position:absolute;inset:0;background:radial-gradient(125% 150% at 50% 125%,#FF7A2D 0%,#E8232A 55%,#b81a20 100%);animation:flicker 2.3s ease-in-out infinite} .nav-mobile .nav-mobile-cta span{position:relative;z-index:1} @keyframes flicker{0%,100%{filter:brightness(1) saturate(1)}35%{filter:brightness(1.18) saturate(1.08)}60%{filter:brightness(.9)}80%{filter:brightness(1.08)}} @media(prefers-reduced-motion:reduce){.nav-cta::before,.nav-mobile .nav-mobile-cta::before,.nav-hamburger{animation:none}} /* =================================================================== THEME UTILITY BAR (W21) — the only new site-wide chrome. Thin strip fixed above the nav holding the light/system/dark toggle (ember rim, active control filled). Opaque base so the page never bleeds through; the nav frosts independently below it. Persisted via /assets/js/theme.js. =================================================================== */ .util-bar{position:fixed;top:0;left:0;right:0;height:var(--util-h);z-index:101;display:flex;align-items:center;justify-content:flex-end;padding:0 clamp(24px,6vw,96px);background:var(--bg-2);border-bottom:1px solid var(--border)} .theme-toggle{display:inline-flex;align-items:center;gap:2px;padding:3px;border:1px solid var(--ember);border-radius:8px;box-shadow:0 0 0 3px color-mix(in srgb,var(--ember) 12%,transparent)} .theme-toggle-btn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:22px;border:0;background:transparent;color:var(--text-dim);cursor:pointer;border-radius:5px;transition:color .15s,background .15s} .theme-toggle-btn svg{width:14px;height:14px;display:block;stroke-width:1.8} .theme-toggle-btn:hover{color:var(--text-primary)} .theme-toggle-btn[aria-pressed="true"]{background:var(--ember);color:var(--bg)} .theme-toggle-btn:focus-visible{outline:2px solid var(--ember);outline-offset:2px} @media(max-width:768px){.util-bar{padding:0 24px}} /* =================================================================== THEME TOGGLE PLACEMENT (W23) — reverts the 2-state lightswitch back to the 3-way segmented control (light / system / dark) reused from the retired util-bar, now mounted in the nav. Desktop: centered in the nav bar (logo flex:1 left, links flex:1 right, toggle sits in the middle). Mobile: hidden from the nav bar; appears inside the expanded mobile menu with larger tap targets. Base .theme-toggle / .theme-toggle-btn styles are defined above (shared with the original control). =================================================================== */ .nav-theme-toggle{flex-shrink:0} .nav-mobile-ls-row{display:flex;align-items:center;justify-content:space-between;padding:16px 0;border-bottom:1px solid var(--border)} .nav-mobile-ls-label{font-family:var(--font-label);font-weight:500;font-size:14px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted)} .nav-theme-toggle-mobile .theme-toggle-btn{width:46px;height:34px} .nav-theme-toggle-mobile .theme-toggle-btn svg{width:16px;height:16px} /* Nav→hamburger switch at 1199px: the inline desktop nav (logo + 3-way toggle + 6 links + CTA) needs ~1190px to fit without the "Get in touch" CTA clipping (measured: 29px overflow at 1152, 0 at 1190), so the hamburger engages at 1199 and below. Hero/footer/type stay at 768px. */ @media(max-width:1199px){.nav-links{display:none}.nav-hamburger{display:block}.nav-theme-toggle-desktop{display:none}} @media(prefers-reduced-motion:reduce){.theme-toggle-btn{transition:none}} .page-hero{padding:calc(var(--nav-h) + 80px) 0 56px} .page-hero-inner{max-width:var(--vx-container,1280px);margin:0 auto;padding:0 var(--vx-pad,48px)} .page-eyebrow{font-family:var(--font-label);font-weight:700;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ember);margin-bottom:24px} .page-title{font-family:var(--font-display);font-weight:800;font-size:clamp(38px,5vw,64px);line-height:1.05;letter-spacing:-.03em;color:var(--text-primary);margin-bottom:24px;max-width:22ch} .page-deck{font-family:var(--font-body);font-size:20px;line-height:1.55;color:var(--text-muted);max-width:56ch} /* Footer: the cold end of the decay. The rule above it holds the last visible warmth; a few cells of the micro-grid stay lit like dying coals. */ .site-footer{background:var(--bg);border-top:1px solid var(--border);border-image:linear-gradient(to left,rgba(255,138,64,.15),rgba(255,255,255,.10) 30%,var(--border) 60%) 1;padding:48px 48px 32px} .footer-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:48px} .footer-brand{color:var(--chrome-ink);margin-bottom:8px} .footer-descriptor{font-family:var(--font-label);font-weight:400;font-size:12px;color:var(--text-dim);max-width:28ch;line-height:1.5;margin-bottom:16px} .footer-mini-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:3px;width:80px} .footer-mini-grid span{display:block;width:100%;aspect-ratio:1;background:var(--ember);opacity:.15} .footer-mini-grid span:nth-child(9n+2){background:var(--ember);opacity:.26} .footer-mini-grid span:nth-child(13n+7){background:var(--ember);opacity:.18} .footer-mini-grid span:nth-child(7n+5){opacity:.08} .footer-links{display:flex;gap:48px} .footer-group-label{font-family:var(--font-label);font-weight:700;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-primary);margin-bottom:14px} .footer-link{display:block;font-family:var(--font-label);font-weight:400;font-size:12px;color:var(--text-muted);text-decoration:none;padding:5px 0;transition:color .2s} .footer-link:hover{color:var(--ember)} .footer-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:24px;border-top:1px solid var(--border)} .footer-legal,.footer-location{font-family:var(--font-label);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-dim)} .footer-ai-link{font-family:var(--font-label);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-dim);text-decoration:none;transition:color .2s} .footer-ai-link:hover{color:var(--ember)} @media(max-width:768px){ body{background-image:radial-gradient(640px 420px at 100% -90px,rgba(255,122,45,.10) 0%,rgba(232,35,42,.05) 45%,rgba(232,35,42,0) 72%)} .site-nav{padding:16px 24px} .page-hero{padding:calc(var(--nav-h-mobile) + 56px) 0 32px} .page-title{font-size:32px} .page-deck{font-size:17px} .site-footer{padding:36px 24px 24px} .footer-top{flex-direction:column;gap:28px} .footer-links{display:grid;grid-template-columns:1fr 1fr;gap:24px} .footer-bottom{flex-direction:column;gap:8px;align-items:flex-start} .nav-mobile{top:var(--util-h);padding-top:calc(var(--nav-h-mobile) + 16px)} } /* =================================================================== v2 ASYMMETRIC EDITORIAL LAYOUT SYSTEM One deliberate two-zone grid for every content page: a main column at a 62-66ch measure, left flush with the page margin, and a sticky right rail that carries the page's secondary material (section nav, stats, pull-quote, CTA). Not centered. Balanced left and right page margins. Desktop grid at 1024px and up; rail drops below at tablet; single column on mobile with the rail reflowing in reading order beneath. =================================================================== */ :root{ --vx-container:1280px; --vx-pad:48px; --vx-measure:600px; /* ~62-63ch of the serif body: the prose measure, in px so it does not drift with the grid container font */ --vx-rail:384px; /* ~30% of the 1280 container */ --vx-gutter:64px; /* minimum column gap; space-between absorbs remaining slack as an editorial gutter */ } .vx-layout{max-width:var(--vx-container);margin:0 auto;padding:16px var(--vx-pad) 96px;display:grid;grid-template-columns:minmax(0,var(--vx-measure)) var(--vx-rail);column-gap:var(--vx-gutter);justify-content:space-between;align-items:start} .vx-main{min-width:0} .vx-main>*{max-width:var(--vx-measure)} /* solo: page with no secondary material widens the measure, no open void */ .vx-layout--solo{grid-template-columns:minmax(0,75ch);justify-content:start} .vx-layout--solo .vx-main>*{max-width:75ch} /* wide: main is a card grid or form, not a prose measure */ .vx-layout--wide{grid-template-columns:minmax(0,1fr) var(--vx-rail)} .vx-layout--wide .vx-main>*{max-width:none} .vx-rail{min-width:0;position:-webkit-sticky;position:sticky;top:calc(var(--nav-h) + 24px);display:flex;flex-direction:column;gap:36px} .vx-rail-section+.vx-rail-section{padding-top:4px} .vx-rail-label{font-family:var(--font-label);font-weight:700;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-dim);margin-bottom:14px} /* Dividers catch the implied light: warm at the right end (toward the source), cooling to the standard ash hairline leftward. */ .vx-rail-rule{height:1px;background:linear-gradient(to left,var(--heat-edge),var(--heat-edge-dim) 28%,var(--border) 62%);margin:0} /* rail: on-this-page nav (carries scroll-spy via .toc-link/.active) */ .vx-rail-nav{display:flex;flex-direction:column} .vx-rail-nav a{font-family:var(--font-label);font-weight:500;font-size:12px;letter-spacing:.04em;line-height:1.4;color:var(--text-muted);text-decoration:none;padding:9px 0 9px 16px;border-left:1px solid var(--border);transition:color .2s,border-color .2s} .vx-rail-nav a:hover{color:var(--text-primary)} .vx-rail-nav a.active{color:var(--text-primary);border-left-color:var(--ember)} .vx-rail-nav-num{color:var(--text-dim);margin-right:9px;font-variant-numeric:tabular-nums} /* rail: pull-quote lifted from the body */ .vx-rail-quote{font-family:var(--font-body);font-style:italic;font-size:19px;line-height:1.5;color:var(--text-primary);padding-left:18px;border-left:2px solid var(--ember);margin:0} .vx-rail-quote cite{display:block;margin-top:12px;font-style:normal;font-family:var(--font-label);font-weight:500;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim)} /* rail: stat callouts. Real figures earn localized ember light (text-shadow glow only, no raster, no layout impact). */ .vx-rail-stats{display:flex;flex-direction:column;gap:26px} .vx-rail-stat-fig{font-family:var(--font-display);font-weight:800;font-size:clamp(34px,3vw,42px);line-height:1;letter-spacing:-.02em;color:var(--ember);margin-bottom:9px;text-shadow:0 2px 26px rgba(255,122,45,.30)} .vx-rail-stat-label{font-family:var(--font-body);font-size:14px;line-height:1.5;color:var(--text-muted)} .vx-rail-stat-src{display:block;margin-top:7px;font-family:var(--font-label);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-dim)} /* rail: figure block */ .vx-rail-fig{border:1px solid var(--border);background:var(--bg-2);padding:22px} /* rail: CTA card */ .vx-rail-cta{border:1px solid var(--border);background:var(--bg-2);padding:24px} /* Raised panels catch the implied light on their upper right edge: the border warms toward the source and cools to ash at the lower left. border-image is declared after the border shorthand above so it survives the reset. */ .vx-rail-fig,.vx-rail-cta{border-image:linear-gradient(to bottom left,var(--heat-edge),var(--heat-edge-dim) 26%,rgba(255,255,255,.10) 52%,rgba(255,255,255,.07)) 1} .vx-rail-cta-title{font-family:var(--font-display);font-weight:700;font-size:16px;line-height:1.25;color:var(--text-primary);margin-bottom:10px} .vx-rail-cta-text{font-family:var(--font-body);font-size:14px;line-height:1.55;color:var(--text-muted);margin-bottom:18px} .vx-rail-cta-btn{display:inline-block;font-family:var(--font-label);font-weight:700;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted);border:1.5px solid var(--text-muted);padding:11px 20px;text-decoration:none;transition:color .2s,border-color .2s} .vx-rail-cta-btn:hover{color:var(--ember);border-color:var(--ember)} /* rail: entity / location metadata mark */ .vx-rail-meta{font-family:var(--font-label);font-size:11px;line-height:1.7;letter-spacing:.04em;color:var(--text-dim)} .vx-rail-meta strong{display:block;color:var(--text-muted);font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-size:10px;margin-bottom:6px} .vx-rail-meta a{color:var(--text-muted);text-decoration:none;border-bottom:1px solid var(--text-dim);transition:color .2s,border-color .2s} .vx-rail-meta a:hover{color:var(--ember);border-bottom-color:var(--ember)} /* main-column editorial helpers */ .vx-section-rule{height:1px;background:linear-gradient(to left,var(--heat-edge),var(--heat-edge-dim) 28%,var(--border) 62%);margin:52px 0;max-width:var(--vx-measure)} /* TABLET: rail drops below the main column, main centered at a readable measure */ @media(max-width:1024px){ .vx-layout{grid-template-columns:1fr;row-gap:52px} .vx-main{max-width:78ch;margin-inline:auto} .vx-main>*{max-width:none} .vx-rail{position:static;top:auto;flex-direction:row;flex-wrap:wrap;gap:32px;width:100%;max-width:78ch;margin-inline:auto} .vx-rail>*{flex:1 1 240px;min-width:0} .vx-section-rule{max-width:none} } /* MOBILE: single column, 24px padding, rail reflows beneath in reading order */ @media(max-width:768px){ :root{--vx-pad:24px} .vx-layout{padding:8px var(--vx-pad) 64px;row-gap:40px} .vx-main{max-width:none} .vx-rail{flex-direction:column;gap:28px;max-width:none} .vx-rail-section{flex:none} .vx-rail-quote{font-size:18px} } /* =================================================================== SHARED CROSS-PAGE COMPONENTS Canonical definitions. Single source of truth. Used by 2+ pages. =================================================================== */ /* inline underlined link CTA (homepage sections, how-we-compare). Ember at rest, brightens on hover: heat marks the action, red stays identity. */ .section-cta{display:inline-block;font-family:var(--font-label);font-weight:500;font-size:11px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;padding-bottom:4px;border-bottom:1.5px solid currentColor;transition:color .2s;margin-top:32px;align-self:flex-start;color:var(--ember)} .section-cta:hover{color:var(--text-primary)} /* canonical closing CTA band: centered to the 1280 container, content left flush. The band sits low in the decay, so its rule carries only residual warmth and a faint ember rim enters from the right edge (CTAs earn localized light). */ .page-cta{padding:64px 0;border-top:1px solid var(--border);border-image:linear-gradient(to left,rgba(255,138,64,.24),rgba(255,138,64,.10) 30%,var(--border) 65%) 1;background:radial-gradient(720px 340px at 100% 0%,rgba(255,122,45,.05) 0%,rgba(232,35,42,0) 72%) no-repeat} .page-cta-inner{max-width:var(--vx-container);margin:0 auto;padding:0 var(--vx-pad)} .page-cta h2{font-family:var(--font-display);font-weight:800;font-size:clamp(28px,3vw,36px);line-height:1.1;letter-spacing:-.02em;color:var(--text-primary);margin-bottom:16px;max-width:22ch} .page-cta p{font-family:var(--font-body);font-size:17px;line-height:1.65;color:var(--text-muted);margin-bottom:28px;max-width:56ch} .page-cta-btn{display:inline-block;font-family:var(--font-label);font-weight:700;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--bg);background:var(--text-primary);padding:14px 32px;text-decoration:none;transition:background .2s} .page-cta-btn:hover{background:var(--forge-fill)} /* scroll-margin-top for non-blog page section headings (anchor-jump safety) */ .about-article h2,.about-operated h2,.compare-narrative h2,.ag-inner h2{scroll-margin-top:calc(var(--nav-h) + 32px)} /* article topic/section component (what-we-do, how-we-work main column) */ .topic{padding:32px 0 56px;scroll-margin-top:calc(var(--nav-h) + 24px)} .topic:first-child{padding-top:0} .topic-number{font-family:var(--font-display);font-weight:800;font-size:14px;letter-spacing:.04em;color:var(--ember);margin-bottom:12px;display:flex;align-items:center;gap:12px} .topic-title{font-family:var(--font-display);font-weight:700;font-size:clamp(28px,3vw,38px);line-height:1.1;letter-spacing:-.02em;color:var(--text-primary);margin-bottom:18px;max-width:24ch} .topic-lede{font-family:var(--font-body);font-size:19px;line-height:1.65;color:var(--text-muted);margin-bottom:24px;max-width:62ch} .topic p{font-family:var(--font-body);font-size:17px;line-height:1.7;color:var(--text-muted);margin-bottom:18px;max-width:62ch} .topic p strong{color:var(--text-primary);font-weight:600} .topic ul{list-style:none;margin:8px 0 24px;padding:0;max-width:62ch} .topic ul li{font-family:var(--font-body);font-size:17px;line-height:1.65;color:var(--text-muted);padding:8px 0 8px 22px;position:relative} .topic ul li::before{content:'';position:absolute;left:0;top:18px;width:8px;height:1px;background:var(--ember)} /* comparison / differentiation table (homepage section + how-we-compare). The axis is temperature, not stoplight: the VulcanAX column is the lit side of the forge (ember text, warm column tint, warm hairline on its left edge); the legacy columns are cold (ash-grey headers, dimmed-cream pricing, inert marks). Capability is carried by glyph SHAPE plus aria-label, never color alone: full flame = yes, rising spark = partial, cold coal = no. Red stays reserved for brand marks; green is not used here. */ /* phones: the table keeps a readable minimum width and scrolls inside its wrapper instead of crushing the wordmark column or bleeding off-canvas */ .diff-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch} .diff-table{width:100%;border-collapse:collapse;font-family:var(--font-label);font-size:13px;table-layout:fixed} .diff-table thead th{font-weight:700;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted);padding:20px 20px;text-align:left;border-bottom:1px solid var(--border-2);vertical-align:bottom} .diff-table thead th:last-child{color:var(--text-primary)} .diff-table thead .th-brand{font-family:var(--font-display);font-weight:800;font-size:16px;letter-spacing:-.01em;text-transform:none} .diff-table thead th .th-sub{display:block;font-weight:700;font-size:12px;letter-spacing:.06em;color:var(--cream-dim);opacity:.8;margin-top:6px} .diff-table thead th:last-child .th-sub{color:var(--ember);opacity:1} .diff-table th:last-child,.diff-table tbody td:last-child{background:rgba(255,122,45,.05);box-shadow:inset 1px 0 0 rgba(255,138,64,.20)} .diff-table thead th:last-child{background:rgba(255,122,45,.09);box-shadow:inset 1px 0 0 rgba(255,138,64,.30),inset 0 1px 0 rgba(255,138,64,.30)} .diff-table tbody td{padding:16px 20px;border-bottom:1px solid var(--border);color:var(--text-muted);vertical-align:middle;line-height:1.5} .diff-table tbody td:first-child{font-weight:500;color:var(--text-primary);width:220px} .diff-table tbody tr{transition:background .2s} .diff-table tbody tr:hover{background:var(--bg-2)} .tmark{display:inline-flex;vertical-align:middle} .tmark svg{display:block} .tmark-hot{color:#4ADE80;filter:drop-shadow(0 0 5px rgba(74,222,128,.28))} .tmark-cold{color:#4ADE80;opacity:.75} .tmark-half{color:var(--ember)} .tmark-off{color:var(--text-dim);opacity:.60} .diff-table .diff-mark{display:inline-block;vertical-align:middle;width:18px;height:18px} .diff-note{margin-top:20px;font-family:var(--font-label);font-size:12px;color:var(--text-dim);line-height:1.5} /* glyph legend under each diff-table: icons are aria-hidden; in-table marks carry Included/Add-on/Not offered aria-labels. */ .diff-legend{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:18px} .diff-legend-item{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-label);font-size:12px;color:var(--text-muted);line-height:1} .diff-legend .tmark svg{width:16px;height:16px} @media(max-width:768px){ .page-cta{padding:48px 0} .topic-title{font-size:24px} .topic-lede{font-size:17px} .topic p,.topic ul li{font-size:16px} .diff-table{font-size:10px;min-width:480px} .diff-table thead th{padding:10px 6px;font-size:10px;letter-spacing:.04em;word-break:break-word} /* never break the wordmark mid-word */ .diff-table thead .th-brand{word-break:normal} .diff-table tbody td{padding:10px 6px;font-size:10px;word-break:break-word} .diff-table tbody td:first-child{width:30%} .diff-table thead .th-brand{font-size:11px;letter-spacing:-.02em} .diff-table thead th .th-sub{font-size:10px;letter-spacing:.02em} } /* =================================================================== LAZY-LOADED SCHEDULING EMBED (home, /contact/, /thank-you/) The Reclaim calendar is a heavy cross-origin SPA. It is injected only when it nears the viewport (or on first interaction) so it never blocks initial render. The placeholder reserves the embed's height (per-page min-height below) so deferring introduces no layout shift, and carries a direct booking link as graceful fallback (no-JS / load failure / Safari ITP). =================================================================== */ .vx-cal-embed{display:flex;align-items:center;justify-content:center;text-align:center} .vx-cal-embed object,.vx-cal-embed iframe{display:block;width:100%!important;border:0} .vx-cal-fallback{font-family:var(--font-label);font-weight:500;font-size:12px;letter-spacing:.04em;line-height:1.5;color:var(--text-muted);text-decoration:none;border-bottom:1px solid var(--text-dim);transition:color .2s,border-color .2s} .vx-cal-fallback:hover{color:var(--ember);border-bottom-color:var(--ember)} /* =================================================================== A11y: skip-to-content link (off-screen until focused) + hamburger button reset. The mobile toggle is now a