:root{
    --ink:#0E1826;
    --ink-2:#16233A;
    --paper:#F4F5F1;
    --paper-alt:#E9EAE3;
    --white:#FFFFFF;
    --brass:#C08A34;
    --brass-2:#E4C48A;
    --steel:#5B7A99;
    --steel-soft:#AFC2D3;
    --line:rgba(14,24,38,0.13);
    --line-soft:rgba(14,24,38,0.07);
    --text-muted:#3F4A57;
    --radius:14px;
    --wrap:1180px;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:'IBM Plex Sans',sans-serif;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,h4{
    font-family:'Space Grotesk',sans-serif;
    margin:0;
    letter-spacing:-0.01em;
  }
  .mono{font-family:'IBM Plex Mono',monospace;}
  p{line-height:1.65;color:var(--text-muted);margin:0;}
  a{color:inherit;text-decoration:none;}
  img{max-width:100%;display:block;}
  .wrap{max-width:var(--wrap);margin:0 auto;padding:0 32px;}
  section{position:relative;}
  :focus-visible{outline:2px solid var(--brass);outline-offset:3px;}
  @media (prefers-reduced-motion: reduce){
    *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
  }

  /* ---------- eyebrow / drawing labels ---------- */
  .tag{
    display:inline-flex;align-items:center;gap:8px;
    font-family:'IBM Plex Mono',monospace;
    font-size:12px;font-weight:600;letter-spacing:0.14em;text-transform:uppercase;
    color:#3D5872;
    margin-bottom:18px;
  }
  .tag::before{
    content:"";width:18px;height:1px;background:var(--brass);
  }

  /* ---------- crosshair corner marks ---------- */
  .blueprint{position:relative;}
  .blueprint::before,.blueprint::after,
  .blueprint .bp-tl,.blueprint .bp-tr{
    content:"";position:absolute;width:14px;height:14px;
    border:1px solid var(--line);
  }
  .blueprint::before{top:0;left:32px;border-right:none;border-bottom:none;}
  .blueprint::after{bottom:0;right:32px;border-left:none;border-top:none;}

  /* ================= NAV ================= */
  .topbar{
    background:var(--ink);color:var(--paper);
    font-family:'IBM Plex Mono',monospace;font-size:12px;
    letter-spacing:0.04em;
  }
  .topbar .wrap{display:flex;justify-content:space-between;align-items:center;padding:8px 32px;color:#AEB8C6;}
  .topbar a{color:#D9DFE6;display:inline-flex;align-items:center;gap:6px;}
  .topbar .tb-left{display:flex;gap:26px;}
  .topbar .tb-right{display:flex;align-items:center;gap:14px;}
  .topbar .tb-social{display:flex;gap:12px;}
  .topbar .tb-social a{color:#AEB8C6;}
  .topbar .tb-social a:hover{color:var(--brass-2,#E4C48A);}
  .topbar .border-line{width:1px;height:14px;background:rgba(217,223,230,0.25);}
  .topbar .tb-sep{color:#5E6A78;}
  @media (max-width:700px){ .topbar .tb-left a:last-child{display:none;} .topbar .tb-social{display:none;} }
  @media (max-width:500px){ .topbar{display:none;} }

  nav{
    position:sticky;top:0;z-index:100;
    background:rgba(244,245,241,0.9);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
  }
  nav .wrap{display:flex;align-items:center;justify-content:space-between;padding:16px 32px;}
  .brand{display:flex;align-items:center;gap:12px;}
  .seal-mini{width:38px;height:38px;flex:none;}
  .site-logo{height:56px;width:auto;max-width:230px;object-fit:contain;display:block;}
  .logo-chip{background:#F4F5F1;border-radius:10px;padding:10px 16px;display:inline-flex;align-items:center;}
  .logo-chip .site-logo{height:40px;}
  .brand-word{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:16px;line-height:1.1;}
  .brand-word span{display:block;font-family:'IBM Plex Mono',monospace;font-weight:400;font-size:10px;letter-spacing:0.16em;color:var(--steel);text-transform:uppercase;margin-top:2px;}

  .nav-links{display:flex;align-items:center;gap:34px;font-size:14px;font-weight:500;}
  .nav-links a{position:relative;padding:6px 0;}
  .nav-links a:hover{color:var(--brass);}
  .nav-links .has-drop{cursor:default;}
  .dropdown{
    position:absolute;top:100%;left:0;background:var(--white);
    border:1px solid var(--line);border-radius:10px;
    min-width:210px;padding:8px;box-shadow:0 18px 40px rgba(14,24,38,0.12);
    opacity:0;visibility:hidden;transform:translateY(6px);
    transition:all .18s ease;
  }
  .has-drop{position:relative;}
  .has-drop:hover .dropdown{opacity:1;visibility:visible;transform:translateY(0);}
  .dropdown a{display:block;padding:9px 12px;border-radius:7px;font-size:13.5px;font-weight:400;}
  .dropdown a:hover{background:var(--paper-alt);color:var(--brass);}

  .btn{
    display:inline-flex;align-items:center;gap:8px;
    font-family:'IBM Plex Mono',monospace;font-size:12.5px;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;
    padding:12px 20px;border-radius:8px;border:1px solid transparent;
    cursor:pointer;transition:all .18s ease;
  }
  .btn-primary{background:var(--brass);color:var(--ink);}
  .btn-primary:hover{background:#A8792E;}
  .btn-ghost{border-color:var(--ink);color:var(--ink);background:transparent;}
  .btn-ghost:hover{border-color:var(--brass);color:var(--brass);}
  .btn-on-dark{border-color:rgba(244,245,241,0.35);color:var(--paper);}
  .btn-on-dark:hover{border-color:var(--brass-2);color:var(--brass-2);}

  .burger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:6px;}
  .burger span{width:22px;height:2px;background:var(--ink);}
  @media (max-width:940px){
    .nav-links{display:none;}
    .nav-cta{display:none;}
    .burger{display:flex;}

    /* Mobile dropdown: expand inline within the stacked menu (pushing
       later items down) instead of floating absolutely on top of them.
       Also disable the desktop :hover trigger here — touch devices
       fake a "stuck" hover on tap, which was causing the dropdown to
       pop open and overlap the rest of the menu. Open/close is instead
       handled by nav.js toggling the .open class on click/tap. */
    .has-drop:hover .dropdown{opacity:0;visibility:hidden;}
    .has-drop.open .dropdown{opacity:1;visibility:visible;}
    .has-drop{
      /* Explicit full-width + own centering context, so the parent link
         lines up with HOME/ABOUT US instead of shrink-wrapping oddly
         around the 100%-width .dropdown child below it. */
      width:100%;display:flex;flex-direction:column;align-items:center;
    }
    .dropdown{
      position:static;box-shadow:none;border:none;border-radius:0;
      min-width:0;width:100%;padding:0;margin-top:0;
      max-height:0;overflow:hidden;visibility:visible;opacity:1;transform:none;
      transition:max-height .25s ease;
    }
    .has-drop.open .dropdown{max-height:400px;margin-top:4px;}
    .dropdown a{padding:8px 0;font-size:13.5px;text-align:center;}

    /* Kill the default gray/blue tap-highlight flash on nav links */
    .nav-links a{-webkit-tap-highlight-color:transparent;}
  }

  /* ================= HERO ================= */
  .hero{
    padding:96px 0 60px;
    background:
      linear-gradient(180deg, rgba(244,245,241,0) 0%, var(--paper) 90%),
      repeating-linear-gradient(0deg, var(--line-soft) 0 1px, transparent 1px 64px),
      repeating-linear-gradient(90deg, var(--line-soft) 0 1px, transparent 1px 64px);
    overflow:hidden;
  }
  .hero .wrap{display:grid;grid-template-columns:1.05fr 0.95fr;gap:40px;align-items:center;}
  .hero h1{font-size:clamp(34px,4.6vw,58px);font-weight:600;line-height:1.06;margin-bottom:22px;}
  .hero h1 em{font-style:normal;color:var(--brass);}
  .hero p.lead{font-size:17px;max-width:480px;margin-bottom:32px;}
  .hero-ctas{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:46px;}

  .stat-strip{display:flex;gap:0;border-top:1px solid var(--line);padding-top:24px;max-width:520px;}
  .stat{flex:1;padding-right:16px;}
  .stat b{display:block;font-family:'Space Grotesk',sans-serif;font-size:26px;font-weight:600;}
  .stat span{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:0.08em;text-transform:uppercase;color:var(--text-muted);}

  /* hero diagram */
  .diagram-wrap{position:relative;aspect-ratio:1/1;max-width:580px;margin:0 auto;}
  .node-label{font-family:'IBM Plex Mono',monospace;font-size:11.5px;fill:var(--ink);letter-spacing:.02em;}
  .node-dot{fill:var(--white);stroke:var(--steel);stroke-width:1.8;}
  .node-dot.core{fill:var(--brass);stroke:var(--brass);}
  .link-line{stroke:var(--steel-soft);stroke-width:1.6;}
  .pulse{animation:pulse 3.2s ease-in-out infinite;}
  @keyframes pulse{0%,100%{opacity:.35;}50%{opacity:1;}}
  .spin-slow{animation:spin 60s linear infinite;transform-origin:center;}
  @keyframes spin{to{transform:rotate(360deg);}}

  /* ================= SECTION SHELL ================= */
  .section{padding:96px 0;}
  .section-alt{background:var(--paper-alt);}
  .section-head{max-width:640px;margin-bottom:56px;}
  .section-head.center{margin-left:auto;margin-right:auto;text-align:center;}
  .section-head h2{font-size:clamp(26px,3.2vw,38px);font-weight:600;line-height:1.15;}

  /* ================= WHO WE ARE ================= */
  .who-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start;margin-bottom:64px;}
  .who-grid p{margin-bottom:16px;font-size:15.5px;}
  .who-visual{
    position:relative;border-radius:var(--radius);overflow:hidden;
    background:var(--ink);aspect-ratio:4/3.1;
  }
  .who-visual svg{position:absolute;inset:0;}

  .card-row{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
  .info-card{
    background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
    padding:26px 22px;transition:transform .2s ease, box-shadow .2s ease;
  }
  .info-card:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(14,24,38,.08);}
  .icon-chip{width:38px;height:38px;border-radius:9px;background:var(--paper-alt);display:flex;align-items:center;justify-content:center;margin-bottom:16px;}
  .icon-chip svg{width:19px;height:19px;stroke:var(--brass);}
  .info-card h4{font-size:15.5px;font-weight:600;margin-bottom:8px;}
  .info-card p{font-size:13.6px;}

  /* ================= TECHNOLOGIES ================= */
  .tech-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;}
  .tech-card{background:var(--white);padding:34px 28px;transition:background .2s ease;}
  .tech-card:hover{background:var(--paper-alt);}
  .tech-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px;}
  .tech-icon{width:42px;height:42px;border-radius:10px;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;background:var(--paper);}
  .tech-icon svg{width:21px;height:21px;stroke:var(--steel);}
  .tech-idx{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--line);}
  .tech-card h4{font-size:17px;font-weight:600;margin-bottom:10px;}
  .tech-card p{font-size:13.8px;margin-bottom:18px;}
  .tech-more{font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--brass);display:inline-flex;align-items:center;gap:6px;}
  .tech-more svg{width:12px;height:12px;transition:transform .18s ease;}
  .tech-card:hover .tech-more svg{transform:translateX(3px);}

  /* ================= SECTORS ================= */
  .sector-row{display:flex;flex-wrap:wrap;gap:14px;}
  .sector-chip{
    display:flex;align-items:center;gap:12px;
    border:1px solid var(--line);background:var(--white);border-radius:999px;
    padding:12px 20px 12px 12px;flex:1 1 300px;
  }
  .sector-chip .dot{width:34px;height:34px;border-radius:50%;background:var(--ink);color:var(--brass-2);display:flex;align-items:center;justify-content:center;flex:none;}
  .sector-chip .dot svg{width:16px;height:16px;stroke:currentColor;}
  .sector-chip h5{font-size:14.5px;font-weight:600;margin-bottom:2px;}
  .sector-chip p{font-size:12.5px;}

  /* ================= SERVICES (delivery) ================= */
  .svc-list{border-top:1px solid var(--line);}
  .svc-row{
    display:grid;grid-template-columns:60px 1fr 1.4fr 90px;gap:24px;align-items:center;
    padding:26px 0;border-bottom:1px solid var(--line);
  }
  .svc-row .svc-idx{font-family:'IBM Plex Mono',monospace;color:var(--brass);font-size:13px;}
  .svc-row h4{font-size:17px;font-weight:600;}
  .svc-row p{font-size:13.6px;}
  .svc-arrow{justify-self:end;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;transition:all .18s ease;}
  .svc-arrow svg{width:14px;height:14px;stroke:var(--ink);transition:transform .18s ease;}
  .svc-row:hover .svc-arrow{background:var(--brass);border-color:var(--brass);}
  .svc-row:hover .svc-arrow svg{transform:translateX(2px);stroke:var(--ink);}
  @media (max-width:760px){ .svc-row{grid-template-columns:36px 1fr;row-gap:8px;} .svc-row p{grid-column:2/3;} .svc-arrow{display:none;} }

  /* ================= CLIENTS marquee ================= */
  .marquee{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:34px 0;}
  .marquee:hover .marquee-track{animation-play-state:paused;}
  .marquee-track{display:flex;align-items:flex-start;gap:52px;width:max-content;animation:scroll 55s linear infinite;}
  @keyframes scroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}
  .client-item{display:flex;flex-direction:column;align-items:center;gap:10px;flex:none;}
  .client-logo{
    height:52px;width:auto;max-width:180px;object-fit:contain;
  }
  .client-name{
    /* kept in the markup for accessibility/SEO, just not shown visually */
    position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
    clip:rect(0,0,0,0);white-space:nowrap;border:0;
  }

  /* ================= INSIGHTS ================= */
  .insight-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
  .insight-card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;}
  .insight-media{aspect-ratio:16/10;background:linear-gradient(135deg,var(--ink),var(--steel));position:relative;}
  .insight-date{
    position:absolute;top:14px;left:14px;background:var(--white);border-radius:8px;padding:6px 10px;
    font-family:'IBM Plex Mono',monospace;font-size:11px;text-align:center;line-height:1.2;
  }
  .insight-date b{display:block;font-size:15px;}
  .insight-body{padding:22px 22px 24px;}
  .insight-cat{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--steel);margin-bottom:10px;display:block;}
  .insight-body h4{font-size:16.5px;font-weight:600;line-height:1.3;margin-bottom:14px;}

  /* ================= CONTACT CTA ================= */
  .cta-band{background:var(--ink);color:var(--paper);border-radius:22px;padding:64px;position:relative;overflow:hidden;}
  .cta-band .wrap{max-width:none;padding:0;}
  .cta-inner{display:grid;grid-template-columns:1.3fr 1fr;gap:50px;position:relative;z-index:2;}
  .cta-band h2{color:var(--white);font-size:clamp(26px,3.4vw,38px);margin-bottom:18px;}
  .cta-band p{color:#B9C2CE;max-width:420px;margin-bottom:28px;}
  .office-card{background:rgba(244,245,241,0.06);border:1px solid rgba(244,245,241,0.14);border-radius:14px;padding:26px;}
  .office-row{display:flex;gap:14px;padding:12px 0;border-bottom:1px solid rgba(244,245,241,0.1);}
  .office-row:last-child{border-bottom:none;}
  .office-row svg{width:17px;height:17px;stroke:var(--brass-2);flex:none;margin-top:2px;}
  .office-row div b{display:block;font-size:13.5px;font-weight:600;margin-bottom:2px;}
  .office-row div span{font-size:12.8px;color:#9FAAB8;}
  .seal-corner{position:absolute;right:-40px;bottom:-40px;width:220px;height:220px;opacity:.12;}

  /* ================= FOOTER ================= */
  footer{background:var(--ink);color:#9FAAB8;padding:70px 0 26px;}
  .foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.3fr;gap:40px;padding-bottom:50px;border-bottom:1px solid rgba(244,245,241,0.1);}
  .foot-brand p{color:#8B96A5;font-size:13.6px;margin:16px 0 20px;max-width:280px;}
  .foot-social{display:flex;gap:10px;}
  .foot-social a{width:34px;height:34px;border-radius:50%;border:1px solid rgba(244,245,241,0.16);display:flex;align-items:center;justify-content:center;}
  .foot-social svg{width:14px;height:14px;stroke:#C7CEDA;}
  .foot-col h5{font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:#6E7A8A;margin-bottom:18px;}
  .foot-col a{display:block;font-size:13.8px;color:#B9C2CE;margin-bottom:12px;}
  .foot-col a:hover{color:var(--brass-2);}
  .foot-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:22px;font-size:12.5px;color:#66717F;flex-wrap:wrap;gap:12px;}
  .foot-bottom a{color:#8B96A5;margin-left:18px;}

  @media (max-width:940px){
    .hero .wrap{grid-template-columns:1fr;}
    .diagram-wrap{max-width:380px;}
    .who-grid{grid-template-columns:1fr;}
    .card-row{grid-template-columns:1fr 1fr;}
    .tech-grid{grid-template-columns:1fr 1fr;}
    .insight-grid{grid-template-columns:1fr;}
    .cta-inner{grid-template-columns:1fr;}
    .foot-grid{grid-template-columns:1fr 1fr;}
  }
  @media (max-width:600px){
    .card-row{grid-template-columns:1fr;}
    .tech-grid{grid-template-columns:1fr;}
    .foot-grid{grid-template-columns:1fr;}
    .cta-band{padding:40px 26px;border-radius:16px;}
    .wrap{padding:0 20px;}
  }

  /* reveal */
  .reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease, transform .6s ease;}
  .reveal.in{opacity:1;transform:translateY(0);}

/* ================================================================
   INNER-PAGE COMPONENTS (shared across About, Services, etc.)
   ================================================================ */

/* ---------- page title / breadcrumb hero ---------- */
.page-title{
  padding:110px 0 56px;
  background:
    linear-gradient(180deg, rgba(244,245,241,0) 0%, var(--paper) 92%),
    repeating-linear-gradient(0deg, var(--line-soft) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(90deg, var(--line-soft) 0 1px, transparent 1px 64px);
}
.page-title h1{font-size:clamp(32px,4.4vw,48px);font-weight:600;margin-bottom:14px;}
.breadcrumb-row{display:flex;gap:8px;align-items:center;font-family:'IBM Plex Mono',monospace;font-size:12.5px;color:var(--text-muted);}
.breadcrumb-row a{color:var(--steel);}
.breadcrumb-row a:hover{color:var(--brass);}
.breadcrumb-row span{color:var(--line);}

/* ---------- sticky in-page section nav ---------- */
.sub-nav{
  /* Reads --nav-height, which nav.js keeps continuously in sync with
     the header's REAL rendered height via ResizeObserver. The 110px
     is only a fallback for the instant before that JS runs, or if
     ResizeObserver isn't supported at all. */
  position:sticky;top:var(--nav-height, 78px);z-index:90;
  background:rgba(244,245,241,0.94);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.sub-nav-track{display:flex;gap:10px;padding:14px 32px;overflow-x:auto;scrollbar-width:none;}
.sub-nav-track::-webkit-scrollbar{display:none;}
.sub-nav-link{
  flex:none;font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:0.05em;text-transform:uppercase;
  padding:9px 16px;border-radius:999px;border:1px solid var(--line);color:var(--text-muted);white-space:nowrap;
  transition:all .18s ease;
}
.sub-nav-link:hover{border-color:var(--brass);color:var(--brass);}
.sub-nav-link.active{background:var(--ink);border-color:var(--ink);color:var(--paper);}

/* who-visual: allow a real <img> in place of the decorative SVG */
.who-visual img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}

/* ---------- journey / milestone strip ---------- */
.journey-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;}
.journey-step{border-top:2px solid var(--line);padding-top:20px;position:relative;}
.journey-step::before{content:"";position:absolute;top:-2px;left:0;width:28px;height:2px;background:var(--brass);}
.journey-step .step-num{display:block;color:var(--brass);font-size:13px;margin-bottom:10px;}
.journey-step h4{font-size:16px;font-weight:600;margin-bottom:8px;}
.journey-step p{font-size:13.4px;}
@media (max-width:820px){ .journey-strip{grid-template-columns:1fr 1fr;} }
@media (max-width:560px){ .journey-strip{grid-template-columns:1fr;} }

/* ---------- 3-up card grid (Why Choose Us, etc.) ---------- */
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
@media (max-width:940px){ .why-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:600px){ .why-grid{grid-template-columns:1fr;} }

/* ---------- mission / vision cards ---------- */
.mv-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
.mv-card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:34px;display:flex;gap:20px;align-items:flex-start;}
.mv-card .icon-chip{width:46px;height:46px;flex:none;}
.mv-card .icon-chip svg{width:22px;height:22px;}
.mv-card h3{font-size:19px;font-weight:600;margin-bottom:10px;}
.mv-card p{font-size:14px;}
@media (max-width:760px){ .mv-grid{grid-template-columns:1fr;} }

/* centered section-head paragraph width */
.section-head.center p{max-width:560px;margin:16px auto 0;}

/* ================================================================
   CONTACT PAGE
   ================================================================ */

/* ---------- contact info cards ---------- */
.contact-card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:30px 26px;text-align:center;
}
.contact-card .icon-chip{width:52px;height:52px;margin:0 auto 18px;background:var(--ink);border-radius:12px;}
.contact-card .icon-chip svg{width:22px;height:22px;stroke:var(--brass-2);}
.contact-card h6{font-family:'Space Grotesk',sans-serif;font-size:16px;font-weight:600;margin-bottom:12px;}
.contact-card a{display:block;font-size:14.5px;color:var(--ink);margin-bottom:4px;}
.contact-card a:hover{color:var(--brass);}
.contact-card span{display:block;font-size:13px;color:var(--text-muted);}

/* ---------- two-column lower section ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:start;}
@media (max-width:900px){ .contact-grid{grid-template-columns:1fr;} }

.map-frame{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;line-height:0;}
.map-frame iframe{display:block;width:100%;height:340px;border:0;filter:grayscale(0.15) contrast(1.02);}

.social-row{display:flex;gap:10px;margin-top:24px;}
.social-row a{
  width:38px;height:38px;border-radius:50%;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;color:var(--ink);
  transition:all .18s ease;
}
.social-row svg{width:15px;height:15px;stroke:currentColor;}
.social-row a:hover{background:var(--ink);border-color:var(--ink);color:var(--brass-2);}

/* ---------- form ---------- */
.contact-form-card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:34px;}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.form-grid .full{grid-column:1 / -1;}
@media (max-width:640px){ .form-grid{grid-template-columns:1fr;} }

.field{display:flex;flex-direction:column;gap:8px;}
.field label{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--steel);}
.field input[type="text"],
.field input[type="email"],
.field input[type="password"],
.field input[type="file"],
.field textarea{
  font-family:'IBM Plex Sans',sans-serif;font-size:14.5px;color:var(--ink);
  background:var(--paper);border:1px solid var(--line);border-radius:9px;
  padding:12px 14px;width:100%;outline:none;transition:border-color .18s ease, background .18s ease;
}
.field input[type="text"]:focus,
.field input[type="email"]:focus,
.field input[type="password"]:focus,
.field textarea:focus{border-color:var(--brass);background:var(--white);}
.field textarea{resize:vertical;min-height:110px;font-family:inherit;}
.field input[type="file"]{padding:10px 14px;background:var(--paper);cursor:pointer;}

.field .error{display:block;margin-top:2px;font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:#B4432F;}

.form-alert{
  display:flex;align-items:center;gap:10px;padding:13px 16px;border-radius:9px;
  font-size:13.5px;margin-bottom:18px;position:relative;
}
.form-alert.success{background:#EAF3E9;color:#3A6B33;border:1px solid #C9E0C4;}
.form-alert.error{background:#F7E9E6;color:#9A3B27;border:1px solid #EFC9C0;}
.form-alert .close{
  position:absolute;right:12px;top:50%;transform:translateY(-50%);
  background:none;border:none;font-size:16px;cursor:pointer;color:inherit;opacity:.6;
}
.form-alert .close:hover{opacity:1;}

.submit-btn{width:100%;justify-content:center;padding:14px 20px;font-size:13px;}

/* ================================================================
   CAREERS PAGE
   ================================================================ */
.job-card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:32px;margin-bottom:24px;
}
.job-card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:14px;}
.job-card-top h3{font-size:20px;font-weight:600;}
.job-posted{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--text-muted);white-space:nowrap;padding-top:4px;}

.job-meta{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:22px;}
.job-meta span{
  display:inline-flex;align-items:center;gap:6px;font-family:'IBM Plex Mono',monospace;
  font-size:11.5px;color:var(--steel);border:1px solid var(--line);border-radius:999px;padding:6px 12px 6px 10px;
}
.job-meta svg{width:13px;height:13px;stroke:currentColor;flex:none;}

.job-subhead{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--brass);margin-bottom:8px;}
.job-desc{font-size:14.5px;color:var(--text-muted);line-height:1.7;margin-bottom:22px;}
.job-desc p{margin-bottom:10px;}

.job-contact{background:var(--paper-alt);border-radius:10px;padding:16px 18px;margin-bottom:24px;font-size:13.6px;display:grid;gap:12px;grid-template-columns:1fr 1fr;}
.job-contact div b{font-family:'IBM Plex Mono',monospace;font-weight:500;color:var(--steel);font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;display:block;margin-bottom:3px;}
.job-contact div span{color:var(--ink);}
@media (max-width:560px){ .job-contact{grid-template-columns:1fr;} }

.empty-state{
  text-align:center;padding:64px 20px;border:1px dashed var(--line);border-radius:var(--radius);
  color:var(--text-muted);font-size:14.5px;
}

/* SERVICE / TECHNOLOGY DETAIL PAGES */
.related-row{display:flex;flex-wrap:wrap;gap:10px;}
.related-row a{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.04em;border:1px solid var(--line);border-radius:999px;padding:9px 16px;color:var(--ink);transition:all .18s ease;}
.related-row a:hover{border-color:var(--brass);color:var(--brass);}
.related-row a.current{background:var(--ink);border-color:var(--ink);color:var(--paper);}

/* TRAINING PAGE: curriculum checklist */
.check-list{display:grid;grid-template-columns:1fr 1fr;gap:14px 28px;}
.check-item{display:flex;align-items:flex-start;gap:12px;}
.check-item .check-icon{width:26px;height:26px;flex:none;border-radius:50%;background:var(--ink);display:flex;align-items:center;justify-content:center;}
.check-item .check-icon svg{width:12px;height:12px;stroke:var(--brass-2);}
.check-item span{font-size:14.5px;color:var(--ink);padding-top:3px;}
@media (max-width:600px){ .check-list{grid-template-columns:1fr;} }

/* HERO DIAGRAM: clickable nodes (real <a> links) */
.diagram-node{cursor:pointer;outline:none;-webkit-tap-highlight-color:transparent;}
.diagram-node:focus,
.diagram-node:focus-visible,
.diagram-node:active{outline:none;border:none;}
.diagram-node:hover .node-dot,
.diagram-node:focus-visible .node-dot{stroke:var(--brass);stroke-width:2.2;}

/* CEIPAL CAREER WIDGET
   The widget renders its own internal markup — this only affects the
   outer container so it doesn't run edge-to-edge / clash with page
   spacing. Do not assume any class names inside the widget are stable;
   they're controlled by Ceipal, not this stylesheet. */
.ceipal-widget{width:100%;margin-top:8px;}

/* LOGIN / AUTH PAGES */
.auth-wrap{max-width:460px;margin:0 auto;}
.role-group{display:flex;gap:28px;margin-bottom:24px;font-family:'IBM Plex Mono',monospace;font-size:13px;color:var(--ink);}
.role-group label{display:flex;align-items:center;gap:8px;cursor:pointer;}
.role-group input[type="radio"]{accent-color:var(--brass);width:16px;height:16px;cursor:pointer;}
.form-links{display:flex;justify-content:flex-end;margin:-6px 0 4px;}
.form-links a{font-size:13px;color:var(--steel);}
.form-links a:hover{color:var(--brass);}
.auth-switch{text-align:center;font-size:13.5px;color:var(--text-muted);margin-top:18px;}
.auth-switch a{color:var(--brass);font-weight:600;}
.auth-switch a:hover{text-decoration:underline;}

/* select dropdown, matching the existing text/email input styling */
.field select{
  font-family:'IBM Plex Sans',sans-serif;font-size:14.5px;color:var(--ink);
  background:var(--paper);border:1px solid var(--line);border-radius:9px;
  padding:12px 14px;width:100%;outline:none;cursor:pointer;
  transition:border-color .18s ease, background .18s ease;
  appearance:none;
  background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B7A99' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M6 9l6 6 6-6'/%3e%3c/svg%3e");
  background-repeat:no-repeat;background-position:right 14px center;background-size:16px;
}
.field select:focus{border-color:var(--brass);background-color:var(--white);}

/* WhatsApp CTA button (hero/CTA "WhatsApp Us" link) */
.btn-whatsapp{background:#25D366;color:#0E1826;border-color:#25D366;}
.btn-whatsapp:hover{background:#1DA851;border-color:#1DA851;}

/* SCROLL TO TOP BUTTON (footer, sitewide) */
.scroll-top-btn{
  position:fixed;left:24px;bottom:24px;z-index:80;
  width:46px;height:46px;border-radius:50%;
  background:var(--ink);border:none;color:var(--brass-2);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;box-shadow:0 8px 20px rgba(14,24,38,0.25);
  opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity .25s ease, transform .25s ease, visibility .25s ease, background .18s ease;
}
.scroll-top-btn.visible{opacity:1;visibility:visible;transform:translateY(0);}
.scroll-top-btn:hover{background:var(--brass);color:var(--ink);}
.scroll-top-btn svg{width:18px;height:18px;}
@media (max-width:600px){ .scroll-top-btn{left:16px;bottom:16px;width:42px;height:42px;} }

/* ================================================================
   LEADERSHIP TEAM (About page)
   ================================================================ */
.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
@media (max-width:820px){ .team-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:560px){ .team-grid{grid-template-columns:1fr;} }

.team-card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;text-align:center;}
.team-photo{
  position:relative;aspect-ratio:4/4.6;background:var(--paper-alt);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.team-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.team-photo .placeholder-fill{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  color:var(--text-muted);
}
.team-photo .placeholder-fill svg{width:32px;height:32px;stroke:var(--line);}
.team-photo .placeholder-fill span{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;}
.team-body{padding:20px 18px 24px;}
.team-body h4{font-size:16.5px;font-weight:600;margin-bottom:4px;}
.team-role{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--brass);margin-bottom:10px;display:block;}
.team-body p{font-size:13px;}

/* ================================================================
   PHOTO GALLERY (About page — "Inside Signature IT World")
   ================================================================ */
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
@media (max-width:760px){ .gallery-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:480px){ .gallery-grid{grid-template-columns:1fr;} }

.gallery-card{display:flex;flex-direction:column;gap:10px;}

.gallery-item{
  position:relative;aspect-ratio:1/1;border-radius:12px;overflow:hidden;
  background:
    repeating-linear-gradient(45deg, var(--paper-alt) 0 10px, var(--paper) 10px 20px);
  border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
}
.gallery-item img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2;}
.gallery-item .placeholder-fill{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  color:var(--text-muted);z-index:1;
}
.gallery-item .placeholder-fill svg{width:26px;height:26px;stroke:var(--steel);}
.gallery-item .placeholder-fill span{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.05em;text-transform:uppercase;}

.gallery-caption{
  font-family:'IBM Plex Sans',sans-serif;font-size:13px;color:var(--text-muted);
  text-align:center;
}

/* ================================================================
   LEADERSHIP SPOTLIGHT (long-form bios, replaces the small team-card
   grid when there's substantial text per person)
   ================================================================ */
.leader-block{
  display:grid;grid-template-columns:240px 1fr;gap:44px;
  padding:44px 0;border-bottom:1px solid var(--line);
}
.leader-block:last-child{border-bottom:none;padding-bottom:0;}
.leader-block:first-child{padding-top:0;}

.leader-side{text-align:left;}
.leader-photo{
  position:relative;aspect-ratio:4/4.6;border-radius:var(--radius);
  background:var(--paper-alt);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;overflow:hidden;margin-bottom:16px;
}
.leader-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.leader-photo .placeholder-fill{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--text-muted);}
.leader-photo .placeholder-fill svg{width:30px;height:30px;stroke:var(--line);}
.leader-photo .placeholder-fill span{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.05em;text-transform:uppercase;}
.leader-side h4{font-size:17px;font-weight:600;margin-bottom:4px;}

.leader-content p{margin-bottom:14px;font-size:14.5px;line-height:1.75;}
.leader-content p:last-child{margin-bottom:0;}

@media (max-width:760px){
  .leader-block{grid-template-columns:1fr;gap:20px;}
  .leader-photo{max-width:220px;}
}

/* ================================================================
   LEADERSHIP — horizontal card grid with expandable "Read More" bio
   (replaces the old stacked .leader-block layout)
   ================================================================ */
.leader-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
@media (max-width:900px){ .leader-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:600px){ .leader-grid{grid-template-columns:1fr;} }

.leader-card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:28px 24px;display:flex;flex-direction:column;align-items:center;text-align:center;
}
.leader-card .leader-photo{
  width:112px;height:112px;aspect-ratio:1/1;border-radius:50%;margin:0 auto 16px;
}
.leader-card h4{font-size:16px;font-weight:600;margin-bottom:2px;}
.leader-card .team-role{margin-bottom:18px;}

.leader-bio-wrap{width:100%;text-align:left;}
.leader-bio{position:relative;max-height:112px;overflow:hidden;transition:max-height .3s ease;}
.leader-bio.expanded{max-height:2000px;}
.leader-bio p{font-size:13.5px;line-height:1.7;margin-bottom:10px;}
.leader-bio p:last-child{margin-bottom:0;}
.leader-bio-wrap.has-overflow .leader-bio:not(.expanded)::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:36px;
  background:linear-gradient(to bottom, rgba(255,255,255,0), var(--white));
}
.read-more-btn{
  display:none;margin-top:10px;background:none;border:none;padding:0;cursor:pointer;
  font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.04em;color:var(--brass);
}
.read-more-btn:hover{color:#A8792E;}
.leader-bio-wrap.has-overflow .read-more-btn{display:inline-block;}