/* ===========================================================
   MACHINERIES & CONSUMABLES — TECHNICAL SPECIMEN CATALOG
   Scoped with .mch- classes. Blueprint / engineering-drawing
   inspired: grid-paper backgrounds, corner-bracket "viewfinder"
   frames on imagery, FIG-numbered specimen cards.

   Ink        #14171A
   Paper      #F7F6F2
   Panel      #FFFFFF
   Line       #DEDBD2
   Amber      #E2963A
   Amber Dark #B9752A
   Text Soft  #63676B
=========================================================== */


/* =========================
   GLOBAL
========================= */

.section{
  padding:82px 7%;
}

.section-head{
  text-align:center;
  margin-bottom:60px;
}

.section-head span{
  color:#b68b2d;
  letter-spacing:2px;
  font-size:13px;
  font-weight:600;
}



/* =========================
   NAVBAR
========================= */

.navbar{
  position:fixed;
  top:3px;
  left:50%;
  transform:translateX(-50%);
  width:92%;
  height:85px;
  background:rgba(255,255,255,0.88);
  backdrop-filter:blur(12px);
  border-radius:22px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 35px;
  z-index:999;
  box-shadow:0 10px 40px rgba(0,0,0,0.08);
}

.logo img{
  height:105px;
}

.nav-links{
  display:flex;
  gap:38px;
}

.nav-links a{
  text-decoration:none;
  color:#111;
  font-size:15px;
  font-weight:500;
  transition:0.3s;
}

.nav-links a:hover{
  color:#b68b2d;
}

.nav-btn{
  background:#ffffff;
  color:white;
  text-decoration:none;
  padding:14px 28px;
  border-radius:12px;
  transition:0.3s;
  font-size:14px;
}

.nav-btn:hover{
  background:#b68b2d;
}

.menu-btn{
  display:none;
}




.mch-page{
    margin:0;
    padding:0;
    background:#F7F6F2;
    color:#14171A;
    font-family:'Inter', sans-serif;
}

.mch-page *{ box-sizing:border-box; }
.mch-page a{ color:inherit; }

.mch-container{
    max-width:1220px;
    margin:0 auto;
    padding:0 44px;
}

/* reusable blueprint grid-paper texture */
.mch-grid-bg{
    background-image:
        linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
    background-size:36px 36px;
}

.mch-grid-bg-light{
    background-image:
        linear-gradient(rgba(20,23,26,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(20,23,26,.045) 1px, transparent 1px);
    background-size:36px 36px;
}

/* ===========================================================
   HERO
=========================================================== */

.mch-hero{
    background:#14171A;
    position:relative;
    overflow:hidden;
}

.mch-hero::before{
    content:'';
    position:absolute;
    inset:0;
    background-image:
        linear-gradient(rgba(247,246,242,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(247,246,242,.035) 1px, transparent 1px);
    background-size:38px 38px;
    pointer-events:none;
}

.mch-hero-inner{
    display:grid;
    grid-template-columns:1fr 0.86fr;
    align-items:center;
    min-height:78vh;
    padding-top:100px;
    position:relative;
    z-index:1;
}

.mch-hero-text{
    padding:60px 30px 60px 0;
}

.mch-hero-eyebrow{
    display:inline-flex;
    align-items:center;
    gap:10px;
    font-family:'IBM Plex Mono', monospace;
    font-size:12px;
    letter-spacing:2.5px;
    text-transform:uppercase;
    color:#E2963A;
    margin-bottom:28px;
    padding-bottom:10px;
    border-bottom:1px solid rgba(226,150,58,.35);
}

.mch-hero h1{
    font-family:'Inter', sans-serif;
    font-weight:700;
    font-size:52px;
    line-height:1.12;
    letter-spacing:-1.2px;
    color:#F7F6F2;
    max-width:600px;
    margin-bottom:22px;
}

.mch-hero h1 span{
    color:#E2963A;
}

.mch-hero p{
    max-width:480px;
    font-size:16px;
    line-height:1.85;
    color:#9A9E9F;
    margin-bottom:38px;
}

.mch-btn{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:16px 28px;
    background:#E2963A;
    color:#14171A;
    text-decoration:none;
    font-weight:600;
    font-size:14px;
    border-radius:3px;
    transition:.25s ease;
}

.mch-btn:hover{
    background:#F7F6F2;
    transform:translateY(-2px);
}

.mch-btn i{ font-size:12px; }

/* hero specimen frame */

.mch-hero-photo{
    position:relative;
    padding:20px 0;
}

.mch-hero-frame{
    position:relative;
    aspect-ratio:4/4.4;
    border:1px solid rgba(247,246,242,.25);
}

.mch-hero-frame img{
    width:100%;
    height:100%;
    object-fit:cover;
    filter:grayscale(.15) contrast(1.05);
    opacity:.92;
}

.mch-corner{
    position:absolute;
    width:26px;
    height:26px;
    border-color:#E2963A;
    border-style:solid;
    border-width:0;
}

.mch-corner.tl{ top:-1px; left:-1px; border-top-width:2px; border-left-width:2px; }
.mch-corner.tr{ top:-1px; right:-1px; border-top-width:2px; border-right-width:2px; }
.mch-corner.bl{ bottom:-1px; left:-1px; border-bottom-width:2px; border-left-width:2px; }
.mch-corner.br{ bottom:-1px; right:-1px; border-bottom-width:2px; border-right-width:2px; }

.mch-hero-frame-tag{
    position:absolute;
    bottom:16px;
    left:16px;
    background:rgba(20,23,26,.82);
    color:#F7F6F2;
    padding:8px 13px;
    font-family:'IBM Plex Mono', monospace;
    font-size:10.5px;
    letter-spacing:1px;
    text-transform:uppercase;
}

.mch-hero-frame-fig{
    position:absolute;
    top:16px;
    right:16px;
    font-family:'IBM Plex Mono', monospace;
    font-size:10.5px;
    letter-spacing:1px;
    color:#E2963A;
    background:rgba(20,23,26,.82);
    padding:8px 13px;
}

/* quick facts strip */

.mch-facts{
    background:#14171A;
    border-top:1px solid rgba(247,246,242,.1);
    position:relative;
    z-index:1;
}

.mch-facts .mch-container{
    display:flex;
    flex-wrap:wrap;
}

.mch-fact{
    flex:1;
    min-width:170px;
    padding:26px 30px 26px 0;
    border-right:1px solid rgba(247,246,242,.1);
}

.mch-fact:last-child{ border-right:none; }

.mch-fact .mch-fact-num{
    display:block;
    font-family:'IBM Plex Mono', monospace;
    font-size:22px;
    font-weight:600;
    color:#F7F6F2;
    margin-bottom:4px;
}

.mch-fact .mch-fact-lbl{
    font-family:'IBM Plex Mono', monospace;
    font-size:11px;
    letter-spacing:1.5px;
    text-transform:uppercase;
    color:#E2963A;
}

/* ===========================================================
   CATEGORY NAV
=========================================================== */

.mch-catnav{
    background:#F7F6F2;
    border-bottom:1px solid #DEDBD2;
    position:sticky;
    top:0;
    z-index:50;
}

.mch-catnav .mch-container{
    display:flex;
    gap:6px;
}

.mch-catnav a{
    font-family:'IBM Plex Mono', monospace;
    font-size:12.5px;
    letter-spacing:1px;
    text-transform:uppercase;
    text-decoration:none;
    color:#63676B;
    padding:20px 22px;
    border-bottom:2px solid transparent;
    transition:.2s ease;
}

.mch-catnav a:hover{
    color:#14171A;
    border-bottom-color:#E2963A;
}

/* ===========================================================
   SECTIONS
=========================================================== */

.mch-section{ padding:20px 0 110px; }

.mch-section-head{
    display:flex;
    align-items:flex-start;
    gap:26px;
    margin-bottom:16px;
}

.mch-section-tag{
    flex-shrink:0;
    width:52px;
    height:52px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid #14171A;
    font-family:'IBM Plex Mono', monospace;
    font-size:14px;
    font-weight:600;
}

.mch-section-head h2{

    font-family:'Inter', sans-serif;
    font-weight:700;
    font-size:45px;
    letter-spacing:-.5px;
    margin-bottom:10px;
}

.mch-section-head p{
    max-width:560px;
    font-size:14.5px;
    line-height:1.75;
    color:#63676B;
}

.mch-section-rule{
    height:1px;
    background-image:repeating-linear-gradient(90deg, #14171A 0 6px, transparent 6px 12px);
    margin:34px 0 60px;
}

/* specimen grid */

.mch-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:34px;
}

.mch-card{
    background:#FFFFFF;
    border:1px solid #DEDBD2;
    transition:box-shadow .25s ease, transform .25s ease;
}

.mch-card:hover{
    box-shadow:0 18px 40px rgba(20,23,26,.09);
    transform:translateY(-3px);
}

.mch-card-frame{
    position:relative;
    aspect-ratio:4/3;
    overflow:hidden;
    border-bottom:1px solid #DEDBD2;
    background:#EFEEE8;
}

.mch-card-frame img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.mch-card-frame .mch-corner{
    border-color:#E2963A;
    width:18px;
    height:18px;
}

.mch-card-frame .mch-corner.tl{ border-top-width:2px; border-left-width:2px; }
.mch-card-frame .mch-corner.tr{ border-top-width:2px; border-right-width:2px; }
.mch-card-frame .mch-corner.bl{ border-bottom-width:2px; border-left-width:2px; }
.mch-card-frame .mch-corner.br{ border-bottom-width:2px; border-right-width:2px; }

.mch-card-fig{
    position:absolute;
    top:12px;
    left:12px;
    font-family:'IBM Plex Mono', monospace;
    font-size:10px;
    letter-spacing:1px;
    color:#F7F6F2;
    background:rgba(20,23,26,.78);
    padding:5px 9px;
}

.mch-card-body{
    padding:22px 24px 26px;
}

.mch-card-body h3{
    font-family:'Inter', sans-serif;
    font-weight:600;
    font-size:18px;
    letter-spacing:-.2px;
    margin-bottom:8px;
}

.mch-card-body > p{
    font-size:13.5px;
    line-height:1.7;
    color:#63676B;
    min-height:58px;
    margin-bottom:16px;
}

.mch-spec{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px 10px;
    padding-top:16px;
    border-top:1px dashed #DEDBD2;
}

.mch-spec div{
    display:flex;
    align-items:flex-start;
    gap:7px;
    font-family:'IBM Plex Mono', monospace;
    font-size:10.8px;
    letter-spacing:.2px;
    color:#14171A;
    line-height:1.4;
}

.mch-spec div::before{
    content:'';
    width:5px;
    height:5px;
    margin-top:5px;
    background:#E2963A;
    flex-shrink:0;
}

/* ===========================================================
   CTA
=========================================================== */

.mch-cta{
    background:#14171A;
    text-align:center;
    padding:25px 0;
    position:relative;
    overflow:hidden;
}

.mch-cta::before{
    content:'';
    position:absolute;
    inset:0;
    background-image:
        linear-gradient(rgba(247,246,242,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(247,246,242,.035) 1px, transparent 1px);
    background-size:38px 38px;
    pointer-events:none;
}

.mch-cta-inner{ position:relative; z-index:1; }

.mch-cta-tag{
    display:inline-flex;
    align-items:center;
    gap:10px;
    font-family:'IBM Plex Mono', monospace;
    font-size:12px;
    letter-spacing:2.5px;
    text-transform:uppercase;
    color:#E2963A;
    margin-bottom:26px;
}

.mch-cta-tag::before,
.mch-cta-tag::after{
    content:'';
    width:30px;
    height:1px;
    background:#E2963A;
}

.mch-cta h2{
    font-family:'Inter', sans-serif;
    font-weight:700;
    font-size:42px;
    line-height:1.18;
    letter-spacing:-.8px;
    color:#F7F6F2;
    max-width:660px;
    margin:0 auto 18px;
}

.mch-cta p{
    color:#9A9E9F;
    font-size:15.5px;
    line-height:1.85;
    max-width:540px;
    margin:0 auto 40px;
}

.mch-cta-btn{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:17px 34px;
    border:1px solid #E2963A;
background: #e2963a;    text-decoration:none;
    color:#E2963A;
    font-family:'IBM Plex Mono', monospace;
    font-size:13px;
    letter-spacing:1px;
    text-transform:uppercase;
    transition:.25s ease;
}

.mch-cta-btn:hover{
    background:#ffffff;
    color:#14171A;
}

/* ===========================================================
   RESPONSIVE
=========================================================== */

@media(max-width:1100px){
    .mch-grid{ grid-template-columns:repeat(2,1fr); }
    .mch-hero h1{ font-size:42px; }
}

@media(max-width:860px){
    .mch-hero-inner{ grid-template-columns:1fr; min-height:auto; padding-top:100px; }
    .mch-hero-photo{ order:-1; padding:24px 24px 0; }
    .mch-hero-frame{ aspect-ratio:16/10; }
    .mch-hero-text{ padding:40px 24px 50px; }
    .mch-facts .mch-container{ flex-wrap:wrap; }
    .mch-fact{ min-width:45%; border-right:none; padding:18px 0; }
    .mch-catnav{ position:static; }
    .mch-section{ padding:64px 0 80px; }
    .mch-section-head{ flex-direction:column; }
}

@media(max-width:600px){
    .mch-container{ padding:0 22px; }
    .mch-hero h1{ font-size:32px; }
    .mch-grid{ grid-template-columns:1fr; }
    .mch-cta h2{ font-size:30px; }
    .mch-spec{ grid-template-columns:1fr; }
}









/* =========================
   MOBILE
========================= */

@media(max-width:1024px){

  .menu-btn{
    display:block;
    background:none;
    border:none;
    font-size:32px;
  }

  .nav-links{
    position:absolute;
    top:95px;
    right:20px;
    background:white;
    flex-direction:column;
    width:240px;
    padding:30px;
    border-radius:20px;
    display:none;
  }

  .nav-links.active{
    display:flex;
  }

  .nav-btn{
    display:none;
  }

}





/* ===========================================================
   HERO — MOBILE RESPONSIVE
=========================================================== */

@media (max-width: 768px){

    .mch-hero-inner{
        display:flex;
        flex-direction:column;
        align-items:center;
        text-align:center;
        min-height:auto;
        padding-top:74px;
        padding-bottom:40px;
    }

    /* unwrap .mch-hero-text so its children can be reordered
       alongside .mch-hero-photo */
    .mch-hero-text{
        display:contents;
    }

    .mch-hero-eyebrow{
        order:1;
        margin:0 0 18px;
    }

    .mch-hero h1{
        order:2;
        max-width:100%;
        font-size:30px;
        letter-spacing:-0.6px;
        margin-bottom:20px;
        padding:0 10px;
    }

    .mch-hero-photo{
        order:3;
        width:100%;
        padding:0;
        margin-bottom:24px;
    }

    .mch-hero-frame{
        aspect-ratio:4/3.2;
    }

    .mch-hero p{
        order:4;
        max-width:100%;
        font-size:14px;
        line-height:1.7;
        margin:0 0 26px;
        padding:0 10px;
    }

    .mch-btn{
        order:5;
        padding:12px 20px;
        font-size:13px;
    }

    /* quick facts strip */
.mch-facts .mch-container{
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:center;
    text-align:center;
}

.mch-fact{
    flex:1 1 33.33%;
    min-width:110px;
    padding:16px 10px;
    border-right:1px solid rgba(247,246,242,.1);
    border-bottom:none;
}

.mch-fact:nth-child(3n){
    border-right:none;
}

.mch-fact .mch-fact-num{
    font-size:18px;
}

.mch-fact .mch-fact-lbl{
    font-size:9.5px;
    letter-spacing:1px;
}
}





/* ===========================================================
   EQUIPMENT — RESPONSIVE
=========================================================== */

/* Tablet: 2 cards per row */
@media (max-width: 1024px){

    .mch-section{ padding:16px 0 70px; }

    .mch-grid{
        grid-template-columns:repeat(2,1fr);
        gap:26px;
    }

    .mch-section-head h2{
        font-size:36px;
    }
}

/* Mobile: 2 cards per row, compact cards */
@media (max-width: 640px){

    .mch-section{ padding:12px 0 50px; }

    .mch-section-head{
        flex-direction:column;
        gap:10px;
        margin-bottom:10px;
    }

    .mch-section-head h2{
        font-size:26px;
        margin-bottom:8px;
    }

    .mch-section-head p{
        font-size:13px;
        line-height:1.6;
        max-width:100%;
    }

    .mch-section-rule{
        margin:20px 0 26px;
    }

    .mch-grid{
        grid-template-columns:repeat(2,1fr);
        gap:12px;
    }

    .mch-card:hover{
        transform:none;
        box-shadow:none;
    }

    .mch-card-frame{
        aspect-ratio:1/1;
    }

    .mch-card-fig{
        top:8px;
        left:8px;
        font-size:8.5px;
        padding:3px 6px;
    }

    .mch-card-frame .mch-corner{
        width:12px;
        height:12px;
    }

    .mch-card-body{
        padding:12px 12px 14px;
    }

    .mch-card-body h3{
        font-size:13.5px;
        margin-bottom:5px;
        line-height:1.25;
    }

    .mch-card-body > p{
        font-size:11px;
        line-height:1.55;
        min-height:auto;
        margin-bottom:10px;
        /* clamp to 2 lines so uneven copy lengths don't break the grid rhythm */
        display:-webkit-box;
        -webkit-line-clamp:2;
        -webkit-box-orient:vertical;
        overflow:hidden;
    }

    /* specs: too cramped in 2-up cards at 2 columns, drop to 1 column */
    .mch-spec{
        grid-template-columns:1fr;
        gap:5px;
        padding-top:10px;
    }

    .mch-spec div{
        font-size:9px;
    }

    .mch-spec div::before{
        width:4px;
        height:4px;
        margin-top:4px;
    }
}

/* Very small phones: slightly tighter still */
@media (max-width: 380px){

    .mch-grid{
        gap:10px;
    }

    .mch-card-body{
        padding:10px 10px 12px;
    }

    .mch-card-body h3{
        font-size:12.5px;
    }
}





/* ===========================================================
   CTA — RESPONSIVE
=========================================================== */

@media (max-width: 768px){

    .mch-cta{
        padding:30px 0;
    }

    .mch-cta-tag{
        font-size:10px;
        letter-spacing:1.8px;
        margin-bottom:18px;
    }

    .mch-cta-tag::before,
    .mch-cta-tag::after{
        width:18px;
    }

    .mch-cta h2{
        font-size:26px;
        line-height:1.25;
        letter-spacing:-.4px;
        max-width:100%;
        padding:0 16px;
        margin-bottom:14px;
    }

    .mch-cta p{
        font-size:13px;
        line-height:1.7;
        max-width:100%;
        padding:0 20px;
        margin-bottom:26px;
    }

    .mch-cta-btn{
        padding:11px 22px;
        font-size:11px;
        letter-spacing:.6px;
    }
}

@media (max-width: 380px){

    .mch-cta{
        padding:20px 0;
    }

    .mch-cta h2{
        font-size:22px;
    }

    .mch-cta-btn{
        padding:10px 18px;
        font-size:10px;
    }
}







/* ===========================================================
   CATEGORY NAV — RESPONSIVE
=========================================================== */

@media (max-width: 768px){

    .mch-catnav .mch-container{
        gap:2px;
        overflow-x:auto;
        overflow-y:hidden;
        -webkit-overflow-scrolling:touch;
        scrollbar-width:none;   /* Firefox */
    }

    .mch-catnav .mch-container::-webkit-scrollbar{
        display:none;           /* Chrome/Safari */
    }

    .mch-catnav a{
        font-size:11px;
        letter-spacing:.6px;
        padding:14px 14px;
        white-space:nowrap;
        flex-shrink:0;
    }
}

@media (max-width: 380px){

    .mch-catnav a{
        font-size:10px;
        padding:12px 11px;
    }
}