/* The candidate site (albireorecruiters.in since brief 150): 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 wiping in by a clip-path as the home's band label does (brief 152; it settled its letter-spacing before); 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:m2-wipe 700ms var(--m2-out) 300ms both}   /* brief 152: a clip-path wipe, as the home's band label (it settled its letter-spacing) */
.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 tablet band (brief 144 row B4): 761 to 1100 px
   The bar keeps its five words on one line (the byline goes), how it works sits under the resume card, a role row is the
   number, the title, and the client, the line and the day stacked in a 220 px column; the executive band one column. The
   tiers start at 761 so the phone (the 760 tier) and the desk (over 1100) are as they were. */
@media (min-width:761px) and (max-width:1100px){
  .mast .byline{display:none}
  .nav{gap:22px}
  .nav a,.nav button{white-space:nowrap}
  .two{grid-template-columns:1fr}
  .roles.list .role{grid-template-columns:52px 1fr 220px;column-gap:24px;row-gap:4px}
  .roles.list .role .num{grid-column:1;grid-row:1 / span 3}
  .roles.list .role .title{grid-column:2;grid-row:1 / span 3}
  .roles.list .role .client{grid-column:3;grid-row:1}
  .roles.list .role .meta{grid-column:3;grid-row:2}
  .roles.list .role .when{grid-column:3;grid-row:3;text-align:left}
  .exec .grid{grid-template-columns:1fr;gap:32px}
}
@media (min-width:761px) and (max-width:900px){
  .jobhead,.jobbody{grid-template-columns:1fr;gap:32px}
  .jobhead{align-items:start}
  .search{grid-template-columns:1fr;gap:16px}
}

/* ---------------------------------------------------------------- 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}
}

/* ---------------------------------------------------------------- brief 151: the firm's badge, its home and the clients page
   The badge is a fixed square that never stretches (object-fit contain): 40 px in the top bar, 28 px in the footer, 240 px on
   the home's hero, where it arrives first (motion 1). The home: the two doors as two hairline cards, the three figures as a
   hairline band (text, nothing counts up), the families in a section of their own, a closing band to the clients page. The
   clients page: three service cards, the four steps as a hairline list, three short points, the enquiry form (Maison's
   underlined fields, errors beside them) beside the firm's address, the closing line. */
.brand{align-items:center}
.badge{display:block;flex:0 0 auto;object-fit:contain;border-radius:50%}
.brand .badge{width:40px;height:40px}
.footmark{display:inline-flex;align-items:center;gap:10px}
.footmark .badge{width:28px;height:28px}
.hero.firm{gap:26px}
.hero.pad{padding-bottom:var(--site-sec)}
.seal{display:block;width:240px;height:240px;object-fit:contain;border-radius:50%}
.doors{display:grid;grid-template-columns:1fr 1fr;gap:24px;width:100%;max-width:880px;margin:18px auto 0;text-align:left}
.door-card{display:grid;gap:10px;align-content:start;padding:28px 28px 24px;border:1px solid var(--site-line);background:var(--site-surface);
  text-decoration:none;color:var(--site-ink);transition:border-color var(--m-base) var(--m-ease)}
.door-card .door-title{font:500 30px/1.15 var(--site-serif)}
.door-card .door-line{color:var(--site-ink-2);font-size:14px;line-height:1.6}
.door-card .go{margin-top:8px;font:600 11px/1 var(--site-sans);letter-spacing:.18em;text-transform:uppercase;color:var(--site-gold)}
.door-card .go span,.link.arrow span{display:inline-block}
.link.arrow{gap:8px}
.door-card:hover{border-color:var(--site-ink)}
.figures{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:72px;margin-bottom:var(--site-sec);border-top:1px solid var(--site-line-2);border-bottom:1px solid var(--site-line-2)}
.fig{display:grid;gap:6px;justify-items:center;text-align:center;padding:30px 12px}
.fig + .fig{border-left:1px solid var(--site-line-2)}
.fig b{font:500 40px/1.1 var(--site-serif);color:var(--site-ink)}
.fig span{font:600 11px/1.4 var(--site-sans);letter-spacing:.18em;text-transform:uppercase;color:var(--site-ink-3)}
.cats.fams{justify-content:flex-start;padding:0}
.closing{padding-bottom:var(--site-sec);display:grid;justify-items:center;text-align:center;gap:16px}
.closing .btn{margin-top:10px}
.closing-line{font:italic 500 30px/1.3 var(--site-serif);color:var(--site-ink-2)}
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.svc{display:grid;gap:12px;align-content:start;padding-top:24px;border-top:1px solid var(--site-ink)}
.svc p,.flow p,.why-list p{color:var(--site-ink-2);font-size:14px;line-height:1.6}
.flow{display:grid;margin:0;padding:0;list-style:none;border-top:1px solid var(--site-line-2)}
.flow li{display:grid;grid-template-columns:72px 260px 1fr;gap:24px;align-items:baseline;padding:22px 0;border-bottom:1px solid var(--site-line-2)}
.flow .n{font:italic 500 32px/1 var(--site-serif);color:var(--site-gold)}
.why-list{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin:0;padding:0;list-style:none}
.why-list li{display:grid;gap:10px;align-content:start}
.why-list .label{color:var(--site-gold)}
.enq-two{display:grid;grid-template-columns:5fr 7fr;gap:64px;align-items:start}
.enq-head{display:grid;gap:16px;justify-items:start}
.enq-head .contact{margin-top:12px}
.enq{display:grid;gap:22px}
.enq .btn{justify-self:start;min-width:160px}
.enq .consent{max-width:52ch}
.hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.thanks{display:grid;gap:12px;padding-top:8px;animation:m-rise var(--m-settle) var(--m-spring-settle) both}
.thanks:focus{outline:none}
.enq-sec,.thanks{scroll-margin-top:96px}   /* the sticky top bar never covers the form or the thank-you it focuses */
@media (hover:hover){
  .door-card .go span,.link.arrow span{transition:transform var(--m-move) var(--m-spring-quick)}
  .door-card:hover .go span,.link.arrow:hover span{transform:translateX(4px)}
}
@media (min-width:761px) and (max-width:1100px){
  .nav{gap:16px}
  .brand .wordmark{font-size:21px}
  .svc-grid,.why-list{grid-template-columns:1fr;gap:28px}
  .enq-two{grid-template-columns:1fr;gap:40px}
  .flow li{grid-template-columns:56px 200px 1fr}
}
@media (max-width:760px){
  .brand{flex-direction:row;align-items:center;gap:10px}
  .brand .badge{width:36px;height:36px}
  .brand .wordmark{font-size:21px}
  .seal{width:160px;height:160px}
  .doors{grid-template-columns:1fr;gap:16px;margin:8px 0 0}
  .door-card{padding:22px 20px}
  .door-card .door-title{font-size:26px}
  .figures{grid-template-columns:1fr;margin-top:44px}
  .fig{justify-items:start;text-align:left;padding:18px 0;grid-template-columns:auto 1fr;align-items:baseline;gap:14px}
  .fig + .fig{border-left:0;border-top:1px solid var(--site-line-2)}
  .fig b{font-size:32px}
  .closing{justify-items:start;text-align:left}
  .closing-line{font-size:24px}
  .svc-grid,.why-list{grid-template-columns:1fr;gap:28px}
  .flow li{grid-template-columns:44px 1fr;gap:6px 16px}
  .flow li p{grid-column:2}
  .enq-two{grid-template-columns:1fr;gap:36px}
  .enq .btn{justify-self:stretch;width:100%}
}

/* ---------------------------------------------------------------- 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}
  .door-card .go span,.link.arrow span{transition:none!important;transform:none!important}
  .thanks{animation:m-fade 150ms linear both!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}
}

/* ---------------------------------------------------------------- brief 141: the registration after the first sign-in
   (/me/welcome): a stepper of three over one step at a time; the step change a 200 ms slide (16 px from the right, the one
   going 120 ms out), a done step's tick settling in (the settle spring, scale from .6, no overshoot); the work status as two
   large radio cards; the CV step's two cards; Back, Skip for now and the gold Continue at 44 px or more. The meter's card on
   /me and the home: the words, the gold hairline at the share, Continue and Not now. Reduced motion: fades only */
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.welcome .hello{padding-bottom:28px}
.stepper{margin:0 0 40px}
.stepper ol{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin:0;padding:0;list-style:none;border-top:1px solid var(--site-line)}
.stepper button{position:relative;display:flex;align-items:center;gap:14px;width:100%;min-height:var(--site-btn-h);padding:16px 12px 16px 0;
  background:none;border:0;cursor:pointer;text-align:left;color:var(--site-ink-3);font:600 11px/1.3 var(--site-sans);letter-spacing:.16em;
  text-transform:uppercase;transition:color var(--m-quick) var(--m-ease)}
.stepper button::before{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;background:var(--site-gold);transform:scaleX(0);
  transform-origin:left;transition:transform var(--m-move) var(--m-spring-quick)}
.stepper button[aria-current="step"]{color:var(--site-ink)}
.stepper button[aria-current="step"]::before{transform:scaleX(1)}
.stepper button:disabled{cursor:default;opacity:.6}
.stepper .n{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:32px;height:32px;border:1px solid currentColor;
  font:italic 500 20px/1 var(--site-serif);letter-spacing:0;text-transform:none}
.stepper .done .n{background:var(--site-ink);border-color:var(--site-ink);color:var(--site-bg);font:600 14px/1 var(--site-sans)}
.stepper .done .n.tick{animation:m-tick var(--m-settle) var(--m-spring-settle) both}
@keyframes m-tick{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
.wsteps{display:grid;padding-bottom:var(--site-sec)}
.wstep{grid-area:1/1;display:grid;gap:26px;align-content:start;max-width:760px;min-width:0}
.wstep.in{animation:m-wstep 200ms var(--m-ease) both}
.wstep.out{animation:m-wout 120ms var(--m-ease) both;pointer-events:none}
@keyframes m-wstep{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}
@keyframes m-wout{from{opacity:1;transform:none}to{opacity:0;transform:translateX(-12px)}}
.wstep .field .err{margin-top:0}
.ws,.wrole{border:0;margin:0;padding:0;min-width:0;display:grid;gap:16px}
.ws legend,.wrole legend{padding:0;margin-bottom:14px}
.ws-cards{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.ws-card{position:relative;display:grid;gap:6px;min-height:96px;padding:20px 20px 20px 52px;border:1px solid var(--site-line);background:var(--site-surface);
  cursor:pointer;transition:border-color var(--m-base) var(--m-ease),background var(--m-base) var(--m-ease)}
.ws-card input{position:absolute;left:20px;top:24px;width:18px;height:18px;margin:0;accent-color:var(--site-gold);cursor:pointer}
.ws-card .ws-t{font:500 22px/1.2 var(--site-serif);color:var(--site-ink)}
.ws-card .ws-s{font:400 13px/1.5 var(--site-sans);color:var(--site-ink-2)}
.ws-card:hover{border-color:var(--site-ink-3)}
.ws-card:has(input:checked){border-color:var(--site-gold);background:var(--site-bg)}
.ws-card:has(input:focus-visible){outline:2px solid var(--site-gold);outline-offset:3px}
.ws.bad .ws-card{border-color:var(--site-crit)}
.cvcards{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.cvcard{display:grid;gap:12px;align-content:start;justify-items:start;padding:24px;border:1px solid var(--site-line);background:var(--site-surface);min-width:0}
.cvcard .btn{min-height:var(--site-btn-h)}
.cvline{font:500 19px/1.3 var(--site-serif);color:var(--site-ink);overflow-wrap:anywhere}
.wacts{display:flex;flex-wrap:wrap;gap:var(--site-gap) 24px;align-items:center;padding-top:8px}
.wacts .btn.cta{margin-left:auto}
.wdone{gap:18px;justify-items:start}
.wdone .wacts .btn.cta{margin-left:0}
.wdone h2{font-size:clamp(34px,4vw,48px)}
/* the meter's card (brief 141 row 6) */
.nag{display:grid;gap:12px;margin:24px 0 8px;padding:22px 0 0;border-top:1px solid var(--site-ink);max-width:720px;animation:m-fade var(--m-base) var(--m-ease) both}
.nag-words{font:500 22px/1.3 var(--site-serif);color:var(--site-ink)}
.nag-bar i{transform:scaleX(var(--fill,0))}
.nag .acts{display:flex;flex-wrap:wrap;gap:var(--site-gap) 20px;align-items:center}
.nag.bye{animation:m-out var(--m-quick) var(--m-ease) both}
.applybox a.btn.cta[href^="/me/welcome"]{white-space:normal;text-align:center;line-height:1.3}
@media (max-width:760px){
  .stepper ol{grid-template-columns:1fr;border-top:0}
  .stepper button{border-top:1px solid var(--site-line-2);padding:10px 0}
  .stepper button::before{top:auto;bottom:-1px;height:1px}
  .ws-cards,.cvcards{grid-template-columns:1fr}
  .wacts{gap:4px 20px}
  .wacts .btn.cta{margin-left:0;width:100%}
  .wdone .wacts .btn{width:100%}
}
@media (prefers-reduced-motion:reduce){
  .wstep.in,.stepper .done .n.tick,.nag{animation:m-fade 150ms linear both!important}
  .wstep.out,.nag.bye{animation:none!important}
  .stepper button::before{transition:none!important}
}

/* ---------------------------------------------------------------- brief 152: the site's motion pass (the finesse mock of 23 Oct
   2026, ux_next/notes/website-plan/mock-finesse-23-oct/, folded in with its class names kept). Motion shows a change of state, a
   relationship or a response to a hand; compositor properties only (transform, opacity, clip-path, filter), the one colour change
   the top bar's over the dark band; exits faster than entrances; nothing over 1.6 s; no bounce, no parallax, no scroll-scrubbing.
   site.js puts .m2 on <html> and .in / .settled on a .r2 section as it comes into view, so a page read without the script is
   whole. The top bar's badge is gone (Sid, 23 Oct 00:50: "just remove the logo from top left"), and its shrink move with it. */
:root{
  --m2-out:cubic-bezier(.16,1,.3,1);
  --m2-travel:cubic-bezier(.65,0,.35,1);
  --m2-exit:200ms;
  --m2-draw:1200ms;
  --m2-count:1200ms;
}

/* the hero: a typographic arrival. The server sends the headline's words as spans (.split .w > span); each rises out of its mask */
.a2-seal{animation:m2-focus 1100ms var(--m-ease) both}
@keyframes m2-focus{from{opacity:0;transform:scale(.94);filter:blur(8px)}to{opacity:1;transform:none;filter:blur(0)}}
.split .w{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .08em .14em 0;margin:0 -.08em -.14em 0}
.split .w>span{display:inline-block}
.split em.mark{display:inline-block;position:relative;white-space:nowrap}
.a2-words .w>span{animation:m2-word 900ms var(--m-spring-slow) both;animation-delay:calc(180ms + var(--i,0) * 60ms)}
@keyframes m2-word{from{transform:translateY(108%)}to{transform:none}}
.a2-words em.mark::after{content:"";position:absolute;left:.04em;right:.1em;bottom:.02em;height:2px;background:var(--site-gold);
  transform:scaleX(0);transform-origin:left center;animation:m2-rule 620ms var(--m2-out) 1000ms both}
@keyframes m2-rule{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.a2-lede{animation:m-rise var(--m-settle) var(--m-spring-settle) both;animation-delay:700ms;--m-rise:12px}
.a2-cta{animation-delay:820ms}
.a2-kicker{animation:m2-wipe 700ms var(--m2-out) 80ms both}
@keyframes m2-wipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.a2-door{animation:m-rise var(--m-settle) var(--m-spring-settle) backwards;animation-delay:calc(860ms + var(--i,0) * 110ms);--m-rise:20px}
/* until the serif has loaded (site.js, 1.2 s at most) the hero and the sections already in view wait unseen, their moves paused */
.m2-wait .hero,.m2-wait .r2{visibility:hidden}
.m2-wait .hero *,.m2-wait .hero *::after{animation-play-state:paused!important}
/* arriving by a view transition the heading has already landed: the words do not re-rise, the rule draws after it */
.vt-in .a2-words .w>span,.vt-in .a2-seal,.vt-in .mast::after,.vt-in [data-vt]{animation:none}
.vt-in .a2-words em.mark::after{animation-delay:560ms}

/* the top bar: a hairline drawn on arrival, the frosted bar past 80 px with a gold progress line at its foot, the dark bar over
   the executive band. The wordmark stays where it is */
.mast,.scrolled .mast{border-bottom-color:transparent;view-transition-name:topbar}
.mast::after,.mast::before{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;transform-origin:left center;pointer-events:none}
.mast::after{background:var(--site-line);animation:m2-rule var(--m2-draw) var(--m2-out) 100ms both;transition:background-color var(--m-base) var(--m-ease)}
.mast::before{z-index:1;background:var(--site-gold);transform:scaleX(var(--p,0));opacity:0;transition:opacity var(--m-base) var(--m-ease)}
.scrolled .mast::after{background:var(--site-ink-3)}
.scrolled .mast::before{opacity:1}
.mast{transition:background-color var(--m-base) var(--m-ease)}
@supports (backdrop-filter:blur(1px)){
  .scrolled .mast{background:rgba(250,250,249,.84);backdrop-filter:blur(12px) saturate(1.2)}
}
.mast .nav a,.mast .wordmark,.mast .menu{transition:color var(--m-base) var(--m-ease)}
.m2-dark .mast,.m2-dark.scrolled .mast{background:rgba(12,10,9,.92)}
.m2-dark .mast::after{background:var(--site-band-line)}
.m2-dark .mast::before{background:var(--site-band-gold)}
.m2-dark .mast .wordmark,.m2-dark .mast .nav a,.m2-dark .mast .nav button,.m2-dark .mast .menu{color:var(--site-band-ink)}
.m2-dark .mast .nav a:hover{color:var(--site-band-gold)}

/* a section's heading wipes in from the left */
.a2-head{position:relative}
.m2 .r2 .a2-head{clip-path:inset(0 100% 0 0);transition:clip-path 800ms var(--m2-out)}
.m2 .r2.in .a2-head{clip-path:inset(0 0 -.2em 0)}

/* the figures: the frame ruled out from the centre, the dividers dropped, the numbers counting (site.js; the final value is in the
   page), a gold tick under each as it settles */
.figures{position:relative;border-top-color:transparent;border-bottom-color:transparent}
.figures::before,.figures::after{content:"";position:absolute;left:0;right:0;height:1px;background:var(--site-line-2);transform-origin:center}
.figures::before{top:-1px}.figures::after{bottom:-1px}
.fig{position:relative}
.fig + .fig{border-left-color:transparent}
.fig + .fig::before{content:"";position:absolute;left:-1px;top:0;bottom:0;width:1px;background:var(--site-line-2);transform-origin:top center}
.fig b{position:relative;font-variant-numeric:tabular-nums lining-nums}
.fig b::after{content:"";position:absolute;left:50%;bottom:-4px;width:28px;margin-left:-14px;height:1px;background:var(--site-gold);transform:scaleX(0);transform-origin:left center}
.m2 [data-r=figures] .figures::before,.m2 [data-r=figures] .figures::after{transform:scaleX(0);transition:transform 1000ms var(--m2-out)}
.m2 [data-r=figures] .fig + .fig::before{transform:scaleY(0);transition:transform 700ms var(--m2-out) 400ms}
.m2 [data-r=figures] .fig>*{opacity:0;transform:translateY(12px);transition:opacity 600ms var(--m-ease),transform 740ms var(--m-spring-settle);transition-delay:calc(200ms + var(--i,0) * 120ms)}
.m2 [data-r=figures] .fig span{transition-delay:calc(320ms + var(--i,0) * 120ms)}
.m2 [data-r=figures].in .figures::before,.m2 [data-r=figures].in .figures::after{transform:none}
.m2 [data-r=figures].in .fig + .fig::before{transform:none}
.m2 [data-r=figures].in .fig>*{opacity:1;transform:none}
.m2 [data-r=figures] .fig b.done::after{transform:scaleX(1);transition:transform 520ms var(--m2-out)}
.fig:first-child b::after{transition-delay:300ms}

/* the ledger (Open now, /jobs, /executive's searches): each row's rule drawn, then its words slide in after it; the stagger stops
   growing at the tenth row, so a long list is drawn inside the 1.6 s */
.m2 [data-r=ledger] .role{opacity:1;transform:none;border-bottom-color:transparent;position:relative;transition:opacity var(--m-base) var(--m-ease)}
.role::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--site-line-2);transform-origin:left center;pointer-events:none}
.m2 [data-r=ledger] .role::after{transform:scaleX(0);transition:transform 800ms var(--m2-out);transition-delay:calc(min(var(--i,0), 10) * 70ms)}
.m2 [data-r=ledger] .role>span{opacity:0;transform:translateX(-10px);transition:opacity 500ms var(--m-ease),transform var(--m-move) var(--m-spring-quick);transition-delay:calc(150ms + min(var(--i,0), 10) * 70ms)}
.m2 [data-r=ledger].in .role::after{transform:none}
.m2 [data-r=ledger].in .role>span{opacity:1;transform:none}
.m2 [data-r=ledger].in.settled .role>span{transition-delay:0s}
/* a long list (/jobs): the rows past the twelfth are below the window when it reveals; they are placed at once, not moved */
.m2 [data-r=ledger] .role:nth-child(n+13)::after,.m2 [data-r=ledger] .role:nth-child(n+13)>span:not(.title),
.m2 .xlist[data-r=ledger] .item:nth-child(n+13)::after,.m2 .xlist[data-r=ledger] .item:nth-child(n+13)>span{transition:none}
.m2 .xlist[data-r=ledger] .item{opacity:1;transform:none;border-bottom-color:transparent;position:relative;transition:opacity var(--m-base) var(--m-ease);transition-delay:0s}
.xlist .item::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--site-band-line);transform-origin:left center;pointer-events:none}
.m2 .xlist[data-r=ledger] .item::after{transform:scaleX(0);transition:transform 800ms var(--m2-out);transition-delay:calc(min(var(--i,0), 10) * 70ms)}
.m2 .xlist[data-r=ledger] .item>span{opacity:0;transform:translateX(-10px);transition:opacity 500ms var(--m-ease),transform var(--m-move) var(--m-spring-quick);transition-delay:calc(150ms + min(var(--i,0), 10) * 70ms)}
.m2 .xlist[data-r=ledger].in .item::after{transform:none}
.m2 .xlist[data-r=ledger].in .item>span{opacity:1;transform:none}
.m2 .xlist[data-r=ledger].in.settled .item>span{transition-delay:0s}

/* a row under the pointer (or the keyboard's focus): a pale ground washes in from the left (and leaves faster, to the right), the
   other rows step back, the title moves 8 px, the day gives way to a gold arrow */
@media (hover:hover){
  .roles.list,.xlist .items{isolation:isolate}
  .roles.list .role::before,.xlist .item::before{content:"";position:absolute;inset:0 -16px;z-index:-1;background:var(--site-surface-2);transform:scaleX(0);transform-origin:right center;
    transition:transform var(--m2-exit) var(--m-ease)}
  .xlist .item::before{background:var(--site-band-line)}
  .roles.list .role:hover::before,.roles.list .role:focus-visible::before,.xlist .item:hover::before,.xlist .item:focus-visible::before{transform:scaleX(1);transform-origin:left center;transition:transform var(--m-move) var(--m-spring-quick)}
  .roles.list:hover .role:not(:hover),.xlist .items:hover .item:not(:hover){opacity:.55}
  .m2 .roles.list .role .title,.m2 .xlist .item .title{transition:transform var(--m-move) var(--m-spring-quick),opacity 500ms var(--m-ease)}
  .m2 [data-r=ledger].in.settled .roles.list .role:hover .title,.m2 [data-r=ledger].in.settled .roles.list .role:focus-visible .title,
  .m2 .xlist[data-r=ledger].in.settled .item:hover .title,.m2 .xlist[data-r=ledger].in.settled .item:focus-visible .title{transform:translateX(8px)}
  .roles.list .role .when{position:relative}
  .roles.list .role .when::after{content:"→";position:absolute;right:-2px;top:0;color:var(--site-gold);opacity:0;transform:translateX(-10px);
    transition:opacity var(--m2-exit) var(--m-ease),transform var(--m2-exit) var(--m-ease)}
  .m2 [data-r=ledger].in.settled .roles.list .role .when{transition:transform var(--m-move) var(--m-spring-quick),color var(--m-base) var(--m-ease)}
  .m2 [data-r=ledger].in.settled .roles.list .role:hover .when,.m2 [data-r=ledger].in.settled .roles.list .role:focus-visible .when{transform:translateX(-22px)}
  .roles.list .role:hover .when::after,.roles.list .role:focus-visible .when::after{opacity:1;transform:translateX(22px);transition:opacity var(--m-base) var(--m-ease) 80ms,transform var(--m-move) var(--m-spring-quick) 80ms}
}

/* the families: each name lifts out of its own line; a gold underline draws under the pointer */
.m2 [data-r=families] .cats a{clip-path:inset(0 0 100% 0);transform:translateY(18px);transition:clip-path 800ms var(--m2-out),transform 800ms var(--m2-out),color var(--m-base) var(--m-ease);transition-delay:calc(var(--i,0) * 90ms)}
.m2 [data-r=families].in .cats a{clip-path:inset(0 0 -10% 0);transform:none}
.m2 [data-r=families].in.settled .cats a{transition-delay:0s}
.cats a{position:relative}
.cats a::after{content:"";position:absolute;left:0;right:0;bottom:8px;height:1px;background:var(--site-gold);transform:scaleX(0);transform-origin:right center;transition:transform var(--m2-exit) var(--m-ease)}
@media (hover:hover){.cats a:hover::after{transform:scaleX(1);transform-origin:left center;transition:transform var(--m-move) var(--m-spring-quick)}}

/* how it works: a gold line travels 1 → 2 → 3 and each step appears as the line reaches it; the CV card's rule, then its words */
.steps{position:relative}
.steps::before{content:"";position:absolute;left:0;right:0;top:-10px;height:1px;background:var(--site-gold);transform-origin:left center}
.m2 [data-r=steps] .steps::before{transform:scaleX(0);transition:transform var(--m2-draw) var(--m2-travel) 150ms}
.m2 [data-r=steps] .step>*{opacity:0;transform:translateY(10px);transition:opacity 500ms var(--m-ease),transform var(--m-move) var(--m-spring-quick);transition-delay:calc(200ms + var(--i,0) * 420ms)}
.m2 [data-r=steps] .step>h3,.m2 [data-r=steps] .step>p{transition-delay:calc(320ms + var(--i,0) * 420ms)}
.m2 [data-r=steps] .card{border-top-color:transparent;position:relative}
.card::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--site-ink);transform-origin:left center}
.m2 [data-r=steps] .card::before{transform:scaleX(0);transition:transform 900ms var(--m2-out) 500ms}
.m2 [data-r=steps] .card>*{opacity:0;transition:opacity 600ms var(--m-ease) 900ms}
.m2 [data-r=steps] .label#howTitle{clip-path:inset(0 100% 0 0);transition:clip-path 700ms var(--m2-out)}
.m2 [data-r=steps].in .steps::before,.m2 [data-r=steps].in .card::before{transform:none}
.m2 [data-r=steps].in .step>*{opacity:1;transform:none}
.m2 [data-r=steps].in .card>*{opacity:1}
.m2 [data-r=steps].in .label#howTitle{clip-path:inset(0 0 0 0)}

/* the executive band: a scene change. The dark rises like a curtain; the label wipes in (a clip-path, never its letter-spacing);
   the heading's words rise; the text, the button and the searches follow */
.exec{position:relative}
.m2 [data-r=scene]{clip-path:inset(100% 0 0 0);transition:clip-path 1000ms var(--m2-out)}
.m2 [data-r=scene].in{clip-path:inset(0 0 0 0)}
.m2 [data-r=scene] .label{letter-spacing:.18em;transition:none}
.m2 .r2 .wipe{clip-path:inset(0 100% 0 0);transition:clip-path 700ms var(--m2-out) 300ms}
.m2 .r2.in .wipe{clip-path:inset(0 0 0 0)}
.m2 .r2 .split .w>span{transform:translateY(108%);transition:transform 900ms var(--m-spring-slow);transition-delay:calc(380ms + var(--i,0) * 70ms)}
.m2 .r2.in .split .w>span{transform:none}
.m2 [data-r=scene] .muted,.m2 [data-r=scene] .cta,.m2 [data-r=scene] .items{opacity:0;transform:translateY(12px);transition:opacity 600ms var(--m-ease),transform var(--m-settle) var(--m-spring-settle)}
.m2 [data-r=scene] .muted{transition-delay:700ms}
.m2 [data-r=scene] .cta{transition-delay:820ms}
.m2 [data-r=scene] .items{transition-delay:940ms}
.m2 [data-r=scene].in .muted,.m2 [data-r=scene].in .cta,.m2 [data-r=scene].in .items{opacity:1;transform:none}
.exec .grid>.items{border-top:1px solid var(--site-band-line);padding-top:18px}

/* /executive's head is the band at the top of its page: the dark rises like a curtain on arrival, its kicker wipes in (above) */
.m2 .xhead{animation:m2-curtain 1000ms var(--m2-out) both}
@keyframes m2-curtain{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0 0 0 0)}}

/* the closing band: the label wipes, the words rise, the button follows */
.m2 [data-r=closing] .muted,.m2 [data-r=closing] .btn{opacity:0;transform:translateY(10px);transition:opacity 600ms var(--m-ease),transform var(--m-settle) var(--m-spring-settle),background-color var(--m-base) var(--m-ease)}
.m2 [data-r=closing] .muted{transition-delay:650ms}
.m2 [data-r=closing] .btn{transition-delay:780ms}
.m2 [data-r=closing].in .muted,.m2 [data-r=closing].in .btn{opacity:1;transform:none}
.m2 [data-r=closing].in.settled .btn{transition-delay:0s}
.closing-line.split .w>span{transition-duration:1000ms}

/* the clients page, what we do: three ruled cards, the rule first, then the words under it */
.m2 [data-r=ruled] .svc{border-top-color:transparent}
.svc{position:relative}
.svc::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--site-ink);transform-origin:left center}
.m2 [data-r=ruled] .svc::before{transform:scaleX(0);transition:transform 900ms var(--m2-out);transition-delay:calc(var(--i,0) * 150ms)}
.m2 [data-r=ruled] .svc>*{opacity:0;transform:translateY(10px);transition:opacity 600ms var(--m-ease),transform var(--m-settle) var(--m-spring-settle);transition-delay:calc(300ms + var(--i,0) * 150ms)}
.m2 [data-r=ruled].in .svc::before{transform:none}
.m2 [data-r=ruled].in .svc>*{opacity:1;transform:none}

/* how we work: a gold line runs down the four stages and drops a small gold square at each as it passes */
.flow{position:relative}
.flow li{position:relative;padding-left:28px}
.flow::before{content:"";position:absolute;left:4px;top:0;bottom:0;width:1px;background:var(--site-gold);transform-origin:top center}
.flow li::before{content:"";position:absolute;left:1px;top:34px;width:7px;height:7px;background:var(--site-gold)}
.m2 [data-r=timeline] .flow::before{transform:scaleY(0);transition:transform 1400ms var(--m2-travel) 100ms}
.m2 [data-r=timeline] .flow li::before{transform:scale(0);transition:transform 360ms var(--m2-out);transition-delay:calc(220ms + var(--i,0) * 330ms)}
.m2 [data-r=timeline] .flow li>*{opacity:0;transform:translateX(-8px);transition:opacity 500ms var(--m-ease),transform var(--m-move) var(--m-spring-quick);transition-delay:calc(260ms + var(--i,0) * 330ms)}
.m2 [data-r=timeline].in .flow::before,.m2 [data-r=timeline].in .flow li::before{transform:none}
.m2 [data-r=timeline].in .flow li>*{opacity:1;transform:none}

/* why Albireo: the labels wipe in, the words follow */
.m2 [data-r=why] .why-list .label{clip-path:inset(0 100% 0 0);transition:clip-path 700ms var(--m2-out);transition-delay:calc(150ms + var(--i,0) * 140ms)}
.m2 [data-r=why] .why-list p{opacity:0;transform:translateY(8px);transition:opacity 600ms var(--m-ease),transform var(--m-settle) var(--m-spring-settle);transition-delay:calc(400ms + var(--i,0) * 140ms)}
.m2 [data-r=why].in .why-list .label{clip-path:inset(0 0 0 0)}
.m2 [data-r=why].in .why-list p{opacity:1;transform:none}

/* the enquiry: each field's line ruled in turn; focus draws a gold line along it (leaving retracts it faster); a filled field takes
   a gold tick; a refusal's sentence rises 6 px and the line turns the crit colour; sending: a line runs under "Sending", the form
   leaves in 0.2 s, the thank-you rises under a short gold rule */
.m2 [data-r=form] .enq-head>*{opacity:0;transform:translateY(10px);transition:opacity 600ms var(--m-ease),transform var(--m-settle) var(--m-spring-settle)}
.m2 [data-r=form] .enq-head>h2{opacity:1;transform:none}
.m2 [data-r=form] .enq-head>.muted{transition-delay:250ms}
.m2 [data-r=form] .enq-head>.contact{transition-delay:400ms}
.m2 [data-r=form].in .enq-head>*{opacity:1;transform:none}
.m2 .enq .field input,.m2 .enq .field textarea{border-bottom-color:transparent}
.enq .field::before{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--site-ink);transform-origin:left center;pointer-events:none}
.m2 [data-r=form] .enq .field::before{transform:scaleX(0);transition:transform 800ms var(--m2-out);transition-delay:calc(200ms + var(--i,0) * 90ms)}
.m2 [data-r=form] .enq .field .label{opacity:0;transform:translateY(6px);transition:opacity 500ms var(--m-ease),transform var(--m-move) var(--m-spring-quick),color var(--m-base) var(--m-ease);transition-delay:calc(260ms + var(--i,0) * 90ms)}
.m2 [data-r=form] .enq>.consent,.m2 [data-r=form] .enq>.btn{opacity:0;transform:translateY(8px);transition:opacity 500ms var(--m-ease),transform var(--m-move) var(--m-spring-quick),background-color var(--m-base) var(--m-ease);transition-delay:800ms}
.m2 [data-r=form].in .enq .field::before{transform:none}
.m2 [data-r=form].in .enq .field .label,.m2 [data-r=form].in .enq>.consent,.m2 [data-r=form].in .enq>.btn{opacity:1;transform:none}
.m2 [data-r=form].in.settled .enq .field .label,.m2 [data-r=form].in.settled .enq>.btn{transition-delay:0s}
.m2 [data-r=form].in.settled .enq .field::before{transition-delay:0s}
.enq .field::after{height:2px;transform:scaleX(0);transform-origin:right center;transition:transform var(--m2-exit) var(--m-ease)}
.enq .field:focus-within::after{transform:scaleX(1);transform-origin:left center;transition:transform var(--m-move) var(--m-spring-quick)}
.m2 .enq .field.bad input,.m2 .enq .field.bad textarea{border-bottom-color:var(--site-crit)}
.enq .field.bad::before,.enq .field.bad::after{opacity:0}
.enq .field .label{position:relative}
.enq .field .label .tick{display:inline-block;margin-left:8px;color:var(--site-gold);opacity:0;transform:scale(.6);transition:opacity var(--m-base) var(--m-ease),transform var(--m-move) var(--m-spring-quick)}
.enq .field.ok .label .tick{opacity:1;transform:none}
.enq .err:not(:empty){animation:m-rise var(--m-move) var(--m-spring-quick) both;--m-rise:6px}
.enq.leaving{opacity:0;transform:translateY(-6px);transition:opacity var(--m2-exit) var(--m-ease),transform var(--m2-exit) var(--m-ease)}
.thanks.arrive{animation:m-rise var(--m-settle) var(--m-spring-settle) both;--m-rise:16px;position:relative;padding-top:22px}
.thanks.arrive::before{content:"";position:absolute;left:0;top:0;width:64px;height:1px;background:var(--site-gold);animation:m2-rule 700ms var(--m2-out) 200ms both;transform-origin:left center}
.btn .sending{position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--site-on-gold);opacity:.7;transform:scaleX(0);transform-origin:left center}
.btn[aria-busy="true"] .sending{transform:scaleX(1);transition:transform 900ms var(--m2-travel)}

/* the buttons: a darker tone sweeps across under the pointer (and leaves faster); the quiet button sweeps to ink. It replaces the
   tint of motion 4 on the site's buttons */
.btn{position:relative;isolation:isolate;overflow:hidden}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--site-ink-2);transform:scaleX(0);transform-origin:right center;transition:transform var(--m2-exit) var(--m-ease)}
.btn.cta::before{background:var(--site-gold-deep)}
.btn.quiet::before{background:var(--site-ink)}
.exec .btn.quiet::before{background:var(--site-band-ink)}
@media (hover:hover){
  .btn:hover{background:var(--site-ink);border-color:var(--site-ink-2)}
  .btn.cta:hover{background:var(--site-gold);border-color:var(--site-gold-deep)}
  .btn.quiet:hover{background:transparent;color:var(--site-bg);border-color:var(--site-ink)}
  .exec .btn.quiet:hover{background:transparent;color:var(--site-band);border-color:var(--site-band-ink)}
  .btn:hover::before{transform:scaleX(1);transform-origin:left center;transition:transform var(--m-move) var(--m-spring-quick)}
  .btn[disabled]:hover::before,.btn[aria-busy="true"]:hover::before{transform:scaleX(0)}
}

/* the two door cards: a gold rule draws across the top, the label takes the gold, the words darken, the arrow moves 6 px */
.door-card{position:relative;transition:border-color var(--m-base) var(--m-ease),transform var(--m-quick) var(--m-ease)}
.door-card::before{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:2px;background:var(--site-gold);transform:scaleX(0);transform-origin:right center;transition:transform var(--m2-exit) var(--m-ease)}
.door-card .label,.door-card .door-line{transition:color var(--m-base) var(--m-ease)}
.door-card:active{transform:scale(.995)}
@media (hover:hover){
  .door-card:hover::before{transform:scaleX(1);transform-origin:left center;transition:transform var(--m-settle) var(--m-spring-settle)}
  .door-card:hover .label{color:var(--site-gold)}
  .door-card:hover .door-line{color:var(--site-ink)}
  .door-card:hover .go span{transform:translateX(6px)}
}

/* page to page: the top bar stays, the heading carries over. A page names its own headline (data-vt); the link clicked names what
   it carries (data-morph, or a row's title) and site.js takes the name off every other */
@view-transition{navigation:auto}
[data-vt]{view-transition-name:hero-title}
::view-transition-group(topbar){animation:none}
::view-transition-old(root){animation:m2-vt-out 200ms var(--m-ease) both}
::view-transition-new(root){animation:m2-vt-in 420ms var(--m-ease) 80ms both}
::view-transition-group(hero-title){animation-duration:600ms;animation-timing-function:var(--m2-out)}
::view-transition-old(hero-title),::view-transition-new(hero-title){height:100%;object-fit:contain;animation-duration:400ms}
@keyframes m2-vt-out{to{opacity:0}}
@keyframes m2-vt-in{from{opacity:0;transform:translateY(8px)}}

/* the phone */
@media (max-width:760px){
  .a2-words em.mark::after{height:1.5px}
  .steps::before{left:0;right:auto;top:0;bottom:0;width:1px;height:auto;transform-origin:top center}
  .steps{padding-left:20px}
  .m2 [data-r=steps] .steps::before{transform:scaleY(0)}
  .m2 [data-r=steps].in .steps::before{transform:none}
  .fig + .fig::before{left:0;right:0;top:-1px;bottom:auto;width:auto;height:1px;transform-origin:left center}
  .m2 [data-r=figures] .fig + .fig::before{transform:scaleX(0)}
  .m2 [data-r=figures].in .fig + .fig::before{transform:none}
  .fig + .fig{border-top-color:transparent}
  .fig b::after{left:0;margin-left:0}
  .flow li::before{top:30px}
}

/* reduced motion (brief 152): everything in place, opacity only, 150 ms; the counts at their final values (site.js), the lines
   drawn, no view transition */
@media (prefers-reduced-motion:reduce){
  .a2-seal,.a2-lede,.a2-door,.a2-kicker,.xhead .kicker{animation:m-fade 150ms linear both!important;animation-delay:0s!important}
  .m2 .xhead{animation:none!important}
  .a2-words .w>span,.a2-words em.mark::after,.mast::after,.thanks.arrive::before{animation:none!important;transform:none!important}
  .m2 .r2,.m2 .r2 *{transform:none!important;clip-path:none!important;transition-property:opacity!important;transition-duration:150ms!important;transition-timing-function:linear!important;transition-delay:0s!important}
  .figures::before,.figures::after,.fig + .fig::before,.fig b::after,.role::after,.xlist .item::after,.steps::before,.card::before,.svc::before,.flow::before,.flow li::before,.enq .field::before{transform:none!important;transition:none!important}
  .mast,.mast::before,.mast::after,.mast .nav a,.mast .wordmark,.mast .menu,.btn::before,.door-card::before,.cats a::after,.enq .field::after,.roles.list .role::before,.xlist .item::before,.roles.list .role .when::after,.btn .sending,.enq.leaving,.enq .field .label .tick{transition:none!important}
  .roles.list .role::before,.xlist .item::before{display:none}
  .roles.list:hover .role:not(:hover),.xlist .items:hover .item:not(:hover){opacity:1}
  .enq.leaving{transform:none!important}
  .door-card,.door-card:active,.door-card:hover .go span{transform:none!important}
  .enq .err:not(:empty){animation:m-fade 150ms linear both!important}
  .thanks.arrive{animation:m-fade 150ms linear both!important}
  @view-transition{navigation:none}
}