/* ==========================================================================
   Galvitech — console repairs
   Animated tech background + page styles.
   Original design: canvas node-mesh + low-poly facets + grid + aurora glow.
   ========================================================================== */

:root {
  --g-navy-900: #04070f;
  --g-navy-800: #070c18;
  --g-navy-700: #0b1224;
  --g-navy-600: #121c33;
  --g-line:     rgba(255, 255, 255, .09);
  --g-line-2:   rgba(255, 255, 255, .16);
  --g-text:     #e6edf9;
  --g-text-dim: #93a4c4;
  --g-text-mut: #6b7c9e;
  --g-cyan:     #22d3ee;
  --g-blue:     #2563eb;
  --g-blue-lt:  #3b82f6;
  --g-amber:    #fbbf24;
  --g-wa:       #25d366;
  --g-radius:   16px;
  --g-max:      1200px;
  --g-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 84px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--g-font);
  background: var(--g-navy-900);
  color: var(--g-text);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--g-cyan); }

h1, h2, h3, h4 { line-height: 1.15; margin: 0 0 .5em; font-weight: 800; letter-spacing: -.02em; }
h1 { font-size: clamp(2rem, 5.2vw, 3.4rem); }
h2 { font-size: clamp(1.5rem, 3.4vw, 2.25rem); }
h3 { font-size: clamp(1.1rem, 2vw, 1.35rem); }
p  { margin: 0 0 1rem; }

.g-wrap { width: 100%; max-width: var(--g-max); margin: 0 auto; padding: 0 20px; }
.g-skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--g-blue); color: #fff; padding: 12px 18px; border-radius: 0 0 8px 0;
}
.g-skip:focus { left: 0; }
.g-visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ==========================================================================
   ANIMATED TECH BACKGROUND
   ========================================================================== */
.g-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(1100px 620px at 12% -8%,  rgba(37, 99, 235, .30), transparent 62%),
    radial-gradient(900px  560px at 92% 4%,   rgba(34, 211, 238, .16), transparent 60%),
    radial-gradient(1000px 700px at 50% 108%, rgba(37, 99, 235, .18), transparent 65%),
    linear-gradient(180deg, var(--g-navy-800), var(--g-navy-900) 60%, #02040a);
}

/* low-poly facets */
.g-bg__facets {
  position: absolute; inset: -10%;
  opacity: .5;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1400' height='800' viewBox='0 0 1400 800'%3E%3Cdefs%3E%3Cfilter id='b'%3E%3CfeGaussianBlur stdDeviation='26'/%3E%3C/filter%3E%3C/defs%3E%3Cg filter='url(%23b)' opacity='.5'%3E%3Cpolygon points='0,0 420,0 200,260' fill='%232563eb' opacity='.16'/%3E%3Cpolygon points='420,0 700,120 200,260' fill='%2322d3ee' opacity='.09'/%3E%3Cpolygon points='700,120 1100,0 980,300' fill='%233b82f6' opacity='.13'/%3E%3Cpolygon points='1100,0 1400,0 1400,240' fill='%230b1224' opacity='.5'/%3E%3Cpolygon points='200,260 700,120 520,520' fill='%230b1224' opacity='.45'/%3E%3Cpolygon points='980,300 1400,240 1200,560' fill='%2322d3ee' opacity='.07'/%3E%3Cpolygon points='520,520 980,300 700,800' fill='%232563eb' opacity='.10'/%3E%3Cpolygon points='700,800 1200,560 1400,800' fill='%230b1224' opacity='.5'/%3E%3C/g%3E%3C/svg%3E");
  background-size: cover;
  background-position: center;
  animation: gFacets 34s ease-in-out infinite alternate;
}
@keyframes gFacets {
  0%   { transform: scale(1)    translate3d(0, 0, 0); }
  100% { transform: scale(1.08) translate3d(-2%, -1.5%, 0); }
}

/* blueprint grid */
.g-bg__grid {
  position: absolute; inset: 0;
  opacity: .5;
  background-image:
    linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 20%, transparent 78%);
  mask-image: radial-gradient(120% 90% at 50% 0%, #000 20%, transparent 78%);
}

/* canvas node mesh */
.g-bg__mesh {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  opacity: .85;
}

/* aurora sweep */
.g-bg__aurora {
  position: absolute;
  top: -30%; left: -30%;
  width: 70%; height: 120%;
  background: linear-gradient(90deg, transparent, rgba(34, 211, 238, .10), transparent);
  filter: blur(40px);
  animation: gAurora 18s linear infinite;
}
@keyframes gAurora {
  0%   { transform: translateX(0)     rotate(8deg); }
  100% { transform: translateX(240%)  rotate(8deg); }
}

@media (prefers-reduced-motion: reduce) {
  .g-bg__facets, .g-bg__aurora { animation: none; }
  .g-bg__mesh { display: none; }
}

/* ==========================================================================
   HEADER
   ========================================================================== */
.g-head {
  position: sticky; top: 0; z-index: 100;
  background: rgba(4, 7, 15, .82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--g-line);
}
.g-head__in { display: flex; align-items: center; gap: 16px; height: 68px; }

/* The header is one row that has to fit a logo, eight links and the Call
   button on a single line. Body content is capped at 1200px, but that cap
   squeezed the nav from the 928px it actually needs down to 803px, and the
   last link spilled straight over the Call button at every desktop width
   from 1320px up - which is most laptops. The header gets its own, slightly
   wider container. Body measure is unaffected. */
.g-head .g-head__in { max-width: 1400px; }

/* Brand lockup. The logo artwork is white with a transparent background, so it
   sits directly on the dark background - no white "plate" faking a light
   surface, which is what the previous dark-on-white logo required. */
.g-head__plate {
  display: flex; align-items: center; gap: 11px; text-decoration: none; flex: 0 0 auto;
}
.g-head__logo {
  height: 40px; width: auto; display: block;
}
.g-head__plate:hover .g-head__logo { opacity: .88; }
.g-head__plate:focus-visible { outline: 3px solid var(--g-cyan); outline-offset: 4px; border-radius: 6px; }
.g-head__logo { transition: opacity .18s ease; }

/* Retained for the footer/other lockups that still pair a logo with text. */
.g-head__name { font-size: 15px; font-weight: 800; letter-spacing: -.01em; color: #fff; }
.g-head__name small { display: block; font-size: 9.5px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--g-text-mut); }

.g-nav { margin-left: auto; min-width: 0; }
.g-nav ul { display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; }
.g-nav a {
  display: block;
  margin-top: -2px; padding: 8px 6px; border-radius: 8px; font-size: 13.5px;
  font-weight: 600; color: var(--g-text-dim); text-decoration: none; white-space: nowrap;
  transition: color .15s ease, background .15s ease;
}
.g-nav a:hover, .g-nav a:focus-visible { color: #fff; background: rgba(255, 255, 255, .07); outline: none; }
.g-nav a:focus-visible { box-shadow: 0 0 0 2px var(--g-cyan); }

.g-head__cta { display: flex; gap: 9px; margin-left: 6px; flex: 0 0 auto; }

/* The booking button is the one thing in this header that must never be
   hidden. It used to be the last nav link, which meant it vanished along
   with the nav on a 1280px laptop, while the Call button stayed and took
   the space. That is backwards: booking is the action we want, Call is the
   fallback. So booking becomes a button here and Call waits its turn. */
.g-head__book { white-space: nowrap; }

/* Call is the fallback, so it is the first thing to go when the row runs
   short. The booking button stays until the header collapses entirely. */
@media (max-width: 1419px) {
  .g-head__cta .g-btn--ghost { display: none; }
}

.g-burger {
  display: none; margin-left: auto;
  width: 42px; height: 42px; border-radius: 10px; border: 1px solid var(--g-line-2);
  background: transparent; cursor: pointer; color: #fff; font-size: 19px;
}

/* Eight nav links plus the logo plus the booking button need about 1325px,
   so the burger takes over below 1320px - the first width measured clear.
   Below that the booking button leaves the header and reappears in the
   sticky bar pinned to the foot of the screen, so it is never simply
   missing. */
@media (max-width: 1319px) {
  .g-nav {
    position: fixed; inset: 68px 0 auto 0;
    background: var(--g-navy-800); border-bottom: 1px solid var(--g-line);
    padding: 12px 20px 20px; display: none;
    z-index: 99;
  }
  .g-nav.is-open { display: block; }
  .g-nav ul { flex-direction: column; gap: 2px; }
  .g-nav a { padding: 12px 10px; font-size: 15px; }
  .g-burger { display: block; }
  .g-head__cta { display: none; }
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.g-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 22px; border-radius: 11px; font-size: 14.5px; font-weight: 700;
  text-decoration: none; cursor: pointer; border: 1px solid transparent;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease;
  white-space: nowrap;
}
.g-btn:focus-visible { outline: 3px solid var(--g-cyan); outline-offset: 3px; }
.g-btn--primary {
  background: linear-gradient(135deg, var(--g-blue-lt), var(--g-blue) 55%, #1e40af);
  color: #fff; box-shadow: 0 10px 26px -10px rgba(37, 99, 235, .9);
}
.g-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 16px 32px -12px rgba(37, 99, 235, 1); }
.g-btn--wa { background: var(--g-wa); color: #04310f; box-shadow: 0 10px 26px -10px rgba(37, 211, 102, .85); }
.g-btn--wa:hover { background: #1da851; transform: translateY(-2px); }
.g-btn--ghost { background: rgba(255, 255, 255, .05); color: var(--g-text); border-color: var(--g-line-2); }
.g-btn--ghost:hover { background: rgba(255, 255, 255, .1); transform: translateY(-2px); }
.g-btn svg { width: 17px; height: 17px; flex: 0 0 auto; }

/* ==========================================================================
   HERO
   ========================================================================== */
.g-hero { position: relative; padding: clamp(56px, 9vw, 104px) 0 clamp(48px, 7vw, 84px); }
.g-hero__in { display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: center; }
@media (max-width: 940px) { .g-hero__in { grid-template-columns: 1fr; gap: 34px; } }

.g-hero__kicker {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--g-cyan); background: rgba(34, 211, 238, .1);
  border: 1px solid rgba(34, 211, 238, .3); border-radius: 999px; padding: 6px 14px; margin-bottom: 20px;
}
.g-hero__kicker::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--g-cyan);
  box-shadow: 0 0 0 4px rgba(34, 211, 238, .18);
  animation: gPulse 2.4s ease-in-out infinite;
}
@keyframes gPulse { 0%,100% { opacity: 1 } 50% { opacity: .35 } }

.g-hero h1 { margin-bottom: 18px; }
.g-hero h1 span { color: var(--g-cyan); }
.g-hero__lede { font-size: clamp(1rem, 1.9vw, 1.15rem); color: var(--g-text-dim); max-width: 60ch; margin-bottom: 26px; }
.g-hero__lede strong { color: var(--g-text); }

.g-hero__actions { display: flex; flex-wrap: wrap; gap: 11px; margin-bottom: 28px; }

.g-hero__trust { display: flex; flex-wrap: wrap; gap: 10px 26px; list-style: none; margin: 0; padding: 0; }
.g-hero__trust li { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--g-text-dim); }
.g-hero__trust svg { width: 16px; height: 16px; color: var(--g-cyan); flex: 0 0 auto; }

.g-hero__card {
  position: relative; border-radius: var(--g-radius); overflow: hidden;
  border: 1px solid var(--g-line-2);
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .95);
  background: var(--g-navy-700);
}
.g-hero__card img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; opacity: .92; }
.g-hero__card figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 18px 15px;
  background: linear-gradient(transparent, rgba(4, 7, 15, .94));
  font-size: 12.5px; color: var(--g-text-dim);
}
.g-hero__card figcaption b { color: #fff; display: block; font-size: 13.5px; }

/* ==========================================================================
   SECTIONS
   ========================================================================== */
.g-sec { padding: clamp(48px, 7vw, 84px) 0; }
.g-sec--alt { background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .022) 12%, rgba(255, 255, 255, .022) 88%, transparent); }

.g-sec__head { max-width: 68ch; margin-bottom: 38px; }
.g-sec__head p { color: var(--g-text-dim); font-size: 1.02rem; }
.g-eyebrow {
  display: block;
  margin-top: -2px; font-size: 11px; font-weight: 700; letter-spacing: .17em;
  text-transform: uppercase; color: var(--g-cyan); margin-bottom: 11px;
}

/* ==========================================================================
   CARDS / GRIDS
   ========================================================================== */
.g-grid { display: grid; gap: 18px; }
.g-grid--3 { grid-template-columns: repeat(3, 1fr); }
.g-grid--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px) { .g-grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .g-grid--3, .g-grid--2 { grid-template-columns: 1fr; } }

.g-card {
  padding: 24px; border-radius: var(--g-radius);
  background: rgba(255, 255, 255, .035);
  border: 1px solid var(--g-line);
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
.g-card:hover { transform: translateY(-3px); border-color: rgba(34, 211, 238, .4); background: rgba(255, 255, 255, .055); }
.g-card h3 { font-size: 1.06rem; margin-bottom: 8px; }
.g-card p { margin: 0; font-size: 14px; color: var(--g-text-dim); }
.g-card__ico {
  width: 42px; height: 42px; border-radius: 11px; margin-bottom: 15px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(37, 99, 235, .3), rgba(34, 211, 238, .2));
  border: 1px solid rgba(34, 211, 238, .22);
}
.g-card__ico svg { width: 21px; height: 21px; color: var(--g-cyan); }

/* ==========================================================================
   PRICING
   ========================================================================== */
.g-price {
  border-radius: var(--g-radius); padding: 26px;
  background: rgba(255, 255, 255, .04); border: 1px solid var(--g-line);
  display: flex; flex-direction: column;
}
.g-price--pop {
  border-color: rgba(34, 211, 238, .45);
  background: linear-gradient(180deg, rgba(34, 211, 238, .08), rgba(255, 255, 255, .03));
  box-shadow: 0 24px 60px -30px rgba(34, 211, 238, .4);
}
.g-price__badge {
  align-self: flex-start; font-size: 10px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: #04131a; background: var(--g-cyan);
  padding: 4px 10px; border-radius: 999px; margin-bottom: 13px;
}
.g-price h3 { font-size: 1.1rem; margin-bottom: 4px; }
.g-price__from { font-size: 12.5px; color: var(--g-text-mut); margin-bottom: 14px; }
.g-price__amt { font-size: 2.1rem; font-weight: 800; letter-spacing: -.03em; color: #fff; margin-bottom: 4px; }
.g-price__amt span { font-size: .95rem; font-weight: 600; color: var(--g-text-mut); }
.g-price ul { list-style: none; margin: 16px 0 20px; padding: 0; display: grid; gap: 9px; flex: 1; }
.g-price li { display: flex; gap: 10px; font-size: 13.5px; color: var(--g-text-dim); }
.g-price li svg { width: 15px; height: 15px; color: var(--g-cyan); flex: 0 0 auto; margin-top: 3px; }

/* ==========================================================================
   SPLIT / MEDIA
   ========================================================================== */
.g-split { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; }
@media (max-width: 860px) { .g-split { grid-template-columns: 1fr; gap: 28px; } }
.g-split img { border-radius: var(--g-radius); border: 1px solid var(--g-line); }

.g-list { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 13px; }
.g-list li { display: flex; gap: 13px; font-size: 14.5px; color: var(--g-text-dim); }
.g-list li svg { width: 19px; height: 19px; color: var(--g-cyan); flex: 0 0 auto; margin-top: 3px; }
.g-list b { color: var(--g-text); }

/* ==========================================================================
   REVIEWS
   ========================================================================== */
.g-reviews { position: relative; }
.g-reviews__stage {
  min-height: 210px;
  border-radius: var(--g-radius); border: 1px solid var(--g-line);
  background: rgba(255, 255, 255, .035);
  padding: 32px 34px; display: flex; flex-direction: column; justify-content: center;
}
.g-reviews__stars { color: var(--g-amber); font-size: 18px; letter-spacing: 3px; margin-bottom: 16px; }
.g-reviews__quote { font-size: clamp(1.02rem, 2vw, 1.22rem); line-height: 1.68; color: #fff; margin-bottom: 22px; }
.g-reviews__by { display: flex; align-items: center; gap: 13px; }
.g-reviews__av {
  width: 44px; height: 44px; border-radius: 50%; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--g-blue), var(--g-cyan));
  color: #fff; font-weight: 800; font-size: 16px;
}
.g-reviews__who b { display: block; font-size: 14px; color: #fff; }
.g-reviews__who span { font-size: 12px; color: var(--g-text-mut); }
.g-reviews__nav { display: flex; align-items: center; gap: 10px; margin-top: 18px; }
.g-reviews__nav button {
  width: 40px; height: 40px; border-radius: 10px; cursor: pointer;
  background: rgba(255, 255, 255, .06); border: 1px solid var(--g-line-2);
  color: #fff; font-size: 16px; transition: background .15s ease;
}
.g-reviews__nav button:hover { background: rgba(255, 255, 255, .12); }
.g-reviews__nav button:focus-visible { outline: 2px solid var(--g-cyan); outline-offset: 2px; }
.g-reviews__count { font-size: 12.5px; color: var(--g-text-mut); margin-left: 4px; }
.g-reviews.is-fading .g-reviews__stage { opacity: 0; transform: translateY(6px); }
.g-reviews__stage { transition: opacity .3s ease, transform .3s ease; }

/* ==========================================================================
   SOCIAL
   ========================================================================== */
.g-social { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 760px) { .g-social { grid-template-columns: repeat(2, 1fr); } }
.g-social__item {
  border-radius: 13px; overflow: hidden; border: 1px solid var(--g-line);
  background: rgba(255, 255, 255, .035); text-decoration: none; color: inherit;
  transition: transform .18s ease, border-color .18s ease;
}
.g-social__item:hover { transform: translateY(-3px); border-color: rgba(34, 211, 238, .4); }
.g-social__item img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.g-social__cap { padding: 11px 13px; font-size: 12.5px; color: var(--g-text-dim); line-height: 1.5; }
.g-social__cap span { display: block; font-size: 10.5px; color: var(--g-text-mut); margin-top: 5px; }

/* ==========================================================================
   FORM
   ========================================================================== */
.g-form-wrap {
  display: grid; grid-template-columns: 1fr 1.15fr; gap: 40px; align-items: start;
}
@media (max-width: 860px) { .g-form-wrap { grid-template-columns: 1fr; } }

.g-form {
  padding: 28px; border-radius: var(--g-radius);
  background: rgba(255, 255, 255, .04); border: 1px solid var(--g-line-2);
}
.g-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
@media (max-width: 520px) { .g-form__row { grid-template-columns: 1fr; } }

.g-field { margin-bottom: 15px; }
.g-field label { display: block; font-size: 12.5px; font-weight: 700; letter-spacing: .03em; color: var(--g-text); margin-bottom: 7px; }
.g-field label .req { color: var(--g-cyan); }

.g-field input, .g-field select, .g-field textarea {
  width: 100%; padding: 12px 14px; border-radius: 10px;
  background: rgba(4, 7, 15, .6); border: 1px solid var(--g-line-2);
  color: var(--g-text); font-size: 15px; font-family: inherit;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.g-field select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2393a4c4' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; padding-right: 38px;
}
.g-field input:focus, .g-field select:focus, .g-field textarea:focus {
  outline: none; border-color: var(--g-cyan);
  box-shadow: 0 0 0 3px rgba(34, 211, 238, .18);
}
.g-field textarea { resize: vertical; min-height: 116px; }
.g-field__hint { font-size: 11.5px; color: var(--g-text-mut); margin-top: 6px; }
.g-field input::placeholder, .g-field textarea::placeholder { color: #5c6b88; }

/* honeypot — off-screen, not display:none so bots still fill it */
.g-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.g-consent { font-size: 12px; color: var(--g-text-mut); margin: 4px 0 18px; line-height: 1.55; }
.g-consent a { color: var(--g-text-dim); }

.g-form__alt {
  margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--g-line);
  text-align: center; font-size: 13.5px; color: var(--g-text-dim);
}
.g-form__alt a { font-weight: 700; text-decoration: none; }
.g-form__alt a:hover { text-decoration: underline; }

/* info column */
.g-info { display: grid; gap: 18px; }
.g-info__card {
  padding: 22px; border-radius: var(--g-radius); border: 1px solid var(--g-line);
  background: rgba(255, 255, 255, .03);
}
.g-info__card h3 { font-size: .96rem; margin-bottom: 13px; }
.g-info__row { display: flex; gap: 12px; font-size: 14px; color: var(--g-text-dim); margin-bottom: 11px; }
.g-info__row:last-child { margin-bottom: 0; }
.g-info__row svg { width: 17px; height: 17px; color: var(--g-cyan); flex: 0 0 auto; margin-top: 3px; }
.g-info__row a { color: var(--g-text); text-decoration: none; font-weight: 600; }
.g-info__row a:hover { color: var(--g-cyan); }

.g-map {
  border-radius: var(--g-radius); overflow: hidden; border: 1px solid var(--g-line);
  aspect-ratio: 16 / 10; background: var(--g-navy-700);
}
.g-map iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ==========================================================================
   FAQ
   ========================================================================== */
.g-faq { display: grid; gap: 12px; max-width: 900px; }
.g-faq details {
  border-radius: 13px; border: 1px solid var(--g-line);
  background: rgba(255, 255, 255, .032); overflow: hidden;
}
.g-faq summary {
  padding: 17px 22px; cursor: pointer; font-size: 15px; font-weight: 700; color: #fff;
  list-style: none; display: flex; align-items: center; gap: 14px;
}
.g-faq summary::-webkit-details-marker { display: none; }
.g-faq summary::after {
  content: "+"; margin-left: auto; font-size: 20px; font-weight: 400; color: var(--g-cyan);
  transition: transform .2s ease; flex: 0 0 auto;
}
.g-faq details[open] summary::after { transform: rotate(45deg); }
.g-faq summary:focus-visible { outline: 2px solid var(--g-cyan); outline-offset: -2px; }
.g-faq__a { padding: 0 22px 20px; font-size: 14.5px; color: var(--g-text-dim); margin: 0; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.g-foot {
  margin-top: 40px; padding: 44px 0 26px;
  border-top: 1px solid var(--g-line); background: rgba(0, 0, 0, .28);
}
.g-foot__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 34px; }
@media (max-width: 760px) { .g-foot__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .g-foot__grid { grid-template-columns: 1fr; } }
.g-foot h4 { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--g-text-mut); margin-bottom: 15px; }
.g-foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.g-foot a { color: var(--g-text-dim); text-decoration: none; font-size: 14px; }
.g-foot a:hover { color: var(--g-cyan); }
.g-foot__bar {
  margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--g-line);
  display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between;
  font-size: 12.5px; color: var(--g-text-mut);
}

/* ==========================================================================
   REVEAL ON SCROLL
   ========================================================================== */
.rv { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s cubic-bezier(.22, .9, .3, 1); }
.rv.in { opacity: 1; transform: none; }

/* ==========================================================================
   OWNER / WHO YOU HANDLE YOUR DEVICE WITH
   --------------------------------------------------------------------------
   Scoped to .g-owner so nothing here can leak into another section. The
   reveal animation uses the same .rv pattern as the rest of the site.
   ========================================================================== */

.g-owner {
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 56px);
  align-items: start;
}
.g-owner__photo {
  margin: 0;
  position: relative;
}
.g-owner__photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--g-radius);
  border: 1px solid var(--g-line-2);
  box-shadow: 0 18px 48px rgba(0, 0, 0, .42);
}
/* A hairline of brand cyan along the top edge. Decorative only. */
.g-owner__photo::after {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  border-radius: var(--g-radius) var(--g-radius) 0 0;
  background: linear-gradient(90deg, var(--g-cyan), transparent 72%);
  pointer-events: none;
}
.g-owner__body h2 { margin-bottom: 14px; }
.g-owner__body p {
  color: var(--g-text-dim);
  font-size: 1.02rem;
  max-width: 62ch;
}
.g-owner__role {
  display: inline-block;
  margin: 0 0 18px;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid rgba(34, 211, 238, .32);
  background: rgba(34, 211, 238, .08);
  color: var(--g-cyan);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
}
.g-owner__creds {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px 26px;
}
.g-owner__creds li {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  padding: 11px 0;
  border-top: 1px solid var(--g-line);
  font-size: .94rem;
  line-height: 1.45;
  color: var(--g-text);
}
.g-owner__creds li::before {
  content: '';
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  margin-top: 7px;
  border-radius: 50%;
  background: var(--g-cyan);
  box-shadow: 0 0 0 3px rgba(34, 211, 238, .16);
}
.g-owner__creds b {
  display: block;
  font-weight: 600;
}
.g-owner__creds span {
  display: block;
  font-size: .84rem;
  color: var(--g-text-mut);
}
/* The POPIA line is the point of this section, so it gets its own treatment
   rather than sitting in the list looking like any other credential. */
.g-owner__popia {
  margin-top: 26px;
  padding: 18px 20px;
  border-radius: 14px;
  border: 1px solid rgba(34, 211, 238, .26);
  background: linear-gradient(135deg, rgba(34, 211, 238, .09), rgba(37, 99, 235, .06));
}
.g-owner__popia h3 {
  margin: 0 0 8px;
  font-size: .98rem;
  letter-spacing: .01em;
}
.g-owner__popia p {
  margin: 0;
  font-size: .92rem;
  color: var(--g-text-dim);
}
.g-owner__popia a {
  color: var(--g-cyan);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.g-owner__popia a:hover { color: #67e8f9; }
.g-owner__popia a:focus-visible {
  outline: 3px solid var(--g-cyan);
  outline-offset: 3px;
  border-radius: 3px;
}

@media (max-width: 760px) {
  .g-owner {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }
  .g-owner__photo {
    max-width: 260px;
  }
  .g-owner__creds {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ==========================================================================
   PROSE
   --------------------------------------------------------------------------
   Long-form legal / policy text. Constrained measure, generous leading,
   and links that are obvious without being loud.
   ========================================================================== */

/* Centred, like a readable column. Left-aligned inside a 1200px
   container it strands the text against the left edge and leaves
   half the screen empty. */
.g-prose { max-width: 74ch; margin-inline: auto; }
.g-prose h2 {
  margin: 44px 0 14px;
  font-size: clamp(1.16rem, 2.1vw, 1.38rem);
  letter-spacing: -.01em;
  scroll-margin-top: 96px;
}
.g-prose > h2:first-child { margin-top: 0; }
.g-prose h3 {
  margin: 28px 0 10px;
  font-size: 1.04rem;
  color: var(--g-text);
}
.g-prose p {
  margin: 0 0 15px;
  color: var(--g-text-dim);
  font-size: 1rem;
  line-height: 1.72;
}
.g-prose ul {
  margin: 0 0 18px;
  padding-left: 22px;
}
.g-prose li {
  margin-bottom: 9px;
  color: var(--g-text-dim);
  line-height: 1.66;
}
.g-prose li::marker { color: var(--g-cyan); }
.g-prose b { color: var(--g-text); font-weight: 600; }
.g-prose small { color: var(--g-text-mut); font-size: .86rem; }
.g-prose a {
  color: var(--g-cyan);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color .16s ease;
}
.g-prose a:hover { color: #67e8f9; }
.g-prose a:focus-visible {
  outline: 3px solid var(--g-cyan);
  outline-offset: 3px;
  border-radius: 3px;
}

@media (max-width: 620px) {
  .g-prose h2 { margin-top: 34px; }
}


/* ==========================================================================
   TEAM
   --------------------------------------------------------------------------
   A face at 490px is a mugshot, not a portrait. The team page caps the
   hero image and shows everyone at a size a person actually looks at.
   ========================================================================== */

.g-hero__in--team { grid-template-columns: 1.35fr .65fr; }
.g-hero__in--team .g-hero__card { max-width: 300px; }
@media (max-width: 940px) {
  .g-hero__in--team { grid-template-columns: 1fr; }
  .g-hero__in--team .g-hero__card { max-width: 260px; }
}

.g-team {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
}
@media (max-width: 900px) { .g-team { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .g-team { grid-template-columns: minmax(0, 1fr); } }

.g-team__card { text-align: center; }
.g-team__face {
  width: 100%;
  max-width: 168px;
  aspect-ratio: 1 / 1;
  margin: 0 auto 15px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid var(--g-line-2);
  background: var(--g-navy-700);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .42);
}
.g-team__face img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Placeholder shown until a photo is supplied. Reads as deliberate. */
.g-team__face--mono {
  display: grid;
  place-items: center;
  font-size: 2.4rem;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--g-cyan);
  background:
    radial-gradient(120% 120% at 30% 20%, rgba(34, 211, 238, .18), transparent 60%),
    linear-gradient(160deg, var(--g-navy-600), var(--g-navy-800));
}
.g-team__name { margin: 0 0 4px; font-size: 1.04rem; }
.g-team__role {
  margin: 0;
  font-size: .84rem;
  letter-spacing: .03em;
  color: var(--g-text-mut);
}
.g-team__role--owner { color: var(--g-cyan); font-weight: 600; }

/* Shop front photograph. Capped at 620px because the source is only 680px
   wide - shown larger it goes soft, and a soft photo of the premises is
   worse than no photo. */
.g-shopfront {
  margin: 0 0 26px;
  max-width: 620px;
  border-radius: var(--g-radius);
  overflow: hidden;
  border: 1px solid var(--g-line-2);
  background: var(--g-navy-700);
  box-shadow: 0 20px 46px rgba(0, 0, 0, .42);
}
.g-shopfront img { display: block; width: 100%; height: auto; }
.g-shopfront figcaption {
  padding: 12px 16px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--g-text-dim);
  border-top: 1px solid var(--g-line);
}
.g-shopfront figcaption b { color: #fff; display: block; font-size: 13.5px; margin-bottom: 2px; }

/* ==========================================================================
   SERVICE ILLUSTRATION
   --------------------------------------------------------------------------
   Illustrative photo on a service page. Deliberately separate from the
   jobs gallery: nothing in here is presented as work Galvitech has done,
   because most of it is stock.
   ========================================================================== */

.g-shot {
  margin: 0 0 26px;
  border-radius: var(--g-radius);
  overflow: hidden;
  border: 1px solid var(--g-line-2);
  background: var(--g-navy-700);
  box-shadow: 0 20px 46px rgba(0, 0, 0, .42);
}
.g-shot img { display: block; width: 100%; height: auto; }
.g-shot figcaption {
  padding: 12px 16px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--g-text-mut);
  border-top: 1px solid var(--g-line);
}
.g-shot figcaption b { color: var(--g-text-dim); display: block; font-size: 13px; margin-bottom: 2px; }

/* Two-up: photo beside the service list, where there is room for it. */
.g-shot-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(24px, 4vw, 42px);
  align-items: start;
}
@media (max-width: 820px) { .g-shot-row { grid-template-columns: minmax(0, 1fr); } }
.g-shot-row .g-shot { margin: 0; }


/* ==========================================================================
   STICKY BOOKING BAR
   --------------------------------------------------------------------------
   Below 1300px the header collapses to a burger, which would otherwise take
   the booking button with it. Rather than let the one action we actually
   want disappear, it moves to a bar pinned to the foot of the screen and
   follows you down the page.

   It only appears once the header has already collapsed, so on a desktop it
   never shows and the header button is the one in use.
   ========================================================================== */

.g-stickbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  display: none;
  gap: 10px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgba(4, 7, 15, .94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--g-line-2);
}
.g-stickbar a {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 12px 16px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  text-align: center;
}
.g-stickbar__book {
  background: var(--g-blue);
  color: #fff;
  box-shadow: 0 6px 18px rgba(37, 99, 235, .35);
}
.g-stickbar__call {
  flex: 0 0 auto;
  min-width: 108px;
  background: transparent;
  color: var(--g-text-dim);
  border: 1px solid var(--g-line-2);
}
.g-stickbar svg { width: 18px; height: 18px; flex: 0 0 auto; }
.g-stickbar a:focus-visible {
  outline: 3px solid var(--g-cyan);
  outline-offset: 2px;
}

@media (max-width: 1319px) {
  .g-stickbar { display: flex; }
  /* The WhatsApp launcher injects its own <style> from JavaScript, so it is
     parsed after this file and wins on source order. !important is the honest
     way to say "the sticky bar owns this corner of the screen". */
  .glv-wa { bottom: 78px !important; }
  /* stop the last of the page sitting under the bar */
  .g-foot { padding-bottom: 78px; }
}

@media (min-width: 1320px) {
  .g-stickbar { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .g-stickbar a { transition: none; }
}

/* A short lead paragraph under a page heading. */
.g-prose .g-lede {
  font-size: 1.12rem;
  line-height: 1.6;
  color: var(--g-text-dim);
  margin-bottom: 34px;
}
.g-prose .g-lede b { color: var(--g-text); }

/* Two buttons under long-form copy. */
.g-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 11px;
  margin-top: 34px;
}

/* On a plain prose page a photo can sit narrower than the measure. */
.g-prose .g-shot { max-width: 560px; margin-bottom: 30px; }
/* A person's face needs to stay small. The stock illustration width
   above is far too big for a portrait - it turns a headshot into a
   poster. */
.g-prose .g-shot--face { max-width: 232px; }

/* The review line sits under Cobus's photo. It is the one place on this page
   that leans on someone else's words, so give it a mark of its own rather
   than letting it disappear into the body copy. */
.g-prose .g-rating {
  font-size: 1.06rem;
  line-height: 1.55;
  color: var(--g-text-dim);
  border-left: 2px solid rgba(255,255,255,.14);
  padding: 2px 0 2px 16px;
  margin: 0 0 30px;
}
.g-prose .g-rating b { color: var(--g-text); }
.g-prose .g-rating a { white-space: nowrap; }
@media (max-width: 620px) { .g-prose .g-shot--face { max-width: 180px; } }
.g-prose .g-shot figcaption b { color: var(--g-text); display: block; font-size: 13.5px; margin-bottom: 2px; }
@media (prefers-reduced-motion: reduce) {
  .g-owner__photo { transition: none; }
}

@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; transform: none; transition: none; }
}
/* ==========================================================================
   Client logos — "Businesses we've worked with"
   Each logo sits in a fixed-size white plate so five different brand
   backgrounds read as one even row. Full colour at all times.
   object-fit:contain + object-position:center is what keeps every logo
   centred and fully inside its plate, whatever its aspect ratio.
   ========================================================================== */

.g-clients {
  margin-top: 38px;
  padding-top: 30px;
  border-top: 1px solid var(--g-line);
}

.g-clients__label {
  margin: 0 0 18px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--g-text-mut);
  text-align: center;
}

.g-clients__row {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  gap: 14px;
}

.g-clients__item {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 118px;
  height: 66px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: 0 3px 12px rgba(0, 0, 0, .26);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.g-clients__item:hover {
  transform: translateY(-3px);
  border-color: rgba(34, 211, 238, .45);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .38);
}

.g-clients__item:focus-visible {
  outline: 3px solid var(--g-cyan);
  outline-offset: 3px;
}

.g-clients__item img {
  /* fills the plate's content box exactly, then letterboxes inside it —
     centred, never cropped, never overlapping */
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}

/* Client logos must always render in full colour.
   !important so a stale cached copy of this stylesheet can never grey them
   back out. */
.g-clients__item,
.g-clients__item img,
.g-clients__item img:hover,
.g-clients__item img:focus,
.g-clients__item img:active,
.g-clients__item img:visited {
  filter: none !important;
  opacity: 1 !important;
}

@media (max-width: 560px) {
  .g-clients__row { gap: 10px; }
  .g-clients__item { width: 104px; height: 60px; padding: 9px 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .g-clients__item { transition: none; }
  .g-clients__item:hover { transform: none; }
}