/* ==========================================================================
   XCLUSIVE MILANO — design tokens
   Palette matched directly to the brand SVGs: gold gradient (#D8B969 to
   #825D30), ivory #E8E7E3 for dark backgrounds, navy #0C2340 for light
   backgrounds — used sparingly here as a secondary accent.
   ========================================================================== */

@font-face{
  font-family: 'Playfair Display';
  src: url('../fonts/PlayfairDisplay.woff2') format('woff2-variations'), url('../fonts/PlayfairDisplay.woff2') format('woff2');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: 'Manrope';
  src: url('../fonts/Manrope.woff2') format('woff2-variations'), url('../fonts/Manrope.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root{
  --color-bg:        #0b0b0c;
  --color-bg-alt:     #141416;
  --color-bg-panel:   #1a1a1d;
  --color-gold:        #D8B969;
  --color-gold-soft:   #E1C88A;
  --color-gold-deep:   #825D30;
  --color-ivory:        #E8E7E3;
  --color-ink:            #a9a49a;
  --color-ink-dim:        #7c7870;
  --color-midnight:        #0C2340;
  --color-line:      rgba(216,185,105,0.22);
  --color-line-soft: rgba(232,231,227,0.10);

  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body: 'Manrope', system-ui, sans-serif;

  --container-w: 1180px;
  --radius: 2px;
  --ease: cubic-bezier(.4,0,.2,1);
}

*, *::before, *::after{ box-sizing: border-box; }
html{
  scroll-behavior: smooth;
  background: var(--color-bg);
  min-height: 100%;
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

body{
  margin:0;
  background: var(--color-bg);
  min-height: 100vh;
  min-height: 100dvh;
  color: var(--color-ivory);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }

:focus-visible{
  outline: 2px solid var(--color-gold);
  outline-offset: 3px;
}

.container{
  width: 100%;
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 0 24px;
}

.eyebrow{
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-gold);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before{
  content: '';
  width: 22px; height: 1px;
  background: var(--color-gold);
  display: inline-block;
}

h1, h2, h3, h4{
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 0.5em;
  color: var(--color-ivory);
}
h1{ font-size: clamp(2.15rem, 1.4rem + 3.6vw, 4.1rem); font-weight:700; }
h2{ font-size: clamp(1.7rem, 1.3rem + 1.8vw, 2.6rem); font-weight:700; }
h3{ font-size: 1.2rem; font-weight: 700; letter-spacing: -0.005em; }
p{ margin: 0 0 1em; color: var(--color-ink); }
p.lead{ font-size: 1.15rem; color: var(--color-ivory); }

.section{ padding: 96px 0; position: relative; }
.section--tight{ padding: 64px 0; }
.section--alt{ background: var(--color-bg-alt); }

/* divider: hand-drawn crossing strokes, echo of the mark */
.swoosh-divider{ width:100%; display:flex; justify-content:center; padding: 8px 0 0; opacity:0.85; }
.swoosh-divider svg{ width: 220px; height: auto; }

/* ---------- header ---------- */
.site-header{
  position: sticky; top:0; z-index: 40;
  background: rgba(11,11,12,0.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-line-soft);
}
.site-header .container{
  display:flex; align-items:center; justify-content:space-between;
  height: 84px;
}
.brand{ display:flex; align-items:center; min-width:0; flex-shrink:1; }
.brand img{ height: 40px; width:auto; flex-shrink:0; }
@media (min-width: 560px){ .brand img{ height: 56px; } }

.nav-main{ display:none; align-items:center; gap: 32px; }
.nav-main a{
  font-size: 0.85rem; font-weight: 600; letter-spacing: 0.03em;
  color: var(--color-ink); position:relative; padding: 4px 0;
  transition: color .25s var(--ease);
}
.nav-main a:hover, .nav-main a[aria-current="page"]{ color: var(--color-ivory); }
.nav-main a[aria-current="page"]::after{
  content:''; position:absolute; left:0; right:0; bottom:-6px; height:1px; background: var(--color-gold);
}

.header-actions{ display:flex; align-items:center; gap: 14px; }

.lang-switch{ display:flex; gap: 4px; font-size: 0.44rem; letter-spacing: .05em; }
.lang-switch a{
  padding: 2.5px 4px; border: 1px solid var(--color-line-soft); color: var(--color-ink-dim);
  text-transform: uppercase; font-weight:700;
}
.lang-switch a[aria-current="true"]{ color: var(--color-bg); background: var(--color-gold); border-color: var(--color-gold); }
.lang-switch a:hover:not([aria-current="true"]){ color: var(--color-ivory); border-color: var(--color-gold); }

.btn.header-cta{ display:none; padding: 10px 18px; font-size: 0.78rem; }
@media (min-width: 560px){ .btn.header-cta{ display:inline-flex; } }

.menu-toggle{
  display:inline-flex; background:none; border:1px solid var(--color-line-soft); color:var(--color-ivory);
  width:40px; height:40px; align-items:center; justify-content:center; cursor:pointer;
}
.menu-toggle svg{ width:18px; height:18px; }

.nav-main.is-open{
  display:flex; position:absolute; top:84px; left:0; right:0;
  background: var(--color-bg-alt); flex-direction:column; gap:0;
  border-bottom:1px solid var(--color-line-soft);
}
.nav-main.is-open a{ padding: 16px 24px; width:100%; border-bottom:1px solid var(--color-line-soft); }

@media (min-width: 900px){
  .nav-main{ display:flex; position:static; background:none; border:0; }
  .menu-toggle{ display:none; }
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding: 14px 26px; font-family: var(--font-body); font-weight: 700;
  font-size: 0.85rem; letter-spacing: 0.03em; cursor:pointer;
  border: 1px solid transparent; transition: all .25s var(--ease);
  text-align: center; max-width: 100%;
}
.btn-gold{ background: var(--color-gold); color: var(--color-bg); }
.btn-gold:hover{ background: var(--color-gold-soft); transform: translateY(-1px); }
.btn-ghost{ border-color: var(--color-line); color: var(--color-ivory); }
.btn-ghost:hover{ border-color: var(--color-gold); color: var(--color-gold); }
.btn-block{ width:100%; }
.btn svg{ width:16px; height:16px; flex-shrink:0; }

/* ---------- hero ---------- */
.hero{
  position:relative; overflow:hidden;
  padding: 88px 0 96px;
  border-bottom: 1px solid var(--color-line-soft);
}
.hero-swoosh{ position:absolute; top: -10%; right: -12%; width: 62%; max-width: 720px; opacity: 0.5; pointer-events:none; }
.hero-swoosh svg{ width:100%; height:auto; }
.hero-inner{ position:relative; max-width: 680px; }
.hero h1{ margin-top: 18px; }
.hero .lead{ max-width: 520px; margin-top: 18px; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top: 34px; }

.hero-strip{
  margin-top: 64px; padding-top: 36px; border-top: 1px solid var(--color-line-soft);
  display:grid; gap: 24px; grid-template-columns: 1fr;
}
@media (min-width: 720px){ .hero-strip{ grid-template-columns: repeat(3,1fr); } }
.hero-strip .item{ display:flex; gap:14px; align-items:flex-start; }
.hero-strip .item svg{ width:22px; height:22px; color: var(--color-gold); flex-shrink:0; margin-top:2px; }
.hero-strip .item h3{ margin-bottom:4px; font-size:0.95rem; }
.hero-strip .item p{ margin:0; font-size:0.88rem; }

/* ---------- cards / grid ---------- */
.grid{ display:grid; gap: 28px; grid-template-columns: 1fr; }
@media (min-width: 720px){ .grid-2{ grid-template-columns: 1fr 1fr; } .grid-4{ grid-template-columns: repeat(2,1fr);} }
@media (min-width: 1000px){ .grid-4{ grid-template-columns: repeat(4,1fr);} }

.card{
  background: var(--color-bg-panel);
  border: 1px solid var(--color-line-soft);
  padding: 32px 28px;
  transition: border-color .25s var(--ease), transform .25s var(--ease);
}
.card:hover{ border-color: var(--color-line); transform: translateY(-2px); }
.card .icon{ width:34px; height:34px; color: var(--color-gold); margin-bottom: 18px; }
.card h3{ margin-bottom: 10px; }
.card p{ margin:0; font-size: 0.92rem; }
.card .num{ font-family: var(--font-display); font-size: 0.75rem; color: var(--color-gold-deep); letter-spacing:.12em; margin-bottom:14px; display:block;}

.feature-list{ list-style:none; margin: 18px 0 0; padding:0; display:flex; flex-direction:column; gap:10px; }
.feature-list li{ display:flex; align-items:flex-start; gap:10px; font-size:0.86rem; color: var(--color-ink); }
.icon-sm{ width:15px; height:15px; color: var(--color-gold); flex-shrink:0; margin-top:2px; }
.icon-arrow{ width:14px; height:14px; vertical-align:middle; margin-left:2px; }

.section-head{ max-width: 620px; margin-bottom: 56px; }
.section-head h2{ margin-top: 14px; }

/* ---------- values / about ---------- */
.split{ display:grid; gap: 56px; grid-template-columns: 1fr; align-items:center; }
@media (min-width: 900px){ .split{ grid-template-columns: 1.1fr 0.9fr; } }
.split-figure{ position:relative; aspect-ratio: 4/5; background: var(--color-bg-panel); border:1px solid var(--color-line-soft); display:flex; align-items:center; justify-content:center; }
.split-figure img{ height: 30%; width:auto; opacity:0.9; }

/* ---------- vehicle showcase ---------- */
.section--alt{
  background-color: var(--color-bg-alt);
  background-image: repeating-linear-gradient(135deg, rgba(199,162,74,0.035) 0px, rgba(199,162,74,0.035) 1px, transparent 1px, transparent 34px);
}
.vehicle-frame{ position:relative; border:1px solid var(--color-line-soft); background: var(--color-bg-panel); padding: 36px 28px 28px; }
.vehicle-frame--photo{ padding:0; overflow:hidden; aspect-ratio: 1285 / 832; }
.vehicle-photo{ display:block; width:100%; height:100%; object-fit:cover; }
.vehicle-frame .corner{ position:absolute; width:24px; height:24px; pointer-events:none; }
.corner--tl{ top:-1px; left:-1px; border-top:2px solid var(--color-gold); border-left:2px solid var(--color-gold); }
.corner--tr{ top:-1px; right:-1px; border-top:2px solid var(--color-gold); border-right:2px solid var(--color-gold); }
.corner--bl{ bottom:-1px; left:-1px; border-bottom:2px solid var(--color-gold); border-left:2px solid var(--color-gold); }
.corner--br{ bottom:-1px; right:-1px; border-bottom:2px solid var(--color-gold); border-right:2px solid var(--color-gold); }
.vehicle-illustration{ display:flex; align-items:center; justify-content:center; }
.vehicle-illustration svg{ width:100%; max-width:420px; height:auto; }
.vehicle-caption{ text-align:center; font-size:0.72rem; letter-spacing:.05em; text-transform:uppercase; color: var(--color-ink-dim); margin: 18px 0 0; }
.spec-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap:1px; background: var(--color-line-soft); border:1px solid var(--color-line-soft); margin-top: 28px; }
.spec-item{ background: var(--color-bg); padding: 18px 20px; display:flex; flex-direction:column; gap:6px; }
.spec-label{ font-size:0.7rem; letter-spacing:.08em; text-transform:uppercase; color: var(--color-gold-deep); }
.spec-value{ font-family: var(--font-display); font-weight:600; font-size:1.05rem; color: var(--color-ivory); }

.pillars{ display:grid; gap: 1px; background: var(--color-line-soft); border:1px solid var(--color-line-soft); margin-top: 8px; }
.pillars .pillar{ background: var(--color-bg); padding: 26px 4px; }
.pillars .pillar h3{ font-size:0.98rem; }
.pillars .pillar p{ font-size: 0.86rem; margin:0; }
@media (min-width: 720px){ .pillars{ grid-template-columns: repeat(3,1fr); } }

/* ---------- coverage / CTA band ---------- */
.band{
  background: linear-gradient(135deg, var(--color-bg-alt), var(--color-bg) 70%);
  border-top: 1px solid var(--color-line-soft); border-bottom: 1px solid var(--color-line-soft);
  padding: 72px 0;
}
.band-inner{ display:flex; flex-direction:column; gap: 28px; align-items:flex-start; justify-content:space-between; }
@media (min-width:900px){ .band-inner{ flex-direction:row; align-items:center; } }
.band h2{ max-width: 460px; }

/* ---------- footer ---------- */
.site-footer{ padding: 64px 0 32px; border-top:1px solid var(--color-line-soft); }
.footer-grid{ display:grid; gap: 40px; grid-template-columns: 1fr; margin-bottom: 48px; }
@media (min-width: 800px){ .footer-grid{ grid-template-columns: 1.3fr 1fr 1fr 1fr; } }
.footer-grid h4{ font-size: 0.78rem; letter-spacing:.1em; text-transform:uppercase; color: var(--color-gold); margin-bottom: 18px; }
.footer-grid p, .footer-grid a{ font-size: 0.88rem; color: var(--color-ink); display:block; margin-bottom: 10px; }
.footer-grid a:hover{ color: var(--color-gold); }
.footer-brand img{ height: 34px; margin-bottom: 16px; }
.footer-brand p{ max-width: 280px; font-size:0.85rem; }
.footer-bottom{ display:flex; flex-direction:column; gap:12px; padding-top: 28px; border-top: 1px solid var(--color-line-soft); font-size: 0.78rem; color: var(--color-ink-dim); }
@media (min-width:700px){ .footer-bottom{ flex-direction:row; justify-content:space-between; } }
.placeholder-note{ color: var(--color-gold-deep); }

/* ---------- contact page ---------- */
.contact-hero{ padding: 48px 0 8px; }
.contact-hero h1{ font-family: var(--font-body); font-size: 0.95rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color: var(--color-gold); margin-bottom: 0; }
.quick-actions{ display:grid; gap: 14px; grid-template-columns: repeat(2,1fr); margin: 30px 0 8px; }
@media (min-width:640px){ .quick-actions{ grid-template-columns: repeat(4,1fr); } }
.quick-actions a{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  text-align:center; padding: 22px 10px; border:1px solid var(--color-line-soft);
  background: var(--color-bg-panel); font-size: 0.78rem; font-weight:700; letter-spacing:.03em;
  transition: border-color .25s var(--ease), transform .2s var(--ease);
}
.quick-actions a:hover{ border-color: var(--color-gold); transform: translateY(-2px); }
.quick-actions svg{ width: 24px; height:24px; color: var(--color-gold); }

.contact-layout{ display:grid; gap: 56px; grid-template-columns: 1fr; margin-top: 64px;}
@media (min-width: 980px){ .contact-layout{ grid-template-columns: 1fr 1fr; } }

.form-grid{ display:grid; gap: 18px; grid-template-columns: 1fr 1fr; }
.form-grid .full{ grid-column: 1 / -1; }
@media (max-width: 560px){ .form-grid{ grid-template-columns: 1fr; } }

.field label{ display:block; font-size:0.76rem; letter-spacing:.06em; text-transform:uppercase; color: var(--color-ink-dim); margin-bottom: 8px; }
.field input, .field select, .field textarea{
  width:100%; height:48px; box-sizing:border-box; background: var(--color-bg-panel); border: 1px solid var(--color-line-soft);
  color: var(--color-ivory); padding: 0 14px; font-family: var(--font-body); font-size: 0.92rem;
  transition: border-color .2s var(--ease);
}
.field input[type="date"], .field input[type="time"]{ padding-right: 8px; }
.field input[type="date"]::-webkit-calendar-picker-indicator,
.field input[type="time"]::-webkit-calendar-picker-indicator{
  padding: 0; margin: 0; width: 18px; height: 18px; filter: invert(0.7);
}
.field input:focus, .field select:focus, .field textarea:focus{ border-color: var(--color-gold); outline:none; }
.field textarea{ height:auto; padding: 13px 14px; resize: vertical; min-height: 96px; }
.form-note{ font-size: 0.78rem; color: var(--color-ink-dim); margin-top: 14px; }
.form-status{ font-size: 0.85rem; margin-top: 14px; min-height: 1.2em; }
.form-status.ok{ color: var(--color-gold); }

.info-block{ border-left: 1px solid var(--color-line); padding-left: 28px; }
.info-row{ display:flex; gap:14px; margin-bottom: 22px; align-items:flex-start; }
.info-row svg{ width:20px; height:20px; color: var(--color-gold); flex-shrink:0; margin-top:3px; }
.info-row h3{ font-size:0.9rem; margin-bottom:2px; }
.info-row p{ margin:0; font-size:0.88rem; }

/* generic */
.mt-lg{ margin-top: 64px; }
.text-center{ text-align:center; }
.stack{ display:flex; flex-direction:column; gap:8px; }