/* =========================================================================
   Sarquist Media - inner pages.
   Loaded after site.css. Same tokens, page level components only.
   ========================================================================= */

.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Breadcrumbs ---------- */
.crumbs { margin-bottom: 30px; }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.crumbs li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-faint);
}
.crumbs li + li::before { content: "/"; opacity: 0.4; }
.crumbs a:hover { color: var(--ink); }

/* ---------- Page hero ---------- */
.phero {
    padding-top: calc(var(--nav-h) + clamp(48px, 7vw, 92px));
    padding-bottom: clamp(40px, 6vw, 72px);
}
.phero__title {
    font-size: clamp(2.25rem, 5.6vw, 4.5rem);
    letter-spacing: -0.045em;
    max-width: 17ch;
    margin-bottom: 22px;
}
.phero__title--post { max-width: 22ch; font-size: clamp(2rem, 4.4vw, 3.5rem); }
.phero__tagline {
    font-family: var(--font-display);
    font-size: clamp(1.125rem, 1.8vw, 1.5rem);
    letter-spacing: -0.03em;
    margin-bottom: 16px;
}
.phero__lede { font-size: clamp(1rem, 1.3vw, 1.1875rem); color: var(--ink-muted); max-width: 58ch; }
.phero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.phero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 330px);
    gap: clamp(28px, 5vw, 68px);
    align-items: start;
}
.phero__logo { filter: grayscale(1); margin-bottom: 22px; max-height: 46px; width: auto; }
.phero--center { text-align: center; padding-bottom: clamp(80px, 12vw, 160px); }
.phero--center .phero__title,
.phero--center .phero__lede { max-width: none; margin-inline: auto; }
.phero--center .phero__actions { justify-content: center; }
.phero--center .eyebrow { justify-content: center; }

.thanks { max-width: 640px; margin-inline: auto; padding-top: 40px; }
.thanks__mark {
    display: grid;
    place-items: center;
    width: 74px; height: 74px;
    border-radius: 50%;
    border: 1px solid var(--line);
    margin: 0 auto 30px;
    background: var(--paper-raised);
}

/* ---------- Spec panel ---------- */
.spec {
    background: rgba(251, 250, 248, 0.74);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-lg);
    padding: 26px;
    box-shadow: var(--shadow-md);
    position: sticky;
    top: calc(var(--nav-h) + 20px);
}
.spec__row { padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid var(--line-hair); }
.spec__row:last-of-type { border-bottom: 0; }
.spec__label {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin-bottom: 7px;
}
.spec__value { font-family: var(--font-display); font-size: 1.375rem; font-weight: 500; letter-spacing: -0.035em; display: block; }
.spec__note { display: block; font-size: 0.75rem; color: var(--ink-muted); margin-top: 5px; }
.spec__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.spec__chips li {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    padding: 4px 10px;
    border: 1px solid var(--line-soft);
    border-radius: 100px;
    color: var(--ink-muted);
}
.spec .btn { margin-top: 20px; }

.ticks { display: grid; gap: 11px; margin-top: 8px; }
.ticks li { display: flex; gap: 10px; align-items: flex-start; font-size: 0.875rem; }
.ticks .icon { margin-top: 3px; flex: none; }

/* ---------- Stats strip ---------- */
.stats-strip { padding-block: clamp(30px, 4vw, 46px); border-block: 1px solid var(--line-soft); }
.stats-strip--dark { background: var(--ink); color: var(--paper); border-color: transparent; }
.stats-strip__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: clamp(20px, 3vw, 40px);
}
.stats-strip__list strong {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 3.4vw, 2.75rem);
    font-weight: 600;
    letter-spacing: -0.05em;
    line-height: 1;
}
.stats-strip__list span { display: block; margin-top: 9px; font-size: 0.8125rem; color: var(--ink-muted); }
.stats-strip--dark .stats-strip__list span { color: rgba(246, 245, 242, 0.6); }
.stats-strip__list em { display: block; font-style: normal; font-size: 0.75rem; margin-top: 5px; color: var(--ink-faint); }
.stats-strip--dark .stats-strip__list em { color: rgba(246, 245, 242, 0.4); }

/* ---------- Split layout ---------- */
.split {
    display: grid;
    grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
    gap: clamp(28px, 5vw, 84px);
    align-items: start;
}
.split__title { font-size: clamp(1.5rem, 2.6vw, 2.25rem); position: sticky; top: calc(var(--nav-h) + 24px); }

/* ---------- Prose ---------- */
.prose { color: var(--ink-soft); font-size: 1.0625rem; line-height: 1.75; max-width: 68ch; }
.prose > * + * { margin-top: 1.15em; }
.prose h2 {
    font-size: clamp(1.375rem, 2.2vw, 1.875rem);
    margin-top: 2.2em;
    margin-bottom: 0.55em;
    scroll-margin-top: calc(var(--nav-h) + 28px);
}
.prose h3 { font-size: 1.1875rem; margin-top: 1.9em; margin-bottom: 0.45em; }
.prose h4 { font-size: 1rem; margin-top: 1.6em; }
.prose p { margin-top: 1.1em; }
.prose a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: var(--line); }
.prose a:hover { text-decoration-color: var(--ink); }
.prose ul, .prose ol { display: grid; gap: 10px; margin-top: 1.1em; padding-left: 4px; }
.prose ul li { padding-left: 24px; position: relative; }
.prose ul li::before {
    content: "";
    position: absolute;
    left: 4px; top: 0.72em;
    width: 7px; height: 1px;
    background: var(--ink);
    opacity: 0.5;
}
.prose ol { counter-reset: n; }
.prose ol li { padding-left: 32px; position: relative; counter-increment: n; }
.prose ol li::before {
    content: counter(n, decimal-leading-zero);
    position: absolute;
    left: 0; top: 0;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--ink-faint);
}
.prose blockquote {
    margin: 1.8em 0;
    padding: 22px 26px;
    border-left: 2px solid var(--ink);
    background: rgba(13, 13, 14, 0.03);
    border-radius: 0 var(--r-md) var(--r-md) 0;
    font-family: var(--font-display);
    font-size: 1.125rem;
    letter-spacing: -0.02em;
}
.prose img { border-radius: var(--r-md); margin-block: 1.6em; }
.prose code {
    font-family: var(--font-mono);
    font-size: 0.875em;
    background: rgba(13, 13, 14, 0.055);
    padding: 2px 6px;
    border-radius: 4px;
}
.prose pre {
    background: var(--ink);
    color: var(--paper);
    padding: 20px 22px;
    border-radius: var(--r-md);
    overflow-x: auto;
    font-size: 0.875rem;
}
.prose pre code { background: none; padding: 0; color: inherit; }
.prose hr { border: 0; border-top: 1px solid var(--line-soft); margin-block: 2.4em; }
.prose table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; margin-block: 1.6em; }
.prose th, .prose td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line-soft); }
.prose th { font-family: var(--font-display); font-weight: 600; }
.prose--article { font-size: 1.125rem; }
.doc { margin-inline: auto; }

/* ---------- Services list rows ---------- */
.svc-band { padding-block: clamp(44px, 5vw, 70px); }
.svc-band__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 20px;
    padding-bottom: 18px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--line-soft);
}
.svc-band__title { font-size: clamp(1.5rem, 2.4vw, 2rem); }
.svc-band__count { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); }
.srow { border-bottom: 1px solid var(--line-hair); }
.srow__link {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto 28px;
    gap: 22px;
    align-items: center;
    padding: 26px 12px 26px 8px;
    margin-inline: -8px;
    border-radius: var(--r-md);
    transition: background-color 0.35s var(--ease), padding-left 0.35s var(--ease);
}
.srow__link:hover { background: rgba(13, 13, 14, 0.035); padding-left: 18px; }
.srow__icon { color: var(--ink-muted); }
.srow__title { font-size: 1.25rem; margin-bottom: 5px; }
.srow__copy { font-size: 0.9375rem; color: var(--ink-muted); max-width: 62ch; }
.srow__meta { text-align: right; display: grid; gap: 3px; }
.srow__price { font-family: var(--font-display); font-size: 1rem; font-weight: 500; }
.srow__time { font-family: var(--font-mono); font-size: 0.6875rem; color: var(--ink-faint); letter-spacing: 0.08em; }
.srow__arrow { transition: transform 0.35s var(--ease); color: var(--ink-muted); }
.srow__link:hover .srow__arrow { transform: translateX(5px); color: var(--ink); }

/* ---------- Combo ---------- */
.combo {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: clamp(28px, 5vw, 72px);
    align-items: start;
}
.combo__list { display: grid; gap: 1px; background: var(--line-soft); border-block: 1px solid var(--line-soft); }
.combo__list li { background: var(--paper); padding: 22px 4px; display: grid; gap: 5px; }
.combo__list strong { font-family: var(--font-display); font-size: 1.0625rem; font-weight: 500; }
.combo__list span { font-size: 0.9375rem; color: var(--ink-muted); }

/* ---------- Deliverables ---------- */
.deliver__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(272px, 1fr));
    gap: 14px 32px;
}
.deliver__grid li {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 16px 0;
    border-bottom: 1px solid var(--line-hair);
    font-size: 0.9375rem;
}
.deliver__grid .icon { margin-top: 3px; flex: none; }

/* ---------- Feature grid ---------- */
.feat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
    gap: 1px;
    background: var(--line-soft);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-lg);
    overflow: hidden;
}
.feat { background: var(--paper-raised); padding: 30px 26px 34px; }
.feat__num { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.14em; color: var(--ink-faint); display: block; margin-bottom: 24px; }
.feat h3 { font-size: 1.125rem; margin-bottom: 9px; }
.feat p { font-size: 0.9375rem; color: var(--ink-muted); }

/* ---------- Timeline ---------- */
.timeline { position: relative; padding-left: 30px; }
.timeline::before { content: ""; position: absolute; left: 5px; top: 8px; bottom: 8px; width: 1px; background: var(--line-soft); }
.tline { position: relative; padding-bottom: 44px; }
.tline:last-child { padding-bottom: 0; }
.tline__dot { position: absolute; left: -30px; top: 7px; width: 11px; height: 11px; border-radius: 50%; background: var(--paper); border: 1.5px solid var(--ink); }
.tline__num { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); display: block; margin-bottom: 9px; }
.tline h2, .tline h3 { font-size: clamp(1.25rem, 2vw, 1.625rem); margin-bottom: 10px; }
.tline p { color: var(--ink-muted); max-width: 62ch; }
.tline__meta {
    display: inline-block;
    margin-top: 14px;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 5px 12px;
    border: 1px solid var(--line-soft);
    border-radius: 100px;
    color: var(--ink-muted);
}
.timeline--wide .tline { padding-bottom: 56px; }

/* ---------- Case cards ---------- */
.case-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(272px, 1fr)); gap: 26px; }
.ccard__media { border-radius: var(--r-md); overflow: hidden; aspect-ratio: 7 / 5; background: var(--paper-deep); margin-bottom: 18px; }
.ccard__media img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); transition: transform 0.8s var(--ease), filter 0.5s var(--ease); }
.ccard:hover .ccard__media img { transform: scale(1.045); filter: grayscale(0.4); }
.ccard__client { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 9px; }
.ccard__title { font-size: 1.1875rem; margin-bottom: 14px; }
.ccard:hover .ccard__title { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.ccard__metrics { display: flex; gap: 24px; padding-top: 14px; border-top: 1px solid var(--line-hair); }
.ccard__metrics strong { display: block; font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; letter-spacing: -0.04em; }
.ccard__metrics span { font-size: 0.75rem; color: var(--ink-muted); }

/* ---------- Case study body ---------- */
.cs__facts { display: flex; flex-wrap: wrap; gap: 34px; margin: 34px 0 0; padding-top: 26px; border-top: 1px solid var(--line-soft); }
.cs__facts dt { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 6px; }
.cs__facts dd { margin: 0; font-family: var(--font-display); font-size: 1.0625rem; font-weight: 500; }
.cs__hero { margin: 0; padding-block: clamp(20px, 3vw, 34px); }
.cs__hero img { width: 100%; border-radius: var(--r-xl); aspect-ratio: 16 / 9; object-fit: cover; background: var(--paper-deep); }
.cs__body { display: grid; grid-template-columns: minmax(0, 262px) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.cs__nav { position: sticky; top: calc(var(--nav-h) + 22px); }
.cs__nav ul { display: grid; gap: 8px; margin-bottom: 30px; }
.cs__nav a { font-size: 0.9375rem; color: var(--ink-muted); padding-left: 13px; border-left: 1px solid var(--line-soft); display: block; padding-block: 3px; transition: color 0.25s, border-color 0.25s; }
.cs__nav a:hover, .cs__nav a.is-current { color: var(--ink); border-color: var(--ink); }
.cs__stack { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 26px; }
.cs__stack li { font-family: var(--font-mono); font-size: 0.6875rem; padding: 4px 10px; border: 1px solid var(--line-soft); border-radius: 100px; color: var(--ink-muted); }
.cs__block + .cs__block { margin-top: clamp(44px, 6vw, 76px); }
.cs__h2 { font-size: clamp(1.5rem, 2.6vw, 2.125rem); margin-bottom: 20px; scroll-margin-top: calc(var(--nav-h) + 28px); }
.cs__gallery { display: grid; gap: 22px; margin-top: clamp(40px, 5vw, 64px); }
.cs__gallery figure { margin: 0; }
.cs__gallery img { width: 100%; border-radius: var(--r-lg); object-fit: cover; background: var(--paper-deep); }
.cs__gallery figcaption { margin-top: 11px; font-size: 0.8125rem; color: var(--ink-muted); }

.pullquote { margin: clamp(40px, 5vw, 64px) 0; padding: 34px 0 0; border-top: 1px solid var(--line); }
.pullquote blockquote { margin: 0 0 22px; font-family: var(--font-display); font-size: clamp(1.25rem, 2.4vw, 1.875rem); letter-spacing: -0.03em; line-height: 1.35; }
.pullquote figcaption strong { display: block; font-size: 0.9375rem; }
.pullquote figcaption span { font-size: 0.8125rem; color: var(--ink-muted); }
.pullquote--wide { max-width: 900px; margin-inline: auto; text-align: center; border-top: 0; }
.pullquote--wide blockquote { font-size: clamp(1.5rem, 3vw, 2.375rem); }

/* ---------- Client cards ---------- */
.client-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(288px, 1fr)); gap: 20px; }
.clcard a {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 26px;
    border: 1px solid var(--line-soft);
    border-radius: var(--r-lg);
    background: rgba(251, 250, 248, 0.66);
    backdrop-filter: blur(10px);
    transition: transform 0.5s var(--ease), border-color 0.4s var(--ease), box-shadow 0.5s var(--ease);
}
.clcard a:hover { transform: translateY(-4px); border-color: var(--line); box-shadow: var(--shadow-md); }
.clcard__top { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 26px; }
.clcard__logo { filter: grayscale(1); max-height: 34px; width: auto; }
.clcard__mark {
    display: grid; place-items: center;
    width: 44px; height: 44px;
    border-radius: 12px;
    background: var(--ink);
    color: var(--paper);
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: -0.04em;
}
.clcard__badge { font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.12em; text-transform: uppercase; padding: 4px 10px; border: 1px solid var(--line-soft); border-radius: 100px; color: var(--ink-muted); }
.clcard__name { font-size: 1.25rem; margin-bottom: 5px; }
.clcard__industry { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.08em; color: var(--ink-faint); margin-bottom: 14px; }
.clcard__copy { font-size: 0.875rem; color: var(--ink-muted); margin-bottom: 24px; }
.clcard__foot {
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid var(--line-hair);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-muted);
}

/* ---------- Related tiles ---------- */
.rel-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(228px, 1fr));
    gap: 1px;
    background: var(--line-soft);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-lg);
    overflow: hidden;
}
.rel { background: var(--paper-raised); padding: 24px 22px 22px; display: flex; flex-direction: column; gap: 7px; transition: background-color 0.35s var(--ease); }
.rel:hover { background: var(--paper-deep); }
.rel__icon { color: var(--ink-muted); margin-bottom: 8px; }
.rel strong { font-family: var(--font-display); font-size: 1rem; font-weight: 500; }
.rel__copy { font-size: 0.8125rem; color: var(--ink-muted); }
.rel__arrow { margin-top: auto; padding-top: 16px; color: var(--ink-muted); transition: transform 0.35s var(--ease); }
.rel:hover .rel__arrow { transform: translateX(4px); color: var(--ink); }

/* ---------- Chips and filters ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 34px; }
.chip { cursor: pointer; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip span {
    display: inline-block;
    padding: 8px 16px;
    border: 1px solid var(--line-soft);
    border-radius: 100px;
    font-size: 0.875rem;
    transition: border-color 0.25s, background-color 0.25s, color 0.25s;
}
.chip:hover span { border-color: var(--ink); }
.chip.is-on span { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.chip input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 3px; }

.pillcloud { display: flex; flex-wrap: wrap; gap: 8px; }
.pillcloud--center { justify-content: center; margin-top: 40px; }
.pillcloud a {
    display: inline-block;
    padding: 8px 16px;
    border: 1px solid var(--line-soft);
    border-radius: 100px;
    font-size: 0.875rem;
    color: var(--ink-muted);
    transition: border-color 0.25s, color 0.25s;
}
.pillcloud a:hover { border-color: var(--ink); color: var(--ink); }

/* ---------- Blog list ---------- */
.search {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 34px;
    max-width: 520px;
    padding: 6px 6px 6px 16px;
    border: 1px solid var(--line);
    border-radius: 100px;
    background: var(--paper-raised);
}
.search .icon { color: var(--ink-faint); flex: none; }
.search input { flex: 1; border: 0; background: none; outline: none; padding: 8px 0; font-size: 0.9375rem; min-width: 0; }
.search .btn { padding: 10px 20px; }
.cats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.cat {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    border: 1px solid var(--line-soft);
    border-radius: 100px;
    font-size: 0.875rem;
    transition: border-color 0.25s, background-color 0.25s, color 0.25s;
}
.cat span { font-family: var(--font-mono); font-size: 0.6875rem; color: var(--ink-faint); }
.cat:hover { border-color: var(--ink); }
.cat.is-on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.cat.is-on span { color: rgba(246, 245, 242, 0.6); }
.journal__grid--page { gap: 36px 28px; }
.pcard__date { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); margin-top: 12px; }
.results-count { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--ink-muted); margin-bottom: 26px; }
.empty { font-size: 1.0625rem; color: var(--ink-muted); text-align: center; padding-block: 60px; }
.empty a { text-decoration: underline; text-underline-offset: 3px; }
.pager { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 56px; }
.pager__item {
    display: grid;
    place-items: center;
    min-width: 42px;
    height: 42px;
    padding-inline: 12px;
    border: 1px solid var(--line-soft);
    border-radius: 100px;
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    transition: border-color 0.25s, background-color 0.25s, color 0.25s;
}
.pager__item:hover { border-color: var(--ink); }
.pager__item.is-on { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* ---------- Post ---------- */
.byline { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--line-soft); }
.byline__who { display: flex; align-items: center; gap: 12px; }
.byline__avatar { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--ink); color: var(--paper); font-family: var(--font-display); font-weight: 600; }
.byline__who strong { display: block; font-size: 0.9375rem; font-weight: 500; }
.byline__who em { font-style: normal; font-size: 0.8125rem; color: var(--ink-muted); }
.byline__meta { display: flex; gap: 20px; font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); }
.post__layout { display: grid; grid-template-columns: minmax(0, 232px) minmax(0, 1fr); gap: clamp(28px, 5vw, 76px); align-items: start; }
.post__aside { position: sticky; top: calc(var(--nav-h) + 22px); }
.post__toc ul { display: grid; gap: 8px; margin-bottom: 34px; }
.post__toc a { font-size: 0.875rem; color: var(--ink-muted); padding-left: 13px; border-left: 1px solid var(--line-soft); display: block; padding-block: 3px; transition: color 0.25s, border-color 0.25s; }
.post__toc a:hover, .post__toc a.is-current { color: var(--ink); border-color: var(--ink); }
.post__share ul { display: flex; flex-wrap: wrap; gap: 7px; }
.post__share a, .post__share button {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
    padding: 6px 13px;
    border: 1px solid var(--line-soft);
    border-radius: 100px;
    background: none;
    cursor: pointer;
    color: var(--ink-muted);
    transition: border-color 0.25s, color 0.25s;
}
.post__share a:hover, .post__share button:hover { border-color: var(--ink); color: var(--ink); }
.tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 44px; padding-top: 26px; border-top: 1px solid var(--line-soft); }
.tags li { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.06em; padding: 5px 12px; border-radius: 100px; background: rgba(13, 13, 14, 0.05); color: var(--ink-muted); }
.post__faq { margin-top: clamp(44px, 6vw, 72px); }
.post__faq h2 { font-size: clamp(1.375rem, 2.2vw, 1.875rem); margin-bottom: 20px; }
.post__cta { margin-top: clamp(44px, 6vw, 72px); padding: 36px 34px; border-radius: var(--r-xl); background: var(--ink); color: var(--paper); }
.post__cta h2 { font-size: 1.625rem; margin-bottom: 10px; }
.post__cta p { color: rgba(246, 245, 242, 0.66); margin-bottom: 24px; max-width: 48ch; }
.post__cta .btn--solid { background: var(--paper); color: var(--ink); }
.post__cta .btn--solid:hover { background: #fff; }

/* ---------- Contact ---------- */
.contact__grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr); gap: clamp(30px, 5vw, 72px); align-items: start; }
.form { display: grid; gap: 20px; }
.form__row--two { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; }
.field { display: grid; gap: 8px; }
.field label { font-family: var(--font-display); font-size: 0.875rem; font-weight: 500; }
.field label span { color: var(--ink-faint); }
.field input, .field select, .field textarea {
    width: 100%;
    padding: 13px 16px;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--paper-raised);
    font-size: 0.9375rem;
    outline: none;
    transition: border-color 0.25s var(--ease), background-color 0.25s var(--ease);
}
.field textarea { resize: vertical; min-height: 130px; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--ink); background: var(--paper-pure); }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-faint); }
.field select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236c6c72' stroke-width='1.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 40px;
}
.field__error { font-size: 0.8125rem; color: var(--ink); font-weight: 500; }
.form__note { font-size: 0.8125rem; color: var(--ink-muted); }
.form__note a { text-decoration: underline; text-underline-offset: 3px; }
.alert { padding: 18px 20px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--paper-raised); margin-bottom: 26px; }
.alert strong { display: block; margin-bottom: 7px; font-family: var(--font-display); }
.alert ul { display: grid; gap: 5px; font-size: 0.875rem; color: var(--ink-muted); }
.panel--static { position: static; margin-bottom: 26px; }
.panel--static a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line); }
.promise h2 { font-size: 1.25rem; margin-bottom: 20px; }
.promise ol { display: grid; gap: 20px; }
.promise li { display: flex; gap: 14px; }
.promise li span { font-family: var(--font-mono); font-size: 0.6875rem; color: var(--ink-faint); padding-top: 3px; }
.promise strong { display: block; font-family: var(--font-display); font-size: 0.9375rem; font-weight: 500; margin-bottom: 3px; }
.promise p { font-size: 0.875rem; color: var(--ink-muted); }

/* ---------- Promo band ---------- */
.promo {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
    gap: clamp(26px, 4vw, 56px);
    align-items: center;
    padding: clamp(28px, 4vw, 48px);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-xl);
    background: rgba(251, 250, 248, 0.7);
    backdrop-filter: blur(10px);
}
.promo__title { font-size: clamp(1.5rem, 2.6vw, 2.125rem); margin-bottom: 12px; }
.promo__copy { color: var(--ink-muted); margin-bottom: 24px; max-width: 52ch; }
.promo__meta { display: grid; gap: 20px; }
.promo__meta span { display: block; font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 5px; }
.promo__meta strong { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; letter-spacing: -0.04em; }

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
    .phero__grid { grid-template-columns: minmax(0, 1fr); }
    .spec { position: static; max-width: 420px; }
    .split { grid-template-columns: minmax(0, 1fr); }
    .split__title { position: static; }
    .cs__body { grid-template-columns: minmax(0, 1fr); }
    .cs__nav { position: static; }
    .post__layout { grid-template-columns: minmax(0, 1fr); }
    .post__aside { position: static; display: flex; flex-wrap: wrap; gap: 34px; }
    .contact__grid { grid-template-columns: minmax(0, 1fr); }
    .combo { grid-template-columns: minmax(0, 1fr); }
    .promo { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 700px) {
    .srow__link { grid-template-columns: 34px minmax(0, 1fr) 22px; gap: 14px; }
    .srow__meta { grid-column: 2 / -1; text-align: left; display: flex; gap: 14px; align-items: baseline; }
    .cs__facts { gap: 22px; }
    .byline { flex-direction: column; align-items: flex-start; }
}