/* =========================================================
   michaelnadalin.com
   Vibe: Editorial Luxury (warm cream, high-contrast serif, film grain)
   Layout: Editorial Split
   ========================================================= */

:root{
  --cream:      #FDFBF7;
  --cream-2:    #F6F1E9;
  --paper:      #FFFDFA;
  --ink:        #1A1613;
  --ink-2:      #3B342E;
  --muted:      #6E655C;
  --muted-2:    #786C5E;
  --sage:       #2F4A3C;
  --sage-soft:  #4A6B58;
  --hair:       rgba(26,22,19,.09);
  --hair-2:     rgba(26,22,19,.05);
  --shell:      rgba(26,22,19,.028);

  --ease:       cubic-bezier(.32,.72,0,1);
  --ease-soft:  cubic-bezier(.22,1,.36,1);

  --r-out:      2rem;
  --r-in:       1.625rem;   /* r-out minus p-1.5 */
  --max:        1180px;
  --gut:        clamp(1.25rem, 4vw, 3rem);
}

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

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:7rem;
  color-scheme:light;
}
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:"Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  font-size:clamp(1rem,.96rem + .2vw,1.0625rem);
  font-weight:400;
  line-height:1.62;
  letter-spacing:-.008em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
body.locked{ overflow:hidden; }

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }

::selection{ background:var(--sage); color:var(--cream); }

.skip{
  position:absolute; left:-9999px; top:0; z-index:80;
  background:var(--ink); color:var(--cream);
  padding:.75rem 1.25rem; border-radius:999px; font-size:.875rem;
}
.skip:focus{ left:1rem; top:1rem; }

:where(a,button,input,textarea):focus-visible{
  outline:2px solid var(--sage);
  outline-offset:3px;
  border-radius:.5rem;
}

/* ---------- film grain (fixed, never on scrolling content) ---------- */
.grain{
  position:fixed; inset:0; z-index:60; pointer-events:none;
  opacity:.028;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- shell ---------- */
.shell{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--gut); }

/* =========================================================
   TYPE
   ========================================================= */
h1,h2,h3,.pull blockquote,.stat-n{
  font-family:"Fraunces", ui-serif, Georgia, serif;
  font-variation-settings:"SOFT" 0,"WONK" 0;
  font-weight:400;
  letter-spacing:-.022em;
  line-height:1.06;
  margin:0;
}

h1{ font-size:clamp(2.35rem,1.55rem + 3.6vw,3.85rem); }
h2{ font-size:clamp(1.9rem,1.35rem + 2.4vw,3rem); line-height:1.1; }
h3{ font-size:clamp(1.2rem,1.08rem + .5vw,1.4rem); line-height:1.22; letter-spacing:-.015em; }

.eyebrow{
  display:inline-block; margin:0 0 1.4rem;
  font-family:"Plus Jakarta Sans", sans-serif;
  font-size:.625rem; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--sage);
  border:1px solid rgba(47,74,60,.2);
  background:rgba(47,74,60,.045);
  border-radius:999px;
  padding:.4rem .85rem .35rem;
}

.ilink{
  color:var(--ink); text-decoration:none;
  background-image:linear-gradient(var(--sage),var(--sage));
  background-size:100% 1px; background-repeat:no-repeat; background-position:0 100%;
  padding-bottom:.05em;
  transition:background-size .5s var(--ease), color .5s var(--ease);
}
.ilink:hover{ color:var(--sage); background-size:0% 1px; background-position:100% 100%; }

/* =========================================================
   BUTTONS  (nested "button-in-button" orb)
   ========================================================= */
.btn{
  --orb:rgba(255,255,255,.14);
  display:inline-flex; align-items:center; gap:.75rem;
  padding:.5rem .5rem .5rem 1.4rem;
  border-radius:999px; border:1px solid transparent;
  font-size:.9375rem; font-weight:500; letter-spacing:-.01em;
  text-decoration:none; cursor:pointer;
  transition:transform .5s var(--ease), background-color .5s var(--ease),
             box-shadow .5s var(--ease), color .5s var(--ease), border-color .5s var(--ease);
  will-change:transform;
}
.btn-orb{
  width:2rem; height:2rem; border-radius:999px;
  display:grid; place-items:center; flex:0 0 auto;
  background:var(--orb);
  transition:transform .5s var(--ease), background-color .5s var(--ease);
}
.btn:hover .btn-orb{ transform:translate3d(2px,-1px,0) scale(1.06); }
.btn:active{ transform:scale(.977); }

.btn-dark{
  background:var(--ink); color:var(--cream);
  box-shadow:0 1px 1px rgba(26,22,19,.06),
             0 12px 28px -14px rgba(26,22,19,.5),
             inset 0 1px 0 rgba(255,255,255,.09);
}
.btn-dark:hover{ background:var(--sage); }

.btn-ghost{
  --orb:rgba(26,22,19,.06);
  background:rgba(255,255,255,.6);
  color:var(--ink);
  border-color:var(--hair);
  box-shadow:0 1px 1px rgba(26,22,19,.03), 0 10px 24px -18px rgba(26,22,19,.4);
}
.btn-ghost:hover{ background:var(--paper); border-color:rgba(26,22,19,.16); }

/* =========================================================
   DOUBLE BEZEL  (outer shell + inner core)
   ========================================================= */
.bezel{
  background:var(--shell);
  border:1px solid var(--hair-2);
  border-radius:var(--r-out);
  padding:.375rem;
}
.bezel-core{
  background:var(--paper);
  border:1px solid var(--hair);
  border-radius:var(--r-in);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.9),
             0 1px 2px rgba(26,22,19,.03),
             0 24px 48px -32px rgba(26,22,19,.28);
}

/* =========================================================
   NAV  (floating glass pill, detached)
   ========================================================= */
.nav-wrap{
  position:fixed; z-index:70; top:0; left:0; right:0;
  padding:1.5rem var(--gut) 0;
  display:flex; justify-content:center;
  pointer-events:none;
}
.nav{
  pointer-events:auto;
  display:flex; align-items:center; gap:1.25rem;
  width:max-content; max-width:100%;
  padding:.4375rem .4375rem .4375rem 1.125rem;
  border-radius:999px;
  background:rgba(253,251,247,.72);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  backdrop-filter:saturate(160%) blur(14px);
  border:1px solid rgba(26,22,19,.07);
  box-shadow:0 1px 1px rgba(26,22,19,.03), 0 18px 40px -26px rgba(26,22,19,.45);
  transition:box-shadow .6s var(--ease), background-color .6s var(--ease);
}
body.scrolled .nav{
  background:rgba(253,251,247,.86);
  box-shadow:0 1px 1px rgba(26,22,19,.04), 0 22px 50px -26px rgba(26,22,19,.55);
}

.nav-mark{ display:flex; align-items:center; gap:.6rem; text-decoration:none; }
.nav-mark-glyph{
  font-family:"Fraunces",serif; font-size:.8125rem; letter-spacing:.02em;
  width:1.75rem; height:1.75rem; border-radius:999px;
  display:grid; place-items:center;
  background:var(--ink); color:var(--cream);
}
.nav-mark-name{ font-size:.875rem; font-weight:500; letter-spacing:-.01em; white-space:nowrap; }

.nav-links{
  display:flex; align-items:center; gap:.25rem;
  list-style:none; margin:0; padding:0 .25rem;
}
.nav-links a{
  display:block; padding:.4rem .75rem; border-radius:999px;
  font-size:.875rem; color:var(--muted); text-decoration:none;
  transition:color .45s var(--ease), background-color .45s var(--ease);
}
.nav-links a:hover{ color:var(--ink); background:rgba(26,22,19,.05); }

.nav-cta{ font-size:.875rem; padding:.375rem .375rem .375rem 1.125rem; }
.nav-cta .btn-orb{ width:1.75rem; height:1.75rem; }

.nav-burger{
  display:none;
  width:2.25rem; height:2.25rem; border-radius:999px;
  border:1px solid var(--hair); background:rgba(255,255,255,.6);
  position:relative; cursor:pointer; padding:0;
}
.nav-burger span{
  position:absolute; left:50%; width:.875rem; height:1.25px;
  background:var(--ink); border-radius:2px;
  transition:transform .55s var(--ease), opacity .3s var(--ease);
}
.nav-burger span:nth-child(1){ transform:translate(-50%,-3.5px); top:50%; }
.nav-burger span:nth-child(2){ transform:translate(-50%,3.5px);  top:50%; }
.nav-burger[aria-expanded="true"] span:nth-child(1){ transform:translate(-50%,0) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2){ transform:translate(-50%,0) rotate(-45deg); }

/* ---------- full-screen menu ---------- */
.menu{
  position:fixed; inset:0; z-index:65;
  background:rgba(253,251,247,.82);
  -webkit-backdrop-filter:saturate(160%) blur(18px);
  backdrop-filter:saturate(160%) blur(18px);
  display:grid; place-items:center;
  opacity:0; transition:opacity .55s var(--ease);
}
.menu[hidden]{ display:none; }
.menu.open{ opacity:1; }
.menu-inner{ display:flex; flex-direction:column; gap:.35rem; padding:var(--gut); width:100%; max-width:26rem; }
.menu-inner a{
  font-family:"Fraunces",serif; font-size:clamp(2rem,10vw,2.75rem);
  letter-spacing:-.02em; text-decoration:none;
  display:flex; align-items:baseline; gap:1rem;
  padding:.35rem 0;
  opacity:0; transform:translate3d(0,2.5rem,0);
  transition:opacity .7s var(--ease), transform .7s var(--ease), color .4s var(--ease);
}
.menu.open .menu-inner a{ opacity:1; transform:none; }
.menu.open .menu-inner a:nth-child(1){ transition-delay:.08s; }
.menu.open .menu-inner a:nth-child(2){ transition-delay:.14s; }
.menu.open .menu-inner a:nth-child(3){ transition-delay:.20s; }
.menu.open .menu-inner a:nth-child(4){ transition-delay:.26s; }
.menu-inner a:hover{ color:var(--sage); }
.menu-num{
  font-family:"Plus Jakarta Sans",sans-serif; font-size:.625rem; font-weight:500;
  letter-spacing:.2em; color:var(--muted-2);
}

/* =========================================================
   HERO  (editorial split)
   ========================================================= */
.hero{ padding:clamp(8rem,7rem + 9vw,12.5rem) 0 clamp(3rem,2rem + 4vw,5rem); }
.hero-grid{
  display:grid; grid-template-columns:1.15fr .85fr;
  gap:clamp(2.5rem,5vw,5rem); align-items:center;
}
.h1-name{
  display:block;
  font-size:.36em; letter-spacing:.02em; font-weight:500;
  font-family:"Plus Jakarta Sans",sans-serif;
  color:var(--muted); text-transform:none;
  margin-bottom:1.1rem;
}
.h1-line{ display:block; text-wrap:balance; }
.h1-line::after{
  content:""; display:block; width:3.25rem; height:1px;
  background:var(--sage); opacity:.5; margin-top:1.75rem;
}
.lede{
  margin:1.75rem 0 0; max-width:34rem;
  font-size:clamp(1.0625rem,1rem + .35vw,1.1875rem);
  color:var(--ink-2); line-height:1.68;
}
.hero-actions{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:2.25rem; }

.bezel-portrait{ --r-out:2.25rem; --r-in:1.875rem; }
.bezel-portrait .bezel-core{ overflow:hidden; background:var(--cream-2); }
.bezel-portrait img{ width:100%; aspect-ratio:4/5; object-fit:cover; }
.portrait-cap{
  margin:1rem .5rem 0; font-size:.75rem; letter-spacing:.04em;
  color:var(--muted-2); text-align:center;
}
.portrait-cap span{ opacity:.5; margin-inline:.35rem; }

/* =========================================================
   STATS
   ========================================================= */
.stats{ padding:clamp(2rem,1.5rem + 2vw,3.5rem) 0; }
.bezel-stats{ --r-out:1.75rem; --r-in:1.375rem; }
.stats-grid{ display:grid; grid-template-columns:repeat(4,1fr); }
.stat{
  padding:clamp(1.75rem,1.4rem + 1.2vw,2.5rem) clamp(1.25rem,1rem + 1vw,1.75rem);
  border-right:1px solid var(--hair-2);
  display:flex; flex-direction:column; gap:.55rem;
}
.stat:last-child{ border-right:0; }
.stat-n{ font-size:clamp(2.1rem,1.7rem + 1.6vw,2.9rem); line-height:1; color:var(--sage); }
.stat-l{ font-size:.8125rem; line-height:1.45; color:var(--muted); max-width:12rem; }

/* =========================================================
   SECTIONS
   ========================================================= */
.section{ padding:clamp(5rem,3.75rem + 5.5vw,8rem) 0; }
.section-alt{ background:var(--cream-2); }

.sec-head{ max-width:38rem; margin-bottom:clamp(2.75rem,2rem + 3vw,4.5rem); }
.sec-head h2{ text-wrap:balance; }

/* ---------- cards ---------- */
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; }
.card .bezel-core{ padding:clamp(1.75rem,1.4rem + 1.2vw,2.375rem); height:100%; }
.card-num{
  display:block; font-size:.6875rem; font-weight:500;
  letter-spacing:.2em; color:var(--muted-2); margin-bottom:2.25rem;
}
.card h3{ margin-bottom:.85rem; }
.card p{ margin:0; color:var(--muted); font-size:.9375rem; line-height:1.66; }
.card{ transition:transform .7s var(--ease); will-change:transform; }
.card:hover{ transform:translate3d(0,-4px,0); }

/* ---------- approach ---------- */
.approach-grid{
  display:grid; grid-template-columns:.85fr 1.15fr;
  gap:clamp(2.5rem,5vw,5.5rem); align-items:start;
}
.approach-head{ position:sticky; top:8rem; }
.approach-head h2{ text-wrap:balance; }
.approach-note{ margin:1.5rem 0 0; color:var(--muted); font-size:.9375rem; max-width:24rem; }

.steps{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.step{
  display:grid; grid-template-columns:auto 1fr; gap:1.5rem;
  padding:1.875rem 0; border-bottom:1px solid var(--hair);
}
.step:first-child{ padding-top:0; }
.step:last-child{ border-bottom:0; padding-bottom:0; }
.step-n{
  font-size:.6875rem; font-weight:500; letter-spacing:.2em;
  color:var(--sage); padding-top:.45rem;
}
.step h3{ margin-bottom:.6rem; }
.step p{ margin:0; color:var(--muted); font-size:.9375rem; line-height:1.66; max-width:34rem; }

.pull{
  margin:clamp(4rem,3rem + 4vw,6.5rem) auto 0;
  max-width:44rem; text-align:center;
}
.pull blockquote{
  margin:0; font-size:clamp(1.4rem,1.1rem + 1.5vw,2.1rem);
  line-height:1.28; letter-spacing:-.02em; text-wrap:balance;
  font-style:italic;
}
.pull blockquote::before{
  content:""; display:block; width:1px; height:2.5rem;
  background:var(--sage); opacity:.35; margin:0 auto 2rem;
}

/* ---------- beyond ---------- */
.beyond-grid{
  display:grid; grid-template-columns:.9fr 1.1fr;
  gap:clamp(2.5rem,5vw,5.5rem); align-items:start;
}
.beyond-copy p{ margin:0 0 1.15rem; color:var(--ink-2); font-size:1.0625rem; line-height:1.68; max-width:34rem; }
.beyond-copy p:last-child{ margin-bottom:0; color:var(--muted); }

/* ---------- links list ---------- */
.links{ list-style:none; margin:0; padding:0; border-top:1px solid var(--hair); }
.links li{ border-bottom:1px solid var(--hair); }
.links a{
  display:grid; grid-template-columns:minmax(0,16.5rem) 1fr auto;
  align-items:center; gap:1.5rem;
  padding:1.6rem .5rem; text-decoration:none;
  transition:padding .6s var(--ease), background-color .6s var(--ease);
}
.links a:hover{ padding-inline:1.25rem .75rem; background:rgba(255,255,255,.55); }
.link-t{ font-family:"Fraunces",serif; font-size:1.2rem; letter-spacing:-.015em; }
.link-d{ font-size:.875rem; color:var(--muted); }
.link-arrow{
  font-size:1rem; color:var(--muted-2);
  transition:transform .6s var(--ease), color .6s var(--ease);
}
.links a:hover .link-arrow{ transform:translate3d(3px,-3px,0); color:var(--sage); }

/* =========================================================
   CONTACT
   ========================================================= */
.contact-grid{
  display:grid; grid-template-columns:.9fr 1.1fr;
  gap:clamp(2.5rem,5vw,5rem); align-items:start;
}
.contact-head{ position:sticky; top:8rem; }
.contact-head h2{ text-wrap:balance; }
.contact-note{ margin:1.5rem 0 0; color:var(--muted); font-size:.9375rem; max-width:26rem; }
.contact-alt{ margin:1.5rem 0 0; font-size:.9375rem; color:var(--muted); }

.bezel-form .bezel-core{ padding:clamp(1.5rem,1.2rem + 1.4vw,2.5rem); }

.field{ margin-bottom:1.125rem; }
.field label{
  display:block; margin-bottom:.5rem;
  font-size:.75rem; font-weight:500; letter-spacing:.06em;
  text-transform:uppercase; color:var(--muted);
}
.field .opt{ text-transform:none; letter-spacing:0; color:var(--muted-2); font-weight:400; }

.field input,.field textarea{
  width:100%; font:inherit; font-size:.9375rem; color:var(--ink);
  background:var(--cream); border:1px solid var(--hair);
  border-radius:.875rem; padding:.85rem 1rem;
  box-shadow:inset 0 1px 2px rgba(26,22,19,.035);
  transition:border-color .45s var(--ease), background-color .45s var(--ease), box-shadow .45s var(--ease);
}
.field textarea{ resize:vertical; min-height:8rem; line-height:1.58; }
.field input::placeholder,.field textarea::placeholder{ color:var(--muted-2); opacity:.75; }
.field input:focus,.field textarea:focus{
  outline:none; background:var(--paper);
  border-color:rgba(47,74,60,.4);
  box-shadow:inset 0 1px 2px rgba(26,22,19,.02), 0 0 0 3px rgba(47,74,60,.09);
}
.field.invalid input,.field.invalid textarea{ border-color:rgba(150,55,40,.5); }

.hp{ position:absolute; left:-9999px; opacity:0; }

.btn-submit{ margin-top:.75rem; border:0; font-family:inherit; }
.btn-submit[disabled]{ opacity:.55; pointer-events:none; }

.form-status{
  margin:1rem 0 0; font-size:.875rem; min-height:1.25rem;
  color:var(--sage);
}
.form-status.error{ color:#8C3A2A; }

/* =========================================================
   FOOTER
   ========================================================= */
.footer{
  background:var(--ink); color:var(--cream);
  padding:clamp(4rem,3rem + 4vw,6rem) 0 2.25rem;
}
.footer-grid{
  display:grid; grid-template-columns:1.4fr repeat(3,1fr);
  gap:clamp(2rem,4vw,3.5rem);
  padding-bottom:clamp(3rem,2rem + 3vw,4.5rem);
}
.footer-name{
  font-family:"Fraunces",serif; font-size:1.5rem;
  letter-spacing:-.02em; margin:0 0 .75rem;
}
.footer-loc{ margin:0; font-size:.875rem; line-height:1.6; color:rgba(253,251,247,.5); }
.footer-h{
  margin:0 0 1.125rem; font-size:.625rem; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase; color:rgba(253,251,247,.52);
}
.footer-col{ display:flex; flex-direction:column; gap:.6rem; }
.footer-col a{
  font-size:.875rem; text-decoration:none; width:max-content;
  color:rgba(253,251,247,.72);
  transition:color .45s var(--ease), transform .45s var(--ease);
}
.footer-col a:hover{ color:var(--cream); transform:translate3d(2px,0,0); }

.footer-base{
  display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between;
  padding-top:2rem; border-top:1px solid rgba(253,251,247,.11);
  font-size:.8125rem; color:rgba(253,251,247,.5);
}
.footer-base p{ margin:0; }
.footer-base a{ text-decoration:none; }
.footer-base a:hover{ color:var(--cream); }

/* =========================================================
   SCROLL REVEAL
   ========================================================= */
.reveal{
  opacity:0; transform:translate3d(0,3rem,0); filter:blur(6px);
  transition:opacity .9s var(--ease-soft), transform .9s var(--ease-soft), filter .9s var(--ease-soft);
  will-change:transform,opacity;
}
.reveal.in{ opacity:1; transform:none; filter:blur(0); }
.reveal[data-delay="1"]{ transition-delay:.09s; }
.reveal[data-delay="2"]{ transition-delay:.18s; }
.reveal[data-delay="3"]{ transition-delay:.27s; }
.reveal[data-delay="4"]{ transition-delay:.36s; }

@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; filter:none; transition:none; }
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1024px){
  .hero-grid{ grid-template-columns:1fr .8fr; }
  .stats-grid{ grid-template-columns:repeat(2,1fr); }
  .stat:nth-child(2){ border-right:0; }
  .stat:nth-child(-n+2){ border-bottom:1px solid var(--hair-2); }
  .cards{ grid-template-columns:1fr; }
  .approach-grid,.beyond-grid,.contact-grid{ grid-template-columns:1fr; }
  .approach-head,.contact-head{ position:static; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
}

@media (max-width:767px){
  :root{ --r-out:1.5rem; --r-in:1.125rem; }
  .nav-links{ display:none; }
  .nav-cta{ display:none; }
  .nav-burger{ display:block; }
  .nav{ width:100%; justify-content:space-between; }

  .hero{ padding-top:7.5rem; }
  .hero-grid{ grid-template-columns:1fr; gap:2.75rem; }
  .hero-portrait{ order:-1; max-width:20rem; }
  .portrait-cap{ text-align:left; }
  .h1-line::after{ margin-top:1.25rem; }
  .lede{ font-size:1rem; }
  .hero-actions .btn{ width:100%; justify-content:space-between; }

  .stats-grid{ grid-template-columns:1fr; }
  .stat{ border-right:0; border-bottom:1px solid var(--hair-2); }
  .stat:last-child{ border-bottom:0; }
  .stat-l{ max-width:none; }

  .links a{ grid-template-columns:1fr auto; row-gap:.35rem; padding-block:1.35rem; }
  .link-d{ grid-column:1; }
  .link-arrow{ grid-row:1; grid-column:2; }
  .links a:hover{ padding-inline:.5rem; }

  .step{ grid-template-columns:1fr; gap:.75rem; }
  .step-n{ padding-top:0; }

  .footer-grid{ grid-template-columns:1fr; gap:2.25rem; }
}

.nb{ white-space:nowrap; }