/* ============================================================
   NEO LIVING — Landing
   Tokens · Type · Devices · Sections
   ============================================================ */

:root{
  /* Palette — locked */
  --bone:        #ECE4D5;
  --bone-soft:   #F3EDE1;
  --bone-deep:   #E2D7C2;
  --espresso:    #211C16;
  --espresso-2:  #2C261E;
  --olive:       #54583B;
  --olive-soft:  #6B7050;
  --brass:       #B08A4C;
  --brass-light: #C7A468;
  --terracotta:  #9D5A3B;
  --stone:       #8A7E6D;
  --ink:         #1A1610;

  --maxw: 1320px;
  --gut: clamp(20px, 5vw, 92px);

  --serif: "Fraunces", Georgia, serif;
  --sans:  "Hanken Grotesk", system-ui, sans-serif;

  --r: 3px; /* max corner radius — brand is precise */
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

*{ box-sizing: border-box; }
html{ -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body{
  margin:0;
  background: var(--bone);
  color: var(--espresso);
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.55;
  overflow-x: hidden;
  font-feature-settings: "ss01";
}

/* Lenis */
html.lenis, html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
.lenis.lenis-stopped{ overflow:hidden; }

::selection{ background: var(--brass); color: var(--bone-soft); }

img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }

/* ---------- Type primitives ---------- */
.serif{ font-family: var(--serif); }
h1,h2,h3,h4{ font-family: var(--serif); font-weight:340; margin:0; letter-spacing:-.015em; line-height:1.02; }
.it{ font-style: italic; }
.brass{ color: var(--brass); }
.brass-l{ color: var(--brass-light); }

.kicker{
  font-family: var(--sans);
  font-weight:600;
  font-size: 12px;
  letter-spacing:.26em;
  text-transform: uppercase;
  color: var(--brass);
  display:inline-flex;
  align-items:center;
  gap:.9em;
}
.kicker::before{
  content:"";
  width: 34px; height:1px;
  background: var(--brass);
  display:inline-block;
}
.kicker.no-rule::before{ display:none; }

.secnum{
  font-family: var(--serif);
  font-weight:300;
  color: var(--brass);
  font-variant-numeric: lining-nums;
  line-height:1;
  opacity:.9;
}

.lede{ font-size: clamp(20px, 2.1vw, 27px); line-height:1.5; color: var(--espresso); }
.muted{ color: var(--stone); }
.measure{ max-width: 46ch; }

/* ---------- Layout shells ---------- */
.wrap{ width:100%; max-width: var(--maxw); margin-inline:auto; padding-inline: var(--gut); }
section{ position:relative; scroll-margin-top: 112px; }
.pad{ padding-block: clamp(90px, 12vw, 180px); }
.pad-t{ padding-top: clamp(90px, 12vw, 180px); }

.on-dark{ background: var(--espresso); color: var(--bone); }
.on-dark .muted{ color: #b6ac9b; }
.on-dark .lede{ color: var(--bone); }
.on-olive{ background: var(--olive); color: var(--bone-soft); }

/* ---------- Signature devices ---------- */
/* grain overlay */
.grain{
  position: fixed; inset:0; z-index: 60; pointer-events:none;
  mix-blend-mode: multiply; opacity:.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* blueprint grid */
.blueprint{
  position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(199,164,104,.5) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(199,164,104,.5) 1px, transparent 1px);
  background-size: 64px 64px;
  opacity:.12;
  mask-image: radial-gradient(120% 100% at 50% 0%, #000 40%, transparent 92%);
}
.blueprint.fine{ background-size: 32px 32px; opacity:.08; }

/* brass hairline draw */
.hairline{ width:100%; height:1px; background: rgba(176,138,76,.0); position:relative; overflow:visible; }
.hairline svg{ display:block; width:100%; height:1px; overflow:visible; }
.hairline path{ stroke: var(--brass); stroke-width:1; fill:none;
  stroke-dasharray: 1; stroke-dashoffset: 1; }

/* ---------- Buttons ---------- */
.btn{
  --bg: var(--brass); --fg: var(--espresso);
  position:relative;
  display:inline-flex; align-items:center; gap:.7em;
  padding: 1.05em 1.7em;
  background: var(--bg); color: var(--fg);
  font-family: var(--sans); font-weight:600; font-size:14px;
  letter-spacing:.06em; text-transform:uppercase;
  border-radius: var(--r);
  transition: background .4s var(--ease), color .4s var(--ease), transform .25s var(--ease);
  will-change: transform;
}
.btn:hover{ background: var(--brass-light); }
.btn .arrow{ transition: transform .4s var(--ease); }
.btn:hover .arrow{ transform: translateX(4px); }

.btn-ghost{
  --bg: transparent; --fg: var(--bone);
  padding: 1.05em 0;
  position:relative;
}
.btn-ghost::after{
  content:""; position:absolute; left:0; bottom:.7em; height:1px; width:100%;
  background: var(--brass); transform-origin: right; transform: scaleX(0);
  transition: transform .5s var(--ease);
}
.btn-ghost:hover::after{ transform-origin:left; transform: scaleX(1); }
.on-dark .btn-ghost, .btn-ghost.dark{ --fg: var(--bone); }
.btn-ghost.ink{ --fg: var(--espresso); }

/* magnetic wrapper */
.mag{ display:inline-block; will-change: transform; }

/* focus rings — a11y */
:focus-visible{ outline: 2px solid var(--brass); outline-offset: 3px; border-radius: 1px; }

/* skip link */
.skip{ position:absolute; left:-999px; top:0; z-index:200; background:var(--brass); color:var(--espresso);
  padding:.8em 1.2em; font-weight:600; }
.skip:focus{ left:12px; top:12px; }

/* image slot fallback (no-image) */
.img{ position:relative; overflow:hidden; background: var(--espresso-2); border-radius: var(--r); }
.img img{ width:100%; height:100%; object-fit:cover; }
.img .cap{
  position:absolute; left:14px; bottom:12px; z-index:3;
  font-size:11px; letter-spacing:.18em; text-transform:uppercase; color: var(--bone);
  font-weight:600; opacity:.85; text-shadow:0 1px 8px rgba(0,0,0,.5);
}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:80;
  display:flex; align-items:center; justify-content:space-between;
  padding: 22px var(--gut);
  transition: background .5s var(--ease), padding .5s var(--ease), border-color .5s;
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  background: rgba(33,28,22,.9);
  backdrop-filter: blur(12px) saturate(1.1);
  padding-block: 14px;
  border-bottom:1px solid rgba(199,164,104,.18);
}
.nav .logo{ display:flex; align-items:center; gap:.7em; font-family:var(--serif); font-size:21px; letter-spacing:.02em; color:var(--bone); transition: color .4s; }
.nav:not(.scrolled) .logo{ color: var(--bone); }
.brand-logo{
  display:block;
  width: clamp(78px, 7vw, 104px);
  height:auto;
}
.brand-logo-light{ filter: drop-shadow(0 8px 20px rgba(0,0,0,.18)); }
.nav.scrolled .brand-logo{ width:72px; }
.footer .brand-logo{ width:150px; }
.monogram{
  width:34px; height:34px; border:1px solid var(--brass); border-radius:2px;
  display:grid; place-items:center; font-family:var(--serif); font-size:13px; letter-spacing:.04em; color:var(--brass);
}
.nav-links{ display:flex; align-items:center; gap: clamp(20px,2.4vw,40px); }
.nav-links ul{ list-style:none; display:flex; align-items:center; gap: clamp(20px,2.4vw,40px); margin:0; padding:0; }
.nav-links li{ margin:0; padding:0; }
.nav-links a{ color: var(--bone); font-size:14px; letter-spacing:.02em; font-weight:500; opacity:.86; transition:opacity .3s, color .3s; }
.nav-links a:hover{ opacity:1; color: var(--brass-light); }
.nav-cta{ display:flex; align-items:center; gap:16px; }
.nav .btn{ padding:.85em 1.3em; font-size:12.5px; }

.burger{ display:none; width:42px; height:42px; align-items:center; justify-content:center; }
.burger span{ display:block; width:22px; height:1.5px; background:var(--bone); position:relative; transition:.3s; }
.burger span::before,.burger span::after{ content:""; position:absolute; left:0; width:22px; height:1.5px; background:var(--bone); transition:.3s; }
.burger span::before{ top:-7px; } .burger span::after{ top:7px; }

/* mobile takeover */
.mobile-menu{
  position:fixed; inset:0; z-index:90; background: var(--espresso);
  transform: translateX(100%); transition: transform .6s var(--ease-out);
  display:flex; flex-direction:column; justify-content:center; padding: var(--gut);
}
.mobile-menu.open{ transform: translateX(0); }
.mobile-menu a{ font-family:var(--serif); font-size: clamp(34px,9vw,58px); color:var(--bone); padding:.16em 0; font-weight:340; }
.mobile-menu a .it{ color:var(--brass-light); }
.mm-close{ position:absolute; top:24px; right:var(--gut); color:var(--bone); font-size:30px; font-family:var(--serif); }
.mm-meta{ margin-top:48px; color:var(--stone); font-size:14px; line-height:1.9; }

/* ============================================================
   HERO
   ============================================================ */
.hero{ background: var(--espresso); color:var(--bone); min-height:100svh; display:flex; align-items:stretch; position:relative; }
.hero-grid{
  display:grid; grid-template-columns: 1.05fr .95fr; width:100%; align-items:stretch;
}
.hero-left{ display:flex; flex-direction:column; justify-content:center; padding: 124px var(--gut) 72px; position:relative; z-index:2; }
.hero-left .blueprint{ z-index:0; }
.hero-eyebrow{ margin-bottom: 30px; }
.hero h1{
  font-size: clamp(38px, 4.9vw, 78px);
  line-height: 1.0;
  letter-spacing:-.02em;
  font-weight:330;
}
.hero h1 .line{ display:block; overflow:hidden; padding-bottom:.06em; margin-bottom:-.06em; }
.hero h1 .line > span{ display:inline-block; white-space:nowrap; will-change: transform; }
.hero h1 .em{ font-style:italic; color: var(--brass-light); }
.hero-sub{ margin-top: 34px; max-width: 40ch; color:#c9bea9; font-size: clamp(17px,1.4vw,20px); line-height:1.6; }
.hero-cta{ margin-top: 42px; display:flex; align-items:center; gap: 26px; flex-wrap:wrap; }
.hero-trust{ margin-top: 46px; display:flex; gap: clamp(18px,2vw,34px); flex-wrap:wrap; }

/* Motion-gated hidden states — only applied once JS confirms live rendering.
   Base (no .motion-on) stays fully visible, so a non-rendering tab or a stalled
   motion engine still shows complete content. */
.motion-on .hero-eyebrow{ opacity:0; transform: translateY(16px); }
.motion-on .hero-sub{ opacity:0; transform: translateY(20px); }
.motion-on .hero-cta{ opacity:0; transform: translateY(20px); }
.motion-on .hero-trust{ opacity:0; transform: translateY(20px); }
.hero-trust .t{ }
.hero-trust .t b{ font-family:var(--serif); font-weight:340; font-size:23px; color:var(--brass-light); display:block; line-height:1; }
.hero-trust .t span{ font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--stone); margin-top:8px; display:block; }

.hero-right{ position:relative; overflow:hidden; }
.hero-img{ position:absolute; inset:-6% -2% -6% -2%; will-change: transform; }
.hero-img img{ width:100%; height:100%; object-fit:cover; }
.hero-right::after{ /* tone */ content:""; position:absolute; inset:0; background:
  linear-gradient(100deg, rgba(33,28,22,.55) 0%, rgba(33,28,22,0) 32%),
  linear-gradient(0deg, rgba(33,28,22,.35), rgba(33,28,22,0) 40%); z-index:2; }
.hero-inset{
  position:absolute;
  left: clamp(22px, 3.2vw, 54px);
  bottom: clamp(28px, 5vw, 76px);
  z-index:4;
  width: clamp(150px, 17vw, 250px);
  margin:0;
  border:1px solid rgba(236,228,213,.22);
  background: rgba(26,22,16,.56);
  backdrop-filter: blur(12px);
  padding:8px;
  transform: translateY(0) rotate(-1.6deg);
  box-shadow: 0 24px 80px rgba(0,0,0,.32);
}
.hero-inset-slider{
  position:relative;
  width:100%;
  aspect-ratio:4 / 5;
  overflow:hidden;
  background:var(--espresso-2);
  isolation:isolate;
}
.hero-inset-slider::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(33,28,22,.08), rgba(33,28,22,.34)),
    linear-gradient(120deg, rgba(33,28,22,.2), transparent 54%),
    radial-gradient(circle at 70% 18%, rgba(236,228,213,.12), transparent 42%);
}
.hero-inset-slide{
  position:absolute;
  inset:0;
  z-index:1;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  opacity:0;
  transform:translate3d(0,0,0) scale(1.055);
  transition:opacity 1.35s cubic-bezier(.16,1,.3,1);
  backface-visibility:hidden;
  will-change:opacity, transform;
}
.hero-inset-slide.is-prev{
  z-index:2;
  opacity:0;
}
.hero-inset-slide.is-active{
  z-index:3;
  opacity:1;
  animation:hero-inset-kenburns 3.45s cubic-bezier(.16,1,.3,1) both;
}
@keyframes hero-inset-kenburns{
  0%{ transform:translate3d(-1.2%, .9%, 0) scale(1.045); }
  100%{ transform:translate3d(1.4%, -1.1%, 0) scale(1.13); }
}
.hero-inset figcaption,
.prob-media figcaption,
.solution-visual figcaption,
.ba-pair figcaption,
.partner-proof figcaption,
.tem-image figcaption,
.cons-img figcaption,
.cons-video figcaption,
.showroom-rail figcaption{
  margin-top:10px;
  font-size:10.5px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(236,228,213,.78);
  font-weight:600;
}
.hero-signature{
  position:absolute;
  right: clamp(24px, 4vw, 70px);
  top: clamp(108px, 14vw, 190px);
  z-index:4;
  display:grid;
  gap:9px;
  color:rgba(236,228,213,.72);
  font-size:11px;
  letter-spacing:.2em;
  text-transform:uppercase;
  text-align:right;
}
.hero-signature i{ display:block; width:76px; height:1px; background:var(--brass); justify-self:end; }
.hero-watermark{
  position:absolute; right:3%; bottom:4%; z-index:3; font-family:var(--serif);
  font-size: clamp(120px, 20vw, 300px); line-height:.8; color: var(--brass);
  opacity:.09; font-weight:300; will-change: transform; pointer-events:none; user-select:none;
}
.scroll-hint{
  position:absolute; left:var(--gut); bottom:28px; z-index:5; font-size:11px; letter-spacing:.24em;
  text-transform:uppercase; color: var(--stone); display:flex; align-items:center; gap:12px;
}
.scroll-hint .ln{ width:46px; height:1px; background:var(--stone); position:relative; overflow:hidden; }
.scroll-hint .ln::after{ content:""; position:absolute; inset:0; background:var(--brass); transform:translateX(-100%); animation: sweep 2.6s var(--ease) infinite; }
@keyframes sweep{ 0%{transform:translateX(-100%)} 55%{transform:translateX(0)} 100%{transform:translateX(100%)} }

/* ============================================================
   SECTION HEADER (shared)
   ============================================================ */
.sec-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:40px; flex-wrap:wrap; margin-bottom: clamp(40px,6vw,82px); }
.sec-head .secnum{ font-size: clamp(58px,9vw,128px); }
.sec-title{ font-size: clamp(34px,4.6vw,68px); line-height:1.02; max-width: 16ch; }

/* reveal util */
.motion-on .r-up{ opacity:0; transform: translateY(34px); }
.r-up.in{ opacity:1; transform:none; transition: opacity 1s var(--ease-out), transform 1s var(--ease-out); }
.reduced .r-up{ opacity:1 !important; transform:none !important; }
.reduced .hero-eyebrow,.reduced .hero-sub,.reduced .hero-cta,.reduced .hero-trust{ opacity:1 !important; }

/* ============================================================
   PROBLEME
   ============================================================ */
.probleme{ background: var(--bone-soft); }
.prob-grid{ display:grid; grid-template-columns: 1.15fr .85fr; gap: clamp(40px,7vw,110px); align-items:start; }
.prob-lead{ font-size: clamp(22px,2.3vw,30px); line-height:1.5; font-family:var(--serif); font-weight:340; letter-spacing:-.01em; }
.dropcap::first-letter{
  font-family:var(--serif); font-weight:340; color:var(--brass);
  font-size: 5.4rem; line-height:.78; float:left; padding: 8px 14px 0 0;
}
.prob-list{ margin-top: 54px; list-style:none; padding:0; }
.prob-list li{ padding: 26px 0; border-top:1px solid rgba(33,28,22,.13); display:grid; grid-template-columns: auto 1fr; gap:22px; align-items:baseline; }
.prob-list li:last-child{ border-bottom:1px solid rgba(33,28,22,.13); }
.prob-list .n{ font-family:var(--serif); color:var(--brass); font-size:15px; letter-spacing:.04em; }
.prob-list h3{ font-size: clamp(20px,2vw,26px); font-weight:360; }
.prob-list p{ margin:.5em 0 0; color:var(--stone); font-size:16px; max-width:42ch; }
.prob-aside{ position:sticky; top:120px; }
.prob-quote{
  position:relative; padding: 44px 38px; background:var(--espresso); color:var(--bone);
  transform: rotate(-1deg); border-radius: var(--r); overflow:hidden;
}
.prob-quote .bigq{ position:absolute; top:-30px; left:14px; font-family:var(--serif); font-size:180px; color:var(--brass); opacity:.12; line-height:1; }
.prob-quote p{ position:relative; font-family:var(--serif); font-style:italic; font-size: clamp(22px,2.4vw,30px); line-height:1.32; font-weight:340; }
.prob-quote .by{ position:relative; margin-top:22px; font-family:var(--sans); font-style:normal; font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--brass-light); }
.prob-media{
  margin:26px 0 0;
  padding:10px;
  background:var(--espresso-2);
  border:1px solid rgba(176,138,76,.28);
  border-radius:var(--r);
  transform: rotate(1deg);
}
.prob-media img{ width:100%; aspect-ratio: 1.35 / 1; object-fit:cover; opacity:.86; }

/* ============================================================
   SOLUTION / BIG IDEA
   ============================================================ */
.solution{ background: var(--espresso); color: var(--bone); overflow:hidden; }
.solution .blueprint{ z-index:0; }
.bigidea{ position:relative; z-index:2; font-size: clamp(34px,5.4vw,86px); line-height:1.04; font-weight:330; letter-spacing:-.02em; max-width: 18ch; }
.bigidea .shift{ color: var(--bone); transition: color 1.1s var(--ease); }
#ideaLit{ color: var(--brass-light); font-style:italic; }
.motion-on #ideaLit{ color: var(--bone); font-style:normal; }
.bigidea .shift.lit{ color: var(--brass-light); font-style:italic; }
.sol-cols{ position:relative; z-index:2; display:grid; grid-template-columns:1fr 1fr; gap: clamp(36px,5vw,80px); margin-top: clamp(54px,7vw,96px); }
.sol-col p{ color:#c9bea9; max-width:44ch; }
.sol-col h3{ font-size:24px; margin-bottom:14px; color:var(--bone); }
.motion-on .sol-col .from-l{ opacity:0; transform: translateX(-40px); }
.motion-on .sol-col .from-r{ opacity:0; transform: translateX(40px); }
.sol-col.in .from-l,.sol-col.in .from-r{ opacity:1; transform:none; transition: all 1s var(--ease-out); }
.solution-visual{
  position:relative;
  z-index:2;
  margin-top: clamp(48px, 7vw, 96px);
  display:grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(220px, .65fr);
  gap: clamp(18px, 2.6vw, 36px);
  align-items:end;
}
.solution-visual figure{ margin:0; position:relative; overflow:hidden; border-radius:var(--r); }
.solution-visual img{ width:100%; height:100%; object-fit:cover; transition: transform 1.2s var(--ease); }
.solution-visual figure:hover img{ transform:scale(1.04); }
.solution-visual figcaption{ position:absolute; left:18px; bottom:16px; z-index:2; color:var(--bone); text-shadow:0 1px 18px rgba(0,0,0,.45); }
.sol-shot{ height: clamp(330px, 44vw, 560px); }
.sol-detail{ height: clamp(240px, 28vw, 380px); box-shadow:0 22px 70px rgba(0,0,0,.24); }
.sol-shot::after,.sol-detail::after{
  content:""; position:absolute; inset:auto 0 0; height:42%;
  background:linear-gradient(0deg, rgba(20,16,10,.68), transparent);
}

/* ============================================================
   BENEFICES — asymmetric grid
   ============================================================ */
.benefices{ background: var(--bone); }
.ben-grid{ display:grid; grid-template-columns: repeat(6,1fr); gap: 18px; }
.ben{
  position:relative; border:1px solid rgba(33,28,22,.13); border-radius: var(--r);
  padding: 34px 32px; background: var(--bone); overflow:hidden; min-height: 250px;
  display:flex; flex-direction:column; justify-content:space-between;
  transition: background .5s var(--ease), border-color .5s;
}
.ben:hover{ background: var(--bone-soft); border-color: rgba(176,138,76,.4); }
.ben .bn{ font-family:var(--serif); font-weight:300; font-size: clamp(58px,6vw,92px); color: var(--brass); line-height:.8; opacity:.92; transition: transform .6s var(--ease), opacity .5s; }
.ben:hover .bn{ transform: rotate(14deg); }
.ben h3{ font-size: clamp(21px,1.7vw,27px); font-weight:360; margin-top: 26px; position:relative; display:inline-block; }
.ben h3::after{ content:""; position:absolute; left:0; bottom:-9px; height:1px; width:100%; background:var(--brass); transform:scaleX(0); transform-origin:left; transition: transform .5s var(--ease); }
.ben:hover h3::after{ transform:scaleX(1); }
.ben p{ color: var(--stone); font-size: 15.5px; margin: 18px 0 0; }
.ben.wide{ grid-column: span 4; } .ben.col3{ grid-column: span 3; } .ben.col2{ grid-column: span 2; }
.ben.tall{ grid-row: span 2; }
.ben.dark{ background: var(--espresso); color:var(--bone); border-color: rgba(199,164,104,.2); }
.ben.dark:hover{ background: var(--espresso-2); }
.ben.dark p{ color:#b6ac9b; }
.ben.dark .blueprint{ opacity:.1; }
.ben.with-img{ isolation:isolate; }
.ben.with-img > *:not(.ben-img){ position:relative; z-index:2; }
.ben.with-img .ben-img{
  position:absolute;
  right:0;
  top:0;
  width:58%;
  height:52%;
  object-fit:cover;
  opacity:.42;
  filter:saturate(.86) contrast(1.05);
  mask-image:linear-gradient(110deg, transparent 0%, #000 38%, #000 100%);
}
.ben.with-img.light-img .ben-img{
  width:46%;
  height:100%;
  opacity:.86;
  mask-image:linear-gradient(90deg, transparent 0%, #000 40%, #000 100%);
}
.ben.with-img.light-img{ padding-right: min(42%, 340px); background:var(--bone-soft); }

/* ============================================================
   REALISATIONS — pinned horizontal gallery
   ============================================================ */
.gallery{ background: var(--espresso); color:var(--bone); }
.gal-head{ padding-top: clamp(90px,12vw,160px); }
.gal-pin{ height: 100svh; overflow:hidden; display:flex; align-items:center; }
.gal-track{ display:flex; gap: clamp(20px,2vw,34px); padding-inline: var(--gut); will-change: transform; }
.gal-card{ position:relative; flex:0 0 auto; width: clamp(300px, 42vw, 560px); height: 70svh; border-radius: var(--r); overflow:hidden; }
.gal-card img{ width:100%; height:100%; object-fit:cover; transition: transform 1.1s var(--ease); }
.gal-card:hover img{ transform: scale(1.05); }
.gal-card .meta{ position:absolute; inset:auto 0 0 0; z-index:3; padding: 30px 28px; background: linear-gradient(0deg, rgba(20,16,10,.85), transparent); }
.gal-card .pno{ font-family:var(--serif); color:var(--brass-light); font-size:14px; letter-spacing:.04em; }
.gal-card h3{ font-size: clamp(24px,2vw,32px); margin-top:6px; font-weight:360; }
.gal-card .loc{ font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:#c9bea9; margin-top:8px; }
.gal-progress{ height:1px; background: rgba(199,164,104,.2); margin: 0 var(--gut); position:relative; }
.gal-progress i{ position:absolute; left:0; top:0; height:100%; width:0; background:var(--brass); }
.gal-hint{ text-align:center; font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--stone); padding: 22px 0 0; }

/* piliers */
.piliers{ background: var(--espresso-2); color:var(--bone); }
.pil-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: clamp(28px,3vw,52px); }
.pil{ border-top:1px solid rgba(199,164,104,.25); padding-top: 30px; }
.pil-img{ margin:0 0 28px; overflow:hidden; border-radius:var(--r); border:1px solid rgba(199,164,104,.18); background:var(--ink); }
.pil-img img{ width:100%; aspect-ratio: 4 / 3.15; object-fit:cover; transition: transform 1s var(--ease); }
.pil:hover .pil-img img{ transform: scale(1.045); }
.pil .pn{ font-family:var(--serif); font-weight:300; color: var(--brass-light); font-size: clamp(48px,5vw,76px); line-height:.9; }
.pil h3{ font-size: clamp(24px,2.2vw,32px); margin-top: 18px; font-weight:360; }
.pil p{ color:#b6ac9b; margin-top:14px; font-size:16px; }
.pil .more{ margin-top:24px; display:inline-flex; align-items:center; gap:10px; color:var(--brass-light); font-size:13px; letter-spacing:.14em; text-transform:uppercase; font-weight:600; }
.pil .more .arrow{ transition: transform .4s var(--ease); }
.pil:hover .more .arrow{ transform: translateX(6px); }

/* ============================================================
   METHODE — pinned stepper
   ============================================================ */
.methode{ background: var(--bone-soft); }
.meth-pin{ min-height: 100svh; display:flex; flex-direction:column; justify-content:center; }
.meth-rail{ position:relative; margin-top: clamp(40px,6vw,70px); }
.meth-line{ position:absolute; left:0; top: 38px; height:1px; width:100%; background: rgba(33,28,22,.14); }
.meth-line i{ position:absolute; left:0; top:0; height:100%; width:0; background: var(--brass); }
.meth-steps{ display:grid; grid-auto-flow:column; grid-auto-columns: 1fr; gap: 14px; position:relative; }
.mstep{ opacity:.32; transition: opacity .5s var(--ease); padding-right: 18px; }
.mstep.active{ opacity:1; }
.mstep .mn{ font-family:var(--serif); font-weight:300; color:var(--brass); font-size: 44px; line-height:1; display:inline-block; transition: transform .5s var(--ease); transform-origin:left bottom; }
.mstep.active .mn{ transform: scale(1.25); }
.mstep .dot{ width:9px; height:9px; border-radius:50%; background: var(--bone-soft); border:1px solid var(--brass); position:relative; z-index:2; margin: 16px 0 22px; }
.mstep.active .dot{ background: var(--brass); }
.mstep h3{ font-size: clamp(18px,1.5vw,23px); font-weight:400; }
.mstep p{ font-size:14.5px; color:var(--stone); margin-top:8px; max-width: 22ch; opacity:0; transition: opacity .5s; }
.mstep.active p{ opacity:1; }
.plan-built{
  margin-top: clamp(34px, 5vw, 64px);
  padding-top: clamp(24px, 3vw, 34px);
  border-top:1px solid rgba(33,28,22,.14);
  display:grid;
  grid-template-columns: minmax(220px, .78fr) minmax(0, 1.22fr);
  gap: clamp(24px, 4vw, 58px);
  align-items:center;
}
.plan-built-copy h3{ font-size: clamp(24px, 2.5vw, 36px); margin-top:12px; max-width:12ch; }
.plan-built-copy p{ color:var(--stone); font-size:15.5px; max-width:36ch; }
.ba-pair{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.ba-pair figure{ margin:0; position:relative; overflow:hidden; border-radius:var(--r); background:var(--espresso); }
.ba-pair img{ width:100%; aspect-ratio: 1.25 / 1; object-fit:cover; }
.ba-pair figure::after{ content:""; position:absolute; inset:auto 0 0; height:42%; background:linear-gradient(0deg, rgba(20,16,10,.72), transparent); }
.ba-pair figcaption{ position:absolute; left:14px; right:14px; bottom:12px; z-index:2; color:var(--bone); }

/* ============================================================
   POURQUOI — comparison
   ============================================================ */
.pourquoi{ background: var(--espresso); color:var(--bone); }
.cmp{ display:grid; grid-template-columns:1fr 1fr; gap: clamp(20px,3vw,44px); }
.cmp-col{ padding: 40px 36px; border-radius: var(--r); }
.cmp-classic{ color: var(--stone); border:1px solid rgba(138,126,109,.22); }
.cmp-classic h3{ color:#9c917f; }
.cmp-neo{ background: var(--espresso-2); border-top:3px solid var(--brass); box-shadow: inset 0 0 80px rgba(176,138,76,.08); }
.cmp h3{ font-size: clamp(22px,2vw,28px); margin-bottom: 6px; }
.cmp .ctag{ font-size:12px; letter-spacing:.18em; text-transform:uppercase; margin-bottom:30px; display:block; }
.cmp-classic .ctag{ color:#857a69; }
.cmp-neo .ctag{ color: var(--brass-light); }
.cmp ul{ list-style:none; margin:0; padding:0; }
.cmp li{ display:grid; grid-template-columns: 26px 1fr; gap:14px; padding: 16px 0; border-top:1px solid rgba(255,255,255,.07); font-size:16px; align-items:start; }
.cmp-neo li b{ font-weight:500; color:var(--bone); }
.cmp .mk{ width:18px; height:18px; margin-top:3px; }
.cmp .mk svg{ width:100%; height:100%; }
.cmp .mk path{ stroke-width:1.6; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.cmp-neo .mk path{ stroke: var(--brass); }
.cmp-classic .mk path{ stroke: #6f6555; }

/* ============================================================
   PARTENAIRES — marquee + cards
   ============================================================ */
.partenaires{ background: var(--bone); }
.partner-proof{
  display:grid;
  grid-template-columns: minmax(260px, .78fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 76px);
  align-items:center;
  margin-bottom: clamp(54px, 7vw, 86px);
}
.partner-proof figure{ margin:0; overflow:hidden; border-radius:var(--r); border:1px solid rgba(33,28,22,.12); background:var(--espresso); }
.partner-proof img{ width:100%; aspect-ratio: 1.45 / 1; object-fit:cover; }
.partner-proof p{ font-family:var(--serif); font-size: clamp(23px, 2.4vw, 34px); line-height:1.32; font-weight:340; max-width: 24ch; margin:18px 0 0; }
.marquee{ border-block:1px solid rgba(176,138,76,.35); padding-block: 26px; overflow:hidden; white-space:nowrap; }
.marquee-inner{ display:inline-flex; gap: 0; will-change: transform; }
.marquee span{ font-family:var(--serif); font-weight:300; font-size: clamp(36px,5vw,72px); color:var(--espresso); padding-inline: .5em; opacity:.9; }
.marquee span .dot{ color: var(--brass); padding-inline:.3em; }
.marquee span .pl{ color: var(--stone); font-style:italic; font-size:.55em; }
.part-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap: clamp(20px,2.5vw,40px); margin-top: clamp(50px,7vw,90px); }
.part{ border:1px solid rgba(33,28,22,.14); border-radius:var(--r); padding: 38px 34px; transition: border-color .4s, background .4s; }
.part:hover{ border-color: rgba(176,138,76,.5); background: var(--bone-soft); }
.part .pname{ font-family:var(--serif); font-size: clamp(26px,2.4vw,34px); font-weight:340; }
.part .pcountry{ font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--brass); margin-top:8px; }
.part p{ color:var(--stone); font-size:15.5px; margin-top:22px; }

/* ============================================================
   CHIFFRES
   ============================================================ */
.chiffres{ background: var(--espresso); color:var(--bone); }
.chiffres .blueprint{ opacity:.08; }
.stats-bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:.16;
  filter:saturate(.7) contrast(1.08);
  z-index:0;
}
.chiffres::after{ content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(90deg, rgba(33,28,22,.96), rgba(33,28,22,.74)); }
.stats{ position:relative; z-index:2; display:grid; grid-template-columns: repeat(4,1fr); }
.stat{ padding: 8px clamp(18px,2.6vw,44px); border-left:1px solid rgba(199,164,104,.22); }
.stat:first-child{ border-left:none; padding-left:0; }
.stat .num{ font-family:var(--serif); font-weight:300; color:var(--brass-light); font-size: clamp(56px,8vw,118px); line-height:.9; letter-spacing:-.02em; }
.stat .lab{ font-size:14px; color:#b6ac9b; margin-top:16px; max-width: 18ch; }

/* ============================================================
   SHOWROOM
   ============================================================ */
.showroom{ background:var(--bone-soft); overflow:hidden; }
.showroom-intro{
  display:grid;
  grid-template-columns: minmax(150px, .28fr) minmax(0, .72fr) auto;
  gap: clamp(24px, 4vw, 56px);
  align-items:center;
  margin-top: -24px;
}
.showroom-logo{ width: clamp(120px, 13vw, 190px); height:auto; mix-blend-mode:multiply; }
.showroom-intro .lede{ max-width: 42ch; margin:0; }
.showroom .more{
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:var(--brass);
  font-size:13px;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:700;
  white-space:nowrap;
}
.showroom .more .arrow{ transition: transform .4s var(--ease); }
.showroom .more:hover .arrow{ transform: translateX(6px); }
.showroom-rail{
  margin-top: clamp(54px, 7vw, 90px);
  display:flex;
  gap: clamp(14px, 1.7vw, 24px);
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  padding: 0 var(--gut) 18px;
  scrollbar-color: var(--brass) rgba(33,28,22,.12);
}
.showroom-rail figure{
  flex:0 0 clamp(260px, 29vw, 440px);
  margin:0;
  position:relative;
  overflow:hidden;
  border-radius:var(--r);
  scroll-snap-align:start;
  background:var(--espresso);
}
.showroom-rail img{
  width:100%;
  aspect-ratio: 1.18 / 1;
  object-fit:cover;
  transition: transform .9s var(--ease);
}
.showroom-rail figure:hover img{ transform:scale(1.045); }
.showroom-rail figure::after{ content:""; position:absolute; inset:auto 0 0; height:44%; background:linear-gradient(0deg, rgba(20,16,10,.78), transparent); }
.showroom-rail figcaption{ position:absolute; left:18px; bottom:16px; z-index:2; color:var(--bone); }

/* ============================================================
   TEMOIGNAGES
   ============================================================ */
.temoignages{ background: var(--bone-soft); }
.tem-grid{ display:grid; grid-template-columns: 1.5fr 1fr; gap: clamp(40px,6vw,90px); align-items:start; }
.tem-feat{ position:relative; }
.tem-feat .bigq{ font-family:var(--serif); font-size: 200px; line-height:.7; color:var(--brass); opacity:.16; position:absolute; top:-50px; left:-12px; }
.tem-feat blockquote{ position:relative; margin:0; font-family:var(--serif); font-style:italic; font-weight:340; font-size: clamp(26px,3vw,42px); line-height:1.22; letter-spacing:-.01em; }
.tem-by{ display:flex; align-items:center; gap:16px; margin-top: 48px; }
.avatar{ width:52px; height:52px; border-radius:50%; background:var(--bone-deep); border:1.5px solid var(--brass); display:grid; place-items:center; font-family:var(--serif); color:var(--olive); font-size:20px; }
.tem-by .who b{ display:block; font-family:var(--sans); font-weight:600; font-size:15px; }
.tem-by .who span{ display:block; font-size:13px; color:var(--stone); white-space:nowrap; }
.tem-side{ display:flex; flex-direction:column; gap: 30px; }
.tem-image{ margin:0; position:relative; overflow:hidden; border-radius:var(--r); background:var(--espresso); }
.tem-image img{ width:100%; aspect-ratio: 1.35 / .82; object-fit:cover; transition: transform 1s var(--ease); }
.tem-image:hover img{ transform: scale(1.04); }
.tem-image::after{ content:""; position:absolute; inset:auto 0 0; height:44%; background:linear-gradient(0deg, rgba(20,16,10,.75), transparent); }
.tem-image figcaption{ position:absolute; left:16px; bottom:14px; z-index:2; color:var(--bone); }
.tem-small{ border-top:1px solid rgba(33,28,22,.13); padding-top:26px; }
.tem-small p{ font-family:var(--serif); font-style:italic; font-size:19px; line-height:1.4; font-weight:360; }
.tem-small .who{ margin-top:16px; display:flex; align-items:center; gap:12px; }
.tem-small .avatar{ width:40px; height:40px; font-size:16px; }
.tem-small .who b{ display:block; font-family:var(--sans); font-style:normal; font-weight:600; font-size:14px; white-space:nowrap; }
.tem-small .who span{ display:block; font-style:normal; font-size:12px; color:var(--stone); margin-top:2px; }

/* ============================================================
   CONSULTATION
   ============================================================ */
.consultation{ background: var(--olive); color: var(--bone-soft); }
.cons-grid{ display:grid; grid-template-columns: 1.05fr .95fr; gap: clamp(36px,5vw,76px); align-items:center; }
.cons-card{ position:relative; }
.cons-card .blueprint{ opacity:.1; background-image:
  linear-gradient(to right, rgba(243,237,225,.4) 1px, transparent 1px),
  linear-gradient(to bottom, rgba(243,237,225,.4) 1px, transparent 1px); }
.cons h2{ font-size: clamp(34px,4.4vw,62px); line-height:1.02; }
.cons .lede{ color:#e7e0d0; margin-top:24px; max-width:42ch; }
.cons-list{ list-style:none; padding:0; margin: 32px 0 40px; }
.cons-list li{ display:flex; align-items:baseline; gap:14px; padding: 13px 0; border-top:1px solid rgba(243,237,225,.18); font-size:16px; }
.cons-list li::before{ content:"\2014"; color: var(--brass-light); flex:0 0 auto; }
.cons .btn{ width:100%; justify-content:center; }
.cons-note{ margin-top:16px; font-size:13px; color:#d8d0bf; text-align:center; letter-spacing:.04em; }
.cons-visuals{ position:relative; min-height: clamp(520px, 58vw, 720px); align-self:stretch; }
.cons-img{
  position:absolute;
  inset:0 0 0 12%;
  margin:0;
  border-radius:var(--r);
  overflow:hidden;
  border:1px solid rgba(243,237,225,.18);
  box-shadow:0 30px 90px rgba(0,0,0,.22);
}
.cons-img img{ width:100%; height:100%; object-fit:cover; }
.cons-img::after{ content:""; position:absolute; inset:auto 0 0; height:34%; background:linear-gradient(0deg, rgba(20,16,10,.72), transparent); }
.cons-img figcaption{ position:absolute; left:18px; bottom:16px; z-index:2; color:var(--bone); }
.cons-video{
  position:absolute;
  left:0;
  bottom: clamp(20px, 4vw, 48px);
  width: clamp(170px, 18vw, 250px);
  margin:0;
  background:rgba(33,28,22,.72);
  border:1px solid rgba(199,164,104,.28);
  padding:8px;
  border-radius:var(--r);
  backdrop-filter: blur(10px);
}
.cons-video video{ width:100%; aspect-ratio: 9 / 16; object-fit:cover; display:block; background:var(--espresso); }
.cons-video figcaption{ color:rgba(243,237,225,.82); }

/* ============================================================
   FAQ
   ============================================================ */
.faq{ background: var(--bone); position:relative; }
.faq .blueprint{ opacity:.06; }
.faq-grid{ display:grid; grid-template-columns: .8fr 1.2fr; gap: clamp(34px,5vw,80px); align-items:start; position:relative; z-index:2; }
.acc{ border-top:1px solid rgba(33,28,22,.16); }
.acc-item{ border-bottom:1px solid rgba(33,28,22,.16); }
.acc-q{ width:100%; text-align:left; display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding: 26px 0; font-family:var(--serif); font-weight:360; font-size: clamp(19px,1.7vw,25px); color:var(--espresso); }
.acc-ico{ flex:0 0 auto; width:24px; height:24px; position:relative; }
.acc-ico::before,.acc-ico::after{ content:""; position:absolute; background:var(--brass); transition: transform .4s var(--ease); }
.acc-ico::before{ left:0; top:50%; width:100%; height:1.5px; transform:translateY(-50%); }
.acc-ico::after{ left:50%; top:0; width:1.5px; height:100%; transform:translateX(-50%); }
.acc-item.open .acc-ico::after{ transform: translateX(-50%) rotate(90deg); opacity:0; }
.acc-a{ overflow:hidden; height:0; }
.acc-a-inner{ padding: 0 0 28px; color: var(--stone); font-size:16.5px; max-width:54ch; }

/* ============================================================
   CTA FINAL
   ============================================================ */
.cta{ background: var(--espresso); color:var(--bone); text-align:center; }
.cta .blueprint{ opacity:.1; }
.cta-bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:.18;
  filter:saturate(.72) contrast(1.08);
  z-index:0;
}
.cta::after{ content:""; position:absolute; inset:0; z-index:1; background:radial-gradient(85% 80% at 50% 28%, rgba(33,28,22,.55), rgba(33,28,22,.94)); }
.cta-inner{ position:relative; z-index:2; max-width: min(820px, 92vw); margin-inline:auto; }
.cta h2{ font-size: clamp(40px,6vw,92px); line-height:1.02; }
.cta h2 .it{ color:var(--brass-light); }
.cta-sub{ color:#c9bea9; margin: 28px auto 0; max-width: 48ch; font-size: clamp(17px,1.5vw,20px); }
.cta-btns{ margin-top: 44px; display:flex; gap:22px; justify-content:center; flex-wrap:wrap; }
.cta-meta{ margin-top: clamp(60px,8vw,96px); display:grid; grid-template-columns:repeat(3,1fr); max-width: 880px; margin-inline:auto; }
.cta-meta .m{ padding: 6px 30px; border-left:1px solid rgba(199,164,104,.25); }
.cta-meta .m:first-child{ border-left:none; }
.cta-meta .mlab{ font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--brass); }
.cta-meta .mval{ font-family:var(--serif); font-size: clamp(16px,1.3vw,19px); margin-top:10px; line-height:1.4; color:var(--bone); }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{ background: var(--ink); color:var(--bone); padding-block: clamp(60px,8vw,96px) 40px; }
.foot-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr; gap: clamp(30px,4vw,60px); align-items:start; }
.foot-brand .logo{ display:flex; align-items:center; gap:.7em; font-family:var(--serif); font-size:24px; color:var(--bone); }
.foot-tag{ font-family:var(--serif); font-style:italic; font-size:21px; color:var(--brass-light); margin-top:22px; font-weight:340; max-width:20ch; }
.foot-col h4{ font-family:var(--sans); font-weight:600; font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--brass); margin-bottom:18px; }
.foot-col ul{ list-style:none; margin:0; padding:0; }
.foot-col li{ margin:0; padding:0; }
.foot-col a, .foot-col p{ display:block; color:#bbb1a0; font-size:15px; margin: 8px 0; transition: color .3s; }
.foot-col a:hover{ color:var(--brass-light); }
.foot-rule{ height:1px; background: rgba(199,164,104,.22); margin: clamp(46px,6vw,72px) 0 26px; }
.foot-bottom{ display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; font-size:13px; color:var(--stone); letter-spacing:.04em; }

/* sticky mobile consultation CTA */
.wa-sticky{
  display:none;
  position:fixed;
  left:14px;
  right:14px;
  bottom:calc(14px + env(safe-area-inset-bottom));
  z-index:115;
}
.wa-sticky::before{
  content:"";
  position:absolute;
  inset:-12px -14px calc(-14px - env(safe-area-inset-bottom));
  z-index:-1;
  pointer-events:none;
  background:linear-gradient(180deg, rgba(33,28,22,0), rgba(33,28,22,.9) 42%, rgba(33,28,22,.96));
}
.wa-sticky .mobile-consult-cta{
  width:100%;
  min-height:68px;
  justify-content:space-between;
  gap:18px;
  padding:13px 16px 13px 18px;
  border:1px solid rgba(236,228,213,.22);
  background:
    linear-gradient(135deg, var(--brass-light), var(--brass) 52%, #8f6a35);
  box-shadow:
    0 18px 48px rgba(0,0,0,.38),
    0 0 0 1px rgba(255,255,255,.08) inset,
    0 0 34px rgba(199,164,104,.28);
  overflow:hidden;
  isolation:isolate;
}
.wa-sticky .mobile-consult-cta::before{
  content:"";
  position:absolute;
  inset:1px;
  z-index:-1;
  border-radius:calc(var(--r) + 1px);
  background:
    linear-gradient(115deg, rgba(255,255,255,.34), transparent 32%),
    linear-gradient(180deg, rgba(255,255,255,.12), transparent);
  opacity:.76;
}
.wa-sticky .mobile-consult-cta::after{
  content:"";
  position:absolute;
  top:-40%;
  bottom:-40%;
  left:-36%;
  width:34%;
  z-index:-1;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.48), transparent);
  transform:skewX(-18deg);
  animation:cta-sheen 4.8s var(--ease) infinite;
}
.wa-sticky .mobile-consult-cta span{
  display:grid;
  gap:3px;
  text-align:left;
  line-height:1.05;
}
.wa-sticky .mobile-consult-cta small{
  color:rgba(33,28,22,.74);
  font-size:10px;
  font-weight:800;
  letter-spacing:.2em;
  text-transform:uppercase;
}
.wa-sticky .mobile-consult-cta i{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  flex:0 0 38px;
  border:1px solid rgba(33,28,22,.2);
  background:rgba(33,28,22,.13);
  font-style:normal;
  transition:transform .28s var(--ease), background .28s var(--ease);
}
.wa-sticky .mobile-consult-cta:hover,
.wa-sticky .mobile-consult-cta:focus-visible{
  transform:translateY(-2px);
  background:
    linear-gradient(135deg, #d3b47d, var(--brass-light) 52%, var(--brass));
}
.wa-sticky .mobile-consult-cta:hover i,
.wa-sticky .mobile-consult-cta:focus-visible i{
  transform:translateX(3px);
  background:rgba(33,28,22,.2);
}
.wa-sticky .mobile-consult-cta:active{
  transform:translateY(1px) scale(.992);
}

.whatsapp-assistant{
  position:fixed;
  right:24px;
  bottom:24px;
  z-index:116;
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:58px;
  padding:8px 15px 8px 8px;
  border:1px solid rgba(199,164,104,.3);
  border-radius:999px;
  background:rgba(33,28,22,.9);
  color:var(--bone, #ECE4D5);
  box-shadow:0 16px 50px rgba(0,0,0,.28), 0 0 0 1px rgba(255,255,255,.06) inset;
  backdrop-filter:blur(16px) saturate(1.1);
  overflow:hidden;
  white-space:nowrap;
  transition:transform .28s var(--ease), border-color .28s var(--ease), box-shadow .28s var(--ease), background .28s var(--ease), width .42s var(--ease);
}
.whatsapp-assistant:hover,
.whatsapp-assistant:focus-visible{
  transform:translateY(-3px);
  border-color:rgba(199,164,104,.68);
  background:rgba(33,28,22,.96);
  box-shadow:0 20px 58px rgba(0,0,0,.34), 0 0 28px rgba(37,211,102,.18);
}
.whatsapp-assistant:active{
  transform:translateY(-1px) scale(.985);
}
.whatsapp-assistant__icon{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  flex:0 0 42px;
  border-radius:50%;
  background:#25D366;
  box-shadow:0 8px 22px rgba(37,211,102,.28);
}
.whatsapp-assistant__icon svg{
  width:28px;
  height:28px;
  display:block;
}
.whatsapp-assistant__icon path:first-child{ fill:#25D366; }
.whatsapp-assistant__icon path:last-child{ fill:#fff; }
.whatsapp-assistant__copy{
  display:flex;
  align-items:center;
  gap:6px;
  min-width:0;
  line-height:1;
}
.whatsapp-assistant__copy strong{
  font-size:12px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--brass-light);
}
.whatsapp-assistant__copy strong::after{
  content:"•";
  margin-left:6px;
  color:rgba(199,164,104,.62);
}
.whatsapp-assistant__copy small{
  font-size:13px;
  color:#d7cdbd;
  white-space:nowrap;
}

@keyframes cta-sheen{
  0%, 46%{ transform:translateX(0) skewX(-18deg); opacity:0; }
  58%{ opacity:.8; }
  74%, 100%{ transform:translateX(430%) skewX(-18deg); opacity:0; }
}

@keyframes assistant-mobile-reveal{
  0%, 12%, 68%, 100%{ width:50px; }
  20%, 52%{ width:min(238px, calc(100vw - 32px)); }
}

@keyframes assistant-copy-reveal{
  0%, 14%, 66%, 100%{
    max-width:0;
    opacity:0;
    transform:translateX(8px);
  }
  22%, 52%{
    max-width:178px;
    opacity:1;
    transform:translateX(0);
  }
}

@keyframes assistant-mobile-reveal-small{
  0%, 12%, 68%, 100%{ width:48px; }
  20%, 52%{ width:min(226px, calc(100vw - 32px)); }
}

@keyframes assistant-copy-reveal-small{
  0%, 14%, 66%, 100%{
    max-width:0;
    opacity:0;
    transform:translateX(8px);
  }
  22%, 52%{
    max-width:166px;
    opacity:1;
    transform:translateX(0);
  }
}

/* custom cursor */
.cursor-dot,.cursor-label{ position:fixed; top:0; left:0; z-index:200; pointer-events:none; transform: translate(-50%,-50%); }
.cursor-dot{ width:7px; height:7px; background:var(--brass); border-radius:50%; transition: width .3s, height .3s, background .3s; mix-blend-mode: difference; }
.cursor-label{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--brass-light); background:var(--espresso); padding:5px 9px; border-radius:2px; opacity:0; transition: opacity .25s; transform: translate(14px,14px); white-space:nowrap; }
.cursor-label.show{ opacity:1; }
@media (hover:none){ .cursor-dot,.cursor-label{ display:none; } }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1080px){
  .hero-grid{ grid-template-columns:1fr; }
  .hero-right{ min-height: 56svh; order:-1; }
  .hero-left{ padding-top: 110px; }
  .prob-grid,.cmp,.cons-grid,.tem-grid,.faq-grid,.sol-cols,.solution-visual,.plan-built,.partner-proof{ grid-template-columns:1fr; }
  .prob-aside{ position:static; }
  .prob-quote{ transform:none; }
  .prob-media{ transform:none; }
  .ben-grid{ grid-template-columns: repeat(2,1fr); }
  .ben.wide,.ben.col3,.ben.col2{ grid-column: span 2; }
  .ben.tall{ grid-row: auto; }
  .pil-grid,.part-grid{ grid-template-columns:1fr; }
  .pil-img img{ aspect-ratio: 16 / 8.2; }
  .stats{ grid-template-columns: repeat(2,1fr); gap: 30px 0; }
  .stat:nth-child(3){ border-left:none; padding-left:0; }
  .showroom-intro{ grid-template-columns:1fr; margin-top:0; }
  .showroom .more{ justify-self:start; }
  .cons-visuals{ min-height: 660px; }
}
@media (max-width: 720px){
  body{ font-size:17px; padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  .hero-right{ min-height:48svh; }
  .hero-left{ padding-top:52px; padding-bottom:128px; }
  .hero-eyebrow{ margin-bottom:18px; font-size:10px; letter-spacing:.18em; }
  .hero h1{ font-size: clamp(34px, 11vw, 46px); }
  .hero-sub{ margin-top:22px; }
  .hero-cta{ margin-top:28px; }
  .hero-trust{ margin-top:34px; }
  .nav-links{ display:none; }
  .nav{ padding-block:16px; }
  .nav.scrolled{ padding-top:14px; padding-bottom:10px; }
  .nav .nav-cta .btn{ display:none; }
  section{ scroll-margin-top: 88px; }
  .brand-logo{ width:70px; }
  .nav.scrolled .brand-logo{ width:62px; }
  .footer .brand-logo{ width:132px; }
  .burger{ display:flex; }
  .wa-sticky{ display:block; }
  .whatsapp-assistant{
    right:16px;
    bottom:calc(96px + env(safe-area-inset-bottom));
    width:50px;
    min-height:50px;
    height:50px;
    max-width:calc(100vw - 32px);
    gap:8px;
    padding:7px;
    animation:assistant-mobile-reveal 7.2s var(--ease) infinite;
  }
  .whatsapp-assistant:hover,
  .whatsapp-assistant:focus-visible{
    width:min(238px, calc(100vw - 32px));
    animation-play-state:paused;
  }
  .whatsapp-assistant__icon{
    width:36px;
    height:36px;
    flex-basis:36px;
  }
  .whatsapp-assistant__icon svg{
    width:24px;
    height:24px;
  }
  .whatsapp-assistant__copy strong{
    font-size:10px;
  }
  .whatsapp-assistant__copy small{
    font-size:12px;
  }
  .whatsapp-assistant__copy{
    flex:0 0 auto;
    max-width:0;
    opacity:0;
    overflow:hidden;
    transform:translateX(8px);
    animation:assistant-copy-reveal 7.2s var(--ease) infinite;
  }
  .whatsapp-assistant:hover .whatsapp-assistant__copy,
  .whatsapp-assistant:focus-visible .whatsapp-assistant__copy{
    max-width:178px;
    opacity:1;
    transform:translateX(0);
    animation-play-state:paused;
  }
  .footer{ padding-bottom: 154px; }
  .foot-grid{ grid-template-columns:1fr; }
  .cta-meta{ grid-template-columns:1fr; gap:24px; }
  .cta-meta .m{ border-left:none; padding-inline:0; border-top:1px solid rgba(199,164,104,.2); padding-top:18px; }
  .cta-meta .m:first-child{ border-top:none; }
  .ben-grid{ grid-template-columns:1fr; }
  .ben.wide,.ben.col3,.ben.col2{ grid-column:auto; }
  .ben.with-img.light-img{ padding-right:32px; padding-top:210px; }
  .ben.with-img.light-img .ben-img{ width:100%; height:190px; mask-image:linear-gradient(180deg, #000 0%, #000 68%, transparent 100%); }
  .ben.with-img .ben-img{ width:100%; height:190px; opacity:.3; mask-image:linear-gradient(180deg, #000 0%, #000 62%, transparent 100%); }
  .stats{ grid-template-columns:1fr; gap:36px; }
  .stat{ border-left:none; padding-left:0; }
  .meth-steps{ grid-auto-flow:row; grid-auto-columns:auto; }
  .meth-line{ display:none; }
  .plan-built{ margin-top:34px; }
  .ba-pair{ grid-template-columns:1fr; }
  .solution-visual figcaption,.ba-pair figcaption,.showroom-rail figcaption{ position:static; color:inherit; text-shadow:none; padding:0 4px 4px; }
  .solution-visual figure::after,.ba-pair figure::after,.showroom-rail figure::after{ display:none; }
  .showroom-logo{ width:138px; }
  .showroom-rail{ padding-inline:20px; }
  .showroom-rail figure{ flex-basis:82vw; }
  .cons-visuals{ min-height:auto; display:grid; gap:18px; }
  .cons-img,.cons-video{ position:relative; inset:auto; left:auto; bottom:auto; width:100%; }
  .cons-img{ height:420px; }
  .cons-video video{ max-height:460px; }
  .hero-signature{ display:none; }
  .hero-inset{ width:144px; left:18px; bottom:18px; }
  .gal-card{ width: 78vw; height: 64svh; }
  .dropcap::first-letter{ font-size:4.2rem; }
}

@media (max-width: 380px){
  .wa-sticky .mobile-consult-cta{
    min-height:64px;
    padding-inline:14px 13px;
    font-size:13px;
  }
  .wa-sticky .mobile-consult-cta small{
    font-size:9px;
  }
  .wa-sticky .mobile-consult-cta i{
    width:34px;
    height:34px;
    flex-basis:34px;
  }
  .whatsapp-assistant{
    width:48px;
    height:48px;
    min-height:48px;
    animation-name:assistant-mobile-reveal-small;
  }
  .whatsapp-assistant:hover,
  .whatsapp-assistant:focus-visible{
    width:min(226px, calc(100vw - 32px));
  }
  .whatsapp-assistant__icon{
    width:34px;
    height:34px;
    flex-basis:34px;
  }
  .whatsapp-assistant__copy{
    animation-name:assistant-copy-reveal-small;
  }
  .whatsapp-assistant__copy strong{
    font-size:9px;
    letter-spacing:.1em;
  }
  .whatsapp-assistant__copy small{
    font-size:11px;
  }
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; }
  .whatsapp-assistant,
  .whatsapp-assistant__copy{
    animation:none !important;
  }
}