/* ==========================================================
       1. DESIGN TOKENS & RESET
       ========================================================== */
    :root{
      --blue:        #0A4FFF;  /* electric blue (primary)  */
      --blue-dark:   #0842D6;  /* hover blue               */
      --blue-deep:   #0636C9;  /* gradient partner         */
      --navy:        #06133A;  /* text + dark sections     */
      --ice:         #EAF3FF;  /* light section background */
      --cyan:        #B4EFFF;  /* soft accent              */
      --lavender:    #C9D8FF;  /* soft accent              */
      --white:       #FFFFFF;
      --muted:       #51608A;  /* secondary text on light  */
      --on-blue:     rgba(255,255,255,.88);
      --radius-lg:   24px;
      --radius-md:   16px;
      --shadow-sm:   0 6px 18px rgba(6,19,58,.07);
      --shadow-md:   0 14px 34px rgba(6,19,58,.10);
      --shadow-blue: 0 14px 30px rgba(10,79,255,.30);
      --ease:        cubic-bezier(.22,.61,.36,1);
      --header-h:    68px;
      /* Soft shadow used INSTEAD of any dark overlay on photo backgrounds */
      --text-shadow-soft: 0 2px 12px rgba(6,19,58,0.25);
    }

    *,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
    html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 16px); }
    body{
      font-family:'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
      color:var(--navy);
      background:var(--white);
      line-height:1.6;
      -webkit-font-smoothing:antialiased;
      overflow-x:hidden;
    }
    img{ max-width:100%; display:block; }
    ul{ list-style:none; }
    a{ color:inherit; text-decoration:none; }
    button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
    svg{ display:block; }

    /* Visible focus states everywhere */
    :focus-visible{ outline:3px solid rgba(10,79,255,.55); outline-offset:3px; border-radius:8px; }
    .hero :focus-visible, .cta-band :focus-visible,
    .site-footer :focus-visible{ outline-color:var(--cyan); }

    /* Skip link (keyboard users) */
    .skip-link{
      position:fixed; top:-90px; left:16px; z-index:200;
      background:var(--blue); color:#fff; font-weight:600;
      padding:12px 20px; border-radius:12px; box-shadow:var(--shadow-md);
      transition:top .2s var(--ease);
    }
    .skip-link:focus{ top:16px; }

    .container{ max-width:1160px; margin-inline:auto; padding-inline:20px; }
    @media (min-width:768px){ .container{ padding-inline:28px; } }

    /* ==========================================================
       2. SCROLL-REVEAL  (uses `translate` so hover transforms stay free)
       ========================================================== */
    .reveal{ opacity:0; translate:0 26px; transition:opacity .7s var(--ease), translate .7s var(--ease); transition-delay:var(--rd,0ms); }
    .reveal.in{ opacity:1; translate:0 0; }

    /* ==========================================================
       3. BUTTONS
       ========================================================== */
    .btn{
      display:inline-flex; align-items:center; justify-content:center; gap:10px;
      font-weight:600; font-size:1rem; line-height:1;
      padding:16px 28px; border-radius:999px;
      transition:transform .2s var(--ease), box-shadow .2s var(--ease),
                 background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
      will-change:transform;
    }
    .btn:hover{ transform:translateY(-2px); }
    .btn:active{ transform:translateY(0); }
    .btn-sm{ padding:12px 20px; font-size:.92rem; }
    .btn-lg{ padding:18px 34px; font-size:1.06rem; }
    .btn-block{ width:100%; }

    .btn-primary{ background:var(--blue); color:#fff; box-shadow:var(--shadow-blue); }
    .btn-primary:hover{ background:var(--blue-dark); box-shadow:0 18px 36px rgba(10,79,255,.38); }

    .btn-light{ background:#fff; color:var(--blue); box-shadow:0 12px 28px rgba(6,19,58,.25); }
    .btn-light:hover{ box-shadow:0 18px 36px rgba(6,19,58,.32); }

    .btn-outline-light{ background:transparent; color:#fff; border:2px solid rgba(255,255,255,.85); }
    .btn-outline-light:hover{ background:rgba(255,255,255,.14); border-color:#fff; }

    /* Large enquiry button (electric blue, >=56px tall) */
    .btn-enquiry{
      min-height:56px; padding:18px 40px; font-size:1.12rem;
      background:var(--blue); color:#fff; box-shadow:var(--shadow-blue);
    }
    .btn-enquiry:hover{ background:var(--blue-dark); box-shadow:0 18px 36px rgba(10,79,255,.38); }

    /* ==========================================================
       4. STICKY NAVBAR
       ========================================================== */
    .site-header{
      position:sticky; top:0; z-index:100;
      background:rgba(255,255,255,.92);
      -webkit-backdrop-filter:saturate(1.4) blur(12px);
      backdrop-filter:saturate(1.4) blur(12px);
      border-bottom:1px solid rgba(6,19,58,.06);
      transition:box-shadow .25s var(--ease);
    }
    .site-header.scrolled{ box-shadow:0 8px 24px rgba(6,19,58,.08); }
    .header-inner{ display:flex; align-items:center; justify-content:space-between; gap:16px; height:var(--header-h); position:relative; }
    .brand{ display:inline-flex; align-items:center; flex:none; }
    /* Navbar logo: fixed 40px height, no distortion, reserves space (no CLS). */
    .brand-logo{ height:40px; width:72px; object-fit:contain; }

    .header-actions{ display:flex; align-items:center; gap:10px; }

    .nav-link{
      position:relative; font-weight:600; font-size:.95rem; color:var(--navy);
      padding:6px 2px; transition:color .2s var(--ease);
    }
    .nav-link::after{
      content:""; position:absolute; left:0; right:0; bottom:0; height:3px;
      border-radius:99px; background:var(--blue);
      transform:scaleX(0); transform-origin:left; transition:transform .25s var(--ease);
    }
    .nav-link:hover{ color:var(--blue); }
    .nav-link.active{ color:var(--blue); }
    .nav-link.active::after{ transform:scaleX(1); }

    /* Hamburger (mobile) */
    .nav-toggle{
      display:inline-flex; flex-direction:column; justify-content:center; gap:5px;
      width:44px; height:44px; padding:10px; border-radius:12px;
    }
    .nav-toggle .bar{ height:2.5px; width:100%; border-radius:99px; background:var(--navy); transition:transform .25s var(--ease), opacity .2s var(--ease); }
    .nav-toggle.open .bar:nth-child(1){ transform:translateY(7.5px) rotate(45deg); }
    .nav-toggle.open .bar:nth-child(2){ opacity:0; }
    .nav-toggle.open .bar:nth-child(3){ transform:translateY(-7.5px) rotate(-45deg); }

    @media (max-width:899.98px){
      .header-cta{ display:none; }
      .site-nav{
        position:absolute; top:100%; left:0; right:0;
        background:#fff; border-top:1px solid var(--ice);
        box-shadow:0 24px 40px rgba(6,19,58,.14);
        visibility:hidden; opacity:0; translate:0 -10px;
        transition:opacity .25s var(--ease), translate .25s var(--ease), visibility .25s;
      }
      .site-nav.open{ visibility:visible; opacity:1; translate:0 0; }
      .nav-list{ padding:10px 20px 22px; display:grid; gap:2px; }
      .nav-list li:not(.nav-cta-item){ border-bottom:1px solid var(--ice); }
      .nav-link{ display:block; padding:14px 4px; font-size:1.02rem; }
      .nav-link::after{ display:none; }
      .nav-cta-item{ margin-top:14px; }
      .nav-cta-item .btn{ width:100%; }
    }
    @media (min-width:900px){
      .nav-toggle{ display:none; }
      .nav-list{ display:flex; align-items:center; gap:22px; }
      .nav-cta-item{ display:none; }
    }

    /* ==========================================================
       5. HERO
       Photo background ONLY — no overlay, no gradient, no rgba veil,
       no blend mode. Readability comes from pure-white text plus a
       very soft text-shadow. background-color is just a safety net
       painted *behind* the image (hidden once the image loads).
       No logo here — the logo appears only in the navbar & footer.
       ========================================================== */
    .hero{
      position:relative; overflow:hidden;
      display:flex; align-items:center; text-align:center;
      padding:clamp(72px,11vh,128px) 0 clamp(64px,9vh,104px);
      color:#fff;
      background-color:var(--blue);
      background-image:url("https://res.cloudinary.com/dhl91yqke/image/upload/v1792840996/hero-background-1920x1080_pktzjb.png");
      background-size:cover;
      background-position:center;
      background-repeat:no-repeat;
    }
    /* Mobile portrait background (under 768px) */
    @media (max-width:767.98px){
      .hero{
        background-image:url("https://res.cloudinary.com/dhl91yqke/image/upload/v1792840996/hero-background-mobile-1080x1920_durerz.png");
      }
    }
    .hero-pill{
      display:inline-flex; align-items:center; gap:8px;
      background:transparent; border:1.5px solid #fff; color:#fff;
      font-weight:600; font-size:.8rem; letter-spacing:.08em; text-transform:uppercase;
      padding:9px 18px; border-radius:999px; margin-bottom:20px;
      text-shadow:var(--text-shadow-soft);
    }
    .hero h1{
      font-size:clamp(2.1rem, 6.2vw, 3.6rem);
      font-weight:800; line-height:1.1; letter-spacing:-.02em;
      max-width:820px; margin-inline:auto;
      color:#fff; text-shadow:var(--text-shadow-soft);
    }
    .hero h1 .accent{ color:#fff; }
    .hero-sub{
      margin:18px auto 0; max-width:620px;
      font-size:clamp(1rem,2.2vw,1.16rem); color:#fff;
      text-shadow:var(--text-shadow-soft);
    }
    .hero-actions{ margin-top:30px; display:flex; flex-wrap:wrap; justify-content:center; gap:14px; }
    .hero-points{
      margin-top:34px; display:flex; flex-wrap:wrap; justify-content:center;
      gap:12px 28px; font-size:.95rem; font-weight:600; color:#fff;
      text-shadow:var(--text-shadow-soft);
    }
    .hero-points li{ display:inline-flex; align-items:center; gap:8px; }
    .hero-points svg{ color:#fff; flex:none; }

    /* ==========================================================
       6. GENERIC SECTION PIECES
       ========================================================== */
    .section{ padding:clamp(64px,9vw,104px) 0; }
    .section-ice{ background:var(--ice); }
    .section-head{ max-width:680px; margin:0 auto clamp(36px,5vw,56px); text-align:center; }
    .eyebrow{ color:var(--blue); font-weight:600; font-size:.82rem; letter-spacing:.14em; text-transform:uppercase; margin-bottom:12px; }
    .section-head h2{ font-size:clamp(1.65rem,4vw,2.45rem); font-weight:800; line-height:1.18; letter-spacing:-.015em; }
    .section-sub{ margin-top:14px; color:var(--muted); font-size:clamp(.98rem,2vw,1.08rem); }

    .icon-svg{ width:28px; height:28px; stroke:currentColor; fill:none; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
    .check-svg{ width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; flex:none; }

    /* ==========================================================
       7. SERVICES
       ========================================================== */
    .services-grid{ display:grid; gap:22px; grid-template-columns:1fr; }
    @media (min-width:640px){ .services-grid{ grid-template-columns:repeat(2,1fr); } }
    @media (min-width:1000px){ .services-grid{ grid-template-columns:repeat(3,1fr); } }
    .service-card{
      display:flex; flex-direction:column;
      background:#fff; border-radius:var(--radius-lg); padding:30px 26px;
      box-shadow:var(--shadow-sm); border:1px solid rgba(6,19,58,.05);
      transition:transform .25s var(--ease), box-shadow .25s var(--ease);
    }
    .service-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); }
    .service-icon{
      width:56px; height:56px; border-radius:18px;
      background:linear-gradient(135deg, var(--ice), var(--lavender));
      color:var(--blue); display:grid; place-items:center; margin-bottom:18px;
    }
    .service-card h3{ font-size:1.14rem; font-weight:800; margin-bottom:8px; }
    .service-card p{ color:var(--muted); font-size:.95rem; }

    /* ==========================================================
       8. HOW IT WORKS
       ========================================================== */
    .steps-grid{ display:grid; gap:22px; grid-template-columns:1fr; }
    @media (min-width:640px){ .steps-grid{ grid-template-columns:repeat(2,1fr); } }
    @media (min-width:1000px){ .steps-grid{ grid-template-columns:repeat(4,1fr); } }
    .step-card{
      position:relative; background:#fff; border-radius:var(--radius-lg);
      padding:30px 24px; box-shadow:var(--shadow-sm); border:1px solid rgba(6,19,58,.05);
      transition:transform .25s var(--ease), box-shadow .25s var(--ease);
    }
    .step-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); }
    .step-num{
      width:50px; height:50px; border-radius:50%;
      background:linear-gradient(135deg, var(--blue), #3D7BFF);
      color:#fff; font-weight:800; font-size:1.2rem;
      display:grid; place-items:center; margin-bottom:16px; box-shadow:var(--shadow-blue);
    }
    .step-card h3{ font-size:1.08rem; font-weight:800; margin-bottom:8px; }
    .step-card p{ color:var(--muted); font-size:.94rem; }

    /* ==========================================================
       9. WHY US
       ========================================================== */
    .why-grid{ display:grid; gap:22px; grid-template-columns:1fr; }
    @media (min-width:700px){ .why-grid{ grid-template-columns:repeat(2,1fr); } }
    @media (min-width:1080px){ .why-grid{ grid-template-columns:repeat(3,1fr); } }
    .why-card{
      background:#fff; border-radius:var(--radius-lg); padding:28px 24px;
      box-shadow:var(--shadow-sm); border:1px solid rgba(6,19,58,.05);
      transition:transform .25s var(--ease), box-shadow .25s var(--ease);
    }
    .why-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); }
    .why-icon{
      width:52px; height:52px; border-radius:16px;
      background:linear-gradient(135deg, var(--cyan), var(--lavender));
      color:var(--navy); display:grid; place-items:center; margin-bottom:16px;
    }
    .why-card h3{ font-size:1.06rem; font-weight:800; margin-bottom:8px; }
    .why-card p{ color:var(--muted); font-size:.94rem; }

    /* ==========================================================
       10. FAQ (accessible accordion)
       ========================================================== */
    .faq-wrap{ max-width:780px; margin-inline:auto; display:grid; gap:14px; }
    .acc-item{
      background:#fff; border-radius:var(--radius-md); overflow:hidden;
      box-shadow:var(--shadow-sm); border:1px solid rgba(6,19,58,.06);
      transition:box-shadow .25s var(--ease);
    }
    .acc-item.open{ box-shadow:var(--shadow-md); }
    .acc-trigger{
      width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px;
      text-align:left; padding:20px 22px; font-weight:600; font-size:1.02rem;
    }
    .acc-trigger .chev{ color:var(--blue); flex:none; transition:transform .3s var(--ease); }
    .acc-item.open .chev{ transform:rotate(180deg); }
    .acc-panel{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .35s var(--ease); }
    .acc-panel-inner{ overflow:hidden; }
    .acc-panel p{ padding:0 22px 22px; color:var(--muted); font-size:.96rem; }
    .acc-item.open .acc-panel{ grid-template-rows:1fr; }

    /* ==========================================================
       11. ENQUIRY (single big button + reassurance points)
       ========================================================== */
    .enquiry-cta{ text-align:center; }
    .enquiry-points{
      margin-top:26px; display:flex; flex-wrap:wrap; justify-content:center;
      gap:12px 28px; font-size:.95rem; font-weight:600; color:var(--navy);
    }
    .enquiry-points li{ display:inline-flex; align-items:center; gap:8px; }
    .enquiry-points .check-svg{ color:var(--blue); }

    /* ==========================================================
       12. CTA BAND
       Same treatment as the hero: photo background ONLY, no overlay,
       no gradient, no rgba veil, no blend mode, no decorative glow.
       White text + soft shadow for readability.
       ========================================================== */
    .cta-band{
      position:relative; overflow:hidden; color:#fff; text-align:center;
      padding:clamp(64px,9vw,96px) 0;
      background-color:var(--blue);
      background-image:url("https://res.cloudinary.com/dhl91yqke/image/upload/v1792840996/hero-background-1920x1080_pktzjb.png");
      background-size:cover;
      background-position:center;
      background-repeat:no-repeat;
    }
    @media (max-width:767.98px){
      .cta-band{
        background-image:url("https://res.cloudinary.com/dhl91yqke/image/upload/v1792840996/hero-background-mobile-1080x1920_durerz.png");
      }
    }
    .cta-band h2{
      font-size:clamp(1.7rem,4.4vw,2.6rem); font-weight:800; line-height:1.16; letter-spacing:-.015em;
      max-width:700px; margin-inline:auto; color:#fff; text-shadow:var(--text-shadow-soft);
    }
    .cta-band p{
      margin:16px auto 30px; max-width:560px; color:#fff;
      font-size:clamp(.98rem,2vw,1.1rem); text-shadow:var(--text-shadow-soft);
    }

    /* ==========================================================
       13. CONTACT
       ========================================================== */
    .contact-grid{ display:grid; gap:20px; grid-template-columns:1fr; margin-bottom:34px; }
    @media (min-width:800px){ .contact-grid{ grid-template-columns:repeat(3,1fr); } }
    .contact-card{
      display:flex; flex-direction:column; gap:6px; align-items:center; text-align:center;
      background:#fff; border-radius:var(--radius-lg); padding:28px 22px;
      box-shadow:var(--shadow-sm); border:1px solid rgba(6,19,58,.05);
      transition:transform .25s var(--ease), box-shadow .25s var(--ease);
    }
    .contact-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); }
    .contact-icon{
      width:54px; height:54px; border-radius:50%;
      background:linear-gradient(135deg, var(--ice), var(--lavender));
      color:var(--navy); display:grid; place-items:center; margin-bottom:10px;
    }
    .contact-card h3{ font-size:1.02rem; font-weight:800; }
    .contact-card .value{ color:var(--blue); font-weight:600; font-size:.95rem; word-break:break-word; }
    .contact-card .hint{ color:var(--muted); font-size:.85rem; }
    .contact-cta{ text-align:center; }

    /* Threads icon in contact cards: dark navy on light background */
    .threads-icon-dark{
      filter: brightness(0) saturate(100%);
      opacity: 0.9;
    }

    /* ==========================================================
       14. FOOTER
       Dark navy background (#06133A) so the WHITE logo is always
       visible. The footer logo is forced visible on every screen
       size (see .footer-logo rules below + JS safety check).
       Footer logo kept small: 64px wide. Normal spacing (no extra
       bottom padding now that the floating button is gone).
       ========================================================== */
    .site-footer{ background:var(--navy); color:var(--on-blue); padding:56px 0 28px; }
    .footer-grid{ display:grid; gap:36px; grid-template-columns:1fr; }
    @media (min-width:800px){ .footer-grid{ grid-template-columns:2fr 1fr 1.2fr; } }

    /* Footer logo — guaranteed visible on mobile AND desktop, 64px wide. */
    .footer-logo{ display:block !important; visibility:visible !important; opacity:1 !important; width:64px; height:auto; margin:0 auto 16px; }
    @media (min-width:768px){ .footer-logo{ margin:0 0 16px 0; } }

    .footer-brand p{ font-size:.94rem; max-width:360px; }

    /* Row of round social icon buttons under the footer description */
    .footer-socials{ display:flex; gap:12px; margin-top:18px; }
    @media (max-width:767px){ .footer-socials{ justify-content:center; } }
    .social-btn{
      width:40px; height:40px; border-radius:50%;
      display:grid; place-items:center;
      border:1px solid rgba(255,255,255,.28);
      color:#fff; background:transparent;
      transition:background-color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
    }
    .social-btn:hover{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.5); transform:scale(1.08); }
    .social-btn svg{ width:18px; height:18px; }

    /* Threads icon in footer: white on dark background */
    .threads-icon-white{
      filter: brightness(0) invert(1);
    }

    .site-footer h3{ color:#fff; font-size:.95rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; margin-bottom:16px; }
    .footer-links li + li{ margin-top:10px; }
    .footer-links a{ font-size:.95rem; transition:color .2s var(--ease); }
    .footer-links a:hover{ color:var(--cyan); }
    .footer-bottom{
      margin-top:44px; padding-top:22px; border-top:1px solid rgba(255,255,255,.12);
      display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:space-between; font-size:.88rem;
    }

    /* Mobile footer: single centered column (logo, description,
       socials, links, copyright). */
    @media (max-width:767px){
      .site-footer{ text-align:center; }
      .footer-brand p{ margin-inline:auto; }
      .footer-bottom{ flex-direction:column; justify-content:center; text-align:center; }
    }

    /* ==========================================================
       15. REDUCED MOTION
       ========================================================== */
    @media (prefers-reduced-motion: reduce){
      html{ scroll-behavior:auto; }
      *,*::before,*::after{
        animation-duration:.001s !important; animation-iteration-count:1 !important;
        transition-duration:.001s !important;
      }
      .reveal{ opacity:1 !important; translate:0 0 !important; }
      .btn:hover, .service-card:hover, .step-card:hover,
      .why-card:hover, .contact-card:hover, .social-btn:hover{ transform:none; }
    }