/* ==========================================================================
   Globe Edge Australia — Homepage stylesheet
   Loads AFTER Bootstrap 5.3 (see index.html <head>). Bootstrap supplies the
   grid system, buttons and utility classes; this file supplies brand theme
   tokens plus the bespoke components/animations Bootstrap has no equivalent
   for (marquee, tooltip, testimonial slider, mega-menu, reveal-on-scroll,
   dashboard mock-up, hero parallax).
   ========================================================================== */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css');
/* ---------- 1. Brand tokens ---------- */
:root{
  --blue:#1476BB;
  --blue-dark:#16223F;
  --blue-tint:#EAF2FF;
  --blue-tint-2:#F4F8FF;
  --orange:#F0AD00;
  --ink:#1F2937;
  --ink-soft:#667085;
  --line:#E7EAF0;
  --white:#FFFFFF;
  --radius:12px;

  /* Responsive spacing + type scale: one source of truth for the homepage.
     Use these instead of per-section magic numbers. */
  --gutter:clamp(20px,4vw,32px);                 /* page side padding */
  --section-y:clamp(56px,4vw + 36px,86px);       /* vertical padding of a full section */
  --section-y-sm:clamp(40px,5vw,64px);
  --head-gap:clamp(32px,5vw,56px);               /* section heading -> content */
  --fs-hero:clamp(30px,2.2vw + 22px,44px);

  /* Tokens used by the shared consultation popup (footer.html). They were only
     defined under body.page-about / page-contact, so on the homepage the popup's
     close button, success box and input focus colour resolved to nothing. */
  --tint:#EEF5FB;
  --gold-soft:#FFF3DA;
  --blue-deep:#0F5A8F;

  /* AllWin Community Services brand */
  --allwin-purple-deep:#691979;
  --allwin-purple:#561A64;
  --allwin-purple-mid:#9A65A5;
  --allwin-purple-tint:#F3EAF6;
  --allwin-blue-accent:#56AFD5;

  /* EEdge dashboard purple theme */
  --dash-purple-1:#6A2276;
  --dash-purple-2:#8E24AA;
  --dash-purple-3:#AB47BC;
  --dash-purple-4:#C38AD2;
  --dash-bg:#F6F3F8;

  /* Embedded "gea-mockup" presentation palette */
  --gea-navy-deep:#050b1a;
  --gea-gold:#e8b84b;
  --gea-eedge-purple:#5b2a86;
  --gea-eedge-purple-dark:#3d1c5c;
  --gea-eedge-bg:#f4f0fb;
  --gea-allwin-blue:#2196c9;
  --gea-allwin-red:#e0294b;
  --gea-allwin-purple:#5b2a86;
  --gea-allwin-bg:#f2eefb;
  --gea-ink:#1b1330;
  --gea-ink-soft:#5c5470;

  /* Bootstrap theme hand-off: keep Bootstrap's own components (buttons,
     focus rings, links) in the Globe Edge palette instead of Bootstrap's
     defaults, so we lean on Bootstrap's engine rather than re-styling it. */
  --bs-primary:var(--blue) !important;
  --bs-body-font-family:'Inter',sans-serif;
  --bs-body-color:var(--ink);
  --bs-link-color:inherit;
  --bs-link-hover-color:inherit;
}

/* ---------- 2. Base / reset ---------- */
*{margin:0;padding:0;box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
img,svg,video{max-width:100%;height:auto;}
/* Horizontal-overflow guard (safety net only).
   The real overflow sources were fixed where they originate (mega-menu anchoring in
   header.html, the 5-up feature row, footer gutters). `overflow-x:clip` is used instead
   of `hidden` because it does NOT create a scroll container, so the sticky header keeps
   working in Safari/iOS. Browsers without `clip` fall back to `hidden` on <html>. */
body{overflow-x:clip;}
@supports not (overflow:clip){html{overflow-x:hidden;}}
body{font-family:'Inter',sans-serif;color:var(--ink);background:#fff;-webkit-font-smoothing:antialiased;}
h1,h2,h3,.logo-text{font-family:'Poppins',sans-serif;}
a{text-decoration:none;color:inherit;}
ul{list-style:none;}
section{padding:var(--section-y) 0;}
/* Sticky header offset for in-page anchors (#faq, #services, #industries...) */
section[id]{scroll-margin-top:calc(var(--header-h,72px) + 8px);}
.wrap{max-width:1200px;margin:0 auto;padding:0 var(--gutter);}
/* Bootstrap's g-5 gutter is 3rem, which is wider than the mobile page gutter and made
   rows poke past the viewport once the gutter shrank. Scale it with the viewport. */
.wrap .row.g-5{--bs-gutter-x:clamp(1rem,4vw,3rem);--bs-gutter-y:clamp(1.75rem,4vw,3rem);}
h1,h2,h3,h4,p,li{overflow-wrap:break-word;}
a,button,[role="button"]{touch-action:manipulation;} /* no double-tap zoom / 300ms delay on iOS */

.skip-link{position:absolute;left:16px;top:-80px;z-index:2000;background:var(--blue-dark);color:#fff;padding:12px 18px;border-radius:8px;font-weight:600;font-size:14px;transition:top .2s ease;}
.skip-link:focus{top:12px;}

/* Baseline focus-visible ring for any interactive element that doesn't
   already define its own (most components above do; this is the fallback). */
/* Keyboard focus ring. :where() keeps specificity at 0 so any component that defines
   its own focus style still wins. */
:where(a,button,input,textarea,select,[tabindex]):focus-visible{outline:2px solid var(--blue);outline-offset:3px;}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:0.001ms !important;animation-iteration-count:1 !important;transition-duration:0.001ms !important;scroll-behavior:auto !important;}
}

.eyebrow{font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--blue);margin-bottom:12px;}

/* Icon helper reused across Services / Mega menus / Vision cards */
.icon-badge{width:65px;height:65px;border-radius:12px;background:var(--blue-tint);display:flex;align-items:center;justify-content:center;flex:0 0 auto;}
.icon-badge svg{stroke:var(--blue);}

/* Small utility classes replacing repeated inline styles from the source file */
.text-eedge{color:var(--dash-purple-1);}
.text-allwin{color:var(--allwin-purple-mid);}
.flex-shrink-0{flex-shrink:0;}

/* ---------- 3. Bootstrap button theming ----------
   We use Bootstrap's real .btn engine (it is fully driven by --bs-btn-*
   custom properties in 5.3) and simply feed it the Globe Edge brand values,
   instead of re-implementing button CSS from scratch. */
.btn{
  --bs-btn-font-family:'Poppins',sans-serif;
  --bs-btn-font-weight:600;
  --bs-btn-font-size:14.5px;
  --bs-btn-border-radius:32px;
  --bs-btn-padding-x:26px;
  --bs-btn-padding-y:14px;
  --bs-btn-border-width:1.5px;
  gap:8px;
}
.btn-primary{
  --bs-btn-bg:var(--blue);
  --bs-btn-border-color:var(--blue);
  --bs-btn-hover-bg:#0F5A8F;
  --bs-btn-hover-border-color:#0F5A8F;
  --bs-btn-active-bg:#0F5A8F;
  --bs-btn-active-border-color:#0F5A8F;
  --bs-btn-color:#fff;
  --bs-btn-hover-color:#fff;
}
.btn-white{
  --bs-btn-bg:#fff;
  --bs-btn-border-color:#fff;
  --bs-btn-color:var(--blue-dark);
  --bs-btn-hover-bg:#EDF1F8;
  --bs-btn-hover-border-color:#EDF1F8;
  --bs-btn-hover-color:var(--blue-dark);
}

/* ==========================================================================
   5. Hero
   ========================================================================== */
.hero{background:linear-gradient(180deg,var(--blue-tint-2) 0%, var(--blue-tint) 100%);}
.hero h1{font-size:var(--fs-hero);line-height:1.18;font-weight:700;color:var(--blue-dark);margin-bottom:20px;letter-spacing:-0.01em;}
.hero h1 span{color:var(--blue);}
.hero p.lead{font-size:16px;color:var(--ink-soft);line-height:1.7;margin-bottom:30px;}

.hero-top{padding:clamp(24px,6vw,72px) 0 clamp(24px,5vw,64px);}   /* was missing on desktop: .hero is py-0 */
.hero .row.g-5{--bs-gutter-y:clamp(1rem,4vw,3rem);}               /* stacked text->video gap on mobile */
/* isolation + overflow keep the rounded video corners in Safari while the parent animates a transform */
.hero-art{position:relative;display:flex;align-items:center;justify-content:center;isolation:isolate;overflow:hidden;border-radius:16px;}
@media (min-width:981px){.hero-art{min-height:440px;}}   /* fixed height only for the two-column layout */
.hero-art img,.hero-art video{border-radius:16px;width:100%;display:block;}

/* Hero load-in (fade + slide up) */
.hero-copy > *{opacity:0;transform:translateY(22px);animation:heroFadeUp .85s cubic-bezier(.19,1,.22,1) forwards;}
.hero-copy .eyebrow{animation-delay:.30s;}
.hero-copy h1{animation-delay:.16s;}
.hero-copy p.lead{animation-delay:.3s;}
.hero-copy .hero-ctas{animation-delay:.44s;}
.hero-art{opacity:0;transform:translateY(26px);animation:heroFadeUp 1s cubic-bezier(.19,1,.22,1) forwards;animation-delay:.32s;}
@keyframes heroFadeUp{to{opacity:1;transform:translateY(0);}}

@media (prefers-reduced-motion: reduce){
  .hero-copy > *, .hero-art{animation:none !important;opacity:1 !important;transform:none !important;}
}

@media (max-width:980px){
  .hero-art{max-width:480px;margin:0 auto;width:100%;}
}
@media (max-width:640px){
  .hero p.lead{font-size:15px;}
  .hero-ctas{flex-wrap:wrap;}
}

/* ==========================================================================
   6. Premium text reveal (Industries / Services headings / Vision)
   ========================================================================== */
.reveal-item{
  opacity:0;transform:translateX(-52px);
  transition:opacity .9s cubic-bezier(.19,.84,.35,1), transform .9s cubic-bezier(.19,.84,.35,1);
}
.reveal-group.is-visible .reveal-item{opacity:1;transform:translateX(0);}
.reveal-group.is-visible .reveal-item:nth-child(1){transition-delay:0s;}
.reveal-group.is-visible .reveal-item:nth-child(2){transition-delay:.18s;}
.reveal-group.is-visible .reveal-item:nth-child(3){transition-delay:.36s;}
.reveal-group.is-visible .reveal-item:nth-child(4){transition-delay:.54s;}

@media (max-width:640px){.reveal-item{transform:translateX(-20px);}} /* shorter travel on phones */
@media (prefers-reduced-motion: reduce){
  .reveal-item{opacity:1 !important;transform:none !important;transition:none !important;}
}

/* ==========================================================================
   7. Services
   ========================================================================== */
.services-intro h2{font-size:clamp(24px,2.4vw + 16px,29px);font-weight:700;color:var(--blue-dark);line-height:1.28;margin-bottom:14px;}
.services-intro p{color:var(--ink-soft);font-size:14.5px;line-height:1.7;margin-bottom:20px;}
.services-intro .lnk{color:var(--blue);font-weight:600;font-size:14px;display:inline-flex;align-items:center;gap:6px;}

/* services-grid now uses Bootstrap row-cols-* for the column count; this
   block only supplies card styling, hover treatment and reveal animation. */
.services-grid{--bs-gutter-x:20px;--bs-gutter-y:20px;}
/* the card <a> is inline by default, so h-100 on the card could not stretch in Safari */
.services-grid .col > a{display:block;height:100%;}
.icon-badge img{max-width:100%;max-height:100%;object-fit:contain;display:block;}

/* Section rhythm: two consecutive white sections used to stack 86px + 86px of padding
   (a ~170px dead band). Each side of a shared edge now contributes half. */
.bizsol-section{padding-bottom:calc(var(--section-y) / 2);}
#services{padding-top:calc(var(--section-y) / 2);padding-bottom:calc(var(--section-y) / 2);}
.svc-card{
  position:relative;overflow:hidden;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px 22px;
  opacity:0;transform:translateY(60px) scale(.95);
  transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s cubic-bezier(.2,.8,.2,1), border-color .3s ease;
}
.svc-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--blue),var(--blue));transform:scaleX(0);transform-origin:left;transition:transform .25s ease;}
.svc-card:hover::before{transform:scaleX(1);}
.svc-card .icon-badge{margin-bottom:16px;transition:transform .3s ease, background .2s ease;}
.svc-card:hover .icon-badge{transform:rotate(-8deg) scale(1.08);}
.svc-card:hover .icon-badge svg{stroke:#fff;}
.svc-card:hover{
  border-color:transparent;box-shadow:0 30px 60px rgba(12,42,95,.16), 0 0 42px rgba(20,118,187,.32);
  transform:translateY(-8px) scale(1.03);
}
.svc-card h3{font-size:15px;font-weight:600;color:var(--blue-dark);margin-bottom:8px;transition:color .2s ease;}
.svc-card:hover h3{color:var(--blue);}
.svc-card p{font-size:13px;color:var(--ink-soft);line-height:1.6;}

/* Scroll-triggered entrance: bottom-to-top fade + scale, staggered per card */
.services-grid.is-visible .svc-card{animation:bizsolReveal .9s cubic-bezier(.22,1,.36,1) forwards;}
.services-grid.is-visible .svc-card:nth-child(1){animation-delay:0s;}
.services-grid.is-visible .svc-card:nth-child(2){animation-delay:.1s;}
.services-grid.is-visible .svc-card:nth-child(3){animation-delay:.2s;}
.services-grid.is-visible .svc-card:nth-child(4){animation-delay:.3s;}
.services-grid.is-visible .svc-card:nth-child(5){animation-delay:.4s;}
.services-grid.is-visible .svc-card:nth-child(6){animation-delay:.5s;}
.services-grid.is-visible .svc-card:nth-child(7){animation-delay:.6s;}
.services-grid.is-visible .svc-card:nth-child(8){animation-delay:.7s;}

@media (prefers-reduced-motion: reduce){
  .svc-card{opacity:1 !important;transform:none !important;animation:none !important;}
  .svc-card:hover{transform:none !important;}
}

/* ==========================================================================
   8. Industries We Serve (icon marquee + floating tooltip)
   Variables scoped locally so they don't leak into the page's global theme.
   ========================================================================== */
.industries-section{
  --ind-blue:#0057B8;
  --ind-blue-deep:#003E86;
  --ind-gold:#F4B400;
  --ind-lightblue:#00A6E8;
  --ind-white:#FFFFFF;
  --ind-section-bg:#F8FBFF;
  --ind-border:#E6EEF8;
  --ind-ink:#0B1E33;
  --ind-muted:#5B7290;

  position:relative;overflow:visible;
  padding:var(--section-y) var(--gutter);
  background:
    radial-gradient(60% 50% at 15% 8%, rgba(0,166,232,0.07) 0%, rgba(0,166,232,0) 70%),
    radial-gradient(50% 45% at 88% 92%, rgba(244,180,0,0.08) 0%, rgba(244,180,0,0) 70%),
    var(--ind-section-bg);
  color:var(--ind-ink);
}
.industries-head{max-width:680px;margin:0 auto var(--head-gap);text-align:center;}
.industries-section .eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:'Plus Jakarta Sans', sans-serif;font-size:13px;font-weight:700;
  letter-spacing:0.14em;text-transform:uppercase;color:var(--ind-blue);
  background:#EAF3FE;border:1px solid var(--ind-border);padding:8px 16px;border-radius:999px;margin-bottom:22px;
}
.industries-section .eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ind-gold);}
.industries-head h2{
  font-family:'Plus Jakarta Sans', sans-serif;font-weight:800;font-size:clamp(32px, 4.4vw, 48px);
  line-height:1.12;letter-spacing:-0.02em;margin:0 0 18px;color:var(--ind-ink);
}
.industries-head h2 span{color:#1476BB;position:relative;}
.industries-head p{font-size:clamp(15.5px,.4vw + 14px,17px);line-height:1.65;color:var(--ind-muted);margin:0;font-weight:500;}

/* Icon Marquee */
.marquee-wrap{
  position:relative;display:flex;flex-direction:column;overflow-x:hidden;overflow-y:visible;
  padding:24px 0 24px;
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
  mask-image:linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
}
.marquee-row{display:flex;align-items:flex-start;width:max-content;gap:26px;will-change:transform;}
/* Scroll is driven by JS (js/main.js) via requestAnimationFrame, not a CSS
   animation — see that file for why. .paused is toggled by JS itself when
   a tooltip is open; hover-pause and reduced-motion are also read directly
   in JS, so no CSS animation-play-state/keyframes are needed here. */

/* Icon item */
.icon-item{position:relative;flex:0 0 auto;cursor:pointer;}
.icon-box{
  position:relative;width:104px;height:104px;border-radius:22px;
  background:var(--ind-white);border:1px solid var(--ind-border);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 4px rgba(11,30,51,0.03), 0 10px 24px rgba(11,30,51,0.05);
  transform:translateZ(0) scale(1) rotate(0deg);
  transition:transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s ease-in-out, border-color .45s ease-in-out;
  /* Hit-testing happens on the parent .icon-item, not this box, so a hover
     scale/rotate here can never spill into a neighbouring icon and steal
     its hover/mouseenter events (which used to make the tooltip flicker). */
  pointer-events:none;
}
.icon-box svg{width:46px;height:46px;display:block;pointer-events:none;}
.icon-box img{width:78px;height:78px;border-radius:50%;object-fit:cover;display:block;pointer-events:none;}
.icon-item.is-active .icon-box,
.icon-item:hover .icon-box{
  border-color:rgba(0,87,184,0.4);
  box-shadow:0 4px 10px rgba(0,87,184,0.08), 0 22px 40px rgba(0,87,184,0.20), 0 0 0 6px rgba(0,166,232,0.12);
}

/* Floating info card — a single shared tooltip appended to <body> and
   positioned with JS via getBoundingClientRect(); position:fixed at the
   body level means it can never be clipped by the marquee's overflow, and
   it can freely flip above/below and clamp to the viewport. */
.industries-tooltip{
  position:fixed;left:0;width:max-content;min-width:180px;max-width:250px;
  background:var(--ind-white, #fff);border:1px solid var(--ind-border, #E6EEF8);
  border-radius:12px;padding:16px 18px 15px;
  box-shadow:0 4px 10px rgba(11,30,51,0.05), 0 20px 42px rgba(11,30,51,0.16);
  opacity:0;visibility:hidden;pointer-events:none;
  transform:translate(-50%, 8px) scale(.97);transform-origin:bottom center;
  transition:opacity .22s cubic-bezier(.2,.8,.2,1), transform .22s cubic-bezier(.2,.8,.2,1), visibility .22s;
  will-change:transform, opacity;backface-visibility:hidden;z-index:9999;
}
.industries-tooltip.is-open{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%, 0) scale(1);}

/* Default: tooltip sits above the icon, small centred arrow points down */
.industries-tooltip::after{
  content:"";position:absolute;left:var(--arrow-left, 50%);top:100%;transform:translateX(-50%);
  width:14px;height:14px;background:var(--ind-white, #fff);
  border-right:1px solid var(--ind-border, #E6EEF8);border-bottom:1px solid var(--ind-border, #E6EEF8);
  border-radius:0 0 3px 0;clip-path:polygon(0 0, 100% 0, 100% 100%);pointer-events:none;
}
/* Flipped: tooltip sits below the icon, arrow points up */
.industries-tooltip.tooltip-below{transform-origin:top center;transform:translate(-50%, -8px) scale(.97);}
.industries-tooltip.tooltip-below.is-open{transform:translate(-50%, 0) scale(1);}
.industries-tooltip.tooltip-below::after{
  top:auto;bottom:100%;border-right:none;border-bottom:none;
  border-left:1px solid var(--ind-border, #E6EEF8);border-top:1px solid var(--ind-border, #E6EEF8);
  border-radius:3px 0 0 0;clip-path:polygon(0 100%, 100% 100%, 0 0);
}
.industries-tooltip h3,.industries-tooltip h4{font-family:'Plus Jakarta Sans', sans-serif;font-size:15.5px;font-weight:700;color:var(--ind-ink, #0B1E33);margin:0 0 6px;letter-spacing:-0.01em;}
.industries-tooltip p{font-size:13px;line-height:1.5;color:var(--ind-muted, #5B7290);margin:0 0 12px;font-weight:500;}
.industries-tooltip .learn-more{display:inline-flex;align-items:center;gap:5px;font-family:'Plus Jakarta Sans', sans-serif;font-size:12.5px;font-weight:700;color:var(--ind-blue, #0057B8);transition:gap .3s ease;}
.industries-tooltip.is-open .learn-more{gap:8px;}

@media (max-width:1024px){
  .icon-box{width:88px;height:88px;border-radius:20px;}
  .icon-box svg{width:40px;height:40px;}
  .icon-box img{width:66px;height:66px;}
  .marquee-row{gap:20px;}
  .industries-tooltip{max-width:220px;}
}
@media (max-width:640px){
  .marquee-wrap{
    padding:52px 0 20px;
    -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 3%, #000 97%, transparent 100%);
    mask-image:linear-gradient(90deg, transparent 0%, #000 3%, #000 97%, transparent 100%);
  }
  .icon-box{width:74px;height:74px;border-radius:18px;}
  .icon-box svg{width:34px;height:34px;}
  .icon-box img{width:56px;height:56px;}
  .marquee-row{gap:16px;}
  .industries-tooltip{min-width:160px;max-width:190px;padding:14px 16px 13px;}
  .industries-tooltip h3,.industries-tooltip h4{font-size:14px;}
  .industries-tooltip p{font-size:12px;}
}
@media (prefers-reduced-motion: reduce){
  /* js/main.js checks this same media query every frame and simply stops
     advancing the marquee's transform when it matches, so there's no CSS
     animation left here to disable. */
  .marquee-wrap{overflow-x:auto;-webkit-mask-image:none;mask-image:none;}
  .industries-tooltip{transition:opacity .01ms, visibility .01ms;}
}

/* ==========================================================================
   9. Our Business Solutions (3-card layout)
   ========================================================================== */
.bizsol-head{max-width:640px;margin:0 auto 56px;text-align:center;}
.bizsol-head .eyebrow{justify-content:center;display:inline-flex;}
.bizsol-head h2{font-size:clamp(28px, 3.6vw, 40px);font-weight:700;color:var(--blue-dark);margin-bottom:14px;letter-spacing:-0.01em;}
.bizsol-head p{font-size:16px;line-height:1.65;color:var(--ink-soft);}

/* bizsol-grid now uses Bootstrap row-cols-* for column count; only card
   styling, hover treatment and the reveal animation remain here. */
.bizsol-grid{--bs-gutter-x:32px;--bs-gutter-y:32px;align-items:stretch;}
.bizsol-card{
  display:flex;flex-direction:column;background:var(--white);border:1px solid var(--line);
  border-radius:20px;overflow:hidden;opacity:0;transform:translateY(60px) scale(.95);
  transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s cubic-bezier(.2,.8,.2,1), border-color .3s ease;
  height:100%;
}
@keyframes bizsolReveal{to{opacity:1;transform:translateY(0) scale(1);}}
.bizsol-grid.is-visible .bizsol-card{animation:bizsolReveal .9s cubic-bezier(.22,1,.36,1) forwards;}
.bizsol-grid.is-visible .bizsol-card:nth-child(1){animation-delay:0s;}
.bizsol-grid.is-visible .bizsol-card:nth-child(2){animation-delay:.18s;}
.bizsol-grid.is-visible .bizsol-card:nth-child(3){animation-delay:.36s;}
.bizsol-card:hover{transform:translateY(-8px) scale(1.03);box-shadow:0 30px 60px rgba(12,42,95,.18);border-color:transparent;}
#globedge-nt:hover{box-shadow:0 30px 60px rgba(12,42,95,.16), 0 0 42px rgba(20,118,187,.38);}
#eedge:hover{box-shadow:0 30px 60px rgba(12,42,95,.16), 0 0 42px rgba(142,36,170,.35);}
#allwin:hover{box-shadow:0 30px 60px rgba(12,42,95,.16), 0 0 42px rgba(105,25,121,.35);}
@media (prefers-reduced-motion: reduce){
  .bizsol-card{opacity:1 !important;transform:none !important;animation:none !important;}
  .bizsol-card:hover{transform:none !important;}
}

.bizsol-media{position:relative;width:100%;aspect-ratio:4/3;overflow:hidden;background:#F2F6FC;}
.bizsol-media img,.bizsol-media video{width:100%;height:100%;object-fit:cover;display:block;transition:transform .45s cubic-bezier(.2,.8,.2,1);}
.bizsol-card:hover .bizsol-media img,
.bizsol-card:hover .bizsol-media video{transform:scale(1.06);}
.bizsol-tag{
  position:absolute;top:16px;left:16px;font-family:'Poppins',sans-serif;font-size:11.5px;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;padding:6px 14px;border-radius:999px;
  background:rgba(255,255,255,.92);backdrop-filter:blur(2px);
}
.bizsol-tag.tag-blue{color:var(--blue);}
.bizsol-tag.tag-purple{color:#8E24AA;}
.bizsol-tag.tag-magenta{color:#691979;}

.bizsol-body{padding:28px 26px 30px;display:flex;flex-direction:column;flex:1;}
.bizsol-body h3{font-family:'Poppins',sans-serif;font-size:19px;font-weight:700;color:var(--blue-dark);margin-bottom:10px;letter-spacing:-0.01em;}
.bizsol-body p{font-size:14px;line-height:1.65;color:var(--ink-soft);margin-bottom:22px;flex:1;}
.bizsol-link{display:inline-flex;align-items:center;gap:7px;font-family:'Poppins',sans-serif;font-size:13.5px;font-weight:600;color:var(--blue);align-self:flex-start;transition:gap .25s ease;}
.bizsol-card:hover .bizsol-link{gap:11px;}
.bizsol-link svg{width:15px;height:15px;}

@media (max-width:980px){
  .bizsol-section{padding:76px 0 84px;}
}

/* ==========================================================================
   10. Embedded group mock-up: Globe Edge NT | EEdge | AllWin
   ========================================================================== */
#gea-mockup{margin-top:clamp(40px,5vw,64px);}
#gea-mockup .presentation-wrap{max-width:1360px;margin:0 auto;}
/* The whole panel is wrapped in an <a>; make it a block so the left panel really is full height */
#gea-mockup .brand-panel > [class*="col-"] > a{display:block;height:100%;color:inherit;}
#gea-mockup .brand-panel a:focus-visible{outline:3px solid var(--blue);outline-offset:4px;border-radius:20px;}

/* brand-panel now uses Bootstrap row/col for the left/right split; this
   block supplies the shell chrome only. */
#gea-mockup .brand-panel{
  border-radius:26px;overflow:hidden;
  box-shadow:0 30px 60px -18px rgba(20,15,50,0.32), 0 4px 12px rgba(20,15,50,0.10);
  background:#d9d9e3;padding:22px;min-height:680px;
}
#gea-mockup .right-column{display:flex;flex-direction:column;justify-content:center;gap:24px;min-height:100%;}
#gea-mockup .panel-section{border-radius:20px;overflow:hidden;position:relative;display:flex;flex-direction:column;box-shadow:0 10px 24px -6px rgba(20,15,50,0.16);height:100%;flex:1 1 0%;}

/* Globe Edge NT (left, full height) */
#gea-mockup .panel-globe{
  background-image:linear-gradient(180deg, rgba(3,8,20,0.35) 0%, rgba(3,8,20,0.68) 100%), url("../images/nt.png");
  background-repeat:no-repeat;
  background-position:center center;
  background-size:cover;
  background-color:var(--gea-navy-deep);
  color:#fff;padding:32px 36px 30px;justify-content:space-between;
  box-sizing:border-box;
}
#gea-mockup .globe-brand{display:flex;align-items:center;gap:16px;margin-bottom:8px;}
#gea-mockup .globe-mark{
  width:58px;height:58px;border-radius:50%;border:2px solid rgba(255,255,255,0.85);
  display:flex;align-items:center;justify-content:center;position:relative;
  background:radial-gradient(circle at 35% 35%, #1c2f52, #0a1224 70%);flex-shrink:0;
}
#gea-mockup .globe-mark i{font-size:24px;color:#fff;}
#gea-mockup .globe-mark::after{
  content:"";position:absolute;bottom:8px;right:8px;width:11px;height:9px;
  background:var(--gea-gold);border-radius:2px 6px 2px 6px;
}
#gea-mockup .globe-brand-text .name{font-size:28px;font-weight:800;letter-spacing:.02em;line-height:1.1;}
#gea-mockup .globe-brand-text .name span{font-size:15px;font-weight:700;letter-spacing:.15em;vertical-align:super;margin-left:3px;color:#e8e8f0;}
#gea-mockup .globe-brand-text .tagline{font-size:13px;color:#c9cfe0;letter-spacing:.05em;margin-top:3px;}

#gea-mockup .globe-hero-visual{position:relative;flex:1;display:flex;align-items:flex-end;min-height:170px;margin:12px -46px 0;}
#gea-mockup .globe-orb{
  position:absolute;right:10%;top:0;width:280px;height:280px;border-radius:50%;
  background:radial-gradient(circle at 38% 32%, rgba(200,225,255,0.95), rgba(90,140,220,0.55) 45%, rgba(20,40,80,0.9) 78%);
  box-shadow:0 0 70px 12px rgba(120,170,255,0.35);overflow:hidden;
}
#gea-mockup .globe-orb::before{
  content:"";position:absolute;inset:0;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 1px, transparent 1px, transparent 18px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 1px, transparent 1px, transparent 18px);
  border-radius:50%;
}
#gea-mockup .globe-dots{position:absolute;inset:0;}
#gea-mockup .globe-dots i{position:absolute;width:4px;height:4px;border-radius:50%;background:#fff;box-shadow:0 0 8px 1px rgba(255,255,255,0.9);}
#gea-mockup .globe-skyline{position:absolute;bottom:0;left:0;right:0;height:180px;background:linear-gradient(180deg, transparent, rgba(3,8,20,0.65));}
#gea-mockup .globe-skyline svg{position:absolute;bottom:0;width:100%;height:100%;}

#gea-mockup .globe-copy{margin-top:16px;}
#gea-mockup .globe-copy .eyebrow-rule{width:46px;height:4px;background:var(--gea-gold);border-radius:2px;margin-bottom:12px;}
#gea-mockup .globe-copy h3{font-size:30px;font-weight:800;margin:0 0 12px;letter-spacing:.01em;}
#gea-mockup .globe-copy p{font-size:14.5px;line-height:1.6;color:#d7dae6;margin:0 0 10px;max-width:420px;}

/* globe-features now uses Bootstrap row-cols-* for column count */
#gea-mockup .globe-features{--bs-gutter-x:12px;--bs-gutter-y:18px;margin-top:20px;padding-top:18px;border-top:1px solid rgba(255,255,255,0.14);}
#gea-mockup .globe-features .feat{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;}
#gea-mockup .globe-features .feat .ico{
  width:46px;height:46px;border-radius:13px;border:1.5px solid rgba(255,255,255,0.55);
  display:flex;align-items:center;justify-content:center;font-size:17px;color:#fff;
}
#gea-mockup .globe-features .feat .ico.gold{color:var(--gea-gold);border-color:var(--gea-gold);}
#gea-mockup .globe-features .feat span{font-size:11.5px;color:#dfe2ec;line-height:1.3;letter-spacing:.01em;font-weight:600;}

/* EEdge (top right) */
#gea-mockup .panel-eedge{background:linear-gradient(155deg, #ffffff 0%, var(--gea-eedge-bg) 55%, #ece4f8 100%);padding:26px 32px;justify-content:center;}
#gea-mockup .eedge-logo{display:flex;align-items:baseline;gap:2px;font-weight:800;font-size:34px;letter-spacing:-0.01em;color:var(--gea-eedge-purple-dark);margin-bottom:2px;}
#gea-mockup .eedge-logo .e2{color:var(--gea-eedge-purple);}
#gea-mockup .eedge-sub{font-size:11.5px;font-weight:700;letter-spacing:.18em;color:#8b7ba8;margin-bottom:18px;}
#gea-mockup .eedge-copy h3{font-size:23px;font-weight:800;color:var(--gea-ink);margin:0 0 10px;}
#gea-mockup .eedge-copy .eyebrow-rule{width:38px;height:3px;background:var(--gea-eedge-purple);border-radius:2px;margin-bottom:12px;}
#gea-mockup .eedge-copy p{font-size:13.5px;line-height:1.6;color:var(--gea-ink-soft);margin:0;max-width:100%;}
#gea-mockup .eedge-laptop{display:flex;justify-content:center;align-items:center;}
#gea-mockup .laptop-screen{width:100%;max-width:380px;border-radius:10px 10px 0 0;background:#1a1a1f;padding:8px;box-shadow:0 12px 26px rgba(60,30,100,0.20);}
#gea-mockup .laptop-inner{background:#fff;border-radius:5px;overflow:hidden;}
#gea-mockup .laptop-topbar{background:var(--gea-eedge-purple);color:#fff;padding:8px 11px;display:flex;justify-content:space-between;align-items:center;font-size:10px;font-weight:700;}
#gea-mockup .laptop-body{display:flex;}
#gea-mockup .laptop-nav{width:70px;background:#f6f3fb;padding:9px 6px;display:flex;flex-direction:column;gap:8px;border-right:1px solid #eee0f7;}
#gea-mockup .laptop-nav .gea-nav-item{display:flex;align-items:center;gap:4px;font-size:7px;color:#6a6480;font-weight:600;}
#gea-mockup .laptop-nav .gea-nav-item.active{color:var(--gea-eedge-purple);}
#gea-mockup .laptop-nav .gea-nav-item i{width:9px;text-align:center;font-size:7.5px;}
#gea-mockup .laptop-main{flex:1;padding:10px;background:#fbf9fe;}
#gea-mockup .kpi-row{display:flex;gap:7px;margin-bottom:9px;}
#gea-mockup .kpi{flex:1;background:#fff;border:1px solid #ece3f7;border-radius:5px;padding:6px 7px;}
#gea-mockup .kpi .lbl{font-size:6px;color:#9a92ac;font-weight:600;}
#gea-mockup .kpi .val{font-size:8.6px;font-weight:800;color:#2c1c47;margin:1px 0;}
#gea-mockup .kpi .delta{font-size:5.8px;color:#1fa671;font-weight:700;}
#gea-mockup .chart-row{display:flex;gap:7px;}
#gea-mockup .chart-card{flex:1;background:#fff;border:1px solid #ece3f7;border-radius:5px;padding:7px;}
#gea-mockup .chart-card .lbl{font-size:6.2px;color:#6a6480;font-weight:700;margin-bottom:5px;}
#gea-mockup .mini-line{width:100%;height:28px;}
#gea-mockup .laptop-base{width:100%;max-width:396px;height:13px;background:linear-gradient(180deg,#2c2c33,#17171b);border-radius:0 0 8px 8px;margin:0 auto;position:relative;}
#gea-mockup .laptop-base::after{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:64px;height:4px;background:#3a3a42;border-radius:0 0 6px 6px;}

/* AllWin (bottom right) */
#gea-mockup .panel-allwin{background:linear-gradient(155deg,#ffffff 0%, var(--gea-allwin-bg) 60%, #ece4f8 100%);padding:26px 32px;justify-content:center;}
#gea-mockup .allwin-brand{display:flex;align-items:center;gap:12px;margin-bottom:14px;}
#gea-mockup .allwin-mark{width:52px;height:52px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;position:relative;box-shadow:0 2px 8px rgba(0,0,0,0.08);flex-shrink:0;}
#gea-mockup .allwin-mark i.fa-star{position:absolute;top:2px;left:13px;color:var(--gea-allwin-red);font-size:10px;}
#gea-mockup .allwin-mark .figures{display:flex;gap:1px;}
#gea-mockup .allwin-mark .figures i{font-size:18px;}
#gea-mockup .allwin-mark .figures i:first-child{color:var(--gea-allwin-purple);}
#gea-mockup .allwin-mark .figures i:last-child{color:var(--gea-allwin-blue);}
#gea-mockup .allwin-brand-text .name{font-size:21px;font-weight:800;color:var(--gea-allwin-purple);letter-spacing:.02em;line-height:1.05;}
#gea-mockup .allwin-brand-text .sub{font-size:10.5px;font-weight:700;letter-spacing:.14em;color:#8b7ba8;}
#gea-mockup .allwin-copy h3{font-size:23px;font-weight:800;color:var(--gea-ink);margin:0 0 10px;}
#gea-mockup .allwin-copy .eyebrow-rule{width:38px;height:3px;background:var(--gea-allwin-purple);border-radius:2px;margin-bottom:12px;}
#gea-mockup .allwin-copy p{font-size:13.5px;line-height:1.6;color:var(--gea-ink-soft);margin:0 0 16px;max-width:100%;}
#gea-mockup .allwin-tags{display:flex;gap:10px 8px;border-top:1px solid #e3d7f5;padding-top:14px;}
#gea-mockup .allwin-tags .tag{display:flex;align-items:center;gap:7px;font-size:11.5px;font-weight:600;color:var(--gea-ink);}
#gea-mockup .allwin-tags .tag i{color:var(--gea-allwin-purple);font-size:14px;width:16px;text-align:center;}
#gea-mockup .hero-media{width:100%;height:100%;}
#gea-mockup .hero-image{display:block;width:100%;height:100%;object-fit:contain;}   /* show the whole image, never crop */
#gea-mockup .allwin-illustration{
  position:relative;aspect-ratio:16/10;max-height:190px;
  background:linear-gradient(180deg,#f7f2ff,#efe6fb);border-radius:14px;
  display:flex;align-items:flex-end;justify-content:center;gap:10px;padding:12px 8px 0;overflow:hidden;
}
#gea-mockup .seat{display:flex;flex-direction:column;align-items:center;position:relative;}
#gea-mockup .seat .person{font-size:34px;line-height:1;}
#gea-mockup .seat .furniture{width:64px;height:46px;border-radius:12px 12px 4px 4px;margin-top:-14px;}
#gea-mockup .seat.sofa .furniture{background:#d9a9e0;width:110px;}
#gea-mockup .seat.chair .furniture{background:#8fd0e6;}
#gea-mockup .seat.wheel .furniture{background:transparent;}
#gea-mockup .wheel-icon{font-size:26px;color:#333;margin-top:-4px;}

@media (max-width:1199.98px){
  #gea-mockup .brand-panel{min-height:auto;}
}
@media (max-width:991.98px){
  #gea-mockup .right-column{min-height:auto;}
  #gea-mockup .panel-globe{min-height:560px;}
  #gea-mockup .globe-hero-visual{margin:12px 0 0;}
}
@media (max-width:767.98px){
  #gea-mockup .presentation-wrap{padding:0;}
  #gea-mockup .brand-panel{padding:12px;border-radius:20px;}
  #gea-mockup .panel-section{border-radius:16px;}
  #gea-mockup .panel-globe{padding:30px 24px 26px;min-height:520px;}
  #gea-mockup .panel-eedge,
  #gea-mockup .panel-allwin{padding:26px 22px;}
  #gea-mockup .globe-copy h3{font-size:26px;}
  #gea-mockup .allwin-illustration{max-height:220px;}
  #gea-mockup .allwin-tags{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px 8px;
    flex-wrap:wrap;
  }
  #gea-mockup .allwin-tags .tag{
    font-size:11px;
    white-space:normal;
    line-height:1.3;
    align-items:flex-start;
  }
  #gea-mockup .allwin-tags .tag i{
    margin-top:2px;
    flex-shrink:0;
  }
}
@media (max-width:480px){
  #gea-mockup .globe-orb{width:200px;height:200px;right:4%;}
  #gea-mockup .globe-copy p{max-width:100%;}
  #gea-mockup .allwin-tags{
    grid-template-columns:1fr 1fr;
    gap:8px 6px;
  }
  #gea-mockup .allwin-tags .tag{
    font-size:10.5px;
  }
}

/* ==========================================================================
   11. Vision section: From Ideas to Impact / Our Founder
   ========================================================================== */
.vision-section{background:linear-gradient(180deg,#fff 0%, var(--blue-tint-2) 100%);position:relative;overflow:hidden;padding-top:calc(var(--section-y) / 2);}
.vision-section .vs-blob{position:absolute;border-radius:50%;filter:blur(80px);opacity:.35;pointer-events:none;z-index:0;}
.vision-section .vs-blob-a{width:420px;height:420px;background:radial-gradient(circle,var(--dash-purple-3),transparent 70%);top:-100px;left:-120px;}
.vision-section .vs-blob-b{width:380px;height:380px;background:radial-gradient(circle,var(--blue),transparent 70%);bottom:-100px;right:-100px;}
.vision-section .wrap{position:relative;z-index:1;}

/* vs-grid now uses Bootstrap row/col for the left/right split; the hairline
   divider is a plain bordered column so it can flip orientation responsively
   through ordinary CSS instead of a 1px grid track. */
.vs-divider{width:1px;background:linear-gradient(to bottom,transparent 0%,var(--line) 12%,var(--dash-purple-2) 50%,var(--line) 88%,transparent 100%);}

.vs-image-wrap{position:relative;margin-bottom:40px;}
.vs-image-glow{position:absolute;inset:-6%;background:radial-gradient(ellipse at center,rgba(142,36,170,.22),transparent 70%);filter:blur(46px);z-index:-1;border-radius:var(--radius);}
.vs-image-wrap img{width:100%;height:auto;border-radius:16px;box-shadow:0 26px 60px rgba(11,30,51,.14),0 8px 20px rgba(142,36,170,.10);transition:transform .35s ease,box-shadow .35s ease;}
.vs-image-wrap:hover img{transform:translateY(-8px) scale(1.012);box-shadow:0 34px 74px rgba(11,30,51,.18),0 10px 26px rgba(142,36,170,.16);}

/* vs-feature-row now uses Bootstrap row-cols-* for column count */
/* Was a Bootstrap row-cols-5 with only 4 cards (an empty 5th slot) plus an inline gap, and a
   horizontal scroller on phones. Now a plain 2-up grid on phones, 4-up from 768px. */
.vs-feature-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:0;padding:0;}
@media (min-width:768px){.vs-feature-row{grid-template-columns:repeat(4,minmax(0,1fr));}}
.vs-feature-row > .vs-feature-card{width:auto;max-width:none;}
.vs-feature-card{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;padding:20px 12px;border-radius:14px;background:#fff;border:1px solid var(--line);box-shadow:0 8px 20px rgba(11,30,51,.05);transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;}
.vs-feature-card:hover{transform:translateY(-5px);box-shadow:0 16px 30px rgba(142,36,170,.14);border-color:rgba(142,36,170,.3);}
.vs-feature-card .icon-badge{width:38px;height:38px;border-radius:10px;background:linear-gradient(135deg,rgba(20,118,187,.10),rgba(142,36,170,.12));}
.vs-feature-card .icon-badge svg{width:18px;height:18px;stroke:var(--blue);}
.vs-feature-label{font-size:12px;font-weight:600;color:var(--blue-dark);line-height:1.3;}

.vs-right h2{font-size:clamp(26px,1.2vw + 22px,32px);font-weight:700;color:var(--blue-dark);line-height:1.2;margin:2px 0 26px;}
.vs-right h2 .grad{background:linear-gradient(120deg,var(--blue),var(--blue));-webkit-background-clip:text;background-clip:text;color:transparent;}

.vs-founder-card{display:flex;align-items:center;gap:20px;padding:18px;margin-bottom:24px;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 16px 36px rgba(11,30,51,.07);transition:transform .3s ease,box-shadow .3s ease;}
.vs-founder-card:hover{transform:translateY(-4px);box-shadow:0 22px 44px rgba(142,36,170,.13);}
.vs-founder-photo{width:84px;height:114px;object-fit:cover;border-radius:14px;box-shadow:0 8px 18px rgba(11,30,51,.16);flex:0 0 auto;}
.vs-founder-name{font-size:18px;font-weight:700;color:var(--blue-dark);margin:0 0 3px;}
.vs-founder-role{font-size:13.5px;font-weight:600;color:#1476bb;margin:0 0 2px;}
.vs-founder-company{font-size:12.5px;color:var(--ink-soft);margin:0;}

.vs-quote{position:relative;padding:22px 22px 22px 26px;margin-bottom:26px;background:#fff;border-left:4px solid #1476bb;border-radius:12px;box-shadow:0 12px 28px rgba(11,30,51,.06);transition:transform .3s ease,box-shadow .3s ease;}
.vs-quote:hover{transform:translateY(-3px);box-shadow:0 18px 36px rgba(142,36,170,.13);}
.vs-quote-icon{display:inline-flex;margin-bottom:10px;animation:vsPulse 2.6s ease-in-out infinite;}
@media (prefers-reduced-motion: reduce){
  .vs-quote-icon{animation:none;}
}
.vs-quote-icon svg{width:28px;height:21px;}
@keyframes vsPulse{0%,100%{transform:scale(1);opacity:1;}50%{transform:scale(1.12);opacity:.75;}}
.vs-quote p{font-size:16.5px;font-weight:600;line-height:1.55;margin:0;color:var(--blue-dark);}

@media (max-width:640px){
  .vision-section .vs-blob{filter:blur(48px);width:240px;height:240px;}   /* lighter on phones */
  .vs-right{text-align:center;}
  .vs-founder-card{flex-direction:column;text-align:center;}
  .vs-quote{text-align:left;}
}

/* ==========================================================================
   12. Testimonial slider (What Our Clients Say)
   ========================================================================== */
.ts-section{
  position:relative;padding:var(--section-y) 0;overflow:hidden;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:
    radial-gradient(620px 420px at 12% 8%, rgba(20,118,187,.07), transparent 60%),
    radial-gradient(620px 420px at 88% 92%, rgba(240,173,0,.08), transparent 60%),
    #FBFDFF;
}
.ts-bgquote{position:absolute;top:-40px;left:50%;transform:translateX(-50%);font-family:'Poppins',sans-serif;font-weight:800;font-size:340px;line-height:1;color:var(--blue);opacity:.045;user-select:none;pointer-events:none;}
.ts-head{text-align:center;max-width:640px;margin:0 auto var(--head-gap);position:relative;z-index:1;}
.ts-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--blue);margin-bottom:14px;}
.ts-eyebrow::before{content:"";width:22px;height:2px;background:var(--orange);border-radius:2px;}
.ts-head h2{font-size:clamp(28px,3.4vw,40px);font-weight:700;color:var(--blue-dark);letter-spacing:-.01em;margin-bottom:12px;}
.ts-head p{color:var(--ink-soft);font-size:16px;line-height:1.6;}

.ts-stage{position:relative;z-index:1;max-width:900px;margin:0 auto;display:flex;align-items:center;gap:22px;}
.ts-arrow{
  flex:0 0 auto;width:52px;height:52px;border-radius:50%;background:#fff;border:1.5px solid var(--line);
  display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--blue-dark);
  box-shadow:0 6px 16px rgba(11,30,51,.06);transition:all .2s ease;
}
.ts-arrow:hover{background:var(--blue);border-color:var(--blue);color:#fff;transform:translateY(-2px);box-shadow:0 10px 22px rgba(20,118,187,.25);}
.ts-arrow:active{transform:translateY(0) scale(.94);}
.ts-arrow svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;}
.ts-arrow:focus-visible{outline:2.5px solid var(--orange);outline-offset:2px;}

.ts-viewport{flex:1 1 auto;overflow:hidden;position:relative;border-radius:20px;}
.ts-track{display:flex;will-change:transform;}
.ts-slide{flex:0 0 100%;width:100%;box-sizing:border-box;padding:6px;}

.ts-card{
  position:relative;background:#fff;border:1px solid var(--line);border-radius:20px;padding:44px 44px 36px;
  box-shadow:0 2px 4px rgba(11,30,51,.03), 0 20px 44px rgba(11,30,51,.07);text-align:center;min-height:352px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
}
.ts-quote-mark{font-family:'Poppins',sans-serif;font-weight:800;font-size:64px;line-height:1;color:var(--orange);opacity:.9;margin-bottom:2px;}
.ts-stars{display:flex;gap:4px;color:var(--orange);font-size:15px;letter-spacing:2px;margin-bottom:18px;}
.ts-quote-text{font-family:'Inter',sans-serif;font-size:19px;line-height:1.65;color:var(--blue-dark);max-width:600px;margin:0 auto 26px;font-weight:500;}
.ts-person{display:flex;flex-direction:column;align-items:center;gap:4px;}
.ts-avatar{
  width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;
  font-family:'Poppins',sans-serif;font-weight:700;font-size:16px;margin-bottom:10px;
  background:linear-gradient(135deg,var(--av-a,#1476BB),var(--av-b,#0F5A8F));box-shadow:0 6px 14px rgba(11,30,51,.14);
}
.ts-name{font-family:'Poppins',sans-serif;font-weight:700;font-size:15.5px;color:var(--blue-dark);}
.ts-role{font-size:13.5px;color:var(--ink-soft);}
.ts-loc{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;color:var(--blue);font-weight:600;margin-top:6px;}
.ts-loc svg{width:13px;height:13px;stroke:var(--blue);fill:none;stroke-width:2;}

.ts-dots{display:flex;justify-content:center;gap:9px;margin-top:34px;position:relative;z-index:1;}
.ts-dot{width:9px;height:9px;border-radius:50%;background:var(--line);border:0;padding:0;cursor:pointer;transition:all .25s ease;}
.ts-dot:hover{background:#B9CBE0;}
.ts-dot.is-active{width:26px;border-radius:6px;background:var(--blue);}

@media (max-width:720px){
  .ts-arrow{width:44px;height:44px;}
  .ts-arrow svg{width:17px;height:17px;}
  .ts-card{padding:32px 22px 28px;min-height:auto;}
  .ts-quote-text{font-size:16.5px;}
  .ts-bgquote{font-size:220px;top:-20px;}
}
@media (max-width:560px){
  /* Two 44px arrows + gaps left only ~150px for the card at 320px. Arrows now sit
     under the card so it keeps the full content width. */
  .ts-stage{flex-wrap:wrap;justify-content:center;gap:16px 14px;}
  .ts-viewport{order:-1;flex:1 1 100%;}
  .ts-dots{margin-top:20px;}
}

/* ==========================================================================
   13. CTA banner
   ========================================================================== */
.cta-section{padding:0 0 var(--section-y);background:var(--blue-tint-2);}   /* continues the FAQ background instead of a white band */
.cta-panel{background:linear-gradient(120deg,var(--blue-dark),#0C2C63);border-radius:20px;padding:clamp(32px,5vw,48px) clamp(24px,5vw,56px);display:flex;align-items:center;justify-content:space-between;gap:30px;position:relative;overflow:hidden;}
.cta-panel::after{content:'';position:absolute;right:-40px;bottom:-60px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(140,180,255,.18),transparent 70%);}
.cta-panel h2{font-size:clamp(21px,1vw + 17px,25px);font-weight:700;color:#fff;margin-bottom:8px;}
.cta-panel p{font-size:14px;color:#B9C4DA;}
.cta-rocket{position:relative;z-index:1;}

@media (max-width:980px){
  .cta-panel{flex-direction:column;text-align:center;}
}
@media (max-width:640px){
  .cta-panel{gap:22px;}
  .cta-panel .btn{width:100%;max-width:360px;white-space:normal;}
  .cta-rocket{width:56px;height:56px;}
}

/* ==========================================================================
   14. Footer
   ========================================================================== */
footer{background:var(--blue-dark);color:#B9C4DA;padding-top:var(--section-y-sm);}
.foot-grid{--bs-gutter-y:2rem;}   /* stacked footer columns had no vertical gap on mobile */
.foot-col h3,.foot-col h4{font-family:'Poppins',sans-serif;font-size:13.5px;color:#fff;margin-bottom:18px;font-weight:600;}
.foot-col a, .foot-col p{display:block;font-size:13px;margin-bottom:11px;color:#9AA6C0;line-height:1.6;}
.foot-col a:hover{color:#fff;}
.foot-col a,.foot-col p{overflow-wrap:anywhere;}
.foot-col p a{display:inline;margin:0;}   /* inline contact links no longer double the <p> margin */
.foot-brand .logo-text{color:#fff;}
.foot-brand .logo-text b{color:#7FC4E8;}
.foot-brand .logo-sub{color:#8B96AD;}
.foot-brand .logo-mark{height:36px;}
.foot-social{display:flex;gap:10px;margin-top:16px;}
.foot-social a{width:32px;height:32px;border:1px solid rgba(255,255,255,.15);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:12px;}
.newsletter-input{display:flex;margin-top:6px;margin-bottom:16px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:8px;padding:4px;}
.newsletter-input input{flex:1;background:transparent;border:none;outline:none;color:#fff;font-size:12.5px;padding:8px 10px;}
.newsletter-input button{background:var(--blue);border:none;border-radius:6px;width:34px;height:34px;display:flex;align-items:center;justify-content:center;color:#fff;cursor:pointer;flex:0 0 auto;}
/* Horizontal padding must come from the gutter token: `padding:20px 0` here used to override .wrap's side padding, so the legal line touched the screen edges on mobile. */
.foot-bottom{border-top:1px solid rgba(255,255,255,.1);padding:20px var(--gutter) calc(20px + env(safe-area-inset-bottom,0px));display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;font-size:12px;color:#8B96AD;}

@media (max-width:640px){
  .foot-bottom{flex-direction:column;gap:8px;text-align:center;}
  .newsletter-input{margin-bottom:32px;}
}
.faq-section{
  background:linear-gradient(180deg, #ffffff 0%, var(--blue-tint-2) 60%, var(--blue-tint-2) 100%);
  padding:var(--section-y) var(--gutter) clamp(48px,6vw,72px);   /* CTA follows directly, so the bottom is tighter */
}

.faq-wrap{
  max-width:820px;
  margin:0 auto;
}

.faq-header{
  text-align:center;
  margin-bottom:var(--head-gap);
}

.faq-eyebrow{
  display:inline-block;
  font-size:12.5px;
  font-weight:700;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--blue);
  background:rgba(20,118,187,0.08);
  padding:7px 18px;
  border-radius:999px;
  margin-bottom:20px;
}

.faq-header h2{
  font-family:'Poppins',sans-serif;
  font-size:clamp(28px, 3.2vw, 38px);
  font-weight:700;
  line-height:1.2;
  letter-spacing:-0.01em;
  margin:0 0 14px;
  color:var(--blue-dark);
}

.faq-header p{
  font-size:15.5px;
  line-height:1.65;
  color:var(--ink-soft);
  max-width:480px;
  margin:0 auto;
}

/* ---------- Accordion list ---------- */
.faq-list{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.faq-item{
  position:relative;
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  overflow:hidden;
  isolation:isolate;
  transition:
    border-color .3s cubic-bezier(0.4,0,0.2,1),
    box-shadow .3s cubic-bezier(0.4,0,0.2,1),
    background-color .3s cubic-bezier(0.4,0,0.2,1);
}

/* thin accent bar along the top edge — echoes the .svc-card hover treatment
   used elsewhere on the page, reveal on hover, stays lit while open */
.faq-item::before{
  content:'';
  position:absolute;
  top:0; left:0; right:0;
  height:3px;
  background:linear-gradient(90deg,var(--blue),var(--blue) 65%,transparent);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .35s cubic-bezier(0.4,0,0.2,1);
}

.faq-item:hover{
  border-color:rgba(20,118,187,0.3);
  box-shadow:0 12px 28px -20px rgba(20,55,90,0.35);
}

.faq-item:hover::before{
  transform:scaleX(1);
}

.faq-item.active{
  border-color:rgba(20,118,187,0.45);
  background:linear-gradient(180deg, var(--blue-tint-2) 0%, #fff 60%);
  box-shadow:0 18px 38px -22px rgba(20,55,90,0.4);
}

.faq-item.active::before{
  transform:scaleX(1);
}

.faq-question{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  background:none;
  border:none;
  text-align:left;
  cursor:pointer;
  padding:22px 26px;
  font-family:'Poppins',sans-serif;
  font-size:16px;
  font-weight:600;
  color:var(--blue-dark);
  border-radius:16px;
  transition:
    background-color .25s cubic-bezier(0.4,0,0.2,1),
    color .25s cubic-bezier(0.4,0,0.2,1);
}

.faq-question:hover{
  background-color:rgba(20,118,187,0.04);
}

.faq-question:focus-visible{
  outline:2px solid var(--blue);
  outline-offset:-2px;
}

.faq-item.active .faq-question{
  color:var(--blue);
}

.faq-q-text{
  flex:1;
}

/* circular +/- icon */
.faq-icon{
  position:relative;
  width:30px;
  height:30px;
  flex-shrink:0;
  border-radius:50%;
  background:var(--blue-tint-2);
  border:1.5px solid var(--line);
  transition:
    background-color .3s cubic-bezier(0.4,0,0.2,1),
    border-color .3s cubic-bezier(0.4,0,0.2,1),
    transform .4s cubic-bezier(0.4,0,0.2,1);
}

.faq-question:hover .faq-icon{
  border-color:var(--blue);
  transform:scale(1.08);
}

.faq-item.active .faq-icon{
  background:var(--blue);
  border-color:var(--blue);
  transform:rotate(180deg);
}

.faq-icon::before,
.faq-icon::after{
  content:'';
  position:absolute;
  top:50%;
  left:50%;
  background:var(--blue-dark);
  border-radius:2px;
  transition:
    background-color .3s cubic-bezier(0.4,0,0.2,1),
    transform .35s cubic-bezier(0.4,0,0.2,1),
    opacity .3s cubic-bezier(0.4,0,0.2,1);
}

.faq-icon::before{
  width:12px;
  height:1.6px;
  transform:translate(-50%,-50%);
}

.faq-icon::after{
  width:1.6px;
  height:12px;
  transform:translate(-50%,-50%);
}

.faq-item.active .faq-icon::before,
.faq-item.active .faq-icon::after{
  background:#fff;
}

.faq-item.active .faq-icon::after{
  transform:translate(-50%,-50%) rotate(90deg);
  opacity:0;
}

/* smooth height/opacity reveal — no layout jump */
.faq-item h3{margin:0;}
/* visibility keeps collapsed answers out of the tab order / screen-reader flow; the
   delayed transition lets the close animation finish first. */
.faq-answer-wrap{
  display:grid;
  grid-template-rows:0fr;
  opacity:0;
  visibility:hidden;
  transition:
    grid-template-rows .4s cubic-bezier(0.4,0,0.2,1),
    opacity .3s cubic-bezier(0.4,0,0.2,1),
    visibility 0s linear .4s;
}

.faq-item.active .faq-answer-wrap{
  grid-template-rows:1fr;
  opacity:1;
  visibility:visible;
  transition-delay:0s;
}

.faq-answer-inner{
  overflow:hidden;
  min-height:0;   /* required for the 0fr collapse in Safari */
}

.faq-answer{
  padding:0 26px 24px;
  margin-top:2px;
  border-top:1px solid var(--line);
  padding-top:16px;
  font-size:15px;
  line-height:1.7;
  color:var(--ink-soft);
  max-width:640px;
}

/* Final CTA */
.faq-cta{
  text-align:center;
  margin-top:56px;
  padding-top:48px;
  border-top:1px solid var(--line);
}
.faq-cta h3{
  font-size:21px;
  font-weight:700;
  margin:0 0 8px;
  color:var(--blue-dark);
}
.faq-cta p{
  font-size:15px;
  color:var(--ink-soft);
  margin:0 0 26px;
}
.faq-cta-btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:var(--blue);
  color:#fff;
  font-family:'Poppins',sans-serif;
  font-size:15px;
  font-weight:600;
  padding:15px 32px;
  border-radius:999px;
  text-decoration:none;
  border:none;
  cursor:pointer;
  box-shadow:0 10px 24px rgba(20,118,187,0.28);
  transition:transform .2s cubic-bezier(0.4,0,0.2,1), box-shadow .2s cubic-bezier(0.4,0,0.2,1), background-color .2s cubic-bezier(0.4,0,0.2,1);
}
.faq-cta-btn:hover{
  transform:translateY(-2px);
  background-color:var(--blue-deep, #0e5c94);
  box-shadow:0 14px 30px rgba(20,118,187,0.34);
}
.faq-cta-btn svg{
  width:16px;height:16px;
  stroke:var(--orange);
}

@media (max-width:640px){
  .faq-header h2{font-size:26px;}
  .faq-list{gap:10px;}
  .faq-item{border-radius:14px;}
  .faq-question{font-size:15px;padding:18px 18px;gap:14px;}
  .faq-icon{width:28px;height:28px;}
  .faq-answer{font-size:14px;padding:0 18px 20px;padding-top:14px;}
  .faq-cta h3{font-size:19px;}
  .faq-cta{margin-top:44px;padding-top:36px;}
}

@media (prefers-reduced-motion: reduce){
  .faq-item,
  .faq-item::before,
  .faq-question,
  .faq-icon,
  .faq-icon::before,
  .faq-icon::after,
  .faq-answer-wrap,
  .faq-cta-btn{
    transition:none !important;
  }
}

/* ==========================================================================
   ABOUT PAGE (about.html)
   Scoped under body.page-about so its design system (which uses several
   of the same class names/CSS variables as the homepage, with different
   values) never bleeds into other pages that share this stylesheet.
   ========================================================================== */
  body.page-about {
    --blue:#1476BB;
    --blue-deep:#0F5A8F;
    --blue-dark:#16223F;
    --purple:#7C6FE0;
    --purple-soft:#A79BEF;
    --gold:#F0AD00;
    --gold-soft:#FFF3DA;
    --ink:#2B3242;
    --ink-soft:#6B7386;
    --line:#E4E9F1;
    --tint:#EEF5FB;
    --tint-2:#F7FAFD;
    --paper:#FFFFFF;
  }

  body.page-about {font-family:'Inter',sans-serif;color:var(--ink);background:var(--paper);line-height:1.5;-webkit-font-smoothing:antialiased;}

  body.page-about h1,
body.page-about h2,
body.page-about h3:not(footer h3),
body.page-about h4:not(footer h4) {font-family:'Poppins',sans-serif;color:var(--blue-dark);letter-spacing:-0.01em;}

  body.page-about .wrap:not(footer .wrap) {max-width:1180px;margin:0 auto;}

  body.page-about a:not(footer a) {text-decoration:none;color:inherit;}
  body.page-about footer a {text-decoration:none;}

  body.page-about section {padding:96px 0;}

  body.page-about ::selection {background:var(--gold-soft);}


  /* ---------- review banner ---------- */
  body.page-about .review-banner {background:var(--blue-dark);color:#DCE7F5;text-align:center;font-size:12.5px;padding:9px 16px;letter-spacing:.02em;}

  body.page-about .review-banner b {color:var(--gold);}

  /* ---------------- Header (shared across the whole site) ----------------
     The header/nav/dropdown/mega-menu/search-bar/mobile-menu CSS that used
     to be duplicated here now lives only once, in the "4. Header & primary
     navigation" section near the top of this file (plus its "Search bar
     (expand/collapse)" and "Header / nav responsive drawer" companions),
     since the Header markup is shared across every page via header.html.
     The nav-caret rules below are NOT plain duplicates of that section —
     they set slightly different transition values — so they stay here to
     avoid changing how the caret currently animates on this page. */
  body.page-about .nav-item .caret {transition:transform .18s ease, color .28s ease-in-out;}

  body.page-about .nav-item:hover > a .caret,
body.page-about .nav-item > a:focus-visible .caret {color:var(--blue);}

  body.page-about .nav-item .caret {font-size:11px;display:inline-block;transition:transform .18s ease;}

  body.page-about .nav-item:hover .caret {transform:rotate(180deg);}



  /* icon helper */
  body.page-about .icon-badge {width:46px;height:46px;border-radius:12px;background:var(--blue-tint);display:flex;align-items:center;justify-content:center;flex:0 0 auto;}

  body.page-about .icon-badge svg {stroke:var(--blue);}


  /* ---------- eyebrow / labels ---------- */
  body.page-about .eyebrow {display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:var(--blue);text-transform:uppercase;letter-spacing:.06em;margin-bottom:18px;}

  body.page-about .eyebrow::before {content:'';width:16px;height:2px;background:var(--gold);border-radius:2px;}


  /* ---------- buttons ---------- */
  body.page-about .btn {display:inline-flex;align-items:center;gap:8px;padding:15px 28px;border-radius:30px;font-family:'Poppins',sans-serif;font-weight:600;font-size:14.5px;cursor:pointer;border:1.5px solid transparent;transition:all .18s ease;white-space:nowrap;}

  body.page-about .btn-primary {background:var(--blue);color:#fff;}

  body.page-about .btn-primary:hover {background:var(--blue-deep);}

  body.page-about .btn-outline {background:transparent;color:var(--blue-dark);border-color:var(--line);}

  body.page-about .btn-outline:hover {border-color:var(--blue);color:var(--blue);}

  body.page-about .cta-group {display:flex;gap:14px;flex-wrap:wrap;margin-top:32px;}


  /* ---------- placeholder illustration slot ---------- */
  body.page-about .illo {
    position:relative;border-radius:26px;border:2px dashed #B9D3E8;
    background:linear-gradient(155deg,var(--tint) 0%,var(--tint-2) 60%,#fff 100%);
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    text-align:center;gap:10px;padding:28px;overflow:hidden;
  }

  body.page-about .illo .illo-icon {width:52px;height:52px;border-radius:14px;background:#fff;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--blue);}

  body.page-about .illo .illo-label {font-family:'Poppins',sans-serif;font-size:12.5px;font-weight:600;color:var(--blue-dark);max-width:280px;}

  body.page-about .illo .illo-sub {font-size:11.5px;color:var(--ink-soft);max-width:260px;}

  body.page-about .illo-tag {position:absolute;top:14px;left:14px;background:var(--blue-dark);color:#fff;font-size:10.5px;font-weight:600;letter-spacing:.03em;padding:5px 10px;border-radius:20px;text-transform:uppercase;}


  /* ================= Section 1 — Hero ================= */
  body.page-about .hero {background:linear-gradient(180deg,var(--tint) 0%,#fff 70%);padding:88px 0 96px;}

  body.page-about .hero-grid {display:grid;grid-template-columns:.86fr 1.14fr;gap:56px;align-items:center;}

  body.page-about .hero h1 {font-size:22px;font-weight:600;color:var(--blue);margin-bottom:6px;}

  body.page-about .hero h1.lead-line2 {font-size:42px;font-weight:700;color:var(--blue-dark);line-height:1.18;margin-bottom:22px;}

  body.page-about .hero p.desc {font-size:15.5px;color:var(--ink-soft);line-height:1.8;max-width:480px;}

  body.page-about .hero .illo {aspect-ratio:1/1.05;}


  /* ---------- Hero media slot — Globe Edge story banner ---------- */
  body.page-about .hero-media {
    position:relative;
    width:100%;
    aspect-ratio:16/8.2;
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 24px 60px rgba(15,30,60,.18), 0 0 0 1px rgba(20,118,187,.08);
    background:#0b1330;
  }

  @media (max-width:760px) {
    body.page-about .hero-media {aspect-ratio:16/11;border-radius:16px;}

  
}


  /* ---------- Hero cinematic slideshow (3 images, CSS-only, autoplay/loop, 2s per shot) ---------- */
  body.page-about .hero-slideshow {position:absolute;inset:0;overflow:hidden;background:#0b1330;}


  body.page-about .hero-slide {
    position:absolute;inset:0;
    opacity:0;
    will-change:transform,opacity,filter;
    animation-duration:6s;
    animation-timing-function:cubic-bezier(.61,0,.34,1);
    animation-iteration-count:infinite;
  }

  body.page-about .hero-slide img {
    width:100%;height:100%;object-fit:cover;object-position:center;
    display:block;
  }

  /* caption text sits in the lower-bottom corner of each animated hero shot */
  body.page-about .hero-slide-caption {
    position:absolute;left:28px;bottom:22px;right:28px;z-index:5;
    color:#fff;font-family:'Poppins',sans-serif;font-weight:600;
    font-size:15px;letter-spacing:.02em;line-height:1.3;
    text-shadow:0 2px 10px rgba(0,0,0,.45);
  }

  @media (max-width:760px) {
    body.page-about .hero-slide-caption {left:18px;right:18px;bottom:16px;font-size:13px;}

  
}

  /* each shot gets its own "camera move" so the cuts read as an edited video, not a repeating loop */
  body.page-about .hero-slide-1 {animation-name:heroShotPush;   animation-delay:0s;}

  body.page-about .hero-slide-2 {animation-name:heroShotWhip;   animation-delay:-2s;}

  body.page-about .hero-slide-3 {animation-name:heroShotReveal; animation-delay:-4s;}


  /* Shot 1 — slow dolly-in push, straight cut in/out, quick blur on the cut */
  @keyframes heroShotPush {
    0%{     opacity:0; filter:blur(10px); transform:translate3d(9%,0,0)    scale(1.08); }
    3%{     opacity:1; filter:blur(0);    transform:translate3d(0,0,0)     scale(1.01); }
    28%{    opacity:1; filter:blur(0);    transform:translate3d(-1%,-1%,0) scale(1.09); }
    31.5%{  opacity:1; filter:blur(0);    transform:translate3d(-2%,-1.5%,0) scale(1.11); }
    33.3%{  opacity:0; filter:blur(10px); transform:translate3d(-9%,-2%,0) scale(1.14); }
    100%{   opacity:0; filter:blur(10px); transform:translate3d(9%,0,0)    scale(1.08); }
  }

  /* Shot 2 — diagonal whip-pan with a touch of rotation, like a handheld swing */
  @keyframes heroShotWhip {
    0%{     opacity:0; filter:blur(14px); transform:translate3d(7%,7%,0)   scale(1.13) rotate(1.4deg); }
    2.5%{   opacity:1; filter:blur(0);    transform:translate3d(0,0,0)     scale(1.03) rotate(0deg); }
    28%{    opacity:1; filter:blur(0);    transform:translate3d(-1.5%,1%,0) scale(1.09) rotate(-.5deg); }
    31.5%{  opacity:1; filter:blur(0);    transform:translate3d(-2.5%,2%,0) scale(1.11) rotate(-.8deg); }
    33.3%{  opacity:0; filter:blur(14px); transform:translate3d(-8%,8%,0)  scale(1.16) rotate(-1.4deg); }
    100%{   opacity:0; filter:blur(14px); transform:translate3d(7%,7%,0)   scale(1.13) rotate(1.4deg); }
  }

  /* Shot 3 — vertical tilt-reveal that pulls back, closing the sequence */
  @keyframes heroShotReveal {
    0%{     opacity:0; filter:blur(10px); transform:translate3d(0,9%,0)    scale(1.16); }
    3%{     opacity:1; filter:blur(0);    transform:translate3d(0,0,0)     scale(1.05); }
    28%{    opacity:1; filter:blur(0);    transform:translate3d(0,-1%,0)   scale(.99); }
    31.5%{  opacity:1; filter:blur(0);    transform:translate3d(0,-1.5%,0) scale(.97); }
    33.3%{  opacity:0; filter:blur(10px); transform:translate3d(0,-9%,0)   scale(.94); }
    100%{   opacity:0; filter:blur(10px); transform:translate3d(0,9%,0)    scale(1.16); }
  }


  /* light-leak flare sweeping across on every cut, sold as a quick camera-flash transition */
  body.page-about .hero-flare {
    position:absolute;inset:-20% -40%;pointer-events:none;mix-blend-mode:screen;
    background:linear-gradient(115deg, transparent 42%, rgba(255,255,255,.55) 49%, rgba(240,173,0,.5) 52%, transparent 60%);
    animation:heroFlareSweep 6s linear infinite;
  }

  @keyframes heroFlareSweep {
    0%{      transform:translate3d(-60%,0,0); opacity:0; }
    1%{      opacity:.9; }
    5%{      transform:translate3d(60%,0,0);  opacity:0; }
    33.3%{   transform:translate3d(-60%,0,0); opacity:0; }
    34.3%{   opacity:.9; }
    38.3%{   transform:translate3d(60%,0,0);  opacity:0; }
    66.6%{   transform:translate3d(-60%,0,0); opacity:0; }
    67.6%{   opacity:.9; }
    71.6%{   transform:translate3d(60%,0,0);  opacity:0; }
    100%{    transform:translate3d(-60%,0,0); opacity:0; }
  }


  /* colour wash tying each frame back to the brand palette */
  body.page-about .hero-media-tint {
    position:absolute;inset:0;pointer-events:none;
    background:
      linear-gradient(125deg, rgba(20,118,187,.38) 0%, rgba(20,118,187,.06) 38%, rgba(240,173,0,.16) 78%, rgba(240,173,0,.22) 100%);
    mix-blend-mode:multiply;
  }

  body.page-about .hero-media-vignette {
    position:absolute;inset:0;pointer-events:none;
    background:
      radial-gradient(120% 90% at 18% 15%, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 42%),
      linear-gradient(180deg, rgba(11,19,48,.05) 0%, rgba(11,19,48,0) 30%, rgba(11,19,48,.05) 62%, rgba(11,19,48,.55) 100%),
      linear-gradient(90deg, rgba(11,19,48,.34) 0%, rgba(11,19,48,0) 22%, rgba(11,19,48,0) 78%, rgba(11,19,48,.34) 100%);
  }


  /* soft ambient glows drifting for a parallax sense of depth, synced to two full shot-cycles */
  body.page-about .hero-glow {position:absolute;border-radius:50%;filter:blur(60px);pointer-events:none;mix-blend-mode:screen;}

  body.page-about .hero-glow-a {
    width:46%;aspect-ratio:1/1;top:-14%;right:-10%;
    background:radial-gradient(circle, rgba(20,118,187,.55) 0%, rgba(20,118,187,0) 70%);
    animation:heroGlowDriftA 12s ease-in-out infinite;
  }

  body.page-about .hero-glow-b {
    width:38%;aspect-ratio:1/1;bottom:-16%;left:-8%;
    background:radial-gradient(circle, rgba(240,173,0,.4) 0%, rgba(240,173,0,0) 70%);
    animation:heroGlowDriftB 12s ease-in-out infinite;
  }

  @keyframes heroGlowDriftA {
    0%,100%{ transform:translate3d(0,0,0) scale(1); }
    50%{     transform:translate3d(-4%,3%,0) scale(1.12); }
  }

  @keyframes heroGlowDriftB {
    0%,100%{ transform:translate3d(0,0,0) scale(1); }
    50%{     transform:translate3d(3%,-4%,0) scale(1.15); }
  }


  @media (prefers-reduced-motion:reduce) {
    body.page-about .hero-slide {animation:none;opacity:1;transform:none;filter:none;}

    body.page-about .hero-slide-2,
body.page-about .hero-slide-3 {display:none;}

    body.page-about .hero-glow,
body.page-about .hero-flare {animation:none;}

  
}


  /* ================= Section 2 — About ================= */
  body.page-about .about-split {display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;}

  body.page-about .about-split .illo {aspect-ratio:1/.86;}

  body.page-about .about-copy h2 {font-size:30px;font-weight:700;margin-bottom:16px;}

  body.page-about .about-copy p {font-size:15px;color:var(--ink-soft);line-height:1.8;margin-bottom:30px;max-width:460px;}

  body.page-about .feature-cards {display:flex;flex-direction:column;gap:14px;}

  body.page-about .feature-card {display:flex;align-items:center;gap:14px;padding:16px 18px;border:1px solid var(--line);border-radius:14px;background:#fff;}

  body.page-about .feature-card .check {width:30px;height:30px;border-radius:50%;background:var(--tint);color:var(--blue);display:flex;align-items:center;justify-content:center;flex:0 0 auto;font-size:14px;}

  body.page-about .feature-card h4 {font-size:14.5px;font-weight:600;color:var(--blue-dark);}

  body.page-about .feature-card p {font-size:12.5px;color:var(--ink-soft);}


  /* ================= Section 3 — Our Approach (animated scroll timeline) ================= */
  body.page-about .approach {
    position:relative;isolation:isolate;overflow:hidden;
    background:
      radial-gradient(ellipse 80% 45% at 50% 0%, rgba(20,118,187,0.10), transparent 60%),
      radial-gradient(ellipse 55% 40% at 100% 60%, rgba(240,173,0,0.08), transparent 60%),
      var(--tint-2);
    padding:72px 0 88px;
  }

  @media (prefers-reduced-motion: reduce) {
    body.page-about .approach *,
body.page-about .approach *::before,
body.page-about .approach *::after {animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;}

  
}

  body.page-about .approach .glow-orb {position:absolute;border-radius:50%;filter:blur(70px);opacity:.5;will-change:transform;pointer-events:none;z-index:0;}

  body.page-about .approach .glow-orb.a {width:340px;height:340px;top:-60px;left:-80px;background:radial-gradient(circle,rgba(20,118,187,.35),transparent 70%);animation:drift1 22s ease-in-out infinite;}

  body.page-about .approach .glow-orb.b {width:400px;height:400px;bottom:5%;right:-120px;background:radial-gradient(circle,rgba(240,173,0,.28),transparent 70%);animation:drift2 26s ease-in-out infinite;}

  @keyframes drift1 {0%,100%{transform:translate(0,0);}50%{transform:translate(50px,60px);}}

  @keyframes drift2 {0%,100%{transform:translate(0,0);}50%{transform:translate(-60px,-50px);}}


  /* ---------- Australia outline map (static decorative background) ----------
     Pinned to a negative z-index and given its own stable compositing layer so it
     can never repaint above the foreground content — even while sibling cards
     animate a transform on hover. Opacity is set per-shape (not on the whole
     container) so it doesn't compound away to invisible. */
  body.page-about .approach-map {
    position:absolute;inset:-4% -2% -2%;z-index:-1;pointer-events:none;
    display:flex;align-items:center;justify-content:center;
    transform:translateZ(0);
    isolation:isolate;
  }

  body.page-about .approach-map svg {width:min(1180px,120%);height:auto;overflow:visible;}

  /* Continent fill — light blue, no stroke/lines, no animation */
  body.page-about .approach-map .map-state {fill:#4FA8E0;fill-opacity:.09;stroke:none;}

  body.page-about .approach-map .map-state.alt {fill:#4FA8E0;fill-opacity:.08;stroke:none;}

  /* Location pins — primary blue accent at reduced opacity; purely decorative, static */
  body.page-about .approach-map .map-pin {fill:var(--blue);fill-opacity:.35;}


  /* .wrap holds all foreground content; isolating it locks in one clean stacking
     context above the map/orbs, so hover transforms on cards inside can never
     interact with the background layer's paint order. */
  body.page-about .approach > .wrap {position:relative;z-index:1;isolation:isolate;}


  body.page-about .section-head {position:relative;z-index:2;text-align:center;max-width:660px;margin:0 auto 48px;}

  body.page-about .section-head h2 {font-size:32px;font-weight:700;margin-bottom:16px;}

  body.page-about .section-head p {font-size:15px;color:var(--ink-soft);line-height:1.8;}


  body.page-about .timeline-wrap {position:relative;z-index:2;max-width:1080px;margin:0 auto;}

  body.page-about .timeline-track {position:absolute;left:50%;top:0;bottom:0;width:3px;transform:translateX(-50%);background:var(--line);border-radius:4px;overflow:hidden;}

  body.page-about .timeline-fill {
    position:absolute;top:0;left:0;right:0;height:0%;
    background:linear-gradient(180deg,var(--blue),var(--gold));
    background-size:100% 200%;animation:flowgradient 4s linear infinite;
    transition:height .4s cubic-bezier(.16,1,.3,1);
    box-shadow:0 0 14px 2px rgba(20,118,187,.35);
  }

  @keyframes flowgradient {0%{background-position:0 0;}100%{background-position:0 200%;}}


  body.page-about .step {position:relative;z-index:1;display:flex;align-items:center;justify-content:center;min-height:160px;margin-bottom:14px;}

  body.page-about .step:last-child {margin-bottom:0;}


  body.page-about .step-node {
    position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.7);
    width:20px;height:20px;border-radius:50%;background:#fff;border:3px solid var(--line);
    z-index:3;transition:all .6s cubic-bezier(.16,1,.3,1);
  }

  body.page-about .step.active .step-node {
    border-color:var(--gold);background:var(--gold);transform:translate(-50%,-50%) scale(1.15);
    box-shadow:0 0 0 6px rgba(240,173,0,.18),0 0 20px 5px rgba(240,173,0,.5);
  }

  body.page-about .step.passed .step-node {
    border-color:var(--blue);background:var(--blue);transform:translate(-50%,-50%) scale(1);
    box-shadow:0 0 12px 3px rgba(20,118,187,.4);
  }


  body.page-about .step-card {
    position:relative;z-index:1;width:44%;
    background:linear-gradient(160deg,#fff 0%,#fff 65%); /* same gradient shape as the hover state so the colour stop can transition smoothly, not snap */
    border:1.5px solid var(--line);border-radius:22px;
    padding:34px 32px;box-shadow:0 8px 28px rgba(20,30,50,.06);
    opacity:0;transform:translateY(50px) scale(.92);
    isolation:isolate; /* own stacking context so hover repaints never touch siblings/background layers */
    transition:transform .8s cubic-bezier(.16,1,.3,1), opacity .8s cubic-bezier(.16,1,.3,1),
      box-shadow .35s ease-in-out, border-color .35s ease-in-out, background .35s ease-in-out;
  }

  body.page-about .step:nth-child(odd) .step-card {margin-right:auto;}

  body.page-about .step:nth-child(even) .step-card {margin-left:auto;}

  body.page-about .step.active .step-card,
body.page-about .step.passed .step-card {opacity:1;transform:translateY(0) scale(1);}

  body.page-about .step.active .step-card {box-shadow:0 20px 48px rgba(20,118,187,.14),0 6px 20px rgba(20,30,50,.08);border-color:#BFDBF0;}


  /* ---------- Premium hover: static blue border, soft tint + glow, lift ----------
     No rotation, no looping animation — border and glow simply fade in on hover
     and every property below shares one smooth 300–400ms ease-in-out transition. */
  body.page-about .step-card:hover {
    z-index:4; /* lift above every other card/connector while hovered */
    transform:translateY(-4px) scale(1.03);
    border-color:var(--blue);
    background:linear-gradient(160deg,var(--tint) 0%,#fff 65%);
    box-shadow:
      0 0 0 1px rgba(20,118,187,.45),
      0 22px 44px rgba(20,118,187,.16),
      0 8px 20px rgba(20,30,50,.08),
      0 0 28px rgba(20,118,187,.20);
    transition:transform .35s ease-in-out, box-shadow .35s ease-in-out, border-color .35s ease-in-out, background .35s ease-in-out;
  }

  /* Icon scale on card hover — applied to the svg only, so it never fights the .step-illo floaty animation */
  body.page-about .step-card:hover .step-illo svg {transform:scale(1.05);}

  body.page-about .step-illo svg {transition:transform .3s ease-in-out;}


  body.page-about .step-illo {
    position:absolute;top:-28px;z-index:2;width:74px;height:74px;border-radius:18px;
    background:linear-gradient(155deg,var(--tint),#fff);border:1px solid var(--line);
    display:flex;align-items:center;justify-content:center;font-size:28px;color:var(--blue);
    box-shadow:0 8px 20px rgba(20,30,50,.10);
    animation:floaty 5.5s ease-in-out infinite alternate;
    transition:background .35s ease-in-out, border-color .35s ease-in-out, box-shadow .35s ease-in-out;
  }

  body.page-about .step-card:hover .step-illo {
    background:linear-gradient(155deg,#E4F0FA,#fff);
    border-color:var(--blue);
    box-shadow:0 10px 24px rgba(20,118,187,.20);
  }

  body.page-about .step-illo svg {width:32px;height:32px;}

  body.page-about .step:nth-child(odd) .step-illo {right:-24px;}

  body.page-about .step:nth-child(even) .step-illo {left:-24px;}

  @keyframes floaty {0%{transform:translateY(0) rotate(0deg);}100%{transform:translateY(-7px) rotate(1deg);}}

  body.page-about .step-illo.pop-in {animation:popIn .6s cubic-bezier(.22,1,.36,1) forwards;}

  @keyframes popIn {0%{transform:scale(.55) rotate(-4deg);opacity:0;}65%{transform:scale(1.08) rotate(1deg);opacity:1;}100%{transform:scale(1) rotate(0deg);opacity:1;}}


  body.page-about .step-number {display:inline-block;font-size:12.5px;font-weight:700;letter-spacing:.14em;color:var(--blue);opacity:0;transform:translateY(10px);transition:all .5s cubic-bezier(.16,1,.3,1);margin-bottom:8px;}

  body.page-about .step-heading {font-size:20px;font-weight:700;margin-bottom:10px;opacity:0;transform:translateX(-20px);transition:all .6s cubic-bezier(.16,1,.3,1);}

  body.page-about .step-desc {color:var(--ink-soft);font-size:13.5px;line-height:1.75;opacity:0;transform:translateY(14px);transition:all .6s cubic-bezier(.16,1,.3,1);max-width:340px;}

  body.page-about .step:nth-child(even) .step-desc {margin-left:auto;}


  body.page-about .step.active .step-number {opacity:1;transform:translateY(0);transition-delay:.05s;}

  body.page-about .step.active .step-heading {opacity:1;transform:translateX(0);transition-delay:.16s;}

  body.page-about .step.active .step-desc {opacity:1;transform:translateY(0);transition-delay:.28s;}

  body.page-about .step.passed .step-number,
body.page-about .step.passed .step-heading,
body.page-about .step.passed .step-desc {opacity:1;transform:none;}


  /* ---------- Active-step colour highlight (current step only) ---------- */
  /* Uses explicit transition lists (instead of "all") so colour can carry its own delay,
     letting the connector line finish drawing first. Opacity/transform timings are unchanged. */
  body.page-about .step-number {transition:color .35s ease-in-out,opacity .5s cubic-bezier(.16,1,.3,1),transform .5s cubic-bezier(.16,1,.3,1);}

  body.page-about .step-heading {transition:color .35s ease-in-out,opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1);}

  body.page-about .step-desc {transition:color .35s ease-in-out,opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1);}


  body.page-about .step.current-step .step-number,
body.page-about .step.current-step .step-heading,
body.page-about .step.current-step .step-desc {
    color:var(--blue);
    transition-delay:.38s; /* text colour waits for the connector line to finish drawing */
  }


  /* Card hover: heading + description ease into the active blue theme */
  body.page-about .step-card:hover .step-heading {color:var(--blue);}

  body.page-about .step-card:hover .step-desc {color:var(--ink);}


  /* ---------- Animated connector: timeline centre -> card ---------- */
  body.page-about .step-connector {
    position:absolute;top:50%;height:2px;background:var(--blue);
    border-radius:2px;z-index:2;pointer-events:none;
    box-shadow:0 0 6px 1px rgba(20,118,187,.4);
    transition:transform .35s cubic-bezier(.4,0,.2,1);
  }

  body.page-about .step:nth-child(odd) .step-connector {
    right:50%;width:6%;transform-origin:right center;transform:translateY(-50%) scaleX(0);
  }

  body.page-about .step:nth-child(even) .step-connector {
    left:50%;width:6%;transform-origin:left center;transform:translateY(-50%) scaleX(0);
  }

  body.page-about .step.current-step .step-connector {transform:translateY(-50%) scaleX(1);}


  /* ---------- Icon pulse (fires once when a step becomes current) ---------- */
  @keyframes iconPulse {0%{transform:scale(1);}50%{transform:scale(1.14);}100%{transform:scale(1);}}

  body.page-about .step-illo.icon-pulse {animation:iconPulse .5s ease-in-out;}


  @media (max-width:760px) {
    body.page-about .step-connector {display:none;}

    body.page-about .timeline-wrap {padding:0 20px 0 54px;}

    body.page-about .timeline-track {left:20px;transform:none;}

    body.page-about .step {justify-content:flex-start;align-items:flex-start;min-height:0;margin-bottom:20px;padding-left:20px;}

    body.page-about .step-node {left:20px;}

    body.page-about .step-card {width:100%;margin:0 !important;}

    body.page-about .step:nth-child(odd) .step-illo,
body.page-about .step:nth-child(even) .step-illo {left:auto;right:14px;top:-20px;width:56px;height:56px;font-size:22px;}

    body.page-about .step:nth-child(even) .step-desc {margin-left:0;}

  
}


  /* ================= Section 4 — Why choose us ================= */
  body.page-about .why-grid {display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}

  body.page-about .why-card {padding:32px 26px;border:1px solid var(--line);border-radius:18px;background:#fff;transition:box-shadow .2s ease, border-color .2s ease;}

  body.page-about .why-card:hover {box-shadow:0 18px 36px rgba(20,118,187,.10);border-color:#CFE1F1;}

  body.page-about .why-card .icon-badge {width:48px;height:48px;border-radius:12px;background:var(--tint);display:flex;align-items:center;justify-content:center;color:var(--blue);margin-bottom:20px;}

  body.page-about .why-card h4 {font-size:16px;font-weight:700;margin-bottom:8px;}

  body.page-about .why-card p {font-size:13px;color:var(--ink-soft);line-height:1.7;}

  body.page-about .why-card .accent-bar {width:24px;height:3px;border-radius:3px;background:var(--gold);margin-top:16px;}


  @media (max-width:900px) {
body.page-about .why-grid {grid-template-columns:1fr 1fr;}
}

  @media (max-width:560px) {
body.page-about .why-grid {grid-template-columns:1fr;}
}


  /* ================= Section 5 — CTA ================= */
 body.page-about .cta-section {padding:0 0 86px;}

body.page-about .cta-panel {background:linear-gradient(120deg,var(--blue-dark),#0C2C63);border-radius:20px;padding:48px 56px;display:flex;align-items:center;justify-content:space-between;gap:30px;position:relative;overflow:hidden;}

body.page-about .cta-panel::after {content:'';position:absolute;right:-40px;bottom:-60px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(140,180,255,.18),transparent 70%);}

body.page-about .cta-panel h2 {font-size:25px;font-weight:700;color:#fff;margin-bottom:8px;}

body.page-about .cta-panel p {font-size:14px;color:#B9C4DA;}

body.page-about .cta-rocket {position:relative;z-index:1;}


@media (max-width:980px) {
  body.page-about .cta-panel {flex-direction:column;}
}

@media (max-width:640px) {
  body.page-about .cta-panel {padding:32px 24px;flex-direction:column;text-align:center;}

  body.page-about .cta-panel h2 {font-size:21px;}
}

 body.page-about .btn-white {
  background:#fff;
}

  /* about page footer = the shared footer (footer.html); no page-specific overrides, so it matches every other page */
  body.page-about footer {background:var(--blue-dark);}


  /* ================= QUOTE / CONSULTATION POPUP =================
     Made global (was previously scoped to body.page-about) so the
     same popup works from any page. Markup lives in footer.html
     (shared include); behaviour lives in main.js and binds to
     every .get-in-touch-btn. ================================= */
  .quote-overlay {
    position:fixed; inset:0; z-index:900;
    background:rgba(22,34,63,.35);
    opacity:0; visibility:hidden;
    transition:opacity .28s ease, visibility 0s linear .28s;
  }

  .quote-overlay.is-open {
    opacity:1; visibility:visible;
    transition:opacity .28s ease, visibility 0s linear 0s;
  }


  .quote-popup {
    position:fixed; z-index:901;
    width:420px; max-width:calc(100vw - 32px);
    max-height:calc(100vh - 32px);
    max-height:calc(100dvh - 32px);   /* iOS Safari: 100vh ignores the collapsing toolbar */
    background:#fff; border:1.5px solid var(--blue);
    border-radius:14px;
    box-shadow:0 24px 60px rgba(15,40,80,.22);
    padding:34px 30px 30px;
    opacity:0; visibility:hidden;
    transform:translateY(-10px) scale(.97);
    transform-origin:top center;
    transition:opacity .24s cubic-bezier(.4,0,.2,1), transform .24s cubic-bezier(.4,0,.2,1), visibility 0s linear .24s;
  }

  .quote-popup.is-open {
    opacity:1; visibility:visible;
    transform:translateY(0) scale(1);
    transition:opacity .24s cubic-bezier(.4,0,.2,1), transform .24s cubic-bezier(.4,0,.2,1), visibility 0s linear 0s;
  }

  .quote-popup.flip-up {
    transform-origin:bottom center;
    transform:translateY(10px) scale(.97);
  }

  .quote-popup.flip-up.is-open {
    transform:translateY(0) scale(1);
  }


  /* speech-bubble pointer + gold dot, matching reference mockup */
  .quote-popup::before {
    content:'';
    position:absolute; top:-11px; left:50%; transform:translateX(-50%);
    width:20px; height:20px;
    background:#fff;
    border-left:1.5px solid var(--blue);
    border-top:1.5px solid var(--blue);
    border-radius:3px 0 0 0;
    transform:translateX(-50%) rotate(45deg);
  }

  .quote-popup.pointer-left::before { left:var(--pointer-x,38px); transform:rotate(45deg); }

  .quote-popup .pointer-dot {
    position:absolute; top:-30px; left:50%; transform:translateX(-50%);
    width:20px; height:20px; border-radius:50%;
    background:var(--gold);
    box-shadow:0 3px 8px rgba(240,173,0,.4);
  }

  .quote-popup.pointer-left .pointer-dot { left:var(--pointer-x,38px); transform:none; }

  .quote-popup.flip-up::before { top:auto; bottom:-11px; border:0; border-right:1.5px solid var(--blue); border-bottom:1.5px solid var(--blue); border-radius:0 0 3px 0; }

  .quote-popup.flip-up .pointer-dot { top:auto; bottom:-30px; }


  .quote-close {
    position:absolute; top:14px; right:14px;
    width:32px; height:32px; border-radius:50%; border:0;
    background:var(--tint); color:var(--blue-dark);
    display:flex; align-items:center; justify-content:center;
    cursor:pointer; transition:background .15s ease, color .15s ease, transform .15s ease;
  }

  .quote-close:hover { background:var(--blue); color:#fff; transform:rotate(90deg); }

  .quote-close svg { width:15px; height:15px; }


  .quote-popup h3 {
    font-size:19px; margin:0 0 20px; padding-right:26px;
    color:var(--blue-dark);
  }


  .quote-form { display:flex; flex-direction:column; gap:14px; }

  .quote-row { display:flex; gap:12px; }

  .quote-row .quote-field { flex:1 1 0; min-width:0; }


  .quote-field input,
.quote-field textarea {
    width:100%; border:1.5px solid var(--blue); border-radius:8px;
    padding:13px 14px; font-family:'Inter',sans-serif; font-size:14.5px;
    color:var(--ink); background:#fff; outline:none; resize:none;
    transition:border-color .15s ease, box-shadow .15s ease;
  }

  .quote-field textarea { min-height:110px; }

  .quote-field input::placeholder,
.quote-field textarea::placeholder { color:#8b93a6; }

  .quote-field input:focus,
.quote-field textarea:focus {
    border-color:var(--blue-deep);
    box-shadow:0 0 0 3px rgba(20,118,187,.14);
  }


  .quote-recaptcha {
    display:flex; align-items:center; justify-content:space-between;
    border:1px solid #d3d9e3; border-radius:6px; background:#f9f9f9;
    padding:12px 14px;
  }

  .quote-recaptcha-left { display:flex; align-items:center; gap:10px; }

  .quote-recaptcha input[type="checkbox"] {
    width:20px; height:20px; accent-color:var(--blue); cursor:pointer;
  }

  .quote-recaptcha-left span { font-size:13.5px; color:var(--ink); }

  .quote-recaptcha-badge { text-align:center; }

  .quote-recaptcha-badge svg { display:block; margin:0 auto; }

  .quote-recaptcha-badge small { display:block; font-size:9px; color:#9099a8; margin-top:2px; }


  .quote-submit {
    align-self:flex-start;
    background:#fff; color:var(--blue);
    border:1.5px solid var(--blue); border-radius:26px;
    padding:12px 34px; font-family:'Poppins',sans-serif; font-weight:600; font-size:14.5px;
    cursor:pointer; transition:all .18s ease;
  }

  .quote-submit:hover { background:var(--blue); color:#fff; }


  .quote-success {
    display:none; align-items:center; gap:10px;
    background:var(--gold-soft); border-radius:8px; padding:12px 14px;
    font-size:13.5px; color:var(--blue-dark); font-weight:500;
  }

  .quote-success.is-visible { display:flex; }


  @media (max-width:480px) {
    .quote-popup { padding:28px 20px 24px; }

    .quote-row { flex-direction:column; }

  
}


/* ==========================================================================
   CONTACT PAGE (contactus.html)
   Scoped under body.page-contact — see note above about.html section.
   ========================================================================== */
  body.page-contact {
    --primary:#1476BB;
    --orange:#f0ad00;
    --primary-dark:#0f5a91;
    --primary-light:#4ea3d8;
    --accent:#E8B84B;
    --accent-light:#f3d08a;
    --navy:#0B1F3A;
    --navy-2:#0e2547;
    --ink:#12253b;
    --muted:#5b6b7f;
    --line:#e4ecf3;
    --bg:#ffffff;
    --bg-soft:#f4f9fd;
    --radius-lg:24px;
    --radius-md:18px;
    --radius-sm:12px;
    --shadow-soft:0 20px 45px -20px rgba(20,118,187,.22);
    --shadow-card:0 30px 60px -30px rgba(11,31,58,.18);
    --ease:cubic-bezier(.22,.9,.32,1);
  }


  body.page-contact {
    font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
    background:var(--bg);
    color:var(--ink);
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
  }

  body.page-contact img {max-width:100%;display:block;}

  body.page-contact button {font-family:inherit;cursor:pointer;border:none;background:none;}

  body.page-contact input,
body.page-contact textarea,
body.page-contact select {font-family:inherit;}


  body.page-contact .container {max-width:1180px;margin:0 auto;padding:0 32px;}


  /* Reduced motion */
  @media (prefers-reduced-motion: reduce) {
    body.page-contact * {animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}

  
}


  /* ===================== HEADER =====================
     Everything previously here for a "site-header / nav-wrap / brand /
     primary-nav / nav-link / dropdown" header design has been removed:
     none of those classes exist in the current shared header.html markup
     (that header was replaced by the shared header — see header.html —
     before this cleanup), so those rules had zero effect. The few rules
     below DO still match the real shared header (its .caret, .search-input
     and .search-btn), each with different values than the consolidated
     "4. Header & primary navigation" section, so they're kept here as
     intentional page-specific overrides rather than being removed. */
  body.page-contact .caret {width:9px;height:9px; transition:transform .3s var(--ease);}

  body.page-contact .nav-item:hover .caret {transform:rotate(180deg);}

  body.page-contact .search-input {
    width:0; opacity:0; padding:0; border:none; outline:none;
    background:var(--bg-soft); border-radius:20px; font-size:13.5px; color:var(--ink);
    transition:width .4s var(--ease), opacity .3s var(--ease), padding .4s var(--ease);
  }

  body.page-contact .search-btn {
    width:38px;height:38px;border-radius:50%; display:flex; align-items:center; justify-content:center;
    color:var(--navy); transition:background .3s var(--ease), color .3s var(--ease);
    flex-shrink:0;
  }

  body.page-contact .search-btn:hover {background:var(--bg-soft); color:var(--primary);}

  body.page-contact .search-btn svg {width:18px;height:18px;}


  /* ===================== HERO ===================== */
  body.page-contact .hero {
    position:relative; overflow:hidden;
    padding:96px 0 90px;
    background:
      radial-gradient(900px 500px at 85% 10%, rgba(20,118,187,.07), transparent 60%),
      radial-gradient(700px 500px at 0% 90%, rgba(232,184,75,.08), transparent 60%),
      linear-gradient(180deg, #ffffff 0%, var(--bg-soft) 100%);
  }

  body.page-contact .blob {
    position:absolute; border-radius:50%; filter:blur(60px);
    opacity:.35; pointer-events:none;
  }

  body.page-contact .blob-1 {width:420px;height:420px; background:radial-gradient(circle, var(--primary-light), transparent 70%); top:-140px; right:-60px; animation:driftA 16s ease-in-out infinite;}

  body.page-contact .blob-2 {width:320px;height:320px; background:radial-gradient(circle, var(--accent-light), transparent 70%); bottom:-100px; left:-80px; animation:driftB 18s ease-in-out infinite;}

  @keyframes driftA {0%,100%{transform:translate(0,0);}50%{transform:translate(-30px,30px);}}

  @keyframes driftB {0%,100%{transform:translate(0,0);}50%{transform:translate(25px,-25px);}}


  body.page-contact .aus-map {
    position:absolute; right:2%; top:8%; width:640px; height:640px;
    opacity:.07; pointer-events:none; z-index:0;
    animation:mapGlow 6s ease-in-out infinite;
  }

  @keyframes mapGlow {0%,100%{opacity:.06;}50%{opacity:.11;}}


  body.page-contact .hero-grid {
    display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:40px;
    position:relative; z-index:2;
  }

  body.page-contact .hero-copy .eyebrow {
    display:inline-flex; align-items:center; gap:8px;
    color:var(--primary); font-weight:700; font-size:13px; letter-spacing:.12em;
    text-transform:uppercase; margin-bottom:18px;
    opacity:0; transform:translateY(14px); animation:fadeUp .7s var(--ease) forwards; animation-delay:.05s;
  }

  body.page-contact .eyebrow::before {content:''; width:8px; height:8px; border-radius:50%; background:var(--primary); box-shadow:0 0 0 4px rgba(232,184,75,.2);}

  body.page-contact .hero-copy h1 {
    font-size:56px; line-height:1.08; font-weight:800; color:var(--navy); letter-spacing:-.015em;
    opacity:0; transform:translateY(14px); animation:fadeUp .7s var(--ease) forwards; animation-delay:.18s;
  }

  body.page-contact .hero-copy h1 .accent-line {
    color:var(--primary); position:relative; display:inline-block;
  }

  body.page-contact .hero-copy .rule {
    width:64px; height:4px; border-radius:4px; background:var(--primary); margin:22px 0 20px;
    opacity:0; transform:scaleX(0); transform-origin:left; animation:growRule .6s var(--ease) forwards; animation-delay:.4s;
  }

  @keyframes growRule {to{opacity:1; transform:scaleX(1);}}

  body.page-contact .hero-copy p {
    font-size:17px; line-height:1.7; color:var(--muted); max-width:460px; margin-bottom:32px;
    opacity:0; transform:translateY(14px); animation:fadeUp .7s var(--ease) forwards; animation-delay:.5s;
  }

  @keyframes fadeUp {to{opacity:1; transform:translateY(0);}}


  body.page-contact .btn {
    position:relative; display:inline-flex; align-items:center; gap:10px;
    padding:16px 30px; border-radius:14px; font-weight:700; font-size:15px;
    background:var(--primary); color:#fff;
    box-shadow:0 16px 30px -12px rgba(20,118,187,.55);
    transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease);
    overflow:hidden;
  }

  body.page-contact .btn svg {width:17px;height:17px; transition:transform .35s var(--ease);}

  body.page-contact .btn:hover {transform:translateY(-3px) scale(1.03); box-shadow:0 22px 40px -14px rgba(20,118,187,.6);}

  body.page-contact .btn:hover svg {transform:translateX(4px);}

  body.page-contact .hero-copy .btn {
    opacity:0; transform:translateY(14px); animation:fadeUp .7s var(--ease) forwards; animation-delay:.65s;
  }


  body.page-contact .hero-art {
    position:relative; display:flex; justify-content:center; align-items:center;
    min-height:520px;
  }

  body.page-contact .art-frame {
    position:relative; width:100%; max-width:520px;
    animation:floaty-contact 6s ease-in-out infinite;
    will-change:transform;
  }

  @keyframes floaty-contact {0%,100%{transform:translateY(0);}50%{transform:translateY(-9px);}}

  body.page-contact .art-frame img {
    width:100%; border-radius:28px;
    filter:drop-shadow(0 40px 60px rgba(11,31,58,.18));
  }

  body.page-contact .art-glow {
    position:absolute; inset:8%; border-radius:50%;
    background:radial-gradient(circle, rgba(20,118,187,.16), transparent 70%);
    z-index:-1; filter:blur(10px);
  }

  body.page-contact .float-icon {
    position:absolute; width:52px; height:52px; border-radius:50%;
    background:#fff; box-shadow:0 16px 30px -10px rgba(11,31,58,.25);
    display:flex; align-items:center; justify-content:center;
    animation:iconFloat 5s ease-in-out infinite;
  }

  body.page-contact .float-icon svg {width:22px;height:22px; color:var(--primary);}

  body.page-contact .fi-1 {top:2%; left:6%; animation-delay:.2s;}

  body.page-contact .fi-2 {top:14%; right:0%; animation-delay:1.1s;}

  body.page-contact .fi-3 {bottom:18%; left:-4%; animation-delay:.6s;}

  body.page-contact .fi-4 {bottom:2%; right:10%; animation-delay:1.6s;}

  @keyframes iconFloat {0%,100%{transform:translateY(0) rotate(0deg);}50%{transform:translateY(-14px) rotate(4deg);}}


  body.page-contact .pin {
    position:absolute; width:14px; height:14px; border-radius:50%;
    background:var(--primary); box-shadow:0 0 0 5px rgba(20,118,187,.16);
    animation:pinPulse 3s ease-in-out infinite;
  }

  body.page-contact .pin::after {content:''; position:absolute; inset:-10px; border-radius:50%; border:1.5px solid rgba(20,118,187,.35); animation:pinRing 3s ease-out infinite;}

  @keyframes pinPulse {0%,100%{transform:scale(1);}50%{transform:scale(1.15);}}

  @keyframes pinRing {0%{transform:scale(.6); opacity:.9;}100%{transform:scale(2.4); opacity:0;}}

  body.page-contact .p1 {top:8%; right:22%;}

  body.page-contact .p2 {top:40%; right:-2%;}

  body.page-contact .p3 {bottom:12%; right:14%;}


  @media (max-width:940px) {
    body.page-contact .hero-grid {grid-template-columns:1fr; text-align:left;}

    body.page-contact .hero-copy h1 {font-size:40px;}

    body.page-contact .hero-art {order:-1; min-height:380px;}

    body.page-contact .aus-map {width:420px; height:420px;}

  
}


  /* ===================== SECTION HEADS ===================== */
  body.page-contact .reveal {opacity:0; transform:translateY(24px); transition:opacity .7s var(--ease), transform .7s var(--ease);}

  body.page-contact .reveal.in-view {opacity:1; transform:translateY(0);}


  /* ===================== CONTACT SECTION ===================== */
  body.page-contact .contact-section {
    position:relative;
    padding:40px 0 120px;
    background:
      radial-gradient(1000px 500px at 100% 0%, rgba(20,118,187,.05), transparent 60%);
  }

  body.page-contact .contact-grid {
    display:grid; grid-template-columns:1.35fr 1fr; gap:32px; align-items:start;
  }


  body.page-contact .card {
    border-radius:var(--radius-lg);
    transition:transform .45s var(--ease), box-shadow .45s var(--ease);
  }


  body.page-contact .form-card {
    background:rgba(255,255,255,.75);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    border:1px solid rgba(20,118,187,.1);
    box-shadow:var(--shadow-card);
    padding:48px;
    position:relative;
    overflow:hidden;
  }

  body.page-contact .form-card::before {
    content:''; position:absolute; inset:0; border-radius:inherit; padding:1.5px;
    background:linear-gradient(135deg, rgba(20,118,187,0), rgba(20,118,187,0));
    transition:background .5s var(--ease);
    -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor; mask-composite:exclude;
    pointer-events:none;
  }

  body.page-contact .form-card:hover::before {
    background:linear-gradient(135deg, rgba(20,118,187,.5), rgba(232,184,75,.4));
  }

  body.page-contact .form-card:hover {transform:translateY(-6px); box-shadow:0 40px 70px -30px rgba(20,118,187,.28);}


  body.page-contact .form-card h2 {font-size:28px; font-weight:800; color:var(--navy); margin-bottom:6px;}

  body.page-contact .form-card .rule {width:52px; height:4px; border-radius:4px; background:var(--primary); margin-bottom:32px;}


  body.page-contact .field-row {display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-bottom:22px;}

  body.page-contact .field {position:relative;}

  body.page-contact .field label {
    display:block; font-size:13.5px; font-weight:700; color:var(--navy); margin-bottom:8px;
  }

  body.page-contact .field label .req {color:var(--accent); margin-left:2px;}

  body.page-contact .input-shell {
    position:relative; display:flex; align-items:center;
    border:1.5px solid var(--line); border-radius:12px; background:#fff;
    transition:border-color .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease);
  }

  body.page-contact .input-shell svg {
    position:absolute; left:14px; width:17px; height:17px; color:var(--muted);
    transition:color .3s var(--ease);
  }

  body.page-contact .input-shell input,
body.page-contact .input-shell select,
body.page-contact .input-shell textarea {
    width:100%; border:none; outline:none; background:transparent;
    padding:13px 16px 13px 40px; font-size:14.5px; color:var(--ink); border-radius:12px;
  }

  body.page-contact .input-shell textarea {padding-left:16px; resize:vertical; min-height:120px;}

  body.page-contact .input-shell.no-icon input,
body.page-contact .input-shell.no-icon select {padding-left:16px;}

  body.page-contact .input-shell select {appearance:none; -webkit-appearance:none; cursor:pointer;}

  body.page-contact .select-arrow {position:absolute; right:16px; width:12px; height:12px; color:var(--muted); pointer-events:none;}

  body.page-contact .input-shell:hover {border-color:#cfe0ee;}

  body.page-contact .input-shell:focus-within {
    border-color:var(--primary);
    box-shadow:0 0 0 4px rgba(20,118,187,.12);
    transform:translateY(-2px);
  }

  body.page-contact .input-shell:focus-within svg {color:var(--primary);}

  body.page-contact .field.valid .input-shell {border-color:#2fa86b;}

  body.page-contact .field.invalid .input-shell {border-color:#e0575a; animation:shake .4s var(--ease);}

  @keyframes shake {0%,100%{transform:translateX(0);}25%{transform:translateX(-4px);}75%{transform:translateX(4px);}}

  body.page-contact .hint {font-size:12px; margin-top:6px; min-height:14px; color:#e0575a; opacity:0; transition:opacity .25s var(--ease);}

  body.page-contact .field.invalid .hint {opacity:1;}


  body.page-contact .textarea-wrap .pencil {
    position:absolute; right:16px; top:16px; width:16px; height:16px; color:var(--muted);
  }


  body.page-contact .form-foot {
    display:flex; align-items:center; justify-content:space-between; margin-top:30px; flex-wrap:wrap; gap:16px;
  }

  body.page-contact .send-btn {
    position:relative; overflow:hidden;
    background:linear-gradient(135deg, var(--primary), var(--primary-dark));
  }

  body.page-contact .ripple {
    position:absolute; border-radius:50%; background:rgba(255,255,255,.5);
    transform:scale(0); animation:rippleAnim .6s ease-out forwards; pointer-events:none;
  }

  @keyframes rippleAnim {to{transform:scale(1); opacity:0;}}

  body.page-contact .secure-note {display:flex; align-items:center; gap:8px; font-size:13px; color:var(--muted);}

  body.page-contact .secure-note svg {width:16px; height:16px; color:var(--primary);}


  /* Get in touch card */
  body.page-contact .touch-card {
    background:linear-gradient(160deg, var(--primary) 0%, var(--primary-dark) 100%);
    color:#fff; padding:44px 40px; position:relative; overflow:hidden;
    box-shadow:0 30px 60px -25px rgba(20,118,187,.5);
  }

  body.page-contact .touch-card:hover {transform:translateY(-6px); box-shadow:0 40px 70px -25px rgba(20,118,187,.6);}

  body.page-contact .touch-map {
    position:absolute; right:-40px; top:0; width:340px; height:100%;
    opacity:.14; pointer-events:none;
  }

  body.page-contact .touch-card h3 {font-size:25px; font-weight:800; margin-bottom:6px; position:relative; z-index:2;}

  body.page-contact .touch-card .rule {width:48px; height:4px; border-radius:4px; background:var(--accent); margin-bottom:30px; position:relative; z-index:2;}

  body.page-contact .touch-item {
    display:flex; align-items:flex-start; gap:16px; padding:18px 0;
    border-bottom:1px solid rgba(255,255,255,.16);
    position:relative; z-index:2;
    transition:transform .35s var(--ease);
  }

  body.page-contact .touch-item:last-child {border-bottom:none;}

  body.page-contact .touch-item:hover {transform:translateX(6px);}

  body.page-contact .touch-icon {
    width:46px; height:46px; border-radius:50%; background:rgba(255,255,255,.14);
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
    transition:transform .4s var(--ease), background .4s var(--ease);
  }

  body.page-contact .touch-item:hover .touch-icon {transform:rotate(4deg) scale(1.05); background:rgba(255,255,255,.22);}

  body.page-contact .touch-icon svg {width:20px; height:20px; color:#fff;}

  body.page-contact .touch-item .t-label {font-size:12.5px; text-transform:uppercase; letter-spacing:.05em; opacity:.75; margin-bottom:3px; font-weight:600;}

  body.page-contact .touch-item .t-value {font-size:16.5px; font-weight:700;}


  @media (max-width:940px) {
    body.page-contact .contact-grid {grid-template-columns:1fr;}

    body.page-contact .field-row {grid-template-columns:1fr;}

    body.page-contact .form-card {padding:32px 24px;}

  
}


  /* ===================== FOOTER =====================
     Everything previously here for a "footer.site-footer / footer-grid /
     footer-brand / social-row / news-form / footer-bottom" footer design
     has been removed: none of those classes exist in the current shared
     footer.html markup, so those rules had zero effect. "footer h4" below
     DOES still match the real shared footer's column headings, with
     different values than the consolidated "14. Footer" section, so it's
     kept here as an intentional page-specific override rather than being
     removed. */
  body.page-contact footer h4 {color:#fff; font-size:15px; font-weight:700; margin-bottom:20px;}


  @media (max-width:560px) {
    body.page-contact .hero-copy h1 {font-size:34px;}

    body.page-contact .container {padding:0 20px;}

  
}


  /* focus visibility */
  body.page-contact a:focus-visible,
body.page-contact button:focus-visible,
body.page-contact input:focus-visible,
body.page-contact textarea:focus-visible,
body.page-contact select:focus-visible {
    outline:2px solid var(--accent); outline-offset:2px;
  }


/* ==========================================================================
   PORTFOLIO PAGE (portfolio.html)
   Scoped under body.page-portfolio — see note above about.html section.
   ========================================================================== */
  /* ================================================================
     ROOT VARIABLES
     — top block: portfolio.html (drives Hero)
     — bottom block: globedge-portfolio-v2.html unique vars (drive Our Work / Testimonials)
     Note: --ink, --line, --white, --ease exist in BOTH source files with
     different values. To avoid one section overwriting the other's look,
     the v2 versions of those four are re-declared locally on .v2-scope
     further down instead of here.
  ================================================================ */
  body.page-portfolio {
    --primary:#1476BB;
    --primary-dark:#0e5c94;
    --primary-light:#e3f0f9;
    --accent:#F0AD00;
    --accent-soft:#fff4dc;
    --ink:#0f2a3d;
    --body:#5b6b78;
    --line:#e6edf2;
    --bg-soft:#f4f8fb;
    --white:#ffffff;
    --shadow-sm:0 8px 18px rgba(15,42,61,0.06);
    --shadow-md:0 18px 34px rgba(15,42,61,0.10);
    --shadow-lg:0 26px 60px rgba(15,42,61,0.14);
    --ease:cubic-bezier(.22,.8,.32,1);

    --blue: #1476BB;
    --blue-deep: #0E5A93;
    --navy: #071A31;
    --navy-2: #0B2647;
    --paper: #FBFCFD;
    --mist: #EEF3F7;
    --mist-2: #E3EAF1;
    --gold: #C9A227;
    --font-display: 'Poppins', sans-serif;
    --font-body: 'Poppins', sans-serif;
    --font-mono: 'Poppins', sans-serif;
  }


  /* ============ SHARED RESET (merged from both files) ============ */
  body.page-portfolio {
    font-family:'Poppins', Arial, sans-serif;
    color:var(--ink);
    background:var(--white);
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }

  body.page-portfolio img,
body.page-portfolio svg {display:block;max-width:100%;}

  body.page-portfolio button {font-family:inherit;cursor:pointer;}


  /* ============ SCROLL REVEAL BASE (portfolio.html — drives Hero) ============ */
  body.page-portfolio .reveal {
    opacity:0;
    transform:translateY(26px);
    transition:opacity .7s var(--ease), transform .7s var(--ease);
    will-change:opacity, transform;
  }

  body.page-portfolio .reveal.in-view {opacity:1;transform:translateY(0);}

  body.page-portfolio .reveal-scale {opacity:0;transform:translateY(18px) scale(.96);transition:opacity .6s var(--ease), transform .6s var(--ease);}

  body.page-portfolio .reveal-scale.in-view {opacity:1;transform:translateY(0) scale(1);}


  @media (prefers-reduced-motion: reduce) {
    body.page-portfolio *,
body.page-portfolio *::before,
body.page-portfolio *::after {
      animation-duration:0.01ms !important;
      animation-iteration-count:1 !important;
      transition-duration:0.01ms !important;
      scroll-behavior:auto !important;
    }

    body.page-portfolio .reveal,
body.page-portfolio .reveal-scale {opacity:1;transform:none;}

  
}


  /* ============ HERO (portfolio.html — preserved as-is) ============ */
  body.page-portfolio .hero {
    background:radial-gradient(120% 140% at 85% 10%, #eef7fc 0%, #e3eef8 45%, #dbeaf6 100%);
    padding:56px 48px 96px;
    display:grid;
    grid-template-columns:1.02fr 0.98fr;
    align-items:center;
    gap:36px;
    overflow:hidden;
    position:relative;
  }

  body.page-portfolio .hero::before {
    content:'';
    position:absolute;
    top:-120px;right:-120px;
    width:420px;height:420px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(240,173,0,0.12) 0%, rgba(240,173,0,0) 70%);
    pointer-events:none;
  }

  body.page-portfolio .breadcrumb {grid-column:1/-1;font-size:13px;color:var(--body);margin-bottom:4px;}

  body.page-portfolio .breadcrumb a {color:var(--primary);font-weight:500;}


  body.page-portfolio .hero-eyebrow {
    display:inline-flex;align-items:center;gap:8px;
    font-size:12px;font-weight:700;letter-spacing:0.09em;text-transform:uppercase;
    color:var(--primary-dark);
    background:var(--white);
    border:1px solid var(--line);
    padding:7px 14px 7px 10px;
    border-radius:999px;
    margin-bottom:22px;
    box-shadow:var(--shadow-sm);
  }

  body.page-portfolio .hero-eyebrow .dot {width:7px;height:7px;border-radius:50%;background:var(--accent);}


  body.page-portfolio .hero-left h1 {
    font-size:52px;
    font-weight:800;
    line-height:1.12;
    letter-spacing:-0.015em;
    color:var(--ink);
  }

  body.page-portfolio .hero-left h1 .accent {color:var(--primary);}

  body.page-portfolio .hero-left h1 .underline-accent {position:relative;white-space:nowrap;}

  body.page-portfolio .hero-left h1 .underline-accent svg {position:absolute;left:0;bottom:-10px;width:100%;height:14px;}


  body.page-portfolio .hero-left p.lead {
    font-size:16.5px;
    line-height:1.7;
    color:var(--body);
    max-width:480px;
    margin:24px 0 34px;
  }


  body.page-portfolio .hero-cta-row {display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-bottom:36px;}

  body.page-portfolio .btn-primary {
    display:inline-flex;align-items:center;gap:10px;
    background:var(--primary);
    color:#fff;
    font-size:14.5px;font-weight:700;
    padding:15px 28px;
    border-radius:999px;
    box-shadow:0 12px 24px rgba(20,118,187,0.3);
    border:none;cursor:pointer;
    transition:transform .25s var(--ease), box-shadow .25s var(--ease), background-color .25s var(--ease);
  }

  body.page-portfolio .btn-primary svg {width:16px;height:16px;stroke:#fff;transition:transform .25s var(--ease);}

  body.page-portfolio .btn-primary:hover {transform:translateY(-2px);box-shadow:0 16px 30px rgba(20,118,187,0.38);background:var(--primary-dark);}

  body.page-portfolio .btn-primary:hover svg {transform:translateX(4px);}


  body.page-portfolio .btn-secondary {
    display:inline-flex;align-items:center;gap:10px;
    background:transparent;
    color:var(--ink);
    font-size:14.5px;font-weight:700;
    padding:14px 24px;
    border-radius:999px;
    border:1.5px solid var(--line);
    cursor:pointer;
    transition:border-color .25s var(--ease), color .25s var(--ease), background-color .25s var(--ease);
  }

  body.page-portfolio .btn-secondary:hover {border-color:var(--primary);color:var(--primary);background:var(--white);}


  body.page-portfolio .hero-stats {display:flex;gap:32px;flex-wrap:wrap;}

  body.page-portfolio .hero-stat .num {font-size:23px;font-weight:800;color:var(--ink);}

  body.page-portfolio .hero-stat .num .accent-dot {color:var(--accent);}

  body.page-portfolio .hero-stat .label {font-size:12px;color:var(--body);font-weight:500;margin-top:2px;}

  body.page-portfolio .hero-stat + .hero-stat {border-left:1px solid var(--line);padding-left:32px;}


  /* ---- hero avatar / illustration cluster ---- */
  body.page-portfolio .hero-right {position:relative;height:460px;display:flex;align-items:center;justify-content:center;}


  body.page-portfolio .avatar-ring {
    position:absolute;
    width:420px;height:420px;
    border-radius:50%;
    border:1.5px dashed rgba(20,118,187,0.22);
    animation:spin 46s linear infinite;
  }

  @keyframes spin {to{transform:rotate(360deg);}}

  body.page-portfolio .avatar-illustration {position:relative;width:290px;z-index:2;filter:drop-shadow(0 18px 26px rgba(15,42,61,0.16));}


  body.page-portfolio .float-chip {
    position:absolute;
    display:flex;align-items:center;gap:8px;
    background:#fff;
    border-radius:14px;
    padding:9px 14px 9px 9px;
    box-shadow:var(--shadow-md);
    font-size:12.5px;font-weight:700;color:var(--ink);
    animation:bob 5s ease-in-out infinite;
    z-index:3;
  }

  body.page-portfolio .float-chip .chip-ico {
    width:28px;height:28px;border-radius:9px;
    display:flex;align-items:center;justify-content:center;flex-shrink:0;
    background:var(--primary-light);
  }

  body.page-portfolio .float-chip .chip-ico svg {width:15px;height:15px;stroke:var(--primary);}

  body.page-portfolio .float-chip.accent-ico .chip-ico {background:var(--accent-soft);}

  body.page-portfolio .float-chip.accent-ico .chip-ico svg {stroke:var(--accent);}

  @keyframes bob {0%,100%{transform:translateY(0);}50%{transform:translateY(-9px);}}


  body.page-portfolio .chip-healthcare {top:2%;left:-4%;animation-delay:.2s;}

  body.page-portfolio .chip-food {top:14%;right:-8%;animation-delay:1.1s;}

  body.page-portfolio .chip-pharmacy {bottom:30%;left:-10%;animation-delay:.6s;}

  body.page-portfolio .chip-agedcare {bottom:10%;right:-6%;animation-delay:1.6s;}

  body.page-portfolio .chip-education {top:42%;left:-13%;animation-delay:2.1s;}

  body.page-portfolio .chip-logistics {bottom:0%;left:20%;animation-delay:.9s;}


  body.page-portfolio .dash-card {
    position:absolute;top:-6%;right:6%;
    width:150px;
    background:#fff;
    border-radius:16px;
    padding:14px 16px;
    box-shadow:var(--shadow-lg);
    animation:bob 6s ease-in-out infinite;
    animation-delay:.4s;
    z-index:3;
  }

  body.page-portfolio .dash-card .dash-label {font-size:10px;color:var(--body);font-weight:600;letter-spacing:.03em;text-transform:uppercase;margin-bottom:8px;}

  body.page-portfolio .dash-card .dash-value {font-size:18px;font-weight:800;color:var(--ink);display:flex;align-items:center;gap:6px;margin-bottom:10px;}

  body.page-portfolio .dash-card .dash-value .up {color:#1f9d5a;font-size:11px;font-weight:700;}

  body.page-portfolio .dash-bars {display:flex;align-items:flex-end;gap:4px;height:30px;}

  body.page-portfolio .dash-bars span {flex:1;border-radius:3px;background:var(--primary-light);}

  body.page-portfolio .dash-bars span:nth-child(1) {height:40%;}

  body.page-portfolio .dash-bars span:nth-child(2) {height:65%;}

  body.page-portfolio .dash-bars span:nth-child(3) {height:50%;}

  body.page-portfolio .dash-bars span:nth-child(4) {height:90%;background:var(--accent);}

  body.page-portfolio .dash-bars span:nth-child(5) {height:70%;}


  body.page-portfolio .thumb-card {
    position:absolute;bottom:-2%;left:2%;
    width:132px;
    background:#fff;
    border-radius:14px;
    padding:8px;
    box-shadow:var(--shadow-lg);
    animation:bob 5.5s ease-in-out infinite;
    animation-delay:1.4s;
    z-index:3;
  }

  body.page-portfolio .thumb-card .swatch {
    height:60px;border-radius:9px;margin-bottom:8px;
    background:linear-gradient(135deg,var(--primary) 0%, #1f8fd6 100%);
    position:relative;overflow:hidden;
  }

  body.page-portfolio .thumb-card .swatch::after {
    content:'';position:absolute;inset:0;
    background:linear-gradient(135deg, transparent 40%, rgba(240,173,0,.55) 100%);
  }

  body.page-portfolio .thumb-card .cap {font-size:10.5px;font-weight:700;color:var(--ink);padding:0 2px;}

  body.page-portfolio .thumb-card .cap span {display:block;font-size:9px;font-weight:600;color:var(--body);margin-top:1px;}


  @media (hover:none) {
body.page-portfolio .float-chip,
body.page-portfolio .dash-card,
body.page-portfolio .thumb-card,
body.page-portfolio .avatar-ring {animation:none;}
}


  /* ============ HERO RESPONSIVE (portfolio.html) ============ */
  @media (max-width:1100px) {
    body.page-portfolio .hero {grid-template-columns:1fr;padding:44px 40px 70px;}

    body.page-portfolio .hero-right {order:-1;height:360px;}

    body.page-portfolio .hero-left h1 {font-size:42px;}

    body.page-portfolio .hero-left p.lead {max-width:100%;}

  
}

  @media (max-width:760px) {
    body.page-portfolio .hero {padding:30px 20px 46px;gap:26px;}

    body.page-portfolio .hero-left h1 {font-size:32px;}

    body.page-portfolio .hero-stats {gap:20px;}

    body.page-portfolio .hero-stat + .hero-stat {padding-left:20px;}

    body.page-portfolio .hero-right {height:300px;}

    body.page-portfolio .avatar-backdrop {width:250px;height:250px;}

    body.page-portfolio .avatar-ring {width:280px;height:280px;}

    body.page-portfolio .avatar-illustration {width:180px;}

    body.page-portfolio .dash-card {width:118px;padding:10px 12px;right:2%;}

    body.page-portfolio .thumb-card {width:104px;left:0;}

    body.page-portfolio .chip-education,
body.page-portfolio .chip-logistics {display:none;}

    body.page-portfolio .float-chip {font-size:10.5px;padding:7px 10px 7px 7px;}

    body.page-portfolio .float-chip .chip-ico {width:22px;height:22px;}

    body.page-portfolio .float-chip .chip-ico svg {width:12px;height:12px;}

  
}


  /* ================================================================
     OUR WORK + TESTIMONIALS (globedge-portfolio-v2.html — preserved as-is)
     Scoped inside .v2-scope so its own --ink / --line / --white / --ease
     values (which differ from portfolio.html's) apply only to this part
     of the page and never bleed into the Hero above.
  ================================================================ */
  body.page-portfolio .v2-scope {
    --ink: #12222F;
    --line: #DEE5EC;
    --white: #FFFFFF;
    --ease: cubic-bezier(.22,.61,.36,1);
  }


  body.page-portfolio .v2-scope .wrap { max-width: 1280px; margin: 0 auto; padding: 0 32px; }


  body.page-portfolio .v2-scope .eyebrow {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--gold);
    display:flex;
    align-items:center;
    gap:10px;
  }

  body.page-portfolio .v2-scope .eyebrow::before {
    content:'';
    width: 22px; height: 2px;
    background: var(--gold);
  }

  body.page-portfolio .v2-scope .eyebrow.blue { color: var(--blue); }

  body.page-portfolio .v2-scope .eyebrow.blue::before { background: var(--blue); }


  /* ============ SECTION HEADS ============ */
  body.page-portfolio .v2-scope .section-head { max-width: 620px; margin: 0 auto 44px; text-align:center; }

  body.page-portfolio .v2-scope .section-head .eyebrow { justify-content:center; }

  body.page-portfolio .v2-scope .section-head h2 {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(26px, 3vw, 36px);
    color: var(--navy);
    margin: 14px 0 12px;
    letter-spacing: -.02em;
  }

  body.page-portfolio .v2-scope .section-head p { color:#5A6A76; font-size:15px; line-height:1.7; }


  /* ============ PORTFOLIO (Our Work) ============ */
  body.page-portfolio .v2-scope .portfolio { padding: 84px 0 100px; }


  body.page-portfolio .v2-scope .filter-bar { display:flex; justify-content:center; margin-bottom: 48px; }

  body.page-portfolio .v2-scope .filter-list {
    display:flex; gap: 6px;
    background: var(--white);
    border: 1px solid var(--line);
    padding: 6px; border-radius: 999px;
    flex-wrap: wrap; justify-content:center;
    box-shadow: 0 6px 20px -14px rgba(11,33,56,.15);
  }

  body.page-portfolio .v2-scope .filter-btn {
    border:none; background: transparent; color:#4C5C68;
    font-size: 13.5px; font-weight: 500;
    padding: 10px 18px; border-radius: 999px;
    transition: background .3s var(--ease), color .3s var(--ease);
    white-space: nowrap;
  }

  body.page-portfolio .v2-scope .filter-btn:hover { color: var(--navy); }

  body.page-portfolio .v2-scope .filter-btn.active { background: var(--blue); color: var(--white); }

  body.page-portfolio .v2-scope .filter-btn:focus-visible { outline: 2px solid var(--blue-deep); outline-offset: 3px; }


  body.page-portfolio .v2-scope .filter-select {
    display:none; width:100%; padding:14px 16px; border-radius:8px;
    border: 1px solid var(--line); background: var(--white);
    font-size: 14.5px; color: var(--navy); font-weight:500;
  }


  body.page-portfolio .v2-scope .work-grid {
    display:grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
  }


  /* Simple image-tile Our Work items (no card chrome) */
  body.page-portfolio .v2-scope .work-item {
    position: relative;
    margin: 0;
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 4/3;
    background: #eef2f5;
    transition: opacity .45s var(--ease), transform .45s var(--ease), box-shadow .35s var(--ease);
  }

  body.page-portfolio .v2-scope .work-item img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .55s var(--ease);
  }

  body.page-portfolio .v2-scope .work-item:hover {
    box-shadow: 0 22px 40px -20px rgba(11,33,56,.28);
  }

  body.page-portfolio .v2-scope .work-item:hover img {
    transform: scale(1.06);
  }

  body.page-portfolio .v2-scope .work-item.hide { display:none; }

  body.page-portfolio .v2-scope .work-item figcaption {
    position:absolute; inset:auto 0 0 0;
    padding: 28px 16px 14px;
    font-family: var(--font-display);
    font-size: 13.5px; font-weight:600; color:#fff;
    letter-spacing: -.01em;
    background: linear-gradient(180deg, rgba(6,16,32,0) 0%, rgba(6,16,32,.65) 100%);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .3s var(--ease), transform .3s var(--ease);
  }

  body.page-portfolio .v2-scope .work-item:hover figcaption {
    opacity: 1;
    transform: translateY(0);
  }


  /* ============ LOAD MORE ============ */
  body.page-portfolio .v2-scope .load-more-wrap { text-align:center; margin:44px 0 0; }

  body.page-portfolio .v2-scope .btn-load {
    display:inline-flex; align-items:center; gap:10px;
    background: var(--white);
    border: 1.5px solid var(--blue);
    color: var(--blue);
    font-size: 14px; font-weight:600;
    padding: 13px 30px; border-radius: 999px;
    box-shadow: 0 10px 24px -16px rgba(20,118,187,.5);
    transition: background-color .3s var(--ease), color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
  }

  body.page-portfolio .v2-scope .btn-load:hover {
    background: var(--blue); color: var(--white);
    transform: translateY(-3px);
    box-shadow: 0 18px 32px -16px rgba(20,118,187,.55);
  }

  body.page-portfolio .v2-scope .btn-load svg { width:15px; height:15px; transition: transform .6s var(--ease); }

  body.page-portfolio .v2-scope .btn-load.spinning svg { transform: rotate(360deg); }

  body.page-portfolio .v2-scope .load-more-wrap .done-msg {
    font-size: 13.5px; font-weight:600; color:#5A6A76;
    display:inline-flex; align-items:center; gap:8px;
    opacity:0; transform:translateY(8px);
    animation: doneIn .5s var(--ease) forwards;
  }

  body.page-portfolio .v2-scope .load-more-wrap .done-msg svg { width:16px; height:16px; stroke: var(--blue); }

  @keyframes doneIn { to{ opacity:1; transform:translateY(0); } }


  /* ============ TESTIMONIALS (What Client Says) ============ */
  body.page-portfolio .v2-scope .testimonials {
    background: linear-gradient(180deg, #EDF2FA 0%, #E6EDF7 100%);
    padding: 90px 0 100px;
  }


  body.page-portfolio .v2-scope .t-stage {
    position:relative;
    max-width: 980px;
    margin: 0 auto;
    height: 300px;
  }

  body.page-portfolio .v2-scope .t-track { position:relative; height:100%; }

  body.page-portfolio .v2-scope .t-slide {
    position:absolute; top:0; left:50%;
    width: 560px;
    background: var(--white);
    border-radius: 14px;
    padding: 40px 44px;
    box-shadow: 0 30px 60px -26px rgba(11,33,56,.28);
    transition: transform .55s var(--ease), opacity .55s var(--ease), filter .55s var(--ease);
  }

  body.page-portfolio .v2-scope .t-mark { color: var(--blue); font-size: 34px; font-family: var(--font-display); line-height:1; display:block; margin-bottom: 14px; }

  body.page-portfolio .v2-scope .t-quote { font-size: 16px; line-height:1.7; color: var(--ink); margin-bottom: 26px; font-weight:500; }

  body.page-portfolio .v2-scope .t-foot { display:flex; align-items:center; justify-content:space-between; gap: 16px; border-top: 1px solid var(--line); padding-top: 18px; }

  body.page-portfolio .v2-scope .t-who { display:flex; align-items:center; gap:12px; }

  body.page-portfolio .v2-scope .t-avatar {
    width: 46px; height:46px; border-radius:50%;
    background: linear-gradient(135deg, var(--blue), var(--blue-deep));
    display:flex; align-items:center; justify-content:center;
    color:#fff; font-family: var(--font-display); font-weight:600; font-size:14px;
    flex-shrink:0;
  }

  body.page-portfolio .v2-scope .t-name { font-weight:600; font-size:14px; color:var(--navy); }

  body.page-portfolio .v2-scope .t-role { font-size: 12px; color:#6B7A85; line-height:1.4; }

  body.page-portfolio .v2-scope .t-company { display:flex; align-items:center; gap:8px; }

  body.page-portfolio .v2-scope .t-company .logo-dot { width:22px; height:22px; border-radius:6px; display:flex; align-items:center; justify-content:center; color:#fff; font-size:10px; font-weight:700; font-family: var(--font-display); flex-shrink:0; }

  body.page-portfolio .v2-scope .t-company .co-name { font-size:12.5px; font-weight:600; color: var(--navy); line-height:1.2; }

  body.page-portfolio .v2-scope .t-company .co-sub { font-size:9.5px; color:#8493A0; letter-spacing:.04em; }


  body.page-portfolio .v2-scope .t-industry {
    position:absolute; top:40px; right:44px;
    font-family: var(--font-mono); font-size:9.5px; letter-spacing:.1em;
    text-transform:uppercase; color: var(--gold);
  }


  /* positions driven by JS via data-offset attribute */
  body.page-portfolio .v2-scope .t-slide[data-offset="0"] { transform: translate(-50%,0) scale(1); opacity:1; z-index:5; filter:none; }

  body.page-portfolio .v2-scope .t-slide[data-offset="-1"] { transform: translate(-125%,18px) scale(.88); opacity:.55; z-index:3; filter: blur(.3px); }

  body.page-portfolio .v2-scope .t-slide[data-offset="1"] { transform: translate(25%,18px) scale(.88); opacity:.55; z-index:3; filter: blur(.3px); }

  body.page-portfolio .v2-scope .t-slide[data-offset="far"] { transform: translate(-50%,18px) scale(.8); opacity:0; z-index:1; pointer-events:none; }


  body.page-portfolio .v2-scope .t-controls { display:flex; align-items:center; justify-content:center; gap: 20px; margin-top: 42px; }

  body.page-portfolio .v2-scope .t-arrow {
    width:44px; height:44px; border-radius:50%;
    border: none; background: var(--blue); color: var(--white);
    display:flex; align-items:center; justify-content:center;
    box-shadow: 0 12px 24px -10px rgba(20,118,187,.5);
    transition: background .3s var(--ease), transform .3s var(--ease);
  }

  body.page-portfolio .v2-scope .t-arrow:hover { background: var(--blue-deep); transform: translateY(-2px); }

  body.page-portfolio .v2-scope .t-arrow:focus-visible { outline:2px solid var(--navy); outline-offset:2px; }

  body.page-portfolio .v2-scope .t-dots { display:flex; gap:8px; align-items:center; }

  body.page-portfolio .v2-scope .t-dot { width:7px; height:7px; border-radius:50%; background: #C3CEDA; border:none; transition: background .3s var(--ease), transform .3s var(--ease); }

  body.page-portfolio .v2-scope .t-dot.active { background: var(--blue); transform: scale(1.3); }


  /* ============ OUR WORK / TESTIMONIALS RESPONSIVE ============ */
  @media (max-width: 1080px) {
    body.page-portfolio .v2-scope .work-grid { grid-template-columns: repeat(2, 1fr); }

  
}

  @media (max-width: 680px) {
    body.page-portfolio .v2-scope .wrap { padding: 0 20px; }

    body.page-portfolio .v2-scope .work-grid { grid-template-columns: 1fr; }

    body.page-portfolio .v2-scope .filter-list { display:none; }

    body.page-portfolio .v2-scope .filter-select { display:block; }

    body.page-portfolio .v2-scope .portfolio { padding: 64px 0 72px; }

    body.page-portfolio .v2-scope .testimonials { padding: 64px 0 76px; }

    body.page-portfolio .v2-scope .t-stage { height: 420px; }

    body.page-portfolio .v2-scope .t-slide { width: calc(100vw - 64px); padding: 28px 24px; }

    body.page-portfolio .v2-scope .t-slide[data-offset="-1"],
body.page-portfolio .v2-scope .t-slide[data-offset="1"] { opacity:0; pointer-events:none; }

    body.page-portfolio .v2-scope .t-industry { position:static; display:block; margin-top:8px; }

  
}


/* ==========================================================================
   FLOATING ACTION BUTTONS — Desktop: WhatsApp (left) + Back to top (right)
   Tablet/Mobile (<=991.98px): both on the right, WhatsApp above Back to top
   Namespaced with .gef-* so nothing else on the site is affected.
   z-index 800 keeps them under the consultation popup (900/901).
   ========================================================================== */
.gef-fab-wrap{
  --gef-size:56px;
  --gef-gap:22px;
  --gef-stack-gap:12px;    /* vertical space between the two buttons (tablet/mobile stack) */
  --gef-lift:0px;          /* set by JS so buttons ride above the footer bar */
  --gef-navy:var(--blue-dark,#16223F);
  --gef-blue:var(--blue,#1476BB);
}

.gef-fab{
  position:fixed;
  bottom:calc(var(--gef-gap) + var(--gef-lift) + env(safe-area-inset-bottom,0px));
  z-index:800;
  width:var(--gef-size);height:var(--gef-size);
  display:flex;align-items:center;justify-content:center;
  padding:0;border:0;border-radius:50%;
  color:#fff;text-decoration:none;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  box-shadow:
    0 10px 24px rgba(22,34,63,.28),
    0 3px 8px rgba(22,34,63,.18),
    inset 0 1px 0 rgba(255,255,255,.28);
  transition:
    transform .28s cubic-bezier(.2,.8,.2,1),
    box-shadow .28s ease,
    opacity .28s ease,
    visibility 0s linear 0s;
}
.gef-fab svg{width:46%;height:46%;display:block;fill:currentColor;transition:transform .28s cubic-bezier(.2,.8,.2,1);}

/* Left: WhatsApp — official WhatsApp green */
.gef-fab--wa{
  left:calc(var(--gef-gap) + env(safe-area-inset-left,0px));
  background:linear-gradient(135deg,#4FE07F 0%,#25D366 50%,#128C7E 120%);
}
/* Right: Back to top — navy into brand blue (mirrored so the pair feels related) */
.gef-fab--top{
  right:calc(var(--gef-gap) + env(safe-area-inset-right,0px));
  background:linear-gradient(135deg,var(--gef-navy) -10%,#1B3566 50%,var(--gef-blue) 120%);
}
.gef-fab--top svg{fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;width:44%;height:44%;}

/* Hover / focus / press */
.gef-fab:hover{
  transform:translateY(-3px) scale(1.07);
  box-shadow:
    0 16px 32px rgba(22,34,63,.34),
    0 5px 12px rgba(20,118,187,.30),
    inset 0 1px 0 rgba(255,255,255,.34);
}
.gef-fab:active{transform:translateY(-1px) scale(.97);}
.gef-fab:focus-visible{outline:3px solid #fff;outline-offset:2px;box-shadow:0 0 0 6px rgba(20,118,187,.55),0 10px 24px rgba(22,34,63,.3);}
.gef-fab--wa:hover svg{transform:rotate(-8deg) scale(1.06);}
.gef-fab--wa:hover{box-shadow:0 16px 32px rgba(18,140,126,.38),0 5px 12px rgba(37,211,102,.35),inset 0 1px 0 rgba(255,255,255,.34);}
.gef-fab--wa:focus-visible{box-shadow:0 0 0 6px rgba(37,211,102,.55),0 10px 24px rgba(22,34,63,.3);}
.gef-fab--top:hover svg{transform:translateY(-2px);}

/* Soft attention pulse on the WhatsApp button */
.gef-fab--wa::before{
  content:"";position:absolute;inset:0;border-radius:50%;
  border:2px solid rgba(37,211,102,.6);
  pointer-events:none;
  animation:gefPulse 3s ease-out infinite;
}
.gef-fab--wa:hover::before{animation:none;opacity:0;}
@keyframes gefPulse{
  0%{transform:scale(1);opacity:.75;}
  70%,100%{transform:scale(1.55);opacity:0;}
}

/* Tooltip label (desktop / mouse only) */
.gef-fab__tip{
  position:absolute;left:calc(100% + 12px);top:50%;
  transform:translate(-6px,-50%);
  padding:7px 13px;border-radius:999px;
  background:var(--gef-navy);color:#fff;
  font:600 12.5px/1 'Inter',sans-serif;white-space:nowrap;
  box-shadow:0 8px 20px rgba(22,34,63,.25);
  opacity:0;pointer-events:none;
  transition:opacity .22s ease,transform .22s ease;
}
@media (hover:hover) and (pointer:fine){
  .gef-fab--wa:hover .gef-fab__tip,
  .gef-fab--wa:focus-visible .gef-fab__tip{opacity:1;transform:translate(0,-50%);}
}

/* Back-to-top is hidden until the visitor has scrolled down */
.gef-fab--top{
  opacity:0;visibility:hidden;pointer-events:none;
  transform:translateY(14px) scale(.88);
  transition:
    transform .28s cubic-bezier(.2,.8,.2,1),
    box-shadow .28s ease,
    opacity .28s ease,
    visibility 0s linear .28s;
}
.gef-fab--top.is-visible{
  opacity:1;visibility:visible;pointer-events:auto;
  transform:none;
  transition:
    transform .28s cubic-bezier(.2,.8,.2,1),
    box-shadow .28s ease,
    opacity .28s ease,
    visibility 0s linear 0s;
}
.gef-fab--top.is-visible:hover{transform:translateY(-3px) scale(1.07);}
.gef-fab--top.is-visible:active{transform:translateY(-1px) scale(.97);}

/* Tablet + Mobile (<= 991.98px): both buttons live on the RIGHT edge, stacked.
   WhatsApp sits on top, Back-to-top directly below it (it takes the bottom slot).
   Both positions are built from the same variables, so the spacing between them
   stays identical at every size, and --gef-lift (footer bar) + the iPhone
   safe-area insets still apply to the pair. Desktop (>= 992px) is untouched. */
@media (max-width:991.98px){
  .gef-fab-wrap{--gef-size:52px;--gef-gap:18px;--gef-stack-gap:12px;}

  /* Back-to-top: bottom slot, right edge (right offset already set above) */
  .gef-fab--top{
    right:calc(var(--gef-gap) + env(safe-area-inset-right,0px));
  }
  /* WhatsApp: moved from the left edge to the right edge, one slot above Back-to-top.
     Its slot is reserved even while Back-to-top is hidden, so it never jumps. */
  .gef-fab--wa{
    left:auto;
    right:calc(var(--gef-gap) + env(safe-area-inset-right,0px));
    bottom:calc(var(--gef-gap) + var(--gef-size) + var(--gef-stack-gap) + var(--gef-lift) + env(safe-area-inset-bottom,0px));
  }
  /* Tooltip (shown only with a mouse/trackpad): open towards the left so it
     can't run off the right edge of the screen */
  .gef-fab__tip{
    left:auto;right:calc(100% + 12px);
    transform:translate(6px,-50%);
  }
}
/* Mobile — smaller, tucked into the corners, no tooltip */
@media (max-width:640px){
  .gef-fab-wrap{--gef-size:48px;--gef-gap:14px;}
  .gef-fab__tip{display:none;}
}

@media (prefers-reduced-motion:reduce){
  .gef-fab--wa::before{animation:none;display:none;}
  .gef-fab,.gef-fab svg{transition-duration:.001ms !important;}
}
@media print{.gef-fab-wrap{display:none !important;}}


/* ==========================================================================
   CROSS-BROWSER / TOUCH HARDENING (homepage + shared components)
   Kept in one place so Safari/iOS-specific decisions are easy to find.
   ========================================================================== */

/* Touch screens: hover "lift" effects stick after a tap on iOS and cause jumpy cards. */
@media (hover:none){
  .svc-card:hover,.bizsol-card:hover,.vs-feature-card:hover,.vs-founder-card:hover,.vs-quote:hover,
  .gef-fab:hover,.ts-arrow:hover{transform:none;}
  .vs-image-wrap:hover img{transform:none;}
}

/* iOS Safari zooms the page when a focused input is < 16px. Keep fields at 16px on touch
   devices, drop the native inner shadow, and give small controls a proper tap size. */
@media (pointer:coarse){
  .quote-field input,.quote-field textarea,.newsletter-input input{font-size:16px;}
  .newsletter-input button{width:44px;height:44px;}
  .foot-social a{width:44px;height:44px;}
  .foot-col > a{padding:8px 0;margin-bottom:0;}
}
.quote-field input,.quote-field textarea,.newsletter-input input{-webkit-appearance:none;appearance:none;}

/* Consultation popup: on short screens (landscape phones) the form scrolls inside the card
   instead of being cut off. Scrolling is on the form, not the popup, so the speech-bubble
   pointer (which sits outside the popup box) is not clipped. */
.quote-form{max-height:calc(100vh - 190px);max-height:calc(100dvh - 190px);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:4px;margin:-4px;}

/* Floating buttons: lighter on phones (no attention pulse) */
@media (max-width:640px){
  .gef-fab--wa::before{animation:none;display:none;}
}

/* JS-disabled fallback: scroll-reveal content must never stay hidden */
@media (scripting:none){
  .reveal-item,.svc-card,.bizsol-card{opacity:1;transform:none;}
}