/* Al Kayan Decor — v3 stylesheet, BUILT from public/design-system/tokens.css + components.css (design baseline e3a64e3) + assets/v3/pages.css. Do not edit; rebuild. */
/* Al Kayan Decor — Phase 3 design tokens (M3 "reference fidelity", 26 Oct 2026). Reference: the two mockup PDFs, sampled
   directly (phase3/evidence/cp1-m3/DISCREPANCY-REPORT.md). Surfaces, bands, the metallic gold gradient, white text and
   logo on the gradient, typography and spacing are the reference's. Only genuinely bronze/brown values are replaced:
   the reference text colour #8C7454 → warm neutral graphite (decision A1), and the bronze button/tab/newsletter fills
   #AE9366 / #8C7048 → the gradient's own gold #C0A87C with a dark label (decision B1). Rose hairline kept only on the
   phone menu tiles (not in the mockups). Fonts self-hosted (D1). */
:root {
  /* colour */
  --ivory-0: #FBF9F5;            /* warm off-white 26 Oct: page ground (was reference ivory #F5F0E5) */
  --ivory-1: #F7F4EE;            /* header band / tab fill, one step warmer */
  --sand-1: #F2EEE6;             /* panels, counters band, section alternation (soft, no heavy contrast) */
  --sand-2: #D8C9A8;             /* gold/bronze theme 26 Oct: light gold rules and borders (was sand #E0D8C8) */
  --card: #FAF6F0;               /* cards, tiles, menus */
  --gold-1: #D0BC94;             /* reference light band: dividers, secondary hover */
  --gold-2: #AD9162;             /* gold/bronze theme 26 Oct: reference button bronze (measured #AD9162) — primary button, active tab, underline, icon tiles, borders */
  --gold-3: #9C8257;             /* primary hover (darker bronze) */
  --bronze-5: var(--gold-2);     /* compatibility alias used by components.css */
  --bronze-6: var(--gold-2);     /* link underline / accent (never text) */
  --bronze-7: var(--gold-3);     /* hover */
  /* reference footer/logo-panel metallic sweep, stops sampled across the mockup footer (left→right bands) */
  --bronze-grad: linear-gradient(100deg, #B69B6E 0%, #CAB48B 18%, #C8B289 30%, #BEA67A 45%, #B4986C 58%, #C6AF83 76%, #BA9F72 90%, #AA8E5F 100%);
  --on-gradient: #FFFFFF;        /* reference: white text and white logo on the gradient (contrast issue documented) */
  --sand-form: #F4EEE4;          /* contact form panel */
  --band-title: linear-gradient(90deg, #F1EBE0 0%, #F6F1E8 50%, #FBF8F2 100%);   /* title band, lightened with the page */
  --footer-bottom: transparent;  /* reference: no separate lower band, only a hairline divider */
  --rose-1: #E8CFC4;             /* very subtle rose-gold hairline, decorative only */
  --ink-1: #8C7048;              /* gold/bronze theme 26 Oct: reference bronze-brown for headings, nav, labels, titles (measured #8B6E4E–#8D7858) */
  --ink-2: #6E6457;              /* reference body text, warm brown-grey (measured darkest #6D6558); 5.0:1 on ivory */
  --ink-3: #8F7850;              /* reference bronze eyebrows, meta, captions, input underlines (measured ~#8A7965) */
  --on-bronze: #FFFFFF;          /* reference: white serif label on the bronze button (3.0:1, exception D8) */
  --photo: #6E6B66;              /* fallback only; the sheet hero uses the site's slider photograph */
  --success: #3E6B4A;
  --error: #A3403A;
  --focus: #8C7048;              /* bronze focus ring (4.1:1 on ivory) */
  --bronze-text: #8C7048;        /* 26 Oct consolidated corrections: reference bronze for headings, page titles and icons (reference text value, 12 §measured); 4.0:1 on ivory */

  /* type */
  --font-display: "Cormorant Garamond", "Times New Roman", serif;
  --font-body: "DM Sans", system-ui, sans-serif;
  --font-display-ar: "Amiri", "Noto Naskh Arabic", serif;
  --font-body-ar: "IBM Plex Sans Arabic", "Noto Sans Arabic", system-ui, sans-serif;
  --fs-display: clamp(2.25rem, 1.5rem + 3vw, 3.5rem);   /* 36 → 56 */
  --fs-h2: clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem);     /* 28 → 40 */
  --fs-h3: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);   /* 22 → 28 */
  --fs-body: 1.0625rem;                                 /* 17 */
  --fs-body-sm: 1rem;
  --fs-eyebrow: 0.75rem;                                /* 12 */
  --fs-control: 1.125rem;                               /* 18 */
  --lh-tight: 1.1;
  --lh-body: 1.6;
  --lh-body-ar: 1.75;
  --track-eyebrow: 0.14em;

  /* space (8 px base) */
  --s-1: 0.5rem; --s-2: 1rem; --s-3: 1.5rem; --s-4: 2rem; --s-6: 3rem; --s-8: 4rem; --s-12: 6rem;
  --section-y: var(--s-12);
  --container: 75rem;      /* 1200 */
  --gutter: 1.5rem;
  --control-h: 3rem;       /* 48 */
  --radius: 0;             /* no rounded corners (mockups) */
  --keyline: 1px solid var(--sand-2);
}
@media (max-width: 1023px) { :root { --section-y: var(--s-8); } }
@media (max-width: 767px)  { :root { --section-y: var(--s-6); --fs-control: 1.0625rem; } }

[dir="rtl"] {
  --font-display: var(--font-display-ar);
  --font-body: var(--font-body-ar);
  --lh-body: var(--lh-body-ar);
  --track-eyebrow: 0;
}
/* Al Kayan Decor — Phase 3 components (CP1). Logical properties only (07 §8); every interactive state defined. */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--ivory-0); color: var(--ink-2); font: 400 var(--fs-body)/var(--lh-body) var(--font-body); -webkit-text-size-adjust: 100%; }
body { margin: 0; }
img { max-width: 100%; height: auto; display: block; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.container { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); }
.section--band { background: var(--ivory-1); }
.section--sand { background: var(--sand-1); }
.grid { display: grid; gap: var(--s-3); grid-template-columns: repeat(12, 1fr); }
.grid > * { grid-column: span 12; }
@media (min-width: 768px)  { .grid > .col-6 { grid-column: span 6; } .grid > .col-4 { grid-column: span 4; } .grid > .col-3 { grid-column: span 3; } }
@media (min-width: 1024px) { .grid > .col-4 { grid-column: span 4; } .grid > .col-3 { grid-column: span 3; } }

/* type */
.display, h1, h2, h3 { font-family: var(--font-display); font-weight: 400; color: var(--ink-1); margin: 0 0 var(--s-2); line-height: var(--lh-tight); }
h1, .display { font-size: var(--fs-display); font-weight: 300; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: 1.2; }
p { margin: 0 0 var(--s-2); }
.lead { font-size: 1.125rem; }
.eyebrow { display: block; font-family: var(--font-body); font-size: var(--fs-eyebrow); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--ink-3); font-weight: 500; margin-block-end: var(--s-2); } /* reference: plain letter-spaced caps (reference colour #8C7454 is bronze → ink-3, A1) */
[dir="rtl"] .eyebrow { text-transform: none; font-size: 0.8125rem; }
.meta { color: var(--ink-3); font-size: var(--fs-body-sm); }
.hero-title { color: #FFFFFF; } /* reference: white headline directly over the photograph, no overlay or shadow; legibility depends on each image (verify per template in CP2) */ /* reference: white headline over the photo; legibility verified per image in CP2 */
a { color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--bronze-5); text-underline-offset: 3px; }
a:hover { color: var(--ink-1); text-decoration-color: var(--gold-3); }
.link-external::after { content: " ↗"; }
[dir="rtl"] .link-external::after { content: " ↖"; }
.ltr { direction: ltr; unicode-bidi: isolate; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-1); min-height: var(--control-h); padding-inline: var(--s-3); border: 1px solid transparent; border-radius: var(--radius); font: 500 var(--fs-control)/1 var(--font-display); text-decoration: none; cursor: pointer; transition: background-color .15s, color .15s, border-color .15s; }
.btn-primary { background: var(--bronze-5); color: var(--on-bronze); border-color: var(--bronze-5); }
.btn-primary:hover { background: var(--gold-3); border-color: var(--gold-3); color: var(--on-bronze); }
.btn-secondary { background: transparent; color: var(--ink-1); border-color: var(--gold-2); }
.btn-secondary:hover { background: var(--sand-1); border-color: var(--gold-3); }
.btn:disabled, .btn[aria-disabled="true"] { background: var(--sand-2); color: var(--ink-3); border-color: var(--sand-2); cursor: not-allowed; }
.btn-on-dark { background: var(--card); color: var(--ink-1); border-color: var(--card); }

/* header */
.site-header { background: var(--ivory-1); border-block-end: var(--keyline); }
.site-header .bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--s-3); min-height: 5rem; }
.site-header nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--s-3); }
.site-header nav.start ul { justify-content: flex-start; }
.site-header nav.end ul { justify-content: flex-end; }
.site-header nav a { font: 500 var(--fs-control)/1 var(--font-display); text-decoration: none; padding-block: var(--s-1); border-block-end: 2px solid transparent; }
.site-header nav a:hover, .site-header nav a[aria-current="page"] { border-block-end-color: var(--bronze-5); color: var(--ink-1); }
.logo-panel { background: var(--bronze-grad); width: 12.5rem; height: 5rem; display: grid; place-items: center; color: var(--on-gradient); font-family: var(--font-display); font-size: 1.5rem; } /* reference: white logo on the gradient panel */
.logo-panel img, .site-footer .logo-img { height: 3rem; width: auto; filter: brightness(0) invert(1); } /* white logo on the gradient, same technique as the live site header */
.lang-switch { font: 500 0.9375rem/1 var(--font-body); padding: .5rem .75rem; border: 1px solid var(--gold-2); background: transparent; color: var(--ink-1); text-decoration: none; }
.hamburger { display: none; width: var(--control-h); height: var(--control-h); border: 1px solid var(--sand-2); background: var(--card); }
@media (max-width: 1023px) {
  .site-header .bar { grid-template-columns: auto 1fr auto; }
  .site-header nav { display: none; }
  .hamburger { display: inline-grid; place-items: center; }
  .logo-panel { width: 9rem; height: 3.5rem; font-size: 1.125rem; justify-self: center; }
}

/* side menu (phone) — ids kept from Phase 2 */
.side-menu { position: fixed; inset-block: 0; inset-inline-start: 0; width: min(22rem, 90vw); background: var(--ivory-0); border-inline-end: var(--keyline); padding: var(--s-3); transform: translateX(-100%); transition: transform .2s; z-index: 10; }
[dir="rtl"] .side-menu { transform: translateX(100%); }
.side-menu[data-open="true"] { transform: none; }
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); margin-block: var(--s-3); }
.tile { display: grid; justify-items: center; gap: .25rem; padding: var(--s-2); background: var(--card); border: var(--keyline); border-block-start: 2px solid var(--rose-1); text-decoration: none; text-align: center; } /* rose-gold hairline */
.tile .icon { width: 2.5rem; height: 2.5rem; background: var(--gold-2); }
.tile b { font-family: var(--font-display); font-size: 1.125rem; color: var(--ink-1); }
.tile small { color: var(--ink-3); }

/* cards */
.card { background: transparent; border-block-start: 1px solid transparent; transition: border-color .15s; }
.card:hover { border-block-start-color: transparent; } /* reference shows no hover treatment */
.card .media { aspect-ratio: 3 / 2; background: var(--sand-1) center/cover; } /* reference: no keyline on images */
.card .body { padding-block: var(--s-2); }
.card .meta { font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; } /* reference: small caps meta (category · date) */
.card h3 { font-size: 1.5rem; margin-block-end: var(--s-1); }
.card h3 a { text-decoration: none; }

/* tabs / filters */
.tabs { display: flex; flex-wrap: wrap; gap: var(--s-1); list-style: none; padding: 0; margin: 0 0 var(--s-3); }
.tab { padding: .6rem 1rem; border: 1px solid var(--sand-2); background: var(--ivory-1); color: var(--ink-2); font: 500 .9375rem/1 var(--font-body); cursor: pointer; }
.tab:hover { background: var(--sand-1); }
.tab[aria-selected="true"] { background: var(--bronze-5); border-color: var(--bronze-5); color: var(--on-bronze); }

/* forms */
.field { display: grid; gap: .375rem; margin-block-end: var(--s-3); }
.field label { font: 500 .9375rem/1.3 var(--font-body); color: var(--ink-1); }
.field .hint { color: var(--ink-3); font-size: .875rem; }
.input, .select, .textarea { width: 100%; min-height: var(--control-h); padding: .5rem 0; border: 0; border-block-end: 1px solid var(--ink-3); background: transparent; color: var(--ink-1); font: inherit; border-radius: 0; }
.textarea { min-height: 7rem; resize: vertical; }
.input:hover, .textarea:hover { border-block-end-color: var(--bronze-5); }
.input:focus-visible, .textarea:focus-visible, .select:focus-visible { outline: none; border-block-end: 2px solid var(--focus); }
.input:disabled { color: var(--ink-3); border-block-end-style: dashed; }
.field[data-state="error"] .input { border-block-end: 2px solid var(--error); }
.field[data-state="error"] .msg { color: var(--error); font-size: .875rem; }
.field[data-state="success"] .input { border-block-end: 2px solid var(--success); }
.field[data-state="success"] .msg { color: var(--success); font-size: .875rem; }
.check { display: flex; gap: .625rem; align-items: flex-start; }
.check input { width: 1.25rem; height: 1.25rem; margin: .125rem 0 0; accent-color: var(--bronze-5); flex: none; }
.form-panel { background: var(--sand-form); padding: var(--s-4); } /* reference form panel #EEE2CE */
.alert { padding: var(--s-2) var(--s-3); border-inline-start: 4px solid; background: var(--card); }
.alert-success { border-color: var(--success); color: var(--success); }
.alert-error { border-color: var(--error); color: var(--error); }

.section--sand .meta, .form-panel .meta, .form-panel .hint { color: var(--ink-2); } /* ink-3 is 4.42:1 on sand */
/* counters (figures verbatim from the live site — decision 26 Oct) */
.counters { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: var(--s-3); text-align: center; }
.counters b { display: block; font: 400 3rem/1 var(--font-display); color: var(--ink-1); }
.counters > div { border-block-start: 1px solid var(--gold-1); padding-block-start: var(--s-2); }
.counters > div > span { color: var(--ink-3); font-size: .9375rem; }
.counters b .counter-number { font: inherit; }

/* footer */
.site-footer { background: var(--bronze-grad); color: var(--on-gradient); padding-block: var(--s-8) var(--s-3); } /* reference: metallic gradient, white text (contrast issue documented) */
.site-footer .quote { font: italic 300 var(--fs-h2)/1.2 var(--font-display); color: var(--on-gradient); } /* reference: white italic serif */
.site-footer h4 { font: 500 .8125rem/1 var(--font-body); letter-spacing: var(--track-eyebrow); text-transform: uppercase; margin: 0 0 var(--s-2); }
[dir="rtl"] .site-footer h4 { text-transform: none; }
.site-footer .links { padding: 0; }
.site-footer a { color: var(--on-gradient); text-decoration: none; font-size: 1rem; } /* reference: plain white links */
.site-footer a:hover { text-decoration: underline; text-decoration-color: rgba(255,255,255,.7); }
.site-footer h4 { color: var(--on-gradient); }
.site-footer .lower { background: var(--footer-bottom); margin-block-start: var(--s-6); padding: var(--s-3) 0; border-block-start: 1px solid rgba(255,255,255,.35); } /* reference: hairline divider above the copyright line */
.site-footer .lower, .site-footer .lower a, .site-footer .lower p { font-size: 1rem; }
.site-footer .input { border-block-end-color: rgba(255,255,255,.8); color: var(--on-gradient); }
.site-footer .input::placeholder { color: rgba(255,255,255,.8); }
.site-footer .nl-btn { width: 2.5rem; height: 2.5rem; background: var(--gold-3); border: 1px solid rgba(255,255,255,.7); } /* reference: square submit in dark bronze #8C7048 → gradient dark band #B89C70 with a white hairline so it stays visible (B1) */

/* lightbox + error page */
.lightbox { position: fixed; inset: 0; background: rgba(247,243,234,.96); display: grid; place-items: center; }
.error-page { text-align: center; padding-block: var(--s-12); }

/* motion (03 §6) */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(12px); animation: reveal .24s ease-out forwards; }
  @keyframes reveal { to { opacity: 1; transform: none; } }
}

/* sheet-only chrome */
.sheet-nav { position: sticky; top: 0; z-index: 20; background: var(--card); border-block-end: var(--keyline); padding: var(--s-2) 0; }
.sheet-nav .row { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }
.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: var(--s-2); }
.swatch { border: var(--keyline); }
.swatch i { display: block; height: 4rem; }
.swatch small { display: block; padding: .5rem; font-size: .8125rem; color: var(--ink-2); }
.state-row { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }
.is-hover.btn-primary { background: var(--gold-3); border-color: var(--gold-3); }
.is-hover.btn-secondary { background: var(--sand-1); }
.is-focus { outline: 2px solid var(--focus); outline-offset: 2px; }
.phone-frame { width: 390px; max-width: 100%; border: 8px solid var(--ink-1); border-radius: 24px; overflow: hidden; background: var(--ivory-0); }
.phone-frame iframe { width: 100%; height: 760px; border: 0; }
/* Al Kayan Decor — Phase 3 page styles (CP2). Built on tokens.css + components.css (design baseline e3a64e3).
   Layouts follow Al_Kayan_Desktop_Mockups_4621.pdf / Al_Kayan_Phone_Mockups_0314.pdf. Logical properties only (RTL). */

/* ---------- header (reference: centred gradient logo panel, 3 + 3 links) ---------- */
.site-header { position: sticky; top: 0; z-index: 30; }
.site-header .bar { min-height: 5.5rem; }
.site-header nav ul { align-items: center; }
.site-header .has-menu { position: relative; }
.site-header .has-menu > a::after { content: " ▾"; font-size: .7em; display: inline-block; transition: transform .22s ease; }
.site-header .has-menu.is-open > a::after { transform: rotate(180deg); }
/* 27 Oct (coordinator): compact desktop dropdown — the panel hugs its content (bounded), the column starts at the panel's
   start edge instead of inheriting `justify-content: flex-end`/`gap` from `.site-header nav.end ul`, even item padding. */
.services-menu { position: absolute; inset-inline-start: 0; top: 100%; min-width: 9.7rem; width: max-content; max-width: min(20rem, calc(100vw - 2rem)); background: var(--card); border: var(--keyline); padding: var(--s-1) 0; z-index: 40; opacity: 0; visibility: hidden; transform: translateY(-.5rem); transition: opacity .22s ease, transform .22s ease, visibility 0s linear .22s; } /* 26 Oct: opens on click with an animated reveal */
.has-menu.is-open .services-menu { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
@media (prefers-reduced-motion: reduce) { .services-menu, .site-header .has-menu > a::after, .side-services-list { transition: none; } }
.services-menu .product-list { display: grid; justify-content: start; gap: 0; list-style: none; margin: 0; padding: 0; }
.site-header nav.end .services-menu .product-list { justify-content: start; gap: 0; } /* outranks `.site-header nav.end ul { justify-content: flex-end }` */
.services-menu .nav-item { display: grid; gap: 0; padding: .6rem .75rem; } /* ≈165 px panel at the 17 px root size, ≈13 px side padding; the widest line ("Wood & Aluminum", 119 px) still fits on one line */
.services-menu .nav-item > a { font: 500 1.0625rem/1.2 var(--font-display); color: var(--ink-1); text-decoration: none; border: 0; padding: 0; }
.services-menu .product-hover-box a { text-decoration: none; border: 0; padding: 0; }
.services-menu .menu-sub { display: block; font: 400 .8125rem/1.3 var(--font-body); color: var(--ink-3); }
.services-menu .nav-item:hover { background: var(--ivory-1); }
.site-header .lang-switch { margin-inline-start: var(--s-2); }
.site-header .hamburger { font-size: 1.25rem; }
@media (max-width: 1023px) { .site-header .bar { grid-template-columns: auto 1fr auto; } .site-header .lang-switch { margin: 0; } }

/* ---------- side menu (phone; ids and .active class from Phase 2 side-menu.js) ---------- */
.side-menu { position: fixed; inset-block: 0; inset-inline-start: 0; width: min(22rem, 92vw); background: var(--ivory-0); border-inline-end: var(--keyline); padding: var(--s-3); transform: translateX(-100%); transition: transform .2s; z-index: 50; overflow-y: auto; }
[dir="rtl"] .side-menu { transform: translateX(100%); }
.side-menu.active { transform: none; }
.side-menu .close-btn { float: inline-end; width: 2.5rem; height: 2.5rem; border: var(--keyline); background: var(--card); font-size: 1.25rem; line-height: 1; cursor: pointer; }
.side-menu .mobile-nav { list-style: none; margin: var(--s-4) 0 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: var(--s-2); }
.side-menu .side-toggle { width: 100%; display: flex; justify-content: space-between; align-items: center; background: none; border: 0; border-block-end: 1px solid var(--gold-1); padding: .75rem 0; font: 500 1.25rem/1 var(--font-display); color: var(--ink-1); cursor: pointer; text-align: start; }
.side-menu .side-toggle .chev { width: .55rem; height: .55rem; border-inline-end: 1.5px solid var(--gold-3); border-block-end: 1.5px solid var(--gold-3); transform: rotate(45deg); transition: transform .25s ease; margin-inline-end: .25rem; }
.side-menu .side-services.is-open .side-toggle .chev { transform: rotate(-135deg); }
.side-menu .side-services-list { list-style: none; margin: 0; padding: 0; display: grid; max-height: 0; opacity: 0; overflow: hidden; transition: max-height .3s ease, opacity .25s ease; }
.side-menu .side-services.is-open .side-services-list { max-height: 40rem; opacity: 1; }
.side-menu .side-services-list .nav-item a { display: grid; gap: .1rem; padding: .6rem 0 .6rem .75rem; border-inline-start: 2px solid var(--gold-1); margin-block-start: .5rem; color: var(--ink-1); text-decoration: none; }
.side-menu .side-services-list .nav-item a:hover { border-inline-start-color: var(--gold-2); }
.side-menu .side-services-list .menu-label { font: 500 1.125rem/1.2 var(--font-display); }
.side-menu .side-services-list .menu-sub { font: 400 .8125rem/1.3 var(--font-body); color: var(--ink-3); }
.side-menu .mobile-nav > li.nav-item { display: grid; justify-items: center; gap: .25rem; padding: var(--s-2); background: var(--card); border: var(--keyline); border-block-start: 2px solid var(--rose-1); text-align: center; }
.side-menu .mobile-nav > li.nav-item > a { color: var(--bronze-text); font-size: 1rem; text-decoration: none; } /* 26 Oct: icons smaller and bronze */
.side-menu .product-hover-box a { font: 500 1.125rem/1.2 var(--font-display); color: var(--ink-1); text-decoration: none; }
.side-menu .product-hover-box > span { display: block; font-size: .8125rem; color: var(--ink-3); }
.side-menu .mobile-nav > li.menu-links { grid-column: 1 / -1; display: grid; gap: .75rem; padding-block-start: var(--s-3); border-block-start: var(--keyline); margin-block-start: var(--s-2); }
.side-menu .mobile-nav > li.menu-links a { font: 500 1.25rem/1 var(--font-display); color: var(--ink-1); text-decoration: none; }
.side-menu .hr-color { display: none; }
body.menu-open { overflow: hidden; }

/* ---------- hero (home) and title bands ---------- */
.hero { position: relative; min-height: 72vh; background: var(--sand-1) center/cover no-repeat; } /* directive 26 Oct: photographs carry no text; the headline and buttons sit in .hero-copy below */
.hero-copy { padding-block: var(--s-6) var(--s-4); }
.hero-copy .hero-title { max-width: 36rem; font-size: var(--fs-display); font-weight: 300; line-height: 1.1; margin: 0 0 var(--s-3); color: var(--ink-1); }
.hero-copy .hero-actions { display: flex; gap: var(--s-2); flex-wrap: wrap; align-items: center; }
.hero-copy .social-rail { display: flex; gap: var(--s-3); margin-inline-start: auto; }
.hero-copy .social-rail a { color: var(--ink-3); text-decoration: none; font-size: .8125rem; letter-spacing: .1em; text-transform: uppercase; }
.hero .slide { position: absolute; inset: 0; background: center/cover no-repeat; opacity: 0; transition: opacity 1s; }
.hero .slide.is-active { opacity: 1; }



.hero-copy .hero-actions .btn { min-height: 2.5rem; font-size: 1rem; padding-inline: var(--s-2); }


@media (max-width: 767px) { .hero { min-height: 60vh; } .hero-copy .social-rail { margin-inline-start: 0; flex-basis: 100%; } }
.title-band { background: var(--band-title); text-align: center; padding-block: var(--s-6) var(--s-4); border-block-end: var(--keyline); }
.title-band h1 { margin: 0; font-size: var(--fs-display); font-weight: 400; }
.title-band .chev { display: block; margin: var(--s-2) auto 0; width: .9rem; height: .55rem; color: var(--ink-3); }

/* ---------- sections ---------- */
.intro { display: grid; gap: var(--s-6); align-items: center; }
.stack { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); align-items: start; } /* 26 Oct: one photograph per area, side by side, no overlap */
.stack img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block; }
@media (max-width: 767px) { .stack img { aspect-ratio: 4 / 3; } }
@media (min-width: 1024px) { .intro { grid-template-columns: 1fr 1fr; } }
.lead-block p { margin-block-end: var(--s-2); }
.remodel { display: grid; gap: var(--s-3); }
@media (min-width: 768px) { .remodel { grid-template-columns: repeat(3, 1fr); } .remodel--2 { grid-template-columns: repeat(2, 1fr); } } /* 27 Oct: two cards fill the row, no empty column */
.remodel figure { margin: 0; }
.remodel img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.remodel figcaption { margin-block-start: var(--s-2); font: 400 1.125rem/1.3 var(--font-display); color: var(--ink-1); letter-spacing: .04em; text-transform: uppercase; }
.remodel figcaption .num { color: var(--ink-3); margin-inline-end: .5rem; font-family: var(--font-body); font-size: .8125rem; }
.remodel + .brands-title { margin-block-start: var(--s-5); } /* 28 Oct: "Our Brands" heading on the home page, after the remodel cards */
.brands { display: flex; flex-wrap: wrap; justify-content: space-around; align-items: center; gap: var(--s-4); padding-block: var(--s-4); }
.brands img { height: 2.5rem; width: auto; max-width: 10rem; object-fit: contain; }
/* "Our Clients" strip — 28 Oct (coordinator): separate section below "Our Brands"; each client appears exactly once (no
   cloned sets, no hidden copies). The row starts just outside the strip's start edge and crosses to just outside its end
   edge in one smooth pass, then re-enters (container-query units give the strip's width); paused on hover/focus; RTL
   pages run the pass the other way; static and centred under prefers-reduced-motion or without cqw support. */
.clients-strip { --clients-gap: clamp(2.5rem, 6vw, 5rem); container-type: inline-size; overflow: hidden; padding-block: var(--s-3); }
.clients-track { display: flex; align-items: center; justify-content: center; gap: var(--clients-gap); width: max-content; margin-inline: auto; }
.clients-strip img { height: 2.5rem; width: auto; max-width: 10rem; object-fit: contain; }
.client-red-sea-global img { height: 3.5rem; max-width: none; } /* portrait lockup (gold mark over navy wordmark): 56 px keeps the wordmark legible */
.client-freyssinet-saudi-arabia-co-ltd img { height: 3.5rem; max-width: none; } /* bilingual lockup on its own white ground (the company's only published asset): 56 px keeps both scripts legible (approved 27 Oct, option A) */
@supports (width: 1cqw) {
  .clients-track { animation: clients-pass 22s linear infinite; will-change: transform; }
  .clients-strip:hover .clients-track, .clients-strip:focus-within .clients-track { animation-play-state: paused; }
  @keyframes clients-pass { from { transform: translateX(calc(50cqw + 50%)); } to { transform: translateX(calc(-50cqw - 50%)); } }
  [dir="rtl"] .clients-track { animation-direction: reverse; }
  @media (prefers-reduced-motion: reduce) { .clients-track { animation: none; transform: none; } }
}


.expertise-grid { display: grid; gap: var(--s-3); }
@media (min-width: 768px) { .expertise-grid { grid-template-columns: repeat(3, 1fr); } }
.expertise-grid figure { margin: 0; }
.expertise-grid img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.expertise-grid figcaption { margin-block-start: var(--s-2); }
.expertise-grid figcaption b { display: block; font: 400 1.25rem/1.2 var(--font-display); color: var(--ink-1); }
.expertise-grid figcaption span { color: var(--ink-3); font-size: .9375rem; }
.what-we-do { display: grid; gap: var(--s-3); }
@media (min-width: 768px) { .what-we-do { grid-template-columns: repeat(4, 1fr); } }
.what-we-do h3 { font-size: 1.375rem; margin-block-end: .5rem; }
.what-we-do p { color: var(--ink-2); font-size: .9375rem; }
.what-we-do .icon { color: var(--bronze-text); font-size: 1rem; margin-block-end: .5rem; }
.news-grid { display: grid; gap: var(--s-4) var(--s-3); }
@media (min-width: 768px) { .news-grid { grid-template-columns: repeat(3, 1fr); } }

/* ---------- category page ---------- */
.cat-hero { position: relative; min-height: 24rem; background: var(--sand-1) center/cover no-repeat; } /* photograph only; the headline is in .cat-copy below */
.cat-copy { padding-block: var(--s-6) 0; }
.cat-copy .hero-title { font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem); font-weight: 300; line-height: 1.1; max-width: 34rem; margin: 0; font-family: var(--font-display); color: var(--ink-1); }
.cat-copy h2 { font-size: var(--fs-h2); margin-block: var(--s-3) var(--s-2); }
.cat-copy h2:first-child { margin-block-start: 0; }
.tabs { margin-block-end: var(--s-4); }
.tab-pane { display: none; }
.tab-pane.is-active { display: block; }
.project-grid { display: grid; gap: var(--s-3); }
@media (min-width: 768px) { .project-grid { grid-template-columns: repeat(3, 1fr); } }
.project-grid figure { margin: 0; }
.project-grid img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; cursor: zoom-in; }
.project-grid figcaption { margin-block-start: .5rem; font-size: .8125rem; color: var(--ink-3); }
.project-grid figcaption a { color: var(--ink-2); }
.gallery-group + .gallery-group { margin-block-start: var(--s-4); padding-block-start: var(--s-4); border-block-start: var(--keyline); }

/* ---------- projects page (masonry via columns) ---------- */
.filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-block-end: var(--s-4); }
.masonry { columns: 3 18rem; column-gap: var(--s-3); }
.masonry figure { break-inside: avoid; margin: 0 0 var(--s-3); }
.masonry figure.is-hidden { display: none; }
.masonry img { width: 100%; height: auto; display: block; cursor: zoom-in; }
.masonry figcaption { margin-block-start: .5rem; font-size: .9375rem; color: var(--ink-2); }

/* ---------- lightbox ---------- */
.lightbox { position: fixed; inset: 0; background: rgba(245,240,229,.96); display: none; place-items: center; z-index: 60; }
.lightbox.is-open { display: grid; }
.lightbox img { max-width: 92vw; max-height: 88vh; object-fit: contain; box-shadow: 0 10px 40px rgba(0,0,0,.15); }
.lightbox .close-btn, .lightbox .arrow { position: absolute; background: var(--card); border: var(--keyline); color: var(--ink-1); width: 2.75rem; height: 2.75rem; font-size: 1.5rem; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.lightbox .close-btn { top: 1rem; inset-inline-end: 1rem; }
.lightbox .arrow.left { inset-inline-start: 1rem; top: 50%; } .lightbox .arrow.right { inset-inline-end: 1rem; top: 50%; }

/* ---------- about ---------- */
.counters { padding-block: var(--s-4); }
.play-image { position: relative; }
.play-image img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.play-image .play-btn { display: none; position: absolute; inset-inline-start: var(--s-3); bottom: var(--s-3); background: var(--card); border: var(--keyline); color: var(--ink-1); font: 500 .8125rem/1 var(--font-body); letter-spacing: .14em; padding: .6rem .9rem; cursor: default; }
.awards { display: grid; gap: var(--s-3); }
@media (min-width: 768px) { .awards { grid-template-columns: repeat(3, 1fr); } }
.awards figure { margin: 0; }
/* 27 Oct (coordinator): the award logo files are small (133×56 px); never upscale them — native size, capped, start-aligned. */
.awards img { width: auto; max-width: 100%; height: auto; max-height: 7rem; object-fit: contain; object-position: left center; display: block; }
[dir="rtl"] .awards img { object-position: right center; }
.awards figcaption { margin-block-start: .75rem; font: 400 1.125rem/1.2 var(--font-display); color: var(--ink-1); }

/* ---------- contact ---------- */
.contact { display: grid; gap: var(--s-6); }
@media (min-width: 1024px) { .contact { grid-template-columns: 1fr 1.2fr; } }
.contact-info p { margin: 0 0 .5rem; color: var(--ink-2); }
.contact-info a { text-decoration: none; }
.contact .form-panel .two { display: grid; gap: 0 var(--s-3); }
@media (min-width: 768px) { .contact .form-panel .two { grid-template-columns: 1fr 1fr; } }
.contact .form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); margin-block-start: var(--s-2); }
.map h2 { font-size: var(--fs-h2); margin-block: var(--s-6) var(--s-3); }
.map iframe { width: 100%; height: 28rem; border: var(--keyline); display: block; }

/* ---------- blog / post ---------- */
.post-hero img { width: 100%; max-height: 32rem; object-fit: cover; }
.post-head { max-width: 50rem; margin-block: var(--s-4) var(--s-3); }
.post-head h1 { font-size: var(--fs-h2); font-weight: 400; margin-block: .5rem var(--s-2); }
.post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; color: var(--ink-3); font-size: .9375rem; }
.post-meta img { width: 2.5rem; height: 2.5rem; border-radius: 50%; }
.post-body { max-width: 50rem; }
.post-body img { max-width: 100%; height: auto; }
.tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-block: var(--s-3); }
.tags span { padding: .35rem .7rem; border: var(--keyline); font-size: .8125rem; color: var(--ink-2); }
.share { display: flex; gap: var(--s-2); align-items: center; }
.share a { color: var(--ink-1); text-decoration: none; font-size: 1.125rem; }
.prev-next { display: grid; gap: var(--s-3); padding-block: var(--s-3); border-block: var(--keyline); margin-block: var(--s-3); }
@media (min-width: 768px) { .prev-next { grid-template-columns: 1fr 1fr; } .prev-next > div:last-child { text-align: end; } }
.prev-next .lbl { display: block; font-size: .8125rem; color: var(--ink-3); letter-spacing: .08em; text-transform: uppercase; }
.author-box { display: grid; grid-template-columns: auto 1fr; gap: var(--s-3); align-items: start; padding: var(--s-3); background: var(--card); border: var(--keyline); margin-block: var(--s-4); }
.author-box img { width: 6rem; height: 6rem; border-radius: 50%; }
.author-box h4 { margin: 0 0 .25rem; font: 400 1.375rem/1.2 var(--font-display); }
.comments { max-width: 50rem; }
.comments h2 { font-size: var(--fs-h3); margin-block: var(--s-4) var(--s-2); }
.single-comment { padding-block: var(--s-2); border-block-end: var(--keyline); }
.single-comment .comment-header { display: flex; flex-wrap: wrap; gap: .5rem var(--s-2); align-items: baseline; }
.single-comment .comment-date { color: var(--ink-3); font-size: .875rem; }
.single-comment hr { display: none; }
.delete-btn { background: var(--sand-1); border: var(--keyline); color: var(--ink-1); padding: .25rem .6rem; font-size: .8125rem; cursor: pointer; }
.comment-form .row { display: grid; gap: 0 var(--s-3); }
@media (min-width: 768px) { .comment-form .row { grid-template-columns: 1fr 1fr; } }
.comment-form .form-group { margin-block-end: var(--s-3); }
.comment-form input[type="text"], .comment-form input[type="email"], .comment-form textarea { width: 100%; min-height: var(--control-h); border: 0; border-block-end: 1px solid var(--ink-3); background: transparent; font: inherit; color: var(--ink-1); padding: .5rem 0; }
.comment-form textarea { min-height: 7rem; }
.comment-form input:focus-visible, .comment-form textarea:focus-visible { outline: none; border-block-end: 2px solid var(--focus); }
.comment-form .checkbox-line { display: flex; gap: .625rem; align-items: flex-start; margin-block: var(--s-2) var(--s-3); }
.comment-form .submit-btn { min-height: var(--control-h); padding-inline: var(--s-3); background: var(--gold-2); color: var(--ink-1); border: 1px solid var(--gold-2); font: 500 var(--fs-control)/1 var(--font-display); cursor: pointer; }
.comment-flash { color: var(--success); } .comment-errors { color: var(--error); padding-inline-start: 1.25rem; }
.pagination { display: flex; flex-wrap: wrap; gap: .25rem; list-style: none; padding: 0; margin-block: var(--s-3); }
.pagination a, .pagination span { display: inline-block; min-width: 2.25rem; padding: .4rem .5rem; text-align: center; border: var(--keyline); text-decoration: none; color: var(--ink-2); }
.pagination .active span { background: var(--gold-2); color: var(--ink-1); border-color: var(--gold-2); }
.related { display: grid; gap: var(--s-3); }
@media (min-width: 768px) { .related { grid-template-columns: 1fr 1fr; } }

/* ---------- privacy / generic content ---------- */
.prose { max-width: 50rem; }
.prose h2 { font-size: var(--fs-h3); margin-block: var(--s-4) var(--s-2); }
.prose h3 { font-size: 1.25rem; margin-block: var(--s-3) .5rem; }
.prose ul { padding-inline-start: 1.25rem; }
.legacy-content img { max-width: 100%; height: auto; }

/* ---------- footer additions (reference: newsletter, credits, hairline) ---------- */
.site-footer .credits { font-size: .8125rem; margin-block-start: var(--s-2); }
.site-footer .credits a { font-size: .8125rem; }
.site-footer .nl-row { display: flex; gap: .5rem; align-items: flex-end; max-width: 26rem; }
.site-footer .nl-row .input { flex: 1; }
.site-footer .check { margin-block-start: var(--s-2); }
.site-footer .check input { accent-color: var(--gold-2); }
.site-footer .socials-rail { display: none; }
/* CP2 review fix (26 Oct): long e-mail links in the footer columns overflowed the page at 768–1024 px; the hidden RTL side menu widened the page */
.site-footer .grid > * { min-width: 0; }
.site-footer a { overflow-wrap: anywhere; }
html { overflow-x: clip; }

/* ---------- auth pages ---------- */
.auth-card { max-width: 32rem; margin: var(--s-6) auto; background: var(--card); border: var(--keyline); padding: var(--s-4); }
.auth-card h1 { font-size: var(--fs-h2); font-weight: 400; margin-block-end: var(--s-3); }

/* ---------- utilities ---------- */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.alert { margin-block-end: var(--s-3); }
.text-center { text-align: center; }
.mt-6 { margin-block-start: var(--s-6); }

/* partner portal pages (kept live until D-J3; restyled minimally) */
.card.bg-dark { background: var(--card) !important; color: var(--ink-2); border: var(--keyline) !important; box-shadow: none !important; }
.card.bg-dark .text-white, .card.bg-dark label { color: var(--ink-1) !important; }
.card.bg-dark .form-control { width: 100%; min-height: var(--control-h); border: 0; border-block-end: 1px solid var(--ink-3); background: transparent; color: var(--ink-1); font: inherit; padding: .5rem 0; }
.card.bg-dark .btn { background: var(--gold-2); color: var(--ink-1); border: 1px solid var(--gold-2); min-height: var(--control-h); padding-inline: var(--s-3); font: 500 var(--fs-control)/1 var(--font-display); }
.bg-section { background: var(--ivory-0); }

/* ---------- 26 Oct consolidated corrections (coordinator): bronze headings/titles, refined icons, footer submit without the square ---------- */
h1, h2, h3, .display, .hero-title, .title-band h1, .post-head h1, .cat-copy .hero-title, .hero-copy .hero-title { color: var(--bronze-text); }
.site-footer h4, .site-footer .quote, .site-footer h1, .site-footer h2, .site-footer h3 { color: var(--on-gradient); } /* footer stays white on the gradient */
.contact-info i, .share i, .post-meta i, .cat-copy i, .lightbox .arrow, .lightbox .close-btn { color: var(--bronze-text); }
.contact-info i, .share i { font-size: .875rem; width: 1rem; text-align: center; }
.site-footer .nl-btn { display: none; } /* the square submit is not wanted (coordinator mark-up, 26 Oct) */
.site-footer .nl-text { background: none; border: 0; padding: .5rem 0; color: var(--on-gradient); font: 500 .8125rem/1 var(--font-body); letter-spacing: var(--track-eyebrow); text-transform: uppercase; cursor: pointer; text-decoration: underline; text-underline-offset: .3em; text-decoration-color: rgba(255,255,255,.6); }
.site-footer .nl-text:hover, .site-footer .nl-text:focus-visible { text-decoration-color: #fff; outline: none; }
[dir="rtl"] .site-footer .nl-text { text-transform: none; letter-spacing: 0; }

/* ---------- gold/bronze theme across the site (coordinator, 26 Oct): component states not covered by the tokens ---------- */
.btn-on-dark { background: transparent; color: var(--ink-1); border-color: var(--gold-2); }
.btn-on-dark:hover { background: var(--gold-2); color: var(--on-bronze); }
.btn-secondary:hover { background: var(--gold-2); color: var(--on-bronze); border-color: var(--gold-2); }
.hamburger, .side-menu .close-btn { border-color: var(--gold-1); color: var(--ink-1); }
.side-menu .mobile-nav > li.nav-item { border-block-start-color: var(--gold-2); }
.side-menu .mobile-nav > li.nav-item:hover { background: var(--ivory-1); }
.site-header nav a { color: var(--ink-1); }
.lang-switch:hover { background: var(--gold-2); color: var(--on-bronze); }
.tab { color: var(--ink-1); border-color: var(--gold-1); }
.tab:hover { background: var(--gold-1); }
.services-menu { border-color: var(--gold-1); }
.services-menu .nav-item > a:hover .menu-label, .services-menu .nav-item > a:focus-visible .menu-label { color: var(--gold-3); }
.card h3 a:hover { color: var(--gold-3); }
.hero-copy .social-rail a:hover { color: var(--ink-1); }
.counters > div { border-block-start-color: var(--gold-2); }
.lightbox .close-btn, .lightbox .arrow { border-color: var(--gold-1); }
.lightbox .close-btn:hover, .lightbox .arrow:hover { background: var(--gold-2); color: var(--on-bronze); }
.masonry figcaption, .project-grid figcaption { color: var(--ink-3); }
.form-panel label, .field label { color: var(--ink-1); }
.input::placeholder, .textarea::placeholder { color: var(--ink-3); }
.check input { accent-color: var(--gold-2); }
.site-footer .check input { accent-color: var(--gold-3); }
.post-body a, .prose a { color: var(--ink-1); }
.pagination a, .pagination span { color: var(--ink-1); border-color: var(--gold-1); }
.pagination [aria-current="page"], .pagination .active { background: var(--gold-2); color: var(--on-bronze); border-color: var(--gold-2); }
.single-comment { border-block-end-color: var(--gold-1); }
.single-comment .meta, .single-comment time { color: var(--ink-3); }
.auth-card { border-color: var(--gold-1); }
.about-awards figcaption, .awards figcaption { color: var(--ink-1); }
.pagination .active span { color: var(--on-bronze); }
/* 26 Oct: a project whose only photograph shows people keeps its place with a neutral panel (nothing removed) */
.photo-withheld { aspect-ratio: 4 / 3; background: var(--sand-1); border: var(--keyline); display: grid; place-items: center; }
.photo-withheld span { font: 500 .8125rem/1 var(--font-body); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--ink-3); }
[dir="rtl"] .photo-withheld span { text-transform: none; letter-spacing: 0; }

/* ---------- 27 Oct (coordinator): single intro photograph; Services directly after About ---------- */
/* 27 Oct (coordinator's two references): the intro photograph is shown as a single, slightly narrower image whose crop ends above
   the paving. The photograph (1024 × 768) is drawn at 121.9 % of the frame, so the frame shows its left 82 % (x 0–840: the figure at
   the right edge stays out of frame) and a vertical window that stops above the asphalt; the frame proportions and the window shift
   per breakpoint. direction: ltr keeps the left anchor under RTL. No distortion: the image keeps its own ratio and is only clipped. */
.photo-single { width: 94%; aspect-ratio: 2.1 / 1; overflow: hidden; direction: ltr; }
.photo-single img { width: 121.9%; max-width: none; height: auto; display: block; transform: translateY(-21.5%); } /* window ≈ y 165–565 of 768 */
@media (max-width: 767px) { .photo-single { aspect-ratio: 1.6 / 1; } .photo-single img { transform: translateY(-5.2%); } } /* phones: taller frame, window ≈ y 40–565, still above the paving */
.side-menu .mobile-nav > li.menu-links:first-child { border-block-start: 0; padding-block-start: 0; margin-block-start: 0; }
.side-menu .mobile-nav > li.side-services + li.menu-links { margin-block-start: 0; }

@media (min-width: 1024px) {
  /* 28 Oct (coordinator, desktop only): the hero headline must be fully visible above the fold on laptop-height windows —
     shorter hero, copy block starts higher, headline capped a little smaller (still two lines at 1024–1920). "Our Brands"
     moves down from the remodel captions (its base margin token --s-5 is undefined → 0) and sits close to its logos. */
  .hero { min-height: 54vh; }
  .hero-copy { padding-block-start: 1.25rem; }
  .hero-copy .hero-title { font-size: clamp(2rem, 1.1rem + 2.4vw, 3rem); }
  /* 28 Oct, second review: heading 17 px further down, logos unchanged (what is removed below the heading is added above it). */
  .remodel + .brands-title { margin-block-start: calc(var(--s-8) + var(--s-2)); margin-block-end: var(--s-1); }
  .remodel + .brands-title + .brands { padding-block-start: 0; }
}

/* header: phone-only language switch */
.phone-only { display: none; }
@media (max-width: 1023px) { .phone-only { display: inline-block; } .site-header .bar { grid-template-columns: auto 1fr auto auto; } }