:root {
  color-scheme: dark;
  --bg: #101113;
  --ink: #edeae4;
  --muted: #b4b3b0;
  --line: #454548;
  --brand-accent: #F2600A;
  --sans: "Pretendard", "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", Arial, sans-serif;
  --gutter: clamp(24px, 5.5vw, 96px);
  --header: 64px;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--header); }
body {
  margin: 0; background: var(--bg); color: var(--ink); font: 400 16px/1.65 var(--sans);
  word-break: keep-all; overflow-wrap: break-word; -webkit-font-smoothing: antialiased;
}
html:lang(en) body {word-break:normal}
h1,h2,h3,p,figure,dl,dd {margin:0}
img {max-width:100%}
button,input,select,textarea {font:inherit; color:inherit}
a,button {touch-action:manipulation}
a {color:inherit; text-decoration:none}
button {cursor:pointer}
[hidden] {display:none!important}
:where(a,button,summary,input,textarea,select,[tabindex="0"]):focus-visible {
  outline:2px solid var(--brand-accent); outline-offset:4px;
}
.frame,.mast-inner {width:min(calc(100% - var(--gutter)*2),1416px); margin-inline:auto}
.skip {position:fixed; z-index:120; top:-100px; left:10px; padding:8px 15px; background:#141518}
.skip:focus {top:6px}
.masthead {
  position:sticky; top:0; z-index:20; height:var(--header); background:#101113;
  border-bottom:1px solid #ffffff17;
}
.mast-inner {height:100%; display:flex; align-items:center; justify-content:space-between}
.wordmark {display:inline-flex;align-items:center;min-height:44px;flex:none}
.brand-logo {display:block;width:clamp(122px,10.5vw,166px);height:auto}
.top-nav {display:flex; align-items:center; gap:clamp(22px,2.7vw,48px); font-size:13px; color:#c9c8c5}
.top-nav a {white-space:nowrap}
.top-nav a {padding:8px 0; position:relative}
.top-nav a::after {
  content:""; position:absolute; inset:auto 0 4px; height:1px; background:var(--brand-accent);
  transform:scaleX(0); transform-origin:left; transition:transform .22s;
}
.top-nav a:is(:hover,[aria-current="location"]) {color:white}
.top-nav a[aria-current="location"] {font-weight:650}
.top-nav a:is(:hover,[aria-current="location"])::after {transform:scaleX(1)}
.menu-switch {display:none}
.hero {
  position:relative; isolation:isolate; display:grid; align-items:center;overflow:clip;
  min-height:clamp(460px,min(calc(100svh - var(--header)),56vw),960px);
  background:#0b0c0d;
}
.hero-visual {
  position:absolute;inset:0;overflow:hidden;pointer-events:none;
}
.hero-photo {
  display:block;width:100%;height:100%;object-fit:cover;object-position:60% 55%;
}
.hero-visual::after {
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(9,10,11,.65),rgba(9,10,11,.36) 25%,transparent 48%);
}
.hero-content {position:relative;z-index:1}
.hero h1,.about h2,.contact h2,.site-dialog h2 {
  font-weight:700; letter-spacing:-.045em;
}
.hero h1 {font-size:clamp(36px,4.65vw,86px); line-height:1.13; color:#f2efe8}
.hero-accent {color:var(--brand-accent)}
.hero-content p {margin-top:18px; color:#d2ceca; font-size:clamp(14px,1.12vw,18px); letter-spacing:-.035em}
.company {
  position:relative;isolation:isolate;overflow:clip;background:#0b0c0d;
}
.company-layout {
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.35fr);
  align-items:center;gap:clamp(24px,3.5vw,64px);
  min-height:clamp(580px,52vw,820px);padding-block:clamp(72px,8vw,128px);
}
.company-copy {position:relative;z-index:1;word-break:normal}
.company-copy h2 {
  font-size:clamp(32px,3.05vw,50px);font-weight:700;line-height:1.16;letter-spacing:-.04em;
  color:#f2efe8;
}
.company-copy h2 span {color:var(--brand-accent)}
.company-copy p {
  max-width:30em;font-size:clamp(16px,1.15vw,18px);line-height:1.8;
  letter-spacing:-.012em;color:#c5c2bd;text-wrap:pretty;
}
.company-copy h2 + p {margin-top:30px}
.company-copy p + p {margin-top:18px;color:#a9a8a5}
.company-media {
  position:relative;min-width:0;margin-inline-end:calc(-1 * var(--gutter));
  mask-image:linear-gradient(90deg,transparent,#000 7% 96%,transparent),linear-gradient(180deg,transparent,#000 9% 87%,transparent);
  mask-composite:intersect;
}
.company-video {display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;pointer-events:none}
@media(max-width:1000px) {
  .company-layout {grid-template-columns:minmax(0,1fr);min-height:0;gap:28px;padding-block:64px 36px}
  .company-copy {max-width:640px}
  .company-copy h2 {font-size:clamp(32px,5.7vw,48px)}
  .company-copy h2 + p {margin-top:24px}
  .company-copy p {font-size:16px;max-width:36em}
  .company-media {margin-inline:calc(-1 * var(--gutter))}
}
.rule-link {
  display:inline-flex;align-items:center;justify-content:space-between;gap:32px;
  font-size:13px;font-weight:500;line-height:1.5;padding:8px 0;color:#efede7;
  background:none;border:0;border-bottom:1px solid #bab8b2;
}
.rule-link:hover {color:#fff; border-color:#fff}
.rule-link span {font:17px/1 var(--sans)}
.about {background:#151617}
.brew-layout {
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  grid-template-areas:"intro film" "facts film";
  align-content:center;gap:26px clamp(38px,5.5vw,92px);padding-block:clamp(60px,6.25vw,100px);
}
.contact h2 {font-size:clamp(34px,3.4vw,58px);line-height:1.23}
.brew-intro {grid-area:intro;align-self:end}
.brew-product {display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px;font-size:clamp(13px,1vw,15px);font-weight:550;color:#c9c4ba}
.brew-product span {color:var(--brand-accent);white-space:nowrap}
.brew-intro h2 {display:flex;align-items:baseline;gap:.28em;font-size:clamp(37px,3.4vw,56px);line-height:1.12;margin-block:6px 16px}
.brew-intro h2 strong {font-weight:700;font-size:1.7em;letter-spacing:-.055em;color:var(--brand-accent)}
.brew-intro h2 strong span {font-size:.57em;letter-spacing:0;margin-left:.06em}
.brew-lead {max-width:28em;font-size:clamp(16px,1.26vw,21px);line-height:1.65;font-weight:500;letter-spacing:-.025em;text-wrap:balance}
.brew-lead strong {display:block;margin-bottom:6px;font-size:1.24em;line-height:1.35;font-weight:700;color:#f4f0e8}
.brew-video {grid-area:film;align-self:center;display:block;width:100%;height:auto;aspect-ratio:16/9}
.brew-facts {grid-area:facts;align-self:start}
.brew-label {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-block:1px solid var(--line);padding:17px 0 15px}
.brew-label > div:first-child {padding-right:clamp(10px,1.45vw,22px)}
.brew-label > div + div {border-left:1px solid #393a38;padding-left:clamp(10px,1.45vw,22px)}
.brew-label dt {font-size:13px;color:var(--muted)}
.brew-label dd {margin-top:3px;font-size:clamp(18px,1.5vw,24px);line-height:1.4;font-weight:650;letter-spacing:-.025em}
.brew-label .brew-ingredients dd {font-size:clamp(15px,1.1vw,18px);line-height:1.5;letter-spacing:0}
.ingredient-names {display:flex;flex-wrap:wrap;gap:.1em .35em}
.ingredient-names > span {white-space:nowrap}
.brew-diagram {display:flex;align-items:center;gap:clamp(6px,.75vw,12px);height:38px;margin-top:10px;color:var(--brand-accent)}
.brew-diagram svg {display:block;width:96px;min-width:0;height:auto;max-height:100%}
.brew-diagram small {flex:none;font-size:12px;font-weight:600;letter-spacing:.035em;white-space:nowrap}
.brew-tip {margin-top:14px;max-width:35em;color:var(--muted);font-size:14px;line-height:1.7;text-wrap:pretty}
.contact-grid p {margin-top:15px;font-size:14px;color:var(--muted);line-height:1.85}
.contact {background:#1b1c1e}
.contact-grid {display:flex;align-items:center;justify-content:space-between;gap:36px;padding-block:clamp(65px,7.6vw,122px)}
.contact-copy {min-width:0;max-width:740px}
.contact-grid .contact-hook {margin-top:26px;font-size:clamp(23px,2.1vw,32px);font-weight:650;line-height:1.5;letter-spacing:-.035em;color:var(--ink)}
.contact-hook strong {color:var(--brand-accent);font-weight:inherit}
.contact-description {text-wrap:pretty}
.contact-actions {display:flex;gap:clamp(22px,3vw,48px);flex-wrap:wrap}
.contact-actions {flex:none}
.contact-actions button {
  min-width:clamp(118px,13vw,194px);display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:13px 0;background:none;border:0;border-bottom:1px solid #807f7c;font-size:clamp(14px,1.1vw,18px);
}
.contact-actions button:hover {border-color:#f5f3ee}
.contact-actions span {font:17px/1 var(--sans);color:#c9c8c3}
footer {background:#111214}
.footer-inner {padding-block:28px 34px;color:#a3a3a2;font-size:12px}
.footer-brand {display:flex;gap:25px;align-items:center;margin-bottom:18px}
.footer-inner .brand-logo {width:108px}
.back-to-top {margin-left:auto;flex:none;padding-block:12px}
.business-info {display:flex;flex-wrap:wrap;gap:8px 28px;font-size:13px;line-height:1.8}
.business-info > div {display:flex;gap:10px;min-width:0}
.business-info dt {flex:none;color:#90908e}
.business-info dd {min-width:0;color:#c2c1bd}
.business-info .business-address {flex-basis:100%}
.business-info address {font-style:normal}
.business-info a:hover,.back-to-top:hover {color:var(--ink);text-decoration:underline;text-underline-offset:4px}
.site-dialog {
  width:440px;max-width:calc(100% - 32px);max-height:88svh;padding:35px;
  border:1px solid #535354;background:#1c1d1f;color:#f0ede7;border-radius:0;
}
.site-dialog::backdrop {background:#06070acd}
.site-dialog h2 {font-size:31px;line-height:1.45}
.site-dialog>p {font-size:14px;line-height:1.85;color:#c1c0bc;margin:14px 0 21px}
.dialog-exit {position:absolute;right:12px;top:11px;width:35px;height:35px;border:0;background:none;font:26px/1 var(--sans)}
.site-dialog label {display:block;font-size:13px;margin:15px 0 6px}
.site-dialog fieldset {border:0; margin:0; padding:0; min-width:0}
.site-dialog select,.site-dialog textarea,.site-dialog input[type="email"] {
  display:block;width:100%;border:1px solid #616062;background:#141517;color:#efede7;padding:10px 12px;font-size:14px;border-radius:0;
}
.site-dialog textarea {resize:vertical}
.site-dialog form .rule-link {margin-top:15px}
#enquiry-status {font-size:13px;color:#d4c9b8;line-height:1.6;white-space:pre-line;margin-top:12px}
#enquiry-status:empty {display:none}
#enquiry-form button:disabled {opacity:.5;cursor:default}
@media (max-width:700px), (max-width:1150px) and (max-aspect-ratio:7/5) {
  .hero {
    display:flex;flex-direction:column;align-items:stretch;min-height:0;
    gap:clamp(12px,2.4vw,24px);padding-top:clamp(36px,7vw,80px);
  }
  .hero-visual {position:relative;inset:auto;aspect-ratio:1.66;flex:none}
  .hero-photo {
    position:absolute;left:-51.5%;top:50%;width:154%;height:auto;max-width:none;
    transform:translateY(-53%);
  }
  .hero-visual::after {
    background:linear-gradient(180deg,#0b0c0d,rgba(11,12,13,.25) 12%,transparent 23% 78%,rgba(11,12,13,.45) 90%,#0b0c0d);
  }
  .hero h1 {font-size:clamp(44px,7.5vw,68px)}
  .hero-content p {margin-top:14px}
}
@media (min-width:701px) and (max-width:1150px) and (min-aspect-ratio:1/1) and (max-aspect-ratio:7/5) {
  .hero-visual {aspect-ratio:2.13}
  .hero-photo {width:138%;left:-41%;transform:translateY(-54%)}
}
@media (max-height:520px) and (min-aspect-ratio:7/5) {
  .hero {min-height:calc(100svh - var(--header))}
  .hero h1 {font-size:clamp(30px,4.8vw,48px)}
}
@media (min-width:1500px) and (min-aspect-ratio:5/2) {
  .hero-visual {max-width:min(225svh,2300px);margin-inline:auto;mask-image:linear-gradient(90deg,transparent,#000 18% 93%,transparent)}
}
@media(max-width:900px) {
  :root{--gutter:clamp(22px,5vw,45px)}
  .brew-layout {column-gap:32px}
}
@media(max-width:1000px) {
  .masthead {background:#101113}
  .menu-switch {display:inline-flex;align-items:center;gap:10px;border:0;background:none;padding:10px 0 10px 16px;font-size:12px}
  .menu-switch i {display:block;width:18px;height:8px;border-block:1px solid currentColor}
  .top-nav {display:none;position:absolute;top:100%;left:0;right:0;background:#151618;border-block:1px solid var(--line);padding:12px var(--gutter) 19px}
  .top-nav.is-open {display:flex;flex-direction:column;align-items:stretch;gap:2px}
  .top-nav a {padding:10px 0}
  .top-nav a::after {width:2.6em}
}
@media(max-width:700px) {
  :root{--header:54px}
  .brew-layout {grid-template-columns:minmax(0,1fr);grid-template-areas:"intro" "film" "facts";gap:20px;padding-block:44px}
  .brew-intro h2 {margin-block:4px 12px}

  .contact-grid p {margin-top:9px}
  .contact-grid .contact-hook {margin-top:22px}
  .contact-grid .contact-description {margin-top:16px}
  .contact-grid {display:grid;grid-template-columns:1fr;gap:22px;padding-block:52px}
  .contact-actions {display:grid;grid-template-columns:1fr;gap:24px}
  .contact-actions button {min-width:0}
  .footer-inner {padding-block:24px 30px}
  .footer-brand {flex-wrap:wrap;gap:4px 18px;margin-bottom:20px}
  .footer-inner .brand-logo {width:98px}
  .footer-tagline {order:3;flex-basis:100%;font-size:12px}
  .business-info {display:grid;gap:7px;font-size:12px}
  .business-info > div {display:grid;grid-template-columns:112px minmax(0,1fr);gap:8px}
  .site-dialog {padding:29px 23px}
}
@media(prefers-reduced-motion:reduce) {
  html {scroll-behavior:auto}
  *,*::before,*::after {animation-duration:.01ms!important;transition-duration:.01ms!important}
}