:root{
  --bg:#0C0A09;
  --ink:#F0F0F0;
  --muted:rgba(240,240,240,.5);
  --stone:#CCBCA7;
  --macamoi-green:#1D7C6B;
  --hair:rgba(204,188,167,.22);
  --serif:"Cormorant Garamond",serif;
  --serif-ko:"Cormorant Garamond",serif;
  --sans:"Pretendard Variable",Pretendard,system-ui,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:4.5rem}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:400;
  font-size:14px;
  line-height:1.6;
  word-break:normal;
  -webkit-font-smoothing:antialiased;
  background-image:radial-gradient(rgba(240,240,240,.07) 1px, transparent 1px);
  background-size:18px 18px;
  background-position:0 0;
}
::selection{background:var(--stone);color:var(--bg)}
:focus-visible{outline:1px solid var(--stone);outline-offset:3px}

a{color:inherit}

/* —— top bar —— */
.top{
  position:fixed;inset:0 0 auto 0;z-index:60;
  display:flex;justify-content:space-between;align-items:center;
  padding:1.15rem 1.5rem;
  background:linear-gradient(to bottom, rgba(12,10,9,.85), transparent);
}
.menu-btn{
  font-family:var(--sans);font-size:13px;letter-spacing:.04em;
  color:var(--ink);background:none;border:0;cursor:pointer;
}
.top-brand{
  font-family:var(--serif);font-size:1.15rem;letter-spacing:.02em;
  color:var(--ink);text-decoration:none;
  transition:opacity .4s ease;
}
body.on-hero:not(.menu-open) .top-brand{
  opacity:0;pointer-events:none;
}

.menu{
  position:fixed;inset:0;z-index:50;
  background:var(--bg);
  display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1.75rem;
}
.menu[hidden]{display:none !important}
.menu a{
  font-family:var(--sans);font-weight:400;
  font-size:clamp(1.75rem,5.5vw,2.75rem);
  letter-spacing:-.03em;
  color:var(--ink);text-decoration:none;
}
.menu a:hover{color:var(--stone)}

/* —— hero / contact —— */
.hero, .contact{
  min-height:100svh;
  display:grid;
  grid-template-rows:1fr auto 1fr;
  justify-items:center;
  padding:0 1.5rem;
  text-align:center;
}
.eyebrow{
  grid-row:1;align-self:end;
  color:rgba(240,240,240,.35);letter-spacing:.02em;
  font-size:12px;margin-bottom:clamp(3.5rem,5vw,4.5rem);
}
.hero h1{
  grid-row:2;
  font-family:var(--serif);font-weight:400;
  font-size:clamp(3.2rem,12vw,8.5rem);
  line-height:.95;letter-spacing:0;
}
.hero-answer{
  grid-row:3;align-self:start;
  font-family:var(--sans);font-weight:300;
  font-size:clamp(1.0625rem,1.4vw,1.1875rem);
  letter-spacing:.02em;
  color:var(--macamoi-green);
  margin-top:clamp(0.75rem,1.1vw,1rem);
}
.contact-primary{
  grid-row:2;
  display:flex;flex-direction:column;align-items:center;
  gap:0.85rem;
}
.contact h1, .contact-phone{
  font-family:var(--sans);font-weight:300;
  font-size:clamp(1.5rem,2.6vw,2rem);
  line-height:1.2;letter-spacing:.02em;
}
.contact-mail, .contact-phone{
  font-weight:300;letter-spacing:.02em;
  color:var(--ink);text-decoration:none;
}
.contact-mail:hover, .contact-phone:hover{color:var(--macamoi-green)}
.contact-address{
  grid-row:3;align-self:start;
  color:rgba(240,240,240,.35);
  font-size:12px;letter-spacing:.02em;
  margin-top:clamp(0.75rem,1.1vw,1rem);
}
.passage{
  padding:7rem 1.5rem;
  text-align:center;
}
.passage blockquote{margin:0 auto;max-width:28rem}
.passage p{
  font-family:var(--sans);
  font-size:clamp(0.95rem,1.8vw,1.1rem);
  color:var(--ink);
  line-height:1.65;
}
.passage cite{
  display:block;margin-top:.7rem;
  font-style:normal;color:var(--muted);font-size:12px;letter-spacing:.06em;
}

/* —— products —— */
.products{
  min-height:100svh;
  display:grid;
  grid-template-columns:1fr;
  align-content:center;
  gap:5rem;
  max-width:72rem;
  margin:0 auto;
  padding:7rem 1.5rem;
  text-align:center;
}
.products h2{
  font-family:var(--sans);font-weight:400;
  font-size:clamp(2.1rem,6.5vw,3.6rem);
  line-height:1.05;letter-spacing:-.035em;
  margin-bottom:1.75rem;
}
.products h2 a{color:inherit;text-decoration:none}
.products h2 a:hover{color:var(--macamoi-green)}
.kicker{
  color:var(--muted);letter-spacing:.1em;text-transform:uppercase;
  font-size:12px;margin-bottom:2rem;
}
.lead{
  font-family:var(--sans);
  font-size:clamp(0.95rem,1.6vw,1.05rem);
  line-height:1.65;
  letter-spacing:.01em;
  color:var(--muted);
  margin-bottom:1.35rem;
}
.font-rlm,
.products h2.font-rlm,
.menu a.font-rlm,
.foot-nav a.font-rlm{
  font-family:"Comfortaa",cursive,var(--sans);
  font-weight:600;
  letter-spacing:-.02em;
}
.font-ss,
.products h2.font-ss,
.menu a.font-ss,
.foot-nav a.font-ss{
  font-family:var(--sans);
  font-weight:340;
  letter-spacing:.25em;
  text-transform:uppercase;
}
.products h2.font-ss{
  font-size:clamp(1.45rem,5.2vw,2.5rem);
}

.foot{
  padding:3rem 1.5rem 4rem;
  border-top:1px solid var(--hair);
  color:var(--muted);font-size:12px;text-align:center;
}
.foot-nav{display:flex;justify-content:center;gap:1.75rem;margin-bottom:1.25rem}
.foot p + p{margin-top:.4rem}
.foot-nav a{color:var(--ink);text-decoration:none}
.foot-nav a:hover{color:var(--stone)}

@media (min-width:768px){
  .top{padding-left:2.5rem;padding-right:2.5rem}
  .hero, .contact{padding-left:3rem;padding-right:3rem}
  .passage{padding:9rem 2rem}
  .products{
    grid-template-columns:1fr 1fr;
    gap:4rem 3rem;
    align-items:center;
    padding:9rem 2.5rem;
  }
  .products h2{font-size:clamp(2rem,4vw,3rem)}
  .products h2.font-ss{font-size:clamp(1.25rem,3vw,2.1rem)}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .top-brand{transition:none}
}