/* BOTUO Packaging - site-wide shared styles
   Palette: Scandinavian minimal, brand green #2ed642
   Contents: tokens, reset, layout, header/nav, buttons, cards, forms,
             article typography, breadcrumb, footer, utilities, animation */

:root {
  --brand: #2ed642;
  --brand-dark: #17a72e;
  --brand-deep: #0c6f1e;
  --brand-soft: #eafbe9;
  --ink: #101f19;
  --ink-soft: #24352d;
  --muted: #5f6f68;
  --line: #e4eae6;
  --line-strong: #cfd9d3;
  --bg: #ffffff;
  --bg-soft: #f5f8f6;
  --bg-deep: #0f1a15;
  --radius: 6px;
  --radius-lg: 12px;
  --shadow: 0 10px 30px rgba(16, 31, 25, 0.08);
  --shadow-sm: 0 4px 14px rgba(16, 31, 25, 0.06);
  --container: 1180px;
  --t: 200ms ease;
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Inter", "Helvetica Neue", Helvetica, Arial, system-ui, -apple-system, "Segoe UI",
    "Malgun Gothic", "Apple SD Gothic Neo", "Noto Sans KR", "Nanum Gothic",
    "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, "Noto Sans CJK KR", "Source Han Sans KR",
    "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", "Source Han Sans SC", sans-serif;
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--brand-deep); text-decoration: none; transition: color var(--t), opacity var(--t); }
a:hover { color: var(--brand-dark); text-decoration: underline; }
h1, h2, h3, h4 { color: var(--ink); line-height: 1.25; margin: 0 0 0.5em; font-weight: 700; letter-spacing: -0.01em; }
h1 { font-size: clamp(1.9rem, 3.4vw, 2.9rem); }
h2 { font-size: clamp(1.4rem, 2.4vw, 2rem); }
h3 { font-size: 1.12rem; }
p { margin: 0 0 1.05em; }
ul, ol { margin: 0 0 1.05em; padding-left: 1.15em; }
li { margin-bottom: 0.45em; }
hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }
figure { margin: 0 0 1.4rem; }
figcaption { font-size: 0.85rem; color: var(--muted); margin-top: 0.5rem; }
blockquote { margin: 0 0 1.4rem; padding: 0.4rem 0 0.4rem 1.1rem; border-left: 3px solid var(--brand); color: var(--ink-soft); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: #fff;
  padding: 10px 16px;
  z-index: 200;
}
.skip-link:focus { left: 8px; top: 8px; }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 20px;
}
.container-narrow { max-width: 860px; }
.section { padding: 64px 0; }
.section-sm { padding: 40px 0; }
.section-soft { background: var(--bg-soft); }
.section-dark { background: var(--bg-deep); color: #eaf2ee; }
.section-dark h1, .section-dark h2, .section-dark h3 { color: #fff; }
.section-dark a { color: #b9f5c3; }
.section-head { max-width: 720px; margin-bottom: 34px; }
.section-head p { color: var(--muted); margin-bottom: 0; }
.section-dark .section-head p { color: #b9c8c1; }
.eyebrow {
  display: inline-block;
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-deep);
  margin-bottom: 10px;
  font-weight: 600;
}
.section-dark .eyebrow { color: var(--brand); }

/* ---------- top bar + language switcher ---------- */
.topbar { border-bottom: 1px solid var(--line); background: var(--bg); font-size: 0.82rem; }
.topbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 40px; }
.topbar-contact { display: flex; flex-wrap: wrap; gap: 18px; color: var(--muted); }
.topbar-contact a { color: var(--muted); }
.topbar-contact a:hover { color: var(--brand-deep); }
.lang-switch { list-style: none; display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; }
.lang-switch li { margin: 0; }
.lang-switch a {
  display: inline-block;
  padding: 3px 8px;
  border-radius: var(--radius);
  color: var(--muted);
  font-size: 0.8rem;
  transition: background var(--t), color var(--t);
}
.lang-switch a:hover { background: var(--brand-soft); color: var(--brand-deep); text-decoration: none; }
.lang-switch a[aria-current="true"] { background: var(--brand); color: #08130d; font-weight: 600; }

/* ---------- header / nav ---------- */
.site-header { position: sticky; top: 0; z-index: 60; background: rgba(255, 255, 255, 0.96); backdrop-filter: saturate(150%) blur(6px); border-bottom: 1px solid var(--line); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 74px; }
.brand { display: flex; align-items: center; gap: 14px; color: var(--ink); font-weight: 700; }
.brand:hover { text-decoration: none; color: var(--ink); }
.brand-logo { height: 34px; width: auto; display: block; }
.brand-text { display: flex; flex-direction: column; line-height: 1.2; padding-left: 14px; border-left: 1px solid var(--line); }
.brand-text span { font-size: 0.68rem; color: var(--muted); letter-spacing: 0.08em; text-transform: uppercase; }
.nav-toggle {
  display: none;
  border: 1px solid var(--line-strong);
  background: #fff;
  color: var(--ink);
  border-radius: var(--radius);
  padding: 8px 13px;
  font-size: 0.86rem;
  cursor: pointer;
  transition: background var(--t), border-color var(--t);
}
.nav-toggle:hover { background: var(--bg-soft); border-color: var(--brand); }
/* top-level list only - nested sub-menus must stay stacked (not flex) */
.primary-nav > ul { list-style: none; display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; }
.primary-nav li { position: relative; margin: 0; }
.primary-nav > ul > li > a {
  display: block;
  padding: 10px 12px;
  color: var(--ink-soft);
  font-size: 0.92rem;
  border-radius: var(--radius);
  transition: background var(--t), color var(--t);
}
.primary-nav > ul > li > a:hover,
.primary-nav > ul > li > a:focus-visible { background: var(--bg-soft); color: var(--brand-deep); text-decoration: none; }
.primary-nav > ul > li.is-active > a { color: var(--brand-deep); font-weight: 600; }
.primary-nav > ul > li.has-sub { display: flex; align-items: center; }
.sub-toggle {
  border: 0;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  margin-left: -6px;
  padding: 10px 6px;
  font-size: 0.66rem;
  line-height: 1;
  border-radius: var(--radius);
  transition: color var(--t), background var(--t);
}
.sub-toggle:hover, .sub-toggle:focus-visible { color: var(--brand-deep); background: var(--bg-soft); }
.sub-menu {
  list-style: none;
  margin: 0;
  padding: 8px;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 262px;
  max-width: min(340px, calc(100vw - 32px));
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  display: none;
  z-index: 70;
}
/* the last dropdown opens right-aligned so it never runs off the page */
.primary-nav li.sub--end > .sub-menu { left: auto; right: 0; }
.primary-nav li.is-open > .sub-menu { display: block; }
.sub-menu li { margin: 0; }
.sub-menu a {
  display: block;
  padding: 8px 12px;
  border-radius: var(--radius);
  color: var(--ink-soft);
  font-size: 0.89rem;
  line-height: 1.45;
  transition: background var(--t), color var(--t), padding-left var(--t);
}
.sub-menu a:hover { background: var(--brand-soft); color: var(--brand-deep); text-decoration: none; padding-left: 16px; }
.sub-menu a[aria-current="page"] { color: var(--brand-deep); font-weight: 600; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  font-size: 0.93rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--t), color var(--t), border-color var(--t), transform var(--t), box-shadow var(--t);
}
.btn-primary { background: var(--brand); color: #08130d; }
.btn-primary:hover { background: var(--brand-dark); color: #06110b; text-decoration: none; transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.btn-primary:active { transform: translateY(0); }
.btn-ghost { background: #fff; border-color: var(--line-strong); color: var(--ink); }
.btn-ghost:hover { border-color: var(--brand); color: var(--brand-deep); text-decoration: none; }
.section-dark .btn-ghost { background: transparent; border-color: rgba(255, 255, 255, 0.35); color: #fff; }
.section-dark .btn-ghost:hover { border-color: var(--brand); color: #fff; }
.btn-link { padding: 0; background: none; border: 0; color: var(--brand-deep); font-weight: 600; }
.btn-link:hover { color: var(--brand-dark); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- generic grids + cards ---------- */
.grid { display: grid; gap: 22px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color var(--t), box-shadow var(--t), transform var(--t);
  display: flex;
  flex-direction: column;
}
.card:hover, .card:focus-within { border-color: var(--brand); box-shadow: var(--shadow); transform: translateY(-2px); }
.card-media { aspect-ratio: 4 / 3; background: var(--bg-soft); overflow: hidden; }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 320ms ease; }
.card:hover .card-media img { transform: scale(1.04); }
.card-body { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.card-body h3 { margin: 0; }
.card-body h3 a { color: var(--ink); }
.card-body h3 a:hover { color: var(--brand-deep); }
.card-body p { margin: 0; color: var(--muted); font-size: 0.92rem; }
.card-meta { font-size: 0.78rem; color: var(--muted); letter-spacing: 0.02em; text-transform: uppercase; }
.card-more { margin-top: auto; font-size: 0.88rem; font-weight: 600; }
.card-plain { padding: 22px; }
.card-plain h3 { margin-bottom: 8px; }

/* feature / info tiles */
.tile { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 24px; background: #fff; transition: border-color var(--t), box-shadow var(--t); }
.tile:hover { border-color: var(--brand); box-shadow: var(--shadow-sm); }
.tile h3 { margin-bottom: 10px; }
.tile p { color: var(--muted); margin: 0; font-size: 0.93rem; }
.tile-index { display: block; font-size: 0.74rem; letter-spacing: 0.16em; color: var(--brand-deep); font-weight: 700; margin-bottom: 12px; }

/* stats */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.stat { border-top: 2px solid var(--brand); padding-top: 16px; }
.stat .stat-value { font-size: clamp(1.6rem, 3vw, 2.3rem); font-weight: 700; letter-spacing: -0.02em; }
.stat .stat-label { color: var(--muted); font-size: 0.88rem; }

/* split media + text */
.split { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 44px; align-items: center; }
.split-media img { border-radius: var(--radius-lg); border: 1px solid var(--line); }
.split-reverse .split-media { order: 2; }

/* gallery (product photos) */
.gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; list-style: none; padding: 0; margin: 0; }
.gallery li { margin: 0; }
.gallery figure { margin: 0; }
.gallery .gallery-thumb { border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: var(--bg-soft); aspect-ratio: 1 / 1; transition: border-color var(--t), box-shadow var(--t); }
.gallery a:hover .gallery-thumb { border-color: var(--brand); box-shadow: var(--shadow-sm); }
.gallery img { width: 100%; height: 100%; object-fit: cover; }
.gallery figcaption { font-size: 0.88rem; color: var(--ink-soft); }
.gallery a { color: inherit; }
.gallery a:hover { text-decoration: none; }

/* lists */
.link-list { list-style: none; padding: 0; margin: 0; }
.link-list li { margin: 0; border-bottom: 1px solid var(--line); }
.link-list a { display: block; padding: 11px 2px; color: var(--ink-soft); font-size: 0.93rem; transition: color var(--t), padding-left var(--t); }
.link-list a:hover { color: var(--brand-deep); padding-left: 8px; text-decoration: none; }
.check-list { list-style: none; padding: 0; }
.check-list li { position: relative; padding-left: 26px; color: var(--ink-soft); }
.check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 11px;
  height: 6px;
  border-left: 2px solid var(--brand-dark);
  border-bottom: 2px solid var(--brand-dark);
  transform: rotate(-45deg);
}

/* article list (list pages) */
.post-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 20px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.post-list > li { margin: 0; }
.post-list-item { display: flex; flex-direction: column; height: 100%; }
.pagination { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 36px; }
.pagination a, .pagination span {
  display: inline-block;
  min-width: 40px;
  text-align: center;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink-soft);
  font-size: 0.9rem;
  transition: background var(--t), border-color var(--t), color var(--t);
}
.pagination a:hover { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-deep); text-decoration: none; }
.pagination .is-current { background: var(--ink); border-color: var(--ink); color: #fff; font-weight: 600; }
.pagination .is-disabled { color: var(--line-strong); }

/* ---------- breadcrumb ---------- */
.breadcrumb { padding: 18px 0 6px; font-size: 0.82rem; color: var(--muted); }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.breadcrumb li { margin: 0; display: flex; align-items: center; gap: 6px; }
.breadcrumb li + li::before { content: "/"; color: var(--line-strong); }
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--brand-deep); }

/* ---------- page hero ---------- */
.page-hero { padding: 52px 0 40px; border-bottom: 1px solid var(--line); background: var(--bg-soft); }
.page-hero p.lead { max-width: 680px; color: var(--muted); font-size: 1.05rem; }
.page-hero .btn-row { margin-top: 22px; }

/* ---------- article layout ---------- */
.layout-article { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 54px; align-items: start; }
.article-body { max-width: 780px; }
.article-body h2 { margin-top: 2.1em; }
.article-body h3 { margin-top: 1.7em; }
.article-body img { border-radius: var(--radius-lg); border: 1px solid var(--line); margin: 1.2rem 0; }
.article-meta { display: flex; flex-wrap: wrap; gap: 14px; font-size: 0.84rem; color: var(--muted); margin-bottom: 22px; }
.article-meta .tag { background: var(--brand-soft); color: var(--brand-deep); padding: 3px 10px; border-radius: 999px; font-weight: 600; }
.article-lead { font-size: 1.08rem; color: var(--ink-soft); }
.sidebar { position: sticky; top: 96px; }
.sidebar-block { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 20px; margin-bottom: 22px; background: #fff; }
.sidebar-block h3 { font-size: 1rem; margin-bottom: 12px; }
.sidebar-cta { background: var(--brand-soft); border-color: var(--brand); }
.sidebar-cta p { font-size: 0.9rem; color: var(--ink-soft); }

/* ---------- forms ---------- */
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field-full { grid-column: 1 / -1; }
.field label { font-size: 0.86rem; font-weight: 600; color: var(--ink-soft); }
.field input, .field textarea, .field select {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 0.94rem;
  transition: border-color var(--t), box-shadow var(--t);
}
.field input:hover, .field textarea:hover, .field select:hover { border-color: var(--brand-dark); }
.field input:focus, .field textarea:focus, .field select:focus,
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible {
  outline: none;
  border-color: var(--brand-dark);
  box-shadow: 0 0 0 3px rgba(46, 214, 66, 0.22);
}
.field textarea { min-height: 132px; resize: vertical; }
.form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 20px; }
.form-status { margin: 0; font-size: 0.9rem; color: var(--muted); min-height: 1.4em; }
.form-status.is-ok { color: var(--brand-deep); font-weight: 600; }
.form-status.is-error { color: #b3261e; font-weight: 600; }
.form-note { font-size: 0.82rem; color: var(--muted); }
.btn[disabled] { opacity: 0.6; cursor: not-allowed; transform: none; }

/* contact info blocks */
.contact-list { list-style: none; padding: 0; margin: 0; }
.contact-list li { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--line); margin: 0; }
.contact-list .k { color: var(--muted); font-size: 0.85rem; }
.contact-list .v { color: var(--ink); font-weight: 600; word-break: break-word; }

/* ---------- FAQ ---------- */
.faq { border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: #fff; }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:last-child { border-bottom: 0; }
.faq summary {
  cursor: pointer;
  padding: 16px 20px;
  font-weight: 600;
  color: var(--ink);
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  transition: background var(--t), color var(--t);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--brand-deep); font-weight: 700; }
.faq details[open] summary::after { content: "\2013"; }
.faq summary:hover { background: var(--bg-soft); color: var(--brand-deep); }
.faq .faq-body { padding: 0 20px 18px; color: var(--muted); }
.faq .faq-body p:last-child { margin-bottom: 0; }

/* ---------- footer ---------- */
.site-footer { background: var(--bg-deep); color: #c8d6cf; padding: 56px 0 22px; }
.site-footer h3 { color: #fff; font-size: 0.95rem; letter-spacing: 0.03em; margin-bottom: 14px; }
.site-footer a { color: #c8d6cf; }
.site-footer a:hover { color: var(--brand); }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 8px; font-size: 0.89rem; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 34px; }
.footer-brand { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.footer-logo-chip { background: #fff; border-radius: 10px; padding: 7px 12px; display: inline-flex; align-items: center; }
.footer-logo-chip img { height: 26px; width: auto; display: block; }
.footer-brand span { color: #fff; font-weight: 700; }
.footer-about { font-size: 0.89rem; color: #a9bbb3; }
.footer-social { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.footer-social a {
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radius);
  padding: 6px 11px;
  font-size: 0.8rem;
  transition: border-color var(--t), background var(--t), color var(--t);
}
.footer-social a:hover { border-color: var(--brand); background: rgba(46, 214, 66, 0.12); color: #fff; text-decoration: none; }
.footer-bottom {
  margin-top: 40px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  font-size: 0.8rem;
  color: #93a69e;
}
.footer-crawl { display: flex; gap: 14px; }
.footer-crawl a { color: #93a69e; }
.footer-crawl a:hover { color: var(--brand); }

/* ---------- 404 ---------- */
.error-code { font-size: clamp(3.4rem, 9vw, 6rem); font-weight: 700; color: var(--brand); letter-spacing: -0.04em; line-height: 1; }
.jump-form { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.jump-form input {
  flex: 1 1 240px;
  padding: 11px 13px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  font: inherit;
  font-size: 0.94rem;
}
.jump-form input:focus { outline: none; border-color: var(--brand-dark); box-shadow: 0 0 0 3px rgba(46, 214, 66, 0.22); }

/* ---------- utilities ---------- */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mt-24 { margin-top: 24px; }
.mt-32 { margin-top: 32px; }
.lead { font-size: 1.06rem; color: var(--ink-soft); }
.muted { color: var(--muted); }
.small { font-size: 0.85rem; }
.nowrap { white-space: nowrap; }
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* shared scrollable areas (long lists, FAQ, assistant panel) */
.scroll-area { scrollbar-width: thin; scrollbar-color: rgba(100, 116, 139, 0.35) transparent; }
.scroll-area::-webkit-scrollbar { width: 8px; height: 8px; }
.scroll-area::-webkit-scrollbar-thumb { background: rgba(100, 116, 139, 0.35); border-radius: 999px; }
.scroll-area::-webkit-scrollbar-track { background: transparent; }

/* ---------- entrance animation (JS-gated) ---------- */
html.js .reveal { opacity: 0; transform: translateY(16px); }
html.js .reveal.is-visible {
  opacity: 1;
  transform: none;
  transition: opacity 320ms ease, transform 320ms ease;
}
@media (prefers-reduced-motion: reduce) {
  html.js .reveal, html.js .reveal.is-visible { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
  .card:hover, .card:focus-within, .btn-primary:hover { transform: none; }
  .card:hover .card-media img { transform: none; }
}

/* ---------- responsive ---------- */
@media (max-width: 1024px) {
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .layout-article { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .sidebar { position: static; }
  .grid-4, .post-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .nav-toggle { display: inline-block; }
  .primary-nav {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: #fff;
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow);
    padding: 10px 20px 22px;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    scrollbar-width: thin;
  }
  .primary-nav.is-open { display: block; }
  .primary-nav > ul { flex-direction: column; align-items: stretch; gap: 0; }
  .primary-nav > ul > li { border-bottom: 1px solid var(--line); }
  .primary-nav > ul > li.has-sub { display: block; }
  .primary-nav > ul > li > a { padding: 13px 2px; }
  .sub-toggle { position: absolute; right: 0; top: 0; margin: 0; padding: 15px 8px; }
  .sub-menu {
    position: static;
    border: 0;
    box-shadow: none;
    padding: 0 0 8px 12px;
    min-width: 0;
    border-radius: 0;
    display: none;
  }
  .primary-nav li.is-open > .sub-menu { display: block; }
  .sub-menu a { padding: 9px 8px; }
  .split { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .split-reverse .split-media { order: 0; }
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .section { padding: 46px 0; }
}

@media (max-width: 620px) {
  .brand-text { display: none; }
  .brand-logo { height: 30px; }
  .grid-2, .grid-3, .grid-4, .post-list, .gallery, .stats { grid-template-columns: minmax(0, 1fr); }
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .contact-list li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .footer-grid { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .header-inner { min-height: 64px; }
  .topbar-contact { display: none; }
  .topbar-inner { justify-content: center; }
}