:root {
  --green:       #2D4A3E;
  --green-deep:  #1E332B;
  --green-soft:  #4A7060;
  --green-pale:  #E4EDE9;
  --amber:       #C4891A;
  --amber-deep:  #9A6A10;
  --amber-light: #E5A83A;
  --amber-pale:  #FCF5E1;
  --paper:    #f5f0e6;
  --paper-2:  #ede8dc;
  --paper-3:  #e5dfd2;
  --ink:   #13172a;
  --ink-2: #2c3150;
  --ink-3: #505878;
  --ink-4: #8a90a8;
  --line:  rgba(19,23,42,.09);
  --line-2:rgba(19,23,42,.16);
  --line-3:rgba(19,23,42,.30);
  --serif:   "Cormorant Garamond", Georgia, serif;
  --prose:   "EB Garamond", Georgia, serif;
  --mono:    "JetBrains Mono", "Courier New", monospace;
  --max:  1320px;
  --pad:  clamp(24px, 4.5vw, 64px);
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100% }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--prose);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img,svg { display:block; max-width:100% }
a { color:inherit; text-decoration:none }
button { font:inherit; cursor:pointer; border:0; background:none; color:inherit }

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation-duration:.01ms !important; transition-duration:.1ms !important }
}

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

/* ── NAV ── */
.nav {
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.nav-inner {
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  height:66px; gap:32px;
}
.logo-wrap { display:flex; align-items:center; gap:11px }
.logo-img { width:42px; height:42px; border-radius:50%; flex-shrink:0; box-shadow:0 2px 8px -2px rgba(31,61,110,.28) }
.logo-name {
  font-family:var(--serif); font-weight:500;
  font-size:19px; letter-spacing:.008em; color:var(--ink);
  white-space:nowrap;
}
.logo-name sup {
  font-family:var(--mono); font-size:8.5px;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-4); vertical-align:super;
  margin-left:4px; font-weight:400;
}
.nav-back {
  font-family:var(--mono); font-size:9.5px;
  letter-spacing:.15em; text-transform:uppercase;
  color:var(--ink-4); transition:color .22s;
  display:flex; align-items:center; gap:6px;
}
.nav-back:hover { color:var(--green) }
nav.links { display:flex; gap:24px; justify-self:center }
nav.links a {
  font-family:var(--mono); font-size:10px;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink-3); padding:3px 0; position:relative;
  transition:color .22s;
}
nav.links a::after {
  content:""; position:absolute; left:0; bottom:-2px;
  width:0; height:1px; background:var(--green);
  transition:width .28s ease;
}
nav.links a:hover, nav.links a.nav-current { color:var(--green) }
nav.links a:hover::after, nav.links a.nav-current::after { width:100% }
.nav-cta { display:flex; gap:10px; align-items:center }
.btn-cta {
  display:inline-flex; align-items:center; gap:9px;
  padding:10px 18px;
  font-family:var(--mono); font-size:10px;
  letter-spacing:.18em; text-transform:uppercase;
  font-weight:500;
  background:var(--green); color:#fff;
  border-radius:2px;
  transition:background .25s, transform .25s cubic-bezier(.2,.8,.2,1);
}
.btn-cta:hover { background:var(--green-deep); transform:translateY(-1px) }
.btn-cta-arr { display:inline-block; transition:transform .25s }
.btn-cta:hover .btn-cta-arr { transform:translateX(3px) }
.btn-outline {
  display:inline-flex; align-items:center; gap:9px;
  padding:10px 18px;
  font-family:var(--mono); font-size:10px;
  letter-spacing:.18em; text-transform:uppercase;
  font-weight:500; color:var(--ink);
  outline:1.5px solid var(--line-3);
  border-radius:2px;
  transition:background .25s, color .25s;
}
.btn-outline:hover { background:var(--ink); color:var(--paper) }
.menu-toggle { display:none }

/* ── HERO ── */
.hero {
  min-height:88vh;
  display:flex; flex-direction:column; justify-content:flex-end;
  position:relative; overflow:hidden;
}
.hero-bg {
  position:absolute; inset:0; z-index:0;
  background-size:cover; background-position:center;
}
.hero-bg::after {
  content:""; position:absolute; inset:0;
  background: linear-gradient(rgba(19,23,42,0.55) 0%, rgba(19,23,42,0.65) 60%, rgba(19,23,42,0.85) 100%);
}
.hero-content {
  position:relative; z-index:1;
  padding: clamp(56px,8vw,110px) 0 clamp(64px,9vw,120px);
}
.hero-overline {
  font-family:var(--mono); font-size:10px;
  letter-spacing:.32em; text-transform:uppercase;
  color:rgba(245,240,230,.5); margin-bottom:20px;
  display:flex; align-items:center; gap:14px;
}
.hero-overline::before {
  content:""; width:28px; height:1px; background:var(--amber);
}
.hero-title {
  font-family:var(--serif); font-weight:500;
  font-size:clamp(64px,10vw,140px);
  line-height:.92; letter-spacing:-.03em;
  color:#fff; margin-bottom:28px;
}
.hero-title em { font-style:italic; font-weight:400; color:var(--amber-light) }
.hero-tagline {
  font-family:var(--prose); font-size:clamp(17px,1.6vw,21px);
  line-height:1.55; color:rgba(245,240,230,.72);
  max-width:48ch; margin-bottom:44px;
}
.hero-cta { display:flex; gap:14px; flex-wrap:wrap; align-items:center }
.hero-divider {
  position:relative; z-index:1;
  border-top:1px solid rgba(245,240,230,.14);
  padding: 22px 0;
}
.hero-stats {
  display:flex; gap:clamp(32px,5vw,72px); align-items:center;
}
.hero-stat-num {
  font-family:var(--serif); font-weight:500;
  font-size:clamp(28px,3vw,42px);
  color:#fff; letter-spacing:-.02em;
}
.hero-stat-label {
  font-family:var(--mono); font-size:9px;
  letter-spacing:.22em; text-transform:uppercase;
  color:rgba(245,240,230,.45); margin-top:2px;
}

/* ── STORY ── */
.story {
  padding: clamp(80px,10vw,140px) 0;
  background: var(--paper);
}
.story-grid {
  display:grid; grid-template-columns:1fr 1.4fr; gap:clamp(48px,7vw,110px);
  align-items:start;
}
.story-left {}
.story-overline {
  font-family:var(--mono); font-size:10px;
  letter-spacing:.3em; text-transform:uppercase;
  color:var(--amber); display:flex; align-items:center; gap:14px;
  margin-bottom:22px;
}
.story-overline::before {
  content:""; width:24px; height:1.5px; background:var(--amber);
}
.story-title {
  font-family:var(--serif); font-weight:500;
  font-size:clamp(38px,4.8vw,68px);
  line-height:.95; letter-spacing:-.025em; color:var(--ink);
  margin-bottom:32px;
}
.story-title em { font-style:italic; color:var(--green); font-weight:400 }
.story-facts {
  display:flex; flex-direction:column;
  border-top:1px solid var(--line-2);
  margin-top:16px;
}
.fact {
  display:flex; justify-content:space-between; align-items:baseline;
  padding:13px 0; border-bottom:1px solid var(--line-2);
  gap:16px;
}
.fact-label {
  font-family:var(--mono); font-size:9.5px;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-4); flex-shrink:0;
}
.fact-value {
  font-family:var(--prose); font-size:15px;
  color:var(--ink); text-align:right;
}
.story-body {
  font-family:var(--prose); font-size:clamp(16px,1.4vw,18px);
  line-height:1.85; color:var(--ink-3); margin-bottom:22px;
}
.story-body:last-child { margin-bottom:0 }

/* ── CATALOGUE ── */
.catalogue {
  padding: clamp(64px,9vw,120px) 0;
  background: var(--paper-2);
}
.catalogue-header {
  margin-bottom:clamp(48px,6vw,80px);
  border-bottom:1px solid var(--line-2); padding-bottom:32px;
}
.catalogue-overline {
  font-family:var(--mono); font-size:10px;
  letter-spacing:.3em; text-transform:uppercase;
  color:var(--amber); display:flex; align-items:center; gap:14px;
  margin-bottom:18px;
}
.catalogue-overline::before {
  content:""; width:24px; height:1.5px; background:var(--amber);
}
.catalogue-title {
  font-family:var(--serif); font-weight:500;
  font-size:clamp(38px,4.8vw,64px);
  line-height:.96; letter-spacing:-.025em; color:var(--ink);
}
.catalogue-title em { font-style:italic; color:var(--green); font-weight:400 }
.catalogue-section { margin-bottom:clamp(56px,8vw,100px) }
.catalogue-section:last-child { margin-bottom:0 }
.section-label {
  font-family:var(--mono); font-size:clamp(11px,1.1vw,13px);
  letter-spacing:.32em; text-transform:uppercase;
  color:var(--ink); padding:16px 0;
  border-top:2px solid var(--ink); border-bottom:1px solid var(--line-2);
  margin-bottom:clamp(28px,4vw,48px);
}
.product-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(20px,2.5vw,36px);
}
.product-card {
  background:var(--paper);
  border:1px solid var(--line-2);
  overflow:hidden;
  transition:box-shadow .3s, transform .3s;
}
.product-card:hover {
  box-shadow:0 20px 48px -16px rgba(19,23,42,.14);
  transform:translateY(-3px);
}
.product-img-wrap {
  position:relative; overflow:hidden;
  aspect-ratio:1/1;
  background:#f4f4f2;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(12px,2vw,24px);
  box-shadow:inset 0 0 0 1px rgba(19,23,42,.06);
}
.product-img {
  width:100%; height:100%; object-fit:contain;
  transition:transform .5s cubic-bezier(.22,1,.36,1);
}
.product-card:hover .product-img { transform:scale(1.06) }
.product-body {
  padding:clamp(18px,2vw,26px);
  display:flex; flex-direction:column; gap:10px;
}
.product-name {
  font-family:var(--serif); font-weight:500;
  font-size:clamp(17px,1.4vw,20px);
  line-height:1.25; letter-spacing:-.01em; color:var(--ink);
}
.product-desc {
  font-family:var(--prose); font-size:clamp(13px,1.1vw,15px);
  line-height:1.6; color:var(--ink-3);
}
.product-tags {
  display:flex; gap:8px; flex-wrap:wrap; align-items:center;
  margin-top:4px;
}
.product-ref, .product-size {
  font-family:var(--mono); font-size:9px;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-4);
  border:1px solid var(--line-2);
  padding:3px 8px; border-radius:1px;
}
.product-compo {
  border-top:1px solid var(--line);
  padding-top:12px; margin-top:4px;
  display:flex; flex-direction:column; gap:5px;
}
.product-compo-label {
  font-family:var(--mono); font-size:9px;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-4);
}
.product-compo-text {
  font-family:var(--prose); font-size:13px;
  line-height:1.5; color:var(--ink-4);
}
.product-compo-text em { font-style:italic }

/* ── PRO FORM ── */
.pro {
  padding:clamp(80px,11vw,150px) 0;
  background:var(--paper);
}
.pro-grid {
  display:grid;
  grid-template-columns:1fr 1.15fr;
  gap:clamp(48px,7vw,110px);
  align-items:start;
}
.pro-left { display:flex; flex-direction:column; gap:22px }
.pro-left-label {
  font-family:var(--mono); font-size:10px;
  letter-spacing:.28em; text-transform:uppercase;
  color:var(--amber); display:flex; align-items:center; gap:14px;
}
.pro-left-label::before { content:""; width:24px; height:1.5px; background:var(--amber); flex-shrink:0 }
.pro-left h2 {
  font-family:var(--serif); font-weight:500;
  font-size:clamp(38px,4.8vw,68px);
  line-height:.97; letter-spacing:-.025em; color:var(--ink); margin:0;
}
.pro-left h2 em { font-style:italic; color:var(--green); font-weight:400 }
.pro-left-body {
  font-family:var(--prose); font-size:clamp(15px,1.3vw,17px);
  line-height:1.8; color:var(--ink-3); max-width:44ch;
}
.pro-left-body strong { color:var(--ink); font-weight:500 }
.pro-conditions {
  list-style:none; padding:0; margin:8px 0 0;
  display:flex; flex-direction:column; gap:0;
  border-top:1px solid var(--line-2);
}
.pro-conditions li {
  display:flex; align-items:center; gap:14px;
  font-family:var(--prose); font-size:clamp(14px,1.2vw,16px);
  color:var(--ink); padding:13px 0;
  border-bottom:1px solid var(--line-2);
}
.pro-conditions li::before {
  content:""; width:18px; height:18px; flex-shrink:0;
  border:1.5px solid var(--green); border-radius:50%;
  background:color-mix(in srgb, var(--green) 10%, transparent);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8' viewBox='0 0 10 8' fill='none' stroke='%232D4A3E' stroke-width='1.8' stroke-linecap='round'%3E%3Cpolyline points='1 4 4 7 9 1'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:center;
}
.pro-tag {
  margin-left:auto; font-family:var(--mono); font-size:9px;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-4);
}
.form-card {
  background:var(--paper-2);
  border:1px solid var(--line-2);
  padding:clamp(28px,3.5vw,48px);
  display:flex; flex-direction:column; gap:20px;
  position:relative;
  box-shadow:0 20px 50px -24px rgba(19,23,42,.12);
}
.form-card-title {
  font-family:var(--serif); font-weight:500;
  font-size:clamp(24px,2.4vw,34px);
  letter-spacing:-.015em; color:var(--ink);
  margin:8px 0 4px;
}
.form-card-title em { font-style:italic; color:var(--green); font-weight:400 }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:18px }
.fld { display:flex; flex-direction:column; gap:7px }
.fld label {
  font-family:var(--mono); font-size:9px;
  font-weight:500; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink-4);
}
.fld input,.fld select,.fld textarea {
  border:0; border-bottom:1.5px solid var(--line-3);
  background:transparent; padding:8px 0 10px;
  font-family:var(--prose); font-size:16px;
  color:var(--ink); outline:none; border-radius:0;
  transition:border-color .22s; -webkit-appearance:none;
}
.fld input::placeholder,.fld textarea::placeholder { color:var(--ink-4) }
.fld input:focus,.fld select:focus,.fld textarea:focus { border-color:var(--green) }
.fld select {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7' fill='none' stroke='%232D4A3E' stroke-width='1.8'%3E%3Cpath d='M1 1l4.5 5 4.5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 4px center; padding-right:22px;
}
.fld textarea { min-height:84px; resize:vertical }
.form-note {
  font-family:var(--mono); font-size:9.5px;
  letter-spacing:.1em; color:var(--ink-4); line-height:1.65;
}

/* ── FOOTER ── */
footer {
  background:var(--ink); color:var(--paper);
  padding:clamp(56px,8vw,100px) 0 28px;
  position:relative;
}
footer::before {
  content:""; position:absolute; top:0; left:0; right:0;
  height:4px;
  background: linear-gradient(90deg, var(--green) 0%, var(--green) 70%, var(--amber) 70%);
}
.foot-body {
  display:grid;
  grid-template-columns:1.6fr 1fr 1fr 1fr;
  gap:clamp(20px,3vw,52px);
  margin-bottom:52px;
}
.foot-brand {
  display:flex; align-items:center; gap:12px; margin-bottom:18px;
}
.foot-logo { width:48px; height:48px; border-radius:50%; flex-shrink:0 }
.foot-brand-name {
  font-family:var(--serif); font-weight:500;
  font-size:clamp(26px,2.8vw,36px);
  line-height:.97; letter-spacing:-.015em; color:var(--paper);
}
.foot-brand-name em { font-style:italic; color:var(--green-soft); font-weight:400 }
.foot-address {
  font-family:var(--prose); font-size:13.5px;
  color:rgba(244,239,229,.62); line-height:1.75;
  margin-bottom:16px;
}
.foot-siren {
  font-family:var(--mono); font-size:9px;
  letter-spacing:.2em; text-transform:uppercase;
  color:rgba(244,239,229,.62);
}
.foot-col h2 {
  font-family:var(--mono); font-size:9.5px;
  letter-spacing:.26em; text-transform:uppercase;
  color:rgba(244,239,229,.7); margin:0 0 18px; font-weight:500;
}
.foot-col ul { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:9px }
.foot-col li,.foot-col a {
  font-family:var(--prose); font-size:13.5px;
  color:rgba(244,239,229,.6); transition:color .2s;
}
.foot-col a:hover { color:var(--green-soft) }
.foot-bottom {
  display:flex; justify-content:space-between; align-items:center;
  gap:16px; padding-top:20px;
  border-top:1px solid rgba(255,255,255,.09);
  font-family:var(--mono); font-size:9.5px;
  letter-spacing:.14em; text-transform:uppercase;
  color:rgba(244,239,229,.62); flex-wrap:wrap;
}

/* ── RESPONSIVE ── */
@media(max-width:1024px) {
  .story-grid { grid-template-columns:1fr }
  .pro-grid { grid-template-columns:1fr }
  .foot-body { grid-template-columns:1fr 1fr }
}
@media(max-width:768px) {
  nav.links { display:none }
  .menu-toggle { display:flex; align-items:center; justify-content:center; width:38px; height:38px; border:1.5px solid var(--ink-3); color:var(--ink) }
  .product-grid { grid-template-columns:1fr 1fr }
  .foot-body { grid-template-columns:1fr }
  .form-row { grid-template-columns:1fr }
  .hero-stats { flex-wrap:wrap; gap:24px }
}
@media(max-width:480px) {
  .product-grid { grid-template-columns:1fr }
  .nav-back { display:none }
}
.product-composition-section {
  border-top:1px solid var(--line-2);
  padding-top:10px;
  margin-top:4px;
}
.product-composition-label {
  font-family:var(--mono); font-size:9px;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--amber); margin-bottom:6px;
}
.product-composition-text {
  font-family:var(--prose); font-size:12px;
  color:var(--ink-4); line-height:1.6;
  font-style:italic;
}