/* ============================================================
   HELPERCO SOLUTIONS — site stylesheet
   Palette:
     --ink     #14273A  (deep navy — headers, footer)
     --ink-2   #1E3A55  (lighter navy — hovers, sub-surfaces)
     --paper   #FFFFFF
     --mist    #F2F5F8  (section alternation)
     --line    #D8DFE6  (rules, borders)
     --saffron #E39A1E  (accent — links, markers, CTAs)
     --body    #2B3A48  (body text)
   Type: Archivo (display), Source Serif 4 (body)
   ============================================================ */

:root{
  --ink:#14273A; --ink-2:#1E3A55; --paper:#FFFFFF; --mist:#F2F5F8;
  --line:#D8DFE6; --saffron:#E39A1E; --saffron-d:#C4820F; --body:#2B3A48;
  --max:1120px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:"Source Serif 4",Georgia,serif;
  color:var(--body); background:var(--paper);
  font-size:17px; line-height:1.65;
}
h1,h2,h3,h4,.disp{font-family:"Archivo",Arial,sans-serif;color:var(--ink);line-height:1.15}
img{max-width:100%;display:block}
a{color:var(--saffron-d);text-decoration:none}
a:hover{text-decoration:underline}
a:focus-visible,button:focus-visible{outline:3px solid var(--saffron);outline-offset:2px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 22px}

/* ---------- top bar ---------- */
.topbar{background:var(--ink);color:#C8D4DF;font-family:"Archivo",sans-serif;font-size:13px}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;min-height:34px;flex-wrap:wrap;gap:4px}
.topbar a{color:#E8EEF3}
.topbar span.sep{opacity:.4;margin:0 10px}

/* ---------- header / nav ---------- */
header.site{background:var(--paper);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50}
.nav-row{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:74px}
.brand{display:flex;align-items:center;gap:12px}
.brand img{height:46px;width:auto}
.brand .brand-text{font-family:"Archivo",sans-serif;font-weight:700;letter-spacing:.12em;font-size:20px;color:var(--ink)}
.brand .brand-text small{display:block;font-weight:500;letter-spacing:.24em;font-size:10px;color:var(--saffron-d)}
nav.main{font-family:"Archivo",sans-serif;font-size:14px}
nav.main ul{list-style:none;display:flex;gap:4px;align-items:center}
nav.main > ul > li{position:relative}
nav.main a{display:block;padding:26px 12px;color:var(--ink);letter-spacing:.04em}
nav.main a:hover{text-decoration:none;color:var(--saffron-d)}
nav.main li.active > a{box-shadow:inset 0 -3px 0 var(--saffron)}
nav.main .sub{
  display:none;position:absolute;left:0;top:100%;background:var(--paper);
  border:1px solid var(--line);border-top:3px solid var(--saffron);
  min-width:240px;box-shadow:0 12px 30px rgba(20,39,58,.12);flex-direction:column
}
nav.main li:hover > .sub, nav.main li:focus-within > .sub{display:flex}
nav.main .sub a{padding:11px 16px;border-bottom:1px solid var(--mist)}
.nav-toggle{display:none;background:none;border:1px solid var(--line);border-radius:6px;
  padding:8px 12px;font-family:"Archivo",sans-serif;font-size:14px;color:var(--ink);cursor:pointer}

/* ---------- hero ---------- */
.hero{background:var(--ink);color:#E9EFF4;position:relative;overflow:hidden}
.hero::after{ /* saffron ledger-rule motif */
  content:"";position:absolute;inset:auto 0 0 0;height:6px;
  background:repeating-linear-gradient(90deg,var(--saffron) 0 64px,transparent 64px 80px)
}
.hero .wrap{padding:72px 22px 84px}
.hero .kicker{font-family:"Archivo",sans-serif;letter-spacing:.28em;font-size:12px;color:var(--saffron);text-transform:uppercase;margin-bottom:18px}
.hero h1{color:#fff;font-size:clamp(30px,5vw,52px);font-weight:800;max-width:17ch}
.hero p.lede{max-width:58ch;margin-top:18px;font-size:19px;color:#C8D4DF}
.hero .cta-row{margin-top:30px;display:flex;gap:14px;flex-wrap:wrap}
.btn{display:inline-block;font-family:"Archivo",sans-serif;font-size:14px;letter-spacing:.06em;
  padding:13px 24px;border-radius:4px;text-decoration:none}
.btn:hover{text-decoration:none}
.btn.solid{background:var(--saffron);color:var(--ink);font-weight:700}
.btn.solid:hover{background:#F2AC33}
.btn.ghost{border:1px solid #4A6178;color:#E9EFF4}
.btn.ghost:hover{border-color:var(--saffron);color:var(--saffron)}

/* page hero (interior pages) */
.page-hero{background:var(--ink);color:#fff;position:relative}
.page-hero::after{content:"";position:absolute;inset:auto 0 0 0;height:5px;
  background:repeating-linear-gradient(90deg,var(--saffron) 0 64px,transparent 64px 80px)}
.page-hero .wrap{padding:46px 22px 52px}
.page-hero .kicker{font-family:"Archivo",sans-serif;letter-spacing:.28em;font-size:11px;color:var(--saffron);text-transform:uppercase;margin-bottom:10px}
.page-hero h1{color:#fff;font-size:clamp(26px,4vw,40px);font-weight:800}
.page-hero p{color:#C8D4DF;max-width:64ch;margin-top:12px}

/* ---------- sections ---------- */
section.band{padding:64px 0}
section.band.mist{background:var(--mist)}
.sec-head{margin-bottom:34px;max-width:70ch}
.sec-head .kicker{font-family:"Archivo",sans-serif;letter-spacing:.26em;font-size:11px;
  color:var(--saffron-d);text-transform:uppercase;margin-bottom:8px}
.sec-head h2{font-size:clamp(24px,3.2vw,34px);font-weight:800}
.sec-head p{margin-top:12px}

/* ---------- cards ---------- */
.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card{background:var(--paper);border:1px solid var(--line);border-radius:6px;overflow:hidden;
  display:flex;flex-direction:column;transition:box-shadow .18s ease,transform .18s ease}
.card:hover{box-shadow:0 14px 34px rgba(20,39,58,.12);transform:translateY(-2px)}
.card img{aspect-ratio:16/10;object-fit:cover;width:100%}
.card .pad{padding:18px 20px 22px;display:flex;flex-direction:column;gap:8px;flex:1}
.card h3{font-size:17px;letter-spacing:.05em;text-transform:uppercase}
.card p{font-size:15.5px;flex:1}
.card a.more{font-family:"Archivo",sans-serif;font-size:13px;letter-spacing:.08em;color:var(--saffron-d)}
.mist .card{border-color:#E1E7ED}

/* offer list (segment pages) */
.offer-list{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.offer{background:var(--paper);border:1px solid var(--line);border-left:4px solid var(--saffron);
  border-radius:4px;padding:20px 22px}
.offer h3{font-size:16px;letter-spacing:.04em;margin-bottom:6px}
.offer p{font-size:15.5px}
.mist .offer{border-color:#E1E7ED;border-left-color:var(--saffron)}

/* application gallery */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.tile{border:1px solid var(--line);border-radius:6px;overflow:hidden;background:var(--paper)}
.tile img{aspect-ratio:4/3;object-fit:cover;width:100%}
.tile figcaption{font-family:"Archivo",sans-serif;font-size:12.5px;letter-spacing:.06em;
  text-transform:uppercase;padding:10px 12px;color:var(--ink)}

/* ---------- principal ledger (signature element) ---------- */
.ledger{width:100%;border-collapse:collapse;background:var(--paper);border:1px solid var(--line);font-size:15.5px}
.ledger caption{caption-side:top;text-align:left;font-family:"Archivo",sans-serif;font-size:12px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--saffron-d);padding:0 0 10px 2px}
.ledger th{font-family:"Archivo",sans-serif;font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  text-align:left;color:#fff;background:var(--ink);padding:12px 16px}
.ledger td{padding:12px 16px;border-top:1px solid var(--line);vertical-align:top}
.ledger tbody tr:nth-child(even){background:var(--mist)}
.ledger td.name{font-family:"Archivo",sans-serif;font-weight:700;color:var(--ink);white-space:nowrap}
.ledger td.origin{white-space:nowrap;color:var(--saffron-d);font-family:"Archivo",sans-serif;font-size:13.5px;letter-spacing:.04em}
.ledger a{color:var(--ink)}
.ledger a:hover{color:var(--saffron-d)}
.ledger-note{font-size:14px;margin-top:10px;color:#5A6B7A}

/* principal chips on segment pages */
.chip-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.chip{font-family:"Archivo",sans-serif;font-size:13px;letter-spacing:.05em;
  border:1px solid var(--line);border-radius:999px;padding:8px 16px;color:var(--ink);background:var(--paper)}
.chip b{color:var(--saffron-d);font-weight:700}

/* ---------- stats strip ---------- */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.stat{border-top:3px solid var(--saffron);padding-top:14px}
.stat .num{font-family:"Archivo",sans-serif;font-size:38px;font-weight:800;color:var(--ink)}
.stat .lab{font-family:"Archivo",sans-serif;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:#5A6B7A}

/* ---------- two-column ---------- */
.two-col{display:grid;grid-template-columns:1.1fr .9fr;gap:44px;align-items:start}
.two-col img{border-radius:6px;border:1px solid var(--line)}

/* checklist */
ul.check{list-style:none;margin-top:14px}
ul.check li{padding:8px 0 8px 30px;position:relative;border-bottom:1px solid var(--mist)}
ul.check li::before{content:"—";position:absolute;left:0;color:var(--saffron);font-weight:700}

/* ---------- contact ---------- */
.office-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.office{background:var(--paper);border:1px solid var(--line);border-top:4px solid var(--saffron);
  border-radius:6px;padding:26px 28px}
.office h3{letter-spacing:.06em;text-transform:uppercase;font-size:16px;margin-bottom:12px}
.office p{margin-bottom:8px;font-size:16px}
.office .lbl{font-family:"Archivo",sans-serif;font-size:11.5px;letter-spacing:.16em;
  text-transform:uppercase;color:#5A6B7A;display:block;margin-top:12px}
.map-embed{border:1px solid var(--line);border-radius:6px;overflow:hidden;margin-top:34px}
.map-embed iframe{width:100%;height:380px;border:0;display:block}

/* ---------- blog teasers ---------- */
.post{display:grid;grid-template-columns:280px 1fr;gap:26px;border:1px solid var(--line);
  border-radius:6px;overflow:hidden;background:var(--paper)}
.post + .post{margin-top:22px}
.post img{height:100%;object-fit:cover}
.post .pad{padding:22px 26px 24px}
.post .date{font-family:"Archivo",sans-serif;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--saffron-d)}
.post h3{font-size:20px;margin:8px 0 10px}

/* ---------- footer ---------- */
footer.site{background:var(--ink);color:#B9C7D3;margin-top:70px;font-size:15px}
footer.site .grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1.2fr;gap:34px;padding:56px 0 40px}
footer.site h4{color:#fff;font-size:13px;letter-spacing:.18em;text-transform:uppercase;margin-bottom:16px}
footer.site ul{list-style:none}
footer.site li{margin-bottom:8px}
footer.site a{color:#B9C7D3}
footer.site a:hover{color:var(--saffron)}
footer.site .brandline{font-family:"Archivo",sans-serif;color:#fff;font-weight:700;letter-spacing:.12em;font-size:18px}
footer.site .brandline small{display:block;font-weight:500;letter-spacing:.22em;font-size:10px;color:var(--saffron)}
footer.site .legal{border-top:1px solid #2A4158;padding:18px 0;font-size:13.5px;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;font-family:"Archivo",sans-serif}

/* ---------- responsive ---------- */
@media (max-width:960px){
  .card-grid{grid-template-columns:repeat(2,1fr)}
  .gallery{grid-template-columns:repeat(3,1fr)}
  footer.site .grid{grid-template-columns:1fr 1fr}
  .two-col{grid-template-columns:1fr}
}
@media (max-width:760px){
  .nav-toggle{display:block}
  nav.main{display:none;width:100%}
  nav.main.open{display:block}
  nav.main ul{flex-direction:column;align-items:stretch;gap:0}
  nav.main a{padding:14px 6px;border-bottom:1px solid var(--mist)}
  nav.main .sub{display:flex;position:static;border:0;border-left:3px solid var(--saffron);
    box-shadow:none;margin-left:10px}
  .nav-row{flex-wrap:wrap;padding:10px 0}
  .offer-list,.office-grid,.card-grid{grid-template-columns:1fr}
  .gallery{grid-template-columns:repeat(2,1fr)}
  .stats{grid-template-columns:1fr}
  .post{grid-template-columns:1fr}
  .post img{max-height:210px;width:100%}
  .ledger{font-size:14px;display:block;overflow-x:auto}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  html{scroll-behavior:auto}
}