/* Stratum & Oak — design system
   Palette: mahogany + antique gold. Type: Cinzel / EB Garamond / IBM Plex Mono. */

:root{
  --espresso:#140d07;      /* page ground, deep espresso */
  --saddle:#241710;        /* card top */
  --panel:#1d130c;         /* card bottom */
  --gold:#c5a059;          /* antique gold, the emblem colour */
  --gold-lift:#dcbe7e;
  --bronze:#7a5c38;        /* hairlines and ornaments */
  --copper:#9e6038;        /* eyebrows */
  --ivory:#f1ead9;         /* headings */
  --text:#cfc2ab;          /* body */
  --dim:#94836a;           /* secondary */
  --line:#3a2b1c;          /* rules and borders */
  --navy:#1c2733;          /* documents only */
  --ok:#7fae7a;
  --bad:#c07a6a;
  --shell:1080px;
  --ease:cubic-bezier(.2,.7,.3,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--espresso);
  color:var(--text);
  font-family:'EB Garamond',Georgia,serif;
  font-size:18.5px;
  line-height:1.65;
  background-image:radial-gradient(1200px 620px at 50% -120px, #2a1b12 0%, var(--espresso) 72%);
  background-attachment:fixed;
  overflow-x:hidden;
}

/* fine leather grain over the whole page */
body::before{
  content:"";
  position:fixed; inset:0; z-index:0; pointer-events:none;
  opacity:.05; mix-blend-mode:overlay;
  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='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
body > *{position:relative; z-index:1}

h1,h2,h3,h4{font-family:'Cinzel',Georgia,serif; color:var(--ivory); font-weight:500; line-height:1.18; margin:0 0 .45em}
h1{font-size:clamp(28px,4.4vw,46px); letter-spacing:2px}
h2{font-size:clamp(24px,3.4vw,36px); letter-spacing:1px}
h3{font-size:22px}
p{margin:0 0 1.1em}
a{color:var(--gold); text-decoration:none; transition:color .2s}
a:hover{color:var(--gold-lift)}
img{max-width:100%; height:auto}
:focus-visible{outline:2px solid var(--gold); outline-offset:3px}

.wrap{max-width:var(--shell); margin:0 auto; padding:0 28px}
.narrow{max-width:760px; margin-left:auto; margin-right:auto}
.center{text-align:center}
.eyebrow{font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:11.5px; letter-spacing:5px; text-transform:uppercase; color:var(--copper); margin-bottom:16px}
.mono{font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:11.5px; letter-spacing:2px; text-transform:uppercase}
.sub{max-width:680px; margin:0 auto 46px; color:var(--dim)}
.lede{font-size:20px; color:var(--text)}
section{padding:84px 0; border-top:1px solid var(--line)}
section:first-of-type{border-top:0}

/* ---------- navigation ---------- */
nav{
  position:sticky; top:0; z-index:50;
  background:rgba(20,13,7,.9);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
  transition:padding .3s var(--ease), background .3s;
}
nav.tight{background:rgba(20,13,7,.97)}
.nav-in{display:flex; align-items:center; justify-content:space-between; gap:18px; max-width:var(--shell); margin:0 auto; padding:14px 28px; transition:padding .3s var(--ease)}
nav.tight .nav-in{padding-top:9px; padding-bottom:9px}
.brand{display:flex; align-items:center; gap:12px; color:var(--ivory); font-family:'Cinzel',serif; font-size:19px; letter-spacing:4px; white-space:nowrap}
.brand img{height:30px; width:auto; transition:height .3s var(--ease)}
nav.tight .brand img{height:24px}
.nav-links{display:flex; gap:26px; font-family:'IBM Plex Mono',monospace; font-size:11.5px; letter-spacing:2px; text-transform:uppercase}
.nav-links a{color:var(--dim); position:relative; padding:4px 0}
.nav-links a::after{content:""; position:absolute; left:0; bottom:0; height:1px; width:0; background:var(--gold); transition:width .3s var(--ease)}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--gold)}
.nav-links a:hover::after,.nav-links a[aria-current="page"]::after{width:100%}
@media(max-width:820px){
  .nav-in{flex-direction:column; gap:10px; padding:12px 20px}
  .nav-links{gap:16px; font-size:10.5px; letter-spacing:1px; flex-wrap:wrap; justify-content:center}
  .brand{font-size:16px; letter-spacing:3px}
}

/* ---------- breadcrumbs ---------- */
.crumbs{font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--dim); padding:22px 0 0}
.crumbs ol{list-style:none; display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0}
.crumbs li::after{content:"›"; margin-left:8px; color:var(--bronze)}
.crumbs li:last-child::after{content:""}
.crumbs a{color:var(--dim)} .crumbs a:hover{color:var(--gold)}
.crumbs [aria-current]{color:var(--copper)}

/* ---------- hero ---------- */
header.hero{padding:76px 0 62px; text-align:center}
header.hero .emblem{width:min(420px,84vw); height:auto; animation:float 9s ease-in-out infinite}
header.hero h1{margin:30px 0 18px}
header.hero p{max-width:660px; margin-left:auto; margin-right:auto}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.page-head{padding:44px 0 8px; text-align:center}
.page-head h1{margin-top:10px}

/* ---------- buttons ---------- */
.btn{
  display:inline-block; position:relative; overflow:hidden;
  border:1px solid var(--gold); color:var(--gold); background:transparent;
  padding:14px 34px; cursor:pointer;
  font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:3px; text-transform:uppercase;
  transition:color .3s var(--ease), border-color .3s;
}
.btn::before{content:""; position:absolute; inset:0; background:var(--gold); transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease); z-index:-1}
.btn:hover{color:var(--espresso)} .btn:hover::before{transform:scaleX(1)}
.btn span{position:relative; z-index:1}
.btn.solid{background:var(--gold); color:var(--espresso); border-color:var(--gold)}
.btn.solid::before{background:var(--gold-lift)}
.btn.solid:hover{color:var(--espresso)}
.btn-row{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:8px}

/* ---------- cards / tiers ---------- */
.grid{display:grid; gap:22px; margin-top:44px}
.g3{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.g2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.card{
  background:linear-gradient(160deg,var(--saddle),var(--panel));
  border:1px solid var(--line);
  padding:36px 32px; position:relative; text-align:left;
  transition:transform .45s var(--ease), border-color .35s, box-shadow .45s;
  transform-style:preserve-3d;
}
.card{box-shadow:none}
.card:hover{border-color:var(--bronze); box-shadow:0 18px 44px rgba(0,0,0,.45), 0 0 0 1px rgba(197,160,89,.09)}
.card.feature{border-color:var(--bronze)}
.card .tag{position:absolute; top:-11px; left:32px; background:var(--gold); color:var(--espresso); font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:2px; padding:3px 10px; text-transform:uppercase}
.card h3{font-size:25px}
.card h3 a{color:var(--ivory)} .card h3 a:hover{color:var(--gold)}
.price{font-family:'Cinzel',serif; color:var(--gold); font-size:23px; margin:6px 0 18px}
.price small{display:block; font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:2px; text-transform:uppercase; color:var(--dim); margin-bottom:3px}
.ticks{list-style:none; margin:0; padding:0}
.ticks li{padding:10px 0 10px 26px; border-top:1px solid var(--line); font-size:16.5px; position:relative}
.ticks li::before{content:"◆"; position:absolute; left:2px; top:15px; color:var(--bronze); font-size:9px}
.card .more{display:inline-block; margin-top:20px; font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:2px; text-transform:uppercase}

/* ---------- case rows ---------- */
.case{display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:center}
.case + .case{margin-top:66px}
.case .meta{font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--copper); margin-bottom:12px}
.case h3{font-family:'EB Garamond',serif; font-size:29px}
.shot{
  background:linear-gradient(160deg,var(--saddle),var(--panel));
  border:1px solid var(--line); aspect-ratio:16/10;
  display:flex; align-items:center; justify-content:center;
  font-family:'Cinzel',serif; color:var(--bronze); font-size:18px; letter-spacing:3px; text-align:center; padding:20px;
  transition:border-color .35s, transform .45s var(--ease);
}
.case:hover .shot{border-color:var(--bronze); transform:translateY(-4px)}
@media(max-width:820px){.case{grid-template-columns:1fr; gap:24px} .case.flip .shot{order:-1}}

/* ---------- steps ---------- */
.steps{display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:24px; margin-top:48px; text-align:left}
.step{border-top:2px solid var(--bronze); padding-top:22px}
.step .n{font-family:'Cinzel',serif; color:var(--gold); font-size:32px; line-height:1}
.step h3{font-size:21px; margin-top:8px}
.step p{font-size:16px; color:var(--dim); margin:0}

/* ---------- prose blocks ---------- */
.block{background:linear-gradient(160deg,var(--saddle),var(--panel)); border:1px solid var(--line); padding:38px 40px; margin-bottom:26px}
.block h3{font-size:24px; margin-top:0}
.pull{border-left:2px solid var(--bronze); padding:6px 0 6px 24px; margin:30px 0; color:var(--ivory); font-family:'Cinzel',serif; font-size:20px; line-height:1.5}
.rule{height:1px; background:linear-gradient(90deg,transparent,var(--bronze),transparent); margin:56px auto; max-width:520px}
.faq{border-top:1px solid var(--line); padding:22px 0}
.faq h3{font-size:19px; font-family:'EB Garamond',serif; color:var(--ivory); margin-bottom:8px}
.faq p{margin:0; color:var(--dim); font-size:16.5px}
.kv{display:grid; grid-template-columns:180px 1fr; gap:12px 24px; margin:26px 0}
.kv dt{font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--copper); padding-top:5px}
.kv dd{margin:0}
@media(max-width:620px){.kv{grid-template-columns:1fr; gap:4px 0} .kv dd{margin-bottom:14px} .block{padding:28px 24px}}

/* ---------- contact form ---------- */
#lead-form{max-width:580px; margin:38px auto 0; text-align:left}
#lead-form .frow{display:flex; gap:14px}
@media(max-width:620px){#lead-form .frow{flex-direction:column; gap:0}}
#lead-form input,#lead-form textarea{
  width:100%; background:var(--panel); border:1px solid var(--line); color:var(--ivory);
  font-family:'EB Garamond',serif; font-size:17px; padding:13px 15px; margin-bottom:14px; outline:none; resize:vertical;
  transition:border-color .25s, box-shadow .25s;
}
#lead-form input:focus,#lead-form textarea:focus{border-color:var(--bronze); box-shadow:0 0 0 3px rgba(197,160,89,.1)}
#lead-form ::placeholder{color:var(--dim)}
#lead-form button{width:100%}
#lead-form .hp{position:absolute; left:-9999px; height:0; width:0; padding:0; margin:0; border:0}
#lead-status{font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:1px; text-align:center; min-height:20px; color:var(--gold); margin-top:14px}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line); padding:56px 0 44px; margin-top:20px}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px; text-align:left}
@media(max-width:820px){.foot-grid{grid-template-columns:1fr 1fr; gap:28px}}
@media(max-width:480px){.foot-grid{grid-template-columns:1fr}}
.foot-grid h4{font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:2px; text-transform:uppercase; color:var(--copper); margin-bottom:14px; font-weight:400}
.foot-grid ul{list-style:none; margin:0; padding:0}
.foot-grid li{margin-bottom:9px; font-size:16px}
.foot-grid a{color:var(--dim)} .foot-grid a:hover{color:var(--gold)}
.foot-brand img{height:34px; width:auto; opacity:.8; margin-bottom:14px}
.foot-brand p{font-size:15.5px; color:var(--dim); margin:0}
.colophon{border-top:1px solid var(--line); margin-top:44px; padding-top:26px; display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap;
  font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:2px; text-transform:uppercase; color:var(--dim)}

/* ---------- scroll reveal ---------- */
.reveal{opacity:0; transform:translateY(22px); transition:opacity .85s var(--ease), transform .85s var(--ease)}
.reveal.in{opacity:1; transform:none}
.stagger > *{opacity:0; transform:translateY(22px); transition:opacity .8s var(--ease), transform .8s var(--ease)}
.stagger.in > *{opacity:1; transform:none}
.stagger.in > *:nth-child(2){transition-delay:.1s}
.stagger.in > *:nth-child(3){transition-delay:.2s}
.stagger.in > *:nth-child(4){transition-delay:.3s}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important; transition-duration:.01ms !important}
  .reveal,.stagger > *{opacity:1 !important; transform:none !important}
  html{scroll-behavior:auto}
  header.hero .emblem{animation:none}
}

/* ---------- print: pages print in the document palette ---------- */
@media print{
  :root{
    --espresso:#fff; --saddle:#fff; --panel:#fff;
    --gold:#a5813f; --gold-lift:#8d6c31; --bronze:#a5813f; --copper:#a5813f;
    --ivory:#1c2733; --text:#3d4a58; --dim:#5d6b79; --line:#ddd5c7;
  }
  body{background:#fff !important; background-image:none !important; font-size:11.5pt}
  body::before{display:none}
  nav,.crumbs,.btn-row,footer .foot-grid{display:none !important}
  section{padding:18pt 0; page-break-inside:avoid}
  .card,.block{box-shadow:none; background:#fff; border:1px solid var(--line)}
  header.hero .emblem{width:150pt; animation:none; filter:invert(1) sepia(1) saturate(4) hue-rotate(175deg) brightness(.42)}
  h1,h2,h3{page-break-after:avoid}
  a{color:#1c2733; text-decoration:none}
  a[href^="http"]::after,a[href^="/"]::after{content:" (" attr(href) ")"; font-size:8pt; color:#6d7b89}
  footer{border-top:1px solid var(--line); padding:14pt 0}
  @page{margin:0.6in}
}