/* =========================================================================
   Zellige, ceramic & marble artisan: public website styles
   Logical properties only (inline/block), so RTL and LTR share every rule.
   ========================================================================= */

/* ---- Fonts (self-hosted, SIL Open Font License) ------------------------ */
@font-face {
  font-family: "Reem Kufi";
  src: url("../fonts/reemkufi-arabic.4a4c2fbb8107.woff2") format("woff2");
  font-weight: 400 700; font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: "Reem Kufi";
  src: url("../fonts/reemkufi-latin.225bec38cef7.woff2") format("woff2");
  font-weight: 400 700; font-display: swap;
  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: "Reem Kufi";
  src: url("../fonts/reemkufi-latin-ext.d43bdaf8c4b9.woff2") format("woff2");
  font-weight: 400 700; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, 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: "Noto Naskh Arabic";
  src: url("../fonts/naskh-arabic.b5523c994f90.woff2") format("woff2");
  font-weight: 400 700; font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("../fonts/sourceserif-latin.e9192c2fe0a3.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
  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: "Source Serif 4";
  src: url("../fonts/sourceserif-latin-ext.33ba75072ebc.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, 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: "Source Serif 4";
  src: url("../fonts/sourceserif-italic-latin.cdfd2a35e445.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F;
}

/* ---- Tokens ----------------------------------------------------------------- */
:root {
  --plaster: #f6f0e4;      /* page background: lime plaster */
  --limewash: #fcf9f2;     /* raised surfaces */
  --ivory: #f3ebdc;        /* zellige white glaze */
  --grout: #e3d8c4;        /* joints and hairlines */
  --grout-strong: #cdbd9f;
  --field-border: #8c7b5e;  /* 4.1:1 on white, 3.6:1 on plaster (WCAG non-text contrast) */
  --ink: #26241f;          /* body text (charcoal) */
  --muted: #5d574c;
  --fez: #173a31;          /* deep green: headings, primary actions, dark bands */
  --fez-deep: #10291f;
  --fez-soft: #1f5646;
  --brass: #b08a45;        /* decorative accent only */
  --brass-text: #7a5a22;   /* accent for text, 5.6:1 on plaster */
  --cobalt: #24467c;
  --honey: #c99a45;
  --wa: #0c7a43;           /* WhatsApp actions (white text 5.4:1) */
  --danger: #9e2a1f;
  --focus: #24467c;

  --font-display: "Reem Kufi", "Noto Naskh Arabic", "Segoe UI", system-ui, sans-serif;
  --font-text: "Source Serif 4", "Noto Naskh Arabic", Georgia, "Times New Roman", serif;
  --font-ui: "Reem Kufi", "Segoe UI", system-ui, sans-serif;     /* menus, buttons, labels */
  --text-size: 1.125rem;
  --text-leading: 1.65;
  --heading-leading: 1.18;

  --gutter: clamp(1rem, 4vw, 2.5rem);
  --max: 75rem;
  --radius: 3px;
  --header-h: 4.5rem;
}

:lang(ar) {
  --font-text: "Noto Naskh Arabic", "Source Serif 4", "Segoe UI", Tahoma, serif;
  /* Reem Kufi stays for large headings; at small sizes Naskh reads better. */
  --font-ui: "Noto Naskh Arabic", "Segoe UI", Tahoma, sans-serif;
  --text-size: 1.1875rem;
  --text-leading: 1.9;
  --heading-leading: 1.45;
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-block-start: calc(var(--header-h) + 1rem);
}

body {
  margin: 0;
  background: var(--plaster);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--text-size);
  line-height: var(--text-leading);
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: var(--heading-leading);
  color: var(--fez);
  margin: 0 0 0.6em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.2rem, 1.55rem + 2.9vw, 3.75rem); letter-spacing: -0.01em; }
h2 { font-size: clamp(1.7rem, 1.35rem + 1.5vw, 2.5rem); }
h3 { font-size: 1.3rem; }
h3, h4 { font-family: var(--font-ui); }
:lang(ar) h3, :lang(ar) h4 { font-weight: 600; }
:lang(ar) h1, :lang(ar) h2 { letter-spacing: 0; }

p { margin: 0 0 1em; text-wrap: pretty; }
a { color: var(--fez); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { color: var(--brass-text); }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 2px; }
.on-dark :focus-visible, .site-footer :focus-visible { outline-color: var(--honey); }

.visually-hidden {
  position: absolute !important; inline-size: 1px; block-size: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.skip-link {
  position: absolute; inset-inline-start: 1rem; inset-block-start: -4rem; z-index: 100;
  background: var(--fez); color: var(--ivory); padding: 0.75rem 1rem; border-radius: var(--radius);
  font-family: var(--font-ui);
}
.skip-link:focus { inset-block-start: 1rem; color: var(--ivory); }

.container { inline-size: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
.prose { max-inline-size: 42rem; }
.prose p:last-child { margin-block-end: 0; }
.lead { font-size: 1.2em; color: var(--muted); max-inline-size: 40rem; }
.muted { color: var(--muted); }
.mt-lg { margin-block-start: 1.75rem; }
.ltr { direction: ltr; unicode-bidi: isolate; }

.icon { inline-size: 1.25em; block-size: 1.25em; flex: none; }

html[dir="ltr"] :is(h1, h2, h3, h4, .btn, .main-nav, .lang, .chip, .tile__kicker, .tile__price, .badge, .text-link,
  .breadcrumb, .city-list, .field > label, .field legend, .field__label, .choices label, .brand__name, .site-footer h2,
  .project-meta, .contact-lines, .pagination, .mobile-panel, .mobile-langs, .price-block dd, .specs dt) {
  word-spacing: 0.14em;
}

/* ---- Buttons ---------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  min-block-size: 3rem; padding: 0.7rem 1.35rem;
  font: 500 1.02rem/1.2 var(--font-ui);
  border: 1.5px solid transparent; border-radius: var(--radius);
  text-decoration: none; cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.btn .icon { inline-size: 1.2rem; block-size: 1.2rem; }
:lang(ar) .btn { line-height: 1.5; padding-block: 0.55rem; font-weight: 600; }
.btn--primary { background: var(--fez); color: var(--ivory); }
.btn--primary:hover { background: var(--fez-deep); color: #fff; }
.btn--secondary { background: transparent; color: var(--fez); border-color: var(--fez); }
.btn--secondary:hover { background: var(--fez); color: var(--ivory); }
.btn--wa { background: var(--wa); color: #fff; }
.btn--wa:hover { background: #09653a; color: #fff; }
.btn--light { background: var(--ivory); color: var(--fez); }
.btn--light:hover { background: #fff; color: var(--fez); }
.btn--outline-light { color: var(--ivory); border-color: rgba(243, 235, 220, 0.7); background: transparent; }
.btn--outline-light:hover { background: rgba(243, 235, 220, 0.12); color: #fff; }
.btn--sm { min-block-size: 2.6rem; padding: 0.5rem 1rem; font-size: 0.95rem; }
.btn--block { inline-size: 100%; }
.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }

.text-link {
  font-family: var(--font-ui); font-weight: 500; color: var(--fez);
  text-decoration: underline; text-decoration-color: var(--brass); text-decoration-thickness: 2px;
}

/* ---- Header -------------------------------------------------------------------------- */
.site-header {
  position: sticky; inset-block-start: 0; z-index: 50;
  background: rgba(246, 240, 228, 0.96);
  border-block-end: 1px solid var(--grout);
  backdrop-filter: saturate(1.2) blur(6px);
}
.site-header__inner {
  display: flex; align-items: center; gap: 1.25rem;
  min-block-size: var(--header-h);
}
.brand {
  display: flex; align-items: center; gap: 0.7rem; margin-inline-end: auto;
  text-decoration: none; color: var(--fez); min-inline-size: 0;
}
.brand__mark { inline-size: 2.25rem; block-size: 2.25rem; flex: none; }
.brand__name {
  font: 500 1.08rem/1.25 var(--font-display);
  overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.brand:hover { color: var(--fez); }

.main-nav { display: none; }
.main-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 0.25rem; }
.main-nav a {
  display: block; padding: 0.5rem 0.7rem; text-decoration: none; white-space: nowrap;
  font: 500 1rem/1.3 var(--font-ui); color: var(--ink);
  border-block-end: 2px solid transparent;
}
.main-nav a:hover { color: var(--fez); border-block-end-color: var(--grout-strong); }
.main-nav a[aria-current="page"] { color: var(--fez); border-block-end-color: var(--brass); }

.header-cta { display: none; white-space: nowrap; }

.lang { position: relative; }
.lang summary {
  display: flex; align-items: center; gap: 0.4rem; cursor: pointer; list-style: none;
  padding: 0.5rem 0.65rem; border: 1px solid var(--grout-strong); border-radius: var(--radius);
  font: 500 0.95rem/1.2 var(--font-ui); color: var(--fez); min-block-size: 2.6rem;
}
.lang summary::-webkit-details-marker { display: none; }
.lang summary .icon:last-child { inline-size: 1rem; block-size: 1rem; transition: transform 0.15s; }
.lang[open] summary .icon:last-child { transform: rotate(180deg); }
.lang__menu {
  position: absolute; inset-inline-end: 0; inset-block-start: calc(100% + 0.4rem);
  min-inline-size: 11rem; margin: 0; padding: 0.35rem; list-style: none;
  background: var(--limewash); border: 1px solid var(--grout-strong); border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(16, 41, 31, 0.12);
}
.lang__menu a {
  display: flex; justify-content: space-between; gap: 1rem; padding: 0.55rem 0.75rem;
  text-decoration: none; color: var(--ink); font-family: var(--font-ui); border-radius: 2px;
}
.lang__menu a:hover { background: var(--plaster); color: var(--fez); }
.lang__menu a[aria-current="true"] { color: var(--fez); font-weight: 600; }
.lang__menu a[aria-current="true"]::after { content: "✓"; color: var(--brass-text); }
.lang__label-short { display: none; }

.menu-toggle {
  display: inline-flex; align-items: center; gap: 0.4rem; min-block-size: 2.75rem; padding: 0.5rem 0.75rem;
  background: var(--fez); color: var(--ivory); border-radius: var(--radius);
  font: 500 0.95rem/1 var(--font-ui); cursor: pointer; list-style: none;
}
.menu-toggle::-webkit-details-marker { display: none; }
.menu-toggle .icon-close { display: none; }
.mobile-menu[open] .menu-toggle .icon-open { display: none; }
.mobile-menu[open] .menu-toggle .icon-close { display: block; }

.mobile-panel {
  position: absolute; inset-inline: 0; inset-block-start: 100%;
  max-block-size: calc(100vh - var(--header-h)); overflow-y: auto;
  border-block: 1px solid var(--grout);
  background: var(--plaster);
  padding-block: 0.75rem 1.5rem;
  box-shadow: 0 18px 30px rgba(16, 41, 31, 0.12);
}
.mobile-panel ul { list-style: none; margin: 0; padding: 0; }
.mobile-panel li a {
  display: block; padding: 0.85rem 0; border-block-end: 1px solid var(--grout);
  font: 500 1.15rem/1.3 var(--font-ui); color: var(--ink); text-decoration: none;
}
.mobile-panel li a[aria-current="page"] { color: var(--fez); }
.mobile-panel li a[aria-current="page"]::before {
  content: ""; display: inline-block; inline-size: 0.5rem; block-size: 0.5rem; margin-inline-end: 0.6rem;
  background: var(--brass); transform: rotate(45deg) translateY(-0.15em);
}
.mobile-panel .actions { margin-block-start: 1.25rem; }
.mobile-panel .actions .btn { flex: 1 1 12rem; }
.mobile-langs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-block-start: 1.25rem; }
.mobile-langs a {
  padding: 0.5rem 0.9rem; border: 1px solid var(--grout-strong); border-radius: 999px;
  text-decoration: none; font-family: var(--font-ui); color: var(--ink);
}
.mobile-langs a[aria-current="true"] { background: var(--fez); border-color: var(--fez); color: var(--ivory); }

@media (max-width: 30rem) {
  .lang__label-long { display: none; }
  .lang__label-short { display: inline; }
  .brand__name { font-size: 0.98rem; }
}

@media (min-width: 80rem) {
  .main-nav { display: block; }
  .brand { max-inline-size: 17rem; }
  .header-cta { display: inline-flex; }
  .mobile-menu { display: none; }
}

/* ---- Frieze (zellige border band, used twice per page) ---------------------- */
.frieze {
  block-size: 36px;
  background: var(--fez) url("../img/frieze.cb050fa4da5d.svg") repeat-x center / 36px 36px;
  border-block: 2px solid var(--brass);
}

/* ---- Language choice ("/", before entering the site) -------------------------- */
.lang-gate { display: flex; flex-direction: column; min-block-size: 100vh; min-block-size: 100dvh; background: var(--fez); color: var(--ivory); }
.lang-gate .frieze { flex: none; }
.lang-gate__main { flex: 1; display: grid; place-items: center; padding: clamp(2.5rem, 7vw, 5rem) var(--gutter); }
.lang-gate__inner { inline-size: 100%; max-inline-size: 44rem; text-align: center; }
.lang-gate__mark { inline-size: 4.5rem; block-size: 4.5rem; margin: 0 auto 1.25rem; }
.lang-gate h1 { color: var(--ivory); font-size: clamp(2.4rem, 1.8rem + 2.6vw, 3.6rem); margin-block-end: 0.4em; }
.lang-gate__prompt {
  list-style: none; padding: 0; margin: 0 0 clamp(2rem, 5vw, 3rem);
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.25rem 1.5rem;
  font-family: var(--font-ui); font-size: 1rem; color: rgba(243, 235, 220, 0.78);
}
.lang-gate__choices { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.lang-gate__choice {
  display: flex; flex-direction: column; justify-content: center; gap: 0.2rem;
  min-block-size: 6rem; padding: 1.1rem 1.5rem; text-align: start; text-decoration: none;
  background: var(--ivory); color: var(--fez); border-radius: var(--radius);
  border-inline-start: 5px solid var(--brass); transition: background-color 0.15s, transform 0.15s;
}
.lang-gate__choice:hover { background: #fff; color: var(--fez); transform: translateY(-2px); }
.lang-gate__name { font-family: var(--font-display); font-size: 1.65rem; line-height: 1.25; }
.lang-gate__hint { font-family: var(--font-ui); font-size: 0.95rem; color: var(--muted); }
/* The page is Arabic by default: the Latin choices keep the Latin fonts. */
.lang-gate [lang]:not(:lang(ar)) {
  --font-ui: "Reem Kufi", "Segoe UI", system-ui, sans-serif;
  --font-text: "Source Serif 4", Georgia, "Times New Roman", serif;
}
@media (prefers-reduced-motion: reduce) { .lang-gate__choice { transition: none; } .lang-gate__choice:hover { transform: none; } }

/* ---- Sections ---------------------------------------------------------------------- */
.section { padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }
.section--limewash { background: var(--limewash); border-block: 1px solid var(--grout); }
.section--dark { background: var(--fez); color: var(--ivory); }
.section--dark h2, .section--dark h3 { color: var(--ivory); }
.section--dark a:not(.btn) { color: var(--ivory); }
.section__head { max-inline-size: 46rem; margin-block-end: clamp(2rem, 4vw, 3rem); }
.section__head p:last-child { margin-block-end: 0; }
.section__head--split {
  max-inline-size: none; display: flex; flex-wrap: wrap; gap: 1rem 2rem;
  align-items: end; justify-content: space-between;
}
.section__head--split > div { max-inline-size: 46rem; }

.page-head { padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(1.5rem, 3vw, 2.5rem); }
.page-head h1 { margin-block-end: 0.35em; }
.page-head .lead { margin-block-end: 0; }

.breadcrumb { font: 0.92rem/1.4 var(--font-ui); color: var(--muted); margin-block-end: 1.25rem; }
.breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.35rem; }
.breadcrumb li + li::before { content: "/"; margin-inline-end: 0.35rem; color: var(--grout-strong); }
.breadcrumb a { color: var(--muted); }

/* ---- Hero ---------------------------------------------------------------------------- */
.hero { padding-block: clamp(2rem, 5vw, 4.5rem) clamp(2.5rem, 6vw, 5rem); overflow: hidden; }
.hero__grid { display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.hero__title { font-size: clamp(2.3rem, 1.5rem + 3.4vw, 4.1rem); font-weight: 500; margin-block-end: 0.45em; }
:lang(ar) .hero__title { font-size: clamp(2.2rem, 1.4rem + 3.2vw, 3.9rem); }
.hero__text { font-size: 1.15em; color: var(--muted); max-inline-size: 38rem; margin-block-end: 2rem; }
.hero__secondary { margin-block-start: 1.1rem; display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; font-family: var(--font-ui); }
.hero__secondary a { display: inline-flex; align-items: center; gap: 0.45rem; }

.arch {
  position: relative; aspect-ratio: 4 / 5; inline-size: min(100%, 30rem); margin-inline: auto;
  border-radius: 50% 50% 0 0 / 40% 40% 0 0;
  overflow: hidden; background: var(--grout); isolation: isolate;
}
.arch img, .arch svg { inline-size: 100%; block-size: 100%; object-fit: cover; }
.arch-frame { position: relative; padding: 0.9rem; }
.arch-frame::before {
  content: ""; position: absolute; inset: 0; inline-size: min(100%, 31.8rem); margin-inline: auto;
  border: 1px solid var(--brass); border-block-end: 0;
  border-radius: 50% 50% 0 0 / 40% 40% 0 0;
  pointer-events: none;
}
.arch-frame__base { block-size: 0.55rem; background: var(--fez); inline-size: min(100%, 31.8rem); margin-inline: auto; }

@media (min-width: 56rem) {
  .hero__grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); }
}
@media (max-width: 55.99rem) {
  .hero__art { order: -1; }
  .arch { inline-size: min(100%, 22rem); aspect-ratio: 5 / 4; border-radius: 50% 50% 0 0 / 62% 62% 0 0; }
  .arch-frame::before { inline-size: min(100%, 23.8rem); border-radius: 50% 50% 0 0 / 62% 62% 0 0; }
  .arch-frame__base { inline-size: min(100%, 23.8rem); }
}

/* Zellige artwork (inline SVG) */
.zellige { background: var(--grout); }
.zl-piece { stroke: var(--grout); stroke-width: 3; stroke-linejoin: round; transform-box: fill-box; transform-origin: center; }
.zl-star { fill: var(--ivory); }
.zl-rosette.t0 { fill: var(--honey); }
.zl-rosette.t1 { fill: var(--cobalt); }
.zl-cross { fill: var(--fez-soft); }
.zl-diamond { fill: var(--honey); stroke-width: 1.5; }

@media (prefers-reduced-motion: no-preference) {
  .zellige--lay .zl-piece { animation: zl-lay 0.7s cubic-bezier(0.2, 0.75, 0.25, 1) both; }
  .zellige--lay .r0 { animation-delay: 0.1s; }
  .zellige--lay .r1 { animation-delay: 0.24s; }
  .zellige--lay .r2 { animation-delay: 0.38s; }
  .zellige--lay .r3 { animation-delay: 0.52s; }
  .zellige--lay .r4 { animation-delay: 0.66s; }
  .zellige--lay .r5 { animation-delay: 0.8s; }
  .zellige--lay .r6 { animation-delay: 0.94s; }
  .zellige--lay .r7 { animation-delay: 1.08s; }
}
@keyframes zl-lay {
  from { opacity: 0; transform: scale(0.35) rotate(-22.5deg); }
  to { opacity: 1; transform: none; }
}

/* Pattern illustrations (services without a photo) */
.pattern-art { inline-size: 100%; block-size: 100%; }
.pa-ground { fill: var(--grout); }
.pa-ivory { fill: var(--ivory); }
.pa-green { fill: var(--fez-soft); }
.pa-cobalt { fill: var(--cobalt); }
.pa-honey { fill: var(--honey); }
.pa-plaster { fill: var(--limewash); }
.pa-sand { fill: #e8dcc6; }
.pa-line { stroke: var(--grout); stroke-width: 3; }
.pa-vein { fill: none; stroke: #9a948a; stroke-linecap: round; }
.pa-vein--soft { stroke: #c4bdb1; }
.pa-vein--blur { stroke: #d9d2c6; opacity: 0.7; }

/* ---- Services index (home) ---------------------------------------------------------- */
.service-index { list-style: none; margin: 0; padding: 0; display: grid; border-block-start: 1px solid var(--grout-strong); }
.service-index li {
  display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: 0.4rem 1.1rem;
  padding-block: 1.4rem; border-block-end: 1px solid var(--grout);
}
.service-index .icon { inline-size: 2.3rem; block-size: 2.3rem; color: var(--brass-text); margin-block-start: 0.2rem; }
.service-index h3 { margin: 0 0 0.2rem; font-size: 1.22rem; }
.service-index h3 a { text-decoration: none; }
.service-index h3 a:hover { text-decoration: underline; text-decoration-color: var(--brass); }
.service-index p { margin: 0; color: var(--muted); font-size: 0.98em; }
@media (min-width: 48rem) {
  .service-index { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 3.5rem; }
}

/* ---- Tiled grids (products & projects laid like tiles with grout) ---------------- */
/* Grout lines are drawn around each tile, so an incomplete last row leaves no blank cells. */
.tiles {
  display: grid; gap: 3px; padding: 3px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr));
}
.tiles--projects { grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); }
@media (max-width: 34rem) {
  .tiles:not(.tiles--projects) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tiles:not(.tiles--projects) .tile__body { padding: 0.75rem 0.75rem 0.9rem; }
  .tiles:not(.tiles--projects) .tile__text { display: none; }
  .tiles:not(.tiles--projects) .tile__title { font-size: 1rem; }
  .tiles:not(.tiles--projects) .tile__foot .btn { inline-size: 100%; padding-inline: 0.5rem; font-size: 0.9rem; }
  .tile .badge--demo { inset-block-start: 0.4rem; inset-inline-start: 0.4rem; font-size: 0.72rem; }
}
.tile { position: relative; display: flex; flex-direction: column; background: var(--limewash); min-inline-size: 0; box-shadow: 0 0 0 3px var(--grout); }
.tile__media { aspect-ratio: 1; overflow: hidden; background: var(--ivory); }
.tiles--projects .tile__media { aspect-ratio: 4 / 3; }
.tile__media img, .tile__media svg { inline-size: 100%; block-size: 100%; object-fit: cover; }
.tile__body { display: grid; gap: 0.3rem; padding: 1rem 1.1rem 1.2rem; flex: 1; align-content: start; }
.tile__kicker { font: 0.88rem/1.3 var(--font-ui); color: var(--brass-text); }
.tile__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.2rem 0.55rem; margin: 0; }
.tile__meta span + span::before {
  content: ""; display: inline-block; inline-size: 0.32rem; block-size: 0.32rem; margin-inline-end: 0.55rem;
  background: var(--brass); transform: rotate(45deg); vertical-align: middle;
}
.tile__kicker { margin: 0; }
.tile__kicker a { color: inherit; text-decoration: none; }
.tile__title { margin: 0; font-size: 1.12rem; line-height: 1.35; }
.tile__title a { text-decoration: none; color: var(--fez); }
.tile__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.tile:hover .tile__title a { text-decoration: underline; text-decoration-color: var(--brass); }
.tile__text { margin: 0; color: var(--muted); font-size: 0.95em; line-height: 1.5; }
.tile__price { font: 500 1.05rem/1.3 var(--font-ui); color: var(--fez); }
.tile__foot { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; justify-content: space-between; margin-block-start: 0.4rem; }
.tile__foot .btn { position: relative; z-index: 2; }
.tile .badge--demo { position: absolute; inset-block-start: 0.6rem; inset-inline-start: 0.6rem; z-index: 2; }

.badge {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.18rem 0.6rem; border-radius: 999px;
  font: 500 0.82rem/1.4 var(--font-ui); white-space: nowrap;
}
.badge::before { content: ""; inline-size: 0.45rem; block-size: 0.45rem; border-radius: 50%; background: currentColor; }
.badge--available { background: #e3efe8; color: #1b5a3c; }
.badge--on_order { background: #f6ead2; color: #6f4f14; }
.badge--out_of_stock { background: #ece8e1; color: #5a554b; }
.badge--ask { background: transparent; color: var(--muted); border: 1px solid var(--grout-strong); }
.badge--demo { background: var(--limewash); color: var(--brass-text); border: 1px dashed var(--brass); }
.badge--demo::before { display: none; }

.empty {
  padding: 2.5rem; text-align: center; background: var(--limewash);
  border: 1px dashed var(--grout-strong); color: var(--muted);
}
.empty p:last-child { margin: 0; }

.notice {
  display: flex; gap: 0.75rem; align-items: flex-start;
  padding: 0.9rem 1.1rem; margin-block-end: 1.5rem;
  background: var(--limewash); border: 1px dashed var(--brass); color: var(--ink); font-size: 0.98rem;
}
.notice[hidden] { display: none; }
.notice .icon { color: var(--brass-text); margin-block-start: 0.2rem; }
.notice p { margin: 0; }

/* ---- Filters & pagination --------------------------------------------------------- */
.filters { display: grid; gap: 1rem; margin-block-end: 2rem; }
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 0; padding: 0; }
.chip {
  display: inline-block; padding: 0.45rem 0.95rem; border: 1px solid var(--grout-strong); border-radius: 999px;
  text-decoration: none; color: var(--ink); font: 0.95rem/1.3 var(--font-ui); background: var(--limewash);
}
.chip:hover { border-color: var(--fez); color: var(--fez); }
.chip[aria-current="true"] { background: var(--fez); border-color: var(--fez); color: var(--ivory); }
.filter-row { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: end; }
.filter-row .field { flex: 1 1 12rem; margin: 0; }
.search-row { display: flex; gap: 0.5rem; max-inline-size: 30rem; }
.search-row input { flex: 1; }

.pagination { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: center; margin-block-start: 2.5rem; font-family: var(--font-ui); }

/* ---- Coverage (dark band) --------------------------------------------------------- */
.coverage__grid { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.coverage__text p { color: rgba(243, 235, 220, 0.88); }
.coverage__note { font-size: 0.95rem; color: rgba(243, 235, 220, 0.72) !important; }
.city-list {
  list-style: none; margin: 1.75rem 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: 0.35rem 1rem;
  font-family: var(--font-ui);
}
.city-list li { display: flex; align-items: center; gap: 0.55rem; }
.city-list .icon { inline-size: 0.8rem; block-size: 0.8rem; color: var(--brass); }
.map { inline-size: 100%; block-size: auto; max-block-size: 34rem; }
.map__grid { stroke: rgba(176, 138, 69, 0.22); stroke-width: 1; }
.map__star { fill: var(--brass); }
.map__label { fill: var(--ivory); font: 500 19px var(--font-ui); }
@media (max-width: 40rem) { .map__label { font-size: 24px; } }
.map__caption { font-size: 0.9rem; color: rgba(243, 235, 220, 0.65); margin-block-start: 0.75rem; }
@media (min-width: 56rem) {
  .coverage__grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
}

/* ---- Commitments ----------------------------------------------------------------- */
.commitments { list-style: none; margin: 0; padding: 0; display: grid; gap: 2rem 2.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.commitments li { border-block-start: 2px solid var(--fez); padding-block-start: 1.1rem; }
.commitments .icon { color: var(--brass); inline-size: 1.3rem; block-size: 1.3rem; margin-block-end: 0.8rem; }
.commitments h3 { font-size: 1.18rem; margin-block-end: 0.4rem; }
.commitments p { margin: 0; color: var(--muted); font-size: 0.98em; }

/* ---- Contact band -------------------------------------------------------------------- */
.contact-band__grid { display: grid; gap: 2rem; align-items: center; }
.contact-band__actions { display: grid; gap: 0.75rem; }
.contact-lines { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; gap: 0.6rem; font-family: var(--font-ui); }
.contact-lines a { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; }
.contact-lines a:hover { text-decoration: underline; }
@media (min-width: 56rem) {
  .contact-band__grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); }
}

/* ---- Services page ------------------------------------------------------------------ */
.service-block { display: grid; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; padding-block: clamp(2.5rem, 5vw, 4rem); border-block-start: 1px solid var(--grout); scroll-margin-block-start: calc(var(--header-h) + 1rem); }
.service-block:first-of-type { border-block-start: 0; padding-block-start: 0; }
.service-block__media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--grout); }
.service-block__media img, .service-block__media svg { inline-size: 100%; block-size: 100%; object-fit: cover; }
.service-block h2 { font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2.1rem); }
.service-block__icon { inline-size: 2.5rem; block-size: 2.5rem; color: var(--brass-text); margin-block-end: 0.75rem; }
.examples { margin-block-start: 1.5rem; }
.examples h3 { font-size: 1rem; color: var(--muted); font-weight: 500; margin-block-end: 0.6rem; }
.examples ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.examples a { display: block; inline-size: 6.5rem; text-decoration: none; font-size: 0.85rem; line-height: 1.35; color: var(--ink); }
.examples img { aspect-ratio: 4 / 3; object-fit: cover; margin-block-end: 0.3rem; }
.service-jump { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 1.5rem 0 0; padding: 0; }
@media (min-width: 56rem) {
  .service-block { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
  .service-block:nth-of-type(even) .service-block__media { order: 2; }
}

/* ---- Detail pages ---------------------------------------------------------------------- */
.detail { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (min-width: 56rem) { .detail { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); } }
.gallery__main { aspect-ratio: 1; background: var(--ivory); border: 3px solid var(--grout); overflow: hidden; }
.gallery__main img, .gallery__main svg { inline-size: 100%; block-size: 100%; object-fit: cover; }
.gallery__thumbs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-block-start: 0.75rem; list-style: none; padding: 0; }
.gallery__thumbs button, .gallery__thumbs a {
  display: block; inline-size: 4.75rem; aspect-ratio: 1; padding: 0; border: 2px solid var(--grout);
  background: var(--ivory); cursor: pointer; overflow: hidden;
}
.gallery__thumbs img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.gallery__thumbs [aria-current="true"] { border-color: var(--fez); }

.price-block { margin-block: 1.25rem; padding-block: 1rem; border-block: 1px solid var(--grout); }
.price-block dl { margin: 0; display: grid; gap: 0.4rem; }
.price-block div { display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; align-items: baseline; justify-content: space-between; }
.price-block dt { color: var(--muted); }
.price-block dd { margin: 0; font: 500 1.35rem/1.3 var(--font-ui); color: var(--fez); }
.price-block__request { font: 500 1.2rem/1.3 var(--font-ui); color: var(--fez); margin: 0; }
.stock-line { font-size: 0.95rem; color: var(--muted); margin-block-start: 0.5rem; }

.specs { margin: 1.5rem 0; display: grid; grid-template-columns: max-content 1fr; gap: 0.5rem 1.5rem; }
.specs dt { color: var(--muted); font-family: var(--font-ui); }
.specs dd { margin: 0; }

.project-meta { display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem; font-family: var(--font-ui); color: var(--muted); margin: 0 0 1.5rem; padding: 0; list-style: none; }
.project-meta li { display: flex; gap: 0.4rem; align-items: center; }
.project-gallery { display: grid; gap: 3px; padding: 3px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); margin-block: 2rem; }
.project-gallery a { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--ivory); box-shadow: 0 0 0 3px var(--grout); }
.project-gallery a:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
.project-gallery img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.project-gallery figure { margin: 0; }

.cta-panel {
  display: grid; gap: 1rem; padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--fez); color: var(--ivory); margin-block: 2.5rem;
}
.cta-panel h2, .cta-panel h3 { color: var(--ivory); margin: 0; }
.cta-panel p { margin: 0; color: rgba(243, 235, 220, 0.85); }

/* Lightbox */
.lightbox { inline-size: min(96vw, 80rem); max-block-size: 94vh; padding: 0; border: 0; background: transparent; }
.lightbox::backdrop { background: rgba(16, 41, 31, 0.92); }
.lightbox img { max-block-size: 82vh; inline-size: auto; margin-inline: auto; object-fit: contain; }
.lightbox__bar { display: flex; justify-content: center; gap: 0.75rem; margin-block-start: 0.75rem; }
.lightbox__caption { color: var(--ivory); text-align: center; margin-block-start: 0.5rem; font-size: 0.95rem; }

/* ---- About -------------------------------------------------------------------------- */
.about-grid { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (min-width: 56rem) { .about-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); } }
.about-photos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 3px; padding: 3px; background: var(--grout); margin-block-start: 2rem; }
.about-photos img { aspect-ratio: 1; object-fit: cover; inline-size: 100%; }
.pillars { display: grid; gap: 2.5rem; margin-block-start: 1rem; }
.pillars h2 { font-size: 1.6rem; }

/* ---- Forms ------------------------------------------------------------------------------- */
.form-layout { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (min-width: 60rem) { .form-layout { grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr); } }
.form { display: grid; gap: 1.35rem; }
.form-row { display: grid; gap: 1.35rem; }
@media (min-width: 40rem) { .form-row { grid-template-columns: 1fr 1fr; } }
.field { min-inline-size: 0; }
.field > label, .field legend, .field__label {
  display: block; margin-block-end: 0.4rem; padding: 0;
  font: 500 1.02rem/1.35 var(--font-ui); color: var(--fez);
}
.field .optional { font-weight: 400; color: var(--muted); font-size: 0.9em; }
.field fieldset { border: 0; margin: 0; padding: 0; min-inline-size: 0; }
input[type="text"], input[type="tel"], input[type="email"], input[type="search"], input[type="number"], select, textarea {
  inline-size: 100%; min-block-size: 3rem; padding: 0.7rem 0.85rem;
  font: inherit; font-size: 1rem; line-height: 1.5; color: var(--ink);
  background: #fff; border: 1.5px solid var(--field-border); border-radius: var(--radius);
}
textarea { min-block-size: 9rem; resize: vertical; }
input:focus-visible, select:focus-visible, textarea:focus-visible { border-color: var(--focus); outline-offset: 1px; }
input[dir="ltr"] { text-align: start; }
:lang(ar) input[dir="ltr"] { text-align: right; }
.help { margin: 0.35rem 0 0; font-size: 0.92rem; color: var(--muted); line-height: 1.5; }
.field__error { display: flex; gap: 0.4rem; align-items: flex-start; margin: 0.4rem 0 0; color: var(--danger); font-size: 0.95rem; font-weight: 600; line-height: 1.45; }
.field--invalid input, .field--invalid select, .field--invalid textarea { border-color: var(--danger); }

.choices { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.choices label {
  position: relative; display: inline-flex; align-items: center; gap: 0.55rem; cursor: pointer;
  padding: 0.6rem 1rem; min-block-size: 3rem; border: 1.5px solid var(--field-border); border-radius: var(--radius);
  background: #fff; font: 1rem/1.3 var(--font-ui);
}
.choices input { accent-color: var(--fez); inline-size: 1.1rem; block-size: 1.1rem; margin: 0; }
.choices label:has(input:checked) { border-color: var(--fez); background: #eef3ef; }
.choices label:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }

.field > label.consent {
  display: flex; gap: 0.75rem; align-items: flex-start; margin: 0;
  font: 400 0.98rem/1.55 var(--font-text); color: var(--ink); word-spacing: normal;
}
.consent input { accent-color: var(--fez); inline-size: 1.25rem; block-size: 1.25rem; margin-block-start: 0.2rem; flex: none; }

/* File picker: the native input stays focusable but its browser-language text is hidden;
   a translated label acts as the button. */
.file-picker {
  position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem;
  padding: 0.75rem; background: #fff; border: 1.5px dashed var(--field-border); border-radius: var(--radius);
}
.file-picker input[type="file"] { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; overflow: hidden; }
.file-picker label { cursor: pointer; }
.file-picker input:focus-visible + label { outline: 3px solid var(--focus); outline-offset: 3px; }
.file-picker__status { color: var(--muted); font-size: 0.95rem; }
.file-list { margin: 0.5rem 0 0; padding: 0; list-style: none; font-size: 0.92rem; color: var(--muted); }

.form-alert {
  padding: 1rem 1.2rem; border-inline-start: 4px solid var(--danger); background: #f8e9e6; color: #5f1810;
}
.form-alert p { margin: 0; }
.form-alert ul { margin: 0.5rem 0 0; padding-inline-start: 1.2rem; }
.privacy-note { font-size: 0.92rem; color: var(--muted); }

.hp-field { position: absolute !important; inset-inline-start: -10000px; inline-size: 1px; block-size: 1px; overflow: hidden; }

.aside-card { padding: 1.5rem; background: var(--limewash); border: 1px solid var(--grout); }
.aside-card h2 { font-size: 1.3rem; }
.aside-card ul { padding-inline-start: 1.2rem; margin: 0 0 1rem; }
.aside-card li { margin-block-end: 0.4rem; }
.aside-card .actions { margin-block-start: 1rem; }

.success { text-align: center; max-inline-size: 40rem; margin-inline: auto; }
.success__mark { inline-size: 4rem; block-size: 4rem; margin: 0 auto 1.5rem; color: var(--brass); }
.success .actions { justify-content: center; }
.reference { display: inline-block; padding: 0.3rem 0.8rem; background: var(--limewash); border: 1px solid var(--grout-strong); font-family: var(--font-ui); }

/* ---- Footer ----------------------------------------------------------------------------- */
.site-footer { background: var(--fez-deep); color: rgba(243, 235, 220, 0.86); font-size: 0.98rem; }
.site-footer a { color: var(--ivory); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.site-footer a:hover { color: #fff; text-decoration-color: var(--brass); text-underline-offset: 0.25em; }
.site-footer__grid { display: grid; gap: 2.5rem; padding-block: 3.5rem 2.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
.site-footer h2 { font: 500 1.02rem/1.3 var(--font-ui); color: var(--honey); margin-block-end: 0.9rem; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
.site-footer__brand .brand__name { color: var(--ivory); font-size: 1.15rem; -webkit-line-clamp: 3; }
.site-footer__brand p { margin-block-start: 1rem; }
.footer-contact a { display: inline-flex; align-items: center; gap: 0.55rem; }
.socials { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-block-start: 1rem; }
.socials a { display: inline-flex; padding: 0.55rem; border: 1px solid rgba(243, 235, 220, 0.3); border-radius: 50%; }
.site-footer__bottom {
  display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; justify-content: space-between;
  padding-block: 1.25rem 1.5rem; border-block-start: 1px solid rgba(243, 235, 220, 0.15);
  font-size: 0.9rem; color: rgba(243, 235, 220, 0.7);
}
.site-footer__bottom ul { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }
.footer-langs { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; }

/* Floating WhatsApp button */
.wa-float {
  position: fixed; inset-block-end: 1.1rem; inset-inline-end: 1.1rem; z-index: 60;
  display: inline-flex; align-items: center; gap: 0.6rem;
  min-block-size: 3.5rem; padding-block: 0.6rem; padding-inline: 0.9rem 1.15rem;
  background: var(--wa); color: #fff; border-radius: 999px; text-decoration: none;
  font: 500 1rem/1 var(--font-ui);
  box-shadow: 0 8px 24px rgba(16, 41, 31, 0.28);
}
.wa-float .icon { inline-size: 1.7rem; block-size: 1.7rem; }
.wa-float:hover { background: #09653a; color: #fff; }
@media (max-width: 40rem) {
  .wa-float { padding: 0; inline-size: 3.5rem; justify-content: center; }
  .wa-float__label { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
  .site-footer__bottom { padding-block-end: 5.5rem; }
}

/* Cookie / analytics consent */
.consent-banner {
  position: fixed; inset-inline: 1rem; inset-block-end: 1rem; z-index: 70; max-inline-size: 34rem;
  padding: 1.1rem 1.25rem; background: var(--limewash); border: 1px solid var(--grout-strong);
  box-shadow: 0 10px 30px rgba(16, 41, 31, 0.18); font-size: 0.95rem;
}
.consent-banner[hidden] { display: none; }

/* Owner preview of a page that is not public yet */
.preview-notice { background: #fff4d6; color: #5b4310; border-block-end: 2px solid var(--honey); padding-block: 0.7rem;
  font-family: var(--font-ui); font-size: 0.95rem; }
.preview-notice p { margin: 0; }
.preview-notice ul { margin: 0.4rem 0 0; padding-inline-start: 1.2rem; }
.preview-grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); align-items: start; }
.preview-card { display: grid; gap: 0; }
.preview-card .tiles { grid-template-columns: 1fr; }
.preview-item { padding: 0.9rem 1.1rem; background: #fff8e6; border: 1px solid var(--grout); border-block-start: 3px solid var(--honey);
  font-size: 0.92rem; line-height: 1.45; }
.preview-item__title { font-family: var(--font-ui); font-weight: 600; margin: 0 0 0.3rem; }
.preview-item ul { margin: 0 0 0.6rem; padding-inline-start: 1.1rem; overflow-wrap: anywhere; }
.preview-item li + li { margin-block-start: 0.2rem; }
.preview-item p { margin: 0; font-family: var(--font-ui); }
.consent-banner p { margin-block-end: 0.85rem; }

/* ---- Guides (articles) -------------------------------------------------------------- */
.article-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-block-start: 1px solid var(--grout); }
.article-card { display: grid; gap: 1rem 1.75rem; padding-block: 1.5rem; border-block-end: 1px solid var(--grout); align-items: start; }
@media (min-width: 40rem) { .article-card:has(.article-card__media) { grid-template-columns: 12rem minmax(0, 1fr); } }
.article-card__media { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--ivory); box-shadow: 0 0 0 3px var(--grout); }
.article-card__media img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.article-card__title { font-size: 1.35rem; margin: 0 0 0.4rem; }
.article-card__title a { color: var(--fez); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.article-card p { margin: 0 0 0.4rem; max-inline-size: 42rem; }
.article-card .muted { font: 0.9rem/1.4 var(--font-ui); }

.article-head { max-inline-size: 46rem; }
.article-summary { color: var(--muted); }
.article-cover { margin: 1.5rem 0 2rem; max-inline-size: 48rem; aspect-ratio: 16 / 9; overflow: hidden; background: var(--ivory); }
.article-cover img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.article-layout { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 64rem) {
  .article-layout:has(.toc) { grid-template-columns: 15rem minmax(0, 1fr); }
  .toc { position: sticky; inset-block-start: 6rem; }
}
.article-body h2 { font-size: 1.55rem; margin-block-start: 2.25rem; scroll-margin-block-start: 6rem; }
.article-body h3 { font-size: 1.25rem; margin-block-start: 1.75rem; scroll-margin-block-start: 6rem; }
.article-body ul, .article-body ol { padding-inline-start: 1.4rem; }
.article-body li + li { margin-block-start: 0.35rem; }
.toc { padding: 1rem 1.25rem; background: var(--limewash); border-inline-start: 3px solid var(--brass); font-family: var(--font-ui); font-size: 0.95rem; }
.toc__title { font-size: 1rem; margin: 0 0 0.5rem; color: var(--muted); }
.toc ol { margin: 0; padding-inline-start: 1.1rem; display: grid; gap: 0.35rem; }
.article-related { margin-block-start: 2.5rem; }
.article-related h2 { font-size: 1.3rem; }

/* ---- Questions & answers + facts box ---------------------------------------------------- */
.faq-layout { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (min-width: 60rem) { .faq-layout { grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.8fr); } }
.faq-group + .faq-group { margin-block-start: 2.5rem; }
.faq-group > h2 { font-size: 1.5rem; }
.faq-item { padding-block: 1.1rem; border-block-start: 1px solid var(--grout); }
.faq-item h3 { font-size: 1.15rem; margin: 0 0 0.5rem; scroll-margin-block-start: 6rem; }
.faq-item .prose { color: var(--ink); }
.service-faq { max-inline-size: 46rem; }

.facts { padding: 1.25rem 1.5rem; background: var(--limewash); border: 1px solid var(--grout); border-block-start: 3px solid var(--fez); }
.facts h2 { font-size: 1.25rem; margin: 0 0 0.75rem; }
.facts dl { margin: 0; display: grid; gap: 0.2rem; }
.facts dt { font: 600 0.95rem/1.4 var(--font-ui); color: var(--fez); margin-block-start: 0.6rem; }
.facts dd { margin: 0; font-size: 0.98rem; line-height: 1.55; }
.facts ul { margin: 0; padding-inline-start: 1.1rem; }

/* ---- Prices ----------------------------------------------------------------------------- */
.prices-layout { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (min-width: 60rem) {
  .prices-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .prices-layout .price-figure { position: sticky; inset-block-start: 5.5rem; }
}
.price-figure { max-inline-size: 45rem; margin-inline: auto; inline-size: 100%; }
.price-table__title { font-size: 1.35rem; margin-block: 0 0.9rem; }
.prices-teaser { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (min-width: 60rem) { .prices-teaser { grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); } }
.prices-teaser .actions { margin-block-start: 1.5rem; }
.price-figure--teaser { display: block; max-inline-size: 26rem; justify-self: center; background: var(--ivory);
  box-shadow: 0 0 0 3px var(--grout); }
.price-figure--teaser img { inline-size: 100%; block-size: auto; }
.price-table { inline-size: 100%; border-collapse: collapse; background: var(--limewash); box-shadow: 0 0 0 3px var(--grout); }
.price-table th, .price-table td { padding: 0.7rem 1rem; text-align: start; vertical-align: baseline; border-block-end: 1px solid var(--grout); }
.price-table thead th { background: var(--fez); color: var(--ivory); font: 600 0.95rem/1.3 var(--font-ui); }
.price-table tbody th { font-weight: 400; }
.price-table tbody tr:nth-child(even) { background: var(--ivory); }
.price-table small { display: block; color: var(--muted); font-size: 0.88rem; }
.price-table td { white-space: nowrap; inline-size: 1%; }
.price-table__amount { font: 600 1.05rem/1.3 var(--font-ui); color: var(--fez); }
.price-table__from { color: var(--muted); font-size: 0.9rem; margin-inline-end: 0.3rem; }
.price-note { margin-block: 1rem 1.5rem; color: var(--muted); font-size: 0.95rem; }
.price-figure { margin-block: 0; }
.price-figure a { display: block; background: var(--ivory); box-shadow: 0 0 0 3px var(--grout); cursor: zoom-in; }
.price-figure img { inline-size: 100%; block-size: auto; }
.price-figure figcaption { margin-block-start: 0.6rem; font-size: 0.9rem; color: var(--muted); }

/* ---- Legal pages ---------------------------------------------------------------------- */
.legal h2 { font-size: 1.45rem; margin-block-start: 2rem; }
.legal ul { padding-inline-start: 1.25rem; }

/* ---- Motion preferences ----------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

@media print {
  .site-header, .site-footer, .wa-float, .frieze, .consent-banner { display: none !important; }
  body { background: #fff; }
}