/* ---- Fonts (self-hosted) ---- */
/* Self-hosted fonts (SIL Open Font License). No calls to Google. */
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 200; font-display: swap; src: url('../fonts/hanken-grotesk-latin-200-normal.woff2') format('woff2'); }
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 300; font-display: swap; src: url('../fonts/hanken-grotesk-latin-300-normal.woff2') format('woff2'); }
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/hanken-grotesk-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/hanken-grotesk-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/geist-mono-latin-400-normal.woff2') format('woff2'); }

/* ---- reset for block wrappers (low priority: Meridian rules below win) ---- */
.wp-block-image { margin: 0; }
.wp-block-post-content > * { margin-block: 0; }
.wp-block-buttons { gap: 0; }

/* ---- Shared: tokens, header, footer, buttons, layout, motion ---- */
:root {
  color-scheme: light;
  --paper: #FFFFFF;
  --mist: #F2F3F3;
  --ink: #0B0D0E;
  --gray: #5A6064;
  --soft: #6B7176;
  --line: #E1E3E4;
  --night: #0B0D0E;
  --fog: #C9CED1;
  --cyan: #00AFEF;
  --blue: #1E5DAB;
  --sans: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, Consolas, monospace;
  --ease: cubic-bezier(.2,.7,.2,1);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--ink); color: #FFFFFF; padding: 12px 16px; border-radius: 4px; text-decoration: none; }
.skip:focus { top: 12px; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.split .lede { margin-bottom: 40px; }
body { margin: 0; background: var(--paper); color: var(--gray); font: 400 17px/1.7 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.on-dark :focus-visible { outline-color: #FFFFFF; }
img { max-width: 100%; display: block; }
.wrap { max-width: 1280px; margin: 0 auto; padding-left: max(40px, env(safe-area-inset-left, 0px)); padding-right: max(40px, env(safe-area-inset-right, 0px)); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.display { font-weight: 300; color: var(--ink); letter-spacing: -.03em; line-height: 1.04; margin: 0; text-wrap: balance; }
.gutter { margin: 0; padding-top: 12px; font: 400 12px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); position: sticky; top: 96px; align-self: start; }
.gutter::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); margin-right: 12px; vertical-align: 1px; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); gap: 48px; }
.lede { font-size: clamp(22px, 2.2vw, 30px); font-weight: 300; line-height: 1.38; color: var(--ink); letter-spacing: -.015em; margin: 0; max-width: 26em; text-wrap: pretty; }
.section { padding-block: 120px; }
.section + .section { padding-top: 0; }
.section.rule { border-top: 1px solid var(--line); padding-top: 120px; }
.h2 { font-size: clamp(34px, 3.8vw, 54px); margin-bottom: 36px; max-width: 16em; }

/* Top bar + sticky header */
.topbar { background: var(--night); color: var(--fog); font-size: 13.5px; }
.topbar .wrap { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 40px; flex-wrap: wrap; }
.topbar nav { display: flex; gap: 28px; flex-wrap: wrap; }
.topbar a { color: var(--fog); text-decoration: none; padding: 10px 0; display: inline-block; }
.topbar a:hover { color: #FFFFFF; }
.site-header { position: sticky; top: 0; z-index: 30; background: rgba(255,255,255,.96); backdrop-filter: blur(10px); border-bottom: 1px solid transparent; transition: border-color .3s; padding-top: env(safe-area-inset-top, 0px); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 88px; transition: min-height .4s var(--ease); }
.site-header img { width: 150px; transition: width .4s var(--ease); }
body.scrolled .site-header { border-color: var(--line); }
body.scrolled .site-header .wrap { min-height: 64px; }
body.scrolled .site-header img { width: 116px; }
.site-header ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 34px; }
.site-header nav a { text-decoration: none; color: var(--ink); font-size: 16px; position: relative; display: inline-block; padding: 10px 0; }
.site-header nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 6px; height: 1px; background: var(--ink); transform: scaleX(0); transform-origin: right; transition: transform .4s var(--ease); }
.site-header nav a:hover::after, .site-header nav a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.site-header .book { background: var(--ink); color: #FFFFFF; padding: 12px 20px; border-radius: 999px; }
.site-header .book::after { display: none; }
.site-header .show-sm { display: none; }
.menu-btn { font: inherit; font-size: 16px; color: var(--ink); background: none; border: 0; padding: 10px 0; cursor: pointer; }
.menu-panel { display: none; border-top: 1px solid var(--line); }
.menu-panel.open { display: block; }
.menu-panel ul { list-style: none; margin: 0; padding: 8px 0 16px; display: block; }
.site-header .menu-panel a { display: block; padding: 12px 0; font-size: 20px; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); }
.site-header .menu-panel a::after { display: none; }

/* Inner page hero: photo band with a big light title */
.page-hero { position: relative; overflow: hidden; background: var(--night); color: #FFFFFF; }
.page-hero .bg { position: absolute; inset: 0; }
.page-hero .bg img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); animation: settle 5s var(--ease) forwards; }
@keyframes settle { to { transform: scale(1); } }
.page-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11,13,14,.9) 0%, rgba(11,13,14,.8) 55%, rgba(11,13,14,.45) 100%); }
.page-hero .wrap { position: relative; z-index: 1; padding-block: 120px 88px; }
.crumb { display: inline-block; margin: 0 0 22px; padding: 6px 10px; border-radius: 3px; background: rgba(11,13,14,.72); font: 400 12px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #E6E9EB; }
.crumb a { color: #E6E9EB; }
.page-hero h1 { color: #FFFFFF; font-size: clamp(46px, 6.4vw, 92px); font-weight: 200; margin-bottom: 26px; max-width: 11em; }
.page-hero p.sub { color: #DCE0E2; max-width: 34em; font-size: 19px; margin: 0; text-wrap: pretty; opacity: 0; animation: up 1.1s var(--ease) forwards .35s; }
.page-hero .actions { margin-top: 36px; opacity: 0; animation: up 1.1s var(--ease) forwards .5s; }
@keyframes up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* Buttons and links */
.actions { display: flex; gap: 14px; flex-wrap: wrap; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 54px; padding: 0 28px; border-radius: 999px; font: 500 16px/1 var(--sans); text-decoration: none; border: 0; cursor: pointer; transition: background .3s, color .3s; }
.btn svg { width: 16px; height: 16px; transition: transform .4s var(--ease); }
.btn:hover svg { transform: translateX(4px); }
.btn-cyan { background: var(--cyan); color: var(--ink); }
.btn-cyan:hover { background: #FFFFFF; }
.on-light .btn-cyan:hover, .btn-cyan.light-hover:hover { background: #6FD0F5; }
.btn-ghost { color: #FFFFFF; border: 1px solid rgba(255,255,255,.55); }
.btn-ghost:hover { background: rgba(255,255,255,.12); }
.btn-ink { background: var(--ink); color: #FFFFFF; }
.btn-ink:hover { background: #262A2D; }
.btn-line { color: var(--ink); border: 1px solid var(--ink); background: transparent; }
.btn-line:hover { background: var(--ink); color: #FFFFFF; }
.link { color: var(--ink); text-decoration: none; display: inline-flex; align-items: center; gap: 10px; font-weight: 500; border-bottom: 1px solid var(--line); padding: 8px 0 4px; transition: gap .3s var(--ease), border-color .3s; }
.link:hover { gap: 16px; border-color: var(--ink); }

/* Ruled lists */
.rules { list-style: none; margin: 0; padding: 0; }
.rules li { border-top: 1px solid var(--line); padding: 18px 0 20px; }
.rules li strong { display: block; font-weight: 500; color: var(--ink); font-size: 18px; margin-bottom: 4px; }
.rules li p { margin: 0; font-size: 16px; }

/* Dark band */
.dark { background: var(--night); color: var(--fog); padding-block: 130px; }
.dark .display { color: #FFFFFF; font-weight: 200; }
.dark .rules li { border-color: rgba(255,255,255,.12); }
.dark .rules li strong { color: #FFFFFF; }
.dark .gutter { color: #FFFFFF; }
.dark .lede { color: #E6E9EB; }
.dark .h2 { color: #FFFFFF; }
.steps { list-style: none; margin: 0; padding: 0; counter-reset: s; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 44px minmax(0, 1fr); border-top: 1px solid var(--line); padding: 16px 0 18px; }
.steps li::before { content: counter(s); font-size: 28px; font-weight: 200; color: var(--blue); line-height: 1.1; }
.steps strong { display: block; color: var(--ink); font-weight: 500; font-size: 18px; margin-bottom: 2px; }
.steps p { margin: 0; font-size: 16px; }

/* Closing CTA */
.cta { padding-block: 130px 110px; border-top: 1px solid var(--line); }
.cta h2 { font-size: clamp(36px, 4.4vw, 60px); max-width: 12em; margin-bottom: 40px; }
.cta .row { display: flex; align-items: center; gap: 28px 40px; flex-wrap: wrap; }
.cta .big { font-size: clamp(36px, 5.4vw, 76px); font-weight: 200; letter-spacing: -.03em; color: var(--ink); text-decoration: none; background: linear-gradient(var(--cyan), var(--cyan)) 0 100% / 0 2px no-repeat; transition: background-size .6s var(--ease); }
.cta .big:hover { background-size: 100% 2px; }

/* Footer */
footer { background: var(--night); color: var(--fog); font-size: 15px; }
footer .wrap { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 48px; padding-block: 84px 56px; }
footer .logo { display: inline-block; background: #FFFFFF; padding: 12px 16px; border-radius: 6px; margin-bottom: 22px; }
footer .logo img { width: 140px; }
footer h2 { margin: 0 0 14px; font-size: 14px; font-weight: 500; color: #FFFFFF; }
footer ul { list-style: none; margin: 0; padding: 0; line-height: 2.2; }
footer a { color: var(--fog); text-decoration: none; }
footer a:hover { color: #FFFFFF; text-decoration: underline; }
footer .note { color: #A3AAAE; font-size: 13px; line-height: 1.6; }
footer .legal { border-top: 1px solid rgba(255,255,255,.1); }
footer .legal .wrap { display: block; padding-block: 22px 30px; color: #A3AAAE; font-size: 13px; }


/* Reveal on scroll */
[data-reveal].pre { opacity: 0; transform: translateY(24px); }
[data-reveal].pre.in { opacity: 1; transform: none; transition: opacity .9s ease, transform 1s var(--ease); transition-delay: var(--d, 0ms); }

@media (max-width: 960px) {
  .wrap { padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
  .topbar .where { display: none; }
  .topbar .wrap { justify-content: center; }
  .site-header .wrap { min-height: 66px; }
  .site-header img { width: 118px; }
  body.scrolled .site-header .wrap { min-height: 58px; }
  body.scrolled .site-header img { width: 100px; }
  .site-header ul { gap: 18px; }
  .site-header .hide-sm { display: none; }
  .site-header .show-sm { display: list-item; }
  .page-hero::after { background: linear-gradient(180deg, rgba(11,13,14,.7) 0%, rgba(11,13,14,.84) 60%, rgba(11,13,14,.92) 100%); }
  .page-hero .wrap { padding-block: 120px 56px; }
  .page-hero p.sub { font-size: 17px; }
  .page-hero .actions .btn { flex: 1 1 100%; }
  .split { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .gutter { position: static; padding-top: 0; }
  .section, .section.rule { padding-block: 72px; }
  .section + .section { padding-top: 0; }
  .section.rule { padding-top: 72px; }
  .dark { padding-block: 80px; }
  .cta { padding-block: 80px 72px; }
  footer .wrap { grid-template-columns: minmax(0, 1fr); gap: 34px; }
}
@media (min-width: 961px) { .menu-panel, .menu-panel.open { display: none; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .page-hero .bg img { animation: none; transform: none; }
  .page-hero p.sub, .page-hero .actions { animation: none; opacity: 1; }
  *, ::before, ::after { transition: none !important; }
}

/* ---- Home page sections ---- */
.site-header nav a:hover::after { transform: scaleX(1); transform-origin: left; }
.hero { position: relative; overflow: hidden; background: var(--night); color: #FFFFFF; min-height: min(86vh, 820px); display: flex; align-items: flex-end; }
.hero .bg { position: absolute; inset: 0; }
.hero .bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; transform: scale(1.12); animation: push 5s var(--ease) forwards; }
@keyframes push { to { transform: scale(1.0); } }
@media (min-width: 901px) { .hero .bg img { transform: scale(-1.12, 1.12); animation-name: pushm; } }
@media (min-width: 901px) { @keyframes pushm { to { transform: scale(-1, 1); } } }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11,13,14,.9) 0%, rgba(11,13,14,.78) 50%, rgba(11,13,14,.3) 100%), linear-gradient(0deg, rgba(11,13,14,.55), rgba(11,13,14,0) 40%); }
.hero .wrap { position: relative; z-index: 1; width: 100%; padding-block: 140px 80px; }
.hero .eyebrow { display: inline-block; margin: 0 0 22px; padding: 6px 10px; border-radius: 3px; background: rgba(11,13,14,.72); font: 400 13px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #E6E9EB; }
.hero h1 { color: #FFFFFF; font-size: clamp(52px, 8.2vw, 116px); font-weight: 200; margin-bottom: 30px; }
.rot { display: inline-grid; vertical-align: bottom; overflow: hidden; padding-bottom: .18em; margin-bottom: -.18em; }
.rot span { grid-area: 1 / 1; transform: translateY(120%); opacity: 0; transition: transform .9s var(--ease), opacity .45s ease; }
.rot span.on { transform: none; opacity: 1; transition: transform .9s var(--ease), opacity .6s ease .15s; }
.rot span.out { transform: translateY(-120%); opacity: 0; }
.rot b { font-weight: 200; color: var(--cyan); }
.hero .sub { color: #DCE0E2; max-width: 32em; font-size: 19px; margin: 0 0 40px; text-wrap: pretty; opacity: 0; animation: up 1.1s var(--ease) forwards .5s; }
.hero .actions { display: flex; gap: 14px; flex-wrap: wrap; opacity: 0; animation: up 1.1s var(--ease) forwards .7s; }
@keyframes up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.familiar { padding-block: 140px 120px; }
.familiar h2 { font-size: clamp(34px, 3.8vw, 54px); max-width: 16em; margin-bottom: 44px; }
.qs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 56px; }
.qs li { border-top: 1px solid var(--line); padding: 24px 0 26px; font-size: clamp(20px, 1.8vw, 24px); font-weight: 300; line-height: 1.35; color: var(--ink); letter-spacing: -.01em; }
.familiar .close { margin: 40px 0 0; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; border-top: 1px solid var(--ink); padding-top: 26px; }
.familiar .close p { margin: 0; color: var(--ink); max-width: 38em; }
.services { padding-bottom: 140px; }
.groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.group .tag { margin: 0 0 6px; font: 400 12px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--blue); }
.group h3 { margin: 0 0 16px; font-size: 26px; font-weight: 300; line-height: 1.15; color: var(--ink); letter-spacing: -.02em; min-height: 2.3em; }
.group ul { list-style: none; margin: 0; padding: 0; }
.group li { border-top: 1px solid var(--line); padding: 14px 0 16px; font-size: 15.5px; }
.group li strong { display: block; font-weight: 500; color: var(--ink); margin-bottom: 2px; }
.group.plan h3::after { content: " ●"; color: var(--cyan); font-size: .5em; vertical-align: .5em; }
.svc-title { font-size: clamp(34px, 3.8vw, 54px); max-width: 16em; margin-bottom: 44px; }
.story { position: relative; overflow: clip; color: var(--fog); padding-block: 140px 110px; background: radial-gradient(ellipse 48% 42% at 74% 44%, rgba(0,175,239,.17), rgba(0,175,239,0) 70%), var(--night); }
.story-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "intro pin" "chapters pin"; column-gap: 80px; }
.story-intro { grid-area: intro; }
.story-chapters { grid-area: chapters; }
.story-pin { grid-area: pin; align-self: start; position: relative; }
.story h2 { color: #FFFFFF; font-size: clamp(42px, 5.4vw, 76px); font-weight: 200; }
.drawline { height: 1px; background: rgba(255,255,255,.14); margin: 36px 0 32px; position: relative; overflow: hidden; }
.drawline i { position: absolute; inset: 0; background: var(--cyan); transform-origin: left; transform: scaleX(var(--p, 0)); }
.story-intro p { margin: 0 0 16px; font-size: 18px; }
.chapter { min-height: 62vh; display: flex; flex-direction: column; justify-content: center; padding-block: 40px; scroll-margin-top: 30vh; }
.chapter :is(h3, h3 + p) { transition: color .5s ease; }
.story:not(.static) .chapter:not(.active) :is(h3, h3 + p) { color: #7D8589; }
.chapter h3 { margin: 0 0 10px; color: #FFFFFF; font-size: clamp(26px, 2.6vw, 36px); font-weight: 300; line-height: 1.12; letter-spacing: -.02em; }
.chapter h3 + p { margin: 0; font-size: 17px; max-width: 30em; }
.was { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 18px; font: 400 11.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.was .x { color: var(--cyan); font-size: 13px; }
.was s { text-decoration: none; color: var(--ink); padding: 6px 8px; border-radius: 2px; background-color: #FFFFFF; background-image: linear-gradient(var(--ink), var(--ink)); background-repeat: no-repeat; background-position: 8px 52%; background-size: 0 1.5px; transition: background-size .7s var(--ease) .15s; }
.was s { transition: background-size .7s var(--ease) .15s, background-color .4s ease, color .4s ease, box-shadow .4s ease; }
.story:not(.static) .chapter:not(.active) .was s { background-color: transparent; color: #A9B0B3; box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); }
.chapter.active .was s, .story.static .was s { background-size: calc(100% - 16px) 1.5px; }
@media (forced-colors: active) { .was s { text-decoration: line-through; } }
.rail { position: absolute; left: -56px; top: 50%; transform: translateY(-50%); z-index: 2; display: grid; gap: 12px; }
.rail a { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(255,255,255,.3); color: rgba(255,255,255,.7); font: 400 10px/1 var(--mono); text-decoration: none; transition: background-color .3s, border-color .3s, color .3s, box-shadow .3s; }
.rail a:hover { border-color: #FFFFFF; color: #FFFFFF; }
.rail a[aria-current="step"] { background: var(--cyan); border-color: var(--cyan); color: var(--ink); box-shadow: 0 0 0 6px rgba(0,175,239,.16); }
.report { position: relative; z-index: 1; margin: 0; background: #FFFFFF; color: var(--gray); border-radius: 6px; padding: 20px 26px 14px; box-shadow: 0 40px 90px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.06); scroll-margin-top: 96px; }
.report header { display: flex; justify-content: space-between; align-items: start; gap: 16px; flex-wrap: wrap; padding-bottom: 12px; border-bottom: 2px solid var(--ink); margin-bottom: 4px; }
.report header p { margin: 0; font: 400 11px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--soft); }
.report header h3 { margin: 4px 0 0; font-size: 20px; font-weight: 400; color: var(--ink); letter-spacing: -.01em; }
.stamp { font: 400 10.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink); border: 1px solid var(--ink); padding: 7px 9px; border-radius: 3px; transform: rotate(-2deg); }
.region { position: relative; margin: 0 -12px; padding: 9px 12px 10px; border-radius: 6px; transition: opacity .5s ease, background-color .5s ease, box-shadow .5s ease; }
.region + .region { margin-top: 2px; }
.region + .region::before { content: ""; position: absolute; left: 12px; right: 12px; top: -2px; height: 1px; background: var(--line); }
.region .no { position: absolute; right: 12px; top: 10px; font: 400 10.5px/1 var(--mono); letter-spacing: .1em; color: var(--soft); }
.report[data-step] .region { opacity: .6; }
.report[data-step="1"] .r1, .report[data-step="2"] .r2, .report[data-step="3"] .r3, .report[data-step="4"] .r4 { opacity: 1; background-color: rgba(0,175,239,.07); box-shadow: inset 0 0 0 1px rgba(0,175,239,.5); }
.report h4 { margin: 0 0 6px; font: 400 11px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--soft); }
.kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kpi { padding: 2px 14px 2px 0; }
.kpi + .kpi { padding-left: 14px; border-left: 1px solid var(--line); }
.kpi .n { display: block; font-size: 27px; font-weight: 300; line-height: 1.1; color: var(--ink); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.kpi .l { display: block; font-size: 12px; line-height: 1.35; margin-top: 2px; }
.bars { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 24px; margin-top: 10px; }
.bar { display: grid; grid-template-columns: 118px minmax(0, 1fr) 20px; gap: 10px; align-items: center; font-size: 12.5px; font-variant-numeric: tabular-nums; color: var(--ink); }
.bar .track { display: block; height: 7px; background: var(--mist); border-radius: 4px; overflow: hidden; }
.bar .fill { display: block; height: 100%; width: var(--w); background: var(--cyan); border-radius: 4px; transform-origin: left; }
.report.pre .bar .fill { transform: scaleX(0); }
.report.pre.in .bar .fill { transform: scaleX(1); transition: transform 1.2s var(--ease) var(--d, 300ms); }
.plan-list { list-style: none; margin: 0; padding: 0; font-size: 13.5px; }
.plan-list li { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; border-top: 1px solid var(--line); color: var(--gray); }
.plan-list li:first-child { border-top: 0; }
.plan-list li span:last-child { color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.plan-list li.total { border-top: 1px solid var(--ink); font-weight: 500; color: var(--ink); }
.recs ol { margin: 0; padding-left: 20px; font-size: 13.5px; color: var(--ink); }
.recs li { padding: 1px 0; }
.recs li > div { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; }
.recs li em { font-style: normal; font: 400 11px/1.3 var(--mono); letter-spacing: .04em; color: var(--blue); white-space: nowrap; }
.recs .billed { margin: 6px 0 0; font-size: 13px; color: var(--ink); }
.report figcaption { margin-top: 6px; font-size: 12px; color: var(--soft); }
.story.static .chapter { min-height: 0; opacity: 1; padding-block: 24px; border-top: 1px solid rgba(255,255,255,.12); }
.story.static .rail { display: none; }
@media (min-width: 961px) and (min-height: 760px) { .story-pin { position: sticky; top: 80px; } }
@media (min-width: 961px) and (max-height: 899px) { .report { padding: 14px 22px 10px; } }
@media (min-width: 961px) and (max-height: 899px) { .report header { padding-bottom: 8px; } }
@media (min-width: 961px) and (max-height: 899px) { .report header h3 { font-size: 18px; } }
@media (min-width: 961px) and (max-height: 899px) { .region { padding: 6px 12px 7px; } }
@media (min-width: 961px) and (max-height: 899px) { .region .no { top: 7px; } }
@media (min-width: 961px) and (max-height: 899px) { .kpi .n { font-size: 23px; } }
@media (min-width: 961px) and (max-height: 899px) { .bars { margin-top: 6px; gap: 2px 24px; } }
@media (min-width: 961px) and (max-height: 899px) { .plan-list li { padding: 2px 0; } }
@media (min-width: 961px) and (max-height: 899px) { .recs .billed { margin-top: 4px; } }
@media (min-width: 961px) and (max-height: 899px) { .report figcaption { margin-top: 4px; font-size: 11.5px; } }
.strip { position: relative; height: clamp(300px, 40vw, 560px); overflow: hidden; background: var(--night); }
.strip img { position: absolute; left: 0; top: -12%; width: 100%; height: 124%; object-fit: cover; }
.strip::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, #0B0D0E 0%, rgba(11,13,14,0) 26%, rgba(11,13,14,0) 45%, rgba(11,13,14,.9) 100%); }
.strip p { position: absolute; z-index: 1; bottom: 26px; left: 0; right: 0; margin: 0; color: #FFFFFF; font-size: 15px; }
.terms { padding-block: 140px 120px; }
.terms .two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; }
.terms h3 { margin: 0 0 18px; font-size: clamp(28px, 2.6vw, 36px); font-weight: 300; line-height: 1.1; color: var(--ink); letter-spacing: -.02em; }
.terms ul, .terms ol { list-style: none; margin: 0; padding: 0; }
.terms li { border-top: 1px solid var(--line); padding: 14px 0 16px; font-size: 16px; }
.terms li strong { color: var(--ink); font-weight: 500; }
.steps li p { margin: 2px 0 0; font-size: 15.5px; }
.terms .fit { margin: 20px 0 0; color: var(--ink); }
.owner { padding-block: 130px; border-top: 1px solid var(--line); }
.owner .bio { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; border-top: 1px solid var(--line); padding-top: 28px; }
.owner .bio p { margin: 0; font-size: 16px; }
.owner .bio strong { display: block; color: var(--ink); font-weight: 500; }
.local { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: var(--mist); }
.local .text { padding: 130px 72px 130px max(40px, calc((100vw - 1280px) / 2 + 40px)); }
.local h2 { font-size: clamp(34px, 3.6vw, 52px); margin-bottom: 24px; }
.local .pic { position: relative; overflow: hidden; min-height: 540px; }
.local .pic img { position: absolute; left: 0; top: -10%; width: 100%; height: 120%; object-fit: cover; filter: grayscale(1) contrast(1.05); }
.help .wrap { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; padding-block: 72px; border-bottom: 1px solid var(--line); }
.help h3 { margin: 0 0 6px; font-size: 20px; font-weight: 500; color: var(--ink); }
.help p { margin: 0 0 10px; font-size: 15.5px; }
.help a { color: var(--ink); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.help a:hover { color: var(--blue); }
.cta .careers { margin: 48px 0 0; font-size: 15.5px; }
.cta .careers a { color: var(--blue); }
.report[data-reveal].pre { opacity: 1; transform: none; }
@media (max-width: 960px) { .hero { min-height: 0; } }
@media (max-width: 960px) { .hero .bg img { object-position: 25% 55%; } }
@media (max-width: 960px) { .strip { height: 200px; } }
@media (max-width: 960px) { .strip::after { background: linear-gradient(180deg, #0B0D0E 0%, rgba(11,13,14,.35) 30%, rgba(11,13,14,.92) 100%); } }
@media (max-width: 960px) { .recs li > div { flex-direction: column; gap: 2px; } }
@media (max-width: 960px) { .bars { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 960px) { .bar { grid-template-columns: 118px minmax(0, 1fr) 22px; } }
@media (max-width: 960px) { .help { display: none; } }
@media (max-width: 960px) { .story { padding-block: 88px 64px; } }
@media (max-width: 960px) { .story-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "intro" "pin" "chapters"; row-gap: 32px; } }
@media (max-width: 960px) { .report { padding: 20px 16px 16px; } }
@media (max-width: 960px) { .region { margin: 0 -8px; padding: 12px 8px; } }
@media (max-width: 960px) { .kpi .n { font-size: 24px; } }
@media (max-width: 960px) { .kpi + .kpi { padding-left: 10px; } }
@media (max-width: 960px) { .hero::after { background: linear-gradient(180deg, rgba(11,13,14,.3) 0%, rgba(11,13,14,.72) 38%, rgba(11,13,14,.9) 100%); } }
@media (max-width: 960px) { .hero .wrap { padding-block: 220px 56px; } }
@media (max-width: 960px) { .hero .sub { font-size: 17px; } }
@media (max-width: 960px) { .hero .actions .btn { flex: 1 1 100%; } }
@media (max-width: 960px) { .split, .owner .bio, .terms .two { grid-template-columns: minmax(0, 1fr); gap: 16px; } }
@media (max-width: 960px) { .familiar { padding-block: 88px 72px; } }
@media (max-width: 960px) { .qs { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 960px) { .services { padding-bottom: 88px; } }
@media (max-width: 960px) { .groups { grid-template-columns: minmax(0, 1fr); gap: 36px; } }
@media (max-width: 960px) { .group h3 { min-height: 0; } }
@media (max-width: 960px) { .terms { padding-block: 88px 72px; } }
@media (max-width: 960px) { .terms .two { gap: 48px; } }
@media (max-width: 960px) { .owner { padding-block: 96px; } }
@media (max-width: 960px) { .local { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 960px) { .local .text { padding: 64px 20px; } }
@media (max-width: 960px) { .local .pic { min-height: 220px; } }
@media (max-width: 960px) { .help .wrap { grid-template-columns: minmax(0, 1fr); gap: 28px; padding-block: 56px; } }
@media (max-width: 560px) { .hero .eyebrow { font-size: 11px; letter-spacing: .05em; } }
@media (max-width: 560px) { .kpis { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .kpi, .kpi + .kpi { display: flex; gap: 12px; align-items: baseline; padding: 6px 0; border-left: 0; border-top: 1px solid var(--line); } }
@media (max-width: 560px) { .kpi:first-child { border-top: 0; } }
@media (max-width: 560px) { .kpi .n { flex: 0 0 96px; } }
@media (max-width: 560px) { .kpi .l { margin-top: 0; } }
@media (prefers-reduced-motion: reduce) { .hero .bg img { animation: none; transform: none; } }
@media (prefers-reduced-motion: reduce) { .hero .bg img { transform: scaleX(-1); } }
@media (prefers-reduced-motion: reduce) { .hero .sub, .hero .actions { animation: none; opacity: 1; } }

/* ---- Services page ---- */
  .jump { border-bottom: 1px solid var(--line); background: var(--paper); }
  .jump ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px 30px; flex-wrap: wrap; padding-block: 18px; }
  .jump a { color: var(--ink); text-decoration: none; font-size: 15px; display: inline-block; padding: 11px 0; }
  .jump a:hover { color: var(--blue); }
  .grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 56px; }
  .who { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 40px; }
  .who li { border-top: 1px solid var(--line); padding: 22px 0 26px; }
  .who strong { display: block; font-size: 20px; font-weight: 400; color: var(--ink); letter-spacing: -.01em; margin-bottom: 4px; }
  .who p { margin: 0; font-size: 15.5px; }
  .price { background: var(--mist); padding-block: 110px; }
  .price .two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: start; }
  .price h3 { margin: 0 0 18px; font-size: clamp(26px, 2.4vw, 34px); font-weight: 300; color: var(--ink); letter-spacing: -.02em; line-height: 1.12; }
  .price p { margin: 0; }
  .inline-link { margin-top: 26px; }
  .shot { position: relative; overflow: hidden; height: clamp(260px, 32vw, 440px); background: var(--night); margin-top: 72px; border-radius: 4px; }
  .shot img { position: absolute; left: 0; top: -10%; width: 100%; height: 120%; object-fit: cover; }
  @media (max-width: 960px) {
    .jump ul { flex-wrap: nowrap; overflow-x: auto; }
    .jump li { flex: 0 0 auto; }
    .grid2, .who, .price .two { grid-template-columns: minmax(0, 1fr); }
    .price { padding-block: 64px; }
    .price .two { gap: 36px; }
    .shot { margin-top: 40px; }
  }

/* ---- About page ---- */
  .our-story p.body { margin: 28px 0 0; max-width: 40em; }
  .ways { counter-reset: w; }
  .ways li { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 32px; padding: 26px 0 28px; }
  .ways strong { font-size: 24px; font-weight: 300; letter-spacing: -.01em; margin: 0; }
  .owner-card { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; align-items: start; border-top: 1px solid var(--line); padding-top: 32px; }
  .owner-card .who-card strong { display: block; color: var(--ink); font-weight: 500; font-size: 18px; }
  .owner-card .who-card p { margin: 6px 0 0; }
  .team-note { margin: 40px 0 0; padding: 22px 24px; background: var(--mist); border-radius: 4px; font-size: 15.5px; }
  .place { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: var(--mist); }
  .place .text { padding: 120px 72px 120px max(40px, calc((100vw - 1280px) / 2 + 40px)); }
  .place h2 { font-size: clamp(34px, 3.6vw, 52px); margin-bottom: 24px; }
  .place .pic { position: relative; overflow: hidden; min-height: 520px; }
  .place .pic img { position: absolute; left: 0; top: -10%; width: 100%; height: 120%; object-fit: cover; filter: grayscale(1) contrast(1.05); }
  .careers .grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: start; }
  .careers .apply { background: var(--night); color: var(--fog); border-radius: 6px; padding: 36px; }
  .careers .apply h3 { margin: 0 0 10px; color: #FFFFFF; font-size: 28px; font-weight: 300; letter-spacing: -.02em; }
  .careers .apply p { margin: 0 0 24px; }
  @media (max-width: 960px) {
    .ways li { grid-template-columns: minmax(0, 1fr); gap: 6px; }
    .owner-card, .place, .careers .grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
    .place .text { padding: 64px 20px; }
    .place .pic { min-height: 240px; }
    .careers .apply { padding: 26px 22px; }
  }

/* ---- Support page ---- */
  .ways3 { border-bottom: 1px solid var(--line); }
  .ways3 .wrap { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ways3 .col { padding: 48px 36px 52px 0; display: flex; flex-direction: column; align-items: flex-start; }
  .ways3 .col + .col { padding-left: 36px; border-left: 1px solid var(--line); }
  .ways3 h2 { margin: 0 0 8px; font-size: 26px; font-weight: 300; color: var(--ink); letter-spacing: -.02em; }
  .ways3 p { margin: 0 0 22px; font-size: 16px; flex: 1; }
  .ways3 .tel { font-size: 30px; font-weight: 200; color: var(--ink); text-decoration: none; letter-spacing: -.02em; }
  .ways3 .tel:hover { color: var(--blue); }
  .notice { margin-top: 36px; padding: 22px 24px; border-left: 3px solid var(--ink); background: var(--mist); }
  .notice p { margin: 0; color: var(--ink); }
  .book .wrap.grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: start; }
  .book .display { margin-bottom: 26px; }
  .book .fallback { margin-top: 28px; color: #E6E9EB; }
  .book .fallback a { color: #FFFFFF; }
  .widget { background: #FFFFFF; color: var(--gray); border-radius: 6px; padding: 30px; box-shadow: 0 40px 90px rgba(0,0,0,.45); }
  .on-dark .widget :focus-visible { outline-color: var(--blue); }
  .bookings h3 { margin: 0 0 10px; font-size: 26px; font-weight: 300; color: var(--ink); letter-spacing: -.02em; }
  .bookings p { margin: 0 0 22px; }
  .bookings .alt { margin: 22px 0 0; font-size: 15px; }
  .bookings .alt a { color: var(--ink); }
  .widget .preview-tag { display: inline-block; font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); border: 1px solid var(--ink); padding: 5px 8px; border-radius: 3px; margin-bottom: 14px; }
  .widget fieldset { border: 0; margin: 0 0 18px; padding: 0; min-width: 0; }
  .widget legend { padding: 0; margin-bottom: 10px; font-size: 15px; font-weight: 500; color: var(--ink); }
  .widget legend span { font-weight: 400; color: var(--soft); font-size: 13.5px; margin-left: 6px; }
  .choices { display: flex; flex-wrap: wrap; gap: 8px; }
  .choice { position: relative; }
  .choice input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
  .choice span { display: block; min-width: 96px; min-height: 48px; padding: 10px 14px; text-align: center; font-size: 14px; font-weight: 500; line-height: 1.25; color: var(--ink); background: #FFFFFF; border: 1px solid #C9CED1; border-radius: 6px; transition: border-color .2s, background .2s, color .2s; }
  .choice span small { display: block; font-weight: 400; font-size: 12.5px; color: var(--soft); }
  .choice input:hover + span { border-color: var(--ink); }
  .choice input:checked + span { background: var(--ink); border-color: var(--ink); color: #FFFFFF; }
  .choice input:checked + span small { color: #C9CED1; }
  .choice input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 2px; }
  .fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
  .fields label { display: block; font-size: 13.5px; font-weight: 500; color: var(--ink); margin-bottom: 6px; }
  .fields input, .fields select, .fields textarea { width: 100%; font: 400 16px/1.4 var(--sans); color: var(--ink); background: #FFFFFF; border: 1px solid #C9CED1; border-radius: 6px; padding: 11px 12px; }
  .fields input:focus, .fields select:focus, .fields textarea:focus { outline: 2px solid var(--blue); outline-offset: 1px; border-color: var(--blue); }
  .fields input[aria-invalid="true"] { border-color: #B3261E; }
  .fields .err { display: block; min-height: 1.2em; font-size: 13px; color: #B3261E; margin-top: 4px; }
  .fields .full { grid-column: 1 / -1; }
  .widget .submit { margin-top: 18px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
  .widget .privacy { margin: 12px 0 0; font-size: 13px; color: var(--soft); }
  .widget .privacy a { color: var(--ink); }
  .widget .status { margin: 14px 0 0; font-size: 14.5px; color: var(--ink); }
  .widget .status:not(:empty) { background: #E4F5FC; border-radius: 4px; padding: 12px 14px; }
  @media (max-width: 960px) {
    .ways3 .wrap, .book .wrap.grid { grid-template-columns: minmax(0, 1fr); }
    .ways3 .col, .ways3 .col + .col { padding: 30px 0; border-left: 0; }
    .ways3 .col + .col { border-top: 1px solid var(--line); }
    .book .wrap.grid { gap: 36px; }
    .widget { padding: 22px 18px; }
    .choice span { min-width: 84px; }
    .fields { grid-template-columns: minmax(0, 1fr); }
  }

/* ---- Policy and text pages ---- */
  .policy { padding-block: 96px 120px; }
  .policy .meta { margin: 0 0 40px; color: var(--soft); font-size: 15px; }
  .policy h2 { margin: 48px 0 12px; font-size: clamp(24px, 2.2vw, 30px); font-weight: 300; color: var(--ink); letter-spacing: -.015em; line-height: 1.2; }
  .policy h2:first-of-type { margin-top: 0; }
  .policy p, .policy li { max-width: 44em; }
  .policy ul { padding-left: 22px; }
  .policy li { margin: 6px 0; }
  .policy a:not(.btn) { color: var(--blue); }
  .page-hero.plain { background: var(--night); }
  .page-hero.plain::after { display: none; }
  @media (max-width: 960px) { .policy { padding-block: 64px 80px; } }

/* ---- Corner readout and progress line ---- */
/* Monitoring frame shared by every page: scroll-progress line under the header,
   a small monospace readout of the current section, and two corner brackets.
   The readout sits on a small dark chip so it reads over photos; the brackets use difference blending. */
.site-header::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%; transform: scaleX(var(--prog, 0)); transform-origin: left; background: linear-gradient(90deg, rgba(0,175,239,0) 0%, rgba(0,175,239,.55) 70%, #00AFEF 100%); pointer-events: none; }
.site-header::before { content: ""; position: absolute; bottom: -3px; left: -3px; transform: translateX(var(--prog-x, 0px)); width: 6px; height: 6px; border-radius: 50%; background: #00AFEF; box-shadow: 0 0 10px 2px rgba(0,175,239,.8); opacity: var(--prog-on, 0); transition: opacity .3s; pointer-events: none; }
.hud { position: fixed; right: max(30px, calc(env(safe-area-inset-right, 0px) + 30px)); bottom: 18px; z-index: 50; display: flex; align-items: baseline; gap: 14px; padding: 7px 10px 6px; border-radius: 2px; background: rgba(11,13,14,.84); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); font: 400 11px/1 "Geist Mono", ui-monospace, Consolas, monospace; letter-spacing: .12em; text-transform: uppercase; color: #E8EBED; pointer-events: none; }
.hud-n { color: #C9CED1; font-variant-numeric: tabular-nums; }
.hud.tick .hud-t { animation: hud-type .45s steps(8, end); }
@keyframes hud-type { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.hud-corner { position: fixed; bottom: 14px; width: 10px; height: 10px; border: 1px solid #FFFFFF; mix-blend-mode: difference; opacity: .55; pointer-events: none; z-index: 50; }
.hud-corner.bl { left: 14px; border-right: 0; border-top: 0; }
.hud-corner.br { right: 14px; border-left: 0; border-top: 0; }
@media (max-width: 960px) { .hud, .hud-corner { display: none; } }
@media (prefers-reduced-motion: reduce) { .hud.tick .hud-t { animation: none; } }

/* ---- Header menus, business review story, project cards, software list ---- */
/* Phone pill and "For clients" menu in the header, a split closing band
   (prospects / existing clients), lighter mist bands, project cards and a software list. */

/* Header: For clients menu + phone pill */
.site-header ul { gap: 30px; }
.site-header .clients { position: relative; }
.clients-btn { font: inherit; font-size: 16px; color: var(--ink); background: none; border: 0; padding: 10px 0; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.clients-btn svg { width: 12px; height: 12px; transition: transform .3s var(--ease); }
.clients.open .clients-btn svg { transform: rotate(180deg); }
.clients-menu { position: absolute; top: calc(100% + 10px); right: -24px; width: 340px; background: #FFFFFF; border: 1px solid var(--line); border-radius: 10px; padding: 8px; box-shadow: 0 24px 60px rgba(11,13,14,.14); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .25s ease, transform .3s var(--ease), visibility 0s linear .3s; z-index: 40; }
.clients-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.clients.open .clients-menu { opacity: 1; visibility: visible; transform: none; transition: opacity .25s ease, transform .3s var(--ease); }
@media (hover: hover) and (min-width: 961px) { .clients:hover .clients-menu { opacity: 1; visibility: visible; transform: none; transition: opacity .25s ease, transform .3s var(--ease); } }
.site-header .clients-menu a { display: block; padding: 12px 14px; border-radius: 6px; font-size: 15px; line-height: 1.35; }
.site-header .clients-menu a::after { display: none; }
.site-header .clients-menu a:hover { background: var(--mist); }
.clients-menu strong { display: block; font-weight: 500; color: var(--ink); }
.clients-menu span { display: block; font-size: 13.5px; color: var(--soft); margin-top: 2px; }
.clients-menu .all { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 6px; }
.site-header .phone { border: 1px solid var(--ink); border-radius: 999px; padding: 11px 18px; font-variant-numeric: tabular-nums; white-space: nowrap; transition: background .3s, color .3s; }
.site-header .phone::after { display: none; }
.site-header .phone:hover { background: var(--ink); color: #FFFFFF; }
.site-header .call-sm { border: 1px solid var(--ink); border-radius: 999px; padding: 9px 16px; }
.site-header .call-sm::after { display: none; }
.site-header .menu-panel .wrap { display: block; min-height: 0; }
.menu-panel .panel-label { margin: 18px 0 2px; font: 400 12px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--soft); }
@media (max-width: 1100px) and (min-width: 961px) { .site-header ul { gap: 22px; } .site-header .phone { padding: 11px 14px; } }

/* Mist band: lighter rhythm between the dark sections */
.mist { background: var(--mist); }
.services.mist { padding-top: 120px; }

/* Project cards */
.cases { padding-block: 130px 120px; }
.cases .h2 { font-size: clamp(34px, 3.8vw, 54px); margin-bottom: 18px; max-width: 16em; }
.cases .intro { margin: 0 0 44px; max-width: 40em; }
.case-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.case { border: 1px solid var(--line); border-radius: 10px; padding: 0 26px 26px; display: flex; flex-direction: column; background: #FFFFFF; }
.case .kind { align-self: flex-start; margin: -1px 0 22px; background: var(--ink); color: #FFFFFF; font: 400 11.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; padding: 9px 12px; border-radius: 0 0 6px 6px; }
.case h3 { margin: 0 0 18px; font-size: 23px; font-weight: 400; line-height: 1.2; color: var(--ink); letter-spacing: -.015em; }
.cases .note { margin: 22px 0 0; font-size: 14px; color: var(--soft); }

/* Software list */
.software { padding-block: 120px; }
.software .h2 { font-size: clamp(34px, 3.8vw, 54px); margin-bottom: 18px; max-width: 16em; }
.software .intro { margin: 0 0 40px; max-width: 40em; }
.sw-cols { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 32px; }
.sw-cols h3 { margin: 0 0 12px; padding-bottom: 10px; border-bottom: 1px solid var(--ink); font: 400 12px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.sw-cols ul { list-style: none; margin: 0; padding: 0; }
.sw-cols li { padding: 7px 0 7px 22px; position: relative; color: var(--ink); font-size: 16px; }
.sw-cols li::before { content: ""; position: absolute; left: 0; top: 1.15em; width: 12px; height: 2px; background: var(--cyan); }
.software .note { margin: 32px 0 0; font-size: 14px; color: var(--soft); }

/* Split closing band: prospects on the left, existing clients on the right */
.close-band { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); border-top: 1px solid var(--line); }
.close-band .start { padding: 120px 64px 110px max(40px, calc((100vw - 1280px) / 2 + 40px)); }
.close-band .start h2 { font-size: clamp(36px, 4.2vw, 58px); max-width: 12em; margin-bottom: 18px; }
.close-band .start p { margin: 0 0 34px; max-width: 30em; }
.close-band .row { display: flex; align-items: center; gap: 24px 36px; flex-wrap: wrap; }
.close-band .big { font-size: clamp(32px, 4vw, 56px); font-weight: 200; letter-spacing: -.03em; color: var(--ink); text-decoration: none; background: linear-gradient(var(--cyan), var(--cyan)) 0 100% / 0 2px no-repeat; transition: background-size .6s var(--ease); }
.close-band .big:hover { background-size: 100% 2px; }
.close-band .careers { margin: 56px 0 0; padding-top: 22px; border-top: 1px solid var(--line); font-size: 15.5px; max-width: 34em; }
.close-band .careers a { color: var(--blue); }
.close-band .careers h3 { margin: 0 0 8px; font-size: 22px; font-weight: 400; letter-spacing: -.01em; line-height: 1.3; color: var(--ink); }
.close-band .careers p { margin: 0; }
.close-band .clients-side { background: var(--night); color: var(--fog); padding: 120px max(40px, calc((100vw - 1280px) / 2 + 40px)) 110px 56px; }
.close-band .clients-side h2 { margin: 0 0 10px; color: #FFFFFF; font-size: clamp(28px, 2.8vw, 38px); font-weight: 200; letter-spacing: -.02em; line-height: 1.1; }
.close-band .clients-side > p { margin: 0 0 26px; }
.close-band .clients-side ul { list-style: none; margin: 0; padding: 0; }
.close-band .clients-side li { border-top: 1px solid rgba(255,255,255,.14); }
.close-band .clients-side li a { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 0; color: #FFFFFF; text-decoration: none; font-size: 17px; }
.close-band .clients-side li a span { color: #A3AAAE; font-size: 14px; display: block; }
.close-band .clients-side li a svg { width: 16px; height: 16px; flex: none; transition: transform .4s var(--ease); }
.close-band .clients-side li a:hover svg { transform: translateX(4px); }
.close-band .clients-side .note { margin: 18px 0 0; font-size: 13.5px; color: #A3AAAE; }

@media (max-width: 960px) {
  .site-header .hide-sm { display: none; }
  .case-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .cases, .software { padding-block: 80px 72px; }
  .services.mist { padding-top: 80px; }
  .sw-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }
  .close-band { grid-template-columns: minmax(0, 1fr); }
  .close-band .start { padding: 80px 20px 64px; }
  .close-band .clients-side { padding: 56px 20px 64px; }
}
@media (max-width: 420px) { .sw-cols { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 961px) { .site-header .call-sm { display: none; } }

/* Hover menu can be dismissed with Escape without moving the pointer (WCAG 1.4.13) */
.clients.dismissed .clients-menu, .clients.dismissed:hover .clients-menu { opacity: 0; visibility: hidden; transform: translateY(-6px); }
footer .hours { margin-top: 14px; }

/* Width/height attributes are set on every image to prevent layout shift; keep natural proportions. */
img { height: auto; }
a[href^="tel:"] { white-space: nowrap; }

/* ---- WordPress page templates ---- */
/* WordPress fit-up for the Meridian design. */
/* Let the sticky header stick to the page, not to its template-part wrapper. */
.wp-site-blocks > .wp-block-template-part:first-child, .wp-site-blocks > header.wp-block-template-part { display: contents; }
.wp-site-blocks { padding: 0; }
.wp-site-blocks > * { margin-block-start: 0; }
main.wp-block-group { margin: 0; }
/* Keep the header below the WordPress admin bar for signed-in users. */
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header { top: 46px; } }
/* WordPress's own skip link: visible on keyboard focus. */
.skip-link.screen-reader-text:focus { z-index: 100000; background: #FFFFFF; color: #0B0D0E; padding: 12px 18px; border-radius: 6px; box-shadow: 0 6px 24px rgba(0,0,0,.2); }
/* Page content written in the editor (privacy policy and any plain page). */
.policy .wp-block-post-content > * { margin-block: 0 16px; }
.policy .wp-block-post-content > h2 { margin: 48px 0 12px; }
.policy .wp-block-post-content > h2:first-child, .policy .wp-block-post-content > .meta + h2 { margin-top: 0; }
.policy .wp-block-post-content > .meta { margin-bottom: 40px; }
.policy .wp-block-post-title { margin: 0; }
.page-hero .wp-block-post-title { margin: 0; }

/* ---- Block versions of quote, address and definition-list styles ---- */
.owner p.quote { margin: 0 0 40px; font-size: clamp(32px, 4.2vw, 58px); font-weight: 300; line-height: 1.14; color: var(--ink); letter-spacing: -.025em; max-width: 15em; }
.local p.address { font-style: normal; color: var(--ink); margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line); }
.owner-card p.quote { margin: 0; font-size: clamp(28px, 3vw, 40px); font-weight: 300; line-height: 1.2; color: var(--ink); letter-spacing: -.02em; }
.place p.address { font-style: normal; color: var(--ink); margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line); }
.policy p.address { font-style: normal; color: var(--ink); }
.case .dl { margin: 0; font-size: 15.5px; line-height: 1.6; }
.case p.dt { font-weight: 500; color: var(--ink); }
.case p.dd { margin: 0 0 12px; }
.case p.dd:last-child { margin-bottom: 0; }
.wp-block-buttons.inline-link { margin-top: 26px; }

/* ---- Meridian on WordPress blocks ---- */
/* Buttons: the theme moves Meridian's button classes onto the link (see functions.php), so .btn rules apply. */
.wp-block-buttons { display: flex; flex-wrap: wrap; align-items: center; }
.wp-block-buttons > .wp-block-button { margin: 0; }
a.has-arrow::after { content: ""; display: inline-block; width: 14px; height: 14px; margin-left: 10px; vertical-align: -2px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5'%3E%3Cpath d='M2 8h11M9 4l4 4-4 4'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5'%3E%3Cpath d='M2 8h11M9 4l4 4-4 4'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .4s var(--ease, ease); }
a.has-arrow:hover::after { transform: translateX(4px); }
a.has-download::after { content: ""; display: inline-block; width: 14px; height: 14px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5'%3E%3Cpath d='M8 2v10M4 8l4 4 4-4M2 14h12'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5'%3E%3Cpath d='M8 2v10M4 8l4 4 4-4M2 14h12'/%3E%3C/svg%3E") center / contain no-repeat; }
.btn.has-arrow::after, .link.has-arrow::after { margin-left: 0; }
/* Images: blocks wrap images in <figure>; keep Meridian's sizing. */
main .wp-block-image img { height: auto; }
.hero figure.bg, .page-hero figure.bg { margin: 0; }
.hero .bg img, .page-hero .bg img { height: 100%; }
.strip > .wp-block-image, .local .pic { margin: 0; }
.strip .wp-block-image img { height: 124%; }
.local .pic img { height: 120%; }
/* Lists keep Meridian's own spacing */
main ul.wp-block-list, main ol.wp-block-list { box-sizing: border-box; }
.dl { margin: 0; }
p.dt { margin: 0; }
p.dd { margin: 0 0 12px; }
p.dd:last-child { margin-bottom: 0; }
p.quote { margin-top: 0; }
p.address { font-style: normal; margin-bottom: 0; }
/* Title + description list items: one editable item, same look */
.rules li, .steps li { font-size: 16px; }
.who li { font-size: 15.5px; }
.steps li { display: block; position: relative; padding-left: 44px; }
.steps li::before { position: absolute; left: 0; top: 16px; }
.terms .steps li::before { top: 16px; }
/* "Already a client?" links: title with a smaller description and an arrow */
.close-band .clients-side li a { display: block; position: relative; padding: 16px 32px 16px 0; }
.close-band .clients-side li a em { display: block; font-style: normal; color: #A3AAAE; font-size: 14px; }
.close-band .clients-side li a::after { content: ""; position: absolute; right: 0; top: 50%; width: 16px; height: 16px; margin-top: -8px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5'%3E%3Cpath d='M2 8h11M9 4l4 4-4 4'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5'%3E%3Cpath d='M2 8h11M9 4l4 4-4 4'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .4s var(--ease, ease); }
.close-band .clients-side li a:hover::after { transform: translateX(4px); }
/* Photo strip caption keeps the page width */
.strip p.wrap { margin-inline: auto; }
/* A link next to a paragraph in a flex row (e.g. "Sound familiar?" close) */
.wp-block-buttons:only-child { display: flex; }

/* ---- One-off adjustments from the design ----
   Each class is used once. The names are stored in saved page content, so they stay as they are. */
.ccs-s1 { margin:28px 0 0 !important }                    /* Home, About band: space above "More about CCS, Inc." */
.ccs-s2 img { object-position: 75% 50% !important }       /* About hero: photo framing */
.ccs-s3 img { filter:none !important }                    /* About, Springfield place: photo in full color */
.ccs-s4 { margin-bottom:28px !important }                 /* About, Careers: space under the intro */
.ccs-s5 img { object-position: 70% 30% !important }       /* Support hero: photo framing */
.ccs-s6 { margin-top:32px !important }                    /* Support, Remote support: space above the download button */
.ccs-s7 { font-size:clamp(40px,5vw,68px) !important }     /* Support, Book a call: smaller heading */

/* ---- Agreement, RTP, booking and form pages ---- */
.policy .wp-block-group > h3, .policy h3.wp-block-heading { margin: 40px 0 10px; font-size: 21px; font-weight: 500; color: var(--ink); letter-spacing: -.01em; line-height: 1.3; }
.policy h4.wp-block-heading { margin: 24px 0 8px; font: 400 12px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--gray); }
.policy .legal-part { margin: 72px 0 8px; padding-top: 20px; border-top: 1px solid var(--ink); font: 400 13px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
.policy .legal-part:first-of-type { margin-top: 8px; }
.policy p.cl { padding-left: 2.6em; text-indent: -2.6em; margin: 0 0 12px; }
.policy p.cl strong:first-child { display: inline-block; min-width: 2.6em; text-indent: 0; font-weight: 500; color: var(--ink); }
.policy .sub { margin: 0 0 12px 2.6em; }
.policy .def p { margin: 0 0 10px; }
.policy .def p strong { font-weight: 500; color: var(--ink); }
.policy .caps { text-transform: none; font-weight: 500; color: var(--ink); }
.policy .legal-box { margin-top: 72px; padding: 32px; background: var(--mist); border-radius: 4px; }
.policy .legal-box h3.wp-block-heading { margin-top: 0; }
.policy .legal-box li { margin: 0 0 14px; }
.policy .legal-box li strong { display: block; font-weight: 500; color: var(--ink); }
.rtp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin: 24px 0 40px; }
.rtp-grid > .wp-block-group { border-top: 1px solid var(--ink); padding-top: 16px; }
.rtp-grid.muted > .wp-block-group { border-top-color: var(--line); }
.rtp-grid h3.wp-block-heading { margin-top: 0 !important; }
.rtp-grid ul { padding-left: 20px; }
.policy .note { padding: 20px 24px; border-left: 3px solid var(--cyan); background: var(--mist); color: var(--ink); }
.embed-frame iframe { display: block; width: 100%; min-height: 800px; border: 0; }
.embed-frame { margin: 0; }
@media (max-width: 960px) { .rtp-grid { grid-template-columns: minmax(0, 1fr); } .policy .legal-box { padding: 24px 20px; } .policy p.cl { padding-left: 2.2em; text-indent: -2.2em; } .policy p.cl strong:first-child { min-width: 2.2em; } .policy .sub { margin-left: 1.2em; } }
/* A section label left blank in the editor shows nothing (no stray dot). */
.gutter:empty { visibility: hidden; }
@media (max-width: 960px) { .gutter:empty, .gutter-spacer { display: none; } }

/* Footer legal links */
footer .legal .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; }
footer .legal nav { display: flex; flex-wrap: wrap; gap: 6px 20px; }
footer .legal nav a { color: #A3AAAE; }
footer .legal nav a:hover { color: #FFFFFF; }

/* Tables in legal pages */
.policy .legal-table { margin: 20px 0 32px; overflow-x: auto; }
.policy .legal-table table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.5; }
.policy .legal-table th { padding: 10px 12px; border-bottom: 1px solid var(--ink); font: 500 12px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); text-align: left; vertical-align: bottom; }
.policy .legal-table th small { display: block; text-transform: none; letter-spacing: 0; color: var(--gray); }
.policy .legal-table td { padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.policy .legal-table td:first-child { color: var(--ink); }
@media (max-width: 960px) { .policy .legal-table table { font-size: 14px; min-width: 560px; } }

/* Contact page map */
.contact-map { margin-top: 40px; border-top: 1px solid var(--line); padding-top: 24px; }
.contact-map iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 4px; background: var(--mist); }

/* Accessibility fixes (WCAG 2.2 AA audit, November 14, 2026) */
.skip-link.screen-reader-text:focus { position: fixed; top: 12px; left: 16px; width: auto; height: auto; clip: auto; clip-path: none; overflow: visible; white-space: normal; outline: 2px solid var(--blue); outline-offset: 2px; }
.policy a { overflow-wrap: anywhere; }
.contact-map iframe:focus-visible, .policy .legal-table:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }