:root{
      --side:#81BEF599;    /* exact side pane color you gave */
      --center:#0067C399;  /* exact center pane color you gave */
      --glass:#FFFFFF4A;   /* exact glass line color you gave */
      --frame:#08314a;     /* deep frame / divider color to match design */
      --nav-bg:#f2f2f3;
      --text:#071627;
        --footer-mid:#0b2d6b;           /* footer gradient mid */
      --footer-end:#0a1b3c;   
    }

   
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji','Segoe UI Emoji'; color: var(--text); background: #f7f8fb; }
    a { color: inherit; text-decoration: none; }

    /* Hero container — background image sits behind everything */
    .hero{
      position:relative;overflow:hidden;display:grid;grid-template-columns:18% 64% 18%;height:360px;
      background-image:url('images/7bfd21baf64149dd5e71d1f28c61cbd8c30ddb91.png');
      background-size:cover;background-position:center center;
      border-top:6px solid var(--frame);border-bottom:6px solid var(--frame);
    }

    /* Pane framing and overlay color */
    .pane{position:relative;overflow:hidden}
    /* vertical separators between panes to match screenshot */
    .pane + .pane{box-shadow:inset 8px 0 0 0 var(--frame);} /* draws the thick divider line */

    /* Colored translucent overlay for each pane using the exact hex with alpha you requested */
    .pane::before{
      content:"";position:absolute;inset:0;z-index:1;background:var(--side);pointer-events:none;
    }
    .pane.center::before{background:var(--center)}

    /* White glass diagonal stripes (prominent) — one big on each side and a lighter repeating set across centre */
    .pane .glass-strong{position:absolute;z-index:3;pointer-events:none;left:-20%;width:160%;height:36%;top:12%;transform:rotate(-26deg);
      background:linear-gradient(90deg, transparent 0%, var(--glass) 25%, var(--glass) 75%, transparent 100%);
      filter:drop-shadow(0 1px 0 rgba(0,0,0,0.06));}

    /* add a second, thinner glass stripe for the far-right pane to better match the design */
    .pane .glass-thin{position:absolute;z-index:3;pointer-events:none;left:-5%;width:130%;height:18%;top:46%;transform:rotate(-26deg);
      background:linear-gradient(90deg, transparent 0%, var(--glass) 35%, var(--glass) 65%, transparent 100%);
      opacity:0.95}

    /* Subtle repeating glass lines across the whole hero (very faint) */
    .hero::after{
      content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
      background:repeating-linear-gradient(-30deg, transparent 0 50px, var(--glass) 50px 70px);
      opacity:0.24;
    }

    /* Hero text — sits above overlays */
    .hero-content{position:absolute;inset:0;z-index:4;display:flex;align-items:center;justify-content:center;text-align:center}
    .hero-content .box{max-width:760px;padding:12px}
    .hero h1{margin:0;font-size:4.2rem;letter-spacing:3px;font-weight:900;color:rgba(4,22,34,0.95)}
    .hero p{margin:8px 0 0;font-weight:700}

    /* ensure the overlays let the background show through realistically */
    .pane::before{mix-blend-mode:multiply}

    /* Responsive */
    @media (max-width:1000px){
      .wrap{padding:14px}
      nav ul{gap:20px}
      .hero{height:320px}
      .hero h1{font-size:3rem}
    }
    @media (max-width:640px){
      .wrap{padding:12px}
      .brand .title{font-size:1rem}
      nav ul{gap:12px;font-size:.95rem}
      .hero{grid-template-columns:1fr;height:300px}
      .pane + .pane{box-shadow:none}
      .pane .glass-strong{left:-40%;top:6%;height:40%}
      .hero h1{font-size:2.1rem}
    }
  
  /* scoped styles for this section only */
  .hire-section { display:flex; justify-content:center; padding:34px 20px 60px; background: linear-gradient(180deg, rgba(13,52,86,0.02) 0%, rgba(6,30,50,0.02) 100%); }
  .hire-card{ width:100%; max-width:920px; background:#fff; border-radius:18px; border:2px solid rgba(11,59,90,0.18); padding:28px 36px; box-shadow: 0 6px 18px rgba(8,30,50,0.04); }

  .hire-header{text-align:center;margin-bottom:20px}
  .hire-header h2{margin:0;font-size:30px;font-weight:800;color:#071627}
  .hire-sub{margin:10px auto 0;color:#2b3f4b;font-size:13px;max-width:760px;line-height:1.4;opacity:.95}

  /* Grid form: two columns on larger screens */
  .hire-form{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px 28px; margin-top:18px; align-items:start }

  .field{ display:flex; flex-direction:column; gap:8px }
  .field label{ font-weight:700; font-size:14px; color:#0b3b5a }

  /* Shared input style (pill) */
  .hire-form input[type="text"],
  .hire-form input[type="email"],
  .hire-form input[type="tel"],
  .hire-form textarea{
    border:2px solid rgba(11,59,90,0.5);
    border-radius:14px;
    padding:12px 16px;
    font-size:14px;
    outline:none;
    background:#fff;
    transition: box-shadow .12s, border-color .12s;
    color:#12323f;
    font-family:inherit;
    -webkit-appearance:none;
    -moz-appearance:none;
    box-sizing:border-box;
    height:48px;
  }

  .hire-form textarea{ min-height:130px; height:auto; resize:vertical; padding:14px; border-radius:10px }

  .hire-form input::placeholder,
  .hire-form textarea::placeholder{ color:#9aa8b3; font-style:italic }

  .hire-form input:focus,
  .hire-form textarea:focus{ box-shadow: 0 6px 18px rgba(6,30,50,0.06); border-color: rgba(0,103,195,0.75) }

  /* DATE WRAP: apply the same pill look on the wrapper so icon is inside */
  .date-field .date-wrap{
    position:relative;
    border:2px solid rgba(11,59,90,0.5);
    border-radius:14px;
    background:#fff;
    height:48px;
    box-sizing:border-box;
    display:block;
    overflow:hidden;
  }

  /* date input sits inside the wrapper and occupies full height */
  .date-wrap input[type="date"]{
    width:100%;
    height:100%;
    border:0;
    background:transparent;
    padding:10px 46px 10px 14px; /* leave room on right for icon */
    font-size:14px;
    outline:none;
    box-sizing:border-box;
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    color:#12323f;
  }

  /* hide the native calendar icon visually (keeps native picker accessible) */
  .date-wrap input[type="date"]::-webkit-calendar-picker-indicator{
    opacity:0; cursor:default;
  }
  /* firefox - reduce indicator visibility (may vary) */
  .date-wrap input[type="date"]::-moz-calendar-picker-indicator{
    opacity:0;
  }

  /* our custom icon positioned inside the pill at right */
  .date-icon{
    position:absolute;
    right:12px;
    top:50%;
    transform:translateY(-50%);
    display:flex;
    align-items:center;
    justify-content:center;
    width:22px;
    height:22px;
    pointer-events:none; /* allow clicks to reach native input */
  }

  /* button */
  .form-actions{ margin-top:10px; display:flex; justify-content:flex-start; align-items:center; }
  .btn-primary{
    background: linear-gradient(90deg,#0e67b3 0%, #02223a 100%);
    color:#fff; font-weight:700; padding:12px 28px; border-radius:28px; border:none;
    box-shadow: 0 6px 18px rgba(5,20,40,0.18); cursor:pointer; font-size:15px;
  }
  .btn-primary:hover{ transform:translateY(-2px) }

  /* responsive: stack on narrow screens */
  @media (max-width:760px){
    .hire-card{ padding:22px }
    .hire-form{ grid-template-columns:1fr; gap:14px }
    .form-actions{ justify-content:center }
    .btn-primary{ width:220px; text-align:center }
    .hire-header h2{ font-size:24px }
  }

   /* ============ FOOTER ============ */
    footer.site-footer{position:relative; color:#E6EFFA; background: radial-gradient(120% 100% at 70% 0%, #0a4b8f 0%, var(--footer-mid) 42%, var(--footer-end) 100%); padding:56px 20px 22px; overflow:hidden;}
    footer.site-footer:before{ /* bright lip at the top edge */
      content:""; position:absolute; top:-30px; left:0; right:0; height:60px; 
      background: radial-gradient(55% 85% at 50% 0%, rgba(255,255,255,.75) 0, rgba(255,255,255,0) 70%);
      filter: blur(18px);
    }
    .footer-inner{max-width:1200px; margin-inline:auto;}

    .brand1-row{display:flex; align-items:center; gap:16px; margin-bottom:22px;}
    .brand1-logo{display:grid; place-items:center; width:56px; height:56px;}
    .brand1-name{color:#fff; font-size:28px; font-weight:800; letter-spacing:.8px;}

    /* simple triple-stripe S logo to match the feel */
    .brand1-logo img {
        width: 250px;
        height: 150px;
        margin-left: -15vh;
        margin-top: -4vh;
      
        padding: 0;
    }

    .top-row{display:flex; gap:40px; align-items:flex-start; justify-content:space-between; margin-bottom:22px;}

    .signup{max-width:520px}
    .signup h4{margin:0 0 8px; color:#fff; font-weight:700; font-size:18px}
    .signup p{margin:0 0 18px; font-size:14px; line-height:1.55; opacity:.95}
    .signup .form{display:flex; gap:12px}
    .signup input{flex:1; min-width:240px; background:#edf2fa; border:1px solid rgba(0,0,0,.06); border-radius:24px; padding:12px 16px; font-size:14px; color:#0a1b3c; outline:none}
    .signup input::placeholder{color:#6c7a96}
    .signup button{border:0; padding:12px 20px; border-radius:24px; font-weight:700; font-size:14px; color:#fff; cursor:pointer; box-shadow: 0 8px 18px rgba(83,56,238,.35);}  
    .signup button{background: linear-gradient(135deg,#5b2ff2 0%, #6c46ff 100%);} /* violet pill */
    .signup button:active{transform:translateY(1px)}

    .links-row{display:grid; grid-template-columns: 1fr 1fr 1.8fr; gap:40px; margin-top:24px}

    .footer-col h5{margin:0 0 12px; color:#fff; font-weight:700; font-size:18px}
    .footer-col ul{list-style:none; padding:0; margin:0}
    .footer-col li{margin:8px 0; font-size:14px}

    .contact p{margin:6px 0; font-size:14px; line-height:1.55}

    .copyright{margin-top:26px; padding-top:16px; font-size:12px; border-top:1px solid rgba(255,255,255,.18); opacity:.9}

    /* ============ RESPONSIVE ============ */
    @media (max-width: 980px){
      .cta-cards{grid-template-columns:1fr}
      .top-row{flex-direction:column; gap:16px}
      .brand-row{margin-bottom:8px}
      .links-row{grid-template-columns:1fr; gap:24px}
      .signup .form{flex-wrap:wrap}
      .signup input{min-width:unset; width:100%}
      .signup button{width:max-content}
    }
    a,
a:link,
a:visited,
a:hover,
a:active {
  text-decoration: none;
  color: inherit; /* optional – makes links match text color */
}
a,
a:link,
a:visited {
  text-decoration: none;
}

a:hover,
a:active {
  text-decoration: none;  /* remove underline */

}