/* ──────────────────────────────────────────────────────────────────
COMMENCE STUDIO — Component & Layout CSS
Extracted from the static prototype HTML files. tokens.css owns the
:root design tokens; this file owns components, layouts, and motion.
────────────────────────────────────────────────────────────────── */
/* ── Theme overrides (cmmn3 tweaks) ─────────────────────────────── */
/* Logo marquee — full-width, tight bottom padding, no section wrapper. */
.wp-block-cwp-logo-marquee {
padding: 0 !important;
margin: 0 0 8px !important;
max-width: 100% !important;
width: 100% !important;
}
.logos {
padding-block: 24px 8px;
margin-block: 0;
}
/* Hero block wrapper — let the section's own .container handle width.
Gutenberg adds a default constrained wrapper that breaks the
1.2fr 1fr grid by narrowing the column area. */
.wp-block-cwp-hero-kinetic-collage,
.wp-block-cwp-hero-kinetic-simple,
.wp-block-cwp-hero-service-detail,
.wp-block-cwp-hero-contact {
max-width: 100% !important;
padding: 0 !important;
margin: 0 !important;
}
/* Timeline step reset — the homepage process strip's `.step` rule was
first-author and applies card styling (background / border /
min-height: 220px / padding: 24px). The Contact page's `.timeline .step`
only re-declares padding+display, so the card props leaked through.
Force them off here. */
.timeline .step {
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
min-height: 0 !important;
box-shadow: none !important;
padding: 10px 0 !important;
display: flex !important;
flex-direction: row !important;
align-items: flex-start !important;
gap: 14px !important;
}
.timeline .step:hover {
border-color: transparent !important;
}
/* Mega menu hover stability — span the visual gap between nav link and
panel with an invisible bridge so cursor travel doesn't close the
panel, and add a small close-delay for forgiving mouse-out. */
.has-mega-wrap::after {
content: '';
/* Bridge no longer needs to span a visible gap (panel is flush) but
we keep a tiny 4 px hover-tail so the cursor doesn't lose hover
state during the 1-frame transition between link and panel. */
position: absolute;
top: 100%;
left: -16px;
right: -16px;
height: 4px;
pointer-events: none;
}
.has-mega-wrap:hover::after,
.has-mega-wrap:focus-within::after { pointer-events: auto; }
.has-mega-wrap .mega {
transition: opacity .25s var(--ease-out) .15s,
visibility 0s linear .4s,
transform .25s var(--ease-out) .15s;
}
.has-mega-wrap:hover .mega,
.has-mega-wrap:focus-within .mega {
transition-delay: 0s;
visibility: visible;
}
/* ============================================================================ HOMEPAGE ============================================================================ */
/* dedupe: single canonical copy of HOMEPAGE HI-FI v1 (was duplicated 5x) */
COMMENCE STUDIO — HOMEPAGE HI-FI v1
Design tokens · type ramp · components · interactions
Single-file prototype. Mobile-first. WCAG 2.2 AA.
────────────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }
/* Mobile horizontal-overflow safety net.
`overflow-x: clip` (vs. `hidden`) doesn't establish a containing block for
position:fixed children, so the nav/drawer/sticky filter rails keep working.
`overflow-y: visible` is required alongside clip so vertical scrolling
stays on the document. */
html{ overflow-x: clip; overflow-y: visible; }
body{ overflow-x: clip; }
body{
font-family: var(--sans);
background: var(--paper);
color: var(--ink);
font-size: 17px;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
font-feature-settings: "ss01","cv11";
}
img { display:block; max-width:100%; height:auto; }
/* Belt-and-suspenders: any block-level child that wants to be edge-to-edge
should still respect the viewport width. */
.site-main, .nav-shell, footer{ max-width: 100vw; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; }
/* Selection */
::selection{ background: var(--accent); color: var(--paper); }
/* Container */
.container{ width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 24px; }
@media (min-width: 768px){ .container{ padding: 0 40px; } }
@media (min-width: 1280px){ .container{ padding: 0 48px; } }
/* Eyebrow */
.eyebrow{
font-family: var(--mono);
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--subtle);
display: inline-flex;
align-items: center;
gap: 8px;
}
.eyebrow .dot{ width:6px; height:6px; border-radius:50%; background: var(--accent); display:inline-block; }
/* Type ramp */
.h1, h1 {
font-family: var(--sans);
font-weight: 500;
font-size: clamp(38px, 5.4vw, 76px);
line-height: 0.98;
letter-spacing: -0.03em;
margin: 0;
color: var(--ink);
text-wrap: balance;
}
.h1 .it, h1 .it{
font-family: var(--serif);
font-style: italic;
font-weight: 400;
letter-spacing: -0.02em;
}
.h2, h2 {
font-family: var(--sans);
font-weight: 500;
font-size: clamp(32px, 4.6vw, 56px);
line-height: 1.04;
letter-spacing: -0.02em;
margin: 0;
color: var(--ink);
text-wrap: balance;
}
.h2 .it { font-family: var(--serif); font-style: italic; font-weight: 400; }
.h3 { font-family: var(--sans); font-weight: 500; font-size: clamp(24px, 2.4vw, 32px); line-height: 1.15; letter-spacing: -0.015em; margin:0; }
.h4 { font-family: var(--sans); font-weight: 500; font-size: 22px; line-height: 1.25; letter-spacing: -0.01em; margin:0; }
.h5 { font-family: var(--sans); font-weight: 500; font-size: 16px; line-height: 1.3; letter-spacing: 0; margin:0; }
.lede{ font-size: clamp(18px, 1.6vw, 22px); line-height: 1.45; color: var(--ink-2); max-width: 60ch; }
.small{ font-size: 14px; line-height: 1.5; color: var(--subtle); }
.kpi{ font-family: var(--sans); font-weight: 500; font-size: clamp(40px, 4.8vw, 64px); line-height: 1; letter-spacing: -0.03em; }
/* Buttons */
.btn{
display: inline-flex;
align-items: center;
gap: 10px;
padding: 14px 22px;
border-radius: var(--r-pill);
font-weight: 500;
font-size: 15px;
letter-spacing: -0.005em;
transition: transform .25s var(--ease-out), background .25s var(--ease-out), color .25s var(--ease-out), box-shadow .25s var(--ease-out);
white-space: nowrap;
border: 1px solid transparent;
}
.btn:hover{ transform: translateY(-1px); }
.btn:focus-visible{ outline: 2px solid var(--accent); outline-offset: 3px; }
.btn-dark{ background: var(--ink); color: var(--paper); }
.btn-dark:hover{ background: var(--ink-2); box-shadow: var(--shadow-2); }
.btn-ghost{ background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover{ background: var(--mute); border-color: var(--ink); }
.btn-accent{ background: var(--accent-2); color: var(--paper); } /* 5.10:1 AA */
.btn-accent:hover{ background: var(--accent-3); } /* 6.17:1 AA */
.btn-link{
display: inline-flex; align-items: center; gap: 8px;
font-weight: 500; color: var(--ink);
border-bottom: 1px solid currentColor; padding-bottom: 2px;
}
.btn-link:hover{ color: var(--accent); }
.btn .arrow{ display:inline-block; transition: transform .25s var(--ease-out); }
.btn:hover .arrow{ transform: translateX(3px); }
/* Chip / Tag */
.chip{
display: inline-flex; align-items: center; gap: 6px;
padding: 6px 12px; border-radius: var(--r-pill);
background: var(--mute); color: var(--ink);
font-size: 13px; font-weight: 500;
}
.chip-line{ background: transparent; border: 1px solid var(--line); }
.chip-accent{ background: var(--accent-soft); color: var(--accent-2); }
/* Stars */
.stars{ display:inline-flex; gap: 2px; color: var(--gold); }
.stars svg{ width: 14px; height:14px; }
/* ──────────────────────────────────────────────────────────────────
NAV — Island sticky with mega menu
────────────────────────────────────────────────────────────────── */
.nav-shell{
position: fixed; top: 16px; left: 0; right: 0; z-index: 50;
display: flex; justify-content: center;
pointer-events: none;
transition: top .3s var(--ease-out);
}
.nav{
pointer-events: auto;
display: flex; align-items: center; gap: 8px;
padding: 8px 8px 8px 20px;
background: linear-gradient(180deg,
rgba(247,245,238,.62) 0%,
rgba(247,245,238,.42) 100%);
-webkit-backdrop-filter: saturate(180%) blur(24px);
backdrop-filter: saturate(180%) blur(24px);
border: 1px solid rgba(255,255,255,.55);
border-radius: var(--r-pill);
box-shadow:
0 10px 36px rgba(15,15,14,.10);
width: min(1080px, calc(100% - 32px));
position: relative;
isolation: isolate;
}
/* Specular highlight on nav — top-edge shimmer */
.nav::after{
content: ""; position: absolute; inset: 0;
border-radius: inherit; pointer-events: none;
background: linear-gradient(180deg, rgba(255,255,255,.5) 0%, rgba(255,255,255,0) 35%);
mix-blend-mode: overlay;
z-index: 1;
}
.nav > *{ position: relative; z-index: 2; }
.nav.scrolled{
background: linear-gradient(180deg,
rgba(247,245,238,.78) 0%,
rgba(247,245,238,.58) 100%);
}
.brand{
display: inline-flex; align-items: center; gap: 10px;
color: var(--ink);
font-weight: 600; letter-spacing: -0.01em; font-size: 17px;
}
.brand .brandmark{
width: 26px; height: 26px;
display: inline-block;
flex-shrink: 0;
}
.brand .brand-text{
font-family: var(--sans);
font-weight: 600;
letter-spacing: -0.01em;
font-size: 17px;
}
/* Wordmark scaled to match the 26px brandmark cap-height visually.
SVG aspect is 2738/527 ≈ 5.2:1, so a 22px cap-height renders ~115px wide. */
.brand .brand-wordmark{
height: 22px;
width: auto;
display: inline-block;
flex-shrink: 0;
}
/* Legacy .mark kept for safety in case any other instance lingers */
.brand .mark{
width: 28px; height: 28px; border-radius: 8px;
background: var(--ink); color: var(--paper);
display: inline-flex; align-items: center; justify-content: center;
font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 16px;
}
.nav-links{ display:none; align-items:center; gap: 4px; margin-left: 12px; }
@media (min-width: 980px){ .nav-links{ display:inline-flex; } }
.nav-link{
position: relative;
padding: 10px 14px;
border-radius: var(--r-pill);
font-size: 14.5px; font-weight: 500;
color: var(--ink); transition: background .2s var(--ease-out), color .2s var(--ease-out);
}
.nav-link:hover{ background: var(--mute); }
.nav-link.current{ color: var(--ink); position: relative; }
.nav-link.current::before{
content: ""; position: absolute; left: 14px; right: 14px; bottom: 6px;
height: 1.5px; background: var(--accent);
}
.nav-link.has-mega::after{
content: ""; display: inline-block;
width: 6px; height:6px; margin-left: 6px;
border-right: 1.5px solid var(--subtle);
border-bottom: 1.5px solid var(--subtle);
transform: rotate(45deg) translateY(-2px);
}
.nav-spacer{ flex: 1; }
.nav-cta{
display: inline-flex; align-items: center; gap: 8px;
background: var(--ink); color: var(--paper);
padding: 10px 18px; border-radius: var(--r-pill);
font-size: 14.5px; font-weight: 500;
transition: background .2s var(--ease-out), transform .2s var(--ease-out);
}
.nav-cta:hover{ background: var(--ink-2); transform: translateY(-1px); }
/* Mobile / narrow viewports: drop the nav-cta from the bar — the
hamburger drawer carries its own .nav-drawer-cta so the action stays
reachable without crowding the pill nav at small widths. */
@media (max-width: 979px){ .nav-cta{ display: none; } }
.nav-burger{
display: inline-flex; align-items:center; justify-content:center;
width: 40px; height:40px; border-radius: var(--r-pill); background: var(--mute);
margin-left: 4px;
border: 0; color: var(--ink); cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: background .2s var(--ease-out);
}
.nav-burger:hover{ background: var(--mute-2, #ebe7da); }
.nav-burger .ico-close{ display: none; }
.nav-burger[aria-expanded="true"] .ico-burger{ display: none; }
.nav-burger[aria-expanded="true"] .ico-close{ display: inline-block; }
@media (min-width: 980px){ .nav-burger{ display:none; } }
/* ──────────────────────────────────────────────────────────────────
MOBILE DRAWER — slide-in from right, hidden ≥980px
────────────────────────────────────────────────────────────────── */
.nav-drawer{
position: fixed; inset: 0; z-index: 90;
display: none;
}
.nav-drawer:not([hidden]){ display: block; }
@media (min-width: 980px){
.nav-drawer:not([hidden]){ display: none; }
}
.nav-drawer-scrim{
position: absolute; inset: 0;
background: rgba(15,15,14,.45);
opacity: 0;
transition: opacity .3s var(--ease-out);
}
.nav-drawer.is-open .nav-drawer-scrim{ opacity: 1; }
.nav-drawer-panel{
position: absolute; top: 0; right: 0; bottom: 0;
width: min(420px, 92vw);
background: var(--paper);
border-left: 1px solid var(--line);
box-shadow: -24px 0 60px rgba(0,0,0,.18);
transform: translateX(100%);
transition: transform .35s var(--ease-out);
display: flex; flex-direction: column;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
}
.nav-drawer.is-open .nav-drawer-panel{ transform: translateX(0); }
.nav-drawer-head{
display: flex; align-items: center; justify-content: space-between;
padding: 18px 22px;
border-bottom: 1px solid var(--line);
position: sticky; top: 0;
background: var(--paper);
z-index: 2;
}
.nav-drawer-close{
display: inline-flex; align-items: center; justify-content: center;
width: 40px; height: 40px;
border: 0; background: var(--mute); color: var(--ink);
border-radius: var(--r-pill); cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: background .2s var(--ease-out);
}
.nav-drawer-close:hover{ background: var(--mute-2, #ebe7da); }
.nav-drawer-nav{
display: flex; flex-direction: column;
padding: 8px 22px 16px;
flex: 1;
}
.nav-drawer-link{
display: flex; align-items: center; justify-content: space-between;
padding: 16px 0;
font-family: var(--sans); font-weight: 500; font-size: 18px;
color: var(--ink);
border-bottom: 1px solid var(--line);
letter-spacing: -0.01em;
}
.nav-drawer-link:hover{ color: var(--accent); }
.nav-drawer-group{
border-bottom: 1px solid var(--line);
}
.nav-drawer-group > summary{
list-style: none;
display: flex; align-items: center; justify-content: space-between;
padding: 16px 0;
font-family: var(--sans); font-weight: 500; font-size: 18px;
color: var(--ink);
cursor: pointer;
letter-spacing: -0.01em;
}
.nav-drawer-group > summary::-webkit-details-marker{ display: none; }
.nav-drawer-group .caret{
width: 10px; height: 10px;
border-right: 1.5px solid var(--ink-2);
border-bottom: 1.5px solid var(--ink-2);
transform: rotate(45deg);
transition: transform .25s var(--ease-out);
margin-right: 4px;
}
.nav-drawer-group[open] .caret{ transform: rotate(-135deg); margin-right: 0; margin-top: 4px; }
.nav-drawer-sub{
padding: 4px 0 18px;
}
.nav-drawer-sub h6{
font-family: var(--mono); font-size: 11px; font-weight: 500;
letter-spacing: .14em; text-transform: uppercase;
color: var(--subtle);
margin: 14px 0 8px;
}
.nav-drawer-sub ul{
list-style: none; padding: 0; margin: 0;
}
.nav-drawer-sub ul li a{
display: block;
padding: 10px 0;
font-size: 15px; color: var(--ink-2); font-weight: 500;
}
.nav-drawer-sub ul li a:hover{ color: var(--accent); }
.nav-drawer-cols{
display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px;
}
.nav-drawer-feature{
display: block;
background: var(--ink); color: var(--paper);
border-radius: var(--r-lg);
padding: 16px 18px;
margin-bottom: 6px;
}
.nav-drawer-feature .tag{
display: inline-block;
font-family: var(--mono); font-size: 10px; letter-spacing: .14em;
text-transform: uppercase; color: var(--accent);
margin-bottom: 8px;
}
.nav-drawer-feature .ttl{
display: block;
font-family: var(--sans); font-weight: 500; font-size: 16px;
line-height: 1.25; letter-spacing: -0.01em;
margin-bottom: 6px;
}
.nav-drawer-feature .lnk{
font-size: 13px; color: var(--accent); font-weight: 500;
}
.nav-drawer-allbtn{
display: inline-flex; align-items: center; gap: 6px;
margin-top: 10px;
font-family: var(--sans); font-weight: 500; font-size: 14px;
color: var(--ink);
border-bottom: 1px solid var(--ink);
padding-bottom: 2px;
}
.nav-drawer-allbtn:hover{ color: var(--accent); border-color: var(--accent); }
.nav-drawer-foot{
border-top: 1px solid var(--line);
padding: 18px 22px 24px;
background: var(--paper-2);
position: sticky; bottom: 0;
}
.nav-drawer-cta{
display: flex; align-items: center; justify-content: center; gap: 8px;
width: 100%;
padding: 16px 20px;
font-size: 15px;
border-radius: var(--r-pill);
}
.nav-drawer-meta{
margin: 12px 0 0; text-align: center;
font-family: var(--mono); font-size: 11px;
letter-spacing: .14em; text-transform: uppercase;
color: var(--subtle);
}
/* Body scroll lock applied while drawer is open */
body.has-drawer-open{ overflow: hidden; touch-action: none; }
/* Work mega menu — wider, with image feature */
.mega.mega-work{
width: min(1100px, calc(100vw - 32px));
grid-template-columns: 1.6fr 1fr;
gap: 32px;
padding: 32px;
/* Align the panel's top edge to the bottom of the .nav-shell — i.e.,
the nav's outer bottom edge, not the link-baseline. Pushes past the
8 px nav padding-bottom so the panel sits cleanly below the bar. */
top: calc(100% + 8px);
}
.mega-work-cols{
display: grid; grid-template-columns: 1fr 1fr 1fr;
gap: 24px;
}
.mega-work-list{
list-style: none; padding: 0; margin: 0;
display: flex; flex-direction: column; gap: 6px;
}
.mega-work-list a{
display: block;
padding: 4px 0;
font-size: 14px; font-weight: 500;
color: var(--ink);
border-bottom: 1px solid var(--line);
transition: color .2s var(--ease-out), border-color .2s var(--ease-out);
}
.mega-work-list a:hover{ color: var(--accent-2); border-color: var(--accent-2); }
.mega-work-services{ display: flex; flex-direction: column; gap: 16px; }
.mega-work-allbtn{
align-self: flex-start; margin-top: 8px;
padding: 8px 16px; font-size: 13px;
}
.mega-work-feature{
border-radius: var(--r-lg); overflow: hidden;
background-size: cover; background-position: center;
color: var(--paper);
padding: 24px;
display: flex; flex-direction: column; justify-content: space-between;
min-height: 360px;
position: relative;
text-decoration: none;
}
.mega-work-feature .tag{
font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .12em;
color: var(--paper);
}
.mega-work-feature .ttl{
font-family: var(--sans); font-weight: 500;
font-size: 18px; line-height: 1.25; letter-spacing: -0.01em;
color: var(--paper);
max-width: 30ch;
}
.mega-work-feature .lnk{
font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .14em;
color: var(--accent-soft); margin-top: 12px;
}
/* Mega menu — anchored to the viewport (not the parent link) so it can
never bleed out the side on a 1280–1440 px MacBook screen. Width is
capped at min(960, viewport - 32) so there's always 16 px of margin
on either side. Heavier blur + slightly higher opacity for legibility
against busy hero imagery. */
.mega{
/* Panel anchored at link-bottom (top: 100%) — extends down through
the nav's padding-bottom and emerges flush with the nav's bottom
edge. No visible gap between the island nav and the panel. */
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%) translateY(-6px);
width: min(960px, calc(100vw - 32px));
background: linear-gradient(180deg,
rgba(247,245,238,.96) 0%,
rgba(247,245,238,.92) 100%);
-webkit-backdrop-filter: saturate(180%) blur(72px);
backdrop-filter: saturate(180%) blur(72px);
border: 1px solid rgba(255,255,255,.78);
border-radius: var(--r-xl);
box-shadow:
0 24px 64px rgba(15,15,14,.20),
0 6px 16px rgba(15,15,14,.10);
padding: 28px;
display: grid; grid-template-columns: 1.2fr 1fr 1fr;
gap: 28px;
opacity: 0; visibility: hidden; pointer-events: none;
transition: opacity .25s var(--ease-out), transform .25s var(--ease-out), visibility .25s;
isolation: isolate;
}
.mega::after{
content: ""; position: absolute; inset: 0;
border-radius: inherit; pointer-events: none;
background: linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 25%);
mix-blend-mode: overlay;
z-index: 1;
}
.mega > *{ position: relative; z-index: 2; }
.has-mega-wrap{ position: relative; }
.has-mega-wrap:hover .mega,
.has-mega-wrap:focus-within .mega{
opacity: 1; visibility: visible; pointer-events: auto;
transform: translateX(-50%) translateY(0);
}
.mega h6{ font-size: 12px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--subtle); margin: 0 0 14px; font-family: var(--mono); font-weight: 500; }
.mega-col ul{ list-style:none; padding:0; margin:0; display: flex; flex-direction: column; gap: 12px; }
.mega-col a{
display: flex; flex-direction: column;
padding: 8px 12px; border-radius: var(--r-md);
transition: background .2s var(--ease-out);
}
.mega-col a:hover{ background: var(--mute); }
.mega-col a strong{ font-weight: 500; color: var(--ink); font-size: 15px; }
.mega-col a span{ color: var(--subtle); font-size: 13px; margin-top: 2px; }
.mega-feature{
background: var(--ink); color: var(--paper);
border-radius: var(--r-lg); padding: 20px; display: flex; flex-direction: column; justify-content: space-between;
background-image: linear-gradient(135deg, rgba(201,83,46,.18) 0%, rgba(15,15,14,0) 60%), url('https://cdn.sanity.io/images/w2xt1cyc/production/ac3ea56999e83964b7648256ac5fcf65af0b4f3e-1920x1080.png?w=900&h=600&fit=crop&auto=format');
background-size: cover; background-position: center;
min-height: 220px;
position: relative; overflow: hidden;
}
.mega-feature::after{
content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(15,15,14,.0) 40%, rgba(15,15,14,.7));
}
.mega-feature > *{ position: relative; z-index: 1; }
.mega-feature .tag{ font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .14em; color: var(--accent-soft); }
.mega-feature .ttl{ font-size: 22px; font-weight: 500; line-height: 1.15; margin-top: 8px; letter-spacing: -0.015em; }
.mega-feature .lnk{ font-size: 13px; opacity: .85; margin-top: 14px; }
/* ──────────────────────────────────────────────────────────────────
HERO — tightened so CTAs sit above the fold on 800–900px viewports
────────────────────────────────────────────────────────────────── */
.hero{
padding: 106px 0 56px;
position: relative;
overflow: hidden;
}
@media (min-width: 1024px){
.hero{ padding: 114px 0 64px; }
}
.hero-grid{
display: grid; grid-template-columns: 1fr;
gap: 36px; align-items: end;
}
@media (min-width: 1024px){
.hero-grid{ grid-template-columns: 1.2fr 1fr; gap: 56px; }
}
.hero-meta{
display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
margin-bottom: 20px;
}
.hero-rating{
display:inline-flex; align-items:center; gap:10px;
background: linear-gradient(180deg, rgba(247,245,238,.62), rgba(247,245,238,.42));
-webkit-backdrop-filter: saturate(180%) blur(20px);
backdrop-filter: saturate(180%) blur(20px);
border: 1px solid rgba(255,255,255,.65);
padding: 8px 14px; border-radius: var(--r-pill);
font-size: 13px;
box-shadow:
0 8px 24px rgba(15,15,14,.08);
position: relative; isolation: isolate;
}
.hero-rating::after{
content:""; position:absolute; inset:0; border-radius: inherit; pointer-events: none;
background: linear-gradient(180deg, rgba(255,255,255,.5) 0%, rgba(255,255,255,0) 32%);
mix-blend-mode: overlay; z-index: 1;
}
.hero-rating > *{ position: relative; z-index: 2; }
.hero-rating strong{ font-weight: 600; }
.hero-shopify{
display:inline-flex; align-items:center; gap:8px;
background: linear-gradient(180deg, rgba(15,15,14,.78), rgba(15,15,14,.62));
-webkit-backdrop-filter: saturate(180%) blur(20px);
backdrop-filter: saturate(180%) blur(20px);
color: var(--paper);
border: 1px solid rgba(247,245,238,.20);
padding: 8px 14px; border-radius: var(--r-pill);
font-size: 12.5px; letter-spacing: .01em;
box-shadow:
0 8px 24px rgba(0,0,0,.18);
position: relative; isolation: isolate;
}
.hero-shopify::after{
content:""; position:absolute; inset:0; border-radius: inherit; pointer-events: none;
background: linear-gradient(180deg, rgba(247,245,238,.22) 0%, rgba(247,245,238,0) 32%);
z-index: 1;
}
.hero-shopify > *{ position: relative; z-index: 2; }
.hero-shopify .dot{ width: 8px; height: 8px; border-radius:50%; background: #95BF47; }
.hero-eyebrow{
margin: 20px 0 14px;
font-size: 14.5px; color: var(--subtle); letter-spacing: -0.005em;
}
.hero h1{ margin-bottom: 22px; }
.hero .lede{ margin-bottom: 28px; font-size: clamp(17px, 1.4vw, 19px); line-height: 1.42; }
.hero-cta{ display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.hero-tertiary{ font-size: 14.5px; color: var(--subtle); border-bottom: 1px solid var(--line); padding-bottom: 2px; transition: color .2s var(--ease-out), border-color .2s var(--ease-out); }
.hero-tertiary:hover{ color: var(--ink); border-color: var(--ink); }
/* Asymmetric design-detail masonry */
.hero-collage{
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-auto-rows: 60px;
gap: 12px;
position: relative;
}
.hero-collage .cell{
border-radius: var(--r-lg);
overflow: hidden;
background: var(--mute);
position: relative;
box-shadow: var(--shadow-1);
transition: transform .6s var(--ease-out);
}
.hero-collage .cell img{ width:100%; height:100%; object-fit: cover; transition: transform 6s linear; }
.hero-collage .cell:hover img{ transform: scale(1.04); }
.cell.c1{ grid-column: 1 / span 4; grid-row: 1 / span 4; }
.cell.c2{ grid-column: 5 / span 2; grid-row: 1 / span 3; }
.cell.c3{ grid-column: 5 / span 2; grid-row: 4 / span 3; }
.cell.c4{ grid-column: 1 / span 2; grid-row: 5 / span 3; }
.cell.c5{ grid-column: 3 / span 2; grid-row: 5 / span 3; }
.hero-collage .badge{
position: absolute; bottom: 10px; left: 10px;
background: linear-gradient(180deg, rgba(247,245,238,.62), rgba(247,245,238,.42));
-webkit-backdrop-filter: saturate(180%) blur(18px);
backdrop-filter: saturate(180%) blur(18px);
border: 1px solid rgba(255,255,255,.55);
font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .12em;
color: var(--ink); padding: 5px 10px; border-radius: var(--r-pill);
box-shadow:
0 4px 14px rgba(15,15,14,.10);
z-index: 3;
}
/* Logo marquee */
.logos{
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
padding: 28px 0;
background: var(--paper);
overflow: hidden;
position: relative;
}
.logos::before, .logos::after{
content:""; position:absolute; top:0; bottom:0; width: 80px; z-index: 2; pointer-events: none;
}
.logos::before{ left:0; background: linear-gradient(90deg, var(--paper), transparent); }
.logos::after{ right:0; background: linear-gradient(-90deg, var(--paper), transparent); }
.logos-track{
display: flex; gap: 64px; align-items: center;
animation: marquee 38s linear infinite;
width: max-content;
}
.logos:hover .logos-track{ animation-play-state: paused; }
.logo-item{
white-space: nowrap;
display: inline-flex; align-items: center; gap: 12px;
color: var(--subtle);
transition: color .35s var(--ease-out), opacity .35s var(--ease-out);
}
.logo-item.logo-text{
font-family: var(--serif); font-style: italic; font-weight: 500;
font-size: 22px; letter-spacing: -0.01em;
opacity: .85;
}
.logo-item.logo-svg{ height: 30px; opacity: .85; }
.logo-item.logo-svg svg{ height: 100%; width: auto; display: block; fill: currentColor; }
.logo-item.logo-svg svg *{ fill: inherit; }
.logo-item.logo-img{ height: 30px; opacity: .85; }
.logo-item.logo-img img{ height: 100%; width: auto; display: block; max-width: 200px; object-fit: contain; }
.logos:hover .logo-item{ opacity: 0.42; }
.logos:hover .logo-item:hover{ color: var(--ink); opacity: 1; }
.logo-item .sep{ width: 6px; height: 6px; border-radius: 50%; background: var(--line); flex-shrink: 0; }
@keyframes marquee{ from{ transform: translateX(0);} to{ transform: translateX(-50%);} }
/* ──────────────────────────────────────────────────────────────────
SECTION SHELL
────────────────────────────────────────────────────────────────── */
section{ padding: 96px 0; }
/* Tighter rhythm on phone-class viewports — 96px feels heavy on a 6-7" screen. */
@media (max-width: 600px){ section{ padding: 64px 0; } }
@media (min-width: 1024px){ section{ padding: 128px 0; } }
.sec-head{ display: grid; grid-template-columns: 1fr; gap: 24px; max-width: 980px; margin-bottom: 56px; }
.sec-head .row{ display: flex; align-items: baseline; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.sec-head p.lede{ color: var(--ink-2); }
/* ──────────────────────────────────────────────────────────────────
POSITIONING STRIP — manifesto (3-col header + 9-col body, per wireframe)
────────────────────────────────────────────────────────────────── */
.positioning{ padding: 96px 0; }
@media (min-width: 1024px){ .positioning{ padding: 128px 0; } }
.positioning-grid{
display: grid; grid-template-columns: 1fr; gap: 32px;
}
@media (min-width: 1024px){
.positioning-grid{ grid-template-columns: 3fr 9fr; gap: 48px; align-items: start; }
}
.positioning-eyebrow{ padding-top: 8px; }
.positioning-body h2{ margin: 0 0 36px; max-width: 22ch; }
.positioning-paras{
display: grid; grid-template-columns: 1fr; gap: 24px;
margin-bottom: 28px;
}
@media (min-width: 768px){
.positioning-paras{ grid-template-columns: 1fr 1fr; gap: 32px; }
}
.positioning-paras p{
font-size: 16.5px; line-height: 1.55;
color: var(--ink-2); margin: 0; max-width: 44ch;
}
/* ──────────────────────────────────────────────────────────────────
SERVICES BENTO — 4-col asymmetric (per wireframe)
────────────────────────────────────────────────────────────────── */
.services-section{ padding-top: 0; }
.services-bento{
display: grid; grid-template-columns: 1fr; gap: 14px;
}
@media (min-width: 768px){
.services-bento{
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: minmax(140px, auto);
gap: 16px;
}
}
.svc-tile{
background: var(--paper-2);
border: 1px solid var(--line);
border-radius: var(--r-xl);
padding: 22px;
display: flex; flex-direction: column; justify-content: space-between;
gap: 16px;
text-decoration: none; color: var(--ink);
transition: transform .35s var(--ease-out), border-color .35s var(--ease-out), box-shadow .35s var(--ease-out);
position: relative;
}
.svc-tile:hover{ border-color: var(--ink); box-shadow: var(--shadow-2); }
.svc-tile.featured{
background: var(--ink); color: var(--paper); border-color: var(--ink);
padding: 32px;
}
@media (min-width: 768px){
.svc-tile.featured{ grid-column: span 2; grid-row: span 2; }
}
.svc-tile.medium{ padding: 24px; }
@media (min-width: 768px){
.svc-tile.medium{ grid-column: span 2; }
}
.svc-tile.small{ /* default span 1 */ }
@media (min-width: 768px){
.svc-tile.small{ grid-column: span 1; }
}
/* Brand Support — tall 1×2, warm accent-soft contrast (lighter than featured dark) */
.svc-tile.tall{
background: var(--accent-soft);
border-color: rgba(201,83,46, 0.32);
padding: 28px;
}
@media (min-width: 768px){
.svc-tile.tall{ grid-column: span 1; grid-row: span 2; padding: 32px; }
}
.svc-tile.tall .svc-tag{ color: var(--accent-2); }
.svc-tile.tall .svc-tile-title{
font-size: clamp(24px, 2vw, 30px);
line-height: 1.1;
letter-spacing: -0.02em;
color: var(--ink);
}
.svc-tile.tall .svc-tile-title .it{ font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--accent-2); }
.svc-tile.tall p{
color: var(--ink-2);
font-size: 14.5px; line-height: 1.5;
max-width: 28ch;
margin-top: 12px;
}
.svc-tile.tall .svc-tile-link{
color: var(--accent-2);
border-color: var(--accent-2);
opacity: 1;
font-weight: 500;
}
.svc-tile.tall:hover{ border-color: var(--accent-2); }
.svc-tag{
font-family: var(--mono); font-size: 11px; text-transform: uppercase;
letter-spacing: .14em; color: var(--accent);
display: inline-block;
}
.svc-marker{
font-family: var(--serif); color: var(--accent);
font-size: 16px; line-height: 1;
display: inline-block;
}
.svc-tile.featured .svc-marker{ color: var(--accent); }
.svc-tile-title{
font-family: var(--sans); font-weight: 500;
margin: 12px 0 10px;
letter-spacing: -0.02em; line-height: 1.1;
}
.svc-tile.featured .svc-tile-title{
font-size: clamp(28px, 3vw, 44px);
}
.svc-tile.featured .svc-tile-title .it{
font-family: var(--serif); font-style: italic; font-weight: 400;
color: var(--accent);
}
.svc-tile.medium .svc-tile-title{ font-size: 22px; }
.svc-tile-title-sm{
font-family: var(--sans); font-weight: 500;
font-size: 17px; line-height: 1.18;
margin: 10px 0 6px;
letter-spacing: -0.01em;
}
.svc-tile p{ margin: 0; color: var(--subtle); font-size: 13.5px; line-height: 1.5; }
.svc-tile.featured p{ color: rgba(247,245,238,.78); font-size: 16px; max-width: 36ch; line-height: 1.5; margin-top: 8px; }
.svc-tile.medium p{ font-size: 14.5px; }
.svc-tile.small p{ font-size: 13px; }
.svc-tile-link{
display: inline-flex; align-items: center; gap: 6px;
font-family: var(--sans); font-weight: 500; font-size: 13px;
color: inherit; opacity: .85;
border-bottom: 1px solid currentColor; padding-bottom: 2px;
align-self: flex-start;
transition: opacity .25s var(--ease-out);
}
.svc-tile.featured .svc-tile-link{ font-size: 14px; opacity: 1; color: var(--paper); }
.svc-tile-link .arr{ display: inline-block; transition: transform .25s var(--ease-out); }
.svc-tile:hover .svc-tile-link{ opacity: 1; }
.svc-tile:hover .svc-tile-link .arr{ transform: translateX(3px); }
/* ──────────────────────────────────────────────────────────────────
POSITIONING — bento (legacy class kept for any other usage)
────────────────────────────────────────────────────────────────── */
.bento{
display: grid; grid-template-columns: 1fr; gap: 16px;
}
@media (min-width: 768px){ .bento{ grid-template-columns: repeat(6, 1fr); } }
.tile{
background: var(--paper-2);
border: 1px solid var(--line);
border-radius: var(--r-xl);
padding: 32px;
display: flex; flex-direction: column; gap: 20px;
transition: transform .3s var(--ease-out), border-color .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.tile:hover{ border-color: var(--ink); box-shadow: var(--shadow-2); }
.tile.dark{ background: var(--ink); color: var(--paper); border-color: var(--ink); }
.tile.dark .small{ color: rgba(247,245,238,.7); }
.tile.accent{ background: var(--accent-soft); border-color: var(--accent-soft); }
.tile h3{ font-weight: 500; }
.tile.t1{ grid-column: span 6; }
.tile.t2{ grid-column: span 6; }
.tile.t3{ grid-column: span 6; }
.tile.t4{ grid-column: span 6; }
@media (min-width: 768px){
.tile.t1{ grid-column: span 4; }
.tile.t2{ grid-column: span 2; }
.tile.t3{ grid-column: span 3; }
.tile.t4{ grid-column: span 3; }
}
.tile .icon{
width: 44px; height:44px; border-radius: var(--r-md);
background: var(--mute); display: inline-flex; align-items:center; justify-content:center;
color: var(--ink);
}
.tile.dark .icon{ background: rgba(247,245,238,.1); color: var(--paper); }
/* ──────────────────────────────────────────────────────────────────
FEATURED CASE STUDY — Sorella
────────────────────────────────────────────────────────────────── */
/* Card shell — guard against overflow at every breakpoint. */
.feat{
background: var(--ink); color: var(--paper);
border-radius: var(--r-xl);
padding: 24px 20px; overflow: hidden; position: relative;
box-sizing: border-box; max-width: 100%;
}
@media (min-width: 768px){ .feat{ padding: 36px 32px; } }
@media (min-width: 1024px){ .feat{ padding: 44px; } }
/*
* Mobile/tablet — stacked. Desktop — 2-col with left media filling the
* full card height (align-items: stretch). The text column flexes its
* content to vertically center, so the card reads compact even when
* the content stack is shorter than the editorial photo grid.
*/
.feat-grid{
display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: start;
}
@media (min-width: 768px){ .feat-grid{ gap: 36px; } }
@media (min-width: 1024px){
.feat-grid{
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 48px;
align-items: stretch;
}
.feat-grid > div:not(.feat-media){
display: flex; flex-direction: column; justify-content: center;
min-width: 0;
}
}
/*
* Mobile (<1024px): m1 full-width banner on top, m2+m3 side-by-side below.
*
* Desktop (≥1024px): asymmetric bento — m1 is the tall left hero, m2 is
* the medium-tall top-right tile, m3 is the shorter bottom-right tile.
* Asymmetry comes from grid-template-rows: 1.4fr 1fr (top row taller) so
* m2 reads larger than m3 instead of two stacked equals. Whole grid
* fills the card height (height: 100%) so the lower-left "gap" is gone.
*/
.feat-media{
display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
min-width: 0;
}
.feat-media .m{
border-radius: var(--r-lg); overflow:hidden; background: var(--ink-2);
position: relative;
}
.feat-media .m img{ width:100%; height:100%; object-fit: cover; }
.feat-media .m1{ grid-column: 1 / span 2; aspect-ratio: 4 / 3; }
.feat-media .m2{ aspect-ratio: 3 / 4; }
.feat-media .m3{ aspect-ratio: 3 / 4; }
@media (min-width: 1024px){
.feat-media{
grid-template-columns: 1.4fr 1fr;
grid-template-rows: 1.4fr 1fr;
gap: 12px;
height: 100%; min-height: 480px;
}
.feat-media .m1{ grid-column: 1; grid-row: 1 / span 2; aspect-ratio: auto; }
.feat-media .m2{ grid-column: 2; grid-row: 1; aspect-ratio: auto; }
.feat-media .m3{ grid-column: 2; grid-row: 2; aspect-ratio: auto; }
}
.feat .tag-row{ display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.feat .chip-dark{
background: linear-gradient(180deg, rgba(247,245,238,.18), rgba(247,245,238,.08));
-webkit-backdrop-filter: saturate(180%) blur(20px);
backdrop-filter: saturate(180%) blur(20px);
color: var(--paper);
border: 1px solid rgba(247,245,238,.22);
font-size: 12px; letter-spacing: -0.005em;
padding: 6px 12px; border-radius: var(--r-pill);
box-shadow: 0 4px 14px rgba(0,0,0,.16);
position: relative;
white-space: nowrap;
}
.feat h2{
color: var(--paper); margin-bottom: 18px;
overflow-wrap: break-word; word-break: break-word;
}
/* Tighter h2 on desktop so the card stays inside a viewport height. */
@media (min-width: 1024px){
.feat h2{ font-size: clamp(30px, 3.1vw, 42px); line-height: 1.06; margin-bottom: 14px; }
}
.feat .narrative{
color: rgba(247,245,238,.78); max-width: none;
overflow-wrap: break-word;
}
@media (min-width: 1024px){
.feat .narrative{ font-size: 15px; line-height: 1.55; }
}
/* KPI rail — 2-col mobile, 3-col tablet+. Smaller value font on mobile so
* "+155.5%" doesn't blow past its column. */
.feat-kpis{
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px 14px; margin: 28px 0;
padding-top: 22px; border-top: 1px solid rgba(247,245,238,.16);
}
@media (min-width: 768px){
.feat-kpis{ grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 20px; margin: 32px 0; padding-top: 24px; }
}
@media (min-width: 1024px){
/* Tighter desktop rhythm — collapses ~24 px out of the rail. */
.feat-kpis{ gap: 14px 18px; margin: 22px 0; padding-top: 18px; }
}
.feat-kpis > div{ min-width: 0; }
.feat-kpis .kpi-num{
color: var(--paper); font-size: clamp(28px, 7vw, 56px);
/* Keep "+155.5%" on a single line — no widow %. Tabular numerals
pack the digits tighter so 4-digit values still fit the column. */
white-space: nowrap;
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum";
}
@media (min-width: 1024px){ .feat-kpis .kpi-num{ font-size: clamp(32px, 3.4vw, 44px); } }
.feat-kpis .kpi-lbl{
font-family: var(--mono); font-size: 11px; text-transform: uppercase;
letter-spacing: .14em; color: rgba(247,245,238,.6); margin-top: 6px;
overflow-wrap: break-word;
}
.feat-quote{
font-family: var(--serif); font-style: italic; font-weight: 400;
font-size: 18px; line-height: 1.4; color: var(--paper);
border-left: 2px solid var(--accent); padding-left: 16px; margin: 0 0 14px;
}
@media (min-width: 768px){ .feat-quote{ font-size: 20px; padding-left: 18px; } }
@media (min-width: 1024px){
.feat-quote{ font-size: 16px; line-height: 1.45; padding-left: 14px; margin: 0 0 8px; }
}
.feat-attrib{ font-size: 13px; color: rgba(247,245,238,.6); }
@media (min-width: 1024px){ .feat-attrib{ font-size: 12px; } }
/* CTAs — stacked full-width on mobile, side-by-side from 768 px. */
.feat-cta{ display: flex; flex-direction: column; gap: 10px; margin-top: 24px; }
.feat-cta .btn{ width: 100%; justify-content: center; }
@media (min-width: 768px){
.feat-cta{ flex-direction: row; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.feat-cta .btn{ width: auto; }
}
@media (min-width: 1024px){ .feat-cta{ margin-top: 20px; } }
.feat .btn-paper{ background: var(--paper); color: var(--ink); }
.feat .btn-paper:hover{ background: #fff; }
.feat .btn-outline{ background: transparent; color: var(--paper); border-color: rgba(247,245,238,.2); }
.feat .btn-outline:hover{ background: rgba(247,245,238,.06); }
/* ──────────────────────────────────────────────────────────────────
PROCESS — horizontal steps
────────────────────────────────────────────────────────────────── */
.proc-grid{
display: grid; grid-template-columns: 1fr; gap: 18px;
}
@media (min-width: 768px){ .proc-grid{ grid-template-columns: repeat(4, 1fr); gap: 16px; } }
.step{
background: var(--paper-2);
border: 1px solid var(--line);
border-radius: var(--r-lg);
padding: 24px;
display: flex; flex-direction: column; gap: 14px;
position: relative; min-height: 220px;
transition: transform .3s var(--ease-out), border-color .3s var(--ease-out);
}
.step:hover{ border-color: var(--ink); }
.step .num{
font-family: var(--mono); font-size: 11px; letter-spacing: .14em;
text-transform: uppercase; color: var(--accent);
}
.step h4{ font-weight: 500; }
.step p{ color: var(--subtle); font-size: 14.5px; line-height: 1.5; margin: 0; }
.step .dur{
margin-top: auto; font-family: var(--mono); font-size: 11.5px;
color: var(--subtle); letter-spacing: .04em;
}
/* ──────────────────────────────────────────────────────────────────
CASE STUDY GRID
────────────────────────────────────────────────────────────────── */
.cs-filter{
display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 32px;
}
.cs-filter .pill{
padding: 8px 14px; border-radius: var(--r-pill);
background: var(--paper-2); border: 1px solid var(--line);
font-size: 13px; color: var(--ink); cursor: pointer;
transition: background .2s var(--ease-out), color .2s var(--ease-out), border-color .2s var(--ease-out);
}
.cs-filter .pill.active{ background: var(--ink); color: var(--paper); border-color: var(--ink); }
.cs-filter .pill:hover:not(.active){ border-color: var(--ink); }
.cs-grid{
display: grid; grid-template-columns: 1fr; gap: 20px;
}
@media (min-width: 768px){ .cs-grid{ grid-template-columns: repeat(6, 1fr); gap: 20px; } }
/* Wireframe-aligned 6-col asymmetric: 1 featured 3-span + mix of 2x1 and 1x1.
Visual chrome (image-led overlay, tag row, body, etc.) is shared with
the work archive .post — see the unified card-chrome rules later in
this file. Only the GRID layout sizes live here.
Aspect ratios are chosen so each tile lands at ~440–476 px tall — the
same target the work archive grid uses — so cards across the two
surfaces read at one consistent height regardless of column span. */
.case.k-feat{ grid-column: span 6; aspect-ratio: 16/9; }
.case.k-2x1{ grid-column: span 6; aspect-ratio: 16/10; }
.case.k-1x1{ grid-column: span 6; aspect-ratio: 4/5; }
@media (min-width: 768px){
/* k-feat (3 of 6 cols ≈ 580w) × 4/3 → 435h (matches archive size-half).
k-2x1 (2 of 6 cols ≈ 381w) × 4/5 → 476h (matches archive size-third).
k-1x1 (1 of 6 cols ≈ 181w) × 2/5 → 452h (similar height, narrow tile). */
.case.k-feat{ grid-column: span 3; aspect-ratio: 4/3; }
.case.k-2x1{ grid-column: span 2; aspect-ratio: 4/5; }
.case.k-1x1{ grid-column: span 1; aspect-ratio: 2/5; }
}
/* Legacy classes for safety */
.case.k1, .case.k2, .case.k3, .case.k4{ grid-column: span 6; }
/* ──────────────────────────────────────────────────────────────────
SHOPIFY SPOTLIGHT — Blueprint
────────────────────────────────────────────────────────────────── */
.shop{
background: var(--forest); color: var(--paper);
border-radius: var(--r-xl); padding: 48px 32px;
position: relative; overflow: hidden;
}
@media (min-width: 768px){ .shop{ padding: 72px 56px; } }
/* .shop static blob removed — superseded by .cursor-glow system */
.shop-grid{
display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center;
position: relative; z-index: 1;
}
@media (min-width: 1024px){ .shop-grid{ grid-template-columns: 1.1fr 1fr; gap: 72px; } }
.shop .badge{
display: inline-flex; align-items:center; gap: 8px;
background: rgba(149,191,71,.18); color: #C7E58E;
padding: 6px 12px; border-radius: var(--r-pill);
font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: .12em;
margin-bottom: 20px;
}
.shop .badge .dot{ width: 8px; height: 8px; border-radius: 50%; background: #95BF47; }
.shop h2{ color: var(--paper); margin-bottom: 20px; }
.shop p.lede{ color: rgba(247,245,238,.78); }
.shop .deliverables{
list-style: none; padding: 0; margin: 28px 0 0;
display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px;
}
.shop .deliverables li{
font-size: 14.5px; color: rgba(247,245,238,.85);
display: flex; align-items: flex-start; gap: 10px;
}
.shop .deliverables li::before{
content: ""; width: 6px; height:6px; border-radius:50%;
background: #95BF47; margin-top: 8px; flex-shrink: 0;
}
.shop .price{
display: flex; align-items: center; gap: 14px;
padding: 24px 0; border-top: 1px solid rgba(247,245,238,.16);
margin-top: 32px;
}
.shop .price .num{ font-size: 44px; font-weight: 500; letter-spacing: -0.03em; line-height: 1; }
.shop .price .desc{ color: rgba(247,245,238,.6); font-size: 14px; }
.shop .cta-row{ display: flex; gap: 12px; flex-wrap: wrap; }
.shop .btn-paper{ background: var(--paper); color: var(--ink); }
.shop .btn-paper:hover{ background:#fff; }
.shop .btn-outline{ background: transparent; color: var(--paper); border-color: rgba(247,245,238,.22); }
.shop .btn-outline:hover{ background: rgba(247,245,238,.06); }
.shop-card{
background: linear-gradient(180deg,
rgba(247,245,238,.16) 0%,
rgba(247,245,238,.06) 100%);
-webkit-backdrop-filter: saturate(180%) blur(28px);
backdrop-filter: saturate(180%) blur(28px);
border: 1px solid rgba(247,245,238,.24);
border-radius: var(--r-lg);
padding: 28px;
position: relative;
isolation: isolate;
box-shadow:
0 18px 48px rgba(0,0,0,.32);
transition:
transform .35s var(--ease-out),
box-shadow .35s var(--ease-out),
border-color .35s var(--ease-out);
}
.shop-card::after{
content: ""; position: absolute; inset: 0;
border-radius: inherit; pointer-events: none;
background: linear-gradient(180deg, rgba(247,245,238,.26) 0%, rgba(247,245,238,0) 30%);
z-index: 1;
}
.shop-card > *{ position: relative; z-index: 2; }
.shop-card:hover{
border-color: rgba(247,245,238,.34);
box-shadow:
0 24px 64px rgba(0,0,0,.40);
}
.shop-card .h{ font-size: 13px; color: rgba(247,245,238,.6); font-family: var(--mono); text-transform: uppercase; letter-spacing: .12em; margin-bottom: 20px; }
.shop-card .row{ display: flex; justify-content: space-between; padding: 14px 0; border-bottom: 1px dashed rgba(247,245,238,.12); }
.shop-card .row:last-child{ border-bottom: 0; }
.shop-card .row .l{ color: rgba(247,245,238,.7); font-size: 14px; }
.shop-card .row .r{ color: var(--paper); font-size: 14px; font-weight: 500; }
.shop-card .row .r .it{ font-family: var(--serif); font-style: italic; color: #C7E58E; }
/* ──────────────────────────────────────────────────────────────────
SHOPIFY EDITIONS SPOTLIGHT — platform-current capability cards
────────────────────────────────────────────────────────────────── */
.shop-partner{
display: inline-flex; align-items: center; gap: 8px;
padding: 6px 12px;
background: rgba(149,191,71,.10);
color: #4F7228;
border: 1px solid rgba(149,191,71,.40);
border-radius: var(--r-pill);
font-family: var(--mono); font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em; font-weight: 500;
}
.shop-partner svg{ flex-shrink: 0; }
.editions-grid{
display: grid; grid-template-columns: 1fr; gap: 18px;
}
@media (min-width: 768px){
.editions-grid{ grid-template-columns: repeat(3, 1fr); gap: 20px; }
}
.edition{
background: var(--paper-2);
border: 1px solid var(--line);
border-radius: var(--r-xl);
padding: 28px;
display: flex; flex-direction: column; gap: 16px;
transition: transform .35s var(--ease-out), border-color .35s var(--ease-out), box-shadow .35s var(--ease-out);
position: relative;
}
.edition:hover{
border-color: var(--ink);
box-shadow: var(--shadow-2);
}
.edition-head{
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 4px;
}
.edition-tag{
display: inline-flex; align-items: center; gap: 8px;
font-family: var(--mono); font-size: 11.5px; text-transform: uppercase; letter-spacing: .12em;
color: var(--subtle); font-weight: 500;
}
.edition-tag .shop-dot{
width: 8px; height: 8px; border-radius: 50%;
background: #95BF47;
box-shadow: 0 0 0 4px rgba(149,191,71,.18);
display: inline-block;
}
.edition-icon{
width: 40px; height: 40px;
border-radius: var(--r-md);
background: rgba(149,191,71,.10);
color: #4F7228;
display: inline-flex; align-items: center; justify-content: center;
border: 1px solid rgba(149,191,71,.30);
flex-shrink: 0;
transition: background .3s var(--ease-out), color .3s var(--ease-out), transform .35s var(--ease-out);
}
.edition-tag{ min-width: 0; }
.edition:hover .edition-icon{
background: #95BF47;
color: var(--paper);
transform: rotate(-6deg) scale(1.05);
}
.edition h4{
font-weight: 500;
line-height: 1.18;
letter-spacing: -0.01em;
}
.edition h4 .it{ font-family: var(--serif); font-style: italic; font-weight: 400; }
.edition p{
color: var(--subtle);
font-size: 14.5px; line-height: 1.55;
margin: 0;
}
.edition .btn-link{ margin-top: auto; }
/* ──────────────────────────────────────────────────────────────────
TESTIMONIALS
────────────────────────────────────────────────────────────────── */
.testi-grid{
display: grid; grid-template-columns: 1fr; gap: 20px;
}
@media (min-width: 768px){ .testi-grid{ grid-template-columns: repeat(3, 1fr); } }
/*
* Masonry variant — CSS multi-column flow. Cards retain natural height
* so quotes of varying length stack with no gaps. break-inside: avoid
* keeps a card from splitting across columns. column-fill: balance
* keeps the columns roughly even-height.
*/
.testi-grid.is-masonry{
display: block;
column-count: 1;
column-gap: 20px;
}
@media (min-width: 768px){
.testi-grid.is-masonry{ column-count: 2; }
}
@media (min-width: 1024px){
.testi-grid.is-masonry{ column-count: 3; }
}
.testi-grid.is-masonry .testi{
break-inside: avoid;
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
margin: 0 0 20px;
display: block; /* Override flex so column-fill measures cleanly. */
}
.testi-grid.is-masonry .testi > * + *{ margin-top: 18px; }
.testi{
background: var(--paper-2);
border: 1px solid var(--line);
border-radius: var(--r-xl); padding: 28px;
display: flex; flex-direction: column; gap: 18px;
transition: transform .3s var(--ease-out), border-color .3s var(--ease-out);
}
.testi:hover{ border-color: var(--ink); }
.testi .quote{
font-family: var(--serif); font-style: italic; font-weight: 400;
font-size: 19px; line-height: 1.45; color: var(--ink);
}
.testi .who{ display: flex; align-items: center; gap: 12px; margin-top: auto; }
.testi .who .av{ width: 40px; height:40px; border-radius:50%; background: var(--mute); overflow: hidden; flex-shrink: 0; }
.testi .who .av img{ width:100%; height:100%; object-fit: cover; }
.testi .who .nm{ font-weight: 500; font-size: 14.5px; }
.testi .who .ti{ font-size: 12.5px; color: var(--subtle); }
.awards-bar{
margin-top: 56px;
display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
gap: 14px 20px;
font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
color: var(--subtle);
}
.awards-bar .sep{ color: var(--line); }
/* ──────────────────────────────────────────────────────────────────
INSIGHTS / BLOG FEED — editorial covers w/ overlay
────────────────────────────────────────────────────────────────── */
.ins-head-cta{ display: inline-flex; gap: 10px; flex-wrap: wrap; }
.ins-grid{
display: grid; grid-template-columns: 1fr; gap: 24px;
}
@media (min-width: 768px){ .ins-grid{ grid-template-columns: repeat(3, 1fr); gap: 24px; } }
.ins{
position: relative;
display: block;
aspect-ratio: 3/4;
border-radius: var(--r-xl);
overflow: hidden;
background: var(--ink-2);
cursor: pointer;
isolation: isolate;
transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
}
.ins:hover{ box-shadow: var(--shadow-3); }
.ins .img{
position: absolute; inset: 0;
overflow: hidden;
z-index: 1;
}
.ins .img img{
width: 100%; height: 100%; object-fit: cover;
transition: transform 1.2s var(--ease-out), filter .6s var(--ease-out);
filter: saturate(0.92) contrast(1.02);
}
.ins:hover .img img{
transform: scale(1.06);
filter: saturate(1) contrast(1.05);
}
/* Overlay layers — three stacked tints + gradient + grain for editorial feel */
.ins .overlay{
position: absolute; inset: 0; z-index: 2; pointer-events: none;
/* Warm bottom-up gradient (always visible) — plus a soft top vignette */
background:
linear-gradient(180deg, rgba(15,15,14,.42) 0%, rgba(15,15,14,0) 22%, rgba(15,15,14,0) 45%, rgba(15,15,14,.78) 88%, rgba(15,15,14,.94) 100%),
radial-gradient(120% 80% at 50% 100%, rgba(201,83,46,.18), transparent 60%);
transition: opacity .5s var(--ease-out);
mix-blend-mode: multiply;
}
/* Accent wash that lifts on hover — deepens the overlay slightly */
.ins .overlay::after{
content: ""; position: absolute; inset: 0;
background: linear-gradient(135deg, rgba(201,83,46,.0) 0%, rgba(201,83,46,.0) 60%, rgba(201,83,46,.22) 100%);
opacity: 0;
transition: opacity .55s var(--ease-out);
}
.ins:hover .overlay::after{ opacity: 1; }
/* Grain texture overlay — adds tactile feel */
.ins .grain{
position: absolute; inset: 0; z-index: 3; pointer-events: none;
background-image: url("data:image/svg+xml;utf8,");
opacity: 0.5;
mix-blend-mode: overlay;
}
/* Top-left tag chip */
.ins .tag-row{
position: absolute; top: 18px; left: 18px; right: 18px;
display: flex; justify-content: space-between; align-items: flex-start;
z-index: 4;
}
.ins .tag{
display: inline-flex; align-items: center; gap: 6px;
background: rgba(247,245,238,.94);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
color: var(--ink);
padding: 6px 12px; border-radius: var(--r-pill);
font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .12em;
font-weight: 500;
}
.ins .tag.cat-strategy .swatch{ background: var(--accent); }
.ins .tag.cat-shopify .swatch{ background: #95BF47; }
.ins .tag.cat-growth .swatch{ background: var(--ink); }
.ins .tag .swatch{ width: 6px; height: 6px; border-radius: 50%; background: var(--accent); display: inline-block; }
.ins .meta-time{
font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
color: rgba(247,245,238,.86);
text-shadow: 0 1px 8px rgba(15,15,14,.5);
}
/* Bottom title overlay (always visible) */
.ins .body{
position: absolute; left: 24px; right: 24px; bottom: 24px;
z-index: 4;
color: var(--paper);
}
.ins .body h3,
.ins .body h4{
font-family: var(--sans); font-weight: 500;
font-size: clamp(20px, 1.7vw, 24px);
line-height: 1.18; letter-spacing: -0.015em;
color: var(--paper);
margin: 0 0 12px;
text-wrap: balance;
}
.ins .body h3 .it,
.ins .body h4 .it{
font-family: var(--serif); font-style: italic; font-weight: 400;
}
.ins .body .read{
display: inline-flex; align-items: center; gap: 8px;
font-family: var(--sans); font-size: 13.5px; font-weight: 500;
color: var(--paper);
border-bottom: 1px solid rgba(247,245,238,.5);
padding-bottom: 3px;
opacity: 0;
transform: translateY(8px);
transition: opacity .45s var(--ease-out), transform .45s var(--ease-out), border-color .25s var(--ease-out);
}
.ins .body .read .arr{
display: inline-block; transition: transform .35s var(--ease-out);
}
.ins:hover .body .read{
opacity: 1; transform: translateY(0);
border-color: var(--paper);
}
.ins:hover .body .read .arr{ transform: translateX(4px); }
.ins:focus-visible{ outline: 3px solid var(--accent); outline-offset: 4px; }
.ins:focus-visible .body .read{ opacity: 1; transform: translateY(0); }
/* ──────────────────────────────────────────────────────────────────
FINAL CTA
────────────────────────────────────────────────────────────────── */
.final{
background: var(--ink); color: var(--paper);
border-radius: var(--r-xl);
padding: 72px 32px; text-align: center;
position: relative; overflow: hidden;
}
@media (min-width: 768px){ .final{ padding: 120px 48px; } }
/* .final static blobs removed — superseded by .cursor-glow.dual system */
.final .inner{ position: relative; z-index: 1; max-width: 760px; margin: 0 auto; }
.final h2{ color: var(--paper); margin-bottom: 24px; }
.final p{ color: rgba(247,245,238,.78); font-size: 18px; max-width: 56ch; margin: 0 auto 36px; }
.final .row{ display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
/* ──────────────────────────────────────────────────────────────────
FOOTER
────────────────────────────────────────────────────────────────── */
footer{
background: var(--paper);
padding: 72px 0 40px;
border-top: 1px solid var(--line);
}
.footer-grid{
display: grid; grid-template-columns: 1fr; gap: 40px;
margin-bottom: 56px;
}
@media (min-width: 768px){ .footer-grid{ grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: 32px; } }
.footer-brand p{ color: var(--subtle); font-size: 14.5px; max-width: 30ch; margin: 12px 0 24px; }
.footer-newsletter{
display: flex; align-items: center; gap: 8px;
background: var(--paper-2);
border: 1px solid var(--line);
border-radius: var(--r-pill);
padding: 6px 6px 6px 18px;
max-width: 360px;
}
.footer-newsletter input{
flex: 1; background: transparent; border: 0; outline: 0;
font-family: var(--sans); font-size: 14px; color: var(--ink);
padding: 6px 0;
min-width: 0;
}
.footer-newsletter input::placeholder{ color: var(--subtle); }
.footer-newsletter .btn{ padding: 10px 16px; font-size: 13px; }
/* Oversized footer wordmark — actual SVG wordmark, per wireframe */
.footer-wordmark{
display: block;
margin: 72px auto 36px;
padding: 0 8px;
color: var(--mute-2, #DCD2B5);
user-select: none;
overflow: hidden;
}
.footer-wordmark svg{
display: block;
width: 100%;
height: auto;
max-width: 100%;
}
.footer-col h6,
.footer-col .footer-col-title{
font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
color: var(--subtle); margin: 0 0 18px; font-family: var(--mono); font-weight: 500;
line-height: 1.2;
}
.footer-col ul{ list-style: none; padding:0; margin:0; display: flex; flex-direction: column; gap: 12px; }
.footer-col a{ font-size: 14.5px; color: var(--ink); transition: color .2s var(--ease-out); }
.footer-col a:hover{ color: var(--accent); }
.footer-bottom{
display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between;
padding-top: 32px; border-top: 1px solid var(--line);
font-size: 13px; color: var(--subtle);
}
.footer-bottom .legal{ display: flex; gap: 18px; flex-wrap: wrap; }
/* ──────────────────────────────────────────────────────────────────
STICKY BUBBLE
────────────────────────────────────────────────────────────────── */
.bubble{
position: fixed; right: 24px; bottom: 24px; z-index: 40;
background: linear-gradient(180deg,
rgba(15,15,14,.78) 0%,
rgba(15,15,14,.62) 100%);
-webkit-backdrop-filter: saturate(180%) blur(22px);
backdrop-filter: saturate(180%) blur(22px);
color: var(--paper);
border: 1px solid rgba(247,245,238,.18);
border-radius: 999px;
padding: 6px 32px 6px 6px;
font-size: 14px; font-weight: 500; line-height: 1;
box-shadow: 0 14px 40px rgba(0,0,0,.36);
display: inline-flex; align-items: center; gap: 12px;
isolation: isolate;
height: 52px;
box-sizing: border-box;
transition: transform .25s var(--ease-out), background .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.bubble::after{
content: ""; position: absolute; inset: 0;
border-radius: inherit; pointer-events: none;
background: linear-gradient(180deg, rgba(247,245,238,.22) 0%, rgba(247,245,238,0) 30%);
z-index: 1;
}
.bubble > *{ position: relative; z-index: 2; }
.bubble:hover{
transform: translateY(-2px);
background: linear-gradient(180deg, rgba(15,15,14,.84), rgba(15,15,14,.70));
border-color: rgba(247,245,238,.28);
box-shadow: 0 18px 48px rgba(0,0,0,.42);
}
/*
* Avatar sits in the flex flow (no absolute positioning). At pill height
* 52px and avatar 40px, padding-left of 6px gives a clean 6px collar
* around the avatar. flex-shrink: 0 keeps it from collapsing on small
* viewports.
*/
.bubble .ava{
width: 40px; height: 40px; border-radius: 50%; overflow: hidden;
background: var(--mute); flex-shrink: 0;
}
.bubble .ava img{ width:100%; height:100%; object-fit: cover; display: block; }
.bubble > span:not(.ava):not(.pulse){
display: inline-flex; align-items: center;
padding-block: 1px; /* optical-baseline nudge so the cap-height sits on center */
}
.bubble .pulse{
position: absolute; top: 50%; right: 14px;
width: 8px; height: 8px; border-radius: 50%; background: #95BF47;
transform: translateY(-50%);
margin: 0;
}
.bubble .pulse::after{
content:""; position:absolute; inset:-4px; border-radius:50%;
background: rgba(149,191,71,.4); animation: pulse 1.6s ease-out infinite;
}
@keyframes pulse{ 0%{ transform: scale(1); opacity:.7;} 100%{ transform: scale(2.4); opacity: 0;} }
/* ──────────────────────────────────────────────────────────────────
MOTION SYSTEM
────────────────────────────────────────────────────────────────── */
/* Custom cursor — soft outlined ring, no dot, multiply-blended for refinement */
.cursor-ring{
position: fixed; top: 0; left: 0;
width: 28px; height: 28px;
border: 2px solid var(--ink);
border-radius: 50%;
pointer-events: none;
z-index: 999;
transform: translate(-50%, -50%);
transition: width .35s var(--ease-out), height .35s var(--ease-out),
background .35s var(--ease-out), border-color .35s var(--ease-out),
opacity .25s var(--ease-out);
opacity: 0;
will-change: transform, width, height;
}
.cursor-ring.ready{ opacity: 1; }
.cursor-ring.over{
width: 64px; height: 64px;
background: rgba(247,245,238,.96);
border-color: var(--ink);
}
.cursor-ring.click{
width: 44px; height: 44px;
}
@media (max-width: 768px), (hover: none){
.cursor-ring{ display: none; }
}
html.has-cursor body{ cursor: none; }
html.has-cursor body button,
html.has-cursor body a{ cursor: none; }
/* Magnetic hover — applied via JS to [data-magnet] elements */
[data-magnet]{
transition: transform .35s var(--ease-out);
will-change: transform;
}
/* Kinetic H1 line wrapper.
Originally had overflow:hidden + padding-bottom to mask the slide-up
reveal animation (each .kinetic-word starts translateY(115%)).
The animation has been disabled site-wide via the #kineticH1
override at the bottom of this stylesheet (animation: none !important;
transform: none !important), so the overflow:hidden masking is no
longer doing anything useful — it was only clipping italic Fraunces
descenders ("g" tail in "engineered", "p" in "playbooks", "y" tail in
"Klaviyo") on services-hero font sizes (clamp peaks 76px). Dropping
overflow:hidden lets descenders render fully; display:block keeps
each line on its own row so the lede sits below cleanly. */
.kinetic-line{ display: block; text-wrap: balance; }
.kinetic-word{
display: inline-block;
transform: translateY(115%);
opacity: 0;
transition: transform .9s var(--ease-out), opacity .9s var(--ease-out);
will-change: transform, opacity;
}
.kinetic-word.in{ transform: translateY(0); opacity: 1; }
/* Nav hide-on-scroll-down */
.nav-shell{ transition: transform .35s var(--ease-out), top .3s var(--ease-out); }
.nav-shell.hide{ transform: translateY(-150%); }
/* Hero collage parallax */
.hero-collage .cell{ will-change: transform; }
.hero-collage .cell[data-parallax]{
transition: transform .15s linear;
}
/* ── CURSOR-REACTIVE GRADIENT BACKGROUNDS ─────────────────────────
Two CSS vars (--gx, --gy) updated per-element via JS.
Defaults to centered glow when cursor isn't tracking the section. */
.cursor-glow{
position: relative;
isolation: isolate;
--gx: 50%; --gy: 50%;
--glow-1: rgba(201,83,46, 0.32); /* primary (warm rust default) */
--glow-2: rgba(149,191,71, 0.18); /* secondary (soft green) */
--glow-size-1: 560px;
--glow-size-2: 420px;
--glow-fade-1: 58%;
--glow-fade-2: 60%;
overflow: hidden;
}
.cursor-glow > *{ position: relative; z-index: 2; }
.cursor-glow::before{
content: "";
position: absolute; inset: 0;
z-index: 0;
background: radial-gradient(
var(--glow-size-1) circle at var(--gx) var(--gy),
var(--glow-1),
transparent var(--glow-fade-1)
);
pointer-events: none;
transition: background 140ms linear;
}
.cursor-glow.dual::after{
content: "";
position: absolute; inset: 0;
z-index: 0;
background: radial-gradient(
var(--glow-size-2) circle at calc(100% - var(--gx)) calc(100% - var(--gy)),
var(--glow-2),
transparent var(--glow-fade-2)
);
pointer-events: none;
transition: background 140ms linear;
mix-blend-mode: screen;
}
/* Per-section glow tuning */
.feat.cursor-glow{
--glow-1: rgba(201,83,46, 0.34);
--glow-size-1: 600px;
--glow-fade-1: 55%;
}
.shop.cursor-glow{
--glow-1: rgba(149,191,71, 0.28);
--glow-2: rgba(247,245,238, 0.10);
--glow-size-1: 640px;
--glow-size-2: 480px;
}
.final.cursor-glow{
--glow-1: rgba(201,83,46, 0.34);
--glow-2: rgba(149,191,71, 0.16);
--glow-size-1: 700px;
--glow-size-2: 540px;
--glow-fade-1: 55%;
--glow-fade-2: 60%;
}
/* ── LIQUID GLASS ────────────────────────────────────────────────
Translucent surfaces that refract content (incl. cursor gradients)
below them. Specular top highlight, soft bevel, liquid hover lift. */
.glass, .glass-dark{
position: relative;
isolation: isolate;
-webkit-backdrop-filter: saturate(180%) blur(22px);
backdrop-filter: saturate(180%) blur(22px);
transition:
background .35s var(--ease-out),
border-color .35s var(--ease-out),
box-shadow .35s var(--ease-out),
transform .25s var(--ease-out);
}
/* Light glass — over photography or pale gradients */
.glass{
background:
linear-gradient(180deg,
rgba(247,245,238,.58) 0%,
rgba(247,245,238,.40) 100%);
border: 1px solid rgba(255,255,255,.65);
box-shadow:
0 8px 32px rgba(15,15,14,.10);
color: var(--ink);
}
.glass::after{
content: ""; position: absolute; inset: 0;
border-radius: inherit; pointer-events: none;
background: linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 30%);
mix-blend-mode: overlay;
z-index: 1;
}
/* Dark glass — over ink, forest, deep cursor-glow gradients */
.glass-dark{
background:
linear-gradient(180deg,
rgba(247,245,238,.16) 0%,
rgba(247,245,238,.06) 100%);
border: 1px solid rgba(247,245,238,.20);
box-shadow:
0 8px 32px rgba(0,0,0,.28);
color: var(--paper);
}
.glass-dark::after{
content: ""; position: absolute; inset: 0;
border-radius: inherit; pointer-events: none;
background: linear-gradient(180deg, rgba(247,245,238,.24) 0%, rgba(247,245,238,0) 32%);
z-index: 1;
}
.glass > *, .glass-dark > *{ position: relative; z-index: 2; }
/* Liquid hover lift — subtle scale + shadow expansion */
.glass:hover{
background: linear-gradient(180deg, rgba(247,245,238,.66), rgba(247,245,238,.48));
border-color: rgba(255,255,255,.80);
box-shadow:
0 14px 44px rgba(15,15,14,.14);
}
.glass-dark:hover{
background: linear-gradient(180deg, rgba(247,245,238,.22), rgba(247,245,238,.10));
border-color: rgba(247,245,238,.32);
box-shadow:
0 14px 44px rgba(0,0,0,.34);
}
/* Liquid press — applied to .btn for tactile feedback */
.btn:active{
transform: translateY(1px) scale(0.98);
transition-duration: .12s;
}
.glass:active, .glass-dark:active{
transform: translateY(0) scale(0.985);
transition-duration: .12s;
}
/* Reduced motion — drop the lift, keep the visual treatment */
@media (prefers-reduced-motion: reduce){
.glass:hover, .glass-dark:hover, .btn:active, .glass:active, .glass-dark:active{ transform: none; }
}
/* Scroll reveal */
.reveal{
opacity: 0; transform: translateY(28px);
transition: opacity .9s var(--ease-out), transform .9s var(--ease-out);
}
.reveal.in{ opacity: 1; transform: translateY(0); }
/* Stagger children */
.stagger > *{ opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.stagger.in > *{ opacity: 1; transform: translateY(0); }
.stagger.in > *:nth-child(1){ transition-delay: .05s; }
.stagger.in > *:nth-child(2){ transition-delay: .15s; }
.stagger.in > *:nth-child(3){ transition-delay: .25s; }
.stagger.in > *:nth-child(4){ transition-delay: .35s; }
.stagger.in > *:nth-child(5){ transition-delay: .45s; }
.stagger.in > *:nth-child(6){ transition-delay: .55s; }
@media (prefers-reduced-motion: reduce){
.reveal, .stagger > *, .kinetic-word{ opacity: 1; transform: none; transition: none; }
.logos-track{ animation: none; }
.bubble .pulse::after{ animation: none; }
.cursor-ring{ display: none; }
html.has-cursor body{ cursor: auto; }
html.has-cursor body button, html.has-cursor body a{ cursor: pointer; }
*{ transition-duration: .01ms !important; animation-duration: .01ms !important; }
}
/* ──────────────────────────────────────────────────────────────────
/* ============================================================================ ABOUT ============================================================================ */
/* ──────────────────────────────────────────────────────────────────
ABOUT PAGE — page-specific components
────────────────────────────────────────────────────────────────── */
/* About hero — type-forward, with split eyebrow + sub-deck on right */
.ab-hero{ padding: 124px 0 64px; position: relative; overflow: hidden; }
@media (min-width: 1024px){ .ab-hero{ padding: 144px 0 88px; } }
.ab-hero h1{ margin-bottom: 28px; max-width: 18ch; }
.ab-hero .lede{ margin-bottom: 36px; max-width: 56ch; }
.ab-hero-cta{ display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
/* Origin / manifesto — long-form editorial */
.ab-origin{ padding: 96px 0; position: relative; }
@media (min-width: 1024px){ .ab-origin{ padding: 128px 0; } }
.ab-origin-grid{ display: grid; grid-template-columns: 1fr; gap: 48px; }
@media (min-width: 1024px){
.ab-origin-grid{ grid-template-columns: 0.7fr 1.6fr; gap: 80px; align-items: start; }
}
.ab-origin-head{ position: relative; }
@media (min-width: 1024px){ .ab-origin-head{ position: sticky; top: 100px; } }
.ab-origin-head h2{ margin: 16px 0 0; max-width: 14ch; }
.ab-origin-body{
display: flex; flex-direction: column; gap: 20px;
font-size: 17px; line-height: 1.55;
color: var(--ink-2);
max-width: 64ch;
}
.ab-origin-body p{ margin: 0; }
.ab-origin-body p strong{ color: var(--accent); font-family: var(--serif); font-style: italic; font-weight: 400; }
.ab-origin-pull{
border-left: 2px solid var(--accent);
padding: 12px 0 12px 24px;
margin: 16px 0;
font-family: var(--serif); font-style: italic; font-weight: 400;
font-size: clamp(20px, 1.7vw, 26px); line-height: 1.4;
color: var(--ink);
max-width: 56ch;
}
.ab-origin-attrib{ font-family: var(--mono); font-size: 12px; letter-spacing: .04em; color: var(--subtle); margin-top: -4px; }
/* Stats bar — 6 quick studio numbers */
.ab-stats-section{ background: var(--ink); color: var(--paper); padding: 80px 0; }
.ab-stats-section .eyebrow{ color: rgba(244,236,216,.7); }
.ab-stats-section .eyebrow .dot{ background: var(--accent); }
.ab-stats-section h2{ color: var(--paper); margin-bottom: 48px; }
.ab-stats-section h2 .it{ color: var(--accent); }
.ab-stats{
display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px 24px;
padding-top: 36px; border-top: 1px solid rgba(244,236,216,.18);
}
@media (min-width: 768px){ .ab-stats{ grid-template-columns: repeat(6, 1fr); } }
.ab-stat .num{
font-family: var(--sans); font-weight: 500;
font-size: clamp(36px, 4vw, 56px); line-height: 1;
letter-spacing: -0.03em; color: var(--paper);
}
.ab-stat .num .it{ font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--accent); }
.ab-stat .lbl{
font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .14em;
color: rgba(244,236,216,.65); margin-top: 10px;
}
/* Values bento — 6 principles in 3-col grid w/ one featured */
.ab-values{
display: grid; grid-template-columns: 1fr; gap: 16px;
}
@media (min-width: 768px){
.ab-values{ grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(180px, auto); }
}
.value{
background: var(--paper-2);
border: 1px solid var(--line);
border-radius: var(--r-xl);
padding: 28px;
display: flex; flex-direction: column; justify-content: space-between;
gap: 14px;
transition: transform .35s var(--ease-out), border-color .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
.value:hover{ border-color: var(--ink); box-shadow: var(--shadow-2); }
.value.feat{ background: var(--ink); color: var(--paper); border-color: var(--ink); padding: 36px; }
@media (min-width: 768px){
.value.feat{ grid-column: span 2; grid-row: span 1; }
}
.value .num{
font-family: var(--mono); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase;
color: var(--accent); font-weight: 500;
}
.value h4{
font-family: var(--sans); font-weight: 500;
font-size: 22px; line-height: 1.18; letter-spacing: -0.015em;
margin: 0;
}
.value.feat h4{ font-size: clamp(26px, 2.4vw, 36px); line-height: 1.08; letter-spacing: -0.025em; }
.value h4 .it{ font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--accent); }
.value.feat h4 .it{ color: var(--accent); }
.value p{ color: var(--subtle); font-size: 14.5px; line-height: 1.55; margin: 0; }
.value.feat p{ color: rgba(244,236,216,.78); font-size: 16px; max-width: 50ch; }
.value .value-tags{
font-family: var(--mono);
font-size: 11.5px;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--accent);
margin: 4px 0 4px;
line-height: 1.5;
}
.value.feat .value-tags{
color: var(--accent);
font-size: 12px;
margin-top: 8px;
}
/* Team grid — portrait cards 4-up, asymmetric depth */
.ab-team{
display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px;
}
@media (min-width: 768px){ .ab-team{ grid-template-columns: repeat(3, 1fr); gap: 24px; } }
@media (min-width: 1100px){ .ab-team{ grid-template-columns: repeat(4, 1fr); } }
.member{
display: block;
text-decoration: none; color: var(--ink);
}
.member-photo{
aspect-ratio: 4/5;
border-radius: var(--r-xl);
overflow: hidden;
background: var(--mute);
position: relative;
isolation: isolate;
}
.member-photo img{
width: 100%; height: 100%; object-fit: cover;
filter: saturate(0.92) contrast(1.02);
transition: transform 1s var(--ease-out), filter .5s var(--ease-out);
}
.member:hover .member-photo img{ transform: scale(1.05); filter: saturate(1) contrast(1.04); }
.member-photo::after{
content: ""; position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(15,15,14,0) 60%, rgba(15,15,14,.35));
opacity: .65;
transition: opacity .35s var(--ease-out);
}
.member:hover .member-photo::after{ opacity: .15; }
.member-meta{ padding: 14px 4px 0; display: flex; flex-direction: column; gap: 4px; }
.member-name{ font-family: var(--sans); font-weight: 500; font-size: 17px; letter-spacing: -0.005em; line-height: 1.2; }
.member-name .it{ font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--accent); }
.member-role{ font-family: var(--mono); font-size: 11.5px; text-transform: uppercase; letter-spacing: .12em; color: var(--subtle); }
.member-tag{ font-size: 13.5px; color: var(--subtle); margin-top: 6px; line-height: 1.45; }
/* Recognition / awards grid */
.ab-recognition{
display: grid; grid-template-columns: 1fr; gap: 24px;
}
@media (min-width: 1024px){ .ab-recognition{ grid-template-columns: 1fr 1fr; gap: 48px; } }
.rec-block h6{
font-family: var(--mono); font-size: 11.5px; text-transform: uppercase; letter-spacing: .14em;
color: var(--subtle); font-weight: 500; margin: 0 0 18px;
}
.rec-list{
display: flex; flex-direction: column; gap: 0;
list-style: none; padding: 0; margin: 0;
}
.rec-list li{
display: flex; align-items: baseline; justify-content: space-between;
padding: 16px 0;
border-bottom: 1px dashed var(--line);
font-size: 15.5px;
gap: 24px;
}
.rec-list li:last-child{ border-bottom: 0; }
.rec-list li .name{ font-family: var(--sans); font-weight: 500; color: var(--ink); }
.rec-list li .yr{ font-family: var(--mono); font-size: 12px; color: var(--accent); letter-spacing: .04em; }
/* Careers teaser — split with rotated decorative element */
.ab-careers{ background: var(--mute); padding: 96px 0; }
@media (min-width: 1024px){ .ab-careers{ padding: 128px 0; } }
.ab-careers-grid{ display: grid; grid-template-columns: 1fr; gap: 32px; align-items: start; }
@media (min-width: 1024px){ .ab-careers-grid{ grid-template-columns: 1fr 1fr; gap: 64px; } }
.ab-careers h2{ margin: 16px 0 24px; max-width: 18ch; }
.ab-careers p{ font-size: 17px; line-height: 1.55; color: var(--ink-2); margin: 0 0 20px; max-width: 52ch; }
.ab-careers-cta{ display: flex; gap: 14px; flex-wrap: wrap; margin-top: 16px; }
.openings{
background: var(--paper);
border: 1px solid var(--line);
border-radius: var(--r-xl);
padding: 28px;
}
.openings h6{
font-family: var(--mono); font-size: 11.5px; text-transform: uppercase; letter-spacing: .14em;
color: var(--subtle); font-weight: 500; margin: 0 0 18px;
display: flex; align-items: center; gap: 8px;
}
.openings h6 .dot{ width: 8px; height: 8px; background: var(--accent); border-radius: 50%; }
.opening{
display: flex; align-items: baseline; justify-content: space-between;
padding: 16px 0;
border-bottom: 1px dashed var(--line);
cursor: pointer;
transition: padding .25s var(--ease-out);
}
.opening:last-child{ border-bottom: 0; }
.opening:hover{ padding-left: 8px; }
.opening .role{ font-family: var(--sans); font-weight: 500; font-size: 16px; color: var(--ink); }
.opening .role .it{ font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--accent); }
.opening .meta{ font-family: var(--mono); font-size: 11.5px; color: var(--subtle); letter-spacing: .04em; text-transform: uppercase; }
.opening .arr{ display: inline-block; transition: transform .25s var(--ease-out); color: var(--ink); }
.opening:hover .arr{ transform: translateX(4px); color: var(--accent); }
/* Density variants */
body.density-tight section { padding: 64px 0 !important; }
body.density-loose section { padding: 144px 0 !important; }
@media (min-width: 1024px){
body.density-tight section { padding: 88px 0 !important; }
body.density-loose section { padding: 176px 0 !important; }
}
body.force-reduce-motion *,
body.force-reduce-motion *::before,
body.force-reduce-motion *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
/* ============================================================================ SERVICES (INDEX) ============================================================================ */
/* ──────────────────────────────────────────────────────────────────
SERVICES PAGE — page-specific components
────────────────────────────────────────────────────────────────── */
/* Services hero — type-forward, no asymmetric collage */
.svc-hero{
padding: 124px 0 72px;
position: relative;
overflow: hidden;
}
@media (min-width: 1024px){ .svc-hero{ padding: 140px 0 96px; } }
.svc-hero-grid{ display: grid; grid-template-columns: 1fr; gap: 32px; align-items: end; }
@media (min-width: 1024px){ .svc-hero-grid{ grid-template-columns: 1.4fr 1fr; gap: 64px; } }
.svc-hero h1{ margin-bottom: 24px; }
.svc-hero .lede{ margin-bottom: 32px; max-width: 56ch; }
.svc-hero-cta{ display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
/* Services right-rail — table of contents jump nav */
.svc-toc{
background: var(--paper-2);
border: 1px solid var(--line);
border-radius: var(--r-xl);
padding: 28px;
display: flex; flex-direction: column; gap: 4px;
}
.svc-toc h6{
font-family: var(--mono); font-size: 11.5px; text-transform: uppercase;
letter-spacing: .14em; color: var(--subtle); margin: 0 0 16px; font-weight: 500;
}
.svc-toc a{
display: flex; align-items: baseline; justify-content: space-between;
padding: 10px 0;
border-bottom: 1px dashed var(--line);
font-size: 14.5px; font-weight: 500;
transition: color .25s var(--ease-out), padding-left .25s var(--ease-out);
}
.svc-toc a:last-child{ border-bottom: 0; }
.svc-toc a:hover{ color: var(--accent); padding-left: 6px; }
.svc-toc a .num{
font-family: var(--mono); font-size: 12px;
color: var(--accent); letter-spacing: .04em;
}
.svc-toc a .arr{
display: inline-block; transition: transform .25s var(--ease-out);
color: var(--subtle);
}
.svc-toc a:hover .arr{ transform: translateX(4px); color: var(--accent); }
/* Phase split — large numeral on left, service cards on right */
.phase{
padding: 96px 0;
border-top: 1px solid var(--line);
position: relative;
}
@media (min-width: 1024px){ .phase{ padding: 128px 0; } }
.phase-grid{ display: grid; grid-template-columns: 1fr; gap: 48px; }
@media (min-width: 1024px){
.phase-grid{ grid-template-columns: 0.7fr 1.8fr; gap: 64px; align-items: start; }
}
.phase-head{ display: flex; flex-direction: column; gap: 0; }
@media (min-width: 1024px){
.phase-head{ position: sticky; top: 100px; }
}
.phase-num{
font-family: var(--serif); font-style: italic; font-weight: 400;
font-size: clamp(80px, 11vw, 144px);
line-height: 0.9;
letter-spacing: -0.04em;
color: var(--accent);
display: block;
margin: 0;
}
.phase-eyebrow{
font-family: var(--mono); font-size: 12px; text-transform: uppercase;
letter-spacing: .14em; color: var(--subtle);
display: inline-flex; align-items: center; gap: 8px;
margin: 28px 0 16px;
}
.phase-eyebrow .dot{ width: 8px; height: 8px; background: var(--accent); border-radius: 50%; }
.phase-title{
font-family: var(--sans); font-weight: 500;
font-size: clamp(28px, 3vw, 40px);
line-height: 1.1; letter-spacing: -0.02em;
margin: 0;
color: var(--ink);
}
.phase-title .it{ font-family: var(--serif); font-style: italic; font-weight: 400; }
.phase-desc{ color: var(--subtle); font-size: 15.5px; line-height: 1.55; margin: 18px 0 0; max-width: 36ch; }
/* Service cards — bento layout per phase (4-col asymmetric) */
.phase-cards{
display: grid;
grid-template-columns: 1fr;
gap: 14px;
}
@media (min-width: 768px){
.phase-cards{
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: minmax(140px, auto);
gap: 16px;
}
}
.svc{
display: flex; flex-direction: column; justify-content: space-between;
gap: 14px;
background: var(--paper-2);
border: 1px solid var(--line);
border-radius: var(--r-xl);
padding: 22px;
transition: transform .35s var(--ease-out), border-color .35s var(--ease-out), box-shadow .35s var(--ease-out);
position: relative;
text-decoration: none;
color: var(--ink);
}
.svc:hover{
border-color: var(--ink);
box-shadow: var(--shadow-2);
}
/* Bento sizes — featured 2×2, medium 2×1, small 1×1 */
.svc.feat{ }
.svc.med{ }
.svc.sm{ }
@media (min-width: 768px){
.svc.feat{ grid-column: span 2; grid-row: span 2; padding: 32px;
background: var(--ink); color: var(--paper); border-color: var(--ink); }
.svc.med{ grid-column: span 2; padding: 24px; }
.svc.sm{ grid-column: span 1; }
}
.svc-head{
display: flex; align-items: center; justify-content: space-between;
gap: 12px;
}
.svc-icon{
width: 40px; height: 40px;
border-radius: var(--r-md);
background: var(--mute);
color: var(--ink);
display: inline-flex; align-items: center; justify-content: center;
border: 1px solid var(--line);
transition: background .3s var(--ease-out), color .3s var(--ease-out), transform .35s var(--ease-out);
}
.svc.feat .svc-icon{
background: rgba(247,245,238,.10);
border-color: rgba(247,245,238,.18);
color: var(--paper);
width: 48px; height: 48px;
}
.svc:hover .svc-icon{
background: var(--accent);
color: var(--paper);
border-color: var(--accent);
transform: rotate(-6deg);
}
.svc.feat:hover .svc-icon{ background: var(--accent); border-color: var(--accent); }
.svc-num{
font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
color: var(--accent); font-weight: 500;
}
.svc.feat .svc-num{ color: var(--accent); }
.svc-title{
font-family: var(--sans); font-weight: 500;
font-size: 18px; line-height: 1.18; letter-spacing: -0.015em;
margin: 0;
}
.svc.feat .svc-title{ font-size: clamp(26px, 2.6vw, 36px); line-height: 1.08; letter-spacing: -0.025em; }
.svc.med .svc-title{ font-size: 22px; }
.svc-title .it{ font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--accent); }
.svc.feat .svc-title .it{ color: var(--accent); }
.svc-body{
color: var(--subtle); font-size: 13.5px; line-height: 1.5;
margin: 0; max-width: 38ch;
}
.svc.feat .svc-body{ color: rgba(247,245,238,.78); font-size: 16px; max-width: 36ch; }
.svc.med .svc-body{ font-size: 14.5px; }
.svc-link{
display: inline-flex; align-items: center; gap: 6px;
font-family: var(--sans); font-weight: 500; font-size: 13px;
color: inherit; opacity: .85;
border-bottom: 1px solid currentColor; padding-bottom: 2px;
transition: opacity .25s var(--ease-out), color .25s var(--ease-out);
align-self: flex-start;
}
.svc.feat .svc-link{ font-size: 14px; opacity: 1; color: var(--paper); }
.svc-link .arr{ display: inline-block; transition: transform .25s var(--ease-out); }
.svc:hover .svc-link{ opacity: 1; color: var(--accent); }
.svc.feat:hover .svc-link{ color: var(--accent); }
.svc:hover .svc-link .arr{ transform: translateX(3px); }
/* Thesis / closer section */
.thesis{
padding: 128px 0;
border-top: 1px solid var(--line);
position: relative;
}
.thesis-grid{ display: grid; grid-template-columns: 1fr; gap: 32px; max-width: 980px; margin: 0 auto; }
.thesis-eyebrow{ /* uses .eyebrow */ }
.thesis h2{
font-size: clamp(36px, 4.6vw, 64px);
line-height: 1.04;
letter-spacing: -0.025em;
margin: 16px 0 32px;
}
.thesis-body{ display: flex; flex-direction: column; gap: 18px; }
.thesis-body p{
font-size: clamp(18px, 1.5vw, 22px);
line-height: 1.45;
color: var(--ink-2);
margin: 0;
max-width: 60ch;
}
.thesis-body p strong{
font-family: var(--serif); font-style: italic; font-weight: 400;
color: var(--accent);
}
.thesis-cta{ display: flex; gap: 14px; flex-wrap: wrap; margin-top: 16px; }
/* Subtle decorative numerals in the background of phases — '01', '02', '03' watermark */
.phase[data-phase]::before{
content: attr(data-phase);
position: absolute;
right: -2vw; top: 56px;
font-family: var(--serif); font-style: italic; font-weight: 400;
font-size: clamp(180px, 28vw, 480px);
line-height: 1;
color: var(--accent);
opacity: 0.04;
pointer-events: none;
z-index: 0;
letter-spacing: -0.06em;
}
.phase .container{ position: relative; z-index: 1; }
/* Density variants */
body.density-tight section { padding: 64px 0 !important; }
body.density-loose section { padding: 144px 0 !important; }
@media (min-width: 1024px){
body.density-tight section { padding: 88px 0 !important; }
body.density-loose section { padding: 176px 0 !important; }
}
body.force-reduce-motion *,
body.force-reduce-motion *::before,
body.force-reduce-motion *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
/* ============================================================================ SERVICE DETAIL ============================================================================ */
/* ──────────────────────────────────────────────────────────────────
SERVICE DETAIL PAGE — page-specific components
────────────────────────────────────────────────────────────────── */
/* Service hero — type-forward + spec sidebar */
.sd-hero{ padding: 124px 0 72px; position: relative; overflow: hidden; }
@media (min-width: 1024px){ .sd-hero{ padding: 140px 0 88px; } }
.sd-breadcrumb{
display: inline-flex; align-items: center; gap: 8px;
font-family: var(--mono); font-size: 12px; color: var(--subtle);
text-transform: uppercase; letter-spacing: .12em;
margin-bottom: 28px;
}
.sd-breadcrumb a{ color: var(--subtle); transition: color .25s var(--ease-out); }
.sd-breadcrumb a:hover{ color: var(--accent); }
.sd-breadcrumb .sep{ color: var(--line); }
.sd-breadcrumb .current{ color: var(--ink); font-weight: 500; }
.sd-hero-grid{ display: grid; grid-template-columns: 1fr; gap: 40px; align-items: end; }
@media (min-width: 1024px){ .sd-hero-grid{ grid-template-columns: 1.5fr 1fr; gap: 56px; } }
.sd-hero h1{ margin-bottom: 24px; }
.sd-hero .lede{ margin-bottom: 32px; max-width: 56ch; }
.sd-hero-cta{ display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
/* Spec sidebar — quick stats card */
.sd-spec{
background: var(--paper-2);
border: 1px solid var(--line);
border-radius: var(--r-xl);
padding: 28px;
}
.sd-spec h6{
font-family: var(--mono); font-size: 11.5px; text-transform: uppercase;
letter-spacing: .14em; color: var(--subtle); margin: 0 0 20px;
font-weight: 500;
display: flex; align-items: center; gap: 8px;
}
.sd-spec h6 .dot{ width: 8px; height: 8px; background: var(--accent); border-radius: 50%; }
.sd-spec dl{ margin: 0; display: grid; gap: 14px; }
.sd-spec .row{
display: flex; align-items: baseline; justify-content: space-between;
padding-bottom: 14px;
border-bottom: 1px dashed var(--line);
}
.sd-spec .row:last-child{ border-bottom: 0; padding-bottom: 0; }
.sd-spec dt{ font-size: 13.5px; color: var(--subtle); font-family: var(--mono); letter-spacing: .04em; text-transform: uppercase; }
.sd-spec dd{ font-family: var(--sans); font-weight: 500; font-size: 17px; color: var(--ink); margin: 0; letter-spacing: -0.01em; text-align: right; }
.sd-spec dd .it{ font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--accent); }
/* Hero image — right column of hero (replaces spec sidebar) */
.sd-hero-image{
position: relative;
margin: 0;
border-radius: var(--r-xl);
overflow: hidden;
background: var(--mute);
aspect-ratio: 4/5;
isolation: isolate;
}
@media (min-width: 1024px){
.sd-hero-image{ aspect-ratio: auto; height: 100%; min-height: 480px; }
}
.sd-hero-image img{
width: 100%; height: 100%; object-fit: cover;
display: block;
}
.sd-hero-image::after{
content: ""; position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(15,15,14,0) 60%, rgba(15,15,14,.4));
pointer-events: none;
}
.sd-hero-image-caption{
position: absolute; left: 20px; right: 20px; bottom: 20px;
z-index: 1;
display: flex; align-items: center; gap: 12px;
font-family: var(--mono); font-size: 11.5px;
text-transform: uppercase; letter-spacing: .12em;
color: var(--paper);
}
.sd-hero-image-caption .caption-tag{
background: var(--paper);
color: var(--ink);
padding: 5px 10px;
border-radius: var(--r-pill);
letter-spacing: .14em;
}
.sd-hero-image-caption .caption-name{
color: rgba(247,245,238,.92);
text-shadow: 0 1px 8px rgba(15,15,14,.5);
letter-spacing: .04em;
}
/* Spec strip — horizontal band below hero (replaces vertical spec card) */
.sd-spec-strip{
display: grid;
grid-template-columns: 1fr;
gap: 0;
background: var(--paper-2);
border: 1px solid var(--line);
border-radius: var(--r-xl);
padding: 24px 28px;
}
@media (min-width: 600px){ .sd-spec-strip{ grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px){ .sd-spec-strip{ grid-template-columns: repeat(6, 1fr); padding: 28px 32px; } }
.sd-spec-item{
display: flex; flex-direction: column; gap: 6px;
padding: 14px 0;
border-top: 1px dashed var(--line);
}
.sd-spec-item:first-child{ border-top: 0; }
@media (min-width: 600px){
.sd-spec-item{ border-top: 0; padding: 14px 18px; border-left: 1px dashed var(--line); }
.sd-spec-item:first-child{ border-left: 0; padding-left: 0; }
.sd-spec-item:nth-child(odd):not(:first-child){ border-left: 1px dashed var(--line); }
}
@media (min-width: 1024px){
.sd-spec-item{ padding: 0 20px; border-left: 1px dashed var(--line); border-top: 0; }
.sd-spec-item:first-child{ padding-left: 0; border-left: 0; }
.sd-spec-item:last-child{ padding-right: 0; }
}
.sd-spec-item .lbl{
font-family: var(--mono); font-size: 11px;
text-transform: uppercase; letter-spacing: .14em;
color: var(--subtle);
}
.sd-spec-item .val{
font-family: var(--sans); font-weight: 500;
font-size: 17px; color: var(--ink);
letter-spacing: -0.01em; line-height: 1.2;
}
.sd-spec-item .val .it{ font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--accent); }
/* Problem section — 3 cards on contrasting band */
.sd-problem{ background: var(--mute); padding: 96px 0; }
@media (min-width: 1024px){ .sd-problem{ padding: 128px 0; } }
.sd-problem-grid{ display: grid; grid-template-columns: 1fr; gap: 18px; margin-top: 56px; }
@media (min-width: 768px){ .sd-problem-grid{ grid-template-columns: repeat(3, 1fr); gap: 20px; } }
.sd-problem-card{
background: var(--paper);
border: 1px solid var(--line);
border-radius: var(--r-xl);
padding: 28px;
transition: transform .35s var(--ease-out), border-color .35s var(--ease-out);
}
.sd-problem-card:hover{ border-color: var(--ink); }
.sd-problem-card .num{
font-family: var(--mono); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase;
color: var(--accent); display: inline-block; margin-bottom: 14px;
}
.sd-problem-card h4{
font-family: var(--sans); font-weight: 500;
font-size: 22px; line-height: 1.18; letter-spacing: -0.015em;
margin: 0 0 14px;
}
.sd-problem-card h4 .it{ font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--accent); }
.sd-problem-card p{ color: var(--subtle); font-size: 15px; line-height: 1.55; margin: 0; }
/* Deliverables bento — 4-col with featured 2x2 + medium + small mix */
.sd-deliverables{
display: grid; grid-template-columns: 1fr; gap: 14px;
}
@media (min-width: 768px){
.sd-deliverables{
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: minmax(160px, auto);
gap: 16px;
}
}
.del-tile{
background: var(--paper-2);
border: 1px solid var(--line);
border-radius: var(--r-xl);
padding: 24px;
display: flex; flex-direction: column; justify-content: space-between;
gap: 14px;
transition: transform .35s var(--ease-out), border-color .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
.del-tile:hover{ border-color: var(--ink); box-shadow: var(--shadow-2); }
.del-tile.feat{ background: var(--ink); color: var(--paper); border-color: var(--ink); padding: 32px; }
@media (min-width: 768px){
.del-tile.feat{ grid-column: span 2; grid-row: span 2; }
.del-tile.med{ grid-column: span 2; }
.del-tile.sm{ grid-column: span 1; }
}
.del-tile .icon{
width: 40px; height: 40px;
background: var(--mute); color: var(--ink);
border: 1px solid var(--line);
border-radius: var(--r-md);
display: inline-flex; align-items: center; justify-content: center;
transition: background .3s var(--ease-out), color .3s var(--ease-out);
}
.del-tile.feat .icon{
background: rgba(247,245,238,.10); border-color: rgba(247,245,238,.20); color: var(--paper);
width: 48px; height: 48px;
}
.del-tile:hover .icon{ background: var(--accent); color: var(--paper); border-color: var(--accent); }
.del-tile h4{
font-family: var(--sans); font-weight: 500;
font-size: 18px; line-height: 1.18; letter-spacing: -0.015em;
margin: 0;
}
.del-tile.feat h4{ font-size: clamp(26px, 2.6vw, 36px); line-height: 1.08; letter-spacing: -0.025em; }
.del-tile.med h4{ font-size: 22px; }
.del-tile h4 .it{ font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--accent); }
.del-tile.feat h4 .it{ color: var(--accent); }
.del-tile p{ color: var(--subtle); font-size: 13.5px; line-height: 1.5; margin: 0; }
.del-tile.feat p{ color: rgba(247,245,238,.78); font-size: 15.5px; max-width: 38ch; }
.del-tile.med p{ font-size: 14.5px; }
/* Approach — 4-step horizontal grid */
.sd-approach{
display: grid; grid-template-columns: 1fr; gap: 18px;
}
@media (min-width: 768px){
.sd-approach{ grid-template-columns: repeat(4, 1fr); gap: 16px; }
}
.app-step{
background: var(--paper-2);
border: 1px solid var(--line);
border-radius: var(--r-lg);
padding: 24px;
display: flex; flex-direction: column; gap: 14px;
position: relative; min-height: 240px;
transition: transform .3s var(--ease-out), border-color .3s var(--ease-out);
}
.app-step:hover{ border-color: var(--ink); }
.app-step .num{
font-family: var(--mono); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase;
color: var(--accent); font-weight: 500;
}
.app-step h4{ font-family: var(--sans); font-weight: 500; font-size: 18px; letter-spacing: -0.01em; margin: 0; line-height: 1.2; }
.app-step ul{
list-style: none; padding: 0; margin: auto 0 0;
display: flex; flex-direction: column; gap: 8px;
}
.app-step ul li{
font-family: var(--mono); font-size: 11.5px; color: var(--subtle); letter-spacing: .04em;
padding-left: 14px; position: relative;
}
.app-step ul li::before{
content: ""; position: absolute; left: 0; top: 7px;
width: 6px; height: 1px; background: var(--accent);
}
/* Tech stack grid — small chip-style platform tiles */
.sd-tech{
display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;
}
@media (min-width: 600px){ .sd-tech{ grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px){ .sd-tech{ grid-template-columns: repeat(5, 1fr); } }
.tech-tile{
background: var(--paper-2);
border: 1px solid var(--line);
border-radius: var(--r-md);
padding: 18px 16px;
display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
gap: 10px;
min-height: 120px;
transition: border-color .25s var(--ease-out), transform .25s var(--ease-out);
}
.tech-tile:hover{ border-color: var(--ink); }
.tech-tile .name{ font-family: var(--sans); font-weight: 500; font-size: 14px; letter-spacing: -0.005em; }
.tech-tile .role{ font-family: var(--mono); font-size: 10.5px; color: var(--subtle); letter-spacing: .1em; text-transform: uppercase; }
.tech-tile.partner{
background: var(--ink); color: var(--paper); border-color: var(--ink);
}
.tech-tile.partner .role{ color: rgba(247,245,238,.6); }
/* Engagement tiers — 3-up cards with one featured */
.sd-tiers{
display: grid; grid-template-columns: 1fr; gap: 18px;
}
@media (min-width: 768px){ .sd-tiers{ grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; } }
.tier{
background: var(--paper-2);
border: 1px solid var(--line);
border-radius: var(--r-xl);
padding: 32px;
display: flex; flex-direction: column; gap: 18px;
transition: transform .35s var(--ease-out), border-color .35s var(--ease-out), box-shadow .35s var(--ease-out);
position: relative;
}
.tier:hover{ border-color: var(--ink); box-shadow: var(--shadow-2); }
.tier.feat{ background: var(--ink); color: var(--paper); border-color: var(--ink); }
.tier .tag{
display: inline-flex; align-items: center; gap: 6px;
font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .14em;
color: var(--accent); font-weight: 500;
margin-bottom: 4px;
}
.tier.feat .tag{ color: var(--accent); }
.tier-title{
font-family: var(--sans); font-weight: 500;
font-size: 24px; line-height: 1.18; letter-spacing: -0.015em;
margin: 0;
}
.tier-title .it{ font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--accent); }
.tier.feat .tier-title .it{ color: var(--accent); }
.tier .price{
display: flex; align-items: baseline; gap: 8px;
padding: 14px 0;
border-top: 1px dashed var(--line);
border-bottom: 1px dashed var(--line);
}
.tier.feat .price{ border-color: rgba(247,245,238,.18); }
.tier .price .num{ font-family: var(--sans); font-weight: 500; font-size: 30px; letter-spacing: -0.025em; line-height: 1; }
.tier .price .desc{ font-size: 13px; color: var(--subtle); }
.tier.feat .price .desc{ color: rgba(247,245,238,.7); }
.tier ul{ list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.tier ul li{
display: flex; align-items: flex-start; gap: 10px;
font-size: 14px; color: var(--ink-2); line-height: 1.4;
}
.tier.feat ul li{ color: rgba(247,245,238,.85); }
.tier ul li::before{
content: ""; width: 6px; height: 6px; background: var(--accent);
margin-top: 8px; flex-shrink: 0; border-radius: 50%;
}
.tier .btn{ margin-top: auto; align-self: flex-start; }
/* FAQs — accordion-style */
.sd-faqs{ display: flex; flex-direction: column; gap: 0; }
.faq{
border-top: 1px solid var(--line);
padding: 24px 0;
cursor: pointer;
}
.faq:last-child{ border-bottom: 1px solid var(--line); }
.faq summary{
display: flex; align-items: center; justify-content: space-between;
list-style: none;
font-family: var(--sans); font-weight: 500;
font-size: clamp(18px, 1.5vw, 22px);
line-height: 1.3; letter-spacing: -0.015em;
color: var(--ink);
cursor: pointer;
gap: 24px;
}
.faq summary::-webkit-details-marker{ display: none; }
.faq summary .marker{
flex-shrink: 0;
width: 32px; height: 32px;
border-radius: 50%;
border: 1px solid var(--line);
display: inline-flex; align-items: center; justify-content: center;
transition: background .25s var(--ease-out), color .25s var(--ease-out), border-color .25s var(--ease-out), transform .35s var(--ease-out);
color: var(--ink);
}
.faq[open] summary .marker{
background: var(--accent); color: var(--paper); border-color: var(--accent);
transform: rotate(45deg);
}
.faq:hover summary{ color: var(--accent); }
.faq summary .it{ font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--accent); }
.faq .ans{
padding: 18px 0 0;
color: var(--subtle);
font-size: 15.5px; line-height: 1.6;
max-width: 64ch;
}
/* Related services — 3-up cards (compounds-with) */
.sd-related{
display: grid; grid-template-columns: 1fr; gap: 18px;
}
@media (min-width: 768px){ .sd-related{ grid-template-columns: repeat(3, 1fr); gap: 20px; } }
.rel{
background: var(--paper-2);
border: 1px solid var(--line);
border-radius: var(--r-xl);
padding: 28px;
display: flex; flex-direction: column; gap: 14px;
text-decoration: none; color: var(--ink);
transition: transform .35s var(--ease-out), border-color .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
.rel:hover{ border-color: var(--ink); box-shadow: var(--shadow-2); }
.rel-num{ font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .14em; color: var(--accent); font-weight: 500; }
.rel h4{ font-family: var(--sans); font-weight: 500; font-size: 22px; letter-spacing: -0.015em; margin: 0; line-height: 1.18; }
.rel h4 .it{ font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--accent); }
.rel p{ color: var(--subtle); font-size: 14.5px; margin: 0; line-height: 1.5; }
.rel .arrow{ display: inline-flex; align-items: center; gap: 6px; margin-top: auto; font-size: 14px; font-weight: 500; color: var(--ink); border-bottom: 1px solid currentColor; padding-bottom: 2px; align-self: flex-start; transition: color .25s var(--ease-out); }
.rel .arrow .arr{ transition: transform .25s var(--ease-out); }
.rel:hover .arrow{ color: var(--accent); }
.rel:hover .arrow .arr{ transform: translateX(4px); }
/* Density variants */
body.density-tight section { padding: 64px 0 !important; }
body.density-loose section { padding: 144px 0 !important; }
@media (min-width: 1024px){
body.density-tight section { padding: 88px 0 !important; }
body.density-loose section { padding: 176px 0 !important; }
}
body.force-reduce-motion *,
body.force-reduce-motion *::before,
body.force-reduce-motion *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
/* ============================================================================ PROCESS ============================================================================ */
/* ──────────────────────────────────────────────────────────────────
/* ──────────────────────────────────────────────────────────────────
PROCESS PAGE — page-specific components
Includes globally-reusable .pv (process visualizer) component
────────────────────────────────────────────────────────────────── */
/* Process hero — type-forward */
.proc-hero{ padding: 124px 0 64px; position: relative; overflow: hidden; }
@media (min-width: 1024px){ .proc-hero{ padding: 144px 0 80px; } }
.proc-hero h1{ margin-bottom: 28px; max-width: 18ch; }
.proc-hero .lede{ margin-bottom: 36px; max-width: 56ch; }
/* ── PROCESS VISUALIZER — globally reusable .pv ─────────────── */
.pv{
position: relative;
padding: 96px 0;
overflow: hidden;
}
@media (min-width: 1024px){ .pv{ padding: 128px 0; } }
.pv-head{ display: flex; flex-direction: column; gap: 16px; margin-bottom: 64px; max-width: 720px; }
.pv-head h2{ margin: 0; }
/* Phase nav rail — 4 tabs with progress underline */
.pv-rail{
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
position: relative;
border-bottom: 1px solid var(--line);
margin-bottom: 64px;
}
.pv-rail::before{
content: ""; position: absolute; left: 0; bottom: -1px; right: 0;
height: 2px; background: var(--line);
}
.pv-rail-progress{
position: absolute;
bottom: -1px; left: 0;
height: 2px;
background: var(--accent);
width: 25%;
transition: width .7s var(--ease-out);
z-index: 1;
}
.pv-tab{
background: none; border: none;
padding: 22px 4px;
text-align: left;
cursor: pointer;
display: flex; flex-direction: column; gap: 8px;
position: relative;
font-family: inherit;
transition: opacity .35s var(--ease-out), color .35s var(--ease-out);
opacity: 0.42;
border-right: 1px solid var(--line);
}
.pv-tab:last-child{ border-right: 0; }
.pv-tab:hover{ opacity: 0.75; }
.pv-tab.active{ opacity: 1; }
.pv-tab .num{
font-family: var(--mono); font-size: 12px;
letter-spacing: .14em; text-transform: uppercase;
color: var(--subtle);
transition: color .35s var(--ease-out);
}
.pv-tab.active .num{ color: var(--accent); }
.pv-tab .label{
font-family: var(--sans); font-weight: 500;
font-size: clamp(20px, 1.8vw, 28px); line-height: 1.1; letter-spacing: -0.02em;
color: var(--ink);
}
.pv-tab .label .it{ font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--accent); }
.pv-tab .dur{
font-family: var(--mono); font-size: 11px;
color: var(--subtle); letter-spacing: .04em;
}
/* Stage — content panel that swaps between phases */
.pv-stage-wrap{ position: relative; min-height: 480px; }
.pv-stage{
display: grid; grid-template-columns: 1fr; gap: 48px;
align-items: start;
}
@media (min-width: 1024px){
.pv-stage{ grid-template-columns: 1.1fr 1fr; gap: 80px; }
}
.pv-stage-text{ position: relative; }
.pv-stage-num{
font-family: var(--serif); font-style: italic; font-weight: 400;
font-size: clamp(80px, 10vw, 140px); line-height: 1;
color: var(--accent);
letter-spacing: -0.04em;
display: block;
margin: 0 0 20px;
}
.pv-stage-meta{
display: flex; gap: 8px; flex-wrap: wrap;
margin-bottom: 24px;
}
.pv-stage-meta .chip{
background: var(--paper-2); border: 1px solid var(--line);
font-family: var(--mono); font-size: 11px;
color: var(--subtle); letter-spacing: .04em; text-transform: uppercase;
padding: 6px 12px;
}
.pv-stage-title{
font-family: var(--sans); font-weight: 500;
font-size: clamp(32px, 3.6vw, 48px); line-height: 1.05; letter-spacing: -0.025em;
margin: 0 0 22px;
}
.pv-stage-title .it{ font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--accent); }
.pv-stage-body{
font-size: 17px; line-height: 1.55; color: var(--ink-2);
max-width: 56ch; margin: 0;
}
/* Deliverables panel */
.pv-stage-visual{
background: var(--paper-2);
border: 1px solid var(--line);
border-radius: var(--r-xl);
padding: 32px;
align-self: start;
}
.pv-stage-visual h6{
font-family: var(--mono); font-size: 11.5px;
letter-spacing: .14em; text-transform: uppercase;
color: var(--subtle); margin: 0 0 24px;
font-weight: 500;
display: flex; align-items: center; gap: 8px;
}
.pv-stage-visual h6 .dot{ width: 8px; height: 8px; background: var(--accent); border-radius: 50%; }
.pv-deliverables{ display: flex; flex-direction: column; gap: 0; }
.pv-del{
display: flex; align-items: flex-start; gap: 14px;
padding: 14px 0;
border-bottom: 1px dashed var(--line);
}
.pv-del:last-child{ border-bottom: 0; padding-bottom: 0; }
.pv-del:first-child{ padding-top: 0; }
.pv-del .check{
width: 22px; height: 22px;
border-radius: 50%;
background: var(--accent); color: var(--paper);
flex-shrink: 0;
display: inline-flex; align-items: center; justify-content: center;
font-size: 12px; font-weight: 500;
margin-top: 1px;
}
.pv-del .text{ font-size: 14.5px; line-height: 1.45; color: var(--ink); }
/* Footer controls */
.pv-controls{
display: flex; align-items: center; justify-content: space-between;
margin-top: 56px; padding-top: 32px;
border-top: 1px solid var(--line);
}
.pv-counter{
font-family: var(--mono); font-size: 12px;
letter-spacing: .14em; color: var(--subtle);
text-transform: uppercase;
}
.pv-counter .current{ color: var(--accent); font-weight: 500; }
.pv-arrows{ display: flex; gap: 10px; }
.pv-arrow{
width: 44px; height: 44px;
border-radius: 50%;
border: 1px solid var(--line);
background: var(--paper-2);
display: inline-flex; align-items: center; justify-content: center;
cursor: pointer;
color: var(--ink);
transition: background .25s var(--ease-out), color .25s var(--ease-out), border-color .25s var(--ease-out), transform .25s var(--ease-out);
}
.pv-arrow:hover:not(:disabled){ background: var(--ink); color: var(--paper); border-color: var(--ink); transform: translateY(-1px); }
.pv-arrow:disabled{ opacity: 0.3; cursor: not-allowed; }
.pv-arrow svg{ width: 16px; height: 16px; }
/* === TIMELINE GANTT === */
.pv-timeline{
padding: 96px 0;
background: var(--mute);
}
@media (min-width: 1024px){ .pv-timeline{ padding: 128px 0; } }
.pv-timeline .sec-head{ margin-bottom: 56px; }
.pv-tl-wrap{
background: var(--paper);
border: 1px solid var(--line);
border-radius: var(--r-xl);
padding: 32px;
}
.pv-tl-grid{
display: grid;
grid-template-columns: 1fr;
gap: 14px;
}
@media (min-width: 768px){ .pv-tl-grid{ grid-template-columns: 130px 1fr; column-gap: 20px; row-gap: 14px; align-items: center; } }
.pv-tl-label{
font-family: var(--mono); font-size: 11.5px;
text-transform: uppercase; letter-spacing: .14em;
color: var(--ink); display: flex; align-items: center; gap: 8px;
}
.pv-tl-label .dot{ width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; }
.pv-tl-label.p1 .dot{ background: var(--accent); }
.pv-tl-label.p2 .dot{ background: var(--ink); }
.pv-tl-label.p3 .dot{ background: var(--accent-2); }
.pv-tl-label.p4 .dot{ background: var(--accent-3); }
.pv-tl-track{
position: relative;
height: 32px;
background: var(--mute);
border-radius: var(--r-pill);
overflow: hidden;
}
.pv-tl-bar{
position: absolute;
top: 0; height: 100%;
border-radius: var(--r-pill);
display: flex; align-items: center;
padding: 0 14px;
color: var(--paper);
font-family: var(--mono); font-size: 11px; letter-spacing: .04em; text-transform: uppercase;
white-space: nowrap;
width: 0; /* animated by Motion */
opacity: 0; /* animated by Motion */
}
.pv-tl-bar.b1{ background: var(--accent); left: 0%; }
.pv-tl-bar.b2{ background: var(--ink); left: 18.75%; } /* week 4 of 16 */
.pv-tl-bar.b3{ background: var(--accent-2); left: 31.25%; } /* week 6 */
.pv-tl-bar.b4{ background: var(--accent-3); left: 75%; } /* week 13 */
.pv-tl-weeks{
display: grid;
grid-template-columns: repeat(16, 1fr);
margin-top: 10px;
font-family: var(--mono); font-size: 10px;
color: var(--subtle); letter-spacing: .04em;
padding-left: 0;
}
@media (min-width: 768px){ .pv-tl-weeks{ margin-left: 150px; } }
.pv-tl-weeks span{ text-align: left; padding-left: 4px; border-left: 1px dashed var(--line); }
.pv-tl-weeks span:first-child{ border-left: 0; }
.pv-tl-foot{
display: flex; justify-content: space-between; align-items: baseline;
margin-top: 28px; padding-top: 20px;
border-top: 1px dashed var(--line);
font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase;
color: var(--subtle);
}
.pv-tl-foot .total{ color: var(--ink); font-weight: 500; }
/* Manifesto */
.proc-manifesto{ padding: 128px 0; }
.proc-mani-grid{ display: grid; grid-template-columns: 1fr; gap: 32px; max-width: 980px; margin: 0 auto; }
.proc-mani-grid h2{
font-size: clamp(36px, 4.6vw, 64px);
line-height: 1.04; letter-spacing: -0.025em;
margin: 0 0 24px;
}
.proc-mani-body{ display: flex; flex-direction: column; gap: 18px; }
.proc-mani-body p{
font-size: clamp(17px, 1.4vw, 19px);
line-height: 1.55; color: var(--ink-2); margin: 0; max-width: 60ch;
}
.proc-mani-body p strong{
font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--accent);
}
/* Density variants */
body.density-tight section { padding: 64px 0 !important; }
body.density-loose section { padding: 144px 0 !important; }
@media (min-width: 1024px){
body.density-tight section { padding: 88px 0 !important; }
body.density-loose section { padding: 176px 0 !important; }
}
body.force-reduce-motion *,
body.force-reduce-motion *::before,
body.force-reduce-motion *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
/* ============================================================================ CONTACT ============================================================================ */
/* ──────────────────────────────────────────────────────────────────
COMMENCE STUDIO — CONTACT PAGE
Tokens lifted from Homepage.html for fidelity.
────────────────────────────────────────────────────────────────── */
*{box-sizing:border-box}
body{
font-family:var(--sans);background:var(--paper);color:var(--ink);
font-size:17px;line-height:1.55;
-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
text-rendering:optimizeLegibility;font-feature-settings:"ss01","cv11";
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
::selection{background:var(--accent);color:var(--paper)}
.container{width:100%;max-width:1280px;margin:0 auto;padding:0 24px}
@media (min-width:768px){.container{padding:0 40px}}
@media (min-width:1280px){.container{padding:0 48px}}
.eyebrow{
font-family:var(--mono);font-size:12px;text-transform:uppercase;
letter-spacing:.14em;color:var(--subtle);
display:inline-flex;align-items:center;gap:8px;
}
.eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--accent);display:inline-block}
h1,.h1{
font-family:var(--sans);font-weight:500;
font-size:clamp(38px,5.4vw,76px);line-height:.98;letter-spacing:-.03em;margin:0;color:var(--ink);
}
h1 .it,.h1 .it{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.02em}
h2,.h2{font-family:var(--sans);font-weight:500;font-size:clamp(32px,4.6vw,56px);line-height:1.04;letter-spacing:-.02em;margin:0;color:var(--ink)}
.h2 .it,h2 .it{font-family:var(--serif);font-style:italic;font-weight:400}
.h3{font-family:var(--sans);font-weight:500;font-size:clamp(24px,2.4vw,32px);line-height:1.15;letter-spacing:-.015em;margin:0}
.h4{font-family:var(--sans);font-weight:500;font-size:22px;line-height:1.25;letter-spacing:-.01em;margin:0}
.h5{font-family:var(--sans);font-weight:500;font-size:16px;line-height:1.3;margin:0}
.lede{font-size:clamp(18px,1.6vw,22px);line-height:1.45;color:var(--ink-2);max-width:60ch}
.small{font-size:14px;line-height:1.5;color:var(--subtle)}
/* Buttons */
.btn{
display:inline-flex;align-items:center;gap:10px;
padding:14px 22px;border-radius:var(--r-pill);
font-weight:500;font-size:15px;letter-spacing:-.005em;
transition:transform .25s var(--ease-out),background .25s var(--ease-out),color .25s var(--ease-out),box-shadow .25s var(--ease-out);
white-space:nowrap;border:1px solid transparent;
}
.btn:hover{transform:translateY(-1px)}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.btn-dark{background:var(--ink);color:var(--paper)}
.btn-dark:hover{background:var(--ink-2);box-shadow:var(--shadow-2)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{background:var(--mute);border-color:var(--ink)}
.btn-accent{background:var(--accent-2);color:var(--paper)}
.btn-accent:hover{background:var(--accent-3)}
.btn-paper{background:var(--paper);color:var(--ink)}
.btn-paper:hover{background:#fff}
.btn-outline{background:transparent;color:var(--paper);border-color:rgba(247,245,238,.32)}
.btn-outline:hover{border-color:var(--paper)}
.btn .arrow{display:inline-block;transition:transform .25s var(--ease-out)}
.btn:hover .arrow{transform:translateX(3px)}
.btn[disabled]{opacity:.4;pointer-events:none}
.chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:var(--r-pill);background:var(--mute);color:var(--ink);font-size:13px;font-weight:500}
.chip-line{background:transparent;border:1px solid var(--line)}
/* ── NAV ─────────────────────────────────────────────────────────── */
.nav-shell{position:fixed;top:16px;left:0;right:0;z-index:50;display:flex;justify-content:center;pointer-events:none;transition:top .3s var(--ease-out)}
.nav{
pointer-events:auto;display:flex;align-items:center;gap:8px;padding:8px 8px 8px 20px;
background:linear-gradient(180deg,rgba(247,245,238,.62),rgba(247,245,238,.42));
-webkit-backdrop-filter:saturate(180%) blur(24px);backdrop-filter:saturate(180%) blur(24px);
border:1px solid rgba(255,255,255,.55);border-radius:var(--r-pill);
box-shadow:0 10px 36px rgba(15,15,14,.10);
width:min(1080px,calc(100% - 32px));position:relative;isolation:isolate;
}
.nav::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.5) 0%,rgba(255,255,255,0) 35%);mix-blend-mode:overlay;z-index:1}
.nav>*{position:relative;z-index:2}
.brand{display:inline-flex;align-items:center;gap:10px;color:var(--ink);font-weight:600;letter-spacing:-.01em;font-size:17px}
.brand .brandmark{width:26px;height:26px;display:inline-block;flex-shrink:0}
.brand .brand-text{font-family:var(--sans);font-weight:600;letter-spacing:-.01em;font-size:17px}
.nav-links{display:none;align-items:center;gap:4px;margin-left:12px}
@media (min-width:980px){.nav-links{display:inline-flex}}
.nav-link{position:relative;padding:10px 14px;border-radius:var(--r-pill);font-size:14.5px;font-weight:500;color:var(--ink);transition:background .2s var(--ease-out),color .2s var(--ease-out)}
.nav-link:hover{background:var(--mute)}
.nav-link.is-active{background:var(--mute)}
.nav-spacer{flex:1}
.nav-cta{display:inline-flex;align-items:center;gap:8px;background:var(--ink);color:var(--paper);padding:10px 18px;border-radius:var(--r-pill);font-size:14.5px;font-weight:500;transition:background .2s var(--ease-out),transform .2s var(--ease-out)}
.nav-cta:hover{background:var(--ink-2);transform:translateY(-1px)}
/* Mobile: drop .nav-cta from the top-level bar; the drawer carries .nav-drawer-cta. */
@media (max-width:979px){.nav-cta{display:none}}
.nav-burger{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:var(--r-pill);background:var(--mute);margin-left:4px}
@media (min-width:980px){.nav-burger{display:none}}
.nav-shell.hide{transform:translateY(-150%)}
/* ──────────────────────────────────────────────────────────────────
HERO — Contact page only (form is the protagonist).
Scoped via :has(.hero-form-wrap) so these overrides do NOT leak to
the homepage / other pages that also use .
────────────────────────────────────────────────────────────────── */
.hero:has(.hero-form-wrap){padding:96px 0 64px;position:relative}
@media (min-width:900px){.hero:has(.hero-form-wrap){padding:104px 0 80px}}
.hero:has(.hero-form-wrap) .hero-grid{display:grid;grid-template-columns:1fr;gap:32px;align-items:stretch}
@media (min-width:900px){.hero:has(.hero-form-wrap) .hero-grid{grid-template-columns:.85fr 1.15fr;gap:40px;align-items:stretch}}
@media (min-width:1280px){.hero:has(.hero-form-wrap) .hero-grid{grid-template-columns:.8fr 1.2fr;gap:64px}}
.hero:has(.hero-form-wrap) h1{margin:18px 0 16px;max-width:14ch;font-size:clamp(36px,4.6vw,64px);line-height:1.02}
.hero:has(.hero-form-wrap) .lede{margin-bottom:0;max-width:42ch;font-size:15.5px;line-height:1.55}
.hero-meta{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.pill-glass{
display:inline-flex;align-items:center;gap:8px;
background:linear-gradient(180deg,rgba(247,245,238,.62),rgba(247,245,238,.42));
-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
border:1px solid rgba(255,255,255,.65);
padding:8px 14px;border-radius:var(--r-pill);font-size:13px;
box-shadow:0 8px 24px rgba(15,15,14,.08);
}
.pill-glass .dot{width:8px;height:8px;border-radius:50%;background:#95BF47}
.pill-glass .dot.live{box-shadow:0 0 0 0 rgba(149,191,71,.6);animation:livePulse 1.8s infinite}
@keyframes livePulse{0%{box-shadow:0 0 0 0 rgba(149,191,71,.7)}80%{box-shadow:0 0 0 8px rgba(149,191,71,0)}100%{box-shadow:0 0 0 0 rgba(149,191,71,0)}}
.hero-stats{
display:flex;flex-direction:column;gap:12px;
margin-top:28px;padding:20px 22px;border-radius:var(--r-lg);
background:var(--paper-2);border:1px solid var(--line);
}
.hero-stats .row{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--ink-2)}
.hero-stats .row .ic{width:18px;height:18px;flex-shrink:0;color:var(--accent-2)}
.hero-stats strong{font-weight:500}
.alt-paths-hero{margin-top:20px;display:flex;flex-direction:column;gap:8px}
/* ──────────────────────────────────────────────────────────────────
NEXT STEPS — what happens after submission
────────────────────────────────────────────────────────────────── */
section.next-steps{padding:48px 0 80px;border-top:1px solid var(--line);background:linear-gradient(180deg,rgba(236,232,220,.32),transparent 60%)}
@media (min-width:900px){section.next-steps{padding:80px 0 96px}}
.next-grid{display:grid;grid-template-columns:1fr;gap:32px;align-items:start}
@media (min-width:900px){.next-grid{grid-template-columns:.9fr 1.1fr;gap:64px}}
.next-card{padding:32px 28px}
@media (min-width:768px){.next-card{padding:36px 40px}}
.next-head h2{font-size:clamp(28px,3.4vw,42px);line-height:1.05}
.trust-card{
background:var(--paper-2);border:1px solid var(--line);
border-radius:var(--r-lg);padding:24px;
}
.trust-strat{display:flex;gap:14px;align-items:center;margin-bottom:18px}
.trust-strat .ava{width:56px;height:56px;border-radius:50%;overflow:hidden;background:var(--mute);flex-shrink:0;position:relative}
.trust-strat .ava img{width:100%;height:100%;object-fit:cover}
.trust-strat .ava .live-dot{
position:absolute;right:1px;bottom:1px;width:14px;height:14px;border-radius:50%;
background:#95BF47;border:2.5px solid var(--paper-2);
}
.trust-strat .who{display:flex;flex-direction:column;gap:2px;line-height:1.2}
.trust-strat .who strong{font-weight:500;font-size:15.5px}
.trust-strat .who span{font-size:13px;color:var(--subtle)}
.trust-quote{
font-family:var(--serif);font-style:italic;font-weight:400;
font-size:18px;line-height:1.4;color:var(--ink);
margin:0 0 18px;
}
.trust-stats{display:grid;grid-template-columns:1fr 1fr;gap:14px;border-top:1px solid var(--line);padding-top:18px;margin-top:4px}
.trust-stats .stat{display:flex;flex-direction:column;gap:2px}
.trust-stats .num{font-size:22px;font-weight:500;letter-spacing:-.015em}
.trust-stats .lbl{font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.12em;color:var(--subtle)}
/* Quick alt-paths */
.alt-paths{display:flex;flex-direction:column;gap:8px}
.alt-row{
display:flex;align-items:center;gap:14px;
padding:14px 16px;border-radius:var(--r-md);
background:var(--paper-2);border:1px solid var(--line);
transition:border-color .2s var(--ease-out),background .2s var(--ease-out),transform .2s var(--ease-out);
}
.alt-row:hover{border-color:var(--ink);transform:translateY(-1px)}
.alt-row .ic{
width:38px;height:38px;border-radius:var(--r-sm);background:var(--mute);
display:inline-flex;align-items:center;justify-content:center;color:var(--ink);flex-shrink:0;
}
.alt-row .body{display:flex;flex-direction:column;flex:1;line-height:1.3}
.alt-row .body strong{font-weight:500;font-size:14.5px}
.alt-row .body span{font-size:13px;color:var(--subtle)}
.alt-row .arrow{margin-left:auto;color:var(--subtle)}
/* What happens next timeline */
.timeline{display:flex;flex-direction:column;gap:0;padding:4px 0 0}
.timeline .step{
display:flex;gap:14px;padding:10px 0;position:relative;
}
.timeline .step:not(:last-child)::after{
content:"";position:absolute;left:13px;top:38px;bottom:-6px;width:1.5px;
background:linear-gradient(180deg,var(--line),transparent);
}
.timeline .num{
width:28px;height:28px;border-radius:50%;
background:var(--ink);color:var(--paper);
display:inline-flex;align-items:center;justify-content:center;
font-family:var(--mono);font-size:12px;font-weight:500;flex-shrink:0;
z-index:1;
}
.timeline .body{display:flex;flex-direction:column;gap:2px}
.timeline .body strong{font-weight:500;font-size:14.5px}
.timeline .body span{font-size:13px;color:var(--subtle);line-height:1.4}
.timeline .body em{font-style:normal;font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--accent-2);margin-top:2px}
.logos-row{
display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;
border-top:1px solid var(--line);padding-top:18px;
font-family:var(--mono);font-size:11.5px;text-transform:uppercase;letter-spacing:.12em;color:var(--subtle);
}
.logos-row span{font-weight:500;color:var(--ink-2)}
.logos-row .sep{color:var(--line)}
/* ──────────────────────────────────────────────────────────────────
FORM — stepped, conversational
────────────────────────────────────────────────────────────────── */
.form-card{
background:var(--paper-2);border:1px solid var(--line);
border-radius:var(--r-xl);padding:24px;
position:relative;overflow:hidden;
display:flex;flex-direction:column;
}
@media (min-width:768px){.form-card{padding:36px 40px 32px}}
#contactForm{display:flex;flex-direction:column;flex:1 1 auto}
.form-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:8px}
.form-head .step-meta{display:flex;align-items:baseline;gap:10px}
.form-head .step-num{font-family:var(--mono);font-size:11.5px;text-transform:uppercase;letter-spacing:.12em;color:var(--accent-2)}
.form-head .step-of{font-family:var(--mono);font-size:11.5px;text-transform:uppercase;letter-spacing:.12em;color:var(--subtle)}
.form-head .est{font-family:var(--mono);font-size:11px;color:var(--subtle);text-transform:uppercase;letter-spacing:.1em}
.progress{
height:3px;background:var(--mute-2);border-radius:var(--r-pill);
position:relative;overflow:hidden;margin:14px 0 28px;
}
.progress .bar{
position:absolute;left:0;top:0;bottom:0;width:0%;
background:linear-gradient(90deg,var(--accent-2),var(--accent));
border-radius:inherit;transition:width .5s var(--ease-out);
}
/* Step transitions */
.step-pane{display:none;animation:stepIn .4s var(--ease-out) forwards}
.step-pane.is-active{display:block}
@keyframes stepIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.step-title{font-family:var(--sans);font-weight:500;font-size:clamp(22px,2.4vw,30px);line-height:1.18;letter-spacing:-.015em;margin:0 0 6px}
.step-title .it{font-family:var(--serif);font-style:italic;font-weight:400}
.step-help{color:var(--subtle);font-size:14.5px;margin:0 0 24px;max-width:54ch}
/* Chip selectors (multi or single) */
.chip-grid{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:18px}
.chip-opt{
display:inline-flex;align-items:center;gap:8px;
padding:11px 16px;border-radius:var(--r-pill);
background:var(--paper);border:1px solid var(--line);
font-size:14.5px;font-weight:500;color:var(--ink);
cursor:pointer;transition:all .2s var(--ease-out);
user-select:none;
}
.chip-opt:hover{border-color:var(--ink);background:var(--mute)}
.chip-opt input{position:absolute;opacity:0;pointer-events:none}
.chip-opt .tick{
width:16px;height:16px;border-radius:50%;border:1.5px solid var(--line);
display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
transition:all .2s var(--ease-out);
}
.chip-opt .tick svg{opacity:0;transform:scale(.6);transition:all .2s var(--ease-out);width:9px;height:9px}
.chip-opt.is-on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.chip-opt.is-on .tick{border-color:var(--paper);background:var(--paper)}
.chip-opt.is-on .tick svg{opacity:1;transform:scale(1);color:var(--ink)}
/* Cards (bigger selectable cards w/ description) */
.card-grid{display:grid;grid-template-columns:1fr;gap:10px;margin-bottom:18px}
@media (min-width:560px){.card-grid{grid-template-columns:1fr 1fr}}
.card-opt{
display:flex;flex-direction:column;gap:6px;
padding:16px;border-radius:var(--r-md);
background:var(--paper);border:1px solid var(--line);
cursor:pointer;transition:all .2s var(--ease-out);
position:relative;
}
.card-opt:hover{border-color:var(--ink);transform:translateY(-1px)}
.card-opt input{position:absolute;opacity:0;pointer-events:none}
.card-opt .ttl{font-weight:500;font-size:15px;color:var(--ink);display:flex;align-items:center;justify-content:space-between;gap:10px}
.card-opt .ttl .ic-tick{
width:18px;height:18px;border-radius:50%;border:1.5px solid var(--line);
display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
transition:all .2s var(--ease-out);
}
.card-opt .ttl .ic-tick svg{opacity:0;transform:scale(.6);transition:all .2s var(--ease-out);width:10px;height:10px;color:var(--paper)}
.card-opt .desc{font-size:13px;color:var(--subtle);line-height:1.4}
.card-opt.is-on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.card-opt.is-on .ttl{color:var(--paper)}
.card-opt.is-on .desc{color:rgba(247,245,238,.7)}
.card-opt.is-on .ic-tick{background:var(--paper);border-color:var(--paper)}
.card-opt.is-on .ic-tick svg{opacity:1;transform:scale(1);color:var(--ink)}
/* Field block */
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:18px}
.field-row{display:grid;grid-template-columns:1fr;gap:14px;margin-bottom:18px}
@media (min-width:560px){.field-row{grid-template-columns:1fr 1fr}}
.field-row .field{margin-bottom:0}
.label{font-size:13.5px;font-weight:500;color:var(--ink);display:flex;align-items:center;justify-content:space-between;gap:8px}
.label .opt{font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.12em;color:var(--quiet);font-weight:400}
.help{font-size:12.5px;color:var(--subtle);line-height:1.4}
input[type="text"],input[type="email"],input[type="url"],input[type="tel"],textarea,select{
width:100%;font:inherit;font-size:15px;color:var(--ink);
background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);
padding:12px 14px;outline:none;
transition:border-color .2s var(--ease-out),background .2s var(--ease-out),box-shadow .2s var(--ease-out);
}
input::placeholder,textarea::placeholder{color:var(--quiet)}
input:focus,textarea:focus,select:focus{
border-color:var(--ink);background:#fff;
box-shadow:0 0 0 4px rgba(15,15,14,.06);
}
textarea{min-height:120px;resize:vertical;line-height:1.5}
/* Custom select */
.select-wrap{position:relative}
.select-wrap::after{
content:"";position:absolute;right:18px;top:50%;width:8px;height:8px;
border-right:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);
transform:translateY(-75%) rotate(45deg);pointer-events:none;
}
select{
appearance:none;-webkit-appearance:none;
padding-right:40px;cursor:pointer;
background-image:none;
}
/* Budget display */
.budget-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:8px}
@media (min-width:560px){.budget-grid{grid-template-columns:repeat(3,1fr)}}
.budget-opt{
display:flex;flex-direction:column;gap:2px;
padding:14px 16px;border-radius:var(--r-md);
background:var(--paper);border:1px solid var(--line);
cursor:pointer;transition:all .2s var(--ease-out);position:relative;
text-align:left;
}
.budget-opt:hover{border-color:var(--ink);transform:translateY(-1px)}
.budget-opt input{position:absolute;opacity:0;pointer-events:none}
.budget-opt .v{font-weight:500;font-size:15.5px;letter-spacing:-.005em}
.budget-opt .h{font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.12em;color:var(--subtle)}
.budget-opt.is-on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.budget-opt.is-on .h{color:rgba(247,245,238,.65)}
/* Stepper nav */
.step-nav{
display:flex;align-items:center;justify-content:space-between;gap:14px;
margin-top:24px;padding-top:24px;border-top:1px solid var(--line);
}
.step-nav .left{display:flex;gap:10px;align-items:center}
.step-nav .privacy{font-size:12px;color:var(--quiet);max-width:30ch;line-height:1.4}
.btn-back{
background:transparent;color:var(--subtle);border:0;padding:10px 4px;
font-size:14px;display:inline-flex;align-items:center;gap:6px;
}
.btn-back:hover{color:var(--ink)}
.btn-back[disabled]{opacity:0;pointer-events:none}
/* Inline secondary chips inside text fields (e.g. revenue, role suggestions) */
.field-suggest{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.suggest{
font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.1em;
color:var(--subtle);padding:5px 10px;border-radius:var(--r-pill);
background:var(--mute);cursor:pointer;transition:all .15s var(--ease-out);
}
.suggest:hover{background:var(--ink);color:var(--paper)}
/* Summary review */
.review{display:flex;flex-direction:column;gap:12px;margin-bottom:8px}
.review-row{
display:flex;justify-content:space-between;gap:14px;padding:12px 0;
border-bottom:1px dashed var(--line);font-size:14px;
}
.review-row:last-child{border-bottom:0}
.review-row .k{color:var(--subtle);font-family:var(--mono);font-size:11.5px;text-transform:uppercase;letter-spacing:.1em;flex-shrink:0;min-width:120px}
.review-row .v{color:var(--ink);text-align:right;font-weight:500}
.review-row .v.empty{color:var(--quiet);font-weight:400;font-style:italic}
.review-edit{
background:transparent;color:var(--accent-2);font-size:12px;font-weight:500;padding:0;
border-bottom:1px solid var(--accent-2);margin-left:8px;
}
/* Success */
.success{
text-align:center;padding:40px 8px 16px;
}
.success .icon{
width:72px;height:72px;border-radius:50%;
background:var(--ink);color:var(--paper);
display:inline-flex;align-items:center;justify-content:center;
margin:0 auto 18px;
}
.success h3{margin-bottom:12px}
.success p{color:var(--subtle);max-width:46ch;margin:0 auto 22px}
.success .row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
/* ──────────────────────────────────────────────────────────────────
FAQ
────────────────────────────────────────────────────────────────── */
.faq{padding:48px 0 80px;border-top:1px solid var(--line)}
.faq-grid{display:grid;grid-template-columns:1fr;gap:32px}
@media (min-width:900px){.faq-grid{grid-template-columns:.9fr 1.4fr;gap:64px}}
.faq h2{margin-bottom:14px}
.faq-list{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item summary{
list-style:none;padding:22px 0;display:flex;align-items:center;justify-content:space-between;gap:18px;
cursor:pointer;font-weight:500;font-size:17px;color:var(--ink);
transition:color .2s var(--ease-out);
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:hover{color:var(--accent-2)}
.faq-item summary .plus{
width:28px;height:28px;border-radius:50%;border:1px solid var(--line);
display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
transition:all .25s var(--ease-out);
}
.faq-item[open] summary .plus{background:var(--ink);color:var(--paper);border-color:var(--ink);transform:rotate(45deg)}
.faq-item .ans{padding:0 0 22px;color:var(--ink-2);max-width:62ch;font-size:15.5px;line-height:1.55}
/* ──────────────────────────────────────────────────────────────────
FOOTER (condensed match)
────────────────────────────────────────────────────────────────── */
footer{background:var(--paper);padding:64px 0 36px;border-top:1px solid var(--line)}
.footer-grid{display:grid;grid-template-columns:1fr;gap:32px;margin-bottom:48px}
@media (min-width:768px){.footer-grid{grid-template-columns:2fr 1fr 1fr 1fr 1fr;gap:32px}}
.footer-brand p{color:var(--subtle);font-size:14.5px;max-width:30ch;margin:12px 0 24px}
.footer-col h6,.footer-col .footer-col-title{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--subtle);margin:0 0 16px;font-family:var(--mono);font-weight:500;line-height:1.2}
.footer-col ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.footer-col a{font-size:14.5px;color:var(--ink);transition:color .2s var(--ease-out)}
.footer-col a:hover{color:var(--accent)}
.footer-bottom{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;padding-top:28px;border-top:1px solid var(--line);font-size:13px;color:var(--subtle)}
.footer-bottom .legal{display:flex;gap:18px;flex-wrap:wrap}
/* Reveal */
.reveal{opacity:1;transform:none;transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
.reveal.in{opacity:1;transform:translateY(0)}
@media (prefers-reduced-motion: reduce){
.reveal{opacity:1;transform:none;transition:none}
}
/* Field validation */
.field.has-error input,.field.has-error textarea,.field.has-error select{border-color:var(--accent-2);box-shadow:0 0 0 4px rgba(177,70,36,.10)}
.error-msg{font-size:12.5px;color:var(--accent-2);display:none}
.field.has-error .error-msg{display:block}
/* ──────────────────────────────────────────────────────────────────
INSIGHTS ARCHIVE PAGE — extracted from Insights.html prototype
────────────────────────────────────────────────────────────────── */
/* HERO */
.ins-hero{padding:88px 0 16px;position:relative}
@media (min-width:1024px){.ins-hero{padding:104px 0 20px}}
.issue-bar{display:flex;flex-wrap:wrap;align-items:baseline;gap:18px 28px;border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:28px}
.issue-bar .issue-no{font-family:var(--serif);font-style:italic;font-weight:500;font-size:clamp(28px,3vw,40px);letter-spacing:-.02em;color:var(--accent-2);line-height:1}
.issue-bar .meta-pair{display:inline-flex;align-items:baseline;gap:8px;font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--subtle)}
.issue-bar .meta-pair strong{color:var(--ink);font-weight:500}
.issue-bar .spacer{flex:1}
.issue-bar .now-reading{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--subtle)}
.issue-bar .now-reading .pulse-dot{width:8px;height:8px;border-radius:50%;background:#95BF47;box-shadow:0 0 0 4px rgba(149,191,71,.18);animation:pulse 1.6s ease-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(149,191,71,.45)}80%{box-shadow:0 0 0 10px rgba(149,191,71,0)}100%{box-shadow:0 0 0 0 rgba(149,191,71,0)}}
.ins-hero h1{font-size:clamp(32px,4.5vw,72px);line-height:.96;letter-spacing:-.035em;font-weight:500;margin:0;text-wrap:balance;max-width:22ch}
.ins-hero h1 .it{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.025em}
/* `.underline` carries an animated rust swipe via ::after. Keep nowrap on
wider viewports so the swipe stretches across the whole phrase, but allow
the span to wrap naturally on phones where the line otherwise bleeds past
the viewport edge. The underline gracefully collapses to the last line. */
.ins-hero h1 .underline{position:relative;white-space:nowrap}
@media (max-width:768px){
.ins-hero h1 .underline{white-space:normal}
.ins-hero h1 .underline::after{display:none}
}
.ins-hero h1 .underline::after{content:"";position:absolute;left:0;right:0;bottom:6%;height:.12em;background:var(--accent);transform:scaleX(0);transform-origin:left;animation:swipeUnder 1.1s .35s var(--ease-out) forwards}
@keyframes swipeUnder{to{transform:scaleX(1)}}
.ins-hero .lede{margin-top:20px;max-width:48ch;font-size:clamp(18px,1.5vw,21px);color:var(--ink-2)}
/* EDITOR'S PICK */
.picks{padding:24px 0 48px}
@media (min-width:1024px){.picks{padding:32px 0 64px}}
.picks-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:32px}
.picks-head .picks-title{font-family:var(--sans);font-weight:500;font-size:clamp(22px,2.2vw,30px);letter-spacing:-.015em}
.picks-head .picks-title .it{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--accent-2)}
.picks-head .picks-meta{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--subtle)}
.picks-grid{display:grid;grid-template-columns:1fr;gap:20px}
@media (min-width:900px){.picks-grid{grid-template-columns:1.1fr 0.9fr 0.85fr;gap:24px;align-items:stretch}}
.pick{position:relative;display:block;overflow:hidden;border-radius:var(--r-xl);background:var(--ink-2);color:var(--paper);isolation:isolate;transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out)}
.pick:hover{box-shadow:var(--shadow-3)}
.pick .img{position:absolute;inset:0;z-index:1;overflow:hidden}
.pick .img img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease-out),filter .6s var(--ease-out);filter:saturate(.92) contrast(1.02)}
.pick:hover .img img{transform:scale(1.06);filter:saturate(1) contrast(1.05)}
.pick .overlay{position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(180deg,rgba(15,15,14,.42) 0%,rgba(15,15,14,0) 22%,rgba(15,15,14,0) 45%,rgba(15,15,14,.78) 88%,rgba(15,15,14,.96) 100%),radial-gradient(120% 80% at 50% 100%,rgba(201,83,46,.18),transparent 60%);mix-blend-mode:multiply}
.pick .grain{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:.5;mix-blend-mode:overlay;background-image:url("data:image/svg+xml;utf8,")}
.pick .tag-row{position:absolute;top:18px;left:18px;right:18px;display:flex;justify-content:space-between;align-items:flex-start;gap:12px;z-index:4}
.pick .tag{display:inline-flex;align-items:center;gap:6px;background:rgba(247,245,238,.94);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--ink);padding:6px 12px;border-radius:var(--r-pill);font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.12em;font-weight:500}
.pick .tag .swatch,.post .tag .swatch,.filter-rail .pill .swatch{width:6px;height:6px;border-radius:50%;background:var(--accent);display:inline-block}
.pick .tag.cat-commerce .swatch,.post .tag.cat-commerce .swatch{background:#95BF47}
.pick .tag.cat-brand .swatch,.post .tag.cat-brand .swatch{background:var(--accent)}
.pick .tag.cat-growth .swatch,.post .tag.cat-growth .swatch{background:var(--ink)}
.pick .tag.cat-strategy .swatch,.post .tag.cat-strategy .swatch{background:var(--gold)}
.pick .tag.cat-process .swatch,.post .tag.cat-process .swatch{background:var(--forest)}
.pick .tag.cat-notes .swatch,.post .tag.cat-notes .swatch{background:var(--quiet)}
.pick .meta-time{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:rgba(247,245,238,.86);text-shadow:0 1px 8px rgba(15,15,14,.5);text-align:right}
.pick .body{position:absolute;left:24px;right:24px;bottom:24px;z-index:4;color:var(--paper)}
.pick .body h3{font-family:var(--sans);font-weight:500;letter-spacing:-.02em;line-height:1.05;color:var(--paper);margin:0 0 14px;text-wrap:balance}
.pick .body h3 .it{font-family:var(--serif);font-style:italic;font-weight:400}
.pick .body .read{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:500;color:var(--paper);border-bottom:1px solid rgba(247,245,238,.5);padding-bottom:3px;transition:border-color .25s var(--ease-out)}
.pick:hover .body .read{border-color:var(--paper)}
.pick .body .read .arr{display:inline-block;transition:transform .35s var(--ease-out)}
.pick:hover .body .read .arr{transform:translateX(4px)}
.pick.large{aspect-ratio:4/4.4;min-height:520px}
@media (min-width:900px){.pick.large{aspect-ratio:auto;min-height:580px}}
.pick.large .body h3{font-size:clamp(24px,2.4vw,34px);margin-bottom:14px}
.pick-feature-text{display:flex;flex-direction:column;background:var(--paper-2);border:1px solid var(--line-2);border-radius:var(--r-xl);padding:32px 28px;min-width:0}
@media (min-width:900px){.pick-feature-text{padding:40px 36px;min-height:580px}}
.pick-feature-text .pft-eye{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-2);margin-bottom:18px}
.pick-feature-text .pft-eye .star{width:11px;height:11px;color:var(--accent)}
.pick-feature-text .pft-meta{display:flex;flex-wrap:wrap;gap:10px 16px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--subtle);margin-bottom:20px}
.pick-feature-text .pft-meta .sep{color:var(--line-2)}
.pick-feature-text h3{font-family:var(--sans);font-weight:500;font-size:clamp(22px,2vw,30px);line-height:1.12;letter-spacing:-.018em;color:var(--ink);margin:0 0 18px;text-wrap:balance}
.pick-feature-text h3 .it{font-family:var(--serif);font-style:italic;font-weight:400}
.pick-feature-text .pft-excerpt{font-family:var(--serif);font-style:italic;font-weight:400;font-size:17px;line-height:1.55;color:var(--ink-2);margin:0 0 20px;text-wrap:pretty}
.pick-feature-text .pft-byline{display:flex;align-items:center;gap:10px;padding-top:18px;margin-top:auto;border-top:1px solid var(--line-2);font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--subtle)}
.pick-feature-text .pft-byline .av{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,#C9532E,#A03A1E);color:var(--paper);display:inline-flex;align-items:center;justify-content:center;font-family:var(--serif);font-style:italic;font-size:13px}
.pick-feature-text .pft-byline strong{color:var(--ink);font-weight:500}
.pick-feature-text .pft-cta{display:inline-flex;align-items:center;justify-content:space-between;gap:14px;margin-top:20px;background:var(--ink);color:var(--paper);padding:14px 18px;border-radius:var(--r-pill);font-family:var(--sans);font-size:14px;font-weight:500;transition:background .25s var(--ease-out),transform .35s var(--ease-out)}
.pick-feature-text .pft-cta:hover{background:var(--accent-2);transform:translateY(-1px)}
.pick-feature-text .pft-cta .arr{transition:transform .35s var(--ease-out)}
.pick-feature-text .pft-cta:hover .arr{transform:translateX(4px)}
.picks-stack{display:flex;flex-direction:column;gap:24px;min-height:0}
.pick.small{aspect-ratio:16/9;min-height:240px}
@media (min-width:900px){.pick.small{aspect-ratio:auto;min-height:0;flex:1 1 0}}
.pick.small .body h3{font-size:clamp(20px,1.8vw,26px)}
.pick-ribbon{position:absolute;top:18px;right:18px;z-index:5;background:var(--paper);color:var(--ink);border-radius:var(--r-pill);padding:8px 14px;font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;display:inline-flex;align-items:center;gap:8px;box-shadow:0 6px 18px rgba(0,0,0,.18)}
.pick-ribbon .star{width:11px;height:11px;color:var(--accent)}
/* FILTER BAR */
.filter-shell{position:sticky;top:84px;z-index:30;background:linear-gradient(180deg,rgba(247,245,238,.92),rgba(247,245,238,.78));-webkit-backdrop-filter:saturate(160%) blur(18px);backdrop-filter:saturate(160%) blur(18px);border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:48px}
@media (max-width:980px){.filter-shell{top:76px}}
.filter-rail{display:flex;align-items:center;gap:12px;padding:14px 0;overflow-x:auto;scrollbar-width:none}
.filter-rail::-webkit-scrollbar{display:none}
.filter-rail .label{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--subtle);flex-shrink:0;padding-right:8px;border-right:1px solid var(--line)}
.filter-rail .pill{flex-shrink:0;display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:var(--r-pill);background:transparent;border:1px solid var(--line);font-size:13.5px;font-weight:500;color:var(--ink);transition:all .2s var(--ease-out);cursor:pointer}
.filter-rail .pill:hover{background:var(--mute);border-color:var(--ink)}
.filter-rail .pill .swatch{width:8px;height:8px;background:var(--quiet)}
.filter-rail .pill .count{font-family:var(--mono);font-size:11px;color:var(--subtle)}
.filter-rail .pill.is-active{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.filter-rail .pill.is-active .count{color:rgba(247,245,238,.65)}
.filter-rail .pill[data-cat="brand"] .swatch{background:var(--accent)}
.filter-rail .pill[data-cat="commerce"] .swatch{background:#95BF47}
.filter-rail .pill[data-cat="growth"] .swatch{background:var(--ink)}
.filter-rail .pill[data-cat="strategy"] .swatch{background:var(--gold)}
.filter-rail .pill[data-cat="process"] .swatch{background:var(--forest)}
.filter-rail .pill[data-cat="notes"] .swatch{background:var(--quiet)}
.filter-rail .sort{margin-left:auto;flex-shrink:0;display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--subtle)}
.filter-rail .sort select{appearance:none;-webkit-appearance:none;background:transparent;border:0;outline:0;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);padding-right:14px;cursor:pointer;background-image:url("data:image/svg+xml;utf8,");background-repeat:no-repeat;background-position:right center}
/* ARCHIVE GRID */
.archive{padding:48px 0 64px}
@media (min-width:1024px){.archive{padding:64px 0 96px}}
.archive-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;grid-auto-flow:dense}
@media (max-width:768px){.archive-grid{grid-template-columns:1fr;gap:20px}}
/* Card chrome shared across the work archive (.archive-grid .post) and the
homepage featured grid (.cs-grid .case) so we have one global work-card
visual style. Layout (column count, aspect ratios) lives separately on
each grid so each can keep its own composition. */
.archive-grid .post,
.cs-grid .case{position:relative;display:block;overflow:hidden;border-radius:var(--r-xl);background:var(--ink-2);color:var(--paper);isolation:isolate;transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out);text-decoration:none}
.archive-grid .post:hover,
.cs-grid .case:hover{box-shadow:var(--shadow-3)}
.archive-grid .post .img,
.cs-grid .case .img{position:absolute;inset:0;z-index:1;overflow:hidden}
.archive-grid .post .img img,
.cs-grid .case .img img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease-out),filter .6s var(--ease-out);filter:saturate(.92) contrast(1.02)}
.archive-grid .post:hover .img img,
.cs-grid .case:hover .img img{transform:scale(1.06);filter:saturate(1) contrast(1.05)}
.archive-grid .post .overlay,
.cs-grid .case .overlay{position:absolute;inset:0;z-index:2;pointer-events:none;mix-blend-mode:multiply;background:linear-gradient(180deg,rgba(15,15,14,.38) 0%,rgba(15,15,14,0) 22%,rgba(15,15,14,0) 45%,rgba(15,15,14,.78) 88%,rgba(15,15,14,.94) 100%),radial-gradient(120% 80% at 50% 100%,rgba(201,83,46,.16),transparent 60%)}
.archive-grid .post .grain,
.cs-grid .case .grain{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:.5;mix-blend-mode:overlay;background-image:url("data:image/svg+xml;utf8,")}
.archive-grid .post .tag-row,
.cs-grid .case .tag-row{position:absolute;top:16px;left:16px;right:16px;display:flex;justify-content:space-between;align-items:flex-start;gap:12px;z-index:4}
.archive-grid .post .tag,
.cs-grid .case .tag{display:inline-flex;align-items:center;gap:6px;background:rgba(247,245,238,.94);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--ink);padding:5px 11px;border-radius:var(--r-pill);font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.12em;font-weight:500}
.archive-grid .post .meta-time,
.cs-grid .case .meta-time{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:rgba(247,245,238,.86);text-shadow:0 1px 8px rgba(15,15,14,.5);text-align:right}
.archive-grid .post .body,
.cs-grid .case .body{position:absolute;left:20px;right:20px;bottom:20px;z-index:4;color:var(--paper)}
.archive-grid .post .body h3,
.archive-grid .post .body h4,
.cs-grid .case .body h3,
.cs-grid .case .body h4{font-family:var(--sans);font-weight:500;font-size:clamp(18px,1.6vw,22px);line-height:1.15;letter-spacing:-.015em;margin:0 0 10px;text-wrap:balance;color:var(--paper)}
.archive-grid .post .body h3 .it,
.archive-grid .post .body h4 .it,
.cs-grid .case .body h3 .it,
.cs-grid .case .body h4 .it{font-family:var(--serif);font-style:italic;font-weight:400}
.archive-grid .post .body .read,
.cs-grid .case .body .read{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:500;color:var(--paper);border-bottom:1px solid rgba(247,245,238,.5);padding-bottom:2px;opacity:0;transform:translateY(8px);transition:opacity .45s var(--ease-out),transform .45s var(--ease-out),border-color .25s var(--ease-out)}
.archive-grid .post:hover .body .read,
.cs-grid .case:hover .body .read{opacity:1;transform:translateY(0);border-color:var(--paper)}
.archive-grid .post .body .read .arr,
.cs-grid .case .body .read .arr{display:inline-block;transition:transform .35s var(--ease-out)}
.archive-grid .post:hover .body .read .arr,
.cs-grid .case:hover .body .read .arr{transform:translateX(3px)}
.archive-grid .post:focus-visible,
.cs-grid .case:focus-visible{outline:3px solid var(--accent);outline-offset:4px}
@media (min-width:769px){
/* Aspect ratios chosen so size-wide / size-tall / size-third all land at
~470px tall — when paired in a row (wide+third, wide+tall, third+third)
the tiles align flush instead of staircasing. size-half+half and
size-full keep their own natural rhythm since they pair only with
themselves. */
.archive-grid .post.size-tall{grid-column:span 4;aspect-ratio:4/5}
.archive-grid .post.size-wide{grid-column:span 8;aspect-ratio:5/3}
.archive-grid .post.size-square{grid-column:span 4;aspect-ratio:1/1}
.archive-grid .post.size-full{grid-column:span 12;aspect-ratio:21/8}
.archive-grid .post.size-half{grid-column:span 6;aspect-ratio:4/3}
.archive-grid .post.size-third{grid-column:span 4;aspect-ratio:4/5}
}
@media (max-width:768px){.archive-grid .post{aspect-ratio:4/5}}
/* Note: size-full intentionally inherits the standard h4 size so all card
titles read at one consistent scale across the grid. */
.archive-grid .post.text-only{background:var(--paper-2);color:var(--ink);border:1px solid var(--line)}
.archive-grid .post.text-only::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,var(--paper-2),var(--mute))}
/* Fade the long excerpt body INTO the card background just above the
.body row, so the title + Read link sit cleanly on top with no overlap.
::after sits between the excerpt (z:2) and the title/link group (z:4). */
.archive-grid .post.text-only::after{content:"";position:absolute;left:0;right:0;bottom:0;height:50%;z-index:3;pointer-events:none;background:linear-gradient(180deg,rgba(236,232,220,0) 0%,rgba(236,232,220,.65) 35%,var(--mute) 70%)}
.archive-grid .post.text-only .img,.archive-grid .post.text-only .overlay,.archive-grid .post.text-only .grain{display:none}
.archive-grid .post.text-only .tag{background:var(--paper);color:var(--ink);border:1px solid var(--line)}
.archive-grid .post.text-only .meta-time{color:var(--subtle);text-shadow:none}
.archive-grid .post.text-only .body{color:var(--ink);z-index:4}
.archive-grid .post.text-only .body h3,
.archive-grid .post.text-only .body h4{color:var(--ink)}
.archive-grid .post.text-only .body .read{color:var(--ink);border-color:var(--line);opacity:1;transform:none}
.archive-grid .post.text-only:hover .body .read{border-color:var(--ink)}
.archive-grid .post.text-only:hover{box-shadow:var(--shadow-2);border-color:var(--ink)}
.archive-grid .post.text-only .post-excerpt{position:absolute;left:20px;right:20px;top:64px;z-index:2;font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(20px,1.8vw,26px);line-height:1.18;color:var(--ink-2);letter-spacing:-.01em;text-wrap:balance}
.archive-grid .post.text-only.size-half .post-excerpt{font-size:clamp(22px,2vw,30px)}
.archive-grid .post.text-only.size-wide .post-excerpt{font-size:clamp(24px,2.4vw,34px);max-width:32ch}
.archive-grid .post.quote{background:var(--ink);color:var(--paper);border:1px solid var(--ink)}
.archive-grid .post.quote::before{content:"";position:absolute;inset:0;z-index:1;background:radial-gradient(120% 80% at 0% 0%,rgba(201,83,46,.22),transparent 50%)}
.archive-grid .post.quote .img,.archive-grid .post.quote .overlay,.archive-grid .post.quote .grain{display:none}
.archive-grid .post.quote .tag{background:rgba(247,245,238,.12);color:var(--paper);border:1px solid rgba(247,245,238,.18);-webkit-backdrop-filter:none;backdrop-filter:none}
.archive-grid .post.quote .meta-time{color:rgba(247,245,238,.62)}
.archive-grid .post.quote .body{position:absolute;left:24px;right:24px;bottom:24px;z-index:4}
.archive-grid .post.quote .quote-mark{position:absolute;left:18px;top:48px;z-index:3;font-family:var(--serif);font-style:italic;font-weight:400;color:var(--accent);font-size:clamp(120px,16vw,200px);line-height:.6;pointer-events:none}
.archive-grid .post.quote .quote-text{position:absolute;left:24px;right:24px;top:84px;z-index:4;font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(22px,2vw,30px);line-height:1.18;letter-spacing:-.012em;color:var(--paper);text-wrap:balance}
.archive-grid .post.quote .quote-attr{position:absolute;left:24px;right:24px;bottom:24px;z-index:4;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(247,245,238,.7)}
.archive-grid .post.accent{background:var(--accent-soft);color:var(--ink);border:1px solid rgba(201,83,46,.32)}
.archive-grid .post.accent::before{content:"";position:absolute;inset:0;z-index:1;background:radial-gradient(120% 80% at 100% 0%,rgba(201,83,46,.18),transparent 55%)}
.archive-grid .post.accent .img,.archive-grid .post.accent .overlay,.archive-grid .post.accent .grain{display:none}
.archive-grid .post.accent .tag{background:rgba(247,245,238,.7);color:var(--accent-2);border:1px solid rgba(201,83,46,.32)}
.archive-grid .post.accent .tag .swatch{background:var(--accent-2)}
.archive-grid .post.accent .meta-time{color:var(--accent-2);text-shadow:none}
.archive-grid .post.accent .body{color:var(--ink)}
.archive-grid .post.accent .body h3,
.archive-grid .post.accent .body h4{color:var(--ink)}
.archive-grid .post.accent .body h3 .it,
.archive-grid .post.accent .body h4 .it{color:var(--accent-2)}
.archive-grid .post.accent .body .read{color:var(--accent-2);border-color:var(--accent-2);opacity:1;transform:none}
.archive-grid .post.accent .post-num{position:absolute;right:18px;bottom:18px;z-index:2;font-family:var(--serif);font-style:italic;font-weight:400;color:rgba(201,83,46,.28);font-size:clamp(80px,10vw,140px);line-height:1;pointer-events:none}
.issue-divider{grid-column:1 / -1;display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;gap:24px;padding:24px 0 4px;border-top:1px solid var(--line)}
.issue-divider .label{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--subtle)}
.issue-divider .title{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(22px,2.4vw,32px);letter-spacing:-.015em;line-height:1.05;color:var(--ink-2)}
.issue-divider .title em{font-style:italic;color:var(--accent-2)}
.issue-divider .count{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--subtle)}
@media (max-width:768px){.issue-divider{grid-template-columns:1fr;gap:6px}}
/* THE BRIEF — newsletter band. Container-query layout: single column when its
own width is < 720px (mobile, narrow read-col, archive on small viewport),
two column above. Color treatments are context-scoped: dark default for the
archive, light paper variant when used in article contexts (.read-col, .art-tail). */
.brief{
grid-column:1 / -1;
margin:0;
background:var(--ink); color:var(--paper);
border-radius:var(--r-xl);
padding:36px 24px;
position:relative; overflow:hidden;
display:grid; grid-template-columns:1fr; gap:24px;
isolation:isolate;
container-type:inline-size;
}
.brief::before{content:"";position:absolute;inset:0;z-index:0;background:radial-gradient(60% 60% at 0% 100%,rgba(201,83,46,.32),transparent 60%),radial-gradient(50% 50% at 100% 0%,rgba(149,191,71,.18),transparent 60%);pointer-events:none}
.brief>*{position:relative;z-index:1;min-width:0}
.brief .eyebrow{color:rgba(247,245,238,.7)}
.brief .eyebrow .dot{background:var(--accent)}
.brief h2,.brief h3{
color:var(--paper);
font-family:var(--sans); font-weight:500;
font-size:clamp(24px,5.5cqw,38px);
line-height:1.06; letter-spacing:-.018em;
margin:14px 0 14px;
max-width:24ch; text-wrap:balance;
}
.brief h2 .it,.brief h3 .it{font-family:var(--serif);font-style:italic;font-weight:400}
.brief p{color:rgba(247,245,238,.78);font-size:16px;line-height:1.5;max-width:46ch;margin:0}
.brief-form{display:flex;flex-direction:column;gap:14px;min-width:0}
.brief-form .input-row{
display:flex;align-items:center;gap:8px;
background:rgba(247,245,238,.08);
border:1px solid rgba(247,245,238,.18);
border-radius:var(--r-pill);
padding:6px 6px 6px 16px;
min-width:0;
transition:border-color .2s var(--ease-out),background .2s var(--ease-out);
}
.brief-form .input-row:focus-within{border-color:rgba(247,245,238,.4);background:rgba(247,245,238,.12)}
.brief-form input{flex:1 1 auto;min-width:0;width:100%;background:transparent;border:0;outline:0;font-family:var(--sans);font-size:15px;color:var(--paper);padding:8px 0}
.brief-form input::placeholder{color:rgba(247,245,238,.42)}
.brief-form .btn{padding:12px 20px;font-size:14px;flex-shrink:0;white-space:nowrap}
.brief-foot{display:flex;gap:14px 18px;flex-wrap:wrap;align-items:center;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:rgba(247,245,238,.6)}
.brief-foot .ok{color:#95BF47}
/* Wide layout — kicks in when the brief itself is at least 720px wide
(full container in archive / .art-tail; not in narrow .read-col) */
@container (min-width: 720px){
.brief{
grid-template-columns:1.2fr 1fr;
padding:56px 48px;
gap:48px;
align-items:center;
}
.brief h2,.brief h3{font-size:clamp(28px,3.6cqw,46px); max-width:20ch}
.brief p{font-size:17px}
}
@container (min-width: 900px){
.brief{padding:64px 56px;gap:56px}
}
/* Article context — light paper variant per the Insight Article prototype.
Applied whenever the brief lives inside a reading-column or article tail. */
.read-col .brief,
.art-tail .brief{
background:var(--paper-2); color:var(--ink);
border:1px solid var(--line-2);
}
.read-col .brief::before,
.art-tail .brief::before{
background:radial-gradient(60% 60% at 100% 100%,rgba(201,83,46,.10),transparent 60%);
}
.read-col .brief .eyebrow,
.art-tail .brief .eyebrow{color:var(--subtle)}
.read-col .brief h2,.read-col .brief h3,
.art-tail .brief h2,.art-tail .brief h3{color:var(--ink)}
.read-col .brief h2 .it,.read-col .brief h3 .it,
.art-tail .brief h2 .it,.art-tail .brief h3 .it{color:var(--accent-2)}
.read-col .brief p,
.art-tail .brief p{color:var(--subtle)}
.read-col .brief-form .input-row,
.art-tail .brief-form .input-row{background:var(--paper);border:1px solid var(--line)}
.read-col .brief-form .input-row:focus-within,
.art-tail .brief-form .input-row:focus-within{border-color:var(--ink);background:#fff}
.read-col .brief-form input,
.art-tail .brief-form input{color:var(--ink)}
.read-col .brief-form input::placeholder,
.art-tail .brief-form input::placeholder{color:var(--subtle)}
.read-col .brief-foot,
.art-tail .brief-foot{color:var(--subtle)}
.read-col .brief-foot .ok,
.art-tail .brief-foot .ok{color:#5a7d2e}
/* Inside the narrow reading column the brief should always be single column,
regardless of its own width (the column is ~760px max). */
.read-col .brief{grid-template-columns:1fr; padding:36px 24px; gap:24px}
.read-col .brief h2,.read-col .brief h3{font-size:clamp(22px,4.5vw,30px); max-width:24ch}
.read-col .brief p{font-size:15.5px}
/* SERIES STRIP */
.series-section{padding:32px 0 96px;background:var(--paper)}
.series-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:28px}
.series-head .h2{max-width:18ch}
.series-rail{display:flex;gap:18px;overflow-x:auto;padding:8px 4px 24px;scrollbar-width:thin;scrollbar-color:var(--line) transparent;scroll-snap-type:x mandatory}
.series-rail::-webkit-scrollbar{height:6px}
.series-rail::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px}
.series-card{flex:0 0 320px;scroll-snap-align:start;background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px;display:flex;flex-direction:column;gap:14px;transition:transform .35s var(--ease-out),border-color .35s var(--ease-out),box-shadow .35s var(--ease-out);text-decoration:none}
.series-card:hover{border-color:var(--ink);box-shadow:var(--shadow-2);transform:translateY(-2px)}
.series-card .num{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--accent-2);font-size:36px;line-height:1;letter-spacing:-.02em}
.series-card h4{font-family:var(--sans);font-weight:500;font-size:20px;line-height:1.18;letter-spacing:-.015em;margin:0;color:var(--ink);text-wrap:balance}
.series-card h4 .it{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--accent-2)}
.series-card p{margin:0;color:var(--subtle);font-size:14px;line-height:1.45}
.series-card .foot{margin-top:auto;display:flex;justify-content:space-between;align-items:baseline;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--subtle)}
.series-card .foot .arr{color:var(--ink);display:inline-flex;align-items:center;gap:6px}
/* category filter visibility */
body.cat-filter-brand .post:not(.cat-brand):not(.is-pinned){display:none}
body.cat-filter-commerce .post:not(.cat-commerce):not(.is-pinned){display:none}
body.cat-filter-growth .post:not(.cat-growth):not(.is-pinned){display:none}
body.cat-filter-strategy .post:not(.cat-strategy):not(.is-pinned){display:none}
body.cat-filter-process .post:not(.cat-process):not(.is-pinned){display:none}
body.cat-filter-notes .post:not(.cat-notes):not(.is-pinned){display:none}
body.is-filtered .issue-divider{display:none}
body.is-filtered .brief{display:none}
/* Theme overrides — kill core block wrapper padding/margin on insights blocks */
.wp-block-cwp-insights-hero,
.wp-block-cwp-insights-picks,
.wp-block-cwp-insights-filter-rail,
.wp-block-cwp-insights-archive-grid,
.wp-block-cwp-insights-series-rail{
max-width:100% !important; padding:0 !important; margin:0 !important;
}
/* ──────────────────────────────────────────────────────────────────
INSIGHT ARTICLE — extracted from "Insight Article.html" prototype
Single-post template chrome + in-content blocks
────────────────────────────────────────────────────────────────── */
/* HEAD */
.art-head{padding:128px 0 32px}
@media (min-width:1024px){.art-head{padding:148px 0 40px}}
.art-crumbs{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--subtle);margin-bottom:36px}
.art-crumbs a{color:var(--subtle);transition:color .2s var(--ease-out)}
.art-crumbs a:hover{color:var(--ink)}
.art-crumbs .sep{opacity:.45}
.art-crumbs .here{color:var(--ink);font-weight:500}
.art-meta-bar{display:flex;flex-wrap:wrap;align-items:baseline;gap:18px 28px;border-bottom:1px solid var(--line);padding-bottom:18px;margin-bottom:48px}
.art-meta-bar .meta-pair{display:inline-flex;align-items:baseline;gap:8px;font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--subtle)}
.art-meta-bar .meta-pair strong{color:var(--ink);font-weight:500}
.art-meta-bar .spacer{flex:1}
.art-headline-grid{display:grid;grid-template-columns:1fr;gap:32px}
@media (min-width:1024px){.art-headline-grid{grid-template-columns:minmax(0,1fr) 320px;gap:64px;align-items:end}}
.art-tag{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-2);margin-bottom:24px}
.art-tag .swatch{width:8px;height:8px;border-radius:50%;background:var(--accent);display:inline-block}
.art-title{font-family:var(--sans);font-weight:500;font-size:clamp(34px,4.8vw,76px);line-height:.96;letter-spacing:-.035em;margin:0;text-wrap:balance;color:var(--ink)}
.art-title .it{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.025em}
.art-title .underline{position:relative;white-space:nowrap}
.art-title .underline::after{content:"";position:absolute;left:0;right:0;bottom:6%;height:.10em;background:var(--accent);transform:scaleX(0);transform-origin:left;animation:swipeUnder 1.1s .35s var(--ease-out) forwards}
.art-deck{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(20px,2vw,28px);line-height:1.32;letter-spacing:-.012em;color:var(--ink-2);margin:32px 0 0;max-width:36ch}
.art-byline{display:flex;flex-direction:column;gap:18px;padding:24px 0 0;border-top:1px solid var(--line);font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--subtle)}
@media (min-width:1024px){.art-byline{border-top:0;padding:0}}
.art-byline .row{display:flex;gap:14px;align-items:center}
.art-byline .row strong{color:var(--ink);font-weight:500;font-family:var(--mono)}
.art-byline .avatar{width:44px;height:44px;border-radius:50%;background:var(--mute) center/cover no-repeat;flex-shrink:0;border:1px solid var(--line);position:relative;overflow:hidden}
.art-byline .avatar.dani{background:linear-gradient(135deg,#C9532E 0%,#A03A1E 100%);color:var(--paper);display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-style:italic;font-weight:500;font-size:18px;letter-spacing:0;text-transform:none}
.art-byline .stack{display:flex;flex-direction:column;gap:4px}
.art-byline .stack .name{font-family:var(--sans);font-size:15px;letter-spacing:-.005em;text-transform:none;color:var(--ink);font-weight:500}
.art-byline .stack .role{font-family:var(--mono);font-size:11px;letter-spacing:.14em}
.art-byline .stat-row{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.art-byline .stat{display:flex;flex-direction:column;gap:4px}
.art-byline .stat .v{font-family:var(--serif);font-style:italic;font-size:24px;color:var(--ink);text-transform:none;letter-spacing:-.01em;font-weight:500;line-height:1}
.art-byline .stat .l{font-size:10.5px;letter-spacing:.14em}
.art-actions{display:flex;gap:8px;flex-wrap:wrap}
.share-btn{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:var(--r-pill);border:1px solid var(--line);color:var(--ink);font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;background:transparent;transition:all .2s var(--ease-out);cursor:pointer}
.share-btn:hover{background:var(--mute);border-color:var(--ink)}
.share-btn svg{width:13px;height:13px}
/* COVER */
.art-cover{margin:32px 0 0;position:relative}
.art-cover-frame{position:relative;overflow:hidden;border-radius:var(--r-xl);aspect-ratio:21/10;background:var(--ink-2)}
.art-cover-frame img{width:100%;height:100%;object-fit:cover;filter:saturate(.94) contrast(1.04);transform:scale(1.02);animation:slowZoom 18s ease-out forwards}
@keyframes slowZoom{to{transform:scale(1)}}
.art-cover-frame .grain{position:absolute;inset:0;pointer-events:none;opacity:.5;mix-blend-mode:overlay;background-image:url("data:image/svg+xml;utf8,")}
.art-cover-frame .vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 80% at 50% 0%,rgba(15,15,14,.18),transparent 55%)}
.art-caption{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;padding:14px 4px 0;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--subtle)}
/* READ GRID */
.art-body{padding:64px 0 0}
@media (min-width:1024px){.art-body{padding:88px 0 0}}
.read-grid{display:grid;grid-template-columns:1fr;gap:48px}
@media (min-width:1024px){.read-grid{grid-template-columns:220px minmax(0,1fr) 80px;column-gap:56px;max-width:1080px;margin:0 auto}}
@media (min-width:1280px){.read-grid{grid-template-columns:240px minmax(0,760px) 140px;column-gap:64px}}
.read-toc{position:sticky;top:96px;align-self:start;display:none;font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--subtle)}
@media (min-width:1024px){.read-toc{display:block;padding-top:8px;max-width:240px;justify-self:end}}
.read-toc .label{display:block;color:var(--ink);margin-bottom:18px}
.read-toc ol{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:14px}
.read-toc li{display:grid;grid-template-columns:24px 1fr;gap:10px;align-items:baseline}
.read-toc li .n{color:var(--quiet);font-family:var(--mono);font-size:10.5px;letter-spacing:.14em}
.read-toc a{color:var(--subtle);transition:color .2s var(--ease-out);text-transform:none;letter-spacing:0;font-family:var(--sans);font-size:13.5px;line-height:1.3}
.read-toc a:hover{color:var(--ink)}
.read-toc li.is-active a{color:var(--ink);font-weight:500}
.read-toc li.is-active .n{color:var(--accent-2)}
/* READ COL TYPOGRAPHY */
.read-col{min-width:0;font-family:var(--serif);font-size:20px;line-height:1.6;color:var(--ink-2);letter-spacing:-.005em}
@media (min-width:768px){.read-col{font-size:21px;line-height:1.62}}
.read-col p{margin:0 0 26px;text-wrap:pretty}
.read-col p > strong{color:var(--ink);font-weight:600}
.read-col p > em{font-style:italic}
.read-col a:not(.cta-inline):not(.btn):not(.cite){color:var(--accent-2);border-bottom:1px solid currentColor;transition:color .2s var(--ease-out),border-color .2s var(--ease-out)}
.read-col a:not(.cta-inline):not(.btn):not(.cite):hover{color:var(--accent-3)}
.read-col h2{font-family:var(--sans);font-weight:500;font-size:clamp(28px,3vw,40px);line-height:1.06;letter-spacing:-.02em;color:var(--ink);margin:64px 0 18px;text-wrap:balance}
.read-col h2 .it{font-family:var(--serif);font-style:italic;font-weight:400}
.read-col h2 .num{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--accent-2);font-size:.6em;margin-right:14px;letter-spacing:-.02em}
.read-col h3{font-family:var(--sans);font-weight:500;font-size:clamp(20px,1.6vw,22px);line-height:1.25;letter-spacing:-.012em;color:var(--ink);margin:40px 0 12px}
.read-col h3 .it{font-family:var(--serif);font-style:italic;font-weight:400}
.read-col ul,.read-col ol{margin:0 0 26px;padding-left:1.2em}
.read-col li{margin-bottom:12px;padding-left:6px}
.read-col li::marker{color:var(--accent-2);font-family:var(--serif);font-style:italic}
.read-col .drop::first-letter{font-family:var(--serif);font-style:italic;font-weight:500;font-size:5.4em;line-height:.85;float:left;padding:8px 14px 0 0;margin-top:6px;color:var(--accent-2);letter-spacing:-.04em}
.read-col .drop::first-line{font-variant:small-caps;letter-spacing:.02em}
.read-col .lede-para{font-family:var(--sans);font-weight:400;font-size:clamp(20px,1.7vw,24px);line-height:1.4;color:var(--ink);letter-spacing:-.012em;margin-bottom:36px}
/* SECTION DIVIDER */
.section-divider{display:flex;align-items:center;justify-content:center;gap:18px;margin:64px 0;font-family:var(--serif);font-style:italic;color:var(--accent-2);font-size:24px;letter-spacing:.08em}
.section-divider::before,.section-divider::after{content:"";flex:1;height:1px;background:var(--line)}
.section-divider .glyph{font-family:var(--serif);font-style:italic;font-size:22px}
/* PULL QUOTE */
.pull-quote{position:relative;margin:48px -8px 48px;padding:8px 28px;border-left:2px solid var(--accent)}
.pull-quote .qmark{position:absolute;left:-22px;top:-22px;z-index:0;font-family:var(--serif);font-style:italic;font-weight:400;color:var(--accent);opacity:.18;font-size:120px;line-height:1;pointer-events:none}
.pull-quote q,.pull-quote p{display:block;quotes:none;font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(24px,2.4vw,32px);line-height:1.22;letter-spacing:-.015em;color:var(--ink);margin:0;text-wrap:balance}
.pull-quote q::before,.pull-quote q::after{content:""}
.pull-quote .attr{display:block;margin-top:14px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--subtle)}
/* MARGIN NOTE */
.margin-note{margin:18px 0 26px;padding:16px 18px;background:var(--paper-2);border:1px solid var(--line-2);border-radius:var(--r-md);font-family:var(--sans);font-style:normal;font-weight:400;font-size:14.5px;line-height:1.5;color:var(--subtle);letter-spacing:0;position:relative}
.margin-note .label{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-2);margin-bottom:8px}
.margin-note p{font-family:var(--sans);font-size:14.5px;line-height:1.5;color:var(--ink-2);margin:0}
@media (min-width:1280px){
.margin-note.right{float:right;clear:right;width:280px;margin:6px -120px 22px 28px}
.margin-note.left{float:left;clear:left;width:280px;margin:6px 28px 22px -120px}
}
/* STAT STRIP */
.stat-strip{display:grid;grid-template-columns:1fr;gap:24px;margin:36px 0 44px;padding:32px 28px;background:var(--paper-2);border:1px solid var(--line-2);border-radius:var(--r-lg)}
@media (min-width:600px){.stat-strip{grid-template-columns:repeat(3,1fr);gap:36px}}
.stat-strip .stat{display:flex;flex-direction:column;gap:8px}
.stat-strip .stat .num{font-family:var(--serif);font-style:italic;font-weight:500;font-size:clamp(40px,4vw,56px);line-height:.95;letter-spacing:-.02em;color:var(--accent-2)}
.stat-strip .stat .lab{font-family:var(--sans);font-size:14px;line-height:1.4;color:var(--subtle);letter-spacing:0}
.stat-strip .stat .lab strong{color:var(--ink);font-weight:500;display:block;margin-bottom:4px;font-size:15px}
.stat-strip .stat .src{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--quiet);margin-top:6px;display:block}
/* TAKEAWAY */
.takeaway{margin:36px 0 44px;padding:24px 26px 26px;border-radius:var(--r-md);background:var(--accent-soft);border:1px solid rgba(201,83,46,.32);position:relative}
.takeaway .label{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-2);margin-bottom:10px;display:flex;align-items:center;gap:8px}
.takeaway .label svg{width:14px;height:14px;color:var(--accent-2)}
.takeaway p{font-family:var(--sans);font-size:17px;line-height:1.5;color:var(--ink);margin:0;font-weight:400;letter-spacing:-.005em}
.takeaway p strong{font-weight:600}
/* INLINE FIGURE */
.read-figure{margin:40px 0}
.read-figure .frame{border-radius:var(--r-lg);overflow:hidden;background:var(--ink-2);aspect-ratio:16/10;position:relative}
.read-figure .frame img{width:100%;height:100%;object-fit:cover;filter:saturate(.94) contrast(1.04)}
.read-figure .frame .grain{position:absolute;inset:0;pointer-events:none;opacity:.4;mix-blend-mode:overlay;background-image:url("data:image/svg+xml;utf8,")}
.read-figure figcaption{display:flex;gap:18px;justify-content:space-between;flex-wrap:wrap;margin-top:14px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--subtle)}
.read-figure figcaption .desc{font-family:var(--serif);font-style:italic;font-size:15px;letter-spacing:0;text-transform:none;color:var(--ink-2);flex:1;min-width:200px}
/* COMPARE TABLE */
.compare{margin:36px 0 44px;background:var(--paper-2);border:1px solid var(--line-2);border-radius:var(--r-lg);overflow:hidden}
.compare-row{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--line-2)}
.compare-row:last-child{border-bottom:0}
.compare-row.head{background:var(--ink);color:var(--paper)}
.compare-row.head .cell{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(247,245,238,.85)}
.compare-row.head .cell strong{color:var(--paper);font-weight:500}
.compare .cell{padding:18px 22px;font-family:var(--sans);font-size:15px;line-height:1.45;color:var(--ink);border-right:1px solid var(--line-2)}
.compare .cell:last-child{border-right:0}
.compare .cell .k{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--subtle);margin-bottom:6px}
.compare .cell.accent{background:rgba(201,83,46,.07)}
.compare .cell.accent .k{color:var(--accent-2)}
/* CITE */
.cite{display:inline-flex;align-items:baseline;gap:4px;font-family:var(--sans);font-size:.7em;vertical-align:super;color:var(--accent-2);border:0 !important;text-decoration:none;padding:0 2px;line-height:1;letter-spacing:.02em}
/* CTA INLINE (Blueprint) */
.cta-inline{display:block;margin:48px -8px;position:relative;overflow:hidden;background:var(--ink);color:var(--paper);border-radius:var(--r-xl);padding:36px 32px;isolation:isolate;transition:transform .35s var(--ease-out),box-shadow .35s var(--ease-out)}
.cta-inline:hover{transform:translateY(-2px);box-shadow:var(--shadow-3)}
.cta-inline::before{content:"";position:absolute;inset:0;z-index:0;background:radial-gradient(70% 90% at 0% 100%,rgba(201,83,46,.34),transparent 60%),radial-gradient(60% 80% at 100% 0%,rgba(149,191,71,.18),transparent 55%)}
.cta-inline > *{position:relative;z-index:1}
.cta-inline .grid{display:grid;grid-template-columns:1fr;gap:24px;align-items:center}
@media (min-width:768px){.cta-inline .grid{grid-template-columns:1.4fr auto;gap:36px}}
.cta-inline .eyebrow{color:rgba(247,245,238,.7)}
.cta-inline .eyebrow .dot{background:var(--accent)}
.cta-inline h3{font-family:var(--sans);font-weight:500;font-size:clamp(22px,2.2vw,30px);line-height:1.1;letter-spacing:-.018em;color:var(--paper);margin:12px 0 10px;text-wrap:balance}
.cta-inline h3 .it{font-family:var(--serif);font-style:italic;font-weight:400}
.cta-inline p{font-family:var(--sans);font-size:15.5px;line-height:1.5;color:rgba(247,245,238,.8);margin:0;max-width:48ch}
.cta-inline .actions{display:flex;gap:10px;flex-wrap:wrap}
.cta-inline .meta-strip{display:flex;gap:18px;flex-wrap:wrap;margin-top:16px;padding-top:16px;border-top:1px solid rgba(247,245,238,.16);font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(247,245,238,.6)}
/* CTA QUIET */
.cta-quiet{display:flex;align-items:flex-start;gap:18px;padding:24px;margin:36px 0 44px;background:var(--paper-2);border:1px solid var(--line-2);border-left:3px solid var(--accent);border-radius:var(--r-md)}
.cta-quiet .ico{width:38px;height:38px;flex-shrink:0;background:var(--paper);border:1px solid var(--line);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--accent-2)}
.cta-quiet .ico svg{width:16px;height:16px}
.cta-quiet .body{flex:1;min-width:0}
.cta-quiet h4{font-family:var(--sans);font-weight:500;font-size:16px;letter-spacing:-.005em;color:var(--ink);margin:0 0 6px}
.cta-quiet p{font-family:var(--sans);font-size:14.5px;line-height:1.5;color:var(--subtle);margin:0 0 12px}
.cta-quiet a.link{display:inline-flex;align-items:center;gap:6px;font-family:var(--sans);font-size:14px;font-weight:500;color:var(--accent-2);border-bottom:1px solid var(--accent-2);padding-bottom:1px;transition:color .2s var(--ease-out),border-color .2s var(--ease-out)}
.cta-quiet a.link:hover{color:var(--accent-3);border-color:var(--accent-3)}
.cta-quiet a.link .arr{transition:transform .25s var(--ease-out)}
.cta-quiet a.link:hover .arr{transform:translateX(3px)}
/* ART FOOT */
.art-foot{margin:64px 0 0;padding:32px 0 0;border-top:1px solid var(--line);display:grid;gap:24px}
@media (min-width:768px){.art-foot{grid-template-columns:1fr auto;align-items:center}}
.art-foot .tags{display:flex;flex-wrap:wrap;gap:8px}
.art-foot .tag{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:var(--r-pill);background:var(--mute);color:var(--ink);font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:500}
.art-foot .share-row{display:flex;gap:8px;flex-wrap:wrap}
/* AUTHOR */
.author-block{margin:64px 0 0;padding:36px 32px;background:var(--paper-2);border:1px solid var(--line-2);border-radius:var(--r-xl);display:flex;flex-direction:column;gap:24px;min-width:0}
@media (min-width:768px){.author-block{padding:44px 40px;gap:28px}}
.author-block .author-head{display:flex;align-items:center;gap:20px;padding-bottom:24px;border-bottom:1px solid var(--line-2);min-width:0}
.author-block .avatar-lg{width:72px;height:72px;flex-shrink:0;border-radius:50%;background:linear-gradient(135deg,#C9532E 0%,#A03A1E 100%);color:var(--paper);display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-style:italic;font-weight:500;font-size:32px;border:1px solid var(--line)}
.author-block .info{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1}
.author-block .info .role{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-2)}
.author-block .info .name{font-family:var(--sans);font-weight:500;font-size:20px;line-height:1.25;letter-spacing:-.012em;color:var(--ink);text-wrap:balance}
.author-block .bio{font-family:var(--serif);font-style:italic;font-weight:400;font-size:17px;line-height:1.55;color:var(--ink-2);margin:0}
.author-block .actions{display:flex;gap:10px;flex-wrap:wrap;min-width:0}
.author-block .actions .btn{flex:1 1 auto;justify-content:center;text-align:center;min-width:0}
@media (min-width:560px){.author-block .actions .btn{flex:0 0 auto}}
/* POST CTA */
.post-cta{margin:64px 0 0;position:relative;overflow:hidden;background:var(--ink);color:var(--paper);border-radius:var(--r-xl);padding:56px 32px;isolation:isolate}
@media (min-width:768px){.post-cta{padding:88px 64px}}
.post-cta::before{content:"";position:absolute;inset:0;z-index:0;background:radial-gradient(60% 80% at 0% 100%,rgba(201,83,46,.36),transparent 58%),radial-gradient(50% 70% at 100% 0%,rgba(149,191,71,.18),transparent 55%)}
.post-cta::after{content:"";position:absolute;inset:0;z-index:0;opacity:.45;mix-blend-mode:overlay;pointer-events:none;background-image:url("data:image/svg+xml;utf8,")}
.post-cta > *{position:relative;z-index:1}
.post-cta .pc-grid{display:grid;grid-template-columns:1fr;gap:36px;align-items:center}
.post-cta .pc-grid > *{min-width:0}
@media (min-width:980px){.post-cta .pc-grid{grid-template-columns:1.2fr 1fr;gap:48px}}
@media (min-width:1200px){.post-cta .pc-grid{gap:64px}}
.post-cta .eyebrow{color:rgba(247,245,238,.7)}
.post-cta .eyebrow .dot{background:var(--accent)}
.post-cta h2{color:var(--paper);margin:18px 0 22px;font-size:clamp(34px,4.6vw,60px);letter-spacing:-.022em}
.post-cta h2 .it{font-family:var(--serif);font-style:italic;font-weight:400}
.post-cta p{color:rgba(247,245,238,.82);font-size:18px;line-height:1.5;max-width:46ch;margin:0 0 28px}
.post-cta .row{display:flex;gap:12px;flex-wrap:wrap}
.post-cta .pc-card{background:rgba(247,245,238,.06);border:1px solid rgba(247,245,238,.16);border-radius:var(--r-lg);padding:28px;min-width:0}
.post-cta .pc-card h4{font-family:var(--sans);font-weight:500;font-size:18px;letter-spacing:-.01em;color:var(--paper);margin:0 0 6px}
.post-cta .pc-card .pc-eye{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(201,83,46,1);display:inline-flex;align-items:center;gap:6px;margin-bottom:14px;flex-wrap:wrap}
.post-cta .pc-card .pc-eye .dot{width:6px;height:6px;border-radius:50%;background:currentColor;display:inline-block}
.post-cta .pc-card ul{list-style:none;padding:0;margin:14px 0 22px;display:flex;flex-direction:column;gap:10px}
.post-cta .pc-card li{display:flex;gap:12px;align-items:flex-start;font-family:var(--sans);font-size:14.5px;line-height:1.45;color:rgba(247,245,238,.85)}
.post-cta .pc-card li .check{flex-shrink:0;margin-top:2px;color:var(--accent)}
.post-cta .pc-card .pc-meta{display:flex;gap:16px;flex-wrap:wrap;padding-top:18px;border-top:1px solid rgba(247,245,238,.16);font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(247,245,238,.6)}
/* RELATED */
.related-section{padding:96px 0 64px}
@media (min-width:1024px){.related-section{padding:128px 0 96px}}
.related-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:32px;border-bottom:1px solid var(--line);padding-bottom:18px}
.related-head h3{font-family:var(--sans);font-weight:500;font-size:clamp(22px,2.2vw,30px);letter-spacing:-.015em;color:var(--ink)}
.related-head h3 .it{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--accent-2)}
.related-head .all{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);border-bottom:1px solid var(--line);padding-bottom:3px;transition:border-color .2s var(--ease-out)}
.related-head .all:hover{border-color:var(--ink)}
.related-grid{display:grid;grid-template-columns:1fr;gap:24px}
@media (min-width:768px){.related-grid{grid-template-columns:repeat(3,1fr)}}
.rel{position:relative;display:block;overflow:hidden;border-radius:var(--r-xl);background:var(--ink-2);color:var(--paper);isolation:isolate;aspect-ratio:4/5;transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out);text-decoration:none}
.rel:hover{box-shadow:var(--shadow-3)}
.rel .img{position:absolute;inset:0;z-index:1;overflow:hidden}
.rel .img img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease-out),filter .6s var(--ease-out);filter:saturate(.92) contrast(1.02)}
.rel:hover .img img{transform:scale(1.06);filter:saturate(1) contrast(1.05)}
.rel .overlay{position:absolute;inset:0;z-index:2;pointer-events:none;mix-blend-mode:multiply;background:linear-gradient(180deg,rgba(15,15,14,.36) 0%,rgba(15,15,14,0) 22%,rgba(15,15,14,0) 45%,rgba(15,15,14,.78) 88%,rgba(15,15,14,.96) 100%)}
.rel .grain{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:.5;mix-blend-mode:overlay;background-image:url("data:image/svg+xml;utf8,")}
.rel .tag-row{position:absolute;top:16px;left:16px;right:16px;display:flex;justify-content:space-between;gap:12px;z-index:4}
.rel .tag{display:inline-flex;align-items:center;gap:6px;background:rgba(247,245,238,.94);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--ink);padding:5px 11px;border-radius:var(--r-pill);font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.12em;font-weight:500}
.rel .tag .swatch{width:6px;height:6px;border-radius:50%;background:var(--accent);display:inline-block}
.rel .tag.cat-commerce .swatch{background:#95BF47}
.rel .tag.cat-brand .swatch{background:var(--accent)}
.rel .tag.cat-growth .swatch{background:var(--ink)}
.rel .tag.cat-strategy .swatch{background:var(--gold)}
.rel .tag.cat-process .swatch{background:var(--forest)}
.rel .tag.cat-notes .swatch{background:var(--quiet)}
.rel .meta-time{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:rgba(247,245,238,.86);text-shadow:0 1px 8px rgba(15,15,14,.5)}
.rel .body{position:absolute;left:20px;right:20px;bottom:20px;z-index:4;color:var(--paper)}
.rel .body h4{font-family:var(--sans);font-weight:500;font-size:clamp(18px,1.6vw,22px);line-height:1.15;letter-spacing:-.012em;margin:0 0 10px;text-wrap:balance;color:var(--paper)}
.rel .body h4 .it{font-family:var(--serif);font-style:italic;font-weight:400}
.rel .body .read{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:500;color:var(--paper);border-bottom:1px solid rgba(247,245,238,.5);padding-bottom:2px;transition:border-color .25s var(--ease-out)}
.rel:hover .body .read{border-color:var(--paper)}
.rel .body .read .arr{display:inline-block;transition:transform .35s var(--ease-out)}
.rel:hover .body .read .arr{transform:translateX(3px)}
/* FLOAT RAIL */
.float-rail{display:none;position:fixed;left:max(16px,calc((100vw - 1180px) / 2 - 28px));top:50%;transform:translateY(-50%);z-index:20;flex-direction:column;gap:8px;padding:8px;background:rgba(247,245,238,.7);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--line);border-radius:var(--r-pill);opacity:0;transition:opacity .35s var(--ease-out)}
.float-rail.in{opacity:1}
@media (min-width:1280px){.float-rail{display:flex}}
.float-rail button,.float-rail a{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--ink);transition:background .2s var(--ease-out),color .2s var(--ease-out);background:transparent;border:0;cursor:pointer}
.float-rail button:hover,.float-rail a:hover{background:var(--ink);color:var(--paper)}
.float-rail svg{width:14px;height:14px}
.float-rail .sep{height:1px;background:var(--line);margin:4px 8px}
/* READING PROGRESS */
.read-progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:49;background:transparent;pointer-events:none}
.read-progress::after{content:"";display:block;height:100%;width:var(--p,0%);background:linear-gradient(90deg,var(--accent),var(--accent-3));transition:width .15s linear}
/* Theme overrides — neutralize core block padding on insight body */
.wp-block-cwp-article-cta-inline,
.wp-block-cwp-article-cta-quiet,
.wp-block-cwp-article-pull-quote,
.wp-block-cwp-article-stat-strip,
.wp-block-cwp-article-takeaway-box,
.wp-block-cwp-article-compare-table,
.wp-block-cwp-article-margin-note,
.wp-block-cwp-article-figure,
.wp-block-cwp-article-section-divider,
.wp-block-cwp-article-h2-numbered,
.wp-block-cwp-article-lede,
.wp-block-cwp-article-foot,
.wp-block-cwp-article-author,
.wp-block-cwp-article-post-cta,
.wp-block-cwp-article-brief,
.wp-block-cwp-article-related-3up{
max-width:100% !important; padding:0 !important; margin:0 !important;
}
/* Single-article wrapper override — WordPress's post_class() adds `.post` to the
on single posts, which collides with the .post archive-card styles
above (dark bg, absolute-positioned children, hidden overflow). Reset the
article wrapper so the prototype's editorial layout shows through. The actual
archive cards live inside .archive-grid, so we keep their styling intact and
only nullify the collision on the single-article wrapper. */
article.insight-single,
article.insight-single.post,
article.single,
article.single.post{
background: transparent !important;
color: inherit !important;
border-radius: 0 !important;
isolation: auto !important;
overflow: visible !important;
box-shadow: none !important;
transform: none !important;
transition: none !important;
text-decoration: none !important;
position: static !important;
aspect-ratio: auto !important;
display: block !important;
}
article.insight-single::before,
article.single::before{ content: none !important; }
article.insight-single:hover,
article.single:hover{ box-shadow: none !important; transform: none !important; }
article.insight-single:focus-visible,
article.single:focus-visible{ outline: 0 !important; }
/* Single-article TAIL — wraps author / post-cta / brief blocks at full container
width below the reading grid (TOC + sidebar rail end above this).
Inherits .container's max-width (~1200px). Adds vertical breathing room
between the reading column and the conversion section. */
.art-tail{padding:64px 0 0}
@media (min-width:1024px){.art-tail{padding:88px 0 0}}
.art-tail > .container > * + *{margin-top:24px}
@media (min-width:1024px){.art-tail > .container > * + *{margin-top:32px}}
/* The tail blocks live inside .container — kill the inner-block top margins
so spacing is controlled here (they use margin-top:64px when stacked
inside the read-col). */
.art-tail .author-block,
.art-tail .post-cta,
.art-tail .brief{ margin-top:0 }
/* Hide non-active phase stages — the [hidden] attribute is set by render.php
(and toggled by process-visualizer.js). The default browser style of
display:none gets overridden by .pv-stage{display:grid}, so spell it out. */
.pv-stage[hidden]{ display: none !important; }
/* Kinetic H1 — final override at end of stylesheet so it wins all duplicates
from wp-custom-css and earlier blocks. The transition was getting stuck
at currentTime:0 on some pages (likely a paint/layout interaction with
.reveal parent fading in). We use a CSS @keyframes animation triggered
by .in instead — animations don't suffer the "stuck transition" bug. */
@keyframes cwp-kinetic-in {
from { transform: translateY(115%); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
#kineticH1 .kinetic-word.in {
animation: cwp-kinetic-in .9s cubic-bezier(.22,1,.36,1) forwards !important;
/* Override the transition-based rules + any inline JS styles */
}
@media (prefers-reduced-motion: reduce){
#kineticH1 .kinetic-word,
#kineticH1 .kinetic-word.in {
animation: none !important;
opacity: 1 !important;
transform: none !important;
}
}
/* Kinetic H1 — make words visible by default, drop the slide-up reveal.
The transition/animation kept getting paused (in headless/automation
contexts) or stuck (cascade duplication). Words are now visible from
first paint; the .in class is harmless. Final word — overrides every
earlier .kinetic-word{opacity:0} declaration. */
#kineticH1 .kinetic-word {
opacity: 1 !important;
transform: none !important;
animation: none !important;
}
/* Hero (kinetic-simple) — final-pass overrides so the rules win over any
wp-custom-css duplicates, and apply on every page that uses the block.
.ab-hero is the section class output by cwp/hero-kinetic-simple. */
.ab-hero h1 { margin-bottom: 28px; max-width: 18ch; }
.ab-hero .lede { margin: 0 0 36px; max-width: 56ch; }
.ab-hero-cta { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.ab-hero-cta .hero-tertiary {
font-size: 14.5px; color: var(--subtle);
border-bottom: 1px solid var(--line); padding-bottom: 2px;
transition: color .2s var(--ease-out), border-color .2s var(--ease-out);
}
.ab-hero-cta .hero-tertiary:hover { color: var(--ink); border-color: var(--ink); }
/* WORK ARCHIVE — extends the Insights archive grid (.archive-grid + .post)
with a small outcome-line under each card title and minor adjustments. */
/* Outcome line sits inside .body so h4 + outcome + read share the same
left edge (.body's left:20px) and stack cleanly. Previously absolute-
positioned at bottom:56px which caused size-full + multi-line h4s to
overlap the outcome. Both selectors apply to homepage .cs-grid .case
and the work-archive .post — one global card style. */
.archive-grid .post .post-outcome,
.cs-grid .case .post-outcome {
margin: 0 0 6px;
font-family: var(--mono);
font-size: 11px;
letter-spacing: .12em;
text-transform: uppercase;
color: rgba(247,245,238,.78);
text-shadow: 0 1px 8px rgba(15,15,14,.5);
}
@media (max-width: 768px) {
.archive-grid .post .post-outcome,
.cs-grid .case .post-outcome { font-size: 10.5px; }
}
.archive-grid .post .body .read,
.cs-grid .case .body .read {
/* Show the read CTA without hover on work cards (image-led, less verbose) */
opacity: 1;
transform: none;
border-color: rgba(247,245,238,.5);
}
/* On hover, brighten the outcome line. */
.archive-grid .post:hover .post-outcome,
.cs-grid .case:hover .post-outcome {
color: rgba(247,245,238,.95);
}
/* Work filter shell — same sticky offset as Insights filter shell. */
.work-filter-shell { top: 84px; }
@media (max-width: 980px) { .work-filter-shell { top: 76px; } }
/* When the filter shell pins to the top of the viewport, extend its
blurred backdrop UPWARD to fill the area behind the island nav. The
bleed element is injected once by the rail's JS and toggled with
.is-pinned; CSS handles the visual fade-in. */
.filter-shell-bleed{
position: fixed;
top: 0; left: 0; right: 0;
height: 84px;
z-index: 28; /* below .nav-shell (50) and .filter-shell (30) */
background: linear-gradient(180deg, rgba(247,245,238,.92), rgba(247,245,238,.78));
-webkit-backdrop-filter: saturate(160%) blur(18px);
backdrop-filter: saturate(160%) blur(18px);
border-bottom: 1px solid var(--line);
pointer-events: none;
opacity: 0;
transform: translateY(-4px);
transition: opacity .22s var(--ease-out), transform .22s var(--ease-out);
}
.filter-shell-bleed.is-pinned{
opacity: 1;
transform: translateY(0);
}
@media (max-width: 980px){
.filter-shell-bleed{ height: 76px; }
}
/* Work pagination on archive */
.pagination { padding: 32px 0 96px; text-align: center; }
.pagination .nav-links { display: inline-flex; gap: 8px; align-items: center; }
.pagination .page-numbers {
display: inline-flex; align-items: center; justify-content: center;
min-width: 38px; height: 38px;
padding: 0 10px;
border-radius: var(--r-pill);
border: 1px solid var(--line);
font-family: var(--mono); font-size: 12px; letter-spacing: .12em;
text-transform: uppercase;
color: var(--ink);
transition: all .2s var(--ease-out);
}
.pagination .page-numbers:hover { background: var(--mute); border-color: var(--ink); }
.pagination .page-numbers.current { background: var(--ink); color: var(--paper); border-color: var(--ink); }
/* Filter rail — scroll affordance + sticky sort
The work archive pulls 14 industry pills + a sort select. They overflow
the container width — wrap them in a horizontal scroll with:
- .sort pinned to the right (position:sticky inside the flex scroller)
so it never disappears off-screen behind the pills
- A left+right edge fade on .filter-shell to indicate "more pills here"
(only shown when the rail is actually overflowed)
- `scroll-snap-type: x proximity` so wheel/touch scrolls feel intentional
- Wheel-vertical-to-horizontal mapping handled by JS in the rail block */
.filter-shell {
position: sticky; /* re-stated for specificity */
position: -webkit-sticky;
}
.filter-shell::before,
.filter-shell::after {
content: ""; position: absolute; top: 0; bottom: 0; width: 56px;
pointer-events: none; z-index: 2;
opacity: 0; transition: opacity .25s var(--ease-out);
}
.filter-shell::before {
left: 0;
background: linear-gradient(90deg, var(--paper), rgba(247,245,238,0));
}
.filter-shell::after {
right: 0;
background: linear-gradient(-90deg, var(--paper), rgba(247,245,238,0));
}
.filter-shell.is-overflow-left::before { opacity: 1; }
.filter-shell.is-overflow-right::after { opacity: 1; }
.filter-rail {
scroll-snap-type: x proximity;
scroll-padding-left: 16px;
scroll-behavior: smooth;
}
.filter-rail .pill { scroll-snap-align: start; }
.filter-rail .label { scroll-snap-align: start; }
/* New row layout: scrollable pill rail wrapper on the left, sort
pulled out of the rail and pinned to the right of the row. */
.filter-shell .filter-row {
display: flex; align-items: center; gap: 24px;
padding: 14px 0;
}
.filter-rail-wrap {
position: relative;
flex: 1 1 auto;
min-width: 0; /* allow flex item to shrink below content size */
}
/* Inside the new wrap, .filter-rail is just the scroller — drop the
wrapper-level padding and let the row provide vertical rhythm. */
.filter-shell .filter-row > .filter-rail-wrap > .filter-rail {
padding: 0;
cursor: grab;
}
.filter-shell .filter-row > .filter-rail-wrap > .filter-rail.is-dragging {
cursor: grabbing;
scroll-behavior: auto; /* don't smooth-snap during drag */
scroll-snap-type: none;
user-select: none;
}
.filter-shell .filter-row > .filter-rail-wrap > .filter-rail.is-dragging .pill {
pointer-events: none; /* avoid hover state during drag */
}
/* Prev / next nav buttons inside the rail wrap. Hidden by default and
revealed when the rail can actually scroll in that direction. */
.filter-rail-nav {
position: absolute;
top: 50%;
width: 36px; height: 36px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 50%;
background: var(--paper);
border: 1px solid var(--line);
color: var(--ink);
cursor: pointer;
z-index: 3;
opacity: 0;
pointer-events: none;
transform: translateY(-50%);
transition: opacity .25s var(--ease-out), background .2s var(--ease-out), border-color .2s var(--ease-out), transform .2s var(--ease-out);
box-shadow: 0 4px 12px rgba(15,15,14,.08);
}
.filter-rail-nav.prev { left: -8px; }
.filter-rail-nav.next { right: -8px; }
.filter-rail-nav:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.filter-rail-nav svg { width: 14px; height: 14px; }
/* Reveal the appropriate arrow when the rail has overflow in that direction. */
.filter-rail-wrap.is-overflow-left .filter-rail-nav.prev,
.filter-rail-wrap.is-overflow-right .filter-rail-nav.next {
opacity: 1; pointer-events: auto;
}
/* Pulse the next arrow when scrollable — gives the visitor a "this scrolls" cue. */
@keyframes cwp-rail-nudge {
0%, 60%, 100% { transform: translateY(-50%) translateX(0); }
20% { transform: translateY(-50%) translateX(4px); }
40% { transform: translateY(-50%) translateX(0); }
}
.filter-rail-wrap.is-scrollable .filter-rail-nav.next {
animation: cwp-rail-nudge 2.4s ease-out 1.2s 2;
}
/* Sort sits outside the scroll context now, pinned right of the row. */
.filter-shell .filter-row > .filter-sort {
flex: 0 0 auto;
display: inline-flex; align-items: center; gap: 8px;
font-family: var(--mono); font-size: 11px;
letter-spacing: .14em; text-transform: uppercase;
color: var(--subtle);
}
.filter-shell .filter-row > .filter-sort .filter-sort-label { color: var(--subtle); }
.filter-shell .filter-row > .filter-sort select {
appearance: none; -webkit-appearance: none;
background: transparent;
border: 0; outline: 0;
font-family: var(--mono); font-size: 11px; letter-spacing: .14em;
text-transform: uppercase;
color: var(--ink);
padding-right: 14px;
cursor: pointer;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right center;
}
/* Re-position the .filter-shell ::after fade so it lives on the rail wrap
instead of the shell — that way the sort doesn't fade out, only the
pills do. */
.filter-shell .filter-row > .filter-rail-wrap::before,
.filter-shell .filter-row > .filter-rail-wrap::after {
content: "";
position: absolute;
top: 0; bottom: 0;
width: 56px;
pointer-events: none;
z-index: 2;
opacity: 0;
transition: opacity .25s var(--ease-out);
}
.filter-shell .filter-row > .filter-rail-wrap::before {
left: 0;
background: linear-gradient(90deg, var(--paper), rgba(247,245,238,0));
}
.filter-shell .filter-row > .filter-rail-wrap::after {
right: 0;
background: linear-gradient(-90deg, var(--paper), rgba(247,245,238,0));
}
.filter-shell .filter-row > .filter-rail-wrap.is-overflow-left::before { opacity: 1; }
.filter-shell .filter-row > .filter-rail-wrap.is-overflow-right::after { opacity: 1; }
/* Disable the older shell-level fade gradients now that we have wrap-level ones. */
.filter-shell .filter-row ~ * .filter-shell::before,
.filter-shell .filter-row ~ * .filter-shell::after { display: none; }
/* Mobile: stack sort below the rail */
@media (max-width: 640px) {
.filter-shell .filter-row { flex-direction: column; align-items: stretch; gap: 10px; }
.filter-rail-nav { display: none; }
}
/* ──────────────────────────────────────────────────────────────────
IMAGE LIGHTBOX — case-study galleries (cs-twoup, cs-shipped-grid)
Bound by [data-lightbox-gallery] in JS (assets/js/lightbox.js).
────────────────────────────────────────────────────────────────── */
[data-lightbox-gallery] figure.is-zoomable{
cursor: zoom-in;
transition: transform .35s var(--ease-out);
outline: none;
}
[data-lightbox-gallery] figure.is-zoomable:hover img,
[data-lightbox-gallery] figure.is-zoomable:focus-visible img{
transform: scale(1.01);
}
[data-lightbox-gallery] figure.is-zoomable:focus-visible{
box-shadow: 0 0 0 3px var(--accent-2, #C9532E);
border-radius: 4px;
}
[data-lightbox-gallery] figure.is-zoomable img{
transition: transform .5s var(--ease-out);
will-change: transform;
}
body.cs-lightbox-open{ overflow: hidden; }
.cs-lightbox{
position: fixed; inset: 0; z-index: 200;
display: flex; align-items: center; justify-content: center;
opacity: 0; transition: opacity .2s var(--ease-out);
pointer-events: none;
}
.cs-lightbox.is-open{ opacity: 1; pointer-events: auto; }
.cs-lightbox-scrim{
position: absolute; inset: 0;
background: rgba(15,15,14,.94);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
}
.cs-lightbox-stage{
position: relative; z-index: 2;
max-width: min(90vw, 1400px);
max-height: 88vh;
display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.cs-lightbox-img{
display: block;
max-width: 100%; max-height: 84vh;
width: auto; height: auto;
object-fit: contain;
background: var(--ink);
box-shadow: 0 24px 64px rgba(0,0,0,.5);
}
.cs-lightbox-caption{
font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
color: rgba(247,245,238,.7); text-align: center; max-width: 60ch;
}
.cs-lightbox-prev,
.cs-lightbox-next,
.cs-lightbox-close{
position: absolute; z-index: 3;
width: 48px; height: 48px;
display: inline-flex; align-items: center; justify-content: center;
background: rgba(247,245,238,.08);
border: 1px solid rgba(247,245,238,.18);
color: var(--paper, #F7F5EE);
border-radius: 50%; cursor: pointer;
transition: background .2s var(--ease-out), border-color .2s var(--ease-out), transform .2s var(--ease-out);
}
.cs-lightbox-prev:hover,
.cs-lightbox-next:hover,
.cs-lightbox-close:hover{
background: rgba(247,245,238,.18);
border-color: rgba(247,245,238,.4);
}
.cs-lightbox-prev:focus-visible,
.cs-lightbox-next:focus-visible,
.cs-lightbox-close:focus-visible{
outline: 2px solid var(--accent, #C9532E);
outline-offset: 2px;
}
.cs-lightbox-prev{ left: 24px; top: 50%; transform: translateY(-50%); }
.cs-lightbox-next{ right: 24px; top: 50%; transform: translateY(-50%); }
.cs-lightbox-prev:hover{ transform: translateY(-50%) translateX(-2px); }
.cs-lightbox-next:hover{ transform: translateY(-50%) translateX(2px); }
.cs-lightbox-close{ top: 20px; right: 20px; }
.cs-lightbox-counter{
position: absolute; left: 24px; top: 24px; z-index: 3;
font-family: var(--mono); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase;
color: rgba(247,245,238,.7);
}
@media (max-width: 640px){
.cs-lightbox-prev{ left: 12px; width: 40px; height: 40px; }
.cs-lightbox-next{ right: 12px; width: 40px; height: 40px; }
.cs-lightbox-close{ top: 12px; right: 12px; width: 40px; height: 40px; }
.cs-lightbox-counter{ left: 12px; top: 12px; }
}
/* The editor doesn't run lightbox.js, so the :is-zoomable class
never gets added. Native cursor: zoom-in stays inert. No editor
override needed. */