/* ============================================================
   Top Systems — Stage 2 inner-page components.
   Loaded ALONGSIDE home.css (which carries the shared system:
   .hp-btn, .hp-eyebrow, .hp-h2, .hp-lead, .hp-section, .hp-wrap,
   .hp-do-row, .hp-steps/.hp-step, .hp-country, .hp-why-card,
   .hp-proof-card, .hp-final, colour tokens). This file adds only
   what inner pages need on top. No duplicated component CSS.
   ============================================================ */

/* ---------- inner page hero (navy, offset below fixed nav) ---------- */
.ip-hero{position:relative;background:var(--blue-dark);color:#fff;overflow:hidden}
.ip-hero::after{content:"";position:absolute;inset:0;
  background:radial-gradient(1000px 460px at 90% -25%,rgba(45,95,191,0.38),transparent 62%);pointer-events:none}
.ip-hero-inner{position:relative;z-index:1;max-width:var(--hp-maxw);margin:0 auto;
  padding:calc(var(--nav-height) + clamp(2rem,5vw,3.5rem)) var(--pad) clamp(2.5rem,5vw,3.5rem)}
.ip-hero-content{max-width:56rem}
.ip-hero h1{font-family:var(--serif);font-weight:700;line-height:1.06;letter-spacing:-0.015em;
  font-size:clamp(2.1rem,4.4vw,3.5rem);margin:1.1rem 0 0;color:#fff}
.ip-hero h1 em{font-style:normal;color:var(--gold-light)}
.ip-hero-lead{font-size:clamp(1.02rem,1.5vw,1.22rem);line-height:1.6;color:rgba(255,255,255,0.82);
  margin-top:1.3rem;max-width:56ch}
.ip-hero-actions{display:flex;flex-wrap:wrap;gap:0.9rem;margin-top:1.9rem}

/* ---------- section heading cluster (eyebrow + h2 + lead) reused; small helper ---------- */
.ip-head{max-width:62ch}

/* ---------- editorial capability block (What We Do) ---------- */
.ip-cap{display:grid;grid-template-columns:auto 1fr;gap:clamp(1rem,3vw,2.6rem);
  padding:clamp(2rem,4vw,3rem) 0;border-top:1px solid var(--hp-line)}
.ip-cap:first-of-type{border-top:0}
.ip-cap .ip-cap-num{font-family:var(--serif);font-size:clamp(1.6rem,2.4vw,2.2rem);color:var(--gold);font-weight:600;line-height:1}
.ip-cap h3{font-family:var(--serif);font-size:clamp(1.35rem,2.2vw,1.8rem);color:var(--hp-ink);margin:0 0 0.7rem;font-weight:700}
.ip-cap p{color:var(--mid-grey);line-height:1.65;margin:0 0 1rem;font-size:1rem;max-width:64ch}
.ip-cap .ip-sub{color:var(--hp-ink);font-weight:600;font-size:0.9rem;letter-spacing:0.02em;margin:1.1rem 0 0.6rem}

/* chips (framework, materials, categories, retailers) — one treatment */
.ip-chips{display:flex;flex-wrap:wrap;gap:0.55rem;margin:0;padding:0;list-style:none}
.ip-chips li{font-size:0.84rem;color:var(--hp-ink);background:var(--gold-pale);
  border:1px solid rgba(201,160,32,0.35);padding:0.4rem 0.85rem;border-radius:20px;line-height:1.2}
.ip-chips.on-dark li{background:rgba(255,255,255,0.06);border-color:var(--hp-line-dark);color:rgba(255,255,255,0.9)}

/* inline process flow (a -> b -> c) */
.ip-flow{display:flex;flex-wrap:wrap;align-items:center;gap:0.5rem 0.7rem;margin:0.4rem 0 0;padding:0;list-style:none}
.ip-flow li{font-family:var(--sans);font-size:0.88rem;font-weight:600;color:var(--hp-ink);
  background:#fff;border:1px solid var(--hp-line);border-radius:4px;padding:0.5rem 0.8rem}
.ip-flow li::after{content:"→";color:var(--gold);margin-left:0.7rem;font-weight:700}
.ip-flow li:last-child::after{content:""}
.ip-flow.on-dark li{background:rgba(255,255,255,0.05);border-color:var(--hp-line-dark);color:#fff}

/* ---------- spec / inspection list (Quality) ---------- */
.ip-speclist{margin-top:1.4rem;display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--hp-line);border:1px solid var(--hp-line)}
.ip-speclist span{background:#fff;padding:0.95rem 1rem;font-size:0.92rem;color:var(--hp-ink);font-weight:500}
.ip-speclist.on-dark{background:var(--hp-line-dark);border-color:var(--hp-line-dark)}
.ip-speclist.on-dark span{background:var(--blue-dark);color:rgba(255,255,255,0.9)}
@media(max-width:820px){.ip-speclist{grid-template-columns:repeat(2,1fr)}}

/* numbered stage cards (Quality 01-05, reuse .hp-step look on light) */
.ip-stage{display:grid;grid-template-columns:auto 1fr;gap:1.2rem;padding:1.8rem 0;border-top:1px solid var(--hp-line)}
.ip-stage:first-of-type{border-top:0}
.ip-stage .n{font-family:var(--serif);color:var(--gold);font-weight:600;font-size:1.4rem;line-height:1}
.ip-stage h3{font-family:var(--serif);font-size:1.4rem;color:var(--hp-ink);margin:0 0 0.6rem;font-weight:700}
.ip-stage p{color:var(--mid-grey);line-height:1.65;margin:0;max-width:64ch}

/* ---------- audience cards (Who We Serve) ---------- */
.ip-aud-grid{margin-top:2.4rem;display:grid;grid-template-columns:repeat(2,1fr);gap:1.2rem}
.ip-aud{border:1px solid var(--hp-line);border-left:3px solid var(--gold);border-radius:6px;padding:1.7rem 1.6rem;background:#fff}
.ip-aud h3{font-family:var(--serif);font-size:1.3rem;color:var(--hp-ink);margin:0 0 0.6rem;font-weight:700}
.ip-aud p{color:var(--mid-grey);line-height:1.6;margin:0;font-size:0.97rem}
@media(max-width:760px){.ip-aud-grid{grid-template-columns:1fr}}

/* ---------- "what we need to start" strip ---------- */
.ip-need{margin-top:1.4rem;display:flex;flex-wrap:wrap;gap:0.6rem}
.ip-need span{font-size:0.9rem;color:var(--hp-ink);background:#fff;border:1px solid var(--hp-line);
  border-radius:4px;padding:0.6rem 0.9rem;font-weight:500}

/* ---------- contact form ---------- */
.ip-form-wrap{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(2rem,4vw,4rem);align-items:start}
.ip-form{background:#fff;border:1px solid var(--hp-line);border-radius:8px;padding:clamp(1.6rem,3vw,2.4rem)}
.ip-form .row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.ip-field{margin-bottom:1.1rem}
.ip-field label{display:block;font-family:var(--sans);font-size:0.82rem;font-weight:600;
  letter-spacing:0.02em;color:var(--hp-ink);margin-bottom:0.4rem}
.ip-field label .opt{color:var(--mid-grey);font-weight:400}
.ip-field input,.ip-field select,.ip-field textarea{width:100%;font-family:var(--sans);font-size:0.95rem;
  color:var(--hp-ink);background:var(--warm-white);border:1px solid var(--hp-line);border-radius:4px;
  padding:0.7rem 0.85rem;transition:border-color .2s}
.ip-field input:focus,.ip-field select:focus,.ip-field textarea:focus{outline:none;border-color:var(--gold)}
.ip-field textarea{min-height:120px;resize:vertical}
.ip-form .hp-btn{width:100%;margin-top:0.4rem}
.ip-form-note{font-size:0.82rem;color:var(--mid-grey);margin-top:0.9rem;line-height:1.5}
.ip-aside .ip-aside-item{padding:1.2rem 0;border-top:1px solid var(--hp-line)}
.ip-aside .ip-aside-item:first-child{border-top:0;padding-top:0}
.ip-aside h4{font-family:var(--serif);font-size:1.1rem;color:var(--hp-ink);margin:0 0 0.4rem;font-weight:700}
.ip-aside p{color:var(--mid-grey);line-height:1.6;margin:0;font-size:0.95rem}
@media(max-width:820px){.ip-form-wrap{grid-template-columns:1fr}.ip-form .row{grid-template-columns:1fr}}

/* ---------- blog / insights index ---------- */
.ix-grid{margin-top:2.4rem;display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.ix-card{display:flex;flex-direction:column;border:1px solid var(--hp-line);border-radius:8px;overflow:hidden;
  background:#fff;text-decoration:none;transition:transform .18s ease,box-shadow .2s ease}
.ix-card:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(15,47,107,0.12)}
.ix-card .ix-img{aspect-ratio:16/10;width:100%;object-fit:cover;background:var(--cream)}
.ix-card .ix-body{padding:1.3rem 1.4rem 1.6rem;display:flex;flex-direction:column;gap:0.5rem}
.ix-card .ix-cat{font-family:var(--sans);font-size:0.7rem;letter-spacing:0.12em;text-transform:uppercase;
  color:var(--gold);font-weight:700}
.ix-card h3{font-family:var(--serif);font-size:1.18rem;line-height:1.25;color:var(--hp-ink);margin:0;font-weight:700}
.ix-card p{color:var(--mid-grey);font-size:0.92rem;line-height:1.55;margin:0}
@media(max-width:900px){.ix-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.ix-grid{grid-template-columns:1fr}}

/* light small-CTA row used at section ends */
.ip-inline-cta{margin-top:1.6rem}

/* mobile tightening */
@media(max-width:760px){
  .ip-cap{grid-template-columns:auto 1fr;gap:0.6rem 1rem}
  .ip-cap p,.ip-cap .ip-sub,.ip-cap .ip-chips,.ip-cap .ip-flow{grid-column:2}
  .ip-stage{grid-template-columns:auto 1fr;gap:0.6rem 1rem}
  .ip-stage p{grid-column:2}
}

/* ---------- Insights index: restyle EXISTING blog cards to the new system (markup untouched) ---------- */
.blog-grid{max-width:var(--hp-maxw);margin:clamp(2.5rem,5vw,3.5rem) auto;padding:0 var(--pad);
  display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.article-card{display:flex;flex-direction:column;border:1px solid var(--hp-line);border-radius:8px;overflow:hidden;
  background:#fff;text-decoration:none;transition:transform .18s ease,box-shadow .2s ease}
.article-card:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(15,47,107,0.12)}
.article-image{aspect-ratio:16/10;width:100%;object-fit:cover;background:var(--cream)}
.article-card-content{padding:1.3rem 1.4rem 1.6rem;display:flex;flex-direction:column;gap:0.55rem}
.article-card-content h3{font-family:var(--serif);font-size:1.15rem;line-height:1.28;color:var(--hp-ink);margin:0;font-weight:700}
.article-card-content p{color:var(--mid-grey);font-size:0.92rem;line-height:1.55;margin:0}
.category-badge{order:-1;align-self:flex-start;font-family:var(--sans);font-size:0.68rem;letter-spacing:0.12em;
  text-transform:uppercase;color:var(--gold);font-weight:700;background:none;border:0;padding:0;border-radius:0}
@media(max-width:900px){.blog-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.blog-grid{grid-template-columns:1fr}}