/* MasterSlate v3 visual layer. Source of truth: ../design/design.md (part B).
   Loaded last on every page. Visual only: no copy lives here. */

html:root {
  --ms-red: #E90117;
  --ms-red-ink: #C10013;
  --ms-red-deep: #8F000E;
  --ms-black: #111111;
  --ms-g900: #222222;
  --ms-g700: #4A4A4A;
  --ms-g500: #7A7A7A;
  --ms-g300: #C9C9C9;
  --ms-g200: #E4E4E4;
  --ms-g100: #F2F2F2;
  --ms-white: #FFFFFF;
  --ms-radius: 4px;
  --ms-ease: cubic-bezier(.22,.8,.24,1);
  --ms-shadow: 0 1px 2px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.08);
  --ms-shadow-hover: 0 2px 4px rgba(0,0,0,.08), 0 16px 40px rgba(0,0,0,.12);

  /* map the v1/v2 variables onto the v3 palette */
  --brand: var(--ms-red);
  --brand-hover: var(--ms-red-deep);
  --surface-dark: var(--ms-g900);
  --surface-darker: var(--ms-black);
  --surface-light: var(--ms-g100);
  --border-light: var(--ms-g200);
  --border-dark: #333333;
  --text-main: var(--ms-black);
  --text-muted: var(--ms-g700);
  --radius-sm: 4px; --radius-md: 4px; --radius-lg: 4px;
  --shadow-sm: var(--ms-shadow); --shadow-md: var(--ms-shadow); --shadow-lg: var(--ms-shadow-hover);
  --v2-red: var(--ms-red);
  --v2-ink: var(--ms-black);
  --v2-stone: var(--ms-g100);
  --v2-ease: var(--ms-ease);
}

/* ---------- type ---------- */
h1, h2, h3, h4 { color: inherit; letter-spacing: -.01em; }
.section-dark h1, .section-dark h2, .section-dark h3 { color: #fff; }
.section-subtitle, .v2-kicker {
  display: inline-flex !important; align-items: center; gap: 12px;
  font-family: 'Montserrat', sans-serif; font-size: .78rem !important; font-weight: 700;
  letter-spacing: .14em !important; text-transform: uppercase; color: var(--ms-red-ink) !important;
}
.section-subtitle::before, .v2-kicker::before { content: ''; width: 24px; height: 2px; background: var(--ms-red); flex: none; }
.section-dark .section-subtitle, .premium-media-section .section-subtitle, .contact-section .section-subtitle,
.story-hero .section-subtitle, .hero .section-subtitle { color: #fff !important; }

/* strata mark under section titles (Matt: the decor line under titles works) */
.section-title { position: relative; }
.section-title::after {
  content: ''; display: block; width: 132px; height: 16px; margin-top: 18px;
  background: url("assets/decor/strata.svg") no-repeat left center / contain;
}
.section-title.is-centered::after { margin-left: auto; margin-right: auto; }
.section-dark .section-title::after, .premium-media-section .section-title::after,
.contact-section .section-title::after, .story-hero .section-title::after { filter: invert(1) hue-rotate(180deg); }
.hero-inquiry .section-title::after, .inquiry-card .section-title::after, .modal .section-title::after { display: none; }
.js-v3 .section-title::after { clip-path: inset(0 100% 0 0); transition: clip-path 1.1s var(--ms-ease) .15s; }
.js-v3 .section-title.is-drawn::after { clip-path: inset(0 0 0 0); }

/* ---------- surfaces ---------- */
.warm-section, .personal-work, .section.material-library { background: var(--ms-g100) !important; }
.section-white { background: var(--ms-white); }

/* replace the red vein and grid decor with the slate cleavage pattern */
.decorated-section::before, .red-vein-bg::before, .red-grid-bg::before { animation: none !important; }
.decor-vein::before, .decor-grid::before {
  inset: 0 !important; width: auto !important; height: auto !important; top: 0 !important; right: 0 !important;
  background: url("assets/decor/cleavage.svg") repeat 0 0 / 320px 160px !important;
  opacity: .05 !important; transform: none !important;
  mask-image: linear-gradient(90deg, transparent 0%, #000 55%, #000 100%) !important;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 55%, #000 100%) !important;
}
.decor-grid-dark::before, .section-dark.decorated-section::before {
  inset: 0 !important; background: url("assets/decor/cleavage.svg") repeat 0 0 / 320px 160px !important;
  filter: invert(1); opacity: .06 !important;
}
.red-vein-bg, .red-grid-bg { background-image: none !important; }
.red-vein-bg { position: relative; }
.red-vein-bg::after, .red-grid-bg::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: url("assets/decor/cleavage.svg") repeat 0 0 / 320px 160px; opacity: .045;
}

/* ---------- shape: 4px everywhere ---------- */
.btn, .card, [class*="-card"], [class*="card-"], .price-tile, .app-tile, .family-tile, .gallery-item, .stat,
.sample-preview, .feature-item, .option-card, .inquiry-card, .modal-content, input, select, textarea,
.ms-upload, .ms-status, .ms-float a, .ms-float button, .topic-nav a, .legal-notice, .detail-note,
.ref-card-img, .service-card img, .material-card img, figure, .rv-card, .accordion-item, .faq-item, iframe, video {
  border-radius: var(--ms-radius) !important;
}
img { border-radius: inherit; }

/* ---------- buttons ---------- */
.btn { min-height: 48px; font-family: 'Montserrat', sans-serif; font-weight: 700; letter-spacing: .01em; }
.btn-primary { background: var(--ms-red) !important; border-color: var(--ms-red) !important; color: #fff !important; }
.btn-primary:hover, .btn-primary:focus-visible { background: var(--ms-red-deep) !important; border-color: var(--ms-red-deep) !important; }
.btn-outline { border: 2px solid currentColor; }
:focus-visible { outline: 3px solid rgba(233,1,23,.5); outline-offset: 3px; }

/* ---------- cards ---------- */
.material-card, .stone-card, .ref-card, .service-card, .style-card, .consult-card, .labor-card, .price-tile, .rv-card {
  border: 1px solid var(--ms-g200); box-shadow: var(--ms-shadow);
  transition: transform .5s var(--ms-ease), box-shadow .5s var(--ms-ease);
}
.material-card:hover, .stone-card:hover, .ref-card:hover, .service-card:hover, .style-card:hover,
.consult-card:hover, .labor-card:hover, .price-tile:hover, .rv-card:hover { transform: translateY(-4px); box-shadow: var(--ms-shadow-hover); }

/* ---------- off-palette fixes (cream, amber, orange, gold) ---------- */
.acc-no, .tile-no { color: var(--ms-red) !important; }
.rv-score .review-stars, .rv-head .review-stars, .review-stars { color: var(--ms-red) !important; }
.rv-card.tone-gold, .rv-card.tone-sand, .rv-card.tone-sage, .rv-card.tone-copper { background: var(--ms-white) !important; }
.rv-card.tone-slate { background: var(--ms-black) !important; color: #fff; }
.rv-card.tone-slate * { color: inherit; }
.rv-card.tone-gold { border-top: 3px solid var(--ms-red) !important; }
.rv-card.tone-sand { border-top: 3px solid var(--ms-black) !important; }
.rv-card.tone-sage { border-top: 3px solid var(--ms-g500) !important; }
.rv-card.tone-copper { background: var(--ms-g100) !important; }
.map-land { fill: var(--ms-g100) !important; stroke: var(--ms-g300) !important; }
.ms-upload { background: var(--ms-g100) !important; border-color: var(--ms-g300) !important; }
.ms-upload i, .ms-progress .is-current { color: var(--ms-red) !important; border-color: var(--ms-red) !important; }
.ms-status { background: var(--ms-g100) !important; color: var(--ms-black) !important; border-left: 3px solid var(--ms-red); }
.new-page .topic-nav a { background: var(--ms-g100) !important; color: var(--ms-black) !important; }
.new-page .topic-nav a:hover { background: var(--ms-black) !important; color: #fff !important; }
.new-page .direct-contact a, .new-page .legal-notice i { color: var(--ms-red-ink) !important; }
.new-page .legal-notice, .new-page .detail-note:target, .new-page .empty-results { background: var(--ms-g100) !important; }
.new-page .material-card > img, .new-page .view-main { background: var(--ms-g100) !important; }
/* icons on red or dark backgrounds are white (Matt: red icons lacked contrast) */
.section-dark i, .premium-media-section i, .contact-section i, .footer i, .btn-primary i { color: #fff; }

/* ---------- motion ---------- */
.js-v3 .v3-reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ms-ease) var(--d,0ms), transform .8s var(--ms-ease) var(--d,0ms); }
.js-v3 .v3-reveal.is-in { opacity: 1; transform: none; }
.v3-img-zoom { overflow: hidden; }
.v3-img-zoom img { transition: transform 1.2s var(--ms-ease), filter 1.2s var(--ms-ease); }
.v3-img-zoom:hover img { transform: scale(1.04); filter: brightness(1.05); }
.header { transition: box-shadow .3s var(--ms-ease), background-color .3s var(--ms-ease); }
.header.is-scrolled { box-shadow: 0 1px 0 var(--ms-g200), 0 8px 24px rgba(0,0,0,.06); }

/* corner strata accent behind feature images */
.v3-corner { position: relative; }
.v3-corner::before {
  content: ''; position: absolute; width: 132px; height: 16px; left: -18px; bottom: -26px; z-index: 0; pointer-events: none;
  background: url("assets/decor/strata.svg") no-repeat center / contain; opacity: .9;
}

@media (prefers-reduced-motion: reduce) {
  .js-v3 .v3-reveal { opacity: 1; transform: none; transition: none; }
  .js-v3 .section-title::after { clip-path: none; transition: none; }
  .material-card, .stone-card, .ref-card, .service-card, .price-tile, .rv-card, .v3-img-zoom img { transition: none; }
}

/* dark photo bands: drop the pink radial glow, keep a neutral vignette */
.premium-media-section::after { background: radial-gradient(circle at 80% 18%, rgba(255,255,255,.06), transparent 40%) !important; }
.premium-media-section .section-subtitle { color: #fff !important; }

/* ---------- Matt's v2 notes ---------- */
/* same side margins for navbar and sections */
html:root { --max-w: 1240px; }
.nav-container { max-width: var(--max-w) !important; padding-left: var(--section-px) !important; padding-right: var(--section-px) !important; }
/* FAQ: flat, no heavy shadows */
details.faq-item, .faq-item, .accordion-item { box-shadow: none !important; border: 1px solid var(--ms-g200) !important; background: #fff; transition: border-color .3s var(--ms-ease); }
details.faq-item[open], .faq-item.is-open { border-color: var(--ms-g300) !important; box-shadow: inset 3px 0 0 var(--ms-red) !important; }
details.faq-item:hover { border-color: var(--ms-g300) !important; }
/* subpage hero H1: smaller, at least two words per line */
.hero-editorial h1, .story-hero h1, .hero-ed-text h1 { font-size: clamp(2rem, 3.1vw, 2.6rem) !important; line-height: 1.15; max-width: 22ch; }
/* Google review cards: real logo, neutral cards, animated */
.rv-head .google-source img { border-radius: 0 !important; background: none; }
.rv-card { border-radius: var(--ms-radius) !important; background: #fff !important; color: var(--ms-black) !important; border: 1px solid var(--ms-g200) !important; border-top: 3px solid var(--ms-black) !important; }
.rv-card:nth-child(odd) { border-top-color: var(--ms-red) !important; }
.rv-card.tone-slate * { color: inherit; }
.rv-avatar { background: var(--ms-black) !important; }
.rv-card .review-stars { background: linear-gradient(90deg, var(--ms-red) 40%, #ff6a76 50%, var(--ms-red) 60%) 0 0 / 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent !important; animation: ms-shimmer 4s var(--ms-ease) infinite; }
@keyframes ms-shimmer { 0% { background-position: 100% 0; } 60%, 100% { background-position: 0 0; } }
.rv-card:hover { transform: translateY(-5px) !important; }
@media (prefers-reduced-motion: reduce) { .rv-card .review-stars { animation: none; } }

/* ---------- átvilágítható: day / backlit comparison ---------- */
.lighttest .page-intro { display: grid; justify-items: start; gap: 6px; }
.lt-toggle { margin-top: 10px; }
.lt-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; margin-top: 36px; }
.lt-card { position: relative; margin: 0; aspect-ratio: 3 / 4; overflow: hidden; background: var(--ms-black); border-radius: var(--ms-radius); cursor: pointer; }
.lt-card picture, .lt-card img { position: absolute; inset: 0; width: 100%; height: 100%; }
.lt-card img { object-fit: cover; transform: scale(1.72); transform-origin: 50% 51%; transition: opacity .9s var(--ms-ease), transform 1.4s var(--ms-ease); }
.lt-card .lt-night img { opacity: 0; }
.lt-card:hover .lt-night img, .lt-card:focus-visible .lt-night img, .lighttest.is-lit .lt-night img { opacity: 1; transform: scale(1.78); }
.lt-card figcaption { position: absolute; left: 12px; bottom: 12px; padding: 6px 10px; background: rgba(17,17,17,.82); color: #fff; font: 700 .78rem 'Montserrat', sans-serif; letter-spacing: .04em; border-radius: var(--ms-radius); }
@media (max-width: 900px) { .lt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .lt-card img { transition: none; } }

/* client #4: no needless capitals in marquees */
.marquee-inner span { text-transform: none; letter-spacing: .02em; }