@import url('https://fonts.googleapis.com/css2?family=Host+Grotesk:ital,wght@0,300..800;1,300..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

/* ===== Design Tokens ===== */
    :root{
      --beige:#e4ddd6;           /* brand beige */
      --ink:#0c0c0c;             /* near black */
      --white:#ffffff;
      --muted:#595959;           /* body text */
      --line:#ded7cf;            /* subtle lines */
      --soft:#f6f3ef;            /* very light neutral */
    }

    html,body{height:100%}
    body
    {
        margin:0;
          font-family: "Montserrat", sans-serif !important;
          font-style: normal !important;
        
    }
    
    h1,h2,h3,h4,h5,h6{
          font-family: "Host Grotesk", sans-serif !important;
  font-style: normal;
   font-weight: 300 !important;
    }

    /* ===== FULL-WIDTH CAROUSEL HERO ===== */
    .hero-fw{position:relative; min-height:100vh;}
    .hero-fw .carousel,.hero-fw .carousel-inner,.hero-fw .carousel-item{height:100vh}
    .hero-fw .carousel-item{position:relative}
    .hero-fw .hero-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform-origin:center;}
    /* Ken Burns zoom */
    .hero-fw .carousel-item.active .hero-img{animation:kenburns 12s ease-in-out both}
    @keyframes kenburns{0%{transform:scale(1) translate3d(0,0,0)} 100%{transform:scale(1.15) translate3d(0,0,0)}}
    /* Soft vignette + neutral wash */
    .hero-fw .overlay:before{content:""; position:absolute; inset:0; background:var(--overlay);}
    .hero-fw .overlay:after{content:""; position:absolute; inset:0; background:radial-gradient(80% 50% at 50% 80%, rgba(0,0,0,0) 0%, rgba(0,0,0,.35) 100%)}

    /* Content panel */
    .hero-content{position:absolute; inset:0; display:grid; place-items:center; padding:clamp(24px,4vw,48px);}
    .glass{backdrop-filter: blur(10px) saturate(110%); background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18);}
    .eyebrow{letter-spacing:.22em; text-transform:uppercase; font-weight:600; color:#fff; opacity:.9}
    .display-hero{font-weight:800; line-height:1.05; letter-spacing:-.02em; color:#fff}
    .lead{color:#efefef}
    .btn-ghost{--bs-btn-color:#fff; --bs-btn-border-color:rgba(255,255,255,.55); --bs-btn-hover-bg: rgba(255,255,255,.12); --bs-btn-hover-border-color:#fff}

    /* Highlight strip */
    .highlights{position:absolute; left:0; right:0; bottom:24px; display:flex; justify-content:center; gap:.75rem; flex-wrap:wrap; padding:0 12px}
    .chip{display:flex; align-items:center; gap:.5rem; color:#fff; border:1px solid rgba(255,255,255,.3); background:rgba(0,0,0,.25); padding:.5rem .75rem; border-radius:12px; font-size:.9rem}

    /* Scroll cue */
    .scroll-cue{position:absolute; bottom:16px; left:50%; transform:translateX(-50%); color:#fff; opacity:.8; font-size:.9rem;    z-index: 9999;}
    .scroll-cue i{animation:bounce 1.6s infinite}
    @keyframes bounce{0%,100%{transform: translateY(0)} 50%{transform: translateY(-6px)}}

    /* Carousel controls styling */
    .carousel-control-prev, .carousel-control-next{width:8%;}
    .carousel-control-prev-icon, .carousel-control-next-icon{filter: drop-shadow(0 2px 8px rgba(0,0,0,.35));}

    /* Responsive tweaks */
    @media (max-width: 991.98px){
      .display-hero{font-size: clamp(32px, 7vw, 52px)}
    }
    
       .section-panels{position:relative; background:#F5F5DA; color:black}
    .section-panels .intro{position:sticky; top:0; height:100vh; display:flex; align-items:center; padding:clamp(24px,4vw,60px) 0}
    .intro .wrap{max-width:760px}
    .intro .eyebrow{letter-spacing:.22em; text-transform:uppercase; opacity:.75; font-weight:600}
    .intro .title{font-weight:850; line-height:1.02; letter-spacing:-.02em}
    .intro .lead{color:#d6d6d6}
    .intro .tags .badge{background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18)}

    .panels{position:relative}
    .panel{height:92vh; position:relative; overflow:hidden; border-radius:24px; margin:48px 0; border:1px solid rgba(255,255,255,.12)}
    .panel .bg{position:absolute; inset:0;}
    .panel .bg img{width:100%; height:100%; object-fit:cover; transform:scale(1.12); filter:grayscale(10%)}
    .panel .shade{position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.25) 35%, rgba(0,0,0,.55))}
    .panel .card{position:absolute; left:var(--x,6%); bottom:6%; background:rgba(255,255,255,.08); backdrop-filter:blur(10px) saturate(110%); border:1px solid rgba(255,255,255,.18);}

    /* Animations */
    .panel{opacity:.35; transform:translateY(40px); transition:opacity .8s ease, transform .8s ease}
    .panel.visible{opacity:1; transform:translateY(0)}
    .panel.visible .bg img{transition:transform 12s ease; transform:scale(1)}
    .panel .card{transform:translateY(20px); transition:transform .7s ease .2s, box-shadow .3s}
    .panel.visible .card{transform:translateY(0)}
    .panel .card:hover{box-shadow:0 24px 60px rgba(0,0,0,.35)}

    .pin-col{position:relative}

    /* Small helper ribbon */
    .ribbon{position:absolute; right:18px; top:18px; background:rgba(0,0,0,.5); border:1px solid rgba(255,255,255,.18); padding:.45rem .7rem; border-radius:999px; font-size:.85rem}

    @media (max-width: 991.98px){
      .panel{height:84vh; border-radius:16px}
      .panel .card{left:5%; right:5%}
    }
        section.capabilities{position:relative; overflow:hidden; background:#f7f6f2;}
    .capabilities .bg-image{position:absolute; inset:0; background:url('https://images.unsplash.com/photo-1512436991641-6745cdb1723f?q=80&w=2000&auto=format&fit=crop') center/cover no-repeat; filter:brightness(.4);}
    .capabilities .overlay{position:absolute; inset:0; background:linear-gradient(180deg,rgba(16,16,16,.7),rgba(16,16,16,.4)); z-index:-1;}
    .capabilities .section-heading{color:#fff;}
    .capabilities .section-heading span{letter-spacing:.25em; text-transform:uppercase; font-size:.9rem; opacity:.8;}
    .capabilities .card{border:none; border-radius:20px; background:rgba(255,255,255,.1); backdrop-filter:blur(10px); color:#fff; transition:transform .5s ease, background .4s ease;}
    .capabilities .card:hover{transform:translateY(-10px); background:rgba(255,255,255,.15);}
    .capabilities .icon-circle{width:64px; height:64px; border-radius:50%; background:rgba(255,255,255,.15); display:flex; align-items:center; justify-content:center; margin-bottom:1rem; font-size:1.5rem;}
    .divider{height:2px; background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent); margin:2rem 0;}
    /* Animations */
    [data-animate]{opacity:0; transform:translateY(40px); transition:all .9s cubic-bezier(.2,.8,.2,1);} 
    [data-animate].visible{opacity:1; transform:translateY(0);}
     .kd-mfg{background:#fff}
      .kd-mfg .container{position:relative; z-index:2}
      .kd-mfg .eyebrow{letter-spacing:.22em; text-transform:uppercase; font-weight:600; color:var(--mfg-muted)}
      .kd-mfg .title{font-weight:850; letter-spacing:-.02em; color:var(--mfg-ink); line-height:1.04}
      .kd-mfg .lead{color:var(--mfg-muted)}

      /* Counters */
      .kd-mfg .metrics{margin-top:12px}
      .kd-mfg .metric{border:1px solid var(--mfg-line); border-radius:18px; background:#fff; padding:1.25rem; box-shadow:0 10px 30px rgba(0,0,0,.05); transform:translateY(24px); opacity:0; transition:transform .7s, opacity .7s}
      .kd-mfg .metric.visible{transform:translateY(0); opacity:1}
      .kd-mfg .metric .num{font-weight:800; font-size:clamp(28px,4.5vw,46px); line-height:1; color:var(--mfg-ink)}
      .kd-mfg .metric .cap{color:var(--mfg-muted)}

      /* Feature chips */
      .kd-mfg .chip{display:inline-flex; align-items:center; gap:.5rem; border:1px dashed var(--mfg-line); background:var(--mfg-beige); color:#333; padding:.55rem .8rem; border-radius:12px; font-size:.9rem}
      .kd-mfg .chips{display:flex; flex-wrap:wrap; gap:.6rem}

      /* Gallery */
      .kd-mfg .gallery .tile{position:relative; overflow:hidden; border-radius:18px; border:1px solid var(--mfg-line); height:320px; background:#fafafa; transform:translateY(24px); opacity:0; transition:transform .7s, opacity .7s}
      .kd-mfg .gallery .tile.tall{height:420px}
      .kd-mfg .gallery .tile.visible{transform:translateY(0); opacity:1}
      .kd-mfg .gallery .tile img{width:100%; height:100%; object-fit:cover; transition:transform 1.2s ease}
      .kd-mfg .gallery .tile:hover img{transform:scale(1.06)}
      .kd-mfg .tag{position:absolute; left:14px; top:14px; background:rgba(255,255,255,.85); border:1px solid var(--mfg-line); padding:.35rem .6rem; border-radius:999px; font-size:.8rem;    z-index: 999;}

      /* Ticker */
      .kd-mfg .ticker{margin-top:24px; border-top:1px solid var(--mfg-line); border-bottom:1px solid var(--mfg-line); background:#fff}
      .kd-mfg .scroll{display:flex; gap:2rem; padding:.8rem 0; white-space:nowrap; animation:kd-marquee 24s linear infinite;}
      .kd-mfg .scroll .item{display:inline-flex; align-items:center; gap:.5rem; color:#333}
      .kd-mfg .scroll .dot{width:6px; height:6px; background:#c9c0b3; border-radius:50%}
      @keyframes kd-marquee{from{transform:translateX(0)} to{transform:translateX(-50%)} }

      /* Map/locations band */
      .kd-mfg .loc{border:1px solid var(--mfg-line); border-radius:16px; background:#fff; padding:1rem}

      @media (max-width:991.98px){
        .kd-mfg .gallery .tile{height:220px}
        .kd-mfg .gallery .tile.tall{height:300px}
      }
      
      .kd-logos .eyebrow{letter-spacing:.22em; text-transform:uppercase; font-weight:600; color:#6f6f6f}
.kd-logos .title{font-weight:850; letter-spacing:-.02em; color:var(--lg-ink); line-height:1.04}


/* Marquee rails */
.kd-logos .rail{position:relative; overflow:hidden; mask-image:linear-gradient(to right, transparent, black 12%, black 88%, transparent)}
.kd-logos .track{display:flex; align-items:center; gap:3rem; padding:1.2rem 0; will-change:transform}
.kd-logos .row-a .track{animation:logos-scroll-a 26s linear infinite}
.kd-logos .row-b .track{animation:logos-scroll-b 30s linear infinite}
.kd-logos .rail:hover .track{animation-play-state:paused}
@keyframes logos-scroll-a{from{transform:translateX(0)} to{transform:translateX(-50%)} }
@keyframes logos-scroll-b{from{transform:translateX(-25%)} to{transform:translateX(-75%)} }


/* Logo tiles */
.kd-logos .logo{flex:0 0 auto; width:160px; height:64px; border:1px solid var(--lg-line); border-radius:12px; background:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 10px 30px rgba(0,0,0,.04); transition:transform .35s ease, filter .35s ease, opacity .35s ease}
.kd-logos .logo img{max-width:100%; max-height:100%; filter:grayscale(100%) contrast(90%); opacity:.85; transition:filter .35s ease, opacity .35s ease}
.kd-logos .logo:hover{transform:translateY(-4px)}
.kd-logos .logo:hover img{filter:none; opacity:1}


/* CTA bar */
.kd-logos .cta{border:1px solid var(--lg-line); border-radius:18px; background:#fff; box-shadow:0 10px 30px rgba(0,0,0,.04)}


/* Grid view toggle */
.kd-logos .grid{display:none}
.kd-logos .grid .logo{width:100%; height:80px}
.kd-logos .toggle .btn{border-radius:999px}


@media (max-width:991.98px){ .kd-logos .logo{width:130px; height:56px} }

   .kd-footer {
      background:#0f0f10;
      color:#ddd;
      padding:clamp(48px,6vw,72px) 0 0;
      position:relative;
      overflow:hidden;
    }
    .kd-footer:before {
      content:"";
      position:absolute; inset:0;
      background:radial-gradient(120% 120% at 80% -10%, #222 0%, transparent 60%),
                  radial-gradient(90% 80% at 10% 100%, #1c1c1c 0%, transparent 70%);
      opacity:.6;
    }
    .kd-footer .container {position:relative; z-index:2}

    /* Divider line */
    .kd-footer .divider {height:1px; background:linear-gradient(90deg,rgba(255,255,255,.1),rgba(255,255,255,.3),rgba(255,255,255,.1)); margin:2rem 0}

    /* Links */
    .kd-footer .nav-link {color:#bbb; padding:0; margin-bottom:.5rem; display:inline-block; transition:color .3s}
    .kd-footer .nav-link:hover {color:#fff}

    /* Social buttons */
    .kd-footer .social a {
      display:inline-flex; align-items:center; justify-content:center;
      width:42px; height:42px; border-radius:50%;
      border:1px solid rgba(255,255,255,.25);
      margin-right:.5rem; color:#fff; transition:all .35s ease;
    }
    .kd-footer .social a:hover {
      background:#fff; color:#0f0f10; transform:translateY(-3px);
    }

    /* Copyright bar */
    .kd-footer .bottom {
      border-top:1px solid rgba(255,255,255,.15);
      margin-top:2rem; padding:1rem 0; font-size:.9rem; color:#aaa;
    }
    
    
a.navbar-brand.fw-semibold img {
    width: 168px;
}.kd-footer img {
    width: 200px;
    margin-bottom: 20px;
}.kd-mfg .chip {
    background: #efdfd5;
}.chips.mt-2 {
    margin-top: 20px !important;
}.kd-logos .logo img {
    filter: none;
}.scroll-cue {
    display: none;
}span.badge.rounded-pill.text-bg-dark {
    background: #efdfd5 !important;
    color: black !important;
    font-size: 18px;
    padding: 14px 20px;
}a.btn.btn-dark.ms-lg-3 {
    background: #efdfd5;
    border: none;
    color: black;
}.intro .eyebrow {
    color: black;
}
.section-panels .intro p {
    color: black;
}.intro .tags .badge {
    background: black;
}.metric.text-center {
    background: #efdfd5;
}a.btn.btn-dark.btn-lg {
    background: #efdfd5;
    border: none;
    color: black;
}.wrap a.btn.btn-light.btn-lg {
    background: white;
    color: black;
    border: none;
}.wrap a.btn.btn-outline-light.btn-lg {
    border: 1px solid black;
    color: black;
}.eyebrow.reveal {
    font-size: 30px;
}.icon-circle {
    background: #00000054;
    color: white;
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 100%;
    margin-bottom: 20px;
}
header.nav nav.navbar {
    width: 100%;
}

@media screen and (max-width: 600px) {
.hero-fw {
    position: relative;
    min-height: 65vh;
}.highlights {
    display: none;
}.section-panels .intro {
    height: 100%;
}.hero-fw .carousel, .hero-fw .carousel-inner, .hero-fw .carousel-item {
    height: 70vh;
}.hero-content .btn-group-lg>.btn, .btn-lg {
    font-size: 14px;
}.hero {
    min-height: 60vh !important;
}
}


    /* ===== Reset + Base ===== */
    *,*::before,*::after{box-sizing:border-box}
    html,body{height:100%}
    img{max-width:100%; display:block}
    a{color:inherit; text-decoration:none}
    .container{width:min(1160px, 92vw); margin-inline:auto}

    /* Spacing */
    .py-10{padding-block:clamp(64px,9vw,120px)}
    .py-8{padding-block:clamp(48px,8vw,96px)}
    .py-6{padding-block:clamp(40px,7vw,80px)}
    .mt-1{margin-top:8px} .mt-2{margin-top:12px} .mt-3{margin-top:18px} .mt-4{margin-top:24px}

    /* Type scale */
    .eyebrow{letter-spacing:.18em; text-transform:uppercase; font-weight:600; color:#222; opacity:.7; font-size:.78rem}
    .display{font-weight:700; letter-spacing:-.01em; line-height:1.03; font-size:clamp(34px,6vw,66px)}
    .h2{font-weight:600; letter-spacing:-.01em; font-size:clamp(22px,4.6vw,34px)}
    .lead{color:var(--ink); opacity:.82; font-size:clamp(16px,2.4vw,18px)}
    .small{font-size:.92rem; opacity:.8}

    /* Minimal nav */
    .nav{position:sticky; top:0; z-index:10; backdrop-filter:saturate(120%) blur(6px); background:rgba(255,255,255,.85); border-bottom:1px solid #eee}
    .nav .wrap{display:flex; align-items:center; justify-content:space-between; height:64px}
    .brand{font-weight:600}
    .nav .links{display:flex; gap:24px}
    .nav a{font-weight:500; opacity:.8}
    .nav a:hover{opacity:1}

    /* Buttons */
    .btn{display:inline-flex; align-items:center; gap:10px; padding:12px 18px; border-radius:999px; border:1px solid #141414; transition:transform .2s ease, background .25s ease, color .25s ease}
    .btn-dark{background:#000; color:#fff}
    .btn-dark:hover{transform:translateY(-2px)}
    .btn-ghost{border-color:#141414; background:transparent}
    .btn-ghost:hover{background:#141414; color:#fff}

    /* Reveal animation */
    .reveal{opacity:0; transform:translateY(14px); transition:opacity .7s ease, transform .7s ease}
    .reveal.show{opacity:1; transform:none}

    /* ===== 1) HERO (full-width image, no slider) ===== */
    .hero{position:relative; min-height:86vh; display:grid; align-items:end; background:#000}
    .hero__img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:grayscale(18%) brightness(.82)}
    .hero__shade{position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.15) 40%, rgba(0,0,0,.45))}
    .hero__content{position:relative; padding-block:clamp(64px,9vw,120px);    padding-top: 280px;}
    .hero__panel{max-width:720px;color:#fff}
    .hero__panel .lead{color:#fff; opacity:.9}

    /* ===== 2) ABOUT (white) ===== */
    .about{background:var(--white)}
    .about .cols{display:grid; grid-template-columns:1.1fr .9fr; gap:22px}
    .about .box{border:1px solid var(--line); border-radius:16px; background:#fff; padding:18px}

    /* ===== 3) CAPABILITIES (beige band) ===== */
    .caps{background:var(--beige)}
    .cards{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
    .card{border:1px solid var(--line); border-radius:16px; background:#fff; padding:20px; min-height:140px}
    .card h3{margin:0 0 6px 0; font-size:1.05rem}
    .card p{margin:0; color:#313131; opacity:.78}

    /* ===== 4) DIVISIONS (dark) ===== */
    .divs{background:#0e0e0e; color:#fff}
    .divisions{display:grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap:14px}
    .row-item{display:flex; align-items:center; gap:12px; border:1px solid rgba(255,255,255,.18); border-radius:14px; background:rgba(255,255,255,.06); padding:12px}
    .thumb{width:100%; height:200px; border-radius:10px; overflow:hidden; background:#1b1b1b; border:1px solid rgba(255,255,255,.18)}
    .thumb img{width:100%; height:100%; object-fit:cover; filter:grayscale(100%)}
    .row-item .small{color:#e9e9e9; opacity:.7}

    /* ===== 5) CLIENTS (white strip) ===== */
    .clients{background:#fff}
    .logos{display:flex; gap:16px; overflow:auto; padding:6px}
    .logo{flex:0 0 auto; width:140px; height:54px; border:1px solid var(--line); border-radius:10px; background:#fff; display:flex; align-items:center; justify-content:center}
    .logo img{max-width:80%; max-height:70%; filter:grayscale(100%); opacity:.7}

    /* ===== 6) LEADERSHIP (soft neutral) ===== */
    .leaders-sec{background:var(--soft)}
    .leaders{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
    .leader{border:1px solid var(--line); border-radius:16px; background:#fff; overflow:hidden}
    .leader .ph{aspect-ratio: 3/2; background:#f7f4f1; border-bottom:1px solid var(--line)}
    .leader .ph img{width:100%; height:100%; object-fit:cover; filter:grayscale(100%)}
    .leader .meta{padding:14px}
    .leader .name{font-weight:600}
    .leader .role{opacity:.7}

    /* ===== 7) FOOTER (near black) ===== */
    footer{border-top:1px solid #1c1c1c; padding-block:26px; background:#0f0f10; color:#ddd}
    footer .grid{display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap}
    footer .muted{opacity:.7}.row-item.reveal.show {
    flex-direction: column;
}

    /* Responsive */
    @media (max-width: 980px){
      .about .cols{grid-template-columns:1fr}
      .cards{grid-template-columns:1fr}
      .divisions{grid-template-columns:1fr}
      .leaders{grid-template-columns:1fr}
    }


  /* ===== 2) ABOUT BODY (white) ===== */
  .about-body{background:#fff}
  .about-body .grid{display:grid; grid-template-columns:1.05fr .95fr; gap:28px; align-items:start}
  .about-body .panel{border:1px solid var(--line); border-radius:18px; background:#fff; padding:22px;
                     box-shadow:0 18px 50px rgba(0,0,0,.06)}
  .about-body .ph{position:relative; height:100%; border-radius:22px; overflow:hidden; border:1px solid var(--line); background:#f8f6f3}
  .about-body .ph img{width:100%; height:100%; object-fit:cover; filter:grayscale(8%); transform:scale(1.04); animation:zoom 11s ease-in-out both}
  .about-body .badge{position:absolute; left:14px; top:14px; background:#000; color:#fff; border-radius:999px; padding:6px 10px; font-size:.78rem}

  /* ===== 3) STATS STRIP (beige) ===== */
  .stats-strip{background:var(--beige); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
  .metrics{display:grid; grid-template-columns:repeat(4,1fr); gap:12px}
  .metric{border:1px solid var(--line); border-radius:16px; background:#fff; text-align:center; padding:16px}
  .metric .num{font-weight:700; font-size:clamp(22px,3.6vw,32px)}
  .metric .cap{opacity:.75}

  /* ===== 4) VALUES / DIFFERENTIATORS (soft neutral) ===== */
  .values{background:var(--soft)}
  .chips{display:flex; flex-wrap:wrap; gap:10px}
  .chip{border:1px solid var(--line); border-radius:999px; background:#fff; padding:8px 12px; font-size:.92rem}

  /* ===== 5) MINI TIMELINE (dark thin band) ===== */
  .timeline{background:#0f0f10; color:#eaeaea}
  .steps{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
  .step{border:1px dashed rgba(255,255,255,.25); border-radius:12px; padding:12px; background:rgba(255,255,255,.05)}
  .step .ttl{font-weight:600}
  .step .txt{opacity:.9}
  section#about article.panel.reveal.show {
    margin: 0px;
}

section.hero.topsec {
    min-height: 350px;
    height: 350px;
}

section.hero.topsec .hero__content {
    padding: 50px 0px !important;
}section#about article.panel.reveal {
    height: 100%;
}section#about span.chip {
    color: black;
}.steps.mt-3 .step {
    border: 1px solid #00000021;
}
 /* ===== CONTACT GRID (cards) ===== */
  .grid-contacts{display:grid; grid-template-columns:1fr 1fr; gap:18px}
  .card{
    border:1px solid var(--line); border-radius:18px; background:#fff; padding:18px;
    box-shadow:0 18px 50px rgba(0,0,0,.06)
  }
.icon {
    width: fit-content;
    border-radius: 12px;
    background: var(--soft);
    display: inline-flex
;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line);
    font-weight: 700;
    padding: 6px;
}
  .mono{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace}

  /* ===== FORM BAND (beige) ===== */
  .form-band{background:var(--beige); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
  .form-wrap{
    border:1px solid var(--line); border-radius:20px; background:#fff; padding:20px;
    box-shadow:0 18px 50px rgba(0,0,0,.06)
  }
  .form-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:14px}
  .field{position:relative}
  .input, .select, .textarea, .file{
    width:100%; border:1px solid var(--line); background:#fff; color:var(--ink);
    border-radius:12px; padding:14px 12px; outline:none; font:inherit;
    transition:border-color .2s ease, box-shadow .2s ease;
  }
  .textarea{min-height:140px; resize:vertical}
  .input:focus, .select:focus, .textarea:focus{border-color:#bbb; box-shadow:0 0 0 3px rgba(0,0,0,.06)}

  /* Floating labels */
  .label{
    pointer-events:none; position:absolute; left:12px; top:12px; background:#fff;
    padding:0 6px; color:#6d6d6d; transition:transform .2s ease, color .2s ease, top .2s ease, font-size .2s ease;
  }
  .input:focus + .label, .select:focus + .label, .textarea:focus + .label,
  .input:not(:placeholder-shown) + .label, .textarea:not(:placeholder-shown) + .label{
    top:-9px; font-size:.8rem; color:#111
  }
  .req{color:#d00; margin-left:2px}

/* ===== TABS (CSS-only) ===== */
  .tabs{margin-top:20px}
  .tabs .switch{
    display:flex; gap:8px; padding:6px; border:1px solid var(--line); border-radius:999px; background:#fff; width:max-content
  }
  .tabs input{display:none}
  .tabs label{
    padding:8px 14px; border-radius:999px; cursor:pointer; user-select:none; color:#333; transition:background .2s ease, color .2s ease
  }
  #tab-design:checked ~ .switch label[for="tab-design"],
  #tab-mfg:checked    ~ .switch label[for="tab-mfg"]{background:#000; color:#fff}

  .tab-panels{margin-top:18px}
  .panel{display:none}
  #tab-design:checked ~ .tab-panels .panel-design{display:block}
  #tab-mfg:checked    ~ .tab-panels .panel-mfg{display:block}

  /* ===== DESIGN NETWORK ===== */
  .grid-offices{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
  .office{border:1px solid var(--line); border-radius:18px; background:#fff; overflow:hidden; box-shadow:0 18px 50px rgba(0,0,0,.06)}
  .office .ph{aspect-ratio: 3/2; background:#f6f3ef; border-bottom:1px solid var(--line)}
  .office .ph img{width:100%; height:100%; object-fit:cover; filter:grayscale(10%); transform:scale(1.04); animation:zoom 10s ease-in-out both}
  .office .meta{padding:14px}
  .badge{display:inline-block; padding:6px 10px; border-radius:999px; font-size:.78rem; border:1px solid var(--line); background:#fff}
  .badge-dark{background:#000; color:#fff; border-color:#000}

  /* ===== MFG SECTION ===== */
  .mfg-wrap{display:grid; grid-template-columns:1.1fr .9fr; gap:18px; align-items:start}
  .mfg-card{border:1px solid var(--line); border-radius:18px; background:#fff; padding:18px; box-shadow:0 18px 50px rgba(0,0,0,.06)}
  .mfg-note{background:var(--beige); border:1px solid var(--line); border-radius:18px; padding:18px}
  .chips{display:flex; flex-wrap:wrap; gap:8px}
  .chip{border:1px solid var(--line); border-radius:999px; background:#fff; padding:8px 12px; font-size:.9rem}

  .countries{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px}
  .country{border:1px solid var(--line); border-radius:10px; background:#fff; padding:8px 10px; font-size:.92rem}

  .timeline{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:12px}
  .step{border:1px dashed var(--line); border-radius:12px; padding:12px; background:#fff}
  .step .ttl{font-weight:600}
  .step .txt{opacity:.8}

  .ribbon{
    margin-top:12px; border:1px solid var(--line); border-radius:16px; background:#fff; padding:12px;
    display:flex; align-items:center; gap:8px; flex-wrap:wrap
  }
  .pill{border:1px solid #000; border-radius:999px; padding:6px 10px; font-weight:600}

  /* ===== BANDS / BACKGROUNDS ===== */
  .band-white{background:#fff}
  .band-beige{background:var(--beige); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
  .band-soft{background:var(--soft)}

  /* Animations */
  @keyframes zoom{from{transform:scale(1.06)} to{transform:scale(1)}}

  /* Responsive */
  @media (max-width:980px){
    .grid-offices{grid-template-columns:1fr}
    .mfg-wrap{grid-template-columns:1fr}
    .timeline{grid-template-columns:1fr}
  }
 #tab-design:checked ~ .tab-panels .panel-design, #tab-mfg:checked ~ .tab-panels .panel-mfg {
    opacity: 1;
    border-radius: 0px;
    background: transparent;
    margin-top: 20px;
    height: 100%;
}.tab-panels article.office {
    box-shadow: none;
}.tab-panels .badge {
    background: black;
}.panel.panel-mfg .timeline {
    background: transparent;
}.panel.panel-mfg .timeline .step {
    color: black;
}.panel.panel-mfg span.chip {
    color: black;
}.divisions .small {
    display: none;
}li.nav-item a {
    color: black;
}img.certifiedlogo {
    width: 52px !important;
}.featuredlogo img {
    width: 88px !important;
}a.navbar-brand {
    gap: 8px;
}.konlogo {
    width:165px !important;
}.navbar-brand {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: inherit;
}

.featuredlogo {
  display: flex;
  align-items: center;
  border-left: 2px solid #ddd;
  padding-left: 8px;
      flex-direction: column;
}

.featuredlogo h6 {
  font-size: 12px;
  color: #555;
  margin-right: 6px;
  letter-spacing: 0.5px;
}nav.navbar.navbar-expand-lg.bg-white.sticky-top.border-bottom.border-light-subtle {
    padding: 0px;
}.featuredlogo h5 {
    color: #33629a;
}



@media screen and (max-width: 600px) {
.about-body .grid, .grid-contacts, .form-grid {
    grid-template-columns: 1fr !important;
}.metrics {
    grid-template-columns: repeat(2, 1fr);
}.steps {
    grid-template-columns: repeat(2, 1fr);
}.tabs .switch {
    flex-wrap: wrap;
    flex-direction: column;
    border-radius: 7px;
    width: 100%;
    padding: 10px;
}section.hero.topsec {
    height: 200px;
    min-height: 200px !important;
}a.navbar-brand.fw-semibold img {
    width: 101px;
}img.certifiedlogo {
    width: 36px !important;
}.featuredlogo img {
    width: 70px !important;
}.featuredlogo {
    display: flex !important;
    flex-direction: column;
}.konlogo {
    width: 100px !important;
}.featuredlogo h5 {
    font-size: 12px;
}
}