/* ═══════════════════════════════════════════════════════════════════════════
   SSA e-portfolios — one sheet for every lawyer's page (/portfolio/{person}).
   Design language: the firm's website (Design C). White base, deep navy
   panels, orange as accent only. Archivo display, Inter body, the ampersand
   always in Inter.
   ═══════════════════════════════════════════════════════════════════════════ */

/* One glyph, one face. Google's own one-glyph subset of Inter (variable, so it
   serves every display weight), inlined so the file stays self-contained.
   Inter is © The Inter Project Authors, SIL Open Font License 1.1. */
@font-face{font-family:'InterAmpersand';font-style:normal;font-weight:100 900;font-display:swap;unicode-range:U+0026;
  src:url(data:font/woff2;base64,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) format('woff2')}

:root{
  color-scheme:dark;
  --signal:#E2571F; --signal-dk:#C4460F;
  --base:#111625; --surface:#161C2D; --surface-2:#1C2336; --line:#262D3F; --line-2:#323A4F;
  --text:#FFFFFF; --text-dim:#A9AFBE; --text-faint:#6B7488; --num-rest:#2C3447;
  --navy:#0B0F1A; --navy-2:#0D1220;
  --grid:rgba(255,255,255,.035); --v1:#C9D1E3; --shadow:rgba(0,0,0,.35); --head-bg:rgba(17,22,37,.92);
  --display:'InterAmpersand','Archivo',sans-serif;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  --head-h:88px;
}
/* light mode: the reader's choice, remembered in the browser. Dark is the default. */
:root[data-theme="light"]{
  color-scheme:light;
  --base:#FFFFFF; --surface:#F7F8FA; --surface-2:#EDEFF4; --line:#E0E3EB; --line-2:#D5D8DD;
  --text:#101423; --text-dim:#5C6478; --text-faint:#9AA0A8; --num-rest:#D9DCE1;
  --navy:#111625; --navy-2:#0D1220;
  --grid:rgba(16,20,35,.022); --v1:#111625; --shadow:rgba(16,20,35,.06); --head-bg:rgba(255,255,255,.92);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{background:var(--base);color:var(--text);font-family:var(--sans);font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4{font-family:var(--display);line-height:1.05;letter-spacing:-.03em;font-weight:700}
a{color:inherit}
button{font:inherit;color:inherit}
img,svg{display:block;max-width:100%}
em,cite,address{font-style:normal}
ul,ol{list-style:none}
:focus-visible{outline:2px solid var(--signal);outline-offset:3px}
.wrap{max-width:1200px;margin:0 auto;padding:0 34px}
section{padding:84px 0;scroll-margin-top:calc(var(--head-h) + 8px)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── shared pieces ─────────────────────────────────────────────────────────── */
.eyebrow{display:inline-block;font-family:var(--display);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--signal);line-height:1;
  border:1px solid rgba(226,87,31,.5);border-radius:3px;padding:7px 14px;margin-bottom:20px}
.lab{font-family:var(--display);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--signal);line-height:1.4}
.shead h2{font-size:clamp(32px,3.6vw,46px);margin-bottom:14px}
.shead p{color:var(--text-dim);font-size:16.5px;line-height:1.65;max-width:62ch}
.shead .eyebrow{color:var(--signal)}   /* .shead p is (0,1,1) and would outrank the bare pill class */
.shead-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:end;margin-bottom:44px}
.shead-row .shead p{margin-bottom:4px}
.shead-row .shead > h2:last-child{margin-bottom:0}
.shead-row > .shead:only-child{grid-column:1 / -1}
.n-lg{font-family:var(--display);font-size:26px;font-weight:600;font-variant-numeric:tabular-nums;line-height:1}
.btn{background:var(--signal);color:#fff;padding:12px 22px;border-radius:4px;font-size:14px;font-weight:700;display:inline-flex;align-items:center;gap:8px;border:0;cursor:pointer;text-decoration:none;transition:background 150ms ease}
.btn:hover{background:var(--signal-dk)}
.btn-out{border:1px solid var(--line-2);color:var(--text);padding:11px 20px;border-radius:4px;font-size:14px;font-weight:600;display:inline-flex;align-items:center;gap:8px;text-decoration:none;background:var(--base);transition:border-color 150ms ease}
.btn-out:hover{border-color:var(--text-dim)}
.btn svg,.btn-out svg,.quiet svg{width:14px;height:14px;flex:none}
.quiet{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--text-dim);text-decoration:none;white-space:nowrap;transition:color 150ms ease}
.quiet:hover{color:var(--signal)}
.chip{display:inline-block;font-size:12.5px;line-height:1.4;padding:4px 10px;border:1px solid var(--line-2);border-radius:4px;color:var(--text-dim);background:var(--base);transition:border-color 150ms ease,color 150ms ease}
.chips{display:flex;flex-wrap:wrap;gap:6px}

/* dark panels: the website's navy with its faint grid */
.dark{background:var(--navy);color:#fff}
.dark .shead p{color:rgba(255,255,255,.66)}
.dark .shead .eyebrow{color:var(--signal)}   /* (0,3,0): the paragraph rule above would otherwise outrank the pill */
.dark .chip{border-color:rgba(255,255,255,.14);color:rgba(255,255,255,.82);background:transparent}
.dark .btn-out{background:transparent;color:#fff;border-color:rgba(255,255,255,.3)}
.dark .btn-out:hover{border-color:#fff}

/* ── header ────────────────────────────────────────────────────────────────── */
.site-head{position:sticky;top:0;z-index:50;background:var(--head-bg);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.hd{display:flex;align-items:center;gap:32px;height:var(--head-h)}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;flex:none}
.brand img{height:64px;width:auto}
.brand img{filter:brightness(0) invert(1)}
:root[data-theme="light"] .brand img{filter:none}
.brand-tag{font-family:var(--display);font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--text-dim);border-left:1px solid var(--line);padding-left:12px;line-height:1.2}
.brand:hover .brand-tag{color:var(--text)}
.nav{display:flex;gap:26px;margin-left:auto}
.nav a{position:relative;font-size:13.5px;font-weight:500;color:var(--text-dim);text-decoration:none;padding:26px 0;white-space:nowrap;transition:color 150ms ease}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:19px;height:2px;border-radius:1px;background:var(--signal);transform:scaleX(0);transform-origin:0 50%;transition:transform 200ms ease}
.nav a:hover{color:var(--text)}
.nav a[aria-current="true"]{color:var(--text);font-weight:600}
.nav a[aria-current="true"]::after{transform:scaleX(1)}
.hd-r{display:flex;align-items:center;gap:18px}
.prog{position:absolute;left:0;bottom:-1px;height:2px;width:100%;background:var(--signal);transform:scaleX(var(--sp,0));transform-origin:0 50%;will-change:transform;pointer-events:none}
.theme{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;background:none;border:1px solid var(--line);border-radius:4px;cursor:pointer;color:var(--text-dim);transition:border-color 150ms ease,color 150ms ease}
.theme:hover{border-color:var(--text-dim);color:var(--text)}
.theme svg{width:16px;height:16px}
.theme .th-moon{display:none}
:root[data-theme="light"] .theme .th-moon{display:block}
:root[data-theme="light"] .theme .th-sun{display:none}
.burger{display:none;align-items:center;justify-content:center;width:40px;height:36px;background:none;border:1px solid var(--line);border-radius:4px;cursor:pointer}
.burger:hover{border-color:var(--text-dim)}
.burger-bars,.burger-bars::before,.burger-bars::after{display:block;width:17px;height:1.5px;background:var(--text);border-radius:2px;transition:transform 150ms ease,opacity 150ms ease}
.burger-bars{position:relative}
.burger-bars::before,.burger-bars::after{content:"";position:absolute;left:0}
.burger-bars::before{top:-5.5px}.burger-bars::after{top:5.5px}
.burger.is-open .burger-bars{background:transparent}
.burger.is-open .burger-bars::before{transform:translateY(5.5px) rotate(45deg)}
.burger.is-open .burger-bars::after{transform:translateY(-5.5px) rotate(-45deg)}
.nav-panel{border-top:1px solid var(--line);background:var(--base)}
.nav-panel[hidden]{display:none}
.nav-panel > .wrap{padding-top:6px;padding-bottom:20px}
.nav-panel a{display:block;padding:14px 0;font-size:16px;border-bottom:1px solid var(--line);text-decoration:none;color:var(--text)}
.nav-panel a[aria-current="true"]{color:var(--signal);font-weight:600}
.nav-panel-foot{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px}
.nav-panel-foot .btn{grid-column:1 / -1}
.nav-panel-foot .btn,.nav-panel-foot .btn-out{justify-content:center;white-space:nowrap}
/* `.nav-panel a` (0,1,1) blockifies and borders every link in the panel; these two are buttons */
.nav-panel-foot a{display:flex;justify-content:center;padding:12px 20px;font-size:14px;border-bottom:0}
.nav-panel-foot a.btn-out{border:1px solid var(--line-2)}
.dark .nav-panel-foot a.btn-out,:root:not([data-theme="light"]) .nav-panel-foot a.btn-out{border-color:rgba(255,255,255,.3);color:#fff}

/* ── breadcrumb + hero ─────────────────────────────────────────────────────── */
.crumb{padding-top:20px;font-size:13px;color:var(--text-dim)}
.crumb a{color:var(--text-dim);text-decoration:none;border-bottom:1px solid var(--line-2);transition:color 150ms ease,border-color 150ms ease}
.crumb a:hover{color:var(--signal);border-color:var(--signal)}
.crumb span{margin:0 8px;color:var(--text-faint)}
.hero{padding:36px 0 0}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);grid-template-rows:auto 1fr;grid-template-areas:"id photo" "copy photo";column-gap:72px;row-gap:0;align-items:start}  /* auto 1fr: the portrait spans both rows, and without it the grid shared its height between them and opened a gap under the name on a page with no Chambers plate */
.hero-id{grid-area:id}
.hero-copy{grid-area:copy}
.portrait{grid-area:photo;justify-self:end;width:100%;max-width:440px;margin:0}
.portrait img{width:100%;height:auto;aspect-ratio:2/3;object-fit:cover;object-position:50% 18%;border-radius:10px;border:1px solid var(--line);background:var(--surface)}
.portrait figcaption{margin-top:12px;font-size:12.5px;color:var(--text-dim);display:flex;justify-content:space-between;gap:12px}
h1{font-size:clamp(52px,6.6vw,96px);font-weight:800;line-height:.95;letter-spacing:-.045em;margin:10px 0 26px;max-width:9ch}
.role-bar{display:block;font-family:var(--display);font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--text-dim)}
.role{font-family:var(--display);font-size:clamp(20px,2vw,26px);font-weight:600;letter-spacing:-.02em;color:var(--signal);line-height:1.2;margin-top:6px}
.role span{display:block;font-family:var(--sans);font-size:15.5px;font-weight:400;letter-spacing:0;color:var(--text-dim);margin-top:6px}
.plate{margin-top:32px;display:block;border:1px solid var(--line);border-left:3px solid var(--signal);border-radius:10px;padding:22px 26px 24px;background:var(--base);max-width:560px;
  transition:border-color 150ms ease,transform 150ms ease,box-shadow 150ms ease}
.plate:hover{border-color:var(--signal);border-left-color:var(--signal-dk);transform:translateY(-2px);box-shadow:0 8px 22px var(--shadow)}
.plate .lab{display:block;margin-bottom:14px}
.plate-s{display:block;font-family:var(--display);font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--text-dim);margin-bottom:6px}
.plate-n{display:block;font-family:var(--display);font-size:clamp(30px,3vw,42px);font-weight:800;letter-spacing:-.035em;line-height:1}
.plate-sub{display:block;font-size:13.5px;color:var(--text-dim);margin-top:8px}
.lede{margin-top:30px;font-size:18px;line-height:1.65;color:var(--text-dim);max-width:60ch}
.lede strong{color:var(--text);font-weight:600}
.acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}

/* stats rail: the website's own device */
.stats{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr) minmax(0,2fr);border-top:1px solid var(--line);margin-top:56px}
.stat{padding:22px 24px 26px 0;position:relative}
.stat + .stat{padding-left:24px;border-left:1px solid var(--line)}
.stat-bar{position:absolute;top:-1px;left:0;height:2px;width:0;background:var(--signal);transition:width 1.6s cubic-bezier(.2,.7,.3,1)}
.stat + .stat .stat-bar{left:24px}
.stat.is-counted .stat-bar{width:calc(100% - 24px)}
.stat:first-child.is-counted .stat-bar{width:calc(100% - 24px)}
.stat-n{font-family:var(--display);font-size:clamp(30px,3vw,42px);font-weight:700;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap}
.stat-l{font-size:13px;color:var(--text-dim);margin-top:8px;line-height:1.45}
.stat-k{padding-top:24px}
.stat-k p{font-size:15px;line-height:1.55;color:var(--text);margin-top:8px}

/* ── roles ─────────────────────────────────────────────────────────────────── */
.roles-sec{padding:48px 0 72px}
.roles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:24px}
.rol{border-top:1px solid var(--line);padding-top:18px;display:grid;grid-template-columns:24px minmax(0,1fr);gap:14px;align-items:start;position:relative;transition:border-color 150ms ease}
.rol::before{content:"";position:absolute;left:0;top:-1px;width:28px;height:2px;background:var(--signal)}
.rol svg{width:22px;height:22px;color:var(--signal);margin-top:1px}
.rol b{display:block;font-family:var(--display);font-size:16.5px;font-weight:600;letter-spacing:-.01em;line-height:1.3}
.rol span{display:block;font-size:13.5px;line-height:1.5;color:var(--text-dim);margin-top:5px}

/* ── Chambers: the ranking beside the heading, the quotes as one editorial slider ── */
.rec-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);gap:64px;align-items:start}
.rec-left,.rev{min-width:0}
.rec-left .shead h2{margin-bottom:0}
.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:36px}
.tile{border-top:2px solid var(--signal);padding-top:14px}
.tile b{display:block;font-family:var(--display);font-size:clamp(26px,2.4vw,32px);font-weight:700;letter-spacing:-.03em;line-height:1}
.tile span{display:block;font-size:13px;line-height:1.5;color:rgba(255,255,255,.66);margin-top:8px}
.rev{position:relative;padding-top:8px}
.rev::before{content:"\201C";display:block;font-family:var(--display);font-size:88px;font-weight:700;line-height:.55;color:var(--signal);height:.55em;margin-bottom:22px}
.rev-win{overflow:hidden}
.rev-track{display:flex;align-items:stretch;transition:transform .6s cubic-bezier(.2,.7,.3,1);will-change:transform}
.rev-item{flex:0 0 100%;min-width:0}
.rev-item blockquote{font-size:clamp(22px,2.2vw,30px);line-height:1.4;font-weight:500;letter-spacing:-.012em;color:#fff;max-width:36ch;padding-right:24px}
.rev-item blockquote::before{content:"\201C"}.rev-item blockquote::after{content:"\201D"}
.rev-foot{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:36px;padding-top:22px;border-top:1px solid rgba(255,255,255,.12)}
.qsrc{display:block;font-family:var(--display);font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.rev-ctl{display:flex;align-items:center;gap:18px}
.rev-ctl[hidden]{display:none}
.rev-n{font-family:var(--display);font-size:13px;font-variant-numeric:tabular-nums;color:rgba(255,255,255,.55);letter-spacing:.04em}
.rev-n b{color:#fff;font-weight:600}
/* the website's chevron: two borders on a rotated square, no circle, no fill */
.rev-btn{width:36px;height:36px;background:none;border:0;cursor:pointer;display:grid;place-items:center;color:inherit}
.rev-btn span{display:block;width:11px;height:11px;border-top:1.5px solid rgba(255,255,255,.4);border-right:1.5px solid rgba(255,255,255,.4);transform:rotate(45deg);transition:border-color 150ms ease}
.rev-prev span{transform:rotate(-135deg)}
.rev-btn:hover span{border-color:var(--signal)}
.rev-btn:focus-visible{outline:2px solid var(--signal);outline-offset:2px;border-radius:4px}
/* without a script the four quotes simply stack */
html:not(.js) .rev-track{display:grid;gap:28px}
html:not(.js) .rev-item blockquote{font-size:19px;max-width:none}

/* ── practice: numbered hairline rows ──────────────────────────────────────── */
.plist{border-top:1px solid var(--line)}
.prow{display:grid;grid-template-columns:72px minmax(0,1fr) minmax(0,1.1fr);gap:0 40px;padding:36px 0 34px;border-bottom:1px solid var(--line);transition:border-color 200ms ease}
.prow:hover{border-bottom-color:var(--signal)}
.prow .n-lg{color:var(--signal);padding-top:4px}
.prow h3{font-size:clamp(22px,2vw,26px);font-weight:600;letter-spacing:-.02em;margin:10px 0 12px}
.prow p{font-size:15.5px;line-height:1.65;color:var(--text-dim);max-width:46ch}
.pitems li{padding:10px 0;border-top:1px solid var(--line);font-size:15px;line-height:1.45}
.pitems li:first-child{border-top:0;padding-top:4px}
.pitems li.first{font-weight:600;color:var(--text)}
.pitems li.first + li{border-top:2px solid rgba(226,87,31,.6)}
.pcards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:40px}
.card{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--signal);border-radius:10px;padding:30px 30px 26px;transition:border-color 150ms ease,transform 150ms ease,box-shadow 150ms ease}
.card:hover{border-color:var(--signal);border-left-color:var(--signal-dk);transform:translateY(-2px);box-shadow:0 8px 22px var(--shadow)}
.card h3{font-size:22px;font-weight:600;letter-spacing:-.02em;margin:10px 0 12px}
.card > p{font-size:15px;line-height:1.65;color:var(--text-dim)}
.card > p + p{margin-top:10px}
.card .fine{font-size:13px;color:var(--text-faint)}

/* ── licensing: selector + route ───────────────────────────────────────────── */
.lic{background:var(--surface);position:relative;color:var(--text)}
/* Process stays dark in light mode too, so the page alternates the same way in both themes.
   The dark tokens are re-declared on the section, so every rule inside reads them unchanged. */
:root[data-theme="light"] .lic{
  --base:#111625; --surface:#161C2D; --surface-2:#1C2336; --line:#262D3F; --line-2:#323A4F;
  --text:#FFFFFF; --text-dim:#A9AFBE; --text-faint:#6B7488; --num-rest:#2C3447;
  --grid:rgba(255,255,255,.035); --shadow:rgba(0,0,0,.35);
}
.lic::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(180deg,var(--grid) 0 1px,transparent 1px 64px),repeating-linear-gradient(90deg,var(--grid) 0 1px,transparent 1px 64px)}
.lic > .wrap{position:relative}
.lx{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.45fr);gap:0 56px;align-items:start}
.lx-left{position:sticky;top:calc(var(--head-h) + 28px);align-self:start}
.lx-left .shead{margin-bottom:28px}
.lx-left .shead h2{margin-bottom:0}
.lx-lede{margin-bottom:28px}
.lx-lede p{max-width:none}
.lx-tabs{display:grid}
.lx-tab{display:grid;grid-template-columns:56px minmax(0,1fr) 20px;gap:0 10px;align-items:center;text-align:left;background:none;border:0;border-bottom:1px solid var(--line-2);padding:20px 4px 20px 16px;cursor:pointer;position:relative;width:100%}
.lx-tab:first-child{border-top:1px solid var(--line-2)}
.lx-tab::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:2px;background:transparent;transition:background 200ms ease}
.lx-tab .n-lg{color:var(--num-rest);transition:color 200ms ease}
.lx-name{display:block;font-family:var(--display);font-size:18px;font-weight:600;letter-spacing:-.01em;line-height:1.3;color:var(--text-dim);transition:color 200ms ease}
.lx-by{display:block;font-family:var(--display);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--signal);margin-top:5px}
.lx-remit{display:block;font-size:13px;color:var(--text-dim);margin-top:5px;line-height:1.45}
.lx-tick{color:var(--signal);opacity:0;transform:translateX(-4px);transition:opacity 200ms ease,transform 200ms ease}
.lx-tick svg{width:16px;height:16px}
.lx-tab:hover .lx-name{color:var(--text)}
.lx-tab:hover .n-lg{color:var(--text-faint)}
.lx-tab[aria-selected="true"]::before{background:var(--signal)}
.lx-tab[aria-selected="true"] .n-lg{color:var(--signal)}
.lx-tab[aria-selected="true"] .lx-name{color:var(--text)}
.lx-tab[aria-selected="true"] .lx-tick{opacity:1;transform:none}
.lx-tab:focus-visible{outline-offset:-2px}
.lx-panel[hidden]{display:none}
html:not(.js) .lx-panel[hidden]{display:block;margin-top:20px}   /* no script: every route is on the page */
html:not(.js) .vcap__h{display:none}
.lx-card{background:var(--base);border:1px solid var(--line);border-radius:10px;padding:34px 38px 32px}
.lx-head{display:flex;justify-content:space-between;gap:24px;align-items:baseline;flex-wrap:wrap}
.lx-card h3{font-size:clamp(24px,2.2vw,28px);font-weight:600;letter-spacing:-.025em}
.lx-count{font-family:var(--display);font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim);white-space:nowrap}
.lx-fw{margin-top:10px;color:var(--text-dim);font-size:14.5px;line-height:1.6;max-width:70ch}
.steps{margin-top:26px;border-top:1px solid var(--line)}
.steps li{display:grid;grid-template-columns:56px minmax(0,1fr);gap:0 8px;align-items:baseline;padding:14px 0;border-bottom:1px solid var(--line)}
.steps .n-lg{font-size:22px;color:var(--signal)}
.steps b{display:block;font-family:var(--display);font-size:16px;font-weight:600;letter-spacing:-.01em;line-height:1.3}
.steps span{display:block;font-size:14px;line-height:1.55;color:var(--text-dim);margin-top:3px}
.js .lx-panel.is-in .steps li{animation:stepin .5s cubic-bezier(.2,.7,.3,1) both;animation-delay:calc(var(--s) * 60ms)}
@keyframes stepin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.lx-foot{margin-top:26px}
.lx-foot .lab{display:block;margin-bottom:12px}

/* ── regulation: the perimeter diagram, ported from the client's reference ────
   Three filled circles with hairline rings; every regulator and product is an
   HTML button positioned over the SVG, so each label is one line of real text
   beside a dot rather than two lines boxed inside a shape. The hues are the
   reference's own, one per regulator, scoped to this section; everything else
   on the page stays orange. */
.reg{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:64px;align-items:start}
.reg-sec{--fg-sbp:#86D3C4;--fg-secp:#AFC0F7;--fg-pvara:#F2ACC2;--fg-sbp-fill:#0F3E37;--fg-secp-fill:#1C2758;--fg-pvara-fill:#4C1B2F;
  --fg-sbp-stroke:#45AE9B;--fg-secp-stroke:#7189DC;--fg-pvara-stroke:#DB6E95;--fg-blend:screen;--fg-dot:10px}
:root[data-theme="light"] .reg-sec{--fg-sbp:#1E6F62;--fg-secp:#3C519F;--fg-pvara:#9A3A5D;--fg-sbp-fill:#86D3C4;--fg-secp-fill:#AFC0F7;--fg-pvara-fill:#F2ACC2;--fg-blend:multiply}
.fg{margin:0;width:100%;max-width:34rem;container-type:inline-size;container-name:figwrap}
.fg-stage{position:relative;aspect-ratio:720/600;container-type:inline-size;container-name:fig}
.fg-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.fg-fill{mix-blend-mode:var(--fg-blend);transition:opacity .7s cubic-bezier(.16,1,.3,1)}
.fg-fill-sbp{fill:var(--fg-sbp-fill)} .fg-fill-secp{fill:var(--fg-secp-fill)} .fg-fill-pvara{fill:var(--fg-pvara-fill)}
.fg-ring{fill:none;stroke-width:1.6;stroke-dasharray:1006;stroke-dashoffset:0;transform-box:fill-box;transform-origin:center;rotate:-90deg;transition:stroke-dashoffset 1.2s cubic-bezier(.16,1,.3,1),opacity .32s}
.fg-ring-sbp{stroke:var(--fg-sbp-stroke)} .fg-ring-secp{stroke:var(--fg-secp-stroke)} .fg-ring-pvara{stroke:var(--fg-pvara-stroke)}
.fg-reg{position:absolute;left:var(--x);top:var(--y);display:flex;flex-direction:column;align-items:flex-start;gap:.15em;margin:0;padding:.3em 0;border:0;background:none;color:var(--text);cursor:pointer;text-align:left;white-space:nowrap;font-family:var(--sans);translate:0 -50%;transition:opacity .32s}
.fg-reg-r{align-items:flex-end;text-align:right;translate:-100% -50%}
.fg-reg-c{align-items:center;text-align:center;translate:-50% -50%}
.fg-reg b{display:inline-flex;align-items:center;gap:.45em;font-size:clamp(11.5px,2.3cqi,14px);font-weight:700;letter-spacing:.015em;line-height:1.2}
.fg-reg b::before{content:"";width:.72em;height:.72em;border-radius:50%;background:var(--sw-fill);box-shadow:inset 0 0 0 1.5px var(--sw-stroke)}
.fg-reg span{font-size:clamp(10px,1.9cqi,12px);line-height:1.35;color:var(--text-dim)}
.fg-reg-sbp{--sw-fill:var(--fg-sbp-fill);--sw-stroke:var(--fg-sbp-stroke)} .fg-reg-secp{--sw-fill:var(--fg-secp-fill);--sw-stroke:var(--fg-secp-stroke)} .fg-reg-pvara{--sw-fill:var(--fg-pvara-fill);--sw-stroke:var(--fg-pvara-stroke)}
.fg-pt{--dot-c:var(--text);position:absolute;left:var(--x);top:var(--y);display:flex;align-items:center;gap:.5em;margin:0;padding:0;border:0;background:none;color:var(--text);cursor:pointer;
  font-family:var(--sans);font-size:clamp(11px,2.25cqi,13.5px);font-weight:500;line-height:1.2;white-space:nowrap;
  transform:translate(calc(var(--fg-dot) / -2),-50%);transition:opacity .32s,translate .7s cubic-bezier(.16,1,.3,1)}
.fg-pt::before{content:"";flex:none;width:var(--fg-dot);height:var(--fg-dot);border-radius:50%;background:var(--dot-c);box-shadow:0 0 0 2.5px var(--base);transition:scale .32s cubic-bezier(.16,1,.3,1)}
.fg-pt::after{content:"";position:absolute;inset:-12px -8px}
.fg-pt[data-side="l"]{flex-direction:row-reverse;transform:translate(calc(-100% + var(--fg-dot) / 2),-50%)}
.fg-pt[data-side="b"]{flex-direction:column;gap:.35em;transform:translate(-50%,calc(var(--fg-dot) / -2))}
.fg-pt-sbp{--dot-c:var(--fg-sbp)} .fg-pt-secp{--dot-c:var(--fg-secp)} .fg-pt-pvara{--dot-c:var(--fg-pvara)}
.fg-label{text-shadow:0 0 1px var(--base),0 0 3px var(--base),0 0 6px var(--base),0 0 10px var(--base)}
.fg-pt:hover::before,.fg-pt.is-lit::before{scale:1.4}
.fg-pt.is-lit .fg-label{font-weight:700}
.fg-pt:focus-visible,.fg-reg:focus-visible{outline:2px solid var(--signal);outline-offset:4px;border-radius:3px}
.fg[data-hl] .fg-fill{opacity:.28}
.fg[data-hl] .fg-ring{opacity:.35}
.fg[data-hl~="sbp"] .fg-fill-sbp,.fg[data-hl~="secp"] .fg-fill-secp,.fg[data-hl~="pvara"] .fg-fill-pvara,
.fg[data-hl~="sbp"] .fg-ring-sbp,.fg[data-hl~="secp"] .fg-ring-secp,.fg[data-hl~="pvara"] .fg-ring-pvara{opacity:1}
.fg[data-hl] .fg-pt:not(.is-lit),.fg[data-hl] .fg-reg:not(.is-lit){opacity:.34}
/* draws itself on arrival: rings first, then the fills, then the labels; `is-settled` then drops the stagger so hover is immediate */
.js .fg:not(.is-drawn) .fg-ring{stroke-dashoffset:1006}
.js .fg:not(.is-drawn) .fg-fill{opacity:0}
.js .fg:not(.is-drawn) .fg-pt,.js .fg:not(.is-drawn) .fg-reg{opacity:0}
.js .fg:not(.is-drawn) .fg-pt{translate:0 7px}
.fg.is-drawn .fg-ring-secp{transition-delay:130ms} .fg.is-drawn .fg-ring-pvara{transition-delay:260ms}
.fg.is-drawn .fg-fill-sbp{transition-delay:700ms} .fg.is-drawn .fg-fill-secp{transition-delay:800ms} .fg.is-drawn .fg-fill-pvara{transition-delay:900ms}
.fg.is-drawn .fg-reg{transition-delay:1000ms}
.fg.is-drawn .fg-pt{transition-delay:calc(1250ms + var(--i) * 70ms)}
.fg.is-settled .fg-ring,.fg.is-settled .fg-fill,.fg.is-settled .fg-reg,.fg.is-settled .fg-pt{transition-delay:0ms}
.fg-cap{margin-top:22px;min-height:5.6em;display:grid;align-content:start;gap:4px;padding-left:18px;border-left:2px solid var(--signal)}
.fg-t{font-family:var(--display);font-size:17px;font-weight:600;line-height:1.3;color:var(--text)}
.fg-n{font-size:13.5px;line-height:1.55;color:var(--text-dim)}
.fg-n .hint{display:block;margin-top:2px;color:var(--signal)}
/* (0,2,0) both ways round, or the block rule above outranks the hiding and both hints show */
.fg-n .hint-touch{display:none}
@media (hover:none),(pointer:coarse){.fg-n .hint-touch{display:block}.fg-n .hint-hover{display:none}}
/* the products as chips — only where the figure is too narrow to carry its labels, where they are the legend */
.vprods{display:none;margin-top:16px}
.vprods .chip{cursor:pointer;display:inline-flex;align-items:center;gap:7px}
.vprods .chip::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--dot-c,var(--text))}
.vprods .chip:hover,.vprods .chip.on,.vprods .chip:focus-visible{border-color:var(--signal);color:var(--signal)}
/* THE LABELS STAY ON A PHONE, from 2026-10-13, at the owner's instruction. They
   were hidden below 26rem and the chips under the figure stood in as a legend,
   which left nine unnamed dots on the diagram itself. They are set smaller and
   allowed onto two lines instead, so each still sits beside its own point and
   inside the figure. The chips are no longer shown: they would name every
   product a second time directly underneath. */
@container figwrap (max-width:26rem){
  .fg-reg span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .fg-pt{font-size:10.5px;line-height:1.15;gap:.4em;white-space:normal}
  .fg-label{max-width:6.3em;text-wrap:balance}
  .fg-pt[data-side="l"] .fg-label{text-align:right}
  .fg-pt[data-side="r"] .fg-label{text-align:left}
  .fg-pt[data-side="b"] .fg-label{text-align:center}
  .fg-pt::after{inset:-10px -6px}
}
.percopy h3{font-size:clamp(22px,2vw,26px);font-weight:600;letter-spacing:-.02em;margin-bottom:16px}
.percopy p{font-size:16px;line-height:1.7;color:var(--text-dim);margin-bottom:16px}

/* ── reach: the dotted hub map, ported from the client's reference ───────────
   The land is a single dotted path; every route is a quadratic arc from a
   capital into Pakistan, drawn on arrival with a dash travelling inbound. The
   jurisdictions sit under it as one-line pills, and a pill or a point lights
   its own route. The hub ring is static on purpose — the routes already move. */
.reach .shead-row{align-items:end}
.wmap{margin-top:8px}
.wmap-stage svg{display:block;width:100%;height:auto;overflow:visible}
.map-dots{fill:none;stroke:#2B3550;stroke-width:2.6;stroke-linecap:round}
.arc{fill:none;stroke:var(--signal);stroke-width:1.1;opacity:.55;stroke-dasharray:var(--len);stroke-dashoffset:var(--len);
  transition:stroke-dashoffset 1.6s cubic-bezier(.16,1,.3,1) calc(var(--i) * 60ms),opacity .32s,stroke-width .32s}  /* the stagger is on the draw alone: a hover on the 21st route must not wait 1.2s to light */
.wmap.is-in .arc,html:not(.js) .arc{stroke-dashoffset:0}
.flow{fill:none;stroke:#FFA982;stroke-width:2;stroke-linecap:round;stroke-dasharray:3 var(--len);opacity:0;transition:opacity .6s ease 1.6s}
.wmap.is-in .flow{opacity:.95;animation:flow 3.2s linear infinite;animation-delay:calc(var(--i) * -170ms)}
@keyframes flow{from{stroke-dashoffset:var(--len)}to{stroke-dashoffset:0}}
.org{fill:var(--signal);transition:r .32s cubic-bezier(.16,1,.3,1),opacity .32s}
.hubring{fill:none;stroke:var(--signal);stroke-opacity:.5;stroke-width:1.2}
.hub{fill:#fff;stroke:var(--signal);stroke-width:2}
.hublabel{font:700 20px var(--display);letter-spacing:-.02em;fill:#fff;paint-order:stroke;stroke:var(--navy);stroke-width:4px}
.tip{font:600 11px var(--sans);fill:#fff;text-anchor:middle;opacity:0;pointer-events:none;transition:opacity .2s;paint-order:stroke;stroke:var(--navy);stroke-width:3px}
.wmap[data-hl] .arc{opacity:.12}
.wmap[data-hl] .arc.is-on{opacity:1;stroke-width:2}
.wmap[data-hl] .flow:not(.is-on){opacity:0}
.wmap[data-hl] .org:not(.is-on){opacity:.35}
.wmap .org.is-on{r:7}
.wmap .tip.is-on{opacity:1}
.juris{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
.jbtn{display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.03);
  font:500 13px/1 var(--sans);color:rgba(255,255,255,.82);cursor:pointer;white-space:nowrap;transition:border-color 150ms ease,color 150ms ease}
.jbtn:hover,.jbtn:focus-visible,.jbtn.is-on{border-color:var(--signal);color:#fff}
.jbtn:focus-visible{outline:2px solid var(--signal);outline-offset:2px}

/* ── work: Hassaan's track record — the website's own block, under this page's head ──
   Six claims on a six-column track: each spans two, so a row is three across;
   two left over span three each and one left over spans the row, so the last
   row always runs the full width whatever the count. Left-aligned and never
   hyphenated, because at 356px a justified sentence opens gaps and splits
   "licence" — the website learned that the hard way. */
.work{border-top:1px solid rgba(255,255,255,.08)}
.work .shead-row{align-items:end}
.trk{margin-top:8px}
.trk-k{font-family:var(--display);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.6);line-height:1.4;margin:0 0 18px}
.trk-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));column-gap:32px;row-gap:28px;margin:0;padding:0;list-style:none}
.trk-i{grid-column:span 2;border-top:2px solid var(--signal);padding-top:14px}
.trk-i:nth-last-child(2):nth-child(3n+1),.trk-i:last-child:nth-child(3n+2){grid-column:span 3}
.trk-i:last-child:nth-child(3n+1){grid-column:span 6}
.trk-p{margin:0;font-size:15px;line-height:1.65;color:rgba(255,255,255,.82);text-align:left;-webkit-hyphens:manual;hyphens:manual}

/* ── socials: the four networks as their own marks, big enough to read ────────
   Glyphs are Simple Icons (CC0), the brands' official shapes. At rest a quiet
   outlined tile; on hover the tile takes the brand's colour, lifts 2px and
   throws a soft shadow in the same colour. X has no colour, so it inverts. A
   network with nothing behind it is marked, inert and does not light. Every
   rule is `.soc-row .soc` because `.rows a` (0,1,1) would otherwise put its
   underline back under the tiles in the contact table. */
.soc-row{display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap}
.soc-row .soc{--brand:var(--signal);--on:#fff;display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:12px;border:1px solid var(--line-2);background:var(--surface);color:var(--brand);text-decoration:none;
  transition:background 200ms ease,border-color 200ms ease,color 200ms ease,transform 200ms ease,box-shadow 200ms ease}
.soc-row .soc svg{width:26px;height:26px;fill:currentColor;display:block}
.soc-row .soc:hover,.soc-row .soc:focus-visible{background:var(--brand);border-color:var(--brand);color:var(--on);transform:translateY(-2px);box-shadow:0 12px 28px -10px var(--brand)}
.soc-row .soc:focus-visible{outline:2px solid var(--signal);outline-offset:3px}
.soc-row .soc-wa{--brand:#25D366} .soc-row .soc-wx{--brand:#07C160} .soc-row .soc-li{--brand:#0A66C2}
.soc-row .soc-x{--brand:#fff;--on:#111625}
:root[data-theme="light"] .soc-row .soc-x{--brand:#111625;--on:#fff}
.dark .soc-row .soc{border-color:rgba(255,255,255,.16);background:rgba(255,255,255,.04)}
.dark .soc-row .soc-x{--brand:#fff;--on:#111625}
/* CHAMBERS, 2026-10-13: Chambers' own mark, an <img>, never recoloured. The
   other four tiles fill with their brand's colour on hover and turn the glyph
   white; this one cannot, so its tile keeps its ground and the border and the
   lift say it instead. */
.soc-row .soc-ch{--brand:#006EFB}
.soc-row .soc-ch img{height:26px;width:auto;display:block}
.soc-row.soc-sm .soc-ch img{height:20px}
.soc-row .soc-ch:hover,.soc-row .soc-ch:focus-visible{background:var(--surface);color:var(--brand)}
.dark .soc-row .soc-ch:hover,.dark .soc-row .soc-ch:focus-visible{background:rgba(255,255,255,.04)}
.soc-row .soc[aria-disabled="true"]{cursor:default}
.soc-row .soc[aria-disabled="true"]:hover{background:var(--surface);border-color:var(--line-2);color:var(--brand);transform:none;box-shadow:none}
.dark .soc-row .soc[aria-disabled="true"]:hover{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.16)}
.soc-row.soc-sm{gap:8px} .soc-row.soc-sm .soc{width:42px;height:42px;border-radius:9px} .soc-row.soc-sm .soc svg{width:20px;height:20px}
.acts{align-items:center}
/* a hairline between the button and the networks: two groups, not one control with four extras. Off on a phone, where the icons drop to their own line. */
.acts-sep{width:1px;height:32px;background:var(--line-2);margin:0 6px}
.dark .acts-sep,.hero .acts-sep{background:rgba(255,255,255,.18)}
:root[data-theme="light"] .hero .acts-sep{background:var(--line-2)}
.rows div.rows-soc{align-items:center}
.rows .soc-row{display:inline-flex}
/* the WeChat dialog: the QR on a white plate, the ID beside a copy button */
.wx-dlg{margin:auto;border:0;padding:0;background:transparent;max-width:none;color:var(--text)}  /* margin:auto is the centring; the page reset zeroes it */
.wx-dlg::backdrop{background:rgba(5,8,16,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.wx-card{position:relative;width:min(380px,calc(100vw - 40px));padding:28px 28px 24px;border-radius:14px;background:var(--surface);border:1px solid var(--line-2);box-shadow:0 30px 80px -30px rgba(0,0,0,.6);text-align:center}
.wx-dlg[open] .wx-card{animation:wx-in .32s cubic-bezier(.16,1,.3,1)}
@keyframes wx-in{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}
.wx-close{position:absolute;top:12px;right:12px;width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:8px;background:transparent;color:var(--text-dim);cursor:pointer;transition:background 150ms ease,color 150ms ease}
.wx-close:hover,.wx-close:focus-visible{background:var(--surface-2);color:var(--text)}
.wx-close svg{width:18px;height:18px}
.wx-card .eyebrow{margin-bottom:12px}
.wx-card h3{font-size:22px;margin-bottom:18px}
.wx-qr{display:block;width:240px;height:240px;margin:0 auto;padding:10px;border-radius:10px;background:#fff}
.wx-id{display:grid;grid-template-columns:1fr auto;gap:4px 12px;align-items:center;margin-top:20px;padding:12px 14px;border:1px solid var(--line-2);border-radius:8px;text-align:left}
.wx-id .lab{grid-column:1;font-size:10px}
.wx-id code{grid-column:1;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14px;color:var(--text);word-break:break-all}
.wx-copy{grid-column:2;grid-row:1 / span 2;padding:9px 14px;font-size:13px}
.wx-hint{margin-top:14px;font-size:13px;line-height:1.5;color:var(--text-dim)}
.wx-hint-touch{display:none}
@media (hover:none),(pointer:coarse){.wx-hint-touch{display:block}.wx-hint-hover{display:none}}

/* ── shared by both portfolios: a dark section that keeps the dark tokens in light mode, a numbered
   method list, a second selector under a list, a three-across list inside a full-width card ── */
.dark.inked{--base:#111625;--surface:#161C2D;--surface-2:#1C2336;--line:#262D3F;--line-2:#323A4F;--text:#FFFFFF;--text-dim:#A9AFBE;--text-faint:#6B7488;--num-rest:#2C3447;--grid:rgba(255,255,255,.035);--shadow:rgba(0,0,0,.35)}
.prow > p{margin-top:12px;max-width:none}
.lx-sub{margin-top:72px}
.lx-sub .lx-left .shead h3{font-size:clamp(26px,2.6vw,34px);letter-spacing:-.025em}
.lx-note{margin-top:18px;font-size:13px;line-height:1.55;color:var(--text-faint)}
.gov .deals-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 32px;margin-top:16px}
.gov .deals-3 li{border-top:2px solid rgba(226,87,31,.6)}
.gov .deals-3 .dd{margin-top:2px}
.gov > p{font-size:15px;line-height:1.65;color:var(--text-dim);margin-top:10px}
.gov .sub{margin-top:18px;padding-top:0;border-top:0}

/* ── beyond fintech ────────────────────────────────────────────────────────── */
.bf2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.bf2 .card{display:flex;flex-direction:column}
.deals{margin-top:8px;flex:1}
.deals li{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:18px;row-gap:3px;padding:14px 0;border-top:1px solid var(--line)}
.deals li:first-child{border-top:2px solid rgba(226,87,31,.6)}
.deals .dn{font-weight:600;font-size:15.5px;line-height:1.4}
.deals .dv{font-family:var(--display);font-weight:600;font-size:15px;color:var(--signal);white-space:nowrap;text-align:right;font-variant-numeric:tabular-nums}
.deals .dd{grid-column:1 / -1;color:var(--text-dim);font-size:14px;line-height:1.55}
.sub{margin-top:22px;padding-top:16px;border-top:1px solid var(--line)}
.sub .lab{display:block;margin-bottom:10px}
.sub p{font-size:14.5px;line-height:1.6;color:var(--text-dim)}
.fx{margin-top:16px;font-size:12.5px;color:var(--text-faint)}
.gov{margin-top:20px}
.gov ul{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));column-gap:24px;row-gap:16px;margin-top:8px}
.gov li{border-top:2px solid rgba(226,87,31,.6);font-weight:500;padding-top:12px;line-height:1.5;font-size:14.5px}

/* ── contact + credentials ─────────────────────────────────────────────────── */
.cta{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:64px;align-items:start}
.cta .shead p{font-size:17px}
.rows div{display:grid;grid-template-columns:110px minmax(0,1fr);gap:14px;padding:15px 0;border-top:1px solid rgba(255,255,255,.12);font-size:15.5px;align-items:baseline}
.rows div:last-child{border-bottom:1px solid rgba(255,255,255,.12)}
.rows b{font-family:var(--display);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--signal)}
.rows a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.3);word-break:break-word;transition:border-color 150ms ease}
.rows a:hover{border-color:var(--signal)}
.creds{margin-top:60px;padding-top:28px;border-top:1px solid rgba(255,255,255,.12)}
.creds .lab{display:block;margin-bottom:8px}
.creds ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:48px}
.creds li{padding:14px 0;border-bottom:1px solid rgba(255,255,255,.12);font-size:15px;line-height:1.55}
.creds li b{display:block;font-family:var(--display);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-bottom:4px}

/* ── footer ────────────────────────────────────────────────────────────────── */
footer{background:var(--navy);color:rgba(255,255,255,.7);border-top:1px solid rgba(255,255,255,.12);padding:30px 0 44px;font-size:13px}
.ft{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.ft .brand img,:root[data-theme="light"] .ft .brand img{filter:brightness(0) invert(1);height:64px}
.ft .brand-tag{color:rgba(255,255,255,.5);border-left-color:rgba(255,255,255,.2)}
.ft .brand:hover .brand-tag{color:rgba(255,255,255,.85)}
.ft-r{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.ft .quiet{color:rgba(255,255,255,.7)}
.ft .quiet:hover{color:var(--signal)}

/* ── touch: bigger targets where there is a finger, not a cursor ─────────── */
@media (pointer:coarse){
  .vprods .chip{padding:9px 14px;font-size:13.5px}
  .crumb a,.rows a{display:inline-block;padding:8px 0}
  .rev-btn{width:44px;height:44px}
  .quiet{padding:8px 0}
  .jbtn{min-height:40px}
}

/* ── reveal ────────────────────────────────────────────────────────────────── */
.js [data-reveal]{opacity:0;transform:translateY(12px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.3,1)}
.js [data-reveal].is-in{opacity:1;transform:none}

/* ── breakpoints ───────────────────────────────────────────────────────────── */
@media (max-width:1180px){
  .roles{grid-template-columns:repeat(3,minmax(0,1fr))}
  .site-head .brand-tag{display:none}
  .nav{gap:20px}
  .nav a{font-size:13px}
  .hd{gap:24px}
}
@media (max-width:1023.98px){
  .nav{display:none}
  .hd-r > .quiet{display:none}
  .burger{display:inline-flex}
  .hero-grid{column-gap:40px}
  .lx{grid-template-columns:1fr;gap:28px}
  .lx-left{position:static}
  .lx-left .shead{margin-bottom:24px}
  .lx-tabs{grid-template-columns:1fr 1fr;gap:12px}
  .lx-tab{border:1px solid var(--line-2);border-radius:10px;padding:16px 16px 16px 18px;background:var(--base);grid-template-columns:44px minmax(0,1fr) 16px;align-items:start}
  .lx-tab:first-child{border-top:1px solid var(--line-2)}
  .lx-tab::before{top:12px;bottom:12px}
  .lx-tab[aria-selected="true"]{border-color:var(--signal)}
  .lx-remit{display:none}
  .reg{grid-template-columns:1fr;gap:40px}
  .prow{grid-template-columns:56px minmax(0,1fr);gap:0 24px}
  .prow .pitems{grid-column:2;margin-top:18px}
  .cta{grid-template-columns:1fr;gap:40px}
  .shead-row{grid-template-columns:1fr;gap:20px;align-items:start}
  .rec-grid{grid-template-columns:minmax(0,1fr);gap:40px}
}
@media (max-width:900px){
  section{padding:64px 0}
  .hero-grid{grid-template-columns:1fr;grid-template-areas:"id" "photo" "copy";row-gap:28px}
  .portrait{justify-self:start;max-width:360px}
  .portrait img{aspect-ratio:4/5;object-position:50% 15%}
  .stats{grid-template-columns:1fr 1fr}
  .stat-k{grid-column:1 / -1;border-left:0;padding-left:0;border-top:1px solid var(--line)}
  .stat-k .stat-bar{left:0}
  .stat-k.is-counted .stat-bar{width:calc(100% - 24px)}
  .roles{grid-template-columns:1fr 1fr}
  .pcards{grid-template-columns:1fr}
  .trk-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .trk-i,.trk-i:nth-last-child(2):nth-child(3n+1),.trk-i:last-child:nth-child(3n+2){grid-column:auto}
  .trk-i:last-child:nth-child(odd){grid-column:1 / -1}
  .bf2{grid-template-columns:1fr}
  .gov .deals-3{grid-template-columns:1fr;gap:0}
  .gov ul{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .wrap{padding:0 20px}
  section{padding:56px 0}
  .brand-tag{display:none}
  h1{font-size:clamp(46px,13vw,60px)}
  .plate{grid-template-columns:1fr;gap:6px;padding:18px 20px}
  .plate-n{font-size:40px}
  .lede{font-size:17px}
  .acts .btn,.acts .btn-out{flex:1;justify-content:center}
  .acts .soc-row{flex-basis:100%}
  .acts-sep{display:none}
  .soc-row .soc{width:52px;height:52px}
  .wx-card{padding:24px 20px 20px}
  .wx-qr{width:220px;height:220px}
  .stats{grid-template-columns:1fr}
  .stat + .stat{border-left:0;padding-left:0;border-top:1px solid var(--line)}
  .stat + .stat .stat-bar{left:0}
  .roles{grid-template-columns:1fr;gap:20px}
  .lx-tabs{grid-template-columns:1fr}
  .lx-card{padding:24px 20px 22px}
  .steps li{grid-template-columns:44px minmax(0,1fr)}
  .steps .n-lg{font-size:18px}
  .prow{grid-template-columns:1fr;padding:28px 0}
  .prow .n-lg{padding-top:0}
  .prow .pitems{grid-column:1}
  .wmap-stage{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -20px;padding:0 20px}
  .wmap-stage svg{width:820px;max-width:none}
  .juris{gap:6px}
  .jbtn{min-height:32px;padding:0 12px;font-size:12.5px}
  .trk-grid{grid-template-columns:minmax(0,1fr)}
  .trk-i:last-child:nth-child(odd){grid-column:auto}
  .deals li{grid-template-columns:1fr}
  .deals .dv{text-align:left}
  .gov ul{grid-template-columns:1fr}
  .creds ul{grid-template-columns:1fr}
  .rows div{grid-template-columns:1fr;gap:4px}
  .tiles{grid-template-columns:1fr;gap:18px}
  .rev::before{font-size:64px;margin-bottom:16px}
  .rev-item blockquote{font-size:21px;padding-right:0}
  .rev-foot{flex-direction:column;align-items:flex-start;gap:14px}
  .ft{flex-direction:column;align-items:flex-start}
}

/* ── justified prose on desktop: long paragraphs only, never headings, labels or lists ── */
@media (min-width:640px){
  .lede,.shead p,.prow p,.card > p,.percopy p{text-align:justify;hyphens:auto;-webkit-hyphens:auto}
}

/* ── print: a clean one-to-two page CV ─────────────────────────────────────── */
@media print{
  @page{size:A4;margin:10mm 14mm}
  :root,:root[data-theme]{--base:#fff;--surface:#fff;--line:#ccc;--line-2:#ccc;--text:#000;--text-dim:#000;--text-faint:#444;--navy:#fff;--grid:transparent}
  .theme{display:none!important}
  html{scroll-behavior:auto}
  body{font-size:9.5pt;line-height:1.4;color:#000;background:#fff}
  .site-head,.nav-panel,.crumb,.acts,.prog,.lic,.reg-sec,.wmap-stage,.vprods,.rows-soc,.wx-dlg,.rev-ctl,.rev-item:not(:first-child),.pcards,.deals .dd,.sub,.fx,.ft-r,.stat-bar,.stat-k,.rol svg,.roles-sec .rol::before,.shead-row .shead p,.bf2 .card > p{display:none!important}
  .js [data-reveal]{opacity:1!important;transform:none!important;transition:none!important}
  section,.hero,.roles-sec{padding:7pt 0!important;scroll-margin:0}
  .dark{background:#fff!important;color:#000!important;background-image:none!important}
  .dark .shead p,.tile span,.rev-item blockquote,.qsrc,.rows a,.creds li,.creds li b,.jbtn,.trk-p,.role span,.lede,.stat-l,.rol span,.prow p,.card > p{color:#000!important}
  .eyebrow{border:0;padding:0;margin-bottom:3pt;color:#000;font-size:8pt}
  .lab,.rows b,.trk-k,.prow .lab,.card .lab{color:#000!important;font-size:7.5pt}
  .wrap{max-width:none;padding:0}
  .hero{padding-top:0!important}
  .hero-grid{grid-template-columns:1fr 40mm;grid-template-areas:"id photo" "copy photo";column-gap:8mm;row-gap:0}
  h1{font-size:26pt;margin:0 0 6pt;max-width:none}
  .role{font-size:12pt;margin-top:2pt}
  .role span{font-size:9.5pt;margin-top:2pt}
  .role-bar{font-size:8pt}
  .portrait{max-width:40mm}
  .portrait img{border-radius:2pt;aspect-ratio:3/4}
  .plate{margin-top:8pt;padding:6pt 10pt;border-color:#000;border-left:2pt solid #000;max-width:none;display:grid;grid-template-columns:auto 1fr;gap:0 10pt;align-items:baseline}
  .plate .lab{grid-column:1 / -1;margin-bottom:2pt}
  .plate-s{margin-bottom:0;font-size:7.5pt}
  .plate-n{font-size:15pt}
  .plate-sub{margin-top:0;font-size:9pt}
  .lede{margin-top:7pt;font-size:9pt;max-width:none}
  .stats{margin-top:8pt;border-top:1pt solid #000;grid-template-columns:1fr 1fr}
  .stat{padding:5pt 8pt 5pt 0}
  .stat + .stat{padding-left:8pt;border-left-color:#999}
  .stat-n{font-size:14pt}
  .stat-l,.stat-k p{font-size:8.5pt;margin-top:2pt}
  .stat-k{padding-top:5pt}
  .roles{grid-template-columns:repeat(5,1fr);gap:8pt}
  .rol{padding-top:5pt;grid-template-columns:1fr;border-top:1pt solid #000}
  .rol b{font-size:9.5pt}
  .rol span{font-size:8pt;margin-top:2pt}
  .shead h2{font-size:13pt;margin-bottom:2pt}
  .shead p{font-size:9pt;max-width:none;margin-bottom:0}
  .shead-row{display:block;margin-bottom:4pt}
  .tiles{display:grid;grid-template-columns:1fr 1fr;max-width:none;gap:10mm;margin:4pt 0 6pt}
  .tile{border-top:1pt solid #000;padding-top:4pt}
  .tile b{font-size:12pt}
  .tile span{font-size:8pt;margin-top:2pt}
  .rec-grid{display:block}
  .rev::before{display:none}
  .rev{padding-top:0}
  .rev-track{display:block;transform:none!important}
  .rev-item blockquote{font-size:9.5pt;padding:0 0 0 8pt;border-left:1pt solid #000;max-width:none;line-height:1.4}
  .rev-foot{margin-top:4pt;padding-top:0;border:0}
  .tiles{margin:6pt 0}
  .plist{border-top:1pt solid #000}
  .prow{grid-template-columns:18pt 1fr 1.3fr;gap:0 10pt;padding:6pt 0;border-bottom-color:#999;align-items:start}
  .prow .pitems{grid-column:3;margin-top:2pt}
  .prow .n-lg{font-size:11pt;padding-top:2pt;color:#000}
  .prow h3{font-size:10.5pt;margin:1pt 0 2pt}
  .prow p{font-size:8.5pt;max-width:none}
  .pitems li{display:inline;padding:0;border:0;font-size:8.5pt;font-weight:400;color:#000}
  .pitems li::after{content:" · "}
  .pitems li:last-child::after{content:""}
  .bf2{grid-template-columns:1fr 1fr;gap:8mm}
  .card{padding:0;background:#fff;border:0;border-radius:0}
  .card h3{font-size:10.5pt;margin:2pt 0 3pt}
  .card > p{font-size:8.5pt}
  .deals{margin-top:3pt}
  .deals li{padding:1.5pt 0;border-top-color:#ccc;column-gap:8pt}
  .deals li:first-child{border-top:1pt solid #000}
  .deals .dn{font-size:8.5pt}
  .deals .dv{font-size:8.5pt;color:#000}
  .gov{margin-top:8pt;border-top:1pt solid #000;padding-top:6pt}
  .gov ul{grid-template-columns:repeat(3,1fr);gap:3pt 10pt;margin-top:3pt}
  .gov li{border-top:0;padding-top:0;font-size:8.5pt}
  .wmap{margin:0}
  .juris{display:block;margin:0}
  .jbtn{all:unset;display:inline;font-size:8.5pt;color:#000}
  .jbtn::after{content:", "}
  .jbtn:last-child::after{content:""}
  .work{border-top:0}
  .trk{margin:0}
  .trk-k{margin:0 0 4pt}
  .trk-grid{grid-template-columns:repeat(3,1fr);gap:6pt 8mm}
  .trk-i,.trk-i:nth-last-child(2):nth-child(3n+1),.trk-i:last-child:nth-child(3n+2),.trk-i:last-child:nth-child(3n+1){grid-column:auto;border-top:1pt solid #000;padding-top:3pt}
  .trk-p{font-size:8.5pt;line-height:1.4}
  .cta{grid-template-columns:1fr 1.6fr;gap:8mm;align-items:start}
  .cta .shead p{display:block!important}
  .cta .shead p{font-size:9pt}
  .rows div{padding:3pt 0;border-top-color:#ccc;grid-template-columns:60pt 1fr;gap:6pt;font-size:9pt}
  .rows div:last-child{border-bottom-color:#ccc}
  .rows a{border:0}
  .creds{margin-top:8pt;padding-top:6pt;border-top:1pt solid #000}
  .creds ul{grid-template-columns:repeat(3,1fr);column-gap:6mm}
  .creds li{padding:3pt 0;border-bottom-color:#ccc;font-size:8.5pt}
  .creds li b{font-size:7.5pt;margin-bottom:1pt;color:#000!important}
  footer{background:#fff!important;color:#000;border-top:1pt solid #000;padding:6pt 0}
  .ft .brand img{filter:none;height:28pt}
  .ft .brand-tag{color:#000;border-left-color:#999}
  a{text-decoration:none;color:inherit}
  #practice,#wider,#contact,#recognition{break-inside:auto}
  .prow,.card,.trk-i,.creds li{break-inside:avoid}
}

/* ── reduced motion: the last block, so nothing declared later can undo it ─── */
@media (prefers-reduced-motion:reduce){
  .js [data-reveal]{opacity:1;transform:none;transition:none}
  .nav a::after,.nav a,.quiet,.btn,.btn-out,.chip,.crumb a,.plate,.card,.prow,.rol,.rows a,.jbtn,.theme{transition:none}
  .plate:hover,.card:hover{transform:none;box-shadow:none}
  .rev-track{transition:none}
  .rev-btn span{transition:none}
  .stat-bar{transition:none}
  .stat.is-counted .stat-bar{width:calc(100% - 24px)}
  .lx-tab::before,.lx-tab .n-lg,.lx-name,.lx-tick{transition:none}
  .lx-tab[aria-selected="true"] .lx-tick{transform:none}
  .js .lx-panel.is-in .steps li{animation:none}
  .fg-ring,.fg-fill,.fg-reg,.fg-pt,.fg-pt::before{transition:none}
  .soc-row .soc,.wx-close{transition:none}
  .soc-row .soc:hover,.soc-row .soc:focus-visible{transform:none;box-shadow:none}
  .wx-dlg[open] .wx-card{animation:none}
  .arc,.org,.tip{transition:none}
  .arc{stroke-dashoffset:0}
  .flow{display:none}
  .burger-bars,.burger-bars::before,.burger-bars::after{transition:none}
}


/* ── shared by every portfolio: a question row carries its statute line as fine print ── */
.prow .fine{font-size:13px;line-height:1.5;color:var(--text-faint);max-width:none;margin-top:10px}
.lede + .lede{margin-top:14px}

/* ── shared by every portfolio: a card may carry status chips between its title and its copy; a stats
   row may be two labelled blocks with no numeral; a roles row may have four; a "what I prepare" key
   above the practice list; a note under the credentials ── */
.card .chips{margin:0 0 14px}
.card .chips .chip b{font-weight:600;color:var(--text);margin-right:2px}
.stats.stats-2{grid-template-columns:1fr 1fr}
.stats.stats-2 .stat-k{grid-column:auto}
.roles.roles-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.creds .creds-note{margin-top:18px;font-size:13px;color:var(--text-faint)}
@media (max-width:1180px){.roles.roles-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){.stats.stats-2{grid-template-columns:1fr}.stats.stats-2 .stat + .stat{border-left:0;padding-left:0;border-top:1px solid var(--line)}.stats.stats-2 .stat + .stat .stat-bar{left:0}}
@media (max-width:640px){.roles.roles-4{grid-template-columns:1fr}}

/* ── shared by every portfolio: a roles row with no icons; a bold key inside a practice item; a link under a list ── */
.roles.roles-plain .rol{grid-template-columns:1fr}
.roles.roles-plain .rol span{margin-top:8px}
.pitems li b{font-weight:600;color:var(--text);margin-right:4px}
.plist-more{margin-top:28px}
.prow .fine + p{margin-top:8px}

/* ── shared by every portfolio: a roles row of three; chips after a paragraph in a card; a numbered steps list inside a card ── */
.roles.roles-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.card p + .chips{margin-top:14px}
.card .steps{margin-top:20px}
@media (max-width:900px){.roles.roles-3{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.roles.roles-3{grid-template-columns:1fr}}

/* ── shared by every portfolio: a key as the first item of a practice list, "what I prepare" over the items ── */

/* a list that follows a pair of cards needs the same air a section head gives it */
.pcards + .plist{margin-top:44px}

/* ── NO AUTOMATIC HYPHENATION, and justification only where a line is long enough to carry it ──
   Declared AFTER the justification block above at the same weight, so it wins. "cred-it", "pay-ment" and
   "li-censing" were showing up in the prose columns of the practice rows and the cards — the columns are
   450 to 560px wide, which is the fault the website's own .trk-p exception exists for. The hero lede and
   the section ledes stay justified (they run 60 to 70 characters a line) but no word is ever split. */
.lede,.shead p,.prow p,.card > p,.percopy p,.sub p,.steps span,.deals .dd,.rol span,.fg-n,.lx-fw,.pitems li{-webkit-hyphens:manual;hyphens:manual}
.prow p,.prow > p,.card > p,.percopy p,.sub p{text-align:left}

/* ── RAGGED RIGHT EVERYWHERE, 2026-10-09. With hyphenation off (above), justified ledes measured word gaps of
   12 to 19px at 16 to 18px type — three to four times a normal space — on every page, in columns of 480 to
   610px. A page that splits no word and opens no river is the professional one; this is the portfolios'
   rule, not the website's, which justifies wider measures with hyphenation the client asked for. */
.lede,.shead p,.lx-lede p,.fg-n,.cta .shead p{text-align:left}

/* ── Touch and small screens, 2026-10-12 ───────────────────────────────────
   The same two rules the site's own stylesheet took in the responsive sweep:
   44px on anything a finger aims at, and 15px body text on a phone. Sizes of
   glyphs and labels do not change; the box around them does. */
@media (pointer:coarse),(max-width:1000px){
  .brand{min-height:44px}
  .theme,.burger{width:44px;height:44px}
  .soc{min-width:44px;min-height:44px}
  .jbtn{min-height:44px}
  .quiet{min-height:44px;padding-top:0;padding-bottom:0}
  button.chip{min-height:44px}
  .crumb a,.rows a{padding-block:13px}
}
@media (max-width:640px){
  .jbtn{min-height:44px}
  .lx-fw,.sub p,.gov li{font-size:15px}
}

/* ── The logo, 2026-10-12 — the same three steps the site's header takes ───
   64px in an 88px bar from 1024 up, 56 in 80 on a tablet, 52 in 72 on a
   phone. The footer's stays 64px at every width, including the phone, where
   an earlier rule on `.brand img` would otherwise shrink it with the header's.
   `--head-h` is this stylesheet's own and every sticky offset reads it. */
/* Below 1024 the nav is hidden, and the nav was what pushed the buttons to the
   right (`margin-left:auto`). Without it the theme and menu buttons sat hard
   against the logo, on the left. They take the margin instead. */
@media (max-width:1023.98px){:root{--head-h:80px}.site-head .brand img{height:56px}.hd-r{margin-left:auto}}
@media (max-width:639.98px){:root{--head-h:72px}.site-head .brand img{height:52px}}