/* ─────────────────────────────────────────────────────────────
   Pellar — shared site components
   Load after colors_and_type.css. Used by Solutions and Case Studies.
   ───────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
body { margin: 0; background: var(--bg); color: var(--fg); overflow-x: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }

/* ── layout ─────────────────────────────────────────────────── */
:root { --gutter: clamp(20px, 6vw, 90px); --grid-line: rgba(255,255,255,.035); --glow: rgba(240,180,41,.07); }
.wrap { padding-left: var(--gutter); padding-right: var(--gutter); }
.sec { padding-top: clamp(64px, 8vw, 112px); padding-bottom: clamp(64px, 8vw, 112px); }
.sec--tight { padding-top: clamp(48px, 6vw, 80px); padding-bottom: clamp(48px, 6vw, 80px); }
.hair { border-bottom: 1px solid var(--border); }

/* ── subtle backgrounds ─────────────────────────────────────── */
.bg { position: relative; isolation: isolate; }
.bg::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.bg--grid::before {
  background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 72px 72px; background-position: center top;
  -webkit-mask-image: radial-gradient(ellipse 75% 70% at 50% 0%, #000 0%, transparent 78%);
          mask-image: radial-gradient(ellipse 75% 70% at 50% 0%, #000 0%, transparent 78%);
}
.bg--glow::before { background: radial-gradient(ellipse 55% 50% at 12% 38%, var(--glow), transparent 72%); }
.bg--hero::before {
  background-image: radial-gradient(ellipse 50% 60% at 10% 10%, rgba(240,180,41,.08), transparent 70%), linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: auto, 72px 72px, 72px 72px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.5) 60%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.5) 60%, transparent 100%);
}
.bg--raised { background: linear-gradient(180deg, #0b0b0c 0%, #000 100%); }

/* ── section header (title — rule — meta) ───────────────────── */
.sh { display: flex; align-items: center; gap: 24px; margin-bottom: 40px; }
.sh h1, .sh h2 { margin: 0; font-family: var(--font-display); font-weight: 400; letter-spacing: 1px; color: var(--pellar-paper); white-space: nowrap; }
.sh h1 { font-size: clamp(48px, 7vw, 84px); line-height: .92; }
.sh h2 { font-size: clamp(34px, 4.4vw, 48px); line-height: .98; }
.sh .rule { flex: 1; height: 1px; background: var(--border-strong); }
.sh .meta { font-family: var(--font-body); font-size: 11px; letter-spacing: 2px; color: var(--fg-meta); text-transform: uppercase; white-space: nowrap; }
@media (max-width: 640px){ .sh .meta { display: none; } }
.page-head { padding-top: clamp(48px, 7vw, 96px); padding-bottom: clamp(40px, 5vw, 64px); }
.page-head .sh { margin: 18px 0 0; }
.intro, .lede-wide { font-family: var(--font-body); font-weight: 300; font-size: clamp(16px, 1.6vw, 20px); line-height: 1.55; color: var(--fg-soft); max-width: 760px; }
.intro { margin: 24px 0 0; }
.lede-wide { margin: 0 0 40px; }
.intro b, .lede-wide b { color: #fff; font-weight: 600; }
.lede-wide.one { max-width: none; }

/* ── buttons, links, labels ─────────────────────────────────── */
.btn { display: inline-flex; align-items: center; gap: 10px; padding: 15px 26px; font-family: var(--font-body); font-weight: 700; font-size: 14px; letter-spacing: 2px; line-height: 20px; text-transform: uppercase; border: 1px solid transparent; cursor: pointer; transition: all var(--dur-base) var(--ease-standard); }
.btn svg, .link svg { transition: transform var(--dur-base) var(--ease-standard); }
.btn:hover svg { transform: translate(4px, -4px); }
.btn--primary { background: var(--accent); color: #000; }
.btn--primary:hover { background: var(--pellar-yellow); color: #000; }
.btn--ghost { background: rgba(0,0,0,.4); color: #fff; border-color: var(--border-strong); }
.btn--ghost:hover { border-color: var(--pellar-yellow); color: var(--pellar-yellow); }
.btn--onyellow { background: #000; color: var(--pellar-paper); }
.btn--onyellow:hover { background: var(--pellar-coal); color: var(--pellar-paper); }
.link { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-body); font-weight: 700; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: #fff; transition: color var(--dur-base); }
.link:hover { color: var(--pellar-yellow); }
.link:hover svg { transform: translate(3px, -3px); }
.eyebrow { font-family: var(--font-eyebrow); font-size: 11px; line-height: 16px; letter-spacing: 3px; text-transform: uppercase; color: var(--accent); display: inline-flex; align-items: center; gap: 10px; }
.eyebrow::before { content: ""; width: 24px; height: 1px; background: var(--pellar-yellow); display: inline-block; }
.label, .num { font-family: var(--font-body); font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: var(--accent); }
.chip { display: inline-flex; align-items: center; padding: 6px 12px; font-family: var(--font-body); font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; border: 1px solid var(--border-strong); color: var(--fg-soft); background: transparent; }
.chip.y { background: var(--pellar-yellow); color: #000; border-color: var(--pellar-yellow); }

/* ── icons ──────────────────────────────────────────────────── */
.ic { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: square; stroke-linejoin: miter; flex: none; }
.ic-tile { width: 48px; height: 48px; display: grid; place-items: center; flex: none; border: 1px solid rgba(240,180,41,.35); background: rgba(240,180,41,.06); color: var(--pellar-yellow); transition: background var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard); }
.hover-tile:hover .ic-tile { background: var(--pellar-yellow); color: #000; }
.card-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.chip .ic { width: 13px; height: 13px; margin-right: 8px; }

/* ── header ─────────────────────────────────────────────────── */
header.nav { position: sticky; top: 0; z-index: 60; display: flex; align-items: center; justify-content: space-between; height: 80px; background: rgba(0,0,0,.78); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--border-strong); }
.wordmark { font-family: var(--font-body); font-weight: 700; font-size: 26px; letter-spacing: .02em; text-transform: uppercase; color: #fff; }
.wordmark:hover { color: #fff; }
nav.links { display: flex; align-items: center; }
nav.links a { padding: 0 18px; font-size: 14px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--pellar-mist); transition: color var(--dur-base); }
nav.links a.active, nav.links a:hover { color: #fff; }
.nav-burger { display: none; width: 44px; height: 44px; margin-right: -10px; background: none; border: 0; cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 7px; }
.nav-burger span { display: block; width: 22px; height: 1.5px; background: #fff; transition: transform var(--dur-base) var(--ease-standard); }
.nav-burger[aria-expanded="true"] span:first-child { transform: translateY(4.25px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:last-child { transform: translateY(-4.25px) rotate(-45deg); }
.mnav { position: absolute; top: 100%; left: 0; right: 0; height: calc(100vh - 80px); height: calc(100dvh - 80px); overflow-y: auto; background: #000; border-bottom: 1px solid var(--border-strong); padding: 8px var(--gutter) 24px; }
.mnav[hidden] { display: none; }
.mnav a:not(.btn) { display: block; padding: 16px 0; border-bottom: 1px solid var(--border); font-family: var(--font-display); font-size: 30px; line-height: 1; color: var(--pellar-paper); }
.mnav a:not(.btn):hover, .mnav a.active { color: var(--pellar-yellow); }
.mnav .btn { margin-top: 20px; }
@media (max-width: 860px){
  nav.links, .nav-cta { display: none; }
  .nav-burger { display: flex; }
}

/* ── cell grids ─────────────────────────────────────────────── */
.grid-cells { display: grid; gap: 1px; background: var(--on-dark-6); border: 1px solid var(--on-dark-6); }
.cell { background: var(--pellar-black); padding: 28px; }
.cells-3 { grid-template-columns: repeat(3, 1fr); }
.cells-4 { grid-template-columns: repeat(4, 1fr); }
.cells-6 { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 900px){ .cells-3 { grid-template-columns: 1fr; } .cells-4 { grid-template-columns: 1fr 1fr; } .cells-6 { grid-template-columns: 1fr 1fr 1fr; } }
@media (max-width: 560px){ .cells-6 { grid-template-columns: 1fr 1fr; } .phases { grid-template-columns: 1fr; } }

/* approach phases */
.phase { background: rgba(0,0,0,.72); }
.phase-top { display: flex; align-items: flex-start; justify-content: space-between; }
.phase-top .ic { width: 26px; height: 26px; color: var(--pellar-yellow); }
.phase .big { font-family: var(--font-display); font-size: 64px; line-height: .8; color: transparent; -webkit-text-stroke: 1px rgba(240,180,41,.55); }
.phase .ph-num { font-family: var(--font-body); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--accent); margin-top: 22px; }
.phase h4 { font-family: var(--font-display); font-weight: 400; font-size: 30px; line-height: 1; color: var(--pellar-paper); margin: 10px 0 12px; }
.phase p { font-family: var(--font-body); font-weight: 300; font-size: 14px; line-height: 1.6; color: var(--fg-soft); margin: 0; }

/* compliance badges */
.badge-cell { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 30px 12px; text-align: center; }
.badge-cell .ic { color: var(--fg-meta); margin-bottom: 14px; transition: color var(--dur-base); }
.badge-cell:hover .ic { color: var(--pellar-yellow); }
.badge-cell .b { font-family: var(--font-display); font-size: 26px; color: var(--pellar-paper); line-height: 1; }
.badge-cell .s { font-family: var(--font-body); font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--fg-meta); margin-top: 8px; }

/* ── artifacts (live-system panels) ─────────────────────────── */
.art { border: 1px solid var(--border); background: var(--pellar-coal); display: flex; flex-direction: column; }
.art-head { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--border); font-family: var(--font-body); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--fg-soft); }
.art-foot { padding: 14px 18px; border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.art-foot.chips { justify-content: flex-start; }
.foot-meta, .meta-s { font-family: var(--font-body); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--fg-meta); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--pellar-yellow); animation: pulse 1.6s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.3} }
.mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12.5px; line-height: 1.8; color: var(--pellar-fog); }
.y { color: var(--pellar-yellow); }
.dim { opacity: .65; }
.caret { display: inline-block; width: 7px; background: var(--pellar-yellow); animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50%{opacity:0} }
.console { padding: 18px; flex: 1; }
.chat { padding: 18px; flex: 1; display: flex; flex-direction: column; gap: 12px; }
.insight { padding: 18px; flex: 1; display: flex; flex-direction: column; gap: 12px; }
.spark { display: flex; align-items: flex-end; gap: 4px; height: 96px; border-bottom: 1px solid var(--border-strong); }
.spark span { flex: 1; background: var(--on-dark-4); }
.spark span.hi { background: var(--pellar-yellow); }
.spark-axis { display: flex; justify-content: space-between; font-family: var(--font-body); font-size: 10px; letter-spacing: 1.5px; color: var(--fg-meta); margin-top: -6px; }
.ins-row { display: grid; grid-template-columns: 72px 1fr; gap: 12px; }
.ins-row .k { font-family: var(--font-body); font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--fg-meta); padding-top: 3px; }
.ins-row .k.y { color: var(--pellar-yellow); }
.voice { flex: 1; display: flex; align-items: center; padding: 16px 18px; min-height: 180px; }
.voice svg { display: block; width: 100%; height: 160px; overflow: visible; }
.voice path, .voice line { fill: none; vector-effect: non-scaling-stroke; }
.voice .v0 { stroke: var(--border-strong); stroke-width: 1; stroke-dasharray: 2 6; }
.voice .v1 { stroke: var(--pellar-yellow); stroke-width: 2.25; filter: drop-shadow(0 0 6px rgba(240,180,41,.55)); }
.voice .v2 { stroke: var(--pellar-yellow); stroke-width: 1.5; opacity: .45; }
.voice .v3 { stroke: var(--pellar-yellow); stroke-width: 1; opacity: .22; }

/* ── CTA band ───────────────────────────────────────────────── */
.cta { position: relative; overflow: hidden; background: var(--pellar-yellow); padding: clamp(64px, 9vw, 110px) var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.cta h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(48px, 8vw, 96px); line-height: .9; color: var(--pellar-ink); margin: 0; position: relative; z-index: 1; }
.cta p { font-family: var(--font-body); font-weight: 400; font-size: 16px; line-height: 1.5; color: rgba(0,0,0,.7); margin: 16px 0 0; max-width: 460px; position: relative; z-index: 1; }
.cta .ast { position: absolute; right: 5%; top: 50%; transform: translateY(-50%); display: flex; gap: 28px; color: rgba(0,0,0,.08); pointer-events: none; }
.cta .ast svg { width: clamp(80px, 11vw, 130px); height: auto; }
.cta .btn { position: relative; z-index: 1; }

/* ── footer ─────────────────────────────────────────────────── */
footer.ft { border-top: 1px solid var(--border-strong); }
.ft-top { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 30px var(--gutter); }
.ft-logo { font-family: var(--font-body); font-size: 26px; letter-spacing: -0.04em; color: #fff; }
.ft-links { display: flex; gap: 26px; flex-wrap: wrap; }
.ft-links a { font-family: var(--font-body); font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--pellar-mist); transition: color var(--dur-base); }
.ft-links a:hover { color: #fff; }
.ft-meta { font-family: var(--font-body); font-size: 12px; letter-spacing: .5px; color: var(--fg-meta); }

/* ── reveal on scroll ───────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce){
  html { scroll-behavior: auto; }
  .reveal { opacity: 1 !important; transform: none !important; transition: none; }
  .dot, .caret { animation: none !important; }
}

/* ── case study pages ───────────────────────────────────────── */
.crumb { padding: 24px var(--gutter) 0; font-family: var(--font-body); font-size: 12px; letter-spacing: 1px; color: var(--fg-meta); }
.crumb a:hover { color: #fff; }
.case-hero { position: relative; overflow: hidden; margin: 16px var(--gutter) 0; aspect-ratio: 2.6 / 1; border: 1px solid var(--border); background: var(--pellar-coal); }
@media (max-width: 900px){ .case-hero { aspect-ratio: 16 / 10; } }
.case-hero picture, .case-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.case-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,.7)); pointer-events: none; }
.case-hero .t { position: absolute; z-index: 1; left: clamp(18px, 3vw, 40px); bottom: clamp(16px, 3vw, 36px); max-width: 80%; font-family: var(--font-display); font-size: clamp(34px, 6vw, 80px); line-height: .9; color: #fff; }
.case-hero.panel { background: radial-gradient(ellipse 60% 80% at 85% 20%, rgba(240,180,41,.12), transparent 70%), linear-gradient(var(--grid-line) 1px, transparent 1px) 0 0 / 56px 56px, linear-gradient(90deg, var(--grid-line) 1px, transparent 1px) 0 0 / 56px 56px, var(--pellar-coal); }
.case-hero.panel::after { display: none; }
.case-hero .mark { position: absolute; right: -60px; top: -60px; width: 340px; color: rgba(240,180,41,.07); }
.case-hero .hero-art { position: absolute; right: clamp(18px, 4vw, 56px); top: 50%; transform: translateY(-50%); width: min(44%, 460px); border: 1px solid var(--border-strong); background: rgba(0,0,0,.6); }
@media (max-width: 700px){ .case-hero .hero-art { display: none; } }
.brief { display: grid; grid-template-columns: .4fr 1fr; gap: clamp(24px, 5vw, 56px); align-items: start; }
@media (max-width: 820px){ .brief { grid-template-columns: 1fr; } }
.brief .side p { font-family: var(--font-body); font-weight: 300; font-size: 13px; line-height: 1.5; color: var(--fg-meta); margin: 8px 0 0; }
.brief .tagrow { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 14px; }
.brief .side .link { margin-top: 20px; }
.brief h1 { font-family: var(--font-display); font-weight: 400; font-size: clamp(44px, 6vw, 72px); line-height: .92; color: var(--pellar-paper); margin: 0; }
.brief .lede { font-family: var(--font-body); font-weight: 300; font-size: clamp(16px, 1.6vw, 19px); line-height: 1.55; color: var(--fg-soft); margin: 18px 0 0; max-width: 640px; }
.stat .n { font-family: var(--font-display); font-size: clamp(40px, 5vw, 60px); line-height: .85; color: var(--pellar-paper); }
.stat .l { font-family: var(--font-body); font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--fg-meta); margin-top: 12px; line-height: 1.5; }
.stat.yellow { background: var(--pellar-yellow); }
.stat.yellow .n { color: #000; }
.stat.yellow .l { color: rgba(0,0,0,.65); }
.case-stats { grid-template-columns: repeat(var(--n, 4), 1fr); }
@media (max-width: 760px){ .case-stats { grid-template-columns: 1fr 1fr; } }
.build { display: grid; grid-template-columns: .4fr 1fr; gap: clamp(24px, 5vw, 56px); align-items: start; }
@media (max-width: 820px){ .build { grid-template-columns: 1fr; } }
.build h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(34px, 4vw, 48px); line-height: .95; color: var(--pellar-paper); margin: 10px 0 0; }
.build ul { list-style: none; padding: 0; margin: 0; }
.build li { display: flex; align-items: center; gap: 18px; padding: 16px 0; border-top: 1px solid var(--border); font-family: var(--font-body); font-weight: 300; font-size: 15px; line-height: 1.5; color: var(--fg-soft); }
.build li:last-child { border-bottom: 1px solid var(--border); }
.build li b { color: #fff; font-weight: 600; }
.build li .ic-tile { width: 40px; height: 40px; }
.build li .ic-tile .ic { width: 20px; height: 20px; }
.outcome-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.outcome-row.single { grid-template-columns: 1fr; }
@media (max-width: 820px){ .outcome-row { grid-template-columns: 1fr; } }
.outcome { position: relative; overflow: hidden; border: 1px solid var(--border); background: radial-gradient(ellipse 80% 70% at 100% 0%, rgba(240,180,41,.1), transparent 70%), var(--pellar-graphite); padding: clamp(28px, 4vw, 48px); display: flex; flex-direction: column; justify-content: center; }
.outcome .mark { position: absolute; right: -40px; bottom: -40px; width: 220px; color: rgba(240,180,41,.07); }
.outcome .st { position: relative; font-family: var(--font-display); font-size: clamp(34px, 4.2vw, 54px); line-height: .92; color: var(--pellar-paper); margin: 14px 0 16px; }
.outcome p { position: relative; font-family: var(--font-body); font-weight: 300; font-size: 15px; line-height: 1.55; color: var(--fg-soft); margin: 0; max-width: 480px; }
.pull { border: 1px solid var(--border); padding: clamp(28px, 4vw, 48px); display: flex; flex-direction: column; justify-content: center; }
.pull q { font-family: var(--font-body); font-weight: 300; font-size: clamp(18px, 1.8vw, 22px); line-height: 1.45; color: var(--pellar-paper); quotes: none; }
.pull q::before, .pull q::after { content: ""; }
.pull .by { font-family: var(--font-body); font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--fg-meta); margin-top: 20px; }
.pull .by b { color: var(--accent); font-weight: 400; }
.stack { display: flex; gap: 8px; flex-wrap: wrap; }
.pn { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px){ .pn { grid-template-columns: 1fr; } }
.pn a { border: 1px solid var(--border); padding: 24px; background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0)); transition: border-color var(--dur-base); }
.pn a:hover { border-color: var(--pellar-yellow); color: inherit; }
.pn .k { font-family: var(--font-body); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--fg-meta); }
.pn .nm { font-family: var(--font-display); font-size: 30px; line-height: 1; color: var(--pellar-paper); margin-top: 8px; transition: color var(--dur-base); }
.pn a:hover .nm { color: var(--pellar-yellow); }
.pn .nx { text-align: right; }