/* ============================================================
   ERB PRIME — "ATELIER" DESIGN SYSTEM
   Interior renovation & hand-sculpted gypsum artworks, Dubai/UAE
   A gallery-grade, warm, editorial system — not a blueprint.
   ============================================================ */

/* Fonts are loaded from the HTML <head> (faster than @import). */

:root {
  /* ---- Palette (sampled from the real ERB Prime logo + warm gallery ground) ---- */
  --color-bg: #FAF6EE;
  --color-bg-soft: #F2EAD9;
  --color-surface: #FFFFFF;
  --color-ink: #2A2724;
  --color-text: #55504A;
  --color-text-soft: #8A8378;
  --color-text-on-dark: #F3ECDD;
  --color-text-on-dark-soft: #C7C0B2;

  --color-teal: #06607B;
  --color-teal-600: #075873;
  --color-teal-700: #054A60;
  --color-teal-800: #08303D;
  --color-teal-900: #0A2830;
  --color-teal-tint: #E3EEF1;
  --color-teal-tint-2: #CFE2E6;

  --color-brass: #AD8A50;
  --color-brass-light: #C8AB78;
  --color-brass-tint: #F0E6D2;

  --color-line: rgba(42, 39, 36, 0.12);
  --color-line-soft: rgba(42, 39, 36, 0.07);
  --color-error: #A3402F;

  /* ---- Radii ---- */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-xl: 34px;
  --radius-pill: 999px;

  /* ---- Shadows ---- */
  --shadow-sm: 0 2px 10px rgba(35, 28, 18, 0.06);
  --shadow-md: 0 14px 34px rgba(35, 28, 18, 0.10);
  --shadow-lg: 0 26px 64px rgba(35, 28, 18, 0.16);
  --shadow-inset: inset 0 0 0 1px rgba(42,39,36,0.08);

  /* ---- Type ---- */
  --font-heading: 'Fraunces', 'Amiri', 'Georgia', serif;
  --font-body: 'Manrope', 'Tajawal', -apple-system, sans-serif;

  --ease: cubic-bezier(.16,1,.3,1);
  --edge: clamp(20px, 5vw, 72px);
  /* 1240px left a wide monitor looking like a phone layout floating in a sea
     of background. The content column now grows with the screen up to a limit
     that still keeps paragraph line-length readable. */
  --wrap: min(1380px, 92vw);
}

html[lang="ar"], .lang-ar {
  --font-heading: 'Amiri', 'Fraunces', serif;
  --font-body: 'Tajawal', 'Manrope', sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
button { font-family: inherit; cursor: pointer; }
::selection { background: var(--color-teal); color: var(--color-text-on-dark); }

h1, h2, h3, h4, blockquote {
  font-family: var(--font-heading);
  color: var(--color-ink);
  font-weight: 600;
  line-height: 1.12;
  margin: 0;
}
/* Display tracking.
   Fraunces at 40–54px with default tracking reads loose and slightly amateur:
   at display sizes the optical gaps between letters grow faster than the
   letters do, so large type needs winding IN, not out. Small text is left
   alone — tightening body copy would hurt legibility, not help it. */
h1, h2 { letter-spacing: -0.015em; }
.hero h1, .page-head h1 { letter-spacing: -0.022em; }
h3, h4 { letter-spacing: -0.006em; }

/* Arabic is a joined script — negative tracking pulls the connections apart
   and can break the letterforms. Explicitly reset it. */
[lang="ar"] h1, [lang="ar"] h2, [lang="ar"] h3, [lang="ar"] h4, [lang="ar"] blockquote,
.lang-ar h1, .lang-ar h2, .lang-ar h3, .lang-ar h4, .lang-ar blockquote {
  font-weight: 700; line-height: 1.35; letter-spacing: 0;
}

/* Headings break at sensible points instead of dropping one orphaned word
   onto a line of its own; paragraphs avoid single-word last lines. Both are
   ignored by browsers that don't support them, so they cost nothing. */
h1, h2, h3, blockquote { text-wrap: balance; }
p, li { text-wrap: pretty; }

p { margin: 0; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding-left: var(--edge); padding-right: var(--edge); }
/* Section rhythm.
   Each band of content needs enough clear space above and below that when you
   stop scrolling, one thing is in front of you and the next has not yet begun
   to compete with it. The old 84px was roughly one line of body copy — far too
   little to separate two ideas, so the top of the next section was always
   visible under the current one. These are viewport-relative so the rhythm
   holds on a laptop and on a large monitor alike. */
.section { padding: clamp(88px, 11vh, 148px) 0; scroll-margin-top: 96px; }
.section-tight { padding: clamp(56px, 7vh, 92px) 0; scroll-margin-top: 96px; }
@media (max-width: 720px) {
  .section { padding: 64px 0; }
  .section-tight { padding: 44px 0; }
}


/* ================= Texture ground ================= */
.plaster-ground {
  background-color: var(--color-bg);
  background-image:
    radial-gradient(circle at 18% 22%, rgba(173,138,80,0.06), transparent 40%),
    radial-gradient(circle at 82% 78%, rgba(6,96,123,0.05), transparent 45%);
  position: relative;
}
/* ---------- Layer 1 of 3: DRAWING ----------
   Setting-out geometry in the page margins. Anchored so roughly half of each
   ring sits outside the viewport and the visible arc falls beside the text
   column, not across it. Multiply blend means these lines can only darken —
   they physically cannot reduce the contrast of any text they pass behind. */
/* Everything in the background layer sits at z-index 0 and every block of
   real content sits at z-index 1 (see the `main` / footer rule below). That
   is the whole fix for rings appearing *over* a card or a photo: a fixed
   element with z-index 0 creates a stacking context and paints above ordinary
   in-flow content, so the ordering has to be stated, not assumed. */
.setting-out {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  overflow: hidden;
}
main, .site-footer { position: relative; z-index: 1; }
/* The blend lives on each ring, NOT on the full-viewport wrapper. Putting
   mix-blend-mode on the wrapper would force the browser to re-blend the
   entire viewport on every scroll frame while the rings rotate; scoping it
   to the two ring boxes keeps that work to the area it actually affects. */
/* 0.07 over a warm ivory ground was below the threshold where the eye reads
   a line at all — the drawing was technically there and effectively invisible.
   Now that the layering is explicit and these can never cross text, they can
   be brought up to where they read as a drawing under the plaster. */
.so-ring {
  position: absolute; opacity: 0.16;
  mix-blend-mode: multiply;
  will-change: transform;
}
.so-ring svg { width: 100%; height: 100%; display: block; }
.so-ring-a { width: 620px; height: 620px; top: 6vh;  inset-inline-start: -300px; }
.so-ring-b { width: 760px; height: 760px; bottom: -14vh; inset-inline-end: -380px; }
@media (max-width: 900px) {
  /* On narrow screens there is no margin to hide in, so pull them further
     out and fade them down rather than letting them sit under the copy. */
  .so-ring { opacity: 0.10; }
  .so-ring-a { width: 420px; height: 420px; inset-inline-start: -260px; }
  .so-ring-b { width: 480px; height: 480px; inset-inline-end: -300px; }
}
@media (prefers-reduced-motion: reduce) { .so-ring { opacity: 0.12; } }

/* ---------- Layer 3 of 3: LIGHT ----------
   Raking light.
   A single very wide, very soft band of warm light that drifts slowly across
   the page behind everything. This is not decoration for its own sake: raking
   light is the specific lighting a plasterer uses to read a surface, and the
   lighting every one of this company's own photographs depends on to show
   relief. The page ground behaves like the material the company works in.
   Kept under 4% opacity — it should register as atmosphere, never as a
   visible moving object. */
.plaster-ground::before {
  content: "";
  position: fixed; inset: -30% -60%; z-index: 0; pointer-events: none;
  background: linear-gradient(104deg,
      transparent 34%,
      rgba(255,247,232,0.55) 47%,
      rgba(255,247,232,0.75) 50%,
      rgba(255,247,232,0.55) 53%,
      transparent 66%);
  opacity: 0.05;
  /* soft-light rather than normal: it can only nudge midtones, so it is
     incapable of flattening text contrast the way a plain white veil would. */
  mix-blend-mode: soft-light;
  animation: erbRakingLight 34s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes erbRakingLight {
  from { transform: translate3d(-14%, -6%, 0) rotate(-1deg); }
  to   { transform: translate3d(14%, 6%, 0) rotate(1deg); }
}
@media (prefers-reduced-motion: reduce) {
  .plaster-ground::before { animation: none; opacity: 0.035; }
}
/* ---------- Layer 2 of 3: MATERIAL ----------
   Fine plaster-grain film over the whole page — the tactile, hand-worked
   surface quality of the brand's own material, rendered as a pure CSS/SVG
   noise filter so it needs no external asset and never breaks offline. */
.plaster-ground::after {
  content: "";
  position: fixed; inset: -180px; z-index: 3; pointer-events: none;
  opacity: 0.035; mix-blend-mode: overlay;
  background-repeat: repeat; background-size: 180px 180px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  animation: erbGrainDrift 46s linear infinite;
}
/* Barely-perceptible drift so the plaster surface reads as tactile and
   "made by hand" rather than a static printed texture. Kept to whole
   tile-widths so the loop never pops or reveals a seam. */
@keyframes erbGrainDrift {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-60px, 30px); }
  50%  { transform: translate(-30px, -45px); }
  75%  { transform: translate(45px, 15px); }
  100% { transform: translate(0, 0); }
}
@media (prefers-reduced-motion: reduce) { .plaster-ground::after { animation: none; } }

/* ================= Keyboard focus =================
   Every interactive control gets one consistent, visible focus ring when —
   and only when — the user is navigating by keyboard. Previously only .btn
   carried a focus style, so tabbing through the nav, the carousel dots, the
   project cards or the modal arrows moved an invisible cursor: the page was
   effectively unusable without a mouse, and that is the kind of gap that
   separates a professional build from a homemade one. :focus-visible means
   mouse users never see a ring, so nothing about the look changes. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--color-brass);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}
/* On the dark CTA band and inside photo frames a brass ring on a dark or
   busy backdrop is hard to see — switch to a light ring there. */
.cta-band a:focus-visible,
.hero-dot:focus-visible,
.pm-arrow:focus-visible,
.ba-handle:focus-visible {
  outline-color: #fff;
}
/* Skip-to-content affordance for keyboard and screen-reader users. */
.skip-link {
  /* logical inset so it lands correctly in the Arabic RTL layout too */
  position: absolute; inset-inline-start: 12px; top: -60px; z-index: 200;
  background: var(--color-teal); color: #fff;
  padding: 10px 18px; border-radius: var(--radius-sm);
  font-size: 13px; font-weight: 700; text-decoration: none;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 12px; }

/* ================= Custom scrollbar ================= */
html { scrollbar-color: var(--color-brass-light) var(--color-bg-soft); scrollbar-width: thin; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--color-bg-soft); }
::-webkit-scrollbar-thumb { background: var(--color-brass-light); border-radius: 10px; border: 2.5px solid var(--color-bg-soft); }
::-webkit-scrollbar-thumb:hover { background: var(--color-brass); }

/* ================= Kicker / eyebrow ================= */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-teal-700);
  white-space: nowrap;
}
.kicker::before {
  content: "";
  width: 22px; height: 1px;
  background: var(--color-brass);
  flex: none;
}
[dir="rtl"] .kicker::before { order: 2; }

/* ================= Buttons ================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14.5px;
  letter-spacing: 0.01em;
  text-decoration: none;
  border: none;
  border-radius: var(--radius-pill);
  padding: 15px 30px;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
  white-space: nowrap;
}
.btn:focus-visible { outline: 2px solid var(--color-brass); outline-offset: 3px; }
.btn-primary {
  background: var(--color-teal);
  color: #fff;
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
}
/* A hairline of brass draws in along the bottom edge on hover. This replaced
   a glossy white "shine" that swept diagonally across the button — the single
   most dated detail on the page, and badly off-brand: it simulates light
   glancing off polished plastic, on a company whose whole identity is
   hand-worked matte plaster. */
.btn-primary::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--color-brass-light);
  transform: scaleX(0); transform-origin: center;
  transition: transform .45s var(--ease);
  pointer-events: none;
}
.btn-primary:hover { background: var(--color-teal-700); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn-primary:hover::before { transform: scaleX(1); }
.btn-secondary {
  background: transparent;
  color: var(--color-teal-700);
  border: 1.5px solid var(--color-teal);
}
.btn-secondary:hover { background: var(--color-teal-tint); transform: translateY(-2px); }
.btn-ghost {
  background: transparent;
  color: var(--color-ink);
  padding: 10px 6px;
  border-radius: var(--radius-sm);
  position: relative;
}
.btn-ghost::after {
  content: "";
  position: absolute; left: 6px; right: 6px; bottom: 4px; height: 1.5px;
  background: var(--color-brass);
  transform: scaleX(0); transform-origin: left;
  transition: transform .3s var(--ease);
}
.btn-ghost:hover::after { transform: scaleX(1); }
.btn-block { width: 100%; }
.btn-light { background: var(--color-bg); color: var(--color-teal-900); box-shadow: var(--shadow-sm); }
.btn-light:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

/* ================= Tags / pills ================= */
.tag {
  display: inline-flex; align-items: center;
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 6px 13px; border-radius: var(--radius-pill);
  white-space: nowrap;
}
.tag-teal { background: var(--color-teal-tint); color: var(--color-teal-700); }
.tag-brass { background: var(--color-brass-tint); color: #7A5F32; }
.tag-outline { background: transparent; border: 1px solid var(--color-line); color: var(--color-text); }

/* ================= Nav ================= */
.site-nav {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--color-bg) 88%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-line);
  padding: 14px var(--edge);
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  transition: padding .35s var(--ease), background-color .35s var(--ease), box-shadow .35s var(--ease);
}
/* Compacts once the page has scrolled past the hero/page-head — a smaller,
   more insistent bar reads as considered rather than just "always sticky". */
.site-nav.scrolled { padding-top: 9px; padding-bottom: 9px; box-shadow: var(--shadow-sm); background: color-mix(in srgb, var(--color-bg) 95%, transparent); }
.site-nav .brand { display: flex; align-items: center; gap: 12px; text-decoration: none; flex: none; }
.site-nav .brand img { height: 42px; width: auto; transition: height .35s var(--ease); }
.site-nav.scrolled .brand img { height: 34px; }

/* Scroll-progress hairline — sits above the nav, tracks how far through
   the page the visitor is. Injected by site.js so it's present site-wide. */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0%; z-index: 210;
  background: linear-gradient(90deg, var(--color-brass), var(--color-teal));
  pointer-events: none;
}
.site-nav .brand-tagline {
  font-size: 9.5px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--color-teal-700);
  max-width: 118px; line-height: 1.35; border-inline-start: 1px solid var(--color-line); padding-inline-start: 12px;
}
@media (max-width: 1180px) { .site-nav .brand-tagline { display: none; } }
.nav-links { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-inline-start: 12px; }
@media (max-width: 860px) { .nav-links { display: none; } }
.nav-links a {
  text-decoration: none; color: var(--color-text); font-weight: 600; font-size: 14px;
  padding: 8px 12px; border-radius: var(--radius-sm); position: relative;
}
.nav-links a::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 3px; height: 2px;
  background: var(--color-brass); transform: scaleX(0); transform-origin: center; transition: transform .25s var(--ease);
}
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after { transform: scaleX(1); }
.nav-links a[aria-current="page"] { color: var(--color-teal-700); }
.nav-right { display: flex; align-items: center; gap: 10px; margin-inline-start: auto; flex: none; }
.lang-switch {
  background: transparent; border: 1px solid var(--color-line); border-radius: var(--radius-pill);
  padding: 8px 14px; font-size: 12px; font-weight: 700; color: var(--color-text);
  transition: border-color .2s, color .2s;
}
.lang-switch:hover { border-color: var(--color-teal); color: var(--color-teal-700); }
.nav-burger { display: none; background: none; border: 1px solid var(--color-line); border-radius: var(--radius-sm); padding: 9px 11px; }
@media (max-width: 860px) { .nav-burger { display: inline-flex; } }
/* (Mobile menu panel styles live in the v2 layer at the end of this file.) */

/* ================= Hero ================= */
.hero { position: relative; overflow: hidden; padding-top: 34px; }
.hero-medallion {
  position: absolute; top: -170px; inset-inline-end: -170px; opacity: 0.06; z-index: 0; pointer-events: none;
  animation: erbSpin 140s linear infinite;
}
@keyframes erbSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .hero-medallion, .fade-up { animation: none !important; } }
.hero-grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(320px,0.92fr) minmax(360px,1.18fr);
  gap: 44px; align-items: start; padding: 18px 0 92px;
}
/* Text column gets its own top-aligned rhythm so the headline reads
   immediately on load, instead of floating vertically-centered against
   the (much taller) hero photo next to it. */
.hero-grid > div:first-child { padding-top: 6px; }
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; } }
.hero h1 {
  font-size: clamp(38px, 5.4vw, 72px);
  font-weight: 500;
  line-height: 1.04;
  margin: 20px 0 22px;
}
.hero h1 em { font-style: italic; color: var(--color-teal); font-weight: 500; }
.hero-sub { font-size: 17.5px; line-height: 1.75; color: var(--color-text); max-width: 50ch; margin-bottom: 30px; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }

.arch-frame {
  position: relative;
  border-radius: 46% 46% var(--radius-lg) var(--radius-lg) / 22% 22% var(--radius-lg) var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  aspect-ratio: 4/5;
  /* No transform/will-change here any more: nothing moves this element, and
     an idle compositor layer on a border-radius mask this large is pure
     memory cost. The photo inside is what moves. */
}
.arch-frame.wide { aspect-ratio: 4/3; border-radius: 26% 26% var(--radius-lg) var(--radius-lg) / 16% 16% var(--radius-lg) var(--radius-lg); }
.hero-media-wrap { position: relative; }
/* The hero photo frame was reading as too tall ("dome tower") and pushing
   the bottom of the frame below the fold on load. Landscape 4:3 (matching
   the modal's frame) reads calmer and keeps the whole frame in view. */
.hero-media-wrap .arch-frame { aspect-ratio: 4/3; }
/* Gallery-frame hairline + soft top sheen — reads as a museum mount rather
   than a plain cropped photo. */
.arch-frame::before {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1.5px rgba(243,236,221,0.55), inset 0 46px 70px -46px rgba(255,255,255,0.4);
}
/* Hero carousel — an editorial cross-dissolve with a slow continuous
   "Ken Burns" drift on the photo itself. Rotating/flicking a photo inside
   a fixed arch mount exposes the frame edges and reads as a slideshow
   toy; a long dissolve over a photo that is always quietly moving is how
   architecture studios present work, and it never fights the frame. */
.hero-slide {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  opacity: 0;
}
.hero-slide.active { opacity: 1; z-index: 3; pointer-events: auto; }
.hero-slide.leaving { opacity: 1; z-index: 2; }

/* Hero sequence: each new photo is drawn up over the last like a trowel
   pass, a soft line of light riding the edge. The outgoing photo dims and
   settles underneath, the incoming one arrives slightly enlarged and eases
   into place over the whole dwell. Scrolling pushes the camera in a touch. */
.hero-slide { overflow: hidden; }
/* Composited wipe: the slide rises while its photo counter-moves, so the
   picture stays still and only the edge travels — transforms only, smooth
   on phones (clip-path animations repaint every frame). */
.hero-slide.active { animation: heroWipe 1.35s cubic-bezier(.77,0,.18,1) both; }
.hero-slide.active > div { animation: heroWipeIn 1.35s cubic-bezier(.77,0,.18,1) both; }
@keyframes heroWipe { from { transform: translate3d(0, 100%, 0); } to { transform: translate3d(0, 0, 0); } }
@keyframes heroWipeIn { from { transform: translate3d(0, -100%, 0); } to { transform: translate3d(0, 0, 0); } }
.hero-slide.active::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; z-index: 5; pointer-events: none;
  background: linear-gradient(90deg, rgba(255,244,222,0), rgba(255,244,222,.95) 30%, rgba(255,244,222,.95) 70%, rgba(255,244,222,0));
  box-shadow: 0 0 22px 4px rgba(255,232,196,.55);
  animation: heroEdge 1.35s ease both;
}
@keyframes heroEdge { 0%, 78% { opacity: 1; } 100% { opacity: 0; } }
.hero-slide > div > img { scale: calc(1 + var(--sp, 0) * .07); transform-origin: 50% 62%; }
.hero-slide img { transform: scale(1.12); transform-origin: 50% 45%; }
.hero-slide.active img { transform: scale(1); transition: transform 7s cubic-bezier(.2,.65,.25,1); }
.hero-slide.leaving img { transform: scale(.985); filter: brightness(.78) saturate(.9); transition: transform 1.35s ease, filter 1.35s ease; }
.hero-slide:not(.active):not(.leaving) img { transition: none; }

.hero-meter {
  display: flex; align-items: center; gap: 14px; margin: 16px auto 0; width: min(78%, 360px);
  font: 600 11px/1 var(--font-body); letter-spacing: .14em; color: var(--color-text-soft);
}
.hm-line { flex: 1; height: 1px; background: rgba(60,48,32,.16); position: relative; overflow: hidden; }
.hm-line i { position: absolute; inset: 0; background: var(--color-brass, #a8844f); transform-origin: 0 50%; transform: scaleX(0); animation: hmFill 6.2s linear both; }
[dir="rtl"] .hm-line i { transform-origin: 100% 50%; }
@keyframes hmFill { to { transform: scaleX(1); } }

@media (prefers-reduced-motion: reduce) {
  .hero-slide.active, .hero-slide.active > div, .hero-slide.active::after { animation: none; }
  .hero-slide > div > img, .hero-slide img,
  .hero-slide.active img,
  .hero-slide.leaving img { transform: none; transition: none; filter: none; }
  .hm-line i { animation: none; transform: scaleX(1); }
}
.hero-slide-tag {
  position: absolute; bottom: 20px; left: 50%; z-index: 4;
  transform: translateX(-50%) translateY(6px);
  background: rgba(10,40,48,0.74); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  color: #fff; padding: 8px 15px; border-radius: var(--radius-pill); white-space: nowrap;
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  opacity: 0; transition: opacity .6s var(--ease) .2s, transform .6s var(--ease) .2s;
}
.hero-slide.active .hero-slide-tag { opacity: 1; transform: translateX(-50%) translateY(0); }
.hero-dots { position: absolute; bottom: 20px; inset-inline-end: 18px; z-index: 4; display: flex; gap: 7px; }
.hero-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.5); border: none; padding: 0; cursor: pointer; transition: all .35s var(--ease); }
.hero-dot.active { background: #fff; width: 22px; border-radius: 4px; }

/* The licence now lives inside the hero's eyebrow line instead of in its own
   element. Three placements were tried before this: floating on the photo,
   then a pill under the frame, then a plain line under the buttons — each one
   was a different answer to "where do we put this box", when the real problem
   was that it was a box at all. The eyebrow already existed to carry location
   and context, so the credential simply joins it and the extra element is
   gone. A small brass dot marks it as a credential rather than a label. */
.kicker-credential::before {
  content: ""; display: inline-block;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--color-brass);
  margin-inline-end: 9px;
  vertical-align: middle;
}

/* ================= Placeholder plaster imagery (no photo yet) ================= */
.ph {
  position: relative; width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center; text-align: center;
  background:
    radial-gradient(120% 140% at 15% 0%, rgba(255,255,255,0.55), transparent 55%),
    radial-gradient(120% 140% at 85% 100%, rgba(6,96,123,0.16), transparent 55%),
    linear-gradient(155deg, #EDE3CE 0%, #E4D8BE 45%, #D9CBAC 100%);
  color: var(--color-teal-800);
}
.ph.v2 { background: radial-gradient(120% 140% at 15% 0%, rgba(255,255,255,0.5), transparent 55%), radial-gradient(120% 140% at 85% 100%, rgba(173,138,80,0.18), transparent 55%), linear-gradient(155deg, #E7EEE9 0%, #DCE6E1 45%, #CFDCD6 100%); }
.ph.v3 { background: radial-gradient(120% 140% at 15% 0%, rgba(255,255,255,0.5), transparent 55%), radial-gradient(120% 140% at 85% 100%, rgba(6,96,123,0.22), transparent 55%), linear-gradient(155deg, #E4ECEE 0%, #D4E1E4 45%, #C3D6DA 100%); }
.ph .ph-inner { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 18px; }
.ph svg { opacity: 0.55; }
.ph-label { font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-teal-800); opacity: 0.75; max-width: 22ch; }

/* ================= Cards ================= */
.card {
  position: relative; overflow: hidden;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: 34px 28px 32px;
  min-height: 300px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-line-soft);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease);
  /* The four home-page service cards are links, so the anchor defaults have
     to be neutralised here rather than on a separate selector. */
  display: flex; flex-direction: column; text-decoration: none; color: inherit;
}
/* A brass rule drawn across the top edge on hover.
   It is scaled from the leading corner rather than faded in, so the gesture
   reads as a line being struck — the same act the rest of the site is built
   around — instead of a generic highlight appearing. Logical properties mean
   it draws from the right in Arabic without a second rule. */
.card::before {
  content: ""; position: absolute; top: 0; inset-inline: 0; height: 2px;
  background: linear-gradient(to right, var(--color-brass), var(--color-brass-light));
  transform: scaleX(0); transform-origin: left center;
  transition: transform .55s var(--ease);
}
[dir="rtl"] .card::before { transform-origin: right center; }
.card:hover::before, .card:focus-visible::before { transform: scaleX(1); }
/* A wash of warmth rising from the bottom, so the whole tile responds rather
   than just its edge. */
.card::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 42%, rgba(173,138,80,0.07) 100%);
  opacity: 0; transition: opacity .5s var(--ease);
}
.card:hover::after { opacity: 1; }
.card > * { position: relative; z-index: 1; }
.card:hover, a.card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-brass-tint);
}
.card:hover .card-icon {
  background: var(--color-teal); color: #fff;
  transform: translateY(-2px) rotate(-6deg);
}
/* The body copy sits at the foot of the tile so all four cards align along
   the bottom however long their titles run. */
.card .card-body { margin-top: auto; }
.card .card-icon {
  width: 50px; height: 50px; border-radius: 50%; flex: none;
  background: var(--color-teal-tint); color: var(--color-teal);
  display: flex; align-items: center; justify-content: center; margin-bottom: 20px;
  transition: background .45s var(--ease), color .45s var(--ease), transform .45s var(--ease);
}
.card .card-title { font-family: var(--font-heading); font-weight: 600; font-size: 19px; color: var(--color-ink); margin-bottom: 8px; }
.card .card-body { font-size: 14.5px; line-height: 1.65; color: var(--color-text); margin: 0; padding-top: 14px; }

/* ================= Medallion divider ================= */
.medallion-divider { display: flex; align-items: center; gap: 20px; margin: 0 auto clamp(44px, 5vh, 68px); }
.medallion-divider .line { flex: 1; height: 1px; background: var(--color-line); }
.medallion-divider svg { flex: none; opacity: 0.8; }

/* ================= Stat plate ================= */
/* ================= Plaster band =================
   One slim strip, and the ONLY place on the site where light follows the
   cursor. The lit frame is masked to a soft circle at the pointer, so the
   relief exists only where the light falls. */
.plaster-band {
  position: relative; overflow: hidden;
  border-radius: var(--radius-md);
  height: clamp(190px, 22vw, 280px);
  box-shadow: var(--shadow-sm);
  --px: 50%; --py: 50%;
  cursor: crosshair;
}
.plaster-band img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pb-lit {
  -webkit-mask-image: radial-gradient(circle 150px at var(--px) var(--py), #000 12%, rgba(0,0,0,.55) 42%, transparent 74%);
          mask-image: radial-gradient(circle 150px at var(--px) var(--py), #000 12%, rgba(0,0,0,.55) 42%, transparent 74%);
  transition: opacity .5s var(--ease);
}
.pb-hint {
  position: absolute; z-index: 2; left: 50%; bottom: 14px; transform: translateX(-50%);
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--color-ink); background: rgba(250,246,238,0.94);
  box-shadow: 0 1px 8px rgba(10,26,30,0.16);
  padding: 8px 16px; border-radius: var(--radius-pill);
  white-space: nowrap; transition: opacity .45s var(--ease);
}
.plaster-band.pb-active .pb-hint { opacity: 0; }
/* Reduced motion: show the relief plainly, no mask, no movement. */
.plaster-band.pb-static .pb-lit { -webkit-mask-image: none; mask-image: none; }
@media (max-width: 620px) { .pb-hint { font-size: 9.5px; letter-spacing: .1em; } }

.stat-plate {
  border-radius: var(--radius-lg);
  background: var(--color-teal-900);
  color: var(--color-text-on-dark);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.stat-plate-head {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding: 16px 26px; border-bottom: 1px solid rgba(243,236,221,0.14);
  font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700;
}
.stat-plate-head .sp-tag { margin-inline-start: auto; opacity: .7; font-weight: 600; }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); }
.stat-cell {
  padding: 30px 26px; border-inline-start: 1px solid rgba(243,236,221,0.14);
  opacity: 0; transform: translateY(16px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.stat-cell:first-child { border-inline-start: none; }
.stat-plate.in .stat-cell { opacity: 1; transform: none; }
.stat-plate.in .stat-cell:nth-child(1) { transition-delay: .05s; }
.stat-plate.in .stat-cell:nth-child(2) { transition-delay: .14s; }
.stat-plate.in .stat-cell:nth-child(3) { transition-delay: .23s; }
.stat-plate.in .stat-cell:nth-child(4) { transition-delay: .32s; }
.stat-no { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; color: var(--color-brass-light); }
.stat-val { font-family: var(--font-heading); font-weight: 600; font-size: 40px; margin-top: 8px; }
.stat-label { font-size: 13.5px; margin-top: 8px; font-weight: 600; }
.stat-remark { font-size: 11.5px; margin-top: 3px; color: var(--color-text-on-dark-soft); }

/* ================= Services teaser grid ================= */
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 26px; align-items: stretch; }
@media (max-width: 1100px) { .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px)  { .grid-4 { grid-template-columns: 1fr; grid-auto-rows: auto; } }
/* Project grids: fixed column counts per width (no orphan cards), and every
   row the same height so captions and tags never stagger the next row. */
.proj-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: clamp(20px, 2vw, 30px); }
@media (min-width: 1360px) { .proj-grid-all { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 980px)  { .proj-grid-all { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px)  { .proj-grid-featured { grid-template-columns: 1fr; grid-auto-rows: auto; } }
@media (max-width: 620px)  { .proj-grid-all { grid-template-columns: 1fr; grid-auto-rows: auto; } }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px,1fr)); gap: 26px; }
/* The header needs real air under it, or it reads as the first row of
   the grid rather than as a heading for it. */
.section-head { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 16px; margin-bottom: clamp(34px, 4.4vh, 56px); }
.section-head h2 { font-size: clamp(28px, 3.4vw, 42px); margin-top: 14px; }
.section-head-center { text-align: center; margin: 0 auto clamp(38px, 4.6vh, 58px); max-width: 640px; }

/* ================= Portfolio cards ================= */
.proj-card { text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: 13px; cursor: pointer; }
.proj-media { position: relative; border-radius: var(--radius-md); overflow: hidden; aspect-ratio: 4/3; box-shadow: var(--shadow-sm); transition: box-shadow .5s var(--ease); }
.proj-card:hover .proj-media { box-shadow: var(--shadow-md); }
.proj-media::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(10,40,48,0) 55%, rgba(10,40,48,0.55) 100%);
  opacity: 0; transition: opacity .35s var(--ease);
}
.proj-card:hover .proj-media::after { opacity: 1; }
.proj-media .zoom-inner { width: 100%; height: 100%; transition: transform .7s var(--ease); }
.proj-card:hover .zoom-inner { transform: scale(1.07); }
.proj-code { position: absolute; bottom: 14px; inset-inline-start: 14px; z-index: 2; font-family: var(--font-heading); font-weight: 600; font-size: 11px; letter-spacing: 0.06em; padding: 4px 10px; background: rgba(250,246,238,0.92); border-radius: var(--radius-pill); color: var(--color-ink); }
.proj-view {
  position: absolute; bottom: 14px; inset-inline-end: 14px; z-index: 2;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em; color: #fff;
  background: var(--color-teal); padding: 7px 13px; border-radius: var(--radius-pill);
  opacity: 0; transform: translateY(6px); transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.proj-view::after { content: "→"; }
[dir="rtl"] .proj-view::after { content: "←"; }
.proj-card:hover .proj-view { opacity: 1; transform: none; }
.proj-title { font-family: var(--font-heading); font-weight: 600; font-size: 18px; color: var(--color-ink); }
.proj-loc { font-size: 12.5px; color: var(--color-text-soft); }

/* Card-level photo slider — when a project has more than one gallery
   image its cover quietly auto-advances through them (soft crossfade,
   paused on hover), so "recent work" reads as a living set of photos
   rather than one static frame per project. */
.proj-slides { position: relative; width: 100%; height: 100%; }
.proj-slide { position: absolute; inset: 0; opacity: 0; transition: opacity .7s var(--ease); }
.proj-slide.active { opacity: 1; }
.proj-dots { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); z-index: 2; display: flex; gap: 5px; }
.proj-dot { width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,.55); transition: all .3s var(--ease); }
.proj-dot.active { background: #fff; width: 14px; border-radius: 3px; }

/* Capability-preview badge — used on Full Renovation cards/modal so a
   representative project reads as "this is the scope we're set up to
   deliver", not a claim of a specific renovation already completed. */
.tag-capability {
  background: transparent; border: 1px dashed var(--color-brass); color: #7A5F32;
  margin-inline-start: 6px;
}
.proj-modal-cap-note {
  display: flex; gap: 8px; align-items: flex-start;
  background: var(--color-brass-tint); border-radius: var(--radius-sm);
  padding: 9px 12px; font-size: 12px; line-height: 1.5; color: #6B532A;
  margin: 0 0 14px;
}
.proj-modal-cap-note svg { flex-shrink: 0; margin-top: 1px; }

/* ================= Project detail modal ================= */
.proj-modal-backdrop {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(10, 20, 22, 0.62); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center; padding: 22px;
  opacity: 0; pointer-events: none; transition: opacity .35s var(--ease);
}
.proj-modal-backdrop.open { opacity: 1; pointer-events: auto; }
body.proj-modal-lock { overflow: hidden; }
/* The dialog is a fixed frame, not a scrolling page.
   Previously the whole dialog scrolled, so opening a project put you at the
   top of a column you then had to read your way down — and how much you saw
   at once depended on which project you clicked. Now the frame is one size
   for every project: the picture fills its column, and only the text column
   can ever scroll, and only when a description genuinely runs long. */
.proj-modal {
  position: relative; width: 100%; max-width: 1040px;
  height: min(660px, calc(100vh - 44px));
  overflow: hidden;
  background: var(--color-surface); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg);
  transform: translateY(26px) scale(.97); opacity: 0; transition: transform .4s var(--ease), opacity .4s var(--ease);
}
.proj-modal-backdrop.open .proj-modal { transform: none; opacity: 1; }
.proj-modal-close {
  position: absolute; top: 16px; inset-inline-end: 16px; z-index: 3;
  width: 38px; height: 38px; border-radius: 50%; border: none;
  background: rgba(250,246,238,0.92); color: var(--color-ink);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-sm); transition: background .2s, transform .2s;
}
.proj-modal-close:hover { background: #fff; transform: rotate(90deg); }
/* The photo used to be the smaller of the two columns and sat in a domed
   arch frame — the decorative mount that belongs on the hero, not in a photo
   viewer, where it clipped the corners of the very images you opened the
   dialog to inspect. The media column is now the larger one, the frame is a
   plain rounded rectangle, and it runs edge-to-edge on its side of the
   dialog so the picture reads as the subject rather than a thumbnail. */
.proj-modal-grid {
  display: grid;
  grid-template-columns: minmax(320px, 1.06fr) minmax(360px, 1fr);
  gap: 0;
  align-items: stretch;
  height: 100%;
}
@media (max-width: 860px) {
  .proj-modal-grid { grid-template-columns: 1fr; grid-template-rows: minmax(0, 42%) minmax(0, 58%); }
}
.proj-modal-media { padding: 0; }
.proj-modal-media { min-height: 0; height: 100%; }
.proj-modal-media .arch-frame {
  box-shadow: none;
  height: 100%;
  aspect-ratio: auto;                    /* fill the column, don't force 4:3 */
  min-height: 0;
  border-radius: var(--radius-xl) 0 0 var(--radius-xl);
  background: #EDE6DA;
}
/* Fill the frame.
   `contain` showed the whole photograph but left pale bands above and below
   it on every project — the panel read as half-empty. Filling the column and
   accepting a crop is the right trade here: the media column was widened at
   the same time, so the crop is shallow and the subject stays centred. */
.proj-modal-media .pm-slide img,
.proj-modal-media .pm-slide > div > img { object-fit: cover !important; }
.proj-modal-media .arch-frame::before { display: none; }  /* drop the hero mount's inner hairline */
[dir="rtl"] .proj-modal-media .arch-frame { border-radius: 0 var(--radius-xl) var(--radius-xl) 0; }
@media (max-width: 860px) {
  .proj-modal-media .arch-frame,
  [dir="rtl"] .proj-modal-media .arch-frame {
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    aspect-ratio: 4/3; height: auto; min-height: 0;
  }
}
/* A soft scrim along the bottom so the counter and dots stay legible over a
   pale photo — previously they sat on bare image and vanished on light shots. */
.pm-slider::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 92px;
  background: linear-gradient(to top, rgba(10,26,30,0.55), transparent);
  pointer-events: none; z-index: 4;
}
/* Multi-photo slider inside the project modal — drag to browse several
   angles of the same project (a wide shot, then closer detail views),
   the way a listing site lets you swipe through a property's photos. */
.pm-slider { cursor: grab; }
.pm-slider:active { cursor: grabbing; }
.pm-track { position: absolute; inset: 0; display: flex; direction: ltr; height: 100%; transition: transform .45s var(--ease); touch-action: pan-y; }
.pm-slide { flex: 0 0 100%; width: 100%; height: 100%; position: relative; }
.pm-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
  width: 38px; height: 38px; border-radius: 50%; border: none;
  background: rgba(250,246,238,0.92); color: var(--color-ink);
  display: none; align-items: center; justify-content: center;
  box-shadow: var(--shadow-sm); transition: background .2s, transform .2s;
}
.pm-arrow:hover { background: #fff; transform: translateY(-50%) scale(1.08); }
.pm-prev { inset-inline-start: 14px; }
.pm-next { inset-inline-end: 14px; }
[dir="rtl"] .pm-arrow svg { transform: scaleX(-1); }
.pm-dots { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); z-index: 5; display: flex; gap: 6px; }
.pm-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.6); border: none; padding: 0; cursor: pointer; box-shadow: 0 0 0 1px rgba(10,40,48,0.25); transition: all .3s var(--ease); }
.pm-dot.active { background: #fff; width: 18px; border-radius: 4px; }
/* The counter was pinned top-right, where it collided with the close button
   and sat on top of the picture. It now pairs with the dots on the bottom
   rail: count on the left, dots centred — the convention every photo viewer
   uses, and it leaves the image itself uncovered. */
.pm-count {
  position: absolute; bottom: 16px; inset-inline-start: 16px; z-index: 6; display: none;
  color: #fff; font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.08em; font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 3px rgba(0,0,0,.5);
}
.pm-dots { z-index: 6; }
.pm-arrow { width: 42px; height: 42px; z-index: 7; }

.proj-modal-body {
  padding: 32px 34px 30px; display: flex; flex-direction: column;
  min-height: 0; overflow-y: auto; overscroll-behavior: contain;
}
/* The reference number and the discipline chip share one baseline row. */
.proj-modal-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-inline-end: 44px; }
[dir="rtl"] .proj-modal-body { padding: 34px 36px 36px; }
@media (max-width: 860px) { .proj-modal-body, [dir="rtl"] .proj-modal-body { padding: 24px 26px 30px; } }
.proj-modal-code { font-family: var(--font-heading); font-size: 11.5px; letter-spacing: 0.1em; color: var(--color-text-soft); font-weight: 600; }
.proj-modal-title { font-size: clamp(22px, 2.3vw, 27px); margin: 12px 0 5px; }
.proj-modal-loc { font-size: 13px; color: var(--color-text-soft); margin-bottom: 14px; }
.proj-modal-desc { font-size: 14.5px; line-height: 1.62; color: var(--color-text); margin-bottom: 16px; }
.proj-modal-sub { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-teal-700); margin-bottom: 9px; }
/* The buttons are pushed to the bottom of the column so every project's
   dialog ends at the same place, however long its description is. */
.proj-modal-actions { display: flex; flex-wrap: wrap; gap: 11px; margin-top: auto; padding-top: 20px; }

/* ================= Filter segmented control ================= */
.seg { display: inline-flex; flex-wrap: wrap; gap: 6px; background: var(--color-bg-soft); padding: 5px; border-radius: var(--radius-pill); }
.seg label { position: relative; }
.seg input { position: absolute; opacity: 0; inset: 0; cursor: pointer; margin:0; }
.seg span { display: inline-flex; padding: 9px 16px; border-radius: var(--radius-pill); font-size: 12.5px; font-weight: 700; color: var(--color-text); transition: background .2s, color .2s; white-space: nowrap; }
.seg input:checked + span { background: var(--color-teal); color: #fff; }

/* ================= Before / After ================= */
.ba-figure { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.ba-frame {
  position: relative; aspect-ratio: 4/3; overflow: hidden; touch-action: none; user-select: none;
  border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
}
.ba-frame .ba-layer { position: absolute; inset: 0; }
/* The layered before/after photos must never themselves catch the pointer —
   otherwise the browser starts its own native "drag this image" gesture
   instead of moving our slider. All dragging is handled by the handle/line. */
.ba-frame img { pointer-events: none; -webkit-user-drag: none; user-drag: none; -webkit-user-select: none; user-select: none; }
/* Both labels get the SAME treatment.
   A filled teal pill on AFTER against a plain outline on BEFORE read as two
   different kinds of object — one looked like a live control, the other like
   a caption — which is exactly the confusion to avoid on a comparison where
   the two halves must feel equal. Identical pills, mirrored positions: the
   only thing that distinguishes them is the word. */
.ba-tag {
  position: absolute; top: 14px; z-index: 2;
  background: rgba(250,246,238,0.93);
  color: var(--color-ink);
  border: none;
  box-shadow: 0 1px 6px rgba(10,26,30,0.18);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}
.ba-tag.before { inset-inline-start: 14px; }
.ba-tag.after  { inset-inline-end: 14px; }
/* Only the middle divider line (and its handle) should start a drag — not
   a click anywhere in the photo. The divider keeps a wider invisible hit
   zone either side of the visible 3px line so it's actually grabbable. */
.ba-divider {
  position: absolute; top: 0; bottom: 0; width: 3px; background: #fff; transform: translateX(-50%);
  pointer-events: auto; cursor: ew-resize; box-shadow: 0 0 0 1px rgba(0,0,0,0.15);
}
.ba-divider::before { content: ""; position: absolute; top: 0; bottom: 0; left: -12px; right: -12px; }
/* Now a real <button> (so it is tabbable and arrow-key driven), which means
   the browser's default button chrome has to be cleared explicitly. */
.ba-handle {
  position: absolute; top: 50%; width: 42px; height: 42px; border-radius: 50%; transform: translate(-50%,-50%);
  background: var(--color-teal); color: #fff; display: flex; align-items: center; justify-content: center;
  pointer-events: auto; cursor: ew-resize; box-shadow: var(--shadow-md);
  border: none; padding: 0; margin: 0; font: inherit; -webkit-appearance: none; appearance: none;
  transition: background .2s var(--ease), box-shadow .2s var(--ease);
  touch-action: none; /* let the pointer handler own horizontal drags on touch */
}
.ba-handle:hover { background: var(--color-teal-700); }
.ba-caption { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.ba-caption .cap { font-family: var(--font-heading); font-weight: 600; font-size: 15.5px; color: var(--color-ink); }
.ba-caption .hint { font-size: 12px; color: var(--color-text-soft); }

/* ================= Process steps ================= */
.process-row { position: relative; display: grid; grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); gap: 30px; }
/* The rule used to be one line drawn across the whole row, so it started in
   mid-air to the left of step 01 and ran on past step 05 to the right edge —
   a timeline that appeared to continue after the last step. It is now drawn
   per step, from the edge of that step's circle to the next one, and the
   last step draws nothing. */
.process-step { display: flex; flex-direction: column; gap: 12px; position: relative; }
.process-step::after {
  content: ""; position: absolute; top: 23px; height: 1px;
  inset-inline-start: 58px; inset-inline-end: -30px;
  background: var(--color-line);
}
.process-step:last-child::after { display: none; }
@media (max-width: 620px) { .process-step::after { display: none; } }
.process-num {
  width: 46px; height: 46px; border-radius: 50%; background: var(--color-surface); border: 1.5px solid var(--color-teal);
  display: flex; align-items: center; justify-content: center; font-family: var(--font-heading); font-weight: 600; font-size: 16px; color: var(--color-teal-700); flex: none;
}
.process-title { font-family: var(--font-heading); font-weight: 600; font-size: 16.5px; }
.process-body { font-size: 13.5px; line-height: 1.6; color: var(--color-text); margin: 0; }

/* ================= Quote ================= */
.pull-quote { text-align: center; position: relative; }
.pull-quote blockquote { font-size: clamp(23px, 2.7vw, 34px); font-style: italic; font-weight: 500; line-height: 1.5; max-width: 34ch; margin: 0 auto; }
.pull-quote .attr { margin-top: 22px; font-size: 13.5px; color: var(--color-text-soft); font-weight: 600; }
.pull-quote .qmark { font-family: var(--font-heading); font-size: 120px; color: var(--color-brass-light); opacity: .55; line-height: 0; display: block; margin-bottom: -6px; }

/* ---------- Rotating quotes ----------
   The stage height is fixed in JS to the tallest quote in the set, so a short
   quote following a long one can't make everything below it jump. Slides are
   stacked and cross-faded rather than translated: a horizontal slide would
   fight the centred text alignment and read as a banner ad. */
.quote-rotator { text-align: center; position: relative; }
.quote-rotator .qmark {
  font-family: var(--font-heading); font-size: 120px; color: var(--color-brass-light);
  opacity: .55; line-height: 0; display: block; margin-bottom: -6px;
}
.quote-stage { position: relative; transition: height .5s var(--ease); }
.quote-slide {
  position: absolute; inset: 0; margin: 0;
  opacity: 0; transform: translateY(10px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  pointer-events: none;
}
.quote-slide.active { opacity: 1; transform: none; pointer-events: auto; }
/* used only while JS measures each slide's natural height */
.quote-slide.measuring { position: static; opacity: 0; transform: none; transition: none; }
.quote-slide blockquote {
  font-size: clamp(23px, 2.7vw, 34px); font-style: italic; font-weight: 500;
  line-height: 1.5; max-width: 34ch; margin: 0 auto;
}
.quote-slide .attr { margin-top: 22px; font-size: 13.5px; color: var(--color-text-soft); font-weight: 600; }
.quote-dots { display: flex; justify-content: center; gap: 8px; margin-top: 30px; }
.quote-dot {
  width: 7px; height: 7px; padding: 0; border: none; border-radius: 50%;
  background: var(--color-line); cursor: pointer;
  transition: background .3s var(--ease), width .3s var(--ease);
}
.quote-dot.active { background: var(--color-brass); width: 22px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) {
  .quote-slide { transition: opacity .01s; transform: none; }
  .quote-stage { transition: none; }
}

/* ---------- Shared slow zoom for framed stills ----------
   The same quiet drift the hero uses, exposed as a class so any framed photo
   on the site can carry it. Applied to the four service frames so those
   sections stop reading as flat screenshots. */
/* ---------- Service media: still → making-of clip ----------
   Two stacked slides cross-fading inside the arch frame. The fade is longer
   than the card sliders (1.1s) because one side of it is moving footage —
   a quick cut from a static photo into motion reads as a glitch. */
.frame-video {
  width: 100%; height: 100%; object-fit: cover;
  display: block; position: absolute; inset: 0;
  background: var(--color-bg-soft);
}
.arch-frame.has-video { position: relative; }
.svc-slide {
  position: absolute; inset: 0; opacity: 0;
  transition: opacity 1.1s var(--ease);
  pointer-events: none;
}
.svc-slide.active { opacity: 1; pointer-events: auto; }
.svc-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.svc-dots {
  position: absolute; bottom: 18px; inset-inline-end: 18px; z-index: 4;
  display: flex; gap: 7px;
}
.svc-dot {
  width: 7px; height: 7px; padding: 0; border: none; border-radius: 50%;
  background: rgba(255,255,255,.55); cursor: pointer;
  transition: background .3s var(--ease), width .3s var(--ease);
}
.svc-dot.active { background: #fff; width: 20px; border-radius: 4px; }

.zoom-drift img { animation: erbSlowZoom 22s ease-in-out infinite alternate; will-change: transform; }
@keyframes erbSlowZoom {
  from { transform: scale(1); }
  to   { transform: scale(1.07); }
}
@media (prefers-reduced-motion: reduce) {
  .zoom-drift img { animation: none; }
}

/* ================= Dark CTA band ================= */
/* One step lighter than the footer beneath it. Both are dark, but the tonal
   step plus the hairline reads as a designed two-part closing zone instead
   of one flat slab. */
.cta-band {
  position: relative; overflow: hidden;
  background: var(--color-teal-900); padding: 76px 0; color: var(--color-text-on-dark);
}
/* A slow-breathing brass glow behind the closing call to action — the
   last thing a visitor sees before the footer, so it earns a bit more
   presence than a flat panel. */
.cta-band::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  width: 900px; height: 900px; border-radius: 50%;
  inset-inline-end: -420px; top: 50%; transform: translateY(-50%);
  background: radial-gradient(circle, rgba(200,171,120,0.16), transparent 62%);
  animation: erbGlowBreathe 9s ease-in-out infinite;
}
@keyframes erbGlowBreathe { 0%,100% { opacity: .7; transform: translateY(-50%) scale(1); } 50% { opacity: 1; transform: translateY(-50%) scale(1.08); } }
@media (prefers-reduced-motion: reduce) { .cta-band::before { animation: none; } }
.cta-band-inner { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: center; gap: 30px; flex-wrap: wrap; }
.cta-band h2 { color: var(--color-text-on-dark); font-size: clamp(27px,3.3vw,40px); margin-bottom: 10px; }
.cta-band p { max-width: 46ch; color: var(--color-text-on-dark-soft); font-size: 15px; line-height: 1.65; }
.kicker-dark { color: var(--color-brass-light); margin-bottom: 12px; }
.kicker-dark::before { background: var(--color-brass-light); }

/* ================= Footer =================
   The footer used to be `background: var(--color-bg)` — the exact same value
   as the page itself — divided from the last content section by a single
   hairline. On every page except the home page the closing section was also
   that colour, so the bottom of the site read as one undifferentiated wash
   and the footer looked like content that had lost its styling.

   It is now the darkest surface in the system. That does three things at
   once: it ends every page on a deliberate, weighted note; it makes the
   footer unmistakably a different *kind* of zone from the content above it;
   and it removes the adjacency problem entirely, on all five pages, without
   having to hand-tune each one. */
/* Back to light — and it is safe now for the reason it wasn't before.
   The original problem was that the last CONTENT section and the footer were
   both the page background colour. That is fixed at the source: every page
   now ends with the dark .cta-band, so the sequence is always
   light content → dark band → light footer. Making the footer dark as well
   solved the adjacency by removing the contrast entirely — which just moved
   the problem, as the band and footer then read as one slab. Light footer
   against the dark band is the correct answer. */
.site-footer {
  background: var(--color-bg);
  color: var(--color-text);
  padding: 66px 0 26px;
  border-top: none;
}
.footer-grid { display: flex; flex-wrap: wrap; gap: 44px; justify-content: space-between; }
.footer-brand { max-width: 320px; display: flex; flex-direction: column; gap: 16px; }
.footer-brand img { height: 48px; width: auto; align-self: flex-start; flex: none; }
.footer-brand p { font-size: 13px; line-height: 1.65; color: var(--color-text-soft); }
.footer-col { display: flex; flex-direction: column; gap: 10px; }
.footer-col .col-head { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-teal-700); font-weight: 700; margin-bottom: 2px; }
.footer-col a, .footer-col span { font-size: 13.5px; color: var(--color-text); text-decoration: none; transition: color .2s var(--ease); }
.footer-col a:hover { color: var(--color-teal-700); }
.footer-bottom {
  max-width: var(--wrap); margin: 34px auto 0; padding: 20px var(--edge) 0;
  border-top: 1px solid var(--color-line);
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between;
  font-size: 12px; color: var(--color-text-soft);
}

/* ================= Forms ================= */
.field { display: flex; flex-direction: column; gap: 7px; }
.field label { font-size: 12.5px; font-weight: 700; color: var(--color-ink); letter-spacing: 0.02em; }
.field .input, .field select, .field textarea {
  font-family: var(--font-body); font-size: 14.5px; color: var(--color-ink);
  border: 1.5px solid var(--color-line); border-radius: var(--radius-md);
  padding: 13px 15px; background: var(--color-surface); transition: border-color .2s, box-shadow .2s;
  width: 100%;
}

/* The dropdowns were using the operating system's own arrow.
   That arrow is drawn hard against the inside edge of the control with no
   relationship to our 15px padding, so it sat noticeably tighter to the
   border than every other element on the form — and it looked different on
   Windows, on a Mac and on a phone, which is the opposite of a considered
   design. It is now our own chevron, inset by the same 15px as the text,
   in the brand teal. Logical properties put it on the left in Arabic
   without a second rule. */
.field select, .field select.input {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2306607B' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 15px center;
  background-size: 14px 14px;
  /* Room for the arrow so a long option can never run underneath it. */
  padding-inline-end: 42px;
  cursor: pointer;
}
[dir="rtl"] .field select, [dir="rtl"] .field select.input { background-position: left 15px center; }
/* Edge/IE draw their own arrow on top of ours unless this is cleared. */
.field select::-ms-expand { display: none; }
.field select:hover { border-color: var(--color-teal-tint-2); }
.field .input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--color-teal); box-shadow: 0 0 0 4px var(--color-teal-tint);
}
.field .err { font-size: 12px; color: var(--color-error); }
.field .input.has-err, .field select.has-err { border-color: var(--color-error); }
.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: 18px; }

/* ================= Contact info plate ================= */
.info-plate { border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-sm); border: 1px solid var(--color-line-soft); overflow: hidden; }
.info-plate-head { display: flex; align-items: center; gap: 10px; padding: 16px 22px; border-bottom: 1px solid var(--color-line); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; }
.info-row { display: flex; justify-content: space-between; gap: 10px; padding: 15px 22px; border-bottom: 1px solid var(--color-line-soft); font-size: 14px; }
.info-row:last-child { border-bottom: none; }
.info-row .k { color: var(--color-text-soft); display:flex; align-items:center; gap:8px; }
.info-row .v { font-weight: 700; color: var(--color-ink); text-align: end; }

/* ================= Success card ================= */
.success-card { padding: 48px 34px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.success-icon { width: 58px; height: 58px; border-radius: 50%; background: var(--color-teal-tint); color: var(--color-teal); display: flex; align-items: center; justify-content: center; }

/* ================= Reveal / motion ================= */
/* Scroll-reveal is opt-in via the `js` class that the inline snippet in each
   <head> adds. Previously .reveal set opacity:0 unconditionally, so if the
   script failed to load — a bad deploy, a blocked file, JS switched off —
   every revealed section on the site stayed invisible forever and the page
   looked broken with no way to tell why. Hiding content should always be
   conditional on the thing that will later reveal it actually being alive. */
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }
.fade-up { animation: erbFadeUp .7s var(--ease) both; }
@keyframes erbFadeUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

/* ================= Page hero (inner pages) ================= */
/* The masthead is now a two-column measure.
   Every inner page opened with a headline on the left and nothing at all on
   the right — a third of the first screen was empty on a wide monitor, which
   is the single biggest reason these pages felt unfinished on arrival. The
   intro paragraph moves up beside the headline and is baseline-aligned to it,
   so the two blocks read as one masthead rather than as two stacked rows. */
.page-head { padding: clamp(54px, 6.5vh, 84px) 0 clamp(18px, 3vh, 34px); position: relative; overflow: hidden; }
.page-head > .wrap {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  column-gap: clamp(40px, 5.5vw, 90px);
  align-items: end;
}
.page-head .kicker { grid-column: 1; grid-row: 1; }
.page-head h1 { grid-column: 1; grid-row: 2; font-size: clamp(32px, 4.4vw, 54px); font-weight: 500; margin: 16px 0 0; max-width: 18ch; }
.page-head .lead {
  grid-column: 2; grid-row: 2; align-self: end;
  font-size: 16.5px; line-height: 1.72; color: var(--color-text);
  max-width: 52ch; padding-bottom: 10px;
  border-inline-start: 2px solid var(--color-brass);
  padding-inline-start: 22px;
}
.page-head-meta {
  grid-column: 1 / -1; grid-row: 3;
  display: flex; flex-wrap: wrap; gap: 10px 26px;
  margin-top: clamp(28px, 3.6vh, 44px); padding-top: 20px;
  border-top: 1px solid var(--color-line-soft);
  font-size: 12.5px; color: var(--color-text-soft);
}
.page-head-meta strong { font-weight: 600; color: var(--color-ink); }
@media (max-width: 900px) {
  .page-head > .wrap { grid-template-columns: 1fr; }
  .page-head .kicker, .page-head h1, .page-head .lead { grid-column: 1; }
  .page-head h1 { grid-row: 2; max-width: 24ch; }
  .page-head .lead { grid-row: 3; margin-top: 22px; padding-bottom: 0; max-width: none; }
  .page-head-meta { grid-row: 4; }
}
/* Same rotating atelier motif as the homepage hero, scaled down for the
   shorter inner-page headers — ties every page back to one visual system
   instead of the decoration only living on the homepage. */
.page-head-medallion { top: -130px; inset-inline-end: -110px; opacity: 0.05; }

/* ================= Misc utility ================= */
.center { text-align: center; }
.mt-8 { margin-top: 8px; } .mt-12{margin-top:12px;} .mt-16{margin-top:16px;} .mt-24{margin-top:24px;} .mt-32{margin-top:32px;} .mt-40{margin-top:40px;}
.text-soft { color: var(--color-text-soft); }
/* Near-equal columns with a generous gutter. The old 0.85 / 1.15 split made
   the text column noticeably narrow beside the media, which is what left a
   band of dead space down the outer edge of every service row. */
.two-col { display: grid; grid-template-columns: minmax(320px, 1fr) minmax(340px, 1.05fr); gap: clamp(40px, 5vw, 78px); align-items: center; }
.two-col.rev { grid-template-columns: minmax(340px, 1.05fr) minmax(320px, 1fr); }
@media (max-width: 900px) {
  .two-col, .two-col.rev { grid-template-columns: 1fr; gap: 34px; }
  /* On one column the media should lead, whichever order it sits in. */
  .two-col.rev > *:first-child { order: -1; }
}
@media (max-width: 880px) { .two-col, .two-col.rev { grid-template-columns: 1fr; } }
.bg-soft { background: var(--color-bg-soft); }
.list-check { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.list-check li { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; line-height: 1.55; }
.list-check svg { flex: none; margin-top: 3px; color: var(--color-teal); }
.service-label { margin-bottom: 14px; }


/* ================= About — stacked workshop frames ================= */
.about-stack { position: relative; }
.about-inset {
  position: absolute; inset-inline-end: -18px; bottom: -26px;
  width: 46%; aspect-ratio: 4/3; overflow: hidden;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md), 0 0 0 7px var(--color-bg);
}
@media (max-width: 860px) {
  /* Overlapping frames need margin to overlap into. On a narrow column there
     isn't any, so the two simply stack. */
  .about-inset { position: static; width: 100%; margin-top: 16px; box-shadow: var(--shadow-sm); }
}

/* ================= About — commitment strip ================= */
.promise-strip {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: var(--color-line-soft);
  border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.promise {
  background: var(--color-surface);
  padding: 34px 26px 30px;
  display: flex; flex-direction: column; gap: 10px;
}
.promise-num {
  font-family: var(--font-heading); font-weight: 600;
  font-size: clamp(34px, 4vw, 46px); line-height: 1;
  color: var(--color-teal); letter-spacing: -0.02em;
}
.promise-num em { font-style: normal; font-size: 0.5em; margin-inline-start: 2px; color: var(--color-brass); }
.promise-label { font-size: 13.5px; line-height: 1.5; color: var(--color-text); }
@media (max-width: 860px) { .promise-strip { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .promise-strip { grid-template-columns: 1fr; } }


/* ================= About — full-bleed craft band ================= */
.craft-band {
  position: relative; isolation: isolate;
  min-height: clamp(360px, 52vh, 520px);
  display: flex; align-items: center;
  margin: clamp(30px, 5vh, 60px) 0;
  overflow: hidden;
}
.craft-band-media { position: absolute; inset: 0; z-index: -2; }
.craft-band-media img { width: 100%; height: 100%; object-fit: cover; }
/* The photograph is a ground for type, so it is darkened deliberately rather
   than left to chance — white text over an unknown image is a coin toss. */
.craft-band::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, rgba(8,32,40,0.88) 0%, rgba(8,32,40,0.72) 46%, rgba(8,32,40,0.42) 100%);
}
.craft-band-inner {
  max-width: var(--wrap); width: 100%;
  margin: 0 auto; padding: 54px var(--edge);
}
.craft-band-line {
  font-family: var(--font-heading); font-weight: 400; font-style: italic;
  font-size: clamp(21px, 2.6vw, 33px); line-height: 1.34;
  color: var(--color-text-on-dark);
  max-width: 20ch; margin-top: 18px;
  text-wrap: balance;
}
@media (min-width: 900px) { .craft-band-line { max-width: 26ch; } }
[lang="ar"] .craft-band-line, .lang-ar .craft-band-line { font-style: normal; }

/* ================= About — capability chips ================= */
.chip-set { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; max-width: 940px; margin: 0 auto; }
.chip {
  font-size: 13.5px; font-weight: 500; line-height: 1;
  padding: 11px 17px; border-radius: var(--radius-pill);
  background: var(--color-surface); color: var(--color-text);
  border: 1px solid var(--color-line-soft);
  box-shadow: var(--shadow-sm);
  transition: border-color .3s var(--ease), transform .3s var(--ease), color .3s var(--ease);
}
.chip:hover { border-color: var(--color-teal); color: var(--color-teal-700); transform: translateY(-2px); }
.areas-line {
  display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap; gap: 14px;
  margin-top: clamp(34px, 4vh, 52px); padding-top: 26px;
  border-top: 1px solid var(--color-line-soft);
  max-width: 940px; margin-inline: auto;
}
.areas-label { font-size: 11px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--color-text-soft); }
.areas-value { font-family: var(--font-heading); font-size: 17px; color: var(--color-ink); }

/* The spam honeypot: present in the markup for bots, invisible and
   unreachable for people and screen readers. */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }


/* ================= Tap targets =================
   The slider dots are deliberately small — a big dot would compete with the
   photograph it sits on. But a 6px dot is far below the ~44px that a finger
   can reliably hit, so on a phone people miss and think the control is
   broken. The dot stays the size it is; an invisible pad around it does the
   catching. This is why the dots are laid out with a negative margin — the
   pad must not push them apart visually. */
.pm-dot, .svc-dot, .quote-dot, .hero-dot {
  position: relative;
}
.pm-dot::after, .svc-dot::after, .quote-dot::after, .hero-dot::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 34px; height: 34px; transform: translate(-50%, -50%);
}
/* Keep the visual gap between dots unchanged despite the larger pads. */
.pm-dots, .svc-dots, .quote-dots, .hero-dots { position: relative; z-index: 6; }

/* The close button and the slider arrows are already 38–42px, which clears
   the threshold. The language switch and burger are checked below. */
.lang-switch, .nav-burger { min-height: 40px; min-width: 40px; }


/* ====================================================================
   v2 (Oct 2026) — MOBILE, CONVERSION & ADMIN-DRIVEN CONTENT LAYER
   Everything below was added in one pass and is kept together so it is
   easy to find. It fixes the phone layout (header, drawer, spacing), adds
   the always-reachable WhatsApp / Call / Quote bar, the working quote form
   with photo upload, footer contact links and social icons.
   ==================================================================== */

/* WhatsApp button — the brand-safe green used across the site. */
.btn-wa { background: #1f9d55; color: #fff; box-shadow: 0 8px 22px rgba(31,157,85,.22); }
.btn-wa:hover { background: #188a49; transform: translateY(-2px); }
.btn-wa svg { flex: none; }

/* ---------------- Header on phones: one clean row ---------------- */
.nav-burger { position: relative; width: 44px; height: 44px; padding: 0; align-items: center; justify-content: center; color: var(--color-ink); background: var(--color-surface); }
.nav-burger svg { transition: opacity .2s; }
.nav-burger::before, .nav-burger::after {
  content: ""; position: absolute; left: 13px; right: 13px; height: 2px; border-radius: 2px; background: currentColor;
  opacity: 0; transition: transform .3s var(--ease), opacity .2s;
}
.nav-burger.is-open svg { opacity: 0; }
.nav-burger.is-open::before { opacity: 1; transform: rotate(45deg); }
.nav-burger.is-open::after { opacity: 1; transform: rotate(-45deg); }

@media (max-width: 860px) {
  .site-nav { padding: 10px var(--edge); gap: 12px; flex-wrap: nowrap; }
  .site-nav.scrolled { padding-top: 8px; padding-bottom: 8px; }
  .site-nav .brand img { height: 36px; }
  .site-nav.scrolled .brand img { height: 32px; }
  /* The language switch and the quote button move into the menu panel and
     the bottom bar, so the header never wraps onto two lines. */
  .nav-right > .lang-switch, .nav-right > .btn-primary { display: none; }
}

/* ---------------- Mobile menu panel ---------------- */
.mobile-menu { display: none; }
@media (max-width: 860px) {
  .mobile-menu {
    display: flex; flex-direction: column; gap: 22px;
    position: absolute; left: 0; right: 0; top: 100%;
    height: calc(100vh - 64px); height: calc(100dvh - 64px); overflow-y: auto; overscroll-behavior: contain;
    margin: 0; padding: 14px var(--edge) calc(28px + env(safe-area-inset-bottom));
    background: var(--color-bg); border-top: 1px solid var(--color-line); box-shadow: 0 24px 40px rgba(35,28,18,.14);
    opacity: 0; visibility: hidden; transform: translateY(-10px);
    transition: opacity .28s var(--ease), transform .28s var(--ease), visibility 0s .28s;
  }
  .mobile-menu.open { opacity: 1; visibility: visible; transform: none; transition: opacity .28s var(--ease), transform .28s var(--ease); }
  body.menu-open { overflow: hidden; }
  .mm-links { display: flex; flex-direction: column; }
  .mm-links a {
    font-family: var(--font-heading); font-size: 23px; font-weight: 500; color: var(--color-ink); text-decoration: none;
    padding: 13px 2px; border-bottom: 1px solid var(--color-line-soft); display: flex; align-items: center; justify-content: space-between;
  }
  .mm-links a::after { content: "→"; font-family: var(--font-body); font-size: 16px; color: var(--color-brass); }
  [dir="rtl"] .mm-links a::after { content: "←"; }
  .mm-links a[aria-current="page"] { color: var(--color-teal); }
  .mm-actions { display: flex; flex-direction: column; gap: 10px; }
  .mm-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 14px; }
  .mm-foot a { color: var(--color-text); font-weight: 600; text-decoration: none; }
  .mm-lang { min-width: 108px; }
}

/* ---------------- Bottom action bar (phones) ---------------- */
.m-actions { display: none; }
@media (max-width: 860px) {
  body.has-m-actions { padding-bottom: calc(74px + env(safe-area-inset-bottom)); }
  .m-actions {
    display: grid; grid-template-columns: 1.15fr 0.85fr 1.25fr; gap: 8px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 120;
    padding: 9px 10px calc(9px + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--color-bg) 94%, transparent);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border-top: 1px solid var(--color-line); box-shadow: 0 -8px 24px rgba(35,28,18,.08);
    transition: transform .3s var(--ease);
  }
  .m-act {
    display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 48px; border-radius: 999px;
    font-weight: 800; font-size: 14px; text-decoration: none; letter-spacing: .01em;
  }
  .m-wa { background: #1f9d55; color: #fff; }
  .m-call { background: var(--color-surface); color: var(--color-ink); border: 1px solid var(--color-line); }
  .m-quote { background: var(--color-teal); color: #fff; }
  body.menu-open .m-actions, body.proj-modal-lock .m-actions, body:has(.field .input:focus) .m-actions { transform: translateY(120%); }
}

/* ---------------- Phone typography & spacing polish ---------------- */
@media (max-width: 620px) {
  .kicker { white-space: normal; letter-spacing: .13em; line-height: 1.5; }
  .hero { padding-top: 18px; }
  .hero-grid { gap: 30px; padding-bottom: 56px; }
  .hero h1 { font-size: clamp(34px, 10.4vw, 44px); }
  .hero-sub { font-size: 16px; line-height: 1.7; margin-bottom: 24px; }
  .hero-actions { gap: 10px; }
  .hero-actions .btn { flex: 1 1 100%; padding: 15px 18px; }
  .section-head { margin-bottom: 26px; }
  .section-head h2 { font-size: clamp(26px, 7.6vw, 32px); }
  .section-head .btn-ghost { padding-inline: 0; }
  .grid-4, .grid-2, .proj-grid { gap: 18px; }
  .wrap { padding-left: 20px; padding-right: 20px; }
  /* Forms: 16px text stops iPhones zooming the page when a field is tapped. */
  .field .input, .field select, .field textarea { font-size: 16px; }
  .cta-band-inner { gap: 22px; }
  .cta-band-inner .btn { width: 100%; }
  .footer-grid { gap: 30px; }
  .footer-bottom { flex-direction: column; gap: 6px; }
}

/* The plaster band's hint pill could run off both edges on a narrow phone. */
@media (max-width: 620px) {
  .pb-hint { white-space: normal; width: max-content; max-width: calc(100% - 28px); text-align: center; line-height: 1.4; padding: 7px 14px; }
}
.plaster-band.pb-tilt .pb-hint { opacity: 1; }
.pb-enable {
  position: absolute; z-index: 3; left: 50%; top: 50%; transform: translate(-50%, -50%);
  border: 0; border-radius: 999px; padding: 12px 20px; font: 800 13px var(--font-body); letter-spacing: .04em;
  background: var(--color-teal); color: #fff; box-shadow: 0 10px 30px rgba(6,96,123,.35);
}

/* ---------------- Footer ---------------- */
.footer-col a { overflow-wrap: anywhere; }
.footer-social { display: flex; gap: 8px; margin-top: 4px; }
.footer-social[hidden] { display: none; }
.social-link {
  width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--color-surface); border: 1px solid var(--color-line); color: var(--color-teal-700) !important;
  transition: transform .2s var(--ease), border-color .2s, background-color .2s;
}
.social-link:hover { transform: translateY(-2px); border-color: var(--color-teal); background: var(--color-teal-tint); }

/* ---------------- Contact page ---------------- */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(280px, 1fr); gap: 56px; align-items: start; }
@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; gap: 36px; }
  /* On a phone the fastest route (WhatsApp) comes first, then the form. */
  .contact-side { order: -1; }
  .contact-side .info-plate, .contact-side > div:last-child { display: none; }
}
.contact-side { display: flex; flex-direction: column; gap: 22px; }
.wa-card {
  display: flex; align-items: center; gap: 16px; padding: 18px 20px; border-radius: var(--radius-lg);
  background: #1f9d55; color: #fff; text-decoration: none; box-shadow: 0 14px 30px rgba(31,157,85,.22);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.wa-card:hover { transform: translateY(-2px); box-shadow: 0 18px 38px rgba(31,157,85,.3); }
.wa-card-icon { width: 50px; height: 50px; border-radius: 50%; background: rgba(255,255,255,.16); display: flex; align-items: center; justify-content: center; flex: none; }
.wa-card strong { display: block; font-size: 16px; }
.wa-card small { display: block; font-size: 13px; opacity: .9; margin-top: 2px; line-height: 1.45; }
.info-row a.v { text-decoration: none; }
.info-row a.v:hover { color: var(--color-teal-700); }
.lbl { font-size: 12.5px; font-weight: 700; color: var(--color-ink); letter-spacing: 0.02em; }
.photo-drop {
  display: flex; align-items: center; gap: 14px; padding: 16px 18px; cursor: pointer;
  border: 1.5px dashed rgba(6,96,123,.35); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-teal);
  transition: background-color .2s, border-color .2s;
}
.photo-drop:hover { background: var(--color-teal-tint); border-color: var(--color-teal); }
.photo-drop span { display: flex; flex-direction: column; gap: 2px; }
.photo-drop strong { font-size: 14px; color: var(--color-ink); }
.photo-drop small { font-size: 12.5px; color: var(--color-text-soft); line-height: 1.45; }
.photo-drop.full { display: none; }
.photo-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.photo-list:empty { display: none; }
.photo-thumb { position: relative; aspect-ratio: 1; border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-sm); }
.photo-thumb img { width: 100%; height: 100%; object-fit: cover; }
.photo-thumb button {
  position: absolute; top: 5px; inset-inline-end: 5px; width: 28px; height: 28px; border-radius: 50%; border: 0;
  background: rgba(20,20,20,.65); color: #fff; font-size: 18px; line-height: 1; display: flex; align-items: center; justify-content: center;
}
.form-note { font-size: 12.5px; color: var(--color-text-soft); text-align: center; margin-top: 12px; }
.submit-btn { position: relative; }
.submit-btn .btn-spinner { display: none; width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid rgba(255,255,255,.35); border-top-color: #fff; animation: erbSpinBtn .7s linear infinite; }
.submit-btn.is-busy .btn-spinner { display: inline-block; }
.submit-btn.is-busy { opacity: .85; pointer-events: none; }
@keyframes erbSpinBtn { to { transform: rotate(360deg); } }
.success-card[hidden], .form-fail[hidden], #quoteForm[hidden] { display: none !important; }
.success-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 8px; }
.success-card strong#refCode { color: var(--color-teal-700); letter-spacing: .02em; }
.form-fail { padding: 34px 28px; display: flex; flex-direction: column; gap: 10px; border: 1px solid rgba(163,64,47,.25); }
.form-fail .card-title { color: var(--color-error); font-family: var(--font-heading); font-size: 21px; }

/* ---------------- Project popup: actions & sharing ---------------- */
.proj-modal-actions .btn { padding: 13px 20px; }
@media (max-width: 620px) {
  .proj-modal-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .proj-modal-actions .btn-primary, .proj-modal-actions .btn-wa { grid-column: 1 / -1; }
}

/* ---------------- Phone fixes found in live testing ---------------- */
@media (max-width: 620px) {
  /* The 92vw page width added a second margin inside the side padding, so
     page content sat 15px further in than the logo above it. */
  :root { --wrap: 100%; }
  .card { min-height: 0; padding: 26px 24px; }
  .card .card-icon { margin-bottom: 14px; }
  .card .card-body { margin-top: 0; padding-top: 8px; }
}
@media (max-width: 420px) {
  .kicker { font-size: 10.5px; letter-spacing: .1em; }
}
/* Labels such as "Design study" are tags, not full-width bars. */
.proj-card .tag-capability { align-self: flex-start; margin-inline-start: 0; }
/* On phones the tilt button replaces the "move your mouse" hint. */
.plaster-band.pb-has-enable .pb-hint { opacity: 0; }
/* Services page on phones: every service shows its photo first, then the
   words — the same rhythm all the way down instead of alternating. */
@media (max-width: 900px) {
  .two-col > .arch-frame.wide { order: -1; }
}

/* ====================================================================
   v3 — SIX LANGUAGES
   ==================================================================== */
/* Fraunces has no Cyrillic letters, so Russian headings use Lora — a
   warm book serif of the same mood. */
html[lang="ru"] { --font-heading: 'Lora', 'Fraunces', Georgia, serif; }
html[lang="ru"] h1, html[lang="ru"] h2 { letter-spacing: -0.01em; }
/* Longer words in German/Russian/French: let headings break gracefully. */
html[lang="de"] h1, html[lang="de"] h2, html[lang="ru"] h1, html[lang="ru"] h2, html[lang="fr"] h1 { hyphens: auto; overflow-wrap: break-word; }
.hero-title .line { display: block; }

/* Header language menu */
.lang-menu { position: relative; }
.lang-btn {
  display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 12px 0 11px;
  border: 1px solid var(--color-line); border-radius: var(--radius-pill); background: transparent;
  font: 700 12.5px var(--font-body); color: var(--color-text); letter-spacing: .04em;
  transition: border-color .2s, color .2s, background-color .2s;
}
.lang-btn:hover, .lang-menu.open .lang-btn { border-color: var(--color-teal); color: var(--color-teal-700); background: var(--color-surface); }
.lang-btn .chev { transition: transform .25s var(--ease); }
.lang-menu.open .lang-btn .chev { transform: rotate(180deg); }
.lang-list {
  position: absolute; top: calc(100% + 8px); inset-inline-end: 0; z-index: 130; min-width: 190px;
  display: flex; flex-direction: column; padding: 6px;
  background: var(--color-surface); border: 1px solid var(--color-line-soft); border-radius: 16px;
  box-shadow: 0 18px 44px rgba(35,28,18,.16);
  opacity: 0; visibility: hidden; transform: translateY(-6px) scale(.98); transform-origin: top right;
  transition: opacity .22s var(--ease), transform .22s var(--ease), visibility 0s .22s;
}
[dir="rtl"] .lang-list { transform-origin: top left; }
.lang-menu.open .lang-list { opacity: 1; visibility: visible; transform: none; transition: opacity .22s var(--ease), transform .22s var(--ease); }
.lang-list button {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border: 0; border-radius: 10px;
  background: transparent; font: 600 14px var(--font-body); color: var(--color-ink); text-align: start; cursor: pointer;
}
.lang-list button:hover { background: var(--color-bg); }
.lang-list button.on { background: var(--color-teal-tint); color: var(--color-teal-700); }
.lang-code { width: 26px; font-size: 11px; font-weight: 800; letter-spacing: .06em; color: var(--color-text-soft); }
.lang-list button.on .lang-code { color: var(--color-teal); }
@media (max-width: 860px) { .nav-right > .lang-menu { display: none; } }

/* Phone menu: language chips */
.lang-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.lang-chips button {
  padding: 9px 14px; border-radius: 999px; border: 1px solid var(--color-line); background: var(--color-surface);
  font: 700 13px var(--font-body); color: var(--color-text); cursor: pointer;
}
.lang-chips button.on { background: var(--color-teal); border-color: var(--color-teal); color: #fff; }
.mm-foot { flex-direction: column; align-items: stretch; gap: 14px; }

/* ====================================================================
   v3 — MOTION REFRESH, TECHNICAL SERVICES, OFFICE MAP
   ==================================================================== */

/* ---- Performance: the full-screen background layers.
   The animated grain sat ABOVE all content with a blend mode and was
   repainted every frame — the main cause of stutter on phones. It is now
   still; the raking-light drift only runs on larger screens. */
.plaster-ground::after { animation: none; }
@media (max-width: 900px) { .plaster-ground::before { animation: none; opacity: .03; } }
/* Touch screens: no full-viewport blended layers at all. A position:fixed
   layer with a blend mode has to be re-composited against everything
   beneath it on every scroll frame, and on phones (especially as the
   address bar collapses) that showed up as a flicker over the page. At
   3–5% opacity the grain and light sweep are invisible on a phone anyway;
   the compass rings stay, as a plain still drawing. */
@media (hover: none), (pointer: coarse), (max-width: 900px) {
  .plaster-ground::before, .plaster-ground::after { content: none; display: none; }
  .so-ring { mix-blend-mode: normal; will-change: auto; opacity: .08; }
}

/* Light strip: vertical swipes scroll the page; taps and sideways drags move the light. */
.plaster-band { touch-action: pan-y; background: #e7e1d5; -webkit-tap-highlight-color: transparent; }
.plaster-band .pb-hint { pointer-events: none; }
.plaster-band.pb-active .pb-hint { transition-delay: 1.2s; }

/* ---- Headings rise out of a mask as they enter the screen ---- */
.js .reveal-line { clip-path: inset(0 0 100% 0); transform: translateY(0.45em); transition: clip-path 1s var(--ease), transform 1s var(--ease); }
.js .reveal-line.in { clip-path: inset(-0.2em -0.1em -0.25em -0.1em); transform: none; }
/* Hero headline: line by line on load. */
.hero-title .line { animation: erbLineUp 1.15s var(--ease) both; }
.hero-title .line + .line { animation-delay: .14s; }
@keyframes erbLineUp {
  from { clip-path: inset(0 0 100% 0); transform: translateY(40%); }
  to   { clip-path: inset(-0.15em -0.1em -0.25em -0.1em); transform: none; }
}
.hero-title.fade-up { animation: none; }

/* ---- Photos open like a curtain as they arrive ---- */
.js .proj-card.reveal .proj-media,
.js .reveal .arch-frame:not(.hero-media-wrap .arch-frame),
.js .ba-figure.reveal .ba-frame {
  clip-path: inset(10% 6% 10% 6% round var(--radius-lg));
  transition: clip-path 1.2s var(--ease), box-shadow .5s var(--ease);
}
.js .proj-card.reveal.in .proj-media,
.js .reveal.in .arch-frame:not(.hero-media-wrap .arch-frame),
.js .ba-figure.reveal.in .ba-frame { clip-path: inset(0 0 0 0 round 0); }
.js .proj-card.reveal .zoom-inner { transform: scale(1.12); transition: transform 1.6s var(--ease); }
.js .proj-card.reveal.in .zoom-inner { transform: scale(1); }
.js .proj-card.reveal.in:hover .zoom-inner { transform: scale(1.07); transition-duration: .7s; }

/* ---- Hero depth: the arch and the photo move in opposite directions ---- */

/* ---- Discipline strip ---- */
.marquee {
  position: relative; z-index: 1; overflow: hidden; padding: 18px 0;
  border-block: 1px solid var(--color-line-soft); background: color-mix(in srgb, var(--color-surface) 55%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track { display: flex; align-items: center; gap: 34px; width: max-content; animation: erbMarquee 42s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track span { font-family: var(--font-heading); font-size: clamp(20px, 2.4vw, 30px); font-weight: 500; color: var(--color-ink); white-space: nowrap; letter-spacing: -0.01em; }
.marquee-track span:nth-of-type(even) { font-style: italic; color: var(--color-teal); }
.marquee-track i { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--color-brass); flex: none; }
@keyframes erbMarquee { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
[dir="rtl"] .marquee-track { animation-name: erbMarqueeRtl; }
@keyframes erbMarqueeRtl { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(50%, 0, 0); } }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }

/* ---- Fit-out & technical services ---- */
.tech-band { background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--color-bg-soft) 70%, transparent) 30%, transparent); }
.tech-head { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 60px; align-items: end; margin-bottom: clamp(30px, 4vh, 52px); }
.tech-head h2 { font-size: clamp(28px, 3.4vw, 42px); margin-top: 14px; max-width: 18ch; }
.tech-intro { font-size: 16px; line-height: 1.75; color: var(--color-text); max-width: 52ch; }
/* Every cell is the same size: rows share one height (the tallest), columns
   share one width, at every screen width. Icon on top, title, one line. */
.tech-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 1fr;
  gap: 1px; background: var(--color-line-soft); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm);
}
.tech-item {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0;
  padding: clamp(24px, 2vw, 32px) clamp(22px, 1.8vw, 30px) clamp(26px, 2.2vw, 34px);
  background: var(--color-surface); transition: background-color .35s var(--ease); min-width: 0;
}
.tech-item > div { width: 100%; }
.tech-item:hover { background: #FFFCF6; }
.tech-icon { width: 48px; height: 48px; flex: none; margin-bottom: 18px; border-radius: 14px; display: flex; align-items: center; justify-content: center; background: var(--color-teal-tint); color: var(--color-teal); transition: transform .45s var(--ease), background-color .35s, color .35s; }
.tech-item:hover .tech-icon { transform: translateY(-3px) rotate(-6deg); background: var(--color-teal); color: #fff; }
.tech-title { font-family: var(--font-heading); font-size: clamp(17px, 1.25vw, 19px); font-weight: 600; color: var(--color-ink); line-height: 1.25; min-height: 2.5em; display: flex; align-items: flex-end; }
.tech-body { font-size: 14px; line-height: 1.6; color: var(--color-text); margin-top: 8px; }
@media (max-width: 1100px) { .tech-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .tech-head { grid-template-columns: 1fr; }
  .tech-grid { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .tech-item { flex-direction: row; gap: 16px; padding: 18px; }
  .tech-icon { width: 44px; height: 44px; margin-bottom: 0; }
  .tech-title { min-height: 0; display: block; }
  .tech-body { margin-top: 4px; }
}

/* ---- Office & map ---- */
.office-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.office-info h2 { font-size: clamp(26px, 3vw, 38px); margin: 14px 0 18px; }
.office-addr { display: flex; gap: 10px; align-items: flex-start; font-size: 16px; font-weight: 600; color: var(--color-ink); line-height: 1.5; }
.office-addr svg { flex: none; margin-top: 2px; color: var(--color-teal); }
.office-note { font-size: 14px; color: var(--color-text-soft); margin: 10px 0 22px; line-height: 1.6; }
.map-frame {
  position: relative; aspect-ratio: 16 / 10; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md);
  background:
    repeating-linear-gradient(0deg, rgba(6,96,123,.06) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(90deg, rgba(6,96,123,.06) 0 1px, transparent 1px 34px),
    radial-gradient(circle at 50% 50%, #fff, var(--color-bg-soft));
}
.map-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.map-load {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px; border: 0; border-radius: 999px; background: var(--color-surface); color: var(--color-teal-700);
  font: 800 14px var(--font-body); box-shadow: var(--shadow-md); cursor: pointer; transition: transform .25s var(--ease);
}
.map-load:hover { transform: translate(-50%, -52%); }
.map-frame.loaded .map-load { display: none; }
@media (max-width: 900px) { .office-grid { grid-template-columns: 1fr; } }

/* Approved-design label on concept images inside a delivered project */
.concept-badge {
  position: absolute; left: 14px; top: 14px; z-index: 3;
  padding: 6px 12px; border-radius: 999px;
  background: rgba(28, 24, 18, .72); color: #fff; backdrop-filter: blur(6px);
  font: 600 11px/1.2 var(--font-body); letter-spacing: .08em; text-transform: uppercase;
}
[dir="rtl"] .concept-badge { left: auto; right: 14px; letter-spacing: 0; }

/* Clients band */
.clients-head { text-align: center; max-width: 640px; margin: 0 auto 34px; }
.clients-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.cl-card {
  position: relative; display: flex; flex-direction: column; gap: 8px; min-height: 148px;
  padding: 24px 22px 22px; border-radius: var(--radius-md); text-decoration: none;
  background: rgba(255,255,255,.55); border: 1px solid var(--color-line);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease);
}
.cl-card::before { content: ""; position: absolute; top: 0; inset-inline-start: 22px; width: 28px; height: 2px; background: var(--color-brass); }
.cl-name { font-family: var(--font-heading); font-size: 19px; line-height: 1.25; color: var(--color-ink, #2a2724); }
.cl-work { font-size: 13.5px; line-height: 1.5; color: var(--color-text-soft); }
.cl-link { margin-top: auto; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--color-teal); }
[dir="rtl"] .cl-link { letter-spacing: 0; }
[dir="rtl"] .cl-link span { display: inline-block; transform: scaleX(-1); }
a.cl-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); border-color: rgba(173,138,80,.45); }
.clients-band [data-render="quotes"]:not(:empty) { margin-top: 48px; }
@media (max-width: 980px) { .clients-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .clients-row { grid-template-columns: 1fr; gap: 12px; }
  .cl-card { min-height: 0; padding: 20px 18px 18px; }
}

/* ================= About v2 — story chapters ================= */
.story .two-col { align-items: center; }
.chapters { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 26px; }
.chapter { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 18px; padding-bottom: 26px; border-bottom: 1px solid var(--color-line-soft); }
.chapter:last-child { border-bottom: 0; padding-bottom: 0; }
.chapter:nth-child(2) { transition-delay: .12s; }
.chapter:nth-child(3) { transition-delay: .24s; }
.ch-num { font-family: var(--font-heading); font-size: 30px; line-height: 1; color: var(--color-brass); padding-top: 3px; letter-spacing: -0.02em; }
.ch-title { font-family: var(--font-heading); font-size: clamp(20px, 1.6vw, 24px); font-weight: 600; line-height: 1.25; color: var(--color-ink); margin: 0 0 8px; }
.chapter p { margin: 0; font-size: 15.5px; line-height: 1.75; color: var(--color-text); }
.about-stack[data-depth-scroll] { perspective: 1400px; }
.about-stack[data-depth-scroll] .arch-frame { transform: rotateY(calc((1 - var(--s, 1)) * 14deg)) translateZ(0); transform-origin: 80% 50%; }
.about-stack[data-depth-scroll] .about-inset { transform: translate3d(0, calc((1 - var(--s, 1)) * 56px), 0); }
@media (max-width: 860px) {
  .chapter { grid-template-columns: 44px minmax(0, 1fr); gap: 14px; }
  .ch-num { font-size: 24px; }
  .about-stack[data-depth-scroll] .arch-frame { transform: none; }
}

/* ================= About v2 — anatomy of an ERB wall (CSS 3D) ================= */
.anatomy { position: relative; height: 290vh; background: linear-gradient(180deg, var(--color-bg) 0%, var(--color-bg-soft) 14%, var(--color-bg-soft) 86%, var(--color-bg) 100%); }
.anatomy-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; align-items: center; overflow: hidden; }
.anatomy-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 84px); align-items: center; width: 100%; }
.anatomy-copy h2 { font-size: clamp(30px, 3.4vw, 46px); }
.anatomy-intro { font-size: 16px; line-height: 1.75; color: var(--color-text); margin: 16px 0 26px; max-width: 46ch; }
.anatomy-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.anatomy-list li { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-top: 1px solid var(--color-line-soft); opacity: .5; transition: opacity .45s var(--ease); }
.anatomy-list li:last-child { border-bottom: 1px solid var(--color-line-soft); }
.anatomy-list li.on { opacity: 1; }
.al-n { font-family: var(--font-heading); font-size: 15px; color: var(--color-brass); padding-top: 2px; }
.anatomy-list b { display: block; font-family: var(--font-heading); font-weight: 600; font-size: 17px; color: var(--color-ink); line-height: 1.3; }
.anatomy-list span:not(.al-n) { display: block; font-size: 13.5px; line-height: 1.55; color: var(--color-text); max-height: 0; opacity: 0; overflow: hidden; transition: max-height .5s var(--ease), opacity .4s var(--ease), margin .5s var(--ease); }
.anatomy-list li.on span:not(.al-n) { max-height: 4.8em; opacity: 1; margin-top: 4px; }
.anatomy-stage { --t: 0; --gap: clamp(40px, min(5vw, 8vh), 74px); position: relative; height: min(74vh, 620px); display: flex; align-items: center; justify-content: center; perspective: 1800px; }
.anatomy-rig { position: relative; width: min(36vw, 480px, 66vh); aspect-ratio: 3 / 2; transform-style: preserve-3d;
  transform: rotateX(calc(var(--t) * 56deg)) rotateZ(calc(var(--t) * -38deg)) scale(calc(1 - var(--t) * .08)); will-change: transform; }
.al { position: absolute; inset: 0; transform-style: preserve-3d;
  transform: translateZ(calc(var(--i) * 1px + (var(--i) - 3) * var(--t) * var(--gap))); transition: opacity .45s var(--ease); }
.al svg, .al img { width: 100%; height: 100%; display: block; overflow: visible; }
.al img { object-fit: cover; border-radius: 2px; }
.al-3 img { box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 22px 40px -20px rgba(60, 45, 25, .45); }
.al-1 { --i: 1; } .al-2 { --i: 2; box-shadow: 0 0 0 1px rgba(120, 100, 70, .18), 0 18px 40px -18px rgba(60, 45, 25, .35); border-radius: 3px; }
.al-3 { --i: 3; } .al-4 { --i: 4; } .al-5 { --i: 5; }
.al-glow { position: absolute; inset: 9.6% 6.1% 9.1% 6.4%; border-radius: 2px;
  box-shadow: 0 0 0 2px rgba(255, 222, 168, .95), 0 0 26px 8px rgba(255, 204, 130, .55), inset 0 0 34px 8px rgba(255, 212, 150, .5); }
.anatomy-stage.dim .al:not(.on) { opacity: .55; }
.anatomy-stage .al.on { filter: drop-shadow(0 0 14px rgba(200, 161, 94, .45)); }
.anatomy-floor { position: absolute; left: 20%; right: 20%; bottom: 6%; height: 14%; border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(70, 52, 28, .28), rgba(70, 52, 28, 0) 70%);
  transform: scale(calc(.75 + var(--t) * .45)); opacity: calc(.35 + var(--t) * .65); }
.anatomy-hint { position: absolute; bottom: 2%; left: 50%; transform: translateX(-50%); font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--color-text-soft); opacity: calc(1 - var(--t) * 3); }
.anatomy-hint::after { content: ""; display: block; width: 1px; height: 26px; margin: 8px auto 0; background: linear-gradient(var(--color-brass), transparent); animation: anHint 1.8s ease-in-out infinite; }
@keyframes anHint { 0%, 100% { transform: scaleY(.4); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } }
@media (max-width: 860px) {
  .anatomy { height: 250vh; }
  .anatomy-grid { grid-template-columns: 1fr; gap: 6px; }
  .anatomy-copy { display: contents; }
  .anatomy-copy .kicker { justify-self: start; }
  .anatomy-stage { order: 1; }
  .anatomy-copy h2 { font-size: 28px; }
  .anatomy-intro { display: none; }
  .anatomy-list { order: 2; min-height: 92px; position: relative; margin-top: 8px; }
  .anatomy-list li { position: absolute; inset: 0 0 auto 0; border: 0 !important; opacity: 0; transform: translateY(8px); transition: opacity .35s var(--ease), transform .35s var(--ease); }
  .anatomy-list li.on { opacity: 1; transform: none; }
  .anatomy-list li span:not(.al-n) { max-height: none; opacity: 1; margin-top: 4px; }
  .anatomy-stage { height: 48svh; --gap: 34px; }
  .anatomy-rig { width: min(80vw, 380px); }
}
@media (prefers-reduced-motion: reduce) {
  .anatomy { height: auto; }
  .anatomy-sticky { position: relative; height: auto; padding: 80px 0; }
  .anatomy-stage { --t: .62 !important; }
  .anatomy-list li { opacity: 1; position: static; transform: none; }
  .anatomy-list li span:not(.al-n) { max-height: none; opacity: 1; margin-top: 4px; }
  .anatomy-hint { display: none; }
}

/* Phones: the sticky header and action bar sit over moving content on every
   scroll frame; a backdrop blur there is the most common cause of scroll
   jank on mid-range Android. Solid, near-opaque bars instead. */
@media (max-width: 860px) {
  .site-nav { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(250, 246, 238, .97); }
  .m-actions { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(250, 246, 238, .98); }
  .hero-slide-tag, .concept-badge, .ba-tag { backdrop-filter: none; -webkit-backdrop-filter: none; }
  .hero-slide.leaving img { filter: none; }
}

@media (min-width: 861px) and (max-height: 800px) {
  .anatomy-copy h2 { font-size: clamp(28px, 3vw, 38px); }
  .anatomy-intro { margin: 12px 0 18px; font-size: 15px; }
  .anatomy-list li { padding: 9px 0; }
}
/* The section above already ends with a full section's padding, so the
   clients band starts flush and ends with the same full padding before the
   dark closing band: equal air above the heading and below the cards. */
.section-tight.clients-band { padding-top: 0; padding-bottom: clamp(88px, 11vh, 148px); }

.al-sun { position: absolute; left: 74.7%; top: 35.1%; width: 21%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 226, 150, .95) 0 52%, rgba(255, 196, 96, .6) 60%, rgba(255, 190, 90, 0) 76%); }
@media (max-width: 860px) { .anatomy-rig { width: min(80vw, 380px); } }
.anatomy-shown { position: absolute; right: 0; bottom: 2%; font-size: 12px; color: var(--color-text-soft); letter-spacing: .02em; opacity: calc(var(--t) * 1.4); }
[dir="rtl"] .anatomy-shown { right: auto; left: 0; }
@media (max-width: 860px) { .anatomy-shown { left: 0; right: 0; text-align: center; bottom: 0; font-size: 11px; } }

/* ---- Technical service cards: clickable + detail dialog ---- */
.tech-item { cursor: pointer; position: relative; }
.tech-item:focus-visible { outline: 2px solid var(--color-brass); outline-offset: -4px; }
.tech-more { margin-top: auto; padding-top: 16px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--color-teal); opacity: .75; transition: opacity .3s var(--ease), transform .3s var(--ease); }
.tech-item:hover .tech-more { opacity: 1; transform: translateX(3px); }
[dir="rtl"] .tech-item:hover .tech-more { transform: translateX(-3px); }
[dir="rtl"] .tech-more > span { display: inline-block; transform: scaleX(-1); }
@media (max-width: 760px) { .tech-more { display: none; } .tech-item::after { content: "›"; position: absolute; inset-inline-end: 18px; top: 50%; transform: translateY(-50%); font-size: 22px; color: var(--color-brass); } [dir="rtl"] .tech-item::after { content: "‹"; } }

.tech-modal { position: fixed; inset: 0; z-index: 400; display: flex; align-items: center; justify-content: center; padding: 24px; visibility: hidden; pointer-events: none; }
.tech-modal.open { visibility: visible; pointer-events: auto; }
.tm-backdrop { position: absolute; inset: 0; background: rgba(12, 22, 26, .58); opacity: 0; transition: opacity .35s var(--ease); }
.tech-modal.open .tm-backdrop { opacity: 1; }
.tm-card { position: relative; width: min(920px, 100%); max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px); overflow: auto; overscroll-behavior: contain;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: var(--color-surface); border-radius: var(--radius-lg); box-shadow: 0 40px 90px -30px rgba(10, 20, 24, .55);
  opacity: 0; transform: translateY(18px) scale(.985); transition: opacity .35s var(--ease), transform .45s var(--ease); }
.tech-modal.open .tm-card { opacity: 1; transform: none; }
.tm-media { position: relative; min-height: 100%; background: var(--color-bg-soft); }
.tm-media { overflow: hidden; touch-action: pan-y; }
.tm-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tm-slide { position: absolute; inset: 0; opacity: 0; transition: opacity .9s var(--ease); }
.tm-slide.active { opacity: 1; }
.tm-dots { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); z-index: 2; display: flex; gap: 2px;
  padding: 0 6px; border-radius: 20px; background: rgba(12, 22, 26, .28); }
.tm-dot { width: 22px; height: 22px; padding: 0; border: 0; background: none; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.tm-dot::before { content: ""; width: 6px; height: 6px; border-radius: 3px; background: rgba(255,255,255,.6); transition: width .3s var(--ease), background .3s var(--ease); }
.tm-dot.active::before { width: 16px; background: #fff; }
.tm-dot:focus-visible { outline: 2px solid #fff; outline-offset: -4px; border-radius: 6px; }
@media (prefers-reduced-motion: reduce) { .tm-slide { transition: none; } }
.tm-body { padding: clamp(26px, 3vw, 40px); display: flex; flex-direction: column; }
.tm-head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; padding-inline-end: 34px; }
.tm-icon { margin: 0 !important; }
.tm-title { font-family: var(--font-heading); font-size: clamp(22px, 2vw, 28px); line-height: 1.2; color: var(--color-ink); margin: 0; }
.tm-detail { font-size: 15.5px; line-height: 1.75; color: var(--color-text); margin: 0 0 18px; }
.tm-sub { font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--color-brass); }
.tm-points { margin-top: 10px; }
.tm-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; padding-top: 26px; }
.tm-actions .btn { flex: 1 1 auto; justify-content: center; }
.tm-close { position: absolute; top: 14px; inset-inline-end: 14px; z-index: 2; width: 40px; height: 40px; border-radius: 50%; border: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(250, 246, 238, .94); color: var(--color-ink); cursor: pointer; box-shadow: 0 2px 10px rgba(10, 20, 24, .18); }
body.tm-open { overflow: hidden; }
@media (max-width: 760px) {
  .tech-modal { padding: 0; align-items: flex-end; }
  .tm-card { grid-template-columns: 1fr; border-radius: 22px 22px 0 0; max-height: 92vh; max-height: 92dvh; transform: translateY(40px); }
  .tm-media { aspect-ratio: 4 / 3; min-height: 0; }
  .tm-body { padding: 22px 20px calc(22px + env(safe-area-inset-bottom)); }
  .tm-actions { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) { .tm-card, .tm-backdrop { transition: none; } }
.tech-modal.no-media .tm-card { grid-template-columns: 1fr; width: min(620px, 100%); }
.tech-modal.no-media .tm-media { display: none; }
/* Text-only service dialog: a quiet brand header instead of a picture. */
.tm-band { display: none; }
.tech-modal.no-media .tm-band {
  display: flex; align-items: flex-end; justify-content: space-between; position: relative; overflow: hidden;
  min-height: 150px; padding: 28px clamp(26px, 3vw, 40px) 22px;
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(200, 171, 120, .22), rgba(200, 171, 120, 0) 55%),
    radial-gradient(90% 120% at 0% 100%, rgba(255, 255, 255, .06), rgba(255, 255, 255, 0) 60%),
    var(--color-teal-900);
  color: var(--color-brass-light);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.tech-modal.no-media .tm-band::before {
  content: ""; position: absolute; right: -60px; top: -60px; width: 240px; height: 240px; border-radius: 50%;
  border: 1px solid rgba(200, 171, 120, .25); box-shadow: 0 0 0 26px rgba(200, 171, 120, .05), 0 0 0 52px rgba(200, 171, 120, .035);
}
.tm-band-icon { position: relative; display: flex; }
.tm-band-num { position: relative; font: 600 12px/1 var(--font-body); letter-spacing: .18em; color: rgba(243, 236, 221, .7); }
.tech-modal.no-media .tm-head .tm-icon { display: none; }
.tech-modal.no-media .tm-close { background: rgba(250, 246, 238, .14); color: #fff; box-shadow: none; }
@media (max-width: 760px) {
  .tech-modal.no-media .tm-band { min-height: 120px; border-radius: 22px 22px 0 0; padding: 22px 20px 18px; }
}

/* Phones: form fields at 16px so iPhone Safari never zooms the page when a
   field is tapped; the phone number in the menu gets a full-size tap area. */
@media (max-width: 860px) {
  input, select, textarea { font-size: 16px !important; }
  .mm-foot a { display: inline-flex; align-items: center; min-height: 44px; padding: 6px 0; }
}

/* ====================================================================
   SERVICES — "Watch a room come together" (js/room3d.js)
   A cut-away room in CSS 3D, built trade by trade as you scroll.
   Rule: opacity is only ever set on flat faces, never on a container
   that holds 3D children (that would flatten the whole box).
   ==================================================================== */
.room3d { position: relative; height: 640vh; background: linear-gradient(180deg, var(--color-bg) 0%, var(--color-bg-soft) 10%, var(--color-bg-soft) 90%, var(--color-bg) 100%); }
.r3-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; align-items: center; overflow: hidden; }
.r3-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(28px, 4.5vw, 76px); align-items: center; width: 100%; }
.r3-copy h2 { font-size: clamp(30px, 3.3vw, 46px); }
.r3-intro { font-size: 16px; line-height: 1.7; color: var(--color-text); margin: 14px 0 22px; max-width: 46ch; }
.r3-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.r3-list li { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 10px; padding: 8px 0; border-top: 1px solid var(--color-line-soft); opacity: .42; transition: opacity .45s var(--ease); }
.r3-list li:last-child { border-bottom: 1px solid var(--color-line-soft); }
.r3-list li.done { opacity: .62; }
.r3-list li.on { opacity: 1; }
.r3-n { font-family: var(--font-heading); font-size: 14px; color: var(--color-brass); padding-top: 2px; }
.r3-list b { display: block; font-family: var(--font-heading); font-weight: 600; font-size: 16px; color: var(--color-ink); line-height: 1.3; }
.r3-list span:not(.r3-n) { display: block; font-size: 13.5px; line-height: 1.5; color: var(--color-text); max-height: 0; opacity: 0; overflow: hidden; transition: max-height .5s var(--ease), opacity .4s var(--ease), margin .5s var(--ease); }
.r3-list li.on span:not(.r3-n) { max-height: 4.6em; opacity: 1; margin-top: 3px; }
.r3-card { display: none; }

.r3-stage { position: relative; height: min(76vh, 640px); border-radius: var(--radius-xl); overflow: hidden;
  background: radial-gradient(ellipse 80% 70% at 50% 38%, #fffdf8 0%, #efe8db 72%, #e6ddcc 100%);
  box-shadow: var(--shadow-md), inset 0 0 0 1px rgba(42,39,36,.06);
  perspective: 2300px; perspective-origin: 50% 18%; transition: background .9s var(--ease); }
.r3-stage::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: radial-gradient(ellipse 70% 60% at 50% 44%, transparent 55%, rgba(10,40,48,.0) 100%); transition: background .9s var(--ease); }
.room3d.s7 .r3-stage { background: radial-gradient(ellipse 80% 70% at 50% 38%, #24525d 0%, #0d323c 70%, #0a2830 100%); }
.r3-fit { position: absolute; left: 50%; top: 60%; width: 0; height: 0; transform-style: preserve-3d; transform: scale(var(--fit, 1)); }
.r3-rig { position: absolute; left: -180px; top: -150px; transform-style: preserve-3d;
  transform: rotateX(57deg) rotateZ(calc(43deg - var(--drift, 0) * 1deg)); transition: transform .2s linear; }
.r3-f, .r3-wall, .r3-floor { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.r3-box, .r3-bulk, .r3-sofa { position: absolute; left: 0; top: 0; transform-style: preserve-3d; }

/* floor */
.r3-floor > * { position: absolute; }
.r3-slab { inset: 0; background-color: #bdb7ad;
  background-image: radial-gradient(circle at 30% 40%, rgba(255,255,255,.18), transparent 55%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .3  0 0 0 0 .28  0 0 0 0 .26  0 0 0 .28 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.08); }
.r3-chalk, .r3-pipes { inset: 0; }
.r3-chalk svg, .r3-pipes svg, .r3-riser svg { width: 100%; height: 100%; display: block; overflow: visible; }
.r3-chalk path { fill: none; stroke: rgba(255,255,255,.92); stroke-width: 1.5; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s var(--ease); }
.r3-chalk path.c2 { stroke: rgba(30,90,120,.75); stroke-width: 1.3; transition-delay: .6s; }
.room3d.s1 .r3-chalk path { stroke-dashoffset: 0; }
.r3-pipes path, .r3-riser path { fill: none; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.5s var(--ease); }
.p-cold { stroke: #2f7fc1; } .p-hot { stroke: #c4553a; transition-delay: .25s !important; }
.p-drain { stroke: #7b848a; stroke-width: 7 !important; transition-delay: .5s !important; }
.p-elec { stroke: #d99b2f; stroke-width: 3 !important; transition-delay: .7s !important; }
.room3d.s2 .r3-pipes path, .room3d.s2 .r3-riser path { stroke-dashoffset: 0; }
.r3-tiles { inset: 0; background-color: #ece7de;
  background-image: linear-gradient(115deg, rgba(255,255,255,.55), transparent 40%, rgba(255,255,255,.35) 70%, transparent),
    linear-gradient(rgba(105,96,84,.22) 1px, transparent 1px), linear-gradient(90deg, rgba(105,96,84,.22) 1px, transparent 1px);
  background-size: 100% 100%, 60px 60px, 60px 60px; clip-path: inset(0 100% 0 0); transition: clip-path 1.5s cubic-bezier(.6,0,.2,1); }
.room3d.s4 .r3-tiles { clip-path: inset(0 0 0 0); }
.r3-rug { background: #d9cbb4; border-radius: 3px; box-shadow: inset 0 0 0 5px #cdbb9f; opacity: 0; transition: opacity .8s var(--ease) .5s; }
.room3d.s7 .r3-rug { opacity: 1; }
.r3-night { inset: 0; background: rgba(8, 30, 38, .42); opacity: 0; transition: opacity 1s var(--ease); }
.room3d.s7 .r3-night { opacity: 1; }
.r3-pool { width: 120px; height: 120px; margin: -10px 0 0 -10px; border-radius: 50%; background: radial-gradient(circle, rgba(255,214,150,.75), rgba(255,200,130,.25) 45%, transparent 70%); opacity: 0; transition: opacity .9s var(--ease) .35s; }
.room3d.s7 .r3-pool { opacity: 1; }

/* walls: local y runs UP from the floor */
.r3-wl { position: absolute; inset: 0; }
.r3-studs .r3-stud { position: absolute; top: 0; width: 6px; height: 100%; background: linear-gradient(90deg, #8f989d, #dfe4e6 50%, #8a9398);
  transform: scaleY(0); transform-origin: 50% 0; transition: transform .25s ease; }
.room3d.s3 .r3-stud { transform: scaleY(1); transition: transform .6s cubic-bezier(.3,1.25,.5,1) var(--dl, 0s); }
.r3-track { position: absolute; left: 0; right: 0; height: 5px; background: #a3abb0; transform: scaleX(0); transform-origin: 0 50%; transition: transform .25s ease; }
.room3d.s3 .r3-track { transform: scaleX(1); transition: transform .5s var(--ease); }
.r3-board { position: absolute; top: 0; height: 100%; background: #e8e6e1; box-shadow: inset -1px 0 0 rgba(60,55,50,.18), inset 1px 0 0 rgba(255,255,255,.6);
  opacity: 0; transform: translate3d(0, 26px, 0); transition: opacity .2s, transform .2s; }
.r3-board::after { content: ""; position: absolute; right: -3px; top: 0; bottom: 0; width: 6px; background: rgba(250,248,244,.9); }
.room3d.s3 .r3-board { opacity: 1; transform: none; transition: opacity .6s var(--ease) var(--dl, 0s), transform .7s var(--ease) var(--dl, 0s); }
.r3-paint { background: #f4efe7; clip-path: inset(0 0 100% 0); transition: clip-path 1.3s cubic-bezier(.6,0,.2,1); }
.r3-wall-b .r3-paint { background: linear-gradient(to bottom, #d6c9b6, #cdbfab); }
.room3d.s5 .r3-paint { clip-path: inset(0 0 0 0); }
.r3-wall-l .r3-paint { transition-delay: .45s; }
.r3-cove { background: linear-gradient(to bottom, rgba(255,190,120,.10) 0%, rgba(255,190,120,.14) 38%, rgba(255,196,118,.62) 74%, rgba(255,214,150,.95) 94%, rgba(255,236,190,1) 100%); opacity: 0; transition: opacity 1s var(--ease) .25s; }
.room3d.s7 .r3-cove { opacity: 1; }
.r3-window { position: absolute; box-shadow: 0 0 0 4px #f6f3ee, 0 0 0 5px rgba(0,0,0,.12); overflow: hidden; opacity: 0; transition: opacity .6s var(--ease); }
.room3d.s3 .r3-window { opacity: 1; transition-delay: 1.7s; }
.r3-sky { position: absolute; inset: 0; }
.r3-day { background: linear-gradient(to bottom, #f1f6f7, #a9cfe3 75%); }
.r3-dusk { background: linear-gradient(to bottom, #f4b679 0%, #b0707a 30%, #3a4a78 65%, #1a2340 100%); opacity: 0; transition: opacity 1.1s var(--ease); }
.room3d.s7 .r3-dusk { opacity: 1; }
.r3-window i { position: absolute; left: 50%; top: 0; bottom: 0; width: 3px; margin-left: -1.5px; background: #f6f3ee; }
.r3-tv { position: absolute; background: linear-gradient(160deg, #2a3036, #15191c); border-radius: 2px; box-shadow: 0 0 0 2px #0e1113; opacity: 0; transform: translate3d(0, -8px, 0); transition: opacity .5s, transform .5s; }
.room3d.s6 .r3-tv { opacity: 1; transform: none; transition-delay: .6s; }
.room3d.s7 .r3-tv { background: linear-gradient(160deg, #3b5b6b, #1a2a33); }
.r3-plate { position: absolute; width: 9px; height: 9px; background: #fff; border-radius: 1px; box-shadow: 0 0 0 1px rgba(0,0,0,.15); opacity: 0; transition: opacity .4s; }
.room3d.s5 .r3-plate { opacity: 1; transition-delay: 1.2s; }

/* false ceiling */
.r3-bulk { transform: translate3d(0, 0, 90px); transition: transform .3s ease; }
.room3d.s3 .r3-bulk { transform: none; transition: transform 1s cubic-bezier(.2,.8,.2,1) 1.9s; }
.r3-bulk .r3-f { opacity: 0; transition: opacity .25s; }
.room3d.s3 .r3-bulk .r3-f { opacity: 1; transition: opacity .6s 1.9s; }
.r3-bulk-top { background: #f6f3ed; box-shadow: inset 0 0 0 1px rgba(0,0,0,.05); }
.r3-bulk-face { background: linear-gradient(to bottom, #e3ddd2, #ece7de); }
.room3d.s5 .r3-bulk-face { background: #f1ece4; }
.r3-spot { width: 10px; height: 6px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.08); }
.room3d.s7 .r3-spot { background: #fff4d8; box-shadow: 0 0 10px 4px rgba(255,214,150,.9); }

/* joinery + furniture — materials shaded as if lit from the window side:
   tops lightest, faces toward the camera mid, side faces darker. */
.r3-oak .r3-top { background: #dcc199 repeating-linear-gradient(90deg, rgba(120,84,44,.10) 0 1px, transparent 1px 6px, rgba(255,255,255,.08) 6px 7px, transparent 7px 11px); }
.r3-oak .r3-fy { background: linear-gradient(to top, rgba(0,0,0,.05), rgba(255,255,255,.06)), #c39a69 repeating-linear-gradient(90deg, rgba(110,74,38,.12) 0 1px, transparent 1px 5px, rgba(255,240,210,.10) 5px 6px, transparent 6px 13px); }
.r3-oak .r3-fx { background: linear-gradient(to top, rgba(0,0,0,.06), rgba(255,255,255,.04)), #b0855a repeating-linear-gradient(0deg, rgba(100,66,34,.12) 0 1px, transparent 1px 7px, rgba(255,235,200,.08) 7px 8px, transparent 8px 12px); }
.r3-door, .r3-drw { position: absolute; top: 0; bottom: 0; box-shadow: inset -1px 0 0 rgba(60,38,18,.45), inset 1px 0 0 rgba(255,236,205,.25); }
.r3-handle { position: absolute; top: 72px; width: 2px; height: 46px; border-radius: 1px; background: linear-gradient(90deg, #1b1b1b, #4a4a4a); box-shadow: 1px 0 1px rgba(0,0,0,.25); }
.r3-wardrobe .r3-top { box-shadow: inset 0 0 0 1px rgba(80,55,30,.25); }
.r3-tvunit .r3-fy::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: rgba(60,38,18,.25); }
.r3-dark .r3-top { background: #3a3a3c; } .r3-dark .r3-fy { background: #2a2a2c; } .r3-dark .r3-fx { background: #222224; }
.r3-walnut .r3-top { background: #7b5638 repeating-linear-gradient(90deg, rgba(40,22,10,.18) 0 1px, transparent 1px 5px); }
.r3-walnut .r3-fy { background: #654429; } .r3-walnut .r3-fx { background: #563a23; }
.r3-tabletop .r3-top { box-shadow: inset 0 0 0 1px rgba(30,15,5,.3), inset 0 0 12px rgba(255,220,180,.12); }
.r3-fabric .r3-top { background: #b6afa4 repeating-linear-gradient(45deg, rgba(0,0,0,.035) 0 1px, transparent 1px 3px), #b6afa4; }
.r3-fabric .r3-fy { background: linear-gradient(to top, rgba(0,0,0,.10), rgba(255,255,255,.05)), #a29b90; }
.r3-fabric .r3-fx { background: linear-gradient(to top, rgba(0,0,0,.12), rgba(0,0,0,0)), #918a80; }
.r3-f-light .r3-top { background: radial-gradient(ellipse at 50% 45%, #cbc5bb, #b7b0a5 80%); border-radius: 4px; }
.r3-f-light .r3-fy, .r3-f-light .r3-fx { border-radius: 3px; }
.r3-f-dark .r3-top { background: #8e877d; } .r3-f-dark .r3-fy { background: #7c766d; } .r3-f-dark .r3-fx { background: #6e685f; }
.r3-cushion .r3-top { background: #c8a46a; border-radius: 3px; } .r3-cushion .r3-fy { background: #b08c55; border-radius: 3px; } .r3-cushion .r3-fx { background: #9c7a48; border-radius: 3px; }
.r3-cushion-2 .r3-top { background: #6f8a86; } .r3-cushion-2 .r3-fy { background: #5f7975; } .r3-cushion-2 .r3-fx { background: #536a66; }
.r3-book .r3-top { background: #e9e2d4; } .r3-book .r3-fy { background: #28485a; } .r3-book .r3-fx { background: #f2ece0; }
.r3-book-2 .r3-top { background: #d8cbb2; } .r3-book-2 .r3-fy { background: #8a4b32; }
.r3-ceramic .r3-top { background: radial-gradient(circle, #3b3b3b 30%, #5c5a57 60%, #4a4846); border-radius: 50%; }
.r3-ceramic .r3-fy, .r3-ceramic .r3-fx { background: #4a4846; border-radius: 0 0 6px 6px; }
.r3-pot .r3-top { background: radial-gradient(circle, #5a4a3a 55%, #d6cdbf 58%); border-radius: 3px; }
.r3-pot .r3-fy { background: #d2c8b9; } .r3-pot .r3-fx { background: #bdb3a4; }
.r3-shade .r3-top { background: #f3ece0; border-radius: 50%; } .r3-shade .r3-fy { background: linear-gradient(to top, #e8dfd0, #f6f0e6); border-radius: 0 0 2px 2px; } .r3-shade .r3-fx { background: #ddd3c3; }
.room3d.s7 .r3-shade .r3-fy, .room3d.s7 .r3-shade .r3-fx { background: linear-gradient(to top, #ffd9a0, #fff1d6); box-shadow: 0 0 24px 8px rgba(255,200,130,.55); }
.r3-bb { position: absolute; transform-origin: 50% 100%; }
.r3-bb svg { width: 100%; height: 100%; display: block; overflow: visible; filter: drop-shadow(2px 4px 3px rgba(0,0,0,.18)); }
.room3d.s7 .r3-plant svg { filter: drop-shadow(2px 4px 3px rgba(0,0,0,.3)) brightness(.8); }

/* floor: ambient occlusion at the wall joints, soft contact shadows */
.r3-ao { inset: 0; background: linear-gradient(to bottom, rgba(40,30,20,.20), transparent 26px), linear-gradient(to right, rgba(40,30,20,.20), transparent 26px); opacity: 0; transition: opacity .8s; }
.room3d.s3 .r3-ao { opacity: 1; transition-delay: 1.6s; }
.r3-csh { border-radius: 50%; background: radial-gradient(ellipse at 50% 50%, rgba(25,18,10,.42), rgba(25,18,10,.18) 45%, transparent 72%); opacity: 0; transition: opacity .6s; }
.room3d.s6 .r3-csh-j { opacity: 1; transition-delay: .5s; }
.room3d.s7 .r3-csh-f { opacity: 1; transition-delay: .7s; }
.r3-rug { background: #ddd0bb; border-radius: 4px;
  background-image: repeating-linear-gradient(90deg, rgba(120,100,70,.10) 0 1px, transparent 1px 3px), repeating-linear-gradient(0deg, rgba(120,100,70,.08) 0 1px, transparent 1px 3px);
  box-shadow: inset 0 0 0 6px #d1c1a6, inset 0 0 0 7px rgba(140,115,80,.4); opacity: 0; transition: opacity .8s var(--ease) .3s; }
.r3-skirt { position: absolute; left: 0; right: 0; top: 0; height: 7px; background: linear-gradient(to bottom, #e9e4dc, #fbf9f5); box-shadow: 0 -1px 0 rgba(0,0,0,.08); opacity: 0; transition: opacity .5s; }
.room3d.s5 .r3-skirt { opacity: 1; transition-delay: 1.1s; }
.r3-curtain { position: absolute; background: repeating-linear-gradient(90deg, rgba(255,255,255,.92) 0 3px, rgba(232,226,214,.9) 3px 6px, rgba(250,248,242,.92) 6px 8px); opacity: 0; transform: scaleX(.3); transition: opacity .6s, transform .8s var(--ease); }
.room3d.s7 .r3-curtain { opacity: .95; transform: none; transition-delay: .3s; }
.r3-tv i { position: absolute; inset: 0; background: linear-gradient(120deg, rgba(255,255,255,.10) 0 30%, transparent 31%); }
.r3-art { position: absolute; background: #d9c2a0; box-shadow: 0 0 0 3px #b89466, 2px -3px 6px rgba(0,0,0,.25); padding: 8px; box-sizing: border-box; opacity: 0; transition: opacity .7s .5s; }
.r3-art i { display: block; width: 100%; height: 100%; background: #f2ede4 radial-gradient(ellipse at 35% 60%, rgba(160,140,110,.45), transparent 50%), radial-gradient(ellipse at 70% 30%, rgba(190,170,140,.4), transparent 45%); box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.room3d.s7 .r3-art { opacity: 1; }

/* reveal choreography */
.r3-tvunit, .r3-soundbar { transform: translate3d(0, -60px, 0); transition: transform .3s; }
.r3-wardrobe, .r3-plinth { transform: translate3d(-60px, 0, 0); transition: transform .3s; }
.room3d.s6 .r3-tvunit, .room3d.s6 .r3-wardrobe, .room3d.s6 .r3-soundbar, .room3d.s6 .r3-plinth { transform: none; transition: transform .9s cubic-bezier(.2,.8,.2,1); }
.room3d.s6 .r3-wardrobe, .room3d.s6 .r3-plinth { transition-delay: .3s; }
.r3-oak .r3-f, .r3-soundbar .r3-f, .r3-plinth .r3-f, .r3-sofa .r3-f { opacity: 0; transition: opacity .25s; }
.room3d.s6 .r3-oak .r3-f, .room3d.s6 .r3-soundbar .r3-f, .room3d.s6 .r3-plinth .r3-f { opacity: 1; transition: opacity .6s .1s; }
.r3-sofa { transform: translate3d(0, 50px, 0); transition: transform .3s; }
.room3d.s7 .r3-sofa { transform: none; transition: transform 1s cubic-bezier(.2,.8,.2,1) .4s; }
.room3d.s7 .r3-sofa .r3-f { opacity: 1; transition: opacity .7s .4s; }
.r3-sofa .r3-bb { opacity: 0; transition: opacity .25s; }
.room3d.s7 .r3-sofa .r3-bb { opacity: 1; transition: opacity .8s .7s; }

/* handover badge */
.r3-badge { position: absolute; z-index: 3; top: 18px; inset-inline-end: 18px; display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 15px 9px 11px; border-radius: var(--radius-pill); background: #fff; color: var(--color-teal-700);
  font-size: 13px; font-weight: 700; box-shadow: 0 10px 30px rgba(0,0,0,.18); opacity: 0; transform: translateY(-10px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.r3-badge svg { flex: none; color: #fff; background: var(--color-teal); border-radius: 50%; padding: 4px; width: 22px; height: 22px; box-shadow: 0 0 0 0 rgba(6,96,123,.5); }
.room3d.s8 .r3-badge { opacity: 1; transform: none; }
.room3d.s8 .r3-badge svg { animation: r3Pulse 2s ease-out infinite; }
@keyframes r3Pulse { 0% { box-shadow: 0 0 0 0 rgba(6,96,123,.45); } 100% { box-shadow: 0 0 0 12px rgba(6,96,123,0); } }
.r3-progress { position: absolute; z-index: 3; left: 22px; right: 22px; bottom: 18px; height: 3px; border-radius: 3px; background: rgba(42,39,36,.10); overflow: hidden; }
.r3-progress i { position: absolute; inset: 0; background: var(--color-brass); transform: scaleX(0); transform-origin: 0 50%; }
[dir="rtl"] .r3-progress i { transform-origin: 100% 50%; }
.room3d.s7 .r3-progress { background: rgba(255,255,255,.14); }
.r3-hint { position: absolute; z-index: 3; left: 50%; bottom: 34px; transform: translateX(-50%); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--color-text-soft); transition: opacity .4s; }
.room3d:not([data-stage="0"]) .r3-hint { opacity: 0; }

/* phones & small tablets: room on top, one stage card below */
@media (max-width: 860px) {
  .room3d { height: 560vh; }
  .r3-sticky { align-items: flex-start; padding-top: calc(var(--nav-h, 64px) + 6px); }
  .r3-grid { grid-template-columns: 1fr; gap: 14px; }
  .r3-copy { order: 2; }
  .r3-copy .kicker { display: none; }
  .r3-copy h2 { font-size: 22px; margin: 0; }
  .r3-intro, .r3-list { display: none; }
  .r3-card { display: block; position: relative; margin-top: 10px; padding: 14px 16px 16px; background: var(--color-surface); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); min-height: 104px; }
  .r3-count { display: block; font-family: var(--font-heading); font-size: 13px; color: var(--color-brass); }
  .r3-card-title { display: block; font-family: var(--font-heading); font-weight: 600; font-size: 18px; color: var(--color-ink); margin: 2px 0 4px; }
  .r3-card-body { display: block; font-size: 14px; line-height: 1.5; color: var(--color-text); }
  .r3-stage { order: 1; height: 50vh; height: 50svh; border-radius: var(--radius-lg); }
  .r3-badge { top: 12px; inset-inline-end: 12px; font-size: 12px; padding: 7px 12px 7px 9px; }
}
@media (max-width: 860px) and (max-height: 640px) { .r3-stage { height: 44svh; } .r3-card { min-height: 92px; } }

/* reduced motion / no observer: finished room, full list, no sticking */
.room3d.r3-static { height: auto; }
.room3d.r3-static .r3-sticky { position: relative; height: auto; padding: 80px 0; }
.room3d.r3-static .r3-list li { opacity: 1; }
.room3d.r3-static .r3-list span:not(.r3-n) { max-height: none; opacity: 1; margin-top: 3px; }
.room3d.r3-static .r3-hint, .room3d.r3-static .r3-progress { display: none; }
.room3d.r3-static * { transition: none !important; }

/* ====================================================================
   SERVICES — Material studio (one real panel, five finishes)
   ==================================================================== */
.fs-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .92fr); gap: clamp(28px, 5vw, 84px); align-items: center; }
.fs-copy h2 { font-size: clamp(30px, 3.2vw, 44px); }
.fs-intro { font-size: 16px; line-height: 1.7; color: var(--color-text); margin: 14px 0 22px; max-width: 46ch; }
.fs-swatches { display: flex; flex-direction: column; gap: 8px; max-width: 460px; }
.fs-sw { display: flex; align-items: center; gap: 14px; width: 100%; text-align: start; padding: 10px 14px 10px 10px; border-radius: var(--radius-md);
  border: 1px solid var(--color-line-soft); background: var(--color-surface); cursor: pointer; font: inherit; color: inherit;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease); }
.fs-sw:hover { border-color: var(--color-line); transform: translateX(2px); }
[dir="rtl"] .fs-sw:hover { transform: translateX(-2px); }
.fs-sw.on { border-color: var(--color-brass); box-shadow: 0 0 0 1px var(--color-brass), var(--shadow-sm); }
.fs-sw:focus-visible { outline: 2px solid var(--color-teal); outline-offset: 2px; }
.fs-chip { flex: none; width: 40px; height: 40px; border-radius: 50%; background: radial-gradient(circle at 32% 28%, var(--c1), var(--c2) 80%); box-shadow: inset 0 0 0 1px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.14); }
.fs-tx b { display: block; font-family: var(--font-heading); font-weight: 600; font-size: 16px; color: var(--color-ink); line-height: 1.25; }
.fs-tx em { display: block; font-style: normal; font-size: 13px; line-height: 1.45; color: var(--color-text-soft); margin-top: 2px; }
.fs-stage { position: relative; margin: 0; justify-self: center; width: 100%; max-width: min(520px, calc(78vh * .8)); aspect-ratio: 4 / 5;
  border-radius: var(--radius-xl); overflow: hidden; background: #e9e4da; box-shadow: var(--shadow-lg); touch-action: pan-y; -webkit-tap-highlight-color: transparent; }
.fs-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .7s var(--ease); }
.fs-img.on { opacity: 1; }
.fs-sheen { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .5s var(--ease);
  background: radial-gradient(circle 34% at var(--lx, 50%) var(--ly, 40%), rgba(255,246,226,.38), rgba(255,246,226,0) 70%); mix-blend-mode: soft-light; }
.fs-stage.fs-lit .fs-sheen { opacity: 1; }
.fs-label { position: absolute; left: 14px; bottom: 14px; z-index: 2; display: flex; flex-direction: column; gap: 1px; padding: 9px 14px; border-radius: var(--radius-md);
  background: rgba(250,246,238,.94); box-shadow: 0 6px 20px rgba(0,0,0,.16); max-width: calc(100% - 28px); }
[dir="rtl"] .fs-label { left: auto; right: 14px; }
.fs-label b { font-family: var(--font-heading); font-weight: 600; font-size: 15px; color: var(--color-ink); }
.fs-label span { font-size: 12px; color: var(--color-text-soft); }
@media (max-width: 860px) {
  .fs-grid { grid-template-columns: 1fr; gap: 18px; }
  .fs-stage { order: 2; max-width: none; border-radius: var(--radius-lg); }
  .fs-intro { margin-bottom: 14px; }
  .fs-swatches { flex-direction: row; overflow-x: auto; gap: 8px; padding-bottom: 6px; margin: 0 -20px; padding-inline: 20px; scroll-snap-type: x mandatory; scrollbar-width: none; max-width: none; }
  .fs-swatches::-webkit-scrollbar { display: none; }
  .fs-sw { flex: none; width: auto; scroll-snap-align: start; padding: 8px 14px 8px 8px; gap: 10px; }
  .fs-sw:hover { transform: none; }
  .fs-chip { width: 30px; height: 30px; }
  .fs-tx em { display: none; }
  .fs-tx b { font-size: 14.5px; white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) { .fs-img { transition: none; } }

/* ====================================================================
   HOME — Day ↔ night dial
   ==================================================================== */
.dn-grid { display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); gap: clamp(28px, 4.5vw, 72px); align-items: center; }
.dn-copy h2 { font-size: clamp(28px, 3vw, 42px); }
.dn-intro { font-size: 16px; line-height: 1.7; color: var(--color-text); margin: 14px 0 18px; max-width: 44ch; }
.dn-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.dn-points li { position: relative; padding-inline-start: 22px; font-size: 14.5px; color: var(--color-text); line-height: 1.5; }
.dn-points li::before { content: ""; position: absolute; inset-inline-start: 0; top: .5em; width: 9px; height: 9px; border-radius: 50%; background: var(--color-brass); box-shadow: 0 0 0 3px var(--color-brass-tint); }
.dn-frame { position: relative; margin: 0; border-radius: var(--radius-xl); overflow: hidden; aspect-ratio: 4 / 3; background: #d8d2c6; box-shadow: var(--shadow-lg); }
.dn-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dn-night { opacity: 0; will-change: opacity; }
.dn-glow { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: linear-gradient(105deg, rgba(255,170,90,.0) 20%, rgba(255,160,80,.22) 55%, rgba(255,120,60,.12) 100%); }
.dn-ui { position: absolute; left: 16px; right: 16px; bottom: 16px; z-index: 2; display: flex; align-items: center; gap: 14px;
  padding: 10px 14px 10px 16px; border-radius: var(--radius-pill); background: rgba(250,246,238,.94); box-shadow: 0 8px 26px rgba(0,0,0,.18); transition: background .5s var(--ease), color .5s var(--ease); }
.dn-dark .dn-ui { background: rgba(14,36,44,.86); color: #f3ecdd; }
.dn-time { flex: none; display: flex; flex-direction: column; line-height: 1.1; min-width: 74px; }
.dn-time b { font-family: var(--font-heading); font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.dn-time em { font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--color-brass); }
.dn-dial { flex: 1; display: flex; align-items: center; gap: 10px; min-width: 0; }
.dn-ico { flex: none; opacity: .8; }
.dn-track { position: relative; flex: 1; height: 44px; display: flex; align-items: center; }
.dn-track::before { content: ""; position: absolute; left: 0; right: 0; height: 4px; border-radius: 4px; background: linear-gradient(90deg, #f2d48a, #e89a5a 50%, #3b4f7c); opacity: .35; }
.dn-fill { position: absolute; left: 0; right: 0; height: 4px; border-radius: 4px; background: linear-gradient(90deg, #f2d48a, #e89a5a 50%, #3b4f7c); transform-origin: 0 50%; transform: scaleX(0); }
[dir="rtl"] .dn-fill { transform-origin: 100% 50%; }
.dn-range { position: relative; z-index: 1; width: 100%; height: 44px; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; touch-action: pan-y; }
.dn-range:focus { outline: none; }
.dn-range::-webkit-slider-runnable-track { height: 44px; background: transparent; }
.dn-range::-moz-range-track { height: 44px; background: transparent; }
.dn-range::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; margin-top: 9px; border-radius: 50%; background: #fff; border: 3px solid var(--color-brass); box-shadow: 0 2px 10px rgba(0,0,0,.25); }
.dn-range::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 3px solid var(--color-brass); box-shadow: 0 2px 10px rgba(0,0,0,.25); }
.dn-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(6,96,123,.35), 0 2px 10px rgba(0,0,0,.25); }
@media (max-width: 860px) {
  .dn-grid { grid-template-columns: 1fr; gap: 20px; }
  .dn-frame { border-radius: var(--radius-lg); }
  .dn-ui { left: 10px; right: 10px; bottom: 10px; gap: 10px; padding: 6px 10px 6px 12px; }
  .dn-time { min-width: 62px; } .dn-time b { font-size: 17px; } .dn-time em { font-size: 9.5px; }
}
/* Grid children must be allowed to shrink below their content's width —
   otherwise the swatch scroller (one long row on phones) widened the whole
   section past the screen edge. */
.fs-grid > *, .r3-grid > *, .dn-grid > * { min-width: 0; }
/* Desktop: keep the sticky scene clear of the fixed navigation bar. */
@media (min-width: 861px) {
  .r3-sticky { padding-top: 72px; box-sizing: border-box; }
  .r3-stage { height: min(calc(100vh - 140px), 640px); }
}
@media (min-width: 861px) and (max-height: 820px) {
  .r3-intro { display: none; }
  .r3-copy h2 { margin-bottom: 14px; }
  .r3-list li { padding: 6px 0; }
}
.pb-enable.pb-enable-sm { left: auto; top: 12px; inset-inline-end: 12px; transform: none; padding: 8px 13px; font-size: 11.5px; letter-spacing: .02em; box-shadow: 0 6px 18px rgba(6,96,123,.3); }

/* ====================================================================
   HOME — What we do: the three parts of the company
   ==================================================================== */
.pillar-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 26px); }
.pillar { display: flex; flex-direction: column; background: var(--color-surface); border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-sm); color: inherit; text-decoration: none; border: 1px solid var(--color-line-soft);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease); }
.pillar:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.pillar:focus-visible { outline: 2px solid var(--color-teal); outline-offset: 3px; }
.pillar-media { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--color-bg-soft); }
.pillar-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.1s var(--ease); }
.pillar:hover .pillar-media img { transform: scale(1.045); }
.pillar-body { display: flex; flex-direction: column; flex: 1; padding: 22px 24px 24px; }
.pillar-n { font-family: var(--font-heading); font-size: 14px; color: var(--color-brass); }
.pillar-title { font-family: var(--font-heading); font-weight: 600; font-size: clamp(21px, 1.8vw, 25px); color: var(--color-ink); line-height: 1.2; margin: 6px 0 10px; }
.pillar-text { font-size: 15px; line-height: 1.65; color: var(--color-text); }
.pillar-list { display: flex; flex-wrap: wrap; gap: 6px; margin: 16px 0 18px; }
.pillar-list span { font-size: 12px; font-weight: 600; color: var(--color-teal-700); background: var(--color-teal-tint); padding: 6px 10px; border-radius: var(--radius-pill); }
.pillar-more { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--color-teal); }
.pillar-more svg { transition: transform .3s var(--ease); }
.pillar:hover .pillar-more svg { transform: translateX(4px); }
[dir="rtl"] .pillar-more svg { transform: scaleX(-1); }
[dir="rtl"] .pillar:hover .pillar-more svg { transform: scaleX(-1) translateX(4px); }
@media (max-width: 960px) { .pillar-grid { grid-template-columns: 1fr; max-width: 640px; } .pillar { flex-direction: row; } .pillar-media { width: 40%; flex: none; aspect-ratio: auto; } }
@media (max-width: 620px) { .pillar { flex-direction: column; } .pillar-media { width: 100%; aspect-ratio: 16 / 10; } .pillar-body { padding: 18px 18px 20px; } }

/* HOME — signature strip sits under its own heading now */
.signature .plaster-band { margin-top: 4px; }

/* SERVICES — divider that introduces the gypsum disciplines */
.svc-divider { padding-bottom: 0; }
.svc-divider .medallion-divider { margin-bottom: 26px; }
.svc-divider-intro { max-width: 60ch; margin: 14px auto 0; }

/* ====================================================================
   ABOUT — "Our work, our hands" gallery (real photographs)
   ==================================================================== */
.gallery-band .section-head { align-items: end; }
.gal-nav { display: flex; gap: 8px; }
.gal-btn { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--color-line); background: var(--color-surface); color: var(--color-ink);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background .25s, border-color .25s, transform .25s; }
.gal-btn:hover { border-color: var(--color-teal); background: var(--color-teal-tint); }
.gal-btn:focus-visible { outline: 2px solid var(--color-teal); outline-offset: 2px; }
[dir="rtl"] .gal-btn svg { transform: scaleX(-1); }
.gal-track { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: max(var(--edge), calc((100vw - var(--wrap)) / 2 + var(--edge)));
  padding: 6px max(var(--edge), calc((100vw - var(--wrap)) / 2 + var(--edge))) 22px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.gal-track::-webkit-scrollbar { display: none; }
.gal-track:focus-visible { outline: 2px solid var(--color-teal); outline-offset: -2px; }
.gal-tile { position: relative; flex: none; width: clamp(240px, 26vw, 340px); aspect-ratio: 4 / 5; margin: 0; border-radius: var(--radius-lg); overflow: hidden;
  scroll-snap-align: start; box-shadow: var(--shadow-md); background: var(--color-bg-soft); }
.gal-tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.1s var(--ease); }
.gal-tile:hover img { transform: scale(1.05); }
.gal-tile figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 44px 18px 16px; display: flex; flex-direction: column; gap: 3px;
  background: linear-gradient(to top, rgba(10,24,28,.82), rgba(10,24,28,0)); color: #fff; }
.gal-tile figcaption b { font-family: var(--font-heading); font-weight: 600; font-size: 17px; line-height: 1.25; }
.gal-tile figcaption span { font-size: 12.5px; color: rgba(255,255,255,.8); }
@media (max-width: 860px) { .gal-tile { width: 74vw; } .gal-nav { display: none; } }

/* ABOUT — capabilities in two groups */
.chip-groups { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 40px); max-width: 1080px; margin: 0 auto; }
.chip-group { background: var(--color-surface); border: 1px solid var(--color-line-soft); border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow-sm); }
.chip-group-title { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--color-brass); margin-bottom: 14px; }
.chip-group .chip-set { justify-content: flex-start; max-width: none; margin: 0; }
@media (max-width: 860px) { .chip-groups { grid-template-columns: 1fr; } .chip-group { padding: 18px; } }

/* ====================================================================
   DARK MODE
   Follows the visitor's phone/computer setting by default; the sun/moon
   switch in the header overrides it (remembered on the device).
   Built from the brand: deep teal-charcoal ground, warm ivory type,
   brass accents. Photos and the 3D scenes keep their real colours.
   ==================================================================== */
:root { color-scheme: light; }
html[data-theme="dark"] {
  color-scheme: dark;
  --color-bg: #0E1418;
  --color-bg-soft: #131B20;
  --color-surface: #18222A;
  --color-ink: #F2ECE2;
  --color-text: #C9C3B8;
  --color-text-soft: #8D9592;
  --color-teal: #2B8DA9;
  --color-teal-600: #2584A0;
  --color-teal-700: #7CC3D7;
  --color-teal-800: #A8D8E5;
  --color-teal-tint: rgba(75, 169, 195, .14);
  --color-teal-tint-2: rgba(75, 169, 195, .26);
  --color-brass: #C9A66B;
  --color-brass-light: #D7BC8C;
  --color-brass-tint: rgba(201, 166, 107, .16);
  --color-line: rgba(242, 236, 226, .13);
  --color-line-soft: rgba(242, 236, 226, .075);
  --shadow-sm: 0 2px 12px rgba(0, 0, 0, .35);
  --shadow-md: 0 14px 34px rgba(0, 0, 0, .45);
  --shadow-lg: 0 26px 64px rgba(0, 0, 0, .55);
  --shadow-inset: inset 0 0 0 1px rgba(242, 236, 226, .08);
  --glass: rgba(16, 23, 28, .9);
}
/* smooth cross-fade only while switching, never during normal scrolling */
html.theme-anim, html.theme-anim *, html.theme-anim *::before, html.theme-anim *::after {
  transition: background-color .4s ease, color .4s ease, border-color .4s ease, fill .4s ease, box-shadow .4s ease !important;
}

/* background texture layers: the light sweep is for the ivory ground only */
html[data-theme="dark"] .plaster-ground::before { display: none; }
html[data-theme="dark"] .plaster-ground::after { opacity: .05; }
html[data-theme="dark"] .so-ring { mix-blend-mode: screen; opacity: .2; }
@media (hover: none), (pointer: coarse), (max-width: 900px) { html[data-theme="dark"] .so-ring { mix-blend-mode: normal; opacity: .12; } }

/* buttons */
html[data-theme="dark"] .btn-primary:hover, html[data-theme="dark"] .ba-handle:hover { background: #217A94; }
html[data-theme="dark"] .btn-light { background: #F2ECE2; color: #0A2830; }
html[data-theme="dark"] .btn-secondary { color: var(--color-teal-700); border-color: rgba(124, 195, 215, .45); }

/* bars and floating controls that were ivory glass */
html[data-theme="dark"] .site-nav { background: color-mix(in srgb, var(--color-bg) 86%, transparent); }
html[data-theme="dark"] .site-nav.scrolled { background: color-mix(in srgb, var(--color-bg) 94%, transparent); }
@media (max-width: 860px) {
  html[data-theme="dark"] .site-nav { background: rgba(14, 20, 24, .97); }
  html[data-theme="dark"] .m-actions { background: rgba(14, 20, 24, .97); border-top-color: var(--color-line); }
  html[data-theme="dark"] .m-call { background: var(--color-surface); color: var(--color-ink); border-color: var(--color-line); }
  html[data-theme="dark"] .mobile-menu { box-shadow: 0 24px 40px rgba(0, 0, 0, .5); }
}
html[data-theme="dark"] .proj-code, html[data-theme="dark"] .proj-modal-close, html[data-theme="dark"] .pm-arrow,
html[data-theme="dark"] .ba-tag, html[data-theme="dark"] .tm-close, html[data-theme="dark"] .fs-label,
html[data-theme="dark"] .pb-hint, html[data-theme="dark"] .r3-badge {
  background: var(--glass); color: var(--color-ink); box-shadow: 0 4px 18px rgba(0, 0, 0, .4);
}
html[data-theme="dark"] .proj-modal-close:hover, html[data-theme="dark"] .pm-arrow:hover { background: #22303A; }
html[data-theme="dark"] .r3-badge { color: var(--color-teal-700); }
html[data-theme="dark"] .dn-ui { background: rgba(14, 26, 32, .88); color: #f3ecdd; }
html[data-theme="dark"] .tech-modal.no-media .tm-close { background: rgba(255, 255, 255, .1); color: #fff; }

/* surfaces that had a fixed light colour */
html[data-theme="dark"] .tech-item:hover { background: #1E2A31; }
html[data-theme="dark"] .cl-card { background: rgba(255, 255, 255, .035); }
html[data-theme="dark"] .plaster-band, html[data-theme="dark"] .fs-stage,
html[data-theme="dark"] .proj-modal-media .arch-frame { background: #1A2329; }
html[data-theme="dark"] .r3-stage { background: radial-gradient(ellipse 80% 70% at 50% 38%, #22303A 0%, #161F25 72%, #10171C 100%); box-shadow: var(--shadow-md), inset 0 0 0 1px rgba(242,236,226,.06); }
html[data-theme="dark"] .room3d.s7 .r3-stage { background: radial-gradient(ellipse 80% 70% at 50% 38%, #24525d 0%, #0d323c 70%, #0a2830 100%); }
html[data-theme="dark"] .r3-progress { background: rgba(255, 255, 255, .1); }
html[data-theme="dark"] .r3-hint { color: var(--color-text-soft); }
html[data-theme="dark"] .room3d, html[data-theme="dark"] .anatomy { background: linear-gradient(180deg, var(--color-bg) 0%, var(--color-bg-soft) 10%, var(--color-bg-soft) 90%, var(--color-bg) 100%); }
html[data-theme="dark"] .cta-band { background: #0A2830; box-shadow: inset 0 1px 0 rgba(255,255,255,.04), inset 0 -1px 0 rgba(255,255,255,.04); }
html[data-theme="dark"] .field select, html[data-theme="dark"] .field select.input {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%237CC3D7' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
}
html[data-theme="dark"] input:-webkit-autofill, html[data-theme="dark"] textarea:-webkit-autofill, html[data-theme="dark"] select:-webkit-autofill {
  -webkit-text-fill-color: var(--color-ink); -webkit-box-shadow: 0 0 0 40px var(--color-surface) inset; caret-color: var(--color-ink);
}
html[data-theme="dark"] ::placeholder { color: #6E7774; }
/* photos sit a touch softer on a dark ground so they don't glare */
html[data-theme="dark"] .proj-media img, html[data-theme="dark"] .pillar-media img, html[data-theme="dark"] .arch-frame img { filter: brightness(.94); }

/* ---------- the switch ---------- */
.theme-toggle {
  position: relative; flex: none; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--color-line); background: var(--color-surface); color: var(--color-ink);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0;
  transition: border-color .25s var(--ease), transform .25s var(--ease), background-color .25s var(--ease);
}
.theme-toggle:hover { border-color: var(--color-teal); transform: rotate(-12deg); }
.theme-toggle:focus-visible { outline: 2px solid var(--color-teal); outline-offset: 2px; }
.theme-toggle svg { position: absolute; transition: opacity .35s var(--ease), transform .45s var(--ease); }
.theme-toggle .tt-sun { opacity: 0; transform: rotate(-90deg) scale(.6); color: var(--color-brass-light); }
.theme-toggle .tt-moon { opacity: 1; transform: none; }
html[data-theme="dark"] .theme-toggle .tt-sun { opacity: 1; transform: none; }
html[data-theme="dark"] .theme-toggle .tt-moon { opacity: 0; transform: rotate(90deg) scale(.6); }
@media (max-width: 860px) { .theme-toggle { width: 38px; height: 38px; } }
html[data-theme="dark"] .hero-title em, html[data-theme="dark"] h1 em, html[data-theme="dark"] h2 em { color: #5FB4CC; }

/* ====================================================================
   TOUCH FEEL — iOS-grade
   • no grey/blue tap rectangle on phones (the browser's default flash)
   • a soft press-in on every tappable thing (js: initPress, uses the
     independent `scale` property so it never fights other animations)
   • hover lifts only on devices that really hover — on a phone they used
     to "stick" after a tap
   • spring easing on the small moving parts
   ==================================================================== */
:root { --spring: cubic-bezier(.34, 1.56, .64, 1); --ios: cubic-bezier(.32, .72, 0, 1); }
html { -webkit-tap-highlight-color: transparent; }
a, button, label, summary, select, input, textarea, [role="button"], [tabindex] { -webkit-tap-highlight-color: transparent; }
a, button, label, summary, [role="button"], .proj-card, .tech-item, .pillar { touch-action: manipulation; }
/* a focus ring after a tap is noise; keyboards still get :focus-visible */
:focus:not(:focus-visible) { outline: none; }
@media (hover: none) {
  .btn:hover, .btn-primary:hover, .btn-secondary:hover, .btn-light:hover, .btn-wa:hover, .chip:hover,
  .social-link:hover, .wa-card:hover, a.cl-card:hover, .pillar:hover, .theme-toggle:hover, .fs-sw:hover,
  .gal-btn:hover, .map-load:hover { transform: none; }
  .map-load:hover { transform: translate(-50%, -50%); }
  .proj-card:hover .zoom-inner, .js .proj-card.reveal.in:hover .zoom-inner, .pillar:hover .pillar-media img,
  .gal-tile:hover img { transform: none; }
  .tech-item:hover .tech-icon { transform: none; }
  .btn-primary:hover { box-shadow: none; }
}
/* springier small parts */
.nav-burger::before, .nav-burger::after { transition: transform .5s var(--spring), opacity .25s ease !important; }
.theme-toggle svg { transition: opacity .3s ease, transform .6s var(--spring); }
.tm-dot::before, .proj-dot, .hero-dot, .pm-dot { transition-timing-function: var(--spring); }

/* mobile menu opens like an iOS sheet, links settle in one after another */
@media (max-width: 860px) {
  .mobile-menu { transform: translateY(-14px) scale(.985); transform-origin: 50% 0;
    transition: opacity .32s ease, transform .5s var(--ios), visibility 0s .5s; }
  .mobile-menu.open { transform: none; transition: opacity .3s ease, transform .55s var(--ios); }
  .mm-links a, .mm-actions, .mm-foot { opacity: 0; transform: translateY(10px); transition: opacity .3s ease, transform .5s var(--ios); }
  .mobile-menu.open .mm-links a, .mobile-menu.open .mm-actions, .mobile-menu.open .mm-foot { opacity: 1; transform: none; }
  .mobile-menu.open .mm-links a:nth-child(1) { transition-delay: .04s; }
  .mobile-menu.open .mm-links a:nth-child(2) { transition-delay: .08s; }
  .mobile-menu.open .mm-links a:nth-child(3) { transition-delay: .12s; }
  .mobile-menu.open .mm-links a:nth-child(4) { transition-delay: .16s; }
  .mobile-menu.open .mm-links a:nth-child(5) { transition-delay: .20s; }
  .mobile-menu.open .mm-actions { transition-delay: .24s; }
  .mobile-menu.open .mm-foot { transition-delay: .28s; }
}

/* dark/light switch: circular reveal from the button (View Transitions) */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-old(root) { z-index: 1; }
::view-transition-new(root) { z-index: 2; }

@media (prefers-reduced-motion: reduce) {
  .mobile-menu, .mm-links a, .mm-actions, .mm-foot { transition: none !important; transform: none !important; }
}

/* ============================================================
   SERVICE LANDING PAGES (interior-fit-out-dubai.html …)
   ============================================================ */
.sp-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 22px; font-size: 13px; color: var(--color-text-muted, var(--color-text)); }
.sp-crumbs a { color: inherit; text-decoration: none; opacity: .8; }
.sp-crumbs a:hover { color: var(--color-teal); opacity: 1; }
.sp-crumbs span[aria-hidden] { opacity: .45; }
.sp-crumbs [aria-current] { color: var(--color-ink); font-weight: 600; }
.sp-head { padding-top: clamp(26px, 4vh, 44px); }
.sp-main .list-check { margin-top: 22px; }
.sp-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.sp-actions .btn-wa { display: inline-flex; align-items: center; gap: 8px; }
.sp-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sp-two { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.sp-two > * { min-width: 0; }
.sp-faq h2 { margin: 12px 0 22px; }
.sp-faq-item { border-top: 1px solid var(--color-line); padding: 4px 0; }
.sp-faq-item:last-child { border-bottom: 1px solid var(--color-line); }
.sp-faq-item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 0; font-weight: 600; font-size: 16px; color: var(--color-ink); }
.sp-faq-item summary::-webkit-details-marker { display: none; }
.sp-faq-item summary::after { content: ""; flex: none; width: 10px; height: 10px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg) translateY(-3px); transition: transform .35s var(--spring, cubic-bezier(.32,.72,0,1)); opacity: .6; }
.sp-faq-item[open] summary::after { transform: rotate(-135deg) translateY(-1px); }
.sp-faq-item p { margin: 0 0 18px; line-height: 1.65; font-size: 15px; max-width: 62ch; }
.sp-areas { background: var(--color-bg-soft, #F4EFE6); border: 1px solid var(--color-line); border-radius: var(--radius-lg, 18px); padding: clamp(22px, 3vw, 32px); position: sticky; top: 96px; }
.sp-areas h3 { margin: 10px 0 12px; font-size: 22px; }
.sp-areas p { margin: 0; line-height: 1.7; font-size: 14.5px; }
.sp-related-band { padding-top: 0; }
.sp-related { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.sp-rel { display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px; border: 1px solid var(--color-line); border-radius: 999px; color: var(--color-ink); text-decoration: none; font-weight: 600; font-size: 14px; transition: border-color .25s, background .25s, color .25s; }
.sp-rel svg { transition: transform .35s var(--spring, cubic-bezier(.32,.72,0,1)); }
.sp-rel:hover { border-color: var(--color-teal); color: var(--color-teal); }
.sp-rel:hover svg { transform: translateX(3px); }
[dir="rtl"] .sp-rel svg { transform: scaleX(-1); }
[dir="rtl"] .sp-rel:hover svg { transform: scaleX(-1) translateX(3px); }
.footer-svc a { white-space: nowrap; }
@media (max-width: 900px) {
  .sp-two { grid-template-columns: 1fr; }
  .sp-areas { position: static; }
}
@media (hover: none) { .sp-rel:hover svg { transform: none; } [dir="rtl"] .sp-rel:hover svg { transform: scaleX(-1); } }