/* harmelo-brand.css  Harmelo V4 brand layer (20 Oct 2026).
 *
 * WHAT THIS IS. The one place the V4 identity meets the existing harmelo.com pages. The V4 package's own
 * stylesheets (brand/v4/v4-base.css, v4-layer3.css, v4-pages.css) are shipped unchanged and supply the
 * photographic heroes, ribbons, editorial splits and product galleries. This layer does three things:
 *   1. declares the Harmelo brand tokens (--hb-*), the vocabulary later surfaces (consoles, Command Centre,
 *      demos) will adopt one by one;
 *   2. points the existing marketing variables (--navy, --teal-ink, --line ...) at those tokens, so every
 *      existing section, form, estimator and card takes the V4 palette without its markup changing;
 *   3. settles where the two systems meet (body ground, eyebrow, links, cards on dark).
 *
 * Presentation only. No selector here changes a form control, a name, a route or a behaviour. Loaded only by
 * public marketing pages; no console, Command Centre or field surface links it (scripts/test-brand-v4.js).
 * AHR and Condition Index never load it.
 */

/* 1. Brand tokens ------------------------------------------------------------------------------------ */
:root{
  --hb-night:#061323;        /* page ground, heroes */
  --hb-midnight:#04101e;     /* deepest panels, footer */
  --hb-slate:#12253a;        /* raised dark surface */
  --hb-slate-2:#0b1f35;
  --hb-line-dark:rgba(167,205,240,.18);
  --hb-silver:#e7edf5;       /* text on dark */
  --hb-mist:#aabacf;         /* secondary text on dark */
  --hb-blue:#43c8ff;         /* accent on dark only */
  --hb-violet:#9874ff;       /* accent on dark only */
  --hb-blue-ink:#1d5fbf;     /* accent on light: 6.1:1 on white */
  --hb-blue-ink-hover:#164a97;
  --hb-stone:#f2f5f8;        /* light section ground */
  --hb-paper:#eef3f9;
  --hb-ink:#122136;          /* text on light */
  --hb-ink-muted:#4f6076;    /* secondary text on light: 6.3:1 on white */
  --hb-line:#d7e0e9;
  --hb-wash:#e8f1fc;
  --hb-gradient:linear-gradient(113deg,#087ac9 0%,#3556e9 58%,#7044d8 100%);
  --hb-rule:linear-gradient(90deg,#219bd2 8%,#4e73ea 55%,#8d67ec 100%);
  --hb-font:"Inter","Helvetica Neue",Arial,sans-serif;
  --hb-radius:12px;
  --hb-radius-sm:8px;
  --hb-shadow:0 30px 56px rgba(9,26,49,.14);
  --hb-ease:cubic-bezier(.2,.7,.2,1);

  /* 2. Existing marketing vocabulary, re-pointed */
  --navy:var(--hb-ink);
  --navy-2:var(--hb-slate);
  --navy-line:#264054;
  --paper:var(--hb-paper);
  --white:#ffffff;
  --surface:#ffffff;
  --text:var(--hb-ink);
  --muted:var(--hb-ink-muted);
  --faint:#5c6d82;
  --line:var(--hb-line);
  --line-soft:#e4ebf3;
  --teal:var(--hb-blue);
  --teal-ink:var(--hb-blue-ink);
  --teal-ink-hover:var(--hb-blue-ink-hover);
  --teal-wash:var(--hb-wash);
  --teal-soft:var(--hb-wash);
  --logo-teal:var(--hb-blue-ink);
  --logo-teal-deep:var(--hb-blue-ink-hover);
  --logo-orange:#7a5cf0;
  --orange-wash:#efeafd;
  --orange-ink:#4c34a8;
  --serif:var(--hb-font);
  --sans:var(--hb-font);
  /* site.css vocabulary used by the same pages */
  --tint:var(--hb-stone);
  --tint-2:#e4ebf3;
  --brand:#2f7fe0;
  --orange:#7a5cf0;
  --deep:var(--hb-night);
  --deep-2:var(--hb-midnight);
  --wrap:1450px;
  --shadow-lg:0 30px 70px -28px rgba(6,19,35,.45),0 12px 28px -18px rgba(6,19,35,.35);
  --shadow:0 18px 40px -24px rgba(6,19,35,.38);
}

/* 3. Where the systems meet ------------------------------------------------------------------------- */
body{background:#fff;color:var(--hb-ink);font-family:var(--hb-font)}
main{display:block;background:#fff}
.h1,.h2,h2,h3{letter-spacing:-.025em}
.h2{font-weight:550}
.sec{background:#fff;color:var(--hb-ink)}
.sec-tint{background:var(--hb-stone)}
.sec-deep,.on-dark{background:var(--hb-night);color:var(--hb-silver)}
.sec-deep .h2,.on-dark .h2,.sec-deep h3,.on-dark h3{color:#fff}
.sec-deep p,.on-dark p{color:#c3d2e3}
.sec .eyebrow{color:var(--hb-blue-ink);letter-spacing:.2em;font-size:.72rem;font-weight:700;text-transform:uppercase}
.sec .eyebrow i{background:var(--hb-rule)}
.sec-deep .eyebrow,.on-dark .eyebrow{color:#9fdcff}
.sec p a,.sec li a,.req-sec a,.mk-foot .foot-related a{text-decoration:underline;text-underline-offset:3px}
.btn{border-radius:var(--hb-radius-sm);font-weight:700;transition:transform .22s var(--hb-ease),box-shadow .22s,background .22s}
.btn:hover{transform:translateY(-2px)}
.btn-primary,.sec .btn-primary,.on-dark .btn-primary{background:var(--hb-gradient);color:#fff;border:1px solid rgba(152,196,255,.38);box-shadow:0 8px 26px rgba(16,77,210,.18),inset 0 1px rgba(255,255,255,.25)}
.btn-primary:hover{box-shadow:0 12px 34px rgba(36,85,223,.35);color:#fff}
.card{border-radius:var(--hb-radius)}
.shot{background:linear-gradient(160deg,#153357,#071426);border:1px solid rgba(99,161,213,.45);border-radius:16px}

/* One page width: existing sections line up with the V4 shell. */
.wrap{max-width:none;width:min(calc(100% - 9vw),1450px);margin-inline:auto;padding-inline:0}
@media (max-width:990px){.wrap{width:min(calc(100% - 40px),1450px)}}

/* Continuity bar and record track on the V4 gradient. */
.lc-line{background:var(--hb-rule);box-shadow:0 10px 30px -14px rgba(78,115,234,.6)}
.lc-line span{color:#fff}
.lc-track li{border-color:rgba(120,180,235,.24)}
.lc-track li::after{background:rgba(120,180,235,.5)}

/* Footer: the V4 deep footer, same links. */
.mk-foot{background:var(--hb-midnight);color:#94a9bf;border-top:1px solid rgba(170,212,245,.17)}
.mk-foot a{color:#c4d6e8}
.mk-foot a:hover{color:#8bdfff}
.mk-foot h2{color:#e8f4ff;letter-spacing:.14em;text-transform:uppercase;font-size:.75rem}
.mk-foot .nm img{display:block;width:240px;max-width:100%;height:auto}
.mk-foot .foot-legal,.mk-foot .foot-tm,.mk-foot .foot-related{color:#8198af;border-color:rgba(170,212,245,.17)}

/* V4 sections sit on their own dark grounds inside a white main. */
.hb-dark{background:var(--hb-night);color:#e9f2fd}
.hero-panel,.h4-trust-ribbon,.h4-steps,.h4-photo-quote,.v3-flow,.v3-audiences,.v3-final,.continuity,.v3-home-showcase,.capabilities-strip,.editorial-split,.closing{color:#e9f2fd}
.h4-intro,.h4-product,.h4-solutions,.h4-pricing,.h4-contact-cards{width:auto;max-width:none;margin:0;background:var(--hb-night);color:#e9f2fd;padding-inline:max(4.5vw,calc((100% - 1450px)/2))}
.hero-panel .button,.closing .button,.h4-photo-quote .button,.v3-final .button{text-decoration:none}

/* The hero sits under the sticky navigation so the photograph runs behind it. */
.hb-hero{margin-top:calc(-1 * var(--hb-nav-h,84px));padding-top:var(--hb-nav-h,84px)}
.hb-hero h1{color:#fff}
.hb-hero .detail-intro>p,.hb-hero .home-hero-content>p{color:#e0ebf8}

/* Grid children may shrink below their content on narrow screens. */
.h4-contact-cards>*,.h4-price-grid>*,.h4-proof-grid>*,.h4-step-grid>*,.h4-sol-grid>*,.detail-grid>*,.hb-steps>*{min-width:0}
.h4-linkcard{display:flex;flex-direction:column}
.h4-linkcard b,.h4-arrow{white-space:normal}

/* Hand-written V4 blocks: numbered steps and a plain note. */
.hb-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:34px 0 18px}
.hb-steps>div{border-top:1px solid var(--hb-line);padding-top:16px;display:flex;gap:14px;color:#34475b}
.hb-steps b{color:var(--hb-blue-ink);letter-spacing:.1em}
.hb-note{font-size:.88rem;color:var(--hb-ink-muted);max-width:760px;margin:0 0 26px}
.value-section .section-intro h2 em{color:var(--hb-blue-ink)}
@media (max-width:760px){.hb-steps{grid-template-columns:1fr}}

/* Reduced motion: no lift on hover, no reveal. */
@media (prefers-reduced-motion:reduce){
  .btn,.button,.audience-card,.triptych>a,.h4-proof-card,.h4-solution,.h4-linkcard{transition:none!important;transform:none!important}
}

/* CONT-01 pillar strip, carried from the previous homepage hero into the V4 hero. */
.hb-pillars{position:relative;z-index:2;padding-bottom:30px}
.hb-hero .hx-strip{margin-top:0;background:rgba(3,13,26,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border-top:0;border-radius:10px}
.hb-hero .hx-strip ul{max-width:none;padding:0 22px;gap:0}
.hb-hero .hx-strip ul{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));list-style:none;margin:0;padding:0;border-top:1px solid rgba(215,237,255,.2)}
.hb-hero .hx-strip li{padding:16px 22px 14px 0;color:#d4e1ed;font-size:.86rem;line-height:1.5}
.hb-hero .hx-strip b{display:block;color:#fff;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;margin-bottom:6px}
.hb-hero .hx-strip li a,.hb-hero .hx-strip a{color:#8fd3fb;text-decoration-color:rgba(143,211,251,.5);text-decoration:underline;text-underline-offset:3px}
@media (max-width:980px){.hb-hero .hx-strip ul{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.hb-hero .hx-strip ul{grid-template-columns:1fr}}

/* Phone: the hero photograph sits under a stronger, even shade so the headline stays readable over a busy skyline. */
@media (max-width:650px){
  .hb-hero .hero-overlay{background:linear-gradient(180deg,rgba(3,15,31,.86) 0%,rgba(5,19,35,.74) 55%,rgba(3,15,31,.92) 100%)}
}