/* ================================================================
   GREFEEMOLD CNC MACHINING — MAIN STYLESHEET
   Sections: S1 Header, S2 Hero, S3 Stats Bar, S4 Service Tabs,
             S5 Why Choose GREFEE, S6 How We Work
   Design source: Figma node 154:1516
   Font: Montserrat (Google Fonts)
   ================================================================ */

/* ----------------------------------------------------------------
   CSS DESIGN TOKENS
   ---------------------------------------------------------------- */
:root {
    /* Brand colors */
    --gm-blue:         #23397f;
    --gm-green:        #48ca02;
    --gm-white:        #ffffff;
    --gm-gray-light:   #d9d9d9;
    --gm-text-dark:    #1a1a1a;

    /* Typography */
    --gm-font:         'Montserrat', sans-serif;

    /* Layout */
    --gm-max-width:    1280px;
    --gm-header-h:     86px;
    --gm-side-pad:     39px;
}

/* 宽屏统一放宽容器（所有 section 一致） */
@media ( min-width: 1800px ) {
    :root { --gm-max-width: 1600px; }
}

/* ----------------------------------------------------------------
   BASE RESET
   ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--gm-font);
    color: var(--gm-text-dark);
    background: #fff;
}

ul  { list-style: none; }
a   { text-decoration: none; color: inherit; }
img { max-width: 100%; height: auto; display: block; }

/* Offset page content below fixed header */
.gm-elementor-canvas,
#gm-main {
    padding-top: var(--gm-header-h);
}

/* ================================================================
   S1 — HEADER / NAVIGATION
   Figma: nodes 154:1517 – 154:1527
   Height: 86px | Background: #23397f
   ================================================================ */

.gm-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 9999;
    height: var(--gm-header-h);
    background-color: var(--gm-blue);
    /* Subtle shadow on scroll (toggled via JS) */
    transition: box-shadow 0.3s;
}

.gm-header.is-scrolled {
    box-shadow: 0 2px 16px rgba(0,0,0,0.25);
}

.gm-header__inner {
    max-width: var(--gm-max-width);
    margin: 0 auto;
    padding: 0 var(--gm-side-pad);
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

/* ---- Logo ---- */
.gm-header__logo { flex-shrink: 0; }

.gm-header__logo a { display: flex; align-items: center; }

/* WordPress custom_logo img */
.gm-header__logo img,
.gm-header__logo .custom-logo {
    height: 52px;
    width: auto;
    max-width: 202px;
    object-fit: contain;
}

/* Fallback text logo */
.gm-header__logo-text {
    font-family: var(--gm-font);
    font-weight: 800;
    font-size: 22px;
    color: var(--gm-white);
    letter-spacing: 1px;
}

/* ---- Primary Navigation ---- */
.gm-header__nav { flex: 1; display: flex; justify-content: center; }

/* WordPress wp_nav_menu generates <ul class="gm-nav__list"> */
.gm-nav__list {
    display: flex;
    align-items: center;
    gap: 24px;
    list-style: none;
    margin: 0; padding: 0;
}

.gm-nav__list li a {
    font-family: var(--gm-font);
    font-size: 18px;
    font-weight: 600;        /* SemiBold for normal items */
    line-height: 30px;
    color: var(--gm-white);
    white-space: nowrap;
    transition: opacity 0.2s;
    position: relative;
}

/* Active / current page link is Bold */
.gm-nav__list li.current-menu-item > a,
.gm-nav__list li.current-menu-ancestor > a,
.gm-nav__list li.active > a {
    font-weight: 700;
}

/* Underline hover effect */
.gm-nav__list li a::after {
    content: '';
    position: absolute;
    bottom: -3px; left: 0;
    width: 0; height: 2px;
    background: var(--gm-white);
    transition: width 0.2s;
}
.gm-nav__list li a:hover::after,
.gm-nav__list li.current-menu-item > a::after { width: 100%; }

/* ---- "Request a Quote" outline button ---- */
.gm-header__cta { flex-shrink: 0; }

.gm-btn--outline {
    display: inline-block;
    border: 2px solid var(--gm-white);
    border-radius: 30px;
    padding: 14px 28px;
    min-width: 197px;
    color: var(--gm-white);
    font-family: var(--gm-font);
    font-size: 18px;
    font-weight: 700;
    line-height: 24px;
    letter-spacing: -0.3px;
    text-align: center;
    white-space: nowrap;
    transition: background-color 0.25s, color 0.25s;
}

.gm-btn--outline:hover {
    background-color: var(--gm-white);
    color: var(--gm-blue);
}

/* ---- Mobile hamburger toggle ---- */
.gm-header__toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    flex-shrink: 0;
}

.gm-header__toggle-bar {
    display: block;
    width: 26px; height: 2px;
    background-color: var(--gm-white);
    border-radius: 2px;
    transition: transform 0.3s, opacity 0.3s;
}

/* Animate toggle → X when open */
.gm-header--nav-open .gm-header__toggle-bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.gm-header--nav-open .gm-header__toggle-bar:nth-child(2) {
    opacity: 0;
}
.gm-header--nav-open .gm-header__toggle-bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}


/* ================================================================
   S2 — HERO SECTION
   Figma: nodes 154:1528 – 154:1553
   Height: 654px | Background: #ffffff
   Layout: left text column + right CNC image
   ================================================================ */

/*
 * HOW TO USE IN ELEMENTOR:
 * 1. Add a new Section → set CSS class to: gm-section-hero
 * 2. Section settings → Layout → Full Width
 * 3. Add 2 Columns (60% / 40%)
 * 4. Left column: Heading + Icon List + Button widgets
 * 5. Right column: Image widget
 * Custom CSS is applied automatically via this stylesheet.
 */

/* ----- Section wrapper ----- */
.gm-hero,
.elementor-section.gm-section-hero {
    background-color: var(--gm-white) !important;
    min-height: 654px;
    overflow: hidden;
    position: relative;
}

/* When built manually (non-Elementor page) */
.gm-hero__inner {
    max-width: var(--gm-max-width);
    margin: 0 auto;
    padding: 0 var(--gm-side-pad);
    height: 654px;
    display: flex;
    align-items: flex-start;
    position: relative;
}

/* ----- Left content column ----- */
.gm-hero__content {
    flex: 0 0 auto;
    width: 56%;
    padding-top: 132px;     /* matches Figma: title at y=132 relative to hero top */
    padding-bottom: 60px;
    position: relative;
    z-index: 1;
}

/* Elementor left column in hero */
.elementor-section.gm-section-hero
    > .elementor-container
    > .elementor-row
    > .elementor-column:first-child
    > .elementor-column-wrap,
.elementor-section.gm-section-hero
    > .elementor-container
    > .elementor-column:first-child
    > .elementor-widget-wrap {
    padding-top: 132px !important;
    padding-bottom: 60px !important;
    padding-left: var(--gm-side-pad) !important;
}

/* ----- Hero title (H1) ----- */
/*
 * ELEMENTOR: Use "Heading" widget, set HTML tag to H1.
 * Edit text directly in Elementor editor.
 */
.gm-hero__title,
.elementor-section.gm-section-hero .elementor-widget-heading h1.elementor-heading-title,
.elementor-section.gm-section-hero .elementor-widget-heading .elementor-heading-title {
    font-family: var(--gm-font) !important;
    font-weight: 800 !important;
    font-size: 70px !important;
    line-height: 1.17 !important;
    color: var(--gm-blue) !important;
    margin-bottom: 48px !important;
    max-width: 581px;
}

/* ----- Feature bullet list ----- */
/*
 * ELEMENTOR: Use "Icon List" widget.
 * Set list icon to a small filled circle, color #48ca02.
 * Each item is editable directly in Elementor.
 */
.gm-hero__features,
.elementor-section.gm-section-hero .elementor-widget-icon-list .elementor-icon-list-items {
    list-style: none !important;
    margin: 0 0 40px !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    row-gap: 9px !important;
    column-gap: 20px !important;
    max-width: 660px;
}

.gm-hero__features li,
.elementor-section.gm-section-hero .elementor-widget-icon-list .elementor-icon-list-item {
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
    font-family: var(--gm-font) !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #333 !important;
    line-height: 30px !important;
}

/* Green dot bullet (manual hero) */
.gm-hero__features li::before {
    content: '';
    display: block;
    flex-shrink: 0;
    width: 10px; height: 10px;
    border-radius: 50%;
    background-color: var(--gm-green);
}

/* Elementor Icon List icon */
.elementor-section.gm-section-hero .elementor-widget-icon-list .elementor-icon-list-icon i,
.elementor-section.gm-section-hero .elementor-widget-icon-list .elementor-icon-list-icon svg {
    width: 10px !important;
    height: 10px !important;
    color: var(--gm-green) !important;
    fill: var(--gm-green) !important;
}

/* ----- "Get a Quote" green pill button ----- */
/*
 * ELEMENTOR: Use "Button" widget.
 * Set button style type to "default", add CSS class: gm-btn--primary
 * Edit text & URL directly in Elementor editor.
 */
.gm-btn--primary,
.elementor-section.gm-section-hero .elementor-widget-button .elementor-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background-color: var(--gm-green) !important;
    border: 3px solid var(--gm-green) !important;
    border-radius: 26px !important;
    padding: 0 6px 0 19px !important;
    width: 207px !important;
    height: 52px !important;
    color: var(--gm-white) !important;
    font-family: var(--gm-font) !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    transition: opacity 0.2s !important;
    cursor: pointer;
}

.gm-btn--primary:hover,
.elementor-section.gm-section-hero .elementor-widget-button .elementor-button:hover {
    opacity: 0.88 !important;
}

/* Arrow circle on the right of button */
.gm-btn--primary .gm-btn__icon,
.elementor-section.gm-section-hero .elementor-widget-button .elementor-button .elementor-button-icon {
    width: 41px; height: 41px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.28);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-left: auto;
}

/* ----- Right image column ----- */
/*
 * ELEMENTOR: Use "Image" widget in the right column.
 * Set CSS class on the section's right column to: gm-hero__image-col
 * Replace image directly in Elementor Media Library.
 */
.gm-hero__image {
    position: absolute;
    right: var(--gm-side-pad);
    top: 80px;                  /* Figma: image starts at y=80 relative to hero */
    width: 498px; height: 498px;
    border-radius: 12px;
    overflow: hidden;
    background-color: var(--gm-gray-light);
}

.gm-hero__image img {
    width: 100%; height: 100%;
    object-fit: cover;
}

/* Elementor right column positioning */
.elementor-section.gm-section-hero .gm-hero__image-col {
    position: absolute !important;
    right: var(--gm-side-pad);
    top: 80px;
}

.elementor-section.gm-section-hero
    > .elementor-container
    > .elementor-column.gm-hero__image-col
    > .elementor-widget-wrap {
    padding: 0 !important;
}

.elementor-section.gm-section-hero .gm-hero__image-col .elementor-widget-image img {
    width: 498px !important;
    height: 498px !important;
    object-fit: cover !important;
    border-radius: 12px !important;
    display: block;
}


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

/* Tablet: 768px – 1024px */
@media (max-width: 1024px) {
    :root {
        --gm-side-pad: 32px;
    }

    /* Header: shrink nav font slightly */
    .gm-nav__list li a { font-size: 16px; }
    .gm-nav__list       { gap: 16px; }
    .gm-btn--outline    { font-size: 16px; min-width: 160px; padding: 12px 20px; }

    /* Hero: smaller title */
    .gm-hero__title,
    .elementor-section.gm-section-hero .elementor-widget-heading .elementor-heading-title {
        font-size: 52px !important;
    }

    .gm-hero__image {
        width: 380px; height: 380px;
        top: 100px;
    }
}

/* Mobile: ≤ 767px */
@media (max-width: 767px) {
    :root {
        --gm-side-pad: 20px;
    }

    /* --- Mobile Header --- */
    .gm-header__nav { display: none; }
    .gm-header__cta { display: none; }
    .gm-header__toggle { display: flex; }

    /* Slide-down mobile nav */
    .gm-header__nav.gm-nav--open {
        display: flex;
        position: fixed;
        top: var(--gm-header-h);
        left: 0; right: 0;
        background-color: var(--gm-blue);
        padding: 20px var(--gm-side-pad) 28px;
        flex-direction: column;
        z-index: 9998;
        box-shadow: 0 8px 24px rgba(0,0,0,0.3);
    }

    .gm-header__nav.gm-nav--open .gm-nav__list {
        flex-direction: column;
        align-items: flex-start;
        gap: 18px;
    }

    .gm-header__nav.gm-nav--open .gm-nav__list li a { font-size: 18px; }

    /* --- Mobile Hero --- */
    .gm-hero__inner {
        flex-direction: column;
        height: auto;
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .gm-hero__content {
        width: 100%;
        padding-top: 24px;
    }

    .gm-hero__title,
    .elementor-section.gm-section-hero .elementor-widget-heading .elementor-heading-title {
        font-size: 38px !important;
        margin-bottom: 28px !important;
    }

    .gm-hero__features,
    .elementor-section.gm-section-hero .elementor-widget-icon-list .elementor-icon-list-items {
        grid-template-columns: 1fr !important;
    }

    .gm-hero__image {
        position: relative;
        right: auto; top: auto;
        width: 100%; height: 260px;
        margin-top: 32px;
        border-radius: 12px;
    }
}


/* ================================================================
   S3 — STATS BAR
   Figma: nodes 154:1565–154:1581
   Section: white bg, 272px tall | Cards: #23397f, border-radius 20px
   ================================================================ */

/* Section total = 37 (top) + 197 (card) + 38 (bottom) = 272px, matching Figma */
.gm-stats {
    background-color: var(--gm-white);
    padding: 37px 0 38px;
}

.gm-stats__inner {
    max-width: var(--gm-max-width);
    margin: 0 auto;
    padding: 0 var(--gm-side-pad);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    align-items: stretch;
}

/* Individual stat card — FIXED 197px height (landscape 275×197 in design).
   Fixed height prevents the 96px number's line-box from stretching the card. */
.gm-stats__card {
    background-color: var(--gm-blue);
    border-radius: 20px;
    width: 100%;
    height: 190px;
    padding: 22px 24px 24px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    position: relative;
    overflow: hidden;
}

/* Label — reserves 2 lines of height so all cards' numbers start at the
   same Y position (aligns numbers across single- and double-line labels). */
.gm-stats__label {
    font-family: var(--gm-font);
    font-size: 22px;
    font-weight: 500;
    line-height: 28px;
    color: var(--gm-white);
    margin: 0;
    min-height: 56px;          /* 2 × 28px line-height */
}

/* Value — pushed to the bottom (margin-top:auto) so every card's number
   bottom-aligns; normal line-height prevents glyph clipping. */
.gm-stats__value {
    font-family: var(--gm-font);
    font-size: 72px;
    font-weight: 600;
    line-height: 1;
    color: var(--gm-white);
    margin: auto 0 0;          /* auto top margin → anchor to bottom */
    align-self: flex-start;
    white-space: nowrap;
}

/* Responsive — keep landscape proportion, scale number + height together */
@media (max-width: 1024px) {
    .gm-stats__card  { height: 168px; padding: 20px; }
    .gm-stats__value { font-size: 58px; }
    .gm-stats__label { font-size: 19px; line-height: 25px; min-height: 50px; }
}

@media (max-width: 767px) {
    .gm-stats__inner {
        grid-template-columns: repeat(2, 1fr);
    }
    .gm-stats__card  { height: 148px; padding: 16px 18px; }
    .gm-stats__value { font-size: 48px; }
    .gm-stats__label { font-size: 16px; line-height: 21px; min-height: 42px; }
}

@media (max-width: 420px) {
    .gm-stats__inner { grid-template-columns: 1fr; }
    .gm-stats__card  { height: 140px; }
}


/* ================================================================
   S4 — SERVICE TABS
   Figma: nodes 154:1554–154:1564
   Section title 64px #23397f | green active pill tabs | left text / right image
   ================================================================ */

.gm-service-tabs {
    background-color: var(--gm-white);
    padding: 60px 0 80px;
}

.gm-service-tabs__inner {
    max-width: var(--gm-max-width);
    margin: 0 auto;
    padding: 0 var(--gm-side-pad);
}

/* Section title */
.gm-service-tabs__title {
    font-family: var(--gm-font);
    font-size: 64px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--gm-blue);
    margin-bottom: 40px;
}

/* Tab nav row */
.gm-service-tabs__nav {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 40px;
}

/* Tab button — inactive */
.gm-service-tabs__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 47px;
    padding: 0 24px;
    border-radius: 26px;
    border: 2px solid var(--gm-blue);
    background: transparent;
    color: var(--gm-blue);
    font-family: var(--gm-font);
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.gm-service-tabs__btn:hover {
    background-color: var(--gm-blue);
    color: var(--gm-white);
}

/* Tab button — active */
.gm-service-tabs__btn.is-active {
    background-color: var(--gm-green);
    border-color: var(--gm-green);
    color: var(--gm-white);
}

/* Tab panel — hidden by default, shown when active */
.gm-service-tabs__panel {
    display: none;
}

.gm-service-tabs__panel.is-active {
    display: grid;
    grid-template-columns: 1fr 515px;
    gap: 40px;
    align-items: start;
}

/* Left: description text */
.gm-service-tabs__text {
    padding-top: 30px;
}

.gm-service-tabs__text p,
.gm-service-tabs__text {
    font-family: var(--gm-font);
    font-size: 20px;
    font-weight: 500;
    line-height: 40px;
    color: #000;
}

/* Right: service image */
.gm-service-tabs__image img {
    width: 515px;
    height: 565px;
    object-fit: cover;
    border-radius: 12px;
    display: block;
}

.gm-service-tabs__image-placeholder {
    width: 515px;
    height: 565px;
    background-color: var(--gm-gray-light);
    border-radius: 12px;
}

/* Responsive */
@media (max-width: 1100px) {
    .gm-service-tabs__title { font-size: 48px; }

    .gm-service-tabs__panel.is-active {
        grid-template-columns: 1fr;
    }

    .gm-service-tabs__image img,
    .gm-service-tabs__image-placeholder {
        width: 100%;
        height: 320px;
    }
}

@media (max-width: 767px) {
    .gm-service-tabs__title { font-size: 36px; }
    .gm-service-tabs__text,
    .gm-service-tabs__text p { font-size: 16px; line-height: 32px; }
}


/* ================================================================
   SHARED SECTION HEADER
   Used by S5, S6, and subsequent content sections.
   Pattern: green eyebrow → blue h2 title → optional gray description
   ================================================================ */

.gm-section-header {
    margin-bottom: 48px;
}

/* Green uppercase eyebrow (e.g. "WHY CHOOSE GREFEE") */
.gm-section-header__eyebrow {
    font-family: var(--gm-font);
    font-size: 24px;
    font-weight: 700;
    line-height: normal;
    color: var(--gm-green);
    text-transform: uppercase;
    letter-spacing: 1.05px;
    margin: 0 0 12px;
    white-space: nowrap;
}

/* Large blue section title */
.gm-section-header__title {
    font-family: var(--gm-font);
    font-size: 64px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--gm-blue);
    margin: 0 0 20px;
}

/* Optional body-copy description */
.gm-section-header__desc {
    font-family: var(--gm-font);
    font-size: 20px;
    font-weight: 500;
    line-height: 40px;
    color: #555e7a;
    max-width: 720px;
    margin: 0;
}

@media (max-width: 1024px) {
    .gm-section-header__title { font-size: 48px; }
    .gm-section-header__eyebrow { font-size: 20px; }
}

@media (max-width: 767px) {
    .gm-section-header__title { font-size: 36px; }
    .gm-section-header__eyebrow { font-size: 17px; }
    .gm-section-header__desc { font-size: 16px; line-height: 32px; }
}


/* ================================================================
   S5 — WHY CHOOSE GREFEE / COMPETITIVE ADVANTAGES
   Figma: nodes 176:94–176:153
   Background: #ffffff | Cards: #f7f9ff bg, subtle blue border
   Layout: 3-column × 2-row card grid
   ================================================================ */

.gm-advantages {
    background-color: var(--gm-white);
    padding: 80px 0 90px;
}

.gm-advantages__inner {
    max-width: var(--gm-max-width);
    margin: 0 auto;
    padding: 0 var(--gm-side-pad);
}

/* 3 × 2 responsive grid */
.gm-advantages__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

/* Individual advantage card */
.gm-advantages__card {
    background-color: #f7f9ff;
    border: 0.672px solid #dde2f0;
    border-radius: 11px;
    padding: 32px 28px 28px;
    display: flex;
    flex-direction: column;
}

/* Large green metric — e.g. "21+", "24H", "±0.002mm" */
.gm-advantages__metric {
    font-family: var(--gm-font);
    font-size: 48px;
    font-weight: 800;
    line-height: normal;
    color: var(--gm-green);
    margin: 0 0 16px;
}

/* Bold blue card title */
.gm-advantages__card-title {
    font-family: var(--gm-font);
    font-size: 14px;
    font-weight: 700;
    line-height: normal;
    color: var(--gm-blue);
    margin: 0 0 10px;
}

/* Gray description text */
.gm-advantages__card-desc {
    font-family: var(--gm-font);
    font-size: 12px;
    font-weight: 500;
    line-height: 20px;
    color: #555e7a;
    margin: 0;
}

/* Responsive */
@media (max-width: 1024px) {
    .gm-advantages__grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
    .gm-advantages__metric { font-size: 40px; }
}

@media (max-width: 767px) {
    .gm-advantages { padding: 60px 0 70px; }
    .gm-advantages__grid { grid-template-columns: 1fr; gap: 16px; }
    .gm-advantages__metric { font-size: 36px; }
}


/* ================================================================
   S6 — HOW WE WORK / CNC MACHINING WORKFLOW
   Figma: node 181:261
   Background: #f5f7fc | Cards: white bg, blue-tinted shadow
   Layout: 3-column × 2-row card grid; left-aligned step number
   ================================================================ */

.gm-workflow {
    background-color: #f5f7fc;
    padding: 80px 0 90px;
}

.gm-workflow__inner {
    max-width: var(--gm-max-width);
    margin: 0 auto;
    padding: 0 var(--gm-side-pad);
}

/* 3 × 2 grid — mirrors S5 layout but white cards */
.gm-workflow__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 0;
}

/* Individual workflow step card */
.gm-workflow__card {
    background-color: var(--gm-white);
    border-radius: 11px;
    box-shadow: 0 1.344px 3.36px rgba(35, 57, 127, 0.06);
    padding: 24px 20px 28px 20px;
    display: flex;
    flex-direction: column;
}

/* Step number — large green ordinal e.g. "01" */
.gm-workflow__number {
    font-family: var(--gm-font);
    font-size: 55px;
    font-weight: 900;
    line-height: 1;
    color: var(--gm-green);
    letter-spacing: -0.645px;
    margin: 0 0 14px;
}

/* Step title */
.gm-workflow__step-title {
    font-family: var(--gm-font);
    font-size: 14px;
    font-weight: 700;
    line-height: normal;
    color: var(--gm-blue);
    margin: 0 0 10px;
}

/* Step description */
.gm-workflow__step-desc {
    font-family: var(--gm-font);
    font-size: 12px;
    font-weight: 500;
    line-height: 20px;
    color: #555e7a;
    margin: 0;
}

/* Responsive */
@media (max-width: 1024px) {
    .gm-workflow__grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
    .gm-workflow__number { font-size: 44px; }
}

@media (max-width: 767px) {
    .gm-workflow { padding: 60px 0 70px; }
    .gm-workflow__grid { grid-template-columns: 1fr; gap: 16px; }
    .gm-workflow__number { font-size: 38px; }
}


/* ================================================================
   S7 — CNC MACHINING RESOURCE GALLERY
   Figma: nodes 206:485–206:570
   Background: #ffffff | 3-column grid with thin dividers
   Each card: 32px SemiBold title + image + "Get a Quote →" link
   ================================================================ */

.gm-resource-gallery {
    background-color: var(--gm-white);
    padding: 80px 0 90px;
}

.gm-resource-gallery__inner {
    max-width: var(--gm-max-width);
    margin: 0 auto;
    padding: 0 var(--gm-side-pad);
}

/* Section title */
.gm-resource-gallery__title {
    font-family: var(--gm-font);
    font-size: 64px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--gm-blue);
    margin: 0 0 48px;
}

/* 3-column grid with dividers between columns */
.gm-resource-gallery__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* Use outline border on whole grid, inner borders via column classes */
    border: 1px solid #719bd1;
    border-radius: 4px;
    overflow: hidden;
}

/* Individual card */
.gm-resource-gallery__card {
    padding: 28px 28px 32px;
    display: flex;
    flex-direction: column;
    border-right: 1px solid #719bd1;
    border-bottom: 1px solid #719bd1;
    background: var(--gm-white);
}

/* Remove right border on last column */
.gm-resource-gallery__card:nth-child(3n) {
    border-right: none;
}

/* Remove bottom border on last row */
.gm-resource-gallery__card:nth-last-child(-n+3):nth-child(3n+1),
.gm-resource-gallery__card:nth-last-child(-n+3):nth-child(3n+2),
.gm-resource-gallery__card:nth-last-child(-n+3):nth-child(3n) {
    border-bottom: none;
}

/* Card title — reserves 2 lines so every card's image starts at the same
   Y position (keeps image tops aligned across single- and double-line titles). */
.gm-resource-gallery__card-title {
    font-family: var(--gm-font);
    font-size: 24px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--gm-blue);
    margin: 0 0 28px;
    min-height: 60px;          /* 2 × 30px line-height */
}

/* Card image area */
.gm-resource-gallery__card-image {
    flex: 1;
    margin-bottom: 20px;
}

.gm-resource-gallery__card-image img {
    width: 100%;
    height: 240px;
    object-fit: cover;
    border-radius: 10px;
    display: block;
}

.gm-resource-gallery__img-placeholder {
    width: 100%;
    height: 240px;
    background-color: #e8ecf5;
    border-radius: 10px;
}

/* "Get a Quote →" link */
.gm-resource-gallery__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--gm-font);
    font-size: 18px;
    font-weight: 700;
    color: var(--gm-blue);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: opacity 0.2s;
}

.gm-resource-gallery__link:hover { opacity: 0.7; }

.gm-resource-gallery__link-icon {
    flex-shrink: 0;
    width: 18px; height: 18px;
    stroke: currentColor;
}

/* Responsive */
@media (max-width: 1024px) {
    .gm-resource-gallery__title { font-size: 48px; }
    .gm-resource-gallery__card-title { font-size: 20px; min-height: 50px; }
}

@media (max-width: 767px) {
    .gm-resource-gallery { padding: 60px 0; }
    .gm-resource-gallery__title { font-size: 36px; margin-bottom: 32px; }
    .gm-resource-gallery__grid { grid-template-columns: 1fr; }
    .gm-resource-gallery__card { border-right: none; }
    .gm-resource-gallery__card:nth-last-child(1) { border-bottom: none; }
    .gm-resource-gallery__card-title { min-height: 0; }
}


/* ================================================================
   S8 — ABOUT GREFEE'S CNC MACHINING WORKSHOP
   Figma: nodes 206:575–206:642
   Background: #f7f9ff | centered 64px title + body text
   Large workshop photo | 3×2 stats card grid (same style as S5)
   ================================================================ */

.gm-workshop {
    background-color: #f7f9ff;
    padding: 80px 0 90px;
}

.gm-workshop__inner {
    max-width: var(--gm-max-width);
    margin: 0 auto;
    padding: 0 var(--gm-side-pad);
}

/* Centered section title */
.gm-workshop__title {
    font-family: var(--gm-font);
    font-size: 64px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--gm-blue);
    text-align: center;
    margin: 0 0 28px;
}

/* Centered description paragraphs */
.gm-workshop__desc {
    max-width: 960px;
    margin: 0 auto 48px;
    text-align: center;
}

.gm-workshop__desc p {
    font-family: var(--gm-font);
    font-size: 16px;
    font-weight: 400;
    line-height: 25px;
    color: #383838;
    margin: 0 0 12px;
}

.gm-workshop__desc p:last-child { margin-bottom: 0; }

/* Workshop photo */
.gm-workshop__photo {
    margin-bottom: 40px;
    border-radius: 12px;
    overflow: hidden;
}

.gm-workshop__photo img {
    width: 100%;
    height: 420px;
    object-fit: cover;
    display: block;
}

.gm-workshop__photo-placeholder {
    width: 100%;
    height: 420px;
    background-color: #d9dfe8;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--gm-font);
    font-size: 18px;
    color: #8090a0;
}

/* 3×2 stats card grid — same visual as S5 advantage cards */
.gm-workshop__stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

/* Stat card */
.gm-workshop__stat-card {
    background-color: #ffffff;
    border: 0.672px solid #719bd1;
    border-radius: 11px;
    padding: 32px 28px 28px;
    display: flex;
    flex-direction: column;
}

/* Large green metric */
.gm-workshop__stat-metric {
    font-family: var(--gm-font);
    font-size: 48px;
    font-weight: 800;
    line-height: normal;
    color: var(--gm-green);
    margin: 0 0 15px;
    white-space: nowrap;
}

/* Bold blue stat title */
.gm-workshop__stat-title {
    font-family: var(--gm-font);
    font-size: 14px;
    font-weight: 700;
    line-height: normal;
    color: var(--gm-blue);
    margin: 0 0 10px;
}

/* Gray description */
.gm-workshop__stat-desc {
    font-family: var(--gm-font);
    font-size: 12px;
    font-weight: 500;
    line-height: 20px;
    color: #555e7a;
    margin: 0;
}

/* Responsive */
@media (max-width: 1024px) {
    .gm-workshop__title { font-size: 48px; }
    .gm-workshop__stats-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
    .gm-workshop__stat-metric { font-size: 40px; }
}

@media (max-width: 767px) {
    .gm-workshop { padding: 60px 0 70px; }
    .gm-workshop__title { font-size: 34px; }
    .gm-workshop__photo img,
    .gm-workshop__photo-placeholder { height: 240px; }
    .gm-workshop__stats-grid { grid-template-columns: 1fr; gap: 16px; }
    .gm-workshop__stat-metric { font-size: 36px; }
}


/* ================================================================
   S9 — SUBMIT PROJECT CTA BANNER
   Figma: node 206:644
   Design: full-width #23397f bg | centered 64px white title
           green pill button (207×52px, rounded 26px) + circle arrow icon
   ================================================================ */

.gm-submit-cta {
    background-color: var(--gm-blue);
    padding: 55px var(--gm-side-pad);
}

.gm-submit-cta__inner {
    max-width: var(--gm-max-width);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
}

/* "Submit your project?" — large white heading */
.gm-submit-cta__heading {
    font-family: var(--gm-font);
    font-size: 64px;
    font-weight: 600;
    line-height: 1;
    color: var(--gm-white);
    text-align: center;
    margin: 0;
}

/* Green CTA button — matches Hero "Get a Quote" pill style */
.gm-submit-cta__btn {
    display: inline-flex;
    align-items: center;
    gap: 0;
    justify-content: space-between;
    background-color: var(--gm-green);
    border-radius: 26px;
    padding: 0 6px 0 22px;
    height: 52px;
    min-width: 207px;
    color: var(--gm-white);
    text-decoration: none;
    transition: opacity 0.2s;
}

.gm-submit-cta__btn:hover { opacity: 0.88; }

.gm-submit-cta__btn-text {
    font-family: var(--gm-font);
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

/* Circle arrow icon */
.gm-submit-cta__btn-icon {
    width: 41px;
    height: 41px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.28);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-left: 12px;
}

.gm-submit-cta__btn-icon svg {
    width: 20px;
    height: 20px;
    stroke: var(--gm-white);
}

/* Responsive */
@media (max-width: 1024px) {
    .gm-submit-cta__heading { font-size: 48px; }
}

@media (max-width: 767px) {
    .gm-submit-cta { padding: 48px var(--gm-side-pad); }
    .gm-submit-cta__heading { font-size: 36px; }
}


/* ================================================================
   S10 — FROM PROTOTYPE TO PRODUCTION
   Figma: nodes 206:654–206:679
   Design: white bg | left-right 50/50 split
   LEFT: large portrait image, rounded 20px
   RIGHT: green eyebrow → 64px blue title → 3 feature items
          Feature item: 32px SemiBold blue title + 18px gray desc
          Thin divider (#dde2f0) between items
   ================================================================ */

.gm-prototype {
    background-color: var(--gm-white);
    padding: 80px 0 90px;
}

.gm-prototype__inner {
    max-width: var(--gm-max-width);
    margin: 0 auto;
    padding: 0 var(--gm-side-pad);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
}

/* Left: image */
.gm-prototype__image {
    align-self: stretch;
}

.gm-prototype__image img {
    width: 100%;
    height: 100%;
    min-height: 480px;
    object-fit: cover;
    border-radius: 20px;
    display: block;
}

.gm-prototype__img-placeholder {
    width: 100%;
    min-height: 480px;
    background-color: #d9d9d9;
    border-radius: 20px;
}

/* Right: text content */
.gm-prototype__content {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Modifier to remove bottom margin from section header when used inside prototype */
.gm-section-header--no-mb {
    margin-bottom: 32px;
}

/* Feature items list */
.gm-prototype__features {
    display: flex;
    flex-direction: column;
}

/* Individual feature item */
.gm-prototype__feature {
    padding: 24px 0;
    border-bottom: 1px solid #dde2f0;
}

.gm-prototype__feature:first-child {
    border-top: 1px solid #dde2f0;
}

/* Feature title — 32px SemiBold blue */
.gm-prototype__feat-title {
    font-family: var(--gm-font);
    font-size: 32px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--gm-blue);
    margin: 0 0 12px;
}

/* Feature description — 18px Medium dark gray */
.gm-prototype__feat-desc {
    font-family: var(--gm-font);
    font-size: 18px;
    font-weight: 500;
    line-height: 25px;
    color: #383838;
    margin: 0;
}

/* Responsive */
@media (max-width: 1024px) {
    .gm-prototype__inner { gap: 40px; }
    .gm-prototype__feat-title { font-size: 26px; }
    .gm-prototype__feat-desc { font-size: 16px; }
}

@media (max-width: 767px) {
    .gm-prototype { padding: 60px 0; }
    .gm-prototype__inner {
        grid-template-columns: 1fr;
        gap: 36px;
    }
    .gm-prototype__image img,
    .gm-prototype__img-placeholder {
        min-height: 280px;
        height: 280px;
    }
    .gm-prototype__feat-title { font-size: 22px; }
}


/* ================================================================
   S11 — TOLERANCE & SPECIFICATIONS
   Figma: nodes 181:315–181:367  (corrected from ~0.46× scaled design)
   Design: #f5f7fc bg | left-right split
   LEFT:  green eyebrow → 48px ExtraBold title → description
   RIGHT: specs table — green header, alternating rows, rounded, shadow
          3-col header; rows 4-6 merge last 2 columns (colspan=2)
   ================================================================ */

.gm-tolerance {
    background-color: #f5f7fc;
    padding: 80px 0 90px;
}

.gm-tolerance__inner {
    max-width: var(--gm-max-width);
    margin: 0 auto;
    padding: 0 var(--gm-side-pad);
    display: grid;
    grid-template-columns: 1fr 1.6fr;
    gap: 60px;
    align-items: start;
}

/* Left column: header text */
.gm-tolerance__header {
    padding-top: 8px;
}

.gm-tolerance__title {
    font-family: var(--gm-font);
    font-size: 48px;
    font-weight: 800;
    line-height: 1.1;
    color: var(--gm-blue);
    margin: 0 0 20px;
}

.gm-tolerance__desc {
    font-family: var(--gm-font);
    font-size: 16px;
    font-weight: 500;
    line-height: 26px;
    color: #555e7a;
    margin: 0;
    max-width: 380px;
}

/* Right column: table wrapper */
.gm-tolerance__table-wrap {
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2.688px 13.438px rgba(35, 57, 127, 0.10);
}

/* The table itself */
.gm-tolerance__table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--gm-font);
    background: var(--gm-white);
}

/* Header row — green background */
.gm-tolerance__table thead tr th {
    background-color: var(--gm-green);
    color: var(--gm-white);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 14px 16px;
    text-align: left;
}

/* Body rows */
.gm-tolerance__table tbody td {
    font-size: 14px;
    font-weight: 500;
    color: #333;
    padding: 14px 16px;
    border-bottom: 1px solid #dde2f0;
    vertical-align: middle;
}

/* Remove bottom border from last row */
.gm-tolerance__table tbody tr:last-child td {
    border-bottom: none;
}

/* Alternating row — slightly tinted background */
.gm-tolerance__tr--alt td {
    background-color: #f9fafd;
}

/* Responsive */
@media (max-width: 1024px) {
    .gm-tolerance__inner { grid-template-columns: 1fr; gap: 36px; }
    .gm-tolerance__title { font-size: 38px; }
    .gm-tolerance__desc { max-width: 100%; }
}

@media (max-width: 767px) {
    .gm-tolerance { padding: 60px 0; }
    .gm-tolerance__title { font-size: 30px; }
    .gm-tolerance__table thead tr th,
    .gm-tolerance__table tbody td { font-size: 12px; padding: 10px 12px; }
}


/* ================================================================
   S12 — SURFACE FINISHES / POST-MACHINING OPTIONS
   Figma: nodes 181:368–181:403  (corrected from ~0.46× scaled design)
   Design: white bg | green eyebrow → 48px blue title
           2×3 card grid: white bg, #dde2f0 border, rounded 8px
           Each card: green bold name (18px) + gray desc (13px)
   ================================================================ */

.gm-surface-finishes {
    background-color: var(--gm-white);
    padding: 80px 0 90px;
}

.gm-surface-finishes__inner {
    max-width: var(--gm-max-width);
    margin: 0 auto;
    padding: 0 var(--gm-side-pad);
}

/* Override shared section header title size for this section */
.gm-surface-finishes .gm-section-header__title {
    font-size: 48px;
}

/* 2-column × 3-row grid */
.gm-surface-finishes__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

/* Individual finish card — apply Skill 1: min-height on name
   so all descriptions start at the same Y position */
.gm-surface-finishes__card {
    background-color: var(--gm-white);
    border: 1px solid #dde2f0;
    border-radius: 8px;
    padding: 24px 24px 24px;
    display: flex;
    flex-direction: column;
}

/* Finish name — green, bold, 18px
   min-height reserves 1 line so all descs start aligned */
.gm-surface-finishes__name {
    font-family: var(--gm-font);
    font-size: 18px;
    font-weight: 700;
    line-height: 26px;
    color: var(--gm-green);
    margin: 0 0 10px;
    min-height: 26px;   /* 1 × 26px line-height (Skill 1) */
}

/* Description text */
.gm-surface-finishes__desc {
    font-family: var(--gm-font);
    font-size: 13px;
    font-weight: 500;
    line-height: 20px;
    color: #555e7a;
    margin: 0;
}

/* Responsive */
@media (max-width: 1024px) {
    .gm-surface-finishes .gm-section-header__title { font-size: 38px; }
}

@media (max-width: 767px) {
    .gm-surface-finishes { padding: 60px 0; }
    .gm-surface-finishes__grid { grid-template-columns: 1fr; }
    .gm-surface-finishes .gm-section-header__title { font-size: 30px; }
    .gm-surface-finishes__name { min-height: 0; }
}


/* ================================================================
   S13 — QUALITY ASSURANCE
   Figma: nodes 247:782–247:797
   Design: white bg | centered | 40px blue title | 3 cert cards in a row
   Cert card: #f5f7fc bg, rounded 12px, badge image + green name + gray desc
   ================================================================ */

.gm-quality {
    background-color: var(--gm-white);
    padding: 80px 0 90px;
}

.gm-quality__inner {
    max-width: var(--gm-max-width);
    margin: 0 auto;
    padding: 0 var(--gm-side-pad);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 48px;
}

/* Section title */
.gm-quality__title {
    font-family: var(--gm-font);
    font-size: 40px;
    font-weight: 800;
    line-height: normal;
    color: var(--gm-blue);
    text-align: center;
    margin: 0;
}

/* Description text */
.gm-quality__desc {
    font-family: var(--gm-font);
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
    color: #666;
    text-align: center;
    max-width: 800px;
    margin: -24px 0 0; /* reduce gap from 48px set by flex gap */
}

/* Certifications row */
.gm-quality__certs {
    display: flex;
    gap: 48px;
    justify-content: center;
    flex-wrap: wrap;
}

/* Individual cert card */
.gm-quality__cert-card {
    background-color: #f5f7fc;
    border-radius: 12px;
    padding: 32px;
    width: 340px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

/* Badge image container */
.gm-quality__badge {
    width: 120px;
    height: 160px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
}

.gm-quality__badge img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.gm-quality__badge-placeholder {
    width: 100%;
    height: 100%;
    background-color: #e8ecf8;
    border-radius: 8px;
}

/* Cert name — green ExtraBold */
.gm-quality__cert-name {
    font-family: var(--gm-font);
    font-size: 24px;
    font-weight: 800;
    line-height: normal;
    color: var(--gm-green);
    text-align: center;
    margin: 0;
}

/* Cert description */
.gm-quality__cert-desc {
    font-family: var(--gm-font);
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    color: #666;
    text-align: center;
    max-width: 276px;
    margin: 0;
}

/* Responsive */
@media (max-width: 1100px) {
    .gm-quality__certs { gap: 24px; }
    .gm-quality__cert-card { width: 280px; padding: 24px; }
}

@media (max-width: 767px) {
    .gm-quality { padding: 60px 0; }
    .gm-quality__title { font-size: 32px; }
    .gm-quality__certs { flex-direction: column; align-items: center; gap: 20px; }
    .gm-quality__cert-card { width: 100%; max-width: 340px; }
}


/* ================================================================
   S14 — INDUSTRIES SERVED
   Figma: nodes 247:799–247:826
   Design: dark-blue bg (default #23397f) | centered layout
   Section bg, title, subtitle, card name, card desc colors are all
   driven by CSS custom properties set via inline style from PHP.
   This allows full Elementor COLOR-picker control per-instance.

   CSS custom properties used:
     --gm-ind-bg             section background
     --gm-ind-title          section title color
     --gm-ind-subtitle       subtitle color
     --gm-ind-card-name      card industry name color
     --gm-ind-card-desc      card description color
     --gm-ind-card-bg        card background color
     --gm-ind-card-border    card border color
   ================================================================ */

.gm-industries {
    background-color: var(--gm-ind-bg, #23397f);
    padding: 80px 0 90px;
}

.gm-industries__inner {
    max-width: var(--gm-max-width);
    margin: 0 auto;
    padding: 0 var(--gm-side-pad);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
}

/* Section title */
.gm-industries__title {
    font-family: var(--gm-font);
    font-size: 40px;
    font-weight: 800;
    line-height: normal;
    color: var(--gm-ind-title, #ffffff);
    text-align: center;
    margin: 0;
}

/* Subtitle */
.gm-industries__subtitle {
    font-family: var(--gm-font);
    font-size: 16px;
    font-weight: 400;
    line-height: normal;
    color: var(--gm-ind-subtitle, rgba(255,255,255,0.75));
    text-align: center;
    margin: -20px 0 0;
}

/* 6-column industry grid */
.gm-industries__grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 20px;
    width: 100%;
}

/* Individual industry card */
.gm-industries__card {
    background-color: var(--gm-ind-card-bg, rgba(255,255,255,0.08));
    border: 1px solid var(--gm-ind-card-border, rgba(255,255,255,0.20));
    border-radius: 12px;
    padding: 24px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Card image area */
.gm-industries__card-img {
    width: 100%;
    aspect-ratio: 7 / 6;   /* mirrors Figma 140×120 ratio */
    border-radius: 8px;
    overflow: hidden;
    background-color: rgba(255,255,255,0.10);
    flex-shrink: 0;
}

.gm-industries__card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.gm-industries__img-placeholder {
    width: 100%;
    height: 100%;
    background-color: rgba(255,255,255,0.10);
    border-radius: 8px;
}

/* Card industry name — Bold 16px, color controlled via CSS var */
.gm-industries__card-name {
    font-family: var(--gm-font);
    font-size: 16px;
    font-weight: 700;
    line-height: normal;
    color: var(--gm-ind-card-name, #ffffff);
    margin: 0;
}

/* Card description — 13px, color controlled via CSS var */
.gm-industries__card-desc {
    font-family: var(--gm-font);
    font-size: 13px;
    font-weight: 400;
    line-height: 20px;
    color: var(--gm-ind-card-desc, rgba(255,255,255,0.70));
    margin: 0;
}

/* Responsive */
@media (max-width: 1200px) {
    .gm-industries__grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 767px) {
    .gm-industries { padding: 60px 0; }
    .gm-industries__title { font-size: 32px; }
    .gm-industries__grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
}

@media (max-width: 480px) {
    .gm-industries__grid { grid-template-columns: 1fr; }
}

/* S15 — Services Feature Cards → 已拆分至 assets/css/gm-services-cards.css，按需加载 */

/* ============================================================
   S16 — Recent Blogs
   ============================================================ */
.gm-recent-blogs {
    background: #ffffff;
    padding: 80px 0 100px;
}

.gm-recent-blogs__inner {
    max-width: var(--gm-max-width);
    margin: 0 auto;
    padding: 0 var(--gm-side-pad);
}

.gm-recent-blogs__header {
    margin-bottom: 40px;
}

.gm-recent-blogs__title {
    font-family: var(--gm-font);
    font-size: 48px;
    font-weight: 800;
    line-height: 60px;
    color: #012f73;
    margin: 0 0 16px;
}

.gm-recent-blogs__subtitle {
    font-family: var(--gm-font);
    font-size: 16px;
    font-weight: 600;
    line-height: 30px;
    color: #043580;
    margin: 0;
}

.gm-recent-blogs__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.gm-recent-blogs__card {
    background: #edfae6;
    border-radius: 20px;
    box-shadow: 0 4px 10px rgba(157, 157, 157, 0.25);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.gm-recent-blogs__card-img {
    width: 100%;
    aspect-ratio: 392 / 284;
    background: #ebebeb;
    border-radius: 20px;
    overflow: hidden;
    flex-shrink: 0;
}

.gm-recent-blogs__card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.gm-recent-blogs__card-body {
    padding: 24px 28px 28px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex: 1;
}

.gm-recent-blogs__card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.gm-recent-blogs__card-date {
    font-family: var(--gm-font);
    font-size: 16px;
    font-weight: 700;
    line-height: 30px;
    color: #000000;
}

.gm-recent-blogs__card-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    padding: 0 20px;
    border: 1px solid #48ca02;
    border-radius: 20px;
    font-family: var(--gm-font);
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    color: #48ca02;
    white-space: nowrap;
}

.gm-recent-blogs__card-title {
    font-family: var(--gm-font);
    font-size: 20px;
    font-weight: 600;
    line-height: 30px;
    color: #000000;
    margin: 0;
    min-height: 60px;
}

.gm-recent-blogs__card-link {
    font-family: var(--gm-font);
    font-size: 18px;
    font-weight: 700;
    line-height: 20px;
    color: #48ca02;
    text-decoration: underline;
    text-underline-offset: 3px;
    display: inline-block;
}

.gm-recent-blogs__card-link:hover {
    color: #3aaa00;
}

@media (max-width: 1024px) {
    .gm-recent-blogs__grid { grid-template-columns: repeat(2, 1fr); }
    .gm-recent-blogs__title { font-size: 36px; line-height: 44px; }
}

@media (max-width: 767px) {
    .gm-recent-blogs { padding: 60px 0 70px; }
    .gm-recent-blogs__grid { grid-template-columns: 1fr; gap: 18px; }
    .gm-recent-blogs__title { font-size: 28px; line-height: 36px; }
    .gm-recent-blogs__card-title { min-height: 0; }
}

/* =========================================================
   Quality Certifications — 证书照片展示
   ========================================================= */
.gm-quality-certs {
    background: #fff;
    padding: 80px 0 90px;
}

.gm-quality-certs__inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 clamp(20px, 3vw, 80px);
    text-align: center;
}

.gm-quality-certs__title {
    font-family: var(--gm-font);
    font-size: 40px;
    font-weight: 800;
    color: #23397f;
    margin: 0 0 48px;
    line-height: 1.2;
}

.gm-quality-certs__grid {
    display: flex;
    gap: 32px;
    justify-content: center;
    flex-wrap: wrap;
}

.gm-quality-certs__card {
    flex: 1 1 280px;
    max-width: 360px;
    border: 3px solid #48ca02;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}

.gm-quality-certs__img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}

.gm-quality-certs__placeholder {
    width: 100%;
    aspect-ratio: 3 / 4;
    background: #f0f4f0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
    font-family: var(--gm-font);
    font-size: 14px;
    padding: 16px;
}

@media (max-width: 767px) {
    .gm-quality-certs { padding: 60px 0 70px; }
    .gm-quality-certs__title { font-size: 28px; margin-bottom: 32px; }
    .gm-quality-certs__card { flex: 1 1 100%; max-width: 100%; }
}

@media (min-width: 1600px) {
    .gm-quality-certs__inner { max-width: 88vw; }
}

/* =========================================================
   S20 — What is CNC Machining?
   ========================================================= */
.gm-cnc-intro {
    background-color: #f5f7fc;
    padding: 0 0 80px;
    margin-top: 156px;
    overflow: visible;
}

.gm-cnc-intro__inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 clamp(20px, 3vw, 80px);
    display: flex;
    align-items: center;
    gap: 60px;
}

/* ── 左侧图片（上半悬浮出 section 顶部）── */
.gm-cnc-intro__left {
    flex: 0 0 auto;
    width: 45%;
    margin-top: -156px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gm-cnc-intro__img-wrap {
    transform: rotate(-6.84deg);
    border-radius: 4px;
    overflow: hidden;
    max-width: 100%;
}

.gm-cnc-intro__img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}

.gm-cnc-intro__img-placeholder {
    width: 500px;
    height: 400px;
    background: #dde5f0;
    border-radius: 4px;
    transform: rotate(-6.84deg);
}

/* ── 右侧内容 ── */
.gm-cnc-intro__right {
    flex: 1;
    min-width: 0;
}

.gm-cnc-intro__title {
    font-family: var(--gm-font);
    font-size: 42px;
    font-weight: 800;
    line-height: 60px;
    color: #23397f;
    margin: 0 0 24px;
}

.gm-cnc-intro__desc {
    font-family: var(--gm-font);
    font-size: 16px;
    font-weight: 500;
    line-height: 25px;
    color: #000;
    margin: 0 0 20px;
}

.gm-cnc-intro__desc:last-of-type {
    margin-bottom: 36px;
}

/* ── 按钮 ── */
.gm-cnc-intro__btn {
    display: inline-flex;
    align-items: center;
    gap: 0;
    background: #48ca02;
    border: 3px solid #48ca02;
    border-radius: 26px;
    padding: 13px 20px 13px 24px;
    text-decoration: none;
    transition: background 0.2s, border-color 0.2s;
}

.gm-cnc-intro__btn:hover,
.gm-cnc-intro__btn:focus,
.gm-cnc-intro__btn span {
    text-decoration: none;
}

.gm-cnc-intro__btn:hover {
    background: #3aaa00;
    border-color: #3aaa00;
}

.gm-cnc-intro__btn span:first-child {
    font-family: var(--gm-font);
    font-size: 18px;
    font-weight: 700;
    line-height: 20px;
    color: #fff;
    white-space: nowrap;
}

.gm-cnc-intro__btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: rgba(255,255,255,0.25);
    border-radius: 50%;
    margin-left: 12px;
    color: #fff;
    flex-shrink: 0;
}

.gm-cnc-intro__btn-icon svg {
    width: 18px;
    height: 18px;
}

/* ── 响应式 ── */
@media (max-width: 1024px) {
    .gm-cnc-intro__inner { gap: 40px; }
    .gm-cnc-intro__left  { width: 42%; }
    .gm-cnc-intro__title { font-size: 34px; line-height: 48px; }
}

@media (min-width: 768px) and (max-width: 1279px) {
    .gm-cnc-intro__title { font-size: 32px; line-height: 44px; }
}

@media (max-width: 767px) {
    .gm-cnc-intro { padding: 60px 0 70px; margin-top: 0; }
    .gm-cnc-intro__inner {
        flex-direction: column;
        gap: 40px;
    }
    .gm-cnc-intro__left  { width: 100%; margin-top: 0; }
    .gm-cnc-intro__img-placeholder { width: 100%; height: 260px; }
    .gm-cnc-intro__title { font-size: 28px; line-height: 38px; }
    .gm-cnc-intro__desc  { font-size: 15px; }
}

@media (min-width: 1600px) {
    .gm-cnc-intro__inner { max-width: 88vw; }
}

/* ================================================================
   标题防主题覆盖（客户站 Astra/Elementor 全局 heading 字号会压小标题）
   统一锁定各 Section 标题为 Figma 字号，避免被外部主题覆盖。
   仅强制 font-size，保留原有 line-height / color / 间距。
   ================================================================ */

/* ── 桌面默认（Figma 基准 1280px） ── */
.gm-service-tabs__title,
.gm-section-header__title,
.gm-resource-gallery__title,
.gm-workshop__title,
.gm-submit-cta__heading { font-size: 64px !important; }

.gm-surface-finishes .gm-section-header__title,
.gm-tolerance__title,
.gm-recent-blogs__title { font-size: 48px !important; }

.gm-cnc-intro__title { font-size: 42px !important; }

.gm-quality__title,
.gm-industries__title,
.gm-quality-certs__title { font-size: 40px !important; }

/* 卡片/小标题 */
.gm-resource-gallery__card-title { font-size: 24px !important; }
.gm-recent-blogs__card-title { font-size: 20px !important; }
.gm-surface-finishes__name { font-size: 18px !important; }
.gm-advantages__card-title { font-size: 14px !important; }

/* 标题颜色 + 加粗锁定（防客户站主题把标题压成灰色/细字） */
.gm-service-tabs__title,
.gm-section-header__title,
.gm-resource-gallery__title,
.gm-workshop__title,
.gm-tolerance__title,
.gm-quality__title,
.gm-quality-certs__title,
.gm-cnc-intro__title { color: #23397f !important; font-weight: 700 !important; }
.gm-recent-blogs__title { color: #012f73 !important; font-weight: 800 !important; }
.gm-submit-cta__heading { color: #ffffff !important; font-weight: 600 !important; }

/* 卡片/小标题加粗 */
.gm-resource-gallery__card-title { font-weight: 600 !important; }
.gm-recent-blogs__card-title { font-weight: 600 !important; }
.gm-surface-finishes__name { font-weight: 700 !important; }
.gm-advantages__card-title { font-weight: 700 !important; }

/* ── 平板 (≤1279px) ── */
@media (max-width: 1279px) {
    .gm-service-tabs__title,
    .gm-section-header__title,
    .gm-resource-gallery__title,
    .gm-workshop__title,
    .gm-submit-cta__heading { font-size: 48px !important; }

    .gm-surface-finishes .gm-section-header__title,
    .gm-tolerance__title { font-size: 38px !important; }

    .gm-recent-blogs__title { font-size: 36px !important; }
    .gm-cnc-intro__title { font-size: 32px !important; }

    .gm-resource-gallery__card-title { font-size: 20px !important; }
}

/* ── 手机 (≤767px) ── */
@media (max-width: 767px) {
    .gm-service-tabs__title,
    .gm-section-header__title,
    .gm-resource-gallery__title,
    .gm-submit-cta__heading { font-size: 36px !important; }

    .gm-workshop__title { font-size: 34px !important; }

    .gm-surface-finishes .gm-section-header__title,
    .gm-tolerance__title { font-size: 30px !important; }

    .gm-quality__title,
    .gm-industries__title { font-size: 32px !important; }

    .gm-recent-blogs__title,
    .gm-quality-certs__title,
    .gm-cnc-intro__title { font-size: 28px !important; }
}