/* ============================================================
   STYLES — structure only. Every value comes from tokens.css.
   If you find yourself typing a colour or a size in here,
   it belongs in tokens.css instead.
   ============================================================ */

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

html { -webkit-text-size-adjust: 100%; background: var(--bg-top); }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: var(--weight-body);
  font-size: var(--size-body);
  line-height: var(--leading);
  -webkit-font-smoothing: antialiased;
  background-color: var(--bg-bottom);
  background-image: linear-gradient(var(--bg-angle), var(--bg-top), var(--bg-bottom));
  background-repeat: no-repeat;
  text-align: var(--align);
}

.wrap { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }

.skip { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--ink); color: var(--bg-top); padding: .75rem 1rem; }
.skip:focus { left: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---------- masthead ---------- */

.masthead { border-bottom: var(--rule-weight) solid var(--rule-faint); }
.masthead__inner { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 2rem; padding-block: calc(1.5rem * var(--density)); text-align: left; }
.brand { display: flex; align-items: center; gap: .8rem; text-decoration: none; color: var(--ink); }
.brand img { width: 34px; height: auto; display: block; }
.brand span { font-family: var(--font-head); font-size: var(--size-h3); line-height: 1.2; }
.nav { display: flex; flex-wrap: wrap; gap: .2rem 1.8rem; margin-left: auto; }
.nav a { font-size: var(--size-small); color: var(--ink-muted); text-decoration: none; padding-block: .2rem; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--ink); }

/* ---------- sections ---------- */

.band { padding-block: var(--section-y); border-top: var(--rule-weight) solid var(--rule-faint); }
.band:first-of-type { border-top: 0; }
.hero { padding-block: var(--hero-y) calc(var(--section-y) * .72); border-top: 0; position: relative; }

/* The firm mark, enlarged and quietened. Fixed to the viewport on every page, so
   the site travels past it rather than it scrolling away. It sits above the page
   gradient and below every content layer. Content is raised rather than the mark
   pushed to a negative z-index, because body carries the gradient and would paint
   over anything behind it. Top offset and opacity live in tokens.css. */
.hero__mark { display: none; }
@media (min-width: 62rem) {
  .masthead, main, .foot { position: relative; z-index: 1; }
  .hero__mark {
    display: block; position: fixed; pointer-events: none; z-index: 0;
    right: calc(50% - (var(--container) / 2) - var(--gutter));
    top: var(--mark-top);
    width: clamp(240px, 26vw, 380px); height: auto;
    opacity: var(--mark-opacity);
    transition: opacity .5s ease;
  }
  /* recedes once the footer is in view, so it does not ghost behind the
     footer text at the darkest end of the gradient */
  .hero__mark[data-recede] { opacity: var(--mark-opacity-recede); }
}
@media (prefers-reduced-motion: reduce) { .hero__mark { transition: none; } }

/* credentials: a tight hairline-separated list, no bullets */
.cv {
  list-style: none; padding: 0;
  max-width: 26rem;
  margin-block: calc(var(--stack) * 1.05) 0;
  border-top: var(--rule-weight) solid var(--rule-faint);
}
.cv li {
  padding-block: .62rem;
  border-bottom: var(--rule-weight) solid var(--rule-faint);
}

/* Dated notice above the home hero. Two block-level <p> elements, so the date
   and the headline sit on separate lines even if this stylesheet never loads.
   Layout that matters should not depend on a rule arriving. */
.latest {
  max-width: var(--measure);
  margin-block: 0 calc(var(--stack) * 1.5);
  padding-bottom: calc(var(--stack) * .85);
  border-bottom: var(--rule-weight) solid var(--rule-faint);
}
.latest__date {
  font-size: var(--size-small); color: var(--ink-muted);
  margin: 0 0 .45rem;
}
.latest__link { font-size: var(--size-small); margin: 0; }
.latest__link a {
  color: var(--ink); text-decoration: none;
  border-bottom: var(--rule-weight) solid var(--rule);
  padding-bottom: .18rem; transition: color .18s ease, border-color .18s ease;
}
.latest__link a:hover { border-bottom-color: var(--accent); }

/* summary bullets at the head of a long article, doubling as navigation */
.summary { list-style: none; padding: 0; max-width: var(--measure);
  margin-block: calc(var(--stack) * 1.4) calc(var(--stack) * 2);
  border-top: var(--rule-weight) solid var(--rule-faint); }
.summary li { border-bottom: var(--rule-weight) solid var(--rule-faint);
  padding-block: calc(var(--stack) * .72); font-size: var(--size-small); color: var(--ink-muted); }
.summary a { display: inline-block; margin-top: .3rem; color: var(--ink); text-decoration: none;
  border-bottom: var(--rule-weight) solid var(--rule); padding-bottom: .12rem;
  transition: border-color .18s ease; }
.summary a:hover { border-bottom-color: var(--accent); }

/* ---------- type ---------- */

h1, h2, h3 { font-family: var(--font-head); font-weight: var(--weight-head); margin: 0 0 var(--stack); text-wrap: balance; line-height: var(--leading-head); letter-spacing: var(--tracking-head); }
h1 { font-size: var(--size-h1); max-width: 20ch; margin-inline: var(--measure-align); }
h2 { font-size: var(--size-h2); max-width: 24ch; margin-inline: var(--measure-align); }
h3 { font-size: var(--size-h3); margin-bottom: calc(var(--stack) * .4); }

p { max-width: var(--measure); margin: 0 0 var(--stack); margin-inline: var(--measure-align); }
p:last-child { margin-bottom: 0; }
.asat { font-size: var(--size-small); color: var(--ink-muted); letter-spacing: .02em;
  margin-block: 0 calc(var(--stack) * 1.5); }

.lead { font-size: var(--size-lead); line-height: 1.5; max-width: calc(var(--measure) * 1.12); }
.muted { color: var(--ink-muted); }

a { color: var(--ink); text-underline-offset: .22em; text-decoration-thickness: var(--rule-weight); text-decoration-color: var(--rule); }
a:hover { text-decoration-color: var(--accent); }

/* ---------- the single call-to-action style ---------- */

.go { display: inline-block; margin-top: calc(var(--stack) * 1.15); font-size: var(--size-body); color: var(--ink); text-decoration: none; border-bottom: var(--rule-weight) solid var(--rule); padding-bottom: .3rem; border-radius: var(--radius); transition: border-color .18s ease; }
.go:hover { border-bottom-color: var(--accent); }
button.go { background: none; border: 0; border-bottom: var(--rule-weight) solid var(--rule); font: inherit; font-size: var(--size-body); cursor: pointer; padding: 0 0 .3rem; color: var(--ink); }

/* ---------- practice areas ---------- */

.areas { list-style: none; margin: calc(var(--stack) * 1.8) 0 0; padding: 0; }
.areas li { border-top: var(--rule-weight) solid var(--rule-faint); }
.areas li:last-child { border-bottom: var(--rule-weight) solid var(--rule-faint); }
.areas a { display: block; padding: calc(1.5rem * var(--density)) 0; text-decoration: none; color: var(--ink); font-family: var(--font-head); font-size: var(--size-h2); line-height: 1.2; transition: opacity .18s ease; }
.areas a:hover { opacity: .6; }

.area { padding-block: calc(3.25rem * var(--density)); border-top: var(--rule-weight) solid var(--rule-faint); scroll-margin-top: 1.5rem; }
.area:first-of-type { border-top: 0; padding-top: 0; }

.matters { list-style: none; margin: calc(var(--stack) * 1.4) 0 0; padding: 0; display: grid; gap: 0 3rem; max-width: 44rem; margin-inline: var(--measure-align); }
@media (min-width: 40rem) { .matters { grid-template-columns: 1fr 1fr; } }
.matters li { border-top: var(--rule-weight) solid var(--rule-faint); padding: calc(.62rem * var(--density)) 0; font-size: var(--size-small); color: var(--ink-muted); }

.services { display: grid; gap: calc(2.5rem * var(--density)) 3.5rem; margin-top: calc(var(--stack) * 1.8); }
@media (min-width: 42rem) { .services { grid-template-columns: 1fr 1fr; } }
.services p { margin: 0; font-size: var(--size-small); max-width: none; }

/* ---------- definition rows ---------- */

.rows { margin: calc(var(--stack) * 1.8) 0 0; }
.row { border-top: var(--rule-weight) solid var(--rule-faint); padding-block: calc(1.6rem * var(--density)); display: grid; gap: .35rem 3rem; text-align: left; }
@media (min-width: 44rem) { .row { grid-template-columns: 12rem 1fr; } }
.row:last-child { border-bottom: var(--rule-weight) solid var(--rule-faint); }
.row dt { font-family: var(--font-head); font-size: var(--size-h3); }
.row dd { margin: 0; }
.row dd p { margin: 0; max-width: none; color: var(--ink-muted); }

/* ---------- in-page contents ---------- */

.jump { list-style: none; display: flex; flex-wrap: wrap; gap: .55rem 1.5rem; padding: 0;
  margin: calc(var(--stack) * 1.5) 0 calc(var(--stack) * 2.2);
  margin-inline: var(--measure-align); max-width: var(--measure);
  font-size: var(--size-small);
  border-top: var(--rule-weight) solid var(--rule-faint); padding-top: calc(var(--stack) * .9); }
.jump a { color: var(--ink-muted); text-decoration: none;
  border-bottom: var(--rule-weight) solid var(--rule-faint); padding-bottom: .15rem;
  transition: color .18s ease, border-color .18s ease; }
.jump a:hover { color: var(--ink); border-bottom-color: var(--accent); }

h2[id] { scroll-margin-top: 2rem; }

/* ---------- notes ---------- */

.note { border-left: var(--rule-weight) solid var(--rule); padding: .3rem 0 .3rem 1.5rem; color: var(--ink-muted); font-size: var(--size-small); max-width: var(--measure); margin-block: calc(var(--stack) * 1.6); text-align: left; }

/* ---------- form ---------- */

.form { max-width: 30rem; margin-top: calc(var(--stack) * 1.8); margin-inline: var(--measure-align); text-align: left; }
.field { margin-bottom: var(--stack); }
.field label { display: block; font-size: var(--size-small); color: var(--ink-muted); margin-bottom: .5rem; }
.field input, .field textarea { width: 100%; font: inherit; font-size: var(--size-body); color: var(--ink); background: rgba(255,255,255,.05); border: 0; border-bottom: var(--rule-weight) solid var(--rule); padding: .7rem .1rem; border-radius: var(--radius); }
.field input:focus, .field textarea:focus { outline: none; border-bottom-color: var(--accent); background: rgba(255,255,255,.09); }
.field textarea { min-height: 8rem; resize: vertical; }
.check { display: flex; gap: .8rem; align-items: flex-start; margin-bottom: calc(var(--stack) * 1.4); max-width: 30rem; }
.check input { margin-top: .35rem; flex: 0 0 auto; }
.check label { font-size: var(--size-small); color: var(--ink-muted); line-height: 1.55; }
.hp { position: absolute; left: -9999px; }

/* ---------- footer ---------- */

.foot { border-top: var(--rule-weight) solid var(--rule-faint); padding-block: calc(3.5rem * var(--density)) calc(4rem * var(--density)); text-align: left; }
.foot__grid { display: grid; gap: calc(2.5rem * var(--density)); }
@media (min-width: 44rem) { .foot__grid { grid-template-columns: 1.2fr 1fr; } }
.foot img { width: 150px; height: auto; display: block; margin-bottom: .95rem; }
.foot__tagline { font-size: calc(var(--step) * .78); letter-spacing: .1em; text-transform: uppercase;
                 color: var(--ink-muted); margin-bottom: 1.2rem; max-width: 26ch; line-height: 1.5; }
.foot p { font-size: var(--size-small); color: var(--ink-muted); line-height: 1.7; max-width: 34ch; margin-inline: 0; }
.foot ul { list-style: none; margin: 0; padding: 0; font-size: var(--size-small); line-height: 2; }
.foot ul a { color: var(--ink-muted); text-decoration: none; }
.foot ul a:hover { color: var(--ink); }


/* touch targets — 44px minimum on coarse pointers */
@media (pointer: coarse) {
  .brand { padding-block: .35rem; }
  .note { line-height: 1.85; }
  .note a, .check label a, p a { display: inline-block; padding-block: .62rem; }
  .check label { padding-block: .3rem; }
  button.go { padding-block: .6rem; }
  .nav a { padding-block: .7rem; }
  .go { padding-block: .55rem .55rem; }
  .row dd a, .note a, .foot ul a { display: inline-block; padding-block: .45rem; }
  .areas a { padding-block: calc(1.6rem * var(--density)); }
  .jump a { display: inline-block; padding-block: .4rem; }
}


/* ---------- print ---------- */
@media print {
  html, body { background: #fff !important; color: #000 !important; }
  .masthead nav, .go, .form, .skip { display: none; }
  a { color: #000; text-decoration: underline; }
  a[href^="http"]::after, a[href^="/"]::after { content: " (" attr(href) ")"; font-size: .85em; }
  .band { padding-block: 1.5rem; border-top: 1px solid #ccc; }
  h1, h2, h3 { page-break-after: avoid; }
  p, li { color: #000 !important; }
}


/* ---------- insights index ---------- */

.mini-list { list-style: none; margin: calc(var(--stack) * .9) 0 calc(var(--stack) * 2.4); padding: 0; }
.mini-list:last-of-type { margin-bottom: calc(var(--stack) * 1.2); }
.mini { border-top: var(--rule-weight) solid var(--rule-faint); }
.mini:last-child { border-bottom: var(--rule-weight) solid var(--rule-faint); }
.mini a { display: block; padding: calc(1.5rem * var(--density)) 0; text-decoration: none; color: var(--ink); }
.mini a:hover .mini__name { opacity: .62; }
.mini__name { display: block; font-family: var(--font-head); font-size: var(--size-h3);
              line-height: 1.3; letter-spacing: var(--tracking-head); margin-bottom: .35rem; }
.mini__one { display: block; font-size: var(--size-small); line-height: 1.55;
             color: var(--ink-muted); max-width: var(--measure); }