/* ============================================================
   Top Systems — Stage 1 homepage design system (scoped, additive)
   Reuses existing color tokens + fonts from style.css :root.
   Loaded only on the homepage; inner pages are untouched.
   ============================================================ */

:root{
  --hp-ink:#12233f;            /* deep industrial navy for text on light */
  --hp-line:rgba(18,35,63,0.12);
  --hp-line-dark:rgba(255,255,255,0.14);
  --hp-space:clamp(3.5rem,7vw,7rem);
  --hp-maxw:1180px;
}

/* ---- layout helpers ---- */
.hp-wrap{max-width:var(--hp-maxw);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.hp-section{padding-top:var(--hp-space);padding-bottom:var(--hp-space)}
.hp-eyebrow{display:inline-flex;align-items:center;gap:0.7rem;font-family:var(--sans);font-size:0.72rem;
  font-weight:700;letter-spacing:0.18em;text-transform:uppercase;color:var(--gold)}
.hp-eyebrow::before{content:"";width:34px;height:1px;background:var(--gold)}
.hp-eyebrow.on-dark{color:var(--gold-light)}
.hp-h2{font-family:var(--serif);font-weight:700;line-height:1.08;letter-spacing:-0.01em;
  font-size:clamp(1.9rem,3.6vw,3rem);color:var(--hp-ink);margin:1.1rem 0 0}
.hp-h2.on-dark{color:#fff}
.hp-lead{font-family:var(--sans);font-size:clamp(1.02rem,1.5vw,1.18rem);line-height:1.65;
  color:var(--mid-grey);max-width:60ch;margin-top:1.1rem}
.hp-lead.on-dark{color:rgba(255,255,255,0.78)}
.hp-num{font-family:var(--serif);font-size:1.05rem;color:var(--gold);font-weight:600;letter-spacing:0.04em}

/* ---- ONE button system (reused everywhere) ---- */
.hp-btn{display:inline-flex;align-items:center;justify-content:center;gap:0.55rem;
  font-family:var(--sans);font-weight:600;font-size:0.95rem;letter-spacing:0.01em;line-height:1;
  height:52px;padding:0 1.6rem;border-radius:4px;cursor:pointer;text-decoration:none;
  border:1px solid transparent;transition:background .2s ease,border-color .2s ease,color .2s ease,transform .15s ease}
.hp-btn:hover{transform:translateY(-2px)}
/* primary = gold, same everywhere */
.hp-btn-primary{background:var(--gold);color:var(--blue-dark);border-color:var(--gold)}
.hp-btn-primary:hover{background:var(--gold-light);border-color:var(--gold-light)}
/* secondary = quiet outline; .on-dark variant for navy backgrounds */
.hp-btn-secondary{background:transparent;color:var(--hp-ink);border-color:var(--hp-line)}
.hp-btn-secondary:hover{border-color:var(--gold);color:var(--blue-dark)}
.hp-btn-secondary.on-dark{color:#fff;border-color:rgba(255,255,255,0.42)}
.hp-btn-secondary.on-dark:hover{border-color:var(--gold-light);color:var(--gold-light)}
.hp-btn-arrow::after{content:"→";font-size:1.05em;line-height:1}

/* ============================================================ HERO (single column, no image) */
.hp-hero{position:relative;background:var(--blue-dark);color:#fff;overflow:hidden}
.hp-hero::after{content:"";position:absolute;inset:0;
  background:radial-gradient(1100px 520px at 88% -20%,rgba(45,95,191,0.40),transparent 62%);pointer-events:none}
.hp-hero-inner{position:relative;z-index:1;max-width:var(--hp-maxw);margin:0 auto;
  padding:calc(var(--nav-height) + clamp(1.5rem,4vw,3rem)) var(--pad) 0}
.hp-hero-content{max-width:60rem}
.hp-hero h1{font-family:var(--serif);font-weight:700;line-height:1.04;letter-spacing:-0.015em;
  font-size:clamp(2.5rem,5.6vw,4.4rem);margin:1.4rem 0 0}
.hp-hero h1 em{font-style:normal;color:var(--gold-light)}
.hp-hero-lead{font-size:clamp(1.08rem,1.7vw,1.35rem);line-height:1.6;color:rgba(255,255,255,0.82);
  margin-top:1.6rem;max-width:50ch}
.hp-hero-actions{display:flex;flex-wrap:wrap;gap:0.9rem;margin-top:2.4rem}

/* proof strip — 3 equal columns, dominant top line */
.hp-proof-strip{position:relative;z-index:1;max-width:var(--hp-maxw);margin:0 auto;
  padding:0 var(--pad) clamp(3rem,6vw,4.5rem);margin-top:clamp(3rem,6vw,4.5rem)}
.hp-proof-strip-grid{display:grid;grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--hp-line-dark)}
.hp-proof-col{padding:1.9rem 1.6rem 2.1rem;border-left:1px solid var(--hp-line-dark)}
.hp-proof-col:first-child{border-left:0;padding-left:0}
.hp-proof-col .k{font-family:var(--serif);font-size:clamp(1.3rem,2vw,1.6rem);color:#fff;font-weight:600;
  letter-spacing:0.01em;line-height:1.1}
.hp-proof-col .v{font-family:var(--sans);font-size:0.86rem;letter-spacing:0.02em;
  color:rgba(255,255,255,0.6);margin-top:0.5rem;line-height:1.45}
@media(max-width:640px){
  .hp-proof-strip-grid{grid-template-columns:1fr}
  .hp-proof-col{border-left:0;border-top:1px solid var(--hp-line-dark);padding:1.3rem 0}
  .hp-proof-col:first-child{border-top:0}
}

/* ============================================================ VALUE BAND */
.hp-value{background:var(--warm-white)}
.hp-value .hp-wrap{display:grid;grid-template-columns:0.9fr 1.1fr;gap:clamp(2rem,4vw,4rem);align-items:start}
.hp-value p.big{font-family:var(--serif);font-size:clamp(1.4rem,2.4vw,2rem);line-height:1.35;
  color:var(--hp-ink);font-weight:600}
.hp-value ul{list-style:none;margin:0;padding:0;display:grid;gap:1.1rem}
.hp-value li{display:grid;grid-template-columns:auto 1fr;gap:0.9rem;align-items:start}
.hp-value li b{font-family:var(--sans);color:var(--hp-ink);font-weight:700}
.hp-value li span{color:var(--mid-grey);line-height:1.55;font-size:0.96rem}
.hp-value .dot{width:9px;height:9px;margin-top:0.45rem;background:var(--gold);border-radius:2px;transform:rotate(45deg)}

/* ============================================================ WHAT WE DO (editorial rows) */
.hp-do{background:#fff}
.hp-do-rows{margin-top:2.6rem;border-top:1px solid var(--hp-line)}
.hp-do-row{display:grid;grid-template-columns:auto 1fr 1.2fr;gap:clamp(1rem,3vw,3rem);
  padding:2rem 0;border-bottom:1px solid var(--hp-line);align-items:baseline}
.hp-do-row h3{font-family:var(--serif);font-size:1.4rem;color:var(--hp-ink);margin:0;font-weight:700}
.hp-do-row p{color:var(--mid-grey);line-height:1.6;margin:0;font-size:0.98rem}
.hp-do-row .num{font-family:var(--serif);font-size:1.6rem;color:var(--gold);font-weight:600}
@media(max-width:760px){.hp-do-row{grid-template-columns:auto 1fr;gap:0.6rem 1.2rem}
  .hp-do-row p{grid-column:2}}

/* ============================================================ HOW WE WORK (process) */
.hp-how{background:var(--blue-dark);color:#fff}
.hp-steps{margin-top:2.6rem;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--hp-line-dark);border:1px solid var(--hp-line-dark)}
.hp-step{background:var(--blue-dark);padding:1.7rem 1.5rem}
.hp-step .s-num{font-family:var(--serif);color:var(--gold-light);font-weight:600;font-size:1.1rem}
.hp-step h4{font-family:var(--serif);font-size:1.2rem;margin:0.5rem 0 0.5rem;color:#fff;font-weight:700}
.hp-step p{color:rgba(255,255,255,0.72);line-height:1.55;font-size:0.9rem;margin:0}
@media(max-width:820px){.hp-steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.hp-steps{grid-template-columns:1fr}}

/* ============================================================ PRODUCTION MARKET */
.hp-market{background:var(--cream)}
.hp-market-grid{margin-top:2.6rem;display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.hp-country{background:#fff;border:1px solid var(--hp-line);border-radius:6px;padding:1.6rem 1.5rem}
.hp-country .flag{font-size:1.4rem}
.hp-country h4{font-family:var(--serif);font-size:1.25rem;color:var(--hp-ink);margin:0.6rem 0 0.7rem;font-weight:700}
.hp-country ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:0.5rem}
.hp-country li{font-size:0.8rem;color:var(--hp-ink);background:var(--gold-pale);border:1px solid rgba(201,160,32,0.35);
  padding:0.3rem 0.7rem;border-radius:20px}
@media(max-width:820px){.hp-market-grid{grid-template-columns:1fr}}

/* ============================================================ CATEGORIES */
.hp-cats{background:#fff}
.hp-cats-grid{margin-top:2.6rem;display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
/* Card works without a photo; drop an <img class="hp-cat-img"> in later to add product imagery. */
.hp-cat{position:relative;border:1px solid var(--hp-line);border-radius:6px;overflow:hidden;
  min-height:180px;display:flex;flex-direction:column;justify-content:flex-end;background:var(--cream)}
.hp-cat-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0.6;transition:opacity .3s,transform .4s}
.hp-cat:hover .hp-cat-img{opacity:0.72;transform:scale(1.04)}
.hp-cat .label{position:relative;z-index:1;padding:1.3rem 1.4rem;width:100%}
.hp-cat .c-num{font-family:var(--serif);color:var(--gold);font-weight:600;font-size:1rem}
.hp-cat .label b{font-family:var(--serif);font-size:1.25rem;font-weight:700;display:block;color:var(--hp-ink);margin-top:0.3rem}
.hp-cat .label span{font-size:0.82rem;color:var(--mid-grey);line-height:1.45;display:block;margin-top:0.3rem}
.hp-cat::before{content:"";position:absolute;top:0;left:0;width:100%;height:3px;background:var(--gold);opacity:0.9;z-index:1}
@media(max-width:820px){.hp-cats-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.hp-cats-grid{grid-template-columns:1fr}}

/* ============================================================ WHY (differentiators) */
.hp-why{background:var(--warm-white)}
.hp-why-grid{margin-top:2.6rem;display:grid;grid-template-columns:repeat(2,1fr);gap:1.4rem}
.hp-why-card{border:1px solid var(--hp-line);border-left:3px solid var(--gold);border-radius:6px;
  padding:1.7rem 1.6rem;background:#fff}
.hp-why-card h4{font-family:var(--sans);letter-spacing:0.04em;font-size:1rem;font-weight:700;
  color:var(--hp-ink);margin:0 0 0.6rem;text-transform:uppercase}
.hp-why-card p{color:var(--mid-grey);line-height:1.6;margin:0;font-size:0.96rem}
@media(max-width:760px){.hp-why-grid{grid-template-columns:1fr}}

/* ============================================================ PROOF (operational case studies) */
.hp-proof{background:var(--blue-dark);color:#fff}
.hp-proof-grid{margin-top:2.6rem;display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.hp-proof-card{border:1px solid var(--hp-line-dark);border-radius:6px;padding:1.6rem 1.5rem;background:rgba(255,255,255,0.03)}
.hp-proof-card .stage{font-family:var(--sans);font-size:0.7rem;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--gold-light);font-weight:700}
.hp-proof-card h4{font-family:var(--serif);font-size:1.2rem;margin:0.6rem 0 0.9rem;color:#fff;font-weight:700}
.hp-proof-card dl{margin:0;display:grid;gap:0.7rem}
.hp-proof-card dt{font-size:0.72rem;letter-spacing:0.08em;text-transform:uppercase;color:rgba(255,255,255,0.5)}
.hp-proof-card dd{margin:0.1rem 0 0;color:rgba(255,255,255,0.82);line-height:1.5;font-size:0.92rem}
@media(max-width:820px){.hp-proof-grid{grid-template-columns:1fr}}

/* ============================================================ FINAL CTA */
.hp-final{background:var(--cream);text-align:center}
.hp-final .hp-wrap{max-width:760px}
.hp-final h2{font-family:var(--serif);font-size:clamp(1.9rem,3.4vw,2.8rem);color:var(--hp-ink);
  font-weight:700;line-height:1.1;margin:1rem 0 0}
.hp-final p{color:var(--mid-grey);font-size:1.05rem;line-height:1.6;margin:1.1rem auto 0;max-width:52ch}
.hp-final .hp-hero-actions{justify-content:center}

/* ============================================================ MOBILE STACKING */
@media(max-width:820px){
  .hp-hero-grid{grid-template-columns:1fr}
  .hp-hero-visual{min-height:220px;margin-top:2rem}
  .hp-value .hp-wrap{grid-template-columns:1fr;gap:2rem}
  .hp-hero-meta{gap:1.2rem 2rem}
}

/* ============================================================ MOBILE STICKY CTA */
.hp-sticky{position:fixed;left:0;right:0;bottom:0;z-index:200;transform:translateY(120%);
  transition:transform .3s ease;background:var(--blue-dark);border-top:1px solid var(--gold);
  padding:0.7rem 1rem;display:none;box-shadow:0 -6px 20px rgba(0,0,0,0.25)}
.hp-sticky.show{transform:translateY(0)}
.hp-sticky a{display:flex;align-items:center;justify-content:center;gap:0.5rem;
  background:var(--gold);color:var(--blue-dark);font-family:var(--sans);font-weight:700;
  text-decoration:none;padding:0.85rem;border-radius:4px;font-size:0.95rem}
@media(max-width:760px){.hp-sticky{display:block}}