/* ==========================================================================
   المطرقة الذهبية — Golden Hammer
   Shared stylesheet for all pages.

   Sections
     01  Design tokens
     02  Reset and base
     03  Typography
     04  Layout primitives
     05  Buttons
     06  Header and navigation
     07  Hero
     08  Editorial sections
     09  Process
     10  Gallery, filters, lightbox
     11  Contact list
     12  Footer
     13  Motion
     14  Reduced motion and print
   ========================================================================== */


/* 01 — Design tokens ====================================================== */

:root {
  /* Brand — taken from the Golden Hammer identity document, page 3. */
  --color-gold: #C8A155;
  --color-petrol: #14616D;

  /* Brand gold darkened for small text on light backgrounds. #C8A155 on the
     off-white ground is only 2.2:1, which fails WCAG AA. This shade clears 4.5:1
     against both light grounds — 5.5:1 on --color-paper and 4.9:1 on the darker
     --color-paper-dim. It is used only for text; rules, borders, and gold on
     dark ink all stay on the exact brand value above. */
  --color-gold-deep: #7A5D1F;

  /* Neutrals derived from the identity artwork, not invented. */
  --color-ink: #123439;          /* deep petrol used on the profile cover */
  --color-ink-soft: #1B4149;
  --color-paper: #F6F4EF;        /* warm off-white */
  --color-paper-dim: #EAE6DE;
  --color-line: #D8D2C6;

  --color-text: #22262A;
  --color-text-muted: #5C6367;
  --color-text-invert: #F3F1EC;
  --color-text-invert-muted: #A9BCBE;

  --color-gold-soft: rgba(200, 161, 85, 0.16);
  --color-focus: #C8A155;

  /* Type */
  --font-display: "Tajawal", system-ui, "Segoe UI", sans-serif;
  --font-body: "IBM Plex Sans Arabic", system-ui, "Segoe UI", sans-serif;

  --step--1: clamp(0.82rem, 0.79rem + 0.13vw, 0.9rem);
  --step-0:  clamp(1rem, 0.96rem + 0.18vw, 1.09rem);
  --step-1:  clamp(1.2rem, 1.12rem + 0.38vw, 1.45rem);
  --step-2:  clamp(1.45rem, 1.3rem + 0.72vw, 1.95rem);
  --step-3:  clamp(1.75rem, 1.48rem + 1.32vw, 2.65rem);
  --step-4:  clamp(2.1rem, 1.62rem + 2.35vw, 3.7rem);
  --step-5:  clamp(2.5rem, 1.7rem + 3.9vw, 5rem);

  /* Space */
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-s: 1.15rem;
  --space-m: 1.75rem;
  --space-l: 2.75rem;
  --space-xl: 4.25rem;
  --space-2xl: clamp(4rem, 3rem + 5vw, 7.5rem);

  /* Layout */
  --container-width: 78rem;
  --container-narrow: 46rem;
  --gutter: clamp(1.15rem, 0.7rem + 2.2vw, 2.75rem);

  /* Motion */
  --transition-fast: 180ms cubic-bezier(0.22, 0.61, 0.36, 1);
  --transition-medium: 420ms cubic-bezier(0.22, 0.61, 0.36, 1);
  --transition-slow: 900ms cubic-bezier(0.22, 0.61, 0.36, 1);

  /* The arch — the logo's defining form, reused as the image mask. */
  --arch: 50% 50% 3px 3px / 34% 34% 0 0;
}


/* 02 — Reset and base ===================================================== */

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

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-block-start: 6.5rem;
}

body {
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.75;
  color: var(--color-text);
  background: var(--color-paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

img { height: auto; }

a { color: inherit; }

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

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

::selection {
  background: var(--color-petrol);
  color: #fff;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  inset-block-start: -100%;
  inset-inline-start: var(--gutter);
  z-index: 100;
  padding: 0.7rem 1.2rem;
  background: var(--color-ink);
  color: var(--color-text-invert);
  border-radius: 0 0 4px 4px;
}

.skip-link:focus { inset-block-start: 0; }


/* 03 — Typography ========================================================= */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -0.005em;
  text-wrap: balance;
}

h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); }

p { text-wrap: pretty; }

.lead {
  font-size: var(--step-1);
  line-height: 1.65;
  color: var(--color-text-muted);
}

/* Small gold label that opens a section. Purpose: orientation, not decoration. */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-block-end: var(--space-s);
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--color-gold-deep);
}

/* On the ink ground the exact brand gold already clears AA. */
.section--ink .eyebrow,
.hero .eyebrow,
.page-hero .eyebrow,
.cta-band .eyebrow { color: var(--color-gold); }

.eyebrow::after {
  content: "";
  flex: 1;
  height: 1px;
  background: currentColor;
  opacity: 0.35;
}

.eyebrow--center { justify-content: center; }
.eyebrow--center::after { display: none; }

/* The one place English sits beside Arabic: product nomenclature. */
.latin {
  font-family: var(--font-body);
  letter-spacing: 0.02em;
  unicode-bidi: isolate;
}


/* 04 — Layout primitives ================================================== */

.container {
  width: min(100% - var(--gutter) * 2, var(--container-width));
  margin-inline: auto;
}

.container--narrow { width: min(100% - var(--gutter) * 2, var(--container-narrow)); }

.section { padding-block: var(--space-2xl); }
.section--tight { padding-block: var(--space-xl); }

.section--ink {
  background: var(--color-ink);
  color: var(--color-text-invert);
}

.section--ink .lead,
.section--ink .muted { color: var(--color-text-invert-muted); }

.section--paper-dim { background: var(--color-paper-dim); }

.section-head { max-width: 44rem; margin-block-end: var(--space-l); }
.section-head--center { margin-inline: auto; text-align: center; }

.muted { color: var(--color-text-muted); }

.rule {
  height: 1px;
  border: 0;
  background: var(--color-line);
}

.section--ink .rule { background: rgba(200, 161, 85, 0.28); }

/* Editorial split: image on one side, text on the other. Alternating. */
.split {
  display: grid;
  gap: var(--space-l);
  align-items: center;
}

.split__body { max-width: 34rem; }

@media (min-width: 62rem) {
  .split {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
  }
  .split--reverse .split__media { order: 2; }
}

/* Arch-masked image. Echoes the logo and the product itself. */
.arch-frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--arch);
  background: var(--color-paper-dim);
}

.arch-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.arch-frame--portrait { aspect-ratio: 3 / 4; }
.arch-frame--tall { aspect-ratio: 5 / 7; }

/* Landscape feature frame. Matches the wardrobe photograph's own 4:3, so the
   whole room stays in view instead of being cropped into a portrait card. */
.arch-frame--feature { aspect-ratio: 4 / 3; }

/* Single-door product shots are cropped to the product and are much taller
   than they are wide. Framing them at their own proportion keeps the whole
   door visible instead of cropping its head and foot. Height is driven rather
   than width, otherwise a 2:5 frame in a half-width column becomes enormous. */
.arch-frame--door {
  aspect-ratio: 2 / 5;
  height: min(40rem, 74vh);
  width: auto;
  margin-inline: auto;
}

/* Thin gold outline offset behind an arch image. Used sparingly. */
.arch-frame--outlined::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(200, 161, 85, 0.55);
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
}


/* 05 — Buttons ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 3rem;
  padding: 0.72rem 1.7rem;
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 2px;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast),
              border-color var(--transition-fast);
}

.btn--primary {
  background: var(--color-gold);
  color: #1E1A10;
}

.btn--primary:hover { background: #B98F44; }

.btn--ghost {
  border-color: var(--color-line);
  color: var(--color-text);
  background: transparent;
}

.btn--ghost:hover {
  border-color: var(--color-petrol);
  color: var(--color-petrol);
}

.section--ink .btn--ghost,
.hero .btn--ghost,
.page-hero .btn--ghost,
.cta-band .btn--ghost {
  border-color: rgba(243, 241, 236, 0.35);
  color: var(--color-text-invert);
}

.section--ink .btn--ghost:hover,
.hero .btn--ghost:hover,
.page-hero .btn--ghost:hover,
.cta-band .btn--ghost:hover {
  border-color: var(--color-gold);
  color: var(--color-gold);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-block-start: var(--space-m);
}

/* On narrow phones a side-by-side pair leaves too little room — the long
   WhatsApp label broke onto three lines. Stacking gives each button the full
   measure and a larger tap target. */
@media (max-width: 30rem) {
  .btn-row {
    flex-direction: column;
    align-items: stretch;
  }
  .btn-row .btn { width: 100%; }
}

/* At 320px the longest label — "اطلب عرض سعر عبر WhatsApp" — still needs the
   generous side padding reclaimed to stay within two lines. */
@media (max-width: 22.5rem) {
  .btn {
    padding-inline: 0.85rem;
    font-size: var(--step--1);
  }
}

/* Text link that reads as an action. Arrow points inline-start for RTL. */
.link-action {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  color: var(--color-petrol);
  text-decoration: none;
  border-block-end: 1px solid var(--color-gold-soft);
  padding-block-end: 2px;
  transition: border-color var(--transition-fast), gap var(--transition-fast);
}

.link-action:hover {
  border-block-end-color: var(--color-gold);
  gap: 0.85rem;
}

.link-action svg {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
}

.section--ink .link-action { color: var(--color-gold); }


/* 06 — Header and navigation ============================================== */

/* Dark header. The official horizontal lockup is drawn for the brand's ink
   ground — its centre ring is punched out in #123439 — so the header adopts
   that ground rather than recolouring the logo. */
.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 40;
  background: var(--color-ink);
  color: var(--color-text-invert);
  border-block-end: 1px solid transparent;
  transition: border-color var(--transition-fast);
}

.site-header.is-scrolled { border-block-end-color: rgba(200, 161, 85, 0.3); }

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
  min-height: 5.25rem;
  transition: min-height var(--transition-fast);
}

.site-header.is-scrolled .site-header__inner { min-height: 4.25rem; }

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  flex-shrink: 0;
}

.brand img {
  width: auto;
  height: 2.6rem;
  transition: height var(--transition-fast);
}

.site-header.is-scrolled .brand img { height: 2.1rem; }

.nav { display: none; }

.nav__list {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 0.3rem + 1.6vw, 2rem);
  list-style: none;
  padding: 0;
}

.nav__link {
  position: relative;
  display: inline-block;
  padding-block: 0.4rem;
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.02em;
  text-decoration: none;
  color: var(--color-text-invert);
  transition: color var(--transition-fast);
}

.nav__link::after {
  content: "";
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  height: 1px;
  background: var(--color-gold);
  transform: scaleX(0);
  transform-origin: inline-end;
  transition: transform var(--transition-fast);
}

.nav__link:hover { color: var(--color-gold); }
.nav__link:hover::after,
.nav__link[aria-current="page"]::after { transform: scaleX(1); }

.nav__link[aria-current="page"] { color: var(--color-gold); }

.header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.header__cta { display: none; }

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  padding: 0;
  background: transparent;
  border: 1px solid rgba(243, 241, 236, 0.3);
  border-radius: 2px;
  cursor: pointer;
}

.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  display: block;
  width: 1.15rem;
  height: 1.5px;
  background: var(--color-text-invert);
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}

.nav-toggle__bars { position: relative; }

.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
}

.nav-toggle__bars::before { inset-block-start: -0.35rem; }
.nav-toggle__bars::after { inset-block-start: 0.35rem; }

.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }

.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before {
  transform: translateY(0.35rem) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after {
  transform: translateY(-0.35rem) rotate(-45deg);
}

/* Mobile panel. Hidden with [hidden] so it stays closed without JS. */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  padding: var(--space-m) var(--gutter) var(--space-l);
  background: var(--color-ink);
  color: var(--color-text-invert);
  overflow-y: auto;
}

.mobile-nav[hidden] { display: none; }

.mobile-nav__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 3.5rem;
  margin-block-end: var(--space-l);
}

.mobile-nav__top img { height: 2.8rem; width: auto; }

.mobile-nav__close {
  width: 3rem;
  height: 3rem;
  background: transparent;
  border: 1px solid rgba(243, 241, 236, 0.3);
  border-radius: 2px;
  color: inherit;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

.mobile-nav__list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.mobile-nav__list a {
  display: block;
  padding-block: var(--space-s);
  font-family: var(--font-display);
  font-size: var(--step-2);
  text-decoration: none;
  border-block-end: 1px solid rgba(243, 241, 236, 0.12);
}

.mobile-nav__list a[aria-current="page"] { color: var(--color-gold); }

.mobile-nav .btn { margin-block-start: var(--space-l); }


@media (min-width: 60rem) {
  .nav { display: block; }
  .header__cta { display: inline-flex; }
  .nav-toggle { display: none; }
}


/* 07 — Hero =============================================================== */

.hero {
  position: relative;
  background: var(--color-ink);
  color: var(--color-text-invert);
  overflow: hidden;
}

.hero__inner {
  display: grid;
  gap: var(--space-l);
  padding-block: var(--space-xl) var(--space-2xl);
  align-items: center;
}

.hero__title {
  font-size: var(--step-5);
  font-weight: 800;
  line-height: 1.14;
}

.hero__positioning {
  margin-block-start: var(--space-s);
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 500;
  color: var(--color-gold);
}

.hero__support {
  margin-block-start: var(--space-s);
  max-width: 30rem;
  font-size: var(--step-1);
  color: var(--color-text-invert-muted);
}

.hero__media { position: relative; }

.hero__media .arch-frame { max-width: 30rem; margin-inline: auto; }

/* Faint architectural arch drawn behind the hero image. Brand form, not filler. */
.hero__glow {
  position: absolute;
  inset-block-start: -12%;
  inset-inline-end: -18%;
  width: min(42rem, 78%);
  aspect-ratio: 3 / 4;
  border: 1px solid rgba(200, 161, 85, 0.14);
  border-radius: var(--arch);
  pointer-events: none;
}

@media (min-width: 62rem) {
  .hero__inner {
    grid-template-columns: 1.05fr 0.95fr;
    gap: var(--space-2xl);
    padding-block: var(--space-2xl);
    min-height: min(82vh, 46rem);
  }
}

/* Compact hero used on interior pages. */
.page-hero {
  background: var(--color-ink);
  color: var(--color-text-invert);
  padding-block: var(--space-xl);
}

.page-hero__title { font-size: var(--step-4); }

.page-hero p {
  margin-block-start: var(--space-s);
  max-width: 38rem;
  color: var(--color-text-invert-muted);
  font-size: var(--step-1);
}

.breadcrumb {
  margin-block-end: var(--space-s);
  font-size: var(--step--1);
  color: var(--color-text-invert-muted);
}

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  padding: 0;
}

.breadcrumb li + li::before {
  content: "/";
  margin-inline-end: 0.5rem;
  opacity: 0.5;
}

.breadcrumb a { text-decoration: none; }
.breadcrumb a:hover { color: var(--color-gold); }


/* 08 — Editorial sections ================================================= */

/* Benefit list. Deliberately not an icon-card grid. */
.benefit-list {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 0;
  counter-reset: benefit;
}

.benefit-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-s);
  align-items: baseline;
  padding-block: var(--space-s);
  border-block-start: 1px solid var(--color-line);
}

.section--ink .benefit-list li { border-block-start-color: rgba(200, 161, 85, 0.22); }

/* The number, title and description are three separate grid children, so each
   is placed explicitly. Left to auto-placement the description drops into the
   number column and starves the title, which then wraps a word per line. */
.benefit-list li::before {
  counter-increment: benefit;
  content: counter(benefit, decimal-leading-zero);
  grid-column: 1;
  grid-row: 1 / span 2;
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 500;
  color: var(--color-gold-deep);
  letter-spacing: 0.08em;
}

.section--ink .benefit-list li::before { color: var(--color-gold); }

.benefit-list strong {
  grid-column: 2;
  grid-row: 1;
  display: block;
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 700;
}

.benefit-list span {
  grid-column: 2;
  grid-row: 2;
  display: block;
  margin-block-start: 0.25rem;
  color: var(--color-text-muted);
}

.section--ink .benefit-list span { color: var(--color-text-invert-muted); }

/* Two large service entries. Not generic cards — full-bleed image + title. */
.service-grid {
  display: grid;
  gap: var(--space-l);
}

@media (min-width: 52rem) {
  .service-grid { grid-template-columns: repeat(2, 1fr); }
}

.service-entry {
  display: block;
  text-decoration: none;
  color: inherit;
}

.service-entry__media {
  position: relative;
  overflow: hidden;
  border-radius: var(--arch);
  aspect-ratio: 4 / 5;
  background: var(--color-paper-dim);
}

.service-entry__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.service-entry:hover .service-entry__media img { transform: scale(1.04); }

/* Used where a service has no verified photograph. Rather than borrowing an
   unrelated image, the slot becomes an arch drawn in the brand's own line. */
.service-entry__media--empty {
  display: grid;
  place-items: center;
  background: var(--color-ink-soft);
  border: 1px solid rgba(200, 161, 85, 0.3);
}

.service-entry__media--empty span {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 500;
  color: rgba(200, 161, 85, 0.75);
  padding-inline: var(--space-s);
  text-align: center;
}

/* Sits over photography, so it carries its own ground rather than relying on
   whatever happens to be behind it. A text shadow alone is not dependable when
   the image beneath can be light. */
.service-entry__index {
  position: absolute;
  inset-block-start: var(--space-s);
  inset-inline-start: var(--space-s);
  z-index: 1;
  padding: 0.2rem 0.6rem;
  border-radius: 2px;
  background: rgba(18, 52, 57, 0.82);
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--color-text-invert);
}

.service-entry__media--empty .service-entry__index {
  position: absolute;
  background: transparent;
  color: var(--color-gold);
}

.service-entry__body { padding-block-start: var(--space-s); }

.service-entry h3 { font-size: var(--step-2); }

.service-entry p {
  margin-block-start: 0.4rem;
  color: var(--color-text-muted);
}

.section--ink .service-entry p { color: var(--color-text-invert-muted); }

.service-entry__more {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-block-start: var(--space-xs);
  font-weight: 600;
  color: var(--color-petrol);
}

.section--ink .service-entry__more { color: var(--color-gold); }

/* Finish swatch row — real photography, never invented colour chips. */
.finish-row {
  display: grid;
  gap: var(--space-s);
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 48rem) {
  .finish-row { grid-template-columns: repeat(4, 1fr); }
}

.finish {
  text-align: center;
}

.finish__name {
  margin-block-start: var(--space-2xs);
  font-family: var(--font-display);
  font-weight: 500;
}

/* Nationwide service band. One statement, nothing else. */
.statement {
  text-align: center;
  max-width: 40rem;
  margin-inline: auto;
}

.statement__title {
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: 700;
}

/* Detail summary line — "تفاصيل تصنع الفرق" */
.detail-line {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-xs) var(--space-m);
  list-style: none;
  padding: 0;
  margin-block-start: var(--space-m);
  text-align: center;
}

.detail-line li {
  position: relative;
  font-family: var(--font-display);
  font-weight: 500;
}

.detail-line li + li::before {
  content: "";
  position: absolute;
  inset-inline-start: calc(var(--space-m) / -2);
  inset-block-start: 50%;
  width: 4px;
  height: 4px;
  transform: translateY(-50%) rotate(45deg);
  background: var(--color-gold);
}

/* Final call to action */
.cta-band {
  position: relative;
  overflow: hidden;
  background: var(--color-ink);
  color: var(--color-text-invert);
}

.cta-band__inner {
  display: grid;
  gap: var(--space-l);
  align-items: center;
  padding-block: var(--space-2xl);
}

/* The closing image is the last piece of proof on the page, so it is given
   more width than the copy beside it and runs to the section edge rather than
   sitting inside a card. */
@media (min-width: 58rem) {
  .cta-band__inner {
    grid-template-columns: 0.82fr 1.18fr;
    gap: var(--space-2xl);
  }
}

.cta-band h2 { font-size: var(--step-4); }

.cta-band p {
  margin-block-start: var(--space-xs);
  font-size: var(--step-1);
  color: var(--color-text-invert-muted);
}


/* 09 — Process ============================================================ */

/* A continuous vertical sequence rather than three detached cards. */
.process {
  display: grid;
  gap: 0;
  counter-reset: step;
}

.process__step {
  display: grid;
  gap: var(--space-s);
  padding-block: var(--space-l);
  border-block-start: 1px solid rgba(200, 161, 85, 0.25);
  align-items: start;
}

.process__step:last-child { border-block-end: 1px solid rgba(200, 161, 85, 0.25); }

.process__num {
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: 500;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--color-gold);
}

.process__step h3 { font-size: var(--step-2); }

.process__step p {
  margin-block-start: 0.35rem;
  color: var(--color-text-invert-muted);
  max-width: 34rem;
}

@media (min-width: 48rem) {
  .process__step {
    grid-template-columns: 6rem 1fr;
    gap: var(--space-l);
    align-items: baseline;
  }
}


/* 10 — Gallery, filters, lightbox ========================================= */

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  margin-block-end: var(--space-l);
  padding: 0;
  border: 0;
}

.filters__btn {
  min-height: 2.75rem;
  padding: 0.5rem 1.15rem;
  background: transparent;
  border: 1px solid var(--color-line);
  border-radius: 2px;
  font-size: var(--step--1);
  font-weight: 500;
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast),
              color var(--transition-fast);
}

.filters__btn:hover { border-color: var(--color-petrol); }

.filters__btn[aria-pressed="true"] {
  background: var(--color-petrol);
  border-color: var(--color-petrol);
  color: #fff;
}

/* Editorial masonry. Column flow lets each image keep its own proportion
   without the ragged gaps a fixed grid produces when a 2:5 door sits beside a
   4:3 interior. */
.gallery {
  columns: 2;
  column-gap: var(--space-s);
  list-style: none;
  padding: 0;
}

@media (min-width: 52rem) {
  .gallery { columns: 3; column-gap: var(--space-m); }
}

.gallery__item {
  break-inside: avoid;
  margin-block-end: var(--space-m);
}

.gallery__item[hidden] { display: none; }

/* .gallery__btn opens the lightbox; .gallery__still is the same frame without
   interaction, used where a page shows images but has no lightbox. */
.gallery__btn,
.gallery__still {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  background: var(--color-paper-dim);
  border: 0;
  border-radius: 2px;
  overflow: hidden;
  text-align: start;
}

.gallery__btn { cursor: zoom-in; }

.gallery__btn img,
.gallery__still img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.gallery__item--wide .gallery__btn,
.gallery__item--wide .gallery__still { aspect-ratio: 4 / 3; }

.gallery__item--tall .gallery__btn,
.gallery__item--tall .gallery__still,
.gallery__item--third .gallery__btn,
.gallery__item--third .gallery__still { aspect-ratio: 3 / 4; }

.gallery__item--half .gallery__btn,
.gallery__item--half .gallery__still { aspect-ratio: 1 / 1; }

.gallery__item--door .gallery__btn,
.gallery__item--door .gallery__still { aspect-ratio: 2 / 5; }

.gallery__btn:hover img { transform: scale(1.03); }

.gallery__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2xs);
  padding: var(--space-2xs) 0 0;
}

/* In two narrow masonry columns the caption and its provenance chip fight for
   the same line and the title shatters into four. Stack them instead. */
@media (max-width: 34rem) {
  .gallery__meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.3rem;
  }
}

.gallery__title {
  font-size: var(--step--1);
  font-weight: 500;
  color: var(--color-text);
}

/* Provenance chip. This is how the site stays honest about every image. */
.provenance {
  flex-shrink: 0;
  padding: 0.15rem 0.55rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: 2px;
  white-space: nowrap;
}

.provenance--project {
  background: var(--color-gold-soft);
  color: var(--color-gold-deep);
}

.provenance--product {
  background: rgba(20, 97, 109, 0.1);
  color: var(--color-petrol);
}

.gallery-empty {
  padding-block: var(--space-l);
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--step-0);
}

.gallery-empty[hidden] { display: none; }

/* Note explaining what product visuals are. Small, not dominant. */
.provenance-note {
  margin-block-start: var(--space-m);
  padding-inline-start: var(--space-s);
  border-inline-start: 2px solid var(--color-gold);
  font-size: var(--step--1);
  color: var(--color-text-muted);
  max-width: 42rem;
}

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: var(--space-s);
  padding: var(--space-s) var(--gutter) var(--space-m);
  background: rgba(9, 26, 29, 0.96);
  color: var(--color-text-invert);
}

.lightbox[hidden] { display: none; }

.lightbox__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
}

.lightbox__count {
  font-size: var(--step--1);
  color: var(--color-text-invert-muted);
  font-variant-numeric: tabular-nums;
}

.lightbox__stage {
  display: grid;
  place-items: center;
  min-height: 0;
}

.lightbox__stage img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.lightbox__footer { text-align: center; }

.lightbox__caption {
  font-family: var(--font-display);
  font-size: var(--step-1);
}

.lightbox__provenance {
  margin-block-start: 0.35rem;
  font-size: var(--step--1);
  color: var(--color-text-invert-muted);
}

.lightbox__nav {
  display: flex;
  justify-content: center;
  gap: var(--space-s);
  margin-block-start: var(--space-s);
}

.lb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  background: transparent;
  border: 1px solid rgba(243, 241, 236, 0.3);
  border-radius: 2px;
  color: inherit;
  cursor: pointer;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}

.lb-btn:hover {
  border-color: var(--color-gold);
  color: var(--color-gold);
}

.lb-btn svg { width: 1.1rem; height: 1.1rem; }


/* 11 — Contact list ====================================================== */

.contact-list {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--space-2xs);
}

.contact-list a {
  text-decoration: none;
  border-block-end: 1px solid var(--color-gold-soft);
}

.contact-list a:hover { border-block-end-color: var(--color-gold); }

.contact-list .latin { direction: ltr; display: inline-block; }


/* 12 — Footer ============================================================= */

.site-footer {
  background: var(--color-ink);
  color: var(--color-text-invert);
  padding-block: var(--space-xl) var(--space-m);
}

.site-footer__grid {
  display: grid;
  gap: var(--space-l);
}

@media (min-width: 48rem) {
  .site-footer__grid { grid-template-columns: 1.4fr 1fr 1fr; gap: var(--space-xl); }
}

.site-footer img { height: 4.5rem; width: auto; }

.site-footer__statement {
  margin-block-start: var(--space-s);
  max-width: 22rem;
  color: var(--color-text-invert-muted);
}

.site-footer h2 {
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--color-gold);
  margin-block-end: var(--space-s);
}

.footer-list {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}

.footer-list a {
  text-decoration: none;
  color: var(--color-text-invert-muted);
  transition: color var(--transition-fast);
}

.footer-list a:hover { color: var(--color-gold); }

.socials {
  display: flex;
  gap: var(--space-2xs);
  list-style: none;
  padding: 0;
  margin-block-start: var(--space-s);
}

.socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid rgba(243, 241, 236, 0.25);
  border-radius: 2px;
  color: var(--color-text-invert-muted);
  transition: border-color var(--transition-fast), color var(--transition-fast);
}

.socials a:hover {
  border-color: var(--color-gold);
  color: var(--color-gold);
}

.socials svg { width: 1.15rem; height: 1.15rem; }

.site-footer__base {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-m);
  justify-content: space-between;
  margin-block-start: var(--space-l);
  padding-block-start: var(--space-m);
  border-block-start: 1px solid rgba(243, 241, 236, 0.14);
  font-size: var(--step--1);
  color: var(--color-text-invert-muted);
}


/* 13 — Motion ============================================================= */

/* Scroll reveal. The .is-ready class is added by JS, so content is visible
   by default if JavaScript never runs. */
.js-reveal.is-ready {
  opacity: 0;
  transform: translateY(1.25rem);
  transition: opacity var(--transition-medium), transform var(--transition-medium);
}

.js-reveal.is-ready.is-visible {
  opacity: 1;
  transform: none;
}


/* 14 — Reduced motion and print =========================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .js-reveal.is-ready {
    opacity: 1;
    transform: none;
  }

  .service-entry:hover .service-entry__media img,
  .gallery__btn:hover img { transform: none; }
}

@media print {
  .site-header,
  .mobile-nav,
  .lightbox,
  .filters,
  .cta-band { display: none !important; }

  body { background: #fff; color: #000; }
}