/*
Theme Name: Paper & Ink
Description: Child theme of Assembler carrying the Paper & Ink design direction.
Author: Gaurav Patil
Template: assembler
Version: 1.0.0
Text Domain: paper-ink
*/
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,600;12..96,700;12..96,800&family=Instrument+Sans:wght@400;500;600&family=JetBrains+Mono:wght@400;500;700&display=swap');
:root{--paper:#F2F0EA;--ink:#141210;--muted:#736C61;--faint:#EAE7E0;--line:rgba(20,18,16,.14);--card:#FBFAF6}
[data-theme="dark"],.is-dark{--paper:#131210;--ink:#F2F0EA;--muted:#9A9186;--faint:#1D1B17;--line:rgba(242,240,234,.13);--card:#1A1814}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,.wp-block-heading{font-family:'Bricolage Grotesque',sans-serif;letter-spacing:-.035em;line-height:1;text-wrap:balance}
h1{font-weight:800;line-height:.94}
h2,h3{font-weight:700;line-height:1.05}
.pi-wide p{max-width:none}
.pi-eyebrow{font-family:'JetBrains Mono',monospace;font-size:.72rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.pi-rule{border:0;border-top:1px solid var(--line);margin:0}
.pi-card{background:var(--card);border:1px solid var(--line);border-radius:16px}
.wp-block-button__link{font-family:'Instrument Sans',system-ui,sans-serif;font-weight:600;font-size:.98rem;padding:16px 26px;border-radius:999px;line-height:1}
.wp-block-button.is-style-outline .wp-block-button__link{border:1px solid var(--line);background:transparent;color:var(--ink)}
.pi-nav{position:sticky;top:0;z-index:60;background:color-mix(in srgb, var(--paper) 82%, transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.pi-faq summary{list-style:none;cursor:pointer}
.pi-faq summary::-webkit-details-marker{display:none}
.pi-faq [data-pm]::after{content:'+'}
.pi-faq details[open] [data-pm]::after{content:'\2212'}
@keyframes pi-marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes pi-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.75)}}
.pi-marquee{animation:pi-marq 34s linear infinite}
.pi-pulse{animation:pi-pulse 2.4s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){.pi-marquee,.pi-pulse{animation:none}html{scroll-behavior:auto}}
@media(max-width:680px){.wp-block-columns:not(.is-not-stacked-on-mobile){flex-wrap:wrap!important}}
/* ---------- Sections ---------- */
.pi-section{padding-top:clamp(56px,8vw,110px);padding-bottom:clamp(56px,8vw,110px)}
/* Services: editorial rows, not a card triptych */
.pi-svc .wp-block-column{border-top:1px solid var(--line);padding-top:22px}
.pi-svc h3{margin:6px 0 8px}
.pi-svc p{color:var(--muted);font-size:.95rem;max-width:38ch}
.pi-num{font-family:'JetBrains Mono',monospace;font-size:.72rem;letter-spacing:.06em;color:var(--muted)}
/* Process: numbered sequence on a single hairline */
.pi-steps{border-top:1px solid var(--line);padding-top:26px}
.pi-steps .wp-block-column{padding-right:18px}
.pi-steps h3{font-size:1.05rem;margin:10px 0 6px}
.pi-steps p{color:var(--muted);font-size:.92rem}
/* Why me: asymmetric two-up, tinted ground */
.pi-why{background:var(--faint);border-radius:16px;padding:clamp(26px,4vw,48px)}
.pi-why h3{font-size:1.05rem;margin-bottom:6px}
.pi-why p{color:var(--muted);font-size:.94rem}
/* Testimonials: one featured, two supporting */
.pi-quote-lead{font-family:'Bricolage Grotesque',sans-serif;font-weight:600;font-size:clamp(1.3rem,2.4vw,1.85rem);line-height:1.25;letter-spacing:-.02em;max-width:26ch}
.pi-quote p{font-size:.95rem;color:var(--muted);line-height:1.65}
.pi-attrib{font-family:'JetBrains Mono',monospace;font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
/* Podcasts */
.pi-pod .wp-block-column{border-top:1px solid var(--line);padding-top:18px}
.pi-pod h3{font-size:1rem;margin:8px 0}
/* FAQ accordion */
.pi-faq .wp-block-details{border-top:1px solid var(--line);padding:20px 0}
.pi-faq .wp-block-details summary{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:1.02rem;letter-spacing:-.02em}
.pi-faq .wp-block-details p{color:var(--muted);font-size:.95rem;margin-top:12px}
/* Closing CTA: inverted panel, the one dark moment */
.pi-cta{background:var(--ink);color:var(--paper);border-radius:16px;padding:clamp(36px,6vw,80px)}
.pi-cta h2,.pi-cta p{color:var(--paper)}
.pi-cta p{opacity:.72;max-width:52ch}
.pi-cta .wp-block-button__link{background:var(--paper);color:var(--ink)}
@media(max-width:680px){
.pi-svc .wp-block-column,.pi-steps .wp-block-column,.pi-pod .wp-block-column{padding-right:0}
}
/* ---------- Hero answer-engine panel ---------- */
@keyframes pi-blink{0%,49%{opacity:1}50%,100%{opacity:0}}
.pi-panel{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:clamp(20px,2.5vw,28px);box-shadow:0 40px 80px -50px rgba(20,18,16,.5)}
.pi-panel-head{display:flex;align-items:center;gap:8px;font-family:'JetBrains Mono',monospace;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding-bottom:16px;border-bottom:1px solid var(--line)}
.pi-dot{width:6px;height:6px;border-radius:50%;background:var(--ink);flex:none;animation:pi-pulse 2s ease-in-out infinite}
.pi-panel-label{font-family:'JetBrains Mono',monospace;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.pi-q{font-size:1.06rem;font-weight:500;line-height:1.4;min-height:2.9em;transition:opacity .35s ease}
.pi-caret{display:inline-block;width:8px;height:1.05em;background:var(--ink);margin-left:2px;vertical-align:-2px;animation:pi-blink 1.1s step-end infinite}
.pi-answer-wrap{border-top:1px solid var(--line);padding-top:18px;margin-top:14px}
.pi-a{font-size:1.02rem;line-height:1.5;color:var(--ink);min-height:3em;max-width:none;transition:opacity .35s ease}
.pi-a mark,.pi-hl{background:transparent;color:var(--ink);font-weight:700;box-shadow:inset 0 -.5em 0 var(--faint);padding:0 2px}
.pi-cite{display:inline-flex;align-items:center;gap:7px;font-family:'JetBrains Mono',monospace;font-size:.7rem;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:5px 12px;margin-top:14px}
.pi-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:20px}
.pi-chips span{font-family:'JetBrains Mono',monospace;font-size:.68rem;color:var(--ink);border:1px solid var(--line);border-radius:6px;padding:4px 10px}
/* ---------- Marquee strip ---------- */
.pi-marquee-wrap{border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;padding:16px 0}
.pi-marquee{display:flex;width:max-content;animation:pi-marq 34s linear infinite;font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:clamp(1.1rem,2vw,1.6rem);letter-spacing:-.01em;color:var(--muted)}
.pi-marquee span{display:flex;gap:44px;padding-right:44px;white-space:nowrap}
/* ---------- Count-up stats ---------- */
.pi-stat-n{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:clamp(3rem,6vw,4.6rem);line-height:.9;letter-spacing:-.03em}
.pi-stat-l{font-family:'JetBrains Mono',monospace;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:12px}
@media(prefers-reduced-motion:reduce){
.pi-dot,.pi-caret,.pi-marquee{animation:none}
}
/* ---------- Service pages ---------- */
.pi-grid6{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:0 clamp(26px,4vw,54px)}
.pi-grid6 > div{border-top:1px solid var(--line);padding:22px 0}
.pi-grid6 h3{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:1.02rem;letter-spacing:-.02em;margin:8px 0 8px}
.pi-grid6 p{color:var(--muted);font-size:.93rem;line-height:1.6;max-width:40ch}
.pi-problem{max-width:62ch}
.pi-problem p{color:var(--muted);font-size:1.02rem;line-height:1.65;max-width:none}
/* Small stat panel used in service heroes */
.pi-metrics{display:grid;grid-template-columns:1fr 1fr;gap:18px 20px;margin-top:18px}
.pi-metrics .n{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:clamp(1.5rem,3vw,2.1rem);line-height:1;letter-spacing:-.03em}
.pi-metrics .l{font-family:'JetBrains Mono',monospace;font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:7px}
.pi-note{font-family:'JetBrains Mono',monospace;font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:20px;padding-top:14px;border-top:1px solid var(--line)}
.pi-engines{display:flex;flex-direction:column;gap:0;margin-top:6px}
.pi-engines div{display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid var(--line);padding:13px 0;font-size:.93rem}
.pi-engines span{font-family:'JetBrains Mono',monospace;font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.pi-bigcount{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:clamp(2.6rem,6vw,4rem);line-height:.92;letter-spacing:-.03em}
.pi-slug{font-family:'JetBrains Mono',monospace;font-size:.8rem;color:var(--muted);border:1px solid var(--line);border-radius:6px;padding:7px 12px;display:inline-block;margin-top:16px}
/* ---------- Contact ---------- */
.pi-contact-info div{border-top:1px solid var(--line);padding:16px 0}
.pi-contact-info .k{font-family:'JetBrains Mono',monospace;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.pi-contact-info .v{font-size:.98rem}
.pi-expect{counter-reset:x;margin-top:8px}
.pi-expect div{display:flex;gap:14px;border-top:1px solid var(--line);padding:14px 0;font-size:.94rem;color:var(--muted)}
.pi-expect b{font-family:'JetBrains Mono',monospace;font-size:.7rem;letter-spacing:.06em;color:var(--muted);flex:none;padding-top:3px}
.pi-form .wp-block-jetpack-contact-form{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:clamp(22px,3vw,34px)}
.pi-form label{font-family:'JetBrains Mono',monospace;font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.pi-form input,.pi-form select,.pi-form textarea{border:1px solid var(--line)!important;border-radius:9px!important;background:var(--paper)!important;color:var(--ink)!important;font-family:'Instrument Sans',system-ui,sans-serif!important;font-size:.96rem!important;padding:12px 14px!important}
.pi-form input:focus,.pi-form select:focus,.pi-form textarea:focus{outline:2px solid var(--ink);outline-offset:1px}
.pi-form button,.pi-form .wp-block-jetpack-button button{background:var(--ink)!important;color:var(--paper)!important;border:0!important;border-radius:999px!important;padding:16px 26px!important;font-family:'Instrument Sans',system-ui,sans-serif!important;font-weight:600!important;font-size:.98rem!important}
/* ---------- Per-page accent system ---------- */
:root{--accent:var(--ink);--accent-soft:rgba(20,18,16,.10)}
.pi-a-saas{--accent:oklch(0.58 0.12 252);--accent-soft:oklch(0.58 0.12 252 / .12)}
.pi-a-prog{--accent:oklch(0.55 0.11 150);--accent-soft:oklch(0.55 0.11 150 / .12)}
.pi-a-ai{--accent:oklch(0.6 0.13 42);--accent-soft:oklch(0.6 0.13 42 / .12)}
.pi-a-about{--accent:oklch(0.6 0.09 74);--accent-soft:oklch(0.6 0.09 74 / .12)}
.pi-a-contact{--accent:oklch(0.56 0.09 210);--accent-soft:oklch(0.56 0.09 210 / .12)}
.pi-a-blog{--accent:oklch(0.55 0.13 300);--accent-soft:oklch(0.55 0.13 300 / .12)}
[data-theme="dark"] .pi-a-saas,.is-dark .pi-a-saas{--accent:oklch(0.72 0.11 252)}
[data-theme="dark"] .pi-a-prog,.is-dark .pi-a-prog{--accent:oklch(0.74 0.1 150)}
[data-theme="dark"] .pi-a-ai,.is-dark .pi-a-ai{--accent:oklch(0.74 0.12 42)}
[data-theme="dark"] .pi-a-about,.is-dark .pi-a-about{--accent:oklch(0.76 0.09 74)}
[data-theme="dark"] .pi-a-contact,.is-dark .pi-a-contact{--accent:oklch(0.74 0.09 210)}
[data-theme="dark"] .pi-a-blog,.is-dark .pi-a-blog{--accent:oklch(0.74 0.12 300)}
/* Accent application */
.pi-num{color:var(--accent)}
h1 em,h2 em{font-style:italic;font-weight:600;color:var(--accent)}
.pi-eyebrow-dot{display:inline-flex;align-items:center;gap:12px;font-family:'JetBrains Mono',monospace;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.pi-eyebrow-dot::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--accent);animation:pi-pulse 2.4s ease-in-out infinite;flex:none}
.pi-engines span{color:var(--accent)}
.pi-hl{box-shadow:inset 0 -.5em 0 var(--accent-soft)}
/* ---------- Contact page, rebuilt to match design ---------- */
.pi-links{display:flex;flex-direction:column;border-top:1px solid var(--line);margin-top:clamp(28px,3.5vw,36px)}
.pi-links a,.pi-links div{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 2px;border-bottom:1px solid var(--line)}
.pi-links .k{display:block;font-family:'JetBrains Mono',monospace;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:5px}
.pi-links .v{font-family:'Bricolage Grotesque',sans-serif;font-weight:600;font-size:1.15rem}
.pi-links .arw{font-family:'Bricolage Grotesque',sans-serif;font-size:1.3rem;color:var(--muted)}
.pi-expect-card{margin-top:clamp(28px,4vw,40px);background:var(--faint);border:1px solid var(--line);border-radius:16px;padding:clamp(22px,3vw,30px)}
.pi-expect-card .h{font-family:'JetBrains Mono',monospace;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:16px}
.pi-expect-card ul{list-style:none;display:flex;flex-direction:column;gap:12px;margin:0;padding:0}
.pi-expect-card li{display:flex;gap:12px;align-items:flex-start}
.pi-expect-card li b{color:var(--accent);font-weight:700;flex:none}
/* Jetpack form styled to the design */
.pi-form .wp-block-jetpack-contact-form{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:clamp(22px,3vw,34px);box-shadow:0 40px 80px -55px rgba(20,18,16,.5);display:flex;flex-direction:column;gap:18px}
.pi-form .wp-block-jetpack-contact-form .grunion-field-wrap{margin:0}
.pi-form label,.pi-form .grunion-field-label{font-family:'JetBrains Mono',monospace!important;font-size:.66rem!important;letter-spacing:.08em!important;text-transform:uppercase!important;color:var(--muted)!important;font-weight:400!important;margin-bottom:8px!important}
.pi-form input[type=text],.pi-form input[type=email],.pi-form input[type=url],.pi-form select,.pi-form textarea{width:100%;background:var(--paper)!important;border:1px solid var(--line)!important;border-radius:10px!important;padding:13px 14px!important;font-family:'Instrument Sans',system-ui,sans-serif!important;font-size:.96rem!important;color:var(--ink)!important;box-shadow:none!important}
.pi-form input:focus,.pi-form select:focus,.pi-form textarea:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)!important}
.pi-form textarea{min-height:130px;resize:vertical}
.pi-form button[type=submit],.pi-form .wp-block-jetpack-button button{background:var(--ink)!important;color:var(--paper)!important;border:0!important;border-radius:999px!important;padding:16px 26px!important;font-family:'Instrument Sans',system-ui,sans-serif!important;font-weight:600!important;font-size:.98rem!important;width:auto;cursor:pointer}
/* Pair fields two-up like the design */
.pi-form .wp-block-jetpack-contact-form > .wp-block-jetpack-field-name,
.pi-form .wp-block-jetpack-contact-form > .wp-block-jetpack-field-email{width:calc(50% - 8px);display:inline-block;vertical-align:top}
@media(max-width:680px){
.pi-form .wp-block-jetpack-contact-form > .wp-block-jetpack-field-name,
.pi-form .wp-block-jetpack-contact-form > .wp-block-jetpack-field-email{width:100%}
}
/* ---------- Measure without auto-centring ----------
WordPress constrained layout applies margin-left/right:auto to direct
children. Any narrower max-width therefore centres the element away from
its heading. Pin the start edge and let the measure run to the right. */
.is-layout-constrained > p,
.is-layout-constrained > .pi-lede,
.wp-block-group.pi-section > p,
.wp-block-group.pi-cta > p{
max-width:68ch;
margin-left:0!important;
margin-right:auto!important;
}
.pi-lede{max-width:56ch;color:var(--muted);font-size:1.02rem;margin-left:0!important;margin-right:auto!important}
.pi-cta p{max-width:52ch;margin-left:0!important;margin-right:auto!important}
.wp-block-column p{max-width:none;margin-left:0!important;margin-right:0!important}
/* Section headings and their lede share one start edge */
.is-layout-constrained > h1,
.is-layout-constrained > h2,
.is-layout-constrained > h3{margin-left:0!important;margin-right:auto!important}
/* "Why founders" headline sits in a 38% column: step it down from display scale */
.pi-why h2{font-size:clamp(2rem,3.4vw,2.9rem);line-height:1.02}
/* FAQ accordion: restore the plus / minus marker */
.pi-faq .wp-block-details summary{position:relative;padding-right:30px;list-style:none;cursor:pointer}
.pi-faq .wp-block-details summary::-webkit-details-marker,
.pi-faq .wp-block-details summary::marker{display:none;content:''}
.pi-faq .wp-block-details summary::after{content:'+';position:absolute;right:2px;top:50%;transform:translateY(-50%);font-family:'JetBrains Mono',monospace;font-size:1.1rem;color:var(--muted);line-height:1}
.pi-faq .wp-block-details[open] summary::after{content:'\2212'}
/* ---------- Why me: 2x2 hairline grid (matches source design) ---------- */
.pi-whygrid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.pi-whygrid > div{background:var(--card);padding:clamp(30px,3.4vw,44px)}
.pi-whygrid .n{font-family:'JetBrains Mono',monospace;font-size:.7rem;color:var(--muted);padding-bottom:16px;border-bottom:1px solid var(--line);margin-bottom:20px}
.pi-whygrid h3{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:1.5rem;letter-spacing:-.02em;margin:0 0 10px;line-height:1.1}
.pi-whygrid p{color:var(--muted);font-size:1rem;line-height:1.6;max-width:38ch;margin:0}
.pi-whyhead{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:clamp(2rem,4.6vw,3.4rem);line-height:1;letter-spacing:-.03em;max-width:20ch;margin:0 0 clamp(36px,5vw,60px)}
@media(max-width:680px){.pi-whygrid{grid-template-columns:1fr}}
/* ---------- Testimonials: three cards on a tinted band ---------- */
.pi-tband{border-top:1px solid var(--line);background:var(--faint);padding:clamp(56px,8vw,110px) 0}
.pi-tgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(24px,3vw,36px)}
.pi-tgrid figure{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:clamp(28px,3.5vw,40px);margin:0}
.pi-tgrid blockquote{font-family:'Bricolage Grotesque',sans-serif;font-weight:600;font-size:clamp(1rem,1.4vw,1.15rem);line-height:1.35;letter-spacing:-.02em;margin:0;padding:0;border:0}
.pi-tgrid figcaption{font-family:'JetBrains Mono',monospace;font-size:.74rem;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin-top:22px;line-height:1.5}
/* ---------- Section eyebrows and tinted bands ---------- */
.pi-eb{font-family:'JetBrains Mono',monospace;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 20px}
.pi-band{background:var(--faint);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
/* Two-column section header: heading left, lede right */
.pi-sechead{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(24px,4vw,56px);align-items:start}
.pi-sechead h2{margin:0}
.pi-sechead .lede{color:var(--muted);font-size:1.02rem;line-height:1.6;margin:0;padding-top:8px}
@media(max-width:780px){.pi-sechead{grid-template-columns:1fr}}
/* ---------- Services: full-width rows ---------- */
.pi-svcrows{margin-top:clamp(32px,5vw,56px);border-top:1px solid var(--line)}
.pi-svcrows a{display:grid;grid-template-columns:120px 1fr 48px;align-items:center;gap:clamp(16px,3vw,40px);padding:clamp(28px,4vw,48px) 0;border-bottom:1px solid var(--line);color:var(--ink)}
.pi-svcrows a:hover{opacity:1}
.pi-svcrows a:hover .arw{transform:translate(4px,-4px)}
.pi-svcrows .n{font-family:'JetBrains Mono',monospace;font-size:.8rem;color:var(--muted)}
.pi-svcrows h3{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:clamp(1.5rem,2.6vw,2.1rem);letter-spacing:-.025em;line-height:1.05;margin:0 0 12px}
.pi-svcrows h3 .sub{color:var(--muted)}
.pi-svcrows p{color:var(--muted);font-size:1rem;line-height:1.6;max-width:62ch;margin:0}
.pi-svcrows .arw{font-size:1.5rem;color:var(--ink);justify-self:end;transition:transform .25s ease;line-height:1}
@media(max-width:680px){.pi-svcrows a{grid-template-columns:1fr;gap:10px}.pi-svcrows .arw{justify-self:start}}
/* ---------- Process: rule under the number ---------- */
.pi-steps .wp-block-column{border-top:0;padding-top:0}
.pi-steps{border-top:0}
.pi-stepnum{font-family:'JetBrains Mono',monospace;font-size:.8rem;color:var(--muted);padding-bottom:16px;border-bottom:1px solid var(--line);margin-bottom:20px}
/* Why-me grid: number without a rule (matches source) */
.pi-whygrid .n{border-bottom:0;padding-bottom:0;margin-bottom:clamp(20px,3vw,30px)}
/* ---------- Podcast cards ---------- */
.pi-podgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(20px,2.6vw,32px);margin-top:clamp(32px,5vw,56px)}
.pi-podgrid a{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden;color:var(--ink)}
.pi-podgrid a:hover{opacity:1}
.pi-podgrid .thumb{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--faint)}
.pi-podgrid .thumb img{width:100%;height:100%;object-fit:cover;display:block}
.pi-podgrid .thumb::after{content:'';position:absolute;inset:0;margin:auto;width:56px;height:56px;border-radius:50%;background:rgba(20,18,16,.62);background-image:url("data:image/svg+xml;utf8,");background-size:24px;background-repeat:no-repeat;background-position:center;transition:transform .25s ease}
.pi-podgrid a:hover .thumb::after{transform:scale(1.08)}
.pi-podgrid .body{padding:clamp(18px,2.2vw,26px)}
.pi-podgrid .kicker{font-family:'JetBrains Mono',monospace;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:10px;line-height:1.5}
.pi-podgrid h3{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:1.05rem;letter-spacing:-.02em;line-height:1.25;margin:0 0 14px}
.pi-podgrid .watch{font-family:'JetBrains Mono',monospace;font-size:.78rem;color:var(--muted)}
/* Chips with checkmarks */
.pi-chips span::before{content:'\2713';margin-right:6px;color:var(--muted)}
/* Full-bleed bands: restore the site gutter and 1180px column inside */
.pi-bandinner{padding-left:0;padding-right:0}
/* ---------- Tinted bands ----------
The band must share the exact content box as every other section, so it is
no longer alignfull. WordPress measures .alignfull against the viewport but
normal sections against .entry-content, which made the two drift apart as the
window narrowed. The full-bleed tint is painted behind instead. */
.pi-band{position:relative;background:transparent;border-top:0;border-bottom:0}
.pi-band::before{
content:'';
position:absolute;
top:0;bottom:0;left:50%;
width:100vw;
transform:translateX(-50%);
background:var(--faint);
border-top:1px solid var(--line);
border-bottom:1px solid var(--line);
z-index:0;
pointer-events:none;
}
.pi-band > *{position:relative;z-index:1}
/* ---------- Header ---------- */
.pi-nav-inner{max-width:1180px;margin:0 auto;padding:0 clamp(20px,4vw,40px);height:72px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.pi-logo{display:inline-flex;align-items:center;gap:5px}
.pi-logo:hover{opacity:1}
.pi-logo .mark{width:29px;height:29px;border-radius:8px;background:var(--ink);color:var(--paper);display:inline-flex;align-items:center;justify-content:center;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:1.02rem;flex:none;line-height:1}
.pi-logo .word{font-family:'Bricolage Grotesque',sans-serif;font-size:1.14rem;letter-spacing:-.03em;line-height:1;white-space:nowrap}
.pi-logo .word b{font-weight:800}
.pi-logo .word i{font-weight:500;font-style:italic}
.pi-navlinks{display:flex;align-items:center;gap:clamp(14px,2.4vw,30px);font-family:'JetBrains Mono',monospace;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;justify-content:flex-end}
.pi-navlinks > a{color:var(--muted)}
.pi-navcta{display:inline-flex;align-items:center;gap:8px;background:var(--ink)!important;color:var(--paper)!important;padding:10px 16px;border-radius:999px}
.pi-navcta:hover{opacity:.85}
.nav-svc{position:relative;display:inline-flex;align-items:center}
.nav-svc > a{color:var(--muted);display:inline-flex;align-items:center;gap:5px}
.nav-svc-caret{display:inline-block;font-size:.7em;opacity:.7;transition:transform .2s ease}
.nav-svc:hover .nav-svc-caret{transform:rotate(180deg)}
.nav-svc-menu{opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .2s ease,transform .2s ease,visibility .2s;pointer-events:none;position:absolute;top:100%;left:0;padding-top:15px;z-index:70}
.nav-svc:hover .nav-svc-menu,.nav-svc:focus-within .nav-svc-menu{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto}
.nav-svc-menu .inner{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:7px;min-width:250px;box-shadow:0 30px 60px -38px rgba(20,18,16,.55);display:flex;flex-direction:column;gap:2px;font-family:'Instrument Sans',system-ui,sans-serif;text-transform:none;letter-spacing:normal}
.nav-svc-menu a{display:flex;flex-direction:column;gap:2px;padding:10px 13px;border-radius:9px}
.nav-svc-menu a:hover{background:var(--faint);opacity:1}
.nav-svc-menu .t{font-size:.96rem;font-weight:600;color:var(--ink)}
.nav-svc-menu .d{font-size:.8rem;color:var(--muted)}
.pi-burger{display:none;background:none;border:0;color:var(--ink);font-size:1.4rem;cursor:pointer;padding:6px}
@media(max-width:900px){
.pi-navlinks{display:none;position:absolute;top:72px;left:0;right:0;background:var(--paper);border-bottom:1px solid var(--line);flex-direction:column;align-items:flex-start;gap:0;padding:12px clamp(20px,4vw,40px) 20px}
.pi-navlinks.open{display:flex}
.pi-navlinks > a,.nav-svc{padding:12px 0;width:100%}
.nav-svc-menu{position:static;opacity:1;visibility:visible;transform:none;pointer-events:auto;padding-top:8px;display:none}
.nav-svc.open .nav-svc-menu{display:block}
.nav-svc-menu .inner{box-shadow:none}
.pi-burger{display:block}
}
/* ---------- Footer ---------- */
.pi-footer{background:var(--ink);color:var(--paper);border-top:1px solid color-mix(in srgb, var(--paper) 14%, transparent)}
.pi-footer a{color:var(--paper)}
.pi-footer-inner{max-width:1180px;margin:0 auto;padding:clamp(48px,7vw,80px) clamp(20px,4vw,40px) 0}
.pi-footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:clamp(28px,4vw,48px);align-items:start;padding-bottom:clamp(40px,5vw,60px)}
@media(max-width:820px){.pi-footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.pi-footer-grid{grid-template-columns:1fr}}
.pi-footer .blurb{max-width:34ch;opacity:.62;font-size:1rem;line-height:1.55;margin:18px 0 0}
.pi-footer .fcta{display:inline-flex;align-items:center;gap:9px;margin-top:22px;background:var(--paper);color:var(--ink)!important;padding:12px 20px;border-radius:999px;font-weight:600;font-size:.94rem}
.pi-footer .fcta:hover{opacity:.88}
.pi-footer .col-h{font-family:'JetBrains Mono',monospace;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;opacity:.5;margin-bottom:18px}
.pi-footer .col-l{display:flex;flex-direction:column;gap:12px}
.pi-footer .col-l a{opacity:.8;font-size:.98rem}
.pi-footer .col-l a:hover{opacity:1}
.pi-footer-bottom{border-top:1px solid color-mix(in srgb, var(--paper) 14%, transparent);padding:22px 0 30px;display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;font-family:'JetBrains Mono',monospace;font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;opacity:.5}
/* ---------- Closing CTA: full-bleed ink, centred, runs into the footer ----------
Same pseudo-element technique as the tinted bands so the content box stays
identical to every other section. */
.pi-cta-sec{position:relative;text-align:center;color:var(--paper);padding-top:clamp(64px,10vw,150px);padding-bottom:clamp(64px,10vw,150px)}
.pi-cta-sec::before{content:'';position:absolute;top:0;bottom:0;left:50%;width:100vw;transform:translateX(-50%);background:var(--ink);border-top:1px solid var(--line);z-index:0;pointer-events:none}
.pi-cta-sec > *{position:relative;z-index:1}
.pi-cta-sec .pi-eb{color:var(--paper);opacity:.6;margin:0 auto clamp(24px,4vw,40px)!important}
.pi-cta-sec h2{color:var(--paper);font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:clamp(2.4rem,7vw,6rem);line-height:.95;letter-spacing:-.035em;max-width:16ch;margin:0 auto!important;text-wrap:balance}
.pi-cta-sec p{color:var(--paper);opacity:.72;max-width:52ch;font-size:clamp(1.05rem,1.6vw,1.28rem);line-height:1.5;margin:clamp(24px,3vw,34px) auto 0!important}
.pi-cta-sec .wp-block-buttons{justify-content:center;margin-top:clamp(32px,4vw,48px)}
.pi-cta-sec .wp-block-button__link{background:var(--paper)!important;color:var(--ink)!important;padding:18px 34px!important;font-size:1.05rem!important;gap:12px}
/* The footer sits directly beneath, so drop its top rule to avoid a double line */
.pi-cta-sec + .pi-footer,
.pi-cta-sec ~ * .pi-footer{border-top:0}
/* ---------- Blog index ---------- */
.pi-bloghero{padding:clamp(40px,7vw,84px) 0 clamp(28px,4vw,40px)}
.pi-bloghero h1{max-width:15ch;font-size:clamp(2.6rem,6.4vw,5.4rem);line-height:.95}
.pi-bloghero p{max-width:56ch;color:var(--muted);font-size:clamp(1.1rem,1.6vw,1.3rem);margin-top:clamp(20px,3vw,28px)!important}
/* Featured post */
.pi-feat .wp-block-post-template{display:block;margin:0;padding:0;list-style:none}
.pi-feat li{list-style:none;margin:0}
.pi-feat .wp-block-columns{background:var(--card);border:1px solid var(--line);border-radius:22px;overflow:hidden;box-shadow:0 40px 80px -60px rgba(20,18,16,.5);margin:0}
.pi-feat .wp-block-post-featured-image{margin:0;height:100%;min-height:clamp(240px,32vw,420px)}
.pi-feat .wp-block-post-featured-image img{width:100%;height:100%;object-fit:cover}
.pi-feat .featbody{padding:clamp(28px,4vw,56px);display:flex;flex-direction:column;justify-content:center;gap:0}
.pi-feat .wp-block-post-title{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:clamp(1.7rem,3.2vw,2.6rem);line-height:1.04;letter-spacing:-.03em;margin:0 0 16px}
.pi-feat .wp-block-post-excerpt{color:var(--muted);font-size:1.1rem;margin:0 0 22px}
.pi-feat .wp-block-post-excerpt p{max-width:52ch;margin:0}
.pi-kicker{display:flex;align-items:center;gap:10px;font-family:'JetBrains Mono',monospace;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:18px}
.pi-meta{display:flex;align-items:center;flex-wrap:wrap;gap:10px;font-family:'JetBrains Mono',monospace;font-size:.74rem;color:var(--muted)}
.pi-meta .sep{opacity:.4}
/* Category pills */
.pi-cats{display:flex;flex-wrap:wrap;gap:10px;padding-bottom:clamp(28px,4vw,40px);border-bottom:1px solid var(--line)}
.pi-cats a{font-family:'JetBrains Mono',monospace;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;padding:9px 16px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--muted);transition:all .2s ease}
.pi-cats a:hover{border-color:var(--accent);color:var(--accent);opacity:1}
.pi-cats a.current{border-color:var(--accent);background:var(--accent);color:var(--paper)}
/* Post grid */
.pi-postgrid .wp-block-post-template{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:clamp(22px,3vw,34px);margin:0;padding:0}
.pi-postgrid li{list-style:none;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden;margin:0}
.pi-postgrid .wp-block-post-featured-image{margin:0;aspect-ratio:16/10;overflow:hidden}
.pi-postgrid .wp-block-post-featured-image img{width:100%;height:100%;object-fit:cover}
.pi-postgrid .cardbody{padding:clamp(20px,2.4vw,28px);display:flex;flex-direction:column;flex:1}
.pi-postgrid .wp-block-post-title{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:1.16rem;line-height:1.22;letter-spacing:-.02em;margin:0 0 12px}
.pi-postgrid .wp-block-post-excerpt{color:var(--muted);font-size:.95rem;margin:0 0 18px}
.pi-postgrid .wp-block-post-excerpt p{margin:0;max-width:none}
.pi-postgrid .wp-block-post-terms{font-family:'JetBrains Mono',monospace;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-bottom:12px}
.pi-postgrid .wp-block-post-date{font-family:'JetBrains Mono',monospace;font-size:.72rem;color:var(--muted);margin-top:auto}
/* ---------- Single post ---------- */
.pi-posthead{max-width:820px;margin:0 auto;padding:clamp(40px,7vw,84px) clamp(20px,4vw,40px) clamp(28px,4vw,40px);text-align:center}
.pi-posthead .crumb{display:flex;align-items:center;justify-content:center;gap:12px;font-family:'JetBrains Mono',monospace;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:clamp(22px,3vw,30px)}
.pi-posthead .crumb a{color:var(--muted)}
.pi-posthead .wp-block-post-terms{color:var(--accent)}
.pi-posthead .wp-block-post-title{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:clamp(2.2rem,5.4vw,4rem);line-height:1;letter-spacing:-.035em;max-width:18ch;margin:0 auto!important;text-wrap:balance}
.pi-posthead .wp-block-post-excerpt{max-width:58ch;margin:clamp(20px,3vw,28px) auto 0!important;color:var(--muted);font-size:clamp(1.1rem,1.6vw,1.3rem)}
.pi-posthead .wp-block-post-excerpt p{max-width:none;margin:0}
.pi-byline{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:clamp(26px,4vw,36px)}
.pi-byline img{width:44px;height:44px;border-radius:50%;object-fit:cover;border:1px solid var(--line);flex:none}
.pi-byline .who{text-align:left;font-family:'JetBrains Mono',monospace;font-size:.74rem;line-height:1.5}
.pi-byline .who .n{color:var(--ink);font-weight:500}
.pi-byline .who .d{color:var(--muted)}
.pi-posthero{max-width:1000px;margin:0 auto;padding:0 clamp(20px,4vw,40px) clamp(30px,4vw,44px)}
.pi-posthero .wp-block-post-featured-image{border-radius:18px;overflow:hidden;border:1px solid var(--line);aspect-ratio:16/8;box-shadow:0 40px 80px -55px rgba(20,18,16,.5);margin:0}
.pi-posthero .wp-block-post-featured-image img{width:100%;height:100%;object-fit:cover}
.pi-prose{max-width:720px;margin:0 auto;padding:0 clamp(20px,4vw,40px) clamp(56px,8vw,100px)}
.pi-prose p{font-size:1.08rem;line-height:1.75;margin:0 0 1.15em;max-width:none}
.pi-prose h2{font-size:clamp(1.6rem,3vw,2.2rem);line-height:1.1;margin:2em 0 .6em}
.pi-prose h3{font-size:clamp(1.2rem,2.2vw,1.5rem);line-height:1.2;margin:1.8em 0 .5em}
.pi-prose ul,.pi-prose ol{margin:0 0 1.15em;padding-left:1.3em}
.pi-prose li{margin-bottom:.5em;line-height:1.7}
.pi-prose blockquote{border-left:2px solid var(--accent);padding-left:20px;margin:1.8em 0;font-family:'Bricolage Grotesque',sans-serif;font-weight:600;font-size:1.2rem;line-height:1.4}
.pi-prose img{border-radius:16px}
.pi-prose a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--accent)}
@media(max-width:780px){
.pi-feat .wp-block-columns{flex-wrap:wrap!important}
.pi-feat .wp-block-post-featured-image{min-height:220px}
}
/* ---------- Close the gap between the CTA and the footer ----------
Block themes apply the global block gap as margin-block-start on each direct
child of .wp-site-blocks, which left a strip of paper ground between the ink
CTA and the ink footer. */
.wp-site-blocks > footer.wp-block-template-part{margin-block-start:0!important}
.wp-site-blocks > main{margin-block-end:0!important}
main > .pi-cta-sec:last-child{margin-bottom:0!important}
footer.wp-block-template-part{margin-top:0!important}
.pi-footer{margin-top:0}
/* ---------- Service pages ---------- */
.pi-crumb{display:flex;align-items:center;gap:14px;font-family:'JetBrains Mono',monospace;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:clamp(24px,4vw,40px)}
.pi-crumb a{color:var(--muted)}
.pi-crumb .sep{opacity:.4}
.pi-crumb .here{display:inline-flex;align-items:center;gap:8px;color:var(--accent)}
.pi-crumb .here::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--accent);animation:pi-pulse 2.4s ease-in-out infinite;flex:none}
.pi-svchero h1{max-width:16ch;font-size:clamp(2.6rem,6vw,5rem);line-height:.95}
.pi-svchero .pi-lede{max-width:56ch;font-size:clamp(1.05rem,1.5vw,1.24rem);margin:clamp(22px,3vw,30px) 0 clamp(28px,3.5vw,36px)!important}
/* Bar-chart panel */
.pi-bars{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:clamp(22px,2.6vw,30px);box-shadow:0 40px 80px -50px rgba(20,18,16,.5)}
.pi-bars .head{display:flex;align-items:center;justify-content:space-between;gap:12px;font-family:'JetBrains Mono',monospace;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding-bottom:18px;border-bottom:1px solid var(--line)}
.pi-bars .head .live{display:flex;align-items:center;gap:8px}
.pi-bars .head .live::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--accent);animation:pi-pulse 2s ease-in-out infinite;flex:none}
.pi-bars .rows{padding-top:24px;display:flex;flex-direction:column;gap:18px}
.pi-bars .row .lbl{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-family:'JetBrains Mono',monospace;font-size:.7rem;color:var(--muted);margin-bottom:8px}
.pi-bars .row .lbl b{color:var(--ink);font-weight:500}
.pi-bars .track{height:15px;border-radius:8px;background:var(--faint);overflow:hidden}
.pi-bars .fill{height:100%;border-radius:8px;background:var(--accent)}
.pi-bars .note{display:flex;align-items:center;gap:8px;font-family:'JetBrains Mono',monospace;font-size:.68rem;color:var(--muted);margin-top:22px;padding-top:16px;border-top:1px solid var(--line);line-height:1.5}
.pi-bars .note::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--accent);flex:none}
/* Simple stat panel (programmatic / ai pages) */
.pi-panel .pi-bigcount{color:var(--ink)}
/* "What's included": hairline grid, 3 across */
.pi-incgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:16px;overflow:hidden;margin-top:clamp(36px,5vw,56px)}
.pi-incgrid > div{background:var(--paper);padding:clamp(26px,3vw,40px)}
.pi-incgrid .n{font-family:'JetBrains Mono',monospace;font-size:.72rem;color:var(--accent);margin-bottom:clamp(18px,2.4vw,26px)}
.pi-incgrid h3{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:1.2rem;letter-spacing:-.02em;line-height:1.15;margin:0 0 10px}
.pi-incgrid p{color:var(--muted);font-size:.97rem;line-height:1.6;margin:0;max-width:36ch}
@media(max-width:900px){.pi-incgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.pi-incgrid{grid-template-columns:1fr}}
/* Accent eyebrow variant */
.pi-eb.accent{color:var(--accent)}
/* Process steps on service pages use accent numbers */
.pi-stepnum{color:var(--accent)}
/* ---------- Kill every gap between the last section and the footer ---------- */
.wp-site-blocks > main,
.entry-content,
.wp-block-post-content{margin-block-end:0!important;padding-block-end:0!important}
.wp-site-blocks > footer.wp-block-template-part{margin-block-start:0!important;padding-block-start:0!important;margin-block-end:0!important}
.entry-content > :last-child,
.wp-block-post-content > :last-child{margin-block-end:0!important}
.wp-site-blocks{padding-bottom:0!important;row-gap:0!important}
.pi-cta-sec::after{content:'';position:absolute;left:50%;bottom:-3px;width:100vw;height:6px;transform:translateX(-50%);background:var(--ink);z-index:0;pointer-events:none}
/* ---------- Animated bars ---------- */
.pi-bars .fill{width:0;transition:width 1.1s cubic-bezier(.16,.84,.44,1)}
@media(prefers-reduced-motion:reduce){.pi-bars .fill{transition:none}}
/* ---------- "Generating pages" panel (Programmatic SEO) ---------- */
.pi-gen{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:clamp(22px,2.6vw,30px);box-shadow:0 40px 80px -50px rgba(20,18,16,.5)}
.pi-gen .head{display:flex;align-items:center;justify-content:space-between;gap:12px;font-family:'JetBrains Mono',monospace;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding-bottom:18px;border-bottom:1px solid var(--line)}
.pi-gen .head .live{display:flex;align-items:center;gap:8px}
.pi-gen .head .live::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--accent);animation:pi-pulse 2s ease-in-out infinite;flex:none}
.pi-gen .head b{color:var(--ink);font-weight:500;letter-spacing:.06em}
.pi-gen .tokens{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:20px 0 18px;font-family:'JetBrains Mono',monospace;font-size:.74rem;color:var(--muted)}
.pi-gen .tok{border:1px solid var(--line);border-radius:8px;padding:7px 11px;background:var(--paper);color:var(--ink)}
.pi-gen .slug{color:var(--muted)}
.pi-gen .grid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.pi-gen .cell{border:1px solid var(--line);border-radius:8px;background:var(--paper);aspect-ratio:3/4;padding:10px;display:flex;flex-direction:column;gap:5px;opacity:0;transform:translateY(6px)}
.pi-gen .cell.in{opacity:1;transform:none;transition:opacity .45s ease,transform .45s ease}
.pi-gen .cell i{display:block;height:3px;border-radius:2px;background:var(--line)}
.pi-gen .cell i:nth-child(1){background:var(--accent);width:72%}
.pi-gen .cell i:nth-child(2){width:100%}
.pi-gen .cell i:nth-child(3){width:62%}
.pi-gen .note{display:flex;align-items:flex-start;gap:8px;font-family:'JetBrains Mono',monospace;font-size:.68rem;color:var(--muted);margin-top:22px;padding-top:16px;border-top:1px solid var(--line);line-height:1.6}
.pi-gen .note::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--accent);flex:none;margin-top:6px}
@media(prefers-reduced-motion:reduce){.pi-gen .cell{opacity:1;transform:none}}
@media(max-width:520px){.pi-gen .grid{grid-template-columns:repeat(4,1fr)}}
/* ---------- "AI answer engines" panel (AI Search) ---------- */
.pi-eng{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:clamp(22px,2.6vw,30px);box-shadow:0 40px 80px -50px rgba(20,18,16,.5)}
.pi-eng .head{display:flex;align-items:center;justify-content:space-between;gap:12px;font-family:'JetBrains Mono',monospace;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding-bottom:18px;border-bottom:1px solid var(--line)}
.pi-eng .head .live{display:flex;align-items:center;gap:8px}
.pi-eng .head .live::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--accent);animation:pi-pulse 2s ease-in-out infinite;flex:none}
.pi-eng .lbl{font-family:'JetBrains Mono',monospace;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.pi-eng .ask{padding:20px 0 4px}
.pi-eng .q{font-size:1.06rem;font-weight:500;line-height:1.4}
.pi-eng .rows{border-top:1px solid var(--line);padding-top:20px;margin-top:16px}
.pi-eng .row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 0;border-bottom:1px solid var(--line);font-size:1rem}
.pi-eng .row:last-child{border-bottom:0;padding-bottom:0}
.pi-eng .pill{display:inline-flex;align-items:center;gap:7px;font-family:'JetBrains Mono',monospace;font-size:.72rem;color:var(--accent);border:1px solid var(--accent);border-radius:999px;padding:6px 13px;white-space:nowrap;opacity:0;transform:translateY(4px)}
.pi-eng .pill.in{opacity:1;transform:none;transition:opacity .4s ease,transform .4s ease}
.pi-eng .pill::before{content:'\2713'}
@media(prefers-reduced-motion:reduce){.pi-eng .pill{opacity:1;transform:none}}
/* ---------- About ---------- */
.pi-abouthero h1{max-width:15ch;font-size:clamp(2.6rem,6vw,4.6rem);line-height:.98}
.pi-abouthero .pi-lede{max-width:48ch;font-size:clamp(1.05rem,1.5vw,1.2rem);margin:clamp(22px,3vw,30px) 0 clamp(28px,3.5vw,36px)!important}
.pi-abouthero .wp-block-image{margin:0}
.pi-abouthero .wp-block-image img{width:100%;border-radius:20px;display:block;box-shadow:0 40px 80px -55px rgba(20,18,16,.5)}
.pi-numgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:clamp(24px,4vw,48px);margin-top:clamp(24px,3vw,34px)}
.pi-story{max-width:70ch}
.pi-story p{font-size:1.12rem;line-height:1.7;color:var(--muted);margin:0 0 1.35em;max-width:none}
.pi-story p:first-of-type{color:var(--ink)}
.pi-story p:last-child{margin-bottom:0}
.pi-accent-t{color:var(--accent);font-weight:700}
/* Principles: 2x2 hairline grid, muted numbers */
.pi-pringrid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:16px;overflow:hidden;margin-top:clamp(36px,5vw,56px)}
.pi-pringrid > div{background:var(--card);padding:clamp(30px,3.4vw,44px)}
.pi-pringrid .n{font-family:'JetBrains Mono',monospace;font-size:.72rem;color:var(--muted);margin-bottom:clamp(22px,3vw,32px)}
.pi-pringrid h3{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:1.32rem;letter-spacing:-.02em;line-height:1.15;margin:0 0 10px}
.pi-pringrid p{color:var(--muted);font-size:1rem;line-height:1.6;margin:0;max-width:40ch}
@media(max-width:680px){.pi-pringrid{grid-template-columns:1fr}}
/* ---------- Contact form refinements ---------- */
.pi-form .wp-block-jetpack-contact-form{border-radius:20px}
/* Interest choices render as pill checkboxes, not a dropdown */
.pi-form .wp-block-jetpack-field-checkbox-multiple .grunion-checkbox-multiple-options,
.pi-form fieldset .grunion-checkbox-multiple-options{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}
.pi-form .grunion-checkbox-multiple-label,
.pi-form label.grunion-field-label.checkbox-multiple{display:inline-flex!important;align-items:center;gap:10px;border:1px solid var(--line);border-radius:999px;padding:10px 16px;background:var(--paper);cursor:pointer;
font-family:'Instrument Sans',system-ui,sans-serif!important;font-size:.95rem!important;font-weight:400!important;
text-transform:none!important;letter-spacing:normal!important;color:var(--ink)!important;margin:0!important;transition:border-color .2s ease}
.pi-form .grunion-checkbox-multiple-label:hover{border-color:var(--accent)}
.pi-form input[type=checkbox]{appearance:none;-webkit-appearance:none;width:17px;height:17px;border:1px solid var(--line);border-radius:4px;background:var(--card);flex:none;cursor:pointer;position:relative;margin:0}
.pi-form input[type=checkbox]:checked{background:var(--accent);border-color:var(--accent)}
.pi-form input[type=checkbox]:checked::after{content:'\2713';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--paper);font-size:.72rem}
/* Full-width submit */
.pi-form .wp-block-jetpack-button,
.pi-form .wp-block-button{width:100%}
.pi-form button[type=submit]{width:100%!important;justify-content:center}
/* Footnote under the form */
.pi-formnote{font-family:'JetBrains Mono',monospace;font-size:.72rem;line-height:1.6;color:var(--muted);text-align:center;margin-top:18px}
/* ---------- Checkbox pills: match Jetpack's actual markup ---------- */
.pi-form .jetpack-field-multiple__fieldset{border:0;padding:0;margin:0}
.pi-form legend.grunion-field-label,
.pi-form legend .grunion-label-text{font-family:'JetBrains Mono',monospace!important;font-size:.66rem!important;letter-spacing:.08em!important;text-transform:uppercase!important;color:var(--muted)!important;font-weight:400!important}
.pi-form legend.grunion-field-label{margin-bottom:10px!important;padding:0}
.pi-form .grunion-checkbox-multiple-options{display:flex!important;flex-wrap:wrap;gap:10px;margin-top:4px}
.pi-form .grunion-checkbox-multiple-options label.contact-form-field{
display:inline-flex!important;align-items:center;gap:10px;
border:1px solid var(--line);border-radius:999px;padding:10px 16px;background:var(--paper);cursor:pointer;
font-family:'Instrument Sans',system-ui,sans-serif!important;font-size:.95rem!important;font-weight:400!important;
text-transform:none!important;letter-spacing:normal!important;color:var(--ink)!important;margin:0!important;
transition:border-color .2s ease}
.pi-form .grunion-checkbox-multiple-options label.contact-form-field:hover{border-color:var(--accent)}
.pi-form .grunion-checkbox-multiple-options label.contact-form-field span{font-family:inherit!important;font-size:inherit!important;text-transform:none!important;letter-spacing:normal!important;color:var(--ink)!important}
.pi-form input.checkbox-multiple[type=checkbox]{appearance:none;-webkit-appearance:none;width:17px;height:17px;border:1px solid var(--line)!important;border-radius:4px!important;background:var(--card)!important;flex:none;cursor:pointer;position:relative;margin:0!important;padding:0!important;box-shadow:none!important}
.pi-form input.checkbox-multiple[type=checkbox]:checked{background:var(--accent)!important;border-color:var(--accent)!important}
.pi-form input.checkbox-multiple[type=checkbox]:checked::after{content:'\2713';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--paper);font-size:.7rem;line-height:1}
/* ---------- Contact form: corrected against Jetpack's real markup ---------- */
.pi-form .jetpack-contact-form-container{
background:var(--card);
border:1px solid var(--line);
border-radius:20px;
padding:clamp(22px,3vw,34px);
box-shadow:0 40px 80px -55px rgba(20,18,16,.5);
display:flex!important;
flex-wrap:wrap!important;
gap:18px!important;
align-items:flex-start;
}
.pi-form .grunion-field-wrap{margin:0!important}
.pi-form .grunion-field-width-50-wrap{flex:0 0 calc(50% - 9px);max-width:calc(50% - 9px)}
.pi-form .grunion-field-width-100-wrap{flex:0 0 100%;max-width:100%}
@media(max-width:600px){
.pi-form .grunion-field-width-50-wrap{flex:0 0 100%;max-width:100%}
}
/* The inner span must NOT be a second pill */
.pi-form .grunion-checkbox-multiple-label{
border:0!important;background:none!important;padding:0!important;border-radius:0!important;
display:inline!important;box-shadow:none!important;margin:0!important;
font-family:'Instrument Sans',system-ui,sans-serif!important;font-size:.95rem!important;font-weight:400!important;
text-transform:none!important;letter-spacing:normal!important;color:var(--ink)!important}
.pi-form .grunion-field-text{
font-family:'Instrument Sans',system-ui,sans-serif!important;font-size:.95rem!important;font-weight:400!important;
text-transform:none!important;letter-spacing:normal!important;color:var(--ink)!important}
/* The checkbox input carries grunion-field-width-100; pin it small */
.pi-form input.checkbox-multiple[type=checkbox]{width:17px!important;height:17px!important;min-width:0!important;max-width:17px!important;flex:none!important}
/* Required marker sits quietly beside the label */
.pi-form .grunion-label-required{font-size:.9em;opacity:.55;text-transform:none;letter-spacing:normal}
/* Submit spans the panel */
.pi-form .grunion-field-button-wrap,
.pi-form .wp-block-jetpack-button{flex:0 0 100%;max-width:100%;width:100%}
/* ---------- Force the form grid regardless of generated layout CSS ---------- */
.pi-form .jetpack-contact-form-container{flex-direction:row!important;align-items:flex-start!important;justify-content:flex-start!important}
.pi-form .grunion-field-wrap{align-self:stretch}
.pi-form .grunion-field-wrap input[type=text],
.pi-form .grunion-field-wrap input[type=email],
.pi-form .grunion-field-wrap input[type=url],
.pi-form .grunion-field-wrap input[type=tel],
.pi-form .grunion-field-wrap select,
.pi-form .grunion-field-wrap textarea{width:100%!important;max-width:100%!important;box-sizing:border-box}
.pi-form .grunion-field-wrap textarea{min-height:150px}
/* Checkbox inputs stay small, they are not text fields */
.pi-form input.checkbox-multiple[type=checkbox]{width:17px!important;max-width:17px!important;min-width:17px!important;height:17px!important}
/* Options row wraps horizontally */
.pi-form .grunion-checkbox-multiple-options{flex-direction:row!important;align-items:center!important}
.pi-form .grunion-checkbox-multiple-options label.contact-form-field{width:auto!important;max-width:none!important;flex:0 0 auto!important}
/* Submit fills the panel */
.pi-form .jetpack-contact-form-container > .wp-block-jetpack-button,
.pi-form .jetpack-contact-form-container > div:last-child:has(button){flex:0 0 100%;max-width:100%}
.pi-form button[type=submit]{width:100%!important}
/* ---------- Form layout: grid beats any inherited flex-direction ---------- */
.pi-form .jetpack-contact-form-container{
display:grid!important;
grid-template-columns:1fr 1fr!important;
gap:16px 18px!important;
align-items:start!important;
}
.pi-form .jetpack-contact-form-container > *{min-width:0}
.pi-form .grunion-field-width-50-wrap{grid-column:span 1!important;max-width:none!important;flex:none!important}
.pi-form .grunion-field-width-100-wrap{grid-column:1 / -1!important;max-width:none!important;flex:none!important}
.pi-form .jetpack-contact-form-container > div:last-child{grid-column:1 / -1}
@media(max-width:600px){
.pi-form .jetpack-contact-form-container{grid-template-columns:1fr!important}
.pi-form .grunion-field-width-50-wrap{grid-column:1 / -1!important}
}
/* Textarea back to a sane height */
.pi-form .grunion-field-wrap textarea{min-height:132px!important;height:132px!important}
/* The design shows no "(required)" marker */
.pi-form .grunion-label-required{display:none!important}
/* Footnote sits tight under the panel */
.pi-formnote{margin-top:14px}
/* ---------- Grid must sit on the