/* ============================================================
   DESIGN TOKENS
============================================================ */:root {
  --ink:        #0d0f13;
  --ink-mid:    #1c2128;
  --ink-muted:  #767c88;
  --ink-ghost:  rgba(13, 15, 19, 0.08);
  --paper:      #ffffff;
  --paper-tint: #f7f7f8;
  --accent:     #111318;
  --accent-dim: rgba(17, 19, 24, 0.72);

  --font-display: "Syne", ui-sans-serif, system-ui, sans-serif;
  --font-body:    "DM Sans", ui-sans-serif, system-ui, sans-serif;

  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);

  --header-h: 80px;
  --pad-x: clamp(20px, 5vw, 72px);
}a {
  color: inherit;
  text-decoration: none;
}/* Reduce motion for users who prefer it *//* LOADER *//* ============================================================
   HEADER
============================================================ */.nav-action {
  color: #ffffff;
  border-color: rgba(255,255,255,0.4);
}.brand {
      display: inline-flex;
      align-items: center;
      text-decoration: none;
      /* Smooth scale on hover/tap */
      transition: transform 0.2s ease;
    }.brand:active {
      transform: scale(0.95);
    }.brand img {
      display: block;
      width: 100px;
      height: auto; /* Changed to auto to maintain aspect ratio naturally */
      max-height: 40px;
      object-fit: contain;
    }/* Fallback logo text styling if image fails to load */.nav-action-wrapper {
      justify-self: end;
      display: flex;
      align-items: center;
      gap: 16px;
    }.nav-action {
      display: inline-flex;
      align-items: center;
      height: 40px;
      padding: 0 24px;
      border: 1.5px solid rgba(17, 19, 24, 0.2);
      border-radius: 999px;
      font-family: var(--font-display);
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--ink);
      background: transparent;
      backdrop-filter: blur(4px);
      text-decoration: none;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      transition: all 0.3s var(--ease-out-expo);
    }/* Interactive button hover & active states */.nav-action:hover {
      background: var(--ink);
      color: var(--paper);
      border-color: var(--ink);
      transform: translateY(-2px);
      box-shadow: 0 6px 15px rgba(0,0,0,0.15);
    }.nav-action:active {
      transform: translateY(1px) scale(0.96);
    }/* Mobile Hamburger Menu */.menu-toggle {
      display: none;
      background: none;
      border: none;
      cursor: pointer;
      width: 40px;
      height: 40px;
      position: relative;
      z-index: 101;
      border-radius: 50%;
      background: rgba(255,255,255,0.2);
      backdrop-filter: blur(5px);
    }.menu-toggle span {
      display: block;
      width: 20px;
      height: 2px;
      background-color: var(--ink);
      position: absolute;
      left: 50%;
      transform: translate(-50%, -50%);
      transition: all 0.3s ease;
    }.menu-toggle span:nth-child(1) { top: 35%; }.menu-toggle span:nth-child(2) { top: 50%; }.menu-toggle span:nth-child(3) { top: 65%; }.menu-toggle.is-active span:nth-child(1) {
      top: 50%;
      transform: translate(-50%, -50%) rotate(45deg);
    }.menu-toggle.is-active span:nth-child(2) {
      opacity: 0;
    }.menu-toggle.is-active span:nth-child(3) {
      top: 50%;
      transform: translate(-50%, -50%) rotate(-45deg);
    }@media (max-width: 768px) {
.menu-toggle {
        display: block;
      }/* Move Explore button into the mobile menu if needed, or keep it up top.
         Let's keep it up top but smaller for mobile. */.nav-action {
        padding: 0 16px;
        font-size: 0.65rem;
      }
}/* ============================================================
           HERO SECTION
        ============================================================ */.hero {
            position: relative;
            z-index: 2; /* Set higher so it overlays the grey filler perfectly */
            width: 100%;
            /* Use min-height and max combined to prevent jumpy layout on mobile scroll */
            min-height: max(600px, 80vh); 
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            /* High quality tech background with dark overlay to match image */
            background: linear-gradient(rgba(75, 75, 75, 0.85), rgba(75, 75, 75, 0.85)), 
                        url('https://images.unsplash.com/photo-1581091226825-a6a2a5aee158?auto=format&fit=crop&w=2000&q=80') center center / cover no-repeat;
            /* Angled cut at the bottom exactly as in the image */
            clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
            padding-top: 60px; /* offset for navbar */
            box-sizing: border-box;
        }.hero-content {
            max-width: 800px;
            padding: 0 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
            color: #ffffff;
            margin-top: -5%; /* visual balance relative to the angle */
        }.hero h1 {
            font-size: 5rem;
            font-weight: 800;
            margin: 0 0 5px 0;
            letter-spacing: -1px;
            line-height: 1.1;
        }.hero p {
            font-size: 1.35rem;
            font-weight: 300;
            color: #e2e2e2;
            margin: 0 0 35px 0;
            letter-spacing: 0.5px;
        }.hero-btn {
            display: inline-block;
            background-color: #f27c54; /* Exact coral/orange color from the image */
            color: #ffffff;
            text-decoration: none;
            padding: 16px 36px;
            font-weight: 700;
            font-size: 0.95rem;
            letter-spacing: 1.5px;
            text-transform: uppercase;
            border-radius: 4px;
            transition: background-color 0.3s ease, transform 0.2s ease;
        }.hero-btn:hover {
            background-color: #d86c47;
            transform: translateY(-2px);
        }@media (max-width: 768px) {
.menu-toggle {
                display: block;
            }.nav-action {
                padding: 0 16px;
                font-size: 0.65rem;
            }.hero {
                /* Changed fixed height to min-height for stable layout */
                min-height: max(500px, 70vh);
                clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%); /* adjust angle for mobile */
            }.hero h1 {
                font-size: 3.5rem;
            }.hero p {
                font-size: 1.1rem;
            }
}.reveal {
  opacity: 0;
  transform: translateY(60px);
  transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}.reveal.active {
  opacity: 1;
  transform: translateY(0);
}/* =========================
           WHO WE ARE SECTION
        ========================= */.who-we-are-section{
            position: relative;
            z-index: 1; /* Sets stacking context for seamless edge filling */
            width: 100%;
            padding: 120px 6% 60px 6%;
            background: #f5f5f5;
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 70px;
            box-sizing: border-box;
        }/* Seamless filler behind the hero section */.who-we-are-section::before {
            content: '';
            position: absolute;
            bottom: 99%; /* Overlaps by 1% to prevent any 1px hairlines */
            left: 0;
            width: 100%;
            height: 50vh; /* Reaches up behind the hero to fill the angled gap */
            background: #f5f5f5;
            z-index: -1;
            pointer-events: none;
        }/* LEFT SIDE CONTENT */.who-left{
            width: 42%;
        }.who-tag{
            display: block;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 3px;
            color: #7b7b7b;
            margin-bottom: 18px;
        }.who-title{
            font-family: 'Montserrat', var(--font-display);
            font-size: 52px;
            font-weight: 800;
            color: #111827;
            margin: 0 0 35px 0;
            line-height: 1;
        }.who-text{
            font-size: 15px;
            line-height: 1.9;
            color: #333;
            margin-bottom: 22px;
        }.who-right{
    width: 50%;
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    grid-template-rows: 320px 320px; /* adjust these values */
    gap: 12px;
}.cross-top,
.cross-center,
.cross-right{
    overflow: hidden;
    height: 100%;
}/* TOP IMAGE */.cross-top{
            grid-column: 1 / 2;
            grid-row: 1 / 2;
            overflow: hidden;
        }/* BOTTOM IMAGE */.cross-center{
            grid-column: 1 / 2;
            grid-row: 2 / 3;
            overflow: hidden;
        }/* TALL RIGHT IMAGE */.cross-right{
            grid-column: 2 / 3;
            grid-row: 1 / 3;
            overflow: hidden;
        }.cross-top,
.cross-center,
.cross-right{
    overflow: hidden;
    padding-top: -95px;
}.cross-top img,
.cross-center img,
.cross-right img{
    width: 100%;
    height: calc(100% + 35px);
    object-fit: cover;
    display: block;
}/* RESPONSIVE */@media(max-width: 992px){
.who-we-are-section{
                flex-direction: column;
            }.who-left,
            .who-right{
                width: 100%;
            }
}@media(max-width: 768px){
.who-right{
                grid-template-columns: 1fr;
                grid-template-rows: auto;
            }.cross-top,
            .cross-center,
            .cross-right{
                grid-column: auto;
                grid-row: auto;
                height: 300px;
            }.who-title{
                font-size: 40px;
            }
}/* BASE (hidden state) */.reveal {
  opacity: 0;
  transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
}/* FROM BOTTOM → UP */.reveal-up {
  transform: translateY(60px);
}/* FROM LEFT → RIGHT */.reveal-left {
  transform: translateX(-60px);
}/* FROM RIGHT → LEFT */.reveal-right {
  transform: translateX(60px);
}/* ACTIVE (visible state) */.reveal.active {
  opacity: 1;
  transform: translate(0, 0);
}/* =========================
           PRINCIPLES SECTION
        ========================= */.principles-wrapper {
            background: #f5f5f5;
           padding: 0 4% 80px 4%;
            box-sizing: border-box;
            width: 100%;
        }.principles-container {
            background: #444444; /* Matches screenshot dark background */
            padding: 45px 40px;      /* smaller inner spacing */
    border-radius: 30px; 
            box-sizing: border-box;
            width: 100%;
        }.principles-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 50px;
        }.principles-title {
            font-family: var(--font-display);
            font-size: 40px;
            font-weight: 800;
            color: #f27c54; /* Exact orange from design */
            margin: 0;
            letter-spacing: 0.5px;
            text-transform: uppercase;
        }.principles-header-right {
            max-width: 400px;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 16px;
        }.principles-header-right p {
            color: #b8b8b8;
            font-size: 13px;
            line-height: 1.6;
            margin: 0;
        }.principles-nav {
            display: flex;
            gap: 12px;
            margin-top: 5px;
        }.principles-nav button {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;
            outline: none;
        }.principles-nav .prev {
            background: transparent;
            border: 1px solid #777;
            color: #fff;
        }.principles-nav .next {
    background: transparent;
    border: 1px solid #777;
    color: #fff;

    transition:
        background 0.35s ease,
        color 0.35s ease,
        border-color 0.35s ease,
        transform 0.3s ease;
}.principles-nav .prev:hover {
    background: #ffffff;
    color: #000000;
    border-color: #ffffff;
}.principles-nav .next:hover {
    background: #ffffff;
    color: #000000;
    border-color: #ffffff;
}.principles-nav button:hover {
            transform: scale(1.05);
        }.principles-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 14px;
        }.p-card {
            background: #fff;
            border-radius: 20px;
            padding: 20px;
            display: flex;
            flex-direction: column;
            transition: transform 0.3s ease;
            position: relative;
            overflow: hidden;
        }.p-card > * {
            position: relative;
            z-index: 1;
        }.p-card::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            background: linear-gradient(to bottom, #ffffff 0%, #111111 100%);
            opacity: 0;
            transition: opacity 0.4s ease;
            z-index: 0;
        }.p-card:hover {
            transform: translateY(-5px);
        }.p-card:hover::before {
            opacity: 1;
        }.p-card.dark {
            background: #0d0f12; /* Dark card background */
            color: #fff;
        }.p-badge {
            display: inline-block;
            padding: 4px 12px;
            border: 1px solid #eaeaea;
            border-radius: 20px;
            font-size: 9px;
            font-weight: 800;
            color: #888;
            text-transform: uppercase;
            margin-bottom: 24px;
            align-self: flex-start;
            letter-spacing: 0.5px;
        }.p-card.dark .p-badge {
            border-color: #333;
            color: #fff;
        }.p-card-title {
            font-family: var(--font-display);
            font-size: 20px;
            font-weight: 800;
            color: #111;
            margin: 0 0 16px 0;
            line-height: 1.25;
        }.p-card.dark .p-card-title {
            color: #fff;
        }.p-card-img {
            width: 100%;
            aspect-ratio: 1/1; /* Square images as seen in design */
            border-radius: 12px;
            overflow: hidden;
            margin-bottom: 20px;
        }.p-card-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }.p-card-text {
            font-size: 11px;
            line-height: 1.6;
            color: #6b7280;
            margin-bottom: 24px;
            flex-grow: 1;
            transition: color 0.4s ease;
        }.p-card:hover .p-card-text {
            color: #e4e4e7;
        }.p-card.dark .p-card-text {
            color: #a1a1aa;
        }.p-card-footer {
            display: flex;
            justify-content: flex-end;
            margin-top: auto;
        }.p-card-btn {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            border: 1px solid #eaeaea;
            display: flex;
            align-items: center;
            justify-content: center;
            text-decoration: none;
            color: #6b8fd4; /* Blueish arrow */
            transition: all 0.3s;
        }.p-card:hover .p-card-btn {
            border-color: #444;
            color: #fff;
            background: rgba(255,255,255,0.1);
        }.p-card.dark .p-card-btn {
            border-color: #333;
            background: rgba(255,255,255,0.05);
        }.p-card-btn:hover {
            background: #f0f0f0;
        }.p-card.dark .p-card-btn:hover {
            background: #222;
        }/* Responsive Principles Section */@media(max-width: 1024px) {
.principles-grid { grid-template-columns: repeat(2, 1fr); }.principles-header { flex-direction: column; gap: 24px; }
}@media(max-width: 600px) {
.principles-grid { grid-template-columns: 1fr; }.principles-container { padding: 40px 24px; border-radius: 24px; }.principles-title { font-size: 36px; }
}/* =========================
           MANUFACTURING PROCESS SECTION
        ========================= */.mfg-section {
            width: 100%;
            padding: 60px 6% 120px 6%;
            background: #ffffff;
            box-sizing: border-box;
        }/* Top Row */.mfg-top {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 5%;
            margin-bottom: 80px;
        }.mfg-info {
            width: 30%;
        }.mfg-title {
            font-family: var(--font-display);
            font-size: 36px;
            font-weight: 900;
            color: #111;
            margin: 0 0 24px 0;
            line-height: 1.2;
        }.mfg-desc {
            font-size: 13px;
            line-height: 1.6;
            color: #555;
            margin-bottom: 24px;
        }.mfg-nav {
            display: flex;
            gap: 12px;
            margin-top: 30px;
        }.mfg-nav button {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            border: 1px solid #e0e0e0;
            background: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s;
            color: #999;
        }.mfg-nav button:hover {
            border-color: #111;
            color: #111;
        }/* Steps Grid */.mfg-steps-container {
            width: 65%;
            display: grid;
            grid-template-columns: repeat(4, 1fr);
        }.mfg-step {
            background: #f9f9f9; /* Light grey for inactive steps */
            height: 280px;
            padding: 30px 24px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            transition: background 0.3s;
            border-right: 2px solid #ffffff; /* Separation between boxes */
        }.mfg-step:last-child {
            border-right: none;
        }.mfg-step:hover {
            background: #ef7c54; /* Exact orange from the screenshot */
        }.step-num {
            font-family: var(--font-display);
            font-size: 40px;
            font-weight: 800;
            color: rgba(239, 124, 84, 0.25); /* Faint orange */
            transition: color 0.3s ease;
        }.mfg-step:hover .step-num {
            color: rgba(255, 255, 255, 0.9);
        }.step-name {
            font-size: 11px;
            font-weight: 800;
            text-transform: uppercase;
            color: #111;
            line-height: 1.4;
            letter-spacing: 0.5px;
            transition: color 0.3s ease;
        }.mfg-step:hover .step-name {
            color: #fff;
        }/* Middle Text */.mfg-middle {
            margin-bottom: 50px;
        }.mfg-middle h3 {
            font-family: var(--font-display);
            font-size: 26px;
            font-weight: 800;
            color: #111;
            line-height: 1.4;
            margin: 0 0 20px 0;
            max-width: 85%;
        }.mfg-middle p {
            font-size: 14px;
            color: #6b7280;
            line-height: 1.6;
            max-width: 80%;
            margin: 0;
        }/* Images Grid */.mfg-images {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
            margin-bottom: 50px;
        }.mfg-img {
            width: 100%;
            aspect-ratio: 4/5;
            object-fit: cover;
            display: block;
        }/* Bottom Row */.mfg-bottom {
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            padding-top: 10px;
        }.mfg-btn {
            display: inline-flex;
            align-items: center;
            gap: 16px;
            background: #111;
            color: #fff;
            padding: 14px 28px 14px 14px;
            font-size: 13px;
            font-weight: 700;
            text-decoration: none;
            transition: background 0.3s;
        }.mfg-btn:hover {
            background: #333;
        }.mfg-btn-icon {
            width: 28px;
            height: 28px;
            background: #fff;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #111;
        }.mfg-btn-icon svg {
            width: 10px;
            height: 10px;
            margin-left: 2px; /* optical center */
        }.mfg-footer-right {
            display: flex;
            align-items: center;
            gap: 24px;
            max-width: 50%;
        }.mfg-footer-text {
            font-size: 19px;
            font-style: italic;
            color: #6b7280;
            line-height: 1.5;
            margin: 0;
        }.mfg-footer-text a {
            color: #ef7c54;
            text-decoration: underline;
            font-weight: 700;
            font-style: normal;
        }.mfg-footer-nav {
            display: flex;
            gap: 16px;
            color: #999;
        }.mfg-footer-nav svg {
            width: 16px;
            height: 16px;
            cursor: pointer;
            transition: color 0.3s;
        }.mfg-footer-nav svg:hover {
            color: #111;
        }/* CARD */.card{
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    cursor: pointer;
}/* HOVER EFFECT */.card:hover{
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}/* Responsive specific to MFG section */@media(max-width: 1024px) {
.mfg-top { flex-direction: column; gap: 40px; }.mfg-info, .mfg-steps-container { width: 100%; }.mfg-middle h3 { max-width: 100%; }.mfg-middle p { max-width: 100%; }.mfg-bottom { flex-direction: column; align-items: flex-start; gap: 30px; }.mfg-footer-right { max-width: 100%; justify-content: space-between; width: 100%;}
}@media(max-width: 768px) {
.mfg-steps-container { grid-template-columns: repeat(2, 1fr); }.mfg-step { height: 200px; border-bottom: 2px solid #ffffff; }.mfg-images { grid-template-columns: 1fr; }
}/* NEWSLETTER *//* NEWSLETTER *//* CTA CARD *//* RIGHT LINKS *//* BOTTOM *//* RESPONSIVE */