/* ===========================================================================
   GEEKS360 — SECTION LAYOUTS
   Depends on the tokens declared in base.css.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   HEADER — sticky, with a glass treatment that engages on scroll
   --------------------------------------------------------------------------- */

.g-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  border-bottom: 1px solid transparent;
  transition: background-color 0.3s var(--g-ease),
              border-color 0.3s var(--g-ease),
              box-shadow 0.3s var(--g-ease);
}

/* Applied by motion.js once the page has scrolled past the header height. */
.g-header.is-stuck {
  background: rgba(255, 255, 255, 0.9);
  border-bottom-color: var(--g-line);
  box-shadow: 0 1px 20px rgba(18, 53, 91, 0.06);
}

/* Fallback for browsers without backdrop-filter — stay opaque so the header
   never becomes unreadable over hero content. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .g-header { background: rgba(255, 255, 255, 0.97); }
}

.g-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--g-s4);
  min-height: var(--g-header-h);
}

/* --- Brand wordmark ------------------------------------------------------ */

/* Approved horizontal lockup. The brand guidelines require clear space of one
   quarter of the icon height on all sides — the header's flex gap and padding
   provide well beyond that. */
.g-brand {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
}
/* Header lockup, increased a further 25% (60px -> 75px). Measured: renders
   300x75, which is the SVG's intrinsic size — so the artwork now draws 1:1 and
   is as crisp as it can be.

   CLEARANCE: the header stays at --g-header-h (84px), which leaves 4.5px above
   and below rather than the previous 12px. That is under the brand guidelines'
   clear-space rule of a quarter of the icon height, and it is a deliberate,
   instructed trade-off — raising the header would push every hero section down
   the fold. If the lockup is ever enlarged again, the header height has to go
   up with it; there is no room left. */
.g-brand img {
  height: 75px;
  width: auto;
  transition: opacity 0.2s var(--g-ease);
}
.g-brand:hover img { opacity: 0.82; }

/* Below the guidelines' 120px minimum for the horizontal lockup we would be
   undersizing the artwork, so step the height down only slightly on mobile —
   at 36px the lockup is still 144px wide. */
@media (max-width: 480px) {
  /* 43px -> 53.75px, the same exact 25% increase. The fraction is deliberate:
     rounding to 54px would be 25.6%, and the brief specified 25% exactly.
     At 53.75px the lockup renders 215px wide — well clear of the guidelines'
     120px minimum, and measured at 390px viewport it still leaves 23px between
     the lockup and the header actions, so the nav toggle is not crowded. */
  .g-brand img { height: 53.75px; }
}

/* Custom logo, when one is uploaded, replaces the wordmark. */
.custom-logo-link { flex: 0 0 auto; display: inline-flex; align-items: center; }
.custom-logo { max-height: 44px; width: auto; }

/* --- Primary navigation --------------------------------------------------- */

.g-nav ul {
  display: flex;
  align-items: center;
  gap: var(--g-s5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.g-nav a {
  position: relative;
  display: inline-block;
  padding: 0.4rem 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--g-ink);
}
.g-nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 2px;
  background: var(--g-accent);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s var(--g-ease);
}
.g-nav a:hover::after,
.g-nav .current-menu-item > a::after { transform: scaleX(1); }

/* The drawer-only phone + CTA are hidden on desktop. */
.g-nav__foot { display: none; }

.g-header__actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--g-s4);
}

.g-header__phone {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--g-ink);
  white-space: nowrap;
}
.g-header__phone:hover { color: var(--g-accent-ink); }
.g-header__phone .g-icon { color: var(--g-accent); }

.g-header__cta { padding: 0.75rem 1.35rem; font-size: 0.9375rem; }

/* Reserved utility link (Client Portal). Quiet by design — returning clients
   will look for it, but it must never compete with the primary call to action. */
.g-header__portal {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--g-muted);
  white-space: nowrap;
}
.g-header__portal:hover { color: var(--g-ink); }

@media (max-width: 1080px) { .g-header__portal { display: none; } }

/* --- Mobile toggle -------------------------------------------------------- */

.g-nav-toggle {
  display: none;
  position: relative;
  width: 44px; height: 44px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--g-line);
  border-radius: var(--g-radius-sm);
  cursor: pointer;
}
.g-nav-toggle span {
  position: relative;
  width: 18px; height: 2px;
  background: var(--g-ink);
  border-radius: 2px;
  transition: background-color 0.2s var(--g-ease);
}
.g-nav-toggle span::before,
.g-nav-toggle span::after {
  content: "";
  position: absolute; left: 0;
  width: 18px; height: 2px;
  background: var(--g-ink);
  border-radius: 2px;
  transition: transform 0.3s var(--g-ease);
}
.g-nav-toggle span::before { top: -6px; }
.g-nav-toggle span::after  { top: 6px; }

.g-nav-toggle[aria-expanded="true"] span { background: transparent; }
.g-nav-toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.g-nav-toggle[aria-expanded="true"] span::after  { transform: translateY(-6px) rotate(-45deg); }

/* --- Header responsive ---------------------------------------------------- */

/* The header CTA used to be hidden below 1080px because "Book a Free IT
   Consultation" could not fit beside the nav. The label is now six characters
   shorter, so it survives down to the point where the nav collapses into the
   drawer — which is also where the sticky bottom bar takes over. Between those
   two, the header is the only persistent CTA, so it has to stay. */
@media (max-width: 1080px) {
  .g-nav ul { gap: var(--g-s4); }
  .g-header__cta { padding: 0.7rem 1rem; font-size: 0.875rem; }
}

@media (max-width: 767px) {
  .g-header__cta { display: none; }
}

@media (max-width: 940px) {
  .g-nav-toggle { display: inline-flex; }
  .g-header__phone span { display: none; }
  .g-header__phone {
    width: 44px; height: 44px;
    justify-content: center;
    border: 1px solid var(--g-line);
    border-radius: var(--g-radius-sm);
  }

  .g-nav {
    position: fixed;
    inset: var(--g-header-h) 0 auto 0;
    max-height: calc(100dvh - var(--g-header-h));
    overflow-y: auto;
    background: #fff;
    border-bottom: 1px solid var(--g-line);
    box-shadow: var(--g-shadow);
    padding: var(--g-s4) var(--g-gutter) var(--g-s6);
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    /* visibility must be stepped, not interpolated: browsers hold it at the
       start value for the whole duration, which would leave the drawer
       unfocusable for 250ms after opening. Delay it on close so the fade-out
       is still seen; flip it instantly on open so focus can move straight in. */
    transition: opacity 0.25s var(--g-ease),
                transform 0.25s var(--g-ease),
                visibility 0s linear 0.25s;
  }
  .g-nav.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 0.25s var(--g-ease),
                transform 0.25s var(--g-ease),
                visibility 0s;
  }

  .g-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .g-nav li { border-bottom: 1px solid var(--g-line); }
  .g-nav a { display: block; padding: var(--g-s3) 0; font-size: 1.0625rem; }
  .g-nav a::after { display: none; }

  .g-nav__foot {
    display: flex;
    flex-direction: column;
    gap: var(--g-s3);
    margin-top: var(--g-s5);
  }
  .g-nav__foot .g-btn { width: 100%; white-space: normal; }
  .g-nav__phone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem;
    font-weight: 700;
    color: var(--g-ink);
  }
  .g-nav__phone .g-icon { color: var(--g-accent); }
}

/* ---------------------------------------------------------------------------
   HERO
   --------------------------------------------------------------------------- */

.g-hero {
  position: relative;
  padding-block: clamp(3.5rem, 1.5rem + 7vw, 7rem) clamp(3rem, 1.5rem + 5vw, 5.5rem);
  overflow: hidden;
}

.g-hero__bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 55% at 50% 0%, rgba(245, 130, 32, 0.09) 0%, rgba(245, 130, 32, 0) 70%),
    radial-gradient(50% 50% at 85% 25%, rgba(27, 74, 122, 0.07) 0%, rgba(27, 74, 122, 0) 70%);
  pointer-events: none;
}

.g-hero__inner { position: relative; text-align: center; }

.g-hero__eyebrow {
  display: inline-block;
  margin-bottom: var(--g-s4);
  padding: 0.45rem 1rem;
  font-size: var(--g-fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--g-ink);
  background: var(--g-surface);
  border: 1px solid var(--g-line);
  border-radius: var(--g-radius-pill);
}

.g-hero h1 { margin-bottom: var(--g-s4); }

/* The split-line spans must be block-level even when motion never runs,
   otherwise the two headline lines collapse onto one. */
.g-line-mask { display: block; }
.g-line-inner { display: block; }

.g-hero__lead {
  max-width: 660px;
  margin-inline: auto;
  margin-bottom: var(--g-s6);
}

.g-hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--g-s3);
  margin-bottom: var(--g-s4);
}

.g-hero__note {
  font-size: var(--g-fs-small);
  color: var(--g-muted);
  margin: 0;
}

@media (max-width: 560px) {
  .g-hero__actions { flex-direction: column; align-items: stretch; }
  .g-hero__actions .g-btn { width: 100%; white-space: normal; }
}

/* ---------------------------------------------------------------------------
   TRUST STRIP
   --------------------------------------------------------------------------- */

.g-trustband {
  border-block: 1px solid var(--g-line);
  background: var(--g-surface);
}

/* Content-sized rather than a rigid six-column grid: equal columns force the
   longer labels ("Business IT Specialists") onto two lines while short ones
   float in dead space. Flex lets each item take the width it needs and wrap as
   a whole unit, so every label stays on a single line at every viewport. */
.g-trustband__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--g-s3) clamp(1.25rem, 0.4rem + 2.4vw, 2.75rem);
  margin: 0;
  padding: var(--g-s5) 0;
  list-style: none;
}

.g-trustband__item {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--g-ink);
  line-height: 1.3;
  white-space: nowrap;
}
.g-trustband__item .g-icon { flex: 0 0 auto; color: var(--g-accent); }

/* On narrow screens a centred wrap leaves ragged half-rows, so switch to a
   left-aligned two-column grid where the items line up. */
@media (max-width: 620px) {
  .g-trustband__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--g-s4) var(--g-s3);
  }
  .g-trustband__item { white-space: normal; }
}
@media (max-width: 380px) {
  .g-trustband__list { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------------------------
   SHARED GRID
   Three columns on desktop, two on tablet, one on mobile. Every homepage grid
   holds 6 or 9 items so the three-column layout never leaves an orphan row.
   At two columns, a trailing odd item is stretched full width so it does not
   sit alone against dead space.
   --------------------------------------------------------------------------- */

.g-grid {
  display: grid;
  gap: var(--g-s4);
}
.g-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Ten-item grid. Five and two both divide ten exactly, so every breakpoint
   fills completely — 5 across on desktop, 2 on tablet, 1 on mobile. */
.g-grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

@media (max-width: 1160px) {
  .g-grid--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* Ten items over three columns leaves one alone on the last row — stretch it. */
  .g-grid--5 > :last-child:nth-child(3n + 1) { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
  .g-grid--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g-grid--5 > :last-child:nth-child(3n + 1) { grid-column: auto; }
}
@media (max-width: 560px) {
  .g-grid--5 { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------------------------
   SERVICE TILES
   --------------------------------------------------------------------------- */

.g-tile {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--g-s4);
  color: var(--g-body);
  background: #fff;
  border: 1px solid var(--g-line);
  border-radius: var(--g-radius-lg);
  transition: transform 0.3s var(--g-ease),
              box-shadow 0.3s var(--g-ease),
              border-color 0.3s var(--g-ease);
}
.g-tile:hover {
  transform: translateY(-4px);
  border-color: transparent;
  box-shadow: var(--g-shadow);
  color: var(--g-body);
}

.g-tile__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  margin-bottom: var(--g-s3);
  color: var(--g-accent);
  background: rgba(245, 130, 32, 0.1);
  border-radius: 12px;
  transition: background-color 0.3s var(--g-ease), color 0.3s var(--g-ease);
}
.g-tile:hover .g-tile__icon { background: var(--g-accent); color: var(--g-ink); }

.g-tile h3 {
  font-size: 1.0625rem;
  margin-bottom: 0.4rem;
  letter-spacing: -0.015em;
}
.g-tile p {
  font-size: var(--g-fs-small);
  line-height: 1.55;
  color: var(--g-muted);
  margin: 0 0 var(--g-s3);
}

.g-tile__body { display: contents; }

.g-tile__more {
  margin-top: auto;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--g-accent-ink);
  transition: transform 0.25s var(--g-ease);
}
.g-tile:hover .g-tile__more { transform: translateX(4px); }

/* When a trailing tile is stretched across the full row it would otherwise be a
   card-shaped box with a short line of text and a lot of dead space. Lay it out
   horizontally instead so it reads as a deliberate wide tile. */
@media (min-width: 561px) and (max-width: 1160px) {
  .g-grid--5 > .g-tile:last-child:nth-child(3n + 1) {
    flex-direction: row;
    align-items: center;
    gap: var(--g-s4);
    padding-block: var(--g-s4);
  }
  .g-grid--5 > .g-tile:last-child:nth-child(3n + 1) .g-tile__icon { margin-bottom: 0; }
  .g-grid--5 > .g-tile:last-child:nth-child(3n + 1) h3 { margin-bottom: 0.15rem; }
  .g-grid--5 > .g-tile:last-child:nth-child(3n + 1) p { margin-bottom: 0; }
  /* Override display:contents so the body becomes a real flex child here. */
  .g-grid--5 > .g-tile:last-child:nth-child(3n + 1) .g-tile__body { display: block; flex: 1 1 auto; }
  .g-grid--5 > .g-tile:last-child:nth-child(3n + 1) .g-tile__more { margin: 0 0 0 auto; }
}

@media (max-width: 1020px) {
  .g-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g-grid--3 > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 660px) {
  .g-grid--3 { grid-template-columns: minmax(0, 1fr); }
  .g-grid--3 > :last-child:nth-child(odd) { grid-column: auto; }
}

/* ---------------------------------------------------------------------------
   SERVICE CARDS
   --------------------------------------------------------------------------- */

.g-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--g-s5);
  background: #fff;
  border: 1px solid var(--g-line);
  border-radius: var(--g-radius-lg);
  transition: transform 0.3s var(--g-ease),
              box-shadow 0.3s var(--g-ease),
              border-color 0.3s var(--g-ease);
}
.g-card:hover {
  transform: translateY(-4px);
  border-color: transparent;
  box-shadow: var(--g-shadow);
}

.g-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  margin-bottom: var(--g-s4);
  color: var(--g-accent);
  background: rgba(245, 130, 32, 0.1);
  border-radius: 14px;
  transition: background-color 0.3s var(--g-ease), color 0.3s var(--g-ease);
}
.g-card:hover .g-card__icon { background: var(--g-accent); color: var(--g-ink); }

.g-card h3 { margin-bottom: var(--g-s2); }
.g-card > p { margin-bottom: var(--g-s4); color: var(--g-muted); }

.g-card__list {
  margin: auto 0 0;
  padding: var(--g-s4) 0 0;
  border-top: 1px solid var(--g-line);
  list-style: none;
}
.g-card__list li {
  position: relative;
  padding-left: 1.1rem;
  font-size: var(--g-fs-small);
  color: var(--g-body);
}
.g-card__list li + li { margin-top: 0.5rem; }
.g-card__list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.55em;
  width: 5px; height: 5px;
  background: var(--g-accent);
  border-radius: 50%;
}

/* ---------------------------------------------------------------------------
   INTERIOR PAGE HERO
   Shorter than the homepage hero — an interior page should get to its content
   faster, because the visitor already knows what they came for.
   --------------------------------------------------------------------------- */

.g-hero--page {
  padding-block: clamp(2.75rem, 1.5rem + 4.5vw, 5rem) clamp(2.5rem, 1.5rem + 3.5vw, 4rem);
}
.g-hero--page h1 { max-width: 18ch; margin-inline: auto; }

/* ---------------------------------------------------------------------------
   BUSINESS CHALLENGES
   Deliberately not cards — a pain-point list should read as recognition, not
   as another feature grid competing with the solution below it.
   --------------------------------------------------------------------------- */

.g-challenge {
  height: 100%;
  padding-left: var(--g-s4);
  border-left: 2px solid var(--g-line);
  transition: border-color 0.3s var(--g-ease);
}
.g-challenge:hover { border-left-color: var(--g-accent); }

.g-challenge__mark {
  display: block;
  width: 8px; height: 8px;
  margin-bottom: var(--g-s3);
  background: var(--g-accent);
  border-radius: 50%;
}
.g-challenge h3 { font-size: 1.0625rem; margin-bottom: 0.4rem; }
.g-challenge p { font-size: var(--g-fs-small); color: var(--g-muted); margin: 0; }

/* ---------------------------------------------------------------------------
   SERVICES OVERVIEW — full-width rows
   A row rather than a card, so each service can carry both a summary and the
   business problem it solves without the grid forcing them to be terse.
   --------------------------------------------------------------------------- */

.g-servicelist {
  display: grid;
  gap: var(--g-s3);
}

.g-servicerow {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--g-s4);
  padding: var(--g-s5);
  background: #fff;
  border: 1px solid var(--g-line);
  border-radius: var(--g-radius-lg);
  transition: border-color 0.3s var(--g-ease), box-shadow 0.3s var(--g-ease);
}
.g-servicerow:hover { border-color: transparent; box-shadow: var(--g-shadow); }

.g-servicerow__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px; height: 52px;
  color: var(--g-accent);
  background: rgba(245, 130, 32, 0.1);
  border-radius: 14px;
  transition: background-color 0.3s var(--g-ease), color 0.3s var(--g-ease);
}
.g-servicerow:hover .g-servicerow__icon { background: var(--g-accent); color: var(--g-ink); }

.g-servicerow h3 { margin-bottom: 0.3rem; }
.g-servicerow__summary { font-size: var(--g-fs-small); color: var(--g-muted); margin-bottom: 0.6rem; }

.g-servicerow__problem {
  margin: 0;
  font-size: var(--g-fs-small);
  color: var(--g-body);
}
.g-servicerow__label {
  display: block;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--g-accent-ink);
  margin-bottom: 0.15rem;
}

.g-servicerow__action .g-btn { white-space: nowrap; font-size: 0.875rem; padding: 0.7rem 1.25rem; }

@media (max-width: 860px) {
  .g-servicerow { grid-template-columns: auto 1fr; }
  .g-servicerow__action { grid-column: 1 / -1; }
  .g-servicerow__action .g-btn { width: 100%; white-space: normal; }
}
@media (max-width: 520px) {
  .g-servicerow { grid-template-columns: 1fr; padding: var(--g-s4); }
}

/* ---------------------------------------------------------------------------
   CONTACT PAGE
   --------------------------------------------------------------------------- */

.g-contact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: start;
}

.g-contact__title { font-size: var(--g-fs-h3); margin-bottom: var(--g-s5); }

.g-contact__list { margin: 0 0 var(--g-s5); padding: 0; list-style: none; }

.g-contact__item {
  display: flex;
  gap: var(--g-s3);
  padding-block: var(--g-s3);
  border-bottom: 1px solid var(--g-line);
}
.g-contact__item:first-child { padding-top: 0; }

.g-contact__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  color: var(--g-accent);
  background: var(--g-surface);
  border-radius: 12px;
}

.g-contact__label {
  display: block;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--g-muted);
  margin-bottom: 0.15rem;
}
.g-contact__value {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--g-ink);
}
a.g-contact__value:hover { color: var(--g-accent-ink); }

.g-emergency {
  display: flex;
  gap: var(--g-s3);
  padding: var(--g-s4);
  background: rgba(245, 130, 32, 0.08);
  border: 1px solid rgba(245, 130, 32, 0.28);
  border-radius: var(--g-radius);
}
.g-emergency__icon { flex: 0 0 auto; color: var(--g-accent-ink); }
.g-emergency h3 { font-size: 1rem; margin-bottom: 0.25rem; }
.g-emergency p { font-size: var(--g-fs-small); color: var(--g-body); margin: 0; }

.g-contact__form {
  padding: var(--g-s5);
  background: var(--g-surface);
  border: 1px solid var(--g-line);
  border-radius: var(--g-radius-lg);
}
.g-contact__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--g-s3);
  margin-top: var(--g-s4);
}
.g-contact__actions .g-btn { white-space: normal; }

/* Visible to logged-in admins only — never rendered for visitors. */
.g-admin-note {
  margin-top: var(--g-s4);
  padding: var(--g-s3);
  font-size: 0.8125rem;
  color: var(--g-muted);
  background: #fff;
  border: 1px dashed var(--g-line);
  border-radius: var(--g-radius-sm);
}

.g-map {
  overflow: hidden;
  border-radius: var(--g-radius-lg);
  border: 1px solid var(--g-line);
  aspect-ratio: 21 / 9;   /* reserves space, so the lazy iframe shifts nothing */
  background: var(--g-surface);
}
.g-map iframe { width: 100%; height: 100%; border: 0; display: block; }

@media (max-width: 900px) {
  .g-contact { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .g-map { aspect-ratio: 4 / 3; }
}

/* ---------------------------------------------------------------------------
   WHO THIS SERVICE IS FOR
   Ticked qualification block. Visually distinct from the challenges list above
   it (which uses a left rule) so the two never read as the same section.
   --------------------------------------------------------------------------- */

.g-audience {
  display: flex;
  gap: var(--g-s3);
  height: 100%;
  padding: var(--g-s4);
  background: #fff;
  border: 1px solid var(--g-line);
  border-radius: var(--g-radius);
}

.g-audience__tick {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  color: var(--g-accent);
  background: rgba(245, 130, 32, 0.12);
  border-radius: 50%;
}
.g-audience h3 { font-size: 1.0625rem; margin-bottom: 0.3rem; }
.g-audience p { font-size: var(--g-fs-small); color: var(--g-muted); margin: 0; }

/* On a tinted section the card switches to white — already the default here,
   so only the border needs strengthening to stay visible. */
.g-section--tint .g-audience { border-color: var(--g-line); }

/* ---------------------------------------------------------------------------
   OPTIONAL SERVICES
   Understated by design. These are add-ons on a page the reader is still
   evaluating — no pricing, no badges, no "most popular" nudge.
   --------------------------------------------------------------------------- */

.g-optional {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--g-s4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.g-optional__item {
  padding-top: var(--g-s4);
  border-top: 2px solid var(--g-line);
  transition: border-top-color 0.3s var(--g-ease);
}
.g-optional__item:hover { border-top-color: var(--g-accent); }
.g-optional__item h3 { font-size: 1rem; margin-bottom: 0.35rem; }
.g-optional__item p { font-size: var(--g-fs-small); color: var(--g-muted); margin: 0; }

/* ---------------------------------------------------------------------------
   TESTIMONIALS — reserved slot, only rendered when verified quotes exist
   --------------------------------------------------------------------------- */

.g-quote {
  height: 100%;
  margin: 0;
  padding: var(--g-s5);
  background: #fff;
  border: 1px solid var(--g-line);
  border-radius: var(--g-radius-lg);
}
.g-quote blockquote { margin: 0 0 var(--g-s4); }
.g-quote blockquote p {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--g-ink);
}
.g-quote figcaption { font-size: var(--g-fs-small); color: var(--g-muted); }
.g-quote figcaption strong { display: block; color: var(--g-ink); }

/* ---------------------------------------------------------------------------
   SECTION FOOTNOTE LINK
   --------------------------------------------------------------------------- */

.g-section-note {
  margin-top: var(--g-s5);
  text-align: center;
}

/* ---------------------------------------------------------------------------
   INDUSTRIES
   --------------------------------------------------------------------------- */

.g-industry {
  display: flex;
  gap: var(--g-s3);
  height: 100%;
  padding: var(--g-s4);
  background: #fff;
  border: 1px solid var(--g-line);
  border-radius: var(--g-radius);
  transition: transform 0.3s var(--g-ease), box-shadow 0.3s var(--g-ease);
}
.g-industry:hover { transform: translateY(-3px); box-shadow: var(--g-shadow-sm); }

.g-industry__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  color: var(--g-ink);
  background: var(--g-surface);
  border-radius: 12px;
}
.g-industry:hover .g-industry__icon { color: var(--g-accent); }

.g-industry h3 {
  font-size: 1.0625rem;
  margin-bottom: 0.35rem;
  transition: color 0.25s var(--g-ease);
}
.g-industry:hover h3 { color: var(--g-accent-ink); }
.g-industry p { font-size: var(--g-fs-small); color: var(--g-muted); margin: 0; }

/* ---------------------------------------------------------------------------
   WHY GEEKS360
   --------------------------------------------------------------------------- */

.g-reason {
  height: 100%;
  padding: var(--g-s5) var(--g-s5) var(--g-s5) 0;
  border-top: 2px solid var(--g-line);
  transition: border-color 0.3s var(--g-ease);
}
.g-reason:hover { border-top-color: var(--g-accent); }

.g-reason__icon {
  display: inline-flex;
  margin-bottom: var(--g-s3);
  color: var(--g-accent);
}
.g-reason h3 { margin-bottom: var(--g-s2); }
.g-reason p { color: var(--g-muted); margin: 0; }

@media (max-width: 660px) {
  .g-reason { padding-right: 0; }
}

/* ---------------------------------------------------------------------------
   MANAGED IT OVERVIEW — split layout
   --------------------------------------------------------------------------- */

.g-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: start;
}

.g-split__lead .g-section-head { margin-bottom: 0; }
.g-split__lead h2 { margin-bottom: var(--g-s4); }
.g-split__lead .g-lead + .g-lead { margin-top: var(--g-s3); }
.g-split__lead .g-btn { margin-top: var(--g-s5); }

/* Light by default so the component works on any section. The dark treatment
   is scoped to .g-section--dark below — without that scoping the list rendered
   as near-white text on a white background on every light page. */
.g-split__panel {
  padding: var(--g-s5);
  background: var(--g-surface);
  border: 1px solid var(--g-line);
  border-radius: var(--g-radius-lg);
}
.g-split__panel-title {
  font-size: 1.0625rem;
  margin-bottom: var(--g-s4);
  padding-bottom: var(--g-s3);
  border-bottom: 1px solid var(--g-line);
}

.g-ticklist { margin: 0; padding: 0; list-style: none; }
.g-ticklist li {
  display: flex;
  gap: 0.7rem;
  font-size: var(--g-fs-small);
  line-height: 1.55;
  color: var(--g-body);
}

/* Dark-section variant */
.g-section--dark .g-split__panel {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.12);
}
.g-section--dark .g-split__panel-title { border-bottom-color: rgba(255, 255, 255, 0.12); }
.g-section--dark .g-ticklist li { color: rgba(232, 237, 245, 0.86); }

/* A tinted section already carries the surface colour, so the panel switches
   to white to stay distinct from its background. */
.g-section--tint .g-split__panel { background: #fff; }
.g-ticklist li + li { margin-top: var(--g-s3); }
.g-ticklist .g-icon { flex: 0 0 auto; margin-top: 0.15rem; color: var(--g-accent); }

@media (max-width: 900px) {
  .g-split { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------
   TECHNOLOGY WE SUPPORT
   --------------------------------------------------------------------------- */

.g-techlist {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--g-s3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.g-techlist__item {
  padding: 0.7rem 1.4rem;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--g-ink);
  background: #fff;
  border: 1px solid var(--g-line);
  border-radius: var(--g-radius-pill);
  transition: border-color 0.25s var(--g-ease),
              color 0.25s var(--g-ease),
              transform 0.25s var(--g-ease);
}
.g-techlist__item:hover {
  border-color: var(--g-accent);
  color: var(--g-accent-ink);
  transform: translateY(-2px);
}

/* ---------------------------------------------------------------------------
   BUSINESS OUTCOMES
   --------------------------------------------------------------------------- */

.g-outcome {
  height: 100%;
  padding: var(--g-s5);
  background: #fff;
  border: 1px solid var(--g-line);
  border-radius: var(--g-radius-lg);
}

.g-outcome__num {
  display: block;
  margin-bottom: var(--g-s3);
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--g-accent-ink);
}
.g-outcome h3 { margin-bottom: var(--g-s2); }
.g-outcome p { color: var(--g-muted); margin: 0; }

/* ---------------------------------------------------------------------------
   FAQ
   --------------------------------------------------------------------------- */

.g-faq {
  border-top: 1px solid var(--g-line);
}

.g-faq__item { border-bottom: 1px solid var(--g-line); }

.g-faq__q { margin: 0; font-size: inherit; }

.g-faq__trigger {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--g-s4);
  width: 100%;
  padding: var(--g-s4) 0;
  font-family: inherit;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: -0.015em;
  text-align: left;
  color: var(--g-ink);
  background: none;
  border: 0;
  cursor: pointer;
  transition: color 0.2s var(--g-ease);
}
.g-faq__trigger:hover { color: var(--g-accent-ink); }

/* Plus / minus indicator drawn in CSS so it needs no icon request. */
.g-faq__sign {
  position: relative;
  flex: 0 0 auto;
  width: 22px; height: 22px;
  margin-top: 0.15rem;
  border-radius: 50%;
  background: var(--g-surface);
  transition: background-color 0.25s var(--g-ease);
}
.g-faq__sign::before,
.g-faq__sign::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 10px; height: 2px;
  background: var(--g-ink);
  border-radius: 2px;
  transform: translate(-50%, -50%);
  transition: transform 0.25s var(--g-ease), background-color 0.25s var(--g-ease);
}
.g-faq__sign::after { transform: translate(-50%, -50%) rotate(90deg); }

.g-faq__trigger[aria-expanded="true"] .g-faq__sign { background: var(--g-accent); }
.g-faq__trigger[aria-expanded="true"] .g-faq__sign::after { transform: translate(-50%, -50%) rotate(0deg); }

/* Panel geometry lives in motion.css (grid-template-rows). This is only the
   inner spacing, applied to the paragraph so it collapses cleanly to zero. */
.g-faq__a {
  max-width: 62ch;
  margin: 0;
  padding-bottom: var(--g-s4);
  color: var(--g-muted);
}

@media (max-width: 560px) {
}

@media (max-width: 940px) {
}
@media (max-width: 560px) {
}

/* ---------------------------------------------------------------------------
   INTERIOR PAGES / BLOG — inherited from the previous build
   --------------------------------------------------------------------------- */

.g-page { padding-block: var(--g-section-y); }
.g-page__head { margin-bottom: var(--g-s6); }

.g-page-hero {
  padding-block: clamp(3rem, 2rem + 4vw, 5.5rem) var(--g-s6);
  text-align: center;
  background: var(--g-surface);
  border-bottom: 1px solid var(--g-line);
}

.g-entry { padding-block: var(--g-section-y); }
.g-entry__content { max-width: var(--g-container-narrow); margin-inline: auto; }
.g-entry__content > * + * { margin-top: var(--g-s3); }
.g-entry__content h2 { margin-top: var(--g-s6); }
.g-entry__content img { border-radius: var(--g-radius); }

.g-posts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--g-s4);
}
.g-post-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--g-line);
  border-radius: var(--g-radius);
  overflow: hidden;
  background: var(--g-bg);
  transition: transform 0.35s var(--g-ease), box-shadow 0.35s var(--g-ease);
}
.g-post-card:hover { transform: translateY(-5px); box-shadow: var(--g-shadow); }
.g-post-card__thumb { aspect-ratio: 16 / 9; overflow: hidden; background: var(--g-surface); }
.g-post-card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.g-post-card__body { padding: var(--g-s4); }
.g-post-card__meta {
  font-size: 0.8125rem;
  color: var(--g-muted);
  margin-bottom: var(--g-s2);
}
.g-post-card h3 { font-size: 1.1875rem; }

.g-pagination {
  display: flex;
  justify-content: center;
  gap: var(--g-s2);
  margin-top: var(--g-s6);
}
.g-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px; height: 42px;
  padding-inline: 0.6rem;
  border: 1px solid var(--g-line);
  border-radius: var(--g-radius-pill);
  color: var(--g-ink);
  font-weight: 600;
}
.g-pagination .page-numbers.current,
.g-pagination .page-numbers:hover {
  background: var(--g-accent);
  border-color: var(--g-accent);
  color: var(--g-ink);
}

.g-widget + .g-widget { margin-top: var(--g-s5); }
.g-widget__title {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: var(--g-s3);
}

@media (prefers-reduced-motion: reduce) {
  .g-card:hover,
  .g-industry:hover,
  .g-techlist__item:hover,
  .g-post-card:hover { transform: none; }
}

/* ---------------------------------------------------------------------------
   PROCESS STEPS — "How We Deliver This Service"
   Six stages, three columns, two clean rows. Rendered as an <ol> so the order
   is conveyed to assistive technology, not just visually by the numerals.
   --------------------------------------------------------------------------- */

.g-steps { margin: 0; padding: 0; list-style: none; counter-reset: none; }

.g-step {
  position: relative;
  height: 100%;
  padding: var(--g-s5) var(--g-s4) var(--g-s4);
  background: #fff;
  border: 1px solid var(--g-line);
  border-radius: var(--g-radius-lg);
}
.g-section--tint .g-step { background: #fff; }

.g-step__num {
  position: absolute;
  top: calc(var(--g-s4) * -0.5);
  left: var(--g-s4);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  padding: 0.3rem 0.7rem;
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--g-ink);
  background: var(--g-accent);
  border-radius: var(--g-radius-pill);
}
.g-step h3 { font-size: 1.0625rem; margin-bottom: 0.4rem; }
.g-step p { font-size: var(--g-fs-small); color: var(--g-muted); margin: 0; }

/* ---------------------------------------------------------------------------
   TYPICAL ENGAGEMENTS
   --------------------------------------------------------------------------- */

.g-engagement {
  height: 100%;
  padding: var(--g-s5);
  background: #fff;
  border: 1px solid var(--g-line);
  border-radius: var(--g-radius-lg);
  transition: transform 0.3s var(--g-ease), box-shadow 0.3s var(--g-ease);
}
.g-engagement:hover { transform: translateY(-3px); box-shadow: var(--g-shadow-sm); }

.g-engagement__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  margin-bottom: var(--g-s3);
  color: var(--g-ink);
  background: var(--g-surface);
  border-radius: 12px;
}
.g-engagement:hover .g-engagement__icon { color: var(--g-accent); }
.g-engagement h3 { font-size: 1.0625rem; margin-bottom: 0.4rem; }
.g-engagement p { font-size: var(--g-fs-small); color: var(--g-muted); margin: 0; }

/* ---------------------------------------------------------------------------
   PLATFORM LIST NOTE
   The disclaimer under "Technology We Commonly Support". Quiet, but present —
   it is what keeps a grid of vendor names from reading as accreditation.
   --------------------------------------------------------------------------- */

.g-platform-note {
  max-width: 70ch;
  margin: var(--g-s5) auto 0;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--g-muted);
  text-align: center;
}

/* ---------------------------------------------------------------------------
   MANAGED SERVICE PLANS — hidden until enabled
   --------------------------------------------------------------------------- */

.g-plan {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--g-s5);
  background: #fff;
  border: 1px solid var(--g-line);
  border-radius: var(--g-radius-lg);
}
.g-plan h3 { margin-bottom: 0.4rem; }
.g-plan__summary { font-size: var(--g-fs-small); color: var(--g-muted); margin-bottom: var(--g-s4); }
.g-plan .g-ticklist { margin-bottom: var(--g-s4); }
.g-plan .g-btn { margin-top: auto; align-self: flex-start; }

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

/* ---------------------------------------------------------------------------
   BREADCRUMB
   Only rendered on pages with a parent (see geeks360_breadcrumb). Sits above
   the hero, quiet enough not to compete with the H1 but present for visitors
   who arrived two levels deep from a search result.
   --------------------------------------------------------------------------- */

.g-breadcrumb {
  padding-block: var(--g-s4) 0;
  background: var(--g-bg);
}

.g-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--g-fs-small);
}

.g-breadcrumb li { display: inline-flex; align-items: center; gap: 0.4rem; }

/* Separator drawn in CSS so it is decorative and never read aloud. */
.g-breadcrumb li + li::before {
  content: "/";
  color: var(--g-line);
  font-weight: 700;
}

.g-breadcrumb a { color: var(--g-muted); }
.g-breadcrumb a:hover { color: var(--g-accent-ink); }
.g-breadcrumb [aria-current="page"] { color: var(--g-ink); font-weight: 600; }

/* The hero directly follows, so remove its top padding to avoid a double gap. */
.g-breadcrumb + .g-hero--page { padding-top: var(--g-s5); }

/* ---------------------------------------------------------------------------
   INDUSTRY — TYPICAL IT ENVIRONMENT
   Horizontal rows rather than cards: this section is a list of recognitions,
   and a card grid would make it compete with "How we help" directly below.
   --------------------------------------------------------------------------- */

.g-env {
  display: flex;
  gap: var(--g-s3);
  height: 100%;
  padding: var(--g-s4);
  border: 1px dashed var(--g-line);
  border-radius: var(--g-radius);
  transition: border-color 0.3s var(--g-ease);
}
.g-env:hover { border-color: var(--g-accent); border-style: solid; }

.g-env__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  color: var(--g-ink);
  background: var(--g-surface);
  border-radius: 10px;
}
.g-section--tint .g-env__icon { background: #fff; }
.g-env h3 { font-size: 1rem; margin-bottom: 0.3rem; }
.g-env p { font-size: var(--g-fs-small); color: var(--g-muted); margin: 0; }

/* ---------------------------------------------------------------------------
   INDUSTRY — SECURITY & COMPLIANCE
   Visually weightier than the surrounding sections. This is the block that
   earns trust in regulated sectors, so it should not read as another card row.
   --------------------------------------------------------------------------- */

.g-compliance {
  height: 100%;
  padding: var(--g-s5);
  background: #fff;
  border: 1px solid var(--g-line);
  border-top: 3px solid var(--g-accent);
  border-radius: var(--g-radius-lg);
}
.g-compliance__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  margin-bottom: var(--g-s3);
  color: var(--g-accent);
  background: rgba(245, 130, 32, 0.1);
  border-radius: 10px;
}
.g-compliance h3 { font-size: 1.0625rem; margin-bottom: 0.4rem; }
.g-compliance p { font-size: var(--g-fs-small); color: var(--g-muted); margin: 0; }

/* The standing disclaimer. Part of the component, never per-page content. */
.g-disclaimer {
  max-width: 72ch;
  margin: var(--g-s5) auto 0;
  padding: var(--g-s4);
  font-size: 0.8125rem;
  line-height: 1.65;
  color: var(--g-muted);
  text-align: center;
  background: var(--g-surface);
  border: 1px solid var(--g-line);
  border-radius: var(--g-radius);
}
.g-section--tint .g-disclaimer { background: #fff; }

/* ===========================================================================
   RESOURCES CENTRE, SEARCH AND ARTICLES
   ---------------------------------------------------------------------------
   Every value below is a token. No literal colours, no magic pixel values —
   the whole point of the token layer is that a brand change is one edit, and
   one hardcoded #12355B here would silently survive it.
   =========================================================================== */

/* --- Search form ---------------------------------------------------------- */

.g-search {
  display: flex;
  align-items: stretch;
  gap: 0;
  max-width: 420px;
  width: 100%;
  border: 1px solid var(--g-line);
  border-radius: var(--g-radius-pill);
  background: var(--g-bg);
  transition: border-color var(--g-dur) var(--g-ease),
              box-shadow var(--g-dur) var(--g-ease);
}

/*
 * The focus ring moves to the WRAPPER, because the input's own ring is
 * suppressed below so it does not sit inside the pill.
 *
 * This has to be a real outline, not the border-colour change it replaced. A
 * 1px border shifting from --g-line to --g-ink-soft is roughly a 2:1 change
 * against the surrounding surface, which fails WCAG 2.4.11 (Focus Appearance)
 * and is invisible to most people who navigate by keyboard. If the input's
 * outline is ever restored, delete this and the rule below together.
 */
.g-search:focus-within {
  border-color: var(--g-ink-soft);
  outline: 3px solid var(--g-accent);
  outline-offset: 3px;
}

.g-search__input {
  flex: 1 1 auto;
  min-width: 0;
  padding: var(--g-s2) var(--g-s4);
  border: 0;
  background: transparent;
  font: inherit;
  font-size: var(--g-fs-small);
  color: var(--g-body);
  border-radius: var(--g-radius-pill);
}

/* Suppressed only because the wrapper carries the ring — see :focus-within
   above. Two concentric rings read as two overlapping controls. */
.g-search__input:focus,
.g-search__input:focus-visible { outline: none; }
.g-search__input::placeholder { color: var(--g-muted); }

.g-search__submit {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  /* WCAG 2.5.8 target size. Set on both axes rather than letting height fall
     out of the parent's padding, which changes with font metrics. */
  width: 44px;
  min-height: 44px;
  border: 0;
  background: transparent;
  color: var(--g-ink);
  cursor: pointer;
  border-radius: var(--g-radius-pill);
  transition: color var(--g-dur) var(--g-ease), background var(--g-dur) var(--g-ease);
}

.g-search__submit:hover { color: var(--g-accent-ink); background: var(--g-surface); }

/* --- Filter bar ----------------------------------------------------------- */

.g-resources__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--g-s4);
  margin-bottom: var(--g-s6);
  padding-bottom: var(--g-s4);
  border-bottom: 1px solid var(--g-line);
}

.g-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--g-s1);
}

.g-filters__item {
  display: inline-block;
  padding: var(--g-s1) var(--g-s3);
  border-radius: var(--g-radius-pill);
  font-size: var(--g-fs-small);
  font-weight: 600;
  color: var(--g-muted);
  text-decoration: none;
  transition: color var(--g-dur) var(--g-ease), background var(--g-dur) var(--g-ease);
}

.g-filters__item:hover { color: var(--g-ink); background: var(--g-surface-2); }

.g-filters__item.is-active {
  color: var(--g-bg);
  background: var(--g-ink);
}

/* --- Resource card -------------------------------------------------------- */

.g-resource {
  display: flex;
  flex-direction: column;
  gap: var(--g-s2);
  height: 100%;
  padding: var(--g-s5);
  background: var(--g-bg);
  border: 1px solid var(--g-line);
  border-radius: var(--g-radius);
  transition: transform var(--g-dur) var(--g-ease),
              box-shadow var(--g-dur) var(--g-ease),
              border-color var(--g-dur) var(--g-ease);
}

.g-resource:hover {
  transform: translateY(-3px);
  box-shadow: var(--g-shadow);
  border-color: transparent;
}

.g-resource__topic {
  font-size: var(--g-fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--g-accent-ink);
  margin: 0;
}

.g-resource__title { font-size: var(--g-fs-h3); line-height: var(--g-lh-snug); margin: 0; }
.g-resource__title a { color: var(--g-ink); text-decoration: none; }
.g-resource__title a:hover { color: var(--g-ink-soft); }

/* Make the whole card clickable without nesting interactive elements — the
   title keeps the real link and its accessible name, the pseudo-element just
   widens the hit area. */
.g-resource__title a::after {
  content: "";
  position: absolute;
  inset: 0;
}
.g-resource { position: relative; }

.g-resource__excerpt {
  margin: 0;
  color: var(--g-body);
  font-size: var(--g-fs-small);
  line-height: var(--g-lh-body);
}

.g-resource__meta {
  margin: auto 0 0;
  padding-top: var(--g-s2);
  color: var(--g-muted);
  font-size: var(--g-fs-small);
}

/* --- Article -------------------------------------------------------------- */

.g-article__head { padding: calc(var(--g-header-h) + var(--g-s7)) 0 var(--g-s5); }

.g-article__topic {
  font-size: var(--g-fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 0 var(--g-s2);
}
.g-article__topic a { color: var(--g-accent-ink); text-decoration: none; }
.g-article__topic a:hover { text-decoration: underline; }

.g-article__standfirst { margin-top: var(--g-s3); color: var(--g-muted); }

.g-article__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--g-s1);
  margin-top: var(--g-s4);
  padding-top: var(--g-s3);
  border-top: 1px solid var(--g-line);
  font-size: var(--g-fs-small);
  color: var(--g-muted);
}

.g-article__time { display: inline-flex; align-items: center; gap: 0.35em; }
.g-article__updated { font-weight: 600; color: var(--g-ink-soft); }

.g-article__figure { margin: 0 0 var(--g-s6); }
.g-article__figure img {
  width: 100%;
  height: auto;
  border-radius: var(--g-radius-lg);
}

.g-article__body { font-size: var(--g-fs-lead); line-height: var(--g-lh-body); color: var(--g-body); }
.g-article__body > * + * { margin-top: var(--g-s4); }
.g-article__body h2 { font-size: var(--g-fs-h2); line-height: var(--g-lh-snug); margin-top: var(--g-s7); color: var(--g-ink); }
.g-article__body h3 { font-size: var(--g-fs-h3); line-height: var(--g-lh-snug); margin-top: var(--g-s6); color: var(--g-ink); }
.g-article__body ul,
.g-article__body ol { padding-left: var(--g-s4); }
.g-article__body li + li { margin-top: var(--g-s1); }
.g-article__body a { color: var(--g-accent-ink); }
.g-article__body blockquote {
  margin-left: 0;
  padding-left: var(--g-s4);
  border-left: 3px solid var(--g-accent);
  color: var(--g-ink);
  font-style: italic;
}
.g-article__body img { max-width: 100%; height: auto; border-radius: var(--g-radius); }
.g-article__body code {
  padding: 0.15em 0.4em;
  background: var(--g-surface-2);
  border-radius: var(--g-radius-sm);
  font-size: 0.9em;
}
.g-article__body pre {
  padding: var(--g-s4);
  background: var(--g-surface-2);
  border-radius: var(--g-radius);
  overflow-x: auto;
}

.g-article__filed {
  margin-top: var(--g-s5);
  font-size: var(--g-fs-small);
  color: var(--g-muted);
}

/* --- Answer block, contents and related links -----------------------------
   Shipped in the article system with no styles at all. The markup rendered, so
   every DOM-level check passed, and all three blocks sat on the page as plain
   unseparated text — the answer block indistinguishable from the first
   paragraph, the contents list reading as a stray list of links.
   --------------------------------------------------------------------------- */

.g-answer {
  margin-bottom: var(--g-s6);
  padding: var(--g-s4) var(--g-s5);
  background: var(--g-surface);
  border-left: 3px solid var(--g-accent);
  border-radius: 0 var(--g-radius) var(--g-radius) 0;
}

.g-answer__label {
  margin: 0 0 var(--g-s2);
  font-size: var(--g-fs-eyebrow);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--g-accent-ink);
}

/* Font size is set here rather than inherited: this is the passage marked
   speakable, and it should read as the answer to the page's question. */
.g-answer__body {
  margin: 0;
  font-size: var(--g-fs-lead);
  line-height: var(--g-lh-body);
  color: var(--g-ink);
}

.g-toc {
  margin-bottom: var(--g-s6);
  padding: var(--g-s4) var(--g-s5);
  background: var(--g-surface);
  border-radius: var(--g-radius);
}

.g-toc__title {
  margin: 0 0 var(--g-s2);
  font-size: var(--g-fs-eyebrow);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--g-muted);
}

.g-toc ol,
.g-toc ul {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--g-fs-small);
}

.g-toc li + li { margin-top: var(--g-s1); }

.g-toc a {
  color: var(--g-body);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.g-toc a:hover,
.g-toc a:focus-visible {
  color: var(--g-accent-ink);
  border-bottom-color: currentColor;
}

.g-article-links {
  display: grid;
  gap: var(--g-s5);
  margin-top: var(--g-s7);
  padding: var(--g-s5);
  background: var(--g-surface);
  border-radius: var(--g-radius);
}

@media (min-width: 640px) {
  .g-article-links { grid-template-columns: 1fr 1fr; }
}

.g-article-links__title {
  margin: 0 0 var(--g-s2);
  font-size: var(--g-fs-eyebrow);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--g-muted);
}

.g-article-links ul {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--g-fs-small);
}

.g-article-links li + li { margin-top: var(--g-s1); }

.g-article-links a {
  color: var(--g-accent-ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.g-article-links a:hover,
.g-article-links a:focus-visible { border-bottom-color: currentColor; }

/* --- Author block --------------------------------------------------------- */

.g-author {
  display: flex;
  gap: var(--g-s4);
  margin-top: var(--g-s7);
  padding: var(--g-s5);
  background: var(--g-surface);
  border-radius: var(--g-radius);
}

.g-author__mark {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: var(--g-radius-pill);
  background: var(--g-bg);
  color: var(--g-ink);
}

.g-author__name { margin: 0 0 var(--g-s1); font-weight: 700; color: var(--g-ink); }
.g-author__bio { margin: 0; font-size: var(--g-fs-small); line-height: var(--g-lh-body); color: var(--g-body); }

/* --- Search results ------------------------------------------------------- */

.g-section--search-head { padding-top: calc(var(--g-header-h) + var(--g-s7)); padding-bottom: var(--g-s6); }
.g-search__heading { font-size: var(--g-fs-h2); line-height: var(--g-lh-snug); margin: 0 0 var(--g-s2); color: var(--g-ink); }
.g-search__count { margin: 0 0 var(--g-s4); color: var(--g-muted); }

.g-results { list-style: none; margin: 0; padding: 0; }
.g-result { padding: var(--g-s5) 0; border-bottom: 1px solid var(--g-line); }
.g-result:first-child { padding-top: 0; }
.g-result__link { text-decoration: none; }
.g-result__title { font-size: var(--g-fs-h3); line-height: var(--g-lh-snug); margin: 0 0 var(--g-s1); color: var(--g-ink); }
.g-result__link:hover .g-result__title { color: var(--g-ink-soft); }
.g-result__url { margin: 0 0 var(--g-s2); font-size: var(--g-fs-small); color: var(--g-accent-ink); }
.g-result__snippet { margin: 0; color: var(--g-body); line-height: var(--g-lh-body); }

/* --- Empty states --------------------------------------------------------- */

.g-empty {
  max-width: var(--g-container-narrow);
  margin-inline: auto;
  padding: var(--g-s7) 0;
  text-align: center;
}

.g-empty h2 { font-size: var(--g-fs-h2); line-height: var(--g-lh-snug); margin: 0 0 var(--g-s3); color: var(--g-ink); }
.g-empty .g-lead { color: var(--g-muted); }

.g-empty__topics {
  margin: var(--g-s6) 0 var(--g-s3);
  font-size: var(--g-fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--g-muted);
}

.g-empty__list { list-style: none; margin: 0; padding: 0; text-align: left; }
.g-empty__list li {
  padding: var(--g-s3) 0;
  border-top: 1px solid var(--g-line);
}
.g-empty__list strong { display: block; color: var(--g-ink); }
.g-empty__list span { font-size: var(--g-fs-small); color: var(--g-muted); line-height: var(--g-lh-body); }

.g-empty__links {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--g-s2) var(--g-s4);
  margin: var(--g-s5) 0 0;
  padding: 0;
}
.g-empty__links a { color: var(--g-accent-ink); font-weight: 600; }

/* --- Responsive ----------------------------------------------------------- */

@media (max-width: 720px) {
  .g-resources__bar { flex-direction: column; align-items: stretch; }
  .g-search { max-width: none; }

  /* Let the filter row scroll rather than wrap into three ragged lines, and
     keep the scroll affordance visible by bleeding it to the gutter edge. */
  .g-filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    margin-inline: calc(var(--g-gutter) * -1);
    padding-inline: var(--g-gutter);
  }
  .g-filters::-webkit-scrollbar { display: none; }
  .g-filters__item { white-space: nowrap; }

  .g-author { flex-direction: column; gap: var(--g-s3); }
}

/* ===========================================================================
   FOOTER — horizontal band
   ---------------------------------------------------------------------------
   Replaces the previous four-column layout. Height was the problem: column
   headings, stacked lists and generous vertical padding produced roughly 600px
   of chrome under every page. This is three rows that collapse gracefully and
   total about half that at desktop.

   A footer is a wayfinding device and a credibility check, not a second
   homepage. The visitor who reaches it wants a phone number, proof the business
   is real, or the exit.
   =========================================================================== */

.g-footer {
  background: var(--g-ink);
  color: var(--g-on-dark);
  padding: var(--g-s7) 0 var(--g-s5);
}

.g-footer a { color: var(--g-on-dark); text-decoration: none; }
.g-footer a:hover { color: #fff; }
.g-footer :focus-visible { outline: 3px solid var(--g-accent); outline-offset: 3px; border-radius: 4px; }

.g-footer__top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--g-s5);
  padding-bottom: var(--g-s5);
}

.g-footer__identity { flex: 1 1 22rem; max-width: 34rem; }
.g-footer__identity .g-brand { display: inline-block; margin-bottom: var(--g-s3); }
/* Footer lockup, increased a further 25% (48px -> 60px). Measured: renders
   160x60. The footer has room the header does not, so this carries the brand
   harder at the point a visitor is deciding whether the business is real.

   NOTE ON RATIO: this is geeks360-logo-white.svg, which is 2.67:1 — a different
   lockup from the header's geeks360-logo.svg at 4:1. The two will never be the
   same width at the same height, and that is by design, not drift.

   This rule is the ONLY thing sizing the footer lockup, at every viewport —
   there is deliberately no breakpoint override, because at 60px it still fits
   inside .g-footer__identity on a 390px screen with ~190px to spare. */
.g-footer__identity img { height: 60px; width: auto; }

.g-footer__blurb {
  margin: 0;
  font-size: var(--g-fs-small);
  line-height: var(--g-lh-body);
  color: color-mix(in srgb, var(--g-on-dark) 78%, transparent);
}

.g-footer__contact {
  flex: 0 1 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--g-s2);
}

.g-footer__phone,
.g-footer__email { display: inline-flex; align-items: center; gap: .55rem; font-size: var(--g-fs-small); }

/* The phone number is the highest-value element in the footer, so it takes the
   size and weight the eye reaches for first. */
.g-footer__phone { font-size: 1.28rem; font-weight: 750; letter-spacing: -.01em; }
.g-footer__phone .g-icon { color: var(--g-accent); }
.g-footer__email { color: color-mix(in srgb, var(--g-on-dark) 82%, transparent); }
.g-footer__cta { margin-top: var(--g-s1); }

/* Official profiles. Sized to a 40px hit area so the tap target clears the
   24px minimum with room to spare — these sit close together and a tight
   target next to another tight target is worse than either alone. */
.g-footer__social {
  display: flex;
  gap: var(--g-s2);
  margin: var(--g-s1) 0 0;
  padding: 0;
  list-style: none;
}

.g-footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--g-radius-sm);
  color: color-mix(in srgb, var(--g-on-dark) 82%, transparent);
  transition: color var(--g-dur) var(--g-ease), background-color var(--g-dur) var(--g-ease);
}

.g-footer__social a:hover,
.g-footer__social a:focus-visible {
  color: var(--g-on-dark);
  background: color-mix(in srgb, var(--g-on-dark) 12%, transparent);
}

.g-footer__rail {
  display: flex;
  flex-wrap: wrap;
  gap: var(--g-s2) var(--g-s5);
  padding: var(--g-s3) 0;
  border-top: 1px solid color-mix(in srgb, var(--g-on-dark) 16%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--g-on-dark) 16%, transparent);
}

.g-footer__rail a { font-size: var(--g-fs-small); font-weight: 600; position: relative; }

/* Underline grows from the left rather than fading in — it reads as a
   deliberate affordance instead of a hover accident. */
.g-footer__rail a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -3px;
  height: 1px;
  background: var(--g-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--g-dur) var(--g-ease);
}
.g-footer__rail a:hover::after { transform: scaleX(1); }

.g-footer__base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--g-s2) var(--g-s5);
  padding-top: var(--g-s4);
  font-size: 0.8125rem;
  color: color-mix(in srgb, var(--g-on-dark) 68%, transparent);
}

.g-footer__areas { margin: 0; }
.g-footer__areas-label {
  font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  font-size: 0.6875rem; margin-right: .5rem;
  color: color-mix(in srgb, var(--g-on-dark) 55%, transparent);
}

.g-footer__legal { display: flex; flex-wrap: wrap; gap: var(--g-s3); }
.g-footer__legal a { color: color-mix(in srgb, var(--g-on-dark) 72%, transparent); }
.g-footer__copy { margin: 0; }

/* --- Touch targets -------------------------------------------------------
   Measured at 390px: rail links rendered 23px tall, the email link 23px and
   the sitemap link 21px — all well under the 44px WCAG 2.5.8 minimum. The text
   was the target, so the hit area was exactly the height of one line.

   Padding is added to the LINK rather than spacing to the container, so the
   growth becomes hit area instead of gap. Negative margin pulls the visual
   rhythm back to where it was, which is why the footer got shorter rather than
   taller despite every target growing.                                      */

@media (max-width: 860px) {
  .g-footer { padding-top: var(--g-s5); padding-bottom: var(--g-s4); }

  .g-footer__top { flex-direction: column; gap: var(--g-s3); padding-bottom: var(--g-s3); }

  /*
   * THE ACTUAL CAUSE of the tall mobile footer, measured rather than guessed.
   *
   * .g-footer__identity carries `flex: 1 1 22rem` for the desktop row. When the
   * container flips to `flex-direction: column`, flex-basis switches axis with
   * it — so 22rem stopped being a 352px minimum WIDTH and became a 352px
   * minimum HEIGHT. Its children totalled 101px; the box reserved 352px.
   *
   * That single line was ~250px of the footer's height. No amount of padding
   * tuning would have found it, and my first attempt at reducing gaps made the
   * footer TALLER because the real cause was untouched.
   */
  .g-footer__identity { flex: 0 0 auto; max-width: none; }
  .g-footer__contact  { flex: 0 0 auto; }
  .g-footer__identity .g-brand { margin-bottom: var(--g-s2); }
  .g-footer__blurb { font-size: 0.8125rem; line-height: 1.45; margin-bottom: var(--g-s1); }

  .g-footer__contact { align-items: stretch; width: 100%; gap: var(--g-s1); }
  .g-footer__cta { width: 100%; text-align: center; margin-top: var(--g-s2); }

  /* Phone and email become full-width rows with a real hit area. */
  .g-footer__phone,
  .g-footer__email {
    min-height: 44px;
    align-items: center;
    padding: var(--g-s1) 0;
  }

  .g-footer__rail {
    gap: 0 var(--g-s4);
    padding: var(--g-s1) 0;
    margin-block: var(--g-s1);
  }
  .g-footer__rail a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  /* The underline sits on the text, not the padded box. */
  .g-footer__rail a::after { bottom: 25%; }

  .g-footer__base {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding-top: var(--g-s2);
  }
  .g-footer__areas { padding: var(--g-s1) 0; }
  .g-footer__legal { gap: var(--g-s4); }
  .g-footer__legal a { min-height: 44px; display: inline-flex; align-items: center; }
  .g-footer__copy { padding-top: var(--g-s1); }
}

/* ===========================================================================
   ENQUIRY FORM
   =========================================================================== */

.g-form { max-width: 46rem; }

.g-form__status {
  padding: var(--g-s4);
  border-radius: var(--g-radius);
  margin-bottom: var(--g-s5);
  border-left: 4px solid;
}
.g-form__status h3 { margin: 0 0 var(--g-s1); font-size: var(--g-fs-h3); }
.g-form__status p { margin: 0; font-size: var(--g-fs-small); line-height: var(--g-lh-body); }
.g-form__status:focus { outline: 3px solid var(--g-accent); outline-offset: 3px; }

/* Semantic colours, deliberately separate from the brand accent — success must
   not be orange on a site whose accent is orange. */
.g-form__status--ok  { background: #EAF6F0; border-color: #1B6B4A; color: #12412C; }
.g-form__status--bad { background: #FDEEEE; border-color: #A32020; color: #6E1616; }
.g-form__status--ok h3  { color: #12412C; }
.g-form__status--bad h3 { color: #6E1616; }

.g-form__grid { display: grid; gap: var(--g-s4); grid-template-columns: 1fr 1fr; }
@media (max-width: 640px) { .g-form__grid { grid-template-columns: 1fr; } }
.g-field--full { grid-column: 1 / -1; }

.g-field { margin: 0; display: flex; flex-direction: column; gap: .4rem; }
.g-field label { font-size: var(--g-fs-small); font-weight: 650; color: var(--g-ink); }
.g-field__opt { font-weight: 400; color: var(--g-muted); }

.g-field input[type="text"],
.g-field input[type="email"],
.g-field input[type="tel"],
.g-field select,
.g-field textarea {
  width: 100%;
  padding: .7rem .85rem;
  font: inherit;
  font-size: var(--g-fs-small);
  color: var(--g-body);
  background: var(--g-bg);
  border: 1px solid var(--g-line);
  border-radius: var(--g-radius-sm);
  transition: border-color var(--g-dur) var(--g-ease);
}

/* iOS Safari zooms the whole page when a focused field is under 16px, and it
   does not zoom back out. Measured at 390px: every enquiry field was 14px, so
   tapping the first one threw the form off-screen mid-viewport — on the page
   the entire site funnels toward. 16px is the documented threshold, not a
   preference. Scoped to touch widths so the desktop scale is unchanged. */
@media (max-width: 767px) {
  .g-field input[type="text"],
  .g-field input[type="email"],
  .g-field input[type="tel"],
  .g-field select,
  .g-field textarea {
    font-size: 16px;
  }
}
.g-field textarea { resize: vertical; min-height: 8rem; line-height: var(--g-lh-body); }
.g-field :is(input, select, textarea):hover { border-color: var(--g-muted); }
.g-field :is(input, select, textarea):focus-visible {
  outline: 3px solid var(--g-accent);
  outline-offset: 2px;
  border-color: var(--g-ink-soft);
}
.g-field [aria-invalid="true"] { border-color: #A32020; }

.g-field__err { font-size: var(--g-fs-small); color: #8E1B1B; font-weight: 600; }

.g-field--check label {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .65rem;
  align-items: start;
  font-weight: 400;
  color: var(--g-body);
  line-height: var(--g-lh-body);
}
/* 20px + the label's line-height gives a comfortably >44px hit area without a
   checkbox large enough to look like a design mistake. */
.g-field--check input { width: 20px; height: 20px; margin-top: .18rem; accent-color: var(--g-ink); }
.g-field--check a { color: var(--g-accent-ink); }

/* Honeypot: positioned off-screen rather than display:none, because a growing
   share of bots skip display:none fields precisely because it is the tell. */
.g-form__hp {
  position: absolute !important;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.g-form__foot {
  /* Column, not a wrapping row. The submit button now renders last in source
     order so the privacy reassurance is read before the commitment rather than
     after it, and a row would put them side by side and undo that ordering on
     any viewport wide enough to fit both. */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--g-s3);
  margin-top: var(--g-s5);
}
.g-form__foot .g-btn { align-self: flex-start; }

@media (max-width: 560px) {
  .g-form__foot .g-btn { width: 100%; }
}
.g-form__note { margin: 0; font-size: var(--g-fs-small); color: var(--g-muted); max-width: 30rem; }

/* --- reCAPTCHA attribution ------------------------------------------------
   Required by Google's terms when the floating badge is hidden. Sized as fine
   print because that is what it is — but kept at --g-muted (5.64:1 on white)
   rather than a lighter grey, because legal text nobody can read is not
   compliance.                                                              */

.g-form__legal {
  margin: var(--g-s3) 0 0;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--g-muted);
  max-width: 34rem;
}
.g-form__legal a { color: var(--g-accent-ink); }

/* ===========================================================================
   LEGAL DOCUMENTS
   ---------------------------------------------------------------------------
   Long-form reading, so it gets the narrow measure and the generous leading
   that the marketing pages deliberately do not. The people who read these read
   them properly.
   =========================================================================== */

.g-legal__head { padding: calc(var(--g-header-h) + var(--g-s7)) 0 var(--g-s5); }
.g-legal__head h1 { font-size: var(--g-fs-h2); line-height: var(--g-lh-snug); }
.g-legal__intro { margin-top: var(--g-s3); color: var(--g-muted); }

.g-legal__meta {
  margin-top: var(--g-s4);
  padding-top: var(--g-s3);
  border-top: 1px solid var(--g-line);
  font-size: var(--g-fs-small);
  color: var(--g-muted);
  font-variant-numeric: tabular-nums;
}

/* --- Contents ------------------------------------------------------------- */

.g-legal__toc {
  margin-bottom: var(--g-s7);
  padding: var(--g-s4) var(--g-s5);
  background: var(--g-surface);
  border-radius: var(--g-radius);
}
.g-legal__toc-title {
  margin: 0 0 var(--g-s2);
  font-size: var(--g-fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--g-muted);
}
.g-legal__toc ol { margin: 0; padding-left: 1.2rem; }
.g-legal__toc li { margin-bottom: .35rem; font-size: var(--g-fs-small); line-height: 1.5; }
.g-legal__toc li::marker { color: var(--g-muted); font-variant-numeric: tabular-nums; }
.g-legal__toc a { color: var(--g-ink); text-decoration: none; }
.g-legal__toc a:hover { color: var(--g-accent-ink); text-decoration: underline; }

/* --- Body ----------------------------------------------------------------- */

.g-legal__section { margin-bottom: var(--g-s7); scroll-margin-top: calc(var(--g-header-h) + var(--g-s4)); }
.g-legal__section h2 {
  font-size: var(--g-fs-h3);
  line-height: var(--g-lh-snug);
  color: var(--g-ink);
  margin-bottom: var(--g-s3);
}
.g-legal__section p {
  margin: 0 0 var(--g-s3);
  font-size: var(--g-fs-lead);
  line-height: var(--g-lh-body);
  color: var(--g-body);
}
.g-legal__list { margin: 0 0 var(--g-s3); padding-left: var(--g-s4); }
.g-legal__list li { margin-bottom: .4rem; line-height: var(--g-lh-body); color: var(--g-body); }
.g-legal__list li::marker { color: var(--g-accent-ink); }

/* A note is guidance, not fine print — same size as the body, distinguished by
   the rule rather than by being shrunk into illegibility. */
.g-legal__note {
  padding: var(--g-s3) var(--g-s4);
  border-left: 3px solid var(--g-accent);
  background: var(--g-surface);
  border-radius: 0 var(--g-radius-sm) var(--g-radius-sm) 0;
  font-size: var(--g-fs-small) !important;
  color: var(--g-body);
}

/* --- Contact block -------------------------------------------------------- */

.g-legal__contact {
  margin: var(--g-s7) 0 var(--g-s8);
  padding: var(--g-s5);
  background: var(--g-surface);
  border-radius: var(--g-radius);
}
.g-legal__contact h2 { font-size: var(--g-fs-h3); color: var(--g-ink); margin-bottom: var(--g-s2); }
.g-legal__contact p { margin: 0 0 var(--g-s3); color: var(--g-body); }
.g-legal__contact-list { list-style: none; margin: 0; padding: 0; font-size: var(--g-fs-small); line-height: 1.7; }
.g-legal__contact-list a { color: var(--g-accent-ink); }

@media (max-width: 640px) {
  .g-legal__head { padding-top: calc(var(--g-header-h) + var(--g-s5)); }
  .g-legal__toc { padding: var(--g-s3) var(--g-s4); }
  .g-legal__contact { padding: var(--g-s4); }
}

/* An admin-only editorial note. Deliberately loud — it is a reminder to the
   business that something is unfinished, and it must never be mistaken for
   published content. Visitors never receive this markup at all. */
.g-legal__note--admin {
  border-left-color: var(--g-crit, #A32020);
  background: #FDEEEE;
  color: #6E1616;
}
.g-legal__note--admin strong { display: block; margin-bottom: .25rem; text-transform: uppercase;
  font-size: 0.6875rem; letter-spacing: .06em; }

/* Cross-document links inside a legal page (Trust Centre hub). */
.g-legal__links { list-style: none; margin: 0 0 var(--g-s3); padding: 0; display: flex; flex-wrap: wrap; gap: var(--g-s2); }
.g-legal__links a {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: var(--g-s1) var(--g-s3);
  background: var(--g-surface-2); border-radius: var(--g-radius-pill);
  font-size: var(--g-fs-small); font-weight: 650; color: var(--g-ink); text-decoration: none;
  transition: background var(--g-dur) var(--g-ease), color var(--g-dur) var(--g-ease);
}
.g-legal__links a:hover { background: var(--g-ink); color: var(--g-bg); }

.g-author__links { margin: var(--g-s2) 0 0; display: flex; flex-wrap: wrap; gap: var(--g-s3); font-size: var(--g-fs-small); }
.g-author__links a { color: var(--g-accent-ink); font-weight: 650; }

/* ===========================================================================
   CLOSING CTA BAND
   ---------------------------------------------------------------------------
   Layout only. .g-section--dark in base.css already supplies the navy ground,
   the white headings, the muted lead and the light-bordered ghost button, so
   nothing here restates a colour — a second definition is how the dark band
   and this component would eventually drift apart.
   =========================================================================== */

.g-cta__inner { text-align: center; }

.g-cta__title { margin-bottom: var(--g-s3); }

.g-cta__lead {
  max-width: 62ch;
  margin-inline: auto;
  margin-bottom: var(--g-s5);
}

.g-cta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--g-s3);
}

.g-cta__actions .g-btn { gap: 0.5rem; }

@media (max-width: 560px) {
  .g-cta__actions { flex-direction: column; align-items: stretch; }
  .g-cta__actions .g-btn { width: 100%; white-space: normal; }
}

/* ===========================================================================
   STICKY MOBILE CONVERSION BAR
   ---------------------------------------------------------------------------
   WHY THIS EXISTS
   Below 1080px .g-header__cta is display:none and below 940px the header phone
   number collapses to a 44px icon with no label. Measured at 375px, that left a
   single unlabelled glyph as the only persistent conversion control across an
   18-screen homepage. This restores a labelled, thumb-reachable one.

   CLS: the bar is position:fixed, so it never participates in layout and cannot
   shift content. The body padding that keeps the footer clear of it is static
   CSS applied at the same breakpoint — not measured or set in JS — so it is in
   place on first paint rather than being added after hydration.

   SAFE AREA: padding-bottom composites the iOS home-indicator inset on top of
   the design padding. env() resolves to 0px where it is unsupported, so the
   fallback needs no separate rule.
   =========================================================================== */

.g-stickybar { display: none; }

@media (max-width: 767px) {
  .g-stickybar {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    padding: var(--g-s2) var(--g-s3);
    padding-bottom: calc(var(--g-s2) + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, 0.94);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--g-line);
    box-shadow: 0 -6px 24px rgba(18, 53, 91, 0.10);
    /* Default state is VISIBLE, and JS hides it while the hero is still on
       screen by adding .is-top. The polarity matters: if the script fails to
       run, a bar that defaults to hidden is a conversion control that silently
       does not exist, whereas one that defaults to shown is merely redundant
       for the first screen. Fail toward the version that still works. */
    transform: translateY(0);
    transition: transform 0.28s var(--g-ease);
  }

  .g-stickybar.is-top { transform: translateY(110%); }

  .g-stickybar__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--g-s2);
    align-items: stretch;
  }

  /* On the pages that render only the phone, one full-width target rather than
     a half-width button with dead space beside it.

     This rule must come AFTER .g-stickybar__inner above: both selectors are a
     single class, so specificity is equal and source order is what decides.
     Placed before it, this silently did nothing. */
  .g-stickybar__inner--single { grid-template-columns: 1fr; }

  /* Height is PINNED, not just floored. The body padding below has to reserve
     exactly the space the bar occupies, and a min-height leaves the real height
     up to the button's own padding — which measured 76px against 72px of
     reserved space, so the bar sat over the last 4px of the footer. Fixing the
     height makes the two numbers derivable from each other instead of guessed.
     48px still clears the 44px minimum tap target. */
  .g-stickybar .g-btn {
    height: 48px;
    min-height: 48px;
    padding-block: 0;
    padding-inline: 0.5rem;
    font-size: 0.875rem;
    white-space: nowrap;
    gap: 0.4rem;
  }

  /* The number is the trust signal, so it is shown rather than the word
     "Call" — but it is the first thing allowed to shrink if the viewport is
     narrower than the two labels comfortably need. */
  .g-stickybar__phone { letter-spacing: -0.01em; }

  @media (max-width: 359px) {
    .g-stickybar .g-btn { font-size: 0.8125rem; padding-inline: 0.35rem; }
  }

  /* Keep the footer, and anything else at the end of the document, clear of
     the bar. Applied whether or not the bar is currently revealed, so the value
     never changes during a scroll and never causes a shift.

     The arithmetic is the bar's own: 12px padding-top + 48px button + 12px
     padding-bottom = 72px, plus --g-s3 of breathing room, plus the same
     safe-area inset the bar adds to itself. */
  body { padding-bottom: calc(72px + var(--g-s3) + env(safe-area-inset-bottom, 0px)); }
}

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

/* ===========================================================================
   "WHAT HAPPENS NEXT" — compact list, above the enquiry form
   ---------------------------------------------------------------------------
   The card-grid version of this content used to be a full section below the
   form. This shape exists so the same three points fit above it without
   pushing the first field off the screen.
   =========================================================================== */

.g-expect {
  list-style: none;
  margin: 0 0 var(--g-s5);
  padding: var(--g-s4);
  display: flex;
  flex-direction: column;
  gap: var(--g-s3);
  background: var(--g-surface);
  border: 1px solid var(--g-line);
  border-radius: var(--g-radius);
}

.g-expect__item {
  display: flex;
  align-items: flex-start;
  gap: var(--g-s2);
}

.g-expect__icon {
  flex: 0 0 auto;
  margin-top: 0.15rem;
  color: var(--g-accent);
  display: inline-flex;
}

.g-expect__title {
  display: block;
  font-size: var(--g-fs-small);
  font-weight: 700;
  color: var(--g-ink);
  line-height: var(--g-lh-snug);
}

.g-expect__text {
  display: block;
  font-size: var(--g-fs-small);
  color: var(--g-muted);
  line-height: 1.5;
}

/* A tinted surface already carries this colour, so the block switches to white
   to stay distinct — same rule the split panel follows. */
.g-section--tint .g-expect { background: #fff; }

/* A service tile with no page behind it. Sits in the grid identically but does
   not lift, does not shadow and has no arrow — so it never advertises a
   navigation it cannot perform. See geeks360_service_has_page(). */
.g-tile--static:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--g-line);
}