/* home-en.css — the approved English homepage cascade, reproduced in the exact order
   site/index.html loads it: the four linked stylesheets plus every approved inline
   refinement block, each copied verbatim and labelled with its production id.
   No declaration is added, removed or reordered. Source: locked production
   baseline 7caf5453. */

/* ===== assets/tokens.css ===== */
/* ===========================================================
   JSK Counsel — design tokens
   One declaration per property. Korean overrides re-point the
   SAME role tokens, so EN and KO can never drift apart.
   =========================================================== */

:root{
  /* ---- palette (unchanged from v10) ---- */
  --ink:#16233d;
  --ink-2:#223357;
  --paper:#f6f4ee;
  --paper-2:#efece3;
  --brass:#8a6a2f;
  --brass-soft:#b99a5c;
  --charcoal:#2a2a28;
  --rule:#cfc9b8;
  --white:#fffdf8;
  --body-ink:#3a372f;
  --muted:#5c574a;
  --label:#6b4e17;

  /* ---- font roles (English) ---- */
  --font-display:'Noto Serif', Georgia, 'Times New Roman', serif;
  --font-body:'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-ui:Arial, Helvetica, 'Helvetica Neue', sans-serif;
  --font-metric:'Fraunces', Georgia, serif;

  /* ---- display scale (English) ---- */
  --h1-size:clamp(34px, 4.6vw, 54px);
  --h1-lh:1.14;
  --h1-ls:-0.015em;
  --h1-weight:600;

  --title-size:clamp(28px, 3vw, 38px);
  --title-lh:1.3;
  --title-ls:-0.02em;
  --title-weight:500;

  --sub-size:clamp(22px, 2.1vw, 26px);
  --sub-lh:1.4;
  --sub-weight:500;

  --lead-size:clamp(21px, 2.1vw, 26px);
  --lead-lh:1.4;

  /* ---- body (English) ---- */
  --body-size:17px;
  --body-lh:1.80;
  --body-ls:0;
  --desc-lh:1.80;
  --measure:34em;

  /* ---- interface scale (English) ---- */
  --t-nav:13px;
  --t-navcta:12.5px;
  --t-lang:12.5px;
  --t-eyebrow:11.5px;
  --t-sectionlabel:11.5px;
  --t-grouplabel:11.5px;
  --t-sectorlabel:11.5px;
  --t-sectorlist:17px;
  --t-statlabel:11.5px;
  --t-cat:10.5px;
  --t-deflabel:10.5px;
  --t-formlabel:11.5px;
  --t-footer:10.5px;
  --t-micro:10.5px;

  /* uppercase interface tracking */
  --ls-ui:0.12em;
  --ls-ui-wide:0.14em;
  --ls-sectorlist:0.02em;

  /* ---- spacing system ---- */
  --section-space:clamp(80px, 7vw, 100px);
  --head-gap:clamp(42px, 4vw, 56px);
  --para-gap:17px;
  --intro-gap:clamp(50px, 5vw, 64px);
  --row-pad:clamp(36px, 3.4vw, 46px);
  --career-pad:clamp(36px, 3.2vw, 44px);
  --group-gap:clamp(60px, 6vw, 76px);
  --footnote-gap:clamp(44px, 4vw, 52px);
  --cta-gap:clamp(56px, 5.5vw, 72px);
  --wrap:1120px;
  --wrap-pad:22px;
  --header-h:96px;

  /* ---- interaction ---- */
  --tap:44px;
  --focus:2px solid var(--brass);
  --focus-offset:3px;
}

/* ===========================================================
   Korean — re-points the same roles. No duplicated stylesheet.
   =========================================================== */
html[lang="ko"]{
  --font-display:'Noto Serif KR', 'Noto Serif', serif;
  --font-body:'Noto Sans KR', 'Apple SD Gothic Neo', sans-serif;
  --font-ui:'Noto Sans KR', Arial, Helvetica, sans-serif;
  --font-metric:'Fraunces', 'Noto Serif KR', Georgia, serif;

  --h1-size:clamp(32px, 4.4vw, 50px);
  --h1-lh:1.36;
  --h1-ls:-0.025em;
  --h1-weight:600;

  --title-size:clamp(28px, 3vw, 38px);
  --title-lh:1.48;
  --title-ls:-0.025em;
  --title-weight:600;

  --sub-size:clamp(21px, 2vw, 25px);
  --sub-lh:1.55;
  --sub-weight:600;

  --lead-size:clamp(20px, 2vw, 25px);
  --lead-lh:1.62;

  --body-size:16.5px;
  --body-lh:1.94;
  --body-ls:0;
  --desc-lh:1.94;
  --measure:30em;

  /* Korean interface text is larger and barely tracked */
  --t-nav:14px;
  --t-navcta:13px;
  --t-lang:13px;
  --t-eyebrow:13px;
  --t-sectionlabel:13px;
  --t-grouplabel:13px;
  --t-sectorlabel:13px;
  --t-sectorlist:17px;
  --t-statlabel:12.5px;
  --t-cat:12px;
  --t-deflabel:12px;
  --t-formlabel:12.5px;
  --t-footer:11.5px;
  --t-micro:11.5px;

  --ls-ui:0.02em;
  --ls-ui-wide:0.025em;
  --ls-sectorlist:0;
}

@media (max-width:900px){
  :root{ --section-space:clamp(64px, 9vw, 72px); --header-h:80px; }
}

/* ===== assets/site.css ===== */
/* ===========================================================
   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;
  }
}

/* ===== assets/restore.css ===== */
/* restore.css — scoped restoration of approved previous-version sections into v14.
   Header/Hero/Contact/Footer <- v10 ; Stats/Sector/About/Approach <- v12-1.
   Loaded AFTER site.css; every rule is confined to a restored section so
   Experience / Practice / Results / legal pages keep their v14 styling. */

/* restore sections used 32px gutters */
.hero .wrap,#about>.wrap,#approach>.wrap,#contact>.wrap{padding-left:32px;padding-right:32px;}

/* v10 vertical section rhythm (flat 88px, all widths) — v14's section{padding:var(--section-space)}
   was inflating these to 100px desktop / clamp on mobile. Scoped to the restored sections only. */
#about,#approach,#contact{padding-top:88px;padding-bottom:88px;}

/* ===== base ===== */
#approach .section-label{font-family: 'IBM Plex Mono', monospace; font-size: 28px; font-weight:600;
    letter-spacing: 0.08em; text-transform: uppercase; color: #7a5a1f;margin-bottom:28px;}
header{position:sticky; top:0; z-index:50; background:rgba(246,244,238,0.92); backdrop-filter:blur(6px); border-bottom:1px solid var(--rule)}
.nav{display:flex; align-items:center; justify-content:space-between; flex-wrap:nowrap; gap:normal; padding:17px 32px; max-width:1120px; margin:0 auto}
.logo-full{height:58px; width:auto; display:block}
.logo-mark{height:44px; width:auto; display:none}
.nav-right{display:flex; align-items:center; gap:18px; flex-wrap:nowrap; flex-shrink:0}
.brand{font-family:'Fraunces', serif; font-weight:600; font-size:19px; letter-spacing:0.01em; color:var(--ink)}
.brand-block{line-height:1.15}
.brand-eyebrow{font-family:'IBM Plex Mono', monospace; font-size:10px; letter-spacing:0.16em; text-transform:uppercase; color:var(--brass); margin-bottom:3px}
.brand-name{font-family:'Fraunces', serif; font-weight:600; font-size:23px; color:var(--ink); letter-spacing:0.01em}
.brand-sub{font-family:'IBM Plex Mono', monospace; font-size:10px; letter-spacing:0.12em; text-transform:uppercase; color:var(--brass); margin-top:3px}
.lang-switch{font-family:'IBM Plex Mono', monospace; font-size:16px; font-weight:500; letter-spacing:0.04em; display:block}
.lang-switch a{padding:2px 4px; color:#5c574a; border-bottom:1px solid transparent; border-radius:2px; display:inline; min-height:0}
.lang-switch a.active{color:var(--ink); border-bottom:1px solid var(--brass); text-decoration:none}
.lang-switch a:not(.active):hover{color:var(--ink); border-bottom:1px solid var(--rule)}
.lang-switch a:focus-visible{outline:2px solid var(--brass); outline-offset:2px}
.lang-switch span{color:#5c574a; margin:0 1px}
.nav-links{gap:20px; flex-wrap:nowrap; white-space:nowrap; font-family:'IBM Plex Mono', monospace; font-size:16px; font-weight:500; letter-spacing:0.04em; text-transform:uppercase}
.nav-links a{color:var(--ink-2); padding-bottom:4px; border-bottom:1px solid transparent; transition:border-color .2s ease, color .2s ease}
.nav-links a:hover{border-color:var(--brass); color:var(--brass); outline:none}
.nav-links a:focus-visible{border-color:var(--brass); color:var(--brass); outline:none}
.nav-cta{font-family:'IBM Plex Mono', monospace; font-size:14px; font-weight:500; letter-spacing:0.04em; text-transform:uppercase; border:1px solid var(--ink); padding:10px 18px; color:var(--ink); transition:background .3s ease, border-color .3s ease, color .3s ease}
.nav-cta:hover{background:var(--brass); border-color:var(--brass); color:var(--white); outline:none}
.nav-cta:focus-visible{background:var(--brass); border-color:var(--brass); color:var(--white); outline:none}
.hero{padding:88px 32px 0; border-bottom:1px solid var(--rule)}
.caption{max-width:840px; margin:0 auto; text-align:center}
.eyebrow{font-family:'IBM Plex Mono', monospace; font-size:16px; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:#6b4e17; margin-bottom:28px}
.caption-rule{width:100%; border:none; border-top:1px solid var(--ink); margin:32px 0}
.caption-rule.thin{border-top:1px solid var(--rule)}
h1{font-family:'Noto Serif', serif; font-weight:600; font-size:clamp(32px, 4.6vw, 50px); line-height:1.14; color:var(--ink); letter-spacing:-0.01em; text-wrap:balance}
h1 em{font-style:normal; color:var(--brass)}
.dek{margin-top:28px; font-size:20px; color:#3a372f; max-width:680px; line-height:1.7; margin-left:auto; margin-right:auto}
.dek-emphasis{font-weight:600; color:#4a463e}
.dek-emphasis.no-break{white-space:nowrap}
.docket-row{display:flex; justify-content:space-between; gap:20px; font-family:'IBM Plex Mono', monospace; font-size:15px; font-weight:500; letter-spacing:0.05em; text-transform:uppercase; color:#3d3a30}
.hero-actions{margin:44px auto 0; display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:16px; max-width:max-content}
.hero .btn-primary{font-family:'IBM Plex Mono', monospace; font-weight:400; font-size:15px; letter-spacing:0.04em; text-transform:uppercase; text-align:center; background:var(--ink); color:var(--white); padding:17px 32px; border:1px solid var(--ink); box-sizing:border-box; transition:background .3s ease, border-color .3s ease}
.hero .btn-primary:hover{background:var(--brass); border-color:var(--brass); outline:none}
.hero .btn-primary:focus-visible{background:var(--brass); border-color:var(--brass); outline:none}
.hero .btn-secondary{font-family:'IBM Plex Mono', monospace; font-weight:400; font-size:15px; letter-spacing:0.04em; text-transform:uppercase; text-align:center; padding:17px 32px; border:1px solid var(--ink); color:var(--ink); box-sizing:border-box; transition:background .3s ease, border-color .3s ease, color .3s ease}
.hero .btn-secondary:hover{background:var(--brass); border-color:var(--brass); color:var(--white); outline:none}
.hero .btn-secondary:focus-visible{background:var(--brass); border-color:var(--brass); color:var(--white); outline:none}
.stats{margin-top:64px; display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--ink)}
.stat{padding:26px 20px; text-align:center; border-right:1px solid var(--rule)}
.stat:last-child{border-right:none}
.stat-num{font-family:'Fraunces', serif; font-weight:500; font-size:34px; color:var(--ink)}
.stat-label{margin:12px auto 0; max-width:26ch; font-family:'IBM Plex Mono', monospace; font-size:13.5px; letter-spacing:0.04em; text-transform:uppercase; color:#3d3a30}
.sector-block{padding:40px 0 32px; text-align:center; border-top:1px solid var(--rule); background:var(--paper-2); border-bottom:1px solid var(--rule)}
.sector-label{font-family:'IBM Plex Mono', monospace; font-size:20px; font-weight:600; letter-spacing:0.05em; text-transform:uppercase; color:#6b4e17; margin-bottom:16px}
.sector-list{display:flex; flex-wrap:wrap; justify-content:center; row-gap:8px; font-family:'IBM Plex Mono', monospace; font-size:20px; font-weight:500; letter-spacing:0.01em; color:var(--ink)}
.sector-list span{white-space:nowrap}
.sector-list span:not(:last-child):not(.sector-break)::after{content:"\2022"; margin:0 10px; color:var(--brass)}
.sector-list .sector-break{display:none; flex-basis:100%; height:0}
.about{display:grid; grid-template-columns:0.82fr 1.18fr; gap:64px; align-items:start}
.about-portrait{position:relative; aspect-ratio:848/1216; border:1px solid var(--ink); overflow:hidden; box-shadow:14px 14px 0 var(--paper-2)}
.about-portrait img{width:100%; height:100%; object-fit:cover; display:block}
.portrait-caption{margin-top:14px; display:flex; flex-direction:column; align-items:flex-start; gap:4px}
.portrait-caption .name{font-family:'Noto Serif', serif; font-size:21px; font-weight:500; letter-spacing:0.01em; color:var(--ink)}
.portrait-caption .role{font-family:'IBM Plex Mono', monospace; font-weight:500; font-size:14.5px; letter-spacing:0.060em; text-transform:uppercase; color:#7a5a1f}
#about .section-label{display:block; margin-bottom:11px}
.about-copy p{margin-bottom:16px; color:#3a372f; font-size:19px; max-width:62ch}
.about-copy p:first-of-type{font-size:19px; color:var(--ink)}
.entity-name{font-weight:600; color:var(--ink)}
.entity-name.no-break{white-space:nowrap}
.credentials{margin-top:28px; border-top:1px solid var(--ink); padding-top:20px; display:grid; grid-template-columns:1fr 1fr; gap:18px}
.credential dt{font-family:'IBM Plex Mono', monospace; font-size:14.5px; font-weight:500; letter-spacing:0.07em; text-transform:uppercase; color:#7a5a1f; margin-bottom:5px}
.credential dd{font-size:16px; color:var(--ink)}
.approach{max-width:840px; margin:0 auto; text-align:center}
.approach blockquote{font-family:'Source Serif 4', serif; font-style:normal; font-weight:400; font-size:clamp(21px, 2.8vw, 27px); color:var(--ink); line-height:1.6}
.approach blockquote .no-break{white-space:nowrap}
.approach blockquote .quote-strong{font-weight:500; color:var(--ink)}
.approach blockquote .quote-emphasis{color:#6b4e17}
.approach cite{display:block; margin-top:22px; font-family:'Noto Serif', serif; font-style:normal; font-weight:600; font-size:19px; letter-spacing:0.01em; text-transform:none; color:var(--brass)}
.contact{background:var(--ink); color:var(--white)}
.contact .section-label{font-family:'DejaVu Serif', serif; font-size:20px; font-weight:400; letter-spacing:1.5px; line-height:1.25; color:var(--brass-soft)}
.contact .section-head{border-bottom-color:rgba(255,253,248,0.25)}
.contact .section-title{color:var(--white); font-family:'P052', serif; font-size:clamp(30px, 5vw, 44px); font-weight:400; letter-spacing:normal; line-height:1.15}
.contact-grid{display:grid; grid-template-columns:1.1fr 0.9fr; gap:64px}
.contact-copy p{color:rgba(255,253,248,0.8); font-size:19px; line-height:1.6; margin-bottom:24px; max-width:440px}
.contact-detail{margin-bottom:20px}
.contact-detail dt{font-family:'DejaVu Serif', serif; font-size:17px; font-weight:400; letter-spacing:0.7px; text-transform:uppercase; color:var(--brass-soft); margin-bottom:6px}
.contact-detail dd{font-size:19px}
.contact-detail a{border-bottom:1px solid rgba(255,253,248,0.3)}
.contact-detail dd a{text-decoration:none; display:inline; min-height:0}
.contact-detail a:hover{border-color:var(--brass-soft); color:var(--brass-soft)}
form{display:flex; flex-direction:column; gap:15px; padding:0; border:none; background:transparent}
.field label{display:block; font-family:'DejaVu Serif', serif; font-size:17px; font-weight:400; letter-spacing:0.7px; text-transform:uppercase; color:rgba(255,253,248,0.75); margin-bottom:8px}
.field-required{color:var(--brass-soft); font-weight:600}
.field-optional{font-size:12px; font-weight:400; text-transform:none; letter-spacing:0.02em; color:rgba(255,253,248,0.45)}
.field input{width:100%; background:transparent; border:none; border-bottom:1px solid rgba(255,253,248,0.35); color:var(--white); font-family:'Source Serif 4', serif; font-size:18px; padding:8px 2px; resize:none}
.field textarea{width:100%; background:transparent; border:none; border-bottom:1px solid rgba(255,253,248,0.35); color:var(--white); font-family:'Source Serif 4', serif; font-size:18px; padding:8px 2px; resize:none; min-height:88px}
.field input:focus{outline:none; border-bottom-color:var(--brass-soft)}
.field textarea:focus{outline:none; border-bottom-color:var(--brass-soft)}
.field input:focus-visible{outline:2px solid var(--brass-soft); outline-offset:2px}
.field textarea:focus-visible{outline:2px solid var(--brass-soft); outline-offset:2px}
.field input.has-error{border-bottom-color:#ff9d8a}
.field textarea.has-error{border-bottom-color:#ff9d8a}
.field-error{display:none; margin-top:4px; font-family:'IBM Plex Mono', monospace; font-size:13px; color:#e0a596; letter-spacing:0.01em}
.submit-btn{margin-top:8px; align-self:flex-start; width:auto; min-height:auto; font-family:'IBM Plex Mono', monospace; font-size:15px; font-weight:400; letter-spacing:0.04em; text-transform:uppercase; background:var(--brass-soft); color:var(--ink); padding:16px 42px; border:1px solid var(--brass-soft); cursor:pointer; transition:background .2s ease, color .2s ease}
.submit-btn:hover{background:var(--white); outline:none}
.submit-btn:focus-visible{background:var(--white); outline:2px solid var(--white); outline-offset:3px}
.submit-btn:disabled{opacity:0.6; cursor:not-allowed}
#form-success{display:none; margin-top:4px; padding:0; border:none; background:none; font-family:'IBM Plex Mono', monospace; font-size:14px; color:#9fe0ae; letter-spacing:0.02em; line-height:1.5}
#form-error{display:none; margin-top:4px; padding:0; border:none; background:none; font-family:'IBM Plex Mono', monospace; font-size:14px; color:#ff9d8a; letter-spacing:0.02em; line-height:1.5}
#form-error a{color:#ff9d8a; text-decoration:underline}
footer{padding:28px 32px; border-top:1px solid rgba(255,253,248,0.2); background:var(--ink)}
.footer-row{max-width:1120px; margin:0 auto; padding:0; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; font-family:'IBM Plex Mono', monospace; font-size:14px; letter-spacing:0.04em; text-transform:uppercase; color:rgba(255,253,248,0.7)}
.footer-row a{text-decoration:none; color:inherit}
.footer-row a:hover{color:var(--brass-soft)}

@media (max-width:1024px) {
  .about{gap:64px}
}

@media (max-width:900px) {
  .sector-list .sector-break{display:block}
  .sector-list span:nth-child(2)::after{content:none}
}

@media (max-width:860px) {
  .logo-full{display:none}
  .logo-mark{display:block}
}

/* Header responsive — match v10's actual behavior: the primary nav stays
   expanded down to 860px (v14 collapsed early at 1080), and at <=860 the whole
   .nav-right (language switch AND CTA) is hidden, leaving only the logo mark and
   the menu toggle. The menu toggle, its X-transform, aria wiring and resize
   listener (below / in JS) are the retained accessibility + defect corrections.

   Korean honours v10's 860 exactly. English carries longer nav labels
   (ABOUT / EXPERIENCE / PRACTICE AREAS / RESULTS / CONTACT). Measured in a
   browser with the production Google fonts loaded (IBM Plex Mono 500), the
   English header needs 1055.3px of layout width to sit inside its own 32px
   gutter, and it overflows the document outright below 1023.3px. Chrome
   evaluates width media queries against the viewport INCLUDING a classic
   vertical scrollbar, so a 15px scrollbar costs a further 15px (hard minimum
   1070.3px). At 1120px - the .nav max-width - the header reaches its designed
   spacing (32.4px between logo/links and between links/language switch); below
   that those two gaps compress by 0.5px per px until they close at ~1055px.
   EN therefore collapses at 1119 and returns at 1120, which keeps >=24.9px of
   separation even with a classic scrollbar. (v16 used 1020/1021, measured with
   substitute fonts; with the real fonts that produced 7-10px of horizontal
   overflow and a clipped CTA.)
   v10 "fitted" EN below that only by letting the logo link shrink to zero width
   (the logo disappeared); with that defect corrected the overflow would instead
   push the whole page into horizontal scroll. See report. */
@media (min-width:861px) {
  .nav-links{display:flex}
  .nav-right{display:flex}
  .nav-right > .nav-cta{display:inline-flex}
  .menu-toggle{display:none}
}
@media (max-width:860px) {
  .nav-links{display:none}
  .nav-right{display:none}
  .menu-toggle{display:inline-flex}
}
@media (max-width:1119px) {
  html[lang="en"] .nav-links{display:none}
  html[lang="en"] .nav-right{display:none}
  html[lang="en"] .menu-toggle{display:inline-flex}
  html[lang="en"] .logo-full{display:none}
  html[lang="en"] .logo-mark{display:block}
}

@media (max-width: 860px) {
  .hero{padding:48px 22px 0}
  .eyebrow{margin-bottom:16px}
  .dek{max-width:600px; font-size:17px; line-height:1.7}
  .dek-emphasis.no-break{white-space:normal}
  .docket-row{flex-direction:column; gap:10px; align-items:center; text-align:center}
  .hero-actions{display:flex; flex-direction:column; align-items:stretch; gap:13px; max-width:340px; margin-left:auto; margin-right:auto}
  .hero-actions a{width:100%; min-height:44px; box-sizing:border-box; display:flex; align-items:center; justify-content:center}
  .stats{margin-top:64px; grid-template-columns:1fr}
  .stat{padding:24px 20px; border-right:none; border-bottom:1px solid var(--rule)}
  .stat:last-child{border-bottom:none}
  .stat-num{white-space:nowrap; font-size:34px}
  .sector-block{padding:40px 0 34px}
  .sector-list{font-size:20px}
  .about{grid-template-columns:1fr; gap:64px}
  .about-portrait{max-width:300px; box-shadow:10px 10px 0 var(--paper-2)}
  .portrait-caption{margin-bottom:44px}
  .about-copy p{max-width:none}
  .about-copy p:first-of-type{font-size:19px}
  .entity-name.no-break{white-space:normal}
  .credentials{grid-template-columns:1fr; gap:18px}
  .contact-grid{grid-template-columns:1fr; gap:48px}
}


/* ================= Korean (html[lang="ko"]) typography overrides ================= */
html[lang="ko"] #approach .section-label{font-family:'IBM Plex Mono', 'Noto Sans KR', sans-serif;}
html[lang="ko"] .brand{font-family:'Fraunces', 'Noto Serif KR', serif;}
html[lang="ko"] .brand-eyebrow{font-family:'IBM Plex Mono', 'Noto Sans KR', sans-serif;}
html[lang="ko"] .brand-name{font-family:'Fraunces', 'Noto Serif KR', serif;}
html[lang="ko"] .brand-sub{font-family:'IBM Plex Mono', 'Noto Sans KR', sans-serif;}
html[lang="ko"] .lang-switch{font-family:'IBM Plex Mono', 'Noto Sans KR', sans-serif;}
html[lang="ko"] .nav-links{font-family:'IBM Plex Mono', 'Noto Sans KR', sans-serif;}
html[lang="ko"] .nav-cta{font-family:'IBM Plex Mono', 'Noto Sans KR', sans-serif;}
html[lang="ko"] .eyebrow{font-family:'IBM Plex Mono', 'Noto Sans KR', sans-serif;}
html[lang="ko"] h1{font-family:'Noto Serif KR', serif;}
html[lang="ko"] .docket-row{font-family:'IBM Plex Mono', 'Noto Sans KR', sans-serif;}
html[lang="ko"] .hero .btn-primary{font-family:'IBM Plex Mono', 'Noto Sans KR', sans-serif;}
html[lang="ko"] .hero .btn-secondary{font-family:'IBM Plex Mono', 'Noto Sans KR', sans-serif;}
html[lang="ko"] .stat-num{font-family:'Fraunces', 'Noto Serif KR', serif;}
html[lang="ko"] .stat-label{font-family:'IBM Plex Mono', 'Noto Sans KR', sans-serif;}
html[lang="ko"] .sector-label{font-family:'IBM Plex Mono', 'Noto Sans KR', sans-serif;}
html[lang="ko"] .sector-list{font-family:'IBM Plex Mono', 'Noto Sans KR', sans-serif;}
html[lang="ko"] .portrait-caption .name{font-family:'Noto Serif KR', serif;}
html[lang="ko"] .portrait-caption .role{font-family:'IBM Plex Mono', 'Noto Sans KR', sans-serif;}
html[lang="ko"] .credential dt{font-family:'IBM Plex Mono', 'Noto Sans KR', sans-serif;}
html[lang="ko"] .approach blockquote{font-family:'Noto Serif KR', serif;}
html[lang="ko"] .approach cite{font-family:'Noto Serif KR', serif;}
html[lang="ko"] .contact .section-title{font-family:'Noto Serif KR', serif;}
html[lang="ko"] .contact .section-label{font-family:'DejaVu Serif', 'Noto Serif KR', serif;}
html[lang="ko"] .contact-detail dt{font-family:'DejaVu Serif', 'Noto Serif KR', serif;}
html[lang="ko"] .field label{font-family:'DejaVu Serif', 'Noto Serif KR', serif;}
html[lang="ko"] .field input{font-family:'Noto Serif KR', serif;}
html[lang="ko"] .field textarea{font-family:'Noto Serif KR', serif;}
html[lang="ko"] .field-error{font-family:'IBM Plex Mono', 'Noto Sans KR', sans-serif;}
html[lang="ko"] .submit-btn{font-family:'IBM Plex Mono', 'Noto Sans KR', sans-serif;}
html[lang="ko"] #form-success{font-family:'IBM Plex Mono', 'Noto Sans KR', sans-serif;}
html[lang="ko"] #form-error{font-family:'IBM Plex Mono', 'Noto Sans KR', sans-serif;}
html[lang="ko"] .footer-row{font-family:'IBM Plex Mono', 'Noto Sans KR', sans-serif;}

/* ================= Defect corrections ================= */
/* (2) Modal-dialog semantics.
       The overlay is a real modal dialog, so every control that operates it is
       a descendant of [role="dialog"]. The visible X is .menu-close, which
       lives inside .mobile-menu and is pinned to the exact coordinates the
       header toggle occupied (top 17px / right 32px = .nav's 17px 32px
       padding, measured identical at every width in both languages). The
       header therefore stays UNDER the overlay at its normal z-index, and the
       opening toggle is made visibility:hidden while the dialog is open so
       there is never a second visible X and nothing outside the dialog is
       clickable, focusable, or hit-testable. Outside content is additionally
       marked inert + aria-hidden by script; the pointer-events rule below is
       the fallback for engines without inert support. */
body.menu-open > *:not(.mobile-menu){pointer-events:none;}
body.menu-open .menu-toggle{visibility:hidden;}
.menu-close{
  position:fixed;
  top:calc(17px + env(safe-area-inset-top,0px));
  right:calc(32px + env(safe-area-inset-right,0px));
  width:var(--tap);height:var(--tap);
  display:inline-flex;align-items:center;justify-content:center;
  background:none;border:1px solid var(--rule);
  color:var(--ink);cursor:pointer;padding:0;
  z-index:1;
}
.menu-close .hamburger-icon{background:transparent;}
.menu-close .hamburger-icon::before{top:0;transform:rotate(45deg);}
.menu-close .hamburger-icon::after{top:0;transform:rotate(-45deg);}

/* (3) Decorative open-menu top band.
       The approved open-menu appearance shows the JSK logo mark and the header
       hairline across the top 79px. Those belong to the real header, which is
       now correctly UNDER the modal and inert, so they are reproduced inside
       the dialog as pure decoration: aria-hidden, alt="", no link, and
       pointer-events:none, so the band adds nothing to the accessibility tree,
       nothing to the focus order, and nothing that can be clicked or tapped.
       The images carry the header's own .logo-full/.logo-mark classes, so they
       inherit the identical heights and the identical responsive swap - the
       geometry cannot drift from the header's.
       position:fixed keeps it out of the flex flow exactly as .menu-close is,
       so the menu's vertical geometry, auto-margin centring and overlay
       scrolling are untouched, and the band stays pinned while the overlay
       scrolls. Padding 17px/32px reproduces .nav's padding, so the logo lands
       at x=32 y=17 and the 1px bottom border at y=79, matching the header. */
.menu-topband{
  position:fixed;
  top:0;left:0;right:0;
  display:flex;align-items:center;
  padding:17px 32px;
  padding-top:calc(17px + env(safe-area-inset-top,0px));
  padding-right:calc(32px + env(safe-area-inset-right,0px));
  padding-left:calc(32px + env(safe-area-inset-left,0px));
  background:rgba(246,244,238,0.92);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--rule);
  pointer-events:none;
  z-index:1;
}

/* ===========================================================
   v22 — section and group heading scale.
   The section eyebrows and group titles were set at 11.5px (EN)
   / 13px (KO) and read as micro-labels rather than headings.
   They are raised to a three-tier scale, largest first:

     sole section heading  (OUR APPROACH)   28px EN / 30px KO
     section eyebrow       (TRACK RECORD…)  25px EN / 28px KO
     group title           (Core Business…) 23px EN / 26px KO

   line-height is set explicitly on the eyebrows and group titles.
   They otherwise inherit the BODY ratio (1.80 EN / 1.94 KO), which
   at these sizes produces a 45-48px line box and, where a long
   uppercase title wraps at narrow widths, a badly gapped second
   line. 1.25 is the minimum adjustment that keeps the enlarged
   type from disturbing section rhythm.

   Family, weight, colour, letter-spacing, capitalization,
   alignment, margins and padding are unchanged throughout.
   =========================================================== */

#experience .section-label,
#practice .section-label,
#results .section-label{font-size:25px; line-height:1.25;}

.areas-group-label,
.matters-group-label{font-size:23px; line-height:1.25;}

html[lang="ko"] #experience .section-label,
html[lang="ko"] #practice .section-label,
html[lang="ko"] #results .section-label{font-size:28px;}
html[lang="ko"] .contact .section-label{font-size:20px;}

html[lang="ko"] .areas-group-label,
html[lang="ko"] .matters-group-label{font-size:26px;}

html[lang="ko"] #approach .section-label{font-size:30px;}

/* Narrow-width corrections, English only. Korean labels are short and
   sit on one line at every width, so none of this applies to ko.html.

   1. Uppercase tracking that reads correctly at 11.5px is too open at
      23-25px on a phone. Reducing it to 0.08em below 430px is what keeps
      the longer uppercase labels (e.g. HIGH-STAKES RESULTS) to a tidy
      two lines instead of breaking word-by-word at 320px.
   2. Below 861px the portrait column is capped at 300px, leaving the
      role label 280px (256px at 320px viewports). At 14.5px it measures
      280.4px and would wrap; 14px measures 251.5px and still reads
      larger than the 13px it replaces. */
@media (max-width:430px){
  html[lang="en"] #experience .section-label,
  html[lang="en"] #practice .section-label,
  html[lang="en"] #results .section-label,
  html[lang="en"] .areas-group-label,
  html[lang="en"] .matters-group-label{letter-spacing:0.08em;}
}

@media (max-width:860px){
  html[lang="en"] .portrait-caption .role{font-size:14px;}
}

/* ===========================================================
   v23 — readability, spacing, alignment and navigation pass.
   All changes live here; site.css and tokens.css are unchanged.
   Each rule overrides an earlier same-specificity declaration by
   load order. Sizes are px so English and Korean move together
   except where a language is given its own value.
   =========================================================== */

/* 4. Body copy raised to the accepted About/Contact size (19px,
   matching .about-copy). Long-form prose — timeline descriptions,
   practice-area intros, practice-card copy — goes to 19px.
   Compact result-card detail and the footnote go to 18px so they
   stay below the result headings (19px EN / 18.5px KO). Line-height
   is a unitless token on every one of these, so it rescales
   automatically. */
.tl-desc,
.area-card p,
.areas-intro,
.matters-intro{font-size:19px;}
.matter-item p,
.matters-footnote{font-size:18px;}

/* 5. "Discuss Your Needs ->" card link. At 11.5px (EN) / 13px
   (KO) it read as a micro-label beneath 19px copy and 23px group
   titles. Raised to a clearly legible size that stays subordinate
   to the group title. Family, weight, uppercase, tracking, arrow,
   colour, hover and destination are unchanged. */
.area-link{font-size:14px;}
html[lang="ko"] .area-link{font-size:15px;}

/* 7. Result category labels, raised from 10.5px (EN) / 12px (KO)
   to a legible size that stays below the metric and the card
   heading. Tracking eased so the longer labels do not over-open;
   pulled in further on phones to avoid a third wrapped line. */
.matter-item .matter-cat{font-size:13px; letter-spacing:0.1em;}
html[lang="ko"] .matter-item .matter-cat{font-size:14px;}

/* 8. Centre the three purely numeric result values (50%+, 23,500,
   $100M+). The word values (Billions, Claims Withdrawn, Above
   Projected Maximum) stay left. Shared class covers both
   languages; specificity (0,3,0) clears the base left-alignment. */
.matter-item .matter-metric.matter-metric-fraunces{text-align:center;}

/* v31 note: the v30 three-column-only min-height reservation on
   .matter-cat is gone. In the two-column layout every card that
   shares a row carries a single-line label at all 2-col widths
   (>=861px), so metrics align on their own with no reserved height;
   below 861px the grid is one column and alignment is moot. */

/* 6. Call-to-action panels. The supporting sentence is raised one
   step (17 -> 18px) without competing with the 26px panel title,
   and given room before the button, which previously sat directly
   beneath it. Centering (margin auto) is preserved. */
.areas-cta p,
.matters-cta p{font-size:18px; margin:0 auto 26px;}

/* 10. Navigation word spacing. IBM Plex Mono renders a wide word
   space, so "Practice Areas" carried a ~10.7px intra-word gap,
   nearly the 20px between separate links. A negative word space
   tightens multi-word links so their words read as one item;
   single-word links are unaffected. Korean nav labels use the
   same wide space and get a gentler correction. */
html[lang="en"] .nav-links a{word-spacing:-4.5px;}
html[lang="ko"] .nav-links a{word-spacing:-3px;}

/* =====================================================================
   v24 (2026-07-25) — CTA typography normalization + hero line-wrap.
   Appended block; no earlier v23 rule is altered except .submit-btn
   size/weight above.
   ===================================================================== */

/* v24 §2. The two consultation-panel "Request a Consultation" buttons
   (.areas-cta / .matters-cta .btn-primary) fell through to the base
   .btn-primary rule and rendered in Arial (--font-ui) 12.5px/700 with
   0.12em tracking — proportional, small, and heavy, so the label read
   compressed next to the airy IBM Plex Mono nav and hero CTAs. This
   gives them the hero-CTA recipe (IBM Plex Mono 15px/400, 0.04em,
   uppercase). Background, border, padding, min-height, centering, and
   all interaction states stay with the base .btn-primary rule. */
.areas-cta .btn-primary,
.matters-cta .btn-primary{
  font-family:'IBM Plex Mono', monospace;
  font-weight:400;
  font-size:15px;
  letter-spacing:0.04em;
  text-transform:uppercase;
}
html[lang="ko"] .areas-cta .btn-primary,
html[lang="ko"] .matters-cta .btn-primary{
  font-family:'IBM Plex Mono', 'Noto Sans KR', sans-serif;
}

/* v24 §3. Keep "the United States and Korea." together on the final
   line of the English hero dek at desktop. A nowrap span cannot break
   internally, so the whole phrase moves to the last line as one unit
   instead of splitting "the United / States". Released to normal at
   the mobile dek breakpoint (<=860px, where the dek narrows to
   600px/17px), matching the existing .dek-emphasis.no-break release,
   so narrow screens wrap naturally without overflow. EN only — the
   Korean hero copy is unchanged. */
.dek-nowrap{white-space:nowrap;}
@media (max-width: 860px){
  .dek-nowrap{white-space:normal;}
}

/* =====================================================================
   v26 (2026-07-26) — readability + CTA hover-parity pass.
   Appended block; no earlier rule is altered (every existing
   declaration stays byte-identical). On equal specificity the later
   source wins, so each rule below overrides only the earlier
   declaration for exactly its listed selectors and nothing else.
   ===================================================================== */

/* v26 §1. Practice Areas / Selected Results intro paragraphs:
   19px -> 20px and --body-ink (#3a372f) -> --charcoal (#2a2a28) for
   stronger contrast. Scoped to the two intro selectors ONLY, so the
   earlier shared 19px rule still governs .tl-desc and .area-card p.
   Font family, weight, the unitless body line-height (1.80, rescales
   with size), the 34em measure, and the intro margins are all
   inherited unchanged. Same classes in EN and KO, so both languages
   move to 20px/charcoal together. */
.areas-intro,
.matters-intro{font-size:20px; color:var(--charcoal);}

/* v26 §2. CTA supporting sentence ("Please tell us briefly ..."):
   18px -> 20px and --body-ink -> --charcoal. Only font-size and color
   change here; the 26px sentence-to-button margin (margin:0 auto 26px)
   set on the earlier .areas-cta p / .matters-cta p rule is NOT restated
   and is therefore preserved, as are center alignment (parent
   text-align:center) and the 34em measure. It stays subordinate to the
   panel title (which is unchanged). EN + KO. */
.areas-cta p,
.matters-cta p{font-size:20px; color:var(--charcoal);}

/* v26 §3. Panel "Request a Consultation" buttons hover/focus-visible
   made identical to the hero CTA. The hero uses
   .hero .btn-primary:hover/:focus-visible {background:var(--brass);
   border-color:var(--brass); outline:none} over a
   transition:background .3s ease, border-color .3s ease. These panel
   buttons previously inherited the base .btn-primary:hover (var(--ink-2))
   and the base .2s transition. The transition rule below matches the
   hero's .3s timing; the :hover/:focus-visible rules switch background
   AND border to brass together while the text stays white (from the
   base .btn-primary color) and add outline:none. Specificity (0,3,0)
   overrides both the base .btn-primary:hover (0,2,0) ink-2 hover and the
   global a:focus-visible (0,2,0) outline, exactly as the hero rule does,
   so the brass fill is the visible keyboard-focus indicator (matching
   the approved hero). Normal (non-hover) appearance, typography,
   dimensions, padding, alignment, destination and hit area are
   untouched. Language-agnostic selectors cover EN and KO. */
.areas-cta .btn-primary,
.matters-cta .btn-primary{transition:background .3s ease, border-color .3s ease;}
.areas-cta .btn-primary:hover,
.matters-cta .btn-primary:hover{background:var(--brass); border-color:var(--brass); outline:none}
.areas-cta .btn-primary:focus-visible,
.matters-cta .btn-primary:focus-visible{background:var(--brass); border-color:var(--brass); outline:none}

/* =====================================================================
   v27 (2026-07-26) — Korean-desktop refinement pass.
   Appended block; NO earlier rule is altered (every existing declaration
   stays byte-identical). English desktop (>=1120px) is frozen: every rule
   below is qualified html[lang="ko"], so it cannot reach index.html.

   Finding. The Korean page sets its body prose at the 1.94 line-height it
   inherits from the Korean token override (--body-lh), which reads open and
   comfortable (About copy, timeline, practice-card copy). But a handful of
   PARAGRAPH elements carry a line-height that restore.css hard-codes in px-
   free ratios tuned for the Latin master (1.60 / 1.70) and applies WITHOUT a
   language qualifier, so the Korean text in them is set noticeably tighter
   than the rest of the Korean page. That internal inconsistency is the
   disparity corrected here; English keeps its 1.60 / 1.70 exactly. Only the
   Korean line-height is relaxed toward the Korean body rhythm — nothing else
   (size, weight, colour, family, measure, margins, alignment) is touched. */

/* Hero supporting paragraph. .dek is line-height:1.70 for both languages;
   the Korean dek reads tighter than the Korean body norm. Relaxed for KO
   only, short of the full 1.94 because the dek is a lead line at a
   constrained 680px measure. */
html[lang="ko"] .dek{line-height:1.85;}

/* Contact intro paragraph on the navy panel. .contact-copy p is
   line-height:1.60; against the dark ground the tight Korean leading read as
   cramped next to the 1.94 About copy. Brought up to the Korean paragraph
   rhythm. Colour (rgba white .8), 440px measure and 24px paragraph gap are
   unchanged. */
html[lang="ko"] .contact-copy p{line-height:1.9;}

/* Approach display quote. .approach blockquote is line-height:1.60. At 27px
   Korean serif across three centred lines this is a touch tight; opened
   gently. Large display type needs less ratio than body copy, so this stays
   below the 1.9 used on the paragraphs above. */
html[lang="ko"] .approach blockquote{line-height:1.72;}

/* =====================================================================
   v28 (2026-07-26) — Practice Areas: six equal services.
   Appended block; NO earlier rule is altered (every existing
   declaration stays byte-identical). The two group labels ("Core
   Business Counsel" / "Specialized Support" and their Korean
   equivalents) and the two-grid split were removed in the HTML; the
   six .area-card entries now sit in one .area-grid. Consequences,
   all handled below or already correct in site.css:
   - Dividers: .area-card{border-bottom:1px var(--rule)} now falls
     between every adjacent pair 1-2..5-6 identically, and
     .area-card:last-child{border-bottom:none} clears it on the sixth
     only. The former group-boundary between entries 3 and 4 (a label
     with its own rule + the --group-gap) is gone; 3->4 now uses the
     same 46px/46px row rhythm as every other pair. No CSS needed.
   - The dead .area-card-primary selector in site.css now matches
     nothing in Practice Areas; it is left untouched (out of this
     section's scope). The shared .area-grid / .matters-grid
     -primary/-secondary group rules were removed in v31 when Selected
     Results collapsed to a single ungrouped grid.
   ===================================================================== */

/* Brass accent on all six headings. Reuses the exact treatment that
   site.css applied to the first three via .area-card-primary h3::before
   (width:34px; height:3px; background:var(--brass); margin-bottom:16px).
   That rule is now inert (no card carries -primary), so this restates
   the identical accent on the shared .area-card h3, giving all six one
   uniform accent. Same width, thickness, colour, left alignment and
   16px accent-to-heading gap as the approved first three; EN + KO. */
.area-card h3::before{
  content:"";display:block;
  width:34px;height:3px;background:var(--brass);
  margin-bottom:16px;
}

/* Intro-to-first-entry spacing. With the "Core Business Counsel"
   label removed, the section intro sat --intro-gap (64px desktop /
   50px mobile) above the first card, whose own 46px/32px top padding
   then added on top — ~110px of empty space before the first accent,
   noticeably looser than the 46px+46px rhythm between entries. The
   intro's bottom margin is trimmed for Practice Areas only so the
   first card's own top padding sets the breathing room; Selected
   Results (.matters-intro) keeps the full --intro-gap. EN + KO. */
.areas-intro{margin-bottom:28px;}

/* v30. EN hero credential line rendered as one centered rule. The
   docket carries two spans -- "English & Korean" and "U.S. Counsel
   • Member, State Bar of California" (the second span's bullet is
   literal in the markup). At >=861px the row is centered and a
   pseudo-bullet is inserted between the two spans, so the credentials
   read as a single, evenly punctuated line:
   ENGLISH & KOREAN • U.S. COUNSEL • MEMBER, STATE BAR OF CALIFORNIA.
   The pseudo-bullet's side margins are tuned to match the spacing of
   the literal bullet inside the second span. The rule is bounded to
   >=861px so it never overrides the phone layout: at <=860px the
   docket stacks (flex-direction:column with its own 10px gap, defined
   earlier) and, with no pseudo-bullet, each credential sits cleanly on
   its own line. English only; the Korean docket keeps its shortened
   two-item layout. */
@media (min-width:861px){
  html[lang="en"] .hero .docket-row{justify-content:center; gap:0;}
  html[lang="en"] .hero .docket-row span + span::before{content:"\2022"; margin:0 0.72em;}
}
/* =====================================================================
   v31 (2026-07-28) — Selected Experience: two-column results layout +
   section-transition spacing. The grid change (three -> two columns)
   and the removal of the obsolete min-height reservation live in
   site.css; this block carries only the vertical-rhythm corrections.
   Appended; no earlier rule is altered.
   ===================================================================== */

/* Practice Areas consultation panel -> Selected Experience.
   Both sections used the full section rhythm (var(--section-space) top
   and bottom), stacking to ~200px between the bordered CTA panel that
   closes Practice Areas and the "Selected Experience" eyebrow — a
   conspicuous void in the screenshot. The two ends of that one boundary
   are trimmed symmetrically so the sections stay clearly separated with
   an intentional relationship (~128px desktop, ~104px on phones), while
   every other edge of both sections keeps the standard rhythm. EN + KO;
   the ID scope touches nothing else. */
#practice{padding-bottom:clamp(52px,5vw,64px);}
#results{padding-top:clamp(52px,5vw,64px);}

/* =====================================================================
   v33 (2026-07-28)
   --------------------------------------------------------------------
   Self-hosted faces for the Contact "Editorial Serif" treatment
   (Project 2). Neither DejaVu Serif nor P052 is a reliable webfont and
   neither is on Google Fonts, so both are packaged as Latin-subset
   woff2 and declared here. Latin-only by design: Korean contact copy
   falls back to Noto Serif KR via the html[lang="ko"] overrides above.
   Pure CSS, no JS font loader. */
@font-face{
  font-family:'DejaVu Serif';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('/assets/fonts/dejavu-serif-400.woff2') format('woff2');
}
@font-face{
  font-family:'P052';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('/assets/fonts/p052-400.woff2') format('woff2');
}

/* Our Approach — five-line English desktop arrangement (Project 3).
   Each sentence fragment is wrapped in a .ql span. Base state is inline
   so the quote reflows naturally on narrow screens and in Korean (which
   keeps its own <br> structure and never carries .ql). At wide English
   desktop the spans become blocks, yielding the exact five centered
   lines; the section widens just enough that the longest line (line 2)
   stays on a single line at the 27px clamp ceiling. .quote-strong on
   lines 4-5 keeps its restrained weight-500 treatment (defined above);
   no heavy bold is introduced. Alignment stays centered throughout. */
.approach blockquote .ql{display:inline;}
@media (min-width:1000px){
  html[lang="en"] .approach{max-width:900px;}
  html[lang="en"] .approach blockquote .ql{display:block;}
}

/* Hero buttons at the narrowest viewports: the full-width button drops to
   ~276px, at which "REQUEST A CONSULTATION" would wrap to two lines and sit
   taller than "VIEW EXPERIENCE". Trimming the side padding keeps both
   stacked buttons on one line and equal height. Desktop padding unchanged. */
@media (max-width:360px){
  .hero .btn-primary,.hero .btn-secondary{padding-left:16px;padding-right:16px;}
}

/* ============================ v34 (2026-07-29) — contact refinement ============================
   Scoped additions on top of the v33 base. Value-only edits above:
   .contact .section-title max 48->44px | .field-error 4px/#e0a596/0.01em |
   form gap 18->15px | .submit-btn padding 30->42px (desktop +~8.8%).
   The only NEW selector is below: the long "Please Briefly Describe Your Matter"
   label keeps its DejaVu Serif / 400 / 17px / uppercase / colour + asterisk, and
   only its tracking is eased from 0.7px to 0.35px so it no longer reads as
   disproportionately wide. Applies to EN and the equally long KO label. */
.field label[for="matter"]{letter-spacing:0.35px}

/* ============================ v35 (2026-07-29) — button & nav glow + type ============================
   Six approved projects. restore.css append-only; every earlier rule stays
   byte-identical, both HTML files unchanged. On equal specificity the later
   source wins, so each rule adds ONLY its listed properties over the existing
   (preserved) states. Tokens: --ink #16233d, --brass #8a6a2f,
   --brass-soft #b99a5c, --white #fffdf8. */

/* P1. Consultation-panel buttons — English desktop/tablet typography.
   The v24/v26 shared rule (IBM Plex Mono / 0.04em / uppercase, 400/15px)
   is kept for Korean (existing fallback stack). English only moves to
   weight 500 / 16px. Background, border, padding, min-height, alignment
   and every interaction state stay with the earlier rules. */
html[lang="en"] .areas-cta .btn-primary,
html[lang="en"] .matters-cta .btn-primary{font-weight:500; font-size:16px;}

/* P2. Hero buttons — shared white-lettering glow on hover/:focus-visible.
   color + text-shadow added to the existing .3s transition; the brass
   background/border transforms and normal typography are untouched. The
   glow is text-only and holds for the whole hover/focus. Language-agnostic
   selectors → the Korean hero buttons behave identically. */
.hero .btn-primary,
.hero .btn-secondary{transition:background .3s ease, border-color .3s ease, color .3s ease, text-shadow .3s ease;}
.hero .btn-primary:hover,.hero .btn-primary:focus-visible,
.hero .btn-secondary:hover,.hero .btn-secondary:focus-visible{
  color:#ffffff;
  text-shadow:0 0 4px rgba(255,255,255,0.45), 0 0 9px rgba(255,255,255,0.18);
}

/* P3. Header consultation button — same white glow, gold hover/focus state
   only. The transparent-background / navy-border / navy-letter normal state
   and the existing gold background + gold border on hover/focus are untouched;
   only the white lettering glows. EN + KO (shared .nav-cta selector). */
.nav-cta{transition:background .3s ease, border-color .3s ease, color .3s ease, text-shadow .3s ease;}
.nav-cta:hover,.nav-cta:focus-visible{
  color:#ffffff;
  text-shadow:0 0 4px rgba(255,255,255,0.45), 0 0 9px rgba(255,255,255,0.18);
}

/* P4. Contact submit button.
   Typography: English desktop/tablet weight 500 / 16px; Korean keeps its
   existing fallback (400/15px). Navy text glow on hover/:focus-visible —
   lettering stays navy (#16233d), the soft-gold -> white background transform
   and every dimension/border/outline are preserved; the glow transitions in
   and out over .3s and holds while hovered/focused. */
html[lang="en"] .submit-btn{font-weight:500; font-size:16px;}
.submit-btn{transition:background .2s ease, color .2s ease, text-shadow .3s ease;}
.submit-btn:hover,.submit-btn:focus-visible{
  color:#16233d;
  text-shadow:0 0 3px rgba(22,35,61,0.50), 0 0 7px rgba(22,35,61,0.20);
}
/* P4 narrow-mobile correction (<=360px): the approved 42px side padding is
   too wide for the ~256px contact column at 320. Below 360 the button drops
   to 20px side padding + nowrap so "REQUEST A CONSULTATION" stays one line
   fully inside the form; height, colours, hover/focus and 42px padding above
   360 are retained. English also eases 16 -> 15px here; the shorter Korean
   label shares the padding/nowrap only (not widened). */
@media (max-width:360px){
  .submit-btn{padding-left:20px; padding-right:20px; max-width:100%; white-space:nowrap;}
  html[lang="en"] .submit-btn{font-size:15px;}
}

/* P5. Main navigation links — shared warm-gold glow on hover/:focus-visible.
   The existing brass text colour and brass underline are preserved; a soft
   text-shadow (weaker than the button glows) is added to the existing .2s
   navigation transition. No movement/scale/weight/background change. The
   keyboard-focus path (:focus-visible) matches hover. EN + KO. */
.nav-links a{transition:border-color .2s ease, color .2s ease, text-shadow .2s ease;}
.nav-links a:hover,.nav-links a:focus-visible{
  color:var(--brass);
  text-shadow:0 0 3px rgba(185,154,92,0.45), 0 0 7px rgba(185,154,92,0.18);
}

/* P6. EN/KO language switch — inactive language only. Replaces the weak
   darker-navy hover with brass colour + brass underline + the warm-gold glow,
   on the .2s transition. The active language (navy + gold underline), the
   EN/KO separator, spacing/alignment, destinations and the existing focus
   outline are all unchanged. :not(.active) resolves correctly on both pages. */
.lang-switch a:not(.active){transition:color .2s ease, border-color .2s ease, text-shadow .2s ease;}
.lang-switch a:not(.active):hover,
.lang-switch a:not(.active):focus-visible{
  color:var(--brass);
  border-bottom:1px solid var(--brass);
  text-shadow:0 0 3px rgba(185,154,92,0.45), 0 0 7px rgba(185,154,92,0.18);
}

/* ============================================================
   v37 — Illumination correction pass (Projects 1–10)
   Appended, last-wins. Corrects v36: P1 logo effect removed;
   the one-shot effects rebuilt with a real letter-colour change
   plus glyph-following glow (jsk-gold / jsk-navy / jsk-sapphire /
   jsk-champagne keyframes, no rectangular haze); P5 changed to a
   sustained hover hold; P3 / P7B / P9B / P10 substantially
   brightened; P8A heading weight and tracking eased; P9C focus
   completed. Decorative pointer effects are gated to
   (hover:hover) and (pointer:fine) so touch never sticks; the
   form-focus effect (P9C) is deliberately NOT gated. Reduced-
   motion is handled by the existing global block plus the P10
   delay reset at the end. No normal-state geometry, colour,
   border or layout change anywhere except the approved P8A
   typography above.
   ============================================================ */

/* Shared sweep keyframe — still used by Project 2 (hero headline). */
@keyframes jsk-sweep{
  from{background-position:120% 0;}
  to{background-position:-20% 0;}
}

/* One-shot illumination keyframes. Colour and glyph glow are given
   only across the 16–29% plateau; at 0%/100% each property falls back
   to the element's own underlying value, so one keyframe serves every
   heading whatever its normal colour. Shape: quick rise, brief bright
   peak, long smooth fade. */
@keyframes jsk-gold{
  16%,29%{
    color:#b77d08;
    text-shadow:
      0 0 3px rgba(255,250,220,0.98),
      0 0 8px rgba(255,215,104,0.86),
      0 0 16px rgba(218,150,19,0.62),
      0 0 26px rgba(218,150,19,0.34);
  }
}
@keyframes jsk-navy{
  16%,29%{
    color:#28568f;
    text-shadow:
      0 0 3px rgba(255,248,220,0.90),
      0 0 8px rgba(72,113,169,0.55),
      0 0 15px rgba(185,154,92,0.42);
  }
}
@keyframes jsk-sapphire{
  16%,29%{
    color:#285a96;
    text-shadow:
      0 0 3px rgba(255,253,240,0.98),
      0 0 8px rgba(83,132,190,0.70),
      0 0 16px rgba(210,160,54,0.52),
      0 0 26px rgba(185,126,14,0.28);
  }
}
@keyframes jsk-champagne{
  16%,29%{
    color:#f0cc72;
    text-shadow:
      0 0 3px rgba(255,255,255,0.98),
      0 0 9px rgba(255,224,145,0.88),
      0 0 18px rgba(224,181,83,0.64),
      0 0 28px rgba(224,181,83,0.34);
  }
}

@media (hover:hover) and (pointer:fine){

  /* -- P1: logo burnishing effect REMOVED (Project 1 cancelled). Logo
        returns to its original static, clickable, responsive state. -- */

  /* -- P2: principal hero-headline synchronized multiline sweep
        (accepted; unchanged from v36). -- */
  .hero h1{position:relative;}
  .hero h1 .h1-shine{
    position:absolute; inset:0;
    pointer-events:none; -webkit-user-select:none; user-select:none;
    text-wrap:balance;
    color:transparent; -webkit-text-fill-color:transparent;
    background-image:linear-gradient(90deg,
      rgba(255,246,220,0) 43%,
      rgba(255,246,220,0.45) 47%,
      rgba(255,250,232,0.95) 50%,
      rgba(255,246,220,0.45) 53%,
      rgba(255,246,220,0) 57%);
    background-repeat:no-repeat;
    background-size:200% 100%;
    background-position:120% 0;
    -webkit-background-clip:text; background-clip:text;
  }
  .hero h1:hover .h1-shine{ animation:jsk-sweep 1.15s ease; }

  /* -- P3: statistics — sustained number + label highlight (brightened) -- */
  .stat-num,.stat-label{transition:color .28s ease, text-shadow .28s ease;}
  .stat:hover .stat-num{
    color:#28568f;
    text-shadow:
      0 0 3px rgba(255,248,220,0.90),
      0 0 8px rgba(72,113,169,0.55),
      0 0 15px rgba(185,154,92,0.42);
  }
  .stat:hover .stat-label{
    color:#a97308;
    text-shadow:
      0 0 3px rgba(255,235,166,0.90),
      0 0 8px rgba(210,156,42,0.58),
      0 0 14px rgba(176,118,8,0.34);
  }

  /* -- P4: Core Sector Experience — one simultaneous shine + fade per
        box entry. Group heading + separator dots go living gold; the
        sector names go luminous navy. Re-arms only on exit + re-entry. -- */
  .sector-block:hover .sector-label,
  .sector-block:hover .sector-list span:not(:last-child):not(.sector-break)::after{
    animation:jsk-gold 1.25s ease;
  }
  .sector-block:hover .sector-list span{
    animation:jsk-navy 1.25s ease;
  }

  /* -- P5: main-heading SUSTAINED illumination (no keyframe).
        .ill-hold is a text-sized inline wrapper; the glow holds while the
        pointer stays anywhere over the wording, uninterrupted across
        words, spaces and wrapped lines, and each heading is independent. -- */
  .ill-hold{transition:color .28s ease, text-shadow .28s ease;}
  .ill-hold:hover{
    color:#b77d08;
    text-shadow:
      0 0 3px rgba(255,250,220,0.98),
      0 0 8px rgba(255,215,104,0.86),
      0 0 16px rgba(218,150,19,0.62),
      0 0 26px rgba(218,150,19,0.34);
  }
  /* the consultation heading sits on the dark contact background → warm white */
  #contact .ill-hold:hover{
    color:#ffffff;
    text-shadow:
      0 0 4px rgba(255,255,255,0.98),
      0 0 10px rgba(255,244,208,0.82),
      0 0 19px rgba(224,185,97,0.52),
      0 0 28px rgba(224,185,97,0.28);
  }

  /* -- P6: career-row + practice-card sustained heading highlight
        (accepted; unchanged from v36). -- */
  .tl-org,
  .area-card h3{
    transition:
      color .18s ease-out,
      text-shadow .18s ease-out;
  }
  .tl-row:hover .tl-org,
  .area-card:hover h3{
    color:#b77d08;
    text-shadow:
      0 0 2px rgba(255,250,220,0.90),
      0 0 7px rgba(255,211,99,0.68),
      0 0 14px rgba(202,137,15,0.34);
  }

  /* -- P7A: High-Stakes Results group heading — one-shot living gold.
        This generic .ill:hover also serves P8A (Our Approach). P9A
        (Get In Touch) is scoped separately under #contact below. -- */
  .ill:hover{ animation:jsk-gold 1.25s ease; }

  /* -- P7B: results cards — strong one-shot transformation per card entry.
        Category + short heading living gold; principal metric sapphire-navy.
        Re-arms only after the pointer leaves that card and re-enters. -- */
  .matter-item:hover .matter-cat,
  .matter-item:hover h3{ animation:jsk-gold 1.3s ease; }
  .matter-item:hover .matter-metric{ animation:jsk-sapphire 1.3s ease; }

  /* -- P8B: Our Approach quotation — sustained conclusion highlight
        (accepted; unchanged from v36). -- */
  .approach blockquote .quote-strong{transition:color .28s ease, text-shadow .28s ease;}
  .approach blockquote:hover .quote-strong{
    color:var(--brass);
    text-shadow:0 0 10px rgba(185,154,92,0.32);
  }

  /* -- P9A: Get In Touch — one-shot champagne-gold on the dark background,
        independent of the adjacent consultation heading. -- */
  #contact .ill:hover{ animation:jsk-champagne 1.25s ease; }

  /* -- P9B: contact-detail blocks — sustained label + value highlight
        (brightened). -- */
  .contact-detail dt,.contact-detail dd{transition:color .28s ease, text-shadow .28s ease;}
  .contact-detail:hover dt{
    color:#efcb71;
    text-shadow:
      0 0 3px rgba(255,243,205,0.92),
      0 0 9px rgba(224,181,83,0.64),
      0 0 17px rgba(224,181,83,0.34);
  }
  .contact-detail:hover dd{
    color:#ffffff;
    text-shadow:none;
  }
  /* -- P3: the linked phone/email values must stay crisp — strip the
        inherited multi-layer value glow so their small glyphs, digits,
        punctuation and underline read sharply. -- */
  .contact-detail:hover dd a{ color:#ffffff; text-shadow:none; }
  .contact-detail:hover dd a:hover{ color:#f0cc72; text-shadow:none; border-color:#f0cc72; }

  /* -- P10: hero-credential consecutive brightening, then paired hold
        (brightened). First lights immediately, second follows ~0.18s
        later, both hold while the line is hovered, both fade together. -- */
  .eyebrow .cred{transition:color .28s ease, text-shadow .28s ease;}
  .eyebrow:hover .cred{
    color:#b77d08;
    text-shadow:
      0 0 2px rgba(255,248,215,0.96),
      0 0 7px rgba(225,170,52,0.72),
      0 0 14px rgba(181,119,8,0.42);
  }
  .eyebrow:hover .cred-2{ transition-delay:0.18s; }   /* entry stagger only; exit synchronised */
  .eyebrow .cred-sep{transition:none;}
}

/* -- P3: keyboard focus on a linked phone/email value — same crisp
      champagne-gold as pointer hover, no glow. Outside the pointer-hover
      gate so it works for keyboard users; the existing focus outline and
      accessibility behaviour are untouched. -- */
.contact-detail dd a:focus-visible{ color:#f0cc72; text-shadow:none; border-color:#f0cc72; }

/* -- P9C: form-field functional focus. Works by mouse, touch and keyboard,
      so it is NOT gated behind hover. -- */
.field label,.field-required{transition:color .25s ease, text-shadow .25s ease;}
.field input,.field textarea{transition:border-color .2s ease, background .2s ease, box-shadow .25s ease;}
.field:focus-within label{
  color:#ffffff;
  text-shadow:0 0 6px rgba(255,255,255,0.34);
}
.field:focus-within .field-required{
  color:#f0c864;
  text-shadow:0 0 7px rgba(240,200,100,0.68);
}
/* underline / border becomes brass-gold with a restrained downward glow;
   :not(.has-error) keeps invalid-field coral styling authoritative. */
.field:focus-within input:not(.has-error),
.field:focus-within textarea:not(.has-error){
  border-color:#d8b45f;
  box-shadow:0 1px 0 rgba(216,180,95,0.90), 0 5px 12px rgba(216,180,95,0.20);
}

/* P10 reduced-motion: activate both credentials together (drop the stagger). */
@media (prefers-reduced-motion:reduce){
  .eyebrow:hover .cred-2{ transition-delay:0s !important; }
}

/* ============================================================
   P4 — About Counsel portrait video player.
   The existing portrait remains the poster; a <video> fills the
   exact portrait frame, a full-frame semantic button is the
   activation area, and a small navy/brass play control sits at
   the lower-right. No modal, no reflow, no layout shift.
   ============================================================ */
.about-portrait .portrait-video{
  display:block; width:100%; height:100%;
  object-fit:cover; object-position:center;
  background:var(--paper-2);
}
/* Full-portrait activation control layered above the poster. */
.about-portrait .portrait-trigger{
  position:absolute; inset:0; width:100%; height:100%;
  margin:0; padding:0; border:0; background:transparent;
  cursor:pointer; display:block;
  -webkit-tap-highlight-color:transparent;
}
/* The author display:block above out-specifies the UA [hidden] rule,
   so JS-driven trigger.hidden = true would otherwise leave the whole
   trigger (hit-area, hover overlay, play icon) rendered and clickable
   during playback. This scoped rule restores hidden = display:none. */
.about-portrait .portrait-trigger[hidden]{ display:none; }
/* Almost-imperceptible tonal darkening on hover/focus; it lives on
   the trigger, so it disappears automatically once playback starts
   and the trigger is hidden. */
.about-portrait .portrait-trigger::before{
  content:""; position:absolute; inset:0;
  background:#0a1024; opacity:0;
  transition:opacity .18s ease; pointer-events:none;
}
.about-portrait .portrait-trigger:hover::before,
.about-portrait .portrait-trigger:focus-visible::before{ opacity:0.03; }
.about-portrait .portrait-trigger:focus-visible{
  outline:none;
  box-shadow:inset 0 0 0 2px var(--brass);
}
/* Small circular play indicator — restrained component of the frame. */
.about-portrait .portrait-play{
  position:absolute; right:5px; bottom:5px;
  width:41px; height:41px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--ink); border:1px solid var(--brass-soft);
  box-shadow:0 1px 3px rgba(0,0,0,0.26);
  transition:transform .18s ease, background .18s ease, border-color .18s ease;
  pointer-events:none;
}
.about-portrait .portrait-play-icon{ display:block; margin-left:1px; }
.about-portrait .portrait-trigger:hover .portrait-play,
.about-portrait .portrait-trigger:focus-visible .portrait-play{
  transform:scale(1.035);
  background:#1b2a48;
  border-color:#c6a86c;
}
@media (max-width:640px){
  .about-portrait .portrait-play{ width:38px; height:38px; right:5px; bottom:5px; }
}
@media (prefers-reduced-motion:reduce){
  .about-portrait .portrait-trigger::before,
  .about-portrait .portrait-play{ transition:none; }
  .about-portrait .portrait-trigger:hover .portrait-play,
  .about-portrait .portrait-trigger:focus-visible .portrait-play{ transform:none; }
}

/* ============================================================
   P3 (v39) — Practice Areas "Discuss Your Needs" / "상담하기"
   action link.
   - Remove the dead navy (var(--ink)) hover from site.css.
   - Split wording (underlined) from a decorative inline SVG arrow
     so the underline sits beneath the wording only, never the gap
     or arrow.
   - On hover / keyboard focus: illuminate wording, underline and
     arrow into a warmer luminous gold (#955f00) with a restrained
     glyph-following glow; move only the arrow ~4px right. Wording
     and layout stay stationary. Quick 0.18s ease-out, no delay.
   Resting size, weight, tracking, colour, placement, destination
   and data-practice prefill behaviour are unchanged.
   ============================================================ */
/* Container: no underline here, so the gap and arrow are never
   underlined. */
.area-link{ text-decoration:none; }

/* Wording carries the underline in the resting dark brass-gold. */
.area-link .area-link-text{
  text-decoration:underline;
  text-underline-offset:3px;
  transition:color .18s ease-out,
             text-shadow .18s ease-out,
             text-decoration-color .18s ease-out;
}

/* Refined inline SVG arrow — decorative, stroke follows the link
   colour. translateY lifts the 10px-tall shaft to the optical
   centre of the uppercase cap height (English). */
.area-link .area-link-arrow{
  flex:0 0 auto;
  width:22px; height:10px;
  margin-left:10px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.25;
  stroke-linecap:round;
  stroke-linejoin:round;
  transform:translateY(-1px);
  transition:transform .18s ease-out,
             color .18s ease-out,
             filter .18s ease-out;
}
/* Korean glyphs are full-height, so their optical centre sits lower
   than Latin cap-height centre; drop the lift to keep the shaft on
   the centreline of 상담하기. */
html[lang="ko"] .area-link .area-link-arrow{ transform:translateY(0); }

/* Override site.css's dead ".area-link:hover{color:var(--ink)}"
   (restore.css loads last, equal specificity → this wins). The
   wording and arrow must never turn navy on hover or focus. */
.area-link:hover,
.area-link:focus-visible{ color:#955f00; }

.area-link:hover .area-link-text,
.area-link:focus-visible .area-link-text{
  color:#955f00;
  text-decoration-color:#955f00;
  text-shadow:
    0 0 2px rgba(218,168,61,0.45),
    0 0 7px rgba(218,168,61,0.22);
}

.area-link:hover .area-link-arrow,
.area-link:focus-visible .area-link-arrow{
  color:#955f00;                       /* stroke via currentColor */
  transform:translateY(-1px) translateX(4px);
  filter:drop-shadow(0 0 2px rgba(218,168,61,0.45));
}
html[lang="ko"] .area-link:hover .area-link-arrow,
html[lang="ko"] .area-link:focus-visible .area-link-arrow{
  transform:translateY(0) translateX(4px);
}

/* Reduced motion: keep the illumination, drop the arrow travel and
   the transform transition. The static alignment lift is retained. */
@media (prefers-reduced-motion:reduce){
  .area-link .area-link-arrow{
    transition:color .18s ease-out, filter .18s ease-out;
  }
  .area-link:hover .area-link-arrow,
  .area-link:focus-visible .area-link-arrow{
    transform:translateY(-1px);
  }
  html[lang="ko"] .area-link:hover .area-link-arrow,
  html[lang="ko"] .area-link:focus-visible .area-link-arrow{
    transform:translateY(0);
  }
}

/* ============================================================
   v40 P1 — portrait video full-screen: show the whole frame.
   The embedded frame keeps object-fit:cover (the tight portrait
   crop). In native full-screen the UA sizes the <video> to the
   viewport, but our author cover rule out-specified the UA
   letterbox and cropped the frame to the face/neck. Restore
   contain + centering + dark side margins, ONLY while the video
   element itself is full-screen. The standard and vendor pseudo-
   classes are written as SEPARATE rules so that an unknown
   selector in one engine cannot invalidate the whole list. Higher
   specificity than the base .about-portrait .portrait-video rule,
   so it wins regardless of source order. Embedded state untouched.
   ============================================================ */
.about-portrait .portrait-video:fullscreen{
  object-fit:contain; object-position:center;
  width:100%; height:100%; background:#000;
}
.about-portrait .portrait-video:-webkit-full-screen{
  object-fit:contain; object-position:center;
  width:100%; height:100%; background:#000;
}
.about-portrait .portrait-video:-moz-full-screen{
  object-fit:contain; object-position:center;
  width:100%; height:100%; background:#000;
}

/* ============================================================
   v40 P2 — consultation-method value on block hover.
   When the pointer is anywhere within the consultation block, the
   non-linked value "By video or phone appointment" / "화상 또는
   전화 상담" turns the same crisp champagne-gold (#f0cc72) that the
   Phone and Email link values use, while the "Consultations" /
   "상담 방식" label keeps its existing gold glow. Scoped to
   .contact-consult (a real class, not a positional selector) so
   Phone and Email are untouched; no glow, no underline, no pointer
   cursor. Fine-pointer gate only, matching the other contact
   hover responses. Specificity (0,3,1) beats the generic
   .contact-detail:hover dd (0,2,1) rule regardless of order.
   ============================================================ */
@media (hover:hover) and (pointer:fine){
  .contact-detail.contact-consult:hover dd{ color:#f0cc72; text-shadow:none; }
}


/* --------------------------------------------------------------------------
   Contact-form success state — approved Desktop selection (2026-10-01):
   Option 02 in full (centred warm-ivory panel, gold top rule) with Option 06's
   far-left gold vertical rule added. Values taken from the approved review
   source. Success/error reveal logic is unchanged.
   -------------------------------------------------------------------------- */
#form-success{
  display:none;
  margin-top:14px;
  padding:12px 15px;
  background:#e9dfcc;
  color:#15243b;
  border:0;
  border-top:2px solid #bc9b5c;
  border-left:4px solid #bc9b5c;
  border-radius:0;
  font:400 22px/1.35 Georgia,'Times New Roman',serif;
  letter-spacing:0;
  text-align:center;
}
#form-success .fs-l{display:block}
#form-success .fs-l + .fs-l{margin-top:8px}
html[lang="ko"] #form-success{
  font-family:'Noto Serif KR','Noto Serif','Batang',serif;
  font-size:21px;
  word-break:keep-all;
}
html[lang="ko"] #form-success .fs-l{font-size:21px}
/* The Korean desktop pages carry an older page-level 14.14px rule for the former
   single-line note (it also governs #form-error, which is left untouched). The
   approved success size is applied to the success lines themselves so that rule
   is not edited. */
html[lang="ko"] body.executive-editorial-master #contact #form-success .fs-l{font-size:21px}

/* ===== inline block: en-approved-readability-v43 ===== */

/* =====================================================================
   v43 (2026-07-31) — approved ENGLISH readability enlargement.
   English only. Every selector below is prefixed html[lang="en"], and
   the whole block lives inside index.html, so ko.html cannot be reached
   by any rule here. No new fonts, files, scripts or requests; existing
   classes only. Colours, wording, families, tracking character, links
   and behaviour are unchanged — only size, and the spacing needed to
   carry it, are adjusted.
   ===================================================================== */

/* ---------- 6. HEADER ------------------------------------------------
   The English header navigation only exists at >=1120px (below that
   index.html uses the mobile dialog), so the whole header block is
   bounded to that width and cannot reach tablet or phone.
   Logo: no rule below touches .logo-full/.logo-mark or the logo link.
   The nav's own vertical padding grows 17->19px, so the header band
   gains 4px of height while the logo box stays 138.19x58. */
@media (min-width:1120px){
  html[lang="en"] header .nav{padding-top:19px; padding-bottom:19px;}
  html[lang="en"] header .nav-links{font-size:18px; gap:12px; letter-spacing:0.02em;}
  html[lang="en"] header .nav-links a{word-spacing:-5.6px;}
  html[lang="en"] header .lang-switch{font-size:18px;}
  html[lang="en"] header .nav-right{gap:14px;}
  html[lang="en"] header .nav-cta{font-size:16px; padding:11px 15px;}
}

/* ---------- 7A. HERO CREDENTIAL LINE -------------------------------- */
html[lang="en"] .hero .eyebrow{font-size:18.25px;}

/* ---------- 7B. HEADLINE -------------------------------------------
   Deliberately unchanged at 50px. No rule below sets a size, family,
   weight, colour or measure on .hero h1 or on the .h1-shine mirror. */

/* ---------- 7C. HERO BODY PARAGRAPHS -------------------------------- */
html[lang="en"] .hero .dek{font-size:22.75px; line-height:1.66; max-width:762px;}

/* ---------- 7D. IDENTITY LINE --------------------------------------
   At 17.15px the three credentials plus the two bullets measure wider
   than the 840px caption, so the row alone is released symmetrically
   past the caption edge. The caption itself keeps max-width:840px, so
   the headline's balanced two-line break is untouched. */
html[lang="en"] .hero .docket-row{font-size:17.15px;}
@media (min-width:1120px){
  html[lang="en"] .hero .docket-row{margin-left:-70px; margin-right:-70px;}
}

/* ---------- 7E. HERO BUTTONS ---------------------------------------- */
html[lang="en"] .hero .btn-primary,
html[lang="en"] .hero .btn-secondary{font-size:17.15px; padding:19px 34px; min-height:56px;}

/* ---------- 8A/8B. HERO STATISTICS ---------------------------------- */
html[lang="en"] .stats .stat-num{font-size:37.25px;}
html[lang="en"] .stats .stat-label{font-size:15.25px; margin-top:13px;}
/* The four descriptions are held to the same line pattern as v42
   (2 / 3 / 3 / 2 at desktop, 3 / 4 / 3 / 2 at 1024) by giving the cell
   back the width the larger type needs; the dividers, columns, colours
   and wording are untouched. */
@media (min-width:1120px){ html[lang="en"] .stats .stat{padding:29px 16px;} }
@media (min-width:861px) and (max-width:1119px){ html[lang="en"] .stats .stat{padding:28px 12px;} }

/* ---------- 8C. CORE SECTOR EXPERIENCE ------------------------------ */
html[lang="en"] .sector-block{padding-top:44px; padding-bottom:36px;}
html[lang="en"] .sector-label{font-size:22.75px; margin-bottom:6px;}
html[lang="en"] .sector-list{font-size:22.75px;}

/* ---------- 9. ABOUT COUNSEL ---------------------------------------- */
html[lang="en"] #about .about-copy h2.section-label{font-size:34.5px;}
html[lang="en"] #about .about-copy p{font-size:20.75px; line-height:1.74; margin-bottom:18px;}
html[lang="en"] #about .about-copy p:first-of-type{font-size:20.75px;}
html[lang="en"] .portrait-caption .name{font-size:22.75px;}
html[lang="en"] .portrait-caption .role{font-size:15.9px;}
html[lang="en"] #about .credentials{row-gap:22px; column-gap:16px;}
/* At 17.4px the right-hand value "Cornell University - Phi Beta Kappa"
   overshot an equal half of the 585px copy column by ~11px and broke to
   a second line. The smallest measured split that returns it to one line
   is 0.95/1.05 (0.96/1.04 does not; 0.90/1.10 pushes the UCLA value to
   three lines). Bounded to >=1120px, so the 1024px two-column cells and
   the single-column stack below 861px are exactly as they are in v42.
   Wording, size, family, colour and the portrait column are untouched. */
@media (min-width:1120px){
  html[lang="en"] #about .credentials{grid-template-columns:0.95fr 1.05fr;}
}
html[lang="en"] #about .credentials dt{font-size:15.9px;}
html[lang="en"] #about .credentials dd{font-size:17.4px; line-height:1.6;}

/* ---------- 10. EXPERIENCE ------------------------------------------
   Body prose only. No rule here touches .section-label, .section-title,
   .tl-org or .tl-org-detail. */
html[lang="en"] #experience .tl-desc{font-size:22px; line-height:1.72;}

/* ---------- 11. PRACTICE AREAS -------------------------------------- */
html[lang="en"] .areas-intro{font-size:22px; line-height:1.72;}
html[lang="en"] #practice .area-card p{font-size:22px; line-height:1.72;}
/* "Discuss Your Needs" is uppercase Arial 700; matched to the 22px
   serif body by cap height (22 x 0.66 / 0.716), which is the visually
   balanced equivalent the brief allows. Text, arrow, tracking, colour,
   underline, destination, hit area and focus behaviour are unchanged. */
html[lang="en"] #practice .area-link{font-size:20px; margin-top:24px;}
html[lang="en"] #practice .area-link .area-link-arrow{transform:translateY(-2px);}
html[lang="en"] #practice .area-link:hover .area-link-arrow,
html[lang="en"] #practice .area-link:focus-visible .area-link-arrow{transform:translate(4px,-2px);}

/* ---------- 12. HIGH-STAKES RESULTS --------------------------------- */
html[lang="en"] .matters-intro{font-size:22px; line-height:1.72;}
html[lang="en"] #results .matter-item p{font-size:22px; line-height:1.72;}
html[lang="en"] .matters-footnote{font-size:22px; line-height:1.72;}
html[lang="en"] #results .matter-item .matter-cat{font-size:15.75px; letter-spacing:0.085em;}
html[lang="en"] #results .matter-item h3{font-size:23.5px; margin-bottom:15px;}

/* ---------- 13. BOTH CONSULTATION PANELS ---------------------------- */
html[lang="en"] .areas-cta-title,
html[lang="en"] .matters-cta-title{font-size:30.5px; margin-bottom:16px;}
html[lang="en"] .areas-cta p,
html[lang="en"] .matters-cta p{font-size:22px; margin:0 auto 30px;}
html[lang="en"] .areas-cta .btn-primary,
html[lang="en"] .matters-cta .btn-primary{font-size:19px; min-height:56px; padding:0 38px;}

/* ---------- 14. CONTACT SUBMIT BUTTON ------------------------------- */
html[lang="en"] #contact .submit-btn{font-size:19px; padding:17px 42px;}

/* ---------- 16. RESPONSIVE ------------------------------------------
   Below 861px index.html already narrows the hero and drops every grid
   to one column. The values below keep the approved improvement (each
   is larger than v42's corresponding size) while holding the measure
   readable and the layout free of overflow on a 320px screen. */
@media (max-width:860px){
  html[lang="en"] .hero .eyebrow{font-size:16.5px;}
  html[lang="en"] .hero .dek{font-size:19.5px; line-height:1.7; max-width:600px;}
  html[lang="en"] .hero .docket-row{font-size:15.75px; margin-left:0; margin-right:0;}
  html[lang="en"] .hero .btn-primary,
  html[lang="en"] .hero .btn-secondary{font-size:16px; padding:15px 24px; min-height:52px;}
  html[lang="en"] .stats .stat{padding:26px 20px;}
  html[lang="en"] .stats .stat-label{font-size:14.5px;}
  html[lang="en"] .sector-label{font-size:19.5px;}
  html[lang="en"] .sector-list{font-size:19.5px;}
  html[lang="en"] #about .about-copy h2.section-label{font-size:30px;}
  html[lang="en"] #about .about-copy p,
  html[lang="en"] #about .about-copy p:first-of-type{font-size:19.5px;}
  html[lang="en"] .portrait-caption .name{font-size:21.5px;}
  html[lang="en"] .portrait-caption .role{font-size:15px;}
  html[lang="en"] #about .credentials dd{font-size:17px;}
  html[lang="en"] #experience .tl-desc{font-size:19.5px; line-height:1.74;}
  html[lang="en"] .areas-intro{font-size:19.5px; line-height:1.74;}
  html[lang="en"] #practice .area-card p{font-size:19.5px; line-height:1.74;}
  html[lang="en"] #practice .area-link{font-size:17px;}
  html[lang="en"] .matters-intro{font-size:19.5px; line-height:1.74;}
  html[lang="en"] #results .matter-item p{font-size:19.5px; line-height:1.74;}
  html[lang="en"] .matters-footnote{font-size:19.5px; line-height:1.74;}
  html[lang="en"] #results .matter-item .matter-cat{font-size:14.5px;}
  html[lang="en"] #results .matter-item h3{font-size:21px;}
  html[lang="en"] .areas-cta-title,
  html[lang="en"] .matters-cta-title{font-size:25px;}
  html[lang="en"] .areas-cta p,
  html[lang="en"] .matters-cta p{font-size:19.5px;}
  html[lang="en"] .areas-cta .btn-primary,
  html[lang="en"] .matters-cta .btn-primary{font-size:17px; min-height:54px; padding:0 26px;}
  html[lang="en"] #contact .submit-btn{font-size:17px; padding:16px 32px;}
}

/* 320-430px: the narrowest screens. Uppercase labels are tightened a
   little further so they wrap tidily rather than word-by-word, and the
   two largest headings step down one notch. Nothing returns to a v42
   size. */
@media (max-width:430px){
  html[lang="en"] .hero .eyebrow{font-size:15.5px;}
  html[lang="en"] .hero .dek{font-size:18.5px;}
  html[lang="en"] .hero .docket-row{font-size:15px;}
  html[lang="en"] .sector-label{font-size:18.5px;}
  html[lang="en"] .sector-list{font-size:18.5px;}
  html[lang="en"] #about .about-copy h2.section-label{font-size:27px;}
  html[lang="en"] #about .about-copy p,
  html[lang="en"] #about .about-copy p:first-of-type{font-size:18.5px;}
  html[lang="en"] #experience .tl-desc{font-size:18.5px;}
  html[lang="en"] .areas-intro{font-size:18.5px;}
  html[lang="en"] #practice .area-card p{font-size:18.5px;}
  html[lang="en"] #practice .area-link{font-size:15.5px; letter-spacing:0.08em;}
  html[lang="en"] .matters-intro{font-size:18.5px;}
  html[lang="en"] #results .matter-item p{font-size:18.5px;}
  html[lang="en"] .matters-footnote{font-size:18.5px;}
  html[lang="en"] #results .matter-item .matter-cat{font-size:13.75px; letter-spacing:0.07em;}
  html[lang="en"] #results .matter-item h3{font-size:20px;}
  html[lang="en"] .areas-cta-title,
  html[lang="en"] .matters-cta-title{font-size:22.5px;}
  html[lang="en"] .areas-cta p,
  html[lang="en"] .matters-cta p{font-size:18.5px;}
  html[lang="en"] .areas-cta .btn-primary,
  html[lang="en"] .matters-cta .btn-primary{font-size:15.5px; padding:0 12px; white-space:nowrap;}
  html[lang="en"] #contact .submit-btn{font-size:15.5px; padding:16px 22px;}
  /* Interior padding of the two panels only (the panel box, border and
     background are unchanged), so "REQUEST A CONSULTATION" stays on one
     line at 390px and 320px. */
  html[lang="en"] .areas-cta,
  html[lang="en"] .matters-cta{padding-left:16px; padding-right:16px;}
}

@media (max-width:360px){
  html[lang="en"] .areas-cta,
  html[lang="en"] .matters-cta{padding-left:10px; padding-right:10px;}
}

/* ===== inline block: practice-area-hover-v44-en ===== */

/* =====================================================================
   v44 (2026-07-31) — approved ENGLISH Practice Areas heading-hover
   refinement. Layered after the v43 readability block so it cleanly
   supersedes the earlier .18s Practice Areas transition.

   Scope: #practice .area-card headings only. This block changes
   RESPONSIVENESS ONLY — resting appearance, illuminated colour and
   glow, wording, sizes, line heights, spacing, card geometry, links
   and all v43 typography are untouched. No !important; every rule
   wins on specificity alone.
   ===================================================================== */

/* Transition — declared unconditionally so the pointer state and the
   keyboard :focus-within state animate identically. Explicit
   properties (never `all`), duration 110ms, ease-out, delay exactly
   0ms. Specificity (1,2,2) supersedes restore.css `.area-card h3`
   (0,1,1). */
html[lang="en"] #practice .area-card h3{
  transition:
    color 110ms ease-out 0ms,
    text-shadow 110ms ease-out 0ms;
}

/* Pointer activation from ANY part of the individual card — the
   heading, the body prose, blank interior space, the "Discuss Your
   Needs" wording or its arrow. The state lives on the parent
   .area-card, so moving between child elements inside one card never
   restarts the transition, flickers, or momentarily drops out. Kept
   inside the same (hover:hover) and (pointer:fine) gate the site has
   used since v36 so touch devices gain no sticky hover.
   Specificity (1,3,2). */
@media (hover:hover) and (pointer:fine){
  html[lang="en"] #practice .area-card:hover h3{
    color:#b77d08;
    text-shadow:
      0 0 2px rgba(255,250,220,.90),
      0 0 7px rgba(255,211,99,.68),
      0 0 14px rgba(202,137,15,.34);
  }
}

/* Keyboard equivalent — focusing that card's link illuminates that
   card's heading, and no other card's. */
html[lang="en"] #practice .area-card:focus-within h3{
  color:#b77d08;
  text-shadow:
    0 0 2px rgba(255,250,220,.90),
    0 0 7px rgba(255,211,99,.68),
    0 0 14px rgba(202,137,15,.34);
}

/* Reduced motion — identical final illuminated appearance, applied
   immediately. */
@media (prefers-reduced-motion: reduce){
  html[lang="en"] #practice .area-card h3{
    transition-duration:0s;
    transition-delay:0s;
  }
}

/* ===== inline block: en-approved-refinements-v46 ===== */

/* =====================================================================
   v46 (2026-08-03) — approved ENGLISH refinements 6A–6H.
   English only: every selector is prefixed html[lang="en"] and the whole
   block lives inside index.html, so ko.html cannot be reached by any
   rule here. Appended after the v43 readability block and the v44
   Practice-Areas hover block; neither of those is edited. No !important
   anywhere — each rule wins on specificity and source order alone. No
   new fonts, files, scripts or network requests.
   ===================================================================== */

/* ---------- 6A. EDUCATIONAL CREDENTIALS -----------------------------
   The two educational values become two deliberate lines each:
   institution, then distinction. The em dashes are gone from the HTML.
   Family, weight and navy colour are inherited from the existing
   .credential dd rule — nothing here restates them, so the serif face,
   the ink colour and the normal weight are exactly as before. The
   distinction is neither italicised nor lightened. With both values now
   two lines, the v43 0.95/1.05 split (which existed only to keep the
   Cornell value on one line) is no longer needed, so the equal
   1fr 1fr columns are restored at full desktop. */
html[lang="en"] #about .credential-school{display:block;}
html[lang="en"] #about .credential-distinction{
  display:block;
  margin-top:5px;
  font-size:95%;
  white-space:nowrap;
}
@media (min-width:1120px){
  html[lang="en"] #about .credentials{grid-template-columns:1fr 1fr;}
}

/* ---------- 6B. EXPERIENCE + PRACTICE-AREA HEADINGS -----------------
   Only the individual organisation headings (#experience .tl-org) and
   the individual practice-area headings (#practice .area-card h3) grow.
   Section titles, the two intro lines, all body prose and the Results
   headings are untouched. Family, weight, navy colour, wording, column
   layout, card geometry and margins stay with the existing rules, as do
   the v44 110ms gold hover illumination and the keyboard focus
   illumination, which target colour/text-shadow only. */
html[lang="en"] #experience .tl-org,
html[lang="en"] #practice .area-card h3{line-height:1.35;}
@media (min-width:1120px){
  html[lang="en"] #experience .tl-org,
  html[lang="en"] #practice .area-card h3{font-size:29px;}
}
@media (min-width:861px) and (max-width:1119px){
  html[lang="en"] #experience .tl-org,
  html[lang="en"] #practice .area-card h3{font-size:26px;}
}
@media (max-width:860px){
  html[lang="en"] #experience .tl-org,
  html[lang="en"] #practice .area-card h3{font-size:24px;}
}

/* ---------- 6C. BOTH CONSULTATION PANELS ----------------------------
   "Not sure which category fits?" and "Facing an important agreement,
   transaction, or business challenge?". Wording, panel width, border,
   background, alignment, links, hover/focus behaviour, placement and
   surrounding section spacing are untouched; the panels themselves are
   not enlarged. Only the three type sizes, the button's minimum height
   and horizontal padding, and the sentence-to-button gap move. The
   v43 shorthand `margin:0 auto 30px` keeps supplying the horizontal
   auto-centring — only its bottom value is superseded here. */
@media (min-width:861px){
  html[lang="en"] .areas-cta-title,
  html[lang="en"] .matters-cta-title{font-size:28px;}
  html[lang="en"] .areas-cta p,
  html[lang="en"] .matters-cta p{font-size:20.5px; margin-bottom:26px;}
  html[lang="en"] .areas-cta .btn-primary,
  html[lang="en"] .matters-cta .btn-primary{font-size:17.5px; min-height:52px; padding:0 32px;}
}
@media (max-width:860px){
  /* Approved responsive typography and the approved responsive
     horizontal padding are left exactly as v43 set them. */
  html[lang="en"] .areas-cta p,
  html[lang="en"] .matters-cta p{margin-bottom:24px;}
  html[lang="en"] .areas-cta .btn-primary,
  html[lang="en"] .matters-cta .btn-primary{min-height:52px;}
}
@media (max-width:430px){
  html[lang="en"] .areas-cta p,
  html[lang="en"] .matters-cta p{margin-bottom:22px;}
}

/* ---------- 6D. OUR APPROACH ----------------------------------------
   Heading: size only — family, weight, uppercase treatment, tracking,
   colour and centred alignment stay with the existing #approach
   .section-label rule. Quotation: every word, the deliberate five-line
   sequence, the bold emphasis, punctuation, quote marks, centring,
   section background and vertical placement are untouched. */
html[lang="en"] #approach .section-label{font-size:clamp(28px, 3.1vw, 34px);}
html[lang="en"] .approach{max-width:880px;}
html[lang="en"] .approach blockquote{font-size:29px; line-height:1.42;}
@media (min-width:861px) and (max-width:1119px){
  html[lang="en"] .approach blockquote{font-size:26px;}
}
@media (max-width:860px){
  html[lang="en"] .approach blockquote{font-size:23px;}
}
/* Attribution to 15px. Wording, family, weight, colour and alignment
   are unchanged; the space above it is opened a little so the smaller
   line still reads as clearly separated from the quotation. */
html[lang="en"] .approach cite{font-size:15px; margin-top:26px;}

/* ---------- 6E. OPTION 12 — HUMANIST SANS CTAs ----------------------
   The six English "Request a Consultation" buttons (desktop header,
   mobile-menu, hero, both consultation panels, contact submit) and the
   hero "View Experience" button. Navigation categories, EN | KO,
   "Discuss Your Needs", section labels, body text, headings, form
   labels and footer text are deliberately excluded. Wording,
   capitalisation, colours, borders, background, placement, link
   destinations, hover and focus effects, text glow and form submission
   behaviour all stay with the existing rules; only the face, weight,
   tracking and line box change here. */
html[lang="en"] .nav-cta,
html[lang="en"] .hero .btn-primary,
html[lang="en"] .hero .btn-secondary,
html[lang="en"] .areas-cta .btn-primary,
html[lang="en"] .matters-cta .btn-primary,
html[lang="en"] #contact .submit-btn{
  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    "Helvetica Neue",
    Arial,
    Helvetica,
    sans-serif;
  font-weight:600;
  font-style:normal;
  font-variant:normal;
  letter-spacing:0.055em;
  line-height:1;
  text-transform:uppercase;
}
/* Context-specific sizes. The header CTA (16px at full desktop), the
   mobile-menu CTA and the contact submit button keep their approved
   sizes; the panel buttons take their 17.5px from 6C above; the two
   hero buttons take 17.5px at full desktop and keep the approved
   17.15px / 16px below it. */
@media (min-width:1120px){
  html[lang="en"] .hero .btn-primary,
  html[lang="en"] .hero .btn-secondary{font-size:17.5px;}
}

/* ---------- 6F. "DISCUSS YOUR NEEDS ->" -----------------------------
   Matched exactly to the Practice Areas body size at each breakpoint
   (22 / 19.5 / 18.5px). Family, weight, uppercase treatment, tracking,
   underline, underline offset, arrow size, arrow spacing, arrow
   movement, resting colour, gold hover illumination, glow, destination,
   data-practice prefill, hit area and keyboard accessibility are all
   left with the existing v43 and restore.css rules. */
/* Narrow-screen safety for the contact column. Option 12 is a
   proportional face whose rendered width depends on which UI font the
   visitor's platform supplies, and the widest of those (e.g. DejaVu
   Sans on some Linux desktops) makes the submit button's max-content
   width exceed the 320px contact column, which the grid would honour
   by widening the whole column. Releasing the automatic minimum lets
   the column stay inside the viewport in that case. Inert with every
   normal platform UI face — at 320px with Segoe UI / SF / Roboto /
   Arial metrics the button already fits on one line — and it changes
   no approved size, padding, colour or placement. */
@media (max-width:430px){
  html[lang="en"] .contact-grid > *{min-width:0;}
}

html[lang="en"] #practice .area-link{font-size:22px;}
@media (max-width:860px){
  html[lang="en"] #practice .area-link{font-size:19.5px;}
}
@media (max-width:430px){
  html[lang="en"] #practice .area-link{font-size:18.5px;}
}

/* ---------- 6G. PORTRAIT VIDEO PLAY PROMPT --------------------------
   The play control and its hover label are wrapped in a single
   non-interactive .portrait-cta inside the existing .portrait-trigger,
   so the whole portrait stays one button with one accessible name and
   no duplicate focusable element. Playback logic is untouched: the
   existing script hides the trigger during playback, which removes both
   the circle and the label, and restores them on completion. */
html[lang="en"] .about-portrait .portrait-cta{
  position:absolute;
  right:30px;
  bottom:30px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  pointer-events:none;
}
/* The circle leaves its own absolute corner placement and simply sits
   as the last item in that wrapper, so the 30px inset now applies to
   the pair. Enlarged to 46px, navy at 90%, muted-gold hairline,
   restrained shadow; the white triangle stays fully opaque. */
html[lang="en"] .about-portrait .portrait-play{
  position:static;
  right:auto;
  bottom:auto;
  width:46px;
  height:46px;
  border-radius:50%;
  background:rgba(10,16,36,0.90);
  border:1px solid var(--brass-soft);
  box-shadow:0 2px 6px rgba(0,0,0,0.28);
}
html[lang="en"] .about-portrait .portrait-trigger:hover .portrait-play,
html[lang="en"] .about-portrait .portrait-trigger:focus-visible .portrait-play{
  transform:scale(1.04);
}
/* Resting state: completely hidden. Revealed only by hover anywhere on
   the portrait trigger, or by keyboard focus on it — never by pointing
   at the circle alone. */
html[lang="en"] .about-portrait .portrait-watch-label{
  display:inline-block;
  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    "Helvetica Neue",
    Arial,
    Helvetica,
    sans-serif;
  font-size:13px;
  font-weight:600;
  letter-spacing:0.055em;
  line-height:1;
  text-transform:uppercase;
  white-space:nowrap;
  color:#16233d;
  background:rgba(255,253,248,0.92);
  border:1px solid var(--brass-soft);
  border-radius:999px;
  padding:9px 13px;
  box-shadow:0 2px 6px rgba(0,0,0,0.22);
  opacity:0;
  visibility:hidden;
  transform:translateX(6px);
  transition:opacity 160ms ease-out 0ms,
             transform 160ms ease-out 0ms,
             visibility 160ms ease-out 0ms;
}
@media (hover:hover) and (pointer:fine){
  html[lang="en"] .about-portrait .portrait-trigger:hover .portrait-watch-label{
    opacity:1;
    visibility:visible;
    transform:translateX(0);
  }
}
html[lang="en"] .about-portrait .portrait-trigger:focus-visible .portrait-watch-label{
  opacity:1;
  visibility:visible;
  transform:translateX(0);
}
/* Touch / coarse pointer: no text label at all, and no sticky hover.
   The enlarged circle and its 30px inset are kept. */
@media (hover:none),(pointer:coarse){
  html[lang="en"] .about-portrait .portrait-watch-label{display:none;}
}
/* Reduced motion: identical final hover/focus appearance, applied
   immediately, with the slide and the scale removed. The label itself
   is not removed. */
@media (prefers-reduced-motion:reduce){
  html[lang="en"] .about-portrait .portrait-watch-label{
    transition:none;
    transform:none;
  }
  html[lang="en"] .about-portrait .portrait-trigger:hover .portrait-watch-label,
  html[lang="en"] .about-portrait .portrait-trigger:focus-visible .portrait-watch-label{
    transform:none;
  }
  html[lang="en"] .about-portrait .portrait-trigger:hover .portrait-play,
  html[lang="en"] .about-portrait .portrait-trigger:focus-visible .portrait-play{
    transform:none;
  }
}

/* ---------- 6H. HEADER NAVIGATION BREATHING ROOM --------------------
   The five desktop categories only. Font size (18px), family, weight,
   letter-spacing (0.02em), the "PRACTICE AREAS" word-spacing
   correction, uppercase treatment, order, colours, hover, vertical
   alignment, header height, logo size, language-switch typography, the
   CTA size and the mobile-menu vertical spacing are all untouched, and
   Option 12 is deliberately not applied to ABOUT–CONTACT. */
@media (min-width:1120px){
  html[lang="en"] header .nav-links{gap:18px;}
  /* Measured correction, permitted by the approved correction priority.
     The header's own box is `max-width:1120px`, so its 1056px inner
     width is identical at 1120, 1280 and 1440 — the fit condition does
     not ease on wider screens. With the 18px gap and the Option 12 CTA
     the three header groups measure wider than that inner width, which
     closes the logo-to-links and links-to-EN|KO separation to 0 and
     lets the right-hand group encroach on the gutter. Nothing above it
     in the priority list is touched: the gap stays 18px, the nav font
     stays 18px, the logo is unchanged and the CTA size is unchanged;
     only the English header's outer horizontal padding steps 32px to
     24px, the floor the brief allows. Applied from 1120px up rather
     than 1120-1279px only, because the inner width — and therefore the
     problem — is the same at every full-desktop width, and a padding
     change that stopped at 1279px would visibly shift the header. */
  html[lang="en"] header .nav{padding-left:24px; padding-right:24px;}
}

/* ===== inline block: desktop-corrections-v47-en ===== */

/* =====================================================================
   v47 (2026-08-04) — approved ENGLISH desktop corrections A and B.
   English only (every selector is prefixed html[lang="en"] and the block
   lives in index.html), full desktop only (everything sits inside
   @media (min-width:1120px), so 1119px and below render exactly as v46).
   Appended after the v43, v44 and v46 blocks; none of them is edited.
   No !important — each rule wins on specificity and source order alone.
   ===================================================================== */
@media (min-width:1120px){

  /* ---- A. "DISCUSS YOUR NEEDS ->" optical size ---------------------
     The CTA is bold, uppercase, tracked Arial; the body text above it is
     22px Source Serif 4. At numerically equal 22px the sans capitals
     stand noticeably taller and heavier than the serif lowercase, so the
     link read as larger than the prose it belongs to. 20px puts the CTA
     cap height just under the body cap height, which is where the two
     read as equal. Typeface, weight, uppercase treatment, tracking,
     line box, wording, underline, underline offset, arrow, arrow size,
     arrow spacing, arrow movement, resting and hover colour, glow,
     destination, data-practice prefill, hit area and keyboard focus are
     all untouched, as is the body text itself. */
  html[lang="en"] #practice .area-link{font-size:20px;}

  /* ---- B. OUR APPROACH spacing and attribution ---------------------
     The section's 88px top and bottom padding steps to 70px, which
     removes the empty band above "OUR APPROACH" and the equally large
     one between the attribution and the navy Contact section while
     keeping the two ends balanced. The attribution grows from 15px to
     17px so it carries its own weight against the 29px quotation. The
     heading, the quotation, its five-line sequence, its emphasis, the
     880px measure, the centred structure, the section background, the
     consultation panel above and the Contact section below are all
     unchanged. */
  html[lang="en"] #approach{padding-top:70px; padding-bottom:70px;}
  html[lang="en"] #approach .approach cite{font-size:17px; margin-top:26px;}
}

/* ===== inline block: en-practice-cta-v49 ===== */

/* =====================================================================
   v49 (2026-08-04) — approved ENGLISH desktop Practice-Areas CTA.
   English only (every selector is prefixed html[lang="en"]) and, apart
   from the single baseline visibility rule below, desktop only
   (@media (min-width:1120px)), so 1119px and below render exactly as
   v48. Appended after the v43, v44, v46 and v47 blocks; none of them is
   edited. No !important, no JavaScript, no generated content — each
   rule wins on specificity and source order alone.
   ===================================================================== */

/* Baseline: the desktop wording is hidden at every width. The desktop
   media query below swaps which of the two spans is displayed. Because
   the inactive span is display:none, only the wording actually on
   screen is exposed to assistive technology, so the accessible name of
   each link never contains both phrases. */
html[lang="en"] #practice .area-link-text-v49{display:none;}

@media (min-width:1120px){

  /* ---- Responsive wording swap ------------------------------------
     Desktop shows "How can we help?"; tablet and phone keep
     "Discuss Your Needs". Both spans carry .area-link-text, so the
     visible one keeps the existing underline, underline thickness and
     underline offset, and the decorative arrow that follows the two
     spans is never underlined. */
  html[lang="en"] #practice .area-link-text-original{display:none;}
  html[lang="en"] #practice .area-link-text-v49{display:inline;}

  /* ---- Option 26 — High-Contrast Modern Serif ---------------------
     Applied to the six Practice-Areas links only. Bodoni Moda is
     merged into the existing single Google Fonts request; "Bodoni MT",
     Didot and Georgia are the platform fallbacks. Sentence case, so
     the v46/v47 uppercase treatment is switched off here and nowhere
     else. 22px matches the adjacent 22px Source Serif 4 body copy:
     Bodoni Moda's x-height is 0.460em against Source Serif 4's
     0.474em, so at numerically equal size the CTA already reads
     slightly smaller than the prose rather than larger, and no
     reduction inside the 21-22px range is warranted. One identical
     value serves all six links. Resting gold, hover and focus colour,
     glow, underline, underline offset, arrow, arrow size, arrow
     stroke, arrow spacing, arrow alignment, arrow movement, hit area,
     cursor, focus-visible behaviour, destinations, data-practice
     prefills, card placement, card dimensions and all Practice-Areas
     spacing are untouched, as is the body text above. */
  html[lang="en"] #practice .area-link{
    font-family:"Bodoni Moda", "Bodoni MT", Didot, Georgia, serif;
    font-weight:600;
    font-style:normal;
    font-variant:normal;
    text-transform:none;
    letter-spacing:0.01em;
    line-height:1.2;
    font-size:22px;
  }
}

/* ===== inline block: en-section-hover-interactions-v51 ===== */

/* =====================================================================
   V51 — English section-hover interactions.

   Four approved refinements: the About section, the Practice Areas
   introduction, the Track Record introduction and Our Approach each
   respond to the cursor entering the whole block rather than the
   wording alone. Every selector is scoped to html[lang="en"] and every
   rule sits inside
   @media (min-width:1120px) and (hover:hover) and (pointer:fine),
   so English tablet, English mobile, touch and every coarse pointer
   keep the v49 appearance and behaviour exactly. Colour and glyph glow
   only: nothing here moves, resizes, reflows or animates continuously,
   no important flags, no JavaScript, no change to the shared stylesheets.
   ===================================================================== */
@media (min-width:1120px) and (hover:hover) and (pointer:fine){

  /* ---- A. ABOUT — full-section trigger -----------------------------
     Entering any part of #about — portrait, caption, heading, any
     biography paragraph, the credentials or the interior whitespace —
     holds the existing sustained .ill-hold illumination on the heading
     and reveals the existing introduction label and the approved play
     circle scale. :focus-within carries the same states to the keyboard,
     through the portrait button that is already focusable; no tabindex
     is added and the tab order is unchanged. The trigger keeps its
     hidden state during playback, so nothing here can bring the label
     or the circle back while the video is running, and hover never
     starts playback. */
  html[lang="en"] #about .about-copy .ill-hold{
    transition:
      color .28s ease,
      text-shadow .28s ease;
  }
  html[lang="en"] #about:hover .about-copy .ill-hold,
  html[lang="en"] #about:focus-within .about-copy .ill-hold{
    color:#b77d08;
    text-shadow:
      0 0 3px rgba(255,250,220,0.98),
      0 0 8px rgba(255,215,104,0.86),
      0 0 16px rgba(218,150,19,0.62),
      0 0 26px rgba(218,150,19,0.34);
  }
  html[lang="en"] #about:hover .about-portrait .portrait-watch-label,
  html[lang="en"] #about:focus-within .about-portrait .portrait-watch-label{
    opacity:1;
    visibility:visible;
    transform:translateX(0);
  }
  html[lang="en"] #about:hover .about-portrait .portrait-play,
  html[lang="en"] #about:focus-within .about-portrait .portrait-play{
    transform:scale(1.04);
  }

  /* ---- B. PRACTICE AREAS INTRODUCTION ------------------------------
     The trigger is the whole introductory block that carries
     .practice-intro-hover-v50 — the eyebrow, the statement, the full
     introductory paragraph and the interior whitespace between them.
     The six cards and the consultation panel sit in their own wrap and
     are outside it. The heading carries the previously approved bright
     living-gold illumination (identical colour, layering and .28s
     timing to the accepted .ill-hold treatment): it lights on entry,
     holds for as long as the cursor is anywhere inside the block and
     fades once the cursor leaves. Because it is a held state and not
     an animation, internal movement cannot restart, flicker or reset
     it. Only the statement illuminates; the eyebrow and the paragraph
     are never selected. */
  html[lang="en"] #practice .practice-intro-hover-v50 .section-title .ill-hold{
    transition:
      color .28s ease,
      text-shadow .28s ease;
  }
  html[lang="en"] #practice .practice-intro-hover-v50:hover .section-title .ill-hold{
    color:#b77d08;
    text-shadow:
      0 0 3px rgba(255,250,220,0.98),
      0 0 8px rgba(255,215,104,0.86),
      0 0 16px rgba(218,150,19,0.62),
      0 0 26px rgba(218,150,19,0.34);
  }

  /* ---- C. TRACK RECORD INTRODUCTION --------------------------------
     The natural introductory block is the trigger, with its rendered
     spacing untouched: no margin is converted to padding and no
     geometry is altered to manufacture a larger hit area. Same
     previously approved bright living-gold hold as above. Timeline
     rows are outside the block and cannot hold the effect; the Track
     Record eyebrow never illuminates. */
  html[lang="en"] #experience .track-record-intro-hover-v50 .section-title .ill-hold{
    transition:
      color .28s ease,
      text-shadow .28s ease;
  }
  html[lang="en"] #experience .track-record-intro-hover-v50:hover .section-title .ill-hold{
    color:#b77d08;
    text-shadow:
      0 0 3px rgba(255,250,220,0.98),
      0 0 8px rgba(255,215,104,0.86),
      0 0 16px rgba(218,150,19,0.62),
      0 0 26px rgba(218,150,19,0.34);
  }

  /* ---- D. SELECTED EXPERIENCE INTRODUCTION -------------------------
     The introductory wrap holds the eyebrow, the statement and the
     complete introductory paragraph; the group label, the results grid
     and every card sit in a separate wrap and are outside the trigger.
     Same previously approved bright living-gold hold; only the
     statement illuminates. */
  html[lang="en"] #results .results-intro-hover-v51 .section-title .ill-hold{
    transition:
      color .28s ease,
      text-shadow .28s ease;
  }
  html[lang="en"] #results .results-intro-hover-v51:hover .section-title .ill-hold{
    color:#b77d08;
    text-shadow:
      0 0 3px rgba(255,250,220,0.98),
      0 0 8px rgba(255,215,104,0.86),
      0 0 16px rgba(218,150,19,0.62),
      0 0 26px rgba(218,150,19,0.34);
  }

  /* ---- E. OUR APPROACH ---------------------------------------------
     The trigger is the heading-and-quotation box itself (.approach),
     so the consultation panel above and the Contact section below are
     outside it. Part A: one bright gold illumination of OUR APPROACH
     per entry, which fades on its own and does not stay lit; moving
     onto the heading computes the identical animation shorthand as the
     pre-existing .ill:hover rule, so the running sequence is not
     restarted, and :hover never drops while the cursor is inside the
     box, so it re-arms only on a genuine exit and re-entry. Part B:
     the concluding statement holds its approved brass illumination for
     as long as the cursor is anywhere inside the box and fades on
     exit. The attribution is not selected anywhere in this block. */
  html[lang="en"] #approach .approach:hover .section-label .ill{
    animation:jsk-gold 1.25s ease;
  }
  html[lang="en"] #approach .approach .quote-strong{
    transition:
      color .28s ease,
      text-shadow .28s ease;
  }
  html[lang="en"] #approach .approach:hover .quote-strong{
    color:var(--brass);
    text-shadow:0 0 10px rgba(185,154,92,0.32);
  }

  /* ---- F. ATTRIBUTION SIZE -----------------------------------------
     Font size only: 17px → 21px, still clearly below the 29px
     quotation and far below the OUR APPROACH heading. Wording, family,
     weight, tracking, colour, opacity, alignment, shadow and the 26px
     space above are inherited unchanged, and the attribution has no
     hover state anywhere. */
  html[lang="en"] #approach .approach cite{font-size:21px;}

  /* ---- REDUCED MOTION ----------------------------------------------
     No entry animations and no sliding or scaling; the same illuminated
     end states appear immediately while the block is active. The video
     controls themselves are untouched. */
  @media (prefers-reduced-motion:reduce){
    html[lang="en"] #about .about-copy .ill-hold{transition:none;}
    html[lang="en"] #about .about-portrait .portrait-watch-label{
      transition:none;
      transform:none;
    }
    html[lang="en"] #about:hover .about-portrait .portrait-watch-label,
    html[lang="en"] #about:focus-within .about-portrait .portrait-watch-label{
      transform:none;
    }
    html[lang="en"] #about:hover .about-portrait .portrait-play,
    html[lang="en"] #about:focus-within .about-portrait .portrait-play{
      transform:none;
    }
    html[lang="en"] #practice .practice-intro-hover-v50 .section-title .ill-hold,
    html[lang="en"] #experience .track-record-intro-hover-v50 .section-title .ill-hold,
    html[lang="en"] #results .results-intro-hover-v51 .section-title .ill-hold{
      transition:none;
    }
    html[lang="en"] #approach .approach:hover .section-label .ill{animation:none;}
    html[lang="en"] #approach .approach .quote-strong{transition:none;}
  }
}

/* ===== inline block: en-approach-rebalance-v52 ===== */

/* =====================================================================
   v52 (2026-08-04) — approved ENGLISH DESKTOP rebalance of the
   "Our Approach" section. Desktop only: every rule below sits inside
   (min-width:1120px) and is scoped to html[lang="en"], so Korean,
   tablet and mobile layouts are bit-for-bit the v51 layout.

   Cause of the excessive empty band above OUR APPROACH: the section's
   own 70px top padding was stacking underneath the 100px bottom
   padding of the Selected Experience section, producing a 170px void
   between the consultation panel and the heading. The consultation
   panel and its section are left untouched; the doubled band is
   removed by taking the approach section's own top padding to zero,
   which leaves exactly 100px of space above OUR APPROACH.

   Wording, the five approved manual line breaks, families, sizes,
   weights, colours, the 880px measure, centring, section width and
   horizontal alignment, the 21px attribution and every v51 hover
   behaviour are inherited unchanged. Only vertical rhythm moves.
   ===================================================================== */
@media (min-width:1120px){

  /* Top space before OUR APPROACH: 170px → 100px.
     Bottom space after — John S. Kim: 70px → 88px. */
  html[lang="en"] #approach{padding-top:0; padding-bottom:88px;}

  /* OUR APPROACH → quotation: 28px → 34px. */
  html[lang="en"] #approach .section-label{margin-bottom:34px;}

  /* Quotation leading: 1.42 → 1.56 (v52) → 1.62 (v53). At the 29px
     display size this gives a 46.98px line box (was 45.24px), adding
     1.74px of air between each of the five lines — clearly more
     comfortable, still cohesive as a single quotation. Size (29px),
     family, weight, colour, emphasis, the five manual line breaks,
     the measure, centring and all surrounding spacing are unchanged. */
  html[lang="en"] #approach .approach blockquote{line-height:1.62;}

  /* Quotation → — John S. Kim: 26px → 32px. Size stays 21px. */
  html[lang="en"] #approach .approach cite{margin-top:32px;}
}

/* ===== inline block: en-contact-approach-glow-v55 ===== */

/* =====================================================================
   V55 - English Contact + Our Approach glow refinements.

   A. The complete navy Contact section is now the trigger for the
      REQUEST A CONSULTATION illumination. Entering #contact anywhere -
      heading, introduction, contact details, form labels, fields,
      submit button or interior navy whitespace - runs the heading
      through one illumination and lets it fade back to rest, even
      while the cursor stays inside. Because the declaration is carried
      by a :hover state that never drops during internal movement, the
      computed animation shorthand does not change as the cursor moves
      between the interior elements, so the sequence cannot restart or
      flicker; it re-arms only on a genuine exit and re-entry. The peak
      reproduces the existing direct-heading treatment exactly - the
      same white letter colour and the same four text-shadow layers -
      so pointing straight at the heading looks identical to v54 and
      the sustained direct-hover rule in the shared stylesheet is left
      completely intact.

   B. The one-time OUR APPROACH illumination keeps its existing
      trigger box, duration, easing and timing structure and only its
      peak is raised to the approved brighter luminous gold. The
      section-scoped rule out-specifies the generic one-shot rule in
      both the section-hover and the direct-heading state, so the
      computed animation is the same in both and moving onto the
      heading cannot restart the running sequence.

   C. One content correction outside the media query: the required
      message-field label is rendered in the approved sentence case
      rather than the shared uppercase transform, at every width.

   Colour and glyph glow only. Nothing moves, resizes, reflows or
   animates continuously; no important flags, no JavaScript, no
   tabindex, no shared-stylesheet edit.
   ===================================================================== */

/* One-shot keyframes. Colour and glyph glow are given only across the
   16-29% plateau, exactly as the existing site keyframes do, so at
   0%/100% each property falls back to the heading's own resting value
   and the resting appearance is untouched. */
@keyframes jsk-contact-white-v55{
  16%,29%{
    color:#ffffff;
    text-shadow:
      0 0 4px rgba(255,255,255,0.98),
      0 0 10px rgba(255,244,208,0.82),
      0 0 19px rgba(224,185,97,0.52),
      0 0 28px rgba(224,185,97,0.28);
  }
}
@keyframes jsk-gold-bright-v55{
  16%,29%{
    color:#d79a18;
    text-shadow:
      0 0 3px rgba(255,252,226,1),
      0 0 8px rgba(255,220,112,0.98),
      0 0 17px rgba(230,164,30,0.82),
      0 0 29px rgba(218,150,19,0.58),
      0 0 42px rgba(185,122,10,0.30);
  }
}

/* C. Content correction - all widths, all pointers. Wording, family,
   size, weight, tracking, colour, spacing and the required asterisk
   markup are unchanged; only the shared uppercase transform is lifted
   from this one label so the approved sentence case is what is read. */
html[lang="en"] #contact .field label[for="matter"]{text-transform:none;}

@media (min-width:1120px) and (hover:hover) and (pointer:fine){

  /* A. CONTACT - full-section trigger. */
  html[lang="en"] #contact:hover .section-title .ill-hold{
    animation:jsk-contact-white-v55 1.25s ease;
  }

  /* B. OUR APPROACH - brighter peak, same trigger box and timing. */
  html[lang="en"] #approach .approach:hover .section-label .ill{
    animation:jsk-gold-bright-v55 1.25s ease;
  }

  /* REDUCED MOTION - no animated flash; resting appearance retained.
     The shared reduced-motion mechanism is not modified. */
  @media (prefers-reduced-motion:reduce){
    html[lang="en"] #contact:hover .section-title .ill-hold{animation:none;}
    html[lang="en"] #approach .approach:hover .section-label .ill{animation:none;}
  }
}

/* ===== inline block: en-practice-response-consultation-v56 ===== */

/* =====================================================================
   v56 (2026-08-05) — approved ENGLISH desktop refinements. Appended
   after the v55 block; no earlier rule is edited. No !important.

   A. Consultation panels — the repeated explanatory sentence
      "Tell us briefly how we can help." is raised to 23px on desktop
      only. Panel headings, CTA wording/typography/size/spacing, panel
      width, height, padding, margins, alignment, links, data
      attributes, prefills and hover behaviour are untouched, and the
      sentence's own margins are inherited unchanged from v46.

   B. Practice Areas heading response — the full-card trigger was
      audited first (see below) and found already correct in this
      build: .area-card is a single contiguous grid box with no
      overlay, no absolutely positioned child, no pointer-events
      change, no z-index interference and no gap between cards, and a
      dense hit-test of every card returned zero points inside the
      visible rectangle that resolve to anything other than the card
      or one of its own descendants. No geometry or markup change was
      therefore required. Only the response speed changes: the v44
      110ms transition becomes 80ms with an explicit 0ms delay, on
      desktop fine-pointer devices only. Illuminated colour, glow
      layers and the sustained held state are preserved exactly.
   ===================================================================== */

/* ---------- A. CONSULTATION PANELS (desktop only) ------------------- */
@media (min-width:1120px){
  html[lang="en"] .areas-cta p,
  html[lang="en"] .matters-cta p{font-size:23px;}
}

/* ---------- B. PRACTICE AREAS HEADING RESPONSE ---------------------- */
/* Same specificity as the v44 declaration (1,2,2); wins on source
   order. Explicit properties only — never `all`. The hovered state
   continues to live on the parent .area-card, so movement among the
   heading, body prose, CTA, arrow and blank interior space never
   restarts or interrupts the illumination. */
@media (min-width:1120px) and (hover:hover) and (pointer:fine){
  html[lang="en"] #practice .area-card h3{
    transition:
      color 80ms ease-out 0ms,
      text-shadow 80ms ease-out 0ms;
  }
}

/* Reduced motion — final illuminated appearance unchanged, applied
   immediately (restated so source order cannot reintroduce a duration). */
@media (prefers-reduced-motion: reduce){
  html[lang="en"] #practice .area-card h3{
    transition-duration:0s;
    transition-delay:0s;
  }
}

/* ===== inline block: en-consultation-panel-glow-v58 ===== */

/* =====================================================================
   v58 (2026-08-05) — approved ENGLISH desktop consultation-panel CTA
   glow trigger. Appended after the v56 block; no earlier rule is
   edited. No !important, no markup change, no JavaScript.

   The complete visible panel container (.areas-cta / .matters-cta) is
   the hover trigger: heading, explanatory sentence, CTA button, CTA
   text and every point of interior whitespace inside the panel's own
   background/border box. Entering at any of those points illuminates
   ONLY the CTA lettering.

   The glow is the existing Contact-section heading treatment, reused
   verbatim: the same @keyframes jsk-contact-white-v55 declared in the
   v55 block above (peak #ffffff with the same four text-shadow
   layers across the same 16%-29% plateau), the same 1.25s duration,
   the same ease easing and the same single iteration. Nothing is
   approximated and no new keyframe is introduced.

   The declaration is carried by the panel-level :hover selector, so
   the computed animation shorthand does not change while the cursor
   moves among the heading, the sentence, the button, the button text
   and the blank interior space — the animation therefore runs once
   per true panel entry, rises, fades back to the resting appearance
   and stays at rest until the cursor leaves the whole panel and
   re-enters. The keyframes set colour and text-shadow only, so the
   resting state at 0%/100% is the panel button's own unchanged
   appearance.

   Direct button/text hover is untouched: the v26/v35 brass background
   and border transform, the focus-visible path, the button wording,
   family, size, weight, tracking, colour, geometry, padding, href,
   data attributes and prefills are all preserved exactly as in v57.
   ===================================================================== */

@media (min-width:1120px) and (hover:hover) and (pointer:fine){

  html[lang="en"] .areas-cta:hover .btn-primary,
  html[lang="en"] .matters-cta:hover .btn-primary{
    animation:jsk-contact-white-v55 1.25s ease;
  }

  /* REDUCED MOTION — no animated flash or pulse; the resting appearance
     and full button functionality are retained. The shared
     reduced-motion mechanism is not modified. */
  @media (prefers-reduced-motion:reduce){
    html[lang="en"] .areas-cta:hover .btn-primary,
    html[lang="en"] .matters-cta:hover .btn-primary{animation:none;}
  }
}

/* ===== inline block: en-language-switcher-state-v59 ===== */

/* =====================================================================
   v59 (2026-08-05) — approved ENGLISH desktop language-switcher
   state correction. Appended after the v58 block; no earlier rule is
   edited. CSS only: no JavaScript, no !important, no markup change, no
   new element, no tabindex, no change to wording, destinations, the
   "|" separator, position, spacing, family, size, weight, tracking or
   header height.

   Scope is strictly (min-width:1120px) and (hover:hover) and
   (pointer:fine), so nothing here reaches 1119px and below, touch,
   coarse pointers or hover:none devices, and the mobile menu's own
   language control (.mobile-menu .lang-switch) is outside the
   `header .lang-switch` scope entirely.

   ONE UNDERLINE AT ALL TIMES. Both links carry a permanent
   text-decoration underline whose colour is transparent at rest, so
   the underline is never structurally added or removed — only its
   colour changes, which cannot move layout, cannot flicker and cannot
   restart an animation. EN (active) shows it in dark navy
   #0f1b33 at 0.88; while KO (inactive) is hovered or
   focus-visible, the container-level :has() rule turns the EN
   underline fully transparent and the KO underline gold, so
   the two are never visible together. The legacy 1px brass
   border-bottom underline is neutralised by colour only
   (border-bottom-color:transparent) — the 1px border box is kept, so
   no geometry changes.

   The inactive language's hover/focus treatment is the approved
   luminous warm gold (#d79a18 with the five supplied shadow layers)
   on a 140ms ease-out colour/text-shadow transition. It is a
   sustained state, not an animation: it holds for the entire hover or
   focus and returns smoothly on exit. Because text-shadow also paints
   the text decoration, the gold underline carries the same halo and
   reads as connected to the lettering.
   ===================================================================== */

@media (min-width:1120px) and (hover:hover) and (pointer:fine){

  /* Shared underline carrier — transparent at rest, 2px, 4px below the
     letters, exactly the width of the two letters, centred by
     construction. The brass border-bottom is made transparent. */
  html[lang="en"] header .lang-switch a{
    text-decoration-line:underline;
    text-decoration-style:solid;
    text-decoration-color:transparent;
    text-decoration-thickness:2px;
    text-underline-offset:4px;
    border-bottom-color:transparent;
    transition:color 140ms ease-out,
               text-shadow 140ms ease-out,
               text-decoration-color 140ms ease-out;
  }

  /* Normal state — active language underline only. */
  html[lang="en"] header .lang-switch a.active{
    text-decoration-color:rgba(15,27,51,0.88);
    border-bottom-color:transparent;
  }

  /* Inactive language hovered or keyboard-focused — bright warm gold
     lettering, gold underline, sustained for the whole duration. */
  html[lang="en"] header .lang-switch a:not(.active):hover,
  html[lang="en"] header .lang-switch a:not(.active):focus-visible{
    color:#d79a18;
    text-decoration-color:#d79a18;
    border-bottom-color:transparent;
    text-shadow:
      0 0 3px rgba(255,252,226,1),
      0 0 8px rgba(255,220,112,0.98),
      0 0 17px rgba(230,164,30,0.82),
      0 0 29px rgba(218,150,19,0.58),
      0 0 42px rgba(185,122,10,0.30);
  }

  /* CORE STATE RULE — while the inactive language is hovered or
     focus-visible, the active language's underline disappears
     completely. Only one underline is ever visible. */
  html[lang="en"] header .lang-switch:has(a:not(.active):hover) a.active,
  html[lang="en"] header .lang-switch:has(a:not(.active):focus-visible) a.active{
    text-decoration-color:transparent;
  }

  /* REDUCED MOTION — state changes are shown immediately; the bright
     hovered/focused appearance and the one-underline-only mechanism are
     both preserved. The shared reduced-motion mechanism is not
     modified and no important-flagged override is added. */
  @media (prefers-reduced-motion:reduce){
    html[lang="en"] header .lang-switch a{transition:none;}
  }
}

/* ===== inline block: en-header-glow-rebalance-v60 ===== */

/* =====================================================================
   v60 (2026-08-05) — approved ENGLISH desktop header glow rebalance.
   Appended after the v59 block; no earlier rule is edited. CSS only:
   no JavaScript, no !important, no markup change, no new element, no
   tabindex, no change to wording, destinations, the "|" separator,
   position, spacing, family, size, weight, tracking or header height.

   Scope is strictly (min-width:1120px) and (hover:hover) and
   (pointer:fine), so nothing here reaches 1119px and below, touch,
   coarse pointers or hover:none devices, and the mobile menu's own
   navigation and language control are outside the `header` scope.

   A. Inactive-language hover/focus glow reduced from the v59 level
      (reference 100) to the approved reference 82. Only the letter
      colour and the text-shadow are restated; the v59 underline
      declarations (thickness 2px, offset 4px, colour, the
      one-underline-only :has() switching rule and the transparent
      border-bottom) are inherited from the v59 block untouched, so the
      underlines are neither weakened nor moved.

   B. Main-navigation hover/focus glow raised from reference 38 to the
      approved reference 65. Only the letter colour and the text-shadow
      change; the brass border-bottom underline of restore.css keeps its
      colour, thickness, position, width and its .2s ease transition,
      which is why border-color is restated first in the transition
      shorthand at its original timing while colour and text-shadow move
      to the approved 140ms ease-out.

   Both are sustained hover/focus states, not animations: they hold for
   the whole hover or focus and return smoothly on exit. The
   language-switcher glow remains materially brighter than the
   navigation glow.
   ===================================================================== */

@media (min-width:1120px) and (hover:hover) and (pointer:fine){

  /* A. LANGUAGE SWITCHER — inactive language, reference 82/100.
     Same selector as v59, later in document order, so only these two
     declarations are superseded. */
  html[lang="en"] header .lang-switch a:not(.active):hover,
  html[lang="en"] header .lang-switch a:not(.active):focus-visible{
    color:#cf9218;
    text-shadow:
      0 0 3px rgba(255,252,226,0.88),
      0 0 7px rgba(255,220,112,0.82),
      0 0 14px rgba(230,164,30,0.66),
      0 0 23px rgba(218,150,19,0.43),
      0 0 32px rgba(185,122,10,0.20);
  }

  /* B. MAIN NAVIGATION — five links, reference 65/100. */
  html[lang="en"] header .nav-links a{
    transition:border-color .2s ease,
               color 140ms ease-out,
               text-shadow 140ms ease-out;
  }

  html[lang="en"] header .nav-links a:hover,
  html[lang="en"] header .nav-links a:focus-visible{
    color:#b77d08;
    text-shadow:
      0 0 3px rgba(255,248,218,0.72),
      0 0 7px rgba(224,178,67,0.56),
      0 0 13px rgba(185,122,10,0.30);
  }

  /* REDUCED MOTION — state changes are shown immediately; the approved
     final colours and shadows and the one-underline-only language
     mechanism are both preserved. The shared reduced-motion mechanism
     is not modified and no important-flagged override is added. */
  @media (prefers-reduced-motion:reduce){
    html[lang="en"] header .lang-switch a,
    html[lang="en"] header .nav-links a{transition:none;}
  }
}

/* ===== inline block: en-main-nav-glow-v61 ===== */

/* =====================================================================
   v61 (2026-08-05) — approved ENGLISH desktop MAIN-NAVIGATION glow
   reduction. Appended after the v60 block; no earlier rule is edited.
   CSS only: no JavaScript, no !important, no markup change, no new
   file, no dependency, no change to wording, family, size, weight,
   tracking, spacing, alignment, destinations or header height.

   Scope is strictly (min-width:1120px) and (hover:hover) and
   (pointer:fine), so nothing here reaches 1119px and below, touch,
   coarse pointers or hover:none devices, and the mobile menu's own
   navigation is outside the `header .nav-links` scope.

   Only the five main-navigation links change, and only their letter
   colour and text-shadow: reference 65/100 (v60) -> reference 52-53/100.
   This is a sustained hover / focus-visible state, not an animation:
   it holds for the whole hover or focus and returns smoothly on exit.

   The language-switcher treatment approved at v60 (reference 82/100) is
   not referenced here at all and therefore remains exactly as delivered,
   and remains materially brighter than this navigation glow.

   The transition is restated at the v60 values so that this block is
   self-contained. `border-color .2s ease` is listed first, unchanged,
   because the faint brass border-bottom underline beneath each link is
   approved and its transition, timing and every other property must
   remain exactly as in v60; colour and text-shadow use the approved
   140ms ease-out.
   ===================================================================== */

@media (min-width:1120px) and (hover:hover) and (pointer:fine){

  html[lang="en"] header .nav-links a{
    transition:border-color .2s ease,
               color 140ms ease-out,
               text-shadow 140ms ease-out;
  }

  html[lang="en"] header .nav-links a:hover,
  html[lang="en"] header .nav-links a:focus-visible{
    color:#b1841d;
    text-shadow:
      0 0 3px rgba(255,248,218,0.58),
      0 0 7px rgba(224,178,67,0.40),
      0 0 11px rgba(185,122,10,0.20);
  }

  /* REDUCED MOTION — the approved final colour and text-shadow are
     preserved and the state change is shown immediately. The shared
     reduced-motion mechanism is not modified and no important-flagged
     override is added. */
  @media (prefers-reduced-motion:reduce){
    html[lang="en"] header .nav-links a{transition:none;}
  }
}

/* ===== assets/executive-editorial.css ===== */
/* ================================================================
   JSK DESKTOP MASTER — EXECUTIVE EDITORIAL
   Layout integration only. v61 remains the authority for wording,
   typography sizes, interactions, video, forms, and responsive rules.
   ================================================================ */

@media (min-width:1120px){
  html{
    --master-navy:#101c35;
    --master-navy-2:#172746;
    --master-gold:#9b6a18;
    --master-gold-light:#c6a15b;
    --master-cream:#f4f0e7;
    --master-paper:#fbfaf6;
    --master-sand:#eae4d8;
    --master-line:rgba(22,35,61,.19);
  }

  body.executive-editorial-master{background:var(--master-paper);color:var(--ink);}
  body.executive-editorial-master .wrap{max-width:1120px;}

  /* Header — the full v61 navigation and controls remain. */
  body.executive-editorial-master header{
    background:rgba(251,250,246,.96);
    border-bottom:1px solid var(--master-line);
    box-shadow:none;
    backdrop-filter:blur(12px);
  }
  body.executive-editorial-master header .nav{
    display:grid;grid-template-columns:150px minmax(0,1fr) 360px;column-gap:20px;
    max-width:1280px;padding-left:30px;padding-right:30px;
  }
  body.executive-editorial-master header .nav > a:first-of-type{justify-self:start;}
  body.executive-editorial-master header .nav-links{
    display:grid;grid-template-columns:repeat(5,max-content);justify-content:space-between;
    width:100%;gap:0;
  }
  body.executive-editorial-master header .nav-right{
    width:100%;justify-content:flex-end;
  }
  body.executive-editorial-master header .nav-links a{position:relative;border-bottom-color:transparent;}
  body.executive-editorial-master header .nav-links a::after{
    content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;
    background:var(--master-gold);transition:right 180ms ease-out;
  }
  body.executive-editorial-master header .nav-links a:hover::after,
  body.executive-editorial-master header .nav-links a:focus-visible::after{right:0;}
  body.executive-editorial-master header .nav-cta,
  html[lang="ko"] body.executive-editorial-master header .nav-right > .nav-cta{
    background:var(--master-navy);border-color:var(--master-navy);color:#fff;
  }

  /* Hero — faithful Direction 1 split: text and a sharp, independent portrait. */
  body.executive-editorial-master .hero{
    position:relative;overflow:hidden;min-height:0;padding:58px 0 0;
    text-align:left;background:var(--master-cream);border-bottom:0;
  }
  body.executive-editorial-master .hero::after{content:none;}
  body.executive-editorial-master .hero .caption{
    position:relative;z-index:2;width:min(52vw,680px);max-width:none;min-height:670px;
    margin:0 0 0 max(32px,calc((100vw - 1120px)/2));text-align:left;
  }
  body.executive-editorial-master .hero .eyebrow{color:var(--master-gold);}
  body.executive-editorial-master .hero .caption-rule{
    width:112px;margin-left:0;border-top-color:var(--master-gold);
  }
  body.executive-editorial-master .hero .caption-rule.thin{
    width:100%;border-top-color:var(--master-line);
  }
  body.executive-editorial-master .hero h1{max-width:680px;}
  body.executive-editorial-master .hero .dek{max-width:650px;}
  body.executive-editorial-master .hero .docket-row{
    width:min(calc(100vw - 64px),1120px);justify-content:flex-start;
    margin-left:0;margin-right:0;text-align:left;
  }
  body.executive-editorial-master .hero .docket-row span{white-space:nowrap;}
  body.executive-editorial-master .hero .hero-actions{margin-left:0;margin-right:0;}
  body.executive-editorial-master .hero .btn-primary{
    background:var(--master-navy);border-color:var(--master-navy);
  }
  body.executive-editorial-master .master-hero-portrait{
    position:absolute;z-index:1;top:58px;right:max(32px,calc((100vw - 1120px)/2));
    width:min(34vw,400px);height:650px;margin:0;overflow:hidden;
    background:var(--master-navy);box-shadow:18px 18px 0 rgba(155,106,24,.18);
  }
  body.executive-editorial-master .master-hero-portrait img{
    display:block;width:100%;height:100%;object-fit:cover;object-position:center 22%;filter:none;
  }
  body.executive-editorial-master .hero .stats{
    position:relative;z-index:3;max-width:1280px;margin-top:58px;padding:0;
    color:var(--white);background:var(--master-navy);border-top:0;
    box-shadow:0 20px 55px rgba(16,28,53,.16);
  }
  body.executive-editorial-master .hero .stat{
    padding-left:30px;padding-right:30px;text-align:left;border-right-color:rgba(255,255,255,.16);
  }
  body.executive-editorial-master .hero .stat:first-child{border-left:1px solid rgba(255,255,255,.16);}
  body.executive-editorial-master .hero .stat-num{color:var(--master-gold-light);}
  body.executive-editorial-master .hero .stat-label{color:rgba(255,255,255,.78);}
  body.executive-editorial-master .hero .sector-block{
    position:relative;z-index:3;max-width:1280px;background:var(--master-paper);
    border-top:0;border-bottom:1px solid var(--master-line);
  }
  body.executive-editorial-master .hero .sector-label{color:var(--master-gold);}

  /* Section surfaces and rhythm. */
  body.executive-editorial-master #about,
  body.executive-editorial-master #practice,
  body.executive-editorial-master #contact{background:var(--master-paper);}
  body.executive-editorial-master #experience,
  body.executive-editorial-master #approach{background:var(--master-sand);}
  body.executive-editorial-master .section-head{
    padding-bottom:28px;border-bottom:1px solid var(--master-line);
  }
  body.executive-editorial-master .section-label{color:var(--master-gold);}

  /* About Counsel — full portrait, introduction video and credentials retained. */
  body.executive-editorial-master #about{padding-top:118px;padding-bottom:118px;}
  body.executive-editorial-master #about .about{grid-template-columns:.76fr 1.24fr;gap:86px;}
  body.executive-editorial-master #about .about-portrait{
    border:0;box-shadow:18px 18px 0 var(--master-sand);
  }
  body.executive-editorial-master #about .portrait-caption{
    padding-bottom:18px;border-bottom:1px solid var(--master-line);
  }
  body.executive-editorial-master #about .about-copy h2.section-label{
    color:var(--master-navy);font-family:'P052','Noto Serif',serif;letter-spacing:-.015em;
  }
  body.executive-editorial-master #about .about-copy h2.section-label::before{
    content:"01 / ";display:block;margin-bottom:14px;color:var(--master-gold);
    font:600 12px/1 'IBM Plex Mono',monospace;letter-spacing:.14em;
  }
  body.executive-editorial-master #about .credentials{
    padding-top:30px;border-top:1px solid var(--master-line);
  }
  body.executive-editorial-master #about .entity-name{color:var(--master-gold);}

  /* Track Record — two real columns; numbering sits outside the grid. */
  body.executive-editorial-master #experience{
    counter-reset:career;padding-top:112px;padding-bottom:112px;
  }
  body.executive-editorial-master #experience .section-label::before{content:"02 / ";}
  body.executive-editorial-master #experience .tl-row{
    position:relative;counter-increment:career;display:grid;
    grid-template-columns:minmax(300px,.72fr) minmax(0,1.28fr);column-gap:58px;
    padding-left:54px;padding-right:0;align-items:start;transition:background 180ms ease-out;
  }
  body.executive-editorial-master #experience .tl-row::before{
    content:"0" counter(career);position:absolute;top:calc(var(--career-pad) + 7px);left:0;
    width:auto;height:auto;padding:0;color:var(--master-gold);background:none;
    font:600 10px/1.5 'IBM Plex Mono',monospace;letter-spacing:.12em;
  }
  body.executive-editorial-master #experience .tl-org{grid-column:1;}
  body.executive-editorial-master #experience .tl-desc{grid-column:2;max-width:none;}
  body.executive-editorial-master #experience .tl-row:hover{
    padding-left:54px;background:rgba(255,255,255,.27);
  }

  /* Practice Areas — long-form v61 prose uses a spacious editorial ledger. */
  body.executive-editorial-master #practice{padding-top:112px;padding-bottom:112px;}
  body.executive-editorial-master #practice .section-label::before{content:"03 / ";}
  body.executive-editorial-master #practice .area-grid{
    display:block;border-top:1px solid var(--master-line);border-left:0;
  }
  body.executive-editorial-master #practice .area-card,
  body.executive-editorial-master #practice .area-card:last-child{
    display:grid;grid-template-columns:minmax(280px,.7fr) minmax(0,1.3fr);column-gap:72px;
    min-height:0;margin:0;padding:44px 0;color:inherit;background:transparent;
    border:0;border-bottom:1px solid var(--master-line);box-shadow:none;transform:none;
    transition:background 180ms ease-out;
  }
  body.executive-editorial-master #practice .area-card:hover,
  body.executive-editorial-master #practice .area-card:focus-within{
    position:relative;z-index:auto;color:inherit;background:rgba(234,228,216,.42);
    box-shadow:none;transform:none;
  }
  body.executive-editorial-master #practice .area-card h3{grid-column:1;}
  body.executive-editorial-master #practice .area-card p,
  body.executive-editorial-master #practice .area-card:hover p,
  body.executive-editorial-master #practice .area-card:focus-within p{
    grid-column:2;max-width:none;color:var(--body-ink);
  }
  body.executive-editorial-master #practice .area-link{
    grid-column:2;margin-top:22px;padding-top:0;
  }
  body.executive-editorial-master .areas-cta,
  body.executive-editorial-master .matters-cta{
    background:var(--master-sand);border:1px solid var(--master-line);box-shadow:none;
  }

  /* Selected Experience — warm editorial evidence field; every v61 matter remains. */
  body.executive-editorial-master #results{
    padding-top:112px;padding-bottom:112px;color:var(--ink);background:var(--master-sand);
    border-top:1px solid var(--master-line);border-bottom:1px solid var(--master-line);
  }
  body.executive-editorial-master #results .section-head{
    border-bottom-color:var(--master-line);
  }
  body.executive-editorial-master #results .section-label::before{content:"04 / ";}
  body.executive-editorial-master #results .section-title,
  body.executive-editorial-master #results .matter-item h3{color:var(--master-navy);}
  body.executive-editorial-master #results .matters-intro,
  body.executive-editorial-master #results .matters-footnote,
  body.executive-editorial-master #results .matter-item p{color:var(--body-ink);}
  body.executive-editorial-master #results .matters-group-label,
  body.executive-editorial-master #results .matter-cat,
  body.executive-editorial-master #results .matter-metric{color:var(--master-gold);}
  body.executive-editorial-master #results .matters-grid{
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    border-top:1px solid var(--master-line);border-left:1px solid var(--master-line);
  }
  body.executive-editorial-master #results .matter-item{
    padding:40px;border:0;border-right:1px solid var(--master-line);
    border-bottom:1px solid var(--master-line);background:rgba(251,250,246,.24);
    transition:background 180ms ease-out;
  }
  body.executive-editorial-master #results .matter-item:hover{background:rgba(251,250,246,.72);}
  body.executive-editorial-master #results .results-intro-hover-v51:hover .section-title .ill-hold{
    color:#7d5718;
    text-shadow:0 0 2px rgba(155,106,24,.18),0 0 7px rgba(155,106,24,.12);
  }
  body.executive-editorial-master #results .matter-item:hover .matter-cat,
  body.executive-editorial-master #results .matter-item:hover h3,
  body.executive-editorial-master #results .matter-item:hover .matter-metric{
    animation:none;
  }
  body.executive-editorial-master #results .matter-item:hover .matter-cat,
  body.executive-editorial-master #results .matter-item:hover .matter-metric{
    color:#805914;text-shadow:0 0 4px rgba(155,106,24,.14);
  }
  body.executive-editorial-master #results .matter-item:hover h3{
    color:#182947;text-shadow:0 0 5px rgba(24,41,71,.11);
  }
  body.executive-editorial-master #results .matters-cta{color:var(--ink);background:var(--master-paper);}
  body.executive-editorial-master #results .matters-cta p{color:var(--charcoal);}

  /* Our Approach — editorial split, original quotation and glow retained. */
  body.executive-editorial-master #approach{padding-top:100px;padding-bottom:100px;}
  body.executive-editorial-master #approach .approach{
    display:grid;grid-template-columns:.46fr 1.54fr;column-gap:90px;max-width:1120px;
    text-align:left;align-items:start;
  }
  body.executive-editorial-master #approach .section-label{margin:0;}
  body.executive-editorial-master #approach .section-label::before{
    content:"05 / ";display:block;margin-bottom:14px;color:var(--master-gold);
    font:600 12px/1 'IBM Plex Mono',monospace;letter-spacing:.14em;
  }
  body.executive-editorial-master #approach blockquote{margin:0;}
  body.executive-editorial-master #approach cite{grid-column:2;text-align:left;}

  /* Contact — v61 form, validation, prefill and actions retained. */
  body.executive-editorial-master #contact{
    padding-top:112px;padding-bottom:112px;background:var(--master-navy);
  }
  body.executive-editorial-master #contact .section-label::before{content:"06 / ";}
  body.executive-editorial-master #contact .contact-grid{
    grid-template-columns:.82fr 1.18fr;gap:90px;
  }
  body.executive-editorial-master #contact form{
    padding-left:60px;border-left:1px solid rgba(255,255,255,.20);
  }
  body.executive-editorial-master footer{background:#091328;}

  /* Korean keeps its complete v61 typography and line-breaking behavior. */
  html[lang="ko"] body.executive-editorial-master #about .about-copy h2.section-label::before,
  html[lang="ko"] body.executive-editorial-master #approach .section-label::before{
    font-family:'Noto Sans KR','Apple SD Gothic Neo',sans-serif;letter-spacing:.025em;
  }
  html[lang="ko"] body.executive-editorial-master .hero .caption{width:min(52vw,680px);}
}

@media (prefers-reduced-motion:reduce){
  body.executive-editorial-master *{scroll-behavior:auto !important;}
}

/* ================================================================
   HEADER NAVIGATION — PROPORTIONAL THREE-ZONE SYSTEM
   Desktop only (>=1120px). Replaces the fixed 360px utility track and
   the five unequal max-content category columns with one governing
   geometry shared by English and Korean:

     zone 1  brand      intrinsic width, logo pinned to the container's
                        left padding edge (position, artwork, size and
                        vertical alignment all unchanged)
     zone 2  categories five equal positioning tracks, each label
                        centred on its own track
     zone 3  utility    intrinsic width, so EN | KO and the
                        consultation button reserve no empty field

   Nothing here touches wording, order, family, size, weight, letter
   spacing, word spacing, case, colour, hover, focus, underline,
   header height, background, border, sticky behaviour, logo artwork
   or dimensions, language-selector typography, or the consultation
   button's typography, dimensions and colours.
   ================================================================ */
@media (min-width:1120px){

  /* Measured column-gap. The header container is capped at 1280px, so
     its inner width does not grow past 1220px; a gap that scales with
     the viewport would therefore steal width from the category band on
     wide screens. The gap is therefore held to the smallest value
     that still reads as a structural separation, so that every
     remaining pixel goes to the category band: English needs a
     133.6px interval for its widest adjacent pair (EXPERIENCE 113.6px
     + PRACTICE AREAS 153.5px), i.e. 667.8px of band, and only 695.6px
     is available inside the 1280px container. The clamp(20px,2vw,36px)
     starting point measures 36px from 1800px up, which drives the
     English band down to 129.9px per track - 3.7px below what those
     two labels need - so it overlaps precisely on the widest screens.
     The visible clearance at each end of the band comes from the
     half-track, not from this gap. */
  body.executive-editorial-master header .nav{
    grid-template-columns:max-content minmax(0,1fr) max-content;
    column-gap:clamp(10px,1vw,12px);
  }

  body.executive-editorial-master header .nav-links{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    justify-content:normal;
    width:100%;
    min-width:0;
    gap:0;
    align-items:center;
  }

  body.executive-editorial-master header .nav-links a{
    justify-self:center;
    white-space:nowrap;
  }

  body.executive-editorial-master header .nav-right{
    width:max-content;
    justify-self:end;
  }
}

/* ---------- English 1120-1279px: measured structural exception ------
   The five equal tracks are held at every width from 1280px up, where
   the header container reaches its 1280px cap and its inner width
   stops changing. Below that the container follows the viewport, and
   English cannot hold equal centres without the labels colliding:

     equal-centre interval required by the widest adjacent English
     pair (EXPERIENCE 113.6px + PRACTICE AREAS 153.5px) = 133.6px
     five such tracks                                   = 667.8px
     category band actually available at 1120px         = 539.6px
     deficit                                            = 128.2px

   The deficit cannot be closed inside this brief: the logo, the
   navigation type size and the consultation button may not shrink,
   the utility zone is already intrinsic, and driving the inter-zone
   gap to zero recovers only 22.4px. Overlapping labels are a visible
   defect, so English alone falls back to its content-distributed band
   between 1120px and 1279.98px. Korean holds the equal-track system
   at every desktop width, 1120px included. Everything else in the
   three-zone architecture - intrinsic brand track, intrinsic utility
   track, shared gap, centred alignment - is unchanged here. */
@media (min-width:1120px) and (max-width:1279.98px){
  html[lang="en"] body.executive-editorial-master header .nav-links{
    grid-template-columns:repeat(5,max-content);
    justify-content:space-between;
  }
}

/* ================================================================
   HEADER NAVIGATION — SPACING REFINEMENT
   Desktop only (>=1120px). Two deliberately different corrections.

   ENGLISH — no rule is added. The five-track system already sets
   ABOUT and CONTACT as the outer anchors and places the three middle
   categories on exactly the 25% / 50% / 75% marks between them
   (measured deviation 0.0px at 1280-1920px), so the requested
   distribution is already in force; any further rule could only
   disturb the two anchors that must not move.

   KOREAN — the five categories contract around their own midpoint.
   Each of the four visible edge-to-edge gaps is reduced to 80% of
   its rendered value, which narrows the group and returns the
   recovered width to the two outer clearances: the logo gains room
   before 소개 and EN | KO gains room after 문의. The group stays
   centred in the same track, so its midpoint does not move, and the
   logo, EN | KO and the consultation button are untouched.

   Why two declarations rather than a single gap. With the five
   labels measuring 35.3 / 76.3 / 76.3 / 76.3 / 35.3px, the outer
   gaps and the inner gaps are not equal to begin with:
   G1 = G4 = track - 55.8px and G2 = G3 = track - 76.3px, a constant
   20.5px apart. Taking 80% of each therefore leaves the outer gaps
   0.8 x 20.5 = 16.4px wider than the inner ones - the same 16.4px at
   every desktop width. The flex column-gap carries 80% of the inner
   gap; one 16.4px inline margin on each outer category carries the
   remainder. No spacer element, blank text or non-breaking space is
   used, and no label is positioned absolutely.

   The column-gap follows the band the header actually offers. That
   band is min(viewport,1280) - 407.91px - 2 x inter-zone gap, the
   track is a fifth of it, and the target inner gap is
   0.8 x (track - 76.3px), which resolves to 16vw - 130.15px: capped
   at 74.65px from 1280px up, where the container stops growing, and
   floored at the 1120px value. Measured deviation from an exact 80%
   target is at most 0.3px, so every gap lands between 20.0% and
   20.4% reduction.
   ================================================================ */
@media (min-width:1120px){

  html[lang="ko"] body.executive-editorial-master header .nav-links{
    display:flex;
    flex-wrap:nowrap;
    justify-content:center;
    align-items:center;
    width:100%;
    min-width:0;
    column-gap:clamp(49.05px,calc(16vw - 130.15px),74.65px);
  }

  html[lang="ko"] body.executive-editorial-master header .nav-links a{
    flex:0 0 auto;
    white-space:nowrap;
  }

  html[lang="ko"] body.executive-editorial-master header .nav-links a:first-child{
    margin-right:16.4px;
  }

  html[lang="ko"] body.executive-editorial-master header .nav-links a:last-child{
    margin-left:16.4px;
  }
}

/* ================================================================
   ENGLISH HEADER NAVIGATION — EQUAL VISIBLE SPACES
   Desktop only (>=1120px). English only; the approved Korean rule
   above is not touched.

   The five-track system distributed the categories by equal centre
   distance. Because ABOUT (56.81px), EXPERIENCE (113.61px),
   PRACTICE AREAS (153.45px), RESULTS (79.53px) and CONTACT
   (79.53px) are very different widths, equal centres produced very
   unequal empty spaces - 53.91 / 5.61 / 22.64 / 59.59px - with
   EXPERIENCE and PRACTICE AREAS almost touching. What must be equal
   is the visible space between the labels, not the distance between
   their centres.

   The five labels therefore become intrinsic-width flex items with
   the free space divided equally between them by space-between.
   That alone would pull ABOUT and CONTACT out to the edges of the
   navigation track and move both anchors, so the track is inset by
   the exact measured amount that leaves each anchor where it is:
   under the five-track system ABOUT's left edge sat
   (track - 56.81)/2 = 41.16px inside the band and CONTACT's right
   edge sat (track - 79.53)/2 = 29.81px inside it. Those two insets
   are constant from 1280px up, where the header container reaches
   its cap and the track stops changing, so they are applied as a
   measured padding-inline there and are zero below 1280px, where the
   band already begins at ABOUT's left edge and ends at CONTACT's
   right edge.

   Result: ABOUT and CONTACT keep their rendered rectangles to
   0.00px, the group's overall width is unchanged, and the four
   visible gaps become equal - 35.44px each from 1280px up, and the
   full width of the band divided evenly below it.
   ================================================================ */
@media (min-width:1120px){

  html[lang="en"] body.executive-editorial-master header .nav-links{
    display:flex;
    flex-wrap:nowrap;
    justify-content:space-between;
    align-items:center;
    width:100%;
    min-width:0;
    gap:0;
    padding-inline:0;
  }

  html[lang="en"] body.executive-editorial-master header .nav-links a{
    flex:0 0 auto;
    white-space:nowrap;
  }
}

/* Measured insets that hold the two outer anchors in place at the
   widths where the header container is at its 1280px cap. */
@media (min-width:1280px){
  html[lang="en"] body.executive-editorial-master header .nav-links{
    padding-inline:41.16px 29.81px;
  }
}

/* ================================================================
   ENGLISH HERO CREDENTIAL LINE — ONE UNBROKEN LINE
   Desktop only (>=1120px). English only; ko.html is not reachable
   by any selector here.

   The credential read as three inline runs inside a block, so the
   browser was free to break wherever it liked - and with 0.1em
   tracking plus a "&nbsp;•&nbsp;" separator the run measured 718.2px
   against a 680px caption column, which stranded the single word
   LEADER on a second line at the far left.

   The line is now a nowrap flex row of two indivisible phrases with
   the bullet as its own item carrying symmetric margins, the
   separator's non-breaking spaces are gone from the markup, and the
   tracking is eased from 0.1em to 0.05em - the midpoint of the
   permitted 0.04em-0.06em range, which fits comfortably without
   crowding the letters. Font family, weight, size (18.25px), gold
   colour, uppercase treatment and the existing hover illumination
   are all untouched.

   Below 1246px the caption column is too narrow to carry the line at
   a readable size, so the two phrases each take a full row and the
   bullet is hidden - two deliberate lines, never a stranded LEADER.
   ================================================================ */
@media (min-width:1120px){

  html[lang="en"] body.executive-editorial-master .hero .eyebrow{
    display:flex;
    flex-wrap:nowrap;
    align-items:baseline;
    justify-content:flex-start;
    width:max-content;
    /* The line may reach at most 24px past the caption column toward
       the portrait. The gutter between the two is 54px at every
       desktop width, so a clean gap always remains. */
    max-width:calc(100% + 24px);
    letter-spacing:0.05em;
  }

  html[lang="en"] body.executive-editorial-master .hero .eyebrow .cred{
    white-space:nowrap;
    flex:0 0 auto;
  }

  html[lang="en"] body.executive-editorial-master .hero .eyebrow .cred-sep{
    flex:0 0 auto;
    margin-inline:0.62em;
    white-space:nowrap;
  }
}

/* Narrower desktop: two deliberate lines, bullet withdrawn. */
@media (min-width:1120px) and (max-width:1245.98px){
  html[lang="en"] body.executive-editorial-master .hero .eyebrow{
    flex-wrap:wrap;
    row-gap:2px;
    width:auto;
    max-width:100%;
  }
  html[lang="en"] body.executive-editorial-master .hero .eyebrow .cred{
    flex:0 0 100%;
  }
  html[lang="en"] body.executive-editorial-master .hero .eyebrow .cred-sep{
    display:none;
  }
}

/* ================================================================
   SECTION NUMBERING — ONE TWO-LEVEL HIERARCHY
   Desktop only (>=1120px), English and Korean.

   The six main numbers were previously three different things: 01 /
   and 05 / were declared at 12px IBM Plex Mono, while 02 /, 03 /,
   04 / and 06 / carried no declarations of their own and simply
   inherited whatever .section-label happened to be in that section -
   25px Arial in English Track Record, Practice Areas and Selected
   Experience, 20px DejaVu Serif in Get In Touch, and 25.5-28px Noto
   Serif KR on the Korean page. Korean additionally re-pointed the
   01 / and 05 / prefixes at Noto Sans KR.

   All six are now declared explicitly, so no heading typography can
   reach them, and the internal Track Record counters are raised from
   10px to 11.5px so they read as a clearly subordinate second level.
   The gold is the same var(--master-gold) the numbers already used -
   rgb(155,106,24) measured on all six before the change - so no
   colour moves. Section names, wording, order, and every other
   heading property are untouched.
   ================================================================ */
@media (min-width:1120px){

  body.executive-editorial-master #about .about-copy h2.section-label::before,
  html[lang="ko"] body.executive-editorial-master #about .about-copy h2.section-label::before,
  body.executive-editorial-master #experience .section-label::before,
  body.executive-editorial-master #practice .section-label::before,
  body.executive-editorial-master #results .section-label::before,
  body.executive-editorial-master #approach .section-label::before,
  html[lang="ko"] body.executive-editorial-master #approach .section-label::before,
  body.executive-editorial-master #contact .section-label::before{
    font-family:'IBM Plex Mono',monospace;
    font-size:14px;
    font-weight:600;
    line-height:1;
    letter-spacing:0.12em;
    color:var(--master-gold);
    display:block;
    margin-bottom:14px;
    white-space:nowrap;
  }

  body.executive-editorial-master #about .about-copy h2.section-label::before{content:"01 /";}
  body.executive-editorial-master #experience .section-label::before{content:"02 /";}
  body.executive-editorial-master #practice .section-label::before{content:"03 /";}
  body.executive-editorial-master #results .section-label::before{content:"04 /";}
  body.executive-editorial-master #approach .section-label::before{content:"05 /";}
  body.executive-editorial-master #contact .section-label::before{content:"06 /";}

  /* Subordinate level: the five Track Record entry numbers. Position,
     counter, sequence, row padding and hover are all left as they are;
     only the size steps 10px -> 11.5px. */
  body.executive-editorial-master #experience .tl-row::before{
    font-family:'IBM Plex Mono',monospace;
    font-size:11.5px;
    font-weight:600;
    line-height:1.5;
    letter-spacing:0.12em;
    color:var(--master-gold);
  }
}

/* ================================================================
   SECTION NUMBERING — CHARTER AUTHORITY (Option 10)
   The numerals and their slash move from IBM Plex Mono to genuine
   Bitstream Charter Bold, self-hosted so no visitor depends on
   having the face installed. Source: the Bitstream Charter Bold
   Type 1 outline font (PostScript name CharterBT-Bold) donated by
   Bitstream Inc. to the X Consortium, converted to WOFF2 with the
   outlines, metrics and character set unchanged. The license notice
   is reproduced at assets/fonts/licenses/Bitstream-Charter-LICENSE.txt.

   Only the numbers change face. Sizes (14px / 11.5px), weight,
   line-heights, gold, block display, 14px separation, alignment,
   counter, sequence and position all stay as approved; tracking
   eases from the monospace 0.12em to the 0.06em / 0.05em this serif
   asks for. Section names keep their own typefaces in both
   languages.
   ================================================================ */
@font-face{
  font-family:"JSK Charter Numbers";
  src:url("/assets/fonts/bitstream-charter-bold.woff2") format("woff2");
  font-style:normal;
  font-weight:700;
  font-display:swap;
}

@media (min-width:1120px){

  body.executive-editorial-master #about .about-copy h2.section-label::before,
  html[lang="ko"] body.executive-editorial-master #about .about-copy h2.section-label::before,
  body.executive-editorial-master #experience .section-label::before,
  body.executive-editorial-master #practice .section-label::before,
  body.executive-editorial-master #results .section-label::before,
  body.executive-editorial-master #approach .section-label::before,
  html[lang="ko"] body.executive-editorial-master #approach .section-label::before,
  body.executive-editorial-master #contact .section-label::before{
    font-family:"JSK Charter Numbers","Bitstream Charter",Charter,serif;
    font-size:14px;
    font-style:normal;
    font-weight:700;
    line-height:1;
    letter-spacing:0.06em;
    color:var(--master-gold);
    display:block;
    margin-bottom:14px;
    white-space:nowrap;
    font-variant-numeric:lining-nums tabular-nums;
  }

  body.executive-editorial-master #experience .tl-row::before{
    font-family:"JSK Charter Numbers","Bitstream Charter",Charter,serif;
    font-size:11.5px;
    font-style:normal;
    font-weight:700;
    line-height:1.5;
    letter-spacing:0.05em;
    color:var(--master-gold);
    font-variant-numeric:lining-nums tabular-nums;
  }
}

/* ================================================================
   CONTACT LEFT COLUMN — ENGLISH GROUP SPACING
   English only; the Korean column is approved and untouched. The
   three information groups used a 6px label-to-value gap against a
   20px group-to-group gap, which read as one crowded block. The
   label now sits 10px above its value and each completed group
   clears the next label by 27px, so the three read as distinct
   blocks. Wording, typography, sizes, colours, link and underline
   behaviour, column position, width and alignment are unchanged,
   and no spacer markup is used - only margins on the existing
   <dl> and <dt>.
   ================================================================ */
@media (min-width:1120px){
  html[lang="en"] body.executive-editorial-master #contact .contact-detail{
    margin-bottom:27px;
  }
  html[lang="en"] body.executive-editorial-master #contact .contact-detail dt{
    margin-bottom:10px;
  }

  /* ENGLISH "(Optional)" — 12px -> 13px beside the 17px field label.
     Family, weight, colour, opacity, parentheses, tracking, case,
     baseline alignment and horizontal spacing are all untouched, and
     the Korean "(선택사항)" is not reachable by this selector. */
  html[lang="en"] body.executive-editorial-master #contact .field-optional{
    font-size:13px;
  }
}

/* ================================================================
   FOOTER — EXECUTIVE SANS (Option 1)
   Genuine Nimbus Sans Regular, self-hosted. Source:
   NimbusSans-Regular.otf from the URW Base 35 collection, repackaged
   to WOFF2 with outlines, metrics and character set unchanged; the
   license notice is at assets/fonts/licenses/Nimbus-Sans-LICENSE.txt.

   English: both the copyright and the privacy/disclaimer link.
   Korean: the copyright only - 개인정보 처리방침 및 면책고지 keeps its
   approved Korean typography. Wording, symbol, year, capitalisation,
   colour, size, placement, footer height, alignment, padding,
   background, top border, link destination, hover and focus are all
   unchanged; only the family and its 0.04em tracking are declared.
   ================================================================ */
@font-face{
  font-family:"JSK Executive Sans";
  src:url("/assets/fonts/nimbus-sans-regular.woff2") format("woff2");
  font-style:normal;
  font-weight:400;
  font-display:swap;
}

@media (min-width:1120px){
  html[lang="en"] body.executive-editorial-master footer .footer-row > span,
  html[lang="en"] body.executive-editorial-master footer .footer-row > span > a,
  html[lang="ko"] body.executive-editorial-master footer .footer-row > span:first-child{
    font-family:"JSK Executive Sans","Nimbus Sans",Arial,sans-serif;
    font-style:normal;
    font-weight:400;
    letter-spacing:0.04em;
  }
}

/* ===== inline block: en-final-refinement-v63 ===== */

/* =====================================================================
   v63 (2026-08-31) - FINAL ENGLISH DESKTOP REFINEMENT.
   Loaded after every stylesheet, so nothing here relies on !important.
   Percentages are 1.02 x each element's OWN measured desktop size, so the
   existing hierarchy is preserved; unitless line-heights and the 95%
   credential-distinction rule scale proportionally with their parents.
   ===================================================================== */

/* EN-NEW. Hero headline emphasis. "on your side" keeps the approved
   brass; "been" returns to the headline navy, matching the final
   approved English Tablet treatment. Colour only - wording, breaks,
   family, size, weight, tracking, leading and position are untouched.
   The same span exists in the aria-hidden .h1-shine mirror so the
   approved sweep continues to trace an identical glyph run. */
html[lang="en"] .hero h1 em .h1-been{color:var(--ink);}

@media (min-width:1120px){

  /* EN-1. Hero credential line - smallest visible descent that clears the
     portrait's offset shadow. Measured: the final "A" ink ran 821.0-832.8px
     against a shadow edge at 823px. position:relative moves the painted
     line only; the element keeps its box in flow, so the portrait, the
     thin divider, the hero buttons and every other hero box are unmoved. */
  html[lang="en"] body.executive-editorial-master .hero .docket-row{
    position:relative;
    top:8px;
  }

  /* EN-2A. About Counsel - three descriptive paragraphs. 20.75 -> 21.165 */
  html[lang="en"] body.executive-editorial-master #about .about-copy > p{
    font-size:21.165px;
  }

  /* EN-2B. Credential / details block, each from its own base.
     dt 15.9 -> 16.218 ; dd 17.4 -> 17.748 ; the distinction span is
     declared at 95% of dd, so it follows to 16.8606 and the school /
     distinction hierarchy is preserved exactly. */
  html[lang="en"] body.executive-editorial-master #about .credentials dt{
    font-size:16.38018px;                                 /* v64: 16.218 x 1.01 */
  }
  html[lang="en"] body.executive-editorial-master #about .credentials dd{
    font-size:17.92548px;                                 /* v64: 17.748 x 1.01; distinction 95% -> 17.029206 */
  }

  /* EN-3A / EN-3B / EN-3C size. 22 -> 22.44 */
  html[lang="en"] body.executive-editorial-master .areas-intro,
  html[lang="en"] body.executive-editorial-master .matters-intro{
    font-size:22.44px;
  }
  html[lang="en"] body.executive-editorial-master .matters-footnote{
    font-size:22.6644px;                                  /* v64: 22.44 x 1.01 */
  }

  /* EN-3C colour. Exactly six phrases take the approved Tablet V21
     Section 04 metric navy. COLOUR ONLY - no weight, family, tracking,
     leading or punctuation change; "the" before "establishment" is
     outside every span and stays in normal body treatment. */
  html[lang="en"] body.executive-editorial-master #results .matters-footnote .fn-em{
    color:#12213d;
  }
}

/* EN-4. Section 05 quotation - the approved English Tablet V21
   composition: nine clause lines plus the em dash on a line of its own
   with .28em of air above and below. Declared at the same 1000px
   breakpoint the existing .ql block rule already uses, so the two halves
   of the arrangement can never disagree. The Desktop quotation type
   scale, wording, punctuation, emphasis, colour, the left-hand
   05 / OUR APPROACH heading and the attribution are all untouched; the
   dash inherits the Desktop quotation colour rather than the Tablet gold,
   because Desktop colour is frozen. */
@media (min-width:1000px){
  html[lang="en"] .approach blockquote .ql-dash{
    display:block;
    margin:.28em 0;
    line-height:1;
  }
}

/* EN-5. "Request a Consultation" - the same white lettering glow, now
   clearly perceptible. Both locations only: the top-right navigation
   button and the button beneath the Hero. "View Experience" keeps the
   earlier value. Dimensions, placement, typography, wording, border,
   background, colour system, interaction logic and timing unchanged. */
html[lang="en"] .nav-cta:hover,
html[lang="en"] .nav-cta:focus-visible,
html[lang="en"] .hero .btn-primary:hover,
html[lang="en"] .hero .btn-primary:focus-visible{
  text-shadow:
    0 0 4px rgba(255,255,255,0.95),
    0 0 9px rgba(255,255,255,0.55),
    0 0 18px rgba(255,255,255,0.28);
}

/* EN-6. Hero statistic hover glow at 98% of its approved intensity.
   Every layer keeps its colour and radius; only the alphas are
   multiplied by 0.98. Letter colours, box, background, typography,
   spacing, border, timing, movement and layout are unchanged, and all
   four boxes share the rule. */
@media (min-width:1120px) and (hover:hover) and (pointer:fine){
  html[lang="en"] .stat:hover .stat-num{
    text-shadow:
      0 0 3px rgba(255,248,220,0.882),
      0 0 8px rgba(72,113,169,0.539),
      0 0 15px rgba(185,154,92,0.4116);
  }
  html[lang="en"] .stat:hover .stat-label{
    text-shadow:
      0 0 3px rgba(255,235,166,0.882),
      0 0 8px rgba(210,156,42,0.5684),
      0 0 14px rgba(176,118,8,0.3332);
  }
}

/* =====================================================================
   v64 (2026-08-31) - ENGLISH DESKTOP MICRO-REFINEMENT.
   Additive only. Three v63 values above were superseded in place rather
   than re-declared, so no selector is written twice.
   ===================================================================== */
@media (min-width:1120px){

  /* EN-1. Hero industry line 22.75 -> 22.9775 (101%).
     CORE SECTOR EXPERIENCE (.sector-label, 22.75px) is a separate
     element, is not referenced here, and is unchanged. */
  html[lang="en"] body.executive-editorial-master .hero .sector-list{
    font-size:22.9775px;
  }

  /* EN-3. Name / title block - hairline descent, no size change.
     Measured: the name's ink began 2.0px below the portrait's offset
     shadow edge. +2px lands it at 4px, matching the Korean side.
     position:relative moves the painted block as one unit; the caption
     keeps its box in flow, so the video, its frame, the credentials
     below and all section spacing are unmoved, and the two lines keep
     their existing relationship. */
  html[lang="en"] body.executive-editorial-master #about .portrait-caption{
    position:relative;
    top:2px;
  }

  /* EN-5. Section 06 left column, each from its own base.
     06 / GET IN TOUCH and the Request a Consultation heading are not
     referenced and are unchanged. */
  html[lang="en"] body.executive-editorial-master #contact .contact-copy > p{
    font-size:19.19px;                                    /* 19    */
  }
  html[lang="en"] body.executive-editorial-master #contact .contact-detail dt{
    font-size:17.17px;                                    /* 17    */
  }
  html[lang="en"] body.executive-editorial-master #contact .contact-detail dd{
    font-size:19.19px;                                    /* 19    */
  }

  /* EN-6. Only the words of the matter label rise to 101%; the
     required-field asterisk is restated at its own current 17px so it
     is provably unchanged. No other form label is referenced, and the
     submit button keeps its size. */
  html[lang="en"] body.executive-editorial-master #contact .field label[for="matter"]{
    font-size:17.17px;
  }
  html[lang="en"] body.executive-editorial-master #contact .field label[for="matter"] .field-required{
    font-size:17px;
  }
}

/* ===== inline block: en-statistics-centering-v65 ===== */

/* =====================================================================
   JSK DESKTOP MASTER — ENGLISH STATISTICS: CENTRE THE FOUR LARGE VALUES
   ---------------------------------------------------------------------
   The four large statistic values (25+, $50B+, 9, U.S. x Korea) are
   centred horizontally inside their own existing statistic columns.

   The left alignment they currently inherit comes from the desktop
   master rule  body.executive-editorial-master .hero .stat{text-align:left}
   in executive-editorial.css @media (min-width:1120px). This block is
   scoped to exactly that breakpoint and to .stat-num only, so:

     - the descriptive .stat-label keeps its approved left alignment;
     - column widths, padding, dividers and band geometry are untouched;
     - typography, colour, opacity and vertical position are untouched;
     - no tablet or mobile breakpoint is affected.

   Alignment only. No !important, no JavaScript, no shared-stylesheet edit.
   ===================================================================== */
@media (min-width:1120px){
  html[lang="en"] body.executive-editorial-master .hero .stats .stat-num{
    text-align:center;
  }
}

/* ===== inline block: en-statistics-supporting-copy-centre-v67 ===== */

/* =====================================================================
   JSK DESKTOP MASTER — ENGLISH STATISTICS: CENTRE THE SUPPORTING COPY
   ---------------------------------------------------------------------
   Benchmarked against the final Tablet statistics band, where .stat
   carries text-align:center and .stat-label adds no override, so the
   supporting text itself reads centred under the centred figure.

   Desktop reaches the same result with one declaration. The label keeps
   its existing measure (max-width:26ch) and its existing auto side
   margins, so the rendered line breaks are unchanged; only the lines
   inside it move from the left edge to the centre. Wording, font
   family, size, weight, uppercase treatment, tracking, line-height,
   colour, opacity, top margin, column widths, padding, dividers and
   band geometry are untouched, as are the four large gold values.

   Scoped to the >=1120px desktop master, where the left alignment
   originates, so no tablet or mobile behaviour is affected. No
   !important, no markup change, no shared-stylesheet edit.
   ===================================================================== */
@media (min-width:1120px){
  html[lang="en"] body.executive-editorial-master .hero .stats .stat-label{
    text-align:center;
  }
}