/* ── Reset & Base ─────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
--blue: #005895;
--blue-light: #00c7ff;
--gold: #ffc629;
--teal-dark: #0d434a;
--teal-light: #1b8b95;
--slate: #5C7A99;
--cool-gray: #A7B1B8;
--mist: #E9EEF2;
--powder-blue: #BCCCD8;
--white: #FFFFFF;
--charcoal: #1F2933;
--text-mid: #5B6670;
--bg-light: #F7F9FB;
--risk: #B54242;
--caution: #f2b000;
--success: #3F8F5C;
}
/* 'clip' on html as well as body: on body alone it propagates to the viewport,
where iOS Safari treats it as 'hidden' and still lets a sideways swipe drag
the page over any overhang. With html set, body clips its own box instead. */
html { scroll-behavior: smooth; overflow-x: clip; }
body {
font-family: 'Barlow Semi Condensed', Arial, sans-serif;
color: var(--charcoal);
background: var(--white);
font-size: 1.15rem;
line-height: 1.6;
/* .prose-band breaks out to 100vw, which is wider than the visible
viewport when a classic scrollbar is present. 'clip' trims the
overhang without creating a scroll container, so the sticky header
below still sticks ('hidden' would break it). */
overflow-x: clip;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
/* ── Utility ──────────────────────────────────────────── */
.container {
max-width: 1140px;
margin: 0 auto;
padding: 0 2rem;
}
.btn {
display: inline-block;
font-family: inherit;
font-size: 1.09rem;
font-weight: 600;
letter-spacing: 0.03em;
padding: 0.8rem 1.75rem;
border-radius: 3px;
cursor: pointer;
transition: background 0.15s, color 0.15s;
}
.btn-primary { background: var(--gold); color: var(--charcoal); }
.btn-primary:hover { background: #e6b020; }
.btn-outline { background: transparent; color: var(--white); border: 2px solid var(--white); border-radius: 4px; }
.btn-outline:hover { background: rgba(255,255,255,0.1); }
.btn-outline-dark { background: transparent; color: var(--blue); border: 2px solid var(--blue); border-radius: 4px; }
.btn-outline-dark:hover { background: rgba(0,88,149,0.06); }
.btn-dark { background: var(--blue); color: var(--white); }
.btn-dark:hover { background: #004677; }
/* Half-height button, used for the Related Services links below the CTA. */
.btn-sm { font-size: 0.92rem; padding: 0.2rem 1rem; line-height: 1.3; border-width: 1px; }
.section-label {
font-size: 0.86rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--teal-light);
margin-bottom: 0.5rem;
display: block;
}
/* ── Navigation ───────────────────────────────────────── */
.site-nav {
background: var(--blue);
position: sticky;
top: 0;
z-index: 100;
border-bottom: 1px solid rgba(255,255,255,0.1);
}
.nav-inner {
display: flex;
align-items: center;
justify-content: space-between;
height: 64px;
}
.nav-logo { flex-shrink: 0; }
.nav-logo img { height: 36px; width: auto; }
.nav-logo-text { font-size: 1.6rem; font-weight: 700; color: var(--white); letter-spacing: 0.04em; }
.nav-links { list-style: none; display: flex; align-self: stretch; align-items: center; gap: 1.35rem; }
.nav-links a { color: rgba(255,255,255,0.82); font-size: 1.04rem; font-weight: 500; letter-spacing: 0.02em; white-space: nowrap; transition: color 0.15s; }
.nav-links a:hover,
.nav-links li.active > a { color: var(--white); }
.nav-links .nav-cta a {
background: var(--gold);
color: var(--charcoal);
padding: 0.5rem 1.1rem;
border-radius: 3px;
font-weight: 700;
}
.nav-links .nav-cta a:hover { background: #e6b020; }
.nav-toggle {
display: none;
flex-direction: column;
gap: 5px;
background: none;
border: none;
cursor: pointer;
padding: 4px;
}
.nav-toggle span { display: block; width: 24px; height: 2px; background: var(--white); border-radius: 2px; }
/* ── Nav Dropdowns ────────────────────────────────────── */
.nav-links li.has-dropdown { position: relative; display: flex; align-items: center; align-self: stretch; }
.nav-caret { background: none; border: none; padding: 2px; margin-left: -2px; cursor: pointer; display: flex; align-items: center; flex-shrink: 0; }
.nav-caret::after { content: ''; display: block; width: 6px; height: 6px; border-right: 2px solid rgba(255,255,255,0.7); border-bottom: 2px solid rgba(255,255,255,0.7); transform: rotate(45deg); margin-top: -2px; transition: transform 0.15s; }
.nav-links li.has-dropdown:hover .nav-caret::after,
.nav-links li.has-dropdown.nav-dropdown--open .nav-caret::after { transform: rotate(-135deg); margin-top: 3px; }
.nav-dropdown {
list-style: none;
position: absolute;
top: calc(100% + 12px);
left: 0;
min-width: 240px;
background: var(--white);
border-radius: 4px;
box-shadow: 0 12px 32px rgba(0,20,40,0.18);
padding: 0.6rem 0;
opacity: 0;
visibility: hidden;
transform: translateY(6px);
transition: opacity 0.15s, transform 0.15s, visibility 0.15s;
z-index: 200;
}
/* Invisible bridge across the gap between the nav item and the panel,
so the pointer never leaves a hover target while moving down to it. */
.nav-dropdown::before {
content: '';
position: absolute;
top: -12px;
left: 0;
right: 0;
height: 12px;
}
.nav-links li.has-dropdown:hover .nav-dropdown,
.nav-links li.has-dropdown:focus-within .nav-dropdown,
.nav-links li.has-dropdown.nav-dropdown--open .nav-dropdown {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.nav-dropdown li a { display: block; padding: 0.5rem 1.25rem; color: var(--charcoal); font-size: 0.98rem; font-weight: 500; letter-spacing: normal; white-space: nowrap; }
.nav-dropdown li a:hover { background: var(--bg-light); color: var(--blue); }
.nav-dropdown-heading { padding: 0.5rem 1.25rem 0.25rem; font-size: 0.76rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--teal-light); }
.nav-dropdown-heading:not(:first-child) { margin-top: 0.4rem; border-top: 1px solid var(--mist); padding-top: 0.6rem; }
/* Dropdowns open left-aligned to their nav item. When that would carry the
panel past the right edge of the nav CTA button, main.js adds --flip and sets
--nav-dropdown-right so the panel's right edge lines up with the button's. */
.nav-dropdown--flip { left: auto; right: var(--nav-dropdown-right, 0); }
.nav-dropdown--wide { column-count: 2; column-gap: 0; min-width: 460px; padding: 0.75rem 0; }
.nav-dropdown--wide li { break-inside: avoid; }
/* Keep a group heading with the items under it: without this, column balancing
can strand a heading alone at the foot of the first column. */
.nav-dropdown--wide .nav-dropdown-heading { break-after: avoid; }
/* Deterministic split for the Services dropdown — Identify and Map fill the
first column, Capture opens the second. */
.nav-dropdown--wide .nav-dropdown-heading--break { break-before: column; }
.nav-dropdown--wide .nav-dropdown-heading--break:not(:first-child) { margin-top: 0; border-top: none; padding-top: 0.5rem; }
/* Grouped layout for the Industries dropdown (DEC-025) — each heading spans the
panel and its links fill two columns top to bottom (--rows is set per group
in partials/nav.php). Subgrid keeps the second column aligned across groups. */
.nav-dropdown--grouped { display: grid; grid-template-columns: repeat(2, max-content); padding: 0.75rem 0; }
.nav-dropdown--grouped > li { grid-column: 1 / -1; }
.nav-dropdown-group { display: grid; grid-template-columns: subgrid; }
.nav-dropdown-group-list { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; grid-template-rows: repeat(var(--rows, 1), auto); grid-auto-flow: column; list-style: none; margin: 0; padding: 0; }
/* ── Breadcrumbs ──────────────────────────────────────── */
/* Lives inside the page-hero container, pulled up near the top of the section. */
.breadcrumbs { background: transparent; margin-top: -2.25rem; margin-bottom: 1.75rem; }
.breadcrumb-list { display: flex; flex-wrap: wrap; list-style: none; gap: 0.25rem; font-size: 0.86rem; }
.breadcrumb-list a { color: var(--blue-light); }
.breadcrumb-list a:hover { color: var(--white); }
.breadcrumb-sep { color: rgba(255,255,255,0.4); margin: 0 0.25rem; }
.breadcrumb-current { color: rgba(255,255,255,0.95); }
.page-hero--light .breadcrumb-list a { color: var(--blue); }
.page-hero--light .breadcrumb-sep { color: var(--cool-gray); }
.page-hero--light .breadcrumb-current { color: var(--charcoal); }
/* ── Page Heroes ──────────────────────────────────────── */
.page-hero {
background: linear-gradient(145deg, #00395f 0%, var(--blue) 55%, #005080 100%);
color: var(--white);
padding: 4rem 0 3.5rem;
position: relative;
}
.page-hero::after {
content: '';
position: absolute;
bottom: 0; left: 0; right: 0;
height: 4px;
background: linear-gradient(to right, var(--blue-light), var(--gold));
}
.page-hero--light { background: var(--bg-light); color: var(--charcoal); }
.page-hero--light::after { display: none; }
.page-hero .hero-eyebrow { color: var(--blue-light); }
.page-hero--light .section-label { color: var(--teal-light); }
.page-hero h1 {
font-size: clamp(1.8rem, 3.5vw, 2.6rem);
font-weight: 700;
line-height: 1.15;
margin-bottom: 1rem;
}
.page-hero--light h1 { color: var(--charcoal); }
.page-hero .hero-sub { font-size: 1.15rem; color: rgba(255,255,255,0.85); max-width: 640px; margin-bottom: 1.75rem; line-height: 1.65; }
.page-hero--light .hero-sub { color: var(--text-mid); }
.page-hero .hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; }
.article-meta { font-size: 0.94rem; color: var(--text-mid); margin-top: 0.5rem; }
/* ── Homepage Hero ────────────────────────────────────── */
.hero {
background: linear-gradient(145deg, #00395f 0%, var(--blue) 55%, #005080 100%);
color: var(--white);
padding: 6rem 0 5rem;
position: relative;
overflow: hidden;
}
.hero::after {
content: '';
position: absolute;
bottom: 0; left: 0; right: 0;
height: 4px;
background: linear-gradient(to right, var(--blue-light), var(--gold));
}
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 3rem; align-items: center; }
.hero-inner { max-width: 760px; }
.hero-visual img { display: block; width: 100%; height: auto; max-width: 460px; margin-left: auto; }
.hero-eyebrow { font-size: 0.90rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--blue-light); margin-bottom: 1rem; display: none; }
.hero h1 { font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; line-height: 1.15; margin-bottom: 1.25rem; color: var(--white); }
.hero h1 em { font-style: normal; color: var(--blue-light); }
.hero-sub { font-size: 1.27rem; color: rgba(255,255,255,0.82); max-width: 600px; margin-bottom: 2rem; line-height: 1.65; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
@media (max-width: 900px) {
.hero-grid { grid-template-columns: 1fr; gap: 2.5rem; }
.hero-inner,
.hero-sub { max-width: none; }
.hero-actions { justify-content: center; }
.hero-visual img { max-width: 320px; margin: 0 auto; }
}
/* ── Problem ──────────────────────────────────────────── */
.problem { background: var(--teal-dark); color: var(--white); padding: 3.5rem 0; }
.problem-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
.problem h2 { font-size: 1.7rem; font-weight: 700; line-height: 1.25; margin-bottom: 1rem; }
.problem p { color: rgba(255,255,255,0.8); font-size: 1.15rem; line-height: 1.7; }
.problem-stat { background: rgba(255,255,255,0.07); border-left: 4px solid var(--blue-light); padding: 1.25rem 1.5rem; border-radius: 2px; }
.problem-stat .stat-num { font-size: 2.4rem; font-weight: 700; color: var(--blue-light); line-height: 1; margin-bottom: 0.4rem; }
.problem-stat .stat-label { font-size: 1.04rem; color: rgba(255,255,255,0.75); }
.problem-stat .stat-cite { margin-top: 0.5rem; font-size: 0.78rem; color: rgba(255,255,255,0.45); font-style: italic; }
.problem-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
/* ── Symptoms ─────────────────────────────────────────── */
/* Card grid itself now lives in the Pattern Library as .pat-accent-cards. */
.symptoms { background: var(--bg-light); padding: 4.5rem 0; }
.symptoms-header { text-align: center; max-width: 620px; margin: 0 auto 3rem; }
.symptoms-header h2 { font-size: 1.9rem; font-weight: 700; color: var(--charcoal); margin-bottom: 0.75rem; }
.symptoms-header p { color: var(--text-mid); font-size: 1.15rem; }
/* ── AI Urgency ───────────────────────────────────────── */
.ai-urgency { background: var(--teal-dark); color: var(--white); padding: 5rem 0; }
/* DEC-024. The stat tiles reuse .problem-stat so both teal-dark bands share
one stat treatment; they are left-aligned because the accent rule needs an
edge to sit against. The statement is Glymr's own position, not a quote, so
it takes thin rules rather than gold (gold marks quoted speech sitewide),
and it closes the section, so it carries no bottom margin. Class selectors
are scoped under .ai-urgency so they outrank .ai-urgency p. The stats and
the statement rules span the full inner width so their edges line up. */
.ai-urgency-inner { max-width: 1040px; margin: 0 auto; text-align: center; }
.ai-urgency h2 { font-size: 1.9rem; font-weight: 700; margin-bottom: 1rem; line-height: 1.25; }
.ai-urgency p { color: rgba(255,255,255,0.82); font-size: 1.15rem; line-height: 1.7; margin-bottom: 1.5rem; }
.ai-urgency .ai-urgency-lede { max-width: 640px; margin: 0 auto 2rem; }
.ai-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; text-align: left; }
.ai-urgency .ai-urgency-statement { font-size: 1.65rem; font-weight: 700; line-height: 1.35; color: var(--white); margin: 2.25rem 0 0; padding: 1.5rem 0; border-top: 1px solid rgba(255,255,255,0.2); border-bottom: 1px solid rgba(255,255,255,0.2); text-wrap: balance; }
/* Inline route to AI Readiness & Adoption from the lede, rather than a separate
link line that lengthened the section. White against the lede's softer
white, with a thin light-blue underline as the only link cue. */
.ai-urgency .ai-urgency-lede a { color: var(--white); text-decoration: underline; text-decoration-color: rgba(0,199,255,0.65); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color 0.15s, text-decoration-color 0.15s; }
.ai-urgency .ai-urgency-lede a:hover { color: var(--blue-light); text-decoration-color: var(--blue-light); }
.ai-urgency .ai-urgency-lede a:focus-visible { outline: 2px solid var(--blue-light); outline-offset: 2px; border-radius: 1px; }
@media (max-width: 600px) {
.ai-stats { grid-template-columns: 1fr; }
.ai-urgency .ai-urgency-statement { font-size: 1.4rem; }
}
/* ── What Employees and AI Need ───────────────────────── */
/* DEC-024. Split out of AI Reality: that section is about AI, this one turns
back to people and AI together. White, because it sits between teal-dark
AI Reality and --bg-light Where to Start. Shorter padding than the full
sections, so it reads as a bridge. Plain columns under a short rule, with
nothing that looks clickable — these replaced pill capsules that read as
buttons. The rule is --blue rather than --blue-light, which washes out on
white, matching the .assessment-option top rules just below. Each item
spans two subgrid rows, so the glosses start on one line even when a
label wraps. */
.needs { background: var(--white); padding: 3.75rem 0; }
.needs-header { text-align: center; max-width: 620px; margin: 0 auto 2.5rem; }
.needs-header h2 { font-size: 1.9rem; font-weight: 700; color: var(--charcoal); margin-bottom: 0.75rem; line-height: 1.25; text-wrap: balance; }
.needs-header p { color: var(--text-mid); font-size: 1.15rem; }
.needs-list { list-style: none; padding: 0; margin: 0 auto; max-width: 1040px; display: grid; grid-template-columns: repeat(5, 1fr); column-gap: 1.5rem; row-gap: 1.75rem; }
.needs-list li { border-top: 3px solid var(--blue); padding-top: 0.9rem; grid-row: span 2; display: grid; grid-template-rows: subgrid; row-gap: 0.4rem; }
.needs-list strong { font-size: 1.05rem; font-weight: 700; color: var(--charcoal); line-height: 1.3; }
.needs-list span { font-size: 0.95rem; color: var(--text-mid); line-height: 1.5; }
@media (max-width: 900px) {
.needs-list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
.needs-list { grid-template-columns: 1fr; }
}
/* ── Dual Assessment ──────────────────────────────────── */
.dual-assessment { background: var(--bg-light); padding: 5rem 0; }
.dual-assessment-header { text-align: center; max-width: 620px; margin: 0 auto 3rem; }
.dual-assessment-header h2 { font-size: 1.9rem; font-weight: 700; color: var(--charcoal); margin-bottom: 0.75rem; }
.dual-assessment-header p { color: var(--text-mid); font-size: 1.15rem; }
.dual-assessment-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.assessment-option { background: var(--white); border: 1px solid var(--mist); border-top: 4px solid var(--blue); border-radius: 4px; padding: 2.25rem; }
.assessment-option--ai { border-top-color: var(--teal-light); }
.assessment-option h3 { font-size: 1.3rem; font-weight: 700; color: var(--charcoal); margin-bottom: 0.75rem; }
.assessment-option p { color: var(--text-mid); font-size: 1.06rem; line-height: 1.65; margin-bottom: 1.5rem; }
.dual-assessment-note { text-align: center; margin-top: 2rem; color: var(--text-mid); font-size: 1.02rem; }
.dual-assessment-note a { color: var(--blue); font-weight: 600; }
.dual-assessment-note a:hover { color: var(--teal-light); }
/* ── Service Model ────────────────────────────────────── */
/* White rather than --bg-light: this sits between two --bg-light sections
(Where to Start, Who We Help), and three tinted bands in a row read as
one long undifferentiated stretch. The .model-step cards carry a --mist
border, so they hold their edges on white. */
.service-model { background: var(--white); padding: 5rem 0; }
.service-model-header { text-align: center; max-width: 600px; margin: 0 auto 3rem; }
.service-model-header h2 { font-size: 1.9rem; font-weight: 700; color: var(--charcoal); margin-bottom: 0.75rem; }
.service-model-header p { color: var(--text-mid); }
.model-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.model-step { background: var(--white); border: 1px solid var(--mist); border-radius: 3px; padding: 2rem 1.5rem; }
/* The numeral is a filled marker in the stage accent, matching .svc-stage-num
on the Services landing page. inline-flex so the block hugs the numeral
instead of spanning the card — here the number sits above the title rather
than in its own grid column. Accent comes from the .svc-* class on the card. */
.model-step-num {
display: inline-flex; align-items: center; justify-content: center;
align-self: flex-start;
min-width: 3.4rem; padding: 0.55rem 0.85rem;
background: var(--svc-accent); border-radius: 3px;
font-size: 1.65rem; font-weight: 700; line-height: 1;
color: var(--white); font-variant-numeric: tabular-nums;
margin-bottom: 0.9rem;
}
/* White on --blue-light is ~1.9:1, under the 3:1 large-text floor; charcoal on
the same fill is ~7.6:1. Stage 04 flips dark, as it does on the Services page. */
.model-step.svc-usable .model-step-num { color: var(--charcoal); }
.model-step h3 { font-size: 1.45rem; font-weight: 700; color: var(--svc-ink); margin-bottom: 0.75rem; line-height: 1.2; }
.model-step p { font-size: 1.01rem; color: var(--text-mid); line-height: 1.6; }
/* Service links are half-height buttons (.btn-sm .btn-outline-dark). margin-top:
auto bottom-aligns the group, so the button rows line up across cards whose
copy runs to different lengths. align-items keeps each button hugging its
label rather than stretching to the card width. */
.model-step { display: flex; flex-direction: column; }
.model-step ul {
margin-top: auto; padding-top: 1.1rem; padding-left: 0; list-style: none;
display: flex; flex-direction: column; align-items: stretch; gap: 0.5rem;
}
.model-step ul li { padding: 0; }
/* Full width so a short label ("Process Mapping") and a long one line up on the
same left and right edges. space-between pins the arrow to the right edge
rather than trailing the label. */
.model-step ul .btn {
display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
width: 100%; text-align: left;
}
.model-step ul .btn::after { content: '\2192'; transition: transform 0.15s ease; }
.model-step ul .btn:hover::after { transform: translateX(3px); }
/* Preserve track (DEC-015, proposed): event-triggered, so it sits outside the
numbered sequence. A full-width card below the four steps rather than a line
of footnote text — same card treatment, no numeral, and the gold flag marks
it as its own track. margin-top matches the .model-steps grid gap so it reads
as a further row rather than a detached block. */
.model-preserve {
display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
gap: 1rem 2rem; margin-top: 1.5rem;
background: var(--white); border: 1px solid var(--mist); border-radius: 3px;
padding: 1.35rem 1.5rem;
}
/* flex: 1 1 20rem lets the sentence take the leftover width and wrap its own
text, rather than holding its max-content width and pushing the buttons onto
a second row — the two together sit only a few pixels over the container. */
/* Grid rather than inline text: no align-items, so the badge cell stretches to
the full height of the description beside it — the same treatment
.svc-stage-head gives its numeral. Reads as a block label for the track
rather than a tag sitting in a sentence. */
.model-preserve-copy {
flex: 1 1 20rem;
display: grid; grid-template-columns: auto 1fr; gap: 1rem;
}
.model-preserve-copy p {
margin: 0; font-size: 1.02rem; line-height: 1.6; color: var(--text-mid);
}
.model-preserve-flag {
display: flex; align-items: center; justify-content: center;
padding: 0.5rem 0.85rem; border-radius: 2px;
font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
color: var(--charcoal); background: var(--gold);
}
.model-preserve-links { flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.model-preserve-links .btn { display: inline-flex; align-items: center; gap: 0.45rem; }
.model-preserve-links .btn::after { content: '\2192'; transition: transform 0.15s ease; }
.model-preserve-links .btn:hover::after { transform: translateX(3px); }
/* ── Buyer Paths ──────────────────────────────────────── */
.buyer-paths { background: var(--bg-light); padding: 5rem 0; }
.buyer-paths-header { text-align: center; max-width: 580px; margin: 0 auto 3rem; }
.buyer-paths-header h2 { font-size: 1.9rem; font-weight: 700; color: var(--charcoal); margin-bottom: 0.75rem; }
.buyer-paths-header p { color: var(--text-mid); }
.buyer-intro,
.content-prose .buyer-intro { font-size: 1.12rem; line-height: 1.7; color: var(--text-mid); margin: 0 0 2rem; }
.buyer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.buyer-card { border: 1px solid var(--mist); border-radius: 3px; padding: 1.75rem; background: var(--white); transition: border-color 0.15s, box-shadow 0.15s; }
.buyer-card:hover { border-color: var(--blue-light); box-shadow: 0 2px 12px rgba(0,88,149,0.08); }
.buyer-card-role { font-size: 1.15rem; font-weight: 700; letter-spacing: 0.06em; color: var(--blue-light); margin-bottom: 0.55rem; line-height: 1.25; }
.buyer-card h3 { font-size: 1.15rem; font-weight: 700; color: var(--charcoal); margin-bottom: 0.5rem; }
.buyer-card p { font-size: 1.01rem; color: var(--text-mid); line-height: 1.55; margin-bottom: 1rem; }
.buyer-card > a { font-size: 0.98rem; font-weight: 700; color: var(--blue); display: inline-flex; align-items: center; gap: 0.3rem; }
.buyer-card > a:hover { color: var(--teal-light); }
/* ── Proof ────────────────────────────────────────────── */
/* Client quotes stand in for case-study cards until the case studies are
reworked (DEC-023). The cards take .pat-testimonial's voice — --bg-light
surface, italic charcoal quote, gold as the sitewide marker for quoted
speech, and its attribution classes — but run the gold rule across the
top, so three quotes of different lengths share one edge. Each card spans
two subgrid rows, so the attributions start on one line even when a role
wraps. No button follows: the section hands straight to the final CTA. */
.proof { background: var(--white); padding: 5rem 0; }
.proof-header { text-align: center; max-width: 720px; margin: 0 auto 3rem; }
.proof-header h2 { font-size: 1.9rem; font-weight: 700; color: var(--charcoal); text-wrap: balance; }
.proof-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.proof-quote { background: var(--bg-light); border-top: 4px solid var(--gold); border-radius: 2px; padding: 2rem 1.75rem; margin: 0; grid-row: span 2; display: grid; grid-template-rows: subgrid; row-gap: 1.5rem; }
.proof-quote blockquote { margin: 0; }
.proof-quote blockquote p { font-size: 1.15rem; font-style: italic; color: var(--charcoal); line-height: 1.55; margin: 0; }
.proof-quote .pat-testimonial-attribution { align-items: flex-start; }
/* ── Insights ─────────────────────────────────────────── */
.insights { background: var(--bg-light); padding: 5rem 0; }
.insights-header { text-align: center; max-width: 580px; margin: 0 auto 3rem; }
.insights-header h2 { font-size: 1.9rem; font-weight: 700; color: var(--charcoal); margin-bottom: 0.75rem; }
.insights-header p { color: var(--text-mid); }
.insights-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-bottom: 2rem; }
.insight-card { background: var(--white); border: 1px solid var(--mist); border-radius: 3px; padding: 1.75rem; display: flex; flex-direction: column; gap: 0.5rem; }
.insight-card-type { font-size: 0.83rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--slate); }
.insight-card h3 { font-size: 1.15rem; font-weight: 700; color: var(--charcoal); line-height: 1.35; }
.insight-card p { font-size: 1.01rem; color: var(--text-mid); line-height: 1.55; flex: 1; }
.insight-card a { font-size: 0.98rem; font-weight: 700; color: var(--blue); }
.insight-card a:hover { color: var(--teal-light); }
.insights-center { text-align: center; }
/* ── Final CTA ────────────────────────────────────────── */
.final-cta { background: linear-gradient(135deg, var(--teal-dark) 0%, var(--blue) 100%); color: var(--white); padding: 5rem 0; text-align: center; }
.final-cta-inner { margin: 0 auto; }
.final-cta h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 700; margin-bottom: 1rem; }
.final-cta p { color: rgba(255,255,255,0.82); font-size: 1.21rem; margin-bottom: 2rem; line-height: 1.65; }
.final-cta-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; }
/* ── Direct Answer ────────────────────────────────────── */
/* The AEO direct answer opens the page body as a lead paragraph rather than a
callout. Its search value comes from being early, self-contained body text,
not from the treatment — so it sits on the same left edge and measure as the
prose that follows and reads as the page's introduction. Sized one step above
body copy so it still leads, and left with the ordinary paragraph-to-heading
gap below it so it reads as the page's introduction rather than as the first
section's opening line. */
.lead-answer { font-size: 1.15rem; color: var(--charcoal); line-height: 1.7; margin-bottom: 1.25rem; }
/* ── Related Content ──────────────────────────────────── */
.related-content { background: var(--bg-light); padding: 2.5rem 0; border-top: 1px solid var(--mist); }
.related-content .container { display: flex; flex-direction: column; gap: 2rem; }
.related-group { text-align: center; }
.related-heading { font-size: 0.86rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--slate); margin-bottom: 1rem; }
.related-list { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; }
/* ── FAQ Block ────────────────────────────────────────── */
.faq-block { background: #BCCED8; padding: 4rem 0; border-top: 1px solid var(--mist); }
.faq-block h2 { font-size: 1.7rem; font-weight: 700; color: var(--charcoal); margin-bottom: 2rem; }
.faq-list { display: flex; flex-direction: column; }
.faq-item { padding: 0.75rem 0; }
.faq-question { font-size: 1.15rem; font-weight: 700; color: var(--charcoal); margin-bottom: 0.5rem; }
.faq-answer { font-size: 0.98rem; color: var(--charcoal); line-height: 1.7; margin-bottom: 0; }
/* ── Page Body / Prose ────────────────────────────────── */
/* Top padding matches .page-hero's bottom padding (3.5rem) so the white
body area opens with the same visible gap as the hero closes with. */
.page-body { padding: 3.5rem 0 4rem; }
.content-prose { max-width: 1140px; }
/* .page-body already sets the top gap; without this, whatever heading or
paragraph opens the body content adds its own top margin on top of that
padding, doubling the gap. Every page starts its content flush instead. */
.content-prose > *:first-child { margin-top: 0; }
.content-prose h2 { font-size: 1.7rem; font-weight: 700; color: var(--charcoal); margin: 2.5rem 0 0.75rem; line-height: 1.2; }
.content-prose h3 { font-size: 1.3rem; font-weight: 700; color: var(--charcoal); margin: 2rem 0 0.6rem; }
.content-prose h4 { font-size: 1.15rem; font-weight: 700; color: var(--charcoal); margin: 1.5rem 0 0.5rem; }
.content-prose p { margin-bottom: 1.25rem; color: var(--charcoal); line-height: 1.7; }
.content-prose ul,
.content-prose ol { margin: 0 0 1.25rem 1.5rem; line-height: 1.7; }
.content-prose li { margin-bottom: 0.4rem; }
.content-prose blockquote { border-left: 4px solid var(--blue-light); padding: 1rem 1.5rem; background: var(--bg-light); margin: 1.5rem 0; font-style: italic; color: var(--text-mid); }
.content-prose table { width: 100%; border-collapse: collapse; margin-bottom: 1.5rem; font-size: 1.01rem; }
.content-prose th { background: var(--blue); color: var(--white); text-align: left; padding: 0.65rem 1rem; }
.content-prose td { padding: 0.6rem 1rem; border-bottom: 1px solid var(--mist); }
.content-prose tr:nth-child(even) td { background: var(--bg-light); }
/* Wide tables scroll inside their own container rather than forcing the page
to scroll sideways; the min-width keeps four columns readable rather than
letting them crush together. Top alignment because cells run to several
lines and a middle-aligned row reads as drifting. */
.table-scroll { overflow-x: auto; margin-bottom: 1.5rem; }
.table-scroll table { min-width: 760px; margin-bottom: 0; }
.table-scroll td { vertical-align: top; }
.phase-table .phase-num { width: 3rem; font-weight: 700; color: var(--blue); }
.phase-table .phase-name { width: 12rem; font-weight: 700; color: var(--charcoal); }
.content-prose code { background: var(--mist); padding: 0.15rem 0.4rem; border-radius: 2px; font-size: 0.94rem; }
.content-prose pre { background: var(--charcoal); color: #f0f0f0; padding: 1.5rem; border-radius: 4px; overflow-x: auto; margin-bottom: 1.5rem; }
.content-prose pre code { background: none; padding: 0; font-size: 0.9rem; }
.content-prose a { color: var(--blue); text-decoration: underline; text-decoration-color: rgba(0,88,149,0.3); }
.content-prose a:hover { color: var(--teal-light); }
.content-prose .btn-list { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 0 0 1.5rem; }
.content-prose a.btn { display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none; }
.content-prose a.btn::after { content: '→'; transition: transform 0.15s ease; }
.content-prose a.btn:hover::after { transform: translateX(3px); }
.content-prose img.float-right { float: right; max-width: 520px; width: 80%; margin: 0 0 2.5rem 2rem; border-radius: 4px; }
/* Half-width variant: scales with the content area instead of capping at a fixed px width. */
.content-prose img.float-right.img-half { width: 50%; max-width: none; }
/* Narrow variant: a fixed-width document thumbnail rather than an image that
scales with the column. Bordered, because these are white-page documents
that would otherwise bleed into the page. */
.content-prose img.float-right.img-narrow { width: 100%; max-width: 250px; border: 1px solid var(--mist); }
@media (max-width: 600px) {
.content-prose img.float-right,
.content-prose img.float-right.img-half,
.content-prose img.float-right.img-narrow { float: none; width: 100%; max-width: 320px; margin: 0 auto 1.5rem; }
}
/* ── Report Gallery (content-embedded) ───────────────────── */
.report-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; margin: 1.5rem 0 2rem; }
.report-gallery-item { background: var(--white); border: 1px solid var(--mist); border-top: 4px solid var(--blue); border-radius: 4px; overflow: hidden; transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s; }
.report-gallery-item:hover { border-color: var(--blue-light); box-shadow: 0 8px 24px rgba(0,20,40,0.14); transform: translateY(-2px); }
.report-gallery-item a { display: block; }
.report-gallery-item img { width: 100%; height: auto; border-bottom: 1px solid var(--mist); }
.report-gallery-caption { padding: 0.9rem 1.1rem; font-size: 0.95rem; color: var(--text-mid); line-height: 1.5; }
.report-gallery-caption strong { display: block; color: var(--charcoal); font-size: 1rem; margin-bottom: 0.15rem; }
/* Standalone figure centered and capped at 800px, so a single diagram does not
read as wide as a full two-up gallery but still fills a narrow content area. */
.report-gallery-item.fig-800 { width: 100%; max-width: 800px; margin-left: auto; margin-right: auto; }
/* Provenance note under a report gallery. Set smaller and centered against
the prose measure so it reads as a caption on the gallery rather than as
the next paragraph of body copy. */
.report-gallery-note { font-size: 0.9rem; font-style: italic; text-align: center; }
@media (max-width: 700px) {
.report-gallery { grid-template-columns: 1fr; }
}
/* ── Go Deeper Callout (content-embedded) ────────────────── */
.go-deeper-callout { display: flex; align-items: center; gap: 1.5rem; border-left: 4px solid var(--blue-light); background: var(--bg-light); padding: 1.25rem 1.5rem; margin: 1.5rem 0; border-radius: 2px; }
.go-deeper-callout img { width: 90px; height: auto; flex-shrink: 0; border-radius: 3px; }
.go-deeper-callout p { margin: 0; color: var(--text-mid); font-size: 1.02rem; }
@media (max-width: 600px) {
.go-deeper-callout { flex-direction: column; align-items: flex-start; }
}
/* ── Client Story (content-embedded) ─────────────────────── */
/* A first-party, anonymized story from a Glymr engagement. Deliberately
styled apart from .pat-media-card, which carries third-party published
examples, so a reader can tell whose result they are looking at. */
.client-story { background: var(--white); border: 1px solid var(--mist); border-left: 4px solid var(--teal-light); border-radius: 3px; padding: 1.75rem 1.75rem 1.5rem; margin: 1.75rem 0 2.25rem; }
.client-story-label { font-size: 0.86rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--teal-light); margin-bottom: 0.5rem; }
.client-story h3 { font-size: 1.25rem; font-weight: 700; color: var(--charcoal); line-height: 1.35; margin: 0 0 0.9rem; }
.client-story p { font-size: 1.05rem; color: var(--text-mid); line-height: 1.65; margin-bottom: 0.9rem; }
.client-story p:last-of-type { margin-bottom: 0; }
.client-story-point { color: var(--charcoal) !important; font-weight: 600; }
.client-story-cite { display: block; margin-top: 1.1rem; font-size: 0.9rem; font-style: italic; color: var(--slate); }
@media (max-width: 600px) {
.client-story { padding: 1.4rem 1.25rem 1.2rem; }
}
/* ── Deal Sides (content-embedded) ───────────────────────── */
/* Two quote panels, buyer and seller. Deliberately NOT .pat-comparison:
that pattern opposes its panels (light vs. dark, cross vs. check). Here
the panels must read as identical, because the point is that both sides
of a transaction hit the same problem. Only the role label differs. */
.deal-sides { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin: 1.5rem 0 1rem; }
.deal-side { background: var(--white); border: 1px solid var(--mist); border-top: 4px solid var(--blue); border-radius: 4px; padding: 1.75rem 1.5rem 1.5rem; display: flex; flex-direction: column; }
.deal-side-role { font-size: 0.86rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--teal-light); margin-bottom: 0.9rem; }
/* Reset the .content-prose blockquote treatment; inside a panel the quote is
the content, not an inset aside. */
.deal-side blockquote { border: 0; background: none; padding: 0; margin: 0 0 1.1rem; font-style: italic; color: var(--charcoal); font-size: 1.08rem; line-height: 1.55; font-weight: 500; flex-grow: 1; }
.deal-side blockquote p { margin: 0; color: inherit; font-size: inherit; line-height: inherit; }
.deal-side-attr { font-size: 0.95rem; color: var(--text-mid); line-height: 1.45; margin-top: auto; }
.deal-sides-source { font-size: 0.9rem; font-style: italic; color: var(--slate); }
/* On the deep band the panels invert: translucent white over the dark
surface, gold accents. Gold is the site's existing marker for quoted
speech (see .pat-testimonial), and it is the one warm accent in the
palette — which is most of the reason this band earns its place. */
.prose-band--deep .deal-side { background: rgba(255,255,255,0.055); border: 1px solid rgba(255,255,255,0.14); border-top: 4px solid var(--gold); }
.prose-band--deep .deal-side-role { color: var(--gold); }
.prose-band--deep .deal-side blockquote { color: rgba(255,255,255,0.95); }
.prose-band--deep .deal-side-attr { color: rgba(255,255,255,0.7); }
.prose-band--deep .deal-sides-source { color: rgba(255,255,255,0.68); }
/* .pat-stat-band carries its own teal-dark surface, which would sit dark-on-dark
inside the deep band. Drop that surface and let the tiles invert instead —
translucent white with a blue-light rule, matching the homepage .problem-stat
treatment. Left-aligned, because the accent rule needs an edge to sit against. */
.prose-band--deep .pat-stat-band {
background: none;
border-radius: 0;
padding: 0;
gap: 1rem;
text-align: left;
}
.prose-band--deep .pat-stat-band > div {
background: rgba(255,255,255,0.07);
border-left: 4px solid var(--blue-light);
border-radius: 2px;
padding: 1.25rem 1.5rem;
}
/* The concern list sets a charcoal body color for the light page. On the deep
band that is unreadable, so the text inverts while the amber diamond stays
as-is — it reads correctly against the dark teal without adjustment. */
.prose-band--deep .pat-concern-list li { color: rgba(255,255,255,0.85); }
.prose-band--deep .pat-concern-list li strong { color: var(--white); }
@media (max-width: 700px) {
.deal-sides { grid-template-columns: 1fr; }
}
/* ── Scalability Grid (content-embedded) ─────────────────── */
/* Row-by-row contrast between two companies on the same set of attributes.
Built for the deep band only: every color assumes the teal-dark surface.
A semantic table, because each row compares like with like. Company B's
column carries the tint and the blue-light rule so the eye settles there;
Company A's marker is cool gray rather than --risk, which falls under 3:1
against teal-dark. Selectors restate background because .content-prose
th and tr:nth-child(even) td would otherwise paint the light-page table. */
.scale-grid { width: 100%; table-layout: fixed; border-collapse: collapse; margin: 2rem 0 0; font-size: 1rem; }
.scale-grid-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.scale-grid thead th { width: 38%; background: none; color: var(--white); font-size: 1.08rem; font-weight: 700; text-align: left; vertical-align: bottom; padding: 0.95rem 1.25rem; border-bottom: 3px solid rgba(255,255,255,0.14); }
.scale-grid thead th:first-child { width: 24%; padding-left: 0; }
.scale-grid thead th.scale-grid-a { border-bottom-color: var(--cool-gray); }
.scale-grid thead th.scale-grid-b { border-bottom-color: var(--blue-light); }
.scale-grid tbody th { background: none; color: var(--white); font-weight: 700; text-align: left; vertical-align: top; line-height: 1.45; padding: 1.1rem 1.25rem 1.1rem 0; border-bottom: 1px solid rgba(255,255,255,0.12); }
.scale-grid td,
.scale-grid tr:nth-child(even) td { background: none; position: relative; vertical-align: top; line-height: 1.55; padding: 1.1rem 1.25rem 1.1rem 2.75rem; border-bottom: 1px solid rgba(255,255,255,0.12); }
.scale-grid .scale-grid-b,
.scale-grid tr:nth-child(even) .scale-grid-b { background: rgba(255,255,255,0.07); }
.scale-grid td.scale-grid-a { color: rgba(255,255,255,0.75); }
.scale-grid td.scale-grid-b { color: rgba(255,255,255,0.95); }
.scale-grid td::before { position: absolute; left: 1.25rem; top: 1.1rem; font-weight: 700; }
.scale-grid td.scale-grid-a::before { content: '✕'; color: var(--cool-gray); }
.scale-grid td.scale-grid-b::before { content: '✓'; color: var(--blue-light); }
/* Below 760px three columns crush, so each row becomes a card. The header row
is hidden, and each cell's data-label restores the company name above its
text, with the marker moved onto that label line. */
@media (max-width: 760px) {
.scale-grid, .scale-grid tbody, .scale-grid tr, .scale-grid th, .scale-grid td { display: block; width: auto; }
.scale-grid thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.scale-grid tbody tr { border: 1px solid rgba(255,255,255,0.14); border-radius: 4px; overflow: hidden; margin-bottom: 1rem; }
.scale-grid tbody th { padding: 1rem 1.25rem; font-size: 1.05rem; }
.scale-grid td,
.scale-grid tr:nth-child(even) td { padding: 0.9rem 1.25rem 1rem; border-bottom: 0; }
.scale-grid td.scale-grid-a { border-bottom: 1px solid rgba(255,255,255,0.12); }
.scale-grid td::before { position: static; display: block; margin-bottom: 0.3rem; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; }
.scale-grid td.scale-grid-a::before { content: '✕\00a0\00a0' attr(data-label); }
.scale-grid td.scale-grid-b::before { content: '✓\00a0\00a0' attr(data-label); }
}
/* ── Assessment Tiles (content-embedded) ─────────────────── */
.assessment-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.25rem; margin: 1.5rem 0 2.5rem; }
.assessment-tile { background: var(--white); border: 1px solid var(--mist); border-top: 4px solid var(--blue); border-radius: 4px; padding: 1.75rem 1.5rem; }
.assessment-tile--ai { border-top-color: var(--teal-light); }
.assessment-tile--unsure { border-top-color: var(--gold); }
.assessment-tile-icon { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--bg-light); color: var(--blue); margin: 0 auto 1rem; }
.assessment-tile-icon svg { width: 22px; height: 22px; }
.assessment-tile--ai .assessment-tile-icon { color: var(--teal-light); }
.assessment-tile--unsure .assessment-tile-icon { color: var(--caution); }
.assessment-tile h3 { font-size: 1.1rem; font-weight: 700; color: var(--charcoal); margin: 0 0 0.6rem; }
.assessment-tile p { color: var(--text-mid); font-size: 0.98rem; line-height: 1.6; margin: 0; }
.assessment-tile-link { margin-top: 0.9rem !important; font-size: 0.94rem; font-weight: 600; }
/* ── Buyer Card Grid (content-embedded) ──────────────────── */
/* .buyer-grid / .buyer-card are defined under "Buyer Paths" for the
homepage teaser, which sits outside .content-prose. Reused here (e.g. on
/who-we-help/) inside markdown-rendered prose, so restate the properties
.content-prose h3/p/a would otherwise win on cascade order. */
.buyer-card h3 { margin: 0 0 0.5rem; }
.buyer-card p { margin: 0 0 1rem; color: var(--text-mid); }
.buyer-card > a { text-decoration: none; }
/* ── Prose Band (content-embedded) ───────────────────────── */
/* Lifts a run of markdown out of .content-prose into a full-width tinted
band, matching the homepage .symptoms treatment. The negative horizontal
margins expand the block to the viewport; the matching padding puts the
text back on the container measure, so .prose-band-inner needs no
container of its own. Type properties are restated because
.content-prose h2/p would otherwise win on cascade order. */
.prose-band {
/* Full-bleed: the band's background runs edge to edge, so a float from the
preceding section would sit on top of it rather than beside it. Clear
first — a float must never intrude on a band. */
clear: both;
margin: 3.5rem calc(50% - 50vw);
padding: 4.5rem calc(50vw - 50%);
background: var(--bg-light);
}
.prose-band--gray { background: var(--bg-light); }
.prose-band-inner { max-width: 1140px; margin: 0 auto; }
.prose-band-inner > *:last-child { margin-bottom: 0; }
.prose-band .section-label { color: var(--teal-light); margin-bottom: 0.5rem; }
.prose-band h2 { font-size: 1.9rem; margin: 0 0 0.9rem; }
/* A band that closes the body runs flush into the section after it (the final
CTA on standard pages). The negative margin cancels .page-body's 4rem bottom
padding; otherwise a white strip separates the two full-bleed surfaces. */
.content-prose > .prose-band:last-child { margin-bottom: -4rem; }
/* Deep variant: a full-bleed dark surface for a section that needs weight in
the middle of a long white page. Teal-dark rather than the hero's blue, so
the band reads as a second surface instead of a repeat of the hero. */
.prose-band--deep { background: linear-gradient(160deg, var(--teal-dark) 0%, #0a353b 100%); color: rgba(255,255,255,0.85); }
.prose-band--deep h2 { color: var(--white); }
.prose-band--deep .section-label { color: var(--blue-light); }
.prose-band--deep p { color: rgba(255,255,255,0.85); }
.prose-band--deep a { color: var(--blue-light); text-decoration-color: rgba(0,199,255,0.4); }
.prose-band--deep a:hover { color: var(--white); }
@media (max-width: 600px) {
.prose-band { margin: 2.5rem calc(50% - 50vw); padding: 3rem calc(50vw - 50%); }
}
/* ── Article Layout ───────────────────────────────────── */
.article-layout { padding: 4rem 0; }
.article-body { max-width: 720px; }
/* ── CTA Block (inline) ───────────────────────────────── */
.cta-block { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.5rem; }
/* ── Embedded Form ────────────────────────────────────── */
.form-embed { background: var(--bg-light); padding: 3rem 0 4rem; border-top: 1px solid var(--mist); }
.form-embed-inner { max-width: 800px; margin: 0 auto; background: var(--white); border: 1px solid var(--mist); border-radius: 4px; padding: 2.5rem; }
/* Fixed viewport-fit height, no data-resize: Calendly positions its dropdown
menus against the iframe's own window, so a frame taller than the screen
pushes the option list to the bottom of the frame. The form scrolls inside. */
.calendly-inline-widget { min-width: 320px; height: calc(100vh - 64px - 3rem); height: calc(100dvh - 64px - 3rem); min-height: 600px; max-height: 1000px; }
/* Popup-mode booking button: a dark panel (same gradient as the page hero)
with an enlarged gold button. Charcoal text restores .btn-primary's colour,
which .content-prose a would otherwise turn blue. */
.calendly-popup-cta { width: 75%; margin: 2rem auto 2.5rem; padding: 3rem 2rem; text-align: center; background: linear-gradient(145deg, #00395f 0%, var(--blue) 55%, #005080 100%); border-radius: 4px; }
.content-prose .calendly-popup-cta a.btn,
.content-prose .calendly-popup-cta a.btn:hover { color: var(--charcoal); }
.calendly-popup-cta .btn { font-size: 1.35rem; padding: 1.1rem 2.75rem; }
@media (max-width: 600px) {
.calendly-popup-cta { width: 100%; padding: 2.25rem 1.25rem; }
.calendly-popup-cta .btn { font-size: 1.15rem; padding: 1rem 1.75rem; }
}
/* ── Footer ───────────────────────────────────────────── */
.site-footer { background: #002740; color: rgba(255,255,255,0.45); padding: 3rem 0 1.5rem; }
.footer-inner { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 2rem; padding-bottom: 2rem; border-bottom: 1px solid rgba(255,255,255,0.08); }
.footer-brand { display: flex; flex-direction: column; gap: 0.5rem; }
.footer-logo img { height: 32px; width: auto; }
.footer-tagline { font-size: 0.94rem; color: rgba(255,255,255,0.45); max-width: 240px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem; list-style: none; }
.footer-links a { font-size: 0.98rem; color: rgba(255,255,255,0.45); transition: color 0.15s; }
.footer-links a:hover { color: rgba(255,255,255,0.8); }
.footer-bottom { padding-top: 1.25rem; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.5rem 1.75rem; }
.footer-copy { font-size: 0.94rem; }
.footer-legal { font-size: 0.94rem; color: rgba(255,255,255,0.45); transition: color 0.15s; }
.footer-legal:hover { color: rgba(255,255,255,0.8); }
/* ── Services Landing (service-index-page) ────────────── */
/* The .svc-* stage classes below define accent tokens only, and are reused by
the homepage "How We Work" steps (.model-step) so the two presentations of
the same model cannot drift apart. Stage accents run dark → light across
the numbered sequence (scattered knowledge becoming usable); gold is
deliberately absent from the sequence and reserved for the Preserve track,
where it marks urgency rather than competing with CTA gold inside a stage. */
.svc-identify { --svc-accent: var(--teal-dark); --svc-ink: var(--teal-dark); }
.svc-map { --svc-accent: var(--blue); --svc-ink: var(--blue); }
.svc-capture { --svc-accent: var(--teal-light); --svc-ink: var(--teal-light); }
.svc-usable { --svc-accent: var(--blue-light); --svc-ink: var(--blue); }
.svc-preserve { --svc-accent: var(--gold); --svc-ink: #8a6100; }
/* Stage rail */
.svc-rail { background: var(--white); border-bottom: 1px solid var(--mist); padding: 3rem 0 2.75rem; }
.svc-rail-heading { font-size: 1.5rem; font-weight: 700; color: var(--charcoal); text-align: center; line-height: 1.25; margin-bottom: 2.25rem; }
.svc-rail-track { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.svc-rail-step { position: relative; padding: 0 1rem; text-align: center; }
.svc-rail-step:first-child { padding-left: 0; }
.svc-rail-step:last-child { padding-right: 0; }
.svc-rail-step:not(:last-child)::after {
content: ''; position: absolute; top: 28px; left: 50%;
width: 100%; height: 2px; background: var(--mist); z-index: 0;
}
.svc-rail-marker {
position: relative; z-index: 1;
width: 56px; height: 56px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
margin: 0 auto 0.9rem;
background: var(--svc-accent); color: var(--white);
font-weight: 700; font-size: 1.3rem; font-variant-numeric: tabular-nums;
}
/* Light accents need dark type to stay legible on the marker. */
.svc-usable .svc-rail-marker { color: var(--charcoal); }
.svc-rail-step h2 { font-size: 1.35rem; font-weight: 700; color: var(--charcoal); margin-bottom: 0.3rem; line-height: 1.2; }
.svc-rail-step p { font-size: 0.98rem; color: var(--text-mid); line-height: 1.5; }
.svc-rail-step a:hover h2 { color: var(--blue); }
/* Operating assets band */
/* Deep blue, not the dark teal used elsewhere: this band sits directly above
the Preserve track, which is dark teal, and the two panels have to stay
legibly separate. Preserve's gold top rule then divides them deliberately. */
.svc-assets { background: var(--blue); color: var(--white); padding: 3.25rem 0; }
.svc-assets .section-label { color: var(--blue-light); }
.svc-assets-inner { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 3rem; align-items: center; }
.svc-assets h2 { font-size: 1.7rem; font-weight: 700; margin-bottom: 0.85rem; max-width: 24ch; line-height: 1.2; }
.svc-assets p { color: rgba(255,255,255,0.8); font-size: 1.08rem; line-height: 1.65; }
.svc-asset-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 0.7rem; padding: 0; }
.svc-asset-chips li {
background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.16);
border-radius: 20px; padding: 0.5rem 1.1rem;
font-size: 0.98rem; color: rgba(255,255,255,0.92);
}
/* Stage sections */
.svc-stage { padding: 4rem 0; }
.svc-stage--tint { background: var(--bg-light); }
/* No align-items here: the numeral cell stretches to the full height of the
eyebrow + title + description, so the stage marker reads as a block label
for the whole group rather than a short number indenting a tall text block.
The block carries the stage accent so it ties back to the rail markers at the
top of the page, and gives each stage some visual weight. */
.svc-stage-head { display: grid; grid-template-columns: auto 1fr; gap: 1.5rem; margin-bottom: 2rem; }
.svc-stage-num {
display: flex; align-items: center; justify-content: center;
min-width: 4.75rem; padding: 1.25rem 1rem;
background: var(--svc-accent); border-radius: 3px;
font-size: 2.6rem; font-weight: 700; line-height: 1;
color: var(--white); font-variant-numeric: tabular-nums;
}
/* White on --blue-light is about 1.9:1 — well under the 3:1 large-text floor.
Charcoal on the same fill is ~7.6:1, so stage 04 flips its numeral dark.
The other three accents are deep enough to carry white. */
.svc-usable .svc-stage-num { color: var(--charcoal); }
.svc-eyebrow {
font-size: 0.86rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
color: var(--svc-ink); margin-bottom: 0.4rem;
}
.svc-stage-head h2 { font-size: 1.9rem; font-weight: 700; color: var(--charcoal); margin-bottom: 0.6rem; line-height: 1.2; }
.svc-stage-head > div > p { color: var(--text-mid); font-size: 1.08rem; line-height: 1.7; }
.svc-stage-head a { color: var(--blue); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(0,88,149,0.3); }
.svc-stage-head a:hover { color: var(--teal-light); }
/* Two columns regardless of how many services a stage holds, so a stage with
one service (Capture) keeps the same tile width as every other stage. */
.svc-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
.svc-card {
display: flex; flex-direction: column;
background: var(--white); border: 1px solid var(--mist);
border-top: 4px solid var(--svc-accent); border-radius: 4px;
padding: 1.85rem;
transition: box-shadow 0.15s, transform 0.15s;
}
.svc-card:hover { box-shadow: 0 10px 28px rgba(0,20,40,0.11); transform: translateY(-3px); }
.svc-card h3 { font-size: 1.3rem; font-weight: 700; color: var(--charcoal); margin-bottom: 0.6rem; }
.svc-card p { font-size: 1.04rem; color: var(--text-mid); line-height: 1.6; margin-bottom: 1.35rem; }
.svc-card-link {
margin-top: auto; align-self: flex-start;
font-size: 1rem; font-weight: 700; color: var(--blue);
display: inline-flex; align-items: center; gap: 0.35rem;
}
.svc-card-link::after { content: '→'; transition: transform 0.15s ease; }
.svc-card:hover .svc-card-link::after,
.svc-track-card:hover .svc-card-link::after { transform: translateX(3px); }
.svc-card-link:hover { color: var(--teal-light); }
/* Preserve track — visually outside the numbered sequence on purpose. */
.svc-track { background: var(--teal-dark); color: var(--white); padding: 4rem 0; border-top: 4px solid var(--gold); }
.svc-track-head { max-width: 46rem; margin-bottom: 2rem; }
.svc-track-flag {
display: inline-block;
font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
color: var(--charcoal); background: var(--gold);
border-radius: 2px; padding: 0.25rem 0.7rem; margin-bottom: 0.9rem;
}
.svc-track-head h2 { font-size: 1.9rem; font-weight: 700; margin-bottom: 0.7rem; line-height: 1.2; }
.svc-track-head p { color: rgba(255,255,255,0.8); font-size: 1.08rem; line-height: 1.7; }
.svc-track-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
.svc-track-card {
display: flex; flex-direction: column;
background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.16);
border-radius: 4px; padding: 1.85rem;
}
.svc-track-card h3 { font-size: 1.3rem; font-weight: 700; color: var(--white); margin-bottom: 0.6rem; }
.svc-track-card p { font-size: 1.04rem; color: rgba(255,255,255,0.78); line-height: 1.6; margin-bottom: 1.35rem; }
.svc-track-card .svc-card-link { color: var(--gold); }
.svc-track-card .svc-card-link:hover { color: var(--white); }
/* Where to start — reuses .assessment-option from the homepage block. */
.svc-where { background: var(--white); border-top: 1px solid var(--mist); padding: 4.5rem 0; }
.svc-where-head { text-align: center; max-width: 620px; margin: 0 auto 2.5rem; }
.svc-where-head h2 { font-size: 1.9rem; font-weight: 700; color: var(--charcoal); margin-bottom: 0.75rem; line-height: 1.2; }
.svc-where-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.svc-where .assessment-option { display: flex; flex-direction: column; }
.svc-where .assessment-option .btn { margin-top: auto; align-self: flex-start; }
.svc-where-note { text-align: center; margin-top: 2rem; color: var(--text-mid); font-size: 1.02rem; }
.svc-where-note a { color: var(--blue); font-weight: 600; }
.svc-where-note a:hover { color: var(--teal-light); }
@media (max-width: 900px) {
.svc-assets-inner { grid-template-columns: 1fr; gap: 1.75rem; }
.svc-rail-track { grid-template-columns: repeat(2, 1fr); gap: 1.75rem 0; }
.svc-rail-step:nth-child(2)::after { display: none; }
.svc-cards,
.svc-track-cards,
.svc-where-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
.svc-rail-track { grid-template-columns: 1fr; gap: 1.5rem; }
.svc-rail-step { padding: 0; }
.svc-rail-step::after { display: none; }
/* Stacked: the marker becomes a badge above the text rather than a
full-width bar. */
.svc-stage-head { grid-template-columns: 1fr; gap: 0.9rem; }
.svc-stage-num { justify-self: start; min-width: 0; padding: 0.5rem 0.9rem; font-size: 1.6rem; }
}
/* ── What We Solve Landing (problem-index-page) ────────── */
/* The hero promises three consequences — "slow your growth, increase your
risk, and block your AI adoption" — so the page delivers exactly that
rather than seven peer cards in arbitrary order. Knowledge Friction is
promoted out of the card set to the root condition, per the positioning
that knowledge friction is the primary problem Glymr identifies. See
DEC-016. Structure is expressed in templates/problem-index-page.php for
the same reason the Services landing lives in its own template. */
/* Group accents, same mechanism as the .svc-* stage accents. */
.wws-growth { --wws-accent: var(--teal-light); --wws-ink: var(--teal-light); }
.wws-risk { --wws-accent: var(--risk); --wws-ink: var(--risk); }
.wws-ai { --wws-accent: var(--blue-light); --wws-ink: var(--blue); }
/* — Consequence rail: the hero's three-part promise, made structural — */
.wws-rail { background: var(--white); border-bottom: 1px solid var(--mist); padding: 3rem 0 2.75rem; }
.wws-rail-heading { font-size: 1.5rem; font-weight: 700; color: var(--charcoal); text-align: center; line-height: 1.25; margin-bottom: 2.25rem; }
.wws-rail-track { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.wws-rail-step { position: relative; padding: 0 1.5rem; text-align: center; }
.wws-rail-step:first-child { padding-left: 0; }
.wws-rail-step:last-child { padding-right: 0; }
.wws-rail-step:not(:last-child)::after {
content: ''; position: absolute; right: 0; top: 0.4rem; bottom: 0.4rem;
width: 1px; background: var(--mist);
}
.wws-rail-icon {
width: 2.9rem; height: 2.9rem; margin: 0 auto 0.85rem;
display: flex; align-items: center; justify-content: center;
border-radius: 50%; background: var(--wws-accent); color: var(--white);
}
/* White on --blue-light is about 1.9:1. Charcoal on the same fill is ~7.6:1,
so the AI marker flips its glyph dark, matching the .svc-usable rule. */
.wws-ai .wws-rail-icon { color: var(--charcoal); }
.wws-rail-icon svg { width: 1.45rem; height: 1.45rem; }
.wws-rail-step h2 { font-size: 1.35rem; font-weight: 700; color: var(--charcoal); margin-bottom: 0.3rem; line-height: 1.2; }
.wws-rail-step p { font-size: 0.98rem; color: var(--text-mid); line-height: 1.5; }
.wws-rail-step a:hover h2 { color: var(--blue); }
/* — Root condition: Knowledge Friction, promoted above the six — */
.wws-root { background: var(--bg-light); padding: 4.25rem 0; }
.wws-root-inner { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 3rem; align-items: start; }
.wws-root-flag {
display: inline-block;
font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
color: var(--white); background: var(--blue);
border-radius: 2px; padding: 0.25rem 0.7rem; margin-bottom: 0.9rem;
}
.wws-root h2 { font-size: 2rem; font-weight: 700; color: var(--charcoal); margin-bottom: 0.8rem; line-height: 1.18; }
.wws-root p { color: var(--text-mid); font-size: 1.1rem; line-height: 1.7; margin-bottom: 1.1rem; }
.wws-root-link {
font-size: 1.05rem; font-weight: 700; color: var(--blue);
display: inline-flex; align-items: center; gap: 0.35rem;
}
.wws-root-link::after { content: '\2192'; transition: transform 0.15s ease; }
.wws-root-link:hover { color: var(--teal-light); }
.wws-root-link:hover::after { transform: translateX(3px); }
/* Light stat tiles rather than the dark .pat-stat-band, so the only dark
panel on the page stays the AI band further down. */
.wws-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--mist); border: 1px solid var(--mist); border-radius: 4px; overflow: hidden; }
.wws-stat { background: var(--white); padding: 1.6rem 1.4rem; }
.wws-stat-num { font-size: 2.1rem; font-weight: 700; color: var(--blue); line-height: 1; margin-bottom: 0.45rem; }
.wws-stat-label { font-size: 0.98rem; color: var(--text-mid); line-height: 1.45; }
.wws-stat-cite { margin-top: 0.55rem; font-size: 0.74rem; color: var(--slate); font-style: italic; line-height: 1.4; }
/* — Consequence groups — */
.wws-group { padding: 4rem 0; }
.wws-group--tint { background: var(--bg-light); }
/* The head shares the card grid's column track so the intro paragraph ends on
a real grid line — where the last card begins — instead of stopping at an
arbitrary measure short of the cards below it. */
.wws-group-head { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 1.5rem; margin-bottom: 2rem; }
.wws-group-head > * { grid-column: 1 / -1; }
.wws-group-head > p { grid-column: 1 / 3; }
.wws-group-head--two { grid-template-columns: repeat(2, 1fr); }
.wws-group-head--two > p { grid-column: 1 / 2; }
.wws-eyebrow {
font-size: 0.86rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
color: var(--wws-ink); margin-bottom: 0.4rem;
}
.wws-group-head h2 { font-size: 1.9rem; font-weight: 700; color: var(--charcoal); margin-bottom: 0.6rem; line-height: 1.2; }
.wws-group-head > p { color: var(--text-mid); font-size: 1.08rem; line-height: 1.7; }
.wws-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.wws-cards--two { grid-template-columns: repeat(2, 1fr); }
.wws-card {
display: flex; flex-direction: column;
background: var(--white); border: 1px solid var(--mist);
border-top: 4px solid var(--wws-accent); border-radius: 4px;
padding: 1.75rem;
transition: box-shadow 0.15s, transform 0.15s;
}
.wws-card:hover { box-shadow: 0 10px 28px rgba(0,20,40,0.11); transform: translateY(-3px); }
.wws-card h3 { font-size: 1.24rem; font-weight: 700; color: var(--charcoal); margin-bottom: 0.55rem; line-height: 1.3; }
.wws-card > p { font-size: 1.02rem; color: var(--text-mid); line-height: 1.6; margin-bottom: 1.1rem; }
/* A rule and a label rather than a filled box: at three cards across, the
filled treatment reads as a slab and buries the card heading. */
.wws-card-impact { border-left: 3px solid var(--risk); padding-left: 0.9rem; margin-bottom: 1.25rem; }
.wws-card-impact-label { display: block; font-size: 0.76rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--risk); margin-bottom: 0.25rem; }
.wws-card-impact p { font-size: 0.97rem; color: var(--charcoal); line-height: 1.5; margin: 0; }
.wws-card-link {
margin-top: auto; align-self: flex-start;
font-size: 1rem; font-weight: 700; color: var(--blue);
display: inline-flex; align-items: center; gap: 0.35rem;
}
.wws-card-link::after { content: '\2192'; transition: transform 0.15s ease; }
.wws-card:hover .wws-card-link::after { transform: translateX(3px); }
.wws-card-link:hover { color: var(--teal-light); }
/* — Client story band: surfaced from the Expert Bottlenecks page — */
/* Two columns spanning the container edges rather than a centred block, so
the story sits on the same left margin as every other band on the page. */
.wws-story { background: var(--bg-light); padding: 4rem 0; }
.wws-story-inner { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 3rem; align-items: start; }
.wws-story-label { font-size: 0.86rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--teal-light); margin-bottom: 0.6rem; }
.wws-story h2 { font-size: 1.6rem; font-weight: 700; color: var(--charcoal); line-height: 1.32; margin-bottom: 1.25rem; }
.wws-story p { font-size: 1.06rem; color: var(--text-mid); line-height: 1.7; margin-bottom: 0.9rem; }
.wws-story-point { color: var(--charcoal) !important; font-weight: 600; }
.wws-story-cite { display: block; margin-top: 1.1rem; font-size: 0.9rem; font-style: italic; color: var(--slate); }
.wws-story-link { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 1rem; font-weight: 700; color: var(--blue); }
.wws-story-link::after { content: '\2192'; transition: transform 0.15s ease; }
.wws-story-link:hover { color: var(--teal-light); }
.wws-story-link:hover::after { transform: translateX(3px); }
/* — AI band: one problem, so it gets its own panel rather than a lone card
stranded in a third of a grid row — */
.wws-ai-band { background: var(--teal-dark); color: var(--white); padding: 4rem 0; border-top: 4px solid var(--blue-light); }
.wws-ai-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; align-items: start; }
.wws-ai-band .wws-eyebrow { color: var(--blue-light); }
.wws-ai-band h2 { font-size: 1.9rem; font-weight: 700; margin-bottom: 0.8rem; line-height: 1.2; }
.wws-ai-band p { color: rgba(255,255,255,0.82); font-size: 1.08rem; line-height: 1.7; margin-bottom: 1.1rem; }
.wws-ai-quote { font-size: 1.18rem; font-weight: 600; color: var(--white); border-left: 4px solid var(--gold); padding-left: 1.35rem; margin: 1.5rem 0; line-height: 1.5; }
.wws-ai-band .wws-card-link { color: var(--gold); }
.wws-ai-band .wws-card-link:hover { color: var(--white); }
.wws-ai-needs { list-style: none; display: flex; flex-wrap: wrap; gap: 0.7rem; padding: 0; margin-bottom: 1.5rem; }
.wws-ai-needs li { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15); border-radius: 20px; padding: 0.45rem 1rem; font-size: 0.96rem; color: rgba(255,255,255,0.92); }
.wws-ai-needs-label { font-size: 0.98rem; color: rgba(255,255,255,0.7); margin-bottom: 0.85rem; }
/* — Where to start: the same block as the Services landing, per DEC-011 — */
.wws-where { background: var(--white); border-top: 1px solid var(--mist); padding: 4.5rem 0; }
.wws-where-head { text-align: center; max-width: 620px; margin: 0 auto 2.5rem; }
.wws-where-head h2 { font-size: 1.9rem; font-weight: 700; color: var(--charcoal); margin-bottom: 0.75rem; line-height: 1.2; }
.wws-where-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.wws-where .assessment-option { display: flex; flex-direction: column; }
.wws-where .assessment-option .btn { margin-top: auto; align-self: flex-start; }
.wws-where-note { text-align: center; margin-top: 2rem; color: var(--text-mid); font-size: 1.02rem; }
.wws-where-note a { color: var(--blue); font-weight: 600; }
.wws-where-note a:hover { color: var(--teal-light); }
@media (max-width: 900px) {
.wws-rail-track { grid-template-columns: 1fr; gap: 1.75rem; }
.wws-rail-step { padding: 0; }
.wws-rail-step::after { display: none; }
.wws-root-inner,
.wws-story-inner,
.wws-ai-inner { grid-template-columns: 1fr; gap: 1.75rem; }
.wws-cards,
.wws-cards--two,
.wws-where-grid { grid-template-columns: 1fr; }
.wws-group-head,
.wws-group-head--two { grid-template-columns: 1fr; }
.wws-group-head > p,
.wws-group-head--two > p { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
.wws-stats { grid-template-columns: 1fr; }
}
/* ── Responsive ───────────────────────────────────────── */
/* Intermediate stage: shrink nav link text before dropping to the hamburger
drawer, buying extra width at the tighter viewport sizes below. */
@media (max-width: 1100px) {
.nav-links a { font-size: 0.98rem; }
}
/* Nav switches to the hamburger drawer here — the shrunk-font row's natural
fit boundary measures at 967px (fits exactly at 967, overflows at 966 and
below), so the switch is set a little above that as a buffer. */
@media (max-width: 980px) {
.nav-links { display: none; flex-direction: column; align-items: stretch; position: absolute; top: 64px; left: 0; right: 0; background: var(--blue); padding: 1rem 2rem 1.5rem; gap: 0.75rem; max-height: calc(100vh - 64px); overflow-y: auto; }
.nav-links--open { display: flex; }
.nav-links a { font-size: 1.04rem; }
.nav-toggle { display: flex; flex-shrink: 0; }
.nav-links li.has-dropdown { flex-wrap: wrap; justify-content: space-between; }
.nav-caret::after { border-color: rgba(255,255,255,0.7); }
.nav-dropdown,
.nav-dropdown--wide {
position: static;
display: none;
width: 100%;
min-width: 0;
column-count: 1;
background: rgba(255,255,255,0.06);
box-shadow: none;
border-radius: 3px;
margin-top: 0.5rem;
opacity: 1;
visibility: visible;
transform: none;
}
.nav-links li.has-dropdown.nav-dropdown--open .nav-dropdown { display: block; }
.nav-dropdown li a { color: rgba(255,255,255,0.85); padding: 0.55rem 1rem; }
.nav-dropdown li a:hover { background: rgba(255,255,255,0.08); color: var(--white); }
.nav-dropdown-heading { color: rgba(255,255,255,0.55); }
.nav-dropdown-heading:not(:first-child) { border-top-color: rgba(255,255,255,0.12); }
.nav-dropdown-group,
.nav-dropdown-group-list { display: block; }
}
@media (max-width: 900px) {
.problem-inner,
.dual-assessment-grid,
.assessment-tiles { grid-template-columns: 1fr; }
.model-steps { grid-template-columns: repeat(2, 1fr); }
.buyer-grid,
.insights-grid { grid-template-columns: repeat(2, 1fr); }
.proof-grid { grid-template-columns: 1fr; }
.footer-inner { flex-direction: column; }
}
/* Section paragraph rules (.problem p, .symptoms-header p, .ai-urgency p,
.dual-assessment-header p, .svc-assets p) also match the eyebrow, since it
is a , and were blowing it up to body-copy size in those sections only.
Same specificity as those rules, so it must stay below them in this file.
Color is left to each section. */
p.section-label { font-size: 0.86rem; line-height: 1.6; margin-bottom: 0.5rem; }
/* ══════════════════════════════════════════════════════════════════════
PATTERN LIBRARY — content-area patterns for future pages
------------------------------------------------------------------------
Demonstrated at /patterns/. Not all of these are wired into a live
template yet — copy the markup + classes into a page when adopting one.
All classes are namespaced "pat-" so they can't collide with anything
else in this file.
══════════════════════════════════════════════════════════════════════ */
/* ── Shared helpers ───────────────────────────────────────────────── */
/* Pattern cards are rendered inside .content-prose, where h2/h3/h4 carry
their own top margin for prose flow. That margin isn't wanted on a
heading nested inside a card/tile — it opened a gap above the title
that the card's own padding didn't account for. Neutralize it here so
every pattern component owns its internal spacing regardless of the
prose context it's dropped into. */
.content-prose [class*="pat-"] h2,
.content-prose [class*="pat-"] h3,
.content-prose [class*="pat-"] h4 { margin-top: 0; }
/* Pattern components style their own interior but carry no outer margin,
and .content-prose creates vertical rhythm only through the margins on
p/h2/ul. A bare
inherits none of those, so anything
written directly beneath one sits flush against it — a media-card grid
followed by a testimonial rendered with a 0px gap, and the tinted,
gold-ruled testimonial panel read as colliding with the cards above it.
Give every top-level pattern block its own trailing gap, so any pattern
can be dropped anywhere in a content file, next to anything, without
hand-tuned spacing. Bottom margin only, matching how p/ul/table/pre are
handled above: the preceding element's own bottom margin still sets the
lead-in gap, which keeps a heading (12px) or a "...includes:" paragraph
(20px) tight to the block it introduces. Margins collapse, so a block
followed by an h2 still opens at that heading's 2.5rem, not 5rem. Side
margins are left alone — .pat-testimonial and .pat-pull-quote center
themselves with auto margins that a shorthand here would wipe out. */
.content-prose > [class*="pat-"],
.prose-band-inner > [class*="pat-"] { margin-bottom: 2.5rem; }
/* .page-body and .prose-band already pad the end of the run; without this a
pattern block that closes the content doubles that gap. Restated here
because the rule above outweighs the general .prose-band-inner > *:last-child
reset. */
.content-prose > [class*="pat-"]:last-child,
.prose-band-inner > [class*="pat-"]:last-child { margin-bottom: 0; }
.pat-eyebrow {
font-size: 0.86rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--teal-light);
margin-bottom: 0.6rem;
}
.pat-img-placeholder {
display: flex;
align-items: center;
justify-content: center;
background: repeating-linear-gradient(
135deg,
var(--mist),
var(--mist) 10px,
#dde5eb 10px,
#dde5eb 20px
);
color: var(--slate);
font-size: 0.9rem;
font-weight: 600;
letter-spacing: 0.04em;
border-radius: 4px;
min-height: 220px;
}
/* ═══ TEXT PATTERNS ══════════════════════════════════════════════════ */
/* — Split Text: narrow label column + wider copy column — */
.pat-split-text {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 2.5rem;
}
.pat-split-text h3 {
font-size: 1.5rem;
font-weight: 700;
color: var(--charcoal);
line-height: 1.25;
}
.pat-split-text p {
font-size: 1.1rem;
color: var(--text-mid);
line-height: 1.7;
margin-bottom: 1rem;
}
.pat-split-text p:last-child { margin-bottom: 0; }
/* — Two-Column Copy: long-form body text set in CSS columns — */
.pat-two-col-copy {
column-count: 2;
column-gap: 2.5rem;
font-size: 1.08rem;
color: var(--text-mid);
line-height: 1.75;
}
.pat-two-col-copy p { margin-bottom: 1.1rem; break-inside: avoid; }
/* — Pull Quote: large centered statement — */
.pat-pull-quote {
max-width: 720px;
margin: 0 auto;
text-align: center;
}
.pat-pull-quote p {
font-size: clamp(1.4rem, 2.6vw, 1.9rem);
font-weight: 600;
color: var(--charcoal);
line-height: 1.4;
}
.pat-pull-quote cite {
display: block;
margin-top: 1.25rem;
font-style: normal;
font-size: 1rem;
font-weight: 600;
color: var(--slate);
}
/* — Quote Square: a short statement set in a floated, hero-gradient square
beside a paragraph, the way .float-right images sit. Place it before the
paragraph it accompanies. Keep the text to two short sentences; the square
does not grow gracefully. Documented in patterns/index.html#text-quote-square.
Type is sized against the square's own width (cqi), not the viewport, so it
reaches full size only in a full-width 380px square — the maximum content
width — and scales down with the square anywhere narrower. — */
.content-prose > .pat-quote-square {
float: right;
width: 36%;
min-width: 260px; /* below this the 1.25rem floor type overflows the square */
max-width: 380px;
aspect-ratio: 1 / 1;
margin: 0.35rem 0 2rem 2.5rem;
padding: 2.25rem;
display: flex;
flex-direction: column;
justify-content: center;
gap: 1rem;
position: relative;
overflow: hidden;
border-radius: 4px;
background: linear-gradient(145deg, #00395f 0%, var(--blue) 55%, #005080 100%);
color: var(--white);
container-type: inline-size;
}
.pat-quote-square::after {
content: '';
position: absolute;
bottom: 0; left: 0; right: 0;
height: 4px;
background: linear-gradient(to right, var(--blue-light), var(--gold));
}
.content-prose .pat-quote-square p { margin: 0; }
/* cqi resolves against the square's content box (380px minus 2.25rem padding
each side = 308px at the maximum), so 9.66cqi / 6.55cqi give 1.86rem /
1.26rem there. Narrower squares fall back to the 1.25rem / 1.05rem floor. */
.content-prose .pat-quote-square-lead {
font-size: clamp(1.25rem, 9.66cqi, 1.86rem);
font-weight: 600;
line-height: 1.3;
color: var(--white);
}
.content-prose .pat-quote-square-follow {
font-size: clamp(1.05rem, 6.55cqi, 1.26rem);
font-weight: 500;
line-height: 1.45;
color: var(--blue-light);
}
@media (max-width: 600px) {
.content-prose > .pat-quote-square { float: none; width: 100%; min-width: 0; max-width: none; aspect-ratio: auto; margin: 0 0 1.5rem; padding: 1.75rem 1.5rem 2rem; }
/* Full-width and no longer square: hold the type at its small size. */
.content-prose .pat-quote-square-lead { font-size: 1.25rem; }
.content-prose .pat-quote-square-follow { font-size: 1.05rem; }
}
/* — Lede: eyebrow + headline + standfirst intro — */
.pat-lede { max-width: 700px; }
.pat-lede h2 {
font-size: clamp(1.8rem, 3vw, 2.4rem);
font-weight: 700;
color: var(--charcoal);
line-height: 1.2;
margin-bottom: 1rem;
}
.pat-lede p {
font-size: 1.2rem;
color: var(--text-mid);
line-height: 1.7;
}
/* ═══ LIST PATTERNS ══════════════════════════════════════════════════ */
/* — Checkmark List, two columns — */
.pat-check-list {
list-style: none;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.9rem 2rem;
}
/* Positioned marker, not a flex item: a bold lead-in and the text after it
must stay one flowing run. As flex items they split into side-by-side
columns (see .pat-concern-list). 22px icon + 12px gap = 2.125rem indent. */
.pat-check-list li {
position: relative;
padding-left: 2.125rem;
font-size: 1.05rem;
color: var(--charcoal);
line-height: 1.5;
}
.pat-check-list .pat-check-icon {
position: absolute;
left: 0;
top: 0;
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--teal-light);
color: var(--white);
display: flex;
align-items: center;
justify-content: center;
margin-top: 0.1rem;
}
.pat-check-list .pat-check-icon svg { width: 12px; height: 12px; }
/* — Symptom List, single column — */
.pat-symptom-list {
list-style: none;
display: flex;
flex-direction: column;
gap: 0.9rem;
}
/* Same positioned-marker treatment as .pat-check-list. */
.pat-symptom-list li {
position: relative;
padding-left: 2.125rem;
font-size: 1.05rem;
color: var(--charcoal);
line-height: 1.5;
}
.pat-symptom-list .pat-symptom-icon {
position: absolute;
left: 0;
top: 0;
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--risk);
color: var(--white);
display: flex;
align-items: center;
justify-content: center;
margin-top: 0.1rem;
}
.pat-symptom-list .pat-symptom-icon svg { width: 12px; height: 12px; }
/* — Concern List, single column (amber/caution) — */
.pat-concern-list {
list-style: none;
display: flex;
flex-direction: column;
gap: 0.9rem;
}
/* The bullet is positioned rather than made a flex item, so the bold lead-in
and the text that follows it stay a single flowing run. As flex items they
became separate columns, which held together at full width but broke into a
ragged two-column block as soon as the measure narrowed — beside a floated
image, for instance. Offsets reproduce the previous flex geometry exactly:
12px bullet + 12px gap = 1.5rem of indent. */
.pat-concern-list li {
position: relative;
padding-left: 1.5rem;
font-size: 1.05rem;
color: var(--charcoal);
line-height: 1.5;
}
.glymr-bullet {
width: 12px;
height: 12px;
border: 2px solid var(--caution);
transform: rotate(45deg);
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.glymr-bullet::after {
content: "";
width: 3px;
height: 3px;
background: var(--caution);
border-radius: 50%;
}
.pat-concern-list .glymr-bullet { position: absolute; left: 0; top: 0; margin-top: 0.45rem; }
/* — Benefit List, single column (green/success) — */
/* Pairs with .pat-concern-list: same layout, swapping the amber diamond
for a green checkmark badge so a "What You Get" list can sit directly
below a "Common Concerns" list and read as its resolution. */
.pat-benefit-list {
list-style: none;
display: flex;
flex-direction: column;
gap: 0.9rem;
}
/* Same positioned-marker treatment as .pat-concern-list, for the same reason.
22px icon + 12px gap = 2.125rem of indent. */
.pat-benefit-list li {
position: relative;
padding-left: 2.125rem;
font-size: 1.05rem;
color: var(--charcoal);
line-height: 1.5;
}
.pat-benefit-list .pat-benefit-icon {
position: absolute;
left: 0;
top: 0;
flex-shrink: 0;
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--success);
color: var(--white);
display: flex;
align-items: center;
justify-content: center;
margin-top: 0.1rem;
}
.pat-benefit-list .pat-benefit-icon svg { width: 12px; height: 12px; }
/* — Definition List: term / description rows — */
.pat-definition-list { border-top: 1px solid var(--mist); }
.pat-definition-list .pat-def-row {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 2rem;
padding: 1.5rem 0;
border-bottom: 1px solid var(--mist);
}
.pat-definition-list dt {
font-weight: 700;
color: var(--charcoal);
font-size: 1.1rem;
}
.pat-definition-list dd {
color: var(--text-mid);
font-size: 1.04rem;
line-height: 1.65;
}
/* — Icon Row List: inline wrap of icon + label — */
.pat-icon-list {
list-style: none;
display: flex;
flex-wrap: wrap;
gap: 1.25rem 2rem;
}
.pat-icon-list li {
display: flex;
align-items: center;
gap: 0.6rem;
font-size: 1.05rem;
font-weight: 600;
color: var(--charcoal);
}
.pat-icon-list .pat-icon-dot {
width: 34px;
height: 34px;
border-radius: 50%;
background: var(--bg-light);
color: var(--blue);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.pat-icon-list .pat-icon-dot svg { width: 17px; height: 17px; }
/* — Numbered Text List: big number + text, connecting rule — */
.pat-numbered-list { list-style: none; position: relative; }
.pat-numbered-list li {
display: grid;
grid-template-columns: 3rem 1fr;
gap: 1.5rem;
padding-bottom: 2rem;
position: relative;
}
.pat-numbered-list li:not(:last-child)::before {
content: '';
position: absolute;
left: 1.4rem;
top: 2.6rem;
bottom: 0;
width: 1px;
background: var(--mist);
}
.pat-numbered-list .pat-num {
font-size: 1.3rem;
font-weight: 700;
color: var(--blue);
line-height: 1;
}
.pat-numbered-list h4 {
font-size: 1.15rem;
font-weight: 700;
color: var(--charcoal);
margin-bottom: 0.35rem;
}
.pat-numbered-list p {
font-size: 1.02rem;
color: var(--text-mid);
line-height: 1.6;
}
/* — Differentiator Grid: 2×2 numbered claims divided by hairline rules, no
card chrome. Built to anchor a page from inside .prose-band--deep, where the
numerals turn gold; also works on white. Keep to four items — an odd count
leaves an open cell. Documented in patterns/index.html#list-pillars. — */
.pat-pillars {
list-style: none;
display: grid;
grid-template-columns: repeat(2, 1fr);
margin: 2.25rem 0 0;
padding: 0;
border-top: 1px solid var(--mist);
}
/* .content-prose ul/ol/li would otherwise win on specificity. */
.content-prose .pat-pillars { margin: 2.25rem 0 0; }
.content-prose .pat-pillar { margin: 0; }
.pat-pillar { padding: 2.25rem 2.5rem 2.5rem 0; border-bottom: 1px solid var(--mist); }
.pat-pillar:nth-child(even) { padding: 2.25rem 0 2.5rem 2.5rem; border-left: 1px solid var(--mist); }
.pat-pillar-num { display: block; font-size: 2.75rem; font-weight: 700; line-height: 1; color: var(--blue); margin-bottom: 1rem; font-variant-numeric: tabular-nums; }
.pat-pillar h3 { font-size: 1.5rem; font-weight: 700; line-height: 1.25; color: var(--charcoal); margin: 0 0 0.7rem; text-wrap: balance; }
.pat-pillar p { font-size: 1.06rem; line-height: 1.65; color: var(--text-mid); margin: 0; }
.prose-band--deep .pat-pillars,
.prose-band--deep .pat-pillar { border-color: rgba(255,255,255,0.16); }
.prose-band--deep .pat-pillar-num { color: var(--gold); }
.prose-band--deep .pat-pillar h3 { color: var(--white); }
.prose-band--deep .pat-pillar p { color: rgba(255,255,255,0.8); }
@media (max-width: 700px) {
.pat-pillars { grid-template-columns: 1fr; }
.pat-pillar,
.pat-pillar:nth-child(even) { padding: 1.75rem 0 2rem; border-left: 0; }
.pat-pillar-num { font-size: 2.25rem; margin-bottom: 0.75rem; }
.pat-pillar h3 { font-size: 1.3rem; }
}
/* — Statement: one or two sentences of Glymr's own point of view, centered
and set large under a short gold bar. Like the homepage
.ai-urgency-statement it deliberately carries no quote marks or
attribution, so Glymr's own claim is never mistaken for a testimonial
(DEC-024). Centered, so the narrower measure reads as a choice rather than
a cap short of the grid. Optional
turns the second sentence blue.
Documented in patterns/index.html#text-statement. — */
.pat-statement,
.content-prose .pat-statement {
max-width: 820px;
margin: 3rem auto;
font-size: 1.65rem;
font-weight: 700;
line-height: 1.4;
color: var(--charcoal);
text-align: center;
text-wrap: balance;
}
.pat-statement::before {
content: '';
display: block;
width: 3rem;
height: 4px;
margin: 0 auto 1.25rem;
border-radius: 2px;
background: var(--gold);
}
.pat-statement span { color: var(--blue); }
@media (max-width: 600px) {
.pat-statement,
.content-prose .pat-statement { font-size: 1.35rem; }
}
/* ═══ TILE / CARD PATTERNS ═══════════════════════════════════════════ */
/* — Accent Card Grid: plain heading + copy card, no icon, top accent border — */
.pat-accent-cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.25rem;
}
.pat-accent-card {
background: var(--white);
border: 1px solid var(--mist);
border-top: 3px solid var(--blue);
border-radius: 2px;
padding: 1.5rem;
}
.pat-accent-card h3 { font-size: 1.15rem; font-weight: 700; color: var(--charcoal); margin-bottom: 0.4rem; }
.pat-accent-card p { font-size: 1.04rem; color: var(--text-mid); line-height: 1.55; }
/* Inside .content-prose every p carries a 1.25rem bottom margin, which would
stack on the card's own padding and leave the bottom edge visibly deeper. */
.pat-accent-card p:last-child { margin-bottom: 0; }
/* Linked variant: the whole card is the . Copy keeps its card colors rather
than turning link-blue; the arrow after the heading and the hover lift (same
as .buyer-card) carry the affordance, so no separate "Learn more" line. */
.pat-accent-card--link { display: block; color: inherit; text-decoration: none; transition: border-color 0.15s, box-shadow 0.15s; }
.pat-accent-card--link h3::after { content: '\2192'; display: inline-block; margin-left: 0.4rem; color: var(--blue); transition: transform 0.15s ease; }
.pat-accent-card--link:hover { border-color: var(--blue-light); border-top-color: var(--blue); box-shadow: 0 2px 12px rgba(0,88,149,0.08); }
.pat-accent-card--link:hover h3::after { transform: translateX(3px); }
.pat-accent-card--link:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
/* — Icon Tile Grid — */
.pat-icon-tiles {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.25rem;
}
.pat-icon-tile {
background: var(--white);
border: 1px solid var(--mist);
border-top: 4px solid var(--blue);
border-radius: 4px;
padding: 1.75rem 1.5rem;
}
.pat-icon-tile .pat-tile-icon {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--bg-light);
color: var(--blue);
margin-bottom: 1rem;
}
.pat-icon-tile .pat-tile-icon svg { width: 22px; height: 22px; }
.pat-icon-tile h3 { font-size: 1.1rem; font-weight: 700; color: var(--charcoal); margin-bottom: 0.6rem; }
.pat-icon-tile p { color: var(--text-mid); font-size: 0.98rem; line-height: 1.6; }
/* Same .content-prose bottom-margin stack as .pat-accent-card p above. */
.pat-icon-tile p:last-child { margin-bottom: 0; }
/* Linked variant: the whole tile is the , for landing pages where each tile
leads to its own page. Copy keeps its tile colors rather than turning
link-blue. A closing link line (not an arrow on the heading, as on
.pat-accent-card--link) keeps the destination readable as a phrase, and it
sits on the tile's bottom edge so the lines align across a row. */
.pat-icon-tile--link { display: flex; flex-direction: column; color: inherit; text-decoration: none; transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s; }
/* .content-prose a would otherwise underline and recolor the whole tile. */
.content-prose a.pat-icon-tile--link,
.content-prose a.pat-icon-tile--link:hover { color: inherit; text-decoration: none; }
.pat-icon-tile--link h3 { margin-top: 0; }
.pat-icon-tile--link p { margin-bottom: 1.1rem; }
.pat-icon-tile--link:hover { border-color: var(--blue-light); border-top-color: var(--blue); box-shadow: 0 10px 28px rgba(0,20,40,0.11); transform: translateY(-3px); }
.pat-icon-tile--link:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
/* Block rather than inline-flex: a label that wraps to two lines would push a
flex-item arrow to the far edge instead of keeping it after the last word. */
.pat-tile-link { margin-top: auto; display: block; font-size: 0.98rem; font-weight: 700; line-height: 1.4; color: var(--blue); }
.pat-tile-link::after { content: '\2192'; display: inline-block; margin-left: 0.35rem; transition: transform 0.15s ease; }
.pat-icon-tile--link:hover .pat-tile-link { color: var(--teal-light); }
.pat-icon-tile--link:hover .pat-tile-link::after { transform: translateX(3px); }
/* Closing tile for a set that would otherwise leave an empty grid cell. It
routes visitors whose case isn't listed, so it steps back visually. */
.pat-icon-tile--aside { background: var(--bg-light); border-top-color: var(--mist); }
.pat-icon-tile--aside .pat-tile-icon { background: var(--white); }
/* — Stat Tile Row — */
.pat-stat-tiles {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.25rem;
}
.pat-stat-tile {
background: var(--bg-light);
border-radius: 4px;
padding: 1.75rem 1.25rem;
text-align: center;
}
.pat-stat-tile .pat-stat-num {
font-size: 2.4rem;
font-weight: 700;
color: var(--blue);
line-height: 1;
margin-bottom: 0.5rem;
}
.pat-stat-tile .pat-stat-label {
font-size: 0.98rem;
color: var(--text-mid);
line-height: 1.4;
}
.pat-stat-tile .pat-stat-cite {
margin-top: 0.6rem;
font-size: 0.74rem;
color: var(--slate);
font-style: italic;
line-height: 1.4;
}
/* — Outcome Tile Grid: card containing its own checklist — */
.pat-outcome-tiles {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.25rem;
}
.pat-outcome-tile {
background: var(--white);
border: 1px solid var(--mist);
border-radius: 4px;
padding: 1.75rem;
}
.pat-outcome-tile h3 {
font-size: 1.15rem;
font-weight: 700;
color: var(--charcoal);
margin-bottom: 1rem;
padding-bottom: 0.9rem;
border-bottom: 1px solid var(--mist);
}
.pat-outcome-tile ul { list-style: none; display: flex; flex-direction: column; gap: 0.6rem; }
.pat-outcome-tile li {
display: flex;
align-items: flex-start;
gap: 0.6rem;
font-size: 0.98rem;
color: var(--text-mid);
line-height: 1.5;
}
.pat-outcome-tile li::before {
content: '';
flex-shrink: 0;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--teal-light);
margin-top: 0.55rem;
}
/* — Tiered Comparison Tiles (e.g. 3-option engagement scope) — */
.pat-tier-tiles {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
align-items: start;
}
.pat-tier-tile {
background: var(--white);
border: 1px solid var(--mist);
border-radius: 6px;
padding: 2rem 1.75rem;
}
.pat-tier-tile--featured {
border-color: var(--blue);
box-shadow: 0 12px 32px rgba(0,88,149,0.12);
transform: translateY(-8px);
}
.pat-tier-tile .pat-tier-name { font-size: 0.86rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--teal-light); margin-bottom: 0.5rem; }
.pat-tier-tile h3 { font-size: 1.3rem; font-weight: 700; color: var(--charcoal); margin-bottom: 0.75rem; }
.pat-tier-tile p { font-size: 0.98rem; color: var(--text-mid); line-height: 1.6; margin-bottom: 1.25rem; }
.pat-tier-tile ul { list-style: none; display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1.5rem; }
.pat-tier-tile li { font-size: 0.96rem; color: var(--charcoal); padding-left: 1.4rem; position: relative; }
.pat-tier-tile li::before { content: '✓'; position: absolute; left: 0; color: var(--teal-light); font-weight: 700; }
/* — Accent Hover Card Grid — */
.pat-hover-cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.25rem;
}
.pat-hover-card {
border: 1px solid var(--mist);
border-radius: 4px;
padding: 1.75rem;
transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.pat-hover-card:hover {
border-color: var(--blue-light);
box-shadow: 0 8px 24px rgba(0,88,149,0.1);
transform: translateY(-3px);
}
.pat-hover-card h3 { font-size: 1.12rem; font-weight: 700; color: var(--charcoal); margin-bottom: 0.5rem; }
.pat-hover-card p { font-size: 0.98rem; color: var(--text-mid); line-height: 1.55; }
/* — Problem Card Grid: title, description, impact, and a learn-more link — */
.pat-problem-cards {
display: grid;
grid-template-columns: 1fr;
gap: 1.75rem;
}
.pat-problem-card {
display: flex;
flex-direction: column;
border: 1px solid var(--mist);
border-radius: 4px;
background: var(--white);
padding: 1.85rem;
}
.pat-problem-card h3 { font-size: 1.3rem; font-weight: 700; color: var(--charcoal); margin-bottom: 0.65rem; line-height: 1.3; }
.pat-problem-card .pat-problem-desc { font-size: 1.08rem; color: var(--text-mid); line-height: 1.6; margin-bottom: 1.15rem; }
.pat-problem-impact {
border-left: 3px solid var(--risk);
background: var(--bg-light);
border-radius: 0 3px 3px 0;
padding: 0.85rem 1.1rem;
margin-bottom: 1.35rem;
}
.pat-problem-impact-label { display: block; font-size: 0.86rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--risk); margin-bottom: 0.35rem; }
.pat-problem-impact p { font-size: 1.02rem; color: var(--charcoal); line-height: 1.55; margin: 0; }
.pat-problem-card .btn { margin-top: auto; align-self: flex-start; }
/* Media variant: a resource card that carries a document thumbnail beside its
copy. The base card is a flex column so .btn can sit at the bottom, and a
flex item ignores float — so the variant becomes a two-column grid and the
original flex column moves inside the text half. */
.pat-problem-card--media {
display: grid;
grid-template-columns: 1fr 250px;
gap: 1.85rem;
align-items: start;
}
.pat-problem-card--media .pat-problem-card-body {
display: flex;
flex-direction: column;
height: 100%;
}
.pat-problem-card--media img {
width: 100%;
height: auto;
max-width: 250px;
border-radius: 4px;
display: block;
}
/* Opt-in edge, for flat white-page documents that would otherwise bleed into
the card. Deliberately not on the base rule: a transparent product render
with its own drop shadow must not get a box drawn around it. */
.pat-problem-card--media img.doc-edge { border: 1px solid var(--mist); }
@media (max-width: 700px) {
.pat-problem-card--media { grid-template-columns: 1fr; }
.pat-problem-card--media img { margin: 0 auto; }
}
/* ═══ TEXT + IMAGE PATTERNS ══════════════════════════════════════════ */
/* — Split Feature: image one side, text the other — */
.pat-split-feature {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3rem;
align-items: center;
}
.pat-split-feature--reverse .pat-split-feature-media { order: 2; }
.pat-split-feature--reverse .pat-split-feature-text { order: 1; }
.pat-split-feature-text .pat-eyebrow { margin-bottom: 0.75rem; }
.pat-split-feature-text h3 { font-size: 1.6rem; font-weight: 700; color: var(--charcoal); margin-bottom: 0.9rem; line-height: 1.25; }
.pat-split-feature-text p { font-size: 1.08rem; color: var(--text-mid); line-height: 1.7; margin-bottom: 1rem; }
.pat-split-feature-media img { width: 100%; height: auto; border-radius: 4px; }
/* — Zigzag Feature Rows: stacked split-features, alternating — */
.pat-zigzag { display: flex; flex-direction: column; gap: 4rem; }
/* — Media Card Grid: image top, copy below — */
.pat-media-cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
}
.pat-media-card { border: 1px solid var(--mist); border-radius: 4px; overflow: hidden; background: var(--white); }
.pat-media-card .pat-img-placeholder { min-height: 160px; border-radius: 0; }
.pat-media-card-body { padding: 1.5rem; }
.pat-media-card-tag { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--slate); margin-bottom: 0.5rem; }
.pat-media-card h3 { font-size: 1.12rem; font-weight: 700; color: var(--charcoal); margin-bottom: 0.5rem; line-height: 1.35; }
.pat-media-card p { font-size: 0.98rem; color: var(--text-mid); line-height: 1.55; }
.pat-media-card .pat-media-cite { display: block; margin-top: 0.85rem; padding-top: 0.75rem; border-top: 1px solid var(--mist); font-size: 0.78rem; color: var(--slate); font-style: italic; line-height: 1.4; }
/* — Image Overlay Banner: full-width media with text scrim — */
.pat-overlay-banner {
position: relative;
min-height: 320px;
border-radius: 6px;
overflow: hidden;
display: flex;
align-items: flex-end;
background: repeating-linear-gradient(135deg, #dde5eb, #dde5eb 10px, var(--mist) 10px, var(--mist) 20px);
}
.pat-overlay-banner::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(0deg, rgba(10,21,32,0.85) 0%, rgba(10,21,32,0.15) 65%, transparent 100%);
}
.pat-overlay-banner-content {
position: relative;
padding: 2.5rem;
max-width: 560px;
color: var(--white);
}
.pat-overlay-banner-content h3 { font-size: 1.7rem; font-weight: 700; margin-bottom: 0.75rem; line-height: 1.25; }
.pat-overlay-banner-content p { font-size: 1.05rem; color: rgba(255,255,255,0.85); line-height: 1.6; }
/* ═══ SOCIAL PROOF PATTERNS ══════════════════════════════════════════ */
/* — Testimonial Card — */
.pat-testimonial {
background: var(--bg-light);
border-left: 4px solid var(--gold);
border-radius: 2px;
padding: 2rem 2.25rem;
max-width: 680px;
margin-left: auto;
margin-right: auto;
/* Beside a floated image the card narrows to fit instead of running its
background under the photo. No effect where no float is adjacent. */
display: flow-root;
}
.pat-testimonial p { font-size: 1.2rem; color: var(--charcoal); line-height: 1.6; font-style: italic; margin-bottom: 1.25rem; }
.pat-testimonial-attribution { display: flex; align-items: center; gap: 0.75rem; }
.pat-testimonial-avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--blue); color: var(--white); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.95rem; flex-shrink: 0; }
.pat-testimonial-name { font-weight: 700; color: var(--charcoal); font-size: 0.98rem; }
.pat-testimonial-role { color: var(--text-mid); font-size: 0.9rem; }
/* — Logo Strip — */
.pat-logo-strip {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 2rem;
}
.pat-logo-strip .pat-logo-slot {
flex: 1;
min-width: 110px;
height: 48px;
background: var(--mist);
border-radius: 3px;
opacity: 0.75;
}
/* ═══ PROCESS / COMPARISON PATTERNS ══════════════════════════════════ */
/* — Horizontal Stepper — */
.pat-stepper { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.pat-stepper .pat-step { position: relative; padding: 0 1.25rem; text-align: center; }
.pat-stepper .pat-step:first-child { padding-left: 0; }
.pat-stepper .pat-step:last-child { padding-right: 0; }
.pat-stepper .pat-step-marker {
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--blue);
color: var(--white);
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
margin: 0 auto 1rem;
position: relative;
z-index: 1;
}
.pat-stepper .pat-step:not(:last-child)::after {
content: '';
position: absolute;
top: 20px;
left: 50%;
width: 100%;
height: 2px;
background: var(--mist);
z-index: 0;
}
.pat-stepper h4 { font-size: 1.05rem; font-weight: 700; color: var(--charcoal); margin-bottom: 0.4rem; }
.pat-stepper p { font-size: 0.94rem; color: var(--text-mid); line-height: 1.5; }
/* — Before / After Comparison — */
.pat-comparison { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.pat-comparison-panel { border-radius: 4px; padding: 2rem; }
.pat-comparison-panel--before { background: var(--bg-light); border: 1px solid var(--mist); }
.pat-comparison-panel--after { background: var(--teal-dark); color: var(--white); }
.pat-comparison-panel h4 { font-size: 0.86rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 1.25rem; }
.pat-comparison-panel--before h4 { color: var(--slate); }
.pat-comparison-panel--after h4 { color: var(--blue-light); }
.pat-comparison-panel ul { list-style: none; display: flex; flex-direction: column; gap: 0.75rem; }
.pat-comparison-panel li { font-size: 1rem; line-height: 1.5; padding-left: 1.4rem; position: relative; }
.pat-comparison-panel--before li { color: var(--text-mid); }
.pat-comparison-panel--before li::before { content: '✕'; position: absolute; left: 0; color: var(--risk); font-weight: 700; }
.pat-comparison-panel--after li { color: rgba(255,255,255,0.9); }
.pat-comparison-panel--after li::before { content: '✓'; position: absolute; left: 0; color: var(--blue-light); font-weight: 700; }
/* — Accordion / FAQ (native ) — */
.pat-accordion { border-top: 1px solid var(--mist); }
.pat-accordion-item { border-bottom: 1px solid var(--mist); }
.pat-accordion-item summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 1.25rem 0.25rem;
font-size: 1.08rem;
font-weight: 600;
color: var(--charcoal);
cursor: pointer;
list-style: none;
}
.pat-accordion-item summary::-webkit-details-marker { display: none; }
.pat-accordion-item summary::after {
content: '';
flex-shrink: 0;
width: 9px;
height: 9px;
border-right: 2px solid var(--blue);
border-bottom: 2px solid var(--blue);
transform: rotate(45deg);
transition: transform 0.15s;
}
.pat-accordion-item[open] summary::after { transform: rotate(-135deg); }
.pat-accordion-item .pat-accordion-body {
padding: 0 0.25rem 1.5rem;
font-size: 1.02rem;
color: var(--text-mid);
line-height: 1.65;
max-width: 720px;
}
/* ═══ CTA / BANNER PATTERNS ══════════════════════════════════════════ */
/* — Split CTA Banner: copy left, action right — */
.pat-cta-split {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 1.5rem;
background: var(--bg-light);
border: 1px solid var(--mist);
border-radius: 6px;
padding: 2rem 2.5rem;
}
.pat-cta-split h3 { font-size: 1.35rem; font-weight: 700; color: var(--charcoal); margin-bottom: 0.4rem; }
.pat-cta-split p { font-size: 1.02rem; color: var(--text-mid); }
/* — Full-Width Stat Band — */
.pat-stat-band {
background: var(--teal-dark);
color: var(--white);
border-radius: 6px;
padding: 3rem 2.5rem;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
text-align: center;
}
.pat-stat-band .pat-stat-num { font-size: 2.6rem; font-weight: 700; color: var(--blue-light); line-height: 1; margin-bottom: 0.5rem; }
.pat-stat-band .pat-stat-label { font-size: 1rem; color: rgba(255,255,255,0.8); }
.pat-stat-band .pat-stat-cite { margin-top: 0.6rem; font-size: 0.74rem; color: rgba(255,255,255,0.45); font-style: italic; line-height: 1.4; }
/* — Full-Width Stat Band, Accent Tile variant: bordered tiles on the band — */
.pat-stat-band--accent {
grid-template-columns: repeat(4, 1fr);
gap: 1.25rem;
text-align: left;
}
.pat-stat-band--accent > div {
background: rgba(255,255,255,0.08);
border-left: 4px solid var(--blue-light);
border-radius: 2px;
padding: 1.5rem 1.5rem;
}
.pat-stat-band--accent .pat-stat-label { line-height: 1.4; }
/* ── Pattern Library Responsive ──────────────────────────────────── */
@media (max-width: 900px) {
.pat-split-text,
.pat-split-feature,
.pat-comparison { grid-template-columns: 1fr; gap: 1.5rem; }
.pat-split-feature--reverse .pat-split-feature-media,
.pat-split-feature--reverse .pat-split-feature-text { order: initial; }
.pat-two-col-copy { column-count: 1; }
.pat-accent-cards,
.pat-check-list,
.pat-icon-tiles,
.pat-stat-tiles,
.pat-outcome-tiles,
.pat-tier-tiles,
.pat-hover-cards,
.pat-media-cards,
.pat-stat-band--accent { grid-template-columns: 1fr 1fr; }
.pat-stepper { grid-template-columns: 1fr 1fr; row-gap: 2rem; }
.pat-stepper .pat-step:not(:last-child)::after { display: none; }
.pat-tier-tile--featured { transform: none; }
}
@media (max-width: 600px) {
.pat-accent-cards,
.pat-check-list,
.pat-icon-tiles,
.pat-stat-tiles,
.pat-outcome-tiles,
.pat-tier-tiles,
.pat-hover-cards,
.pat-media-cards,
.pat-problem-cards,
.pat-stepper,
.pat-definition-list .pat-def-row,
.pat-comparison,
.pat-stat-band--accent { grid-template-columns: 1fr; }
.pat-cta-split { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 600px) {
.buyer-grid,
.insights-grid,
.model-steps { grid-template-columns: 1fr; }
/* Matches the step cards: once everything is one column, the Preserve links
stop hugging their labels and stretch, so both share the same edges. The
badge drops above the description and hugs its label instead of running
full height beside it. */
.model-preserve-copy { grid-template-columns: 1fr; gap: 0.7rem; }
.model-preserve-flag { justify-self: start; padding: 0.2rem 0.6rem; }
.model-preserve-links { width: 100%; flex-direction: column; align-items: stretch; }
.model-preserve-links .btn { justify-content: space-between; }
.problem-stats { grid-template-columns: 1fr; }
.hero { padding: 4rem 0 3.5rem; }
}
/* ── 404 page (templates/not-found-page.php) ───────────── */
.nf-eyebrow { font-size: 0.86rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--blue-light); margin-bottom: 0.9rem; }
.nf-requested { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem; max-width: 100%; margin-bottom: 1.75rem; padding: 0.45rem 0.9rem; border: 1px dashed rgba(255,255,255,0.4); border-radius: 4px; background: rgba(255,255,255,0.06); font-size: 0.98rem; color: rgba(255,255,255,0.75); }
.nf-requested code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.92rem; color: var(--white); overflow-wrap: anywhere; }
.nf-jump { display: inline-flex; align-items: center; gap: 0.7rem; }
.nf-jump svg { width: 1.05em; height: 1.05em; flex-shrink: 0; transition: transform 0.15s ease; }
.nf-jump:hover svg { transform: translateY(3px); }
.nf-jump span { text-align: center; }
.nf-heading { font-size: 1.9rem; font-weight: 700; color: var(--charcoal); line-height: 1.2; margin-bottom: 2rem; }
.nf-reasons { background: var(--white); padding: 4.25rem 0; }
.nf-reason-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.nf-reason { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--mist); border-top: 4px solid var(--blue); border-radius: 4px; padding: 1.75rem; }
.nf-reason:nth-child(2) { border-top-color: var(--teal-light); }
.nf-reason:nth-child(3) { border-top-color: var(--gold); }
.nf-reason h3 { font-size: 1.24rem; font-weight: 700; color: var(--charcoal); line-height: 1.3; margin-bottom: 0.55rem; }
.nf-reason > p { font-size: 1.02rem; color: var(--text-mid); line-height: 1.6; margin-bottom: 1.25rem; }
.nf-reason-work { margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--mist); }
.nf-reason-label { display: block; font-size: 0.76rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--teal-light); margin-bottom: 0.25rem; }
.nf-reason-work p { font-size: 0.97rem; color: var(--charcoal); line-height: 1.5; }
.nf-mirror { background: linear-gradient(160deg, var(--teal-dark) 0%, #0a353b 100%); color: rgba(255,255,255,0.85); padding: 4.5rem 0; }
.nf-mirror-label { font-size: 0.86rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--blue-light); margin-bottom: 0.6rem; }
.nf-mirror h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 700; color: var(--white); line-height: 1.2; margin-bottom: 2.25rem; }
.nf-questions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.nf-question { border-left: 3px solid var(--gold); padding-left: 1.1rem; }
.nf-question h3 { font-size: 1.2rem; font-weight: 700; color: var(--white); margin-bottom: 0.35rem; }
.nf-question p { font-size: 1.02rem; line-height: 1.6; color: rgba(255,255,255,0.8); }
.nf-principle { margin-top: 2.75rem; padding-top: 2rem; border-top: 1px solid rgba(255,255,255,0.15); font-size: clamp(1.25rem, 2.2vw, 1.55rem); font-weight: 600; line-height: 1.4; color: var(--white); }
.nf-mirror-link { display: inline-flex; align-items: center; gap: 0.35rem; margin-top: 1.1rem; font-weight: 700; color: var(--gold); }
.nf-mirror-link::after { content: '\2192'; transition: transform 0.15s ease; }
.nf-mirror-link:hover { color: var(--white); }
.nf-mirror-link:hover::after { transform: translateX(3px); }
.nf-start { background: var(--bg-light); padding: 4.25rem 0 4.5rem; }
.nf-start .nf-heading { margin-bottom: 0.4rem; }
.nf-start-intro { font-size: 1.1rem; color: var(--text-mid); margin-bottom: 2rem; }
.nf-start-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.nf-start-card { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--mist); border-top: 3px solid var(--blue); border-radius: 4px; padding: 1.5rem; transition: box-shadow 0.15s, transform 0.15s; }
.nf-start-card:hover { box-shadow: 0 10px 28px rgba(0,20,40,0.11); transform: translateY(-3px); }
.nf-start-card h3 { font-size: 1.18rem; font-weight: 700; color: var(--charcoal); margin-bottom: 0.45rem; line-height: 1.3; }
.nf-start-card p { font-size: 0.99rem; color: var(--text-mid); line-height: 1.55; margin-bottom: 1rem; }
.nf-start-link { margin-top: auto; display: inline-flex; align-items: center; gap: 0.35rem; font-weight: 700; color: var(--blue); }
.nf-start-link::after { content: '\2192'; transition: transform 0.15s ease; }
.nf-start-card:hover .nf-start-link { color: var(--teal-light); }
.nf-start-card:hover .nf-start-link::after { transform: translateX(3px); }
.nf-ask { display: flex; align-items: center; justify-content: space-between; gap: 2rem; margin-top: 2rem; padding: 1.6rem 1.75rem; background: var(--white); border: 1px solid var(--mist); border-left: 4px solid var(--gold); border-radius: 4px; }
.nf-ask h3 { font-size: 1.24rem; font-weight: 700; color: var(--charcoal); margin-bottom: 0.3rem; }
.nf-ask p { font-size: 1.02rem; color: var(--text-mid); line-height: 1.55; }
.nf-ask .btn { flex-shrink: 0; }
@media (max-width: 900px) {
.nf-reason-grid,
.nf-questions,
.nf-start-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
.nf-jump { gap: 0.45rem; padding: 0.8rem 0.9rem; font-size: 1rem; letter-spacing: 0; }
.nf-ask { flex-direction: column; align-items: flex-start; gap: 1.1rem; }
}