/*
Theme Name: Jawaid Bross
Theme URI: https://jawaidbross.com
Author: Jawaid Bross
Author URI: https://jawaidbross.com
Description: Custom WordPress theme for Jawaid Bross — quality textile and apparel manufacturing. Faithful conversion of the Lovable preview with full responsive design, hero slideshow, 3D logo, FAQ accordion, certifications and contact form.
Version: 1.4.3
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: jawaid-bross
Tags: one-page, custom-menu, featured-images, responsive-layout, accessibility-ready
*/

/* ============================================================
   DESIGN TOKENS — Jawaid Bross atelier palette
   Dark navy/charcoal premium theme · warm gold accent
   Matches https://preview--theme-builder-joy-91.lovable.app
   ============================================================ */
:root{
  /* Accent — warm antique gold (brand signature) */
  --gold:#c8985a;
  --gold-light:#dcb077;
  --accent-hex:#c8985a;

  /* Surface palette — DARK navy/charcoal */
  --royal:#0d1117;          /* default page surface — deep near-black */
  --royal-deep:#111827;     /* "onyx" — products / marquee section */
  --black:#0d1117;          /* alias used by sections */
  --off-black:#1c2433;      /* "velvet" — alternating card bg */
  --gray:#1e2d3d;           /* hover surface / form field bg */

  /* Text & lines */
  --text:#f0ede6;
  --muted:rgba(240,237,230,0.52);
  --border:rgba(255,255,255,0.09);

  /* Typography */
  --font-serif:'Cormorant Garamond',Georgia,serif;
  --font-sans:'Inter',system-ui,sans-serif;
  --font-corporate:'Inter',system-ui,sans-serif;

  /* shadcn/tw foreground token (used inline in products HTML) */
  --foreground:#f0ede6;
}
:root.dark,.dark{--foreground:#f0ede6;}

/* Contact form notices */
.jb-form-notice{padding:14px 18px;border-radius:6px;margin-bottom:16px;font-size:14px;}
.jb-form-notice.jb-success{background:#eaf6ec;color:#1b5e20;border:1px solid #66bb6a;}
.jb-form-notice.jb-error{background:#fdecea;color:#b71c1c;border:1px solid #ef5350;}

/* A11y helpers */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}

/* Inline-utility shims (products section Tailwind-like class names) */
.text-foreground{color:var(--text);}
.text-foreground\/55{color:rgba(240,237,230,0.55);}
.text-foreground\/65{color:rgba(240,237,230,0.65);}
.bg-onyx{background-color:var(--royal-deep);}
.bg-velvet{background-color:var(--off-black);}
.border-foreground\/5{border-color:rgba(255,255,255,0.05);}

/* ── Layout utilities used by products section HTML ── */
.relative{position:relative;}
.overflow-hidden{overflow:hidden;}
.rounded-lg{border-radius:0.5rem;}
.absolute{position:absolute;}
.inset-0{top:0;right:0;bottom:0;left:0;}
.size-full,.w-full,.h-full{width:100%;height:100%;}
.object-cover{object-fit:cover;}
.block{display:block;}
.inline-block{display:inline-block;}
.flex{display:flex;}
.items-start{align-items:flex-start;}
.items-end{align-items:flex-end;}
.justify-between{justify-content:space-between;}
.justify-center{justify-content:center;}
.grid{display:grid;}
.grid-cols-1{grid-template-columns:1fr;}
.gap-1\.5{gap:0.375rem;}
.gap-6{gap:1.5rem;}
.gap-8{gap:2rem;}
.gap-10{gap:2.5rem;}
.mt-3{margin-top:0.75rem;}
.mt-6{margin-top:1.5rem;}
.mt-8{margin-top:2rem;}
.mt-20{margin-top:5rem;}
.mb-20{margin-bottom:5rem;}
.mb-28{margin-bottom:7rem;}
.mx-auto{margin-left:auto;margin-right:auto;}
.max-w-\[110rem\]{max-width:110rem;}
.max-w-\[58ch\]{max-width:58ch;}
.max-w-\[52ch\]{max-width:52ch;}
.px-6{padding-left:1.5rem;padding-right:1.5rem;}
.py-32{padding-top:8rem;padding-bottom:8rem;}
.leading-relaxed{line-height:1.625;}
.text-3xl{font-size:1.875rem;line-height:2.25rem;}
.text-2xl{font-size:1.5rem;line-height:2rem;}
.text-center{text-align:center;}
.bottom-5{bottom:1.25rem;}
.left-5{left:1.25rem;}
.h-\[2px\]{height:2px;}
.w-5{width:1.25rem;}
.font-style-italic,.italic{font-style:italic;}
.display-tight{line-height:0.92!important;letter-spacing:-0.04em!important;}
.caption{font-size:11px;letter-spacing:0.2em;text-transform:uppercase;}
/* aspect-ratio shim */
.aspect-\[4\/3\]{aspect-ratio:4/3;width:100%;}
/* group hover handled in JS / CSS below */
.group{display:block;}
/* Responsive layout utilities */
@media(min-width:768px){
  .md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr));}
  .md\:gap-10{gap:2.5rem;}
  .md\:mt-24{margin-top:6rem;}
  .md\:mb-28{margin-bottom:7rem;}
  .md\:py-44{padding-top:11rem;padding-bottom:11rem;}
  .md\:text-4xl{font-size:2.25rem;line-height:2.5rem;}
  .md\:px-12{padding-left:3rem;padding-right:3rem;}
}
@media(min-width:1024px){
  .lg\:grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr));}
  .lg\:col-span-4{grid-column:span 4/span 4;}
  .lg\:col-span-8{grid-column:span 8/span 8;}
}

/* ─── GLOBAL BASE TYPOGRAPHY ─── */
html,body{background:var(--royal);color:var(--text);}
section,nav,footer{background-color:var(--royal);}
/* Dark color-scheme + font smoothing */
html{color-scheme:dark;}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--royal);
  color:var(--text);
  font-family:var(--font-sans);
  font-size:14px;
  font-weight:500;          /* Lovable body weight */
  line-height:1.7;
  letter-spacing:-0.005em;  /* Lovable body tracking */
  font-feature-settings:'ss01','cv11'; /* Inter optical size features */
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  cursor:none;
}
/* Paragraph / inline text */
p,li,label,td,th{font-weight:500;line-height:1.75;}
/* Global heading defaults — Inter 800, tight tracking */
h1,h2,h3,h4,h5,h6{
  font-family:var(--font-sans);
  font-weight:800;
  letter-spacing:-0.025em;
  line-height:1.1;
  color:var(--text);
  -webkit-font-smoothing:antialiased;
}
/* Display headings override — Cormorant Garamond for editorial style */
h2.display,h1.display,.display{
  font-family:var(--font-serif)!important;
  font-weight:300!important;
  letter-spacing:-0.02em!important;
  line-height:0.95!important;
}

/* CUSTOM CURSOR — mix-blend-mode dot + soft ring (signature Lovable feel) */
#cursor{position:fixed;width:8px;height:8px;background:var(--gold);border-radius:50%;pointer-events:none;z-index:9999;transform:translate(-50%,-50%);transition:transform 0.1s,background 0.2s;}
#cursor-ring{position:fixed;width:36px;height:36px;border:1.5px solid var(--gold);border-radius:50%;pointer-events:none;z-index:9998;transform:translate(-50%,-50%);transition:width 0.3s,height 0.3s,opacity 0.3s,border-color 0.2s;opacity:0.55;}
body:hover #cursor{opacity:1;}
a,button,.hover-target{cursor:none;}

/* Touch / coarse pointer — restore native cursor, hide custom one */
@media (hover:none),(pointer:coarse){
  body,a,button,.hover-target{cursor:auto;}
  #cursor,#cursor-ring{display:none!important;}
}

/* SCROLLBAR */
::-webkit-scrollbar{width:3px;}
::-webkit-scrollbar-track{background:var(--royal);}
::-webkit-scrollbar-thumb{background:var(--gold);border-radius:2px;}
/* Selection */
::selection{background:var(--gold);color:#0d1117;}

/* NAV */
nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;justify-content:space-between;align-items:center;padding:24px 40px;background:rgba(10,14,20,0.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid rgba(255,255,255,0.07);}
.nav-logo{display:inline-flex;align-items:center;gap:12px;font-family:var(--font-sans);font-size:15px;font-weight:800;letter-spacing:-0.01em;color:var(--text);text-decoration:none;}
.nav-logo .nav-logo-text{display:inline-flex;align-items:baseline;}
.nav-logo .nav-logo-text i{color:var(--gold);font-style:normal;margin-left:2px;font-size:0.7em;}
#logo-canvas{width:42px;height:42px;display:block;background:transparent;}
.nav-right{display:flex;align-items:center;gap:40px;}
.nav-location{display:none;font-size:11px;letter-spacing:0.15em;color:var(--muted);text-transform:uppercase;}
.nav-inline{display:none;align-items:center;gap:34px;list-style:none;margin:0;padding:0;}
.nav-inline a{font-family:var(--font-sans);font-size:12px;font-weight:700;letter-spacing:0.12em;color:var(--text);text-decoration:none;text-transform:uppercase;position:relative;padding:6px 0;transition:color 0.25s ease;}
.nav-inline a::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform 0.35s ease;}
.nav-inline a:hover{color:var(--gold);}
.nav-inline a:hover::after{transform:scaleX(1);}
.menu-btn{font-size:11px;letter-spacing:0.15em;color:var(--text);text-transform:uppercase;background:none;border:1px solid var(--border);padding:8px 14px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:5px;flex-direction:column;width:42px;height:36px;}
.menu-btn span{display:block;width:18px;height:1.5px;background:var(--text);transition:transform 0.25s ease,opacity 0.25s ease;}
.menu-btn:hover{border-color:var(--gold);}
.menu-btn:hover span{background:var(--gold);}

/* MENU OVERLAY (desktop full-screen) */
#menu-overlay{position:fixed;inset:0;background:#0a0e14;z-index:200;display:flex;opacity:0;pointer-events:none;transition:opacity 0.5s;}
#menu-overlay.open{opacity:1;pointer-events:all;}
.menu-inner{display:flex;width:100%;padding:40px;}
.menu-left{flex:1;display:flex;flex-direction:column;justify-content:center;}
.menu-close{position:absolute;top:28px;right:40px;font-size:11px;letter-spacing:0.15em;color:var(--muted);background:none;border:none;cursor:none;}
.menu-nav{list-style:none;margin-top:60px;}
.menu-nav li{overflow:hidden;margin-bottom:8px;}
.menu-nav a{display:flex;align-items:baseline;gap:20px;font-family:var(--font-serif);font-size:clamp(36px,5vw,72px);font-weight:300;color:var(--text);text-decoration:none;letter-spacing:-0.02em;transition:color 0.3s;}
.menu-nav a:hover{color:var(--gold);}
.menu-nav a span.num{font-family:var(--font-sans);font-size:12px;color:var(--muted);}
.menu-right{width:280px;display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:40px;gap:24px;border-left:1px solid var(--border);padding-left:40px;}
.menu-info-label{font-size:10px;letter-spacing:0.15em;color:var(--muted);text-transform:uppercase;margin-bottom:4px;}
.menu-info-val{font-size:13px;color:var(--text);}
@media(min-width:1280px){
  .nav-inline{display:flex;}
  .menu-btn{display:none;}
  .nav-location{display:inline-block;}
}

/* HERO — dark stage so the banner photos pop (matches the Lovable preview) */
#hero{position:relative;height:100vh;min-height:560px;display:flex;flex-direction:column;justify-content:flex-end;padding:0 40px 60px;overflow:hidden;background:#0a0a0a;}
#hero-canvas{position:absolute;inset:0;z-index:1;pointer-events:none;}
.hero-slideshow{position:absolute;inset:0;z-index:0;overflow:hidden;cursor:pointer;background:#000;}
.hero-slideshow .hero-slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;animation:heroFade9 90s linear infinite;will-change:opacity;}
@keyframes heroFade9{0%{opacity:0}1.5%{opacity:1}11.11%{opacity:1}12.61%{opacity:0}100%{opacity:0}}
#hero.is-pressed .hero-slide{animation-play-state:paused;}
.hero-slideshow-overlay{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,0.15) 0%,rgba(0,0,0,0.05) 45%,rgba(0,0,0,0.55) 100%);pointer-events:none;}
.hero-3d-stage{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;perspective:1200px;pointer-events:none;transition:padding 0.6s cubic-bezier(.2,.8,.2,1);}
#hero.is-pressed .hero-3d-stage{align-items:flex-end;justify-content:flex-end;padding:0 48px 48px;}
#hero.is-pressed .hero-3d-text{font-size:clamp(20px,3.4vw,46px)!important;transform:translate3d(0,0,0)!important;}
.hero-3d-text{font-family:var(--font-corporate);font-weight:800;font-style:normal;font-size:clamp(38px,9.6vw,144px);letter-spacing:-0.03em;color:#ffffff;margin:0;text-align:center;line-height:0.9;transform-style:preserve-3d;transition:transform 0.6s cubic-bezier(.2,.8,.2,1),font-size 0.6s cubic-bezier(.2,.8,.2,1);text-shadow:0 1px 0 #c8c8c8,0 2px 0 #b8b8b8,0 3px 0 #a8a8a8,0 4px 0 #989898,0 5px 0 #888,0 6px 1px rgba(0,0,0,.1),0 0 5px rgba(0,0,0,.08),0 1px 3px rgba(0,0,0,.25),0 3px 5px rgba(0,0,0,.18),0 5px 10px rgba(0,0,0,.18),0 10px 20px rgba(0,0,0,.12),0 20px 30px rgba(0,0,0,.12);will-change:transform;}
.hero-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,0.55);backdrop-filter:blur(8px);border:1px solid rgba(0,0,0,0.08);color:#1a1a1a;font-size:24px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background 0.25s ease,transform 0.25s ease;font-family:var(--font-corporate);}
.hero-nav:hover{background:rgba(255,255,255,0.85);transform:translateY(-50%) scale(1.06);}
.hero-prev{left:24px;}.hero-next{right:24px;}
.hero-dots{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);z-index:5;display:flex;gap:8px;}
.hero-dots button{width:8px;height:8px;border-radius:50%;border:none;background:rgba(255,255,255,0.45);padding:0;cursor:pointer;transition:background 0.25s ease,width 0.25s ease;}
.hero-dots button.active{background:#fff;width:22px;border-radius:4px;}
#hero.is-pressed .hero-nav,#hero.is-pressed .hero-dots{opacity:0;pointer-events:none;}
#particle-canvas{position:fixed;inset:0;z-index:9999;pointer-events:none;}
@media (max-width:768px){.hero-nav{width:38px;height:38px;font-size:20px;}.hero-prev{left:10px;}.hero-next{right:10px;}#particle-canvas{display:none;}}

/* (legacy hero internals kept for compatibility) */
.hero-wordmark{position:absolute;top:50%;left:50%;transform:translate(-50%,-58%);z-index:1;display:flex;flex-direction:column;align-items:center;line-height:0.88;font-family:'Helvetica Neue','Arial Black',Helvetica,Arial,sans-serif;font-weight:900;font-style:italic;color:#ffffff;letter-spacing:-0.01em;pointer-events:none;user-select:none;text-align:center;}
.hero-wordmark span{font-size:clamp(72px,16vw,260px);display:block;}
.hero-altitude{position:absolute;top:50%;right:40px;transform:translateY(-50%);writing-mode:vertical-rl;font-size:10px;letter-spacing:0.2em;color:var(--muted);text-transform:uppercase;}
.hero-year{position:absolute;top:50%;left:40px;font-family:var(--font-serif);font-size:clamp(60px,10vw,160px);color:rgba(0,0,0,0.06);font-weight:300;transform:translateY(-40%);line-height:1;pointer-events:none;user-select:none;z-index:0;}
.hero-title{position:relative;z-index:3;font-family:var(--font-serif);font-size:clamp(40px,7vw,104px);font-weight:300;line-height:0.95;letter-spacing:-0.025em;margin-bottom:40px;max-width:min(90vw,1100px);}
.hero-title .line{overflow:hidden;display:block;}
.hero-title .word{display:inline-block;}
.hero-title em{font-style:italic;color:var(--gold);}
.hero-bottom{position:relative;z-index:3;display:flex;justify-content:space-between;align-items:flex-end;}
.hero-desc{max-width:380px;font-size:13px;color:var(--muted);line-height:1.8;}
.hero-cta{display:flex;gap:16px;}
.btn-primary{
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:var(--text);   /* white on dark bg — matches Lovable */
  color:var(--royal);
  padding:14px 28px;
  font-size:11px;
  font-family:var(--font-sans);
  font-weight:700;
  letter-spacing:0.15em;
  text-transform:uppercase;
  text-decoration:none;
  border:1px solid var(--text);
  transition:background 0.3s,border-color 0.3s,color 0.3s,gap 0.3s;
}
.btn-primary:hover{
  background:var(--gold);
  border-color:var(--gold);
  color:#0d1117;
  gap:18px;
}
.btn-ghost{
  display:inline-flex;
  align-items:center;
  gap:10px;
  border:1px solid rgba(255,255,255,0.25);
  color:var(--text);
  padding:14px 28px;
  font-size:11px;
  font-family:var(--font-sans);
  font-weight:700;
  letter-spacing:0.15em;
  text-transform:uppercase;
  text-decoration:none;
  transition:border-color 0.3s,color 0.3s,gap 0.3s;
}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold);gap:18px;}
.hero-stats{display:flex;gap:40px;padding-top:24px;border-top:1px solid var(--border);}
.stat-val{font-family:var(--font-serif);font-size:28px;font-weight:300;color:var(--gold);}
.stat-label{font-size:10px;letter-spacing:0.15em;color:var(--muted);text-transform:uppercase;}
.scroll-hint{position:absolute;bottom:60px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;font-size:10px;letter-spacing:0.2em;color:var(--muted);text-transform:uppercase;}
.scroll-line{width:1px;height:60px;background:linear-gradient(to bottom,var(--gold),transparent);animation:scrollDown 2s ease-in-out infinite;}
@keyframes scrollDown{0%{transform:scaleY(0);transform-origin:top;}50%{transform:scaleY(1);transform-origin:top;}51%{transform:scaleY(1);transform-origin:bottom;}100%{transform:scaleY(0);transform-origin:bottom;}}

/* MARQUEE */
.marquee-section{border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:14px 0;overflow:hidden;background:#111827;}
.marquee-track{display:flex;gap:0;white-space:nowrap;animation:marquee 30s linear infinite;}
.marquee-track.reverse{animation-direction:reverse;}
.marquee-item{display:inline-flex;align-items:center;gap:20px;padding:0 30px;font-size:11px;letter-spacing:0.2em;color:var(--muted);text-transform:uppercase;}
.marquee-item .dot{width:4px;height:4px;background:var(--gold);border-radius:50%;flex-shrink:0;}
@keyframes marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* SECTION COMMON */
section{padding:120px 40px;}
.section-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-bottom:20px;
  font-size:10px;
  letter-spacing:0.28em;
  color:var(--gold);
  text-transform:uppercase;
  font-weight:700;
  font-family:var(--font-sans);
}
.section-eyebrow::before{content:'';width:24px;height:1px;background:var(--gold);flex-shrink:0;}
.eyebrow-text{font-size:10px;letter-spacing:0.25em;color:var(--gold);text-transform:uppercase;font-weight:700;}
.section-num{font-size:10px;letter-spacing:0.15em;color:var(--muted);}
/* Large editorial display heading — Cormorant Garamond */
h2.display{
  font-family:var(--font-serif);
  font-size:clamp(44px,6.5vw,96px);
  font-weight:300;
  line-height:0.94;
  letter-spacing:-0.025em;
  margin-bottom:48px;
  color:var(--text);
}
h2.display em{font-style:italic;color:var(--gold);font-weight:400;}
/* Sub-heading used in section intros */
.section-heading{
  font-family:var(--font-sans);
  font-size:clamp(32px,4vw,56px);
  font-weight:800;
  letter-spacing:-0.025em;
  line-height:1.05;
  color:var(--text);
}
/* Small section label / caption */
.label-sm{
  font-size:10px;
  font-weight:700;
  letter-spacing:0.25em;
  text-transform:uppercase;
  color:var(--muted);
}

/* MANIFESTO */
#manifesto{background:#0d1117;}
.manifesto-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start;}
.manifesto-text{font-family:var(--font-serif);font-size:clamp(22px,3vw,36px);font-weight:300;line-height:1.4;color:var(--text);}
.manifesto-cta{margin-top:40px;}
.pillars{display:flex;flex-direction:column;gap:0;}
.pillar{padding:28px 0;border-top:1px solid var(--border);display:grid;grid-template-columns:40px 1fr;gap:20px;transition:all 0.3s;}
.pillar:hover{padding-left:16px;}
.pillar-num{font-size:11px;color:var(--gold);font-weight:500;padding-top:4px;}
.pillar-title{font-size:15px;font-weight:500;margin-bottom:6px;color:var(--text);}
.pillar-desc{font-size:13px;color:var(--muted);line-height:1.7;}

/* ─── PRODUCTS SECTION — definitive structural CSS ─────────────────── */
/* Section shell */
#products{
  background:#0f1923;
  border-top:1px solid var(--border);
  padding:8rem 1.5rem;   /* py-32 px-6 */
}
@media(min-width:768px){#products{padding:11rem 3rem;}}

/* Inner centred wrapper */
#products > div{
  max-width:110rem;
  margin-left:auto;
  margin-right:auto;
}

/* Header meta-row (eyebrow + headline) */
#products > div > div:first-child{
  display:grid;
  grid-template-columns:1fr;
  gap:2rem;
  margin-bottom:5rem;
  align-items:flex-end;
}
@media(min-width:1024px){
  #products > div > div:first-child{
    grid-template-columns:repeat(12,minmax(0,1fr));
    gap:2.5rem;
    margin-bottom:7rem;
  }
  #products > div > div:first-child > div:first-child{ grid-column:span 4/span 4; }
  #products > div > div:first-child > div:last-child { grid-column:span 8/span 8; }
}

/* ── Product card grid: 1-col mobile → 2-col desktop ── */
#products > div > div.grid,
#products .product-articles-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:2rem;
}
@media(min-width:768px){
  #products > div > div.grid,
  #products .product-articles-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:2.5rem;
  }
  /* Stagger: even cards pushed down (matches Lovable's offset) */
  #products > div > div.grid > article:nth-child(even),
  #products .product-articles-grid > article:nth-child(even){
    margin-top:6rem;
  }
}

/* ── Individual article card ── */
#products article{
  position:relative;
  transition:transform 0.6s cubic-bezier(0.23,1,0.32,1);
}
#products article > a{
  display:block;
  text-decoration:none;
  color:inherit;
}

/* ── Image container (.frame-plus) ──
   The HTML structure inside each article is:
     div.relative.aspect-[4/3].overflow-hidden.rounded-lg.bg-velvet.frame-plus
       > div.absolute.inset-0.overflow-hidden
           > img (×N, stacked, opacity toggled by JS)
       > div.absolute.bottom-5.left-5 (pip dots)
*/
#products article .frame-plus{
  position:relative;
  width:100%;
  aspect-ratio:4/3;          /* Locks image container to 4:3 — no overflow */
  overflow:hidden;
  border-radius:0.5rem;
  background:#1c2433;        /* --off-black */
  display:block;
}

/* Inner overflow guard */
#products article .frame-plus > div:first-of-type{
  position:absolute;
  inset:0;
  overflow:hidden;
}

/* All images inside a card — stacked, full-cover */
#products article .frame-plus img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
  /* Transitions driven by runtime.js opacity toggling */
  transition:opacity 1.2s cubic-bezier(0.42,0,1,1),
             transform 1.2s cubic-bezier(0.42,0,1,1);
  will-change:opacity,transform;
}

/* Hover: slightly zoom the currently visible image */
#products article a:hover .frame-plus img{
  transform:scale(1.06);
}

/* Pip / progress indicators row */
#products article .frame-plus > div:last-of-type{
  position:absolute;
  bottom:1.25rem;
  left:1.25rem;
  display:flex;
  gap:0.375rem;
  z-index:2;
  pointer-events:none;
}
#products article .frame-plus > div:last-of-type > span{
  display:inline-block;
  height:2px;
  width:1.25rem;
  border-radius:1px;
  transition:background 0.5s ease;
  flex-shrink:0;
}

/* ── Text area below each card ── */
#products article .mt-6{margin-top:1.5rem;}
#products article h3{
  font-family:var(--font-serif);
  font-size:1.875rem;
  font-weight:300;
  color:var(--text);
  line-height:1.15;
  display:inline;
  position:relative;
}
@media(min-width:768px){#products article h3{font-size:2.25rem;}}

/* Gold underline slide-in on hover */
#products article h3::after{
  content:'';
  position:absolute;
  left:0;right:0;
  bottom:-4px;
  height:1px;
  background:var(--gold);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform 0.5s ease;
}
#products article a:hover h3::after{transform:scaleX(1);}

#products article .mt-3{margin-top:0.75rem;}
#products article p{
  font-size:13px;
  color:rgba(240,237,230,0.65);
  line-height:1.7;
  max-width:52ch;
}

/* Catalogue CTA at bottom */
#products > div > div:last-child.flex,
#products .catalogue-cta-row{
  margin-top:5rem;
  display:flex;
  justify-content:center;
}

/* Legacy .product-card rules kept for any old HTML */
.products-header{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-bottom:80px;align-items:end;}
.products-subtitle{font-size:14px;color:var(--muted);line-height:1.8;max-width:360px;}
.product-grid{display:flex;flex-direction:column;gap:1px;background:var(--border);}
.product-card{background:var(--off-black);display:grid;grid-template-columns:1fr auto;align-items:stretch;transition:background 0.4s;overflow:hidden;}
.product-card:hover{background:var(--gray);}
.product-images{display:flex;overflow:hidden;width:340px;height:220px;flex-shrink:0;}
.product-images img{width:100%;height:100%;object-fit:cover;flex-shrink:0;transition:transform 0.6s;}
.product-card:hover .product-images img{transform:scale(1.05);}
.product-info{padding:36px 40px;display:flex;flex-direction:column;justify-content:space-between;flex:1;}
.product-meta{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:16px;}
.product-num{font-size:10px;letter-spacing:0.15em;color:var(--muted);}
.product-cert{font-size:9px;letter-spacing:0.2em;color:var(--gold);text-transform:uppercase;border:1px solid rgba(200,152,90,0.4);padding:3px 8px;}
.product-name{font-family:var(--font-serif);font-size:28px;font-weight:300;line-height:1.2;margin-bottom:8px;}
.product-refs{font-size:10px;letter-spacing:0.15em;color:var(--muted);margin-bottom:12px;}
.product-desc{font-size:13px;color:var(--muted);line-height:1.7;max-width:400px;}
.product-explore{display:flex;align-items:center;gap:12px;font-size:10px;letter-spacing:0.15em;color:var(--gold);text-transform:uppercase;margin-top:24px;text-decoration:none;transition:gap 0.3s;}
.product-explore:hover{gap:20px;}
.product-explore::after{content:'→';}
.catalogue-cta{text-align:center;margin-top:60px;}

/* ── Corner frame ticks ── */
.frame-plus{position:relative;}
.frame-plus .pl-tl,.frame-plus .pl-tr,.frame-plus .pl-bl,.frame-plus .pl-br{position:absolute;width:14px;height:14px;z-index:3;pointer-events:none;opacity:0.85;transition:opacity 0.3s;}
.frame-plus .pl-tl{top:10px;left:10px;border-top:1px solid var(--gold);border-left:1px solid var(--gold);}
.frame-plus .pl-tr{top:10px;right:10px;border-top:1px solid var(--gold);border-right:1px solid var(--gold);}
.frame-plus .pl-bl{bottom:10px;left:10px;border-bottom:1px solid var(--gold);border-left:1px solid var(--gold);}
.frame-plus .pl-br{bottom:10px;right:10px;border-bottom:1px solid var(--gold);border-right:1px solid var(--gold);}

/* ── Line-draw underline (CTA + headings) ── */
.line-draw{position:relative;display:inline-block;}
.line-draw::after{content:'';position:absolute;left:0;right:0;bottom:-4px;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform 0.5s ease;}
.line-draw:hover::after,.group:hover .line-draw::after{transform:scaleX(1);}
.caption{font-size:11px;letter-spacing:0.2em;text-transform:uppercase;}
/* SUSTAINABILITY */
#sustainability{background:#0d1117;}
.sust-layout{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start;}
.sust-stats{display:flex;gap:40px;margin-bottom:48px;}
.sust-stat .val{font-family:var(--font-serif);font-size:56px;font-weight:300;color:var(--gold);line-height:1;}
.sust-stat .label{font-size:10px;letter-spacing:0.15em;color:var(--muted);text-transform:uppercase;margin-top:4px;}
.sust-image{position:relative;overflow:hidden;height:500px;border:1px solid var(--border);}
.sust-image img{width:100%;height:500px;object-fit:cover;}
.sust-slideshow .sust-slide{position:absolute;inset:0;opacity:0;animation:sustFade 40s infinite;}
@keyframes sustFade{0%,22%{opacity:1}25%,97%{opacity:0}100%{opacity:1}}
.sust-pillars{display:flex;flex-direction:column;gap:0;margin-top:32px;}
.sust-pillar{padding:24px 0;border-top:1px solid var(--border);}
.sust-pillar-num{font-size:10px;color:var(--gold);letter-spacing:0.15em;margin-bottom:8px;}
.sust-pillar-title{font-size:15px;font-weight:500;margin-bottom:6px;color:var(--text);}
.sust-pillar-desc{font-size:13px;color:var(--muted);line-height:1.7;}

/* ATELIER IN MOTION (3D button stage) */
#atelier-motion{background:#0a0e14;padding:80px 40px;text-align:center;}
.atelier-motion-label{font-size:11px;letter-spacing:0.2em;color:var(--muted);text-transform:uppercase;margin-bottom:40px;}
.atelier-3d-stage{position:relative;max-width:900px;margin:0 auto;height:520px;border:1px solid var(--border);background:radial-gradient(ellipse at center, rgba(200,152,90,0.10) 0%, transparent 70%);overflow:hidden;}
.atelier-3d-stage::before,.atelier-3d-stage::after{content:'';position:absolute;width:1px;height:24px;background:var(--gold);opacity:0.4;}
.atelier-3d-stage::before{top:16px;left:16px;box-shadow:24px 0 0 var(--gold), 0 0 0 1px transparent, 0 24px 0 -23px var(--gold);}
.atelier-3d-stage::after{bottom:16px;right:16px;box-shadow:-24px 0 0 var(--gold), 0 -24px 0 -23px var(--gold);}
#atelier3d-canvas{width:100%;height:100%;display:block;cursor:none;}
.atelier-3d-meta{position:absolute;bottom:24px;left:0;right:0;display:flex;justify-content:center;gap:32px;flex-wrap:wrap;pointer-events:none;}
.atelier-3d-meta-item{display:inline-flex;align-items:center;gap:10px;font-size:10px;letter-spacing:0.2em;color:var(--muted);text-transform:uppercase;}
.atelier-3d-meta-item .dot{width:4px;height:4px;background:var(--gold);border-radius:50%;}

/* CERTIFICATIONS */
#certifications{background:#0d1117;}
.cert-intro{max-width:600px;margin-bottom:60px;}
.cert-desc{font-size:14px;color:var(--muted);line-height:1.8;}
.cert-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--border);}
.cert-item{background:#0d1117;padding:48px 32px;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:200px;transition:background 0.3s;}
.cert-item:hover{background:var(--off-black);}
.cert-item img{width:140px;height:140px;object-fit:contain;filter:grayscale(100%) opacity(0.5);transition:filter 0.3s,transform 0.3s;}
.cert-item:hover img{filter:grayscale(0%) opacity(1);transform:scale(1.06);}
.cert-name{font-size:11px;letter-spacing:0.1em;color:var(--muted);line-height:1.4;text-align:center;}

/* FAQ */
#faq{background:#111827;}
.faq-list{max-width:720px;}
.faq-item{border-top:1px solid var(--border);overflow:hidden;}
.faq-item:last-child{border-bottom:1px solid var(--border);}
.faq-q{display:flex;justify-content:space-between;align-items:center;padding:24px 0;cursor:none;width:100%;background:none;border:0;color:inherit;font:inherit;text-align:left;transition:color 0.3s;}
.faq-q:hover{color:var(--gold);}
.faq-q-text{font-size:15px;font-weight:400;}
.faq-icon{width:24px;height:24px;position:relative;flex-shrink:0;}
.faq-icon::before,.faq-icon::after{content:'';position:absolute;background:var(--gold);border-radius:1px;transition:transform 0.3s,opacity 0.3s;}
.faq-icon::before{width:12px;height:1px;top:50%;left:50%;transform:translate(-50%,-50%);}
.faq-icon::after{width:1px;height:12px;top:50%;left:50%;transform:translate(-50%,-50%);}
.faq-item.open .faq-icon::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0;}
.faq-a{max-height:0;overflow:hidden;transition:max-height 0.4s ease,padding 0.4s;}
.faq-item.open .faq-a{max-height:400px;padding-bottom:24px;}
.faq-a p{font-size:13px;color:var(--muted);line-height:1.8;}

/* CONTACT */
#contact{background:#0d1117;}
.contact-layout{display:grid;grid-template-columns:1fr 1fr;gap:80px;}
.contact-info{display:flex;flex-direction:column;gap:32px;}
.contact-info-item .label{font-size:10px;letter-spacing:0.15em;color:var(--muted);text-transform:uppercase;margin-bottom:6px;}
.contact-info-item a,.contact-info-item p{font-size:14px;color:var(--text);text-decoration:none;}
.contact-info-item a:hover{color:var(--gold);}
.contact-social{display:flex;gap:16px;margin-top:8px;flex-wrap:wrap;}
.contact-social a{font-size:10px;letter-spacing:0.15em;color:var(--muted);text-decoration:none;text-transform:uppercase;border:1px solid var(--border);padding:8px 14px;transition:all 0.3s;}
.contact-social a:hover{border-color:var(--gold);color:var(--gold);}
.contact-form{display:flex;flex-direction:column;gap:0;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin-bottom:1px;}
.form-group{position:relative;}
.form-group input,.form-group select,.form-group textarea{width:100%;background:#1a2535;border:none;border-bottom:1px solid var(--border);padding:18px 20px;font-family:var(--font-sans);font-size:13px;color:var(--text);outline:none;transition:border-color 0.3s,background 0.3s;}
.form-group input::placeholder,.form-group textarea::placeholder{color:var(--muted);}
.form-group input:focus,.form-group textarea:focus{border-color:var(--gold);background:#1e2f42;}
.form-group textarea{height:120px;resize:none;}
.form-submit{margin-top:1px;background:#1a1a1a;border:none;padding:20px;font-size:11px;letter-spacing:0.2em;color:#fff;text-transform:uppercase;text-align:right;cursor:none;display:flex;justify-content:flex-end;align-items:center;gap:12px;transition:gap 0.3s,background 0.3s;}
.form-submit:hover{gap:24px;background:var(--gold);}
.form-submit::after{content:'→';color:#fff;}

/* FOOTER */
footer{border-top:1px solid var(--border);padding:40px;display:flex;justify-content:space-between;align-items:center;background:#0a0e14;gap:24px;flex-wrap:wrap;}
.footer-copy{font-size:11px;color:var(--muted);}
.footer-nav{display:flex;gap:32px;flex-wrap:wrap;}
.footer-nav a{font-size:11px;letter-spacing:0.1em;color:var(--muted);text-decoration:none;text-transform:uppercase;transition:color 0.3s;}
.footer-nav a:hover{color:var(--gold);}

/* SCROLL ANIMATIONS — reveal-on-scroll */
.reveal{opacity:0;transform:translateY(30px);transition:opacity 0.8s ease,transform 0.8s ease;}
.reveal.visible{opacity:1;transform:translateY(0);}
.reveal-left{opacity:0;transform:translateX(-30px);transition:opacity 0.8s ease,transform 0.8s ease;}
.reveal-left.visible{opacity:1;transform:translateX(0);}
@media (prefers-reduced-motion: reduce){
  .reveal,.reveal-left{opacity:1!important;transform:none!important;}
  .marquee-track,.hero-slide,.sust-slide{animation:none!important;}
}

/* 3D TILT */
.tilt-card{transform-style:preserve-3d;transition:transform 0.15s ease-out;}
/* GOLD LINE */
.gold-line{width:40px;height:1px;background:var(--gold);margin-bottom:24px;}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:1100px){
  .product-card{grid-template-columns:1fr;}
  .product-images{width:100%;height:240px;}
}
@media(max-width:900px){
  .manifesto-grid,.sust-layout,.contact-layout,.products-header{grid-template-columns:1fr;gap:48px;}
  .cert-grid{grid-template-columns:repeat(3,1fr);}
  nav{padding:20px 20px;}
  section{padding:80px 20px;}
  #hero{padding:0 20px 40px;}
  .hero-stats{flex-wrap:wrap;gap:20px;}
  footer{flex-direction:column;gap:20px;text-align:center;}
  .product-images{width:100%;height:200px;}
  .manifesto-grid h2.display{font-size:clamp(44px,12vw,72px);line-height:1.02;text-align:left;margin-bottom:32px;}
  .manifesto-grid h2.display br{display:none;}
  .manifesto-grid h2.display em{display:inline;}
  .nav-inline a{font-size:13px;}
}
@media(max-width:600px){
  .cert-grid{grid-template-columns:repeat(2,1fr);}
  .form-row{grid-template-columns:1fr;}
  .hero-cta{flex-direction:column;}
}

/* Tablet/mobile: hide inline nav, show hamburger */
@media(max-width:1279px){
  .nav-inline{display:none!important;}
  .menu-btn{display:flex!important;}
}

@media(max-width:768px){
  nav{padding:16px 18px;}
  .nav-logo{font-size:15px;gap:8px;}
  #logo-canvas{width:32px;height:32px;}
  .nav-right{gap:14px;}
  .nav-location{display:none;}
  #hero{padding:0 20px 32px;justify-content:flex-end;}
  .hero-tag{top:74px;left:20px;font-size:9px;}
  .hero-altitude{display:none;}
  .hero-year{display:none;}
  .hero-title{font-size:clamp(34px,11vw,52px);line-height:1.02;margin-bottom:24px;max-width:100%;}
  .hero-bottom{flex-direction:column;align-items:stretch;gap:28px;}
  .hero-desc{max-width:100%;font-size:13px;line-height:1.7;}
  .hero-stats{gap:24px;flex-wrap:wrap;padding-top:20px;}
  .stat-val{font-size:22px;}
  .hero-cta{flex-direction:column;align-items:stretch;gap:10px;width:100%;}
  .btn-primary,.btn-ghost{justify-content:center;padding:14px 20px;text-align:center;}
  .scroll-hint{display:none;}
  .product-info{padding:24px 24px;}
}

/* MENU — side drawer on tablet & mobile */
@media(max-width:1279px){
  #menu-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.6);backdrop-filter:blur(8px);z-index:300;display:block;opacity:0;pointer-events:none;transition:opacity 0.25s ease;overflow:hidden;}
  #menu-overlay.open{opacity:1;pointer-events:all;}
  .menu-inner{position:absolute;top:0;right:0;bottom:0;width:min(420px,88vw);height:100dvh;max-height:100dvh;background:#0a0e14;border-left:1px solid var(--border);box-shadow:-24px 0 60px rgba(0,0,0,0.18);display:flex;flex-direction:column;padding:64px 20px calc(20px + env(safe-area-inset-bottom)) 20px;gap:14px;transform:translateX(100%);transition:transform 0.28s cubic-bezier(.2,.8,.2,1);overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;color:var(--text);}
  #menu-overlay.open .menu-inner{transform:translateX(0);}
  .menu-left{flex:0 0 auto;}
  .menu-close{display:block;position:absolute;top:14px;right:16px;color:var(--text);border:1px solid var(--border);padding:6px 10px;font-size:11px;background:transparent;cursor:pointer;z-index:2;}
  .menu-nav{margin-top:0;width:100%;}
  .menu-nav li{margin-bottom:0;border-bottom:1px solid var(--border);overflow:visible;}
  .menu-nav li:last-child{border-bottom:none;}
  .menu-nav a{font-family:var(--font-sans);font-size:15px;font-weight:600;letter-spacing:0.02em;padding:11px 4px;gap:12px;color:var(--text);line-height:1.15;}
  .menu-nav a span.num{font-size:10px;letter-spacing:0.15em;color:var(--muted);min-width:22px;}
  .menu-right{width:100%;border-left:none;border-top:1px solid var(--border);padding:14px 4px 0;gap:10px;justify-content:flex-start;flex:0 0 auto;}
  .menu-info-val{font-size:12px;}
}
@media(max-width:600px){
  .menu-inner{width:min(340px,92vw);padding:56px 16px calc(16px + env(safe-area-inset-bottom)) 16px;gap:10px;}
  .menu-nav a{font-size:14px;padding:9px 4px;gap:10px;}
  .menu-nav a span.num{font-size:9px;min-width:20px;}
  .menu-info-label{font-size:9px;}
  .menu-info-val{font-size:11px;}
}
@media(max-width:600px) and (max-height:740px){
  .menu-inner{padding-top:48px;gap:6px;}
  .menu-nav a{padding:7px 4px;font-size:13px;}
  .menu-right{padding-top:10px;gap:8px;}
}

/* R&D section overrides — keep stacked, centered heading on tablet/mobile */
@media(max-width:1024px){
  #rd{padding:96px 32px;}
  #rd .manifesto-grid{gap:56px;}
  #rd .manifesto-grid h2.display{text-align:center;font-size:clamp(48px,8vw,72px);line-height:1.05;margin-bottom:24px;}
  #rd .manifesto-grid h2.display br{display:inline;}
}
@media(max-width:600px){
  #rd{padding:72px 20px;}
  #rd .manifesto-grid{gap:40px;}
  #rd .manifesto-grid h2.display{font-size:clamp(36px,10vw,52px);line-height:1.08;}
  #rd .sust-pillars{margin-top:24px;}
  #rd p.reveal{font-size:14px!important;line-height:1.75!important;}
  .atelier-3d-stage{height:380px;}
  .atelier-3d-meta{gap:16px;}
}