/* ---------- self-hosted fonts ----------
   Served from assets/fonts/ so no visitor IP ever reaches a Google server.
   Latin subset only: the site uses no character outside it (checked: c ss oe).
   Weights below are the only ones the stylesheet actually calls for.
   ---------------------------------------------------------------- */
@font-face{
  font-family:"Archivo";font-style:normal;font-weight:600;font-display:swap;
  src:url("fonts/archivo-600.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Archivo";font-style:normal;font-weight:700;font-display:swap;
  src:url("fonts/archivo-700.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Archivo";font-style:normal;font-weight:800;font-display:swap;
  src:url("fonts/archivo-800.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Source Serif 4";font-style:normal;font-weight:400;font-display:swap;
  src:url("fonts/source-serif-4-400.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Source Serif 4";font-style:normal;font-weight:600;font-display:swap;
  src:url("fonts/source-serif-4-600.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"JetBrains Mono";font-style:normal;font-weight:400;font-display:swap;
  src:url("fonts/jetbrains-mono-400.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"JetBrains Mono";font-style:normal;font-weight:500;font-display:swap;
  src:url("fonts/jetbrains-mono-500.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"JetBrains Mono";font-style:normal;font-weight:700;font-display:swap;
  src:url("fonts/jetbrains-mono-700.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  --ice:#E4E9EB;
  --paper:#F2F5F6;
  --ink:#0D1316;
  --slate:#182126;
  --slate-2:#222E34;
  --steel:#54646B;
  --steel-lit:#97A9B1;
  --brass:#A0722A;
  --brass-deep:#7E561B;
  --brass-lit:#D6AC5C;
  --line:rgba(13,19,22,.14);
  --line-dk:rgba(255,255,255,.16);

  --display:"Archivo",-apple-system,system-ui,sans-serif;
  --body:"Source Serif 4",Georgia,serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;

  --gutter:clamp(20px,5vw,64px);
  --col:min(66ch,100%);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--ice);
  color:var(--ink);
  font-family:var(--body);
  font-size:clamp(17px,1.05vw + 13px,19.5px);
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
p{margin:0 0 1.15em}
p:last-child{margin-bottom:0}
a{color:inherit}

/* ---------- shared type ---------- */
/* These labels are how a reader works out what section they are in, so they
   carry more weight than a caption. Bigger, darker, and less widely tracked,
   because heavy tracking hurts legibility at small sizes. */
.eyebrow{
  font-family:var(--mono);
  font-size:12px;
  font-weight:700;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--steel);
  margin:0 0 1.4rem;
  display:block;
}
.on-dark .eyebrow{color:var(--brass-lit)}

h1,h2,h3{
  font-family:var(--display);
  font-weight:700;
  letter-spacing:-.028em;
  line-height:1.04;
  margin:0;
  text-wrap:balance;
}
h1{font-size:clamp(2.6rem,7.2vw,5.1rem);font-weight:800;letter-spacing:-.038em}
h2{font-size:clamp(1.95rem,4vw,3.05rem)}
h3{font-size:clamp(1.15rem,1.7vw,1.42rem);letter-spacing:-.018em;line-height:1.22}

.lede{
  font-size:clamp(1.08rem,1.3vw + .6rem,1.36rem);
  line-height:1.55;
  color:#2C393F;
  font-weight:400;
}
.on-dark .lede{color:#C4D2D7}

/* ---------- tick rule: the timing-scale motif ---------- */
.tick-rule{
  height:9px;
  border-top:1px solid var(--line);
  background-image:repeating-linear-gradient(to right,var(--line) 0 1px,transparent 1px 14px);
  background-size:14px 5px;
  background-repeat:repeat-x;
  background-position:top left;
}
.on-dark .tick-rule{
  border-top-color:var(--line-dk);
  background-image:repeating-linear-gradient(to right,var(--line-dk) 0 1px,transparent 1px 14px);
}

/* ---------- layout ---------- */
.wrap{
  width:100%;
  max-width:1240px;
  margin:0 auto;
  padding-left:var(--gutter);
  padding-right:var(--gutter);
}
section{padding-block:clamp(64px,9vw,132px)}

.spine{
  display:grid;
  grid-template-columns:150px minmax(0,1fr);
  gap:clamp(24px,4vw,64px);
  align-items:start;
}
@media (max-width:860px){
  .spine{grid-template-columns:1fr;gap:14px}
}
.spine-label{position:sticky;top:96px}
@media (max-width:860px){.spine-label{position:static;top:auto}}
.prose{max-width:var(--col)}

/* ---------- nav ---------- */
header.nav{
  position:fixed;inset:0 0 auto 0;z-index:80;
  background:rgba(228,233,235,.86);
  backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;
  transition:border-color .3s ease,background .3s ease;
}
header.nav.stuck{border-bottom-color:var(--line)}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:20px;height:64px}
.mark{
  font-family:var(--display);font-weight:800;font-size:.98rem;
  letter-spacing:-.02em;text-decoration:none;
}
.mark{white-space:nowrap}
.mark span{
  font-family:var(--mono);font-weight:500;font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--steel);margin-left:12px;
  white-space:nowrap;
}
.nav-links{display:flex;align-items:center;gap:30px}
.nav-links a{
  font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.13em;
  text-transform:uppercase;text-decoration:none;color:var(--steel);
  transition:color .2s ease;
}
.nav-links a:hover,.nav-links a:focus-visible{color:var(--ink)}
@media (max-width:820px){.nav-links a:not(.btn-sm){display:none}}
/* Name and brand need 410px of content width to sit on one line. Below that,
   stack them rather than let the phrase break across lines or disappear. */
@media (max-width:480px){
  .mark{display:flex;flex-direction:column;gap:3px;line-height:1.1}
  .mark span{margin-left:0}
}
@media (max-width:400px){
  .mark span{font-size:9.5px;letter-spacing:.13em}
}
/* Below the 360px quality floor there is genuinely not room. Drop the brand
   rather than let it collide with the button. */
@media (max-width:340px){
  .mark span{display:none}
}

.btn-sm{
  border:1px solid var(--ink);border-radius:2px;padding:8px 15px;
  color:var(--ink) !important;
}
.btn-sm:hover{background:var(--ink);color:var(--ice) !important}

/* ---------- hero ---------- */
.hero{padding-top:clamp(120px,17vw,190px);padding-bottom:clamp(36px,5vw,60px)}
/* The hero headline is a full sentence rather than a phrase, so it takes a
   smaller ceiling than the global h1. At the old 5.1rem it ran to six lines. */
.hero h1{font-size:clamp(2.4rem,5.8vw,4rem);margin-bottom:clamp(22px,3vw,34px)}
.hero .lede{max-width:56ch}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(30px,4vw,44px)}

.btn{
  display:inline-block;font-family:var(--mono);font-size:11.5px;font-weight:500;
  letter-spacing:.15em;text-transform:uppercase;text-decoration:none;
  padding:15px 26px;border-radius:2px;border:1px solid var(--ink);
  transition:background .2s ease,color .2s ease,transform .2s ease;
}
.btn-primary{background:var(--ink);color:var(--ice)}
.btn-primary:hover{background:var(--brass);border-color:var(--brass);color:#fff}
.btn-ghost{background:transparent;color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--ice)}
.on-dark .btn-primary{background:var(--brass-lit);border-color:var(--brass-lit);color:var(--slate)}
.on-dark .btn-primary:hover{background:#fff;border-color:#fff}
.on-dark .btn-ghost{border-color:rgba(255,255,255,.4);color:#fff}
.on-dark .btn-ghost:hover{background:#fff;color:var(--slate)}

/* ---------- signature: the margin scale ---------- */
.margin-band{padding-block:clamp(40px,5vw,68px)}
/* The tallest tick is the silver one, because it carries four names. Measured
   from the actual font metrics it needs 142px above the axis on desktop and
   131px on mobile, where the column is narrower but the type is smaller. The
   old 74px let it ride up into the paragraph above. */
.scale{
  margin:clamp(48px,5vw,60px) 0 0;
  position:relative;
  padding-top:158px;
  padding-bottom:34px;
}
@media (max-width:700px){
  .scale{padding-top:146px}
}
.scale-line{
  position:relative;height:0;border-top:1.5px solid var(--ink);
}
.scale-ticks{
  position:absolute;inset:0 0 auto 0;height:7px;
  background-image:repeating-linear-gradient(to right,var(--line) 0 1px,transparent 1px 12px);
}
.mark-pt{position:absolute;bottom:0;transform:translateX(-50%);text-align:center;width:150px}
.mark-pt .stem{
  width:1.5px;height:46px;margin:0 auto;background:var(--ink);
  transform-origin:bottom center;
}
.mark-pt .val{
  font-family:var(--mono);font-size:clamp(13px,1.5vw,16px);font-weight:700;
  letter-spacing:-.01em;margin-bottom:6px;white-space:nowrap;
}
.mark-pt .tag{
  font-family:var(--mono);font-size:9.5px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--steel);margin-bottom:9px;line-height:1.5;
}
.mark-pt.is-us .stem{background:var(--brass);width:2.5px;height:60px}
.mark-pt.is-us .val{color:var(--brass);font-size:clamp(15px,1.9vw,20px)}
.mark-pt.is-us .tag{color:var(--brass)}
.scale-foot{
  display:flex;justify-content:space-between;gap:16px;
  margin-top:16px;font-family:var(--mono);font-size:10px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--steel);
}
@media (max-width:700px){
  .mark-pt{width:104px}
  .mark-pt .tag{font-size:8.5px;letter-spacing:.1em}
  .scale-foot span:nth-child(2){display:none}
}

/* ---------- dark band ---------- */
.on-dark{background:var(--slate);color:#EAF0F2}
.on-dark h1,.on-dark h2,.on-dark h3{color:#fff}

/* ---------- layers ---------- */
.layers{margin-top:clamp(40px,5vw,64px);display:grid;gap:1px;background:var(--line-dk)}
.layer{
  background:var(--slate);
  padding:clamp(26px,3.4vw,40px) 0;
  display:grid;
  grid-template-columns:64px minmax(0,1fr);
  gap:clamp(18px,3vw,44px);
  align-items:start;
}
@media (min-width:900px){
  .layer{grid-template-columns:64px 300px minmax(0,1fr)}
}
.layer-no{
  font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.1em;
  color:var(--brass-lit);padding-top:.45em;
}
.layer h3{margin-bottom:0}
@media (max-width:899px){.layer h3{margin-bottom:.7rem}}
.layer p{color:#B9C8CD;font-size:.97em}
.layer-body{grid-column:1/-1}
@media (min-width:900px){.layer-body{grid-column:3}}

/* ---------- work tracks ---------- */
.tracks{margin-top:clamp(40px,5vw,60px);display:grid;gap:clamp(20px,2.4vw,28px)}
@media (min-width:900px){.tracks{grid-template-columns:repeat(3,1fr)}}
.track{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:3px;
  padding:clamp(24px,2.6vw,32px);
  display:flex;flex-direction:column;
  transition:transform .25s ease,box-shadow .25s ease;
}
.track:hover{transform:translateY(-3px);box-shadow:0 12px 30px -18px rgba(13,19,22,.4)}
.track .who{
  font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.17em;
  text-transform:uppercase;color:var(--brass-deep);margin-bottom:16px;
}
.track h3{margin-bottom:.75rem}
.track p{font-size:.93em;color:#38464C}
.track .meta{
  margin-top:auto;padding-top:22px;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--steel);
}

/* ---------- case notes ---------- */
.notes{margin-top:clamp(40px,5vw,60px);border-top:1px solid var(--line)}
.note{
  border-bottom:1px solid var(--line);
  padding:clamp(24px,3vw,36px) 0;
  display:grid;grid-template-columns:1fr;gap:10px;
}
@media (min-width:820px){
  .note{grid-template-columns:270px minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:start}
}
/* The role is the only thing telling a reader who each note is about, so it
   needs to register before the paragraph does. */
.note .role{
  font-family:var(--mono);font-size:12.5px;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink);line-height:1.55;
}
.note .role em{
  display:block;font-style:normal;font-weight:500;font-size:11px;
  color:var(--steel);letter-spacing:.09em;margin-top:7px;
}
.note p{font-size:.95em;color:#333F45}

/* ---------- about / personal ---------- */
.facts{
  margin-top:clamp(36px,4vw,52px);
  display:grid;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:3px;overflow:hidden;
}
@media (min-width:760px){.facts{grid-template-columns:repeat(3,1fr)}}
/* These cards are a light surface inside the dark About band, so they must set
   their own text colour. Without this they inherit #EAF0F2 from .on-dark and
   render near white on near white, which is a contrast ratio of 1.05 to 1. */
.fact{background:var(--paper);color:var(--ink);padding:24px 22px}
.fact .k{
  font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--steel);margin-bottom:10px;
}
.fact .v{font-family:var(--display);font-weight:600;font-size:1.02rem;line-height:1.35;letter-spacing:-.01em;color:var(--ink)}

/* ---------- contact ---------- */
.contact-grid{margin-top:clamp(34px,4vw,52px);display:grid;gap:clamp(28px,4vw,56px)}
@media (min-width:860px){.contact-grid{grid-template-columns:1fr 320px}}
.channels{display:grid;gap:1px;background:var(--line-dk);border-top:1px solid var(--line-dk)}
.channel{
  background:var(--slate);padding:18px 0;
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  text-decoration:none;
  font-family:var(--mono);font-size:12px;letter-spacing:.04em;
  transition:padding-left .22s ease,color .22s ease;
}
.channel .lab{font-size:10.5px;font-weight:500;letter-spacing:.15em;text-transform:uppercase;color:var(--steel-lit)}
.channel:hover{padding-left:10px;color:var(--brass-lit)}

/* ---------- footer ---------- */
footer{background:var(--slate);color:#8FA3AA;padding-block:clamp(40px,5vw,64px)}
.foot-grid{display:grid;gap:28px}
@media (min-width:760px){.foot-grid{grid-template-columns:1.4fr 1fr 1fr}}
.foot-grid h4{
  font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.15em;
  text-transform:uppercase;color:var(--steel-lit);margin:0 0 14px;
}
.foot-grid a{color:#C4D2D7;text-decoration:none;font-size:.86rem;font-family:var(--mono);letter-spacing:.03em}
.foot-grid a:hover{color:var(--brass-lit)}
.foot-grid ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.foot-addr{font-family:var(--mono);font-size:.8rem;line-height:1.9;color:#8FA3AA;font-style:normal}
.foot-base{
  margin-top:clamp(32px,4vw,48px);padding-top:22px;border-top:1px solid var(--line-dk);
  display:flex;flex-wrap:wrap;gap:8px 26px;justify-content:space-between;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--steel-lit);
}

/* ---------- photography ----------
   All four photos are graded in CSS, not in the file, so that shots from
   different shoots and different cameras read as one set. Ratios are locked
   with aspect-ratio + object-fit so the exact crop you supply does not matter. */
.shot{
  position:relative;
  margin:0;
  overflow:hidden;
  border-radius:3px;
  background:var(--slate-2);
  isolation:isolate;
}
.shot img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  display:block;
  filter:saturate(.68) contrast(1.07) brightness(.97);
  z-index:1;
}
.shot::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(24,33,38,.06),rgba(24,33,38,.22));
  mix-blend-mode:multiply;
}
.shot-label{
  position:absolute;inset:0;z-index:0;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:20px;gap:6px;
  font-family:var(--mono);font-size:10px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--steel);
  line-height:1.9;
}
.shot-label b{color:#8FA3AA;font-weight:500;letter-spacing:.16em}
.shot.loaded .shot-label{display:none}

.shot-hero{aspect-ratio:4/5}
@media (min-width:900px){.shot-hero{aspect-ratio:3/4.35}}

.band-shot{
  border-radius:0;
  aspect-ratio:3/2;
  width:100%;
}
@media (min-width:760px){.band-shot{aspect-ratio:21/8}}
/* the podium frame is close to square, so a centred crop in a 21:8 band cuts
   the four faces off at the eyes. Hold the window near the top. */
.band-shot img{object-position:50% 15%}
.band-shot .shot-cap{
  position:absolute;z-index:3;left:var(--gutter);bottom:22px;
  font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.17em;
  text-transform:uppercase;color:rgba(255,255,255,.72);
  text-shadow:0 1px 12px rgba(0,0,0,.55);
}
/* The coaching photo is shown whole, so the slot takes the frame's own ratio
   and nothing is cropped. It is held narrow on purpose: the file has 1284px of
   real width, so a smaller box means a higher pixel density and a sharp image
   rather than a large soft one. */
.shot-notes{
  aspect-ratio:1284/2209;
  width:100%;
  max-width:340px;
  margin-bottom:0;
}
/* The photo and the section heading sit side by side from 900px up, and stack
   in that order below it. The spine label keeps its own rail either way. */
.notes-intro{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(26px,3vw,44px);
  align-items:center;
}
@media (min-width:900px){
  .notes-intro{grid-template-columns:340px minmax(0,1fr)}
}
/* This frame was shot in flat overcast light, so it has no deep blacks and no
   real highlights. The site grade assumes a contrastier source and leaves it
   looking washed out, so this slot gets a harder lift of its own. */
.shot-notes img{
  object-fit:contain;
  background:var(--slate-2);
  filter:saturate(.74) contrast(1.30) brightness(.94);
}
.shot-about{aspect-ratio:4/5}
@media (min-width:900px){.shot-about{aspect-ratio:3/4}}

.hero-grid{display:grid;gap:clamp(28px,4vw,56px);align-items:end}
@media (min-width:900px){
  .hero-grid{grid-template-columns:minmax(0,1.28fr) minmax(0,.72fr)}
}
.about-grid{display:grid;gap:clamp(28px,4vw,56px);align-items:start}
@media (min-width:900px){
  .about-grid{grid-template-columns:minmax(0,1fr) minmax(0,.62fr)}
}

/* ---------- motion ---------- */
.rise{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)}
.rise.in{opacity:1;transform:none}
.hero .rise{transition-delay:var(--d,0ms)}
.stem{transition:height .9s cubic-bezier(.2,.7,.3,1) .15s}
.scale:not(.in) .stem{height:0 !important}
.scale .mark-pt .val,.scale .mark-pt .tag{transition:opacity .5s ease .55s}
.scale:not(.in) .mark-pt .val,.scale:not(.in) .mark-pt .tag{opacity:0}

:focus-visible{outline:2px solid var(--brass);outline-offset:3px;border-radius:2px}
.on-dark :focus-visible{outline-color:var(--brass-lit)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.001ms !important;animation-duration:.001ms !important}
  .rise{opacity:1;transform:none}
  .scale:not(.in) .stem{height:46px !important}
  .scale:not(.in) .mark-pt.is-us .stem{height:60px !important}
  .scale:not(.in) .mark-pt .val,.scale:not(.in) .mark-pt .tag{opacity:1}
}

/* ---------- application form ---------- */
.apply{margin-top:clamp(30px,4vw,44px);max-width:var(--col)}
.apply-row{display:grid;grid-template-columns:1fr;gap:0}
@media (min-width:640px){
  .apply-row{grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,24px)}
}
.field{margin:0 0 clamp(18px,2.2vw,24px)}
.field label{
  display:block;margin-bottom:8px;
  font-family:var(--mono);font-size:9.5px;font-weight:500;letter-spacing:.17em;
  text-transform:uppercase;color:var(--steel);
}
.field input,.field select,.field textarea{
  width:100%;
  font-family:var(--body);font-size:1rem;color:var(--ink);
  background:var(--paper);
  border:1px solid var(--line);border-radius:2px;
  padding:13px 14px;
  transition:border-color .2s ease,background .2s ease;
}
.field textarea{resize:vertical;line-height:1.6;min-height:150px}
.field select{
  font-family:var(--mono);font-size:.82rem;letter-spacing:.04em;
  height:49px;appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--steel) 50%),linear-gradient(135deg,var(--steel) 50%,transparent 50%);
  background-position:calc(100% - 19px) 21px,calc(100% - 14px) 21px;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--steel)}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:2px solid var(--brass);outline-offset:2px;
  border-color:var(--brass);background:#fff;
}
.field-note{
  display:block;margin-top:9px;
  font-family:var(--mono);font-size:10px;line-height:1.7;letter-spacing:.04em;color:var(--steel);
}
.apply button[type=submit]{cursor:pointer;margin-top:4px}
.apply-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.apply-alt{
  margin-top:clamp(20px,2.4vw,28px);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--steel);
}
.apply-alt a{color:var(--brass)}

/* ---------- inner document pages (imprint, privacy) ---------- */
.doc{padding-top:clamp(110px,14vw,160px);padding-bottom:clamp(64px,9vw,120px)}
.doc h1{font-size:clamp(2rem,4.4vw,3.2rem);margin-bottom:clamp(28px,4vw,44px)}
.doc h2{font-size:clamp(1.15rem,1.8vw,1.45rem);margin:2.4em 0 .7em;letter-spacing:-.015em}
.doc .prose{max-width:68ch}
.doc address{font-style:normal;font-family:var(--mono);font-size:.85rem;line-height:2}
.doc .placeholder{
  background:var(--paper);border:1px solid var(--line);border-left:2px solid var(--brass);
  padding:14px 18px;border-radius:2px;
  font-family:var(--mono);font-size:.78rem;line-height:1.8;color:#3A474D;
}
.doc a{color:var(--brass)}