/*
  Design tokens — Phase 2 design system, unchanged values.
  This file has no selectors, only :root variables, so it can be
  @import'd first by any stylesheet (including a future WP theme's
  style.css) without any risk of specificity conflicts.
*/
:root{
  /* color */
  --paper:#FEFDFB;
  --fog:#F7F3EE;
  --ink:#17181C;
  --slate:#6E6A63;
  --hairline:#E9E2D8;

  --blush:#F1C6BE;
  --sky:#C3D9E8;
  --lilac:#D9CDE8;
  --rosewood:#A8574E; /* the only pastel-derived color allowed on text/icons */

  /* spacing — 8px rhythm, sp-1 through sp-10 */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px; --sp-5: 24px;
  --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; --sp-10: 144px;

  /* motion */
  --ease-out: cubic-bezier(.16,1,.3,1);
  --dur-fast: 180ms;
  --dur-base: 420ms;
  --dur-slow: 1000ms;
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Instrument Sans', -apple-system, sans-serif;
  -webkit-font-smoothing:antialiased;
  position:relative;
}

/* subtle full-page paper grain — decorative, aria-hidden equivalent (no content) */
body::before{
  content:"";
  position:fixed; inset:0; pointer-events:none; z-index:0;
  opacity:0.03; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

.display{ font-family:'Fraunces', serif; font-optical-sizing:auto; letter-spacing:-0.01em; }
.mono{ font-family:'IBM Plex Mono', monospace; letter-spacing:0.02em; }
a{ color:inherit; text-decoration:none; }

.wrap{ max-width:1180px; margin:0 auto; padding:0 var(--sp-6); position:relative; z-index:1; }
.wrap-narrow{ max-width:760px; margin:0 auto; padding:0 var(--sp-6); position:relative; z-index:1; text-align:center; }

section{ padding:var(--sp-8) 0; border-bottom:1px solid var(--hairline); position:relative; z-index:1; }
section:last-of-type{ border-bottom:none; }

.eyebrow{ font-size:12px; letter-spacing:0.14em; text-transform:uppercase; color:var(--slate); margin-bottom:var(--sp-3); }
.eyebrow-center{ text-align:center; font-size:12px; letter-spacing:0.14em; text-transform:uppercase; color:var(--slate); margin-bottom:var(--sp-5); }
.section-title{ font-family:'Fraunces',serif; font-weight:400; font-size:clamp(24px,2.6vw,32px); margin:0; }
.section-head{ display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:var(--sp-7); flex-wrap:wrap; gap:var(--sp-4); }
.see-all{ font-size:13px; color:var(--slate); border-bottom:1px solid var(--hairline); padding-bottom:2px; }
.see-all:hover{ color:var(--rosewood); border-color:var(--rosewood); }

/* scroll reveal, toggled by js/reveal.js */
.reveal{ opacity:0; transform:translateY(16px); transition:opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
.reveal.in{ opacity:1; transform:translateY(0); }

@media (prefers-reduced-motion:reduce){
  .reveal{ transition:none; opacity:1; transform:none; }
}
/* ============ NAV ============ */
header{ position:sticky; top:0; z-index:40; background:rgba(254,253,251,0.85); backdrop-filter:blur(10px); border-bottom:1px solid var(--hairline); }
.nav-inner{ max-width:1180px; margin:0 auto; padding:18px var(--sp-6); display:flex; align-items:center; justify-content:space-between; }
.logo{ font-family:'Fraunces',serif; font-size:18px; font-weight:500; }
.site-logo-img{ height:46px; width:auto; display:block; }
.footer-logo-img{ height:28px; margin-bottom:var(--sp-3); }
nav ul{ list-style:none; display:flex; gap:var(--sp-6); margin:0; padding:0; font-size:14px; }
@media (max-width:800px){
  nav ul{ display:none; }
  .nav-inner > a.btn-ghost-nav{ display:none; }
}
.mobile-menu-toggle{ display:none; }
.mobile-nav-panel{ display:none; }
@media (max-width:800px){
  .mobile-menu-toggle{ display:flex; flex-direction:column; gap:5px; width:24px; background:none; border:none; cursor:pointer; padding:8px; }
  .mobile-menu-toggle span{ display:block; height:2px; width:100%; background:var(--ink); border-radius:2px; transition:transform 220ms var(--ease-out), opacity 220ms var(--ease-out); }
  .mobile-menu-toggle.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .mobile-menu-toggle.open span:nth-child(2){ opacity:0; }
  .mobile-menu-toggle.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

  .mobile-nav-panel.open{ display:flex; flex-direction:column; padding:var(--sp-5) var(--sp-6) var(--sp-6); border-top:1px solid var(--hairline); background:var(--paper); }
  .mobile-nav-panel a{ padding:14px 0; font-size:15px; border-bottom:1px solid var(--hairline); }
  .mobile-nav-panel a:last-child{ border-bottom:none; }
}

/* ============ BUTTONS ============ */
.btn{ font-family:'Instrument Sans',sans-serif; font-size:14px; font-weight:500; padding:12px 24px; border-radius:100px; border:1px solid transparent; cursor:pointer; display:inline-flex; align-items:center; gap:8px; transition:transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); }
.btn-primary{ background:var(--ink); color:var(--paper); }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 12px 28px -10px rgba(168,87,78,0.45); }
.btn-ghost-nav{ font-size:13px; padding:10px 20px; border:1px solid var(--hairline); border-radius:100px; }
.btn-ghost-nav:hover{ border-color:var(--rosewood); color:var(--rosewood); }

/* Magnetic buttons: JS (js/magnetic.js) sets --mx/--my, this is just the render.
   Strength is deliberately light (see js/magnetic.js STRENGTH const = 6px max)
   after the heavy-feeling first pass was flagged as confusing. */
.magnetic{ --mx:0px; --my:0px; transform: translate(var(--mx), var(--my)); transition: transform 320ms var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); }

/* ============ HERO + WATERCOLOR BLOOMS ============ */
.hero{ position:relative; overflow:hidden; padding:var(--sp-9) 0 var(--sp-8); border-bottom:1px solid var(--hairline); }
.bloom{ position:absolute; filter:blur(50px); mix-blend-mode:multiply; pointer-events:none; opacity:0.7; will-change:transform; }
.bloom-a{ width:460px; height:420px; background:var(--blush); top:-140px; right:2%; border-radius:42% 58% 65% 35% / 45% 45% 55% 55%; }
.bloom-b{ width:400px; height:360px; background:var(--sky); top:20px; right:22%; border-radius:60% 40% 35% 65% / 55% 60% 40% 45%; }
.bloom-c{ width:320px; height:320px; background:var(--lilac); top:-60px; right:-4%; border-radius:38% 62% 55% 45% / 40% 45% 55% 60%; }
@media (max-width:700px){
  .bloom-a{ width:280px; height:260px; top:-80px; right:-10%; }
  .bloom-b{ width:240px; height:220px; top:10px; right:6%; }
  .bloom-c{ width:200px; height:200px; top:-30px; right:-14%; }
}
/* idle sway + scroll parallax are driven together by js/blooms.js so they never fight over `transform` */

.hero-eyebrow{ font-size:12px; letter-spacing:0.16em; text-transform:uppercase; color:var(--slate); margin-bottom:var(--sp-5); position:relative; z-index:2; }
.hero h1{ font-family:'Fraunces',serif; font-weight:340; font-size:clamp(38px,5.6vw,68px); line-height:1.05; letter-spacing:-0.015em; margin:0 0 var(--sp-5); max-width:720px; position:relative; z-index:2; }
.hero h1 em{ font-style:italic; color:var(--rosewood); }
.hero p.lede{ font-size:17px; line-height:1.6; color:var(--slate); max-width:420px; margin:0 0 var(--sp-6); position:relative; z-index:2; }
.hero .cta{ position:relative; z-index:2; }

/* ============ TRUSTED BY ============ */
.logo-strip{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:var(--sp-6); opacity:.55; }
.logo-strip span{ font-family:'Fraunces',serif; font-size:17px; }

/* ============ GRIDS ============ */
.grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--sp-5); }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-5); }
.grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-5); }
@media (max-width:900px){ .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; } }

/* ============ SERVICE CARDS ============ */
.service-card{ border:1px solid var(--hairline); border-radius:12px; padding:var(--sp-6); position:relative; overflow:hidden; transition:box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.service-card::after{ content:""; position:absolute; width:130px; height:130px; bottom:-56px; left:-56px; border-radius:50%; filter:blur(28px); mix-blend-mode:multiply; opacity:0.5; }
.service-card.c1::after{ background:var(--blush); } .service-card.c2::after{ background:var(--sky); } .service-card.c3::after{ background:var(--lilac); }
.service-card:hover{ box-shadow:0 24px 48px -28px rgba(23,24,28,0.18); transform:translateY(-4px); }
.service-card .num{ font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--rosewood); position:relative; z-index:1; }
.service-card h3{ font-family:'Fraunces',serif; font-weight:400; font-size:21px; margin:var(--sp-4) 0 var(--sp-2); position:relative; z-index:1; }
.service-card p{ font-size:14px; color:var(--slate); line-height:1.6; margin:0 0 var(--sp-4); position:relative; z-index:1; }
.service-card a{ font-size:13px; position:relative; z-index:1; }

/* ============ PROJECT CARDS ============ */
.proj-card{ border-radius:12px; overflow:hidden; border:1px solid var(--hairline); }
.proj-visual{ aspect-ratio:16/10; background:var(--fog); position:relative; overflow:hidden; }
.proj-visual .mini-bloom{ position:absolute; width:160px; height:160px; filter:blur(34px); mix-blend-mode:multiply; opacity:.5; border-radius:45% 55% 60% 40%/50% 45% 55% 50%; }
.proj-body{ padding:var(--sp-5) var(--sp-6) var(--sp-6); }
.proj-body .tag{ font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--rosewood); }
.proj-body h2, .proj-body h3{ font-family:'Fraunces',serif; font-weight:400; font-size:20px; margin:var(--sp-2) 0 0; }

/* ============ PRODUCT CARDS ============ */
.prod-card{ border:1px solid var(--hairline); border-radius:10px; overflow:hidden; }
.prod-visual{ aspect-ratio:1/1; background:var(--fog); }
.prod-body{ padding:var(--sp-4); }
.prod-body h3{ font-size:14px; font-weight:500; margin:0 0 4px; }
.prod-body .price{ font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--slate); }

/* ============ STATS ============ */
.stat-block{ text-align:left; }
.stat-num{ font-family:'Fraunces',serif; font-weight:340; font-size:44px; color:var(--ink); }
.stat-label{ font-size:12px; color:var(--slate); margin-top:6px; letter-spacing:.02em; }

/* ============ PROCESS ============ */
.process-row{ display:flex; gap:var(--sp-5); }
.process-step{ flex:1; border-top:2px solid var(--hairline); padding-top:var(--sp-4); }
.process-step .step-num{ font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--rosewood); }
.process-step h3{ font-family:'Fraunces',serif; font-weight:400; font-size:18px; margin:var(--sp-2) 0 var(--sp-2); }
.process-step p{ font-size:13px; color:var(--slate); line-height:1.6; margin:0; }
@media (max-width:900px){ .process-row{ flex-direction:column; } }

/* ============ TESTIMONIALS ============ */
.testi-row{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-5); }
.testi-card{ border:1px solid var(--hairline); border-radius:12px; padding:var(--sp-6); }
.testi-card .quote-mark{ font-family:'Fraunces',serif; font-size:32px; color:var(--hairline); line-height:1; }
.testi-card blockquote{ font-family:'Fraunces',serif; font-weight:340; font-size:19px; line-height:1.45; margin:var(--sp-3) 0 var(--sp-5); }
.testi-card .attribution{ font-size:12px; color:var(--slate); }
.testi-card .attribution strong{ color:var(--ink); font-weight:500; }
@media (max-width:900px){ .testi-row{ grid-template-columns:1fr; } }

/* ============ ARTICLES ============ */
.article-card{ border-top:1px solid var(--hairline); padding-top:var(--sp-5); }
.article-visual{ aspect-ratio:16/10; background:var(--fog); border-radius:10px; margin-bottom:var(--sp-4); }
.article-card .cat{ font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--rosewood); }
.article-card h2, .article-card h3{ font-family:'Fraunces',serif; font-weight:400; font-size:18px; margin:var(--sp-2) 0 0; line-height:1.35; }

/* ============ CLOSING CTA ============ */
.closing{ text-align:center; padding:var(--sp-9) 0; }
.closing h2{ font-family:'Fraunces',serif; font-weight:320; font-size:clamp(30px,4.6vw,50px); margin:0 0 var(--sp-6); letter-spacing:-0.015em; }
.closing .btn-row{ display:flex; gap:var(--sp-4); justify-content:center; flex-wrap:wrap; }

/* ============ FOOTER ============ */
footer{ padding:var(--sp-7) 0; }
.footer-inner{ max-width:1180px; margin:0 auto; padding:0 var(--sp-6); display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr 1.2fr; gap:var(--sp-5); align-items:start; }
.footer-inner .logo{ margin-bottom:var(--sp-3); }
.footer-inner p{ font-size:13px; color:var(--slate); max-width:260px; line-height:1.6; }
.footer-col .footer-heading{ font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--slate); margin:0 0 var(--sp-4); font-weight:500; }
.footer-col a{ display:block; font-size:14px; margin-bottom:10px; color:var(--ink); }
.footer-col a:hover{ color:var(--rosewood); }
.nl-row{ display:flex; gap:8px; margin-top:var(--sp-3); }
.nl-row input{ font-family:'Instrument Sans',sans-serif; font-size:13px; padding:10px 14px; border:1px solid var(--hairline); border-radius:100px; flex:1; background:var(--fog); }
.legal{ max-width:1180px; margin:var(--sp-7) auto 0; padding:var(--sp-5) var(--sp-6) 0; border-top:1px solid var(--hairline); display:flex; justify-content:space-between; font-size:12px; color:var(--slate); flex-wrap:wrap; gap:8px; }
@media (max-width:700px){ .footer-inner{ grid-template-columns:1fr 1fr; } }

/* ============ INTERIOR PAGE HERO (smaller than homepage hero) ============ */
.page-hero{ padding:var(--sp-8) 0 var(--sp-7); border-bottom:1px solid var(--hairline); }
.page-hero .eyebrow{ margin-bottom:var(--sp-4); }
.page-hero h1{ font-family:'Fraunces',serif; font-weight:340; font-size:clamp(32px,4.4vw,52px); line-height:1.08; letter-spacing:-0.015em; margin:0 0 var(--sp-4); max-width:640px; }
.page-hero .lede{ font-size:16px; color:var(--slate); max-width:440px; line-height:1.6; margin:0; }

/* ============ FILTER CHIPS ============ */
.filter-row{ display:flex; gap:var(--sp-3); margin-bottom:var(--sp-7); flex-wrap:wrap; }
.chip{ font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:.02em; background:transparent; border:1px solid var(--hairline); color:var(--slate); padding:9px 18px; border-radius:100px; cursor:pointer; transition:border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); }
.chip:hover{ border-color:var(--rosewood); color:var(--rosewood); }
.chip.active{ background:var(--ink); border-color:var(--ink); color:var(--paper); }

/* ============ SOLUTIONS GRID (built to scale past 12 items without redesign) ============ */
.solutions-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-5); }
.sol-card{ display:block; border:1px solid var(--hairline); border-radius:12px; padding:var(--sp-5); transition:box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), border-color var(--dur-fast) var(--ease-out); }
.sol-card:hover{ box-shadow:0 20px 40px -26px rgba(23,24,28,0.16); transform:translateY(-3px); border-color:var(--hairline); }
.sol-card .tag{ display:inline-block; font-size:11px; color:var(--rosewood); margin-bottom:var(--sp-3); }
.sol-card h2{ font-family:'Fraunces',serif; font-weight:400; font-size:19px; margin:0 0 var(--sp-2); }
.sol-card p{ font-size:13px; color:var(--slate); line-height:1.55; margin:0; }
.sol-card.hidden{ display:none; }
@media (max-width:900px){ .solutions-grid{ grid-template-columns:1fr; } }
@media (min-width:901px) and (max-width:1100px){ .solutions-grid{ grid-template-columns:repeat(2,1fr); } }

/* ============ CARD VISUAL PLACEHOLDER (used until real photos exist) ============ */
.visual-placeholder{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; }
.visual-placeholder span{ font-family:'Fraunces',serif; font-style:italic; font-weight:340; font-size:64px; color:var(--ink); opacity:0.28; position:relative; z-index:1; }
.visual-placeholder::before{ content:""; position:absolute; inset:-20%; filter:blur(38px); mix-blend-mode:multiply; opacity:0.55; }
.visual-placeholder.blush::before{ background:var(--blush); }
.visual-placeholder.sky::before{ background:var(--sky); }
.visual-placeholder.lilac::before{ background:var(--lilac); }

/* ============ CONTACT FORM ============ */
.contact-form{ max-width:560px; }
.form-row{ margin-bottom:var(--sp-5); }
.form-row label{ display:block; font-size:13px; color:var(--slate); margin-bottom:6px; }
.form-row input, .form-row textarea{ width:100%; font-family:'Instrument Sans',sans-serif; font-size:15px; padding:12px 16px; border:1px solid var(--hairline); border-radius:10px; background:var(--fog); resize:vertical; }
.form-row input:focus, .form-row textarea:focus{ outline:none; border-color:var(--rosewood); }
.hk-honeypot{ position:absolute; left:-9999px; top:-9999px; }
.visually-hidden{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

.form-banner{ padding:14px 18px; border-radius:10px; font-size:14px; margin-bottom:var(--sp-6); }
.form-banner.success{ background:#EFF6EC; color:#2F5D3A; border:1px solid #CFE6D2; }
.form-banner.error{ background:#FBEEEC; color:#8C3A32; border:1px solid #F1D2CC; }

/* ============ INDUSTRY CARDS ============ */
.industry-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-5); }
.industry-card{ display:block; border:1px solid var(--hairline); border-radius:14px; padding:var(--sp-7) var(--sp-6); position:relative; overflow:hidden; transition:box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.industry-card::after{ content:""; position:absolute; width:160px; height:160px; top:-70px; right:-70px; border-radius:50%; filter:blur(34px); mix-blend-mode:multiply; opacity:0.45; }
.industry-card.i1::after{ background:var(--blush); } .industry-card.i2::after{ background:var(--sky); } .industry-card.i3::after{ background:var(--lilac); }
.industry-card.i4::after{ background:var(--blush); } .industry-card.i5::after{ background:var(--sky); }
.industry-card:hover{ box-shadow:0 24px 48px -28px rgba(23,24,28,0.18); transform:translateY(-4px); }
.industry-card h2{ font-family:'Fraunces',serif; font-weight:400; font-size:24px; margin:0 0 var(--sp-2); position:relative; z-index:1; }
.industry-card p{ font-size:14px; color:var(--slate); line-height:1.6; margin:0; position:relative; z-index:1; max-width:280px; }
@media (max-width:900px){ .industry-grid{ grid-template-columns:1fr; } }
@media (min-width:901px) and (max-width:1100px){ .industry-grid{ grid-template-columns:repeat(2,1fr); } }

/* ============ PAGE TRANSITION OVERLAY ============ */
.page-transition{ position:fixed; inset:0; z-index:200; pointer-events:none; display:flex; }
.page-transition .panel{ flex:1; transform:translateY(-100%); }
.page-transition .p1{ background:var(--blush); }
.page-transition .p2{ background:var(--sky); }
.page-transition .p3{ background:var(--lilac); }
.page-transition.playing .panel{ animation: wipe-in 520ms var(--ease-out) forwards, wipe-out 520ms var(--ease-out) forwards; }
.page-transition.playing .p1{ animation-delay: 0ms, 560ms; }
.page-transition.playing .p2{ animation-delay: 60ms, 620ms; }
.page-transition.playing .p3{ animation-delay: 120ms, 680ms; }
@keyframes wipe-in{ from{ transform:translateY(-100%);} to{ transform:translateY(0%);} }
@keyframes wipe-out{ from{ transform:translateY(0%);} to{ transform:translateY(100%);} }