@font-face {
  font-family: 'Almarai';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/almarai-400-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
  font-family: 'Almarai';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/almarai-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Almarai';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/almarai-700-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
  font-family: 'Almarai';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/almarai-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Almarai';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/assets/fonts/almarai-800-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
  font-family: 'Almarai';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/assets/fonts/almarai-800-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/assets/fonts/cormorant-300-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/cormorant-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/cormorant-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Reem Kufi';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/reemkufi-600-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
  font-family: 'Reem Kufi';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/reemkufi-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
  --ivory: #faf7f2;
  --paper: #fffdf9;
  --white: #ffffff;
  --sand: #e9dfd2;
  --sand-2: #f0e9df;
  --gold: #c6a265;
  --gold-soft: #e1bd7f;
  --gold-deep: #7b591f;
  --gold-hover: #b08e52;
  /* Bare channels so every translucent gold resolves from one place. Before 2026-09-20 there
     were 22 hand-typed rgba(198, 162, 101, …) hairlines, glows and focus rings scattered through
     this file; changing --gold recoloured two-thirds of the gold on the site and left those
     behind. Keep any new translucent gold as rgba(var(--gold-rgb), …). */
  --gold-rgb: 198, 162, 101;
  /* Brand green. It replaced charcoal #332e27 / #282420 as the dark neutral on 2026-09-20.
     These are not new values: GREEN chose #173D30 / #0F2C22 for the client quotation on
     11 Aug 2026 and they have been shipping on quotations since, so the website adopts them
     rather than introducing a second green nobody could tell apart by eye but every tool
     would treat as different. One green across the estate.
     Measured, so the next person does not have to: text on ivory 11.25:1, white on the panel
     12.02:1, gold on the panel 5.01:1, gold-soft 6.75:1. Every pair clears AA.
     It cannot go much lighter — gold sits on this colour in the footer of all 54 pages, and
     above roughly #22402f gold-on-green drops below 4.5:1. */
  --forest: #173d30;
  --forest-2: #0f2c22;
  --forest-rgb: 23, 61, 48;
  /* Text on the green panels. These were warm greys (#efe8db, #d9d0c3, #d7ccbd, #bfb4a5,
     #978b7b) chosen to sit on charcoal; on green they read muddy. Each is luminance-matched
     to the warm tone it replaces, so the panels keep their tonal hierarchy. The faintest one
     is also an accessibility fix: #978b7b was 3.99:1 on the dark panel, below AA — its
     replacement is 4.63:1. */
  --on-dark: #e4ece7;
  --on-dark-2: #c7d5cd;
  --on-dark-3: #a9bdb2;
  --on-dark-4: #8a9d92;
  /* Softened reading colour for long-form body copy, luminance-matched to the #51493f brown
     it replaces (L=0.0673 against 0.0687). */
  --forest-soft: #3d4d45;
  --ivory-rgb: 250, 247, 242;
  --white-rgb: 255, 255, 255;
  --error-rgb: 155, 44, 44;
  --error-tint: #fbefef;
  --error-line: var(--error-line);
  /* Deliberately NOT green. These are scrims over photographs of real events — a green scrim
     tints the photograph itself, which is why the brand stops at the edge of the picture. */
  --scrim-rgb: 36, 31, 26;
  --taupe: #756957;
  /* Semantic, not brand. This is the success tick and the sent-form state, and it is far too
     light to carry text or gold on top of it — gold on #1f6b48 is 2.69:1. It was called --green
     until the brand took green on 2026-09-20; it is --success now so that "the green" in this
     file is unambiguous. The brand green is --forest below. */
  --success: #1f6b48;
  --success-tint: #f1f7f3;
  --success-line: #aac9b7;
  --error: #9b2c2c;
  --line: rgba(var(--gold-rgb), .32);
  --shadow: 0 24px 60px rgba(var(--forest-rgb), .10);
  --shadow-lift: 0 30px 60px -22px rgba(var(--forest-rgb), .20);
  --radius: 18px;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --font: "Almarai", "Segoe UI", Tahoma, Arial, sans-serif;
  --serif: "Cormorant Garamond", "Times New Roman", serif;
  --serif-mixed: "Cormorant Garamond", "Almarai", "Segoe UI", sans-serif;
  --kufi: "Reem Kufi", "Almarai", sans-serif;
  --shell: min(1180px, calc(100vw - 40px));
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 100px; }
body { margin: 0; background: var(--ivory); color: var(--forest); font-family: var(--font); font-size: 17px; line-height: 1.8; text-rendering: optimizeLegibility; }
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .1; z-index: -1; background-image: radial-gradient(circle at 1px 1px, #8f816e 1px, transparent 0); background-size: 30px 30px; mask-image: linear-gradient(to bottom, #000, transparent 75%); }
::selection { background: var(--gold); color: #fff; }
img, video { max-width: 100%; height: auto; }
a { color: inherit; text-decoration-thickness: .08em; text-underline-offset: .2em; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--gold-deep); outline-offset: 4px; }
h1, h2, h3 { margin-block: 0 .6em; line-height: 1.3; letter-spacing: 0; font-weight: 800; text-wrap: balance; }
h1 { font-size: clamp(2.35rem, 5.6vw, 4.4rem); }
h2 { font-size: clamp(1.8rem, 3.6vw, 2.9rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); }
p { margin-block: 0 1em; }
ul, ol { margin-block: 0; }
html[lang="en"] h1, html[lang="en"] h2 { font-family: var(--serif); font-weight: 500; line-height: 1.15; }
.shell { width: var(--shell); margin-inline: auto; }
.narrow { max-width: 790px; }
.section { padding-block: clamp(76px, 9.5vw, 134px); }
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }
.skip-link { position: fixed; inset-block-start: 12px; inset-inline-start: 12px; transform: translateY(-140%); z-index: 1000; background: var(--forest); color: white; padding: 10px 16px; border-radius: 8px; }
.skip-link:focus { transform: translateY(0); }

/* reveal motion (classes are added by site.js only, so no-JS keeps everything visible) */
.rv { opacity: 0; transform: translateY(26px); }
.rv-in { opacity: 1; transform: none; transition: opacity .9s var(--ease) var(--rv-delay, 0s), transform .9s var(--ease) var(--rv-delay, 0s); }

.site-header { position: sticky; inset-block-start: 0; z-index: 90; border-block-end: 1px solid var(--line); background: rgba(var(--ivory-rgb), .94); backdrop-filter: blur(14px); }
.nav-shell { width: var(--shell); min-height: 84px; margin-inline: auto; display: grid; grid-template-columns: auto 1fr auto; gap: 28px; align-items: center; }
.wordmark { display: inline-flex; align-items: baseline; gap: 12px; text-decoration: none; white-space: nowrap; }
.wordmark-ar { font-family: var(--kufi); font-weight: 600; font-size: 1.8rem; line-height: 1; letter-spacing: 0; }
.wordmark-en { color: var(--gold-deep); font-family: var(--serif); font-size: .68rem; font-weight: 600; letter-spacing: .32em; }
.site-nav { display: flex; justify-content: center; align-items: center; gap: clamp(14px, 2vw, 30px); }
.site-nav a { position: relative; text-decoration: none; font-size: .9rem; font-weight: 700; }
html[lang="en"] .site-nav a { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; }
.site-nav a::after { content: ""; position: absolute; inset-inline: 0; inset-block-end: -8px; height: 1.5px; transform: scaleX(0); transform-origin: center; background: var(--gold); transition: transform .35s var(--ease); }
.site-nav a:hover::after, .site-nav a[aria-current]::after { transform: scaleX(1); }
.site-nav a:hover { color: var(--gold-deep); }
.nav-actions { display: flex; align-items: center; gap: 10px; }
.lang-link { min-width: 44px; min-height: 44px; border: 1px solid var(--gold); border-radius: 50%; display: grid; place-items: center; text-decoration: none; font-weight: 800; transition: background .25s, color .25s; }
.lang-link:hover { background: var(--gold); color: #fff; }
.menu-toggle { display: none; min-height: 44px; border: 0; background: none; color: var(--forest); align-items: center; gap: 8px; cursor: pointer; }
.menu-toggle i, .menu-toggle i::before, .menu-toggle i::after { width: 22px; height: 1.6px; background: currentColor; display: block; position: relative; transition: .25s var(--ease); }
.menu-toggle i::before, .menu-toggle i::after { content: ""; position: absolute; inset-inline-start: 0; }
.menu-toggle i::before { transform: translateY(-7px); }
.menu-toggle i::after { transform: translateY(7px); }
.menu-toggle[aria-expanded="true"] i { background: transparent; }
.menu-toggle[aria-expanded="true"] i::before { transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] i::after { transform: rotate(-45deg); }

.button { min-height: 48px; display: inline-flex; justify-content: center; align-items: center; padding: 11px 28px; border: 1.5px solid var(--gold); border-radius: 999px; background: var(--gold); color: var(--forest); font-weight: 800; text-decoration: none; cursor: pointer; transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s, border-color .25s, color .25s; }
.button:hover { transform: translateY(-2px); box-shadow: 0 14px 28px rgba(var(--gold-rgb), .35); background: var(--gold-hover); border-color: var(--gold-hover); color: var(--forest); }
.button-ghost { background: transparent; color: var(--forest); }
.button-ghost:hover { background: var(--gold); color: var(--forest); }
.button-small { min-height: 42px; padding: 8px 18px; font-size: .85rem; }
.button-row, .form-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.text-link { display: inline-flex; align-items: center; gap: 9px; color: var(--gold-deep); font-weight: 800; }
/* W2-10: an editorial link sitting inside a sentence. The site-wide rule is a { color: inherit },
   so without this a cross-link in a paragraph would be invisible as a link. */
.prose-link { color: var(--gold-deep); font-weight: 700; text-decoration: underline; text-decoration-thickness: .08em; text-underline-offset: .22em; }
.prose-link:hover { color: var(--forest); }
.reading-note p { color: var(--taupe); }
.text-link:hover span { transform: translateX(3px); }
[dir="rtl"] .text-link:hover span { transform: translateX(-3px); }
.text-link span { transition: transform .25s var(--ease); }
.section-link { margin-block-start: 14px; }
.eyebrow { display: flex; align-items: center; gap: 14px; margin-block-end: 16px; color: var(--gold-deep); font-weight: 800; font-size: .85rem; letter-spacing: 0; }
.eyebrow::before { content: ""; width: 36px; height: 1px; background: var(--gold); flex: none; }
html[lang="en"] .eyebrow { font-size: .74rem; letter-spacing: .22em; text-transform: uppercase; font-weight: 600; }
.section-heading { max-width: 780px; margin-block-end: 52px; }
.section-heading > p:last-child { color: var(--taupe); max-width: 690px; }
.microcopy { color: var(--taupe); font-size: .84rem; margin-block-start: 20px; }

.home-hero { padding-block: clamp(58px, 8vw, 118px) clamp(60px, 8vw, 104px); overflow: hidden; position: relative; }
.home-hero::before { content: ""; position: absolute; inset-block-start: -180px; inset-inline-end: -180px; width: 480px; height: 480px; border-radius: 50%; background: radial-gradient(circle, rgba(var(--gold-rgb), .14), transparent 65%); pointer-events: none; }
.hero-grid, .split { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(320px, .75fr); gap: clamp(42px, 7vw, 100px); align-items: center; }
.hero-copy h1 { max-width: 860px; }
.hero-lead, .page-hero p { max-width: 700px; color: var(--taupe); font-size: clamp(1.04rem, 2vw, 1.2rem); }
.hero-copy .button-row { margin-block-start: 32px; }
.hero-art { max-width: 440px; justify-self: end; width: 100%; position: relative; }
[dir="rtl"] .hero-art { justify-self: start; }
.hero-art::before { content: ""; position: absolute; inset-block-start: 34px; inset-inline-start: -30px; width: 100%; height: calc(100% - 62px); border: 1px solid var(--sand); border-radius: 230px 230px 22px 22px; pointer-events: none; }
.arch-frame { min-height: 520px; padding: 84px 42px 46px; border: 1.5px solid var(--gold); border-radius: 240px 240px 22px 22px; background: radial-gradient(130% 55% at 50% 100%, rgba(var(--gold-rgb), .42), transparent 62%), linear-gradient(180deg, #1c4838 0%, #173d30 55%, #0b211a 100%); color: var(--ivory); box-shadow: 0 44px 90px -32px rgba(var(--forest-rgb), .55); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; position: relative; overflow: hidden; }
.arch-frame::before { content: ""; position: absolute; z-index: 1; width: 220px; aspect-ratio: 1; border: 1px solid rgba(var(--gold-rgb), .28); border-radius: 50%; inset-block-start: -72px; inset-inline-end: -72px; }
.arch-frame::after { content: ""; position: absolute; z-index: 3; inset: 13px; border: 1px solid rgba(var(--gold-rgb), .35); border-radius: 228px 228px 14px 14px; pointer-events: none; }
.arch-mark { font-family: var(--kufi); font-size: 4.4rem; font-weight: 600; line-height: 1.4; color: var(--ivory); }
.arch-frame > span:nth-child(2) { font-family: var(--serif); letter-spacing: .38em; font-size: .78rem; font-weight: 500; color: var(--gold-soft); margin-block-start: 14px; }
.arch-frame i { width: 64px; height: 1px; background: rgba(var(--gold-rgb), .55); margin-block: 32px; }
.arch-frame p { font-size: 1.3rem; font-weight: 700; color: var(--on-dark); max-width: 300px; }
.arch-frame strong { font-family: var(--serif-mixed); font-size: 1.9rem; font-weight: 600; color: var(--gold-soft); }
/* The hero photograph sits behind the brand arch: same frame, same gold, same wordmark, with a
   real setup behind it instead of an empty gradient. The scrim keeps the ivory type legible. */
.arch-photo { position: absolute; inset: 0; z-index: 0; display: block; }
.arch-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.arch-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(var(--scrim-rgb), .62) 0%, rgba(var(--scrim-rgb), .48) 42%, rgba(var(--scrim-rgb), .82) 100%); }
.arch-frame > :not(.arch-photo) { position: relative; z-index: 2; }
.work-link { display: block; color: inherit; text-decoration: none; }

.trust-strip { border-block: 1px solid rgba(var(--gold-rgb), .3); background: var(--forest); overflow: hidden; }
.trust-strip > div { width: var(--shell); margin-inline: auto; min-height: 72px; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 13px 34px; padding-block: 14px; }
.trust-strip span { display: inline-flex; gap: 12px; align-items: center; color: #efe6d8; font-size: .88rem; font-weight: 400; white-space: nowrap; }
.trust-strip i { width: 7px; aspect-ratio: 1; transform: rotate(45deg); background: var(--gold); flex: none; }
.trust-strip.marquee > div { width: max-content; max-width: none; flex-wrap: nowrap; justify-content: flex-start; gap: 44px; animation: zn-marquee 44s linear infinite; }
.trust-strip.marquee > div:hover { animation-play-state: paused; }
@keyframes zn-marquee { to { transform: translateX(25%); } }
[dir="ltr"] .trust-strip.marquee > div { animation-name: zn-marquee-ltr; }
@keyframes zn-marquee-ltr { to { transform: translateX(-25%); } }

.service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (min-width: 1101px) { .service-grid > .service-card:last-child:nth-child(3n + 1) { grid-column: 2; } }
.service-card { min-height: 340px; padding: 34px 32px; border: 1px solid var(--sand); border-radius: var(--radius); background: rgba(var(--white-rgb), .66); display: flex; flex-direction: column; transition: transform .6s var(--ease), box-shadow .6s var(--ease), border-color .6s; }
.service-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lift); border-color: var(--gold); }
.service-card > span { color: var(--gold); font-family: var(--serif); font-weight: 500; font-size: 2.7rem; line-height: 1; margin-block-end: 40px; }
.service-card p:not(.eyebrow) { color: var(--taupe); }
.service-card .text-link { margin-block-start: auto; }
.service-card:nth-child(2), .service-card:nth-child(6) { background: var(--forest); color: var(--ivory); border-color: var(--forest); }
.service-card:nth-child(2) .eyebrow, .service-card:nth-child(6) .eyebrow { color: var(--gold-soft); }
.service-card:nth-child(2) p:not(.eyebrow), .service-card:nth-child(6) p:not(.eyebrow) { color: var(--on-dark-2); }
.service-card:nth-child(2) .text-link, .service-card:nth-child(6) .text-link { color: var(--gold-soft); }

.portfolio-preview, .case-study, .team-section { background: var(--paper); }
.publish-card { padding: 40px 38px; border: 1px solid var(--line); border-radius: 130px 130px 18px 18px; background: var(--ivory); box-shadow: var(--shadow); text-align: center; }
.publish-card.large { padding: clamp(40px, 6vw, 70px); }
.publish-card .check-list { text-align: start; display: inline-block; }
.seal { width: 64px; aspect-ratio: 1; margin: 0 auto 26px; border: 1px solid var(--gold); border-radius: 50%; display: grid; place-items: center; color: var(--gold-deep); font-size: 1.3rem; background: var(--paper); }
.check-list, .plain-list, .diamond-list { list-style: none; padding: 0; }
.check-list li, .plain-list li, .diamond-list li { position: relative; padding-inline-start: 27px; margin-block: 10px; }
.check-list li::before { content: "✓"; position: absolute; inset-inline-start: 0; color: var(--success); font-weight: 900; }
.plain-list li::before { content: "—"; position: absolute; inset-inline-start: 0; color: var(--gold-deep); }
.diamond-list li::before { content: ""; position: absolute; inset-inline-start: 2px; inset-block-start: .72em; width: 7px; height: 7px; background: var(--gold); transform: rotate(45deg); }
.check-list.large li, .plain-list.large li { margin-block: 16px; }

/* real-work gallery */
.gallery-head { display: flex; align-items: center; gap: 12px; font-size: 1.25rem; margin-block: 44px 20px; }
.gallery-head::before { content: ""; width: 9px; height: 9px; background: var(--gold); transform: rotate(45deg); flex: none; }
.gallery-head span { font-family: var(--serif); color: var(--gold-deep); font-weight: 500; font-size: 1.05rem; }
.gallery-date { margin-inline-start: auto; font-size: .82rem; font-weight: 600; color: var(--taupe); letter-spacing: .02em; }
.gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.work-figure { position: relative; margin: 0; overflow: hidden; border-radius: 14px; background: var(--sand-2); }
.work-figure img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.work-figure:hover img { transform: scale(1.05); }
.work-figure figcaption { position: absolute; inset-inline: 0; inset-block-end: 0; padding: 26px 16px 12px; background: linear-gradient(to top, rgba(var(--scrim-rgb), .74), transparent); color: #f5efe4; font-size: .78rem; font-weight: 700; }
.home-collage { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.home-collage .work-figure:nth-child(1), .home-collage .work-figure:nth-child(2) { border-radius: 120px 120px 14px 14px; }
.home-collage .work-figure:nth-child(2), .home-collage .work-figure:nth-child(3) { translate: 0 22px; }

/* portfolio reels */
.reels-section { background: var(--white); }
.reel-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.reel-card { position: relative; margin: 0; border-radius: 14px; overflow: hidden; background: var(--forest-2); cursor: pointer; }
.reel-card video { display: block; width: 100%; height: auto; }
.reel-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 62px; height: 62px; border-radius: 50%; background: rgba(var(--scrim-rgb), .58); border: 1px solid rgba(var(--gold-rgb), .65); backdrop-filter: blur(4px); pointer-events: none; transition: opacity .35s, transform .35s var(--ease), background .35s; }
.reel-play::before { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-38%, -50%); border-top: 11px solid transparent; border-bottom: 11px solid transparent; border-left: 18px solid var(--gold-soft); }
.reel-card:hover .reel-play { background: rgba(var(--scrim-rgb), .78); }
.reel-card.playing .reel-play { opacity: 0; transform: translate(-50%, -50%) scale(1.35); }
.reel-card figcaption { position: absolute; inset-inline: 0; inset-block-end: 0; padding: 26px 16px 12px; background: linear-gradient(to top, rgba(var(--scrim-rgb), .74), transparent); color: #f5efe4; font-size: .78rem; font-weight: 700; pointer-events: none; }

.packages-section { background: var(--white); }
.package-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; align-items: stretch; }
.package-grid.full .package-card { min-height: 600px; }
.package-card { min-width: 0; padding: 56px 26px 30px; border: 1px solid var(--sand); border-radius: 130px 130px 16px 16px; background: var(--ivory); display: flex; flex-direction: column; text-align: center; transition: transform .6s var(--ease), box-shadow .6s var(--ease); }
.package-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lift); }
.package-card ul { text-align: start; }
.package-card.featured { background: var(--forest); border-color: var(--forest); color: var(--ivory); transform: translateY(-12px); box-shadow: 0 34px 70px -26px rgba(var(--forest-rgb), .5); }
.package-card.featured:hover { transform: translateY(-16px); }
.package-card .package-kicker { color: var(--gold-deep); font-size: .74rem; font-weight: 800; }
html[lang="en"] .package-card .package-kicker { text-transform: uppercase; letter-spacing: .14em; font-weight: 600; }
.package-card.featured .package-kicker, .package-card.featured .text-link, .package-card.featured .package-price { color: var(--gold-soft); }
.package-card.featured > p:not(.package-kicker):not(.package-price), .package-card.featured li { color: var(--on-dark-2); }
.package-card .package-price { font-family: var(--serif-mixed); color: var(--gold-deep); font-size: 1.9rem; font-weight: 600; line-height: 1.25; margin-block: 6px 4px; }
.package-card > p:not(.package-price):not(.package-kicker) { color: var(--taupe); font-size: .92rem; }
.package-card ul { margin-block: 14px 26px; }
.package-card li { font-size: .88rem; }
.package-card .text-link { margin-block-start: auto; justify-content: center; }
.package-card .text-link + .text-link { margin-block-start: 10px; }
.package-card.compact { min-height: 400px; }
.package-note { margin-block-start: 32px; padding: 18px 24px; border: 1px solid var(--line); border-radius: 14px; color: var(--taupe); background: var(--ivory); }
.table-scroll { overflow-x: auto; margin-block-start: 42px; border: 1px solid var(--sand); border-radius: var(--radius); background: white; }
table { width: 100%; min-width: 780px; border-collapse: collapse; }
th, td { padding: 18px 20px; text-align: start; vertical-align: top; border-block-end: 1px solid var(--sand-2); }
thead th { background: var(--forest); color: var(--ivory); font-size: .82rem; }
tbody th { width: 20%; }
tbody td { color: var(--taupe); font-size: .9rem; }

.process-section { background: var(--forest); color: var(--ivory); }
.process-section .eyebrow, .final-cta .eyebrow { color: var(--gold-soft); }
.process-section .section-heading > p:last-child { color: var(--on-dark-2); }
.process-grid { padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; counter-reset: zn-step; }
.process-grid li { min-height: 300px; padding: 34px 32px; border: 1px solid rgba(var(--gold-rgb), .3); border-radius: var(--radius); background: rgba(var(--ivory-rgb), .03); transition: border-color .4s, background .4s; }
.process-grid li:hover { border-color: var(--gold); background: rgba(var(--gold-rgb), .07); }
.process-grid li > span { display: block; color: var(--gold-soft); font-family: var(--serif); font-size: 3.4rem; font-weight: 300; line-height: 1.1; margin-block-end: 14px; }
.process-grid p { color: var(--on-dark-2); }
.workflow-list { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.workflow-list li { padding: 25px; border: 1px solid rgba(var(--gold-rgb), .28); border-radius: 14px; }
.workflow-list span { color: var(--gold-soft); font-family: var(--serif); font-size: 1.6rem; }

.quote-panel { min-height: 440px; border-radius: 220px 220px 20px 20px; border: 1.5px solid var(--gold); background: radial-gradient(120% 55% at 50% 100%, rgba(var(--gold-rgb), .35), transparent 60%), linear-gradient(180deg, #1c4838, #173d30 60%, #0b211a); color: var(--ivory); display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 56px 44px; position: relative; overflow: hidden; }
.quote-panel::before { content: ""; position: absolute; inset: 13px; border: 1px solid rgba(var(--gold-rgb), .32); border-radius: 208px 208px 12px 12px; pointer-events: none; }
/* The colour is not decorative. `.quote-panel` sets color: var(--ivory), but this panel lives
   inside .page-hero, and `.hero-lead, .page-hero p` matches the paragraph directly — a matching
   rule beats an inherited one at equal specificity, so the brand's own line «كل فرحة تستحق زينة»
   rendered in --taupe on the dark panel at 2.08:1, below the 3:1 large text needs. It was
   2.16:1 on charcoal before the rebrand, so this is a pre-existing defect the palette work
   surfaced rather than caused. Stating the colour here ends the inheritance argument. */
.quote-panel p { color: var(--on-dark); font-size: clamp(1.9rem, 3.6vw, 3.1rem); font-weight: 800; line-height: 1.5; position: relative; }
.quote-panel span { color: var(--gold-soft); font-family: var(--serif); letter-spacing: .3em; font-size: .72rem; position: relative; }
.about-preview .split { grid-template-columns: .78fr 1fr; }
.about-preview .split > div:last-child > p { color: var(--taupe); }

.faq-list details { border: 1px solid var(--sand); border-radius: 14px; background: white; margin-block: 13px; overflow: clip; transition: border-color .35s; }
.faq-list details[open] { border-color: var(--gold); }
.faq-list summary { min-height: 62px; padding: 17px 58px 17px 22px; list-style: none; display: flex; align-items: center; position: relative; font-weight: 800; cursor: pointer; }
[dir="rtl"] .faq-list summary { padding: 17px 22px 17px 58px; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; position: absolute; inset-inline-end: 22px; color: var(--gold); font-size: 1.5rem; font-weight: 300; }
.faq-list details[open] summary::after { content: "−"; }
.faq-list details p { padding: 0 22px 20px; color: var(--taupe); }

.lead-section { background: var(--paper); }
.form-split { align-items: start; grid-template-columns: .7fr 1.3fr; }
.lead-form { padding: clamp(26px, 4vw, 44px); border: 1px solid var(--sand); border-radius: var(--radius); background: white; box-shadow: var(--shadow); border-block-start: 3px solid var(--gold); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.form-grid label > span { display: block; margin-block-end: 7px; font-size: .82rem; font-weight: 800; }
.form-wide { grid-column: 1 / -1; }
input, select, textarea { width: 100%; min-height: 50px; padding: 10px 14px; border: 1px solid #d5c9b8; border-radius: 10px; background: white; color: var(--forest); }
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--gold-deep); box-shadow: 0 0 0 3px rgba(var(--gold-rgb), .16); outline: none; }
[aria-invalid="true"] { border-color: var(--error); box-shadow: 0 0 0 2px rgba(var(--error-rgb), .1); }
.field-error { color: var(--error); font-size: .78rem; margin-block-start: 5px; }
.consent-check { margin-block: 22px 10px; display: grid; grid-template-columns: auto 1fr; gap: 11px; align-items: start; font-size: .88rem; }
.consent-check input { width: 20px; min-height: 20px; margin-block-start: 4px; }
.form-privacy { color: var(--taupe); font-size: .77rem; }
.form-actions { margin-block-start: 22px; }
.form-status { margin-block-start: 18px; padding: 0; border-radius: 10px; font-size: .9rem; }
.form-status:not(:empty) { padding: 14px 16px; background: var(--success-tint); border: 1px solid var(--success-line); }
.form-status.error:not(:empty) { background: var(--error-tint); border-color: var(--error-line); color: var(--error); }
.honeypot { position: absolute; inset-inline-start: -10000px; width: 1px; height: 1px; overflow: hidden; }
.funnel { display: flex; flex-wrap: wrap; gap: 8px; }
.funnel span { min-height: 42px; display: inline-flex; align-items: center; padding: 7px 14px; border: 1px solid var(--sand); border-radius: 999px; background: var(--ivory); font-size: .78rem; font-weight: 700; }
.funnel span:not(:last-child)::after { content: "→"; color: var(--gold); margin-inline-start: 10px; }
[dir="rtl"] .funnel span:not(:last-child)::after { content: "←"; }
.funnel.vertical { display: grid; justify-self: stretch; }
.contact-actions { display: grid; gap: 12px; margin-block-start: 28px; }
.contact-actions a { min-height: 52px; padding: 12px 18px; border: 1px solid var(--sand); border-radius: 12px; background: white; text-decoration: none; font-weight: 800; transition: border-color .3s, transform .3s var(--ease); }
.contact-actions a:hover { border-color: var(--gold); transform: translateY(-2px); }
.form-page { max-width: 920px; }

.final-cta { padding-block: clamp(80px, 10vw, 148px); background: radial-gradient(90% 70% at 50% 110%, rgba(var(--gold-rgb), .22), transparent 60%), linear-gradient(125deg, #173d30, #1f5140); color: var(--ivory); text-align: center; }
.final-cta .eyebrow { justify-content: center; }
.final-cta .eyebrow::after { content: ""; width: 36px; height: 1px; background: var(--gold); flex: none; }
.final-cta h2 { max-width: 790px; margin-inline: auto; }
.final-cta p:not(.eyebrow) { max-width: 660px; margin-inline: auto; color: var(--on-dark-2); }
.final-cta .button-row { justify-content: center; margin-block-start: 30px; }
.final-cta .button-ghost { color: var(--ivory); }
.final-cta .button-ghost:hover { color: var(--forest); }
.final-cta .button-ghost.light { color: var(--ivory); border-color: var(--gold); }
.final-cta .button-ghost.light:hover { color: var(--forest); }

.page-hero, .service-hero, .legal-hero, .article-header { padding-block: clamp(72px, 10vw, 138px); border-block-end: 1px solid var(--sand); background: radial-gradient(circle at 80% 8%, rgba(var(--gold-rgb), .13), transparent 32%); }
[dir="rtl"] .page-hero, [dir="rtl"] .service-hero, [dir="rtl"] .legal-hero, [dir="rtl"] .article-header { background: radial-gradient(circle at 20% 8%, rgba(var(--gold-rgb), .13), transparent 32%); }
.page-hero .button-row { margin-block-start: 30px; }
/* CONV-01: the hero CTA row now carries WhatsApp, the consultation CTA and the phone
   number. The phone is a text link rather than a third button so the row stays short on
   a phone screen, and the row gets its own row-gap because it wraps onto two lines. */
.hero-actions { row-gap: 14px; }
.hero-phone { font-size: .9rem; }
.breadcrumbs { width: var(--shell); margin: 18px auto 0; font-size: .78rem; color: var(--taupe); }
.breadcrumbs ol { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.breadcrumbs li:not(:last-child)::after { content: "/"; margin-inline-start: 8px; color: #a99b88; }
.price-panel { padding: 48px 44px; border: 1.5px solid var(--gold); border-radius: 170px 170px 18px 18px; text-align: center; background: var(--paper); box-shadow: var(--shadow); position: relative; }
.price-panel::before { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(var(--gold-rgb), .25); border-radius: 160px 160px 12px 12px; pointer-events: none; }
.price-panel span, .price-panel small { display: block; color: var(--taupe); position: relative; }
.price-panel strong { display: block; font-family: var(--serif-mixed); font-weight: 600; font-size: clamp(3rem, 8vw, 6rem); line-height: 1.1; color: var(--gold-deep); position: relative; }
.decision-panel strong { font-size: clamp(1.55rem, 3vw, 2.35rem); line-height: 1.25; }
.price-panel p { margin-block-start: 25px; font-size: .85rem; position: relative; }
.info-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.info-grid article { min-height: 260px; padding: 32px; border: 1px solid var(--sand); border-radius: var(--radius); background: white; transition: border-color .4s, transform .5s var(--ease); }
.info-grid article:hover { border-color: var(--gold); transform: translateY(-4px); }
.info-grid article p { color: var(--taupe); }
.local-grid article { min-height: 230px; }
/* A cross-link block with a single destination: one full-width card rather than a
   half-width card with empty space beside it. Used on /occasions/birthdays-baby-showers/,
   where the one link through to the deeper baby-welcome page is the point of the block. */
.info-grid.single { grid-template-columns: 1fr; }
/* W2-09: a card on /services/ or /occasions/ — the child page's name, its own published
   starting fee and its own opening sentence. */
.index-grid article { min-height: 0; display: flex; flex-direction: column; }
.index-grid article h2 { font-size: 1.3rem; }
.index-grid article h2 a { text-decoration: none; }
.index-grid article h2 a:hover { color: var(--gold-deep); }
.index-price { font-family: var(--serif-mixed); color: var(--gold-deep); font-size: 1.24rem; font-weight: 600; margin-block: 6px 10px; }
.index-grid article > p:not(.index-price) { margin-block-end: 16px; }
.index-grid article .text-link { margin-block-start: auto; }
.info-grid.single article { min-height: 0; }

.guide-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.guide-card { min-height: 360px; padding: 34px; border: 1px solid var(--sand); border-radius: var(--radius); background: white; display: flex; flex-direction: column; transition: transform .6s var(--ease), box-shadow .6s var(--ease), border-color .6s; }
.guide-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lift); border-color: var(--gold); }
.guide-card > span { color: var(--gold); font-family: var(--serif); font-size: 2.7rem; font-weight: 300; }
.guide-card p:not(.eyebrow) { color: var(--taupe); }
.guide-card .text-link { margin-block-start: auto; }
.article-header p:not(.eyebrow) { font-size: 1.18rem; color: var(--taupe); }
.article-body { padding-block: 70px 110px; }
.article-body section { margin-block-end: 55px; }
.article-body h2 { font-size: clamp(1.55rem, 3vw, 2.25rem); }
.article-body p { color: var(--forest-soft); }
.article-note { margin-block-start: 55px; padding: 26px; border-inline-start: 4px solid var(--gold); background: white; }

.legal-content { padding-block: 70px 110px; }
.legal-content section { margin-block-end: 48px; }
.legal-content h2 { font-size: 1.6rem; }
.legal-content p { color: var(--forest-soft); }
.legal-content aside { padding: 24px; border: 1px solid #d7b9a2; background: #fff8f1; border-radius: 12px; }

.site-footer { background: var(--forest-2); color: var(--on-dark-2); padding-block: 70px 100px; }
/* W2-10: six columns since the Services and Occasions columns were added beside Links and
   Legal. minmax(0, 1fr) so a long Arabic service name cannot widen its own column. */
.footer-grid { width: var(--shell); margin-inline: auto; display: grid; grid-template-columns: 1.4fr repeat(5, minmax(0, 1fr)); gap: 34px 26px; }
.footer-see-all { color: var(--gold-soft); opacity: .8; font-size: .8rem; }
.site-footer h2 { font-size: .88rem; color: var(--gold-soft); letter-spacing: 0; }
html[lang="en"] .site-footer h2 { letter-spacing: .14em; text-transform: uppercase; font-size: .78rem; }
.site-footer a, .site-footer span { display: block; margin-block: 8px; text-decoration: none; font-size: .86rem; }
.site-footer a { transition: color .25s; }
.site-footer a:hover { color: var(--gold-soft); }
.footer-link-button { display: block; margin-block: 8px; padding: 0; border: 0; background: transparent; color: inherit; font-size: .86rem; cursor: pointer; text-align: start; text-decoration: underline; text-decoration-thickness: .08em; text-underline-offset: .2em; }
.footer-link-button:hover { color: var(--gold-soft); }
.site-footer p { max-width: 340px; color: var(--on-dark-3); font-size: .88rem; }
.wordmark-footer .wordmark-ar { color: var(--ivory); }
.wordmark-footer .wordmark-en { color: var(--gold-soft); }
.footer-base { width: var(--shell); margin: 50px auto 0; padding-block-start: 20px; border-block-start: 1px solid rgba(var(--gold-rgb), .2); display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.footer-base span { font-size: .75rem; color: var(--on-dark-4); }

/* CONV-04: WhatsApp leads the mobile sticky bar. It is already first in the source
   order (scripts/build.mjs, pageShell), but it used to get the narrow column and the
   outline treatment while the consultation CTA got the wide gold one, which ranked the
   form above WhatsApp. On this site WhatsApp is the enquiry, so that is reversed. */
.mobile-actions { display: none; position: fixed; inset-inline: 12px; inset-block-end: 12px; z-index: 85; padding: 6px; grid-template-columns: 1.25fr .75fr; gap: 6px; background: rgba(var(--forest-rgb), .97); border: 1px solid rgba(var(--gold-rgb), .45); border-radius: 999px; box-shadow: 0 14px 38px rgba(var(--forest-rgb), .45); }
.mobile-actions a { min-height: 48px; padding: 8px 13px; border-radius: 999px; display: flex; align-items: center; justify-content: center; text-align: center; text-decoration: none; font-size: .8rem; font-weight: 800; }
.mobile-actions a:first-child { color: var(--forest); background: var(--gold); }
.mobile-actions a:last-child { color: var(--ivory); border: 1px solid rgba(var(--gold-rgb), .5); }
.consent-banner { position: fixed; inset-inline: 20px; inset-block-end: 20px; z-index: 120; max-width: 680px; padding: 18px; border: 1px solid var(--gold); border-radius: 14px; background: var(--paper); box-shadow: 0 24px 60px rgba(var(--forest-rgb), .24); }
.consent-banner p { margin: 0; font-size: .82rem; color: var(--forest-soft); }
.consent-banner > div { margin-block-start: 12px; display: flex; flex-wrap: wrap; gap: 8px; }

.not-found { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; }
.not-found > div { padding: clamp(40px, 8vw, 130px); display: flex; flex-direction: column; justify-content: center; }
.not-found > div:last-child { background: var(--forest); color: white; }
/* Until 2026-09-20 the two English buttons on this panel were invisible: .button-ghost is
   dark text, this panel is a dark background, and nothing overrode it — measured at 1.00:1
   in the browser, rendering as two empty outlined pills. "Contact" sat at 2.11:1. It had
   been live for the life of the site, on the page a customer reaches by mistyping a URL or
   following a stale link. The dark panel needs its own light treatment, exactly as
   .final-cta already has one. */
.not-found > div:last-child .button-ghost { color: var(--ivory); border-color: var(--gold); }
.not-found > div:last-child .button-ghost:hover { background: var(--gold); color: var(--forest); }
.not-found > div:last-child .text-link { color: var(--gold-soft); }

/* W2-10: the bar carries eight items since Occasions joined it, so the header switches to
   its menu at 1180px rather than 1050px. Only the header moved; every other rule below keeps
   its original 1050px breakpoint. */
@media (max-width: 1180px) {
  .nav-shell { grid-template-columns: auto auto 1fr; }
  .menu-toggle { display: flex; }
  .site-nav { position: fixed; inset-inline: 20px; inset-block-start: 92px; padding: 18px; border: 1px solid var(--gold); border-radius: 14px; background: var(--paper); box-shadow: var(--shadow-lift); display: grid; justify-content: stretch; gap: 0; opacity: 0; transform: translateY(-8px); pointer-events: none; transition: .25s var(--ease); }
  .site-nav[data-open="true"] { opacity: 1; transform: none; pointer-events: auto; }
  .site-nav a { min-height: 48px; padding: 10px; display: flex; align-items: center; border-block-end: 1px solid var(--sand-2); }
  .site-nav a::after { display: none; }
  .nav-actions { justify-self: end; }
}

@media (max-width: 1050px) {
  .package-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .package-card.featured { transform: none; }
  .package-card.featured:hover { transform: translateY(-6px); }
  .service-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery-grid { grid-template-columns: repeat(3, 1fr); }
  .reel-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-grid > div:first-child { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  :root { --shell: min(100% - 28px, 680px); }
  body { font-size: 16px; padding-block-end: 76px; }
  .section { padding-block: 76px; }
  .nav-shell { min-height: 70px; gap: 10px; }
  .wordmark-en { display: none; }
  .wordmark-ar { font-size: 1.5rem; }
  .nav-actions .button { display: none; }
  .hero-grid, .split, .about-preview .split, .form-split { grid-template-columns: 1fr; gap: 38px; }
  .home-hero { padding-block-start: 54px; }
  .hero-art { justify-self: center !important; max-width: 360px; }
  .hero-art::before { display: none; }
  .arch-frame { min-height: 440px; }
  .arch-mark { font-size: 3.8rem; }
  .trust-strip > div { justify-content: flex-start; padding-block: 17px; }
  .service-grid, .process-grid, .workflow-list, .info-grid, .guide-grid { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .reel-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .home-collage { gap: 10px; }
  .home-collage .work-figure:nth-child(2), .home-collage .work-figure:nth-child(3) { translate: 0 14px; }
  .service-card { min-height: 300px; }
  .service-card > span { margin-block-end: 25px; }
  .package-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 14px; padding-block: 8px 20px; }
  .package-card { flex: 0 0 min(84vw, 350px); min-height: 520px; scroll-snap-align: center; }
  .package-card.compact { min-height: 400px; }
  .package-grid.full .package-card { min-height: 590px; }
  .process-grid li { min-height: 240px; }
  .form-grid { grid-template-columns: 1fr; }
  .form-wide { grid-column: auto; }
  .lead-form { padding: 22px 17px; }
  .form-actions .button { width: 100%; }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-grid > div:first-child { grid-column: 1 / -1; }
  .mobile-actions { display: grid; }
  /* The consent banner and the sticky bar together used to cover 29% of the first screen
     on a 375x812 phone. Every word of the consent wording and the accept/reject logic is
     unchanged; only the box around them is tightened - smaller padding, a smaller type
     size, a tighter gap, and the banner sits closer to the bar. */
  .consent-banner { inset-inline: 10px; inset-block-end: 78px; padding: 12px 14px; border-radius: 12px; }
  .consent-banner p { font-size: .76rem; line-height: 1.5; }
  .consent-banner > div { margin-block-start: 8px; gap: 6px; }
  .consent-banner .button-small { min-height: 40px; padding: 6px 14px; font-size: .78rem; }
  .not-found { grid-template-columns: 1fr; }
}

@media (max-width: 390px) {
  .button-row .button { width: 100%; }
  /* Below ~360px the sticky bar's second label wraps to a third line, which grows the
     bar and pushes it under the consent banner. Tightening the type keeps it two lines. */
  .mobile-actions a { padding: 8px 8px; font-size: .72rem; }
  /* Same reason for the banner: on a 320px screen the two consent buttons stacked, which
     added 49px to the first screen. Narrower buttons keep them on one row. */
  .consent-banner p { font-size: .72rem; }
  .consent-banner .button-small { padding: 6px 10px; font-size: .74rem; }
  .arch-frame { min-height: 390px; padding-inline: 26px; }
  .package-card { flex-basis: 88vw; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-grid > div { grid-column: auto !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .rv { opacity: 1; transform: none; }
  .trust-strip.marquee > div { animation: none !important; }
}

@media print {
  .site-header, .site-footer, .mobile-actions, .consent-banner, .final-cta, .breadcrumbs, .article-header .button { display: none !important; }
  body { background: white; color: black; font-size: 12pt; padding: 0; }
  body::before { display: none; }
  .article-header { padding: 1cm 0; }
  .article-body { padding: .5cm 0; }
  .article-body section { break-inside: avoid; }
  /* `body { color: black }` alone does not neutralise the page: every coloured rule sets
     `color` on its own element and therefore wins. Before 2026-09-20 a single guide printed
     27 elements in gold, brown and taupe — and the guides are the lead magnets, one of them
     the 90-day checklist, which is the page a bride is most likely to actually print.
     Redeclaring the tokens inside the print context recolours all of them at once, so this
     stays correct whatever the brand palette becomes. */
  :root {
    --forest: #000; --forest-2: #000; --taupe: #222;
    --gold: #000; --gold-deep: #000; --gold-soft: #666; --gold-hover: #000;
    --ivory: #fff; --paper: #fff; --sand: #fff; --sand-2: #fff;
    --line: #999; --success: #000;
  }
  .check-list li::before { color: #000; }
  a { color: #000 !important; text-decoration: underline; }
}