/* Meridian Advisory — The Folio
   Scene: a leather folio open on a boardroom table at dusk, one brass lamp on it.
   Structural signature: a brass SPINE runs down the page like the bound edge of a
   document, with the section numeral set into it. The numerals are real — this is
   a firm that produces documents, and the page is one.
   Rules: nothing is rounded. Nothing casts a shadow. Depth comes from full-bleed
   ink blocks. Brass is the only colour in the system. */

:root{
  --stock:#EFEBE2;      /* cream folio paper */
  --stock-2:#E4DFD3;
  --ink:#16211C;        /* the dark the page falls into */
  --ink-deep:#0E1614;
  --brass:#A97C3F;
  --on-ink:#E8E4DA;
  --ink-70:rgba(22,33,28,.72);
  --ink-45:rgba(22,33,28,.46);
  --on-ink-70:rgba(232,228,218,.7);

  --display:'Spectral',Georgia,serif;
  --body:'Inter Tight',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --page:1140px;
  --pad:clamp(20px,5vw,72px);
  --spine:clamp(46px,7vw,104px);   /* width of the bound edge */
}

*,*::before,*::after{ box-sizing:border-box; }
@media (prefers-reduced-motion:reduce){ *{ transition:none !important; } }

body{
  margin:0; background:var(--stock); color:var(--ink);
  font-family:var(--body); font-size:clamp(16px,1.05vw,17.5px); line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{ font-family:var(--display); font-weight:600; margin:0; line-height:1.04; letter-spacing:-.03em; }
a{ color:inherit; }
/* height:auto is required: the width/height attributes on every <img> would
   otherwise beat aspect-ratio and render images at their intrinsic height. */
img,svg{ max-width:100%; height:auto; }
:focus-visible{ outline:2px solid var(--brass); outline-offset:3px; }

/* the scale contrast is the whole tone: 10px mono against 100px serif */
.label{
  font-family:var(--mono); font-size:10px; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:var(--brass);
  margin:0 0 18px;
}

/* ---- nav: sits on the stock, no chrome at all */
.nav{
  max-width:var(--page); margin:0 auto; padding:26px var(--pad);
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.brand{ display:flex; align-items:center; gap:12px; font-family:var(--display); font-size:18px; letter-spacing:-.02em; text-decoration:none; }
.mark{ width:22px; height:22px; color:var(--brass); }
.links{ display:flex; gap:32px; }
.links a{
  font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-70); text-decoration:none;
}
.links a:hover{ color:var(--brass); }
@media (max-width:820px){ .links{ display:none; } }

/* ---- buttons: cut edges, no radius, no shadow */
.btn{
  display:inline-block; cursor:pointer; text-decoration:none; text-align:center;
  background:var(--ink); color:var(--stock); border:1px solid var(--ink); border-radius:0;
  padding:15px 30px;
  font-family:var(--mono); font-size:12px; letter-spacing:.13em; text-transform:uppercase;
  transition:background .18s ease, color .18s ease, border-color .18s ease;
}
.btn:hover{ background:var(--brass); border-color:var(--brass); color:var(--ink-deep); }

/* ================= THE SPINE =================
   Every section is laid out against a bound edge. The numeral lives in it. */
.section,.hero{
  max-width:var(--page); margin:0 auto; padding:clamp(50px,6vw,96px) var(--pad);
}
.section{
  display:grid; grid-template-columns:var(--spine) 1fr; gap:0;
  border-top:1px solid rgba(22,33,28,.2);
  position:relative;
}
.section::before{                       /* the brass rule of the bound edge */
  content:''; position:absolute; top:0; bottom:0;
  left:calc(var(--pad) + var(--spine) - 1px); width:1px; background:var(--brass); opacity:.5;
}
.section > .numeral{
  font-family:var(--display); font-size:clamp(20px,2.2vw,28px); color:var(--brass);
  line-height:1; padding-top:4px;
}
.section > .col{ padding-left:clamp(20px,3vw,48px); }
@media (max-width:720px){
  .section{ grid-template-columns:1fr; }
  .section::before{ display:none; }
  .section > .numeral{ margin-bottom:20px; }
  .section > .col{ padding-left:0; }
}

/* on the ink sections the spine flips to brass-on-dark */
.section--ink{
  max-width:none; background:var(--ink-deep); color:var(--on-ink); border-top:none;
}
.section--ink .inner{
  max-width:var(--page); margin:0 auto; padding:0;
  display:grid; grid-template-columns:var(--spine) 1fr;
}
.section--ink .col{ padding-left:clamp(20px,3vw,48px); }
@media (max-width:720px){ .section--ink .inner{ grid-template-columns:1fr; } .section--ink .col{ padding-left:0; } }

/* ---- hero */
.hero{ padding-top:clamp(26px,3vw,48px); padding-bottom:clamp(56px,7vw,110px); }
.kicker{ font-family:var(--mono); font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--brass); margin:0 0 clamp(26px,4vw,52px); }
.hero h1{
  font-size:clamp(42px,8.4vw,104px);      /* the folio's cover line */
  letter-spacing:-.042em; margin-bottom:clamp(26px,3.4vw,44px);
  max-width:15ch;
}
.hero .lede{ font-size:clamp(17px,1.5vw,20.5px); color:var(--ink-70); max-width:52ch; margin:0 0 clamp(28px,3.4vw,42px); }

/* The three practice areas, ruled apart. Wraps to stacked rows on a phone —
   the rules between them are decoration and go first. */
.hero-rule{ display:flex; align-items:center; flex-wrap:wrap; gap:10px 20px; margin-bottom:clamp(28px,3.4vw,42px); }
.hero-rule span{ font-family:var(--mono); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-45); }
.hero-rule i{ flex:1; min-width:24px; height:1px; background:var(--brass); opacity:.5; }
@media (max-width:560px){
  .hero-rule{ display:grid; gap:8px; }
  .hero-rule i{ display:none; }
}

/* ---- headings inside columns */
.col h2{ font-size:clamp(28px,3.8vw,50px); margin-bottom:22px; max-width:20ch; }
.col .sub{ color:var(--ink-70); margin:0; max-width:56ch; }
.section--ink .col .sub{ color:var(--on-ink-70); }

/* ---- practice: numbered items, order carries meaning (engagement sequence) */
.practice{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:clamp(28px,3.4vw,52px); margin-top:clamp(30px,3.6vw,48px); }
.practice article{ border-top:1px solid var(--brass); padding-top:20px; }
.practice h3{ font-size:21px; margin-bottom:12px; }
.practice p{ margin:0; color:var(--ink-70); font-size:15.5px; }

/* ---- approach prose */
.prose{ margin-top:clamp(24px,3vw,40px); }
.prose p{ margin:0 0 20px; color:var(--on-ink-70); max-width:58ch; font-size:17px; }
.prose p:last-child{ margin-bottom:0; }
.pull{
  font-family:var(--display); font-size:clamp(22px,2.6vw,32px); line-height:1.24;
  color:var(--on-ink) !important; max-width:24ch !important;
  padding-left:24px; border-left:1px solid var(--brass);
}

/* ---- people */
.people{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:clamp(26px,3.2vw,46px); margin-top:clamp(30px,3.6vw,48px); }
.portrait{ border:1px solid rgba(22,33,28,.24); }
.portrait img{ width:100%; aspect-ratio:5/6; object-fit:cover; display:block;
  filter:grayscale(1) contrast(1.04); }        /* a firm that files documents, not selfies */
.portrait:hover img{ filter:none; transition:filter .4s ease; }
.people h3{ font-size:19px; margin:20px 0 4px; }
.role{ margin:0 0 12px; font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--brass); }
.people p{ margin:0; color:var(--ink-70); font-size:15px; }

/* ---- contact */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,4vw,64px); margin-top:clamp(26px,3.2vw,44px); align-items:start; }
@media (max-width:820px){ .contact-grid{ grid-template-columns:1fr; } }
.form label{ display:block; margin-bottom:20px; }
.form span{ display:block; font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:rgba(232,228,218,.55); margin-bottom:9px; }
.form input,.form textarea{
  width:100%; font-family:var(--body); font-size:16px; color:var(--on-ink);
  background:transparent; border:0; border-bottom:1px solid rgba(232,228,218,.32);
  border-radius:0; padding:9px 0;
}
.form textarea{ resize:vertical; }
.form input:focus,.form textarea:focus{ border-bottom-color:var(--brass); outline:none; }
.section--ink .btn{ background:var(--brass); border-color:var(--brass); color:var(--ink-deep); }
.section--ink .btn:hover{ background:transparent; color:var(--brass); }
.sent{ margin:18px 0 0; font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--brass); }

/* ---- footer */
.foot{
  max-width:var(--page); margin:0 auto; padding:clamp(44px,5vw,72px) var(--pad);
  display:grid; grid-template-columns:var(--spine) 1fr 1fr 1.6fr;
  border-top:1px solid rgba(22,33,28,.2);
  font-size:14.5px; color:var(--ink-70);
}
@media (max-width:820px){ .foot{ grid-template-columns:1fr; gap:26px; } }
.foot p{ margin:0 0 8px; }
.foot a{ text-decoration:none; }
.foot a:hover{ color:var(--brass); }
.foot-brand{ font-family:var(--display); font-size:17px; color:var(--ink); }
.fine{ font-family:var(--mono); font-size:10.5px; letter-spacing:.05em; line-height:1.85; color:var(--ink-45); }

/* ---- demo tag */
.demo-tag{
  position:fixed; right:0; bottom:0; z-index:60;
  display:flex; flex-direction:column; gap:2px;
  background:var(--ink-deep); color:var(--stock);
  padding:12px 20px; text-decoration:none; border-radius:0;
  font-family:var(--mono); font-size:10px; letter-spacing:.1em; line-height:1.5;
}
.demo-tag span{ color:var(--brass); text-transform:uppercase; font-size:9px; letter-spacing:.18em; }
.demo-tag strong{ font-weight:500; font-size:11px; letter-spacing:.08em; }
.demo-tag:hover{ background:var(--brass); color:var(--ink-deep); }
.demo-tag:hover span{ color:var(--ink-deep); }