/**
 * G2 Accounting - Main Stylesheet
 * Consolidated CSS for optimal performance
 *
 * This file combines:
 * - Site Header
 * - Hero Banner
 * - Service Boxes
 * - Client Showcase
 * - Site Footer
 * - Legacy Fixes
 *
 * @version 1.0.0
 */

/* ============================================================================
   FONT — Bariol (moved here from the legacy purged.css; woff2 + woff only)
   ============================================================================ */
@font-face {
  font-family: 'Bariol';
  src: url('../fonts/Bariol-Regular.woff2') format('woff2'),
       url('../fonts/Bariol-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Bariol';
  src: url('../fonts/Bariol-Bold.woff2') format('woff2'),
       url('../fonts/Bariol-Bold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

/* ===================================
   ACCESSIBILITY UTILITIES
   =================================== */

/* Visually hide an element while keeping it readable by screen readers and
   crawlable by search engines. Defined here (render-blocking) so .sr-only
   content never flashes visible before the deferred component sheets load. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* ===================================
   CSS VARIABLES
   =================================== */

:root {
  /* Header variables */
  --header-bg: transparent;
  --header-text: #2a2a2a;
  --header-accent: #666644;
  --header-hover-bg: rgba(42, 42, 42, 0.08);
  --header-dark-bg: rgba(24, 24, 24, 0.98);
  --header-mobile-text: #FFF73A;
  --transition-speed: 0.3s;
  --transition-ease: cubic-bezier(0.4, 0, 0.2, 1);

  /* Banner variables */
  --banner-text-color: #FFF73A;
  --banner-text-shadow: 2px 4px 8px rgba(0, 0, 0, 0.4);
  --banner-z-content: 10;
  --banner-z-scroll: 20;

  /* Service boxes variables */
  --service-bg: #181818;
  --service-text: #c2c2c2;
  --service-title: #ffffff;
  --service-title-hover: #FFF73A;
  --service-box-bg: rgba(255, 255, 255, 0.02);
  --service-box-hover-bg: rgba(255, 255, 255, 0.06);
  --booking-bg: #2a2a2a;
  --booking-border: #666644;
  --booking-text: #e8e4a0;

  /* Client showcase variables */
  --client-bg: #181818;
  --client-text: #ffffff;
  --client-hover-bg: rgba(255, 247, 58, 0.25);

  /* Footer variables */
  --footer-bg: #ffffff;
  --footer-text: #363537;
  --footer-border: rgba(0, 0, 0, 0.1);
  --footer-link-hover: #FFF73A;
  --footer-arch-height-desktop: 364px;
  --footer-arch-height-tablet: 200px;
  --footer-arch-height-mobile: 120px;

  /* Shared spacing tokens (moved from responsive-enhancements.css so every
     page — not just the homepage — can use them) */
  --spacing-sm: clamp(0.75rem, 0.6rem + 0.75vw, 1.25rem);
  --spacing-md: clamp(1rem, 0.8rem + 1vw, 2rem);
  --transition-normal: 0.3s ease-in-out;
}

/* ============================================================================
   SHARED BASE / SMOOTHNESS
   Moved here from responsive-enhancements.css (which loaded on the homepage
   ONLY) so all 9 pages get them. These are global and layout-neutral —
   smooth anchor scrolling and crisper text — honoured by every page because
   g2-main.css is render-blocking on all of them.
   ============================================================================ */

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Homepage fluid container padding.
   Scoped to .home (NOT global) so inner-page gutters keep Bootstrap's 15px and
   don't shift. It lives HERE (render-blocking) rather than in the now
   async-loaded responsive-enhancements.css so the above-the-fold hero/header
   containers paint at their final width immediately — no flash/reflow when
   responsive-enhancements.css arrives late. Bootstrap's .container supplies the
   responsive max-width at each breakpoint; this only overrides the gutter. */
.home .container {
  width: 100%;
  padding-right: var(--spacing-md);
  padding-left: var(--spacing-md);
  margin-right: auto;
  margin-left: auto;
  transition: padding var(--transition-normal);
}

@media (max-width: 575px) {
  .home .container {
    padding-right: var(--spacing-sm);
    padding-left: var(--spacing-sm);
  }
}

/* Hero booking-wizard spacing (homepage). Above the fold, so it stays
   render-blocking here (moved from the now async responsive-enhancements.css)
   to prevent the "Online Booking" start button from nudging when that file
   loads late. */
.home .booking-wizard {
  margin-top: clamp(0.5rem, 1vw, 1.5rem);
}

.home #opening {
  /* Drops the start button down over the banner art (was on .booking-button) */
  margin-top: 170px;
}

@media (max-height: 600px) {
  .home .booking-wizard {
    margin-top: 0.5rem;
  }
}

/* ============================================================================
   SITE HEADER - Mobile-first, semantic, accessible
   ============================================================================ */

.site-header {
  position: relative;
  z-index: 1000;
  background: var(--header-bg);
  padding: clamp(0.5rem, 2vh, 1.5rem) 0;
  transition: all var(--transition-speed) var(--transition-ease);
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
}

/* Logo Section */
.logo {
  display: block;
  flex-shrink: 0;
  transition: opacity 0.2s ease;
  line-height: 0;
}

.logo:hover {
  opacity: 0.8;
}

.logo:focus {
  outline: 2px solid var(--header-text);
  outline-offset: 4px;
  border-radius: 4px;
}

.logo img {
  display: block;
  width: clamp(180px, 20vw, 302px);
  height: auto;
}

/* Mobile Menu Toggle Button */
.menu-toggle {
  display: none;
  background: none;
  border: none;
  padding: 0.5rem;
  cursor: pointer;
  z-index: 1001;
  border-radius: 8px;
  transition: background var(--transition-speed) ease;
}

.menu-toggle:hover {
  background: var(--header-hover-bg);
}

.menu-toggle:focus {
  outline: 2px solid var(--header-text);
  outline-offset: 2px;
}

.hamburger {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 28px;
  height: 22px;
}

.hamburger span {
  display: block;
  width: 100%;
  height: 3px;
  background: var(--header-text);
  border-radius: 2px;
  transition: all var(--transition-speed) var(--transition-ease);
}

/* Hamburger animation when menu is open */
.menu-toggle[aria-expanded="true"] .hamburger span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] .hamburger span:nth-child(2) {
  opacity: 0;
}

.menu-toggle[aria-expanded="true"] .hamburger span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* Drawer close (×) button — the discoverable way to dismiss the mobile menu.
   The hamburger morphs into an X too, but it sits BEHIND the open drawer, so this
   in-drawer button is what users actually see/tap. Hidden on desktop. */
.nav-close {
  display: none;
  position: absolute;
  top: 0.85rem;
  right: 1rem;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: none;
  border: none;
  border-radius: 8px;
  color: var(--header-mobile-text);
  cursor: pointer;
  transition: background var(--transition-speed) ease, transform var(--transition-speed) ease;
}

.nav-close:hover {
  background: rgba(255, 247, 58, 0.15);
  transform: rotate(90deg);
}

.nav-close:focus-visible {
  outline: 2px solid var(--header-mobile-text);
  outline-offset: 2px;
}

/* Navigation - Desktop Layout */
.main-nav {
  flex: 1;
}

.nav-list {
  display: flex;
  gap: clamp(0.75rem, 2vw, 2rem);
  align-items: center;
  justify-content: flex-end;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-list li {
  margin: 0;
}

.nav-list a {
  display: inline-block;
  color: var(--header-text);
  text-decoration: none;
  font-family: 'Bariol', sans-serif;
  font-size: clamp(0.875rem, 0.8rem + 0.3vw, 1rem);
  padding: 0.5rem 1rem;
  border: 2px solid transparent;
  border-radius: 20px;
  transition: all 0.2s ease;
  white-space: nowrap;
  font-weight: 600;
}

.nav-list a:hover,
.nav-list a:focus {
  border-color: var(--header-accent);
  border-style: dotted;
}

.nav-list a:focus {
  outline: none;
}

/* Active/current page state */
.nav-list a.active,
.nav-list a[aria-current="page"] {
  border-color: var(--header-accent);
  border-style: solid;
}

/* Mobile Responsive - Tablet & Below */
@media (max-width: 991px) {
  .menu-toggle {
    display: block;
  }

  .nav-close {
    display: flex;
  }

  .main-nav {
    position: fixed;
    top: 0;
    right: -100%;
    width: min(320px, 85vw);
    height: 100vh;
    background: var(--header-dark-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: 5rem 2rem 2rem;
    transition: right var(--transition-speed) var(--transition-ease);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 1002;
  }

  /* Show menu when toggle is activated */
  .menu-toggle[aria-expanded="true"] ~ .main-nav {
    right: 0;
    box-shadow: -10px 0 40px rgba(0, 0, 0, 0.5);
  }

  .nav-list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .nav-list li {
    border-bottom: 1px solid rgba(255, 247, 58, 0.1);
  }

  .nav-list li:last-child {
    border-bottom: none;
  }

  .nav-list a {
    display: block;
    padding: 1rem 1.25rem;
    font-family: 'Bariol', sans-serif;
    font-size: 1.125rem;
    border-radius: 8px;
    border: 2px solid transparent;
    color: var(--header-mobile-text);
    font-weight: 600;
  }

  .nav-list a:hover,
  .nav-list a:focus {
    background: rgba(255, 247, 58, 0.15);
    transform: translateX(8px);
    border-color: var(--header-mobile-text);
    border-style: dotted;
  }

  /* Overlay backdrop when menu is open */
  .menu-toggle[aria-expanded="true"]::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: -1;
    animation: fadeIn var(--transition-speed) ease;
  }

  @keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
}

/* Viewport Height Optimizations */
@media (max-height: 700px) {
  .site-header {
    padding: 0.5rem 0;
  }
}

@media (max-height: 600px) {
  .site-header {
    padding: 0.35rem 0;
  }

  .logo img {
    width: clamp(160px, 18vw, 240px);
  }
}

@media (max-width: 475px) {
  .logo img {
    width: clamp(140px, 35vw, 180px);
  }

  .hamburger {
    width: 24px;
    height: 20px;
  }
}

/* ============================================================================
   HERO BANNER - Full viewport banner with responsive design
   ============================================================================ */

.hero-banner {
  position: relative;
  width: 100%;
  /* Fill the viewport. `svh` (small viewport height) keeps the hero a fixed
     size on mobile so it no longer resizes when the URL bar shows/hides;
     the `vh` line above is the fallback for browsers without svh support. */
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: min-height 0.3s ease;
}

/* Decorative arch at bottom of banner */
.hero-banner::after {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  bottom: -113px;
  height: 185px;
  background: url(../images/bannerbottom_bg1.webp) no-repeat center center;
  background-size: 100% 100%;
  z-index: 5;
}

/* Banner Background */
.banner-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* WebP with JPG fallback — image-set() picks the best format the browser supports */
  background-image: url('../images/home_banner.jpg');
  background-image: image-set(
    url('../images/home_banner.webp') type('image/webp'),
    url('../images/home_banner.jpg') type('image/jpeg'));
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 1;
  /* No transform animation anymore — the parallax JS that drove it was removed,
     so the old `transition: transform` and the permanent `will-change: transform`
     (pure compositing overhead) have been dropped. */
}

/* Lighter hero image on small screens (phones get ~109KB instead of ~350KB) */
@media (max-width: 768px) {
  .banner-background {
    background-image: url('../images/home_banner.jpg');
    background-image: image-set(
      url('../images/home_banner-mobile.webp') type('image/webp'),
      url('../images/home_banner.jpg') type('image/jpeg'));
  }
}

/* Banner Content */
.banner-content {
  position: absolute;
  left: 0;
  right: 0;
  top: 20%;
  transform: translateY(0);
  z-index: var(--banner-z-content);
  text-align: center;
  padding: clamp(1rem, 3vw, 2rem);
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

/* Main Heading */
/* Selector is `.banner-content .main-heading` (specificity 0,2,0), NOT bare
   `.main-heading`. Legacy purged.css has `.banner-content h1 { font-size:75px }`
   (0,1,1) which otherwise wins and forces a fixed 75px on EVERY screen — that
   made the H1 break mid-word on phones ("Accountin/g."). The extra class lets the
   fluid size below actually apply on mobile while still landing on ~75px at desktop. */
.banner-content .main-heading {
  font-size: clamp(2.25rem, 1rem + 5.4vw, 4.6875rem); /* 36px floor → 75px desktop */
  color: var(--banner-text-color);
  text-shadow: var(--banner-text-shadow);
  margin-bottom: clamp(1rem, 0.5rem + 3vw, 2.625rem);
  line-height: 1.12;
  /* Slide-up only — NO opacity fade. The H1 is the hero's LCP candidate;
     starting at opacity:0 would defer LCP until the fade finished (~0.8s).
     Painting it fully-opaque immediately keeps the motion without the LCP cost. */
  animation: slideUp 0.8s ease-out;
  text-wrap: balance;          /* even multi-line wrapping; never break mid-word */
  max-width: 95%;
  margin-left: auto;
  margin-right: auto;
}

@keyframes slideUp {
  from {
    transform: translateY(30px);
  }
  to {
    transform: translateY(0);
  }
}

/* The hero "Online Booking" start button now uses the shared .g2-cta style
   (see REUSABLE CTA BUTTONS below). Its vertical offset lives on .home #opening. */

/* Scroll Indicator (Arrow) */
.scroll-indicator {
  position: absolute;
  bottom: 140px;
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--banner-z-scroll);
  animation: bounce 2s infinite ease-in-out;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}

.scroll-indicator:hover {
  animation-play-state: paused;
}

.scroll-indicator img {
  width: clamp(35px, 5vw, 50px);
  height: auto;
  filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.3));
  transition: all 0.3s ease;
  display: block;
}

.scroll-indicator:hover img {
  transform: scale(1.15);
  filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.4));
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateX(-50%) translateY(0);
  }
  40% {
    transform: translateX(-50%) translateY(-15px);
  }
  60% {
    transform: translateX(-50%) translateY(-8px);
  }
}

/* Banner Responsive Breakpoints */
@media (max-width: 991px) {
  .banner-content {
    padding-top: clamp(70px, 8vh, 100px);
    width: calc(100% - 2.5rem);
  }

  .hero-banner::after {
    height: 100px;
    bottom: -55px;
  }
}

@media (max-width: 991px) and (orientation: landscape) {
  .banner-content {
    padding-top: 60px;
    padding-bottom: 60px;
  }
}

@media (max-width: 767px) {
  .banner-content {
    padding: 1rem;
    padding-top: clamp(60px, 8vh, 90px);
    width: calc(100% - 2rem);
  }

  .scroll-indicator {
    bottom: 30px;
  }

  .scroll-indicator img {
    width: clamp(32px, 5vw, 42px);
  }

  .hero-banner::after {
    height: 30px;
    bottom: -4px;
  }
}

@media (max-width: 475px) {
  .banner-content {
    width: calc(100% - 1.5rem);
    padding-top: clamp(50px, 7vh, 80px);
  }

  .scroll-indicator {
    bottom: 25px;
  }

  .scroll-indicator img {
    width: clamp(30px, 5vw, 38px);
  }
}

@media (max-height: 600px) {
  .banner-content .main-heading {
    font-size: clamp(1.2rem, 0.9rem + 1.5vw, 2rem);
    margin-bottom: 0.75rem;
  }
}

@media (max-height: 500px) {
  .banner-content {
    padding-top: 50px;
    padding-bottom: 40px;
  }

  .banner-content .main-heading {
    font-size: clamp(1.1rem, 0.8rem + 1.2vw, 1.5rem);
    margin-bottom: 0.5rem;
  }

  .scroll-indicator {
    bottom: 20px;
  }
}

@media (max-height: 500px) and (orientation: landscape) {
  .banner-content .main-heading {
    font-size: clamp(1.1rem, 0.8rem + 1.2vw, 1.5rem);
    margin-bottom: 0.5rem;
  }
}

@media (min-height: 900px) and (max-width: 767px) {
  .banner-content {
    padding-top: 100px;
  }
}

/* ============================================================================
   SERVICE BOXES - Three-column layout with Individual, Booking, Business
   ============================================================================ */

.service-boxes {
  position: relative;
  width: 100%;
  background: var(--service-bg);
  color: var(--service-text);
  text-align: center;
  padding: clamp(70px, 10vh, 120px) 0;
}

.service-boxes .container {
  position: relative;
  z-index: 1;
}

/* Service Grid */
.service-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin: 0;
  padding: 0;
}

/* Service Cards (Individual & Business) */
.service-card {
  position: relative;
  z-index: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding: clamp(60px, 8vh, 90px) clamp(20px, 3vw, 40px);
  background: var(--service-box-bg);
  border-radius: 20px;
  /* Hover paints box-shadow via a composited pseudo-element (below), so the
     card itself only transitions cheap, GPU-friendly properties. */
  transition: transform 0.3s ease, background-color 0.3s ease;
  min-height: 400px;
}

/* Pre-rendered hover shadow on a pseudo-element; we fade its opacity instead of
   animating box-shadow each frame (keeps the hover at 60fps, no per-frame repaint). */
.service-card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 20px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.service-card:hover {
  transform: translateY(-8px) scale(1.03);
  background: var(--service-box-hover-bg);
}

.service-card:hover::after {
  opacity: 1;
}

.service-card figure {
  margin: 0 0 clamp(30px, 5vh, 45px) 0;
}

.service-card figure img {
  display: block;
  max-height: clamp(60px, 10vh, 80px);
  width: auto;
  margin: 0 auto;
}

.service-card h3 {
  font-size: clamp(20px, 3.5vw, 37px);
  line-height: 1.1;
  letter-spacing: clamp(3px, 0.8vw, 7px);
  color: var(--service-title);
  margin: 0 0 clamp(18px, 3vh, 25px) 0;
  transition: color 0.3s ease;
}

.service-card h3 a {
  color: inherit;
  text-decoration: none;
}

.service-card h3:hover {
  color: var(--service-title-hover);
}

.service-card p {
  font-size: clamp(15px, 1.8vw, 17px);
  line-height: 1.55;
  color: var(--service-text);
  margin: 0 0 clamp(20px, 3vh, 30px) 0;
  max-width: 95%;
}

/* Read more arrow */
.read-more-arrow {
  display: inline-block;
  width: 40px;
  height: 28px;
  background: url(../images/arrow_right.svg) no-repeat center center;
  background-size: 100%;
  font-size: 0;
  margin-top: auto;
  transition: transform 0.3s ease;
  text-decoration: none;
}

.read-more-arrow:hover {
  animation: bounceRight 2s infinite;
}

@keyframes bounceRight {
  0%, 20%, 50%, 80%, 100% {
    transform: translateX(0);
  }
  40% {
    transform: translateX(30px);
  }
  60% {
    transform: translateX(15px);
  }
}

/* Left arrow for Business column */
.service-card:last-child .read-more-arrow {
  background-image: url(../images/arrow_left.svg);
}

.service-card:last-child .read-more-arrow:hover {
  animation: bounceLeft 2s infinite;
}

@keyframes bounceLeft {
  0%, 20%, 50%, 80%, 100% {
    transform: translateX(0);
  }
  40% {
    transform: translateX(-30px);
  }
  60% {
    transform: translateX(-15px);
  }
}

/* Booking CTA (Center Column) */
.booking-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--service-bg);
  box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.1);
  padding: clamp(30px, 5vh, 50px) clamp(15px, 2vw, 20px);
}

.booking-cta-content {
  position: relative;
  z-index: 0;
  background: var(--booking-bg);
  border: 2px solid var(--booking-border);
  border-radius: 12px;
  padding: clamp(20px, 3vh, 30px) clamp(25px, 4vw, 40px);
  max-width: 380px;
  width: 100%;
  /* box-shadow cross-faded via the two pseudo-elements below (composited) */
  transition: transform 0.3s ease, border-color 0.3s ease;
  cursor: pointer;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(8px, 1.5vh, 15px);
}

/* Two pre-rendered shadows cross-faded on hover (resting shadow on ::before,
   hover shadow on ::after) — both transition opacity only, so no per-frame
   box-shadow repaint, and the end states match the originals exactly. */
.booking-cta-content::before,
.booking-cta-content::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 12px;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.booking-cta-content::before {
  box-shadow: 0 4px 15px rgba(102, 102, 68, 0.15);
  opacity: 1;
}

.booking-cta-content::after {
  box-shadow: 0 6px 20px rgba(102, 102, 68, 0.25);
  opacity: 0;
}

.booking-cta-content:hover {
  transform: translateY(-3px);
  border-color: #999966;
}

.booking-cta-content:hover::before {
  opacity: 0;
}

.booking-cta-content:hover::after {
  opacity: 1;
}

.booking-cta-content figure {
  margin: 0;
}

.booking-cta-content figure img {
  display: block;
  max-width: clamp(40px, 6vw, 50px);
  height: auto;
  margin: 0 auto;
}

.booking-cta-content h3 {
  color: var(--booking-text);
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  margin: 0;
  line-height: 1.2;
  letter-spacing: 2px;
}

/* Hide description and read more for booking CTA */
.booking-cta-content p,
.booking-cta-content .read-more-arrow {
  display: none;
}

/* Service Boxes Responsive Breakpoints */
@media (max-width: 991px) {
  .service-boxes {
    padding: clamp(60px, 8vh, 100px) 0;
  }

  .service-card {
    padding: clamp(50px, 7vh, 80px) clamp(18px, 2.5vw, 35px);
    min-height: 350px;
  }

  .service-card figure {
    margin-bottom: clamp(25px, 4vh, 35px);
  }

  .service-card h3 {
    font-size: clamp(18px, 3vw, 32px);
    letter-spacing: clamp(2px, 0.6vw, 4px);
    margin-bottom: clamp(15px, 2.5vh, 22px);
  }
}

@media (max-width: 767px) {
  .service-boxes {
    padding: clamp(50px, 7vh, 70px) 0;
  }

  .service-grid {
    grid-template-columns: 1fr;
    gap: clamp(40px, 6vh, 50px);
  }

  /* Reorder: Booking first, then Individual, then Business */
  .booking-cta {
    order: -1;
    padding: clamp(15px, 3vh, 20px);
    box-shadow: none;
  }

  .service-card {
    padding: 0 clamp(15px, 3vw, 20px);
    min-height: auto;
  }

  .service-card:hover {
    transform: translateY(-4px) scale(1.01);
  }

  .service-card figure {
    margin-bottom: clamp(20px, 3vh, 30px);
  }

  .service-card h3 {
    font-size: clamp(18px, 4vw, 20px);
    line-height: 1.15;
    letter-spacing: clamp(2px, 0.5vw, 3px);
  }

  .booking-cta-content {
    max-width: 100%;
    padding: clamp(18px, 2.5vh, 25px) clamp(20px, 3.5vw, 35px);
  }

  /* Hide arrows on mobile */
  .read-more-arrow {
    display: none;
  }
}

@media (max-width: 475px) {
  .service-card figure img {
    max-height: clamp(50px, 8vh, 60px);
  }

  .service-card p {
    font-size: clamp(14px, 1.5vw, 15px);
  }
}

/* ============================================================================
   CLIENT SHOWCASE - Grid-based responsive client logo display
   ============================================================================ */

.client-showcase {
  position: relative;
  width: 100%;
  background: var(--client-bg);
  padding: clamp(80px, 10vh, 120px) 0;
  padding-bottom: clamp(280px, 35vh, 382px);
  overflow-x: hidden;
  margin-top: -2px;
}

/* Decorative mountain/tree background at bottom */
.client-showcase::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 500px;
  background: url(../images/clientbg1.webp) no-repeat bottom center;
  background-size: 100%;
  pointer-events: none;
  z-index: 0;
}

/* Content Wrapper */
.client-showcase .container {
  position: relative;
  z-index: 1;
  padding-bottom: 20px;
}

/* Section Heading */
.section-heading {
  text-align: center;
  margin-bottom: clamp(50px, 8vh, 70px);
}

.section-heading h4 {
  font-size: clamp(18px, 2.5vw, 25px);
  line-height: 1.2;
  margin: 0 0 5px 0;
  font-weight: normal;
  letter-spacing: 2px;
  color: #ffffff;
}

.section-heading h2 {
  font-size: clamp(40px, 6vw, 66px);
  line-height: 1.06;
  font-weight: bold;
  margin-bottom: 0;
  letter-spacing: clamp(3px, 0.7vw, 5px);
  color: #ffffff;
}

.section-heading h2 span {
  position: relative;
  display: inline-block;
  color: #FFF73A;
}

/* Yellow decorative line extending from left */
.section-heading h2 span::after {
  content: '';
  position: absolute;
  width: 1920px;
  height: 2px;
  background: #cebe00;
  top: 50%;
  right: 106%;
  transform: translateY(-50%);
}

/* Client Grid */
.client-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Individual client card */
.client-card {
  position: relative;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  width: 180px;
  padding: 15px 20px;
  background: transparent;
  border-radius: 8px;
  /* box-shadow handled by the composited pseudo-element below */
  transition: transform 0.3s ease, background-color 0.3s ease;
  text-decoration: none;
}

/* Pre-rendered hover shadow — fade opacity instead of repainting box-shadow */
.client-card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 8px;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.client-card:hover {
  transform: translateY(-8px) scale(1.08);
  background: var(--client-hover-bg);
}

.client-card:hover::after {
  opacity: 1;
}

.client-card:focus {
  outline: 2px solid #FFF73A;
  outline-offset: 4px;
  border-radius: 8px;
}

/* Logo images */
.client-card img {
  max-width: 100%;
  max-height: 80px;
  height: auto;
  width: auto;
  filter: grayscale(100%);
  transition: filter 0.3s ease;
}

.client-card:hover img {
  filter: grayscale(0%);
}

/* Client Showcase Responsive Breakpoints */
@media (max-width: 991px) {
  .client-showcase {
    padding: clamp(60px, 8vh, 100px) 0;
    padding-bottom: clamp(220px, 28vh, 300px);
  }

  .client-showcase::after {
    height: 400px;
  }

  .client-grid {
    gap: 18px;
  }

  .client-card {
    width: 160px;
    min-height: 110px;
    padding: 12px 18px;
  }

  /* Hide last 3 logos on tablet */
  .client-grid li:nth-child(n+7) {
    display: none;
  }
}

@media (max-width: 767px) {
  .client-showcase {
    padding-bottom: clamp(180px, 25vh, 240px);
  }

  .client-showcase::after {
    height: 300px;
  }

  .client-grid {
    gap: 15px;
  }

  .client-card {
    width: 150px;
    min-height: 100px;
    padding: 11px 18px;
  }

  .client-card img {
    max-height: 66px;
  }

  .section-heading {
    margin-bottom: 3rem;
  }

  .section-heading h4 {
    font-size: clamp(16px, 2.2vw, 20px);
  }

  .section-heading h2 {
    font-size: clamp(32px, 5vw, 50px);
  }

  /* Show only first 4 logos on mobile */
  .client-grid li:nth-child(n+5) {
    display: none;
  }
}

@media (max-width: 575px) {
  .client-showcase {
    padding-bottom: clamp(150px, 22vh, 190px);
  }

  .client-grid {
    gap: 12px;
  }

  .client-card {
    width: 120px;
    min-height: 100px;
    padding: 10px;
  }

  .client-card img {
    max-height: 60px;
  }
}

/* ============================================================================
   SITE FOOTER - Clean, semantic, accessible footer
   ============================================================================ */

.site-footer {
  position: relative;
  width: 100%;
  background: var(--footer-bg);
  padding-top: 40px;
}

/* Decorative arch at top of footer */
.site-footer::before {
  content: '';
  position: absolute;
  top: -85px;
  left: 0;
  width: 100%;
  height: var(--footer-arch-height-desktop);
  background: url(../images/footer_yellow_bg2.webp) no-repeat bottom center;
  background-size: 100% 100%;
  pointer-events: none;
  z-index: 0;
}

.site-footer .container {
  position: relative;
  z-index: 1;
}

/* Scroll to Top Button */
.scroll-to-top {
  position: absolute;
  top: -106px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: all 0.3s ease;
  border-radius: 50%;
}

.scroll-to-top:hover {
  transform: translateX(-50%) translateY(-5px) scale(1.08);
}

.scroll-to-top:focus {
  outline: 2px solid #FFF73A;
  outline-offset: 4px;
}

.scroll-to-top img {
  display: block;
  width: 50px;
  height: auto;
  filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.2));
}

/* Footer Main Content */
.footer-main {
  padding-bottom: 60px;
  border-bottom: 1px solid var(--footer-border);
}

.footer-grid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

/* Logo Column */
.footer-logo {
  flex: 0 0 auto;
  position: relative;
  padding-right: 0;
}

.footer-logo::after {
  display: none;
}

.footer-logo a {
  display: block;
  transition: opacity 0.2s ease;
}

.footer-logo a:hover {
  opacity: 0.8;
}

.footer-logo img {
  display: block;
  width: clamp(180px, 18vw, 250px);
  height: auto;
}

/* Contact Info Column */
.footer-contact {
  flex: 1;
  display: flex;
  justify-content: center;
}

.contact-list {
  display: flex;
  gap: clamp(1.5rem, 3vw, 3rem);
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 17px;
  line-height: 24px;
  letter-spacing: 1px;
}

.contact-list li {
  position: relative;
  padding-left: 30px;
}

/* Contact icons using inline SVG */
.contact-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 2px;
  width: 20px;
  height: 20px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.contact-address::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23363537'%3E%3Cpath d='M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14z'/%3E%3Cpath d='M7 7h2v2H7zm0 4h2v2H7zm0 4h2v2H7zm4-8h2v2h-2zm0 4h2v2h-2zm0 4h2v2h-2zm4-8h2v2h-2zm0 4h2v2h-2z'/%3E%3C/svg%3E");
}

.contact-phone::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23363537'%3E%3Cpath d='M20.01 15.38c-1.23 0-2.42-.2-3.53-.56-.35-.12-.74-.03-1.01.24l-1.57 1.97c-2.83-1.35-5.48-3.9-6.89-6.83l1.95-1.66c.27-.28.35-.67.24-1.02-.37-1.11-.56-2.3-.56-3.53 0-.54-.45-.99-.99-.99H4.19C3.65 3 3 3.24 3 3.99 3 13.28 10.73 21 20.01 21c.71 0 .99-.63.99-1.18v-3.45c0-.54-.45-.99-.99-.99z'/%3E%3C/svg%3E");
}

.contact-email::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23363537'%3E%3Cpath d='M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z'/%3E%3C/svg%3E");
}

.contact-list a {
  color: var(--footer-text);
  text-decoration: none;
  transition: color 0.2s ease;
}

.contact-list a:hover {
  color: #000;
}

/* Footer services row — site-wide internal links to the service pages */
.footer-services {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
  padding: 22px 0 4px;
  border-top: 1px solid var(--footer-border);
  font-size: 15px;
}
.footer-services-label {
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-size: 12px;
  font-weight: 700;
  color: var(--footer-text);
  opacity: 0.65;
}
.footer-services-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer-services-list li {
  position: relative;
  padding: 2px 0;
}
.footer-services-list li:not(:last-child)::after {
  content: '\00B7';
  margin: 0 10px;
  color: var(--footer-border);
}
.footer-services-list a {
  color: var(--footer-text);
  text-decoration: none;
  transition: color 0.2s ease;
}
.footer-services-list a:hover {
  color: #000;
}

/* Social Media Column */
.footer-social {
  flex: 0 0 auto;
  align-self: flex-start;
  position: relative;
  padding-left: 0;
}

.footer-social::before {
  display: none;
}

.social-list {
  display: flex;
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.social-list a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #f0f0f0;
  color: var(--footer-text);
  font-size: 18px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.social-list a:hover {
  background: #FFF73A;
  transform: translateY(-3px);
}

.social-list a:focus {
  outline: 2px solid #FFF73A;
  outline-offset: 2px;
}

/* Footer Bottom (Copyright, etc.) */
.footer-bottom {
  padding: 30px 0;
}

.footer-bottom-content {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  align-items: center;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 15px;
  color: var(--footer-text);
}

.footer-bottom-content li {
  margin: 0;
  padding: 0 1rem;
  position: relative;
}

/* Add divider between items (except last) */
.footer-bottom-content li:not(:last-child)::after {
  content: '|';
  position: absolute;
  right: 0;
  color: var(--footer-border);
  font-weight: 300;
}

.footer-bottom-content a {
  color: var(--footer-text);
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-bottom-content a:hover {
  color: #000;
  text-decoration: underline;
}

.footer-bottom-content strong a {
  font-weight: bold;
}

/* Client portal button */
.footer-bottom-content .client-portal-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background-color: #363537;
  color: #FFF73A !important;
  padding: 8px 12px;
  border-radius: 5px;
  font-size: 14px;
  font-family: 'Ubuntu', 'Bariol', sans-serif;
  font-weight: 300;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.33);
}

.footer-bottom-content .client-portal-button:hover {
  background-color: #F8F8F8;
  color: #363537 !important;
}

.client-portal-button svg {
  height: 22px;
  width: auto;
  flex-shrink: 0;
}

/* Legal Disclaimer */
.footer-legal {
  padding: 20px 0 30px;
}

.footer-legal-content {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 14px;
  color: #666;
  text-align: center;
}

/* Footer Responsive Breakpoints */
@media (max-width: 991px) {
  .site-footer::before {
    top: -41px;
    height: var(--footer-arch-height-tablet);
  }

  .scroll-to-top {
    top: -62px;
  }

  .footer-grid {
    flex-direction: column;
    align-items: flex-start;
    gap: 2rem;
  }

  .footer-logo::after,
  .footer-social::before {
    display: none;
  }

  .footer-logo,
  .footer-social {
    padding: 0;
  }

  .contact-list {
    flex-direction: column;
    gap: 1rem;
  }

  .footer-social {
    align-self: flex-start;
  }
}

@media (max-width: 767px) {
  .site-footer::before {
    top: -18px;
    height: var(--footer-arch-height-mobile);
  }

  .scroll-to-top {
    top: -36px;
    width: 44px;
    height: 44px;
  }

  .scroll-to-top img {
    width: 44px;
  }

  .footer-main {
    padding-bottom: 40px;
  }

  .footer-logo img {
    width: clamp(150px, 40vw, 200px);
  }

  .contact-list {
    font-size: 15px;
  }

  .social-list a {
    width: 44px;
    height: 44px;
    font-size: 16px;
  }

  .footer-bottom-content {
    flex-direction: column;
    align-items: center;
    gap: 1rem;
  }

  .footer-bottom-content li::after {
    display: none;
  }

  .footer-bottom-content li {
    padding: 0;
  }
}

@media (max-width: 475px) {
  .scroll-to-top {
    width: 44px;
    height: 44px;
  }

  .scroll-to-top img {
    width: 44px;
  }

  .contact-list {
    font-size: 14px;
  }

  .contact-list li {
    padding-left: 25px;
  }

  .contact-list li::before {
    width: 18px;
    height: 18px;
  }
}

/* ============================================================================
   LEGACY FIXES - Temporary Compatibility
   ============================================================================ */

/* Logo constraints */
.logo img {
  max-width: 302px;
  max-height: 81px;
}

/* Questions section */
#questions {
  height: 100px;
}

/* Footer social icons display fix (legacy class names) */
.foot_social {
  align-self: flex-start;
}

.foot_social ul {
  display: flex;
  gap: 15px;
  justify-content: flex-start;
  flex-wrap: nowrap;
}

.foot_social ul li {
  flex-shrink: 0;
}

.foot_social ul li a {
  display: block;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.foot_social ul li a i {
  font-size: 20px;
}

/* Make entire address area clickable (legacy class name) */
.ft_address a {
  display: block;
}

/* ============================================================================
   ACCESSIBILITY ENHANCEMENTS
   ============================================================================ */

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .scroll-to-top:hover,
  .social-list a:hover,
  .client-card:hover,
  .service-card:hover,
  .booking-cta-content:hover {
    transform: none;
  }
}

/* High contrast mode */
@media (prefers-contrast: high) {
  .nav-list a,
  .client-card {
    border-width: 2px;
  }

  .nav-list a:hover,
  .nav-list a:focus {
    border-style: solid;
  }
}

/* Focus visible */
.logo:focus:not(:focus-visible),
.menu-toggle:focus:not(:focus-visible),
.nav-list a:focus:not(:focus-visible),
.scroll-indicator:focus:not(:focus-visible),
.scroll-to-top:focus:not(:focus-visible),
.social-list a:focus:not(:focus-visible),
.footer-logo a:focus:not(:focus-visible),
.client-card:focus:not(:focus-visible),
.service-card h3 a:focus:not(:focus-visible),
.booking-cta-content:focus:not(:focus-visible),
.read-more-arrow:focus:not(:focus-visible) {
  outline: none;
}

/* ============================================================================
   PRINT STYLES
   ============================================================================ */

@media print {
  .site-header {
    position: static;
    padding: 1rem 0;
  }

  .menu-toggle,
  .main-nav,
  .scroll-indicator,
  .scroll-to-top,
  .social-list,
  .read-more-arrow {
    display: none;
  }

  .hero-banner {
    height: auto;
    min-height: auto;
    page-break-after: always;
  }

  .banner-background {
    display: none;
  }

  .banner-content {
    position: static;
    transform: none;
  }

  .site-footer::before,
  .client-showcase::after {
    display: none;
  }

  .footer-grid,
  .service-grid,
  .client-grid {
    flex-direction: column;
  }

  .client-card img {
    filter: none;
  }
}

/* ============================================================================
   INNER PAGE FIXES - links, accordion icons
   ============================================================================ */

/* Better link styling for inner page content — inline text links only.
   Button components (.g2-cta / .c-book-btn / .booking-button) are excluded so
   this doesn't clobber their padding/radius/underline. */
.inner_body .text-center a:not(.g2-cta):not(.c-book-btn):not(.booking-button),
.inner_body p a:not(.g2-cta):not(.c-book-btn):not(.booking-button) {
  color: #FFF73A;
  text-decoration: underline !important;
  text-underline-offset: 3px;
  padding: 4px 8px;
  margin: 0 2px;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.inner_body .text-center a:not(.g2-cta):not(.c-book-btn):not(.booking-button):hover,
.inner_body p a:not(.g2-cta):not(.c-book-btn):not(.booking-button):hover {
  background: rgba(255, 247, 58, 0.2);
  color: #FFF73A;
}

/* Accordion plus/minus icons - replace FontAwesome with CSS */
.accordion > li .toggle::before {
  font-family: inherit !important;
  content: '+' !important;
  font-size: 24px !important;
  font-weight: 300 !important;
  line-height: 1;
  color: #FFF73A;
}

.accordion > li.active .toggle::before {
  content: '−' !important;
  color: #FFF73A;
}

/* Accordion items - no border by default */
.accordion > li {
  border: 1px dashed transparent !important;
  border-radius: 15px;
  margin-bottom: 15px;
}

/* Yellow dashed border only when expanded */
.accordion > li.active {
  border: 1px dashed #FFF73A !important;
}

/* ============================================================================
   TEAM / VIDEO MODALS - native <dialog> popups (replaces Fancybox)
   ============================================================================ */

/* The <dialog> is the centred container. Reset the browser's default chrome
   and recreate the dashed frame that .pop-up-section.fancybox-content gave us. */
dialog.pop-up-section {
  width: 95%;
  max-width: 950px;
  max-height: 90vh;
  margin: auto;                 /* centre in the viewport */
  padding: 15px;
  border: 2px dashed rgba(255, 255, 255, 0.4);
  border-radius: 18px;
  background: none;
  overflow: auto;
  color: inherit;
}

/* Dimmed backdrop, matching the old Fancybox overlay */
dialog.pop-up-section::backdrop {
  background: rgba(0, 0, 0, 0.85);
}

/* Lock background scroll while a modal is open (supporting browsers) */
body:has(dialog.pop-up-section[open]) {
  overflow: hidden;
}

/* Open animation: fade + slight zoom */
dialog.pop-up-section[open] {
  animation: dialogPop 0.25s ease-out;
}

dialog.pop-up-section[open]::backdrop {
  animation: dialogFade 0.25s ease-out;
}

@keyframes dialogPop {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes dialogFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  dialog.pop-up-section[open],
  dialog.pop-up-section[open]::backdrop {
    animation: none;
  }
}

/* ── Modal content: dark, matching the site (overrides the legacy white
   .pop-up-inner card from purged.css). The team BIO modal and Xero's VIDEO
   modal share the dialog chrome above but are otherwise independent — the
   bio-only classes (.heading/.content-section/.image-section) never touch the
   video modal, and Xero's dialog carries an extra .video-modal class. ── */
.pop-up-inner {
  background: #15171d;
}

/* Team bio modal — flip the legacy black-on-white text to light-on-dark */
.pop-up-section .heading h2 {
  color: #fff;
}

.pop-up-section .heading h3 {
  color: #9aa0ab;
}

.pop-up-section .content-section p {
  color: #c2c2c2;
}

/* The little connector rule — brighten to the brand yellow on dark */
.pop-up-section .bottom-part::before {
  background: #FFF73A;
}

/* Xero video modal — its own component: a clean near-black panel so the
   video reads like a player rather than a profile card. */
.video-modal .pop-up-inner {
  background: #0f0f0f;
}

/* ──────────────────────────────────────────────────────────────
   Inner-page banner — shared rules (previously duplicated inline
   in each inner page's <head>). Scoped to .innerpgbanner so the
   home hero (.hero-banner) is unaffected.
   ────────────────────────────────────────────────────────────── */

/* Black banner heading with soft shadow (over the light banner image) */
.innerpgbanner .banner_cont h1 {
  color: #181818;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  margin: 0;
}

/* Scroll indicator sits at the banner arc (overrides the home offset) */
.innerpgbanner .scroll-indicator {
  bottom: -36px;
  z-index: 10;
}

/* Plain CTA button used outside the hero (Contact, Pricing, etc.) */
.booking-button {
  display: inline-block;
  margin: 0 10px 10px 0;
  padding: 10px 20px;
  background-color: #181818;
  color: #FFF885;
  border: 2px solid #e6e600;
  border-radius: 5px;
  cursor: pointer;
}

/* ============================================================================
   PAGE TRANSITIONS
   Smooth cross-document cross-fade between pages in supporting browsers
   (Chromium 126+). Progressive enhancement — a no-op everywhere else.
   ============================================================================ */
@view-transition {
  navigation: auto;
}

/* Honour reduced-motion: keep navigation working, drop the animation */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

/* ============================================================================
   CONTACT PAGE  (scoped to body.contact)
   Self-contained — does not rely on responsive-enhancements.css (which the
   contact page doesn't load). Replaces the old .contct_info_* box layout.
   ============================================================================ */

body.contact .c-intro {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

/* Eyebrow — small yellow kicker with a leading rule */
body.contact .c-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: #FFF73A;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

body.contact .c-eyebrow::before {
  content: '';
  width: 32px;
  height: 2px;
  background: #FFF73A;
  display: inline-block;
}

body.contact .c-heading {
  color: #fff;
  font-size: clamp(2rem, 1.4rem + 3vw, 3.25rem);
  line-height: 1.1;
  margin: 0 0 1rem;
}

body.contact .c-heading span {
  color: #FFF73A;
}

body.contact .c-lead {
  color: #c2c2c2;
  font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.3rem);
  line-height: 1.6;
  margin: 0 auto 2rem;
  max-width: 38ch;
}

/* (Contact's primary CTA now uses the shared .g2-cta — see REUSABLE CTA BUTTONS.) */
body.contact .c-or {
  color: #8d8d90;
  font-size: 0.95rem;
  margin: 1.25rem 0 0;
}

/* ---- Office panel: actionable details + map ---- */
body.contact .c-office {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(1.25rem, 0.5rem + 2vw, 2.25rem);
  align-items: stretch;
  max-width: 1040px;
  margin: clamp(2.5rem, 1.5rem + 3vw, 4rem) auto 0;
  text-align: left;
}

body.contact .c-office-details {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}

body.contact .c-office-head {
  margin-bottom: 1.5rem;
}

body.contact .c-office-tag {
  display: inline-block;
  color: #8d8d90;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 0.35rem;
}

body.contact .c-office-details h3 {
  color: #FFF73A;
  font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.4rem);
  line-height: 1.1;
  margin: 0;
}

body.contact .c-methods {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

/* Each detail is a full tappable row — great mobile UX */
body.contact .c-method {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.85rem 1rem;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: #fff;
  text-decoration: none;
  transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

body.contact a.c-method:hover,
body.contact a.c-method:focus-visible {
  background: rgba(255, 247, 58, 0.08);
  border-color: rgba(255, 247, 58, 0.4);
  transform: translateX(4px);
}

body.contact a.c-method:focus-visible {
  outline: 2px solid rgba(255, 247, 58, 0.6);
  outline-offset: 2px;
}

/* Static (non-link) row — e.g. office hours: same look, no interaction */
body.contact .c-method--static {
  cursor: default;
}

body.contact .c-method-icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: rgba(255, 247, 58, 0.1);
  color: #FFF73A;
  transition: background-color 0.2s ease;
}

body.contact a.c-method:hover .c-method-icon,
body.contact a.c-method:focus-visible .c-method-icon {
  background: rgba(255, 247, 58, 0.2);
}

body.contact .c-method-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

body.contact .c-method-label {
  color: #8d8d90;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

body.contact .c-method-value {
  color: #fff;
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.15rem);
  font-weight: 600;
  word-break: break-word;
}

body.contact .c-method-arrow {
  margin-left: auto;
  flex-shrink: 0;
  color: #8d8d90;
  display: inline-flex;
  transition: color 0.2s ease, transform 0.2s ease;
}

body.contact a.c-method:hover .c-method-arrow,
body.contact a.c-method:focus-visible .c-method-arrow {
  color: #FFF73A;
  transform: translate(2px, -2px);
}

/* ---- Map ---- */
body.contact .c-office-map {
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  min-height: 380px;
  background: #0f0f0f;
}

body.contact .c-office-map iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 380px;
  filter: grayscale(0.6) contrast(1.05);
  transition: filter 0.4s ease;
}

/* Reveal full colour on interaction (desktop) */
body.contact .c-office:hover .c-office-map iframe,
body.contact .c-office-map:focus-within iframe {
  filter: grayscale(0);
}

/* ---- Responsive ---- */
@media (max-width: 860px) {
  body.contact .c-office {
    grid-template-columns: 1fr;
  }

  body.contact .c-office-map {
    min-height: 300px;
    order: 2;
  }

  body.contact .c-office-map iframe {
    min-height: 300px;
    filter: grayscale(0); /* no hover on touch — show colour */
  }
}

@media (max-width: 480px) {
  body.contact .c-method {
    padding: 0.75rem 0.85rem;
    gap: 0.8rem;
  }

  body.contact .c-method-icon {
    width: 42px;
    height: 42px;
  }

}

/* ============================================================================
   REUSABLE CTA BUTTONS
   Dark pill with a yellow border that inverts on hover. Site-wide, page-
   agnostic — use .g2-cta for the primary action, add .g2-cta--ghost for a
   quieter secondary. The single shared booking-CTA style (home hero, contact,
   business, individual, xero, pricing all use it).
   ============================================================================ */

.g2-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: inherit; /* <button> elements (e.g. the hero start button) don't inherit by default */
  padding: clamp(0.85rem, 0.7rem + 0.5vw, 1.05rem) clamp(1.5rem, 1.2rem + 1vw, 2.25rem);
  background: #181818;
  color: #FFF73A;
  border: 2px solid #FFF73A;
  border-radius: 50px;
  font-size: clamp(1rem, 0.9rem + 0.4vw, 1.15rem);
  font-weight: 700;
  line-height: 1.1;
  text-decoration: none;
  box-shadow: 0 4px 18px rgba(255, 247, 58, 0.18);
  transition: transform 0.25s ease, background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.g2-cta svg {
  transition: transform 0.25s ease;
}

.g2-cta:hover,
.g2-cta:focus-visible {
  background: #FFF73A;
  color: #181818;
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(255, 247, 58, 0.4);
}

.g2-cta:hover svg,
.g2-cta:focus-visible svg {
  transform: translateX(4px);
}

.g2-cta:focus-visible {
  outline: 3px solid rgba(255, 247, 58, 0.5);
  outline-offset: 3px;
}

/* Quieter secondary variant — outline only, no yellow fill */
.g2-cta--ghost {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.3);
  box-shadow: none;
}

.g2-cta--ghost:hover,
.g2-cta--ghost:focus-visible {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  border-color: #FFF73A;
  box-shadow: none;
}

/* CTA row — centred, wraps on small screens */
.g2-cta-group {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  align-items: center;
  margin-top: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
}

@media (max-width: 480px) {
  .g2-cta-group .g2-cta {
    width: 100%;
    max-width: 340px;
    justify-content: center;
  }
}

/* ============================================================================
   SERVICE PAGES
   Shared feature-card styling (used on the business + individual-tax pages),
   then business-only client logos & CTA spacing. CTAs use .g2-cta above.
   ============================================================================ */

/* ---- Feature cards: real panels with a lift on hover (any .inner_body page) ---- */
.inner_body .features_list.row {
  display: flex;
  flex-wrap: wrap;
}

.inner_body .features_bx {
  height: 100%;
  padding: 6px;
}

/* The faint dashed hover border is replaced by a card lift (see below) */
.inner_body .features_bx:hover {
  border-color: transparent;
}

.inner_body .features_bx_in {
  position: relative;
  z-index: 0;
  height: 100%;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  /* box-shadow now painted by the composited pseudo-element below */
  transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

/* Pre-rendered hover shadow on a pseudo-element; the parent .features_bx hover
   /focus-within fades its opacity (composited) instead of repainting box-shadow. */
.inner_body .features_bx_in::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 16px;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.35);
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}

.inner_body .features_bx:hover .features_bx_in,
.inner_body .features_bx:focus-within .features_bx_in {
  background: rgba(255, 247, 58, 0.06);
  border-color: rgba(255, 247, 58, 0.4);
  transform: translateY(-6px);
}

.inner_body .features_bx:hover .features_bx_in::after,
.inner_body .features_bx:focus-within .features_bx_in::after {
  opacity: 1;
}

/* ---- Client logos: subtle panels so the strip reads as part of this page ---- */
body.small-business-accounting .client-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

body.small-business-accounting .client-card:hover {
  border-color: rgba(255, 247, 58, 0.4);
}

/* ---- CTA breathing room ----
   The intro and "Awesomeness" sections use bot_gap0 (padding-bottom: 0). Their
   CTA buttons are the last element, so with no bottom padding the button glow
   is crowded/clipped by the next section. Restore room beneath them. */
body.small-business-accounting .quote_calculator.bot_gap0,
body.small-business-accounting .pure_sec.bot_gap0,
.service-page .quote_calculator.bot_gap0,
.service-page .pure_sec.bot_gap0 {
  padding-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem) !important;
}

/* ---- Service pages: "What's included" list ----
   Colour-inheriting so it reads on any section background; brand-yellow tick. */
.service-page .bk-list-wrap { max-width: 720px; margin: 0 auto; }
.service-page .bk-list { list-style: none; margin: 0; padding: 0; text-align: left; }
.service-page .bk-list li {
  position: relative; padding: 0.85rem 0 0.85rem 2rem;
  border-bottom: 1px solid rgba(128, 128, 128, 0.25);
}
.service-page .bk-list li:last-child { border-bottom: none; }
.service-page .bk-list li::before {
  content: "\2713"; position: absolute; left: 0; top: 0.85rem;
  color: #e6e600; font-weight: 700;
}

/* ============================================================================
   INDIVIDUAL TAX RETURN PAGE  (scoped to body.individual-tax-returns)
   CTA band between the features and FAQ, plus a card-style FAQ accordion.
   ============================================================================ */

/* ---- CTA band ---- */
body.individual-tax-returns .indiv-cta {
  padding: clamp(2rem, 1rem + 3vw, 3.5rem) 0 clamp(2.5rem, 1.5rem + 3vw, 4rem);
}

body.individual-tax-returns .indiv-cta-lead {
  color: #c2c2c2;
  font-size: clamp(1.1rem, 1rem + 0.5vw, 1.35rem);
  line-height: 1.6;
  max-width: 46ch;
  margin: 0 auto;
}

/* ---- FAQ accordion: card-style items ---- */
body.individual-tax-returns .accordion > li {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 14px;
  margin-bottom: 14px;
  padding: 0 !important;
  overflow: hidden;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

body.individual-tax-returns .accordion > li:hover {
  border-color: rgba(255, 247, 58, 0.35) !important;
}

body.individual-tax-returns .accordion > li.active {
  background: rgba(255, 247, 58, 0.05);
  border-color: rgba(255, 247, 58, 0.45) !important;
}

/* The clickable question bar */
body.individual-tax-returns .accordion > li .toggle {
  margin: 0 !important;
  padding: 1.15rem 3.25rem 1.15rem 1.4rem !important;
  font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.3rem);
  line-height: 1.45;
}

body.individual-tax-returns .accordion > li.active .toggle {
  color: #FFF73A;
}

/* +/- marker, inset from the rounded edge */
body.individual-tax-returns .accordion > li .toggle::before {
  right: 1.35rem !important;
}

/* Answer body */
body.individual-tax-returns .accordion .inner {
  margin-top: 0;
  padding: 0 1.4rem 1.4rem;
  font-size: 1.05rem;
  line-height: 1.7;
}

/* Inner links were blue (#4269e2) on a dark bg — make them brand yellow */
body.individual-tax-returns .accordion .inner a {
  color: #FFF73A;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ============================================================================
   BOOKING PAGE  (scoped to body.booking)
   Conversational hub: intro → animated "waiting" stick figure + wizard CTA →
   office shortcuts → FAQ. Self-contained; the booking page doesn't load
   responsive-enhancements.css, so every style lives here.
   ============================================================================ */

/* This is the last section before the footer, so it carries .extrabottom_gap_hill
   to reserve room for the footer's arched top (or the white arch overlaps the FAQ).
   We don't want that utility's decorative clientbg1.png hill here, though — keep the
   clean dark backdrop the page already has. */
body.booking .extrabottom_gap_hill::after {
  display: none;
}

/* ---- Intro (mirrors the contact page kicker/heading/lead look) ---- */
body.booking .bk-intro {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

body.booking .bk-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: #FFF73A;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

body.booking .bk-eyebrow::before {
  content: '';
  width: 32px;
  height: 2px;
  background: #FFF73A;
  display: inline-block;
}

body.booking .bk-heading {
  color: #fff;
  font-size: clamp(2rem, 1.4rem + 3vw, 3.25rem);
  line-height: 1.1;
  margin: 0 0 1rem;
}

body.booking .bk-heading span {
  color: #FFF73A;
}

body.booking .bk-lead {
  color: #c2c2c2;
  font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.3rem);
  line-height: 1.6;
  margin: 0 auto;
  max-width: 52ch;
}

/* ---- CTA row: stick figure + primary booking button ---- */
body.booking .bk-cta-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 0.5rem + 3vw, 3rem);
  flex-wrap: wrap;
  margin-top: clamp(1.75rem, 1.25rem + 2vw, 2.75rem);
}

body.booking .bk-stickman {
  flex: 0 0 auto;
  width: clamp(120px, 12vw, 165px);
}

body.booking .bk-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  max-width: 380px;
}

/* Primary CTA — filled brand-yellow pill, matching the homepage hero button */
body.booking .bk-book-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: clamp(0.95rem, 0.8rem + 0.6vw, 1.2rem) clamp(1.8rem, 1.4rem + 1.4vw, 2.8rem);
  background: #FFF73A;
  color: #181818;
  border: 2px solid #FFF73A;
  border-radius: 50px;
  font-family: 'Bariol', sans-serif;
  font-size: clamp(1.1rem, 1rem + 0.5vw, 1.4rem);
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 8px 26px rgba(255, 247, 58, 0.28);
  transition: transform 0.25s ease, background-color 0.25s ease,
              color 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

body.booking .bk-book-btn svg {
  transition: transform 0.25s ease;
}

body.booking .bk-book-btn:hover,
body.booking .bk-book-btn:focus-visible {
  background: #181818;
  color: #FFF73A;
  border-color: #FFF73A;
  border-style: dotted;
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(255, 247, 58, 0.4);
}

body.booking .bk-book-btn:hover svg,
body.booking .bk-book-btn:focus-visible svg {
  transform: translateX(4px);
}

body.booking .bk-book-btn:focus-visible {
  outline: 3px solid rgba(255, 247, 58, 0.5);
  outline-offset: 3px;
}

body.booking .bk-cta-note {
  color: #8d8d90;
  font-size: 0.98rem;
  line-height: 1.55;
  margin: 0;
  max-width: 34ch;
  text-align: center;
}

/* ---- Booking FAQ (native <details>; no JS needed) ---- */
body.booking .bk-faq {
  max-width: 760px;
  margin: clamp(2.5rem, 2rem + 3vw, 4.5rem) auto 0;
}

body.booking .bk-faq h3 {
  color: #fff;
  text-align: center;
  font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.1rem);
  margin: 0 0 1.5rem;
}

body.booking .bk-faq-item {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  margin-bottom: 14px;
  overflow: hidden;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

body.booking .bk-faq-item:hover {
  border-color: rgba(255, 247, 58, 0.35);
}

body.booking .bk-faq-item[open] {
  background: rgba(255, 247, 58, 0.05);
  border-color: rgba(255, 247, 58, 0.45);
}

body.booking .bk-faq-item summary {
  list-style: none;
  cursor: pointer;
  position: relative;
  padding: 1.15rem 3rem 1.15rem 1.4rem;
  color: #fff;
  font-weight: 700;
  font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.25rem);
  line-height: 1.45;
}

body.booking .bk-faq-item summary::-webkit-details-marker {
  display: none;
}

body.booking .bk-faq-item[open] summary {
  color: #FFF73A;
}

body.booking .bk-faq-item summary:focus-visible {
  outline: 2px solid rgba(255, 247, 58, 0.6);
  outline-offset: -2px;
  border-radius: 14px;
}

/* +/− marker */
body.booking .bk-faq-item summary::after {
  content: '+';
  position: absolute;
  right: 1.35rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.5rem;
  line-height: 1;
  color: #FFF73A;
}

body.booking .bk-faq-item[open] summary::after {
  content: '\2212'; /* minus */
}

body.booking .bk-faq-body {
  padding: 0 1.4rem 1.4rem;
}

body.booking .bk-faq-body p {
  color: #c2c2c2;
  font-size: 1.05rem;
  line-height: 1.7;
  margin: 0;
}

body.booking .bk-faq-body a {
  color: #FFF73A;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ============================================================================
   BOOKING STICK FIGURE  (scoped under body.booking so the animation can never
   leak onto another page). One subtle 12s loop: idle breathing → eager wave →
   moonwalk → idle → checks watch. Paused until scrolled into view (g2-main.js
   toggles .is-animating); honours prefers-reduced-motion below.
   ============================================================================ */

body.booking .g2-stickman {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

body.booking .g2-stickman * {
  transform-box: view-box;
  transform-origin: center;
}

/* gentle, always-on breathing (independent of the 12s story) */
body.booking .g2-stickman .sm-body {
  animation: sm-breathe 3.4s ease-in-out infinite;
  transform-origin: 100px 210px;
}
@keyframes sm-breathe {
  0%, 100% { transform: translateY(0) scaleY(1); }
  50% { transform: translateY(1.5px) scaleY(0.992); }
}

/* whole figure: tiny weight-shift sway + moonwalk glide, on the 12s loop */
body.booking .g2-stickman .sm-figure {
  animation: sm-sway 12s ease-in-out infinite;
  transform-origin: 100px 300px;
}
@keyframes sm-sway {
  0%, 16% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(0, 0) rotate(-1.2deg); }
  33% { transform: translate(0, 0) rotate(0deg); }
  38% { transform: translate(-12px, 0) rotate(3deg); }
  44% { transform: translate(-32px, 0) rotate(3deg); }
  50% { transform: translate(-12px, 0) rotate(-2deg); }
  54% { transform: translate(8px, 0) rotate(-2deg); }
  58% { transform: translate(0, 0) rotate(0deg); }
  66%, 75% { transform: translate(0, 0) rotate(0deg); }
  84% { transform: translate(0, 0) rotate(-1.4deg); }
  96%, 100% { transform: translate(0, 0) rotate(0deg); }
}

/* legs: scissor/slide for the moonwalk */
body.booking .g2-stickman .sm-leg-l,
body.booking .g2-stickman .sm-leg-r {
  transform-origin: 100px 200px;
}
body.booking .g2-stickman .sm-leg-l { animation: sm-leg-l 12s ease-in-out infinite; }
body.booking .g2-stickman .sm-leg-r { animation: sm-leg-r 12s ease-in-out infinite; }
@keyframes sm-leg-l {
  0%, 34% { transform: rotate(0deg); }
  38% { transform: rotate(14deg); }
  42% { transform: rotate(-10deg); }
  46% { transform: rotate(14deg); }
  50% { transform: rotate(-10deg); }
  54%, 100% { transform: rotate(0deg); }
}
@keyframes sm-leg-r {
  0%, 34% { transform: rotate(0deg); }
  38% { transform: rotate(-10deg); }
  42% { transform: rotate(14deg); }
  46% { transform: rotate(-10deg); }
  50% { transform: rotate(14deg); }
  54%, 100% { transform: rotate(0deg); }
}

/* mouths: content by default, happy during the wave */
body.booking .g2-stickman .sm-mouth-content { animation: sm-m-content 12s linear infinite; }
@keyframes sm-m-content {
  0%, 16% { opacity: 1; } 18% { opacity: 0; } 34% { opacity: 0; } 36%, 100% { opacity: 1; }
}
body.booking .g2-stickman .sm-mouth-smile { opacity: 0; animation: sm-m-smile 12s linear infinite; }
@keyframes sm-m-smile {
  0%, 16% { opacity: 0; } 18%, 33% { opacity: 1; } 35%, 100% { opacity: 0; }
}

/* head: leans into the wave, grooves through the moonwalk, bows to read the watch */
body.booking .g2-stickman .sm-head {
  animation: sm-head 12s ease-in-out infinite;
  transform-origin: 100px 96px;
}
@keyframes sm-head {
  0%, 16% { transform: rotate(0deg) translate(0, 0) scale(1, 1); }
  20%, 32% { transform: rotate(-8deg) translate(-4px, -1px) scale(1, 1); }
  34% { transform: rotate(0deg) translate(0, 0) scale(1, 1); }
  40% { transform: rotate(5deg) translate(2px, 0) scale(1, 1); }
  47% { transform: rotate(-5deg) translate(-2px, 0) scale(1, 1); }
  53% { transform: rotate(3deg) translate(1px, 0) scale(1, 1); }
  55%, 75% { transform: rotate(0deg) translate(0, 0) scale(1, 1); }
  80%, 92% { transform: rotate(-17deg) translate(-9px, 5px) scale(0.86, 0.72); }
  98%, 100% { transform: rotate(0deg) translate(0, 0) scale(1, 1); }
}

/* wave / scratch arm (viewer's right) */
body.booking .g2-stickman .sm-arm-wave {
  animation: sm-arm-wave 12s ease-in-out infinite;
  transform-origin: 100px 120px;
}
@keyframes sm-arm-wave {
  0%, 16% { transform: rotate(0deg); }
  19.5% { transform: rotate(-101deg); }
  22% { transform: rotate(-113deg); }
  25% { transform: rotate(-90deg); }
  28% { transform: rotate(-113deg); }
  31% { transform: rotate(-92deg); }
  33% { transform: rotate(-101deg); }
  35% { transform: rotate(0deg); }
  40% { transform: rotate(16deg); }
  47% { transform: rotate(-10deg); }
  53% { transform: rotate(6deg); }
  55% { transform: rotate(0deg); }
  100% { transform: rotate(0deg); }
}

/* watch arm (viewer's left) */
body.booking .g2-stickman .sm-arm-watch {
  animation: sm-watch 12s ease-in-out infinite;
  transform-origin: 100px 126px;
}
@keyframes sm-watch {
  0%, 33% { transform: rotate(0deg); }
  40% { transform: rotate(-12deg); }
  47% { transform: rotate(8deg); }
  53% { transform: rotate(-4deg); }
  55%, 75% { transform: rotate(0deg); }
  79% { transform: rotate(75deg); }
  83% { transform: rotate(75deg); }
  85% { transform: rotate(69deg); }
  87% { transform: rotate(75deg); }
  89% { transform: rotate(69deg); }
  91% { transform: rotate(75deg); }
  96% { transform: rotate(0deg); }
  100% { transform: rotate(0deg); }
}

/* watch face: rolls over so the dial faces him during the check */
body.booking .g2-stickman .sm-watch-face {
  animation: sm-watchface 12s ease-in-out infinite;
  transform-origin: 59px 184px;
}
@keyframes sm-watchface {
  0%, 76% { transform: rotate(0deg) scaleX(1); }
  79% { transform: rotate(-55deg) scaleX(0.4); }
  81%, 95% { transform: rotate(-75deg) scaleX(1); }
  96% { transform: rotate(0deg) scaleX(1); }
  100% { transform: rotate(0deg) scaleX(1); }
}

/* Viewport gate — paused until g2-main.js adds .is-animating (in-view).
   These rules come AFTER the animation shorthands above so they win the
   cascade and pause play-state; no-JS visitors simply see a static figure. */
body.booking .g2-stickman .sm-figure,
body.booking .g2-stickman .sm-figure * {
  animation-play-state: paused;
}
body.booking .g2-stickman.is-animating .sm-figure,
body.booking .g2-stickman.is-animating .sm-figure * {
  animation-play-state: running;
}

@media (prefers-reduced-motion: reduce) {
  body.booking .g2-stickman .sm-body,
  body.booking .g2-stickman .sm-figure,
  body.booking .g2-stickman .sm-mouth-content,
  body.booking .g2-stickman .sm-mouth-smile,
  body.booking .g2-stickman .sm-head,
  body.booking .g2-stickman .sm-arm-wave,
  body.booking .g2-stickman .sm-arm-watch,
  body.booking .g2-stickman .sm-watch-face,
  body.booking .g2-stickman .sm-leg-l,
  body.booking .g2-stickman .sm-leg-r {
    animation: none;
  }
  body.booking .g2-stickman .sm-mouth-content { opacity: 1; }
}

@media (max-width: 560px) {
  body.booking .bk-stickman {
    width: 120px;
  }
}

/* ============================================================================
   XERO PAGE (body.xero-accountants) — Platinum lockup, story timeline,
   service-card icons, yellow-band link, and the lazy video embed.
   Everything sits on the dark .inner_body canvas (#181818 / light text), so
   colours here are tuned for dark backgrounds. New classes only — no edits to
   the frozen purged.css.
   ============================================================================ */

/* --- Official Xero Platinum Partner badge on the dark intro section, linked to
   the Xero advisor directory. The badge is a self-contained colour SVG, so it
   reads on any background; we just size it and add the house hover-lift. */
.xero-platinum-badge {
  display: inline-block;
  line-height: 0; /* kill descender gap under the inline SVG */
  border-radius: 18px;
  transition: transform var(--transition-speed, 0.3s) var(--transition-ease, ease),
              box-shadow var(--transition-speed, 0.3s) var(--transition-ease, ease);
}
.xero-platinum-badge:hover,
.xero-platinum-badge:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
}
.xero-platinum-badge img {
  display: block;
  width: 150px;
  height: auto;
}
.xero-badge-caption {
  max-width: 620px;
  margin: 22px auto 0;
  font-size: 16px;
  line-height: 1.55;
  color: #c2c2c2;
}
.xero-badge-caption strong { color: #fff; }

/* Small muted "last updated" freshness line */
.xero-updated {
  margin-top: 26px;
  font-size: 13px;
  letter-spacing: 1px;
  color: #8a8a8a;
}

/* E-E-A-T review byline — named expert + freshness on YMYL pages. Lives here in
   g2-main.css so it loads on every page (not all pages load the enhancements CSS).
   A real trust signal for a finance (YMYL) firm and a direct AI-sourceability win. */
.reviewed-byline {
  max-width: 760px;
  margin: 40px auto 0;
  padding-top: 18px;
  border-top: 1px solid rgba(0, 0, 0, .08);
  text-align: center;
  font-size: 13px;
  line-height: 1.6;
  letter-spacing: .3px;
  color: #8a8a8a;
}
.reviewed-byline a,
.xero-updated a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.reviewed-byline a:hover,
.xero-updated a:hover { color: #181818; }

/* --- Our Xero story: dated timeline on the dark canvas --- */
.xero-timeline {
  list-style: none;
  max-width: 760px;
  margin: 10px auto 34px;
  padding: 0;
  text-align: left;
}
.xero-timeline > li {
  display: flex;
  gap: 20px;
  padding: 20px 0;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.15);
}
.xero-timeline > li:last-child { border-bottom: 0; }
.xero-timeline__year {
  flex: 0 0 auto;
  align-self: flex-start;
  background: #FFF73A;
  color: #181818;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 1px;
  padding: 4px 12px;
  border-radius: 8px;
}
.xero-timeline__body {
  font-size: 17px;
  line-height: 1.55;
  color: #c2c2c2;
}
.xero-timeline__body strong { color: #fff; }
.xero-story-closer { margin-top: 4px; }

/* --- Service-card icons: inline SVG (replaces the old paired hover images).
   currentColor = the brand yellow on the dark cards. --- */
.inner_body .features_bx_in figure svg {
  display: block;
  width: 78px;
  height: 78px;
  color: #FFF73A;
}

/* Keep the yellow-band inline link legible on the bright yellow background */
.yellow_sec h3 a {
  color: #181818;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.yellow_sec h3 a:hover { color: #000; }

/* --- Video embed: responsive 16:9 holder inside the <dialog>. The <video> /
   <iframe> is injected by g2-main.js only when the modal opens. --- */
.video-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 8px;
  overflow: hidden;
}
.video-embed video,
.video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: contain; /* letterbox a non-16:9 source rather than distort it */
}
.xero-vid-caption {
  margin-top: 16px;
  font-size: 14px;
  color: #9a9a9a;
}
.xero-nap {
  margin-top: 28px;
  font-size: 15px;
  color: #c2c2c2;
}

/* Respect reduced-motion for the lockup's hover lift */
@media (prefers-reduced-motion: reduce) {
  .xero-platinum-badge { transition: none; }
  .xero-platinum-badge:hover,
  .xero-platinum-badge:focus-visible { transform: none; }
}

@media (max-width: 560px) {
  .xero-platinum-badge img { width: 124px; }
  .xero-timeline > li { flex-direction: column; gap: 8px; }
}

/* ============================================================================
   OUR TEAM PAGE  (scoped to body.our-team)
   Brings the #G2Crew grid into the dark card system used across the site.
   The temporary toon illustrations (and future real photos) crop to circles.
   ============================================================================ */

/* Dark cards, consistent with the feature / pricing cards */
body.our-team .team_secbox {
  height: 100%;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  padding: 30px 22px 26px;
  transition: transform 0.25s ease, border-color 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;
}

body.our-team .team_secbox:hover {
  border-color: rgba(255, 247, 58, 0.45);
  background: rgba(255, 247, 58, 0.05);
  transform: translateY(-6px);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.4);
}

/* Circular avatar — the toon's pastel disc crops cleanly to a circle */
body.our-team .team_secbox figure {
  display: block;
  width: clamp(132px, 46%, 168px);
  margin: 0 auto 18px;
}

body.our-team .team_secbox figure img {
  width: 100%;
  height: auto; /* override the HTML height="300" attr so aspect-ratio governs */
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 50%;
  padding: 0;
  border: 3px solid rgba(255, 255, 255, 0.1);
  transition: border-color 0.25s ease;
}

body.our-team .team_secbox:hover figure img {
  border-color: rgba(255, 247, 58, 0.55);
}

/* Name / role / preview */
body.our-team .team_secbox h3,
body.our-team .team_secbox h3 a {
  color: #fff;
}

body.our-team .team_desig {
  color: #FFF73A;
  margin-bottom: 14px;
}

body.our-team .team_secbox p {
  color: #c2c2c2;
}

/* "Read more" — restore the icon-only label as a yellow text link + arrow */
body.our-team .team_secbox .arrow_read {
  width: auto;
  height: auto;
  margin-top: 16px;
  background: none;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #FFF73A;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

body.our-team .team_secbox .arrow_read::after {
  content: "\2192";
  transition: transform 0.2s ease;
}

body.our-team .team_secbox:hover .arrow_read::after {
  transform: translateX(4px);
}

body.our-team .team_secbox .arrow_read:hover {
  animation: none; /* drop the legacy bounce on the (now visible) text link */
}