/* Uztex Group — overrides & new structural CSS on top of the AUREA base stylesheet.
   Brand accent: red/orange (was pure black/white/cream in the original). */

:root {
    --brand-red: #E5222B;
    --brand-red-hover: #C41E26;
    --brand-orange: #F97316;
    --ink: #1c1917;
    --paper: #f7f3ee;
    --paper2: #efeff0;
    --line: #e4dfd8;
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth;
    background: var(--ink)
}

body {
    font-family: 'Inter', sans-serif;
    color: var(--ink);
    background: var(--paper);
}

.container {
    width: 100%;
    max-width: 1360px;
    margin: 0 auto;
    padding: 0 40px;
}

section {
    padding: 110px 0
}

@media (max-width: 900px) {
    section {
        padding: 64px 0
    }

    .container {
        padding: 0 24px
    }
}

a {
    color: inherit;
    text-decoration: none
}

img {
    max-width: 100%;
    display: block
}

/* ---------- shared type helpers (reused from Aurea's own class names) ---------- */
.mini-title {
    font-size: 13px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--brand-red);
    font-weight: 600;
    margin-bottom: 14px
}

.sub-title {
    font-size: 13px;
    color: #757575;
    letter-spacing: .03em
}

.sub-title.align-right {
    text-align: right
}

.sub-title.mb-12 {
    margin-bottom: 12px
}

.sub-title.mb-40 {
    margin-bottom: 40px
}

.sub-title.mb-60 {
    margin-bottom: 60px
}

.sub-title.mb-80 {
    margin-bottom: 80px
}

.sub-title.is-white {
    color: #ccc
}

.sub-title.text-ash-gray {
    color: #999
}

.section-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: clamp(28px, 4vw, 52px);
    line-height: 1.15;
    letter-spacing: -.01em;
    max-width: 900px;
    margin: 18px 0;
    text-transform: none
}

.section-sub-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: clamp(22px, 3vw, 38px);
    line-height: 1.3;
    letter-spacing: -.01em;
    max-width: 820px;
    text-transform: none
}

.regular-details {
    font-size: 16px;
    color: #666;
    line-height: 1.6;
    max-width: 520px
}

.mt-16 {
    margin-top: 16px
}

/* ---------- buttons ---------- */
.primary-button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--brand-red);
    color: #fff;
    padding: 16px 28px;
    border-radius: 100px;
    font-size: 14px;
    font-weight: 600;
    transition: background .3s
}

.primary-button:hover {
    background: var(--brand-red-hover)
}

.tertiary-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
    border-bottom: 1px solid var(--ink);
    padding-bottom: 2px;
    transition: border-color .3s, color .3s
}

.tertiary-button:hover {
    color: var(--brand-red);
    border-color: var(--brand-red)
}

.quaternary-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #757575;
    text-transform: uppercase;
    letter-spacing: .06em
}

.quaternary-button:hover {
    color: var(--brand-red)
}

/* ---------- NAV ---------- */
.navbar-wrap {
    position: sticky;
    top: 0;
    z-index: 300;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    transition: background .3s, border-color .3s
}

.navbar-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 0
}

.navbar-menu {
    display: flex;
    gap: 32px
}

.navbar-menu a {
    font-size: 14px;
    font-weight: 500
}

.navbar-menu a:hover {
    color: var(--brand-red)
}

.navbar-right {
    display: flex;
    align-items: center;
    gap: 24px
}

.navbar-time-text {
    font-size: 13px;
    color: #757575;
    font-variant-numeric: tabular-nums
}

.menu-toggle {
    width: 36px;
    height: 36px;
    border: 1px solid var(--ink);
    border-radius: 50%;
    background: none;
    cursor: pointer;
    position: relative
}

.menu-toggle span {
    position: absolute;
    left: 9px;
    right: 9px;
    height: 1px;
    background: var(--ink);
    transition: transform .3s
}

.menu-toggle span:nth-child(1) {
    top: 15px
}

.menu-toggle span:nth-child(2) {
    top: 20px
}

.menu-toggle.open span:nth-child(1) {
    transform: translateY(3px) rotate(45deg)
}

.menu-toggle.open span:nth-child(2) {
    transform: translateY(-2px) rotate(-45deg)
}

@media (max-width: 700px) {
    .navbar-menu {
        display: none
    }
}

.nav-menu-overlay {
    position: fixed;
    inset: 0;
    background: var(--ink);
    color: #fff;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity .4s
}

.nav-menu-overlay.open {
    opacity: 1;
    pointer-events: all
}

.nav-menu-inner {
    width: 100%;
    max-width: 720px;
    padding: 0 40px
}

.nav-menu-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 18px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .15)
}

.nav-menu-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: clamp(28px, 5vw, 52px);
    transition: color .3s
}

.nav-menu-row:hover .nav-menu-title {
    color: var(--brand-orange)
}

.nav-menu-number {
    font-size: 13px;
    color: #999
}

.nav-menu-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 32px
}

.hero-nav-bottom-link {
    font-size: 14px;
    border-bottom: 1px solid #fff;
    padding-bottom: 2px;
    color: #fff !important;
    text-transform: none;
    font-weight: 400;
    line-height: normal
}

.hero-nav-bottom-link:hover {
    color: var(--brand-orange) !important;
    border-color: var(--brand-orange)
}

/* Navbar stays on top of the fullscreen menu (was hidden behind it, z-index
   200 > 100) and switches to a transparent/white look while the menu is open. */
.navbar-wrap.menu-open {
    background: transparent;
    border-color: transparent
}

.navbar-wrap.menu-open .nav-logo-link {
    filter: brightness(0) invert(1)
}

.navbar-wrap.menu-open .navbar-menu a {
    color: #fff
}

.navbar-wrap.menu-open .navbar-time-text {
    color: #ccc
}

.navbar-wrap.menu-open .menu-toggle {
    border-color: #fff
}

.navbar-wrap.menu-open .menu-toggle span {
    background: #fff
}

/* ---------- HERO ---------- */
.hero-section {
    padding-top: 70px;
    padding-bottom: 60px
}

.hero-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: clamp(44px, 8vw, 128px);
    line-height: .95;
    letter-spacing: -.02em;
    color: var(--ink);
    margin-top: 14px
}

/* Full-bleed background video below the hero text, matching uztexgroup.com's
   own hero layout — big heading up top, large video panel underneath. */
.hero-video-wrap {
    position: relative;
    width: 100%;
    height: 78vh;
    min-height: 520px;
    max-height: 820px;
    margin-top: 48px;
    overflow: hidden
}

.hero-video-bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    animation: hero-kenburns 24s ease-in-out infinite alternate
}

@keyframes hero-kenburns {
    from {
        transform: scale(1)
    }
    to {
        transform: scale(1.1)
    }
}

.hero-video-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 32px 40px;
    background: linear-gradient(to top, rgba(0, 0, 0, .55), transparent)
}

.hero-video-caption {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1360px;
    margin: 0 auto
}

.hero-video-caption .hero-branding-title {
    color: #fff;
    font-size: 16px
}

@media (max-width: 900px) {
    .hero-video-wrap {
        height: 56vh;
        min-height: 360px
    }
}

.hero-feature-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px
}

.hero-branding-title {
    font-size: 15px;
    font-weight: 600
}

.hero-bottom-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1360px;
    margin: 60px auto 0;
    padding: 24px 40px 0;
    border-top: 1px solid var(--line)
}

@media (max-width: 900px) {
    .hero-grid {
        grid-template-columns:1fr;
        gap: 32px
    }
}

/* ---------- ABOUT ---------- */
.about-grid {
    display: grid;
    grid-template-columns:200px 1fr;
    gap: 24px;
    align-items: start;
    margin: 20px 0 40px
}

@media (max-width: 700px) {
    .about-grid {
        grid-template-columns:1fr
    }
}

/* ---------- TICKER ---------- */
.about-ticker-wrap {
    overflow: hidden;
    background: var(--ink);
    padding: 22px 0;
    white-space: nowrap
}

.about-ticker-track {
    display: inline-flex;
    animation: ticker-scroll 22s linear infinite
}

.about-ticker-track span {
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 32px;
    color: #fff;
    padding: 0 28px;
    display: inline-flex;
    align-items: center;
    gap: 28px
}

.about-ticker-track span::after {
    content: '—';
    color: var(--brand-orange)
}

@keyframes ticker-scroll {
    from {
        transform: translateX(0)
    }
    to {
        transform: translateX(-50%)
    }
}

/* ---------- VISIONS / STATS ---------- */
.visions-top-row {
    display: grid;
    grid-template-columns:1fr 1fr;
    gap: 40px;
    padding-bottom: 60px;
    margin-bottom: 60px;
    border-bottom: 1px solid var(--line)
}

.visions-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: clamp(36px, 6vw, 80px)
}

.visions-mini-title {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 10px
}

.stat-number-grid {
    display: grid;
    grid-template-columns:repeat(4, 1fr);
    gap: 32px;
    margin-top: 20px
}

.stat-number-main-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: clamp(48px, 6vw, 88px);
    color: var(--brand-red)
}

.stat-number-mini-title {
    font-size: 13px;
    color: #999;
    text-transform: uppercase;
    letter-spacing: .05em
}

.stat-number-mini-title.tablet-only {
    display: none
}

.stat-number-details {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
    margin-top: 12px;
    max-width: 320px
}

.capacity-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    margin-top: 56px;
    border-top: 1px solid var(--line);
    padding-top: 32px
}

.capacity-strip div {
    flex: 1;
    min-width: 140px;
    padding: 0 24px;
    border-left: 1px solid var(--line)
}

.capacity-strip div:first-child {
    padding-left: 0;
    border-left: none
}

.capacity-strip strong {
    display: block;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 26px;
    color: var(--brand-red)
}

.capacity-strip span {
    display: block;
    font-size: 12px;
    color: #999;
    margin-top: 4px
}

@media (max-width: 900px) {
    .capacity-strip {
        flex-direction: column;
        gap: 16px
    }

    .capacity-strip div {
        border-left: none;
        padding-left: 0
    }
}

@media (max-width: 900px) {
    .visions-top-row, .stat-number-grid {
        grid-template-columns:1fr
    }
}

/* ---------- FACILITIES SHOWCASE (boundaries) ---------- */
.boundaries-section {
    background: var(--ink);
    color: #fff
}

.boundaries-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: clamp(32px, 5vw, 64px);
    max-width: 800px;
    margin-bottom: 40px
}

/* Full resets — Aurea's own .boundaries-card is a small 309px-wide thumbnail
   card (cream background, 16px padding); this is a full-bleed photo card,
   so every conflicting property from style.css is explicitly cleared. */
.boundaries-card {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    background: none;
    background-color: transparent;
    max-width: none;
    width: 100%;
    margin: 0;
    padding: 0;
    text-align: left
}

.boundaries-card-img {
    width: 100%;
    height: 480px;
    object-fit: cover;
    border-radius: 0;
    margin-bottom: 0;
    display: block
}

.boundaries-card-bottom {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 28px;
    background: linear-gradient(to top, rgba(0, 0, 0, .7), transparent);
    color: #fff
}

.boundaries-card-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 6px;
    color: #fff !important;
    text-transform: none;
    letter-spacing: normal;
    line-height: 1.3
}

.boundaries-card-details {
    font-size: 13px;
    color: #ddd !important;
    margin-bottom: 10px;
    text-transform: none
}

.boundaries-card-bottom-text {
    display: inline-block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .06em;
    background: var(--brand-red);
    padding: 4px 10px;
    border-radius: 100px;
    color: #fff !important
}

/* ---------- SERVICES / PROCESS ---------- */
.services-list {
    margin: 40px 0
}

.services-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 34px 0;
    border-bottom: 1px solid var(--line);
    transition: padding-left .3s
}

.services-row:hover {
    padding-left: 16px;
    border-color: var(--brand-red)
}

.services-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: clamp(26px, 4vw, 48px);
    transition: color .3s
}

.services-row:hover .services-title {
    color: var(--brand-red)
}

.services-number {
    font-size: 14px;
    color: #999
}

/* ---------- QUALITY / MEMBER ---------- */
.member-grid {
    display: grid;
    grid-template-columns:.8fr 1fr;
    gap: 48px;
    align-items: center;
    margin: 24px 0 56px
}

.member-photo {
    width: 100%;
    border-radius: 18px;
    object-fit: cover;
    height: 380px
}

.about-member-title {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 4px
}

.about-member-bio {
    font-size: 14px;
    color: #757575;
    margin-bottom: 18px
}

.key-members-title {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #999;
    margin-bottom: 20px
}

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

.key-members-card {
    border-top: 1px solid var(--line);
    padding-top: 18px
}

.cert-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(229, 34, 43, .08);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px
}

.cert-icon svg {
    width: 19px;
    height: 19px;
    color: var(--brand-red)
}

.key-members-name {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 6px
}

.key-members-bio {
    font-size: 13px;
    color: #757575
}

@media (max-width: 900px) {
    .member-grid {
        grid-template-columns:1fr
    }

    .key-members-grid {
        grid-template-columns:repeat(2, 1fr)
    }
}

/* ---------- MILESTONES / ACHIEVEMENTS ---------- */
.achievements-grid {
    display: grid;
    grid-template-columns:repeat(3, 1fr);
    gap: 24px;
    margin-top: 40px
}

.achievements-card {
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 28px 22px;
    background: #fff
}

.archivements-card-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 14px
}

.archivements-card-date {
    font-size: 13px;
    color: var(--brand-red);
    font-weight: 600;
    margin-bottom: 4px
}

.archivements-card-bio {
    font-size: 13px;
    color: #757575
}

@media (max-width: 900px) {
    .achievements-grid {
        grid-template-columns:1fr 1fr
    }
}

/* ---------- PRODUCT CATEGORIES (testimonial tabs) ---------- */
.testimonial-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: clamp(30px, 4.5vw, 54px);
    margin: 14px 0 40px;
    color: var(--ink)
}

.testimonial-tabs {
    display: flex;
    gap: 12px;
    margin-bottom: 36px;
    flex-wrap: wrap
}

.testimonial-tab {
    cursor: pointer;
    padding: 14px 22px;
    border-radius: 100px;
    border: 1px solid var(--line);
    background: #fff;
    transition: background .3s, color .3s, border-color .3s
}

.testimonial-tab .testimonial-tabs-title {
    font-size: 15px;
    font-weight: 600;
    margin: 0;
    color: var(--ink)
}

.testimonial-tab .testimonial-tabs-sub {
    font-size: 12px;
    color: #999
}

.testimonial-tab.active, .testimonial-tab:hover {
    background: var(--brand-red);
    border-color: var(--brand-red)
}

.testimonial-tab.active .testimonial-tabs-title, .testimonial-tab:hover .testimonial-tabs-title,
.testimonial-tab.active .testimonial-tabs-sub, .testimonial-tab:hover .testimonial-tabs-sub {
    color: #fff
}

.testimonial-panels {
    position: relative
}

.testimonial-panel {
    display: none;
    grid-template-columns:1fr 1fr;
    gap: 40px;
    align-items: center
}

.testimonial-panel.active {
    display: grid
}

.testimonial-panel img {
    border-radius: 16px;
    height: 340px;
    object-fit: cover;
    width: 100%
}

.testimonial-tabs-details {
    font-size: 17px;
    line-height: 1.6;
    color: #444
}

@media (max-width: 800px) {
    .testimonial-panel {
        grid-template-columns:1fr
    }
}

/* ---------- NEWS / BLOG ---------- */
.blog-grid {
    display: grid;
    grid-template-columns:repeat(3, 1fr);
    gap: 28px;
    margin-top: 40px
}

.blog-card img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    border-radius: 14px;
    margin-bottom: 14px
}

.blog-card-title {
    font-size: 17px;
    font-weight: 600;
    margin-top: 6px
}

.blog-section .section-title {
    margin-bottom: 8px
}

@media (max-width: 900px) {
    .blog-grid {
        grid-template-columns:1fr
    }
}

/* ---------- CTA ---------- */
.cta-section {
    text-align: center;
    background: var(--paper2)
}

.cta-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: clamp(32px, 6vw, 70px);
    max-width: 900px;
    margin: 0 auto 32px;
    letter-spacing: -.01em
}

/* ---------- FOOTER ---------- */
.footer-section {
    background: var(--ink);
    color: #fff;
    padding-top: 80px
}

.footer-grid {
    display: grid;
    grid-template-columns:repeat(3, 1fr);
    gap: 32px;
    padding-bottom: 60px;
    border-bottom: 1px solid rgba(255, 255, 255, .15)
}

.footer-menu-title {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #999;
    margin-bottom: 14px
}

.footer-menu-link {
    display: block;
    font-size: 15px;
    margin-bottom: 8px;
    color: #eee
}

.footer-menu-link:hover {
    color: var(--brand-orange)
}

.footer-big-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: clamp(48px, 10vw, 150px);
    line-height: .9;
    margin: 40px 0 20px;
    letter-spacing: -.02em;
    word-break: break-word
}

.ft-red {
    color: var(--brand-red)
}

.ft-orange {
    color: var(--brand-orange)
}

.copyright-row {
    display: flex;
    justify-content: flex-end;
    padding: 20px 0 28px
}

.copyright-text {
    font-size: 11px !important;
    color: #888 !important;
    text-transform: none !important;
    font-weight: 400 !important;
    line-height: 1.5 !important
}

@media (max-width: 700px) {
    .footer-grid {
        grid-template-columns:1fr
    }
}

/* ---------- scroll reveal ---------- */
.silk-reveal {
    opacity: 0;
    transform: translateY(24px)
}

.silk-reveal.visible {
    animation: silk-in .8s cubic-bezier(.16, 1, .3, 1) forwards
}

@keyframes silk-in {
    to {
        opacity: 1;
        transform: translateY(0)
    }
}

.silk-reveal-up {
    opacity: 0;
    transform: translateY(48px) scale(.98)
}

.silk-reveal-up.visible {
    animation: silk-in-up 1s cubic-bezier(.16, 1, .3, 1) forwards
}

@keyframes silk-in-up {
    to {
        opacity: 1;
        transform: translateY(0) scale(1)
    }
}

.silk-line {
    position: relative;
    overflow: hidden
}

.silk-line-inner {
    display: block;
    transform: translateY(110%);
    transition: transform .8s cubic-bezier(.16, 1, .3, 1)
}

.silk-line.visible .silk-line-inner {
    transform: translateY(0)
}

.count-bar {
    height: 2px;
    background: var(--line);
    position: relative;
    overflow: hidden;
    margin-top: 14px;
    border-radius: 2px
}

.count-bar-fill {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0;
    background: var(--brand-red);
    transition: width 1.1s cubic-bezier(.16, 1, .3, 1)
}

.parallax-img {
    will-change: transform;
    transform: scale(1.12)
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important
    }

    .silk-reveal, .silk-reveal-up, .silk-line-inner {
        opacity: 1 !important;
        transform: none !important
    }
}

/* ---------- cursor & focus (accessibility pass) ---------- */
a, button, .testimonial-tab, .menu-toggle {
    cursor: pointer
}

a:focus-visible, button:focus-visible, .testimonial-tab:focus-visible {
    outline: 2px solid var(--brand-red);
    outline-offset: 3px
}

/* ---------- why-grid (value prop cards, used on about.html) ---------- */
.why-grid {
    display: grid;
    grid-template-columns:repeat(2, 1fr);
    gap: 20px
}

.why-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 26px
}

.boundaries-section .why-card {
    background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .15)
}

.why-card h3 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--ink)
}

.boundaries-section .why-card h3 {
    color: #fff
}

.why-card p {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
    margin: 0
}

.boundaries-section .why-card p {
    color: #bbb
}

@media (max-width: 800px) {
    .why-grid {
        grid-template-columns:1fr
    }
}

.capability-list {
    display: grid;
    grid-template-columns:1fr 1fr;
    gap: 14px 40px;
    margin-top: 20px
}

.capability-list div {
    font-size: 15px;
    color: #444;
    padding: 14px 0;
    border-bottom: 1px solid var(--line)
}

@media (max-width: 800px) {
    .capability-list {
        grid-template-columns:1fr
    }
}

.hero-facts-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    max-width: 1360px;
    margin: 0 auto;
    padding: 28px 40px 0;
    border-top: 1px solid var(--line);
    margin-top: 20px
}

.hero-facts-strip div {
    flex: 1;
    min-width: 120px;
    padding: 0 20px;
    border-left: 1px solid var(--line)
}

.hero-facts-strip div:first-child {
    padding-left: 0;
    border-left: none
}

.hero-facts-strip strong {
    display: block;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 20px;
    color: var(--brand-red)
}

.hero-facts-strip span {
    display: block;
    font-size: 11px;
    color: #999;
    margin-top: 2px
}

@media (max-width: 900px) {
    .hero-facts-strip {
        flex-direction: column;
        gap: 12px;
        padding: 20px 24px 0
    }

    .hero-facts-strip div {
        border-left: none;
        padding-left: 0
    }
}

.tech-intro-grid {
    display: grid;
    grid-template-columns:1fr 1fr;
    gap: 40px;
    align-items: center;
    margin-bottom: 48px
}

.tech-intro-img {
    width: 100%;
    height: 280px;
    object-fit: cover;
    border-radius: 16px;
    overflow: hidden;
    display: block
}

@media (max-width: 800px) {
    .tech-intro-grid {
        grid-template-columns:1fr
    }
}

.tag-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 20px
}

.tag-row span {
    font-size: 12px;
    padding: 6px 14px;
    border-radius: 100px;
    background: var(--paper2);
    color: #555;
    border: 1px solid var(--line)
}

.customise-box {
    background: var(--ink);
    border-radius: 18px;
    padding: 36px;
    margin-top: 56px
}

/* ---------- contact page ---------- */
.contact-grid {
    display: grid;
    grid-template-columns:repeat(3, 1fr);
    gap: 20px
}

.contact-card {
    display: block;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 28px;
    transition: border-color .3s, transform .3s
}

a.contact-card:hover {
    border-color: var(--brand-red);
    transform: translateY(-3px)
}

.contact-card-value {
    font-size: 18px;
    font-weight: 600;
    color: var(--ink)
}

.contact-card-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(229, 34, 43, .08);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px
}

.contact-card-icon svg {
    width: 20px;
    height: 20px;
    color: var(--brand-red)
}

@media (max-width: 800px) {
    .contact-grid {
        grid-template-columns:1fr
    }
}

.app-inner-grid {
    display: grid;
    grid-template-columns:1fr .8fr;
    gap: 48px;
    align-items: center
}

.phone-frame-wrap {
    display: flex;
    justify-content: center
}

.phone-frame {
    width: 280px;
    background: var(--bg3, var(--ink));
    border: 2px solid var(--border2, #333);
    border-radius: 38px;
    padding: 8px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .35)
}

.phone-frame img {
    border-radius: 30px;
    width: 100%;
    display: block
}

@media (max-width: 800px) {
    .app-inner-grid {
        grid-template-columns:1fr
    }
}

/* ---------- top rate ticker (live CBU exchange rates) ---------- */
.rate-ticker {
    background: var(--ink);
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    height: 34px;
    overflow: hidden;
    display: flex;
    align-items: center;
    white-space: nowrap
}

.rate-ticker-track {
    display: inline-flex;
    animation: ticker-scroll 28s linear infinite
}

.rate-ticker:hover .rate-ticker-track {
    animation-play-state: paused
}

.rate-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 24px;
    font-size: 11px;
    letter-spacing: .04em;
    border-right: 1px solid rgba(255, 255, 255, .12);
    font-family: 'Inter', sans-serif
}

.rate-sym {
    color: #999;
    font-weight: 600
}

.rate-price {
    color: #fff
}

.rate-up {
    color: #3DCC8E
}

.rate-dn {
    color: var(--brand-red)
}

/* ---------- bottom fact ticker ---------- */
.bottom-ticker-wrap {
    overflow: hidden;
    background: var(--ink);
    border-top: 1px solid rgba(255, 255, 255, .1);
    padding: 20px 0;
    white-space: nowrap
}

.bottom-ticker-track {
    display: inline-flex;
    animation: ticker-scroll 24s linear infinite
}

.bottom-ticker-wrap:hover .bottom-ticker-track {
    animation-play-state: paused
}

.bottom-ticker-track span {
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 22px;
    color: #eee;
    padding: 0 24px;
    display: inline-flex;
    align-items: center;
    gap: 24px
}

.bottom-ticker-track span::after {
    content: '—';
    color: var(--brand-orange)
}

/* ---------- "why partners" cards (was borrowing undefined classes from a
   different template — these are Aurea-native, defined fresh) ---------- */
.testi-track-wrap {
    overflow: hidden;
    margin-top: 40px;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent)
}

.testi-track {
    display: inline-flex;
    gap: 20px;
    animation: ticker-scroll 40s linear infinite
}

.testi-track-wrap:hover .testi-track {
    animation-play-state: paused
}

.testi-card {
    flex: 0 0 380px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 32px
}

.testi-quote {
    font-size: 16px;
    line-height: 1.6;
    color: #333;
    margin-bottom: 24px;
    min-height: 96px
}

.testi-author {
    display: flex;
    align-items: center;
    gap: 12px
}

.testi-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--brand-red);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0
}

.testi-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--ink)
}

.testi-role {
    font-size: 12px;
    color: #999
}

/* ---------- page nav (multi-page) ---------- */
.navbar-menu a.current {
    color: var(--brand-red)
}

.subpage-hero {
    padding: 150px 0 60px
}

.subpage-hero .mini-title {
    margin-bottom: 10px
}

.subpage-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: clamp(40px, 7vw, 96px);
    line-height: .95;
    letter-spacing: -.02em
}

.breadcrumb {
    font-size: 13px;
    color: #999;
    margin-bottom: 18px
}

.breadcrumb a {
    color: #999;
    transition: color .3s
}

.breadcrumb a:hover {
    color: var(--brand-red)
}

/* ---------- product sub-category grid (real photos + specs from the
   catalogue's dedicated Hosiery / Knitted Garments / Yarn pages) ---------- */
.subcat-heading {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #999;
    margin: 44px 0 18px
}

.subcat-grid {
    display: grid;
    grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px
}

.subcat-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
    transition: transform .35s, box-shadow .35s
}

.subcat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 32px rgba(0, 0, 0, .08)
}

.subcat-card-img {
    width: 100%;
    aspect-ratio: 4/5;
    object-fit: cover;
    display: block
}

.subcat-card-body {
    padding: 14px 16px 18px
}

.subcat-card-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 4px
}

.subcat-card-spec {
    font-size: 12px;
    line-height: 1.5;
    color: #888
}

.yarn-photo-strip {
    display: grid;
    grid-template-columns:repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 24px
}

.yarn-photo-strip img {
    width: 100%;
    aspect-ratio: 4/5;
    object-fit: cover;
    border-radius: 12px
}

.yarn-spec-grid {
    display: grid;
    grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px
}

.yarn-spec-card {
    background: var(--surface, #f7f5f2);
    border-radius: 12px;
    padding: 18px 20px;
    border-left: 3px solid var(--brand-orange)
}

.yarn-spec-card h4 {
    font-size: 14px;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 6px
}

.yarn-spec-card p {
    font-size: 12.5px;
    line-height: 1.6;
    color: #888;
    margin: 0
}

@media (max-width: 767px) {
    .yarn-photo-strip {
        grid-template-columns:repeat(2, 1fr)
    }
}

/* ---------- Uzbekistan facility map ---------- */
.uz-map-wrap {
    position: relative;
    background: #f7f5f2;
    border-radius: 20px;
    padding: 20px;
    overflow: hidden
}

.uz-map-img {
    width: 100%;
    height: auto;
    display: block;
    filter: grayscale(1) brightness(1.02)
}

.uz-map-pin {
    position: absolute;
    transform: translate(-50%, -100%);
    display: flex;
    flex-direction: column;
    align-items: center
}

.uz-map-pin-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--brand-red);
    position: relative;
    box-shadow: 0 0 0 4px rgba(206, 32, 39, .15)
}

.uz-map-pin-dot::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--brand-red);
    animation: uz-pin-pulse 2.2s ease-out infinite
}

@keyframes uz-pin-pulse {
    0% {
        transform: scale(1);
        opacity: .7
    }
    100% {
        transform: scale(3.2);
        opacity: 0
    }
}

.uz-map-pin-label {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translate(-50%, 6px);
    background: var(--ink);
    color: #fff;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    text-align: center;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .15);
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease, transform .3s ease
}

.uz-map-pin:hover .uz-map-pin-label,
.uz-map-pin:focus-within .uz-map-pin-label {
    opacity: 1;
    transform: translate(-50%, 0)
}

.uz-map-pin-dot {
    cursor: pointer
}

.uz-map-pin-label small {
    display: block;
    font-size: 10.5px;
    font-weight: 400;
    color: #bbb;
    margin-top: 2px
}

.map-stat-row {
    display: flex;
    gap: 48px;
    margin-top: 36px;
    flex-wrap: wrap
}

.map-stat-row div {
    display: flex;
    flex-direction: column
}

.map-stat-row strong {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 32px;
    color: var(--ink)
}

.map-stat-row span {
    font-size: 12px;
    color: #999;
    text-transform: uppercase;
    letter-spacing: .03em;
    margin-top: 2px
}

@media (prefers-reduced-motion: reduce) {
    .uz-map-pin-dot::before {
        animation: none
    }
}

/* ---------- named facilities grid ---------- */
.facility-grid {
    display: grid;
    grid-template-columns:repeat(auto-fill, minmax(320px, 1fr));
    align-items: start;
    gap: 20px;
    margin-top: 8px
}

.facility-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 22px 28px;
    transition: transform .35s, box-shadow .35s, border-color .35s
}

.facility-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 32px rgba(0, 0, 0, .08)
}

.facility-card.open {
    border-color: var(--brand-red)
}

.facility-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    background: none;
    border: none;
    padding: 2px 0;
    margin: 0;
    font: inherit;
    text-align: left;
    cursor: pointer;
    -webkit-appearance: none
}

.facility-card-top h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--ink);
    flex: 1;
    transition: color .3s
}

.facility-card:hover .facility-card-top h3 {
    color: var(--brand-red)
}

.facility-tag {
    flex-shrink: 0;
    background: var(--brand-red);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 20px
}

.facility-chevron {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: #aaa;
    transition: transform .4s cubic-bezier(.4, 0, .2, 1)
}

.facility-card.open .facility-chevron {
    transform: rotate(180deg);
    color: var(--brand-red)
}

.facility-card-body {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height .45s cubic-bezier(.4, 0, .2, 1), opacity .35s ease
}

.facility-card.open .facility-card-body {
    opacity: 1
}

.facility-card-body-inner {
    padding-top: 14px
}

.facility-tagline {
    font-size: 13.5px;
    line-height: 1.6;
    color: #888;
    margin-bottom: 14px
}

.facility-address {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    font-size: 12.5px;
    line-height: 1.5;
    color: #666;
    margin-bottom: 18px
}

.facility-address svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    margin-top: 1px;
    color: var(--brand-orange)
}

.facility-stats {
    display: flex;
    gap: 22px;
    border-top: 1px solid var(--line);
    padding-top: 16px;
    flex-wrap: wrap
}

.facility-stats div {
    display: flex;
    flex-direction: column
}

.facility-stats strong {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 17px;
    color: var(--ink)
}

.facility-stats span {
    font-size: 10.5px;
    color: #999;
    text-transform: uppercase;
    letter-spacing: .03em;
    margin-top: 1px
}

@media (prefers-reduced-motion: reduce) {
    .facility-card-body, .facility-chevron {
        transition: none
    }
}

/* ---------- contact form ---------- */
.contact-form-section {
    background: var(--ink)
}

.contact-form-grid {
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    gap: 60px;
    align-items: start
}

.contact-form-intro .mini-title {
    color: var(--brand-orange)
}

.contact-form-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: clamp(30px, 3.4vw, 42px);
    line-height: 1.15;
    color: #fff;
    margin: 14px 0 16px
}

.contact-form-intro p {
    color: #b8b3ac;
    font-size: 15px;
    line-height: 1.7;
    max-width: 380px
}

.contact-form-mini {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 36px
}

.contact-form-mini a {
    color: #eee;
    font-size: 14px;
    transition: color .3s
}

.contact-form-mini a:hover {
    color: var(--brand-orange)
}

.contact-form-card {
    background: #26221f;
    border-radius: 20px;
    padding: 40px
}

.contact-form-success {
    display: flex;
    align-items: center;
    gap: 14px;
    background: rgba(249, 115, 22, .1);
    border: 1px solid rgba(249, 115, 22, .3);
    border-radius: 12px;
    padding: 18px 20px;
    color: #fff;
    font-size: 14px;
    margin-bottom: 28px
}

.contact-form-success svg {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    color: var(--brand-orange)
}

.contact-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px
}

.contact-field {
    margin-bottom: 20px
}

.contact-field label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #9c968d;
    margin-bottom: 8px
}

.contact-field input,
.contact-field select,
.contact-field textarea {
    display: block;
    width: 100%;
    min-height: 46px;
    appearance: none;
    -webkit-appearance: none;
    background-color: #35302b;
    border: 1px solid #46403a;
    border-radius: 10px;
    padding: 12px 14px;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    line-height: 1.4;
    color: #fdfdfc;
    caret-color: #fff;
    color-scheme: dark;
    transition: border-color .2s, box-shadow .2s;
    resize: vertical
}

.contact-field textarea {
    min-height: 130px
}

.contact-field input[type="text"],
.contact-field input[type="email"],
.contact-field input[type="tel"] {
    background-color: #35302b !important;
    color: #fdfdfc !important
}

.contact-field input:-webkit-autofill,
.contact-field input:-webkit-autofill:hover,
.contact-field input:-webkit-autofill:focus {
    -webkit-text-fill-color: #fdfdfc;
    -webkit-box-shadow: 0 0 0 1000px #35302b inset;
    transition: background-color 5000s ease-in-out 0s
}

.contact-phone-group {
    display: flex;
    gap: 10px
}

.contact-phone-group select {
    flex: 0 0 112px;
    width: 112px;
    padding-left: 12px
}

.contact-phone-group input {
    flex: 1
}

.contact-field select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b5afa6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    padding-right: 34px
}

.contact-field select option {
    background: #35302b;
    color: #fdfdfc
}

.contact-field input::placeholder,
.contact-field textarea::placeholder {
    color: #7d766c
}

.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus {
    outline: none;
    border-color: var(--brand-orange);
    box-shadow: 0 0 0 3px rgba(249, 115, 22, .18)
}

.contact-field-error {
    color: #ff9a86;
    font-size: 12px;
    margin-top: 6px
}

.contact-form-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    background: var(--brand-red);
    color: #fff;
    border: none;
    border-radius: 30px;
    padding: 0 34px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background .3s, transform .3s;
    margin-top: 6px
}

.contact-form-submit:hover {
    background: var(--brand-red-hover);
    transform: translateY(-2px)
}

.contact-form-submit:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px
}

@media (max-width: 900px) {
    .contact-form-grid {
        grid-template-columns: 1fr
    }
    .contact-form-row {
        grid-template-columns: 1fr
    }
    .contact-form-card {
        padding: 28px
    }
    .contact-phone-group {
        flex-wrap: wrap
    }
    .contact-phone-group select {
        flex: 0 0 100px
    }
}