/* The Gulf Awards — website styles.
   Palette, type and logo use follow TGA Brand Guidelines v1.0 (September 2026):
   Gulf Navy #0A1A3F · Gulf Gold #C9A14A · Midnight #061029 · Light Gold #E9C97A · Deep Gold #8C6326 · Ivory #F8F3E8.
   Montserrat for everything, Great Vibes as a sparing accent, Tajawal for Arabic. */

:root {
  --navy: #0A1A3F; --midnight: #061029; --navy-2: #0F2350; --royal: #1C3B7A;
  --gold: #C9A14A; --gold-l: #E9C97A; --gold-d: #8C6326;
  --gold-grad: linear-gradient(100deg, #B98A3C, #F2D994 50%, #B98A3C);
  --ivory: #F8F3E8; --sand: #EFEADE; --line: #E3DCCB; --line-2: #CFC6B4;
  --ink: #39415A; --ink-2: #4A5470; --muted: #5F6883;
  --mist: #AEBAD3; --mist-2: #9BA7C3; --mist-3: #CBD5E8; --dim: #7C88A5;
  --wa: #25D366; --wa-d: #128C7E;
  --ease: cubic-bezier(.2, 0, 0, 1);
  --pad: clamp(16px, 4vw, 32px);
}

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; color: var(--ink); background: #fff; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
*, *::before, *::after { box-sizing: border-box; }
a { color: var(--navy); text-decoration: none; }
a:hover { color: var(--gold-d); }
h1, h2, h3, h4 { margin: 0; color: var(--navy); text-wrap: pretty; }
p { margin: 0; text-wrap: pretty; }
img { max-width: 100%; }
button { font-family: inherit; }
dl { margin: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -9999px; top: 0; padding: 12px 16px; background: var(--navy); color: #fff; z-index: 100; }
.skip:focus { left: 0; color: #fff; }
.wrap { max-width: 1260px; margin-inline: auto; padding-inline: var(--pad); }
.ar { font-family: "Tajawal", sans-serif; direction: rtl; }
.script { font-family: "Great Vibes", cursive; font-weight: 400; }
.gold-text { background: linear-gradient(100deg, #B98A3C 15%, #F2D994 45%, #B98A3C 80%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: #B98A3C; }
.center { text-align: center; }

/* ---------- type ---------- */
.eyebrow { display: flex; align-items: center; gap: 12px; font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-d); }
.eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--gold); flex: none; }
.dark .eyebrow { color: var(--gold-l); }
.eyebrow + h1, .eyebrow + h2 { margin-top: 16px; }
.kicker { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-d); }
.kicker a { color: inherit; }
.kicker.light, .dark .kicker { color: var(--gold-l); }
.h-xl { font-size: clamp(2.1rem, 1.3rem + 3vw, 3.9rem); line-height: 1.02; font-weight: 800; letter-spacing: -.038em; }
.h-lg { font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3.4rem); line-height: 1.05; font-weight: 800; letter-spacing: -.032em; }
.h-md { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.5rem); line-height: 1.08; font-weight: 800; letter-spacing: -.03em; }
.h-sm { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.9rem); line-height: 1.12; font-weight: 800; letter-spacing: -.028em; }
.h-cta { color: #fff; font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.7rem); line-height: 1.08; font-weight: 800; letter-spacing: -.03em; }
.lead { color: var(--ink-2); font-size: clamp(1rem, .95rem + .25vw, 1.1rem); line-height: 1.62; }
.dark .lead { color: var(--mist); }
.small { font-size: 13px; color: var(--muted); line-height: 1.55; }

/* ---------- buttons & links ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 54px; padding: 0 26px; border-radius: 2px; border: 1px solid transparent; font: inherit; font-size: 16px; font-weight: 700; line-height: 1; cursor: pointer; white-space: nowrap; transition: background 220ms, color 220ms, border-color 220ms; }
.btn-sm { height: 46px; padding: 0 22px; font-size: 14.5px; }
.btn-navy { background: var(--navy); color: #fff; }
.btn-navy:hover { background: var(--gold-d); color: #fff; }
.btn-gold { background: var(--gold-grad); color: var(--navy); font-weight: 800; }
.btn-gold:hover { background: #fff; color: var(--navy); }
.btn-line-dark { border-color: rgba(201, 161, 74, .55); color: #fff; background: transparent; }
.btn-line-dark:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.btn-line { border-color: var(--line-2); background: #fff; color: var(--navy); }
.btn-line:hover { border-color: var(--navy); color: var(--navy); }
.btn-icon { width: 46px; height: 46px; padding: 0; border-color: var(--line); background: #fff; color: var(--navy); }
.btn-icon:hover { border-color: var(--navy); color: var(--navy); }
.btn-wa { border-color: var(--wa); background: var(--wa); color: #fff; }
.btn-wa:hover { border-color: var(--wa-d); background: var(--wa-d); color: #fff; }
.btn[disabled] { opacity: .6; cursor: progress; }
.btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.link-u { font-weight: 700; color: var(--navy); border-bottom: 1px solid var(--gold); padding-bottom: 2px; display: inline-flex; align-items: center; gap: 8px; }
.link-u.light { color: var(--gold-l); border-color: rgba(201, 161, 74, .6); }
.quiet { font-weight: 600; color: var(--muted); }
.quiet:hover { color: var(--gold-d); }
.text-btn { border: 0; background: none; color: var(--muted); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; padding: 0; }

/* ---------- surfaces & layout ---------- */
.card { background: #fff; border: 1px solid var(--line); }
.top-gold { border-top: 2px solid var(--gold); }
.lift { transition: transform 300ms var(--ease), box-shadow 300ms; }
.lift:hover { transform: translateY(-6px); box-shadow: 0 28px 48px -34px rgba(10, 26, 63, .55); }
.band { background: var(--ivory); border-block: 1px solid var(--line); }
.dark { position: relative; background: var(--navy); color: var(--mist-3); overflow: hidden; }
.dark > .wrap { position: relative; }
.dark h1, .dark h2, .dark h3 { color: #fff; }
.glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(760px 380px at 86% 8%, rgba(201, 161, 74, .2), rgba(201, 161, 74, 0) 62%); }
.glow.tr { background: radial-gradient(800px 400px at 85% 0%, rgba(201, 161, 74, .18), rgba(201, 161, 74, 0) 65%); }
.glow.bl { background: radial-gradient(700px 380px at 12% 100%, rgba(201, 161, 74, .2), rgba(201, 161, 74, 0) 65%); }
.sec { padding-block: clamp(56px, 7vw, 112px); }
.sec-m { padding-block: clamp(44px, 6vw, 92px); }
.sec-b { padding-bottom: clamp(56px, 7vw, 112px); }
.split, .split-top, .split-end { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); gap: clamp(26px, 4vw, 60px); align-items: center; }
.split-top { align-items: start; }
.split-end { align-items: end; }
.sec-head { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-end; justify-content: space-between; }
.grid-cards { margin-top: clamp(26px, 3.4vw, 44px); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--min, 240px)), 1fr)); gap: var(--gap, 14px); }
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.framed { border: 1px solid rgba(201, 161, 74, .32); background: var(--navy-2); will-change: transform; }
.emblem { width: clamp(46px, 5vw, 64px); height: auto; display: block; margin-bottom: 20px; }

/* ---------- media & placeholders ---------- */
.media { position: relative; display: block; overflow: hidden; background: var(--sand); }
/* On navy sections the container must stay dark while an image loads. */
.media.framed, .dark .media { background: var(--navy-2); }
.media.sq { aspect-ratio: 1 / 1; }
.media.r43 { aspect-ratio: 4 / 3; }
.media.r34 { aspect-ratio: 3 / 4; }
.media.r1610 { aspect-ratio: 16 / 10; }
.media img.fill, .hero-img img.fill, .gal-slide img.fill { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ph { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 18px; text-align: center; font-size: 12px; font-weight: 600; line-height: 1.45; }
.ph img { width: min(60px, 24%); height: auto; opacity: .5; }
.ph span { max-width: 30ch; }
.ph-light { background: linear-gradient(140deg, #F8F3E8, #EFEADE); color: var(--gold-d); }
.ph-dark { background: linear-gradient(140deg, #0F2350, #0A1A3F); color: var(--gold-l); }
.ph-dark img { opacity: .85; }
.tag { position: absolute; left: 12px; top: 12px; z-index: 1; padding: 6px 11px; background: var(--navy); color: var(--gold-l); font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }

/* ---------- top bars & header ---------- */
.progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: linear-gradient(90deg, #E9C97A, #C9A14A); z-index: 90; pointer-events: none; }
.announce { background: var(--navy); color: #EDE4D3; font-size: 11.5px; font-weight: 700; letter-spacing: .02em; padding: 10px 20px; display: flex; gap: 10px; justify-content: center; align-items: center; text-align: center; }
.announce .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--gold); flex: none; }
.announce a { color: var(--gold-l); text-decoration: underline; text-underline-offset: 3px; }
.topbar { background: var(--midnight); color: var(--mist-2); font-size: 12.5px; }
.topbar .wrap { height: 40px; display: flex; align-items: center; gap: 22px; }
.topbar a, .tb-item { display: inline-flex; align-items: center; gap: 8px; color: var(--mist-3); }
.topbar a:hover { color: var(--gold-l); }
.tb-item { color: var(--mist-2); }
.tb-gold { margin-inline-start: auto; color: var(--gold-l); }
.site-header { position: sticky; top: 0; z-index: 60; background: rgba(255, 255, 255, .94); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border-bottom: 1px solid var(--line); }
.site-header .bar { height: clamp(66px, 7.4vw, 88px); display: flex; align-items: center; gap: clamp(14px, 2.2vw, 30px); transition: height 300ms var(--ease); }
@media (min-width: 1200px) { .site-header .bar { height: 112px; } }
.site-header[data-scrolled="true"] .bar { height: 74px; }
.logo { display: flex; align-items: center; flex: none; }
/* Guidelines: the tagline lockup needs 270px of width to stay readable, the plain
   one 150px. So the tagline version shows only where there is room for it, and the
   header gives it the height it needs. */
.logo img { display: block; height: auto; }
.logo .logo-full { width: clamp(272px, 22vw, 310px); max-height: 96px; }
.logo .logo-compact { display: none; width: clamp(168px, 19vw, 208px); max-height: 60px; }
.site-header[data-scrolled="true"] .logo .logo-full,
.no-tagline-logo .logo .logo-full { display: none; }
.site-header[data-scrolled="true"] .logo .logo-compact { display: block; max-height: 54px; }
@media (max-width: 1199px) {
  .logo .logo-full { display: none; }
  .logo .logo-compact { display: block; width: clamp(158px, 19vw, 208px); max-height: 56px; }
}
.nav { display: flex; align-items: stretch; align-self: stretch; gap: clamp(10px, 1.4vw, 24px); margin-inline-start: auto; font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.nav-item { display: flex; }
.nav > a, .mega-btn { position: relative; display: inline-flex; align-items: center; gap: 7px; padding: 0 2px; color: var(--muted); border: 0; background: none; font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.nav > a:hover, .mega-btn:hover, .nav [aria-current="page"], .mega-btn[aria-expanded="true"], .mega-btn[data-current] { color: var(--navy); }
.nav [aria-current="page"]::after, .mega-btn[data-current]::after { content: ""; position: absolute; left: 0; right: 0; top: calc(50% + 13px); height: 1px; background: var(--gold); }
.mega-btn svg { transition: transform 220ms var(--ease); }
.mega-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.mega { position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-block: 1px solid var(--line); box-shadow: 0 30px 60px -40px rgba(10, 26, 63, .5); white-space: normal; }
/* Fixed five columns, not auto-fit: the CTA spans the rest of its row (span set per page in
   layout.php, since it depends on how many categories are published) and a span only lands
   where it should against a known column count. The panel never renders below 1080px. */
.mega .wrap { padding-block: clamp(22px, 2.6vw, 34px); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 32px); }
.mega ul { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
.mega li a { font-size: 14px; font-weight: 600; color: var(--ink); }
.mega li a:hover { color: var(--gold-d); }
.mega li a.more { color: var(--gold-d); font-size: 13px; }
.mega-cta { grid-column: span var(--mega-cta-span, 1); padding: 20px clamp(20px, 2vw, 26px); background: var(--navy); border-top: 2px solid var(--gold); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 32px; }
.mega-cta .txt { flex: 1 1 190px; min-width: 0; }
.mega-cta .t { color: #fff; font-size: 15px; font-weight: 700; line-height: 1.35; }
.mega-cta p + p { margin-top: 10px; max-width: 54ch; color: var(--mist); font-size: 13.5px; line-height: 1.6; }
/* Beside the text once the card is wide enough for both, on its own line below when it is not.
   Left shrinkable on purpose: in a single column it has to wrap rather than push out its arrow. */
.mega-cta .link-u { font-size: 13.5px; }
.header-actions { display: flex; align-items: center; gap: 10px; flex: none; }
.menu-btn { margin-inline-start: auto; width: 44px; height: 44px; flex: none; display: none; align-items: center; justify-content: center; border-radius: 2px; background: #fff; border: 1px solid var(--line); color: var(--navy); cursor: pointer; }
.mobile-nav { padding: 8px var(--pad) 20px; border-top: 1px solid var(--line); display: grid; gap: 2px; font-weight: 600; background: #fff; max-height: 75vh; overflow-y: auto; }
.mobile-nav a { padding: 14px 4px; border-bottom: 1px solid var(--sand); color: var(--navy); }
.mobile-nav a.sub { padding-left: 18px; font-weight: 500; color: var(--ink-2); }
.mobile-cta { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .95); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border-top: 1px solid var(--line); gap: 10px; }
.mobile-cta .btn-navy { flex: 1; height: 52px; }
.mobile-cta .btn-icon { width: 52px; height: 52px; }

/* ---------- language switcher (lib/i18n.php) ----------
   A labelled button in the header on a computer; on a phone, where the header keeps only the
   menu, a compact «ع» / EN beside it and a row inside the menu. Each link goes to this page
   in the other language, and site.js remembers the choice. */
.btn-lang { height: 46px; padding: 0 14px; border-color: var(--line); background: #fff; color: var(--navy); font-size: 14.5px; }
.btn-lang:hover { border-color: var(--navy); color: var(--navy); }
.btn-lang[lang="ar"], .lang-mini[lang="ar"], .lang-row[lang="ar"], .f-lang[lang="ar"] { font-family: "Tajawal", sans-serif; font-size: 16px; font-weight: 700; }
.lang-mini { display: none; margin-inline-start: auto; width: 44px; height: 44px; flex: none; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 2px; background: #fff; color: var(--navy); font-size: 13px; font-weight: 800; }
.lang-mini + .menu-btn { margin-inline-start: 8px; }
/* The phone's language button: a globe and the language's own word (عربي / EN), so it reads as a
   language switch at a glance rather than a lone letter. */
.lang-mini { width: auto; min-width: 44px; gap: 7px; padding-inline: 12px; }
.lang-mini svg { flex: none; color: var(--gold-d); }
.mobile-nav a.lang-row { display: flex; align-items: center; gap: 10px; color: var(--gold-d); }
.lang-offer { position: relative; z-index: 60; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 14px; padding: 10px 48px; background: var(--ivory); border-bottom: 1px solid var(--line); font-family: "Tajawal", sans-serif; font-size: 15px; line-height: 1.5; color: var(--navy); }
.lang-offer a { font-weight: 700; color: var(--gold-d); text-decoration: underline; text-underline-offset: 4px; }
.lang-offer button { position: absolute; inset-inline-end: 8px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border: 0; background: none; font-size: 24px; line-height: 1; color: var(--muted); cursor: pointer; }
@media (max-width: 1080px) {
  .nav, .header-actions, .topbar, .desk-only { display: none !important; }
  .menu-btn { display: flex; }
  .lang-mini { display: inline-flex; }
  .mobile-cta { display: flex; }
  body { padding-bottom: 78px; }
}

/* ---------- cookie bar (partials/consent.php) ----------
   A card at the bottom left on a desktop; on a phone a full-width bar sitting on top of
   .mobile-cta (73px tall), with the page padded by its height (--consent-h, from site.js)
   so it never hides the end of the footer. */
.consent { position: fixed; left: clamp(12px, 2vw, 24px); bottom: clamp(12px, 2vw, 24px); z-index: 80; width: min(430px, calc(100vw - 24px)); padding: 20px 22px; background: var(--navy); color: var(--mist-3); border: 1px solid rgba(201, 161, 74, .4); border-top: 2px solid var(--gold); box-shadow: 0 30px 60px -30px rgba(6, 16, 41, .75); font-size: 14px; line-height: 1.55; }
.consent p { margin: 0; }
.consent a { color: var(--gold-l); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.consent-acts { display: flex; gap: 10px; margin-top: 16px; }
.consent-acts .btn { flex: 1; }
@media (max-width: 1080px) {
  .consent { left: 0; right: 0; bottom: calc(73px + env(safe-area-inset-bottom)); width: auto; padding: 16px; border-inline: 0; border-bottom: 0; box-shadow: 0 -18px 40px -24px rgba(6, 16, 41, .55); }
  body.consent-open { padding-bottom: calc(78px + var(--consent-h, 0px)); }
}

/* ---------- breadcrumbs & page heroes ---------- */
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--mist-2); }
.crumbs a { color: var(--mist-2); }
.crumbs a:hover { color: var(--gold-l); }
.crumbs [aria-current] { color: var(--gold-l); }
.crumbs.light ol { font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--gold-d); }
.crumbs.light a { color: var(--gold-d); }
.crumbs.light [aria-current] { color: var(--navy); font-weight: 600; }
.page-hero > .wrap { padding-top: clamp(20px, 3vw, 30px); padding-bottom: clamp(40px, 5.5vw, 80px); }
.hero-grid { margin-top: clamp(26px, 3.6vw, 46px); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); gap: clamp(24px, 4vw, 56px); align-items: end; }
.hero-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); border-top: 1px solid rgba(201, 161, 74, .4); }
.hero-stats > div { padding: 16px 18px 16px 0; }
.hero-stats dt { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-l); }
.hero-stats dd { margin: 8px 0 0; color: #fff; font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; }
.hero-btns { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.hero-photo { position: relative; padding: 10px; border: 1px solid rgba(201, 161, 74, .4); }
.hero-photo .media { background: var(--navy-2); }

/* ---------- accordions ---------- */
.acc { border-top: 1px solid var(--line); }
.acc details { border-bottom: 1px solid var(--line); padding: 20px 4px; }
.acc summary { list-style: none; cursor: pointer; display: flex; gap: 14px; align-items: center; justify-content: space-between; font-size: 1rem; font-weight: 700; color: var(--navy); }
.acc summary::-webkit-details-marker { display: none; }
.acc .chev { flex: none; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; color: var(--gold-d); transition: transform 200ms var(--ease); }
.acc details[open] .chev { transform: rotate(45deg); }
.acc details p { margin-top: 14px; max-width: 70ch; color: var(--ink-2); font-size: 14.5px; line-height: 1.65; }

/* ---------- forms ---------- */
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 14px; }
/* A form with a phone field goes two across: three columns leave the country code and a
   full number too little room, and the fields then pair up evenly in both brief forms. */
.form-grid.has-tel { grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); }
.full { grid-column: 1 / -1; }
.field { display: grid; gap: 7px; min-width: 0; align-content: start; }
.field label { font-size: 13px; font-weight: 700; color: #fff; }
.field label .opt { color: var(--mist-2); font-weight: 500; }
.inp { width: 100%; min-width: 0; height: 48px; padding: 0 14px; border-radius: 2px; border: 1px solid rgba(201, 161, 74, .45); background: #fff; font: inherit; font-size: 15px; color: var(--ink); }
textarea.inp { height: auto; padding: 13px 14px; resize: vertical; line-height: 1.5; }
select.inp { padding: 0 12px; }
.inp:focus { outline: 2px solid var(--gold-l); outline-offset: 1px; }
.form-light .field label { color: var(--navy); }
.form-light .field label .opt { color: var(--muted); }
.form-light .inp { border-color: var(--line-2); }
.form-light .inp:focus { border-color: var(--navy); outline: 2px solid rgba(201, 161, 74, .45); }
.panel-dark { padding: clamp(22px, 2.6vw, 32px); background: rgba(255, 255, 255, .07); border: 1px solid rgba(201, 161, 74, .4); border-top: 2px solid var(--gold); }
.brief-panel { padding: clamp(24px, 2.8vw, 36px); background: var(--navy); border-top: 2px solid var(--gold); }
.form-foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 2px; }
.form-foot p { margin: 0; color: var(--mist-2); font-size: 13px; line-height: 1.45; max-width: 26ch; }
.form-light .form-foot p { color: var(--muted); max-width: 32ch; }
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.notice { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; font-size: 14.5px; line-height: 1.5; }
.notice p { margin: 0; }
.notice-ok { background: #EEF6F0; border: 1px solid rgba(27, 122, 75, .3); color: var(--ink); }
.notice-ok svg { color: #1B7A4B; flex: none; margin-top: 1px; }
.notice-err { background: #FBECEA; border: 1px solid rgba(179, 38, 30, .3); color: #7A1B14; }
/* ---------- reference images (partials/refs.php) ----------
   A dashed drop zone with the real file input stretched over it, so a click or a drop lands
   on the input itself. Dark by default, like the rest of the form; .form-light flips it. */
.refs-drop { position: relative; display: flex; align-items: center; gap: 13px; min-height: 64px; padding: 12px 14px; border: 1px dashed rgba(201, 161, 74, .6); border-radius: 2px; background: rgba(255, 255, 255, .04); color: var(--mist-3); transition: border-color 200ms, background 200ms; }
.refs-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.refs-input:disabled { cursor: not-allowed; }
.refs-drop .ic { flex: none; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 2px; background: rgba(201, 161, 74, .14); color: var(--gold-l); }
.refs-drop .tx { flex: 1; min-width: 0; display: grid; gap: 2px; }
.refs-drop b { color: #fff; font-size: 14px; font-weight: 700; line-height: 1.3; }
.refs-drop i { color: var(--mist-2); font-size: 12.5px; font-style: normal; }
.refs-drop .pick { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 13px; border: 1px solid rgba(201, 161, 74, .6); color: var(--gold-l); font-size: 13px; font-weight: 700; }
.refs-drop:hover, .refs-over .refs-drop { border-color: var(--gold); background: rgba(201, 161, 74, .1); }
.refs-drop:has(.refs-input:focus-visible) { outline: 2px solid var(--gold-l); outline-offset: 2px; }
.refs-full .refs-drop { opacity: .55; }
.refs-busy .refs-drop .ic { animation: refs-pulse 900ms var(--ease) infinite alternate; }
@keyframes refs-pulse { to { opacity: .35; } }
.refs-list { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 8px; }
.refs-list li { position: relative; aspect-ratio: 1; overflow: hidden; border: 1px solid rgba(201, 161, 74, .4); background: rgba(255, 255, 255, .06); }
.refs-list img { width: 100%; height: 100%; object-fit: cover; display: block; }
.refs-x { position: absolute; top: 4px; right: 4px; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: rgba(6, 16, 41, .78); color: #fff; cursor: pointer; }
.refs-x:hover { background: #B3261E; }
.refs-note { display: flex; gap: 7px; align-items: flex-start; color: var(--mist-2); font-size: 12.5px; line-height: 1.45; }
.refs-note svg { flex: none; margin-top: 2px; color: var(--gold-l); }
.refs-err .refs-note { color: #FFB4AB; }
.form-light .refs-drop { border-color: var(--line-2); background: var(--ivory); color: var(--ink); }
.form-light .refs-drop .ic { background: #fff; color: var(--gold-d); border: 1px solid var(--line); }
.form-light .refs-drop b { color: var(--navy); }
.form-light .refs-drop i { color: var(--muted); }
.form-light .refs-drop .pick { border-color: var(--navy); color: var(--navy); background: #fff; }
.form-light .refs-drop:hover, .form-light .refs-over .refs-drop { border-color: var(--gold-d); background: #F3EAD6; }
.form-light .refs-drop:has(.refs-input:focus-visible) { outline-color: rgba(201, 161, 74, .7); }
.form-light .refs-list li { border-color: var(--line); background: var(--ivory); }
.form-light .refs-note { color: var(--muted); }
.form-light .refs-note svg { color: var(--gold-d); }
.form-light .refs-err .refs-note { color: #B3261E; }
@media (max-width: 420px) { .refs-drop .pick { display: none; } }
.form-track { grid-column: 1 / -1; margin: 0; padding-top: 14px; border-top: 1px solid rgba(201, 161, 74, .25); color: var(--mist-2); font-size: 13px; }
.form-track a { display: inline-flex; align-items: center; gap: 5px; color: var(--gold-l); font-weight: 700; }
.form-light .form-track { border-top-color: var(--line); color: var(--muted); }
.form-light .form-track a { color: var(--gold-d); }
.notice a { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

.attached { padding: 13px 15px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(201, 161, 74, .3); }
.attached p + p { margin-top: 8px; color: #fff; font-size: 14px; font-weight: 600; line-height: 1.5; }
.pick { margin: 0; padding: 0; border: 0; min-width: 0; }
.pick legend { padding: 0; color: #fff; font-size: 13px; font-weight: 700; margin-bottom: 12px; }
.pick .chips { gap: 8px; }
.call-line { margin-top: 20px; color: var(--mist-2); font-size: 14px; }
.call-line a { color: var(--gold-l); border-bottom: 1px solid rgba(201, 161, 74, .5); }

/* ---------- chips ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { padding: 12px 18px; border-radius: 2px; border: 1px solid var(--line-2); background: #fff; color: var(--ink-2); font: inherit; font-size: 14.5px; font-weight: 600; cursor: pointer; transition: background 160ms, color 160ms, border-color 160ms; }
.chip:hover { border-color: var(--navy); }
.chip[aria-pressed="true"], .chip[aria-selected="true"], .chip[aria-current="true"] { border-color: var(--navy); background: var(--navy); color: #fff; font-weight: 700; }
/* Catalogue filters are links (so they work without JavaScript); they look like the buttons. */
a.chip { display: inline-block; text-decoration: none; }
a.chip:hover { color: var(--navy); }
a.chip[aria-current="true"]:hover { color: #fff; }
a.chip-active:hover { color: #fff; }
.chip.sm { padding: 9px 14px; font-size: 13px; }
.chip.md { padding: 10px 16px; font-size: 13.5px; }
.chip-dark { padding: 10px 15px; border-radius: 2px; border: 1px solid rgba(201, 161, 74, .35); background: transparent; color: var(--mist); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.chip-dark[aria-pressed="true"] { border-color: var(--gold); background: rgba(201, 161, 74, .18); color: #fff; font-weight: 700; }
.chip-active { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 2px; border: 1px solid var(--navy); background: var(--navy); color: #fff; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }

/* ---------- motion ---------- */
@keyframes agFade { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes agRise { from { opacity: 0; transform: translateY(110%); } to { opacity: 1; transform: none; } }
@keyframes agMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes agMarqueeRev { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@keyframes agFloat { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-12px) rotate(-1deg); } }
@keyframes agFloat2 { 0%, 100% { transform: translateY(0) rotate(3deg); } 50% { transform: translateY(-9px) rotate(2deg); } }
.fade { animation: agFade .85s var(--ease) both; }
.d1 { animation-delay: .08s; } .d2 { animation-delay: .16s; } .d3 { animation-delay: .24s; } .d4 { animation-delay: .32s; } .d5 { animation-delay: .5s; } .d6 { animation-delay: .65s; }
.js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 700ms var(--ease), transform 700ms var(--ease), box-shadow 300ms; }
.js [data-reveal="in"] { opacity: 1; transform: none; }
.js .lift[data-reveal="in"]:hover { transform: translateY(-6px); }
[data-snap] { scroll-snap-type: x mandatory; scrollbar-width: none; }
[data-snap]::-webkit-scrollbar { display: none; }
[data-snap] > * { scroll-snap-align: start; }
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.marquee-track { display: flex; gap: 12px; width: max-content; animation: agMarquee var(--dur, 40s) linear infinite; }
.marquee-track + .marquee-track { margin-top: 10px; }
.marquee-track.rev { animation-name: agMarqueeRev; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 12px; }
.pill { flex: none; padding: 13px 20px; background: #fff; border: 1px solid var(--line); font-size: 15px; font-weight: 600; color: var(--navy); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}

/* ---------- home: hero ---------- */
.hero > .wrap { padding-top: clamp(40px, 6vw, 88px); }
.eyebrow-long { font-size: 12px; letter-spacing: .14em; }
.eyebrow-long::before { width: clamp(24px, 4vw, 48px); }
.hero-title { margin-top: clamp(16px, 2vw, 26px); font-size: clamp(2.6rem, 1.2rem + 5.8vw, 6rem); line-height: .96; font-weight: 800; letter-spacing: -.042em; }
.hero-title .line { display: block; overflow: hidden; padding-bottom: .14em; margin-bottom: -.08em; transition: transform 600ms var(--ease); will-change: transform; }
.hero-title .line.open { overflow: visible; }
.hero-title [data-gleam] { -webkit-background-clip: text; background-clip: text; background-repeat: no-repeat; }
.rise { display: block; animation: agRise .9s var(--ease) both; animation-delay: .05s; }
.r2 { animation-delay: .18s; }
.r3 { display: block; animation-delay: .31s; }
.hero-title .script { font-size: 1.18em; line-height: .9; letter-spacing: 0; }
.hero-row { margin-top: clamp(26px, 3.4vw, 44px); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: clamp(24px, 3vw, 44px); align-items: end; }
.hero-row .lead { max-width: 48ch; font-size: clamp(1.02rem, .95rem + .3vw, 1.2rem); }
.brief { display: flex; flex-wrap: wrap; gap: 10px; padding: 9px; background: #fff; border: 1px solid var(--line); box-shadow: 0 18px 40px -34px rgba(10, 26, 63, .6); }
.brief:focus-within { border-color: var(--gold); }
.brief-field { flex: 1 1 180px; min-width: 0; display: flex; align-items: center; padding-inline-start: 12px; }
.brief-field input { width: 100%; min-width: 0; height: 46px; border: 0; outline: none; background: none; font: inherit; font-size: 15px; color: var(--ink); }
.brief .btn-gold:hover { background: var(--navy); color: #fff; }
.hero-visual { position: relative; margin-top: clamp(28px, 3.4vw, 48px); }
.hero-media { min-height: clamp(300px, 46vw, 600px); }
.hero-img { position: absolute; inset: -8% 0; will-change: transform; }
.frame { position: absolute; inset: 0; border: 1px solid rgba(201, 161, 74, .5); pointer-events: none; }
.float { position: absolute; margin: 0; padding: 10px; background: #fff; border: 1px solid var(--line); box-shadow: 0 30px 60px -30px rgba(10, 26, 63, .5); z-index: 2; }
.float-1 { left: -18px; bottom: -28px; width: clamp(180px, 20vw, 248px); animation: agFloat 8s ease-in-out infinite; }
.float-2 { right: -18px; top: -28px; width: clamp(160px, 18vw, 228px); animation: agFloat2 9s ease-in-out infinite; }
.float figcaption { padding: 10px 6px 4px; display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--navy); }
.float figcaption.kicker { font-size: 11px; color: var(--gold-d); }
.float .dot { width: 7px; height: 7px; border-radius: 999px; background: var(--gold); }
.float .ph span { font-size: 11px; }
.usps { list-style: none; margin: clamp(34px, 4vw, 58px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); border-top: 1px solid var(--line); }
.usps li { padding: 18px 18px 18px 0; border-bottom: 1px solid var(--line); }
.usps .n { display: block; font-size: 11px; font-weight: 700; letter-spacing: .1em; color: var(--gold-d); }
.usps .t { display: block; margin-top: 8px; font-size: 15px; font-weight: 700; color: var(--navy); }
@media (max-width: 1080px) { .float { display: none; } }

/* ---------- home: the four-step flow ----------
   Numbered cards, shared by the storefront home page below. */
.mk-flow { list-style: none; margin: clamp(24px, 3vw, 38px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 0; border: 1px solid var(--line); }
/* Three steps must not fall to 2 + 1 — an orphan step reads as a missing one. */
@media (min-width: 861px) { .mk-flow.three { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.mk-step { padding: clamp(22px, 2.6vw, 32px); border-top: 2px solid transparent; transition: background 240ms, border-color 240ms; }
.mk-step + .mk-step { border-inline-start: 1px solid var(--line); }
.mk-step:hover { background: var(--ivory); border-top-color: var(--gold); }
.mk-step .n { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--line-2); color: var(--gold-d); font-size: 13px; font-weight: 800; letter-spacing: .04em; }
.mk-step h3 { margin-top: 16px; font-size: 1.05rem; font-weight: 700; line-height: 1.3; }
.mk-step p { margin-top: 10px; color: var(--ink-2); font-size: 13.5px; line-height: 1.6; }
.mk-ticks { list-style: none; margin: clamp(20px, 2.4vw, 28px) 0 0; padding: 0; display: grid; gap: 11px; }
.mk-ticks li { display: flex; gap: 11px; align-items: flex-start; color: var(--navy); font-size: 14.5px; font-weight: 600; line-height: 1.45; }
.mk-ticks svg { flex: none; margin-top: 1px; color: var(--gold-d); }
.mk-step + .mk-step { border-inline-start: 1px solid var(--line); }
@media (max-width: 620px) { .mk-step + .mk-step { border-inline-start: 0; border-top: 1px solid var(--line); } }

/* ---------- home: storefront marketplace ----------
   Shopper density borrowed from the regional marketplaces, on the brand's own palette.
   Tiles carry a softer radius than the rest of the site (--r) because a storefront grid
   reads as merchandise, not as stationery; buttons and panels stay on the brand's 2px. */
/* Sits between the reasons bar and "Shop by category", so it takes the reasons cards' 14px
   rhythm and their 10px corners rather than running full-bleed like a header strip. */
.mkt-nav { --r: 10px; margin-top: 14px; }
/* The department index. Equal cells on a hairline grid: the 1px gap shows the container's
   line colour between cells and nowhere else, so the dividers need no :nth-child arithmetic
   and survive any count. Column counts and the filler span arrive as custom properties
   from home.php; the layout never scrolls and never wraps unevenly. */
.mkt-depts { --cols: var(--cols-m); --fill: var(--fill-m); --all: var(--all-m); display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 1px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r); background: var(--line); }
.mkt-depts a { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 3px; min-height: 48px; padding: 10px 14px; background: #fff; color: var(--ink-2); transition: background 220ms var(--ease), color 220ms var(--ease); }
/* A gold rule drawn in from the left on hover: the same gesture as the header's current-page
   underline, turned into the top edge of a cell. */
.mkt-depts a::before { content: ""; position: absolute; inset: 0 0 auto; height: 2px; background: var(--gold-grad); transform: scaleX(0); transform-origin: left; transition: transform 320ms var(--ease); }
.mkt-depts a:hover { background: var(--ivory); color: var(--navy); }
.mkt-depts a:hover::before, .mkt-depts a:focus-visible::before { transform: scaleX(1); }
.mkt-depts a:focus-visible { outline-offset: -2px; }
.mkt-depts .n { display: none; color: var(--gold-d); font-size: 10.5px; font-weight: 700; letter-spacing: .14em; font-variant-numeric: tabular-nums; }
.mkt-depts .t { font-size: 13px; font-weight: 700; line-height: 1.3; text-wrap: balance; }
/* The filler. home.php sets --all-* to none wherever the count divides evenly; otherwise it
   takes the rest of the short row, dressed in navy so it reads as a way out, not a gap. */
.mkt-depts .all { display: var(--all); grid-column: span var(--fill); flex-direction: row; align-items: center; justify-content: center; gap: 8px; background: var(--navy); color: var(--gold-l); }
.mkt-depts .all:hover { background: var(--gold-d); color: #fff; }
.mkt-depts .all::before { display: none; }
@media (min-width: 561px) {
  .mkt-depts { --cols: var(--cols-t); --fill: var(--fill-t); --all: var(--all-t); }
  .mkt-depts a { justify-content: flex-start; padding: 14px 16px 13px; }
  .mkt-depts .n { display: block; }
}
/* One row from here, where the header also settles. Any narrower and an eight-way split
   pushes "Wood & marble plaques" onto a third line. */
@media (min-width: 1200px) {
  .mkt-depts { --cols: var(--cols-d); --fill: var(--fill-d); --all: var(--all-d); }
  .mkt-depts a { padding: 14px 14px 13px; }
}

.mkt-band { background: linear-gradient(90deg, var(--ivory), #fff 45%, var(--ivory)); border-bottom: 1px solid var(--line); }
.mkt-band .wrap { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; justify-content: center; padding-block: 11px; text-align: center; }
.mkt-band .en { color: var(--navy); font-size: 13.5px; font-weight: 700; letter-spacing: .01em; }
.mkt-band .ar { color: var(--gold-d); font-size: 13.5px; font-weight: 500; }

.mkt-banners { --r: 12px; margin-top: 14px; display: grid; grid-template-columns: minmax(0, 2.15fr) minmax(0, 1fr); gap: 14px; }
.mkt-hero { --gleam-end: #FFFFFF; position: relative; z-index: 3; isolation: isolate; border-radius: var(--r); background: var(--navy); min-height: clamp(330px, 34vw, 430px); display: flex; }
/* The rounded clip lives on the background layer, not the hero: the search suggestions
   drop below the hero's edge and over the reasons bar, and z-index 3 keeps them on top. */
.mkt-hero-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; border-radius: inherit; }
.mkt-hero-bg img, .mkt-hero-clip { width: 100%; height: 100%; object-fit: cover; display: block; }
.mkt-hero-bg .veil { position: absolute; inset: 0; background:
    linear-gradient(105deg, rgba(6, 16, 41, .96) 0%, rgba(6, 16, 41, .88) 46%, rgba(10, 26, 63, .62) 100%),
    radial-gradient(760px 420px at 88% 4%, rgba(201, 161, 74, .26), rgba(201, 161, 74, 0) 64%); }
.mkt-hero-in { padding: clamp(24px, 3vw, 44px); align-self: center; width: min(100%, 680px); }
.mkt-h1 { color: #fff; font-size: clamp(1.8rem, 1.1rem + 2.6vw, 3rem); line-height: 1.06; font-weight: 800; letter-spacing: -.035em; }
.mkt-h1 .script { font-size: 1.16em; line-height: .9; letter-spacing: 0; }
.mkt-hero-sub { margin-top: 13px; max-width: 52ch; color: var(--mist); font-size: 14.5px; line-height: 1.6; }

.mkt-search { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 6px; padding: 6px; border-radius: 6px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(201, 161, 74, .45); }
.mkt-search:focus-within { border-color: var(--gold-l); }
.mkt-search .sel { position: relative; flex: 0 1 172px; min-width: 0; }
.mkt-search .sel select { -webkit-appearance: none; appearance: none; width: 100%; height: 46px; padding: 0 32px 0 13px; border: 0; border-inline-end: 1px solid rgba(201, 161, 74, .32); border-radius: 0; background: none; font: inherit; font-size: 14px; font-weight: 600; color: #fff; cursor: pointer; outline: none; }
.mkt-search .sel select option { color: var(--ink); background: #fff; }
.mkt-search .sel .ic { position: absolute; top: 50%; inset-inline-end: 12px; transform: translateY(-50%); display: flex; color: var(--gold-l); pointer-events: none; }
.mkt-search .q { flex: 1 1 210px; min-width: 0; display: flex; align-items: center; gap: 9px; padding-inline-start: 11px; }
.mkt-search .q .ic { display: flex; flex: none; color: var(--gold-l); }
.mkt-search .q input { flex: 1; min-width: 0; height: 46px; border: 0; background: none; font: inherit; font-size: 14.5px; color: #fff; outline: none; }
.mkt-search .q input::placeholder { color: var(--mist-2); opacity: 1; }
.mkt-search .btn { flex: 0 0 auto; height: 46px; border-radius: 4px; }
.mkt-search .btn-gold:hover { background: #fff; color: var(--navy); }
.mkt-hero-meta { margin-top: 13px; color: var(--mist-2); font-size: 12.5px; font-weight: 600; }

.mkt-side { display: grid; grid-template-rows: 1fr 1fr; gap: 14px; }
.mkt-door { position: relative; display: block; overflow: hidden; border-radius: var(--r); background: var(--sand); min-height: 150px; }
.mkt-door.solo { grid-row: span 2; }
.mkt-door .pic { position: absolute; inset: 0; display: block; }
.mkt-door .pic img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease); }
.mkt-door:hover .pic img { transform: scale(1.06); }
.mkt-door::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 26, 63, 0) 40%, rgba(10, 26, 63, .5)); }
.mkt-door .lab { position: absolute; left: 14px; bottom: 14px; z-index: 1; padding: 9px 16px; border-radius: 4px; background: #fff; color: var(--navy); font-size: 13.5px; font-weight: 700; box-shadow: 0 6px 18px -8px rgba(10, 26, 63, .5); }
.mkt-door:hover .lab { background: var(--navy); color: #fff; }

.mkt-rail-sec { --r: 12px; padding-block: clamp(26px, 3.4vw, 42px); }
.mkt-rail-head { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
.mkt-rail-head h2, .mkt-rail-head .mkt-rail-title { font-size: clamp(1.15rem, 1rem + .6vw, 1.5rem); font-weight: 800; letter-spacing: -.02em; }
.mkt-rail-head .mkt-rail-title { color: var(--navy); line-height: 1.2; }
.mkt-rail { margin-top: 16px; display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; }
.mkt-rail::-webkit-scrollbar { display: none; }
.mkt-tile { flex: none; width: clamp(132px, 15vw, 166px); scroll-snap-align: start; text-align: center; }
.mkt-tile .pic { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; border-radius: var(--r); background: var(--ivory); border: 1px solid var(--line); transition: border-color 220ms, transform 300ms var(--ease), box-shadow 300ms; }
.mkt-tile .pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mkt-tile:hover .pic { border-color: var(--gold); transform: translateY(-5px); box-shadow: 0 20px 34px -24px rgba(10, 26, 63, .55); }
.mkt-tile .nm { display: block; margin-top: 11px; min-height: 2.6em; color: var(--navy); font-size: 13.5px; font-weight: 700; line-height: 1.3; }
.mkt-tile .ct { display: block; margin-top: 4px; color: var(--muted); font-size: 12px; }

/* ---------- "Awards for": occasion circles ----------
   Each occasion's photo in a gold ring, its name underneath. The home page's rail (.mkt-occ),
   the strip above an occasion's pieces (.occ-band) and the cards on /awards-for (.occ-card)
   share the ring. The rail lifts a circle by 4px on hover, so it keeps 6px above them: a
   scroller clips anything that leaves it. */
.occ-rail { display: flex; gap: 14px; margin-top: 12px; padding-block: 6px 4px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.occ-rail::-webkit-scrollbar { display: none; }
.occ { flex: none; width: 112px; scroll-snap-align: start; display: flex; flex-direction: column; align-items: center; text-align: center; color: var(--navy); }
.occ-ring { position: relative; display: block; width: 100%; max-width: 104px; aspect-ratio: 1 / 1; flex: none; border-radius: 50%; padding: 3px; background: conic-gradient(from 200deg, #8C6326, #C9A14A 18%, #F2D994 34%, #C9A14A 52%, #8C6326 70%, #E9C97A 86%, #8C6326); transition: transform 300ms var(--ease), box-shadow 300ms; }
.occ-ring .pic { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; border-radius: 50%; border: 3px solid #fff; background: var(--ivory); }
.occ-ring .pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.14); transition: transform 600ms var(--ease); }
.occ-ring .pic .ph { padding: 0; gap: 0; }
.occ-ring .pic .ph img { position: static; width: 36%; height: auto; transform: none; }
.occ-ring .pic .ph span { display: none; }
.occ .nm { display: block; margin-top: 9px; font-size: 13px; font-weight: 700; line-height: 1.3; text-wrap: balance; }
.occ:hover { color: var(--gold-d); }
.occ:hover .occ-ring { transform: translateY(-4px); box-shadow: 0 16px 26px -18px rgba(10, 26, 63, .6); }
.occ:hover .occ-ring .pic img, .occ-card:hover .occ-ring .pic img { transform: scale(1.22); }
.occ:focus-visible, .occ-card:focus-visible { outline: none; }
.occ:focus-visible .occ-ring, .occ-card:focus-visible .occ-ring { outline: 2px solid var(--navy); outline-offset: 3px; }
/* In a rail the circle can sit flush with the scroller's edge, which would clip a ring drawn outside it. */
.occ:focus-visible .occ-ring { outline-offset: -3px; }
/* The occasion being shown, in the strip above its pieces. */
.occ[aria-current="page"] .occ-ring { background: var(--navy); }
.occ[aria-current="page"] .nm { color: var(--gold-d); }
.occ-band { padding-top: clamp(18px, 2.4vw, 28px); }
.occ-band .mkt-rail-head h2 { font-size: clamp(1.05rem, .95rem + .45vw, 1.3rem); font-weight: 800; letter-spacing: -.02em; }
.occ-band .occ-rail { margin-top: 10px; padding-block: 6px clamp(14px, 2vw, 22px); }
.occ-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 14px; }
.occ-grid > li { display: flex; }
.occ-card { flex: 1; display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 18px; align-items: start; padding: 20px; border: 1px solid var(--line); border-radius: 12px; background: #fff; color: var(--ink); transition: border-color 220ms, transform 300ms var(--ease), box-shadow 300ms; }
.occ-card:hover { color: var(--ink); border-color: var(--gold); transform: translateY(-3px); box-shadow: 0 20px 34px -26px rgba(10, 26, 63, .5); }
.occ-card .occ-ring { max-width: none; }
.occ-card .tx { display: block; min-width: 0; }
.occ-card b { display: block; color: var(--navy); font-size: 1.05rem; font-weight: 800; letter-spacing: -.01em; line-height: 1.3; }
.occ-card i { display: block; margin-top: 8px; color: var(--ink-2); font-style: normal; font-size: 13.5px; line-height: 1.6; }
.occ-card u { display: inline-flex; align-items: center; gap: 7px; margin-top: 12px; padding-bottom: 2px; border-bottom: 1px solid var(--gold); color: var(--gold-d); font-size: 12.5px; font-weight: 700; text-decoration: none; }
.occ-card:hover u { color: var(--navy); border-bottom-color: var(--navy); }

.mkt-mods { --r: 12px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 14px; padding-block: clamp(26px, 3.4vw, 42px); align-items: start; }
/* The pair carries the same space above and below. Beside a white shelf that shelf's own
   padding already makes the gap, so one side drops to zero rather than doubling it; after
   the ivory "Just listed" band nothing else spaces it, which left the cards touching the
   band's border. */
.mkt-rail-sec:not(.alt) + .mkt-mods { padding-top: 0; }
.mkt-mods + .mkt-rail-sec:not(.alt) { padding-top: 0; }
.mkt-mod { padding: 18px 18px 20px; border-radius: var(--r); background: #fff; border: 1px solid var(--line); height: 100%; }
.mkt-mod-lead { background: var(--ivory); }
.mkt-mod h2 { font-size: 1.12rem; font-weight: 800; letter-spacing: -.02em; }
.mkt-mod-head { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.mkt-allbtn { flex: none; padding: 8px 14px; border-radius: 4px; background: var(--navy); color: #fff; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.mkt-allbtn:hover { background: var(--gold-d); color: #fff; }
.mkt-mod-sub { margin-top: 8px; color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.mkt-mod-empty { margin-top: 12px; color: var(--ink-2); font-size: 13.5px; line-height: 1.6; }

.mkt-two { margin-top: 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mkt-promo { display: block; border-radius: 8px; overflow: hidden; background: var(--ivory); border: 1px solid var(--line); transition: border-color 220ms, transform 300ms var(--ease); }
.mkt-promo:hover { border-color: var(--gold); transform: translateY(-4px); color: inherit; }
.mkt-promo .pic { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--sand); }
.mkt-promo .pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mkt-promo .tx { display: block; padding: 11px 12px 13px; }
.mkt-promo .tx b { display: block; color: var(--navy); font-size: 13.5px; font-weight: 800; }
.mkt-promo .tx i { display: block; margin-top: 4px; color: var(--muted); font-size: 11.5px; font-style: normal; line-height: 1.45; }

.mkt-spot { margin-top: 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mkt-spot-card { padding: 11px; border-radius: 8px; background: #fff; border: 1px solid var(--line); display: flex; flex-direction: column; }
.mkt-spot-card .pic { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 5px; background: var(--sand); }
.mkt-spot-card .pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* `position: static` undoes the global .tag rule, which absolutely positions the badge that
   sits over a product photo. Here .tag is a plain label in the card body, and .mkt-spot-card
   is not positioned, so without this both labels escape to the top-left corner of the page. */
.mkt-spot-card .tag { position: static; margin-top: 10px; padding: 0; background: none; color: var(--gold-d); font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.mkt-spot-card h3 { margin-top: 5px; font-size: 13.5px; font-weight: 700; line-height: 1.3; }
.mkt-spot-card .sub { margin-top: 4px; color: var(--muted); font-size: 11.5px; line-height: 1.45; }

.quote-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; margin-top: auto; padding: 9px 13px; border-radius: 4px; border: 1px solid var(--line-2); background: #fff; color: var(--navy); font-size: 12.5px; font-weight: 700; }
.quote-btn:hover { background: var(--navy); border-color: var(--navy); color: #fff; }
.mkt-spot-card .quote-btn { margin-top: 11px; }

.mkt-focus { display: block; margin-top: 14px; padding: 20px 18px 22px; border-radius: 8px; background: linear-gradient(140deg, var(--navy), var(--midnight)); position: relative; overflow: hidden; }
.mkt-focus::after { content: ""; position: absolute; inset: 0; background: radial-gradient(420px 260px at 88% 6%, rgba(201, 161, 74, .3), rgba(201, 161, 74, 0) 66%); pointer-events: none; }
.mkt-focus .tx { position: relative; z-index: 1; display: block; }
.mkt-focus b { display: block; color: #fff; font-size: 1.1rem; font-weight: 800; letter-spacing: -.02em; }
.mkt-focus i { display: block; margin-top: 9px; color: var(--mist); font-size: 13px; font-style: normal; line-height: 1.55; }
.mkt-focus u { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; color: var(--gold-l); font-size: 13px; font-weight: 700; text-decoration: none; border-bottom: 1px solid rgba(201, 161, 74, .6); padding-bottom: 3px; }
.mkt-focus:hover u { color: #fff; border-bottom-color: #fff; }

.mkt-grid { --r: 10px; margin-top: clamp(20px, 2.6vw, 32px); display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 208px), 1fr)); gap: 12px; }
.mkt-card { display: flex; flex-direction: column; border-radius: var(--r); background: #fff; border: 1px solid var(--line); overflow: hidden; transition: border-color 220ms, transform 280ms var(--ease), box-shadow 280ms; }
.mkt-card:hover { border-color: var(--gold); transform: translateY(-5px); box-shadow: 0 22px 38px -28px rgba(10, 26, 63, .5); }
.mkt-card .pic { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; background: var(--ivory); }
.mkt-card .pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease); }
.mkt-card:hover .pic img { transform: scale(1.05); }
.mkt-card .bd { display: flex; flex-direction: column; flex: 1; padding: 13px 14px 15px; }
/* Same reset as .mkt-spot-card .tag — see the note there. Without it every card in a
   horizontal shelf stacks its label in the top-left corner of the page. */
.mkt-card .tag { position: static; padding: 0; background: none; color: var(--gold-d); font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.mkt-card h3 { margin-top: 6px; font-size: 14px; font-weight: 700; line-height: 1.32; }
.mkt-card .sub { margin-top: 5px; padding-bottom: 13px; color: var(--muted); font-size: 12px; line-height: 1.45; }
.mkt-card .quote-btn { margin-top: auto; align-self: flex-start; }

.mkt-note { margin-top: clamp(18px, 2.2vw, 26px); max-width: 68ch; color: var(--muted); font-size: 13.5px; line-height: 1.6; }
.mkt-empty { margin-top: clamp(22px, 3vw, 34px); }

/* ---------- reasons bar ---------- */
.mkt-usp { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.mkt-usp li { display: flex; align-items: flex-start; gap: 11px; padding: 14px 15px; border-radius: 10px; background: #fff; border: 1px solid var(--line); }
.mkt-usp .ib { flex: none; display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 8px; background: var(--ivory); color: var(--gold-d); }
.mkt-usp .tx { min-width: 0; }
.mkt-usp b { display: block; color: var(--navy); font-size: 13px; font-weight: 800; line-height: 1.3; }
.mkt-usp i { display: block; margin-top: 4px; color: var(--muted); font-size: 11.5px; font-style: normal; line-height: 1.5; }

/* ---------- product shelves ---------- */
/* Same scroller as the category rail, carrying .mkt-card instead of .mkt-tile. The card is
   fixed-width here and fluid in .mkt-grid, which is the only difference between a shelf and
   the wall of stock underneath it. */
.mkt-rail-sec.alt { background: var(--ivory); border-block: 1px solid var(--line); }
.mkt-rail-head .head-end { display: flex; align-items: center; gap: 10px; }
.mkt-prail { --r: 10px; margin-top: 16px; display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; }
.mkt-prail::-webkit-scrollbar { display: none; }
.mkt-prail .mkt-card { flex: none; width: clamp(166px, 17vw, 212px); scroll-snap-align: start; }
/* The lift on hover would be clipped by the scroller, so shelves nudge instead of rising. */
.mkt-prail .mkt-card:hover { transform: none; border-color: var(--gold); }
.mkt-prail .mkt-card:hover .pic img { transform: scale(1.05); }

/* ---------- wide promo pair ---------- */
.mkt-promo.wide { display: grid; grid-template-columns: minmax(0, 150px) minmax(0, 1fr); align-items: stretch; }
.mkt-promo.wide .pic { aspect-ratio: auto; height: 100%; min-height: 132px; }
.mkt-promo.wide .tx { align-self: center; padding: 16px 18px; }
.mkt-promo.wide .tx b { font-size: 15px; }
.mkt-promo.wide .tx i { margin-top: 6px; font-size: 12.5px; }
.mkt-promo.wide .tx u { display: inline-flex; align-items: center; gap: 7px; margin-top: 11px; color: var(--gold-d); font-size: 12.5px; font-weight: 700; text-decoration: none; border-bottom: 1px solid var(--gold); padding-bottom: 2px; }
.mkt-promo.wide:hover .tx u { color: var(--navy); border-bottom-color: var(--navy); }

/* ---------- trust strip ---------- */
.mkt-trust { list-style: none; margin: clamp(20px, 2.4vw, 28px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.mkt-trust li { padding: 16px 17px 18px; border-radius: 10px; background: var(--ivory); border: 1px solid var(--line); }
.mkt-trust .ib { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 8px; background: #fff; border: 1px solid var(--line); color: var(--gold-d); }
.mkt-trust b { display: block; margin-top: 11px; color: var(--navy); font-size: 13.5px; font-weight: 800; line-height: 1.32; }
.mkt-trust i { display: block; margin-top: 6px; color: var(--ink-2); font-style: normal; font-size: 12.5px; line-height: 1.55; }

@media (max-width: 1080px) {
  .mkt-usp, .mkt-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .mkt-banners { grid-template-columns: minmax(0, 1fr); }
  .mkt-side { grid-template-rows: none; grid-template-columns: 1fr 1fr; }
  .mkt-door.solo { grid-row: auto; grid-column: span 2; }
  .mkt-mods { padding-block: 26px; }
}
@media (max-width: 760px) {
  /* A shelf is swiped on a touch screen, so the arrows are dead weight taking up the row
     the heading and its "see all" need. */
  .mkt-rail-head .arrows { display: none; }
  .mkt-rail-sec { padding-block: 24px; }
  .mkt-rail, .mkt-prail { scroll-padding-inline-start: var(--pad); }
}
/* Above a phone a rail lines up with the page column: the scroller is exactly as wide as the
   column and a whole number of tiles fills it edge to edge, so no tile starts in the gutter or
   is cut at the right. The arrows scroll to the rest. A phone keeps the swipe rail that runs
   to the screen edge (above). */
@media (min-width: 761px) {
  .mkt-rail.wrap, .mkt-prail.wrap { padding-inline: 0; width: calc(100% - 2 * var(--pad)); max-width: calc(1260px - 2 * var(--pad)); }
  .mkt-rail { --per: 5; }
  .mkt-prail { --per: 4; }
  .mkt-rail .mkt-tile, .mkt-prail .mkt-card { width: calc((100% - (var(--per) - 1) * 12px) / var(--per)); }
}
@media (min-width: 901px) { .mkt-rail { --per: 6; } }
@media (min-width: 1081px) { .mkt-rail { --per: 7; } .mkt-prail { --per: 6; } }
/* The occasion circles follow the same rule: the rail is the page column, a whole number of
   circles fills it, and a phone keeps the swipe rail that runs to the screen edge. */
@media (min-width: 761px) {
  .occ-rail.wrap { padding-inline: 0; width: calc(100% - 2 * var(--pad)); max-width: calc(1260px - 2 * var(--pad)); }
  .occ-rail { --per: 7; gap: 12px; }
  .occ-rail .occ { width: calc((100% - (var(--per) - 1) * 12px) / var(--per)); }
}
@media (min-width: 901px) { .occ-rail { --per: 8; } }
@media (min-width: 1081px) { .occ-rail { --per: 9; } }
@media (max-width: 760px) {
  /* On a phone the circles speak for themselves: no heading row, no "See all" (the phone menu
     links to every occasion). The section keeps its name for screen readers (aria-labelledby). */
  .mkt-occ .mkt-rail-head { display: none; }
  .mkt-occ .occ-rail { margin-top: 0; }
  .occ-rail { gap: 10px; scroll-padding-inline-start: var(--pad); }
  .occ { width: 80px; }
  .occ-ring { max-width: 72px; padding: 2px; }
  .occ-ring .pic { border-width: 2px; }
  .occ .nm { margin-top: 7px; font-size: 12px; }
}
@media (max-width: 560px) {
  .occ-card { grid-template-columns: 76px minmax(0, 1fr); gap: 14px; padding: 16px; }
  .occ-card .occ-ring { padding: 2px; }
  .occ-card .occ-ring .pic { border-width: 2px; }
}
/* The top of the home page is one stack (banner row, department index, "Shop by category",
   reasons bar, personalised trophies) with the same gap between every block, then a
   section's worth of space before the first full-width band. */
.pg-home { --mk-gap: clamp(14px, 1.8vw, 24px); }
.pg-home .mkt-nav, .pg-home .mkt-usp, .pg-home .mkt-pz { margin-top: var(--mk-gap); }
.pg-home #browse { margin-top: var(--mk-gap); padding-block: 0; }
/* "Awards for" opens the stack, above the banner row, less the 4px its rail keeps under the circles. */
.pg-home .mkt-occ { margin-top: var(--mk-gap); }
.pg-home .mkt-occ + .mkt-banners { margin-top: calc(var(--mk-gap) - 4px); }
/* less the 4px the rail keeps under its tiles for the hover shadow */
.pg-home #browse + section .mkt-usp { margin-top: calc(var(--mk-gap) - 4px); }
.pg-home #personalise + .alt { margin-top: clamp(26px, 3.4vw, 42px); }
@media (max-width: 560px) {
  .mkt-hero { min-height: 0; }
  .mkt-search .sel { flex: 1 1 100%; }
  .mkt-search .sel select { border-inline-end: 0; border-bottom: 1px solid rgba(201, 161, 74, .32); }
  .mkt-search .btn { flex: 1 1 100%; }
  .mkt-two, .mkt-spot { grid-template-columns: 1fr; }
  .mkt-band .wrap { flex-direction: column; gap: 4px; }
  /* Two across, not one. A single column of 320px cards reads as a blog, and the whole point
     of this page is that it reads as a shop. */
  .mkt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .mkt-card h3 { font-size: 13px; }
  .mkt-card .sub { font-size: 11.5px; }
  .mkt-card .bd { padding: 11px 11px 13px; }
  /* Comfortable thumb targets: the button and the shelf's "see all" are the two things a
     phone visitor actually taps on this page. */
  .mkt-card .quote-btn { align-self: stretch; min-height: 40px; padding: 9px 10px; font-size: 11.5px; }
  .mkt-allbtn { min-height: 38px; display: inline-flex; align-items: center; padding: 8px 14px; }
  .mkt-prail .mkt-card { width: 152px; }
  .mkt-usp li { padding: 12px; gap: 9px; }
  .mkt-usp .ib { width: 30px; height: 30px; }
  .mkt-usp i { display: none; }
  .mkt-promo.wide { grid-template-columns: minmax(0, 116px) minmax(0, 1fr); }
  .mkt-promo.wide .tx { padding: 13px 14px; }
}
@media (max-width: 560px) {
  .mkt-trust { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 359px) {
  .mkt-usp { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- home: sections ---------- */
.clients { margin-top: clamp(40px, 5vw, 76px); padding-block: clamp(30px, 4vw, 56px); }
.clients h2 { padding-inline: var(--pad); font-size: 11.5px; letter-spacing: .12em; }
.clients .marquee { margin-top: clamp(18px, 2.4vw, 30px); }
.clients .small { margin-top: clamp(14px, 1.8vw, 20px); padding-inline: var(--pad); }
.logo-tile { width: 170px; height: 78px; flex: none; background: #fff; border: 1px solid var(--line); }
.logo-tile .ph { font-size: 10.5px; gap: 4px; padding: 8px; background: #fff; }
.logo-tile .ph img { width: 20px; }
.logo-tile img.fill { padding: 12px; }
.cat-card { display: flex; flex-direction: column; color: inherit; }
.cat-card:hover { color: inherit; }
.cat-card .body { display: block; padding: 20px 20px 24px; }
.cat-card .t { display: block; margin-top: 10px; color: var(--navy); font-size: 1.1rem; font-weight: 700; line-height: 1.26; }
.cat-card .b { display: block; margin-top: 8px; color: var(--ink-2); font-size: 14px; line-height: 1.55; }
.num-list { list-style: none; margin: 26px 0 0; padding: 0; border-top: 1px solid var(--line); }
.num-list li { display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line); font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.num-list .n { font-size: 12px; font-weight: 800; letter-spacing: .08em; color: var(--gold-d); flex: none; padding-top: 2px; }
.num-list strong { color: var(--navy); }
.dark .num-list, .dark .num-list li { border-color: rgba(201, 161, 74, .32); color: var(--mist-3); }
.dark .num-list strong { color: #fff; }
.dark .num-list .n { color: var(--gold-l); }
.steps { margin-top: clamp(28px, 3.6vw, 56px); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: clamp(24px, 4vw, 64px); align-items: start; }
.steps-media { position: sticky; top: clamp(96px, 13vh, 130px); order: 2; }
.step-list { order: 1; list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(18px, 2.4vw, 28px); }
.steps-frame { aspect-ratio: 4 / 5; max-height: 70vh; width: 100%; border: 1px solid var(--line); }
.step-layer { position: absolute; inset: 0; opacity: 0; transform: scale(1.04); transition: opacity 600ms var(--ease), transform 900ms var(--ease); }
.step-layer.on { opacity: 1; transform: none; }
.step-caption { position: absolute; left: 16px; right: 16px; bottom: 16px; z-index: 2; display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: rgba(255, 255, 255, .95); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid var(--line); font-size: 13.5px; font-weight: 700; color: var(--navy); }
.step-caption [data-step-label] { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dots { display: flex; gap: 6px; align-items: center; flex: none; }
.dot { width: 8px; height: 8px; border-radius: 999px; background: var(--line-2); transition: background 300ms, transform 300ms; }
.dot.on { background: var(--gold); transform: scale(1.4); }
.step-card { padding: clamp(22px, 2.6vw, 34px); min-height: clamp(180px, 26vh, 260px); }
.step-card .n { font-size: 12.5px; font-weight: 700; letter-spacing: .08em; color: var(--gold-d); }
.step-card h3 { margin-top: 14px; font-size: clamp(1.25rem, 1.1rem + .6vw, 1.6rem); font-weight: 800; letter-spacing: -.02em; }
.step-card > p { margin-top: 12px; color: var(--ink-2); font-size: 15px; line-height: 1.62; }
@media (max-width: 900px) { .steps-media { display: none; } }
.arrows { display: flex; gap: 8px; }
.arrow-btn { width: 48px; height: 48px; border-radius: 2px; border: 1px solid var(--line-2); background: #fff; color: var(--navy); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.arrow-btn:hover { border-color: var(--navy); }
.arrow-btn.solid { background: var(--navy); border-color: var(--navy); color: #fff; }
.arrow-btn.solid:hover { background: var(--gold-d); border-color: var(--gold-d); }
.rail { margin-top: clamp(26px, 3.4vw, 44px); display: flex; gap: 16px; overflow-x: auto; padding: 4px calc((100vw - min(1260px, 100vw)) / 2 + var(--pad)) 24px; scroll-padding-left: calc((100vw - min(1260px, 100vw)) / 2 + var(--pad)); }
.rail-card { flex: none; width: clamp(240px, 28vw, 320px); transition: transform 300ms var(--ease); }
.rail-card:hover { transform: translateY(-6px); }
.rail-card .body { padding: 18px 20px 22px; }
.rail-card h3 { margin-top: 10px; font-size: 1.02rem; font-weight: 700; line-height: 1.3; }
.rail-card h3 a { color: var(--navy); }
.rail-card .link-u { margin-top: 14px; font-size: 14px; }
.rail-note { color: var(--muted); font-size: 13px; line-height: 1.6; }
.rail-note .link-u { font-size: 13px; }
.fill-sec { padding-block: clamp(64px, 9vw, 140px); }
.fill-h { max-width: 20ch; font-size: clamp(2rem, 1.2rem + 3.6vw, 4.4rem); line-height: 1.04; font-weight: 800; letter-spacing: -.04em; }
.fill { background: linear-gradient(#0A1A3F, #0A1A3F) 0 0 / 0% 100% no-repeat, #CFC6B4; -webkit-background-clip: text; background-clip: text; color: #CFC6B4; transition: background-size 120ms linear; }
.js .fill { -webkit-text-fill-color: transparent; }
.cmp-mobile { display: none; margin-top: clamp(24px, 3vw, 38px); gap: 12px; }
.cmp-card { padding: 18px; }
.cmp-card .t { font-weight: 700; color: var(--navy); }
.cmp-card .n, .cmp-table .n { font-size: 11.5px; color: var(--gold-d); }
.cmp-card .kicker { margin-top: 12px; font-size: 11.5px; }
.cmp-card .o { margin-top: 4px; color: var(--ink-2); font-size: 14px; line-height: 1.55; }
.cmp-card .u { margin-top: 4px; color: var(--navy); font-size: 14px; font-weight: 600; line-height: 1.55; }
.cmp-table, .tbl { margin-top: clamp(24px, 3vw, 38px); overflow-x: auto; border: 1px solid var(--line); background: #fff; }
.cmp-table table, .tbl table { width: 100%; min-width: 760px; border-collapse: collapse; font-size: 14px; }
.cmp-table th, .cmp-table td, .tbl th, .tbl td { padding: 16px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--sand); }
.cmp-table th:first-child, .cmp-table td:first-child, .tbl th:first-child { padding-left: 22px; }
.cmp-table thead th { padding-block: 18px; font-size: 13.5px; font-weight: 700; color: var(--ink-2); border-bottom-color: var(--line); }
.cmp-table thead th:first-child, .tbl thead th { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-d); font-weight: 700; }
.cmp-table tbody th, .tbl tbody th { font-weight: 700; color: var(--navy); }
.cmp-table td, .tbl td { color: var(--ink-2); }
.cmp-table .us { background: var(--ivory); color: var(--navy); font-weight: 600; padding-right: 22px; }
.cmp-table thead .us { background: var(--navy); color: #fff; font-weight: 800; }
.tbl thead tr { background: var(--ivory); }
.tbl thead th { border-bottom-color: var(--line); }
.tbl td.strong { color: var(--navy); font-weight: 600; }
@media (max-width: 900px) { .cmp-table { display: none; } .cmp-mobile { display: grid; } }
.caps { border-top: 1px solid var(--line); overflow: hidden; }
.stats { margin-top: clamp(22px, 3vw, 34px); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: clamp(20px, 3vw, 32px); }
.stats > div { padding-top: 18px; border-top: 1px solid rgba(201, 161, 74, .4); }
.stats dt { color: var(--mist-2); font-size: 13px; font-weight: 600; }
.stats dd { margin: 8px 0 0; color: #fff; font-size: clamp(2rem, 1.4rem + 1.8vw, 3.1rem); font-weight: 800; letter-spacing: -.03em; }
.why { padding: 26px; }
.why h3 { font-size: 1.05rem; font-weight: 700; }
.why p { margin-top: 10px; color: var(--ink-2); font-size: 14.5px; line-height: 1.58; }
.qfig { margin: 0; padding: clamp(22px, 2.6vw, 32px); background: #fff; border: 1px solid var(--line); display: flex; flex-direction: column; gap: 18px; }
.qfig.ivory { background: var(--ivory); }
.qfig.navy { background: var(--navy); border-color: var(--navy); }
.qfig blockquote { margin: 0; color: var(--navy); font-size: clamp(1.05rem, 1rem + .4vw, 1.3rem); line-height: 1.45; font-weight: 700; letter-spacing: -.01em; }
.qfig.navy blockquote { color: #fff; }
.qfig figcaption { display: flex; align-items: center; gap: 12px; margin-top: auto; color: var(--ink-2); font-size: 13.5px; line-height: 1.4; }
.qfig figcaption strong { display: block; color: var(--navy); }
.qfig.navy figcaption { color: var(--mist); }
.qfig.navy figcaption strong { color: #fff; }
.face { position: relative; width: 44px; height: 44px; flex: none; border-radius: 999px; overflow: hidden; background: var(--sand); }
.face .ph { padding: 0; }
.face .ph span { display: none; }
.face .ph img { width: 60%; }
.quote-panel { padding: clamp(22px, 2.6vw, 34px); }
.quote-panel h3 { font-size: 1.2rem; font-weight: 800; }
.quote-panel > .small { margin-top: 8px; font-size: 14px; }
.quote-panel form { margin-top: 22px; }
.contact-links { display: grid; gap: 10px; margin-top: 28px; max-width: 430px; }
.contact-link { display: flex; align-items: center; gap: 13px; padding: 16px 18px; background: #fff; border: 1px solid var(--line); transition: border-color 220ms; font-size: 14.5px; line-height: 1.4; color: var(--muted); }
.contact-link:hover { border-color: var(--navy); color: var(--muted); }
.contact-link svg { color: var(--navy); flex: none; }
.contact-link strong { display: block; color: var(--navy); }
.dark .contact-link { background: transparent; border-color: rgba(201, 161, 74, .4); color: var(--mist-2); }
.dark .contact-link:hover { border-color: var(--gold); }
.dark .contact-link strong { color: #fff; }
.dark .contact-link svg { color: var(--gold-l); }
.pcards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 16px; }
.pcard { display: flex; flex-direction: column; gap: 11px; padding: 22px; }
.icon-box { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--line); color: var(--gold-d); }
.pcard h3 { font-size: 1rem; font-weight: 700; }
.pcard p { color: var(--ink-2); font-size: 14px; line-height: 1.58; }
.close-cta { padding-block: clamp(56px, 8vw, 124px); }
.close-cta .emblem { width: clamp(52px, 6vw, 74px); margin-bottom: 22px; }
.close-h { color: #fff; font-size: clamp(2.1rem, 1.2rem + 4vw, 4.6rem); line-height: .98; font-weight: 800; letter-spacing: -.04em; }

/* ---------- one-field forms ---------- */
.inline-form { display: grid; gap: 12px; min-width: 0; }
.inline-label { font-size: 14px; font-weight: 600; color: var(--gold-l); }
.inline-row { display: flex; flex-wrap: wrap; gap: 10px; padding: 8px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(201, 161, 74, .5); }
.inline-row:focus-within { border-color: var(--gold-l); }
.inline-inp { flex: 1 1 180px; min-width: 0; height: 48px; padding: 0 16px; border: 0; background: transparent; font: inherit; font-size: 15px; color: #fff; outline: none; }
.inline-inp::placeholder { color: var(--mist-2); }
.inline-row .btn { height: 48px; padding: 0 24px; font-size: 15px; flex: none; }
.inline-status { font-size: 14px; color: #fff; font-weight: 600; }
.inline-status.err { color: #FFB4AC; }
.inline-form .notice { font-size: 14px; }

/* ---------- footer ---------- */
.site-footer { background: var(--midnight); color: var(--mist); padding-top: clamp(48px, 6vw, 88px); }
/* One row on a desktop: the brand, the three link lists and the contact details side by
   side, each column sized to what it holds, so nothing drops to a row of its own and leaves
   the rest of that row empty. A tablet gives the brand its own row with four columns under
   it; a phone, the brand and then two columns. */
.site-footer .cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(30px, 3.4vw, 44px) clamp(20px, 2.6vw, 36px); }
.f-brand { grid-column: 1 / -1; max-width: 46ch; }
@media (min-width: 760px) { .site-footer .cols { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1080px) {
  .site-footer .cols { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, .85fr) minmax(0, 1.15fr); }
  .f-brand { grid-column: auto; }
}
.f-brand img { width: 100%; max-width: 260px; height: auto; display: block; }
.f-brand p { margin-top: 20px; font-size: 14px; line-height: 1.65; color: var(--mist-2); }
.f-brand .ar { margin-top: 14px; font-size: 15px; line-height: 1.8; text-align: right; max-width: 34ch; }
.socials { display: flex; gap: 10px; margin-top: 22px; }
.social { width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(201, 161, 74, .35); color: var(--mist); transition: border-color 220ms, color 220ms; }
.site-footer .social:hover { border-color: var(--gold); color: var(--gold-l); }
.site-footer h2 { color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 18px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; font-size: 14.5px; }
.site-footer a { color: var(--mist); }
.site-footer a:hover { color: var(--gold-l); }
.site-footer .dim { color: var(--dim); line-height: 1.6; }
.f-signup { margin-top: clamp(34px, 4vw, 52px); padding: clamp(22px, 2.6vw, 30px); background: rgba(255, 255, 255, .05); border: 1px solid rgba(201, 161, 74, .28); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: clamp(18px, 3vw, 36px); align-items: center; }
.f-signup .t { color: #fff; font-size: 1.05rem; font-weight: 700; }
.f-signup p + p { margin-top: 8px; color: var(--mist-2); font-size: 14px; line-height: 1.6; }
.f-promise { margin-top: clamp(30px, 3.4vw, 44px); padding: 16px 18px; border: 1px solid rgba(201, 161, 74, .3); display: flex; flex-wrap: wrap; gap: 12px; align-items: center; font-size: 13.5px; line-height: 1.6; }
.f-promise svg { color: var(--gold-l); flex: none; }
.f-promise span { flex: 1; min-width: 240px; }
.f-promise strong { color: #fff; }
/* The announcement and the "Made in the Emirates" band on a phone: moved from the top of
   the home page to the top of the footer, as one card, so the first screen is the search. */
.f-notes { display: none; }
@media (max-width: 760px) {
  .announce, .mkt-band { display: none; }
  .f-notes { display: block; margin-bottom: 40px; border: 1px solid rgba(201, 161, 74, .3); background: rgba(255, 255, 255, .03); }
  .f-notes p { padding: 15px 16px; }
  .f-notes p + p { border-top: 1px solid rgba(201, 161, 74, .22); }
  .f-announce { display: flex; gap: 11px; align-items: baseline; color: #EDE4D3; font-size: 13.5px; font-weight: 600; line-height: 1.6; }
  .f-announce .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--gold); flex: none; transform: translateY(-2px); }
  .site-footer .f-announce a { color: var(--gold-l); font-weight: 700; white-space: nowrap; text-decoration: underline; text-underline-offset: 3px; }
  .f-announce a svg { vertical-align: -2px; }
  .f-band { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 3px 13px; align-items: center; }
  .f-band img { grid-row: span 2; }
  .f-band .en { color: #fff; font-size: 14px; font-weight: 700; letter-spacing: .01em; }
  .f-band .ar { color: var(--gold-l); font-size: 14px; font-weight: 500; justify-self: start; }
}
.f-legal { margin-top: clamp(18px, 2.4vw, 28px); padding: 22px 0; border-top: 1px solid rgba(201, 161, 74, .28); display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; justify-content: space-between; font-size: 13px; color: var(--dim); }
.to-top { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }

/* ---------- category ---------- */
.browse { border-top: 0; }
.browse-row { padding-block: clamp(20px, 2.6vw, 30px); display: flex; gap: 12px; overflow-x: auto; }
.type-card { flex: none; display: block; width: clamp(150px, 18vw, 190px); padding: 0; border: 1px solid var(--line); background: #fff; cursor: pointer; text-align: left; font: inherit; color: inherit; transition: border-color 220ms, transform 260ms var(--ease); }
.type-card:hover { transform: translateY(-4px); border-color: var(--gold); color: inherit; }
.type-card[aria-pressed="true"], .type-card[aria-current="true"] { border-color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy); }
.type-card .t { display: block; padding: 12px 12px 14px; font-size: 13.5px; font-weight: 700; color: var(--navy); }
.type-card .ph { font-size: 11px; gap: 8px; }
.type-card .ph img { width: 30px; }
.catalogue { padding-top: clamp(28px, 4vw, 52px); padding-bottom: clamp(48px, 6vw, 88px); display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: clamp(24px, 3.4vw, 48px); align-items: start; }
.rail-filters { position: sticky; top: clamp(88px, 12vh, 116px); }
/* Beside the pieces the panel scrolls on its own: a long list of materials or departments stays
   within the window under the sticky header, "Refine" stays at its top, and reaching the end of
   the filters does not start scrolling the page. */
@media (min-width: 901px) {
  .rail-filters { display: flex; flex-direction: column; max-height: calc(100vh - clamp(88px, 12vh, 116px) - 24px); max-height: calc(100dvh - clamp(88px, 12vh, 116px) - 24px); }
  .rail-filters .rf-head { flex: none; }
  .rail-filters .rf-body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-inline-end: 10px; padding-bottom: 4px; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
  .rail-filters .rf-body::-webkit-scrollbar { width: 6px; }
  .rail-filters .rf-body::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 3px; }
  .rail-filters .rf-body::-webkit-scrollbar-track { background: transparent; }
}
.rf-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.rf-head h2 { font-size: 11.5px; letter-spacing: .1em; }
.rf-group { padding: 18px 0; border-bottom: 1px solid var(--line); }
.rf-group h3 { font-size: 14px; font-weight: 700; }
.rf-group .chips { gap: 8px; margin-top: 12px; }
.rf-cta { margin-top: 22px; padding: 20px; background: var(--navy); border-top: 2px solid var(--gold); }
.rf-cta .t { color: #fff; font-size: 15px; font-weight: 700; line-height: 1.4; }
.rf-cta p + p { margin-top: 10px; color: var(--mist); font-size: 13.5px; line-height: 1.6; }
.rf-cta .link-u { margin-top: 16px; font-size: 13.5px; }
/* On a phone (where the panel sits above the pieces) Refine starts folded to one bar, so the
   pieces come first; the bar opens it (site.js, [data-rf-toggle]). Only with JavaScript: without
   it the panel stays open and there is no button. */
.rf-toggle, .rf-count { display: none; }
@media (max-width: 900px) {
  .js .rail-filters { border: 1px solid var(--line); background: #fff; }
  .js .rf-head { position: relative; min-height: 54px; padding: 0 16px; border-bottom: 0; }
  .js .rail-filters.is-open .rf-head { border-bottom: 1px solid var(--line); }
  .js .rf-head h2 { margin-inline-end: auto; }
  .js .rf-head .text-btn { position: relative; z-index: 1; }
  .js .rf-toggle { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; color: var(--navy); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
  .js .rf-toggle::after { content: ""; position: absolute; inset: 0; }
  .js .rf-toggle svg { color: var(--gold-d); transition: transform 200ms var(--ease); }
  .js .rf-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
  .rf-toggle[aria-expanded="true"] .rf-show, .rf-toggle[aria-expanded="false"] .rf-hide { display: none; }
  .js .rf-toggle:focus-visible { outline: 0; }
  .js .rf-toggle:focus-visible::after { outline: 2px solid var(--gold); outline-offset: -2px; }
  .rf-count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; margin-inline-start: 6px; padding: 0 6px; background: var(--navy); color: var(--gold-l); font-size: 11px; letter-spacing: 0; vertical-align: 1px; }
  .js .rail-filters:not(.is-open) .rf-body { display: none; }
  .js .rf-body { padding: 0 16px 16px; }
}
.results { min-width: 0; }
.results-head { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.results-head h2 { font-size: 1.05rem; font-weight: 700; }
.sort { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; color: var(--muted); }
.sort .inp { height: 42px; width: auto; border-color: var(--line-2); font-size: 14px; }
.sort .inp:focus { border-color: var(--navy); outline: 2px solid rgba(201, 161, 74, .45); }
.active-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 16px 0 0; }
.active-filters .chips { gap: 8px; }
/* "Load more", and the listing dimmed while a filter change is on its way. */
.cat-more { display: flex; justify-content: center; margin-top: 26px; }
.cat-more:empty { display: none; }
.catalogue.is-loading .results { opacity: .5; transition: opacity 150ms; pointer-events: none; }
.prod-grid { margin-top: 22px; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 16px; }
.prod-card { display: flex; flex-direction: column; }
.prod-card .body { display: flex; flex-direction: column; flex: 1; padding: 18px 20px 22px; }
.prod-card h3 { margin-top: 10px; font-size: 1rem; font-weight: 700; line-height: 1.32; }
.prod-card h3 a { color: var(--navy); }
.prod-card .meta { margin-top: 8px; color: var(--ink-2); font-size: 13.5px; line-height: 1.55; }
.prod-card .actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: auto; padding-top: 16px; font-size: 14px; }
.band-box { margin-top: 22px; padding: clamp(24px, 3vw, 36px); background: var(--ivory); border: 1px solid var(--line); }
.empty { text-align: center; }
.empty .t { color: var(--navy); font-size: 1.05rem; font-weight: 700; }
.empty p + p { margin: 10px auto 0; max-width: 46ch; color: var(--ink-2); font-size: 14.5px; line-height: 1.6; }
.empty .btns { justify-content: center; }
.shortlist { margin-top: clamp(28px, 3.4vw, 44px); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: clamp(20px, 3vw, 36px); align-items: center; }
.shortlist h2 { margin-top: 12px; font-size: clamp(1.35rem, 1.1rem + 1vw, 1.9rem); line-height: 1.15; font-weight: 800; letter-spacing: -.025em; }
.lead-s { margin-top: 12px; max-width: 46ch; color: var(--ink-2); font-size: 14.5px; line-height: 1.6; }
@media (max-width: 900px) { .catalogue { grid-template-columns: 1fr; } .rail-filters { position: static; } }

/* ---------- product ---------- */
.pd-crumbs { padding-top: 18px; }
.pd { padding-top: clamp(20px, 3vw, 36px); padding-bottom: clamp(44px, 5.5vw, 72px); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr)); gap: clamp(26px, 3.6vw, 56px); align-items: start; }
.pd-stage { position: relative; background: var(--ivory); border: 1px solid var(--line); }
.gal-slide { position: absolute; inset: 0; }
.stamp { position: absolute; left: 16px; top: 16px; z-index: 2; padding: 7px 13px; background: var(--navy); color: var(--gold-l); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.thumbs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-top: 10px; }
.thumb { position: relative; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; padding: 6px; border: 1px solid var(--line); background: #fff; cursor: pointer; overflow: hidden; font: inherit; }
.thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.thumb img + span { position: absolute; left: 4px; right: 4px; bottom: 4px; background: rgba(255, 255, 255, .9); padding: 2px 4px; }
.thumb span { position: relative; font-size: 10.5px; font-weight: 600; letter-spacing: .04em; color: var(--navy); text-align: center; }
.thumb[aria-selected="true"] { border-color: var(--gold); background: var(--ivory); box-shadow: inset 0 0 0 1px var(--gold); }
.pd-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 16px; }
/* Share, at the far end of the tag row (product page). */
.share { position: relative; margin-inline-start: auto; }
.share summary { list-style: none; display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; border: 1px solid var(--line); background: #fff; color: var(--navy); font-size: 12px; font-weight: 700; letter-spacing: .04em; cursor: pointer; user-select: none; transition: border-color 200ms, color 200ms; }
.share summary::-webkit-details-marker { display: none; }
.share summary:hover, .share[open] summary { border-color: var(--gold); color: var(--gold-d); }
.share-menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 20; display: grid; min-width: 200px; padding: 6px; background: #fff; border: 1px solid var(--line); box-shadow: 0 22px 44px -20px rgba(6, 16, 41, .45); }
.share-menu a, .share-menu button { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 0; background: none; color: var(--ink); font: inherit; font-size: 13.5px; font-weight: 600; text-align: start; cursor: pointer; }
.share-menu a:hover, .share-menu button:hover { background: var(--ivory); color: var(--navy); }
.share-menu svg { flex: none; color: var(--gold-d); }
.share-menu button[hidden] { display: none; }
/* On a phone, Share leaves the tag row and becomes an icon on the photo's top-right corner,
   level with the stamp (partials/share.php prints both; one shows). */
.share-photo { display: none; }
@media (max-width: 760px) {
  .share-row { display: none; }
  .share-photo { display: block; position: absolute; top: 9px; right: 9px; z-index: 3; margin: 0; }
  .share-photo summary { width: 42px; height: 42px; padding: 0; justify-content: center; background: rgba(255, 255, 255, .94); border-color: rgba(10, 26, 63, .14); box-shadow: 0 8px 20px -10px rgba(6, 16, 41, .5); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
  .share-photo summary span { display: none; }
}
.pill-tag { display: inline-block; padding: 6px 12px; background: var(--ivory); border: 1px solid var(--line); color: var(--gold-d); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.pill-tag.solid { background: var(--navy); border-color: var(--navy); color: var(--gold-l); }
.pd-occ { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 18px; }
.pd-occ .k { margin-inline-end: 4px; color: var(--gold-d); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.pd-occ a { display: inline-block; padding: 7px 12px; border-radius: 2px; border: 1px solid var(--line-2); background: #fff; color: var(--navy); font-size: 12.5px; font-weight: 600; transition: border-color 160ms, color 160ms; }
.pd-occ a:hover { border-color: var(--gold); color: var(--gold-d); }
.pd-title { font-size: clamp(1.9rem, 1.3rem + 1.9vw, 2.8rem); line-height: 1.1; font-weight: 800; letter-spacing: -.03em; }
.pd-facts { margin-top: 26px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 130px), 1fr)); border-block: 1px solid var(--line); }
.pd-facts > div { padding: 16px 18px 16px 0; }
.pd-facts dt { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-d); }
.pd-facts dd { margin: 8px 0 0; color: var(--navy); font-size: 16px; font-weight: 700; }
.opt { margin: 24px 0 0; padding: 0; border: 0; min-width: 0; }
.opt legend { padding: 0; margin-bottom: 12px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-d); }
.method-note { margin-top: 12px; color: var(--muted); font-size: 13.5px; line-height: 1.55; }
.sel-box { margin-top: 28px; padding: 24px; background: var(--navy); border-top: 2px solid var(--gold); }
.sel-box .sel { margin-top: 12px; color: #fff; font-size: 1.05rem; font-weight: 600; line-height: 1.5; }
.sel-box .sub { margin-top: 10px; color: var(--mist); font-size: 14px; line-height: 1.55; }
.sel-box .btns { margin-top: 22px; }
.ticks { list-style: none; margin: 26px 0 0; padding: 0; border-top: 1px solid var(--line); }
.ticks li { display: flex; gap: 12px; align-items: flex-start; padding: 14px 0; border-bottom: 1px solid var(--line); color: var(--ink-2); font-size: 14.5px; line-height: 1.55; }
.ticks svg { color: var(--gold-d); flex: none; margin-top: 2px; }
.tiers { margin-top: clamp(22px, 3vw, 36px); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 14px; }
.tier { padding: 24px; background: #fff; border: 1px solid var(--line); }
.tier .p { margin-top: 12px; font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; color: var(--navy); }
.tier .n { margin-top: 8px; font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.tier.best { background: var(--navy); border-color: var(--navy); border-top: 2px solid var(--gold); }
.tier.best .kicker { color: var(--gold-l); }
.tier.best .p { color: #fff; }
.tier.best .n { color: var(--mist-3); }
.specs { margin-top: 24px; border-top: 1px solid var(--line); }
.specs > div { display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; padding: 15px 0; border-bottom: 1px solid var(--line); }
.specs dt { color: var(--muted); font-size: 14px; }
.specs dd { margin: 0; color: var(--navy); font-size: 14.5px; font-weight: 600; text-align: right; }

/* ---------- how it works ---------- */
.glance { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); }
.glance > div { padding: clamp(22px, 2.6vw, 30px) clamp(18px, 2vw, 26px) clamp(22px, 2.6vw, 30px) 0; }
.glance > div + div { padding-left: clamp(18px, 2vw, 26px); border-left: 1px solid var(--line); }
.glance .v { margin-top: 10px; color: var(--navy); font-size: clamp(1.3rem, 1.1rem + .8vw, 1.8rem); font-weight: 800; letter-spacing: -.025em; }
.glance .n { margin-top: 8px; color: var(--ink-2); font-size: 13.5px; line-height: 1.55; }
@media (max-width: 700px) { .glance > div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); } }
.hw-step .top { display: flex; flex-wrap: wrap; gap: 12px; align-items: baseline; justify-content: space-between; }
.hw-step .when { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.hw-step h3 { margin-top: 16px; }
.hw-step .ng { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--sand); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 16px; }
.hw-step .ng p + p { margin-top: 8px; color: var(--ink); font-size: 14px; line-height: 1.55; }
.cap-card { padding: 24px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(201, 161, 74, .28); }
.cap-card h3 { margin-top: 12px; font-size: 1.05rem; font-weight: 700; line-height: 1.3; }
.cap-card p + h3 + p, .cap-card h3 + p { margin-top: 10px; color: var(--mist); font-size: 14px; line-height: 1.6; }
.checklist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.checklist li { display: flex; gap: 14px; align-items: flex-start; padding: 18px 0; border-bottom: 1px solid var(--line); font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.checklist svg { color: var(--gold); flex: none; margin-top: 2px; }
.checklist strong { color: var(--navy); }

/* ---------- our work ---------- */
.feature { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); border: 1px solid var(--line); }
.feature .fmedia { min-height: clamp(280px, 36vw, 460px); }
.feature .fbody { padding: clamp(26px, 3.2vw, 48px); display: flex; flex-direction: column; justify-content: center; background: var(--ivory); }
.feature h3 { margin-top: 14px; font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.3rem); line-height: 1.1; font-weight: 800; letter-spacing: -.03em; }
.fstats { margin-top: 24px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 120px), 1fr)); gap: 18px; }
.fstats dd { margin: 6px 0 0; color: var(--navy); font-size: 1.05rem; font-weight: 700; }
.bq { margin: 26px 0 0; padding-left: 18px; border-left: 2px solid var(--gold); color: var(--navy); font-size: 1.02rem; line-height: 1.5; font-weight: 600; }
.bq footer { margin-top: 10px; color: var(--muted); font-size: 13.5px; font-weight: 500; }
.work-grid { margin-top: clamp(22px, 3vw, 34px); display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); gap: 18px; }
.proj-card { display: flex; flex-direction: column; }
.proj-card .body { display: flex; flex-direction: column; flex: 1; padding: 20px 22px 24px; }
.proj-card h3 { font-size: 1.05rem; font-weight: 700; line-height: 1.3; }
.proj-card .b { margin-top: 10px; color: var(--ink-2); font-size: 14px; line-height: 1.58; }
.mini-dl { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--sand); display: flex; flex-wrap: wrap; gap: 16px 24px; }
.mini-dl dt { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-d); }
.mini-dl dd { margin: 5px 0 0; color: var(--navy); font-size: 14px; font-weight: 700; }
.proj-card .cta { margin-top: auto; padding-top: 18px; font-size: 14px; }

/* ---------- FAQs ---------- */
.search-bar { margin-top: clamp(26px, 3.4vw, 40px); max-width: 620px; display: flex; gap: 10px; padding: 8px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(201, 161, 74, .45); }
.search-bar:focus-within { border-color: var(--gold-l); }
.search-bar .ic { display: flex; align-items: center; padding-inline-start: 12px; color: var(--gold-l); }
.search-bar input { flex: 1; min-width: 0; height: 48px; border: 0; background: none; font: inherit; font-size: 15px; color: #fff; outline: none; }
.search-bar input::placeholder { color: var(--mist-2); }
.faq-layout { padding-top: clamp(30px, 4vw, 56px); padding-bottom: clamp(48px, 6vw, 96px); display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: clamp(24px, 3.4vw, 52px); align-items: start; }
.topics { position: sticky; top: clamp(96px, 13vh, 130px); }
.topics h2 { font-size: 11.5px; letter-spacing: .1em; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.topics ul { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 2px; }
.topic-link { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 12px; font-size: 14px; font-weight: 600; color: var(--ink); border-left: 2px solid var(--line); }
.topic-link:hover { border-left-color: var(--gold); color: var(--navy); }
.topic-link span { color: var(--gold-d); font-size: 12px; font-weight: 700; }
.faq-group { scroll-margin-top: clamp(96px, 13vh, 130px); }
.faq-group + .faq-group { margin-top: clamp(36px, 4.5vw, 64px); }
.faq-group > p { margin-top: 10px; max-width: 56ch; color: var(--ink-2); font-size: 15px; line-height: 1.6; }
.faq-group .acc { margin-top: 22px; }
.faq-status { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding: 14px 16px; margin-bottom: 22px; background: var(--ivory); border: 1px solid var(--line); font-size: 14px; }
.faq-status strong { color: var(--navy); }
@media (max-width: 900px) { .faq-layout { grid-template-columns: 1fr; } .topics { position: static; } }

/* ---------- contact ---------- */
.channels { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 18px; }
.channel { display: flex; flex-direction: column; gap: 12px; padding: 26px 24px; background: #fff; border: 1px solid var(--line); border-top: 2px solid var(--gold); color: inherit; transition: transform 300ms var(--ease), box-shadow 300ms; }
.channel:hover { transform: translateY(-6px); box-shadow: 0 28px 48px -34px rgba(10, 26, 63, .55); color: inherit; }
.channel.navy { background: var(--navy); border-color: var(--navy); border-top-color: var(--gold); }
.channel.ivory { background: var(--ivory); }
.ch-icon { display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; border: 1px solid var(--line); color: var(--gold-d); background: #fff; }
.channel.navy .ch-icon { background: transparent; border-color: rgba(201, 161, 74, .5); color: var(--gold-l); }
.channel h3 { font-size: 1.08rem; font-weight: 700; }
.channel.navy h3 { color: #fff; }
.channel p { color: var(--ink-2); font-size: 14px; line-height: 1.58; }
.channel.navy p { color: var(--mist); }
.channel .go { margin-top: auto; padding-top: 10px; color: var(--gold-d); font-size: 13.5px; font-weight: 700; }
.channel.navy .go { color: var(--gold-l); }
.visit-dl { margin-top: 26px; border-top: 1px solid var(--line); }
.visit-dl > div { display: flex; flex-wrap: wrap; gap: 8px 24px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.visit-dl dt { min-width: 130px; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-d); padding-top: 2px; }
.visit-dl dd { margin: 0; color: var(--navy); font-size: 15px; font-weight: 600; line-height: 1.55; }
.visit-dl .sub { color: var(--muted); font-weight: 500; }
.nf { padding-block: clamp(64px, 10vw, 140px); text-align: center; }
.nf .h-lg { max-width: 22ch; margin-inline: auto; }

/* ============================================================
   HOME PAGE CINEMATICS
   Intro curtain, chapter rail, gold cursor, film strip, split lines.
   Every effect is decorative: the page reads correctly without them.
   ============================================================ */
:root { --ag-t0: 0s; --ease-out: cubic-bezier(.16, 1, .3, 1); }

@keyframes agCurtainUp { to { transform: translateY(-101%); } }
@keyframes agCurtainDown { to { transform: translateY(101%); } }
@keyframes agSeam { 0% { transform: scaleX(0); opacity: 0; } 22% { opacity: 1; } 100% { transform: scaleX(1); opacity: 1; } }
@keyframes agSeamOut { to { opacity: 0; } }
@keyframes agMarkIn { from { opacity: 0; transform: translateY(18px) scale(.955); filter: blur(9px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes agMarkOut { to { opacity: 0; transform: translateY(-12px) scale(1.035); filter: blur(7px); } }
/* The lockup straddles the seam, so it may only scale and fade — never move vertically. */
@keyframes agLogoIn { from { opacity: 0; transform: translate(-50%, -112%) scale(.94); filter: blur(9px); } to { opacity: 1; transform: translate(-50%, -112%) scale(1); filter: blur(0); } }
@keyframes agLogoOut { to { opacity: 0; transform: translate(-50%, -112%) scale(1.04); filter: blur(7px); } }
@keyframes agPartnerIn { from { opacity: 0; transform: translate(-50%, 0) scale(.94); filter: blur(9px); } to { opacity: 1; transform: translate(-50%, 0) scale(1); filter: blur(0); } }
@keyframes agPartnerOut { to { opacity: 0; transform: translate(-50%, 0) scale(1.04); filter: blur(7px); } }
@keyframes agKen { from { transform: scale(1.16); } to { transform: scale(1); } }
@keyframes agWipeUp { from { transform: scaleY(1); } to { transform: scaleY(0); } }
@keyframes agDraw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes agPulse { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }

/* intro curtain */
.curtain { position: fixed; inset: 0; z-index: 120; pointer-events: none; }
.curtain .half { position: absolute; left: 0; right: 0; height: 50.4%; background: var(--navy); will-change: transform; }
.curtain .half.t { top: 0; animation: agCurtainUp 1.15s cubic-bezier(.76, 0, .24, 1) 1.8s both; }
.curtain .half.b { bottom: 0; animation: agCurtainDown 1.15s cubic-bezier(.76, 0, .24, 1) 1.8s both; }
.curtain .seam { position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: linear-gradient(90deg, rgba(201, 161, 74, 0), #E9C97A 18%, #FBEFC0 50%, #E9C97A 82%, rgba(201, 161, 74, 0)); animation: agSeam .9s var(--ease-out) both, agSeamOut .4s linear 1.8s both; }
/* The portrait logo sits just above the curtain seam (offset by 112% of its own height), so
   the halves part beneath the name. */
.curtain .mark { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -112%); display: grid; place-items: center; width: min(100% - 16vmin, 720px); animation: agLogoIn .95s var(--ease-out) .1s both, agLogoOut .5s cubic-bezier(.6, 0, .9, .2) 1.62s both; }
/* Sized against both axes so it fits tall phones and short landscape screens alike. */
/* The systemized partner's lockup (ROCKSOUQ AI FZ-LLC) sits just below the seam, under the logo. */
.curtain .partner { position: absolute; top: calc(50% + clamp(16px, 2.6vh, 28px)); left: 50%; transform: translate(-50%, 0); animation: agPartnerIn .95s var(--ease-out) .3s both, agPartnerOut .5s cubic-bezier(.6, 0, .9, .2) 1.62s both; }
.curtain .partner img { display: block; width: min(36vw, 150px); height: auto; }
@media (orientation: landscape) and (max-height: 560px) { .curtain .partner img { width: auto; height: min(14vh, 56px); } }
.curtain .mark img { display: block; width: min(56vw, 240px); max-height: min(46vh, 330px); height: auto; }
@media (max-width: 480px) { .curtain .mark img { width: min(64vw, 210px); max-height: 40vh; } }
@media (orientation: landscape) and (max-height: 560px) { .curtain .mark img { width: auto; height: min(40vh, 200px); max-height: none; } }
.curtain .pct { position: absolute; right: clamp(18px, 4vw, 46px); bottom: clamp(16px, 4vw, 40px); display: flex; align-items: flex-end; gap: 4px; animation: agMarkIn .8s var(--ease-out) .2s both, agMarkOut .5s cubic-bezier(.6, 0, .9, .2) 1.62s both; }
.curtain .pct b { font-size: clamp(30px, 6vw, 68px); font-weight: 800; letter-spacing: -.05em; line-height: .85; color: rgba(233, 201, 122, .92); }
.curtain .pct i { font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: .16em; color: rgba(233, 201, 122, .5); padding-bottom: .4em; }

/* chapter rail */
.chapter-rail { position: fixed; left: clamp(12px, 1.6vw, 24px); top: 50%; transform: translateY(-50%); z-index: 55; display: none; flex-direction: column; gap: 13px; opacity: 0; transition: opacity 700ms var(--ease-out); pointer-events: none; }
.chapter-rail.on { opacity: 1; }
.chapter-rail a { display: flex; align-items: center; gap: 9px; pointer-events: auto; }
.chapter-rail .rule { display: block; width: 22px; height: 1px; background: var(--line-2); transition: width 700ms var(--ease-out), background 500ms ease; }
.chapter-rail .num { font-size: 10px; font-weight: 800; letter-spacing: .14em; color: #A79F8C; transition: color 500ms ease; }
.chapter-rail .lab { display: none; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-d); opacity: 0; transform: translateX(-6px); transition: opacity 600ms ease, transform 700ms var(--ease-out); white-space: nowrap; }
.chapter-rail a.on .rule { width: 40px; background: var(--gold); }
.chapter-rail a.on .num { color: var(--navy); }
.chapter-rail a.on .lab { opacity: 1; transform: none; }
@media (min-width: 1440px) { .chapter-rail { display: flex; } }
@media (min-width: 1700px) { .chapter-rail .lab { display: inline; } }

/* gold cursor */
/* The pointer is measured from the left in both languages (home.js), so these three are
   excluded from the right-to-left mirror (rtl:ignore, app/tools/build-rtl.sh). */
/*rtl:ignore*/
.cursor-root { position: fixed; left: 0; top: 0; width: 0; height: 0; z-index: 115; pointer-events: none; }
/*rtl:ignore*/
.cursor-ring { position: fixed; left: 0; top: 0; display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 999px; border: 1px solid rgba(201, 161, 74, .85); background: rgba(201, 161, 74, 0); opacity: 0; will-change: transform; transition: width 420ms var(--ease), height 420ms var(--ease), margin 420ms var(--ease), background 420ms var(--ease), border-color 420ms, opacity 320ms; }
/*rtl:ignore*/
.cursor-ring.on { width: 94px; height: 94px; margin: -47px 0 0 -47px; background: rgba(201, 161, 74, .94); border-color: rgba(201, 161, 74, 0); }
.cursor-ring .lab { font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--navy); opacity: 0; white-space: nowrap; transition: opacity 240ms; }
.cursor-ring.on .lab { opacity: 1; }
/*rtl:ignore*/
.cursor-dot { position: fixed; left: 0; top: 0; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; border-radius: 999px; background: var(--gold); opacity: 0; will-change: transform; transition: opacity 320ms; }
[data-agcursor] [data-cursor] { cursor: none; }

/* split-line headings */
.line-mask { display: block; overflow: hidden; padding-bottom: .12em; margin-bottom: -.12em; }
.line-in { display: block; transform: translateY(112%); opacity: 0; will-change: transform; transition: transform 1250ms var(--ease-out), opacity 900ms ease; }
.line-in.in { transform: none; opacity: 1; }
.js .eyebrow[data-reveal]::before { transform: scaleX(0); transform-origin: left; transition: transform 1000ms var(--ease-out) 200ms; }
.js .eyebrow[data-reveal="in"]::before { transform: scaleX(1); }

/* section seams */
.seam-line { position: absolute; top: 0; left: 0; right: 0; height: 1px; z-index: 2; background: linear-gradient(90deg, rgba(201, 161, 74, 0), var(--gold), rgba(201, 161, 74, 0)); transform: scaleX(0); transition: transform 1300ms var(--ease); }
.seam-line[data-seam="in"] { transform: scaleX(1); }

/* hero: ken burns reveal, timed off the curtain */
.ken { position: absolute; inset: 0; animation: agKen 2.1s var(--ease) both; animation-delay: calc(var(--ag-t0) + .5s); }
.wipe { position: absolute; inset: 0; z-index: 2; background: var(--navy); transform-origin: top; animation: agWipeUp 1.15s cubic-bezier(.76, 0, .24, 1) both; animation-delay: calc(var(--ag-t0) + .5s); }
.wipe .edge { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, rgba(201, 161, 74, 0), #F2D994, rgba(201, 161, 74, 0)); }
.pg-home .hero .eyebrow { animation: agFade .85s var(--ease) both; animation-delay: var(--ag-t0); }
.pg-home .hero .eyebrow::before { transform-origin: left; animation: agDraw .9s var(--ease) both; animation-delay: calc(var(--ag-t0) + .2s); }
.pg-home .hero .rise { animation-delay: calc(var(--ag-t0) + .12s); }
.pg-home .hero .rise.r2 { animation-delay: calc(var(--ag-t0) + .26s); }
.pg-home .hero .r3 { animation-delay: calc(var(--ag-t0) + .42s); }
.pg-home .hero .hero-row { animation-delay: calc(var(--ag-t0) + .66s); }
.pg-home .hero .hero-visual { animation-delay: calc(var(--ag-t0) + .5s); }

/* hover zoom on card imagery */
[data-zoom] { position: absolute; inset: 0; display: block; transition: transform 950ms var(--ease); will-change: transform; }
[data-zoomer]:hover [data-zoom] { transform: scale(1.07); }

/* the process film strip */
.film { position: relative; aspect-ratio: 4 / 5; max-height: 70vh; overflow: hidden; background: var(--sand); border: 1px solid var(--line); }
.film-frame { position: absolute; inset: 0; opacity: 0; will-change: opacity, transform; }
.film-frame.first { opacity: 1; }
.film-tag { position: absolute; left: 16px; top: 16px; z-index: 3; display: flex; align-items: center; gap: 9px; padding: 7px 12px; background: rgba(10, 26, 63, .9); border: 1px solid rgba(201, 161, 74, .45); }
.film-tag .pulse { width: 6px; height: 6px; border-radius: 999px; background: var(--gold-l); animation: agPulse 2.4s ease-in-out infinite; }
.film-tag .scene { font-size: 10.5px; font-weight: 800; letter-spacing: .16em; color: var(--gold-l); }
.film-scrub { position: absolute; left: 16px; right: 16px; bottom: 70px; z-index: 3; height: 2px; background: rgba(10, 26, 63, .16); }
.film-scrub span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--gold), #F2D994); }
/* The film strip lives on /about-us, and these two rules exist only to serve it. Scoped to
   .pg-home they would also hit the marketplace home's step cards, where specificity (0,2,0)
   beats .top-gold (0,1,0) and would dim a gold border that nothing ever lights: the home
   page's driver (site.js [data-steps]) toggles .on on the layers and dots, never the cards. */
.pg-about .step-card { border-top: 2px solid rgba(201, 161, 74, .25); transition: border-top-color 400ms, background 400ms, box-shadow 400ms; }
.pg-about .step-card.on { border-top-color: var(--gold); background: #FFFDF7; box-shadow: 0 30px 54px -40px rgba(10, 26, 63, .8); }

/* The hero visual runs edge to edge, while the copy, the floating cards and the USP row
   stay on the 1260px column. A clip from CMS → Site images plays here when one is set. */
.hero .hero-visual + .wrap { padding-top: 0; }
.hero-clip { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; }
.hero-floats { position: absolute; inset: 0; width: min(100% - var(--pad) * 2, 1196px); margin-inline: auto; pointer-events: none; }
.hero-floats .float { pointer-events: auto; }

@media (prefers-reduced-motion: reduce) {
  .curtain, .cursor-root { display: none !important; }
  .line-in { transform: none; opacity: 1; }
  .seam-line { transform: scaleX(1); }
  .film-frame { opacity: 1; }
}

/* ---------- client logo rails (two rows, opposite directions, draggable) ---------- */
.logo-rails { margin-top: clamp(18px, 2.4vw, 30px); display: grid; gap: 12px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.logo-rail { overflow: hidden; touch-action: pan-y; }
.js .logo-rail { cursor: grab; }
.js .logo-rail.dragging { cursor: grabbing; }
.logo-track { display: flex; gap: 12px; width: max-content; will-change: transform; }
.logo-track > a { display: block; flex: none; }
.logo-tile { position: relative; display: flex; align-items: center; justify-content: center; width: 170px; height: 78px; flex: none; background: #fff; border: 1px solid var(--line); overflow: hidden; }
.logo-tile img { max-width: 100%; max-height: 100%; padding: 12px; object-fit: contain; -webkit-user-drag: none; user-select: none; pointer-events: none; }
.logo-tile .ph { font-size: 10.5px; gap: 4px; padding: 8px; background: #fff; }
.logo-tile .ph img { width: 20px; padding: 0; }
.logo-track > a:hover .logo-tile { border-color: var(--gold); }

/* ---------- quotation lane (home marketplace) ----------
   A schematic of what comparing quotations looks like, not a listing of real ones.
   The caption beside it says so; do not remove it. */
.lane { margin-top: clamp(24px, 3vw, 34px); display: grid; gap: 10px; }
.lane-card { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; padding: 16px 18px; background: #fff; border: 1px solid var(--line); border-left: 2px solid var(--gold); }
.lane-card .kicker { flex: none; min-width: 106px; }
/* The basis keeps the three fields on one rhythm; sized to content they would stagger. */
.lane-card .f { flex: 1 1 92px; min-width: 92px; display: grid; gap: 6px; }
.lane-card .f span { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.lane-card .f i { display: block; width: 100%; height: 2px; background: var(--line); }
.lane-cap { margin-top: 12px; max-width: 44ch; color: var(--muted); font-size: 12.5px; line-height: 1.55; }

/* ---------- scrollbars ----------
   This site's signature is a gold hairline on a pale ground — the curtain seam, .seam-line,
   the short rule that precedes every .eyebrow — and --gold-grad, a dark-to-light-to-dark
   bevel that reads as a machined brass bar. The scrollbar is drawn as exactly that: a brass
   bar running in a recessed channel, square-ended like every other edge here, so a
   scrollable row looks designed rather than like an operating-system control.

   Two mechanisms, because no single one covers every browser:
   - scrollbar-width / scrollbar-color are the standard properties (Firefox, Safari 18+,
     Chrome 121+). They only accept two flat colours, so they carry the brand but not the
     bevel. scrollbar-width is NOT inherited, which is why the universal selector is doing
     real work here: :root alone would style the page scrollbar and nothing else.
   - ::-webkit-scrollbar gives the bevel and the channel in Chrome, Edge and Safari.

   [data-snap] rails keep their own `display: none` (line ~262) and stay bare: those are
   driven by arrow buttons and a drag cursor, so a bar underneath would be a second control
   for the same job. Attribute specificity (0,1,1) beats the universal rule (0,0,1), so that
   stays true wherever these rules sit in the file. */
* { scrollbar-width: thin; scrollbar-color: var(--gold-d) var(--sand); }

*::-webkit-scrollbar { width: 12px; height: 12px; background: var(--sand); }
/* Chrome on Windows draws stepper arrows at both ends by default; they are the single
   biggest reason a styled row still reads as a system widget. */
*::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
*::-webkit-scrollbar-corner { background: var(--sand); }
*::-webkit-scrollbar-track { background: var(--sand); }
/* The lip of the channel: one hairline on the inner edge, matching .seam-line's weight. */
*::-webkit-scrollbar-track:horizontal { box-shadow: inset 0 1px 0 var(--line-2); }
*::-webkit-scrollbar-track:vertical { box-shadow: inset 1px 0 0 var(--line-2); }
/* The transparent border is what keeps the brass bar a 4px hairline inside a 12px channel;
   background-clip stops the gradient painting under it. Pressing it thickens the bar. */
*::-webkit-scrollbar-thumb { background: var(--gold-grad); background-clip: padding-box; border: 4px solid transparent; }
*::-webkit-scrollbar-thumb:hover { background: linear-gradient(100deg, #C9A14A, #FBEFC0 50%, #C9A14A); background-clip: padding-box; border-width: 3px; }
*::-webkit-scrollbar-thumb:active { background: linear-gradient(100deg, #8C6326, #E9C97A 50%, #8C6326); background-clip: padding-box; border-width: 2px; }

/* Navy surfaces: the channel becomes the recess, the brass stays brass. Defensive today —
   the dark sections do not scroll — but a dark table or rail would otherwise cut an ivory
   groove through a navy band. */
.dark, .site-footer { scrollbar-color: var(--gold) var(--navy-2); }
.dark::-webkit-scrollbar, .dark *::-webkit-scrollbar,
.site-footer::-webkit-scrollbar, .site-footer *::-webkit-scrollbar { background: var(--navy-2); }
.dark::-webkit-scrollbar-track, .dark *::-webkit-scrollbar-track,
.site-footer::-webkit-scrollbar-track, .site-footer *::-webkit-scrollbar-track { background: var(--navy-2); box-shadow: none; }
.dark::-webkit-scrollbar-corner, .dark *::-webkit-scrollbar-corner,
.site-footer::-webkit-scrollbar-corner, .site-footer *::-webkit-scrollbar-corner { background: var(--navy-2); }

/* ---------- catalogue search (partials/search.php) ----------
   Suggestions hang under the bar as a white panel, whatever the bar sits on. */
.mkt-search { position: relative; }
.mkt-search input[type="search"] { -webkit-appearance: none; appearance: none; }
.mkt-search input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
.mkt-search .btn svg { margin-inline-end: -2px; }
.suggest { position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 30; max-height: min(440px, 64vh); overflow-y: auto; overscroll-behavior: contain; padding: 6px; border-radius: 8px; background: #fff; border: 1px solid var(--line); box-shadow: 0 28px 56px -22px rgba(6, 16, 41, .55); text-align: start; }
.suggest .sg { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 7px 10px; border-radius: 6px; color: var(--ink); }
.suggest .sg:hover, .suggest .sg[aria-selected="true"] { background: var(--ivory); color: var(--navy); }
.suggest .pic { flex: none; width: 46px; height: 46px; overflow: hidden; border-radius: 6px; background: var(--sand); border: 1px solid var(--line); }
.suggest .pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.suggest .tx { display: grid; gap: 2px; min-width: 0; }
.suggest .nm { overflow: hidden; color: var(--navy); font-size: 14px; font-weight: 700; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.suggest .dp { color: var(--muted); font-size: 12px; }
/* Not .tag: the global .tag is an absolutely positioned badge (see README, "The .tag trap"). */
.suggest .kind { flex: none; padding: 3px 8px; border-radius: 999px; background: var(--ivory); border: 1px solid var(--line); color: var(--gold-d); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.suggest .sg-dept + .sg-item { margin-top: 4px; }
.suggest .sg-all { justify-content: space-between; margin-top: 4px; border-top: 1px solid var(--line); border-radius: 0 0 6px 6px; color: var(--gold-d); }
.suggest .sg-all .nm { color: var(--gold-d); font-size: 13px; }
.suggest .sg-none { padding: 10px; color: var(--muted); font-size: 13.5px; line-height: 1.5; }
/* On /search the bar sits in the dark page hero, which clips by default. */
.page-hero.is-search { overflow: visible; z-index: 3; }
.search-grid .mkt-search { margin-top: 0; }

/* ---------- home: personalised trophies ----------
   The brief shortcut in a panel of its own: navy like the hero, a photo on the right with a
   brass name plate over it. The names on the plate change (site.js, [data-rotate]) because
   "engraved per recipient" is the point, and one name would read as a stock photo. */
.mkt-pz { --r: 12px; position: relative; isolation: isolate; overflow: hidden; margin-top: 14px; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); border-radius: var(--r);
  background: radial-gradient(620px 340px at 0% 100%, rgba(201, 161, 74, .2), rgba(201, 161, 74, 0) 64%), linear-gradient(120deg, var(--midnight), var(--navy) 62%); }
.mkt-pz-in { align-self: center; padding: clamp(24px, 3vw, 44px); }
.mkt-pz-h { color: #fff; font-size: clamp(1.6rem, 1.05rem + 2vw, 2.55rem); line-height: 1.08; font-weight: 800; letter-spacing: -.03em; }
.mkt-pz-h .script { font-size: 1.18em; line-height: .9; letter-spacing: 0; }
.mkt-pz-sub { margin-top: 13px; max-width: 54ch; color: var(--mist); font-size: 14.5px; line-height: 1.6; }
.mkt-brief .sel { flex: 0 1 200px; }
.mkt-brief .q { flex-basis: 140px; }
.mkt-pz-pic { position: relative; min-height: 340px; background: var(--midnight); }
.mkt-pz-pic img.fill { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.mkt-pz-pic .ph { position: absolute; inset: 0; }
.mkt-pz-pic .veil { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, var(--navy) 0%, rgba(10, 26, 63, .4) 22%, rgba(10, 26, 63, 0) 48%), linear-gradient(0deg, rgba(6, 16, 41, .6), rgba(6, 16, 41, 0) 46%); }
.mkt-plate { position: absolute; left: 50%; bottom: clamp(18px, 3vw, 32px); transform: translateX(-50%); width: min(80%, 310px); padding: 15px 18px 13px; display: grid; justify-items: center; gap: 2px; text-align: center; border-radius: 3px; color: #2E2210;
  background: linear-gradient(100deg, #9A7230, #E4C274 30%, #F7E6AE 50%, #D7B05C 68%, #9A7230);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -2px 0 rgba(90, 60, 20, .35), 0 20px 34px -14px rgba(0, 0, 0, .75); }
.mkt-plate::before { content: ""; position: absolute; inset: 5px; border: 1px solid rgba(46, 34, 16, .32); border-radius: 2px; pointer-events: none; }
.mkt-plate .k { font-size: 9.5px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: rgba(46, 34, 16, .78); }
.mkt-plate .n { font-family: "Great Vibes", cursive; font-size: clamp(1.5rem, 1.15rem + 1vw, 1.95rem); line-height: 1.2; text-shadow: 0 1px 0 rgba(255, 255, 255, .4); transition: opacity 360ms var(--ease), transform 360ms var(--ease); }
.mkt-plate .n.out { opacity: 0; transform: translateY(5px); }
.mkt-plate .ar { font-size: 12.5px; font-weight: 700; color: rgba(46, 34, 16, .82); }
/* One column from the same width the hero stacks at; any narrower and the brief bar's
   button drops to a second line beside the photo. */
@media (max-width: 1080px) {
  .mkt-pz { grid-template-columns: minmax(0, 1fr); }
  .mkt-pz-pic { min-height: 0; aspect-ratio: 16 / 10; }
  .mkt-pz-pic .veil { background: linear-gradient(180deg, var(--navy) 0%, rgba(10, 26, 63, 0) 26%), linear-gradient(0deg, rgba(6, 16, 41, .6), rgba(6, 16, 41, 0) 46%); }
}
@media (max-width: 560px) {
  .mkt-brief .sel { flex: 1 1 100%; }
}

/* ---------- image protection (lib/protect.php) ----------
   Only when the server set <html data-protect>: an exempt address never gets any of it.
   Text stays selectable and every form works, so a buyer — or an assistant working for
   one — can still read, copy and send. */
[data-protect] img, [data-protect] video { -webkit-user-drag: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
/* The watermark on product photos: the portrait logo,
   centred and translucent, drawn over the photo by CSS so the image files stay clean and the
   CMS shows them without it. White with a fine navy edge reads on the light studio
   backgrounds, the dark boxes and clear crystal alike. It sits under a card's badge (z-index)
   and never takes a click. */
[data-watermark] .wmk::after { content: ""; position: absolute; inset: 0; background: url(/assets/brand/portrait-white.svg) center / 36% auto no-repeat; opacity: .55; filter: drop-shadow(0 0 1.5px rgba(10, 26, 63, .55)); pointer-events: none; }
[data-watermark] .pd-stage .wmk::after { background-size: 30% auto; }
@media print {
  [data-protect] img, [data-protect] video, [data-protect] svg image { visibility: hidden !important; }
  [data-protect] body::before { content: "Images are not printed from this site. See every piece at thegulfawards.com."; display: block; margin-bottom: 16px; padding: 12px 14px; border: 1px solid #C9A14A; font: 600 13px/1.5 Montserrat, Arial, sans-serif; color: #0A1A3F; }
}

/* ---------- phone fields (partials/phone.php) ----------
   The box keeps the look of the input it stands in for (.inp in a form, .inline-inp in a
   one-line form) and carries the country code inside it on the left. Without JavaScript the
   select shows as it is; with it, a "+971" chip sits over the same, invisible select. */
.tel { display: flex; align-items: stretch; min-width: 0; padding: 0 !important; }
.tel-cc { position: relative; flex: none; display: flex; align-items: center; }
.tel-cc select { height: 100%; max-width: 150px; padding: 0 6px 0 12px; border: 0; background: transparent; font: inherit; font-size: 13.5px; color: inherit; outline: none; cursor: pointer; }
.tel-cc select option { color: var(--ink); background: #fff; }
.tel-code, .tel-chev { display: none; }
.tel.tel-js .tel-cc { gap: 3px; padding: 0 8px 0 11px; border-inline-end: 1px solid rgba(201, 161, 74, .38); }
.tel.tel-js .tel-cc select { position: absolute; inset: 0; width: 100%; max-width: none; padding: 0; opacity: 0; }
.tel.tel-js .tel-code { display: block; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.tel.tel-js .tel-chev { display: flex; color: var(--gold-d); }
.tel-cc:has(select:focus-visible) { box-shadow: inset 0 0 0 2px var(--gold-l); }
.tel input { flex: 1; min-width: 0; height: 100%; padding: 0 10px; border: 0; background: transparent; font: inherit; font-size: 15px; color: inherit; outline: none; }
.tel input::placeholder { color: var(--muted); opacity: .75; }
.inp.tel:focus-within { outline: 2px solid var(--gold-l); outline-offset: 1px; }
.form-light .inp.tel:focus-within { border-color: var(--navy); outline: 2px solid rgba(201, 161, 74, .45); }
.inline-inp.tel .tel-chev { color: var(--gold-l); }
.inline-inp.tel input { padding: 0 12px; }
.inline-inp.tel input::placeholder { color: var(--mist-2); opacity: 1; }
/* The gifting calendar: email and WhatsApp side by side, then the button. */
.inline-row.has-wa { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) auto; gap: 0; }
.inline-row.has-wa > .inline-inp + .inline-inp { border-inline-start: 1px solid rgba(201, 161, 74, .3); }
.inline-row.has-wa .btn { margin-inline-start: 8px; }
@media (max-width: 640px) {
  .inline-row.has-wa { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .inline-row.has-wa > .inline-inp + .inline-inp { border-inline-start: 0; border-top: 1px solid rgba(201, 161, 74, .3); }
  .inline-row.has-wa .btn { width: 100%; margin: 0; }
}

/* ---------- privacy policy and terms ---------- */
.legal { max-width: 78ch; color: var(--ink-2); font-size: 15.5px; line-height: 1.75; }
.legal .legal-meta { color: var(--muted); font-size: 13px; font-weight: 600; letter-spacing: .02em; }
.legal h2 { margin-top: 38px; color: var(--navy); font-size: clamp(1.2rem, 1.05rem + .5vw, 1.45rem); font-weight: 800; letter-spacing: -.02em; }
.legal h3 { margin-top: 22px; color: var(--navy); font-size: 15.5px; font-weight: 700; }
.legal [id] { scroll-margin-top: clamp(96px, 13vh, 130px); }
.legal p { margin-top: 10px; }
.legal ul { margin: 10px 0 0; padding-inline-start: 22px; }
.legal li + li { margin-top: 6px; }
.legal a { color: var(--gold-d); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.legal strong { color: var(--navy); }
/* The line under every form, the calendar's consent box, and the footer's legal links. */
.form-legal { grid-column: 1 / -1; margin: 0; color: var(--mist-2); font-size: 12.5px; }
.form-light .form-legal { color: var(--muted); }
.form-legal a, .inline-legal a, .inline-consent a { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.inline-legal { margin: 0; color: var(--mist-2); font-size: 12.5px; }
.inline-consent { display: flex; gap: 9px; align-items: flex-start; color: var(--mist-3); font-size: 13px; line-height: 1.5; cursor: pointer; }
.inline-consent input { flex: none; width: 17px; height: 17px; margin-top: 1px; accent-color: var(--gold); }
.site-footer .f-links { display: flex; gap: 10px; }
.site-footer .f-links a { color: var(--mist); }
.site-footer .f-cookie { padding: 0; border: 0; background: none; font: inherit; color: var(--mist); cursor: pointer; }
.site-footer .f-cookie:hover { color: var(--gold-l); }
.site-footer .f-promise a { color: var(--gold-l); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- /track ---------- */
.track-card { padding: clamp(22px, 2.6vw, 34px); }
.track-card h3 { font-size: 1.2rem; font-weight: 800; }
.track-card > .small { margin-top: 8px; font-size: 14px; }
.track-form { margin-top: 22px; }
.track-head { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: baseline; justify-content: space-between; margin-bottom: 18px; color: var(--ink-2); font-size: 14.5px; }
.track-head b { color: var(--navy); }
.track-sec .notice { margin-bottom: 18px; }
.track-list { display: grid; gap: 18px; }
.track-proj { padding: clamp(20px, 2.6vw, 32px); border-top: 2px solid var(--gold); scroll-margin-top: 120px; }
.tp-head { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: flex-start; justify-content: space-between; }
.tp-ref { font-size: clamp(1.25rem, 1.1rem + .6vw, 1.6rem); font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.tp-sub { margin-top: 5px; color: var(--muted); font-size: 13.5px; line-height: 1.5; }
.tp-pill { flex: none; padding: 6px 12px; background: var(--navy); color: var(--gold-l); font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.tp-pill.done { background: #1B7A4B; color: #fff; }
.tp-pill.closed { background: var(--sand); color: var(--muted); }
/* The stepper: a hairline behind the dots, gold up to the current stage. --at and --n come
   from the view, so the gold run is exact whatever the stage count becomes. */
.tp-steps { position: relative; list-style: none; margin: clamp(22px, 2.6vw, 30px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); }
.tp-steps::before, .tp-steps::after { content: ""; position: absolute; top: 11px; left: calc(50% / var(--n)); height: 2px; background: var(--line); }
.tp-steps::before { right: calc(50% / var(--n)); }
.tp-steps::after { width: calc((100% - 100% / var(--n)) * var(--at) / (var(--n) - 1)); background: var(--gold); }
.tp-steps li { position: relative; z-index: 1; display: grid; justify-items: center; gap: 9px; text-align: center; }
.tp-steps .dot { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--line-2); background: #fff; color: #fff; }
.tp-steps .done .dot { border-color: var(--gold); background: var(--gold); }
.tp-steps .now .dot { border-color: var(--navy); background: var(--navy); box-shadow: 0 0 0 5px rgba(201, 161, 74, .28); }
.tp-steps .lab { color: var(--muted); font-size: 12px; font-weight: 600; line-height: 1.3; }
.tp-steps .done .lab { color: var(--ink-2); }
.tp-steps .now .lab { color: var(--navy); font-weight: 800; }
.tp-now { margin-top: 18px; padding: 13px 16px; background: var(--ivory); border-left: 2px solid var(--gold); color: var(--ink-2); font-size: 14.5px; line-height: 1.6; }
.tp-now b { color: var(--navy); }
/* Documents from the team: the quotation, the mockup, the order confirmation (STAGE_DOCS). */
/* "Your piece": the catalogue piece a brief was sent from, linking back to it. */
.tp-piece { margin-top: 22px; display: grid; gap: 12px; }
.tp-piece h3 { font-size: 15px; font-weight: 800; }
.tp-piece-card { display: flex; align-items: center; gap: 16px; max-width: 620px; padding: 12px; border: 1px solid var(--line); background: #fff; color: var(--ink); transition: border-color 200ms, box-shadow 200ms; }
a.tp-piece-card:hover { border-color: var(--gold); color: var(--ink); box-shadow: 0 14px 28px -22px rgba(10, 26, 63, .45); }
.tp-piece-card .pic { position: relative; flex: none; display: flex; align-items: center; justify-content: center; width: 96px; height: 96px; overflow: hidden; background: var(--ivory); color: var(--gold-d); }
.tp-piece-card .pic img { width: 100%; height: 100%; object-fit: cover; }
.tp-piece-card .tx { flex: 1; min-width: 0; display: grid; gap: 4px; }
.tp-piece-card .cat { color: var(--gold-d); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.tp-piece-card b { color: var(--navy); font-size: 15.5px; line-height: 1.35; }
.tp-piece-card i { color: var(--muted); font-size: 13px; font-style: normal; line-height: 1.45; }
.tp-piece-card .go { display: inline-flex; align-items: center; gap: 5px; margin-top: 2px; color: var(--gold-d); font-size: 12.5px; font-weight: 700; }
a.tp-piece-card:hover .go svg { transform: translateX(3px); }
.tp-piece-card .go svg { transition: transform 200ms var(--ease); }
@media (max-width: 420px) { .tp-piece-card .pic { width: 76px; height: 76px; } .tp-piece-card { gap: 13px; } }
.tp-docs { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); display: grid; gap: 12px; }
.tp-docs h3 { font-size: 15px; font-weight: 800; }
.tp-doclist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); gap: 10px; }
.tp-doclist a { display: flex; align-items: center; gap: 12px; padding: 11px 13px; border: 1px solid var(--line); background: var(--ivory); color: var(--ink); transition: border-color 200ms; }
.tp-doclist a:hover { border-color: var(--gold); color: var(--ink); }
.tp-doclist .ic { flex: none; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; overflow: hidden; background: var(--navy); color: var(--gold-l); font-size: 11px; font-weight: 800; letter-spacing: .08em; }
.tp-doclist .ic.img { background: var(--sand); }
.tp-doclist .ic img { width: 100%; height: 100%; object-fit: cover; }
.tp-doclist .tx { flex: 1; min-width: 0; display: grid; gap: 2px; }
.tp-doclist b { color: var(--navy); font-size: 14px; }
.tp-doclist i { overflow: hidden; color: var(--muted); font-size: 12px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.tp-doclist .go { flex: none; display: inline-flex; align-items: center; gap: 5px; color: var(--gold-d); font-size: 12.5px; font-weight: 700; }
.tp-files { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); display: grid; gap: 12px; }
.tp-files-head { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; justify-content: space-between; }
.tp-files h3 { font-size: 15px; font-weight: 800; }
.tp-files h3 span { display: inline-block; margin-left: 6px; padding: 1px 8px; background: var(--ivory); border: 1px solid var(--line); color: var(--gold-d); font-size: 12px; }
.tp-thumbs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.tp-thumbs a { display: block; aspect-ratio: 1; overflow: hidden; border: 1px solid var(--line); background: var(--ivory); transition: border-color 200ms; }
.tp-thumbs a:hover { border-color: var(--gold); }
.tp-thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tp-add { display: grid; gap: 12px; }
.tp-add .form-foot { margin-top: 0; }
.track-help { margin-top: 24px; color: var(--muted); font-size: 14px; }
.track-help a { color: var(--gold-d); font-weight: 700; }
/* On a phone the six labels would crowd each other, so only the current one is written;
   the line under the stepper names the stage in full anyway. */
@media (max-width: 620px) {
  .tp-steps .lab { position: absolute; top: 34px; white-space: nowrap; opacity: 0; }
  .tp-steps .now .lab { position: static; opacity: 1; white-space: nowrap; }
  .tp-steps li:first-child.now .lab { justify-self: start; }
  .tp-steps li:last-child.now .lab { justify-self: end; }
}

/* ---------- /sitemap (views/site/sitemap.php) ---------- */
.sm-block { padding: 26px 0; border-top: 1px solid var(--line); }
.sm-block:first-child { border-top: 0; padding-top: 0; }
.sm-block h2 a { color: var(--navy); }
.sm-block h2 a:hover { color: var(--gold-d); }
.sm-note { margin-top: 8px; color: var(--muted); font-size: 14px; max-width: 70ch; }
.sm-list { margin: 16px 0 0; padding: 0; list-style: none; columns: 4 220px; column-gap: 28px; }
.sm-list li { break-inside: avoid; padding: 5px 0; font-size: 14.5px; line-height: 1.45; }
.sm-list a { color: var(--ink-2); }
.sm-list a:hover { color: var(--gold-d); text-decoration: underline; text-underline-offset: 3px; }
.sm-pages a { font-weight: 600; color: var(--navy); }
.sm-foot { margin-top: 18px; }
.sm-foot a { color: var(--gold-d); text-decoration: underline; }

/* ---------- who stands behind the site (layout.php, company() in lib/settings.php) ----------
   Both credits have the same shape: the mark in a fixed column, three lines of text beside it
   (the partner's gold label is its first line). So the two logos, the two first lines and the
   licence lines sit level. From a tablet up they use the footer's column grid (.cols), so the
   partner starts under the third column. Each logo's negative margin cancels the empty edge
   drawn into its SVG, so the mark lines up with the text above it. */
.f-credits { margin-top: clamp(18px, 2.4vw, 28px); padding-top: 22px; border-top: 1px solid rgba(201, 161, 74, .28); display: grid; align-items: start; gap: 22px clamp(20px, 2.6vw, 36px); }
.f-credit { display: grid; grid-template-columns: 136px minmax(0, 1fr); align-items: center; gap: 18px; }
.f-credit .mark img { display: block; width: 136px; height: auto; margin-inline-start: -4px; }
.f-credit .mark img.partner { margin-inline-start: -2px; }
.f-credit p { display: grid; justify-items: start; gap: 2px; font-size: 12.5px; line-height: 19px; color: var(--dim); }
.f-credit .lab { font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-l); }
.f-credit .co { color: var(--mist-3); font-weight: 600; letter-spacing: .02em; }
@media (min-width: 760px) {
  .f-credits { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .f-credit { grid-column: span 2; }
}
@media (min-width: 1080px) {
  .f-credits { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, .85fr) minmax(0, 1.15fr); }
  .f-credit + .f-credit { grid-column: 3 / -1; }
}

/* Beside the phone field on short forms: why the phone is worth giving (partials/form.php). */
.field-note { align-self: end; display: flex; gap: 9px; align-items: flex-start; margin: 0; padding: 0 0 10px; font-size: 12.5px; line-height: 1.5; color: var(--mist-2); }
.field-note svg { flex: none; margin-top: 1px; color: var(--gold-l); }
.field-note a { color: var(--gold-l); text-decoration: underline; text-underline-offset: 3px; }
.form-light .field-note { color: var(--muted); }
.form-light .field-note svg, .form-light .field-note a { color: var(--gold-d); }