/* ==========================================================================
   Brand: montalvoglass.pro — Montalvo Glass, Brooklyn glazing contractor
   Theme home-trade · accent red · mode light · display Plus Jakarta Sans
   Art direction: warm stone shell, signal-red brand marks, slim mullions.
   All colour comes from Site DNA tokens (--dna-*), never hardcoded hexes
   except neutral fallbacks used before site-dna.js runs.
   Authored class namespace: .mon10-*
   ========================================================================== */

:root {
  --mon-ink: var(--dna-ink, #26170f);
  --mon-soft: var(--dna-ink-soft, #6e5b50);
  --mon-line: var(--dna-line, #e4dcd7);
  --mon-bg: var(--dna-bg, #fbf9f8);
  --mon-panel: var(--dna-surface, #ffffff);
  --mon-panel-2: var(--dna-surface-2, #f6f2f0);
  --mon-accent: var(--dna-accent, #e31916);
  --mon-accent-2: var(--dna-accent-2, #e6553a);
  --mon-accent-ink: var(--dna-accent-ink, #ffffff);
  --mon-shadow: 40, 21, 13;
  --mon-shell: 1200px;
  --mon-bar-h: 78px;
  --mon-ease: cubic-bezier(.22, .61, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--mon-bg);
  color: var(--mon-ink);
  font-size: 17px;
  line-height: 1.62;
  overflow-x: hidden;
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* height:auto lets aspect-ratio win over the width/height HTML attributes */
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { line-height: 1.12; margin: 0; letter-spacing: -0.018em; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; list-style: none; }

::selection { background: var(--mon-accent); color: var(--mon-accent-ink); }

:where(a, button, input, textarea, [tabindex]):focus-visible {
  outline: 2.5px solid var(--mon-accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Skip link — visually hidden, not thrown off-canvas with a negative offset */
.mon10-skip {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.mon10-skip:focus {
  position: fixed;
  top: 12px; left: 12px;
  z-index: 120;
  width: auto; height: auto;
  margin: 0; padding: 12px 20px;
  clip: auto; clip-path: none;
  background: var(--mon-ink);
  color: #fff;
  border-radius: var(--radius, 12px);
  font-weight: 700;
}

.mon10-shell {
  width: 100%;
  max-width: var(--mon-shell);
  margin: 0 auto;
  padding: 0 26px;
}

/* ============================ Header: split bar =========================== */

.mon10-bar {
  position: sticky;
  top: 0;
  z-index: 60;
  background: color-mix(in srgb, var(--mon-bg) 88%, transparent);
  backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--mon-ease), background .3s var(--mon-ease), box-shadow .3s var(--mon-ease);
}
.mon10-bar.is-stuck {
  border-bottom-color: var(--mon-line);
  box-shadow: 0 10px 30px -22px rgba(var(--mon-shadow), .5);
}
.mon10-bar-in {
  max-width: var(--mon-shell);
  margin: 0 auto;
  padding: 0 26px;
  min-height: var(--mon-bar-h);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 20px;
}

.mon10-mark { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; }
.mon10-mark img { width: 34px; height: 34px; }
.mon10-mark-txt { display: grid; line-height: 1.15; }
.mon10-mark-txt b { font-size: 1.04rem; letter-spacing: -0.02em; }
.mon10-mark-txt i {
  font-style: normal;
  font-size: .6rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--mon-soft);
}

/* nav links centered — the split header signature */
.mon10-links {
  justify-self: center;
  display: flex;
  gap: 30px;
}
.mon10-links a {
  position: relative;
  padding: 6px 0;
  font-size: .93rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--mon-soft);
  transition: color .2s var(--mon-ease);
}
.mon10-links a::after {
  content: '';
  position: absolute;
  left: 0; bottom: -2px;
  width: 0; height: 2px;
  background: var(--mon-accent);
  border-radius: 2px;
  transition: width .34s var(--mon-ease);
}
.mon10-links a:hover { color: var(--mon-ink); }
.mon10-links a:hover::after { width: 100%; }
.mon10-links a[aria-current="page"] { color: var(--mon-ink); }
.mon10-links a[aria-current="page"]::after { width: 100%; }

.mon10-bar-end { display: flex; align-items: center; gap: 14px; }
.mon10-tel {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: .9rem;
  font-weight: 700;
  text-decoration: none;
  color: var(--mon-ink);
  white-space: nowrap;
}
.mon10-tel .dna-ic { color: var(--mon-accent); width: 1.15em; height: 1.15em; }
.mon10-tel:hover { color: var(--mon-accent); }

/* Burger — only exists on small screens (never a zero-size ghost on desktop) */
.mon10-burger { display: none; }

/* ================================ Buttons ================================= */

.mon10-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 12px 22px;
  border: 1.6px solid transparent;
  border-radius: var(--btn-radius, 12px);
  font: inherit;
  font-size: .92rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: transform .22s var(--mon-ease), box-shadow .28s var(--mon-ease),
              background .22s var(--mon-ease), color .22s var(--mon-ease), border-color .22s var(--mon-ease);
}
.mon10-btn--lg { padding: 15px 28px; font-size: .98rem; }
.mon10-btn--fill {
  background: var(--mon-accent);
  color: var(--mon-accent-ink);
  box-shadow: 0 12px 26px -16px color-mix(in srgb, var(--mon-accent) 85%, transparent);
}
.mon10-btn--fill:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--mon-accent) 18%, transparent),
              0 18px 34px -18px color-mix(in srgb, var(--mon-accent) 90%, transparent);
}
.mon10-btn--line {
  background: transparent;
  border-color: var(--mon-line);
  color: var(--mon-ink);
}
.mon10-btn--line:hover { border-color: var(--mon-accent); color: var(--mon-accent); transform: translateY(-2px); }
.mon10-arrow { transition: transform .26s var(--mon-ease); }
.mon10-btn:hover .mon10-arrow { transform: translateX(4px); }

/* ====================== Mobile drawer (slides from right) ================= */

.mon10-scrim {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(var(--mon-shadow), .5);
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity .32s var(--mon-ease);
}
.mon10-scrim.is-open { opacity: 1; }

.mon10-drawer {
  position: fixed;
  top: 0; right: 0;
  z-index: 90;
  width: min(360px, 86vw);
  height: 100%;
  padding: 22px 24px calc(22px + env(safe-area-inset-bottom));
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  gap: 16px;
  background: var(--mon-panel);
  border-left: 1px solid var(--mon-line);
  box-shadow: -30px 0 60px -30px rgba(var(--mon-shadow), .45);
  transform: translateX(101%);
  visibility: hidden;
  transition: transform .38s var(--mon-ease), visibility .38s step-end;
}
.mon10-drawer.is-open {
  transform: translateX(0);
  visibility: visible;
  transition: transform .38s var(--mon-ease), visibility 0s;
}

.mon10-drawer-top { display: flex; align-items: center; justify-content: space-between; }
.mon10-drawer-lbl {
  font-size: .62rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--mon-soft);
}
.mon10-close {
  width: 42px; height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid var(--mon-line);
  border-radius: 50%;
  background: transparent;
  color: var(--mon-ink);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}
.mon10-close:hover { border-color: var(--mon-accent); color: var(--mon-accent); }

.mon10-drawer-links { display: grid; align-content: start; gap: 4px; margin-top: 8px; }
.mon10-drawer-links a {
  padding: 14px 4px;
  border-bottom: 1px solid var(--mon-line);
  font-size: 1.42rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-decoration: none;
  opacity: 0;
  transform: translateX(14px);
}
.mon10-drawer.is-open .mon10-drawer-links a {
  animation: mon10DrawerIn .42s var(--mon-ease) forwards;
}
.mon10-drawer.is-open .mon10-drawer-links a:nth-child(2) { animation-delay: .05s; }
.mon10-drawer.is-open .mon10-drawer-links a:nth-child(3) { animation-delay: .1s; }
.mon10-drawer.is-open .mon10-drawer-links a:nth-child(4) { animation-delay: .15s; }
@keyframes mon10DrawerIn { to { opacity: 1; transform: translateX(0); } }
.mon10-drawer-links a[aria-current="page"] {
  color: var(--mon-accent);
  border-bottom-color: var(--mon-accent);
}
.mon10-drawer-cta { width: 100%; }

/* phone pinned to the bottom of the drawer */
.mon10-drawer-tel {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 16px;
  border-radius: var(--radius, 12px);
  background: var(--mon-panel-2);
  text-decoration: none;
}
.mon10-drawer-tel .dna-ic { width: 1.5em; height: 1.5em; color: var(--mon-accent); }
.mon10-drawer-tel span { display: grid; }
.mon10-drawer-tel b { font-size: 1.02rem; }
.mon10-drawer-tel i { font-style: normal; font-size: .76rem; color: var(--mon-soft); }

/* ================================== Hero ================================= */

.mon10-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(46px, 6vw, 86px) 0 clamp(58px, 7vw, 104px);
  background:
    radial-gradient(115% 82% at 88% -8%, color-mix(in srgb, var(--mon-accent) 15%, transparent) 0%, transparent 62%),
    linear-gradient(178deg, var(--mon-panel-2) 0%, var(--mon-bg) 74%);
}
.mon10-hero-bg {
  position: absolute;
  inset: -12% -6% auto -6%;
  height: 118%;
  z-index: -1;
  opacity: .12;
  -webkit-mask-image: linear-gradient(196deg, #000 0%, transparent 66%);
  mask-image: linear-gradient(196deg, #000 0%, transparent 66%);
}
.mon10-hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.2) blur(3px);
}

.mon10-hero-in {
  max-width: var(--mon-shell);
  margin: 0 auto;
  padding: 0 26px;
  display: grid;
  grid-template-columns: 1.02fr 1fr;
  gap: clamp(30px, 4.4vw, 62px);
  align-items: center;
}

/* mirror block: visual panel left, copy right */
.mon10-hero-panel { position: relative; order: 0; }
.mon10-hero-shot {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg, 22px);
  border: 1px solid var(--mon-line);
  box-shadow: 0 44px 70px -46px rgba(var(--mon-shadow), .62);
  background: var(--mon-panel-2);
}
.mon10-hero-shot::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(215deg, color-mix(in srgb, var(--mon-accent) 22%, transparent) 0%, transparent 46%);
  pointer-events: none;
}
.mon10-hero-shot img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transform: scale(1.04);
  animation: mon10Pan 22s ease-in-out infinite alternate;
}
@keyframes mon10Pan {
  from { transform: scale(1.03) translate3d(0, 0, 0); }
  to   { transform: scale(1.11) translate3d(-1.6%, -1.4%, 0); }
}

.mon10-hero-chip {
  position: absolute;
  right: clamp(-18px, -1.4vw, 0px);
  bottom: -26px;
  width: min(292px, 78%);
  margin: 0;
  padding: 17px 19px;
  background: var(--mon-panel);
  border: 1px solid var(--mon-line);
  border-radius: var(--radius, 14px);
  box-shadow: 0 26px 46px -28px rgba(var(--mon-shadow), .48);
}
.mon10-stars { display: flex; gap: 2px; margin-bottom: 8px; }
.mon10-stars .dna-ic { width: 1em; height: 1em; color: var(--mon-accent); }
.mon10-stars .dna-ic svg { fill: currentColor; stroke-width: 1; }
.mon10-hero-chip blockquote {
  margin: 0 0 9px;
  font-size: .86rem;
  line-height: 1.5;
}
.mon10-hero-chip figcaption {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--mon-soft);
}

.mon10-kick {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 16px;
  font-size: .69rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--mon-accent);
}
.mon10-kick .dna-ic { width: 1.25em; height: 1.25em; }

.mon10-hero-copy h1 {
  font-size: clamp(2.35rem, 5.4vw, 3.95rem);
  letter-spacing: -0.035em;
}
.mon10-lede {
  color: var(--mon-soft);
  font-size: 1.06rem;
  line-height: 1.66;
}
.mon10-hero-copy .mon10-lede { margin: 20px 0 28px; max-width: 46ch; }

.mon10-hero-acts { display: flex; flex-wrap: wrap; gap: 12px; }

.mon10-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 34px;
  margin: 34px 0 0;
  padding-top: 24px;
  border-top: 1px solid var(--mon-line);
}
.mon10-facts div { display: grid; gap: 2px; }
.mon10-facts dt {
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--mon-soft);
}
.mon10-facts dd {
  margin: 0;
  font-size: 1.34rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* Hero entrance — staggered */
.mon10-hero-copy > * { animation: mon10Enter .8s var(--mon-ease) both; }
.mon10-hero-copy > :nth-child(1) { animation-delay: .05s; }
.mon10-hero-copy > :nth-child(2) { animation-delay: .13s; }
.mon10-hero-copy > :nth-child(3) { animation-delay: .21s; }
.mon10-hero-copy > :nth-child(4) { animation-delay: .29s; }
.mon10-hero-copy > :nth-child(5) { animation-delay: .37s; }
.mon10-hero-panel { animation: mon10PanelIn 1s var(--mon-ease) both; }
@keyframes mon10Enter { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes mon10PanelIn { from { opacity: 0; transform: translateX(-22px) scale(.985); } to { opacity: 1; transform: none; } }

/* ============================== Sections ================================= */

.mon10-sec { padding: clamp(58px, 7.2vw, 104px) 0; }
.mon10-sec--tint {
  background: var(--mon-panel-2);
  border-block: 1px solid var(--mon-line);
}
.mon10-sec--flush { padding-bottom: clamp(66px, 8vw, 116px); }

.mon10-sec-head { max-width: 44rem; margin-bottom: clamp(32px, 4vw, 54px); }
.mon10-sec-head--wide { max-width: 52rem; }
.mon10-h2 {
  font-size: clamp(1.75rem, 3.5vw, 2.7rem);
  letter-spacing: -0.03em;
}
.mon10-sec-head .mon10-lede { margin: 16px 0 0; }
.mon10-sec-foot { margin-top: 38px; }

.mon10-ticks { display: grid; gap: 9px; }
.mon10-ticks li {
  display: flex;
  gap: 10px;
  font-size: .93rem;
  color: var(--mon-soft);
}
.mon10-ticks .dna-ic { width: 1.15em; height: 1.15em; margin-top: .28em; color: var(--mon-accent); }

/* Scroll reveal: fade-up out of a slight blur */
.mon10-rise {
  opacity: 0;
  transform: translateY(22px);
  filter: blur(6px);
  transition: opacity .72s var(--mon-ease), transform .72s var(--mon-ease), filter .72s var(--mon-ease);
}
.mon10-rise.is-in { opacity: 1; transform: none; filter: none; }
/* if IntersectionObserver never runs, content must still be visible */
.no-io .mon10-rise { opacity: 1; transform: none; filter: none; }

/* ==================== Services: numbered list (home) ===================== */

.mon10-numlist { display: grid; gap: 0; counter-reset: mon10-svc; }
.mon10-numrow {
  display: grid;
  grid-template-columns: minmax(96px, 132px) 1fr;
  gap: clamp(18px, 3vw, 46px);
  padding: clamp(26px, 3.4vw, 40px) 0;
  border-top: 1px solid var(--mon-line);
}
.mon10-numrow:last-child { border-bottom: 1px solid var(--mon-line); }
.mon10-numeral {
  font-size: clamp(2.5rem, 5.6vw, 4.1rem);
  font-weight: 800;
  line-height: .9;
  letter-spacing: -0.05em;
  color: transparent;
  -webkit-text-stroke: 1.6px color-mix(in srgb, var(--mon-accent) 62%, transparent);
  transition: color .3s var(--mon-ease), -webkit-text-stroke-color .3s var(--mon-ease);
  font-variant-numeric: tabular-nums;
}
.mon10-numrow:hover .mon10-numeral {
  color: color-mix(in srgb, var(--mon-accent) 16%, transparent);
  -webkit-text-stroke-color: var(--mon-accent);
}
.mon10-numbody h3 { font-size: 1.34rem; margin-bottom: 10px; }
.mon10-numbody p { color: var(--mon-soft); max-width: 62ch; }
.mon10-numbody .mon10-ticks { margin-top: 14px; }

/* ========================= Glass types: spec cards ======================= */

/* fixed track counts, never auto-fit: four cards must not drop to 3 + orphan */
.mon10-specs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.mon10-spec {
  padding: 26px 24px 24px;
  background: var(--mon-panel);
  border: 1px solid var(--mon-line);
  border-radius: var(--radius-lg, 20px);
  transition: transform .3s var(--mon-ease), border-color .3s var(--mon-ease), box-shadow .3s var(--mon-ease);
}
.mon10-spec:hover {
  transform: translateY(-5px);
  border-color: color-mix(in srgb, var(--mon-accent) 55%, var(--mon-line));
  box-shadow: 0 26px 44px -32px rgba(var(--mon-shadow), .5);
}
.mon10-spec .dna-ic { margin-bottom: 16px; }
.mon10-spec h3 { font-size: 1.1rem; margin-bottom: 8px; }
.mon10-spec p { margin: 0; font-size: .92rem; color: var(--mon-soft); }

/* ========================= Trust: feature tiles ========================== */

.mon10-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--mon-line);
  border: 1px solid var(--mon-line);
  border-radius: var(--radius-lg, 20px);
  overflow: hidden;
}
/* four-tile pages get an even 2x2 so no cell is left showing the hairline grid */
.mon10-tiles--pair { grid-template-columns: repeat(2, 1fr); }
.mon10-tile {
  position: relative;
  padding: 30px 28px;
  background: var(--mon-panel);
  transition: background .3s var(--mon-ease);
}
.mon10-tile::before {
  content: '';
  position: absolute;
  left: 0; top: 0;
  width: 3px; height: 0;
  background: var(--mon-accent);
  transition: height .34s var(--mon-ease);
}
.mon10-tile:hover { background: var(--mon-panel-2); }
.mon10-tile:hover::before { height: 100%; }
.mon10-tile .dna-ic { width: 1.7em; height: 1.7em; margin-bottom: 14px; }
.mon10-tile b { display: block; font-size: 1.04rem; margin-bottom: 7px; letter-spacing: -0.015em; }
.mon10-tile p { margin: 0; font-size: .91rem; color: var(--mon-soft); }

/* =========================== Process: timeline =========================== */

.mon10-line {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
  padding-top: 34px;
}
.mon10-line::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 7px;
  height: 2px;
  background: linear-gradient(90deg, var(--mon-accent) 0%, color-mix(in srgb, var(--mon-accent) 22%, transparent) 100%);
  transform-origin: left center;
  transform: scaleX(var(--mon10-line-fill, 1));
  transition: transform 1.1s var(--mon-ease);
}
.mon10-step { position: relative; }
.mon10-step-dot {
  position: absolute;
  top: -34px; left: 0;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--mon-bg);
  border: 3px solid var(--mon-accent);
}
.mon10-step b { display: block; font-size: 1.06rem; margin-bottom: 8px; letter-spacing: -0.015em; }
.mon10-step p { margin: 0; font-size: .92rem; color: var(--mon-soft); }

/* ============================== Gallery ================================= */

.mon10-frames {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: clamp(210px, 22vw, 300px);
  gap: 16px;
}
.mon10-frame {
  position: relative;
  margin: 0;
  grid-column: span 1;
  overflow: hidden;
  border-radius: var(--radius-lg, 20px);
  border: 1px solid var(--mon-line);
  background: var(--mon-panel-2);
}
.mon10-frame--wide { grid-column: span 2; }
.mon10-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translate3d(0, var(--mon10-drift, 0px), 0) scale(1.03);
  transition: transform .8s var(--mon-ease), filter .5s var(--mon-ease);
  will-change: transform;
}
.mon10-frame:hover img { transform: translate3d(0, var(--mon10-drift, 0px), 0) scale(1.08); }
.mon10-frame figcaption {
  position: absolute;
  left: 14px; bottom: 14px;
  padding: 7px 13px;
  border-radius: 100px;
  background: color-mix(in srgb, var(--mon-panel) 88%, transparent);
  backdrop-filter: blur(8px);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .02em;
}

/* ========================== About: quote-led ============================ */

.mon10-about {
  display: grid;
  grid-template-columns: .92fr 1fr;
  gap: clamp(28px, 4vw, 62px);
  align-items: start;
}
.mon10-quote-lead {
  position: relative;
  padding: clamp(30px, 3.6vw, 44px) clamp(26px, 3vw, 38px);
  background: var(--mon-panel);
  border: 1px solid var(--mon-line);
  border-radius: var(--radius-lg, 22px);
  box-shadow: 0 34px 56px -42px rgba(var(--mon-shadow), .5);
}
.mon10-quote-lead::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 4px;
  border-radius: 0 0 var(--radius-lg, 22px) var(--radius-lg, 22px);
  background: linear-gradient(90deg, var(--mon-accent), var(--mon-accent-2));
}
.mon10-quote-mark {
  display: block;
  font-size: 4.4rem;
  line-height: .6;
  color: color-mix(in srgb, var(--mon-accent) 45%, transparent);
}
.mon10-quote-lead blockquote {
  margin: 16px 0 22px;
  font-size: clamp(1.16rem, 2.1vw, 1.44rem);
  line-height: 1.44;
  letter-spacing: -0.02em;
}
.mon10-quote-by { display: grid; }
.mon10-quote-by b { font-size: .98rem; }
.mon10-quote-by i { font-style: normal; font-size: .82rem; color: var(--mon-soft); }
.mon10-about-body p { color: var(--mon-soft); }
.mon10-about-body .mon10-h2 { margin-bottom: 18px; }
.mon10-about-body .mon10-ticks { margin: 22px 0 26px; }

/* ============================= Comparison =============================== */

.mon10-vs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.mon10-vs-col {
  padding: 30px 28px;
  border: 1px solid var(--mon-line);
  border-radius: var(--radius-lg, 20px);
  background: var(--mon-panel);
}
.mon10-vs-col h3 {
  padding-bottom: 16px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--mon-line);
  font-size: 1.1rem;
}
.mon10-vs-col ul { display: grid; gap: 13px; }
.mon10-vs-col li {
  display: flex;
  gap: 11px;
  font-size: .95rem;
  color: var(--mon-soft);
}
.mon10-vs-col .dna-ic { width: 1.2em; height: 1.2em; margin-top: .25em; }
.mon10-vs-x {
  width: 1.2em;
  flex-shrink: 0;
  text-align: center;
  font-weight: 800;
  color: color-mix(in srgb, var(--mon-ink) 40%, transparent);
}
.mon10-vs-col--ours {
  background: var(--mon-panel);
  border-color: color-mix(in srgb, var(--mon-accent) 42%, var(--mon-line));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--mon-accent) 22%, transparent) inset;
}
.mon10-vs-col--ours li { color: var(--mon-ink); }

/* ============================== Boxed CTA =============================== */

.mon10-boxcta {
  display: grid;
  grid-template-columns: 1.35fr .8fr;
  gap: clamp(24px, 3.6vw, 52px);
  align-items: center;
  padding: clamp(30px, 4vw, 52px);
  background: var(--mon-panel);
  border: 1px solid color-mix(in srgb, var(--mon-accent) 32%, var(--mon-line));
  border-radius: var(--radius-lg, 24px);
  box-shadow: 0 40px 70px -48px rgba(var(--mon-shadow), .55);
  background-image:
    radial-gradient(120% 130% at 100% 0%, color-mix(in srgb, var(--mon-accent) 12%, transparent) 0%, transparent 58%);
}
.mon10-boxcta .mon10-h2 { max-width: 30ch; }
.mon10-boxcta .mon10-lede { margin: 16px 0 0; }
.mon10-boxcta-side { display: grid; justify-items: start; gap: 12px; }
.mon10-boxcta-tel {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 1.16rem;
  font-weight: 700;
  text-decoration: none;
}
.mon10-boxcta-tel .dna-ic { color: var(--mon-accent); }
.mon10-boxcta-hrs { font-size: .82rem; color: var(--mon-soft); }

/* ================================ Footer ================================ */

.mon10-foot {
  background: var(--mon-panel-2);
  border-top: 1px solid var(--mon-line);
  padding-top: clamp(44px, 5vw, 66px);
}
.mon10-foot-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1.3fr;
  gap: clamp(26px, 4vw, 58px);
  padding-bottom: clamp(34px, 4vw, 52px);
}
.mon10-foot-brand p { margin: 16px 0 0; font-size: .9rem; color: var(--mon-soft); max-width: 38ch; }
.mon10-foot h4 {
  margin-bottom: 16px;
  font-size: .69rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--mon-soft);
}
.mon10-foot-links { display: grid; gap: 10px; }
.mon10-foot-links a {
  font-size: .93rem;
  text-decoration: none;
  color: var(--mon-ink);
}
.mon10-foot-links a:hover { color: var(--mon-accent); }
.mon10-foot-contact { display: grid; gap: 13px; }
.mon10-foot-contact li {
  display: flex;
  gap: 11px;
  font-size: .9rem;
  color: var(--mon-soft);
}
.mon10-foot-contact .dna-ic { width: 1.2em; height: 1.2em; margin-top: .2em; }
.mon10-foot-contact a { text-decoration: none; }
.mon10-foot-contact a:hover { color: var(--mon-accent); }
.mon10-foot-rule { border-top: 1px solid var(--mon-line); padding: 20px 0; }
.mon10-foot-rule-in {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  justify-content: space-between;
  font-size: .8rem;
  color: var(--mon-soft);
}

/* ===================== Services page: DNA tab catalog =================== */

.mon10-svc-page [data-services-catalog] { display: block; }
.svc-tabs { gap: 10px; margin-bottom: 30px; }
.svc-tab {
  padding: 11px 18px;
  border: 1.6px solid var(--mon-line);
  border-radius: var(--btn-radius, 12px);
  background: var(--mon-panel);
  color: var(--mon-soft);
  font-family: inherit;
  font-size: .88rem;
  font-weight: 700;
  cursor: pointer;
}
.svc-tab:hover { border-color: var(--mon-accent); color: var(--mon-accent); }
.svc-tab.active {
  background: var(--mon-accent);
  border-color: var(--mon-accent);
  color: var(--mon-accent-ink);
}

.service-detail {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(24px, 3.4vw, 48px);
  align-items: center;
  padding: clamp(26px, 3.4vw, 40px);
  background: var(--mon-panel);
  border: 1px solid var(--mon-line);
  border-radius: var(--radius-lg, 22px);
}
.service-detail h3 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); margin-bottom: 14px; }
.service-detail p { color: var(--mon-soft); }
.service-detail .mon10-ticks { margin-top: 18px; }
.mon10-svc-media {
  overflow: hidden;
  border-radius: var(--radius, 16px);
  border: 1px solid var(--mon-line);
}
.mon10-svc-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.mon10-svc-price {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 20px;
  padding: 9px 15px;
  border-radius: 100px;
  background: var(--mon-panel-2);
  font-size: .85rem;
  color: var(--mon-soft);
}
.mon10-svc-price b { font-size: 1rem; color: var(--mon-ink); }

/* Area list (services page) */
.mon10-areas {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.mon10-areas li {
  padding: 8px 15px;
  border: 1px solid var(--mon-line);
  border-radius: 100px;
  background: var(--mon-panel);
  font-size: .85rem;
  color: var(--mon-soft);
}

/* ============================= About page ============================== */

.mon10-story {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4vw, 60px);
  align-items: center;
}
.mon10-story-shot {
  overflow: hidden;
  border-radius: var(--radius-lg, 22px);
  border: 1px solid var(--mon-line);
  box-shadow: 0 40px 64px -46px rgba(var(--mon-shadow), .55);
}
.mon10-story-shot img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.mon10-story p { color: var(--mon-soft); }

.mon10-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.mon10-metric {
  padding: 26px 24px;
  background: var(--mon-panel);
  border: 1px solid var(--mon-line);
  border-radius: var(--radius-lg, 20px);
}
.mon10-metric b {
  display: block;
  font-size: 2.1rem;
  font-weight: 800;
  letter-spacing: -0.035em;
  color: var(--mon-accent);
}
.mon10-metric span { font-size: .88rem; color: var(--mon-soft); }

.mon10-prose { max-width: 68ch; }
.mon10-prose h2 { margin: 38px 0 14px; font-size: 1.42rem; }
.mon10-prose h2:first-child { margin-top: 0; }
.mon10-prose p, .mon10-prose li { color: var(--mon-soft); }
.mon10-prose ul { display: grid; gap: 10px; margin: 0 0 1em; padding-left: 20px; list-style: disc; }
.mon10-prose a { color: var(--mon-accent); }

/* ============================ Contact page ============================= */

.mon10-page-head {
  padding: clamp(38px, 5vw, 74px) 0 clamp(26px, 3vw, 40px);
  background:
    radial-gradient(110% 90% at 92% -20%, color-mix(in srgb, var(--mon-accent) 14%, transparent) 0%, transparent 60%),
    var(--mon-panel-2);
  border-bottom: 1px solid var(--mon-line);
}
.mon10-page-head h1 {
  font-size: clamp(2.05rem, 4.6vw, 3.2rem);
  letter-spacing: -0.033em;
}
.mon10-page-head .mon10-lede { margin: 16px 0 0; max-width: 54ch; }
.mon10-crumbs { margin-bottom: 14px; font-size: .8rem; color: var(--mon-soft); }
.mon10-crumbs a { text-decoration: none; }
.mon10-crumbs a:hover { color: var(--mon-accent); }

[data-contact-root] { padding: clamp(44px, 5.4vw, 78px) 0; }
[data-contact-info] { display: grid; gap: 16px; }
.mon10-info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.mon10-info {
  padding: 22px;
  background: var(--mon-panel);
  border: 1px solid var(--mon-line);
  border-radius: var(--radius, 16px);
}
.mon10-info .dna-ic { margin-bottom: 12px; }
.mon10-info b { display: block; font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--mon-soft); margin-bottom: 7px; }
.mon10-info a, .mon10-info span { font-size: .96rem; text-decoration: none; }
.mon10-info a:hover { color: var(--mon-accent); }
.mon10-hours { display: grid; gap: 8px; margin-top: 4px; }
.mon10-hours li { display: flex; justify-content: space-between; gap: 16px; font-size: .92rem; color: var(--mon-soft); }
.mon10-hours li b { font-weight: 700; color: var(--mon-ink); letter-spacing: normal; text-transform: none; font-size: .92rem; margin: 0; }

/* ==================== Booking: phone callback (timeline) ================ */

.mon10-book {
  padding: clamp(26px, 3.4vw, 40px);
  background: var(--mon-panel);
  border: 1px solid var(--mon-line);
  border-radius: var(--radius-lg, 22px);
  box-shadow: 0 40px 68px -50px rgba(var(--mon-shadow), .5);
}
.mon10-book-head { margin-bottom: 26px; }
.mon10-book-head h2 { font-size: clamp(1.4rem, 2.6vw, 1.85rem); }
.mon10-book-head p { margin: 12px 0 0; color: var(--mon-soft); font-size: .96rem; }

.mon10-rail { display: grid; gap: 0; }
.mon10-leg {
  position: relative;
  padding: 0 0 26px 40px;
  border-left: 2px solid var(--mon-line);
}
.mon10-leg:last-of-type { border-left-color: transparent; padding-bottom: 0; }
.mon10-leg::before {
  content: attr(data-leg);
  position: absolute;
  left: -15px; top: -2px;
  width: 28px; height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--mon-panel);
  border: 2px solid var(--mon-line);
  font-size: .76rem;
  font-weight: 800;
  color: var(--mon-soft);
  transition: border-color .3s var(--mon-ease), color .3s var(--mon-ease), background .3s var(--mon-ease);
}
.mon10-leg.is-done::before {
  background: var(--mon-accent);
  border-color: var(--mon-accent);
  color: var(--mon-accent-ink);
}
.mon10-leg.is-done { border-left-color: color-mix(in srgb, var(--mon-accent) 45%, transparent); }
.mon10-leg-lbl {
  display: block;
  margin: 2px 0 14px;
  font-size: .96rem;
  font-weight: 700;
}
.mon10-leg-note { display: block; margin: -8px 0 14px; font-size: .82rem; color: var(--mon-soft); }

.mon10-chips { display: flex; flex-wrap: wrap; gap: 9px; }
.mon10-chip {
  padding: 10px 16px;
  border: 1.6px solid var(--mon-line);
  border-radius: 100px;
  background: var(--mon-panel);
  color: var(--mon-soft);
  font: inherit;
  font-size: .87rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .2s var(--mon-ease), color .2s var(--mon-ease), background .2s var(--mon-ease), transform .2s var(--mon-ease);
}
.mon10-chip:hover { border-color: var(--mon-accent); color: var(--mon-accent); transform: translateY(-1px); }
.mon10-chip[aria-pressed="true"] {
  background: var(--mon-accent);
  border-color: var(--mon-accent);
  color: var(--mon-accent-ink);
}

.mon10-fields { display: grid; gap: 14px; }
.mon10-field { display: grid; gap: 7px; }
.mon10-field > span {
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mon-soft);
}
.mon10-field input,
.mon10-field textarea {
  width: 100%;
  padding: 13px 15px;
  border: 1.6px solid var(--mon-line);
  border-radius: var(--radius, 12px);
  background: var(--mon-bg);
  color: var(--mon-ink);
  font: inherit;
  font-size: .97rem;
  transition: border-color .2s var(--mon-ease), box-shadow .2s var(--mon-ease);
}
.mon10-field input:focus,
.mon10-field textarea:focus {
  outline: none;
  border-color: var(--mon-accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--mon-accent) 15%, transparent);
}
.mon10-field textarea { min-height: 84px; resize: vertical; }
/* darker than the red accent so an invalid field never reads as a brand mark */
.mon10-field.is-bad input { border-color: #8f1f14; }
.mon10-err { font-size: .8rem; color: #8f1f14; }

.mon10-book-submit { margin-top: 6px; width: 100%; }
.mon10-book-fine { margin: 14px 0 0; font-size: .8rem; color: var(--mon-soft); }

.mon10-book-ok {
  display: grid;
  gap: 10px;
  justify-items: start;
  padding: clamp(26px, 3.4vw, 38px);
  border-radius: var(--radius-lg, 20px);
  background: color-mix(in srgb, var(--mon-accent) 9%, var(--mon-panel));
  border: 1px solid color-mix(in srgb, var(--mon-accent) 38%, var(--mon-line));
  animation: mon10Enter .5s var(--mon-ease) both;
}
.mon10-book-ok .dna-ic { width: 2.4em; height: 2.4em; }
.mon10-book-ok h3 { font-size: 1.32rem; }
.mon10-book-ok p { margin: 0; color: var(--mon-soft); }
.mon10-book-ok-tel { font-size: 1.14rem; font-weight: 700; text-decoration: none; }

/* ============================ Responsive =============================== */

@media (max-width: 1080px) {
  .mon10-links { gap: 22px; }
  .mon10-frames { grid-template-columns: repeat(2, 1fr); grid-auto-rows: clamp(190px, 26vw, 260px); }
  .mon10-frame--wide { grid-column: span 2; }
  .mon10-tiles { grid-template-columns: repeat(2, 1fr); }
  .mon10-line { grid-template-columns: repeat(2, 1fr); row-gap: 42px; }
  .mon10-specs, .mon10-metrics { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 940px) {
  .mon10-links, .mon10-tel, .mon10-bar-end .mon10-btn { display: none; }
  .mon10-burger {
    display: grid;
    place-content: center;
    gap: 5px;
    width: 46px; height: 46px;
    padding: 0;
    border: 1px solid var(--mon-line);
    border-radius: 12px;
    background: var(--mon-panel);
    cursor: pointer;
  }
  .mon10-burger span {
    display: block;
    width: 20px; height: 2px;
    border-radius: 2px;
    background: var(--mon-ink);
    transition: transform .3s var(--mon-ease), opacity .2s var(--mon-ease);
  }
  .mon10-bar-in { grid-template-columns: 1fr auto; }
  .mon10-hero-in { grid-template-columns: 1fr; gap: 46px; }
  .mon10-hero-panel { order: 2; }
  .mon10-hero-copy { order: 1; }
  .mon10-hero-copy .mon10-lede { max-width: none; }
  .mon10-about, .mon10-story, .mon10-vs, .service-detail { grid-template-columns: 1fr; }
  .mon10-boxcta { grid-template-columns: 1fr; }
  .mon10-foot-grid { grid-template-columns: 1fr 1fr; }
  .mon10-foot-brand { grid-column: 1 / -1; }
}

@media (max-width: 620px) {
  body { font-size: 16.5px; }
  .mon10-shell, .mon10-bar-in, .mon10-hero-in { padding-inline: 18px; }
  .mon10-numrow { grid-template-columns: 1fr; gap: 10px; }
  .mon10-numeral { font-size: 2.4rem; }
  .mon10-frames { grid-template-columns: 1fr; grid-auto-rows: 230px; }
  .mon10-frame, .mon10-frame--wide { grid-column: span 1; }
  .mon10-tiles { grid-template-columns: 1fr; }
  .mon10-line { grid-template-columns: 1fr; row-gap: 34px; }
  .mon10-line::before { display: none; }
  .mon10-step { padding-left: 30px; }
  .mon10-step-dot { top: 4px; left: 0; }
  .mon10-facts { gap: 14px 26px; }
  .mon10-hero-chip { position: static; width: auto; margin-top: 16px; }
  .mon10-foot-grid { grid-template-columns: 1fr; }
  .mon10-tiles { border-radius: var(--radius, 16px); }
  .mon10-info-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .mon10-hero-shot img { animation: none; transform: none; }
  .mon10-hero-copy > *, .mon10-hero-panel, .mon10-book-ok { animation: none; }
  .mon10-drawer.is-open .mon10-drawer-links a { animation: none; opacity: 1; transform: none; }
  .mon10-rise { opacity: 1; transform: none; filter: none; transition: none; }
  .mon10-frame img, .mon10-btn, .mon10-spec, .mon10-tile::before, .mon10-line::before { transition: none; }
  .mon10-drawer, .mon10-scrim { transition: none; }
}