/* =========================================================================
   MJIC — Homes by MJIC · Design System v2 "Atelier"
   --------------------------------------------------------------------------
   Fashion-house editorial. Porcelain canvas, midnight ink, a single
   burgundy accent. Prata (serif) for display, Archivo (sans) for body/UI.
   Photography arrives later — refined figure frames (image-slot drop
   zones) hold its place with editorial captions.
   ========================================================================= */

:root{
  /* — Palette — */
  --porcelain:   #F5F3EE;
  --porcelain-2: #FCFBF8;
  --midnight:    #101319;
  --midnight-2:  #171B23;
  --wine:        #702837;
  --wine-lt:     #B5727F;
  --slate:       #494E5A;
  --mist:        #A9ADB6;   /* muted on dark  */
  --stone:       #6C6F76;   /* muted on light */
  --line:        rgba(16,19,25,.16);
  --line-d:      rgba(245,243,238,.17);

  /* — Type — */
  --serif: "Prata", "Georgia", serif;
  --sans:  "Jost", system-ui, sans-serif;

  /* — Rhythm — */
  --gutter: clamp(20px, 5vw, 88px);
  --section: clamp(84px, 11vw, 180px);
  --maxw: 1480px;

  /* — Motion — */
  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-soft: cubic-bezier(.33, 1, .68, 1);
}

/* ---------------------------------------------------------------- reset */
*{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scrollbar-gutter:stable; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{
  font-family:var(--sans);
  background:var(--porcelain);
  color:var(--midnight);
  line-height:1.6;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
::selection{ background:var(--wine); color:var(--porcelain-2); }

/* ---------------------------------------------------------------- layout */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.section{ padding-block:var(--section); }
.section--tight{ padding-block:clamp(52px,7vw,110px); }
/* Phones: tighten the section rhythm and figure heights so the page reads as
   a series of compact screens rather than one very long scroll. */
@media (max-width:640px){
  :root{ --section:clamp(56px,13vw,84px); }
  .section--tight{ padding-block:clamp(40px,10vw,72px); }
  .frame img{ height:clamp(240px,40vh,360px); }
}

/* ---------------------------------------------------------------- type */
.eyebrow{
  font-family:var(--sans);
  font-size:clamp(10.5px,.75vw,12.5px);
  font-weight:500;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--wine);
  display:inline-flex;
  align-items:center;
  gap:1em;
}
.eyebrow::before{ content:""; width:30px; height:1px; background:currentColor; opacity:.55; }
.eyebrow--center{ justify-content:center; }
.on-dark .eyebrow{ color:var(--wine-lt); }

.display{
  font-family:var(--serif);
  font-weight:400;
  line-height:1.08;
  letter-spacing:.002em;
  text-wrap:balance;
}
.d-hero{ font-size:clamp(40px, 6.6vw, 104px); line-height:1.06; }
.d-1{ font-size:clamp(32px, 4.6vw, 68px); }
.d-2{ font-size:clamp(26px, 3.2vw, 46px); }
.d-3{ font-size:clamp(21px, 2.2vw, 30px); line-height:1.2; }
.accent{ color:var(--wine); }
.on-dark .accent{ color:var(--wine-lt); }

.lead{
  font-size:clamp(17px, 1.45vw, 21px);
  line-height:1.65;
  color:var(--slate);
  font-weight:400;
  max-width:60ch;
  text-wrap:pretty;
}
.body{
  font-size:clamp(15px, 1.02vw, 16.5px);
  line-height:1.75;
  color:var(--slate);
  max-width:58ch;
  text-wrap:pretty;
}
.on-dark{ color:var(--porcelain); }
.on-dark .lead{ color:#D6D2C8; }
.on-dark .body{ color:var(--mist); }

/* ---------------------------------------------------------------- buttons */
.btn{
  --c:var(--midnight);
  font-family:var(--sans);
  font-size:12px;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  display:inline-flex;
  align-items:center;
  gap:.8em;
  padding:1.25em 2.1em;
  border:1px solid var(--c);
  color:var(--c);
  position:relative;
  overflow:hidden;
  transition:color .55s var(--ease);
  isolation:isolate;
}
.btn::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:var(--c);
  transform:translateY(101%);
  transition:transform .55s var(--ease);
}
.btn:hover{ color:var(--porcelain-2); }
.btn:hover::before{ transform:translateY(0); }
.btn .arr{ transition:transform .55s var(--ease); }
.btn:hover .arr{ transform:translate(4px,-4px); }

.btn--wine{ --c:var(--wine); background:var(--wine); color:var(--porcelain-2); border-color:var(--wine); }
.btn--wine::before{ background:var(--midnight); }
.btn--wine:hover{ color:var(--porcelain-2); }
.on-dark .btn{ --c:var(--porcelain); }
.on-dark .btn:hover{ color:var(--midnight); }
.on-dark .btn--wine{ --c:var(--wine); background:var(--wine); color:var(--porcelain); border-color:#8A3A4A; }
.on-dark .btn--wine::before{ background:var(--porcelain); }
.on-dark .btn--wine:hover{ color:var(--midnight); }

.tlink{
  font-family:var(--sans);
  font-weight:500;
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
  display:inline-flex; align-items:center; gap:.7em;
  padding-bottom:4px;
  background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;
  transition:gap .4s var(--ease), opacity .3s;
  color:var(--wine);
}
.tlink:hover{ gap:1.05em; opacity:.85; }
.on-dark .tlink{ color:var(--wine-lt); }

/* ---------------------------------------------------------------- nav */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  gap:clamp(18px,2.2vw,44px);
  padding:clamp(16px,1.9vw,26px) var(--gutter);
  color:var(--porcelain);
  transition:background .6s var(--ease), color .6s var(--ease), padding .6s var(--ease), box-shadow .6s var(--ease);
}
.nav--solid{
  background:var(--porcelain);
  color:var(--midnight);
  padding-block:12px;
  box-shadow:0 1px 0 var(--line);
}
.nav__brand{ font-family:var(--serif); font-size:24px; letter-spacing:.30em; line-height:1; text-align:center; }
.nav__brand small{ display:block; font-family:var(--sans); font-size:9px; letter-spacing:.42em; text-transform:uppercase; opacity:.66; margin-top:.6em; }
.nav__menu{
  display:flex; align-items:center; gap:clamp(10px,1vw,20px);
  font-family:var(--sans); font-size:clamp(11px,.85vw,12px); font-weight:500; letter-spacing:.1em; text-transform:uppercase;
  flex:0 0 auto; flex-wrap:nowrap;
}
.nav__menu a{ position:relative; padding:6px 0; opacity:.9; transition:opacity .3s; white-space:nowrap; }
.nav__menu a:hover{ opacity:1; }
.nav__menu a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:currentColor; transform:scaleX(0); transform-origin:left;
  transition:transform .45s var(--ease);
}
.nav__menu a:hover::after{ transform:scaleX(1); }
.nav__cta{
  font-family:var(--sans); font-size:11px; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
  border:1px solid currentColor; padding:.95em 1.5em; white-space:nowrap;
  transition:background .45s var(--ease), color .45s var(--ease), border-color .45s var(--ease);
}
.nav__cta:hover{ background:var(--wine); border-color:var(--wine); color:var(--porcelain); }
/* Equal-growing left/right groups keep the menu optically centred while the
   right cluster (social icons + CTA) reserves its own space — so the icons
   never overlap the menu the way an absolutely-centred menu would. */
.nav__lead{ flex:1 1 0; display:flex; align-items:center; min-width:0; }
.nav__actions{ flex:1 1 0; display:flex; align-items:center; justify-content:flex-end; gap:clamp(14px,1.5vw,22px); }
.nav__social{ display:inline-flex; align-items:center; gap:14px; }
.nav__social a{ display:inline-flex; color:currentColor; opacity:.78; transition:opacity .3s var(--ease), transform .3s var(--ease); }
.nav__social a:hover{ opacity:1; transform:translateY(-1px); }
.nav__social svg{ width:18px; height:18px; display:block; }
.nav__burger{ display:none; }
@media (max-width:1300px){
  .nav__menu{ display:none; }
  .nav__burger{ display:flex; flex-direction:column; gap:5px; width:28px; }
  .nav__burger span{ height:1px; background:currentColor; width:100%; }
}

/* ---------------------------------------------------------------- reveal */
.reveal{
  opacity:0;
  transform:translateY(30px);
  transition:opacity 1s var(--ease), transform 1s var(--ease);
  transition-delay:calc(var(--i, 0) * 90ms);
  will-change:opacity, transform;
}
.reveal.in{ opacity:1; transform:none; }
.lines .line{ display:block; overflow:hidden; padding-bottom:.08em; margin-bottom:-.08em; }
.lines .line > span{
  display:block;
  transform:translateY(115%);
  transition:transform 1.15s var(--ease);
  transition-delay:calc(var(--i, 0) * 110ms);
}
.lines.in .line > span{ transform:none; }
@media (prefers-reduced-motion: reduce){
  .reveal, .lines .line > span{ opacity:1 !important; transform:none !important; transition:none !important; }
}

/* ---------------------------------------------------------------- figure frames (placeholder photography) */
.frame{ position:relative; }
.frame image-slot{
  display:block; width:100%;
  background:#EBE8E0;
  outline:1px solid var(--line);
  outline-offset:-1px;
}
.frame img{
  display:block; width:100%; height:clamp(320px,52vh,560px); object-fit:cover;
  outline:1px solid var(--line); outline-offset:-1px;
}
.on-dark .frame img{ outline-color:var(--line-d); }
.frame::after{
  content:""; position:absolute; inset:-9px; pointer-events:none;
  border:1px solid var(--line);
}
.on-dark .frame image-slot{ background:#1B202A; outline-color:var(--line-d); }
.on-dark .frame::after{ border-color:var(--line-d); }
.frame__cap{
  display:flex; gap:1em; align-items:baseline;
  margin-top:22px;
  font-family:var(--sans); font-size:10.5px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--stone);
}
.on-dark .frame__cap{ color:var(--mist); }
.frame__cap b{ font-weight:500; color:var(--wine); }
.on-dark .frame__cap b{ color:var(--wine-lt); }

/* ---------------------------------------------------------------- video frame (click-to-play embed) */
.vframe{
  position:relative; aspect-ratio:16/9; width:100%;
  background:#000; cursor:pointer; overflow:hidden;
  outline:1px solid var(--line-d); outline-offset:-1px;
}
.vframe > img{ width:100%; height:100%; object-fit:cover; opacity:.88; transition:opacity .5s var(--ease), transform 1.2s var(--ease-soft); }
.vframe:hover > img{ opacity:1; transform:scale(1.03); }
.vframe__play{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(180deg, rgba(16,19,25,.08), rgba(16,19,25,.34));
  transition:opacity .4s;
}
.vframe__btn{
  width:72px; height:72px; border-radius:50%;
  border:1px solid rgba(245,243,238,.85);
  background:rgba(16,19,25,.35);
  backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center;
  color:var(--porcelain);
  transition:background .4s var(--ease), transform .4s var(--ease);
}
.vframe:hover .vframe__btn{ background:var(--wine); border-color:var(--wine); transform:scale(1.06); }
.vframe__btn svg{ display:block; margin-left:3px; }
.vframe iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.vframe[data-playing] .vframe__play, .vframe[data-playing] > img{ display:none; }

/* — full-bleed ambient video background — */
.hero__bg{ position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; background:var(--midnight-2); container-type:size; }
.hero__bg > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.85; }
.hero__bg iframe{
  position:absolute; top:50%; left:50%;
  width:max(100cqw, 177.78cqh); height:max(100cqh, 56.25cqw);
  transform:translate(-50%,-50%);
  border:0;
  opacity:0; transition:opacity .9s ease; /* hidden until playing so YT controls never show */
}
.hero__bg.is-playing iframe{ opacity:1; }
.hero__scrim{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(16,19,25,.72) 0%, rgba(16,19,25,.42) 40%, rgba(16,19,25,.55) 70%, rgba(16,19,25,.88) 100%);
}
.hero__content{ position:relative; z-index:2; width:100%; padding-top:clamp(120px,16vh,180px); }
.hero__content h1{ margin:.5em 0 .5em; max-width:14ch; }

/* ---------------------------------------------------------------- hero (type-led, midnight) */
.hero{
  position:relative; min-height:100svh;
  display:flex; flex-direction:column; justify-content:flex-end;
  color:var(--porcelain);
  background:var(--midnight);
  overflow:hidden;
}
.hero__grid{
  display:grid; grid-template-columns:1.25fr .75fr; gap:clamp(36px,5vw,90px);
  align-items:end;
  padding-top:clamp(120px,16vh,180px);
}
@media (max-width:900px){ .hero__grid{ grid-template-columns:1fr; } }
.hero h1{ margin:.5em 0 .5em; max-width:14ch; }
.hero__sub{ max-width:46ch; }
.hero__actions{ margin-top:clamp(26px,3vw,40px); display:flex; flex-wrap:wrap; gap:18px; align-items:center; }
.hero__strip{
  margin-top:clamp(48px,7vw,96px);
  border-top:1px solid var(--line-d);
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:1em 2em;
  padding-block:clamp(18px,2.2vw,28px);
  font-family:var(--sans); font-size:11px; letter-spacing:.26em; text-transform:uppercase; color:var(--mist);
}
.hero__rule{ position:absolute; top:0; bottom:0; left:50%; width:1px; background:var(--line-d); opacity:.4; pointer-events:none; }

/* ---------------------------------------------------------------- sections: dark / wine */
.dark{ background:var(--midnight); color:var(--porcelain); }
.dark-2{ background:var(--midnight-2); color:var(--porcelain); }
.wine-band{ background:var(--wine); color:var(--porcelain); }
.wine-band .eyebrow{ color:#E2B6BE; }
.wine-band .lead{ color:#EFD9DC; }
.wine-band .body{ color:#DDB9BF; }

/* ---------------------------------------------------------------- device / app mockups */
.device{
  position:relative; width:100%; max-width:300px; aspect-ratio:9/19.2;
  background:#0B0D12; border-radius:42px; padding:11px;
  box-shadow:0 40px 80px -30px rgba(16,19,25,.6), 0 0 0 1px rgba(16,19,25,.5), inset 0 0 0 2px rgba(245,243,238,.06);
}
.device::before{
  content:""; position:absolute; top:20px; left:50%; transform:translateX(-50%);
  width:42%; height:22px; background:#0B0D12; border-radius:0 0 14px 14px; z-index:3;
}
.device__screen{
  position:relative; height:100%; border-radius:32px; overflow:hidden; background:var(--midnight-2);
}
.device__screen image-slot{ position:absolute; inset:0; width:100%; height:100%; background:#161B23; }
.device__cap{ margin-top:22px; text-align:center; font-family:var(--sans); font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--mist); }

.devices{ position:relative; display:flex; justify-content:center; align-items:flex-start; }
.devices .device{ position:relative; }
.devices .device--back{ transform:translateY(36px) rotate(-4deg) scale(.92); z-index:1; margin-right:-58px; opacity:.96; }
.devices .device--front{ z-index:2; }
.devices .device--side{ transform:translateY(20px) rotate(4deg) scale(.92); z-index:1; margin-left:-58px; opacity:.96; }
@media (max-width:560px){
  .devices .device--back, .devices .device--side{ display:none; }
}

/* app feature list */
.applist{ display:flex; flex-direction:column; }
.appitem{
  display:grid; grid-template-columns:auto 1fr; gap:clamp(16px,2vw,28px); align-items:start;
  padding:clamp(22px,2.6vw,32px) 0; border-top:1px solid var(--line-d);
}
.appitem:last-child{ border-bottom:1px solid var(--line-d); }
.appitem__n{ font-family:var(--sans); font-size:11px; letter-spacing:.24em; color:var(--wine-lt); padding-top:.45em; }
.appitem__t{ font-family:var(--serif); font-size:clamp(19px,2vw,26px); line-height:1.2; margin-bottom:.4em; }
.appitem__d{ color:var(--mist); font-size:14.5px; line-height:1.65; max-width:48ch; }

/* spec / capability grid */
.specgrid{ display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); }
@media (max-width:820px){ .specgrid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .specgrid{ grid-template-columns:1fr; } }
.spec{ padding:clamp(28px,3.2vw,46px) clamp(20px,2.2vw,32px); border-bottom:1px solid var(--line); border-right:1px solid var(--line); }
.spec__n{ font-family:var(--sans); font-size:11px; letter-spacing:.22em; color:var(--wine); }
.spec__t{ font-family:var(--serif); font-weight:400; font-size:clamp(19px,1.9vw,25px); margin:.7em 0 .45em; }
.spec__d{ color:var(--stone); font-size:14px; line-height:1.65; }

/* big stat row */
.stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(24px,3vw,56px); }
@media (max-width:700px){ .stats{ grid-template-columns:1fr; gap:32px; } }
.stat__v{ font-family:var(--serif); font-size:clamp(40px,5vw,72px); line-height:1; color:var(--porcelain); }
.stat__v .accent{ color:var(--wine-lt); }
.stat__k{ font-family:var(--sans); font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--mist); margin-top:1em; max-width:24ch; }

/* ---------------------------------------------------------------- press band */
.press{ border-bottom:1px solid var(--line); background:var(--porcelain-2); }
.press__inner{
  display:flex; align-items:baseline; justify-content:center; gap:clamp(18px,2.4vw,36px);
  padding-block:clamp(22px,2.8vw,36px);
  flex-wrap:wrap;
}
.press__label{
  font-family:var(--sans); font-size:11px; font-weight:500;
  letter-spacing:.34em; text-transform:uppercase; color:var(--stone);
}
.press__mark{
  font-family:var(--serif); font-size:clamp(20px,2.2vw,30px); color:var(--midnight);
  letter-spacing:.01em; white-space:nowrap;
}

/* ---------------------------------------------------------------- statement */
.statement{ display:grid; grid-template-columns:1fr; gap:clamp(28px,4vw,52px); }
.statement__head{ max-width:21ch; }
.statement__cols{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(28px,4vw,72px); align-items:start; }
@media (max-width:820px){ .statement__cols{ grid-template-columns:1fr; gap:28px; } }
.measure-r{ justify-self:end; }
.dropcap::first-letter{
  font-family:var(--serif); float:left;
  font-size:3.4em; line-height:.85; padding:.06em .14em 0 0; color:var(--wine);
}

/* ---------------------------------------------------------------- service index (editorial rows) */
.index{ border-top:1px solid var(--line); }
.irow{
  display:grid; grid-template-columns:auto 1fr auto auto; align-items:center;
  gap:clamp(20px,3.5vw,64px);
  padding:clamp(26px,3.6vw,52px) 0;
  border-bottom:1px solid var(--line);
  position:relative;
  transition:padding-left .5s var(--ease);
}
.irow:hover{ padding-left:clamp(8px,1vw,18px); }
.irow__n{ font-family:var(--sans); font-size:11px; letter-spacing:.26em; color:var(--wine); }
.irow__t{ font-family:var(--serif); font-size:clamp(26px,3.6vw,54px); line-height:1.05; transition:color .4s; }
.irow:hover .irow__t{ color:var(--wine); }
.irow__d{ font-family:var(--sans); font-size:14px; line-height:1.6; color:var(--stone); max-width:30ch; }
.irow__a{
  font-family:var(--serif); font-size:clamp(22px,2.4vw,32px); color:var(--wine);
  transform:translateX(-6px); opacity:.45;
  transition:transform .5s var(--ease), opacity .4s;
}
.irow:hover .irow__a{ transform:translateX(0); opacity:1; }
@media (max-width:760px){
  .irow{ grid-template-columns:auto 1fr auto; }
  .irow__d{ display:none; }
}

/* ---------------------------------------------------------------- process (sticky editorial) */
.process{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(36px,5vw,90px); align-items:start; }
@media (max-width:900px){ .process{ grid-template-columns:1fr; } }
.process__media{ position:sticky; top:14vh; height:72vh; overflow:hidden; background:var(--midnight-2); border:1px solid var(--line-d); }
@media (max-width:900px){ .process__media{ display:none; } }
.process__media .frame-abs{ position:absolute; inset:0; opacity:0; transition:opacity .9s var(--ease); display:flex; align-items:center; justify-content:center; }
.process__media .frame-abs.active{ opacity:1; }
.process__media .frame-abs image-slot{ position:absolute; inset:0; width:100%; height:100%; background:#1B202A; }
.process__media .frame-abs img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.process__media .idx{
  position:absolute; left:36px; bottom:22px; z-index:2;
  font-family:var(--serif); font-size:clamp(60px,7vw,110px); color:var(--porcelain); line-height:1;
}
.process__media .idx::after{ content:""; display:block; width:1.2em; height:1px; background:var(--wine-lt); margin-top:.12em; }
.process__steps{ display:flex; flex-direction:column; }
.pstep{
  padding:clamp(32px,4.6vw,62px) 0; border-top:1px solid var(--line-d);
  display:grid; grid-template-columns:auto 1fr; gap:clamp(20px,2.4vw,40px);
  opacity:.38; transition:opacity .6s var(--ease);
}
.pstep:last-child{ border-bottom:1px solid var(--line-d); }
.pstep.active{ opacity:1; }
.pstep__n{ font-family:var(--sans); font-size:11px; letter-spacing:.26em; color:var(--wine-lt); padding-top:.7em; }
.pstep__t{ font-family:var(--serif); font-weight:400; font-size:clamp(22px,2.4vw,34px); line-height:1.15; margin-bottom:.55em; }
.pstep__d{ color:var(--mist); font-size:15px; line-height:1.7; max-width:46ch; }

/* ---------------------------------------------------------------- split */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,5vw,90px); align-items:center; }
@media (max-width:860px){
  .split{ grid-template-columns:1fr; gap:clamp(24px,5vw,32px); }
  /* Keep a consistent text → image rhythm on mobile. Without this, an
     image-first section stacks directly under the previous section's image,
     so two large photos collide. Forcing the figure last interleaves them. */
  .split .frame{ order:2; }
}

/* section masthead — big heading left, supporting lede bottom-right (fills the void) */
.masthead{
  display:grid; grid-template-columns:1.1fr .9fr;
  gap:clamp(36px,5vw,88px); align-items:end;
  margin-bottom:clamp(48px,6vw,96px);
}
.masthead__lede{ max-width:44ch; padding-bottom:.35em; }
@media (max-width:860px){
  .masthead{ grid-template-columns:1fr; gap:18px; align-items:start; margin-bottom:clamp(36px,8vw,56px); }
}

/* concierge pillars */
.pillars-list{ list-style:none; margin:1.7em 0 0; padding:0; display:grid; gap:0; }
.pillars-list li{ display:grid; gap:.3em; padding:1.1em 0; border-top:1px solid var(--line); }
.pillars-list strong{ font-family:var(--serif); font-weight:500; font-size:clamp(17px,1.6vw,20px); letter-spacing:.01em; }
.pillars-list span{ color:var(--stone); font-size:14.5px; line-height:1.6; }
.on-dark .pillars-list li{ border-top-color:var(--line-d); }
.on-dark .pillars-list span{ color:var(--mist); }

/* ---------------------------------------------------------------- feature rows (inner pages) */
.feat{ display:flex; flex-direction:column; gap:clamp(64px,9vw,140px); }
.frow{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,5vw,88px); align-items:center; }
.frow:nth-child(even) .frow__media{ order:2; }
@media (max-width:860px){ .frow{ grid-template-columns:1fr; gap:30px; } .frow:nth-child(even) .frow__media{ order:0; } }
.frow__n{ font-family:var(--sans); font-size:11px; letter-spacing:.26em; color:var(--wine); }

/* ---------------------------------------------------------------- values strip */
.values{ display:grid; grid-template-columns:repeat(5,1fr); border-top:1px solid var(--line); }
@media (max-width:900px){ .values{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .values{ grid-template-columns:1fr; } }
.value{ padding:clamp(26px,3vw,42px) clamp(18px,2vw,30px); border-bottom:1px solid var(--line); border-right:1px solid var(--line); }
.value__n{ font-family:var(--sans); font-size:11px; color:var(--wine); letter-spacing:.22em; }
.value__t{ font-family:var(--serif); font-weight:400; font-size:clamp(19px,1.9vw,26px); margin:.7em 0 .45em; }
.value__d{ color:var(--stone); font-size:14px; line-height:1.65; }

/* ---------------------------------------------------------------- courses */
.courses{ display:grid; grid-template-columns:repeat(2,1fr); gap:6px; }
@media (max-width:760px){ .courses{ grid-template-columns:1fr; } }
.course{ border:1px solid var(--line-d); padding:clamp(26px,3vw,42px); background:var(--porcelain); display:flex; flex-direction:column; min-height:250px; transition:background .5s var(--ease); }
.course:hover{ background:var(--porcelain-2); }
.course__meta{ display:flex; gap:1.6em; font-family:var(--sans); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--wine); margin-bottom:1.2em; }
.course__t{ font-family:var(--serif); font-weight:400; font-size:clamp(20px,2vw,27px); line-height:1.18; margin-bottom:.6em; color:var(--midnight); }
.course__d{ color:var(--slate); font-size:14.5px; line-height:1.7; flex:1; }
.course__cert{ margin-top:1.5em; padding-top:1.2em; border-top:1px solid var(--line); font-family:var(--sans); font-size:12px; letter-spacing:.04em; color:var(--midnight); display:flex; align-items:center; gap:.7em; }
.course__cert b{ font-weight:600; }

/* ---------------------------------------------------------------- founder letter */
.letter{
  max-width:760px; margin-inline:auto; text-align:left;
  border:1px solid var(--line); background:var(--porcelain-2);
  padding:clamp(36px,5.5vw,80px);
  position:relative;
}
.letter::after{ content:""; position:absolute; inset:9px; border:1px solid var(--line); pointer-events:none; }
.letter__salut{ font-family:var(--serif); font-size:clamp(19px,1.7vw,24px); margin-bottom:1.4em; }
.letter p + p{ margin-top:1.2em; }
.sig{ font-family:var(--serif); font-size:clamp(24px,2.6vw,34px); color:var(--wine); margin-top:1.2em; }
.sig small{ display:block; font-family:var(--sans); font-size:10.5px; letter-spacing:.26em; text-transform:uppercase; color:var(--stone); margin-top:.9em; }

/* ---------------------------------------------------------------- CTA */
.cta{ text-align:center; }
.cta__row{ display:flex; flex-wrap:wrap; gap:18px; justify-content:center; align-items:center; margin-top:clamp(30px,4vw,48px); }
.cta__contact{ margin-top:clamp(34px,4vw,52px); display:flex; flex-wrap:wrap; gap:clamp(20px,4vw,72px); justify-content:center; }
.cta__contact a{ display:flex; flex-direction:column; gap:.5em; }
.cta__contact .k{ font-size:10.5px; letter-spacing:.3em; text-transform:uppercase; color:var(--wine-lt); font-family:var(--sans); }
.cta__contact .v{ font-size:clamp(18px,1.7vw,23px); font-family:var(--serif); }

/* ---------------------------------------------------------------- inner page hero */
.phero{
  position:relative; min-height:64svh; display:flex; align-items:flex-end;
  color:var(--porcelain); background:var(--midnight); overflow:hidden;
}
.phero__inner{ position:relative; z-index:2; padding-block:clamp(120px,18vh,180px) clamp(40px,5vw,72px); width:100%; }
.phero h1{ max-width:16ch; margin-top:.4em; }
.phero__rule{ position:absolute; top:0; bottom:0; right:28%; width:1px; background:var(--line-d); opacity:.5; }
.crumb{ font-family:var(--sans); font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--mist); display:flex; gap:.9em; }
.crumb a{ opacity:.85; } .crumb a:hover{ opacity:1; }

/* ---------------------------------------------------------------- footer */
.foot{ background:var(--midnight); color:var(--porcelain); padding-top:clamp(60px,8vw,110px); border-top:1px solid var(--line-d); }
.foot__top{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:clamp(28px,4vw,56px); padding-bottom:clamp(44px,6vw,80px); border-bottom:1px solid var(--line-d); }
@media (max-width:900px){ .foot__top{ grid-template-columns:1fr 1fr; gap:36px; } }
@media (max-width:560px){ .foot__top{ grid-template-columns:1fr; } }
.foot__brand{ font-family:var(--serif); font-size:30px; letter-spacing:.3em; }
.foot__brand small{ display:block; font-family:var(--sans); font-size:9.5px; letter-spacing:.42em; text-transform:uppercase; opacity:.6; margin-top:.7em; }
.foot__tag{ color:var(--mist); margin-top:1.3em; max-width:34ch; font-size:14px; line-height:1.7; }
.foot h4{ font-family:var(--sans); font-size:10.5px; letter-spacing:.3em; text-transform:uppercase; color:var(--wine-lt); font-weight:500; margin-bottom:1.6em; }
.foot__col ul{ list-style:none; display:flex; flex-direction:column; gap:1em; }
.foot__col a{ color:#CFCCC3; font-size:14.5px; transition:color .3s; }
.foot__col a:hover{ color:var(--porcelain); }
.foot__news{ display:flex; border:1px solid var(--line-d); overflow:hidden; margin-top:1.2em; max-width:320px; }
.foot__news input{ flex:1; background:none; border:none; color:var(--porcelain); padding:.95em 1em; font-family:var(--sans); font-size:13px; outline:none; }
.foot__news input::placeholder{ color:var(--mist); }
.foot__news button{ padding:0 1.2em; background:var(--wine); color:var(--porcelain); font-family:var(--sans); font-weight:500; font-size:11px; letter-spacing:.14em; text-transform:uppercase; }
.foot__bottom{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:16px; padding-block:clamp(26px,3vw,38px); color:var(--mist); font-size:12px; font-family:var(--sans); letter-spacing:.06em; }
.foot__bottom a:hover{ color:var(--porcelain); }

/* ---------------------------------------------------------------- util */
.stack-sm{ display:flex; flex-direction:column; gap:1.4em; }
.mt-1{ margin-top:1.6em; } .mt-2{ margin-top:2.6em; }
.divider{ height:1px; background:var(--line); border:0; }
.on-dark .divider{ background:var(--line-d); }

/* ================================================================ */
/* GLOBAL TYPE BUMP — every text token one step larger (site-wide).  */
/* Appended last so it overrides the base scale above. Tweak here.    */
/* ================================================================ */
.eyebrow{ font-size:clamp(11.5px,.8vw,13.5px); }
.d-hero{ font-size:clamp(44px,7vw,112px); }
.d-1{ font-size:clamp(36px,5vw,74px); }
.d-2{ font-size:clamp(29px,3.5vw,50px); }
.d-3{ font-size:clamp(23px,2.4vw,33px); }
.lead{ font-size:clamp(18.5px,1.6vw,23px); }
.body{ font-size:clamp(16.5px,1.15vw,18.5px); }
.nav__menu{ font-size:clamp(12px,.9vw,13.5px); }
.nav__cta{ font-size:12px; }
.nav__brand{ font-size:26px; }
.crumb{ font-size:12px; }
.irow__t{ font-size:clamp(28px,3.9vw,58px); }
.irow__d{ font-size:15.5px; }
.irow__n{ font-size:12px; }
.pstep__t{ font-size:clamp(24px,2.6vw,37px); }
.pstep__d{ font-size:16.5px; }
.pstep__n{ font-size:12px; }
.pillars-list strong{ font-size:clamp(18.5px,1.7vw,22px); }
.pillars-list span{ font-size:16px; }
.value__t{ font-size:clamp(21px,2.1vw,29px); }
.value__d{ font-size:15.5px; }
.value__n{ font-size:12px; }
.course__t{ font-size:clamp(22px,2.2vw,30px); }
.course__d{ font-size:16px; }
.course__meta{ font-size:11.5px; }
.course__cert{ font-size:13px; }
.frow__n{ font-size:12px; }
.frame__cap{ font-size:11.5px; }
.foot__tag{ font-size:15px; }
.foot h4{ font-size:11.5px; }
.foot__col a{ font-size:16px; }
.foot__bottom{ font-size:13px; }
.foot__news input{ font-size:14px; }
.foot__news button{ font-size:12px; }
.foot__brand{ font-size:32px; }

/* ================================================================ */
/* FORMS (contact + job applications)                                */
/* ================================================================ */
.formwrap{ max-width:780px; }
.form{ display:grid; gap:clamp(20px,2.4vw,30px); }
.form__row{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(18px,2vw,28px); }
@media (max-width:640px){ .form__row{ grid-template-columns:1fr; } }
.field{ display:flex; flex-direction:column; gap:.6em; }
.field label{ font-family:var(--sans); font-size:11.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--stone); }
.on-dark .field label{ color:var(--mist); }
.field input, .field select, .field textarea{
  font-family:var(--sans); font-size:16px; color:var(--midnight);
  background:var(--porcelain-2); border:1px solid var(--line);
  padding:.95em 1.05em; width:100%; outline:none; border-radius:0;
  transition:border-color .3s, background .3s;
}
.field textarea{ resize:vertical; min-height:150px; line-height:1.6; }
.field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--wine); background:#fff; }
.field input::placeholder, .field textarea::placeholder{ color:var(--stone); opacity:.7; }
.on-dark .field input, .on-dark .field select, .on-dark .field textarea{ background:rgba(255,255,255,.04); border-color:var(--line-d); color:var(--porcelain); }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.form__note{ display:none; font-family:var(--sans); font-size:15px; line-height:1.6; padding:1em 1.2em; border:1px solid var(--line); }
.form__note.is-error{ display:block; border-color:var(--wine); color:var(--wine); }
.form__note.is-ok{ display:block; border-color:#3f7d5e; color:#2f6b4d; background:rgba(63,125,94,.06); }
.contact-grid{ display:grid; grid-template-columns:1.3fr .7fr; gap:clamp(40px,6vw,96px); align-items:start; }
@media (max-width:860px){ .contact-grid{ grid-template-columns:1fr; gap:40px; } }
.contact-aside{ display:grid; gap:1.8em; }
.contact-aside .k{ display:block; font-family:var(--sans); font-size:10.5px; letter-spacing:.3em; text-transform:uppercase; color:var(--wine); margin-bottom:.5em; }
.contact-aside .v{ font-family:var(--serif); font-size:clamp(18px,1.6vw,22px); color:var(--midnight); line-height:1.4; }
.on-dark .contact-aside .v{ color:var(--porcelain); }

/* ================================================================ */
/* MOBILE MENU — burger opens a full-screen overlay (<=1300px)       */
/* Placed last so it wins source-order over earlier .nav__menu rules. */
/* ================================================================ */
@media (max-width:1300px){
  .nav__menu{
    display:flex; flex-direction:column; justify-content:safe center; align-items:center;
    gap:clamp(1em,3.4vh,1.5em);
    position:fixed; inset:0; z-index:90;
    padding:calc(env(safe-area-inset-top) + 88px) var(--gutter) calc(env(safe-area-inset-bottom) + 176px);
    overflow-y:auto; -webkit-overflow-scrolling:touch;
    background:var(--porcelain); color:var(--midnight);
    font-size:clamp(18px,2.4vh,21px); letter-spacing:.08em;
    opacity:0; visibility:hidden; transform:translateY(-14px);
    transition:opacity .4s var(--ease), transform .55s var(--ease), visibility .4s;
  }
  .nav--open .nav__menu{ opacity:1; visibility:visible; transform:none; }
  .nav--open{ color:var(--midnight); }
  /* Keep the brand readable on the porcelain overlay while it's open. */
  .nav--open .nav__brand{ position:relative; z-index:95; color:var(--midnight); }
  .nav__burger{ position:relative; z-index:95; }
  .nav__burger span{ transition:transform .3s var(--ease), opacity .3s var(--ease); }
  .nav--open .nav__burger span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
  .nav--open .nav__burger span:nth-child(2){ opacity:0; }
  .nav--open .nav__burger span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

  /* "Request a consultation" — pinned as a prominent action at the foot of
     the overlay. Hidden until the menu opens; reuses the header CTA, so no
     per-page markup change is needed. */
  .nav__cta{
    display:inline-block; position:fixed; left:50%; z-index:92;
    bottom:calc(env(safe-area-inset-bottom) + clamp(28px,6vh,56px));
    background:var(--wine); color:var(--porcelain); border-color:var(--wine);
    padding:1.05em 2.1em; font-size:12.5px; letter-spacing:.18em;
    opacity:0; visibility:hidden; pointer-events:none;
    transform:translateX(-50%) translateY(14px);
    transition:opacity .4s var(--ease), transform .55s var(--ease), visibility .4s;
  }
  .nav--open .nav__cta{ opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%); }

  /* Porcelain mask at the foot of the overlay: the scrolling menu list fades
     out behind it so it never shows through the pinned social icons / CTA. */
  .nav--open::after{
    content:""; position:fixed; left:0; right:0; bottom:0; z-index:91;
    height:calc(env(safe-area-inset-bottom) + 176px);
    background:linear-gradient(to top, var(--porcelain) 80%, rgba(245,243,238,0));
    pointer-events:none;
  }

  /* Social icons: pinned just above the CTA at the foot of the overlay (and
     hidden until it opens), so a long menu list scrolls behind the mask and
     they never overlap the CTA or the menu items. */
  .nav__social{
    gap:30px;
    position:fixed; left:50%; z-index:92;
    bottom:calc(env(safe-area-inset-bottom) + clamp(28px,6vh,56px) + 62px);
    opacity:0; visibility:hidden;
    transform:translateX(-50%) translateY(14px);
    transition:opacity .4s var(--ease), transform .55s var(--ease), visibility .4s;
  }
  .nav--open .nav__social{ opacity:1; visibility:visible; transform:translateX(-50%); }
  .nav__social svg{ width:24px; height:24px; }
}
body.nav-locked{ overflow:hidden; }

/* ================================================================ */
/* BLOG — index cards + single article                               */
/* ================================================================ */
.posts{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(30px,3vw,50px); }
@media (max-width:900px){ .posts{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .posts{ grid-template-columns:1fr; } }
.post{ display:flex; flex-direction:column; }
.post__img{ overflow:hidden; aspect-ratio:3/2; background:var(--midnight-2); margin-bottom:1.3em; }
.post__img img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .8s var(--ease); }
.post:hover .post__img img{ transform:scale(1.04); }
.post__cat{ font-family:var(--sans); font-size:10.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--wine); }
.post__t{ font-family:var(--serif); font-weight:400; font-size:clamp(20px,1.9vw,26px); line-height:1.22; margin:.55em 0 .4em; transition:color .3s; }
.post:hover .post__t{ color:var(--wine); }
.post__ex{ color:var(--stone); font-size:15px; line-height:1.65; flex:1; }
.post__meta{ font-family:var(--sans); font-size:11px; letter-spacing:.08em; color:var(--stone); margin-top:1.1em; }
.post-hero{ max-width:820px; margin-inline:auto; text-align:center; }
.post-hero .post__cat{ display:inline-block; margin-bottom:1em; }
.post-meta{ font-family:var(--sans); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--mist); margin-top:1.4em; }
.article{ max-width:720px; margin-inline:auto; }
.article p{ font-size:clamp(16.5px,1.15vw,18.5px); line-height:1.85; color:var(--slate); margin-bottom:1.3em; }
.article h2{ font-family:var(--serif); font-weight:400; font-size:clamp(24px,2.4vw,34px); line-height:1.25; margin:1.5em 0 .5em; color:var(--midnight); }
.article blockquote{ border-left:2px solid var(--wine); padding-left:1.2em; margin:1.7em 0; font-family:var(--serif); font-size:clamp(20px,2vw,26px); line-height:1.4; color:var(--midnight); }

/* ================================================================ */
/* LINKEDIN — embedded posts                                         */
/* ================================================================ */
.li-feed{ display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:clamp(24px,2.5vw,40px); justify-items:center; }
.li-embed{ width:100%; max-width:504px; }
.li-embed iframe{ width:100%; height:560px; border:1px solid var(--line); background:var(--porcelain-2); }
.li-placeholder{ width:100%; max-width:504px; min-height:380px; border:1px dashed var(--line); display:flex; align-items:center; justify-content:center; text-align:center; padding:2.2em; color:var(--stone); font-family:var(--sans); font-size:14px; line-height:1.7; }
.on-dark .li-placeholder{ border-color:var(--line-d); color:var(--mist); }

/* ================================================================ */
/* NAV — Services dropdown                                           */
/* ================================================================ */
.nav__drop{ position:relative; display:inline-flex; align-items:center; }
.nav__drop-label{ display:inline-flex; align-items:center; gap:.5em; }
.nav__caret{ font-size:.7em; opacity:.7; transition:transform .3s var(--ease); }
.nav__drop:hover .nav__caret{ transform:rotate(180deg); }
.nav__drop-panel{
  position:absolute; top:100%; left:50%; transform:translateX(-50%) translateY(6px);
  display:flex; flex-direction:column; gap:1.05em;
  margin-top:16px; padding:1.4em 1.7em; min-width:240px;
  background:var(--porcelain); color:var(--midnight);
  border:1px solid var(--line); box-shadow:0 24px 60px rgba(16,19,25,.20);
  text-transform:none; letter-spacing:0;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
}
.nav__drop-panel::before{ content:""; position:absolute; left:0; right:0; top:-16px; height:16px; }
.nav__drop-panel a{ font-family:var(--serif); font-size:16px; letter-spacing:.01em; color:var(--midnight); opacity:.82; white-space:nowrap; padding:0; transition:color .25s, opacity .25s; }
.nav__drop-panel a::after{ display:none; }
.nav__drop-panel a:hover{ opacity:1; color:var(--wine); }
.nav__drop:hover .nav__drop-panel, .nav__drop:focus-within .nav__drop-panel{ opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0); }
@media (max-width:1300px){
  .nav__caret{ display:none; }
  /* In the mobile overlay, lay the Services group out as a stacked column and
     reveal its sub-items inline (Estate Management, Corporate Training) so they
     are reachable rather than hidden behind a hover panel. */
  .nav__drop{ display:flex; flex-direction:column; align-items:center; gap:clamp(.7em,2vh,1em); }
  .nav__drop-panel{
    position:static; transform:none; display:flex; flex-direction:column; align-items:center;
    gap:clamp(.7em,2vh,1em); margin:0; padding:0; min-width:0;
    background:none; border:0; box-shadow:none;
    opacity:1; visibility:visible; pointer-events:auto;
  }
  .nav__drop-panel::before{ display:none; }
  .nav__drop-panel a{
    font-family:var(--sans); font-size:.74em; letter-spacing:.1em; text-transform:uppercase;
    opacity:.62; white-space:normal; text-align:center;
  }
}