@font-face {
    font-family: 'Manrope';
    src: url('assets/fonts/manrope-latin-variable.woff2') format('woff2');
    font-weight: 400 800;
    font-style: normal;
    font-display: swap;
}

:root {
    color-scheme:light;
    --brand:#10253f;
    --brand-dark:#091c30;
    --ink:#243447;
    --muted:#5d6e70;
    --accent:#27845b;
    --accent-dark:#1c6947;
    --gold:#c5a36a;
    --bg:#f7f9f8;
    --surface:#fff;
    --line:#e6ebe9;
    --shadow-soft:0 8px 30px rgba(16,37,63,.05);
    --shadow:0 22px 55px rgba(16,37,63,.11);
    --radius-lg:16px;
    --radius-md:10px;
    --radius-sm:6px;
    --container:min(1280px,calc(100% - 5rem))
}

* {
    box-sizing:border-box
}

html {
    scroll-behavior:smooth;
    scroll-padding-top:110px
}

body {
    margin:0;
    background:#fff;
    color:var(--ink);
    font-family:'Manrope',sans-serif;
    font-size:16px;
    line-height:1.8;
    -webkit-font-smoothing:antialiased
}

h1,h2,h3,h4,h5,h6 {
    color:var(--brand);
    font-weight:800;
    line-height:1.23;
    letter-spacing:-.035em
}

h1,h2,h3,p {
    margin-top:0
}

h1 {
    font-size:clamp(2.1rem,4vw,3.65rem)
}

h2 {
    font-size:clamp(1.8rem,3vw,2.65rem)
}

h3 {
    font-size:1.15rem;
    letter-spacing:-.02em
}

p {
    margin-bottom:1.25rem;
    color:var(--muted)
}

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

button,input,select,textarea {
    font:inherit
}

button {
    cursor:pointer
}

img,svg {
    max-width:100%
}

img {
    height:auto
}

button:disabled,input:disabled {
    cursor:default
}

:where(a,button,input,select,textarea):focus-visible {
    outline:3px solid var(--gold);
    outline-offset:4px
}

::selection {
    color:var(--brand);
    background:#dfebdf
}

.container {
    width:var(--container);
    margin-inline:auto
}

.narrow {
    max-width:840px
}

.full-span,.full-span-card {
    grid-column:1/-1
}

/* Navigation and shared controls */
.skip-link {
    position:fixed;
    top:-100px;
    left:1rem;
    z-index:100;
    padding:.75rem 1.25rem;
    background:var(--brand);
    color:#fff
}

.skip-link:focus {
    top:1rem
}

.utility-bar {
    background:var(--brand-dark);
    color:#c9d6dd;
    font-size:11px;
    letter-spacing:.025em
}

.utility-bar .container {
    display:flex;
    justify-content:space-between;
    gap:1rem;
    padding-block:.55rem
}

.utility-bar span span {
    color:var(--gold);
    margin-inline:.8rem
}

.utility-bar a {
    color:#e1e9ed
}

.site-header {
    position:sticky;
    top:0;
    z-index:30;
    background:rgba(255,255,255,.97);
    border-bottom:1px solid var(--line);
    backdrop-filter:blur(12px);
    transition:box-shadow .2s
}

.site-header.is-scrolled {
    box-shadow:0 6px 24px rgba(16,37,63,.07)
}

.nav-wrap {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1.25rem;
    min-height:90px
}

.brand {
    display:inline-flex;
    align-items:center;
    gap:.85rem;
    flex-shrink:0
}

.brand-logo {
    display:block;
    width:240px;
    height:auto
}

.site-nav {
    display:flex;
    align-items:center;
    gap:1.2rem
}

.site-nav a {
    position:relative;
    font-size:12px;
    font-weight:700;
    padding-block:.7rem;
    color:var(--brand)
}

.site-nav a::after {
    content:'';
    position:absolute;
    bottom:.1rem;
    left:0;
    right:100%;
    height:2px;
    background:var(--accent);
    transition:right .2s
}

.site-nav a:hover::after,.site-nav a.is-active::after {
    right:0
}

.site-nav .mobile-quote,.nav-toggle {
    display:none
}

.nav-toggle {
    width:44px;
    height:44px;
    flex-shrink:0;
    border:1px solid var(--line);
    border-radius:6px;
    background:#fff;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    gap:6px
}

.nav-toggle span {
    width:20px;
    height:2px;
    background:var(--brand)
}

.button {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:1rem;
    min-height:48px;
    padding:.9rem 1.5rem;
    border:1px solid var(--accent);
    border-radius:6px;
    background:var(--accent);
    color:#fff;
    font-size:12px;
    font-weight:700;
    line-height:1.5;
    letter-spacing:.015em;
    transition:transform .2s,box-shadow .2s,background .2s
}

.button:hover {
    background:var(--accent-dark);
    border-color:var(--accent-dark);
    box-shadow:0 6px 16px rgba(39,132,91,.15)
}

.button-ghost {
    background:transparent;
    color:var(--brand);
    border-color:#c3ceca
}

.button-ghost:hover {
    background:#eef3ef;
    border-color:var(--accent);
    color:var(--brand)
}

.header-cta {
    font-size:11px;
    white-space:nowrap;
    padding-inline:1.2rem
}

.eyebrow,.card-label {
    display:block;
    font-size:10px;
    font-weight:800;
    letter-spacing:.16em;
    text-transform:uppercase;
    color:var(--accent);
    line-height:1.7
}

.eyebrow {
    margin-bottom:1.25rem
}

.eyebrow::before {
    display:inline-block;
    content:'';
    width:24px;
    height:2px;
    vertical-align:middle;
    background:var(--gold);
    margin-right:12px
}

.text-link {
    display:inline-flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
    color:var(--brand);
    font-size:12px;
    font-weight:800;
    padding-bottom:.35rem;
    border-bottom:1px solid var(--gold)
}

.text-link:hover {
    color:var(--accent)
}

/* Sections and dimensional hero */
.section {
    padding-block:clamp(3.5rem,6vw,6.5rem)
}

.accent-section {
    background:var(--bg)
}

.section-heading {
    max-width:740px;
    margin-bottom:2.5rem
}

.section-heading h2 {
    margin-bottom:1.25rem
}

.section-heading p:last-child {
    max-width:640px
}

.section-top {
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:2rem;
    margin-bottom:2.5rem
}

.section-top .section-heading {
    margin-bottom:0
}

.section-top>.text-link {
    flex-shrink:0;
    margin-bottom:1.3rem
}

.hero-carousel-section {
    overflow:clip;
    background:radial-gradient(ellipse at 90% 30%,#e5ede5 0,transparent 45%),linear-gradient(120deg,#fbfcfa,#f4f7f2)
}

.hero-carousel {
    position:relative;
    display:grid
}

.hero-slide {
    display:grid;
    grid-column:1;
    grid-row:1;
    visibility:hidden;
    pointer-events:none;
    grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
    gap:4rem;
    align-items:center;
    min-height:704px;
    padding-block:4rem 4.5rem
}

.hero-slide.is-active {
    visibility:visible;
    pointer-events:auto
}

.hero-slide-copy {
    min-width:0
}

.hero-slide-copy h1,.hero-slide-copy h2 {
    font-size:clamp(2.4rem,3.7vw,3.6rem);
    line-height:1.15;
    margin-bottom:1.75rem;
    letter-spacing:-.045em
}

.hero-slide-copy h1 span,.hero-slide-copy h2 span {
    color:var(--accent)
}

.hero-copy {
    max-width:620px;
    font-size:16px;
    line-height:1.95
}

.hero-actions,.cta-actions {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:12px;
    margin-top:1.9rem
}

.hero-buyer-note {
    display:flex;
    align-items:center;
    gap:10px;
    margin-top:1.75rem;
    font-size:10px;
    color:var(--muted)
}

.status-dot {
    display:inline-block;
    width:7px;
    height:7px;
    border-radius:50%;
    background:var(--accent);
    box-shadow:0 0 0 4px rgba(39,132,91,.08);
    flex-shrink:0
}

.hero-slide-visual {
    position:relative;
    padding:1.3rem 0 2rem 1rem;
    perspective:1200px
}

.hero-slide-visual::before {
    content:'';
    position:absolute;
    inset:0 1rem 3rem -1rem;
    border:1px solid #c5d6c9;
    border-radius:24px;
    transform:rotate(-4deg)
}

.hero-image-frame {
    position:relative;
    height:488px;
    border:6px solid #fff;
    border-radius:18px;
    overflow:hidden;
    transform:rotate(2deg);
    box-shadow:18px 28px 45px rgba(16,37,63,.17)
}

.site-picture {
    display:block;
    overflow:hidden
}

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

.hero-image-frame .site-picture {
    height:100%
}

.hero-banner-chip {
    position:absolute;
    display:flex;
    align-items:center;
    gap:12px;
    left:-1.5rem;
    bottom:3.75rem;
    padding:1rem 1.25rem;
    background:#fff;
    border-radius:10px;
    box-shadow:var(--shadow);
    border-left:3px solid var(--gold);
    max-width:calc(100% + 1rem)
}

.hero-banner-chip strong {
    display:block;
    color:var(--brand);
    font-size:12px
}

.hero-banner-chip span {
    display:block;
    color:var(--muted);
    font-size:10px
}

.hero-banner-chip img {
    flex-shrink:0
}

.visual-caption {
    display:block;
    position:absolute;
    bottom:.1rem;
    right:0;
    font-size:9px;
    color:#55665e
}

.carousel-controls {
    grid-column:1;
    grid-row:2;
    display:flex;
    align-items:center;
    gap:1rem;
    padding-bottom:1.5rem
}

.carousel-dots {
    display:flex;
    gap:8px
}

.carousel-dots button {
    width:28px;
    height:4px;
    background:#c3d0c9;
    border:0;
    padding:0;
    position:relative
}

.carousel-dots button::before {
    content:'';
    position:absolute;
    inset:-12px 0
}

.carousel-dots button.is-active {
    background:var(--accent)
}

.carousel-pause {
    border:0;
    background:transparent;
    color:var(--muted);
    font-size:10px;
    min-height:36px
}

.carousel-arrows {
    margin-left:auto;
    display:flex;
    gap:8px
}

.carousel-arrow {
    border:1px solid #cad4cd;
    background:transparent;
    width:40px;
    height:40px;
    border-radius:5px;
    color:var(--brand);
    font-size:18px
}

.carousel-arrow:hover {
    background:#fff;
    border-color:var(--accent)
}

.value-strip {
    background:var(--brand);
    color:#e3ede7
}

.value-strip .container {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr))
}

.value-strip span {
    text-align:center;
    padding:1.15rem .5rem;
    font-size:11px;
    font-weight:600;
    letter-spacing:.025em
}

.value-strip span+span {
    border-left:1px solid rgba(255,255,255,.12)
}

/* Shared card system */
.card-grid,.contact-grid,.split-grid,.metrics-grid {
    display:grid;
    gap:1.75rem
}

.three,.contact-grid,.metrics-grid {
    grid-template-columns:repeat(3,minmax(0,1fr))
}

.four {
    grid-template-columns:repeat(4,minmax(0,1fr))
}

.split-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    align-items:center;
    gap:5rem
}

.card-grid>*,.split-grid>* {
    min-width:0
}

.category-card,.product-card,.article-card,.gallery-card {
    border:1px solid var(--line);
    border-radius:12px;
    background:#fff;
    overflow:hidden;
    box-shadow:var(--shadow-soft)
}

.category-image,.product-visual,.article-card-image {
    display:block;
    position:relative;
    height:220px;
    overflow:hidden;
    background:#edf2ee
}

.category-image .site-picture,.product-visual .site-picture,.article-card-image .site-picture {
    height:100%
}

.card-body {
    padding:1.6rem
}

.card-body .card-label {
    margin-bottom:.7rem;
    font-size:9px
}

.card-body h3 {
    margin-bottom:.75rem;
    font-size:1.12rem
}

.card-body p {
    font-size:14px;
    line-height:1.9;
    margin-bottom:1.5rem
}

.card-body h3 a:hover {
    color:var(--accent)
}

.card-actions {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:.75rem;
    flex-wrap:wrap
}

.card-actions .text-link {
    font-size:11px;
    gap:.5rem
}

.quote-link {
    font-size:10px;
    font-weight:800;
    color:var(--accent);
    padding:.5rem .7rem;
    border-radius:4px;
    background:#eff6f1
}

.depth-card {
    transition:transform .3s,box-shadow .3s,border-color .3s
}

.depth-card .site-picture img {
    transition:transform .5s
}

.content-card,.glass-card,.service-card,.hero-panel {
    padding:1.75rem;
    background:#fff;
    border:1px solid var(--line);
    border-radius:12px;
    box-shadow:var(--shadow-soft)
}

.service-card {
    padding:2rem 1.5rem
}

.service-card img {
    display:block;
    margin-bottom:1.75rem
}

.service-card h3 {
    font-size:1rem;
    line-height:1.5
}

.service-card p {
    font-size:14px;
    margin-bottom:0
}

.layered-photo {
    position:relative;
    margin:0 2rem 2rem 0;
    padding:0 0 2rem 1rem
}

.layered-photo::before {
    content:'';
    position:absolute;
    inset:2rem -1rem 0 0;
    border:1px solid #cedacf;
    border-radius:14px
}

.layered-photo .site-picture {
    position:relative;
    height:460px;
    border-radius:12px;
    box-shadow:var(--shadow)
}

.layered-photo figcaption {
    position:absolute;
    right:-2rem;
    bottom:0;
    padding:1.5rem 2rem;
    background:var(--brand);
    color:#fff;
    border-radius:8px;
    box-shadow:var(--shadow)
}

.layered-photo figcaption strong {
    font-size:19px;
    line-height:1.5
}

.layered-photo figcaption .card-label {
    color:var(--gold);
    margin-bottom:.5rem
}

.check-list {
    padding:0;
    margin:1.5rem 0 2rem;
    list-style:none
}

.check-list li {
    position:relative;
    padding-left:1.6rem;
    font-size:12px;
    font-weight:700;
    margin-bottom:.75rem
}

.check-list li::before {
    content:'✓';
    position:absolute;
    left:0;
    color:var(--accent)
}

/* Sourcing and logistics illustrations have no invented routes or facilities. */
.sourcing-section {
    background:var(--brand);
    color:#fff
}

.sourcing-section h2 {
    color:#fff
}

.sourcing-section p {
    color:#b9ccd1
}

.sourcing-section .eyebrow {
    color:#9cccb4
}

.sourcing-facts {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:1.5rem;
    margin:2rem 0
}

.sourcing-facts span {
    display:block;
    color:var(--gold);
    font-size:11px;
    margin-bottom:.5rem
}

.sourcing-facts strong {
    display:block;
    font-size:12px
}

.sourcing-facts p {
    margin:.5rem 0 0;
    font-size:11px
}

.globe-composition {
    position:relative;
    margin:0
}

.globe-composition svg {
    display:block;
    width:100%;
    height:auto
}

.globe-note {
    display:flex;
    align-items:center;
    gap:14px;
    padding:1rem 1.25rem;
    background:rgba(255,255,255,.07);
    border:1px solid rgba(255,255,255,.14);
    border-radius:8px;
    width:max-content;
    max-width:100%;
    margin:-2rem auto 0;
    position:relative
}

.globe-note strong {
    display:block;
    font-size:12px;
    color:#fff
}

.globe-note span:not(.status-dot) {
    display:block;
    font-size:10px;
    color:#b9ccd1
}

.globe-composition figcaption {
    text-align:center;
    font-size:9px;
    color:#b9ccd1;
    padding:1rem
}

.workflow-visual {
    margin:0 0 1.5rem
}

.workflow-visual img {
    display:block;
    width:100%;
    border-radius:12px
}

.workflow-visual figcaption {
    font-size:10px;
    line-height:1.7;
    margin-top:.75rem;
    color:var(--muted)
}

.supply-workflow {
    list-style:none;
    padding:0;
    margin:0
}

.supply-workflow li {
    display:flex;
    align-items:start;
    gap:1.5rem;
    position:relative;
    padding-bottom:2.75rem
}

.supply-workflow li:not(:last-child)::after {
    content:'';
    position:absolute;
    top:48px;
    bottom:0;
    left:23px;
    border-left:1px dashed #c4d5c9
}

.supply-workflow li:last-child {
    padding-bottom:0
}

.step-number {
    display:grid;
    place-items:center;
    flex-shrink:0;
    width:48px;
    height:48px;
    border:1px solid #d5e3d9;
    background:#f0f6f1;
    border-radius:50%;
    font-size:12px;
    color:var(--accent);
    font-weight:800
}

.supply-workflow h3 {
    margin:.5rem 0 .65rem;
    font-size:18px
}

.supply-workflow p {
    font-size:14px;
    max-width:340px;
    margin-bottom:0
}

.industry-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:1rem
}

.industry-card {
    display:grid;
    grid-template-columns:auto minmax(0,1fr) auto;
    align-items:center;
    align-content:start;
    gap:.85rem 1rem;
    padding:1.5rem;
    background:#fff;
    border:1px solid var(--line);
    border-radius:8px
}

.industry-card>span {
    font-size:10px;
    color:#916f3d
}

.industry-card h3 {
    font-size:14px;
    margin:0
}

.industry-card a {
    margin-left:auto;
    color:var(--accent);
    padding:.4rem
}

.industry-card p {
    grid-column:2 / -1;
    margin:0;
    font-size:13px;
    line-height:1.85
}

/* Form contracts are unchanged. */
.quotation-section {
    background:#edf3ee;
    position:relative
}

.quotation-phone {
    display:block;
    margin:2rem 0 .75rem;
    color:var(--brand);
    font-size:24px;
    font-weight:800
}

.form-card {
    background:#fff;
    padding:2.25rem;
    border:1px solid var(--line);
    box-shadow:var(--shadow)
}

.form-card h3 {
    margin-bottom:.75rem;
    font-size:24px
}

.form-card .eyebrow {
    margin-bottom:.5rem
}

.form-intro {
    font-size:14px
}

.form-grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:1rem;
    margin-bottom:1.5rem
}

.form-grid label {
    display:flex;
    flex-direction:column;
    gap:.5rem;
    font-size:12px;
    font-weight:800;
    color:var(--brand);
    min-width:0
}

.form-grid input,.form-grid textarea,.form-grid select {
    width:100%;
    min-width:0;
    background:#fcfdfc;
    border:1px solid #dbe3de;
    border-radius:5px;
    padding:.8rem .85rem;
    color:var(--ink);
    font-size:14px;
    font-weight:500
}

.form-grid input:focus,.form-grid textarea:focus,.form-grid select:focus {
    outline:2px solid rgba(39,132,91,.16);
    outline-offset:1px;
    border-color:var(--accent)
}

.form-grid input::placeholder,.form-grid textarea::placeholder {
    color:#6f7d76
}

.form-grid input[type=file] {
    padding:.7rem
}

.form-grid input[type=checkbox] {
    width:auto
}

.checkbox-row {
    display:flex!important;
    flex-direction:row!important;
    align-items:center;
    gap:.75rem
}

input[type=checkbox],input[type=radio] {
    accent-color:var(--accent)
}

textarea {
    resize:vertical
}

.form-note {
    font-size:10px;
    line-height:1.8;
    margin:1rem 0 0
}

.flash-message {
    padding:1rem 1.5rem;
    margin-block:1rem;
    background:#eaf5ee;
    border:1px solid #bdd8c6;
    color:#1e5d3e;
    border-radius:6px
}

.flash-error {
    background:#fff0ef;
    border-color:#e4bfba;
    color:#8d302b
}

/* Corporate and editorial pages */
.breadcrumb-bar {
    border-bottom:1px solid var(--line);
    background:#fff
}

.breadcrumbs {
    padding-block:.85rem
}

.breadcrumbs ol {
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:.6rem;
    list-style:none;
    padding:0;
    margin:0;
    font-size:10px;
    color:var(--muted)
}

.breadcrumbs li+li::before {
    content:'/';
    color:#a8b3ad;
    margin-right:.6rem
}

.breadcrumbs a:hover {
    color:var(--accent)
}

.page-hero {
    background:var(--bg);
    padding-block:4.5rem;
    border-bottom:1px solid var(--line)
}

.page-hero h1 {
    max-width:1050px;
    margin-bottom:1.5rem
}

.page-hero p {
    max-width:760px;
    margin-bottom:0
}

.page-hero .eyebrow {
    margin-bottom:1rem
}

.page-hero .form-card {
    margin-top:2rem
}

.page-hero-image {
    position:relative;
    isolation:isolate;
    overflow:hidden;
    min-height:420px;
    display:flex;
    align-items:center;
    padding-block:5.5rem;
    background:var(--brand);
    border-bottom:2px solid var(--gold)
}

.page-hero-background,
.page-hero-background::after,
.page-hero-background .site-picture,
.page-hero-background img {
    position:absolute;
    inset:0;
    width:100%;
    height:100%
}

.page-hero-background {
    z-index:-1;
    pointer-events:none
}

.page-hero-background img {
    object-fit:cover;
    object-position:70% 48%
}

.page-hero-background::after {
    content:"";
    background:linear-gradient(90deg,rgba(9,28,48,.95) 0%,rgba(9,28,48,.88) 40%,rgba(9,28,48,.78) 65%,rgba(9,28,48,.48) 100%)
}

.page-hero-image h1 {
    max-width:900px;
    color:#fff;
    text-wrap:balance
}

.page-hero-image p,
.page-hero-image .article-date {
    color:#eef4f4
}

.page-hero-image .eyebrow {
    display:block;
    color:#ead2a8;
    font-weight:800
}

.page-hero-image a.eyebrow:hover {
    color:#fff;
    text-decoration:underline;
    text-underline-offset:5px
}

.page-hero-image a:focus-visible {
    outline:2px solid #ead2a8;
    outline-offset:5px
}

@media(max-width:600px) {
    .page-hero.page-hero-image {
        min-height:360px;
        padding-block:3.5rem
    }
    .page-hero-background img {
        object-position:65% center
    }
    .page-hero-background::after {
        background:linear-gradient(90deg,rgba(9,28,48,.90),rgba(9,28,48,.80))
    }
}

.catalogue-toolbar {
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:1.5rem;
    margin-bottom:1.75rem
}

.catalogue-toolbar h2 {
    margin-bottom:0
}

.catalogue-toolbar .eyebrow {
    margin-bottom:.5rem
}

.catalogue-toolbar>p {
    font-size:11px;
    margin-bottom:.5rem
}

.product-filter-wrap {
    display:flex;
    flex-wrap:wrap;
    gap:.6rem;
    margin-bottom:2rem
}

.filter-chip {
    display:inline-flex;
    align-items:center;
    padding:.65rem 1rem;
    min-height:40px;
    border:1px solid var(--line);
    border-radius:5px;
    font-size:10px;
    font-weight:700;
    background:#fff
}

.filter-chip:hover {
    border-color:var(--accent);
    background:#f0f6f1
}

.filter-chip.is-active {
    background:var(--brand);
    color:#fff;
    border-color:var(--brand)
}

.product-detail h1 {
    margin-top:.75rem
}

.product-detail-image {
    padding:1rem;
    background:var(--bg);
    border:1px solid var(--line);
    border-radius:16px
}

.product-detail-image .site-picture {
    height:510px;
    border-radius:10px
}

.product-description {
    font-size:13px;
    color:var(--muted)
}

.lead {
    font-size:17px
}

.article-image {
    display:block;
    width:100%;
    height:480px;
    border-radius:12px;
    margin-bottom:2rem
}

.article-body {
    font-size:16px;
    line-height:2;
    white-space:normal;
    border:0
}

.article-date {
    display:block;
    color:var(--muted);
    font-size:11px;
    margin-bottom:1rem
}

.article-pagination-wrap {
    margin-top:2rem;
    display:flex;
    justify-content:center;
    padding-inline:1rem
}

.article-pagination {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:center;
    gap:.5rem
}

.page-link {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:40px;
    min-height:40px;
    padding:.4rem .75rem;
    border:1px solid var(--line);
    border-radius:5px;
    font-size:11px
}

.page-link.is-current {
    background:var(--brand);
    color:#fff;
    border-color:var(--brand)
}

.page-link.is-disabled {
    color:#7e8b84
}

.page-link:not(.is-disabled):hover {
    border-color:var(--accent)
}

.gallery-sections {
    display:grid;
    gap:5rem
}

.gallery-open {
    width:100%;
    display:block;
    border:0;
    padding:0;
    position:relative;
    text-align:left;
    background:var(--bg)
}

.gallery-open .site-picture {
    height:250px
}

.gallery-expand {
    position:absolute;
    right:1rem;
    bottom:1rem;
    background:#fff;
    color:var(--brand);
    width:36px;
    height:36px;
    display:grid;
    place-items:center;
    border-radius:5px;
    box-shadow:var(--shadow)
}

.gallery-card .card-body p {
    margin-bottom:0
}

.gallery-dialog {
    width:min(1000px,calc(100% - 2rem));
    max-height:calc(100dvh - 2rem);
    padding:3rem 1rem 1rem;
    border:0;
    border-radius:10px;
    background:var(--brand-dark);
    color:#fff;
    box-shadow:var(--shadow)
}

.gallery-dialog::backdrop {
    background:rgba(4,15,24,.85)
}

.gallery-dialog>img {
    display:block;
    width:100%;
    max-height:75vh;
    object-fit:contain
}

.gallery-dialog>p {
    margin:.75rem 0 0;
    color:#e2e9e6;
    font-size:12px
}

.dialog-close {
    position:absolute;
    right:.75rem;
    top:.25rem;
    width:40px;
    height:40px;
    font-size:26px;
    border:0;
    color:#fff;
    background:transparent
}

.stack-list {
    display:grid;
    gap:1.25rem
}

.feature-row {
    padding:1.5rem 0;
    border-bottom:1px solid var(--line)
}

.feature-row p:last-child {
    margin-bottom:0
}

.contact-icon {
    display:block;
    width:56px;
    height:56px;
    margin-bottom:1.5rem
}

.contact-grid .glass-card h2 {
    font-size:clamp(1rem,1.3vw,1.2rem);
    letter-spacing:-.02em;
    overflow-wrap:anywhere
}

.contact-grid .glass-card p {
    font-size:12px
}

.icon-badge {
    width:48px;
    height:48px;
    display:block;
    margin-bottom:1.25rem
}

.icon-badge.small {
    width:32px;
    height:32px;
    margin-bottom:0
}

.map-section {
    border:1px solid var(--line);
    border-radius:12px;
    overflow:hidden;
    background:var(--bg)
}

.map-frame {
    display:block;
    width:100%;
    min-height:440px;
    border:0
}

.cta-section {
    background:var(--brand);
    color:#fff
}

.cta-panel {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:3rem
}

.cta-panel h2 {
    color:#fff;
    max-width:780px;
    margin-bottom:0
}

.cta-panel .eyebrow {
    color:#a3cfb7
}

.cta-panel>.button {
    flex-shrink:0
}

/* Footer and consent */
.site-footer {
    background:var(--brand-dark);
    color:#c0d0d8;
    padding-block:4.5rem 1.25rem;
    font-size:13px
}

.footer-grid {
    display:grid;
    grid-template-columns:1.5fr 1fr .65fr 1.2fr;
    gap:3.5rem
}

.footer-logo {
    display:block;
    width:240px;
    height:auto;
    background:#fff;
    padding:.8rem;
    border-radius:5px;
    margin-bottom:1.75rem
}

.site-footer h2 {
    color:#fff;
    font-size:25px;
    line-height:1.4;
    letter-spacing:-.02em;
    margin-bottom:1.25rem
}

.site-footer p {
    color:#a9bdc8;
    font-size:12px
}

.site-footer .footer-title {
    color:#e0c79d;
    text-transform:uppercase;
    letter-spacing:.1em;
    font-size:10px;
    font-weight:800;
    margin-bottom:1.5rem
}

.footer-links,.footer-stack {
    display:grid;
    gap:.6rem
}

.footer-links a:hover,.footer-stack a:hover,.footer-meta a:hover,.footer-social a:hover {
    color:#fff
}

.footer-stack p {
    margin:.5rem 0 0
}

.footer-quote {
    display:inline-block;
    color:#a3cfb7;
    border-bottom:1px solid var(--gold);
    margin-top:1.5rem;
    padding-bottom:.4rem
}

.footer-social {
    display:flex;
    gap:1.25rem;
    font-size:10px
}

.footer-bottom {
    margin-top:3rem;
    padding-top:1.5rem;
    border-top:1px solid rgba(255,255,255,.12);
    display:flex;
    justify-content:space-between;
    gap:2rem
}

.footer-bottom p {
    font-size:10px;
    margin:0
}

.footer-meta {
    display:flex;
    align-items:center;
    gap:1rem;
    font-size:10px
}

.cookie-footer-link {
    border:0;
    background:transparent;
    padding:0;
    color:inherit;
    font-size:inherit;
    text-decoration:underline;
    text-underline-offset:4px
}

.whatsapp-float {
    position:fixed;
    right:max(1.5rem,env(safe-area-inset-right));
    bottom:var(--whatsapp-bottom,calc(1.5rem + env(safe-area-inset-bottom)));
    z-index:40;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:.65rem;
    min-width:58px;
    min-height:58px;
    padding:.9rem 1.25rem;
    border:1px solid rgba(255,255,255,.35);
    border-radius:999px;
    background:var(--accent);
    color:#fff;
    font-size:14px;
    font-weight:800;
    box-shadow:0 6px 24px rgba(9,28,48,.25)
}

.whatsapp-float:hover {
    background:var(--accent-dark);
    color:#fff
}

.whatsapp-float:focus-visible {
    outline:3px solid var(--gold);
    outline-offset:4px
}

@media(max-width:600px) {
    .whatsapp-float {
        right:max(1rem,env(safe-area-inset-right));
        padding:.85rem;
        min-width:56px;
        min-height:56px
    }
    .whatsapp-float span {
        display:none
    }
}

@media print {
    .whatsapp-float {
        display:none
    }
}

.cookie-consent {
    position:fixed;
    bottom:1rem;
    left:1rem;
    right:1rem;
    z-index:50
}

.cookie-consent[hidden],.cookie-modal[hidden] {
    display:none!important
}

.cookie-consent-inner {
    width:min(960px,100%);
    margin:auto;
    padding:1.5rem 2rem;
    background:#fff;
    border:1px solid var(--line);
    border-top:3px solid var(--gold);
    border-radius:10px;
    box-shadow:0 16px 70px rgba(9,28,48,.23)
}

.cookie-consent-inner .eyebrow {
    margin-bottom:.4rem
}

.cookie-consent-inner h3 {
    font-size:20px;
    margin-bottom:.5rem
}

.cookie-consent-inner>p {
    font-size:12px
}

.cookie-consent-actions {
    display:flex;
    flex-wrap:wrap;
    gap:.65rem;
    margin-top:1rem
}

.cookie-consent-actions .button {
    min-height:44px;
    padding:.7rem 1rem;
    font-size:11px
}

.cookie-legal-copy {
    margin:.75rem 0 0;
    font-size:10px!important
}

.cookie-legal-copy a {
    text-decoration:underline;
    text-underline-offset:3px
}

.cookie-modal {
    position:fixed;
    inset:0;
    z-index:55;
    display:grid;
    place-items:center;
    padding:1rem;
    background:rgba(9,28,48,.8)
}

.cookie-modal-card {
    width:min(560px,100%);
    max-height:calc(100dvh - 2rem);
    overflow-y:auto;
    background:#fff;
    border-radius:10px;
    padding:2rem;
    box-shadow:var(--shadow)
}

.cookie-modal-card h3 {
    font-size:23px
}

.cookie-modal-card>p {
    font-size:12px
}

.cookie-toggle-row {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:1rem;
    padding:1rem 0;
    border-bottom:1px solid var(--line)
}

.cookie-toggle-row strong {
    display:block;
    font-size:12px
}

.cookie-toggle-row small {
    display:block;
    margin-top:.25rem;
    font-size:10px;
    color:var(--muted)
}

.cookie-toggle-row input {
    width:20px;
    height:20px;
    flex-shrink:0
}

/* Existing administration remains on the shared styling system. */
.admin-body {
    background:var(--bg)
}

.admin-shell {
    display:grid;
    grid-template-columns:260px minmax(0,1fr);
    min-height:100vh
}

.admin-sidebar {
    padding:2rem 1.25rem;
    background:var(--brand-dark);
    color:#c0d0d8
}

.admin-sidebar .brand strong {
    display:block;
    font-size:15px;
    color:#fff
}

.admin-sidebar .brand small {
    display:block;
    font-size:10px
}

.brand-mark {
    display:grid;
    place-items:center;
    width:44px;
    height:44px;
    border:1px solid var(--gold);
    color:#e0c79d
}

.admin-nav {
    display:grid;
    gap:.4rem;
    margin-block:2rem
}

.admin-nav a {
    padding:.7rem .8rem;
    border-left:2px solid transparent;
    border-radius:3px;
    font-size:12px
}

.admin-nav a:hover {
    background:rgba(255,255,255,.05);
    border-left-color:var(--gold);
    color:#fff
}

.admin-main {
    padding:2.5rem;
    min-width:0
}

.admin-main h1 {
    font-size:clamp(1.7rem,3vw,2.5rem)
}

.admin-header-row {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
    margin-bottom:1.75rem
}

.admin-section+.admin-section {
    margin-top:2rem
}

.admin-table-wrap {
    overflow-x:auto;
    border:1px solid var(--line);
    border-radius:8px;
    background:#fff
}

.admin-table {
    width:100%;
    border-collapse:collapse;
    font-size:12px
}

.admin-table td,.admin-table th {
    padding:1rem;
    text-align:left;
    border-bottom:1px solid var(--line)
}

.admin-table th {
    background:#edf2ee;
    font-size:10px;
    letter-spacing:.05em;
    text-transform:uppercase
}

.admin-table tbody tr:hover {
    background:#f7faf7
}

.table-actions {
    display:flex;
    gap:.75rem;
    align-items:center;
    white-space:nowrap
}

.table-actions form {
    margin:0
}

.table-actions button {
    border:0;
    color:#a53d35;
    background:transparent;
    padding:0
}

.admin-logout {
    color:#d6e6db;
    border-color:#6c7f87;
    width:100%
}

.admin-image-preview-wrap {
    padding:1rem;
    border:1px solid var(--line);
    background:#fff;
    border-radius:6px
}

.admin-image-preview {
    display:block;
    width:min(320px,100%);
    max-height:220px;
    object-fit:cover;
    margin-top:.75rem
}

.metrics-grid article {
    padding:1.5rem;
    border:1px solid var(--line);
    border-radius:8px;
    background:#fff
}

.metrics-grid strong {
    display:block;
    color:var(--brand);
    font-size:23px
}

.bullet-list {
    padding-left:1.25rem
}

/* Content is visible without JavaScript. Motion is a progressive enhancement. */
.reveal {
    opacity:1;
    transform:none
}

.motion-ready .reveal {
    opacity:0;
    transform:translateY(16px);
    transition:opacity .5s,transform .5s
}

.motion-ready .reveal.is-visible {
    opacity:1;
    transform:none
}

@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
    .depth-card:hover {
        transform:perspective(1200px) rotateX(1deg) rotateY(-1deg) translateY(-5px);
        box-shadow:var(--shadow);
        border-color:#c8d8ce
    }
    .depth-card:hover .site-picture img {
        transform:scale(1.035)
    }
    .hero-slide-visual:hover .hero-image-frame {
        transform:perspective(1200px) rotateY(-3deg) rotate(1deg)
    }
    .hero-image-frame {
        transition:transform .5s
    }
    .button:hover {
        transform:translateY(-2px)
    }
}

@media(min-width:981px) and (max-width:1200px) {
    :root {
        --container:min(1280px,calc(100% - 3rem))
    }
    .brand-logo {
        width:205px
    }
    .site-nav {
        gap:.8rem
    }
    .site-nav a {
        font-size:11px
    }
    .header-cta {
        padding-inline:.8rem;
        font-size:10px
    }
    .nav-wrap {
        gap:.75rem
    }
    .hero-slide {
        gap:2.5rem
    }
    .hero-image-frame {
        height:440px
    }
    .split-grid {
        gap:3rem
    }
    .footer-grid {
        gap:2rem
    }
    .four {
        grid-template-columns:repeat(2,minmax(0,1fr))
    }
}

@media(max-width:980px) {
    :root {
        --container:min(1280px,calc(100% - 3rem))
    }
    .utility-bar .container>a {
        display:none
    }
    .nav-wrap {
        min-height:80px
    }
    .brand-logo {
        width:225px
    }
    .nav-toggle {
        display:flex;
        margin-left:auto
    }
    .header-cta {
        display:none
    }
    .site-nav {
        display:none;
        position:absolute;
        top:100%;
        left:0;
        right:0;
        background:#fff;
        padding:1rem 1.5rem 1.5rem;
        border-bottom:2px solid var(--accent);
        box-shadow:var(--shadow)
    }
    .site-nav.is-open {
        display:flex;
        flex-direction:column;
        align-items:stretch;
        gap:0
    }
    .site-nav a {
        padding:.6rem
    }
    .site-nav a.is-active {
        background:#eff6f1
    }
    .site-nav a::after {
        display:none
    }
    .site-nav .mobile-quote {
        display:flex;
        margin-top:1rem;
        color:#fff
    }
    .hero-slide {
        grid-template-columns:minmax(0,1fr);
        gap:2.25rem;
        min-height:0;
        padding-block:3rem 2rem
    }
    .hero-slide-copy {
        max-width:720px
    }
    .hero-slide-copy h1,.hero-slide-copy h2 {
        font-size:clamp(2.35rem,5.5vw,3.4rem)
    }
    .hero-slide-visual {
        max-width:600px;
        width:100%;
        margin:0 auto
    }
    .hero-image-frame {
        height:420px
    }
    .hero-banner-chip {
        left:-.75rem
    }
    .split-grid {
        grid-template-columns:minmax(0,1fr);
        gap:3rem
    }
    .three,.four,.contact-grid,.industry-grid {
        grid-template-columns:repeat(2,minmax(0,1fr))
    }
    .layered-photo {
        max-width:650px;
        width:calc(100% - 2rem)
    }
    .sourcing-section .globe-composition {
        max-width:540px;
        margin:auto
    }
    .globe-note {
        margin-top:-1rem
    }
    .product-detail-image .site-picture {
        height:460px
    }
    .footer-grid {
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:3rem
    }
    .footer-bottom {
        flex-direction:column;
        gap:1rem
    }
    .admin-shell {
        display:block
    }
    .admin-nav {
        grid-template-columns:repeat(3,minmax(0,1fr));
        margin-block:1.5rem
    }
    .admin-sidebar {
        padding:1.5rem
    }
    .admin-logout {
        width:auto
    }
    .cta-panel {
        flex-direction:column;
        align-items:flex-start;
        gap:1.5rem
    }
}

@media(max-width:600px) {
    :root {
        --container:calc(100% - 2.5rem)
    }
    body {
        font-size:14px
    }
    .utility-bar {
        font-size:8px
    }
    .utility-bar .container {
        width:calc(100% - 2rem);
        justify-content:center
    }
    .utility-bar span span {
        margin-inline:.4rem
    }
    .brand-logo {
        width:min(225px,65vw)
    }
    .nav-wrap {
        min-height:76px
    }
    .hero-slide {
        padding-top:2.5rem
    }
    .hero-slide-copy h1,.hero-slide-copy h2 {
        font-size:clamp(2rem,8.7vw,2.6rem);
        line-height:1.16
    }
    .hero-copy {
        font-size:13px
    }
    .eyebrow {
        font-size:9px;
        letter-spacing:.11em
    }
    .hero-actions {
        flex-direction:column;
        align-items:stretch
    }
    .hero-actions .button {
        width:100%
    }
    .hero-buyer-note {
        font-size:9px
    }
    .hero-slide-visual {
        padding-left:.5rem;
        padding-right:.3rem
    }
    .hero-slide-visual::before {
        inset:.25rem .5rem 3rem -.25rem
    }
    .hero-image-frame {
        height:325px;
        border-width:4px
    }
    .hero-banner-chip {
        left:-.1rem;
        bottom:3.2rem;
        padding:.8rem 1rem
    }
    .hero-banner-chip strong {
        font-size:11px
    }
    .visual-caption {
        font-size:8px
    }
    .value-strip .container {
        grid-template-columns:1fr;
        width:100%
    }
    .value-strip span {
        padding:.7rem;
        font-size:10px
    }
    .value-strip span+span {
        border-left:0;
        border-top:1px solid rgba(255,255,255,.1)
    }
    .section {
        padding-block:3.5rem
    }
    h2 {
        font-size:1.9rem
    }
    .section-top {
        flex-direction:column;
        align-items:flex-start;
        gap:1rem
    }
    .section-top>.text-link {
        margin-bottom:0
    }
    .three,.four,.contact-grid,.industry-grid,.metrics-grid {
        grid-template-columns:minmax(0,1fr)
    }
    .category-image,.product-visual,.article-card-image {
        height:235px
    }
    .card-body {
        padding:1.5rem
    }
    .service-card {
        padding:1.75rem
    }
    .layered-photo {
        margin-right:1rem;
        padding-left:0;
        width:calc(100% - 1rem)
    }
    .layered-photo .site-picture {
        height:350px
    }
    .layered-photo figcaption {
        right:-1rem;
        padding:1.25rem
    }
    .layered-photo figcaption strong {
        font-size:17px
    }
    .layered-photo::before {
        right:-.5rem
    }
    .sourcing-facts {
        gap:1rem
    }
    .sourcing-facts strong {
        font-size:11px
    }
    .globe-note {
        padding:.85rem
    }
    .globe-note strong {
        font-size:11px
    }
    .globe-note span:not(.status-dot) {
        font-size:9px
    }
    .supply-workflow li {
        gap:1rem;
        padding-bottom:2rem
    }
    .supply-workflow h3 {
        font-size:17px
    }
    .form-grid {
        grid-template-columns:minmax(0,1fr)
    }
    .form-grid input,.form-grid textarea,.form-grid select {
        font-size:16px
    }
    .form-grid .full-span {
        grid-column:auto
    }
    .form-card {
        padding:1.5rem
    }
    .form-card>.button {
        width:100%
    }
    .quotation-phone {
        font-size:23px
    }
    .page-hero {
        padding-block:3rem
    }
    .page-hero h1 {
        font-size:2.05rem
    }
    .catalogue-toolbar {
        flex-direction:column;
        align-items:flex-start;
        gap:.8rem
    }
    .product-filter-wrap {
        gap:.5rem
    }
    .filter-chip {
        padding:.6rem .8rem;
        font-size:9px
    }
    .product-detail-image .site-picture {
        height:340px
    }
    .product-detail h1 {
        font-size:2.1rem
    }
    .article-image {
        height:300px
    }
    .article-body {
        font-size:15px
    }
    .contact-grid .glass-card h2 {
        font-size:1.12rem
    }
    .footer-grid {
        grid-template-columns:minmax(0,1fr);
        gap:2.5rem
    }
    .site-footer {
        padding-top:3rem
    }
    .footer-bottom {
        margin-top:2rem
    }
    .footer-meta {
        flex-wrap:wrap
    }
    .cookie-consent {
        left:.5rem;
        right:.5rem;
        bottom:.5rem
    }
    .cookie-consent-inner {
        padding:1.25rem;
        max-height:calc(100dvh - 1rem);
        overflow-y:auto
    }
    .cookie-consent-inner h3 {
        font-size:17px
    }
    .cookie-consent-inner>p {
        font-size:11px
    }
    .cookie-consent-actions .button {
        flex:1 1 auto;
        font-size:10px;
        padding-inline:.7rem
    }
    .cookie-modal-card {
        padding:1.5rem
    }
    .admin-main {
        padding:1.25rem
    }
    .admin-header-row {
        flex-direction:column;
        align-items:flex-start
    }
    .admin-nav {
        grid-template-columns:repeat(2,minmax(0,1fr))
    }
}

/* Geographic globe: GPU sphere plus a projected route overlay. */
.sourcing-globe { min-width: 0; }
.globe-stage { position: relative; width: 100%; aspect-ratio: 720 / 660; cursor: grab; touch-action: pan-y; isolation: isolate; }
.globe-stage.is-dragging { cursor: grabbing; }
.globe-stage::before { content: ''; position: absolute; width: 74%; aspect-ratio: 1; left: 13%; top: 47%; transform: translateY(-50%); border-radius: 50%; box-shadow: 0 0 55px rgba(71,151,128,.15); border: 1px solid rgba(197,163,106,.32); pointer-events: none; }
.globe-stage canvas,.globe-fallback { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.globe-fallback { object-fit: contain; }
.globe-stage canvas { visibility: hidden; pointer-events: none; }
.sourcing-globe.is-ready .globe-stage canvas { visibility: visible; }
.sourcing-globe.is-ready .globe-fallback { visibility: hidden; }
.globe-drag-hint { position: absolute; bottom: .25rem; left: 0; right: 0; text-align: center; color: #b9ccd1; font-size: 10px; opacity: 0; pointer-events: none; }
.sourcing-globe.is-ready .globe-drag-hint { opacity: 1; }
.globe-toolbar { display: flex; justify-content: center; gap: 1rem; margin-top: .75rem; }
.globe-toolbar[hidden] { display: none; }
.globe-toolbar button { border: 1px solid rgba(197,163,106,.35); border-radius: 5px; color: #dcebe4; padding: .5rem .8rem; background: rgba(255,255,255,.035); font-size: 10px; min-height: 36px; }
.globe-toolbar button:hover { background: rgba(255,255,255,.09); }
.sourcing-globe .globe-note { margin: 1.25rem auto 1rem; }
.globe-route-list { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: .45rem; margin: 0; padding: 0; list-style: none; }
.globe-route-list li { min-width: 0; }
.globe-route-list button { display: flex; align-items: center; gap: 6px; width: 100%; padding: .55rem .6rem; min-height: 38px; font-size: 9px; white-space: nowrap; border: 1px solid rgba(139,189,166,.19); border-radius: 5px; color: #dcebe4; background: rgba(255,255,255,.025); }
.globe-route-list button[aria-pressed=true],.globe-route-list button:not(:disabled):hover { border-color: #c5a36a; background: rgba(197,163,106,.1); }
.globe-route-list button:disabled { opacity: 1; cursor: default; }
.route-origin-dot { width: 4px; height: 4px; border-radius: 50%; background: #91d0ac; flex-shrink: 0; }
.route-destination { color: #d5b981; font-size: 8px; margin-left: auto; }
.sourcing-globe figcaption { padding: .9rem 0 0; font-size: 10px; }
@media(max-width:600px) {
    .globe-route-list { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .globe-route-list button { min-height: 44px; font-size: 10px; padding-inline: .8rem; }
    .route-destination { font-size: 9px; }
    .globe-toolbar button { min-height: 44px; }
}

@media(prefers-reduced-motion:reduce) {
    html {
        scroll-behavior:auto
    }
    *,*::before,*::after {
        animation:none!important;
        transition:none!important
    }
    .motion-ready .reveal {
        opacity:1;
        transform:none
    }
    .hero-image-frame {
        transform:none
    }
    .depth-card:hover {
        transform:none
    }
}