/* ==========================================================================
   MPRESS NYC — styles (fresh build)
   Warm editorial · ivory + soft black + single champagne accent.
   Calm by default: typography and whitespace do the work; minimal boxes.
   ========================================================================== */

:root{
  --paper:#f4f0e7; --panel:#ece5d6; --card:#fffdf8;
  --ink:#161309; --ink2:#2a251b; --dark:#14120c;
  --mute:#6b6456; --faint:#a49c8b; --line:#d9d1c0;
  --accent:#a3813f; --accent-soft:#efe4cf;

  --serif:"Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans:"Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --edge:clamp(22px,5.5vw,110px);
  --nav-h:68px;
  --maxw:1340px;

  --ease:cubic-bezier(.2,.6,.2,1);
}

@media (prefers-color-scheme: dark){ :root{ color-scheme: only light; } }

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; scroll-padding-top:88px; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0; background:var(--paper); color:var(--ink2);
  font-family:var(--sans); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }

.skip{ position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--ink); color:var(--paper); padding:12px 18px; font-family:var(--mono); font-size:12px; }
.skip:focus{ left:12px; top:12px; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

/* ---------- Shared type ---------- */
.h-display{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(34px,5.6vw,76px); line-height:1; letter-spacing:-.02em;
  color:var(--ink); margin:0;
}
.h-display em{ font-style:italic; }
.body{
  font-size:clamp(15px,1.15vw,18px); color:var(--mute); line-height:1.65; max-width:48ch;
}
.section__num{
  font-family:var(--mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--accent); margin-bottom:clamp(30px,4.5vw,58px);
}
.section__num--dark{ color:var(--accent); }
.kbd{ font-family:var(--mono); font-size:.82em; letter-spacing:.04em; color:var(--accent); white-space:nowrap; }

/* ---------- Logo ---------- */
.lm{
  display:inline-flex; align-items:center; position:relative;
  text-decoration:none; color:var(--ink); width:112px; height:56px; flex:0 0 auto;
}
.lm svg{ position:absolute; inset:0; width:100%; height:100%; }
.lm .w{ font-family:var(--serif); font-weight:600; font-size:26px; letter-spacing:-.01em; line-height:1; margin:0 auto; padding-left:6px; }
.lm .n{
  position:absolute; bottom:-2px; left:50%; transform:translateX(-50%);
  background:var(--paper); padding:0 6px;
  font-family:var(--sans); font-weight:500; font-size:11px; letter-spacing:.22em; color:var(--ink);
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.5em;
  font-family:var(--sans); font-weight:500; font-size:14px;
  padding:13px 22px; background:var(--ink); color:var(--paper);
  border:1px solid var(--ink); border-radius:2px; text-decoration:none; cursor:pointer;
  transition:background .35s var(--ease), color .35s var(--ease);
}
.btn:hover{ background:transparent; color:var(--ink); }
.btn--sm{ padding:9px 16px; font-size:12.5px; }
.btn--ghost{ background:transparent; color:var(--ink); }
.btn--ghost:hover{ background:var(--ink); color:var(--paper); }
.btn--onDark{ background:var(--paper); color:var(--ink); border-color:var(--paper); }
.btn--onDark:hover{ background:transparent; color:var(--paper); }

/* ==========================================================================
   NAV
   ========================================================================== */
.nav{ position:fixed; inset:0 0 auto 0; z-index:100;
  border-bottom:1px solid transparent; transition:background .4s var(--ease), border-color .4s var(--ease); }
.nav.is-stuck{
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:saturate(1.1) blur(8px); border-bottom-color:var(--line);
}
.nav__inner{ max-width:var(--maxw); margin:0 auto; padding:10px var(--edge);
  display:flex; align-items:center; justify-content:space-between; gap:24px; }
.nav__links{ display:flex; gap:clamp(18px,2.4vw,38px); margin-left:auto; margin-right:clamp(18px,2.4vw,38px); }
.nav__links a{ font-family:var(--mono); font-size:12px; letter-spacing:.03em; text-transform:uppercase;
  color:var(--ink2); text-decoration:none; position:relative; padding:4px 0; }
.nav__links a::after{ content:""; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background:var(--accent); transition:right .35s var(--ease); }
.nav__links a:hover::after{ right:0; }
@media (max-width:760px){ .nav__links{ display:none; } }

/* ==========================================================================
   SECTION SHELL
   ========================================================================== */
.section{ max-width:var(--maxw); margin:0 auto; padding:clamp(76px,11vw,150px) var(--edge); position:relative; }
.panel{ background:var(--panel); max-width:none; }
.panel > *{ max-width:var(--maxw); margin-left:auto; margin-right:auto; }
.dark{ background:var(--dark); color:var(--accent-soft); max-width:none; }
.dark > *{ max-width:var(--maxw); margin-left:auto; margin-right:auto; }
.dark .h-display{ color:var(--paper); }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  min-height:100svh; max-width:var(--maxw); margin:0 auto;
  padding:calc(var(--nav-h) + 6vh) var(--edge) clamp(44px,7vh,80px);
  display:flex; flex-direction:column; justify-content:center; gap:clamp(26px,5vh,60px);
}
.hero__kicker{
  font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent); margin:0;
}
.hero__h1{
  margin:0; font-family:var(--serif); font-weight:500;
  font-size:clamp(42px,10.4vw,150px); line-height:.94; letter-spacing:-.025em; color:var(--ink);
}
.hero__h1 em{ font-style:italic; }
.reveal{ display:block; overflow:hidden; }
.reveal > span{ display:block; transform:translateY(105%); }
.reveal--em > span{ padding-bottom:.08em; }

.hero__foot{ display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(20px,4vw,56px); align-items:end; }
.hero__lead{
  font-family:var(--serif); font-style:italic; font-weight:500;
  font-size:clamp(21px,2.6vw,34px); line-height:1.15; color:var(--ink); max-width:18ch; margin:0;
}
.hero__sub{ color:var(--mute); font-size:clamp(14px,1.1vw,16px); max-width:44ch; margin:0; }
.hero__cta{ grid-column:1 / -1; display:flex; gap:14px; flex-wrap:wrap; margin-top:4px; }
@media (max-width:760px){ .hero__foot{ grid-template-columns:1fr; gap:22px; } }

/* ==========================================================================
   01 · SERVICES — quiet typographic rows (no boxes)
   ========================================================================== */
.services__head{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,5vw,70px);
  align-items:end; margin-bottom:clamp(40px,6vw,76px);
}
.services__head .h-display{ max-width:12ch; }
.svc-rows{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.svc-row{
  display:grid; grid-template-columns:62px minmax(200px,1.1fr) 1.4fr;
  gap:clamp(12px,3vw,48px); align-items:baseline;
  padding:clamp(24px,3.2vw,40px) 0; border-bottom:1px solid var(--line);
  opacity:0; transform:translateY(14px);
  transition:opacity .6s var(--ease), transform .6s var(--ease);
}
.is-on.svc-row{ opacity:1; transform:none; }
.svc-row__num{ font-family:var(--mono); font-size:13px; color:var(--faint); }
.svc-row__name{
  font-family:var(--serif); font-weight:500; font-size:clamp(28px,3.8vw,52px);
  line-height:1; color:var(--ink); margin:0; transition:color .35s var(--ease);
}
.svc-row:hover .svc-row__name{ color:var(--accent); }
.svc-row__desc{ color:var(--mute); font-size:clamp(14px,1.05vw,16px); margin:0; line-height:1.55; }
@media (max-width:760px){
  .services__head{ grid-template-columns:1fr; }
  .svc-row{ grid-template-columns:40px 1fr; row-gap:8px; }
  .svc-row__desc{ grid-column:2; }
}

/* ==========================================================================
   02 · APPROACH (panel)
   ========================================================================== */
.approach__h{ margin-bottom:clamp(44px,6.5vw,80px); max-width:16ch; }
.steps{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(16px,2.4vw,34px); }
.step{
  padding-top:22px; border-top:1px solid var(--ink);
  opacity:0; transform:translateY(14px);
  transition:opacity .6s var(--ease), transform .6s var(--ease); transition-delay:calc(var(--s) * 90ms);
}
.is-on.step{ opacity:1; transform:none; }
.step__num{ font-family:var(--mono); font-size:12px; color:var(--accent); }
.step__name{ font-family:var(--serif); font-weight:500; font-size:clamp(23px,2.2vw,32px); color:var(--ink); margin:12px 0 10px; line-height:1; }
.step p{ color:var(--mute); font-size:14.5px; margin:0; line-height:1.55; }
@media (max-width:820px){ .steps{ grid-template-columns:repeat(2,1fr); gap:28px; } }
@media (max-width:460px){ .steps{ grid-template-columns:1fr; } }

/* ==========================================================================
   03 · PROOF
   ========================================================================== */
.proof__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,80px); align-items:start; }
.proof__body{ display:flex; flex-direction:column; gap:clamp(22px,2.6vw,34px); align-items:flex-start; }
.pipe-inline{
  font-family:var(--serif); font-size:clamp(20px,2.2vw,30px); color:var(--ink);
  line-height:1.5; margin:0; max-width:24ch;
}
.pipe-inline i{ font-style:normal; color:var(--accent); padding:0 .25em; }
@media (max-width:760px){ .proof__grid{ grid-template-columns:1fr; } }

/* ==========================================================================
   CONTACT (dark)
   ========================================================================== */
.contact{ text-align:center; }
.contact__display{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(54px,13vw,170px); line-height:.92; letter-spacing:-.02em;
  color:var(--paper); margin:0 0 clamp(20px,3vw,30px);
}
.contact__display em{ font-style:italic; color:var(--accent); }
.contact__lead{ color:var(--faint); max-width:52ch; margin:0 auto clamp(40px,5vw,60px); font-size:clamp(15px,1.2vw,18px); }
.contact__form{ max-width:720px; margin:0 auto; text-align:left; display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.field{ display:flex; flex-direction:column; gap:8px; }
.field--full{ grid-column:1 / -1; }
.field label{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); }
.field input,.field textarea{
  background:transparent; border:0; border-bottom:1px solid rgba(163,129,63,.4);
  color:var(--paper); font-family:var(--sans); font-size:16px; padding:10px 2px; border-radius:0; resize:vertical;
  transition:border-color .3s var(--ease);
}
.field input:focus,.field textarea:focus{ outline:none; border-bottom-color:var(--accent); }
.contact__submit{ grid-column:1 / -1; display:flex; align-items:center; gap:22px; flex-wrap:wrap; margin-top:6px; }
.contact__or{ font-size:13.5px; color:var(--faint); }
.contact__or a{ color:var(--accent-soft); }
.contact__status{ grid-column:1 / -1; font-family:var(--mono); font-size:12.5px; color:var(--accent-soft); margin:4px 0 0; min-height:1.2em; }
@media (max-width:600px){ .contact__form{ grid-template-columns:1fr; } }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer{ background:var(--dark); color:var(--faint); padding:clamp(44px,6vw,80px) var(--edge) clamp(26px,4vw,40px); }
.footer > *{ max-width:var(--maxw); margin-left:auto; margin-right:auto; }
.footer__top{
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
  padding-bottom:clamp(32px,4.5vw,52px); border-bottom:1px solid rgba(244,240,231,.12);
}
.footer .lm{ color:var(--paper); }
.footer .lm .n{ background:var(--dark); color:var(--paper); }
.footer__tag{ font-family:var(--serif); font-style:italic; font-size:clamp(19px,2.2vw,28px); color:var(--paper); margin:0; }
.footer__legal{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding-top:clamp(24px,3vw,34px);
  font-family:var(--mono); font-size:11.5px; letter-spacing:.03em; color:var(--faint);
}
.footer__legal a{ color:var(--faint); text-decoration:none; }
.footer__legal a:hover{ color:var(--paper); }

/* ==========================================================================
   REVEAL PRIMITIVES
   ========================================================================== */
.reveal-up{ opacity:0; transform:translateY(18px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal-up.is-on{ opacity:1; transform:none; }

/* Hero load reveal */
.loaded .reveal > span{ transform:translateY(0); transition:transform 1s var(--ease); }
.loaded .reveal--em > span{ transition-delay:.1s; }
.loaded .hero__kicker.reveal-up{ opacity:1; transform:none; transition-delay:.05s; }
.loaded .hero__lead.reveal-up{ opacity:1; transform:none; transition-delay:.4s; }
.loaded .hero__sub.reveal-up{ opacity:1; transform:none; transition-delay:.5s; }
.loaded .hero__cta.reveal-up{ opacity:1; transform:none; transition-delay:.6s; }

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ transition:none !important; animation:none !important; }
  .reveal > span{ transform:none !important; }
  .reveal-up{ opacity:1 !important; transform:none !important; }
  .svc-row,.step{ opacity:1 !important; transform:none !important; }
}