@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,600&family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@500;600;700;800&display=swap');

:root {
    /* ── Moss Green Luxury Palette ── */
    --forest:  #1a3318;     /* deep forest — nav, footers, dark sections */
    --moss:    #3a6434;     /* primary brand green — CTAs, active links */
    --moss2:   #68985e;     /* lighter sage green — gradients, hover */
    --sage:    #e3ece0;     /* pale sage — backgrounds, tags */
    --sand:    #edf2e8;     /* off-white with green tint */
    --paper:   #f6f9f2;     /* body background */
    --ink:     #1b2519;     /* primary text */
    --muted:   #5e6b57;     /* secondary text */
    --line:    #d0dac8;     /* borders */
    --card:    #fff;
    --gold:    #c5a05a;     /* luxury gold accent */
    --shadow:  0 22px 70px rgba(26,51,24,.11);
    --radius:  20px;
    --max:     1180px;
}

* { box-sizing: border-box }
html { scroll-behavior: smooth }

body {
    margin: 0;
    font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
    color: var(--ink);
    background: var(--paper);
    line-height: 1.6;
}

a  { text-decoration: none; color: inherit }
img { max-width: 100%; display: block }

.wrap { max-width: var(--max); margin: auto; padding-inline: 24px }

/* ── Topbar ────────────────────────── */
.topbar {
    background: var(--forest);
    color: #fff;
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.topbar .wrap { display: flex; justify-content: space-between; gap: 20px; padding-block: 11px }
.topbar b  { color: var(--gold) }
.topbar a  { color: var(--gold); font-weight: 700; cursor: pointer }

/* ── Navigation ────────────────────── */
.nav {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(246,249,242,.93);
    backdrop-filter: blur(18px);
    border-bottom: 1px solid rgba(208,218,200,.75);
}
.nav-inner { height: 80px; display: flex; align-items: center; justify-content: space-between }
.brand {
    display: flex; align-items: center; gap: 12px;
    font-weight: 800; letter-spacing: .16em; text-transform: uppercase; font-size: 12px;
}
.links { display: flex; align-items: center; gap: 26px; font-size: 13px; font-weight: 700 }
.links a { color: var(--ink); transition: color .18s }
.links a:hover, .links a.active { color: var(--moss) }

/* ── Buttons ───────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 12px 20px;
    font-weight: 700;
    font-size: 13px;
    font-family: 'DM Sans', sans-serif;
    background: #fff;
    cursor: pointer;
    transition: all .18s;
}
.btn.primary {
    background: var(--moss);
    color: #fff;
    border: 0;
    box-shadow: 0 12px 28px rgba(58,100,52,.26);
}
.btn.primary:hover { background: #2e5229; transform: translateY(-1px) }
.btn.dark { background: var(--forest); color: #fff; border: 0 }
.btn-lg { padding: 15px 24px }

.menu { display: none; border: 0; background: var(--forest); color: #fff; border-radius: 10px; padding: 10px 14px; font-weight: 700 }

/* ── Hero (lux) ────────────────────── */
.lux-hero {
    padding: 84px 0 104px;
    overflow: hidden;
    background: radial-gradient(circle at 92% 10%, rgba(163,196,155,.45), transparent 38%), var(--paper);
}
.lux-hero-grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: 64px; align-items: center }

/* Kicker */
.kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--moss);
}
.kicker i { width: 22px; height: 1px; background: var(--gold) }
.kicker.light { color: rgba(197,220,190,.85) }

/* Headings */
h1, h2, h3 {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 600;
    line-height: 1.02;
    margin: 0;
    color: var(--ink);
}
h1 { font-size: clamp(48px, 7vw, 92px);  letter-spacing: -.04em }
h2 { font-size: clamp(34px, 4.5vw, 60px); letter-spacing: -.04em }

.hero-copy h1 {
    font-size: clamp(54px, 6.5vw, 88px);
    margin: 22px 0;
    max-width: 720px;
    color: var(--ink);
}
.hero-copy h1 em { font-style: italic; color: var(--moss) }
.hero-copy > p { font-size: 17px; color: var(--muted); max-width: 560px; line-height: 1.7 }

.lead { font-size: 17px; color: var(--muted); max-width: 630px }

.hero-actions { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 28px; align-items: center }

.text-link {
    color: var(--forest);
    font-weight: 700;
    font-size: 14px;
    border-bottom: 1px solid rgba(26,51,24,.28);
    padding-bottom: 3px;
    cursor: pointer;
    transition: color .18s;
}
.text-link:hover { color: var(--moss) }

/* Trust line */
.trust-line { display: flex; align-items: center; gap: 16px; margin-top: 42px }
.trust-line p { font-size: 13px; color: var(--muted); margin: 0 }
.trust-line b { color: var(--ink) }
.avatars { display: flex }
.avatars span {
    width: 32px; height: 32px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--forest);
    color: #fff;
    border: 2px solid var(--paper);
    margin-left: -8px;
    font-size: 10px; font-weight: 800;
}
.avatars span:first-child  { margin-left: 0 }
.avatars span:nth-child(2) { background: #3d6845 }
.avatars span:nth-child(3) { background: var(--moss) }
.avatars span:nth-child(4) { background: var(--gold) }

/* Hero visual */
.hero-visual { position: relative; padding: 0 22px 22px 0 }
.visual-main {
    position: relative;
    height: 580px;
    border-radius: 160px 160px 22px 22px;
    overflow: hidden;
    background: #d3e3cd;
}
.visual-main > img { width: 100%; height: 100%; object-fit: cover }
.visual-main:after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 55%, rgba(12,30,10,.52));
}
.visual-label { position: absolute; z-index: 2; left: 28px; bottom: 26px; color: #fff }
.visual-label span { display: block; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; opacity: .8 }
.visual-label b { font-family: 'Cormorant Garamond', serif; font-size: 20px; font-weight: 600 }

.floating-note {
    position: absolute; z-index: 3;
    background: #fff;
    box-shadow: var(--shadow);
    border: 1px solid rgba(26,51,24,.08);
}
.note-top  { right: -8px; top: 72px; padding: 20px 22px; border-radius: 16px }
.note-top small, .note-top span { display: block; color: var(--muted); font-size: 10px; letter-spacing: .08em }
.note-top b { display: block; font-family: 'Cormorant Garamond', serif; font-size: 40px; font-weight: 600; color: var(--forest) }
.note-bottom { left: -12px; bottom: 66px; border-radius: 14px; padding: 14px 16px; display: flex; align-items: center; gap: 12px }
.note-bottom i { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--sage); color: var(--moss); font-style: normal }
.note-bottom b, .note-bottom span { display: block; font-size: 12px }
.note-bottom span { color: var(--muted); font-size: 10px }

/* ── Brand strip ───────────────────── */
.brand-strip { background: #fff; border-block: 1px solid var(--line); padding: 22px 0 }
.brand-strip .wrap > span { font-size: 10px; text-transform: uppercase; letter-spacing: .14em; color: var(--muted) }
.category-marquee { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 16px; white-space: nowrap; overflow: hidden }
.category-marquee b { font-family: 'Manrope', sans-serif; font-size: 12px; letter-spacing: .08em; color: var(--forest) }
.category-marquee i { color: var(--gold); font-style: normal }

/* ── Sections ──────────────────────── */
section { padding: 78px 0 }

.section-head { display: flex; justify-content: space-between; gap: 24px; align-items: end; margin-bottom: 30px }
.section-head p { max-width: 560px; color: var(--muted); margin: 0 }

.lux-head { align-items: flex-end; margin-bottom: 44px }
.lux-head h2 { font-size: clamp(38px, 4.2vw, 62px); margin-top: 16px }
.lux-head > div:last-child, .lux-head > p { max-width: 420px; color: var(--muted) }
.lux-head .text-link { display: inline-block; margin-top: 12px }

/* ── Cards ─────────────────────────── */
.card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 26px;
    box-shadow: 0 12px 40px rgba(26,51,24,.05);
}
.icon { width: 42px; height: 42px; border-radius: 14px; background: var(--sage); color: var(--moss); display: grid; place-items: center; font-weight: 800; margin-bottom: 18px }

.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px }

/* ── Products ──────────────────────── */
.catalogue-feature, .process-new { padding: 110px 0 }

.product-tools { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 24px }

.input, .select, textarea {
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 12px 16px;
    font: inherit;
    background: #fff;
    outline: none;
    color: var(--ink);
}
.input { min-width: 240px; flex: 1 }
.select { min-width: 200px }

.products-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px }
.featured-lux  { grid-template-columns: repeat(4, 1fr) }
.featured-lux .product:nth-child(n+9) { display: none }

.product {
    background: #fff;
    border: 1px solid rgba(26,51,24,.1);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    transition: transform .2s ease, box-shadow .2s ease;
}
.product:hover { transform: translateY(-4px); box-shadow: 0 20px 50px rgba(26,51,24,.1) }
.product figure { margin: 0; background: var(--sage); aspect-ratio: 1 / 1.08; display: grid; place-items: center; overflow: hidden; padding: 16px }
.product img { width: 100%; height: 100%; object-fit: contain; border-radius: 10px }
.product-body { padding: 18px }
.product h3 { font-family: 'Manrope', sans-serif; font-size: 16px; font-weight: 700; letter-spacing: -.02em; margin: 0 }
.product p   { font-size: 13px; color: var(--muted); margin: 8px 0 14px }
.request { margin-top: auto; color: var(--moss); font-weight: 700; font-size: 13px }

.meta  { display: flex; gap: 7px; flex-wrap: wrap; margin: 10px 0 }
.badge {
    font-size: 9px;
    font-weight: 800;
    color: var(--moss);
    background: var(--sage);
    border: 0;
    border-radius: 999px;
    padding: 6px 9px;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.add-quote {
    width: 100%;
    border: 1px solid #b8cdb0;
    border-radius: 10px;
    padding: 11px 14px;
    background: #fff;
    color: var(--forest);
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all .18s;
}
.add-quote:hover, .add-quote.selected { background: var(--forest); border-color: var(--forest); color: #fff }

.results-bar  { display: flex; justify-content: space-between; align-items: center; margin: 0 0 18px; color: var(--muted); font-size: 14px; font-weight: 700 }
.clear-filters { border: 0; background: transparent; color: var(--moss); font-weight: 700; cursor: pointer }
.load-more-wrap { display: flex; justify-content: center; margin-top: 32px }
.legacy-table   { display: none }

.quote-drawer {
    position: fixed; z-index: 70; left: 50%; bottom: 22px;
    transform: translate(-50%, 130%);
    width: min(680px, calc(100% - 36px));
    background: var(--forest);
    color: #fff;
    border-radius: 18px;
    padding: 14px 16px 14px 22px;
    display: flex; align-items: center; justify-content: space-between; gap: 20px;
    box-shadow: 0 24px 70px rgba(0,0,0,.26);
    transition: transform .3s ease;
}
.quote-drawer.open { transform: translate(-50%, 0) }
.quote-hint { display: block; color: rgba(255,255,255,.45); font-size: 12px; margin-top: 2px }
.quote-drawer .btn.primary { background: var(--moss) }
.quote-drawer + .whatsapp { bottom: 100px }

/* ── Brand grid ────────────────────── */
.brand-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 13px }
.brand-card {
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #fff;
    padding: 20px;
    text-align: center;
    font-weight: 700;
    font-size: 13px;
    transition: border-color .18s, box-shadow .18s;
}
.brand-card:hover { border-color: var(--moss); box-shadow: 0 8px 24px rgba(26,51,24,.08) }

/* ── MOQ Banner ────────────────────── */
.moq-banner {
    background: var(--forest);
    border-radius: 20px;
    padding: 26px 32px;
    display: flex; align-items: center; justify-content: space-between;
    gap: 22px; margin-bottom: 34px; color: #fff;
}
.moq-banner-pills { display: flex; flex-wrap: wrap; gap: 10px }
.moq-pill { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); border-radius: 999px; padding: 8px 16px; font-size: 12px; font-weight: 700 }
.moq-banner h3 { font-family: 'Manrope', sans-serif; font-size: 17px; color: #fff; margin: 0 0 12px }
.moq-banner-cta { color: #fff; font-weight: 700; font-size: 13px; border-bottom: 1px solid rgba(255,255,255,.35); padding-bottom: 3px; cursor: pointer; white-space: nowrap; flex-shrink: 0 }

/* ── Proof section ─────────────────── */
.proof-section { background: var(--forest); padding: 110px 0; color: #fff }
.proof-grid-new { display: grid; grid-template-columns: 1.05fr .95fr; gap: 80px; align-items: center }
.proof-photo { height: 660px; border-radius: 22px; overflow: hidden; position: relative }
.proof-photo img { width: 100%; height: 100%; object-fit: cover }
.proof-photo:after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 70%, rgba(0,0,0,.48)) }
.proof-photo span { position: absolute; z-index: 2; bottom: 24px; left: 24px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.75) }
.proof-copy h2 { color: #fff; font-size: clamp(42px, 5vw, 68px); margin: 20px 0 }
.proof-copy > p { color: #b2caa8; font-size: 16px; line-height: 1.72 }
.proof-points { margin: 36px 0 }
.proof-points article { display: grid; grid-template-columns: 42px 1fr; gap: 16px; padding: 20px 0; border-top: 1px solid rgba(255,255,255,.12) }
.proof-points article > span { color: var(--gold); font-size: 11px; font-weight: 800 }
.proof-points b { font-family: 'Manrope', sans-serif; font-size: 15px; color: #fff }
.proof-points p { margin: 5px 0 0; color: #98b890; font-size: 13px }
.light-btn { background: #fff; color: var(--forest); border: 0 }

/* ── Process section ───────────────── */
.process-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line) }
.process-grid article { padding: 30px 28px 20px; border-right: 1px solid var(--line) }
.process-grid article:first-child { padding-left: 0 }
.process-grid article:last-child  { border: 0 }
.process-grid span { color: var(--gold); font-size: 10px; font-weight: 800; letter-spacing: .1em }
.process-grid h3 { font-family: 'Cormorant Garamond', serif; font-size: 28px; font-weight: 600; margin: 42px 0 12px }
.process-grid p  { color: var(--muted); font-size: 14px }

/* ── Testimonials ──────────────────── */
.testimonials { padding: 100px 0; background: var(--paper) }
.testimonial-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px }
.testimonial-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 22px;
    padding: 30px;
    display: flex;
    flex-direction: column;
}
.t-stars { color: var(--gold); font-size: 14px; letter-spacing: 3px; margin-bottom: 20px }
.testimonial-card > p { color: var(--muted); font-size: 15px; line-height: 1.8; margin: 0 0 28px; font-style: italic; flex: 1 }
.testimonial-card footer { display: flex; align-items: center; gap: 14px; padding-top: 20px; border-top: 1px solid var(--line) }
.t-avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--forest); color: #fff; display: grid; place-items: center; font-size: 11px; font-weight: 700; flex-shrink: 0 }
.testimonial-card footer b    { display: block; font-size: 14px; color: var(--ink) }
.testimonial-card footer span { color: var(--muted); font-size: 12px }

.trust-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; border: 1px solid var(--line); border-radius: 22px; overflow: hidden; margin-top: 52px; background: var(--line) }
.trust-stats > div { background: #fff; padding: 30px 26px }
.trust-stats b { font-family: 'Cormorant Garamond', serif; font-size: 44px; font-weight: 600; display: block; color: var(--forest); letter-spacing: -.04em }
.trust-stats span { color: var(--muted); font-size: 13px; margin-top: 5px; display: block }

/* ── Price List Teaser ─────────────── */
.pricelist-teaser { padding: 0 0 100px }
.pricelist-teaser-inner {
    background: linear-gradient(135deg, var(--forest), #2c5228);
    border-radius: 26px;
    padding: 52px 60px;
    display: flex; align-items: center; justify-content: space-between;
    gap: 40px; position: relative; overflow: hidden;
}
.pricelist-teaser-inner::before {
    content: "";
    position: absolute;
    right: 18%; top: -80px;
    width: 280px; height: 280px;
    border-radius: 50%;
    background: rgba(197,160,90,.14);
    filter: blur(50px);
    pointer-events: none;
}
.pricelist-teaser-inner::after { content: "PDF"; position: absolute; right: -28px; bottom: -55px; font-family: 'Manrope', sans-serif; font-size: 200px; font-weight: 800; color: rgba(255,255,255,.04); line-height: 1; pointer-events: none }
.pricelist-teaser-inner > div:first-child { position: relative; z-index: 1 }
.pricelist-teaser-inner span { font-size: 10px; letter-spacing: .16em; font-weight: 800; color: var(--gold); text-transform: uppercase }
.pricelist-teaser-inner h2 { color: #fff; font-size: clamp(32px,3.8vw,50px); margin: 14px 0 12px }
.pricelist-teaser-inner p { color: #a8c5a0; font-size: 15px; margin: 0; max-width: 460px }
.pricelist-teaser-btn { background: var(--gold); color: var(--forest); border: 0; padding: 16px 28px; font-weight: 800; white-space: nowrap; flex-shrink: 0; position: relative; z-index: 1 }
.pricelist-teaser-btn:hover { background: #d4b06a }

/* ── CTA Band ──────────────────────── */
.band {
    background: linear-gradient(135deg, var(--forest), #2c5228);
    color: #fff;
    border-radius: 36px;
    padding: 44px;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 25px;
    overflow: hidden;
    position: relative;
}
.band:before { content: ''; position: absolute; right: 12%; top: -60px; width: 200px; height: 200px; border-radius: 50%; background: var(--gold); opacity: .12; filter: blur(40px) }
.band h2 { color: #fff }
.band p  { color: rgba(255,255,255,.68); max-width: 680px }

/* ── Final CTA ─────────────────────── */
.final-cta  { padding: 0 0 110px }
.cta-panel {
    background: var(--sage);
    border-radius: 26px;
    padding: 60px;
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 40px;
    border: 1px solid var(--line);
}
.cta-panel > div > span { font-size: 10px; letter-spacing: .16em; font-weight: 800; color: var(--moss); text-transform: uppercase }
.cta-panel h2 { font-size: clamp(38px,4.6vw,62px); margin: 16px 0 0; color: var(--forest) }
.cta-btn { background: var(--forest); color: #fff; border: 0; padding: 16px 24px; white-space: nowrap }

/* ── Journal preview ───────────────── */
.home-journal { padding: 100px 0; background: var(--sand) }
.home-journal-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line) }
.home-journal-grid a { padding: 30px 26px 24px; border-right: 1px solid var(--line); display: block; transition: background .18s }
.home-journal-grid a:hover { background: rgba(255,255,255,.55) }
.home-journal-grid a:first-child { padding-left: 0 }
.home-journal-grid a:last-child  { border: 0 }
.home-journal-grid span { font-size: 10px; letter-spacing: .14em; color: var(--gold); font-weight: 800; text-transform: uppercase }
.home-journal-grid h3 { font-family: 'Cormorant Garamond', serif; font-size: 24px; font-weight: 600; line-height: 1.22; margin: 30px 0 }
.home-journal-grid b  { font-size: 12px; color: var(--moss); font-weight: 700 }

/* ── FAQ ───────────────────────────── */
.faq details { background: #fff; border: 1px solid var(--line); border-radius: 18px; margin: 11px 0; padding: 18px 22px }
.faq summary  { font-weight: 700; cursor: pointer }
.faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 72px 0 }
.faq-item { background: #fff; border: 1px solid var(--line); border-radius: 18px; overflow: hidden }
.faq-item summary { padding: 20px 24px; font-weight: 700; font-size: 15px; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 14px }
.faq-item summary::-webkit-details-marker { display: none }
.faq-item summary:after { content: "↓"; color: var(--moss); font-size: 15px; flex-shrink: 0; transition: transform .2s }
.faq-item[open] summary:after { transform: rotate(180deg) }
.faq-item[open] summary { border-bottom: 1px solid var(--line) }
.faq-item p { padding: 18px 24px; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.7 }

/* ── Contact ───────────────────────── */
.contact-grid  { display: grid; grid-template-columns: .9fr 1.1fr; gap: 22px }
.form          { display: grid; gap: 12px }
.form-grid     { display: grid; grid-template-columns: 1fr 1fr; gap: 14px }
.form-grid .full { grid-column: 1 / -1 }

.contact-channel-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 56px }
.channel-card { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 30px; transition: box-shadow .18s }
.channel-card:hover { box-shadow: 0 16px 44px rgba(26,51,24,.1) }
.channel-icon  { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; font-size: 21px; margin-bottom: 18px }
.channel-icon.wa { background: #e4f3e8 }
.channel-icon.em { background: #e4eef0 }
.channel-card h3 { font-family: 'Cormorant Garamond', serif; font-size: 22px; font-weight: 600; margin: 0 0 8px }
.channel-card p  { color: var(--muted); font-size: 14px; margin: 0 0 20px; line-height: 1.6 }
.channel-card .btn { width: 100%; justify-content: center }

.contact-form-section { background: #fff; border: 1px solid var(--line); border-radius: 26px; padding: 44px }
.contact-form-section h2 { font-size: clamp(28px,3.5vw,40px); margin: 0 0 8px }
.contact-form-section > p { color: var(--muted); margin: 0 0 30px }

.contact-tabs { display: flex; gap: 8px; margin-bottom: 30px; border-bottom: 1px solid var(--line) }
.contact-tab { padding: 11px 20px; border-radius: 10px 10px 0 0; font-weight: 700; font-size: 13px; cursor: pointer; border: none; background: transparent; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px }
.contact-tab.active { color: var(--forest); border-bottom-color: var(--moss); background: var(--sage) }
.contact-tab-panel { display: none }
.contact-tab-panel.active { display: block }

.moq-callout { display: flex; align-items: flex-start; gap: 18px; background: var(--sage); border-radius: 16px; padding: 22px; margin-bottom: 26px }
.moq-callout .moq-icon { width: 40px; height: 40px; border-radius: 12px; background: var(--forest); color: #fff; display: grid; place-items: center; font-size: 18px; flex-shrink: 0 }
.moq-callout p { margin: 0; font-size: 13px; color: var(--forest) }
.moq-callout b { display: block; font-size: 15px; margin-bottom: 4px }

/* ── Price list panel ──────────────── */
.pricelist-panel { display: grid; grid-template-columns: 1.1fr .9fr; gap: 60px; align-items: center; background: var(--forest); border-radius: 26px; padding: 56px; margin-bottom: 40px; position: relative; overflow: hidden }
.pricelist-panel::before { content: ""; position: absolute; right: -100px; top: -100px; width: 400px; height: 400px; border-radius: 50%; background: rgba(197,160,90,.08); pointer-events: none }
.pricelist-badge { display: inline-block; background: var(--moss); color: #fff; font-size: 10px; font-weight: 800; letter-spacing: .14em; padding: 6px 14px; border-radius: 999px; margin-bottom: 18px }
.pricelist-left h2 { color: #fff; font-size: clamp(30px,3.8vw,50px); margin: 0 0 16px; line-height: 1.06 }
.pricelist-left > p { color: #a8c5a0; font-size: 15px; line-height: 1.7; margin: 0 0 26px }
.pricelist-perks { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px }
.pricelist-perks li { display: flex; align-items: center; gap: 12px; font-size: 14px; color: #cce0c8 }
.pricelist-perks li span { color: var(--gold); font-weight: 700; font-size: 15px; flex-shrink: 0 }
.pricelist-right { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); border-radius: 18px; padding: 34px }
.pricelist-form-label { font-size: 11px; color: #96b89a; margin: 0 0 18px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase }
.pricelist-form { display: grid; gap: 12px }
.pricelist-form .input { background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.15); color: #fff }
.pricelist-form .input::placeholder { color: rgba(255,255,255,.38) }
.pricelist-form .input:focus { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.3); outline: none }
.pricelist-submit { width: 100%; justify-content: center; margin-top: 4px; background: var(--moss); border: 0; color: #fff; font-size: 14px }
.pricelist-submit:hover { background: #2e5229 }
.pricelist-disclaimer { margin: 14px 0 0; font-size: 11px; color: #7aa07a; text-align: center }
.pricelist-success { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); border-radius: 14px; padding: 20px 22px; color: #fff; font-size: 14px; margin-top: 16px }
.pricelist-success p { margin: 0; opacity: .85; font-size: 13px; line-height: 1.5 }
.pl-success-check { width: 34px; height: 34px; border-radius: 50%; background: var(--moss); display: flex; align-items: center; justify-content: center; font-size: 17px; color: #fff; margin-bottom: 4px }
.pl-success-wa { margin-top: 8px; background: var(--moss); color: #fff; border: none; font-size: 13px; padding: 10px 18px }

/* ── Steps (legacy) ────────────────── */
.steps { counter-reset: s; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px }
.step:before { counter-increment: s; content: '0' counter(s); display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--forest); color: #fff; font-weight: 800; margin-bottom: 14px }

/* ── Footer ────────────────────────── */
.footer { background: #0d1a0b; color: #fff; padding: 44px 0; margin-top: 60px }
.new-footer { background: #0e1b0c; margin: 0; padding: 68px 0 24px }
.footer-top { display: grid; grid-template-columns: 1.7fr repeat(3, 1fr); gap: 56px }
.footer-top > div { display: flex; flex-direction: column; gap: 10px }
.footer-top img { width: 150px; filter: brightness(0) invert(1) }
.footer-top p   { max-width: 340px; color: #88a082; font-size: 14px }
.footer-top b   { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 8px; color: var(--gold) }
.footer-top a   { font-size: 13px; color: #98b090; cursor: pointer; transition: color .18s }
.footer-top a:hover { color: #fff }
.footer-grid { display: grid; grid-template-columns: 1.2fr repeat(3, 1fr); gap: 24px }
.footer a, .footer p { color: #98b090 }
.footer-bottom { display: flex; justify-content: space-between; border-top: 1px solid rgba(255,255,255,.07); margin-top: 52px; padding-top: 20px; color: #64786a; font-size: 11px }

/* ── WhatsApp button ───────────────── */
.whatsapp {
    position: fixed; right: 22px; bottom: 22px; z-index: 60;
    background: var(--moss);
    color: #fff;
    border-radius: 999px;
    padding: 13px 20px;
    font-size: 13px; font-weight: 700;
    box-shadow: 0 18px 44px rgba(58,100,52,.32);
}
.whatsapp:before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #b0e8be; margin-right: 8px }

/* ── Table ─────────────────────────── */
.table-wrap { overflow: auto; border: 1px solid var(--line); border-radius: 20px; background: #fff }
table { width: 100%; border-collapse: collapse }
th, td { text-align: left; padding: 14px; border-bottom: 1px solid var(--line); font-size: 14px }
th { background: var(--sage); font-weight: 700 }
.hide { display: none !important }

/* ── About page ────────────────────── */
.about-page .about-hero { padding: 90px 0 75px; background: radial-gradient(circle at 82% 18%, rgba(163,196,155,.38), transparent 34%), var(--paper) }
.about-page .about-hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: stretch }
.about-page .about-panel {
    min-height: 460px; border-radius: 36px; padding: 32px;
    background: linear-gradient(145deg, rgba(255,255,255,.94), rgba(237,242,232,.8)),
                radial-gradient(circle at 80% 20%, rgba(58,100,52,.14), transparent 36%);
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
    position: relative; overflow: hidden;
}
.about-page .about-panel:after { content: "S"; position: absolute; right: -20px; bottom: -90px; font-family: 'Cormorant Garamond', serif; font-size: 360px; line-height: 1; color: rgba(26,51,24,.06) }
.about-page .panel-label { display: inline-flex; border: 1px solid #b8cdb0; background: #fff; color: var(--moss); border-radius: 999px; padding: 7px 13px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase }
.about-page .about-panel h2 { margin-top: 26px; max-width: 420px }
.about-page .about-mini-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 13px; margin-top: 40px; position: relative; z-index: 2 }
.about-page .about-mini-grid div { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 20px; box-shadow: 0 12px 36px rgba(26,51,24,.05) }
.about-page .about-mini-grid b   { font-family: 'Cormorant Garamond', serif; font-size: 32px; font-weight: 600; display: block; color: var(--forest) }
.about-page .about-mini-grid span{ color: var(--muted); font-size: 13px }
.about-page .gallery-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 18px }
.about-page .gallery-large { grid-row: span 2; min-height: 520px; border-radius: 32px; overflow: hidden; position: relative; box-shadow: var(--shadow) }
.about-page .gallery-large img, .about-page .gallery-card img,
.about-page .image-placeholder img, .about-page .proof-card img { width: 100%; height: 100%; object-fit: cover }
.about-page .gallery-large div { position: absolute; left: 22px; right: 22px; bottom: 22px; padding: 20px; border-radius: 20px; background: rgba(255,255,255,.86); backdrop-filter: blur(14px) }
.about-page .gallery-large b    { font-family: 'Cormorant Garamond', serif; font-size: 28px; font-weight: 600; display: block; color: var(--forest) }
.about-page .gallery-large span { color: var(--muted) }
.about-page .gallery-card { min-height: 240px; border-radius: 26px; overflow: hidden; position: relative; background: var(--sage); box-shadow: 0 14px 44px rgba(26,51,24,.07) }
.about-page .gallery-card b { position: absolute; left: 16px; bottom: 16px; background: rgba(255,255,255,.9); backdrop-filter: blur(12px); border-radius: 999px; padding: 9px 14px; font-size: 12px }
.about-page .process-showcase { display: grid; grid-template-columns: .95fr 1.05fr; gap: 32px; align-items: center; border-radius: 38px; padding: 40px; background: linear-gradient(135deg,#fff,var(--sand)); border: 1px solid var(--line); box-shadow: var(--shadow) }
.about-page .process-showcase p { color: var(--muted); max-width: 540px }
.about-page .process-list { display: grid; grid-template-columns: repeat(2,1fr); gap: 13px; margin-top: 26px }
.about-page .process-list div { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 17px }
.about-page .process-list b    { color: var(--moss); font-weight: 700; display: block; margin-bottom: 6px }
.about-page .image-placeholder { height: 420px; border-radius: 32px; overflow: hidden; background: var(--sage) }
.about-page .proof-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 20px }
.about-page .proof-card { background: #fff; border: 1px solid var(--line); border-radius: 30px; padding: 17px; box-shadow: var(--shadow) }
.about-page .proof-card img  { height: 300px; border-radius: 22px; background: var(--sage) }
.about-page .proof-card h3   { margin-top: 18px }
.about-page .proof-card p    { color: var(--muted) }
.about-page .trust-band { border-radius: 38px; padding: 44px; background: linear-gradient(135deg,var(--forest),#2c5228); color: #fff; display: grid; grid-template-columns: .9fr 1.1fr; gap: 38px }
.about-page .trust-band h2   { color: #fff }
.about-page .trust-list      { display: grid; gap: 13px }
.about-page .trust-list div  { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); border-radius: 20px; padding: 18px }
.about-page .trust-list b    { display: block; font-size: 15px }
.about-page .trust-list span { display: block; margin-top: 6px; color: #b8d0b0; font-size: 14px }
.about-page .about-cta { text-align: center; border-radius: 38px; padding: 58px 24px; background: radial-gradient(circle at 50% 0%, rgba(58,100,52,.13), transparent 36%), #fff; border: 1px solid var(--line); box-shadow: var(--shadow) }
.about-page .about-cta h2 { margin-top: 20px }
.about-page .about-cta p  { color: var(--muted); max-width: 600px; margin: 16px auto 26px }

/* About hero image overlay */
.about-page .about-hero-content { position: relative; padding: 50px; border-radius: 30px; overflow: hidden; min-height: 420px; display: flex; flex-direction: column; justify-content: center; background: url("../images/warehouse.png") center center / cover no-repeat }
.about-hero-content::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg,rgba(0,0,0,.68) 0%,rgba(0,0,0,.46) 42%,rgba(0,0,0,.16) 100%); z-index: 1 }
.about-hero-content > * { position: relative; z-index: 2 }
.about-hero-content h1, .about-hero-content p, .about-hero-content .eyebrow { color: #fff }
.about-hero-content h1 { font-size: clamp(46px, 5vw, 72px); line-height: .95 }
.about-page .about-hero-content, .about-page .about-panel { min-height: 580px }
.about-page .about-hero { padding: 68px 0 }
.about-page .about-hero-grid { align-items: stretch }

/* ── Brand showcase (About) ─────────── */
.about-brands { padding: 88px 0; background: #fff }
.about-brands .section-head { margin-bottom: 40px }
.brand-name-strip { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 38px }
.brand-name-strip span { display: inline-flex; align-items: center; height: 36px; padding: 0 16px; border: 1px solid var(--line); border-radius: 999px; font-family: 'Manrope', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .1em; color: var(--forest); background: #fff; white-space: nowrap; transition: background .18s, border-color .18s }
.brand-name-strip span:hover { background: var(--sage); border-color: rgba(26,51,24,.25) }
.brand-product-grid { display: grid; grid-template-columns: repeat(8,1fr); gap: 12px }
.brand-product-card { display: flex; flex-direction: column; align-items: center; gap: 9px; text-decoration: none; cursor: pointer }
.brand-product-card:hover .brand-product-img { transform: translateY(-4px); box-shadow: 0 14px 36px rgba(26,51,24,.14) }
.brand-product-img { width: 100%; aspect-ratio: 1/1; border-radius: 16px; background: var(--sage); overflow: hidden; transition: transform .22s, box-shadow .22s; display: flex; align-items: center; justify-content: center; padding: 14px }
.brand-product-img img { width: 100%; height: 100%; object-fit: contain }
.brand-product-more { flex-direction: column; gap: 4px; background: var(--forest) }
.brand-product-more span { font-family: 'Manrope', sans-serif; font-size: 26px; font-weight: 800; color: #fff; line-height: 1 }
.brand-product-more small { font-size: 10px; color: rgba(255,255,255,.62); font-weight: 600; letter-spacing: .06em; text-transform: uppercase }
.brand-product-card > span { font-size: 11px; font-weight: 700; color: var(--forest); letter-spacing: .04em; text-align: center }

/* ── Catalogue page ────────────────── */
.catalogue-page .catalogue-hero { padding: 72px 0 60px; background: radial-gradient(circle at 85% 15%, var(--sage), transparent 32%), var(--paper) }
.catalogue-page .catalogue-hero h1 { font-size: clamp(46px,6vw,76px); max-width: 820px }
.catalogue-page .catalogue-hero .lead { max-width: 700px; color: var(--muted) }
.catalogue-page section:not(.catalogue-hero) { padding: 62px 0 }
.catalogue-page .product-tools { position: sticky; top: 90px; z-index: 20; padding: 13px; background: rgba(246,249,242,.94); backdrop-filter: blur(15px); border: 1px solid var(--line); border-radius: 16px }
.catalogue-page .input, .catalogue-page .select { border-radius: 9px; border-color: var(--line); background: #fff }
.catalogue-page .products-grid { grid-template-columns: repeat(4,1fr) }

/* ── Journal ───────────────────────── */
.journal-hero { padding: 92px 0 72px; background: radial-gradient(circle at 80% 20%, var(--sage), transparent 35%), var(--paper) }
.journal-hero h1 { font-size: clamp(50px,6.7vw,88px); margin: 20px 0; max-width: 960px }
.journal-hero p  { max-width: 660px; color: var(--muted); font-size: 17px }
.journal-feature { padding: 0 0 100px }
.featured-story { display: grid; grid-template-columns: 1.15fr .85fr; background: var(--forest); color: #fff; border-radius: 24px; overflow: hidden }
.story-image { min-height: 500px }
.story-image img { width: 100%; height: 100%; object-fit: cover }
.story-copy { padding: 58px; display: flex; flex-direction: column; justify-content: center }
.story-copy > span, .story-card span { font-size: 10px; letter-spacing: .14em; font-weight: 800; color: var(--gold) }
.story-copy h2 { color: #fff; font-size: clamp(34px,3.6vw,52px); margin: 20px 0 }
.story-copy p  { color: #a8c3a0 }
.story-copy b  { margin-top: 18px; color: #fff }
.journal-list { padding: 100px 0; background: var(--sand) }
.posts-grid-new { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px }
.story-card { background: #fff; border-radius: 16px; overflow: hidden }
.story-card > img { width: 100%; height: 240px; object-fit: cover }
.story-card > div { padding: 24px }
.story-card span { color: var(--gold) }
.story-card h3 { font-family: 'Cormorant Garamond', serif; font-size: 24px; font-weight: 600; margin: 14px 0 }
.story-card p  { color: var(--muted); font-size: 14px }
.story-card b  { display: inline-block; color: var(--forest); margin-top: 10px; font-size: 13px; font-weight: 700 }
.journal-newsletter { padding: 100px 0 }
.journal-newsletter .wrap > div { padding: 62px; border-radius: 24px; background: var(--sage); text-align: center; border: 1px solid var(--line) }
.journal-newsletter span { font-size: 10px; letter-spacing: .14em; font-weight: 800; color: var(--moss) }
.journal-newsletter h2 { font-size: clamp(36px,4.6vw,60px); color: var(--forest); margin: 16px 0 }
.journal-newsletter p  { color: var(--muted); max-width: 600px; margin: 0 auto 26px }

/* ── Article ───────────────────────── */
.article-nav  { display: flex; align-items: center; gap: 20px }
.article-hero { padding: 88px 0 54px; text-align: center; background: var(--paper) }
.article-wrap { max-width: 800px; margin-inline: auto }
.article-hero > div > span { font-size: 10px; letter-spacing: .16em; color: var(--gold); font-weight: 800 }
.article-hero h1 { font-size: clamp(44px,6vw,72px); margin: 20px auto }
.article-hero p  { font-size: 18px; color: var(--muted) }
.article-meta  { font-size: 12px; color: #8b8e89; margin-top: 24px }
.article-cover { max-width: 1100px; height: 550px; border-radius: 22px; overflow: hidden }
.article-cover img { width: 100%; height: 100%; object-fit: cover }
.article-body  { padding: 72px 28px 108px; font-size: 16px; line-height: 1.82 }
.article-intro { font-size: 21px; line-height: 1.6; color: var(--forest); font-weight: 600 }
.article-body h2 { font-size: 30px; margin: 52px 0 14px }
.article-body p  { color: #4a544a }
.article-callout { margin: 44px 0; padding: 30px; border-left: 3px solid var(--gold); background: var(--sand); border-radius: 0 14px 14px 0 }
.article-callout b  { font-family: 'Manrope', sans-serif; font-size: 19px; color: var(--forest) }
.article-callout li { margin: 8px 0; color: var(--muted) }
.article-end { margin-top: 62px; padding: 36px; background: var(--forest); border-radius: 18px; color: #fff }
.article-end h2 { color: #fff; margin: 0 0 12px }
.article-end p  { color: #a8c3a0 }
.disclaimer { font-size: 12px !important; border-top: 1px solid var(--line); padding-top: 22px; margin-top: 42px !important }

/* ── Eyebrow (legacy) ──────────────── */
.eyebrow { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--moss); background: rgba(255,255,255,.7) }
.eyebrow:before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--moss) }

/* ── Stats (legacy) ────────────────── */
.stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 13px; margin-top: 34px }
.stat { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 18px; box-shadow: 0 12px 40px rgba(26,51,24,.05) }
.stat b    { font-family: 'Cormorant Garamond', serif; font-size: 28px; font-weight: 600; color: var(--forest) }
.stat span { display: block; color: var(--muted); font-size: 13px; margin-top: 5px }

/* ── Pill row ──────────────────────── */
.pill-row { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 16px }
.pill { font-size: 11px; font-weight: 700; border: 1px solid rgba(255,255,255,.15); border-radius: 999px; padding: 8px 12px; background: rgba(255,255,255,.08) }

/* ── Skeleton ──────────────────────── */
@keyframes shimmer { 0% { background-position: 200% 0 } 100% { background-position: -200% 0 } }
[data-products-grid]:empty { min-height: 360px; background: linear-gradient(90deg,#edf2e8 25%,#e4ece0 50%,#edf2e8 75%); background-size: 200% 100%; animation: shimmer 1.6s infinite; border-radius: 18px }
[data-brands-grid]:empty   { min-height: 200px;  background: linear-gradient(90deg,#edf2e8 25%,#e4ece0 50%,#edf2e8 75%); background-size: 200% 100%; animation: shimmer 1.6s infinite; border-radius: 18px }

/* ── FAQ / Contact heroes ───────────── */
.faq-page .faq-hero  { padding: 78px 0 52px; background: radial-gradient(circle at 85% 15%, var(--sage), transparent 32%), var(--paper) }
.faq-page .faq-hero h1  { font-size: clamp(44px,6vw,70px); margin: 20px 0 14px }
.faq-page .faq-hero .lead { max-width: 580px; color: var(--muted) }
.contact-page .contact-hero { padding: 78px 0 52px; background: radial-gradient(circle at 85% 15%, var(--sage), transparent 32%), var(--paper) }
.contact-page .contact-hero h1  { font-size: clamp(44px,6vw,70px); margin: 20px 0 14px; max-width: 800px }
.contact-page .contact-hero .lead { max-width: 580px; color: var(--muted) }

/* ══ RESPONSIVE ═══════════════════════════════════════════════════ */
@media (max-width: 980px) {
    .lux-hero-grid, .proof-grid-new  { grid-template-columns: 1fr }
    .hero-copy { padding-top: 8px }
    .hero-visual { max-width: 660px }
    .featured-lux  { grid-template-columns: repeat(2,1fr) }
    .proof-photo   { height: 460px }
    .footer-top    { grid-template-columns: 1.4fr 1fr 1fr }
    .footer-top > div:last-child { display: none }
    .testimonial-grid  { grid-template-columns: 1fr 1fr }
    .trust-stats       { grid-template-columns: repeat(2,1fr) }
    .contact-channel-grid { grid-template-columns: 1fr 1fr }
    .form-grid { grid-template-columns: 1fr }
    .pricelist-panel { grid-template-columns: 1fr; gap: 34px; padding: 38px 30px }
    .pricelist-teaser-inner { padding: 36px 30px; flex-direction: column; align-items: flex-start }
    .pricelist-teaser-btn { width: 100%; justify-content: center }
    .about-page .about-hero-grid, .about-page .gallery-grid,
    .about-page .process-showcase, .about-page .proof-grid,
    .about-page .trust-band { grid-template-columns: 1fr }
    .about-page .gallery-large { min-height: 400px }
    .brand-product-grid { grid-template-columns: repeat(4,1fr) }
    .links { position: fixed; top: 80px; left: 16px; right: 16px; background: #fff; border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow); padding: 18px; display: none; flex-direction: column; align-items: flex-start }
    .links.open { display: flex }
    .menu { display: block }
    .topbar .wrap { flex-direction: column; gap: 3px }
    .footer-grid { grid-template-columns: 1fr 1fr }
    .hero-grid, .contact-grid, .band { grid-template-columns: 1fr }
    .products-grid { grid-template-columns: repeat(2,1fr) }
    .grid-3, .grid-4, .steps { grid-template-columns: repeat(2,1fr) }
    .brand-grid { grid-template-columns: repeat(3,1fr) }
    .process-grid { grid-template-columns: 1fr 1fr }
    .process-grid article { border-bottom: 1px solid var(--line) }
    .catalogue-page .products-grid { grid-template-columns: repeat(3,1fr) }
    .featured-story { grid-template-columns: 1fr }
    .story-image { min-height: 340px }
    .story-copy { padding: 34px }
    .posts-grid-new { grid-template-columns: 1fr }
    .journal-newsletter .wrap > div { padding: 40px 20px }
    .article-cover { height: 360px; border-radius: 0 }
    .faq-grid { grid-template-columns: 1fr }
    .moq-banner { flex-direction: column; align-items: flex-start }
}

@media (max-width: 600px) {
    .wrap { padding-inline: 18px }
    .topbar .wrap { display: block; text-align: center }
    .topbar a { display: none }
    .lux-hero { padding: 46px 0 62px }
    .hero-copy h1 { font-size: 46px }
    .hero-copy > p { font-size: 15px }
    .hero-actions { display: grid }
    .hero-actions .btn { width: 100% }
    .text-link { text-align: center }
    .visual-main { height: 420px; border-radius: 100px 100px 18px 18px }
    .note-top    { right: 2px;  top: 44px }
    .note-bottom { left: 2px; bottom: 34px }
    .brand-strip { display: none }
    .catalogue-feature, .process-new, .proof-section { padding: 70px 0 }
    .lux-head { display: block }
    .lux-head h2 { font-size: 36px }
    .featured-lux { grid-template-columns: repeat(2,1fr); gap: 10px }
    .featured-lux .product:nth-child(n+7) { display: none }
    .product-body { padding: 13px }
    .product h3 { font-size: 14px }
    .product p  { display: none }
    .meta .badge:nth-child(2) { display: none }
    .proof-photo { height: 380px }
    .proof-grid-new { gap: 42px }
    .proof-copy h2 { font-size: 40px }
    .process-grid article:first-child { padding-left: 18px }
    .process-grid h3 { margin-top: 22px }
    .cta-panel { padding: 34px 22px; display: block }
    .cta-panel h2 { font-size: 36px; margin-bottom: 26px }
    .cta-panel .btn { width: 100% }
    .footer-top { grid-template-columns: 1fr 1fr; gap: 34px }
    .footer-top > div:first-child { grid-column: 1 / -1 }
    .footer-bottom { display: block }
    .footer-bottom span { display: block; margin-top: 8px }
    .nav-inner { height: 72px }
    h1 { font-size: 44px }
    .quote-drawer { bottom: 12px; padding: 14px; border-radius: 18px }
    .quote-drawer .quote-hint { display: none }
    .quote-drawer .btn { width: auto; padding: 11px 15px }
    .quote-drawer + .whatsapp { display: none }
    .stats, .products-grid, .grid-3, .grid-4, .steps, .brand-grid, .footer-grid { grid-template-columns: 1fr }
    .section-head { display: block }
    .btn { width: 100% }
    .whatsapp { left: 18px; right: 18px; text-align: center }
    .trust-stats { grid-template-columns: repeat(2,1fr) }
    .trust-stats > div { padding: 22px 18px }
    .trust-stats b { font-size: 38px }
    .testimonials { padding: 70px 0 }
    .testimonial-grid { grid-template-columns: 1fr }
    .about-page .about-mini-grid, .about-page .process-list { grid-template-columns: 1fr }
    .about-page .about-panel { min-height: auto }
    .about-page .proof-card img, .about-page .image-placeholder { height: 250px }
    .brand-name-strip span { font-size: 10px; padding: 0 12px; height: 32px }
    .brand-product-grid { grid-template-columns: repeat(4,1fr); gap: 8px }
    .brand-product-img { border-radius: 12px; padding: 10px }
    .brand-product-card > span { font-size: 10px }
    .pricelist-panel { padding: 26px 18px; border-radius: 18px }
    .pricelist-left h2 { font-size: 28px }
    .pricelist-right { padding: 22px 16px }
    .pricelist-teaser-inner { padding: 26px 20px; border-radius: 18px }
    .pricelist-teaser-inner h2 { font-size: 26px }
    .contact-channel-grid { grid-template-columns: 1fr }
    .contact-form-section { padding: 24px 16px }
    .journal-hero { padding: 58px 0 }
    .journal-hero h1 { font-size: 42px }
    .article-nav .btn { display: none }
    .article-hero { padding: 52px 0 38px }
    .article-hero h1 { font-size: 40px }
    .article-hero p  { font-size: 15px }
    .article-cover   { height: 280px }
    .article-body    { padding-top: 42px }
    .article-intro   { font-size: 18px }
    .article-body h2 { font-size: 26px }
    .journal-list    { padding: 68px 0 }
    .home-journal    { padding: 68px 0 }
    .home-journal-grid { grid-template-columns: 1fr }
    .home-journal-grid a, .home-journal-grid a:first-child { padding: 25px 0; border-right: 0; border-bottom: 1px solid var(--line) }
    .home-journal-grid h3 { margin: 18px 0; font-size: 22px }
    .faq-grid { grid-template-columns: 1fr }
    .catalogue-page .catalogue-hero { padding: 48px 0 36px }
    .catalogue-page .catalogue-hero h1 { font-size: 40px }
    .catalogue-page .products-grid { grid-template-columns: repeat(2,1fr); gap: 10px }
    .catalogue-page .product-tools { top: 76px }
    .catalogue-page .input, .catalogue-page .select { min-width: 100%; width: 100% }
}