/*
Theme Name: Dana Prime Monument
Theme URI: https://danaprimefm.com/
Template: danaprime-nacre
Author: Dana Prime Facility Management
Description: Monument - the tier-1 rebuild of the Dana Prime site. Oversized calm typography, real photography carrying each section, stone ground, navy drawn from the company mark. Ships real page templates (hero, credential strip, client wall, named reviews, bilingual menu, event booking) rather than restyling the old ones. Child of Dana Prime Nacre, which stays installed as the rollback.
Version: 2.1.0
Requires at least: 6.4
Requires PHP: 8.0
Text Domain: danaprime-monument
*/

/* ==========================================================================
   Tokens - Monument design system, Part III of the build contract.

   Warm neutrals carry 90% of every page. Copper/gold is the primary accent
   (numbers, primary CTAs, eyebrow labels). Navy #456693 - measured off the
   real logo - appears only in mild touches: accent dashes, ghost-button
   borders, thin rules, hover states. Navy never fills large areas.

   Ink/espresso are warm browned blacks, deliberately not the cool blue-grey
   used previously: they have to sit under black-plate dish photography on a
   charcoal set without reading cold against it.
   ========================================================================== */
:root{
  --ink:#1A1310;
  --espresso:#241B15;
  --ink-soft:#2E231C;
  --graphite:#5A5049;
  --muted:#857A71;
  --paper:#FBF8F2;
  --nacre:#F2ECE3;
  --line:#E4DCD0;
  --line-2:#D2C8B9;
  --copper:#B0722F;
  --gold:#C89345;
  --navy:#456693;
  --navy-deep:#2C4E79;
  --navy-wash:#EDF1F6;

  /* Legacy aliases kept so existing rules resolve to the corrected palette. */
  --stone:var(--nacre);
  --stone-2:var(--line);
  --shell:var(--nacre);

  --wrap:1220px;
  --gut:clamp(20px,4.4vw,56px);
  --sec:clamp(56px,7.4vw,112px);
  --r:4px;
  --dur:.55s;

  /* Dish media, defined once and used by every dish surface in the theme so
     the black-plate set reads at one consistent size sitewide. Change these
     two values and every menu row and gallery card follows. */
  --dish-thumb:72px;
  --dish-card-ratio:4/5;
  --dish-card-min:240px;
}

/* ==========================================================================
   Type. Marcellus for display, Jost for text, Noto Kufi for Arabic - all
   three already served from the parent theme's own font files, so Monument
   adds no external font request.
   ========================================================================== */
.m-display,.m-h2,.m-h3,.m-quote__text,.m-course__label{
  font-family:'Marcellus',Georgia,'Times New Roman',serif;
  font-weight:400;
}
.m-scope,.m-scope input,.m-scope select,.m-scope textarea,.m-scope button{
  font-family:'Jost',system-ui,-apple-system,'Segoe UI',sans-serif;
}
.m-ar,[lang="ar"] .m-scope,html[dir="rtl"] .m-scope{
  font-family:'Noto Kufi Arabic','Jost',system-ui,sans-serif;
}

/* Dark-first ground. The generated dish set is black plates on charcoal, so
   the page continues that surface rather than cutting against it in white.
   Light bands still exist, but they are now the exception, not the base. */
.m-scope{color:#F1E9DF; background:var(--ink); line-height:1.55}
.m-scope *{box-sizing:border-box}
.m-wrap{max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut)}

.m-display{
  font-size:clamp(38px,6.4vw,86px);
  line-height:.98;
  letter-spacing:-.015em;
  margin:0 0 .34em;
  max-width:20ch;
  text-wrap:balance;
}
.m-h2{
  font-size:clamp(26px,3.4vw,40px);
  line-height:1.08;
  letter-spacing:-.014em;
  margin:0 0 .34em;
  max-width:22ch;
  text-wrap:balance;
}
.m-h3{font-size:clamp(21px,2.6vw,28px); line-height:1.22; margin:0 0 .4em}
.m-lede{
  font-size:clamp(15.5px,1.55vw,19px);
  line-height:1.75;
  color:var(--graphite);
  max-width:62ch;
  margin:0;
  font-weight:300;
}
.m-note{font-size:14.5px; color:var(--muted); max-width:62ch; margin:0}

/* Eyebrow: copper on light grounds, gold on ink, always led by a navy dash -
   the one place navy is allowed to speak on every section. */
.m-eyebrow{
  display:inline-flex; align-items:center; gap:12px;
  font-size:12px; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--copper); margin:0 0 22px;
}
.m-eyebrow::before{content:''; width:22px; height:1px; background:var(--navy); opacity:1}
.m-eyebrow .m-ar{letter-spacing:0; text-transform:none; font-size:12.5px}

/* ==========================================================================
   Sections
   ========================================================================== */
/* Sections alternate between the two warm blacks so the page has depth
   without ever leaving the dark ground. --paper is kept as a deliberate
   light "breathing" band, allowed at most once between photographic
   sections and never twice in a row. */
.m-section{padding-block:var(--sec); background:var(--ink); color:#F1E9DF}
.m-section:nth-of-type(even){background:var(--espresso)}
.m-section--ink{background:var(--ink); color:#F1E9DF}
.m-section--espresso{background:var(--espresso); color:#F1E9DF}
.m-section .m-lede,.m-section .m-note{color:rgba(251,248,242,.72)}
.m-section .m-eyebrow{color:var(--gold)}
.m-section .m-eyebrow::before{background:var(--navy); opacity:.9}
.m-section .m-h2,.m-section .m-h3{color:#FFF}

/* The rare light band. */
.m-section--paper{background:var(--paper); color:var(--ink)}
.m-section--paper .m-h2,.m-section--paper .m-h3{color:var(--ink)}
.m-section--paper .m-lede,.m-section--paper .m-note{color:var(--graphite)}
.m-section--paper .m-eyebrow{color:var(--copper)}
.m-section__head{margin-bottom:clamp(28px,3.6vw,52px)}

/* ==========================================================================
   Hero - the purehealth read: the photograph is the page, the type sits on
   it at a size that is unmistakably deliberate.
   ========================================================================== */
.m-hero{position:relative; display:grid; align-items:end; min-height:clamp(460px,72vh,780px); isolation:isolate}
.m-hero__media{position:absolute; inset:0; overflow:hidden; z-index:-2}
.m-hero__media img{width:100%; height:100%; object-fit:cover; display:block; filter:saturate(.86) contrast(1.04)}
/* Scrim per spec: 8% ink at the top so the photograph reads, ramping to 88%
   at the base so the headline always has a solid ground to sit on. */
.m-hero__scrim{
  position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg,rgba(26,19,16,.08) 0%,rgba(26,19,16,.34) 45%,rgba(26,19,16,.88) 100%);
}
.m-hero__in{padding-block:clamp(40px,6vw,86px); color:#FBF8F2}
.m-hero .m-display{color:#FFF; max-width:20ch}
.m-hero .m-lede{color:rgba(251,248,242,.86); max-width:56ch}
.m-hero .m-eyebrow{color:var(--gold)}
.m-hero .m-eyebrow::before{background:var(--gold); opacity:.9}
.m-hero--compact{min-height:clamp(320px,44vh,470px)}
.m-hero--compact .m-display{font-size:clamp(32px,4.8vw,64px); max-width:20ch}

/* Motion heroes. The clip is treated exactly like the photograph it replaces:
   same crop, same scrim, same type on top. */
.m-hero__video{
  width:100%; height:100%; object-fit:cover; display:block;
  filter:saturate(.9) contrast(1.05);
}
.m-hero--motion{min-height:clamp(520px,82vh,880px)}

/* Anyone who has asked their OS to reduce motion gets the poster frame only. */
@media (prefers-reduced-motion:reduce){
  .m-hero__video{display:none}
  .m-hero--motion .m-hero__media{
    background-size:cover; background-position:center;
  }
}

/* ---- Section variety -------------------------------------------------------
   Consecutive full-bleed sections must not read as one slide repeated, so the
   scrim strength and the text position are both per-section choices. */
.m-hero--c-light .m-hero__scrim{
  background:linear-gradient(180deg,rgba(26,19,16,.04) 0%,rgba(26,19,16,.20) 50%,rgba(26,19,16,.68) 100%);
}
.m-hero--c-heavy .m-hero__scrim{
  background:linear-gradient(180deg,rgba(26,19,16,.32) 0%,rgba(26,19,16,.56) 45%,rgba(26,19,16,.94) 100%);
}
/* A centred hero needs an even wash, not a bottom ramp, or the type floats. */
.m-hero--center .m-hero__scrim{
  background:linear-gradient(180deg,rgba(26,19,16,.46) 0%,rgba(26,19,16,.52) 50%,rgba(26,19,16,.72) 100%);
}

.m-hero--center{align-items:center; text-align:center}
.m-hero--center .m-hero__in{display:flex; flex-direction:column; align-items:center}
.m-hero--center .m-display,.m-hero--center .m-lede{margin-inline:auto}
.m-hero--center .m-actions{justify-content:center}

.m-hero--bottom-end{justify-items:end}
.m-hero--bottom-end .m-hero__in{text-align:end; margin-inline-start:auto}
.m-hero--bottom-end .m-actions{justify-content:flex-end}
.m-hero--bottom-end .m-lede{margin-inline-start:auto}

.m-hero--middle-start{align-items:center}

.m-actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:clamp(24px,3vw,36px)}
.m-btn{
  display:inline-flex; align-items:center; gap:9px;
  padding:14px 26px; border:1px solid transparent; border-radius:var(--r);
  font-size:13.5px; letter-spacing:.055em; text-transform:uppercase; text-decoration:none;
  cursor:pointer; transition:background var(--dur) ease,border-color var(--dur) ease,color var(--dur) ease;
}
/* Primary is solid gold on every ground - it is the one element on the page
   allowed to be unambiguous. Ghost carries the navy border. */
.m-btn--primary{background:var(--gold); color:#1A1310; font-weight:600}
.m-btn--primary:hover,.m-btn--primary:focus-visible{background:var(--copper); color:#FBF8F2}
.m-btn--ghost{border-color:rgba(69,102,147,.72); color:#FBF8F2}
.m-btn--ghost:hover,.m-btn--ghost:focus-visible{border-color:var(--navy); background:rgba(69,102,147,.18)}
.m-section .m-btn--ghost{border-color:var(--navy); color:var(--navy)}
.m-section .m-btn--ghost:hover{background:var(--navy-wash)}
.m-btn--wa{background:#1FA855; color:#FFF}
.m-btn--wa:hover{background:#178643}
.m-btn svg{width:17px; height:17px; flex:none}
.m-scope :focus-visible{outline:2px solid var(--navy); outline-offset:3px}

/* ==========================================================================
   Credential strip - the facts the owner has attested, given their own band
   so they are never buried inside body copy.
   ========================================================================== */
.m-trust{background:var(--ink); color:#F1E9DF}
.m-trust__list{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:0; margin:0; padding:0; list-style:none;
}
.m-trust__item{
  padding:clamp(20px,2.8vw,32px) clamp(16px,2vw,26px);
  border-inline-end:1px solid rgba(200,147,69,.22);
}
.m-trust__item:last-child{border-inline-end:0}
/* Counters are the one number on the page that must be unmissable - gold. */
.m-trust__value{
  display:block; font-family:'Marcellus',Georgia,serif; color:var(--gold);
  font-size:clamp(26px,3.2vw,42px); line-height:1; letter-spacing:-.02em; margin-bottom:9px;
}
.m-trust__label{font-size:11px; letter-spacing:.15em; text-transform:uppercase; color:rgba(251,248,242,.66)}

/* ==========================================================================
   Client wall
   ========================================================================== */
.m-clients{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(184px,1fr));
  gap:1px; background:var(--line); border:1px solid var(--line); list-style:none; margin:0; padding:0;
}
.m-client{
  background:var(--paper); padding:20px 18px; min-height:76px;
  display:flex; align-items:center; gap:12px;
  font-size:13.5px; letter-spacing:.03em; color:var(--ink-soft);
}
.m-client img{max-width:120px; max-height:38px; width:auto; height:auto; object-fit:contain}

/* ==========================================================================
   Reviews - named, never anonymised
   ========================================================================== */
.m-quotes{display:grid; gap:clamp(16px,2vw,24px); grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); list-style:none; margin:0; padding:0}
.m-quote{background:var(--paper); border:1px solid var(--line); padding:clamp(22px,2.6vw,34px)}
.m-quote--featured{grid-column:1/-1; background:var(--navy-wash); border-color:#CBD8E7}
.m-quote__text{font-size:clamp(17px,1.9vw,23px); line-height:1.42; margin:0 0 18px}
.m-quote--featured .m-quote__text{font-size:clamp(19px,2.4vw,30px); max-width:40ch}
.m-quote__who{font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--navy); margin:0}
.m-quote__stars{color:var(--navy); letter-spacing:.18em; font-size:13px; margin:0 0 14px}

/* ==========================================================================
   Menu - every dish named in both languages, because the menu is the page
   people actually came to read.
   ========================================================================== */
.m-coursenav{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:clamp(28px,3.4vw,44px); padding:0; list-style:none}
.m-coursenav a{
  display:inline-block; padding:9px 15px; border:1px solid var(--line-2); border-radius:var(--r);
  font-size:12.5px; letter-spacing:.05em; text-decoration:none; color:var(--ink-soft); background:var(--paper);
}
.m-coursenav a:hover,.m-coursenav a:focus-visible{border-color:var(--navy); color:var(--navy)}
.m-course{margin-bottom:clamp(34px,4vw,58px); scroll-margin-top:90px}
.m-course__label{display:flex; align-items:baseline; gap:14px; font-size:clamp(21px,2.5vw,30px); margin:0 0 6px}
.m-course__label .m-ar{font-size:.72em; color:var(--navy)}
.m-course__count{font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin:0 0 20px}
.m-dishes{display:grid; grid-template-columns:repeat(auto-fill,minmax(238px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); list-style:none; margin:0; padding:0}
.m-dish{background:var(--paper); padding:16px 18px}
.m-dish__en{display:block; font-size:15.5px; color:var(--ink); margin-bottom:4px}
.m-dish__ar{display:block; font-size:14px; color:var(--navy)}

/* ==========================================================================
   Booking form
   ========================================================================== */
.m-form{background:var(--paper); border:1px solid var(--line); padding:clamp(24px,3vw,40px)}
.m-form__grid{display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.m-field{display:flex; flex-direction:column; gap:7px}
.m-field--full{grid-column:1/-1}
.m-field label{font-size:11.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--graphite)}
.m-field input,.m-field select,.m-field textarea{
  padding:12px 14px; border:1px solid var(--line-2); border-radius:var(--r);
  background:var(--paper); color:var(--ink); font-size:15px;
}
.m-field input:focus,.m-field select:focus,.m-field textarea:focus{border-color:var(--navy); outline:none}
.m-field textarea{min-height:112px; resize:vertical}
.m-form__foot{display:flex; flex-wrap:wrap; align-items:center; gap:16px; margin-top:22px}
.m-form__note{font-size:12.5px; color:var(--muted); margin:0}
.m-form__status{margin:16px 0 0; font-size:14.5px}
.m-form__status--ok{color:var(--navy-deep)}
.m-form__status--err{color:#9B2C2C}

/* ==========================================================================
   Body copy inside generic pages
   ========================================================================== */
.m-prose{max-width:66ch}
.m-prose h2{font-family:'Marcellus',Georgia,serif; font-weight:400; font-size:clamp(22px,2.7vw,32px); line-height:1.16; margin:1.9em 0 .5em; letter-spacing:-.01em}
.m-prose h2:first-child{margin-top:0}
.m-prose h3{font-family:'Marcellus',Georgia,serif; font-weight:400; font-size:clamp(18px,2.1vw,23px); margin:1.6em 0 .45em}
.m-prose p{font-size:16px; line-height:1.76; color:var(--graphite); margin:0 0 1.05em}
.m-prose ul{list-style:none; padding:0; margin:1.2em 0; display:grid; gap:11px}
.m-prose li{position:relative; padding-inline-start:26px; font-size:15.5px; line-height:1.6; color:var(--ink-soft)}
.m-prose li::before{
  content:''; position:absolute; inset-inline-start:0; top:.56em;
  width:9px; height:9px; border:1.5px solid var(--navy); border-radius:50%;
}
.m-prose a{color:var(--navy-deep); text-underline-offset:3px}

/* ==========================================================================
   Split section - photograph beside the words
   ========================================================================== */
.m-split{display:grid; gap:0; align-items:stretch}
@media (min-width:900px){ .m-split{grid-template-columns:1.02fr .98fr} }
.m-split__body{padding:clamp(30px,4.2vw,68px) clamp(20px,3.2vw,56px); display:flex; flex-direction:column; justify-content:center; background:var(--paper)}
.m-split__media{position:relative; min-height:280px}
.m-split__media img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block}

/* ==========================================================================
   Navigation - seven destinations, transparent over the hero photograph,
   solid once the page scrolls past it.
   ========================================================================== */
.m-nav{
  position:sticky; top:0; z-index:60;
  background:transparent; transition:background var(--dur) ease,border-color var(--dur) ease;
  border-bottom:1px solid transparent;
}
.m-nav.is-solid{background:rgba(20,26,30,.94); border-bottom-color:rgba(255,255,255,.10); backdrop-filter:saturate(1.2) blur(10px)}
.m-nav__in{
  max-width:var(--wrap); margin-inline:auto; padding:14px var(--gut);
  display:flex; align-items:center; gap:clamp(14px,2.4vw,34px);
}
.m-nav__brand{flex:none; display:block; line-height:0}
.m-nav__brand img{width:auto; height:clamp(34px,3.4vw,46px); display:block}
.m-nav__links{display:none; flex:1; gap:clamp(12px,1.9vw,30px); align-items:center}
@media (min-width:1080px){ .m-nav__links{display:flex} }
.m-nav__links a{
  color:#F2F4F5; text-decoration:none; font-size:13.5px; letter-spacing:.055em;
  text-transform:uppercase; white-space:nowrap; padding:6px 0;
  border-bottom:1px solid transparent; transition:border-color var(--dur) ease,color var(--dur) ease;
}
.m-nav__links a:hover,.m-nav__links a:focus-visible{border-bottom-color:#F2F4F5}
.m-nav__links a[aria-current="page"]{border-bottom-color:var(--navy); color:#FFF}
.m-nav__cta{display:none; flex:none; padding:11px 20px; font-size:12.5px}
@media (min-width:1080px){ .m-nav__cta{display:inline-flex} }
.m-burger{
  margin-inline-start:auto; flex:none; width:44px; height:44px; padding:11px;
  display:flex; flex-direction:column; justify-content:space-between;
  background:none; border:1px solid rgba(242,244,245,.4); border-radius:var(--r); cursor:pointer;
}
@media (min-width:1080px){ .m-burger{display:none} }
.m-burger span{display:block; height:1.5px; background:#F2F4F5; border-radius:2px}

.m-mobile{position:fixed; inset:0; z-index:70; background:var(--ink); color:#EDEFEF; overflow-y:auto; padding:88px var(--gut) 40px}
.m-mobile[hidden]{display:none}
.m-mobile nav{display:grid; gap:2px}
.m-mobile nav a{
  display:flex; align-items:baseline; gap:16px; padding:16px 0;
  border-bottom:1px solid rgba(237,239,239,.12);
  color:#EDEFEF; text-decoration:none;
  font-family:'Marcellus',Georgia,serif; font-size:clamp(23px,6vw,34px);
}
.m-mobile nav a small{font-family:'Jost',sans-serif; font-size:11px; letter-spacing:.16em; color:var(--navy)}
.m-mobile__foot{display:flex; flex-wrap:wrap; gap:12px; margin-top:32px}
.m-mobile__foot .m-btn--ghost{border-color:rgba(237,239,239,.4); color:#EDEFEF}

/* The hero sits under the transparent bar, so it starts at the top of the page. */
.m-nav + .m-mobile + main .m-hero,
.m-nav ~ main .m-hero{margin-top:calc(-1 * (clamp(34px,3.4vw,46px) + 28px + 2px))}
.m-hero__in{padding-top:calc(clamp(34px,3.4vw,46px) + 60px)}

.skip-link{position:absolute; left:-9999px}
.skip-link:focus{left:var(--gut); top:10px; z-index:100; background:var(--paper); color:var(--ink); padding:10px 16px}

/* ==========================================================================
   Footer
   ========================================================================== */
.m-foot{background:var(--ink); color:#C7CED3; padding-block:clamp(44px,5.6vw,80px) 32px}
.m-foot__grid{display:grid; gap:clamp(28px,4vw,64px); grid-template-columns:1fr}
@media (min-width:860px){ .m-foot__grid{grid-template-columns:1.5fr 1fr 1fr} }
.m-foot__brand img{width:auto; height:52px; margin-bottom:20px}
.m-foot__line{font-size:15px; line-height:1.65; max-width:44ch; margin:0 0 14px; color:#AEB8BF}
.m-foot__certs{font-size:11.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--navy); margin:0}
.m-foot__h{font-family:'Marcellus',Georgia,serif; font-weight:400; font-size:17px; color:#EDEFEF; margin:0 0 16px}
.m-foot__nav,.m-foot__contact{display:flex; flex-direction:column; gap:11px; align-items:flex-start}
.m-foot__nav a,.m-foot__contact a{color:#C7CED3; text-decoration:none; font-size:14.5px}
.m-foot__nav a:hover,.m-foot__contact a:hover{color:#FFF; text-decoration:underline; text-underline-offset:3px}
.m-foot__addr{font-size:13.5px; color:#8E979E; margin:6px 0 0; max-width:30ch}
.m-foot__legal{
  margin:clamp(32px,4vw,56px) 0 0; padding-top:20px; border-top:1px solid rgba(237,239,239,.12);
  font-size:12.5px; color:#8E979E; display:flex; flex-wrap:wrap; gap:18px;
}
.m-foot__legal a{color:#8E979E}

/* Hero photograph fills its frame at any ratio. */
.m-hero__media picture,.m-hero__media img{display:block; width:100%; height:100%; object-fit:cover}
.m-split__media picture{position:absolute; inset:0}
.m-split__media picture img{width:100%; height:100%; object-fit:cover}

/* ==========================================================================
   RTL + reduced motion
   ========================================================================== */
html[dir="rtl"] .m-display,html[dir="rtl"] .m-h2,html[dir="rtl"] .m-lede{letter-spacing:0}
html[dir="rtl"] .m-eyebrow{letter-spacing:.08em}
@media (prefers-reduced-motion:reduce){ .m-scope *{animation:none !important; transition:none !important} }

/* ==========================================================================
   Parent-theme reconciliation. Monument owns its own templates, but pages
   still rendered by inherited templates should not look like a different
   website, so the parent's shared furniture is re-pointed at these tokens.
   ========================================================================== */
.compact-hero h1{font-size:clamp(38px,6.4vw,86px); line-height:.98; letter-spacing:-.015em; max-width:20ch}
.compact-hero .lede{font-size:clamp(15px,1.6vw,18.5px); max-width:52ch}
.compact-hero__scrim{background:linear-gradient(180deg,rgba(26,19,16,.08) 0%,rgba(26,19,16,.34) 45%,rgba(26,19,16,.88) 100%)}
.sec{padding-top:var(--sec); padding-bottom:var(--sec)}
.sec:nth-of-type(even){background:var(--paper)}
.btn--gold{background:var(--gold); color:#1A1310; border-color:var(--gold); font-weight:600}
.btn--gold:hover{background:var(--copper); color:#FBF8F2; border-color:var(--copper)}
.eyebrow--gold,.eyebrow{color:var(--copper)}

/* ==========================================================================
   Services duo - two photographic panels, text always above the image.
   ========================================================================== */
.m-duo{display:grid; grid-template-columns:repeat(2,1fr)}
.m-duo__panel{position:relative; isolation:isolate; min-height:clamp(380px,46vw,540px); display:flex; align-items:flex-end}
.m-duo__media{position:absolute; inset:0; overflow:hidden; z-index:-2}
.m-duo__media img{width:100%; height:100%; object-fit:cover; display:block; filter:saturate(.86) contrast(1.04)}
.m-duo__scrim{
  position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg,rgba(26,19,16,.10) 0%,rgba(26,19,16,.42) 50%,rgba(26,19,16,.90) 100%);
}
.m-duo__in{padding:clamp(30px,3.6vw,56px); color:#FBF8F2}
.m-duo__in .m-h2{color:#FFF; margin-bottom:.3em}
.m-duo__in .m-lede{color:rgba(251,248,242,.84); max-width:40ch}
.m-duo__link{
  display:inline-flex; align-items:center; gap:9px; margin-top:22px;
  font-size:12px; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:#FBF8F2; text-decoration:none; border-bottom:1px solid var(--navy); padding-bottom:5px;
  transition:color var(--dur) ease,border-color var(--dur) ease;
}
.m-duo__link:hover,.m-duo__link:focus-visible{color:var(--gold); border-color:var(--gold)}
@media (max-width:820px){ .m-duo{grid-template-columns:1fr} }

/* ==========================================================================
   Why Dana Prime - fact columns, figures carried in Marcellus copper.
   ========================================================================== */
.m-why__grid{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(28px,3.4vw,56px)}
.m-why__col{border-top:1px solid var(--line); padding-top:26px}
.m-why__figure{
  font-family:'Marcellus',Georgia,serif; font-weight:400;
  font-size:clamp(34px,4.2vw,52px); line-height:1; color:var(--copper);
  margin:0 0 .18em; letter-spacing:-.015em;
}
.m-why__label{
  font-size:12px; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink); margin:0 0 14px;
}
.m-why__body{font-size:15.5px; line-height:1.75; color:var(--graphite); margin:0; max-width:36ch}
@media (max-width:820px){ .m-why__grid{grid-template-columns:1fr} }

/* ==========================================================================
   Timeline - a real three-node sequence, so the markers are earned.
   ========================================================================== */
.m-timeline__list{
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(28px,3.4vw,56px);
  list-style:none; margin:0; padding:0; counter-reset:none;
}
.m-timeline__node{position:relative; padding-top:30px; border-top:1px solid var(--line-2)}
.m-timeline__node::before{
  content:''; position:absolute; inset-block-start:-5px; inset-inline-start:0;
  width:9px; height:9px; border-radius:50%; background:var(--copper);
}
.m-timeline__marker{
  font-family:'Marcellus',Georgia,serif; font-size:clamp(24px,2.8vw,34px);
  line-height:1; color:var(--copper); margin:0 0 .3em; letter-spacing:-.015em;
}
.m-timeline__body{font-size:15.5px; line-height:1.75; color:var(--graphite); margin:0; max-width:34ch}
@media (max-width:820px){ .m-timeline__list{grid-template-columns:1fr} }

/* ==========================================================================
   Dish photography - black plates on a charcoal set, so the food is the only
   colour in frame. Dishes without a generated shot keep their typographic
   row, and the menu fills in progressively as batches land.
   ========================================================================== */
.m-dish--shot{display:flex; align-items:center; gap:16px}
.m-dish__img{
  width:var(--dish-thumb); height:var(--dish-thumb); flex:none; border-radius:50%;
  object-fit:cover; background:var(--espresso);
  box-shadow:0 0 0 1px rgba(200,147,69,.28);
}
.m-section--ink .m-dish__img{box-shadow:0 0 0 1px rgba(200,147,69,.4)}

/* Gallery band (layout E) - full-bleed cards on ink. */
.m-gallery{display:grid; grid-template-columns:repeat(auto-fill,minmax(var(--dish-card-min),1fr)); gap:clamp(14px,1.6vw,22px)}
.m-gallery__card{position:relative; isolation:isolate; aspect-ratio:var(--dish-card-ratio); overflow:hidden; border-radius:var(--r); background:var(--espresso)}
.m-gallery__card img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block}
.m-gallery__cap{
  position:absolute; inset-inline:0; inset-block-end:0; z-index:1;
  padding:18px 18px 16px; color:#FBF8F2;
  background:linear-gradient(180deg,rgba(26,19,16,0) 0%,rgba(26,19,16,.86) 72%);
}
.m-gallery__en{display:block; font-family:'Marcellus',Georgia,serif; font-size:17px; line-height:1.2}
.m-gallery__ar{display:block; font-size:13px; color:rgba(251,248,242,.72); margin-top:3px}
.m-gallery__pill{
  position:absolute; inset-block-start:12px; inset-inline-start:12px; z-index:1;
  font-size:10.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  padding:5px 10px; border-radius:2px; color:#FBF8F2;
  background:rgba(69,102,147,.82);
}

/* ==========================================================================
   Dark-ground reconciliation.

   The theme flipped from a light base to the warm-black base that continues
   the black-plate photography, so every surface that previously assumed a
   light background is re-pointed here in one place rather than being edited
   in scattered rules. Anything inside an explicit .m-section--paper band
   keeps the original light treatment.
   ========================================================================== */
.m-section:not(.m-section--paper) .m-btn--ghost{border-color:rgba(69,102,147,.85); color:#FBF8F2}
.m-section:not(.m-section--paper) .m-btn--ghost:hover{background:rgba(69,102,147,.22); border-color:var(--navy)}

.m-section:not(.m-section--paper) .m-dish__en{color:#F1E9DF}
.m-section:not(.m-section--paper) .m-dish__ar{color:rgba(251,248,242,.6)}
.m-section:not(.m-section--paper) .m-course__label{color:var(--gold)}
.m-section:not(.m-section--paper) .m-course__label .m-ar{color:rgba(251,248,242,.55)}
.m-section:not(.m-section--paper) .m-course__count{color:rgba(251,248,242,.5)}
.m-section:not(.m-section--paper) .m-dish{border-color:rgba(200,147,69,.16)}

.m-section:not(.m-section--paper) .m-quote__text{color:#FBF8F2}
.m-section:not(.m-section--paper) .m-quote__who{color:var(--gold)}

.m-section:not(.m-section--paper) .m-prose{color:rgba(251,248,242,.82)}
.m-section:not(.m-section--paper) .m-prose h2,
.m-section:not(.m-section--paper) .m-prose h3{color:#FFF}
.m-section:not(.m-section--paper) .m-prose a{color:var(--gold)}

.m-why__col{border-top-color:rgba(200,147,69,.28)}
.m-section:not(.m-section--paper) .m-why__label{color:#F1E9DF}
.m-section:not(.m-section--paper) .m-why__body{color:rgba(251,248,242,.72)}
.m-timeline__node{border-top-color:rgba(200,147,69,.28)}
.m-section:not(.m-section--paper) .m-timeline__body{color:rgba(251,248,242,.72)}

/* Client wall reads as a records room on dark: mono marks that warm to full
   strength on hover, rather than grey logos floating on white. */
.m-section:not(.m-section--paper) .m-clients{color:rgba(251,248,242,.78)}
.m-section:not(.m-section--paper) .m-clients li{
  border-color:rgba(200,147,69,.18); background:rgba(251,248,242,.03);
}
.m-section:not(.m-section--paper) .m-clients img{filter:grayscale(1) brightness(1.9) contrast(.85); opacity:.72}
.m-section:not(.m-section--paper) .m-clients li:hover img{filter:none; opacity:1}

/* Menu category pills. */
.m-coursenav a{border-color:rgba(69,102,147,.6); color:rgba(251,248,242,.8)}
.m-coursenav a:hover,.m-coursenav a[aria-current="true"]{background:var(--gold); border-color:var(--gold); color:#1A1310}