/* How It Works - PREVIEW (page-hiw-preview.php). Approved concept, Oct 2026. Figma 6396:14817.
   Case-study type scale + Sense-style spacing (STYLE-GUIDE.md); brand colours as-is. Each desktop section fits one fold. */
.hiw { --navy:#0D1758; --green:#1FAB3D; --peri:#6285FB; --sky:#219EFC; --ink:#0F1E28; --body:#3B3F59; --muted:#68739B;
  --hair:rgba(13,23,88,.12); --panel:#F6F7FB; --hd:88px;
  --h1:clamp(40px,3.2vw,56px); --h2:clamp(32px,2.6vw,44px);
  font-family:'Averta CY',sans-serif; color:var(--body); font-size:16px; line-height:1.7; overflow-x:clip; }
@media (min-width:1600px) and (min-height:821px) { .hiw { --hd:134px; } }
@media (min-width:1920px) { .hiw { font-size:18px; } }
.hiw *, .hiw *::before, .hiw *::after { box-sizing:border-box; }
:where(.hiw) :where(h1,h2,h3,p,ul,ol) { margin:0; padding:0; }
:where(.hiw) :where(ul,ol) { list-style:none; }
.hiw img { max-width:100%; height:auto; display:block; }
.hiw h1, .hiw h2, .hiw h3 { font-family:'Averta CY',sans-serif; color:var(--ink); font-weight:700; }
.hiw em { font-style:normal; }
.hiw-c1 { --c:#6285FB; --c50:rgba(98,133,251,.5); --c8:rgba(98,133,251,.1); }
.hiw-c2 { --c:#98C355; --c50:rgba(152,195,85,.5); --c8:rgba(152,195,85,.14); }
.hiw-c3 { --c:#8A38F5; --c50:rgba(138,56,245,.5); --c8:rgba(138,56,245,.08); }
.hiw-c4 { --c:#FF7F27; --c50:rgba(255,127,39,.5); --c8:rgba(255,127,39,.1); }
.hiw-wrap { width:min(1200px, calc(100% - 48px)); margin-inline:auto; }
@media (min-width:1600px) { .hiw-wrap { width:min(1520px, calc(100% - 2 * clamp(24px,7vw,200px))); } }
.hiw-sec { padding:40px 0; }
.hiw-fold { min-height:calc(100vh - var(--hd)); display:flex; align-items:center; }
.hiw-fold > .hiw-wrap { flex:0 0 auto; }
.hiw-eyebrow { display:inline-block; font:700 13px/1.4 'Plus Jakarta Sans',sans-serif; letter-spacing:.06em; text-transform:uppercase; color:var(--peri); background:rgba(98,133,251,.08); border-radius:100px; padding:6px 14px; }
.hiw-h1 { font-size:var(--h1); line-height:1.12; letter-spacing:-1.2px; margin:16px 0 20px !important; }
.hiw-h1 em, .hiw-h2 em { color:var(--peri); }
.hiw-h2 { font-size:var(--h2); line-height:1.15; letter-spacing:-1px; }
.hiw-lead { font-size:18px; max-width:52ch; }
@media (min-width:1920px) { .hiw-lead { font-size:20px; } }
.hiw-head { text-align:center; display:flex; flex-direction:column; align-items:center; gap:14px; }
.hiw-sub { max-width:60ch; }
/* hero */
.hiw-hero { padding:16px 0 24px; }
.hiw-hero__grid { display:grid; grid-template-columns:minmax(0,480px) 1fr; gap:40px; align-items:center; }
@media (min-width:1600px) { .hiw-hero__grid { grid-template-columns:minmax(0,600px) 1fr; gap:64px; } }
.hiw-hero__art img { width:100%; max-height:calc(100vh - var(--hd) - 40px); object-fit:contain; }
.hiw-tiles { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:28px !important; }
.hiw-tile { border-radius:16px; padding:14px 14px 12px; }
.hiw-tile img { width:26px; height:26px; margin-bottom:10px; }
.hiw-tile b { display:block; font-size:14px; line-height:1.3; color:var(--ink); }
.hiw-tile small { display:block; font-size:12.5px; line-height:1.4; color:var(--muted); margin-top:4px; }
.hiw-t--b { background:rgba(33,158,252,.08); } .hiw-t--g { background:rgba(31,171,61,.08); }
.hiw-t--p { background:rgba(138,56,245,.08); } .hiw-t--o { background:rgba(255,127,39,.08); }
/* steps */
.hiw-steps { padding:20px 0; }
.hiw-steps__grid { display:grid; grid-template-columns:repeat(4,1fr); gap:32px; margin-top:32px !important; }
.hiw-step { position:relative; background:#fff; border:1px solid var(--c50); border-radius:28px; padding:24px 28px 26px; }
.hiw-step img { width:56px; height:56px; margin-bottom:14px; }
.hiw-step__n { font-size:14px; font-weight:700; color:var(--c); letter-spacing:.04em; }
.hiw-step h3 { font-size:20px; line-height:1.3; margin:2px 0 6px; min-height:2.6em; }
.hiw-step p { font-size:15px; line-height:1.6; }
.hiw-step:not(:last-child)::after { content:""; position:absolute; right:-26px; top:50%; width:20px; height:2px; background:var(--hair); }
.hiw-band { margin:28px auto 0; max-width:820px; display:flex; align-items:center; justify-content:space-between; gap:24px; background:rgba(98,133,251,.08); border-left:4px solid var(--peri); border-radius:0 20px 20px 0; padding:18px 18px 18px 28px; }
.hiw-band p { font-size:18px; font-weight:700; color:var(--ink); line-height:1.4; }
/* buttons */
.hiw-btn { display:inline-flex; align-items:center; gap:10px; border-radius:100px; font-weight:700; font-size:15px; line-height:1.4; padding:14px 28px; white-space:nowrap; text-decoration:none; transition:filter .2s, transform .2s; }
.hiw-btn:hover, .hiw-btn:focus-visible { text-decoration:none; filter:brightness(.93); transform:translateY(-1px); }
.hiw-btn--dark { background:var(--ink); color:#fff; } .hiw-btn--dark:hover { color:#fff; }
.hiw-btn--green { background:#58AE6A; color:#fff; font-family:'Plus Jakarta Sans',sans-serif; } .hiw-btn--green:hover { color:#fff; }
.hiw-btn--line { background:#fff; color:var(--ink); border:1px solid var(--hair); } .hiw-btn--line:hover { color:var(--ink); }
/* stories */
.hiw-story__grid { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
.hiw-story--flip .hiw-story__media { order:2; }
.hiw-story__media { background:var(--panel); border-radius:32px; height:min(460px, calc(100vh - var(--hd) - 96px)); display:flex; align-items:center; justify-content:center; padding:32px; overflow:hidden; }
.hiw-story__media img { max-height:100%; width:auto; object-fit:contain; }
.hiw-story__media--4 { padding:0; }
.hiw-story__media--4 img { width:100%; height:100%; object-fit:cover; }
.hiw-story__text { max-width:68ch; }
.hiw-pill { display:inline-flex; align-items:center; gap:10px; border-radius:100px; padding:4px 18px 4px 4px; background:var(--c8); font:700 15px/1.4 'Plus Jakarta Sans',sans-serif; color:var(--ink); }
.hiw-pill i { font-style:normal; width:32px; height:32px; border-radius:50%; background:var(--c); color:#fff; display:grid; place-items:center; font-size:13px; }
.hiw-story .hiw-h2 { margin:18px 0 20px; }
.hiw-story .hiw-h2 em { color:var(--c); }
.hiw-story p + p { margin-top:20px; }
.hiw-callout { border-left:3px solid var(--c); padding:12px 18px; border-radius:0 12px 12px 0; color:var(--ink); font-weight:700; }
/* system overview */
.hiw-sys { background:linear-gradient(#F7F8FC,#fff); border-radius:40px; margin:0 16px; }
.hiw-flow { display:grid; grid-template-columns:repeat(6,1fr); gap:20px; margin-top:32px !important; }
.hiw-sys { padding:24px 0; }
.hiw-node { position:relative; background:#fff; border:1px solid var(--hair); border-radius:24px; padding:20px 14px 22px; text-align:center; }
.hiw-node img { width:110px; height:110px; object-fit:contain; margin:0 auto 12px; }
.hiw-node i { font-style:normal; display:inline-grid; place-items:center; width:28px; height:28px; border-radius:50%; background:rgba(98,133,251,.12); color:var(--peri); font-weight:700; font-size:13px; }
.hiw-node h3 { font-size:17px; margin:8px 0 4px; }
.hiw-node p { font-size:14px; line-height:1.5; }
.hiw-node:not(:last-child)::after { content:"→"; position:absolute; right:-17px; top:62px; color:var(--peri); font-weight:700; }
/* report CTA */
.hiw-cta { padding:20px 0; }
.hiw-cta__box { background:rgba(31,171,61,.08); border-radius:40px; padding:36px 56px; display:grid; grid-template-columns:1.15fr .85fr; gap:40px; align-items:center; }
.hiw-cta .hiw-h2 { font-size:clamp(30px,2.4vw,42px); margin-bottom:18px; }
.hiw-cta .hiw-h2 em { color:var(--green); }
.hiw-feat { display:flex; flex-wrap:wrap; gap:28px; margin:20px 0 24px !important; }
.hiw-feat li { display:flex; align-items:center; gap:10px; font-weight:700; color:var(--ink); font-size:15px; line-height:1.3; }
.hiw-feat img { width:44px; height:44px; border-radius:50%; }
.hiw-cta__btns { display:flex; flex-wrap:wrap; gap:12px; }
.hiw-small { font-size:13px; color:var(--muted); margin-top:12px !important; }
.hiw-cta__art { position:relative; display:flex; justify-content:center; }
.hiw .hiw-cta__tab { height:min(440px, calc(100vh - var(--hd) - 120px)); width:auto !important; filter:drop-shadow(0 24px 40px rgba(13,23,88,.15)); }
.hiw-hc { position:absolute; top:-10px; right:-20px; width:260px; background:#fff; border:1px solid #FF7F27; border-radius:20px; padding:14px 16px; font-size:14px; line-height:1.5; }
.hiw-hc b { display:flex; align-items:center; gap:10px; color:var(--ink); font-size:15px; margin-bottom:6px; }
.hiw-hc b img { width:36px; height:36px; border-radius:50%; }
.hiw-hc em { font-weight:700; color:#FF7F27; }
/* 1920 */
@media (min-width:1600px) {
  .hiw-tile b { font-size:16px; } .hiw-tile small { font-size:14px; }
  .hiw-step h3 { font-size:24px; } .hiw-step p { font-size:17px; } .hiw-step img { width:64px; height:64px; }
  .hiw-node img { width:140px; height:140px; } .hiw-node h3 { font-size:20px; } .hiw-node p { font-size:16px; }
  .hiw-band { max-width:960px; } .hiw-band p { font-size:20px; }
  .hiw-story__media { height:min(560px, calc(100vh - var(--hd) - 120px)); }
  .hiw-btn { font-size:17px; padding:16px 32px; }
}
/* tablet / mobile */
@media (max-width:1199px) {
  .hiw-steps__grid { grid-template-columns:repeat(2,1fr); }
  .hiw-step:not(:last-child)::after { display:none; }
  .hiw-flow { grid-template-columns:repeat(3,1fr); }
  .hiw-node::after { display:none; }
}
@media (max-width:991px) {
  .hiw-fold { min-height:0; display:block; }
  .hiw-sec { padding:40px 0; }
  .hiw-hero__grid, .hiw-story__grid, .hiw-cta__box { grid-template-columns:1fr; gap:28px; }
  .hiw-story--flip .hiw-story__media { order:0; }
  .hiw-story__media { height:auto; aspect-ratio:4/3; }
  .hiw-hero__art img { max-height:none; }
  .hiw-cta__box { padding:32px 24px; }
  .hiw-hc { right:0; }
}
@media (max-width:767px) {
  .hiw-wrap { width:calc(100% - 40px); }
  .hiw-tiles { grid-template-columns:repeat(2,1fr); }
  .hiw-steps__grid { grid-template-columns:1fr; gap:16px; }
  .hiw-flow { grid-template-columns:repeat(2,1fr); gap:12px; }
  .hiw-band { flex-direction:column; align-items:flex-start; padding:18px 20px; }
  .hiw-story .hiw-h2 { margin:14px 0 14px; }
  .hiw-sys { margin:0 8px; border-radius:28px; }
  .hiw-cta__box { border-radius:28px; }
  .hiw .hiw .hiw-cta__tab { height:auto; width:70% !important; margin-top:70px; }
  .hiw-hc { top:0; left:0; right:auto; width:100%; max-width:300px; }
  .hiw-feat { gap:16px; }
  .hiw-btn { white-space:normal; }
}

/* ===== Variant toggles (preview only): ?v=a Tightened, ?v=b Tightened + brand palette ===== */
/* A: natural heights, section gap = reference pages (Hanna 80px, How It Installs 6.25vw = 85px at 1366) */
.hiw--a .hiw-fold { min-height:0; display:block; }
.hiw--a .hiw-sec { padding:0; margin-top:clamp(56px,6.25vw,120px); }
.hiw--a .hiw-hero { margin-top:0; padding:24px 0 0; }
.hiw--a .hiw-story__media { height:min(440px, 34vw); }
.hiw--a .hiw-sys { padding:56px 0; }
.hiw--a .hiw-cta { margin-bottom:clamp(56px,6.25vw,120px); }
@media (max-width:767px) { .hiw--a .hiw-sec { margin-top:48px; } .hiw--a .hiw-story__media { height:auto; } }
/* B: brand palette only (navy, green #1FAB3D, periwinkle #6285FB, sky #219EFC, orange as used on Hanna / How It Installs) */
.hiw--b .hiw-c1 { --c:#6285FB; --c50:rgba(98,133,251,.5); --c8:rgba(98,133,251,.1); }
.hiw--b .hiw-c2 { --c:#1FAB3D; --c50:rgba(31,171,61,.5); --c8:rgba(31,171,61,.1); }
.hiw--b .hiw-c3 { --c:#219EFC; --c50:rgba(33,158,252,.5); --c8:rgba(33,158,252,.1); }
.hiw--b .hiw-c4 { --c:#FF7F27; --c50:rgba(255,127,39,.5); --c8:rgba(255,127,39,.1); }
.hiw--b .hiw-t--b { background:rgba(33,158,252,.08); }
.hiw--b .hiw-t--g { background:rgba(31,171,61,.08); }
.hiw--b .hiw-t--p { background:rgba(98,133,251,.08); }
.hiw--b .hiw-t--o { background:rgba(255,127,39,.08); }
.hiw--b .hiw-h2 em { color:var(--peri); }
.hiw--b .hiw-story .hiw-h2 em { color:var(--c); }
.hiw--b .hiw-step__n { color:var(--c); }
/* bands like the references: white sections, occasional #F7F8FC rounded band (HII "After deployment"), green-tint report CTA (Hanna) */
.hiw--b .hiw-steps { background:#F7F8FC; border-radius:40px; margin-inline:16px; padding:56px 0; }
.hiw--b .hiw-sys { background:#F7F8FC; }
.hiw--b .hiw-story__media { background:#F7F8FC; }
.hiw--b .hiw-eyebrow { background:rgba(98,133,251,.1); color:#6285FB; }
.hiw--b .hiw-node i { background:rgba(98,133,251,.12); color:#6285FB; }

/* One-viewport fit at 1366x650 below the 72px header (1200-1599px wide only; QA 2026-10-14). */
@media (min-width:1200px) and (max-width:1599px) {
	main .hiw-sec.hiw-steps, main .hiw-sec.hiw-sys { padding-top:16px; padding-bottom:16px; }
}