@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@300;400;500;700&family=Roboto:ital,wght@0,700;0,900;1,900&display=swap');

:root{ --bg:#0a0b0d; --ink:#f5f6f8; --muted:#b9bdc6; --panel:#111317;
  --accent:#ffbf2e; --link:#ffffff; --w:1200px; }

/* Base */
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font:16px/1.5 'Archivo',ui-sans-serif,system-ui,-apple-system,Segoe UI,Inter,Roboto,Helvetica,Arial;color:var(--ink);background:var(--bg)}
a{color:var(--link);text-decoration:none}
.container{width:min(92%,var(--w));margin:0 auto}

/* Typography: Roboto on headers, nav, CTAs (logo font unchanged via .brand-name rule) */
h1,h2,h3,h4,h5,.display,.kicker,.nav,.navlink,.btn-outline,.btn{font-family:'Roboto',system-ui,-apple-system,Segoe UI,Helvetica,Arial,sans-serif}

/* Header */
.site-header{position:fixed;top:0;left:0;right:0;z-index:50;background:transparent;transition:background .2s,border-color .2s}
.site-header.solid{background:rgba(0,0,0,.92);border-bottom:1px solid rgba(255,255,255,.08)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:.9rem 0}
.nav-left{display:flex;align-items:center;gap:3rem}
.brand-name{display:inline-grid;grid-auto-rows:1fr;line-height:.9;font-family:'Roboto',system-ui;font-style:italic;font-weight:900;letter-spacing:.02em;margin-right:1rem}
.brand-name span{font-size:1.5rem}
.navlink{position:relative;font-weight:900;text-transform:uppercase;background-image:linear-gradient(90deg,var(--accent),var(--accent));background-size:0% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:#fff;transition:background-size .25s}
.navlink:hover{background-size:100% 100%;-webkit-text-fill-color:transparent}
.nav-right{display:flex;align-items:center;gap:1rem}
.btn-outline{border:1px solid rgba(255,255,255,.35);padding:.55rem 1rem;border-radius:0;font-weight:900;text-transform:uppercase;background-image:linear-gradient(90deg,var(--accent),var(--accent));background-size:0% 100%;background-repeat:no-repeat;background-position:left top;transition:background-size .25s,color .2s,border-color .2s}
.btn-outline:hover{background-size:100% 100%;color:#111;border-color:var(--accent)}
.divider{opacity:.3;margin:0 .2rem}
.lang{display:flex;align-items:center;gap:.4rem;opacity:.95}
.lang img.flag{width:18px;height:12px;object-fit:cover;border:1px solid #333}
.hamburger{display:none;border:1px solid rgba(255,255,255,.35);background:transparent;width:40px;height:36px}

/* Mobile nav tweaks */
@media (max-width:980px){
  .nav-left .navlink{display:none}
  .hamburger{display:block}
  .brand-name span{font-size:1.25rem}
  .btn-outline{padding:.5rem .8rem}
}

/* Drawer */
.drawer{position:fixed;inset:0 0 0 auto;width:min(82%,360px);background:#0f1115;transform:translateX(100%);transition:transform .25s ease;z-index:10000;pointer-events:none;opacity:0}
.drawer.open{transform:translateX(0);pointer-events:auto;opacity:1}
.drawer .head{display:flex;align-items:center;justify-content:space-between;padding:1rem;border-bottom:1px solid rgba(255,255,255,.08)}
.drawer a{display:block;padding:1rem;border-bottom:1px solid rgba(255,255,255,.06);text-transform:uppercase}
.drawer .btn-outline.drawer-cta{display:block;margin:0;padding:1rem;width:100%;text-align:left;text-transform:uppercase;background:transparent;border:0;border-bottom:1px solid rgba(255,255,255,.06);border-radius:0;color:inherit;font-weight:inherit}
.drawer .btn-outline.drawer-cta:hover{background:rgba(255,255,255,.04);color:inherit}

/* Hero slider */
.hero{position:relative}
.slider{position:relative;height:100vh;max-height:920px;overflow:hidden;cursor:grab}
@media (max-width:640px){ .slider{height:92vh} }
.slider.dragging{cursor:grabbing}
.slide{position:absolute;inset:0;display:grid;place-items:end start;transition:transform .25s;will-change:transform;visibility:hidden}
.slide.active{visibility:visible}
.bg{position:absolute;inset:0;background:#000 center/cover no-repeat;pointer-events:none}
.bg.hero1{background-image:url("assets/images/hero/slide-1.webp")}
.bg.hero2{background-image:url("assets/images/hero/slide-2.webp")}
.bg.hero3{background-image:url("assets/images/hero/slide-3.webp")}
.slide::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.45),rgba(0,0,0,.2))}
.hero-copy{position:relative;padding:0 0 clamp(3rem,8vw,6rem) clamp(1rem,6vw,3rem);max-width:900px}
.kicker{font-weight:800;letter-spacing:.08em}
.display{font-size:clamp(2.2rem,6.2vw,4.2rem);font-weight:1000;letter-spacing:.02em;line-height:1.05;text-transform:uppercase}
.dots{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);display:flex;gap:.6rem}
.dot{width:36px;height:6px;border-radius:0;background:rgba(255,255,255,.35);cursor:pointer}
@media (max-width:640px){ .dot{width:28px;height:6px} }
.dot.active{background:var(--accent)}

/* Intro band */
.band{background:#fff;color:#0b0c0f}
.band .wrap{display:grid;grid-template-columns:1fr 1fr;gap:2rem;padding:clamp(2rem,5vw,4rem) 0}
@media (max-width:900px){.band .wrap{grid-template-columns:1fr}}
.band h2{font-size:clamp(1.6rem,4vw,2.4rem);text-transform:uppercase;font-weight:1000;margin:0}
.band p{font-size:1.1rem;color:#1f242b}

/* Feature splits (30/70) */
.split{display:grid;grid-template-columns:minmax(260px,30%) minmax(0,70%)}
.split .left{background:#000;padding:clamp(2rem,6vw,4rem);display:grid;align-content:center}
.split .left .eyebrow{font-weight:900;letter-spacing:.08em;color:#d7d9df;margin-bottom:.5rem}
.split .left h3{font-size:clamp(1.8rem,4.6vw,3.2rem);font-weight:1000;text-transform:uppercase;margin:.3rem 0 1rem}
.split .left p{color:#cfd3db;max-width:50ch}
.split .right{min-height:72vh;background:#0b0c0f center/cover no-repeat}
.split .right.ph1{background-image:url("assets/images/models/icon-dark.webp")}
.split .right.ph2{background-image:url("assets/images/models/nightshift.webp")}
.split .right.ph3{background-image:url("assets/images/models/full-throttle.webp")}
@media (max-width:980px){.split{grid-template-columns:1fr}.split .right{min-height:56vh}}

/* Discover link underline under TEXT, center-out */
.split .left{display:grid}
.left .more{justify-self:start;width:max-content}
.more{position:relative;display:inline-block;padding:.2rem 0;font-weight:900}
.more::after{content:"";position:absolute;left:50%;bottom:0;height:2px;width:100%;background:#fff;transform:translateX(-50%) scaleX(0);transform-origin:center;transition:transform .25s}
.more:hover::after{transform:translateX(-50%) scaleX(1)}

/* Newsletter */
.newsletter{background:#1a1c20;color:#e9ecf3;border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06)}
.newsletter .wrap{display:grid;grid-template-columns:1.2fr 1fr;gap:2rem;align-items:center;padding:clamp(2rem,5vw,4rem) 0}
@media (max-width:800px){ .newsletter .wrap{grid-template-columns:1fr} }
.newsletter h4{margin:0 0 .6rem;font-size:clamp(1.2rem,3vw,1.6rem);text-transform:uppercase;font-weight:1000}
.field{display:flex;align-items:center;gap:.8rem;border-bottom:2px solid rgba(255,255,255,.5);padding:.5rem 0}
.field input{flex:1;background:transparent;border:0;outline:0;color:#fff;padding:.6rem 0}
.btn{display:inline-grid;place-items:center;padding:.75rem 1.2rem;border-radius:0;font-weight:900;background:#fff;color:#000;background-image:linear-gradient(90deg,var(--accent),var(--accent));background-size:0% 100%;background-repeat:no-repeat;background-position:left top;transition:background-size .25s,color .2s}
.btn:hover{background-size:100% 100%;color:#111}

/* Contact section w/ background */
.contact-sec{position:relative;padding:clamp(2rem,6vw,4rem) 0;border-top:1px solid rgba(255,255,255,.06)}
.contact-sec::before{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.55),rgba(0,0,0,.55)),url("assets/images/sections/contact-bg.webp") center/cover no-repeat;z-index:0}
.contact-sec .container{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center}
.contact-sec h2{margin:0 0 1rem;text-transform:uppercase;text-align:center}
.contact-form{width:100%;max-width:480px;display:grid;gap:.75rem}
.contact-form .row{display:flex;flex-direction:column;gap:.75rem}
.contact-form input,.contact-form textarea{background:#0b0d11;border:0px solid rgba(255,255,255,.15);color:#fff;padding:.75rem;width:100%;display:block}
.contact-form button.btn-outline{justify-self:center;padding:1.1rem 2.6rem;font-size:1.1rem;letter-spacing:.02em}

/* Footer */
.footer-slim{padding:2rem 0 3rem}
.foot-grid{display:grid;grid-template-columns:1fr auto;align-items:center;gap:1rem}
.legal{opacity:.8}
.social-right{display:flex;gap:.8rem;justify-self:end}
.social-right a{display:inline-flex;width:32px;height:32px;align-items:center;justify-content:center;background:transparent;border:0}
.social-right img{width:32px;height:32px;object-fit:contain;display:block}

/* Reveal */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s,transform .6s}
.reveal.in{opacity:1;transform:none}

/* Scroll lock */
html.no-scroll{overflow:hidden;height:100%}
body.scroll-fix{position:fixed;width:100%}

/* A11y */
:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(255,210,74,.55)}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* === Header letter-spacing controls === */
:root{
  --ls-h1: 0.12em;   /* hero .display uses this */
  --ls-h2: 0.12em;
  --ls-h3: 0.12em;
  --ls-h4: 0.03em;
  --ls-kicker: 0.10em; /* small all-caps pre-title */
}

/* Apply to headings (does NOT touch the logo) */
h1, .display { letter-spacing: var(--ls-h1); }
h2            { letter-spacing: var(--ls-h2); }
h3            { letter-spacing: var(--ls-h3); }
h4            { letter-spacing: var(--ls-h4); }
.kicker       { letter-spacing: var(--ls-kicker); }

/* Letter-spacing controls */
:root{
  --ls-nav: 0.12em;   /* nav links */
  --ls-cta: 0.12em;   /* NAV CTA */
}

/* Apply */
.navlink{ letter-spacing: var(--ls-nav); }
.site-header .btn-outline{ letter-spacing: var(--ls-cta); }          /* desktop */
.drawer .btn-outline.drawer-cta{ letter-spacing: var(--ls-cta); }    /* mobile drawer */

/* allow vertical scroll on hero while swiping horizontally */
.slider{ touch-action: pan-y; }

/* force hamburger on mobile; hide CTA/lang; remove button border */
@media (max-width:980px){
  .site-header .nav-right > .btn-outline,
  .site-header .nav-right > .divider,
  .site-header .nav-right > .lang{ display:none !important; }
  .hamburger{
    display:inline-block !important;
    position:relative; width:44px; height:36px;
    border:0; background:transparent; cursor:pointer; z-index:10001;
  }
}
/* draw the 3 bars (works even if inner <span> missing) */
.hamburger span,.hamburger::before,.hamburger::after{
  content:""; position:absolute; left:8px; right:8px; height:2px; background:#fff;
}
.hamburger::before{ top:10px } .hamburger span{ top:17px } .hamburger::after{ top:24px }


.footer-slim{position:relative;background:#0a0b0d;overflow:hidden;padding:2rem 0 3rem}
.foot-grid{position:relative;z-index:1}

.footer-watermark{position:absolute;inset:0;z-index:0;pointer-events:none;user-select:none}
.footer-watermark svg{width:100%;height:100%}
.footer-watermark text{
  font-family:'Roboto',system-ui;font-weight:900;font-style:italic;
  text-transform:uppercase;letter-spacing:.08em;
  fill:rgba(255,255,255,.06);
  font-size:clamp(48px,12vw,200px);
}

/* Input focus: no highlight */
input, textarea, select { outline:0; box-shadow:none }
input:focus, textarea:focus, select:focus { outline:0; box-shadow:none }
input:focus-visible, textarea:focus-visible, select:focus-visible { outline:0; box-shadow:none }

/* Remove old inline field style if present */
.field{border:0 !important; padding:0 !important}

/* Newsletter form vertical stack */
.newsletter form{ display:grid; gap:1rem }
.newsletter form .btn-outline{ justify-self:start }

/* Inputs styled like DISCOVER MORE (center-out underline) */
.nl-field{ position:relative }
.nl-field input{
  width:100%;
  background:transparent;
  border:0;
  color:#fff;
  padding:.6rem 0;
  /* animated underline */
  background-image:linear-gradient(#fff,#fff);
  background-repeat:no-repeat;
  background-position:50% 100%;
  background-size:0% 2px;
  transition:background-size .25s ease;
}
.nl-field:hover input,
.nl-field:focus-within input{ background-size:100% 2px }

/* Contact form fields get same animation */
.contact-form input,
.contact-form textarea{
  border:0 !important;
  background:#0b0d11;
  color:#fff;
  padding:.75rem;
  background-image:linear-gradient(#fff,#fff);
  background-repeat:no-repeat;
  background-position:50% 100%;
  background-size:0% 2px;
  transition:background-size .25s ease;
}
.contact-form input:hover,
.contact-form input:focus,
.contact-form textarea:hover,
.contact-form textarea:focus{
  background-size:100% 2px;
}

/* Subscribe button matches nav CTA (uses .btn-outline already) */

/* kill focus highlights */
input, textarea { outline:0; box-shadow:none; }
input:focus, textarea:focus { outline:0; box-shadow:none; }

/* newsletter input: hover-only underline (no focus) */
.nl-field input{
  width:100%;
  background:transparent;
  border:0;
  color:#fff;
  padding:.6rem 0;
  background-image:linear-gradient(#fff,#fff);
  background-repeat:no-repeat;
  background-position:50% 100%;
  background-size:0% 2px;         /* default: hidden */
  transition:background-size .25s ease;
}
.nl-field:hover input{ background-size:100% 2px; }  /* hover only */

/* contact form fields: hover-only underline (no focus) */
.contact-form input,
.contact-form textarea{
  border:0 !important;
  background:#0b0d11;
  color:#fff;
  padding:.75rem;
  background-image:linear-gradient(#fff,#fff);
  background-repeat:no-repeat;
  background-position:50% 100%;
  background-size:0% 2px;
  transition:background-size .25s ease;
}
.contact-form input:hover,
.contact-form textarea:hover{ background-size:100% 2px; }

/* optional: remove mobile tap highlight */
*{ -webkit-tap-highlight-color: transparent; }

/* Fields: use Roboto like CTAs, same weight, always uppercase, no focus glow */
input, textarea, select{
  font-family:'Roboto',system-ui,-apple-system,Segoe UI,Helvetica,Arial,sans-serif;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.06em;
  outline:0; box-shadow:none;
  -webkit-tap-highlight-color:transparent;
}
input:focus, textarea:focus, select:focus{ outline:0; box-shadow:none }

/* Newsletter email: ALWAYS underlined */
.nl-field input{
  background-image:linear-gradient(#fff,#fff);
  background-repeat:no-repeat;
  background-position:50% 100%;
  background-size:100% 2px !important;  /* force visible */
}

/* Always-underlined CONTACT fields (match newsletter behavior now) */
.contact-form input,
.contact-form textarea{
  border:0 !important;
  background:#0b0d11;
  color:#fff;
  padding:.75rem;
  background-image:linear-gradient(#fff,#fff);
  background-repeat:no-repeat;
  background-position:50% 100%;
  background-size:100% 2px !important;  /* always visible */
  outline:0; box-shadow:none;
  font-family:'Roboto',system-ui,-apple-system,Segoe UI,Helvetica,Arial,sans-serif;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.06em;
}

/* Match placeholders to CTA typography */
.nl-field input::placeholder,
.contact-form input::placeholder,
.contact-form textarea::placeholder{
  font-family:'Roboto',system-ui,-apple-system,Segoe UI,Helvetica,Arial,sans-serif;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.06em;
  opacity:.7;
}
/* Remove underline from CONTACT fields only */
.contact-form input,
.contact-form textarea{
  background-image:none !important;
  background-size:0 0 !important;
}

/* If any older hover rule exists, neutralize it */
.contact-form input:hover,
.contact-form textarea:hover{
  background-image:none !important;
  background-size:0 0 !important;
}

/* Brand logo hover: switch to CTA accent */
.brand-name span{
  color:#fff;
  transition:color .25s ease;
}
.brand-name:hover span{
  color:var(--accent);
}
/* header hides on scroll-down (desktop only) */
.site-header{ transition: background .2s, border-color .2s, transform .2s ease; }
.site-header.hide{ transform: translateY(-110%); }