/* ===========================================================
   STR Host Advisory — "Field Manual" design system
   Typeset like the products: cream stock, Georgia, hairline
   rules, brass accents. No cards, no shadows, no gradients.
   =========================================================== */

:root{
  --paper:#F5F1E8;
  --paper-2:#FBF7EF;
  --navy:#1F3A5F;
  --brass:#B8862B;
  --brass-2:#C79A3E;
  --ink:#2C2C2A;
  --grey:#5F5E5A;
  --rule:#DCD3BE;
  --rule-2:#E6DCC6;
  --measure:34rem;
  --serif:Georgia,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--serif); font-size:18px; line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1120px;margin:0 auto;padding:0 2rem}
a{color:var(--navy);text-decoration:none;border-bottom:1px solid var(--brass)}
a:hover{color:var(--brass)}
img{max-width:100%;height:auto;display:block}

/* ---------- rules ---------- */
.rule{border:0;border-top:1px solid var(--rule);margin:0}
.rule-navy{border:0;border-top:2.5px solid var(--navy);margin:0}
.rule-brass{border:0;border-top:1px solid var(--brass);margin:0}

/* ---------- masthead ---------- */
.masthead{padding-top:2.4rem}
.masthead .top{border-top:3px solid var(--navy)}
.brandbar{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:.9rem 0 .7rem}
.lockup{display:flex;align-items:center;gap:.8rem;border:0}
.lockup svg{width:38px;height:38px;flex:0 0 auto}
.lockup .name{display:block;font-family:var(--serif);font-weight:700;font-size:1.25rem;color:var(--navy);letter-spacing:.16em;line-height:1.1}
.lockup .by{display:block;font-family:var(--sans);font-size:.62rem;color:var(--brass);letter-spacing:.22em;margin-top:.22rem}
.creds{font-family:var(--sans);font-size:.78rem;color:var(--grey);text-align:right}
nav.main{display:flex;flex-wrap:wrap;gap:2.1rem;padding:.75rem 0}
nav.main a{font-family:var(--sans);font-size:.76rem;letter-spacing:.13em;color:var(--grey);text-transform:uppercase;border:0}
nav.main a:hover,nav.main a[aria-current="page"]{color:var(--navy);border-bottom:1px solid var(--brass)}

/* ---------- section markers ---------- */
.marker{display:flex;align-items:center;gap:.8rem;margin:0 0 .5rem}
.marker .num{font-family:var(--serif);font-weight:700;font-size:.85rem;color:var(--brass);letter-spacing:.12em}
.marker .dash{width:34px;height:1.5px;background:var(--brass)}
.marker .label{font-family:var(--sans);font-size:.72rem;letter-spacing:.18em;color:var(--grey);text-transform:uppercase}

/* ---------- hero ---------- */
.hero{display:grid;grid-template-columns:1fr 400px;gap:4rem;padding:2.6rem 0 3rem;align-items:start}
h1{font-family:var(--serif);font-weight:700;color:var(--navy);font-size:4.1rem;line-height:1.06;margin:.2rem 0 1.4rem;letter-spacing:-.015em}
.lede{font-size:1.06rem;max-width:var(--measure);margin:0 0 1.6rem}
.tick{width:60px;height:1.5px;background:var(--brass);margin:1.8rem 0 1.3rem}
.claim{font-family:var(--serif);font-weight:700;color:var(--navy);font-size:1.55rem;line-height:1.32;max-width:var(--measure);margin:0 0 1rem}
.sub{color:var(--grey);font-size:1rem;max-width:var(--measure);margin:0}

.jump{margin:1.6rem 0 0}
.jump a{font-family:var(--sans);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--navy);border-bottom:1px solid var(--brass);padding-bottom:2px}
.jump a:hover{color:var(--brass)}
html{scroll-behavior:smooth}
#what-we-sell{scroll-margin-top:1.5rem}

/* ---------- plate (figure) ---------- */
figure.plate{margin:0}
figure.plate img{border:1px solid var(--navy)}
figure.plate figcaption{margin-top:1.1rem}
figure.plate .cap-rule{width:34px;height:1.5px;background:var(--brass);margin-bottom:.7rem}
figure.plate .cap-label{font-family:var(--sans);font-size:.68rem;letter-spacing:.18em;color:var(--brass);text-transform:uppercase}
figure.plate p{font-style:italic;color:var(--grey);font-size:.92rem;line-height:1.5;margin:.45rem 0 0}

/* ---------- evidence ledger ---------- */
.ledger{border-top:2.5px solid var(--navy);border-bottom:1px solid var(--brass);padding:1.6rem 0 1.4rem;margin:1rem 0 3rem}
.ledger ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr)}
.ledger li{padding:0 1.6rem;border-left:1px solid var(--rule)}
.ledger li:first-child{padding-left:0;border-left:0}
.ledger .n{font-family:var(--serif);font-weight:700;color:var(--navy);font-size:2.6rem;line-height:1}
.ledger .l{font-family:var(--sans);font-size:.68rem;letter-spacing:.14em;color:var(--grey);text-transform:uppercase;margin-top:.35rem}

/* ---------- pull quote ---------- */
blockquote.pull{margin:2.6rem 0;padding:.2rem 0 .2rem 1.7rem;border-left:3px solid var(--brass)}
blockquote.pull p{font-style:italic;color:var(--navy);font-size:1.35rem;line-height:1.5;margin:0;max-width:44rem}
blockquote.pull cite{display:block;font-family:var(--sans);font-style:normal;font-size:.72rem;letter-spacing:.13em;color:var(--grey);margin-top:1rem;text-transform:uppercase}

/* ---------- product list (contents page) ---------- */
.catalog{border-top:2.5px solid var(--navy);margin:.6rem 0 0}
.item{display:grid;grid-template-columns:1fr auto;gap:2rem;align-items:baseline;
      padding:1.35rem 0 1.25rem;border-bottom:1px solid var(--rule)}
.item h3{font-family:var(--serif);font-weight:700;color:var(--navy);font-size:1.5rem;margin:0}
.item h3 a{border:0}
.item h3 a:hover{color:var(--brass)}
.item .desc{font-family:var(--sans);font-size:.84rem;color:var(--grey);margin:.3rem 0 0}
.item .price{font-family:var(--serif);font-weight:700;color:var(--brass);font-size:1.5rem;text-align:right;white-space:nowrap}
.item .price small{display:block;font-family:var(--sans);font-weight:400;font-size:.6rem;letter-spacing:.13em;color:var(--grey);text-transform:uppercase;margin-top:.2rem}

/* ---------- prose ---------- */
.prose{max-width:var(--measure)}
.prose h2,section h2{font-family:var(--serif);font-weight:700;color:var(--navy);font-size:1.85rem;line-height:1.25;margin:2.6rem 0 .9rem}
.prose h3{font-family:var(--serif);font-weight:700;color:var(--navy);font-size:1.2rem;margin:1.8rem 0 .5rem}
.prose p{margin:0 0 1.1rem}
.prose ul{padding-left:1.1rem;margin:0 0 1.2rem}
.prose li{margin:0 0 .55rem}
.wide{max-width:52rem}

/* ---------- buy band ---------- */
.buy{border-top:2.5px solid var(--navy);border-bottom:2.5px solid var(--navy);padding:2rem 0;margin:3rem 0}
.buy .price-big{font-family:var(--serif);font-weight:700;color:var(--navy);font-size:2.7rem;line-height:1}
.buy .was{font-family:var(--sans);font-size:.8rem;color:var(--grey);margin-top:.4rem}
.btn{display:inline-block;background:var(--navy);color:var(--paper-2);border:0;
     font-family:var(--sans);font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;
     padding:1rem 2.1rem;margin-top:1.2rem}
.btn:hover{background:var(--brass);color:#fff}
.btn.ghost{background:transparent;color:var(--navy);border:1.5px solid var(--navy)}
.btn.ghost:hover{background:var(--navy);color:var(--paper-2)}

/* ---------- faq ---------- */
.faq{border-top:1px solid var(--rule);padding:1.15rem 0}
.faq h4{font-family:var(--serif);font-weight:700;color:var(--navy);font-size:1.02rem;margin:0 0 .35rem}
.faq p{margin:0;color:var(--grey);font-size:.95rem}

/* ---------- footer ---------- */
footer{margin-top:4rem;padding-bottom:3rem}
footer .top{border-top:1px solid var(--brass);padding-top:1.1rem;
  display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between}
footer .creds-line{font-family:var(--sans);font-size:.74rem;color:var(--grey)}
footer nav{display:flex;flex-wrap:wrap;gap:1.4rem;margin-top:.9rem}
footer nav a{font-family:var(--sans);font-size:.74rem;color:var(--grey);border:0}
footer nav a:hover{color:var(--navy)}

/* ---------- responsive ---------- */
@media (max-width:900px){
  body{font-size:17px}
  .wrap{padding:0 1.25rem}
  .hero{grid-template-columns:1fr;gap:2.2rem}
  h1{font-size:2.9rem}
  .ledger ul{grid-template-columns:repeat(2,1fr);gap:1.4rem 0}
  .ledger li{border-left:0;padding:0 1rem 0 0}
  .ledger li:nth-child(3),.ledger li:nth-child(4){padding-top:.2rem}
  .creds{display:none}
  nav.main{gap:1.2rem}
  figure.plate{max-width:420px}
}
@media (max-width:560px){
  h1{font-size:2.25rem}
  .claim{font-size:1.28rem}
  .item{grid-template-columns:1fr;gap:.5rem}
  .item .price{text-align:left}
  .ledger .n{font-size:2.1rem}
  blockquote.pull p{font-size:1.1rem}
}

/* ---------- free-call entry panel ---------- */
.freecall{background:var(--paper-2);border:1px solid var(--rule);padding:1.6rem 1.8rem;margin:2rem 0 2.6rem}
.freecall .eyebrow{font-family:var(--sans);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--brass);font-weight:700;margin:0 0 .5rem}
.freecall h3{font-family:var(--serif);font-weight:700;color:var(--navy);font-size:1.35rem;margin:0 0 .5rem}
.freecall p{margin:0 0 .8rem;font-size:.97rem}
.freecall .limited{font-family:var(--sans);font-size:.76rem;color:var(--grey);margin:.7rem 0 0}

/* ---------- two-tier comparison ---------- */
.tiers{display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:2.5px solid var(--navy);
  border-bottom:2.5px solid var(--navy);margin:.6rem 0 2.4rem}
.tier{padding:1.7rem 1.8rem 1.9rem;display:flex;flex-direction:column}
.tier + .tier{border-left:1px solid var(--rule)}
.tier .tname{font-family:var(--serif);font-weight:700;color:var(--navy);font-size:1.45rem;margin:0}
.tier .tprice{font-family:var(--serif);font-weight:700;color:var(--brass);font-size:2rem;line-height:1;margin:.35rem 0 .2rem}
.tier .tline{font-family:var(--sans);font-size:.82rem;color:var(--grey);margin:0 0 1.1rem;line-height:1.5}
.tier ul{list-style:none;padding:0;margin:0 0 1.4rem}
.tier li{position:relative;padding-left:1.35rem;margin:0 0 .6rem;font-size:.94rem;line-height:1.5}
.tier li:before{content:"✓";position:absolute;left:0;top:0;color:var(--brass);font-weight:700}
.tier li.no{color:var(--grey)}
.tier li.no:before{content:"—";color:var(--rule)}
.tier .btn{margin-top:auto;align-self:flex-start}
@media(max-width:760px){
  .tiers{grid-template-columns:1fr}
  .tier + .tier{border-left:0;border-top:1px solid var(--rule)}
}

/* ---------- "what you get" spec block ---------- */
.spec{border-top:1.5px solid var(--navy);border-bottom:1.5px solid var(--navy);
  padding:1.2rem 0;margin:2.2rem 0 1.4rem}
.spec .eyebrow{font-family:var(--sans);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--brass);font-weight:700;margin:0 0 .8rem}
.spec dl{display:grid;grid-template-columns:auto 1fr;gap:.45rem 1.4rem;margin:0}
.spec dt{font-family:var(--sans);font-size:.7rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--grey);font-weight:700;padding-top:.18rem}
.spec dd{margin:0;font-size:.97rem}
@media(max-width:600px){.spec dl{grid-template-columns:1fr;gap:.1rem .5rem}
  .spec dd{margin-bottom:.6rem}}

/* ---------- forms (intake) ---------- */
.form-wrap{max-width:44rem}
.field{margin:0 0 1.5rem}
.field label.q{display:block;font-family:var(--serif);font-weight:700;color:var(--navy);
  font-size:1.05rem;margin:0 0 .4rem}
.field .hint{display:block;font-family:var(--sans);color:var(--grey);font-size:.85rem;margin:0 0 .55rem}
.field input[type=text],.field input[type=email],.field textarea{
  width:100%;font-family:var(--sans);font-size:.95rem;color:var(--ink);background:#fff;
  border:1.5px solid var(--rule);padding:.7rem .85rem}
.field textarea{min-height:6rem;resize:vertical}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--brass);
  box-shadow:0 0 0 3px rgba(184,134,43,.14)}
.req{color:#9E2B25}
.opts label{display:flex;align-items:flex-start;gap:.6rem;padding:.7rem .85rem;
  border:1.5px solid var(--rule);margin:0 0 .5rem;cursor:pointer;
  font-family:var(--sans);font-size:.93rem;background:#fff}
.opts label:hover{border-color:var(--brass);background:var(--paper-2)}
.opts input{margin-top:.25rem;accent-color:var(--brass)}
.branch{border:0;border-left:3px solid var(--brass);background:var(--paper-2);
  padding:.4rem 0 .4rem 1.3rem;margin:.4rem 0 1.5rem}
.branch h3{font-family:var(--serif);font-weight:700;color:var(--navy);font-size:1.15rem;margin:.8rem 0 1rem}
.card-note{background:var(--paper-2);border-left:3px solid var(--brass);padding:1rem 1.2rem;
  margin:0 0 2rem;color:var(--grey);font-family:var(--sans);font-size:.9rem;line-height:1.55}
fieldset{border:0;padding:0;margin:0}
.eyebrow-step{font-family:var(--sans);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--brass);font-weight:700;margin:0 0 .6rem}

input[type=hidden]{display:none}

/* ---------- free-guide email gate ---------- */
.gate{background:var(--paper-2);border:1px solid var(--rule);padding:1.5rem 1.7rem;margin:1rem 0 0;max-width:38rem}
.gate .row{display:flex;gap:.6rem;flex-wrap:wrap;align-items:stretch;margin:0 0 .7rem}
.gate input[type=email]{flex:1 1 16rem;min-width:0;font-family:var(--sans);font-size:.95rem;
  color:var(--ink);background:#fff;border:1.5px solid var(--rule);padding:.75rem .85rem}
.gate input[type=email]:focus{outline:none;border-color:var(--brass);box-shadow:0 0 0 3px rgba(184,134,43,.14)}
.gate button{flex:0 0 auto;background:var(--navy);color:var(--paper-2);border:0;cursor:pointer;
  font-family:var(--sans);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;padding:.8rem 1.6rem}
.gate button:hover{background:var(--brass);color:#fff}
.gate button:disabled{opacity:.6;cursor:default}
.gate .fine{font-family:var(--sans);font-size:.76rem;color:var(--grey);margin:0;line-height:1.5}
.gate .done{font-family:var(--serif);color:var(--navy);font-size:1.05rem;margin:0 0 .5rem}
@media(max-width:560px){.gate button{width:100%}}
