/* =========================================================================
   ALLWIN BRAND PALETTE  (sampled directly from the AllWin logo)
   Deep blue  #284888  -> main brand colour (headers, buttons, gradients)
   Bright blue #2f6fb8 / #3d94d6 -> gradient partners, links, active states
   Cyan       #50a8e0 / #3d94d6  -> secondary accent (glows, underlines, focus)
   Red        #e03030 / #c02424  -> selective highlight: key CTA + hover accents
   Navy       #2e2140            -> headings / body ink (dark shade of logo blue)
   Legacy --purple-* / --lavender-* names are kept ONLY as aliases so any
   stylesheet not yet migrated (e.g. lang-selector.css) picks up the new
   palette automatically. The FOOTER background is intentionally hard-coded
   to its original colour and is unaffected by these tokens.
   ========================================================================= */
@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&display=swap");

:root{
  --font-sans:"Montserrat","Segoe UI",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  --cyan:#50a8e0; --cyan-strong:#3d94d6; --cyan-50:#eaf4fc;
  --red:#e03030; --red-deep:#c02424; --red-soft:#fde8e9;
  --purple-deepest:var(--blue-navy); --purple-deep:var(--blue-deep);
  --purple-primary:var(--blue-primary); --purple-mid:var(--blue-mid);
  --purple-bright:var(--blue-bright); --purple-shade:var(--blue-soft);
  --lavender-50:var(--sky-50); --lavender-100:var(--sky-100); --lavender-200:var(--sky-200);
}
/* ---- from about.html ---- */
:root{
    --blue-navy:#2e2140;
    --blue-deep:#284888;
    --blue-primary:#284888;
    --blue-mid:#9a5cad;
    --blue-bright:#3d94d6;
    --sky-50:#f5f4fb;
    --sky-100:#ebe9f6;
    --sky-200:#d9dcf0;
    --white:#ffffff;
    --ink:#2e2140;
    --ink-soft:#6b5a72;
    --line:#e2ddee;
    --radius-lg:20px;
    --radius-md:14px;
    --ease:cubic-bezier(.22,1,.36,1);

    /* ---- AllWin heading / label colour system ----
       Heading colour is the brand purple. Gradient stops drift purple -> blue-violet
       -> soft cyan-blue and are kept mid-tone on purpose: every stop stays >= 3:1 on
       white and the pale section tints (WCAG AA for large text), so the gradient is
       only ever applied to large H1/H2 text. Labels use a fractionally deeper purple
       so small text reaches 4.5:1 even on the light tinted backgrounds. */
    --heading-color:#9a5cad;
    --heading-gradient:linear-gradient(100deg,#9a5cad 0%,#8b5fb6 38%,#6a63bd 72%,#3f86c9 100%);
    --heading-color-hover:#6a5fbe;
    --label-color:#8a4fa0;
  }
  *,*::before,*::after{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    font-family: var(--font-sans);
    color:var(--ink);
    background:var(--white);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  img{max-width:100%;display:block;}
  a{color:inherit;text-decoration:none;}
  ul{margin:0;padding:0;list-style:none;}
  button{font-family:inherit;cursor:pointer;}
  .container{width:min(1220px, 92%);margin-inline:auto;position:relative;}
  h1,h2,h3,h4{margin:0 0 .4em;color:var(--heading-color);font-weight:800;letter-spacing:-.01em;transition:color .3s var(--ease);}
  p{color:var(--ink-soft);margin:0;}
  .eyebrow{
    display:block;
    font-size:.78rem;
    font-weight:800;
    letter-spacing:.14em;
    color:var(--label-color);
    margin-bottom:.7rem;
  }
  .accent{color:var(--blue-mid);}

  .btn{
    display:inline-flex;align-items:center;gap:.5rem;
    padding:.85rem 1.6rem;
    border-radius:999px;
    font-weight:700;font-size:.92rem;
    border:2px solid transparent;
    transition:transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease), color .3s var(--ease);
    white-space:nowrap;
  }
  .btn svg{transition:transform .3s var(--ease);}
  .btn:hover svg{transform:translateX(4px);}
  .btn-primary{
    background:linear-gradient(120deg,var(--blue-deep),var(--blue-mid));
    color:#fff;
    box-shadow:0 16px 34px -14px rgba(40, 72, 136,.5);
  }
  .btn-primary:hover{transform:translateY(-2px); box-shadow:0 20px 40px -14px rgba(40, 72, 136,.6),0 0 0 4px rgba(80, 168, 224,.2);}
  .btn-outline{
    background:#fff;
    border-color:var(--blue-mid);
    color:var(--blue-mid);
  }
  .btn-outline:hover{background:var(--blue-mid); color:#fff; transform:translateY(-2px);}
  .btn:focus-visible, a:focus-visible, button:focus-visible{
    outline:3px solid var(--blue-bright);
    outline-offset:3px;
    border-radius:8px;
  }

  /* decorative leaves */
  .leaf-decor{
    position:absolute;
    pointer-events:none;
    opacity:.55;
    z-index:0;
  }

  /* ---------------- HERO ---------------- */
  .hero{
    background:linear-gradient(160deg, var(--sky-100) 0%, var(--sky-50) 55%, #ffffff 100%);
    padding:4rem 0 4.5rem;
    overflow:hidden;
    position:relative;
  }
  .hero-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:3rem;align-items:center;position:relative;z-index:1;}
  .hero h1{font-size:clamp(2.3rem,4.2vw,3.3rem);line-height:1.12;}
  .hero p.lead{font-size:1.05rem;max-width:44ch;margin:1.1rem 0 2rem;}
  .hero-cta{display:flex;gap:1rem;flex-wrap:wrap;margin-bottom:2.2rem;}
  .value-strip{display:flex;gap:2rem;flex-wrap:wrap;}
  .value-strip span{display:flex;align-items:center;gap:.5rem;font-weight:700;font-size:.9rem;color:var(--blue-deep);}
  .value-strip .ico{color:var(--blue-mid);display:flex;}

  .hero-media{
    position:relative;border-radius:26px;overflow:hidden;
    aspect-ratio:16/11;
    box-shadow:0 26px 60px -20px rgba(40, 72, 136,.32);
    background:linear-gradient(135deg,var(--sky-200),var(--sky-50));
  }
  .hero-media img{width:100%;height:100%;object-fit:cover;}

  /* ---------------- FEATURE STRIP ---------------- */
  .feature-strip{padding:3.6rem 0;position:relative;}
  .feature-grid{
    display:grid;grid-template-columns:repeat(4,1fr);
    text-align:center;
  }
  .feature-item{
    padding:0 1.4rem;
    position:relative;
  }
  .feature-item + .feature-item::before{
    content:"";position:absolute;left:0;top:12%;bottom:12%;width:1px;background:var(--line);
  }
  .feature-item .ico-circ{
    width:64px;height:64px;border-radius:50%;
    background:var(--sky-100);color:var(--blue-mid);
    display:flex;align-items:center;justify-content:center;
    margin:0 auto 1.1rem;
    transition:transform .35s var(--ease), background .35s var(--ease), color .35s var(--ease);
  }
  .feature-item:hover .ico-circ{
    transform:translateY(-4px) scale(1.05);
    background:linear-gradient(135deg,var(--blue-deep),var(--blue-bright));
    color:#fff;
  }
  .feature-item h4{font-size:1.02rem;margin-bottom:.35rem;}
  .feature-item p{font-size:.86rem;}

  @media (max-width:860px){
    .feature-grid{grid-template-columns:1fr 1fr;gap:2rem 0;}
    .feature-item + .feature-item::before{display:none;}
  }

  /* ---------------- SERVICES ---------------- */
  .services{padding:5rem 0;position:relative;}
  .section-head{
    display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;
    margin-bottom:2.4rem;flex-wrap:wrap;
  }
  .section-head p{max-width:56ch;margin-top:.6rem;}

  .service-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem;}
  .service-card{
    background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
    padding:1.8rem 1.6rem 1.6rem;
    display:flex;flex-direction:column;gap:.4rem;
    transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s;
  }
  .service-card:hover{
    transform:translateY(-8px);
    box-shadow:0 26px 50px -22px rgba(40, 72, 136,.35);
    border-color:transparent;
  }
  .service-card .top-row{display:flex;align-items:flex-start;justify-content:space-between;}
  .service-card .ico-tile{
    width:52px;height:52px;border-radius:14px;
    background:var(--sky-100);color:var(--blue-mid);
    display:flex;align-items:center;justify-content:center;
  }
  .service-card .arrow-btn{
    width:38px;height:38px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    background:var(--sky-100);color:var(--blue-mid);
    transition:background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
  }
  .service-card:hover .arrow-btn{
    background:linear-gradient(135deg,var(--blue-deep),var(--blue-bright));
    color:#fff;transform:rotate(-45deg);
  }
  .service-card .illus{
    margin-top:.8rem;border-radius:12px;overflow:hidden;aspect-ratio:4/3;background:var(--sky-50);
  }
  .service-card .illus img{width:100%;height:100%;object-fit:cover;}
  .service-card h4{font-size:1rem;margin:.6rem 0 0;}

  @media (max-width:980px){.service-grid{grid-template-columns:1fr 1fr;}}
  @media (max-width:560px){.service-grid{grid-template-columns:1fr;}}

  /* ---------------- TEAM ---------------- */
  .team{padding:5rem 0;background:var(--sky-50);position:relative;}
  .team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem;}
  .team-card{
    background:#fff;border-radius:var(--radius-lg);
    padding:2rem 1.4rem;text-align:center;
    border:1px solid var(--line);
    transition:transform .35s var(--ease), box-shadow .35s var(--ease);
  }
  .team-card:hover{transform:translateY(-8px);box-shadow:0 24px 46px -22px rgba(40, 72, 136,.3);}
  .team-photo{
    width:110px;height:110px;border-radius:50%;
    margin:0 auto 1.1rem;
    background:var(--sky-100);
    overflow:hidden;
    border:3px solid var(--sky-200);
  }
  .team-photo img{width:100%;height:100%;object-fit:cover;}
  .team-card h4{font-size:1.02rem;margin-bottom:.15rem;}
  .team-card .role{color:var(--label-color);font-weight:700;font-size:.85rem;margin-bottom:.6rem;display:block;}
  .team-card p{font-size:.85rem;}

  @media (max-width:980px){.team-grid{grid-template-columns:1fr 1fr;}}
  @media (max-width:560px){.team-grid{grid-template-columns:1fr;}}

  /* ---------------- CTA BANNER ---------------- */
  .cta-banner{padding:5rem 0;position:relative;overflow:hidden;}
  .cta-grid{
    display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:center;
    background:linear-gradient(120deg, var(--sky-100), var(--sky-50));
    border-radius:28px;
    padding:3rem;
    position:relative;
    overflow:hidden;
  }
  .cta-grid h2{font-size:clamp(1.7rem,3vw,2.3rem);}
  .cta-grid p{max-width:46ch;margin:1rem 0 1.8rem;}
  .cta-media{position:relative;min-height:260px;border-radius:20px;overflow:hidden;}
  .cta-media img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;}
  .script-tag{
    position:absolute;top:6%;right:4%;
    font-family: var(--font-sans);
    color:var(--blue-mid);
    font-size:1.3rem;
    line-height:1.2;
    text-align:right;
    transform:rotate(-4deg);
  }

  @media (max-width:860px){
    .cta-grid{grid-template-columns:1fr;}
  }

  /* ---------------- reveal ---------------- */
  .reveal{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease), transform .8s var(--ease);}
  .reveal.in-view{opacity:1;transform:translateY(0);}

  @media (prefers-reduced-motion: reduce){
    *{animation-duration:.001ms !important;transition-duration:.001ms !important;}
    html{scroll-behavior:auto;}
  }

/* ---- from about.html ---- */
.page-hero{
    background:linear-gradient(160deg, var(--sky-100) 0%, var(--sky-50) 55%, #ffffff 100%);
    padding:3rem 0 2.8rem;
  }
  .breadcrumb{font-size:.85rem;color:var(--ink-soft);margin-bottom:1rem;}
  .breadcrumb a{color:var(--blue-mid);font-weight:600;}
  .breadcrumb a:hover{text-decoration:underline;}
  .page-hero h1{font-size:clamp(2rem,3.6vw,2.7rem);margin-top:.2rem;}
  .page-hero p.lead{max-width:60ch;margin-top:1rem;font-size:1.02rem;}
  .placeholder-section{padding:3.5rem 0 5.5rem;}
  .placeholder-block{
    border:2px dashed var(--line);
    border-radius:var(--radius-lg);
    padding:4rem 2rem;
    text-align:center;
    color:var(--ink-soft);
    background:var(--sky-50);
  }
  .placeholder-block .ico-circ{
    width:56px;height:56px;border-radius:50%;
    background:#fff;color:var(--blue-mid);
    display:flex;align-items:center;justify-content:center;
    margin:0 auto 1.2rem;
    box-shadow:var(--shadow-card, 0 12px 30px -14px rgba(40, 72, 136,.22));
  }
  .placeholder-block strong{display:block;color:var(--blue-deep);font-size:1.15rem;margin-bottom:.5rem;}
  .placeholder-block p{max-width:48ch;margin:0 auto;}
  .service-index-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;}
  @media (max-width:980px){.service-index-grid{grid-template-columns:1fr 1fr;}}
  @media (max-width:600px){.service-index-grid{grid-template-columns:1fr;}}
  .service-index-card{
    display:flex;flex-direction:column;gap:.9rem;
    background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
    padding:1.6rem;
    transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s;
  }
  .service-index-card:hover{
    transform:translateY(-6px);
    box-shadow:0 24px 46px -22px rgba(40, 72, 136,.32);
    border-color:transparent;
  }
  .service-index-card .top-row{display:flex;align-items:center;justify-content:space-between;}

/* ---- from careers.html ---- */
.page-hero{
    background:linear-gradient(160deg, var(--sky-100) 0%, var(--sky-50) 55%, #ffffff 100%);
    padding:3rem 0 2.8rem;
  }
  .breadcrumb{font-size:.85rem;color:var(--ink-soft);margin-bottom:1rem;}
  .breadcrumb a{color:var(--blue-mid);font-weight:600;}
  .breadcrumb a:hover{text-decoration:underline;}
  .page-hero h1{font-size:clamp(2rem,3.6vw,2.7rem);margin-top:.2rem;}
  .page-hero p.lead{max-width:60ch;margin-top:1rem;font-size:1.02rem;}
  .placeholder-section{padding:3.5rem 0 5.5rem;}
  .placeholder-block{
    border:2px dashed var(--line);
    border-radius:var(--radius-lg);
    padding:4rem 2rem;
    text-align:center;
    color:var(--ink-soft);
    background:var(--sky-50);
  }
  .placeholder-block .ico-circ{
    width:56px;height:56px;border-radius:50%;
    background:#fff;color:var(--blue-mid);
    display:flex;align-items:center;justify-content:center;
    margin:0 auto 1.2rem;
    box-shadow:var(--shadow-card, 0 12px 30px -14px rgba(40, 72, 136,.22));
  }
  .placeholder-block strong{display:block;color:var(--blue-deep);font-size:1.15rem;margin-bottom:.5rem;}
  .placeholder-block p{max-width:48ch;margin:0 auto;}
  .service-index-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;}
  @media (max-width:980px){.service-index-grid{grid-template-columns:1fr 1fr;}}
  @media (max-width:600px){.service-index-grid{grid-template-columns:1fr;}}
  .service-index-card{
    display:flex;flex-direction:column;gap:.9rem;
    background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
    padding:1.6rem;
    transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s;
  }
  .service-index-card:hover{
    transform:translateY(-6px);
    box-shadow:0 24px 46px -22px rgba(40, 72, 136,.32);
    border-color:transparent;
  }
  .service-index-card .top-row{display:flex;align-items:center;justify-content:space-between;}

  /* ---------------- Contact details + form ---------------- */
  .contact-section{padding:0 0 5.5rem;}
  .contact-layout{display:grid;grid-template-columns:0.85fr 1.4fr;gap:clamp(28px,4vw,48px);align-items:start;}
  @media (max-width:980px){.contact-layout{grid-template-columns:1fr;}}

  .contact-box{background:#fff;border:1px solid var(--line);border-radius:var(--radius-md);padding:2rem;}
  .contact-box .item{display:flex;gap:14px;margin-bottom:24px;}
  .contact-box .item:last-child{margin-bottom:0;}
  @media (max-width:620px){.contact-box .item{align-items:flex-start;}}
  .contact-box .icon{
    width:44px;height:44px;border-radius:12px;background:var(--sky-50);color:var(--blue-mid);
    display:flex;align-items:center;justify-content:center;flex-shrink:0;
  }
  .contact-box .icon svg{width:20px;height:20px;}
  .contact-box h4{font-size:.98rem;font-weight:700;margin:0;}
  .contact-box p{margin-top:4px;font-size:.94rem;}
  .contact-box a{color:var(--ink-soft);transition:color .25s;}
  .contact-box a:hover{color:var(--blue-mid);}

  .hours-card{background:var(--sky-50);border-radius:var(--radius-md);padding:28px 32px;margin-top:24px;}
  .hours-card h3{font-size:1.1rem;margin-bottom:16px;}
  .hours-row{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--line);font-size:.92rem;color:var(--ink-soft);}
  .hours-row:last-child{border-bottom:none;}
  .hours-row.today{color:var(--blue-mid);font-weight:700;}
  .hours-row .closed{color:#c02424;font-weight:600;}

  .map-wrap{border-radius:var(--radius-md);overflow:hidden;border:1px solid var(--line);}
  .map-wrap iframe{width:100%;height:320px;border:0;display:block;}

  .form-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-md);padding:clamp(28px,4vw,40px);margin-top:32px;}
  .form-card p.lead{margin-top:10px;font-size:1rem;max-width:52ch;}
  .contact-form{margin-top:26px;display:grid;grid-template-columns:1fr 1fr;gap:18px;}
  @media (max-width:620px){.contact-form{grid-template-columns:1fr;}}
  .contact-form .full{grid-column:1/-1;}
  .contact-form input,.contact-form select,.contact-form textarea{
    width:100%;font-family:inherit;font-size:.96rem;color:var(--ink);
    background:var(--sky-50);border:1.5px solid var(--line);border-radius:12px;padding:14px 16px;
    transition:border-color .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease);
  }
  .contact-form input::placeholder,.contact-form textarea::placeholder{color:var(--ink-soft);opacity:.75;}
  .contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{
    outline:none;border-color:var(--blue-mid);background:#fff;box-shadow:0 0 0 4px rgba(80, 168, 224,.28);
  }
  .contact-form textarea{min-height:140px;resize:vertical;}

/* ---- from index.html ---- */
:root {
        --blue-navy: #2e2140;
        --blue-deep: #284888;
        --blue-mid: #602868;
        --blue-bright: #3d94d6;
        --sky-50: #f5f4fb;
        --sky-100: #ebe9f6;
        --sky-200: #d9dcf0;
        --white: #ffffff;
        --ink: #2e2140;
        --ink-soft: #6b5a72;
        --line: #e2ddee;
        --radius-lg: 20px;
        --ease: cubic-bezier(0.22, 1, 0.36, 1);
      }
      *,
      *::before,
      *::after {
        box-sizing: border-box;
      }
      html {
        scroll-behavior: smooth;
      }
      body {
        margin: 0;
        font-family: var(--font-sans);
        color: var(--ink);
        background: var(--white);
        line-height: 1.6;
        -webkit-font-smoothing: antialiased;
        overflow-x: hidden;
      }
      img {
        max-width: 100%;
        display: block;
      }
      a {
        color: inherit;
        text-decoration: none;
      }
      ul {
        margin: 0;
        padding: 0;
        list-style: none;
      }
      button {
        font-family: var(--font-sans);
        cursor: pointer;
      }
      .container {
        width: min(1220px, 92%);
        margin-inline: auto;
        position: relative;
      }
      h1,
      h2,
      h3,
      h4 {
        margin: 0 0 0.4em;
        color: var(--heading-color);
        font-weight: 800;
        letter-spacing: -0.01em;
        transition: color 0.3s var(--ease);
      }
      /* h5/h6 get the colour only (no margin/weight) so the footer's own h5
         spacing is untouched; `footer h5` still overrides the colour to white. */
      h5,
      h6 {
        color: var(--heading-color);
        transition: color 0.3s var(--ease);
      }
      /* Light brand gradient on the LARGE headings only (H1/H2). Scoped to <main>
         so header, footer, dialogs and the preloader are never affected. If
         background-clip:text is unsupported, the solid #9a5cad colour above is used. */
      @supports ((-webkit-background-clip: text) or (background-clip: text)) {
        main h1,
        main h2 {
          background-image: var(--heading-gradient);
          -webkit-background-clip: text;
          background-clip: text;
          -webkit-text-fill-color: transparent;
        }
        /* Positioned descendants are skipped by background-clip:text and would render
           transparent, so the (position:relative) accent span must be static here. */
        main h1 .accent,
        main h2 .accent {
          position: static;
        }
      }
      /* Windows High Contrast / forced colours: drop gradient text so it can't vanish. */
      @media (forced-colors: active) {
        main h1,
        main h2 {
          background: none;
          -webkit-text-fill-color: currentColor;
        }
      }
      p {
        color: var(--ink-soft);
        margin: 0;
      }
      .eyebrow {
        display: block;
        font-size: 0.78rem;
        font-weight: 800;
        letter-spacing: 0.14em;
        color: var(--label-color);
        margin-bottom: 0.7rem;
        animation: floatText 3.2s ease-in-out infinite;
      }
      @keyframes floatText {
        0%,
        100% {
          transform: translateY(0);
        }
        50% {
          transform: translateY(-6px);
        }
      }
      .accent {
        color: var(--blue-mid);
        position: relative;
      }

      @keyframes pageFadeIn {
        from {
          opacity: 0;
        }
        to {
          opacity: 1;
        }
      }
      body {
        animation: pageFadeIn 0.7s var(--ease) both;
      }

      .btn {
        position: relative;
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.85rem 1.6rem;
        border-radius: 999px;
        font-weight: 700;
        font-size: 0.92rem;
        border: 2px solid transparent;
        isolation: isolate;
        overflow: hidden;
        transition:
          transform 0.45s var(--ease),
          box-shadow 0.45s var(--ease),
          background 0.45s var(--ease),
          color 0.35s var(--ease),
          border-color 0.35s var(--ease);
        white-space: nowrap;
      }
      /* soft diagonal shine that sweeps across on hover */
      .btn::after {
        content: "";
        position: absolute;
        top: 0;
        left: -60%;
        width: 40%;
        height: 100%;
        background: linear-gradient(115deg, transparent, rgba(255, 255, 255, 0.55), transparent);
        transform: skewX(-20deg);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s ease;
      }
      .btn:hover::after {
        opacity: 1;
        animation: btnShine 1.1s var(--ease);
      }
      @keyframes btnShine {
        0% {
          left: -60%;
        }
        100% {
          left: 130%;
        }
      }
      .btn svg {
        transition: transform 0.35s var(--ease);
      }
      .btn:hover svg {
        transform: translateX(5px);
      }
      .btn:active {
        transform: scale(0.97);
      }

      .btn-primary {
        background: linear-gradient(120deg, var(--blue-deep), var(--blue-mid) 50%, var(--blue-bright));
        background-size: 220% auto;
        background-position: 0% 50%;
        color: #fff;
        box-shadow: 0 10px 26px -12px rgba(40, 72, 136, 0.5);
      }
      .btn-primary:hover {
        background-position: 100% 50%;
        color: #fff;
        transform: translateY(-3px);
        box-shadow: 0 16px 34px -10px rgba(40, 72, 136, 0.6), 0 0 0 4px rgba(80, 168, 224, 0.2);
      }
      .btn-primary:active {
        transform: translateY(-1px) scale(0.97);
        box-shadow: 0 8px 18px -10px rgba(40, 72, 136, 0.5);
      }

      .btn-outline {
        background: var(--sky-50);
        border-color: var(--blue-mid);
        color: var(--blue-mid);
        box-shadow: 0 0 0 0 rgba(40, 72, 136, 0);
      }
      .btn-outline::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        border-radius: inherit;
        background: linear-gradient(120deg, var(--blue-deep), var(--blue-mid) 50%, var(--blue-bright));
        background-size: 220% auto;
        background-position: 0% 50%;
        opacity: 0;
        transform: scale(0.85);
        transition:
          opacity 0.45s var(--ease),
          transform 0.45s var(--ease),
          background-position 0.6s var(--ease);
      }
      .btn-outline:hover {
        color: #fff;
        border-color: transparent;
        transform: translateY(-3px);
        box-shadow: 0 16px 34px -12px rgba(40, 72, 136, 0.45);
      }
      .btn-outline:hover::before {
        opacity: 1;
        transform: scale(1);
        background-position: 100% 50%;
      }
      .btn-outline:active {
        transform: translateY(-1px) scale(0.97);
      }
      .btn:focus-visible,
      a:focus-visible,
      button:focus-visible {
        outline: 3px solid var(--blue-bright);
        outline-offset: 3px;
        border-radius: 8px;
      }

      /* ---------------- HEADER ---------------- */
      /* Fixed (not sticky) so the header can overlay the hero banner instead
         of sitting in its own block above it. See css/header.css for the
         full explanation — this block is kept identical to that one on
         purpose (see the note at the top of header.css). */
      header.site-header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        z-index: 900;
        background: transparent;
        border-bottom: 1px solid rgba(61, 148, 214, 0.16);
        transition:
          box-shadow 0.35s var(--ease),
          border-color 0.35s var(--ease);
        animation: headerFadeIn 0.8s var(--ease) both;
      }
      @keyframes headerFadeIn {
        from {
          opacity: 0;
          transform: translateY(-14px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }
      /* The frosted-glass effect lives on a ::before layer rather than on
         header.site-header itself. backdrop-filter (like transform/filter)
         creates a new containing block for any position:fixed descendant —
         if it sat on the header, the mobile nav panel (which is fixed and
         lives inside the header markup) would be sized/positioned relative
         to the header's own small box instead of the viewport, which is
         what caused the mobile nav height to look broken. Putting the
         filter on a non-ancestor pseudo-element keeps the same visual
         effect without that side effect. */
      header.site-header::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        background: rgba(255, 255, 255, 0.75);
        backdrop-filter: blur(14px) saturate(160%);
        -webkit-backdrop-filter: blur(14px) saturate(160%);
        transition:
          background 0.45s var(--ease),
          backdrop-filter 0.45s var(--ease);
      }
      header.site-header.scrolled {
        box-shadow: 0 12px 30px -20px rgba(40, 72, 136, 0.35);
      }
      header.site-header.scrolled::before {
        background: rgba(255, 255, 255, 0.9);
      }
      @media (prefers-reduced-motion: reduce) {
        header.site-header {
          animation: none;
        }
      }
      body.has-hero header.site-header:not(.scrolled) {
        border-bottom-color: transparent;
      }
      body.has-hero header.site-header:not(.scrolled)::before {
        background: rgba(255, 255, 255, 0);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
      }
      body.has-hero header.site-header:not(.scrolled) .brand,
      body.has-hero header.site-header:not(.scrolled) .nav-link {
        color: #fff;
        text-shadow: 0 2px 10px rgba(30, 20, 44, 0.45);
      }
      body.has-hero header.site-header:not(.scrolled) .brand small {
        color: rgba(255, 255, 255, 0.78);
      }
      body.has-hero header.site-header:not(.scrolled) .nav-link.active,
      body.has-hero header.site-header:not(.scrolled) .nav-link[aria-current="page"] {
        color: #fff;
      }
      body.has-hero header.site-header:not(.scrolled) .icon-btn {
        border-color: rgba(255, 255, 255, 0.6);
        background: rgba(255, 255, 255, 0.12);
        color: #fff;
      }
      body.has-hero header.site-header:not(.scrolled) .icon-btn:hover {
        background: rgba(255, 255, 255, 0.24);
      }
      body.has-hero header.site-header:not(.scrolled) .ndis-badge {
        background: rgba(255, 255, 255, 0.92);
        border-radius: 8px;
        padding: 4px 6px;
        transition: background 0.35s var(--ease);
      }
      body.has-hero header.site-header:not(.scrolled) .hamburger {
        background: rgba(255, 255, 255, 0.14);
        border-color: rgba(255, 255, 255, 0.55);
      }
      body.has-hero header.site-header:not(.scrolled) .hamburger span {
        background: #fff;
      }
      @media (prefers-reduced-motion: reduce) {
        body.has-hero header.site-header:not(.scrolled) .ndis-badge {
          transition: none;
        }
      }
      body:not(.has-hero) {
        padding-top: var(--header-height, 74px);
      }
      .nav-wrap {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.9rem 0;
      }
      .brand {
        display: flex;
        align-items: center;
        gap: 0.7rem;
        font-weight: 800;
        font-size: 1.2rem;
        color: var(--blue-navy);
        transition:
          color 0.35s var(--ease),
          text-shadow 0.35s var(--ease);
      }
      .brand .logo-mark {
        width: 44px;
        height: 44px;
        display: block;
        object-fit: contain;
        flex-shrink: 0;
        filter: drop-shadow(0 6px 14px rgba(40, 72, 136, 0.35));
      }
      .brand small {
        display: block;
        font-weight: 600;
        font-size: 0.62rem;
        color: var(--blue-mid);
        letter-spacing: 0.03em;
        transition: color 0.35s var(--ease);
      }
      .ndis-badge {
        width: 92px;
        flex-shrink: 0;
        transition: background 0.35s var(--ease);
      }

      nav.main-nav > ul {
        display: flex;
        align-items: center;
        gap: 2.2rem;
      }
      .nav-link {
        position: relative;
        display: inline-block;
        padding: 0.6rem 0;
        font-weight: 600;
        font-size: 0.95rem;
        color: var(--ink);
      }
      .nav-link::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -2px;
        width: 0%;
        height: 3px;
        border-radius: 3px;
        background: linear-gradient(90deg, var(--cyan-strong), var(--blue-deep));
        transition: width 0.35s var(--ease);
      }
      .nav-link:hover::after,
      .nav-link.active::after {
        width: 100%;
      }
      .nav-link.active {
        color: var(--blue-mid);
      }

      .header-actions {
        display: flex;
        align-items: center;
        gap: 1.1rem;
      }
      .icon-btn {
        width: 42px;
        height: 42px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1.5px solid var(--line);
        background: #fff;
        color: var(--blue-deep);
        transition:
          border-color 0.25s,
          transform 0.25s,
          background 0.25s;
      }
      .icon-btn:hover {
        border-color: var(--blue-mid);
        transform: translateY(-2px);
        background: var(--sky-50);
      }

      .hamburger {
        display: none;
        width: 44px;
        height: 44px;
        border-radius: 12px;
        border: 1.5px solid var(--line);
        background: #fff;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 5px;
        transition:
          background 0.35s var(--ease),
          border-color 0.35s var(--ease);
      }
      .hamburger span {
        width: 20px;
        height: 2px;
        background: var(--blue-deep);
        border-radius: 2px;
        transition:
          transform 0.3s var(--ease),
          opacity 0.3s var(--ease),
          background 0.35s var(--ease);
      }
      .hamburger.active span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
      }
      .hamburger.active span:nth-child(2) {
        opacity: 0;
      }
      .hamburger.active span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
      }

      @media (max-width: 860px) {
        nav.main-nav {
          position: fixed;
          /* Falls back to 74px if JS hasn't measured the header yet, but is
             kept in sync with the header's real rendered height via
             --header-height (set in the script at the bottom of the page)
             so the mobile menu never starts too high or leaves a gap. */
          top: var(--header-height, 74px);
          left: 0;
          right: 0;
          bottom: 0;
          background: #fff;
          transform: translateX(100%);
          transition: transform 0.4s var(--ease);
          padding: 2rem 8%;
          overflow-y: auto;
          z-index: 800;
        }
        nav.main-nav.open {
          transform: translateX(0);
        }
        nav.main-nav > ul {
          flex-direction: column;
          align-items: flex-start;
          gap: 0;
          width: 100%;
        }
        nav.main-nav > ul > li {
          width: 100%;
          border-bottom: 1px solid var(--line);
        }
        .nav-link {
          padding: 1rem 0;
          width: 100%;
        }
        .hamburger {
          display: flex;
        }
        .header-actions .search-desktop {
          display: none;
        }
        /* Hide the header's "Make an Enquiry" button on mobile so the header
           row stays a single, consistent height (it stayed available via the
           CTA banner and footer). */
        .header-actions .header-enquiry-btn {
          display: none;
        }
        .header-actions {
          gap: 0.6rem;
        }
        .header-actions .ndis-badge {
          width: 64px;
        }
      }

      @media (max-width: 380px) {
        .header-actions .ndis-badge {
          width: 52px;
        }
        .brand span {
          font-size: 1rem;
        }
      }

      /* ---- Services nav item + caret ---- */
      li.has-dropdown {
        position: relative;
      }
      .nav-link .caret {
        width: 8px;
        height: 8px;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        display: inline-block;
        transform: rotate(45deg);
        margin-left: 0.4rem;
        margin-bottom: 1px;
        transition: transform 0.3s var(--ease);
      }
      li.has-dropdown:hover .caret,
      li.has-dropdown.open .caret {
        transform: rotate(-135deg);
        margin-bottom: -3px;
      }

      /* ---- Mega dropdown panel ---- */
      /* .mega-panel is a transparent hover "bridge" that touches the trigger link
     with no gap, so moving the cursor down into it never breaks :hover.
     The visible card (background, border, shadow, gap) lives on .mega-panel-inner. */
      .mega-panel {
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        width: min(720px, 82vw);
        padding-top: 16px;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition:
          opacity 0.3s var(--ease),
          visibility 0.3s;
        z-index: 60;
      }
      li.has-dropdown:hover .mega-panel,
      li.has-dropdown.open .mega-panel {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
      }
      .mega-panel-inner {
        position: relative;
        background: #fff;
        border-radius: var(--radius-lg);
        box-shadow: 0 32px 60px -20px rgba(46, 33, 64, 0.35);
        border: 1px solid var(--line);
        padding: 1.6rem;
        transform: translateY(-10px);
        transition: transform 0.3s var(--ease);
      }
      li.has-dropdown:hover .mega-panel-inner,
      li.has-dropdown.open .mega-panel-inner {
        transform: translateY(0);
      }
      .mega-panel-inner::before {
        content: "";
        position: absolute;
        top: -8px;
        left: 50%;
        transform: translateX(-50%) rotate(45deg);
        width: 16px;
        height: 16px;
        background: #fff;
        border-left: 1px solid var(--line);
        border-top: 1px solid var(--line);
      }
      .mega-head {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        margin-bottom: 1rem;
        padding-bottom: 0.9rem;
        border-bottom: 1px solid var(--line);
      }
      .mega-head h4 {
        margin: 0;
        font-size: 1.02rem;
      }
      .mega-head a {
        font-size: 0.8rem;
        font-weight: 700;
        color: var(--blue-mid);
      }
      .mega-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.3rem 0.9rem;
      }
      .mega-grid a {
        display: flex;
        align-items: center;
        gap: 0.7rem;
        padding: 0.6rem 0.55rem;
        border-radius: 10px;
        font-size: 0.86rem;
        font-weight: 600;
        color: var(--ink);
        transition:
          background 0.25s var(--ease),
          color 0.25s var(--ease),
          transform 0.25s var(--ease);
      }
      .mega-grid a .dot {
        width: 8px;
        height: 8px;
        flex-shrink: 0;
        border-radius: 50%;
        background: var(--sky-200);
        transition:
          background 0.25s var(--ease),
          transform 0.25s var(--ease);
      }
      .mega-grid a:hover {
        background: var(--sky-50);
        color: var(--blue-mid);
        transform: translateX(3px);
      }
      .mega-grid a:hover .dot {
        background: var(--cyan-strong);
        transform: scale(1.3);
      }

      @media (max-width: 860px) {
        .mega-panel {
          position: static;
          transform: none;
          width: 100%;
          padding-top: 0;
          visibility: visible;
          opacity: 1;
          pointer-events: auto;
          max-height: 0;
          overflow: hidden;
          transition: max-height 0.4s var(--ease);
        }
        .mega-panel-inner {
          box-shadow: none;
          border: none;
          transform: none;
          padding: 0.2rem 0 1rem;
        }
        .mega-panel-inner::before {
          display: none;
        }
        li.has-dropdown.open .mega-panel {
          max-height: 900px;
        }
        .mega-grid {
          grid-template-columns: 1fr;
        }
      }

      /* decorative leaves */

      /* ---------------- HERO ---------------- */
      .hero {
        background: linear-gradient(160deg, var(--sky-100) 0%, var(--sky-50) 55%, #ffffff 100%);
        padding: 4rem 0 4.5rem;
        overflow: hidden;
        position: relative;
      }
      .hero-grid {
        display: grid;
        grid-template-columns: 1fr 1.05fr;
        gap: 3rem;
        align-items: center;
        position: relative;
        z-index: 1;
      }
      .hero h1 {
        font-size: clamp(2.3rem, 4.2vw, 3.3rem);
        line-height: 1.12;
      }
      .hero p.lead {
        font-size: 1.05rem;
        max-width: 44ch;
        margin: 1.1rem 0 2rem;
      }
      .hero-cta {
        display: flex;
        gap: 1rem;
        flex-wrap: wrap;
        margin-bottom: 2.2rem;
      }

      .hero-media {
        position: relative;
        border-radius: 26px;
        overflow: hidden;
        aspect-ratio: 16/11;
        box-shadow: 0 26px 60px -20px rgba(40, 72, 136, 0.32);
        background: linear-gradient(135deg, var(--sky-200), var(--sky-50));
        transition:
          transform 0.5s var(--ease),
          box-shadow 0.5s var(--ease);
      }
      .hero-media:hover {
        transform: translateY(-6px);
        box-shadow: 0 34px 74px -20px rgba(40, 72, 136, 0.42);
      }
      .hero-media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.6s var(--ease);
      }
      .hero-media:hover img {
        transform: scale(1.06);
      }

      /* ---------------- ABOUT INTRO (Mission / Vision) ---------------- */
      .about-intro {
        background: linear-gradient(160deg, var(--sky-50) 0%, #ffffff 70%);
        padding: 4.5rem 0;
        position: relative;
        overflow: hidden;
      }
      .about-intro-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 3rem;
        align-items: center;
        position: relative;
        z-index: 1;
      }
      .about-intro-copy h2 {
        font-size: clamp(1.7rem, 3.2vw, 2.35rem);
        line-height: 1.2;
        margin-bottom: 1.1rem;
      }
      .about-intro-copy p {
        margin-bottom: 1rem;
        max-width: 52ch;
      }
      .about-intro-copy p:last-child {
        margin-bottom: 0;
      }
      .about-learn-more {
        margin-top: 0.8rem;
      }

      .about-intro-cards {
        display: flex;
        flex-direction: column;
        gap: 1.4rem;
      }
      .about-intro .about-card {
        position: relative;
        isolation: isolate;
        display: flex;
        gap: 1.2rem;
        align-items: flex-start;
        background: #fff;
        border: 1px solid var(--line);
        border-radius: var(--radius-lg);
        padding: 1.6rem 1.7rem;
        box-shadow: 0 18px 40px -26px rgba(40, 72, 136, 0.22);
        /* Specificity is deliberately higher than .reveal so this list is not
           overwritten. opacity/transform keep the scroll-reveal entrance (and
           its stagger delay); the hover lift uses the independent `translate`
           property so it never fights .reveal's transform or its delay. */
        transition:
          opacity 0.9s var(--ease) var(--reveal-delay, 0s),
          transform 0.9s var(--ease) var(--reveal-delay, 0s),
          translate 0.35s var(--ease) 0s,
          box-shadow 0.35s var(--ease) 0s,
          border-color 0.35s var(--ease) 0s;
      }
      /* Soft blue -> cyan -> red wash behind the content (hover only) */
      .about-intro .about-card::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        border-radius: inherit;
        pointer-events: none;
        background:
          radial-gradient(120% 90% at 0% 0%, rgba(80, 168, 224, 0.1), transparent 60%),
          linear-gradient(135deg, rgba(40, 72, 136, 0.04), rgba(80, 168, 224, 0.05) 55%, rgba(224, 48, 48, 0.04));
        opacity: 0;
        transition: opacity 0.35s var(--ease);
      }
      /* 1px gradient border ring (blue -> cyan -> red) that fades in on hover */
      .about-intro .about-card::before {
        content: "";
        position: absolute;
        inset: -1px;
        border-radius: inherit;
        padding: 1px;
        pointer-events: none;
        background: linear-gradient(135deg, #284888 0%, #50a8e0 55%, #e03030 100%);
        -webkit-mask:
          linear-gradient(#000 0 0) content-box,
          linear-gradient(#000 0 0);
        -webkit-mask-composite: xor;
        mask:
          linear-gradient(#000 0 0) content-box exclude,
          linear-gradient(#000 0 0);
        opacity: 0;
        transition: opacity 0.35s var(--ease);
      }

      .about-card-ico {
        position: relative;
        isolation: isolate;
        flex-shrink: 0;
        width: 52px;
        height: 52px;
        border-radius: 14px;
        background: var(--sky-100);
        color: var(--blue-mid);
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        transition:
          transform 0.35s var(--ease),
          color 0.35s var(--ease);
      }
      /* Gradient fill for the icon tile, cross-faded so it animates smoothly */
      .about-card-ico::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        background: linear-gradient(135deg, var(--blue-deep), var(--cyan-strong));
        opacity: 0;
        transition: opacity 0.35s var(--ease);
      }

      /* Hover effects only on devices that can genuinely hover (mouse/trackpad).
         Touch screens keep the static card, so nothing gets "stuck" after a tap. */
      @media (hover: hover) and (pointer: fine) {
        .about-intro .about-card:hover {
          translate: 0 -6px;
          border-color: transparent;
          box-shadow:
            0 26px 48px -26px rgba(40, 72, 136, 0.32),
            0 12px 30px -18px rgba(80, 168, 224, 0.4),
            0 0 0 4px rgba(80, 168, 224, 0.06);
        }
        .about-intro .about-card:hover::before,
        .about-intro .about-card:hover::after {
          opacity: 1;
        }
        .about-intro .about-card:hover .about-card-ico {
          transform: scale(1.05);
          color: #fff;
        }
        .about-intro .about-card:hover .about-card-ico::before {
          opacity: 1;
        }
      }
      @media (prefers-reduced-motion: reduce) {
        .about-intro .about-card,
        .about-card-ico {
          transition-duration: 0.01ms;
        }
        .about-intro .about-card:hover {
          translate: none;
        }
        .about-intro .about-card:hover .about-card-ico {
          transform: none;
        }
      }
      .about-card h4 {
        font-size: 1.05rem;
        margin-bottom: 0.3rem;
      }
      .about-card p {
        font-size: 0.92rem;
        margin: 0;
      }

      /* Card headings ease from brand purple to a deeper blue-violet on hover
         (colour only, no movement). Hover-capable devices only; keyboard focus
         gets the same cue via :focus-visible. */
      @media (hover: hover) and (pointer: fine) {
        .about-card:hover h4,
        .service-card:hover h3,
        .team-card:hover h4,
        .advantage-card:hover h4 {
          color: var(--heading-color-hover);
        }
      }
      .service-card:focus-visible h3 {
        color: var(--heading-color-hover);
      }

      @media (max-width: 980px) {
        .about-intro {
          padding: 3.2rem 0;
        }
        .about-intro-grid {
          grid-template-columns: 1fr;
          gap: 2.2rem;
        }
      }

      /* ---------------- FEATURE STRIP ---------------- */

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

      /* ---------------- SERVICES ---------------- */

      .section-head {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        gap: 2rem;
        margin-bottom: 2.4rem;
        flex-wrap: wrap;
      }
      .section-head p {
        max-width: 56ch;
        margin-top: 0.6rem;
      }

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

      /* ---------------- TEAM ---------------- */
      .team {
        padding: 5rem 0;
        background: var(--sky-50);
        position: relative;
      }
      .team-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 1.4rem;
      }
      .team-card {
        background: #fff;
        border-radius: var(--radius-lg);
        padding: 2rem 1.4rem;
        text-align: center;
        border: 1px solid var(--line);
        transition:
          transform 0.35s var(--ease),
          box-shadow 0.35s var(--ease);
      }
      .team-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 24px 46px -22px rgba(40, 72, 136, 0.3);
      }
      .team-photo {
        width: 110px;
        height: 110px;
        border-radius: 50%;
        margin: 0 auto 1.1rem;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, var(--blue-deep), var(--blue-mid) 55%, var(--blue-bright));
        overflow: hidden;
        border: 3px solid var(--sky-200);
        transition:
          border-color 0.4s var(--ease),
          transform 0.4s var(--ease);
        box-shadow: 0 10px 22px -12px rgba(40, 72, 136, 0.45);
      }
      .team-photo .initials {
        color: #fff;
        font-weight: 800;
        font-size: 1.7rem;
        letter-spacing: 0.02em;
        transition: transform 0.4s var(--ease);
      }
      .team-card:hover .team-photo {
        border-color: var(--blue-mid);
        transform: scale(1.05);
      }
      .team-card:hover .team-photo .initials {
        transform: scale(1.1);
      }
      .team-card h4 {
        font-size: 1.02rem;
        margin-bottom: 0.15rem;
      }
      .team-card .role {
        color: var(--label-color);
        font-weight: 700;
        font-size: 0.85rem;
        margin-bottom: 0.6rem;
        display: block;
      }
      .team-card p {
        font-size: 0.85rem;
      }

      @media (max-width: 980px) {
        .team-grid {
          grid-template-columns: 1fr 1fr;
        }
      }
      @media (max-width: 560px) {
        .team-grid {
          grid-template-columns: 1fr;
        }
      }

      /* ---------------- CTA BANNER ---------------- */
      .cta-banner {
        padding: 5rem 0;
        position: relative;
        overflow: hidden;
      }
      .cta-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
        align-items: center;
        background: linear-gradient(120deg, var(--sky-100), var(--sky-50));
        border-radius: 28px;
        padding: 3rem;
        position: relative;
        overflow: hidden;
      }
      .cta-grid h2 {
        font-size: clamp(1.7rem, 3vw, 2.3rem);
      }
      .cta-grid p {
        max-width: 46ch;
        margin: 1rem 0 1.8rem;
      }
      .cta-media {
        position: relative;
        min-height: 260px;
        border-radius: 20px;
        overflow: hidden;
      }
      .cta-media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        position: absolute;
        inset: 0;
        transition: transform 0.6s var(--ease);
      }
      .cta-media:hover img {
        transform: scale(1.07);
      }

      @media (max-width: 860px) {
        .cta-grid {
          grid-template-columns: 1fr;
        }
      }

      /* ---------------- FOOTER ---------------- */

      .footer-brand .brand {
        color: #fff;
      }
      .footer-brand small {
        color: rgba(255, 255, 255, 0.6);
      }
      footer h5 {
        color: #fff;
        font-size: 0.92rem;
        margin-bottom: 1rem;
        letter-spacing: 0.02em;
      }
      footer ul li {
        margin-bottom: 0.65rem;
        font-size: 0.9rem;
      }
      footer ul li a {
        color: rgba(255, 255, 255, 0.72);
        transition:
          color 0.25s,
          padding-left 0.25s;
      }
      footer ul li a:hover {
        color: #fff;
        padding-left: 4px;
      }

      .footer-bottom {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-top: 1.5rem;
        font-size: 0.8rem;
        flex-wrap: wrap;
        gap: 1rem;
        color: rgba(255, 255, 255, 0.55);
      }

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

      /* ---------------- OUR ADVANTAGES ---------------- */
      .advantages-section {
        padding: 5rem 0;
        background: linear-gradient(160deg, #ffffff 0%, var(--sky-50) 100%);
        position: relative;
      }
      .advantages-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1.4rem;
      }
      .advantage-card {
        background: #fff;
        border: 1px solid var(--line);
        border-radius: var(--radius-lg);
        padding: 2rem 1.7rem;
        box-shadow: 0 18px 40px -28px rgba(40, 72, 136, 0.22);
        transition:
          transform 0.4s var(--ease),
          box-shadow 0.4s var(--ease),
          border-color 0.4s var(--ease);
      }
      .advantage-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 28px 54px -22px rgba(40, 72, 136, 0.36);
        border-color: var(--sky-200);
      }
      .advantage-ico {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 54px;
        height: 54px;
        border-radius: 14px;
        margin-bottom: 1.1rem;
        background: var(--sky-100);
        color: var(--blue-mid);
        transition:
          transform 0.4s var(--ease),
          background 0.4s var(--ease),
          color 0.4s var(--ease);
      }
      .advantage-card:hover .advantage-ico {
        transform: scale(1.08) rotate(-6deg);
        background: linear-gradient(135deg, var(--blue-deep), var(--blue-bright));
        color: #fff;
      }
      .advantage-card h4 {
        font-size: 1.05rem;
        margin-bottom: 0.4rem;
      }
      .advantage-card p {
        font-size: 0.92rem;
        margin: 0;
      }

      @media (max-width: 980px) {
        .advantages-grid {
          grid-template-columns: 1fr 1fr;
        }
      }
      @media (max-width: 560px) {
        .advantages-grid {
          grid-template-columns: 1fr;
        }
      }
      @media (hover: none) {
        .advantage-card:hover {
          transform: none;
          box-shadow: 0 18px 40px -28px rgba(40, 72, 136, 0.22);
          border-color: var(--line);
        }
        .advantage-card:hover .advantage-ico {
          transform: none;
          background: var(--sky-100);
          color: var(--blue-mid);
        }
      }

      /* ---------------- FAQ ---------------- */
      .faq-section {
        padding: 5rem 0;
        background: var(--sky-50);
        position: relative;
      }
      .faq-list {
        max-width: 820px;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        gap: 1rem;
      }
      .faq-item {
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 16px;
        overflow: hidden;
        transition:
          border-color 0.35s var(--ease),
          box-shadow 0.35s var(--ease),
          transform 0.35s var(--ease);
      }
      .faq-item:hover {
        border-color: var(--blue-mid);
        box-shadow: 0 18px 40px -26px rgba(40, 72, 136, 0.3);
        transform: translateY(-3px);
      }
      .faq-item.open {
        border-color: var(--blue-mid);
        box-shadow: 0 22px 46px -24px rgba(40, 72, 136, 0.34);
      }
      .faq-question {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        background: none;
        border: none;
        text-align: left;
        padding: 1.3rem 1.6rem;
        font-weight: 700;
        font-size: 0.98rem;
        color: var(--ink);
        transition: color 0.3s var(--ease);
      }
      .faq-question:hover {
        color: var(--blue-mid);
      }
      .faq-item.open .faq-question {
        color: var(--blue-mid);
      }
      .faq-icon {
        position: relative;
        flex-shrink: 0;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background: var(--sky-100);
        transition:
          background 0.35s var(--ease),
          transform 0.35s var(--ease);
      }
      .faq-icon::before,
      .faq-icon::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        background: var(--blue-mid);
        transition:
          transform 0.35s var(--ease),
          background 0.35s var(--ease),
          opacity 0.3s var(--ease);
      }
      .faq-icon::before {
        width: 12px;
        height: 2px;
        transform: translate(-50%, -50%);
      }
      .faq-icon::after {
        width: 2px;
        height: 12px;
        transform: translate(-50%, -50%);
      }
      .faq-item.open .faq-icon {
        background: linear-gradient(135deg, var(--blue-deep), var(--blue-bright));
        transform: rotate(180deg);
      }
      .faq-item.open .faq-icon::before,
      .faq-item.open .faq-icon::after {
        background: #fff;
      }
      .faq-item.open .faq-icon::after {
        opacity: 0;
      }
      .faq-answer {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.45s var(--ease);
      }
      .faq-answer p {
        padding: 0 1.6rem 1.4rem;
        font-size: 0.92rem;
      }

      @media (max-width: 560px) {
        .faq-question {
          padding: 1.1rem 1.2rem;
          font-size: 0.92rem;
        }
        .faq-answer p {
          padding: 0 1.2rem 1.2rem;
        }
      }

      /* ---------------- reveal ---------------- */
      /* .reveal slides up from the bottom by default. Add .reveal-down to
         have an element slide in from the top instead. Add .reveal-delay-1
         through .reveal-delay-6 to stagger a group of elements so they don't
         all animate at the exact same moment. */
      .reveal {
        opacity: 0;
        transform: translateY(44px);
        transition:
          opacity 0.9s var(--ease),
          transform 0.9s var(--ease);
        transition-delay: var(--reveal-delay, 0s);
        will-change: opacity, transform;
      }
      .reveal.reveal-down {
        transform: translateY(-44px);
      }
      .reveal.in-view {
        opacity: 1;
        transform: translateY(0);
      }
      .reveal-delay-1 {
        --reveal-delay: 0.12s;
      }
      .reveal-delay-2 {
        --reveal-delay: 0.24s;
      }
      .reveal-delay-3 {
        --reveal-delay: 0.36s;
      }
      .reveal-delay-4 {
        --reveal-delay: 0.48s;
      }
      .reveal-delay-5 {
        --reveal-delay: 0.6s;
      }
      .reveal-delay-6 {
        --reveal-delay: 0.72s;
      }

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

      /* =====================================================================
     RESPONSIVE / TOUCH / DECORATIVE ENHANCEMENTS
     (adds missing breakpoints, fixes overflow, improves touch targets,
      adds decorative dot accents and staggered reveal animation)
     ===================================================================== */

      /* ---- Touch-friendly base ---- */
      html {
        -webkit-text-size-adjust: 100%;
      }
      a,
      button,
      .btn,
      .icon-btn,
      .hamburger,
      .nav-link,
      .team-card,
      .mega-grid a {
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
      }
      /* .btn-primary and .btn-outline already define their own :active press states above */
      .icon-btn:active,
      .hamburger:active {
        transform: scale(0.9);
      }

      /* Disable "sticky hover" effects on touch/coarse-pointer devices so a
     tapped card/image doesn't stay visually "hovered" after the tap ends */
      @media (hover: none) {
        .team-card:hover {
          transform: none;
          box-shadow: none;
        }
        .team-card:hover .team-photo {
          border-color: var(--sky-200);
          transform: none;
        }
        .team-card:hover .team-photo .initials {
          transform: none;
        }
        .hero-media:hover {
          transform: none;
          box-shadow: 0 26px 60px -20px rgba(40, 72, 136, 0.32);
        }
        .hero-media:hover img {
          transform: none;
        }
        .cta-media:hover img {
          transform: none;
        }

        .brand:hover .logo-mark {
          transform: none;
          box-shadow: 0 8px 18px -6px rgba(40, 72, 136, 0.5);
        }
      }

      /* Minimum comfortable touch targets */
      @media (max-width: 600px) {
        .icon-btn {
          width: 44px;
          height: 44px;
        }
        .header-actions {
          gap: 0.7rem;
        }
        .btn {
          padding: 0.95rem 1.5rem;
          justify-content: center;
        }
        .hero-cta {
          flex-direction: column;
          align-items: stretch;
        }
        .hero-cta .btn {
          width: 100%;
        }
      }

      /* ---- Decorative dot accents (::before / ::after) ---- */
      .hero::before,
      .hero::after {
        content: "";
        position: absolute;
        width: 130px;
        height: 130px;
        background-image: radial-gradient(var(--blue-mid) 1.5px, transparent 1.5px);
        background-size: 16px 16px;
        opacity: 0.16;
        pointer-events: none;
        z-index: 0;
      }
      .hero::before {
        top: 8%;
        left: -46px;
      }
      .hero::after {
        bottom: 6%;
        right: -34px;
        transform: rotate(18deg);
      }

      .section-head {
        position: relative;
      }
      .section-head::before {
        content: "";
        position: absolute;
        left: 0;
        top: -1.5rem;
        width: 64px;
        height: 10px;
        background-image: radial-gradient(var(--cyan-strong) 1.5px, transparent 1.5px);
        background-size: 10px 10px;
        opacity: 0.55;
        pointer-events: none;
      }

      .cta-grid::after {
        content: "";
        position: absolute;
        top: -26px;
        right: -26px;
        width: 150px;
        height: 150px;
        border-radius: 50%;
        background-image: radial-gradient(var(--blue-mid) 1.5px, transparent 1.5px);
        background-size: 14px 14px;
        opacity: 0.14;
        pointer-events: none;
      }

      @media (max-width: 600px) {
        .hero::before,
        .hero::after,
        .cta-grid::after {
          display: none;
        }
      }

      /* ---- HERO: missing responsive breakpoints (fixes tablet/mobile overflow) ---- */
      @media (max-width: 980px) {
        .hero {
          padding: 3rem 0 3.2rem;
        }
        .hero-grid {
          grid-template-columns: 1fr;
          gap: 2.2rem;
        }
        .hero-media {
          order: -1;
          aspect-ratio: 16/10;
        }
        .hero p.lead {
          max-width: 60ch;
        }
      }
      @media (max-width: 600px) {
        .hero {
          padding: 2.4rem 0 2.6rem;
        }
        .hero-grid {
          gap: 1.5rem;
        }
        .hero-media {
          aspect-ratio: 4/3;
          border-radius: 18px;
        }
        .hero h1 {
          font-size: clamp(1.9rem, 8vw, 2.4rem);
        }
      }

      /* ---- Tablet fine-tuning ---- */
      @media (min-width: 861px) and (max-width: 1180px) {
        .mega-panel {
          left: 0;
          transform: none;
          width: min(640px, 64vw);
        }
      }
      @media (max-width: 980px) {
        .team,
        .cta-banner {
          padding: 3.4rem 0;
        }

        .section-head {
          gap: 1.2rem;
        }
      }

      /* ---- Referrals 3-col grid (moved off inline style so it can respond) ---- */

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

      /* ---- Typography scaling ---- */
      h2 {
        font-size: clamp(1.55rem, 3.4vw, 2.15rem);
      }
      h3 {
        font-size: clamp(1.15rem, 2.2vw, 1.4rem);
      }

      /* ---- General small-screen spacing & overflow polish ---- */
      @media (max-width: 600px) {
        .container {
          width: min(1220px, 90%);
        }
        h2 {
          font-size: clamp(1.45rem, 6.4vw, 1.85rem);
        }
        .cta-grid {
          padding: 2rem 1.4rem;
          border-radius: 20px;
        }
        .cta-media {
          min-height: 200px;
        }

        .team-card {
          padding: 1.6rem 1.1rem;
        }

        .footer-bottom {
          flex-direction: column;
          align-items: flex-start;
          text-align: left;
        }
      }

      @media (max-width: 400px) {
        .brand {
          font-size: 1.05rem;
        }
        .brand .logo-mark {
          width: 38px;
          height: 38px;
        }
        .team-grid {
          gap: 1.1rem;
        }
      }

      /* ---- Prevent stray horizontal overflow from decorative elements ---- */
      .hero {
        overflow: hidden;
      }

      /* ---- Staggered reveal cascade for grid items (smooth entrance) ---- */

      .team-grid .team-card.reveal:nth-child(1) {
        transition-delay: 0.05s;
      }
      .team-grid .team-card.reveal:nth-child(2) {
        transition-delay: 0.12s;
      }
      .team-grid .team-card.reveal:nth-child(3) {
        transition-delay: 0.19s;
      }
      .team-grid .team-card.reveal:nth-child(4) {
        transition-delay: 0.26s;
      }

      /* ---- Safety net: nothing should ever force horizontal scroll ---- */
      html,
      body {
        max-width: 100%;
      }
      img,
      svg {
        max-width: 100%;
      }

      /* ===== Journey / Values Section ===== */

      :root {
        --jc-blue: #284888;
        --jc-red: #e03030;
        --jc-cyan: #3d94d6;
        --jc-sky: #50a8e0;
        --ink: #2e2140;
        --sub: #6b5a72;
      }
      * {
        box-sizing: border-box;
      }
      body {
        margin: 0;
        font-family: var(--font-sans);
        background: #ffffff;
      }
      .journey-section {
        position: relative;
        max-width: 1400px;
        margin: 0 auto;
        padding: 80px 40px 100px;
        overflow: hidden;
      }
      .journey-bg-blob {
        position: absolute;
        left: -120px;
        bottom: -140px;
        width: 420px;
        height: 420px;
        background: radial-gradient(circle at 30% 30%, #eef0fa, #ffffff 70%);
        border-radius: 50%;
        z-index: 0;
      }
      .journey-grid {
        position: relative;
        z-index: 1;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 0;
      }
      .journey-col {
        position: relative;
        padding: 0 28px;
        text-align: center;
      }
      .journey-col + .journey-col {
        border-left: 1px solid #e2ddee;
      }
      .journey-img-wrap {
        position: relative;
        display: flex;
        align-items: flex-end;
        justify-content: center;
        height: 230px;
        margin-bottom: 28px;
      }
      .journey-img-wrap img {
        max-width: 210px;
        max-height: 230px;
        width: 100%;
        object-fit: contain;
      }
      .journey-col:last-child h3.journey-title {
        margin: 0 0 14px;
        font-size: 1.28rem;
        font-weight: 700;
        color: var(--heading-color);
        line-height: 1.3;
      }
      .journey-underline {
        width: 46px;
        height: 3px;
        margin: 0 auto 16px;
        border-radius: 2px;
      }
      p.journey-desc {
        margin: 0 auto;
        max-width: 230px;
        font-size: 0.98rem;
        color: var(--sub);
        line-height: 1.55;
      }

      .journey-col[data-color="purple"] .journey-underline {
        background:  var(--jc-red);
      }
      .journey-col[data-color="orange"] .journey-underline {
        background: var(--jc-red);
      }
      .journey-col[data-color="green"] .journey-underline {
        background: var(--jc-red);
      }
      .journey-col[data-color="blue"] .journey-underline {
        background: var(--jc-red);
      }

      @media (max-width: 1024px) {
        .journey-grid {
          grid-template-columns: repeat(2, 1fr);
          row-gap: 56px;
        }
        .journey-col:nth-child(2) {
          border-left: 1px solid #e2ddee;
        }
        .journey-col:nth-child(3) {
          border-left: none;
          border-top: 1px solid #e2ddee;
          padding-top: 40px;
        }
        .journey-col:nth-child(4) {
          border-top: 1px solid #e2ddee;
          padding-top: 40px;
        }
      }
      @media (max-width: 600px) {
        .journey-section {
          padding: 56px 20px 70px;
        }
        .journey-grid {
          grid-template-columns: 1fr;
          row-gap: 44px;
        }
        .journey-col {
          border-left: none !important;
          border-top: 1px solid #e2ddee;
          padding-top: 32px;
        }
        .journey-col:first-child {
          border-top: none;
          padding-top: 0;
        }
        .journey-img-wrap {
          height: 200px;
        }
        .journey-img-wrap img {
          max-width: 180px;
          max-height: 200px;
        }
      }

      /* ===== AllWin Services -- card grid section ===== */

      /* [EDIT: COLOURS] -- aligned to the AllWin blue/cyan logo palette */
      :root {
        --aws-bg: #f5f4fb;
        --aws-surface: #ffffff;
        --aws-ink: #2e2140;
        --aws-muted: #6b5a72;
        --aws-primary: #284888;
        --aws-primary-d: #2e2140;
        --aws-line: #e2ddee;
        --aws-bubble-from: #3d94d6;
        --aws-bubble-to: #284888;

        --aws-font-display: var(--font-sans);
        --aws-font-body: var(--font-sans);
      }

      * {
        box-sizing: border-box;
      }
      html {
        scroll-behavior: auto;
      }
      body {
        margin: 0;
        background: var(--aws-bg);
        color: var(--aws-ink);
        font-family: var(--font-sans);
        -webkit-text-size-adjust: 100%;
      }

      .aws-head {
        max-width: 640px;
        margin: 0 auto;
        padding: 3.5rem 1.5rem 2rem;
        text-align: center;
      }
      .aws-head h2 {
        font-family: var(--font-sans);
        font-weight: 600;
        font-size: clamp(1.9rem, 5vw, 2.6rem);
        line-height: 1.15;
        margin: 0 0 0.85rem;
        color: var(--heading-color);
      }
      .aws-head p {
        margin: 0;
        color: var(--aws-muted);
        font-size: 1.05rem;
        line-height: 1.6;
      }

      /* Visually-hidden helper, shared by any card that needs an
     accessible-name string without showing duplicate visible text. */
      .sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
      }

      /* GRID — mobile-first: 1 column, full width. */
      .services-grid {
        max-width: 1180px;
        margin: 0 auto;
        padding: 0 1.25rem 3.5rem;
        display: grid;
        grid-template-columns: 1fr;
        gap: 1.1rem;
      }

      /* CARD — the whole thing is a <button> so it's one accessible hit target.
     overflow: hidden clips the bubble to a "semicircle" peeking off the
     right edge; nothing about the card's own box ever exceeds its bounds,
     so there's no risk of horizontal scroll. */
      .service-card {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.4rem;
        width: 100%;
        text-align: left;
        font-family: var(--font-sans);
        background: var(--aws-surface);
        border: 1px solid var(--aws-line);
        border-radius: var(--radius-lg, 20px);
        padding: 1.5rem 4.25rem 1.5rem 1.5rem;
        cursor: pointer;
        overflow: hidden;
        box-shadow: 0 2px 10px rgba(40, 72, 136, 0.06);
        /* NOTE: this rule's "transition" shorthand fully replaces .reveal's
       (equal specificity, later in source), so opacity/transform for the
       fade-in live here too — a slow, deliberate entrance — while
       box-shadow/border-color stay quick for hover feedback. */
        transition:
          opacity 0.9s var(--ease, ease),
          transform 0.7s var(--ease, ease),
          box-shadow 0.35s var(--ease, ease),
          border-color 0.35s var(--ease, ease);
      }
      .service-card:hover,
      .service-card:focus-visible {
        /* Hover/focus reuses the same properties at a snappier duration,
       independent of the slow entrance transition above. */
        transition-duration: 0.35s;
        transform: translateY(-4px);
        box-shadow: 0 16px 32px rgba(40, 72, 136, 0.16);
        border-color: transparent;
      }
      .service-card:focus-visible {
        outline: 2px solid var(--aws-primary);
        outline-offset: 3px;
      }
      .service-card-index {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 2rem;
        height: 2rem;
        border-radius: 50%;
        background: var(--sky-100, #ebe9f6);
        color: var(--aws-primary);
        font-family: var(--font-sans);
        font-size: 0.85rem;
        margin-bottom: 0.2rem;
      }
      .service-card h3 {
        font-family: var(--font-sans);
        font-weight: 600;
        font-size: 1.15rem;
        line-height: 1.3;
        margin: 0;
        color: var(--heading-color);
        padding-right: 0.5rem;
      }
      .service-card p {
        margin: 0;
        color: var(--aws-muted);
        font-size: 0.92rem;
        line-height: 1.55;
      }

      /* BUBBLE — a full circle sitting half outside the card; the card's own
     overflow: hidden clips it into the "partially visible semicircle"
     called for in the brief, with no extra clip-path needed.
     --bubble-size / --bubble-hang (how far the circle hangs out past the
     card's right edge) drive both the clip and where the "+" sits: the
     icon is positioned at the midpoint of the VISIBLE slice
     (bubble-size - bubble-hang), not the midpoint of the full circle —
     otherwise it lands past the clip line and looks cut off / off-centre. */
      .service-card-bubble {
        --bubble-size: 3.6rem;
        --bubble-hang: 1.7rem;
        position: absolute;
        top: 50%;
        right: calc(-1 * var(--bubble-hang));
        transform: translateY(-50%) scale(0.94);
        width: var(--bubble-size);
        height: var(--bubble-size);
        border-radius: 50%;
        background: linear-gradient(135deg, var(--aws-bubble-from), var(--aws-bubble-to));
        transition: transform 0.35s var(--ease, ease), background 0.35s var(--ease, ease);
      }
      .service-card-bubble svg {
        position: absolute;
        top: 50%;
        left: calc((var(--bubble-size) - var(--bubble-hang)) / 2 - 0.18rem);
        width: 18px;
        height: 18px;
        color: #fff;
        opacity: 0;
        filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8));
        transform: translate(-50%, -50%) scale(0.6);
        transition: opacity 0.3s var(--ease, ease), transform 0.3s var(--ease, ease);
      }
      .service-card:hover .service-card-bubble,
      .service-card:focus-visible .service-card-bubble {
        transform: translateY(-16%) scale(1.06);
      }
      .service-card:hover .service-card-bubble svg,
      .service-card:focus-visible .service-card-bubble svg {
        opacity: 1;
        transform: translate(-16%, -50%) scale(1);
      }
      /* Touch devices have no hover — keep the "+" visibly indicating the
     card is interactive rather than hiding it behind a gesture. */
      @media (hover: none) {
        .service-card-bubble svg {
          opacity: 0.85;
          transform: translate(-50%, -50%) scale(0.85);
        }
      }

      @media (min-width: 640px) {
        .services-grid {
          grid-template-columns: repeat(2, 1fr);
        }
      }
      @media (min-width: 960px) {
        .services-grid {
          grid-template-columns: repeat(3, 1fr);
          gap: 1.4rem;
        }
      }

      /* Only the first 6 cards show until "View more services" is pressed;
     .is-expanded (added by site-script.js) reveals the rest in place. */
      .service-card--extra {
        display: none;
      }
      .services-grid.is-expanded .service-card--extra {
        display: flex;
      }

      .services-view-more {
        display: flex;
        justify-content: center;
        margin: -1.5rem auto 3.5rem;
      }

      /* Staggered reveal cascade, same pattern used elsewhere on the page. */
      .services-grid .service-card.reveal:nth-child(3n + 1) {
        transition-delay: 0.05s;
      }
      .services-grid .service-card.reveal:nth-child(3n + 2) {
        transition-delay: 0.12s;
      }
      .services-grid .service-card.reveal:nth-child(3n + 3) {
        transition-delay: 0.19s;
      }

      /* The 6 cards behind "View more" all become visible at once (JS adds
     .is-expanded), so give them their own, more spread-out cascade —
     higher specificity than the block above so it wins for these cards. */
      .services-grid .service-card.reveal.service-card--extra:nth-child(7) {
        transition-delay: 0.05s;
      }
      .services-grid .service-card.reveal.service-card--extra:nth-child(8) {
        transition-delay: 0.15s;
      }
      .services-grid .service-card.reveal.service-card--extra:nth-child(9) {
        transition-delay: 0.25s;
      }
      .services-grid .service-card.reveal.service-card--extra:nth-child(10) {
        transition-delay: 0.35s;
      }
      .services-grid .service-card.reveal.service-card--extra:nth-child(11) {
        transition-delay: 0.45s;
      }
      .services-grid .service-card.reveal.service-card--extra:nth-child(12) {
        transition-delay: 0.55s;
      }

      @media (prefers-reduced-motion: reduce) {
        .service-card,
        .service-card-bubble,
        .service-card-bubble svg {
          transition: none !important;
        }
        .service-card:hover,
        .service-card:focus-visible {
          transform: none;
        }
      }

      /* DIALOG — the shared "read more" panel any card opens. Native <dialog>
     gives focus-trapping and Escape-to-close for free. */
      .service-dialog {
        border: none;
        padding: 0;
        max-width: min(640px, calc(100vw - 2rem));
        width: 100%;
        border-radius: var(--radius-lg, 20px);
        background: var(--aws-surface);
        color: var(--aws-ink);
        box-shadow: 0 24px 60px rgba(46, 33, 64, 0.3);
        overflow: hidden;
      }
      .service-dialog::backdrop {
        background: rgba(46, 33, 64, 0.55);
        backdrop-filter: blur(2px);
      }
      .service-dialog-inner {
        position: relative;
        display: flex;
        flex-direction: column;
        max-height: 85vh;
        overflow-y: auto;
      }
      .service-dialog-close {
        position: absolute;
        top: 0.9rem;
        right: 0.9rem;
        z-index: 2;
        width: 2.25rem;
        height: 2.25rem;
        border: none;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.9);
        color: var(--aws-primary-d);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
      }
      .service-dialog-close svg {
        width: 16px;
        height: 16px;
      }
      .service-dialog-close:focus-visible {
        outline: 2px solid var(--aws-primary);
        outline-offset: 2px;
      }
      .service-dialog-media {
        flex: 0 0 auto;
        background: var(--aws-bg);
      }
      .service-dialog-media img {
        display: block;
        width: 100%;
        max-height: 46vh;
        object-fit: contain;
      }
      .service-dialog-body {
        padding: 1.5rem 1.75rem 1.75rem;
      }
      .service-dialog-index {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 2.1rem;
        height: 2.1rem;
        border-radius: 50%;
        background: var(--aws-primary);
        color: #fff;
        font-family: var(--font-sans);
        font-size: 0.9rem;
        margin-bottom: 0.85rem;
      }
      .service-dialog-body h3 {
        font-family: var(--font-sans);
        font-weight: 600;
        font-size: clamp(1.25rem, 3.4vw, 1.6rem);
        margin: 0 0 0.6rem;
        color: var(--heading-color);
      }
      .service-dialog-body p {
        margin: 0 0 1.25rem;
        color: var(--aws-muted);
        font-size: 1rem;
        line-height: 1.65;
      }

      footer {
        background: #4a2258; /* LOCKED: original footer colour – do not change */
        color: rgba(255, 255, 255, 0.85);
      }
      footer .wrap {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 24px;
      }

      @media (max-width: 860px) {
      }
      .footer-social-icons {
        display: flex;
        gap: 10px;
      }
      .footer-social-icons a {
        width: 34px;
        height: 34px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.14);
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        transition:
          background 0.2s,
          transform 0.2s;
      }
      .footer-social-icons a:hover {
        background: rgba(255, 255, 255, 0.28);
        transform: translateY(-2px);
      }
      .footer-top {
        display: grid;
        grid-template-columns: 1.4fr 1fr 1fr 1fr;
        gap: 40px;
        padding: 64px 0 44px;
      }
      .footer-brand .logo {
        display: flex;
        align-items: center;
        gap: 0.6rem;
        text-decoration: none;
      }
      .footer-brand .logo-mark {
        width: 34px;
        height: 34px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.14);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
      }
      .footer-brand .logo-mark svg {
        width: 18px;
        height: 18px;
      }
      .footer-brand .logo-text {
        color: #fff;
        font-weight: 800;
        font-size: 1.05rem;
      }
      .footer-brand p {
        margin-top: 16px;
        color: rgba(255, 255, 255, 0.7);
        font-size: 0.94rem;
        max-width: 32ch;
      }
      footer h4 {
        color: #fff;
        font-size: 0.82rem;
        letter-spacing: 0.08em;
        font-weight: 700;
        margin-bottom: 18px;
      }
      footer ul {
        list-style: none;
        margin: 0;
        padding: 0;
      }
      footer ul li {
        margin-bottom: 12px;
      }
      footer a {
        color: rgba(255, 255, 255, 0.78);
        font-size: 0.94rem;
        text-decoration: none;
        transition: color 0.2s;
      }
      footer a:hover {
        color: #fff;
      }
      footer span {
        color: rgba(255, 255, 255, 0.78);
        font-size: 0.94rem;
      }
      .footer-acknowledgement {
        border-top: 1px solid rgba(255, 255, 255, 0.15);
        padding: 26px 0;
        font-size: 0.86rem;
        color: rgba(255, 255, 255, 0.65);
      }
      .footer-bottom {
        border-top: 1px solid rgba(255, 255, 255, 0.15);
        padding: 22px 0 32px;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 12px;
        font-size: 0.84rem;
        color: rgba(255, 255, 255, 0.6);
      }
      .footer-bottom span {
        color: rgba(255, 255, 255, 0.6);
      }
      .footer-bottom-links {
        display: flex;
        gap: 22px;
        flex-wrap: wrap;
      }
      @media (max-width: 980px) {
        .footer-top {
          grid-template-columns: 1fr 1fr;
        }
      }
      @media (max-width: 620px) {
        .footer-top {
          grid-template-columns: 1fr;
        }
      }

/* ---- from index.html ---- */
footer {
        background: #4a2258; /* LOCKED: original footer colour – do not change */
        color: rgba(255, 255, 255, 0.85);
      }
      footer .wrap {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 24px;
      }

      .footer-info-bar {
        background: #5c6470;
      }
      .fib-inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 24px;
        padding: 22px 24px;
      }
      .fib-item {
        display: flex;
        align-items: center;
        gap: 12px;
      }
      .fib-social {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
      }
      .fib-social-icons {
        display: flex;
        gap: 10px;
      }
      .fib-social-icons a {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.14);
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        transition: background 0.2s;
      }
      .fib-social-icons a:hover {
        background: rgba(255, 255, 255, 0.28);
      }
      .fib-social span {
        color: rgba(255, 255, 255, 0.85);
        font-size: 0.82rem;
        font-weight: 600;
      }
      .fib-icon {
        width: 38px;
        height: 38px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.14);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
      }
      .fib-text {
        display: flex;
        flex-direction: column;
        gap: 2px;
      }
      .fib-text strong {
        color: #fff;
        font-size: 0.86rem;
        font-weight: 700;
      }
      .fib-text em {
        font-style: normal;
        color: rgba(255, 255, 255, 0.8);
        font-size: 0.9rem;
      }
      .fib-text em a {
        color: rgba(255, 255, 255, 0.8);
      }
      .fib-text em a:hover {
        color: #fff;
      }
      @media (max-width: 860px) {
        .fib-inner {
          justify-content: center;
          text-align: left;
        }
      }
      .footer-social-icons {
        display: flex;
        gap: 10px;
      }
      .footer-social-icons a {
        width: 34px;
        height: 34px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.14);
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        transition:
          background 0.2s,
          transform 0.2s;
      }
      .footer-social-icons a:hover {
        background: rgba(255, 255, 255, 0.28);
        transform: translateY(-2px);
      }
      .footer-top {
        display: grid;
        grid-template-columns: 1.4fr 1fr 1fr 1fr;
        gap: 40px;
        padding: 64px 0 44px;
      }
      .footer-brand .logo {
        display: flex;
        align-items: center;
        gap: 0.6rem;
        text-decoration: none;
      }
      .footer-brand .logo-mark {
        width: 34px;
        height: 34px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.14);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
      }
      .footer-brand .logo-mark svg {
        width: 18px;
        height: 18px;
      }
      .footer-brand .logo-text {
        color: #fff;
        font-weight: 800;
        font-size: 1.05rem;
      }
      .footer-brand p {
        margin-top: 16px;
        color: rgba(255, 255, 255, 0.7);
        font-size: 0.94rem;
        max-width: 32ch;
      }
      footer h4 {
        color: #fff;
        font-size: 0.82rem;
        letter-spacing: 0.08em;
        font-weight: 700;
        margin-bottom: 18px;
      }
      footer ul {
        list-style: none;
        margin: 0;
        padding: 0;
      }
      footer ul li {
        margin-bottom: 12px;
      }
      footer a {
        color: rgba(255, 255, 255, 0.78);
        font-size: 0.94rem;
        text-decoration: none;
        transition: color 0.2s;
      }
      footer a:hover {
        color: #fff;
      }
      footer span {
        color: rgba(255, 255, 255, 0.78);
        font-size: 0.94rem;
      }
      .footer-acknowledgement {
        border-top: 1px solid rgba(255, 255, 255, 0.15);
        padding: 26px 0;
        font-size: 0.86rem;
        color: rgba(255, 255, 255, 0.65);
      }
      .footer-bottom {
        border-top: 1px solid rgba(255, 255, 255, 0.15);
        padding: 22px 0 32px;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 12px;
        font-size: 0.84rem;
        color: rgba(255, 255, 255, 0.6);
      }
      .footer-bottom span {
        color: rgba(255, 255, 255, 0.6);
      }
      .footer-bottom-links {
        display: flex;
        gap: 22px;
        flex-wrap: wrap;
      }
      @media (max-width: 980px) {
        .footer-top {
          grid-template-columns: 1fr 1fr;
        }
      }
      @media (max-width: 620px) {
        .footer-top {
          grid-template-columns: 1fr;
        }
      }
      /* ================================================================
         HERO — full-screen background banner (overrides earlier .hero)
         ================================================================ */
      .hero::before,
      .hero::after {
        display: none;
      }
      .hero {
        position: relative;
        display: flex;
        align-items: flex-start;
        justify-content: center;
        min-height: 100vh;
        min-height: 100svh;
        min-height: 100dvh;
        width: 100%;
        overflow: hidden;
        padding: 0 0 4rem;
        background-image: url("../images/hero-banner1.png");
        background-size: cover;
        background-position: center 30%;
        background-repeat: no-repeat;
        background-color: var(--blue-navy);
      }
      .hero-overlay {
        position: absolute;
        inset: 0;
        z-index: 1;
        pointer-events: none;
        background:
          linear-gradient(180deg, rgba(30, 20, 44, 0.78) 0%, rgba(46, 33, 64, 0.42) 38%, rgba(30, 20, 44, 0.55) 72%, rgba(30, 20, 44, 0.82) 100%),
          linear-gradient(90deg, rgba(46, 33, 64, 0.35) 0%, rgba(46, 33, 64, 0.1) 50%, rgba(46, 33, 64, 0.35) 100%);
      }
      .hero-inner {
        position: relative;
        z-index: 2;
        width: 100%;
        display: flex;
        justify-content: center;
        padding-top: clamp(6.5rem, 16vh, 11rem);
      }
      .hero-content {
        --hero-rise: 26px;
        max-width: 700px;
        text-align: center;
        padding: 0 1rem;
        opacity: 0;
        transform: translateY(var(--hero-rise));
        animation: heroFadeUp 0.95s var(--ease) 0.2s both;
      }
      @keyframes heroFadeUp {
        from {
          opacity: 0;
          transform: translateY(var(--hero-rise));
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }
      .hero-content .eyebrow {
        color: var(--sky-100);
        text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
      }
      .hero-content h1 {
        color: #ffffff;
        background: none;
        -webkit-text-fill-color: currentColor; /* white text on the photo: no gradient */
        text-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
        font-size: clamp(2.1rem, 4.6vw, 3.4rem);
        line-height: 1.14;
      }
      .hero-content h1 .accent {
        color: var(--sky-200);
        -webkit-text-fill-color: currentColor;
      }
      .hero-content p.lead {
        color: rgba(255, 255, 255, 0.88);
        max-width: 52ch;
        margin: 1.1rem auto 2.1rem;
        text-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
      }
      .hero-content .hero-cta {
        justify-content: center;
        margin-bottom: 0;
      }
      .hero-content .btn-outline {
        background: rgba(255, 255, 255, 0.1);
        border-color: rgba(255, 255, 255, 0.75);
        color: #ffffff;
        backdrop-filter: blur(6px);
      }
      .hero-content .btn-outline:hover {
        color: #ffffff;
        border-color: transparent;
      }

      @media (max-width: 600px) {
        .hero {
          min-height: 100vh;
          min-height: 100svh;
          min-height: 100dvh;
          padding: 0 0 3rem;
          background-attachment: scroll;
          background-size: cover;
          background-position: center center;
        }
        .hero-inner {
          padding-top: clamp(5.5rem, 14vh, 8rem);
        }
        .hero-content {
          --hero-rise: 12px;
          animation-duration: 0.6s;
        }
        .hero-content .hero-cta {
          flex-direction: column;
          align-items: stretch;
        }
      }

      /* Short/landscape phones: full-height banner can over-zoom and hide the
         subject, so relax the height and let it size to content instead. */
      @media (max-width: 600px) and (max-height: 480px) {
        .hero {
          min-height: auto;
          padding: 6rem 0 3rem;
        }
      }

      @media (prefers-reduced-motion: reduce) {
        .hero-content {
          animation: none;
          opacity: 1;
          transform: none;
        }
      }

      /* ================================================================
         HOME HERO — split layout (mockup-matched redesign)
         Used only by index.html's #home section (class="home-hero"),
         deliberately namespaced away from the older full-bleed .hero /
         .hero-overlay / .hero-content rules above so nothing else on the
         site is affected.
         ================================================================ */
      .home-hero {
        position: relative;
        overflow: hidden;
        padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(3rem, 7vw, 6rem);
        background: var(--sky-50);
      }
      .home-hero-blob {
        position: absolute;
        border-radius: 50%;
        pointer-events: none;
        z-index: 0;
      }
      .home-hero-blob-a {
        width: 640px;
        height: 640px;
        right: -220px;
        top: -220px;
        background: radial-gradient(circle at 30% 30%, var(--sky-200), transparent 70%);
        opacity: 0.9;
      }
      .home-hero-blob-b {
        width: 420px;
        height: 420px;
        left: -160px;
        bottom: -180px;
        background: radial-gradient(circle at 60% 40%, var(--sky-100), transparent 70%);
        opacity: 0.8;
      }
      .home-hero-inner {
        position: relative;
        z-index: 1;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: clamp(2rem, 5vw, 4rem);
        align-items: center;
      }
      .home-hero-copy h1 {
        font-size: clamp(2.4rem, 4.6vw, 3.6rem);
        line-height: 1.12;
        margin-bottom: 0.6em;
      }
      .home-hero-copy p.lead {
        font-size: 1.08rem;
        max-width: 46ch;
        margin: 0 0 2.1rem;
      }
      .home-hero-cta {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
      }

      /* ---- "Are you looking for?" rotating service showcase ----
         Sits inside .home-hero-copy, between the lead paragraph and the
         CTA buttons. All service names live in the DOM at once (good for
         SEO/no-JS) and are stacked with position:absolute so the swap never
         changes the rotator's own height — js/site-script.js just toggles
         which one carries .is-active/.is-leaving. */
      .hero-looking-for {
        margin: 0 0 2rem;
      }
      .hero-looking-for-label {
        margin-bottom: 0.6rem;
      }
      .hero-looking-for-rotator {
        position: relative;
      }
      .hero-looking-for-list {
        position: relative;
        min-height: 4.4rem; /* fits two lines of the longest service name */
        margin: 0;
        padding: 0;
        list-style: none;
        overflow: hidden; /* clips the horizontal slide at the edge of the rotator */
      }
      .hero-looking-for-item {
        position: absolute;
        left: 0;
        right: 0;
        top: 50%;
        margin: 0;
        font-weight: 700;
        font-size: clamp(1.3rem, 2.2vw, 1.8rem);
        line-height: 1.28;
        color: var(--heading-color);
        opacity: 0;
        /* waiting off to the right, ready to slide in */
        transform: translate(48px, -50%);
        transition:
          opacity 0.45s var(--ease),
          transform 0.45s var(--ease);
        pointer-events: none;
      }
      .hero-looking-for-item.is-active {
        opacity: 1;
        transform: translate(0, -50%);
        pointer-events: auto;
      }
      /* outgoing name slides out to the left while the next slides in from the right */
      .hero-looking-for-item.is-leaving {
        opacity: 0;
        transform: translate(-48px, -50%);
      }
      .hero-looking-for-progress {
        display: block;
        margin-top: 0.7rem;
        height: 3px;
        width: 100%;
        max-width: 220px;
        border-radius: 3px;
        background: var(--sky-200);
        overflow: hidden;
      }
      .hero-looking-for-progress::after {
        content: "";
        display: block;
        height: 100%;
        width: 0%;
        border-radius: 3px;
        background: linear-gradient(90deg, var(--cyan-strong), var(--blue-deep));
        animation: heroLookingForFill 1.6s linear infinite;
      }
      @keyframes heroLookingForFill {
        from {
          width: 0%;
        }
        to {
          width: 100%;
        }
      }
      .home-hero-visual {
        position: relative;
        display: flex;
        justify-content: center;
      }
      .home-hero-card {
        width: 100%;
        max-width: 520px;
        aspect-ratio: 1 / 0.96;
        border-radius: 32px;
        background: linear-gradient(150deg, var(--sky-100), var(--sky-200) 85%);
        box-shadow: 0 40px 80px -30px rgba(40, 72, 136, 0.35);
        padding: clamp(1.5rem, 3vw, 2.5rem);
      }
      .home-hero-card svg {
        width: 100%;
        height: 100%;
        display: block;
      }

      @media (max-width: 900px) {
        .home-hero-inner {
          grid-template-columns: 1fr;
          text-align: center;
        }
        .home-hero-copy p.lead {
          margin-inline: auto;
        }
        .home-hero-cta {
          justify-content: center;
        }
        .home-hero-visual {
          order: -1;
          max-width: 420px;
          margin-inline: auto;
        }
        .hero-looking-for-progress {
          margin-inline: auto;
        }
      }

      @media (max-width: 480px) {
        .home-hero-cta {
          flex-direction: column;
          align-items: stretch;
        }
        /* Smaller type + a touch more reserved height (longer service names
           are more likely to wrap to two lines on narrow screens), so the
           swap never nudges the layout or triggers horizontal scrolling. */
        .hero-looking-for-list {
          min-height: 3.6rem;
        }
        .hero-looking-for-item {
          font-size: 1.08rem;
          line-height: 1.3;
          overflow-wrap: break-word;
        }
      }

      @media (prefers-reduced-motion: reduce) {
        .home-hero-blob {
          opacity: 0.6;
        }
        /* Content still rotates (it's useful information), it just no
           longer animates: swap the text with no slide/fade and freeze the
           progress fill instead of looping it. */
        .hero-looking-for-item {
          transition: none;
        }
        .hero-looking-for-item.is-leaving {
          opacity: 0;
        }
        .hero-looking-for-progress::after {
          animation: none;
          width: 100%;
        }
      }

/* ---- Floating action buttons: WhatsApp (left) + Back to top (right) ----
   Fixed, 52px circles (48px on small screens, still above the 44px tap-target
   minimum). z-index 700 keeps them above page content but under the fixed
   header (900) and the mobile nav drawer (800). */
.fab {
  --fab-size: 52px;
  --fab-gap: 20px;
  position: fixed;
  bottom: max(var(--fab-gap), env(safe-area-inset-bottom));
  z-index: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--fab-size);
  height: var(--fab-size);
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform 0.3s var(--ease),
    box-shadow 0.3s var(--ease),
    opacity 0.3s var(--ease),
    visibility 0.3s;
}

.fab svg {
  display: block;
  flex: none;
}

.fab-whatsapp {
  left: max(var(--fab-gap), env(safe-area-inset-left));
  background: linear-gradient(145deg, #2bd46b, #128c7e);
  box-shadow: 0 10px 24px -10px rgba(18, 140, 126, 0.65);
}

.fab-whatsapp:hover {
  transform: scale(1.08);
  box-shadow:
    0 14px 30px -10px rgba(18, 140, 126, 0.7),
    0 0 0 6px rgba(37, 211, 102, 0.18);
}

.fab-top {
  right: max(var(--fab-gap), env(safe-area-inset-right));
  background: linear-gradient(120deg, var(--blue-deep), var(--blue-mid));
  box-shadow: 0 12px 26px -12px rgba(40, 72, 136, 0.55);
  /* Hidden until the page has been scrolled ~300px (toggled by site-script.js) */
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  pointer-events: none;
}

.fab-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.fab-top.is-visible:hover {
  transform: translateY(-3px) scale(1.08);
  box-shadow:
    0 16px 32px -12px rgba(40, 72, 136, 0.65),
    0 0 0 6px rgba(61, 148, 214, 0.16);
}

.fab:active {
  transform: scale(0.96);
}

.fab:focus-visible {
  outline: 3px solid var(--blue-bright);
  outline-offset: 3px;
  border-radius: 50%;
}

@media (max-width: 860px) {
  .fab {
    --fab-size: 48px;
    --fab-gap: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fab,
  .fab:hover,
  .fab:active,
  .fab-top,
  .fab-top.is-visible:hover {
    transition: opacity 0.01s, visibility 0.01s;
    transform: none;
  }
}

/* =========================================================================
   ALLWIN BRAND ADDITIONS (logo palette)
   ========================================================================= */
::selection{background:rgba(80, 168, 224,.35);color:var(--blue-navy);}
input,select,textarea,progress{accent-color:var(--blue-deep);}

/* Key CTA in the header: logo red, with a subtle lift + soft red glow on hover */
.btn-primary.header-enquiry-btn{
  background:linear-gradient(120deg,var(--red-deep),var(--red) 55%,#f04a4a);
  background-size:220% auto;
  box-shadow:0 10px 26px -12px rgba(224, 48, 48,.55);
}
.btn-primary.header-enquiry-btn:hover{
  box-shadow:0 16px 34px -10px rgba(224, 48, 48,.55),0 0 0 4px rgba(224, 48, 48,.14);
}
.btn-primary.header-enquiry-btn:focus-visible{outline-color:var(--red-deep);}

/* Over the hero (transparent header) the blue underline would vanish on dark
   imagery, so use a white -> cyan underline there. */
body.has-hero header.site-header:not(.scrolled) .nav-link::after{
  background:linear-gradient(90deg,#fff,var(--cyan));
}

/* "Let's Create a Brighter Tomorrow Together" banner: the <main> h2 gradient text-fill made the white heading invisible on purple. */
.brighter-cta h2{background:none;background-image:none;-webkit-text-fill-color:#fff;color:#fff}

/* =========================================================================
   COMPATIBILITY & RESPONSIVE HARDENING (iOS Safari / iPadOS / macOS Safari)
   Appended last on purpose so it wins over the earlier duplicate rule sets.
   ========================================================================= */

/* Stop iPhone Safari inflating text in landscape; keep in-page anchors clear of the fixed header */
html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  scroll-padding-top:calc(var(--header-height,74px) + 12px);
}

/* Header entrance animation used fill-mode "both", which leaves transform:translateY(0)
   applied after it finishes. Any non-"none" transform makes the header the containing block
   for its position:fixed children, so the mobile menu drawer collapsed to the header's height
   instead of filling the screen. "backwards" plays the same fade-in but releases the transform. */
header.site-header{animation-fill-mode:backwards;}

/* Mobile menu: keep the last item clear of Safari's bottom bar and stop scroll-chaining */
@media (max-width:860px){
  nav.main-nav{
    padding-bottom:calc(2rem + env(safe-area-inset-bottom,0px));
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }
  .mega-grid a{min-height:44px;}
}

/* Tablet / small-laptop band (desktop nav, but not much room): tighten so the header stays one row */
@media (min-width:861px) and (max-width:1180px){
  nav.main-nav > ul{gap:1.1rem;}
  .nav-link{font-size:.9rem;}
  .header-actions{gap:.7rem;}
  .header-actions .ndis-badge{width:72px;}
  .brand{font-size:1.05rem;}
  .nav-link{white-space:nowrap;}
}
/* Narrowest part of that band (small desktop windows): drop the secondary search icon so the nav keeps one row */
@media (min-width:861px) and (max-width:1000px){
  nav.main-nav > ul{gap:.8rem;}
  .header-actions .search-desktop{display:none;}
}

/* Safari needs the -webkit- prefix on these */
.service-dialog::backdrop{-webkit-backdrop-filter:blur(2px);}
.hero-content .btn-outline{-webkit-backdrop-filter:blur(6px);}

/* iOS Safari: 100vh ignores the collapsing toolbar, so the dialog could be taller than the visible area */
.service-dialog-inner{max-height:85vh;max-height:85dvh;}
.service-dialog-media img{max-height:46vh;max-height:46dvh;}
.service-dialog-close{width:2.75rem;height:2.75rem;}

/* "Let's Create a Brighter Tomorrow" heading inherited the 1.6 body line-height when it wrapped */
.cta-grid h2{line-height:1.25;}