@font-face {
  font-family: 'Jost';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/Jost-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Jost';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/Jost-italic-latin.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: 'Jost';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/Jost-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/Jost-latin.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;
}

/* ==========================================================================
   President-Kő – main stylesheet (v6 "kő": natural stone tones instead of paper-white, Jost, brand red,
   photo-led, the column capital of the letterhead as a tone-on-tone watermark)
   Tokens → base → layout → header/footer → home → components → pages → utilities
   ========================================================================== */

:root {
  /* surfaces: light limestone and greige, never pure white */
  --bg: #edebe6;          /* page */
  --paper: #f7f6f3;       /* raised: header, cards, panels */
  --field: #fbfaf8;       /* form fields */
  --stone: #e3dfd8;       /* tonal sections, page heads */
  --stone-2: #d6d1c8;
  --line: #d9d4cb;
  --line-strong: #c2bcb1;
  --muted: #625d56;
  --ink-2: #3a3733;
  --ink: #171513;
  --dark: #1f1d1a;        /* graphite sections */
  --dark-2: #2a2724;
  --darker: #161412;      /* footer */
  --on-dark: #f3f1ed;
  --on-dark-2: rgba(243, 241, 237, 0.74);
  --brand: #8f2226;
  --brand-dark: #6f191c;
  --brand-soft: #efdedb;
  --focus: #8f2226;
  /* the column capital (oszlopfő) watermark, one tone darker than the surface it sits on */
  --mark: #e1ddd5;
  --mark-on-stone: #dad5cd;
  --shadow-1: 0 1px 2px rgba(23, 21, 19, 0.05), 0 12px 28px -20px rgba(23, 21, 19, 0.38);
  --shadow-2: 0 26px 48px -28px rgba(23, 21, 19, 0.5);

  /* legacy aliases used by a few components */
  --white: var(--paper);
  --soft: var(--stone);
  --soft-2: var(--stone-2);
  --marble: var(--paper);
  --travertine: var(--stone);
  --travertine-2: var(--stone);
  --line-soft: var(--line);
  --granite: var(--muted);
  --graphite: var(--dark);
  --graphite-2: var(--dark-2);

  --font-display: 'Jost', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-body: 'Jost', 'Segoe UI', system-ui, -apple-system, sans-serif;

  --step--1: 0.9rem;
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --step-1: clamp(1.15rem, 1.05rem + 0.4vw, 1.3rem);
  --step-2: clamp(1.45rem, 1.25rem + 0.9vw, 1.9rem);
  --step-3: clamp(1.8rem, 1.45rem + 1.6vw, 2.6rem);
  --step-4: clamp(2.1rem, 1.6rem + 2.2vw, 3.2rem);
  --step-5: clamp(2.5rem, 1.7rem + 4vw, 4.5rem);

  --container: 75rem;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --section: clamp(3.5rem, 8vw, 6rem);
  --section-sm: clamp(2.25rem, 5vw, 3.5rem);
  --header-h: 4.25rem;
  --radius: 3px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}
@media (min-width: 1024px) { :root { --header-h: 5.5rem; } }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  color: var(--ink-2);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.nav-open { overflow: hidden; }
img, svg, video { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 0.5em;
  text-wrap: balance;
}
h1 { font-size: var(--step-3); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); }
h4 { font-size: var(--step-0); }
p { margin: 0 0 1em; }
a { color: var(--brand); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--brand-dark); }
ul, ol { padding-left: 1.2em; }
strong { font-weight: 600; color: var(--ink); }
small { font-size: var(--step--1); }
hr { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; }
button { font: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
::selection { background: var(--brand); color: #fff; }
.hero__line { display: block; }
.ico { display: inline-block; vertical-align: middle; flex-shrink: 0; }

.skip { position: absolute; left: 1rem; top: -4rem; z-index: 100; background: var(--ink); color: #fff; padding: 0.6rem 1rem; border-radius: var(--radius); }
.skip:focus { top: 1rem; }

/* ---------- the column capital (oszlopfő) ----------
   The client's letterhead prints a large grey column capital behind everything. Here it is a mask over a tone that
   is one step darker than its section, so it reads as texture, never as decoration competing with the content. */
.hero-deck::before, .page-head::before, .hero-band::before, .finder-section::before, .cta-band__card::before, .red-band::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  aspect-ratio: 1459 / 1394;
  background: var(--mark);
  -webkit-mask: url('/brand/capital.svg') center / contain no-repeat;
  mask: url('/brand/capital.svg') center / contain no-repeat;
}

/* ---------- layout ---------- */
.container { width: min(var(--container), 100% - 2 * var(--gutter)); margin-inline: auto; }
.container--narrow { width: min(48rem, 100% - 2 * var(--gutter)); }
.container--text { width: min(44rem, 100% - 2 * var(--gutter)); }
.section { padding-block: var(--section); }
.section--sm { padding-block: var(--section-sm); }
.section--flush-top { padding-top: 0; }
.section--soft, .section--travertine { background: var(--stone); }
.section--white { background: var(--bg); } /* full-width areas stay on the stone tone; paper is for cards and panels */
.section--pad-bottom { padding-bottom: var(--section); }
.section--pad-bottom-sm { padding-bottom: var(--section-sm); }

.section__head { display: grid; gap: 0.75rem 4rem; margin-bottom: clamp(1.75rem, 4vw, 2.75rem); align-items: end; }
.section__head h2 { margin: 0; max-width: 22ch; }
.section__lead { font-size: var(--step-0); line-height: 1.55; margin: 0; max-width: 40rem; color: var(--ink-2); }
@media (min-width: 900px) {
  .section__head--row { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .section__head--row .section__lead { justify-self: start; max-width: 34rem; }
}
.section__head--center { text-align: center; justify-items: center; }
.section__head--center h2::after { content: ''; display: block; width: 2.75rem; height: 3px; background: var(--brand); margin: 0.9rem auto 0; }
.section__head--center h2 { max-width: 26ch; }
.section__head--center .section__lead { max-width: 42rem; }
.section__more { margin-top: 2rem; }
.section__more--center { text-align: center; }
.section-title { margin: 3rem 0 1.5rem; }

.grid { display: grid; gap: var(--gutter); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  padding: 0.8em 1.5em; border-radius: var(--radius); border: 1px solid transparent;
  font-weight: 500; font-size: 1rem; line-height: 1.2; text-decoration: none; cursor: pointer;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.2s var(--ease);
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn--primary:hover { transform: translateY(-1px); box-shadow: 0 10px 22px -12px rgba(143, 34, 38, 0.7); }
.btn--ghost:hover { transform: translateY(-1px); }
.btn--primary { background: var(--brand); color: #fff; border-color: var(--brand); }
.btn--primary:hover { background: var(--brand-dark); border-color: var(--brand-dark); color: #fff; }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: #fff; }
.btn--ghost-light { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.7); }
.btn--ghost-light:hover { background: #fff; color: var(--ink); border-color: #fff; }
.btn--light { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.btn--light:hover { background: var(--bg); border-color: var(--bg); color: var(--ink); }
.btn--sm { padding: 0.6em 1.05em; font-size: 0.95rem; }
.btn--lg { padding: 0.95em 1.9em; font-size: 1.05rem; }
.btn:disabled { opacity: 0.6; cursor: wait; }
.btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; align-items: center; }
.btn-row--center { justify-content: center; }

/* ---------- top bar (desktop): address, hours, e-mail ---------- */
.topbar { display: none; }
@media (min-width: 1024px) {
  .topbar { display: block; background: var(--dark); color: var(--on-dark-2); font-size: 0.86rem; }
  .topbar__inner { display: flex; align-items: center; gap: 0.5rem 2rem; min-height: 2.4rem; }
  .topbar__item { display: inline-flex; align-items: center; gap: 0.45rem; white-space: nowrap; }
  .topbar__item .ico { opacity: 0.7; }
  .topbar a { color: var(--on-dark); text-decoration: none; }
  .topbar a:hover { color: #fff; text-decoration: underline; }
  .topbar__sep { opacity: 0.5; margin-inline: 0.15rem; }
  .topbar__end { margin-left: auto; display: flex; gap: 1.75rem; }
}
@media (min-width: 1024px) and (max-width: 1199.98px) { .topbar__end a:last-child { display: none; } }

/* ---------- header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--paper); border-bottom: 1px solid var(--line); transition: box-shadow 0.25s var(--ease); }
@supports (backdrop-filter: blur(1px)) { .site-header { background: rgba(247, 246, 243, 0.9); backdrop-filter: saturate(1.2) blur(12px); } }
.site-header.is-scrolled { box-shadow: 0 10px 28px -18px rgba(23, 21, 19, 0.35); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; height: var(--header-h); transition: height 0.3s var(--ease); }
@media (min-width: 1024px) { .site-header.is-scrolled .site-header__inner { height: 4.5rem; } .site-header.is-scrolled .brand img { height: 2.8rem; } .brand img { transition: height 0.3s var(--ease); } }
.brand { display: inline-flex; flex-shrink: 0; }
.brand img { height: 2.4rem; width: auto; }
@media (min-width: 1024px) { .brand img { height: 3.4rem; } }
.site-header__actions { display: flex; align-items: center; gap: 0.75rem; }
.site-header__phone { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--ink); font-weight: 500; text-decoration: none; white-space: nowrap; }
.site-header__phone:hover { color: var(--brand); }
.site-header__phone svg { color: var(--brand); }
@media (max-width: 639.98px) {
  .site-header__phone { width: 2.75rem; height: 2.75rem; justify-content: center; border: 1px solid var(--line-strong); border-radius: var(--radius); }
  .site-header__phone span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}
.site-header__cta { display: none; }

.menu-btn { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 2.75rem; height: 2.75rem; padding: 0.6rem; border: 1px solid var(--line-strong); background: var(--paper); border-radius: var(--radius); cursor: pointer; }
.menu-btn__bar { display: block; height: 2px; background: var(--ink); transition: transform 0.25s var(--ease), opacity 0.2s; transform-origin: center; }
.menu-btn[aria-expanded="true"] .menu-btn__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-btn__bar:nth-child(2) { opacity: 0; }
.menu-btn[aria-expanded="true"] .menu-btn__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav { display: none; }
.nav__list { list-style: none; margin: 0; padding: 0; display: flex; }
.nav__link { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.6rem 0.85rem; color: var(--ink); text-decoration: none; font-weight: 500; font-size: 1rem; background: none; border: 0; cursor: pointer; border-radius: var(--radius); }
.nav__link:hover { color: var(--brand); }
.nav__item.is-current > .nav__link { color: var(--brand); }
@media (min-width: 1024px) {
  .nav__link { position: relative; }
  .nav__link::after { content: ''; position: absolute; left: 0.85rem; right: 0.85rem; bottom: 0.25rem; height: 2px; background: var(--brand); transform: scaleX(0); transform-origin: left; transition: transform 0.25s var(--ease); }
  .nav__link:hover::after, .nav__item.is-current > .nav__link::after { transform: scaleX(1); }
}
/* the global svg rule (max-width: 100%) collapsed the chevron inside the shrink-wrapped button */
.nav__chev { width: 12px; height: 12px; max-width: none; flex: none; opacity: 0.7; transition: transform 0.2s; }
.nav__item--has-menu.is-open .nav__chev { transform: rotate(180deg); }
.mega ul { list-style: none; margin: 0; padding: 0; }
.mega a { text-decoration: none; color: var(--ink); display: block; }
.mega a:hover, .mega a[aria-current] { color: var(--brand); }
.mega__head { font-weight: 600; font-size: 1rem; }
.mega__all { color: var(--brand) !important; font-weight: 500; }
.nav__extra { display: flex; align-items: center; gap: 1rem; }
.nav__phone { color: var(--ink); text-decoration: none; font-weight: 500; }
.nav__phone:hover { color: var(--brand); }

@media (max-width: 1023.98px) {
  .nav.is-open { display: block; position: absolute; top: 100%; left: 0; right: 0; z-index: 40; height: calc(100dvh - var(--header-h)); background: var(--paper); overflow-y: auto; padding: 0.5rem var(--gutter) 6rem; border-top: 1px solid var(--line); }
  .nav__list { flex-direction: column; }
  .nav__item { border-bottom: 1px solid var(--line); }
  .nav__link { width: 100%; justify-content: space-between; padding: 1rem 0; font-size: var(--step-1); font-weight: 500; }
  .nav__chev { width: 14px; height: 14px; }
  .nav__item--has-menu .mega { display: none; padding: 0 0 1rem; }
  .nav__item--has-menu.is-open .mega { display: block; }
  .mega__col { margin-bottom: 0.75rem; }
  .mega__col ul { padding-left: 1rem; }
  .mega a { padding: 0.45rem 0; }
  .mega__head { padding: 0.5rem 0 0.25rem; }
  .mega--list ul { display: grid; grid-template-columns: 1fr 1fr; }
  .nav__extra { flex-direction: column; align-items: stretch; margin-top: 1.5rem; gap: 0.75rem; }
  .nav__extra .btn { width: 100%; }
  .nav__phone { text-align: center; padding: 0.75rem; border: 1px solid var(--line-strong); border-radius: var(--radius); }
}
@media (min-width: 1024px) {
  .nav { display: flex; align-items: center; gap: 1rem; flex: 1; justify-content: center; }
  .nav__extra { display: none; }
  .menu-btn { display: none; }
  .site-header__cta { display: inline-flex; }
  .nav__item--has-menu { position: static; }
  .mega { position: absolute; top: calc(100% - 1px); left: 0; right: 0; background: var(--paper); border-bottom: 1px solid var(--line); box-shadow: 0 24px 40px -24px rgba(23, 21, 19, 0.4); padding: 1.75rem var(--gutter) 2rem; opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity 0.18s var(--ease), transform 0.18s var(--ease), visibility 0.18s; }
  .mega--rooms { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.5rem; width: min(var(--container), 100% - 2 * var(--gutter)); margin-inline: auto; left: 50%; right: auto; transform: translate(-50%, -4px); }
  .mega--list { left: auto; right: auto; width: auto; min-width: 16rem; }
  .nav__item--has-menu.is-open .mega, .nav__item--has-menu:hover .mega, .nav__item--has-menu:focus-within .mega { opacity: 1; visibility: visible; transform: none; }
  .nav__item--has-menu.is-open .mega--rooms, .nav__item--has-menu:hover .mega--rooms, .nav__item--has-menu:focus-within .mega--rooms { transform: translate(-50%, 0); }
  .mega--rooms .mega__head { display: block; padding-bottom: 0.5rem; margin-bottom: 0.5rem; border-bottom: 1px solid var(--line); }
  .mega--rooms li a { padding: 0.35rem 0; font-size: 0.95rem; }
  .mega--list { position: absolute; }
  .nav__item--has-menu:has(.mega--list) { position: relative; }
  .mega--list ul { display: grid; grid-template-columns: 1fr; gap: 0.1rem; }
  .mega--list a { padding: 0.45rem 0.5rem; border-radius: var(--radius); }
  .mega--list a:hover { background: var(--bg); }
  .mega__all { margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--line); }
}
@media (min-width: 1024px) and (max-width: 1279.98px) { .site-header__phone span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .site-header__phone { width: 2.75rem; height: 2.75rem; justify-content: center; border: 1px solid var(--line-strong); border-radius: var(--radius); } .nav__link { padding-inline: 0.65rem; } }
@media (min-width: 1280px) { .nav__link { padding-inline: 1rem; } .site-header__inner { gap: 2rem; } }

/* ---------- preloader (first page view of a session) ---------- */
.preloader { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; background: var(--bg); transition: opacity 0.5s var(--ease), visibility 0.5s; animation: preloaderAuto 0.5s ease 3.4s forwards; }
.no-preloader .preloader { display: none; }
.preloader.is-done { opacity: 0; visibility: hidden; pointer-events: none; }
.preloader__inner { display: grid; justify-items: center; gap: 1.1rem; animation: preloaderIn 0.8s var(--ease) both; transition: opacity 0.35s, transform 0.35s; }
.preloader.is-done .preloader__inner { opacity: 0; transform: translateY(-8px); }
.preloader__inner img { width: min(17rem, 72vw); height: auto; }
.preloader__line { display: block; width: min(17rem, 72vw); height: 2px; background: var(--line); overflow: hidden; }
.preloader__line i { display: block; height: 100%; width: 100%; background: var(--brand); transform-origin: left center; transform: scaleX(0); animation: preloaderLine 1.2s var(--ease) 0.15s forwards; }
@keyframes preloaderIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes preloaderLine { to { transform: scaleX(1); } }
@keyframes preloaderAuto { to { opacity: 0; visibility: hidden; } }

/* ---------- home: slab deck hero ---------- */
.hero-deck { position: relative; overflow: hidden; isolation: isolate; background: var(--bg); padding-block: clamp(2.5rem, 6vw, 5rem) clamp(2rem, 5vw, 4rem); }
.hero-deck::before { width: clamp(34rem, 54vw, 52rem); left: calc(50% - 48rem); top: clamp(-3rem, -2vw, -1rem); }
.hero-deck__grid { display: grid; gap: 2.5rem var(--gutter); align-items: center; }
.hero-deck__title { font-size: clamp(2.4rem, 5.2vw, 4.6rem); line-height: 1; letter-spacing: -0.025em; margin: 0 0 1.25rem; }
.hero-deck__title span { display: block; animation: heroRise 1s var(--ease) both; }
.hero-deck__title span:nth-child(2) { animation-delay: 0.1s; }
.hero-deck__title span:nth-child(3) { animation-delay: 0.2s; color: var(--brand); }
.hero-deck__lead { font-size: var(--step-1); line-height: 1.5; color: var(--ink-2); max-width: 34rem; margin: 0 0 1.5rem; animation: heroFade 0.9s var(--ease) 0.4s both; }
.hero-deck__text .btn-row { animation: heroFade 0.9s var(--ease) 0.55s both; }
.hero-deck__stats { list-style: none; margin: 2rem 0 0; padding: 1.25rem 0 0; border-top: 1px solid var(--line-strong); display: flex; flex-wrap: wrap; gap: 1rem 2.5rem; animation: heroFade 0.9s var(--ease) 0.7s both; }
.hero-deck__stats li { color: var(--muted); font-size: 0.9rem; line-height: 1.3; }
.hero-deck__stats strong { display: block; font-size: clamp(1.6rem, 2.4vw, 2.2rem); line-height: 1.05; color: var(--ink); font-variant-numeric: tabular-nums; margin-bottom: 0.15rem; }
@keyframes heroRise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes heroFade { from { opacity: 0; } to { opacity: 1; } }

/* stone picker: one large slab, round sample chips, a circular reveal from the chosen chip */
.picker { position: relative; animation: heroFade 0.9s var(--ease) 0.2s both; }
.picker__frame { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--dark); box-shadow: 0 40px 80px -40px rgba(23, 21, 19, 0.6); }
.picker__slide { position: absolute; inset: 0; z-index: 1; display: block; visibility: hidden; }
.picker__slide.is-active { visibility: visible; z-index: 2; }
.picker__slide.is-entering { visibility: visible; z-index: 3; animation: pickerReveal 0.9s cubic-bezier(0.65, 0, 0.35, 1) both; }
.picker__slide img { width: 100%; height: 100%; object-fit: cover; }
.picker__slide.is-active img, .picker__slide.is-entering img { animation: pickerSettle 1.6s var(--ease) both; }
@keyframes pickerReveal { from { clip-path: circle(0% at var(--rx, 50%) var(--ry, 100%)); } to { clip-path: circle(150% at var(--rx, 50%) var(--ry, 100%)); } }
@keyframes pickerSettle { from { transform: scale(1.06); } to { transform: scale(1); } }
.picker__foot { position: relative; z-index: 4; display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin: -2.4rem 1.25rem 0; }
.picker__tag { margin: 0; display: grid; gap: 0.1rem; min-width: 13rem; max-width: 20rem; padding: 0.85rem 1.1rem 0.9rem; background: var(--paper); border-top: 3px solid var(--brand); box-shadow: 0 18px 36px -20px rgba(23, 21, 19, 0.5); }
.picker__type { color: var(--brand); font-size: 0.8rem; font-weight: 600; }
.picker__name { font-size: 1.15rem; line-height: 1.25; }
.picker__link { margin-top: 0.3rem; font-size: 0.88rem; font-weight: 500; color: var(--ink); text-decoration-color: var(--brand); }
.picker__link:hover { color: var(--brand); }
.picker__chips { display: flex; gap: 0.55rem; padding-bottom: 0.2rem; }
.picker__chip { position: relative; width: 3.6rem; height: 3.6rem; padding: 0; border: 3px solid var(--paper); border-radius: 50%; overflow: hidden; background: var(--stone); cursor: pointer; box-shadow: 0 8px 18px -8px rgba(23, 21, 19, 0.6), inset 0 0 0 1px rgba(0, 0, 0, 0.06); transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease); }
.picker__chip img { width: 100%; height: 100%; object-fit: cover; }
.picker__chip:hover { transform: translateY(-3px); }
.picker__chip.is-active { transform: translateY(-5px) scale(1.08); box-shadow: 0 0 0 3px var(--brand), 0 12px 22px -10px rgba(23, 21, 19, 0.6); }
.picker__chip:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; }
@media (min-width: 900px) {
  .hero-deck { padding-block: clamp(3rem, 7vw, 6rem) clamp(3rem, 6vw, 5rem); }
  .hero-deck__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 3.5rem; }
}
@media (max-width: 899.98px) {
  .hero-deck { padding-top: 0; }
  .hero-deck::before { width: 125vw; left: -32vw; top: auto; bottom: -2rem; }
  .hero-deck__grid { grid-template-columns: 1fr; }
  .hero-deck__stage { order: -1; margin-inline: calc(-1 * var(--gutter)); }
  .picker__frame { box-shadow: none; }
  .picker__foot { flex-direction: column; align-items: stretch; margin: -1.8rem var(--gutter) 0; gap: 0.9rem; }
  .picker__tag { max-width: none; min-width: 0; }
  .picker__chips { justify-content: center; }
  .picker__chip { width: 3rem; height: 3rem; }
}

/* room tiles row */
.rooms-row { padding-top: clamp(1rem, 3vw, 2rem); }
.tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
.tiles__item { animation: tileIn 0.9s var(--ease) 0.6s both; }
.tiles__item:nth-child(2) { animation-delay: 0.7s; }
.tiles__item:nth-child(3) { animation-delay: 0.8s; }
.tiles__item:nth-child(4) { animation-delay: 0.9s; }
@keyframes tileIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.tile { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--stone); }
.tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease); }
.tile:hover img, .tile:focus-visible img { transform: scale(1.04); }
.tile__label { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: var(--paper); color: var(--ink); font-weight: 600; font-size: 1.05rem; padding: 0.6rem 1.6rem; border-radius: 999px; box-shadow: 0 6px 18px rgba(23, 21, 19, 0.25); white-space: nowrap; transition: background-color 0.2s, color 0.2s; }
.tile:hover .tile__label { background: var(--brand); color: #fff; }
@media (min-width: 900px) {
  .tiles { grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
  .tile { aspect-ratio: 3 / 2; }
  .tile__label { font-size: 1.15rem; padding: 0.7rem 2rem; }
}

/* ---------- home: usp row ---------- */
.usp { padding-top: clamp(2.5rem, 5vw, 4rem); }
.usp__list { list-style: none; margin: 0; padding: clamp(1.5rem, 3vw, 2.25rem) 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem 1rem; text-align: center; border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); }
.usp__list li { display: grid; justify-items: center; gap: 0.15rem; }
.usp__icon { display: inline-flex; align-items: center; justify-content: center; width: 3.6rem; height: 3.6rem; border-radius: 50%; background: var(--paper); color: var(--brand); box-shadow: var(--shadow-1); margin-bottom: 0.75rem; transition: transform 0.4s var(--ease); }
.usp__list li:hover .usp__icon { transform: translateY(-3px) scale(1.05); }
.usp__list strong { font-weight: 600; }
.usp__list li > span:last-child { color: var(--muted); font-size: 0.92rem; }
@media (min-width: 900px) { .usp__list { grid-template-columns: repeat(4, 1fr); } }
.usp + .section { padding-top: var(--section); }

/* ---------- home: promo tiles ---------- */
.promo { display: grid; gap: 0.75rem; grid-template-columns: repeat(2, 1fr); grid-auto-rows: 10.5rem; grid-auto-flow: dense; }
.promo__item { position: relative; display: block; overflow: hidden; background: var(--dark); color: #fff; text-decoration: none; }
.promo__item--wide { grid-column: span 2; }
.promo__item--tall { grid-row: span 2; }
.promo__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease); }
.promo__item::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(0, 0, 0, 0.74) 0%, rgba(0, 0, 0, 0.28) 45%, rgba(0, 0, 0, 0) 70%); transition: opacity 0.3s; }
.promo__item:hover img { transform: scale(1.05); }
.promo__item:hover, .promo__item:focus-visible { color: #fff; }
.promo__title { position: absolute; z-index: 2; left: 1.5rem; right: 1.5rem; bottom: 1.4rem; font-weight: 600; font-size: var(--step-1); line-height: 1.25; text-wrap: balance; transition: transform 0.3s var(--ease); }
.promo__more { position: absolute; z-index: 2; left: 1.5rem; bottom: 0.65rem; font-size: 0.88rem; font-weight: 500; opacity: 0; transition: opacity 0.3s var(--ease); }
.promo__more::after { content: ''; display: inline-block; width: 1.5rem; height: 1px; background: #fff; margin-left: 0.5rem; vertical-align: middle; }
.promo__item:hover .promo__title, .promo__item:focus-visible .promo__title { transform: translateY(-1.3rem); }
.promo__item:hover .promo__more, .promo__item:focus-visible .promo__more { opacity: 1; }
.promo__foot { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; margin-top: 1.5rem; }
@media (min-width: 900px) {
  .promo { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 14rem; gap: 1.25rem; }
  .promo__title { left: 1.75rem; right: 1.75rem; bottom: 1.6rem; }
  .promo__more { left: 1.75rem; }
}
@media (max-width: 480px) { .promo { grid-auto-rows: 8.5rem; gap: 0.5rem; } .promo__title { left: 0.9rem; right: 0.9rem; bottom: 0.8rem; font-size: 1rem; } .promo__more { display: none; } }

/* ---------- home: red band ---------- */
.red-band { position: relative; overflow: hidden; isolation: isolate; background: var(--brand); color: #fff; padding-block: clamp(2.5rem, 5vw, 3.5rem); }
.red-band::before { width: 22rem; left: calc(50% + 14rem); top: -7rem; background: rgba(0, 0, 0, 0.11); }
.red-band__inner { display: grid; gap: 1.5rem; align-items: center; }
.red-band h2 { color: #fff; font-size: var(--step-2); margin-bottom: 0.3em; }
.red-band p { margin: 0; color: rgba(255, 255, 255, 0.88); max-width: 40rem; }
.red-band__actions { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: center; }
.red-band__phone { display: inline-flex; align-items: center; gap: 0.5rem; color: #fff; font-weight: 600; font-size: 1.15rem; text-decoration: none; white-space: nowrap; }
.red-band__phone:hover { color: rgba(255, 255, 255, 0.85); }
@media (min-width: 900px) { .red-band__inner { grid-template-columns: minmax(0, 1fr) auto; } }
@media (max-width: 899.98px) { .red-band::before { left: auto; right: -7rem; top: -4rem; width: 16rem; } }

/* ---------- stone tiles ---------- */
.stones { display: grid; gap: 2rem 1.25rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5rem), 1fr)); }
@media (min-width: 900px) { .stones { grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr)); } }
@media (max-width: 480px) { .stones { gap: 1.5rem 0.75rem; } }
.stones--4 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { .stones--4 { grid-template-columns: repeat(4, 1fr); gap: 2.25rem 1.5rem; } }
.stone { display: block; text-decoration: none; color: var(--ink); }
.stone__img { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--stone); margin-bottom: 0.75rem; }
.stone__img img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform 0.5s var(--ease); }
.stone:hover .stone__img img { transform: scale(1.05); }
.stone__name { display: block; font-weight: 500; line-height: 1.3; }
.stone__type { display: block; color: var(--muted); font-size: var(--step--1); }
.stone__price { display: block; margin-top: 0.3rem; font-weight: 600; font-size: 0.95rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.stone__price--ask { font-weight: 400; color: var(--muted); }
.stone__more { display: block; margin-top: 0.55rem; padding-top: 0.55rem; border-top: 1px solid var(--line); color: var(--brand); font-size: 0.9rem; font-weight: 500; }
.stone:hover .stone__name { color: var(--brand); }
.stone__noimg { display: block; width: 100%; height: 100%; background: repeating-linear-gradient(135deg, var(--stone) 0 12px, var(--stone-2) 12px 24px); }
.stone.is-hidden { display: none; }
.stones .stone { content-visibility: auto; contain-intrinsic-size: 220px 300px; }
.stones__foot { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: center; justify-content: space-between; margin-top: 2.5rem; }
.stones__foot .types { margin: 0; }

.types { list-style: none; padding: 0; margin: 1.5rem 0 2rem; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.types a { display: inline-flex; align-items: baseline; gap: 0.4rem; padding: 0.45rem 0.9rem; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--ink); text-decoration: none; background: var(--paper); }
.types a:hover { border-color: var(--brand); color: var(--brand); }
.types a small { color: var(--muted); }

/* ---------- material price (stone page) ---------- */
.price-box { margin: 0 0 1.5rem; padding: 1rem 1.25rem 1.1rem; background: var(--paper); border-left: 3px solid var(--brand); box-shadow: var(--shadow-1); }
.price-box__label { display: block; font-size: var(--step--1); font-weight: 600; color: var(--muted); }
.price-box__value { margin: 0.1rem 0 0; font-size: var(--step-2); font-weight: 600; line-height: 1.2; color: var(--ink); font-variant-numeric: tabular-nums; }
.price-box__note { margin: 0.3rem 0 0; color: var(--ink-2); }
.price-box__fine { margin: 0.65rem 0 0; font-size: var(--step--1); line-height: 1.45; color: var(--muted); }
.price-box--ask { padding: 0.75rem 1rem; color: var(--ink-2); }
.price-box--ask .price-box__label { display: inline; margin-right: 0.35rem; }

/* ---------- facts (rólunk) ---------- */
.facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem var(--gutter); grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.facts li { border-top: 2px solid var(--ink); padding-top: 1rem; }
.facts strong { display: block; font-size: var(--step-1); color: var(--ink); margin-bottom: 0.35rem; }
.facts p { margin: 0; color: var(--ink-2); }
.facts--icons li { position: relative; padding-top: 1.25rem; }
.facts__icon { display: inline-flex; color: var(--brand); margin-bottom: 0.7rem; }

/* ---------- process steps ---------- */
.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); counter-reset: step; }
.steps li { background: var(--paper); box-shadow: var(--shadow-1); padding: 1.5rem; }
.steps__num { display: block; color: var(--brand); font-weight: 600; font-size: var(--step--1); margin-bottom: 0.5rem; }
.steps h3 { font-size: var(--step-1); margin-bottom: 0.4rem; }
.steps p { margin: 0; }
.steps--stack { grid-template-columns: 1fr; }
.steps__icon { display: inline-flex; align-items: center; justify-content: center; width: 3.25rem; height: 3.25rem; border-radius: 50%; background: var(--brand-soft); color: var(--brand); margin-bottom: 1rem; }

/* ---------- about band ---------- */
.band { display: grid; gap: 2.5rem var(--gutter); align-items: center; }
.band__img { aspect-ratio: 4 / 3; overflow: hidden; }
.band__img img { width: 100%; height: 100%; object-fit: cover; }
.band__text h2 { max-width: 20ch; }
.band__text p { max-width: 36rem; }
.band__more { margin-top: 1.5rem; }
@media (min-width: 900px) { .band { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); } .band--reverse .band__img { order: 2; } }

.team { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: 1rem; }
.team li { border-left: 2px solid var(--brand); padding-left: 1rem; }
.team strong { display: block; }
.team span { color: var(--muted); }

/* ---------- testimonials ---------- */
.quotes { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.quote { margin: 0; background: var(--paper); box-shadow: var(--shadow-1); padding: 1.75rem; display: flex; flex-direction: column; }
.quote__mark { color: var(--brand); margin-bottom: 0.75rem; }
.quote p { font-size: 1rem; line-height: 1.6; color: var(--ink-2); margin-bottom: 1.25rem; flex: 1; }
.quote footer { padding-top: 1rem; border-top: 1px solid var(--line); }
.quote footer strong { display: block; font-weight: 600; }
.quote footer span { color: var(--muted); font-size: 0.9rem; }

/* ---------- posts ---------- */
.posts { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.post-card { background: var(--paper); box-shadow: var(--shadow-1); display: flex; flex-direction: column; }
.post-card__img { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--stone); }
.post-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease); }
.post-card:hover .post-card__img img { transform: scale(1.03); }
.post-card__body { padding: 1.25rem 1.5rem 1.5rem; display: flex; flex-direction: column; flex: 1; }
.post-card__cat { color: var(--brand); font-size: 0.82rem; font-weight: 600; margin-bottom: 0.5rem; }
.post-card__title { font-size: var(--step-1); margin-bottom: 0.5rem; }
.post-card__title a { color: var(--ink); text-decoration: none; }
.post-card__title a:hover { color: var(--brand); }
.post-card__excerpt { margin-bottom: 1rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; flex: 1; }
.post-card__meta { display: flex; gap: 1rem; color: var(--muted); font-size: 0.88rem; }
.post-card__date { color: var(--muted); font-size: 0.88rem; }

/* ---------- CTA card (half on the page, half on the footer) ---------- */
.cta-band { background: linear-gradient(to bottom, transparent 0 50%, var(--darker) 50% 100%); padding-top: clamp(1rem, 3vw, 2rem); }
.section--soft + .cta-band, .section--travertine + .cta-band { background: linear-gradient(to bottom, var(--stone) 0 50%, var(--darker) 50% 100%); }
.cta-band__card { position: relative; overflow: hidden; isolation: isolate; display: grid; gap: 2rem; align-items: center; background: var(--dark); color: var(--on-dark-2); padding: clamp(2rem, 5vw, 3.75rem) clamp(1.5rem, 5vw, 4rem); box-shadow: 0 34px 60px -34px rgba(0, 0, 0, 0.7); }
.cta-band__card::before { width: 25rem; right: -5rem; bottom: -8.5rem; background: rgba(243, 241, 237, 0.05); }
.cta-band__title { color: var(--on-dark); margin-bottom: 0.4em; max-width: 22ch; font-size: var(--step-3); }
.cta-band__text { color: var(--on-dark-2); max-width: 34rem; margin: 0; font-size: var(--step-0); }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: 1rem 1.75rem; align-items: center; }
.cta-band__phone { display: grid; color: var(--on-dark); font-weight: 600; font-size: var(--step-1); line-height: 1.25; text-decoration: none; }
.cta-band__phone span { font-size: 0.82rem; font-weight: 400; color: var(--on-dark-2); }
.cta-band__phone:hover { color: #fff; }
@media (min-width: 900px) { .cta-band__card { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } .cta-band__actions { justify-content: flex-end; } }

/* ---------- footer ---------- */
.site-footer { background: var(--darker); color: var(--on-dark-2); padding-top: clamp(3rem, 6vw, 4.5rem); font-size: 0.95rem; }
.site-footer h2 { color: var(--on-dark); }
.site-footer strong { color: var(--on-dark); }
.site-footer__grid { display: grid; gap: 2.5rem var(--gutter); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.site-footer__brand, .site-footer__hours { grid-column: 1 / -1; }
@media (min-width: 700px) { .site-footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .site-footer__hours { grid-column: auto; } }
@media (min-width: 1100px) { .site-footer__grid { grid-template-columns: 1.45fr 1fr 1fr 0.9fr 1.3fr; } .site-footer__brand { grid-column: auto; } }
.site-footer__logo { display: inline-block; margin-bottom: 1.25rem; }
.site-footer__logo img { height: 2.75rem; width: auto; }
.site-footer__brand p { max-width: 24rem; }
.site-footer__heading { font-size: 1rem; font-weight: 600; margin-bottom: 0.9rem; }
.site-footer__address { font-style: normal; line-height: 1.75; margin: 0.5rem 0 1rem; }
.site-footer a { color: rgba(243, 241, 237, 0.86); }
.site-footer a:hover { color: #fff; }
.site-footer__social { display: inline-flex; align-items: center; gap: 0.5rem; }
.site-footer__links { list-style: none; margin: 0; padding: 0; line-height: 1.9; }
.site-footer__links a { text-decoration: none; }
.site-footer__links .is-head { margin-top: 0.5rem; }
.site-footer__links .is-head:first-child { margin-top: 0; }
.site-footer__links .is-head a { font-weight: 600; }
.site-footer__links--single { margin-top: 1.25rem; }
.site-footer__gap { height: 1.5rem; }
.site-footer__note { color: rgba(243, 241, 237, 0.55); font-size: var(--step--1); margin-top: 0.75rem; }
.site-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 2rem; padding-block: 1.5rem; margin-top: 3rem; border-top: 1px solid rgba(243, 241, 237, 0.12); color: rgba(243, 241, 237, 0.55); font-size: var(--step--1); }
.site-footer__bottom p { margin: 0; }
.site-footer__bottom ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
.hours { margin: 0; }
.hours div { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--line); padding: 0.35rem 0; max-width: 18rem; }
.hours dt, .hours dd { margin: 0; white-space: nowrap; }
.hours dd { font-weight: 500; color: var(--ink); }
.site-footer .hours div { border-color: rgba(243, 241, 237, 0.12); }
.site-footer .hours dd { color: var(--on-dark); }

/* ---------- inner page heads ---------- */
.crumbs { font-size: var(--step--1); color: var(--muted); margin-bottom: 1.25rem; }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.35rem; }
.crumbs li + li::before { content: '/'; margin-right: 0.35rem; color: var(--line-strong); }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--brand); }

/* tinted heading band with the column capital on the right */
.page-head { position: relative; overflow: hidden; isolation: isolate; background: var(--stone); padding-block: clamp(2rem, 5vw, 3.75rem) clamp(2rem, 4.5vw, 3.25rem); margin-bottom: clamp(2rem, 4vw, 3rem); }
.page-head::before { width: clamp(15rem, 30vw, 27rem); right: calc(50% - 44rem); top: clamp(-4rem, -3vw, -1.5rem); background: var(--mark-on-stone); }
.page-head h1 { margin-bottom: 0.4em; max-width: 26ch; }
.page-head__lead { font-size: var(--step-1); line-height: 1.5; max-width: 42rem; margin: 0; color: var(--ink-2); }
@media (max-width: 899.98px) { .page-head::before { right: -5rem; top: -1.5rem; width: 13rem; } }

/* split hero (rooms, products, finishes, gravestones) on the same tinted band */
.hero-band { position: relative; overflow: hidden; isolation: isolate; background: var(--stone); }
.hero-band::before { width: clamp(24rem, 40vw, 38rem); left: calc(50% - 50rem); top: -5rem; background: var(--mark-on-stone); }
@media (max-width: 899.98px) { .hero-band::before { left: auto; right: -6rem; top: -2rem; width: 17rem; } }
.split-hero { display: grid; gap: 2rem var(--gutter); align-items: center; padding-block: clamp(1.75rem, 4vw, 3.25rem); }
.split-hero__media { aspect-ratio: 3 / 2; overflow: hidden; background: var(--stone-2); box-shadow: var(--shadow-2); }
.split-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.split-hero .btn-row { margin-top: 1.75rem; }
@media (min-width: 900px) { .split-hero { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); } }

/* ---------- service lists, cards ---------- */
.services { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.services li { background: var(--paper); box-shadow: var(--shadow-1); padding: 1.5rem; border-top: 3px solid var(--brand); }
.services h3, .services h2 { font-size: var(--step-1); margin-bottom: 0.4rem; }
.services p { margin: 0; }
.notes { display: grid; gap: 1.5rem var(--gutter); grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.notes h3 { font-size: var(--step-1); margin-bottom: 0.4rem; }
.spec { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 0.5rem 1.5rem; }
.spec dt { color: var(--muted); }
.spec dd { margin: 0; color: var(--ink); }
.cards { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.cards--5 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.5rem), 1fr)); }
.card { background: var(--paper); box-shadow: var(--shadow-1); padding: 1.5rem; }
.card h3 { font-size: var(--step-1); margin-bottom: 0.4rem; }
.card p { margin-bottom: 1rem; }
.card .spec { font-size: 0.95rem; }

/* ---------- catalogue ---------- */
.filters { display: grid; gap: 1.25rem; margin-bottom: 2rem; padding: 1.5rem; background: var(--paper); box-shadow: var(--shadow-1); }
.filters__search { position: relative; }
.filters__search input { width: 100%; padding: 0.8rem 1rem 0.8rem 2.6rem; border: 1px solid var(--line-strong); border-radius: var(--radius); font: inherit; background: var(--field); }
.filters__search input:focus { outline: 2px solid var(--brand); outline-offset: 1px; border-color: var(--brand); }
.filters__search svg { position: absolute; left: 0.9rem; top: 50%; transform: translateY(-50%); color: var(--muted); }
.filters__more > summary { display: flex; align-items: center; gap: 0.6rem; cursor: pointer; list-style: none; padding: 0.7rem 1rem; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--field); font-weight: 500; color: var(--ink); }
.filters__more > summary::-webkit-details-marker { display: none; }
.filters__more > summary::after { content: ''; margin-left: auto; width: 0.55rem; height: 0.55rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-25%) rotate(45deg); transition: transform 0.2s; }
.filters__more[open] > summary::after { transform: translateY(20%) rotate(-135deg); }
.filters__active { padding: 0.05rem 0.55rem; border-radius: 999px; background: var(--brand); color: #fff; font-size: 0.8rem; white-space: nowrap; }
.filters__groups { display: grid; gap: 1.25rem; padding-top: 1.25rem; }
@media (min-width: 900px) { .filters__more > summary { display: none; } .filters__groups { padding-top: 0; } }
.filters__group { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.filters__label { font-weight: 500; color: var(--ink); margin-right: 0.5rem; }
.chip { border: 1px solid var(--line-strong); background: var(--paper); color: var(--ink); padding: 0.4rem 0.85rem; border-radius: 999px; cursor: pointer; font-size: 0.95rem; }
.chip:hover { border-color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.chip--color { display: inline-flex; align-items: center; gap: 0.45rem; }
.chip__swatch--feher{background:#f2efe9}.chip__swatch--fekete{background:#1d1b1a}.chip__swatch--szurke{background:#8c8a86}.chip__swatch--bezs{background:#d9c9ad}.chip__swatch--barna{background:#6b4a34}.chip__swatch--arany{background:#c9a24a}.chip__swatch--zold{background:#4d6b4f}.chip__swatch--kek{background:#5b6d8f}.chip__swatch--voros{background:#a6534f}.chip__swatch--szines{background:linear-gradient(135deg,#c9a24a,#4d6b4f,#a6534f)}
.chip__swatch { width: 0.95rem; height: 0.95rem; border-radius: 50%; border: 1px solid rgba(0, 0, 0, 0.15); display: inline-block; }
.chip small { color: inherit; opacity: 0.7; margin-left: 0.2rem; }
.filters__meta { display: flex; justify-content: space-between; align-items: center; gap: 1rem; color: var(--muted); font-size: var(--step--1); }
.filters__reset { background: none; border: 0; color: var(--brand); cursor: pointer; padding: 0; font: inherit; text-decoration: underline; }
.empty { padding: 3rem 1rem; text-align: center; color: var(--muted); border: 1px dashed var(--line-strong); }

.type-strip { list-style: none; margin: 0 0 2rem; padding: 0; display: grid; gap: 0.5rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5rem), 1fr)); }
.type-strip a { display: block; padding: 0.85rem 1rem; background: var(--paper); box-shadow: var(--shadow-1); border-bottom: 2px solid transparent; text-decoration: none; color: var(--ink); }
.type-strip a:hover { border-bottom-color: var(--brand); }
.type-strip strong { display: block; font-weight: 600; font-size: 1.05rem; }
.type-strip span { color: var(--muted); font-size: var(--step--1); }
/* phones: one swipeable row instead of five rows of type cards above the catalogue */
@media (max-width: 639.98px) {
  .type-strip { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 40%; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(-1 * var(--gutter)); padding: 0.25rem var(--gutter) 0.75rem; scrollbar-width: none; }
  .type-strip::-webkit-scrollbar { display: none; }
  .type-strip li { scroll-snap-align: start; }
}
.type-intro { display: grid; gap: 2rem var(--gutter); align-items: start; margin-bottom: 1rem; }
.type-aside { background: var(--paper); box-shadow: var(--shadow-1); padding: 1.5rem; }
.type-aside__h { font-size: var(--step-1); margin-bottom: 0.75rem; }
@media (min-width: 900px) { .type-intro { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } .type-aside { position: sticky; top: calc(var(--header-h) + 1.5rem); } }

/* ---------- stone detail ---------- */
.stone-page { display: grid; gap: 2.5rem var(--gutter); align-items: start; padding-block: clamp(1.5rem, 4vw, 3rem) var(--section-sm); }
.gallery__main { aspect-ratio: 4 / 3; overflow: hidden; background: var(--stone); box-shadow: var(--shadow-2); }
.gallery__main img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.gallery__main--empty { display: grid; place-items: center; color: var(--muted); text-align: center; padding: 2rem; }
.gallery__thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; margin-top: 0.5rem; }
.gallery__thumbs button { padding: 0; border: 2px solid transparent; background: none; cursor: pointer; aspect-ratio: 4 / 3; overflow: hidden; }
.gallery__thumbs button[aria-current="true"] { border-color: var(--brand); }
.gallery__thumbs img { width: 100%; height: 100%; object-fit: cover; }
.stone-info h1 { margin-bottom: 0.3em; }
.stone-info__type { color: var(--muted); margin-bottom: 1.25rem; }
.stone-info__type a { color: inherit; }
.stone-info__short { font-size: var(--step-1); line-height: 1.5; color: var(--ink); }
.stone-info__h { font-size: var(--step--1); font-weight: 600; color: var(--muted); margin: 1rem 0 0.4rem; }
.stone-info__note { margin-top: 1rem; font-size: var(--step--1); color: var(--muted); }
.tags { list-style: none; padding: 0; margin: 0 0 1.5rem; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.tags li a, .tags li span { display: inline-block; padding: 0.3rem 0.75rem; border: 1px solid var(--line-strong); border-radius: 999px; font-size: var(--step--1); color: var(--ink); text-decoration: none; background: var(--paper); }
.tags li a:hover { border-color: var(--brand); color: var(--brand); }
.stone-info .btn-row { margin-top: 1.5rem; }
@media (min-width: 900px) { .stone-page { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } .stone-info { position: sticky; top: calc(var(--header-h) + 1.5rem); } }
/* long description with a sticky "visit / quote" box beside it */
.stone-detail { display: grid; gap: 2.5rem var(--gutter); align-items: start; }
@media (min-width: 1000px) { .stone-detail { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); } .stone-detail__aside { position: sticky; top: calc(var(--header-h) + 1.5rem); } }
.spec--aside { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--line); gap: 0.35rem 1rem; font-size: 0.92rem; }

/* ---------- prose (articles, descriptions) ---------- */
.prose { max-width: 68ch; }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { font-size: var(--step-2); margin-top: 2.2em; }
.prose h3 { font-size: var(--step-1); margin-top: 1.8em; }
.prose h4 { font-size: var(--step-0); font-weight: 600; margin-top: 1.6em; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: 0.35em; }
.prose img { margin-block: 1.5em; }
.prose .fig { margin: 2.2em 0; }
.prose .fig img { display: block; width: 100%; height: auto; margin: 0; aspect-ratio: 3 / 2; object-fit: cover; }
.prose .fig--stone img { aspect-ratio: auto; max-height: 26rem; }
.prose .fig > a { display: block; }
.prose .fig figcaption { margin-top: 0.7rem; font-size: var(--step--1); color: var(--muted); line-height: 1.5; }
.prose .fig figcaption a { color: var(--ink); font-weight: 600; text-decoration-color: var(--brand); }
.prose .fig figcaption a:hover { color: var(--brand); }
.prose blockquote { margin: 1.5em 0; padding-left: 1.25rem; border-left: 3px solid var(--brand); font-size: var(--step-1); font-weight: 500; color: var(--ink); }
.prose table { border-collapse: collapse; width: 100%; font-size: 0.95rem; }
.prose th, .prose td { border-bottom: 1px solid var(--line); padding: 0.6rem 0.5rem; text-align: left; vertical-align: top; }
.prose th { font-weight: 600; color: var(--ink); }
.prose a { text-decoration: none; background-image: linear-gradient(currentColor, currentColor); background-size: 100% 1px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size 0.2s var(--ease); }
.prose a:hover { background-size: 0 1px; background-position: 100% 100%; }

.article { padding-block: clamp(2rem, 5vw, 3.5rem) var(--section-sm); }
.article__head { max-width: 46rem; margin-bottom: 2rem; }
.article__meta { color: var(--muted); font-size: var(--step--1); display: flex; gap: 1rem; flex-wrap: wrap; }
.article__hero { aspect-ratio: 2 / 1; overflow: hidden; margin-bottom: 2.5rem; background: var(--stone); }
.article__hero img { width: 100%; height: 100%; object-fit: cover; }
.article__body { display: grid; gap: 3rem var(--gutter); }
@media (min-width: 1000px) { .article__body { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); } .article__aside { position: sticky; top: calc(var(--header-h) + 1.5rem); } }
.aside-box { background: var(--paper); box-shadow: var(--shadow-1); padding: 1.5rem; }
.aside-box--gap { margin-top: 1.5rem; }
.aside-box h2 { font-size: var(--step-1); margin-bottom: 0.5rem; }
.aside-box p { margin-bottom: 1rem; }
.aside-box__phone { margin: 1rem 0 0; }
.aside-list { list-style: none; padding: 0; margin: 0; }
.aside-list li { padding: 0.6rem 0; border-top: 1px solid var(--line); }
.aside-list a { color: var(--ink); text-decoration: none; }
.aside-list a:hover { color: var(--brand); }

.post-list { display: grid; gap: 2.5rem; }
.post-row { display: grid; gap: 1rem var(--gutter); align-items: start; border-top: 1px solid var(--line-strong); padding-top: 1.5rem; }
.post-row__img { aspect-ratio: 16 / 10; overflow: hidden; background: var(--stone); }
.post-row__img img { width: 100%; height: 100%; object-fit: cover; }
.post-row h2 { font-size: var(--step-2); margin-bottom: 0.4rem; }
.post-row h2 a { color: var(--ink); text-decoration: none; }
.post-row h2 a:hover { color: var(--brand); }
.post-row__meta { color: var(--muted); font-size: var(--step--1); margin-bottom: 0.75rem; }
@media (min-width: 700px) { .post-row { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); } }

/* ---------- forms ---------- */
.form { display: grid; gap: 1.25rem; }
.form__grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
/* align-content: start keeps every field at its natural height when a neighbour in the row has a hint line */
.field { display: grid; gap: 0.4rem; align-content: start; }
.field label { font-weight: 500; color: var(--ink); }
.field small { color: var(--muted); }
.field input, .field select, .field textarea { width: 100%; padding: 0.8rem 0.95rem; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--field); font: inherit; color: var(--ink); }
.field textarea { min-height: 9rem; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--brand); outline-offset: 1px; border-color: var(--brand); }
.field--check { display: flex; gap: 0.7rem; align-items: flex-start; }
.field--check input { width: 1.15rem; height: 1.15rem; margin-top: 0.25rem; flex-shrink: 0; accent-color: var(--brand); }
.field--check label { font-weight: 400; color: var(--ink-2); }
.form__status { min-height: 1.5rem; }
.form__status.is-success { color: #2f6b3a; }
.form__status.is-error { color: var(--brand); }
.honeypot { position: absolute; left: -9999px; }
.form-card { background: var(--paper); box-shadow: var(--shadow-1); padding: clamp(1.5rem, 4vw, 2.5rem); }
.form-card--gap { margin-top: 2rem; }

/* ---------- contact ---------- */
.contact-grid { display: grid; gap: 3rem var(--gutter); align-items: start; }
@media (min-width: 900px) { .contact-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.contact-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.25rem; }
.contact-list li { border-top: 1px solid var(--line-strong); padding-top: 1rem; }
.contact-list strong { display: block; font-size: var(--step-1); font-weight: 600; }
.contact-list span { display: block; color: var(--muted); margin-bottom: 0.35rem; }
.contact-list a { color: var(--ink); text-decoration: none; font-weight: 500; overflow-wrap: anywhere; }
.contact-list a:hover { color: var(--brand); }
.map { position: relative; aspect-ratio: 16 / 9; background: var(--stone); display: grid; place-items: center; text-align: center; padding: 1.5rem; }
.map p { max-width: 28rem; margin-bottom: 1rem; }
.map.is-loaded { padding: 0; display: block; }
.map iframe { width: 100%; height: 100%; border: 0; }

/* ---------- finishes, product cards, link lists ---------- */
.finish-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
.finish-grid--tight { margin-top: 0; }
.finish-card { display: block; text-decoration: none; color: var(--ink); }
.finish-card__img { display: block; aspect-ratio: 16 / 10; overflow: hidden; margin-bottom: 0.8rem; background: var(--stone); }
.finish-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease); }
.finish-card:hover .finish-card__img img { transform: scale(1.04); }
.finish-card strong { display: block; font-weight: 600; font-size: var(--step-1); }
.finish-card:hover strong { color: var(--brand); }
.finish-card__text { display: block; color: var(--ink-2); font-size: 0.95rem; }

.product-cards { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.product-card { display: block; text-decoration: none; color: var(--ink); background: var(--paper); box-shadow: var(--shadow-1); }
.product-card__img { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--stone); }
.product-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease); }
.product-card:hover .product-card__img img { transform: scale(1.04); }
.product-card strong { display: block; font-weight: 600; font-size: var(--step-1); padding: 1rem 1.25rem 0.25rem; }
.product-card:hover strong { color: var(--brand); }
.product-card__text { display: block; padding: 0 1.25rem 1.25rem; color: var(--ink-2); font-size: 0.95rem; }

.link-list { list-style: none; padding: 0; margin: 0; max-width: 48rem; }
.link-list li { padding: 0.7rem 0; border-top: 1px solid var(--line-strong); }
.link-list a { color: var(--ink); text-decoration: none; font-weight: 500; }
.link-list a:hover { color: var(--brand); }
.link-cards { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.link-cards a { display: block; padding: 1.25rem; background: var(--paper); box-shadow: var(--shadow-1); border-left: 3px solid transparent; text-decoration: none; color: var(--ink); height: 100%; }
.link-cards a:hover { border-left-color: var(--brand); }
.link-cards strong { display: block; font-weight: 600; font-size: var(--step-1); margin-bottom: 0.25rem; }
.link-cards span { color: var(--ink-2); font-size: 0.95rem; }

/* ---------- FAQ ---------- */
.faq h2 { margin-bottom: 1.25rem; text-align: center; }
.faq__item { border-top: 1px solid var(--line-strong); }
.faq__item:last-child { border-bottom: 1px solid var(--line-strong); }
.faq__item summary { cursor: pointer; padding: 1rem 2.5rem 1rem 0; font-weight: 500; color: var(--ink); list-style: none; position: relative; font-size: var(--step-0); }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: ''; position: absolute; right: 0.5rem; top: 50%; width: 0.6rem; height: 0.6rem; border-right: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); transform: translateY(-70%) rotate(45deg); transition: transform 0.2s; }
.faq__item[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq__item summary:hover { color: var(--brand); }
.faq__a { padding: 0 0 1.25rem; max-width: 62ch; }
.faq__a p { margin: 0; }

/* ---------- stone finder (a graphite band on the home page) ---------- */
.finder-section { position: relative; overflow: hidden; isolation: isolate; background: var(--dark); color: var(--on-dark-2); }
.finder-section::before { width: clamp(26rem, 44vw, 42rem); right: calc(50% - 52rem); top: 50%; transform: translateY(-50%); background: rgba(243, 241, 237, 0.04); }
.finder { display: grid; gap: 2rem var(--gutter); }
.finder__intro h2 { margin-bottom: 0.5rem; color: var(--on-dark); }
.finder__intro p { margin: 0; max-width: 28rem; color: var(--on-dark-2); }
.finder__group { border: 0; padding: 0; margin: 0 0 1.5rem; }
.finder__group legend { font-weight: 500; color: var(--on-dark); margin-bottom: 0.6rem; padding: 0; }
.finder__chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.fchip { position: relative; }
.fchip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.fchip span { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.5rem 0.95rem; border: 1px solid rgba(243, 241, 237, 0.22); border-radius: 999px; background: rgba(243, 241, 237, 0.05); color: var(--on-dark); cursor: pointer; font-size: 0.95rem; transition: background-color 0.15s, border-color 0.15s, color 0.15s; }
.fchip span:hover { border-color: rgba(243, 241, 237, 0.6); }
.fchip input:checked + span { background: var(--on-dark); color: var(--ink); border-color: var(--on-dark); }
.fchip input:focus-visible + span { outline: 2px solid var(--on-dark); outline-offset: 2px; }
.fchip .chip__swatch { border-color: rgba(243, 241, 237, 0.35); }
.finder__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.finder__hint { color: var(--on-dark-2); font-size: var(--step--1); }
@media (min-width: 900px) { .finder { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); } }

/* ---------- compare slider ---------- */
.compare { position: relative; aspect-ratio: 16 / 8; overflow: hidden; background: var(--stone); --pos: 50%; margin-bottom: 2.5rem; user-select: none; }
.compare__img { position: absolute; inset: 0; }
.compare__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.compare__img--a { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.compare__handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25); pointer-events: none; }
.compare__handle::after { content: ''; position: absolute; top: 50%; left: 50%; width: 2.75rem; height: 2.75rem; transform: translate(-50%, -50%); border-radius: 50%; background: #fff; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3); background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23161616' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M8 6l-5 6 5 6M16 6l5 6-5 6'/></svg>"); background-repeat: no-repeat; background-position: center; }
.compare__label { position: absolute; top: 1rem; padding: 0.35rem 0.8rem; border-radius: 999px; background: rgba(0, 0, 0, 0.7); color: #fff; font-size: 0.85rem; font-weight: 500; pointer-events: none; }
.compare__label--a { left: 1rem; }
.compare__label--b { right: 1rem; }
.compare__range { position: absolute; inset: 0; display: block; }
.compare__range input { width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; }
.compare__range input:focus-visible { opacity: 1; outline: 3px solid var(--brand); outline-offset: -3px; }

/* ---------- team cards ---------- */
.team-cards { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); }
.person { display: grid; grid-template-columns: minmax(7rem, 10rem) 1fr; gap: 1.5rem; align-items: start; background: var(--paper); box-shadow: var(--shadow-1); padding: 1.5rem; }
.person__photo { aspect-ratio: 1; overflow: hidden; border-radius: var(--radius); background: var(--stone); }
.person__photo img { width: 100%; height: 100%; object-fit: cover; }
.person__name { font-size: var(--step-1); margin-bottom: 0.15em; }
.person__role { color: var(--muted); margin-bottom: 0.75rem; }
.person__tagline { color: var(--ink-2); margin-bottom: 0.9rem; }
.person__contact { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.25rem; overflow-wrap: anywhere; }
.person__body { min-width: 0; }
.person__contact a { color: var(--ink); text-decoration: none; font-weight: 500; }
.person__contact a:hover { color: var(--brand); }
.team-cards--compact .person { padding: 1rem; }
@media (max-width: 480px) { .person { grid-template-columns: 1fr; gap: 1rem; padding: 1rem; } .person__photo { width: 7rem; } }

/* ---------- why table (rólunk) ---------- */
.why-table { width: 100%; border-collapse: collapse; background: var(--paper); box-shadow: var(--shadow-1); font-size: 0.98rem; }
.why-table th, .why-table td { padding: 0.9rem 1rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.why-table thead th { font-weight: 600; font-size: var(--step-0); color: var(--ink); }
.why-table tbody th { font-weight: 600; color: var(--ink); width: 9rem; }
.why-table td.is-us { color: var(--ink); font-weight: 500; background: var(--brand-soft); }
@media (max-width: 599.98px) { .why-table thead { display: none; } .why-table tr { display: grid; grid-template-columns: 1fr; border-bottom: 1px solid var(--line); } .why-table th, .why-table td { border: 0; padding: 0.4rem 0.9rem; } .why-table td.is-us::before { content: 'President-Kő: '; font-weight: 600; } .why-table td:not(.is-us)::before { content: 'Máshol: '; color: var(--muted); } }

/* ---------- sticky mobile CTA ---------- */
.sticky-cta { display: none; }
@media (max-width: 899.98px) {
  body { padding-bottom: calc(3.75rem + env(safe-area-inset-bottom)); }
  .sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; display: grid; grid-template-columns: 1fr 1.4fr; gap: 1px; background: var(--line); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); }
  .sticky-cta a { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.95rem 1rem; text-decoration: none; font-weight: 500; }
  .sticky-cta__call { background: var(--paper); color: var(--ink); }
  .sticky-cta__quote { background: var(--brand); color: #fff; }
  body.nav-open .sticky-cta { display: none; }
}

/* ---------- misc & utilities ---------- */
.lede { font-size: var(--step-1); line-height: 1.5; color: var(--ink); }
.muted { color: var(--muted); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.placeholder { background: var(--brand-soft); color: var(--brand-dark); padding: 0 0.3em; }
.error-page { text-align: center; padding-block: var(--section); }
.error-page h1 { font-size: var(--step-5); }
.h-step2 { font-size: var(--step-2); }
.m-0 { margin: 0; }
.mt-2 { margin-top: 2rem; }
.dot-sep { color: var(--line-strong); margin: 0 0.15em; }
.nowrap { white-space: nowrap; }
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.22s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
  .tiles__item, .hero-deck__title span, .hero-deck__lead, .hero-deck__text .btn-row, .hero-deck__stats, .picker { animation: none; opacity: 1; transform: none; }
  .picker__slide.is-entering, .picker__slide img { animation: none !important; }
  .preloader__inner { animation: none; }
  .preloader__line i { animation: none; transform: none; }
  @view-transition { navigation: none; }
}
@media print {
  .topbar, .site-header, .site-footer, .cta-band, .menu-btn, .sticky-cta { display: none; }
  body { background: #fff; color: #000; }
  .page-head, .hero-band, .section--soft, .section--travertine, .section--white { background: none; }
  .page-head::before, .hero-band::before, .hero-deck::before { display: none; }
}

/* ---------- motion: scroll reveal, hover depth, helpers ---------- */
/* each revealed element (or each child of a data-reveal="group") fades in when it enters the viewport; JS staggers
   the elements that appear together via transition-delay */
.js [data-reveal]:not([data-reveal="group"]), .js [data-reveal="group"] > * { opacity: 0; transform: translateY(22px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.js [data-reveal]:not([data-reveal="group"]).is-visible, .js [data-reveal="group"] > .is-visible { opacity: 1; transform: none; }
.js .usp__list.is-visible .usp__icon { animation: iconPop 0.7s var(--ease) both; }
@keyframes iconPop { 0% { transform: scale(0.6); opacity: 0; } 60% { transform: scale(1.08); opacity: 1; } 100% { transform: scale(1); } }

/* hover depth on cards and tiles */
.product-card, .post-card, .quote, .steps li, .person, .finish-card__img, .stone__img, .link-cards a, .type-strip a { transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.2s; }
.product-card:hover, .post-card:hover, .quote:hover, .person:hover, .link-cards a:hover, .type-strip a:hover { transform: translateY(-4px); box-shadow: 0 24px 44px -28px rgba(23, 21, 19, 0.5); }
.stone:hover .stone__img, .finish-card:hover .finish-card__img { box-shadow: 0 22px 40px -26px rgba(23, 21, 19, 0.55); }
.steps li:hover { transform: translateY(-3px); }
.steps--icons { position: relative; }
.steps--icons::before { content: ''; position: absolute; left: 2.5rem; right: 2.5rem; top: 3.1rem; height: 1px; background: var(--line-strong); transform: scaleX(0); transform-origin: left; transition: transform 1.4s var(--ease) 0.3s; z-index: 0; }
.steps--icons.is-visible::before { transform: scaleX(1); }
.steps--icons li { position: relative; z-index: 1; }
@media (max-width: 899.98px) { .steps--icons::before { display: none; } }
.compare.is-visible .compare__handle::after { animation: nudge 1.4s var(--ease) 0.6s 1; }
@keyframes nudge { 0%, 100% { transform: translate(-50%, -50%); } 30% { transform: translate(calc(-50% + 14px), -50%); } 70% { transform: translate(calc(-50% - 14px), -50%); } }
.tile__label { transition: background-color 0.2s, color 0.2s, transform 0.3s var(--ease); }
.tile:hover .tile__label { transform: translate(-50%, -50%) scale(1.06); }

/* back to top */
.to-top { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 44; width: 2.9rem; height: 2.9rem; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--paper); color: var(--ink); display: grid; place-items: center; cursor: pointer; box-shadow: 0 10px 24px -12px rgba(23, 21, 19, 0.4); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity 0.3s, transform 0.3s, visibility 0.3s; }
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { color: var(--brand); border-color: var(--brand); }
@media (max-width: 899.98px) { .to-top { bottom: calc(4.5rem + env(safe-area-inset-bottom)); right: 0.9rem; } }

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal]:not([data-reveal="group"]), .js [data-reveal="group"] > * { opacity: 1; transform: none; transition: none; }
  .js .usp__list.is-visible .usp__icon, .compare.is-visible .compare__handle::after { animation: none; }
  .steps--icons::before { transform: scaleX(1); transition: none; }
}

/**
 * tom-select.css (v2.6.2)
 * Copyright (c) contributors
 *
 * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this
 * file except in compliance with the License. You may obtain a copy of the License at:
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed under
 * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF
 * ANY KIND, either express or implied. See the License for the specific language
 * governing permissions and limitations under the License.
 *
 */
.ts-control {
  border: 1px solid #d0d0d0;
  padding: 8px 8px;
  width: 100%;
  overflow: hidden;
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  box-shadow: none;
  border-radius: 3px;
  display: flex;
  flex-wrap: wrap;
}
.ts-wrapper.multi.has-items .ts-control {
  padding: calc(8px - 2px - 0px) 8px calc(8px - 2px - 3px - 0px);
}
.full .ts-control {
  background-color: #fff;
}
.disabled .ts-control, .disabled .ts-control * {
  cursor: default !important;
}
.focus .ts-control {
  box-shadow: none;
}
.ts-control > * {
  vertical-align: baseline;
  display: inline-block;
}
.ts-wrapper.multi .ts-control > div {
  cursor: pointer;
  margin: 0 3px 3px 0;
  padding: 2px 6px;
  background: #f2f2f2;
  color: #303030;
  border: 0px solid #d0d0d0;
  overflow: auto;
}
.ts-wrapper.multi .ts-control > div.active {
  background: #e8e8e8;
  color: #303030;
  border: 0px solid #cacaca;
}
.ts-wrapper.multi.disabled .ts-control > div, .ts-wrapper.multi.disabled .ts-control > div.active {
  color: rgb(124.5, 124.5, 124.5);
  background: hsl(0, 0%, 124.9019607843%);
  border: 0px solid hsl(0, 0%, 111.568627451%);
}
.ts-control > input {
  flex: 1 1 auto;
  min-width: 7rem;
  display: inline-block !important;
  padding: 0 !important;
  min-height: 0 !important;
  max-height: none !important;
  max-width: 100% !important;
  margin: 0 !important;
  text-indent: 0 !important;
  border: 0 none !important;
  background: none !important;
  line-height: inherit !important;
  -webkit-user-select: auto !important;
     -moz-user-select: auto !important;
      -ms-user-select: auto !important;
          user-select: auto !important;
  box-shadow: none !important;
}
.ts-control > input::-ms-clear {
  display: none;
}
.ts-control > input:focus {
  outline: none !important;
}
.has-items .ts-control > input {
  margin: 0px 4px !important;
}
.ts-control.rtl {
  text-align: right;
}
.ts-control.rtl.single .ts-control:after {
  left: 15px;
  right: auto;
}
.ts-control.rtl .ts-control > input {
  margin: 0px 4px 0px -2px !important;
}
.disabled .ts-control {
  opacity: 0.5;
  background-color: #fafafa;
}
.input-hidden .ts-control > input {
  opacity: 0;
  position: absolute;
  left: -10000px;
}

.ts-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  z-index: 10;
  border: 1px solid #d0d0d0;
  background: #fff;
  margin: 0.25rem 0 0;
  border-top: 0 none;
  box-sizing: border-box;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  border-radius: 0 0 3px 3px;
}
.ts-dropdown [data-selectable] {
  cursor: pointer;
  overflow: hidden;
}
.ts-dropdown [data-selectable] .highlight {
  background: rgba(125, 168, 208, 0.2);
  border-radius: 1px;
}
.ts-dropdown .option,
.ts-dropdown .optgroup-header,
.ts-dropdown .no-results,
.ts-dropdown .create {
  padding: 5px 8px;
}
.ts-dropdown .option, .ts-dropdown [data-disabled], .ts-dropdown [data-disabled] [data-selectable].option {
  cursor: inherit;
  opacity: 0.5;
}
.ts-dropdown [data-selectable].option {
  opacity: 1;
  cursor: pointer;
}
.ts-dropdown .optgroup:first-child .optgroup-header {
  border-top: 0 none;
}
.ts-dropdown .optgroup-header {
  color: #303030;
  background: #fff;
  cursor: default;
}
.ts-dropdown .active {
  background-color: #f5fafd;
  color: #495c68;
}
.ts-dropdown .active.create {
  color: #495c68;
}
.ts-dropdown .create {
  color: rgba(48, 48, 48, 0.5);
}
.ts-dropdown .spinner {
  display: inline-block;
  width: 30px;
  height: 30px;
  margin: 5px 8px;
}
.ts-dropdown .spinner::after {
  content: " ";
  display: block;
  width: 24px;
  height: 24px;
  margin: 3px;
  border-radius: 50%;
  border: 5px solid #d0d0d0;
  border-color: #d0d0d0 transparent #d0d0d0 transparent;
  animation: lds-dual-ring 1.2s linear infinite;
}
@keyframes lds-dual-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.ts-dropdown-content {
  overflow: hidden auto;
  max-height: 200px;
  scroll-behavior: smooth;
}

.ts-wrapper.plugin-drag_drop .ts-dragging {
  color: transparent !important;
}
.ts-wrapper.plugin-drag_drop .ts-dragging > * {
  visibility: hidden !important;
}

.plugin-checkbox_options:not(.rtl) .option input {
  margin-right: 0.5rem;
}

.plugin-checkbox_options.rtl .option input {
  margin-left: 0.5rem;
}

/* stylelint-disable function-name-case */
.plugin-clear_button {
  --ts-pr-clear-button: 1em;
}
.plugin-clear_button .clear-button {
  opacity: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: calc(8px - 6px);
  margin-right: 0 !important;
  background: transparent !important;
  transition: opacity 0.5s;
  cursor: pointer;
}
.plugin-clear_button.form-select .clear-button, .plugin-clear_button.single .clear-button {
  right: max(var(--ts-pr-caret), 8px);
}
.plugin-clear_button.focus.has-items .clear-button, .plugin-clear_button:not(.disabled):hover.has-items .clear-button {
  opacity: 1;
}

.ts-wrapper .dropdown-header {
  position: relative;
  padding: 10px 8px;
  border-bottom: 1px solid #d0d0d0;
  background: color-mix(#fff, #d0d0d0, 85%);
  border-radius: 3px 3px 0 0;
}
.ts-wrapper .dropdown-header-close {
  position: absolute;
  right: 8px;
  top: 50%;
  color: #303030;
  opacity: 0.4;
  margin-top: -12px;
  line-height: 20px;
  font-size: 20px !important;
}
.ts-wrapper .dropdown-header-close:hover {
  color: hsl(0, 0%, -6.1764705882%);
}

.plugin-dropdown_input.focus.dropdown-active .ts-control {
  box-shadow: none;
  border: 1px solid #d0d0d0;
}
.plugin-dropdown_input .dropdown-input {
  border: 1px solid #d0d0d0;
  border-width: 0 0 1px;
  display: block;
  padding: 8px 8px;
  box-shadow: none;
  width: 100%;
  background: transparent;
}
.plugin-dropdown_input .items-placeholder {
  border: 0 none !important;
  box-shadow: none !important;
  width: 100%;
}
.plugin-dropdown_input.has-items .items-placeholder, .plugin-dropdown_input.dropdown-active .items-placeholder {
  display: none !important;
}

.ts-wrapper.plugin-input_autogrow.has-items .ts-control > input {
  min-width: 0;
}
.ts-wrapper.plugin-input_autogrow.has-items.focus .ts-control > input {
  flex: none;
  min-width: 4px;
}
.ts-wrapper.plugin-input_autogrow.has-items.focus .ts-control > input::-ms-input-placeholder {
  color: transparent;
}
.ts-wrapper.plugin-input_autogrow.has-items.focus .ts-control > input::placeholder {
  color: transparent;
}

.ts-dropdown.plugin-optgroup_columns .ts-dropdown-content {
  display: flex;
}
.ts-dropdown.plugin-optgroup_columns .optgroup {
  border-right: 1px solid #f2f2f2;
  border-top: 0 none;
  flex-grow: 1;
  flex-basis: 0;
  min-width: 0;
}
.ts-dropdown.plugin-optgroup_columns .optgroup:last-child {
  border-right: 0 none;
}
.ts-dropdown.plugin-optgroup_columns .optgroup::before {
  display: none;
}
.ts-dropdown.plugin-optgroup_columns .optgroup-header {
  border-top: 0 none;
}

.ts-wrapper.plugin-remove_button .item {
  display: inline-flex;
  align-items: center;
}
.ts-wrapper.plugin-remove_button .item .remove {
  color: inherit;
  text-decoration: none;
  vertical-align: middle;
  display: inline-block;
  padding: 0 6px;
  border-radius: 0 2px 2px 0;
  box-sizing: border-box;
}
.ts-wrapper.plugin-remove_button .item .remove:hover {
  background: rgba(0, 0, 0, 0.05);
}
.ts-wrapper.plugin-remove_button.disabled .item .remove:hover {
  background: none;
}
.ts-wrapper.plugin-remove_button .remove-single {
  position: absolute;
  right: 0;
  top: 0;
  font-size: 23px;
}

.ts-wrapper.plugin-remove_button:not(.rtl) .item {
  padding-right: 0 !important;
}
.ts-wrapper.plugin-remove_button:not(.rtl) .item .remove {
  border-left: 1px solid #d0d0d0;
  margin-left: 6px;
}
.ts-wrapper.plugin-remove_button:not(.rtl) .item.active .remove {
  border-left-color: #cacaca;
}
.ts-wrapper.plugin-remove_button:not(.rtl).disabled .item .remove {
  border-left-color: hsl(0, 0%, 111.568627451%);
}

.ts-wrapper.plugin-remove_button.rtl .item {
  padding-left: 0 !important;
}
.ts-wrapper.plugin-remove_button.rtl .item .remove {
  border-right: 1px solid #d0d0d0;
  margin-right: 6px;
}
.ts-wrapper.plugin-remove_button.rtl .item.active .remove {
  border-right-color: #cacaca;
}
.ts-wrapper.plugin-remove_button.rtl.disabled .item .remove {
  border-right-color: hsl(0, 0%, 111.568627451%);
}

:root {
  --ts-pr-clear-button: 0px;
  --ts-pr-caret: 0px;
  --ts-pr-min: .75rem;
}

.ts-wrapper.single .ts-control, .ts-wrapper.single .ts-control input {
  cursor: pointer;
}

.ts-control:not(.rtl) {
  padding-right: max(var(--ts-pr-min), var(--ts-pr-clear-button) + var(--ts-pr-caret)) !important;
}

.ts-control.rtl {
  padding-left: max(var(--ts-pr-min), var(--ts-pr-clear-button) + var(--ts-pr-caret)) !important;
}

.ts-wrapper {
  position: relative;
}

.ts-dropdown,
.ts-control,
.ts-control input {
  color: #303030;
  font-family: inherit;
  font-size: 13px;
  line-height: 18px;
}

.ts-control,
.ts-wrapper.single.input-active .ts-control {
  background: #fff;
  cursor: text;
}

.ts-hidden-accessible {
  border: 0 !important;
  clip: rect(0 0 0 0) !important;
  -webkit-clip-path: inset(50%) !important;
          clip-path: inset(50%) !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  width: 1px !important;
  white-space: nowrap !important;
}
/*# sourceMappingURL=tom-select.css.map */
/* Tom Select – brand skin (loaded after tom-select.css). Applies to every <select> on the public site and in the admin.
   The base stylesheet sets 13px text on the control and an !important right padding, and leaves the caret in the
   flex flow; this skin overrides all three so the control matches the other form fields. */
.ts-wrapper, .ts-dropdown { font: inherit; font-size: 1rem; }
.ts-wrapper .ts-control, .ts-wrapper.single .ts-control, .ts-wrapper.multi .ts-control {
  border: 1px solid var(--line-strong, #c2bcb1); border-radius: var(--radius, 3px); background: var(--field, #fbfaf8); background-image: none;
  padding: 0.8rem 2.6rem 0.8rem 0.95rem !important; box-shadow: none; color: var(--ink, #171513); min-height: 0; cursor: pointer;
  font-size: inherit; line-height: 1.4; align-items: center;
}
.ts-wrapper .ts-control input, .ts-wrapper .ts-control .item { font: inherit; font-size: inherit; line-height: inherit; color: var(--ink, #171513); }
.ts-wrapper.single .ts-control .item { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ts-wrapper.single .ts-control, .ts-wrapper.single.input-active .ts-control { background: var(--field, #fbfaf8); }
.ts-wrapper.single .ts-control::after { content: ''; position: absolute; right: 1rem; top: 50%; border: 0; width: 0.55rem; height: 0.55rem; margin: 0; border-right: 1.5px solid var(--ink, #171513); border-bottom: 1.5px solid var(--ink, #171513); transform: translateY(-70%) rotate(45deg); transition: transform 0.2s, border-color 0.2s; }
.ts-wrapper.single.dropdown-active .ts-control::after { transform: translateY(-30%) rotate(-135deg); border-color: var(--brand, #8f2226); }
.ts-wrapper.focus .ts-control, .ts-wrapper.dropdown-active .ts-control { border-color: var(--brand, #8f2226); box-shadow: 0 0 0 1px var(--brand, #8f2226); }
.ts-wrapper.dropdown-active .ts-control { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.ts-wrapper .ts-control input::placeholder, .ts-wrapper .ts-control .item.is-empty { color: var(--muted, #625d56); }
.ts-wrapper.single .ts-control .item[data-value=""] { color: var(--muted, #625d56); }
.ts-dropdown { margin: -1px 0 0; border: 1px solid var(--line-strong, #c2bcb1); border-top-color: var(--line, #d9d4cb); border-radius: 0 0 var(--radius, 3px) var(--radius, 3px); box-shadow: 0 18px 32px -18px rgba(23, 21, 19, 0.35); background: var(--paper, #f7f6f3); z-index: 60; font-size: 1rem; line-height: 1.4; }
.ts-dropdown .ts-dropdown-content { max-height: 18rem; padding: 0.3rem 0; }
.ts-dropdown .option { padding: 0.65rem 0.95rem; color: var(--ink, #171513); cursor: pointer; }
.ts-dropdown .option[data-value=""] { color: var(--muted, #625d56); }
.ts-dropdown .active { background: var(--bg, #edebe6); color: var(--ink, #171513); }
.ts-dropdown .option.selected, .ts-dropdown .active.selected { background: var(--brand, #8f2226); color: #fff; }
.ts-dropdown .no-results, .ts-dropdown .optgroup-header { padding: 0.65rem 0.95rem; color: var(--muted, #625d56); }
.ts-wrapper.disabled .ts-control { opacity: 0.6; }
.ts-wrapper.plugin-dropdown_input .dropdown-input { border: 0; border-bottom: 1px solid var(--line, #d9d4cb); padding: 0.6rem 0.95rem; font: inherit; }
.admin .ts-wrapper .ts-control { padding: 0.55rem 2.4rem 0.55rem 0.75rem !important; font-size: 0.95rem; }
.admin .ts-dropdown { font-size: 0.95rem; }