/* Moritz Luxe : Alpine Midnight
   Realization of the active Novamira design system.
   Tokens are the single source of truth. Do not hard-code colours below :root. */

/* ---------- Faces (self-hosted, no Google Fonts link) ---------- */
@font-face{font-family:'Cormorant Garamond';src:url('fonts/cormorant-300.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Cormorant Garamond';src:url('fonts/cormorant-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Cormorant Garamond';src:url('fonts/cormorant-300-italic.woff2') format('woff2');font-weight:300;font-style:italic;font-display:swap}
@font-face{font-family:'Cormorant Garamond';src:url('fonts/cormorant-400-italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Jost';src:url('fonts/jost-300.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Jost';src:url('fonts/jost-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Jost';src:url('fonts/jost-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}

/* ---------- Tokens ---------- */
:root{
  --navy:#0E1B2E;
  --navy-lift:#152741;
  --cream:#F7F3EE;
  --ink-on-cream:#0E1B2E;
  --gold:#B8975A;
  --gold-deep:#8E7038;
  --gold-on-cream:#7A5F2E;
  --muted:#9AAABF;
  --green:#2C4A3E;

  --font-display:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --font-body:'Jost','Helvetica Neue',Arial,sans-serif;

  --wrap:1240px;
  --vw:100vw; /* replaced with the real client width by site.js */
  --gutter:24px;

  --s-xs:8px;
  --s-sm:16px;
  --s-md:32px;
  --s-lg:72px;
  --s-xl:140px;

  --fs-display:clamp(46px,6.6vw,94px);
  --fs-h2:clamp(34px,4.4vw,62px);
  --fs-h3:clamp(26px,2.9vw,40px);
  --fs-body:17px;
  --fs-small:15px;
  --fs-label:12px;

  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- Reset, neutralised so component rules always win ---------- */
:where(*,*::before,*::after){box-sizing:border-box}
:where(body,h1,h2,h3,h4,p,figure,blockquote,dl,dd,ul,ol){margin:0;padding:0}
:where(ul,ol){list-style:none}
:where(img,video,svg){display:block;max-width:100%;height:auto}
:where(a){color:inherit;text-decoration:none}
:where(button,input,select,textarea){font:inherit;color:inherit;background:none;border:0;border-radius:0}
:where(h1,h2,h3,h4){font-weight:300;letter-spacing:normal}

html{-webkit-text-size-adjust:100%;overflow-x:clip}

body.moritz-luxe{
  background:var(--navy);
  color:var(--cream);
  font-family:var(--font-body);
  font-weight:300;
  font-size:var(--fs-body);
  line-height:1.75;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

::selection{background:var(--gold);color:var(--navy)}

/* ---------- Shared container. Every section aligns to this left edge. ---------- */
.ml-wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}

/* ---------- Type primitives ---------- */
.ml-display,.ml-h2,.ml-h3{font-family:var(--font-display);font-weight:300}
.ml-display{font-size:var(--fs-display);line-height:1.1;letter-spacing:-0.005em;padding-bottom:.1em}
.ml-h2{font-size:var(--fs-h2);line-height:1.12;padding-bottom:.1em}
.ml-h3{font-size:var(--fs-h3);line-height:1.14;padding-bottom:.1em}

/* The signature: one italic word in champagne gold inside a cream roman heading.
   Descenders need the extra leading, hence the padding reserve above. */
.ml-accent{font-style:italic;color:var(--gold)}

.ml-lede{font-size:clamp(17px,1.35vw,20px);line-height:1.7;color:var(--muted);max-width:34em}
.ml-body{max-width:36em}
.ml-body + .ml-body{margin-top:var(--s-sm)}

.ml-eyebrow{
  font-size:var(--fs-label);font-weight:400;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gold);
}

/* The gold rule: 1px tall, 48px wide, between an eyebrow and its heading. */
.ml-rule{width:48px;height:1px;background:var(--gold);border:0;margin:var(--s-sm) 0 var(--s-md)}

/* ---------- Star list ---------- */
.ml-stars{display:grid;gap:12px;margin-top:var(--s-md)}
.ml-stars li{position:relative;padding-left:26px;font-size:var(--fs-small);color:var(--muted);line-height:1.6}
.ml-stars li::before{content:'\2726';position:absolute;left:0;top:0;color:var(--gold);font-size:13px;line-height:1.85}

/* ---------- Buttons ---------- */
.ml-btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:16px 34px;border-radius:0;
  font-family:var(--font-body);font-size:13px;font-weight:400;
  letter-spacing:.18em;text-transform:uppercase;white-space:nowrap;
  transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease);
  cursor:pointer;
}
.ml-btn--primary{background:var(--gold);color:var(--navy)}
.ml-btn--primary:hover{background:var(--gold-on-cream);color:var(--cream)}
.ml-btn--ghost{border:1px solid var(--gold);color:var(--cream)}
.ml-btn--ghost:hover{background:var(--gold);color:var(--navy)}
.ml-btn--on-cream.ml-btn--ghost{color:var(--ink-on-cream)}
.ml-btn--on-cream.ml-btn--ghost:hover{background:var(--gold);color:var(--navy)}
.ml-btns{display:flex;flex-wrap:wrap;gap:14px;margin-top:var(--s-lg)}

:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* ---------- Text link with a gold underline that draws on hover ---------- */
.ml-link{
  display:inline-block;font-size:13px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold);padding-bottom:6px;position:relative;
}
.ml-link::after{
  content:'';position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--gold);
  transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease);
}
.ml-link:hover::after{transform:scaleX(1)}

/* ---------- Navigation ---------- */
.ml-nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  transition:background .45s var(--ease),border-color .45s var(--ease);
  border-bottom:1px solid transparent;
}
.ml-nav.is-stuck{background:rgba(14,27,46,.94);backdrop-filter:blur(14px);border-bottom-color:rgba(184,151,90,.22)}
.ml-nav__inner{display:flex;align-items:center;justify-content:space-between;gap:var(--s-md);padding-block:20px}
.ml-nav__brand{display:flex;align-items:center;gap:12px;flex-shrink:0}
.ml-nav__brand img{height:40px;width:auto}
.ml-nav__wordmark{font-family:var(--font-display);font-size:21px;letter-spacing:.16em;text-transform:uppercase;color:var(--cream);line-height:1}
.ml-nav__links{display:flex;align-items:center;gap:30px}
.ml-nav__links a{font-size:var(--fs-label);letter-spacing:.18em;text-transform:uppercase;color:var(--cream);opacity:.82;transition:opacity .3s var(--ease),color .3s var(--ease)}
.ml-nav__links a:hover{opacity:1;color:var(--gold)}
.ml-nav__cta{padding:13px 26px;font-size:var(--fs-label)}
.ml-nav__links a.ml-btn--primary{color:var(--navy)}
.ml-nav__links a.ml-btn--primary:hover{color:var(--cream)}
.ml-nav__toggle{display:none;width:44px;height:44px;align-items:center;justify-content:center;margin-right:-10px}
.ml-nav__toggle span{display:block;width:24px;height:1px;background:var(--cream);position:relative;transition:background .3s var(--ease)}
.ml-nav__toggle span::before,.ml-nav__toggle span::after{content:'';position:absolute;left:0;width:24px;height:1px;background:var(--cream);transition:transform .35s var(--ease)}
.ml-nav__toggle span::before{top:-7px}
.ml-nav__toggle span::after{top:7px}
.ml-nav.is-open .ml-nav__toggle span{background:transparent}
.ml-nav.is-open .ml-nav__toggle span::before{transform:translateY(7px) rotate(45deg)}
.ml-nav.is-open .ml-nav__toggle span::after{transform:translateY(-7px) rotate(-45deg)}

/* ---------- Hero ---------- */
.ml-hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;padding-bottom:clamp(72px,9vh,120px);padding-top:140px;overflow:hidden}
.ml-hero__media{position:absolute;inset:0;z-index:0}
.ml-hero__media > *{width:100%;height:100%;object-fit:cover}
/* Directional scrim: dark at the left where the type sits, open at the right. */
.ml-hero__media::after{
  content:'';position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(14,27,46,.94) 0%,rgba(14,27,46,.72) 42%,rgba(14,27,46,.34) 100%),
    linear-gradient(0deg,rgba(14,27,46,.9) 0%,rgba(14,27,46,0) 55%);
}
.ml-hero__inner{position:relative;z-index:1;width:100%}
.ml-hero .ml-display{max-width:11.5em}
.ml-hero .ml-lede{margin-top:var(--s-md);max-width:30em}
.ml-hero__origin{
  display:flex;align-items:center;gap:12px;margin-bottom:var(--s-md);
  font-size:var(--fs-label);letter-spacing:.22em;text-transform:uppercase;color:var(--gold);
}
.ml-hero__origin::before{content:'';width:48px;height:1px;background:var(--gold)}

/* ---------- Section shells ---------- */
.ml-section{padding-block:var(--s-xl);position:relative}
.ml-section--cream{background:var(--cream);color:var(--ink-on-cream)}
.ml-section--cream .ml-lede,.ml-section--cream .ml-stars li{color:rgba(14,27,46,.68)}
.ml-section--green{background:var(--green)}
.ml-section--lift{background:var(--navy-lift)}

/* ---------- Manifesto (cream, asymmetric two column) ---------- */
.ml-manifesto__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(40px,7vw,120px);align-items:start}
.ml-manifesto__statement{font-family:var(--font-display);font-size:clamp(30px,3.4vw,46px);line-height:1.16;padding-bottom:.06em}
.ml-manifesto__body p{max-width:34em;color:var(--muted)}
.ml-manifesto__body p + p{margin-top:var(--s-md)}
.ml-manifesto__marks{display:flex;flex-wrap:wrap;gap:14px 40px;margin-top:var(--s-lg);padding-top:var(--s-md);border-top:1px solid rgba(184,151,90,.24)}
.ml-manifesto__marks span{font-size:var(--fs-label);letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}

/* ---------- Services: each one gets a different layout family ---------- */
.ml-svc{position:relative}
.ml-svc__label{font-size:var(--fs-label);letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}

/* Family A: text left, image bleeding to the right viewport edge */
.ml-svc--bleed-right .ml-svc__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(40px,6vw,96px);align-items:center}
.ml-svc--bleed-right .ml-svc__media{position:relative;margin-right:calc((var(--vw) - min(var(--vw),var(--wrap)))/-2 - var(--gutter));height:clamp(420px,62vh,640px)}
.ml-svc--bleed-right .ml-svc__media img{width:100%;height:100%;object-fit:cover}

/* Family B: image bleeding to the left viewport edge, text right */
.ml-svc--bleed-left .ml-svc__grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(40px,6vw,96px);align-items:center}
.ml-svc--bleed-left .ml-svc__media{position:relative;margin-left:calc((var(--vw) - min(var(--vw),var(--wrap)))/-2 - var(--gutter));height:clamp(420px,62vh,640px)}
.ml-svc--bleed-left .ml-svc__media img{width:100%;height:100%;object-fit:cover}

/* Family C: asymmetric two-up pair sharing one row, offset vertically */
.ml-svc-pair{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(32px,4.4vw,72px);align-items:start}
.ml-svc-pair__item--offset{margin-top:clamp(48px,9vw,128px)}
.ml-svc-pair__media{height:clamp(320px,46vh,520px);overflow:hidden}
.ml-svc-pair__item--offset .ml-svc-pair__media{height:clamp(260px,38vh,420px)}
.ml-svc-pair__media img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.ml-svc-pair__item:hover .ml-svc-pair__media img{transform:scale(1.04)}
.ml-svc-pair__text{padding-top:var(--s-md)}

/* Family D: full-bleed cinematic panel with the text sitting inside it */
.ml-svc--panel{position:relative;min-height:clamp(560px,86vh,780px);display:flex;align-items:flex-end;padding-block:var(--s-lg);overflow:hidden}
.ml-svc--panel .ml-svc__bg{position:absolute;inset:0;z-index:0}
.ml-svc--panel .ml-svc__bg img{width:100%;height:100%;object-fit:cover}
.ml-svc--panel .ml-svc__bg::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(75deg,rgba(14,27,46,.93) 0%,rgba(14,27,46,.66) 46%,rgba(14,27,46,.2) 100%);
}
.ml-svc--panel .ml-wrap{position:relative;z-index:1}
.ml-svc--panel .ml-svc__text{max-width:32em}

/* Family E: overlapping portrait crossing the section boundary */
.ml-svc--overlap{padding-block:var(--s-xl)}
.ml-svc--overlap .ml-svc__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,96px);align-items:center}
.ml-svc--overlap .ml-svc__media{height:clamp(480px,76vh,720px);margin-block:calc(var(--s-xl) / -2);position:relative;z-index:2}
.ml-svc--overlap .ml-svc__media img{width:100%;height:100%;object-fit:cover}

/* ---------- Approach: hairline-divided row, no cards, no step numbers ---------- */
.ml-approach__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin-top:var(--s-lg);border-top:1px solid rgba(184,151,90,.28)}
.ml-approach__item{padding:var(--s-md) var(--s-md) var(--s-lg) 0;border-right:1px solid rgba(184,151,90,.18)}
.ml-approach__item:last-child{border-right:0}
.ml-approach__item:not(:first-child){padding-left:var(--s-md)}
.ml-approach__item h3{font-family:var(--font-display);font-size:clamp(22px,1.9vw,28px);line-height:1.14;margin-bottom:12px}
.ml-approach__item p{font-size:var(--fs-small);color:var(--muted);line-height:1.65}

/* ---------- Enquiry ---------- */
.ml-enquiry__grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,6fr);gap:clamp(40px,7vw,120px);align-items:start}
.ml-form{display:grid;gap:var(--s-md)}
.ml-form__row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-md)}
.ml-field{position:relative;display:grid;gap:10px}
.ml-field label{font-size:var(--fs-label);letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.ml-field input,.ml-field select,.ml-field textarea{
  width:100%;background:transparent;color:var(--cream);
  border-bottom:1px solid rgba(247,243,238,.28);
  padding:10px 0;font-size:16px;font-weight:300;border-radius:0;
  transition:border-color .35s var(--ease);
}
.ml-field select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%),linear-gradient(135deg,var(--gold) 50%,transparent 50%);background-position:calc(100% - 12px) calc(50% + 1px),calc(100% - 7px) calc(50% + 1px);background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:28px}
.ml-field select option{background:var(--navy);color:var(--cream)}
.ml-field textarea{resize:vertical;min-height:120px}
.ml-field input::placeholder,.ml-field textarea::placeholder{color:rgba(247,243,238,.34)}
.ml-field input:focus,.ml-field select:focus,.ml-field textarea:focus{outline:none;border-bottom-color:var(--gold)}
.ml-field.has-error input,.ml-field.has-error select,.ml-field.has-error textarea{border-bottom-color:#C9705E}
.ml-field__error{font-size:13px;color:#E39C8D;min-height:0}
.ml-form__note{font-size:13px;color:var(--muted);line-height:1.6;max-width:40em}
.ml-form__status{font-size:var(--fs-small);padding:var(--s-sm) 0;border-top:1px solid rgba(184,151,90,.28)}
.ml-form__status--ok{color:var(--gold)}
.ml-form__status--err{color:#E39C8D}
.ml-contact-block{display:grid;gap:var(--s-md)}
.ml-contact-block dl{display:grid;gap:var(--s-sm)}
.ml-contact-block dt{font-size:var(--fs-label);letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.ml-contact-block dd{font-size:var(--fs-small);color:var(--muted);line-height:1.7}
.ml-contact-block a:hover{color:var(--gold)}

/* ---------- Footer ---------- */
.ml-footer{background:var(--navy);border-top:1px solid rgba(184,151,90,.22);padding-block:var(--s-lg)}
.ml-footer__grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr);gap:var(--s-lg)}
.ml-footer__brand .ml-nav__wordmark{margin-bottom:var(--s-sm)}
.ml-footer h4{font-size:var(--fs-label);letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:var(--s-sm);font-family:var(--font-body);font-weight:400}
.ml-footer li + li{margin-top:10px}
.ml-footer a,.ml-footer p{font-size:var(--fs-small);color:var(--muted);line-height:1.75}
.ml-footer a:hover{color:var(--gold)}
.ml-footer__legal{margin-top:var(--s-lg);padding-top:var(--s-md);border-top:1px solid rgba(184,151,90,.16);display:flex;flex-wrap:wrap;gap:var(--s-sm) var(--s-md);justify-content:space-between}
.ml-footer__legal p{font-size:13px;color:rgba(154,170,191,.72);max-width:62em}

/* ---------- Legal / interior WordPress pages ---------- */
.ml-legal{padding-top:calc(140px + var(--s-lg));padding-bottom:var(--s-xl)}
.ml-legal__body{max-width:44em}
.ml-legal__body h2{font-family:var(--font-display);font-size:clamp(24px,2.4vw,32px);line-height:1.15;margin:var(--s-lg) 0 var(--s-sm);color:var(--cream)}
.ml-legal__body p,.ml-legal__body li{color:var(--muted);margin-bottom:var(--s-sm)}
.ml-legal__body ul{display:grid;gap:10px;margin-bottom:var(--s-md)}
.ml-legal__body li{position:relative;padding-left:26px}
.ml-legal__body li::before{content:'\2726';position:absolute;left:0;color:var(--gold);font-size:13px}
.ml-legal__body a{color:var(--gold);text-decoration:underline;text-underline-offset:3px}

/* ---------- Motion (dial 0.35): short, transform and opacity only ---------- */
.ml-js .reveal{opacity:0;transform:translateY(22px)}
.ml-js .reveal.is-in{opacity:1;transform:none;transition:opacity .9s var(--ease),transform .9s var(--ease)}
.ml-js .reveal-d1.is-in{transition-delay:.1s}
.ml-js .reveal-d2.is-in{transition-delay:.2s}

@media (prefers-reduced-motion:reduce){
  .ml-js .reveal{opacity:1;transform:none;transition:none}
  .ml-svc-pair__item:hover .ml-svc-pair__media img{transform:none}
  *{animation:none !important;transition-duration:.01ms !important}
}

/* ---------- Responsive collapses, declared explicitly ---------- */
@media (max-width:1180px){
  .ml-nav__links{gap:22px}
}

@media (max-width:1024px){
  :root{--s-xl:96px;--s-lg:56px}

  /* Nav collapses to a full-screen overlay */
  .ml-nav__toggle{display:flex}
  .ml-nav__links{
    position:fixed;inset:0;background:var(--navy);
    flex-direction:column;align-items:flex-start;justify-content:center;
    gap:var(--s-md);padding:0 var(--gutter);
    transform:translateY(-100%);transition:transform .55s var(--ease);
    z-index:-1;
  }
  .ml-nav.is-open .ml-nav__links{transform:none;z-index:1}
  .ml-nav__brand,.ml-nav__toggle{position:relative;z-index:2}
  .ml-nav.is-open{background:var(--navy)}
  .ml-nav__links a{font-size:15px;letter-spacing:.2em}
  .ml-nav__cta{align-self:flex-start;margin-top:var(--s-sm)}

  /* Two-column families stack, image first */
  .ml-manifesto__grid,
  .ml-svc--bleed-right .ml-svc__grid,
  .ml-svc--bleed-left .ml-svc__grid,
  .ml-svc--overlap .ml-svc__grid,
  .ml-svc-pair,
  .ml-enquiry__grid{grid-template-columns:minmax(0,1fr)}

  .ml-svc--bleed-right .ml-svc__media,
  .ml-svc--bleed-left .ml-svc__media{
    margin-inline:calc(var(--gutter) * -1);height:clamp(300px,52vh,440px);order:-1;
  }
  .ml-svc--overlap .ml-svc__media{margin-block:0;height:clamp(320px,54vh,460px);order:-1}
  .ml-svc-pair__item--offset{margin-top:var(--s-lg)}

  .ml-approach__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ml-approach__item:nth-child(2n){border-right:0}
  .ml-approach__item:nth-child(n+3){border-top:1px solid rgba(184,151,90,.18)}

  .ml-footer__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .ml-footer__brand{grid-column:1 / -1}
}

@media (max-width:640px){
  :root{--s-xl:72px;--gutter:20px}
  .ml-hero{min-height:92svh;padding-top:110px}
  .ml-hero__content{max-width:none}
  .ml-hero .ml-display{max-width:none}
  .ml-btns{gap:12px}
  .ml-btn{width:100%;padding-inline:20px}
  .ml-nav__brand img{height:34px}
  .ml-nav__wordmark{font-size:18px}
  .ml-form__row{grid-template-columns:minmax(0,1fr)}
  .ml-approach__grid{grid-template-columns:minmax(0,1fr)}
  .ml-approach__item{border-right:0;padding-left:0 !important}
  .ml-approach__item:not(:first-child){border-top:1px solid rgba(184,151,90,.18)}
  .ml-footer__grid{grid-template-columns:minmax(0,1fr)}
  .ml-svc-pair__media{height:clamp(260px,42vh,360px)}
}

/* ---------- Accessibility utilities ---------- */
.ml-skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--gold);color:var(--navy);padding:12px 20px;
  font-size:13px;letter-spacing:.18em;text-transform:uppercase;
}
.ml-skip:focus{left:0}
.ml-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- Cream sections: gold is deepened so small type clears AA ----------
   Champagne gold on warm cream sits near 2.3:1, which fails for labels and for
   large headings. On cream only, the accent steps down to a deeper bronze that
   still reads as gold. */
.ml-section--cream .ml-eyebrow,
.ml-section--cream .ml-svc__label,
.ml-section--cream .ml-accent{color:var(--gold-on-cream)}
.ml-section--cream .ml-stars li::before{color:var(--gold-on-cream)}
.ml-section--cream .ml-rule{background:var(--gold-on-cream)}
.ml-section--cream .ml-link{color:var(--gold-on-cream)}
.ml-section--cream .ml-link::after{background:var(--gold-on-cream)}

/* ---------- Declared placeholders ----------
   On-palette blocks composed like the photograph that will replace them, so no
   slot ships empty while final imagery is being selected. Each service gets a
   different light direction so the page still reads as varied. */
.ml-ph{width:100%;height:100%;background:var(--navy-lift);position:relative;overflow:hidden}
.ml-ph--1{background:radial-gradient(120% 88% at 18% 22%,rgba(184,151,90,.26),transparent 62%),linear-gradient(158deg,#1B3050 0%,#0E1B2E 72%)}
.ml-ph--2{background:radial-gradient(96% 76% at 78% 30%,rgba(184,151,90,.22),transparent 58%),linear-gradient(196deg,#16283F 0%,#0E1B2E 78%)}
.ml-ph--3{background:radial-gradient(110% 82% at 30% 78%,rgba(184,151,90,.2),transparent 60%),linear-gradient(140deg,#18304A 0%,#0E1B2E 74%)}
.ml-ph--4{background:radial-gradient(100% 80% at 70% 24%,rgba(184,151,90,.18),transparent 56%),linear-gradient(170deg,#1A2E45 0%,#0E1B2E 80%)}
.ml-ph--5{background:radial-gradient(120% 90% at 24% 30%,rgba(154,170,191,.24),transparent 62%),linear-gradient(200deg,#1C3149 0%,#0E1B2E 76%)}
.ml-ph--6{background:radial-gradient(88% 70% at 62% 44%,rgba(184,151,90,.3),transparent 58%),linear-gradient(150deg,#152741 0%,#0B1524 82%)}
.ml-ph--7{background:radial-gradient(104% 78% at 40% 62%,rgba(184,151,90,.16),transparent 58%),linear-gradient(184deg,#16273D 0%,#0B1524 80%)}

/* ---------- Vertical rhythm within blocks ---------- */
.ml-svc__intro{margin-bottom:var(--s-xl)}
.ml-svc__intro .ml-h2{margin-top:0}
.ml-svc__intro .ml-lede{margin-top:var(--s-md)}
.ml-svc__label + .ml-h3,
.ml-svc__label + .ml-h2{margin-top:12px}
.ml-svc__text .ml-body{margin-top:var(--s-md)}
.ml-svc-pair__text .ml-body{margin-top:var(--s-sm)}
.ml-approach .ml-lede{margin-top:var(--s-md)}
.ml-contact-block .ml-lede{margin-top:var(--s-md)}
.ml-manifesto__statement{margin-top:0}
.ml-form__status:empty{display:none}
.ml-form__note{margin-top:var(--s-sm)}
.ml-footer__brand p{margin-top:var(--s-sm);max-width:34em}
/* ---------- Interior page hero ---------- */
.ml-page-hero{
  position:relative;display:flex;align-items:flex-end;overflow:hidden;
  min-height:clamp(520px,72vh,720px);
  padding-top:160px;padding-bottom:clamp(56px,7vh,96px);
}
.ml-page-hero--short{min-height:clamp(440px,58vh,600px)}
.ml-page-hero__media{position:absolute;inset:0;z-index:0}
.ml-page-hero__media > *{width:100%;height:100%;object-fit:cover}
.ml-page-hero__media::after{
  content:'';position:absolute;inset:0;
  background:
    linear-gradient(85deg,rgba(14,27,46,.94) 0%,rgba(14,27,46,.7) 48%,rgba(14,27,46,.3) 100%),
    linear-gradient(0deg,rgba(14,27,46,.92) 0%,rgba(14,27,46,0) 60%);
}
.ml-page-hero__inner{position:relative;z-index:1}
.ml-display--sm{font-size:clamp(38px,4.8vw,68px);max-width:13em}
.ml-page-hero .ml-svc__label + .ml-display--sm{margin-top:12px}
.ml-page-hero .ml-lede{margin-top:var(--s-md)}

/* ---------- Service detail ---------- */
.ml-detail__grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(40px,7vw,110px);align-items:start}
.ml-detail__body > *:first-child{margin-top:0}
.ml-detail__aside{border-top:1px solid rgba(184,151,90,.28);padding-top:var(--s-md);position:sticky;top:120px}
.ml-detail__aside .ml-h3{margin-bottom:var(--s-xs)}

.ml-stars + .ml-link{margin-top:var(--s-md)}

.ml-approach__grid--three{grid-template-columns:repeat(3,minmax(0,1fr))}
.ml-section--cream .ml-approach__grid{border-top-color:rgba(14,27,46,.18)}
.ml-section--cream .ml-approach__item{border-right-color:rgba(14,27,46,.12)}
.ml-section--cream .ml-approach__item p{color:rgba(14,27,46,.68)}
.ml-approach .ml-approach__grid{margin-top:var(--s-lg)}

/* ---------- Closing call to action ---------- */
.ml-cta-band__inner{display:flex;flex-wrap:wrap;gap:var(--s-md) var(--s-lg);align-items:center;justify-content:space-between}
.ml-cta-band .ml-btns{margin-top:0}
.ml-cta-band .ml-lede{margin-top:var(--s-sm)}

/* ---------- Contact page ---------- */
.ml-contact-page{padding-top:calc(140px + var(--s-lg))}
.ml-contact-page__intro{margin-bottom:var(--s-lg)}

@media (max-width:1024px){
  .ml-detail__grid{grid-template-columns:minmax(0,1fr)}
  .ml-detail__aside{position:static}
  .ml-approach__grid--three{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ml-page-hero{padding-top:130px}
}

@media (max-width:640px){
  .ml-approach__grid--three{grid-template-columns:minmax(0,1fr)}
  .ml-page-hero{padding-top:110px;min-height:clamp(400px,58vh,520px)}
  .ml-cta-band__inner{align-items:flex-start}
  .ml-cta-band .ml-btns{width:100%}
}
/* ---------- Services rail ----------
   All six services on one full-bleed row at desktop, so the whole offering is
   visible without scrolling sideways. Below 1024px it becomes a snapping
   horizontal rail, which is the only honest way to keep six tiles legible on a
   phone. */
.ml-rail{padding-bottom:0}
.ml-rail__head{margin-bottom:var(--s-lg)}
.ml-rail__head .ml-rule{margin-top:var(--s-xs)}
.ml-rail__head .ml-h2{margin-top:0}

.ml-rail__track{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:2px;
  width:100%;
}
.ml-rail__item{display:block;position:relative;background:var(--navy)}
.ml-rail__media{display:block;position:relative;overflow:hidden;aspect-ratio:4 / 5}
.ml-rail__media > *{width:100%;height:100%;object-fit:cover;display:block}
.ml-rail__media img{transition:transform 1.1s var(--ease),opacity .5s var(--ease)}
.ml-rail__media::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(14,27,46,.55) 0%,rgba(14,27,46,0) 45%);
  opacity:0;transition:opacity .5s var(--ease);
}
.ml-rail__item:hover .ml-rail__media img{transform:scale(1.06)}
.ml-rail__item:hover .ml-rail__media::after{opacity:1}

.ml-rail__label{
  display:block;text-align:center;
  padding:22px 10px 0;
  font-size:var(--fs-label);letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold-on-cream);
  transition:color .35s var(--ease);
}
.ml-rail__item:hover .ml-rail__label,
.ml-rail__item:focus-visible .ml-rail__label{color:var(--ink-on-cream)}

@media (max-width:1024px){
  .ml-rail__track{
    grid-template-columns:none;
    grid-auto-flow:column;
    grid-auto-columns:56%;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scroll-padding-left:var(--gutter);
    padding-inline:var(--gutter);
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .ml-rail__track::-webkit-scrollbar{display:none}
  .ml-rail__item{scroll-snap-align:start}
}

@media (max-width:640px){
  .ml-rail__track{grid-auto-columns:78%}
  .ml-rail__media{aspect-ratio:1 / 1}
}