/* ────────────────────────────────────────────────────────────────────────────
   Maison Lior — hero stylesheet
   ──────────────────────────────────────────────────────────────────────────── */

/* ── Hero shell ──────────────────────────────────────────────────────── */
.ml-hero{
  position:relative;
  height:100vh; min-height:680px;
  width:100%;
  overflow:hidden;
  isolation:isolate;
  transform-origin: 50% 30%;
  transform: scale(var(--hero-scale,1));
  opacity: var(--hero-opacity,1);
  will-change: transform, opacity;
  color:var(--cream);
  background:var(--mahogany-2);
}

/* Initial paper-to-transparent fade-in over the video */
.ml-hero-fadein{
  position:absolute; inset:0; z-index:5;
  background: var(--paper);
  pointer-events:none;
  animation: ml-fadein 900ms cubic-bezier(.4,.0,.2,1) both;
}
@keyframes ml-fadein{ 0%{opacity:1} 100%{opacity:0} }
.ml-hero[data-reduced="true"] .ml-hero-fadein{ animation:none; opacity:0 }

/* ── Backdrop (real video + CSS fallback scene) ─────────────────────────── */
.ml-backdrop{ position:absolute; inset:0; z-index:1; overflow:hidden; background: var(--ink); }

/* Real <video> — covers the fallback when it can play. Hidden when source
   errors so the CSS fallback shows through. */
.ml-bd-video{
  position:absolute; inset:0; z-index:2;
  width:100%; height:100%;
  object-fit: cover;
  object-position: center 35%;
  /* Poster still as a CSS background too — guarantees the chef-pouring frame
     shows even where the host can't stream the video (e.g. no Range support).
     On a normal host the decoded video paints over this. */
  background: var(--ink) url("assets/video/hero-poster.jpg") center 35% / cover no-repeat;
  pointer-events:none;
}
.ml-backdrop[data-video="fallback"] .ml-bd-video{ display:none; }

/* Drive iframe embed — used as a non-interactive backdrop. Over-scaled and
   pushed off-axis so Google's player chrome (centred play button, bottom bar)
   crops out of frame. Playback happens in the ▶ lightbox modal instead. */
.ml-bd-iframe{
  position:absolute;
  top: 50%; left: 50%;
  width: 178vh;          /* 16:9 of viewport height */
  height: 130vh;
  min-width: 130vw;
  min-height: calc(130vw * 9 / 16);
  transform: translate(-50%, -50%);
  border: 0;
  z-index: 2;
  pointer-events: none;  /* backdrop only — the ▶ button opens the modal */
  background: var(--ink);
}
@media (max-width: 768px){
  .ml-bd-iframe{ width: 178vh; height: 100vh; min-width: 178vh; }
}

/* CSS twilight-kitchen scene — always rendered, sits underneath the video */
.ml-bd-fallback{ position:absolute; inset:0; z-index:1; overflow:hidden; }
.ml-bd-base{
  position:absolute; inset:-2%;
  /* Twilight sky raking in through a kitchen window — cool navy graduating to a
     band of mist-blue near the horizon, with deepest ink pooling in the corners. */
  background:
    radial-gradient(130% 90% at 65% 30%, #4F6788 0%, #2B3C56 32%, #11203A 68%, var(--ink-2) 100%),
    linear-gradient(180deg, #1F3252 0%, #0B1322 100%);
  background-blend-mode: screen, normal;
}
.ml-bd-spill{
  position:absolute; inset:0;
  /* Cool moonlight spill from upper-left window */
  background: radial-gradient(52% 72% at 18% 10%, rgba(200,218,240,.45) 0%, rgba(140,170,210,.14) 32%, rgba(140,170,210,0) 62%);
  mix-blend-mode: screen;
}
.ml-bd-stove{
  position:absolute; inset:0;
  /* A single restrained kitchen lamp lower-right — twilight, not golden hour. */
  background: radial-gradient(40% 44% at 86% 88%, rgba(160,185,220,.42) 0%, rgba(120,141,169,.16) 38%, rgba(65,90,119,0) 70%);
  mix-blend-mode: screen;
}
.ml-bd-bokeh{ position:absolute; inset:0; width:100%; height:100%; mix-blend-mode: screen; filter: blur(.5px); }
.ml-bd-figure{ position:absolute; inset:0; width:100%; height:100%; }
.ml-bd-vignette{
  position:absolute; inset:0;
  background:
    radial-gradient(100% 70% at 50% 40%, transparent 50%, rgba(6,17,28,.65) 100%),
    linear-gradient(0deg, rgba(6,17,28,.55) 0%, rgba(6,17,28,0) 35%);
  pointer-events:none;
}
.ml-bd-readability{
  position:absolute; left:0; right:0; bottom:0; height:66%;
  background: linear-gradient(180deg, rgba(13,27,42,0) 0%, rgba(13,27,42,.40) 60%, rgba(13,27,42,.68) 100%);
  pointer-events:none;
}
/* Slow cool drift — gives the still scene a 'video' breath */
.ml-bd-drift{
  position:absolute; inset:-10%;
  background:
    radial-gradient(40% 30% at 30% 60%, rgba(190,210,235,.16), transparent 70%),
    radial-gradient(35% 25% at 75% 40%, rgba(150,175,210,.14), transparent 70%);
  mix-blend-mode: screen;
  animation: ml-drift 18s ease-in-out infinite alternate;
}
@keyframes ml-drift{
  0%   { transform: translate3d(-1.5%, -1%, 0) scale(1.02); }
  100% { transform: translate3d( 2%,    1.5%,0) scale(1.06); }
}
.ml-backdrop[data-paused="true"] .ml-bd-drift{ animation-play-state: paused; }

/* Vignette + readability overlays sit ABOVE the video (z-index 3) */
.ml-bd-vignette, .ml-bd-readability{ z-index: 3; pointer-events: none; }

/* ── Nav ──────────────────────────────────────────────────────── */
.ml-nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  transition: background-color 450ms cubic-bezier(.4,0,.2,1), border-color 450ms;
  background-color: transparent;
  border-bottom: 1px solid transparent;
}
.ml-nav[data-scrolled="true"]{
  background-color: var(--mahogany);
  border-bottom: 1px solid rgba(184,148,106,.22);
  backdrop-filter: none;
}
.ml-nav-inner{
  max-width:1480px; margin:0 auto;
  display:grid; grid-template-columns: auto 1fr auto;
  align-items:center; gap:24px;
  padding: 22px 40px;
}
.ml-brand{ display:flex; align-items:baseline; gap:14px; line-height:1; }
.ml-brand-mark{
  font-family:var(--serif); font-size:20px; letter-spacing:.02em;
  color:var(--brass); padding:6px 9px; border:1px solid rgba(184,148,106,.55);
  font-style:italic;
}
.ml-brand-word{
  font-family:var(--serif); font-size:22px; color:var(--cream);
  letter-spacing:.005em;
}
.ml-nav-divider{
  height:1px; width:100%;
  background: linear-gradient(90deg, transparent 0%, rgba(184,148,106,.55) 18%, rgba(184,148,106,.55) 82%, transparent 100%);
}
.ml-nav-links{
  list-style:none; margin:0; padding:0;
  display:flex; gap:34px;
}
.ml-nav-links a{
  display:inline-flex; gap:8px; align-items:baseline;
  font-size:13px; letter-spacing:.06em;
  color: var(--cream); opacity:.88;
  padding:6px 0;
  position:relative;
  transition: opacity 200ms, color 200ms;
}
.ml-nav-num{ font-family:var(--mono); font-size:10px; color:var(--brass); opacity:.85; }
.ml-nav-label{ font-weight:400 }
.ml-nav-links a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background: var(--brass);
  transition: right 300ms cubic-bezier(.4,0,.2,1);
}
.ml-nav-links a:hover{ opacity:1; color: var(--coral); }
.ml-nav-links a:hover::after{ right:0; }

/* ── Hero copy stage ──────────────────────────────────────────────── */
.ml-hero-stage{
  position:relative; z-index:10;
  height:100%;
  max-width:1480px; margin:0 auto;
  padding: 140px 40px 160px;
  display:flex;
}
.ml-hero--center .ml-hero-stage{ align-items:center; justify-content:center; text-align:center; }
.ml-hero--bottom-left .ml-hero-stage{ align-items:flex-end; justify-content:flex-start; text-align:left; }

.ml-hero-copy{
  max-width: 880px;
  display:flex; flex-direction:column; gap:24px;
}
.ml-hero--center .ml-hero-copy{ align-items:center; }
.ml-hero--bottom-left .ml-hero-copy{ align-items:flex-start; max-width:780px; }

/* ── Eyebrow ──────────────────────────────────────────────────── */
.ml-eyebrow{
  margin:0;
  font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color: var(--brass);
  font-weight:500;
  display:inline-flex; align-items:center; gap:14px;
  opacity:0; transform: translateY(8px);
  animation: ml-rise 700ms cubic-bezier(.4,0,.2,1) both;
  animation-delay: var(--d, 200ms);
}
.ml-eyebrow-tick{
  display:inline-block; width:28px; height:1px; background:var(--brass);
}
.ml-hero--center .ml-eyebrow{ justify-content:center; }

/* ── Headline ─────────────────────────────────────────────────── */
.ml-headline{
  margin:0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(40px, 7.2vw, 92px);
  line-height: 1.02;
  letter-spacing: -0.012em;
  color: var(--cream);
  text-wrap: balance;
}
.ml-word-wrap{
  display:inline-block; overflow:hidden; padding-bottom:.06em; line-height:1.02;
}
.ml-word{
  display:inline-block;
  opacity:0; transform: translateY(14px);
  animation: ml-rise 900ms cubic-bezier(.2,.6,.2,1) both;
  animation-delay: var(--d, 0ms);
}
.ml-word.is-italic{
  font-style: italic;
  color: var(--coral);
  font-feature-settings: "ss01" on, "ss02" on;
}
@keyframes ml-rise{
  0%   { opacity:0; transform: translateY(14px); }
  100% { opacity:1; transform: translateY(0); }
}
[data-reduced="true"] .ml-word,
[data-reduced="true"] .ml-eyebrow,
[data-reduced="true"] .ml-subline,
[data-reduced="true"] .ml-cta-row{
  animation: none !important;
  opacity:1 !important; transform:none !important;
}

/* ── Subline ─────────────────────────────────────────────────── */
.ml-subline{
  margin:0;
  font-size: 18px; line-height: 1.55;
  max-width: 580px;
  color: rgba(245,235,221,.72);
  font-weight: 300;
  text-wrap: pretty;
  opacity:0; transform: translateY(8px);
  animation: ml-rise 800ms cubic-bezier(.4,0,.2,1) both;
  animation-delay: var(--d, 800ms);
}

/* ── CTAs ───────────────────────────────────────────────────── */
.ml-cta-row{
  display:flex; gap:18px; align-items:center;
  margin-top: 14px;
  opacity:0; transform: translateY(8px);
  animation: ml-rise 800ms cubic-bezier(.4,0,.2,1) both;
  animation-delay: var(--d, 1000ms);
}
.ml-cta{
  position:relative;
  display:inline-flex; align-items:center; gap:14px;
  padding: 16px 26px;
  font-size: 13px; letter-spacing: .12em; text-transform: uppercase;
  font-weight: 500;
  border-radius:0;                   /* sharp corners — editorial, not webby */
  transition: background-color 300ms cubic-bezier(.4,0,.2,1),
              color 300ms,
              border-color 300ms;
}
.ml-cta--primary{
  background: var(--mist);
  color: var(--ink);
  border:1px solid var(--mist);
}
.ml-cta--primary:hover{
  background: var(--steel);
  color: var(--paper);
  border-color: var(--steel);
}
.ml-cta--ghost{
  background: transparent;
  color: var(--paper);
  border:1px solid rgba(224,225,221,.55);
}
.ml-cta--ghost:hover{
  border-color: var(--mist);
  color: var(--mist);
}
.ml-cta-arrow{
  display:inline-flex; transition: transform 300ms cubic-bezier(.4,0,.2,1);
}
.ml-cta:hover .ml-cta-arrow{ transform: translateX(4px); }
.ml-cta-underline{
  position:absolute; left:26px; right:100%; bottom:9px; height:1px;
  background: currentColor; opacity:.0;
  transition: right 360ms cubic-bezier(.4,0,.2,1), opacity 360ms;
}
.ml-cta--ghost .ml-cta-underline{ background: var(--brass); }
.ml-cta:hover .ml-cta-underline{ right: 26px; opacity:.9; }

/* ── Corner detail clusters ────────────────────────────────────────── */
.ml-corner{
  position:absolute; z-index:20;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em;
  color: var(--brass); opacity:.78;
  text-transform:uppercase;
}
.ml-corner--tl{ left:40px; top: calc(22px + 64px); }   /* tucked under nav */
.ml-corner--tr{ right:40px; top: calc(22px + 64px); }
.ml-corner--bl{ left:40px; bottom: 78px; }
.ml-corner--br{ right:40px; bottom: 78px; }
@media (max-width:900px){
  .ml-corner--tl, .ml-corner--tr{ display:none; }
}

/* Mute / pause cluster */
.ml-mute-cluster{
  display:inline-flex; align-items:center; gap:14px;
  color: var(--brass);
}
.ml-mute{
  width:34px; height:34px; border:1px solid rgba(184,148,106,.45);
  display:inline-flex; align-items:center; justify-content:center;
  color: var(--brass);
  transition: color 200ms, border-color 200ms, background-color 200ms;
}
.ml-mute:hover{ color: var(--coral); border-color: var(--coral); }
.ml-mute-rule{ width:24px; height:1px; background: var(--brass); opacity:.55; }
.ml-mute-meta{ font-family:var(--mono); font-size:10px; letter-spacing:.16em; }

/* ── Scroll cue ──────────────────────────────────────────────── */
.ml-scroll-cue{
  position:absolute; left:50%; bottom: 28px; transform: translateX(-50%);
  z-index:20;
  display:flex; flex-direction:column; align-items:center; gap:12px;
  color: var(--cream); opacity:.85;
  pointer-events:none;
}
.ml-scroll-label{
  font-size:10px; letter-spacing:.32em; text-transform:uppercase;
  color: var(--brass);
}
.ml-scroll-line{
  position:relative; width:1px; height:56px;
  background: rgba(245,235,221,.18);
  overflow:hidden;
}
.ml-scroll-line-fill{
  position:absolute; left:0; top:-100%; width:100%; height:60%;
  background: linear-gradient(180deg, transparent 0%, var(--mist) 50%, var(--paper) 100%);
  animation: ml-scrollline 2.4s cubic-bezier(.6,0,.4,1) infinite;
}
@keyframes ml-scrollline{
  0%   { top:-60%; }
  100% { top:120%; }
}
[data-reduced="true"] .ml-scroll-line-fill{ animation:none; top:30%; opacity:.6; }

/* Below-the-fold section — cool paper light surface */
.ml-next{
  position:relative; z-index:3;
  background: var(--paper);
  color: var(--ink);
  padding: 120px 40px 140px;
}
.ml-next-inner{
  max-width:1480px; margin:0 auto;
  display:grid; grid-template-columns: 1fr 1.4fr; gap:80px; align-items:start;
}
.ml-next-eyebrow{
  font-family:var(--sans); font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color: var(--steel); margin:0 0 18px;
  display:flex; align-items:center; gap:14px;
}
.ml-next-eyebrow::before{ content:""; width:28px; height:1px; background: var(--steel); }
.ml-next h2{
  font-family:var(--serif); font-weight:400;
  font-size: clamp(34px, 4.4vw, 56px); line-height:1.06;
  margin:0; color: var(--ink);
  letter-spacing: -.01em;
  text-wrap: balance;
}
.ml-next h2 em{ color: var(--steel); }
.ml-next p{
  font-size: 17px; line-height: 1.7; color: rgba(13,27,42,.74);
  font-weight: 400;
  max-width: 60ch;
}
.ml-next-meta{
  margin-top:32px; display:flex; gap:48px; flex-wrap:wrap;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color: var(--steel);
}
.ml-next-meta div span{ display:block; color: var(--ink); font-family:var(--serif); font-size:22px; letter-spacing:0; text-transform:none; margin-top:4px; }

/* Signatures list */
.ml-signatures{
  max-width:1480px; margin: 100px auto 0;
  padding-top: 56px;
  border-top: 1px solid rgba(13,27,42,.12);
}
.ml-sig-list{
  list-style:none; margin: 28px 0 0; padding:0;
  display:grid; grid-template-columns: repeat(2, 1fr); gap: 0;
}
.ml-sig-list li{
  display:grid; grid-template-columns: auto 1fr auto; align-items:baseline;
  gap: 22px;
  padding: 22px 0;
  border-top: 1px solid rgba(13,27,42,.10);
  transition: padding-left 320ms cubic-bezier(.4,0,.2,1), color 320ms;
}
.ml-sig-list li:nth-child(odd){ padding-right: 40px; }
.ml-sig-list li:nth-child(even){ padding-left: 40px; border-left: 1px solid rgba(13,27,42,.10); }
.ml-sig-list li:hover{ padding-left: 12px; }
.ml-sig-list li:nth-child(even):hover{ padding-left: 52px; }
.ml-sig-num{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em;
  color: var(--steel); padding-top: 4px;
}
.ml-sig-name{
  font-family: var(--serif); font-size: clamp(22px, 2.6vw, 32px); line-height:1.1;
  color: var(--ink); font-weight:400;
}
.ml-sig-tag{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color: var(--steel);
}
@media (max-width:900px){
  .ml-sig-list{ grid-template-columns: 1fr; }
  .ml-sig-list li:nth-child(odd){ padding-right: 0; }
  .ml-sig-list li:nth-child(even){ padding-left: 0; border-left: 0; }
  .ml-sig-list li:nth-child(even):hover{ padding-left: 12px; }
}
@media (max-width:900px){
  .ml-next-inner{ grid-template-columns: 1fr; gap:32px; }
}

/* ════════════════════════════════════════════════════════════════════════════
   CONTACT — pale stone surface, editorial split (meta left / form right)
   ════════════════════════════════════════════════════════════════════════════ */
.ml-contact{
  background: var(--paper);
  color: var(--ink);
  padding: 140px 40px 80px;
  position:relative;
}
.ml-contact-inner{ max-width: 1280px; margin: 0 auto; }
.ml-contact-head{
  display:flex; flex-direction:column; align-items:flex-start; gap:22px;
  max-width: 760px; margin: 0 0 80px;
}
.ml-contact-h{
  margin:0;
  font-family: var(--serif); font-weight:400;
  font-size: clamp(36px, 4.4vw, 56px); line-height: 1.05;
  letter-spacing:-.012em; color: var(--ink);
  text-wrap: balance;
}
.ml-contact-h em{ color: var(--steel); font-style: italic; }
.ml-contact-sub{
  margin:0;
  max-width: 56ch;
  font-size: 17px; line-height: 1.65;
  color: rgba(13,27,42,.72);
}

/* Two-column grid */
.ml-contact-grid{
  display:grid; grid-template-columns: 1fr 1.4fr; gap: 80px;
  align-items: start;
}

/* Studio meta column */
.ml-contact-meta{
  display:flex; flex-direction:column; gap: 28px;
  padding-top: 6px;
}
.ml-contact-row{
  display:flex; flex-direction:column; gap: 6px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(13,27,42,.10);
}
.ml-contact-row:last-child{ border-bottom: 0; }
.ml-contact-key{
  margin:0;
  font-family: var(--mono); font-size: 10.5px; letter-spacing:.18em;
  color: var(--steel); text-transform: uppercase;
}
.ml-contact-val{
  margin:0;
  font-family: var(--serif); font-size: 19px; line-height: 1.35;
  color: var(--ink); letter-spacing: 0;
  border-bottom: 1px solid transparent;
  align-self: flex-start;
  transition: border-color 280ms cubic-bezier(.4,0,.2,1), color 280ms;
}
a.ml-contact-val:hover{ color: var(--steel); border-bottom-color: var(--steel); }
.ml-contact-val--static{ color: rgba(13,27,42,.78); font-size: 16px; line-height: 1.55; }

/* Form */
.ml-contact-form{
  display:grid; grid-template-columns: 1fr 1fr; gap: 28px 28px;
}
.ml-field{ display:flex; flex-direction:column; gap: 8px; }
.ml-field--full{ grid-column: 1 / -1; }
.ml-field label{
  font-family: var(--mono); font-size: 10.5px; letter-spacing:.18em;
  color: var(--steel); text-transform: uppercase;
}
.ml-field input,
.ml-field textarea,
.ml-select select{
  appearance: none; -webkit-appearance: none;
  background: transparent;
  color: var(--ink);
  border: 0; border-bottom: 1px solid rgba(13,27,42,.20);
  font-family: var(--serif); font-size: 19px; line-height: 1.45;
  padding: 10px 0 12px;
  border-radius: 0;
  transition: border-color 280ms cubic-bezier(.4,0,.2,1);
  width: 100%;
}
.ml-field input:focus,
.ml-field textarea:focus,
.ml-select select:focus{
  outline: none;
  border-bottom-color: var(--steel);
}
.ml-field input::placeholder,
.ml-field textarea::placeholder{ color: rgba(13,27,42,.35); }

.ml-field textarea{
  resize: vertical;
  min-height: 132px;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  padding-top: 12px;
}

/* Custom-styled select */
.ml-select{ position: relative; }
.ml-select select{
  padding-right: 28px;
  cursor: pointer;
}
.ml-select-caret{
  position: absolute; right: 0; bottom: 18px;
  color: var(--steel);
  pointer-events: none;
}

.ml-field--submit{
  display:flex; align-items:center; gap: 24px;
  margin-top: 18px;
}
.ml-contact-note{
  margin: 0;
  font-family: var(--mono); font-size: 10.5px; letter-spacing:.14em;
  color: rgba(13,27,42,.50); text-transform: uppercase;
}

/* Footer strip */
.ml-contact-foot{
  margin-top: 100px;
  padding-top: 28px;
  border-top: 1px solid rgba(13,27,42,.12);
  display:flex; flex-wrap: wrap; align-items:center; gap: 18px;
  justify-content: space-between;
}
.ml-contact-foot-rule{ display:none; }
.ml-contact-foot-label{
  margin:0;
  font-family: var(--serif); font-size: 16px; color: var(--ink); letter-spacing: 0;
}
.ml-contact-foot-meta{
  margin:0;
  font-family: var(--mono); font-size: 10.5px; letter-spacing:.18em;
  color: var(--steel); text-transform: uppercase;
}

@media (max-width: 980px){
  .ml-contact{ padding: 80px 22px 60px; }
  .ml-contact-head{ margin-bottom: 48px; }
  .ml-contact-grid{ grid-template-columns: 1fr; gap: 48px; }
  .ml-contact-form{ grid-template-columns: 1fr; gap: 22px; }
  .ml-field--submit{ flex-direction: column; align-items: flex-start; gap: 14px; }
}

/* ── Tweaks UI tweaks ──────────────────────────────────────────── */
.tweaks-panel{ font-family: var(--sans); }

/* ════════════════════════════════════════════════════════════════════════════
   SERVICES — pale stone backdrop, sticky left column, expandable cards
   ════════════════════════════════════════════════════════════════════════════ */
.ml-services{
  background: var(--paper);
  color: var(--ink);
  padding: 160px 40px 180px;
  position:relative;
}
.ml-services-inner{
  max-width: 1480px; margin: 0 auto;
  display:grid; grid-template-columns: 40fr 60fr; gap: 80px;
  align-items: start;
}
.ml-services-aside{
  position:relative;
}
.ml-services-sticky{
  position: sticky; top: 120px;
  display:flex; flex-direction:column; gap:20px;
}
.ml-services-h{
  font-family: var(--serif); font-weight:400;
  font-size: clamp(36px, 4.2vw, 56px); line-height: 1.05;
  letter-spacing: -.012em;
  color: var(--ink); margin:0;
  text-wrap: balance;
}
.ml-services-h em{ color: var(--steel); font-style: italic; }
.ml-services-sub{
  font-size: 17px; line-height: 1.6;
  color: rgba(13,27,42,.72);
  max-width: 38ch;
  margin: 4px 0 0;
}
.ml-services-meta{
  margin-top: 32px; padding-top:28px; border-top:1px solid rgba(13,27,42,.12);
  display:flex; flex-direction:column; gap:22px;
}
.ml-stat{
  display:grid; grid-template-columns: 36px 1fr; gap: 16px;
  align-items: baseline;
}
.ml-stat-num{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color: var(--steel);
  padding-top: 8px;
}
.ml-stat-body{
  display:flex; flex-direction:column; gap: 4px;
}
.ml-stat-val{
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(26px, 2.6vw, 32px); line-height: 1.05;
  color: var(--ink); letter-spacing: -.005em;
}
.ml-stat-label{
  font-size: 14px; line-height: 1.5;
  color: rgba(13,27,42,.65);
  max-width: 32ch;
}

/* Service cards */
.ml-services-list{ display:flex; flex-direction:column; }
.ml-svc{
  cursor: pointer;
  border-top:1px solid rgba(65,90,119,.25);
  padding: 28px 0;
  transition: background-color 320ms cubic-bezier(.4,0,.2,1), padding 320ms;
  opacity:0; transform: translateY(20px);
  animation: ml-rise 700ms cubic-bezier(.4,0,.2,1) both;
  animation-delay: var(--d, 0ms);
}
.ml-services[data-reduced="true"] .ml-svc{ animation: none; opacity:1; transform:none; }
.ml-services-list .ml-svc:last-child{ border-bottom:1px solid rgba(65,90,119,.25); }
.ml-svc:hover{
  background: linear-gradient(90deg, rgba(65,90,119,.04) 0%, rgba(65,90,119,0) 100%);
  padding-left: 14px; padding-right: 14px;
}
.ml-svc-head{
  display:grid; grid-template-columns: 56px 1fr 28px; gap: 22px;
  align-items: start;
}
.ml-svc-num{
  font-family:var(--mono); font-size:13px; letter-spacing:.14em;
  color: var(--steel); padding-top: 8px;
  transition: color 320ms;
}
.ml-svc:hover .ml-svc-num,
.ml-svc.is-open .ml-svc-num{ color: var(--mist); }
.ml-svc-title{
  font-family:var(--serif); font-weight:400;
  font-size: clamp(22px, 2.2vw, 28px); line-height:1.15;
  margin: 4px 0 8px; color: var(--ink); letter-spacing:-.005em;
}
.ml-svc-blurb{
  font-size: 16px; line-height: 1.6; max-width: 56ch;
  color: rgba(13,27,42,.78); margin:0;
}
.ml-svc-arrow{
  display:inline-flex; align-items:center; justify-content:center;
  color: var(--steel);
  opacity: 0; transform: translateX(-6px);
  transition: opacity 300ms, transform 300ms, color 300ms;
  padding-top: 12px;
}
.ml-svc:hover .ml-svc-arrow,
.ml-svc.is-open .ml-svc-arrow{ opacity:1; transform: translateX(0); }
.ml-svc.is-open .ml-svc-arrow{ color: var(--mist); }

.ml-svc-detail{
  display:grid; grid-template-rows: 0fr;
  transition: grid-template-rows 360ms cubic-bezier(.4,0,.2,1);
  overflow:hidden;
}
.ml-svc.is-open .ml-svc-detail{ grid-template-rows: 1fr; }
.ml-svc-detail-inner{ min-height:0; overflow:hidden; }
.ml-svc-detail-inner ul{
  list-style:none; padding: 16px 0 4px; margin:0;
  display:grid; grid-template-columns: 1fr 1fr; gap: 10px 28px;
  max-width: 64ch;
}
.ml-svc-detail-inner li{
  font-size: 14.5px; line-height: 1.55;
  color: rgba(13,27,42,.62);
  display:flex; gap:10px;
}
.ml-svc-bullet{ color: var(--steel); }

@media (max-width: 980px){
  .ml-services{ padding: 80px 22px 100px; }
  .ml-services-inner{ grid-template-columns: 1fr; gap: 40px; }
  .ml-services-sticky{ position: static; }
  .ml-services-h{ font-size: 36px; }
  .ml-svc-head{ grid-template-columns: 40px 1fr 24px; gap: 14px; padding-top:16px; padding-bottom:16px; min-height:44px; }
  .ml-svc-detail-inner ul{ grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════════════════════
   PORTFOLIO — midnight-blue surface, alternating image/text project cards
   ════════════════════════════════════════════════════════════════════════════ */
.ml-portfolio{
  background: var(--navy);
  color: var(--paper);
  padding: 160px 40px 160px;
  position:relative;
  overflow:hidden;
}
.ml-portfolio-inner{
  max-width: 1400px; margin: 0 auto;
  position:relative; z-index:1;
}
.ml-portfolio-head{
  display:flex; flex-direction:column; align-items:center; gap: 22px;
  text-align:center; max-width: 820px; margin: 0 auto 110px;
}
.ml-portfolio-h{
  margin:0;
  font-family: var(--serif); font-weight:400;
  font-size: clamp(36px, 4.4vw, 56px); line-height: 1.05;
  letter-spacing: -.012em; color: var(--paper);
  text-wrap: balance;
}
.ml-portfolio-sub{
  margin:0;
  max-width: 580px;
  font-size: 16px; line-height: 1.65;
  color: rgba(224,225,221,.62);
}

.ml-portfolio-list{
  display:flex; flex-direction:column; gap: 140px;
}

/* One project — image left, copy right (alternates) */
.ml-prj{
  display:grid; grid-template-columns: 1.05fr 1fr; gap: 80px; align-items:center;
  opacity:0; transform: translateY(28px);
  animation: ml-rise 800ms cubic-bezier(.4,0,.2,1) both;
  animation-delay: var(--d, 0ms);
}
.ml-portfolio[data-reduced="true"] .ml-prj{ animation:none; opacity:1; transform:none; }
.ml-prj.is-reversed{ direction: rtl; }
.ml-prj.is-reversed > *{ direction: ltr; }

/* Image cell */
.ml-prj-image{
  position:relative;
  aspect-ratio: 4 / 5;
  background: var(--ink);
  border: 1px solid rgba(119,141,169,.18);
}
.ml-prj-image image-slot{
  position:absolute; inset:0;
}
/* Production <picture> — sits above image-slot. If src 404s, parent hides → image-slot shows. */
.ml-prj-pic{
  position:absolute; inset:0; z-index:1;
  display:block; width:100%; height:100%;
}
.ml-prj-pic img{
  width:100%; height:100%; object-fit: cover; display:block;
  background: var(--ink);
}
.ml-prj-image-tag{
  position:absolute; left: 16px; bottom: 16px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing:.18em;
  color: var(--mist); text-transform: uppercase;
  background: rgba(13,27,42,.75);
  padding: 6px 10px;
  pointer-events:none;
}

/* Copy cell */
.ml-prj-copy{ max-width: 520px; }
.ml-prj-meta-top{
  display:flex; align-items:center; gap: 14px;
  margin-bottom: 26px;
}
.ml-prj-num{
  font-family: var(--mono); font-size: 11px; letter-spacing:.18em;
  color: var(--mist); text-transform: uppercase;
}
.ml-prj-rule{
  width: 28px; height: 1px; background: var(--mist); opacity:.6;
}
.ml-prj-type{
  font-family: var(--mono); font-size: 10.5px; letter-spacing:.18em;
  color: var(--mist); text-transform: uppercase;
}

.ml-prj-name{
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(32px, 3.6vw, 48px); line-height: 1.04;
  letter-spacing: -.012em;
  color: var(--paper); margin: 0 0 14px;
  text-wrap: balance;
}
.ml-prj-place{
  display:inline-flex; gap: 8px; align-items:baseline;
  font-family: var(--serif); font-style: italic;
  font-size: 17px; color: var(--mist);
  margin: 0 0 26px;
}
.ml-prj-place .dot{ opacity:.6 }

.ml-prj-blurb{
  font-size: 16px; line-height: 1.7;
  color: rgba(224,225,221,.78);
  margin: 0 0 30px;
  max-width: 52ch;
}

/* Role / signature spec list */
.ml-prj-spec{
  margin: 0; padding: 24px 0 0;
  border-top: 1px solid rgba(119,141,169,.2);
  display:grid; grid-template-columns: 1fr 1.2fr; gap: 28px;
}
.ml-prj-spec > div{ display:flex; flex-direction:column; gap: 6px; }
.ml-prj-spec dt{
  font-family: var(--mono); font-size: 10.5px; letter-spacing:.18em;
  color: var(--mist); text-transform: uppercase; margin:0;
}
.ml-prj-spec dd{
  font-family: var(--serif); font-size: 17px;
  color: var(--paper); margin: 0; letter-spacing: 0;
}

.ml-portfolio-foot{
  margin: 140px auto 0;
  max-width: 1400px;
  display:flex; align-items:center; gap: 22px;
  justify-content: center;
}
.ml-portfolio-foot-rule{
  width: 56px; height: 1px; background: var(--mist); opacity:.5;
}
.ml-portfolio-foot-label{
  font-family: var(--mono); font-size: 10.5px; letter-spacing:.18em;
  color: var(--mist); text-transform: uppercase;
}

@media (max-width: 980px){
  .ml-portfolio{ padding: 80px 22px; }
  .ml-portfolio-head{ margin-bottom: 64px; }
  .ml-portfolio-list{ gap: 80px; }
  .ml-prj{ grid-template-columns: 1fr; gap: 32px; }
  .ml-prj.is-reversed{ direction: ltr; }
  .ml-prj-image{ aspect-ratio: 16/11; }
  .ml-prj-name{ font-size: 30px; }
  .ml-portfolio-foot{ margin-top: 80px; }
}

/* ════════════════════════════════════════════════════════════════════════════
   BRANDS — dark navy break, monochrome logo grid, testimonial strip
   ════════════════════════════════════════════════════════════════════════════ */
.ml-brands{
  position:relative;
  background: var(--ink);
  color: var(--paper);
  padding: 140px 40px 140px;
  overflow:hidden;
}
.ml-brands-noise{
  position:absolute; inset:0; pointer-events:none; opacity:.03;
  background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScyMjAnIGhlaWdodD0nMjIwJz48ZmlsdGVyIGlkPSduJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nLjg1JyBudW1PY3RhdmVzPScyJyBzdGl0Y2hUaWxlcz0nc3RpdGNoJy8+PGZlQ29sb3JNYXRyaXggdmFsdWVzPScwIDAgMCAwIC40NyAgMCAwIDAgMCAuNTUgIDAgMCAwIDAgLjY2ICAwIDAgMCAxIDAnLz48L2ZpbHRlcj48cmVjdCB3aWR0aD0nMTAwJScgaGVpZ2h0PScxMDAlJyBmaWx0ZXI9J3VybCgjbiknLz48L3N2Zz4=");
}
.ml-brands-inner{
  position:relative; z-index:1;
  max-width: 1280px; margin: 0 auto;
}
.ml-brands-head{
  text-align:center; display:flex; flex-direction:column; align-items:center; gap: 22px;
  max-width: 880px; margin: 0 auto 90px;
}
.ml-brands-eyebrow{
  margin:0;
  font-size: 12px; letter-spacing:.2em; text-transform:uppercase;
  color: var(--mist); font-weight: 500;
  display:inline-flex; align-items:center; gap:14px;
}
.ml-brands-eyebrow::before, .ml-brands-eyebrow::after{
  content:""; width:24px; height:1px; background: var(--mist); opacity:.6;
}
.ml-brands-h{
  margin:0;
  font-family: var(--serif); font-weight:400;
  font-size: clamp(36px, 4.4vw, 56px); line-height: 1.05;
  letter-spacing:-.012em; color: var(--paper);
  text-wrap: balance;
}
.ml-brands-h em{ color: var(--mist); font-style: italic; }
.ml-brands-sub{
  margin:0;
  max-width: 560px;
  font-size: 16px; line-height: 1.65;
  color: rgba(224,225,221,.60);
}

/* Logo grid */
.ml-logo-grid{
  display:grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid rgba(119,141,169,.15);
}
.ml-logo-cell{
  position:relative;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap: 14px;
  height: 200px;
  border-bottom: 1px solid rgba(119,141,169,.15);
  border-right: 1px solid rgba(119,141,169,.15);
  padding: 28px;
  opacity:0; transform: translateY(14px);
  animation: ml-rise 700ms cubic-bezier(.4,0,.2,1) both;
  animation-delay: var(--d, 0ms);
}
.ml-brands[data-reduced="true"] .ml-logo-cell{ animation:none; opacity:1; transform:none; }
.ml-logo-cell:nth-child(4n){ border-right: 0; }
.ml-logo-slot{
  position:relative;
  width: 200px; height: 80px;
  display:flex; align-items:center; justify-content:center;
  opacity:.6; transition: opacity 220ms ease;
}
.ml-logo-cell:hover .ml-logo-slot{ opacity:1; }
/* image-slot fills the cell; the placeholder shows underneath when empty */
.ml-logo-slot image-slot{
  position:absolute; inset:0;
  --slot-bg: transparent;
}
.ml-logo-slot image-slot::part{ background:transparent; }

/* Production <img> — overlays the slot. Falls through to the slot/placeholder if missing. */
.ml-logo-img{
  position:absolute; inset:0; z-index:2;
  width:100%; height:100%;
  object-fit: contain;
  filter: brightness(0) invert(1);   /* force any colour wordmark to pale-stone monochrome */
}
.ml-logo-placeholder{
  position:relative; z-index:0;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  color: var(--paper);
  pointer-events:none;
}
.ml-logo-cell:has(image-slot[data-filled]) .ml-logo-placeholder{ display:none; }
.ml-logo-mark{
  font-family: var(--serif); font-size: 36px; font-style: italic;
  letter-spacing: 0; color: var(--paper); opacity:.85;
}
.ml-logo-rule{
  width: 56px; height: 1px; background: var(--mist); opacity:.55;
}
.ml-logo-meta{
  display:flex; gap:8px; align-items:center;
  font-family: var(--mono); font-size: 10.5px; letter-spacing:.14em; text-transform: uppercase;
  color: var(--mist); opacity:0;
  transform: translateY(4px);
  transition: opacity 220ms ease, transform 220ms ease;
}
.ml-logo-meta .dot{ opacity:.6; }
.ml-logo-cell:hover .ml-logo-meta{ opacity:1; transform: translateY(0); }
.ml-logo-cell::after{
  content:""; position:absolute; left:50%; bottom: 32px;
  width: 0; height: 1px; background: var(--mist);
  transition: width 280ms cubic-bezier(.4,0,.2,1), left 280ms;
}
.ml-logo-cell:hover::after{ width: 56px; left: calc(50% - 28px); }

/* Wordmark placeholder — when no logo SVG is dropped, render the partner name
   in editorial italic. Replaces the bare numeric placeholder. */
.ml-logo-wordmark{
  font-family: var(--serif);
  font-style: normal;
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: -.005em;
  color: var(--paper);
  opacity: .92;
  text-align: center;
  text-wrap: balance;
  max-width: 180px;
  padding: 0 8px;
}

/* Accolades — single-row strip of recognition + year.
   Sits between the logo grid and the testimonial carousel. */
.ml-accolades{
  display:flex; flex-wrap: wrap; justify-content: center;
  margin: 90px auto 0;
  max-width: 1100px;
  gap: 0;
  border-top: 1px solid rgba(119,141,169,.18);
}
.ml-accolade{
  flex: 1 1 240px;
  display:flex; flex-direction:column; gap: 8px;
  padding: 28px 22px;
  border-right: 1px solid rgba(119,141,169,.18);
  border-bottom: 1px solid rgba(119,141,169,.18);
  min-width: 0;
}
.ml-accolade:last-child{ border-right: 0; }
.ml-accolade-yr{
  font-family: var(--mono); font-size: 10.5px; letter-spacing:.18em;
  text-transform: uppercase; color: var(--mist);
}
.ml-accolade-label{
  font-family: var(--serif); font-size: 18px; line-height: 1.3;
  color: var(--paper); letter-spacing: -.005em;
  text-wrap: balance;
}
@media (max-width: 980px){
  .ml-accolade{ flex: 1 1 50%; }
  .ml-accolade:nth-child(2n){ border-right: 0; }
}
@media (max-width: 560px){
  .ml-accolade{ flex: 1 1 100%; border-right: 0; }
}

/* Testimonial strip */
.ml-quotes{
  margin: 110px auto 0;
  max-width: 880px;
  text-align: center;
  position:relative;
}
.ml-quotes-track{
  position:relative; min-height: 200px;
}
.ml-quote{
  position:absolute; inset:0;
  margin:0;
  display:flex; flex-direction:column; align-items:center; gap: 22px;
  opacity: 0; pointer-events:none;
  transition: opacity 600ms ease;
}
.ml-quote.is-active{ opacity:1; pointer-events:auto; }
.ml-quote-text{
  font-family: var(--serif); font-style: italic;
  font-size: clamp(20px, 2vw, 26px); line-height: 1.4;
  color: var(--paper);
  margin: 0; text-wrap: balance;
  max-width: 38ch;
}
.ml-quote-attr{
  display:inline-flex; gap:10px; align-items:center;
  font-family: var(--sans); font-size: 11px; letter-spacing:.18em; text-transform: uppercase;
  color: var(--mist);
}
.ml-quote-attr .sep{ opacity:.45 }
.ml-quotes-nav{
  display:flex; justify-content:center; gap: 14px;
  margin-top: 36px;
}
.ml-quote-dot{
  font-family: var(--mono); font-size: 10.5px; letter-spacing:.14em;
  color: var(--mist); opacity:.45;
  padding: 6px 0; min-width: 28px;
  border-bottom: 1px solid transparent;
  transition: opacity 200ms, border-color 200ms, color 200ms;
}
.ml-quote-dot:hover{ opacity:.85; }
.ml-quote-dot.is-active{ opacity: 1; color: var(--paper); border-bottom-color: var(--mist); }

/* CTA + flourish */
.ml-brands-cta{
  margin-top: 110px;
  display:flex; flex-direction:column; align-items:center; gap: 36px;
}
.ml-cta--ghost-onnavy{
  position:relative;
  display:inline-flex; align-items:center; gap: 14px;
  padding: 16px 26px;
  font-size: 13px; letter-spacing: .12em; text-transform: uppercase;
  font-weight: 500;
  background: transparent;
  color: var(--paper);
  border: 1px solid rgba(119,141,169,.55);
  transition: border-color 300ms, color 300ms, background-color 300ms;
}
.ml-cta--ghost-onnavy:hover{
  border-color: var(--mist); color: var(--mist);
  background: rgba(119,141,169,.06);
}
.ml-cta--ghost-onnavy .ml-cta-arrow{ display:inline-flex; transition: transform 300ms; }
.ml-cta--ghost-onnavy:hover .ml-cta-arrow{ transform: translateX(4px); }
.ml-brands-flourish{
  width: 40px; height: 1px; background: var(--mist); opacity:.6;
}

@media (max-width: 980px){
  .ml-brands{ padding: 80px 22px; }
  .ml-brands-head{ margin-bottom: 56px; }
  .ml-logo-grid{ grid-template-columns: repeat(3, 1fr); }
  .ml-logo-cell:nth-child(4n){ border-right: 1px solid rgba(119,141,169,.15); }
  .ml-logo-cell:nth-child(3n){ border-right: 0; }
  .ml-quotes{ margin-top: 70px; }
}
@media (max-width: 640px){
  .ml-logo-grid{ grid-template-columns: repeat(2, 1fr); }
  .ml-logo-cell{ height: 160px; padding: 18px; }
  .ml-logo-cell:nth-child(3n){ border-right: 1px solid rgba(119,141,169,.15); }
  .ml-logo-cell:nth-child(2n){ border-right: 0; }
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 420px){
  .ml-headline{ font-size:32px; }
  .ml-subline{ font-size:14px; }
  .ml-hero-stage{ padding: 100px 18px 120px; }
  .ml-logo-grid{ grid-template-columns: repeat(2,1fr); }
  .ml-accolade{ flex:1 1 100%; border-right:0; }
}
@media (max-width: 760px){
  .ml-nav-inner{ padding: 16px 22px; grid-template-columns: auto 1fr auto; gap:14px; }
  .ml-brand-word{ display:none; }
  .ml-nav-divider{ display:none; }
  .ml-nav-links{ gap:18px; }
  .ml-nav-links a .ml-nav-num{ display:none; }
  .ml-nav-links a{ font-size:11px; }

  .ml-hero-stage{ padding: 110px 22px 140px; }
  .ml-headline{ font-size: 40px; line-height:1.04; }
  .ml-subline{ font-size: 15px; }
  .ml-cta-row{ flex-direction:column; align-items:stretch; width:100%; gap:12px; }
  .ml-cta{ justify-content:space-between; }

  .ml-corner--bl{ display:none; }
  .ml-corner--br{ left:22px; right:22px; bottom: 90px; display:flex; justify-content:space-between; }
  .ml-scroll-cue{ bottom: 18px; }
}

/* ════════════════════════════════════════════════════════════════════════════
   CREATIONS — product gallery, editorial masonry of drop-in image slots
   ════════════════════════════════════════════════════════════════════════════ */
.ml-creations{
  background:var(--ink); color:var(--paper);
  padding:140px 40px;
  position:relative; overflow:hidden;
  border-top:1px solid rgba(119,141,169,.12);
}
.ml-creations-inner{ max-width:1400px; margin:0 auto; position:relative; z-index:1; }
.ml-creations-head{
  display:flex; flex-direction:column; align-items:center; gap:22px;
  text-align:center; max-width:820px; margin:0 auto 80px;
}
.ml-creations-h{
  margin:0;
  font-family:var(--serif); font-weight:400;
  font-size:clamp(34px,4.4vw,56px); line-height:1.05; letter-spacing:-.012em;
  color:var(--paper); text-wrap:balance;
}
.ml-creations-h em{ color:var(--gold); font-style:italic; }
.ml-creations-sub{
  margin:0; max-width:560px;
  font-size:16px; line-height:1.65; color:rgba(224,225,221,.62);
}

/* Masonry-ish grid via dense auto-flow + spanning tiles */
.ml-creations-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  grid-auto-rows:200px;
  grid-auto-flow:dense;
  gap:14px;
}
.ml-cr-tile{
  margin:0;
  display:flex; flex-direction:column;
  opacity:0; transform:translateY(18px);
  animation:ml-rise 700ms cubic-bezier(.4,0,.2,1) both;
  animation-delay:var(--d,0ms);
}
.ml-creations[data-reduced="true"] .ml-cr-tile{ animation:none; opacity:1; transform:none; }
.ml-cr-tile--reg{  grid-row:span 1; grid-column:span 1; }
.ml-cr-tile--tall{ grid-row:span 2; grid-column:span 1; }
.ml-cr-tile--wide{ grid-row:span 1; grid-column:span 2; }

.ml-cr-media{
  position:relative; flex:1;
  border:1px solid rgba(119,141,169,.18);
  background:var(--navy);
  overflow:hidden;
}
.ml-cr-media image-slot{ position:absolute; inset:0; }
.ml-cr-tag{
  position:absolute; left:12px; top:12px; z-index:1;
  font-family:var(--mono); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--paper);
  background:rgba(13,27,42,.7);
  padding:5px 9px;
  pointer-events:none;
}
.ml-cr-cap{
  padding:12px 2px 0;
  font-family:var(--serif); font-size:17px; line-height:1.2;
  color:var(--paper); letter-spacing:-.005em;
}

.ml-creations-foot{
  margin-top:64px;
  display:flex; align-items:center; justify-content:center; gap:18px;
}
.ml-creations-foot-rule{ width:48px; height:1px; background:var(--mist); opacity:.5; }
.ml-creations-foot-label{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--mist);
}

@media (max-width: 900px){
  .ml-creations{ padding:80px 22px; }
  .ml-creations-head{ margin-bottom:48px; }
  .ml-creations-grid{ grid-template-columns:repeat(2,1fr); grid-auto-rows:160px; }
  .ml-cr-tile--wide{ grid-column:span 2; }
  .ml-cr-tile--tall{ grid-row:span 2; grid-column:span 1; }
}
@media (max-width: 520px){
  .ml-creations-grid{ grid-template-columns:repeat(2,1fr); grid-auto-rows:140px; gap:10px; }
  .ml-cr-tile--wide{ grid-column:span 2; }
}

/* ════════════════════════════════════════════════════════════════════════════
   LEAD-GEN ADDITIONS — gold CTA, hamburger nav, glance cards, testimonials,
   sticky WhatsApp
   ════════════════════════════════════════════════════════════════════════════ */

/* Gold (saffron) CTA — warm accent for lead-gen actions on the cool palette */
.ml-cta--gold{
  position:relative;
  display:inline-flex; align-items:center; gap:14px;
  padding:16px 26px;
  font-size:13px; letter-spacing:.12em; text-transform:uppercase; font-weight:500;
  background: var(--gold);
  color:#fff;
  border:1px solid var(--gold);
  border-radius:0;
  transition: background-color 300ms cubic-bezier(.4,0,.2,1), border-color 300ms;
}
.ml-cta--gold:hover{ background: var(--gold-deep); border-color: var(--gold-deep); }
.ml-cta--gold .ml-cta-arrow{ display:inline-flex; transition: transform 300ms; }
.ml-cta--gold:hover .ml-cta-arrow{ transform: translateX(4px); }
.ml-cta--gold .ml-cta-underline{ display:none; }

/* Nav "Free Consultation" pill + hamburger */
.ml-nav-cta-li{ display:flex; align-items:center; }
.ml-nav-cta{
  display:inline-flex; align-items:center;
  padding:9px 16px;
  font-size:12px; letter-spacing:.1em; text-transform:uppercase; font-weight:500;
  background:var(--gold); color:#fff !important;
  border:1px solid var(--gold);
  transition: background-color 240ms, border-color 240ms;
}
.ml-nav-cta:hover{ background:var(--gold-deep); border-color:var(--gold-deep); }
.ml-nav-cta::after{ display:none !important; }

.ml-nav-burger{
  display:none;
  width:44px; height:44px;
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
  border:1px solid rgba(224,225,221,.3);
}
.ml-nav-burger span{
  display:block; width:18px; height:1.5px; background:var(--paper);
  transition: transform 280ms cubic-bezier(.4,0,.2,1), opacity 200ms;
}
.ml-nav[data-menu="open"] .ml-nav-burger span:nth-child(1){ transform: translateY(6.5px) rotate(45deg); }
.ml-nav[data-menu="open"] .ml-nav-burger span:nth-child(2){ opacity:0; }
.ml-nav[data-menu="open"] .ml-nav-burger span:nth-child(3){ transform: translateY(-6.5px) rotate(-45deg); }

@media (max-width: 860px){
  .ml-nav-burger{ display:flex; }
  .ml-nav-inner{ grid-template-columns: auto 1fr auto; }
  .ml-nav-divider{ display:none; }
  .ml-nav-links{
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:flex-start; gap:0;
    background:var(--ink);
    border-top:1px solid rgba(119,141,169,.2);
    border-bottom:1px solid rgba(119,141,169,.2);
    padding:8px 22px 18px;
    max-height:0; overflow:hidden;
    opacity:0; pointer-events:none;
    transition: max-height 360ms cubic-bezier(.4,0,.2,1), opacity 240ms, padding 360ms;
  }
  .ml-nav[data-menu="open"] .ml-nav-links{
    max-height:380px; opacity:1; pointer-events:auto;
  }
  .ml-nav-links li{ width:100%; border-bottom:1px solid rgba(119,141,169,.12); }
  .ml-nav-links li:last-child{ border-bottom:0; }
  .ml-nav-links a{ display:flex; width:100%; padding:16px 0; font-size:15px; }
  .ml-nav-links a .ml-nav-num{ display:inline; }
  .ml-nav-cta-li{ padding-top:14px; }
  .ml-nav-cta{ width:100%; justify-content:center; padding:14px; }
}

/* Services at a Glance */
.ml-glance{
  background:var(--ink); color:var(--paper);
  padding:120px 40px;
  border-top:1px solid rgba(119,141,169,.12);
}
.ml-glance-inner{ max-width:1400px; margin:0 auto; }
.ml-glance-head{ margin-bottom:56px; max-width:680px; }
.ml-glance-h{
  margin:8px 0 0;
  font-family:var(--serif); font-weight:400;
  font-size:clamp(30px,3.6vw,46px); line-height:1.06; letter-spacing:-.012em;
  color:var(--paper); text-wrap:balance;
}
.ml-glance-h em{ color:var(--gold); font-style:italic; }
.ml-glance-grid{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(5,1fr);
  border-left:1px solid rgba(119,141,169,.15);
}
.ml-glance-card{
  padding:30px 26px;
  border-right:1px solid rgba(119,141,169,.15);
  border-top:1px solid rgba(119,141,169,.15);
  display:flex; flex-direction:column; gap:12px;
  transition: background-color 280ms;
}
.ml-glance-card:hover{ background:rgba(119,141,169,.05); }
.ml-glance-icon{
  display:inline-flex; width:40px; height:40px; color:var(--gold);
}
.ml-glance-icon svg{ width:100%; height:100%; }
.ml-glance-title{
  margin:0;
  font-family:var(--serif); font-weight:400; font-size:21px; line-height:1.15;
  color:var(--paper); letter-spacing:-.005em;
}
.ml-glance-sub{
  margin:0;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold);
}
.ml-glance-note{
  margin:0; font-size:14px; line-height:1.55; color:rgba(224,225,221,.62);
}
.ml-glance-more{
  margin-top:auto;
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--paper);
  padding-top:6px;
  transition: gap 240ms cubic-bezier(.4,0,.2,1), color 240ms;
}
.ml-glance-more svg{ color:var(--gold); transition: transform 240ms; }
.ml-glance-more:hover{ color:var(--gold); gap:12px; }
.ml-glance-more:hover svg{ transform:translateX(3px); }
@media (max-width: 1080px){
  .ml-glance-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 560px){
  .ml-glance{ padding:70px 22px; }
  .ml-glance-grid{ grid-template-columns:1fr; }
}

/* Testimonials — 3 cards */
.ml-testi{
  background:var(--paper); color:var(--ink);
  padding:120px 40px;
}
.ml-testi-inner{ max-width:1280px; margin:0 auto; }
.ml-testi-head{ margin-bottom:56px; max-width:680px; }
.ml-testi-h{
  margin:8px 0 0;
  font-family:var(--serif); font-weight:400;
  font-size:clamp(30px,3.6vw,46px); line-height:1.06; letter-spacing:-.012em;
  color:var(--ink); text-wrap:balance;
}
.ml-testi-h em{ color:var(--steel); font-style:italic; }
.ml-testi-grid{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:28px;
}
.ml-testi-card{
  position:relative;
  display:flex; flex-direction:column; gap:22px;
  padding:36px 32px 32px;
  background:#fff;
  border:1px solid rgba(13,27,42,.10);
}
.ml-testi-quote-mark{
  font-family:var(--serif); font-size:56px; line-height:.6; color:var(--gold);
  height:28px;
}
.ml-testi-quote{
  margin:0; flex:1;
  font-family:var(--serif); font-size:20px; line-height:1.45;
  color:var(--ink); letter-spacing:-.003em; text-wrap:pretty;
}
.ml-testi-attr{
  display:flex; flex-direction:column; gap:3px;
  padding-top:20px; border-top:1px solid rgba(13,27,42,.10);
}
.ml-testi-name{
  font-family:var(--sans); font-size:14px; font-weight:500; color:var(--ink);
}
.ml-testi-org{ font-size:13.5px; color:rgba(13,27,42,.62); }
.ml-testi-country{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--steel); margin-top:4px;
  display:inline-flex; align-items:center; gap:6px;
}
.ml-testi-flag{ font-size:14px; letter-spacing:0; }
@media (max-width: 900px){
  .ml-testi{ padding:70px 22px; }
  .ml-testi-grid{ grid-template-columns:1fr; gap:18px; }
}

/* Sticky WhatsApp CTA */
.ml-wa{
  position:fixed; right:20px; bottom:20px; z-index:9998;
  display:inline-flex; align-items:center; gap:10px;
  padding:13px 18px 13px 15px;
  background:var(--gold); color:#fff;
  border-radius:999px;
  box-shadow:0 8px 28px rgba(13,27,42,.35);
  transition: background-color 240ms, transform 240ms, box-shadow 240ms;
}
.ml-wa:hover{ background:var(--gold-deep); transform:translateY(-2px); box-shadow:0 12px 34px rgba(13,27,42,.42); }
.ml-wa-icon{ width:22px; height:22px; flex:none; }
.ml-wa-label{
  font-family:var(--sans); font-size:13px; font-weight:600; letter-spacing:.02em;
}
@media (max-width: 560px){
  .ml-wa{ right:16px; bottom:16px; padding:14px; }
  .ml-wa-label{ display:none; }
  .ml-wa-icon{ width:24px; height:24px; }
}

/* ═════════════════════════════════════════════════════════════════
   FROM THE ATELIER — dark editorial blog section, single featured card
   ═════════════════════════════════════════════════════════════════ */
.ml-blog{ background:var(--ink); color:var(--paper); padding:140px 40px; position:relative; }
.ml-blog-inner{ max-width:1240px; margin:0 auto; }
.ml-blog-head{ max-width:720px; margin:0 0 60px; }
.ml-blog-eyebrow{
  margin:0 0 16px; font-family:var(--mono); font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--gold); display:inline-flex; align-items:center; gap:14px;
}
.ml-blog-eyebrow::before{ content:""; width:26px; height:1px; background:var(--gold); opacity:.7; }
.ml-blog-h{
  margin:0; font-family:var(--serif); font-weight:400;
  font-size:clamp(34px,4.4vw,56px); line-height:1.05; letter-spacing:-.012em;
  color:var(--paper); text-wrap:balance;
}
.ml-blog-h em{ color:var(--gold); font-style:italic; }

.ml-blog-card{
  display:grid; grid-template-columns:1.05fr 1fr;
  border:1px solid rgba(184,148,106,.22); background:var(--navy); overflow:hidden;
  transition:border-color 380ms cubic-bezier(.4,0,.2,1), transform 380ms cubic-bezier(.4,0,.2,1);
}
.ml-blog-card:hover{ border-color:rgba(201,146,42,.55); }
.ml-blog-media{ position:relative; min-height:360px; background:var(--ink-2); overflow:hidden; }
.ml-blog-media image-slot{ position:absolute; inset:0; width:100%; height:100%; }
.ml-blog-media-ph{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(120% 100% at 72% 18%, rgba(201,146,42,.18), transparent 60%), var(--ink-2);
}
.ml-blog-media:has(image-slot[data-filled]) .ml-blog-media-ph{ display:none; }
.ml-blog-media-mark{ font-family:var(--serif); font-style:italic; font-size:90px; color:rgba(201,146,42,.5); line-height:1; }
.ml-blog-cover{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 42%; transition:transform 600ms cubic-bezier(.4,0,.2,1); }
.ml-blog-card:hover .ml-blog-cover{ transform:scale(1.04); }
.ml-blog-tag{
  position:absolute; left:18px; top:18px; z-index:1;
  font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--paper); background:rgba(13,27,42,.74); border:1px solid rgba(201,146,42,.42); padding:7px 12px;
}
.ml-blog-content{ padding:48px 50px; display:flex; flex-direction:column; }
.ml-blog-meta{
  display:flex; gap:16px; align-items:center; margin:0 0 22px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--mist);
}
.ml-blog-meta i{ width:4px; height:4px; border-radius:50%; background:var(--gold); opacity:.75; font-style:normal; }
.ml-blog-title{
  margin:0 0 18px; font-family:var(--serif); font-weight:400;
  font-size:clamp(26px,2.6vw,35px); line-height:1.12; letter-spacing:-.01em;
  color:var(--paper); text-wrap:balance;
}
.ml-blog-card:hover .ml-blog-title{ color:#fff; }
.ml-blog-desc{ margin:0 0 32px; font-size:16px; line-height:1.65; color:var(--paper-soft); max-width:48ch; }
.ml-blog-readmore{
  margin-top:auto; display:inline-flex; align-items:center; gap:12px;
  font-family:var(--sans); font-size:12px; letter-spacing:.12em; text-transform:uppercase; font-weight:500; color:var(--gold);
}
.ml-blog-readmore svg{ transition:transform 300ms; }
.ml-blog-card:hover .ml-blog-readmore svg{ transform:translateX(5px); }
.ml-blog-foot{ margin-top:40px; display:flex; align-items:center; gap:16px; }
.ml-blog-foot-rule{ width:48px; height:1px; background:var(--mist); opacity:.5; }
.ml-blog-foot-label{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--mist);
}
@media (max-width: 860px){
  .ml-blog{ padding:84px 22px; }
  .ml-blog-head{ margin-bottom:44px; }
  .ml-blog-card{ grid-template-columns:1fr; }
  .ml-blog-media{ min-height:220px; }
  .ml-blog-content{ padding:34px 28px; }
}