/* ===========================================================
   JSK Counsel — home pages (index.html, ko.html)
   Requires assets/tokens.css first.
   =========================================================== */

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

html{-webkit-text-size-adjust:100%;}

body{
  margin:0;
  background:var(--paper);
  color:var(--body-ink);
  font-family:var(--font-body);
  font-size:var(--body-size);
  line-height:var(--body-lh);
  letter-spacing:var(--body-ls);
  -webkit-font-smoothing:antialiased;
  word-break:keep-all;
  overflow-wrap:break-word;
}

body.menu-open{overflow:hidden;}

img{max-width:100%;height:auto;}

a{color:inherit;}

::selection{background:var(--brass-soft);color:var(--white);}

/* ---- focus: always visible, never removed ---- */
a:focus-visible,button:focus-visible,input:focus-visible,
textarea:focus-visible,select:focus-visible,[tabindex]:focus-visible{
  outline:var(--focus);
  outline-offset:var(--focus-offset);
  border-radius:1px;
}

.skip-link{
  position:absolute;left:-10000px;top:0;
  font-family:var(--font-ui);font-size:13px;
  background:var(--ink);color:var(--white);
  padding:12px 18px;z-index:200;text-decoration:none;
}
.skip-link:focus{left:8px;top:8px;}

.wrap{
  max-width:var(--wrap);
  margin:0 auto;
  padding:0 var(--wrap-pad);
}

/* ============ Header ============ */
header{
  position:sticky;top:0;z-index:100;
  background:rgba(246,244,238,0.94);
  backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid var(--rule);
}

.nav{
  max-width:var(--wrap);
  margin:0 auto;
  padding:16px var(--wrap-pad);
  display:flex;align-items:center;justify-content:space-between;
  gap:24px;
}

.nav > a:first-of-type{display:flex;align-items:center;flex:0 0 auto;}

.logo-full{height:54px;width:auto;display:block;}
.logo-mark{height:42px;width:auto;display:none;}

.nav-links{
  display:flex;align-items:center;gap:26px;
  font-family:var(--font-ui);
  font-size:var(--t-nav);
  letter-spacing:var(--ls-ui);
  text-transform:uppercase;
  color:var(--muted);
}
.nav-links a{
  text-decoration:none;
  display:inline-flex;align-items:center;
  min-height:var(--tap);
  padding:6px 0;
  transition:color .2s ease;
}
.nav-links a:hover{color:var(--ink);}

.nav-right{display:flex;align-items:center;gap:20px;flex:0 0 auto;}

.lang-switch{
  display:flex;align-items:center;
  font-family:var(--font-ui);
  font-size:var(--t-lang);
  letter-spacing:var(--ls-ui);
  color:var(--muted);
}
.lang-switch a{
  text-decoration:none;padding:6px 5px;
  display:inline-flex;align-items:center;
  min-height:var(--tap);
  transition:color .2s ease;
}
.lang-switch a.active{color:var(--ink);text-decoration:underline;text-underline-offset:3px;}
.lang-switch a:hover{color:var(--ink);}
.lang-switch span{margin:0 2px;color:var(--rule);}

.nav-cta{
  font-family:var(--font-ui);
  font-size:var(--t-navcta);
  font-weight:700;
  letter-spacing:var(--ls-ui);
  text-transform:uppercase;
  text-decoration:none;
  color:var(--ink);
  border:1px solid var(--ink);
  padding:12px 20px;
  min-height:var(--tap);
  display:inline-flex;align-items:center;
  transition:background .2s ease,color .2s ease;
}
.nav-cta:hover{background:var(--ink);color:var(--white);}

.menu-toggle{
  display:none;
  width:var(--tap);height:var(--tap);
  align-items:center;justify-content:center;
  background:none;border:1px solid var(--rule);
  color:var(--ink);cursor:pointer;padding:0;
}
.hamburger-icon{display:block;width:20px;height:2px;background:currentColor;position:relative;}
.hamburger-icon::before,.hamburger-icon::after{
  content:"";position:absolute;left:0;width:20px;height:2px;background:currentColor;
}
.hamburger-icon::before{top:-6px;}
.hamburger-icon::after{top:6px;}

/* ---- mobile menu ---- */
.mobile-menu{
  position:fixed;inset:0;z-index:150;
  background:var(--paper);
  padding:96px 32px 40px;
  /* safe-area insets, with the shorthand above as the fallback */
  padding-top:calc(96px + env(safe-area-inset-top,0px));
  padding-right:calc(32px + env(safe-area-inset-right,0px));
  padding-bottom:calc(40px + env(safe-area-inset-bottom,0px));
  padding-left:calc(32px + env(safe-area-inset-left,0px));
  display:none;
  flex-direction:column;align-items:center;justify-content:flex-start;
  gap:34px;
  /* The overlay itself scrolls when its content exceeds the viewport; the
     underlying page stays locked by body.menu-open{overflow:hidden} and
     overscroll-behavior:contain stops scroll chaining to it. */
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
/* Centre the menu when it fits, but never above the scroll origin when it does
   not. Auto margins absorb only POSITIVE free space, so on short viewports they
   resolve to 0 and the first item begins at scrollTop 0 - unlike
   justify-content:center, which pushed the first link off the top of the
   scrollable area where it could not be reached.
   Targeted at > nav, not > :first-child: the in-dialog close button is
   position:fixed, so it is out of flow and an auto margin on it would resolve
   to 0 and leave the nav without its centring margin. */
.mobile-menu > nav{margin-top:auto;}
.mobile-menu > :last-child{margin-bottom:auto;}
.mobile-menu.open{display:flex;}
.mobile-menu nav{display:flex;flex-direction:column;align-items:center;gap:26px;}
.mobile-menu nav a{
  font-family:var(--font-ui);
  font-size:calc(var(--t-nav) + 1px);
  letter-spacing:var(--ls-ui);
  text-transform:uppercase;
  text-decoration:none;color:var(--ink);
  min-height:var(--tap);
  display:inline-flex;align-items:center;
}
.mobile-menu .nav-cta{padding:15px 34px;}
.mobile-menu .lang-switch{font-size:calc(var(--t-lang) + 1px);}

/* ============ Section scaffolding ============ */
section{padding:var(--section-space) 0;}

#about,#experience,#practice,#results,#approach,#contact{
  scroll-margin-top:calc(var(--header-h) + 12px);
}

/* tinted band — was an inline style on #experience */
#experience{
  background:var(--paper-2);
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
}

.section-head{margin-bottom:var(--head-gap);}

.section-label{
  font-family:var(--font-ui);
  font-size:var(--t-sectionlabel);
  font-weight:700;
  letter-spacing:var(--ls-ui-wide);
  text-transform:uppercase;
  color:var(--label);
  margin:0 0 12px;
}

/* Where a section's ONLY heading is the label (About, Approach),
   it must read as a real heading rather than a tiny eyebrow. */
h2.section-label{
  font-family:var(--font-display);
  font-size:clamp(26px, 2.6vw, 32px);
  font-weight:var(--title-weight);
  line-height:var(--title-lh);
  letter-spacing:var(--title-ls);
  text-transform:none;
  color:var(--ink);
  margin:0 0 22px;
  word-break:keep-all;
}

.section-title{
  font-family:var(--font-display);
  font-size:var(--title-size);
  font-weight:var(--title-weight);
  line-height:var(--title-lh);
  letter-spacing:var(--title-ls);
  color:var(--ink);
  margin:0;
  word-break:keep-all;
}

.entity-name{color:var(--ink);font-weight:inherit;}

/* ============ Hero ============ */
.hero{padding:clamp(48px,5vw,64px) var(--wrap-pad) 0;text-align:center;}
.caption{max-width:900px;margin:0 auto;}

.eyebrow{
  font-family:var(--font-ui);
  font-size:var(--t-eyebrow);
  font-weight:700;
  letter-spacing:var(--ls-ui-wide);
  text-transform:uppercase;
  color:var(--label);
  margin:0;
}

/* short brass rule — centred (v10 left it left-aligned via margin:32px 0) */
.caption-rule{
  width:56px;height:2px;
  background:var(--brass);
  border:0;
  margin:26px auto 34px;
}
/* thin full-width divider is a separate element */
.caption-rule.thin{
  width:100%;height:1px;
  background:var(--rule);
  margin:40px auto 26px;
}

h1{
  font-family:var(--font-display);
  font-size:var(--h1-size);
  font-weight:var(--h1-weight);
  line-height:var(--h1-lh);
  letter-spacing:var(--h1-ls);
  color:var(--ink);
  margin:0;
  word-break:keep-all;
}
.dek-emphasis{color:var(--brass);}
.no-break{white-space:nowrap;}

.dek{
  max-width:760px;
  margin:26px auto 0;
  font-size:calc(var(--body-size) + 0.5px);
  line-height:var(--body-lh);
  color:var(--body-ink);
}
.dek .dek-emphasis{color:var(--ink);font-weight:600;}

.docket-row{
  font-family:var(--font-ui);
  font-size:var(--t-eyebrow);
  font-weight:700;
  letter-spacing:var(--ls-ui-wide);
  text-transform:uppercase;
  color:var(--muted);
  margin:0;
}

.hero-actions{
  display:flex;justify-content:center;align-items:center;
  gap:16px;flex-wrap:wrap;
  margin:34px 0 0;
}

.btn-primary,.btn-secondary{
  font-family:var(--font-ui);
  font-size:var(--t-navcta);
  font-weight:700;
  letter-spacing:var(--ls-ui);
  text-transform:uppercase;
  text-decoration:none;
  min-height:50px;
  padding:0 32px;
  display:inline-flex;align-items:center;justify-content:center;
  transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.btn-primary{background:var(--ink);color:var(--white);border:1px solid var(--ink);}
.btn-primary:hover{background:var(--ink-2);border-color:var(--ink-2);}
.btn-secondary{background:transparent;color:var(--ink);border:1px solid var(--ink);}
.btn-secondary:hover{background:var(--ink);color:var(--white);}

/* ---- statistics ---- */
.stats{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
  margin-top:clamp(48px,5vw,64px);
}
.stat{
  padding:28px 20px;
  text-align:center;
  border-right:1px solid var(--rule);
}
.stat:last-child{border-right:none;}
.stat-num{
  font-family:var(--font-metric);
  font-size:clamp(28px,2.6vw,34px);
  font-weight:600;
  line-height:1.1;
  letter-spacing:-0.01em;
  color:var(--ink);
}
.stat-label{
  font-family:var(--font-ui);
  font-size:var(--t-statlabel);
  font-weight:700;
  letter-spacing:var(--ls-ui);
  text-transform:uppercase;
  line-height:1.6;
  color:var(--muted);
  margin:12px auto 0;
}

/* ---- sector strip: transparent inside hero, one top rule only ---- */
.sector-block{
  padding:44px 0 40px;
  text-align:center;
  border-top:1px solid var(--rule);
  background:transparent;
}
.sector-label{
  font-family:var(--font-ui);
  font-size:var(--t-sectorlabel);
  font-weight:700;
  letter-spacing:var(--ls-ui-wide);
  text-transform:uppercase;
  color:var(--label);
  margin-bottom:18px;
}
.sector-list{
  font-family:var(--font-body);
  font-size:var(--t-sectorlist);
  letter-spacing:var(--ls-sectorlist);
  line-height:1.9;
  color:var(--body-ink);
}
.sector-list span{white-space:nowrap;}
.sector-list span:not(:last-child):not(.sector-break)::after{
  content:"\2022";margin:0 12px;color:var(--brass-soft);
}

/* ============ About ============ */
.about{
  display:grid;
  grid-template-columns:minmax(240px,320px) 1fr;
  gap:64px;
  align-items:start;
}
.about-portrait img{display:block;width:100%;}
.portrait-caption{
  display:flex;flex-direction:column;gap:5px;
  margin-top:16px;
}
.portrait-caption .name{
  font-family:var(--font-display);
  font-size:21px;font-weight:600;
  line-height:1.35;color:var(--ink);
}
.portrait-caption .role{
  font-family:var(--font-ui);
  font-size:var(--t-micro);
  font-weight:700;
  letter-spacing:var(--ls-ui);
  text-transform:uppercase;
  color:var(--label);
}
.about-copy p{
  font-size:var(--body-size);
  line-height:var(--body-lh);
  color:var(--body-ink);
  margin:0 0 var(--para-gap);
  max-width:var(--measure);
}
.about-copy p:last-child{margin-bottom:0;}
.about-copy p:first-of-type{font-size:calc(var(--body-size) + 1.5px);}

.credentials{
  display:flex;flex-direction:column;gap:20px;
  margin-top:36px;padding-top:28px;
  border-top:1px solid var(--rule);
}
.credential dt{
  font-family:var(--font-ui);
  font-size:var(--t-deflabel);
  font-weight:700;
  letter-spacing:var(--ls-ui-wide);
  text-transform:uppercase;
  color:var(--label);
  margin:0 0 6px;
}
.credential dd{
  margin:0;
  font-size:calc(var(--body-size) - 0.5px);
  line-height:1.7;
  color:var(--body-ink);
}

/* ============ Experience timeline (ledger) ============ */
.timeline{border-top:1px solid var(--rule);}
.tl-row{
  display:grid;
  grid-template-columns:minmax(200px,260px) 1fr;
  column-gap:56px;
  padding:var(--career-pad) 0;
  border-bottom:1px solid var(--rule);
}
.tl-org{
  grid-column:1;
  font-family:var(--font-display);
  font-size:var(--sub-size);
  font-weight:var(--sub-weight);
  line-height:var(--sub-lh);
  color:var(--ink);
  margin:0;
  padding-top:2px;
  word-break:keep-all;
}
.tl-desc{
  grid-column:2;
  font-size:var(--body-size);
  line-height:var(--desc-lh);
  color:var(--body-ink);
  max-width:var(--measure);
}

/* ============ Practice areas (ledger) ============ */
.areas-intro,.matters-intro{
  font-size:calc(var(--body-size) + 1.5px);
  line-height:var(--body-lh);
  color:var(--body-ink);
  max-width:var(--measure);
  margin:0 0 var(--intro-gap);
}

.areas-group-label,.matters-group-label{
  font-family:var(--font-ui);
  font-size:var(--t-grouplabel);
  font-weight:700;
  letter-spacing:var(--ls-ui-wide);
  text-transform:uppercase;
  color:var(--label);
  margin:0 0 8px;
  padding-bottom:14px;
  border-bottom:1px solid var(--rule);
}

.area-card{
  display:grid;
  grid-template-columns:minmax(220px,300px) 1fr;
  column-gap:64px;
  padding:var(--row-pad) 0;
  border-bottom:1px solid var(--rule);
  background:transparent;
}
.area-card:last-child{border-bottom:none;padding-bottom:8px;}
.area-card h3{
  grid-column:1;
  font-family:var(--font-display);
  font-size:var(--sub-size);
  font-weight:var(--sub-weight);
  line-height:var(--sub-lh);
  color:var(--ink);
  margin:0;
  word-break:keep-all;
}
.area-card-primary h3::before{
  content:"";display:block;
  width:34px;height:3px;background:var(--brass);
  margin-bottom:16px;
}
.area-card p{
  grid-column:2;
  font-size:var(--body-size);
  line-height:var(--desc-lh);
  color:var(--body-ink);
  max-width:var(--measure);
  margin:0 0 var(--para-gap);
}
.area-card p:last-of-type{margin-bottom:0;}
.area-link{
  grid-column:2;
  display:inline-flex;align-items:center;
  align-self:start;
  justify-self:start;
  margin-top:22px;
  font-family:var(--font-ui);
  font-size:var(--t-grouplabel);
  font-weight:700;
  letter-spacing:var(--ls-ui);
  text-transform:uppercase;
  color:var(--label);
  background:none;border:0;padding:0;
  cursor:pointer;
  min-height:var(--tap);
  transition:color .2s ease;
}
.area-link:hover{color:var(--ink);}

.areas-cta,.matters-cta{
  margin-top:var(--cta-gap);
  padding:clamp(30px,3vw,40px) clamp(24px,3vw,34px);
  border:1px solid var(--rule);
  background:var(--paper-2);
  text-align:center;
}
.areas-cta-title,.matters-cta-title{
  font-family:var(--font-display);
  font-size:clamp(22px,2.1vw,26px);
  font-weight:var(--sub-weight);
  line-height:1.4;
  color:var(--ink);
  margin:0 0 12px;
  word-break:keep-all;
}
.areas-cta p,.matters-cta p{
  font-size:var(--body-size);
  line-height:var(--body-lh);
  color:var(--body-ink);
  margin:0 auto;
  max-width:var(--measure);
}

/* ============ Selected results ============ */
/* Two-column layout: the expanded narratives need a comfortable
   reading width. The .wrap caps content at 1120px, so two columns
   yield ~520px cards at wide desktop and ~390px at the 861px floor,
   below which the grid drops to one column (see the 860px query). */
.matters-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:clamp(44px,4vw,52px) 40px;
}
.matter-item{
  border-top:2px solid var(--brass);
  padding-top:22px;
  display:flex;flex-direction:column;
}
.matter-item .matter-cat{
  font-family:var(--font-ui);
  font-size:var(--t-cat);
  font-weight:700;
  letter-spacing:var(--ls-ui-wide);
  text-transform:uppercase;
  line-height:1.6;
  color:var(--label);
  /* v32 internal rhythm — deliberate 4-level hierarchy within each
     .matter-item: category (14) < metric-break (20) > heading (13).
     The metric->heading break is the dominant separation. */
  margin-bottom:14px;
}
.matter-item .matter-metric{
  font-family:var(--font-display);
  font-size:clamp(26px,2.4vw,32px);
  font-weight:600;
  line-height:1.15;
  color:var(--ink);
  margin-bottom:20px;
  text-align:left;
}
/* purely numeric metrics may use Fraunces */
.matter-item .matter-metric-fraunces{
  font-family:var(--font-metric);
  letter-spacing:-0.01em;
}
.matter-metric-left{text-align:left;}
.matter-item h3{
  font-family:var(--font-display);
  font-size:calc(var(--body-size) + 2px);
  font-weight:var(--sub-weight);
  line-height:1.45;
  color:var(--ink);
  margin:0 0 13px;
  word-break:keep-all;
}
.matter-item p{
  font-size:calc(var(--body-size) - 0.5px);
  line-height:var(--desc-lh);
  color:var(--body-ink);
  margin:0;
}
.matters-footnote{
  margin-top:var(--footnote-gap);
  font-size:calc(var(--body-size) - 1px);
  line-height:var(--body-lh);
  color:var(--muted);
}

/* ============ Approach ============ */
.approach{max-width:820px;margin:0 auto;text-align:center;}
.approach blockquote{
  margin:0 auto;
  font-family:var(--font-display);
  font-size:var(--lead-size);
  line-height:var(--lead-lh);
  color:var(--ink);
  word-break:keep-all;
}
.approach blockquote .quote-strong{font-weight:600;}
.approach cite{
  display:block;
  margin-top:22px;
  font-family:var(--font-ui);
  font-size:var(--t-grouplabel);
  font-weight:700;
  font-style:normal;
  letter-spacing:var(--ls-ui-wide);
  text-transform:uppercase;
  color:var(--label);
}

/* ============ Contact ============ */
.contact{background:var(--ink);color:var(--white);}
.contact .section-label,.contact h2.section-label{color:var(--brass-soft);}
.contact .section-title{color:var(--white);}
.contact-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:56px;
}
.contact-copy p{
  font-size:calc(var(--body-size) + 1px);
  line-height:var(--body-lh);
  color:rgba(255,253,248,0.86);
  margin:0 0 var(--para-gap);
  max-width:var(--measure);
}
.contact-detail{margin:0 0 22px;}
.contact-detail dt{
  font-family:var(--font-ui);
  font-size:var(--t-deflabel);
  font-weight:700;
  letter-spacing:var(--ls-ui-wide);
  text-transform:uppercase;
  color:var(--brass-soft);
  margin-bottom:6px;
}
.contact-detail dd{
  margin:0;
  font-size:calc(var(--body-size) + 1px);
  line-height:1.6;
  color:var(--white);
}
.contact-detail dd a{
  color:var(--white);
  text-decoration:underline;
  text-underline-offset:3px;
  display:inline-flex;align-items:center;
  min-height:var(--tap);
}

/* ---- form ---- */
form{
  display:flex;flex-direction:column;gap:22px;
  padding:clamp(28px,4vw,42px);
  border:1px solid rgba(255,255,255,0.15);
  background:rgba(255,255,255,0.04);
}
.field{display:flex;flex-direction:column;}
.field label{
  font-family:var(--font-ui);
  font-size:var(--t-formlabel);
  font-weight:700;
  letter-spacing:var(--ls-ui);
  text-transform:uppercase;
  color:rgba(255,253,248,0.86);
  margin-bottom:8px;
}
.field-required{color:var(--brass-soft);}
.field-optional{
  font-family:var(--font-ui);
  font-size:var(--t-micro);
  font-weight:400;
  letter-spacing:var(--ls-ui);
  color:rgba(255,253,248,0.62);
}
.field input,.field textarea{
  width:100%;
  min-height:48px;
  padding:11px 12px;
  font-family:var(--font-body);
  font-size:calc(var(--body-size) - 0.5px);
  line-height:1.6;
  color:var(--white);
  background:rgba(255,255,255,0.035);
  border:1px solid rgba(255,255,255,0.28);
  border-radius:0;
  transition:border-color .2s ease,background .2s ease;
}
.field textarea{min-height:132px;resize:vertical;}
.field input::placeholder,.field textarea::placeholder{color:rgba(255,253,248,0.45);}
.field input:hover,.field textarea:hover{border-color:rgba(255,255,255,0.45);}
.field input:focus,.field textarea:focus{
  border-color:var(--brass-soft);
  background:rgba(255,255,255,0.07);
  outline:2px solid var(--brass-soft);
  outline-offset:2px;
}
.field input.has-error,.field textarea.has-error{border-color:#f0b7b7;}
.field-error{
  font-family:var(--font-ui);
  font-size:var(--t-micro);
  color:#f4c4c4;
  margin-top:7px;
}

.submit-btn{
  width:100%;
  min-height:54px;
  font-family:var(--font-ui);
  font-size:var(--t-navcta);
  font-weight:700;
  letter-spacing:var(--ls-ui);
  text-transform:uppercase;
  color:var(--ink);
  background:var(--white);
  border:1px solid var(--white);
  cursor:pointer;
  transition:background .2s ease,color .2s ease;
}
.submit-btn:hover{background:var(--brass-soft);border-color:var(--brass-soft);color:var(--ink);}
.submit-btn:focus-visible{outline:2px solid var(--brass-soft);outline-offset:3px;}
.submit-btn[disabled]{opacity:.6;cursor:default;}

#form-success,#form-error{
  font-family:var(--font-body);
  font-size:calc(var(--body-size) - 1px);
  line-height:1.6;
  padding:14px 16px;
  border:1px solid;
}
#form-success{color:#d6ecd6;border-color:rgba(214,236,214,0.5);background:rgba(214,236,214,0.09);}
#form-error{color:#f4c4c4;border-color:rgba(244,196,196,0.5);background:rgba(244,196,196,0.09);}

/* ============ Footer ============ */
footer{background:var(--ink);border-top:1px solid rgba(255,255,255,0.12);padding:28px 0;}
.footer-row{
  max-width:var(--wrap);
  margin:0 auto;
  padding:0 var(--wrap-pad);
  font-family:var(--font-ui);
  font-size:var(--t-footer);
  letter-spacing:var(--ls-ui);
  text-transform:uppercase;
  color:rgba(255,253,248,0.78);
  display:flex;flex-wrap:wrap;gap:10px 20px;
  align-items:center;justify-content:space-between;
}
.footer-row a{
  color:rgba(255,253,248,0.9);
  text-decoration:underline;
  text-underline-offset:3px;
  display:inline-flex;align-items:center;
  min-height:var(--tap);
  transition:color .2s ease;
}
.footer-row a:hover{color:var(--white);}

/* ===========================================================
   Responsive — coordinated breakpoints
   nav 1080 · results 3>2 at 1024 · ledger stacks 860
   about stacks 768 · single column + logo mark 520
   =========================================================== */

@media (max-width:1080px){
  .nav-links{display:none;}
  .nav-right > .nav-cta{display:none;}
  .menu-toggle{display:inline-flex;}
}

@media (max-width:1024px){
  .about{grid-template-columns:minmax(210px,260px) 1fr;gap:48px;}
  .tl-row{grid-template-columns:minmax(180px,230px) 1fr;column-gap:44px;}
  .area-card{grid-template-columns:minmax(190px,250px) 1fr;column-gap:48px;}
}

@media (max-width:900px){
  .logo-full{height:46px;}
  .stats{grid-template-columns:repeat(2,1fr);}
  .stat:nth-child(2n){border-right:none;}
  .stat:nth-child(-n+2){border-bottom:1px solid var(--rule);}
  .contact-grid{grid-template-columns:1fr;gap:44px;}
}

@media (max-width:860px){
  /* Results drop to one column here: below ~861px each 2-col card
     falls under ~390px, where the longest category label wraps and
     rows lose their shared metric baseline. Coordinated with the
     ledger stack. */
  .matters-grid{grid-template-columns:1fr;}
  .tl-row,.area-card{display:block;padding:32px 0;}
  .tl-desc,.area-card p,.areas-intro,.matters-intro,
  .about-copy p,.contact-copy p{max-width:none;}
  .tl-org{margin-bottom:14px;padding-top:0;}
  .area-card h3{margin-bottom:16px;}
  .area-link{margin-top:18px;}
}

@media (max-width:768px){
  .about{grid-template-columns:1fr;gap:0;}
  .about-portrait{max-width:300px;}
  /* single source of separation — caption margin only, never both */
  .portrait-caption{margin-bottom:42px;}
  .hero-actions{flex-direction:column;align-items:stretch;}
  .btn-primary,.btn-secondary{width:100%;}
}

@media (max-width:520px){
  .logo-full{display:none;}
  .logo-mark{display:block;}
  .stats{grid-template-columns:1fr;}
  .stat{border-right:none;border-bottom:1px solid var(--rule);}
  .stat:nth-child(-n+2){border-bottom:1px solid var(--rule);}
  .stat:last-child{border-bottom:none;}
  .footer-row{justify-content:flex-start;}
  .sector-list{font-size:calc(var(--t-sectorlist) - 1px);}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}