/* SAL Marketing Group landing page kit
   Colours, spacing and type from data/brand/brand-guidelines.md.
   Jost stands in for ITC Avant Garde Gothic until the font files exist. */

:root {
  --sal-navy: #002B5C;
  --sal-navy-deep: #001C3F;
  --sal-teal: #00CEB8;
  --sal-blue: #0061B8;
  --sal-white: #FFFFFF;
  --ink: #0B1B33;
  --muted: rgba(11,27,51,0.62);
  --line: rgba(0,43,92,0.12);
  --surface: #F4F7FB;
  --font-brand: "ITC Avant Garde Gothic", "Jost", sans-serif;
  --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px;
  --space-xl: 48px; --space-2xl: 80px; --space-3xl: 120px;
  --content-width: 1200px; --text-width: 680px; --page-padding: 24px;
  --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px; --radius-pill: 999px;
  --shadow-subtle: 0 1px 3px rgba(0,0,0,0.08);
  --header-h: 72px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  margin: 0; font-family: var(--font-brand); color: var(--ink); background: var(--sal-white);
  line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: clip;
}
img, svg, video { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3, p { margin: 0; }

.wrap { max-width: var(--content-width); margin: 0 auto; padding: 0 var(--page-padding); }
.wrap-text { max-width: var(--text-width); margin: 0 auto; }
.sec { padding: var(--space-2xl) 0; }
@media (min-width: 900px) { .sec { padding: var(--space-3xl) 0; } }
.dark { background: var(--sal-navy); color: var(--sal-white); }
.dark .muted { color: rgba(255,255,255,0.72); }
.light { background: var(--sal-white); color: var(--ink); }
.light .muted { color: var(--muted); }
.surface { background: var(--surface); }

/* Type. Light headline, one bold phrase, no extra colours. */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--sal-teal); margin-bottom: var(--space-md);
}
.eyebrow::before { content: ""; width: 22px; height: 1px; background: currentColor; }
h1 { font-size: clamp(40px, 7.2vw, 88px); font-weight: 300; line-height: 1.02; letter-spacing: -0.03em; }
h1 strong, h2 strong { font-weight: 600; }
h2 { font-size: clamp(32px, 4.8vw, 56px); font-weight: 300; line-height: 1.06; letter-spacing: -0.025em; }
h3 { font-size: 22px; font-weight: 500; line-height: 1.25; }
.lead { font-size: clamp(17px, 1.6vw, 20px); line-height: 1.6; }
.sec-head { max-width: 720px; margin-bottom: var(--space-xl); }
.sec-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.sec-head .lead { margin-top: var(--space-md); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 10px; padding: 16px 26px; border-radius: var(--radius-pill);
  font-weight: 600; font-size: 16px; text-decoration: none; border: 1px solid transparent; cursor: pointer;
  transition: transform .15s ease, background .15s ease, box-shadow .15s ease, color .15s ease; white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn svg { width: 16px; height: 16px; }
.btn-teal { background: var(--sal-teal); color: var(--sal-navy); }
.btn-teal:hover { box-shadow: 0 10px 28px rgba(0,206,184,0.35); }
.btn-ghost { background: transparent; border-color: rgba(255,255,255,0.28); color: var(--sal-white); }
.btn-ghost:hover { background: rgba(255,255,255,0.08); }
.btn-navy { background: var(--sal-navy); color: var(--sal-white); }
.btn-sm { padding: 11px 18px; font-size: 14px; }

/* Header */
.header {
  position: sticky; top: 0; z-index: 50; background: var(--sal-navy); color: var(--sal-white);
  border-bottom: 1px solid rgba(255,255,255,0.08); height: var(--header-h); display: flex; align-items: center;
}
.header .wrap { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.logo img { height: 40px; width: auto; }
.header-cta { display: inline-flex; padding: 10px 14px; font-size: 13px; }
.header-cta .cta-long { display: none; }
@media (min-width: 640px) { .header-cta { padding: 11px 18px; font-size: 14px; } .header-cta .cta-long { display: inline; } .header-cta .cta-short { display: none; } .logo img { height: 46px; } }

/* Hero */
.hero { position: relative; overflow: hidden; padding: 32px 0 var(--space-2xl); }
@media (min-width: 900px) { .hero { padding: 64px 0 var(--space-2xl); } }
.hero-grid { display: grid; gap: var(--space-xl); align-items: center; }
@media (min-width: 900px) { .hero-grid { grid-template-columns: 1fr 1fr; gap: var(--space-xl); } }
.pill {
  display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; border-radius: var(--radius-pill);
  border: 1px solid rgba(255,255,255,0.16); background: rgba(255,255,255,0.06); font-size: 13px; color: rgba(255,255,255,0.85);
  margin-bottom: var(--space-lg);
}
.pill b { background: var(--sal-teal); color: var(--sal-navy); border-radius: var(--radius-pill); padding: 3px 9px; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.hero h1 { margin-bottom: var(--space-lg); }
.swap { display: inline-block; position: relative; overflow: hidden; vertical-align: bottom; line-height: 1.08; }
.swap-word { display: inline-block; font-weight: 600; color: var(--sal-white); will-change: transform; }
.swap-word.out { animation: swapOut .32s cubic-bezier(.4,0,.8,.4) forwards; }
.swap-word.in { animation: swapIn .5s cubic-bezier(.2,.7,.2,1) forwards; }
@keyframes swapOut { from { transform: translateY(0); opacity: 1; } to { transform: translateY(105%); opacity: 0; } }
@keyframes swapIn { from { transform: translateY(-105%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.hero .lead { max-width: 560px; color: rgba(255,255,255,0.78); margin-bottom: var(--space-lg); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: var(--space-lg); }
.trust-row { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 14px; color: rgba(255,255,255,0.75); }
.trust-row span { display: inline-flex; align-items: center; gap: 8px; }
.trust-row svg { width: 15px; height: 15px; color: var(--sal-teal); }

.video-frame {
  position: relative; border-radius: var(--radius-lg); overflow: hidden; background: var(--sal-navy-deep);
  box-shadow: 0 30px 70px rgba(0,0,0,0.35); aspect-ratio: 16 / 9; width: 100%; margin: 0 auto;
}
@media (min-width: 900px) { .video-frame { margin-right: 0; } }
.video-frame img { width: 100%; height: 100%; object-fit: cover; }
.video-frame video { width: 100%; height: 100%; object-fit: cover; }
.video-play {
  position: absolute; inset: 0; margin: auto; width: 72px; height: 72px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--sal-teal); display: grid; place-items: center; box-shadow: 0 10px 30px rgba(0,0,0,0.35); transition: transform .2s;
}
.video-play:hover { transform: scale(1.06); }
.video-play::after { content: ""; border-style: solid; border-width: 12px 0 12px 20px; border-color: transparent transparent transparent var(--sal-navy); margin-left: 5px; }
.video-tag { position: absolute; left: 16px; top: 16px; background: rgba(255,255,255,0.92); color: var(--sal-navy); border-radius: var(--radius-pill); padding: 6px 12px; font-size: 12px; font-weight: 600; }

/* Stat bar */
.stats { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
@media (min-width: 900px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat { padding: 32px 20px; text-align: center; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stat:nth-child(2n) { border-right: none; }
@media (min-width: 900px) { .stat { border-bottom: none; } .stat:nth-child(2n) { border-right: 1px solid var(--line); } .stat:last-child { border-right: none; } }
.stat-num { font-size: clamp(30px, 4vw, 42px); font-weight: 500; letter-spacing: -0.03em; color: var(--sal-navy); line-height: 1; margin-bottom: 8px; }
.stat-label { font-size: 13px; color: var(--muted); }

/* Services wheel */
.wheel-wrap { --size: min(560px, 88vw); position: relative; display: grid; gap: var(--space-lg); }
.wheel { position: relative; width: var(--size); height: var(--size); margin: 0 auto; }
.ring { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(255,255,255,0.16); }
.ring::before { content: ""; position: absolute; inset: 18%; border-radius: 50%; border: 1px dashed rgba(255,255,255,0.10); }
.orbit { position: absolute; inset: 0; animation: spin 70s linear infinite; }
.node-spin { animation: spin 70s linear infinite reverse; display: flex; flex-direction: column; align-items: center; gap: 8px; width: 120px; }
.wheel.paused .orbit, .wheel.paused .node-spin, .wheel:hover .orbit, .wheel:hover .node-spin { animation-play-state: paused; }
.node { position: absolute; top: 50%; left: 50%; width: 0; height: 0; transform: rotate(var(--a)) translateY(calc(var(--size) * -0.44)); }
.node-fix { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%) rotate(calc(-1 * var(--a))); }
.node-btn {
  width: 60px; height: 60px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.35); background: rgba(0,43,92,0.9);
  display: grid; place-items: center; cursor: pointer; transition: background .2s, border-color .2s, transform .2s, box-shadow .2s;
}
.node-btn svg { width: 22px; height: 22px; stroke: var(--sal-white); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.node-btn:hover, .node.active .node-btn { background: var(--sal-white); border-color: var(--sal-white); transform: scale(1.06); box-shadow: 0 0 0 8px rgba(255,255,255,0.08); }
.node-btn:hover svg, .node.active .node-btn svg { stroke: var(--sal-navy); }
.node-label { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; text-align: center; color: rgba(255,255,255,0.85); line-height: 1.3; }
.hub {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 92px; height: 92px; border-radius: 50%;
  background: var(--sal-white); border: none; cursor: pointer; display: grid; place-items: center; box-shadow: 0 0 0 14px rgba(255,255,255,0.06), 0 20px 50px rgba(0,0,0,0.35);
  transition: transform .2s;
}
.hub:hover { transform: translate(-50%, -50%) scale(1.05); }
.hub svg { width: 34px; height: 34px; stroke: var(--sal-navy); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.hub-label { position: absolute; left: 50%; top: calc(50% + 60px); transform: translateX(-50%); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.7); white-space: nowrap; }
.wheel-hint { text-align: center; font-size: 13px; color: rgba(255,255,255,0.55); }
.wheel-card {
  display: none; background: var(--sal-white); color: var(--ink); border-radius: var(--radius-lg); padding: 24px; width: 100%;
  box-shadow: 0 30px 70px rgba(0,0,0,0.45); position: relative;
}
.wheel-card.open { display: block; }
.wheel-card .tag { display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sal-blue); border: 1px solid rgba(0,97,184,0.3); border-radius: var(--radius-pill); padding: 4px 10px; margin-bottom: 12px; }
.wheel-card h3 { margin-bottom: 8px; }
.wheel-card p { font-size: 15px; color: var(--muted); }
.wheel-card .pairs { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.wheel-card .pairs span { display: inline-block; font-size: 12px; border: 1px solid var(--line); border-radius: var(--radius-pill); padding: 5px 10px; margin: 6px 6px 0 0; }
.wheel-card .pairs small { display: block; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.wheel-close { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line); background: var(--sal-white); cursor: pointer; font-size: 18px; line-height: 1; }
@media (min-width: 900px) {
  .wheel-card { position: absolute; left: 50%; top: calc(var(--size) / 2); transform: translate(-50%, -50%); width: 340px; z-index: 5; }
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Results */
.results { display: grid; gap: var(--space-lg); }
.result {
  position: relative; display: grid; gap: var(--space-lg); padding: var(--space-xl) var(--space-lg); border: 1px solid var(--line);
  border-radius: var(--radius-lg); background: var(--sal-white); overflow: hidden;
}
@media (min-width: 900px) { .result { grid-template-columns: 1fr 1.3fr; padding: var(--space-xl); } }
.result-ghost { position: absolute; right: 16px; bottom: -22px; font-size: 160px; font-weight: 600; letter-spacing: -0.06em; color: rgba(0,43,92,0.05); line-height: 1; pointer-events: none; }
.result-biz { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sal-blue); font-weight: 600; margin-bottom: 12px; }
.result-num { font-size: clamp(44px, 6vw, 72px); font-weight: 500; letter-spacing: -0.04em; line-height: 1; color: var(--sal-navy); }
.result-sub { font-size: 14px; color: var(--muted); margin-top: 6px; }
.result-desc { font-size: 16px; color: var(--ink); margin-bottom: var(--space-md); }
.result-stats { display: flex; flex-wrap: wrap; gap: 24px 36px; padding-top: var(--space-md); border-top: 1px solid var(--line); }
.result-stats div { font-size: 22px; font-weight: 500; color: var(--sal-navy); letter-spacing: -0.02em; }
.result-stats small { display: block; font-size: 12px; color: var(--muted); font-weight: 400; letter-spacing: 0; margin-top: 2px; }
.result-source { font-size: 12px; color: var(--muted); margin-top: var(--space-md); }

/* Statement */
.statement h2 { font-size: clamp(26px, 3.4vw, 40px); font-weight: 300; max-width: 900px; margin: 0 auto; text-align: center; }
.statement mark { background: none; color: var(--sal-white); font-weight: 600; box-shadow: inset 0 -0.35em 0 var(--sal-teal); padding: 0 2px; }
.statement mark { color: var(--sal-navy); }

/* Reviews */
.reviews { display: grid; gap: var(--space-md); }
@media (min-width: 900px) { .reviews { grid-template-columns: repeat(3, 1fr); align-items: start; } }
.review { background: var(--sal-white); color: var(--ink); border-radius: var(--radius-lg); padding: 28px; border: 1px solid var(--line); }
.review-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--sal-navy); color: var(--sal-white); display: grid; place-items: center; font-weight: 600; }
.review-name { font-weight: 600; font-size: 15px; }
.review-role { font-size: 12px; color: var(--muted); }
.stars { color: #F5B400; font-size: 14px; letter-spacing: 2px; margin-bottom: 10px; }
.review p { font-size: 15px; color: var(--ink); margin-bottom: 10px; }
.review-src { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 6px; margin-top: 14px; }
.review-more { display: none; }
.review.expanded .review-more { display: block; }
.review-toggle { background: none; border: none; padding: 0; color: var(--sal-blue); font-size: 14px; font-weight: 600; cursor: pointer; }
.google-badge { display: inline-flex; align-items: center; gap: 10px; border: 1px solid rgba(255,255,255,0.2); border-radius: var(--radius-pill); padding: 8px 14px; font-size: 13px; margin-top: var(--space-md); }

/* Process (sticky) */
.process { display: grid; gap: var(--space-xl); }
@media (min-width: 900px) { .process { grid-template-columns: 1fr 1fr; gap: var(--space-2xl); align-items: start; } }
.stages { display: grid; gap: 0; }
.stage { padding: var(--space-xl) 0; border-top: 1px solid var(--line); }
@media (min-width: 900px) { .stage { min-height: 62vh; display: flex; flex-direction: column; justify-content: center; } }
.stage-num { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.stage-num b { font-size: 44px; font-weight: 300; letter-spacing: -0.03em; color: var(--sal-navy); display: block; line-height: 1; margin-bottom: 8px; }
.stage h3 { font-size: 26px; font-weight: 400; margin-bottom: 12px; }
.stage p { color: var(--muted); font-size: 16px; max-width: 480px; }
.stage-panel { display: none; }
@media (min-width: 900px) {
  .stage-panel { display: block; position: sticky; top: calc(var(--header-h) + 32px); }
  .panel-card { background: var(--sal-navy); color: var(--sal-white); border-radius: var(--radius-lg); aspect-ratio: 4 / 4.4; position: relative; overflow: hidden; padding: 28px; display: flex; flex-direction: column; justify-content: space-between; }
  .panel-card .ptag { align-self: flex-start; background: var(--sal-white); color: var(--sal-navy); border-radius: var(--radius-pill); padding: 6px 12px; font-size: 12px; font-weight: 600; transition: opacity .3s; }
  .panel-card .pnum { font-size: 220px; font-weight: 300; letter-spacing: -0.06em; line-height: 0.85; color: rgba(255,255,255,0.08); position: absolute; right: 12px; bottom: -8px; transition: opacity .3s; }
  .panel-card .picon { width: 64px; height: 64px; }
  .panel-card .picon svg { width: 64px; height: 64px; stroke: var(--sal-teal); fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
  .panel-card .pline { font-size: 22px; font-weight: 300; max-width: 320px; line-height: 1.3; }
  .panel-card .pline strong { font-weight: 600; }
  .panel-dots { display: flex; gap: 8px; margin-top: 16px; }
  .panel-dots i { width: 28px; height: 3px; border-radius: 2px; background: var(--line); transition: background .3s; }
  .panel-dots i.on { background: var(--sal-teal); }
}

/* Commitments */
.pillars { display: grid; gap: var(--space-md); }
@media (min-width: 900px) { .pillars { grid-template-columns: repeat(3, 1fr); } }
.pillar { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 28px; background: var(--sal-white); }
.pillar-k { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sal-blue); font-weight: 600; margin-bottom: 10px; }
.pillar h3 { margin-bottom: 10px; }
.pillar p { font-size: 15px; color: var(--muted); }

/* FAQ */
.faq { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q { width: 100%; text-align: left; background: none; border: none; padding: 22px 0; font-size: 18px; font-weight: 500; display: flex; justify-content: space-between; align-items: center; gap: 16px; cursor: pointer; }
.faq-q svg { width: 18px; height: 18px; flex-shrink: 0; transition: transform .25s; stroke: var(--sal-navy); fill: none; stroke-width: 2; }
.faq-item.open .faq-q svg { transform: rotate(45deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.faq-a p { padding: 0 0 22px; color: var(--muted); font-size: 16px; max-width: 720px; }

/* Multi-step form */
.form-shell { background: var(--sal-white); color: var(--ink); border-radius: var(--radius-lg); padding: 24px; max-width: 880px; margin: 0 auto; box-shadow: 0 30px 80px rgba(0,0,0,0.35); }
@media (min-width: 900px) { .form-shell { padding: 40px 48px; } }
.form-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 20px; font-size: 13px; color: var(--muted); margin-bottom: 14px; }
.form-top span { display: inline-flex; align-items: center; gap: 6px; }
.form-top svg { width: 14px; height: 14px; color: var(--sal-teal); }
.progress { height: 3px; background: var(--line); border-radius: 2px; overflow: hidden; margin-bottom: var(--space-xl); }
.progress i { display: block; height: 100%; width: 20%; background: var(--sal-teal); transition: width .4s ease; }
.step { display: none; }
.step.active { display: block; animation: stepIn .35s ease; }
@keyframes stepIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.step-label { text-align: center; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; display: flex; align-items: center; justify-content: center; gap: 12px; }
.step-label::before, .step-label::after { content: ""; width: 28px; height: 1px; background: var(--line); }
.step h3 { text-align: center; font-size: clamp(24px, 3vw, 34px); font-weight: 300; margin-bottom: var(--space-lg); }
.step h3 strong { font-weight: 600; }
.tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 640px) { .tiles { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .tiles.cols-4 { grid-template-columns: repeat(4, 1fr); } .tiles.cols-5 { grid-template-columns: repeat(5, 1fr); } }
.tile {
  border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--sal-white); padding: 22px 12px 18px; text-align: center; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 12px; transition: border-color .15s, box-shadow .15s, transform .15s, background .15s; position: relative;
}
.tile svg { width: 44px; height: 44px; stroke: var(--sal-navy); fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.tile span { font-size: 14px; line-height: 1.3; }
.tile:hover { border-color: var(--sal-navy); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,43,92,0.08); }
.tile.selected { border-color: var(--sal-navy); background: var(--surface); box-shadow: inset 0 0 0 1px var(--sal-navy); }
.tile.selected::after { content: ""; position: absolute; top: 10px; right: 10px; width: 18px; height: 18px; border-radius: 50%; background: var(--sal-teal); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23002B5C' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E"); background-size: 11px; background-repeat: no-repeat; background-position: center; }
.step-nav { display: flex; justify-content: space-between; align-items: center; margin-top: var(--space-lg); gap: 12px; }
.back { background: none; border: none; color: var(--muted); font-size: 14px; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; padding: 8px 0; }
.back svg { width: 16px; height: 16px; }
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: var(--space-lg); }
.chips span { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius-pill); padding: 6px 12px; }
.chips svg { width: 12px; height: 12px; color: var(--sal-teal); }
.fields { display: grid; gap: 16px; }
@media (min-width: 640px) { .fields { grid-template-columns: 1fr 1fr; } .fields .full { grid-column: 1 / -1; } }
.field label { display: block; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.field input, .field textarea { width: 100%; font: inherit; font-size: 16px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--sal-white); color: var(--ink); outline: none; transition: border-color .15s, box-shadow .15s; }
.field input:focus, .field textarea:focus { border-color: var(--sal-navy); box-shadow: 0 0 0 3px rgba(0,206,184,0.25); }
.field textarea { min-height: 96px; resize: vertical; }
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }
.submit-row { text-align: center; margin-top: var(--space-lg); }
.submit-row .btn { width: 100%; justify-content: center; }
@media (min-width: 640px) { .submit-row .btn { width: auto; } }
.fine { font-size: 12px; color: var(--muted); margin-top: 10px; text-align: center; }
.form-error { display: none; background: #FFF4F4; border: 1px solid #F0C4C4; color: #8A1F1F; border-radius: var(--radius-md); padding: 12px 14px; font-size: 14px; margin-top: 12px; }
.form-error.show { display: block; }
.btn[disabled] { opacity: 0.6; cursor: wait; transform: none; }

/* Footer */
.footer { background: var(--sal-navy); border-top: 1px solid rgba(255,255,255,0.08); color: rgba(255,255,255,0.7); padding: var(--space-xl) 0 calc(var(--space-xl) + 70px); font-size: 13px; }
@media (min-width: 640px) { .footer { padding-bottom: var(--space-xl); } }
.footer .wrap { display: grid; gap: 16px; }
.footer img { height: 36px; width: auto; }
.footer p { max-width: 720px; }

/* Sticky mobile CTA */
.sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; padding: 8px 16px calc(8px + env(safe-area-inset-bottom)); background: var(--sal-navy); border-top: 1px solid rgba(255,255,255,0.1); transform: translateY(110%); transition: transform .3s; }
.sticky-cta.on { transform: none; }
.sticky-cta .btn { width: 100%; justify-content: center; padding: 12px 18px; font-size: 14px; }
@media (min-width: 640px) { .sticky-cta { display: none; } }

/* Scroll reveal */
.r { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.r.d1 { transition-delay: .1s; } .r.d2 { transition-delay: .2s; } .r.d3 { transition-delay: .3s; }
.r.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .r { opacity: 1; transform: none; transition: none; }
  .orbit, .node-spin { animation: none; }
  .swap-word.out, .swap-word.in { animation: none; }
  html { scroll-behavior: auto; }
}

/* ---------------------------------------------------------------------------
   Buetec Electrical overrides (2026-09-23).
   The kit's structural CSS above is untouched. This block re-points the colour
   and type tokens to Buetec's own brand (orange/black/Barlow Condensed, taken
   from the existing perth. landing page) and adds the components this page uses
   that SAL's page does not: the split photo hero, the work gallery and the
   founder card. One accent colour only, per the vault's King Kong note.
--------------------------------------------------------------------------- */
:root {
  --bt-orange: #F93D01;
  --bt-orange-dark: #D13401;
  --bt-orange-soft: rgba(249,61,1,0.08);
  --bt-black: #0D0D0D;
  --bt-black-2: #1c1712;

  --sal-navy: #0D0D0D;
  --sal-navy-deep: #000000;
  --sal-teal: #F93D01;
  --sal-blue: #D13401;
  --ink: #17140f;
  --muted: rgba(23,20,15,0.62);
  --line: #e7e2d6;
  --surface: #f7f4ee;
  --font-brand: "Inter", "Inter Fallback A", "Inter Fallback R", system-ui, sans-serif;
  --font-head: "Barlow Condensed", "Barlow Condensed Fallback A", "Barlow Condensed Fallback R", "Inter", sans-serif;
}
h1, h2, .step h3, .stat-n { font-family: var(--font-head); text-transform: uppercase; letter-spacing: -0.01em; font-weight: 700; line-height: 1.02; }
.dark .muted { color: rgba(255,255,255,0.72); }
.tile svg { stroke: var(--bt-black); }
.tile.selected::after { background-color: var(--bt-orange); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E"); }
.field input:focus, .field textarea:focus { border-color: var(--bt-orange); box-shadow: 0 0 0 3px var(--bt-orange-soft); }

/* Split hero: photo one side, message panel the other (King Kong pattern 2). */


@media (min-width: 900px) {  }

@media (min-width: 900px) {  }
.bt-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-head); text-transform: uppercase; letter-spacing: 0.14em; font-size: 13px; font-weight: 600; color: var(--bt-orange); margin-bottom: 16px; }
.bt-eyebrow i { width: 7px; height: 7px; border-radius: 50%; background: var(--bt-orange); display: block; animation: btpulse 2s infinite; }
@keyframes btpulse { 0%,100% { opacity: 1; } 50% { opacity: .25; } }
.bt-hero h1 { font-size: clamp(34px, 6.2vw, 62px); margin-bottom: 18px; }
.bt-hero h1 em { font-style: normal; background: var(--bt-orange); color: #fff; padding: 0 .16em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.bt-hero-sub { color: rgba(255,255,255,0.78); font-size: 17px; max-width: 46ch; margin-bottom: 28px; }
.bt-cta-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.bt-call { display: inline-flex; align-items: center; gap: 12px; background: var(--bt-orange); color: #fff; text-decoration: none; border-radius: var(--radius-pill); padding: 16px 26px; font-weight: 700; font-size: 19px; box-shadow: 0 14px 30px -12px rgba(249,61,1,0.7); transition: transform .15s, box-shadow .15s; }
.bt-call:hover { transform: translateY(-2px); box-shadow: 0 18px 36px -12px rgba(249,61,1,0.8); }
.bt-call svg { width: 22px; height: 22px; fill: #fff; }
.bt-call small { display: block; font-size: 11px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; opacity: .85; }
.bt-or { color: #fff; font-size: 15px; text-decoration: underline; text-underline-offset: 4px; opacity: .85; }
.bt-trust { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 26px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,0.14); }
.bt-trust span { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: rgba(255,255,255,0.8); }
.bt-trust i { width: 5px; height: 5px; border-radius: 50%; background: var(--bt-orange); flex: 0 0 auto; }
/* Licence at half the H1 at every width (H1 clamp 34-62px). WA Building and Energy guideline: at least 50% of the largest lettering. */
.bt-trust span.bt-lic { font-size: clamp(17px, 3.1vw, 31px); font-weight: 700; color: #fff; flex-basis: 100%; }


@media (min-width: 900px) {  }

@media (min-width: 900px) {  }



/* Stat band */
.bt-stats { background: var(--bt-black-2); color: #fff; padding: 26px 0; }
.bt-stats .wrap { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px 12px; }
@media (min-width: 760px) { .bt-stats .wrap { grid-template-columns: repeat(4, 1fr); } }
.stat-n { font-size: 34px; color: var(--bt-orange); }
.bt-stats small { display: block; font-size: 12.5px; color: rgba(255,255,255,0.66); margin-top: 2px; }

/* Work gallery */
.gal { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 720px) { .gal { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .gal { grid-template-columns: repeat(4, 1fr); } }
.gal figure { margin: 0; border-radius: 10px; overflow: hidden; background: var(--surface); position: relative; }
.gal img { width: 100%; aspect-ratio: 3/4; object-fit: cover; display: block; transition: transform .3s ease; }
.gal figure.wide { grid-column: span 2; }
.gal figure.wide img { aspect-ratio: 3/2; }
.gal figure:hover img { transform: scale(1.04); }
.gal figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 12px 10px; font-size: 12.5px; line-height: 1.35; color: #fff; background: linear-gradient(to top, rgba(0,0,0,0.85), rgba(0,0,0,0)); }

/* Founder */
.bt-founder { display: grid; gap: 28px; align-items: center; }
@media (min-width: 860px) { .bt-founder { grid-template-columns: 0.85fr 1.15fr; gap: 56px; } }
.bt-founder-photo { position: relative; border-radius: 14px; overflow: hidden; aspect-ratio: 4/5; }
.bt-founder-photo img { width: 100%; height: 100%; object-fit: cover; }
.bt-founder-seal { position: absolute; right: -6px; bottom: 18px; background: var(--bt-orange); color: #fff; font-family: var(--font-head); text-transform: uppercase; font-size: 13px; letter-spacing: .06em; font-weight: 700; padding: 9px 16px; border-radius: var(--radius-pill); box-shadow: 0 10px 22px -10px rgba(0,0,0,.5); }
.bt-quote { font-family: var(--font-head); text-transform: none; font-size: clamp(24px, 3.4vw, 36px); line-height: 1.15; font-weight: 600; margin-bottom: 18px; }
.bt-quote em { font-style: normal; color: var(--bt-orange); }
.bt-sign { display: flex; align-items: center; gap: 12px; margin-top: 20px; }
.bt-sign img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; border: 2px solid var(--bt-orange); }
.bt-sign b { display: block; font-size: 15px; }
.bt-sign span { font-size: 13px; color: var(--muted); }
.form-shell .form-top span { color: var(--muted); }
.gal figure.wide img { aspect-ratio: 3/2; }
.sticky-cta { background: var(--bt-black); border-top: 1px solid rgba(255,255,255,0.12); }
.sticky-cta .ghost { color: #fff; border: 1.5px solid rgba(255,255,255,0.35); background: transparent; }
.sticky-cta .ghost:hover { border-color: var(--bt-orange); color: var(--bt-orange); }

/* ---------------------------------------------------------------------------
   2026-09-23 revision, after Chris's review:
   full-bleed hero photo under a black overlay, an even 4x4 work gallery,
   and the hover behaviour from the SAL page carried across.
--------------------------------------------------------------------------- */
.bt-hero { position: relative; background: var(--bt-black); color: #fff; display: flex; align-items: center; min-height: 560px; overflow: hidden; }
@media (min-width: 900px) { .bt-hero { min-height: 86vh; } }
.bt-hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 28% 18%; }
.bt-hero-scrim { position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(13,13,13,0.30) 0%, rgba(13,13,13,0.55) 34%, rgba(13,13,13,0.88) 55%, rgba(13,13,13,0.95) 100%),
              linear-gradient(to top, rgba(13,13,13,0.85) 0%, rgba(13,13,13,0) 45%); }
@media (max-width: 899px) { .bt-hero-scrim { background: linear-gradient(to bottom, rgba(13,13,13,0.62) 0%, rgba(13,13,13,0.86) 48%, rgba(13,13,13,0.96) 100%); } }
.bt-hero-inner { position: relative; z-index: 2; width: 100%; padding-top: 72px; padding-bottom: 56px; }
@media (min-width: 900px) { .bt-hero-inner { padding-top: 120px; padding-bottom: 104px; } }
.bt-hero-copy { max-width: 640px; }
@media (min-width: 900px) { .bt-hero-copy { margin-left: auto; } .bt-hero-inner { display: flex; justify-content: flex-end; } }
.bt-quote.nq { font-style: normal; }

/* Even gallery: four equal rows of four, one shared aspect ratio, no spans. */
.gal-4, .gal-3 { display: grid; gap: 14px; }
.gal-4 { grid-template-columns: repeat(2, 1fr); }
.gal-3 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 700px) { .gal-4 { grid-template-columns: repeat(3, 1fr); } .gal-3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .gal-4 { grid-template-columns: repeat(4, 1fr); } }
.gal figure { margin: 0; border-radius: 12px; overflow: hidden; position: relative; background: var(--bt-black); border: 1px solid transparent; transition: transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s, border-color .35s; }
.gal img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; transition: transform .5s cubic-bezier(.2,.7,.3,1), filter .35s; }

/* Hover, same idea as the SAL page: lift, zoom, accent edge, caption slides up. */
.gal figure::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(13,13,13,0.85) 0%, rgba(13,13,13,0) 55%); opacity: .85; transition: opacity .35s; }
.gal figure:hover { transform: translateY(-4px); border-color: var(--bt-orange); box-shadow: 0 18px 38px -18px rgba(0,0,0,0.65); }
.gal figure:hover img { transform: scale(1.07); filter: saturate(1.06); }
.gal figure:hover::after { opacity: 1; }
.gal figcaption { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 26px 14px 12px; font-size: 12.5px; line-height: 1.35; color: #fff;
  transform: translateY(6px); opacity: 0; transition: transform .35s cubic-bezier(.2,.7,.3,1), opacity .35s; }
.gal figure:hover figcaption { transform: translateY(0); opacity: 1; }
@media (hover: none) { .gal figcaption { opacity: 1; transform: none; } }

/* Same hover language on the rest of the page. */
.bt-call, .btn { transition: transform .2s cubic-bezier(.2,.7,.3,1), box-shadow .2s, background .2s, color .2s, border-color .2s; }
.review { transition: transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s, border-color .3s; }
.review:hover { transform: translateY(-3px); border-color: var(--bt-orange); box-shadow: 0 16px 34px -20px rgba(0,0,0,0.35); }
.tile:hover { border-color: var(--bt-orange); transform: translateY(-3px); box-shadow: 0 12px 26px -14px rgba(249,61,1,0.45); }
.tile:hover svg { stroke: var(--bt-orange); }
.tile svg { transition: stroke .2s; }
.bt-founder-photo img { transition: transform .6s cubic-bezier(.2,.7,.3,1); }
.bt-founder-photo:hover img { transform: scale(1.04); }
.faq-q { transition: color .2s; }
.faq-q:hover { color: var(--bt-orange); }

/* Desktop hero, 2026-09-23 revision 2: mobile keeps the full-bleed photo under a
   scrim (Chris approved that), desktop switches to a split so a portrait photo is
   not cropped to a giant face across the full width. The photo holds the left side,
   the scrim blends to solid black under the copy on the right. */
@media (min-width: 900px) {
  .bt-hero { min-height: 680px; }
  .bt-hero-bg { width: 52%; right: auto; left: 0; object-position: 50% 26%; }
  .bt-hero-scrim { background:
    linear-gradient(90deg, rgba(13,13,13,0.12) 0%, rgba(13,13,13,0.18) 26%, rgba(13,13,13,0.72) 44%, rgba(13,13,13,0.99) 53%, var(--bt-black) 60%, var(--bt-black) 100%),
    linear-gradient(to top, rgba(13,13,13,0.55) 0%, rgba(13,13,13,0) 38%); }
  .bt-hero-copy { max-width: 560px; }
}
@media (min-width: 1240px) { .bt-hero-copy { max-width: 600px; } }

/* Mid-page CTA bands, 2026-09-23. Same action repeated, never a competing one:
   vault "Lead Gen Page and Form Evidence" (attention ratio, and the HVAC test where a
   secondary CTA pulled emergency intent into the slower funnel). */
.bt-band { background: var(--bt-black); color: #fff; padding: 46px 0; text-align: center; border-top: 1px solid rgba(255,255,255,.08); border-bottom: 1px solid rgba(255,255,255,.08); }
.bt-band h3 { font-family: var(--font-head); text-transform: uppercase; font-size: clamp(22px,3vw,32px); margin-bottom: 8px; }
.bt-band p { color: rgba(255,255,255,.72); font-size: 15.5px; max-width: 54ch; margin: 0 auto 22px; }
.bt-band-cta { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: center; }
.field-help { display: block; font-size: 12.5px; color: var(--muted); margin: -2px 0 8px; text-transform: none; letter-spacing: 0; font-weight: 400; }
.expect { margin-top: 22px; padding: 18px 20px; background: var(--surface); border-left: 3px solid var(--bt-orange); border-radius: 0 8px 8px 0; }
.expect b { display: block; font-family: var(--font-head); text-transform: uppercase; letter-spacing: .04em; font-size: 15px; margin-bottom: 8px; color: var(--ink); }
.expect ul { margin: 0; padding-left: 18px; }
.expect li { font-size: 14px; color: var(--muted); margin-bottom: 5px; line-height: 1.5; }

/* Cards on a dark section, 2026-09-23. Used on the service pages that don't have a
   photo set worth a second gallery (power pole, EV charger, commercial, contact),
   so each page still has a third block of substance between the work and the form. */
.dark .pillars { margin-top: 8px; }
.dark .pillar { background: rgba(255,255,255,0.035); border-color: rgba(255,255,255,0.12);
  transition: transform .3s cubic-bezier(.2,.7,.3,1), border-color .3s, background .3s; }
.dark .pillar:hover { transform: translateY(-3px); border-color: var(--bt-orange); background: rgba(255,255,255,0.06); }
.dark .pillar-k { color: var(--bt-orange); }
.dark .pillar h3 { font-family: var(--font-head); text-transform: uppercase; letter-spacing: .02em;
  font-size: 21px; color: #fff; }
.dark .pillar p { color: rgba(255,255,255,0.72); }

/* ---------------------------------------------------------------------------
   2026-09-24 revision, after Chris's review of the live pages:

   1. Reviews. The grid was align-items:start, so every card stopped wherever its
      own quote ended and the five cards read as five different shapes, with the
      last two hanging off to the left. Cards now stretch to the tallest in their
      row, the attribution sits on the floor of every card above a hairline, and
      the short last row centres under the row above it.
   2. Hero. The photo panel and the black copy panel were blended into each other
      across a third of the screen, which muddied the photo and left no clean
      edge anywhere. Now it is a true split: photo on the left, solid black under
      the copy, with only a narrow feather at the seam. That is the vault's
      default for a hero with text over it, see "Landing Page Visual Design
      Patterns" pattern 2 in 2 - Playbook/Landing Pages/Frameworks/.
--------------------------------------------------------------------------- */

/* Reviews: one baseline, centred short row. Flex rather than grid so the row of
   two centres itself, and so this still holds if a review is added or removed. */
.reviews { display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; }
.reviews .review { flex: 1 1 100%; }
@media (min-width: 620px) { .reviews .review { flex: 0 1 calc((100% - var(--space-md)) / 2); } }
@media (min-width: 900px) { .reviews .review { flex: 0 1 calc((100% - 2 * var(--space-md)) / 3); } }
.review { display: flex; flex-direction: column; }
.review .quote { margin-bottom: 0; }
.review .who { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--line); font-size: 14px; color: var(--muted); }
.review .stars { margin-bottom: 14px; }

/* Hero: a real split, not a blend. The photo keeps its own half at close to full
   brightness (nothing is read over it), and the copy sits on flat black. */
@media (min-width: 900px) {
  .bt-hero-bg { width: 46%; right: auto; left: 0; object-position: 62% 46%; }
  .bt-hero-scrim { background:
    linear-gradient(90deg,
      rgba(13,13,13,0.10) 0%,
      rgba(13,13,13,0.10) 38%,
      rgba(13,13,13,0.60) 43.5%,
      var(--bt-black) 46%,
      var(--bt-black) 100%),
    linear-gradient(to top, rgba(13,13,13,0.45) 0%, rgba(13,13,13,0) 34%); }
}
@media (min-width: 1240px) { .bt-hero-bg { width: 44%; }
  .bt-hero-scrim { background:
    linear-gradient(90deg,
      rgba(13,13,13,0.10) 0%,
      rgba(13,13,13,0.10) 36%,
      rgba(13,13,13,0.60) 41.5%,
      var(--bt-black) 44%,
      var(--bt-black) 100%),
    linear-gradient(to top, rgba(13,13,13,0.45) 0%, rgba(13,13,13,0) 34%); }
}

/* Founder photo now carries the switchboard portrait the hero used to, so frame
   it on him rather than centring the whole 4:5 crop. */
.bt-founder-photo img { object-position: 50% 26%; }

/* Mobile keeps the full-bleed photo under a scrim. The old crop was framed for the
   switchboard portrait; the new photo puts Nuno up and to the right of frame. */
@media (max-width: 899px) { .bt-hero-bg { object-position: 66% 24%; } }

/* ---------------------------------------------------------------------------
   2026-10-20 revision: a "Text us" option beside every call button and in the
   mobile sticky bar (playbook L197, text option next to click-to-call). The
   call button stays the loudest thing on the page; text is the outlined second.
--------------------------------------------------------------------------- */
.bt-text { display: inline-flex; align-items: center; gap: 12px; color: #fff; text-decoration: none; border-radius: var(--radius-pill); padding: 14px 24px; font-weight: 700; font-size: 17px; border: 1.5px solid rgba(255,255,255,0.45); background: transparent; transition: transform .2s cubic-bezier(.2,.7,.3,1), border-color .2s, color .2s; }
.bt-text:hover { transform: translateY(-2px); border-color: var(--bt-orange); color: var(--bt-orange); }
.bt-text svg { width: 20px; height: 20px; fill: currentColor; }
.bt-text small { display: block; font-size: 11px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; opacity: .8; }
@media (max-width: 639px) {
  .sticky-cta { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 8px; }
  .sticky-cta .btn { padding: 12px 8px; }
}

/* ---------------------------------------------------------------------------
   2026-11-08 speed and tap-target pass (Fahim's PageSpeed audit, 5 Nov).
   Every link is at least 44px tall to a thumb. Where a link sits in a line of
   text, the extra height is padding cancelled by an equal negative margin, so
   the tap area grows and nothing on the page moves.
--------------------------------------------------------------------------- */
.logo { display: inline-flex; align-items: center; min-height: 44px; }
.header-cta { min-height: 44px; align-items: center; }
.bt-or { display: inline-block; padding: 10px 0; margin: -10px 0; }
.footer a { display: inline-block; padding: 12px 0; margin: -12px 0; }
.footer p:has(a) + p:has(a) { margin-top: 8px; }
.tap-pad { display: inline-block; padding: 12px 0; margin: -12px 0; }
/* Gallery tiles now carry width/height attributes (no layout shift); the square
   crop still comes from aspect-ratio, so height must stay automatic. */
.gal img { height: auto; }