/* ==========================================================================
   AY Building — project layer
   --------------------------------------------------------------------------
   Loads after kit/. Rebuilt 2026-09-03 on Apple's design foundations.

   The four things this pass fixes, all of them reported:

   1. NOTHING IS HARD-CODED DARK. The previous hero pinned its own near-black
      ground, so light theme never actually reached it. Every surface here is
      a theme token.
   2. LESS ON ONE PAGE. Simplicity is not minimalism: the manufacturer tables
      are genuinely useful, so they stay — one level down, behind a
      disclosure, the common path first.
   3. DRAWINGS COME EARLY. They were five sections down. Products now sit
      directly under the hero.
   4. QUIETER HERO. Type-led, one primary action, no colour slab.

   RTL rule unchanged: no physical directions. inline-start / inline-end /
   padding-inline / text-align:start only.
   ========================================================================== */

/* --- Motion policy -------------------------------------------------------
   Reduced motion means a gentler equivalent, not nothing: opacity survives,
   translation and spring overshoot do not. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Theme swap guard. Chromium will not recompute a property that is BOTH
   transitioned and fed by a changed var() — the element latches its old
   value. Freeze transitions for one frame across the swap. */
:root.theme-swap,
:root.theme-swap *,
:root.theme-swap *::before,
:root.theme-swap *::after { transition: none !important; }

/* --- Skip link --------------------------------------------------------- */
.skip {
  position: absolute; inset-block-start: -100%; inset-inline-start: var(--pad);
  z-index: 100; background: var(--ink); color: var(--bg);
  padding: .7em 1.2em; border-radius: var(--radius); text-decoration: none;
}
.skip:focus { inset-block-start: .6rem; }

/* --- Header --------------------------------------------------------------
   A translucent material with content scrolling underneath, not an opaque
   strip. Separation arrives as a scroll-edge fade only once content actually
   reaches the chrome — a permanent 1px rule draws a line that is not there. */
.nav {
  position: sticky; inset-block-start: 0; z-index: 40;
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  transition: background var(--hover), box-shadow var(--hover);
}
.nav.is-stuck {
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  box-shadow: 0 1px 0 var(--line-soft), 0 8px 24px -18px rgb(0 0 0 / .5);
}
/* Frostier and opaque when the user asks for less transparency. */
@media (prefers-reduced-transparency: reduce) {
  .nav { background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; }
}
.nav__in {
  display: flex; align-items: center; gap: clamp(.75rem, 2vw, 2rem);
  min-height: 4.4rem;
}

.nav__brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; flex: none; }
.nav__mark { height: 1.9rem; width: auto; }

/* Theme-swapped artwork. `content: url()` on an <img> would be one element
   instead of two, but Firefox does not honour it — so ship both and toggle. */
.mark--dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .mark--light { display: none; }
  :root:not([data-theme="light"]) .mark--dark  { display: block; }
}
:root[data-theme="dark"]  .mark--light { display: none; }
:root[data-theme="dark"]  .mark--dark  { display: block; }
:root[data-theme="light"] .mark--light { display: block; }
:root[data-theme="light"] .mark--dark  { display: none; }

.nav__word {
  font-size: var(--step-0); font-weight: 500;
  letter-spacing: .1em; color: var(--ink); white-space: nowrap;
  direction: ltr; unicode-bidi: isolate;
}
.nav__word b { color: var(--brand-text); font-weight: 600; }
@media (max-width: 560px) { .nav__word { display: none; } }

.nav__links { display: flex; gap: clamp(.75rem, 2vw, 1.8rem); margin-inline-start: auto; }
.nav__links a {
  color: var(--muted); text-decoration: none; font-size: var(--step-0);
  padding-block: .3rem; transition: color var(--hover);
}
.nav__links a:hover { color: var(--ink); }

.nav__tools { display: flex; align-items: center; gap: clamp(.5rem, 1.5vw, 1rem); flex: none; }
.nav__cta { padding: .55em 1.15em; font-size: var(--step--1); }

.langs { display: flex; gap: .1rem; list-style: none; margin: 0; padding: 0;
         font-size: var(--step--1); direction: ltr; unicode-bidi: isolate; }
.langs li + li::before { content: "/"; color: var(--line); padding-inline: .15rem; }
.langs__on   { color: var(--ink); font-weight: 600; }
.langs__link { color: var(--muted); text-decoration: none; }
.langs__link:hover { color: var(--brand-text); }

/* Theme switch */
.theme {
  inline-size: 3.1rem; block-size: 1.7rem; padding: 2px; flex: none;
  border: 1px solid var(--line); border-radius: 99px; background: var(--surface);
  cursor: pointer; display: flex; align-items: center;
}
.theme__knob {
  inline-size: 1.3rem; block-size: 1.3rem; border-radius: 50%;
  background: var(--brand); display: grid; place-items: center;
  transition: transform .35s cubic-bezier(.32,.72,0,1);
}
[dir="rtl"] .theme[aria-checked="true"] .theme__knob { transform: translateX(-1.35rem); }
[dir="ltr"] .theme[aria-checked="true"] .theme__knob { transform: translateX(1.35rem); }
.theme svg { inline-size: .85rem; block-size: .85rem; fill: none; stroke: var(--on-brand); stroke-width: 1.8; }
.theme__moon { display: none; }
.theme[aria-checked="true"] .theme__sun { display: none; }
.theme[aria-checked="true"] .theme__moon { display: block; }

/* Mobile drawer.
   The breakpoint is set by the LONGEST nav, which is Turkish: five items
   (Hizmetler · Referanslar · Sistemler · Üreticiler · İletişim) beside the
   brand, language switcher, theme toggle and CTA. At 900px that row
   overflowed the viewport by ~100px, so it collapses earlier now. Raise this
   again if a nav item is ever added. */
.nav__toggle { display: none; }
@media (max-width: 1080px) {
  .nav__toggle {
    display: grid; gap: 4px; flex: none; margin-inline-start: auto;
    background: none; border: 0; cursor: pointer; padding: .5rem;
  }
  .nav__toggle span { display: block; inline-size: 20px; block-size: 2px; background: var(--ink); border-radius: 2px; }
  .nav__links {
    position: absolute; inset-block-start: 100%; inset-inline: 0;
    flex-direction: column; gap: 0; margin: 0;
    background: var(--bg); border-block-end: 1px solid var(--line);
    padding: .5rem var(--pad) 1.25rem;
  }
  .nav__links:not(.is-open) { display: none; }
  .nav__links a { padding-block: .8rem; border-block-end: 1px solid var(--line-soft); }
  /* Two class selectors, not one. `.nav__cta { display: none }` ties with
     `.btn { display: inline-flex }` on specificity, and .btn is defined
     lower in this file — so the plain selector lost and the 150px CTA stayed
     in the bar, pushing the header 63px past a 375px viewport. */
  .nav__tools .nav__cta { display: none; }
}

/* --- Buttons -------------------------------------------------------------
   Feedback lands on pointer-DOWN, not on release. Waiting for the click to
   acknowledge a press is the single cheapest way to feel dead. */
.btn {
  display: inline-flex; align-items: center; gap: .5em;
  padding: .8em 1.5em; border: 1px solid transparent; border-radius: 980px;
  font: inherit; font-size: var(--step-0); text-decoration: none; cursor: pointer;
  transition: background var(--hover), color var(--hover),
              border-color var(--hover), transform .12s ease-out;
}
.btn:active { transform: scale(.97); }
.btn--solid { background: var(--brand-text); color: var(--bg); }
.btn--solid:hover { background: var(--ink); }
.btn--plain { color: var(--brand-text); padding-inline: .25em; }
.btn--plain:hover { color: var(--ink); }
.btn__arrow { transition: transform .2s cubic-bezier(.32,.72,0,1); }
[dir="rtl"] .btn__arrow { transform: scaleX(-1); }
.btn--plain:hover .btn__arrow { transform: translateX(3px); }
[dir="rtl"] .btn--plain:hover .btn__arrow { transform: scaleX(-1) translateX(3px); }

/* --- Section heads -------------------------------------------------------
   One head shape, no small-caps kicker above every title. The eyebrow was
   repeated on five sections and added nothing but rhythm. */
.head { max-width: 40ch; margin-block-end: clamp(2.5rem, 6vw, 4rem); }
.head__title {
  font-size: var(--step-3); line-height: 1.1; letter-spacing: var(--track-title);
  margin: 0;
}
[lang|="ar"] .head__title { letter-spacing: 0; line-height: 1.35; }
.head__lede { color: var(--muted); font-size: var(--step-1); margin-block-start: 1rem; }

/* --- 2 · Services --------------------------------------------------------
   Groups stack; items inside sit in a plain multi-column list. No cards, no
   icons, no borders around every item — the page already carries drawings
   and datasheets, and boxing a seven-item list would add a third competing
   frame. Hierarchy comes from type and space alone. */
.svc { display: grid; gap: clamp(3rem, 7vw, 5rem); }
.svc__head { max-width: 46ch; margin-block-end: 1.75rem; }
.svc__title {
  font-size: var(--step-1); line-height: 1.25; letter-spacing: var(--track-title);
  margin: 0;
}
[lang|="ar"] .svc__title { letter-spacing: 0; line-height: 1.5; }
.svc__lede { color: var(--muted); margin-block-start: .4rem; }

.svc__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr; gap: 1.5rem 3rem;
  border-block-start: 1px solid var(--line-soft); padding-block-start: 1.75rem;
}
@media (min-width: 620px) { .svc__list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .svc__list { grid-template-columns: repeat(3, 1fr); } }

.svc__name { font-size: var(--step-0); font-weight: 600; margin: 0; }
.svc__note {
  color: var(--muted); font-size: var(--step--1);
  margin-block-start: .3rem; max-width: 40ch;
}

/* The "we'll also take that on" group. Recessed, not hidden: the firm wants
   the door open without claiming general contracting as its trade. */
.svc__group--aside {
  border-block-start: 1px solid var(--line-soft);
  padding-block-start: clamp(2rem, 5vw, 3rem);
}
.svc__group--aside .svc__title { font-size: var(--step-0); color: var(--muted); }
.svc__group--aside .svc__list { border-block-start: 0; padding-block-start: 0; }

/* --- 3 · References ------------------------------------------------------
   A photo grid the client fills. Empty, it draws the frames and names what
   each one needs, so the section doubles as the brief. 4:3 is reserved with
   aspect-ratio so supplied photos cannot reflow the page as they load. */
.app { display: grid; grid-template-columns: 1fr; gap: clamp(1.5rem, 4vw, 2.5rem); }
@media (min-width: 600px) { .app { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 940px) { .app { grid-template-columns: repeat(3, 1fr); } }

.app__fig {
  margin: 0; aspect-ratio: 4 / 3; overflow: hidden;
  border-radius: var(--radius, 10px);
  background: var(--surface); border: 1px solid var(--line-soft);
  display: grid; place-items: center;
}
.app__fig img { width: 100%; height: 100%; object-fit: cover; display: block; }
.app__name { font-size: var(--step-0); margin: .85rem 0 0; }
.app__meta { color: var(--muted); font-size: var(--step--1); margin: .2rem 0 0; }

.app__card--empty .app__fig {
  border-style: dashed; border-color: var(--flag-line, var(--line-soft));
  background: transparent;
}
/* --muted, not --line-soft. A hairline colour on a slot number measured
   1.21:1 — it is placeholder text, but it is still text and still has to be
   read. Faintness is not the same thing as invisibility. */
.app__num {
  font-family: var(--font-mono); font-size: var(--step-2);
  color: var(--muted); letter-spacing: .08em;
}
.app__needs { display: flex; flex-wrap: wrap; gap: .35rem .75rem; margin: .85rem 0 0; }
.app__need {
  font-size: var(--step--1); color: var(--muted);
}
.app__need + .app__need { border-inline-start: 1px solid var(--line-soft); padding-inline-start: .75rem; }
.app__ask { grid-column: 1 / -1; margin: .5rem 0 0; }


/* --- Photography ---------------------------------------------------------
   Stock imagery, carrying its own caption saying so. The caption is not
   decoration and must not be styled away: it is what keeps an illustrative
   photograph from reading as a finished job. Dimensions are reserved with
   aspect-ratio so a 390KB photograph cannot shove the type down the page as
   it decodes. */
.shot { margin: 0; }
.shot img {
  display: block; width: 100%; height: auto;
  border-radius: var(--radius, 2px); background: var(--surface);
}
.shot--hero img { aspect-ratio: 21 / 9; object-fit: cover; }
.shot--hero { margin-block-start: clamp(2.5rem, 6vw, 4rem); }
.shot--band img { aspect-ratio: 3 / 1; object-fit: cover; }
.shot--band { margin-block-end: clamp(2.5rem, 6vw, 3.5rem); }

@media (max-width: 620px) {
  .shot--hero img, .shot--band img { aspect-ratio: 16 / 10; }
}

/* --- 1 · Hero ------------------------------------------------------------
   Theme-aware. Large type with tracking that tightens as it grows, tight
   leading, generous space, and exactly one primary action. */
.hero { padding-block: clamp(4rem, 12vw, 8rem) clamp(3rem, 8vw, 5.5rem); }
.hero__in { max-width: 62rem; }

.hero__eyebrow {
  font-size: var(--step--1); color: var(--muted);
  margin-block-end: clamp(1rem, 3vw, 1.75rem);
}

.hero__title {
  font-size: clamp(2.4rem, 1.2rem + 5vw, 5rem);
  line-height: 1.04;
  letter-spacing: var(--track-display);
  font-weight: 600;
  margin: 0;
  max-width: 16ch;
  font-optical-sizing: auto;
  text-wrap: balance;
}
.hero__title span { display: block; }
.hero__title .g { color: var(--muted); }
/* Arabic takes no negative tracking — it shreds the joins — and needs more
   leading for its ascenders and stacked marks. */
[lang|="ar"] .hero__title { letter-spacing: 0; line-height: 1.3; max-width: 18ch; }

.hero__lede {
  font-size: var(--step-1); color: var(--muted); line-height: 1.6;
  max-width: 46ch; margin-block-start: clamp(1.5rem, 3.5vw, 2.25rem);
}
[lang|="ar"] .hero__lede { line-height: 1.9; }

.hero__actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem;
  margin-block-start: clamp(2rem, 4vw, 2.75rem);
}

/* Figures as a quiet row, not a colour slab. */
.hero__figs {
  display: grid; gap: clamp(1.25rem, 3vw, 2.5rem);
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  margin: clamp(3rem, 7vw, 4.5rem) 0 0;
  padding-block-start: clamp(1.5rem, 3vw, 2rem);
  border-block-start: 1px solid var(--line-soft);
  max-width: 46rem;
}
.hero__fig { margin: 0; }
.hero__v {
  display: block; font-family: var(--font-mono);
  font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.1rem); line-height: 1.1;
  letter-spacing: var(--track-title); color: var(--ink);
  direction: ltr; unicode-bidi: isolate; text-align: start; white-space: nowrap;
}
.hero__v em { font-style: normal; font-size: .5em; color: var(--muted); }
.hero__l { display: block; font-size: var(--step--1); color: var(--muted); margin-block-start: .4rem; }

/* --- 2 · Products --------------------------------------------------------
   Drawings large and early. Alternating so the eye is not marched down a
   single column. */
.fams { display: grid; gap: clamp(3.5rem, 9vw, 7rem); }
.fam {
  display: grid; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .fam { grid-template-columns: 1.05fr .95fr; }
  .fam:nth-child(even) .fam__fig { order: 2; }
}
.fam__fig {
  margin: 0; background: var(--surface);
  border-radius: clamp(12px, 2vw, 20px);
  padding: clamp(1.25rem, 3.5vw, 2.5rem);
}
.fam__index { font-family: var(--font-mono); font-size: var(--step--1); color: var(--muted); }
.fam__name {
  font-size: var(--step-2); margin-block-start: .5rem;
  letter-spacing: var(--track-title); line-height: 1.15;
}
[lang|="ar"] .fam__name { letter-spacing: 0; line-height: 1.4; }
.fam__note { color: var(--muted); margin-block-start: .9rem; max-width: 42ch; }
.fam__brand {
  margin-block-start: 1.1rem; font-size: var(--step--1); color: var(--muted);
}
.fam__specs { margin-block-start: 1.75rem; }

/* --- 3 · Manufacturers ---------------------------------------------------
   Two cards. Headline figure visible; the full 24-row datasheet one level
   down behind a disclosure. */
.makers { display: grid; gap: clamp(1.25rem, 3vw, 2rem); grid-template-columns: 1fr; }
@media (min-width: 900px) { .makers { grid-template-columns: 1fr 1fr; align-items: start; } }

.maker {
  background: var(--bg); border: 1px solid var(--line-soft);
  border-radius: clamp(12px, 2vw, 20px);
  padding: clamp(1.5rem, 3.5vw, 2.25rem);
}
.maker__logo { height: 1.75rem; width: auto; margin-block-end: 1.25rem; }
/* The Latin name is isolated by a <bdi> in the markup, not here: direction on
   the h3 itself would resolve text-align:start to left inside an Arabic card. */
.maker__name {
  font-size: var(--step-2); letter-spacing: var(--track-title); margin: 0;
}
.maker__meta { font-size: var(--step--1); color: var(--muted); margin-block-start: .4rem; }
.maker__note { color: var(--muted); margin-block-start: 1rem; }

.maker__head {
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; align-items: baseline;
  margin-block-start: 1.5rem; padding-block-start: 1.25rem;
  border-block-start: 1px solid var(--line-soft);
}
.maker__v {
  font-family: var(--font-mono); font-size: var(--step-2); color: var(--ink);
  direction: ltr; unicode-bidi: isolate; white-space: nowrap;
}
.maker__v em { font-style: normal; font-size: .55em; color: var(--muted); }
.maker__k { font-size: var(--step--1); color: var(--muted); }

/* Disclosure. Height animates from 0 with a critically damped curve — no
   overshoot, because nothing here carried momentum. */
.disc { margin-block-start: 1.25rem; }
.disc__btn {
  display: inline-flex; align-items: center; gap: .5em;
  background: none; border: 0; padding: .4em 0; cursor: pointer;
  font: inherit; font-size: var(--step--1); color: var(--brand-text);
  transition: color var(--hover);
}
.disc__btn:hover { color: var(--ink); }
.disc__chev { transition: transform .3s cubic-bezier(.32,.72,0,1); }
.disc__btn[aria-expanded="true"] .disc__chev { transform: rotate(180deg); }
.disc__panel {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .4s cubic-bezier(.32,.72,0,1);
}
.disc__panel.is-open { grid-template-rows: 1fr; }
.disc__inner { overflow: hidden; min-height: 0; }
.disc__pad { padding-block-start: 1.25rem; }

.ds__sub {
  font-size: var(--step--1); color: var(--muted);
  margin-block: 1.5rem .75rem;
}
.ds__sub:first-child { margin-block-start: 0; }
.ds__table {
  width: 100%; min-width: 26rem; border-collapse: collapse;
  font-variant-numeric: tabular-nums; font-size: var(--step--1);
}
.ds__tablewrap { overflow-x: auto; }
.ds__table th, .ds__table td { text-align: start; padding: .6rem .8rem; }
.ds__table thead th {
  color: var(--muted); font-weight: 500;
  border-block-end: 1px solid var(--line);
}
.ds__table td {
  font-family: var(--font-mono);
  border-block-end: 1px solid var(--line-soft);
  direction: ltr; unicode-bidi: isolate;
}
[dir="rtl"] .ds__table td { text-align: start; }
.ds__source {
  font-family: var(--font-mono); font-size: .7rem; color: var(--muted);
  margin-block-start: .9rem; direction: ltr; unicode-bidi: isolate; text-align: start;
}
.specs__best { color: var(--brand-text); font-weight: 600; }

/* --- Spec pairs ----------------------------------------------------------- */
.specs__pairs { display: grid; grid-template-columns: 1fr; border-block-start: 1px solid var(--line-soft); }
@media (min-width: 700px) { .specs__pairs { grid-template-columns: repeat(2, 1fr); column-gap: clamp(1.5rem, 4vw, 3rem); } }
.specs__pair {
  display: flex; justify-content: space-between; gap: 1.5rem;
  padding-block: .8rem; border-block-end: 1px solid var(--line-soft);
  font-size: var(--step--1);
}
.specs__key { color: var(--muted); }
.specs__val { font-variant-numeric: tabular-nums; text-align: end; }
/* The figure is isolated and forced LTR, but the VALUE around it is not.
   A technical figure is an LTR run wherever it appears: "±1800" must keep the
   sign against the digits, and in Arabic the surrounding neutrals would
   otherwise resolve to the paragraph direction and push it to the far side.
   The isolation goes on the number alone and never on .specs__val, because
   that carries text-align: end — and a logical property resolves against the
   element's OWN direction, so forcing ltr there would silently flip the whole
   column to the wrong edge in Arabic. */
.specs__num { direction: ltr; unicode-bidi: isolate; }
/* Set by script.js on rows that carry a unit — see the note there. */
.specs__val--fig { white-space: nowrap; }
/* A datasheet cell the manufacturer does not publish. Muted, not flagged:
   nobody owes us this number -- Asistal simply has not published a Uf for
   FC65 -- so it reads as absent rather than outstanding. */
.ds__na { color: var(--muted); }
.specs__pending { font-family: var(--font-mono); color: var(--flag-ink); letter-spacing: .12em; }
.specs__unit { color: var(--muted); font-size: .85em; white-space: nowrap; }

/* --- Technical drawings ---------------------------------------------------
   One vocabulary for all three families: a front face in the section plane,
   a lit top, a shaded side. */
.dw { inline-size: 100%; block-size: auto; overflow: visible; }
/* Latin numerals inside an RTL document reorder without isolation. */
.dw text { direction: ltr; unicode-bidi: isolate; }

.dw-face      { fill: var(--dw-face);      stroke: var(--dw-line); stroke-width: 1.5; stroke-linejoin: round; }
.dw-top       { fill: var(--dw-top);       stroke: var(--dw-line); stroke-width: 1.5; stroke-linejoin: round; }
.dw-side      { fill: var(--dw-side);      stroke: var(--dw-line); stroke-width: 1.5; stroke-linejoin: round; }
.dw-web       { fill: none;                stroke: var(--dw-web);  stroke-width: 1.1; }
.dw-gold-face { fill: var(--dw-gold);      stroke: var(--dw-gold-side); stroke-width: 1.2; stroke-linejoin: round; }
.dw-gold-top  { fill: var(--dw-gold-top);  stroke: var(--dw-gold-side); stroke-width: 1.2; stroke-linejoin: round; }
.dw-gold-side { fill: var(--dw-gold-side); stroke: var(--dw-gold-side); stroke-width: 1.2; stroke-linejoin: round; }
.dw-glass-face { fill: var(--dw-glass);      stroke: var(--dw-glass-line); stroke-width: 1.2; }
.dw-glass-top  { fill: var(--dw-glass-top);  stroke: var(--dw-glass-line); stroke-width: 1.2; }
.dw-glass-side { fill: var(--dw-glass-side); stroke: var(--dw-glass-line); stroke-width: 1.2; }
.dw-sheen { fill: var(--dw-top); stroke: none; opacity: .45; }

.dw-ext, .dw-dimline { fill: none; stroke: var(--dw-dim); stroke-width: .9; }
.dw-arrow { fill: var(--dw-dim); stroke: none; }
.dw-node  { fill: var(--dw-dim); stroke: none; }
.dw-tick  { fill: none; stroke: var(--dw-dim); stroke-width: 1.4; }
.dw-val {
  font-family: var(--font-mono); font-size: 13px; font-weight: 600;
  fill: var(--dw-label);
}
.dw-val[data-pending] { fill: var(--flag-ink); letter-spacing: .12em; }

/* Manufacturer mark behind the pipe drawing. */
.dw-brand {
  font-family: var(--font-display); font-weight: 700;
  font-size: 30px; letter-spacing: .18em;
  fill: var(--dw-brand-wash); stroke: none; text-transform: uppercase;
  direction: ltr; unicode-bidi: isolate;
}
.dw-brand-img { opacity: .34; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .dw-brand-img { filter: brightness(2.6); opacity: .40; }
}
:root[data-theme="dark"]  .dw-brand-img { filter: brightness(2.6); opacity: .40; }
:root[data-theme="light"] .dw-brand-img { filter: none; opacity: .34; }

/* --- PENDING flags ------------------------------------------------------- */
.flag {
  display: inline-block; font-size: .85em; line-height: 1.6; white-space: nowrap;
  color: var(--flag-ink); background: var(--flag-bg);
  border: 1px dashed var(--flag-line); border-radius: 6px;
  padding: .1em .6em;
}
.flag--block { display: block; white-space: normal; padding: .9rem 1.1rem; }
.fam__owed { margin-block-start: 1.1rem; }

/* --- Process ------------------------------------------------------------- */
.process__name { font-size: var(--step-1); letter-spacing: var(--track-title); }
[lang|="ar"] .process__name { letter-spacing: 0; }

/* --- Contact + form ------------------------------------------------------ */
.contact { background: var(--surface); }
.contact__title { font-size: var(--step-3); letter-spacing: var(--track-title); line-height: 1.1; }
[lang|="ar"] .contact__title { letter-spacing: 0; line-height: 1.35; }
.contact__lede { color: var(--muted); font-size: var(--step-1); margin-block-start: 1rem; max-width: 42ch; }
.form {
  background: var(--bg); border: 1px solid var(--line-soft);
  border-radius: clamp(12px, 2vw, 20px); padding: clamp(1.25rem, 3vw, 2rem);
  display: grid; gap: 1rem; align-content: start;
}
.form__row { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 560px) { .form__row { grid-template-columns: 1fr 1fr; } }
.form__field { display: grid; gap: .35rem; }
.form__field label { font-size: var(--step--1); color: var(--muted); }
.form input, .form select, .form textarea {
  font: inherit; font-size: var(--step-0); color: var(--ink);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 10px; padding: .7em .85em; inline-size: 100%;
  transition: border-color var(--hover);
}
.form input:focus, .form select:focus, .form textarea:focus { border-color: var(--brand-text); }
.form textarea { resize: vertical; min-block-size: 6rem; }
.form__send { justify-content: center; }
.form__note { font-size: var(--step--1); color: var(--muted); }
.form__err { font-size: var(--step--1); color: var(--flag-ink); }

/* --- Footer -------------------------------------------------------------- */
.footer__logo { height: 3rem; width: auto; margin-block-end: 1rem; }
.footer__legal {
  font-family: var(--font-mono); font-size: .7rem; line-height: 1.6;
  color: var(--muted); max-width: 46ch; direction: ltr; unicode-bidi: isolate;
  text-align: start;
}

/* --- Owed-content panel (?owed) ------------------------------------------ */
.owed {
  position: fixed; inset-block-end: 0; inset-inline: 0; z-index: 90;
  max-block-size: 55vh; overflow: auto;
  background: var(--bg); border-block-start: 2px solid var(--flag-line);
  padding: 1.25rem var(--pad) 2rem;
  box-shadow: 0 -12px 40px rgb(0 0 0 / .18);
}
.owed h2 { font-size: var(--step-1); margin-block-end: .3rem; }
.owed__lede { color: var(--muted); font-size: var(--step--1); margin-block-end: 1rem; }
.owed ol { margin: 0; padding-inline-start: 1.4rem; display: grid; gap: .4rem; }
.owed li { font-size: var(--step--1); }
.owed code {
  font-family: var(--font-mono); font-size: .9em; color: var(--flag-ink);
  direction: ltr; unicode-bidi: isolate; display: inline-block;
}
.owed__close {
  position: absolute; inset-block-start: .75rem; inset-inline-end: var(--pad);
  background: none; border: 1px solid var(--line); border-radius: 8px;
  color: var(--ink); font: inherit; font-size: var(--step--1);
  padding: .3em .8em; cursor: pointer;
}

/* --- Reveal ---------------------------------------------------------------
   Short, opacity-led, no overshoot: nothing here was thrown by a gesture. */
.js .rv { opacity: 0; transform: translateY(10px); }
.js .rv.is-in {
  opacity: 1; transform: none;
  transition: opacity .5s ease-out, transform .5s cubic-bezier(.32,.72,0,1);
}
@media (prefers-reduced-motion: reduce) {
  .js .rv { opacity: 1; transform: none; }
}