/* ============================================================
   GUNSO — Modern Asian Dining

   Cream ground, ink type, one red disc, and the brush wave used as a
   structural element rather than a watermark. Black backgrounds were
   swallowing the torn edge of the disc and the dry-brush texture of the
   wave — both are drawn in ink, so they need paper to read against.

   No decorative CJK: GUNSO is pan-Asian, and Chinese characters set
   behind Japanese and Thai dishes read as "Chinese restaurant". The one
   place Chinese belongs is the brand lockup itself, 美食让人相聚, which
   is a fixed part of the identity.
============================================================ */

.gs {
  --gs-red:   #ED2034;
  --gs-ink:   #0C0C0D;   /* type + wave */
  --gs-cream: #FEFBF4;   /* paper */
  --gs-warm:  #F4EFE4;   /* alternating band */
  --gs-mute:  rgba(12,12,13,.60);
  --gs-line:  rgba(12,12,13,.14);

  background:var(--gs-cream); color:var(--gs-ink);
  font-family:'DM Sans',sans-serif;
}
.gs ::selection { background:var(--gs-red); color:#fff; }

.gs-sec  { padding:112px 56px; position:relative; overflow:hidden; }
.gs-in   { max-width:1180px; margin:0 auto; position:relative; z-index:2; }
.gs-alt  { background:var(--gs-warm); }

.gs-ey {
  font-family:'Syne',sans-serif; font-size:.6rem; font-weight:700;
  letter-spacing:.34em; text-transform:uppercase; color:var(--gs-red);
  margin-bottom:22px;
}
.gs h2 {
  font-family:'Syne',sans-serif; font-weight:800;
  font-size:clamp(1.7rem,3.6vw,2.9rem); line-height:1.1; letter-spacing:-.01em;
  text-transform:uppercase; margin:0 0 8px;
}
.gs-cn {
  font-size:clamp(1rem,2vw,1.4rem); font-weight:400; color:var(--gs-red);
  letter-spacing:.28em; margin:14px 0 0;
}
.gs-lede {
  font-size:1rem; font-weight:300; line-height:1.95; color:var(--gs-mute);
  max-width:62ch; margin:26px 0 0;
}
.gs-lede + .gs-lede { margin-top:18px; }
.gs-lede strong { color:var(--gs-ink); font-weight:500; }

/* ─── THE WAVE ───────────────────────────────────────────────────────
   Structural, not wallpaper: it opens the page, closes it, and carries
   every transition between sections. */
.gs-wave-band {
  position:relative; height:132px; margin:0; overflow:hidden;
  background:var(--gs-cream);
}
.gs-wave-band img {
  position:absolute; left:50%; top:50%; width:150%; max-width:none;
  transform:translate(-50%,-50%); opacity:.42;
}
.gs-wave-band.on-warm { background:var(--gs-warm); }
.gs-wave-band.flip img { transform:translate(-50%,-50%) scaleX(-1); }

/* ─── HERO ─── */
.gs-hero {
  min-height:92vh; display:flex; flex-direction:column; align-items:center;
  justify-content:center; text-align:center; padding:150px 30px 130px;
  position:relative; overflow:hidden; background:var(--gs-cream);
}
.gs-wave {
  position:absolute; left:50%; bottom:-6%; width:180%; max-width:none;
  transform:translateX(-50%); opacity:.38; pointer-events:none; z-index:1;
}
.gs-hero-in { position:relative; z-index:2; }
.gs-disc { width:min(250px,46vw); height:auto; display:block; margin:0 auto 40px; }
.gs-hero h1 {
  font-family:'Syne',sans-serif; font-weight:800; text-transform:uppercase;
  font-size:clamp(2.6rem,8vw,5.4rem); letter-spacing:.16em; line-height:1;
  margin:0; text-indent:.16em; color:var(--gs-ink);
}
.gs-sub {
  font-family:'Syne',sans-serif; font-size:clamp(.66rem,1.5vw,.86rem); font-weight:500;
  letter-spacing:.44em; text-transform:uppercase; color:rgba(12,12,13,.5);
  margin:20px 0 0; text-indent:.44em;
}
.gs-rule { width:42px; height:2px; background:var(--gs-red); margin:34px auto; }
.gs-tag {
  font-family:'Syne',sans-serif; font-size:clamp(.72rem,1.7vw,1rem); font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; line-height:2; margin:0; text-indent:.2em;
}
.gs-tag-cn { color:var(--gs-red); letter-spacing:.3em; margin-top:10px; font-weight:400; }
/* Chinese rendering of the descriptor, a step quieter than the English. */
.gs-sub-cn  { letter-spacing:.34em; margin-top:22px; font-size:clamp(.86rem,1.9vw,1.15rem);
              color:rgba(12,12,13,.55); text-indent:.34em; }

/* ─── WHAT WE MAKE ─── */
.gs-make { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--gs-line); margin-top:52px; }
.gs-mk   { background:var(--gs-cream); padding:36px 24px 40px; transition:background .35s; }
.gs-alt .gs-mk { background:var(--gs-warm); }
.gs-mk:hover { background:#fff; }
.gs-mk h4 {
  font-family:'Syne',sans-serif; font-size:.82rem; font-weight:800; letter-spacing:.18em;
  text-transform:uppercase; margin-bottom:14px;
}
.gs-mk .gs-mk-n {
  font-family:'Syne',sans-serif; font-size:.6rem; font-weight:700; letter-spacing:.2em;
  color:var(--gs-red); display:block; margin-bottom:14px;
}
.gs-mk p { font-size:.82rem; font-weight:300; line-height:1.8; color:var(--gs-mute); }

/* ─── SIGNATURES ─── */
.gs-dishes { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--gs-line); margin-top:52px; }
.gs-dish {
  background:var(--gs-cream); padding:38px 30px 42px; position:relative;
  border-top:2px solid transparent; transition:border-color .35s, background .35s;
}
.gs-alt .gs-dish { background:var(--gs-warm); }
.gs-dish:hover { border-top-color:var(--gs-red); background:#fff; }
.gs-badge {
  font-family:'Syne',sans-serif; font-size:.54rem; font-weight:700; letter-spacing:.2em;
  text-transform:uppercase; color:var(--gs-red); display:block; margin-bottom:14px;
}
.gs-dish h4 {
  font-family:'Syne',sans-serif; font-size:1.02rem; font-weight:700;
  letter-spacing:-.005em; margin-bottom:12px; line-height:1.25;
}
.gs-dish p { font-size:.85rem; font-weight:300; line-height:1.8; color:var(--gs-mute); }

/* ─── DELIVERY ─── */
.gs-deliv { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; margin-top:48px; }
.gs-steps { display:flex; flex-direction:column; }
.gs-step  { border-top:1px solid var(--gs-line); padding:20px 0 18px; display:flex; gap:20px; align-items:baseline; }
.gs-step:last-child { border-bottom:1px solid var(--gs-line); }
.gs-step span {
  font-family:'Syne',sans-serif; font-size:.62rem; font-weight:700;
  letter-spacing:.16em; color:var(--gs-red); flex-shrink:0; width:26px;
}
.gs-step p { font-size:.88rem; font-weight:300; line-height:1.75; color:var(--gs-mute); margin:0; }
.gs-step strong { color:var(--gs-ink); font-weight:500; }

/* ─── CLOSER ─── */
/* The one full-colour moment: the disc, blown up to fill the page. Everything
   on it is white, including the wave, so the red carries the whole block. */
.gs-close {
  text-align:center; padding:130px 30px; position:relative; overflow:hidden;
  background:var(--gs-red); color:#FFFFFF;
}
.gs-close .gs-lede { color:rgba(255,255,255,.82); margin-left:auto; margin-right:auto; text-align:center; }
.gs-close h2 { font-size:clamp(1.5rem,4vw,2.8rem); letter-spacing:.06em; color:#FFFFFF; }
.gs-close .gs-cn { color:#FFFFFF; opacity:.95; }
.gs-close-wave {
  position:absolute; left:50%; bottom:-10%; width:190%; max-width:none;
  transform:translateX(-50%); opacity:.22; pointer-events:none; z-index:0;
}
.gs-mark {
  font-family:'Syne',sans-serif; font-size:.72rem; font-weight:700; letter-spacing:.4em;
  text-transform:uppercase; margin-top:52px; text-indent:.4em;
}
.gs-mark em { display:block; font-style:normal; font-weight:400; font-size:.7rem;
  letter-spacing:.3em; color:rgba(255,255,255,.72); margin-top:10px; text-indent:.3em; }

.gs-note {
  display:inline-flex; align-items:center; gap:10px; margin-top:40px;
  border:1px solid var(--gs-line); padding:12px 20px;
  font-family:'Syne',sans-serif; font-size:.6rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--gs-mute);
}
.gs-note b { color:var(--gs-red); font-weight:700; }

@media (max-width:1100px) {
  .gs-sec   { padding:88px 30px; }
  .gs-make  { grid-template-columns:1fr 1fr; }
  .gs-dishes{ grid-template-columns:1fr 1fr; }
  .gs-deliv { grid-template-columns:1fr; gap:34px; }
  .gs-wave-band { height:96px; }
}
@media (max-width:640px) {
  .gs-sec    { padding:68px 18px; }
  .gs-hero   { padding:128px 18px 100px; min-height:auto; }
  .gs-make   { grid-template-columns:1fr; }
  .gs-dishes { grid-template-columns:1fr; }
  .gs-close  { padding:88px 18px; }
  .gs-wave-band { height:70px; }
  .gs-wave-band img, .gs-wave { width:260%; }
}