/* ============================================================
   MELACETANE PTY LTD — v2 Stylesheet (MOBILE-FIXED)
   World-class corporate energy & technology brand
   Palette: Deep obsidian · Amber gold · Emerald green accent
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400&family=Barlow+Condensed:wght@600;700;800;900&display=swap');

/* ─── TOKENS ────────────────────────────────────────────── */
:root {
  --color-bg:           #08090b;
  --color-surface:      #0e1014;
  --color-surface-2:    #141720;
  --color-surface-3:    #1c2028;
  --color-surface-4:    #232830;
  --color-border:       #252b35;
  --color-border-light: #2e3540;
  --color-divider:      #1a1f27;
  --color-text:         #eceef2;
  --color-text-muted:   #8c95a4;
  --color-text-faint:   #454e5c;
  --color-text-inverse: #08090b;
  --color-gold:         #c8891e;
  --color-gold-hover:   #dfa030;
  --color-gold-light:   #f2c96a;
  --color-gold-dim:     rgba(200,137,30,0.10);
  --color-gold-border:  rgba(200,137,30,0.22);
  --color-gold-glow:    rgba(200,137,30,0.18);
  --color-green:        #1a9e6e;
  --color-green-hover:  #22b87e;
  --color-green-light:  #4fd9a8;
  --color-green-dim:    rgba(26,158,110,0.10);
  --color-green-border: rgba(26,158,110,0.22);
  --font-display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --font-body:    'Barlow', system-ui, sans-serif;
  --text-xs:   clamp(0.6875rem, 0.65rem + 0.19vw, 0.8125rem);
  --text-sm:   clamp(0.8125rem, 0.75rem + 0.31vw, 0.9375rem);
  --text-base: clamp(0.9375rem, 0.88rem + 0.29vw, 1.0625rem);
  --text-md:   clamp(1.0625rem, 0.98rem + 0.41vw, 1.25rem);
  --text-lg:   clamp(1.1875rem, 1.05rem + 0.69vw, 1.5rem);
  --text-xl:   clamp(1.5rem,    1.2rem  + 1.5vw,  2.25rem);
  --text-2xl:  clamp(2rem,      1.2rem  + 2.5vw,  3.5rem);
  --text-3xl:  clamp(2.5rem,    1rem    + 4.5vw,  5.5rem);
  /* FIX: hero text was overflowing on phones — reduced vw multiplier */
  --text-hero: clamp(2.75rem,   1.5rem  + 5.5vw,  9rem);
  --s1: 0.25rem; --s2: 0.5rem;  --s3: 0.75rem;  --s4: 1rem;
  --s5: 1.25rem; --s6: 1.5rem;  --s8: 2rem;     --s10: 2.5rem;
  --s12: 3rem;   --s16: 4rem;   --s20: 5rem;    --s24: 6rem;
  --s32: 8rem;
  --w-narrow:  700px;
  --w-default: 1020px;
  --w-wide:    1280px;
  --r-sm: 0.25rem; --r-md: 0.5rem; --r-lg: 1rem; --r-xl: 1.5rem; --r-full: 9999px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --t: 220ms var(--ease);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.5);
  --shadow-md: 0 4px 20px rgba(0,0,0,0.55);
  --shadow-lg: 0 16px 56px rgba(0,0,0,0.65);
  --shadow-gold: 0 0 48px rgba(200,137,30,0.12);
  --shadow-green: 0 0 48px rgba(26,158,110,0.12);
}

/* ─── BASE ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
  font-size: 16px;
  overflow-x: hidden; /* FIX: prevent horizontal scroll */
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 1.65;
  color: var(--color-text);
  background: var(--color-bg);
  overflow-x: hidden;
}

img, video, svg { display: block; max-width: 100%; height: auto; }
ul[role="list"], ol[role="list"] { list-style: none; }
input, button, textarea, select { font: inherit; color: inherit; }
h1, h2, h3, h4, h5, h6 { line-height: 1.08; text-wrap: balance; font-family: var(--font-display); font-weight: 700; letter-spacing: -0.01em; }
p, li { text-wrap: pretty; max-width: 72ch; }
a { color: inherit; text-decoration: none; transition: color var(--t); }
button { cursor: pointer; background: none; border: none; }
table { border-collapse: collapse; width: 100%; }
::selection { background: rgba(200,137,30,0.22); color: var(--color-text); }
:focus-visible { outline: 2px solid var(--color-gold); outline-offset: 3px; border-radius: var(--r-sm); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* ─── LAYOUT ────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--w-wide);
  margin-inline: auto;
  padding-inline: clamp(var(--s5), 5vw, var(--s16));
}
.container--narrow  { max-width: var(--w-narrow); }
.container--default { max-width: var(--w-default); }
.section        { padding-block: clamp(var(--s16), 8vw, var(--s32)); }
.section--sm    { padding-block: clamp(var(--s10), 5vw, var(--s20)); }
.section--xs    { padding-block: clamp(var(--s6),  3vw, var(--s12)); }

/* ─── TYPE UTILITIES ────────────────────────────────────── */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s3);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: var(--s5);
}
.eyebrow::before { content: ''; width: 20px; height: 2px; background: var(--color-gold); flex-shrink: 0; }
.eyebrow--green { color: var(--color-green); }
.eyebrow--green::before { background: var(--color-green); }
.label { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-gold); }
.gold-line { width: 48px; height: 3px; background: linear-gradient(90deg, var(--color-gold), var(--color-gold-light)); border-radius: 2px; margin-block: var(--s5); }
.gold-line--center { margin-inline: auto; }
.gold-line--green  { background: linear-gradient(90deg, var(--color-green), var(--color-green-light)); }
.section-header { margin-bottom: clamp(var(--s10), 5vw, var(--s16)); }
.section-header--center { text-align: center; }
.section-header--center .eyebrow  { justify-content: center; }
.section-header--center .gold-line { margin-inline: auto; }
.section-header--center p { margin-inline: auto; }
.section-title { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 800; text-transform: uppercase; letter-spacing: -0.01em; color: var(--color-text); line-height: 1.04; }
.section-subtitle { font-size: var(--text-base); color: var(--color-text-muted); line-height: 1.75; margin-top: var(--s4); max-width: 62ch; }
.gold { color: var(--color-gold); }
.green { color: var(--color-green); }
.muted { color: var(--color-text-muted); }

/* ─── NAVIGATION ────────────────────────────────────────── */
.nav {
  position: fixed;
  top: 0; inset-inline: 0;
  z-index: 100;
  height: 76px;
  background: rgba(8,9,11,0.94);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--color-border);
  transition: border-color var(--t), box-shadow var(--t);
}
.nav.scrolled { box-shadow: 0 2px 24px rgba(0,0,0,0.5); }
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px;
  max-width: var(--w-wide);
  margin-inline: auto;
  padding-inline: clamp(var(--s5), 5vw, var(--s16));
  gap: var(--s4); /* FIX: gap prevents logo and hamburger colliding */
}
.nav__logo {
  display: flex;
  align-items: center;
  gap: var(--s3);
  flex-shrink: 0;
  min-width: 0; /* FIX: allow flex shrink */
}
/* FIX: hide SVG logo on very small screens to give wordmark room */
@media (max-width: 380px) {
  .nav__logo svg { display: none; }
}
.nav__logo-wordmark {
  font-family: var(--font-display);
  font-size: clamp(0.9rem, 3.5vw, 1.25rem); /* FIX: fluid so it fits 320px */
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text);
  line-height: 1;
  white-space: nowrap;
}
.nav__logo-wordmark em { color: var(--color-gold); font-style: normal; }
.nav__links { display: flex; align-items: center; gap: var(--s8); list-style: none; }
.nav__links a { font-size: var(--text-sm); font-weight: 500; letter-spacing: 0.03em; color: var(--color-text-muted); transition: color var(--t); position: relative; padding-bottom: 2px; }
.nav__links a::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 1px; background: var(--color-gold); transition: width var(--t); }
.nav__links a:hover, .nav__links a.active { color: var(--color-text); }
.nav__links a:hover::after, .nav__links a.active::after { width: 100%; }
.nav__actions { display: flex; align-items: center; gap: var(--s3); }

/* FIX: Hamburger with proper 44px touch target and animated X */
.nav__toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: var(--s2);
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.nav__toggle span { display: block; width: 22px; height: 2px; background: var(--color-text); transition: transform 0.25s var(--ease), opacity 0.2s; border-radius: 1px; }
.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; transform: scaleX(0); }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* FIX: mobile nav with better spacing and touch targets */
.nav__mobile {
  display: none;
  flex-direction: column;
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  padding: var(--s4) clamp(var(--s5), 5vw, var(--s16));
  padding-bottom: max(var(--s6), env(safe-area-inset-bottom)); /* FIX: iPhone notch */
  gap: 0;
  /* FIX: allow mobile menu to scroll if tall */
  max-height: calc(100dvh - 76px);
  overflow-y: auto;
}
.nav__mobile a {
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--color-text-muted);
  padding-block: var(--s4); /* FIX: 44px+ tap target */
  border-bottom: 1px solid var(--color-divider);
  transition: color var(--t);
  display: block;
}
.nav__mobile a:last-of-type { border-bottom: none; }
.nav__mobile a:hover { color: var(--color-gold); }
/* FIX: btn inside mobile nav must not inherit the muted link colour */
.nav__mobile .btn { color: var(--color-text-inverse); border-bottom: none; padding-block: 0.8rem; }
.nav__mobile .btn:hover { color: var(--color-text-inverse); }
.nav__mobile.is-open { display: flex; }

@media (max-width: 900px) {
  .nav__links { display: none; }
  .nav__actions { display: none; } /* FIX: hide all nav actions on mobile — CTA is in drawer */
  .nav__toggle { display: flex; }
}

/* ─── BUTTONS ────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 0.8rem 1.75rem;
  border-radius: var(--r-md);
  transition: var(--t);
  white-space: nowrap;
  cursor: pointer;
  border: 1px solid transparent;
}
.btn--primary { background: var(--color-gold); color: #08090b; border-color: var(--color-gold); }
.btn--primary:hover { background: var(--color-gold-hover); border-color: var(--color-gold-hover); box-shadow: 0 6px 28px rgba(200,137,30,0.4); transform: translateY(-1px); }
.btn--primary:active { background: var(--color-gold-hover); transform: translateY(0); box-shadow: none; } /* FIX: touch feedback */
.btn--outline { background: transparent; color: var(--color-text); border-color: var(--color-border-light); }
.btn--outline:hover { border-color: var(--color-gold); color: var(--color-gold); background: var(--color-gold-dim); }
.btn--green { background: var(--color-green); color: #08090b; border-color: var(--color-green); }
.btn--green:hover { background: var(--color-green-hover); border-color: var(--color-green-hover); box-shadow: 0 6px 28px rgba(26,158,110,0.4); transform: translateY(-1px); }
.btn--green:active { background: var(--color-green-hover); transform: translateY(0); box-shadow: none; } /* FIX: touch feedback */
.btn--ghost { background: transparent; color: var(--color-gold); padding-inline: 0; border: none; letter-spacing: 0.05em; }
.btn--ghost:hover { color: var(--color-gold-hover); }
.btn--ghost svg { transition: transform var(--t); }
.btn--ghost:hover svg { transform: translateX(4px); }

/* ─── HERO ───────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: 100dvh;
  display: grid;
  align-items: end;
  overflow: hidden;
  padding-top: 76px;
}
.hero__bg { position: absolute; inset: 0; z-index: 0; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
.hero__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, rgba(8,9,11,0.96) 0%, rgba(8,9,11,0.72) 60%, rgba(8,9,11,0.42) 100%),
    linear-gradient(to top, rgba(8,9,11,0.98) 0%, transparent 50%);
}
.hero__noise { position: absolute; inset: 0; z-index: 1; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E"); opacity: 0.5; pointer-events: none; }
.hero__grid { position: absolute; inset: 0; z-index: 1; background-image: linear-gradient(rgba(200,137,30,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(200,137,30,0.03) 1px, transparent 1px); background-size: 72px 72px; pointer-events: none; }
.hero__stripe { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(to bottom, transparent 0%, var(--color-gold) 30%, var(--color-gold) 70%, transparent 100%); z-index: 3; opacity: 0.7; }
.hero__content {
  position: relative;
  z-index: 4;
  max-width: var(--w-wide);
  margin-inline: auto;
  width: 100%;
  padding-inline: clamp(var(--s5), 5vw, var(--s16));
  padding-bottom: clamp(var(--s16), 10vh, var(--s32));
  padding-top: clamp(var(--s12), 8vh, var(--s24));
}
.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  background: rgba(200,137,30,0.10);
  border: 1px solid var(--color-gold-border);
  border-radius: var(--r-full);
  padding: 0.4rem var(--s5);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-gold-light);
  margin-bottom: var(--s8);
  /* FIX: wraps on very small screens */
  max-width: 100%;
  flex-wrap: wrap;
}
.hero__badge-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-gold); animation: pulse 2s ease infinite; flex-shrink: 0; }
@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(0.8); } }
.hero__title {
  font-family: var(--font-display);
  font-size: var(--text-hero);
  font-weight: 900;
  text-transform: uppercase;
  line-height: 0.92;
  letter-spacing: -0.025em;
  color: var(--color-text);
  max-width: 16ch;
  margin-bottom: var(--s6);
  word-break: break-word; /* FIX: prevent overflow */
}
.hero__title .line-gold { color: var(--color-gold); }
.hero__title .line-outline { -webkit-text-stroke: 1px rgba(236,238,242,0.4); color: transparent; }
.hero__sub { font-size: var(--text-md); font-weight: 300; color: var(--color-text-muted); line-height: 1.7; max-width: 52ch; margin-bottom: var(--s10); }
.hero__actions { display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap; margin-bottom: var(--s16); }

/* FIX: hero buttons go full-width and stacked on very small screens */
@media (max-width: 400px) {
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn { justify-content: center; }
}

.hero__stats {
  display: flex;
  gap: clamp(var(--s8), 4vw, var(--s16));
  flex-wrap: wrap;
  padding-top: var(--s10);
  border-top: 1px solid var(--color-border);
  width: fit-content;
}
.stat { display: flex; flex-direction: column; }
.stat__num { font-family: var(--font-display); font-size: clamp(2rem, 3vw, 3.25rem); font-weight: 900; line-height: 1; letter-spacing: -0.03em; color: var(--color-gold); }
.stat__lbl { font-size: var(--text-xs); font-weight: 500; letter-spacing: 0.07em; text-transform: uppercase; color: var(--color-text-muted); margin-top: 4px; }

/* FIX: hero stats 2x2 grid on mobile */
@media (max-width: 500px) {
  .hero__stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s6); width: 100%; }
}

/* ─── DIVISIONS ─────────────────────────────────────────── */
.divisions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--color-border); border: 1px solid var(--color-border); border-radius: var(--r-lg); overflow: hidden; }
.division { background: var(--color-surface); padding: clamp(var(--s8), 4vw, var(--s12)) clamp(var(--s6), 3vw, var(--s10)); position: relative; overflow: hidden; transition: background var(--t); }
.division::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; opacity: 0; transition: opacity var(--t); }
.division--fuel::before   { background: linear-gradient(90deg, var(--color-gold), var(--color-gold-light)); }
.division--energy::before { background: linear-gradient(90deg, var(--color-green), var(--color-green-light)); }
.division--solar::before  { background: linear-gradient(90deg, var(--color-green-light), #8be4c6); }
.division:hover { background: var(--color-surface-2); }
.division:hover::before { opacity: 1; }
.division__num { font-family: var(--font-display); font-size: 3.5rem; font-weight: 900; line-height: 1; color: var(--color-gold-dim); margin-bottom: var(--s4); letter-spacing: -0.03em; }
.division--energy .division__num, .division--solar .division__num { color: var(--color-green-dim); }
.division__icon { width: 48px; height: 48px; border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; margin-bottom: var(--s5); }
.division--fuel   .division__icon { background: var(--color-gold-dim); border: 1px solid var(--color-gold-border); color: var(--color-gold); }
.division--energy .division__icon { background: var(--color-green-dim); border: 1px solid var(--color-green-border); color: var(--color-green); }
.division--solar  .division__icon { background: var(--color-green-dim); border: 1px solid var(--color-green-border); color: var(--color-green-light); }
.division__tag { display: inline-block; font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.25rem 0.75rem; border-radius: var(--r-full); margin-bottom: var(--s4); }
.division--fuel   .division__tag { background: var(--color-gold-dim);  color: var(--color-gold-light);  border: 1px solid var(--color-gold-border); }
.division--energy .division__tag, .division--solar .division__tag { background: var(--color-green-dim); color: var(--color-green-light); border: 1px solid var(--color-green-border); }
.division h3 { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 800; text-transform: uppercase; color: var(--color-text); margin-bottom: var(--s3); letter-spacing: 0.01em; }
.division p { font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.75; }
@media (max-width: 800px) { .divisions { grid-template-columns: 1fr; } }

/* ─── FULL-BLEED IMAGE SECTION ──────────────────────────── */
.img-section {
  position: relative;
  height: clamp(200px, 45vw, 640px); /* FIX: was 320px min, too tall on phones */
  overflow: hidden;
}
.img-section img { width: 100%; height: 100%; object-fit: cover; }
.img-section__overlay { position: absolute; inset: 0; display: flex; align-items: center; }
.img-section__overlay--left  { justify-content: flex-start; }
.img-section__overlay--right { justify-content: flex-end; }
/* FIX: on mobile, right-aligned overlays should also left-align text */
@media (max-width: 600px) {
  .img-section__overlay { align-items: flex-end; padding-bottom: var(--s8); }
  .img-section__overlay--right { justify-content: flex-start; }
  .img-section__overlay--right > div { justify-content: flex-start !important; }
}

/* ─── CARDS ─────────────────────────────────────────────── */
.cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: var(--s5); } /* FIX: min() prevents overflow */
.cards-grid--2 { grid-template-columns: repeat(2, 1fr); }
.cards-grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .cards-grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .cards-grid--2, .cards-grid--4 { grid-template-columns: 1fr; } }
.card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--r-lg); padding: clamp(var(--s6), 3vw, var(--s10)); transition: border-color var(--t), box-shadow var(--t), transform var(--t); position: relative; overflow: hidden; }
.card::after { content: ''; position: absolute; top: 0; inset-inline: 0; height: 2px; opacity: 0; background: linear-gradient(90deg, transparent, var(--color-gold), transparent); transition: opacity var(--t); }
.card:hover { border-color: var(--color-gold-border); box-shadow: var(--shadow-gold); transform: translateY(-2px); }
.card:hover::after { opacity: 1; }
.card--green::after { background: linear-gradient(90deg, transparent, var(--color-green), transparent); }
.card--green:hover  { border-color: var(--color-green-border); box-shadow: var(--shadow-green); }
.card__icon { width: 48px; height: 48px; background: var(--color-gold-dim); border: 1px solid var(--color-gold-border); border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; color: var(--color-gold); margin-bottom: var(--s5); }
.card--green .card__icon { background: var(--color-green-dim); border-color: var(--color-green-border); color: var(--color-green); }
.card__num { font-family: var(--font-display); font-size: 3rem; font-weight: 900; line-height: 1; color: var(--color-gold-dim); letter-spacing: -0.03em; margin-bottom: var(--s3); }
.card h3 { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; color: var(--color-text); margin-bottom: var(--s3); }
.card p { font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.75; }

/* Service card variant */
.service-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--r-lg); padding: var(--s8); transition: border-color var(--t), box-shadow var(--t); position: relative; overflow: hidden; }
.service-card:hover { border-color: var(--color-gold-border); box-shadow: var(--shadow-gold); }
.service-card--green:hover { border-color: var(--color-green-border); box-shadow: var(--shadow-green); }
.service-card__icon { width: 56px; height: 56px; background: var(--color-gold-dim); border: 1px solid var(--color-gold-border); border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; color: var(--color-gold); margin-bottom: var(--s6); }
.service-card--green .service-card__icon { background: var(--color-green-dim); border-color: var(--color-green-border); color: var(--color-green); }
.service-card h3 { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 800; text-transform: uppercase; color: var(--color-text); margin-bottom: var(--s3); }
.service-card p { font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.75; margin-bottom: var(--s5); }
.service-card ul { list-style: none; display: flex; flex-direction: column; gap: var(--s2); }
.service-card ul li { font-size: var(--text-sm); color: var(--color-text-muted); display: flex; align-items: flex-start; gap: var(--s2); }
.service-card ul li::before { content: '—'; color: var(--color-gold); flex-shrink: 0; font-weight: 700; }
.service-card--green ul li::before { color: var(--color-green); }

/* ─── SPLIT LAYOUT ──────────────────────────────────────── */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(var(--s10), 6vw, var(--s24));
  align-items: center;
}
/* FIX: replaced direction:rtl (causes text & form input bugs on mobile) with flex order */
.split--reverse > :first-child { order: 2; }
.split--reverse > :last-child  { order: 1; }
@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; }
  .split--reverse > :first-child { order: 1; } /* FIX: reset order on mobile */
  .split--reverse > :last-child  { order: 2; }
}
.split__visual { position: relative; border-radius: var(--r-xl); overflow: hidden; aspect-ratio: 4/3; background: var(--color-surface-2); }
.split__visual img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.split__visual:hover img { transform: scale(1.03); }
.split__badge { position: absolute; bottom: var(--s5); left: var(--s5); background: rgba(8,9,11,0.88); backdrop-filter: blur(10px); border: 1px solid var(--color-gold-border); border-radius: var(--r-md); padding: var(--s3) var(--s5); }
.split__badge strong { display: block; font-family: var(--font-display); font-size: 1.6rem; font-weight: 900; color: var(--color-gold); line-height: 1; }
.split__badge span { font-size: var(--text-xs); color: var(--color-text-muted); letter-spacing: 0.07em; text-transform: uppercase; }

/* ─── TRUST BAR ─────────────────────────────────────────── */
.trust-bar { background: var(--color-surface); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.trust-bar__inner { display: grid; grid-template-columns: repeat(4, 1fr); max-width: var(--w-wide); margin-inline: auto; padding-inline: clamp(var(--s5), 5vw, var(--s16)); }
.trust-item { display: flex; align-items: center; gap: var(--s4); padding: var(--s8) var(--s5); border-right: 1px solid var(--color-border); }
.trust-item:last-child { border-right: none; }
.trust-item__icon { color: var(--color-gold); flex-shrink: 0; }
.trust-item__title { font-family: var(--font-display); font-size: var(--text-sm); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text); line-height: 1.2; }
.trust-item__sub { font-size: var(--text-xs); color: var(--color-text-muted); margin-top: 2px; }
@media (max-width: 900px) {
  .trust-bar__inner { grid-template-columns: repeat(2, 1fr); }
  .trust-item:nth-child(2) { border-right: none; }
  .trust-item:nth-child(n+3) { border-top: 1px solid var(--color-border); }
}
@media (max-width: 560px) {
  .trust-bar__inner { grid-template-columns: 1fr; }
  .trust-item { border-right: none; border-top: 1px solid var(--color-border); padding: var(--s5) var(--s4); }
  .trust-item:first-child { border-top: none; }
}

/* ─── MARQUEE ────────────────────────────────────────────── */
.marquee-strip { background: var(--color-gold); padding-block: var(--s3); overflow: hidden; }
.marquee-track { display: flex; gap: var(--s8); animation: marquee 32s linear infinite; width: max-content; }
.marquee-track span { font-family: var(--font-display); font-size: var(--text-sm); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #08090b; white-space: nowrap; }
.marquee-track .dot { opacity: 0.4; font-size: 0.5em; vertical-align: middle; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ─── PAGE HERO ──────────────────────────────────────────── */
.page-hero { padding-top: calc(76px + clamp(var(--s12), 8vw, var(--s24))); padding-bottom: clamp(var(--s12), 6vw, var(--s20)); background: var(--color-surface); border-bottom: 1px solid var(--color-border); position: relative; overflow: hidden; }
.page-hero__bg { position: absolute; inset: 0; opacity: 0.08; }
.page-hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.page-hero__label { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-gold); margin-bottom: var(--s4); }
.page-hero__title { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 900; text-transform: uppercase; letter-spacing: -0.02em; line-height: 0.95; color: var(--color-text); margin-bottom: var(--s5); position: relative; word-break: break-word; /* FIX */ }
.page-hero__sub { font-size: var(--text-md); color: var(--color-text-muted); max-width: 60ch; line-height: 1.7; font-weight: 300; position: relative; }

/* ─── CTA BAND ───────────────────────────────────────────── */
.cta-band { background: var(--color-surface); border-top: 1px solid var(--color-border); position: relative; overflow: hidden; }
.cta-band::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 100% at 80% 50%, rgba(200,137,30,0.07) 0%, transparent 70%); pointer-events: none; }
.cta-band__inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--s8); position: relative; }
/* FIX: CTA button full-width + stacked on mobile */
@media (max-width: 600px) {
  .cta-band__inner { flex-direction: column; align-items: stretch; }
  .cta-band__inner .btn { text-align: center; justify-content: center; }
}

/* ─── PROCESS STEPS ──────────────────────────────────────── */
.process-steps { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1px; background: var(--color-border); border: 1px solid var(--color-border); border-radius: var(--r-lg); overflow: hidden; }
@media (max-width: 560px) { .process-steps { grid-template-columns: repeat(2, 1fr); } } /* FIX: 2-col is more readable than 1-col on mobile */
.process-step { background: var(--color-surface); padding: var(--s8) var(--s6); }
.process-step__num { font-family: var(--font-display); font-size: 4rem; font-weight: 900; color: var(--color-gold-dim); line-height: 1; margin-bottom: var(--s4); letter-spacing: -0.04em; }
.process-step h3 { font-family: var(--font-display); font-size: var(--text-base); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text); margin-bottom: var(--s2); }
.process-step p { font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.7; }

/* ─── HIGHLIGHT BOX ──────────────────────────────────────── */
.highlight-box { background: var(--color-gold-dim); border: 1px solid var(--color-gold-border); border-radius: var(--r-lg); padding: clamp(var(--s8), 4vw, var(--s12)); position: relative; overflow: hidden; }
.highlight-box::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--color-gold), var(--color-gold-light)); }
.highlight-box--green { background: var(--color-green-dim); border-color: var(--color-green-border); }
.highlight-box--green::before { background: linear-gradient(90deg, var(--color-green), var(--color-green-light)); }

/* ─── LEADER CARDS ───────────────────────────────────────── */
.leader-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: var(--s6); } /* FIX: min() prevents overflow */
.leader-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--r-lg); overflow: hidden; transition: border-color var(--t); }
.leader-card:hover { border-color: var(--color-gold-border); }
.leader-card__img { width: 100%; aspect-ratio: 3/2; background: var(--color-surface-2); display: flex; align-items: center; justify-content: center; border-bottom: 1px solid var(--color-border); overflow: hidden; }
.leader-card__img img { width: 100%; height: 100%; object-fit: cover; }
.leader-card__placeholder { font-family: var(--font-display); font-size: 5rem; font-weight: 900; color: var(--color-gold); opacity: 0.18; }
.leader-card__body { padding: var(--s6); }
.leader-card__name { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 800; text-transform: uppercase; color: var(--color-text); line-height: 1.05; }
.leader-card__role { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--color-gold); margin-top: var(--s1); margin-bottom: var(--s4); }
.leader-card__bio { font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.75; }

/* ─── QUOTE ──────────────────────────────────────────────── */
.quote-block { border-left: 3px solid var(--color-gold); padding: var(--s6) var(--s8); background: var(--color-gold-dim); border-radius: 0 var(--r-md) var(--r-md) 0; }
@media (max-width: 560px) { .quote-block { padding: var(--s5); } } /* FIX */
.quote-block blockquote { font-size: var(--text-lg); font-style: italic; font-weight: 300; color: var(--color-text); line-height: 1.65; margin-bottom: var(--s3); max-width: none; }
.quote-block cite { font-size: var(--text-xs); color: var(--color-gold); font-style: normal; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; }

/* ─── VALUES GRID ────────────────────────────────────────── */
.values-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: var(--s4); } /* FIX: min() */
.value-item { padding: var(--s6); border: 1px solid var(--color-border); border-radius: var(--r-md); background: var(--color-surface); transition: border-color var(--t); }
.value-item:hover { border-color: var(--color-gold-border); }
.value-item__num { font-family: var(--font-display); font-size: 3rem; font-weight: 900; color: var(--color-gold-dim); line-height: 1; margin-bottom: var(--s3); letter-spacing: -0.04em; }
.value-item h3 { font-family: var(--font-display); font-size: var(--text-base); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text); margin-bottom: var(--s2); }
.value-item p { font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.7; }

/* ─── CONTACT FORM ───────────────────────────────────────── */
.contact-layout { display: grid; grid-template-columns: 1fr 1.6fr; gap: clamp(var(--s10), 6vw, var(--s20)); align-items: start; }
@media (max-width: 860px) { .contact-layout { grid-template-columns: 1fr; } }
.contact-info__item { display: flex; gap: var(--s4); margin-bottom: var(--s6); padding-bottom: var(--s6); border-bottom: 1px solid var(--color-divider); }
.contact-info__item:last-child { border-bottom: none; }
.contact-info__icon { color: var(--color-gold); flex-shrink: 0; margin-top: 2px; }
.contact-info__label { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: var(--s1); }
.contact-info__value { font-size: var(--text-base); color: var(--color-text); font-weight: 500; }
.form-group { margin-bottom: var(--s5); }
.form-group label { display: block; font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: var(--s2); }
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border-light);
  border-radius: var(--r-md);
  padding: var(--s4) var(--s4);
  font-size: 1rem; /* FIX: min 16px to prevent iOS zoom on focus */
  color: var(--color-text);
  transition: border-color var(--t), box-shadow var(--t);
  outline: none;
  /* FIX: ensure correct box model */
  -webkit-appearance: none;
  appearance: none;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  border-color: var(--color-gold);
  box-shadow: 0 0 0 3px var(--color-gold-dim);
}
.form-group textarea { resize: vertical; min-height: 140px; }
.form-group select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238c95a4' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 44px;
  min-height: 48px; /* FIX: iOS needs bigger select target */
  cursor: pointer;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
@media (max-width: 560px) { .form-row { grid-template-columns: 1fr; } } /* FIX */

/* ─── BACKGROUND UTILITIES ───────────────────────────────── */
.bg-dark    { background: var(--color-surface); }
.bg-darker  { background: var(--color-surface-2); }
.bg-surface { background: var(--color-surface-3); }

/* ─── FOOTER ─────────────────────────────────────────────── */
.footer {
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  padding-top: clamp(var(--s16), 6vw, var(--s24));
  padding-bottom: max(var(--s10), env(safe-area-inset-bottom)); /* FIX: iPhone notch */
}
.footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.5fr; gap: clamp(var(--s8), 4vw, var(--s16)); margin-bottom: var(--s12); }
.footer__brand { font-family: var(--font-display); font-size: 1.35rem; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text); margin-bottom: var(--s3); }
.footer__brand em { color: var(--color-gold); font-style: normal; }
.footer__tagline { font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.7; max-width: 32ch; margin-bottom: var(--s6); }
.footer__col-title { font-family: var(--font-display); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text); margin-bottom: var(--s4); }
.footer__links { list-style: none; display: flex; flex-direction: column; gap: var(--s3); }
.footer__links a { font-size: var(--text-sm); color: var(--color-text-muted); transition: color var(--t); }
.footer__links a:hover { color: var(--color-gold); }
.footer__contact-line { display: flex; align-items: flex-start; gap: var(--s3); margin-bottom: var(--s4); font-size: var(--text-sm); color: var(--color-text-muted); }
.footer__contact-line svg { flex-shrink: 0; color: var(--color-gold); margin-top: 2px; }
.footer__bottom { border-top: 1px solid var(--color-border); padding-top: var(--s6); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--s4); }
.footer__copy { font-size: var(--text-xs); color: var(--color-text-faint); }
.footer__legal { display: flex; gap: var(--s6); }
.footer__legal a { font-size: var(--text-xs); color: var(--color-text-faint); transition: color var(--t); }
.footer__legal a:hover { color: var(--color-text-muted); }
@media (max-width: 900px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) {
  .footer__grid { grid-template-columns: 1fr; }
  .footer__bottom { flex-direction: column; align-items: flex-start; } /* FIX */
  .footer__legal { gap: var(--s4); }
}

/* ─── SCROLL ANIMATIONS ──────────────────────────────────── */
.fade-up { opacity: 0; transform: translateY(28px); transition: opacity 0.65s var(--ease), transform 0.65s var(--ease); }
.fade-up.is-visible { opacity: 1; transform: translateY(0); }
.fade-up:nth-child(2) { transition-delay: 0.08s; }
.fade-up:nth-child(3) { transition-delay: 0.16s; }
.fade-up:nth-child(4) { transition-delay: 0.24s; }
.fade-up:nth-child(5) { transition-delay: 0.32s; }
.fade-up:nth-child(6) { transition-delay: 0.40s; }

/* ─── MISC ───────────────────────────────────────────────── */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border-width: 0; }
.text-center { text-align: center; }
.divider-line { width: 100%; height: 1px; background: var(--color-border); }
.licence-badge { display: inline-flex; align-items: center; gap: var(--s3); background: var(--color-gold-dim); border: 1px solid var(--color-gold-border); border-radius: var(--r-full); padding: 0.4rem var(--s4); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-gold-light); }

/* ─── SERVICES PAGE — INLINE GRID OVERRIDES (MOBILE) ────── */
/* FIX: inline grid-template-columns on services page that break mobile */
@media (max-width: 600px) {
  /* Velocetane stats 3-col becomes 2-col */
  .highlight-box [style*="minmax(180px"] {
    grid-template-columns: 1fr 1fr !important;
  }
  /* Solar 2x2 mini-grid becomes 1-col */
  .split [style*="grid-template-columns:1fr 1fr"],
  .split [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
}
/* FIX: index page Velocetane licence inner 2-col goes 1-col on mobile */
@media (max-width: 700px) {
  .highlight-box > div[style*="grid-template-columns:1fr 1fr"],
  .highlight-box > div[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
}