@charset "UTF-8";
/* qataridiardevelopment.com — presentation layer.

   Visual system ported from the Binghatti Starfall build
   (/var/www/dubai-new-projects/current/assets/site.css), adapted to Qatari
   Diar's own brand, assets and long-form pages. What is taken is the grammar:
   a warm near-black ground, cream text, one metal accent, a transparent header
   that resolves into glass, a full-frame architectural hero under a directional
   veil, wide bands with real whitespace, editorial image/text splits, soft
   14px cards, pill controls and a sticky bottom CTA dock.

   What is NOT taken: Binghatti's wordmark, copy, imagery, or its exact
   palette. The accent stays Qatari Diar's own copper, which already sits in
   the same metal family; the ground keeps Qatari Diar's warm hue at the
   reference's depth.

   Inter (Latin) · Tajawal (Arabic body) · Reem Kufi (Arabic display).
   Structure and copy are owned by the templates; this file styles only. */

:root {
  /* ground — Qatari Diar's warm hue at the reference's depth */
  --ink:        #15100C;
  --ink-2:      #1B1510;
  --ink-3:      #241C15;
  --ink-4:      #2E241B;

  /* text */
  --cream:      #F0E8DB;
  --cream-dim:  #C8BCAB;
  --cream-faint:#9B8F7F;

  /* the metal — Qatari Diar copper, not the reference's bronze */
  --copper:     #C89264;
  --copper-hi:  #E3C79F;
  --copper-deep:#8C5D33;

  /* the coastal accent the project pages already switch to */
  --sea:        #8FB3C4;

  --line:       rgb(227 199 159 / 0.14);
  --line-2:     rgb(227 199 159 / 0.28);
  --line-3:     rgb(227 199 159 / 0.42);

  --ff-display: Inter, "Segoe UI", system-ui, sans-serif;
  --ff-body:    Inter, "Segoe UI", system-ui, sans-serif;
  --ff-num:     Inter, "SF Mono", ui-monospace, sans-serif;

  --wrap: 1280px;
  --wrap-w: 1460px;
  --gut: clamp(1.25rem, 4.5vw, 3.5rem);
  --band: clamp(4rem, 9vw, 8.5rem);
  --r: 14px;
  --r-sm: 10px;
  --r-lg: 18px;
  --hd-h: 72px;
  --dock-h: 62px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Arabic gets its own faces and its own vertical rhythm; the Latin tracking
   and the small-caps labels are switched off wholesale further down. */
html[lang="ar"] {
  --ff-display: "Reem Kufi", "Noto Kufi Arabic", "Tajawal", sans-serif;
  --ff-body:    Tajawal, "Segoe UI", system-ui, sans-serif;
}

@media (min-width: 900px) { :root { --hd-h: 80px; --dock-h: 66px; } }

/* The header resolves from transparent over a hero into glass once the reader
   leaves it. Registered so it can be interpolated by a scroll timeline; the
   initial value is the resolved bar, which is what every browser without one
   keeps for the whole page. */
@property --hd-t { syntax: "<number>"; inherits: false; initial-value: 1; }

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

/* Belt against horizontal panning. `clip` is the correct value; `hidden` is the
   fallback for older Safari and webviews, where emulation hides real panning. */
html, body { overflow-x: hidden; overflow-x: clip; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-block-start: calc(var(--hd-h) + 1.5rem);
  scrollbar-color: var(--copper-deep) var(--ink-2);
  scrollbar-width: thin;
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--ff-body);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.72;
  padding-block-end: calc(var(--dock-h) + env(safe-area-inset-bottom));
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
html[lang="ar"] body { line-height: 1.9; }

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

::selection { background: var(--copper); color: var(--ink); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--ink-2); }
::-webkit-scrollbar-thumb { background: var(--copper-deep); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--copper); }

:focus-visible { outline: 2px solid var(--copper-hi); outline-offset: 3px; border-radius: 4px; }

a { color: var(--copper-hi); text-underline-offset: 0.26em; text-decoration-thickness: 1px;
    text-decoration-color: var(--line-2); transition: color 0.22s var(--ease), text-decoration-color 0.22s var(--ease); }
a:hover { color: var(--cream); text-decoration-color: currentColor; }

/* ── type ─────────────────────────────────────────────────────────────── */

h1, h2, h3, h4, .dsp {
  font-family: var(--ff-display);
  font-weight: 600;
  line-height: 1.16;
  letter-spacing: -0.018em;
  color: var(--cream);
  margin: 0 0 0.6em;
  text-wrap: balance;
}
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3, html[lang="ar"] h4, html[lang="ar"] .dsp {
  letter-spacing: 0; line-height: 1.34; font-weight: 500;
}
h1 { font-size: clamp(2.2rem, 1.35rem + 3.6vw, 4.1rem); line-height: 1.08; }
h2 { font-size: clamp(1.7rem, 1.25rem + 1.9vw, 2.8rem); line-height: 1.14; }
h3 { font-size: clamp(1.18rem, 1.04rem + 0.62vw, 1.55rem); line-height: 1.28; }
h4 { font-size: 1rem; line-height: 1.4; }
html[lang="ar"] h1 { line-height: 1.34; }
html[lang="ar"] h2 { line-height: 1.36; }

p { margin: 0 0 1.15em; max-width: 66ch; text-wrap: pretty; color: var(--cream-dim); }
strong, b { font-weight: 600; color: var(--cream); }

/* Figures. Isolated LTR so an Arabic sentence cannot reverse a price, and
   tabular so columns line up. Never allowed to break across lines. */
.num {
  font-family: var(--ff-num);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  direction: ltr;
  unicode-bidi: isolate;
  white-space: nowrap;
  letter-spacing: 0;
}

/* ── shell and bands ──────────────────────────────────────────────────── */

.wrap   { width: min(var(--wrap),   100% - var(--gut) * 2); margin-inline: auto; }
.wrap-wide { width: min(var(--wrap-w), 100% - var(--gut) * 2); margin-inline: auto; }

section { padding-block: var(--band); }
section.tight { padding-block: clamp(2.75rem, 5.5vw, 5rem); }
.slab { background: var(--ink-2); }
.dark { background: var(--ink-3); }

/* A band opens on its heading with room to breathe, not on a rule. */
section > .wrap > h2, section > .wrap-wide > h2 { margin-block-end: clamp(1.1rem, 2vw, 1.75rem); max-width: 22ch; }
html[lang="ar"] section > .wrap > h2, html[lang="ar"] section > .wrap-wide > h2 { max-width: 26ch; }

/* ── the Kufic bracket ────────────────────────────────────────────────────
   Qatari Diar's own device, kept but quietened for this ground: the logo is an
   open square built from four words, abstracted here as two corner brackets
   that frame a figure. Never a closed box. */
.kf { position: relative; }
.kf::before, .kf::after {
  content: ""; position: absolute; width: 28px; height: 28px; pointer-events: none; z-index: 2;
  border: 1px solid var(--copper); opacity: 0.85;
}
.kf::before { inset-block-start: -1px; inset-inline-start: -1px; border-inline-end: 0; border-block-end: 0;
              border-start-start-radius: var(--r); }
.kf::after  { inset-block-end: -1px;  inset-inline-end: -1px;  border-inline-start: 0; border-block-start: 0;
              border-end-end-radius: var(--r); }

/* ── header ───────────────────────────────────────────────────────────── */

.hd {
  --hd-t: 1;
  position: sticky; inset-block-start: 0; z-index: 60;
  background: rgb(21 16 12 / 0.88);
  background: rgb(21 16 12 / calc(var(--hd-t) * 0.88));
  border-block-end: 1px solid var(--line);
  border-block-end-color: rgb(227 199 159 / calc(var(--hd-t) * 0.14));
  backdrop-filter: blur(calc(var(--hd-t) * 16px)) saturate(calc(1 + var(--hd-t) * 0.25));
  -webkit-backdrop-filter: blur(calc(var(--hd-t) * 16px)) saturate(calc(1 + var(--hd-t) * 0.25));
}
.hd-in { display: flex; align-items: center; gap: clamp(0.5rem, 1.6vw, 1.5rem); min-height: var(--hd-h); }

.hd-logo { display: flex; align-items: center; gap: 0.7rem; flex: 0 1 auto; min-width: 0;
           min-height: 46px; text-decoration: none; }
.hd-logo img { width: 42px; height: 42px; flex: 0 0 auto; }
.hd-logo b { font-family: var(--ff-display); font-size: 0.98rem; font-weight: 600; color: var(--cream);
             line-height: 1.2; letter-spacing: 0.01em; display: block; transition: color 0.22s var(--ease); }
.hd-logo i { font-style: normal; font-size: 0.7rem; color: var(--cream-faint); letter-spacing: 0.1em;
             text-transform: uppercase; display: block; margin-block-start: 0.15rem; }
html[lang="ar"] .hd-logo i { letter-spacing: 0.02em; text-transform: none; font-size: 0.76rem; }
.hd-logo:hover b { color: var(--copper-hi); }

.nav { display: flex; gap: clamp(0.5rem, 1.7vw, 2rem); margin-inline-start: auto; align-items: center; }
.nav a {
  color: var(--cream-dim); text-decoration: none; white-space: nowrap; padding-block: 0.45rem;
  font-size: 0.78rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase;
  transition: color 0.2s var(--ease);
}
html[lang="ar"] .nav a { letter-spacing: 0; text-transform: none; font-size: 0.97rem; font-weight: 400; }
.nav a:hover, .nav a[aria-current] { color: var(--copper-hi); }

.hd-cta {
  display: inline-flex; align-items: center; gap: 0.45rem; min-height: 44px;
  background: var(--copper); color: var(--ink); padding: 0.5rem 1.15rem; border-radius: 999px;
  text-decoration: none; font-weight: 600; font-size: 0.85rem; white-space: nowrap;
  transition: background 0.22s var(--ease), transform 0.22s var(--ease);
}
.hd-cta:hover { background: var(--copper-hi); color: var(--ink); transform: translateY(-1px); }
.hd-cta .num { font-size: 0.85rem; font-weight: 700; }

.lang {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 46px; min-height: 44px; padding-inline: 0.85rem;
  border: 1px solid var(--line-2); border-radius: 999px;
  font-size: 0.8rem; font-weight: 500; letter-spacing: 0.04em;
  color: var(--cream); text-decoration: none;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.lang:hover { border-color: var(--copper); color: var(--copper-hi); }

.burger {
  display: none; align-items: center; justify-content: center;
  width: 46px; height: 46px; padding: 0;
  background: none; border: 1px solid var(--line-2); border-radius: 50%;
  color: var(--cream); font-size: 1.15rem; line-height: 1; cursor: pointer;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.burger:hover { border-color: var(--copper); color: var(--copper-hi); }
.burger[aria-expanded="true"] { border-color: var(--copper); color: var(--copper-hi); }

/* The bar dissolves into the hero photograph and resolves back into glass as
   soon as the reader leaves it. Gated on scroll-driven animation: where the
   browser cannot report scroll position the bar stays glass for the whole
   page, which is legible on every band of this ground. */
@supports (animation-timeline: scroll()) {
  body:has(> #main > .hero:first-child) > #main > .hero:first-child {
    margin-block-start: calc(-1 * var(--hd-h));
  }
  body:has(> #main > .hero:first-child) .hd {
    animation: hd-resolve linear both;
    animation-timeline: scroll(root block);
    animation-range: 2px calc(var(--hd-h) + 48px);
  }
  @keyframes hd-resolve { from { --hd-t: 0; } to { --hd-t: 1; } }
}

@media (max-width: 1040px) {
  .nav {
    position: fixed; inset-block-start: var(--hd-h); inset-inline: 0;
    background: rgb(21 16 12 / 0.97);
    backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    border-block-end: 1px solid var(--line);
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 0.25rem var(--gut) 1.15rem; margin-inline-start: 0;
    display: none; max-height: calc(100dvh - var(--hd-h)); overflow-y: auto; overscroll-behavior: contain;
  }
  .nav.open { display: flex; animation: nav-in 0.3s var(--ease) both; }
  .nav a {
    display: flex; align-items: center; min-height: 56px; padding-block: 0.7rem;
    border-block-end: 1px solid var(--line);
    font-size: 1.02rem; letter-spacing: 0.02em; text-transform: none; color: var(--cream);
  }
  .nav a:last-child { border-block-end: 0; }
  /* The call button never joins the collapsed menu: it stays in the bar so the
     number is legible at 390px without a tap. */
  .hd-cta { margin-inline-start: auto; }
  .burger { display: inline-flex; }
}
@keyframes nav-in { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }

@media (max-width: 620px) {
  .hd-logo img { width: 38px; height: 38px; }
  .hd-logo i { display: none; }
  .hd-logo b { font-size: 0.9rem; }
  .hd-in { gap: 0.42rem; }
  .hd-cta { padding: 0.45rem 0.7rem; font-size: 0.74rem; gap: 0.26rem; }
  .hd-cta .num { font-size: 0.74rem; }
  .lang { min-width: 42px; padding-inline: 0.6rem; font-size: 0.76rem; }
  .burger { width: 44px; height: 44px; }
}
@media (max-width: 400px) {
  :root { --gut: 1rem; }
  .hd-logo span { display: block; }
  .hd-logo img { width: 38px; height: 38px; }
  .hd-cta { padding-inline: 0.6rem; font-size: 0.74rem; }
  .hd-cta .num { font-size: 0.74rem; }
  .lang { min-width: 40px; padding-inline: 0.5rem; }
  .burger { width: 44px; height: 44px; }
}

.skip { position: absolute; inset-inline-start: -9999px; }
.skip:focus {
  position: fixed; inset-inline-start: 0.6rem; inset-block-start: 0.6rem; z-index: 300;
  display: inline-flex; align-items: center; min-height: 46px; padding: 0.8rem 1.3rem;
  background: var(--copper); color: var(--ink); border-radius: 999px;
  font-weight: 600; text-decoration: none;
}

/* ── hero ─────────────────────────────────────────────────────────────────
   The architectural frame carries the page. The veil is directional: heavy on
   the side the copy sits on, gone on the other, so the photograph is never
   blacked out — only the reading zone is. */

.hero {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--ink); color: var(--cream);
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 90svh; min-height: 90dvh;
  padding-block: calc(var(--hd-h) + 1.5rem) 0;
  --h-dir: right;   /* the veil runs away from the copy */
}
[dir="rtl"] .hero { --h-dir: left; }
@media (min-width: 900px) { .hero { min-height: min(96svh, 54rem); } }

.hero-img { position: absolute; inset: 0; z-index: -2; }
.hero-img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
/* One authored moment on the page: the frame settles as it arrives. Nothing
   starts invisible, so the headline still paints on the first frame. */
@media (prefers-reduced-motion: no-preference) {
  .hero-img img { animation: hero-settle 1.6s var(--ease) both; }
}
@keyframes hero-settle { from { transform: scale(1.06); } to { transform: none; } }

.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(to bottom,
      rgb(21 16 12 / 0.78) 0%, rgb(21 16 12 / 0.24) 18%,
      rgb(21 16 12 / 0.34) 38%, rgb(21 16 12 / 0.80) 66%,
      rgb(21 16 12 / 0.92) 88%, var(--ink) 100%),
    linear-gradient(to var(--h-dir),
      rgb(21 16 12 / 0.88) 0%, rgb(21 16 12 / 0.84) 46%,
      rgb(21 16 12 / 0.40) 66%, rgb(21 16 12 / 0) 84%),
    radial-gradient(120% 70% at 68% 74%, rgb(200 146 100 / 0.14) 0%, transparent 60%);
}
.hero-sea::after {
  background:
    linear-gradient(to bottom,
      rgb(21 16 12 / 0.78) 0%, rgb(21 16 12 / 0.24) 18%,
      rgb(21 16 12 / 0.34) 38%, rgb(21 16 12 / 0.80) 66%,
      rgb(21 16 12 / 0.92) 88%, var(--ink) 100%),
    linear-gradient(to var(--h-dir),
      rgb(21 16 12 / 0.88) 0%, rgb(21 16 12 / 0.84) 46%,
      rgb(21 16 12 / 0.40) 66%, rgb(21 16 12 / 0) 84%),
    radial-gradient(120% 70% at 68% 74%, rgb(143 179 196 / 0.16) 0%, transparent 60%);
}

/* On a phone the copy block is most of the frame, so the veil becomes a band:
   the top quarter of the photograph keeps full strength and the reading zone
   below it is carried at 0.88, which is the documented floor for cream on this
   ground over a blown-white region. */
@media (max-width: 899px) {
  /* The frame runs past the viewport so there is photograph above the reading
     zone rather than a sliver of it; the rail below simply falls under the
     fold, which is where a figure rail belongs on a phone anyway. */
  .hero { min-height: 108svh; min-height: 108dvh; }
  .hero::after {
    background:
      linear-gradient(to bottom,
        rgb(21 16 12 / 0.62) 0%, rgb(21 16 12 / 0.12) 8%,
        rgb(21 16 12 / 0.24) 15%, rgb(21 16 12 / 0.88) 24%,
        rgb(21 16 12 / 0.93) 72%, var(--ink) 100%),
      radial-gradient(140% 40% at 55% 12%, rgb(200 146 100 / 0.14) 0%, transparent 64%);
  }
  .hero-sea::after {
    background:
      linear-gradient(to bottom,
        rgb(21 16 12 / 0.62) 0%, rgb(21 16 12 / 0.12) 8%,
        rgb(21 16 12 / 0.24) 15%, rgb(21 16 12 / 0.88) 24%,
        rgb(21 16 12 / 0.93) 72%, var(--ink) 100%),
      radial-gradient(140% 40% at 55% 12%, rgb(143 179 196 / 0.16) 0%, transparent 64%);
  }
}

.hero-in {
  position: relative; z-index: 2; text-align: start;
  padding-block: clamp(2.5rem, 7vh, 5rem) clamp(2.5rem, 7vh, 4.5rem);
}
.hero h1 { color: var(--cream); max-width: 17ch; margin-block-end: 0.5em; }
html[lang="ar"] .hero h1 { max-width: 20ch; line-height: 1.36; }
.hero .lede {
  font-size: clamp(1.06rem, 0.98rem + 0.5vw, 1.34rem);
  line-height: 1.58; color: var(--cream); max-width: 52ch; margin-block-end: 0; font-weight: 400;
}
html[lang="ar"] .hero .lede { line-height: 1.8; max-width: 50ch; }
@media (max-width: 899px) { .hero .lede { max-width: 46ch; } }

/* Phone hero: a compact block. 35px display type wrapping to four lines is not
   a stronger headline than 29px wrapping to three, and the 60px it gives back
   is the band of photograph above the copy. */
@media (max-width: 620px) {
  .hero h1 { font-size: clamp(1.72rem, 1.05rem + 3vw, 2.15rem); }
  .hero .lede { font-size: 1rem; line-height: 1.52; }
  html[lang="ar"] .hero .lede { line-height: 1.72; }
  .hero .kicker { margin-block-end: 0.75rem; font-size: 0.72rem; letter-spacing: 0.24em; }
  html[lang="ar"] .hero .kicker { font-size: 0.88rem; letter-spacing: 0.05em; }
  .hero .ctas { margin-block-start: 1.3rem; gap: 0.7rem; }
  .hero-in { padding-block: clamp(2rem, 5vh, 3rem) clamp(1.9rem, 5vh, 3rem); }
}

/* The eyebrow: letterspaced small caps in Latin, plain in Arabic. */
.kicker {
  display: flex; align-items: center; gap: 0.7rem; margin: 0 0 1.05rem;
  font-family: var(--ff-num); font-size: 0.78rem; font-weight: 500;
  letter-spacing: 0.3em; text-transform: uppercase; color: var(--copper-hi);
}
.kicker::before { content: ""; width: 30px; height: 1px; background: var(--copper); flex: 0 0 auto; }
html[lang="ar"] .kicker { font-family: var(--ff-body); letter-spacing: 0.06em; text-transform: none; font-size: 0.95rem; }

.hero .ctas { margin-block-start: clamp(1.6rem, 3.5vh, 2.4rem); }

/* ── the figure rail under the frame ──────────────────────────────────────
   The rail sits on the ground rather than on the photograph: over bright sand
   a translucent plinth cannot hold its labels, and a CSS-only contrast check
   cannot see that because the offending layer is an image. */
/* The rail carries the last band of the frame, and it has to end above the
   floating dock — a bar that covers two of the four figures is worse than no
   bar at all. */
.hero-plinth {
  position: relative; z-index: 2;
  background: var(--ink);
  border-block-start: 1px solid var(--line);
  background-image: linear-gradient(to bottom, rgb(200 146 100 / 0.055), transparent);
  padding-block-end: calc(var(--dock-h) + 1.25rem);
}
@media (min-width: 900px) { .hero-plinth { padding-block-end: calc(var(--dock-h) + 2.5rem); } }
.dims {
  display: grid; margin: 0;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 168px), 1fr));
}
.dim {
  margin: 0; position: relative;
  padding: clamp(1.15rem, 2.4vw, 1.9rem) clamp(0.9rem, 2vw, 1.75rem);
  display: flex; flex-direction: column; gap: 0.3rem;
}
.dim + .dim::before {
  content: ""; position: absolute; inset-block: 18%; inset-inline-start: 0;
  width: 1px; background: var(--line);
}
.dim > b {
  display: block; font-family: var(--ff-num); font-weight: 600; letter-spacing: -0.02em;
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem); line-height: 1.05; color: var(--cream);
  direction: ltr; unicode-bidi: isolate;
}
[dir="rtl"] .dim > b { text-align: start; }
.dim > b span {
  font-family: var(--ff-body); font-size: 0.42em; font-weight: 500; color: var(--copper-hi);
  margin-inline-start: 0.35em; letter-spacing: 0;
}
.dim > i { display: block; font-style: normal; font-size: 0.86rem; color: var(--cream-faint); line-height: 1.5; }
.hero-sea .dim > b span, .hero-sea .kicker { color: var(--sea); }
.hero-sea .kicker::before { background: var(--sea); }

/* The rail is a plain band when it is not riding under a hero. */
.hero-plinth .wrap { padding-inline: 0; }

/* ── answers ──────────────────────────────────────────────────────────── */

.answer {
  font-size: clamp(1.05rem, 0.99rem + 0.35vw, 1.22rem); line-height: 1.68;
  color: var(--cream); max-width: 66ch; font-weight: 400; margin-block-end: 1.5rem;
}
html[lang="ar"] .answer { line-height: 1.85; }
.answer-lead {
  border: 1px solid var(--line-2); border-radius: var(--r);
  background: linear-gradient(150deg, rgb(200 146 100 / 0.10), rgb(21 16 12 / 0.25) 58%), var(--ink-3);
  padding: clamp(1.4rem, 3.2vw, 2.4rem); max-width: 72ch;
}
.answer-lead p { margin: 0; max-width: none; color: var(--cream);
                 font-size: clamp(1.05rem, 0.99rem + 0.38vw, 1.24rem); line-height: 1.7; }
html[lang="ar"] .answer-lead p { line-height: 1.9; }

/* ── project cards ────────────────────────────────────────────────────── */

.pgrid { display: grid; gap: clamp(1rem, 2vw, 1.6rem);
         grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); }
@media (min-width: 900px) {
  .pgrid { grid-template-columns: repeat(3, 1fr); }
  /* A trailing row is never left half empty. The last card widens to fill what
     is left of its row, and anything wider than one track lays out
     horizontally — which turns the leftover into the page's closing frame
     instead of a gap. */
  .pgrid > .pc:last-child:nth-child(3n + 1) { grid-column: span 3; }
  .pgrid > .pc:last-child:nth-child(3n + 2) { grid-column: span 2; }
  .pgrid > .pc:last-child:nth-child(3n + 1),
  .pgrid > .pc:last-child:nth-child(3n + 2) { flex-direction: row; min-height: 270px; }
  .pgrid > .pc:last-child:nth-child(3n + 1) > .pc-img { flex: 0 0 48%; min-height: 0; }
  .pgrid > .pc:last-child:nth-child(3n + 2) > .pc-img { flex: 0 0 44%; min-height: 0; }
  .pgrid > .pc:last-child:nth-child(3n + 1) > .pc-body,
  .pgrid > .pc:last-child:nth-child(3n + 2) > .pc-body {
    flex: 1 1 auto; align-self: center; padding-inline: clamp(1.5rem, 3vw, 2.5rem);
  }
  .pgrid > .pc:last-child:nth-child(3n + 1) .pc-img::after,
  .pgrid > .pc:last-child:nth-child(3n + 2) .pc-img::after { content: none; }
  .pgrid > .pc:last-child:nth-child(3n + 1) h3 { font-size: clamp(1.3rem, 1.05rem + 0.9vw, 1.85rem); }
}
.pc {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--r);
  text-decoration: none; color: var(--cream); min-height: 280px;
  transition: border-color 0.3s var(--ease), transform 0.4s var(--ease), background 0.3s var(--ease);
}
.pc:hover { border-color: var(--line-3); transform: translateY(-4px); background: var(--ink-3); }
.pc-img { position: relative; overflow: hidden; flex: 1 1 auto; min-height: 184px; background: var(--ink-3); }
.pc-img img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0;
              transition: transform 0.8s var(--ease); }
.pc:hover .pc-img img { transform: scale(1.045); }
.pc-img::after {
  content: ""; position: absolute; inset-inline: 0; inset-block-end: 0; height: 46%; z-index: 1;
  background: linear-gradient(to top, rgb(21 16 12 / 0.85), rgb(21 16 12 / 0));
}
.pc:first-child .pc-img { min-height: 210px; }
.pc-body { padding: clamp(1.1rem, 2vw, 1.6rem); }
.pc-body h3 { margin: 0 0 0.35rem; color: var(--cream); font-size: clamp(1.1rem, 1rem + 0.42vw, 1.35rem);
              transition: color 0.25s var(--ease); }
.pc:hover .pc-body h3 { color: var(--copper-hi); }
.pc-meta { margin: 0; max-width: none; font-size: 0.87rem; color: var(--cream-faint); line-height: 1.6; }
.pc-price {
  margin: 0.9rem 0 0; padding-block-start: 0.8rem; max-width: none;
  border-block-start: 1px solid var(--line);
  font-family: var(--ff-num); font-size: 1rem; font-weight: 600; color: var(--copper-hi);
  font-variant-numeric: tabular-nums;
}
.pc-tag {
  position: absolute; inset-block-start: 0.9rem; inset-inline-start: 0.9rem; z-index: 2;
  display: inline-flex; align-items: center; min-height: 30px; padding: 0.25rem 0.8rem;
  border: 1px solid var(--line-2); border-radius: 999px;
  background: rgb(21 16 12 / 0.7); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  color: var(--cream); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
}
html[lang="ar"] .pc-tag { letter-spacing: 0.02em; text-transform: none; font-size: 0.8rem; }

/* ── editorial split ──────────────────────────────────────────────────── */

.split { display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
@media (min-width: 900px) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .split.wide-text { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
}
.split figure { margin: 0; }
.split img { width: 100%; border-radius: var(--r); }
.split > div > h2:first-child { margin-block-start: 0; }

/* ── master plan figure ───────────────────────────────────────────────── */

.mp { margin: 0; }
.mp a {
  display: block; padding: 0.55rem; cursor: zoom-in;
  border: 1px solid var(--line-2); border-radius: var(--r); background: var(--ink-2);
  transition: border-color 0.25s var(--ease);
}
.mp a:hover { border-color: var(--copper); }
.mp img { width: 100%; border-radius: calc(var(--r) - 6px); }
.mp figcaption {
  margin-block-start: 0.85rem; font-size: 0.88rem; color: var(--cream-faint);
  line-height: 1.65; max-width: 66ch;
}

/* ── gallery ──────────────────────────────────────────────────────────── */

.gal { display: grid; gap: clamp(0.7rem, 1.4vw, 1.1rem);
       grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.gal a {
  display: block; overflow: hidden; background: var(--ink-3);
  border-radius: var(--r); aspect-ratio: 4 / 3; cursor: zoom-in;
}
.gal a:nth-child(3n+1) { aspect-ratio: 4 / 5; }
.gal img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease); }
.gal a:hover img { transform: scale(1.05); }
@media (max-width: 600px) { .gal a, .gal a:nth-child(3n+1) { aspect-ratio: 3 / 2; } }

/* ── unit matrix ──────────────────────────────────────────────────────────
   The one permitted table, and it scrolls itself. The two outer gradients are
   painted in the table's own ground and scroll with it; the two inner shadows
   are pinned to the box, so the cue appears exactly when there is more to see. */
.tw {
  overflow-x: auto; scrollbar-width: thin;
  border: 1px solid var(--line-2); border-radius: var(--r);
  background:
    linear-gradient(to right, var(--ink-2) 42%, rgb(27 21 16 / 0)) left  / 48px 100% no-repeat local,
    linear-gradient(to left,  var(--ink-2) 42%, rgb(27 21 16 / 0)) right / 48px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%,    rgb(0 0 0 / 0.5), rgb(0 0 0 / 0)) left  / 16px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgb(0 0 0 / 0.5), rgb(0 0 0 / 0)) right / 16px 100% no-repeat scroll,
    var(--ink-2);
}
table.units { border-collapse: collapse; width: 100%; min-width: 560px; font-size: 0.95rem; }
table.units th, table.units td {
  padding: 1rem 1.15rem; text-align: start; white-space: nowrap;
  border-block-end: 1px solid var(--line);
}
table.units thead th {
  background: transparent; color: var(--cream-faint); font-weight: 500;
  font-size: 0.74rem; letter-spacing: 0.18em; text-transform: uppercase;
  border-block-end: 1px solid var(--line-2);
}
html[lang="ar"] table.units thead th { letter-spacing: 0.02em; text-transform: none; font-size: 0.87rem; }
table.units tbody td { color: var(--cream-dim); font-variant-numeric: tabular-nums; }
table.units tbody td:first-child { color: var(--cream); font-weight: 500; }
table.units tbody tr { transition: background 0.2s var(--ease); }
table.units tbody tr:hover { background: rgb(227 199 159 / 0.04); }
table.units tbody tr:last-child td { border-block-end: 0; }
.tcap { font-size: 0.85rem; color: var(--cream-faint); margin-block-start: 0.85rem; max-width: 72ch; }

/* ── the plan ladder ──────────────────────────────────────────────────── */

.ladder { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; counter-reset: rung;
          border-block-start: 1px solid var(--line-2); }
.ladder li {
  display: grid; grid-template-columns: auto 1fr auto; gap: clamp(0.7rem, 2vw, 1.4rem);
  align-items: baseline; padding-block: 1.25rem; border-block-end: 1px solid var(--line);
}
.ladder li::before {
  counter-increment: rung; content: counter(rung, decimal-leading-zero);
  font-family: var(--ff-num); font-size: 0.76rem; font-weight: 600; letter-spacing: 0.08em;
  color: var(--copper);
}
.ladder b { font-weight: 500; font-family: var(--ff-display); color: var(--cream); font-size: 1.02rem; }
html[lang="ar"] .ladder b { font-family: var(--ff-body); font-weight: 500; }
.ladder i { font-style: normal; color: var(--cream-faint); font-size: 0.88rem; display: block;
            font-family: var(--ff-body); margin-block-start: 0.2rem; }
.ladder .rv {
  text-align: end; font-family: var(--ff-num); font-weight: 600; color: var(--copper-hi);
  font-size: clamp(1.05rem, 0.98rem + 0.4vw, 1.3rem); font-variant-numeric: tabular-nums;
  direction: ltr; unicode-bidi: isolate;
}

/* ── comparison cards ─────────────────────────────────────────────────── */

.vs { display: grid; gap: clamp(1rem, 2vw, 1.5rem);
      grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.vsc {
  position: relative; border: 1px solid var(--line-2); border-radius: var(--r);
  background: linear-gradient(150deg, rgb(200 146 100 / 0.08), rgb(21 16 12 / 0.25) 58%), var(--ink-2);
  padding: clamp(1.3rem, 2.8vw, 1.9rem);
  transition: border-color 0.25s var(--ease);
}
.vsc:hover { border-color: var(--line-3); }
.vsc h3 { margin: 0 0 0.25rem; font-size: 1.22rem; }
.vsc > p:first-of-type { color: var(--cream-faint); font-size: 0.87rem; margin: 0 0 1.35rem; max-width: none; }
.vsc dl { display: grid; grid-template-columns: auto 1fr; gap: 0.6rem 1rem; margin: 0; font-size: 0.93rem; }
.vsc dt { color: var(--cream-faint); }
.vsc dd { margin: 0; text-align: end; font-weight: 500; color: var(--cream); font-variant-numeric: tabular-nums; }
.vsc .go {
  display: inline-flex; align-items: center; gap: 0.4rem; min-height: 44px;
  margin-block-start: 1.1rem; font-weight: 500; font-size: 0.93rem;
  color: var(--copper-hi); text-decoration: none;
}
.vsc .go:hover { color: var(--cream); }
.vsc .go::after { content: "←"; font-family: var(--ff-num); transition: transform 0.25s var(--ease); }
[dir="ltr"] .vsc .go::after { content: "→"; }
[dir="ltr"] .vsc .go:hover::after { transform: translateX(3px); }
[dir="rtl"] .vsc .go:hover::after { transform: translateX(-3px); }

/* ── evidence note ────────────────────────────────────────────────────── */

.note {
  border-block-start: 1px solid var(--line); padding-block-start: 1rem;
  font-size: 0.88rem; color: var(--cream-faint); max-width: 72ch; line-height: 1.75;
}
.note b { color: var(--cream-dim); font-weight: 600; }

/* ── FAQ ──────────────────────────────────────────────────────────────── */

.faq { border-block-start: 1px solid var(--line-2); max-width: 78ch; }
.faq details { border-block-end: 1px solid var(--line-2); }
.faq summary {
  cursor: pointer; padding-block: 1.3rem; list-style: none;
  display: flex; gap: 1rem; align-items: flex-start;
  font-family: var(--ff-display); font-weight: 600; color: var(--cream);
  font-size: clamp(1rem, 0.96rem + 0.28vw, 1.12rem); line-height: 1.55;
  transition: color 0.2s var(--ease);
}
html[lang="ar"] .faq summary { font-family: var(--ff-body); font-weight: 500; line-height: 1.75; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--copper-hi); }
.faq summary::after {
  content: ""; flex: 0 0 auto; width: 14px; height: 14px; margin-inline-start: auto;
  margin-block-start: 0.4em;
  background:
    linear-gradient(var(--copper), var(--copper)) center / 100% 1.5px no-repeat,
    linear-gradient(var(--copper), var(--copper)) center / 1.5px 100% no-repeat;
  transition: transform 0.35s var(--ease);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .ans { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.4s var(--ease); }
.faq details[open] .ans { grid-template-rows: 1fr; }
.faq .ans > div { overflow: hidden; }
.faq .ans p { margin: 0 0 1.35rem; color: var(--cream-dim); max-width: 70ch; font-size: 0.99rem; line-height: 1.75; }
html[lang="ar"] .faq .ans p { line-height: 1.95; }

/* ── buttons ──────────────────────────────────────────────────────────── */

.cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  min-height: 52px; padding: 0.85rem 1.8rem; border-radius: 999px;
  border: 1px solid transparent; text-decoration: none;
  font-family: var(--ff-body); font-weight: 600; font-size: 0.93rem; letter-spacing: 0.02em;
  line-height: 1.35; white-space: nowrap; cursor: pointer;
  transition: background 0.22s var(--ease), color 0.22s var(--ease),
              border-color 0.22s var(--ease), transform 0.22s var(--ease);
}
html[lang="ar"] .cta { font-size: 0.98rem; letter-spacing: 0; }
.cta-1 { background: var(--copper); color: var(--ink); }
.cta-1:hover { background: var(--copper-hi); color: var(--ink); transform: translateY(-1px); }
.cta-2 { background: rgb(240 232 219 / 0.03); color: var(--cream); border-color: var(--line-2); }
.cta-2:hover { border-color: var(--copper); background: rgb(200 146 100 / 0.1); color: var(--cream); }
.cta:active { transform: none; }
.cta .num { font-weight: 700; }
.ctas { display: flex; flex-wrap: wrap; gap: 0.85rem; }
@media (max-width: 560px) {
  .ctas { flex-direction: column; align-items: stretch; }
  .cta { width: 100%; white-space: normal; padding-inline: 1.1rem; }
}

/* ── in-section CTA strip ─────────────────────────────────────────────────
   A short conversion line placed mid-page, so a reader convinced by section
   three does not have to scroll to the footer to act. */
.cta-strip {
  margin-block: clamp(2rem, 4vw, 3.25rem) 0;
  padding: clamp(1.4rem, 3vw, 2.1rem);
  border: 1px solid var(--line-2); border-radius: var(--r);
  background: linear-gradient(150deg, rgb(200 146 100 / 0.1), rgb(21 16 12 / 0.3) 58%), var(--ink-2);
  display: flex; flex-wrap: wrap; align-items: center; gap: 1.1rem 2rem;
}
.cta-strip p { margin: 0; max-width: 46ch; color: var(--cream); font-weight: 400; }
.cta-strip .ctas { margin: 0; margin-inline-start: auto; }
.slab .cta-strip { background: linear-gradient(150deg, rgb(200 146 100 / 0.1), rgb(21 16 12 / 0.3) 58%), var(--ink-3); }
@media (max-width: 720px) { .cta-strip .ctas { margin-inline-start: 0; width: 100%; } }

/* ── form ─────────────────────────────────────────────────────────────── */

.lead-card {
  border: 1px solid var(--line-2); border-radius: var(--r-lg);
  background: linear-gradient(165deg, rgb(200 146 100 / 0.09), rgb(21 16 12 / 0.35) 52%), var(--ink-3);
  padding: clamp(1.5rem, 3.6vw, 2.5rem);
}
.lead-card h3 { margin-block-end: 1.35rem; }
.f-row { display: grid; gap: 1.15rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); }
.lead-card label {
  display: block; margin-block-end: 0.5rem;
  font-size: 0.74rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--cream-dim);
}
html[lang="ar"] .lead-card label { letter-spacing: 0.02em; text-transform: none; font-size: 0.92rem; }
.lead-card input, .lead-card textarea {
  width: 100%; min-height: 54px; padding: 0.85rem 1.05rem;
  background: rgb(240 232 219 / 0.045);
  border: 1px solid var(--line-2); border-radius: var(--r-sm);
  color: var(--cream); caret-color: var(--copper);
  font-family: var(--ff-body); font-size: 1rem; font-weight: 400; text-align: start;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.lead-card textarea { min-height: 104px; resize: vertical; line-height: 1.6; }
.lead-card ::placeholder { color: var(--cream-faint); opacity: 1; }
.lead-card input:hover, .lead-card textarea:hover { background: rgb(240 232 219 / 0.07); }
.lead-card input:focus, .lead-card textarea:focus {
  border-color: var(--copper); background: rgb(240 232 219 / 0.07); outline: none;
}
.lead-card input:focus-visible, .lead-card textarea:focus-visible { outline: 2px solid var(--copper-hi); outline-offset: 2px; }
.lead-card button {
  width: 100%; min-height: 54px; margin-block-start: 1.35rem; padding: 0.9rem 1.5rem;
  border: 0; border-radius: 999px; background: var(--copper); color: var(--ink);
  font-family: var(--ff-body); font-weight: 600; font-size: 0.98rem; cursor: pointer;
  transition: background 0.22s var(--ease);
}
.lead-card button:hover { background: var(--copper-hi); }
.lead-card .note { border: 0; padding: 0; color: var(--cream-faint); }
.hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.err {
  margin-block-end: 1.15rem; padding: 0.85rem 1rem;
  border: 1px solid rgb(232 148 134 / 0.4); border-radius: var(--r-sm);
  background: rgb(232 148 134 / 0.08); color: #E89486; font-size: 0.9rem; max-width: none;
}

/* ── strips and lists ─────────────────────────────────────────────────── */

.strip { display: grid; gap: clamp(0.8rem, 1.6vw, 1.15rem);
         grid-template-columns: repeat(auto-fit, minmax(min(100%, 235px), 1fr)); }
.strip a {
  display: block; padding: 1.35rem 1.4rem; text-decoration: none; color: var(--cream);
  border: 1px solid var(--line); border-radius: var(--r); background: var(--ink-2);
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease), transform 0.3s var(--ease);
}
.strip a:hover { border-color: var(--line-3); background: var(--ink-3); transform: translateY(-2px); }
.strip b { display: block; font-family: var(--ff-display); font-weight: 600; font-size: 1.03rem;
           margin-block-end: 0.3rem; color: var(--cream); transition: color 0.25s var(--ease); }
html[lang="ar"] .strip b { font-family: var(--ff-body); font-weight: 500; }
.strip a:hover b { color: var(--copper-hi); }
.strip i { font-style: normal; font-size: 0.86rem; color: var(--cream-faint); line-height: 1.6; }
.slab .strip a { background: var(--ink-3); }

.plain { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.7rem; }
.plain li { padding-inline-start: 1.35rem; position: relative; color: var(--cream-dim); }
.plain li::before {
  content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 0.72em;
  width: 8px; height: 1px; background: var(--copper);
}

/* ── image-background bands ───────────────────────────────────────────────
   A section whose ground is a photograph. The veil is deliberately heavy and
   FIXED, not tuned per image: the contrast gate composites CSS layers only and
   cannot see the photo underneath, so legibility here has to be guaranteed by
   construction rather than verified by measurement.
   ⛔ Master plans are never used as a background — they are a searched asset
   and belong in a click-to-enlarge figure under their own heading. */
.imgbg { position: relative; isolation: isolate; background: var(--ink); color: var(--cream); }
.imgbg::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background-image: var(--bg); background-size: cover; background-position: center;
}
/* 0.86 is a floor, not a taste setting. Worst case is a blown-white region of
   the photograph: composited against this ground at 0.86 it lands around 0.155
   relative luminance, which gives cream text 4.7:1 — just past AA. At 0.80 the
   same region gives 3.7:1 and fails. Do not lighten this to show more image. */
.imgbg::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(rgb(21 16 12 / 0.86), rgb(21 16 12 / 0.9)),
    radial-gradient(120% 80% at 70% 20%, rgb(200 146 100 / 0.1) 0%, transparent 60%);
}
.imgbg h2, .imgbg h3, .imgbg h4 { color: var(--cream); }
.imgbg p, .imgbg li { color: var(--cream-dim); }
.imgbg .answer { color: var(--cream); }
.imgbg .note { color: var(--cream-faint); }

/* ── breadcrumb ───────────────────────────────────────────────────────── */

.crumb {
  font-size: 0.83rem; color: var(--cream-faint); padding-block: 1.1rem;
  border-block-end: 1px solid var(--line);
}
.crumb a { color: var(--cream-faint); text-decoration: none; }
.crumb a:hover { color: var(--copper-hi); }

/* ── footer ───────────────────────────────────────────────────────────── */

.ft {
  background: var(--ink); border-block-start: 1px solid var(--line);
  color: var(--cream-dim); padding-block: clamp(3rem, 6vw, 5rem) 2rem;
}
.ft h4 {
  font-size: 0.74rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--cream-faint); margin: 0 0 1.1rem;
}
html[lang="ar"] .ft h4 { letter-spacing: 0.02em; text-transform: none; font-size: 0.95rem; color: var(--copper-hi); }
.ft-grid { display: grid; gap: clamp(2rem, 3.5vw, 3rem);
           grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); }
.ft ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.1rem; }
.ft a { display: inline-block; color: var(--cream-dim); text-decoration: none; font-size: 0.92rem;
        padding-block: 0.42rem; transition: color 0.2s var(--ease); }
.ft a:hover { color: var(--copper-hi); }
.ft p { color: var(--cream-faint); }
.ft-logo img { width: 58px; height: 58px; margin-block-end: 0.9rem; opacity: 0.9; }
.ft-logo p { max-width: 42ch; font-size: 0.88rem; }
.ft-legal {
  border-block-start: 1px solid var(--line); margin-block-start: clamp(2.4rem, 4vw, 3.5rem);
  padding-block-start: 1.75rem;
}
.ft-legal p { font-size: 0.82rem; line-height: 1.8; color: var(--cream-faint); max-width: 88ch; margin-block-end: 0.7rem; }

/* ── sticky bottom CTA dock ───────────────────────────────────────────────
   A bar on phones and a centred pill on desktop. Deliberately static — no
   bounce, no pulse, no auto-opening bubble. The phone number is inside the
   button, per the fleet convention. */
.fab {
  position: fixed; z-index: 70; display: flex;
  inset-block-end: 0; inset-inline: 0;
  background: rgb(21 16 12 / 0.94);
  backdrop-filter: blur(18px) saturate(130%); -webkit-backdrop-filter: blur(18px) saturate(130%);
  border-block-start: 1px solid var(--line-2);
  padding-block-end: env(safe-area-inset-bottom);
}
.fab a {
  flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: var(--dock-h); padding: 0.6rem 0.75rem;
  color: var(--cream); text-decoration: none; font-weight: 500; font-size: 0.85rem;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.fab a + a { border-inline-start: 1px solid var(--line); }
.fab a:hover { color: var(--copper-hi); }
.fab .num { font-weight: 700; font-variant-numeric: tabular-nums; }
.fab-call { background: var(--copper); color: var(--ink) !important; font-weight: 600; }
.fab-call:hover { background: var(--copper-hi); }
.fab-wa { flex: 0 0 38%; }
/* Under 380px the call label wraps inside its own button. The WhatsApp item
   gives up its share of the bar instead, so the number stays on one line. */
@media (max-width: 380px) {
  .fab a { font-size: 0.76rem; white-space: nowrap; gap: 0.35rem; padding-inline: 0.5rem; }
  .fab-wa { flex: 0 0 auto; padding-inline: 0.9rem; }
  .fab .num { font-size: 0.76rem; }
}

@media (min-width: 900px) {
  .fab {
    inset-inline: auto; inset-block-end: 1.75rem;
    left: 50%; transform: translateX(-50%);
    width: max-content; border: 1px solid var(--line-2); border-radius: 999px;
    overflow: hidden; padding-block-end: 0;
    box-shadow: 0 18px 44px -14px rgb(0 0 0 / 0.75);
  }
  .fab a { min-height: 56px; padding-inline: 1.75rem; font-size: 0.88rem; }
  .fab-wa { flex: 0 0 auto; }
  .ft { padding-block-end: 5.5rem; }
}

/* ── lightbox ─────────────────────────────────────────────────────────── */

.lb {
  position: fixed; inset: 0; z-index: 200; display: none;
  align-items: center; justify-content: center; padding: 2.5rem 1.25rem;
  background: rgb(10 7 5 / 0.93);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.lb.open { display: flex; animation: lb-in 0.26s var(--ease) both; }
@keyframes lb-in { from { opacity: 0; } to { opacity: 1; } }
.lb img { max-width: 100%; max-height: 90dvh; object-fit: contain; border-radius: var(--r); }
.lb button {
  position: absolute; inset-block-start: 1.25rem; inset-inline-end: 1.25rem;
  width: 46px; height: 46px; display: grid; place-items: center;
  background: var(--ink-3); border: 1px solid var(--line-2); border-radius: 50%;
  color: var(--cream); font-size: 1.4rem; line-height: 1; cursor: pointer;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.lb button:hover { border-color: var(--copper); color: var(--copper-hi); }
@media (max-width: 899px) { .lb { padding-block-end: calc(var(--dock-h) + 2rem + env(safe-area-inset-bottom)); } }

/* ── reveal ───────────────────────────────────────────────────────────── */

.rise { opacity: 0; transform: translateY(20px); }
.rise.in { opacity: 1; transform: none; transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important; scroll-behavior: auto !important;
  }
  .rise { opacity: 1 !important; transform: none !important; }
}

/* ── Latin legibility overrides ───────────────────────────────────────────
   Inter carries the English mirror. Small-caps tracking is a display device
   here, never a reading one, so body sizes stay plain and generous. */
html[lang="en"] body { font-size: 1.02rem; }
html[lang="en"] .hero .lede { font-weight: 500; line-height: 1.45; }
html[lang="en"] .answer { font-weight: 400; }
html[lang="en"] .faq summary { font-weight: 600; }