/* ============================================================
   main.css
   Shared by every page: design tokens, base typography,
   buttons, the site header and the site footer.
   Media Clock — static rebuild
   ============================================================ */

:root {
  /* --page: the content width every section shares. It tracks Bootstrap's own
     container steps (see the overrides below the :root block), so a component
     that sets max-width: var(--page) always matches the sections around it at
     every breakpoint instead of running wider than them */
  --page: 100%;
  --orange: #f15a26;
  --ink: #17191b;
  --muted: #687078;
  --soft: #f7f7f5;
  --line: #e8e8e5;
  /* hairline for white cards sitting on a white band */
  --line-soft: #dbe0e4;
  --dark: #202326;
  --r: 10px;
  /* height of the fixed header — first section must clear it */
  /* live loads only Poppins + Open Sans; body text is the system stack */
  --font-body:
    -apple-system, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial,
    "Noto Sans", sans-serif;
  --font-head: Poppins, var(--font-body);
  --font-alt: "Open Sans", var(--font-body);
  --header-h: 99px;
  --header-h-mobile: 76px;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  line-height: 1.5;
}
button,
input,
select,
textarea {
  font: inherit;
}
a {
  color: inherit;
}
.eyebrow {
  color: var(--orange);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
h1,
h2,
h3,
h4 {
  line-height: 1.15;
}
h1 {
  font-size: clamp(2.4rem, 5vw, 4.5rem);
  letter-spacing: -0.045em;
  margin: 0 0 18px;
}
h2 {
  font-size: clamp(1.8rem, 3vw, 2.7rem);
  letter-spacing: -0.03em;
  margin: 0 0 12px;
}
h3 {
  font-size: 19px;
  margin: 0 0 7px;
}
p {
  margin: 0;
  color: var(--muted);
}
.section {
  padding: 24px 0;
}
.tight {
  padding: 44px 0;
}
.head {
  max-width: 720px;
  margin-bottom: 26px;
}
/* the token follows Bootstrap's container widths, and from 1200px up it also
   caps the container itself — Bootstrap would otherwise jump to 1320px at xxl
   and leave those sections wider than the ones that read var(--page) */
@media (min-width: 576px) {
  :root {
    --page: 540px;
  }
}
@media (min-width: 768px) {
  :root {
    --page: 720px;
  }
}
@media (min-width: 992px) {
  :root {
    --page: 960px;
  }
}
@media (min-width: 1200px) {
  :root {
    --page: 1140px;
  }
  .container {
    max-width: var(--page);
  }
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 10px 16px;
  font-weight: 750;
  cursor: pointer;
  text-decoration: none;
  transition: 0.18s;
}
.primary {
  background: var(--orange);
  color: #fff;
}
.primary:hover {
  filter: brightness(0.94);
}
.outline {
  background: #fff;
  border-color: #d9d9d5;
}
.outline:hover {
  background: var(--soft);
}

/* ============================================================
   * Header — mirrors the live mediaclock.com.au header
   * Desktop: transparent bar layered over the dark hero
   * Mobile : solid white bar + full-screen overlay menu
   * Brand  : orange #f15a26 · dark panel #192b33 · Poppins
   ============================================================ */

/* * Header — wrapper (fixed: transparent over the hero, sticky on scroll) */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 99;
  background: transparent;
  /* own compositor layer: scrolling then never repaints the page behind
     the bar, which is what made the fade feel like it stuttered */
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  will-change: background-color, transform;
  transition: background-color 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
/* * Header — scroll sentinel: an IntersectionObserver target 60px down the
   page, so the sticky state costs nothing per scroll frame */
.header-sentinel {
  position: absolute;
  top: 60px;
  left: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
  visibility: hidden;
}

/* * Header — scrolled state (past 60px: dark panel fades in, bar shrinks)
   Mirrors the live "Sticky Header Effects" config:
   transparent -> #192B33, scroll_distance 60px, padding -> 0, 0.4s ease-in-out */
.site-header.is-scrolled {
  background: #192b33;
}
.site-header.is-scrolled .header-inner {
  padding-top: 0;
  padding-bottom: 0;
  min-height: 79px;
}

/* * Header — desktop bar */
/* layout (flex/align/justify) comes from Bootstrap utilities in the markup */
.header-inner {
  gap: 24px;
  width: 100%;
  padding: 5px 24px 15px;
  min-height: 99px;
  transition:
    padding 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    min-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.header-logo {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}
.header-logo img {
  height: 50px;
  width: auto;
  display: block;
}

/* * Header — desktop menu */
/* Bootstrap's .nav supplies flex + list reset */
.header-menu {
  --bs-nav-link-padding-x: 0;
  --bs-nav-link-padding-y: 0;
}
.header-menu > li {
  position: relative;
}
.header-menu > li > a,
.header-menu > li > button {
  display: block;
  padding: 15px;
  border: 0;
  background: none;
  font-family: var(--font-head);
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.2s;
}
.header-menu > li > a:hover,
.header-menu > li > button:hover,
.header-menu > li > a.current {
  color: var(--orange);
}
/* caret on the Services parent */
.header-menu .has-sub > a:after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 7px;
  vertical-align: 2px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
}

/* * Header — Services dropdown */
/* * Header — services mega panel
   Spans the page container so it lines up with the rest of the layout, and
   flows categories across a responsive grid so it stays balanced whether
   there are 8 services or 30. */
.header-menu > li.has-sub {
  position: static;
}
.header-menu .sub-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  width: min(900px, calc(100vw - 32px));
  margin-top: 10px;
  padding: 30px 34px 26px;
  background: #192b33;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.38);
  max-height: calc(100vh - var(--header-h) - 30px);
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(6px);
  transition:
    opacity 0.22s ease,
    transform 0.22s ease,
    visibility 0.22s;
  z-index: 9999;
}
.header-menu .has-sub:hover .sub-menu,
.header-menu .has-sub:focus-within .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%);
}

/* * Header — mega panel: CSS multi-column so category blocks balance
   themselves whatever the category count (Bootstrap's fixed grid leaves a
   ragged last row at 5 categories) */
.mega-grid {
  columns: 3;
  column-gap: 34px;
}
.mega-col {
  break-inside: avoid;
  display: inline-block;
  width: 100%;
  margin-bottom: 24px;
}
@media (max-width: 1199.98px) {
  .mega-grid {
    columns: 2;
  }
}
.mega-title {
  font-family: var(--font-head);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--orange);
  margin: 0 0 12px;
  padding-bottom: 9px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.header-menu .sub-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.header-menu .sub-menu a {
  display: block;
  padding: 8px 10px;
  margin-left: -10px;
  border-radius: 6px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.35;
  color: #cdd4d9;
  text-decoration: none;
  transition:
    color 0.18s,
    background-color 0.18s;
}
.header-menu .sub-menu a:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}
.header-menu .sub-menu a.current {
  color: var(--orange);
}

/* * Header — mobile bar (hidden on desktop) */
.header-mobile {
  gap: 12px;
  padding: 13px 12px;
  background: #fff;
}
/* the logo shrinks on very narrow phones (320px) instead of pushing the
   call + menu buttons off the edge; 203 x 28 is its normal size */
.header-mobile-logo {
  flex: 0 1 auto;
  min-width: 0;
}
.header-mobile-logo img {
  display: block;
  width: 203px;
  max-width: 100%;
  height: auto;
}
.header-mobile-actions {
  flex: 0 0 auto;
  gap: 12px;
}
.header-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: var(--orange);
  color: #fff;
  cursor: pointer;
}
.header-icon-btn svg {
  width: 25px;
  height: 25px;
}

/* * Header — full-screen mobile menu */
.fs-menu {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #192b33;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  /* visibility is transitioned as well, so on close it flips to hidden only
     once the fade has finished — with opacity alone the panel disappeared at
     once and the closing animation was never seen */
  transition:
    opacity 0.3s ease,
    visibility 0.3s ease;
}
.fs-menu.open {
  opacity: 1;
  visibility: visible;
}
.fs-menu-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 50px;
  height: 50px;
  border: 0;
  border-radius: 8px;
  background: var(--orange);
  color: #fff;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}
.fs-menu-inner {
  width: min(420px, 100%);
  margin-inline: auto;
  gap: 0;
  /* top padding clears the close button so the first row stays tappable */
  padding: 70px 22px 60px;
}
.fs-menu-inner > a.fs-link,
.fs-menu-inner > button.fs-link {
  display: block;
  width: 100%;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: none;
  padding: 15px 2px;
  font-family: var(--font-head);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.3;
  color: #fff;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.fs-menu-inner a.fs-link:hover,
.fs-menu-inner button.fs-link:hover,
.fs-menu-inner a.fs-link.current {
  color: var(--orange);
}
/* * Header — mobile overlay: collapsible category groups so a long service
   list never buries the rest of the nav. Native <details>, no JS. */
.fs-group {
  width: 100%;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.fs-group-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 15px 2px;
  font-family: var(--font-head);
  font-size: 17px;
  font-weight: 500;
  color: #fff;
  cursor: pointer;
  list-style: none;
}
.fs-group-title::-webkit-details-marker {
  display: none;
}
.fs-group-title::after {
  content: "";
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--orange);
  border-bottom: 2px solid var(--orange);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.25s;
}
.fs-group[open] .fs-group-title {
  color: var(--orange);
}
.fs-group[open] .fs-group-title::after {
  transform: rotate(-135deg) translate(-2px, -2px);
}
/* services sit one level in, smaller and quieter than the top-level rows */
.fs-group .fs-link {
  display: block;
  padding: 11px 2px 11px 16px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.35;
  color: #b9c2c8;
  text-align: left;
  text-decoration: none;
}
.fs-group .fs-link:last-child {
  padding-bottom: 16px;
}
.fs-group .fs-link:hover,
.fs-group .fs-link.current {
  color: var(--orange);
}

.fs-menu-cta {
  gap: 14px;
  margin-top: 28px;
}
.fs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 20px 40px;
  border: 0;
  border-radius: 3px;
  font-family: var(--font-head);
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
}
.fs-btn.call {
  background: var(--orange);
  color: #fff;
}
.fs-btn.quote {
  background: #fff;
  color: #000;
}
.fs-social {
  gap: 5px;
  margin-top: 20px;
  justify-content: center;
}
.fs-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 10%;
  background: #000;
  color: #69727d;
}
.fs-social svg {
  width: 22px;
  height: 22px;
}

/* * Side gutters — Bootstrap's 12px is too tight once the layout is one or two
   columns wide, so tablets and phones get a real margin. The rows inside keep
   their own 12px padding, so column gaps are unchanged.

   It runs to 1199px on purpose: some sections cap the container at 1140px
   (contact, why-us), which overrides Bootstrap's own 960px width at lg, so the
   container is full-bleed from 992px up. Rows with the 48px gutter pull
   -24px either side, which hung past the screen edge on 12px of padding —
   24px here is half the widest gutter, so the row lands exactly on the edge. */
@media (max-width: 1199.98px) {
  .container {
    padding-left: 24px;
    padding-right: 24px;
  }
}
@media (max-width: 575.98px) {
  .container {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* * Header — scroll lock while the overlay is open. Scoped to the mobile
   breakpoint on purpose: if the viewport widens while the menu is open, the
   lock lifts by itself without needing JS to notice. */
@media (max-width: 991.98px) {
  body.menu-open {
    overflow: hidden;
  }
}

/* * Header — the mobile overlay must never render on desktop, even if it was
   left open when the viewport crossed the breakpoint */
@media (min-width: 992px) {
  .fs-menu {
    display: none;
  }
}

/* * Header — no animation for readers who ask for reduced motion */
@media (prefers-reduced-motion: reduce) {
  .site-header,
  .header-inner,
  .fs-menu {
    transition: none;
  }
}

/* * Header — mobile breakpoint */
@media (max-width: 991.98px) {
  .site-header,
  .site-header.is-scrolled {
    background: #fff;
  }
}

/* ============================================================
   * Footer — mirrors the live mediaclock.com.au footer
   * Flat #192B33 panel (same tone as the scrolled header)
   * 3 columns: brand+contact / Quick Links / Services, then a bottom bar
   * Type: Poppins throughout · links white -> #f15a26 on hover (0.3s)
   ============================================================ */

/* * Footer — panel */
.global-footer {
  /* padding + base size folded in from the old bare `footer` rule */
  padding: 22px 0;
  font-size: 14px;
  background: #192b33;
  color: #fff;
  font-family: var(--font-head);
}

/* a dark contact band straight above the dark footer gets a hairline seam */
.contact--static + .global-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* * Footer — 3-column top block (live ratio 449 / 285 / 285) */
/* columns come from Bootstrap's .row/.col-lg-*; only the band padding is ours */
/* the logo sat 42px below the footer's top edge (22px band + 20px row), which
   read as a gap between the page and the footer rather than as the footer's
   own breathing room */
.footer-top {
  padding-block: 4px 26px;
}
/* live pulls the brand block up, so the headings start ~60px lower */
.footer-col {
  padding-top: 60px;
}

/* * Footer — brand column */
.footer-logo {
  display: inline-block; /* link only as wide as the logo */
}
.footer-brand img {
  width: 198px;
  height: auto;
  display: block;
  margin-bottom: 20px;
}
.footer-tagline {
  max-width: 400px;
  margin: 0 0 26px;
  font-size: 15px;
  line-height: 1.6;
  color: #aeb8be;
}

/* * Footer — phone / email (orange, tight tracking like live) */
.footer-contact a {
  display: block;
  margin-bottom: 10px;
  font-size: 18px;
  line-height: 22px;
  letter-spacing: -1px;
  color: var(--orange);
  text-decoration: none;
  transition: color 0.3s;
}
.footer-contact a:hover {
  color: #fff;
}

/* * Footer — column headings */
.footer-brand .footer-heading {
  margin-top: 8px;
}
.footer-heading {
  margin: 0 0 20px;
  font-size: 18px;
  font-weight: 600;
  line-height: 18px;
  letter-spacing: -1px;
  color: #fff;
}
.footer-heading.follow-us {
  margin-top: 30px;
  margin-bottom: 7px;
}

/* * Footer — social icons (46px, subtle grey until hover) */
.footer-social {
  gap: 10px;
}
.footer-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10%;
  color: var(--orange);
  transition: color 0.3s;
}
.footer-social a:hover {
  color: #fff;
}
.footer-social svg {
  width: 25px;
  height: 25px;
}

/* * Footer — link columns */
.footer-col a,
.footer-col button {
  display: block;
  margin-bottom: 18px;
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  color: #fff;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.3s;
}
.footer-col a:hover,
.footer-col button:hover,
.footer-col a.current {
  color: var(--orange);
}
.footer-col a:last-child {
  margin-bottom: 0;
}

/* * Footer — bottom bar (copyright · ABN · privacy; no divider on live) */
.footer-bottom {
  border-top: 1px solid #fff;
  padding-top: 18px;
  /* padding-bottom: 18px; */
  font-size: 15px;
  line-height: 1.5;
  color: #fff;
}
.footer-bottom a {
  color: #fff;
  text-decoration: none;
  transition: color 0.3s;
}
.footer-bottom a:hover {
  color: var(--orange);
}

/* * Footer — mobile: single column stack */
@media (max-width: 991.98px) {
  /* the logo sat 56px below the footer's top edge (22px band + 34px row);
     on a phone that read as a gap between the page and the footer */
  .global-footer {
    padding-top: 12px;
  }
  .footer-top {
    padding-block: 12px 26px;
  }
  .footer-col {
    padding-top: 30px;
  }
  .footer-brand img {
    width: 250px;
  }
  .footer-bottom > .row > [class^="col"] + [class^="col"] {
    margin-top: 6px;
  }
  /* Stacked, the three read as a list, and the copyright line belongs at the
     foot of it rather than above the ABN and the policy link. Ordered rather
     than reordered in the markup, so the desktop row keeps copyright on the
     left where it is read first. */
  .footer-bottom > .row > [class^="col"]:first-child {
    order: 1;
    margin-top: 6px;
  }
  /* the copyright block ran 26px + 30px + the footer's own 22px deep, which is
     a lot of empty navy under three short lines */
  .footer-bottom {
    padding-top: 16px;
    padding-bottom: 4px;
  }
  .global-footer {
    padding-bottom: 16px;
  }
  .footer-top {
    padding-bottom: 16px;
  }
}

/* ============================================================
   * Service hero — shared by every service page (see includes/components/hero.php)
   Mirrors the live layout: photo background, big Poppins heading and
   sub-line on the left, dark "Request For Proposal" card on the right.
   ============================================================ */
.service-hero {
  position: relative;
  background-color: #192b33;
  color: #fff;
  /* top padding clears the fixed header (see --header-h); the sides are left to
     the container inside, so the hero copy lines up with every other section */
  padding: calc(var(--header-h) + 28px) 0 63px;
}
/* * Service hero — the photo, as a layer rather than the section's background.
   Fills the band on desktop; on a phone its height is capped (see the mobile
   block below) so the form's height no longer decides how the photo is cropped. */
.service-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}
/* columns + vertical centring come from Bootstrap's .row/.col-lg-* */
.service-hero-inner {
  position: relative;
  z-index: 2;
  min-height: 580px;
}
/* * Service hero — no proposal card (contact-us)
   With the card, the row fills the 580px band on its own. Without it the row
   is only as tall as the copy, so .align-items-center centres the copy inside
   that short row and it sits near the top. Stretching the row to the band's
   height puts the copy in the middle of the photo instead. */
/* the fixed header covers the top of the photo, so the bottom padding is
   mirrored below it — the copy then centres on what the visitor actually sees */
.service-hero--no-form {
  padding-top: calc(var(--header-h) + 63px);
}
.service-hero--no-form .service-hero-inner {
  display: flex;
  flex: 1 1 auto;
  width: 100%;
}
.service-hero--no-form .service-hero-inner > .row {
  flex: 1 1 auto;
  width: 100%;
}
/* On desktop the band is sized to the window instead of a fixed 580px: with no
   proposal card the hero would otherwise run past the fold, and copy centred in
   the band still looks low on screen. Phones keep the shared content height. */
@media (min-width: 992px) {
  .service-hero--no-form {
    display: flex;
    min-height: 100vh;
    /* capped: a full-height band on a tall tablet is far narrower than the
       16:9 photo behind it, and `cover` then crops several hundred pixels off
       each side — on Careers that cut two of the three people out of the team
       shot. 760px keeps the band generous and the photo close to its own
       shape. */
    min-height: min(100svh, 760px);
  }
  .service-hero--no-form .service-hero-inner {
    min-height: 0;
  }
}

/* * Service hero — copy column */
.service-hero-copy .eyebrow {
  color: var(--orange);
}
.service-hero-title {
  font-family: var(--font-head);
  font-size: clamp(2.2rem, 4.6vw, 55px);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0;
  color: #fff;
  max-width: 18ch;
  margin: 0 0 18px;
}
.service-hero-sub {
  font-family: var(--font-head);
  font-size: clamp(1.3rem, 2.6vw, 35px);
  font-weight: 600;
  line-height: 1.5;
  color: #fff;
  max-width: 24ch;
  margin: 0 0 30px;
}

/* * Service hero — CTA (dark pill, like the live "Let's Start") */
.service-hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 0;
  border-radius: 4px;
  padding: 15px 35px;
  background: #192b33;
  color: #fff;
  font-family: var(--font-head);
  font-size: clamp(1rem, 1.7vw, 20px);
  font-weight: 400;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.25s;
}
.service-hero-cta:hover {
  background: var(--orange);
}

/* * Service hero — second, outlined button next to the CTA ($hero_cta2) */
.service-hero-cta--outline {
  margin-left: 12px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background: transparent;
}
.service-hero-cta--outline:hover {
  border-color: var(--orange);
  color: #fff;
}
/* * Service hero — page graphic in place of the proposal card ($hero_aside) */
.service-hero-aside {
  display: flex;
  justify-content: center;
}

/* * Service hero — stats strip */
.service-hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 34px;
  margin-top: 34px;
  padding-left: 14px;
  border-left: 3px solid var(--orange);
}
.service-hero-stats strong {
  display: block;
  font-size: 24px;
  font-weight: 800;
  color: #fff;
}
.service-hero-stats span {
  font-size: 15px;
  color: #cdd1d3;
}

/* * Service hero — Request For Proposal card */
.rfp-card {
  background: #192b33;
  border-radius: 20px;
  padding: 26px 24px 28px;
}
.rfp-title {
  font-family: var(--font-head);
  font-size: 28px;
  font-weight: 600;
  line-height: 1.2;
  color: #fff;
  text-align: center;
  margin: 4px 0 22px;
}
.rfp-form {
  gap: 14px;
}
/* white fields on the dark card, as on the live form */
.rfp-form input,
.rfp-form select,
.rfp-form textarea {
  width: 100%;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 13px 15px;
  background: #fff;
  color: var(--ink);
  font-family: var(--font-head);
  font-size: 17px;
  line-height: 1.3;
  outline: none;
}
.rfp-form input::placeholder,
.rfp-form textarea::placeholder {
  color: #8b9298;
}
.rfp-form select {
  color: #8b9298;
  appearance: none;
  /* chevron drawn inline so no extra request is needed */
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23444' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
  padding-right: 40px;
}
.rfp-form select:valid {
  color: var(--ink);
}
.rfp-form textarea {
  min-height: 108px;
  resize: vertical;
}
.rfp-form input:focus,
.rfp-form select:focus,
.rfp-form textarea:focus {
  box-shadow: 0 0 0 3px rgba(241, 90, 38, 0.35);
}

/* * Service hero — NDA reassurance line */
.rfp-nda {
  margin: 4px 0 2px;
  font-family: var(--font-head);
  font-size: 15px;
  line-height: 1.5;
  color: #fff;
}

/* * Service hero — send button */
.rfp-submit {
  border: 0;
  border-radius: 8px;
  padding: 16px 20px;
  background: var(--orange);
  color: #fff;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
  transition: filter 0.2s;
}
.rfp-submit:hover {
  filter: brightness(0.94);
}
.rfp-success h3 {
  color: #fff;
  margin: 0 0 6px;
}
.rfp-success p {
  color: #cdd1d3;
  margin: 0;
}

/* * Service hero — tablet / mobile */
@media (max-width: 991.98px) {
  .service-hero {
    padding: calc(var(--header-h-mobile) + 24px) 0 44px;
  }
  /* A logo band straight after a hero is the same dark colour, so the two read
     as one block and their padding stacks: 44px below the form plus 36px above
     "Happy Clients" left an 80px void on a phone. The hero's own bottom padding
     is enough.
     Two conditions, both necessary:
     - .band-dark, because the tightening is only right where there is no seam.
       On a light band (the SEO package's "Trusted by…") the colour changes at
       that edge, and the heading needs the band's normal padding to sit in.
     - both hero kinds, since the homepage's slider hero is .home-hero, not
       .service-hero, and was the one page left on the old 36px. */
  .service-hero + .logo-band.band-dark,
  .home-hero + .logo-band.band-dark {
    padding-top: 10px;
  }
  /* Same stacking below the proposal card: its own 28px plus the band's 44px
     put 72px of empty dark under the Send button. The 44px was sized for a
     hero whose last element is a line of copy, not a full-width button. The
     card's own bottom padding comes in with it, since the two are read as one
     gap — the card is dark on a dark band, so the only edge the eye sees is
     where the next band's colour starts. */
  .service-hero:not(.service-hero--no-form) {
    padding-bottom: 8px;
  }
  /* * How much photo is left above the proposal card.
     Stacked, the card starts wherever the copy ends, so the strip of photo a
     visitor actually sees is set by the length of the heading. Portfolio's one
     line left 110px of it; Website Development's three lines left 292px, and
     the short pages read as though they had a smaller banner than the rest.
     A floor on the copy column holds the card down to a consistent start, and
     the copy is centred in it so a short heading sits in the middle of the
     photo rather than tight under the header. Pages whose copy is already
     taller than the floor are untouched. */
  .service-hero:not(.service-hero--no-form) .service-hero-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Sized to the tallest copy any page has (the SEO package's title, sub and
       button come to 332px here), so every page's card starts at the same
       point and every banner shows the same amount of photo. A floor rather
       than a fixed height: longer copy in future grows instead of clipping,
       at the cost of that one page being taller. */
    min-height: 340px;
  }
  .rfp-card {
    padding-bottom: 20px;
  }
  /* The photo stops above the form instead of stretching behind it. Covering
     the full 900–1050px band scaled a 16:9 photo to ~1780px wide and showed a
     360px strip of it — 80% cropped away. Capped, the crop is about 45% and the
     photo keeps a shape close to its own. The mask fades the bottom edge into
     the band's dark colour, so where the copy runs past the photo there is no
     hard line. */
  .service-hero:not(.service-hero--no-form) .service-hero-bg {
    bottom: auto;
    /* runs to where the card begins: 100px of band padding + the 340px copy
       floor + the row's 24px gutter */
    height: 470px;
    /* never taller than the band itself */
    max-height: 100%;
    -webkit-mask-image: linear-gradient(180deg, #000 80%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 80%, transparent 100%);
  }
  .service-hero-inner {
    min-height: 0;
  }
  .service-hero-title,
  .service-hero-sub {
    max-width: none;
  }
}
@media (max-width: 575.98px) {
  .service-hero-stats {
    gap: 18px;
  }
  .service-hero-cta {
    width: 100%;
    justify-content: center;
  }
  .service-hero-cta--outline {
    margin: 12px 0 0;
  }
}

/* ============================================================
   * FAQ Section — shared component
   Used by includes/components/faq.php across all service & package pages
   ============================================================ */
.faq-section {
  background: #fff;
  padding: 72px 0;
}
.faq-section .eyebrow {
  color: var(--orange);
}
.faq-section h2 {
  font-family: var(--font-head);
  font-weight: 600;
  color: var(--ink);
}
.faq-section .head {
  max-width: 100%;
}
.faq {
  width: 100%;
  max-width: 100%;
  gap: 12px;
}
.faqitem {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.faqitem:hover {
  border-color: #d0d5d9;
}
.faqitem.open {
  border-color: rgba(241, 90, 38, 0.45);
  box-shadow: 0 8px 26px rgba(20, 20, 20, 0.06);
}
.faqbtn {
  width: 100%;
  border: 0;
  background: none;
  padding: 22px 28px;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.faqbtn:hover {
  background: rgba(241, 90, 38, 0.02);
}
.faqbtn:focus {
  outline: none;
}
.faqbtn:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: -2px;
  border-radius: 12px;
}
.faqbtn .faq-q {
  font-family: var(--font-head);
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.45;
  flex: 1;
}
.faq-icon {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border: 1px solid #dcdcd8;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  background: #fff;
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
  margin-left: 16px;
  box-sizing: border-box;
}
.faqbtn:hover .faq-icon {
  border-color: var(--orange);
  color: var(--orange);
}
.faq-icon svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  display: block;
  transform-origin: center;
  transition: transform 0.25s ease;
}
.faqitem.open .faq-icon {
  background: var(--orange);
  border-color: var(--orange);
  color: #fff;
}
.faqitem.open .faq-icon svg {
  transform: rotate(45deg);
}
.answer {
  display: none;
  padding: 0 44px 26px 28px;
}
.answer p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--muted);
  max-width: 1100px;
  margin: 0;
}
.answer p + p {
  margin-top: 12px;
}
.faqitem.open .answer {
  display: block;
}

/* Optional Dark Theme variant for FAQ */
.faq-section.faq-dark {
  background: #192b33;
  color: #fff;
}
.faq-section.faq-dark h2 {
  color: #fff;
}
.faq-section.faq-dark .head p {
  color: #b9c2c8;
}
.faq-section.faq-dark .faqitem {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.12);
}
.faq-section.faq-dark .faqitem:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(241, 90, 38, 0.6);
}
.faq-section.faq-dark .faqitem.open {
  border-color: var(--orange);
}
.faq-section.faq-dark .faqbtn .faq-q {
  color: #fff;
}
.faq-section.faq-dark .faq-icon {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.18);
  color: #cdd4d9;
}
.faq-section.faq-dark .answer p {
  color: #cdd4d9;
}

@media (max-width: 640px) {
  .faq-section {
    padding: 52px 0;
  }
  .faqbtn {
    padding: 16px 18px;
    gap: 14px;
  }
  .faqbtn .faq-q {
    font-size: 15.5px;
  }
  .faq-icon {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    margin-left: 10px;
  }
  .faq-icon svg {
    width: 12px;
    height: 12px;
  }
  .answer {
    padding: 0 18px 18px;
  }
  .answer p {
    font-size: 14px;
    line-height: 1.6;
  }
}

/* ============================================================
   * Section bands — shared light / dark backgrounds for components
   Light bands are white on every page, the same as the FAQ band, so a
   page reads as one surface. --band-light can re-tint them per page.
   ============================================================ */
.band-dark {
  background: #192b33;
  color: #fff;
}
.band-light {
  background: var(--band-light, #fff);
  color: var(--ink);
}
.band-dark .eyebrow,
.band-light .eyebrow {
  color: var(--orange);
}
.band-dark h2,
.band-light h2 {
  font-family: var(--font-head);
  font-weight: 600;
}
.band-dark h2 {
  color: #fff;
}
.band-light h2 {
  color: var(--ink);
}
.band-dark .head p {
  color: #b9c2c8;
}
.band-light .head p {
  color: var(--muted);
}

/* ============================================================
   * Slider — shared carousel layout (logo-slider.php, testimonials.php)
   Behaviour lives in main.js. Each slider sets --pv / --pv-md / --pv-sm
   inline (slides per view on desktop / tablet / phone); --cur is the one
   that applies at the current width, and main.js reads it back.
   ============================================================ */
.mc-slider {
  --pv: 1;
  --pv-md: var(--pv);
  --pv-sm: var(--pv-md);
  --gap: 20px;
  --cur: var(--pv);
}
.mc-slider-track {
  position: relative;
  display: flex;
  gap: var(--gap);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.mc-slider-track::-webkit-scrollbar {
  display: none;
}
.mc-slider-track:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 4px;
  border-radius: 10px;
}
.mc-slide {
  flex: 0 0 calc((100% - (var(--cur) - 1) * var(--gap)) / var(--cur));
  min-width: 0;
  scroll-snap-align: start;
}
/* 24px hit area per dot (touch-target minimum), 8px visible dot inside */
.mc-slider-dots {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 2px;
  margin-top: 22px;
}
/* The dots only appear below 992px, where the logos need paging. Their 24px
   row is mostly tap target around an 8px dot, so the band's own padding on top
   of it read as a gap with nothing in it. */
@media (max-width: 991.98px) {
  .logo-band .mc-slider-dots {
    margin-top: 14px;
  }
}
.mc-slider-dots button {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
}
.mc-slider-dots button::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background: currentColor;
  opacity: 0.3;
  transition:
    width 0.25s ease,
    opacity 0.25s ease,
    background-color 0.25s ease;
}
.mc-slider-dots button[aria-current="true"]::before {
  width: 22px;
  opacity: 1;
  background: var(--orange);
}
.mc-slider-dots button:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 1px;
  border-radius: 6px;
}
@media (max-width: 991.98px) {
  .mc-slider {
    --cur: var(--pv-md);
  }
}
@media (max-width: 575.98px) {
  .mc-slider {
    --cur: var(--pv-sm);
  }
}
@media (prefers-reduced-motion: reduce) {
  .mc-slider-track {
    scroll-behavior: auto;
  }
  .mc-slider-dots button::before {
    transition: none;
  }
}

/* * Logo slider — client logos / tech stack (includes/components/logo-slider.php) */
.logo-band {
  padding: 56px 0;
}
.logo-slide {
  display: flex;
  align-items: center;
  justify-content: center;
}
.logo-slide img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  user-select: none;
  -webkit-user-drag: none;
}

/* * Testimonials slider (includes/components/testimonials.php) */
.testimonial-band {
  padding: 64px 0;
}
.tcard {
  display: flex;
  flex-direction: column;
  gap: 28px;
  margin: 0;
}
.tcard-quote {
  margin: 0;
}
.tcard-quote p {
  max-width: 60ch;
  margin: 0;
  font-size: clamp(18px, 2vw, 23px);
  line-height: 1.55;
}
.band-light .tcard-quote p {
  color: #243037;
}
.band-dark .tcard-quote p {
  color: #e4eaed;
}
.tcard-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}
.tcard-avatar {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
}
.tcard-who {
  display: flex;
  flex-direction: column;
  line-height: 1.4;
}
.tcard-name {
  font-family: var(--font-head);
  font-size: 17px;
  font-weight: 600;
}
.tcard-role {
  font-size: 14px;
}
.band-light .tcard-role {
  color: var(--muted);
}
.band-dark .tcard-role {
  color: #a9b6bd;
}
.tcard-logo {
  width: auto;
  height: auto;
  max-width: 150px;
  max-height: 72px;
  margin-left: auto;
  object-fit: contain;
}
/* logos are dark artwork on transparent — give them a white chip on dark bands */
.band-dark .tcard-logo {
  padding: 8px 12px;
  border-radius: 10px;
  background: #fff;
}
/* phones: one centred column — quote, photo, name + role, company logo */
@media (max-width: 575.98px) {
  .tcard {
    align-items: center;
    text-align: center;
  }
  .tcard-quote p {
    margin-inline: auto;
  }
  .tcard-foot {
    flex-direction: column;
    justify-content: center;
    gap: 12px;
  }
  .tcard-who {
    align-items: center;
  }
  .tcard-logo {
    margin-left: 0;
  }
}

/* ============================================================
   * Contact section — shared component (includes/components/contact.php)
   Hidden panel by default, opened by any .contactBtn (main.js). Shown
   permanently when a page sets $contact_visible = true.
   ============================================================ */
.contact {
  display: none;
  background: #192b33;
  color: #fff;
  padding: 72px 0;
  scroll-margin-top: var(--header-h);
}
.contact.active,
.contact--static {
  display: block;
}
.contact .eyebrow {
  color: var(--orange);
}
.contact h2 {
  font-family: var(--font-head);
  font-weight: 600;
  color: #fff;
}
.contact p {
  color: #cbd0d3;
}
.contact .contact-note {
  margin-top: 16px;
  font-size: 15px;
  font-weight: 600;
  color: var(--orange);
}
.contact .contact-privacy {
  margin-top: 10px;
  font-size: 14px;
  color: #8fa0a8;
}
.contact-points-title {
  margin: 22px 0 10px;
  font-family: var(--font-head);
  font-size: 20px;
  font-weight: 600;
  color: #fff;
}
.contact-points {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.contact-points li {
  position: relative;
  padding-left: 18px;
  color: #cbd0d3;
}
.contact-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--orange);
}
.field {
  display: grid;
  align-content: start; /* a neighbour's error message makes the row taller — keep label + input at the top */
  gap: 5px;
}
.field label {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}
.field input,
.field select,
.field textarea {
  width: 100%;
  border: 1px solid #deded9;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 15px;
  outline: none;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(241, 90, 38, 0.12);
}
.field textarea {
  min-height: 86px;
  resize: vertical;
}
/* * Forms : email / phone error (added by main.js) */
/* --field-error: the message colour for the surface the form sits on —
   #e51919 on white cards, a lighter red on the dark navy panels so it stays
   readable. The hero's proposal card and the consultation form then match. */
.field-error {
  display: block;
  font-size: 13px;
  line-height: 1.3;
  color: var(--field-error, #e51919);
}
.field-error:empty {
  display: none;
}
.contact--form,
.rfp-card {
  --field-error: #ff7b7b;
}
input.is-invalid,
select.is-invalid,
textarea.is-invalid,
.rfp-form input.is-invalid,
.rfp-form select.is-invalid,
.rfp-form textarea.is-invalid,
.contact--form .field input.is-invalid,
.contact--form .field textarea.is-invalid {
  border-color: #e51919;
}
.success {
  display: none;
  padding: 36px 20px;
  text-align: center;
}
.success.show {
  display: block;
}
.success h3 {
  margin-bottom: 8px;
  font-size: 22px;
  color: var(--ink);
}
.hidden {
  display: none !important;
}

/* * Contact : service-page variant ($contact_visible) — matches the live
     "Book A Free Consultation" form: fields straight on the dark band */
.contact--form {
  padding: 80px 0;
}
/* live block is ~1120px wide, so the title breaks over two lines */
.contact--form .container {
  max-width: var(--page);
}
.contact--form h2 {
  margin-bottom: 16px;
  font-size: 48px;
  line-height: 1.35;
}
.contact--form .contact-points-title {
  margin: 0 0 12px;
  font-size: 30px;
}
.contact--form .contact-points {
  gap: 8px;
  padding-left: 20px;
  list-style: disc;
}
.contact--form .contact-points li {
  padding-left: 0;
  color: #fff;
}
.contact--form .contact-points li::before {
  content: none;
}
.contact--form .form {
  padding: 0 calc(var(--bs-gutter-x) * 0.5); /* keep the column gutter */
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: #fff;
}
.contact--form .field {
  gap: 8px;
}
/* one spacing scale for the form: 8px label -> field, 24px between rows */
.contact--form .form .row {
  --bs-gutter-y: 24px;
}
.contact--form .field label {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  color: #fff;
}
.contact .req {
  color: #e51919;
}
.contact--form .field input,
.contact--form .field select,
.contact--form .field textarea {
  height: 54px;
  padding: 0 16px;
  border: 1px solid #d9dfe3;
  border-radius: 10px;
  background: #fff;
  font-size: 16px;
  color: #000;
}
/* the native select is shorter and carries its own arrow, so it is drawn to
   match the inputs beside it */
.contact--form .field select {
  appearance: none;
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23192b33' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 6 5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 16px 16px;
}
.contact--form .field textarea {
  height: 120px;
  min-height: 120px;
  padding: 12px 16px;
}
.contact--form .field ::placeholder {
  color: #757575;
}
/* * Contact : Project Budget ($contact_budget) — radio inputs styled as pills */
/* no margin/padding reset here: Bootstrap's reboot already zeroes the fieldset,
   and the .row > * column gutters must still apply */
.field-budget {
  min-width: 0;
  border: 0;
}
.field-budget legend {
  float: none;
  width: auto;
  margin: 0 0 12px;
  padding: 0;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  color: #fff;
}
.budget-options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.budget-option {
  position: relative;
  margin: 0;
  cursor: pointer;
}
/* the real radio stays in the layout (keyboard + screen readers), just invisible */
.contact--form .field .budget-option input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  cursor: pointer;
}
.budget-option span {
  display: block;
  padding: 10px 18px;
  border: 1px solid #d9dfe3;
  border-radius: 999px;
  background: #fff;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.2;
  color: #192b33;
  white-space: nowrap;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
}
.budget-option:hover span {
  border-color: var(--orange);
}
.budget-option input:checked + span {
  border-color: var(--orange);
  background: var(--orange);
  color: #fff;
}
.budget-option input:focus-visible + span {
  outline: 3px solid var(--orange);
  outline-offset: 2px;
}
.field-budget .field-error {
  margin-top: 8px;
}
/* Contact : +61 prefix sits inside the phone input */
.phone-field {
  position: relative;
}
.contact--form .phone-field input {
  padding-left: 78px;
}
.phone-prefix {
  position: absolute;
  top: 50%;
  left: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  color: #000;
  transform: translateY(-50%);
  pointer-events: none;
}
/* Contact : label + "0 / 180" counter on one line; the counter drops
   under the label (still right-aligned) when there isn't room */
.field-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 16px;
}
.field-count {
  margin-left: auto;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.6);
}
.contact .form-privacy {
  margin: 24px 0 0;
  font-size: 16px;
  line-height: 1.5;
  color: #fff;
}
.form-captcha {
  margin-top: 24px;
}
.form-submit {
  display: block;
  width: 100%;
  height: 60px;
  margin-top: 24px;
  border: 0;
  border-radius: 10px;
  background: #f9683e;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  transition: background 0.2s ease;
}
.form-submit:hover {
  background: var(--orange);
}
.form-submit:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
}
.contact--form .success h3 {
  color: #fff;
}
@media (min-width: 992px) {
  .contact--form .contact-copy {
    padding-top: 24px;
  }
}
/* * Vertical rhythm — tablet + phone
   At desktop the bands deliberately differ (50 / 56 / 64 / 72). On a narrow
   screen that reads as random gaps between stacked sections, so every band
   drops to one shared step, with the form and FAQ bands slightly roomier. */
@media (max-width: 991.98px) {
  .section,
  .logo-band,
  .testimonial-band {
    padding: 24px 0;
  }
  /* a logo band ends on its pager dots, which are mostly tap target around an
     8px dot — the full band padding under that read as an empty gap */
  .logo-band {
    padding-bottom: 22px;
  }
  .faq-section {
    padding: 48px 0;
  }
  .head {
    margin-bottom: 22px;
  }
}
/* tablet: the same idea, sized to the tallest copy at these widths (304px) */
@media (min-width: 576px) and (max-width: 991.98px) {
  .service-hero:not(.service-hero--no-form) .service-hero-copy {
    min-height: 310px;
  }
  .service-hero:not(.service-hero--no-form) .service-hero-bg {
    height: 440px;
  }
}
@media (max-width: 575.98px) {
  .section,
  .logo-band,
  .testimonial-band {
    padding: 24px 0;
  }
  .logo-band {
    padding-bottom: 18px;
  }
  .faq-section {
    padding: 40px 0;
  }
  .head {
    margin-bottom: 18px;
  }
}

/* * Contact — phone / email / address rows ($contact_details) */
.contact-details {
  display: grid;
  gap: 14px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}
.contact-details li,
.contact-details a {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-head);
  font-size: 18px;
  color: #fff;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.contact-details a:hover {
  color: var(--orange);
}
.contact-details svg {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  padding: 11px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--orange);
}

/* tablet + phone: the copy stacks above the form */
@media (max-width: 991.98px) {
  .contact--form {
    padding: 48px 0;
  }
  .contact--form > .container > .row {
    --bs-gutter-y: 40px;
  }
  .contact--form h2 {
    font-size: 36px;
  }
  .contact--form .contact-points-title {
    font-size: 24px;
  }
}
@media (max-width: 575.98px) {
  .contact--form {
    padding: 40px 0;
  }
  .contact--form > .container > .row {
    --bs-gutter-y: 32px;
  }
  .contact--form h2 {
    font-size: 32px;
  }
  .contact--form .contact-points-title {
    font-size: 22px;
  }
  .contact--form .form .row {
    --bs-gutter-y: 20px;
  }
  .contact .form-privacy,
  .form-captcha,
  .form-submit {
    margin-top: 20px;
  }
}

/* * Shared components — tighter vertical rhythm on phones
   (the band step itself is set with the rest of the rhythm above) */
@media (max-width: 575.98px) {
  .contact {
    padding: 40px 0;
  }
}

/* ============================================================
   * Why choose us — shared component (includes/components/why-us.php)
   Homepage + service pages. Layout: 1140px container, orange heading,
   cards in the shared slider. Animation: the front (photo + title)
   zooms out and fades on hover / keyboard focus, uncovering the back.
   ============================================================ */
.why-us .container {
  max-width: var(--page);
}
.why-us .head h2 {
  color: var(--orange);
}
/* The card takes its height from its own copy, and the slider's flex track
   stretches every card in the row to the tallest. It used to be a fixed 450px
   with the back absolutely positioned, which meant the copy could not push the
   card taller — the longest cards had as little as 37px of slack, and anything
   that made the text taller (a different system font for the body stack, a
   larger default text size, the heading font still loading) tipped them into
   `overflow-y: auto` and the copy scrolled or clipped inside the card. */
.why-us .why-card {
  display: flex;
  min-height: 380px;
  border-radius: 30px;
}
.why-us .why-card:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: -3px;
}
.why-card-inner,
.why-card-front,
.why-card-back {
  overflow: hidden;
  border-radius: 30px;
}
.why-card-inner {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  width: 100%;
}
/* the front is the overlay; the back is in flow and sets the card's height */
.why-card-front {
  position: absolute;
  inset: 0;
}
.why-card-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.why-card-front-title,
.why-card-title {
  font-family: var(--font-head);
  font-size: 32px;
  font-weight: 600;
  line-height: 38px;
  color: #fff;
}

/* * Why choose us : front — photo + title, on top until hover / focus */
.why-card-front {
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 36px 24px;
  background: #0e171b;
  transition:
    opacity 0.5s ease,
    transform 0.5s ease,
    visibility 0.5s ease;
}
.why-card:hover .why-card-front,
.why-card:focus-within .why-card-front {
  opacity: 0;
  visibility: hidden;
  transform: scale(0.75);
}
/* the live site's tint over each photo */
.why-card-front::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(12, 23, 28, 0.25) 0%,
    rgba(12, 23, 28, 0.45) 45%,
    rgba(12, 23, 28, 0.8) 100%
  );
}
.why-card-front-title {
  position: relative;
  z-index: 1;
  text-align: center;
}

/* * Why choose us : back — optional photo, icon, title, copy */
/* plain `center` is safe now that the card grows with its copy: the content is
   never taller than the box, so centring can never push the icon off the top */
.why-card-back {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 12px;
  padding: 24px 26px;
  background: rgba(0, 0, 0, 0.314);
  text-align: left;
}
/* layers inside the back: photo (0) -> dark tint (1) -> icon, title, copy (2) */
.why-card-back::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(12, 23, 28, 0.5);
  pointer-events: none;
}
.why-card-back > * {
  position: relative;
  z-index: 2;
}
.why-card-back > .why-card-img {
  position: absolute;
  z-index: 0;
}
.why-card-icon {
  width: 40px;
  height: 40px;
}
.why-card-title {
  margin: 0;
}
.why-card-back p {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: #fff;
}
@media (prefers-reduced-motion: reduce) {
  .why-card-front {
    transition: none;
  }
}
/* 992–1199px: still three cards across but in a 960px container, so each one
   is ~290px wide and the longer copy (website development → Cutting-Edge
   Technologies) ran past the bottom */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .why-card-front-title,
  .why-card-title {
    font-size: 26px;
    line-height: 32px;
  }
  .why-card-back {
    padding: 22px 20px;
    gap: 10px;
  }
  .why-card-back p {
    font-size: 14px;
    line-height: 1.45;
  }
}

/* the 450px card is sized for three across on a desktop; on a tablet or phone
   it is one or two across and that height is far taller than it needs to be */
/* these cards carry a paragraph each, so two across below 768px leaves them
   ~255px wide and the copy runs past the bottom — one at a time instead */
@media (max-width: 767.98px) {
  .why-us .mc-slider {
    --cur: var(--pv-sm);
  }
}
@media (max-width: 991.98px) {
  .why-us .why-card {
    min-height: 350px;
    border-radius: 24px;
  }
  .why-card-front-title,
  .why-card-title {
    font-size: 26px;
    line-height: 32px;
  }
  .why-card-back {
    padding: 22px 22px;
    gap: 10px;
  }
  .why-card-back p {
    font-size: 14px;
    line-height: 1.45;
  }
}
@media (max-width: 575.98px) {
  .why-us .why-card {
    min-height: 300px;
    border-radius: 20px;
  }
  .why-card-back {
    padding: 20px 18px;
    gap: 10px;
  }
  .why-card-back p {
    font-size: 14px;
    line-height: 1.45;
  }
  .why-card-front-title,
  .why-card-title {
    font-size: 24px;
    line-height: 30px;
  }
  .why-card-back {
    padding: 24px;
  }
}

/* * Intro band — "Established in 2017" proof line ($intro_bold), same on every page.
   Specific enough to beat the page/band weights (service.css sets 300 on light bands) */
.svc-intro p.svc-intro-text.svc-intro-text--bold {
  max-width: 760px;
  margin-inline: auto;
  font-family: var(--font-head);
  font-weight: 700;
  text-align: center;
}