/*
Theme Name: Green Umbrella Technology
Theme URI: https://www.greenumbrella.com.au
Author: Green Umbrella Technology
Author URI: https://www.greenumbrella.com.au
Description: Custom theme for Green Umbrella Technology - Healthcare IT specialists
Version: 1.0.0
License: Private
Text Domain: greenumbrella
*/

/* ============================================================
   CSS CUSTOM PROPERTIES (Brand Tokens)
   ============================================================ */
:root {
  --green:       #31A949;
  --green-dark:  #27913C;
  --green-light: #EBF8EF;
  --soft-green:  #DFF7E6;
  --teal:        #294248;
  --teal-dark:   #1D3035;
  --teal-light:  #EDF2F3;
  --text-primary:   #111827;
  --text-secondary: #4B5563;
  --text-muted:     #9CA3AF;
  --white:       #FFFFFF;
  --border:      #E5E7EB;
  --font: 'Barlow', sans-serif;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-pill: 100px;
  --max-width: 1200px;
  --section-pad: 80px 40px;
  /* Shadow scale — tinted with the brand teal-dark (#1D3035) rather than pure
     black, so elevation reads soft and on-brand. */
  --shadow-sm: 0 2px 10px rgba(29, 48, 53, 0.05);
  --shadow-md: 0 16px 38px -18px rgba(29, 48, 53, 0.22);
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* When a page loads at a section anchor (e.g. /#services from another page),
   offset the landing point so the heading clears the 72px sticky header. */
html { scroll-padding-top: 90px; }
/* Smooth momentum scrolling is handled by Lenis (see main.js), not CSS
   scroll-behavior — CSS smooth made position-based effects settle a frame late.
   These are Lenis's required styles. */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-smooth iframe { pointer-events: none; }
body {
  font-family: var(--font);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--text-primary);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  /* Sticky footer: fill at least the viewport so short pages (e.g. the enquiry
     success message) don't leave white space below a floated-up footer. */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.site-footer { margin-top: auto; }
img { max-width: 100%; height: auto; display: block; border: none; outline: none; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { cursor: pointer; font-family: var(--font); border: none; background: none; }

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font);
  font-weight: 300;
  line-height: 1.15;
  color: var(--text-primary);
}
h1 { font-size: clamp(34px, 4.5vw, 52px); line-height: 1.08; letter-spacing: -0.015em; }
h2 { font-size: clamp(27px, 3.2vw, 38px); line-height: 1.12; letter-spacing: -0.01em; }
h3 { font-size: 22px; }
h4 { font-size: 16px; font-weight: 600; }
h5 { font-size: 14px; font-weight: 600; }
p { line-height: 1.7; color: var(--text-secondary); }

.eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  color: var(--green-dark);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

/* ============================================================
   LAYOUT UTILITIES
   ============================================================ */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 40px;
}
.section { padding: var(--section-pad); }
.section-white { background: var(--white); }
.section-teal-light { background: var(--green-light); }
.section-teal { background: var(--teal); }
.section-teal-dark { background: var(--teal-dark); }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: var(--radius-sm);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  transition: background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s ease, transform 0.2s ease;
  cursor: pointer;
  border: 2px solid transparent;
}
.btn-primary {
  background: linear-gradient(180deg, var(--green) 0%, var(--green-dark) 100%);
  color: var(--white);
  border-color: var(--green-dark);
  box-shadow: 0 6px 16px -6px rgba(49, 169, 73, 0.5);
}
.btn-primary:hover {
  background: linear-gradient(180deg, var(--green-dark) 0%, var(--green-dark) 100%);
  border-color: var(--green-dark);
  color: var(--white);
  filter: brightness(0.96);
  transform: translateY(-2px);
  box-shadow: 0 12px 24px -8px rgba(49, 169, 73, 0.6);
}
.btn-outline {
  background: transparent;
  color: var(--green-dark);
  border-color: var(--green);
}
.btn-outline:hover {
  background: var(--green);
  color: var(--white);
}
.btn-white {
  background: var(--white);
  color: var(--teal);
  border-color: var(--white);
}
.btn-white:hover {
  background: var(--teal-light);
}
.btn-ghost-white {
  background: transparent;
  color: var(--white);
  border-color: rgba(255,255,255,0.4);
}
.btn-ghost-white:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.6);
}
.btn-sm { padding: 8px 16px; font-size: 13px; }
.btn-lg { padding: 16px 32px; font-size: 16px; }
.btn-arrow { width: 18px; height: 18px; flex-shrink: 0; transition: transform 0.2s ease; }
.btn:hover .btn-arrow { transform: translateX(4px); }
.btn-tight { padding-left: 22px; padding-right: 22px; }

/* ============================================================
   HEADER / NAV
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--white);
  border-bottom: 1px solid var(--border);
  height: 72px;
  display: flex;
  align-items: center;
}
.site-header .container {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.site-logo img {
  height: 44px;
  width: auto;
}
.main-nav {
  display: flex;
  align-items: center;
  gap: 32px;
}
.main-nav a {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  transition: color 0.2s;
}
.main-nav a:hover { color: var(--teal); }
.main-nav a.support-link {
  color: var(--green);
  font-weight: 600;
}
.header-right {
  display: flex;
  align-items: center;
  gap: 20px;
}
.header-phone {
  font-size: 14px;
  font-weight: 600;
  color: var(--teal);
  white-space: nowrap;
}
.mobile-menu-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 4px;
  cursor: pointer;
}
.mobile-menu-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--teal);
  border-radius: 2px;
  transition: transform 0.3s;
}

/* ============================================================
   HERO SECTION
   ============================================================ */
.hero {
  background: var(--white);
  padding: 80px 0;
  position: relative;
  overflow: hidden;
}
.hero::after {
  content: '';
  position: absolute;
  right: -80px;
  top: 50%;
  transform: translateY(-50%);
  width: 500px;
  height: 500px;
  border: 50px solid rgba(49, 169, 73, 0.06);
  border-radius: 50%;
  pointer-events: none;
}
.hero .container {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 60px;
  align-items: center;
  position: relative;
  z-index: 1;
}
.hero-content {}
.hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--green-light);
  color: var(--green-dark);
  padding: 7px 17px;
  border-radius: var(--radius-pill);
  font-size: 13.5px;
  font-weight: 600;
  margin-bottom: 20px;
}
.hero-pill-dot {
  width: 6px;
  height: 6px;
  background: var(--green);
  border-radius: 50%;
  flex-shrink: 0;
}
.hero h1 {
  margin-bottom: 20px;
}
.hero h1 em {
  font-style: normal;
  color: var(--green);
}
.hero-sub {
  font-size: 17px;
  line-height: 1.75;
  color: var(--text-secondary);
  margin-bottom: 36px;
  max-width: 520px;
}
.hero-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.hero-visual {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Practice IT Status Card */
.status-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.05);
  overflow: hidden;               /* keep the scan line contained within the card */
}
.status-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}
.status-card-icon {
  width: 40px;
  height: 40px;
  background: var(--green-light);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--green-dark);
}
.status-card-icon svg { width: 20px; height: 20px; }
.status-card-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}
.status-card-sub {
  font-size: 12px;
  color: var(--text-secondary);
  margin: 2px 0 0 0;
}
.status-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.status-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--text-secondary);
}
.status-check {
  width: 20px;
  height: 20px;
  background: rgba(49,169,73,0.12);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--green-dark);
}
.status-check svg { width: 12px; height: 12px; }

/* Live security-scan animation: a glowing line sweeps down the list; as it passes
   each row the check "stamps" green (pop + ring) and the item text lights up. */
.status-list { position: relative; }
.status-list::before {
  content: "";
  position: absolute;
  /* Span the full width of the card (padding is 24px) so the scan line
     touches the inner edges of the white box as it sweeps down. */
  left: -24px;
  right: -24px;
  top: -44px;
  height: 40px;
  /* Rounded so the bright bottom line curves up a little at both ends. */
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(49,169,73,0) 0%, rgba(49,169,73,0.16) 100%);
  border-bottom: 2px solid rgba(49,169,73,0.75);
  box-shadow: 0 6px 14px rgba(49,169,73,0.18);
  opacity: 0;
  pointer-events: none;
  animation: status-scan 4.5s cubic-bezier(0.45,0,0.55,1) infinite;
}
@keyframes status-scan {
  0%   { top: -44px; opacity: 0; }
  8%   { opacity: 0.9; }
  46%  { top: 100%; opacity: 0.9; }
  54%  { top: 100%; opacity: 0; }
  100% { top: -44px; opacity: 0; }
}
.status-check { animation: status-verify 4.5s ease-out infinite; }
.status-item { animation: status-lit 4.5s ease infinite; }
.status-check svg polyline { stroke-dasharray: 24; animation: status-tick 4.5s ease infinite backwards; }
.status-item:nth-child(1),
.status-item:nth-child(1) .status-check,
.status-item:nth-child(1) .status-check svg polyline { animation-delay: .5s; }
.status-item:nth-child(2),
.status-item:nth-child(2) .status-check,
.status-item:nth-child(2) .status-check svg polyline { animation-delay: .95s; }
.status-item:nth-child(3),
.status-item:nth-child(3) .status-check,
.status-item:nth-child(3) .status-check svg polyline { animation-delay: 1.28s; }
@keyframes status-tick {
  0% { stroke-dashoffset: 24; }
  15% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 0; }
}
@keyframes status-verify {
  0%   { transform: scale(1); box-shadow: 0 0 0 0 rgba(49,169,73,0.5); background: rgba(49,169,73,0.12); color: var(--green-dark); }
  7%   { transform: scale(1.35); background: var(--green); color: #fff; }
  16%  { transform: scale(1); background: var(--green); color: #fff; }
  36%  { box-shadow: 0 0 0 12px rgba(49,169,73,0); background: rgba(49,169,73,0.12); color: var(--green-dark); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(49,169,73,0); background: rgba(49,169,73,0.12); color: var(--green-dark); }
}
@keyframes status-lit {
  0%, 100% { color: var(--text-secondary); }
  7%, 30%  { color: var(--text-primary); }
  46%      { color: var(--text-secondary); }
}
.status-card-icon { animation: status-beat 4.5s ease-in-out infinite; }
@keyframes status-beat {
  0%, 100% { box-shadow: 0 0 0 0 rgba(49,169,73,0); }
  50% { box-shadow: 0 0 0 6px rgba(49,169,73,0.08); }
}
@media (prefers-reduced-motion: reduce) {
  .status-list::before,
  .status-check,
  .status-check svg polyline,
  .status-item,
  .status-card-icon { animation: none; }
}

/* Assessment CTA Card */
.assessment-card {
  background: linear-gradient(180deg, var(--green) 0%, var(--green-dark) 100%);
  border-radius: var(--radius-lg);
  padding: 24px;
  cursor: pointer;
  transition: box-shadow 0.2s ease, transform 0.2s ease, filter 0.2s ease;
  text-decoration: none;
  display: block;
  box-shadow: 0 6px 16px -6px rgba(49, 169, 73, 0.5);
}
.assessment-card:hover {
  transform: translateY(-2px);
  filter: brightness(0.96);
  box-shadow: 0 12px 24px -8px rgba(49, 169, 73, 0.6);
}
.assessment-card-icon {
  color: rgba(255,255,255,0.85);
  margin-bottom: 12px;
}
.assessment-card-icon svg { width: 28px; height: 28px; transform-origin: center; }
/* phone "ringing" wiggle on card hover */
@keyframes phone-ring {
  0%, 100% { transform: rotate(0); }
  15% { transform: rotate(-14deg); }
  30% { transform: rotate(12deg); }
  45% { transform: rotate(-10deg); }
  60% { transform: rotate(8deg); }
  75% { transform: rotate(-5deg); }
}
.assessment-card:hover .assessment-card-icon svg { animation: phone-ring 0.75s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .assessment-card:hover .assessment-card-icon svg { animation: none; }
}
.assessment-card-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--white);
  line-height: 1.4;
  margin-bottom: 6px;
}
.assessment-card-sub {
  font-size: 13px;
  color: rgba(255,255,255,0.8);
}

/* ============================================================
   STATS BAR
   ============================================================ */
.stats-bar {
  background: linear-gradient(180deg, var(--white) 0%, var(--green-light) 45%, var(--green-light) 100%);
  padding: 36px 0;
}
.stats-bar .container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.stat-item {
  text-align: center;
  padding: 0 20px;
  border-right: 1px solid rgba(39,145,60,0.18);
}
.stat-item:last-child { border-right: none; }
.stat-value {
  font-size: 28px;
  font-weight: 600;
  color: var(--green-dark);
  line-height: 1;
  display: block;
}
.stat-label {
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: 6px;
  display: block;
}

/* ============================================================
   SERVICES SECTION
   ============================================================ */
.services { background: var(--white); padding: 100px 0; }
.section-header { margin-bottom: 56px; }
.section-header h2 { margin-bottom: 12px; }
.section-header p { font-size: 17px; max-width: 560px; }
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 48px;
}
.service-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}
.service-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
  border-color: rgba(49, 169, 73, 0.35);
}
.service-icon {
  width: 48px;
  height: 48px;
  background: var(--green-light);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  color: var(--green-dark);
  transition: background 0.25s ease, color 0.25s ease;
}
/* On hover the icon tile fills with brand green for a lively accent. */
.service-card:hover .service-icon {
  background: var(--green);
  color: var(--white);
}
.service-icon svg { width: 24px; height: 24px; }
.service-card h3 {
  font-size: 17px;
  font-weight: 600;
  margin-bottom: 10px;
  color: var(--text-primary);
}
.service-card p { font-size: 14px; line-height: 1.65; }
.services-cta { text-align: center; }

/* ============================================================
   WHY US SECTION
   ============================================================ */
.why-us { background: linear-gradient(180deg, var(--white) 0%, var(--green-light) 16%, var(--green-light) 84%, var(--white) 100%); padding: 100px 0; }
.why-us .container { display: block; }
.why-us-left { margin-bottom: 44px; }
.why-us-left h2 { margin-bottom: 16px; }
.why-us-left p { font-size: 17px; max-width: 640px; }
.why-list {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.why-item {
  display: flex;
  gap: 16px;
}
.why-number {
  width: 28px;
  height: 28px;
  background: var(--green);
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--white);
  flex-shrink: 0;
  margin-top: 2px;
}
.why-item h4 { margin-bottom: 6px; }
.why-item p { font-size: 14px; }

/* Three cards staggered left-to-right. As you scroll each card pins (sticky)
   below the nav; the next card slides up and overlaps it, and the covered card
   blurs and eases back. The blur/scale is driven per-frame by main.js
   (--cover: 0 = fully visible, 1 = fully covered). */
.why-cards {
  display: block;
  position: relative;
}
/* In-flow spacer AFTER the last card. Sticky cards are clamped to their
   container's content box, so this real content (not padding) is what gives
   the last card room to climb fully over the one before it and dwell on top.
   Kept small: a big spacer means a bigger "settle" when the card finally
   releases, and leaves more empty mint-green under the stack. */
.why-cards::after {
  content: "";
  display: block;
  height: 12vh;
}
.why-card {
  --cover: 0;
  /* Pinned by a deterministic translate in main.js, NOT position:sticky.
     Sticky left a 1px "settle" as each card caught the top line; computing the
     translate from the scroll offset places the card exactly on the line with
     no overshoot. */
  position: relative;
  display: flex;
  align-items: center;
  gap: 26px;
  width: 72%;
  max-width: 620px;
  height: 260px;
  box-sizing: border-box;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 32px 30px;
  box-shadow: 0 18px 44px -26px rgba(29, 48, 53, 0.45);
  filter: blur(calc(6px * var(--cover)));
  opacity: calc(1 - 0.32 * var(--cover));
  will-change: transform, filter, opacity;
}
.why-body { flex: 1 1 auto; min-width: 0; }
/* Left-hand animated visual that accompanies a card's text. */
.why-visual {
  flex: 0 0 108px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.why-visual svg { width: 100%; height: auto; }
.why-card:not(:last-child) { margin-bottom: 5vh; }
.why-card:nth-child(1) { margin-right: auto; z-index: 1; }
.why-card:nth-child(2) { margin-left: auto; margin-right: auto; z-index: 2; }
.why-card:nth-child(3) { margin-left: auto; z-index: 3; }
/* The top card is never covered, so it needs no blur layer. */
.why-card:last-child { filter: none; opacity: 1; }
.why-card .why-number { margin-bottom: 16px; }
.why-card h4 { margin-bottom: 8px; }
.why-card p { font-size: 14px; color: var(--text-secondary); }
@media (max-width: 768px) {
  /* Small screens: drop the stack for a plain, readable vertical column. */
  .why-card {
    position: static;
    width: 100%;
    max-width: none;
    height: auto;
    margin: 0 0 20px !important;
    top: auto;
    transform: none !important;
    filter: none !important;
    opacity: 1 !important;
    box-shadow: 0 10px 24px -18px rgba(29, 48, 53, 0.35);
  }
}
@media (prefers-reduced-motion: reduce) {
  .why-card { transform: none !important; filter: none !important; opacity: 1 !important; }
}

/* ---- Compliance checklist animation (card 03) ----
   A clipboard with three items. When the card scrolls into view main.js adds
   .animate, and the boxes fill + ticks draw one after another, top to bottom. */
.why-checklist .board { fill: var(--white); stroke: var(--border); stroke-width: 2; }
.why-checklist .clip { fill: var(--green); }
.why-checklist .line { fill: var(--green-light); }
.why-checklist .box { fill: var(--white); stroke: var(--green); stroke-width: 2; }
.why-checklist .box-fill {
  fill: var(--green);
  opacity: 0;
  transform: scale(0.5);
  transform-box: fill-box;
  transform-origin: center;
}
.why-checklist .tick {
  fill: none;
  stroke: var(--white);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 22;
  stroke-dashoffset: 22;
}
.why-checklist.animate .r1 .box-fill { animation: gutBoxIn 0.3s ease 0.25s forwards; }
.why-checklist.animate .r1 .tick    { animation: gutTick 0.35s ease 0.4s forwards; }
.why-checklist.animate .r2 .box-fill { animation: gutBoxIn 0.3s ease 0.95s forwards; }
.why-checklist.animate .r2 .tick    { animation: gutTick 0.35s ease 1.1s forwards; }
.why-checklist.animate .r3 .box-fill { animation: gutBoxIn 0.3s ease 1.65s forwards; }
.why-checklist.animate .r3 .tick    { animation: gutTick 0.35s ease 1.8s forwards; }
@keyframes gutBoxIn { to { opacity: 1; transform: scale(1); } }
@keyframes gutTick  { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  /* Skip the draw; show the finished, ticked-off state. */
  .why-checklist .box-fill { opacity: 1; transform: scale(1); }
  .why-checklist .tick { stroke-dashoffset: 0; }
}

/* ---- Wall calendar with a "liquid" current day (why-us card 01) ----
   Static wall calendar: day-boxes are filled solid green up to the current day.
   The current day's box is only half full, styled as green liquid with a gently
   waving surface (two offset wave layers rotating). Reduced-motion: same fill,
   surface holds still. */
.gut-cal { width: 96px; }
.gut-cal-bind {
  position: relative;
  z-index: 3;
  display: flex;
  justify-content: center;
  gap: 16px;
  height: 7px;
}
.gut-cal-bind i { width: 5px; height: 7px; border-radius: 3px 3px 0 0; background: var(--text-muted); }
.gut-cal-page {
  margin-top: -1px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 6px 16px -12px rgba(29, 48, 53, 0.55);
}
.gut-cal-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  padding: 7px;
}
.gut-cal-grid i {
  aspect-ratio: 1;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
}
/* Days already elapsed this month: solid green (cells 1-12) */
.gut-cal-grid i:nth-child(-n+12) { background: var(--green); }
/* The current day (cell 13): half-full green liquid with a waving surface */
.gut-cal-liquid { position: relative; }
.gut-cal-liquid .gut-cal-wave,
.gut-cal-liquid::before {
  content: "";
  position: absolute;
  left: 50%;
  width: 300%;
  aspect-ratio: 1 / 1;
  background: var(--green);
  border-radius: 43% 46% 44% 47%;
  transform: translateX(-50%);
}
/* Back wave: slightly lower, translucent, slower and reversed */
.gut-cal-liquid::before { top: 52%; opacity: 0.55; animation: gutWave 4.4s linear infinite reverse; }
/* Front wave: sits at the ~half-full line */
.gut-cal-liquid .gut-cal-wave { top: 48%; animation: gutWave 3s linear infinite; }
@keyframes gutWave {
  from { transform: translateX(-50%) rotate(0deg); }
  to   { transform: translateX(-50%) rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .gut-cal-liquid .gut-cal-wave,
  .gut-cal-liquid::before { animation: none !important; }
}

/* ============================================================
   ANIMATED LOGO (card 02 — "Managed start to finish")
   Uses the real umbrella logo paths (assets/images/umbrella-icon.svg).
   The umbrella sits static in its brand colours; a strong soft green
   glow pulses along the canopy edge, clipped inside the shape so it
   never spills past the silhouette. Trigger: main.js adds .animate
   when it scrolls into view. Reduced-motion / no-JS: static, no glow.
   ============================================================ */
.gut-umbrella {
  /* Logo's own colours (from the source SVG) as local tokens */
  --umb-green: #2FA849;
  --umb-teal: #284248;
  --umb-glow: #7fe698; /* brighter green for the edge glow only; canopy fill never changes */
  width: 100%;
  height: auto;
  overflow: visible;
}
.gut-umbrella .canopy { fill: var(--umb-green); }
.gut-umbrella .handle,
.gut-umbrella .nub { fill: var(--umb-teal); }
/* Strong soft glow that hugs the canopy edge; clipped so it stays inside the shape */
.gut-umbrella .edge-glow {
  fill: none;
  stroke: var(--umb-glow);
  stroke-width: 24;
  stroke-linejoin: round;
  opacity: 0;
  filter: url(#gutEdgeBlur);
}

/* The umbrella sits static; only the edge glow animates, once it is in view. */
.gut-umbrella.animate .edge-glow { animation: gutEdgePulse 2.2s ease-in-out infinite; }

@keyframes gutEdgePulse {
  0%, 100% { opacity: 0.3; }
  50%      { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  /* Static umbrella, no glow. */
  .gut-umbrella .edge-glow { animation: none !important; opacity: 0 !important; }
}

/* ============================================================
   LEAD FORM SECTION ("Get in touch")
   ============================================================ */
.lead { background: var(--green-light); padding: 100px 0; }
/* Faint green hue in the page corners (enquiry page) */
/* Grow the green enquiry section to fill any leftover height (short success
   state) so its background reaches the footer instead of leaving a white gap. */
.lead-page { position: relative; overflow: hidden; flex: 1 0 auto; }
.lead-page::before,
.lead-page::after {
  content: "";
  position: absolute;
  width: 540px;
  height: 540px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(49, 169, 73, 0.16), rgba(49, 169, 73, 0) 70%);
  pointer-events: none;
  z-index: 0;
}
.lead-page::before { top: -200px; left: -180px; }
.lead-page::after { bottom: -200px; right: -180px; }
.lead-page .container { position: relative; z-index: 1; }
.lead .container { max-width: 760px; }
/* Intro block matches the contact page lead intro (left-aligned type). */
.lead-intro { text-align: left; margin-bottom: 36px; }
.lead-intro h1 { color: var(--text-primary); margin-bottom: 18px; }
.lead-intro h2 { margin: 8px 0 12px; }
.lead-intro p { color: var(--text-secondary); font-size: 16px; line-height: 1.7; max-width: 460px; margin: 0; }
.lead-form {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px;
  /* Depth shadow + a faint green halo around the card */
  box-shadow: 0 18px 44px -30px rgba(29, 48, 53, 0.5), 0 0 46px -6px rgba(49, 169, 73, 0.20);
}
.lead-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.lead-field { display: flex; flex-direction: column; margin-bottom: 18px; }
.lead-field label { font-weight: 600; font-size: 14px; margin-bottom: 6px; color: var(--text-primary); }
.lead-field input,
.lead-field textarea {
  font: inherit;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--white);
  color: var(--text-primary);
}
.lead-field input:focus,
.lead-field textarea:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px var(--green-light);
}
.lead-field textarea { resize: vertical; }
.lead-field input::placeholder { font-style: italic; color: var(--text-muted); opacity: 1; }
.lead-submit { margin-top: 8px; }
/* Honeypot — visually hidden from people, still present for bots */
.lead-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.lead-success,
.lead-error { text-align: center; padding: 16px 20px; border-radius: 12px; font-weight: 600; }
.lead-success { background: var(--green-light); color: var(--green-dark); border: 1px solid var(--green); }
/* Validation error colours (not part of the brand palette) */
.lead-error { background: #FEF2F2; color: #B91C1C; border: 1px solid #FCA5A5; margin-bottom: 20px; }
/* A required field left empty (or an invalid email) on submit — flagged by JS.
   Keeps the value the visitor typed and just highlights the box in red. */
.lead-field.has-error label { color: #B91C1C; }
.lead-field.has-error input,
.lead-field.has-error textarea { border-color: #DC2626; background: #FEF2F2; }
.lead-field.has-error input:focus,
.lead-field.has-error textarea:focus { border-color: #DC2626; box-shadow: 0 0 0 3px #FEE2E2; }
@media (max-width: 600px) {
  .lead-row { grid-template-columns: 1fr; gap: 0; }
  .lead-form { padding: 24px; }
}

/* ============================================================
   TESTIMONIALS SECTION
   ============================================================ */
.testimonials { background: var(--white); padding: 100px 0; }
.testimonials-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 48px;
  flex-wrap: wrap;
}
.testimonials-header h2 { margin: 8px 0 0; }
.google-badge {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}
.google-badge-icon { flex-shrink: 0; }
.google-score {
  font-size: 24px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1;
}
.google-stars {
  color: #FBBC04;
  font-size: 16px;
  letter-spacing: 2px;
}
.google-count {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 3px;
}
.google-review-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--green);
  margin-top: 6px;
}
.google-review-link:hover { color: var(--green-dark); }
.google-review-link:hover .btn-arrow { transform: translateX(4px); }
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 32px;
}
.testimonial-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
}
.testimonial-quote {
  font-size: 14px;
  line-height: 1.75;
  color: var(--text-secondary);
  font-style: italic;
  margin-bottom: 20px;
}
.testimonial-author {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
}
.testimonial-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--green-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--green-dark);
  flex-shrink: 0;
  overflow: hidden;
}
.testimonial-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}
.testimonial-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}
.testimonial-role {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 2px;
}
.testimonials-footer { text-align: center; }
.testimonials-footer a {
  font-size: 14px;
  font-weight: 600;
  color: var(--green);
}
.testimonials-footer a:hover { color: var(--green-dark); }

/* ============================================================
   CTA SECTION
   ============================================================ */
.cta-section { background: linear-gradient(180deg, var(--white) 0%, var(--green-light) 16%, var(--green-light) 100%); padding: 100px 0; position: relative; overflow: hidden; }
.cta-inner { position: relative; z-index: 1; text-align: center; max-width: 640px; margin: 0 auto; }
.cta-section .eyebrow { color: var(--green-dark); }
.cta-section h2 {
  color: var(--text-primary);
  font-size: clamp(28px, 3vw, 40px);
  margin-bottom: 16px;
}
.cta-section p {
  color: var(--text-secondary);
  font-size: 17px;
  margin-bottom: 40px;
}
.cta-actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 32px;
}
.cta-socials {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  padding-top: 28px;
  border-top: 1px solid var(--border);
}
.social-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--white);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 500;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.social-btn:hover { background: var(--green-light); color: var(--green-dark); border-color: transparent; }
.social-btn svg { width: 18px; height: 18px; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  background: var(--teal-dark);
  padding: 64px 0 32px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  padding-bottom: 40px;
  margin-bottom: 32px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

/* Industry partners strip */
.footer-partners {
  text-align: center;
  min-width: 0;       /* let the grid cell shrink instead of being stretched */
  overflow: hidden;   /* the wide marquee track must never widen the footer */
}
.footer-partners-label {
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  margin-bottom: 24px;
}
.footer-partners-row {
  position: relative;
  overflow: hidden;
  width: 100%;
  /* fade the logos in/out at the left and right edges */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.footer-partners-track {
  display: flex;
  width: max-content;
  animation: partners-scroll 60s linear infinite;
  /* keep the marquee on its own GPU layer so it runs at a steady 60fps */
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
}
.footer-partners-group {
  display: flex;
  align-items: center;
}
/* pause the scroll while hovering so a logo can be read */
.footer-partners-row:hover .footer-partners-track { animation-play-state: paused; }
@keyframes partners-scroll {
  from { transform: translate3d(-50%, 0, 0); }
  to   { transform: translate3d(0, 0, 0); }
}
/* Logos sit directly on the dark footer in their own colours, all the same height. */
.footer-partner {
  flex-shrink: 0;
  margin: 0 22px;
  display: inline-flex;
  align-items: center;
  height: 62px;
  opacity: 0.9;
  transition: opacity 0.2s;
  text-decoration: none;
}
.footer-partner:hover { opacity: 1; }
.footer-partner img {
  max-height: 30px;   /* uniform logo height across the row */
  width: auto;
  /* no filter — logos keep their real brand colours */
}
.footer-partner span {
  font-size: 18px;
  font-weight: 600;
  color: rgba(255,255,255,0.85);   /* light wordmark on the dark footer */
  white-space: nowrap;
}
/* CESPHN's mark is dark navy; a soft light halo (not a hard tile) lets its real
   colours read on the dark footer while staying subtle. */
/* Per-logo sizing so compact/stacked marks read at a balanced size. */
.footer-partner--dell img { max-height: 42px; }
.footer-partner--google img { max-height: 34px; }
.footer-partner--medical-business-services img { max-height: 40px; }
.footer-partner--medicaldirector img { max-height: 46px; }
.footer-partner--cubiko img { max-height: 40px; }
.footer-partner--erx img { max-height: 40px; }
/* Dark/navy/black marks rendered white so they read on the dark footer (no tile/halo). */
.footer-partner--pax8 img { max-height: 40px; filter: brightness(0) invert(1); }
.footer-partner--best-practice img { max-height: 60px; filter: brightness(0) invert(1); }
.footer-partner--cesphn img { max-height: 48px; filter: brightness(0) invert(1); }
.footer-partner--lyrebird img { max-height: 34px; filter: brightness(0) invert(1); }
/* users who prefer reduced motion get a static, centred, wrapping row */
@media (prefers-reduced-motion: reduce) {
  .footer-partners-track {
    animation: none;
    transform: none;
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
  }
  .footer-partners-group {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 16px;
  }
  .footer-partners-group[aria-hidden="true"] { display: none; }
}

.footer-brand {}
.footer-logo {
  height: 40px;
  width: auto;
  margin-bottom: 20px;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  display: block;
}
.footer-tagline {
  font-size: 13px;
  color: rgba(255,255,255,0.55);
  line-height: 1.7;
  margin-bottom: 20px;
}
.footer-badges {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.footer-badge {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.55);
  border-radius: 5px;
  padding: 4px 10px;
  font-size: 11px;
}
.footer-col h5 {
  color: var(--white);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.footer-col ul { display: flex; flex-direction: column; gap: 10px; }
.footer-col ul li a {
  font-size: 13px;
  color: rgba(255,255,255,0.55);
  transition: color 0.2s;
}
.footer-col ul li a:hover { color: var(--white); }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.footer-bottom p {
  font-size: 12px;
  color: rgba(255,255,255,0.35);
  margin: 0;
}
.footer-bottom a {
  font-size: 12px;
  color: rgba(255,255,255,0.35);
}
.footer-bottom a:hover { color: rgba(255,255,255,0.6); }
.footer-social { display: inline-flex; align-items: center; color: rgba(255,255,255,0.35); }
.footer-social svg { width: 20px; height: 20px; }
.footer-bottom a.footer-social:hover { color: var(--green); }
/* LinkedIn in its brand blue (external brand colour) — blue by default and on hover */
.footer-bottom a.footer-social-linkedin,
.footer-bottom a.footer-social-linkedin:hover { color: #0A66C2; }
/* Support-portal umbrella uses the brand PNG mark (keeps its colours). The box
   is a hair shorter than the image and clips overflow, trimming the stray white
   line along the image's bottom edge. Image is top-aligned so only the bottom
   is clipped, never the canopy. */
.footer-social-umbrella { display: inline-block; height: 20px; overflow: hidden; line-height: 0; transition: transform 0.2s ease; }
.footer-social-umbrella img { height: 22px; width: auto; display: block; opacity: 0.9; transition: opacity 0.2s ease; }
.footer-bottom a.footer-social-umbrella:hover { transform: translateY(-2px); }
.footer-bottom a.footer-social-umbrella:hover img { opacity: 1; }

/* ============================================================
   INNER PAGES
   ============================================================ */
.page-hero {
  position: relative;
  overflow: hidden;
  background: var(--green-light);
  padding: 80px 0;
  text-align: center;
}
.page-hero::before {
  content: '';
  position: absolute;
  top: -260px;
  left: 50%;
  width: 640px;
  height: 640px;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(49,169,73,0.16), rgba(49,169,73,0) 70%);
  pointer-events: none;
}
.page-hero .container { position: relative; z-index: 1; }
.page-hero h1 { color: var(--text-primary); margin-bottom: 16px; }
.page-hero p { color: var(--text-secondary); font-size: 18px; max-width: 560px; margin: 0 auto; }
.page-content {
  padding: 80px 0;
  background: var(--white);
}
.page-content .container { max-width: 800px; }
.page-content h2 { margin: 40px 0 16px; }
.page-content p { margin-bottom: 16px; }

/* ============================================================
   BLOG
   ============================================================ */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.blog-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}
.blog-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
  border-color: rgba(49, 169, 73, 0.35);
}
.blog-card-body { padding: 24px; }
.blog-cat {
  font-size: 11px;
  font-weight: 600;
  color: var(--green-dark);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.blog-card h3 { font-size: 17px; font-weight: 600; margin-bottom: 10px; }
.blog-card p { font-size: 14px; }

/* ============================================================
   SERVICE DETAIL SECTIONS (Services page)
   ============================================================ */
.service-detail { padding: 96px 0; }
.service-detail .container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
}
.service-detail.reverse .service-panel { order: -1; }
.service-detail-content h2 { margin-bottom: 16px; }
.service-detail-content p {
  font-size: 16px;
  line-height: 1.75;
  max-width: 480px;
  margin-bottom: 28px;
}

/* Colored feature panel (echoes the hero's green assessment card) */
.service-panel {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  padding: 36px 32px;
  border: 1px solid var(--border);
  box-shadow: 0 12px 32px rgba(0,0,0,0.06);
}
.service-panel-green { background: var(--green-light); border-color: transparent; }
.service-panel-teal  { background: var(--white); }
.service-panel::after {
  content: '';
  position: absolute;
  right: -70px;
  top: -70px;
  width: 220px;
  height: 220px;
  border: 44px solid rgba(49,169,73,0.06);
  border-radius: 50%;
  pointer-events: none;
}
.service-panel-icon {
  position: relative;
  z-index: 1;
  width: 52px;
  height: 52px;
  background: var(--green);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  margin-bottom: 22px;
}
.service-panel-icon svg { width: 26px; height: 26px; }
.service-panel-title {
  position: relative;
  z-index: 1;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 18px;
}
.service-panel-list {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 13px;
}
.service-panel-item {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-secondary);
}
.service-panel-check {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  background: var(--green-light);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--green-dark);
}
.service-panel-check svg { width: 12px; height: 12px; }

/* ============================================================
   HEADER "BOOK A CALL" BUTTON
   ============================================================ */
.header-cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: linear-gradient(180deg, var(--green) 0%, var(--green-dark) 100%);
  color: var(--white);
  padding: 8px 18px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 6px 16px -6px rgba(49, 169, 73, 0.5);
  transition: box-shadow 0.2s ease, transform 0.2s ease, filter 0.2s ease;
}
.header-cta:hover {
  color: var(--white);
  transform: translateY(-2px);
  filter: brightness(0.96);
  box-shadow: 0 12px 24px -8px rgba(49, 169, 73, 0.6);
}
.header-cta .btn-arrow { width: 15px; height: 15px; }
.header-cta:hover .btn-arrow { transform: translateX(4px); }
.header-cta-icon { width: 15px; height: 15px; flex-shrink: 0; }
/* Floating live chat launcher (bottom-right, site-wide) */
.live-chat {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 72px;
  height: 72px;
  border: none;
  padding: 0;
  cursor: pointer;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 26px rgba(41,66,72,0.28);
  z-index: 1000;
  transition: transform 0.25s ease, background 0.25s ease, box-shadow 0.25s ease, opacity 0.25s ease, visibility 0.25s ease;
}
.live-chat svg { width: 34px; height: 34px; }
/* hidden while the Rocket.Chat window is open */
.live-chat.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; transform: scale(0.6); }
/* Rocket.Chat's idle 86x86 corner box overlaps our launcher and eats clicks;
   let clicks pass through to our button until the chat is actually open. */
#rocketchat-widget, .rocketchat-widget { pointer-events: none !important; }
/* our green button is the only launcher: fully hide RC's own widget/bubble
   unless we've explicitly opened the chat */
body:not(.rc-open) #rocketchat-widget,
body:not(.rc-open) .rocketchat-widget { opacity: 0 !important; visibility: hidden !important; }
body.rc-open #rocketchat-widget, body.rc-open .rocketchat-widget { pointer-events: auto !important; }
.live-chat:hover {
  background: var(--green-dark);
  color: #fff;
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 14px 32px rgba(41,66,72,0.34);
}
.live-chat::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--green);
  z-index: -1;
  animation: live-chat-pulse 2.4s ease-out infinite;
}
@keyframes live-chat-pulse {
  0% { transform: scale(1); opacity: 0.45; }
  70%, 100% { transform: scale(1.7); opacity: 0; }
}
@media (max-width: 560px) {
  .live-chat { right: 16px; bottom: 16px; width: 64px; height: 64px; }
  .live-chat svg { width: 30px; height: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  .live-chat { transition: none; }
  .live-chat::before { animation: none; }
}

/* ============================================================
   FULL-WIDTH CTA BANNERS
   ============================================================ */
.cta-banner {
  padding: 48px 40px;
  text-align: center;
}
.cta-banner h2 {
  font-weight: 300;
  max-width: 760px;
  margin: 0 auto 16px;
}
.cta-banner p {
  max-width: 640px;
  margin: 0 auto 28px;
}
.cta-banner-teal { background: var(--green-light); }
.cta-banner-teal h2 { color: var(--text-primary); }
.cta-banner-teal p { color: var(--text-secondary); }
.cta-banner-light { background: var(--white); }
.cta-banner-light h2 { color: var(--text-primary); }

/* ============================================================
   CONTACT / BOOK A CALL FORM SECTION
   ============================================================ */
.contact-section { padding: 80px 0; }
.contact-form { max-width: 520px; margin: 28px auto 0; text-align: left; }

/* ============================================================
   CONTACT PAGE (page-contact.php)
   ============================================================ */
.contact-lead {
  position: relative;
  overflow: hidden;
  background: var(--green-light);
  padding: 88px 0;
}
.contact-lead::before {
  content: '';
  position: absolute;
  top: -240px;
  right: -160px;
  width: 620px;
  height: 620px;
  background: radial-gradient(circle, rgba(49,169,73,0.16), rgba(49,169,73,0) 70%);
  pointer-events: none;
}
.contact-lead .container {
  position: relative;
  z-index: 1;
  display: grid;
  /* Narrow intro column; Calendly gets the rest so it keeps its wide
     calendar + time-slots layout (it collapses to a cramped single column
     below ~680px). */
  /* Intro flexes to fill the left; Calendly is fixed and sits flush to the
     right edge of the container, lining up with the contact-details boxes
     (e.g. the Support box) below. */
  grid-template-columns: minmax(0, 1fr) 600px;
  gap: 48px;
  /* Stretch both columns to the same height (set by the taller = the intro
     text), so the Calendly widget matches the text height and scrolls
     internally rather than imposing its own 700px. */
  align-items: stretch;
}
.contact-lead-intro .eyebrow { color: var(--green-dark); }
.contact-lead-intro h1 { color: var(--text-primary); margin-bottom: 18px; }
.contact-lead-intro > p {
  color: var(--text-secondary);
  font-size: 16px;
  line-height: 1.7;
  max-width: 460px;
}
.contact-expect-title {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  margin: 32px 0 18px;
}
.contact-expect { display: flex; flex-direction: column; gap: 15px; }
.contact-expect li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 1.5;
}
.contact-expect .tick {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--green);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
}
.contact-expect .tick svg { width: 13px; height: 13px; }

.contact-card {
  background: transparent;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}
/* Calendly fills the column height (matched to the intro text) instead of its
   inline 700px; overflow scrolls inside the widget. */
.contact-card .calendly-inline-widget {
  height: 100% !important;
  min-height: 420px;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.contact-card .calendly-inline-widget iframe {
  border-radius: var(--radius-lg);
}
.contact-card h2 { font-size: 20px; font-weight: 600; margin-bottom: 6px; }
.contact-card-sub { font-size: 14px; color: var(--text-secondary); margin-bottom: 22px; }

/* Placeholder guide form (to be swapped for the live WPForms form) */
.guide-form { display: flex; flex-direction: column; gap: 12px; }
.guide-form input {
  width: 100%;
  padding: 12px 14px;
  font: inherit;
  font-size: 14px;
  color: var(--text-primary);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.guide-form input:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px var(--green-light);
}
.guide-form .btn { margin-top: 4px; justify-content: center; }

/* Book-a-call page (Calendly embed) */
.book-lead { background: var(--green-light); padding: 72px 0 80px; }
.book-intro { max-width: 640px; margin: 0 auto 32px; text-align: center; }
.book-intro h1 { margin: 8px 0 12px; }
.book-intro p { color: var(--text-secondary); }
/* No card framing around the Calendly embed — let the widget sit flush. */
.calendly-inline-widget { margin: 0 auto; }

/* fades from the teal lead down into white as you scroll */
.contact-details {
  background: linear-gradient(180deg, var(--green-light) 0%, var(--white) 55%);
  padding: 72px 0 80px;
}
.contact-details-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.contact-detail {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px 18px;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
  transition: transform 0.2s, box-shadow 0.2s;
}
.contact-detail:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.12);
}
.contact-detail-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 16px;
  border-radius: 12px;
  background: var(--green-light);
  color: var(--green-dark);
  display: flex;
  align-items: center;
  justify-content: center;
}
.contact-detail-icon svg { width: 24px; height: 24px; }
.contact-detail h5 {
  color: var(--text-primary);
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 4px;
}
.contact-detail-desc {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 12px;
}
/* the whole thing is one rounded box: email on the left, copy icon on the right */
.contact-detail-email {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  height: 40px;
  padding: 0 6px 0 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--teal-light);
}
.email-box {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  overflow: hidden;
}
.email-box a {
  font-size: 12px;
  font-weight: 600;
  color: var(--green-dark);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.email-box a:hover { color: var(--green); }
.copy-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: transparent;
  color: var(--green-dark);
  transition: background 0.2s, color 0.2s;
}
.copy-btn:hover { background: var(--green); color: var(--white); }
.copy-btn.copied { background: var(--green); color: var(--white); }
.copy-btn svg { width: 15px; height: 15px; }
.copy-btn .copy-btn-check { display: none; }
.copy-btn.copied .copy-btn-icon { display: none; }
.copy-btn.copied .copy-btn-check { display: inline-flex; }
.contact-meta {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px 32px;
  margin-top: 40px;
}
.contact-meta span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--text-secondary);
}
.contact-meta svg { width: 16px; height: 16px; color: var(--green-dark); flex-shrink: 0; }

/* ============================================================
   HERO INTERACTIVE
   Umbrella image + six service nodes that expand into detail cards
   on hover (desktop) / tap (mobile). All original; brand colours only.
   ============================================================ */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.hero-int {
  background: var(--teal-light); /* brand grey #EDF2F3 */
  padding: 48px 0 56px;
  overflow: hidden;
}
/* helper line under the section subtext */
.svc-helper {
  color: var(--text-muted);
  font-style: italic;
  font-size: 13px;
  margin-top: 6px;
}

/* --- Service grid: even 4-column grid of gently floating tiles --- */
.svc-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  max-width: 1100px;
  margin: 0 auto 32px;
}
.svc-tile {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  background: var(--white);
  border: 0.5px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  cursor: pointer;
  font-family: inherit;
  color: var(--text-primary);
  box-shadow: 0 4px 14px rgba(41,66,72,0.06);
  animation: svc-float 4s ease-in-out infinite;
  animation-delay: var(--float-delay, 0s);
  transition: transform 0.3s cubic-bezier(0.22,1,0.36,1), border-color 0.25s ease, box-shadow 0.3s ease;
}
.svc-tile-ic {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--green-light);   /* #EBF8EF */
  color: var(--green-dark);         /* #27913C */
  display: grid;
  place-items: center;
}
.svc-tile-ic svg { width: 24px; height: 24px; }
.svc-tile-label { font-size: 14px; font-weight: 600; line-height: 1.25; }
@keyframes svc-float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -6px; }
}
/* hover / focus / active: float pauses (steady), tile lifts, border turns green */
.svc-tile:hover,
.svc-tile:focus-visible,
.svc-tile.is-active {
  animation-play-state: paused;
  transform: translateY(-4px);
  border-color: var(--green);       /* #31A949 */
  box-shadow: 0 12px 28px rgba(41,66,72,0.14);
  outline: none;
}

/* --- Detail panel: collapsed by default, expands open when a service is active --- */
.svc-panel {
  max-width: 600px;
  margin: 0 auto;
  display: grid;
  grid-template-rows: 0fr;                 /* reclaims the vertical space when idle */
  transition: grid-template-rows 0.95s cubic-bezier(0.22,1,0.36,1), margin 0.95s ease;
}
.svc-panel.has-active {
  grid-template-rows: 1fr;                  /* row height = constant tallest-detail height */
  margin: 0 auto 40px;
}
/* on phone/tablet the panel is moved inline directly under the tapped tile;
   make it span the full grid width */
.svc-panel.svc-panel-inline { grid-column: 1 / -1; width: 100%; }
.svc-panel-inner {
  overflow: hidden;
  min-height: 0;
  display: grid;                            /* stack all details in one cell */
  border: 1px solid transparent;
  border-radius: 16px;
  /* idle: a miniscule square at the centre; active: bloom out to full size */
  transform: scale(0.1);
  transform-origin: center center;
  opacity: 0;
  transition: transform 0.95s cubic-bezier(0.22,1,0.36,1), opacity 0.7s ease,
              background 0.7s ease, border-color 0.7s ease, box-shadow 0.7s ease;
}
.svc-panel-inner > * { grid-area: 1 / 1; } /* overlap so height = tallest detail (no shift between services) */
.svc-panel.has-active .svc-panel-inner {
  transform: scale(1);
  opacity: 1;
  background: var(--white);
  border-color: var(--border);
  box-shadow: 0 16px 40px rgba(41,66,72,0.10);
}

.svc-detail {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 26px 28px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.75s cubic-bezier(0.33,0,0.2,1);
}
.svc-detail.is-active { opacity: 1; visibility: visible; }
/* pause animations in hidden details (they still reserve height for no-shift) */
.svc-detail:not(.is-active) * { animation-play-state: paused !important; }
.svc-visual { flex: 0 0 auto; width: 300px; display: flex; align-items: center; justify-content: center; }
/* monitoring has two stacked pieces (graph + status) - keep them column, not side by side */
.svc-detail[data-service="monitoring"] .svc-visual { flex-direction: column; }
.svc-text { flex: 1 1 auto; min-width: 0; }
.svc-text h3 { margin: 0 0 8px; color: var(--green); font-size: 19px; font-weight: 700; line-height: 1.2; }
.svc-text p { margin: 0; color: var(--text-secondary); font-size: 13.5px; line-height: 1.55; }

/* Simple detail card (services without a bespoke graphic) */
.hero-simple { display: flex; justify-content: center; padding: 12px 0 16px; }

/* Microsoft 365: four glossy green tiles */
.ms-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 96px; height: 96px; margin: 6px auto; }
.ms-tile { border-radius: 9px; display: grid; place-items: center; color: var(--white); opacity: 0; transform: scale(0.4); box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 3px 8px rgba(41,66,72,0.14); }
.ms-tile svg { width: 22px; height: 22px; }
.ms-tile:nth-child(1) { background: linear-gradient(135deg, var(--green), var(--green-dark)); }
.ms-tile:nth-child(2) { background: linear-gradient(225deg, var(--green), var(--green-dark)); }
.ms-tile:nth-child(3) { background: linear-gradient(45deg, var(--green), var(--green-dark)); }
.ms-tile:nth-child(4) { background: linear-gradient(315deg, var(--green), var(--green-dark)); }
@keyframes ms-pop { to { opacity: 1; transform: scale(1); } }
.svc-detail.is-active .ms-tile { animation: ms-pop 0.45s cubic-bezier(0.22,1,0.36,1) forwards; }
.svc-detail.is-active .ms-tile:nth-child(1) { animation-delay: .06s; }
.svc-detail.is-active .ms-tile:nth-child(2) { animation-delay: .19s; }
.svc-detail.is-active .ms-tile:nth-child(3) { animation-delay: .32s; }
.svc-detail.is-active .ms-tile:nth-child(4) { animation-delay: .45s; }
@media (prefers-reduced-motion: reduce) { .svc-detail.is-active .ms-tile { animation: none; opacity: 1; transform: none; } }

/* Cloud Hosted Servers: hybrid-cloud network diagram. A green line traces each
   box outline (a top half + a bottom half, splitting at the left edge and
   rejoining at the right), then connects on to the next box. Sequenced and
   looped in main.js while the cloud service tile is active. Colours: green
   #31A949, teal icons #294248, faded border #C5D2D4. */
.cloudnet { position: relative; width: 100%; height: 200px; }
.nd2 { width: 100%; height: 100%; display: block; overflow: visible; }

/* boxes: faded until the line reaches them */
.nd2-box { opacity: 0.45; transition: opacity 0.5s ease; }
.nd2-box.lit { opacity: 1; }
.nd2-rect { fill: #fff; stroke: #C5D2D4; stroke-width: 2; }
.nd2-icon { color: #294248; }
.nd2-label { fill: #294248; font-family: 'Barlow', sans-serif; font-weight: 600; font-size: 9px; text-anchor: middle; }

/* connectors + traced outlines: steady green, revealed via a dash "draw" */
.nd2-conn, .nd2-trace {
  fill: none;
  stroke: #31A949;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: var(--len);
  stroke-dashoffset: var(--len);
  transition: stroke-dashoffset var(--draw, 0.6s) linear;
}
.nd2-conn.drawn, .nd2-trace.drawn { stroke-dashoffset: 0; }
.nd2-noanim { transition: none; } /* JS snaps lines back instantly on reset */

/* once the whole diagram has finished drawing, the green line pulses with the
   same steady glow as the broadband tab (JS adds .done to the svg) */
.nd2.done .nd2-conn, .nd2.done .nd2-trace { animation: nd2-glow 2.8s ease-in-out infinite; }
@keyframes nd2-glow {
  0%, 100% { filter: drop-shadow(0 0 0.5px rgba(49,169,73,0.20)); }
  50%      { filter: drop-shadow(0 0 4px rgba(49,169,73,0.80)); }
}

@media (prefers-reduced-motion: reduce) {
  .nd2-box { opacity: 1; }
  .nd2-conn, .nd2-trace { transition: none; stroke-dashoffset: 0; animation: none; }
}

/* Line-of-business apps: 2x2 tile grid, a green "kept current" check cycles through */
.lob { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 6px 2px 10px; }
.lob-app { position: relative; display: flex; align-items: center; gap: 10px; padding: 9px 11px; border: 1px solid var(--border); border-radius: 12px; background: var(--white); opacity: 0; transform: translateY(8px); }
.svc-detail.is-active .lob-app { animation: lob-in 0.45s cubic-bezier(0.22,1,0.36,1) var(--d, 0s) forwards, lob-ring 4.8s ease var(--da, 0s) infinite; }
@keyframes lob-in { to { opacity: 1; transform: translateY(0); } }
@keyframes lob-ring {
  0% { box-shadow: 0 0 0 0 rgba(49,169,73,0); }
  9%, 25% { box-shadow: 0 0 0 2px var(--green); }
  34%, 100% { box-shadow: 0 0 0 0 rgba(49,169,73,0); }
}
.lob-ic { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 10px; background: var(--green-light); color: var(--green-dark); display: grid; place-items: center; }
.lob-ic svg { width: 20px; height: 20px; }
.lob-txt { min-width: 0; }
.lob-name { font-size: 12px; font-weight: 700; color: var(--text-primary); line-height: 1.02; }
.lob-sub { font-size: 9.5px; color: var(--text-muted); line-height: 1.15; margin-top: 1px; }
.lob-check { position: absolute; top: 7px; right: 7px; width: 16px; height: 16px; border-radius: 50%; background: var(--green); color: #fff; display: grid; place-items: center; opacity: 0; transform: scale(0.4); }
.lob-check svg { width: 10px; height: 10px; }
.svc-detail.is-active .lob-check { animation: lob-chk 4.8s ease var(--da, 0s) infinite; }
@keyframes lob-chk {
  0%, 2% { opacity: 0; transform: scale(0.4); }
  11% { opacity: 1; transform: scale(1); }
  25% { opacity: 1; transform: scale(1); }
  34%, 100% { opacity: 0; transform: scale(0.4); }
}
@media (prefers-reduced-motion: reduce) {
  .svc-detail.is-active .lob-app { animation: none; opacity: 1; transform: none; }
  .svc-detail.is-active .lob-check { animation: none; opacity: 1; transform: scale(1); }
}

/* Broadband: wifi slides right-of-centre and charges to full bars; a 5G backup fills its
   signal bars on the left; download/upload meters fill on the right; then a healthy glow
   sweeps through all four icons on repeat */
.bband { position: relative; width: 100%; height: 150px; }
.bband > * { position: absolute; top: 50%; }

/* Wi-Fi (primary link) */
.bb-wifi { left: 50%; transform: translate(-50%, -50%); color: var(--green-dark); text-align: center; }
.bb-wifi svg { width: 50px; height: 50px; display: block; margin: 0 auto; }
.svc-detail.is-active .bb-wifi { animation: bb-slide 0.55s cubic-bezier(0.22,1,0.36,1) 0.3s forwards; }
@keyframes bb-slide { to { left: 37%; } }
.bb-a1, .bb-a2, .bb-a3 { opacity: 0.16; }
.svc-detail.is-active .bb-a1 { animation: bb-fill 0.3s ease 0.15s forwards; }
.svc-detail.is-active .bb-a2 { animation: bb-fill 0.3s ease 0.8s forwards; }
.svc-detail.is-active .bb-a3 { animation: bb-fill 0.3s ease 1.3s forwards; }
@keyframes bb-fill { to { opacity: 1; } }

/* 5G backup link (left of wifi) — signal bars charge up */
.bb-5g { left: 12%; transform: translate(-50%, -50%); opacity: 0; color: var(--green-dark); text-align: center; }
/* pad the shorter 5G glyph to the same 48px footprint as the orbs so its icon
   and label line up with the other three */
.bb-5g svg { width: 34px; height: 34px; display: block; margin: 0 auto; box-sizing: content-box; padding: 7px 0; }
.svc-detail.is-active .bb-5g { animation: bb-in-l 0.4s ease 0.35s forwards; }
@keyframes bb-in-l { from { opacity: 0; transform: translate(calc(-50% - 16px), -50%); } to { opacity: 1; transform: translate(-50%, -50%); } }
.bb-b1, .bb-b2, .bb-b3, .bb-b4 { opacity: 0.16; }
.svc-detail.is-active .bb-b1 { animation: bb-fill 0.3s ease 0.5s forwards; }
.svc-detail.is-active .bb-b2 { animation: bb-fill 0.3s ease 0.8s forwards; }
.svc-detail.is-active .bb-b3 { animation: bb-fill 0.3s ease 1.1s forwards; }
.svc-detail.is-active .bb-b4 { animation: bb-fill 0.3s ease 1.4s forwards; }

/* Download / Upload meters (right) */
.bb-side { transform: translate(-50%, -50%); opacity: 0; text-align: center; }
.bb-side.dl { left: 63%; }
.bb-side.ul { left: 85%; }
.svc-detail.is-active .bb-side.dl { animation: bb-in 0.4s ease 0.4s forwards; }
.svc-detail.is-active .bb-side.ul { animation: bb-in 0.4s ease 0.5s forwards; }
/* the pulse lives on the icon glyphs only (never the labels), so text stays crisp */
.svc-detail.is-active .bb-5g svg,
.svc-detail.is-active .bb-wifi svg,
.svc-detail.is-active .bb-orb { animation: bb-glow 2.8s ease-in-out 1.6s infinite; }
@keyframes bb-in { from { opacity: 0; transform: translate(calc(-50% + 16px), -50%); } to { opacity: 1; transform: translate(-50%, -50%); } }
.bb-orb { position: relative; width: 48px; height: 48px; border-radius: 50%; background: var(--green-light); overflow: hidden; display: grid; place-items: center; margin: 0 auto; box-shadow: inset 0 0 0 1px rgba(41,66,72,0.08); }
.bb-level { position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: var(--green); }
.svc-detail.is-active .bb-side.dl .bb-level { animation: bb-rise 1s ease 0.6s forwards; }
.svc-detail.is-active .bb-side.ul .bb-level { animation: bb-rise 1s ease 0.7s forwards; }
@keyframes bb-rise { to { height: 100%; } }
.bb-orb svg { position: relative; z-index: 1; width: 24px; height: 24px; color: var(--teal-dark); }
.bb-lbl { display: block; margin-top: 7px; font-size: 10px; font-weight: 600; color: var(--text-secondary); white-space: nowrap; }
.bb-5g svg, .bb-wifi svg, .bb-orb { transform-origin: center center; will-change: transform, filter; }
@keyframes bb-glow {
  0%, 100% { filter: drop-shadow(0 0 1px rgba(49,169,73,0.15)); transform: scale(1); }
  50% { filter: drop-shadow(0 0 11px rgba(49,169,73,0.8)); transform: scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
  .svc-detail.is-active .bb-wifi { animation: none; left: 37%; }
  .svc-detail.is-active .bb-5g { animation: none; opacity: 1; }
  .svc-detail.is-active .bb-a1, .svc-detail.is-active .bb-a2, .svc-detail.is-active .bb-a3,
  .svc-detail.is-active .bb-b1, .svc-detail.is-active .bb-b2, .svc-detail.is-active .bb-b3, .svc-detail.is-active .bb-b4 { animation: none; opacity: 1; }
  .svc-detail.is-active .bb-side { animation: none; opacity: 1; }
  .svc-detail.is-active .bb-level { animation: none; height: 100%; }
  .svc-detail.is-active .bb-5g svg, .svc-detail.is-active .bb-wifi svg, .svc-detail.is-active .bb-orb { animation: none; }
}
.hero-simple-icon {
  width: 72px; height: 72px; border-radius: 20px;
  background: var(--green-light); color: var(--green-dark);
  display: flex; align-items: center; justify-content: center;
}
.hero-simple-icon svg { width: 34px; height: 34px; }

/* Printer Support: feeds paper in, then prints one out (on hover) */
.printer-anim { position: relative; width: 160px; height: 150px; margin: 0 auto; }
.printer-top { position: absolute; left: 50%; top: 26px; transform: translateX(-50%); width: 62px; height: 18px; background: var(--white); border: 2px solid var(--green); border-bottom: none; border-radius: 7px 7px 0 0; z-index: 2; }
.printer-body { position: absolute; left: 50%; top: 44px; transform: translateX(-50%); width: 104px; height: 56px; background: var(--green-light); border: 2px solid var(--green); border-radius: 10px; z-index: 3; }
.printer-screen { position: absolute; left: 50%; margin-left: -40px; top: 54px; width: 24px; height: 9px; background: var(--white); border: 1.5px solid var(--green); border-radius: 2px; z-index: 4; }
.printer-dot { position: absolute; left: 50%; margin-left: 34px; top: 55px; width: 7px; height: 7px; border-radius: 50%; background: var(--green); z-index: 4; }
.printer-slot { position: absolute; left: 50%; top: 90px; transform: translateX(-50%); width: 74px; height: 6px; background: var(--green); border-radius: 3px; z-index: 4; }
.paper { position: absolute; left: 50%; width: 42px; height: 52px; background: var(--white); border: 1.5px solid var(--border); border-radius: 3px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); opacity: 0; z-index: 1; }
.paper span { display: block; height: 2px; background: var(--border); border-radius: 2px; margin: 7px 7px 0; }
.paper span:first-child { margin-top: 9px; }
.paper-in { top: 4px; }
.paper-out { top: 52px; }
.svc-detail.is-active .paper-in { animation: printer-in 3s ease-in-out infinite; }
.svc-detail.is-active .paper-out { animation: printer-out 3s ease-in-out infinite; }
@keyframes printer-in {
  0% { transform: translate(-50%, -12px); opacity: 0; }
  8% { opacity: 1; }
  38% { transform: translate(-50%, 40px); opacity: 1; }
  46% { transform: translate(-50%, 46px); opacity: 0; }
  100% { transform: translate(-50%, -12px); opacity: 0; }
}
@keyframes printer-out {
  0%, 46% { transform: translate(-50%, 0); opacity: 0; }
  52% { opacity: 1; }
  86% { transform: translate(-50%, 48px); opacity: 1; }
  96% { transform: translate(-50%, 48px); opacity: 0; }
  100% { transform: translate(-50%, 0); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .svc-detail.is-active .paper-in { animation: none; opacity: 0; }
  .svc-detail.is-active .paper-out { animation: none; opacity: 1; transform: translate(-50%, 46px); }
}

/* --- VoIP card --- */
.voip { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.voip-avatar { width: 92px; text-align: center; }
.voip-circle {
  width: 54px; height: 54px; border-radius: 50%;
  background: var(--green-light); color: var(--green-dark);
  display: grid; place-items: center; margin: 0 auto 8px;
}
.voip-circle svg { width: 32px; height: 32px; transform: translateY(4px); }
.voip-cross { fill: var(--green-light); }
.voip-circle.voip-doc svg { transform: translateY(8px); }
.voip-avatar span { display: block; font-size: 10.5px; line-height: 1.35; color: var(--text-secondary); }
.voip-avatar b { color: var(--text-primary); font-weight: 600; }
.voip-waves { display: flex; align-items: center; gap: 4px; height: 40px; }
.voip-waves span { width: 4px; height: 8px; border-radius: 2px; background: var(--green); animation: voip-wave 1s ease-in-out infinite; }
.voip-waves span:nth-child(2) { animation-delay: .15s; }
.voip-waves span:nth-child(3) { animation-delay: .3s; }
.voip-waves span:nth-child(4) { animation-delay: .45s; }
.voip-waves span:nth-child(5) { animation-delay: .6s; }
@keyframes voip-wave { 0%, 100% { height: 8px; } 50% { height: 30px; } }

/* --- Backup card --- */
.backup { text-align: center; }
.backup-hero { position: relative; width: 116px; height: 116px; margin: 4px auto 20px; display: grid; place-items: center; }
.backup-disc { position: relative; z-index: 1; width: 62px; height: 62px; border-radius: 16px; background: var(--green); color: var(--white); display: grid; place-items: center; }
.backup-disc svg { width: 30px; height: 30px; }
.backup-ring { position: absolute; inset: 0; width: 116px; height: 116px; color: var(--green); animation: backup-spin 7s linear infinite; }
@keyframes backup-spin { to { transform: rotate(360deg); } }
/* Disaster-recovery story: the ring glows RED while recovering, then after a few
   seconds fades to GREEN and keeps a soft green pulse; "Restored" fades in beside it. */
.svc-detail.is-active .backup-ring {
  animation: backup-spin 7s linear infinite,
             br-recover 5s ease forwards,
             br-pulse 2s ease-in-out 5s infinite;
}
@keyframes br-recover {
  /* Blaring alarm: the red glow throbs between full-bright and dim (slower,
     held red longer)... */
  0%   { color: #C4443A; filter: drop-shadow(0 0 3px  rgba(196,68,58,0.35)); }
  10%  { color: #E5322B; filter: drop-shadow(0 0 14px rgba(229,50,43,1));    }
  22%  { color: #C4443A; filter: drop-shadow(0 0 3px  rgba(196,68,58,0.35)); }
  33%  { color: #E5322B; filter: drop-shadow(0 0 14px rgba(229,50,43,1));    }
  45%  { color: #C4443A; filter: drop-shadow(0 0 3px  rgba(196,68,58,0.35)); }
  56%  { color: #E5322B; filter: drop-shadow(0 0 14px rgba(229,50,43,1));    }
  66%  { color: #C4443A; filter: drop-shadow(0 0 6px  rgba(196,68,58,0.7));  }
  /* ...then eases over to a calm green. */
  84%  { color: var(--green); filter: drop-shadow(0 0 8px rgba(49,169,73,0.7)); }
  100% { color: var(--green); filter: drop-shadow(0 0 3px rgba(49,169,73,0.3)); }
}
@keyframes br-pulse {
  0%, 100% { filter: drop-shadow(0 0 3px rgba(49,169,73,0.3)); }
  50%      { filter: drop-shadow(0 0 9px rgba(49,169,73,0.8)); }
}
.backup-restored {
  position: absolute; left: calc(100% + 14px); top: 50%;
  transform: translateY(-50%) translateX(-6px);
  white-space: nowrap; font-size: 15px; font-weight: 600; color: var(--green); opacity: 0;
}
.svc-detail.is-active .backup-restored { animation: br-restored 0.5s ease 5.1s forwards; }
@keyframes br-restored { to { opacity: 1; transform: translateY(-50%) translateX(0); } }
.backup-chips { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.backup-chips span { background: var(--green-light); color: var(--green-dark); font-size: 12px; font-weight: 600; padding: 6px 12px; border-radius: 20px; }
@media (prefers-reduced-motion: reduce) {
  .backup-ring, .svc-detail.is-active .backup-ring { animation: none; color: var(--green); filter: none; }
  .backup-restored { opacity: 1; transform: translateY(-50%); }
}

/* --- Whitelisting card --- */
.wl-row { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 10px; font-size: 13px; font-weight: 600; }
.wl-row + .wl-row { margin-top: 10px; }
.wl-allow { background: var(--soft-green); color: var(--green-dark); }
.wl-block { background: #FBEAEA; color: #B4231D; } /* red used only for the blocked row */
.wl-badge { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--white); }
.wl-badge svg { width: 13px; height: 13px; }
.wl-allow .wl-badge { background: var(--green); }
.wl-block .wl-badge { background: #C4443A; }

/* --- Support card (chat) --- */
.chat { display: flex; flex-direction: column; gap: 10px; }
.chat-row { display: flex; align-items: flex-end; gap: 8px; opacity: 0; }
.chat-row.out { flex-direction: row-reverse; }
.chat-av { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 9.5px; font-weight: 700; }
.chat-av.pm { background: var(--teal-light); color: var(--text-secondary); }
.chat-av.gu { background: var(--green); color: var(--white); }
.chat-bubble { position: relative; max-width: 76%; padding: 9px 12px; border-radius: 14px; font-size: 12.5px; line-height: 1.4; }
.chat-bubble.in { background: var(--teal-light); color: var(--text-primary); border-bottom-left-radius: 4px; }
.chat-bubble.out { background: var(--green); color: var(--white); border-bottom-right-radius: 4px; }
.chat-bubble .txt { opacity: 0; }
.chat-bubble .t { font-size: 10px; opacity: 0.65; margin-left: 6px; white-space: nowrap; }
.chat-dots { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 4px; }
.chat-dots i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: 0.5; animation: chat-dot 1.1s infinite ease-in-out; }
.chat-dots i:nth-child(2) { animation-delay: .18s; }
.chat-dots i:nth-child(3) { animation-delay: .36s; }
@keyframes chat-dot { 0%, 100% { transform: translateY(0); opacity: .35; } 50% { transform: translateY(-3px); opacity: .9; } }
.chat-sys { text-align: center; font-size: 11px; color: var(--text-muted); opacity: 0; }
/* the sequence plays when the card opens */
@keyframes chat-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes chat-fade-in { to { opacity: 1; } }
@keyframes chat-fade-out { to { opacity: 0; } }
.svc-detail.is-active .chat-row,
.svc-detail.is-active .chat-sys { animation: chat-in 0.4s ease var(--d, 0s) forwards; }
.svc-detail.is-active .chat-bubble .txt { animation: chat-fade-in 0.3s ease var(--dt, 0s) forwards; }
.svc-detail.is-active .chat-bubble .chat-dots { animation: chat-fade-out 0.25s ease var(--dt, 0s) forwards; }
@media (prefers-reduced-motion: reduce) {
  .svc-detail.is-active .chat-row, .svc-detail.is-active .chat-sys,
  .svc-detail.is-active .chat-bubble .txt { animation: none; opacity: 1; }
  .svc-detail.is-active .chat-bubble .chat-dots { display: none; }
}

/* --- Cybersecurity card --- */
.cyber { display: flex; flex-direction: column; gap: 14px; }
.cyber-row { display: flex; align-items: center; gap: 14px; }
.cyber-ic { flex-shrink: 0; width: 46px; height: 46px; border-radius: 12px; background: var(--green-light); color: var(--green-dark); display: grid; place-items: center; }
.cyber-ic svg { width: 24px; height: 24px; }
.cyber-row b { display: block; font-size: 14px; font-weight: 600; color: var(--text-primary); }
.cyber-row span { font-size: 12.5px; color: var(--text-secondary); }
/* rows slide up in sequence, then each icon runs its own bespoke animation */
.cyber-row { opacity: 0; transform: translateY(8px); }
.svc-detail.is-active .cyber-row { animation: cyber-in 0.45s cubic-bezier(0.22,1,0.36,1) forwards; }
.svc-detail.is-active .cyber-row:nth-child(1) { animation-delay: .1s; }
.svc-detail.is-active .cyber-row:nth-child(2) { animation-delay: .25s; }
.svc-detail.is-active .cyber-row:nth-child(3) { animation-delay: .4s; }
@keyframes cyber-in { to { opacity: 1; transform: translateY(0); } }
.cyber-ic { position: relative; overflow: visible; }

/* Antivirus: a green germ that keeps pulsating (the only looping cyber icon) */
.cyber-germ { color: var(--green); }
.cyber-germ svg { transform-origin: center; }
.svc-detail.is-active .cyber-germ svg { animation: germ-pulse 1.7s ease-in-out infinite; }
@keyframes germ-pulse {
  0%, 100% { transform: scale(1) rotate(0deg); filter: drop-shadow(0 0 0 rgba(49,169,73,0)); }
  50% { transform: scale(1.14) rotate(8deg); filter: drop-shadow(0 0 5px rgba(49,169,73,0.55)); }
}

/* Application whitelisting: a shield pops in and a check draws inside it (plays once) */
.cyber-wl { color: var(--green); }
.cyber-wl .wl-shield { transform-box: fill-box; transform-origin: center; opacity: 0; transform: scale(0.5); }
.svc-detail.is-active .cyber-wl .wl-shield { animation: wl-shield 0.5s cubic-bezier(0.34,1.56,0.64,1) .2s forwards; }
@keyframes wl-shield { to { opacity: 1; transform: scale(1); } }
.cyber-wl .wl-check { stroke-dasharray: 1; stroke-dashoffset: 1; }
.svc-detail.is-active .cyber-wl .wl-check { animation: wl-check 0.45s ease .6s forwards; }
@keyframes wl-check { to { stroke-dashoffset: 0; } }

/* Password manager: key inserts left->right, twists, then withdraws out of frame;
   only THEN does the lock unlatch and sparks burst (plays once) */
.cyber-lock svg { width: 30px; height: 26px; }
.cyber-lock .cl-key { transform-box: view-box; transform-origin: 19px 15.5px; opacity: 0; }
.svc-detail.is-active .cyber-lock .cl-key { animation: cl-key 2.2s cubic-bezier(0.4,0,0.2,1) .3s forwards; }
@keyframes cl-key {
  0%   { opacity: 0; transform: translateX(-13px) rotate(0deg); }
  8%   { opacity: 1; transform: translateX(-13px) rotate(0deg); }
  36%  { opacity: 1; transform: translateX(0) rotate(0deg); }
  54%  { opacity: 1; transform: translateX(0) rotate(22deg); }
  66%  { opacity: 1; transform: translateX(0) rotate(22deg); }
  78%  { opacity: 1; transform: translateX(0) rotate(0deg); }
  92%, 100% { opacity: 0; transform: translateX(-16px) rotate(0deg); }
}
.cyber-lock .cl-shackle { transform-box: view-box; transform-origin: 22px 10px; }
.svc-detail.is-active .cyber-lock .cl-shackle { animation: cl-open 0.55s cubic-bezier(0.34,1.56,0.64,1) 2.4s forwards; }
@keyframes cl-open { to { transform: rotate(72deg); } }
.cl-spark { position: absolute; left: 62%; top: 41%; width: 2.5px; height: 7px; margin-left: -1.25px; background: var(--green); border-radius: 2px; opacity: 0; transform-origin: center bottom; transform: rotate(var(--a)) translateY(-3px) scaleY(0.2); }
.svc-detail.is-active .cyber-lock .cl-spark { animation: cl-spark 0.6s ease-out 2.75s forwards; }
@keyframes cl-spark {
  0% { opacity: 1; transform: rotate(var(--a)) translateY(-3px) scaleY(0.3); }
  60% { opacity: 1; transform: rotate(var(--a)) translateY(-10px) scaleY(1); }
  100% { opacity: 0; transform: rotate(var(--a)) translateY(-13px) scaleY(0.5); }
}
@media (prefers-reduced-motion: reduce) {
  .svc-detail.is-active .cyber-row { animation: none; opacity: 1; transform: none; }
  .svc-detail.is-active .cyber-germ svg { animation: none; }
  .svc-detail.is-active .cyber-wl .wl-shield { animation: none; opacity: 1; transform: none; }
  .svc-detail.is-active .cyber-wl .wl-check { animation: none; stroke-dashoffset: 0; }
  .svc-detail.is-active .cyber-lock .cl-shackle { animation: none; transform: rotate(72deg); }
  .svc-detail.is-active .cyber-lock .cl-key { animation: none; opacity: 0; }
  .cl-spark { display: none; }
}

/* --- Website & Domain Hosting card: a browser window loads the practice site --- */
.host { padding: 2px 0 4px; }
.host-browser { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--white); box-shadow: 0 6px 16px rgba(41,66,72,0.10); }
.host-bar { display: flex; align-items: center; gap: 6px; padding: 8px 10px; background: var(--teal-light); }
.host-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(41,66,72,0.18); }
.host-url { margin-left: 6px; display: inline-flex; align-items: center; gap: 5px; background: var(--white); border-radius: 20px; padding: 4px 11px; font-size: 10.5px; font-weight: 600; color: var(--text-secondary); }
.host-url svg { width: 15px; height: 15px; color: var(--green); }
/* padlock in the address bar starts open, then snaps shut as the load bar finishes */
.host-lock { position: relative; display: inline-flex; }
/* shackle is hinged on the RIGHT leg (planted in the body); the left side swings
   down along its curve and clicks into the pad */
.hl-shackle { transform-box: view-box; transform-origin: 16px 10.5px; transform: rotate(72deg); }
.svc-detail.is-active .hl-shackle { animation: hl-lock 0.55s cubic-bezier(0.34,1.7,0.5,1) 1.4s forwards; }
@keyframes hl-lock { to { transform: rotate(0deg); } }
/* small spark burst the moment it clicks shut (same idea as the password unlock) */
.hl-spark { position: absolute; left: 50%; top: 22%; width: 1.6px; height: 4.5px; margin-left: -0.8px; background: var(--green); border-radius: 2px; opacity: 0; transform-origin: center bottom; transform: rotate(var(--a)) translateY(-1px) scaleY(0.2); }
.svc-detail.is-active .host-lock .hl-spark { animation: hl-spark 0.5s ease-out 1.8s forwards; }
@keyframes hl-spark {
  0% { opacity: 1; transform: rotate(var(--a)) translateY(-1px) scaleY(0.3); }
  60% { opacity: 1; transform: rotate(var(--a)) translateY(-7px) scaleY(1); }
  100% { opacity: 0; transform: rotate(var(--a)) translateY(-9px) scaleY(0.5); }
}
/* load bar sweeps left to right once, holds, then dissipates */
.host-load { position: relative; height: 3px; background: var(--green-light); overflow: hidden; }
.host-load::after { content: ''; position: absolute; top: 0; left: 0; height: 100%; width: 0; background: var(--green); }
.svc-detail.is-active .host-load::after { animation: host-load 1.9s ease forwards; }
@keyframes host-load {
  0% { width: 0; opacity: 1; }
  70% { width: 100%; opacity: 1; }
  84% { width: 100%; opacity: 1; }
  100% { width: 100%; opacity: 0; }
}
/* healthcare-themed page content (no text) */
.host-page { padding: 12px 14px 14px; }
.host-hd { display: flex; align-items: center; gap: 5px; margin-bottom: 10px; }
.host-logo { width: 20px; height: 20px; border-radius: 6px; background: var(--green); color: #fff; display: grid; place-items: center; }
.host-logo svg { width: 13px; height: 13px; }
.host-navdot { width: 14px; height: 4px; border-radius: 2px; background: var(--border); }
.host-navdot:first-of-type { margin-left: auto; }
.host-hero { height: 42px; border-radius: 8px; background: var(--green-light); color: var(--green-dark); display: grid; place-items: center; margin-bottom: 10px; }
.host-hero svg { width: 48px; height: 26px; }
.host-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.host-tile { height: 40px; border-radius: 8px; background: var(--teal-light); color: var(--green-dark); display: grid; place-items: center; }
.host-tile svg { width: 20px; height: 20px; }
.host-hd, .host-hero, .host-tile { opacity: 0; transform: translateY(6px); }
.svc-detail.is-active .host-hd { animation: host-rise 0.5s cubic-bezier(0.22,1,0.36,1) .3s forwards; }
.svc-detail.is-active .host-hero { animation: host-rise 0.5s cubic-bezier(0.22,1,0.36,1) .45s forwards; }
.svc-detail.is-active .host-tile { animation: host-rise 0.5s cubic-bezier(0.22,1,0.36,1) forwards; }
.svc-detail.is-active .host-tile:nth-child(1) { animation-delay: .6s; }
.svc-detail.is-active .host-tile:nth-child(2) { animation-delay: .7s; }
.svc-detail.is-active .host-tile:nth-child(3) { animation-delay: .8s; }
@keyframes host-rise { to { opacity: 1; transform: none; } }
.host-chips { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
.host-chips span { display: inline-flex; align-items: center; gap: 5px; background: var(--green-light); color: var(--green-dark); font-size: 11px; font-weight: 600; padding: 5px 11px; border-radius: 20px; opacity: 0; }
.host-chips svg { width: 12px; height: 12px; }
.svc-detail.is-active .host-chips span { animation: host-rise 0.45s ease forwards; }
.svc-detail.is-active .host-chips span:nth-child(1) { animation-delay: .9s; }
.svc-detail.is-active .host-chips span:nth-child(2) { animation-delay: 1s; }
.svc-detail.is-active .host-chips span:nth-child(3) { animation-delay: 1.1s; }
.host-updot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); animation: mon-blip 1.6s ease-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .svc-detail.is-active .host-load::after { animation: none; width: 100%; opacity: 0; }
  .svc-detail.is-active .hl-shackle { animation: none; transform: none; }
  .hl-spark { display: none; }
  .svc-detail.is-active .host-hd, .svc-detail.is-active .host-hero, .svc-detail.is-active .host-tile, .svc-detail.is-active .host-chips span { animation: none; opacity: 1; transform: none; }
  .host-updot { animation: none; }
}

/* --- Software Patching card: each target patches in turn, Pending -> Patched --- */
.patch { display: flex; flex-direction: column; gap: 13px; padding: 4px 2px 8px; }
.patch-row { display: flex; align-items: center; gap: 11px; opacity: 0; transform: translateY(8px); }
.svc-detail.is-active .patch-row { animation: patch-in 0.45s cubic-bezier(0.22,1,0.36,1) var(--d, 0s) forwards; }
@keyframes patch-in { to { opacity: 1; transform: none; } }
.patch-ic { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 10px; background: var(--green-light); color: var(--green-dark); display: grid; place-items: center; }
.patch-ic svg { width: 22px; height: 22px; }
.patch-meta { flex: 1; min-width: 0; }
.patch-name { display: block; font-size: 12.5px; font-weight: 700; color: var(--text-primary); margin-bottom: 6px; }
.patch-bar { display: block; height: 6px; border-radius: 4px; background: var(--green-light); overflow: hidden; }
.patch-fill { display: block; height: 100%; width: 0; border-radius: 4px; background: var(--green); }
/* bar fills once (slower) and stays; status flips to Patched and stays */
.svc-detail.is-active .patch-fill { animation: patch-fill 2.4s ease var(--pd, 0s) forwards; }
@keyframes patch-fill { to { width: 100%; } }
.patch-ver { position: relative; flex: 0 0 auto; width: 52px; height: 15px; text-align: right; font-size: 11px; font-weight: 700; }
.pv-old, .pv-new { position: absolute; right: 0; top: 0; white-space: nowrap; }
.pv-old { color: var(--text-muted); }
.pv-new { color: var(--green-dark); opacity: 0; }
.svc-detail.is-active .pv-old { animation: pv-out 0.4s ease calc(var(--pd, 0s) + 2.2s) forwards; }
.svc-detail.is-active .pv-new { animation: pv-in 0.4s ease calc(var(--pd, 0s) + 2.2s) forwards; }
@keyframes pv-out { to { opacity: 0; } }
@keyframes pv-in { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .svc-detail.is-active .patch-row { animation: none; opacity: 1; transform: none; }
  .svc-detail.is-active .patch-fill { animation: none; width: 100%; }
  .svc-detail.is-active .pv-old { animation: none; opacity: 0; }
  .svc-detail.is-active .pv-new { animation: none; opacity: 1; }
}

/* --- Monitoring card --- */
.mon-pulse { display: block; width: 100%; height: 76px; background: var(--green-light); border-radius: 12px; }
.mon-pulse path {
  fill: none; stroke: var(--green); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 16 10; animation: mon-flow 1.1s linear infinite;
}
@keyframes mon-flow { to { stroke-dashoffset: -26; } }
.mon-status { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 13px; font-weight: 600; color: var(--green-dark); }
.mon-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--green); animation: mon-blip 1.6s ease-out infinite; }
@keyframes mon-blip { 0% { box-shadow: 0 0 0 0 rgba(49,169,73,0.5); } 100% { box-shadow: 0 0 0 9px rgba(49,169,73,0); } }
.mon-badge { margin-left: auto; background: var(--green-light); color: var(--green-dark); font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 20px; }

/* --- Responsive: 4 columns -> 2 (tablet) -> 1 (mobile); panel stacks --- */
@media (max-width: 900px) {
  .svc-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .svc-grid { grid-template-columns: 1fr; }
  .svc-panel { padding: 22px 18px; }
  .svc-detail { flex-direction: column; align-items: flex-start; gap: 16px; }
  .svc-visual { width: 100%; }
}

/* --- Reduced motion: no floating tiles, no looping graphics --- */
@media (prefers-reduced-motion: reduce) {
  .svc-tile,
  .voip-waves span,
  .mon-pulse path,
  .mon-dot { animation: none; }
  .svc-tile { transition: none; }
}

/* ============================================================
   SCROLL REVEAL (class added via JS; without JS everything stays visible)
   ============================================================ */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.in-view { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* Testimonials reveal: header text + Google badge fade in (no slide);
   the three testimonial cards slide in from the left, staggered.
   Slowed to 1s (site default is 0.6s) for a gentler entrance. */
.testimonials-header .eyebrow.reveal,
.testimonials-header h2.reveal,
.google-badge.reveal,
.testimonial-card.reveal { transition: opacity 1s ease, transform 1s ease; }
.testimonials-header .eyebrow.reveal,
.testimonials-header h2.reveal,
.google-badge.reveal { transform: none; }
.testimonials-header h2.reveal { transition-delay: 0.08s; }
.google-badge.reveal { transition-delay: 0.16s; }
.testimonial-card.reveal { transform: translateX(-42px); }
.testimonial-card.reveal.in-view { transform: none; }
.testimonials-grid .testimonial-card:nth-child(2) { transition-delay: 0.12s; }
.testimonials-grid .testimonial-card:nth-child(3) { transition-delay: 0.24s; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .hero .container { grid-template-columns: 1fr; }
  .hero-visual { display: none; }
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .why-us .container { grid-template-columns: 1fr; gap: 40px; }
  .service-detail .container { grid-template-columns: 1fr; gap: 40px; }
  .service-detail.reverse .service-panel { order: 0; }
  .contact-lead .container { grid-template-columns: 1fr; gap: 40px; }
  .testimonials-grid { grid-template-columns: repeat(2, 1fr); }
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
  /* 4-across is too cramped on tablet — drop to 2 columns with roomy spacing */
  .contact-details-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .contact-detail { padding: 32px 28px; }
  .contact-detail-email { padding: 0 6px 0 16px; }
  .email-box a { font-size: 13px; }
}

@media (max-width: 768px) {
  :root { --section-pad: 60px 20px; }
  .container { padding: 0 20px; }
  .main-nav { display: none; }
  .main-nav.open {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 72px;
    left: 0; right: 0;
    background: var(--white);
    padding: 24px;
    border-bottom: 1px solid var(--border);
    z-index: 99;
    gap: 16px;
  }
  .mobile-menu-toggle { display: flex; }
  .header-phone { display: none; }
  .header-cta { display: none; }
  .stats-bar .container { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .stat-item { border-right: none; border-bottom: 1px solid rgba(39,145,60,0.18); padding-bottom: 16px; }
  .stat-item:nth-child(even) { border-right: none; }
  .stat-item:last-child, .stat-item:nth-last-child(2) { border-bottom: none; }
  .services-grid { grid-template-columns: 1fr; }
  .testimonials-grid { grid-template-columns: 1fr; }
  .testimonials-header { flex-direction: column; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .contact-details-grid { grid-template-columns: 1fr; }
  .blog-grid { grid-template-columns: 1fr; }
  .cta-actions { flex-direction: column; align-items: center; }
}

/* ============================================================
   SUPPORT PAGE (page-support.php) - four support-option cards
   ============================================================ */
/* Heading block above the cards - matches the contact page lead intro
   (left-aligned, same eyebrow / h1 / paragraph treatment). */
.support-hero {
  background: var(--green-light);
  padding: 88px 0 0;
}
.support-hero .eyebrow { color: var(--green-dark); }
.support-hero h1 { color: var(--text-primary); margin-bottom: 18px; }
.support-hero p {
  color: var(--text-secondary);
  font-size: 16px;
  line-height: 1.7;
  max-width: 460px;
}
.support-options {
  background: linear-gradient(180deg, var(--green-light) 0%, var(--white) 55%);
  padding: 48px 0 88px;
}
.support-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.support-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px 24px;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
  transition: transform 0.2s, box-shadow 0.2s;
}
.support-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.12);
}
/* Entrance: cards fade + slide in, staggered left to right, on page load.
   fill-mode "backwards" holds the hidden state during each card's delay and
   then hands control back to normal styles, so the :hover lift still works. */
@keyframes support-card-in {
  from { opacity: 0; transform: translateX(-28px); }
  to   { opacity: 1; transform: translateX(0); }
}
.support-card {
  animation: support-card-in 0.85s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
.support-card:nth-child(1) { animation-delay: 0.10s; }
.support-card:nth-child(2) { animation-delay: 0.30s; }
.support-card:nth-child(3) { animation-delay: 0.50s; }
.support-card:nth-child(4) { animation-delay: 0.70s; }
@media (prefers-reduced-motion: reduce) {
  .support-card { animation: none; }
}
.support-card-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 18px;
  border-radius: 14px;
  background: var(--green-light);
  color: var(--green-dark);
  display: flex;
  align-items: center;
  justify-content: center;
}
.support-card-icon svg { width: 28px; height: 28px; }
.support-card-logo { width: 30px; height: 30px; display: block; }
.support-card h5 {
  color: var(--text-primary);
  font-size: 17px;
  font-weight: 600;
  margin-bottom: 8px;
}
.support-card-desc {
  /* equal height so the action pills line up across all four cards */
  min-height: 68px;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 20px;
}
/* The action pills reuse the contact page's email-pill formatting, full width. */
.support-card .contact-detail-email {
  width: 100%;
  justify-content: space-between;
}
/* Clickable pill for the Live chat and Support portal actions (same look). */
.support-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  width: 100%;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--teal-light);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--green-dark);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.support-action:hover {
  background: var(--green);
  color: var(--white);
  border-color: var(--green);
}
.support-action svg { width: 15px; height: 15px; flex-shrink: 0; }
/* Grey helper text sits at the very bottom of the live chat card. */
.support-chat-hint {
  margin-top: auto;
  padding-top: 14px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-muted);
}
@media (max-width: 1199px) {
  .support-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .support-grid { grid-template-columns: 1fr; }
  .support-card-desc { min-height: 0; }
}