/* TXSMBHealthInsurance.com — mobile-first stylesheet */

@font-face { font-family:'Barlow'; font-weight:400; font-style:normal; font-display:swap;
  src:url('/fonts/barlow-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family:'Barlow'; font-weight:500; font-style:normal; font-display:swap;
  src:url('/fonts/barlow-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family:'Barlow'; font-weight:600; font-style:normal; font-display:swap;
  src:url('/fonts/barlow-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family:'Barlow Condensed'; font-weight:600; font-style:normal; font-display:swap;
  src:url('/fonts/barlow-condensed-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family:'Barlow Condensed'; font-weight:700; font-style:normal; font-display:swap;
  src:url('/fonts/barlow-condensed-latin-700-normal.woff2') format('woff2'); }

:root{
  --ink:#1D4ED8;        /* tech blue */
  --ink-deep:#1E40AF;
  --paper:#F4F7FC;      /* cool working white */
  --white:#FFFFFF;
  --steel:#5A6B84;      /* secondary text, borders */
  --steel-line:#D9E1EC;
  --brass:#B07D2B;      /* hard-hat brass accent */
  --brass-soft:#C99A4B;
  --text:#1E2A3C;
  --display:'Barlow Condensed', 'Arial Narrow', sans-serif;
  --body:'Barlow', 'Helvetica Neue', Arial, sans-serif;
  --max:1120px;
  --pad:20px;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  font-family:var(--body); font-size:17px; line-height:1.6; color:var(--text);
  background:var(--paper); -webkit-font-smoothing:antialiased;
}

img,video,iframe{ max-width:100%; height:auto; display:block; }

a{ color:var(--brass); text-decoration:none; }
a:hover{ text-decoration:underline; }
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{
  outline:3px solid var(--brass); outline-offset:2px;
}

.wrap{ max-width:var(--max); margin:0 auto; padding:0 var(--pad); }

/* ---------- Type scale ---------- */
h1,h2,h3{ font-family:var(--display); line-height:1.08; color:#1E3A8A; letter-spacing:.2px; }
h1{ font-size:clamp(2.1rem, 6.4vw, 3.9rem); font-weight:700; }
h2{ font-size:clamp(1.7rem, 4.6vw, 2.6rem); font-weight:700; }
h3{ font-size:clamp(1.2rem, 3.2vw, 1.5rem); font-weight:600; }

.eyebrow{
  font-family:var(--body); font-size:.78rem; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--brass); display:flex; align-items:center; gap:10px;
  margin-bottom:14px;
}
.eyebrow::before{ content:""; width:26px; height:3px; background:var(--brass); flex:none; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-block; font-family:var(--body); font-weight:600; font-size:1rem;
  padding:14px 26px; border-radius:4px; border:2px solid transparent; cursor:pointer;
  text-align:center; transition:transform .12s ease, background .12s ease;
}
.btn:hover{ text-decoration:none; transform:translateY(-1px); }
.btn-brass{ background:var(--brass); color:var(--white); }
.btn-brass:hover{ background:#9A6D24; }
.btn-ghost{ background:transparent; color:var(--white); border-color:rgba(255,255,255,.55); }
.btn-ghost:hover{ border-color:var(--white); }
.btn-block{ display:block; width:100%; }

/* ---------- Header ---------- */
.site-head{
  background:var(--ink-deep); color:var(--white);
  position:sticky; top:0; z-index:50; box-shadow:0 1px 0 rgba(255,255,255,.08);
}
.site-head .wrap{ display:flex; align-items:center; justify-content:space-between; min-height:62px; }
.brand{ font-family:var(--display); font-weight:700; font-size:clamp(1rem, 3.4vw, 1.25rem); white-space:nowrap; color:var(--white); letter-spacing:.4px; }
.brand span{ color:var(--brass-soft); }
.brand:hover{ text-decoration:none; }
.head-cta{ font-size:clamp(.78rem, 2.6vw, .9rem); padding:9px 14px; white-space:nowrap; }

/* ---------- Hero ---------- */
.hero{
  background:linear-gradient(160deg, #1E40AF 0%, #1D4ED8 58%, #3B82F6 100%);
  color:var(--white); padding:64px 0 56px; position:relative; overflow:hidden;
}
.hero::after{ /* horizon rule */
  content:""; position:absolute; left:0; right:0; bottom:0; height:4px;
  background:linear-gradient(90deg, var(--brass) 0%, var(--brass) 34%, rgba(176,125,43,.15) 100%);
}
.hero h1{ color:var(--white); max-width:21ch; }
.hero .sub{
  margin-top:18px; font-size:clamp(1.05rem, 2.6vw, 1.3rem); line-height:1.55;
  color:#EAF1FF; max-width:56ch; font-weight:400;
}
.hero .sub strong{ color:var(--white); font-weight:600; }
.hero-ctas{ margin-top:28px; display:flex; flex-direction:column; gap:12px; }
.trust-bar{
  margin-top:30px; padding-top:18px; border-top:1px solid rgba(255,255,255,.18);
  font-size:.85rem; color:#C7D8FA; line-height:1.5;
}
.trust-bar b{ color:var(--white); font-weight:600; }

/* ---------- Route line + sections ---------- */
main{ position:relative; }
.section{ padding:58px 0; position:relative; }
.section-alt{ background:var(--white); }
.marker{ /* waypoint */
  display:flex; align-items:center; gap:10px; margin-bottom:8px;
}
.marker .dot{
  width:14px; height:14px; border-radius:50%; background:var(--paper);
  border:3px solid var(--brass); flex:none;
}
.section-alt .marker .dot{ background:var(--white); }
.marker .tag{
  font-size:.78rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--brass);
}
.lede{ color:var(--steel); max-width:62ch; margin-top:10px; font-size:1.05rem; }

/* ---------- Cards ---------- */
.grid{ display:grid; gap:18px; margin-top:30px; }
.card{
  background:var(--white); border:1px solid var(--steel-line); border-top:4px solid var(--brass);
  border-radius:6px; padding:26px 24px;
}
.section-alt .card{ background:var(--paper); }
.card h3{ margin-bottom:10px; }
.card p{ color:#38424E; font-size:.98rem; }
.reveal{ opacity:0; transform:translateY(14px); transition:opacity .5s ease, transform .5s ease; }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none; transition:none; } }

/* ---------- Core value ---------- */
.value-copy{ max-width:66ch; margin-top:22px; display:grid; gap:16px; font-size:1.04rem; }
.value-copy .lead-line{ font-family:var(--display); font-size:1.35rem; font-weight:600; color:#1E3A8A; line-height:1.3; }

/* ---------- Authority + peer proof ---------- */
.authority{ background:var(--ink); color:var(--white); }
.authority h2,.authority h3{ color:var(--white); }
.authority .lede{ color:#DCE7FB; }
.authority .identity{ font-family:var(--display); font-size:1.35rem; font-weight:600; color:var(--brass-soft); margin-top:14px; }
.proof{
  margin-top:34px; background:rgba(255,255,255,.05); border-left:5px solid var(--brass);
  border-radius:0 6px 6px 0; padding:28px 24px;
}
.proof h3{ color:var(--brass-soft); margin-bottom:12px; }
.proof p{ color:#EAF1FF; font-size:1rem; }
.proof .more{ margin-top:16px; font-weight:600; }
.proof-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:20px 0 4px; }
.stat{ border-top:2px solid rgba(255,255,255,.2); padding-top:10px; }
.stat b{ display:block; font-family:var(--display); font-size:1.7rem; font-weight:700; color:var(--white); line-height:1.1; }
.stat span{ font-size:.8rem; color:#C7D8FA; letter-spacing:.04em; text-transform:uppercase; }

/* ---------- Form ---------- */
.form-card{
  background:var(--white); border:1px solid var(--steel-line); border-radius:8px;
  padding:30px 24px; margin-top:28px; box-shadow:0 8px 30px rgba(29,78,216,.10);
}
.field{ margin-bottom:16px; }
.field label{ display:block; font-weight:600; font-size:.92rem; margin-bottom:6px; color:#1E3A8A; }
.field input,.field select{
  width:100%; font-family:var(--body); font-size:1rem; padding:12px 14px;
  border:1.5px solid var(--steel-line); border-radius:4px; background:var(--white); color:var(--text);
}
.field input:focus,.field select:focus{ border-color:var(--brass); }
.form-note{ font-size:.85rem; color:var(--steel); margin-top:12px; }

/* ---------- Strategy hub ---------- */
.hub-list{ display:grid; gap:14px; margin-top:26px; }
.hub-item{
  background:var(--white); border:1px solid var(--steel-line); border-radius:6px;
  padding:20px 22px; display:block; color:var(--text);
}
.hub-item:hover{ text-decoration:none; border-color:var(--brass); }
.hub-item .cat{ font-size:.75rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--brass); }
.hub-item h3{ margin:6px 0 4px; }
.hub-item p{ color:var(--steel); font-size:.94rem; }

/* ---------- Article ---------- */
.article{ padding:56px 0 70px; }
.article-body{ max-width:70ch; margin-top:26px; display:grid; gap:18px; font-size:1.05rem; }
.article-body h2{ margin-top:16px; }
.article-cta{
  margin-top:36px; background:var(--ink); color:var(--white); border-radius:8px; padding:30px 26px;
}
.article-cta p{ color:#EAF1FF; margin:8px 0 18px; }
.article-cta .idline{ font-family:var(--display); font-size:1.3rem; font-weight:600; color:var(--brass-soft); }

/* ---------- Footer ---------- */
.site-foot{ background:var(--ink-deep); color:#C7D8FA; padding:40px 0 34px; font-size:.86rem; line-height:1.7; }
.site-foot .brand{ font-size:1.1rem; }
.site-foot p{ margin-top:12px; max-width:70ch; }
.site-foot a{ color:#C99A4B; }

/* ---------- Desktop and tablet ---------- */
@media (min-width:640px){
  .hero-ctas{ flex-direction:row; }
  .grid-3{ grid-template-columns:repeat(3,1fr); }
  .grid-2{ grid-template-columns:repeat(2,1fr); }
  .form-card{ padding:36px 34px; }
  .form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
}

@media (min-width:980px){
  :root{ --pad:32px; }
  .section{ padding:76px 0; }
  /* the route line */
  main::before{
    content:""; position:absolute; top:0; bottom:0; left:calc(50% - min(50%, calc(var(--max)/2)) + 7px);
    width:2px; background:linear-gradient(180deg, var(--brass) 0%, var(--brass) 82%, transparent 100%);
    opacity:.45;
  }
  .section .wrap{ padding-left:56px; }
  .marker{ position:relative; }
  .marker .dot{ position:absolute; left:-56px; width:16px; height:16px; }
  .hero h1{ max-width:18ch; }
  .grid-4{ grid-template-columns:repeat(2,1fr); }
}
@media (min-width:1180px){ .grid-4{ grid-template-columns:repeat(4,1fr); } }