/* ============================================================
   BASE — reset, body, atmosphere, shared layout primitives
   ============================================================ */

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--midnight);
  color:var(--ivory);
  font-family:var(--sans);
  font-weight:300;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-feature-settings:"liga" 1,"kern" 1;
  overflow-x:hidden;
}
::selection{background:rgba(201,168,76,.22);color:var(--ivory)}
a{color:inherit;text-decoration:none}

/* Atmosphere — grain film + luminance vignette.
   Makes midnight read as a material, not a flat fill.
   Fixed overlay; pointer-events off so it never blocks interaction. */
.atmos{position:fixed;inset:0;z-index:0;pointer-events:none}
.atmos::before{
  content:"";position:absolute;inset:-50%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:.055;animation:grain 7s steps(5) infinite;will-change:transform;
}
.atmos::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(115% 80% at 26% 82%,rgba(255,255,255,.028),transparent 56%),
    radial-gradient(150% 130% at 50% 24%,transparent 46%,rgba(0,0,0,.55) 100%);
}
@keyframes grain{
  0%,100%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}
  40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-2%)}80%{transform:translate(3%,2%)}
}

/* All content sections sit above the atmosphere layer */
.hero,.firm,.geo,.approach,.contact,.footer{position:relative;z-index:2}

/* Skip link — visually hidden until focused */
.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--obsidian);color:var(--gold);
  padding:12px 20px;font-family:var(--sans);font-size:13px;
  letter-spacing:.12em;text-transform:uppercase;
}
.skip:focus{left:16px;top:16px;outline:2px solid var(--gold)}

/* Shared 12-column grid container */
.wrap{
  max-width:var(--maxw);margin-inline:auto;
  padding-inline:var(--gutter);
  display:grid;grid-template-columns:repeat(12,1fr);column-gap:24px;
}

/* Eyebrow — gold tick + wide-tracked label. The only gold in middle sections. */
.eyebrow{
  grid-column:1/-1;display:flex;align-items:center;gap:16px;
  font-family:var(--sans);font-weight:500;font-size:11px;
  letter-spacing:.32em;text-transform:uppercase;color:var(--t-40);
}
.eyebrow::before{content:"";width:28px;height:1px;background:var(--gold);flex:none}