/*
Theme Name: Hornik Solutions New
Theme URI: https://horniksolutions.com
Author: Hornik Solutions
Author URI: https://horniksolutions.com
Description: A clean, SEO-first custom theme for Hornik Solutions, built on the approved Hornik Solutions style kit (Inter + Source Serif 4, single-accent green). Built by the book: WordPress template hierarchy, theme.json tokens, registered menus, and a single consolidated stylesheet.
Version: 1.1.0
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hornik-solutions-new
*/

/* ==================================================================
   DESIGN TOKENS  — mirrors style-kit.html :root
   ================================================================== */
:root {
  --ink: #15150e;           /* warm near-black, tuned to the lime accent */
  --ink-soft: #4b4b3f;
  --muted: #6f7061;
  --paper: #ffffff;
  --surface: #f4f5ed;
  --line: #cbcbbd;
  --charcoal: #17170f;
  --accent: #8eb102;        /* single accent, lime green: buttons, links, kickers */
  --accent-hover: #749102;  /* darker shade of accent for hover/focus */
  --accent-light: #a6c92a;  /* lighter shade of accent: text on dark backgrounds */
  --accent-deep: #5e760c;   /* deep, muted green for large filled surfaces */
  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --max: 1300px;
  --r-sm: 3px;
  --r-md: 6px;
  --header-h: 72px;
}

/* ==================================================================
   RESET / BASE
   ================================================================== */
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
img, video { max-width: 100%; height: auto; display: block; }
svg { display: block; }
h1, h2, h3, h4, p { margin-top: 0; }
h1, h2, h3 { text-wrap: balance; }
:focus-visible { outline: 2px solid var(--accent-hover); outline-offset: 2px; }

.container { width: min(var(--max), calc(100% - 40px)); margin: 0 auto; }
.section { padding: 56px 0; border-bottom: 1px solid var(--line); }
.section--surface { background: var(--surface); }
.section--dark { background: var(--charcoal); color: var(--paper); border-bottom: 0; }

/* end-of-page CTA: a contained dark card on the light page, so it reads as a
   distinct, intentional CTA rather than a full-bleed slab that blends into the
   (also dark) footer or crashes against a narrow reading column */
.cta-band { padding: 52px 0 60px; background: var(--paper); }
.cta-band__card { max-width: 880px; margin: 0 auto; background: var(--charcoal); color: var(--paper); border-radius: var(--r-md); padding: 56px 48px; text-align: center; }
.cta-band__card .type-h2 { color: var(--paper); font-size: clamp(26px, 3vw, 34px); margin: 0 0 12px; }
.cta-band__card .type-lede { color: #c0c1b0; margin: 0 auto; font-size: 18px; }
@media (max-width: 640px) { .cta-band { padding: 36px 0 44px; } .cta-band__card { padding: 40px 24px; } }
/* Google Reviews band: constrain + center the Trustindex widget so it reads as
   part of the kit rather than a full-width plugin dump. */
.reviews-widget { max-width: 1040px; margin: 0 auto; }
.section--tight { padding: 40px 0; }
.icon { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 1000;
  background: var(--charcoal); color: #fff; padding: 12px 18px; border-radius: var(--r-md);
}
.skip-link:focus { left: 12px; top: 12px; }

.screen-reader-text {
  border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
  height: 1px; width: 1px; margin: -1px; padding: 0; overflow: hidden;
  position: absolute !important; word-wrap: normal !important;
}
.screen-reader-text:focus {
  background: #fff; clip: auto; clip-path: none; color: var(--ink);
  display: block; height: auto; width: auto; padding: 12px 18px; z-index: 100000;
}
body.nav-locked { overflow: hidden; }

/* ==================================================================
   TYPOGRAPHY  — style-kit scale
   ================================================================== */
.type-h1, .h1 { font-family: var(--font-serif); font-size: clamp(44px, 6.8vw, 76px); line-height: 1.02; font-weight: 700; margin-bottom: 6px; }
.type-h2, .h2 { font-family: var(--font-serif); font-size: clamp(30px, 3.6vw, 42px); line-height: 1.15; font-weight: 400; margin-bottom: 6px; }
.type-h3, .h3 { font-family: var(--font-serif); font-size: 28px; line-height: 1.2; font-weight: 400; margin-bottom: 6px; }
.type-lede { font-size: 19px; line-height: 1.7; color: var(--ink-soft); margin-bottom: 6px; }
.type-body { font-size: 16px; line-height: 1.75; color: var(--ink-soft); }
.type-small { font-size: 14px; color: var(--muted); }
.type-em { font-style: italic; color: var(--accent); }
.section--dark .type-lede, .section--dark .type-body { color: #c0c1b0; }
.section--dark .type-em { color: var(--accent-light); }

/* kicker / eyebrow / label */
.kicker { display: inline-flex; align-items: center; gap: 10px; color: var(--accent-deep); font-size: 12px; font-weight: 800; letter-spacing: 0.6px; text-transform: uppercase; margin-bottom: 12px; }
.kicker::before { content: ""; width: 30px; height: 2px; background: var(--accent-light); }
/* centered contexts: no dash, so the label text sits on the true center line */
.center .kicker::before,
.page-header--center .kicker::before { content: none; }
.section--dark .kicker { color: var(--accent-light); }
.eyebrow-solid { display: inline-block; padding: 5px 11px; background: var(--accent); color: var(--ink); font-size: 11px; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase; border-radius: 2px; }
.eyebrow-dark { display: inline-block; padding: 5px 11px; background: var(--charcoal); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase; border-radius: 2px; }

/* ==================================================================
   BUTTONS & LINKS
   ================================================================== */
.btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; border: 1px solid transparent; border-radius: var(--r-md); font: inherit; font-size: 14px; font-weight: 800; text-decoration: none; cursor: pointer; transition: background 160ms ease, transform 160ms ease, border-color 160ms ease, color 160ms ease; }
.btn-primary { background: var(--accent); color: var(--ink); }
.btn-primary:hover { background: var(--accent-hover); transform: translateY(-1px); }
.btn-outline { border-color: var(--line); color: var(--ink); background: transparent; }
.btn-outline:hover { border-color: var(--accent-deep); color: var(--accent-deep); }
.section--dark .btn-outline { border-color: rgba(255,255,255,0.25); color: #fff; }
.section--dark .btn-outline:hover { border-color: var(--accent-light); color: var(--accent-light); }
.text-link { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 800; text-decoration: none; color: var(--ink); border-bottom: 1px solid var(--line); padding-bottom: 2px; width: fit-content; }
.text-link:hover { color: var(--accent-deep); border-color: var(--accent-deep); }
.text-link .icon { transition: transform 160ms ease; }
.text-link:hover .icon { transform: translateX(3px); }
.row-gap { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }

/* ==================================================================
   HEADER / NAV
   ================================================================== */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,0.94); border-bottom: 1px solid var(--line); backdrop-filter: blur(14px); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: var(--header-h); }
.site-brand { font-family: var(--font-serif); font-size: 20px; font-weight: 700; text-decoration: none; color: var(--ink); }
.main-nav { display: flex; align-items: center; gap: 26px; }
.main-nav ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 26px; }
.main-nav a { text-decoration: none; color: var(--ink-soft); font-size: 14px; font-weight: 700; }
.main-nav a:hover, .main-nav .current-menu-item > a { color: var(--accent-deep); }
.main-nav a.btn-primary, .main-nav a.btn-primary:hover { color: var(--ink); }
.header-cta { display: inline-flex; align-items: center; gap: 16px; }
.header-phone { font-size: 14px; font-weight: 800; text-decoration: none; color: var(--ink); }
.header-phone:hover { color: var(--accent-deep); }
.nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: 8px; font-size: 22px; color: var(--ink); }

/* submenus */
.main-nav .menu-item-has-children { position: relative; }
.main-nav .sub-menu {
  position: absolute; top: 100%; left: 0; min-width: 210px; flex-direction: column; align-items: stretch; gap: 0;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); padding: 8px; margin-top: 8px;
  opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity 140ms ease, transform 140ms ease, visibility 140ms; box-shadow: 0 12px 30px rgba(18,20,26,0.08);
}
.main-nav .menu-item-has-children:hover > .sub-menu,
.main-nav .menu-item-has-children:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.main-nav .sub-menu a { display: block; padding: 9px 12px; border-radius: var(--r-sm); font-weight: 600; }
.main-nav .sub-menu a:hover { background: var(--surface); }

@media (max-width: 900px) {
  .nav-toggle { display: block; }
  .main-nav { position: fixed; inset: var(--header-h) 0 auto 0; background: var(--paper); border-bottom: 1px solid var(--line); flex-direction: column; align-items: stretch; gap: 0; padding: 12px 24px 24px; transform: translateY(-120%); transition: transform 220ms ease; max-height: calc(100vh - var(--header-h)); overflow-y: auto; }
  .main-nav.is-open { transform: translateY(0); }
  .main-nav ul { flex-direction: column; align-items: stretch; gap: 0; width: 100%; }
  .main-nav > ul > li { border-bottom: 1px solid var(--line); }
  .main-nav a { padding: 14px 0; font-size: 16px; }
  .main-nav .sub-menu { position: static; opacity: 1; visibility: visible; transform: none; border: 0; box-shadow: none; padding: 0 0 8px 14px; margin: 0; }
  .header-cta { flex-direction: column; align-items: stretch; gap: 4px; padding-top: 18px; }
  .header-cta .header-phone { text-align: center; }
  .main-nav .header-cta a.btn-primary { padding: 14px 22px; justify-content: center; }
}

/* ==================================================================
   HERO
   ================================================================== */
.hero { padding: 64px 0 56px; }
.hero__inner { max-width: 880px; }
.hero h1 { font-family: var(--font-serif); font-size: clamp(40px, 5.4vw, 62px); line-height: 1.06; font-weight: 700; margin-bottom: 18px; }
.hero p { font-size: 19px; line-height: 1.65; color: var(--ink-soft); margin-bottom: 24px; max-width: 720px; }
.hero .row-gap { margin-top: 8px; }
/* interior page header: kit-native editorial light band.
   Per the approved kit, dark panels are reserved for quotes, the contact
   panel and the footer; headers are serif ink on paper with hairline rules. */
.page-header { background: var(--paper); border-bottom: 1px solid var(--line); padding: 52px 0; }
.page-header__grid { max-width: 920px; }
.page-header .kicker { margin-bottom: 18px; }
.page-header h1 { font-family: var(--font-serif); font-size: clamp(34px, 4.4vw, 56px); line-height: 1.05; letter-spacing: -0.015em; font-weight: 700; color: var(--ink); margin: 0; text-wrap: balance; }
/* lede: first line optically aligned to the H1 cap height, measure capped for reading */
.page-header p { font-size: 18px; line-height: 1.6; color: var(--ink-soft); margin: 18px 0 0; max-width: 64ch; }
/* centered variant (hub pages); breadcrumbs stay left as a wayfinding utility */
.page-header--center { text-align: center; }
.page-header--center .breadcrumbs { text-align: left; }
.page-header--center .page-header__grid,
.page-header--center p { margin-left: auto; margin-right: auto; }
@media (max-width: 860px) {
  .page-header { padding: 38px 0 34px; }
  .page-header p { font-size: 17px; margin-top: 14px; }
}

/* breadcrumbs: small muted trail above the page/article title. Styles both the
   native fallback and Rank Math's markup (nav.rank-math-breadcrumb). */
.breadcrumbs { margin-bottom: 18px; }
.breadcrumbs .rank-math-breadcrumb p,
.breadcrumbs p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--muted); }
.breadcrumbs a { color: var(--muted); text-decoration: none; border-bottom: 1px solid transparent; transition: color .15s ease, border-color .15s ease; }
.breadcrumbs a:hover, .breadcrumbs a:focus-visible { color: var(--accent-deep); border-bottom-color: currentColor; }
.breadcrumbs .separator { color: var(--line); padding: 0 2px; }
.breadcrumbs .last { color: var(--ink-soft); font-weight: 600; }
@media (max-width: 860px) { .breadcrumbs { margin-bottom: 14px; } }

.hero__cta { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.hero__cta-note { color: var(--muted); }

/* full-bleed banner hero: skyline behind text, dark scrim for legibility */
.hero--banner { position: relative; overflow: hidden; padding: 108px 0 96px; }
.hero--banner .hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 32%; z-index: 0; }
.hero--banner .hero__scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(18,20,26,0.82) 0%, rgba(18,20,26,0.62) 46%, rgba(18,20,26,0.28) 100%); }
.hero--banner .container { position: relative; z-index: 2; }
.hero--banner h1 { color: var(--paper); }
.hero--banner p { color: rgba(255,255,255,0.86); }
.hero--banner .kicker { color: var(--accent-light); }
.hero--banner .kicker::before { background: var(--accent-light); }
.hero--banner .type-em { color: var(--accent-light); }
.hero--banner .hero__cta-note { color: rgba(255,255,255,0.72); }
@media (max-width: 640px) {
  .hero--banner { padding: 72px 0 64px; }
  .hero--banner .hero__scrim { background: rgba(18,20,26,0.68); }
}

/* stacked brand wordmark */
.site-brand { line-height: 1.05; }
.site-brand--stacked { display: inline-block; }
.site-brand--stacked span { display: block; }
.site-brand--stacked span:last-child { color: var(--accent); }

/* steps 2-col variant + case cards */
.steps--2col { grid-template-columns: repeat(2, 1fr); column-gap: 48px; }
/* both cells of the last row need the closing rule, not just the last child */
.steps--2col .step:nth-last-child(2) { border-bottom: 1px solid var(--line); }
@media (max-width: 760px) {
  .steps--2col { grid-template-columns: 1fr; }
  .steps--2col .step:nth-last-child(2) { border-bottom: none; }
}
/* home proof cards (rendered inside a .panel) */
.case-card { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; height: 100%; }
.case-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; width: 100%; }
.case-card__chip { width: 64px; height: 64px; flex: 0 0 auto; margin-left: auto; border: 1px solid var(--line); border-radius: var(--r-md); background: #fff; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 8px; }
.case-card__chip img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.case-card__title { font-family: var(--font-serif); font-size: 21px; margin: 2px 0 0; }
.case-card__title a { text-decoration: none; color: var(--ink); }
.case-card__title a:hover { color: var(--accent-deep); }
.case-card__metric { margin: 0; }
.case-card__metric strong { display: block; font-family: var(--font-serif); font-size: 32px; line-height: 1.05; color: var(--accent-deep); }
.case-card__metric span { font-size: 12px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; color: var(--muted); }
.case-card__excerpt { color: var(--muted); font-size: 15px; line-height: 1.6; margin: 0; }
.case-card .text-link { margin-top: auto; }

/* archive 'selected work' cards: small logo chip + text */
.work-card { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--paper); padding: 30px 32px; transition: box-shadow 160ms ease, transform 160ms ease; }
.work-card:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(18,20,26,0.08); }
.work-card__head { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; margin-bottom: 4px; }
.work-card__chip { width: 88px; height: 88px; flex: 0 0 auto; border: 1px solid var(--line); border-radius: var(--r-md); background: #fff; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 12px; }
.work-card__chip img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.work-card__title { font-family: var(--font-serif); font-size: 22px; margin: 0; }
.work-card__title a { text-decoration: none; color: var(--ink); }
.work-card__title a:hover { color: var(--accent-deep); }
.work-card__excerpt { color: var(--muted); font-size: 15px; line-height: 1.65; margin: 0; }
.work-card .text-link { margin-top: 6px; }

/* category filter pills */
.cat-filter { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 36px; }
.cat-filter__item { font-size: 13px; font-weight: 700; padding: 8px 16px; border: 1px solid var(--line); border-radius: 100px; text-decoration: none; color: var(--ink-soft); transition: background 140ms ease, border-color 140ms ease, color 140ms ease; }
.cat-filter__item:hover { border-color: var(--accent-deep); color: var(--accent-deep); }
.cat-filter__item.is-active { background: var(--accent); border-color: var(--accent); color: var(--ink); }

/* blog post cards */
.post-card { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: var(--paper); transition: box-shadow 160ms ease, transform 160ms ease; }
.post-card:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(18,20,26,0.08); }
.post-card__media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--surface); }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 320ms ease; }
.post-card:hover .post-card__media img { transform: scale(1.03); }
.post-card__body { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 24px 26px 26px; flex: 1; }
.post-card__meta { font-size: 12px; font-weight: 800; letter-spacing: 0.4px; text-transform: uppercase; color: var(--accent-deep); }
.post-card__title { font-family: var(--font-serif); font-size: 21px; line-height: 1.25; margin: 0; }
.post-card__title a { text-decoration: none; color: var(--ink); }
.post-card__title a:hover { color: var(--accent-deep); }
.post-card__excerpt { color: var(--muted); font-size: 15px; line-height: 1.6; margin: 0; }
.post-card .text-link { margin-top: auto; }

/* single article */
.article-head { border-bottom: 1px solid var(--line); padding: 44px 0 34px; }
.article-head__inner { max-width: 900px; }
.article-head h1 { font-family: var(--font-serif); font-size: clamp(32px, 4.4vw, 52px); line-height: 1.1; font-weight: 700; margin: 16px 0 18px; text-wrap: balance; }
.article-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 14px; color: var(--muted); }
.article-meta .dot { color: var(--line); }
.article-media { max-width: 940px; margin: 36px auto 0; }
.article-media img { width: 100%; height: auto; border-radius: var(--r-md); }
.article-foot { max-width: 820px; margin: 40px auto 0; padding-top: 24px; border-top: 1px solid var(--line); }

/* ==================================================================
   PANELS
   ================================================================== */
.panel { border-radius: var(--r-md); padding: 32px; }
.panel-light { background: var(--paper); border: 1px solid var(--line); }
.panel-surface { background: var(--surface); border: 1px solid var(--line); }
.panel-accent { background: var(--accent); color: var(--ink); }
.panel-dark { background: var(--charcoal); color: var(--paper); }
.panel h3, .panel h4 { font-family: var(--font-serif); font-size: 21px; margin-bottom: 10px; }
.panel p { font-size: 15px; line-height: 1.7; margin-bottom: 0; }
.panel-light p, .panel-surface p { color: var(--ink-soft); }
.panel-accent p { color: rgba(255,255,255,0.85); }
.panel-dark p { color: #c0c1b0; }
.panel-grid { display: grid; gap: 20px; }
.panel-grid--2 { grid-template-columns: repeat(2, 1fr); }
.note-panel { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.5fr); gap: 12px 48px; align-items: baseline; padding: 30px 34px; }
.note-panel h3 { margin: 0; }
.note-panel p { font-size: 16px; line-height: 1.7; }
@media (max-width: 760px) { .note-panel { grid-template-columns: 1fr; gap: 10px; } }
.grid { display: grid; gap: 20px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 720px) { .panel-grid--2 { grid-template-columns: 1fr; } }

/* nine-section plan grid: hairline-separated cells (kit uses hairline rules) */
.plan-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.plan-item { background: var(--paper); padding: 26px 26px 28px; }
.plan-item__num { display: block; font-family: var(--font-serif); font-size: 20px; font-weight: 700; color: var(--accent); opacity: 0.55; margin-bottom: 10px; }
.plan-item__title { font-family: var(--font-serif); font-size: 19px; margin: 0 0 8px; line-height: 1.2; }
.plan-item p { font-size: 14px; line-height: 1.6; color: var(--muted); margin: 0; }
@media (max-width: 860px) { .plan-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .plan-grid { grid-template-columns: 1fr; } }

/* honest-answer callout: title left, body right, hairline top rule */
.callout { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 24px 56px; padding-top: 34px; border-top: 2px solid var(--ink); }
.callout__head h2 { margin: 0; }
.callout__body p { font-size: 17px; line-height: 1.75; color: var(--ink-soft); margin: 0 0 16px; }
.callout__body p:last-child { margin-bottom: 0; }
@media (max-width: 760px) { .callout { grid-template-columns: 1fr; gap: 18px; padding-top: 26px; } }

/* about: story + framed headshot */
.about-intro { display: grid; grid-template-columns: 1.25fr 0.75fr; gap: 56px; align-items: start; }
.about-intro--noimg { grid-template-columns: 1fr; }
.about-intro__text .type-body { margin-bottom: 18px; }
.about-intro__text .type-body:last-child { margin-bottom: 0; }
.about-intro__media { position: sticky; top: calc(var(--header-h) + 20px); }
.about-intro__media img { width: 100%; border-radius: var(--r-md); box-shadow: 14px 14px 0 rgba(142,177,2,0.18); }
.about-intro__caption { display: block; margin-top: 18px; font-size: 12px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; color: var(--muted); }
@media (max-width: 820px) {
  .about-intro { grid-template-columns: 1fr; gap: 32px; }
  .about-intro__media { position: static; max-width: 360px; }
}

/* credential strip */
.creds { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.creds__item { padding: 26px 28px; border-left: 1px solid var(--line); }
.creds__item:first-child { border-left: 0; }
.creds__item strong { display: block; font-family: var(--font-serif); font-size: 30px; line-height: 1; color: var(--accent-deep); margin-bottom: 8px; }
.creds__item span { font-size: 14px; color: var(--ink-soft); }
@media (max-width: 680px) {
  .creds { grid-template-columns: 1fr; }
  .creds__item { border-left: 0; border-top: 1px solid var(--line); }
  .creds__item:first-child { border-top: 0; }
}

/* process steps: vertical numbered engagement list */
.process { border-top: 1px solid var(--line); }
.process-step { display: grid; grid-template-columns: 96px 1fr; gap: 8px 36px; align-items: start; padding: 32px 0; border-bottom: 1px solid var(--line); }
.process-step__num { font-family: var(--font-serif); font-size: 56px; line-height: 1; font-weight: 700; color: var(--accent); opacity: 0.45; }
.process-step__head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 8px; }
.process-step__title { font-family: var(--font-serif); font-size: 26px; font-weight: 700; margin: 0; }
.process-step__tag { font-size: 11px; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase; color: var(--accent-deep); border: 1px solid var(--accent-deep); border-radius: 100px; padding: 4px 11px; }
.process-step__body p { font-size: 16px; line-height: 1.7; color: var(--ink-soft); margin: 0; max-width: 720px; }
@media (max-width: 640px) {
  .process-step { grid-template-columns: 1fr; gap: 6px; }
  .process-step__num { font-size: 40px; }
}

/* proof card: single featured case study */
.proof-card { display: grid; grid-template-columns: 1fr auto; gap: 24px 48px; align-items: center; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); padding: 34px 36px; }
.proof-card__title { font-family: var(--font-serif); font-size: 26px; margin: 12px 0 10px; }
.proof-card__title a { text-decoration: none; color: var(--ink); }
.proof-card__title a:hover { color: var(--accent-deep); }
.proof-card__body p { color: var(--ink-soft); font-size: 16px; line-height: 1.7; margin: 0 0 14px; max-width: 620px; }
.proof-card__metric { text-align: right; padding-left: 40px; border-left: 1px solid var(--line); }
.proof-card__metric strong { display: block; font-family: var(--font-serif); font-size: 40px; line-height: 1; color: var(--accent-deep); }
.proof-card__metric span { display: block; margin-top: 8px; font-size: 12px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; color: var(--muted); }
.proof-card__media { width: 128px; height: 128px; justify-self: end; border: 1px solid var(--line); border-radius: var(--r-md); background: #fff; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 14px; }
.proof-card__media img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
@media (max-width: 720px) { .proof-card { grid-template-columns: 1fr; } .proof-card__metric { text-align: left; padding-left: 0; border-left: 0; border-top: 1px solid var(--line); padding-top: 18px; } .proof-card__media { justify-self: start; } }

/* ==================================================================
   PATTERNS — service rows, stat band, quote, framed media
   ================================================================== */
.service-row { position: relative; display: grid; grid-template-columns: 110px 1fr; gap: 12px 40px; align-items: center; padding: 40px 0; border-top: 1px solid var(--line); }
.service-row:last-child { border-bottom: 1px solid var(--line); }
.service-row__num { font-family: var(--font-serif); font-size: 72px; line-height: 1; color: rgba(29,92,66,0.14); font-weight: 700; }
.service-row__title { font-family: var(--font-serif); font-size: 30px; margin: 0 0 10px; }
.service-row--split { grid-template-columns: 110px minmax(0, 1.05fr) minmax(0, 0.95fr); }
.service-row--split > .service-row__list { margin: 0; align-self: center; }
.service-row__list { margin: 4px 0 18px; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 28px; }
.service-row__list li { font-size: 15px; color: var(--ink-soft); padding-left: 16px; position: relative; }
.service-row__list li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 7px; height: 2px; background: var(--accent); }
@media (max-width: 640px) { .service-row__list { grid-template-columns: 1fr; } }
.service-row h3 { font-family: var(--font-serif); font-size: 24px; margin-bottom: 8px; }
.service-row p { color: var(--ink-soft); font-size: 16px; line-height: 1.7; margin-bottom: 0; max-width: 820px; }
.service-row__list + .text-link, .service-row div > p + .text-link { margin-top: 14px; }

.stat-band { display: grid; grid-template-columns: repeat(3, 1fr); background: var(--accent-deep); border-radius: var(--r-md); overflow: hidden; }
.stat-cell { padding: 36px 24px; border-left: 1px solid rgba(255,255,255,0.2); text-align: center; color: #fff; }
.stat-cell:first-child { border-left: 0; }
.stat-cell strong { display: block; font-family: var(--font-serif); font-size: 40px; line-height: 1; margin-bottom: 8px; }
.stat-cell span { font-size: 12px; letter-spacing: 0.4px; text-transform: uppercase; color: rgba(255,255,255,0.72); font-weight: 700; }

.quote { position: relative; background: var(--charcoal); color: var(--paper); border-radius: var(--r-md); padding: 44px; overflow: hidden; }
.quote::before { content: "\201C"; position: absolute; left: -6px; top: -34px; font-family: var(--font-serif); font-size: 200px; line-height: 1; color: var(--paper); opacity: 0.06; pointer-events: none; }
.quote p { position: relative; font-family: var(--font-serif); font-size: clamp(22px, 2.8vw, 30px); line-height: 1.32; margin-bottom: 16px; }
.quote cite { position: relative; display: block; color: #a4a493; font-style: normal; font-weight: 700; font-size: 13px; }

.media-frame { aspect-ratio: 4/3; background-size: cover; background-position: center; border-radius: var(--r-md); box-shadow: 12px 12px 0 rgba(29,92,66,0.12); }
.media-frame.alt { box-shadow: -12px 12px 0 rgba(18,20,26,0.12); }

/* numbered method steps */
.steps { display: grid; gap: 4px; }
.step { display: grid; grid-template-columns: 64px 1fr; gap: 20px; align-items: baseline; padding: 24px 0; border-top: 1px solid var(--line); }
.step:last-child { border-bottom: 1px solid var(--line); }
.step__num { font-family: var(--font-serif); font-size: 40px; color: rgba(29,92,66,0.22); font-weight: 700; }
.step h3 { font-family: var(--font-serif); font-size: 20px; margin-bottom: 6px; }
.step p { color: var(--muted); font-size: 15px; margin: 0; }

/* ==================================================================
   FORMS  — underline inputs
   ================================================================== */
.field { margin-bottom: 20px; }
label { display: block; margin-bottom: 8px; color: var(--ink-soft); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; }
input, select, textarea { width: 100%; padding: 13px 0; border: none; border-bottom: 1px solid var(--line); background: transparent; color: var(--ink); font: inherit; border-radius: 0; }
textarea { min-height: 120px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent-hover); }
.field-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
.field-optional { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--muted); }
.field-error { display: block; margin-top: 6px; font-size: 13px; color: #b3261e; }
.form-error-banner { background: #fdecea; border: 1px solid #f3c4bf; color: #7a1c14; padding: 12px 16px; border-radius: var(--r-md); margin-bottom: 24px; font-size: 14px; }
.form-success { border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--r-md); padding: 28px 30px; background: var(--surface); }
.form-success p { margin: 8px 0 0; color: var(--ink-soft); }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* contact: one bounded, centered card holding the message form, with the
   direct call/email row underneath. */
.contact-card { max-width: 720px; margin: 0 auto; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: var(--paper); }
.contact-card__col { padding: 38px 40px; min-width: 0; }
.contact-card__head { text-align: center; padding-bottom: 22px; margin-bottom: 28px; border-bottom: 1px solid var(--line); }
.contact-card__title { font-family: var(--font-serif); font-size: 25px; font-weight: 700; margin: 0 0 6px; }
.contact-card__sub { color: var(--muted); font-size: 15px; margin: 0; }

/* single case study: meta sidebar + narrative */
.case-layout { display: grid; grid-template-columns: 300px 1fr; gap: 64px; align-items: start; }
.case-meta { position: sticky; top: calc(var(--header-h) + 24px); }
.case-meta__logo { aspect-ratio: 1 / 1; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: var(--surface); margin-bottom: 24px; }
.case-meta__logo img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.case-meta__facts { margin: 0 0 22px; }
.case-fact { padding: 16px 0; border-top: 1px solid var(--line); }
.case-fact:first-child { border-top: 0; padding-top: 0; }
.case-fact dt { font-size: 11px; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase; color: var(--accent-deep); margin-bottom: 6px; }
.case-fact dd { margin: 0; font-size: 16px; color: var(--ink); font-weight: 600; }
.case-fact__result strong { display: block; font-family: var(--font-serif); font-size: 40px; line-height: 1; color: var(--accent-deep); }
.case-fact__result span { display: block; margin-top: 6px; font-size: 13px; font-weight: 600; color: var(--muted); }

.case-narrative { max-width: 760px; }
.case-part { padding: 34px 0; border-top: 1px solid var(--line); }
.case-part:first-child { border-top: 0; padding-top: 0; }
.case-part__label { display: flex; align-items: baseline; gap: 14px; font-family: var(--font-serif); font-size: 26px; font-weight: 700; margin: 0 0 16px; }
.case-part__num { font-size: 16px; font-weight: 700; color: var(--accent-deep); }
.case-part__body p { font-size: 17px; line-height: 1.8; color: var(--ink-soft); margin: 0 0 1em; }
.case-part__body p:last-child { margin-bottom: 0; }
.case-list { list-style: none; margin: 0; padding: 0; }
.case-list li { position: relative; padding: 0 0 12px 26px; font-size: 16px; line-height: 1.6; color: var(--ink-soft); }
.case-list li::before { content: ""; position: absolute; left: 0; top: 10px; width: 9px; height: 9px; border: 2px solid var(--accent); border-radius: 50%; }
.case-quote { margin: 40px 0 8px; }
.case-back { margin-top: 36px; }
.case-meta__cta { margin-top: 4px; }
@media (max-width: 860px) {
  .case-layout { grid-template-columns: 1fr; gap: 36px; }
  .case-meta { position: static; }
  .case-meta__logo { max-width: 260px; }
}

.contact-form .btn { margin-top: 8px; }

/* direct-contact under the message form */
.contact-card__direct { display: flex; flex-wrap: wrap; gap: 20px 40px; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); }
.contact-direct__item { display: flex; flex-direction: column; gap: 5px; }
.contact-direct__label { font-size: 11px; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase; color: var(--accent-deep); }
.contact-direct a, .contact-direct span:not(.contact-direct__label) { color: var(--ink); text-decoration: none; font-size: 16px; font-weight: 600; }
.contact-direct a:hover { color: var(--accent-deep); }

@media (max-width: 820px) {
  .contact-card__col { padding: 30px 24px; }
}

/* ==================================================================
   ARTICLE / PROSE  (blog + case study body)
   ================================================================== */
.prose { max-width: 820px; margin: 0 auto; }
.prose p, .prose ul, .prose ol { font-size: 17px; line-height: 1.8; color: var(--ink-soft); margin-bottom: 1.4em; }
.prose h2 { font-family: var(--font-serif); font-size: 30px; margin: 1.6em 0 0.5em; }
.prose h3 { font-family: var(--font-serif); font-size: 24px; margin: 1.4em 0 0.4em; }
.prose a { color: var(--accent-deep); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; font-weight: 600; transition: color 140ms ease; }
.prose a:hover { color: var(--accent-deep); }

/* MathML formula blocks: break out to a wider, centered box so wide formulas
   fit without a scrollbar; scroll only kicks in as a last resort on tiny screens */
.prose .wp-block-math {
	position: relative; left: 50%; transform: translateX(-50%);
	width: min(96vw, 980px); margin: 1.8em 0; padding: 22px 26px;
	background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
	text-align: center; overflow-x: auto;
}
/* width: max-content + auto margins = centered when it fits, and when it
   overflows the box the formula starts at the left edge and the whole thing
   is reachable by scrolling (block math otherwise centers its content, which
   clips the START of a too-wide formula with no way to scroll back to it). */
.prose .wp-block-math math { width: max-content; margin: 0 auto; font-size: 0.82em; }
/* Stacked lines produced by formula-fit.js when a formula cannot fit at a
   readable size on one line. */
.prose .wp-block-math math.hsn-math-line + math.hsn-math-line { margin-top: 0.55em; }
@media (max-width: 640px) {
  .prose .wp-block-math { padding: 14px 16px; }
  /* Formulas are authored \huge / \large for desktop, which bakes a mathsize
     attribute into the MathML. Neutralise it on phones so formulas start from
     body-text size; formula-fit.js shrinks them further only if still too wide. */
  .prose .wp-block-math mstyle { font-size: 1em; }
}
.prose blockquote { border-left: 3px solid var(--accent); margin: 1.6em 0; padding-left: 20px; color: var(--muted); font-style: italic; }
.prose img { border-radius: var(--r-md); margin: 1.6em 0; }

/* ==================================================================
   FOOTER
   ================================================================== */
.site-footer { background: var(--charcoal); color: var(--paper); padding: 56px 0 32px; }
.site-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; }
.site-footer__brand { font-family: var(--font-serif); font-size: 22px; margin-bottom: 12px; }
.site-footer p { color: #a4a493; font-size: 14px; }
.site-footer h4 { font-size: 12px; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase; color: var(--accent-light); margin-bottom: 14px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer a { display: block; color: #bdbdad; font-size: 14px; text-decoration: none; margin-bottom: 10px; }
.site-footer a:hover { color: var(--paper); }
.site-footer__bottom { margin-top: 44px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.12); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; color: #87877a; font-size: 13px; }

/* ==================================================================
   UTILITIES
   ================================================================== */
.center { text-align: center; }
.mx-auto { margin-left: auto; margin-right: auto; }
.maxw-640 { max-width: 640px; }
.mt-0 { margin-top: 0; } .mt-8 { margin-top: 8px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; } .mt-40 { margin-top: 40px; }
.mb-0 { margin-bottom: 0; } .mb-16 { margin-bottom: 16px; } .mb-24 { margin-bottom: 24px; } .mb-40 { margin-bottom: 40px; }
.lede-block { max-width: 760px; }

/* ==================================================================
   RESPONSIVE
   ================================================================== */
@media (max-width: 900px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .section { padding: 40px 0; }
  .grid-2, .grid-3, .grid-4, .field-grid { grid-template-columns: 1fr; }
  .service-row, .service-row--split { grid-template-columns: 1fr; gap: 8px; }
  .service-row--split > .service-row__list { margin: 12px 0 0; }
  .service-row__num { font-size: 48px; }
  .stat-band { grid-template-columns: 1fr; }
  .stat-cell { border-left: 0; border-top: 1px solid rgba(255,255,255,0.2); }
  .stat-cell:first-child { border-top: 0; }
  .site-footer__grid { grid-template-columns: 1fr; }
  .hero { padding: 44px 0 40px; }
}

/* prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
}