/* ─── tokens ─────────────────────────────────────────────────── */
:root{
  --paper:        #f4efe6;
  --paper-2:      #ece6da;
  --paper-3:      #e3dccd;
  --ink:          #0c0e12;
  --ink-2:        #1a1f28;
  --ink-3:        #2a2f3a;
  --mute:         #6b6e76;
  --mute-2:       #9aa0a8;
  --rule:         rgba(12,14,18,.10);
  --rule-strong:  rgba(12,14,18,.22);
  --accent:       #b8553a;       /* sun-warmed terracotta */
  --sea:          #3a566f;
  --max:          1280px;
  --gutter:       clamp(20px, 4vw, 56px);

  --serif: "Fraunces", "Times New Roman", serif;
  --sans:  "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:  "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;
}

/* ─── reset ──────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  font-family:var(--sans);
  background:var(--paper);
  color:var(--ink);
  font-size:16px;
  line-height:1.55;
  letter-spacing:-0.005em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  /* paper grain — hand-rolled noise, faint */
  background-image:
    radial-gradient(1200px 600px at 80% -10%, rgba(184,85,58,.06), transparent 60%),
    radial-gradient(900px 500px at -10% 20%, rgba(58,86,111,.05), transparent 60%);
  overflow-x:hidden;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer; padding:0}
ul,ol{margin:0; padding:0; list-style:none}
hr{border:0; border-top:1px solid var(--rule); margin:0}
::selection{background:var(--ink); color:var(--paper)}

/* ─── typography ─────────────────────────────────────────────── */
.display{
  font-family:var(--serif);
  font-weight:430;
  font-variation-settings:"opsz" 144, "SOFT" 30;
  letter-spacing:-0.03em;
  line-height:.96;
  font-size:clamp(38px, 6.4vw, 92px);
  margin:0;
  color:var(--ink);
}
.serif-i{
  font-style:italic;
  font-variation-settings:"opsz" 144, "SOFT" 80;
  font-weight:380;
}
.eyebrow{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--mute);
  display:inline-flex;
  align-items:center;
  gap:.6em;
  margin:0;
}
.eyebrow-light{color:rgba(244,239,230,.7)}
.eyebrow .dot, .dot{
  width:6px;height:6px;border-radius:999px;background:var(--accent);
  display:inline-block;
}
.kicker{
  font-family:var(--serif);
  font-style:italic;
  font-size:14px;
  color:var(--mute);
  margin:0;
}
.mono{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--mute);
}
.section-no{
  margin:0 0 28px;
  color:var(--ink-3);
  display:inline-flex;
  align-items:center;
  gap:.7em;
}
.section-no::before{
  content:"";
  width:6px;height:6px;border-radius:999px;
  background:var(--accent);
  display:inline-block;
}
.section-head{
  display:grid; gap:18px;
  max-width:980px;
  margin-bottom:48px;
}
.section-sub{
  font-size:17px;
  color:var(--mute);
  max-width:54ch;
  margin:0;
}

/* ─── primitives ─────────────────────────────────────────────── */
.btn-solid{
  display:inline-flex; align-items:center; gap:.6em;
  background:var(--ink); color:var(--paper);
  padding:14px 22px; border-radius:999px;
  font-weight:500; font-size:14px;
  letter-spacing:.01em;
  transition:transform .25s cubic-bezier(.2,.7,.2,1), background .2s;
}
.btn-solid:hover{transform:translateY(-1px); background:var(--ink-2)}
.btn-solid.btn-large{padding:18px 28px; font-size:15px}
.btn-block{display:flex; justify-content:center; width:100%}

.btn-ghost{
  display:inline-flex; align-items:center; gap:.6em;
  padding:14px 22px; border-radius:999px;
  border:1px solid var(--rule-strong);
  font-size:14px; font-weight:500;
  transition:border-color .2s, background .2s;
}
.btn-ghost:hover{background:rgba(12,14,18,.04); border-color:var(--ink)}

.btn-pill{
  display:inline-flex; align-items:center; gap:.5em;
  padding:10px 18px; border-radius:999px;
  background:var(--ink); color:var(--paper);
  font-size:13px; font-weight:500;
  transition:transform .2s, background .2s;
  white-space:nowrap;
}
.btn-pill:hover{transform:translateY(-1px); background:var(--ink-2)}
.btn-short{display:none}

.link-arrow{
  display:inline-flex; align-items:center; gap:.4em;
  font-weight:500; font-size:14px;
  border-bottom:1px solid var(--ink);
  padding-bottom:2px;
  transition:gap .25s cubic-bezier(.2,.7,.2,1);
}
.link-arrow:hover{gap:.9em}

/* ─── layout helpers ─────────────────────────────────────────── */
section{
  padding-left:var(--gutter); padding-right:var(--gutter);
}
section + section{ border-top:1px solid var(--rule) }

/* ─── nav ────────────────────────────────────────────────────── */
.nav{
  position:sticky; top:0; z-index:50;
  backdrop-filter:saturate(140%) blur(14px);
  -webkit-backdrop-filter:saturate(140%) blur(14px);
  background:rgba(244,239,230,.78);
  border-bottom:1px solid transparent;
  transition:border-color .25s, background .25s;
}
.nav.is-stuck{border-bottom-color:var(--rule); background:rgba(244,239,230,.92)}
.nav-inner{
  max-width:var(--max); margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  gap:24px;
  padding:14px var(--gutter);
}
.brand{
  display:inline-flex; align-items:center; gap:10px;
  color:var(--ink);
}
.brand-mark{ width:24px; height:24px; color:var(--ink) }
.brand-word{
  font-family:var(--serif); font-size:19px; letter-spacing:-.01em;
  font-weight:480;
}
.brand-word em{ font-style:italic; font-weight:400; color:var(--accent) }
.nav-links{
  display:flex; gap:28px;
  font-size:13.5px; color:var(--ink-2);
  font-weight:450;
}
.nav-links a{position:relative}
.nav-links a::after{
  content:""; position:absolute; left:0; right:0; bottom:-4px;
  height:1px; background:var(--ink); transform:scaleX(0); transform-origin:left;
  transition:transform .3s cubic-bezier(.2,.7,.2,1);
}
.nav-links a:hover::after{transform:scaleX(1)}

@media (max-width:840px){
  .nav-links{display:none}
}
@media (max-width:520px){
  .nav-inner{
    gap:12px;
    padding:12px 16px;
  }
  .brand{gap:8px; min-width:0}
  .brand-mark{width:22px; height:22px; flex:0 0 22px}
  .brand-word{font-size:17px}
  .btn-pill{
    padding:9px 12px;
    font-size:12px;
    flex:0 0 auto;
  }
  .btn-full{display:none}
  .btn-short{display:inline}
}

/* ─── hero ───────────────────────────────────────────────────── */
.hero{
  position:relative;
  min-height:86svh;
  padding-top:clamp(44px, 6svh, 76px);
  padding-bottom:clamp(36px, 6svh, 68px);
  border-bottom:1px solid rgba(244,239,230,.22);
  overflow:hidden;
  isolation:isolate;
  background:#101319;
  color:var(--paper);
}
.hero-bg{
  position:absolute;
  inset:0;
  z-index:-2;
}
.hero-bg img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
}
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    linear-gradient(90deg, rgba(8,10,14,.80) 0%, rgba(8,10,14,.58) 32%, rgba(8,10,14,.20) 54%, rgba(8,10,14,.03) 78%, transparent 100%),
    linear-gradient(180deg, rgba(8,10,14,.02) 0%, rgba(8,10,14,.18) 66%, rgba(8,10,14,.44) 100%);
  pointer-events:none;
}
.hero-grid{
  max-width:var(--max); margin:0 auto;
  display:grid;
  min-height:calc(86svh - clamp(44px, 6svh, 76px) - clamp(36px, 6svh, 68px));
  grid-template-columns:minmax(0, .9fr) minmax(320px, 1.1fr);
  grid-template-rows:auto auto auto 1fr auto;
  gap:26px 48px;
  align-items:start;
}
.hero-meta{ grid-column:1 / -1; display:flex; align-items:center; gap:20px; justify-content:space-between }
.hero .eyebrow,
.hero .kicker,
.hero .mono{
  color:rgba(244,239,230,.72);
  text-shadow:0 1px 18px rgba(8,10,14,.5);
}
.hero-headline{
  grid-column:1 / 2;
  font-family:var(--serif);
  font-weight:380;
  font-variation-settings:"opsz" 144, "SOFT" 50;
  letter-spacing:-.035em;
  line-height:.92;
  font-size:clamp(56px, 7.8vw, 118px);
  margin:0;
  max-width:9.5ch;
  color:var(--paper);
  text-shadow:0 2px 28px rgba(8,10,14,.42);
}
.hero-tags{
  grid-column:1 / -1;
  align-self:end;
  display:flex;
  flex-wrap:wrap;
  margin-top:18px;
  padding-top:22px;
  border-top:1px solid rgba(244,239,230,.22);
}
.hero-tags li{
  display:inline-flex; align-items:baseline; gap:10px;
  padding:0 28px 0 0;
  margin-right:24px;
  position:relative;
  font-size:12.5px; color:rgba(244,239,230,.92);
  text-shadow:0 1px 14px rgba(8,10,14,.5);
}
.hero-tags li:not(:last-child)::after{
  content:"";
  position:absolute; right:0; top:.4em; bottom:.4em;
  width:1px; background:rgba(244,239,230,.18);
}
.hero-tags li span{
  font-family:var(--mono); font-size:10px; letter-spacing:.18em;
  color:#f0a384; text-transform:uppercase;
}
.hero-copy{
  grid-column:1 / 2;
  display:flex; flex-direction:column; gap:22px;
  font-size:17.5px;
  line-height:1.5;
  color:rgba(244,239,230,.86);
  text-shadow:0 1px 18px rgba(8,10,14,.46);
}
.hero-copy p{
  margin:0;
  max-width:34ch;
}
.hero-cta{display:flex; gap:12px; flex-wrap:wrap}
.hero .btn-solid{
  background:var(--paper);
  color:var(--ink);
}
.hero .btn-solid:hover{ background:#fffaf1 }
.hero .btn-ghost{
  border-color:rgba(244,239,230,.48);
  color:var(--paper);
  background:rgba(244,239,230,.08);
  backdrop-filter:blur(10px);
}
.hero .btn-ghost:hover{
  background:rgba(244,239,230,.16);
  border-color:rgba(244,239,230,.86);
}
.hero-foot{
  grid-column:1 / -1;
  align-self:end;
  margin-top:0;
  display:flex; justify-content:space-between; align-items:center;
}
.hero .price-tag{ color:#f0a384 }

@media (max-width:900px){
  .hero{
    min-height:86svh;
    padding-top:38px;
    padding-bottom:44px;
  }
  .hero-bg img{ object-position:64% center }
  .hero-grid{
    grid-template-columns:1fr;
    min-height:calc(86svh - 82px);
    gap:22px;
  }
  .hero-copy{grid-column:1}
  .hero-headline{
    grid-column:1;
    font-size:clamp(46px, 10.8vw, 82px);
    max-width:9.4ch;
  }
  .hero-meta{
    align-items:flex-start;
    flex-direction:column;
    gap:8px;
  }
  .hero-tags{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:10px 14px;
  }
  .hero-tags li{
    min-width:0;
    font-size:12.5px;
  }
  .hero-foot{
    align-items:flex-start;
    flex-direction:column;
    gap:10px;
  }
}
@media (max-width:520px){
  section{
    padding-left:16px;
    padding-right:16px;
  }
  .hero-grid,
  .manifesto,
  .lineup,
  .studio,
  .inside,
  .bintelli,
  .why,
  .contact-grid,
  .foot-grid,
  .foot-bottom{
    width:100%;
    max-width:100%;
    min-width:0;
  }
  .hero-copy,
  .lineup-grid,
  .model-card,
  .studio-frame,
  .studio-image,
  .studio-panel,
  .inside-gallery,
  .spec-grid,
  .bintelli-frame,
  .reasons,
  .quote-form{
    min-width:0;
    max-width:100%;
  }
  .hero{
    min-height:84svh;
    padding-top:30px;
    padding-bottom:34px;
  }
  .hero::before{
    background:
      linear-gradient(90deg, rgba(8,10,14,.82) 0%, rgba(8,10,14,.62) 55%, rgba(8,10,14,.18) 100%),
      linear-gradient(180deg, rgba(8,10,14,.06) 0%, rgba(8,10,14,.30) 60%, rgba(8,10,14,.58) 100%);
  }
  .hero-bg img{ object-position:68% center }
  .hero-grid{
    min-height:calc(84svh - 64px);
    gap:18px;
  }
  .hero-headline{
    font-size:clamp(38px, 11.6vw, 48px);
    max-width:8.6ch;
  }
  .hero-copy{
    font-size:14.5px;
    width:100%;
    max-width:100%;
    gap:18px;
  }
  .hero-cta{
    align-items:stretch;
    flex-direction:column;
  }
  .hero-cta .btn-solid,
  .hero-cta .btn-ghost{
    justify-content:center;
    width:100%;
  }
  .hero-tags{margin-top:8px}
}

/* ─── scenes ─────────────────────────────────────────────────── */
.scenes{
  padding-top:120px;
  padding-bottom:120px;
  max-width:var(--max);
  margin:0 auto;
}
.scenes-head{
  grid-template-columns:minmax(0, 1fr) minmax(280px, .55fr);
  grid-template-rows:auto auto;
  column-gap:48px;
  row-gap:14px;
  align-items:end;
  max-width:none;
}
.scenes-head .section-no{ grid-column:1 / -1 }
.scenes-head .display{ grid-column:1 }
.scenes-head .section-sub{
  grid-column:2;
  grid-row:2;
  align-self:end;
}
.scene-grid{
  display:grid;
  grid-template-columns:1.45fr .9fr;
  grid-template-rows:360px 300px;
  gap:18px;
}
.scene,
.scene-note{
  position:relative;
  margin:0;
  border-radius:16px;
  overflow:hidden;
  background:var(--ink);
}
.scene-large{
  grid-row:1 / span 2;
}
.scene picture,
.scene img{
  width:100%;
  height:100%;
}
.scene img{
  object-fit:cover;
  transition:transform .9s cubic-bezier(.2,.7,.2,1);
}
.scene:hover img{ transform:scale(1.03) }
.scene::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, transparent 38%, rgba(8,10,14,.55) 70%, rgba(8,10,14,.85) 100%);
  pointer-events:none;
}
.scene-dusk::after{
  background:linear-gradient(180deg, rgba(8,10,14,.10) 0%, rgba(8,10,14,.55) 45%, rgba(8,10,14,.92) 100%);
}
.scene figcaption{
  position:absolute;
  left:22px;
  right:22px;
  bottom:20px;
  z-index:1;
  color:var(--paper);
  display:grid;
  gap:10px;
}
.scene figcaption .mono{ color:rgba(244,239,230,.78); letter-spacing:.18em }
.scene figcaption strong{
  font-family:var(--serif);
  font-size:clamp(24px, 2.6vw, 38px);
  font-weight:430;
  line-height:1.04;
  letter-spacing:-.022em;
  max-width:16ch;
  text-shadow:0 2px 22px rgba(8,10,14,.7);
}
.scene-dusk figcaption strong{ font-size:clamp(22px, 2.2vw, 30px) }
.scene-note{
  padding:32px 30px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:28px;
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(184,85,58,.30), transparent 58%),
    radial-gradient(120% 80% at 0% 100%, rgba(58,86,111,.22), transparent 60%),
    var(--ink);
  color:var(--paper);
  border:1px solid rgba(244,239,230,.06);
}
.scene-note .mono{
  margin:0;
  color:rgba(244,239,230,.6);
}
.scene-note h3{
  font-family:var(--serif);
  font-weight:430;
  font-size:clamp(26px, 2.6vw, 38px);
  line-height:1.04;
  letter-spacing:-.022em;
  margin:0;
  max-width:14ch;
}
.scene-note > p{
  color:rgba(244,239,230,.78);
  margin:0;
  max-width:34ch;
  font-size:14.5px;
  line-height:1.55;
}
.scene-stats{
  display:grid;
  gap:8px;
  padding-top:22px;
  border-top:1px solid rgba(244,239,230,.14);
  font-size:13px;
}
.scene-stats li{
  display:flex; align-items:baseline; gap:14px;
  color:rgba(244,239,230,.86);
}
.scene-stats li .mono{
  color:var(--accent);
  min-width:1.2em;
}
@media (max-width:900px){
  .scenes-head,
  .scene-grid{
    grid-template-columns:1fr;
  }
  .scenes-head .section-sub{
    grid-column:1;
    grid-row:auto;
  }
  .scene-grid{
    grid-template-rows:auto;
  }
  .scene-large,
  .scene,
  .scene-note{
    min-height:360px;
  }
}
@media (max-width:520px){
  .scenes{
    padding-top:80px;
    padding-bottom:80px;
  }
  .scene-large,
  .scene,
  .scene-note{
    min-height:300px;
    border-radius:12px;
  }
  .scene figcaption{
    left:16px;
    right:16px;
    bottom:16px;
  }
  .scene figcaption strong,
  .scene-dusk figcaption strong{
    font-size:27px;
  }
  .scene-note{
    padding:22px;
  }
}

/* ─── manifesto ──────────────────────────────────────────────── */
.manifesto{
  padding-top:120px; padding-bottom:120px;
  max-width:var(--max); margin:0 auto;
}
.manifesto-line{ margin-bottom:64px }
.manifesto-grid{
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:48px 56px;
  border-top:1px solid var(--rule);
  padding-top:40px;
}
.manifesto-grid > div{
  position:relative;
  padding-left:0;
}
.man-no{
  display:block;
  margin:0 0 14px;
  font-family:var(--serif);
  font-style:italic;
  font-size:18px;
  letter-spacing:.02em;
  color:var(--accent);
  text-transform:none;
}
.manifesto-grid h4{
  font-family:var(--sans); font-weight:550;
  font-size:17px; letter-spacing:-.01em;
  margin:0 0 8px;
}
.manifesto-grid p{
  margin:0; color:var(--mute); font-size:15.5px;
  max-width:36ch;
}
@media (max-width:780px){
  .manifesto{padding-top:80px;padding-bottom:80px}
  .manifesto-grid{grid-template-columns:1fr; gap:28px}
}

/* ─── lineup ─────────────────────────────────────────────────── */
.lineup{
  padding-top:120px; padding-bottom:120px;
  max-width:var(--max); margin:0 auto;
}
.lineup-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:24px;
}
.model-card{
  position:relative;
  display:flex; flex-direction:column;
  background:var(--paper-2);
  border:1px solid var(--rule);
  border-radius:14px;
  overflow:hidden;
  transition:transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s, background .25s;
}
.model-card::before{
  content:"";
  position:absolute; inset:0 0 auto 0;
  height:3px;
  background:var(--accent-paint, var(--accent));
  opacity:.78;
  z-index:2;
}
.model-card:hover{
  transform:translateY(-3px);
  background:#f0e9da;
  box-shadow:0 22px 40px -22px rgba(12,14,18,.18);
}
.model-photo{
  position:relative;
  background:linear-gradient(180deg, #f7f2e8, var(--paper-2));
  padding:14px 8px 4px;
}
.model-photo img{
  width:100%; height:auto; aspect-ratio:4/3; object-fit:contain;
}
.paint-tag{
  position:absolute; left:14px; top:14px;
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--mono);
  font-size:9.5px; letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-2);
  padding:5px 9px 5px 8px;
  background:rgba(244,239,230,.78);
  backdrop-filter:blur(6px);
  border:1px solid var(--rule);
  border-radius:999px;
}
.paint-tag i{
  width:8px;height:8px;border-radius:999px;
  background:var(--accent-paint, var(--accent));
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.18);
}
.model-meta{
  padding:18px 18px 22px;
  display:flex; flex-direction:column; gap:10px;
  border-top:1px solid var(--rule);
  position:relative;
}
.model-no{
  position:absolute; top:14px; right:18px;
  font-size:9.5px;
  color:var(--mute-2);
}
.model-meta h3{
  font-family:var(--serif); font-weight:430; letter-spacing:-.02em;
  font-size:26px; line-height:1; margin:2px 0 0;
}
.model-meta h3 span{font-style:italic; font-weight:380; color:var(--ink-2)}
.model-meta ul{ display:grid; gap:4px; font-size:13.5px; color:var(--mute) }
.model-meta ul li::before{ content:"— "; color:var(--mute-2) }
.model-meta .link-arrow{
  margin-top:10px; align-self:flex-start; font-size:13px;
  border-bottom-color:var(--accent-paint, var(--ink));
}
.model-card:hover .link-arrow{
  color:var(--accent-paint, var(--ink));
}

@media (max-width:1080px){ .lineup-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:520px){
  .lineup-grid{grid-template-columns:1fr}
  .model-card{
    width:100%;
  }
  .model-photo{padding:12px 6px 0}
  .model-photo img{
    width:100%;
    max-width:100%;
    aspect-ratio:16/10;
    max-height:270px;
    object-fit:contain;
  }
}

/* ─── configurator ───────────────────────────────────────────── */
.studio{
  padding-top:120px; padding-bottom:120px;
  max-width:var(--max); margin:0 auto;
}
.studio-frame{
  display:grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr);
  gap:32px;
  align-items:stretch;
}
.studio-image{
  position:relative;
  background:
    radial-gradient(120% 80% at 50% 30%, #f7f2e8 0%, var(--paper-2) 50%, var(--paper-3) 100%);
  border:1px solid var(--rule);
  border-radius:18px;
  min-height:480px;
  overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  padding:40px 28px;
}
#studio-img{
  max-width:100%; max-height:520px; height:auto;
  object-fit:contain;
  filter:drop-shadow(0 30px 36px rgba(12,14,18,.22));
  transition:opacity .25s ease;
}
.studio-image.is-swapping #studio-img{opacity:.4}
.studio-floor{
  position:absolute; left:8%; right:8%; bottom:60px; height:24px;
  background:radial-gradient(60% 100% at 50% 50%, rgba(12,14,18,.18), transparent 70%);
  filter:blur(3px);
}
.studio-panel{
  background:var(--ink);
  color:var(--paper);
  border-radius:18px;
  padding:32px 28px;
  display:flex; flex-direction:column; gap:28px;
}
.studio-panel .mono{ color:rgba(244,239,230,.55) }
.studio-row{ display:flex; flex-direction:column; gap:14px }
.studio-label{ margin:0 }
.model-tabs{
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:8px;
}
.tab{
  border:1px solid rgba(244,239,230,.16);
  border-radius:10px;
  padding:11px 12px;
  font-size:13px; font-weight:500;
  color:var(--paper);
  text-align:center;
  transition:all .2s;
}
.tab:hover{ border-color:rgba(244,239,230,.4) }
.tab[aria-pressed="true"]{
  background:var(--paper); color:var(--ink);
  border-color:var(--paper);
}
.swatches{ display:flex; gap:10px; flex-wrap:wrap }
.swatch{
  width:36px; height:36px; border-radius:999px;
  background:var(--c);
  border:1px solid rgba(244,239,230,.2);
  position:relative;
  transition:transform .2s, box-shadow .2s;
}
.swatch:hover{ transform:scale(1.06) }
.swatch span{ position:absolute; inset:-5px; border-radius:999px; border:1px solid transparent; transition:border-color .2s }
.swatch[aria-checked="true"] span{ border-color:var(--paper) }

.studio-readout{
  margin-top:auto;
  padding-top:24px;
  border-top:1px solid rgba(244,239,230,.14);
  display:flex; flex-direction:column; gap:10px;
}
.readout-line{
  margin:0;
  font-family:var(--serif); font-size:30px; letter-spacing:-.018em;
  line-height:1;
  font-weight:430;
}
.readout-color{
  margin:6px 0 0;
  display:flex; align-items:center; flex-wrap:wrap;
  gap:10px 14px;
  font-family:var(--serif);
  font-style:italic;
  font-size:18px;
  color:rgba(244,239,230,.92);
}
.readout-dot{
  width:14px; height:14px; border-radius:999px;
  background:var(--readout-c, var(--accent));
  box-shadow:inset 0 0 0 1px rgba(244,239,230,.2);
  transition:background .25s;
}
.readout-finish{
  font-style:normal;
  color:rgba(244,239,230,.45);
  font-size:10px;
  letter-spacing:.18em;
}
.readout-price{ margin:6px 0 0; color:rgba(244,239,230,.55) }
.studio-readout .btn-solid{
  background:var(--paper); color:var(--ink);
  justify-content:center;
  margin-top:14px;
}
.studio-readout .btn-solid:hover{ background:#fffaf1 }

@media (max-width:980px){
  .studio-frame{grid-template-columns:1fr}
  .studio-image{min-height:380px}
}
@media (max-width:520px){
  .studio-image{
    min-height:280px;
    padding:24px 12px;
  }
  #studio-img{
    max-width:100%;
    max-height:300px;
  }
  .studio-panel{
    padding:26px 20px;
  }
  .model-tabs{
    grid-template-columns:1fr 1fr;
  }
  .tab{
    min-height:44px;
  }
  .swatches{
    gap:12px;
  }
  .swatch{
    width:40px;
    height:40px;
  }
}

/* ─── inside ─────────────────────────────────────────────────── */
.inside{
  padding-top:120px; padding-bottom:120px;
  max-width:var(--max); margin:0 auto;
}
.inside-gallery{
  display:grid;
  grid-template-columns:repeat(6, 1fr);
  grid-template-rows: 220px 220px;
  gap:14px;
  margin-bottom:64px;
}
.cell{ position:relative; margin:0; border-radius:12px; overflow:hidden; background:#1d2128 }
.cell img{ width:100%; height:100%; object-fit:cover; transition:transform .8s cubic-bezier(.2,.7,.2,1) }
.cell:hover img{ transform:scale(1.04) }
.cell figcaption{
  position:absolute; left:14px; bottom:12px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  color:#f4efe6;
  background:rgba(12,14,18,.6);
  backdrop-filter:blur(6px);
  padding:6px 10px; border-radius:6px;
}
.cell-a{grid-column:1 / span 4; grid-row:1}
.cell-b{grid-column:5 / span 2; grid-row:1}
.cell-c{grid-column:1 / span 2; grid-row:2}
.cell-d{grid-column:3 / span 4; grid-row:2}

.spec-grid{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:32px;
  border-top:1px solid var(--rule);
  padding-top:40px;
}
.spec-head{ margin:0 0 14px }
.spec-col ul{ display:grid; gap:8px; font-size:14.5px; color:var(--ink-2) }
.spec-col ul li{ position:relative; padding-left:14px }
.spec-col ul li::before{
  content:""; position:absolute; left:0; top:.7em; width:6px; height:1px; background:var(--ink-3);
}
.quiet-note{
  margin-top:32px;
  padding:14px 0 0;
  border-top:1px solid var(--rule);
  font-size:11px;
  color:var(--mute-2);
  letter-spacing:.14em;
}

@media (max-width:980px){
  .inside-gallery{grid-template-columns:repeat(2,1fr); grid-template-rows:repeat(4,200px)}
  .cell-a,.cell-b,.cell-c,.cell-d{grid-column:auto; grid-row:auto}
  .spec-grid{grid-template-columns:repeat(2,1fr); gap:32px 24px}
}
@media (max-width:560px){
  .inside-gallery{
    grid-template-rows:repeat(4,170px);
    gap:10px;
  }
  .cell figcaption{
    max-width:calc(100% - 20px);
    font-size:9px;
  }
  .spec-grid{grid-template-columns:1fr}
}

/* ─── bintelli ───────────────────────────────────────────────── */
.bintelli{
  padding-top:120px; padding-bottom:120px;
  max-width:var(--max); margin:0 auto;
}
.bintelli-frame{
  display:grid; grid-template-columns: 1.3fr 1fr;
  gap:64px; align-items:stretch;
}
.bintelli-quote .display{ margin:18px 0 28px }
.bintelli-display{
  font-size:clamp(36px, 5.2vw, 76px);
}
.bintelli-quote p{ font-size:17px; color:var(--ink-2); max-width:54ch }
.bintelli-eyebrow{ color:var(--accent) }

.bintelli-stat{
  background:var(--ink); color:var(--paper);
  border-radius:18px; padding:36px 32px;
  display:flex; flex-direction:column; gap:24px;
  position:relative; overflow:hidden;
}
.bintelli-stat::after{
  content:""; position:absolute; right:-100px; top:-100px;
  width:300px; height:300px; border-radius:999px;
  background:radial-gradient(closest-side, rgba(184,85,58,.45), transparent 70%);
  pointer-events:none;
}
.bintelli-stat .huge{
  font-family:var(--serif); font-style:italic; font-weight:380;
  font-size:96px; line-height:.9; letter-spacing:-.04em;
  display:block;
  color:var(--paper);
}
.bintelli-stat > div p{ margin:8px 0 0; max-width:28ch; color:rgba(244,239,230,.7) }
.bintelli-stat .rule{ height:1px; background:rgba(244,239,230,.16) }
.bintelli-stat ul{ display:grid; gap:12px; font-size:14px }
.bintelli-stat ul li{ display:flex; align-items:baseline; gap:12px; color:rgba(244,239,230,.85) }
.bintelli-stat ul li .mono{ color:var(--accent) }

@media (max-width:920px){ .bintelli-frame{grid-template-columns:1fr; gap:40px} }

/* ─── why direct ─────────────────────────────────────────────── */
.why{
  padding-top:120px; padding-bottom:120px;
  max-width:var(--max); margin:0 auto;
}
.reasons{
  display:grid; gap:0;
  border-top:1px solid var(--rule);
}
.reasons li{
  display:grid;
  grid-template-columns: 120px 1fr 1fr;
  gap:48px;
  align-items:start;
  padding:36px 0;
  border-bottom:1px solid var(--rule);
}
.reasons .num{
  font-family:var(--serif); font-style:italic; font-weight:380;
  font-size:64px; line-height:1; color:var(--accent);
  letter-spacing:-.03em;
}
.reasons h4{
  font-family:var(--serif); font-weight:430; letter-spacing:-.02em;
  font-size:28px; line-height:1.05; margin:0;
}
.reasons p{ margin:0; color:var(--mute); font-size:15.5px; max-width:46ch }

@media (max-width:760px){
  .reasons li{ grid-template-columns:80px 1fr; gap:18px 16px }
  .reasons li p{ grid-column:1 / -1 }
  .reasons .num{font-size:48px}
}

/* ─── contact ────────────────────────────────────────────────── */
.contact{
  padding-top:120px; padding-bottom:120px;
}
.contact-grid{
  max-width:var(--max); margin:0 auto;
  display:grid; grid-template-columns: 1fr 1.1fr;
  gap:32px;
  background:var(--ink); color:var(--paper);
  border-radius:22px;
  overflow:hidden;
}
.contact-pitch{
  padding:56px 48px;
  background:
    linear-gradient(180deg, rgba(16,19,25,.66), rgba(16,19,25,.94)),
    linear-gradient(90deg, rgba(16,19,25,.92), rgba(16,19,25,.52)),
    url("assets/generated/first-pass/wc-002-contact-white-driveway-dusk.webp") center / cover;
  display:flex; flex-direction:column; gap:24px;
}
.contact-display{ color:var(--paper); font-size:clamp(40px, 5vw, 76px) }
.contact-display .serif-i{ color:var(--accent) }
.contact-sub{ color:rgba(244,239,230,.7); max-width:38ch; font-size:16px; margin:0 }
.contact-meta{
  margin-top:auto;
  display:grid; gap:14px;
  padding-top:32px; border-top:1px solid rgba(244,239,230,.14);
}
.contact-meta li{ display:flex; gap:16px; align-items:baseline }
.contact-meta li .mono{ color:rgba(244,239,230,.5); min-width:80px }
.contact-meta .muted{ color:rgba(244,239,230,.85); font-size:14px }

.quote-form{
  padding:56px 48px;
  background:#101319;
  display:flex; flex-direction:column; gap:18px;
}
.quote-form label{ display:flex; flex-direction:column; gap:6px }
.quote-form .row.two{
  display:grid; grid-template-columns:1fr 1fr; gap:14px;
}
.quote-form .mono{ color:rgba(244,239,230,.5) }
.quote-form input,
.quote-form select,
.quote-form textarea{
  background:transparent;
  border:1px solid rgba(244,239,230,.16);
  border-radius:10px;
  padding:13px 14px;
  font:inherit;
  color:var(--paper);
  transition:border-color .2s, background .2s;
}
.quote-form input:focus,
.quote-form select:focus,
.quote-form textarea:focus{
  outline:0; border-color:var(--accent);
  background:rgba(184,85,58,.06);
}
.quote-form textarea{ resize:vertical; min-height:108px; line-height:1.55 }
.quote-form select{ appearance:none; background-image:linear-gradient(45deg, transparent 50%, rgba(244,239,230,.6) 50%), linear-gradient(135deg, rgba(244,239,230,.6) 50%, transparent 50%); background-position:calc(100% - 18px) 19px, calc(100% - 13px) 19px; background-size:5px 5px, 5px 5px; background-repeat:no-repeat; padding-right:36px }
.quote-form select option{ color:var(--ink); background:var(--paper) }
.form-foot{
  display:flex; justify-content:space-between; align-items:center;
  gap:18px; flex-wrap:wrap;
  margin-top:8px; padding-top:18px;
  border-top:1px solid rgba(244,239,230,.14);
}
.fineprint{ color:rgba(244,239,230,.5); margin:0; max-width:36ch }
.quote-form .btn-solid{
  background:var(--paper); color:var(--ink);
}
.quote-form .btn-solid:hover{ background:#fffaf1 }

@media (max-width:980px){
  .contact-grid{grid-template-columns:1fr}
  .contact-pitch, .quote-form{padding:36px 28px}
  .quote-form .row.two{grid-template-columns:1fr}
}
@media (max-width:520px){
  .contact{
    padding-left:16px;
    padding-right:16px;
  }
  .contact-grid{
    border-radius:18px;
  }
  .contact-pitch,
  .quote-form{
    padding:30px 20px;
  }
  .contact-meta li{
    flex-direction:column;
    gap:3px;
  }
  .quote-form input,
  .quote-form select,
  .quote-form textarea{
    min-width:0;
  }
  .form-foot{
    gap:16px;
  }
}

/* ─── footer ─────────────────────────────────────────────────── */
.foot{
  padding:64px var(--gutter) 32px;
  border-top:1px solid var(--rule);
  background:var(--paper);
}
.foot-grid{
  max-width:var(--max); margin:0 auto;
  display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap:32px;
}
.foot-brand p{ margin:14px 0 0; color:var(--mute); max-width:38ch; font-size:14px }
.foot-mark{
  margin-top:18px !important;
  display:inline-flex; align-items:center; gap:.6em;
  color:var(--ink-2) !important;
  font-size:11px !important;
}
.foot-h{ margin:0 0 14px }
.foot ul{ display:grid; gap:8px; font-size:14px; color:var(--ink-2) }
.foot ul a:hover{ color:var(--accent) }
.foot-bottom{
  max-width:var(--max); margin:48px auto 0;
  padding-top:18px; border-top:1px solid var(--rule);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
  font-size:12.5px; color:var(--mute);
}
@media (max-width:780px){
  .foot-grid{grid-template-columns:1fr 1fr; gap:32px 20px}
}
@media (max-width:520px){
  .foot{
    padding-left:16px;
    padding-right:16px;
  }
  .foot-grid{grid-template-columns:1fr}
}

/* ─── motion ─────────────────────────────────────────────────── */
.reveal{ opacity:0; transform:translateY(14px); transition:opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1) }
.reveal.is-in{ opacity:1; transform:none }
@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; animation:none !important }
  .reveal{opacity:1; transform:none}
  html{scroll-behavior:auto}
}