@font-face { font-family: 'Lato'; font-style: normal; font-weight: 400; font-display: swap; src: url('/css/fonts/hg-400a.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Lato'; font-style: normal; font-weight: 400; font-display: swap; src: url('/css/fonts/hg-400b.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Lato'; font-style: normal; font-weight: 700; font-display: swap; src: url('/css/fonts/hg-700a.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Lato'; font-style: normal; font-weight: 700; font-display: swap; src: url('/css/fonts/hg-700b.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Lato'; font-style: normal; font-weight: 900; font-display: swap; src: url('/css/fonts/hg-900a.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Lato'; font-style: normal; font-weight: 900; font-display: swap; src: url('/css/fonts/hg-900b.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
:root {
  --cc-bg: #ffffff;
  --cc-text: #111111;
  --cc-text-secondary: #333333;
  --cc-border: #111111;
  --cc-primary: #111111;
  --cc-primary-hover: #000000;
  --cc-secondary: #ffffff;
  --cc-secondary-hover: #f3f4f6;
  --cc-secondary-border: #d1d5db;
  --cc-toggle-bg: #d1d5db;
  --cc-toggle-active: #111111;
  --cc-overlay: rgba(0, 0, 0, 0.6);
  --cc-shadow: 0 -4px 20px rgba(0,0,0,0.35);
  --cc-radius: 12px;
  --cc-radius-sm: 10px;
  --cc-transition: 0.3s ease;
  --cc-z-index: 99999;
}
.cc-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.cc-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: var(--cc-z-index);
  background: var(--cc-bg);
  box-shadow: var(--cc-shadow);
  transform: translateY(100%);
  opacity: 0;
  visibility: hidden;
  transition: transform var(--cc-transition), opacity var(--cc-transition), visibility var(--cc-transition);
  font-family: 'Lato', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--cc-text);
}
.cc-banner.cc-visible {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
}
.cc-banner-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.5rem 2rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.cc-banner-content {
  flex: 1 1 auto;
  min-width: 280px;
  max-width: 700px;
}
.cc-title {
  font-size: 1.125rem;
  font-weight: 600;
  margin: 0 0 0.5rem 0;
  color: var(--cc-text);
}
.cc-description {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--cc-text-secondary);
  line-height: 1.6;
}
.cc-link {
  color: var(--cc-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.cc-link:hover {
  text-decoration: none;
}
.cc-banner-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  flex-shrink: 0;
}
.cc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.85em 1.7em;
  font-size: 0.9375rem;
  font-weight: 600;
  border-radius: var(--cc-radius-sm);
  cursor: pointer;
  transition: all var(--cc-transition);
  text-decoration: none;
  border: 2px solid transparent;
  min-height: 48px;
  line-height: 1.2;
  font-family: inherit;
}
.cc-btn:focus-visible {
  outline: 2px solid var(--cc-primary);
  outline-offset: 2px;
}
.cc-btn-primary {
  background: var(--cc-primary);
  color: #ffffff;
  border-color: var(--cc-primary);
}
.cc-btn-primary:hover {
  background: var(--cc-primary-hover);
  border-color: var(--cc-primary-hover);
}
.cc-btn-secondary {
  background: var(--cc-secondary);
  color: var(--cc-text);
  border-color: var(--cc-secondary-border);
}
.cc-btn-secondary:hover {
  background: var(--cc-secondary-hover);
  border-color: var(--cc-text);
}
.cc-btn-link {
  background: transparent;
  color: var(--cc-primary);
  border-color: transparent;
  padding: 0.75rem 1rem;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.cc-btn-link:hover {
  text-decoration: none;
  background: #1111111A;
}
.cc-settings-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: calc(var(--cc-z-index) + 1);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--cc-transition), visibility var(--cc-transition);
  font-family: 'Lato', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--cc-text);
}
.cc-settings-modal.cc-visible {
  opacity: 1;
  visibility: visible;
}
.cc-settings-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--cc-overlay);
  cursor: pointer;
}
.cc-settings-container {
  position: relative;
  background: var(--cc-bg);
  border-radius: var(--cc-radius);
  max-width: 600px;
  width: 90%;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
  transform: scale(0.95);
  transition: transform var(--cc-transition);
}
.cc-settings-modal.cc-visible .cc-settings-container {
  transform: scale(1);
}
.cc-settings-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem;
  border-bottom: 1px solid var(--cc-border);
}
.cc-settings-title {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0;
  color: var(--cc-text);
}
.cc-settings-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: transparent;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  color: var(--cc-text-secondary);
  transition: all var(--cc-transition);
}
.cc-settings-close:hover {
  background: var(--cc-secondary-hover);
  color: var(--cc-text);
}
.cc-settings-close:focus {
  outline: 2px solid var(--cc-primary);
  outline-offset: 2px;
}
.cc-settings-body {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem;
}
.cc-settings-description {
  margin: 0 0 1.5rem 0;
  font-size: 0.9375rem;
  color: var(--cc-text-secondary);
}
.cc-settings-footer {
  padding: 1.5rem;
  border-top: 1px solid var(--cc-border);
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
}
.cc-category {
  padding: 1rem 0;
  border-bottom: 1px solid var(--cc-border);
}
.cc-category:last-child {
  border-bottom: none;
}
.cc-category-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}
.cc-category-info {
  flex: 1;
}
.cc-category-title {
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 0.25rem 0;
  color: var(--cc-text);
}
.cc-category-description {
  font-size: 0.875rem;
  color: var(--cc-text-secondary);
  margin: 0;
  line-height: 1.5;
}
.cc-toggle {
  flex-shrink: 0;
}
.cc-toggle input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.cc-toggle-label {
  display: block;
  width: 52px;
  height: 28px;
  background: var(--cc-toggle-bg);
  border-radius: 14px;
  position: relative;
  cursor: pointer;
  transition: background var(--cc-transition);
}
.cc-toggle-label::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  background: #ffffff;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
  transition: transform var(--cc-transition);
}
.cc-toggle input:checked + .cc-toggle-label {
  background: var(--cc-toggle-active);
}
.cc-toggle input:checked + .cc-toggle-label::after {
  transform: translateX(24px);
}
.cc-toggle input:focus-visible + .cc-toggle-label {
  box-shadow: 0 0 0 3px #1111114D;
}
.cc-toggle-disabled .cc-toggle-label {
  opacity: 0.7;
  cursor: not-allowed;
}
.cc-toggle-disabled input:checked + .cc-toggle-label {
  background: var(--cc-toggle-active);
}
.cc-footer-link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  opacity: 0.8;
  transition: opacity var(--cc-transition);
  cursor: pointer;
  font-size: 0.875rem;
}
.cc-footer-link:hover {
  opacity: 1;
}
.cc-footer-separator {
  opacity: 0.5;
}
@media (max-width: 768px) {
  .cc-banner-container {
    flex-direction: column;
    align-items: stretch;
    padding: 1.25rem 1rem;
    gap: 1.25rem;
  }
  
  .cc-banner-content {
    max-width: 100%;
    min-width: auto;
  }
  
  .cc-title {
    font-size: 1rem;
  }
  
  .cc-description {
    font-size: 0.875rem;
  }
  
  .cc-banner-actions {
    flex-direction: column;
    gap: 0.5rem;
  }
  
  .cc-btn {
    width: 100%;
    justify-content: center;
  }
  
  .cc-btn-primary,
  .cc-btn-secondary {
    order: 0;
  }
  
  .cc-btn-link {
    order: 1;
  }
  
  .cc-settings-container {
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    border-radius: 0;
  }
  
  .cc-settings-body {
    padding: 1rem;
  }
  
  .cc-category-header {
    flex-direction: column;
    gap: 0.75rem;
  }
  
  .cc-toggle {
    align-self: flex-start;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cc-banner,
  .cc-settings-modal,
  .cc-settings-container,
  .cc-btn,
  .cc-toggle-label,
  .cc-toggle-label::after,
  .cc-settings-close {
    transition: none;
  }
}
@media print {
  .cc-banner,
  .cc-settings-modal {
    display: none !important;
  }
}
[data-mm-header]{--mm-bg:#111111;--mm-text:#ffffff;--mm-primary:#bdbdbd;--mm-overlay-bg:rgba(0,0,0,0.7);--mm-transition:0.3s ease}[data-mm-header]{position:relative}[data-mm-toggle]{display:flex;flex-direction:column;justify-content:center;gap:5px;background:none;border:none;cursor:pointer;padding:8px;z-index:1001}[data-mm-toggle] span{display:block;width:24px;height:2px;background:var(--mm-text);transition:var(--mm-transition)}[data-mm-menu]{position:fixed;top:0;left:0;width:100%;height:100vh;height:100dvh;background:var(--mm-bg);opacity:0;visibility:hidden;transition:opacity var(--mm-transition),visibility var(--mm-transition);z-index:1100;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:24px}[data-mm-menu].mm-open{opacity:1;visibility:visible}[data-mm-menu] ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;align-items:center;gap:8px}[data-mm-menu] ul li a{display:block;padding:12px 24px;color:var(--mm-text);text-decoration:none;font-size:22px;font-weight:500;transition:color var(--mm-transition)}[data-mm-menu] ul li a:hover{color:var(--mm-primary)}[data-mm-close]{position:absolute;top:20px;right:20px;background:none;border:none;font-size:32px;line-height:1;cursor:pointer;color:var(--mm-text);padding:4px 8px;z-index:1101}@media(min-width:768px){[data-mm-toggle]{display:none!important}[data-mm-menu]{position:static!important;width:auto!important;height:auto!important;background:transparent!important;opacity:1!important;visibility:visible!important;padding:0!important;flex-direction:row!important;justify-content:flex-end!important}[data-mm-menu] ul{flex-direction:row;gap:0;align-items:center}[data-mm-menu] ul li a{padding:8px 16px;font-size:inherit;font-weight:inherit}[data-mm-close]{display:none!important}}@media(prefers-reduced-motion:reduce){[data-mm-menu],[data-mm-toggle] span{transition:none!important}}
:root {
  --surface-base: #ffffff;
  --surface-raised: #f5f5f5;
  --surface-ink: #111111;
  --surface-deep: #000000;
  --surface-overlay: rgba(0, 0, 0, 0.7);
  --text-strong: #111111;
  --text-body: #333333;
  --text-muted: #666666;
  --text-on-ink: #ffffff;
  --text-on-ink-muted: #c4c4c4;
  --action-primary: #111111;
  --action-primary-end: #4a4a4a;
  --action-hover: #000000;
  --action-focus: rgba(17, 17, 17, 0.35);
  --line-soft: #d9d9d9;
  --line-ink: #2e2e2e;
  --notice-ok: #e9f3ea;
  --notice-error: #f8e7e7;
  --font-main: 'Lato', -apple-system, BlinkMacSystemFont, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

body { display: flex; flex-direction: column; min-height: 100vh; margin: 0; background: var(--surface-base); color: var(--text-body); font-family: var(--font-main); font-size: 1.0625em; line-height: 1.6; }
main { display: flex; flex-direction: column; gap: 2em; flex: 1; }
section { flex: 1 1 auto; }
body, h1, h2, h3, h4, h5, h6 { font-family: var(--font-main); }
h1 { font-size: 3em; font-weight: 900; line-height: 1.15; letter-spacing: -0.01em; color: var(--text-strong); margin: 0 0 0.4em; }
h2 { font-size: 2em; font-weight: 700; line-height: 1.2; color: var(--text-strong); margin: 0 0 0.6em; }
h3 { font-size: 1.375em; font-weight: 700; line-height: 1.3; color: var(--text-strong); margin: 0 0 0.5em; }
p { font-size: 1em; line-height: 1.65; font-weight: 400; margin: 0 0 1em; }
a { color: var(--text-strong); text-underline-offset: 0.2em; }
img { max-width: 100%; height: auto; display: block; }
table { width: 100%; border-collapse: collapse; }
button { font-family: inherit; transition: all 0.2s ease; }
button:active { transform: scale(0.95); }
input:focus, textarea:focus, select:focus { box-shadow: 0 0 0 3px var(--action-focus); outline: none; }


.flex { display: flex; }
.grid { display: grid; }
.block { display: block; }
.col { flex-direction: column; }
.row { flex-direction: row; }
.wrap { flex-wrap: wrap; }
.grow { flex: 1 1 auto; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-half { gap: 0.5em; }
.gap-1 { gap: 1em; }
.gap-2 { gap: 2em; }
.center { text-align: center; }
.mx-auto { margin-left: auto; margin-right: auto; }
.m-0 { margin: 0; }
.mb-1 { margin-bottom: 1em; }
.mb-2 { margin-bottom: 2em; }
.mt-1 { margin-top: 1em; }
.mt-2 { margin-top: 2em; }
.w-full { width: 100%; }
.max-w { max-width: 72em; }
.max-w-text { max-width: 46em; }
.max-w-hero { max-width: 50em; }
.small { font-size: 0.875em; }
.bold { font-weight: 700; }
.black { font-weight: 900; }
.upper { text-transform: uppercase; }
.track { letter-spacing: 0.12em; }
.nowrap { white-space: nowrap; }
.muted { color: var(--text-muted); }
.list-plain { list-style: none; padding: 0; margin: 0; }
.rounded { border-radius: 12px; }
.bg-paper { background: var(--surface-base); color: var(--text-body); }
.bg-mist { background: var(--surface-raised); color: var(--text-body); }
.bg-ink { background: var(--surface-ink); color: var(--text-on-ink); }
.bg-ink h2, .bg-ink h3, .bg-ink a { color: var(--text-on-ink); }
.bg-ink .muted { color: var(--text-on-ink-muted); }
.is-hidden { display: none !important; }


article > section:nth-child(odd) { padding: 3em 1.25em 5em; }
article > section:nth-child(even) { padding: 5em 1.25em 3em; }
.l-inner { width: 100%; max-width: 72em; margin-left: auto; margin-right: auto; }
.content { padding-left: 4%; padding-right: 2%; }

.l-header { position: sticky; top: 0; z-index: 1000; display: flex; align-items: center; gap: 1em; padding: 0.7em 1.5em; background: var(--surface-ink); color: var(--text-on-ink); border-bottom: 1px solid var(--line-ink); }
.l-header-brand { flex: 1 1 auto; display: flex; align-items: center; gap: 0.6em; color: var(--text-on-ink); text-decoration: none; }
.l-header-mark { width: 2.5em; height: 2.5em; }
.l-header-name { font-size: 1.25em; font-weight: 900; letter-spacing: 0.02em; }
.kettle-nav-list { gap: 0.25em; }
.kettle-nav-link { color: var(--text-on-ink); text-decoration: none; font-weight: 700; font-size: 0.9375em; border-radius: 8px; transition: background-color 0.2s ease, color 0.2s ease; }
.kettle-nav-link:hover, .kettle-nav-link[aria-current="page"] { background: #2a2a2a; color: var(--text-on-ink); }
.kettle-nav-link:active { transform: scale(0.95); }
.l-header-close { color: var(--text-on-ink); }
.l-header-phone { color: var(--text-on-ink); text-decoration: none; font-weight: 700; line-height: 1.25; text-align: right; }
.l-header-phone small { display: block; font-weight: 400; color: var(--text-on-ink-muted); }
.l-header-cart { display: inline-flex; align-items: center; gap: 0.5em; min-height: 2.75em; padding: 0.4em 0.9em; border: 2px solid var(--text-on-ink); border-radius: 10px; color: var(--text-on-ink); text-decoration: none; font-weight: 700; transition: background-color 0.2s ease; }
.l-header-cart:hover { background: #2a2a2a; }
.l-header-cart b { display: inline-grid; place-items: center; min-width: 1.5em; height: 1.5em; padding: 0 0.35em; border-radius: 1em; background: var(--text-on-ink); color: var(--surface-ink); font-size: 0.875em; }
.l-header-toggle { margin-left: auto; min-width: 2.75em; min-height: 2.75em; align-items: center; }
.btn-plain { background: none; border: none; cursor: pointer; }

.kettle-services { background: var(--surface-raised); border-bottom: 1px solid var(--line-soft); padding: 0.4em 1em; }
.kettle-services-list { gap: 0.25em 1.25em; }
.kettle-services-link { display: inline-block; padding: 0.5em 0.25em; color: var(--text-strong); text-decoration: none; font-weight: 700; letter-spacing: 0.06em; border-bottom: 2px solid transparent; transition: border-color 0.2s ease; }
.kettle-services-link:hover, .kettle-services-link.is-active { border-bottom-color: var(--text-strong); }
.kettle-services-link span { color: var(--text-muted); font-weight: 400; }


.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5em; min-height: 2.75em; text-decoration: none; font-family: inherit; font-size: 1em; line-height: 1.2; text-align: center; transition: all 0.2s ease; }
.btn-primary { background: linear-gradient(135deg, var(--action-primary), var(--action-primary-end)); color: #ffffff; border: none; border-radius: 10px; padding: 0.85em 1.7em; font-weight: 600; cursor: pointer; }
.btn-primary:hover { background: linear-gradient(135deg, var(--action-hover), #2b2b2b); color: #ffffff; box-shadow: 0 0.4em 1em rgba(0, 0, 0, 0.25); }
.btn-primary:active { transform: scale(0.95); }
.btn-primary:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; }
.btn-light { background: linear-gradient(135deg, #ffffff, #d4d4d4); color: var(--text-strong); }
.btn-light:hover { background: linear-gradient(135deg, #ffffff, #ffffff); color: var(--text-strong); }
.bg-ink a.btn-light, .bg-ink a.btn-light:hover { color: var(--text-strong); }
.btn-ghost { background: transparent; color: inherit; border: 2px solid currentColor; border-radius: 10px; padding: 0.75em 1.6em; font-weight: 600; cursor: pointer; }
.btn-ghost:hover { background: rgba(255, 255, 255, 0.12); }
.btn-small { padding: 0.6em 1.1em; font-size: 0.9375em; }
.btn.is-added { transform: scale(0.95); }


article > section.kettle-introduction { position: relative; min-height: 88vh; padding: 5em 1em 0; text-align: center; color: var(--text-on-ink); background: linear-gradient(to bottom, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.86)), url('/images/hero-dobozok.jpg') center / cover no-repeat, #111111; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.l-hero-content { position: relative; z-index: 1; padding: 1em 1em 0; }
.l-hero h1 { color: var(--text-on-ink); }
.l-hero-tag { display: inline-block; margin-bottom: 1.2em; padding: 0.35em 1.1em; border: 1px solid rgba(255, 255, 255, 0.6); border-radius: 2em; }
.l-hero-lead { font-size: 1.1875em; color: #e9e9e9; max-width: 36em; margin-left: auto; margin-right: auto; }
.l-hero-actions { margin: 1.6em 0 0.5em; }
.stats-bar { display: flex; justify-content: center; gap: 3em; padding: 2em; flex-wrap: wrap; position: relative; z-index: 1; }
.stat-item { text-align: center; display: flex; flex-direction: column; }
.stat-number { font-size: 2.5em; font-weight: 800; line-height: 1.1; color: var(--text-on-ink); }
.stat-label { font-size: 0.875em; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-on-ink-muted); }
.l-hero-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5em; width: 100%; max-width: 62em; margin: 0 auto; padding: 0; list-style: none; transform: translateY(40%); position: relative; z-index: 2; text-align: left; }
article > section.l-after-hero { padding-top: 13em; }


.card { position: relative; padding: 2em 1.75em; border-radius: 12px; background: #ffffff; color: var(--text-body); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.07); overflow: hidden; transition: box-shadow 0.2s ease, transform 0.2s ease; }
.card::before { content: attr(data-step); position: absolute; top: -0.2em; right: 0.2em; font-size: 5em; font-weight: 800; color: rgba(17, 17, 17, 0.08); line-height: 1; pointer-events: none; }
.card:hover { box-shadow: 0 10px 26px rgba(0, 0, 0, 0.14); }
.card-tea { padding: 0; }
.card-tea::before { top: auto; bottom: -0.12em; right: 0.15em; }
.card-image img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; background: var(--surface-raised); }
.card-content { position: relative; z-index: 1; padding: 1.1em 1.2em 1.3em; }
.card-kind { color: var(--text-muted); margin: 0; }
.card-title { font-size: 1.125em; }
.card-link { color: var(--text-strong); text-decoration: none; }
.card-link:hover { text-decoration: underline; }
.card-meta { color: var(--text-muted); margin: 0; }
.card-text { font-size: 0.9375em; }
.card-price { font-size: 1.1875em; }
.card-foot { margin-top: auto; padding-top: 0.6em; }
.card-icon { display: inline-grid; place-items: center; width: 3em; height: 3em; border-radius: 50%; background: var(--surface-ink); color: var(--text-on-ink); margin-bottom: 0.9em; }
.card-mini img { aspect-ratio: 4 / 3; }

.kettle-resources-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5em; }
.kettle-resources-item { display: flex; }
.kettle-advantages-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5em; }
.l-section-head { max-width: 46em; margin-bottom: 2em; }
.l-eyebrow { color: var(--text-muted); margin-bottom: 0.6em; }
.bg-ink .l-eyebrow { color: var(--text-on-ink-muted); }


.section-divider { background: var(--surface-ink); color: #ffffff; overflow: hidden; white-space: nowrap; padding: 0.5em 0; font-size: 0.85em; letter-spacing: 0.1em; text-transform: uppercase; }
.section-divider span { display: inline-block; animation: ticker 18s linear infinite; }
.section-divider-light { background: var(--surface-raised); color: var(--text-strong); border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }


article > section.kettle-heritage { background: linear-gradient(90deg, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.72)), url('/images/about-levelek.jpg') center / cover no-repeat, #111111; color: var(--text-on-ink); }
.kettle-heritage h2, .kettle-heritage h3 { color: var(--text-on-ink); }
.kettle-heritage-cols { display: grid; grid-template-columns: 1.1fr 1fr; gap: 3em; }
.kettle-heritage-kinds { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25em; }
.kettle-heritage-kind { border-top: 2px solid rgba(255, 255, 255, 0.5); padding-top: 0.8em; }
.kettle-heritage-kind p { color: #dedede; font-size: 0.9375em; }


.faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5em 2.5em; }
.faq-item { border-left: 3px solid var(--surface-ink); padding-left: 1em; }
.faq-q { font-weight: 700; margin-bottom: 0.4em; font-size: 1.0625em; color: var(--text-strong); }
.faq-a { margin: 0; }

.kettle-closing-brief .btn { margin-top: 0.5em; }


.l-page-head { margin-bottom: 1.5em; }
.l-crumbs { font-size: 0.875em; color: var(--text-muted); margin-bottom: 1.2em; }
.l-crumbs ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.4em; }
.l-crumbs li + li::before { content: '›'; margin-right: 0.4em; }
.l-crumbs a { color: var(--text-muted); }
.l-prose h2 { font-size: 1.5em; margin-top: 1.4em; }
.l-prose h3 { font-size: 1.1875em; margin-top: 1.2em; }
.l-prose ul, .l-prose ol { padding-left: 1.3em; margin: 0 0 1em; }
.l-prose li { margin-bottom: 0.4em; }
.data-table th, .data-table td { text-align: left; vertical-align: top; padding: 0.7em 1em 0.7em 0; border-bottom: 1px solid var(--line-soft); }
.data-table th { width: 34%; color: var(--text-strong); font-weight: 700; }
.l-notice { padding: 1em 1.2em; border-radius: 10px; border-left: 4px solid var(--surface-ink); margin-bottom: 1.5em; }
.l-notice-ok { background: var(--notice-ok); }
.l-notice-error { background: var(--notice-error); }


.kettle-service-groups-tabs { gap: 0.6em; margin-top: 1.4em; }
.kettle-service-groups-tab { display: inline-flex; align-items: center; min-height: 2.75em; padding: 0.5em 1.1em; border: 2px solid var(--surface-ink); border-radius: 2em; color: var(--text-strong); text-decoration: none; font-weight: 700; font-size: 0.9375em; transition: all 0.2s ease; }
.kettle-service-groups-tab:hover, .kettle-service-groups-tab.is-active { background: var(--surface-ink); color: var(--text-on-ink); }


.kettle-retainer-layout { display: grid; grid-template-columns: 1.1fr 1fr; gap: 3em; align-items: start; }
.kettle-gallery-main img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 12px; background: var(--surface-raised); }
.kettle-gallery-thumbs { gap: 0.75em; margin-top: 0.9em; }
.kettle-gallery-thumb { width: 5.5em; height: 5.5em; padding: 0; border: 2px solid transparent; border-radius: 10px; overflow: hidden; background: none; cursor: pointer; }
.kettle-gallery-thumb.is-active { border-color: var(--surface-ink); }
.kettle-gallery-thumb img { width: 100%; height: 100%; object-fit: cover; }
.kettle-retainer-price { font-size: 2em; font-weight: 900; color: var(--text-strong); margin: 0.2em 0; }
.kettle-retainer-stock { color: var(--text-body); }
.kettle-stepper { display: inline-flex; align-items: center; border: 2px solid var(--surface-ink); border-radius: 10px; overflow: hidden; }
.kettle-stepper-btn { width: 2.75em; height: 2.75em; border: none; background: var(--surface-raised); font-size: 1.125em; font-weight: 700; cursor: pointer; color: var(--text-strong); }
.kettle-stepper-input { width: 3.2em; height: 2.75em; border: none; text-align: center; font: inherit; font-weight: 700; -moz-appearance: textfield; }
.kettle-stepper-input::-webkit-outer-spin-button, .kettle-stepper-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.kettle-retainer-buy { gap: 0.9em; margin: 1.2em 0; }
.kettle-brew-box { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.6em; margin: 1.2em 0; }
.kettle-brew-cell { background: var(--surface-raised); border-radius: 10px; padding: 0.7em; text-align: center; }
.kettle-brew-cell b { display: block; font-size: 1.125em; color: var(--text-strong); }
.kettle-brew-cell span { font-size: 0.8125em; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; }
.kettle-schedule-a-cols { display: grid; grid-template-columns: 1.2fr 1fr; gap: 3em; }


.kettle-toast { position: fixed; top: 5.5em; right: 1em; z-index: 1050; width: min(22em, calc(100vw - 2em)); background: var(--surface-ink); color: var(--text-on-ink); border-radius: 12px; padding: 1em 1.2em; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35); }
.kettle-toast p { margin: 0 0 0.7em; }
.kettle-toast-link { color: var(--text-on-ink); font-weight: 700; }
.kettle-toast-close { color: var(--text-on-ink); text-decoration: underline; padding: 0; min-height: 2.75em; }


.kettle-docket-layout { display: grid; grid-template-columns: 1.4fr 1fr; gap: 2.5em; align-items: start; }
.kettle-docket-line { display: grid; grid-template-columns: 5em 1fr auto; gap: 1em; align-items: center; padding: 1em 0; border-bottom: 1px solid var(--line-soft); }
.kettle-docket-line img { width: 5em; height: 5em; object-fit: cover; border-radius: 10px; background: var(--surface-raised); }
.kettle-docket-name { font-weight: 700; color: var(--text-strong); text-decoration: none; }
.kettle-docket-sub { font-size: 0.875em; color: var(--text-muted); margin: 0.2em 0 0.5em; }
.kettle-docket-ctrl { display: flex; align-items: center; gap: 0.8em; flex-wrap: wrap; }
.kettle-docket-remove { color: var(--text-muted); text-decoration: underline; padding: 0; min-height: 2.75em; font-size: 0.875em; }
.kettle-docket-sum { font-weight: 700; white-space: nowrap; }
.kettle-docket-totals { margin-top: 1.2em; }
.kettle-docket-row { display: flex; justify-content: space-between; padding: 0.35em 0; }
.kettle-docket-grand { font-size: 1.25em; font-weight: 900; border-top: 2px solid var(--surface-ink); margin-top: 0.4em; padding-top: 0.6em !important; }
.kettle-docket-empty { padding: 2em; text-align: center; background: var(--surface-raised); border-radius: 12px; }
.kettle-engagement-box { background: var(--surface-raised); border-radius: 12px; padding: 1.75em; }
.kettle-engagement-steps { counter-reset: step; margin: 0 0 1.4em; }
.kettle-engagement-step { counter-increment: step; position: relative; padding-left: 2.4em; margin-bottom: 0.7em; }
.kettle-engagement-step::before { content: counter(step); position: absolute; left: 0; top: 0; width: 1.7em; height: 1.7em; border-radius: 50%; background: var(--surface-ink); color: var(--text-on-ink); display: grid; place-items: center; font-weight: 700; font-size: 0.875em; }


.form { display: grid; gap: 1em; }
.form-group { display: flex; flex-direction: column; gap: 0.35em; text-align: left; }
.form-label { font-weight: 700; font-size: 0.9375em; }
.form-input { width: 100%; font: inherit; font-size: 1em; padding: 0.75em 0.9em; border: 2px solid var(--line-soft); border-radius: 10px; background: #ffffff; color: var(--text-strong); transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.form-input:focus { border-color: var(--surface-ink); }
textarea.form-input { min-height: 7em; resize: vertical; }
.form-check { display: flex; gap: 0.6em; align-items: flex-start; text-align: left; font-size: 0.9375em; }
.form-check input { width: 1.25em; height: 1.25em; margin: 0.2em 0 0; accent-color: #111111; flex: 0 0 auto; }
.form-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }


.l-footer { text-align: center; background: #000000; color: #cfcfcf; padding: 3em 1em; }
.l-footer a { color: #ffffff; }
.kettle-inquiries { max-width: 40em; margin: 0 auto 2.5em; padding-bottom: 2.5em; border-bottom: 1px solid var(--line-ink); }
.kettle-inquiries h2 { color: #ffffff; font-size: 1.625em; }
.kettle-inquiries .form-label, .kettle-inquiries .form-check { color: #e6e6e6; }
.kettle-inquiries-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1em; }
.l-footer-tagline { font-size: 1.125em; color: #ffffff; max-width: 34em; margin: 0 auto; }
.l-footer-icons { display: flex; gap: 1em; justify-content: center; margin: 1.25em 0; }
.l-footer-icon { width: 3.25em; height: 3.25em; border-radius: 50%; display: grid; place-items: center; background: #1f1f1f; color: #ffffff; transition: background-color 0.2s ease, transform 0.2s ease; }
.l-footer-icon:hover { background: #ffffff; color: #000000; }
.l-footer-icon:active { transform: scale(0.95); }
.l-footer-links { gap: 0.3em 1.2em; margin: 0 0 0.8em; }
.l-footer-link { color: #cfcfcf; font-size: 0.875em; display: inline-block; padding: 0.35em 0; }
.l-footer-link:hover { color: #ffffff; }
.l-footer-copy { font-size: 0.8125em; color: #9a9a9a; margin: 1em 0 0; }


@media (max-width: 1100px) {
  .l-header-phone { display: none; }
  .kettle-resources-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kettle-advantages-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  h1 { font-size: 2.5em; }
}
@media (max-width: 1023px) {
  .is-wide-only { display: none; }
  .kettle-nav-link { font-size: 0.875em; }
  .kettle-retainer-layout, .kettle-docket-layout, .kettle-schedule-a-cols, .kettle-heritage-cols { grid-template-columns: 1fr; gap: 2em; }
  .l-hero-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1em; }
}
@media (max-width: 767px) {
  .row { flex-direction: column; }
  .column { width: 100%; }
  article > section:nth-child(odd), article > section:nth-child(even) { padding: 2em 1em; }
  .is-wide-only { display: list-item; }
  .l-header { padding: 0.6em 1em; }
  .kettle-services { padding: 0.2em 0; }
  .kettle-services-list { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; padding: 0 1em; gap: 0 1em; scrollbar-width: none; }
  .kettle-services-list::-webkit-scrollbar { display: none; }
  .kettle-services-item { flex: 0 0 auto; }
  .kettle-services-link { white-space: nowrap; }
  .l-hero-tag { font-size: 0.75em; letter-spacing: 0.08em; }
  .kettle-nav-link { font-size: 1.25em; }
  h1 { font-size: 2.05em; }
  h2 { font-size: 1.6em; }
  article > section.kettle-introduction { min-height: 0; padding: 1.75em 1em 2em; background-position: center, 82% center, 0 0; }
  .l-hero-actions { margin-top: 1.2em; flex-wrap: nowrap; }
  .l-hero-actions .btn { flex: 1 1 0; min-width: 0; padding-left: 0.7em; padding-right: 0.7em; font-size: 0.9375em; }
  .stats-bar { gap: 1.2em 2em; padding: 1.5em 0.5em; order: 2; }
  .stat-number { font-size: 1.9em; }
  .l-hero-cards { grid-template-columns: 1fr; transform: none; max-width: 24em; margin-top: 0.75em; }
  article > section.l-after-hero { padding-top: 2em; }
  .kettle-resources-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9em; }
  .card-content { padding: 0.9em 0.9em 1.1em; }
  .card-text { display: none; }
  .kettle-advantages-card .card-text { display: block; }
  .card-foot { flex-direction: column; align-items: stretch; }
  .kettle-advantages-grid, .kettle-heritage-kinds, .faq-grid, .kettle-inquiries-pair { grid-template-columns: 1fr; }
  .kettle-brew-box { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kettle-docket-line { grid-template-columns: 4em 1fr; }
  .kettle-docket-line img { width: 4em; height: 4em; }
  .kettle-docket-sum { grid-column: 2; }
  .kettle-toast { top: auto; bottom: 1em; right: 1em; }
}
@media (max-width: 420px) {
  .kettle-resources-grid { grid-template-columns: 1fr; }
  .l-header-name { font-size: 1.0625em; }
  .l-header-cart { padding: 0.4em 0.6em; }
}

.l-body { text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
.l-main { width: 100%; }
.l-page { display: flex; flex-direction: column; }
.kettle-title-bar { min-height: 4em; }
.kettle-title-brand { min-width: 0; }
.kettle-title-mark { flex: 0 0 auto; }
.kettle-title-name { white-space: nowrap; }
.l-header-nav, .kettle-nav { font-weight: 700; }
.kettle-nav-item, .kettle-services-item, .l-footer-icon-item, .l-footer-link-item, .kettle-credentials-item, .kettle-key-services-item, .kettle-advantages-item, .kettle-client-questions-item { margin: 0; }
.kettle-docket-link { flex: 0 0 auto; white-space: nowrap; }
.l-strip { position: relative; z-index: 5; }
.kettle-shopfront, .kettle-legal, .kettle-delivery-page, .kettle-checkout, .kettle-thanks, .kettle-missing, .kettle-product, .kettle-catalogue, .kettle-contact, .kettle-returns-page { position: relative; }
.kettle-legal-terms, .kettle-service-delivery, .kettle-resources, .kettle-advantages, .kettle-client-questions, .kettle-docket, .kettle-retainer, .kettle-schedule-a, .kettle-service-groups, .kettle-service-terms, .kettle-inquiries-intro, .kettle-undertakings, .kettle-matter, .kettle-engagement, .kettle-gallery, .kettle-credentials, .kettle-key-services { scroll-margin-top: 5em; }
.kettle-legal-terms-title, .kettle-service-delivery-title, .l-hero-title, .kettle-resources-title, .kettle-advantages-title, .kettle-advantages-name, .kettle-heritage-title, .kettle-heritage-kind-name, .kettle-client-questions-title, .kettle-closing-brief-title, .kettle-docket-title, .kettle-engagement-title, .kettle-matter-title, .kettle-retainer-title, .kettle-schedule-a-title, .kettle-service-groups-title, .kettle-service-terms-title, .kettle-inquiries-heading, .kettle-inquiries-sub, .kettle-undertakings-title, .kettle-inquiries-title { text-wrap: balance; }
.kettle-service-delivery-lead, .kettle-resources-lead, .kettle-heritage-text, .kettle-heritage-kind-text, .kettle-closing-brief-text, .kettle-matter-text, .kettle-retainer-short, .kettle-service-groups-lead, .kettle-inquiries-text, .kettle-undertakings-lead, .kettle-inquiries-lead, .kettle-docket-empty-hint { text-wrap: pretty; }
.kettle-legal-terms-table, .kettle-service-delivery-table, .kettle-particulars, .kettle-pay-arrangements { margin: 0 0 1.5em; font-size: 0.9375em; }
.kettle-resources-head, .kettle-advantages-head, .kettle-client-questions-head, .kettle-service-groups-head { position: relative; }
.kettle-signature-block { border-top: 4px solid #111111; }
.l-footer-form { scroll-margin-top: 5em; }
.l-footer-reach { color: #cfcfcf; }
.kettle-inquiries-form, .kettle-engagement-form { position: relative; }
.kettle-inquiries-field, .kettle-engagement-field, .kettle-docket-list-wrap, .kettle-retainer-panel, .kettle-schedule-a-text, .kettle-schedule-a-specs, .kettle-heritage-story { min-width: 0; }
.kettle-inquiries-consent, .kettle-engagement-consent, .kettle-engagement-note, .kettle-retainer-note { line-height: 1.45; }
.kettle-inquiries-send { margin-top: 0.4em; }
.kettle-toast-text, .kettle-toast-actions { line-height: 1.4; }
.kettle-divider { position: relative; z-index: 1; }
.kettle-advantages-card { height: 100%; }
.kettle-heritage-text { color: #e6e6e6; }
.kettle-client-questions-grid { margin-top: 0.5em; }
.kettle-docket-empty-text { font-size: 1.125em; }
.kettle-docket-lines { margin: 0 0 0.5em; }
.kettle-docket-more a { color: var(--text-body); }
.kettle-retainer-short { font-size: 1.0625em; }
.kettle-schedule-a-title { font-size: 1.5em; }
.kettle-service-terms-list { margin: 0; }
.kettle-inquiries-topics { padding-left: 1.3em; }
.kettle-retainer-title { margin-bottom: 0.3em; }
@media (prefers-reduced-motion: reduce) {
  .section-divider span { animation: none; }
  *, *::before, *::after { transition: none !important; }
}

.kettle-inquiries-lead.muted { color: #b0b0b0; }