:root{
  --ink:#1F2933;
  --cream:#FFFBF0;
  --navy:#111827;
  --yellow:#F4C10F;
  --yellow-soft:#FCE9A8;
  --red:#B3282D;
  --red-hover:#8F1F23;
}

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  /* border: 1px solid black; */
}

body{
  font-family:'PT Serif', serif;
  color:var(--ink);
  background:var(--cream);
}

/* ---------- Navbar ---------- */
.navbar{
  display:flex;
  align-items:center;
  justify-content:center;
  background-color:var(--navy);
  color:white;
  min-height:85px;
  width:100%;
  gap:clamp(24px, 8vw, 300px);
  border-bottom:1px solid var(--yellow);
  flex-wrap:wrap;
  padding:10px 20px;
}

.mini-nav{
  width: 620px;
  /* max-width: 100%; */
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  justify-content:center;
  font-family:'Roboto Slab', serif;
  font-size:18px;
  font-weight:600;
  letter-spacing:0.02em;
}

.comp{
  padding:0 22px;
  height:60px;
  display:flex;
  align-items:center;
  cursor:pointer;
  transition:background-color .2s ease, color .2s ease;
  border: 1px solid white;
}

.comp:hover,
.comp.active{
  background-color:var(--yellow);
  color:var(--navy);
}

.logo-slot{
  border: 1px solid var(--yellow);
  display:flex;
  align-items:center;
  justify-content:center;
  width:260px;
  height:60px;
}

.logo-slot img{
  height:60px;
  width:130px;
  object-fit:contain;
}

/* Keyboard-focus visibility (nav links, footer links, CTA) */
.mini-nav a:focus-visible .comp,
.footer-link:focus-visible,
.cta-button:focus-visible {
  outline: 2px solid var(--yellow);
  outline-offset: 2px;
}

/* ---------- Hero ---------- */
.hero-image-wrapper{
  position:relative;
  width:100%;
  height:560px;
  overflow:hidden;
  background-color: var(--navy);
}

.hero-track{
  display:flex;
  width:300%;
  height:100%;
  transition:transform .8s ease-in-out;
}

.hero-image{
  width:33.333%;
  height:100%;
  object-fit:cover;
  display:block;
  flex-shrink:0;
}

.hero-image-wrapper::after{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:linear-gradient(to top, rgba(0,0,0,.72) 0%, rgba(0,0,0,.28) 45%, rgba(0,0,0,.15) 100%);
  z-index:2;
}

.hero-text{
  position:absolute;
  left:50%;
  bottom:14%;
  transform:translateX(-50%);
  z-index:3;
  text-align:center;
  color:#fff;
  width:90%;
  max-width:780px;
}

.hero-text .kicker{
  font-family:'PT Serif', serif;
  font-style:italic;
  font-size:16px;
  color:var(--yellow-soft);
  margin-bottom:10px;
}

.hero-text h1{
  font-family:'Anton', sans-serif;
  font-weight:400;
  font-size:clamp(28px, 5vw, 46px);
  line-height:1.15;
  text-transform:uppercase;
  letter-spacing:.01em;
}

/* ---------- Welcome ---------- */
.welcome{
  width:100%;
  max-width:900px;
  margin:0 auto;
  padding:56px 20px 20px;
  text-align:center;
}

.welcome h2{
  font-family:'Roboto Slab', serif;
  font-weight:700;
  font-size:30px;
  color:var(--navy);
}

/* Shared rule/divider bar — used under .welcome heading and .testimonials heading */
.rule{
  width:56px;
  height:3px;
  background:var(--yellow);
  margin:18px auto 0;
}

/* ---------- Why us ---------- */
.why{
  display:flex;
  align-items:stretch;
  justify-content:center;
  width:100%;
  max-width:1200px;
  margin:40px auto 0;
  min-height:320px;
  background-color:var(--yellow);
  flex-wrap:wrap;
}

.left-why, .right-why{
  width:100%;
  max-width:340px;
  min-height:320px;
  background-color: var(--navy);
  background-size:cover;
  background-position:center;
}

.left-why{
  background-image:url(left.jpg);
  border-radius:0 80px 0 0;
}

.right-why{
  background-image:url(right.jpg);
  border-radius:0 0 0 80px;
}

.center-why{
  width:100%;
  max-width:480px;
  padding:44px 32px;
  color:var(--navy);
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.center-why h3{
  font-family:'Roboto Slab', serif;
  font-weight:700;
  font-size:19px;
  margin-bottom:14px;
}

.center-why p{
  font-family:'PT Serif', serif;
  font-size:15px;
  line-height:1.75;
}

/* ---------- Quality / features ---------- */
.quality{
  display:flex;
  justify-content:center;
  gap:64px;
  max-width:1000px;
  margin:36px auto 80px;
  padding:0 20px;
  flex-wrap:wrap;
}

.quality-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  max-width:180px;
}

.quality-icon{
  width:56px;
  height:56px;
  border-radius:50%;
  background:var(--navy);
  color:var(--yellow);
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:14px;
}

.quality-icon svg{
  width:26px;
  height:26px;
}

.quality-item span{
  font-family:'Roboto Slab', serif;
  font-weight:600;
  font-size:14px;
  color:var(--navy);
}

/* ---------- CTA ---------- */
.cta{
  background-color:var(--navy);
  color:#fff;
  text-align:center;
  padding:64px 20px;
}

.cta h2{
  font-family:'Roboto Slab', serif;
  font-weight:700;
  font-size:28px;
  margin-bottom:12px;
}

.cta p{
  font-family:'PT Serif', serif;
  font-size:16px;
  color:rgba(255,255,255,.75);
  margin-bottom:28px;
}

.cta-button{
  display:inline-block;
  font-family:'Roboto Slab', serif;
  font-weight:600;
  font-size:15px;
  color:#fff;
  text-decoration:none;
  background-color:var(--red);
  border:none;
  padding:14px 32px;
  border-radius:4px;
  cursor:pointer;
  transition:background-color .2s ease;
}

.cta-button:hover{
  background-color:var(--red-hover);
}

/* ---------- Footer ---------- */
.site-footer{
  background-color:#0B111C;
  color:rgba(255,255,255,.75);
  padding:56px 40px 0;
}

.footer-top{
  display:flex;
  justify-content:space-between;
  gap:40px;
  max-width:1200px;
  margin:0 auto;
  padding-bottom:40px;
  flex-wrap:wrap;
}

.footer-col{
  min-width:180px;
  flex:1;
}

.footer-brand{
  max-width:280px;
}

.footer-logo{
  font-family:'Roboto Slab', serif;
  font-weight:700;
  font-size:20px;
  color:var(--yellow);
  margin-bottom:12px;
}

.footer-brand p{
  font-family:'PT Serif', serif;
  font-size:14px;
  line-height:1.7;
}

.footer-col h4{
  font-family:'Roboto Slab', serif;
  font-weight:600;
  font-size:14px;
  color:#fff;
  margin-bottom:16px;
}

.footer-link{
  display:block;
  font-family:'PT Serif', serif;
  font-size:14px;
  color:inherit;
  text-decoration:none;
  margin-bottom:10px;
  cursor:pointer;
  width:fit-content;
  transition:color .2s ease;
}

.footer-link:hover{
  color:var(--yellow);
}

.footer-col p{
  font-family:'PT Serif', serif;
  font-size:14px;
  margin-bottom:10px;
}

.footer-bottom{
  border-top:1px solid rgba(255,255,255,.1);
  text-align:center;
  padding:20px;
  font-family:'PT Serif', serif;
  font-size:13px;
  color:rgba(255,255,255,.5);
}

/* ---------- Objective ---------- */
.objective{
  display:flex;
  max-width:1200px;
  margin:80px auto 0;
  min-height:360px;
  flex-wrap:wrap;
}

.objective-media{
  width:100%;
  max-width:440px;
  min-height:360px;
  background-color: var(--navy);
  background-image:url(objective.jpeg);
  background-size:cover;
  background-position:center;
  border-radius:0 100px 0 100px;
}

.objective-content{
  flex:1;
  min-width:280px;
  padding:20px 0 20px 56px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.objective-content h3{
  font-family:'Roboto Slab', serif;
  font-weight:700;
  font-size:24px;
  color:var(--navy);
  margin-bottom:16px;
}

.objective-content p{
  font-family:'PT Serif', serif;
  font-size:15px;
  line-height:1.75;
  margin-bottom:20px;
  max-width:560px;
}

.objective-list{
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:12px;
  max-width:560px;
}

.objective-list li{
  font-family:'PT Serif', serif;
  font-size:14.5px;
  line-height:1.6;
  padding-left:22px;
  position:relative;
}

.objective-list li::before{
  content:"";
  position:absolute;
  left:0;
  top:7px;
  width:8px;
  height:8px;
  background:var(--yellow);
}

/* ---------- Stats (animated marquee) ---------- */
.stats{
  background-color:var(--navy);
  margin-top:80px;
  padding:56px 0;
  overflow:hidden;
}

.stats-track{
  display:flex;
  align-items:center;
  width:max-content;
  animation:stats-scroll 22s linear infinite;
}

.stats:hover .stats-track{
  animation-play-state:paused;
}

@keyframes stats-scroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}

.stat-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  min-width:130px;
  flex-shrink:0;
  margin-right:80px;
}

.stat-number{
  font-family:'Anton', sans-serif;
  font-weight:400;
  font-size:36px;
  color:var(--yellow);
  margin-bottom:6px;
}

.stat-label{
  font-family:'Roboto Slab', serif;
  font-weight:500;
  font-size:13px;
  color:rgba(255,255,255,.8);
  text-align:center;
  white-space:nowrap;
}

/* ---------- Testimonials ---------- */
.testimonials{
  max-width:1100px;
  margin:56px auto 0;
  padding:0 20px;
  text-align:center;
}

.testimonials h2{
  font-family:'Roboto Slab', serif;
  font-weight:700;
  font-size:28px;
  color:var(--navy);
}

.testimonial-grid{
  display:flex;
  gap:28px;
  margin-top:44px;
  flex-wrap:wrap;
  justify-content:center;
}

.testimonial-card{
  flex:1;
  min-width:260px;
  max-width:340px;
  text-align:left;
  padding:28px 26px;
  border:1px solid rgba(17,24,39,.12);
  border-top:3px solid var(--yellow);
}

.testimonial-card .quote{
  font-family:'PT Serif', serif;
  font-style:italic;
  font-size:14.5px;
  line-height:1.7;
  margin-bottom:18px;
}

.testimonial-card .author{
  font-family:'Roboto Slab', serif;
  font-weight:600;
  font-size:13px;
  color:var(--navy);
}

/* ---------- Korean touches ---------- */
.section-kicker{
  display:block;
  font-family:'PT Serif', serif;
  font-style:italic;
  font-size:14px;
  color:var(--red);
  margin-bottom:8px;
}

.cta-kicker{
  color:var(--yellow-soft);
}

.quality-heading{
  text-align:center;
  max-width:600px;
  margin:80px auto 0;
  padding:0 20px;
}

.quality-heading h2{
  font-family:'Roboto Slab', serif;
  font-weight:700;
  font-size:26px;
  color:var(--navy);
}

.kr-divider{
  height:3px;
  max-width:1200px;
  margin:56px auto 0;
  background: linear-gradient(to right, transparent, var(--yellow) 50%, transparent);
}

.footer-thanks{
  font-family:'PT Serif', serif;
  font-style:italic;
  font-size:13px;
  color:var(--yellow-soft);
  margin-top:10px;
}

/* ---------- Responsive ---------- */
@media (max-width: 900px){
  .hero-image-wrapper{ height:420px; }
  .why{ flex-direction:column; align-items:center; }
  .left-why, .right-why{ max-width:100%; min-height:180px; }
  .left-why{ border-radius:0; }
  .right-why{ border-radius:0; }
  .center-why{ text-align:center; align-items:center; }
  .objective{ flex-direction:column; }
  .objective-media{ max-width:100%; min-height:240px; border-radius:0 60px 0 60px; }
  .objective-content{ padding:32px 20px 0; }
  .objective-content p, .objective-list{ max-width:100%; }
}

@media (max-width: 640px){
  .navbar{ gap:16px; padding:14px; }
  .mini-nav{ gap:8px; }
  .comp{ padding:0 14px; font-size:15px; }
  .logo-slot{ width:auto; padding:6px 14px; }
  .hero-image-wrapper{ height:340px; }
  .hero-text{ bottom:10%; }
  .welcome h2{ font-size:24px; }
  .cta h2{ font-size:22px; }
}
.review-button{
  display:block;
  width:fit-content;
  font-family:'Roboto Slab', serif;
  font-weight:600;
  font-size:15px;
  color:var(--navy);
  text-decoration:none;
  background-color:var(--yellow);
  border:none;
  padding:14px 32px;
  border-radius:4px;
  cursor:pointer;
  margin:36px auto 0;
  text-align:center;
  transition:background-color .2s ease;
}

.review-button:hover{
  background-color:var(--yellow-soft);
}