/* typography.css */
/* SULKIT type system 01 | Museo Sans / Source Sans 3 / Source Han Sans KR.
   Adobe Fonts are delivered by the Web Project linked in each public page. */
:root {
  --font-display: "museo-sans", "source-sans-3", Arial, sans-serif;
  --font-reading: "source-sans-3", Arial, sans-serif;
  --font-korean: "source-han-sans-korean", "Malgun Gothic", sans-serif;
}

html[lang="en"] body, html[lang="vi"] body { font-family: var(--font-reading); }
html[lang="ko"] body { font-family: var(--font-korean); word-break: keep-all; }

/* Existing pages use several font shorthands; define display roles explicitly. */
html[lang="en"] h1, html[lang="en"] h2, html[lang="en"] h3,
html[lang="en"] h4, html[lang="en"] h5, html[lang="en"] h6,
html[lang="en"] .lead, html[lang="en"] .action,
html[lang="en"] .giant, html[lang="en"] .orbit-center strong,
html[lang="en"] .stage-tabs button,
html[lang="en"] .site-menu a {
  font-family: var(--font-display) !important;
}
html[lang="ko"] h1, html[lang="ko"] h2, html[lang="ko"] h3,
html[lang="ko"] h4, html[lang="ko"] h5, html[lang="ko"] h6,
html[lang="ko"] .lead, html[lang="ko"] .action,
html[lang="ko"] .site-menu a {
  font-family: var(--font-korean) !important;
}
html[lang="vi"] h1, html[lang="vi"] h2, html[lang="vi"] h3,
html[lang="vi"] h4, html[lang="vi"] h5, html[lang="vi"] h6,
html[lang="vi"] .lead, html[lang="vi"] .action,
html[lang="vi"] .site-menu a {
  font-family: var(--font-reading) !important;
}

/* Short navigation and utility text share the reading face. */
.site-header, .site-primary, .header-actions, .site-menu,
.eyebrow, .section-top, .section-foot, .card-index,
button, input, select, textarea, footer {
  font-family: var(--font-reading) !important;
}
html[lang="ko"] .site-header, html[lang="ko"] .site-primary,
html[lang="ko"] .header-actions, html[lang="ko"] .site-menu,
html[lang="ko"] button, html[lang="ko"] input,
html[lang="ko"] select, html[lang="ko"] textarea,
html[lang="ko"] footer { font-family: var(--font-korean) !important; }

/* Keep accented Vietnamese capitals and Korean blocks away from clipping. */
html[lang="vi"] h1, html[lang="vi"] h2, html[lang="vi"] h3 {
  line-height: 1.12;
  letter-spacing: -.035em;
}

@media (max-width: 700px) {
  .site-primary, .header-actions, .site-menu { font-size: max(12px, 1em); }
  .section-top, .section-foot, footer, footer > span { font-size: 12px; }
  .eyebrow, .card-index { font-size: 12px; }
}

/* Hero hierarchy: strengthen the opening line while keeping the emphasized line dominant. */
html[lang="en"] .hero h1,
html[lang="en"] .original-hero h1 { font-weight: 500; }
html[lang="en"] .intro-hero h1,
html[lang="en"] .enquiry-hero h1 { font-weight: 600; }
html[lang="en"] :is(.hero,.original-hero,.intro-hero,.products-hero,.enquiry-hero) h1 strong { font-weight: 700; }


/* process-photo.css */
.brew-stage { position:relative; display:flex; align-items:center; min-height:clamp(600px,44vw,690px); isolation:isolate; }
.process-photo { position:absolute; z-index:-1; inset:0 auto 0 -4%; width:62%; height:100%; margin:0; overflow:hidden; background:#050505; -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 69%,transparent 100%),linear-gradient(0deg,transparent 0%,#000 9%,#000 97%,transparent 100%); -webkit-mask-composite:source-in; mask-image:linear-gradient(90deg,#000 0%,#000 69%,transparent 100%),linear-gradient(0deg,transparent 0%,#000 9%,#000 97%,transparent 100%); mask-composite:intersect; }
.process-photo img { display:block; width:100%; height:100%; object-fit:cover; object-position:center 75%; }
.process-photo figcaption { display:none; }
.brew-stage .stage-copy { position:relative; z-index:1; width:42%; margin-left:auto; padding:0 0 0 6%; }
@media (max-width:700px) {
  .brew-stage { display:block; min-height:640px; margin:22px 0 8px; }
  .process-photo { inset:116px -8% auto -8%; width:116%; height:500px; -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 10%,#000 86%,transparent 100%); mask-image:linear-gradient(180deg,transparent 0%,#000 10%,#000 86%,transparent 100%); }
  .process-photo img { object-position:center 87%; }
  .brew-stage .stage-copy { width:100%; margin:0; padding:0; }
}


/* rhythm.css */
/* Editorial light/dark rhythm shared by the review site. Hero photography stays dark;
   explanatory and comparison sections use warm paper and muted rice-green tones. */
:root{--rhythm-paper:#eeeae1;--rhythm-sage:#dce3d8;--rhythm-ink:#19211b;--rhythm-copy:#4d554e;--rhythm-rule:#b7beb4;--rhythm-orange:#a95520}

/* Home: a visual pause after the opening and the brewing photograph. */
.soul{background:var(--rhythm-paper);color:var(--rhythm-ink);border-color:var(--rhythm-rule)}
.soul .section-top{color:#626a60;border-color:var(--rhythm-rule)}
.soul .giant{color:#d5d0c5}
.soul .giant span{color:#c4bdaf}
.soul-copy>p:not(.eyebrow){color:var(--rhythm-copy)}
.soul .eyebrow,.soul .down span{color:var(--rhythm-orange)}
.discovery{background:#17231d;border-color:#34433a}
.discovery .section-top{border-color:#546058}
.discovery-head>p:last-child,.field-notes p{color:#c3c9c1}
.discovery-head #discover-title{font-size:clamp(42px,4.3vw,72px);letter-spacing:-.055em;text-wrap:balance}
.partners{background:#f2f0e9}

/* Product selection: photographs on paper, comparison on sage, next step in green. */
.products-collection{background:#f2f0e9}
.products-compare{background:var(--rhythm-sage);color:var(--rhythm-ink)}
.products-compare .section-top{color:#59645a;border-color:var(--rhythm-rule)}
.products-compare .eyebrow,.products-compare .compare-header>span{color:var(--rhythm-orange)!important}
.products-compare .compare-heading h2 em{color:var(--rhythm-orange)}
.products-compare .compare-heading>p:last-child,.products-compare .compare-note{color:var(--rhythm-copy)}
.products-compare .compare-table{border-color:#909c91}
.products-compare .compare-row{border-color:#a9b4a9}
.products-business{background:#183027;color:#f2f0e9}
.products-business .section-top{border-color:#5e7668;color:#c2cbbf}
.products-business .business-grid p:not(.eyebrow){color:#d5ddd4}
.products-business .business-grid small{color:#afc0b1}
.products-business .business-link{border-color:#829486}

/* Information families: dark opening, readable explanation, soft data area, dark exit. */
:is(.biz-hero,.how-hero,.tech-hero,.quality-hero,.about-hero)+:is(.biz-section,.how-section,.tech-section,.quality-section,.about-section),
.range-hero+.range-section,.original-inside{
  background:var(--rhythm-paper);color:var(--rhythm-ink);border-color:var(--rhythm-rule)
}
:is(.biz-hero,.how-hero,.tech-hero,.quality-hero,.about-hero)+:is(.biz-section,.how-section,.tech-section,.quality-section,.about-section) .section-top,
.range-hero+.range-section .section-top,.original-inside .section-top{color:#626a60;border-color:var(--rhythm-rule)}
:is(.biz-hero,.how-hero,.tech-hero,.quality-hero,.about-hero)+:is(.biz-section,.how-section,.tech-section,.quality-section,.about-section) .eyebrow,
.range-hero+.range-section .eyebrow,.original-inside .eyebrow{color:var(--rhythm-orange)}
:is(.biz-hero,.how-hero,.tech-hero,.quality-hero,.about-hero)+:is(.biz-section,.how-section,.tech-section,.quality-section,.about-section) h2 em,
:is(.biz-section,.how-section,.tech-section,.quality-section,.about-section,.range-section).paper h2 em,
.range-hero+.range-section h2 em{color:var(--rhythm-orange)}
:is(.biz-hero,.how-hero,.tech-hero,.quality-hero,.about-hero)+:is(.biz-section,.how-section,.tech-section,.quality-section,.about-section) :is(.biz-grid,.how-grid,.tech-grid,.quality-grid,.about-grid)>div:last-child p,
.range-hero+.range-section .range-grid p:not(.eyebrow),.original-inside .inside-copy>p{color:var(--rhythm-copy)}
:is(.biz-section,.how-section,.tech-section,.quality-section,.about-section,.range-section).paper{background:var(--rhythm-sage);color:var(--rhythm-ink);border-color:var(--rhythm-rule)}
:is(.biz-section,.how-section,.tech-section,.quality-section,.about-section,.range-section).paper .section-top{color:#59645a;border-color:var(--rhythm-rule)}
:is(.biz-section,.how-section,.tech-section,.quality-section,.about-section,.range-section).paper .eyebrow{color:var(--rhythm-orange)}
:is(.biz-section,.how-section,.tech-section,.quality-section,.about-section,.range-section).paper :is(.biz-list,.tech-list,.quality-list,.about-list,.range-facts){border-color:#a9b4a9}
:is(.biz-section,.how-section,.tech-section,.quality-section,.about-section,.range-section).paper :is(.biz-list,.tech-list,.quality-list,.about-list) div{border-color:#a9b4a9}
:is(.biz-section,.how-section,.tech-section,.quality-section,.about-section,.range-section).paper :is(.biz-note,.tech-note,.quality-note,.about-note,.range-small){color:#536158!important}
:is(.biz-section,.how-section,.tech-section,.quality-section,.about-section,.range-section).paper+:is(.biz-section,.how-section,.tech-section,.quality-section,.about-section,.range-section){background:#183027;color:#f2f0e9;border-color:#506558}
:is(.biz-section,.how-section,.tech-section,.quality-section,.about-section,.range-section).paper+:is(.biz-section,.how-section,.tech-section,.quality-section,.about-section,.range-section) .section-top{color:#bfcabf;border-color:#688070}
:is(.biz-section,.how-section,.tech-section,.quality-section,.about-section,.range-section).paper+:is(.biz-section,.how-section,.tech-section,.quality-section,.about-section,.range-section) :is(.biz-grid,.how-grid,.tech-grid,.quality-grid,.about-grid,.range-grid)>div:last-child p{color:#cbd7ca}
:is(.biz-section,.how-section,.tech-section,.quality-section,.about-section,.range-section).paper+:is(.biz-section,.how-section,.tech-section,.quality-section,.about-section,.range-section) .action{border-color:#718879}
.how-hero+.how-section .how-steps article,.how-hero+.how-section .how-steps article+article{border-color:var(--rhythm-rule)}
.how-hero+.how-section .how-steps p{color:var(--rhythm-copy)}
.original-inside .ingredient-lines>div{border-color:var(--rhythm-rule)}
.original-inside .ingredient-lines small{color:#626b62}

/* Process photographs belong in recipe development, apart from the product catalogue. */
.tech-test-brews{padding:54px 6% 105px;background:var(--rhythm-paper);color:var(--rhythm-ink);border-top:1px solid var(--rhythm-rule)}
.tech-test-brews .section-top{color:#626a60;border-color:var(--rhythm-rule)}
.tech-test-intro{display:grid;grid-template-columns:53% 1fr;gap:8%;align-items:end;padding:88px 0 60px}
.tech-test-intro .eyebrow{color:var(--rhythm-orange)}
.tech-test-intro h2{font:500 clamp(46px,5.3vw,86px)/1.02 Bahnschrift,Arial,sans-serif;letter-spacing:-.06em;margin:20px 0 0}
.tech-test-intro h2 em{font-style:normal;color:var(--rhythm-orange)}
.tech-test-intro>p{max-width:480px;font-size:15px;line-height:1.85;color:var(--rhythm-copy)}
.tech-test-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(30px,6vw,100px);max-width:1010px;margin:0 auto}
.tech-test-grid figure{margin:0;min-width:0}
.tech-test-grid figure:nth-child(2){margin-top:50px}
.tech-test-grid img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:50%;-webkit-mask-image:radial-gradient(circle closest-side at center,#000 76%,rgba(0,0,0,.94) 82%,rgba(0,0,0,.45) 93%,transparent 100%);mask-image:radial-gradient(circle closest-side at center,#000 76%,rgba(0,0,0,.94) 82%,rgba(0,0,0,.45) 93%,transparent 100%)}
.tech-test-grid figcaption{display:flex;justify-content:space-between;gap:15px;padding:4px 9% 0;color:#5c675d;font:11px/1.5 Bahnschrift,Arial,sans-serif;letter-spacing:.09em;text-transform:uppercase}
.tech-test-grid figcaption strong{color:var(--rhythm-ink)}
.tech-test-grid figcaption span{text-align:right;letter-spacing:.02em;text-transform:none}
@media(max-width:900px){.tech-test-intro{grid-template-columns:1fr;gap:20px;padding:60px 0 40px}}
@media(max-width:700px){.tech-test-brews{padding:36px 7% 70px}.tech-test-intro{padding:47px 0 28px}.tech-test-intro h2{font-size:clamp(44px,10vw,64px)}.tech-test-intro>p{font-size:13px}.tech-test-grid{grid-template-columns:1fr;gap:24px;max-width:420px}.tech-test-grid figure:nth-child(2){margin-top:0}.tech-test-grid figcaption{font-size:10px}}

/* Brand stories: keep the identity mark in its dark gallery, brighten the explanation. */
.intro-steps{background:var(--rhythm-sage);color:var(--rhythm-ink);border-color:var(--rhythm-rule)}
.intro-steps .section-top{color:#59645a;border-color:var(--rhythm-rule)}
.intro-steps .intro-step-grid,.intro-steps .intro-step-grid>div,.intro-steps .intro-link{border-color:#a7b3a7}
.intro-steps .intro-step-grid p{color:var(--rhythm-copy)}
.intro-steps .intro-step-grid span,.intro-steps h2 em,.intro-steps .intro-link span{color:var(--rhythm-orange)}
.intro-next{background:#183027}

/* Shared accents on pale surfaces need more depth than the hero orange. */
:is(.soul,.products-compare,.original-inside,.intro-steps) .eyebrow{color:var(--rhythm-orange)}
:is(.soul,.products-compare,.original-inside,.intro-steps) h2 em{color:var(--rhythm-orange)}
@media(max-width:700px){.soul .giant{color:#d5d0c5}.products-compare .compare-row>span:nth-child(3):before,.products-compare .compare-row>span:nth-child(4):before{color:#657267}.products-compare .compare-row>span:nth-child(4){color:#3d4b40}}


/* film-preview.css */
.film-preview{display:block;width:min(100%,360px);margin:28px 0 0;padding:0;border:0;background:transparent;color:var(--white);text-align:left;cursor:pointer}
.film-preview-image{display:block;position:relative;aspect-ratio:16/9;overflow:hidden;background:#171715}
.film-preview-image img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .3s ease,filter .3s ease}
.film-preview:hover .film-preview-image img{transform:scale(1.035);filter:brightness(.85)}
.film-preview-play{position:absolute;top:50%;left:50%;display:grid;place-items:center;width:52px;height:52px;padding-left:3px;border:1px solid #ffffffb8;border-radius:50%;background:#05050599;color:#fff;font-size:16px;transform:translate(-50%,-50%)}
.film-preview-caption{display:flex;justify-content:space-between;gap:12px;margin-top:11px;font-size:12px;line-height:1.5}
.film-preview-caption span{color:var(--accent)}
.film-dialog{position:fixed;inset:0;width:min(92vw,1100px);max-width:none;max-height:none;margin:auto;padding:0;border:1px solid #4a4a46;background:#050505;color:#fff;overflow:visible}
.film-dialog::backdrop{background:#000d}
.film-dialog-player{aspect-ratio:16/9}
.film-dialog-player iframe{display:block;width:100%;height:100%;border:0}
.film-dialog-close{position:absolute;top:-48px;right:0;width:40px;height:40px;border:1px solid #aaa;border-radius:50%;background:#050505;color:#fff;cursor:pointer;font-size:27px;line-height:1}
@media(max-width:700px){.brew-stage{min-height:900px}.process-photo{top:465px;height:435px}.film-preview{width:min(100%,330px);margin-top:18px}.film-preview-caption{font-size:11px}.film-dialog{width:94vw}.film-dialog-close{top:-45px}}
@media(prefers-reduced-motion:reduce){.film-preview-image img{transition:none}}


/* section-rhythm.css */
/* Keep a section's heading and primary content together on laptop-height screens. */
@media (min-width:901px){
  .process{min-height:0;padding-top:36px;padding-bottom:42px}
  .process-heading{margin-top:28px}
  .process-heading>p{width:41%;padding-left:4%;margin:0;box-sizing:border-box}
  .process h2{font-size:clamp(42px,4vw,68px);line-height:1.12}
  .brew-stage{min-height:clamp(465px,43vw,560px);margin:12px 0 6px}
  .process-photo{width:60%;max-width:1050px;inset-inline-start:-3%}
  .brew-stage .stage-copy{width:41%;padding-left:4%}
  .stage-copy h3{margin:14px 0}
  .film-preview{width:min(100%,400px);margin-top:22px}
  .stage-tabs button{padding:16px 0}

  .soul{min-height:0;padding-top:36px;padding-bottom:45px}
  .soul .giant{font-size:clamp(140px,18vw,285px);margin:55px 0 0}
  .soul-copy{top:25%;left:51%;right:5%}
  .soul-copy h2{font-size:clamp(38px,3.7vw,55px);line-height:1.12;margin:18px 0 22px}

  .products-collection{padding-top:38px}
  .collection-heading{margin:40px 0 38px}
  .collection-heading-title .eyebrow{margin-bottom:17px}
  .collection-heading h2{font-size:clamp(49px,5vw,78px)}
  .products-compare{padding-top:38px;padding-bottom:72px}
  .compare-heading{margin:48px 0 40px}
  .products-business{padding-top:38px;padding-bottom:85px}
  .products-business .business-grid{padding-top:55px}

  .intro-statement,.intro-steps{padding-top:38px;padding-bottom:72px}
  .intro-statement-grid{padding-top:55px}
  .intro-steps h2{margin:45px 0 42px}
  .intro-step-grid>div{min-height:185px}
  .intro-next{padding-top:85px;padding-bottom:95px}

  .guide-hero+.how-section,.guide-hero~.how-section{padding-top:38px;padding-bottom:72px}
  .guide-hero+.how-section .how-grid,.guide-hero~.how-section .how-grid{padding-top:52px}
  .guide-hero~.how-section .how-steps{padding-top:55px}
  .guide-hero~.how-section .how-steps article{min-height:225px}
  .guide-hero~.how-section .how-steps h3{margin-top:35px}
}
@media (max-width:900px){
  .process{min-height:0}
  .soul{min-height:0}
}

/* On shorter desktop screens, keep each introduction with the content it introduces. */
@media (min-width:901px) and (max-height:850px){
  .process{padding-top:24px;padding-bottom:22px}
  .process .section-top{padding-bottom:17px}
  .process-heading{margin-top:18px}
  .process h2{font-size:clamp(42px,3.7vw,58px)}
  .brew-stage{min-height:425px;margin:8px 0 4px}
  .stage-tabs button{padding:11px 0}

  .discovery{padding-top:28px;padding-bottom:48px}
  .discovery .section-top{padding-bottom:17px}
  .discovery-head{padding:34px 0 30px}
  .discovery-card{height:clamp(365px,31vw,430px)}
  .field-notes{padding:25px 0 20px}
}


/* home-hero-balance.css */
/* Keep the opening image below the navigation and give the links a quiet backdrop. */
@media (min-width: 701px) {
  .hero-art {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%), linear-gradient(180deg, transparent, #000 13%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(90deg, transparent, #000 14%), linear-gradient(180deg, transparent, #000 13%);
    mask-composite: intersect;
  }
  .site-header { isolation: isolate; }
  .site-header::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 180px;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(0,0,0,.9), rgba(0,0,0,.61) 48%, transparent);
  }
  .hero-shade {
    background: linear-gradient(90deg, rgba(0,0,0,.45), transparent 64%),
                linear-gradient(0deg, #050505, transparent 18%);
  }
}

@media (min-width: 1600px) {
  .hero-copy { top: 24%; left: 7%; }
  html[lang=en] .hero-copy h1 { font-size: clamp(57px, 3.8vw, 66px); }
  html[lang=en] .hero-copy h1 strong { font-size: 1.4em; }
  .hero-copy .intro { font-size: 16px; }
}

/* Keep the one actionable scroll cue with its copy. The large background word
   stays inside its own column instead of sitting behind the link. */
@media (min-width: 701px) {
  .soul .giant {
    position: absolute;
    top: 27%;
    left: 3%;
    width: 43%;
    overflow: hidden;
    margin: 0;
    font-size: clamp(120px, 14vw, 245px);
    line-height: .8;
    pointer-events: none;
  }
  .soul-copy {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    z-index: 1;
    width: 46%;
    margin-left: 52%;
    padding: 72px 0 58px;
  }
  .soul-copy .down { margin-top: 30px; }
}

@media (max-width: 700px) {
  .soul { min-height: 0; padding-bottom: 72px; }
  .soul .giant {
    position: relative;
    width: 100%;
    margin: 48px 0 32px;
    font-size: clamp(100px, 29vw, 160px);
    line-height: .8;
    pointer-events: none;
  }
  .soul-copy {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    width: 100%;
    margin: 0;
  }
  .soul-copy .down { margin-top: 28px; }
}


/* discovery-cards.css */
.discovery-grid .story-card{background:#050505}
.discovery-grid .story-card img{inset:12% auto auto 21%;width:58%;height:56%;object-fit:contain;filter:brightness(0) invert(1)}
.discovery-grid .story-card::after{background:linear-gradient(180deg,transparent 52%,rgba(0,0,0,.88) 100%)}
.discovery-grid .recipe-card img{object-position:center 48%}
.discovery-grid .atlas-card img{object-position:center 43%}
.discovery-grid .recipe-card::after,.discovery-grid .atlas-card::after{background:linear-gradient(180deg,rgba(0,0,0,.13),transparent 34%,rgba(0,0,0,.82) 100%)}
.discovery-grid .recipe-card h3{max-width:10ch}


/* mobile-layout.css */
/* Mobile editorial rhythm: keep the first message and subject in one view. */
@media (max-width: 700px) {
  body > main > .hero { height: max(700px, calc(100svh - 60px)); }
  .hero-copy { top: 72px; }
  .hero-shade { background: linear-gradient(180deg, #050505 0%, #050505 12%, rgba(5,5,5,.88) 30%, transparent 54%), linear-gradient(0deg, #050505, transparent 12%); }
  .hero .intro, .hero .down, .process-heading p, .stage-copy p { font-size: 14px; line-height: 1.6; }

  .intro-hero, .products-hero, .enquiry-hero, .how-hero, .how-hero.guide-hero,
  .biz-hero, .about-hero, .quality-hero, .tech-hero,
  .business-overview-hero { padding-top: 78px; }
  .intro-hero h1, .products-hero h1, .enquiry-hero h1,
  .how-hero h1, html[lang=en] .how-hero h1,
  .biz-hero h1, html[lang=en] .biz-hero h1,
  .about-hero h1, html[lang=en] .about-hero h1,
  .quality-hero h1, html[lang=en] .quality-hero h1,
  .tech-hero h1, html[lang=en] .tech-hero h1,
  .business-overview-hero h1 { margin-top: 28px; }
  .business-overview-hero { align-items: flex-start; min-height: 640px; }
  .enquiry-hero { min-height: 690px; }
  .products-hero { min-height: 780px; }
  .products-hero-art { background-position: 66% bottom; }
  .intro-deck, .products-hero-copy > p:not(.eyebrow),
  .enquiry-hero-copy > p:not(.eyebrow), .how-hero .deck,
  .biz-hero .deck, .about-hero .deck, .quality-hero .deck,
  .tech-hero .deck, .business-overview-intro > p,
  .business-overview-next p, .voices-stage-head > p { font-size: 14px; line-height: 1.65; }

  .voices-intro { min-height: 650px; padding: 76px 7% 55px; align-items: flex-start; }
  .voices-kicker { margin-top: 30px; }
  .voices-lead { margin: 27px 0 35px; }

  .original-hero, .ginseng-hero, .mango-hero, .custom-hero, .vn-hero { min-height: 760px; }
  .original-hero-copy, .ginseng-copy, .mango-copy, .custom-copy, .vn-copy { padding-top: 78px; }
  .product-kicker, .concept-tag, .mango-tag, .custom-kicker, .vn-status { margin-top: 24px; }
  .product-desc, .ginseng-note, .mango-note, .custom-note, .vn-deck { font-size: 14px; line-height: 1.65; }
}

@media (max-width: 370px) {
  body > main > .hero { height: 710px; }
  .hero-copy { top: 60px; }
  .intro-hero, .products-hero, .enquiry-hero, .how-hero, .how-hero.guide-hero,
  .biz-hero, .about-hero, .quality-hero, .tech-hero,
  .business-overview-hero { padding-top: 66px; }
  .original-hero-copy, .ginseng-copy, .mango-copy, .custom-copy, .vn-copy { padding-top: 66px; }
}

/* Make the first message visible sooner on small screens without changing the desktop composition. */
@media (max-width: 700px) {
  .hero-copy { top: 46px; }
  .products-hero, .enquiry-hero { padding-top: 46px; }
  .products-hero { min-height: 790px; }
  .products-hero-art { background-size: auto 430px; }
  .enquiry-hero { min-height: 720px; }
  .enquiry-hero-art { background-size: auto 450px; }
}
@media (max-width: 370px) {
  .hero-copy { top: 38px; }
  .products-hero, .enquiry-hero { padding-top: 40px; }
}


/* comment-refinements.css */
/* Focused refinements to the homepage discovery cards and What is SULKIT? */
.discovery-card h3{font-weight:700;line-height:1.08}

.kit-hero::before{
  content:"술";
  position:absolute;
  z-index:0;
  left:48%;
  top:52%;
  transform:translate(-50%,-50%);
  color:rgba(234,244,237,.075);
  font-family:'Malgun Gothic',sans-serif;
  font-size:clamp(360px,39vw,680px);
  font-weight:900;
  line-height:1;
  pointer-events:none;
  white-space:nowrap;
}
.kit-logo-visual{position:relative;z-index:1}

@media(min-width:901px){
  .kit-hero h1{margin:28px 0 24px}
  .kit-hero .intro-lead{margin-bottom:18px}
  .kit-hero .down{margin-top:24px}
  .kit-page .intro-statement-grid{padding-top:28px}
  .kit-page .intro-statement{padding-bottom:64px}
}
@media(max-width:700px){
  .kit-hero::before{left:52%;top:56%;font-size:clamp(280px,78vw,430px);color:rgba(234,244,237,.055)}
  .kit-page .intro-statement-grid{padding-top:40px}
}