/* ============================================================================
   Bracton Partners — shared design system.

   ONE source of truth for the things that must be identical on every page:
   design tokens, the reset, the nav, buttons, the eyebrow, the interior-page
   masthead, and the footer.

   Loaded FIRST by every page; page-specific component CSS comes after and may
   override. Before this file existed the nav/footer/tokens were copy-pasted
   into index.html, services.html, approach.html and legal.css — four copies
   that had already drifted apart (nav type scale, section padding, .benefit).
   ========================================================================= */

:root{
  --ground:#EEF0F2;
  --paper:#FFFFFF;
  --paper-2:#E8ECEF;
  --ink:#131E29;
  --muted:#4E5A66;
  --faint:#828E9A;
  --hair:#D5DCE3;
  --hair-2:#E4E9ED;
  --navy:#153049;
  --navy-deep:#0B2135;
  --navy-ink:#061525;
  --gold:#B08B4F;
  --gold-deep:#8A6A31;
  --gold-lt:#D6B265;
  --display:"Libre Caslon Display",Georgia,"Times New Roman",serif;
  --heading:"Libre Caslon Text",Georgia,"Times New Roman",serif;
  --body:"Libre Franklin","Helvetica Neue","Arial",system-ui,-apple-system,sans-serif;
  --nav-h:63px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--ground);color:var(--ink);font-family:var(--body);
  line-height:1.68;font-weight:400;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;font-feature-settings:"kern" 1,"liga" 1;
}

/* Keyboard focus: one visible, branded ring everywhere. */
:where(a,button,input,textarea,select,summary):focus-visible{
  outline:2px solid var(--gold);outline-offset:3px;border-radius:2px;
}
.hero :focus-visible,.contact :focus-visible,.midcta :focus-visible,
.masthead :focus-visible,.proof :focus-visible,footer :focus-visible{outline-color:var(--gold-lt)}

.wrap{max-width:1120px;margin:0 auto;padding:0 30px}

.eyebrow{
  display:inline-flex;align-items:center;gap:14px;
  font-family:var(--body);font-size:13px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--gold-deep);font-weight:600;margin:0;
}
.eyebrow::before{content:"";width:30px;height:1px;background:currentColor;opacity:.55;flex:none}

/* Scroll reveal. Sections stay visible when JS never runs — see the
   <noscript> guard each page ships. */
.rv{opacity:0;transform:translateY(16px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

/* ---- Nav ---- */
.nav{position:sticky;top:0;z-index:60;background:rgba(238,240,242,.82);backdrop-filter:saturate(140%) blur(12px);border-bottom:1px solid var(--hair)}
.nav .in{max-width:1120px;margin:0 auto;padding:16px 30px;display:flex;align-items:center;justify-content:space-between;gap:18px}
.logo{display:flex;align-items:center;gap:12px;font-family:var(--heading);font-size:24px;font-weight:700;letter-spacing:.07em;color:var(--navy);text-transform:uppercase;text-decoration:none}
.logo .mono{width:30px;height:30px;border:1px solid var(--gold);display:inline-flex;align-items:center;justify-content:center;font-size:12.5px;color:var(--gold-deep);letter-spacing:.04em;flex:none}
.nav ul{list-style:none;display:flex;gap:22px;margin:0;padding:0}
/* Scoped to the link list on purpose: `.nav a:not(.btn)` (0,2,1) outranks
   `.logo` (0,1,0), which silently shrank the wordmark to 14.5px on every page
   whose logo is an <a> — i.e. all of blog + legal. */
.nav ul a{font-size:14.5px;color:var(--muted);text-decoration:none;letter-spacing:.02em;white-space:nowrap;position:relative;padding-bottom:2px}
.nav ul a:hover{color:var(--navy)}
/* Current page: a hairline under the live link, not a colour change alone. */
.nav ul a[aria-current="page"]{color:var(--navy)}
.nav ul a[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--gold)}

.btn{font-family:var(--body);font-size:12.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;background:var(--navy);color:#F3F6F9;padding:11px 20px;border-radius:2px;text-decoration:none;border:1px solid var(--navy);transition:background .25s,color .25s,border-color .25s;display:inline-block}
.btn:hover{background:var(--navy-deep)}

/* Header CTA is a NAV element, not a page CTA. The shared .btn is sized for
   the hero and the contact block (12.5px on 11px/20px padding, ~40px tall),
   which in a 16px-padded translucent bar reads as a slab bolted next to
   14.5px links and drives the whole header taller. Scaled to sit on the
   links' baseline instead. */
.nav .btn{font-size:11.5px;padding:8px 16px;letter-spacing:.08em;line-height:1.35}
.btn.ghost{background:transparent;color:var(--navy);border-color:currentColor}
.btn.ghost:hover{background:var(--navy);color:#F3F6F9;border-color:var(--navy)}
.btn.gold{background:var(--gold);border-color:var(--gold);color:#1c1508}
.btn.gold:hover{background:#c0995a;border-color:#c0995a}

/* ---- Mobile nav ----
   Below 860px the link list used to be display:none with no replacement, so
   phones had no navigation at all. The toggle reveals the same links. */
.nav-toggle{display:none;align-items:center;justify-content:center;width:42px;height:42px;margin-right:-9px;background:none;border:0;padding:0;cursor:pointer;color:var(--navy)}
.nav-toggle span{display:block;width:22px;height:1px;background:currentColor;position:relative;transition:background .2s}
.nav-toggle span::before,.nav-toggle span::after{content:"";position:absolute;left:0;width:22px;height:1px;background:currentColor;transition:transform .25s cubic-bezier(.2,.7,.2,1)}
.nav-toggle span::before{top:-6px}
.nav-toggle span::after{top:6px}
.nav-toggle[aria-expanded="true"] span{background:transparent}
.nav-toggle[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)}
@media (prefers-reduced-motion:reduce){.nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{transition:none}}

@media (max-width:860px){
  /* Bar holds the wordmark and the toggle only — three items plus the CTA
     wrapped to a second row at 390px. The CTA reappears inside the open
     panel, full width, so phones get navigation AND the primary action. */
  .nav-toggle{display:inline-flex;margin-left:auto}
  .nav .in{flex-wrap:wrap;row-gap:0}
  .nav ul{
    display:flex;order:3;flex-basis:100%;flex-direction:column;gap:0;
    max-height:0;overflow:hidden;visibility:hidden;
    transition:max-height .3s cubic-bezier(.2,.7,.2,1),visibility .3s;
  }
  .nav ul.open{max-height:60vh;overflow-y:auto;visibility:visible;border-top:1px solid var(--hair);margin-top:14px}
  .nav ul li+li{border-top:1px solid var(--hair-2)}
  .nav ul a{display:block;padding:15px 2px;font-size:16px}
  .nav ul a[aria-current="page"]::after{display:none}
  .nav ul a[aria-current="page"]{color:var(--gold-deep)}
  .nav .in > .btn{display:none}
  .nav-toggle[aria-expanded="true"] ~ .btn{
    display:block;order:4;flex-basis:100%;text-align:center;
    background:var(--gold);border-color:var(--gold);color:#1c1508;
    padding:14px 20px;margin:16px 0 18px;
  }
  @media (prefers-reduced-motion:reduce){.nav ul{transition:none}}
}

/* ---- Interior-page masthead (blog, legal, services, approach) ---- */
.masthead{background:linear-gradient(158deg,#153452 0%,var(--navy-deep) 55%,var(--navy-ink));color:#E9EFF5;position:relative;overflow:hidden}
.masthead::after{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--gold),rgba(176,139,79,0) 62%)}
.masthead .in{max-width:840px;margin:0 auto;padding:78px 30px 60px}
.masthead .eyebrow{color:var(--gold-lt)}
.masthead h1{font-family:var(--display);font-weight:400;font-size:clamp(32px,5.4vw,52px);line-height:1.05;letter-spacing:-.012em;margin:20px 0 0;text-wrap:balance}
.masthead .dates{margin:22px 0 0;font-size:13px;color:#9DB0C1;letter-spacing:.02em}
/* Marketing interior pages run on the 1120 grid so their masthead aligns
   with the content below it, not the 840 editorial measure. */
.masthead.wide .in{max-width:1120px}
.masthead.wide h1{max-width:20ch}
.masthead .lede{margin:24px 0 0;font-size:clamp(16px,1.8vw,18.5px);color:#AFC1D2;font-weight:300;line-height:1.66;max-width:62ch}

/* ---- Footer ---- */
footer{background:var(--navy-ink);color:#8DA2B7}
.foot{max-width:1120px;margin:0 auto;padding:66px 30px 42px}
.foot-top{display:grid;grid-template-columns:1.35fr 2fr;gap:44px;padding-bottom:38px;border-bottom:1px solid rgba(176,139,79,.22)}
@media (max-width:760px){.foot-top{grid-template-columns:1fr;gap:34px}}
.foot-brand .brandline{font-family:var(--heading);font-size:18px;color:#EAF0F6;display:flex;align-items:center;gap:12px;letter-spacing:.09em;text-transform:uppercase;margin-bottom:15px}
.foot-brand .brandline .mono{width:28px;height:28px;border:1px solid rgba(176,139,79,.6);display:inline-flex;align-items:center;justify-content:center;font-size:12px;color:var(--gold-lt);letter-spacing:.04em;flex:none}
.foot-brand p{font-size:13.5px;line-height:1.62;color:#7E93A6;max-width:40ch;margin:0}
.foot-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media (max-width:520px){.foot-cols{grid-template-columns:1fr 1fr;gap:28px 16px}}
.foot-col h5{font-family:var(--body);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);font-weight:600;margin:0 0 15px}
.foot-col a{display:block;font-size:13.5px;color:#9DB0C1;text-decoration:none;margin-bottom:11px;transition:color .2s}
.foot-col a:hover{color:var(--gold-lt)}
.foot-col a.here,.foot-col a[aria-current="page"]{color:var(--gold-lt)}
.foot-bottom{padding-top:28px;display:flex;flex-direction:column;gap:15px}
.foot-bottom .disclosure{font-size:11.5px;line-height:1.7;color:#5F7486;max-width:100ch}
.foot-bottom .copy{font-size:11.5px;color:#54697B;letter-spacing:.02em}

@media (max-width:600px){
  .wrap{padding:0 20px}
  .nav .in{padding:12px 20px}
  .logo{font-size:18px;letter-spacing:.05em}
  .logo .mono{width:26px;height:26px;font-size:11px}
  .masthead .in{padding:56px 20px 44px}
  .foot{padding:48px 20px 36px}
}
@media (max-width:360px){.logo{font-size:14px}}