/* ============================================================
   Truss Lead Gen — shared stylesheet
   ============================================================ */

:root{
  --ink:#131E29;
  --ink-2:#1B2A38;
  --paper:#EEF1EF;
  --white:#FFFFFF;
  --steel:#46586A;
  --steel-soft:#8496A6;
  --yellow:#F0B429;
  --yellow-soft:#F6CC66;
  --orange:#D9491C;
  --green:#2F7D5C;
  --line: rgba(255,255,255,0.14);
  --line-dark: rgba(19,30,41,0.14);
}
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  font-family:'IBM Plex Sans', -apple-system, sans-serif;
  color:var(--steel);
  background:var(--paper);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{ font-family:'Space Grotesk', Arial, sans-serif; color:var(--ink); }
.wrap{ max-width:1080px; margin:0 auto; padding:0 28px; }
.wrap-narrow{ max-width:820px; margin:0 auto; padding:0 28px; }
a{ color:inherit; }
.mono{ font-family:'IBM Plex Mono', monospace; }
img,svg{ max-width:100%; }

/* ---------- NAV ---------- */
.nav{
  background:var(--ink); border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:50;
}
.nav-inner{
  max-width:1080px; margin:0 auto; padding:0 28px;
  display:flex; align-items:center; justify-content:space-between;
  height:64px; gap:20px;
}
.brandmark{ display:flex; align-items:center; gap:10px; text-decoration:none; flex:0 0 auto; }
.brandmark svg{ width:30px; height:30px; display:block; }
.brandmark .txt{
  font-family:'Space Grotesk', sans-serif; color:#fff; font-weight:700;
  font-size:16px; letter-spacing:-0.01em; white-space:nowrap;
}
.nav-links{ display:flex; align-items:center; gap:28px; margin-left:auto; }
.nav-links a{
  font-size:14px; color:#C7CCD6; text-decoration:none; font-weight:500;
  padding:4px 0; border-bottom:1.5px solid transparent; white-space:nowrap;
  transition:color .15s, border-color .15s;
}
.nav-links a:hover{ color:#fff; }
.nav-links a.active{ color:var(--yellow-soft); border-bottom-color:var(--yellow); }
.nav-cta{
  background:var(--yellow); color:var(--ink) !important; padding:9px 18px;
  border-radius:2px; font-weight:600; font-size:14px; text-decoration:none;
  border-bottom:none !important; white-space:nowrap;
}
.nav-cta:hover{ background:var(--yellow-soft); }

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-block; padding:14px 26px; border-radius:2px;
  font-weight:600; font-size:15px; text-decoration:none;
  border:1px solid transparent; cursor:pointer;
  font-family:'IBM Plex Sans', sans-serif; transition:background .15s, border-color .15s;
}
.btn-primary{ background:var(--yellow); color:var(--ink); }
.btn-primary:hover{ background:var(--yellow-soft); }
.btn-ghost{ border-color:rgba(255,255,255,0.35); color:#fff; }
.btn-ghost:hover{ border-color:#fff; }
.btn-ghost-dark{ border-color:var(--line-dark); color:var(--ink); }
.btn-ghost-dark:hover{ border-color:var(--ink); }
.btn-row{ display:flex; gap:14px; flex-wrap:wrap; }

/* ---------- HERO (home) ---------- */
.hero{
  background:var(--ink); color:#EDEFF3;
  position:relative; overflow:hidden; padding:88px 0 64px;
}
.blueprint-grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:42px 42px; opacity:0.35; pointer-events:none;
}
.hero-inner{ position:relative; z-index:2; max-width:600px; }
.eyebrow{
  font-size:12px; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--yellow-soft); font-weight:600; margin-bottom:18px;
  font-family:'IBM Plex Mono', monospace;
}
.eyebrow::before{ content:"// "; color:var(--steel-soft); }
.hero h1{ color:#fff; font-size:42px; line-height:1.16; font-weight:700; margin-bottom:22px; }
.hero h1 em{ color:var(--yellow-soft); font-style:normal; }
.hero p.sub{ font-size:17px; color:#C7CCD6; max-width:480px; margin-bottom:34px; }

/* ---------- PAGE HERO (interior pages) ---------- */
.page-hero{
  background:var(--ink); color:#EDEFF3; position:relative; overflow:hidden;
  padding:64px 0 58px;
}
.page-hero .inner{ position:relative; z-index:2; max-width:680px; }
.page-hero h1{ color:#fff; font-size:36px; line-height:1.18; font-weight:700; margin-bottom:16px; }
.page-hero h1 em{ color:var(--yellow-soft); font-style:normal; }
.page-hero p{ font-size:16.5px; color:#C7CCD6; max-width:560px; }

/* ---------- TRUSS DIAGRAM ---------- */
.truss-wrap{ position:relative; z-index:2; margin-top:54px; }
.truss-svg{ width:100%; height:auto; display:block; }
.truss-svg path{ fill:none; stroke:var(--yellow-soft); stroke-width:1.6; }
.truss-svg .joint{ fill:var(--ink); stroke:var(--yellow-soft); stroke-width:1.6; }
.truss-svg .dim{ stroke:var(--steel-soft); stroke-width:1; opacity:0.6; }
.truss-svg text{
  font-family:'IBM Plex Mono', monospace; font-size:9px;
  fill:var(--steel-soft); letter-spacing:0.04em;
}
.truss-draw{ stroke-dasharray:1000; stroke-dashoffset:1000; animation:draw 2.2s ease-out forwards; }
@keyframes draw{ to{ stroke-dashoffset:0; } }
@media (prefers-reduced-motion: reduce){ .truss-draw{ animation:none; stroke-dashoffset:0; } }

/* ---------- SECTIONS ---------- */
section{ padding:74px 0; }
section.tight{ padding:56px 0; }
.section-label{
  font-size:12px; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--orange); font-weight:600; margin-bottom:14px;
  font-family:'IBM Plex Mono', monospace;
}
h2{ font-size:29px; margin-bottom:18px; line-height:1.22; }
h3{ font-size:19px; margin-bottom:8px; }
p.lede{ font-size:16px; color:var(--steel); max-width:620px; }
.on-white{ background:var(--white); border-bottom:1px solid var(--line-dark); }
.on-paper{ background:var(--paper); }
.on-ink{ background:var(--ink); color:#C7CCD6; }
.on-ink h2, .on-ink h3{ color:#fff; }
.on-ink p.lede{ color:#C7CCD6; }
.textlink{
  display:inline-block; margin-top:22px; font-family:'IBM Plex Mono',monospace;
  font-size:13px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase;
  color:var(--orange); text-decoration:none; border-bottom:1.5px solid var(--orange);
  padding-bottom:2px;
}
.textlink.light{ color:var(--yellow-soft); border-color:var(--yellow); }
.textlink::after{ content:" \2192"; }

/* ---------- PROBLEM ---------- */
.problem-grid{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:56px; align-items:start; }
.problem-grid p{ font-size:16px; color:var(--steel); margin-bottom:16px; }
.stat-card{
  background:var(--ink); color:#fff; padding:30px 26px;
  border-left:3px solid var(--yellow); position:relative;
}
.stat-card .num{
  font-family:'IBM Plex Mono', monospace; font-size:34px;
  color:var(--yellow-soft); font-weight:600;
}
.stat-card .label{ font-size:13.5px; color:#C7CCD6; margin-top:8px; }

/* ---------- PROCESS (compact, home) ---------- */
.process-steps{ display:grid; grid-template-columns:repeat(5,1fr); gap:0; margin-top:44px; position:relative; }
.step{ padding:0 18px 0 0; position:relative; }
.step:not(:last-child)::after{
  content:""; position:absolute; top:12px; right:-1px; width:14px; height:14px;
  border-top:1.5px solid var(--orange); border-right:1.5px solid var(--orange);
  transform:rotate(45deg);
}
.step .n{
  font-family:'IBM Plex Mono', monospace; color:var(--orange);
  font-size:13px; font-weight:600; margin-bottom:10px;
}
.step h3{ font-size:15.5px; margin-bottom:6px; }
.step p{ font-size:13px; color:var(--steel); }

/* ---------- PROCESS DETAIL (services page) ---------- */
.proc-detail{ margin-top:10px; }
.proc-item{
  display:grid; grid-template-columns:88px 1fr; gap:32px;
  padding:36px 0; border-top:1px solid var(--line-dark); align-items:start;
}
.proc-item:first-child{ border-top:none; }
.proc-fig{
  font-family:'IBM Plex Mono', monospace; font-size:12.5px; font-weight:600;
  color:var(--orange); letter-spacing:0.06em; padding-top:4px;
}
.proc-fig .rule{ display:block; width:38px; height:2px; background:var(--orange); margin-top:10px; opacity:.5; }
.proc-body h3{ font-size:21px; margin-bottom:10px; }
.proc-body p{ font-size:15.5px; margin-bottom:12px; }
.proc-body ul{ padding-left:19px; margin-top:10px; }
.proc-body li{ font-size:14.5px; margin:6px 0; }
.proc-body li::marker{ color:var(--orange); }

/* ---------- CARDS ---------- */
.card-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:38px; }
.card{
  background:var(--white); border:1px solid var(--line-dark);
  border-top:3px solid var(--yellow); padding:26px 24px;
}
.card h3{ font-size:17px; margin-bottom:8px; }
.card p{ font-size:14px; }
.card .n{
  font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--orange);
  font-weight:600; letter-spacing:.06em; margin-bottom:12px;
}

/* ---------- EXPECT ---------- */
.expect-row{ display:flex; gap:0; margin-top:36px; flex-wrap:wrap; }
.expect-item{ flex:1; min-width:220px; padding:0 24px; border-left:1px solid var(--line); }
.expect-item:first-child{ padding-left:0; border-left:none; }
.expect-item .big{
  font-family:'IBM Plex Mono', monospace; font-size:32px;
  color:var(--yellow-soft); font-weight:600;
}
.expect-item p{ font-size:13.5px; color:#C7CCD6; margin-top:8px; }

/* ---------- PRICING TABLE ---------- */
table.pricing-table{ width:100%; border-collapse:collapse; margin-top:36px; background:var(--white); }
table.pricing-table th, table.pricing-table td{
  padding:16px 20px; text-align:left; border-bottom:1px solid var(--line-dark); font-size:14.5px;
}
table.pricing-table th{
  background:var(--ink); color:#fff; font-family:'Space Grotesk', sans-serif;
  font-weight:700; font-size:15.5px;
}
table.pricing-table th.highlight{ background:var(--orange); }
table.pricing-table td.label{ font-weight:600; color:var(--ink); background:#F7F8F7; }
table.pricing-table td .price{
  font-family:'IBM Plex Mono',monospace; font-size:22px; color:var(--ink); font-weight:600;
}
.guarantee-note{
  margin-top:20px; font-size:13.5px; color:var(--steel);
  border-left:3px solid var(--orange); padding-left:16px;
}

/* ---------- INCLUDED / NOT INCLUDED ---------- */
.incl-grid{ display:grid; grid-template-columns:1fr 1fr; gap:0; margin-top:36px; border:1px solid var(--line-dark); }
.incl-col{ background:var(--white); padding:28px 26px; }
.incl-col + .incl-col{ border-left:1px solid var(--line-dark); background:#F7F8F7; }
.incl-col h3{
  font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:.1em;
  text-transform:uppercase; margin-bottom:18px; font-weight:600;
}
.incl-col.yes h3{ color:var(--green); }
.incl-col.no h3{ color:var(--steel-soft); }
.incl-col ul{ list-style:none; }
.incl-col li{ font-size:14.5px; padding:8px 0 8px 27px; position:relative; border-top:1px solid var(--line-dark); }
.incl-col li:first-child{ border-top:none; }
.incl-col.yes li::before{
  content:""; position:absolute; left:2px; top:15px; width:11px; height:6px;
  border-left:2px solid var(--green); border-bottom:2px solid var(--green);
  transform:rotate(-45deg);
}
.incl-col.no li{ color:var(--steel-soft); }
.incl-col.no li::before{
  content:""; position:absolute; left:3px; top:17px; width:11px; height:2px;
  background:var(--steel-soft);
}

/* ---------- COMPARISON ---------- */
.compare{ display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:36px; }
.compare-card{ padding:30px 28px; border:1px solid var(--line-dark); background:var(--white); }
.compare-card.them{ background:#F7F8F7; }
.compare-card.us{ border-top:3px solid var(--yellow); }
.compare-card .who{
  font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--steel-soft); font-weight:600; margin-bottom:14px;
}
.compare-card.us .who{ color:var(--orange); }
.compare-card .figure{
  font-family:'IBM Plex Mono',monospace; font-size:38px; font-weight:600;
  color:var(--ink); line-height:1.1;
}
.compare-card .per{ font-size:13.5px; color:var(--steel-soft); margin-top:6px; }
.compare-card ul{ list-style:none; margin-top:20px; border-top:1px solid var(--line-dark); padding-top:16px; }
.compare-card li{ font-size:14px; padding:6px 0; }
.compare-note{ margin-top:20px; font-size:13.5px; color:var(--steel); border-left:3px solid var(--line-dark); padding-left:16px; }

/* ---------- FAQ ---------- */
.faq{ margin-top:34px; border-top:1px solid var(--line-dark); }
.faq details{ border-bottom:1px solid var(--line-dark); }
.faq summary{
  cursor:pointer; list-style:none; padding:20px 40px 20px 0; position:relative;
  font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:16.5px; color:var(--ink);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:""; position:absolute; right:6px; top:27px; width:10px; height:10px;
  border-right:2px solid var(--orange); border-bottom:2px solid var(--orange);
  transform:rotate(45deg); transition:transform .2s;
}
.faq details[open] summary::after{ transform:rotate(-135deg); top:31px; }
.faq .answer{ padding:0 40px 22px 0; font-size:15px; color:var(--steel); }
.faq .answer p + p{ margin-top:12px; }

/* ---------- ABOUT ---------- */
.about-grid{ display:grid; grid-template-columns:1fr 300px; gap:52px; align-items:start; }
.about-body p{ font-size:16.5px; margin-bottom:18px; }
.about-body p.first::first-letter{
  font-family:'Space Grotesk',sans-serif; font-size:52px; line-height:.9; font-weight:700;
  color:var(--ink); float:left; margin:6px 12px 0 0;
}
.sidecard{ background:var(--ink); color:#C7CCD6; padding:26px 24px; border-left:3px solid var(--yellow); }
.sidecard h3{ color:#fff; font-size:15px; margin-bottom:14px; }
.sidecard dl{ font-size:13.5px; }
.sidecard dt{
  font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--yellow-soft); margin-top:16px; font-weight:600;
}
.sidecard dt:first-child{ margin-top:0; }
.sidecard dd{ margin-top:3px; color:#C7CCD6; }
.principles{ display:grid; grid-template-columns:repeat(2,1fr); gap:0; margin-top:36px; }
.principle{ padding:26px 28px 26px 0; border-top:1px solid var(--line-dark); }
.principle:nth-child(odd){ padding-right:44px; }
.principle .n{
  font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--orange);
  font-weight:600; letter-spacing:.06em; margin-bottom:10px;
}
.principle h3{ font-size:17px; margin-bottom:7px; }
.principle p{ font-size:14.5px; }

/* ---------- FORM ---------- */
.cta{ background:var(--paper); text-align:center; padding:80px 0; }
.cta h2{ font-size:30px; margin-bottom:14px; }
.cta > .wrap > p{ color:var(--steel); font-size:16px; margin-bottom:30px; max-width:470px; margin-left:auto; margin-right:auto; }
.form-card{
  background:var(--white); border:1px solid var(--line-dark); border-top:3px solid var(--yellow);
  max-width:620px; margin:0 auto; padding:38px 36px; text-align:left;
}
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px 20px; }
.field{ display:flex; flex-direction:column; }
.field.full{ grid-column:1 / -1; }
.field label{
  font-family:'IBM Plex Mono', monospace; font-size:11.5px; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--ink); font-weight:600; margin-bottom:7px;
}
.field label .req{ color:var(--orange); }
.field input, .field select, .field textarea{
  font-family:'IBM Plex Sans', sans-serif; font-size:15px; color:var(--ink);
  background:#F7F8F7; border:1px solid var(--line-dark); border-radius:2px;
  padding:12px 13px; width:100%; transition:border-color .15s, background .15s;
}
.field textarea{ resize:vertical; min-height:92px; }
.field select{
  appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2346586A' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 13px center; padding-right:36px;
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--yellow); background:var(--white);
  box-shadow:0 0 0 3px rgba(240,180,41,0.18);
}
.consent{
  grid-column:1 / -1; display:flex; gap:11px; align-items:flex-start;
  border-top:1px solid var(--line-dark); padding-top:18px; margin-top:4px;
}
.consent input[type=checkbox]{
  width:17px; height:17px; margin-top:2px; flex:0 0 17px; accent-color:var(--orange); cursor:pointer;
}
.consent label{ font-size:12.5px; line-height:1.55; color:var(--steel); font-family:'IBM Plex Sans',sans-serif; }
.form-card .btn-primary{ width:100%; text-align:center; margin-top:4px; font-size:16px; padding:15px 26px; border:none; }
.form-foot{ font-size:12.5px; color:var(--steel-soft); text-align:center; margin-top:16px; }
.form-foot a{ color:var(--steel); }
.hp{ position:absolute; left:-9999px; }

/* ---------- LEGAL / PROSE PAGES ---------- */
.legal{ max-width:760px; }
.legal p.intro{
  font-size:16.5px; color:var(--ink); border-left:3px solid var(--yellow);
  padding-left:18px; margin-bottom:12px;
}
.legal h2{
  font-size:19px; margin:42px 0 12px; padding-top:22px;
  border-top:1px solid var(--line-dark); line-height:1.3;
}
.legal h2:first-of-type{ border-top:none; padding-top:0; margin-top:34px; }
.legal p{ font-size:15.5px; margin-bottom:14px; }
.legal ul{ padding-left:20px; margin:0 0 16px; }
.legal li{ font-size:15.5px; margin:8px 0; }
.legal li::marker{ color:var(--orange); }
.legal strong{ color:var(--ink); }
.legal a{ color:var(--orange); }
.legal-contact{
  background:#F7F8F7; border-left:3px solid var(--ink);
  padding:20px 22px; margin:6px 0 16px;
}
.legal-contact p{ margin:0; font-size:15px; line-height:1.7; }
.legal-note{
  margin-top:38px; padding-top:22px; border-top:1px solid var(--line-dark);
  font-size:13.5px !important; color:var(--steel-soft);
}

/* ---------- FOOTER ---------- */
footer.site{ background:var(--ink); color:#8B93A3; padding:44px 0 30px; font-size:13px; }
.foot-top{
  display:flex; justify-content:space-between; align-items:flex-start;
  gap:32px; flex-wrap:wrap; padding-bottom:26px; border-bottom:1px solid var(--line);
}
.foot-brand{ max-width:300px; }
.foot-brand .brandmark{ margin-bottom:12px; }
.foot-brand p{ font-size:13px; color:#8B93A3; line-height:1.6; }
.foot-links{ display:flex; gap:56px; flex-wrap:wrap; }
.foot-col h4{
  font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--yellow-soft); margin-bottom:12px; font-weight:600;
}
.foot-col a{ display:block; color:#C7CCD6; text-decoration:none; font-size:13.5px; padding:4px 0; }
.foot-col a:hover{ color:#fff; }
.foot-bot{
  padding-top:22px; font-family:'IBM Plex Mono',monospace; font-size:12px;
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 900px){
  .about-grid{ grid-template-columns:1fr; gap:34px; }
}
@media (max-width: 800px){
  .nav-inner{ height:auto; padding-top:12px; padding-bottom:12px; flex-wrap:wrap; row-gap:10px; }
  .nav-links{ gap:20px; width:100%; margin-left:0; justify-content:flex-start; }
  .nav-links a{ font-size:13.5px; }
  .nav-cta{ padding:8px 14px; font-size:13px; margin-left:auto; }
  .hero{ padding:60px 0 46px; }
  .hero h1{ font-size:30px; }
  .page-hero{ padding:48px 0 44px; }
  .page-hero h1{ font-size:27px; }
  h2{ font-size:24px; }
  section{ padding:56px 0; }
  .problem-grid{ grid-template-columns:1fr; gap:34px; }
  .process-steps{ grid-template-columns:1fr 1fr; row-gap:28px; }
  .step:not(:last-child)::after{ display:none; }
  .expect-row{ flex-direction:column; gap:24px; }
  .expect-item{ border-left:none; padding-left:0; border-top:1px solid var(--line); padding-top:20px; }
  .expect-item:first-child{ border-top:none; padding-top:0; }
  .card-row{ grid-template-columns:1fr; }
  .proc-item{ grid-template-columns:1fr; gap:12px; padding:28px 0; }
  .proc-fig .rule{ display:none; }
  .incl-grid{ grid-template-columns:1fr; }
  .incl-col + .incl-col{ border-left:none; border-top:1px solid var(--line-dark); }
  .compare{ grid-template-columns:1fr; }
  .principles{ grid-template-columns:1fr; }
  .principle:nth-child(odd){ padding-right:0; }
  .form-grid{ grid-template-columns:1fr; }
  .form-card{ padding:28px 20px; }
  .cta{ padding:60px 0; }
  table.pricing-table th, table.pricing-table td{ padding:13px 12px; font-size:13.5px; }
  .foot-links{ gap:36px; }
}
@media (max-width: 460px){
  .brandmark .txt{ font-size:15px; }
  .nav-links{ gap:16px; }
}