/* ============================================================
   Trade Services Template — dark premium, industrial-trade trust
   Fonts: Archivo (headings) + Manrope (body), Google Fonts

   RE-SKIN NOTE: to rebrand for a client, edit the VALUES in
   :root below and nothing else. Keep every variable NAME.
   ============================================================ */

:root {
  /* --- surfaces: deep navy / steel --- */
  --bg: #0a0e15;
  --surface: #10161f;
  --surface-2: #161e2a;
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.15);

  /* --- text --- */
  --text: #f1f4f8;
  --muted: #97a3b4;

  /* --- accents: hot orange (heat) + steel blue (water) --- */
  --accent: #f26a1b;
  --accent-dark: #d4560d;
  --accent-2: #7fb2d9;
  --accent-soft: rgba(242, 106, 27, 0.12);
  --accent-line: rgba(242, 106, 27, 0.45);
  /* text colour that sits ON --accent — must stay AA (4.5:1) */
  --on-accent: #0a0e15;

  --font-head: 'Archivo', system-ui, sans-serif;
  --font-body: 'Manrope', system-ui, sans-serif;
  --wrap: 1180px;
  --radius: 14px;
  --shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
html:focus-within { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-head);
  line-height: 1.08;
  letter-spacing: -0.02em;
  font-weight: 750;
  text-wrap: balance;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }

::selection { background: var(--accent); color: var(--on-accent); }

/* ---------- skip link ---------- */
.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 200;
  background: var(--accent); color: var(--on-accent); padding: 10px 18px; border-radius: 0 0 10px 0;
  font-weight: 700;
}
.skip-link:focus { left: 0; }

/* ---------- reveal animations ---------- */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  transition-delay: var(--d, 0ms);
  will-change: opacity, transform;
}
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .marquee__track { animation: none !important; }
  .hero__bg img { animation: none !important; transform: none !important; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-head); font-weight: 650; font-size: 1rem;
  padding: 15px 30px; border-radius: 999px; border: 1px solid transparent;
  cursor: pointer; transition: transform 0.25s var(--ease), background 0.25s, border-color 0.25s, color 0.25s;
  min-height: 48px;
}
.btn:active { transform: scale(0.97); }
.btn--primary { background: var(--accent); color: var(--on-accent); }
.btn--primary:hover { background: var(--accent-dark); transform: translateY(-2px); }
.btn--ghost { border-color: var(--line-strong); color: var(--text); background: rgba(255, 255, 255, 0.03); }
.btn--ghost:hover { border-color: rgba(255, 255, 255, 0.38); transform: translateY(-2px); background: rgba(255, 255, 255, 0.07); }
.btn--lg { padding: 18px 36px; font-size: 1.05rem; }
.btn:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--accent-2); outline-offset: 3px; border-radius: 6px;
}

/* ---------- header ---------- */
.header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  transition: background 0.35s var(--ease), border-color 0.35s, box-shadow 0.35s;
  border-bottom: 1px solid transparent;
}
.header.scrolled {
  background: rgba(10, 14, 21, 0.88);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}
.header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; padding: 14px 24px; max-width: 1320px; margin: 0 auto;
}

/* ---------- brand: styled text mark (no logo file needed) ---------- */
.brand { display: inline-flex; align-items: center; gap: 12px; flex-shrink: 0; }
.brand__mark {
  width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
  display: grid; place-items: center;
  background: linear-gradient(140deg, var(--accent), var(--accent-dark));
  color: var(--on-accent);
  font-family: var(--font-head); font-weight: 800; font-size: 1.05rem; letter-spacing: -0.03em;
  box-shadow: 0 6px 18px rgba(242, 106, 27, 0.3);
}
.brand__text { display: flex; flex-direction: column; line-height: 1.12; }
.brand__name { font-family: var(--font-head); font-weight: 780; font-size: 1.12rem; letter-spacing: -0.02em; }
.brand__tag {
  font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted); font-weight: 600;
}

.nav { display: flex; align-items: center; gap: 6px; }
.nav a {
  font-family: var(--font-head); font-weight: 550; font-size: 0.98rem;
  padding: 10px 14px; border-radius: 8px; color: var(--text);
  position: relative; transition: color 0.2s;
}
.nav a::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 5px; height: 2px;
  background: var(--accent); border-radius: 2px;
  transform: scaleX(0); transform-origin: left; transition: transform 0.3s var(--ease);
}
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav a[aria-current="page"] { color: #fff; }
.header__cta { display: flex; align-items: center; gap: 18px; }
.header__phone {
  font-family: var(--font-head); font-weight: 650; font-size: 0.98rem; white-space: nowrap;
  color: var(--text); transition: color 0.2s;
}
.header__phone:hover { color: var(--accent-2); }
.header__cta .btn { padding: 11px 22px; min-height: 44px; }

.nav-toggle {
  display: none; background: none; border: 1px solid var(--line-strong); border-radius: 10px;
  width: 46px; height: 44px; cursor: pointer; align-items: center; justify-content: center; flex-direction: column; gap: 5px;
}
.nav-toggle span { display: block; width: 20px; height: 2px; background: var(--text); transition: transform 0.3s var(--ease), opacity 0.2s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 940px) {
  .nav {
    position: fixed; top: 74px; left: 16px; right: 16px; z-index: 99;
    flex-direction: column; align-items: stretch; gap: 2px;
    background: rgba(16, 22, 31, 0.98); border: 1px solid var(--line); border-radius: 16px;
    padding: 12px; box-shadow: var(--shadow);
    opacity: 0; transform: translateY(-12px); pointer-events: none;
    transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
  }
  .nav.open { opacity: 1; transform: none; pointer-events: auto; }
  .nav a { padding: 13px 16px; }
  .nav a::after { display: none; }
  .nav a[aria-current="page"] { background: var(--accent-soft); color: #fff; }
  .nav-toggle { display: inline-flex; }
  .header__phone { display: none; }
}
@media (max-width: 560px) {
  .header__cta .btn { display: none; }
  .brand__mark { width: 40px; height: 40px; }
  .brand__name { font-size: 1rem; }
}

/* ---------- hero ---------- */
.hero {
  position: relative; display: flex; align-items: flex-end;
  min-height: min(92dvh, 900px); padding: 170px 0 90px; overflow: hidden; isolation: isolate;
}
.hero--page { min-height: min(62dvh, 640px); padding-bottom: 70px; }
.hero__bg { position: absolute; inset: 0; z-index: -2; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; animation: heroZoom 9s var(--ease) forwards; }
@keyframes heroZoom { from { transform: scale(1.09); } to { transform: scale(1); } }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(10, 14, 21, 0.62) 0%, rgba(10, 14, 21, 0.3) 38%, rgba(10, 14, 21, 0.92) 100%),
    linear-gradient(100deg, rgba(10, 14, 21, 0.9) 8%, rgba(10, 14, 21, 0.2) 68%);
}
.hero__content { max-width: 780px; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-head); font-weight: 650; font-size: 0.86rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-2);
  margin-bottom: 22px;
}
.eyebrow::before { content: ""; width: 34px; height: 2px; background: var(--accent); border-radius: 2px; flex-shrink: 0; }
.hero h1 { font-size: clamp(2.4rem, 6vw, 4.4rem); margin-bottom: 22px; }
.hero h1 em { font-style: normal; color: var(--accent); }
.hero__lede { font-size: clamp(1.05rem, 1.6vw, 1.24rem); color: rgba(241, 244, 248, 0.86); max-width: 620px; margin-bottom: 34px; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 42px; }
.hero__trust { display: flex; flex-wrap: wrap; gap: 12px 30px; padding-top: 26px; border-top: 1px solid var(--line-strong); }
.hero__trust li { display: flex; align-items: center; gap: 10px; font-size: 0.95rem; color: rgba(241, 244, 248, 0.86); }
.hero__trust svg { width: 18px; height: 18px; color: var(--accent); flex-shrink: 0; }

/* ---------- sections ---------- */
.section { padding: clamp(72px, 9vw, 120px) 0; position: relative; }
.section--tint { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section__head { max-width: 720px; margin-bottom: clamp(40px, 5vw, 64px); }
.section__head h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); margin-bottom: 16px; }
.section__head p { color: var(--muted); font-size: 1.08rem; }
.section__head--row {
  max-width: none; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.section__head--row > div { max-width: 640px; }

/* ---------- service pillars ---------- */
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.pillars--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1020px) { .pillars, .pillars--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .pillars, .pillars--4 { grid-template-columns: 1fr; } }
.pillar {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 440px; border-radius: var(--radius); overflow: hidden; isolation: isolate;
  border: 1px solid var(--line);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s;
}
.pillar img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.pillar::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(185deg, rgba(10, 14, 21, 0.1) 28%, rgba(10, 14, 21, 0.94) 88%);
  transition: background 0.35s;
}
.pillar:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: var(--accent-line); }
.pillar:hover img { transform: scale(1.06); }
.pillar__body { padding: 26px 24px; }
.pillar__num { font-family: var(--font-head); font-weight: 700; font-size: 0.82rem; letter-spacing: 0.12em; color: var(--accent-2); display: block; margin-bottom: 10px; }
.pillar h3 { font-size: 1.42rem; margin-bottom: 10px; }
.pillar p { font-size: 0.94rem; color: rgba(241, 244, 248, 0.8); margin-bottom: 16px; }
.pillar__link { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-head); font-weight: 650; font-size: 0.95rem; color: #fff; }
.pillar__link svg { width: 17px; height: 17px; color: var(--accent); transition: transform 0.3s var(--ease); }
.pillar:hover .pillar__link svg { transform: translateX(5px); }

/* ---------- marquee ---------- */
.marquee {
  overflow: hidden; padding: 26px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: var(--surface);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track { display: flex; gap: 0; width: max-content; animation: marquee 38s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
.marquee__track span {
  font-family: var(--font-head); font-weight: 650; font-size: 1.02rem; white-space: nowrap;
  color: var(--muted); display: inline-flex; align-items: center;
}
.marquee__track span::after { content: "•"; margin: 0 26px; color: var(--accent); }

/* ---------- about / why ---------- */
.split { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(36px, 5vw, 72px); align-items: center; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }
.split__media { position: relative; }
.split__media img { border-radius: var(--radius); border: 1px solid var(--line); width: 100%; height: 100%; object-fit: cover; }
.split__media--stack { display: grid; gap: 16px; }
.split__badge {
  position: absolute; left: -18px; bottom: 28px;
  background: var(--accent); color: var(--on-accent); border-radius: 12px; padding: 18px 22px;
  font-family: var(--font-head); box-shadow: var(--shadow);
}
.split__badge strong { display: block; font-size: 1.9rem; font-weight: 800; line-height: 1; }
.split__badge small { font-size: 0.85rem; font-weight: 600; opacity: 0.82; }
@media (max-width: 560px) { .split__badge { left: 12px; } }
.split__content h2 { font-size: clamp(1.9rem, 3.4vw, 2.7rem); margin-bottom: 20px; }
.split__content > p { color: var(--muted); margin-bottom: 18px; font-size: 1.04rem; }
.ticklist { margin-top: 26px; display: grid; gap: 14px; }
.ticklist li { display: flex; gap: 14px; align-items: flex-start; }
.ticklist svg { width: 21px; height: 21px; color: var(--accent); flex-shrink: 0; margin-top: 3px; }
.ticklist strong { font-family: var(--font-head); font-weight: 650; }
.ticklist span { color: var(--muted); }

/* ---------- stats ---------- */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 34px; }
@media (max-width: 560px) { .stats { grid-template-columns: 1fr 1fr; } }
.stat { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 20px; }
.stat strong { display: block; font-family: var(--font-head); font-weight: 800; font-size: 2rem; color: var(--accent-2); line-height: 1.1; font-variant-numeric: tabular-nums; }
.stat span { font-size: 0.9rem; color: var(--muted); }

/* ---------- reviews ---------- */
.reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 900px) { .reviews { grid-template-columns: 1fr; } }
.review {
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 30px 28px; display: flex; flex-direction: column; gap: 16px;
  transition: transform 0.3s var(--ease), border-color 0.3s;
}
.review:hover { transform: translateY(-5px); border-color: var(--accent-line); }
.review__stars { display: flex; gap: 3px; }
.review__stars svg { width: 18px; height: 18px; color: var(--accent); }
.review blockquote { font-size: 1.02rem; color: rgba(241, 244, 248, 0.9); flex-grow: 1; }
.review figcaption { display: flex; flex-direction: column; gap: 2px; padding-top: 4px; border-top: 1px solid var(--line); }
.review figcaption strong { font-family: var(--font-head); font-weight: 650; font-size: 0.98rem; padding-top: 14px; }
.review figcaption span { font-size: 0.88rem; color: var(--muted); }

.ratings-bar {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 44px;
  margin-top: 34px; padding: 24px; border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--surface-2);
}
.ratings-bar div { text-align: center; }
.ratings-bar strong {
  display: block; font-family: var(--font-head); font-weight: 800; font-size: 1.5rem;
  color: var(--accent-2); line-height: 1.2; font-variant-numeric: tabular-nums;
}
.ratings-bar span { font-size: 0.86rem; color: var(--muted); }

/* ---------- gallery mosaic ---------- */
.mosaic { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 860px) { .mosaic { grid-template-columns: repeat(2, 1fr); } }
.mosaic figure {
  position: relative; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line);
  aspect-ratio: 4 / 3; margin: 0;
}
.mosaic figure.tall { grid-row: span 2; aspect-ratio: auto; }
@media (max-width: 560px) { .mosaic figure.tall { grid-row: span 1; aspect-ratio: 4 / 3; } }
.mosaic img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.mosaic figure:hover img { transform: scale(1.05); }
.mosaic figcaption {
  position: absolute; inset: auto 0 0 0; padding: 40px 18px 14px;
  background: linear-gradient(180deg, transparent, rgba(10, 14, 21, 0.9));
  font-size: 0.88rem; font-weight: 500; color: rgba(241, 244, 248, 0.94);
  opacity: 0; transform: translateY(8px); transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
}
.mosaic figure:hover figcaption, .mosaic figure:focus-within figcaption { opacity: 1; transform: none; }

/* ---------- feature cards (service pages) ---------- */
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 900px) { .features { grid-template-columns: 1fr; } }
.feature {
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 30px 26px; transition: transform 0.3s var(--ease), border-color 0.3s;
}
.feature:hover { transform: translateY(-5px); border-color: var(--accent-line); }
.feature__icon {
  width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent); margin-bottom: 20px;
}
.feature__icon svg { width: 26px; height: 26px; }
.feature h3 { font-size: 1.2rem; margin-bottom: 10px; }
.feature p { color: var(--muted); font-size: 0.96rem; }

/* ---------- process ---------- */
.process { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; counter-reset: step; }
@media (max-width: 900px) { .process { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .process { grid-template-columns: 1fr; } }
.process li {
  counter-increment: step; background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 26px 22px; position: relative;
}
.process li::before {
  content: "0" counter(step); font-family: var(--font-head); font-weight: 800; font-size: 2.1rem;
  color: transparent; -webkit-text-stroke: 1.5px var(--accent); display: block; margin-bottom: 14px;
}
.process h3 { font-size: 1.1rem; margin-bottom: 8px; }
.process p { font-size: 0.92rem; color: var(--muted); }

/* ---------- pill list ---------- */
.pills { display: flex; flex-wrap: wrap; gap: 10px; }
.pills li {
  border: 1px solid var(--line-strong); border-radius: 999px; padding: 9px 18px;
  font-size: 0.92rem; font-weight: 500; color: rgba(241, 244, 248, 0.9);
  transition: border-color 0.25s, background 0.25s;
}
.pills li:hover { border-color: var(--accent); background: var(--accent-soft); }

/* ---------- price cards ---------- */
.prices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 900px) { .prices { grid-template-columns: 1fr; } }
.price {
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 30px 26px; display: flex; flex-direction: column; gap: 10px;
}
.price--flag { border-color: var(--accent-line); }
.price h3 { font-size: 1.15rem; }
.price strong {
  font-family: var(--font-head); font-weight: 800; font-size: 2.1rem; color: var(--accent);
  line-height: 1.1; font-variant-numeric: tabular-nums;
}
.price p { color: var(--muted); font-size: 0.94rem; }

/* ---------- CTA band ---------- */
.cta-band {
  position: relative; overflow: hidden;
  background: var(--surface-2);
  border: 1px solid var(--accent-line);
  border-radius: 20px; padding: clamp(44px, 6vw, 72px); text-align: center;
}
.cta-band::before {
  content: ""; position: absolute; inset: -50%;
  background:
    radial-gradient(circle at 78% 18%, rgba(242, 106, 27, 0.3), transparent 42%),
    radial-gradient(circle at 18% 82%, rgba(127, 178, 217, 0.18), transparent 46%);
}
.cta-band > * { position: relative; }
.cta-band h2 { font-size: clamp(1.8rem, 3.6vw, 2.7rem); margin-bottom: 14px; }
.cta-band p { color: rgba(241, 244, 248, 0.86); max-width: 560px; margin: 0 auto 30px; font-size: 1.06rem; }
.cta-band__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ---------- contact ---------- */
.contact-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(32px, 5vw, 64px); align-items: start; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-card { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 34px 30px; }
.contact-card h3 { font-size: 1.35rem; margin-bottom: 20px; }
.contact-card ul { display: grid; gap: 18px; }
.contact-card li { display: flex; gap: 16px; align-items: flex-start; }
.contact-card li svg { width: 22px; height: 22px; color: var(--accent); flex-shrink: 0; margin-top: 3px; }
.contact-card li strong { display: block; font-family: var(--font-head); font-weight: 650; font-size: 0.95rem; }
.contact-card li a, .contact-card li span { color: var(--muted); font-size: 0.97rem; }
.contact-card li a:hover { color: var(--accent-2); }
.contact-card__socials { display: flex; gap: 12px; margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--line); }
.contact-card__socials a {
  width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--line-strong);
  display: grid; place-items: center; color: var(--text); transition: border-color 0.25s, background 0.25s, transform 0.25s;
}
.contact-card__socials a:hover { border-color: var(--accent); background: var(--accent-soft); transform: translateY(-3px); }
.contact-card__socials svg { width: 20px; height: 20px; }

.form { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 34px 30px; }
.form h3 { font-size: 1.35rem; margin-bottom: 8px; }
.form > p { color: var(--muted); font-size: 0.96rem; margin-bottom: 24px; }
.form-row { margin-bottom: 18px; }
.form-row label { display: block; font-family: var(--font-head); font-weight: 600; font-size: 0.92rem; margin-bottom: 8px; }
.form-row input, .form-row select, .form-row textarea {
  width: 100%; padding: 14px 16px; min-height: 48px;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--line-strong); border-radius: 10px;
  font-family: var(--font-body); font-size: 1rem;
  transition: border-color 0.25s, box-shadow 0.25s;
}
.form-row textarea { min-height: 130px; resize: vertical; }
.form-row input:focus, .form-row select:focus, .form-row textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(242, 106, 27, 0.25);
}
.form-row small { display: block; margin-top: 7px; font-size: 0.85rem; color: var(--muted); }
.form-row--pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px) { .form-row--pair { grid-template-columns: 1fr; } }
.form-note { margin-top: 16px; font-size: 0.95rem; color: var(--accent-2); min-height: 1.4em; }

/* ---------- page hero breadcrumbs ---------- */
.crumbs { display: flex; gap: 10px; align-items: center; font-size: 0.9rem; color: var(--muted); margin-bottom: 18px; }
.crumbs a:hover { color: var(--accent-2); }
.crumbs span { color: var(--accent); }

/* ---------- footer ---------- */
.footer { border-top: 1px solid var(--line); background: var(--surface); padding: 64px 0 34px; }
.footer__grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.2fr; gap: 36px; margin-bottom: 44px; }
@media (max-width: 900px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer__grid { grid-template-columns: 1fr; } }
.footer__brand .brand { margin-bottom: 18px; }
.footer__brand p { color: var(--muted); font-size: 0.95rem; max-width: 300px; }
.footer h4 { font-size: 0.92rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-2); margin-bottom: 18px; }
.footer ul { display: grid; gap: 11px; }
.footer ul a, .footer ul span { color: var(--muted); font-size: 0.96rem; transition: color 0.2s; }
.footer ul a:hover { color: var(--text); }
.footer__bottom {
  border-top: 1px solid var(--line); padding-top: 26px;
  display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  color: var(--muted); font-size: 0.88rem;
}

/* ---------- floating call button (mobile) ---------- */
.call-fab {
  position: fixed; right: 18px; bottom: 18px; z-index: 90;
  width: 58px; height: 58px; border-radius: 50%;
  background: var(--accent); color: var(--on-accent); display: none; place-items: center;
  box-shadow: 0 12px 30px rgba(242, 106, 27, 0.45);
  transition: transform 0.25s var(--ease);
}
.call-fab:hover { transform: scale(1.06); }
.call-fab svg { width: 24px; height: 24px; }

/* ---------- WhatsApp ---------- */
/* WhatsApp is the default customer channel in South Africa, so this float shows
   on every breakpoint, not just mobile. The green is WhatsApp's own brand colour
   and is deliberately NOT driven from the :root accent tokens — leave it alone
   when re-skinning. */
.wa-fab {
  position: fixed; right: 18px; bottom: 18px; z-index: 91;
  width: 58px; height: 58px; border-radius: 50%;
  background: #25d366; color: #04240f; display: grid; place-items: center;
  box-shadow: 0 12px 30px rgba(37, 211, 102, 0.42);
  transition: transform 0.25s var(--ease);
}
.wa-fab:hover { transform: scale(1.06); }
.wa-fab svg { width: 28px; height: 28px; }

.btn--whatsapp { background: #25d366; color: #04240f; border-color: #25d366; }
.btn--whatsapp:hover { background: #1fbe5b; border-color: #1fbe5b; color: #04240f; }
.btn--whatsapp svg { width: 20px; height: 20px; margin-right: 8px; vertical-align: -4px; }

@media (max-width: 700px) {
  /* stack the call button above the WhatsApp float so they never overlap */
  .call-fab { display: grid; bottom: 86px; }
  /* comfortable tap targets + clearance so the FABs never sit on the last line */
  .footer ul { gap: 2px; }
  .footer ul a, .footer ul span { display: inline-block; padding: 9px 0; }
  .contact-card li a { display: inline-block; padding: 5px 0; }
  .demo-note { padding-bottom: 152px; }
}

/* ---------- demo ribbon (remove when handing a real site over) ---------- */
.demo-note {
  background: var(--surface-2); border-top: 1px solid var(--line);
  padding: 14px 24px; text-align: center; font-size: 0.84rem; color: var(--muted);
}
.demo-note strong { color: var(--accent-2); font-weight: 700; }