:root{
    --navy-deep:#0A2472; --navy:#0F3D9E; --cyan:#1FC2E8; --cyan-bright:#4FE0FF; --cyan-border:#2DD4FF;
    --surface:#ffffff; --text-muted:#4A6FA5;
    --grad-panel: linear-gradient(135deg, #0A2472 0%, #0F3D9E 45%, #1FC2E8 100%);
    --grad-icon: linear-gradient(135deg, #0F3D9E 0%, #1FC2E8 100%);
    --r-pill:999px; --r-card:14px;
    --content-width:1200px; --side-pad:24px;
  }
  *{box-sizing:border-box;}
  html,body{margin:0; padding:0;}
  body{ background:var(--surface); color:var(--navy-deep); font-family:"Poppins",system-ui,sans-serif; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
  img{max-width:100%;}
  .wrap{max-width:var(--content-width); margin:0 auto; padding-inline:var(--side-pad);}
  @media (max-width:520px){ :root{ --side-pad:16px; } }

  h1,h2{margin:0;}
  p{margin:0;}
  a{color:inherit; text-decoration:none;}

  /* Only two type voices, exactly matching the source flyer: condensed bold caps + one script accent. No serif family used anywhere in this variant. */
  .display{ font-family:"Oswald",sans-serif; font-weight:700; text-transform:uppercase; font-size:46px; line-height:1.08; letter-spacing:.005em; }
  .display .cyan{ color:var(--cyan-bright); }
  .script{ font-family:"Caveat",cursive; font-weight:600; font-size:26px; line-height:1.25; }
  .body{ font-size:16px; line-height:1.55; }
  @media (max-width:900px){ .display{font-size:36px;} }
  @media (max-width:520px){ .display{font-size:29px;} }

  /* ---- pill buttons: exact flyer set (solid / outline / call-bar) ---- */
  .btn{
    display:flex; align-items:center; justify-content:center; gap:10px;
    border-radius:var(--r-pill); font-family:"Poppins",sans-serif; font-size:17px; font-weight:700;
    padding:17px 28px; border:2px solid transparent; cursor:pointer; width:100%;
  }
  .btn-solid{ background:var(--navy-deep); color:#fff; }
  .btn-outline{ background:#fff; color:var(--navy-deep); border-color:var(--cyan-border); }
  .btn-call{ background:#fff; color:var(--navy-deep); border-color:var(--cyan-border); justify-content:flex-start; gap:16px; }
  .btn-call .call-ico{ width:34px; height:34px; border-radius:50%; background:var(--grad-icon); display:flex; align-items:center; justify-content:center; flex:none; }
  .btn-call .call-ico svg{ width:16px; height:16px; stroke:#fff; }
  .pill-stack{ display:flex; flex-direction:column; gap:14px; max-width:520px; margin:0 auto; }

  /* ---- info-row pill (services / why-choose extrapolated from the same call-bar shape) ---- */
  .info-row{
    display:flex; align-items:center; gap:16px; background:#fff; border:2px solid var(--cyan-border);
    border-radius:var(--r-card); padding:18px 22px;
  }
  .info-row .ico{ width:44px; height:44px; border-radius:50%; background:var(--grad-icon); display:flex; align-items:center; justify-content:center; flex:none; }
  .info-row .ico svg{ width:20px; height:20px; stroke:#fff; }
  .info-row .divider{ width:2px; align-self:stretch; background:var(--cyan-border); flex:none; }
  .info-row .text h3{ font-family:"Oswald",sans-serif; font-weight:600; text-transform:uppercase; font-size:16px; letter-spacing:.02em; margin-bottom:4px; }
  .info-row .text p{ font-size:14px; color:var(--text-muted); line-height:1.45; }
  .info-row.on-dark{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.4); }
  .info-row.on-dark .text h3{ color:#fff; }
  .info-row.on-dark .text p{ color:rgba(255,255,255,.78); }
  .info-row.on-dark .divider{ background:rgba(255,255,255,.4); }
  .row-stack{ display:flex; flex-direction:column; gap:14px; }
  .row-grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
  @media (max-width:700px){ .row-grid-2{ grid-template-columns:1fr; } }

  /* ---- nav: minimal, doesn't compete with the hero card below ---- */
  .nav-outer{ background:#fff; }
  .nav-row{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding-block:12px; }
  .logo{ display:flex; align-items:center; flex:none; }
  .logo img{ height:54px; width:auto; display:block; }
  .nav-links{ display:flex; align-items:center; gap:22px; list-style:none; margin:0; padding:0; font-size:14px; font-weight:600; color:var(--text-muted); flex-wrap:wrap; }
  .nav-links a:hover{ color:var(--cyan); }
  .nav-burger{ display:none; flex-direction:column; justify-content:center; gap:5px; width:30px; height:30px; background:none; border:none; cursor:pointer; padding:0; }
  .nav-burger span{ display:block; height:2.5px; width:100%; background:var(--navy-deep); border-radius:2px; transition:transform .15s ease, opacity .15s ease; }
  .nav-burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7.5px) rotate(45deg); }
  .nav-burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
  .nav-burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7.5px) rotate(-45deg); }
  .nav-mobile-panel{ display:none; background:#fff; border-top:1px solid #E3F3FA; }
  .nav-mobile-panel:not([hidden]){ display:block; }
  .nav-links-mobile{ list-style:none; margin:0; padding:12px var(--side-pad) 16px; display:flex; flex-direction:column; }
  .nav-links-mobile a{ display:block; padding:12px 0; font-size:15px; font-weight:600; color:var(--navy-deep); border-bottom:1px solid #EAF6FC; }
  .nav-links-mobile a:hover{ color:var(--cyan); }
  @media (max-width:900px){ .nav-links{display:none;} .nav-burger{display:flex;} }
  @media (min-width:901px){ .nav-mobile-panel{ display:none !important; } }

  /* ---- hero: ONE photo, full-bleed, with the navy/cyan gradient faded directly onto it —
     the boundary between "blue" and "photo" is a soft diagonal blend, not a hard edge.
     Two light-cyan diagonal ribbon shapes sit on top of that gradient in the upper-left
     as an extra accent layer, matching the reference. ---- */
  .hero{
    position:relative; overflow:hidden; min-height:520px;
    background-size:cover; background-position:center 30%;
  }
  @media (max-width:640px){ .hero{ min-height:600px; } }

  .hero::before{
    content:""; position:absolute; inset:0; z-index:1;
    background:linear-gradient(100deg,
      rgba(10,36,114,0.96) 0%,
      rgba(10,36,114,0.92) 34%,
      rgba(15,61,158,0.68) 52%,
      rgba(31,194,232,0.28) 70%,
      rgba(31,194,232,0.05) 92%);
  }
  @media (max-width:640px){
    /* fade at the top on mobile: photo visible up top, blending down into solid navy behind the text */
    .hero::before{ background:linear-gradient(8deg,
      rgba(10,36,114,0.96) 0%,
      rgba(10,36,114,0.92) 46%,
      rgba(15,61,158,0.7) 62%,
      rgba(31,194,232,0.26) 80%,
      rgba(31,194,232,0.05) 100%); }
  }

  .hero-ribbon-1{
    position:absolute; top:-18%; left:-8%; width:75%; height:60%;
    background:linear-gradient(135deg, rgba(120,210,255,.55), rgba(31,194,232,.3) 60%, rgba(31,194,232,0) 100%);
    clip-path:polygon(0 35%, 60% 0, 72% 0, 18% 62%);
    z-index:1; pointer-events:none;
  }
  .hero-ribbon-2{
    position:absolute; top:-18%; left:-8%; width:80%; height:65%;
    background:linear-gradient(135deg, rgba(31,194,232,.3), rgba(31,194,232,.1) 65%, rgba(31,194,232,0) 100%);
    clip-path:polygon(0 55%, 78% 0, 92% 0, 22% 78%);
    z-index:1; pointer-events:none;
  }

  .hero-content{ position:relative; z-index:2; min-height:520px; display:flex; flex-direction:column; justify-content:center; padding:44px 36px; }
  @media (max-width:640px){ .hero-content{ min-height:600px; justify-content:flex-end; padding:32px 22px 30px; } }
  .hero-copy{ max-width:480px; }
  .hero-logo{ height:34px; width:auto; display:block; margin-bottom:20px; filter:brightness(0) invert(1); }
  .hero-copy .display{
    font-family:"Fredoka",sans-serif; font-weight:700; text-transform:uppercase;
    font-size:38px; line-height:1.08; color:#fff; text-align:left; margin-bottom:18px;
  }
  .hero-copy .display span{ display:block; }
  .hero-copy .display .line-cyan{ color:var(--cyan-bright); }
  .hero-copy p.body{ color:rgba(255,255,255,.92); text-align:left; max-width:40ch; font-size:15.5px; line-height:1.5; }
  @media (max-width:900px){ .hero-copy .display{ font-size:30px; } }
  @media (max-width:640px){ .hero-copy .display{ font-size:28px; } }

  .hero-photo-script{
    position:absolute; top:26px; right:30px; z-index:3; color:#fff; font-family:"Caveat",cursive; font-size:22px;
    text-align:right; text-shadow:0 2px 8px rgba(10,36,114,.5); line-height:1.15;
  }
  .hero-photo-swoosh{ display:block; margin:2px 0 0 auto; width:70px; }
  @media (max-width:640px){ .hero-photo-script{ font-size:18px; top:16px; left:22px; right:auto; text-align:left; } .hero-photo-swoosh{ width:56px; margin:2px auto 0 0; } }

  /* ---- hero detail: trust badges + quick service tags, filling out the panel ---- */
  .hero-badges{ display:flex; flex-wrap:wrap; gap:10px; margin:18px 0; }
  .hero-badge{
    display:inline-flex; align-items:center; gap:7px; background:rgba(255,255,255,.14);
    border:1px solid rgba(255,255,255,.4); color:#fff; font-size:12.5px; font-weight:700;
    padding:7px 13px; border-radius:var(--r-pill);
  }
  .hero-badge svg{ width:13px; height:13px; fill:var(--cyan-bright); flex:none; }
  .hero-tags{ display:flex; flex-wrap:wrap; gap:7px; margin-bottom:16px; }
  .hero-tag{
    font-size:12px; font-weight:600; color:rgba(255,255,255,.92); background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.28); padding:5px 11px; border-radius:var(--r-pill);
  }
  .hero-stats{ display:flex; gap:24px; flex-wrap:wrap; }
  .hero-stat{ display:flex; flex-direction:column; }
  .hero-stat .num{ font-family:"Fredoka",sans-serif; font-weight:700; font-size:22px; color:#fff; line-height:1; }
  .hero-stat .label{ font-size:11px; color:rgba(255,255,255,.75); margin-top:4px; text-transform:uppercase; letter-spacing:.03em; }

  /* ---- pill CTA band (white page background, below the hero card) ---- */
  .pill-cta-band{ background:#fff; padding-block:32px; }

  /* ---- consultation form: literal recreation of the "HOW CAN WE HELP?" reference flyer ---- */
  .consult-section{ background:#fff; position:relative; overflow:hidden; padding-block:56px; }
  .consult-blob{ position:absolute; border-radius:50%; background:radial-gradient(circle, rgba(31,194,232,0.16), rgba(31,194,232,0) 70%); pointer-events:none; z-index:0; }
  .consult-blob.tl{ top:-70px; left:-90px; width:280px; height:280px; }
  .consult-blob.tr{ top:-40px; right:-100px; width:260px; height:260px; }
  .consult-blob.bl{ bottom:-90px; left:-70px; width:260px; height:260px; }
  .consult-blob.br{ bottom:-60px; right:-90px; width:280px; height:280px; }
  .consult-inner{ position:relative; z-index:1; max-width:600px; margin:0 auto; }
  .consult-logo{ display:block; height:56px; width:auto; margin:0 auto 18px; }
  .consult-heading{
    font-family:"Playfair Display",serif; font-weight:700; font-size:44px; line-height:1.1;
    color:var(--cyan); text-align:center; margin-bottom:14px;
  }
  .consult-sub{ color:var(--navy-deep); text-align:center; font-size:15.5px; line-height:1.5; margin-bottom:26px; }
  .form-field{ margin-bottom:20px; }
  .form-field label{ display:block; font-weight:700; color:var(--navy-deep); font-size:15px; margin-bottom:8px; }
  .form-field label .req{ color:var(--error,#D4273B); }
  .form-input-wrap{ position:relative; }
  .form-input-wrap svg{ position:absolute; left:16px; top:50%; transform:translateY(-50%); width:19px; height:19px; stroke:var(--cyan); fill:none; pointer-events:none; }
  .form-input-wrap.chevron svg.chev{ left:auto; right:16px; stroke:var(--navy); }
  .form-field input, .form-field select{
    width:100%; height:52px; border:1.5px solid var(--cyan-border); border-radius:10px; background:#fff;
    padding:0 16px 0 48px; font-family:"Poppins",sans-serif; font-size:15px; color:var(--navy-deep);
    appearance:none; -webkit-appearance:none;
  }
  .form-field select{ padding-right:44px; cursor:pointer; }
  .form-field input::placeholder{ color:#8FA6C9; }
  .form-field input:focus, .form-field select:focus, .form-field textarea:focus{ outline:2px solid var(--cyan); outline-offset:1px; }
  .form-radio-row{ display:flex; gap:28px; align-items:center; }
  .form-field .form-radio{ display:inline-flex; align-items:center; gap:9px; font-size:15px; color:var(--navy-deep); cursor:pointer; line-height:22px; }
  .form-radio span{ display:inline-block; line-height:22px; }
  .form-radio input[type="radio"]{
    appearance:none; -webkit-appearance:none; width:22px; height:22px; min-width:22px; padding:0;
    border-radius:50%; box-sizing:border-box; display:block; vertical-align:middle;
    border:2px solid var(--navy); background:#fff; position:relative; margin:0; top:0; cursor:pointer; flex:none;
  }
  .form-radio input[type="radio"]:checked{ border-color:var(--navy); }
  .form-radio input[type="radio"]:checked::after{
    content:""; position:absolute; inset:3px; border-radius:50%; background:var(--navy);
  }
  .form-textarea-wrap{ position:relative; }
  .form-textarea-wrap svg{ position:absolute; left:16px; top:16px; width:19px; height:19px; stroke:var(--cyan); fill:none; }
  .form-field textarea{
    width:100%; min-height:100px; border:1.5px solid var(--cyan-border); border-radius:10px; background:#fff;
    padding:14px 16px 14px 48px; font-family:"Poppins",sans-serif; font-size:15px; color:var(--navy-deep);
    resize:vertical; line-height:1.5;
  }
  .form-field textarea::placeholder{ color:#8FA6C9; }
  .consult-submit{
    width:100%; display:flex; align-items:center; justify-content:center; gap:14px;
    background:var(--navy-deep); color:#fff; border:none; border-radius:14px;
    padding:18px 22px; font-family:"Poppins",sans-serif; font-weight:700; font-size:15.5px;
    letter-spacing:.02em; cursor:pointer; margin-top:6px;
  }
  .consult-submit svg{ width:20px; height:20px; stroke:#fff; fill:none; flex:none; }
  .consult-submit .divider{ width:1.5px; align-self:stretch; background:rgba(255,255,255,.4); }
  .consult-submit .arrow{ margin-left:auto; }
  .consult-privacy{
    display:flex; align-items:center; gap:12px; background:var(--surface-tint,#EAF6FC); border-radius:12px;
    padding:14px 18px; margin-top:18px; font-size:13.5px; color:var(--navy-deep);
  }
  .consult-privacy svg{ width:20px; height:20px; stroke:var(--navy); fill:none; flex:none; }
  .consult-divider{ height:1.5px; background:var(--cyan-border); margin:22px 0 18px; opacity:.6; }
  .consult-phone-line{ display:flex; align-items:center; gap:14px; justify-content:center; }
  .consult-phone-line .ico{ color:var(--cyan); flex:none; }
  .consult-phone-line .ico svg{ width:24px; height:24px; stroke:var(--cyan); fill:none; }
  .consult-phone-line .divider{ width:1.5px; height:26px; background:var(--cyan-border); }
  .consult-phone-line .txt{ font-size:15px; font-weight:700; color:var(--navy-deep); }
  .consult-phone-line .txt a{ color:var(--cyan); font-size:19px; margin-left:6px; }
  @media (max-width:480px){
    .consult-heading{ font-size:34px; }
    .consult-phone-line{ flex-wrap:wrap; text-align:center; }
    .consult-phone-line .txt a{ display:block; margin-left:0; }
  }

  /* ---- services: photo-backed card grid, carried over from the "graphics" variant ---- */
  .card-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
  @media (max-width:900px){ .card-grid{ grid-template-columns:1fr 1fr; } }
  @media (max-width:560px){ .card-grid{ grid-template-columns:1fr; } }
  .icon-card.photo{
    position:relative; min-height:260px; color:#fff; border-radius:var(--r-card);
    background-size:cover; background-position:center; overflow:hidden;
    padding:20px; display:flex; flex-direction:column; gap:10px; align-items:flex-start;
  }
  .icon-card.photo::before{
    content:""; position:absolute; inset:0;
    background:linear-gradient(190deg, rgba(10,36,114,0.22) 0%, rgba(10,36,114,0.9) 88%);
  }
  .icon-card.photo > *{ position:relative; z-index:1; }
  .icon-badge{
    width:52px; height:52px; border-radius:50%; background:var(--grad-icon);
    display:flex; align-items:center; justify-content:center; flex:none;
    box-shadow:0 6px 16px rgba(15,61,158,0.35);
  }
  .icon-badge svg{ width:24px; height:24px; stroke:#fff; }
  .icon-card.photo .card-title{ font-family:"Poppins",sans-serif; font-weight:700; font-size:17px; }
  .icon-card.photo p.body{ color:rgba(255,255,255,.88); font-size:14.5px; margin-bottom:auto; }
  .icon-card.photo .card-link{ font-size:14px; font-weight:700; color:var(--cyan-bright); display:inline-flex; align-items:center; gap:5px; }

  /* ---- section shell: same rounded-poster-card language as the hero, inset cards not full-bleed bands ---- */
  section{ padding-block:52px; position:relative; }
  .panel .section-inner{
    background:var(--grad-panel); color:#fff; border-radius:28px; overflow:hidden;
    padding:44px 32px; position:relative; box-shadow:0 16px 40px rgba(10,36,114,0.18);
  }
  .panel .display{ color:#fff; }
  .panel .body{ color:rgba(255,255,255,.85); }
  .panel-shard{ position:absolute; top:-15%; left:-15%; width:140%; height:55%; background:linear-gradient(100deg, transparent 25%, rgba(255,255,255,.14) 60%, transparent 90%); transform:rotate(-6deg); z-index:0; pointer-events:none; }
  .section-inner{ position:relative; z-index:1; }
  .section-head{ text-align:center; max-width:680px; margin:0 auto 28px; }
  .section-head .script{ display:block; margin-bottom:8px; color:var(--cyan); }
  .panel .section-head .script{ color:var(--cyan-bright); }
  .section-head p{ color:var(--text-muted); }
  .panel .section-head p{ color:rgba(255,255,255,.82); }

  /* ---- careers: same faded-photo-plus-gradient technique as the hero, not a split box ---- */
  .panel.careers-panel .section-inner{ background-size:cover; background-position:center 30%; }
  .panel.careers-panel .section-inner::before{
    content:""; position:absolute; inset:0; z-index:0;
    background:linear-gradient(115deg, rgba(10,36,114,0.95) 0%, rgba(10,36,114,0.88) 32%, rgba(15,61,158,0.65) 55%, rgba(31,194,232,0.28) 78%, rgba(31,194,232,0.06) 100%);
  }
  .panel.careers-panel .section-head{ text-align:left; margin:0 0 22px; max-width:520px; position:relative; z-index:1; }
  .panel.careers-panel .pill-stack{ margin:0; max-width:280px; position:relative; z-index:1; }

  /* ---- testimonials ---- */
  .testi-card{ background:#fff; border:2px solid var(--cyan-border); border-radius:var(--r-card); padding:22px; display:flex; flex-direction:column; gap:10px; margin-bottom:14px; }
  .testi-card.focus{ background:var(--grad-icon); border-color:transparent; }
  .testi-card.focus .testi-quote, .testi-card.focus .testi-author{ color:#fff; }
  .testi-card.focus .testi-role{ color:rgba(255,255,255,.75); }
  .stars{ display:flex; gap:3px; }
  .stars svg{ width:16px; height:16px; fill:var(--cyan); }
  .testi-card.focus .stars svg{ fill:#fff; }
  .testi-quote{ font-size:15px; line-height:1.55; color:var(--navy-deep); }
  .testi-author{ font-size:15px; font-weight:700; }
  .testi-role{ font-size:12.5px; color:var(--text-muted); }
  .testi-grid{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; }
  @media (max-width:800px){ .testi-grid{ grid-template-columns:1fr; } }

  /* ---- partners ---- */
  .partners-row{ display:flex; justify-content:center; align-items:center; gap:28px; flex-wrap:wrap; }
  .partners-row img{ height:32px; width:auto; display:block; opacity:.85; }

  /* ---- footer ---- */
  footer{ background:var(--navy-deep); color:#fff; padding-block:36px 20px; text-align:center; }
  footer .footer-logo img{ height:38px; width:auto; margin-bottom:12px; filter:brightness(0) invert(1); }
  footer p{ font-size:13px; color:rgba(255,255,255,.7); margin-bottom:14px; }
  footer .footer-links{ display:flex; justify-content:center; gap:16px; flex-wrap:wrap; font-size:13px; color:rgba(255,255,255,.85); margin-bottom:16px; }
  footer .footer-bottom{ font-size:12px; color:rgba(255,255,255,.55); border-top:1px solid rgba(255,255,255,.15); padding-top:14px; }