/* ============================================================
   Scierge — site styles
   Brand system carried from the collateral (build_pdfs.py):
   EB Garamond (display) + Inter (body); cream / ink / brass.
   ============================================================ */

:root{
  --ink:#15171C; --ink-soft:#2A2E36; --paper:#FBFAF7; --panel:#F1EEE7;
  --brass:#9C7B43; --brass-br:#BE9A55; --muted:#6C7078; --line:#DAD4C8;
  --line-dk:rgba(255,255,255,.16);
  --maxw:1180px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'Inter',system-ui,sans-serif; color:var(--ink);
  background:var(--paper); line-height:1.6; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
/* subtle grain for atmosphere */
body::before{
  content:""; position:fixed; inset:0; z-index:9999; pointer-events:none; opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.serif{font-family:'EB Garamond',Georgia,serif;}
.ac{color:var(--brass); font-style:italic;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 32px;}
a{color:inherit; text-decoration:none;}

.eyebrow{
  font-weight:600; font-size:11.5px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--brass);
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-size:14px; font-weight:500; letter-spacing:.02em; padding:13px 26px;
  border-radius:2px; transition:all .35s var(--ease); cursor:pointer; border:1px solid transparent;
}
.btn-solid{background:var(--ink); color:var(--paper);}
.btn-solid:hover{background:var(--brass); color:#fff;}
.btn-line{border-color:var(--line); color:var(--ink-soft);}
.btn-line:hover{border-color:var(--brass); color:var(--brass);}
.btn-ghost{border:1px solid var(--line); padding:9px 18px; font-size:13px; color:var(--ink-soft);}
.btn-ghost:hover{border-color:var(--brass); color:var(--brass);}

/* ---------- header ---------- */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  transition:background .4s var(--ease), border-color .4s var(--ease), backdrop-filter .4s;
  border-bottom:1px solid transparent;
}
.site-header.scrolled{
  background:rgba(251,250,247,.86); backdrop-filter:blur(10px) saturate(1.2);
  border-bottom-color:var(--line);
}
.header-inner{display:flex; align-items:center; justify-content:space-between; padding-top:20px; padding-bottom:20px;}
.wordmark{font-size:27px; font-weight:500; letter-spacing:-.01em; color:var(--ink);}
.site-header .wordmark{color:var(--paper);}
.site-header.scrolled .wordmark{color:var(--ink);}
.nav{display:flex; gap:34px;}
.nav a{
  font-size:13.5px; color:rgba(251,250,247,.8); letter-spacing:.02em; position:relative; padding:4px 0;
  transition:color .3s;
}
.site-header.scrolled .nav a{color:var(--muted);}
.nav a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:0; background:var(--brass); transition:width .3s var(--ease);
}
.nav a:hover{color:var(--brass);}
.nav a:hover::after{width:100%;}
.site-header .btn-ghost{border-color:rgba(255,255,255,.3); color:rgba(251,250,247,.9);}
.site-header.scrolled .btn-ghost{border-color:var(--line); color:var(--ink-soft);}
.site-header .btn-ghost:hover{border-color:var(--brass); color:var(--brass-br);}

/* ---------- hero ---------- */
.hero{
  position:relative; background:var(--ink); color:var(--paper);
  min-height:100vh; display:flex; flex-direction:column; justify-content:center;
  padding:160px 0 56px;
  background-image:radial-gradient(120% 80% at 78% 12%, rgba(190,154,85,.16), transparent 60%);
}
.keyline{position:absolute; inset:24px; border:1px solid rgba(190,154,85,.45); pointer-events:none;}
.hero-inner{position:relative; z-index:2;}
.hero .eyebrow{color:var(--brass-br);}
.hero-title{
  font-weight:500; font-size:clamp(42px,6.2vw,82px); line-height:1.04; letter-spacing:-.015em;
  max-width:17ch; margin-top:26px;
}
.hero-lead{
  font-size:clamp(16px,1.5vw,19px); line-height:1.62; color:rgba(251,250,247,.78);
  max-width:60ch; margin-top:28px;
}
.hero-cta{display:flex; gap:14px; margin-top:38px; flex-wrap:wrap;}
.hero .btn-solid{background:var(--paper); color:var(--ink);}
.hero .btn-solid:hover{background:var(--brass); color:#fff;}
.hero .btn-line{border-color:rgba(255,255,255,.28); color:rgba(251,250,247,.85);}
.hero .btn-line:hover{border-color:var(--brass-br); color:var(--brass-br);}
.hero-foot{
  position:relative; z-index:2; display:flex; align-items:center; gap:14px;
  margin-top:64px; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:rgba(251,250,247,.5);
}
.hero-foot .dot{color:var(--brass-br);}

/* ---------- sections ---------- */
.section{padding:108px 0;}
.section-panel{background:var(--panel);}
.section-dark{background:var(--ink); color:var(--paper); position:relative;}
.section-dark .eyebrow{color:var(--brass-br);}
.section-dark .keyline{inset:0 0 0 0; border:none; border-top:1px solid var(--line-dk); border-bottom:1px solid var(--line-dk);}

.two-col{display:grid; grid-template-columns:230px 1fr; gap:48px; align-items:start;}
.col-label{padding-top:8px;}
.statement{
  font-weight:500; font-size:clamp(28px,3.6vw,46px); line-height:1.12; letter-spacing:-.01em; max-width:20ch;
}
.prose{font-size:16.5px; line-height:1.72; color:var(--muted); max-width:60ch; margin-top:24px;}
.founder-photo{display:block; width:160px; height:160px; object-fit:cover; border-radius:3px; margin-top:20px; border:1px solid var(--line);}
.section-dark .prose{color:rgba(251,250,247,.74);}

.sec-head{margin-bottom:54px; max-width:46ch;}
.sec-title{font-weight:500; font-size:clamp(28px,3.4vw,44px); line-height:1.1; letter-spacing:-.01em; margin-top:14px;}

/* ---------- service cards ---------- */
.cards{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line);}
.card{background:var(--panel); padding:42px 38px; transition:background .4s var(--ease), transform .4s var(--ease);}
.section-panel .card{background:var(--paper);}
.card-rule{width:30px; height:2px; background:var(--brass); margin-bottom:22px; transition:width .4s var(--ease);}
.card h3{font-weight:600; font-size:24px; letter-spacing:-.01em; margin-bottom:12px;}
.card p{font-size:15px; line-height:1.62; color:var(--muted);}
.card:hover{transform:translateY(-3px);}
.card:hover .card-rule{width:54px;}

/* ---------- steps ---------- */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:40px; list-style:none;}
.step-n{display:block; font-size:46px; font-weight:600; color:var(--brass); line-height:1;}
.step-rule{height:1px; background:var(--line); margin:20px 0;}
.step h4{font-size:18px; font-weight:600; margin-bottom:9px;}
.step p{font-size:15px; line-height:1.6; color:var(--muted); max-width:34ch;}

/* ---------- facts ---------- */
.facts{list-style:none; display:grid; grid-template-columns:repeat(2,1fr); gap:26px 32px; margin-top:40px; max-width:560px;}
.facts li{font-size:13.5px; color:rgba(251,250,247,.6); line-height:1.5; padding-top:16px; border-top:1px solid var(--line-dk);}
.facts li span{display:block; font-size:27px; font-weight:600; color:var(--paper); margin-bottom:4px; letter-spacing:-.01em;}

/* ---------- contact ---------- */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:start;}
.contact-intro .sec-title{margin:14px 0 18px;}
.contact-direct{display:flex; flex-direction:column; gap:6px; margin-top:30px;}
.contact-direct a{font-family:'EB Garamond',serif; font-size:22px; color:var(--ink); transition:color .3s;}
.contact-direct a:hover{color:var(--brass);}
.contact-form{background:var(--paper); border:1px solid var(--line); padding:36px;}
.section-panel .contact-form{background:var(--paper);}
.field{margin-bottom:18px;}
.field label{display:block; font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:7px;}
.field .opt{color:var(--muted); font-weight:400; text-transform:none; letter-spacing:0;}
.field input, .field textarea{
  width:100%; font-family:'Inter',sans-serif; font-size:15px; color:var(--ink);
  background:var(--paper); border:1px solid var(--line); border-radius:2px; padding:12px 14px;
  transition:border-color .3s; resize:vertical;
}
.field input:focus, .field textarea:focus{outline:none; border-color:var(--brass);}
.gotcha{position:absolute; left:-9999px;}
.contact-form .btn-solid{width:100%; margin-top:6px;}
.form-status{font-size:13.5px; margin-top:14px; min-height:1.2em;}
.form-status.ok{color:var(--brass);}
.form-status.err{color:#9a3b32;}
.form-status.sending{color:var(--muted);}

/* ---------- footer ---------- */
.site-footer{background:var(--ink); color:var(--paper); padding:56px 0;}
.footer-inner{display:flex; justify-content:space-between; align-items:flex-end; gap:30px; flex-wrap:wrap;}
.site-footer .wordmark{color:var(--paper); font-size:30px;}
.footer-tag{font-style:italic; color:var(--brass-br); font-size:16px; margin-top:10px; max-width:34ch;}
.footer-meta{display:flex; flex-direction:column; gap:5px; text-align:right; font-size:13.5px; color:rgba(251,250,247,.6);}
.footer-meta a:hover{color:var(--brass-br);}

/* ---------- reveal animation ---------- */
.reveal{opacity:0; transform:translateY(22px); transition:opacity .8s var(--ease), transform .8s var(--ease); transition-delay:calc(var(--d,0) * 110ms);}
.reveal.in{opacity:1; transform:none;}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1; transform:none; transition:none;}
  html{scroll-behavior:auto;}
}

/* ---------- responsive ---------- */
@media (max-width:860px){
  .nav{display:none;}
  .two-col{grid-template-columns:1fr; gap:20px;}
  .col-label{padding-top:0;}
  .cards{grid-template-columns:1fr;}
  .steps{grid-template-columns:1fr; gap:34px;}
  .facts{grid-template-columns:1fr 1fr;}
  .contact-grid{grid-template-columns:1fr; gap:40px;}
  .section{padding:80px 0;}
  .hero{padding:130px 0 48px;}
  .footer-inner{flex-direction:column; align-items:flex-start;}
  .footer-meta{text-align:left;}
}
@media (max-width:480px){
  .wrap{padding:0 22px;}
  .keyline{inset:14px;}
  .hero-cta{flex-direction:column; align-items:flex-start;}
  .hero-cta .btn{width:100%;}
  .facts{grid-template-columns:1fr;}
}