:root{--navy:#062B5B;--teal:#16B7B7;--aqua:#D9F7F7;--orange:#F9A826;--sand:#F7F2E8;--ink:#102033}
*{box-sizing:border-box}body{margin:0;font-family:Arial,Helvetica,sans-serif;color:var(--ink);line-height:1.6}a{text-decoration:none;color:inherit}
header{position:sticky;top:0;background:rgba(255,255,255,.97);border-bottom:1px solid #e8eef3;z-index:10}
.nav{max-width:1260px;margin:auto;display:flex;justify-content:space-between;align-items:center;padding:14px 24px}
.brand img{display:block;width:230px;max-width:42vw;height:auto}
.navlinks{display:flex;gap:28px;font-weight:800;color:var(--navy);font-size:15px;align-items:center}
.navlinks .nav-cta{background:var(--orange);padding:10px 16px;border-radius:999px;color:var(--navy)}
.hero{min-height:78vh;display:flex;align-items:center;background:linear-gradient(135deg,rgba(6,43,91,.92),rgba(22,183,183,.62));color:white}
.hero-inner{max-width:1180px;margin:auto;padding:82px 24px}.eyebrow{font-weight:900;letter-spacing:.18em;text-transform:uppercase;color:var(--orange);font-size:13px}
h1{font-size:clamp(48px,8vw,96px);line-height:.9;margin:14px 0 20px}h2{font-size:clamp(30px,4vw,48px);line-height:1.05;color:var(--navy);margin:0 0 18px}h3{color:var(--navy);margin:0 0 8px}
.hero p{font-size:20px;max-width:820px}.btn{display:inline-block;border-radius:999px;padding:14px 24px;margin:14px 10px 0 0;font-weight:900;background:var(--orange);color:var(--navy);border:0}.btn.secondary{background:transparent;color:white;border:2px solid rgba(255,255,255,.75)}
.section{max-width:1180px;margin:auto;padding:74px 24px}.section-intro{max-width:800px;margin-bottom:28px}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.grid.four{grid-template-columns:repeat(4,1fr)}
.card{border:1px solid #e5edf2;border-radius:22px;background:white;padding:28px;box-shadow:0 10px 24px rgba(6,43,91,.06)}.photo-card{height:250px;border-radius:24px;padding:24px;display:flex;align-items:flex-end;background:linear-gradient(135deg,var(--aqua),var(--sand));color:var(--navy);font-weight:900}.photo-card span{background:rgba(255,255,255,.85);padding:10px 14px;border-radius:999px}
.panel{background:var(--sand);border-radius:28px;padding:38px}.steps{counter-reset:step;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.step{background:var(--aqua);border:1px solid #b8ecec;border-radius:22px;padding:26px}.step:before{counter-increment:step;content:counter(step);display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:var(--navy);color:white;font-weight:900;margin-bottom:16px}
.coming-soon{max-width:820px;margin:auto;text-align:center;padding:100px 24px}.coming-soon h1{color:var(--navy);font-size:clamp(42px,7vw,78px)}.coming-soon .soon{color:var(--teal);font-weight:900;letter-spacing:.16em;text-transform:uppercase}
.cta{max-width:none;background:linear-gradient(135deg,var(--navy),#094a70);color:white;text-align:center}.cta h2{color:white}
.form{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:24px}.form input,.form select,.form textarea{width:100%;padding:15px;border:1px solid #d7e4eb;border-radius:12px;font-size:15px}.form textarea{grid-column:1/-1;min-height:150px}.full{grid-column:1/-1}.footer{background:#061b34;color:white}.footer-inner{max-width:1180px;margin:auto;padding:38px 24px;display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
@media(max-width:900px){.nav{display:block}.brand img{width:210px}.navlinks{margin-top:14px;flex-wrap:wrap;gap:14px}.grid,.grid.four,.steps,.form{grid-template-columns:1fr}}


/* FINAL NAV LOGO FIX */
.nav {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 10px 28px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  overflow: visible !important;
}

.brand {
  display: flex !important;
  align-items: center !important;
  width: auto !important;
  max-width: 240px !important;
  flex: 0 0 auto !important;
}

.brand img {
  height: 46px !important;
  width: auto !important;
  max-width: 220px !important;
  max-height: 46px !important;
  object-fit: contain !important;
  display: block !important;
}

.navlinks {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 22px !important;
  flex-wrap: nowrap !important;
  font-size: 14px !important;
}

.navlinks a {
  white-space: nowrap !important;
}

.navlinks .nav-cta {
  padding: 9px 15px !important;
  border-radius: 999px !important;
  background: var(--orange) !important;
}

@media(max-width:900px){
  .nav {
    display: block !important;
    padding: 12px 18px !important;
  }
  .brand {
    max-width: 220px !important;
  }
  .brand img {
    height: 42px !important;
    max-height: 42px !important;
    max-width: 200px !important;
  }
  .navlinks {
    margin-top: 12px !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    gap: 12px !important;
  }
}


/* CLEAN WHO WE SERVE LIST */
.serve-list {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 26px;
}

.serve-list span {
  display: inline-flex;
  align-items: center;
  background: #eefafa;
  color: var(--navy);
  border: 1px solid #cbeeee;
  border-radius: 999px;
  padding: 12px 18px;
  font-weight: 900;
  font-size: 15px;
}

@media(max-width:900px){
  .serve-list {
    gap: 10px;
  }
  .serve-list span {
    font-size: 14px;
    padding: 10px 14px;
  }
}


/* VERSION 6: CENTERED CONTENT + CONTACT UPDATE */
.section {
  max-width: 1160px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 44px !important;
  padding-right: 44px !important;
}

.hero-inner {
  max-width: 1040px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 44px !important;
  padding-right: 44px !important;
}

.section-intro {
  max-width: 850px !important;
}

.footer-inner {
  max-width: 1160px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 44px !important;
  padding-right: 44px !important;
  align-items: flex-start !important;
}

@media(max-width:900px){
  .section,
  .hero-inner,
  .footer-inner {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}


/* Version 7 polish */
.serve-grid{
 display:grid;
 grid-template-columns:repeat(3,1fr);
 gap:18px 28px;
 margin:36px 0 18px;
 max-width:900px;
}
.serve-grid div{
 padding:6px 0;
 font-weight:700;
 color:var(--navy);
 border-bottom:1px solid #e7eef5;
}
.serve-note{
 max-width:760px;
 margin:24px 0;
 color:#42546b;
}
.coming-soon{
 max-width:900px!important;
 margin:0 auto!important;
 padding:90px 40px!important;
 text-align:center!important;
}
.coming-soon p{
 max-width:760px;
 margin:0 auto 24px;
 line-height:1.7;
}
@media(max-width:900px){
 .serve-grid{grid-template-columns:1fr;}
}


/* Version 8 form updates */
.form-group label {
  font-weight: 800;
  color: var(--navy);
}

.checkbox-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px 18px;
  margin-top: 12px;
  padding: 20px;
  border: 1px solid #d7e4eb;
  border-radius: 14px;
  background: #ffffff;
}

.checkbox-grid label {
  font-weight: 600;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 8px;
}

.checkbox-grid input {
  width: auto !important;
}

@media(max-width:900px){
  .checkbox-grid {
    grid-template-columns: 1fr;
  }
}


/* Version 9 launch candidate polish */
.section {
  max-width: 1160px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 44px !important;
  padding-right: 44px !important;
}

.hero-inner {
  max-width: 1040px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 44px !important;
  padding-right: 44px !important;
}

.serve-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px 28px;
  margin:36px 0 18px;
  max-width:900px;
}

.serve-grid div{
  padding:8px 0;
  font-weight:800;
  color:var(--navy);
  border-bottom:1px solid #e7eef5;
}

.serve-note{
  max-width:760px;
  margin:24px 0;
  color:#42546b;
}

.coming-soon{
  max-width:900px !important;
  margin:0 auto !important;
  padding:96px 40px !important;
  text-align:center !important;
  min-height:560px;
}

.coming-soon h1{
  color:var(--navy) !important;
  font-size:clamp(54px,8vw,88px) !important;
  margin:18px 0 16px !important;
}

.coming-soon p{
  max-width:760px !important;
  margin:0 auto 22px !important;
  line-height:1.7 !important;
  font-size:18px;
}

.coming-soon .soon{
  color:var(--teal);
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.coming-soon .btn{
  margin-top:20px !important;
}

.footer-inner {
  max-width: 1160px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 44px !important;
  padding-right: 44px !important;
  align-items: flex-start !important;
}

@media(max-width:900px){
  .section,
  .hero-inner,
  .footer-inner {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  .serve-grid{
    grid-template-columns:1fr;
  }

  .coming-soon{
    padding:70px 24px !important;
  }
}


/* Version 10 polish and final form changes */
.coming-soon-centered {
  max-width: 900px !important;
  margin: 0 auto !important;
  padding: 100px 40px !important;
  text-align: center !important;
  min-height: 580px !important;
}

.coming-soon-centered h1 {
  color: var(--navy) !important;
  font-size: clamp(54px, 8vw, 88px) !important;
  margin: 18px auto 16px !important;
  text-align: center !important;
}

.coming-soon-centered p {
  max-width: 760px !important;
  margin: 0 auto 22px !important;
  line-height: 1.7 !important;
  font-size: 18px !important;
  text-align: center !important;
}

.coming-soon-centered .soon {
  color: var(--teal) !important;
  font-weight: 900 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
}

.coming-soon-centered .btn {
  margin: 22px auto 0 !important;
}

.form select {
  background-color: #ffffff;
}

@media(max-width:900px){
  .coming-soon-centered {
    padding: 70px 24px !important;
  }
}


/* FINAL KCA VERSION 1.0 FIXES */
.hero {
  background:
    linear-gradient(90deg, rgba(6,43,91,.86), rgba(6,43,91,.52), rgba(6,43,91,.18)),
    url("assets/hero-sunset.jpg") center center / cover no-repeat !important;
}

.hero-inner {
  max-width: 1040px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 44px !important;
  padding-right: 44px !important;
}

.section {
  max-width: 1160px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 44px !important;
  padding-right: 44px !important;
}

.serve-grid {
  display:grid !important;
  grid-template-columns:repeat(3,1fr) !important;
  gap:18px 28px !important;
  margin:36px 0 18px !important;
  max-width:900px !important;
}

.serve-grid div {
  padding:8px 0 !important;
  font-weight:800 !important;
  color:var(--navy) !important;
  border-bottom:1px solid #e7eef5 !important;
}

.serve-note {
  max-width:760px !important;
  margin:24px 0 !important;
  color:#42546b !important;
}

.center-page {
  max-width: 900px !important;
  margin: 0 auto !important;
  padding: 100px 40px !important;
  text-align: center !important;
  min-height: 580px !important;
}

.center-page h1 {
  color: var(--navy) !important;
  font-size: clamp(54px, 8vw, 88px) !important;
  margin: 18px auto 16px !important;
  text-align: center !important;
}

.center-page p {
  max-width: 760px !important;
  margin: 0 auto 22px !important;
  line-height: 1.7 !important;
  font-size: 18px !important;
  text-align: center !important;
}

.center-page .soon {
  color: var(--teal) !important;
  font-weight: 900 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
}

.center-page .btn {
  margin: 22px auto 0 !important;
}

.footer-inner {
  max-width: 1160px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 44px !important;
  padding-right: 44px !important;
  align-items: flex-start !important;
}

.form select {
  background-color: #ffffff !important;
}

@media(max-width:900px){
  .section,
  .hero-inner,
  .footer-inner {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  .serve-grid {
    grid-template-columns:1fr !important;
  }

  .center-page {
    padding:70px 24px !important;
  }

  .hero {
    background:
      linear-gradient(90deg, rgba(6,43,91,.88), rgba(6,43,91,.62)),
      url("assets/hero-sunset.jpg") center center / cover no-repeat !important;
  }
}


/* KCA Website Version 1.1 */
.about-hero {
  min-height: 70vh;
  display: flex;
  align-items: center;
  background:
    linear-gradient(90deg, rgba(6,43,91,.88), rgba(6,43,91,.56), rgba(6,43,91,.20)),
    url("assets/hero-sunset.jpg") center center / cover no-repeat;
  color: white;
}

.about-hero-inner {
  max-width: 1040px;
  margin: 0 auto;
  padding: 88px 44px;
}

.about-hero h1 {
  color: white;
  font-size: clamp(42px,7vw,82px);
  line-height: .95;
  margin: 14px 0 20px;
}

.about-hero p {
  max-width: 840px;
  font-size: 20px;
}

.center-page {
  max-width: 900px !important;
  margin: 0 auto !important;
  padding: 100px 40px !important;
  text-align: center !important;
  min-height: 580px !important;
}

.center-page h1 {
  color: var(--navy) !important;
  font-size: clamp(54px,8vw,88px) !important;
  margin: 18px auto 16px !important;
  text-align: center !important;
}

.center-page p {
  max-width: 760px !important;
  margin: 0 auto 22px !important;
  line-height: 1.7 !important;
  font-size: 18px !important;
  text-align: center !important;
}

.center-page .soon {
  color: var(--teal) !important;
  font-weight: 900 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
}

.center-page .btn {
  margin: 22px auto 0 !important;
}

@media(max-width:900px){
  .about-hero {
    min-height: auto;
    background:
      linear-gradient(90deg, rgba(6,43,91,.88), rgba(6,43,91,.62)),
      url("assets/hero-sunset.jpg") center center / cover no-repeat;
  }
  .about-hero-inner {
    padding: 70px 24px;
  }
  .center-page {
    padding: 70px 24px !important;
  }
}


/* KCA Website Version 1.2 product showcase */
.custom-showcase {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 58px !important;
  align-items: center !important;
  padding-top: 88px !important;
  padding-bottom: 88px !important;
}

.custom-showcase h1 {
  color: var(--navy) !important;
  font-size: clamp(42px, 5vw, 72px) !important;
  line-height: 1.02 !important;
  margin: 14px 0 24px !important;
}

.custom-copy p {
  max-width: 620px !important;
  font-size: 18px !important;
}

.product-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 18px !important;
}

.product-grid img {
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
  border-radius: 6px !important;
  box-shadow: 0 12px 30px rgba(6,43,91,.10) !important;
  display: block !important;
}

@media(max-width:900px){
  .custom-showcase {
    grid-template-columns: 1fr !important;
    gap: 34px !important;
    padding-top: 60px !important;
    padding-bottom: 60px !important;
  }

  .product-grid {
    gap: 12px !important;
  }
}


/* KCA v1.3.2 - Larger Custom Apparel Product Image */
.custom-showcase {
  grid-template-columns: 0.85fr 1.25fr !important;
  gap: 64px !important;
  align-items: center !important;
}

.product-collage-wrap {
  width: 100% !important;
  max-width: 760px !important;
  margin-left: auto !important;
}

.product-collage-wrap img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  border-radius: 8px !important;
  box-shadow: 0 18px 40px rgba(6,43,91,.12) !important;
}

@media(max-width:900px){
  .custom-showcase {
    grid-template-columns: 1fr !important;
    gap: 34px !important;
  }

  .product-collage-wrap {
    max-width: 100% !important;
    margin-left: 0 !important;
  }
}


/* KCA v1.3.3 - Artwork upload field */
.upload-box {
  margin-top: 4px;
}

.upload-box > label:first-child {
  display: block;
  font-weight: 800;
  color: var(--navy);
  margin-bottom: 10px;
}

.upload-drop {
  border: 2px dashed #cfcfcf;
  border-radius: 12px;
  min-height: 190px;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 12px;
  background: #ffffff;
  cursor: pointer;
  padding: 28px;
}

.upload-drop:hover {
  border-color: var(--orange);
  background: #fffaf0;
}

.upload-drop strong {
  font-size: 20px;
  color: var(--ink);
}

.upload-drop span {
  color: #777;
}

.upload-icon {
  font-size: 34px !important;
  color: #b7b7b7 !important;
  line-height: 1;
}

.upload-box input[type="file"] {
  margin-top: 12px;
  border: 1px solid #d7e4eb;
  border-radius: 12px;
  padding: 12px;
  background: #fff;
}


/* Version 1.4 */
.hero .eyebrow{
  font-size:1.45rem !important;
  letter-spacing:.24em !important;
  font-weight:900 !important;
  margin-top:18px !important;
  margin-bottom:18px !important;
}