/* ==========================================================================
   PINWHEEL — Elegance layer: serif-led editorial typography, rich components
   ========================================================================== */
:root {
  --font-display: "Instrument Serif", "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-ui: "Manrope", "Inter", -apple-system, "Segoe UI", sans-serif;
  --radius-md: 20px;
  --hero: clamp(2.9rem, 1.2rem + 6.4vw, 7.25rem);
  --step-4: clamp(2.4rem, 1.5rem + 3.6vw, 4.75rem);
  --step-3: clamp(1.9rem, 1.4rem + 1.9vw, 3rem);
  --step-2: clamp(1.5rem, 1.25rem + 0.9vw, 2.1rem);
  --shadow-soft: 0 1px 2px rgba(10,10,10,.04), 0 18px 48px rgba(10,10,10,.07);
}
h1, h2, h3 { font-family: var(--font-display); font-weight: 400; line-height: 1.02; letter-spacing: -0.015em; }
h4 { font-family: var(--font-ui); font-weight: 700; letter-spacing: -0.01em; }
h1 em, h2 em, h3 em, .serif-em { font-style: italic; font-weight: 400; }
.hl-i { font-style: italic; background: linear-gradient(transparent 68%, var(--accent) 0); padding-inline: .04em; }
.dark-section .hl-i, .final-cta .hl-i { background: none; color: var(--accent); }
.btn, .nav-primary a, .eyebrow, .brand, .breadcrumbs, .faq-item summary { font-family: var(--font-ui); }
.brand { font-family: var(--font-display); font-weight: 400; font-size: 1.7rem; letter-spacing: -0.01em; }
.eyebrow { letter-spacing: .12em; font-size: .74rem; }
.lede { font-weight: 400; font-size: clamp(1.1rem, 1rem + .5vw, 1.4rem); line-height: 1.5; }
.faq-item summary { font-size: 1.05rem; }
.page-header h1 { font-size: var(--step-4); max-width: 20ch; }
.card, .stat-panel, .quick-answer { box-shadow: var(--shadow-soft); border-color: transparent; }
.card { border: 1px solid var(--border); box-shadow: none; }
.section-label { display:flex; align-items:center; gap:.9rem; font-family: var(--font-ui); font-size:.78rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color: var(--text-dim); }
.section-label b { font-family: var(--font-display); font-weight:400; font-size:1.4rem; letter-spacing:0; color: var(--text); }
.section-label::after { content:""; height:1px; background: var(--border); flex:1; max-width: 220px; }
.dark-section .section-label, .final-cta .section-label { color: var(--text-dim-on-dark); }
.dark-section .section-label b, .final-cta .section-label b { color: var(--text-on-dark); }
.dark-section .section-label::after { background: var(--border-on-dark); }
.section-head { display:grid; gap:1.1rem; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.section-head h2 { max-width: 16ch; }
.section-head p { max-width: 54ch; }
.wide-head { max-width: none; }

/* Hero ------------------------------------------------------------------ */
.hero-elegant { position: relative; padding-block: clamp(2.5rem, 6vw, 5.5rem) clamp(3rem, 6vw, 5rem); overflow: hidden; }
.hero-elegant .bg-mark { position:absolute; right:-8%; top:-12%; width:min(760px,70vw); opacity:.07; pointer-events:none; animation: spin-slow 90s linear infinite; }
@keyframes spin-slow { to { transform: rotate(360deg); } }
.hero-elegant .hero-grid { position:relative; grid-template-columns: 1.1fr .9fr; }
.hero-elegant h1 { max-width: 13ch; }
.hero-visual img { width:100%; height:auto; filter: drop-shadow(0 30px 50px rgba(10,10,10,.12)); border-radius: 28px; }
.hero-note { margin-top: .9rem; font-size:.78rem; color: var(--text-dim); text-align:center; }
.proof { display:grid; grid-template-columns: repeat(4, 1fr); gap:1.5rem; margin-top: clamp(2rem, 5vw, 4rem); padding-top: 1.75rem; border-top: 1px solid var(--border); position:relative; }
.proof .n { font-family: var(--font-display); font-size: clamp(2.4rem, 1.6rem + 2.6vw, 4rem); line-height:1; display:block; }
.proof .l { font-size:.85rem; color: var(--text-dim); font-weight:500; }
@media (max-width: 940px) { .hero-elegant .hero-grid { grid-template-columns: 1fr; } .proof { grid-template-columns: repeat(2,1fr); } }

/* Marquee ------------------------------------------------------------- */
.marquee { overflow:hidden; border-block:1px solid var(--border); background: var(--white); }
.marquee-track { display:flex; width:max-content; animation: marquee 48s linear infinite; padding-block: 1.15rem; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee span { font-family: var(--font-display); font-size: clamp(1.35rem, 1.1rem + 1vw, 2rem); white-space:nowrap; padding-inline: 1.6rem; display:flex; align-items:center; gap:3.2rem; }
.marquee span::after { content:""; width:.5rem; height:.5rem; border-radius:50%; background: var(--accent); border:1px solid var(--ink); }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } .hero-elegant .bg-mark { animation:none; } }

/* Manifesto ------------------------------------------------------------ */
.manifesto p { font-family: var(--font-display); font-size: clamp(1.7rem, 1.1rem + 2.7vw, 3.5rem); line-height:1.12; color: var(--text); max-width: 30ch; letter-spacing:-.015em; }
.manifesto p .dim { color: #a3a39b; }
.tri { display:grid; grid-template-columns: repeat(3,1fr); gap: clamp(1.25rem,3vw,3rem); margin-top: clamp(2rem,4vw,3.5rem); }
.tri > div { border-top:1px solid var(--ink); padding-top:1.1rem; }
.tri h4 { font-size:1.15rem; margin-bottom:.5rem; }
@media (max-width: 800px) { .tri { grid-template-columns: 1fr; } }

/* Bento ---------------------------------------------------------------- */
.bento { display:grid; grid-template-columns: repeat(12,1fr); gap:1.25rem; }
.tile { grid-column: span 4; position:relative; display:flex; flex-direction:column; gap:.9rem; background: var(--white); border:1px solid var(--border); border-radius: 24px; padding: clamp(1.4rem, 2.4vw, 2rem); overflow:hidden; transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease); }
.tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-soft); border-color: var(--ink); }
.tile .num { font-family: var(--font-display); font-size:1.3rem; color: var(--text-dim); }
.tile h3 { font-size: var(--step-3); max-width: 14ch; }
.tile p { font-size:.98rem; max-width: 40ch; }
.tile .tags { display:flex; flex-wrap:wrap; gap:.4rem; margin-top:auto; padding-top:.6rem; }
.tile .tags span { font-size:.72rem; font-weight:600; font-family: var(--font-ui); border:1px solid var(--border); border-radius:999px; padding:.25rem .7rem; color: var(--text-dim); background: var(--paper); }
.tile .go { font-family: var(--font-ui); font-weight:700; font-size:.85rem; display:flex; align-items:center; gap:.4rem; }
.tile img { width:100%; height:auto; border-radius: 16px; margin-top:.6rem; }
.tile-dark { background: var(--ink); color: var(--text-on-dark); border-color: var(--ink); }
.tile-dark h3, .tile-dark .go { color: var(--text-on-dark); }
.tile-dark p, .tile-dark .num { color: var(--text-dim-on-dark); }
.tile-dark .tags span { background: transparent; border-color: var(--border-on-dark); color: var(--text-dim-on-dark); }
.tile-dark:hover { border-color: var(--accent); }
.tile-lime { background: var(--accent); border-color: var(--accent); }
.tile-lime p, .tile-lime .num { color: #2a3a08; }
.tile-lime .tags span { background: rgba(255,255,255,.4); border-color: rgba(10,10,10,.15); color: var(--ink); }
.t7 { grid-column: span 7; } .t5 { grid-column: span 5; } .t3 { grid-column: span 3; } .t6 { grid-column: span 6; }
@media (max-width: 1000px) { .tile, .t7, .t5, .t3, .t6 { grid-column: span 6; } }
@media (max-width: 640px) { .tile, .t7, .t5, .t3, .t6 { grid-column: span 12; } }

/* Tabs (service deep dive) --------------------------------------------- */
.tabs-nav { display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom: clamp(1.5rem,3vw,2.5rem); }
.tab-btn { font-family: var(--font-ui); font-weight:700; font-size:.92rem; padding:.75rem 1.3rem; min-height:44px; border-radius:999px; border:1.5px solid var(--border); background: var(--white); transition: all .2s var(--ease); }
.tab-btn:hover { border-color: var(--ink); }
.tab-btn[aria-selected="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.js .tab-panel:not(.is-active) { display:none; }
.tab-panel { display:grid; grid-template-columns: 1.05fr .95fr; gap: clamp(1.5rem,4vw,4rem); align-items:center; background: var(--white); border:1px solid var(--border); border-radius: 28px; padding: clamp(1.4rem,3.5vw,3rem); margin-bottom:1.25rem; }
.tab-panel h3 { font-size: var(--step-3); margin-bottom:.8rem; }
.tab-cols { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; margin-block: 1.4rem 1.6rem; }
.tab-cols h4 { font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color: var(--text-dim); margin-bottom:.6rem; }
.tab-cols ul li { padding-left:1.2rem; position:relative; font-size:.94rem; color: var(--text); margin-bottom:.45rem; }
.tab-cols ul li::before { content:""; position:absolute; left:0; top:.55em; width:.5rem; height:.5rem; border-radius:50%; background: var(--accent); border:1px solid var(--ink); }
.tab-panel img { width:100%; height:auto; filter: drop-shadow(0 24px 40px rgba(10,10,10,.1)); }
@media (max-width: 900px) { .tab-panel { grid-template-columns: 1fr; } .tab-cols { grid-template-columns: 1fr; } }

/* Engine accordion ----------------------------------------------------- */
.acc { border-top:1px solid var(--border); }
.acc-item { border-bottom:1px solid var(--border); }
.acc-btn { width:100%; display:grid; grid-template-columns: 3.5rem 1fr auto; align-items:center; gap:1rem; padding-block: clamp(1.1rem,2.4vw,1.8rem); text-align:left; }
.acc-btn .i { font-family: var(--font-display); font-size:1.5rem; color: var(--text-dim); }
.acc-btn .t { font-family: var(--font-display); font-size: var(--step-3); line-height:1.05; }
.acc-btn .p { width:2.2rem; height:2.2rem; border:1.5px solid var(--border); border-radius:50%; display:grid; place-items:center; transition: all .25s var(--ease); font-size:1.2rem; }
.acc-item.is-open .acc-btn .p { background: var(--accent); border-color: var(--ink); transform: rotate(45deg); }
.acc-item.is-open .acc-btn .i { color: var(--text); }
.acc-panel { display:grid; grid-template-columns: 3.5rem 1fr; gap:1rem; }
.js .acc-panel { display:none; }
.js .acc-item.is-open .acc-panel { display:grid; animation: rise-in .35s var(--ease) both; }
.acc-panel .body { padding-bottom: 1.8rem; display:grid; grid-template-columns: 1.2fr 1fr; gap: 2rem; }
.acc-panel .body ul { display:flex; flex-wrap:wrap; gap:.5rem; align-content:flex-start; }
.acc-panel .body li { border:1px solid var(--border); background: var(--white); border-radius:999px; padding:.35rem .9rem; font-size:.82rem; font-weight:600; font-family: var(--font-ui); }
.acc-panel .body .out { font-size:.85rem; color: var(--text-dim); margin-top:.8rem; }
.acc-panel .body .out b { color: var(--text); }
@media (max-width: 700px) { .acc-btn { grid-template-columns: 2.4rem 1fr auto; } .acc-panel { grid-template-columns: 2.4rem 1fr; } .acc-panel .body { grid-template-columns: 1fr; gap:1rem; } }

/* Roadmap -------------------------------------------------------------- */
.roadmap { display:grid; grid-template-columns: repeat(3,1fr); gap: clamp(1rem,2.5vw,2rem); }
.rm { border-top:3px solid var(--ink); padding-top:1.1rem; }
.rm .d { font-family: var(--font-display); font-size: clamp(3rem, 2rem + 3vw, 5rem); line-height:.9; }
.rm .d small { font-family: var(--font-ui); font-size:.75rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color: var(--text-dim); margin-left:.4rem; }
.rm:nth-child(1) { border-top-color: var(--accent); }
.rm h4 { margin: .8rem 0 .5rem; font-size:1.15rem; }
.rm ul li { font-size:.92rem; color: var(--text-dim); padding-left:1.1rem; position:relative; margin-bottom:.4rem; }
.rm ul li::before { content:"→"; position:absolute; left:0; color: var(--text); }
.dark-section .rm { border-top-color: var(--border-on-dark); } .dark-section .rm:nth-child(1) { border-top-color: var(--accent); }
.dark-section .rm ul li, .dark-section .rm small { color: var(--text-dim-on-dark); } .dark-section .rm ul li::before { color: var(--accent); }
@media (max-width: 800px) { .roadmap { grid-template-columns: 1fr; } }

/* Compare -------------------------------------------------------------- */
.cmp { border-top:1px solid var(--border-on-dark); }
.cmp-row { display:grid; grid-template-columns: .8fr 1.1fr 1.1fr; gap:1.5rem; padding-block:1.2rem; border-bottom:1px solid var(--border-on-dark); align-items:start; }
.cmp-row.head { font-family: var(--font-ui); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color: var(--text-dim-on-dark); padding-block:.9rem; }
.cmp-row .k { font-family: var(--font-display); font-size:1.5rem; color: var(--text-on-dark); }
.cmp-row .a { color: var(--text-dim-on-dark); font-size:.95rem; }
.cmp-row .b { color: var(--text-on-dark); font-size:.95rem; }
.cmp-row .b::before { content:"✓ "; color: var(--accent); font-weight:700; }
@media (max-width: 760px) { .cmp-row { grid-template-columns:1fr; gap:.4rem; } .cmp-row.head { display:none; } .cmp-row .a::before { content:"Typical agency — "; font-weight:700; color: var(--text-on-dark); } }

/* Chips / tools / cities ---------------------------------------------- */
.chips { display:flex; flex-wrap:wrap; gap:.6rem; }
.chips a, .chips span { font-family: var(--font-ui); font-weight:600; font-size:.88rem; padding:.55rem 1.05rem; border:1.5px solid var(--border); border-radius:999px; background: var(--white); transition: all .2s var(--ease); }
.chips a:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.chips.lime span { background: var(--accent); border-color: var(--ink); }

/* Post cards ----------------------------------------------------------- */
.post-card { display:flex; flex-direction:column; gap:1rem; }
.post-card img { width:100%; height:auto; border-radius:20px; border:1px solid var(--border); transition: transform .3s var(--ease); }
.post-card:hover img { transform: translateY(-4px); }
.post-card h3 { font-size: var(--step-2); }
.post-card p { font-size:.95rem; }
.post-card .meta { font-family: var(--font-ui); font-size:.75rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color: var(--text-dim); }

/* AI split ------------------------------------------------------------- */
.split { display:grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,5vw,5rem); align-items:center; }
.split img { width:100%; height:auto; filter: drop-shadow(0 24px 40px rgba(10,10,10,.1)); }
.caps { display:grid; grid-template-columns:1fr 1fr; gap:1.4rem 2rem; margin-top:2rem; }
.caps h4 { font-size:1rem; margin-bottom:.25rem; } .caps p { font-size:.9rem; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .caps { grid-template-columns:1fr; } }

/* Interior pages -------------------------------------------------------- */
.page-header .wrap.has-visual { display:grid; grid-template-columns: 1.15fr .85fr; column-gap: clamp(2rem,5vw,5rem); align-items:center; }
.page-header .wrap.has-visual > * { grid-column:1; }
.page-header .wrap.has-visual > .page-visual { grid-column:2; grid-row: 1 / span 6; width:100%; height:auto; align-self:center; border-radius:28px; filter: drop-shadow(0 26px 44px rgba(10,10,10,.10)); }
@media (max-width: 900px) { .page-header .wrap.has-visual { grid-template-columns: 1fr; } .page-header .wrap.has-visual > .page-visual { grid-column:1; grid-row:auto; margin-top:1.75rem; max-width:520px; } }
.mistakes { counter-reset: m; display:grid; grid-template-columns:1fr 1fr; gap:1.25rem 2.5rem; margin-top:1.5rem; }
.mistakes li { counter-increment: m; border-top:1px solid var(--border); padding-top:1rem; }
.mistakes li::before { content: counter(m, decimal-leading-zero); font-family: var(--font-display); font-size:1.6rem; color: var(--text-dim); display:block; margin-bottom:.3rem; }
.mistakes li b { display:block; font-family: var(--font-ui); margin-bottom:.25rem; }
@media (max-width: 700px) { .mistakes { grid-template-columns:1fr; } }
.card-plain { padding:0; border:0; box-shadow:none; background:transparent; }

/* Fluid metrics so 3-up stats fit narrow cards */
.metrics .m { font-size: clamp(1.25rem, .9rem + 1.3vw, 2.4rem); }
.metrics > div { min-width: 0; }
.case-card { min-width: 0; }
.hero-elegant { overflow-x: clip; }