/* =========================================================
   JANNAT YARN & FABRICS
   PREMIUM WEBSITE
========================================================= */


/* =========================================================
   01. BRAND COLORS / VARIABLES
========================================================= */

:root {

    --charcoal: #242321;

    --ivory: #F6F2E9;

    --taupe: #B7A58F;

    --sage: #A4AA9C;

    --champagne: #C4AD7C;


    --white: #ffffff;

    --text-muted: #6f6c66;


    --heading-font:
        "Cormorant Garamond",
        Georgia,
        serif;

    --body-font:
        "Inter",
        Arial,
        sans-serif;


    --container-width: 1400px;


    --gutter:
        clamp(20px, 4vw, 64px);


    --section-spacing:
        clamp(80px, 9vw, 140px);


    --transition:
        450ms cubic-bezier(.16, 1, .3, 1);

}



/* =========================================================
   02. RESET
========================================================= */

*,
*::before,
*::after {

    box-sizing: border-box;

}


html {

    scroll-behavior: smooth;

}


body {

    margin: 0;

    background: var(--ivory);

    color: var(--charcoal);

    font-family: var(--body-font);

    font-size: 16px;

    line-height: 1.6;

    overflow-x: hidden;

    -webkit-font-smoothing: antialiased;

}


body.menu-open {

    overflow: hidden;

}


img {

    display: block;

    width: 100%;

    max-width: 100%;

    height: auto;

}


/* =========================================================
   UNIVERSAL RESPONSIVE IMAGE SYSTEM

   Use .media-frame around normal website images.
   Default mode fills the frame without distortion.
   Change only the ratio modifier when a section needs
   a different shape.
========================================================= */

.media-frame {
    --image-ratio: 16 / 9;
    --image-fit: cover;
    --image-position: center;

    position: relative;

    width: 100%;
    aspect-ratio: var(--image-ratio);

    overflow: hidden;

    min-width: 0;
    min-height: 0;
}

.media-frame>img,
.media-frame>picture,
.media-frame>picture>img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: var(--image-fit);
    object-position: var(--image-position);
}

/* Useful frame ratios */
.media-frame--wide {
    --image-ratio: 16 / 9;
}

.media-frame--landscape {
    --image-ratio: 4 / 3;
}

.media-frame--classic {
    --image-ratio: 3 / 2;
}

.media-frame--square {
    --image-ratio: 1 / 1;
}

.media-frame--portrait {
    --image-ratio: 4 / 5;
}

/* Show the complete image instead of cropping it.
   This can create empty space when ratios do not match. */
.media-frame--contain {
    --image-fit: contain;
}

/* Optional focal-point helpers */
.media-frame--top {
    --image-position: center top;
}

.media-frame--bottom {
    --image-position: center bottom;
}



a {

    color: inherit;

    text-decoration: none;

}


button {

    font: inherit;

    cursor: pointer;

}


h1,
h2,
h3,
p {

    margin-top: 0;

}


::selection {

    background: var(--champagne);

    color: var(--charcoal);

}



/* =========================================================
   03. GLOBAL
========================================================= */

.container {

    width:
        min(calc(100% - (var(--gutter) * 2)),
            var(--container-width));

    margin-inline: auto;

}


.section {

    padding-block:
        var(--section-spacing);

}


.skip-link {

    position: fixed;

    top: 16px;

    left: 16px;

    z-index: 5000;

    padding:
        10px 16px;

    background: var(--ivory);

    color: var(--charcoal);

    transform:
        translateY(-200%);

}


.skip-link:focus {

    transform:
        translateY(0);

}


:focus-visible {

    outline:
        2px solid var(--champagne);

    outline-offset:
        4px;

}



/* =========================================================
   04. BASIC TYPOGRAPHY
========================================================= */

.eyebrow {

    margin-bottom:
        22px;

    font-size:
        11px;

    font-weight:
        500;

    letter-spacing:
        0.15em;

    text-transform:
        uppercase;

}


.section-title {

    margin:
        0;

    max-width:
        900px;

    font-family:
        var(--heading-font);

    font-size:
        clamp(44px,
            5vw,
            76px);

    font-weight:
        400;

    line-height:
        0.98;

    letter-spacing:
        -0.035em;

}


.large-text {

    margin:
        0;

    font-family:
        var(--heading-font);

    font-size:
        clamp(24px,
            2.3vw,
            36px);

    line-height:
        1.2;

}


.body-text {

    margin:
        0;

    color:
        var(--text-muted);

    font-size:
        15px;

    line-height:
        1.8;

}



/* =========================================================
   05. BUTTONS
========================================================= */

.button {

    min-height:
        52px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        14px;

    padding:
        0 18px;

    border:
        1px solid transparent;

    border-radius:
        10px;

    font-size:
        11px;

    font-weight:
        500;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;

    transition:
        var(--transition);

}


.button:hover {

    transform:
        translateY(-2px);

}


.button-light {

    background:
        var(--ivory);

    color:
        var(--charcoal);

}


.button-light:hover {

    background:
        var(--champagne);

}


.button-dark {

    background:
        var(--charcoal);

    color:
        var(--ivory);

}


.button-outline {

    border-color:
        rgba(246, 242, 233, 0.25);

    background:
        transparent;

    color:
        var(--ivory);

}


.button-outline:hover {

    background:
        var(--ivory);

    color:
        var(--charcoal);

}



/* =========================================================
   06. TEXT LINKS
========================================================= */

.text-link {

    position:
        relative;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        12px;

    width:
        fit-content;

    padding-bottom:
        4px;

    font-size:
        11px;

    font-weight:
        500;

    letter-spacing:
        0.09em;

    text-transform:
        uppercase;

}


.text-link::after {

    content:
        "";

    position:
        absolute;

    left:
        0;

    right:
        0;

    bottom:
        0;

    height:
        1px;

    background:
        currentColor;

    transform:
        scaleX(0);

    transform-origin:
        right;

    transition:
        var(--transition);

}


.text-link:hover::after {

    transform:
        scaleX(1);

    transform-origin:
        left;

}


.text-link-light {

    color:
        var(--ivory);

}



/* =========================================================
   07. PREMIUM MINIMAL HEADER
========================================================= */

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;

    z-index: 1200;

    padding-inline: var(--gutter);

    color: var(--ivory);

    background: transparent;

    transition:
        background 450ms cubic-bezier(.16, 1, .3, 1),
        box-shadow 450ms cubic-bezier(.16, 1, .3, 1),
        backdrop-filter 450ms cubic-bezier(.16, 1, .3, 1);
}


/* SCROLL STATE */

.site-header.is-scrolled {
    background: rgba(30, 29, 27, 0.88);

    backdrop-filter: blur(16px) saturate(120%);
    -webkit-backdrop-filter: blur(16px) saturate(120%);

    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.14);
}


/* =========================================================
   08. HEADER INNER
========================================================= */

.header-shell {
    width: min(100%, var(--container-width));

    min-height: 82px;

    margin-inline: auto;

    display: flex;
    align-items: center;
    gap: 28px;

    border-bottom: 1px solid rgba(246, 242, 233, 0.16);

    transition:
        min-height 450ms cubic-bezier(.16, 1, .3, 1),
        border-color 450ms ease;
}


.site-header.is-scrolled .header-shell {
    min-height: 68px;

    border-bottom-color: rgba(246, 242, 233, 0.08);
}


/* =========================================================
   09. LOGO
========================================================= */

.brand-logo {
    flex-shrink: 0;

    display: flex;
    align-items: center;
}


.navbar-logo {
    display: block;

    width: 190px;
    height: auto;

    max-width: none;

    object-fit: contain;
}


/* =========================================================
   10. DESKTOP NAVIGATION
========================================================= */

.desktop-nav {
    margin-left: auto;

    display: flex;
    align-items: center;

    gap: clamp(22px, 2.2vw, 36px);
}


.nav-link {
    position: relative;

    padding: 29px 0 26px;

    color: rgba(246, 242, 233, 0.68);

    font-size: 12px;
    font-weight: 400;

    transition: color var(--transition);
}


.nav-link:hover,
.nav-link.active {
    color: var(--ivory);
}


.nav-link::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 19px;

    height: 1px;

    background: var(--champagne);

    transform: scaleX(0);
    transform-origin: right;

    transition: transform var(--transition);
}


.nav-link:hover::after,
.nav-link.active::after {
    transform: scaleX(1);
    transform-origin: left;
}


/* =========================================================
   11. HEADER ACTIONS / INQUIRY BUTTON
========================================================= */

.header-actions {
    display: flex;
    align-items: center;

    gap: 14px;
}


.inquiry-button {
    min-height: 44px;

    padding: 0 18px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 12px;

    border: 1px solid rgba(246, 242, 233, 0.30);
    border-radius: 8px;

    background: rgba(246, 242, 233, 0.06);

    color: var(--ivory);

    font-size: 11px;
    font-weight: 500;

    transition:
        background var(--transition),
        color var(--transition),
        border-color var(--transition);
}


.inquiry-button:hover {
    background: var(--ivory);
    border-color: var(--ivory);

    color: var(--charcoal);
}


/* =========================================================
   12. HAMBURGER
========================================================= */

.menu-toggle {
    position: relative;

    display: none;

    width: 44px;
    height: 44px;

    padding: 0;

    border: 0;

    background: transparent;
}


.menu-toggle span {
    position: absolute;

    left: 10px;

    width: 24px;
    height: 1px;

    background: var(--ivory);

    transition: var(--transition);
}


.menu-toggle span:first-child {
    top: 18px;
}


.menu-toggle span:last-child {
    top: 26px;
}


.menu-toggle.is-active span:first-child {
    top: 22px;

    transform: rotate(45deg);
}


.menu-toggle.is-active span:last-child {
    top: 22px;

    transform: rotate(-45deg);
}


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

@media (max-width: 1000px) {

    .header-shell {
        min-height: 74px;
    }

    .site-header.is-scrolled .header-shell {
        min-height: 64px;
    }

    .navbar-logo {
        width: 165px;
    }

    .desktop-nav {
        display: none;
    }

    .header-actions {
        margin-left: auto;
    }

    .menu-toggle {
        display: block;
    }

    .inquiry-button {
        min-height: 42px;
        padding-inline: 16px;
    }
}


@media (max-width: 640px) {

    .contact-map-placeholder {
        min-height: 380px;
    }

    .production-video-wrap {
        aspect-ratio: 16 / 9;
    }



    .gallery-production-image {
        object-position: 60% 50%;
    }

    .gallery-fabric-image {
        object-position: 45% 50%;
    }

    .gallery-cutting-image {
        object-position: 55% 40%;
    }

    .gallery-garment-image {
        object-position: 50% 50%;
    }

    .gallery-workplace-image {
        object-position: 40% 50%;
    }

    .gallery-finished-image {
        object-position: 50% 40%;
    }


    .site-header {
        padding-inline: 20px;
    }

    .header-shell {
        min-height: 68px;
        gap: 12px;
    }

    .site-header.is-scrolled .header-shell {
        min-height: 60px;
    }

    .navbar-logo {
        width: 140px;
    }

    .inquiry-button {
        display: none;
    }

    .menu-toggle {
        width: 42px;
        height: 42px;
    }
}


@media (max-width: 390px) {

    .site-header {
        padding-inline: 16px;
    }

    .navbar-logo {
        width: 128px;
    }
}


/* =========================================================
   13. MOBILE MENU
========================================================= */

.mobile-menu {

    position:
        fixed;

    inset:
        0;

    z-index:
        1100;

    background:
        rgba(28,
            27,
            25,
            0.99);

    color:
        var(--ivory);

    opacity:
        0;

    visibility:
        hidden;

    pointer-events:
        none;

    transition:
        var(--transition);

}


.mobile-menu.is-open {

    opacity:
        1;

    visibility:
        visible;

    pointer-events:
        auto;

}


.mobile-menu-inner {

    min-height:
        100%;

    padding:
        120px var(--gutter) 32px;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        space-between;

}


.mobile-nav {

    display:
        flex;

    flex-direction:
        column;

    border-top:
        1px solid rgba(246,
            242,
            233,
            0.14);

}


.mobile-nav a {

    display:
        flex;

    align-items:
        center;

    gap:
        20px;

    padding:
        16px 0;

    border-bottom:
        1px solid rgba(246,
            242,
            233,
            0.14);

    font-family:
        var(--heading-font);

    font-size:
        clamp(36px,
            9vw,
            60px);

    line-height:
        1;

}


.mobile-nav a span {

    min-width:
        26px;

    color:
        var(--champagne);

    font-family:
        var(--body-font);

    font-size:
        10px;

}


.mobile-contact {

    display:
        flex;

    flex-direction:
        column;

    gap:
        6px;

}


.mobile-contact p {

    margin-bottom:
        10px;

    color:
        var(--sage);

    font-size:
        10px;

    text-transform:
        uppercase;

    letter-spacing:
        0.14em;

}


.mobile-contact a {

    color:
        rgba(246,
            242,
            233,
            0.70);

    font-size:
        13px;

}

/* =========================================================
   14. HOME HERO — FINAL CLEAN VERSION
========================================================= */

.hero {
    position: relative;

    width: 100%;

    min-height: clamp(450px, 55vw, 700px);

    margin: 0;
    padding: 0;

    display: flex;
    align-items: center;

    overflow: hidden;

    background:
        linear-gradient(90deg,
            rgba(24, 24, 22, 0.68) 0%,
            rgba(24, 24, 22, 0.42) 45%,
            rgba(24, 24, 22, 0.18) 100%),
        url("images/textile-fabric-hero.webp") center 52% / cover no-repeat;
    color: var(--ivory);
}


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

.hero-media {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    z-index: 0;

    background:
        radial-gradient(circle at 78% 28%,
            rgba(196, 173, 124, 0.12),
            transparent 34%),
        radial-gradient(circle at 18% 82%,
            rgba(164, 170, 156, 0.08),
            transparent 32%),
        linear-gradient(135deg,
            #2b2926 0%,
            #242321 48%,
            #171715 100%);
}


.hero-media picture {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;
}


.hero-image {
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    display: block;
}


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

.hero-overlay {
    position: absolute;

    inset: 0;

    z-index: 1;

    background:
        linear-gradient(90deg,
            rgba(15, 15, 14, 0.82) 0%,
            rgba(15, 15, 14, 0.58) 44%,
            rgba(15, 15, 14, 0.22) 100%);
}


.hero-overlay::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(180deg,
            rgba(0, 0, 0, 0.10) 0%,
            rgba(0, 0, 0, 0.02) 45%,
            rgba(0, 0, 0, 0.65) 100%);
}


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

.hero-content {
    position: relative;

    z-index: 2;

    width: min(calc(100% - (var(--gutter) * 2)),
            var(--container-width));

    margin-inline: auto;

    padding-top: 140px;
    padding-bottom: 80px;
}


.hero-copy {
    width: 100%;

    max-width: 1050px;
}


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

.hero-eyebrow {
    margin: 0 0 22px 0;

    color: rgba(246, 242, 233, 0.68);

    font-size: 11px;
    font-weight: 500;

    letter-spacing: 0.14em;

    text-transform: uppercase;
}


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

.hero-title {
    margin: 0;

    max-width: 1000px;

    font-family: var(--heading-font);

    font-size: clamp(64px,
            8vw,
            120px);

    font-weight: 400;

    line-height: 0.88;

    letter-spacing: -0.045em;
}


.hero-title em {
    display: block;

    margin-left: clamp(0px,
            5vw,
            80px);

    color: var(--champagne);

    font-weight: 400;
}


/* =========================
   HERO LOWER AREA
========================= */

.hero-bottom {
    width: 100%;

    max-width: 850px;

    margin-top: 30px;
    margin-left: clamp(0px,
            5vw,
            80px);

    display: grid;

    grid-template-columns:
        minmax(280px, 420px) auto;

    align-items: end;

    gap: 50px;
}


.hero-description {
    margin: 0;

    color: rgba(246, 242, 233, 0.70);

    font-size: 15px;

    line-height: 1.8;
}


.hero-actions {
    margin: 0;

    display: flex;

    align-items: center;

    gap: 24px;

    flex-wrap: wrap;
}


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

.hero-meta {
    position: absolute;

    z-index: 3;

    left: 50%;
    bottom: 22px;

    transform: translateX(-50%);

    width: min(calc(100% - (var(--gutter) * 2)),
            var(--container-width));

    display: flex;

    justify-content: space-between;

    gap: 20px;

    color: rgba(246, 242, 233, 0.40);

    font-size: 10px;

    letter-spacing: 0.09em;

    text-transform: uppercase;
}


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

/* =========================================================
   TABLET / SMALL LAPTOP HERO
========================================================= */

@media (max-width: 1200px) {

    .hero {
        min-height: 76svh;
        align-items: center;
    }


    .hero-content {
        padding-top: 120px;
        padding-bottom: 75px;
    }


    .hero-title {
        max-width: 720px;

        font-size: clamp(56px,
                8vw,
                82px);
    }


    .hero-title em {
        margin-left: 0;
    }


    .hero-bottom {
        max-width: 600px;

        margin-top: 26px;
        margin-left: 0;

        grid-template-columns: 1fr;

        gap: 20px;
    }


    .hero-description {
        max-width: 430px;
    }


    .hero-meta {
        bottom: 16px;
    }

}


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

@media (max-width: 640px) {


    .production-video-wrap {
        aspect-ratio: 16 / 10;
    }

    .production-video {
        object-position: 50% 50%;
    }

    .hero {
        min-height: 100svh;
    }


    .hero-overlay {
        background:
            linear-gradient(180deg,
                rgba(15, 15, 14, 0.22) 0%,
                rgba(15, 15, 14, 0.42) 36%,
                rgba(15, 15, 14, 0.90) 100%);
    }


    .hero-content {
        width: calc(100% - 40px);

        margin-inline: auto;

        padding-top: 105px;
        padding-bottom: 105px;
    }


    .hero-copy {
        max-width: 100%;
    }


    .hero-eyebrow {
        margin-bottom: 18px;

        font-size: 10px;

        line-height: 1.5;
    }


    .hero-title {
        width: 100%;

        max-width: none;

        font-size: clamp(52px,
                14vw,
                72px);

        line-height: 0.92;

        letter-spacing: -0.04em;
    }


    .hero-title em {
        margin-left: 0;

        margin-top: 4px;
    }


    .hero-bottom {
        width: 100%;

        max-width: none;

        margin:
            30px 0 0 0;

        display: block;
    }


    .hero-description {
        max-width: 360px;

        font-size: 14px;

        line-height: 1.75;
    }


    .hero-actions {
        width: 100%;

        margin-top: 28px;

        display: flex;

        flex-direction: row;

        align-items: center;

        gap: 22px;
    }


    .hero-actions .button {
        width: auto;

        min-height: 48px;

        padding-inline: 18px;
    }


    .hero-meta {
        width: calc(100% - 40px);

        bottom: 18px;

        flex-direction: column;

        justify-content: flex-start;

        gap: 3px;

        font-size: 9px;

        line-height: 1.5;
    }

}


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

@media (max-width: 390px) {

    .hero-content {
        width: calc(100% - 32px);
    }


    .hero-title {
        font-size: 50px;
    }


    .hero-actions {
        flex-direction: column;

        align-items: flex-start;

        gap: 18px;
    }


    .hero-actions .button {
        width: 100%;
    }


    .hero-meta {
        width: calc(100% - 32px);
    }

}


/* =========================================================
   15. SECTION GRID
========================================================= */

.section-grid {

    display:
        grid;

    grid-template-columns:
        minmax(140px,
            0.25fr) minmax(0,
            1fr);

    gap:
        clamp(40px,
            6vw,
            100px);

}


.section-label {

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    color:
        var(--text-muted);

    font-size:
        10px;

    font-weight:
        500;

    letter-spacing:
        0.13em;

    text-transform:
        uppercase;

}


.section-label span {

    color:
        var(--champagne);

}



/* =========================================================
   16. HOME / SHARED ABOUT LAYOUT
========================================================= */

.about-section {

    background:
        var(--ivory);

}


.about-copy {

    display:
        grid;

    grid-template-columns:
        1fr 0.85fr;

    gap:
        clamp(40px,
            6vw,
            90px);

    margin-top:
        clamp(45px,
            5vw,
            75px);

    padding-top:
        clamp(35px,
            4vw,
            55px);

    border-top:
        1px solid rgba(36,
            35,
            33,
            0.14);

}


.about-copy .text-link {

    margin-top:
        28px;

}



/* =========================================================
   17. HOME CAPABILITIES
========================================================= */

.capabilities-section {

    background:
        var(--ivory);

}


.capabilities-heading {

    margin-bottom:
        clamp(50px,
            7vw,
            100px);

}


.capabilities-list {

    border-top:
        1px solid rgba(36,
            35,
            33,
            0.14);

}


.capability-row {

    display:
        grid;

    grid-template-columns:
        50px minmax(220px,
            0.9fr) minmax(240px,
            1fr) 30px;

    align-items:
        center;

    gap:
        clamp(20px,
            4vw,
            60px);

    padding:
        26px 0;

    border-bottom:
        1px solid rgba(36,
            35,
            33,
            0.14);

    transition:
        var(--transition);

}


.capability-row:hover {

    padding-left:
        8px;

}


.capability-number {

    color:
        var(--taupe);

    font-size:
        10px;

}


.capability-row h3 {

    margin:
        0;

    font-family:
        var(--body-font);

    font-size:
        clamp(20px,
            2vw,
            27px);

    font-weight:
        500;

    letter-spacing:
        -0.02em;

}


.capability-row p {

    margin:
        0;

    color:
        var(--text-muted);

    font-size:
        14px;

    line-height:
        1.7;

}


.capability-arrow {

    justify-self:
        end;

}



/* =========================================================
   18. HOME GALLERY PREVIEW
========================================================= */

.gallery-preview {

    padding-block:
        var(--section-spacing);

    background:
        var(--charcoal);

    color:
        var(--ivory);

}


.gallery-grid {

    display:
        grid;

    grid-template-columns:
        0.75fr 1.25fr;

    gap:
        clamp(50px,
            7vw,
            100px);

    align-items:
        center;

}


.gallery-content {

    max-width:
        580px;

}


.gallery-content .eyebrow {

    color:
        var(--sage);

}


.gallery-title {

    margin:
        0;

    font-family:
        var(--heading-font);

    font-size:
        clamp(48px,
            5vw,
            76px);

    font-weight:
        400;

    line-height:
        0.95;

}


.gallery-description {

    max-width:
        450px;

    margin:
        28px 0;

    color:
        rgba(246,
            242,
            233,
            0.64);

}


.gallery-image-area {
    width: 100%;

    display: flex;
    align-items: center;

    min-width: 0;
    min-height: 0;
}


.gallery-image-placeholder {
    --image-ratio: 16 / 9;
    --image-position: center;

    position: relative;

    width: 100%;
    aspect-ratio: var(--image-ratio);

    overflow: hidden;

    min-width: 0;
    min-height: 0;

    border: 1px solid rgba(246, 242, 233, 0.16);
    padding: 8px;

    background: rgba(255, 255, 255, 0.025);

    box-shadow:
        0 24px 55px rgba(0, 0, 0, 0.28),
        inset 0 0 0 1px rgba(255, 255, 255, 0.025);
}

.gallery-image-placeholder img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: var(--image-position);

    transition:
        transform 0.7s ease,
        filter 0.7s ease;
}

.gallery-image-placeholder::after {
    content: "";
    position: absolute;

    inset: 8px;

    border: 1px solid rgba(246, 242, 233, 0.10);

    pointer-events: none;
}

.gallery-image-placeholder:hover img {
    transform: scale(1.025);
}


.gallery-image-placeholder span {

    font-size:
        10px;

    letter-spacing:
        0.14em;

    text-transform:
        uppercase;

}



/* =========================================================
   19. SHARED APPROACH
========================================================= */

.approach-section {

    background:
        #1f1e1c;

    color:
        var(--ivory);

}


.section-label-dark {

    color:
        rgba(246,
            242,
            233,
            0.50);

}


.section-title-light {

    color:
        var(--ivory);

}


.large-text-light {

    max-width:
        700px;

    margin-top:
        45px;

    color:
        var(--ivory);

}


.body-text-dark {

    max-width:
        520px;

    margin-top:
        25px;

    color:
        rgba(246,
            242,
            233,
            0.62);

}



/* =========================================================
   20. SHARED INQUIRY CTA
========================================================= */

.inquiry-section {

    padding-block:
        clamp(80px,
            9vw,
            130px);

    background:
        var(--champagne);

}


.inquiry-section .eyebrow {

    padding-top:
        24px;

    border-top:
        1px solid rgba(36,
            35,
            33,
            0.25);

}


.inquiry-title {

    max-width:
        1000px;

    margin:
        clamp(50px,
            6vw,
            85px) 0;

    font-family:
        var(--heading-font);

    font-size:
        clamp(50px,
            6vw,
            95px);

    font-weight:
        400;

    line-height:
        0.92;

    letter-spacing:
        -0.04em;

}


.inquiry-bottom {

    display:
        grid;

    grid-template-columns:
        minmax(250px,
            450px) auto;

    align-items:
        end;

    gap:
        clamp(40px,
            7vw,
            100px);

}


.inquiry-bottom>p {

    margin:
        0;

}


.inquiry-actions {

    display:
        flex;

    align-items:
        center;

    gap:
        26px;

}



/* =========================================================
   21. FOOTER
========================================================= */

.site-footer {

    padding:
        clamp(65px,
            7vw,
            100px) 0 25px;

    background:
        var(--charcoal);

    color:
        var(--ivory);

}


.footer-grid {

    display:
        grid;

    grid-template-columns:
        1.4fr repeat(3,
            0.65fr);

    gap:
        clamp(40px,
            5vw,
            80px);

    padding-bottom:
        clamp(50px,
            7vw,
            90px);

}


.footer-brand {

    max-width:
        320px;

}


.footer-brand>p {

    margin-top:
        25px;

    color:
        rgba(246,
            242,
            233,
            0.60);

    font-size:
        13px;

}


.footer-column {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-start;

    gap:
        8px;

}


.footer-heading {

    margin-bottom:
        12px;

    color:
        var(--sage);

    font-size:
        10px;

    font-weight:
        500;

    letter-spacing:
        0.14em;

    text-transform:
        uppercase;

}


.footer-column a,
.footer-column address {

    color:
        rgba(246,
            242,
            233,
            0.65);

    font-size:
        13px;

    font-style:
        normal;

    line-height:
        1.7;

}


.footer-bottom {

    display:
        flex;

    justify-content:
        space-between;

    gap:
        30px;

    padding-top:
        22px;

    border-top:
        1px solid rgba(246,
            242,
            233,
            0.14);

    color:
        rgba(246,
            242,
            233,
            0.40);

    font-size:
        11px;

}


.footer-bottom p {

    margin:
        0;

}



/* =========================================================
   22. BACK TO TOP
========================================================= */

.back-to-top {

    position:
        fixed;

    right:
        18px;

    bottom:
        18px;

    z-index:
        900;

    width:
        44px;

    height:
        44px;

    display:
        grid;

    place-items:
        center;

    border:
        1px solid rgba(36,
            35,
            33,
            0.16);

    border-radius:
        50%;

    background:
        var(--ivory);

    color:
        var(--charcoal);

    opacity:
        0;

    visibility:
        hidden;

    transform:
        translateY(10px);

    transition:
        var(--transition);

}


.back-to-top.is-visible {

    opacity:
        1;

    visibility:
        visible;

    transform:
        translateY(0);

}


/* =========================================================
   23. GLOBAL RESPONSIVE RULES
========================================================= */

/* TABLET */
@media (max-width: 1000px) {
    .section-grid {
        grid-template-columns: 1fr;
    }

    .gallery-grid {
        grid-template-columns: 1fr;
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }

    .footer-brand {
        grid-column: 1 / -1;
    }
}


/* MOBILE */
@media (max-width: 640px) {

    :root {
        --gutter: 20px;
        --section-spacing: 80px;
    }

    .section-title {
        font-size: clamp(42px, 13vw, 62px);
    }

    .about-copy {
        grid-template-columns: 1fr;
    }

    .capability-row {
        grid-template-columns: 30px 1fr 25px;
        gap: 12px;
    }

    .capability-row p {
        grid-column: 2 / 3;
    }

    .capability-arrow {
        grid-column: 3;
        grid-row: 1 / 3;
    }

    .gallery-title {
        font-size: clamp(46px, 14vw, 68px);
    }

    .inquiry-title {
        font-size: clamp(52px, 15vw, 74px);
    }

    .inquiry-bottom {
        grid-template-columns: 1fr;
    }

    .inquiry-actions {
        flex-direction: column;
        align-items: flex-start;
    }

    .inquiry-actions .button {
        width: 100%;
    }

    .footer-grid {
        grid-template-columns: 1fr;
    }

    .footer-brand {
        grid-column: auto;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 6px;
    }
}


/* SMALL MOBILE */
@media (max-width: 390px) {

    :root {
        --gutter: 16px;
    }
}


/* =========================================================
   24. PREMIUM SCROLL ANIMATIONS
========================================================= */

/* Fade up */

.reveal {
    opacity: 0;

    transform: translateY(32px);

    transition:
        opacity 900ms cubic-bezier(.16, 1, .3, 1),
        transform 900ms cubic-bezier(.16, 1, .3, 1);

    will-change: opacity, transform;
}


.reveal.is-visible {
    opacity: 1;

    transform: translateY(0);
}


/* Fade from left */

.reveal-left {
    opacity: 0;

    transform: translateX(-35px);

    transition:
        opacity 900ms cubic-bezier(.16, 1, .3, 1),
        transform 900ms cubic-bezier(.16, 1, .3, 1);
}


.reveal-left.is-visible {
    opacity: 1;

    transform: translateX(0);
}


/* Fade from right */

.reveal-right {
    opacity: 0;

    transform: translateX(35px);

    transition:
        opacity 900ms cubic-bezier(.16, 1, .3, 1),
        transform 900ms cubic-bezier(.16, 1, .3, 1);
}


.reveal-right.is-visible {
    opacity: 1;

    transform: translateX(0);
}


/* Image reveal / subtle zoom */

.reveal-image {
    opacity: 0;

    transform: scale(1.035);

    transition:
        opacity 1100ms cubic-bezier(.16, 1, .3, 1),
        transform 1400ms cubic-bezier(.16, 1, .3, 1);
}


.reveal-image.is-visible {
    opacity: 1;

    transform: scale(1);
}


/* Stagger delays */

.delay-1 {
    transition-delay: 100ms;
}

.delay-2 {
    transition-delay: 200ms;
}

.delay-3 {
    transition-delay: 300ms;
}

.delay-4 {
    transition-delay: 400ms;
}


/* Capability row premium movement */

.capability-row {
    transition:
        padding-left 500ms cubic-bezier(.16, 1, .3, 1),
        background 500ms ease;
}


@media (hover: hover) {

    .capability-row:hover {
        padding-left: 12px;

        background:
            rgba(183, 165, 143, 0.05);
    }

}


/* Premium section line reveal */

.line-reveal {
    position: relative;
}


.line-reveal::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 100%;
    height: 1px;

    background:
        rgba(36, 35, 33, 0.18);

    transform: scaleX(0);

    transform-origin: left;

    transition:
        transform 1100ms cubic-bezier(.16, 1, .3, 1);
}


.line-reveal.is-visible::after {
    transform: scaleX(1);
}


/* =========================================================
   MOBILE - REDUCE MOVEMENT
========================================================= */

@media (max-width: 640px) {

    .reveal,
    .reveal-left,
    .reveal-right {
        transform: translateY(22px);
    }


    .reveal.is-visible,
    .reveal-left.is-visible,
    .reveal-right.is-visible {
        transform: translateY(0);
    }

}


/* =========================================================
   25. ACCESSIBILITY — REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .reveal,
    .reveal-left,
    .reveal-right,
    .reveal-image {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}





/* =========================================================
   INDIVIDUAL GALLERY IMAGES
========================================================= */

/* DESKTOP */

.gallery-production {
    min-height: 700px;
}

.gallery-production-image {
    object-fit: cover;
    object-position: 50% 50%;
}


.gallery-fabric {
    min-height: 520px;
}

.gallery-fabric-image {
    object-fit: cover;
    object-position: 50% 50%;
}


.gallery-cutting {
    min-height: 520px;
}

.gallery-cutting-image {
    object-fit: cover;
    object-position: 50% 50%;
}


.gallery-garment {
    min-height: 560px;
}

.gallery-garment-image {
    object-fit: cover;
    object-position: 50% 50%;
}


.gallery-workplace {
    min-height: 520px;
}

.gallery-workplace-image {
    object-fit: cover;
    object-position: 50% 50%;
}


.gallery-finished {
    min-height: 520px;
}

.gallery-finished-image {
    object-fit: cover;
    object-position: 50% 50%;
}



/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

    .gallery-production,
    .gallery-fabric,
    .gallery-cutting,
    .gallery-garment,
    .gallery-workplace,
    .gallery-finished {
        min-height: 480px;
    }

}



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

@media (max-width: 640px) {

    .gallery-masonry {
        grid-template-columns: 1fr;
        gap: 14px;
    }


    .gallery-production,
    .gallery-fabric,
    .gallery-cutting,
    .gallery-garment,
    .gallery-workplace,
    .gallery-finished {
        grid-column: 1;
        width: 100%;
        min-height: 380px;
    }


    .gallery-production-image,
    .gallery-fabric-image,
    .gallery-cutting-image,
    .gallery-garment-image,
    .gallery-workplace-image,
    .gallery-finished-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

}



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

@media (max-width: 390px) {

    .gallery-production,
    .gallery-fabric,
    .gallery-cutting,
    .gallery-garment,
    .gallery-workplace,
    .gallery-finished {
        min-height: 330px;
    }

}



/* =========================================================
   PRODUCTION VIDEO
========================================================= */

.production-video-wrap {
    position: relative;

    width: 100%;

    aspect-ratio: 16 / 9;

    overflow: hidden;

    background: #1f1e1c;

    border:
        1px solid rgba(246, 242, 233, 0.12);
}


.production-video {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    object-position: center;
}




/* =========================================================
   GOOGLE MAP
========================================================= */

.contact-map-placeholder {
    position: relative;

    width: 100%;

    min-height: 520px;

    overflow: hidden;

    border:
        1px solid rgba(246, 242, 233, 0.12);

    background: #242321;
}


.contact-google-map {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    border: 0;

    display: block;
}




/* =========================================================
   ABOUT PAGE STYLES
   Consolidated into style.css
========================================================= */

/* =========================================================
   ABOUT PAGE
========================================================= */


/* =========================================================
   ABOUT PAGE HERO
========================================================= */

.page-hero {
    position: relative;

    padding:
        clamp(160px, 16vw, 220px)
        0
        clamp(80px, 9vw, 130px);

    background: var(--charcoal);

    color: var(--ivory);

    overflow: hidden;
}


/* subtle premium background */

.page-hero::before {
    content: "";

    position: absolute;

    inset: 0;

    background:
        radial-gradient(
            circle at 80% 20%,
            rgba(196, 173, 124, 0.12),
            transparent 32%
        ),
        radial-gradient(
            circle at 15% 80%,
            rgba(164, 170, 156, 0.07),
            transparent 30%
        );

    pointer-events: none;
}


.page-hero-grid {
    position: relative;

    z-index: 1;

    display: grid;

    grid-template-columns:
        minmax(0, 1.25fr)
        minmax(300px, 0.65fr);

    align-items: end;

    gap:
        clamp(50px, 8vw, 120px);
}


.page-hero .eyebrow {
    color: var(--sage);
}


/* =========================================================
   ABOUT PAGE TITLE
========================================================= */

.page-title {
    margin: 0;

    max-width: 950px;

    font-family: var(--heading-font);

    font-size:
        clamp(54px, 7vw, 105px);

    font-weight: 400;

    line-height: 0.92;

    letter-spacing: -0.04em;
}


/* =========================================================
   ABOUT HERO INTRO
========================================================= */

.page-hero-intro {
    max-width: 460px;

    padding-bottom: 8px;
}


.page-hero-intro p {
    margin: 0;

    color:
        rgba(246, 242, 233, 0.66);

    font-size: 15px;

    line-height: 1.85;
}


/* =========================================================
   COMPANY SECTION
========================================================= */

.about-company {
    background: var(--ivory);
}


/* =========================================================
   ABOUT FOCUS SECTION
========================================================= */

.about-focus {
    background: #eee8dc;
}


.about-focus-grid {
    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    margin-top:
        clamp(45px, 6vw, 80px);

    border-top:
        1px solid rgba(36, 35, 33, 0.14);

    border-left:
        1px solid rgba(36, 35, 33, 0.14);
}


.about-focus-item {
    min-height: 320px;

    padding:
        clamp(24px, 3vw, 40px);

    display: flex;

    flex-direction: column;

    border-right:
        1px solid rgba(36, 35, 33, 0.14);

    border-bottom:
        1px solid rgba(36, 35, 33, 0.14);

    transition:
        background var(--transition),
        transform var(--transition);
}


.about-focus-item > span {
    color: var(--champagne);

    font-size: 10px;

    letter-spacing: 0.14em;
}


.about-focus-item h3 {
    margin:
        auto
        0
        18px;

    font-family: var(--body-font);

    font-size:
        clamp(20px, 2vw, 27px);

    font-weight: 500;

    line-height: 1.2;

    letter-spacing: -0.02em;
}


.about-focus-item p {
    margin: 0;

    color: var(--text-muted);

    font-size: 14px;

    line-height: 1.7;
}


@media (hover: hover) {

    .about-focus-item:hover {
        background:
            rgba(196, 173, 124, 0.10);

        transform:
            translateY(-4px);
    }

}


/* =========================================================
   ABOUT PAGE - TABLET
========================================================= */

@media (max-width: 1000px) {

    .page-hero-grid {
        grid-template-columns: 1fr;

        gap: 40px;
    }


    .page-hero-intro {
        max-width: 600px;
    }


    .about-focus-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }

}


/* =========================================================
   ABOUT PAGE - MOBILE
========================================================= */

@media (max-width: 640px) {

    .page-hero {
        padding:
            130px
            0
            75px;
    }


    .page-title {
        font-size:
            clamp(48px, 14vw, 68px);

        line-height: 0.95;
    }


    .page-hero-grid {
        gap: 32px;
    }


    .page-hero-intro p {
        font-size: 14px;
    }


    .about-focus-grid {
        grid-template-columns: 1fr;

        margin-top: 45px;
    }


    .about-focus-item {
        min-height: 240px;
    }

}



/* =========================================================
   CAPABILITIES PAGE STYLES
   Consolidated into style.css
========================================================= */

/* =========================================================
   JANNAT YARN & FABRICS
   CAPABILITIES PAGE
========================================================= */


/* =========================================================
   01. CAPABILITIES HERO
========================================================= */

.capabilities-hero {
    position: relative;

    padding:
        clamp(170px, 16vw, 230px) 0 clamp(90px, 9vw, 135px);

    overflow: hidden;

    background:
        var(--charcoal);

    color:
        var(--ivory);
}


/* Premium subtle background texture */

.capabilities-hero::before {
    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    background:

        radial-gradient(circle at 78% 22%,
            rgba(196, 173, 124, 0.13),
            transparent 30%),

        radial-gradient(circle at 10% 82%,
            rgba(164, 170, 156, 0.07),
            transparent 28%);
}


.capabilities-hero::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 1px;

    background:
        rgba(246, 242, 233, 0.12);
}


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

.capabilities-hero-grid {
    position: relative;

    z-index: 1;

    display: grid;

    grid-template-columns:
        minmax(0, 1.3fr) minmax(280px, 0.55fr);

    align-items: end;

    gap:
        clamp(50px, 8vw, 120px);
}


.capabilities-hero .eyebrow {
    color:
        var(--sage);
}


/* =========================================================
   PAGE TITLE
========================================================= */

.capabilities-page-title {
    margin: 0;

    max-width: 980px;

    font-family:
        var(--heading-font);

    font-size:
        clamp(56px, 7vw, 108px);

    font-weight:
        400;

    line-height:
        0.91;

    letter-spacing:
        -0.045em;
}


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

.capabilities-hero-intro {
    max-width: 460px;

    padding-bottom:
        8px;
}


.capabilities-hero-intro p {
    margin: 0;

    color:
        rgba(246, 242, 233, 0.65);

    font-size:
        15px;

    line-height:
        1.85;
}



/* =========================================================
   02. INTRO SECTION
========================================================= */

.capabilities-intro-section {
    background:
        var(--ivory);
}


.capabilities-intro-copy {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr) minmax(280px, 0.8fr);

    gap:
        clamp(40px, 6vw, 90px);

    margin-top:
        clamp(45px, 5vw, 75px);

    padding-top:
        clamp(35px, 4vw, 55px);

    border-top:
        1px solid rgba(36, 35, 33, 0.14);
}



/* =========================================================
   03. CAPABILITY DETAILS WRAPPER
========================================================= */

.capabilities-detail-section {
    background:
        var(--ivory);
}



/* =========================================================
   CAPABILITY DETAIL
========================================================= */

.capability-detail {
    padding-block:
        clamp(80px, 9vw, 140px);

    border-top:
        1px solid rgba(36, 35, 33, 0.12);

    background:
        var(--ivory);
}


.capability-detail-alt {
    background:
        #eee8dc;
}



/* =========================================================
   DETAIL GRID
========================================================= */

.capability-detail-grid {
    display: grid;

    grid-template-columns:
        60px minmax(260px, 0.72fr) minmax(420px, 1.2fr);

    gap:
        clamp(30px, 5vw, 80px);

    align-items:
        center;
}



/* =========================================================
   NUMBER
========================================================= */

.capability-detail-number {
    align-self:
        start;

    padding-top:
        5px;

    color:
        var(--champagne);

    font-size:
        10px;

    font-weight:
        500;

    letter-spacing:
        0.14em;
}



/* =========================================================
   DETAIL CONTENT
========================================================= */

.capability-detail-content {
    max-width:
        500px;
}


.capability-detail-content .eyebrow {
    margin-bottom:
        25px;

    color:
        var(--text-muted);
}


.capability-detail-title {
    margin:
        0;

    font-family:
        var(--heading-font);

    font-size:
        clamp(48px, 5vw, 78px);

    font-weight:
        400;

    line-height:
        0.94;

    letter-spacing:
        -0.035em;
}


.capability-detail-text {
    max-width:
        430px;

    margin:
        clamp(28px, 3vw, 45px) 0 0;

    color:
        var(--text-muted);

    font-size:
        15px;

    line-height:
        1.8;
}



/* =========================================================
   DETAIL MEDIA
========================================================= */

.capability-detail-media {
    position:
        relative;

    min-height:
        clamp(430px, 42vw, 620px);

    overflow:
        hidden;
}


.capability-media-placeholder {
    width:
        100%;

    height:
        100%;

    min-height:
        inherit;

    display:
        grid;

    place-items:
        center;

    border:
        1px solid rgba(36, 35, 33, 0.12);

    background:

        linear-gradient(145deg,
            rgba(183, 165, 143, 0.25),
            rgba(164, 170, 156, 0.12));

    color:
        rgba(36, 35, 33, 0.42);
}


.capability-media-placeholder span {
    font-size:
        10px;

    font-weight:
        500;

    letter-spacing:
        0.14em;

    text-transform:
        uppercase;
}



/* =========================================================
   FUTURE REAL IMAGES
========================================================= */

.capability-image {
    width:
        100%;

    height:
        100%;

    min-height:
        inherit;

    object-fit:
        cover;

    object-position:
        center;

    transition:
        transform 1000ms cubic-bezier(.16, 1, .3, 1);
}


@media (hover: hover) {

    .capability-detail-media:hover .capability-image {
        transform:
            scale(1.025);
    }

}



/* =========================================================
   SUBTLE HOVER DETAIL
========================================================= */

.capability-detail-content {
    transition:
        transform 600ms cubic-bezier(.16, 1, .3, 1);
}


@media (hover: hover) {

    .capability-detail:hover .capability-detail-content {
        transform:
            translateX(6px);
    }

}



/* =========================================================
   04. APPROACH SECTION SMALL FIXES
========================================================= */

.capabilities-detail-section+.approach-section {

    border-top:
        0;
}



/* =========================================================
   05. TABLET
========================================================= */

@media (max-width: 1000px) {


    .capabilities-hero-grid {
        grid-template-columns:
            1fr;

        gap:
            40px;
    }


    .capabilities-hero-intro {
        max-width:
            620px;
    }


    .capabilities-intro-copy {
        grid-template-columns:
            1fr;

        max-width:
            760px;
    }


    .capability-detail-grid {
        grid-template-columns:
            45px minmax(0, 1fr);

        align-items:
            start;
    }


    .capability-detail-content {
        max-width:
            650px;
    }


    .capability-detail-media {
        grid-column:
            2 / 3;

        width:
            100%;

        margin-top:
            20px;

        min-height:
            520px;
    }

}



/* =========================================================
   06. MOBILE
========================================================= */

@media (max-width: 640px) {


    /* HERO */

    .capabilities-hero {
        padding:
            130px 0 78px;
    }


    .capabilities-hero-grid {
        gap:
            30px;
    }


    .capabilities-page-title {
        font-size:
            clamp(48px, 14vw, 68px);

        line-height:
            0.94;
    }


    .capabilities-hero-intro p {
        font-size:
            14px;

        line-height:
            1.75;
    }



    /* INTRO */

    .capabilities-intro-copy {
        margin-top:
            40px;

        padding-top:
            30px;

        gap:
            28px;
    }



    /* DETAILS */

    .capability-detail {
        padding-block:
            75px;
    }


    .capability-detail-grid {
        grid-template-columns:
            1fr;

        gap:
            28px;
    }


    .capability-detail-number {
        padding:
            0;

        grid-column:
            1;
    }


    .capability-detail-content {
        grid-column:
            1;
    }


    .capability-detail-media {
        grid-column:
            1;

        margin-top:
            10px;

        min-height:
            390px;
    }


    .capability-detail-title {
        font-size:
            clamp(44px, 13vw, 62px);
    }


    .capability-detail-text {
        margin-top:
            24px;

        font-size:
            14px;
    }

}



/* =========================================================
   07. SMALL MOBILE
========================================================= */

@media (max-width: 390px) {


    .capabilities-page-title {
        font-size:
            47px;
    }


    .capability-detail-media {
        min-height:
            340px;
    }


    .capability-detail-title {
        font-size:
            44px;
    }

}



/* =========================================================
   08. REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {


    .capability-detail-content,
    .capability-image {

        transform:
            none !important;

        transition:
            none !important;
    }

}


/* =========================================================
   MATCH ABOUT PAGE HERO
========================================================= */

.capabilities-hero {
    padding:
        clamp(160px, 16vw, 220px) 0 clamp(80px, 9vw, 130px);
}

.capabilities-hero-grid {
    grid-template-columns:
        minmax(0, 1.25fr) minmax(300px, 0.65fr);

    gap:
        clamp(50px, 8vw, 120px);

    align-items: end;
}

.capabilities-page-title {
    max-width: 950px;

    font-size:
        clamp(54px, 7vw, 105px);

    line-height: 0.92;

    letter-spacing: -0.04em;
}

.capabilities-hero-intro {
    max-width: 460px;
    padding-bottom: 8px;
}

.capabilities-hero-intro p {
    font-size: 15px;
    line-height: 1.85;
}



/* =========================================================
   GALLERY PAGE STYLES
   Consolidated into style.css
========================================================= */

/* =========================================================
   JANNAT YARN & FABRICS
   GALLERY PAGE
========================================================= */


/* =========================================================
   01. HERO
========================================================= */

.gallery-page-hero {

    position: relative;

    overflow: hidden;

    padding:
        clamp(170px, 16vw, 230px) 0 clamp(90px, 9vw, 135px);

    background:
        var(--charcoal);

    color:
        var(--ivory);
}


.gallery-page-hero::before {

    content: "";

    position: absolute;

    inset: 0;

    background:

        radial-gradient(circle at 78% 20%,
            rgba(196, 173, 124, 0.14),
            transparent 30%),

        radial-gradient(circle at 15% 85%,
            rgba(164, 170, 156, 0.07),
            transparent 28%);

    pointer-events: none;
}



.gallery-hero-grid {

    position: relative;

    z-index: 1;

    display: grid;

    grid-template-columns:
        minmax(0, 1.25fr) minmax(280px, 0.55fr);

    align-items: end;

    gap:
        clamp(50px, 8vw, 120px);
}



.gallery-page-hero .eyebrow {

    color:
        var(--sage);
}



.gallery-page-title {

    max-width: 950px;

    margin: 0;

    font-family:
        var(--heading-font);

    font-size:
        clamp(58px, 7vw, 108px);

    font-weight: 400;

    line-height: 0.91;

    letter-spacing: -0.045em;
}



.gallery-hero-intro {

    max-width: 460px;
}


.gallery-hero-intro p {

    margin: 0;

    color:
        rgba(246, 242, 233, 0.64);

    font-size: 15px;

    line-height: 1.85;
}



/* =========================================================
   02. INTRO
========================================================= */

.gallery-intro-section {

    background:
        var(--ivory);
}


.gallery-intro-text {

    max-width: 700px;

    margin:
        clamp(40px, 5vw, 65px) 0 0;

    color:
        var(--text-muted);

    font-size: 15px;

    line-height: 1.85;
}



/* =========================================================
   03. GALLERY MEDIA
========================================================= */

.gallery-media-section {

    padding:
        0 0 var(--section-spacing);

    background:
        var(--ivory);
}



.gallery-section-heading {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 30px;

    padding:
        25px 0;

    border-top:
        1px solid rgba(36, 35, 33, 0.14);

    border-bottom:
        1px solid rgba(36, 35, 33, 0.14);
}



.gallery-section-note {

    margin: 0;

    color:
        var(--text-muted);

    font-size: 10px;

    letter-spacing: 0.12em;

    text-transform: uppercase;
}



/* =========================================================
   GALLERY GRID
========================================================= */

.gallery-masonry {

    display: grid;

    grid-template-columns:
        repeat(12, 1fr);

    gap:
        clamp(12px, 1.5vw, 24px);

    margin-top:
        clamp(30px, 4vw, 55px);
}



.gallery-item {

    grid-column:
        span 4;

    min-height:
        clamp(330px, 35vw, 520px);

    overflow: hidden;
}


.gallery-item-large {

    grid-column:
        span 8;

    min-height:
        clamp(450px, 50vw, 700px);
}


.gallery-item-wide {

    grid-column:
        span 8;

    min-height:
        clamp(360px, 38vw, 560px);
}



/* =========================================================
   PLACEHOLDER
========================================================= */

.gallery-placeholder {

    width: 100%;

    height: 100%;

    min-height: inherit;

    display: grid;

    place-items: center;

    border:
        1px solid rgba(36, 35, 33, 0.12);

    background:

        linear-gradient(145deg,
            rgba(183, 165, 143, 0.24),
            rgba(164, 170, 156, 0.10));

    color:
        rgba(36, 35, 33, 0.40);
}


.gallery-placeholder span {

    font-size: 10px;

    font-weight: 500;

    letter-spacing: 0.14em;

    text-transform: uppercase;
}



/* =========================================================
   FUTURE REAL IMAGE
========================================================= */

.gallery-item img {

    width: 100%;

    height: 100%;

    min-height: inherit;

    object-fit: cover;

    object-position: center;

    transition:
        transform 1000ms cubic-bezier(.16, 1, .3, 1);
}


@media (hover: hover) {

    .gallery-item:hover img {

        transform:
            scale(1.025);
    }

}



/* =========================================================
   04. VIDEO SECTION
========================================================= */

.gallery-video-section {

    padding-block:
        var(--section-spacing);

    background:
        #1f1e1c;

    color:
        var(--ivory);
}



.gallery-video-heading {

    display: grid;

    grid-template-columns:
        minmax(140px, 0.25fr) minmax(0, 1fr);

    gap:
        clamp(40px, 6vw, 100px);

    align-items: start;
}



.gallery-video-title {

    max-width: 850px;

    margin: 0;

    font-family:
        var(--heading-font);

    font-size:
        clamp(52px, 6vw, 90px);

    font-weight: 400;

    line-height: 0.92;

    letter-spacing: -0.04em;
}



.gallery-video-grid {

    display: grid;

    grid-template-columns:
        minmax(0, 1.4fr) minmax(280px, 0.6fr);

    gap:
        clamp(40px, 7vw, 100px);

    align-items: end;

    margin-top:
        clamp(55px, 7vw, 100px);
}



.video-placeholder {

    min-height:
        clamp(430px, 48vw, 680px);

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    gap: 18px;

    border:
        1px solid rgba(246, 242, 233, 0.12);

    background:

        linear-gradient(145deg,
            rgba(183, 165, 143, 0.16),
            rgba(164, 170, 156, 0.06));
}



.video-icon {

    width: 64px;

    height: 64px;

    display: grid;

    place-items: center;

    border:
        1px solid rgba(246, 242, 233, 0.35);

    border-radius:
        50%;

    font-size: 17px;
}



.video-label {

    color:
        rgba(246, 242, 233, 0.50);

    font-size: 10px;

    letter-spacing: 0.14em;

    text-transform: uppercase;
}



.gallery-video-copy {

    max-width: 480px;
}



.gallery-video-copy>p:last-child {

    margin:
        30px 0 0;

    color:
        rgba(246, 242, 233, 0.55);

    font-size: 14px;

    line-height: 1.8;
}



/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {


    .gallery-hero-grid {

        grid-template-columns:
            1fr;

        gap: 40px;
    }


    .gallery-hero-intro {

        max-width:
            620px;
    }


    .gallery-item,
    .gallery-item-large,
    .gallery-item-wide {

        grid-column:
            span 6;
    }


    .gallery-video-heading {

        grid-template-columns:
            1fr;
    }


    .gallery-video-grid {

        grid-template-columns:
            1fr;
    }


    .gallery-video-copy {

        max-width:
            650px;
    }

}



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

@media (max-width: 640px) {


    .gallery-page-hero {

        padding:
            130px 0 78px;
    }


    .gallery-hero-grid {

        gap:
            30px;
    }


    .gallery-page-title {

        font-size:
            clamp(48px, 14vw, 68px);

        line-height: 0.94;
    }


    .gallery-hero-intro p {

        font-size:
            14px;
    }



    .gallery-section-heading {

        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            12px;
    }



    .gallery-masonry {

        grid-template-columns:
            1fr;

        gap:
            14px;
    }


    .gallery-item,
    .gallery-item-large,
    .gallery-item-wide {

        grid-column:
            1;

        min-height:
            380px;
    }



    .gallery-video-title {

        font-size:
            clamp(48px, 14vw, 68px);
    }


    .video-placeholder {

        min-height:
            390px;
    }

}



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

@media (max-width: 390px) {


    .gallery-page-title {

        font-size:
            47px;
    }


    .gallery-item,
    .gallery-item-large,
    .gallery-item-wide {

        min-height:
            330px;
    }


    .video-placeholder {

        min-height:
            340px;
    }

}



/* =========================================================
   CONTACT PAGE STYLES
   Consolidated into style.css
========================================================= */

/* =========================================================
   JANNAT YARN & FABRICS
   CONTACT PAGE
========================================================= */


/* =========================================================
   01. CONTACT HERO
========================================================= */

.contact-hero {

    position: relative;

    overflow: hidden;

    padding:
        clamp(170px, 16vw, 230px) 0 clamp(90px, 9vw, 135px);

    background:
        var(--charcoal);

    color:
        var(--ivory);
}


.contact-hero::before {

    content: "";

    position: absolute;

    inset: 0;

    background:

        radial-gradient(circle at 78% 20%,
            rgba(196, 173, 124, 0.14),
            transparent 30%),

        radial-gradient(circle at 10% 85%,
            rgba(164, 170, 156, 0.07),
            transparent 28%);

    pointer-events: none;
}



.contact-hero-grid {

    position: relative;

    z-index: 1;

    display: grid;

    grid-template-columns:
        minmax(0, 1.3fr) minmax(280px, 0.55fr);

    align-items: end;

    gap:
        clamp(50px, 8vw, 120px);
}



.contact-hero .eyebrow {

    color:
        var(--sage);
}



.contact-page-title {

    max-width:
        980px;

    margin:
        0;

    font-family:
        var(--heading-font);

    font-size:
        clamp(58px, 7vw, 108px);

    font-weight:
        400;

    line-height:
        0.91;

    letter-spacing:
        -0.045em;
}



.contact-hero-intro {

    max-width:
        460px;
}


.contact-hero-intro p {

    margin:
        0;

    color:
        rgba(246, 242, 233, 0.64);

    font-size:
        15px;

    line-height:
        1.85;
}



/* =========================================================
   02. CONTACT DETAILS
========================================================= */

.contact-details-section {

    padding-block:
        var(--section-spacing);

    background:
        var(--ivory);
}



.contact-details-heading {

    display: grid;

    grid-template-columns:
        minmax(140px, 0.25fr) minmax(0, 1fr);

    gap:
        clamp(40px, 6vw, 100px);

    margin-bottom:
        clamp(60px, 7vw, 100px);
}



/* =========================================================
   CONTACT OPTIONS
========================================================= */

.contact-options {

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    border-top:
        1px solid rgba(36, 35, 33, 0.14);

    border-left:
        1px solid rgba(36, 35, 33, 0.14);
}



.contact-option {

    min-height:
        360px;

    padding:
        clamp(25px, 3vw, 40px);

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        space-between;

    border-right:
        1px solid rgba(36, 35, 33, 0.14);

    border-bottom:
        1px solid rgba(36, 35, 33, 0.14);

    transition:

        background 500ms ease,
        transform 500ms cubic-bezier(.16, 1, .3, 1);
}



.contact-option-top {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    color:
        var(--champagne);

    font-size:
        10px;
}



.contact-option-top span:last-child {

    color:
        var(--charcoal);

    font-size:
        17px;
}



.contact-option-content p {

    margin-bottom:
        14px;

    color:
        var(--text-muted);

    font-size:
        10px;

    font-weight:
        500;

    letter-spacing:
        0.13em;

    text-transform:
        uppercase;
}



.contact-option-content h3 {

    margin:
        0 0 18px;

    overflow-wrap:
        anywhere;

    font-family:
        var(--body-font);

    font-size:
        clamp(18px, 1.7vw, 25px);

    font-weight:
        500;

    line-height:
        1.25;

    letter-spacing:
        -0.02em;
}



.contact-option-content>span {

    color:
        var(--text-muted);

    font-size:
        13px;

    line-height:
        1.7;
}



@media (hover: hover) {

    .contact-option:hover {

        background:
            rgba(196, 173, 124, 0.11);

        transform:
            translateY(-4px);
    }

}



/* =========================================================
   03. LOCATION
========================================================= */

.contact-location-section {

    padding-block:
        var(--section-spacing);

    background:
        #1f1e1c;

    color:
        var(--ivory);
}



.contact-location-grid {

    display:
        grid;

    grid-template-columns:
        minmax(120px, 0.25fr) minmax(300px, 0.65fr) minmax(420px, 1fr);

    align-items:
        center;

    gap:
        clamp(40px, 6vw, 90px);
}



.contact-location-content .eyebrow {

    color:
        var(--sage);
}



.contact-location-title {

    max-width:
        600px;

    margin:
        0;

    font-family:
        var(--heading-font);

    font-size:
        clamp(45px, 5vw, 76px);

    font-weight:
        400;

    line-height:
        0.96;

    letter-spacing:
        -0.035em;
}



.contact-address {

    margin:
        clamp(30px, 4vw, 50px) 0 32px;

    color:
        rgba(246, 242, 233, 0.62);

    font-size:
        15px;

    font-style:
        normal;

    line-height:
        1.9;
}



/* =========================================================
   MAP PLACEHOLDER
========================================================= */

.contact-map-placeholder {

    min-height:
        clamp(430px, 42vw, 620px);

    display:
        grid;

    place-items:
        center;

    border:
        1px solid rgba(246, 242, 233, 0.12);

    background:

        radial-gradient(circle at center,
            rgba(196, 173, 124, 0.10),
            transparent 26%),

        linear-gradient(145deg,
            rgba(183, 165, 143, 0.12),
            rgba(164, 170, 156, 0.04));
}



.contact-map-inner {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    text-align:
        center;
}



.map-location-dot {

    position:
        relative;

    width:
        14px;

    height:
        14px;

    margin-bottom:
        26px;

    border-radius:
        50%;

    background:
        var(--champagne);
}



.map-location-dot::before {

    content:
        "";

    position:
        absolute;

    inset:
        -12px;

    border:
        1px solid rgba(196, 173, 124, 0.30);

    border-radius:
        50%;
}



.contact-map-inner p {

    margin:
        0;

    font-family:
        var(--heading-font);

    font-size:
        28px;
}



.contact-map-inner>span:last-child {

    margin-top:
        8px;

    color:
        rgba(246, 242, 233, 0.44);

    font-size:
        10px;

    letter-spacing:
        0.13em;

    text-transform:
        uppercase;
}



/* =========================================================
   04. SECONDARY CONTACT
========================================================= */

.contact-secondary-section {

    padding-block:
        var(--section-spacing);

    background:
        var(--ivory);
}



.contact-secondary-grid {

    display:
        grid;

    grid-template-columns:
        minmax(140px, 0.25fr) minmax(0, 1fr);

    gap:
        clamp(40px, 6vw, 100px);
}



.contact-secondary-content {

    max-width:
        900px;
}



.contact-secondary-content .large-text {

    max-width:
        680px;
}



.contact-secondary-email {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        18px;

    max-width:
        100%;

    margin-top:
        clamp(40px, 5vw, 70px);

    padding-bottom:
        10px;

    border-bottom:
        1px solid rgba(36, 35, 33, 0.20);

    font-size:
        clamp(19px, 2.5vw, 36px);

    overflow-wrap:
        anywhere;

    transition:
        border-color var(--transition);
}



.contact-secondary-email:hover {

    border-color:
        var(--champagne);
}



/* =========================================================
   05. FINAL CTA
========================================================= */

.contact-final-cta {

    padding-block:
        clamp(90px, 10vw, 150px);

    background:
        var(--champagne);

    color:
        var(--charcoal);
}



.contact-final-cta .eyebrow {

    padding-top:
        24px;

    border-top:
        1px solid rgba(36, 35, 33, 0.22);
}



.contact-final-title {

    max-width:
        1050px;

    margin:
        clamp(50px, 6vw, 85px) 0;

    font-family:
        var(--heading-font);

    font-size:
        clamp(55px, 7vw, 105px);

    font-weight:
        400;

    line-height:
        0.9;

    letter-spacing:
        -0.045em;
}



.contact-final-title em {

    display:
        block;

    margin-left:
        clamp(0px, 7vw, 100px);

    font-weight:
        400;
}



.contact-final-bottom {

    display:
        grid;

    grid-template-columns:
        minmax(250px, 440px) auto;

    align-items:
        end;

    gap:
        clamp(40px, 7vw, 100px);
}



.contact-final-bottom>p {

    margin:
        0;

    max-width:
        420px;
}



.contact-final-actions {

    display:
        flex;

    align-items:
        center;

    gap:
        28px;
}



/* =========================================================
   06. TABLET
========================================================= */

@media (max-width: 1000px) {


    .contact-hero-grid {

        grid-template-columns:
            1fr;

        gap:
            40px;
    }


    .contact-hero-intro {

        max-width:
            620px;
    }


    .contact-details-heading {

        grid-template-columns:
            1fr;
    }


    .contact-options {

        grid-template-columns:
            1fr 1fr;
    }


    .contact-option:last-child {

        grid-column:
            1 / -1;
    }


    .contact-location-grid {

        grid-template-columns:
            1fr 1fr;
    }


    .contact-location-label {

        grid-column:
            1 / -1;
    }


    .contact-secondary-grid {

        grid-template-columns:
            1fr;
    }

}



/* =========================================================
   07. MOBILE
========================================================= */

@media (max-width: 640px) {


    /* HERO */

    .contact-hero {

        padding:
            130px 0 78px;
    }


    .contact-hero-grid {

        gap:
            30px;
    }


    .contact-page-title {

        font-size:
            clamp(48px, 14vw, 68px);

        line-height:
            0.94;
    }


    .contact-hero-intro p {

        font-size:
            14px;
    }



    /* CONTACT OPTIONS */

    .contact-options {

        grid-template-columns:
            1fr;
    }


    .contact-option,
    .contact-option:last-child {

        grid-column:
            auto;

        min-height:
            260px;
    }



    /* LOCATION */

    .contact-location-grid {

        grid-template-columns:
            1fr;
    }


    .contact-location-label {

        grid-column:
            auto;
    }


    .contact-location-title {

        font-size:
            clamp(44px, 13vw, 62px);
    }


    .contact-map-placeholder {

        min-height:
            380px;
    }



    /* SECONDARY EMAIL */

    .contact-secondary-email {

        font-size:
            18px;
    }



    /* FINAL CTA */

    .contact-final-title {

        font-size:
            clamp(50px, 14vw, 72px);
    }


    .contact-final-title em {

        margin-left:
            0;
    }


    .contact-final-bottom {

        grid-template-columns:
            1fr;

        gap:
            35px;
    }


    .contact-final-actions {

        flex-direction:
            column;

        align-items:
            flex-start;

        gap:
            20px;
    }


    .contact-final-actions .button {

        width:
            100%;
    }

}



/* =========================================================
   08. SMALL MOBILE
========================================================= */

@media (max-width: 390px) {


    .contact-page-title {

        font-size:
            47px;
    }


    .contact-map-placeholder {

        min-height:
            330px;
    }


    .contact-final-title {

        font-size:
            49px;
    }

}



/* =========================================================
   FINAL INNER-PAGE CONSISTENCY OVERRIDES
   Keep About / Capabilities / Gallery / Contact visually aligned
========================================================= */

.page-hero,
.capabilities-hero,
.gallery-page-hero,
.contact-hero {
    position: relative;
    overflow: hidden;
    padding: clamp(160px, 16vw, 220px) 0 clamp(80px, 9vw, 130px);
    background: var(--charcoal);
    color: var(--ivory);
}

.page-hero-grid,
.capabilities-hero-grid,
.gallery-hero-grid,
.contact-hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(300px, 0.65fr);
    align-items: end;
    gap: clamp(50px, 8vw, 120px);
}

.page-hero .eyebrow,
.capabilities-hero .eyebrow,
.gallery-page-hero .eyebrow,
.contact-hero .eyebrow {
    color: var(--sage);
}

.page-title,
.capabilities-page-title,
.gallery-page-title,
.contact-page-title {
    margin: 0;
    max-width: 950px;
    font-family: var(--heading-font);
    font-size: clamp(54px, 7vw, 105px);
    font-weight: 400;
    line-height: 0.92;
    letter-spacing: -0.04em;
}

.page-hero-intro,
.capabilities-hero-intro,
.gallery-hero-intro,
.contact-hero-intro {
    max-width: 460px;
    padding-bottom: 8px;
}

.page-hero-intro p,
.capabilities-hero-intro p,
.gallery-hero-intro p,
.contact-hero-intro p {
    margin: 0;
    color: rgba(246, 242, 233, 0.65);
    font-size: 15px;
    line-height: 1.85;
}

/* Keep the production video consistently 16:9. */
.production-video-wrap {
    aspect-ratio: 16 / 9;
}

.production-video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
}

@media (max-width: 1000px) {
    .page-hero-grid,
    .capabilities-hero-grid,
    .gallery-hero-grid,
    .contact-hero-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .page-hero-intro,
    .capabilities-hero-intro,
    .gallery-hero-intro,
    .contact-hero-intro {
        max-width: 620px;
    }
}

@media (max-width: 640px) {
    .page-hero,
    .capabilities-hero,
    .gallery-page-hero,
    .contact-hero {
        padding: 130px 0 75px;
    }

    .page-hero-grid,
    .capabilities-hero-grid,
    .gallery-hero-grid,
    .contact-hero-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .page-title,
    .capabilities-page-title,
    .gallery-page-title,
    .contact-page-title {
        font-size: clamp(48px, 14vw, 68px);
        line-height: 0.95;
    }

    .page-hero-intro p,
    .capabilities-hero-intro p,
    .gallery-hero-intro p,
    .contact-hero-intro p {
        font-size: 14px;
    }

    .production-video-wrap {
        aspect-ratio: 16 / 9;
    }
}

@media (max-width: 390px) {
    .page-title,
    .capabilities-page-title,
    .gallery-page-title,
    .contact-page-title {
        font-size: 47px;
    }
}


/* =========================================================
   HOSTINGER LAYOUT CONSISTENCY FIX
   Keeps the shared header + home hero stable after deployment.
========================================================= */

.site-header {
    width: 100%;
    padding-inline: var(--gutter) !important;
}

.header-shell {
    width: min(100%, var(--container-width)) !important;
    min-height: 82px !important;
    margin-inline: auto !important;

    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;

    gap: 28px !important;
}

.brand-logo {
    width: auto !important;
    max-width: none !important;

    display: flex !important;
    align-items: center !important;

    flex: 0 0 auto !important;
}

.navbar-logo {
    width: 190px !important;
    max-width: 190px !important;
    height: auto !important;

    display: block !important;
    object-fit: contain !important;
}

.desktop-nav {
    margin-left: auto !important;

    display: flex !important;
    align-items: center !important;

    flex: 0 1 auto !important;
}

.header-actions {
    display: flex !important;
    align-items: center !important;

    flex: 0 0 auto !important;
}

.hero-content {
    width: min(
        calc(100% - (var(--gutter) * 2)),
        var(--container-width)
    ) !important;

    margin-inline: auto !important;

    padding-top: 140px !important;
    padding-bottom: 80px !important;
}

.hero-copy {
    width: 100% !important;
    max-width: 1050px !important;
}

.hero-title {
    max-width: 1000px !important;
}

@media (max-width: 1000px) {

    .header-shell {
        min-height: 74px !important;
        gap: 18px !important;
    }

    .navbar-logo {
        width: 165px !important;
        max-width: 165px !important;
    }

    .desktop-nav {
        display: none !important;
    }

    .header-actions {
        margin-left: auto !important;
    }

    .menu-toggle {
        display: block !important;
        flex: 0 0 44px !important;
    }

    .mobile-nav a {
        font-size: clamp(30px, 5.5vw, 40px) !important;
        line-height: 1 !important;
        padding: 13px 0 !important;
        gap: 18px !important;
    }

    .mobile-nav a span {
        min-width: 30px !important;
        font-size: 9px !important;
    }
}

@media (max-width: 640px) {

    .site-header {
        padding-inline: 20px !important;
    }

    .header-shell {
        min-height: 68px !important;
        gap: 12px !important;
    }

    .navbar-logo {
        width: 140px !important;
        max-width: 140px !important;
    }

    .inquiry-button {
        display: none !important;
    }

    .menu-toggle {
        display: block !important;
        margin-left: auto !important;

        width: 42px !important;
        height: 42px !important;

        flex-basis: 42px !important;
    }

    .hero {
        min-height: 100svh !important;
    }

    .hero-content {
        width: calc(100% - 40px) !important;

        margin-inline: auto !important;

        padding-top: 105px !important;
        padding-bottom: 100px !important;
    }

    .hero-title {
        width: 100% !important;
        max-width: 100% !important;

        font-size: clamp(48px, 13vw, 60px) !important;
        line-height: 0.92 !important;
        letter-spacing: -0.04em !important;
    }

    .hero-title em {
        margin-left: 0 !important;
    }

    .hero-bottom {
        width: 100% !important;
        max-width: 100% !important;

        margin: 28px 0 0 !important;

        display: block !important;
    }

    .hero-description {
        max-width: 360px !important;

        font-size: 14px !important;
        line-height: 1.75 !important;
    }

    .hero-actions {
        width: 100% !important;

        margin-top: 26px !important;

        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;

        gap: 20px !important;
    }

    .hero-actions .button {
        width: fit-content !important;
        min-width: 0 !important;

        padding-inline: 18px !important;
    }

    .mobile-menu-inner {
        padding-top: 90px !important;
    }

    .mobile-nav a {
        font-size: 30px !important;
        padding: 12px 0 !important;
    }
}

@media (max-width: 390px) {

    .site-header {
        padding-inline: 16px !important;
    }

    .navbar-logo {
        width: 128px !important;
        max-width: 128px !important;
    }

    .hero-content {
        width: calc(100% - 32px) !important;
    }

    .hero-title {
        font-size: 50px !important;
    }
}


/* =========================================================
   UNIVERSAL ICON SUPPORT — FONT AWESOME
   Icon-only enhancement; existing layout remains unchanged.
========================================================= */

.contact-link-icon {
    width: 1.1em;
    margin-right: 8px;
    display: inline-block;
    text-align: center;
}

.inquiry-button i,
.button i,
.text-link i,
.capability-arrow i,
.back-to-top i,
.contact-option-top i,
.contact-secondary-email i {
    line-height: 1;
}