/* 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('fonts/dejavu-serif-400.woff2') format('woff2');
}
@font-face{
font-family:'P052';
font-style:normal;
font-weight:400;
font-display:swap;
src:url('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
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