/* home-ko.css — the approved Korean homepage cascade, reproduced in the exact order
   site/ko.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: ko-approved-typography-v41 ===== */

/* ===========================================================
   V41 — Korean-only approved typography refinements.
   Every selector is qualified html[lang="ko"], so nothing here
   can reach index.html or any English/legal page. Loaded after
   tokens.css / site.css / restore.css, so equal-specificity
   declarations win by source order. Only the properties listed
   in each rule change; colours, geometry, spacing, borders,
   illumination, animation and behaviour are inherited unchanged.
   =========================================================== */

/* --- A. Desktop header navigation (>=861px only; .mobile-menu nav
       is untouched). Noto Sans KR 500 / 0.035em replaces the
       IBM Plex Mono-first stack. Only the gap BETWEEN the five
       categories widens; word-spacing returns to normal because the
       -3px value existed solely to close IBM Plex Mono's wide word
       space, which Noto Sans KR does not have. Size, colour, height,
       alignment, hover, focus and the 861/860 breakpoint are
       unchanged. --- */
@media (min-width:861px){
  html[lang="ko"] header .nav-links{
    font-family:'Noto Sans KR', Arial, Helvetica, sans-serif;
    font-weight:500;
    letter-spacing:0.035em;
    gap:clamp(26px, 3.0vw, 44px);
  }
  html[lang="ko"] header .nav-links a{ word-spacing:normal; }
}

/* --- B. Hero headline — REF-01, Option 2 High-Contrast Serif.
       Two semantic .h1-line blocks give exactly two centred lines on
       desktop; the gold <em> phrase is held together at >=861px. The
       Korean desktop size is set so the longer second line fits the
       840px .caption measure on one line without clipping or
       overflow; below 861px the clamp is released so the headline
       wraps naturally. The aria-hidden .h1-shine mirror carries the
       identical markup, so the sweep tracks the visible text. --- */
html[lang="ko"] .hero h1{
  font-family:'Noto Serif KR', 'Noto Serif', serif;
  font-weight:600;
  font-size:clamp(32px, 4.1vw, 38.5px);
}
html[lang="ko"] .hero h1 .h1-line{ display:block; }
@media (min-width:861px){
  html[lang="ko"] .hero h1 em{ white-space:nowrap; }
}

/* --- C. Hero introductory paragraphs — REF-02, Option 6
       High-Contrast Korean Serif. Family only; the 20px size,
       1.85 Korean leading, 680px measure, colour and the restrained
       600-weight emphasis on the three institution names are all
       preserved. --- */
html[lang="ko"] .dek{ font-family:'Noto Serif KR', 'Noto Serif', serif; }

/* --- D. Hero identity line — REF-03, Option 1 Airy Noto Sans KR.
       Natural Korean spacing, no mono-first rendering and no
       artificial character separation. The three items use the
       existing bullet separator mechanism at >=861px; below that the
       row keeps its existing stacked layout, so narrow screens wrap
       cleanly with no overflow. --- */
html[lang="ko"] .docket-row{
  font-family:'Noto Sans KR', Arial, Helvetica, sans-serif;
  font-weight:500;
  letter-spacing:0.01em;
}
@media (min-width:861px){
  html[lang="ko"] .hero .docket-row{ justify-content:center; gap:0; }
  html[lang="ko"] .hero .docket-row span + span::before{
    content:"\2022"; margin:0 0.72em;
  }
}

/* --- E. Core Industry panel — REF-04, Option 6 Full Premium Serif.
       Family only; colours, weights, separators, background,
       geometry, spacing and the P4 illumination are preserved. --- */
html[lang="ko"] .sector-label,
html[lang="ko"] .sector-list{ font-family:'Noto Serif KR', 'Noto Serif', serif; }

/* --- F. Portrait caption and Credentials — REF-05, Option 6 Strong
       Premium Serif. Latin-tuned tracking on the Korean label text is
       eased; sizes, colours and the credential grid are unchanged. --- */
html[lang="ko"] .portrait-caption .name{
  font-family:'Noto Serif KR', 'Noto Serif', serif; font-weight:600;
}
html[lang="ko"] .portrait-caption .role{
  font-family:'Noto Serif KR', 'Noto Serif', serif; font-weight:600; letter-spacing:0.02em;
}
html[lang="ko"] .credential dt{
  font-family:'Noto Serif KR', 'Noto Serif', serif; font-weight:600; letter-spacing:0.02em;
}
html[lang="ko"] .credential dd{
  font-family:'Noto Serif KR', 'Noto Serif', serif; font-weight:400;
}

/* --- G. About Counsel — REF-06, Option 2 Full Editorial Serif.
       Heading ~600, narrative prose normal 400. Wording, paragraph
       structure, measure, leading and the approved institution-name
       emphasis are untouched. --- */
html[lang="ko"] #about h2.section-label{
  font-family:'Noto Serif KR', 'Noto Serif', serif; font-weight:600;
}
html[lang="ko"] .about-copy p{
  font-family:'Noto Serif KR', 'Noto Serif', serif; font-weight:400;
}

/* --- H. Career — REF-06, Option 2 Full Editorial Serif throughout.
       .tl-org-detail carries no rule in the shared stylesheets, so the
       nested second line is given its block display, restrained 500
       weight and controlled gap here. Row geometry, dividers and the
       P6 heading illumination are unchanged; .tl-desc prose is uniform
       normal weight and colour after the embedded <strong> wrappers
       were removed from the markup. --- */
html[lang="ko"] #experience .section-label{
  font-family:'Noto Serif KR', 'Noto Serif', serif; font-weight:600;
}
html[lang="ko"] #experience .section-title{
  font-family:'Noto Serif KR', 'Noto Serif', serif; font-weight:600;
}
html[lang="ko"] #experience .tl-org{
  font-family:'Noto Serif KR', 'Noto Serif', serif; font-weight:600;
}
html[lang="ko"] #experience .tl-org .tl-org-detail{
  display:block;
  margin-top:6px;
  font-size:0.85em;
  font-weight:500;
  line-height:1.45;
  color:var(--ink);
}
html[lang="ko"] #experience .tl-desc{
  font-family:'Noto Serif KR', 'Noto Serif', serif; font-weight:400;
}

/* --- I. Practice Areas. REF-07 (Option 6 Strong Premium Serif)
       governs the 업무 분야 label, the introduction and the
       상담하기 → links; REF-06 (Option 2 Full Editorial Serif)
       governs the section title, the six headings and their prose.
       .card-subtitle carries no rule in the shared stylesheets, so the
       bilingual second line is defined here at ~70% of the Korean
       heading, same navy, lighter weight, small controlled gap, held
       to one line. --- */
html[lang="ko"] #practice .section-label{
  font-family:'Noto Serif KR', 'Noto Serif', serif; font-weight:700;
}
html[lang="ko"] .areas-intro{
  font-family:'Noto Serif KR', 'Noto Serif', serif; font-weight:400;
}
html[lang="ko"] #practice .section-title{
  font-family:'Noto Serif KR', 'Noto Serif', serif; font-weight:600;
}
html[lang="ko"] .area-card h3{
  font-family:'Noto Serif KR', 'Noto Serif', serif; font-weight:600;
}
html[lang="ko"] .area-card h3 .card-subtitle{
  display:block;
  margin-top:6px;
  font-size:0.7em;
  font-weight:400;
  line-height:1.35;
  letter-spacing:0.01em;
  color:var(--ink);
  white-space:nowrap;
}
html[lang="ko"] .area-card p{
  font-family:'Noto Serif KR', 'Noto Serif', serif; font-weight:400;
}
/* 상담하기 → : ~90% of the adjacent 19px card prose. Gold colour,
   underline, arrow, hover, focus, spacing, destination and the hidden
   practice_area behaviour are all inherited unchanged. */
html[lang="ko"] .area-card .area-link{
  font-family:'Noto Serif KR', 'Noto Serif', serif;
  font-weight:600;
  font-size:17px;
  letter-spacing:0.02em;
}

/* --- J. Both consultation panels — REF-09, Option 2 Full Editorial
       Serif. Scoped to .areas-cta / .matters-cta and their OWN
       .btn-primary, so the hero buttons and the header consultation
       button are untouched. Panel geometry, background, border,
       colours, spacing, hover and destination are unchanged. --- */
html[lang="ko"] .areas-cta-title,
html[lang="ko"] .matters-cta-title{
  font-family:'Noto Serif KR', 'Noto Serif', serif; font-weight:600;
}
html[lang="ko"] .areas-cta p,
html[lang="ko"] .matters-cta p{
  font-family:'Noto Serif KR', 'Noto Serif', serif; font-weight:400;
}
html[lang="ko"] .areas-cta .btn-primary,
html[lang="ko"] .matters-cta .btn-primary{
  font-family:'Noto Serif KR', 'Noto Serif', serif;
  font-weight:500;
  letter-spacing:0.02em;
}

/* --- K. Results — REF-08, Option 6 Strong Premium Serif throughout.
       Description prose stays uniform normal weight and colour after
       the embedded <strong> wrappers were removed from the markup.
       The Fraunces numeric-metric treatment is deliberately not
       overridden, so the approved metric hierarchy is preserved. --- */
html[lang="ko"] #results .section-label{
  font-family:'Noto Serif KR', 'Noto Serif', serif; font-weight:700;
}
html[lang="ko"] #results .section-title{
  font-family:'Noto Serif KR', 'Noto Serif', serif; font-weight:600;
}
html[lang="ko"] .matters-intro{
  font-family:'Noto Serif KR', 'Noto Serif', serif; font-weight:400;
}
html[lang="ko"] .matters-group-label{
  font-family:'Noto Serif KR', 'Noto Serif', serif; font-weight:700;
}
html[lang="ko"] .matter-item .matter-cat{
  font-family:'Noto Serif KR', 'Noto Serif', serif; font-weight:600;
}
html[lang="ko"] .matter-item h3{
  font-family:'Noto Serif KR', 'Noto Serif', serif; font-weight:600;
}
html[lang="ko"] .matter-item p{
  font-family:'Noto Serif KR', 'Noto Serif', serif; font-weight:400;
}
html[lang="ko"] .matters-footnote{
  font-family:'Noto Serif KR', 'Noto Serif', serif; font-weight:400;
}

/* --- L. Our Approach. REF-11 (Option 6 Strong Premium Serif)
       governs the 자문 원칙 label ONLY; REF-10 (Option 2 Full
       Editorial Serif) governs the quotation, its restrained
       concluding emphasis and the attribution. The quote keeps its
       normal 400 weight — the heavier Option 6 treatment is not
       applied to it. Quote structure, breaks, colours, 1.72 Korean
       leading and the P8 illumination are unchanged. --- */
html[lang="ko"] #approach .section-label{
  font-family:'Noto Serif KR', 'Noto Serif', serif; font-weight:600; letter-spacing:0.02em;
}
html[lang="ko"] .approach blockquote{
  font-family:'Noto Serif KR', 'Noto Serif', serif; font-weight:400;
}
html[lang="ko"] .approach blockquote .quote-strong{ font-weight:500; }
html[lang="ko"] .approach cite{
  font-family:'Noto Serif KR', 'Noto Serif', serif; font-weight:600;
}

/* --- M. Contact — REF-12, Option 2 Full Editorial Serif for the
       visible Korean contact typography only. Scoped to #contact and
       its own .submit-btn. Wording, phone number, email address, form
       fields, required/optional status, validation, accessibility
       attributes, form names, hidden values, action/method and the
       submission destination are all untouched; the status and error
       messages keep their existing treatment. --- */
html[lang="ko"] #contact .section-label{
  font-family:'Noto Serif KR', 'Noto Serif', serif; font-weight:500; letter-spacing:0.02em;
}
html[lang="ko"] #contact .section-title{
  font-family:'Noto Serif KR', 'Noto Serif', serif; font-weight:600;
}
html[lang="ko"] #contact .contact-copy p{
  font-family:'Noto Serif KR', 'Noto Serif', serif; font-weight:400;
}
html[lang="ko"] #contact .contact-detail dt{
  font-family:'Noto Serif KR', 'Noto Serif', serif; font-weight:500; letter-spacing:0.02em;
}
html[lang="ko"] #contact .contact-detail dd{
  font-family:'Noto Serif KR', 'Noto Serif', serif; font-weight:400;
}
html[lang="ko"] #contact .field label{
  font-family:'Noto Serif KR', 'Noto Serif', serif; font-weight:500; letter-spacing:0.02em;
}
html[lang="ko"] #contact .field input,
html[lang="ko"] #contact .field textarea{
  font-family:'Noto Serif KR', 'Noto Serif', serif;
}
html[lang="ko"] #contact .submit-btn{
  font-family:'Noto Serif KR', 'Noto Serif', serif; font-weight:500; letter-spacing:0.02em;
}

/* ===== inline block: ko-approved-refinements-v42 ===== */

/* ===========================================================
   V42 — Korean-only approved refinements, layered after the V41
   block. Every selector is qualified html[lang="ko"], so nothing
   here can reach index.html or any English/legal page. No new
   font, no external request, no new dependency: every family
   named below is already loaded by V41. Equal-specificity
   declarations win over the V41 block by source order.
   =========================================================== */

/* ---------- ITEM 1 / 6.2 — header text (logo untouched) ---------- */
/* The five nav labels, EN | KO and the header 상담 요청 button grow
   ~16%. The logo <img> is not referenced anywhere in this block, so
   its intrinsic size, position, colour and quality are unchanged;
   only the surrounding row breathes. Word-spacing inside each Korean
   label is not touched. The 861/860 breakpoint and the entire
   .mobile-menu are untouched. */
@media (min-width:861px){
  html[lang="ko"] header .nav{ padding:20px 32px; }
  html[lang="ko"] header .nav-links{
    gap:clamp(20px, 2.6vw, 42px);
    font-size:18.5px;                       /* 16 -> 18.5  (+15.6%) */
  }
  html[lang="ko"] header .nav-links a{ font-size:18.5px; }
  html[lang="ko"] header .nav-right .lang-switch{ font-size:18.5px; }
  html[lang="ko"] header .nav-right .lang-switch a{ font-size:18.5px; }
  html[lang="ko"] header .nav-cta{
    font-size:16.5px;                       /* 14 -> 16.5  (+17.9%) */
    padding:12px 22px;
  }
}

/* ---------- ITEM 1 / 6.3 — hero credential line ---------- */
/* 전(前) 최고법무책임자 · 전(前) 글로벌 법무팀장 — wording,
   punctuation, separator, gold colour, centring and the V36/V37
   credential-stagger illumination are all inherited unchanged. */
html[lang="ko"] .hero .eyebrow{ font-size:18.5px; }   /* 16 -> 18.5 (+15.6%) */

/* ---------- ITEM 1 / 6.4 + ITEM 2 — hero headline ---------- */
/* Cap raised 38.5 -> 43px (+11.7%). Measured line 2 is 858.5px at
   43px, so the central caption is widened 840 -> 890px to hold it as
   one line; the gold <em> phrase keeps the V41 nowrap at >=861px.
   Below 939px viewport the 4.1vw term is still under the old cap, so
   nothing changes there. */
html[lang="ko"] .hero h1{ font-size:clamp(32px, 4.1vw, 43px); }
@media (min-width:861px){
  html[lang="ko"] .hero .caption{ max-width:890px; }
}
/* ITEM 2 — breathing space between the two headline lines. Applied as
   a margin on the SECOND semantic line only, not as a blanket
   line-height change, so intra-line Korean leading is untouched. The
   selector matches inside the visible headline AND inside the
   aria-hidden .h1-shine duplicate, so both stay geometrically
   identical. 0.23em = 9.9px at the 43px desktop size. */
html[lang="ko"] .hero h1 .h1-line + .h1-line{ margin-top:0.23em; }

/* ---------- ITEM 1 / 6.5 — hero introductory paragraphs ---------- */
/* 20 -> 23px (+15%). The 1.85 Korean line-height ratio set in v27 is
   unitless and follows the new size automatically (37 -> 42.6px).
   Measure widened 680 -> 750px so the longer lines do not become
   short and choppy; wording, breaks and the 600-weight institution
   emphasis are untouched. */
html[lang="ko"] .hero .dek{
  font-size:23px;
  max-width:750px;
  margin-top:32px;                          /* 28 -> 32 */
}

/* ---------- ITEM 1 / 6.6 — hero identity line ---------- */
html[lang="ko"] .hero .docket-row{ font-size:17.25px; }  /* 15 -> 17.25 (+15%) */

/* ---------- ITEM 1 / 6.7 — hero buttons ---------- */
/* 상담 요청 / 주요 경력 보기. Padding grows with the text so the
   label stays optically centred. Colours, borders, hover, focus,
   destinations and the primary/secondary relationship are inherited
   unchanged. */
html[lang="ko"] .hero .hero-actions .btn-primary,
html[lang="ko"] .hero .hero-actions .btn-secondary{
  font-size:17.4px;                         /* 15 -> 17.4 (+16%) */
  padding:19px 36px;                        /* 17px 32px */
}
html[lang="ko"] .hero .hero-actions{ margin-top:48px; }   /* 44 -> 48 */

/* ---------- ITEM 1 / 6.8 — statistics row ---------- */
html[lang="ko"] .hero .stats .stat-num{
  font-size:37.5px;                         /* 34 -> 37.5 (+10.3%) */
  margin-bottom:4px;
}
html[lang="ko"] .hero .stats .stat-label{
  font-size:15.5px;                         /* 13.5 -> 15.5 (+14.8%) */
}
html[lang="ko"] .hero .stats .stat{ padding:30px 24px; }  /* 26px 20px */

/* ---------- ITEM 1 / 6.9 — Core Industry panel ---------- */
html[lang="ko"] .hero .sector-block{ padding:46px 32px 38px; }  /* 40/32/32 */
html[lang="ko"] .hero .sector-label{
  font-size:23px;                           /* 20 -> 23 (+15%) */
  margin-bottom:20px;                       /* 16 -> 20 */
}
html[lang="ko"] .hero .sector-list{ font-size:23px; }      /* separators inherit */

/* ---------- ITEM 3 — credentials / education / qualification ---------- */
/* Gold labels and the portrait role line +8.6%; navy value lines +9%.
   The 2x2 column structure, alignment, gold/navy relationship,
   portrait geometry, portrait video, play behaviour and controls are
   all unchanged — the portrait is neither enlarged nor moved. */
html[lang="ko"] .portrait-caption .role{ font-size:15.75px; }  /* 14.5 -> 15.75 */
html[lang="ko"] .credentials{
  column-gap:16px;                          /* 18 -> 16 */
  row-gap:26px;                             /* 18 -> 26, education | qualification */
  margin-top:32px;                          /* 28 -> 32 */
}
html[lang="ko"] .credential dt{
  font-size:15.75px;                        /* 14.5 -> 15.75 (+8.6%) */
  margin-bottom:6px;                        /* 5 -> 6, label to value */
}
html[lang="ko"] .credential dd{ font-size:17.4px; }   /* 16 -> 17.4 (+8.8%) */
/* The measured intrinsic width of "American Jurisprudence Award 수상"
   is 308.2px at 17.4px, which does not fit a 2 x 283.6px split. The
   two columns are rebalanced 1.15fr / 0.85fr so the long education
   values stay on one line at desktop; the shorter right-hand column
   (Phi Beta Kappa 회원 / 한국어·영어, max 170px) keeps ample room. */
@media (min-width:1120px){
  html[lang="ko"] .credentials{ grid-template-columns:1.15fr 0.85fr; }
}

/* ---------- ITEM 4 — Career heading pair hover illumination ---------- */
/* The two lines of each pair live in ONE <h3 class="tl-org">, with the
   second line in .tl-org-detail. The V41 block gives that span an
   explicit color:var(--ink) at specificity (0,3,1), which out-ranks
   the P6 hover rule .tl-row:hover .tl-org (0,2,1) — so on hover the
   first line turned gold while the second stayed navy. Restating the
   hover colour at (0,4,1) makes both lines illuminate together at
   identical strength. text-shadow is inherited from the h3, and the
   px blur radii are absolute, so the glow on both lines is literally
   the same. Only the heading pair is affected: .tl-desc body prose,
   single-line headings and every other section are untouched, and the
   hover target, colour family, timing and transition are the existing
   P6 ones. */
@media (hover:hover) and (pointer:fine){
  html[lang="ko"] #experience .tl-row:hover .tl-org .tl-org-detail,
  html[lang="ko"] #experience .tl-row:focus-within .tl-org .tl-org-detail{
    color:#b77d08;
  }
}
/* Focus-visible parity for keyboard users on any focusable descendant;
   no tabindex is added, so keyboard behaviour is unchanged. */
html[lang="ko"] #experience .tl-org .tl-org-detail{
  transition:color .18s ease-out, text-shadow .18s ease-out;
}

/* ---------- ITEM 5 — both consultation-panel 상담 요청 buttons ---------- */
/* Scoped to .areas-cta / .matters-cta and their OWN .btn-primary, so
   the header .nav-cta, the hero buttons and the Contact .submit-btn
   are all out of reach. Navy background, white text, border, hover,
   destination, click area and accessibility are inherited unchanged. */
html[lang="ko"] .areas-cta .btn-primary,
html[lang="ko"] .matters-cta .btn-primary{
  font-size:19px;                           /* 15 -> 19, the stated target */
  min-height:56px;                          /* 50 -> 56 */
  padding:0 38px;                           /* 0 32 */
}

/* ---------- ITEM 6 — Contact heading balance ---------- */
/* 문의 20 -> 25.5px (+27.5%); 상담 요청 44 -> 39.5px (-10.2%).
   Ratio 25.5 / 39.5 = 64.6%, the closest harmonious pair to the
   approved 65-70% target that still keeps 상담 요청 clearly primary.
   Gold 문의, light 상담 요청, navy background, left alignment,
   wording and structure are unchanged. */
html[lang="ko"] #contact .section-label{
  font-size:25.5px;
  margin-bottom:14px;                       /* 12 -> 14 */
}
html[lang="ko"] #contact .section-title{ font-size:39.5px; }
html[lang="ko"] #contact .section-head{ margin-bottom:60px; }  /* 56 -> 60 */

/* ---------- ITEM 6B — Contact submit button ---------- */
/* Scoped to #contact .submit-btn only. Gold background, navy text,
   hover, form action, validation, submission behaviour, field
   structure, accessibility and placement are inherited unchanged. */
html[lang="ko"] #contact .submit-btn{
  font-size:17px;                           /* 15 -> 17 (+13.3%) */
  padding:17.5px 46px;                      /* 16px 42px (+9.4% / +9.5%) */
}

/* ---------- RESIDUAL RESPONSIVE (Korean tablet and phone) ---------- */
/* The approved desktop hierarchy and the relative enlargement intent
   are kept; only the amounts are eased so nothing clips, crowds,
   overlaps or overflows. Text is never returned to its old undersized
   appearance, and the desktop two-line hero is not forced where the
   viewport cannot carry it. */
/* Below 1120px the shared stylesheet's own .credentials tracks apply
   unchanged (equal columns at desktop, single column on phones), so the
   1.15fr rebalance above is deliberately not carried down. The long
   education value is eased slightly in the 861-1119 band so it keeps
   the same line count it had in v41. */
@media (min-width:861px) and (max-width:1119px){
  html[lang="ko"] .credential dd{ font-size:16.8px; }
}
/* Statistics stay four balanced cells at the narrow end of desktop. */
@media (min-width:861px) and (max-width:1023px){
  html[lang="ko"] .hero .stats .stat{ padding:28px 14px; }
  html[lang="ko"] .hero .stats .stat-label{ font-size:14.5px; }
}
@media (max-width:860px){
  html[lang="ko"] .hero .dek{ font-size:21px; margin-top:28px; }
  html[lang="ko"] .hero .docket-row{ font-size:16px; }
  html[lang="ko"] .hero .hero-actions .btn-primary,
  html[lang="ko"] .hero .hero-actions .btn-secondary{
    font-size:16.5px; padding:17px 28px;
  }
  html[lang="ko"] .hero .eyebrow{ font-size:17px; }
  html[lang="ko"] .hero .stats .stat-num{ font-size:32px; }
  html[lang="ko"] .hero .stats .stat-label{ font-size:14.5px; }
  html[lang="ko"] .hero .sector-label,
  html[lang="ko"] .hero .sector-list{ font-size:20.5px; }
  html[lang="ko"] .credentials{ row-gap:22px; }
  html[lang="ko"] .credential dd{ font-size:17px; }
  html[lang="ko"] .areas-cta .btn-primary,
  html[lang="ko"] .matters-cta .btn-primary{ font-size:17px; padding:0 30px; }
  html[lang="ko"] #contact .section-label{ font-size:22px; }
  html[lang="ko"] #contact .section-title{ font-size:34px; }
  html[lang="ko"] #contact .submit-btn{ font-size:16px; padding:16px 36px; }
}
@media (max-width:560px){
  html[lang="ko"] .hero .dek{ font-size:19.5px; }
  html[lang="ko"] .hero .eyebrow{ font-size:15.5px; }
  html[lang="ko"] .hero .docket-row{ font-size:15px; }
  html[lang="ko"] .hero .stats .stat-num{ font-size:28px; }
  html[lang="ko"] .hero .stats .stat-label{ font-size:13.5px; }
  html[lang="ko"] .hero .sector-label,
  html[lang="ko"] .hero .sector-list{ font-size:18.5px; }
  html[lang="ko"] .hero .hero-actions .btn-primary,
  html[lang="ko"] .hero .hero-actions .btn-secondary{
    font-size:15.5px; padding:16px 20px;
  }
  html[lang="ko"] .credential dd{ font-size:16.5px; }
  html[lang="ko"] .credential dt{ font-size:15px; }
  html[lang="ko"] .areas-cta .btn-primary,
  html[lang="ko"] .matters-cta .btn-primary{ font-size:16px; min-height:52px; padding:0 20px; }
  html[lang="ko"] #contact .section-label{ font-size:20px; }
  html[lang="ko"] #contact .section-title{ font-size:29px; }
  html[lang="ko"] #contact .submit-btn{ font-size:15.5px; padding:15px 26px; }
}
@media (max-width:360px){
  html[lang="ko"] .hero .dek{ font-size:18.5px; }
  html[lang="ko"] .hero .stats .stat-num{ font-size:25px; }
  html[lang="ko"] .hero .sector-label,
  html[lang="ko"] .hero .sector-list{ font-size:17.5px; }
  html[lang="ko"] .hero .hero-actions .btn-primary,
  html[lang="ko"] .hero .hero-actions .btn-secondary{ font-size:15px; padding:15px 12px; }
  html[lang="ko"] .areas-cta .btn-primary,
  html[lang="ko"] .matters-cta .btn-primary{ font-size:15px; padding:0 12px; }
  html[lang="ko"] #contact .section-label{ font-size:18.5px; }
  html[lang="ko"] #contact .section-title{ font-size:26px; }
  html[lang="ko"] #contact .submit-btn{ font-size:15px; padding:14px 18px; }
}

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

/* =====================================================================
   v44 (2026-07-31) — approved KOREAN Practice Areas heading-hover
   refinement. Layered after the v41 typography and v42 refinement
   blocks so it cleanly supersedes the earlier .18s Practice Areas
   transition and the v41 subtitle colour.

   Identical timing and identical illuminated appearance to the English
   page. Scope: #practice .area-card headings and the nested bilingual
   subtitle only. Resting colour, font, size, spacing, wording and
   position of the subtitle are untouched. No !important.
   ===================================================================== */

/* Transition — the Korean heading and its nested English subtitle are
   given the same explicit properties, the same 110ms ease-out, and the
   same 0ms delay, so they begin and complete together. */
html[lang="ko"] #practice .area-card h3,
html[lang="ko"] #practice .area-card h3 .card-subtitle{
  transition:
    color 110ms ease-out 0ms,
    text-shadow 110ms ease-out 0ms;
}

/* Pointer activation from ANY part of the individual card — heading,
   subtitle, body prose, blank interior space, the 상담하기 wording or
   its arrow. State lives on the parent .area-card, so movement among
   child elements never restarts or flickers. Same hover gate as the
   English page, so touch devices gain no sticky hover.

   The subtitle carries its own resting `color:var(--ink)` at (0,3,2)
   from the v41 block, which out-specified the shared card-hover rule
   and left it navy while the heading turned gold. Restating the
   illuminated colour here at (1,4,2) resolves that — the whole heading
   now responds as one heading. */
@media (hover:hover) and (pointer:fine){
  html[lang="ko"] #practice .area-card:hover h3,
  html[lang="ko"] #practice .area-card:hover h3 .card-subtitle{
    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. */
html[lang="ko"] #practice .area-card:focus-within h3,
html[lang="ko"] #practice .area-card:focus-within h3 .card-subtitle{
  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, immediate. */
@media (prefers-reduced-motion: reduce){
  html[lang="ko"] #practice .area-card h3,
  html[lang="ko"] #practice .area-card h3 .card-subtitle{
    transition-duration:0s;
    transition-delay:0s;
  }
}

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

/* =====================================================================
   v47 (2026-08-04) — approved KOREAN desktop corrections C and D.
   Korean only (every selector is prefixed html[lang="ko"] and the block
   lives in ko.html). Every visual change sits inside
   @media (min-width:1120px); the single baseline declaration outside it
   only keeps the newly added hover label out of sight below 1120px,
   where it did not exist in v46. Appended after the v41, v42 and v44
   blocks; none of them is edited. No !important anywhere.
   ===================================================================== */

/* Baseline for the new label markup: invisible everywhere until the
   full-desktop rules below switch it on. This is the only declaration
   outside the desktop media query, and it restores the exact v46
   tablet and mobile appearance, in which no label existed. */
html[lang="ko"] .about-portrait .portrait-watch-label{display:none;}

@media (min-width:1120px){

  /* ---- C. 자문 원칙 SECTION -----------------------------------------
     Top padding only: 88px to 40px. padding-bottom is deliberately not
     written here, so the space below "— 김세철" and the position of the
     navy Contact section are exactly as they were in v46. */
  html[lang="ko"] #approach{padding-top:40px;}

  /* The three groups become blocks so the space between them can be a
     measured 22px instead of a full blank line, and only the four
     direct <br> children of this one blockquote are suppressed. Every
     Korean character, the punctuation, the quotation marks, the strong
     emphasis, the centred alignment, the quotation width, its font size
     and the leading inside each group are untouched. Below 1120px the
     spans stay inline and the <br><br> pairs render exactly as in v46. */
  html[lang="ko"] #approach .approach blockquote .ko-quote-group{display:block;}
  html[lang="ko"] #approach .approach blockquote > br{display:none;}
  html[lang="ko"] #approach .approach blockquote .ko-quote-group-2,
  html[lang="ko"] #approach .approach blockquote .ko-quote-group-3{margin-top:22px;}

  /* Attribution size only: 19px to 21px, so the line carries its own
     weight against the quotation. Wording, the em dash, Noto Serif KR,
     weight 600, the gold colour, the centred alignment, the font style,
     the 22px above it and all spacing below it are unchanged. */
  html[lang="ko"] #approach .approach cite{font-size:21px;}

  /* ---- D. PORTRAIT PLAY CONTROL AND HOVER LABEL --------------------
     The same treatment already approved on the English portrait. The
     label and the circle sit in one non-interactive wrapper inside the
     existing button, so the portrait remains a single control with one
     accessible name and no second focusable element, and the existing
     script — which hides the trigger during playback — removes both the
     label and the circle without a line of new JavaScript. */
  html[lang="ko"] .about-portrait .portrait-cta{
    position:absolute;
    right:30px;
    bottom:30px;
    display:inline-flex;
    align-items:center;
    gap:10px;
    pointer-events:none;
  }
  html[lang="ko"] .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="ko"] .about-portrait .portrait-trigger:hover .portrait-play,
  html[lang="ko"] .about-portrait .portrait-trigger:focus-visible .portrait-play{
    transform:scale(1.04);
  }
  html[lang="ko"] .about-portrait .portrait-watch-label{
    display:inline-block;
    font-family:
      "Noto Sans KR",
      "Noto Sans",
      Arial,
      Helvetica,
      sans-serif;
    font-size:13px;
    font-weight:600;
    letter-spacing:0.02em;
    line-height:1;
    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;
  }
  /* Revealed by the cursor entering any part of the portrait, never by
     pointing at the circle alone. */
  @media (hover:hover) and (pointer:fine){
    html[lang="ko"] .about-portrait .portrait-trigger:hover .portrait-watch-label{
      opacity:1;
      visibility:visible;
      transform:translateX(0);
    }
  }
  html[lang="ko"] .about-portrait .portrait-trigger:focus-visible .portrait-watch-label{
    opacity:1;
    visibility:visible;
    transform:translateX(0);
  }
  /* Touch and other coarse pointers: no text label and no sticky hover;
     the 46px circle and its 30px inset are kept. */
  @media (hover:none),(pointer:coarse){
    html[lang="ko"] .about-portrait .portrait-watch-label{display:none;}
  }
  /* Reduced motion: the same final hover and focus appearance, applied
     immediately, with the slide and the scale removed. The label itself
     is not removed from keyboard focus. */
  @media (prefers-reduced-motion:reduce){
    html[lang="ko"] .about-portrait .portrait-watch-label{
      transition:none;
      transform:none;
    }
    html[lang="ko"] .about-portrait .portrait-trigger:hover .portrait-watch-label,
    html[lang="ko"] .about-portrait .portrait-trigger:focus-visible .portrait-watch-label{
      transform:none;
    }
    html[lang="ko"] .about-portrait .portrait-trigger:hover .portrait-play,
    html[lang="ko"] .about-portrait .portrait-trigger:focus-visible .portrait-play{
      transform:none;
    }
  }
}

/* ===== inline block: ko-desktop-refinements-v48 ===== */

/* ===========================================================
   V48 — three approved Korean DESKTOP refinements.

   Every visual rule lives inside @media (min-width:1120px) and
   every selector is scoped to html[lang="ko"], so English at all
   widths and Korean at 1119px and below are untouched. No
   !important; no shared-stylesheet edits; the v41, v42, v44 and
   v47 blocks above are unmodified.
   =========================================================== */

@media (min-width:1120px){

  /* ---------- A — Option 13 Korean button typography ---------- */
  /* Noto Serif CJK KR Regular on the Korean desktop buttons whose
     complete visible label is 상담 요청, plus the hero secondary
     주요 경력 보기. Only font-family, font-weight, font-style and
     letter-spacing change: sizes, padding, min-height, borders,
     backgrounds, colours, hover, focus, shadows, destinations and
     form behaviour are all inherited unchanged. The Contact
     section heading, status and error messages, ordinary prose and
     the Practice-Areas 상담하기 links are out of scope. */
  html[lang="ko"] header .nav-cta,
  html[lang="ko"] .hero .hero-actions .btn-primary,
  html[lang="ko"] .hero .hero-actions .btn-secondary,
  html[lang="ko"] .areas-cta .btn-primary,
  html[lang="ko"] .matters-cta .btn-primary,
  html[lang="ko"] #contact .submit-btn{
    font-family:'Noto Serif KR', 'Noto Serif', serif;
    font-weight:400;
    font-style:normal;
    letter-spacing:normal;
  }

  /* ---------- B — deliberate two-line statistic descriptions ---------- */
  /* The two approved lines in each .stat-label become blocks, so the
     break is authored rather than left to the browser. Numbers,
     wording, font families, sizes, weights, line-height, colour,
     alignment, padding, card and row geometry are unchanged. */
  html[lang="ko"] .hero .stats .stat-label-line{
    display:block;
  }

  /* ---------- C — credential distinction hierarchy ---------- */
  /* The university lines keep their existing size; the academic
     distinction lines render at 95% of that size. Nothing else in
     the credentials grid changes. */
  html[lang="ko"] .credentials .credential-distinction{
    font-size:95%;
  }

}

/* ===== inline block: ko-desktop-cta-readability-v49 ===== */

/* ===========================================================
   V49 — approved Korean DESKTOP call-to-action readability.

   Every rule sits inside @media (min-width:1120px) and every
   selector is scoped to html[lang="ko"], so English at all widths
   and Korean at 1119px and below are untouched. Option 13
   (Noto Serif KR) stays the button typeface everywhere; these
   rules only strengthen weight, colour and — where approved —
   size. No !important, no shared-stylesheet edit, no JavaScript;
   the v41, v42, v44, v47 and v48 blocks above are unmodified.
   =========================================================== */

@media (min-width:1120px){

  /* ---------- HERO BUTTONS ---------- */
  /* 상담 요청 and 주요 경력 보기 step from 17.4px to 18.5px at
     weight 600. Width, height, padding, borders, the gap between
     the two buttons, their position and the hero geometry are all
     inherited unchanged. */
  html[lang="ko"] .hero .hero-actions .btn-primary,
  html[lang="ko"] .hero .hero-actions .btn-secondary{
    font-size:18.5px;
    font-weight:600;
    font-style:normal;
    letter-spacing:normal;
  }

  /* Filled primary: white text on navy stays white, set to a clear
     solid white at rest. Background, border, hover background,
     focus treatment, destination and primary/secondary hierarchy
     are unchanged, and no glow or shadow is added. */
  html[lang="ko"] .hero .hero-actions .btn-primary{color:#ffffff;}

  /* Outlined secondary: the resting dark text deepens. Because this
     rule out-specifies the shared hover/focus colour, the white
     hover and keyboard-focus text is restored explicitly; the hover
     background and border behaviour are inherited unchanged. */
  html[lang="ko"] .hero .hero-actions .btn-secondary{color:#0f1b33;}
  html[lang="ko"] .hero .hero-actions .btn-secondary:hover,
  html[lang="ko"] .hero .hero-actions .btn-secondary:focus-visible{
    color:var(--white);
  }

  /* ---------- HEADER 상담 요청 ---------- */
  /* The visible desktop header CTA only — the child combinator keeps
     the mobile-menu copy of 상담 요청 out of reach. Size stays at
     16.5px; weight and resting colour strengthen. Dimensions,
     padding, border, position, header spacing and destination are
     unchanged, and the white hover/focus text is restored
     explicitly. */
  html[lang="ko"] header .nav-right > .nav-cta{
    font-weight:600;
    color:#0f1b33;
    font-style:normal;
    letter-spacing:normal;
  }
  html[lang="ko"] header .nav-right > .nav-cta:hover,
  html[lang="ko"] header .nav-right > .nav-cta:focus-visible{
    color:var(--white);
  }

  /* ---------- CONSULTATION-PANEL 상담 요청 ---------- */
  /* Both panel buttons stay at 19px and gain weight 600 with clear
     white text. Navy background, borders, width, min-height,
     padding, panel geometry, supporting sentences, hover, focus and
     destinations are unchanged. */
  html[lang="ko"] .areas-cta .btn-primary,
  html[lang="ko"] .matters-cta .btn-primary{
    font-weight:600;
    color:#ffffff;
    font-style:normal;
    letter-spacing:normal;
  }

  /* ---------- CONTACT SUBMIT 상담 요청 ---------- */
  /* The form's submit control only; the Contact heading with the
     same wording is untouched. 17px steps to 19px at weight 600.
     Gold background, border, colour, position, form grid, hover,
     focus, disabled state, validation, submission logic and the
     전송 중… state are unchanged.

     V54 — holding the box while the label grows. The control is
     auto-sized (width:auto, min-height:auto), so 18.5px -> 19px would
     otherwise have pushed the rendered box from 171.23 x 63 to
     173.31 x 64. Two compensations keep the box at exactly its v53
     dimensions, with the label still optically centred:
       17px vertical padding  absorbs the 1px the taller line box
                              adds, so the height stays
                              17 + 27 + 17 + 2 borders = 63px;
       44.9675px side padding absorbs the 2.08px the wider label adds,
                              so the auto width stays 171.23px.
     The label therefore stays exactly centred on both axes. Border,
     background, colour, alignment, position, hover, focus, disabled
     state, the form grid and all form behaviour are untouched. The label sits on one line with
     ~45px of clear space each side — no clipping, no wrapping. */
  html[lang="ko"] #contact .submit-btn{
    font-size:19px;
    padding:17px 44.9675px;
    font-weight:600;
    color:#0f1b33;
    font-style:normal;
    letter-spacing:normal;
  }

  /* ---------- PRACTICE AREAS 상담하기 ---------- */
  /* All six links move from 17px to 19px, matching the 19px card
     prose immediately above them. Family, weight 600, gold colour,
     underline, underline thickness and offset, arrow, arrow size,
     alignment and spacing, hover and focus colour, glow, arrow
     movement, destinations, data-practice prefills, hit area, card
     dimensions, card spacing and the body copy itself are all
     unchanged. */
  html[lang="ko"] #practice .area-card .area-link{
    font-size:19px;
  }

}

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

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

   The approved About-section behaviour only: entering any part of
   #about holds the existing sustained illumination on 변호사 소개 and
   reveals the existing 소개 영상 보기 label and the approved play-circle
   scale, without the visitor having to point at the portrait, the
   heading or the circle. Every selector is scoped to html[lang="ko"]
   and every rule sits inside
   @media (min-width:1120px) and (hover:hover) and (pointer:fine),
   so Korean tablet, Korean mobile, touch and every coarse pointer keep
   the v49 appearance and behaviour exactly. Colour and glyph glow only;
   no typography, size, weight, tracking or normal colour is changed, no
   important flags, no JavaScript, no shared-stylesheet edit. Playback logic,
   the Korean video source and the trigger's hidden state during
   playback are untouched, and hover never starts playback.
   ===================================================================== */
@media (min-width:1120px) and (hover:hover) and (pointer:fine){

  html[lang="ko"] #about .about-copy .ill-hold{
    transition:
      color .28s ease,
      text-shadow .28s ease;
  }
  html[lang="ko"] #about:hover .about-copy .ill-hold,
  html[lang="ko"] #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="ko"] #about:hover .about-portrait .portrait-watch-label,
  html[lang="ko"] #about:focus-within .about-portrait .portrait-watch-label{
    opacity:1;
    visibility:visible;
    transform:translateX(0);
  }
  html[lang="ko"] #about:hover .about-portrait .portrait-play,
  html[lang="ko"] #about:focus-within .about-portrait .portrait-play{
    transform:scale(1.04);
  }

  /* Reduced motion: the same end states, applied immediately, with the
     slide and the scale removed. The video controls are untouched. */
  @media (prefers-reduced-motion:reduce){
    html[lang="ko"] #about .about-copy .ill-hold{transition:none;}
    html[lang="ko"] #about .about-portrait .portrait-watch-label{
      transition:none;
      transform:none;
    }
    html[lang="ko"] #about:hover .about-portrait .portrait-watch-label,
    html[lang="ko"] #about:focus-within .about-portrait .portrait-watch-label{
      transform:none;
    }
    html[lang="ko"] #about:hover .about-portrait .portrait-play,
    html[lang="ko"] #about:focus-within .about-portrait .portrait-play{
      transform:none;
    }
  }

  /* ---- B. PRACTICE AREAS INTRODUCTION ------------------------------
     Same behaviour as the English page, on the corresponding complete
     Korean introductory box (업무 분야, the statement and the full
     introductory paragraph). Previously approved bright living-gold
     hold on the statement only; held state, so internal movement can
     neither restart nor flicker it. Cards and panel are outside. */
  html[lang="ko"] #practice .practice-intro-hover-v50 .section-title .ill-hold{
    transition:
      color .28s ease,
      text-shadow .28s ease;
  }
  html[lang="ko"] #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 Korean introductory block, with its rendered spacing
     untouched. Timeline rows cannot hold the effect. */
  html[lang="ko"] #experience .track-record-intro-hover-v50 .section-title .ill-hold{
    transition:
      color .28s ease,
      text-shadow .28s ease;
  }
  html[lang="ko"] #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 -------------------------
     주요 실적 eyebrow, statement and the complete introductory
     paragraph; the group label and the results grid are outside. */
  html[lang="ko"] #results .results-intro-hover-v51 .section-title .ill-hold{
    transition:
      color .28s ease,
      text-shadow .28s ease;
  }
  html[lang="ko"] #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 Korean heading-and-quotation box. One bright gold illumination
     of 자문 원칙 per entry, fading on its own and re-arming only after a
     genuine exit and re-entry; the concluding statement holds its
     approved brass illumination while the cursor is anywhere inside the
     box and fades on exit. The attribution is never selected. */
  html[lang="ko"] #approach .approach:hover .section-label .ill{
    animation:jsk-gold 1.25s ease;
  }
  html[lang="ko"] #approach .approach .quote-strong{
    transition:
      color .28s ease,
      text-shadow .28s ease;
  }
  html[lang="ko"] #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: 21px → 23px, still clearly below the 27px Korean
     quotation and far below the 30px 자문 원칙 heading. Every other
     property, including the space above it, is unchanged, and it has
     no hover state. */
  html[lang="ko"] #approach .approach cite{font-size:23px;}

  /* Reduced motion: no entry animation, held illumination applied
     immediately. */
  @media (prefers-reduced-motion:reduce){
    html[lang="ko"] #practice .practice-intro-hover-v50 .section-title .ill-hold,
    html[lang="ko"] #experience .track-record-intro-hover-v50 .section-title .ill-hold,
    html[lang="ko"] #results .results-intro-hover-v51 .section-title .ill-hold{
      transition:none;
    }
    html[lang="ko"] #approach .approach:hover .section-label .ill{animation:none;}
    html[lang="ko"] #approach .approach .quote-strong{transition:none;}
  }
}

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

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

   A. The complete navy Contact section is now the trigger for the
      상담 요청 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 자문 원칙 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.

   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);
  }
}

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

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

  /* B. 자문 원칙 - brighter peak, same trigger box and timing. */
  html[lang="ko"] #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="ko"] #contact:hover .section-title .ill-hold{animation:none;}
    html[lang="ko"] #approach .approach:hover .section-label .ill{animation:none;}
  }
}

/* ===== inline block: ko-practice-response-v56 ===== */

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

   The full-card trigger was audited first 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 required.

   Only the response speed changes: the v44 110ms transition becomes
   80ms with an explicit 0ms delay, on desktop fine-pointer devices
   only. The Korean heading and its nested subtitle continue to carry
   identical timing so they begin and complete together, and the
   illuminated colour, glow layers and held state are preserved
   exactly.
   ===================================================================== */

@media (min-width:1120px) and (hover:hover) and (pointer:fine){
  html[lang="ko"] #practice .area-card h3,
  html[lang="ko"] #practice .area-card h3 .card-subtitle{
    transition:
      color 80ms ease-out 0ms,
      text-shadow 80ms ease-out 0ms;
  }
}

@media (prefers-reduced-motion: reduce){
  html[lang="ko"] #practice .area-card h3,
  html[lang="ko"] #practice .area-card h3 .card-subtitle{
    transition-duration:0s;
    transition-delay:0s;
  }
}

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

/* =====================================================================
   v58 (2026-08-05) — approved KOREAN 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="ko"] .areas-cta:hover .btn-primary,
  html[lang="ko"] .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="ko"] .areas-cta:hover .btn-primary,
    html[lang="ko"] .matters-cta:hover .btn-primary{animation:none;}
  }
}

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

/* =====================================================================
   v59 (2026-08-05) — approved KOREAN 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. KO (active) shows it in dark navy
   #0f1b33 at 0.88; while EN (inactive) is hovered or
   focus-visible, the container-level :has() rule turns the KO
   underline fully transparent and the EN 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="ko"] 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="ko"] 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="ko"] header .lang-switch a:not(.active):hover,
  html[lang="ko"] 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="ko"] header .lang-switch:has(a:not(.active):hover) a.active,
  html[lang="ko"] 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="ko"] header .lang-switch a{transition:none;}
  }
}

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

/* =====================================================================
   v60 (2026-08-05) — approved KOREAN 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="ko"] header .lang-switch a:not(.active):hover,
  html[lang="ko"] 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="ko"] header .nav-links a{
    transition:border-color .2s ease,
               color 140ms ease-out,
               text-shadow 140ms ease-out;
  }

  html[lang="ko"] header .nav-links a:hover,
  html[lang="ko"] 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="ko"] header .lang-switch a,
    html[lang="ko"] header .nav-links a{transition:none;}
  }
}

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

/* =====================================================================
   v61 (2026-08-05) — approved KOREAN 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="ko"] header .nav-links a{
    transition:border-color .2s ease,
               color 140ms ease-out,
               text-shadow 140ms ease-out;
  }

  html[lang="ko"] header .nav-links a:hover,
  html[lang="ko"] 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="ko"] 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: ko-final-refinement-v63 ===== */

/* =====================================================================
   v63 (2026-08-31) - FINAL KOREAN DESKTOP REFINEMENT.
   Loaded after every stylesheet; no !important is used anywhere.
   Percentages are calculated from each element's OWN measured Korean
   desktop size, so hierarchy is preserved. Every rule is gated at the
   1120px desktop breakpoint, so nothing below desktop can be reached.
   ===================================================================== */
@media (min-width:1120px){

  /* KO-1B. Statistic descriptions 15.5 -> 15.81 (101%). The four metric
     headings 25+, $50B+, 9 and U.S. x Korea are not referenced here and
     stay exactly as approved; the .stat-label-line pairs inherit. */
  html[lang="ko"] body.executive-editorial-master .hero .stat-label{
    font-size:15.81px;
  }

  /* KO-1C. Core industry line 23 -> 24.15 (105%). The heading
     핵심 산업 경험 is not referenced and is unchanged; wording,
     separators, weight, colour, alignment and tracking are untouched. */
  html[lang="ko"] body.executive-editorial-master .hero .sector-list{
    font-size:24.3915px;
  }

  /* KO-2A. 변호사 소개 - three descriptive paragraphs 19 -> 19.38 */
  html[lang="ko"] body.executive-editorial-master #about .about-copy > p{
    font-size:19.5738px;
  }

  /* KO-2B. Credential / details block, each from its own base.
     dt 15.75 -> 16.065 ; dd 17.4 -> 17.748 ; the distinction span is
     declared at 95% of dd and follows to 16.8606, so the hierarchy holds. */
  html[lang="ko"] body.executive-editorial-master #about .credentials dt{
    font-size:16.22565px;
  }
  html[lang="ko"] body.executive-editorial-master #about .credentials dd{
    font-size:17.92548px;
  }

  /* KO-2C. Name and role beneath the portrait. 21 -> 21.42 / 15.75 -> 16.065 */
  html[lang="ko"] body.executive-editorial-master #about .portrait-caption .name{
    font-size:21.6342px;
  }
  html[lang="ko"] body.executive-editorial-master #about .portrait-caption .role{
    font-size:16.22565px;
  }

  /* KO-3. All five career description paragraphs 19 -> 19.38. Company
     names, role titles, dates, numbering and heading typography are not
     referenced and are unchanged. */
  html[lang="ko"] body.executive-editorial-master #experience .tl-desc{
    font-size:19.5738px;
  }

  /* KO-4. Every practice-area description 19 -> 19.38. The h3 headings
     (25px), the .card-subtitle (17.5px) and 상담하기 (19px, an <a>) are
     not reached by this selector and remain exactly as approved. */
  html[lang="ko"] body.executive-editorial-master #practice .area-card p{
    font-size:19.5738px;
  }

  /* KO-5A. Both consultation-panel supporting sentences 20 -> 20.2 (101%).
     The two main question sentences (.areas-cta-title / .matters-cta-title,
     26px) are not referenced and are textually and typographically
     unchanged. */
  html[lang="ko"] body.executive-editorial-master .areas-cta p,
  html[lang="ko"] body.executive-editorial-master .matters-cta p{
    font-size:20.2px;
  }

  /* KO-5B. Question mark - the exact final approved Korean Mobile Hero
     treatment (Option 1 as finally cascaded there): the punctuation glyph
     itself in the refined display serif, no circle, border, badge,
     background or container of any kind, the colour of the adjacent text,
     1.02em, line-height 0, -.03em baseline shift, .02em left margin.
     Scoped to the two Desktop CTA question marks only; the font is
     requested for weight 500 alone and no other element can reach it. */
  html[lang="ko"] body.executive-editorial-master .areas-cta-title .qm,
  html[lang="ko"] body.executive-editorial-master .matters-cta-title .qm{
    display:inline;
    box-sizing:content-box;
    width:auto; height:auto;
    margin-left:.02em;
    padding:0;
    border:0;
    border-radius:0;
    background:none;
    font-family:"Playfair Display","Cormorant Garamond",serif;
    font-weight:500;
    font-size:1.02em;
    line-height:0;
    vertical-align:-.03em;
    color:inherit;
  }

  /* KO-6. Section 05 quotation - the approved Korean Tablet V21
     composition. Groups 1 and 2 already match; group 3 now breaks into
     the same three clause lines the Tablet uses. Wording, punctuation,
     emphasis colour, typeface, the left-hand 05 / 자문 원칙 heading and
     the — 김세철 attribution are untouched, and the quotation keeps its
     current Desktop font size (no increase was required). */
  html[lang="ko"] body.executive-editorial-master #approach .approach blockquote .ko-quote-line{
    display:block;
  }

  /* KO-7A. 문의 landing. Measured at 100% zoom: header 99px, the section's
     inherited scroll offset 108px, which left the 06 / label 121px below
     the header and pushed 상담 요청 to y=294. The offset alone is reduced,
     so the section is not compressed, nothing inside it moves relative to
     anything else, manual scrolling is unaffected, and no other anchor is
     referenced. */
  html[lang="ko"] body.executive-editorial-master #contact{
    scroll-margin-top:48px;
  }

  /* KO-7B. Section 06 typography, each element to 101% of its own base.
     The left-hand 06 / 문의 label is not referenced and is unchanged. */
  html[lang="ko"] body.executive-editorial-master #contact .section-title{
    font-size:39.895px;                                   /* 39.5  */
  }
  html[lang="ko"] body.executive-editorial-master #contact .contact-copy > p{
    font-size:19.3819px;                                    /* 19    */
  }
  html[lang="ko"] body.executive-editorial-master #contact .contact-detail dt{
    font-size:17.3417px;                                    /* 17    */
  }
  html[lang="ko"] body.executive-editorial-master #contact .contact-detail dd{
    font-size:19.3819px;                                    /* 19    */
  }
  html[lang="ko"] body.executive-editorial-master #contact .field label{
    font-size:17.3417px;                                    /* 17    */
  }
  html[lang="ko"] body.executive-editorial-master #contact .field .field-optional{
    font-size:12.2412px;                                    /* 12    */
  }
  html[lang="ko"] body.executive-editorial-master #contact .field input,
  html[lang="ko"] body.executive-editorial-master #contact .field textarea{
    font-size:18.18px;                                    /* 18    */
  }
  html[lang="ko"] body.executive-editorial-master #contact .field-error{
    font-size:13.13px;                                    /* 13    */
  }
  html[lang="ko"] body.executive-editorial-master #contact #form-success,
  html[lang="ko"] body.executive-editorial-master #contact #form-error{
    font-size:14.14px;                                    /* 14    */
  }
  html[lang="ko"] body.executive-editorial-master #contact .submit-btn{
    font-size:19.3819px;                                    /* 19    */
  }

  /* KO-7C. Form-field focus glow strengthened. Same gold, same direction,
     same transition; the field box, background, borders' geometry and the
     validation logic are untouched, and :not(.has-error) keeps the coral
     invalid-field styling authoritative. box-shadow does not affect
     layout, so no dimension moves. */
  html[lang="ko"] body.executive-editorial-master #contact .field:focus-within input:not(.has-error),
  html[lang="ko"] body.executive-editorial-master #contact .field:focus-within textarea:not(.has-error){
    box-shadow:
      0 1px 0 rgba(216,180,95,1),
      0 3px 9px rgba(216,180,95,0.46),
      0 8px 22px rgba(216,180,95,0.28);
  }

  /* KO-7D. Both 상담 요청 CTAs - the same white lettering glow as English,
     now clearly perceptible. Wording, typography, dimensions, position,
     colours, button design and interaction behaviour are unchanged. */
  html[lang="ko"] body.executive-editorial-master header .nav-cta:hover,
  html[lang="ko"] body.executive-editorial-master header .nav-cta:focus-visible,
  html[lang="ko"] body.executive-editorial-master .hero .btn-primary:hover,
  html[lang="ko"] body.executive-editorial-master .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);
  }

/* =====================================================================
   v64 (2026-08-31) - KOREAN DESKTOP MICRO-REFINEMENT.
   Additive only. Fourteen v63 values above were superseded in place
   rather than re-declared, so no selector is written twice.
   ===================================================================== */

  /* KO-1. 핵심 산업 경험 heading now also rises: 23 -> 23.23 (101%).
     The industry line beneath it is superseded above to 24.3915. */
  html[lang="ko"] body.executive-editorial-master .hero .sector-label{
    font-size:23.23px;
  }

  /* KO-3. Name / title block - hairline descent, no independent
     movement of either line. Measured: the 김세철 ink began exactly at
     the portrait's offset shadow edge (0.0px clearance). +4px lands it
     at 4px, matching the English side. position:relative keeps the
     caption's box in flow, so the video, its frame, the credentials
     below and all section spacing are unmoved. */
  html[lang="ko"] body.executive-editorial-master #about .portrait-caption{
    position:relative;
    top:4px;
  }

  /* KO-4D. Section 04 accomplishment-card descriptive body, all six
     cards, joining Sections 01-03 at the unified absolute target. The
     card-top category labels and the card headings are separate
     elements and are not reached here. */
  html[lang="ko"] body.executive-editorial-master #results .matter-item p{
    font-size:19.5738px;
  }

  /* KO-5. Every 상담하기 in Section 03: 19 -> 19.19 (101%). Href,
     colour, decoration and hover behaviour are not declared. */
  html[lang="ko"] body.executive-editorial-master #practice .area-link{
    font-size:19.19px;
  }

  /* KO-6. Both opening intros to the same absolute 23px. */
  html[lang="ko"] body.executive-editorial-master .areas-intro,
  html[lang="ko"] body.executive-editorial-master .matters-intro{
    font-size:23px;
  }

  /* KO-7. The six card-top category labels only: 14 -> 16.1 (115%).
     Scoped to .matter-cat, so the 18.5px card headings and the card
     body copy are untouched. */
  html[lang="ko"] body.executive-editorial-master #results .matter-cat{
    font-size:16.1px;
  }

  /* KO-8. Section 04 closing sentence 18 -> 19.8 (110%), and the six
     phrases carry the final approved Korean Tablet V21 treatment read
     from that source: colour var(--navy) = #12213d with font-weight
     restated at 600, wrappers <strong class="entity-name">. The
     Desktop markup uses <strong class="fn-em"> so the rendered colour
     and weight are identical while the Desktop's own class naming is
     kept. Scoped to the footnote, so the Hero and About Counsel
     company names keep their approved gold. */
  html[lang="ko"] body.executive-editorial-master .matters-footnote{
    font-size:19.8px;
  }
  html[lang="ko"] body.executive-editorial-master #results .matters-footnote .fn-em{
    color:#12213d;
    font-weight:600;
  }

/* =====================================================================
   v65 (2026-08-31) - KOREAN DESKTOP HERO HEADLINE LINE-GAP EQUALISATION.
   Root cause: the headline is built from two .h1-line blocks, and the
   0.23em breathing margin is declared on .h1-line + .h1-line. Visual
   line 1 -> 2 is a block boundary and receives it (measured 9.89px at
   the 43px desktop size); visual line 2 -> 3 is an ordinary soft wrap
   INSIDE the second block and receives nothing, so it renders tighter
   by exactly that 9.89px.
   Correction: the third visual line is given its own block box at the
   desktop breakpoint and the identical 0.23em, so both gaps resolve to
   the same advance. The wrap point is unchanged - the gold <em> is
   nowrap at >=861px and already broke at exactly this position - and
   nothing about line 1 -> 2 is touched.
   Declared at 1120px only: below it the new wrapper stays an ordinary
   inline span and the source keeps the space before it, so narrower
   rendering is byte-for-byte the behaviour it had before.
   Font size, family, weight, tracking, line-height, wording, line
   breaks, gold/navy treatment, headline width and the headline block's
   own top position are all untouched. The .h1-shine mirror carries the
   identical markup so the sweep still tracks the visible text. */
  html[lang="ko"] body.executive-editorial-master .hero h1 .h1-line-b{
    display:block;
    margin-top:0.23em;
  }
}

/* ===== inline block: ko-statistics-yrs-centering-v65 ===== */

/* =====================================================================
   JSK DESKTOP MASTER — KOREAN STATISTICS: 25+ YRS, AND CENTRE THE FOUR
   LARGE VALUES
   ---------------------------------------------------------------------
   A. The unit abbreviation YRS added to the first statistic renders one
      step smaller than 25+ and nothing else about it differs. It
      inherits the approved gold (--master-gold-light), full opacity,
      the same Fraunces / Noto Serif KR family, the same baseline and
      the same hover behaviour, because no colour, opacity or filter is
      declared here. Weight moves 500 -> 600, the smallest loaded step
      above the statistic weight, so the smaller size does not read
      thinner or weaker than 25+. Sized in em so the proportion holds
      at every width. 25+ itself is not referenced and is unchanged.

   B. The four large statistic values (25+ YRS, $50B+, 9, U.S. x Korea)
      are centred horizontally inside their own existing columns. The
      left alignment comes from the desktop master rule
      body.executive-editorial-master .hero .stat{text-align:left} in
      executive-editorial.css @media (min-width:1120px), so the centring
      is scoped to that breakpoint and to .stat-num only:

        - the descriptive .stat-label keeps its approved left alignment;
        - 25+ and YRS centre together as one statistic unit;
        - column widths, padding, dividers and band geometry are untouched;
        - no tablet or mobile breakpoint is affected.

   No !important, no JavaScript, no shared-stylesheet edit.
   ===================================================================== */
html[lang="ko"] .hero .stats .stat-num .stat-unit{
  font-size:0.58em;
  font-weight:600;
}
@media (min-width:1120px){
  html[lang="ko"] body.executive-editorial-master .hero .stats .stat-num{
    text-align:center;
  }
}

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

/* =====================================================================
   JSK DESKTOP MASTER — KOREAN STATISTICS: CENTRE THE SUPPORTING COPY
   ---------------------------------------------------------------------
   Supersedes ko-statistics-supporting-copy-v66 in place. That block
   fitted the supporting-copy container to its longest authored line so
   a left-aligned block could sit centred beneath the figure; the
   controlling treatment is now the final Tablet one, where .stat
   carries text-align:center and .stat-label adds no override, so the
   supporting text itself reads centred. The width rule is therefore
   retired rather than layered over, and the container returns to the
   existing shared measure it had before v66.

   The authored .stat-label-line pair keeps its two-line structure, so
   the line breaks are unchanged; only the lines move from the left edge
   to the centre. Wording, font family, size, weight, tracking,
   line-height, colour, opacity, top margin, column widths, padding,
   dividers and band geometry are untouched, as are 25+ YRS and the
   other three large gold values.

   Scoped to the >=1120px desktop master. No !important, no markup
   change, no shared-stylesheet edit.
   ===================================================================== */
@media (min-width:1120px){
  html[lang="ko"] body.executive-editorial-master .hero .stats .stat-label{
    text-align:center;
  }
}