/* Ориса / Orisa: stone workshop, granite greys with a muted copper accent. Cormorant Garamond + Manrope. Focus: monument catalogue. */
:root {
	--d-bg: #f4f3f1;
	--d-surface: #ffffff;
	--d-alt: #e9e8e5;
	--d-soft: #e2e0dc;
	--d-dark: #25282b;
	--d-heading: #1c1e20;
	--d-text: #34373a;
	--d-muted: #5b5f64;
	--d-line: #dcdad6;
	--d-line-strong: #a9a6a0;
	--d-accent: #b48a62;
	--d-accent-hover: #c49a71;
	--d-accent-ink: #1c1e20;
	--d-accent-text: #7a5536;
	--d-dark-accent: #d5b48f;
	--d-dark-text: #d3d5d8;
	--d-dark-muted: #aeb2b6;
	--d-font-head: "Cormorant Garamond", Georgia, serif;
	--d-font-body: "Manrope", system-ui, sans-serif;
	--d-head-weight: 600;
	--d-head-tracking: -0.015em;
	--d-radius: 4px;
	--d-radius-lg: 12px;
	--d-radius-btn: 2px;
	--d-header-bg: rgb(244 243 241 / 0.96);
	--d-phone-bg: #25282b;
	--d-phone-ink: #ffffff;
	--d-footer: #1a1c1e;
}

body { font-size: 1rem; }
h1 { font-size: clamp(2.625rem, 1.5rem + 3.6vw, 4.5rem); line-height: 1; }
h2 { font-size: clamp(2.125rem, 1.5rem + 2.4vw, 3.375rem); line-height: 1.05; }
h3 { font-family: var(--d-font-body); font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.3; }
h1 em, h2 em { color: var(--d-accent-text); font-style: italic; font-weight: 500; }
.kicker { display: flex; align-items: center; gap: 0.75rem; letter-spacing: 0.2em; }
.kicker::before { content: ""; width: 2rem; height: 1px; background: currentColor; }
.sec__head--center .kicker { justify-content: center; }
.lead { font-size: 1.125rem; }
.btn { letter-spacing: 0.01em; }
.btn--sm { min-height: 2.5rem; padding: 0.5rem 1rem; font-size: 0.875rem; }
.sec--dark .btn--ghost, .hero .btn--ghost { border-color: rgb(255 255 255 / 0.35); color: #fff; }
.sec--dark .btn--ghost:hover, .hero .btn--ghost:hover { border-color: var(--d-dark-accent); }
.sec--dark { --d-text: var(--d-dark-text); --d-muted: var(--d-dark-muted); }

/* Header */
.logo__name { font-weight: 600; font-size: 1.75rem; letter-spacing: 0.02em; }
.logo__name small { letter-spacing: 0.18em; }
.logo__mark { color: var(--d-heading); }
.lang { align-items: center; border: 1px solid var(--d-line); border-radius: 999px; padding: 0.125rem; }
.lang a { min-width: 2.25rem; padding: 0.3rem 0.5rem; border-radius: 999px; color: var(--d-muted); text-align: center; }
.lang [aria-current] { background: var(--d-heading); color: #fff; }
@media (max-width: 60em) { .lang { display: flex; } }
@media (max-width: 30em) {
	.hdr__inner { gap: 0.5rem; }
	.logo { gap: 0.5rem; }
	.logo__mark { width: 2.125rem; height: 2.125rem; }
	.logo__name { font-size: 1.5rem; }
	.logo__name small { display: none; }
	.lang a { min-width: 2rem; padding: 0.25rem 0.375rem; }
}

/* Drawn stones: shape class + material class on .mon, sizes via --w / --h. */
.mon { --w: 30cqw; --h: 40cqw; position: relative; display: flex; flex-direction: column; align-items: center; }
.mon::after { content: ""; position: absolute; left: -18%; right: -18%; bottom: -1.6cqw; height: 3.6cqw; border-radius: 50%; background: radial-gradient(closest-side, rgb(0 0 0 / 0.28), transparent); z-index: -1; }
.stone { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4%; width: var(--w); height: var(--h); padding: 10% 12% 8%; background: var(--stone); box-shadow: inset -0.8cqw -1cqw 2.4cqw rgb(0 0 0 / 0.22), inset 0.4cqw 0.4cqw 1cqw rgb(255 255 255 / 0.12); }
.plinth { width: calc(var(--w) * 1.22); height: calc(var(--h) * 0.11); min-height: 6px; background: var(--stone); filter: brightness(0.82); border-radius: 1px; }
.s-arch .stone { border-radius: 50% 50% 2px 2px / 26% 26% 2px 2px; padding-top: 18%; }
.s-modern .stone { clip-path: polygon(0 12%, 100% 0, 100% 100%, 0 100%); padding-top: 16%; }
.s-wave .stone { border-radius: 72% 14% 2px 2px / 38% 10% 2px 2px; padding-top: 18%; }
.s-double { --w: 50cqw; --h: 36cqw; }
.s-double .stone { flex-direction: row; gap: 10%; clip-path: polygon(0 24%, 27% 24%, 35% 0, 65% 0, 73% 24%, 100% 24%, 100% 100%, 0 100%); padding: 24% 8% 6%; }
.s-double .stone > span { flex: 1; }
.s-slab { --w: 52cqw; --h: 22cqw; }
.s-slab .stone { clip-path: polygon(9% 0, 91% 0, 100% 100%, 0 100%); padding: 4% 18%; }
.s-slab .plinth { width: calc(var(--w) * 1.06); height: calc(var(--h) * 0.14); }

.eng-oval { width: 30%; aspect-ratio: 3 / 4; border: max(1px, 0.35cqw) solid var(--engrave); border-radius: 50%; background: rgb(0 0 0 / 0.07); opacity: 0.85; }
.s-double .eng-oval { flex: none; width: 20%; }
.eng-lines { display: block; width: 62%; aspect-ratio: 4 / 1; opacity: 0.85; background:
	linear-gradient(var(--engrave), var(--engrave)) 50% 0 / 100% 16% no-repeat,
	linear-gradient(var(--engrave), var(--engrave)) 50% 50% / 70% 11% no-repeat,
	linear-gradient(var(--engrave), var(--engrave)) 50% 95% / 46% 11% no-repeat; }
.s-double .eng-lines { width: auto; }
.s-slab .eng-lines { width: 70%; aspect-ratio: 5 / 1; }
.eng-name, .eng-years { color: var(--engrave); font-family: var(--d-font-head); line-height: 1; text-align: center; white-space: nowrap; }
.eng-name { font-size: 3cqw; font-weight: 600; letter-spacing: 0.14em; }
.eng-years { font-size: 2.3cqw; letter-spacing: 0.1em; opacity: 0.85; }

.m-black { --engrave: #d8c09d; --stone:
	radial-gradient(120% 70% at 22% 8%, rgb(255 255 255 / 0.16), transparent 55%),
	radial-gradient(rgb(255 255 255 / 0.11) 0.5px, transparent 1px) 0 0 / 4.3px 5.1px,
	radial-gradient(rgb(255 255 255 / 0.07) 0.7px, transparent 1.3px) 2px 3px / 7.7px 6.9px,
	radial-gradient(rgb(0 0 0 / 0.3) 1px, transparent 1.6px) 1px 1px / 11.3px 12.7px,
	linear-gradient(165deg, #43474b, #1b1d20 72%); }
.m-grey { --engrave: #2e3134; --stone:
	radial-gradient(120% 70% at 22% 8%, rgb(255 255 255 / 0.25), transparent 55%),
	radial-gradient(rgb(20 20 22 / 0.2) 0.6px, transparent 1.2px) 0 0 / 4.3px 5.1px,
	radial-gradient(rgb(255 255 255 / 0.22) 0.7px, transparent 1.3px) 2px 3px / 7.7px 6.9px,
	radial-gradient(rgb(40 40 44 / 0.2) 1px, transparent 1.7px) 4px 1px / 11.3px 12.7px,
	linear-gradient(165deg, #a9acaf, #6f7275 75%); }
.m-marble { --engrave: #6f685d; --stone:
	radial-gradient(120% 70% at 22% 8%, rgb(255 255 255 / 0.7), transparent 55%),
	linear-gradient(118deg, transparent 38%, rgb(130 128 124 / 0.28) 39%, transparent 41%),
	linear-gradient(64deg, transparent 58%, rgb(130 128 124 / 0.2) 59%, transparent 60.5%),
	linear-gradient(140deg, transparent 72%, rgb(150 146 140 / 0.22) 73%, transparent 74%),
	linear-gradient(160deg, #f8f6f2, #d6d2ca 85%); }
.m-lime { --engrave: #5f4e35; --stone:
	radial-gradient(120% 70% at 22% 8%, rgb(255 255 255 / 0.3), transparent 55%),
	radial-gradient(rgb(90 70 40 / 0.13) 0.6px, transparent 1.1px) 0 0 / 3.7px 4.3px,
	radial-gradient(rgb(255 250 240 / 0.22) 0.8px, transparent 1.5px) 1px 2px / 8.9px 9.7px,
	linear-gradient(165deg, #e1d6c1, #bba98c 80%); }

/* Hero */
.hero { position: relative; overflow: hidden; padding-block: clamp(2.5rem, 1.5rem + 3.5vw, 4.5rem) clamp(2.5rem, 1.5rem + 3vw, 4rem); background: radial-gradient(60% 80% at 85% 20%, rgb(180 138 98 / 0.16), transparent 70%), var(--d-dark); color: var(--d-dark-text); }
.hero__grid { display: grid; gap: clamp(2rem, 1rem + 3vw, 4rem); align-items: center; }
@media (min-width: 60em) { .hero__grid { grid-template-columns: 1.15fr 1fr; } }
.hero__text > * + * { margin-top: 1.5rem; }
.hero .kicker { color: var(--d-dark-accent); }
.hero h1 { color: #fff; }
.hero h1 em { display: block; color: var(--d-dark-accent); }
.hero .lead { max-width: 34rem; color: #c4c7cb; }
.hero__facts { display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; padding-top: 1.75rem; border-top: 1px solid rgb(255 255 255 / 0.14); color: #c4c7cb; font-size: 0.875rem; }
.hero__facts li { display: flex; align-items: center; gap: 0.5rem; }
.hero__facts .icon { color: var(--d-dark-accent); }

.stage { position: relative; margin: 0; }
.stage__art { position: relative; z-index: 0; aspect-ratio: 6 / 5; overflow: hidden; border: 1px solid rgb(255 255 255 / 0.08); border-radius: var(--d-radius-lg); background: radial-gradient(70% 60% at 62% 28%, #41464b, #2a2d30 70%); container-type: inline-size; }
.stage__art::before { content: ""; position: absolute; inset: auto 0 0; height: 24%; border-top: 1px solid rgb(255 255 255 / 0.07); background: linear-gradient(#303336, #222427); }
.stage .mon { position: absolute; z-index: 1; }
.stage .mon--l { --w: 21cqw; --h: 32cqw; left: 9%; bottom: 25%; }
.stage .mon--c { --w: 30cqw; --h: 46cqw; left: 35%; bottom: 19%; z-index: 2; }
.stage .mon--r { --w: 20cqw; --h: 27cqw; right: 7%; bottom: 23%; }
.stage .mon--c .stone { gap: 3cqw; }
.stage .mon--c .eng-oval { width: 34%; }
.stage__cap { position: absolute; left: 1rem; bottom: 1rem; z-index: 3; display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; max-width: calc(100% - 2rem); padding: 0.5rem 0.875rem; border: 1px solid rgb(255 255 255 / 0.12); border-radius: 999px; background: rgb(20 22 24 / 0.82); color: #e6e7e9; font-size: 0.8125rem; }
.stage__cap b { color: var(--d-dark-accent); font-weight: 700; }

/* Services strip */
.svc { border-bottom: 1px solid var(--d-line); background: var(--d-surface); }
.svc ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.svc li { display: flex; gap: 1rem; padding: 1.5rem 1.25rem; border-left: 1px solid var(--d-line); }
.svc li:first-child { border-left: 0; padding-left: 0; }
@media (max-width: 60em) { .svc li, .svc li:first-child { padding-left: 0; border-left: 0; border-top: 1px solid var(--d-line); } .svc li:first-child { border-top: 0; } }
.svc svg { width: 2.25rem; height: 2.25rem; flex-shrink: 0; color: var(--d-accent-text); }
.svc h2 { font-family: var(--d-font-body); font-size: 1rem; font-weight: 700; letter-spacing: 0; }
.svc p { color: var(--d-muted); font-size: 0.875rem; line-height: 1.5; }

/* Catalogue */
.sec__top { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1.5rem; margin-bottom: clamp(2rem, 1.5rem + 2vw, 3rem); }
.sec__top .sec__head { margin-bottom: 0; }
.pieces { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16.5rem), 1fr)); }
.piece { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--d-line); border-radius: var(--d-radius-lg); background: var(--d-surface); }
.piece[hidden] { display: none; }
.piece__art { position: relative; z-index: 0; display: flex; align-items: flex-end; justify-content: center; aspect-ratio: 4 / 3; padding-bottom: 14%; overflow: hidden; background: linear-gradient(#efeeeb 72%, #e3e1dd 72%); container-type: inline-size; }
.piece__art .mon { --w: 30cqw; --h: 42cqw; }
.piece__art .s-modern { --w: 32cqw; --h: 40cqw; }
.piece__art .s-wave { --w: 30cqw; --h: 40cqw; }
.piece__art .s-double { --w: 56cqw; --h: 36cqw; }
.piece__art .s-slab { --w: 62cqw; --h: 22cqw; }
.piece__tag { position: absolute; top: 0.75rem; left: 0.75rem; padding: 0.2rem 0.6rem; border-radius: 999px; background: rgb(255 255 255 / 0.9); color: var(--d-heading); font-size: 0.75rem; font-weight: 700; }
.piece__body { display: flex; flex-direction: column; gap: 0.25rem; flex: 1; padding: 1.25rem; }
.piece__meta { color: var(--d-muted); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.piece h3 { font-family: var(--d-font-head); font-size: 1.625rem; font-weight: 600; letter-spacing: 0; }
.piece__dim { color: var(--d-muted); font-size: 0.875rem; }
.piece__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--d-line); }
.piece__price { color: var(--d-heading); font-size: 1.0625rem; font-weight: 700; line-height: 1.2; }
.piece__price small { display: block; color: var(--d-muted); font-size: 0.75rem; font-weight: 500; }
.piece__body > .piece__foot { margin-top: auto; }
.piece__body > .piece__dim { margin-bottom: 1rem; }

.filterbar { display: grid; gap: 1rem; margin-bottom: 1.5rem; padding: 1.25rem; border: 1px solid var(--d-line); border-radius: var(--d-radius-lg); background: var(--d-surface); }
.filterbar[hidden] { display: none; }
.filter { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; }
.filter__label { min-width: 6.5rem; color: var(--d-heading); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.chip { min-height: 2.5rem; padding: 0.5rem 1rem; border-color: var(--d-line-strong); cursor: pointer; }
.chip:hover { border-color: var(--d-heading); }
.cat-status { margin-bottom: 1.25rem; color: var(--d-muted); font-size: 0.9375rem; }
.help { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem; margin-top: 2.5rem; padding: 1.75rem; border-radius: var(--d-radius-lg); background: var(--d-dark); color: var(--d-dark-text); }
.help h2 { color: #fff; font-size: 1.75rem; }
.help p { color: var(--d-dark-muted); }

/* Process */
.process { display: grid; gap: 1.5rem; counter-reset: p; }
@media (min-width: 40em) { .process { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64em) { .process { grid-template-columns: repeat(4, 1fr); } }
.process li { counter-increment: p; display: flex; flex-direction: column; gap: 0.625rem; padding-top: 1.25rem; border-top: 1px solid var(--d-line-strong); }
.process li::before { content: counter(p, decimal-leading-zero); color: var(--d-accent-text); font-family: var(--d-font-head); font-size: 3.25rem; font-weight: 500; line-height: 1; }
.process h3 { font-size: 1.125rem; }
.process p { color: var(--d-muted); font-size: 0.9375rem; }
.process small { margin-top: auto; padding-top: 0.5rem; color: var(--d-heading); font-size: 0.8125rem; font-weight: 700; }

/* Materials */
.mats { display: grid; gap: 1.25rem; }
@media (min-width: 56em) { .mats { grid-template-columns: repeat(3, 1fr); } }
.mat { overflow: hidden; border: 1px solid var(--d-line); border-radius: var(--d-radius-lg); background: var(--d-surface); }
.mat__swatch { display: flex; height: 9rem; }
.mat__swatch span { flex: 1; background: var(--stone); }
.mat__body { display: grid; gap: 0.75rem; padding: 1.5rem; }
.mat h3 { font-family: var(--d-font-head); font-size: 1.875rem; font-weight: 600; letter-spacing: 0; }
.mat p { color: var(--d-muted); font-size: 0.9375rem; }
.mat dl { display: grid; grid-template-columns: auto 1fr; gap: 0.5rem 1rem; margin-top: 0.25rem; padding-top: 1rem; border-top: 1px solid var(--d-line); font-size: 0.875rem; }
.mat dt { color: var(--d-muted); }
.mat dd { margin: 0; color: var(--d-heading); font-weight: 600; text-align: right; }

/* Gallery */
.gallery { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 40em) { .gallery { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64em) { .gallery { grid-template-columns: 1.4fr 1fr 1fr; } .gallery figure:first-child { grid-row: span 2; } }
.gallery figure { display: flex; flex-direction: column; margin: 0; overflow: hidden; border-radius: var(--d-radius-lg); background: var(--d-surface); }
.shot { position: relative; z-index: 0; display: flex; flex: 1; align-items: flex-end; justify-content: center; min-height: 13rem; padding-bottom: 12%; overflow: hidden; container-type: inline-size; }
.shot::before { content: ""; position: absolute; inset: auto 0 0; z-index: -1; height: 20%; background: rgb(0 0 0 / 0.08); }
.shot--a { background: linear-gradient(180deg, #d9dcd8, #c3c8c3); }
.shot--b { background: linear-gradient(180deg, #e7e2da, #d5cdc0); }
.shot--c { background: linear-gradient(180deg, #cfd3d6, #b9bfc3); }
.shot--d { background: linear-gradient(180deg, #ebe9e5, #d8d5cf); }
.shot--e { background: linear-gradient(180deg, #dcd6cc, #c6bdae); }
.shot .mon { --w: 26cqw; --h: 34cqw; }
.shot .s-double { --w: 50cqw; --h: 30cqw; }
.shot .s-slab { --w: 58cqw; --h: 20cqw; }
.gallery figure:first-child .s-double { --w: 56cqw; --h: 34cqw; }
.shot--split .stone::after { content: ""; position: absolute; inset: 0 0 0 50%; background: rgb(110 100 85 / 0.35); mix-blend-mode: multiply; }
.gallery figcaption { padding: 0.875rem 1.125rem; color: var(--d-text); font-size: 0.875rem; }
.gallery figcaption b { display: block; color: var(--d-heading); }

/* FAQ + inquiry */
.split { display: grid; gap: clamp(2rem, 1rem + 3vw, 4rem); }
@media (min-width: 60em) { .split { grid-template-columns: 1fr 1.35fr; } }
.inq__intro > * + * { margin-top: 1.25rem; }
.inq__intro .lead { color: var(--d-dark-muted); }
.inq__intro .ticks { margin-top: 1.75rem; }
.contact { display: grid; gap: 0.75rem; margin-top: 2rem; padding-top: 1.75rem; border-top: 1px solid rgb(255 255 255 / 0.14); }
.contact li { display: flex; gap: 0.75rem; }
.contact .icon { margin-top: 0.15em; color: var(--d-dark-accent); }
.contact a { color: #fff; }
.form .full { grid-column: 1 / -1; }
.form h3 { font-family: var(--d-font-head); font-size: 1.75rem; font-weight: 600; letter-spacing: 0; }
.field small { font-weight: 400; }
.req { color: var(--d-accent-text); }
.form .btn { justify-self: start; }

.ftr .logo__mark { color: var(--d-dark-accent); }

@media (prefers-reduced-motion: no-preference) {
	.btn, .chip, .piece { transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; }
	.piece:hover { box-shadow: 0 10px 30px -18px rgb(0 0 0 / 0.35); }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
@media (min-width: 64em) { .pieces--3 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 40em) { .filter__label { flex-basis: 100%; } }