/* =========================================================================
   Precious Okoro Portfolio — design system
   Built from design_handoff_portfolio/README.md + the 8 .dc.html references.
   ========================================================================= */

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Manrope',sans-serif;
  -webkit-font-smoothing:antialiased;
  transition:background-color .25s ease,color .25s ease;
}
img{display:block;max-width:100%}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-strong)}
button{font:inherit}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px;
}
input,select,textarea{font:inherit}
::selection{background:var(--accent);color:var(--surface)}

/* ===== TOKENS ===== */
:root{
  --paper:#FAF6ED;--paper-rgb:250,246,237;
  --surface:#FFFCF5;
  --ink:#17130E;--ink-rgb:23,19,14;
  --ink-soft:#4A4438;
  --ink-faint:#6B6459;
  --fade:#746D5A;
  --accent:#6B4FD6;
  --accent-strong:#5942AA;
  --mint-text:#0E7A50;
  --amber-text:#8C5E0C;
  --coral-text:#B23A5C;
  --sky-text:#1D6E96;
  --t-mint-a:#DDF2E6;--t-mint-b:#F1F7EE;
  --t-amber-a:#F7E7C4;--t-amber-b:#FBF2DF;
  --t-violet-a:#E4DDFA;--t-violet-b:#F1EDFB;
  --t-coral-a:#FBE1E7;--t-coral-b:#FDF0F2;
  --t-sky-a:#DDEBF7;--t-sky-b:#F0F6FB;
  --t-violet-chip:#ECE7FB;
  --t-neutral:#EFEAE0;
  --t-field:#F1ECE1;
  color-scheme:light;
}
:root[data-theme="dark"]{
  --paper:#0A0908;--paper-rgb:10,9,8;
  --surface:#161411;
  --ink:#F0EDE6;--ink-rgb:240,237,230;
  --ink-soft:#B8B2A3;
  --ink-faint:#9A9184;
  --fade:#888070;
  --accent:#9B85E8;
  --accent-strong:#B6A6F0;
  --mint-text:#3CC98A;
  --amber-text:#E5B04A;
  --coral-text:#F08DA6;
  --sky-text:#5DB3EA;
  --t-mint-a:#11281D;--t-mint-b:#0D1C15;
  --t-amber-a:#2B2110;--t-amber-b:#1C170D;
  --t-violet-a:#221B3D;--t-violet-b:#17132A;
  --t-coral-a:#30161E;--t-coral-b:#211116;
  --t-sky-a:#132534;--t-sky-b:#0E1C27;
  --t-violet-chip:#261F42;
  --t-neutral:#1C1915;
  --t-field:#221E19;
  color-scheme:dark;
}

@keyframes reelUp{from{transform:translateY(0)}to{transform:translateY(-50%)}}
@keyframes reelDown{from{transform:translateY(-50%)}to{transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){ [data-reel]{animation:none!important} }

/* ===== LAYOUT ===== */
/* padding-left/right only (not shorthand): the shorthand's 0 top/bottom would
   beat the lower-specificity `section{padding-bottom:...}` fallback below for
   every <section class="wrap ...">, silently zeroing their vertical spacing
   wherever a component doesn't set its own padding-bottom inline. */
.wrap{max-width:1200px;margin:0 auto;padding-left:32px;padding-right:32px}
.skip-link{position:absolute;left:-999px;top:0;background:var(--ink);color:var(--surface);padding:12px 20px;border-radius:0 0 10px 0;z-index:100}
.skip-link:focus{left:0}

main{display:block}
main > section,
main > .wrap{padding-top:0}
/* Default bottom gap for the plain <section class="wrap"> blocks (Testimonials,
   Writing, Side Projects, The Human Side, Work's #work list) that don't declare
   their own padding — per the handoff spec, "sections are separated by bottom
   padding of 140-160px." Components with their own rhythm (.hero, .proof-module,
   .think-section, and anything with an inline padding-bottom) override this via
   higher specificity, so this only fills the gap for sections that were falling
   through to zero. */
section{padding-bottom:clamp(72px,14vw,160px)}

/* ===== NAV ===== */
header.nav{position:sticky;top:0;z-index:10;background:rgba(var(--paper-rgb),0.88);backdrop-filter:blur(12px)}
.nav-inner{max-width:1200px;margin:0 auto;padding:20px 32px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.wordmark{display:inline-flex;align-items:center;gap:10px;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:17px;color:var(--ink);letter-spacing:-0.01em}
.wordmark img{width:30px;height:30px;flex-shrink:0}
.nav .links{display:flex;align-items:center;gap:28px;flex-wrap:wrap;font-size:14.5px;font-weight:500}
.nav .links > a{color:var(--ink-soft);transition:color .15s ease}
.nav .links > a:not(.nav-cta):hover{color:var(--ink)}
.nav .links > a.active{color:var(--ink);font-weight:600;border-bottom:2px solid #1FAE6E;padding-bottom:2px}
.nav .links > a.nav-cta{color:var(--surface);background:var(--ink);padding:10px 18px;border-radius:999px;transition:background .15s ease}
.nav .links > a.nav-cta:hover{background:var(--accent);color:var(--surface)}
.nav .links > a.nav-cta.active{background:var(--accent)}
.theme-toggle{width:40px;height:40px;border-radius:50%;border:1px solid rgba(var(--ink-rgb),0.22);background:transparent;color:var(--ink);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;transition:border-color .15s ease}
.theme-toggle:hover{border-color:var(--ink)}
.theme-toggle .icon-moon{display:none}
:root[data-theme="dark"] .theme-toggle .icon-sun{display:none}
:root[data-theme="dark"] .theme-toggle .icon-moon{display:block}
.nav-toggle{display:none}

/* ===== TYPOGRAPHY PATTERNS ===== */
h1,h2,h3{font-family:'Space Grotesk',sans-serif;font-weight:700;margin:0}
.eyebrow{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--accent)}
.section-eyebrow{font-family:'IBM Plex Mono',monospace;font-size:14px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase}
.fade{color:var(--fade);font-weight:500}
.accent-italic{font-family:'Fraunces',serif;font-style:italic;font-weight:500;color:var(--accent);letter-spacing:-0.02em}
/* Sticker-style highlight: solid border + hard offset shadow, no blur.
   var(--ink) is near-black in light mode and near-white in dark mode, so the
   border/shadow self-adjusts per theme without a separate dark-mode rule. A
   fixed, moderate radius (rather than a 999px stadium) means a 2-word phrase
   that wraps to 2 lines never balloons into an oversized capsule. */
.highlight-pill{display:inline-block;width:fit-content;background:#1FAE6E;color:#17130E;border-radius:clamp(10px,1.6vw,18px);padding:0.08em 0.38em 0.14em;line-height:1.08;border:3px solid var(--ink);box-shadow:5px 5px 0 0 var(--ink)}
.highlight-pill.amber{background:#D69A1A}
.highlight-pill.violet{background:var(--accent);color:var(--surface)}
.highlight-pill.blue{background:#3FA0E0}
.highlight-pill.coral{background:#EC6F8E}
mark{background:var(--t-mint-a);color:var(--ink);padding:1px 5px;border-radius:5px}

.section-h2{font-size:clamp(34px,4.4vw,56px);letter-spacing:-0.03em;line-height:1.05}

/* ===== BUTTONS ===== */
.btn{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:15px;padding:15px 26px;border-radius:999px;border:none;cursor:pointer;transition:background .15s ease,color .15s ease,border-color .15s ease,transform .15s ease}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-primary{background:var(--accent);color:var(--surface)}
.btn-primary:hover{background:var(--accent-strong);color:var(--surface)}
.btn-ghost{background:transparent;color:var(--ink);padding:14px 25px;border:1px solid rgba(var(--ink-rgb),0.25)}
.btn-ghost:hover{border-color:var(--ink);color:var(--ink)}
.btn-dark{background:var(--ink);color:var(--surface)}
.btn-dark:hover{background:var(--accent);color:var(--surface)}
.btn-link{font-weight:600;font-size:15px;color:var(--ink);border-bottom:1px solid var(--ink);padding-bottom:2px;display:inline-block}
.btn-link.accent{color:var(--accent);border-bottom:none}

/* ===== TAG PILLS ===== */
.tag-row{display:flex;flex-wrap:wrap;gap:8px}
.tag-pill{font-family:'IBM Plex Mono',monospace;font-size:11px;border:1px solid rgba(var(--ink-rgb),0.22);border-radius:999px;padding:5px 12px;color:var(--accent);transition:border-color .15s ease,color .15s ease}
.tag-pill:hover{border-color:var(--ink);color:var(--ink)}
.framework-pill{font-family:'IBM Plex Mono',monospace;font-size:11px;border-radius:999px;padding:6px 12px}

/* ===== HERO (homepage) ===== */
.hero{max-width:1200px;margin:0 auto;padding:120px 32px 140px;display:flex;flex-direction:column;align-items:flex-start;gap:36px}
.hero-greeting{font-family:'Caveat',cursive;font-size:clamp(22px,2.2vw,28px);color:var(--ink-faint)}
.hero h1{font-size:clamp(32px,4.6vw,64px);line-height:1.08;letter-spacing:-0.03em;max-width:20ch;text-wrap:balance}
.hero h1 .reveal-item{display:inline-block}

/* Scroll-triggered reveal: plain CSS transition toggled by a tiny
   IntersectionObserver (assets/scroll-reveal.js) — no animation library,
   so it costs nothing beyond what the browser already ships with. */
.reveal-on-scroll{opacity:0;transform:translateY(28px);transition:opacity .7s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.2,.8,.2,1)}
.reveal-on-scroll.is-visible{opacity:1;transform:translateY(0)}
@media (prefers-reduced-motion:reduce){
  .reveal-on-scroll{opacity:1;transform:none;transition:none}
}
.hero-sub-group{display:flex;flex-direction:column;gap:16px}
.hero-sub{max-width:58ch;font-size:clamp(18px,1.6vw,20px);line-height:1.65;color:var(--ink-soft);margin:0}
.availability-badge{display:flex;align-items:center;gap:8px;font-family:'IBM Plex Mono',monospace;font-size:13px;font-weight:600;letter-spacing:0.3px;color:#6FE3A3;background:#0E1F15;border:1px solid rgba(111,227,163,0.35);border-radius:999px;padding:9px 18px 9px 15px}
.availability-badge .badge-icon{font-size:15px;line-height:1}
.status-dot{width:7px;height:7px;border-radius:50%;background:#1FAE6E;box-shadow:0 0 0 4px rgba(31,174,110,0.18)}
.clients-row{display:flex;flex-direction:column;gap:12px}
.clients-row .clients-label{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--accent)}
.clients-list{display:flex;flex-wrap:wrap;gap:12px 36px;align-items:center}
.clients-list span.client{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:500;color:var(--ink)}
.laurel{color:var(--accent);flex-shrink:0}
.laurel.right{transform:scaleX(-1)}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}

/* ===== PROJECT FEATURE ROWS (homepage Selected Work / Work.html) ===== */
.work-list{display:flex;flex-direction:column;gap:140px}
.project-row{display:flex;flex-wrap:wrap;align-items:center;gap:56px}
.project-row.reverse{flex-direction:row-reverse}
.project-row-media{flex:1 1 520px;min-width:0;display:block;border-radius:32px;padding:clamp(24px,4vw,56px);transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.project-row-media:hover{transform:translateY(-4px)}
.project-row-media img{width:100%;border-radius:18px}
.project-row-media.mint{background:linear-gradient(160deg,var(--t-mint-a) 0%,var(--t-mint-b) 100%);box-shadow:0 30px 80px -40px rgba(31,174,110,0.32)}
.project-row-media.amber{background:linear-gradient(160deg,var(--t-amber-a) 0%,var(--t-amber-b) 100%);box-shadow:0 30px 80px -40px rgba(214,154,26,0.35)}
.project-row-media.violet{background:linear-gradient(160deg,var(--t-violet-a) 0%,var(--t-violet-b) 100%);box-shadow:0 30px 80px -40px rgba(107,79,214,0.32)}
.project-row-media.coral{background:linear-gradient(160deg,var(--t-coral-a) 0%,var(--t-coral-b) 100%);box-shadow:0 30px 80px -40px rgba(236,111,142,0.32);cursor:not-allowed}
.project-row-media.sky{background:linear-gradient(160deg,var(--t-sky-a) 0%,var(--t-sky-b) 100%);box-shadow:0 30px 80px -40px rgba(63,160,224,0.32)}
.project-row-body{flex:1 1 340px;min-width:0;display:flex;flex-direction:column;gap:20px}
.project-row-body .meta{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--accent);letter-spacing:0.3px}
.project-row-body h3{font-size:clamp(24px,2.4vw,32px);line-height:1.2;letter-spacing:-0.02em;text-wrap:pretty}
.project-row-body p.desc{font-size:17px;line-height:1.7;color:var(--ink-soft);max-width:48ch;margin:0}
.project-row-body .btn-link.accent{margin-top:4px}
.voxra-mark{aspect-ratio:16/10;display:flex;flex-direction:column;justify-content:space-between;gap:16px}
.voxra-mark .voxra-top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.voxra-mark .voxra-word{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(80px,13vw,180px);line-height:0.9;letter-spacing:-0.05em;color:var(--ink);align-self:center;margin:auto 0}
.voxra-mark .voxra-word em{font-family:'Fraunces',serif;font-style:italic;font-weight:500;color:var(--coral-text)}
.coming-soon-dot{display:inline-flex;align-items:center;gap:8px;font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--coral-text)}
.coming-soon-dot span{width:7px;height:7px;border-radius:50%;background:#EC6F8E}
.dashed-pill{align-self:flex-start;display:flex;align-items:center;gap:8px;font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--coral-text);border:1px dashed rgba(var(--ink-rgb),0.3);border-radius:999px;padding:6px 14px;margin-top:4px;cursor:not-allowed}
.dashed-pill span{width:7px;height:7px;border-radius:50%;background:#EC6F8E}

/* ===== INDUSTRIES ===== */
.industries-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 40px}
.industry-chips{display:flex;flex-wrap:wrap;gap:10px}
.industry-chip{display:flex;align-items:center;gap:10px;border:1px solid rgba(var(--ink-rgb),0.18);border-radius:999px;padding:10px 18px 10px 14px;font-size:15px;font-weight:500;color:var(--ink);transition:transform .2s cubic-bezier(.2,.8,.2,1),border-color .2s ease}
.industry-chip:hover{transform:translateY(-3px);border-color:var(--ink)}
.industry-chip span{width:9px;height:9px;border-radius:50%;flex-shrink:0}

/* ===== HOW I THINK ===== */
.think-section{max-width:1200px;margin:0 auto;padding:64px 32px clamp(72px,14vw,160px)}
.think-body{display:flex;flex-direction:column;gap:32px}
.think-label-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:24px}
.think-label-row .eyebrow{margin-right:8px}
.think-tab{font-family:'IBM Plex Mono',monospace;font-size:14px;font-weight:600;border-radius:999px;padding:9px 18px;cursor:pointer;border:1px solid rgba(var(--ink-rgb),0.22);background:transparent;color:var(--accent);transition:border-color .15s ease,color .15s ease,transform .15s ease}
.think-tab:hover{border-color:var(--ink);color:var(--ink);transform:translateY(-2px)}
.think-tab.active{border-color:var(--ink);background:var(--ink);color:var(--surface)}
.think-tab-hint{font-family:'Caveat',cursive;font-size:21px;color:var(--ink-faint)}
.think-body h2{font-size:clamp(36px,5.2vw,76px);line-height:1.05;letter-spacing:-0.035em;text-wrap:balance}
.think-body p.pillar-detail{margin:16px 0 0;max-width:640px;font-size:clamp(20px,2.1vw,28px);line-height:1.45;letter-spacing:-0.01em;color:var(--fade)}
.think-body p.pillar-detail mark{background:#1FAE6E;color:#17130E;padding:0 4px}

/* ===== TESTIMONIALS ===== */
.testimonial-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:24px}
.testimonial-grid.narrow{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
.testimonial-fig{margin:0;background:var(--surface);border-radius:28px;padding:clamp(28px,3.5vw,44px);display:flex;flex-direction:column;justify-content:space-between;gap:36px;transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s ease;box-shadow:0 2px 4px rgba(23,19,14,0.04),0 14px 28px -10px rgba(23,19,14,0.12),0 36px 64px -28px rgba(23,19,14,0.16)}
.testimonial-fig:hover{transform:translateY(-6px);box-shadow:0 2px 4px rgba(23,19,14,0.05),0 18px 36px -10px rgba(23,19,14,0.16),0 44px 80px -24px rgba(23,19,14,0.24)}
.testimonial-fig blockquote{margin:0;font-family:'Fraunces',serif;font-size:clamp(19px,1.7vw,22px);line-height:1.5;color:var(--ink);text-wrap:pretty}
.testimonial-fig figcaption{display:flex;flex-direction:column;gap:4px}
.testimonial-fig figcaption .name{font-weight:600;font-size:15px;color:var(--ink)}
.testimonial-fig figcaption .role{font-size:14px;color:var(--ink-faint)}

/* ===== WRITING CARDS ===== */
.writing-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:24px}
.writing-card{display:flex;flex-direction:column;border-radius:28px;background:var(--surface);overflow:hidden;color:var(--ink);box-shadow:0 24px 60px -44px rgba(23,19,14,0.35);transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.writing-card:hover{transform:translateY(-4px);color:var(--ink)}
.writing-card-top{aspect-ratio:16/7;display:flex;align-items:flex-end;padding:20px 24px}
.writing-card-top.coral{background:linear-gradient(160deg,var(--t-coral-a) 0%,var(--t-coral-b) 100%)}
.writing-card-top.mint{background:linear-gradient(160deg,var(--t-mint-a) 0%,var(--t-mint-b) 100%)}
.writing-card-top.amber{background:linear-gradient(160deg,var(--t-amber-a) 0%,var(--t-amber-b) 100%)}
.writing-card-top span{font-family:'Fraunces',serif;font-style:italic;font-weight:500;font-size:clamp(40px,4vw,56px);line-height:1}
.writing-card-body{flex:1;display:flex;flex-direction:column;gap:10px;padding:24px 24px 28px}
.writing-card-body .title{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:21px;line-height:1.25;letter-spacing:-0.01em;text-wrap:pretty}
.writing-card-body .desc{font-size:16px;line-height:1.6;color:var(--ink-soft);text-wrap:pretty}
.writing-card-body .date{margin-top:auto;padding-top:12px;font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--accent)}

/* ===== SIDE PROJECTS ===== */
.side-project-list{display:flex;flex-direction:column;border-top:1px solid rgba(var(--ink-rgb),0.14)}
.side-project-row{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 40px;padding:24px 0;border-bottom:1px solid rgba(var(--ink-rgb),0.14);color:inherit;transition:padding-left .2s ease}
.side-project-row:hover{padding-left:10px}
.side-project-row .sp-body{flex:1 1 420px;min-width:0;display:flex;flex-direction:column;gap:6px}
.side-project-row .sp-body .sp-name{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:20px;letter-spacing:-0.01em;color:var(--ink)}
.side-project-row .sp-body .sp-desc{font-size:16px;line-height:1.6;color:var(--ink-soft);max-width:60ch}
.side-project-row .sp-status{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--accent)}

/* ===== THE HUMAN SIDE ===== */
.human-side-row{display:flex;flex-wrap:wrap;gap:40px 48px;align-items:start}
.life-tags{flex:3 1 480px;min-width:0;display:flex;flex-wrap:wrap;gap:22px 18px;align-items:center;padding:12px 0}
.life-tag{display:inline-flex;align-items:center;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(26px,3.2vw,40px);letter-spacing:-0.02em;border-radius:999px;padding:14px 30px;box-shadow:0 18px 40px -26px rgba(23,19,14,0.55);transition:transform .3s cubic-bezier(.2,.8,.2,1);cursor:default}
.life-tag:hover{transform:rotate(0deg) scale(1.06)}
/* Homepage snippet: same restrained chip language as .tag-pill/.industry-chip,
   no rotation or mixed decorative fonts — the full scrapbook treatment lives
   only on the About page now. */
.life-tags-minimal{display:flex;flex-wrap:wrap;gap:10px}
.life-tag-minimal{font-size:15px;font-weight:500;color:var(--ink);border:1px solid rgba(var(--ink-rgb),0.18);border-radius:999px;padding:9px 18px;transition:border-color .15s ease,transform .15s ease}
.life-tag-minimal:hover{border-color:var(--ink);transform:translateY(-2px)}
.life-photos{flex:2 1 400px;min-width:0;display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start;max-width:520px}
.life-photo-card{background:var(--surface);padding:10px 10px 0;border-radius:18px;box-shadow:0 24px 50px -30px rgba(23,19,14,0.5);display:flex;flex-direction:column;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.life-photo-card:hover{transform:rotate(0deg) scale(1.04)}
.life-photo-card .photo{aspect-ratio:4/5;width:100%;border-radius:12px;overflow:hidden}
.life-photo-card .photo img{width:100%;height:100%;object-fit:cover}
.life-photo-card .caption{font-family:'Caveat',cursive;font-size:22px;color:var(--ink-soft);text-align:center;padding:8px 0 10px}

/* ===== CONTACT CTA (homepage) ===== */
.contact-cta-card{background:#5942AA;color:#FAF6ED;border-radius:40px;overflow:hidden;display:flex;flex-wrap:wrap;align-items:stretch}
.contact-cta-left{flex:3 1 520px;min-width:0;padding:clamp(40px,6vw,88px);display:flex;flex-direction:column;justify-content:center;gap:28px;align-items:flex-start}
.contact-cta-left img.avatar{width:72px;height:72px;border-radius:50%;object-fit:cover;border:2px solid rgba(250,246,237,0.4)}
.contact-cta-left h2{font-size:clamp(28px,3.2vw,44px);line-height:1.18;letter-spacing:-0.025em;max-width:24ch;text-wrap:balance}
.contact-cta-left h2 em{font-family:'Fraunces',serif;font-style:italic;font-weight:500;color:#EFC670}
.contact-cta-left p{margin:0;max-width:52ch;font-size:18px;line-height:1.7;color:#EDE8F7}
.contact-cta-left .btn-primary{background:#FAF6ED;color:#17130E}
.contact-cta-left .btn-primary:hover{background:#EFC670;color:#17130E}
.contact-cta-left .btn-ghost{color:#FAF6ED;border-color:rgba(250,246,237,0.4)}
.contact-cta-left .btn-ghost:hover{border-color:#FAF6ED;color:#FAF6ED}
.contact-cta-reel{flex:2 1 300px;min-width:0;min-height:520px;align-self:stretch;position:relative;overflow:hidden;-webkit-mask-image:linear-gradient(to bottom,transparent,#000 15%,#000 85%,transparent);mask-image:linear-gradient(to bottom,transparent,#000 15%,#000 85%,transparent)}
.contact-cta-reel-inner{position:absolute;inset:0;display:flex;align-items:flex-start;gap:16px;padding:0 clamp(24px,4vw,48px)}
.reel-col{flex:1 1 0;min-width:0;height:max-content;display:flex;flex-direction:column;gap:16px}
.reel-col img{width:100%;border-radius:16px;box-shadow:0 20px 40px -24px rgba(23,19,14,0.6)}

/* ===== CASE STUDY / WORK SHARED ===== */
.case-hero{max-width:1200px;margin:0 auto;padding:72px 32px 80px;display:flex;flex-direction:column;gap:28px}
.case-hero .back-link{font-size:14.5px;font-weight:600;color:var(--ink-soft)}
.case-hero .meta-line{font-family:'IBM Plex Mono',monospace;font-size:12px;margin-top:24px}
.case-hero h1{font-size:clamp(32px,4.6vw,64px);line-height:1.08;letter-spacing:-0.03em;max-width:15ch;text-wrap:balance}
.case-hero .insight{margin:0;max-width:56ch;font-family:'Fraunces',serif;font-style:italic;font-size:clamp(19px,1.8vw,23px);line-height:1.5;color:var(--ink-soft)}
.case-meta-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:24px;border-top:1px solid rgba(var(--ink-rgb),0.14);padding-top:28px;margin-top:20px}
.case-meta-grid .item{display:flex;flex-direction:column;gap:6px}
.case-meta-grid .item .label{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--accent)}
.case-meta-grid .item .value{font-weight:600;font-size:15px}
.case-skills{display:flex;flex-wrap:wrap;gap:32px}
.case-skills > div{display:flex;flex-direction:column;gap:10px}

.case-cover{max-width:1200px;margin:0 auto;padding:0 32px 100px}
.case-cover-panel{border-radius:36px;padding:clamp(14px,2.5vw,36px)}
.case-cover-panel img{width:100%;border-radius:20px}
.case-cover-panel.mint{background:linear-gradient(160deg,var(--t-mint-a) 0%,var(--t-mint-b) 100%);box-shadow:0 40px 100px -50px rgba(31,174,110,0.35)}
.case-cover-panel.amber{background:linear-gradient(160deg,var(--t-amber-a) 0%,var(--t-amber-b) 100%);box-shadow:0 40px 100px -50px rgba(214,154,26,0.38)}
.case-cover-panel.violet{background:linear-gradient(160deg,var(--t-violet-a) 0%,var(--t-violet-b) 100%);box-shadow:0 40px 100px -50px rgba(107,79,214,0.35)}
.case-cover-panel.sky{background:linear-gradient(160deg,var(--t-sky-a) 0%,var(--t-sky-b) 100%);box-shadow:0 40px 100px -50px rgba(63,160,224,0.35)}

.craft-3grid{max-width:1200px;margin:0 auto;padding:0 32px 120px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:40px 56px}
.craft-3grid .craft-item{display:flex;flex-direction:column;gap:12px;padding-top:24px;border-top:2px solid var(--accent)}
.craft-3grid .craft-item .num{font-family:'IBM Plex Mono',monospace;font-size:13px;color:var(--accent)}
.craft-3grid .craft-item h3{font-size:21px}
.craft-3grid .craft-item p{margin:0;font-size:15.5px;line-height:1.7;color:var(--ink-soft)}

.case-stats{max-width:1200px;margin:0 auto;padding:0 32px 140px}
.case-stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));border-top:1px solid rgba(var(--ink-rgb),0.14)}
.case-stats-grid .stat{padding:36px 32px 0 0;display:flex;flex-direction:column;gap:10px}
.case-stats-grid .stat .num{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(48px,5vw,64px);letter-spacing:-0.03em;line-height:1}
.case-stats-grid .stat .label{font-size:15px;font-weight:500}

.case-body-wrap{max-width:1200px;margin:0 auto;padding:0 32px;display:flex;flex-direction:column;gap:120px}
.case-section{display:flex;flex-wrap:wrap;gap:20px 64px}
.case-section.stack{flex-direction:column;gap:48px}
.case-section.stack56{flex-direction:column;gap:56px}
.case-section > .label-col{flex:1 1 180px;padding-top:10px}
.case-section > .label-col.tight{padding-top:4px}
.case-section > .body-col{flex:4 1 480px;min-width:0;display:flex;flex-direction:column;gap:20px;max-width:68ch}
.case-section h2{font-size:clamp(26px,2.8vw,36px);line-height:1.15;letter-spacing:-0.02em}
.case-section p{margin:0;font-size:18px;line-height:1.75;color:var(--ink-soft);text-wrap:pretty}
.case-section .takeaway{max-width:32ch;font-family:'Fraunces',serif;font-size:clamp(24px,2.6vw,34px);line-height:1.35;color:var(--ink)}

.level-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px;font-size:17px;line-height:1.7;color:var(--ink-soft)}
.level-list li{display:flex;gap:14px}
.level-list .dot{color:#1FAE6E;font-weight:700}
.level-list strong{color:var(--ink)}

.workflow-list{display:flex;flex-direction:column;border-top:1px solid rgba(var(--ink-rgb),0.14)}
.workflow-row{display:flex;gap:20px;padding:20px 0;border-bottom:1px solid rgba(var(--ink-rgb),0.14)}
.workflow-row .num{font-family:'IBM Plex Mono',monospace;font-size:13px;color:var(--accent);padding-top:3px;flex-shrink:0}
.workflow-row p{margin:0;font-size:17px;line-height:1.7;color:var(--ink-soft)}
.workflow-row strong{color:var(--ink)}

.mini-card-grid{display:flex;flex-wrap:wrap;align-items:flex-start;gap:20px}
.mini-card-grid>.mini-card{flex:1 1 280px;min-width:0}
.mini-card{border-radius:28px;padding:28px;display:flex;flex-direction:column;gap:10px;background:linear-gradient(160deg,var(--t-violet-a) 0%,var(--t-violet-b) 100%);box-shadow:0 30px 70px -45px rgba(107,79,214,0.35)}
.mini-card .num{font-family:'IBM Plex Mono',monospace;font-size:13px;color:var(--accent)}
.mini-card h3{font-size:20px}
.mini-card p{margin:0;font-size:16px;line-height:1.7;color:var(--ink-soft)}

/* Per-case accent: each case study's numbered markers and mini-cards pick
   up its own theme color instead of the generic default, so the whole
   page reads as one consistent palette (mint for Moniger, amber for
   FastTrackUX, sky for Payr; Beacon's violet already is the mini-card
   default above). */
.case-body-wrap.mint .workflow-row .num,.case-body-wrap.mint .mini-card .num{color:var(--mint-text)}
.case-body-wrap.amber .workflow-row .num,.case-body-wrap.amber .mini-card .num{color:var(--amber-text)}
.case-body-wrap.sky .workflow-row .num,.case-body-wrap.sky .mini-card .num{color:var(--sky-text)}
.case-body-wrap.mint .mini-card{background:linear-gradient(160deg,var(--t-mint-a) 0%,var(--t-mint-b) 100%);box-shadow:0 30px 70px -45px rgba(31,174,110,0.35)}
.case-body-wrap.amber .mini-card{background:linear-gradient(160deg,var(--t-amber-a) 0%,var(--t-amber-b) 100%);box-shadow:0 30px 70px -45px rgba(214,154,26,0.38)}
.case-body-wrap.sky .mini-card{background:linear-gradient(160deg,var(--t-sky-a) 0%,var(--t-sky-b) 100%);box-shadow:0 30px 70px -45px rgba(63,160,224,0.35)}
.case-body-wrap.mint .eyebrow,.case-body-wrap.mint .case-figure figcaption{color:var(--mint-text)}
.case-body-wrap.amber .eyebrow,.case-body-wrap.amber .case-figure figcaption{color:var(--amber-text)}
.case-body-wrap.sky .eyebrow,.case-body-wrap.sky .case-figure figcaption{color:var(--sky-text)}

.figure-grid{display:flex;flex-wrap:wrap;align-items:flex-start;gap:24px}
.figure-grid>.case-figure{flex:1 1 320px;min-width:0}
.case-figure{margin:0;display:flex;flex-direction:column;gap:12px}
.case-figure .panel{border-radius:28px;padding:clamp(8px,1.3vw,16px)}
.case-figure .panel.mint{background:linear-gradient(160deg,var(--t-mint-a) 0%,var(--t-mint-b) 100%);box-shadow:0 30px 70px -45px rgba(31,174,110,0.35)}
.case-figure .panel.amber{background:linear-gradient(160deg,var(--t-amber-a) 0%,var(--t-amber-b) 100%);box-shadow:0 30px 70px -45px rgba(214,154,26,0.38)}
.case-figure .panel.violet{background:linear-gradient(160deg,var(--t-violet-a) 0%,var(--t-violet-b) 100%);box-shadow:0 30px 70px -45px rgba(107,79,214,0.35)}
.case-figure .panel.sky{background:linear-gradient(160deg,var(--t-sky-a) 0%,var(--t-sky-b) 100%);box-shadow:0 30px 70px -45px rgba(63,160,224,0.35)}
.case-figure .panel.neutral{background:var(--t-neutral)}
.case-figure .panel.centered{display:flex;justify-content:center}
.case-figure .panel img{width:100%;border-radius:14px}
.case-figure .panel.centered img{max-width:280px}
.case-figure figcaption{font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:var(--accent)}
.case-figure figcaption.accent{color:var(--amber-text)}
.case-support-panel{border-radius:32px;background:var(--surface);padding:clamp(16px,3vw,40px)}
.case-support-panel img{width:100%;border-radius:14px}

.case-quote-card{margin:0;background:var(--surface);border-radius:28px;padding:clamp(28px,3.5vw,44px);display:flex;flex-direction:column;gap:28px}
.case-quote-card.dark{background:#17130E;color:#FAF6ED}
.case-quote-card blockquote{margin:0;font-family:'Fraunces',serif;font-size:clamp(19px,1.7vw,22px);line-height:1.5;color:var(--ink);text-wrap:pretty}
.case-quote-card.dark blockquote{color:#FAF6ED;font-size:clamp(20px,2vw,26px);line-height:1.45}
.case-quote-card figcaption{font-family:'IBM Plex Mono',monospace;font-size:12px;color:#9B85E8}
.case-quote-card:not(.dark) figcaption{display:flex;flex-direction:column;gap:4px;font-family:'Manrope',sans-serif;color:var(--accent)}
.case-quote-card:not(.dark) figcaption .name{font-weight:600;font-size:15px;color:var(--ink)}

.verb-test-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,160px),1fr));gap:16px}
.verb-test-card{border:1px solid rgba(var(--ink-rgb),0.14);border-radius:24px;padding:24px;display:flex;flex-direction:column;gap:8px}
.verb-test-card .word{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:18px;color:var(--ink-soft)}
.verb-test-card .pct{font-family:'IBM Plex Mono',monospace;font-weight:600;font-size:30px;color:var(--ink-faint)}
.verb-test-card .status{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:1px;text-transform:uppercase;color:var(--ink-faint)}
.verb-test-card.winner{background:linear-gradient(160deg,var(--t-violet-a) 0%,var(--t-violet-b) 100%);box-shadow:0 24px 60px -36px rgba(107,79,214,0.4);border:none}
.verb-test-card.winner .word{color:var(--ink)}
.verb-test-card.winner .pct{color:var(--accent-strong)}
.verb-test-card.winner .status{color:var(--mint-text)}

.journey-panel{border-radius:32px;padding:clamp(24px,4vw,48px);display:flex;flex-direction:column;gap:20px;background:linear-gradient(160deg,var(--t-mint-a) 0%,var(--t-mint-b) 100%);box-shadow:0 30px 80px -50px rgba(31,174,110,0.35)}
.journey-panel-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.journey-panel-head .label{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--mint-text)}
.journey-panel-head .note{font-family:'Caveat',cursive;font-size:24px;color:var(--mint-text);transform:rotate(-2deg)}
.journey-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:14px}
.journey-step{display:flex;flex-direction:column;gap:10px}
.journey-step-head{display:flex;align-items:center;gap:10px}
.journey-step-head .num{width:28px;height:28px;border-radius:50%;background:#1FAE6E;color:#17130E;font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:600;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.journey-step-head .label{font-weight:600;font-size:15px;color:var(--ink)}
.journey-arrow{font-family:'IBM Plex Mono',monospace;font-size:16px;color:var(--mint-text);padding-left:9px}
.journey-card{background:var(--surface);border-radius:18px;padding:16px 18px;display:flex;flex-direction:column;gap:8px;box-shadow:0 14px 30px -22px rgba(23,19,14,0.4)}
.journey-card .kicker{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:0.5px;text-transform:uppercase;color:var(--mint-text)}
.journey-card .title{font-size:14.5px;font-weight:600;color:var(--ink)}
.journey-card .pill-row{display:flex;gap:6px;flex-wrap:wrap}
.journey-card .pill-row span{font-family:'IBM Plex Mono',monospace;font-size:10.5px;background:var(--t-mint-a);color:var(--mint-text);border-radius:999px;padding:3px 9px}

.case-nav{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;border-top:1px solid rgba(var(--ink-rgb),0.14);padding-top:32px}
.case-nav a{font-weight:600;font-size:15px}

.case-cta{max-width:1200px;margin:0 auto;padding:100px 32px 140px}
.case-cta-panel{background:#5942AA;color:#FAF6ED;border-radius:40px;padding:clamp(40px,7vw,88px);display:flex;flex-direction:column;gap:24px;align-items:flex-start}
.case-cta-panel h2{font-size:clamp(28px,3.6vw,46px);line-height:1.1;letter-spacing:-0.03em;max-width:22ch;text-wrap:balance}
.case-cta-panel h2 em{font-family:'Fraunces',serif;font-style:italic;color:#EFC670}
.case-cta-panel p{margin:0;max-width:52ch;font-size:18px;line-height:1.65;color:#EDE8F7}
.case-cta-panel .btn{background:#FAF6ED;color:#17130E}
.case-cta-panel .btn:hover{background:#EFC670;color:#17130E}

/* ===== ADDITIONAL ENGAGEMENTS (Work.html) ===== */
.engagement-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:24px}
.engagement-card{border-radius:28px;padding:36px;display:flex;flex-direction:column;gap:28px;justify-content:flex-start;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.engagement-card:hover{transform:translateY(-4px)}
.engagement-card .idx{font-family:'IBM Plex Mono',monospace;font-size:12px}
.engagement-card .body{display:flex;flex-direction:column;gap:10px}
.engagement-card .cat{font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:var(--accent);letter-spacing:0.3px}
.engagement-card h3{font-size:28px;letter-spacing:-0.02em}
.engagement-card p{margin:0;font-size:16px;line-height:1.6;color:var(--ink-soft)}
.engagement-card.coral{background:linear-gradient(160deg,var(--t-coral-a) 0%,var(--t-coral-b) 100%);box-shadow:0 30px 70px -45px rgba(236,111,142,0.4)}
.engagement-card.coral .idx,.engagement-card.coral .cat{color:var(--coral-text)}
.engagement-card.mint{background:linear-gradient(160deg,var(--t-mint-a) 0%,var(--t-mint-b) 100%);box-shadow:0 30px 70px -45px rgba(31,174,110,0.4)}
.engagement-card.mint .idx,.engagement-card.mint .cat{color:var(--mint-text)}
.engagement-card.amber{background:linear-gradient(160deg,var(--t-amber-a) 0%,var(--t-amber-b) 100%);box-shadow:0 30px 70px -45px rgba(214,154,26,0.4)}
.engagement-card.amber .idx,.engagement-card.amber .cat{color:var(--amber-text)}

/* ===== ABOUT ===== */
/* Image sits beside the heading (not below it) at any width ≥ the 860px
   stack breakpoint: an explicit 2-column grid, rather than auto-fit (which
   could open a 3rd track on wide viewports and let a span:2 child leave
   room for its sibling on the same row instead of pushing it below). */
.about-hero{max-width:1200px;margin:0 auto;padding:120px 32px 100px;display:grid;grid-template-columns:1.2fr 1fr;gap:56px 80px;align-items:start}
.about-hero .heading-col{display:flex;flex-direction:column;gap:28px;min-width:0}
.about-hero h1{font-size:clamp(30px,3.6vw,56px);line-height:1.1;letter-spacing:-0.03em;max-width:17ch;text-wrap:balance}
.about-portrait{justify-self:end;width:100%;height:100%}
.about-portrait img{width:100%;height:100%;aspect-ratio:4/5;object-fit:cover;border-radius:20px}
/* A single stacked column, always: the aside reads as a card beneath the
   paragraphs, never as a sidebar beside them (a wide-enough auto-fit grid
   used to leave room for it on the same row as the text). */
.about-body{max-width:1200px;margin:0 auto;padding:0 32px 140px;display:flex;flex-direction:column;gap:48px}
.about-body-text{display:flex;flex-direction:column;gap:24px;max-width:64ch;font-size:19px;line-height:1.75;color:var(--ink-soft);min-width:0}
.about-body-text p{margin:0;text-wrap:pretty}
.about-body-text strong{font-weight:600}
.about-aside{max-width:64ch;background:var(--surface);border-radius:28px;padding:36px;display:flex;flex-direction:column;gap:16px}
.about-aside p{margin:0;font-family:'Fraunces',serif;font-size:21px;line-height:1.5;color:var(--ink);text-wrap:pretty}
.about-aside a{font-weight:600;font-size:15px;margin-top:8px}

/* ===== EXPERIENCE ===== */
.exp-hero{max-width:1200px;margin:0 auto;padding:120px 32px 100px;display:flex;flex-direction:column;align-items:flex-start;gap:28px}
.exp-hero h1{font-size:clamp(32px,4.6vw,64px);line-height:1.08;letter-spacing:-0.03em;max-width:14ch;text-wrap:balance}
.exp-profile-text{max-width:70ch;font-size:clamp(17px,1.4vw,19px);line-height:1.65;color:var(--ink-soft);margin-top:-8px}
.exp-profile-text strong{font-weight:700}
.exp-stat-blobs{display:flex;flex-wrap:wrap;gap:10px;margin-top:-6px}
.stat-blob{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:500;color:var(--ink-soft);border:1px solid rgba(var(--ink-rgb),0.18);border-radius:999px;padding:8px 16px 8px 12px}
.stat-blob .dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.exp-list-wrap{max-width:1200px;margin:0 auto;padding:0 32px 0}
.exp-list{display:flex;flex-direction:column;border-top:1px solid rgba(var(--ink-rgb),0.14)}
.exp-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:16px 48px;padding:44px 0;border-bottom:1px solid rgba(var(--ink-rgb),0.14)}
.exp-row-meta{display:flex;flex-direction:column;gap:8px}
.exp-row-meta .period{font-family:'IBM Plex Mono',monospace;font-size:13px;color:var(--ink)}
.exp-row-meta .place{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--accent)}
.exp-row-body{grid-column:span 2;display:flex;flex-direction:column;gap:12px;min-width:0}
.exp-row-title{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px}
.exp-row-title h2{font-size:clamp(22px,2.2vw,28px);letter-spacing:-0.02em;line-height:1.2}
.exp-row-title .note{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:0.5px;text-transform:uppercase;color:var(--accent)}
.exp-org-pill{align-self:flex-start;font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:600;border-radius:999px;padding:5px 12px}
.exp-row-sub{font-size:14px;font-style:italic;color:var(--ink-faint);margin-top:-2px}
.exp-points{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:10px;max-width:62ch}
.exp-points li{display:flex;gap:12px;font-size:17px;line-height:1.65;color:var(--ink-soft);text-wrap:pretty}
.exp-points .chk{color:var(--mint-text);font-family:'IBM Plex Mono',monospace;flex-shrink:0}
/* ===== SELECTED PROJECTS (Experience page) ===== */
.exp-projects-wrap{max-width:1200px;margin:0 auto;padding:48px 32px 48px;display:flex;flex-direction:column;gap:24px;border-top:1px solid rgba(var(--ink-rgb),0.14)}
.exp-projects-wrap.no-border{border-top:none;padding-top:48px}
.exp-projects-list{display:flex;flex-direction:column;gap:22px}

/* ===== FRAMEWORKS & METHODS (Experience page) ===== */
.exp-frameworks-wrap{max-width:1200px;margin:0 auto;padding:48px 32px 140px;display:flex;flex-direction:column;gap:28px;border-top:1px solid rgba(var(--ink-rgb),0.14)}
.exp-frameworks-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:32px 40px}
.exp-edu-item{display:flex;flex-direction:column;gap:4px}
.exp-edu-item h3{font-size:19px;letter-spacing:-0.01em}
.exp-project-cat{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:0.3px;color:var(--accent)}
.exp-edu-meta{font-size:14px;color:var(--ink-faint)}

/* ===== WORK.HTML HEADER ===== */
.work-hero{max-width:1200px;margin:0 auto;padding:120px 32px 120px;display:flex;flex-direction:column;gap:28px}
.work-hero-row{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.work-hero h1{font-size:clamp(32px,4.6vw,64px);line-height:1.08;letter-spacing:-0.03em}
.work-count{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--accent);padding-bottom:12px}

/* ===== CONTACT PAGE ===== */
.contact-hero{max-width:1200px;margin:0 auto;padding:120px 32px 100px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:40px 80px;align-items:end}
.contact-hero .heading-col{grid-column:span 2;display:flex;flex-direction:column;gap:28px;min-width:0}
.contact-hero h1{font-size:clamp(32px,4.6vw,64px);line-height:1.08;letter-spacing:-0.03em;text-wrap:balance}
.contact-hero h1 em{font-family:'Fraunces',serif;font-style:italic;color:var(--accent)}
.contact-hero > p{margin:0;font-size:19px;line-height:1.7;color:var(--ink-soft);max-width:40ch}

.contact-body{max-width:1200px;margin:0 auto;padding:0 32px 160px;display:flex;flex-wrap:wrap;gap:48px 72px;align-items:start}
.contact-left{flex:1 1 300px;max-width:400px;display:flex;flex-direction:column;gap:32px}
.contact-left h2{font-size:clamp(30px,3.4vw,44px);letter-spacing:-0.03em;line-height:1.08}
.contact-link-list{display:flex;flex-direction:column;border-top:1px solid rgba(var(--ink-rgb),0.14)}
.contact-link-list a{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:18px 0;border-bottom:1px solid rgba(var(--ink-rgb),0.14);color:var(--ink)}
.contact-link-list a:hover{color:var(--accent)}
.contact-link-list .label{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--accent)}
.contact-link-list .value{font-size:15px;font-weight:500}

.contact-form-card{flex:2 1 520px;min-width:0;background:var(--surface);border-radius:32px;padding:clamp(20px,3vw,32px);box-shadow:0 30px 80px -50px rgba(107,79,214,0.5);display:flex;flex-direction:column;gap:20px}
.contact-form-card .required-note{margin:0;font-size:13.5px;line-height:1.6;color:var(--ink-faint)}
.contact-form-card .prefer-call{margin:0;font-size:13.5px;line-height:1.6;color:var(--ink-faint)}
.contact-form-card .prefer-call a{color:var(--accent);font-weight:600}

.form-banner{display:none;border-radius:14px;padding:14px 18px;font-size:14.5px;line-height:1.5}
.form-banner:not(:empty){display:block}
.form-banner-success{background:var(--t-mint-a);color:var(--mint-text)}
.form-banner-error{background:var(--t-coral-a);color:var(--coral-text)}

.contact-form{display:flex;flex-direction:column;gap:18px}
.form-row{display:flex;flex-direction:column;gap:8px}
.form-row label,.form-row .form-label-text{font-size:13.5px;font-weight:600;color:var(--ink)}
.form-row input[type="text"],.form-row input[type="email"],.form-row input[type="tel"],.form-row textarea{
  font:inherit;font-size:15px;color:var(--ink);background:var(--t-field);border:1px solid rgba(var(--ink-rgb),0.12);
  border-radius:12px;padding:12px 16px;resize:vertical;
}
.form-row input:focus-visible,.form-row textarea:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.form-row input[aria-invalid="true"],.form-row textarea[aria-invalid="true"]{border-color:var(--coral-text)}
.field-error{display:none;font-size:13px;color:var(--coral-text)}
.field-error:not(:empty){display:block}

.radio-pill-group{display:flex;flex-wrap:wrap;gap:10px}
.radio-pill{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:500;color:var(--ink);border:1px solid rgba(var(--ink-rgb),0.18);border-radius:999px;padding:9px 16px 9px 9px;cursor:pointer;transition:border-color .15s ease,background .15s ease}
.radio-pill:has(input:checked){border-color:var(--accent);background:var(--t-violet-chip)}
.radio-pill input[type="radio"]{position:absolute;opacity:0;width:1px;height:1px}
.radio-letter{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:rgba(var(--ink-rgb),0.08);font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:600;color:var(--accent)}
.radio-pill:has(input:checked) .radio-letter{background:var(--accent);color:var(--surface)}
.radio-pill:focus-within{outline:2px solid var(--accent);outline-offset:2px}

.contact-form .btn-primary{align-self:flex-start}

/* ===== FOOTER ===== */
footer.site-footer{max-width:1200px;margin:0 auto;padding:40px 32px 56px;border-top:1px solid rgba(var(--ink-rgb),0.14);display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;font-size:14px;color:var(--ink-faint)}
footer.site-footer .footer-links{display:flex;gap:24px;flex-wrap:wrap}
footer.site-footer .footer-links a{color:var(--ink)}

/* ===== RESPONSIVE ===== */
@media (max-width:860px){
  .project-row,.project-row.reverse{flex-direction:column}
  .project-row-media{width:100%;flex-basis:auto}
  .contact-hero .heading-col{grid-column:span 1}
  .about-hero{grid-template-columns:1fr}
  .about-portrait{justify-self:start}
}
@media (max-width:700px){
  .nav .links{gap:16px}
  /* The 120px top padding on these page heroes is a fixed desktop value
     with no built-in responsive scaling — on a short mobile viewport it
     reads as dead space below the nav before any content appears. */
  .hero,.about-hero,.exp-hero,.work-hero,.contact-hero{padding-top:56px}
  .hero{padding-bottom:72px}
}
@media (max-width:560px){
  .wrap,.hero,.work-hero,.about-hero,.about-body,.contact-hero,.contact-body,.case-hero,.case-cover,.craft-3grid,.case-stats,.case-body-wrap,.case-cta,.exp-hero,.exp-list-wrap,.exp-projects-wrap,.exp-frameworks-wrap,.think-section{padding-left:20px;padding-right:20px}
}