/*
* direction-b.css — "Cinematic Acreage" skin
* 2026-05-07.
*
* Overrides the design tokens defined in style.css to apply Direction B
* (per the design exploration uploaded 2026-05-07): warm bone palette,
* deep olive accent, terracotta soft accent for emphasis, big serif
* Zodiak headlines, mono-uppercase tracked labels, sharp (no-radius)
* surfaces, ken-burns hero photography.
*
* Loaded AFTER style.css so cascade wins. All page HTML and SEO copy
* unchanged — this is a visual skin only.
*/
/* ──────────────────────────────────────────────────────────────────
FONTS — Inter Tight (body) + JetBrains Mono (labels) load via a
in each page's , NOT via @import.
@import inside CSS forces a sequential round-trip: browser must
download + parse direction-b.css before it discovers the @import
and fires a second request. A in HTML lets that font CSS
download in parallel with direction-b.css.
────────────────────────────────────────────────────────────────── */
/* ──────────────────────────────────────────────────────────────────
TOKEN OVERRIDES — light mode (default)
────────────────────────────────────────────────────────────────── */
:root,
:root[data-theme='light'] {
/* Warm bone surfaces */
--color-bg: #FAF7F1;
--color-surface: #F0EBDF;
--color-surface-2: #FAF7F1;
--color-surface-offset: #E8E2D2;
--color-divider: #D8D1BE;
--color-border: #D8D1BE;
/* Near-black + warm muted text */
--color-text: #14140F;
--color-text-muted: #69655B;
--color-text-faint: #9E9A8A;
--color-text-inverse: #FAF7F1;
/* Deep olive primary (was #4F5C20) */
--color-primary: #4F5C20;
--color-primary-hover: #14140F;
--color-primary-active: #14140F;
--color-primary-light: #E8E5D2;
--color-charcoal: #14140F;
--color-warm-grey: #F0EBDF;
--color-cta: #4F5C20;
--color-cta-hover: #14140F;
--color-cta-text: #FFFFFF;
/* Direction-B specific tokens for accents */
--color-clay: #B85A3A; /* terracotta — used sparingly */
--color-clay-soft: #E8C9B5; /* terracotta soft — italic emphasis */
/* Fonts */
--font-body: 'Inter Tight', 'Work Sans', system-ui, sans-serif;
--font-display: 'Zodiak', 'Fraunces', Georgia, serif;
--font-mono: 'JetBrains Mono', ui-monospace, monospace;
/* Sharp surfaces — no rounded corners */
--radius-sm: 0;
--radius-md: 0;
--radius-lg: 0;
--radius-xl: 0;
/* Keep radius-full for icon-pills */
/* Softer shadows in editorial palette */
--shadow-sm: 0 1px 2px rgba(20, 20, 15, 0.04);
--shadow-md: 0 4px 16px rgba(20, 20, 15, 0.06);
--shadow-lg: 0 12px 36px rgba(20, 20, 15, 0.10);
}
[data-theme='dark'] {
--color-bg: #14140F;
--color-surface: #1F1F18;
--color-surface-2: #1A1A14;
--color-surface-offset: #221F18;
--color-divider: #2D2A22;
--color-border: #3A3528;
--color-text: #FAF7F1;
--color-text-muted: #A8A294;
--color-text-faint: #6B6658;
--color-text-inverse: #14140F;
--color-primary: #6F8030;
--color-primary-hover: #FAF7F1;
--color-primary-active: #FAF7F1;
--color-primary-light: #2A2D1E;
--color-charcoal: #FAF7F1;
--color-warm-grey: #1F1F18;
--color-cta: #6F8030;
--color-cta-hover: #FAF7F1;
--color-cta-text: #14140F;
--color-clay: #C76B48;
--color-clay-soft: #B85A3A;
}
/* ──────────────────────────────────────────────────────────────────
TYPOGRAPHY — Zodiak display, Inter Tight body, mono labels
────────────────────────────────────────────────────────────────── */
body {
font-family: var(--font-body);
font-feature-settings: 'ss01', 'cv11';
letter-spacing: -0.005em;
}
h1, h2, h3, h4,
.display,
.page-hero h1,
.hero-content h1 {
font-family: var(--font-display);
font-weight: 500;
letter-spacing: -0.012em;
line-height: 1.05;
}
h1, .page-hero h1, .hero-content h1 {
line-height: 0.95;
}
/* Make h1 substantially bigger on hero — editorial scale */
.page-hero h1,
.hero-content h1,
.hero h1 {
font-size: clamp(3rem, 7.5vw, 8rem);
line-height: 0.95;
letter-spacing: -0.022em;
max-width: 16ch;
font-weight: 500;
}
/* Terracotta soft italic emphasis on hero word */
.hero h1 em,
.hero-content h1 em,
.page-hero h1 em {
font-style: italic;
color: var(--color-clay-soft);
font-weight: 500;
}
/* Section-label → mono uppercase tracked */
.section-label {
font-family: var(--font-mono) !important;
font-size: 11px !important;
letter-spacing: 0.22em !important;
text-transform: uppercase !important;
font-weight: 500 !important;
color: var(--color-text-muted) !important;
}
/* Hero badge — same mono treatment */
.hero-badge {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
font-weight: 500;
border: 1px solid currentColor;
padding: 6px 12px;
display: inline-block;
background: transparent;
}
/* Breadcrumb — mono small caps */
.breadcrumb {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
}
/* Stat values — serif display in editorial */
.stat-value {
font-family: var(--font-display);
font-weight: 500;
}
.stat-label {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
}
/* ──────────────────────────────────────────────────────────────────
BUTTONS — sharp, uppercase, tracked
────────────────────────────────────────────────────────────────── */
.btn,
.btn--primary,
.btn--secondary,
.btn--large,
.btn--small,
.header-cta {
border-radius: 0 !important;
letter-spacing: 0.12em;
text-transform: uppercase;
font-weight: 600;
font-family: var(--font-body);
transition: background 220ms var(--ease-out), color 220ms var(--ease-out), border-color 220ms var(--ease-out);
}
.btn--primary,
.header-cta {
background: var(--color-primary);
color: #fff;
border: 1px solid var(--color-primary);
}
.btn--primary:hover,
.header-cta:hover {
background: var(--color-charcoal);
border-color: var(--color-charcoal);
color: #fff;
}
.btn--secondary {
background: transparent;
color: var(--color-charcoal);
border: 1px solid var(--color-charcoal);
}
.btn--secondary:hover {
background: var(--color-charcoal);
color: var(--color-bg);
}
/* CTAs over dark photo backgrounds get inverse treatment: hero (top of
homepage) and .cta (bottom-of-homepage walk-of-your-block section)
both sit over .hero-image / .cta-bg dark photos and need light-on-
dark CTAs to read against them. .page-hero is intentionally NOT
scoped here — page-heroes have a cream background (see .page-hero
rule below) so default CTA styles read correctly there. */
.hero .btn--primary,
.cta .btn--primary {
background: #fff;
color: var(--color-charcoal);
border-color: #fff;
}
.hero .btn--primary:hover,
.cta .btn--primary:hover {
background: var(--color-primary);
color: #fff;
border-color: var(--color-primary);
}
.hero .btn--secondary,
.cta .btn--secondary {
color: #fff;
border-color: #fff;
}
.hero .btn--secondary:hover,
.cta .btn--secondary:hover {
background: #fff;
color: var(--color-charcoal);
}
/* ──────────────────────────────────────────────────────────────────
HOMEPAGE-ONLY OVERRIDES (body.home)
Editorial Direction B layout — transparent overlay header,
full-viewport hero, bottom-left CTA stack.
────────────────────────────────────────────────────────────────── */
body.home {
/* prevent the header taking layout space — hero starts at top of viewport */
}
body.home .site-header--home {
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 10;
background: transparent !important;
border-bottom: none !important;
padding: clamp(1.25rem, 2.5vh, 2rem) 0;
}
body.home .site-header--home .header-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: clamp(2rem, 5vw, 4rem);
max-width: var(--content-wide);
margin: 0 auto;
padding: 0 clamp(1.5rem, 4vw, 3.5rem);
}
/* Wordmark — Zodiak serif + mono region tag */
body.home .header-wordmark {
display: flex;
align-items: baseline;
gap: 14px;
text-decoration: none !important;
}
body.home .wordmark-name {
font-family: var(--font-display);
font-size: clamp(1.4rem, 1.8vw + 0.6rem, 1.75rem);
font-weight: 600;
letter-spacing: -0.02em;
color: #fff;
line-height: 1;
}
body.home .wordmark-tag {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.7);
}
/* Simple flat nav — 5 items, no dropdowns, white on photo */
body.home .header-nav--simple {
display: flex;
gap: clamp(1.5rem, 2.2vw, 2rem);
flex: 1;
justify-content: center;
}
body.home .header-nav--simple a {
font-family: var(--font-body);
font-size: 13px;
font-weight: 500;
color: rgba(255, 255, 255, 0.95);
letter-spacing: 0;
text-transform: none;
text-decoration: none !important;
transition: opacity 200ms var(--ease-out);
}
body.home .header-nav--simple a:hover {
opacity: 0.7;
color: rgba(255, 255, 255, 0.95);
}
/* Header CTA — solid white pill (sharp), dark text */
body.home .site-header--home .header-cta {
background: #fff !important;
color: var(--color-charcoal) !important;
border: 1px solid #fff !important;
padding: 14px 28px;
font-size: 12px;
letter-spacing: 0.14em;
font-weight: 600;
text-transform: uppercase;
}
body.home .site-header--home .header-cta:hover {
background: var(--color-clay-soft) !important;
border-color: var(--color-clay-soft) !important;
color: var(--color-charcoal) !important;
}
/* Hide phone number + theme toggle on homepage hero header (Direction B mock has no phone) */
body.home .site-header--home .header-phone,
body.home .site-header--home .theme-toggle { display: none; }
/* Mobile-menu button still present for narrow viewports */
body.home .mobile-menu-btn { color: #fff; }
/* Hide nav at narrow viewports, show hamburger */
@media (max-width: 880px) {
body.home .header-nav--simple { display: none; }
body.home .site-header--home .header-cta { padding: 10px 18px; font-size: 11px; }
}
/* ──────────────────────────────────────────────────────────────────
HOMEPAGE HERO — full viewport, bottom-aligned content
────────────────────────────────────────────────────────────────── */
body.home .hero {
min-height: 100vh;
display: flex;
align-items: flex-end;
padding-top: 0;
}
body.home .hero-content {
position: relative;
padding: clamp(8rem, 18vh, 12rem) 0 clamp(2.5rem, 6vh, 4rem);
max-width: var(--content-wide);
margin: 0 auto;
width: 100%;
display: flex;
flex-direction: column;
align-items: flex-start;
}
body.home .hero-badge {
display: inline-block;
margin-bottom: clamp(1.5rem, 3vh, 2.25rem);
border: none;
padding: 0;
background: transparent;
color: rgba(255, 255, 255, 0.85);
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
font-weight: 500;
}
body.home .hero h1 {
font-size: clamp(2.75rem, 8vw, 8.5rem);
line-height: 0.92;
letter-spacing: -0.022em;
font-weight: 500;
color: #fff;
max-width: 14ch;
margin: 0 0 clamp(1.5rem, 3vh, 2rem) 0;
}
body.home .hero h1 em {
font-style: italic;
color: var(--color-clay-soft);
font-weight: 500;
}
body.home .hero-content > p {
font-size: clamp(1rem, 0.8vw + 0.7rem, 1.2rem);
max-width: 44ch;
color: rgba(255, 255, 255, 0.92);
margin: 0 0 clamp(2rem, 5vh, 3rem) 0;
line-height: 1.55;
}
body.home .hero-actions {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
body.home .hero .btn--primary {
background: #fff;
color: var(--color-charcoal);
border: 1px solid #fff;
padding: 18px 36px;
font-size: 13px;
letter-spacing: 0.14em;
font-weight: 600;
}
body.home .hero .btn--primary:hover {
background: var(--color-clay-soft);
border-color: var(--color-clay-soft);
}
body.home .hero .btn--secondary {
background: transparent;
color: #fff;
border: 1px solid #fff;
padding: 18px 36px;
font-size: 13px;
letter-spacing: 0.14em;
font-weight: 600;
}
body.home .hero .btn--secondary:hover {
background: #fff;
color: var(--color-charcoal);
}
/* ──────────────────────────────────────────────────────────────────
HERO — full-bleed image with ken-burns + dark gradient
────────────────────────────────────────────────────────────────── */
.hero {
position: relative;
min-height: 88vh;
color: #fff;
overflow: hidden;
isolation: isolate;
}
.hero-image {
position: absolute;
inset: 0;
z-index: -2;
overflow: hidden;
}
.hero-image img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 40%;
animation: db-kenburns 22s ease-out infinite alternate;
}
.hero::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background:
linear-gradient(180deg,
rgba(20, 20, 15, 0.55) 0%,
rgba(20, 20, 15, 0.10) 35%,
rgba(20, 20, 15, 0.05) 55%,
rgba(20, 20, 15, 0.85) 100%);
}
.hero-content {
position: relative;
padding: 14vh 0 9vh;
max-width: none;
}
/* Hero badge — pin it above the headline, not bottom-floating */
.hero-content .hero-badge {
display: inline-block;
margin-bottom: clamp(2rem, 4vh, 3rem);
border: none;
padding: 0;
background: transparent;
color: rgba(255, 255, 255, 0.85);
}
/* Hero subhead beneath h1 — generous space, narrower line */
.hero-content > p {
margin-top: clamp(1.5rem, 3vh, 2rem);
max-width: 44ch;
opacity: 0.94;
font-size: clamp(1rem, 1vw + 0.55rem, 1.2rem);
}
/* Hero CTA row sits at bottom-left */
.hero-content .hero-actions {
margin-top: clamp(2rem, 5vh, 3.5rem);
gap: var(--space-3);
flex-wrap: wrap;
}
/* Page-hero CTA row: side-by-side at desktop. The base .hero-actions
rule wraps when buttons overflow — at desktop with the 1fr 1fr
page-hero-inner grid the text column is narrow enough that two
.btn--large CTAs occasionally tip over. Forcing nowrap keeps them
on one line; flex-shrink lets them share the available width. */
@media (min-width: 768px) {
.page-hero .hero-actions {
flex-wrap: nowrap;
align-items: center;
}
}
/* Fluid CTA scaling inside .page-hero. Token-based padding/font-size
stays constant at every viewport, which is why the buttons "snap"
from fitting to wrapping. clamp() interpolates against viewport
width so the buttons shrink smoothly as the column narrows.
Values map to:
320px viewport: ~13.6px font, 9.6px × 19.2px padding (compact)
1280px viewport: ~16px font, 16px × 32px padding (= current desktop)
Above 1280px: clamps at the desktop max (no further growth).
Letter-spacing is em-relative (0.12em from the base .btn rule), so
it scales with the font-size automatically. */
.page-hero .btn--large {
font-size: clamp(0.85rem, 0.4vw + 0.72rem, 1rem);
padding:
clamp(0.6rem, 0.5vw + 0.45rem, 1rem)
clamp(1.2rem, 1vw + 0.9rem, 2rem);
}
@keyframes db-kenburns {
0% { transform: scale(1.06) translate(0, 0); }
100% { transform: scale(1.13) translate(-1.2%, -1.6%); }
}
@media (prefers-reduced-motion: reduce) {
.hero-image img { animation: none; }
}
/* Hero subtitle copy */
.hero-content p {
font-size: clamp(1rem, 1.1vw + 0.6rem, 1.25rem);
max-width: 52ch;
opacity: 0.94;
}
/* Hero italic emphasis hook (used in JSX with ) — terracotta soft */
.hero h1 em {
font-style: italic;
color: var(--color-clay-soft);
font-weight: 500;
}
/* ──────────────────────────────────────────────────────────────────
PAGE HERO (non-homepage) — gentler inverse, still editorial
────────────────────────────────────────────────────────────────── */
.page-hero {
background: var(--color-bg);
color: var(--color-text);
padding: clamp(3rem, 8vh, 6rem) 0 clamp(2rem, 5vh, 4rem);
border-bottom: 1px solid var(--color-border);
}
/* ──────────────────────────────────────────────────────────────────
SECTIONS, CARDS, SURFACES — sharp edges, bone surfaces
────────────────────────────────────────────────────────────────── */
.section {
padding: clamp(3rem, 8vh, 7rem) 0;
}
.section--alt {
background: var(--color-surface);
}
.card {
background: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: 0;
transition: transform 240ms var(--ease-out), border-color 220ms var(--ease-out);
padding: var(--space-6);
}
.card:hover {
border-color: var(--color-primary);
transform: translateY(-2px);
}
/* Step blocks (used in How-it-works sections) */
.step,
.steps .step {
border-left: 2px solid var(--color-border);
padding-left: var(--space-5);
background: transparent;
border-radius: 0;
}
.step h3 {
margin-top: 0;
}
/* Comparison/figcaption photo blocks */
.comparison-item,
.section-image {
border-radius: 0;
}
/* Pricing card override */
.pricing-card {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: 0;
padding: var(--space-8);
}
.pricing-card--featured {
border: 1px solid var(--color-primary);
background: var(--color-bg);
}
/* Tables — editorial */
table {
font-family: var(--font-body);
}
table thead th {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--color-text-muted);
font-weight: 500;
}
/* Faq items — editorial dividers */
.faq-item {
border-bottom: 1px solid var(--color-border);
}
.faq-question {
font-family: var(--font-display);
font-size: clamp(1.05rem, 1.4vw + 0.5rem, 1.5rem);
font-weight: 500;
letter-spacing: -0.005em;
padding: var(--space-6) 0;
}
/* ──────────────────────────────────────────────────────────────────
STATS BAND — dark inverse strip (when class .stats appears alone)
────────────────────────────────────────────────────────────────── */
section[aria-labelledby$="stats-heading"] {
background: var(--color-charcoal);
color: var(--color-bg);
padding: clamp(2.5rem, 6vh, 4.5rem) 0;
}
section[aria-labelledby$="stats-heading"] .stat-value {
color: var(--color-clay-soft);
font-size: clamp(2.5rem, 4vw, 3.5rem);
}
section[aria-labelledby$="stats-heading"] .stat-label {
color: rgba(250, 247, 241, 0.72);
}
/* ──────────────────────────────────────────────────────────────────
CTA BANNERS — dark editorial
────────────────────────────────────────────────────────────────── */
.cta-banner {
background: var(--color-charcoal);
color: var(--color-bg);
padding: clamp(3rem, 8vh, 6rem) 0;
}
.cta-banner h2 {
color: var(--color-bg);
}
.cta-banner p {
color: rgba(250, 247, 241, 0.85);
max-width: 60ch;
}
/* ──────────────────────────────────────────────────────────────────
HEADER — refined, editorial weights
────────────────────────────────────────────────────────────────── */
.site-header {
background: var(--color-bg);
border-bottom: 1px solid var(--color-border);
}
.header-nav a {
font-family: var(--font-body);
font-weight: 500;
font-size: 14px;
letter-spacing: 0;
}
.header-nav a:hover,
.header-nav a.active,
.header-nav a[aria-current='page'] {
color: var(--color-primary);
}
.nav-dropdown-trigger {
font-family: var(--font-body);
font-weight: 500;
font-size: 14px;
}
.nav-dropdown-menu {
background: var(--color-bg);
border: 1px solid var(--color-border);
border-radius: 0;
padding: var(--space-2);
box-shadow: var(--shadow-md);
}
.nav-dropdown-menu a {
padding: var(--space-2) var(--space-3);
font-size: 14px;
}
.nav-dropdown-menu a:hover {
background: var(--color-surface);
color: var(--color-primary);
}
/* ──────────────────────────────────────────────────────────────────
FOOTER — editorial, generous spacing
────────────────────────────────────────────────────────────────── */
.site-footer {
background: var(--color-charcoal);
color: var(--color-bg);
padding: clamp(3rem, 6vh, 5rem) 0 var(--space-8);
}
.footer-col h4 {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: rgba(250, 247, 241, 0.65);
font-weight: 500;
margin-bottom: var(--space-4);
}
.footer-col a {
color: rgba(250, 247, 241, 0.88);
}
.footer-col a:hover {
color: var(--color-clay-soft);
}
.footer-bottom {
border-top: 1px solid rgba(250, 247, 241, 0.12);
padding-top: var(--space-5);
margin-top: var(--space-8);
color: rgba(250, 247, 241, 0.5);
font-size: 13px;
}
/* ──────────────────────────────────────────────────────────────────
FORM ELEMENTS — sharp inputs
────────────────────────────────────────────────────────────────── */
input[type="text"],
input[type="email"],
input[type="number"],
input[type="tel"],
textarea,
select {
border-radius: 0 !important;
border: 1px solid var(--color-border);
font-family: var(--font-body);
background: var(--color-bg);
}
input:focus,
textarea:focus,
select:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 3px rgba(79, 92, 32, 0.18);
}
/* ──────────────────────────────────────────────────────────────────
PRELAUNCH BANNER — only if it ever returns; muted bone strip
────────────────────────────────────────────────────────────────── */
.prelaunch-banner {
background: var(--color-charcoal);
color: var(--color-bg);
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.08em;
text-transform: uppercase;
}
/* ──────────────────────────────────────────────────────────────────
IMAGES — soft inset, no rounded corners
────────────────────────────────────────────────────────────────── */
img,
.section-image img,
.page-hero-image img,
.comparison-item img,
.testimonial img {
border-radius: 0 !important;
}
/* ──────────────────────────────────────────────────────────────────
ACCENTS — hyperlinks, focus rings
────────────────────────────────────────────────────────────────── */
a {
color: var(--color-primary);
text-decoration: none;
text-underline-offset: 0.18em;
transition: color 200ms var(--ease-out);
}
a:hover {
color: var(--color-charcoal);
text-decoration: underline;
text-decoration-thickness: 1px;
}
/* But nav links/footer cols/headers don't auto-underline */
.header-nav a,
.nav-dropdown-menu a,
.footer-col a,
.mobile-nav a,
.btn,
.cta-banner a,
.header-cta {
text-decoration: none !important;
}
.header-nav a:hover,
.nav-dropdown-menu a:hover,
.footer-col a:hover,
.mobile-nav a:hover {
text-decoration: none !important;
}
/* ──────────────────────────────────────────────────────────────────
REDUCED MOTION
────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}