/* Shared styles for inner pages: offerings, trust, company, contact. */

/* ------------------------------------------------------------------ page hero tweaks */
.page-hero { background: radial-gradient(ellipse 90% 80% at 70% 30%, #17263D 0%, #0F1B2D 45%, #0A1220 80%, #070D17 100%); }
.page-hero h1 { max-width: 13em; }
.page-hero .lede { max-width: 36em; }
.page-hero .pixels { --px: 12px; --gap: 5px; --cols: 9; right: max(var(--gutter), calc((100vw - 1400px) / 2)); top: calc(var(--nav-h) + 12px); opacity: 0.8; z-index: 1; }
@media (max-width: 760px) { .page-hero .pixels { display: none; } }

.anchor-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 44px; }
.anchor-nav a { display: inline-flex; align-items: center; height: 40px; padding: 0 18px; border-radius: 999px; font-size: 0.94rem; font-weight: 500; color: var(--mist); box-shadow: inset 0 0 0 1px var(--night-line-strong); transition: color 0.2s, box-shadow 0.2s, background 0.2s; }
.anchor-nav a:hover { color: var(--cream); box-shadow: inset 0 0 0 1px var(--sky); background: rgba(142, 219, 255, 0.06); }

/* ------------------------------------------------------------------ split intro (heading left, copy right) */
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(36px, 6vw, 96px); align-items: start; }
.split .body-copy + .body-copy { margin-top: 18px; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ tiers */
.tiers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.tier { position: relative; display: flex; flex-direction: column; padding: 30px 26px 28px; border-radius: var(--radius-lg); background: #fff; box-shadow: 0 0 0 1px var(--paper-line), 0 1px 2px rgba(15, 23, 42, 0.04); transition: transform 0.5s var(--ease-out), box-shadow 0.4s; }
.tier:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px #C9D3DE, 0 30px 60px -36px rgba(15, 23, 42, 0.35); }
.tier .tier-mark { display: flex; gap: 4px; margin-bottom: 26px; }
.tier .tier-mark i { width: 10px; height: 10px; background: var(--paper-line); }
.tier .tier-mark i.on { background: var(--blue); }
.tier .tier-mark i.on.aqua { background: var(--aqua); }
.tier .tier-mark i.on.indigo { background: var(--indigo); }
.tier h3 { font-size: 1.6rem; }
.tier .fit { margin-top: 8px; color: var(--paper-muted); font-size: 0.92rem; }
.tier p { margin-top: 18px; color: var(--paper-body); font-size: 0.98rem; }
.tier .check-list { margin-top: 20px; font-size: 0.94rem; gap: 10px; }
.tier .quote-note { margin-top: auto; padding-top: 22px; font-size: 0.88rem; color: var(--paper-muted); border-top: 1px solid var(--paper-line); margin-top: 24px; }
.tier.featured { background: var(--paper-ink); color: var(--cream); box-shadow: 0 30px 70px -36px rgba(15, 23, 42, 0.6); }
.tier.featured p, .tier.featured .check-list li { color: var(--mist); }
.tier.featured .fit, .tier.featured .quote-note { color: var(--fog); border-color: var(--night-line-strong); }
.tier.featured .check-list li::before { border-color: var(--aqua); }
.tier.featured .tier-mark i { background: rgba(255, 255, 255, 0.12); }
@media (max-width: 1100px) { .tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .tiers { grid-template-columns: 1fr; } }

.includes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; margin-top: 28px; }
.includes li { padding: 14px 0; border-top: 1px solid var(--paper-line); }
@media (max-width: 680px) { .includes { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ stepped timeline (onboarding, contact next steps) */
.steps { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 28px; }
.steps::before { content: ''; position: absolute; left: 0; right: 0; top: 23px; height: 2px; background: var(--night-line-strong); }
.steps::after { content: ''; position: absolute; left: 0; right: 0; top: 23px; height: 2px; background: linear-gradient(90deg, var(--aqua), var(--blue)); transform-origin: left; transform: scaleX(0); transition: transform 2.2s var(--ease-in-out) 0.2s; }
.steps.in::after { transform: scaleX(1); }
.steps li { position: relative; padding-top: 58px; }
.steps li::before { content: ''; position: absolute; left: 0; top: 14px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-family: var(--title); font-size: 1.4rem; color: var(--fog); background: var(--night-1); box-shadow: inset 0 0 0 2px var(--night-line-strong); z-index: 1; transition: color 0.5s, box-shadow 0.5s, background 0.5s; transition-delay: calc(0.3s + var(--i, 0) * 0.5s); }
.steps.in li::before { color: var(--night-1); background: var(--sky); box-shadow: inset 0 0 0 2px var(--sky), 0 0 0 6px rgba(142, 219, 255, 0.12); }
.steps :is(h2, h3) { font-size: 1.5rem; margin-bottom: 10px; }
.steps p { color: var(--mist); font-size: 0.98rem; }
.steps li > * { opacity: 0; transform: translateY(10px); transition: opacity 0.7s var(--ease-out), transform 0.8s var(--ease-out); transition-delay: calc(0.45s + var(--i, 0) * 0.5s); }
.steps.in li > * { opacity: 1; transform: none; }
.paper .steps::before { background: var(--paper-line); }
.paper .steps li::before { background: var(--paper); box-shadow: inset 0 0 0 2px var(--paper-line); color: var(--paper-muted); }
.paper .steps.in li::before { background: var(--blue); color: #fff; box-shadow: inset 0 0 0 2px var(--blue), 0 0 0 6px rgba(0, 149, 237, 0.12); }
.paper .steps p { color: var(--paper-body); }
@media (max-width: 860px) {
  .steps { grid-template-columns: 1fr; gap: 0; }
  .steps::before, .steps::after { left: 23px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; }
  .steps::after { transform: scaleY(0); transform-origin: top; }
  .steps.in::after { transform: scaleY(1); }
  .steps li { padding: 0 0 36px 56px; }
  .steps li::before { left: 14px; top: 2px; }
}

/* ------------------------------------------------------------------ service rows */
.service { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(32px, 5vw, 72px); padding: clamp(40px, 5vw, 64px) 0; border-top: 1px solid var(--night-line); align-items: start; }
.service:last-child { border-bottom: 1px solid var(--night-line); }
.service .art-thumb { width: 100%; max-width: 260px; aspect-ratio: 3 / 4; border-radius: 18px; overflow: hidden; background: linear-gradient(180deg, #13223A, #0C1626); box-shadow: inset 0 0 0 1px var(--night-line); position: relative; }
.service .art-thumb img { position: absolute; inset: 7%; width: 86%; height: 86%; object-fit: contain; }
.service :is(h2, h3) { font-size: clamp(1.8rem, 2.8vw, 2.4rem); margin-bottom: 14px; }
.service .lead-by { color: var(--sky); font-size: 0.95rem; margin-bottom: 14px; font-weight: 500; }
.service .check-list { margin-top: 22px; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
@media (max-width: 900px) { .service { grid-template-columns: 1fr; } .service .art-thumb { max-width: 180px; } .service .check-list { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ big numbers row */
.numbers { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 32px; }
.numbers > div { padding-top: 28px; border-top: 1px solid var(--night-line-strong); }
.paper .numbers > div { border-color: var(--paper-line); }
@media (max-width: 760px) { .numbers { grid-template-columns: 1fr 1fr; } }

/* ------------------------------------------------------------------ FAQ */
.faq { border-top: 1px solid var(--paper-line); }
.faq details { border-bottom: 1px solid var(--paper-line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 26px 0; font-family: var(--title); font-size: clamp(1.3rem, 2vw, 1.6rem); line-height: 1.25; color: var(--paper-ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .plus { flex: none; position: relative; width: 36px; height: 36px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--paper-line); transition: transform 0.45s var(--ease-out), background 0.3s, box-shadow 0.3s; }
.faq summary .plus::before, .faq summary .plus::after { content: ''; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.6px; background: var(--paper-ink); transform: translate(-50%, -50%); }
.faq summary .plus::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform 0.45s var(--ease-out); }
.faq details[open] summary .plus { background: var(--blue); box-shadow: none; }
.faq details[open] summary .plus::before, .faq details[open] summary .plus::after { background: #fff; }
.faq details[open] summary .plus::after { transform: translate(-50%, -50%) rotate(0deg); }
.faq summary:hover { color: var(--blue); }
.faq .answer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.5s var(--ease-out); }
.faq details[open] .answer { grid-template-rows: 1fr; }
.faq .answer > div { overflow: hidden; }
.faq .answer p { padding: 0 64px 28px 0; color: var(--paper-body); max-width: 46em; }
.faq .answer p + p { margin-top: -12px; }
@supports (interpolate-size: allow-keywords) {
  .faq details { interpolate-size: allow-keywords; }
  .faq details::details-content { height: 0; overflow: hidden; transition: height 0.5s var(--ease-out), content-visibility 0.5s allow-discrete; }
  .faq details[open]::details-content { height: auto; }
}

/* ------------------------------------------------------------------ trust: citation levels */
.levels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.level { position: relative; padding: 30px 28px; border-radius: var(--radius-lg); background: linear-gradient(180deg, rgba(23, 38, 61, 0.7), rgba(15, 27, 45, 0.55)); box-shadow: inset 0 0 0 1px var(--night-line); }
.level .verdict { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; border-radius: 999px; font-size: 0.82rem; font-weight: 600; margin-bottom: 22px; }
.level .verdict.bad { background: rgba(225, 97, 100, 0.12); color: #F2A3A5; }
.level .verdict.meh { background: rgba(255, 179, 71, 0.12); color: #FFC97A; }
.level .verdict.good { background: rgba(0, 202, 203, 0.14); color: #6EE7E7; }
.level h3 { font-size: 1.6rem; margin-bottom: 10px; }
.level p { color: var(--mist); }
.level .mock { margin-top: 24px; height: 150px; border-radius: 12px; background: #F8FAFC; position: relative; overflow: hidden; }
.level .mock.doc { background: repeating-linear-gradient(90deg, #E2E8F0 0 2px, #F8FAFC 2px 9px); }
.level .mock.doc::after { content: '10,482 pages'; position: absolute; left: 14px; bottom: 12px; font-size: 0.8rem; font-weight: 600; color: #475569; background: #fff; padding: 4px 10px; border-radius: 6px; box-shadow: 0 0 0 1px #E2E8F0; }
.level .mock.page::before { content: ''; position: absolute; inset: 18px 22px; background: repeating-linear-gradient(180deg, #CBD5E1 0 4px, transparent 4px 13px); }
.level .mock.passage::before { content: ''; position: absolute; inset: 18px 22px; background: repeating-linear-gradient(180deg, #CBD5E1 0 4px, transparent 4px 13px); }
.level .mock.passage::after { content: ''; position: absolute; left: 16px; right: 40px; top: 57px; height: 30px; border: 2px solid #F5C518; background: rgba(245, 197, 24, 0.22); border-radius: 4px; transform: scaleX(0); transform-origin: left; transition: transform 1s var(--ease-out) 0.4s; }
.in .level .mock.passage::after, .level.in .mock.passage::after { transform: none; }
@media (max-width: 900px) { .levels { grid-template-columns: 1fr; } }

/* top-k diagram */
.topk { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.topk-panel { padding: 28px; border-radius: var(--radius-lg); background: #fff; box-shadow: 0 0 0 1px var(--paper-line); }
.topk-panel h3 { font-size: 1.45rem; margin-bottom: 6px; }
.topk-panel .muted { font-size: 0.94rem; }
.topk-grid { position: relative; display: grid; grid-template-columns: repeat(20, 1fr); gap: 4px; margin-top: 22px; }
.topk-grid i { aspect-ratio: 1; border-radius: 2px; background: #E2E8F0; }
/* 200 cells revealed by one cover wiping away (a single compositor transform), not 200 staggered transitions */
.topk-grid::after { content: ''; position: absolute; inset: -2px; background: #fff; transform-origin: right center; transition: transform 1.4s var(--ease-in-out); will-change: transform; }
.in .topk-grid::after { transform: scaleX(0); }
.topk-grid i.seen { background: var(--blue); }
.topk-grid i.hit { background: #F5C518; }
.topk-grid i.hit.seen { background: var(--aqua); }
.topk-legend { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 18px; font-size: 0.86rem; color: var(--paper-muted); }
.topk-legend span::before { content: ''; display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 8px; vertical-align: -1px; background: var(--c); }
@media (max-width: 860px) { .topk { grid-template-columns: 1fr; } }

/* EnviroBench grid */
.bench { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.bench .card { padding: 26px; }
.bench .card .stat-num { font-size: clamp(2.2rem, 3.4vw, 2.8rem); }
.bench .card h3 { font-size: 1.25rem; margin: 14px 0 8px; font-family: var(--sans); font-weight: 600; letter-spacing: 0; }
.bench .card p { font-size: 0.92rem; }
@media (max-width: 1000px) { .bench { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .bench { grid-template-columns: 1fr; } }

/* vendor table: good answers highlighted */
.vendor td.good { color: var(--cream); }
.vendor td.good::before { content: ''; display: inline-block; width: 8px; height: 8px; background: var(--aqua); margin-right: 10px; vertical-align: 1px; }
.vendor td.red { color: #F2A3A5; font-style: italic; }
.vendor th:nth-child(3) { color: var(--sky-strong); }

/* ------------------------------------------------------------------ company */
.team { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.person .photo { aspect-ratio: 1; border-radius: 18px; overflow: hidden; background: var(--paper-2); position: relative; }
.person .photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.25) contrast(1.02); transition: transform 1s var(--ease-out), filter 0.6s; }
.person:hover .photo img { transform: scale(1.04); filter: none; }
.person .photo::after { content: ''; position: absolute; right: 12px; bottom: 12px; width: 14px; height: 14px; background: var(--c, var(--blue)); }
.person h3 { margin-top: 22px; font-size: 1.55rem; }
.person .role { color: var(--blue); font-size: 0.95rem; font-weight: 500; margin-top: 4px; }
.person p { margin-top: 14px; color: var(--paper-body); font-size: 0.96rem; }
@media (max-width: 1000px) { .team { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .team { grid-template-columns: 1fr; } }

.values { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 48px; }
.values > div { padding: 32px 0; border-top: 1px solid var(--night-line); }
.values h3 { font-size: 1.6rem; margin-bottom: 8px; }
.values p { color: var(--mist); }
@media (max-width: 900px) { .values { grid-template-columns: 1fr; } }

.feature-panel { position: relative; overflow: hidden; border-radius: var(--radius-lg); padding: clamp(36px, 5vw, 64px); background: linear-gradient(135deg, #13223A, #0C1626); box-shadow: inset 0 0 0 1px var(--night-line); }
.feature-panel .art { position: absolute; right: 4%; top: 8%; height: 84%; width: auto; max-width: 40%; object-fit: contain; object-position: right center; pointer-events: none; }
.feature-panel > *:not(.art) { position: relative; max-width: 34em; }
/* narrow panels: text on the left, the illustration fully visible on the right */
.feature-panel.art-right > *:not(.art) { max-width: 58%; }
.feature-panel.art-right .art { height: 84%; right: 4%; }
@media (max-width: 860px) { .feature-panel.art-right > *:not(.art) { max-width: none; } }
/* small screens: panel art sits above the text, whole and at full strength */
@media (max-width: 860px) { .feature-panel .art, .feature-panel.art-right .art { position: static; display: block; height: 190px; width: auto; max-width: 100%; margin: 0 0 22px; } }

/* ------------------------------------------------------------------ contact */
.contact { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.contact-form { padding: clamp(28px, 4vw, 44px); border-radius: var(--radius-lg); background: linear-gradient(180deg, rgba(23, 38, 61, 0.75), rgba(15, 27, 45, 0.6)); box-shadow: inset 0 0 0 1px var(--night-line), 0 40px 100px -40px rgba(0, 0, 0, 0.7); }
.contact-form form { display: grid; gap: 22px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.contact-form fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 12px; }
.contact-form legend { font-weight: 600; font-size: 0.92rem; color: var(--cream); margin-bottom: 12px; padding: 0; }
.contact-form .fine { font-size: 0.86rem; color: var(--fog); }
.contact-form .btn { justify-self: start; }
.select-wrap { position: relative; }
.select-wrap select { appearance: none; -webkit-appearance: none; padding-right: 44px; }
.select-wrap::after { content: ''; position: absolute; right: 18px; top: 50%; width: 8px; height: 8px; border-right: 1.6px solid var(--mist); border-bottom: 1.6px solid var(--mist); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.form-done { text-align: left; display: grid; gap: 16px; padding: 12px 0; }
.form-done .tick { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: rgba(0, 202, 203, 0.14); color: var(--aqua); }
.contact-aside .steps { --n: 1; grid-template-columns: 1fr; gap: 0; margin-top: 36px; }
.contact-aside .steps::before, .contact-aside .steps::after { left: 23px; right: auto; top: 0; bottom: 36px; width: 2px; height: auto; }
.contact-aside .steps::after { transform: scaleY(0); transform-origin: top; }
.contact-aside .steps.in::after { transform: scaleY(1); }
.contact-aside .steps li { padding: 0 0 32px 56px; }
.contact-aside .steps li::before { left: 14px; top: 2px; }
.contact-aside .steps :is(h2, h3) { font-size: 1.3rem; }
.contact-direct { margin-top: 12px; padding: 26px 28px; border-radius: var(--radius-lg); box-shadow: inset 0 0 0 1px var(--night-line); }
.contact-direct a { font-family: var(--title); font-size: 1.7rem; color: var(--cream); }
.contact-direct a:hover { color: var(--sky); }
@media (max-width: 900px) { .contact { grid-template-columns: 1fr; } .contact-form { order: -1; } .form-row { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ fixes after visual review */
.form-done[hidden] { display: none; }
.contact h1 { font-size: clamp(2.6rem, 4.4vw, 4rem); }
.numbers .stat-num { font-size: clamp(2.3rem, 3.8vw, 3.4rem); }
.includes li { padding: 14px 0 14px 30px; }
.includes li::before { top: calc(14px + 0.5em); }
.person .photo { background: none; }
@media (max-width: 760px) {
  .person .photo { max-width: 240px; }
}

/* ------------------------------------------------------------------ offerings hub + subpages */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 30px; font-size: 0.92rem; color: var(--fog); }
.crumbs a { color: var(--mist); transition: color 0.2s; }
.crumbs a:hover { color: var(--cream); }
.crumbs .sep { color: var(--night-line-strong); }
.crumbs [aria-current] { color: var(--cream); }
.offer-hub-card { display: flex; flex-direction: column; }
.offer-hub-card .art-thumb { position: relative; height: 210px; margin: -8px -8px 22px; border-radius: 14px; overflow: hidden; background: linear-gradient(180deg, #13223A, #0C1626); }
.offer-hub-card .art-thumb img { position: absolute; inset: 8%; width: 84%; height: 84%; object-fit: contain; }
.offer-hub-card .check-list { margin-top: 18px; }
.offer-hub-card .link-arrow { margin-top: auto; padding-top: 24px; }
.rel-card .rel-kicker { font-size: 0.86rem; color: var(--fog); margin-bottom: 10px; }
.rel-card .link-arrow { margin-top: auto; padding-top: 22px; }
.contact-form .form-error { color: #FFB4A3; }
.contact-form .form-error a { color: inherit; text-decoration: underline; }