/* ================================================================
   Honda Goldwing Trikes International — shared styles
   Light "showroom" theme · responsive · no dependencies
   ================================================================ */

:root{
  --base:#F4F5F7; --panel:#FFFFFF; --mist:#EAECEF;
  --ink:#14161A; --ink2:#2A2D33; --slate:#5B616B;
  --red:#9E1B2F; --red2:#C32A40;
  --gold:#A87A1E; --gold2:#C99A2E;
  --line:rgba(20,22,26,0.10); --line2:rgba(20,22,26,0.16);
  --photo:linear-gradient(150deg,#e6ebf1 0%,#ccd4dc 48%,#aab2bc 100%);
  --steel:linear-gradient(180deg,#6b7079 0%,#23262c 52%,#6b7079 100%);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--base); color:var(--ink);
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
a{color:inherit}
img{max-width:100%; display:block}
.display{font-family:'Oswald','Arial Narrow',sans-serif}
.steel{background-image:var(--steel); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent}
.container{max-width:1180px; margin:0 auto; padding:0 20px}
@media(min-width:768px){.container{padding:0 32px}}

/* ---------- buttons ---------- */
.btn{font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:.09em;
  font-weight:600; font-size:15px; padding:15px 28px; border-radius:8px;
  display:inline-flex; align-items:center; gap:9px; text-decoration:none;
  border:1px solid transparent; cursor:pointer; transition:transform .2s,box-shadow .2s,filter .2s,background .2s; white-space:nowrap}
.btn svg{width:17px;height:17px}
.btn-red{background:linear-gradient(180deg,var(--red2),var(--red)); color:#fff; border-color:rgba(0,0,0,.06)}
.btn-red:hover{transform:translateY(-2px); box-shadow:0 16px 30px -16px rgba(158,27,47,.55); filter:brightness(1.05)}
.btn-outline{background:transparent; color:var(--ink); border:1.5px solid var(--ink)}
.btn-outline:hover{background:rgba(20,22,26,.04); transform:translateY(-2px)}
.btn-white{background:#fff; color:var(--red); font-weight:700}
.btn-white:hover{transform:translateY(-2px); box-shadow:0 16px 30px -16px rgba(0,0,0,.4)}
.btn-ghost-w{background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,.85)}
.btn-sm{font-size:13px; padding:12px 20px}

/* ---------- header / nav ---------- */
.site-header{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.93);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
.nav-inner{display:flex; align-items:center; justify-content:space-between; height:74px}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; line-height:1}
.brand .wing{width:30px; height:auto}
.brand-main{font-family:'Oswald',sans-serif; font-weight:700; font-size:16px;
  letter-spacing:.13em; text-transform:uppercase; line-height:1}
.brand-sub{font-family:'Oswald',sans-serif; font-weight:600; font-size:10px; color:var(--gold);
  letter-spacing:.4em; text-transform:uppercase; line-height:1; margin-top:4px}
.nav-links{display:none; align-items:center; gap:30px}
.nav-links a{font-family:'Oswald',sans-serif; font-size:13px; font-weight:600; letter-spacing:.11em;
  text-transform:uppercase; color:var(--ink2); text-decoration:none; transition:color .2s}
.nav-links a:hover{color:var(--red)}
.nav-right{display:none; align-items:center; gap:12px}
.hamburger{display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px;
  border-radius:8px; background:var(--mist); border:1px solid var(--line); color:var(--ink); cursor:pointer}
.hamburger svg{width:20px;height:20px}
.mobile-menu{display:none; background:#fff; border-top:1px solid var(--line); padding:6px 20px 18px}
.mobile-menu.open{display:block}
.mobile-menu a{display:block; font-family:'Oswald',sans-serif; text-transform:uppercase; font-size:15px;
  letter-spacing:.09em; color:var(--ink); text-decoration:none; padding:13px 0; border-bottom:1px solid var(--line)}
.mobile-menu .btn{margin-top:16px; width:100%; justify-content:center}
@media(min-width:1024px){
  .nav-links{display:flex} .nav-right{display:flex} .hamburger{display:none}
}

/* ---------- image zones (your photos go here) ---------- */
.imgzone{width:100%; background:var(--photo); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; overflow:hidden; position:relative}
.imgzone .ph{display:flex; flex-direction:column; align-items:center; text-align:center;
  color:rgba(20,22,26,.34); padding:16px}
.imgzone .ph svg{width:40px;height:40px}
.imgzone .ph .t{font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:.18em;
  font-weight:600; font-size:12px; margin-top:12px}
.imgzone .ph .s{font-size:11px; margin-top:2px}
.hero-img{height:60vh; min-height:340px; max-height:620px}
.band-img{height:44vh; min-height:300px; border-radius:12px}

/* ---------- hero headline ---------- */
.hero-head{background:var(--panel); border-bottom:1px solid var(--line)}
.hero-head .inner{max-width:920px; margin:0 auto; text-align:center; padding:64px 20px}
.eyebrow{display:inline-flex; align-items:center; gap:12px; color:var(--gold);
  font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:.32em; font-size:12px; font-weight:600}
.eyebrow i{display:block; width:30px; height:2px; background:var(--gold)}
h1.hero-title{font-family:'Oswald',sans-serif; text-transform:uppercase; font-weight:700;
  letter-spacing:.005em; line-height:.98; margin:20px 0 0; font-size:clamp(40px,9vw,76px); color:var(--ink)}
.hero-title .accent{color:var(--red)}
.rule{width:80px; height:3px; background:linear-gradient(90deg,var(--red),var(--red2)); margin:24px auto 8px}
.hero-sub{color:var(--slate); font-size:clamp(15px,2.4vw,18px); margin-top:24px}
.hero-btns{display:flex; flex-direction:column; align-items:center; gap:16px; margin-top:40px}
@media(min-width:640px){.hero-btns{flex-direction:row; justify-content:center}}
.hero-note{display:flex; align-items:center; justify-content:center; gap:8px; color:var(--slate);
  font-size:13px; margin-top:32px}
.hero-note svg{width:15px;height:15px;color:var(--gold)}

/* ---------- founding strip ---------- */
.stats{background:var(--mist); border-bottom:1px solid var(--line)}
.stats-grid{display:grid; grid-template-columns:repeat(2,1fr)}
@media(min-width:768px){.stats-grid{grid-template-columns:repeat(4,1fr)}}
.stat{text-align:center; padding:32px 12px; border-right:1px solid var(--line)}
.stat:last-child{border-right:none}
@media(max-width:767px){.stat:nth-child(2){border-right:none}}
.stat-n{font-family:'Oswald',sans-serif; font-weight:700; font-size:clamp(26px,5vw,38px)}
.stat-l{color:var(--slate); font-size:11px; font-weight:500; margin-top:8px; line-height:1.35}

/* ---------- section heads ---------- */
.section{padding:80px 0 40px}
.sec-head{text-align:center; margin-bottom:54px}
.sec-eyebrow{font-family:'Oswald',sans-serif; color:var(--gold); text-transform:uppercase;
  letter-spacing:.28em; font-size:12px; font-weight:600}
.sec-title{font-family:'Oswald',sans-serif; color:var(--ink); text-transform:uppercase; font-weight:700;
  font-size:clamp(30px,6vw,48px); margin:12px 0 0}

/* ---------- feature cards ---------- */
.feature-grid{display:grid; grid-template-columns:1fr; gap:24px}
@media(min-width:600px){.feature-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.feature-grid{grid-template-columns:repeat(4,1fr)}}
.card{display:flex; flex-direction:column; background:var(--panel); border:1px solid var(--line);
  border-radius:12px; padding:28px; text-decoration:none; transition:transform .25s,border-color .25s,box-shadow .25s}
.card:hover{transform:translateY(-6px); border-color:rgba(158,27,47,.4); box-shadow:0 22px 44px -24px rgba(20,22,26,.35)}
.card-ic{width:54px; height:54px; border-radius:10px; background:var(--mist);
  display:flex; align-items:center; justify-content:center; margin-bottom:24px}
.card-ic svg{width:26px;height:26px;color:var(--red)}
.card-eyebrow{font-family:'Oswald',sans-serif; color:var(--gold); text-transform:uppercase;
  letter-spacing:.24em; font-size:11px; font-weight:600; margin-bottom:8px}
.card h3{font-family:'Oswald',sans-serif; color:var(--ink); text-transform:uppercase; font-weight:600;
  font-size:24px; margin:0 0 12px}
.card p{color:var(--slate); font-size:14px; margin:0 0 24px; flex:1}
.card-link{font-family:'Oswald',sans-serif; color:var(--ink); text-transform:uppercase; font-weight:600;
  letter-spacing:.07em; font-size:14px; display:inline-flex; align-items:center; gap:8px}
.card-link svg{width:16px;height:16px; transition:transform .25s}
.card:hover .card-link svg{transform:translateX(5px)}

/* ---------- panel / values ---------- */
.panel-box{background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:56px 28px}
@media(min-width:768px){.panel-box{padding:56px}}
.value-grid{display:grid; grid-template-columns:1fr; gap:40px}
@media(min-width:768px){.value-grid{grid-template-columns:repeat(3,1fr)}}
.value{text-align:center; display:flex; flex-direction:column; align-items:center}
.value-ic{width:64px; height:64px; border-radius:50%; background:var(--mist); border:1.5px solid var(--gold);
  display:flex; align-items:center; justify-content:center; margin-bottom:20px}
.value-ic svg{width:28px;height:28px;color:var(--red)}
.value h3{font-family:'Oswald',sans-serif; text-transform:uppercase; font-weight:600; letter-spacing:.1em;
  font-size:20px; margin:0 0 12px}
.value p{color:var(--slate); font-size:14px; margin:0}

/* ---------- gallery tiles ---------- */
.tile-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:16px}
@media(min-width:1024px){.tile-grid{grid-template-columns:repeat(4,1fr)}}
.tile{position:relative; aspect-ratio:4/5; border-radius:12px; overflow:hidden;
  background:var(--photo); border:1px solid var(--line); display:flex; align-items:flex-end;
  transition:transform .3s,box-shadow .3s}
.tile:hover{transform:scale(1.015); box-shadow:0 18px 36px -22px rgba(20,22,26,.4)}
.tile .ic{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:rgba(20,22,26,.28)}
.tile .ic svg{width:34px;height:34px}
.tile .cap{position:relative; width:100%; padding:12px; background:linear-gradient(180deg,transparent,rgba(255,255,255,.92));
  font-size:12px; font-weight:600; color:var(--ink2)}

/* ---------- store teaser ---------- */
.teaser{background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:48px 28px; text-align:center}
.teaser h3{font-family:'Oswald',sans-serif; text-transform:uppercase; font-weight:700; font-size:clamp(24px,5vw,34px); margin:0}
.teaser p{color:var(--slate); max-width:560px; margin:14px auto 26px}

/* ---------- CTA red band ---------- */
.cta-red{background:linear-gradient(120deg,var(--red),var(--red2)); border-radius:16px; overflow:hidden}
.cta-red .inner{padding:64px 28px; text-align:center; display:flex; flex-direction:column; align-items:center}
@media(min-width:768px){.cta-red .inner{padding:64px}}
.cta-red svg.pin{width:34px;height:34px;color:#fff;margin-bottom:20px}
.cta-red h2{font-family:'Oswald',sans-serif; text-transform:uppercase; font-weight:700; color:#fff;
  line-height:1.04; font-size:clamp(28px,6vw,48px); margin:0; max-width:760px}
.cta-red p{color:rgba(255,255,255,.92); max-width:620px; margin:20px 0 0; font-size:clamp(14px,2.4vw,17px)}
.cta-red .btns{display:flex; flex-direction:column; align-items:center; gap:16px; margin-top:36px}
@media(min-width:640px){.cta-red .btns{flex-direction:row}}

/* ---------- membership CTA strip ---------- */
.cta-strip{background:var(--panel); border:1px solid var(--line); border-radius:16px;
  display:flex; flex-direction:column; gap:24px; padding:40px 28px; align-items:flex-start}
@media(min-width:768px){.cta-strip{flex-direction:row; align-items:center; justify-content:space-between; padding:40px 48px}}
.cta-strip .left{display:flex; align-items:center; gap:20px}
.cta-strip .left>svg{width:40px;height:40px;color:var(--red);flex-shrink:0}
.cta-strip h3{font-family:'Oswald',sans-serif; text-transform:uppercase; font-weight:700; font-size:clamp(22px,4vw,30px); margin:0}
.cta-strip p{color:var(--slate); font-size:14px; margin:4px 0 0}

/* ---------- footer ---------- */
.site-footer{background:var(--panel); border-top:1px solid var(--line)}
.footer-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:32px; padding:56px 0 0}
@media(min-width:768px){.footer-grid{grid-template-columns:2fr 1fr 1fr 1fr}}
.f-about{grid-column:span 2}
@media(min-width:768px){.f-about{grid-column:span 1}}
.f-about p{color:var(--slate); font-size:14px; max-width:300px; margin:16px 0 0}
.f-social{display:flex; gap:12px; margin-top:20px}
.f-social a{width:38px;height:38px;border-radius:8px;background:var(--mist);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;color:var(--ink2);text-decoration:none}
.f-social a svg{width:17px;height:17px}
.f-col h4{font-family:'Oswald',sans-serif; color:var(--gold); text-transform:uppercase; letter-spacing:.16em;
  font-size:12px; font-weight:700; margin:0 0 16px}
.f-col ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:12px}
.f-col a{color:var(--slate); font-size:13px; text-decoration:none}
.f-col a:hover{color:var(--red)}
.f-bottom{display:flex; flex-direction:column; gap:12px; padding:24px 0 28px; margin-top:48px;
  border-top:1px solid var(--line)}
@media(min-width:768px){.f-bottom{flex-direction:row; align-items:center; justify-content:space-between}}
.f-bottom .c{color:var(--slate); font-size:12px}
.f-bottom .r{font-family:'Oswald',sans-serif; color:var(--gold); text-transform:uppercase; letter-spacing:.18em; font-size:12px; font-weight:600}

/* ================================================================
   FORM PAGES
   ================================================================ */
.page-head{background:var(--panel); border-bottom:1px solid var(--line); padding:48px 0 40px; text-align:center}
.page-head .eyebrow{justify-content:center}
.page-head h1{font-family:'Oswald',sans-serif; text-transform:uppercase; font-weight:700;
  font-size:clamp(32px,7vw,56px); margin:16px 0 0; color:var(--ink)}
.page-head p{color:var(--slate); max-width:640px; margin:14px auto 0}
.back-link{display:inline-flex; align-items:center; gap:8px; font-family:'Oswald',sans-serif;
  text-transform:uppercase; font-size:13px; font-weight:600; letter-spacing:.08em; color:var(--slate); text-decoration:none}
.back-link svg{width:15px;height:15px}
.back-link:hover{color:var(--red)}

.form-wrap{max-width:780px; margin:0 auto; padding:56px 20px 90px}
.activate-note{background:#FFF7E6; border:1px solid var(--gold); border-radius:10px; padding:16px 18px;
  font-size:13px; color:var(--ink2); margin-bottom:32px}
.activate-note b{color:var(--ink)}
fieldset.fs{border:1px solid var(--line); border-radius:12px; padding:26px; margin:0 0 22px; background:var(--panel)}
fieldset.fs legend{font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:.06em;
  font-weight:600; font-size:17px; color:var(--ink); padding:0 10px; display:flex; align-items:center; gap:8px}
fieldset.fs legend svg{width:18px;height:18px;color:var(--red)}
.field{margin-bottom:18px}
.field:last-child{margin-bottom:0}
.row{display:grid; grid-template-columns:1fr; gap:18px}
@media(min-width:600px){.row.two{grid-template-columns:1fr 1fr}}
label.lbl{display:block; font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:.05em;
  font-weight:600; font-size:12px; color:var(--ink2); margin-bottom:7px}
.req{color:var(--red); margin-left:3px}
input[type=text],input[type=email],input[type=tel],input[type=number],input[type=date],
input[type=file],select,textarea{
  width:100%; padding:12px 14px; border:1px solid var(--line2); border-radius:8px; background:#fff;
  font-family:'Inter',sans-serif; font-size:15px; color:var(--ink); transition:border-color .15s,box-shadow .15s}
textarea{min-height:110px; resize:vertical}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--red);
  box-shadow:0 0 0 3px rgba(158,27,47,.12)}
.hint{font-size:12px; color:var(--slate); margin-top:6px}
.check{display:flex; align-items:flex-start; gap:11px; padding:6px 0}
.check input{width:18px; height:18px; margin-top:3px; flex-shrink:0; accent-color:var(--red)}
.check label{font-size:14px; color:var(--ink2)}
.submit-row{margin-top:30px; display:flex; flex-direction:column; gap:14px; align-items:flex-start}
.form-foot{color:var(--slate); font-size:12px}
.honey{position:absolute; left:-9999px}

@media(prefers-reduced-motion:reduce){*{transition:none!important; scroll-behavior:auto}}