/* hyperwrk.com: the one sheet of the candidate site's own pages (brief 134; served at /s/site.css).
   The look is the Maison system: ux_next/notes/website-plan/design-system/hyperwrk/MASTER.md and its overrides by the
   Planner (Sid's choice "1 Maison", 20 Oct 2026). Every colour, face and motion token is here once, as --site-* and --m-*;
   no page declares a palette of its own. Motion follows ux_next/notes/website-plan/motion.md: transforms and opacity only,
   no library, no overshoot, exits faster than entrances, everything an opacity change under reduced motion. */

:root{
  /* the palette, as measured in the mockup (every text pair at 4.59:1 or better on the ground) */
  --site-bg:#FAFAF9; --site-surface:#FFFFFF; --site-surface-2:#F3F2EF; --site-line:#D6D3D1; --site-line-2:#E7E5E4;
  --site-ink:#0C0A09; --site-ink-2:#44403C; --site-ink-3:#78716C;
  --site-gold:#A16207; --site-gold-deep:#8A5406; --site-on-gold:#FFFFFF;
  --site-crit:#B42318;
  /* the executive band (brief 135): the one dark surface, its words and its links */
  --site-band:#0C0A09; --site-band-ink:#FAFAF9; --site-band-ink-2:#C9C4BC; --site-band-gold:#E3B65A; --site-band-line:#3B3734;
  /* the faces: Cormorant for every title and field, Montserrat for the words */
  --site-serif:"Cormorant",Georgia,"Times New Roman",serif;
  --site-sans:"Montserrat","Helvetica Neue",Helvetica,Arial,sans-serif;
  --site-display:clamp(44px,6vw,80px); --site-h2:38px; --site-h3:24px; --site-body:15px; --site-lh:1.7;
  /* the shape: square, no shadow, hairlines, 48 px buttons, 44 px targets, 8 px gaps */
  --site-btn-h:48px; --site-target:44px; --site-gap:8px; --site-wrap:1180px; --site-pad:40px; --site-sec:96px;
  /* motion (motion.md's tokens; the springs are critically damped linear() curves, sampled with Motion's own mapping) */
  --m-quick:180ms; --m-base:320ms; --m-move:450ms; --m-settle:740ms; --m-slow:970ms; --m-ease:cubic-bezier(.22,1,.36,1);
  --m-spring-quick:linear(0, 0.02376, 0.08161, 0.1582, 0.2431, 0.3294, 0.4129, 0.4909, 0.562, 0.6256, 0.6819, 0.731, 0.7736, 0.8101, 0.8412, 0.8677, 0.89, 0.9088, 0.9246, 0.9377, 0.9487, 0.9578, 0.9653, 0.9716, 0.9767, 0.9809, 0.9844, 0.9873, 0.9896, 0.9916, 0.9931, 0.9944, 0.9955, 0.9963, 0.997, 0.9976, 0.998, 0.9984, 0.9987, 0.999, 1);
  --m-spring-settle:linear(0, 0.02318, 0.07977, 0.1549, 0.2385, 0.3237, 0.4064, 0.4839, 0.5547, 0.6184, 0.6748, 0.7243, 0.7672, 0.8041, 0.8358, 0.8627, 0.8856, 0.9049, 0.921, 0.9346, 0.946, 0.9554, 0.9633, 0.9698, 0.9752, 0.9796, 0.9833, 0.9863, 0.9888, 0.9909, 0.9925, 0.9939, 0.995, 0.996, 0.9967, 0.9973, 0.9978, 0.9982, 0.9986, 0.9988, 1);
  --m-spring-slow:linear(0, 0.01609, 0.05714, 0.1143, 0.1811, 0.2524, 0.3247, 0.3956, 0.4633, 0.5267, 0.5852, 0.6386, 0.6867, 0.7297, 0.7678, 0.8015, 0.8309, 0.8565, 0.8787, 0.8979, 0.9143, 0.9283, 0.9403, 0.9504, 0.959, 0.9662, 0.9722, 0.9773, 0.9815, 0.985, 0.9879, 0.9903, 0.9922, 0.9938, 0.9951, 0.9962, 0.997, 0.9977, 0.9982, 0.9987, 1);
  color-scheme:light;
}

/* ---------------------------------------------------------------- base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html,body{margin:0;background:var(--site-bg)}
body{min-height:100vh;display:flex;flex-direction:column;font:400 var(--site-body)/var(--site-lh) var(--site-sans);color:var(--site-ink);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
main{flex:1 0 auto}
h1,h2,h3{margin:0;font-family:var(--site-serif);font-weight:500;color:var(--site-ink)}
h1{font-size:var(--site-display);line-height:1.02;letter-spacing:-.01em;text-wrap:balance}
h2{font-size:var(--site-h2);line-height:1.12;letter-spacing:-.01em}
h3,.h3{font-size:var(--site-h3);line-height:1.25}
p{margin:0;text-wrap:pretty}
a{color:inherit;cursor:pointer;text-decoration-thickness:1px;text-underline-offset:3px}
button{font:inherit;color:inherit}
:focus{outline:none}
:focus-visible{outline:2px solid var(--site-gold);outline-offset:3px}
[hidden]{display:none!important}
.wrap{max-width:var(--site-wrap);margin:0 auto;padding:0 var(--site-pad);width:100%}
.label{display:inline-block;font:600 11px/1.4 var(--site-sans);letter-spacing:.18em;text-transform:uppercase;color:var(--site-ink-3)}
.lede{font-size:16px;color:var(--site-ink-2);max-width:52ch}
.small{font:400 13px/1.6 var(--site-sans);color:var(--site-ink-3)}
.small a{color:var(--site-ink-2)}
.muted{color:var(--site-ink-2)}
.skip{position:absolute;left:12px;top:-60px;z-index:20;background:var(--site-ink);color:#fff;padding:12px 16px;
  font:600 12px/1 var(--site-sans);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;transition:top var(--m-quick) var(--m-ease)}
.skip:focus-visible{top:12px}

/* ---------------------------------------------------------------- the top bar (the five items, the byline) */
.mast{position:sticky;top:0;z-index:5;background:var(--site-bg);border-bottom:1px solid var(--site-line);
  animation:m-fade var(--m-move) var(--m-ease) both;transition:border-color var(--m-base) var(--m-ease)}
.scrolled .mast{border-bottom-color:var(--site-ink-3)}
.mast-in{display:flex;align-items:center;justify-content:space-between;gap:24px;height:84px}
.brand{display:inline-flex;align-items:baseline;gap:14px;padding:10px 0;text-decoration:none}
.wordmark{font:600 24px/1 var(--site-serif);letter-spacing:-.005em;color:var(--site-ink)}
.byline{font:500 10.5px/1.2 var(--site-sans);color:var(--site-ink-3);letter-spacing:.16em;text-transform:uppercase}
.nav{display:flex;gap:34px;align-items:center}
.nav a,.nav button,.menu,.link{background:none;border:0;padding:0;cursor:pointer}
.nav a,.nav button{display:inline-flex;align-items:center;min-height:var(--site-target);font:600 11px/1 var(--site-sans);
  letter-spacing:.18em;text-transform:uppercase;color:var(--site-ink-2);text-decoration:none;border-bottom:1px solid transparent;
  transition:color var(--m-quick) var(--m-ease),border-color var(--m-quick) var(--m-ease)}
.nav a:hover,.nav button:hover{color:var(--site-ink)}
.nav a[aria-current="page"]{color:var(--site-ink);border-bottom-color:var(--site-ink)}
.menu{display:none;min-height:var(--site-target);min-width:var(--site-target);font:600 11px/1 var(--site-sans);letter-spacing:.18em;
  text-transform:uppercase;color:var(--site-ink)}

/* the phone menu (motion 10): in with the settle spring, out faster */
.menu-scrim{position:fixed;inset:0;z-index:8;background:rgba(12,10,9,.35);opacity:0;pointer-events:none;
  transition:opacity var(--m-base) var(--m-ease)}
.menu-panel{position:fixed;top:0;right:0;bottom:0;z-index:9;width:min(320px,86vw);background:var(--site-bg);border-left:1px solid var(--site-line);
  padding:20px 24px;display:flex;flex-direction:column;gap:4px;transform:translateX(100%);visibility:hidden;
  transition:transform var(--m-base) var(--m-ease),visibility 0s linear var(--m-base)}
.menu-open .menu-scrim{opacity:1;pointer-events:auto}
.menu-open .menu-panel{transform:none;visibility:visible;transition:transform var(--m-settle) var(--m-spring-settle),visibility 0s}
.menu-panel .close{align-self:flex-end;min-height:var(--site-target);min-width:var(--site-target);background:none;border:0;cursor:pointer;
  font:500 12px/1 var(--site-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--site-ink-3)}
.menu-panel a,.menu-panel .menu-out{display:flex;align-items:center;min-height:var(--site-target);padding:12px 0;border:0;border-bottom:1px solid var(--site-line-2);
  background:none;cursor:pointer;text-align:left;font:600 11px/1 var(--site-sans);letter-spacing:.18em;text-transform:uppercase;
  color:var(--site-ink);text-decoration:none;opacity:0;transform:translateX(12px);
  transition:opacity var(--m-move) var(--m-ease),transform var(--m-move) var(--m-spring-quick);transition-delay:calc(var(--i,0) * 60ms + 120ms)}
.menu-open .menu-panel a,.menu-open .menu-panel .menu-out{opacity:1;transform:none}

/* ---------------------------------------------------------------- the arrival (motion 1) */
@keyframes m-rise{from{opacity:0;transform:translateY(var(--m-rise,16px))}to{opacity:1;transform:none}}
@keyframes m-fade{from{opacity:0}to{opacity:1}}
.m-arrive{animation:m-rise var(--m-slow) var(--m-spring-slow) both;animation-delay:calc(var(--i,0) * 90ms)}

/* ---------------------------------------------------------------- buttons (motion 4) */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:var(--site-btn-h);min-height:var(--site-btn-h);
  padding:0 26px;background:var(--site-ink);color:#FFFFFF;border:1px solid var(--site-ink);border-radius:0;cursor:pointer;
  font:600 12px/1 var(--site-sans);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;text-decoration:none;
  transition:background var(--m-base) var(--m-ease),border-color var(--m-base) var(--m-ease),color var(--m-base) var(--m-ease),
    transform var(--m-quick) var(--m-ease)}
.btn:hover{background:var(--site-ink-2);border-color:var(--site-ink-2)}
.btn:active{transform:scale(.985)}
.btn.cta{background:var(--site-gold);border-color:var(--site-gold);color:var(--site-on-gold)}
.btn.cta:hover{background:var(--site-gold-deep);border-color:var(--site-gold-deep)}
.btn.quiet{background:transparent;color:var(--site-ink);border-color:var(--site-ink)}
.btn.quiet:hover{background:var(--site-ink);color:var(--site-bg)}
.btn[disabled],.btn[aria-busy="true"]{cursor:default;opacity:.55}
.btn[disabled]:active{transform:none}
.link{display:inline-flex;align-items:center;min-height:var(--site-target);font:600 12px/1.2 var(--site-sans);letter-spacing:.06em;
  color:var(--site-ink);text-decoration:underline;text-decoration-color:var(--site-line);text-underline-offset:4px;
  transition:text-decoration-color var(--m-quick) var(--m-ease),color var(--m-quick) var(--m-ease)}
.link:hover{text-decoration-color:var(--site-ink)}
.link[disabled]{cursor:default;color:var(--site-ink-3);text-decoration-color:transparent}

/* ---------------------------------------------------------------- fields: 1 px underlines in Cormorant 22 (motion 5) */
.field{position:relative;display:flex;flex-direction:column;gap:10px}
.field::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--site-gold);transform:scaleY(0);
  transform-origin:bottom;transition:transform var(--m-base) var(--m-ease)}
.field:focus-within::after{transform:scaleY(1)}
.field .label{transition:color var(--m-base) var(--m-ease)}
.field:focus-within .label{color:var(--site-ink)}
.field input{width:100%;min-height:var(--site-target);padding:10px 0;border:0;border-bottom:1px solid var(--site-ink);border-radius:0;
  background:transparent;color:var(--site-ink);font:400 22px/1.2 var(--site-serif);outline:0;transition:border-color var(--m-base) var(--m-ease)}
.field input::placeholder{color:var(--site-ink-3)}
.field input:focus-visible{outline:0}
.field input[readonly]{border-bottom-color:var(--site-line)}
.field.bad input,.boxes.bad input{border-bottom-color:var(--site-crit)}
.field.bad::after{background:var(--site-crit)}
.opt{letter-spacing:.06em;text-transform:none;font-weight:500}
/* an error stands beside its field, in a sentence, and fades in (no shake) */
.err{min-height:0;font:500 13px/1.5 var(--site-sans);color:var(--site-crit);opacity:0;transition:opacity var(--m-base) var(--m-ease)}
.err:not(:empty){opacity:1;margin-top:-4px}

/* ---------------------------------------------------------------- the sign-in (/login) */
.door{padding:112px 0 var(--site-sec);display:grid;justify-items:center;text-align:center;gap:22px}
.door h1{max-width:16ch}
.door .lede{margin:0 auto}
.panels{display:grid;width:100%;max-width:440px;margin-top:18px;text-align:left}
/* two (three) panels share one grid cell, so the step changes without a jump (motion 11) */
.panel{grid-area:1/1;display:grid;gap:18px;align-content:start;transition:opacity var(--m-quick) var(--m-ease),transform var(--m-quick) var(--m-ease)}
.panel.out{opacity:0;transform:translateX(-16px);pointer-events:none}
.panel.in{animation:m-step var(--m-settle) var(--m-spring-settle) both}
@keyframes m-step{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
.panel .btn{width:100%}
.consent{font-size:13px}
.consent a{color:var(--site-ink-2)}
.sent{font:400 16px/1.6 var(--site-sans);color:var(--site-ink-2)}
.sent b{font-weight:600;color:var(--site-ink);overflow-wrap:anywhere}
.code-field{border:0;margin:0;padding:0;min-width:0}
.code-field legend{padding:0;margin-bottom:12px}
.boxes{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.boxes input{width:100%;min-width:0;height:64px;padding:0;text-align:center;border:0;border-bottom:1px solid var(--site-ink);border-radius:0;
  background:transparent;color:var(--site-ink);font:500 34px/1 var(--site-serif);font-variant-numeric:lining-nums tabular-nums;
  caret-color:var(--site-gold);outline:0;transition:border-color var(--m-base) var(--m-ease),box-shadow var(--m-base) var(--m-ease)}
.boxes input:focus-visible,.boxes input:focus{border-bottom-color:var(--site-gold);box-shadow:inset 0 -1px 0 var(--site-gold)}
/* after a wrong code every box says so, the focused one too (brief 135 row B6: the focus rule came after the bad one) */
.boxes.bad input,.boxes.bad input:focus,.boxes.bad input:focus-visible{border-bottom-color:var(--site-crit);box-shadow:inset 0 -1px 0 var(--site-crit)}
.panel.in .boxes input{animation:m-rise var(--m-move) var(--m-spring-quick) both;--m-rise:12px;animation-delay:calc(var(--i,0) * 60ms + 160ms)}
/* the resend: a hairline drains under the words over the seconds left; reduced motion keeps the seconds in words */
.resend{display:flex;flex-wrap:wrap;align-items:center;gap:0 10px;position:relative;padding-bottom:6px}
.resend .when{font:400 13px/1.5 var(--site-sans);color:var(--site-ink-3)}
.drain{position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--site-gold);transform-origin:left;transform:scaleX(0)}
.drain.go{transform:scaleX(1)}
.drain.run{transform:scaleX(0);transition:transform var(--drain,60s) linear}
.note{font:400 13px/1.6 var(--site-sans);color:var(--site-ink-2)}

/* ---------------------------------------------------------------- the account (/me) */
.hello{padding:88px 0 40px;display:grid;gap:16px}
.hello h1{font-size:clamp(40px,5vw,64px)}
.namebox{display:grid;gap:18px;max-width:440px;padding:28px 0 0;border-top:1px solid var(--site-ink);margin-bottom:56px}
.tabs{display:flex;gap:32px;border-bottom:1px solid var(--site-line);margin-bottom:8px}
.tabs button{position:relative;min-height:var(--site-btn-h);background:none;border:0;padding:0;cursor:pointer;font:600 11px/1 var(--site-sans);
  letter-spacing:.18em;text-transform:uppercase;color:var(--site-ink-3);transition:color var(--m-quick) var(--m-ease)}
.tabs button::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--site-ink);transform:scaleX(0);
  transform-origin:left;transition:transform var(--m-move) var(--m-spring-quick)}
.tabs button[aria-selected="true"]{color:var(--site-ink)}
.tabs button[aria-selected="true"]::after{transform:scaleX(1)}
.tabs button:hover{color:var(--site-ink)}
.tabpanel{padding:8px 0 var(--site-sec)}
.tabpanel.in{animation:m-fade var(--m-base) var(--m-ease) both}
.roles{display:grid;border-top:1px solid var(--site-line-2)}
.role{display:grid;grid-template-columns:5fr 3fr 2fr 1.4fr;gap:24px;align-items:baseline;padding:22px 0;border-bottom:1px solid var(--site-line-2);
  min-height:var(--site-target);color:inherit;text-decoration:none}
.role .title{font:500 26px/1.2 var(--site-serif)}
.role .meta{font:400 13px/1.5 var(--site-sans);color:var(--site-ink-2)}
.role .stage{font:600 11px/1.4 var(--site-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--site-ink)}
.role .when{font:400 12.5px/1.5 var(--site-sans);color:var(--site-ink-3);text-align:right}
a.role .title{position:relative}
@media (hover:hover){
  a.role .title::after{content:"";position:absolute;left:0;width:100%;bottom:-6px;height:1px;background:var(--site-gold);transform:scaleX(0);
    transform-origin:left;transition:transform var(--m-move) var(--m-spring-quick)}
  a.role:hover .title::after{transform:scaleX(1)}
  a.role .when{transition:color var(--m-base) var(--m-ease)}
  a.role:hover .when{color:var(--site-gold)}
}
/* an empty state fades in, its one line of advice rises after it (motion 14) */
.empty{padding:56px 0 0;display:grid;gap:14px;justify-items:start;animation:m-fade var(--m-move) var(--m-ease) both}
.empty .advice{animation:m-rise var(--m-move) var(--m-ease) both;--m-rise:8px;animation-delay:120ms}
.empty p{font:500 26px/1.25 var(--site-serif);color:var(--site-ink)}
.profile{display:grid;gap:28px;max-width:520px;padding-top:28px}
.kv{display:grid;gap:8px}
.kv .v{font:400 22px/1.2 var(--site-serif);overflow-wrap:anywhere}
.devices{margin-top:56px;padding-top:28px;border-top:1px solid var(--site-line);display:grid;gap:14px;max-width:520px;justify-items:start}
/* the account's CV (brief 135 row B3): its name, and Replace; the file input under its label, which is the button */
.cvline{margin-top:56px;padding-top:28px;border-top:1px solid var(--site-line);display:grid;gap:14px;max-width:520px;justify-items:start}
.picker{position:relative}
.picker input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.picker input:focus-visible+label{outline:2px solid var(--site-gold);outline-offset:3px}
/* an application's row on /me: its title the link to the role, Withdraw beside its stage while it may be */
div.role a.title{color:inherit;text-decoration:none;position:relative}
.role .acts{display:flex;flex-wrap:wrap;gap:var(--site-gap) 14px;align-items:center;grid-column:1/-1}
@media (hover:hover){
  div.role a.title::after{content:"";position:absolute;left:0;width:100%;bottom:-6px;height:1px;background:var(--site-gold);transform:scaleX(0);
    transform-origin:left;transition:transform var(--m-move) var(--m-spring-quick)}
  div.role a.title:hover::after{transform:scaleX(1)}
}

/* ---------------------------------------------------------------- the small pages */
.plain{padding:112px 0 var(--site-sec);display:grid;gap:22px;max-width:720px}
.plain p{color:var(--site-ink-2);max-width:60ch}
.plain .acts{display:flex;flex-wrap:wrap;gap:var(--site-gap) 16px;margin-top:12px}

/* ---------------------------------------------------------------- a toast (motion 13) */
.toasts{position:fixed;left:0;right:0;top:20px;z-index:10;display:grid;justify-items:center;gap:8px;pointer-events:none}
.toast{background:var(--site-ink);color:#FFFFFF;font:500 13px/1.4 var(--site-sans);padding:14px 20px;max-width:min(92vw,520px);
  animation:m-rise var(--m-settle) var(--m-spring-settle) both;--m-rise:8px}
.toast.bye{animation:m-out var(--m-quick) var(--m-ease) both}
@keyframes m-out{to{opacity:0;transform:translateY(-4px)}}
@keyframes m-fadeout{to{opacity:0}}

/* ---------------------------------------------------------------- the home, the roles and a role (brief 135 row B1) */
/* the hero: a tracked kicker, the oversized serif line, the lede, the search; centred, extreme whitespace */
.hero{padding-top:128px;display:grid;justify-items:center;text-align:center;gap:22px}
.hero h1{max-width:16ch}
.hero h1 em{font-style:italic;color:var(--site-gold)}
.hero .lede{margin:0 auto}
.search{display:grid;grid-template-columns:1fr 1fr auto;gap:28px;align-items:end;width:100%;max-width:960px;margin:18px auto 0;text-align:left}
.search .btn{height:52px;min-height:52px}
/* the role families: tracked words with their counts, each a link to its roles */
.cats{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--site-gap) 36px;padding-top:44px;padding-bottom:var(--site-sec)}
.cats a{display:inline-flex;align-items:baseline;gap:10px;min-height:var(--site-target);padding:12px 0;font:600 11px/1 var(--site-sans);
  letter-spacing:.18em;text-transform:uppercase;color:var(--site-ink-2);text-decoration:none;transition:color var(--m-quick) var(--m-ease)}
.cats a b{font-weight:400;color:var(--site-ink-3);letter-spacing:.06em}
.cats a:hover{color:var(--site-gold)}
.sec{padding-bottom:var(--site-sec)}
.sechead{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--site-gap) 24px;margin-bottom:28px}
/* the roles as hairline rows: the number, the title, the client's line, the city with the mode and the band, the day */
.roles.list .role{grid-template-columns:52px 5fr 3fr 3fr 1.2fr;padding:24px 0}
.role .num{font:400 14px/1 var(--site-sans);letter-spacing:.06em;color:var(--site-gold);font-variant-numeric:tabular-nums}
.role .client{font:400 13px/1.5 var(--site-sans);color:var(--site-ink-2)}
.tag{display:inline-flex;align-items:center;min-height:32px;padding:6px 12px;border:1px solid var(--site-ink);border-radius:0;
  font:500 11px/1.2 var(--site-sans);letter-spacing:.06em;text-transform:uppercase;color:var(--site-ink);background:transparent}
.tag.nice{color:var(--site-ink-2);border-color:var(--site-line);border-style:dashed}
.tag.exec{min-height:0;padding:4px 8px;margin-left:12px;vertical-align:middle;border-color:var(--site-gold);color:var(--site-gold);font-size:10px}
/* the executive band: the one dark surface, quiet; its tracked label settles as it arrives (motion 6) */
.exec{background:var(--site-band);color:var(--site-band-ink);padding:var(--site-sec) 0;margin-bottom:var(--site-sec)}
.exec h2{color:var(--site-band-ink);margin-top:12px}
.exec .label,.exec .small{color:var(--site-band-ink-2)}
.exec .muted{color:var(--site-band-ink-2);margin-top:16px;max-width:44ch}
.exec .grid{display:grid;grid-template-columns:5fr 7fr;gap:56px;align-items:start}
.exec .cta{margin-top:28px;display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.exec .btn.quiet{color:var(--site-band-ink);border-color:var(--site-band-ink-2)}
.exec .btn.quiet:hover{background:var(--site-band-ink);color:var(--site-band);border-color:var(--site-band-ink)}
.exec .item{display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center;padding:18px 0;border-bottom:1px solid var(--site-band-line);
  min-height:var(--site-target);color:inherit;text-decoration:none}
.exec .item .title{display:block;font:500 22px/1.25 var(--site-serif);color:var(--site-band-ink)}
.exec .item .small{display:block;margin-top:4px}
.exec .go{font:600 11px/1 var(--site-sans);letter-spacing:.18em;text-transform:uppercase;color:var(--site-band-gold);white-space:nowrap}
.exec .go span{display:inline-block}
/* how it works beside the resume card */
.two{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin:22px 0 0;padding:0;list-style:none}
.step .n{display:block;font:italic 500 40px/1 var(--site-serif);color:var(--site-gold);margin-bottom:10px}
.step h3{margin-bottom:8px}
.step p{color:var(--site-ink-2);font-size:14px;line-height:1.6}
.card{border-top:1px solid var(--site-ink);padding-top:28px;display:grid;gap:12px;justify-items:start}
.card .btn{margin-top:12px}
/* /jobs: the search again, the filters as plain links, the count */
.listhead{padding:88px 0 8px;display:grid;gap:18px}
.listhead .search{margin:12px 0 0;max-width:none}
.filters{display:flex;flex-wrap:wrap;gap:0 28px;border-bottom:1px solid var(--site-line);margin-top:20px}
.filters a{display:inline-flex;align-items:center;min-height:var(--site-btn-h);font:600 11px/1 var(--site-sans);letter-spacing:.18em;
  text-transform:uppercase;color:var(--site-ink-3);text-decoration:none;border-bottom:1px solid transparent;margin-bottom:-1px;
  transition:color var(--m-quick) var(--m-ease),border-color var(--m-quick) var(--m-ease)}
.filters a:hover{color:var(--site-ink)}
.filters a[aria-current="page"]{color:var(--site-ink);border-bottom-color:var(--site-ink)}
.count{font:400 13px/1.5 var(--site-sans);color:var(--site-ink-3);padding:22px 0 10px}
.listing{padding-bottom:var(--site-sec)}
/* a role: the crumbs, the head with its facts and the apply box, the body with its lists */
.crumbs{font:400 12.5px/1.5 var(--site-sans);color:var(--site-ink-3);padding:28px 0 0}
.crumbs a{display:inline-flex;align-items:center;min-height:var(--site-target);color:var(--site-ink-2)}
.jobhead{display:grid;grid-template-columns:7fr 5fr;gap:56px;align-items:end;padding:36px 0 40px;border-bottom:1px solid var(--site-line)}
.jobhead h1{font-size:clamp(34px,4vw,54px);margin-top:10px}
.jobhead .tag.exec{margin:14px 0 0}
.facts{display:flex;flex-wrap:wrap;gap:10px 28px;margin:20px 0 0;padding:0;list-style:none;font:400 13.5px/1.5 var(--site-sans);color:var(--site-ink-2)}
.facts b{font-weight:600;color:var(--site-ink)}
.applybox{display:grid;gap:14px;justify-items:start}
.applybox .btn{min-width:264px}       /* the widest "Applied on <day>" (253 px measured) fits: the width is kept (motion 9) */
.applybox .lbl{transition:opacity var(--m-base) var(--m-ease)}   /* in at 320 ms; the script dips it out at 180 ms (motion 9) */
/* applied, or withdrawn: the button is ink and still, its words the state, not a faded button */
.applybox .btn[disabled]{opacity:1;cursor:default;background:var(--site-ink);border-color:var(--site-ink);color:#FFFFFF}
.applybox .consent{max-width:46ch}
.applybox>.err:empty,.applybox>.applied-line:empty{margin-top:-14px}
/* Apply (motion 9): the gold button crossfades to an ink "Applied", a line rises under it; the width never moves */
.applied-line{opacity:0;transform:translateY(8px);transition:opacity var(--m-move) var(--m-ease),transform var(--m-move) var(--m-ease)}
.applied-line:not(:empty){opacity:1;transform:none}
.applybox .step{display:grid;gap:18px;width:100%;max-width:440px;padding:22px 0 0;border-top:1px solid var(--site-line)}
.applybox .step .btn{width:100%}
.file{display:grid;gap:10px}
.file input{font:400 13px/1.5 var(--site-sans);color:var(--site-ink-2);min-height:var(--site-target)}
.file input::file-selector-button{margin-right:14px;height:40px;padding:0 16px;border:1px solid var(--site-ink);border-radius:0;background:transparent;
  font:600 11px/1 var(--site-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--site-ink);cursor:pointer}
.confirm{display:grid;gap:12px;justify-items:start;max-width:440px}
.confirm .acts{display:flex;flex-wrap:wrap;gap:var(--site-gap) 16px;align-items:center}
.jobbody{display:grid;grid-template-columns:7fr 4fr;gap:72px;padding:48px 0 var(--site-sec)}
.jobbody h2{font-size:24px;margin:32px 0 12px}
.jobbody h2:first-child,.jobbody .lede+h2{margin-top:0}
.jobbody .lede{margin-bottom:28px;max-width:58ch}
.jobbody p{max-width:58ch;color:var(--site-ink-2);margin-bottom:14px}
.tags{display:flex;flex-wrap:wrap;gap:8px 10px;margin:4px 0 8px;padding:0;list-style:none}
.aside .block{padding:22px 0;border-top:1px solid var(--site-line)}
.aside .block:first-child{border-top:0;padding-top:0}
.aside .block h3{margin-bottom:10px}
.aside .block p{font-size:14px;line-height:1.6;color:var(--site-ink-2)}
/* a section coming into view (motion 2): it rises and fades once, its rows one by one; only where the script runs, so a
   page read without it is whole */
.js .m-reveal{opacity:0;transform:translateY(20px);transition:opacity var(--m-settle) var(--m-ease),transform var(--m-settle) var(--m-spring-settle)}
.js .m-reveal.in{opacity:1;transform:none}
.js .m-reveal.slow{transform:translateY(24px);transition-duration:var(--m-slow),var(--m-slow);transition-timing-function:var(--m-ease),var(--m-spring-slow)}
.js .m-reveal.slow.in{transform:none}
.js .m-reveal .role,.js .m-reveal .item{opacity:0;transform:translateY(12px);transition:opacity var(--m-move) var(--m-ease),transform var(--m-move) var(--m-spring-quick);
  transition-delay:calc(var(--i,0) * 60ms)}
.js .m-reveal.in .role,.js .m-reveal.in .item{opacity:1;transform:none}
.js .exec .item{transition-delay:calc(var(--i,0) * 90ms + 200ms)}
.exec .label{transition:letter-spacing var(--m-slow) var(--m-ease)}
.js .exec.m-reveal .label{letter-spacing:.36em}
.js .exec.m-reveal.in .label{letter-spacing:.18em}
@media (hover:hover){
  .exec .go span{transition:transform var(--m-move) var(--m-spring-quick)}
  .exec .item:hover .go span{transform:translateX(4px)}
  a.role:hover .num{color:var(--site-gold-deep)}
}

/* ---------------------------------------------------------------- the executive section (brief 136): the quieter voice */
/* /executive: the band's dark ground under the head and the searches. The page arrives as one (no stagger), its tracked
   kicker settling from .36em to .18em of letter-spacing as the home's band label does (motion 6); the searches rise with
   the band's slow spring, together; no count. The rows end in "Share your profile" with the arrow (motion 7). */
.xhead{padding:112px 0 var(--site-sec);margin-bottom:0}
.xhead h1{color:var(--site-band-ink);margin-top:14px;max-width:18ch}
.xhead .lede{color:var(--site-band-ink-2);margin-top:20px}
.xhead .kicker{animation:m-rise var(--m-slow) var(--m-spring-slow) both,m-settle var(--m-slow) var(--m-ease) both}
@keyframes m-settle{from{letter-spacing:.36em}to{letter-spacing:.18em}}
.xlist{margin-top:64px;border-top:1px solid var(--site-band-line)}
.xlist .item{grid-template-columns:5fr 3fr 2.4fr auto;gap:24px;align-items:baseline;padding:24px 0}
.xlist .item .title{font-size:26px}
.xlist .item .small{margin-top:0}
.xlist .xrole .small{margin-top:6px}
.xlist .consultant{color:var(--site-band-ink)}
.js .xlist .item{transition-delay:0s}
.exec .empty p{color:var(--site-band-ink)}
.exec .link{color:var(--site-band-ink);text-decoration-color:var(--site-band-line)}
.exec .link:hover{text-decoration-color:var(--site-band-ink)}
/* the door, at /executive's foot and on /me's Profile: Register as an executive, the step it opens, the line once done */
.xdoor{padding-top:var(--site-sec);padding-bottom:var(--site-sec)}
.xdoor-in{display:grid;grid-template-columns:5fr 6fr;gap:64px;align-items:start;border-top:1px solid var(--site-ink);padding-top:40px}
.xdoor-in h2{margin-top:12px}
.xdoor-in .muted{margin-top:14px;max-width:44ch}
.xreg{display:grid;gap:16px;justify-items:start;max-width:520px;width:100%}
.xreg .step{display:grid;gap:18px;width:100%;padding:22px 0 0;border-top:1px solid var(--site-line)}
.xreg .step .btn{width:100%}
.xreg .consent{max-width:46ch}
.registered{font:500 22px/1.3 var(--site-serif);color:var(--site-ink)}
.registered:empty{display:none}
.xline{margin-top:56px;padding-top:28px;border-top:1px solid var(--site-line);display:grid;gap:14px;max-width:520px;justify-items:start}
/* the profile's fields: the longer ones a textarea under the same 1 px ink underline, the words in the serif (motion 5) */
.xfields{display:grid;gap:18px}
.field textarea{width:100%;min-height:var(--site-btn-h);padding:10px 0;border:0;border-bottom:1px solid var(--site-ink);border-radius:0;
  background:transparent;color:var(--site-ink);font:400 19px/1.5 var(--site-serif);outline:0;resize:vertical;
  transition:border-color var(--m-base) var(--m-ease)}
.field textarea:focus-visible{outline:0}
.field.bad textarea{border-bottom-color:var(--site-crit)}
/* a role's page of an executive search: the consultant under the title */
.consultant{font:400 14px/1.5 var(--site-sans);color:var(--site-ink-2)}
.jobhead .consultant{margin-top:14px}
/* the profile's step is long: while a step is open the head keeps the title at its top, not level with the step's foot */
.jobhead:has(.applybox .step:not([hidden])){align-items:start}
.consultant b{font-weight:600;color:var(--site-ink)}
@media (max-width:760px){
  .xhead{padding:44px 0 var(--site-sec)}
  .xlist{margin-top:36px}
  .xlist .item{grid-template-columns:1fr;gap:6px;padding:18px 0}
  .xdoor-in{grid-template-columns:1fr;gap:28px}
  .xreg{max-width:none}
}

/* ---------------------------------------------------------------- the resume builder (brief 137: /me/resume) */
/* the meter: a hairline that grows to the share (motion.md's settling: the settle spring, transform only), its words under it */
.meter{display:grid;gap:12px;max-width:720px;margin-bottom:48px}
.meter-bar{position:relative;height:1px;background:var(--site-line);overflow:hidden}
.meter-bar i{position:absolute;inset:0;background:var(--site-gold);transform:scaleX(0);transform-origin:left;
  transition:transform var(--m-settle) var(--m-spring-settle)}
.meter-words{font:500 13px/1.5 var(--site-sans);color:var(--site-ink-2)}
/* the form beside the PDF's choices; one column on the phone */
.rb{display:grid;grid-template-columns:7fr 4fr;gap:72px;align-items:start;padding-bottom:var(--site-sec)}
.rbform{display:grid;gap:0;min-width:0}
.fromcv{display:grid;gap:14px;justify-items:start;padding-bottom:40px;border-bottom:1px solid var(--site-line)}
.fromcv .acts,.rbside .acts{display:flex;flex-wrap:wrap;gap:var(--site-gap) 18px;align-items:center}
.rsec{display:grid;gap:22px;padding:40px 0;border-bottom:1px solid var(--site-line-2);min-width:0}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:22px 28px}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:22px 28px}
.rows{display:grid;gap:0}
.rrow{display:grid;gap:18px;padding:22px 0;border-top:1px solid var(--site-line-2);animation:m-rise var(--m-move) var(--m-spring-quick) both;--m-rise:8px}
.rrow:first-child{border-top:0;padding-top:0}
.rrow .remove{justify-self:start;color:var(--site-ink-2)}
.add{justify-self:start}
.check{display:inline-flex;align-items:center;gap:10px;min-height:var(--site-target);font:500 13px/1.4 var(--site-sans);color:var(--site-ink-2);cursor:pointer}
.check input{width:18px;height:18px;accent-color:var(--site-gold);cursor:pointer}
.field input[type="month"]{font-size:20px}
.field input:disabled{color:var(--site-ink-3);border-bottom-color:var(--site-line)}
/* a box the CV's reader only guessed: left blank, and said so under it */
.doubt{display:none;font:500 12px/1.4 var(--site-sans);color:var(--site-gold-deep)}
.field.doubted .doubt{display:block}
.field.doubted input{border-bottom-style:dashed}
/* the skills: chips typed with Enter, removed with Backspace or a tap; they wrap */
.chiplist{display:flex;flex-wrap:wrap;gap:var(--site-gap);margin:0;padding:0;list-style:none}
.chiplist:empty{display:none}
.chip{display:inline-flex;align-items:center;min-height:var(--site-target);padding:0 14px;border:1px solid var(--site-ink);border-radius:0;background:transparent;
  font:500 12px/1.2 var(--site-sans);letter-spacing:.04em;color:var(--site-ink);cursor:pointer;
  transition:background var(--m-base) var(--m-ease),color var(--m-base) var(--m-ease);max-width:100%;overflow-wrap:anywhere;text-align:left}
.chip:hover{background:var(--site-ink);color:var(--site-bg)}
.savebar{display:flex;flex-wrap:wrap;gap:var(--site-gap) 20px;align-items:center;padding-top:32px}
.saved{font:500 13px/1.5 var(--site-sans);color:var(--site-ink-3)}
.savebar .err{flex-basis:100%}
/* the PDF's side: the three templates as cards, Preview, Make this my CV, the own file */
.rbside{position:sticky;top:108px;display:grid;gap:18px;justify-items:start;border-top:1px solid var(--site-ink);padding-top:28px;min-width:0}
.tpls{display:grid;gap:0;width:100%}
.tpl{position:relative;display:grid;gap:4px;padding:16px 0 16px 34px;border-bottom:1px solid var(--site-line-2);cursor:pointer;min-height:var(--site-target)}
.tpl input{position:absolute;left:0;top:19px;width:18px;height:18px;margin:0;accent-color:var(--site-gold);cursor:pointer}
.tpl .tname{font:500 22px/1.2 var(--site-serif);color:var(--site-ink)}
.tpl:has(input:checked) .tname{color:var(--site-gold-deep)}
.rbside .kv .v{font-size:19px}
.previewbox{padding-bottom:var(--site-sec)}
.previewbox iframe{display:block;width:100%;height:80vh;border:1px solid var(--site-line);background:var(--site-surface)}
/* /me: the saved executive profile, shown and edited (brief 137 row 8) */
.xedit{display:grid;gap:18px;width:100%}
@media (max-width:760px){
  .rb{grid-template-columns:1fr;gap:40px}
  .grid2,.grid3{grid-template-columns:1fr;gap:18px}
  .rbside{position:static}
  .previewbox iframe{height:70vh}
}
/* ---------------------------------------------------------------- the footer's small print */
.foot{border-top:1px solid var(--site-line);padding:40px 0 64px;margin-top:auto}
.foot-in{display:grid;grid-template-columns:2fr 1fr;gap:40px;font:400 13px/1.8 var(--site-sans);color:var(--site-ink-2)}
.foot-in .byline{display:block;margin-top:10px}
.foot-in p{margin-top:14px;max-width:46ch}
.foot-in nav{display:flex;flex-direction:column}
.foot-in nav a{display:flex;align-items:center;min-height:var(--site-target);text-decoration:none;color:var(--site-ink-2)}
.foot-in nav a:hover,.foot-in p a:hover{color:var(--site-ink)}

/* ---------------------------------------------------------------- page to page (motion 12) */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:320ms;animation-timing-function:cubic-bezier(.22,1,.36,1)}

/* ---------------------------------------------------------------- the phone: one column, 18 px gutters, "Menu" */
@media (max-width:760px){
  :root{--site-pad:18px;--site-sec:56px}
  .mast-in{height:64px}
  /* the byline stays in the header, under the wordmark, so the bar holds the brand and Menu */
  .brand{flex-direction:column;align-items:flex-start;gap:4px;padding:6px 0}
  .byline{font-size:10px;letter-spacing:.14em}
  .nav{display:none}
  .menu{display:inline-flex;align-items:center;justify-content:center}
  h1{font-size:38px}
  .door{padding:48px 0 var(--site-sec);justify-items:start;text-align:left}
  .door .lede{margin:0}
  .panels{max-width:none}
  .boxes{gap:8px}
  .boxes input{height:56px;font-size:30px}
  .hello{padding:44px 0 28px}
  .hello h1{font-size:38px}
  .role{grid-template-columns:1fr;gap:6px;padding:18px 0}
  .role .when{text-align:left}
  .tabs{gap:24px}
  .plain{padding:48px 0 var(--site-sec)}
  .foot-in{grid-template-columns:1fr;gap:20px}
  .hero{padding-top:44px;justify-items:start;text-align:left}
  .hero .lede{margin:0}
  .search{grid-template-columns:1fr;gap:16px;margin:8px 0 0}
  .cats{justify-content:flex-start;gap:0 24px;padding-top:28px}
  .roles.list .role{grid-template-columns:1fr;gap:6px;padding:18px 0}
  .role .num{display:none}
  .exec{padding:44px 0;margin-bottom:var(--site-sec)}
  .exec .grid,.two,.jobhead,.jobbody{grid-template-columns:1fr;gap:28px}
  .exec .item{grid-template-columns:1fr;gap:8px}
  .steps{grid-template-columns:1fr;gap:20px}
  .listhead{padding:44px 0 8px}
  .jobhead{align-items:start}
  .applybox{justify-items:stretch}
  .applybox .btn{width:100%;min-width:0}
  .tag.exec{margin-left:8px}
}

/* ---------------------------------------------------------------- brief 138: saved roles, the account's settings, the law
   pages, the footer's grievance line, Contact. The Save beside Apply is a quiet link of 44 px; a closed saved role reads its
   stage word; Settings' two blocks sit as Profile's do, Delete my account under a hairline of its own */
.applybox .save{margin-top:-6px}
.applybox .save[aria-pressed="true"]{color:var(--site-ink);text-decoration-color:var(--site-gold)}
.role.closed .title{color:var(--site-ink-3)}
.setblock{margin-top:40px;padding-top:28px;border-top:1px solid var(--site-line);display:grid;gap:14px;max-width:520px;justify-items:start}
.setblock:first-child{margin-top:28px;border-top:0;padding-top:0}
.setform{display:grid;gap:18px;width:100%}
.setform .acts{display:flex;flex-wrap:wrap;gap:var(--site-gap) 16px;align-items:center}
.setblock.danger .h3{color:var(--site-crit)}
.plain.law{max-width:760px;gap:16px}
.plain.law h2{font:500 30px/1.2 var(--site-serif);color:var(--site-ink);margin-top:22px}
.plain .updated{font:600 11px/1.4 var(--site-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--site-ink-3)}
.grievance{margin-top:6px}
.contact{display:grid;gap:18px;margin:6px 0}
.contact dd{margin:6px 0 0;font:400 22px/1.3 var(--site-serif);color:var(--site-ink);overflow-wrap:anywhere}
@media (max-width:760px){
  /* brief 138 B (the walk of A, O7): the five tabs one row that scrolls sideways, not two rows; the line under the one picked
     drawn inside the row, which clips what hangs below it */
  .tabs{flex-wrap:nowrap;gap:22px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .tabs::-webkit-scrollbar{display:none}
  .tabs button{flex:0 0 auto}
  .tabs button::after{bottom:0}
  .plain.law h2{font-size:26px}
}

/* ---------------------------------------------------------------- reduced motion: opacity only, 150 ms, no stagger */
@media (prefers-reduced-motion:reduce){
  .m-arrive,.mast,.panel.in,.panel.in .boxes input,.empty,.empty .advice,.toast,.tabpanel.in{animation:m-fade 150ms linear both!important;animation-delay:0s!important}
  .toast.bye{animation:m-fadeout 150ms linear both!important}
  .panel,.panel.out,.menu-panel,.menu-panel a,.menu-panel .menu-out{transform:none!important;transition:opacity 150ms linear!important;transition-delay:0s!important}
  .menu-panel{opacity:0}
  .menu-open .menu-panel{opacity:1}
  .field::after,.tabs button::after,a.role .title::after{transition:none!important}
  .js .m-reveal,.js .m-reveal.slow,.js .m-reveal .role,.js .m-reveal .item,.applied-line{transform:none!important;transition:opacity 150ms linear!important;transition-delay:0s!important}
  .exec .label,.js .exec.m-reveal .label{transition:none!important;letter-spacing:.18em}
  .exec .go span{transition:none!important;transform:none!important}
  .skip{transition:none!important}
  div.role a.title::after{transition:none!important}
  .meter-bar i,.chip{transition:none!important}
  .rrow{animation:m-fade 150ms linear both!important}
  .btn:active{transform:none}
  .drain{display:none}
  @view-transition{navigation:none}
}