/* ============================================
   Data Disruption — Shared Site Stylesheet
   ============================================ */

:root{
  --bg:#f8f3e8;
  --bg-2:#efe7d2;
  --paper:#fcf9f1;
  --ink:#0f0e0a;
  --ink-dim:#3f3b31;
  --ink-mid:#666051;
  --ink-muted:#8a836f;

  --line:#d7ceb2;
  --line-dark:#b7ae91;

  --navy:#17366f;
  --navy-deep:#0e244b;
  --navy-ink:#ece6d7;

  --accent:#d8ff39;
  --accent-dark:#6d8717;
  --leaf:#476440;
  --rust:#b8502e;

  --serif:"Fraunces", Georgia, serif;
  --sans:"Inter", ui-sans-serif, system-ui, sans-serif;
  --mono:"JetBrains Mono", ui-monospace, monospace;
}

*{box-sizing:border-box}
html{
  scroll-behavior:smooth;
  scroll-padding-top:92px;
}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:200;
  mix-blend-mode:multiply;
  opacity:.35;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.03 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

.wrap{
  max-width:1240px;
  margin:0 auto;
  padding:0 clamp(20px,4vw,56px);
}

.wrap-narrow{
  max-width:820px;
  margin:0 auto;
  padding:0 clamp(20px,4vw,56px);
}

section{
  padding:clamp(72px,9vw,130px) 0;
  border-bottom:1px solid var(--line);
  position:relative;
}

section[id]{scroll-margin-top:92px}

h1,h2,h3,h4{
  margin:0;
  font-family:var(--serif);
  font-weight:400;
  letter-spacing:-0.03em;
  line-height:1.02;
}
h1{font-size:clamp(54px,8vw,128px)}
h2{font-size:clamp(34px,5vw,72px)}
h3{font-size:clamp(24px,2.4vw,34px)}
h4{font-size:18px}

p{
  margin:0 0 16px;
  color:var(--ink-dim);
  max-width:66ch;
}

.lede{
  font-size:clamp(18px,1.35vw,22px);
  line-height:1.55;
  color:var(--ink);
  max-width:58ch;
}

strong{font-weight:600;color:var(--ink)}
em{font-style:italic}

a{color:inherit;text-decoration:none}
a:focus-visible, button:focus-visible{
  outline:2px solid var(--navy);
  outline-offset:3px;
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-bottom:20px;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--navy);
}
.eyebrow::before{
  content:"";
  width:28px;
  height:1px;
  background:var(--navy);
}

/* ======= NAV ======= */
header.nav{
  position:sticky;
  top:0;
  z-index:100;
  backdrop-filter:blur(14px);
  background:rgba(248,243,232,.92);
  border-bottom:1px solid var(--line);
}

.nav-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:16px 0;
}

.logo{
  display:flex;
  align-items:center;
  gap:10px;
  white-space:nowrap;
  font-family:var(--serif);
  font-size:20px;
  letter-spacing:-.01em;
}
.logo svg{width:30px;height:22px;flex:0 0 auto}
.logo .slash{color:var(--navy);font-style:italic}

nav.primary ul{
  list-style:none;
  display:flex;
  gap:26px;
  margin:0;
  padding:0;
  flex-wrap:wrap;
  justify-content:center;
}
nav.primary a{
  color:var(--ink-mid);
  font-size:14px;
  transition:color .2s ease;
}
nav.primary a:hover{color:var(--navy)}
nav.primary a.current{color:var(--navy);border-bottom:1px solid var(--navy);padding-bottom:2px}

.cta-nav,.btn-primary,.btn-dark,.btn-ghost{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:14px 22px;
  border-radius:2px;
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.1em;
  text-transform:uppercase;
  transition:transform .2s ease, box-shadow .3s ease, background .2s ease, border-color .2s ease, color .2s ease;
  cursor:pointer;
  border:0;
}

.cta-nav{
  padding:10px 18px;
  background:var(--ink);
  color:var(--bg);
  white-space:nowrap;
}
.cta-nav:hover{background:var(--navy)}

.btn-primary{
  background:var(--navy);
  color:var(--bg);
}
.btn-primary:hover,
.btn-dark:hover{
  transform:translateY(-1px);
  box-shadow:0 14px 34px -14px rgba(23,54,111,.45);
}

.btn-dark{
  background:var(--ink);
  color:var(--bg);
}

.btn-ghost{
  border:1px solid var(--line-dark);
  color:var(--ink);
  background:transparent;
}
.btn-ghost:hover{
  border-color:var(--navy);
  color:var(--navy);
}

.arr{
  font-family:var(--serif);
  font-style:italic;
  text-transform:none;
  font-size:16px;
}

@media (max-width:900px){
  nav.primary{display:none}
}

/* ======= PAGE HEADER (for inner pages) ======= */
.page-header{
  padding:clamp(60px,9vw,120px) 0 clamp(40px,6vw,80px);
  background:
    radial-gradient(ellipse at 82% 24%, rgba(23,54,111,.06), transparent 56%),
    radial-gradient(ellipse at 15% 82%, rgba(216,255,57,.07), transparent 56%),
    var(--bg);
  border-bottom:1px solid var(--line);
}

.page-header h1{
  font-size:clamp(40px,6vw,88px);
}
.page-header h1 em{color:var(--navy)}

.page-header .lede{
  margin-top:24px;
  max-width:62ch;
}

.breadcrumb{
  margin-bottom:28px;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--ink-muted);
}
.breadcrumb a{color:var(--ink-muted)}
.breadcrumb a:hover{color:var(--navy)}
.breadcrumb .sep{color:var(--line-dark);margin:0 8px}

/* ======= CONTENT UTILITIES ======= */
.split{
  display:grid;
  grid-template-columns:1fr;
  gap:36px;
  margin-top:clamp(40px,5vw,70px);
}
@media (min-width:980px){
  .split{
    grid-template-columns:1fr 1.1fr;
    gap:70px;
  }
}

.points{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:12px;
}
.points li{
  position:relative;
  padding:14px 0 14px 24px;
  border-bottom:1px solid var(--line);
  color:var(--ink-dim);
}
.points li::before{
  content:"•";
  position:absolute;
  left:0;
  top:12px;
  color:var(--navy);
  font-size:18px;
}

.refuses{
  margin-top:30px;
  padding-top:26px;
  border-top:1px solid var(--line-dark);
  display:grid;
  gap:10px;
}
.refuses .label{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--rust);
  margin-bottom:6px;
}
.refuses ul{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:4px;
}
.refuses li{
  position:relative;
  padding:8px 0 8px 26px;
  font-family:var(--serif);
  font-size:17px;
  font-style:italic;
  color:var(--ink);
  line-height:1.35;
  letter-spacing:-.005em;
}
.refuses li::before{
  content:"✗";
  position:absolute;
  left:0;
  top:8px;
  color:var(--rust);
  font-style:normal;
  font-family:var(--sans);
}

.alt{background:var(--bg-2)}

/* ======= CTA SECTION (reusable) ======= */
.cta-section{
  padding:clamp(80px,10vw,140px) 0;
  text-align:center;
  border-bottom:0;
  background:
    radial-gradient(ellipse at center, rgba(216,255,57,.12), transparent 60%),
    var(--bg);
}
.cta-section h2{
  max-width:22ch;
  margin:0 auto;
}
.cta-section .lede{
  margin:28px auto 36px;
  max-width:58ch;
  text-align:center;
}
.sub-cta{
  margin-top:22px;
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.05em;
  color:var(--ink-muted);
}
.sub-cta a{
  color:var(--navy);
  border-bottom:1px dashed var(--navy);
}

/* ======= FOOTER ======= */
footer.site{
  padding:64px 0 32px;
  background:var(--navy);
  color:var(--navy-ink);
  border-top:1px solid var(--line);
  font-size:13px;
}
.foot-grid{
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr 1fr;
  gap:32px;
  padding-bottom:48px;
  border-bottom:1px solid rgba(236,230,215,.15);
}
@media (max-width:840px){
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .foot-grid{grid-template-columns:1fr}
}

footer.site h4{
  margin-bottom:18px;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--bg);
  font-weight:500;
}
.logo-foot{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:16px;
  font-family:var(--serif);
  font-size:22px;
  color:var(--bg);
}
.logo-foot .slash{color:var(--accent);font-style:italic}
footer.site p{
  max-width:36ch;
  color:rgba(236,230,215,.68);
}
footer.site ul{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:12px;
}
footer.site a{
  color:rgba(236,230,215,.78);
  transition:color .2s ease;
}
footer.site a:hover{color:var(--accent)}
.foot-bot{
  padding-top:24px;
  display:flex;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.1em;
  color:rgba(236,230,215,.5);
  text-transform:uppercase;
}
.slogan{
  color:var(--accent);
  font-family:var(--serif);
  font-size:14px;
  letter-spacing:0;
  text-transform:none;
  font-style:italic;
}

/* ======= REVEAL ANIMATIONS ======= */
.reveal{opacity:1;transform:none}
.js .reveal{
  opacity:0;
  transform:translateY(20px);
  transition:opacity .8s ease, transform .8s ease;
}
.js .reveal.in{
  opacity:1;
  transform:none;
}
.d1{transition-delay:.08s}
.d2{transition-delay:.16s}
.d3{transition-delay:.24s}

@media (max-width:768px){
  body::before{opacity:.18}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  body::before{display:none}
  .reveal,.js .reveal,.js .reveal.in{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }
}


/* ======= MOBILE MENU / SHARED UPGRADES ======= */
.menu-toggle{
  display:none;
  width:46px;
  height:46px;
  padding:0;
  border:1px solid var(--line-dark);
  background:var(--paper);
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:5px;
  border-radius:2px;
}
.menu-toggle span{
  display:block;
  width:18px;
  height:2px;
  background:var(--ink);
  transition:transform .24s ease, opacity .24s ease;
}
.mobile-menu{
  position:fixed;
  inset:72px 0 0 0;
  background:rgba(15,14,10,.28);
  backdrop-filter:blur(4px);
  opacity:0;
  visibility:hidden;
  transition:opacity .24s ease, visibility .24s ease;
  z-index:99;
}
.mobile-menu-inner{
  background:var(--paper);
  border-bottom:1px solid var(--line);
  box-shadow:0 20px 50px -30px rgba(15,14,10,.3);
  padding:20px;
}
.mobile-nav ul{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:2px;
}
.mobile-nav a{
  display:block;
  padding:14px 0;
  font-family:var(--serif);
  font-size:28px;
  letter-spacing:-.02em;
  border-bottom:1px solid var(--line);
}
.mobile-nav a.current{color:var(--navy)}
.mobile-cta-wrap{
  display:grid;
  gap:12px;
  padding-top:16px;
}
.mobile-cta-wrap .cta-nav{
  justify-content:center;
}
.mobile-email{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.06em;
  color:var(--navy);
  text-align:center;
}
body.menu-open{overflow:hidden}
body.menu-open .mobile-menu{opacity:1;visibility:visible}
body.menu-open .menu-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.menu-open .menu-toggle span:nth-child(2){opacity:0}
body.menu-open .menu-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.kicker-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  margin-top:26px;
}
.kicker-card{
  padding:18px 18px 16px;
  border:1px solid var(--line);
  background:rgba(252,249,241,.78);
  border-radius:2px;
}
.kicker-card .label{
  font-family:var(--mono);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:var(--ink-muted);
  display:block;
  margin-bottom:8px;
}
.kicker-card strong{
  display:block;
  font-family:var(--serif);
  font-size:22px;
  font-weight:400;
  letter-spacing:-.02em;
  line-height:1.15;
  margin-bottom:8px;
}
.kicker-card p{
  margin:0;
  font-size:14px;
  color:var(--ink-mid);
}
.stat-line{
  display:flex;
  flex-wrap:wrap;
  gap:10px 14px;
  margin-top:24px;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink-muted);
}
.stat-line strong{
  color:var(--navy);
  font-weight:600;
}
.badge-line{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:24px;
}
.badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border:1px solid var(--line-dark);
  background:var(--paper);
  border-radius:2px;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--ink);
}
.mini-proof{
  margin-top:clamp(38px,5vw,56px);
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:var(--line-dark);
  border:1px solid var(--line-dark);
}
.mini-proof article{
  background:var(--paper);
  padding:24px;
}
.mini-proof h3{
  font-size:22px;
  font-style:italic;
  color:var(--navy);
  margin-bottom:8px;
}
.mini-proof p{
  margin:0;
  font-size:14px;
}
.proof-inline{
  margin-top:16px;
  padding-top:16px;
  border-top:1px solid var(--line);
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink-muted);
}

.quick-fit{
  margin-top:34px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1px;
  background:var(--line-dark);
  border:1px solid var(--line-dark);
}
.quick-fit .pane{
  background:var(--bg);
  padding:24px;
}
.quick-fit h4{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--navy);
  margin-bottom:14px;
}
.quick-fit ul{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:10px;
}
.quick-fit li{
  padding-left:18px;
  position:relative;
  color:var(--ink-dim);
}
.quick-fit li::before{
  content:'•';
  position:absolute;
  left:0;
  top:0;
  color:var(--navy);
}

.contact-form{
  display:grid;
  gap:14px;
  margin-top:18px;
}
.contact-form .row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
.contact-form label{
  display:grid;
  gap:6px;
  font-size:13px;
  color:var(--ink-mid);
}
.contact-form input,
.contact-form select,
.contact-form textarea{
  width:100%;
  padding:13px 14px;
  border:1px solid var(--line-dark);
  background:var(--paper);
  color:var(--ink);
  font:inherit;
  border-radius:2px;
}
.contact-form textarea{
  min-height:140px;
  resize:vertical;
}
.form-status{
  min-height:1.4em;
  margin-top:2px;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.04em;
  color:var(--ink-muted);
}
.btn-primary.is-busy{opacity:.85}
.callout{
  margin-top:28px;
  padding:20px 22px;
  border-left:3px solid var(--navy);
  background:rgba(23,54,111,.04);
}
.callout p:last-child{margin-bottom:0}

@media (max-width:900px){
  .menu-toggle{display:inline-flex}
}
@media (max-width:760px){
  .kicker-grid,
  .mini-proof,
  .quick-fit{grid-template-columns:1fr}
  .contact-form .row{grid-template-columns:1fr}
  .cta-nav{display:none}
  header.nav .nav-inner{gap:12px}
}