/* ============================================================
   TESSERA BUILD CO. — TRADE UP · SHARED TRADE-PAGE STYLES
   Used by all service pages. Homepage keeps its own inline CSS.
============================================================ */
:root{
  --ink:#141414;
  --ink-2:#1A1A1A;
  --ink-3:#2A2A2A;
  --paper:#F4F2ED;
  --paper-2:#ECE8DD;
  --paper-3:#DDD7C7;
  --gold:#C9A961;
  --gold-deep:#A8884A;
  --gold-soft:#E8D8A8;
  --line:rgba(20,20,20,0.14);
  --line-soft:rgba(20,20,20,0.08);
  --line-dark:rgba(244,242,237,0.18);
  --line-dark-soft:rgba(244,242,237,0.08);
  --serif:"Cormorant Garamond", "EB Garamond", Georgia, serif;
  --sans:"Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:"JetBrains Mono", ui-monospace, Menlo, monospace;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:inherit; text-decoration:none;}
img{display:block; max-width:100%;}

/* ---------- Type ---------- */
.eyebrow{
  font-family:var(--sans);
  font-size:11px; font-weight:600;
  letter-spacing:0.22em; text-transform:uppercase;
  color:var(--gold-deep);
  display:inline-flex; align-items:center; gap:14px;
}
.eyebrow.on-dark{color:var(--gold);}
.eyebrow .num{font-family:var(--mono); font-weight:500; font-size:10px; letter-spacing:0.05em;}
.eyebrow .rule{display:inline-block; width:36px; height:1px; background:currentColor; opacity:0.6;}
h1,h2,h3,h4{font-family:var(--serif); font-weight:500; letter-spacing:-0.005em; margin:0; color:inherit;}
h1{font-size:clamp(40px, 5.4vw, 78px); line-height:1.06; letter-spacing:-0.02em;}
h2{font-size:clamp(34px, 4.4vw, 60px); line-height:1.08; letter-spacing:-0.015em;}
h3{font-size:clamp(21px, 1.7vw, 27px); line-height:1.2;}
.italic{font-style:italic;}
.gold{color:var(--gold);}
.gold-deep{color:var(--gold-deep);}
p{margin:0;}
.wrap{max-width:1320px; margin:0 auto; padding:0 40px;}
section{position:relative;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 24px;
  font-family:var(--sans);
  font-size:13px; font-weight:600;
  letter-spacing:0.05em; text-transform:uppercase;
  border:1px solid var(--ink);
  background:var(--ink); color:var(--paper);
  cursor:pointer;
  transition:transform .2s ease, background .2s ease, color .2s ease;
  position:relative;
}
.btn::after{
  content:""; position:absolute; left:14px; right:14px; bottom:6px; height:1px;
  background:var(--gold); transform-origin:left; transform:scaleX(0); transition:transform .25s ease;
}
.btn:hover::after{transform:scaleX(1);}
.btn .arrow{font-family:var(--mono); font-weight:500; font-size:14px;}
.btn.ghost{background:transparent; color:var(--ink);}
.btn.ghost:hover{background:var(--ink); color:var(--paper);}
.btn.gold{background:var(--gold); border-color:var(--gold); color:var(--ink);}
.btn.gold::after{background:var(--ink);}
.btn.on-dark{background:var(--paper); color:var(--ink); border-color:var(--paper);}
.btn.on-dark.ghost{background:transparent; color:var(--paper); border-color:rgba(244,242,237,0.5);}
.btn.on-dark.ghost:hover{background:var(--paper); color:var(--ink);}
.btn.sm{padding:10px 16px; font-size:12px;}

/* ---------- Nav ---------- */
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(244,242,237,0.86);
  backdrop-filter:saturate(140%) blur(10px);
  -webkit-backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--line-soft);
}
.nav-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 40px;
  max-width:1440px; margin:0 auto;
}
.brand{display:flex; align-items:center; gap:14px;}
.brand img{height:34px; width:34px;}
.brand .name{
  font-family:var(--serif);
  font-size:21px; font-weight:600;
  letter-spacing:0.18em; text-transform:uppercase;
}
.brand .name small{
  display:block;
  font-family:var(--sans);
  font-size:9px; letter-spacing:0.34em; font-weight:600;
  color:var(--gold-deep); margin-top:2px;
}
.nav-links{display:flex; gap:34px; align-items:center;}
.nav-links a{font-size:13px; font-weight:500; letter-spacing:0.02em; color:var(--ink-2); position:relative;}
.nav-links a:hover{color:var(--ink);}
.nav-links a:hover::after{content:""; position:absolute; left:0; right:0; bottom:-6px; height:1px; background:var(--gold);}

/* ---------- Page hero (service pages) ---------- */
.page-hero{
  background:var(--ink);
  color:var(--paper);
  padding:104px 0 88px;
  position:relative;
  overflow:hidden;
}
.page-hero .hero-mark{
  position:absolute; right:-160px; top:-120px;
  width:560px; opacity:0.05; filter:invert(1);
  pointer-events:none;
}
.page-hero .crumb{
  font-family:var(--mono); font-size:11px; letter-spacing:0.1em;
  color:rgba(244,242,237,0.55);
  margin-bottom:28px;
  display:flex; align-items:center; gap:10px;
}
.page-hero .crumb a{color:rgba(244,242,237,0.55); border-bottom:1px solid transparent;}
.page-hero .crumb a:hover{color:var(--gold); border-color:var(--gold);}
.page-hero .crumb .sep{color:var(--gold-deep);}
.page-hero h1{color:var(--paper); max-width:18ch;}
.page-hero h1 .italic{color:var(--gold);}
.page-hero .sub{
  margin-top:28px; max-width:580px;
  font-size:18px; color:rgba(244,242,237,0.82); line-height:1.6;
}
.page-hero .hero-cta{margin-top:38px; display:flex; gap:14px; flex-wrap:wrap;}

/* ---------- Sections ---------- */
.sec{padding:110px 0;}
.sec.tight{padding:80px 0;}
.sec-head{
  display:grid; grid-template-columns:1fr 2fr; gap:48px; align-items:end;
  margin-bottom:56px;
}
.sec-head .right{max-width:680px;}
.sec-head p{color:var(--ink-3); font-size:18px; line-height:1.55;}

/* ---------- Overview (copy + facts sidebar) ---------- */
.overview{background:var(--paper);}
.ov-row{display:grid; grid-template-columns:7fr 5fr; gap:72px; align-items:start;}
.ov-copy .lead{
  font-family:var(--serif); font-style:italic;
  font-size:clamp(22px, 2vw, 28px); line-height:1.4;
  color:var(--ink); margin-bottom:26px; max-width:24ch;
}
.ov-copy p{color:var(--ink-3); font-size:16.5px; line-height:1.7; margin-bottom:18px; max-width:60ch;}
.facts{
  border:1px solid var(--line);
  background:var(--paper-2);
  padding:36px 34px 30px;
  position:relative;
}
.facts::after{content:""; position:absolute; right:-1px; top:-1px; width:48px; height:48px; border-top:1px solid var(--gold); border-right:1px solid var(--gold);}
.facts h3{font-size:20px; margin-bottom:22px; font-style:italic;}
.facts dl{margin:0;}
.facts .frow{
  display:flex; justify-content:space-between; gap:18px;
  padding:13px 0; border-bottom:1px solid var(--line-soft);
}
.facts .frow:last-child{border-bottom:none;}
.facts dt{
  font-family:var(--mono); font-size:10px; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--gold-deep);
  padding-top:3px; flex-shrink:0;
}
.facts dd{margin:0; font-size:14px; color:var(--ink-2); text-align:right; line-height:1.5;}

/* ---------- Includes ledger ---------- */
.includes{background:var(--paper-2); border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft);}
.inc-grid{
  display:grid; grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line); border-left:1px solid var(--line);
}
.inc{
  padding:34px 30px 36px;
  border-right:1px solid var(--line); border-bottom:1px solid var(--line);
  transition:background .2s ease;
}
.inc:hover{background:var(--paper);}
.inc .num{font-family:var(--serif); font-style:italic; font-size:30px; color:var(--gold-deep); line-height:1; margin-bottom:16px;}
.inc h3{font-size:21px; margin-bottom:8px;}
.inc p{font-size:14px; color:var(--ink-3); line-height:1.55;}

/* ---------- Mini process ---------- */
.mini-steps{
  display:grid; grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line); margin-top:8px;
}
.mstep{padding:36px 28px 40px; border-right:1px solid var(--line);}
.mstep:last-child{border-right:none;}
.mstep .n{font-family:var(--serif); font-style:italic; font-size:52px; line-height:1; color:var(--gold-deep); margin-bottom:18px;}
.mstep h3{margin-bottom:10px; font-size:21px;}
.mstep p{font-size:14px; color:var(--ink-3); line-height:1.6;}

/* ---------- FAQ ---------- */
.faq{background:var(--paper);}
.faq-list{border-top:1px solid var(--line); max-width:980px; margin:0 auto;}
.qa{border-bottom:1px solid var(--line);}
.qa summary{
  list-style:none; cursor:pointer;
  padding:26px 4px;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  font-family:var(--serif); font-size:23px; color:var(--ink); font-weight:500; line-height:1.3;
}
.qa summary::-webkit-details-marker{display:none;}
.plus{position:relative; width:18px; height:18px; flex-shrink:0;}
.plus::before,.plus::after{
  content:""; position:absolute; left:0; top:50%;
  width:18px; height:1.5px; background:var(--gold-deep);
  transition:transform .25s ease, opacity .25s ease;
}
.plus::before{transform:rotate(90deg);}
.qa[open] .plus::before{transform:rotate(0); opacity:0;}
.qa-body{padding:0 4px 30px; max-width:760px; color:var(--ink-3); font-size:15px; line-height:1.7;}

/* ---------- Other services strip ---------- */
.others{background:var(--paper-2); border-top:1px solid var(--line-soft);}
.others-inner{padding:56px 0 64px;}
.others .o-label{
  font-family:var(--mono); font-size:11px; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--gold-deep); margin-bottom:24px;
  display:flex; align-items:center; gap:14px;
}
.others .o-label::after{content:""; flex:1; height:1px; background:var(--line);}
.others-row{display:flex; flex-wrap:wrap; gap:10px;}
.others-row a{
  font-family:var(--sans); font-size:13px; font-weight:500; letter-spacing:0.03em;
  border:1px solid var(--line);
  padding:11px 18px;
  background:var(--paper);
  display:inline-flex; align-items:center; gap:8px;
  transition:border-color .15s ease, background .15s ease;
}
.others-row a:hover{border-color:var(--gold-deep); background:var(--paper-2);}
.others-row a .arrow{font-family:var(--mono); font-size:12px; color:var(--gold-deep);}

/* ---------- CTA ---------- */
.cta-final{background:var(--ink); color:var(--paper); padding:120px 0 110px; position:relative; overflow:hidden; border-top:1px solid var(--line-dark-soft);}
.cta-final .mark-bg{position:absolute; right:-180px; bottom:-180px; width:680px; opacity:0.05; filter:invert(1); pointer-events:none;}
.cta-inner{position:relative; max-width:1100px;}
.cta-final h2{color:var(--paper); max-width:18ch;}
.cta-final h2 .gold{color:var(--gold);}
.cta-final .sub{margin-top:24px; max-width:540px; font-size:17px; color:rgba(244,242,237,0.78); line-height:1.55;}
.cta-row{margin-top:46px; display:flex; align-items:center; gap:16px; flex-wrap:wrap;}
.cta-lic{
  margin-top:56px; padding-top:24px;
  border-top:1px solid var(--line-dark);
  font-family:var(--mono); font-size:11px; letter-spacing:0.1em;
  color:rgba(244,242,237,0.55);
  display:flex; gap:28px; flex-wrap:wrap;
}
.cta-lic strong{color:var(--gold); font-weight:500;}

/* ---------- Footer ---------- */
.foot{background:var(--ink); color:rgba(244,242,237,0.7); border-top:1px solid var(--line-dark); padding:48px 0 56px; font-size:13px;}
.foot-inner{display:flex; justify-content:space-between; align-items:center; gap:32px; flex-wrap:wrap;}
.foot .brand .name{color:var(--paper); font-size:16px;}
.foot .brand img{filter:invert(1); height:28px; width:28px;}
.foot .legal{display:flex; gap:24px; font-family:var(--mono); font-size:11px; letter-spacing:0.08em;}
.foot a:hover{color:var(--gold);}
.foot .links{display:flex; gap:24px;}
.foot .links a{font-size:13px;}

/* ---------- Responsive ---------- */
@media (max-width:1024px){
  .nav-links{gap:22px;}
}
@media (max-width:900px){
  .sec-head{grid-template-columns:1fr; gap:24px;}
  .ov-row{grid-template-columns:1fr; gap:44px;}
  .inc-grid{grid-template-columns:1fr 1fr;}
  .mini-steps{grid-template-columns:1fr;}
  .mstep{border-right:none; border-bottom:1px solid var(--line);}
  .mstep:last-child{border-bottom:none;}
  .nav-links{display:none;}
}
@media (max-width:600px){
  .wrap{padding:0 22px;}
  .nav-inner{padding:14px 20px;}
  .brand .name{font-size:17px; letter-spacing:0.14em;}
  .brand .name small{font-size:8px; letter-spacing:0.28em;}
  .sec{padding:72px 0;}
  .sec.tight{padding:56px 0;}
  .page-hero{padding:72px 0 64px;}
  .page-hero .sub{font-size:16px;}
  .page-hero .hero-cta{flex-direction:column; align-items:stretch;}
  .page-hero .hero-cta .btn{justify-content:center;}
  .inc-grid{grid-template-columns:1fr;}
  .inc{border-right:none;}
  .facts{padding:28px 24px 22px;}
  .facts .frow{flex-direction:column; gap:4px;}
  .facts dd{text-align:left;}
  .qa summary{font-size:18px; padding:22px 4px; gap:16px;}
  .qa-body{font-size:14px; padding-bottom:24px;}
  .cta-final{padding:88px 0 80px;}
  .cta-row{flex-direction:column; align-items:stretch;}
  .cta-row .btn{justify-content:center;}
  .foot-inner{flex-direction:column; align-items:flex-start; gap:18px;}
}

/* ---------- Trade page: pain points ---------- */
.pains{background:var(--paper);}
.pain-grid{
  display:grid; grid-template-columns:1fr 1fr;
  gap:0;
  border-top:1px solid var(--line);
  border-left:1px solid var(--line);
}
.pain{
  padding:34px 32px 36px;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  display:grid; grid-template-columns:52px 1fr; gap:20px;
  align-items:start;
}
.pain .pn{
  font-family:var(--serif); font-style:italic;
  font-size:34px; line-height:1; color:var(--gold-deep);
  padding-top:2px;
}
.pain h3{font-size:21px; margin-bottom:8px;}
.pain p{font-size:14.5px; color:var(--ink-3); line-height:1.6;}

/* ---------- Trade page: scorecard promo band ---------- */
.score-band{
  background:var(--paper-3);
  border-top:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft);
  padding:64px 0;
}
.score-band .sb-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:40px; flex-wrap:wrap;
}
.score-band h3{
  font-size:clamp(24px, 2.4vw, 34px);
  max-width:22ch;
}
.score-band h3 .italic{color:var(--gold-deep);}
.score-band p{font-size:15px; color:var(--ink-3); max-width:46ch; margin-top:10px;}
@media (max-width:900px){
  .pain-grid{grid-template-columns:1fr;}
  .pain{border-right:none;}
}
@media (max-width:600px){
  .pain{padding:26px 22px 28px; grid-template-columns:40px 1fr; gap:14px;}
  .pain .pn{font-size:26px;}
  .score-band .sb-inner{flex-direction:column; align-items:flex-start;}
}

/* ============================================================
   MOBILE NAVIGATION — hamburger + drawer (injected by JS)
============================================================ */
.nav-toggle{
  display:none;
  width:44px; height:44px;
  flex-direction:column; justify-content:center; align-items:center; gap:5px;
  background:none; border:none; cursor:pointer; padding:0;
  margin-left:6px; position:relative; z-index:60;
}
.nav-toggle span{
  display:block; width:24px; height:2px; border-radius:2px;
  background:var(--ink);
  transition:transform .3s ease, opacity .2s ease, background .3s ease;
}
body.menu-open .nav-toggle span{background:var(--paper);}
body.menu-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg);}
body.menu-open .nav-toggle span:nth-child(2){opacity:0;}
body.menu-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

.mobile-menu{
  position:fixed; inset:0; z-index:45;
  background:var(--ink);
  display:flex; flex-direction:column; justify-content:flex-start;
  padding:92px 26px 40px;
  overflow-y:auto;
  opacity:0; visibility:hidden; transform:translateY(-10px);
  transition:opacity .28s ease, transform .28s ease, visibility .28s;
}
body.menu-open .mobile-menu{opacity:1; visibility:visible; transform:none;}
.mobile-menu .mm-inner{width:100%; max-width:460px; margin:0 auto;}
.mobile-menu .mm-group{padding:8px 0 24px; border-bottom:1px solid var(--line-dark-soft);}
.mobile-menu a{
  display:flex; align-items:baseline; gap:14px;
  color:var(--paper); font-family:var(--serif); font-weight:500;
  font-size:24px; line-height:1.3; padding:13px 0;
}
.mobile-menu a:active{color:var(--gold-soft);}
.mobile-menu .mm-txt{flex:1; min-width:0;}
.mobile-menu .mm-cta{
  margin-top:30px;
  background:var(--gold); color:var(--ink);
  font-family:var(--sans); font-size:15px; font-weight:600;
  letter-spacing:0.02em; justify-content:center; align-items:center;
  padding:18px 22px; gap:10px;
}
.mobile-menu .mm-cta .arrow{font-family:var(--sans);}
body.menu-open{overflow:hidden;}
body.menu-open .nav{background:var(--ink); border-bottom-color:rgba(244,242,237,0.08);}
body.menu-open .nav .brand .name{color:var(--paper);}
body.menu-open .nav .brand img{filter:invert(1);}

@media (max-width:900px){
  .nav-toggle{display:flex;}
  .nav .btn.sm{display:none;}
}
@media (min-width:901px){
  .mobile-menu{display:none;}
}

/* ---------- Film grain — barely-visible texture over everything ---------- */
body::after{
  content:""; position:fixed; inset:0; z-index:9000; pointer-events:none;
  opacity:0.05;
  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='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:160px 160px;
}

/* ============================================================
   TRADE UP ACCENT — sibling brand, not a clone.
   Construction = timber gold · Trade Up = worked clay.
   Clay carries the editorial accents on paper; gold stays on
   dark panels and CTAs as the shared Tessera thread.
============================================================ */
:root{
  --clay:#A8552E;
  --clay-deep:#8F4424;
  --clay-soft:#D89B72;
}
/* Operator's-playbook eyebrows: mono, wider tracking, clay */
.eyebrow{font-family:var(--mono); font-weight:500; letter-spacing:0.2em; color:var(--clay-deep);}
.eyebrow.on-dark{color:var(--clay-soft);}
/* Editorial italic accents shift from gold to clay on paper */
.gold-deep{color:var(--clay-deep);}
.nav-links a:hover::after{background:var(--clay);}

/* Mobile caps density */
@media (max-width:600px){
  .eyebrow{letter-spacing:0.15em;}
}