:root{
    --ocean-900:#062a35;
    --ocean-800:#0a3d4d;
    --ocean-700:#0e5266;
    --teal-500:#1c8a9e;
    --turq-400:#3dd6c4;
    --turq-300:#7eeade;
    --coral-500:#ff6a45;
    --coral-400:#ff8a6b;
    --sand-100:#fdf6ee;
    --sand-200:#f6ead9;
    --sand-300:#ecd9bf;
    --ink:#0a2730;
    --ink-soft:#3a5560;
    --white:#ffffff;
    --radius:20px;
    --maxw:1200px;
    --font-display:'Bricolage Grotesque',sans-serif;
    --font-body:'Plus Jakarta Sans',sans-serif;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    font-family:var(--font-body);
    color:var(--ink);
    background:var(--sand-100);
    line-height:1.6;
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,h4{font-family:var(--font-display);line-height:1.05;letter-spacing:-0.02em;font-weight:700}
  a{text-decoration:none;color:inherit}
  ::selection{background:var(--turq-400);color:var(--ocean-900)}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}

  /* ---------- NAV ---------- */
  header{
    position:fixed;top:0;left:0;right:0;z-index:100;
    transition:all .35s ease;
    padding:18px 0;
  }
  header.scrolled{
    background:rgba(253,246,238,.82);
    backdrop-filter:blur(14px);
    box-shadow:0 1px 0 rgba(10,61,77,.08);
    padding:12px 0;
  }
  .nav{display:flex;align-items:center;justify-content:space-between}
  .logo{display:flex;align-items:center;gap:12px;cursor:pointer}
  .logo-mark{
    width:48px;height:48px;border-radius:14px;flex-shrink:0;
    background:linear-gradient(135deg,var(--teal-500),var(--turq-400) 55%,var(--coral-500));
    display:flex;align-items:center;justify-content:center;
    font-family:var(--font-display);font-weight:800;color:var(--white);
    font-size:1.05rem;letter-spacing:.02em;
    box-shadow:0 8px 24px -8px rgba(28,138,158,.6);
    position:relative;overflow:hidden;
  }
  .logo-mark::after{
    content:"";position:absolute;inset:0;
    background:radial-gradient(circle at 30% 20%,rgba(255,255,255,.5),transparent 60%);
  }
  .logo-text{display:flex;flex-direction:column;line-height:1}
  .logo-text b{font-family:var(--font-display);font-weight:800;font-size:1.18rem;letter-spacing:-.01em;color:var(--ink)}
  .logo-text span{font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-soft);margin-top:4px;font-weight:600}
  .nav-links{display:flex;align-items:center;gap:34px}
  .nav-contacts{display:none}
  .nav-links a{font-size:.92rem;font-weight:500;color:var(--ink-soft);transition:color .2s;position:relative}
  .nav-links a:not(.btn)::after{content:"";position:absolute;left:0;bottom:-4px;width:0;height:2px;background:var(--coral-500);transition:width .25s}
  .nav-links a:not(.btn):hover{color:var(--ink)}
  .nav-links a.btn-coral{color:var(--white)}
  .nav-links a.btn-coral:hover{color:var(--white)}
  .nav-links a:not(.btn):hover::after{width:100%}
  .btn{
    display:inline-flex;align-items:center;gap:8px;
    padding:12px 22px;border-radius:100px;font-weight:600;font-size:.92rem;
    transition:transform .2s,box-shadow .2s,background .2s;cursor:pointer;border:none;
  }
  .btn-primary{background:var(--ink);color:var(--white)}
  .btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 28px -10px rgba(10,39,48,.6)}
  .btn-coral{background:var(--coral-500);color:var(--white)}
  .btn-coral:hover{transform:translateY(-2px);box-shadow:0 14px 30px -10px rgba(255,106,69,.7)}
  .btn-ghost{background:transparent;color:var(--ink);border:1.5px solid rgba(10,39,48,.18)}
  .btn-ghost:hover{border-color:var(--ink);background:rgba(10,39,48,.04)}
  .menu-toggle{display:none;background:none;border:none;cursor:pointer;flex-direction:column;gap:5px}
  .menu-toggle span{width:26px;height:2px;background:var(--ink);border-radius:2px;transition:.3s}

  /* ---------- HERO ---------- */
  .hero{
    position:relative;min-height:100vh;display:flex;align-items:center;
    padding:140px 0 80px;
    background:
      radial-gradient(120% 80% at 80% -10%,rgba(61,214,196,.22),transparent 55%),
      radial-gradient(90% 70% at 10% 110%,rgba(255,106,69,.14),transparent 50%),
      linear-gradient(180deg,var(--sand-100),var(--sand-200));
    overflow:hidden;
  }
  .hero-grid{
    display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center;width:100%;
  }
  .eyebrow{
    display:inline-flex;align-items:center;gap:10px;
    padding:8px 16px;border-radius:100px;background:rgba(28,138,158,.1);
    color:var(--teal-500);font-weight:600;font-size:.8rem;letter-spacing:.04em;
    margin-bottom:26px;border:1px solid rgba(28,138,158,.2);
  }
  .eyebrow .dot{width:8px;height:8px;border-radius:50%;background:var(--coral-500);animation:pulse 2s infinite}
  @keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.4)}}
  .hero h1{font-size:clamp(2.6rem,5.4vw,4.6rem);margin-bottom:24px}
  .hero h1 .grad{
    background:linear-gradient(110deg,var(--teal-500),var(--turq-400) 50%,var(--coral-500));
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  }
  .hero p.lead{font-size:1.18rem;color:var(--ink-soft);max-width:520px;margin-bottom:36px}
  .hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:42px}
  .hero-trust{display:flex;align-items:center;gap:26px;flex-wrap:wrap}
  .hero-trust small{font-size:.78rem;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.1em;font-weight:600}
  .trust-flags{display:flex;gap:8px;font-size:1.3rem;filter:saturate(1.1)}

  /* hero visual */
  .hero-visual{position:relative;height:520px}
  .globe{
    position:absolute;inset:0;margin:auto;width:380px;height:380px;border-radius:50%;
    background:
      radial-gradient(circle at 35% 30%,var(--turq-300),var(--teal-500) 45%,var(--ocean-800) 100%);
    box-shadow:0 40px 80px -30px rgba(10,61,77,.6),inset -30px -30px 60px rgba(6,42,53,.5),inset 20px 20px 50px rgba(126,234,222,.4);
    overflow:hidden;animation:float 7s ease-in-out infinite;
  }
  @keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-18px)}}
  .globe::before{
    content:"";position:absolute;inset:0;
    background-image:
      repeating-linear-gradient(0deg,transparent,transparent 28px,rgba(253,246,238,.13) 28px,rgba(253,246,238,.13) 29px),
      repeating-linear-gradient(90deg,transparent,transparent 28px,rgba(253,246,238,.1) 28px,rgba(253,246,238,.1) 29px);
    border-radius:50%;
  }
  .globe-glow{display:none}
  .orbit{position:absolute;inset:0;margin:auto;border-radius:50%;border:1.5px dashed rgba(28,138,158,.35);animation:spin 28s linear infinite}
  .orbit.o1{width:480px;height:480px}
  .orbit.o2{width:560px;height:560px;animation-duration:40s;animation-direction:reverse;border-color:rgba(255,106,69,.3)}
  @keyframes spin{to{transform:rotate(360deg)}}
  .pin{
    position:absolute;width:46px;height:46px;border-radius:50%;
    background:var(--white);display:flex;align-items:center;justify-content:center;
    box-shadow:0 12px 28px -8px rgba(10,61,77,.4);font-size:1.3rem;
    animation:float 5s ease-in-out infinite;
  }
  .pin.p1{top:6%;left:50%;margin-left:-23px}
  .pin.p2{top:50%;right:-4%;margin-top:-23px;animation-delay:1s}
  .pin.p3{bottom:4%;left:18%;animation-delay:2s}
  .pin.p4{top:24%;left:-2%;animation-delay:.5s}
  .float-card{
    position:absolute;background:rgba(255,255,255,.9);backdrop-filter:blur(8px);
    border-radius:16px;padding:14px 18px;box-shadow:0 18px 40px -16px rgba(10,61,77,.4);
    border:1px solid rgba(255,255,255,.6);
  }
  .float-card .fc-label{font-size:.68rem;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.08em;font-weight:600}
  .float-card .fc-val{font-family:var(--font-display);font-weight:800;font-size:1.3rem;color:var(--ink)}
  .fc1{top:8%;left:-6%;animation:float 6s ease-in-out infinite}
  .fc2{bottom:10%;right:-8%;animation:float 6s ease-in-out infinite;animation-delay:1.5s}

  /* ---------- LOGO STRIP ---------- */
  .marquee-sec{background:var(--ocean-900);padding:26px 0;overflow:hidden}
  .marquee{display:flex;gap:60px;white-space:nowrap;animation:scroll 26s linear infinite;width:max-content}
  .marquee span{color:rgba(253,246,238,.55);font-family:var(--font-display);font-weight:600;font-size:1.05rem;display:flex;align-items:center;gap:14px}
  .marquee span::before{content:"◆";color:var(--turq-400);font-size:.7rem}
  @keyframes scroll{to{transform:translateX(-50%)}}

  /* ---------- SECTION SHARED ---------- */
  section{position:relative}
  .sec-pad{padding:110px 0}
  .sec-head{max-width:680px;margin-bottom:60px}
  .sec-tag{display:inline-block;color:var(--coral-500);font-weight:700;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:16px}
  .sec-head h2{font-size:clamp(2rem,4vw,3.1rem);margin-bottom:18px}
  .sec-head p{font-size:1.1rem;color:var(--ink-soft)}
  .center{text-align:center;margin-left:auto;margin-right:auto}

  /* ---------- SERVICES ---------- */
  .services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
  .svc-card{
    background:var(--white);border-radius:var(--radius);padding:34px 30px;
    border:1px solid rgba(10,61,77,.07);transition:transform .35s,box-shadow .35s,border-color .35s;
    position:relative;overflow:hidden;
  }
  .svc-card::before{
    content:"";position:absolute;top:0;left:0;right:0;height:4px;
    background:linear-gradient(90deg,var(--teal-500),var(--turq-400),var(--coral-500));
    transform:scaleX(0);transform-origin:left;transition:transform .4s;
  }
  .svc-card:hover{transform:translateY(-8px);box-shadow:0 30px 60px -28px rgba(10,61,77,.3);border-color:transparent}
  .svc-card:hover::before{transform:scaleX(1)}
  .svc-icon{
    width:58px;height:58px;border-radius:16px;display:flex;align-items:center;justify-content:center;
    font-size:1.7rem;margin-bottom:22px;background:linear-gradient(135deg,rgba(61,214,196,.18),rgba(28,138,158,.12));
  }
  .svc-card h3{font-size:1.32rem;margin-bottom:12px}
  .svc-card p{color:var(--ink-soft);font-size:.96rem}

  /* ---------- INDUSTRIES ---------- */
  .ind-sec{background:linear-gradient(180deg,var(--sand-200),var(--sand-100))}
  .ind-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
  .ind-card{
    background:var(--white);border-radius:18px;padding:28px 22px;text-align:center;
    border:1px solid rgba(10,61,77,.06);transition:transform .3s,background .3s,color .3s;
  }
  .ind-card .ic-emoji{font-size:2.2rem;display:block;margin-bottom:14px}
  .ind-card h4{font-size:1.05rem;margin-bottom:8px}
  .ind-card p{font-size:.85rem;color:var(--ink-soft)}
  .ind-card:hover{transform:translateY(-6px);background:var(--ocean-800);color:var(--white)}
  .ind-card:hover h4{color:var(--white)}
  .ind-card:hover p{color:rgba(253,246,238,.7)}

  /* ---------- WHY / FEATURES ---------- */
  .why-sec{background:var(--ocean-900);color:var(--sand-100);overflow:hidden;position:relative}
  .why-sec::before{content:"";position:absolute;top:-10%;right:-5%;width:500px;height:500px;border-radius:50%;background:radial-gradient(circle,rgba(61,214,196,.18),transparent 70%)}
  .why-sec::after{content:"";position:absolute;bottom:-15%;left:-8%;width:460px;height:460px;border-radius:50%;background:radial-gradient(circle,rgba(255,106,69,.13),transparent 70%)}
  .why-sec .sec-tag{color:var(--turq-400)}
  .why-sec .sec-head h2{color:var(--white)}
  .why-sec .sec-head p{color:rgba(253,246,238,.7)}
  .why-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;position:relative;z-index:1}
  .why-card{
    display:flex;gap:20px;padding:28px;border-radius:18px;
    background:rgba(253,246,238,.04);border:1px solid rgba(253,246,238,.1);
    transition:background .3s,transform .3s;
  }
  .why-card:hover{background:rgba(253,246,238,.08);transform:translateX(6px)}
  .why-num{font-family:var(--font-display);font-weight:800;font-size:1.5rem;color:var(--turq-400);flex-shrink:0;line-height:1}
  .why-card h4{font-size:1.18rem;margin-bottom:8px;color:var(--white)}
  .why-card p{font-size:.94rem;color:rgba(253,246,238,.66)}

  /* ---------- PROCESS ---------- */
  .proc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;position:relative}
  .proc-step{position:relative;padding-top:20px}
  .proc-step .pnum{
    width:64px;height:64px;border-radius:18px;display:flex;align-items:center;justify-content:center;
    font-family:var(--font-display);font-weight:800;font-size:1.5rem;color:var(--white);margin-bottom:22px;
    background:linear-gradient(135deg,var(--teal-500),var(--turq-400));box-shadow:0 14px 28px -12px rgba(28,138,158,.6);
  }
  .proc-step:nth-child(2) .pnum{background:linear-gradient(135deg,var(--turq-400),var(--teal-500))}
  .proc-step:nth-child(3) .pnum{background:linear-gradient(135deg,var(--coral-400),var(--coral-500))}
  .proc-step:nth-child(4) .pnum{background:linear-gradient(135deg,var(--coral-500),var(--ocean-700))}
  .proc-step h4{font-size:1.2rem;margin-bottom:10px}
  .proc-step p{color:var(--ink-soft);font-size:.94rem}

  /* ---------- STATS ---------- */
  .stats-sec{background:linear-gradient(120deg,var(--teal-500),var(--ocean-800));color:var(--white);border-radius:0}
  .stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;text-align:center}
  .stat .num{font-family:var(--font-display);font-weight:800;font-size:clamp(2.4rem,4.5vw,3.6rem);line-height:1;background:linear-gradient(120deg,#fff,var(--turq-300));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
  .stat .lbl{margin-top:10px;font-size:.92rem;color:rgba(253,246,238,.82);letter-spacing:.02em}

  /* ---------- TESTIMONIALS ---------- */
  .test-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
  .test-card{background:var(--white);border-radius:var(--radius);padding:32px;border:1px solid rgba(10,61,77,.07);position:relative}
  .test-card .quote{font-size:2.6rem;font-family:var(--font-display);color:var(--turq-400);line-height:.6;margin-bottom:8px}
  .test-card p{color:var(--ink);font-size:1rem;margin-bottom:24px}
  .test-author{display:flex;align-items:center;gap:14px}
  .test-avatar{width:46px;height:46px;border-radius:50%;background:linear-gradient(135deg,var(--teal-500),var(--coral-500));display:flex;align-items:center;justify-content:center;color:#fff;font-family:var(--font-display);font-weight:700}
  .test-author b{display:block;font-size:.95rem}
  .test-author small{color:var(--ink-soft);font-size:.82rem}

  /* ---------- CONTACT ---------- */
  .contact-sec{background:linear-gradient(180deg,var(--sand-100),var(--sand-200))}
  .contact-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:50px;align-items:start}
  .contact-info h2{font-size:clamp(2rem,4vw,3rem);margin-bottom:18px}
  .contact-info p.intro{color:var(--ink-soft);font-size:1.08rem;margin-bottom:40px;max-width:440px}
  .contact-block{margin-bottom:30px}
  .contact-block .cb-label{font-size:.74rem;text-transform:uppercase;letter-spacing:.14em;color:var(--coral-500);font-weight:700;margin-bottom:14px;display:block}
  .contact-row{display:flex;align-items:center;gap:16px;margin-bottom:12px;padding:14px 18px;background:var(--white);border-radius:14px;border:1px solid rgba(10,61,77,.07);transition:transform .25s,box-shadow .25s}
  .contact-row:hover{transform:translateX(5px);box-shadow:0 14px 30px -16px rgba(10,61,77,.3)}
  .contact-row .cr-icon{width:42px;height:42px;border-radius:11px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:1.2rem;background:linear-gradient(135deg,rgba(61,214,196,.2),rgba(28,138,158,.12))}
  .contact-row .cr-text small{display:block;font-size:.72rem;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.06em}
  .contact-row .cr-text b{font-size:1.02rem;font-weight:600}
  .contact-form{background:var(--white);border-radius:var(--radius);padding:38px;box-shadow:0 40px 80px -40px rgba(10,61,77,.4);border:1px solid rgba(10,61,77,.06)}
  .contact-form h3{font-size:1.4rem;margin-bottom:24px}
  .field{margin-bottom:18px}
  .field label{display:block;font-size:.82rem;font-weight:600;color:var(--ink-soft);margin-bottom:7px}
  .field input,.field textarea,.field select{
    width:100%;padding:13px 16px;border-radius:12px;border:1.5px solid rgba(10,61,77,.14);
    font-family:var(--font-body);font-size:.95rem;color:var(--ink);background:var(--sand-100);transition:border-color .2s,background .2s;
  }
  .field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--teal-500);background:var(--white)}
  .field textarea{resize:vertical;min-height:110px}
  .form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  .contact-form .btn-coral{width:100%;justify-content:center;margin-top:8px;padding:15px}

  /* ---------- FOOTER ---------- */
  footer{background:var(--ocean-900);color:rgba(253,246,238,.7);padding:70px 0 30px}
  .foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;margin-bottom:50px}
  footer .logo-text b{color:var(--white)}
  footer .logo-text span{color:rgba(253,246,238,.5)}
  .foot-about{font-size:.92rem;max-width:300px;margin-top:20px;line-height:1.7}
  .foot-col h5{color:var(--white);font-family:var(--font-display);font-size:1rem;margin-bottom:18px;font-weight:700}
  .foot-col a{display:block;font-size:.9rem;margin-bottom:11px;color:rgba(253,246,238,.65);transition:color .2s}
  .foot-col a:hover{color:var(--turq-400)}
  .foot-bottom{border-top:1px solid rgba(253,246,238,.12);padding-top:26px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;font-size:.85rem}
  .foot-socials{display:flex;gap:12px}
  .foot-socials a{width:38px;height:38px;border-radius:10px;background:rgba(253,246,238,.07);display:flex;align-items:center;justify-content:center;transition:background .25s,transform .25s}
  .foot-socials a:hover{background:var(--turq-400);transform:translateY(-3px)}

  /* ---------- REVEAL ANIM ---------- */
  .reveal{opacity:0;transform:translateY(34px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
  .reveal.show{opacity:1;transform:none}

  /* ---------- RESPONSIVE ---------- */
  @media(max-width:980px){
    .hero-grid{grid-template-columns:1fr;gap:40px}
    .hero-visual{height:420px;order:-1}
    .services-grid,.test-grid,.proc-grid{grid-template-columns:repeat(2,1fr)}
    .ind-grid{grid-template-columns:repeat(2,1fr)}
    .why-grid{grid-template-columns:1fr}
    .stats-grid{grid-template-columns:repeat(2,1fr);gap:40px 20px}
    .contact-grid{grid-template-columns:1fr;gap:40px}
    .foot-grid{grid-template-columns:1fr 1fr;gap:34px}
  }
  @media(max-width:680px){
    .nav-links{
      position:fixed;top:0;right:-100%;height:100vh;height:100dvh;width:100vw;max-width:none;
      background:linear-gradient(180deg,var(--sand-100),var(--sand-200));
      flex-direction:column;justify-content:center;align-items:center;gap:30px;
      padding:100px 32px 130px;box-shadow:none;transition:right .4s cubic-bezier(.2,.7,.2,1);z-index:99;
    }
    .nav-links.open{right:0}
    .nav-links a:not(.btn){font-size:1.6rem;color:var(--ink);font-weight:600}
    .nav-links a.btn-coral{font-size:1.05rem;padding:15px 30px;margin-top:8px}
    .nav-contacts{
      display:flex;flex-direction:column;align-items:center;gap:14px;
      position:absolute;bottom:46px;left:0;right:0;padding:0 24px;
    }
    .nav-contacts a{font-size:1rem;color:var(--ink-soft);font-weight:600}
    .menu-toggle{display:flex;z-index:101}
    .menu-toggle.active span:nth-child(1){transform:translateY(7px) rotate(45deg)}
    .menu-toggle.active span:nth-child(2){opacity:0}
    .menu-toggle.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
    .services-grid,.test-grid,.proc-grid,.ind-grid,.stats-grid{grid-template-columns:1fr}
    .form-row{grid-template-columns:1fr}
    .foot-grid{grid-template-columns:1fr}
    .float-card{display:none}
    .sec-pad{padding:72px 0}
    .hero{padding:120px 0 60px}
  }

  /* ============================================================
     INTERNAL PAGES — shared additions
     ============================================================ */

  /* page hero (sub-pages) */
  .page-hero{
    position:relative;padding:170px 0 90px;overflow:hidden;
    background:
      radial-gradient(110% 80% at 85% -20%,rgba(61,214,196,.22),transparent 55%),
      radial-gradient(90% 70% at 5% 120%,rgba(255,106,69,.13),transparent 55%),
      linear-gradient(180deg,var(--sand-100),var(--sand-200));
  }
  .page-hero .crumb{font-size:.82rem;color:var(--ink-soft);font-weight:600;letter-spacing:.04em;margin-bottom:18px}
  .page-hero .crumb a{color:var(--teal-500)}
  .page-hero .crumb a:hover{text-decoration:underline}
  .page-hero h1{font-size:clamp(2.4rem,5vw,4rem);max-width:760px;margin-bottom:20px}
  .page-hero h1 .grad{background:linear-gradient(110deg,var(--teal-500),var(--turq-400) 50%,var(--coral-500));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
  .page-hero p.sub{font-size:1.18rem;color:var(--ink-soft);max-width:600px}
  .page-hero .eyebrow{margin-bottom:24px}

  /* alternating detail rows (services) */
  .detail-row{
    display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:center;
    padding:60px 0;border-bottom:1px solid rgba(10,61,77,.08);
  }
  .detail-row:last-child{border-bottom:none}
  .detail-row.flip .dr-media{order:2}
  .dr-text .dr-icon{
    width:64px;height:64px;border-radius:18px;display:flex;align-items:center;justify-content:center;
    font-size:1.9rem;margin-bottom:22px;background:linear-gradient(135deg,rgba(61,214,196,.2),rgba(28,138,158,.12));
  }
  .dr-text h3{font-size:1.8rem;margin-bottom:16px}
  .dr-text p{color:var(--ink-soft);font-size:1.02rem;margin-bottom:22px}
  .dr-list{list-style:none}
  .dr-list li{display:flex;gap:12px;align-items:flex-start;margin-bottom:12px;font-size:.96rem;color:var(--ink)}
  .dr-list li::before{content:"✓";color:var(--teal-500);font-weight:800;flex-shrink:0;margin-top:1px}
  .dr-media{
    position:relative;border-radius:24px;min-height:300px;overflow:hidden;
    background:linear-gradient(140deg,var(--ocean-800),var(--teal-500));
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 40px 80px -40px rgba(10,61,77,.5);
  }
  .dr-media .big-emoji{font-size:6rem;filter:drop-shadow(0 14px 24px rgba(6,42,53,.4));z-index:1}
  .dr-media::before{
    content:"";position:absolute;inset:0;
    background-image:repeating-linear-gradient(0deg,transparent,transparent 30px,rgba(253,246,238,.07) 30px,rgba(253,246,238,.07) 31px),repeating-linear-gradient(90deg,transparent,transparent 30px,rgba(253,246,238,.06) 30px,rgba(253,246,238,.06) 31px);
  }
  .dr-media .blob{position:absolute;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,rgba(255,106,69,.5),transparent 70%);top:-40px;right:-40px;filter:blur(10px)}

  /* about — story + values */
  .story-grid{display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:center}
  .story-grid .story-img{
    border-radius:24px;min-height:380px;background:linear-gradient(140deg,var(--teal-500),var(--ocean-800));
    position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;
    box-shadow:0 40px 80px -40px rgba(10,61,77,.5);
  }
  .story-grid .story-img .big-emoji{font-size:7rem;z-index:1}
  .story-grid .story-img::before{content:"";position:absolute;inset:0;background-image:repeating-linear-gradient(0deg,transparent,transparent 30px,rgba(253,246,238,.07) 30px,rgba(253,246,238,.07) 31px),repeating-linear-gradient(90deg,transparent,transparent 30px,rgba(253,246,238,.06) 30px,rgba(253,246,238,.06) 31px)}
  .story-text p{color:var(--ink-soft);font-size:1.05rem;margin-bottom:18px}
  .story-text p strong{color:var(--ink)}

  .values-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
  .value-card{background:var(--white);border-radius:var(--radius);padding:32px;border:1px solid rgba(10,61,77,.07);transition:transform .3s,box-shadow .3s}
  .value-card:hover{transform:translateY(-6px);box-shadow:0 30px 60px -30px rgba(10,61,77,.3)}
  .value-card .v-icon{font-size:2rem;margin-bottom:16px}
  .value-card h4{font-size:1.22rem;margin-bottom:10px}
  .value-card p{color:var(--ink-soft);font-size:.95rem}

  /* team */
  .team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
  .team-card{text-align:center}
  .team-avatar{
    width:100%;aspect-ratio:1;border-radius:22px;margin-bottom:16px;
    background:linear-gradient(140deg,var(--turq-400),var(--teal-500));
    display:flex;align-items:center;justify-content:center;font-size:3rem;color:#fff;
    font-family:var(--font-display);font-weight:800;position:relative;overflow:hidden;
    box-shadow:0 24px 50px -26px rgba(28,138,158,.6);
  }
  .team-card:nth-child(2) .team-avatar{background:linear-gradient(140deg,var(--coral-400),var(--coral-500))}
  .team-card:nth-child(3) .team-avatar{background:linear-gradient(140deg,var(--teal-500),var(--ocean-800))}
  .team-card:nth-child(4) .team-avatar{background:linear-gradient(140deg,var(--turq-300),var(--teal-500))}
  .team-card h4{font-size:1.12rem;margin-bottom:3px}
  .team-card small{color:var(--coral-500);font-weight:600;font-size:.85rem}

  /* work / case studies */
  .work-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:30px}
  .case-card{
    background:var(--white);border-radius:24px;overflow:hidden;border:1px solid rgba(10,61,77,.07);
    transition:transform .35s,box-shadow .35s;
  }
  .case-card:hover{transform:translateY(-8px);box-shadow:0 40px 80px -36px rgba(10,61,77,.35)}
  .case-thumb{
    height:220px;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;
  }
  .case-thumb .big-emoji{font-size:4.4rem;z-index:1;filter:drop-shadow(0 12px 20px rgba(0,0,0,.25))}
  .case-thumb::before{content:"";position:absolute;inset:0;background-image:repeating-linear-gradient(45deg,transparent,transparent 24px,rgba(253,246,238,.08) 24px,rgba(253,246,238,.08) 25px)}
  .ct1{background:linear-gradient(140deg,var(--teal-500),var(--ocean-800))}
  .ct2{background:linear-gradient(140deg,var(--coral-400),var(--coral-500))}
  .ct3{background:linear-gradient(140deg,var(--turq-400),var(--teal-500))}
  .ct4{background:linear-gradient(140deg,var(--ocean-700),var(--ocean-900))}
  .case-body{padding:28px 30px 32px}
  .case-tags{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
  .case-tags span{font-size:.72rem;font-weight:600;padding:5px 12px;border-radius:100px;background:rgba(28,138,158,.1);color:var(--teal-500)}
  .case-body h3{font-size:1.4rem;margin-bottom:10px}
  .case-body p{color:var(--ink-soft);font-size:.96rem;margin-bottom:20px}
  .case-metrics{display:flex;gap:28px;border-top:1px solid rgba(10,61,77,.08);padding-top:18px}
  .case-metrics .cm .cm-num{font-family:var(--font-display);font-weight:800;font-size:1.5rem;color:var(--coral-500);line-height:1}
  .case-metrics .cm .cm-lbl{font-size:.76rem;color:var(--ink-soft);margin-top:3px}

  /* FAQ */
  .faq-wrap{max-width:780px;margin:0 auto}
  .faq-item{background:var(--white);border:1px solid rgba(10,61,77,.08);border-radius:16px;margin-bottom:14px;overflow:hidden;transition:box-shadow .3s}
  .faq-item.open{box-shadow:0 20px 44px -24px rgba(10,61,77,.3)}
  .faq-q{padding:22px 26px;font-family:var(--font-display);font-weight:600;font-size:1.08rem;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;color:var(--ink)}
  .faq-q .faq-plus{flex-shrink:0;width:26px;height:26px;border-radius:50%;background:rgba(28,138,158,.12);color:var(--teal-500);display:flex;align-items:center;justify-content:center;font-size:1.2rem;transition:transform .3s,background .3s}
  .faq-item.open .faq-plus{transform:rotate(45deg);background:var(--coral-500);color:#fff}
  .faq-a{max-height:0;overflow:hidden;transition:max-height .35s ease;color:var(--ink-soft);font-size:.97rem}
  .faq-a div{padding:0 26px 24px}
  .faq-item.open .faq-a{max-height:300px}

  /* CTA band */
  .cta-band{background:linear-gradient(120deg,var(--teal-500),var(--ocean-800));color:var(--white);text-align:center;border-radius:28px;padding:64px 40px;position:relative;overflow:hidden}
  .cta-band::before{content:"";position:absolute;top:-30%;left:10%;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(255,106,69,.3),transparent 70%)}
  .cta-band::after{content:"";position:absolute;bottom:-40%;right:8%;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle,rgba(126,234,222,.25),transparent 70%)}
  .cta-band h2{font-size:clamp(1.8rem,3.6vw,2.8rem);color:#fff;margin-bottom:16px;position:relative;z-index:1}
  .cta-band p{color:rgba(253,246,238,.82);font-size:1.1rem;max-width:520px;margin:0 auto 30px;position:relative;z-index:1}
  .cta-band .btn{position:relative;z-index:1}

  @media(max-width:980px){
    .detail-row,.story-grid{grid-template-columns:1fr;gap:30px}
    .detail-row.flip .dr-media{order:0}
    .values-grid{grid-template-columns:1fr}
    .team-grid{grid-template-columns:repeat(2,1fr)}
    .work-grid{grid-template-columns:1fr}
    .page-hero{padding:140px 0 70px}
  }
  @media(max-width:680px){
    .team-grid{grid-template-columns:1fr}
    .case-metrics{gap:18px}
  }

  /* ============================================================
     SERVICE DETAIL PAGES
     ============================================================ */
  .svc-hero-badge{
    width:84px;height:84px;border-radius:24px;display:flex;align-items:center;justify-content:center;
    font-size:2.6rem;margin-bottom:26px;
    background:linear-gradient(135deg,var(--teal-500),var(--turq-400) 60%,var(--coral-500));
    box-shadow:0 20px 44px -16px rgba(28,138,158,.6);
  }
  .overview-grid{display:grid;grid-template-columns:1.3fr .7fr;gap:54px;align-items:start}
  .overview-text p{color:var(--ink-soft);font-size:1.06rem;margin-bottom:18px}
  .overview-text p strong{color:var(--ink)}
  .highlight-card{
    background:var(--ocean-900);color:var(--sand-100);border-radius:24px;padding:32px;
    position:relative;overflow:hidden;box-shadow:0 30px 60px -30px rgba(10,61,77,.5);
  }
  .highlight-card::before{content:"";position:absolute;top:-30%;right:-20%;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,rgba(61,214,196,.3),transparent 70%)}
  .highlight-card h4{color:var(--white);font-size:1.15rem;margin-bottom:20px;position:relative;z-index:1}
  .highlight-card ul{list-style:none;position:relative;z-index:1}
  .highlight-card li{display:flex;gap:12px;align-items:flex-start;margin-bottom:14px;font-size:.95rem;color:rgba(253,246,238,.85)}
  .highlight-card li::before{content:"→";color:var(--turq-400);font-weight:800;flex-shrink:0}

  .deliverables{display:grid;grid-template-columns:1fr 1fr;gap:14px 40px;list-style:none;max-width:860px}
  .deliverables li{display:flex;gap:12px;align-items:flex-start;font-size:1rem;color:var(--ink)}
  .deliverables li::before{content:"✓";color:var(--teal-500);font-weight:800;flex-shrink:0;margin-top:2px}

  .ideal-row{display:flex;gap:10px;flex-wrap:wrap}
  .ideal-row span{font-size:.92rem;font-weight:600;padding:10px 18px;border-radius:100px;background:var(--white);border:1px solid rgba(10,61,77,.1);color:var(--ink)}

  .svc-nav-links{display:flex;gap:14px;flex-wrap:wrap;margin-top:14px}
  .svc-nav-links a{font-size:.9rem;font-weight:600;color:var(--teal-500);padding:8px 16px;border-radius:100px;border:1px solid rgba(28,138,158,.25);transition:background .2s,color .2s}
  .svc-nav-links a:hover{background:var(--teal-500);color:#fff}

  .learn-link{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--coral-500);font-size:.96rem;transition:gap .2s}
  .learn-link:hover{gap:11px}

  @media(max-width:980px){
    .overview-grid{grid-template-columns:1fr;gap:34px}
    .deliverables{grid-template-columns:1fr}
  }


  /* ============================================================
     BOOK A CALL widget
     ============================================================ */
  .bookcall .bc-sub{color:var(--ink-soft);font-size:.95rem;margin:-12px 0 22px}
  .bc-chips{display:flex;flex-wrap:wrap;gap:8px}
  .bc-chip{
    padding:9px 15px;border-radius:100px;border:1.5px solid rgba(10,61,77,.14);
    background:var(--sand-100);font-size:.86rem;font-weight:600;cursor:pointer;
    color:var(--ink-soft);transition:all .2s;user-select:none;font-family:var(--font-body);
  }
  .bc-chip:hover{border-color:var(--teal-500);color:var(--ink)}
  .bc-chip.sel{background:var(--teal-500);border-color:var(--teal-500);color:#fff}
  .bc-warn{color:var(--coral-500);font-size:.86rem;font-weight:600;min-height:1.1em;margin:8px 0 2px}
  .bc-foot{font-size:.86rem;color:var(--ink-soft);margin-top:16px;text-align:center}
  .bc-foot a{color:var(--teal-500);font-weight:600}
  .bookcall .btn-coral{width:100%;justify-content:center;padding:15px;margin-top:6px}

  /* ============================================================
     SPINNABLE EARTH (hero)
     ============================================================ */
  .earth{
    position:absolute;inset:0;margin:auto;width:360px;height:360px;border-radius:50%;
    overflow:hidden;cursor:grab;touch-action:pan-y;
    background:radial-gradient(circle at 36% 30%,#2ba6d8,#1c6fa8 46%,#0a3a63 100%);
    box-shadow:0 44px 90px -34px rgba(10,61,77,.65);
    animation:float 7s ease-in-out infinite;
  }
  .earth:active{cursor:grabbing}
  .earth-surface{
    position:absolute;top:0;left:0;height:100%;width:100%;
    background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20720%20360%22%3E%20%3Cg%20fill%3D%22%2346b87a%22%3E%20%3Cpath%20d%3D%22M120%2070%20C92%2080%2078%20118%20104%20150%20C128%20178%20168%20176%20188%20150%20C206%20126%20200%2096%20176%2080%20C156%2067%20136%2064%20120%2070%20Z%22%2F%3E%20%3Cpath%20d%3D%22M70%20120%20C58%20132%2064%20150%2086%20150%20C104%20150%20110%20130%2096%20120%20C86%20113%2076%20114%2070%20120%20Z%22%2F%3E%20%3Cpath%20d%3D%22M178%20188%20C160%20200%20168%20250%20188%20292%20C202%20320%20226%20308%20220%20262%20C216%20222%20208%20184%20178%20188%20Z%22%2F%3E%20%3Cpath%20d%3D%22M250%2044%20C238%2050%20240%2070%20262%2072%20C284%2074%20290%2056%20276%2046%20C266%2040%20256%2040%20250%2044%20Z%22%2F%3E%20%3Cpath%20d%3D%22M348%2078%20C336%2088%20342%20110%20366%20112%20C392%20114%20402%2094%20384%2080%20C370%2070%20356%2071%20348%2078%20Z%22%2F%3E%20%3Cpath%20d%3D%22M360%20122%20C348%20140%20356%20204%20388%20258%20C408%20292%20436%20274%20430%20222%20C424%20168%20420%20128%20392%20120%20C380%20116%20368%20116%20360%20122%20Z%22%2F%3E%20%3Cpath%20d%3D%22M410%2070%20C398%2092%20422%20122%20472%20128%20C546%20134%20626%20112%20632%2082%20C638%2058%20596%2050%20516%2056%20C470%2060%20426%2054%20410%2070%20Z%22%2F%3E%20%3Cpath%20d%3D%22M470%20130%20C462%20142%20470%20162%20486%20160%20C500%20158%20502%20138%20490%20130%20C482%20125%20476%20124%20470%20130%20Z%22%2F%3E%20%3Cpath%20d%3D%22M600%20218%20C576%20224%20572%20256%20600%20264%20C630%20272%20656%20252%20648%20226%20C642%20208%20618%20213%20600%20218%20Z%22%2F%3E%20%3Cpath%20d%3D%22M660%20150%20C652%20156%20656%20170%20670%20168%20C682%20166%20682%20152%20672%20148%20C668%20147%20664%20147%20660%20150%20Z%22%2F%3E%20%3C%2Fg%3E%20%3C%2Fsvg%3E");
    background-size:auto 100%;background-repeat:repeat-x;background-position:0 0;
    will-change:background-position;
  }
  .earth-shine{
    position:absolute;inset:0;border-radius:50%;pointer-events:none;
    background:
      radial-gradient(circle at 30% 24%,rgba(255,255,255,.5),rgba(255,255,255,0) 42%),
      radial-gradient(circle at 72% 82%,rgba(3,20,36,.6),rgba(3,20,36,0) 56%);
  }
  @media(max-width:680px){
    .earth{width:280px;height:280px}
    .globe-glow{display:none}
  }

  /* process step icons */
  .pnum{position:relative}
  .pnum svg{width:32px;height:32px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  .pstep{
    position:absolute;top:-9px;right:-9px;width:25px;height:25px;border-radius:50%;
    background:var(--white);color:var(--ink);font-family:var(--font-display);font-weight:800;
    font-size:.8rem;display:flex;align-items:center;justify-content:center;
    box-shadow:0 8px 16px -7px rgba(10,61,77,.5);border:1px solid rgba(10,61,77,.06);
  }
  /* footer bottom contact links (replaces socials) */
  .foot-bottom-links{display:flex;gap:24px;flex-wrap:wrap}
  .foot-bottom-links a{color:rgba(253,246,238,.65);transition:color .2s;font-size:.85rem}
  .foot-bottom-links a:hover{color:var(--turq-400)}

  /* contact section without form — single centred column */
  .contact-grid.solo{grid-template-columns:1fr;max-width:560px;margin:0 auto}
  .contact-grid.solo .contact-info{width:100%}

  /* prevent long emails overflowing the contact row (mobile) */
  .contact-row{min-width:0}
  .contact-row .cr-text{min-width:0;flex:1}
  .contact-row .cr-text b{overflow-wrap:anywhere;word-break:break-word;line-height:1.3;display:block}
  @media(max-width:680px){
    .contact-row .cr-text b{font-size:.92rem}
  }

  /* single-column hero (no side visual) */
  .hero-grid--solo{grid-template-columns:1fr;text-align:center;max-width:860px;margin:0 auto}
  .hero-grid--solo .hero-text{max-width:760px;margin:0 auto}
  .hero-grid--solo .lead{margin-left:auto;margin-right:auto}
  .hero-grid--solo .hero-cta{justify-content:center}