/* ── TOKENS ──────────────────────────────────── */
/* Design system: ERA Residence palette applied to Bellafreez */
:root {
  /* ERA color.text.primary → main dark bg */
  --c-navy:    #17233b;
  --c-navy-2:  #0d1a2d;
  --c-navy-3:  #1e3050;
  /* ERA color.surface.raised → soft blue-gray accent (on dark) */
  --c-teal:    #b5cedb;
  --c-teal-d:  #8db2c5;
  --c-white:   #ffffff;
  /* ERA color.text.tertiary → warm cream (light sections) */
  --c-off:     #f3f3ec;
  /* ERA color.surface.muted → deep wine/maroon (accent sections) */
  --c-maroon:  #340c24;
  --c-g1:      #c4d4dc;
  --c-g2:      #8a9fac;
  --c-g3:      #5a7280;
  --c-border:  rgba(255,255,255,0.08);
  --c-border-l:rgba(181,206,219,0.22);
  --c-light-border: #cdd8de;

  /* ERA radius tokens */
  --r-xs: 38.4px; --r-sm: 50px; --r-md: 100px; --r-lg: 768px;

  /* ERA spacing scale */
  --sp-1: 11.52px; --sp-2: 20.16px; --sp-3: 23.04px; --sp-4: 32.26px; --sp-5: 46.08px;

  /* ERA motion (400ms instant / 800ms fast) */
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-out:    cubic-bezier(0.25, 1, 0.5, 1);
  --ease-in:     cubic-bezier(0.5, 0, 0.75, 0);
  --ease:        cubic-bezier(0.25, 0.1, 0.25, 1);
  --dur-s: 0.4s; --dur-m: 0.8s; --dur-l: 1.2s;

  --f-d: 'Cormorant Garamond', Georgia, serif;
  --f-b: 'DM Sans', system-ui, sans-serif;
  --max: 1320px;
  --gutter: clamp(20px, 5vw, 80px);
}

/* ── RESET ───────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body { font-family: var(--f-b); background: var(--c-navy); color: var(--c-white); font-weight: 300; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: var(--f-b); cursor: pointer; border: none; background: none; }
ul { list-style: none; }

/* ── PRELOADER ───────────────────────────────── */
#preloader {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--c-navy);
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 32px;
}
.pre-logo { font-family: var(--f-d); font-size: clamp(32px, 6vw, 64px); font-weight: 400; letter-spacing: -0.02em; }
.pre-logo span { color: var(--c-teal); font-style: italic; }
.pre-bar { width: 120px; height: 1px; background: var(--c-border); position: relative; overflow: hidden; }
.pre-bar::after { content: ''; position: absolute; inset: 0; background: var(--c-teal); transform: translateX(-100%); animation: pre-fill 1.4s var(--ease-in-out) forwards; }
@keyframes pre-fill { to { transform: translateX(0); } }

/* ── NAV ─────────────────────────────────────── */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  padding: 20px var(--gutter);
  display: flex; align-items: center; justify-content: space-between;
  transition: background var(--dur-m) var(--ease-out), border-color var(--dur-m) var(--ease-out);
  border-bottom: 1px solid transparent;
}
nav.scrolled { background: rgba(11,26,36,0.95); backdrop-filter: blur(12px); border-color: var(--c-border); }
.nav-logo { display: flex; align-items: center; }
.nav-logo-img { height: 36px; width: auto; display: block; }
.nav-links { display: flex; align-items: center; gap: 32px; }
.nav-link { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-g1); transition: color var(--dur-s) var(--ease-out); position: relative; overflow: hidden; display: inline-flex; flex-direction: column; height: 1.2em; }
.nav-link span { display: block; transition: transform var(--dur-m) var(--ease-out), opacity var(--dur-m) var(--ease-out); }
.nav-link:hover span:first-child { transform: translateY(-100%); opacity: 0; }
.nav-link:hover span:last-child { transform: translateY(-100%); }
.nav-link span:last-child { color: var(--c-teal); }
.nav-cta { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-navy); background: var(--c-teal); padding: 10px 24px; transition: background var(--dur-s) var(--ease-out); }
.nav-cta:hover { background: var(--c-teal-d); }
.lang-switcher { display: flex; gap: 6px; align-items: center; }
.lang-btn { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-g2); padding: 4px 8px; border: 1px solid transparent; transition: all var(--dur-s) var(--ease-out); cursor: pointer; background: none; font-family: var(--f-b); }
.lang-btn.active { color: var(--c-teal); border-color: var(--c-border-l); }
.nav-hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; }
.nav-hamburger span { width: 24px; height: 1px; background: var(--c-white); transition: all var(--dur-s) var(--ease-out); display: block; }
.nav-mobile { display: none; }

/* ── SCROLL-SCRUB HERO ──────────────────────── */
.hero-stage {
  position: relative; height: 100vh; overflow: hidden; background: #070F16;
}

/* Videos */
.hero-vids { position: absolute; inset: 0; z-index: 0; }
.hero-vid  { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero-vid-2 { opacity: 0; }

/* Dark gradient overlay */
.hero-grad {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to bottom, rgba(7,15,22,0.50) 0%, rgba(7,15,22,0.18) 45%, rgba(7,15,22,0.82) 100%);
}

/* Chapters — all stacked, JS controls opacity + translateY */
.hero-ch {
  position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: flex-end;
  padding: clamp(80px,10vw,140px) var(--gutter) clamp(60px,8vw,100px);
  pointer-events: none;
  will-change: transform, opacity;
}
.hero-ch-inner { max-width: 900px; width: 100%; }
.hero-ch-body  { font-size: 15px; color: var(--c-g1); line-height: 1.75; max-width: 520px; margin-top: 20px; font-weight: 300; }

/* Eyebrow / title / sub / actions — used across all chapters */
.hero-eyebrow   { font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--c-teal); margin-bottom: 24px; opacity: 0; transform: translateY(20px); }
.hero-title     { font-family: var(--f-d); font-size: clamp(56px,10vw,140px); font-weight: 300; line-height: 0.92; letter-spacing: -0.025em; margin-bottom: 32px; overflow: hidden; }
.hero-title em  { font-style: italic; color: var(--c-teal); }
.hero-sub       { display: flex; align-items: center; gap: 16px; margin-bottom: 48px; }
.hero-sub-label { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-g2); }
.hero-cycle-wrap { overflow: hidden; height: 1.4em; }
.hero-cycle      { display: flex; flex-direction: column; }
.hero-cycle-item { font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-teal); line-height: 1.4; }
.hero-actions    { display: flex; gap: 16px; flex-wrap: wrap; }

/* Scroll hint — left side, fades out via JS after 7% scroll */
.hero-scroll      { position: absolute; bottom: 40px; left: var(--gutter); z-index: 10; display: flex; align-items: center; gap: 12px; font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--c-g2); }
.hero-scroll-line { width: 40px; height: 1px; background: var(--c-border-l); position: relative; overflow: hidden; }
.hero-scroll-line::after { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: var(--c-teal); animation: scroll-run 2s var(--ease-out) infinite; }
@keyframes scroll-run { 0%{left:-100%} 100%{left:100%} }

/* Progress bar — right side */
.hero-prog       { position: absolute; right: var(--gutter); bottom: 48px; z-index: 10; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.hero-prog-track { width: 1px; height: 64px; background: rgba(255,255,255,0.12); position: relative; }
.hero-prog-fill  { position: absolute; inset: 0; background: var(--c-teal); transform: scaleY(0); transform-origin: top; }
.hero-prog-num   { font-size: 10px; letter-spacing: 0.1em; color: rgba(255,255,255,0.35); font-family: var(--f-b); font-variant-numeric: tabular-nums; }
.hero-prog-total { color: rgba(255,255,255,0.18); }

/* ── BTN ─────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; gap: 10px; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; padding: 14px 36px; font-weight: 400; transition: all var(--dur-m) var(--ease-in-out); position: relative; overflow: hidden; font-family: var(--f-b); border-radius: var(--r-md); }
.btn-primary { background: var(--c-teal); color: var(--c-navy); }
.btn-primary::before { content: ''; position: absolute; inset: 100% 0 auto; height: 100%; background: var(--c-teal-d); transition: inset var(--dur-m) var(--ease-in-out); }
.btn-primary:hover::before { inset: auto 0 0; }
.btn-primary > * { position: relative; z-index: 1; }
.btn-outline { border: 1px solid var(--c-border-l); color: var(--c-white); }
.btn-outline:hover { border-color: var(--c-teal); color: var(--c-teal); }
.btn-arrow::after { content: '→'; transition: transform var(--dur-m) var(--ease-out); }
.btn-arrow:hover::after { transform: translateX(6px); }

/* ── SECTION BASE ────────────────────────────── */
section { position: relative; }
.s-dark { background: var(--c-navy); color: var(--c-white); }
.s-mid  { background: var(--c-navy-2); color: var(--c-white); }
.s-light{ background: var(--c-off); color: var(--c-navy); }
.s-pad  { padding: clamp(64px,10vw,160px) var(--gutter); }
.container { max-width: var(--max); margin: 0 auto; }
.s-label { font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--c-teal); margin-bottom: 24px; display: block; }
.s-label-dark { color: var(--c-maroon); opacity: 0.75; }
.s-title { font-family: var(--f-d); font-size: clamp(36px, 6vw, 72px); font-weight: 300; line-height: 1.05; letter-spacing: -0.02em; }
.s-title em { font-style: italic; color: var(--c-teal); }
.s-title.dark { color: var(--c-navy); }
.s-light .s-title em { color: var(--c-maroon); }
.s-body { font-size: 15px; font-weight: 300; line-height: 1.75; color: var(--c-g1); max-width: 560px; }
.s-body.dark { color: var(--c-g3); }
.line-h { height: 1px; background: var(--c-border); }
.line-h.light { background: var(--c-light-border); }

/* reveal classes (set by GSAP) */
[data-reveal] { opacity: 0; }

/* ── CONCEPT SECTION ─────────────────────────── */
.concept-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.concept-quote { font-family: var(--f-d); font-size: clamp(28px, 4vw, 52px); font-weight: 300; font-style: italic; line-height: 1.15; color: var(--c-navy); letter-spacing: -0.015em; margin-bottom: 48px; }
.concept-features { display: flex; flex-direction: column; gap: 0; }
.concept-feature { padding: 28px 0; border-top: 1px solid var(--c-light-border); display: flex; gap: 24px; align-items: flex-start; }
.concept-feature:last-child { border-bottom: 1px solid var(--c-light-border); }
.feature-num { font-family: var(--f-d); font-size: 13px; color: var(--c-maroon); min-width: 24px; padding-top: 3px; }
.feature-title { font-size: 13px; font-weight: 500; letter-spacing: 0.05em; color: var(--c-navy); margin-bottom: 6px; }
.feature-desc { font-size: 13px; font-weight: 300; color: var(--c-g3); line-height: 1.65; }
.concept-img-wrap { position: relative; border-radius: var(--r-xs); overflow: hidden; aspect-ratio: 4/5; }
.concept-img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-l) var(--ease-out); }
.concept-img-wrap:hover img { transform: scale(1.04); }

/* ── CATEGORIES ──────────────────────────────── */
.cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--c-border); }
.cat-card {
  position: relative; aspect-ratio: 4/3; overflow: hidden; cursor: pointer;
  background: var(--c-navy-2);
  display: flex; align-items: flex-end; padding: 28px;
}
.cat-card-img { position: absolute; inset: 0; }
.cat-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-l) var(--ease-out); filter: brightness(0.4); }
.cat-card:hover .cat-card-img img { transform: scale(1.08); }
.cat-card-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(11,26,36,0.9) 0%, transparent 60%); }
.cat-card-body { position: relative; z-index: 2; }
.cat-count { font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--c-teal); margin-bottom: 8px; }
.cat-name { font-family: var(--f-d); font-size: clamp(18px, 2.5vw, 28px); font-weight: 400; color: var(--c-white); margin-bottom: 12px; transition: color var(--dur-s) var(--ease-out); }
.cat-card:hover .cat-name { color: var(--c-teal); }
.cat-arrow { font-size: 18px; color: var(--c-teal); transform: translateX(-8px); opacity: 0; transition: transform var(--dur-m) var(--ease-out), opacity var(--dur-m) var(--ease-out); }
.cat-card:hover .cat-arrow { transform: translateX(0); opacity: 1; }

/* ── PRODUCT CARD ────────────────────────────── */
.products-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1px; background: var(--c-light-border); }
.product-card { background: var(--c-white); }
.product-card-img { aspect-ratio: 1; overflow: hidden; background: var(--c-off); position: relative; }
.product-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-l) var(--ease-out); }
.product-card:hover .product-card-img img { transform: scale(1.06); }
.product-card-body { padding: 20px 24px 24px; border-top: 1px solid var(--c-light-border); }
.product-cat-label { font-size: 9px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--c-maroon); margin-bottom: 6px; }
.product-name { font-family: var(--f-d); font-size: 20px; font-weight: 400; color: var(--c-navy); line-height: 1.2; margin-bottom: 8px; }
.product-desc { font-size: 12px; color: var(--c-g3); line-height: 1.65; margin-bottom: 16px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.product-footer { display: flex; align-items: center; justify-content: space-between; }
.product-price { font-family: var(--f-d); font-size: 22px; font-weight: 400; color: var(--c-navy); }
.product-moq { font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-maroon); background: var(--c-off); padding: 4px 12px; border-radius: var(--r-sm); }

/* ── STATS ───────────────────────────────────── */
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--c-border); }
.stat-item { padding: 48px 32px; border-top: 1px solid var(--c-border); }
.stat-num { font-family: var(--f-d); font-size: clamp(48px, 7vw, 80px); font-weight: 300; letter-spacing: -0.03em; line-height: 1; color: var(--c-teal); margin-bottom: 12px; }
.stat-label { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-g2); }
.stat-sub { font-size: 12px; color: var(--c-g3); margin-top: 6px; line-height: 1.5; }

/* ── CTA SECTION ─────────────────────────────── */
.cta-section { background: var(--c-maroon); padding: clamp(64px,8vw,120px) var(--gutter); }
.cta-inner { max-width: var(--max); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.cta-title { font-family: var(--f-d); font-size: clamp(32px,5vw,64px); font-weight: 300; color: var(--c-white); line-height: 1.1; letter-spacing: -0.02em; }
.cta-title em { font-style: italic; color: var(--c-teal); }
.cta-sub { font-size: 13px; color: rgba(255,255,255,0.62); margin-top: 12px; font-weight: 300; max-width: 440px; }
.btn-dark { background: var(--c-teal); color: var(--c-navy); padding: 16px 40px; }
.btn-dark:hover { background: var(--c-teal-d); }

/* ── FOOTER ──────────────────────────────────── */
footer { background: #070F16; border-top: 1px solid var(--c-border); padding: 64px var(--gutter) 32px; }
.footer-grid { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 64px; }
.footer-brand-logo { font-family: var(--f-d); font-size: 28px; font-weight: 400; margin-bottom: 16px; }
.footer-brand-logo em { color: var(--c-teal); font-style: italic; }
.footer-tagline { font-size: 12px; color: var(--c-g2); line-height: 1.7; max-width: 280px; }
.footer-col-title { font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-teal); margin-bottom: 20px; }
.footer-link { font-size: 13px; color: var(--c-g2); display: block; padding: 5px 0; transition: color var(--dur-s) var(--ease-out); }
.footer-link:hover { color: var(--c-white); }
.footer-bottom { max-width: var(--max); margin: 0 auto; padding-top: 32px; border-top: 1px solid var(--c-border); display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.footer-copy { font-size: 11px; color: var(--c-g3); }
.footer-vendor { font-size: 11px; color: var(--c-g3); }
.footer-vendor a { color: var(--c-teal); }

/* ── CATALOGUE PAGE ──────────────────────────── */
.cat-page-hero { padding: 140px var(--gutter) 64px; background: var(--c-navy-2); border-bottom: 1px solid var(--c-border); }
.cat-page-hero .s-title { margin-bottom: 8px; }
.filter-bar { display: flex; gap: 0; overflow-x: auto; scrollbar-width: none; background: var(--c-off); border-bottom: 1px solid var(--c-light-border); padding: 0 var(--gutter); }
.filter-bar::-webkit-scrollbar { display: none; }
.filter-btn { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-g3); padding: 18px 24px; border-bottom: 2px solid transparent; white-space: nowrap; transition: all var(--dur-s) var(--ease-out); background: none; font-family: var(--f-b); border-left: none; border-right: none; border-top: none; cursor: pointer; }
.filter-btn:hover { color: var(--c-navy); }
.filter-btn.active { color: var(--c-maroon); border-bottom-color: var(--c-maroon); }
.catalogue-grid { max-width: var(--max); margin: 0 auto; padding: 64px var(--gutter); background: var(--c-off); }
.products-wrap { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1px; background: var(--c-light-border); }
.product-card.hidden { display: none; }

/* ── ABOUT PAGE ──────────────────────────────── */
.about-hero { padding: 140px var(--gutter) 80px; min-height: 60vh; display: flex; align-items: flex-end; }
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
.about-text p { font-size: 15px; color: var(--c-g1); line-height: 1.8; margin-bottom: 20px; font-weight: 300; }
.about-values { display: flex; flex-direction: column; gap: 0; }
.about-value { padding: 28px 0; border-top: 1px solid var(--c-border); display: flex; gap: 24px; }
.about-value:last-child { border-bottom: 1px solid var(--c-border); }
.val-icon { width: 32px; height: 32px; border: 1px solid var(--c-border-l); display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; }
.val-title { font-size: 13px; font-weight: 500; color: var(--c-g1); margin-bottom: 4px; }
.val-desc { font-size: 12px; color: var(--c-g2); line-height: 1.65; }
.b2b-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--c-border); }
.b2b-card { padding: 40px 32px; background: var(--c-navy-2); }
.b2b-num { font-family: var(--f-d); font-size: 48px; font-weight: 300; color: var(--c-teal); margin-bottom: 12px; }
.b2b-label { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-g2); margin-bottom: 12px; }
.b2b-desc { font-size: 13px; color: var(--c-g2); line-height: 1.65; }

/* ── CONTACT PAGE ────────────────────────────── */
.contact-hero { padding: 140px var(--gutter) 64px; }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
.contact-info-item { display: flex; gap: 16px; padding: 24px 0; border-bottom: 1px solid var(--c-border); }
.contact-info-icon { font-size: 16px; min-width: 24px; color: var(--c-teal); }
.contact-info-label { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-teal); margin-bottom: 4px; }
.contact-info-val { font-size: 14px; color: var(--c-g1); }
form { display: flex; flex-direction: column; gap: 16px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-label { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-teal); }
.form-input, .form-select, .form-textarea {
  background: var(--c-navy-2); border: 1px solid var(--c-border);
  color: var(--c-white); padding: 14px 16px; font-size: 14px;
  font-family: var(--f-b); font-weight: 300;
  transition: border-color var(--dur-s) var(--ease-out); outline: none; width: 100%;
}
.form-input:focus, .form-select:focus, .form-textarea:focus { border-color: var(--c-teal); }
.form-textarea { min-height: 120px; resize: vertical; }
.form-select option { background: var(--c-navy-2); }
.form-submit { align-self: flex-start; }
.form-note { font-size: 11px; color: var(--c-g3); line-height: 1.6; }

/* ── CONTACT PAGE (extended) ─────────────────── */
.contact-detail { padding: 20px 0; border-bottom: 1px solid var(--c-border); }
.contact-detail:first-child { border-top: 1px solid var(--c-border); }
.contact-detail-label { font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-teal); margin-bottom: 6px; }
.contact-detail-val { font-size: 14px; color: var(--c-g1); line-height: 1.5; }
a.contact-detail-val:hover { color: var(--c-white); }
.contact-form-wrap { background: var(--c-navy-2); padding: 48px; border: 1px solid var(--c-border); }
.contact-form { display: flex; flex-direction: column; gap: 20px; }
.form-field { display: flex; flex-direction: column; gap: 8px; }
.form-checks { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.form-check { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 12px; color: var(--c-g2); transition: color var(--dur-s) var(--ease-out); }
.form-check:hover { color: var(--c-g1); }
.form-check input[type="checkbox"] { width: 16px; height: 16px; border: 1px solid var(--c-border); appearance: none; -webkit-appearance: none; background: var(--c-navy); cursor: pointer; flex-shrink: 0; position: relative; transition: all var(--dur-s) var(--ease-out); }
.form-check input[type="checkbox"]:checked { background: var(--c-teal); border-color: var(--c-teal); }
.form-check input[type="checkbox"]:checked::after { content: '✓'; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 10px; color: var(--c-navy); font-weight: 700; }

/* ── FEAT GRID (home) ────────────────────────── */
.feat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1px; background: var(--c-light-border); }

/* ── PAGE TRANSITIONS ────────────────────────── */
.page-transition { position: fixed; inset: 0; z-index: 200; background: var(--c-teal); transform: translateY(100%); pointer-events: none; }

/* ── RESPONSIVE ──────────────────────────────── */
@media (max-width: 1024px) {
  .cat-grid { grid-template-columns: repeat(2,1fr); }
  .stats-grid { grid-template-columns: repeat(2,1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .nav-links { display: none; }
  .nav-hamburger { display: flex; }
  .nav-mobile { display: none; position: fixed; inset: 0; z-index: 90; background: var(--c-navy); flex-direction: column; align-items: center; justify-content: center; gap: 32px; }
  .nav-mobile.open { display: flex; }
  .nav-mobile .nav-link { font-size: 32px; font-family: var(--f-d); letter-spacing: 0; text-transform: none; height: auto; }
  .nav-mobile .nav-link span { font-size: 28px; font-family: var(--f-d); }
  .concept-grid { grid-template-columns: 1fr; }
  .concept-img-wrap { order: -1; aspect-ratio: 16/9; }
  .cat-grid { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: repeat(2,1fr); }
  .about-grid, .contact-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .cta-inner { flex-direction: column; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .b2b-grid { grid-template-columns: 1fr; }
  .hero-title { font-size: clamp(48px, 14vw, 80px); }
}

/* ═══════════════════════════════════════════════
   EDITORIAL DESIGN OVERLAY — Bellafreez × Luxury
═══════════════════════════════════════════════ */

/* ── ROTATING CIRCULAR BADGE (nav logo) ─────── */
.badge-wrap {
  position: relative; width: 72px; height: 72px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.badge-ring {
  position: absolute; inset: 0; animation: badge-spin 22s linear infinite;
  overflow: visible;
}
.badge-ring text {
  font-family: var(--f-b); font-size: 7.5px; fill: rgba(255,255,255,0.55);
  letter-spacing: 2.8px; text-transform: uppercase;
}
.badge-logo-img {
  position: relative; z-index: 1; height: 30px; width: auto;
}
@keyframes badge-spin { to { transform: rotate(360deg); } }

/* ── LEFT SCROLL PROGRESS INDICATOR ─────────── */
.scroll-prog {
  position: fixed; left: 22px; top: 50%; transform: translateY(-50%);
  z-index: 90; display: flex; flex-direction: column; align-items: center;
  gap: 10px; pointer-events: none; mix-blend-mode: difference;
}
.sp-track {
  width: 1px; height: 80px; background: rgba(255,255,255,0.15);
  border-radius: 1px; position: relative;
}
.sp-fill {
  position: absolute; top: 0; left: 0; right: 0; height: 0%;
  background: #fff; border-radius: 1px; transition: height 0.12s linear;
}
.sp-num {
  font-family: var(--f-d); font-size: 9px; color: rgba(255,255,255,0.55);
  font-variant-numeric: tabular-nums; letter-spacing: 0.04em;
  font-style: italic;
}
.sp-label {
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-family: var(--f-b); font-size: 7px; letter-spacing: 0.32em;
  text-transform: uppercase; color: rgba(255,255,255,0.25);
}
.sp-arrow {
  width: 1px; height: 22px; background: rgba(255,255,255,0.1);
  position: relative; overflow: hidden; border-radius: 1px;
}
.sp-arrow::after {
  content: ''; position: absolute; top: -100%; left: 0; right: 0; height: 100%;
  background: rgba(255,255,255,0.7);
  animation: sp-drop 2.2s cubic-bezier(0.25,1,0.5,1) infinite;
}
@keyframes sp-drop {
  0%   { top: -100%; opacity: 0; }
  15%  { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}
@media (max-width: 900px) { .scroll-prog { display: none; } }

/* ── COOKIE CONSENT BANNER ───────────────────── */
.cookie-consent {
  position: fixed; bottom: 28px; right: 28px; z-index: 9000;
  background: var(--c-off); color: var(--c-navy);
  padding: 28px 30px; max-width: 300px; border-radius: 1px;
  box-shadow: 0 28px 70px rgba(0,0,0,0.22), 0 4px 16px rgba(0,0,0,0.1);
  opacity: 0; transform: translateY(18px); pointer-events: none;
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}
.cookie-consent.show { opacity: 1; transform: none; pointer-events: auto; }
.cc-title {
  font-family: var(--f-d); font-size: 28px; font-style: italic;
  font-weight: 300; color: var(--c-navy); margin-bottom: 10px; line-height: 1;
}
.cc-body {
  font-family: var(--f-b); font-size: 8px; letter-spacing: 0.14em;
  text-transform: uppercase; color: #4A6B7A; line-height: 1.9;
  margin-bottom: 18px;
}
.cc-acts { display: flex; gap: 20px; }
.cc-btn {
  font-family: var(--f-b); font-size: 8.5px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--c-navy);
  text-decoration: underline; text-decoration-thickness: 0.5px;
  text-underline-offset: 3px; cursor: pointer; padding: 0;
  background: none; border: none;
  transition: opacity 0.3s;
}
.cc-btn:hover { opacity: 0.45; }

/* ── EDITORIAL TYPOGRAPHY UPGRADES ──────────── */
.s-title {
  font-size: clamp(42px, 7vw, 100px) !important;
  letter-spacing: -0.025em !important;
  line-height: 0.92 !important;
  font-weight: 300 !important;
}
.s-label {
  font-size: 8px !important;
  letter-spacing: 0.44em !important;
}
.s-pad {
  padding-top: clamp(80px, 12vw, 160px) !important;
  padding-bottom: clamp(80px, 12vw, 160px) !important;
}
.stat-num {
  font-size: clamp(64px, 9vw, 110px) !important;
  letter-spacing: -0.03em !important;
}
.cta-title {
  font-size: clamp(42px, 6.5vw, 88px) !important;
  letter-spacing: -0.025em !important;
}
.concept-quote {
  font-size: clamp(34px, 5.5vw, 68px) !important;
  letter-spacing: -0.02em !important;
}
.cat-name {
  font-size: clamp(22px, 3vw, 36px) !important;
  letter-spacing: -0.01em !important;
}

/* ── EDITORIAL NAV LINK HOVER ────────────────── */
.nav-link { height: auto !important; flex-direction: row !important; position: relative !important; padding-bottom: 4px !important; overflow: visible !important; }
.nav-link span:last-child { display: none !important; }
.nav-link span:first-child { transform: none !important; opacity: 1 !important; transition: color 0.3s var(--ease-out) !important; }
.nav-link::after {
  content: '' !important; position: absolute !important;
  bottom: 0 !important; left: 0 !important;
  width: 0 !important; height: 0.5px !important;
  background: var(--c-teal) !important;
  transition: width 0.45s var(--ease-out) !important;
}
.nav-link:hover span:first-child { color: var(--c-teal) !important; }
.nav-link:hover::after { width: 100% !important; }

/* ── FOOTER BRAND — more editorial ──────────── */
.footer-brand-logo {
  font-size: clamp(30px, 4vw, 48px) !important;
  letter-spacing: -0.018em !important;
}

/* ═══════════════════════════════════════════════
   ERA-STYLE CATEGORY CAROUSEL
═══════════════════════════════════════════════ */
.era-carousel {
  position: relative; background: var(--c-navy);
  height: 100vh; min-height: 580px; max-height: 960px;
  overflow: hidden; user-select: none;
}

/* Header row: label left, counter right */
.era-c-header {
  position: absolute; top: clamp(32px, 5vw, 56px);
  left: var(--gutter); right: var(--gutter);
  z-index: 20; display: flex; align-items: center;
  justify-content: space-between; pointer-events: none;
}
.era-c-label {
  font-size: 8px; letter-spacing: 0.44em; text-transform: uppercase;
  color: rgba(255,255,255,0.38);
}
.era-c-counter {
  font-family: var(--f-d); font-size: 14px; font-style: italic;
  color: rgba(255,255,255,0.35); letter-spacing: 0.06em;
  display: flex; align-items: center; gap: 4px;
}
.era-c-cur {
  color: var(--c-teal); font-style: normal;
  transition: color 0.4s var(--ease-out);
  min-width: 1.6ch; display: inline-block;
}
.era-c-sep { color: rgba(255,255,255,0.2); }

/* Track viewport */
.era-c-track-wrap {
  position: absolute; inset: 0; overflow: hidden;
}
.era-c-track {
  display: flex; height: 100%;
  will-change: transform;
  transition: transform 0.8s cubic-bezier(0.76, 0, 0.24, 1);
}

/* Single slide */
.era-c-slide {
  flex-shrink: 0; width: 100%; height: 100%;
  display: grid; grid-template-columns: 44fr 56fr;
}

/* Left: content */
.era-c-content {
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: clamp(100px,14vw,180px) var(--gutter) clamp(80px,10vw,120px);
  position: relative; z-index: 2;
}
.era-c-meta {
  font-size: 8.5px; letter-spacing: 0.34em; text-transform: uppercase;
  color: var(--c-teal); margin-bottom: 22px; opacity: 0.85;
}
.era-c-title {
  font-family: var(--f-d); font-size: clamp(52px, 7.5vw, 108px);
  font-weight: 300; line-height: 0.9; letter-spacing: -0.025em;
  color: var(--c-white); margin-bottom: 28px;
}
.era-c-title em { font-style: italic; color: var(--c-teal); }
.era-c-desc {
  font-size: 13px; color: rgba(255,255,255,0.52); line-height: 1.75;
  max-width: 360px; margin-bottom: 40px; font-weight: 300;
}

/* Right: image */
.era-c-img {
  position: relative; overflow: hidden;
}
.era-c-img img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  filter: brightness(0.82);
  transform: scale(1.06);
  transition: transform 1s cubic-bezier(0.25, 1, 0.5, 1),
              filter 0.8s var(--ease-out);
}
.era-c-slide.is-active .era-c-img img {
  transform: scale(1);
  filter: brightness(0.92);
}

/* Slide content entrance animations */
.era-c-slide .era-c-meta,
.era-c-slide .era-c-title,
.era-c-slide .era-c-desc,
.era-c-slide .btn {
  opacity: 0; transform: translateY(28px);
  transition: opacity 0.65s var(--ease-out), transform 0.65s var(--ease-out);
}
.era-c-slide.is-active .era-c-meta  { opacity: 0.85; transform: none; transition-delay: 0.05s; }
.era-c-slide.is-active .era-c-title { opacity: 1;    transform: none; transition-delay: 0.12s; }
.era-c-slide.is-active .era-c-desc  { opacity: 1;    transform: none; transition-delay: 0.20s; }
.era-c-slide.is-active .btn         { opacity: 1;    transform: none; transition-delay: 0.28s; }

/* Bottom navigation: arrows right, drag hint centre */
.era-c-nav {
  position: absolute; bottom: clamp(32px, 5vw, 52px);
  right: var(--gutter); z-index: 20;
  display: flex; align-items: center; gap: 12px;
}
.era-c-prev, .era-c-next {
  width: 48px; height: 48px;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: var(--r-md);
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.55);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all 0.4s var(--ease-out);
}
.era-c-prev:hover, .era-c-next:hover {
  border-color: var(--c-teal); color: var(--c-teal);
  background: rgba(181,206,219,0.08);
}
.era-c-prev:focus-visible, .era-c-next:focus-visible {
  outline: 2px solid var(--c-teal); outline-offset: 3px;
}

/* Drag hint */
.era-c-drag-hint {
  position: absolute; bottom: clamp(36px, 5vw, 56px); left: 50%;
  transform: translateX(-50%);
  font-size: 7.5px; letter-spacing: 0.42em; text-transform: uppercase;
  color: rgba(255,255,255,0.22); pointer-events: none;
  transition: opacity 0.4s;
}
.era-carousel.is-dragging .era-c-drag-hint { opacity: 0; }

/* Thin progress bar at bottom */
.era-c-progress {
  position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
  background: rgba(255,255,255,0.06); z-index: 20;
}
.era-c-progress-fill {
  height: 100%; background: var(--c-teal);
  transition: width 0.8s cubic-bezier(0.76, 0, 0.24, 1);
}

/* Mobile layout */
@media (max-width: 768px) {
  .era-carousel { height: auto; max-height: none; }
  .era-c-slide  { grid-template-columns: 1fr; grid-template-rows: 55vw 1fr; }
  .era-c-img    { grid-row: 1; }
  .era-c-content{ grid-row: 2; padding: 40px var(--gutter) 80px; }
  .era-c-title  { font-size: clamp(40px, 12vw, 64px); }
  .era-c-nav    { bottom: 28px; }
}