*,*::before,*::after{box-sizing:border-box}
:root{
  --black:#0A0A0A; --bone:#F4F2ED; --stone:#D8D5CE; --graphite:#555555;
  --hair-dark:#2A2A2A;
  --display:"Inter Tight","Helvetica Neue",Helvetica,Arial,sans-serif;
  --body:"Inter","Helvetica Neue",Helvetica,Arial,sans-serif;
  --pad:clamp(24px,6vw,110px);
  --max:1320px;
  --ease:cubic-bezier(.16,1,.3,1);
}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}}

body{margin:0;background:var(--black);color:var(--bone);font-family:var(--body);
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit}

.wrap{max-width:var(--max);margin:0 auto}
section{padding:clamp(64px,10vw,150px) var(--pad)}
.on-black{background:var(--black);color:var(--bone)}
.on-bone{background:var(--bone);color:var(--black)}
.on-stone{background:var(--stone);color:var(--black)}
.on-stone .muted{color:var(--black)}
.on-stone .over{color:var(--graphite)}
.on-stone .dev-rule{background:var(--graphite)}

/* A section that IS a photograph. Tarryn 01/09/2026: "remove the layer over the image."
   So there is no scrim of any kind here - no veil, no gradient, no filter. It works only
   because of the frame she chose: b10's lower half is already deep shadow, so the band
   carries bone type the way the photograph is lit rather than because a rectangle was
   painted over it. **A different frame in this slot will need checking, not assuming.** */
.photo-band{display:block;background:var(--black);line-height:0}
.photo-band img{width:100%;height:clamp(280px,44svh,520px);object-fit:cover}

/* --- type: two extremes, nothing between --- */
h1,h2,h3{font-family:var(--display);font-weight:700;letter-spacing:-0.035em;
  line-height:0.94;text-wrap:balance;margin:0}
h1{font-size:clamp(2.9rem,11vw,9rem);text-transform:uppercase}
h1.position{font-size:clamp(2.15rem,5.9vw,5.4rem);letter-spacing:-0.03em;line-height:0.98}
h1.sub,h2{font-size:clamp(2rem,5.6vw,4.2rem);text-transform:uppercase}
h3{font-size:clamp(1.3rem,2.4vw,1.9rem);letter-spacing:-0.025em}
p{margin:0;max-width:62ch}
.lede{font-size:clamp(1.05rem,1.5vw,1.3rem);line-height:1.5}
.on-black .muted{color:var(--stone)}
.on-bone .muted{color:var(--graphite)}

.over{font-size:11px;font-weight:500;letter-spacing:0.16em;text-transform:uppercase;
  font-variant-numeric:tabular-nums;line-height:1.4;max-width:none}
.on-black .over{color:var(--stone)}
.on-bone .over{color:var(--graphite)}

/* --- chrome. Transparent over a hero, solid once the page has moved. --- */
header.site{position:fixed;top:0;left:0;right:0;z-index:30;
  border-bottom:1px solid transparent;
  transition:background .45s var(--ease),border-color .45s var(--ease)}
header.site::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,10,10,.78) 0%,rgba(10,10,10,0) 100%);
  transition:opacity .45s var(--ease)}
header.site.solid::before{opacity:0}
body.hero-light header.site:not(.solid)::before{
  background:linear-gradient(180deg,rgba(216,213,206,.92) 0%,rgba(216,213,206,0) 100%)}
body.hero-light header.site:not(.solid) nav a{color:var(--graphite)}
body.hero-light header.site:not(.solid) nav a:hover,
body.hero-light header.site:not(.solid) nav a:focus-visible,
body.hero-light header.site:not(.solid) nav a[aria-current=page]{
  color:var(--black);border-bottom-color:var(--black)}
header.site.solid{background:rgba(10,10,10,.88);border-bottom-color:var(--hair-dark);
  backdrop-filter:saturate(140%) blur(14px)}
.bar{position:relative}
.bar{padding:16px var(--pad)}
.bar-in{display:flex;align-items:center;justify-content:flex-end;gap:24px;
  max-width:var(--max);margin:0 auto}
.bar nav{display:flex;gap:clamp(14px,2.4vw,34px);overflow-x:auto;scrollbar-width:none;
  -webkit-overflow-scrolling:touch}
.bar nav::-webkit-scrollbar{display:none}
.bar nav a{font-size:11px;font-weight:500;letter-spacing:0.16em;text-transform:uppercase;
  color:var(--stone);text-decoration:none;padding:4px 0;white-space:nowrap;
  border-bottom:1px solid transparent;transition:color .3s var(--ease)}
.bar nav a:hover,.bar nav a:focus-visible{color:var(--bone);border-bottom-color:var(--bone)}
.bar nav a[aria-current=page]{color:var(--bone);border-bottom-color:var(--bone)}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.skip{position:absolute;left:-9999px;top:0;z-index:60;background:var(--bone);
  color:var(--black);padding:12px 20px;font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;text-decoration:none}
.skip:focus{left:0}

/* --- full-bleed photography --------------------------------------------------
   One figure element does every full-bleed image on the site: the hero, the page
   heads and the statement bands. The scrim is a gradient rather than a flat wash so
   the picture keeps its blacks where no type sits on it. */
.bleed{position:relative;isolation:isolate;display:flex;
  padding:clamp(56px,9vw,120px) var(--pad);overflow:hidden}
.bleed>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.bleed::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(10,10,10,.82) 0%,rgba(10,10,10,.46) 38%,
    rgba(10,10,10,.70) 74%,rgba(10,10,10,.96) 100%)}
.bleed .wrap{width:100%}
/* The light variant. Same photograph, a bone wash instead of a black one, and the type
   inverts with it. The header has to invert too or the nav disappears into the sky - see
   body.hero-light below. */
.bleed.light{color:var(--black)}
.bleed.light::after{background:linear-gradient(180deg,rgba(216,213,206,.70) 0%,
  rgba(216,213,206,.56) 42%,rgba(216,213,206,.72) 100%)}
.bleed.light .over{color:var(--black)}
.bleed.light .muted{color:var(--graphite)}
.bleed.light .dev-rule{background:var(--stone)}
.bleed-tall{min-height:min(100svh,980px);align-items:flex-end}
.bleed-tall::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(10,10,10,.92) 0%,rgba(10,10,10,.62) 42%,
    rgba(10,10,10,0) 72%)}
@media (max-width:719px){.bleed-tall::before{background:rgba(10,10,10,.42)}}
.bleed-mid{min-height:min(66svh,680px);align-items:flex-end}
.bleed-mid.high{align-items:center}
.bleed-deep{min-height:min(82svh,860px);align-items:flex-end}
.bleed-mid::after{background:linear-gradient(180deg,rgba(10,10,10,.76) 0%,
  rgba(10,10,10,.40) 34%,rgba(10,10,10,.72) 76%,rgba(10,10,10,.94) 100%)}
.bleed-mid.light::after{background:linear-gradient(180deg,rgba(216,213,206,.10) 0%,
  rgba(216,213,206,.04) 45%,rgba(216,213,206,.16) 100%)}
.bleed-band{min-height:min(58svh,560px);align-items:center;justify-content:flex-start}
.bleed-band::after{background:linear-gradient(180deg,rgba(10,10,10,.58) 0%,
  rgba(10,10,10,.78) 100%)}

/* --- hero --- */
.hero-mark{width:clamp(44px,4vw,56px);margin-bottom:26px}
.hero h1{margin:26px 0 30px}
.hero .lede{max-width:44ch}
.hero-rail{display:flex;gap:clamp(16px,4vw,52px);flex-wrap:wrap;
  margin-top:clamp(40px,6vw,72px);padding-top:22px;border-top:1px solid rgba(244,242,237,.22)}
.cta{display:inline-block;margin-top:clamp(30px,4vw,44px);padding:16px 30px;
  background:var(--bone);color:var(--black);text-decoration:none;
  font-size:11px;font-weight:600;letter-spacing:0.16em;text-transform:uppercase;
  transition:background .3s var(--ease),transform .3s var(--ease)}
.cta:hover,.cta:focus-visible{background:var(--stone);transform:translateY(-2px)}

/* --- the NN / TT device --- */
.dev{display:flex;align-items:center;gap:18px;margin-bottom:18px}
.dev-rule{flex:1;height:1px}
.on-black .dev-rule,.bleed .dev-rule{background:var(--hair-dark)}
.bleed .dev-rule,.pil .dev-rule{background:rgba(244,242,237,.38)}
.on-bone .dev-rule{background:var(--stone)}

/* --- section heads --- */
.head{margin-bottom:clamp(36px,6vw,80px)}
.head .over{display:block;margin-bottom:18px}
.head h2{margin-bottom:18px}

/* --- grids --- */
.cols-2{display:grid;gap:clamp(28px,5vw,80px);
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}

/* --- the pillar sequence. Four photographs that carry the words. --- */
.edge-sec{padding-left:0;padding-right:0}
/* The grid IS the bottom of the section. Section padding under an edge-to-edge band reads
   as a strip of dead ground, which is exactly what it is. */
.edge-sec.flush{padding-bottom:0}
.edge-sec>.wrap{max-width:none;padding:0 var(--pad)}
.edge-sec>.wrap>*{max-width:var(--max);margin-left:auto;margin-right:auto}
.pillars{display:grid;gap:1px;background:var(--hair-dark);
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.pil{position:relative;isolation:isolate;display:flex;flex-direction:column;
  justify-content:flex-end;aspect-ratio:4/5;padding:clamp(20px,2vw,30px);overflow:hidden}
.pil>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
  transition:transform 1.1s var(--ease)}
.pil::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(10,10,10,.30) 0%,rgba(10,10,10,.18) 40%,
    rgba(10,10,10,.86) 100%)}
.pil:hover>img,.pil:focus-within>img{transform:scale(1.05)}
.pil .lang{position:absolute;top:clamp(20px,2vw,30px);right:clamp(20px,2vw,30px);
  color:rgba(244,242,237,.72)}
.pil h3{text-transform:uppercase;color:var(--bone);margin-bottom:6px}
.pil p{color:var(--stone);font-size:14px}
.pil .dev{margin-bottom:14px}
.pil .dev .over{color:rgba(244,242,237,.82)}

/* The pillar blocks on Approach run their pictures a little smaller than the portfolio
   blocks do - the text beside them is longer, and a full-width figure made the pair feel
   top heavy. */
.ed.pillar-ed .ed-fig{max-width:84%}
.ed.pillar-ed:not(.flip) .ed-fig{margin-right:auto}
.ed.pillar-ed.flip .ed-fig{margin-left:auto}
@media (max-width:719px){.ed.pillar-ed .ed-fig{max-width:100%}}

/* --- editorial block: one picture, one column of words, alternating --------- */
.ed{display:grid;gap:clamp(24px,4vw,64px);align-items:center;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  padding:clamp(40px,5vw,72px) 0;border-top:1px solid var(--hair-dark)}
.on-bone .ed{border-top-color:var(--stone)}
.ed:last-of-type{border-bottom:1px solid var(--hair-dark)}
.on-bone .ed:last-of-type{border-bottom-color:var(--stone)}
.ed-fig{margin:0;overflow:hidden}
.ed-fig img{width:100%;transition:transform 1.2s var(--ease)}
.ed:hover .ed-fig img{transform:scale(1.04)}
.ed.flip .ed-fig{order:2}
@media (max-width:719px){.ed.flip .ed-fig{order:0}}
.ed h3{text-transform:uppercase;margin-bottom:14px}
.ed-head{font-family:var(--display);font-weight:600;letter-spacing:-0.02em;
  font-size:clamp(1.05rem,1.8vw,1.35rem);line-height:1.3;margin-bottom:14px}
.ed-meta{display:flex;gap:10px 22px;flex-wrap:wrap;margin-top:22px;align-items:center}
.ed a.out{text-decoration:none;font-size:11px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;border-bottom:1px solid currentColor;padding-bottom:3px}
.ed-name{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:14px}

/* --- the model: four columns, a hairline over each, nothing else --- */
.model{display:grid;gap:clamp(24px,3vw,44px);margin-top:clamp(44px,6vw,84px);
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.model .col{padding-top:18px;border-top:1px solid var(--stone)}
.on-black .model .col{border-top-color:var(--hair-dark)}
.model h3{text-transform:uppercase;margin:14px 0 10px}
.model p{font-size:15px}

/* --- the standard: five questions, each on its own rule --- */
.q{display:grid;grid-template-columns:minmax(60px,86px) 1fr;gap:clamp(16px,3vw,40px);
  align-items:baseline;padding:clamp(20px,2.6vw,32px) 0;border-top:1px solid var(--hair-dark)}
.q:last-of-type{border-bottom:1px solid var(--hair-dark)}
.q p{font-family:var(--display);font-weight:600;letter-spacing:-0.025em;
  font-size:clamp(1.25rem,2.8vw,2.1rem);line-height:1.1;max-width:none}

/* --- the group architecture ---------------------------------------------------
   Tarryn's own diagram, 01/09/2026: the Kamb mark, a connector tree, and the four
   operating companies as their OWN marks. She asked for the company name NOT to be
   repeated under the logo, because the logo already says it - so each column carries
   its mark and its discipline and nothing else.
   The connectors are drawn with hairlines rather than an SVG so they stay crisp at any
   width, and they are hidden below 720px where the columns stack and a tree would lie. */
.arch{margin-top:clamp(40px,5vw,72px)}
.arch-top{position:relative;text-align:center;padding-bottom:52px}
.arch-top::after{content:"";position:absolute;bottom:0;left:50%;width:1px;height:52px;
  background:var(--stone)}
.arch-mark{width:clamp(64px,6.4vw,86px);margin:0 auto 18px}
.arch-row{--arch-gap:clamp(20px,3vw,48px);position:relative;display:grid;
  grid-template-columns:repeat(4,1fr);gap:var(--arch-gap);padding-top:52px}
/* The rule has to end ON the outer stubs, and the stubs sit at the COLUMN centres, which
   with four columns and three gaps is (100% - 3 gaps) / 8 in from each side. A flat 12.5%
   was close enough to look almost right, which is the worst kind of wrong. */
.arch-row::before{content:"";position:absolute;top:0;height:1px;background:var(--stone);
  left:calc((100% - 3 * var(--arch-gap)) / 8);
  right:calc((100% - 3 * var(--arch-gap)) / 8)}
.co{position:relative;display:flex;flex-direction:column;align-items:center;gap:20px;
  text-align:center;text-decoration:none;padding-top:8px}
.co::before{content:"";position:absolute;top:-52px;left:50%;width:1px;height:52px;
  background:var(--stone)}
.co-mark{height:clamp(38px,4.4vw,58px);display:flex;align-items:center;
  justify-content:center;width:100%}
.co-mark img{max-height:100%;max-width:82%;width:auto;height:auto;
  transition:transform .5s var(--ease)}
.co:hover .co-mark img{transform:translateY(-3px)}
.co-word{font-family:var(--display);font-weight:600;letter-spacing:-0.025em;
  font-size:clamp(1.1rem,1.7vw,1.45rem);line-height:1}
.co-foot{padding-top:16px;border-top:1px solid var(--stone);width:100%}
.co .over{display:block}
.co-line{display:block;margin-top:12px;font-size:14px;line-height:1.45;
  color:var(--graphite);text-wrap:balance}
@media (max-width:719px){
  .arch-row{grid-template-columns:repeat(2,1fr);row-gap:44px;padding-top:36px}
  .arch-row::before,.co::before,.arch-top::after{display:none}
  .arch-top{padding-bottom:36px}
}

/* --- the five moves, as a checkerboard ---------------------------------------- */
.moves{display:grid;grid-template-columns:repeat(5,1fr);gap:2px;
  margin-top:clamp(34px,4.5vw,64px);background:var(--hair-dark)}
.mv{display:flex;flex-direction:column;gap:2px}
.mv.flip{flex-direction:column-reverse}
.mv-img{aspect-ratio:4/5;overflow:hidden}
.mv-img img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.mv:hover .mv-img img{transform:scale(1.05)}
.mv-txt{aspect-ratio:4/5;background:var(--stone);color:var(--black);
  padding:clamp(16px,1.5vw,24px);display:flex;flex-direction:column;
  justify-content:space-between}
.mv-txt .dev{margin-bottom:0}
.mv-txt .dev-rule{background:var(--graphite)}
.mv-txt .over{color:var(--graphite)}
.mv-txt h3{text-transform:uppercase;margin-bottom:10px}
.mv-txt p{font-size:14px;line-height:1.5;color:var(--black)}
@media (max-width:1100px){
  .moves{grid-template-columns:repeat(3,1fr)}
  .mv:last-child{grid-column:span 2;flex-direction:row}
  .mv:last-child>*{flex:1;aspect-ratio:auto}
  .mv:last-child .mv-img{min-height:100%}
}
@media (max-width:719px){
  .moves{grid-template-columns:repeat(2,1fr)}
  .mv-txt{aspect-ratio:auto;min-height:230px}
  .mv:last-child{grid-column:1/-1}
  .mv:last-child .mv-txt{min-height:0}
}

/* --- the Kamb standard, as a track rather than a wall of display type ---------- */
/* Tarryn 01/09/2026: "I hate big fat white text on the black here - make this section and
   text much smaller, maybe even a line with dots for each process question, like a graph."
   Five nodes on one hairline. Squares rather than dots, because the brand has no rounded
   corners anywhere else and a circle here would be the only one on the site. */
.track{--num:clamp(1.7rem,2.6vw,2.25rem);position:relative;display:grid;
  grid-template-columns:repeat(5,1fr);margin-top:clamp(34px,4vw,56px)}
/* The rule runs through the MIDDLE of the numerals. Tying its offset to half the numeral's
   own font size holds that at every width, where a hand-picked pixel only held at one. */
.track::before{content:"";position:absolute;top:calc(var(--num) * .5);left:10%;right:10%;
  height:1px;background:var(--hair-dark)}

.node{display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:0 clamp(8px,1vw,18px)}
/* A bold numeral instead of the NN / TT device and a pip - Tarryn 01/09/2026. Five short
   questions on one line do not need the sequence device; one glyph says it. The numeral
   carries the section ground as its own background so it knocks a gap in the rule. */
.node .num{font-family:var(--display);font-weight:700;letter-spacing:-0.03em;
  font-size:var(--num);line-height:1;color:var(--bone);margin-bottom:22px;
  position:relative;z-index:1;padding:0 16px;background:var(--black)}
.node p{font-size:15px;line-height:1.45;color:var(--stone);max-width:22ch}
@media (max-width:719px){
  .track{grid-template-columns:1fr;gap:0}
  .track::before{top:0;bottom:0;left:15px;right:auto;width:1px;height:auto}
  .node{position:relative;flex-direction:row;align-items:baseline;gap:20px;text-align:left;
    padding:0 0 26px 0}
  .node .num{margin:0;font-size:1.6rem;min-width:32px;text-align:center;padding:0}
  .node p{max-width:none;flex:1}
}

/* --- statement --- */
.say-big{font-family:var(--display);font-weight:600;letter-spacing:-0.03em;
  font-size:clamp(1.7rem,4.4vw,3.2rem);line-height:1.06;max-width:22ch}
.bleed .say-big{max-width:20ch}

/* --- advantage --- */
.adv{padding:22px 0;border-top:1px solid var(--hair-dark);display:grid;
  grid-template-columns:minmax(130px,210px) 1fr;gap:clamp(16px,4vw,52px)}
.adv:last-child{border-bottom:1px solid var(--hair-dark)}
.adv dt{font-family:var(--display);font-size:1.1rem;font-weight:600;letter-spacing:-0.01em}
.adv dd{margin:0;color:var(--stone)}
.on-bone .adv{border-top-color:var(--stone)}
.on-bone .adv:last-child{border-bottom-color:var(--stone)}
.on-bone .adv dd{color:var(--graphite)}

/* --- facts --- */
.facts{width:100%;border-collapse:collapse;margin-top:8px}
.facts th,.facts td{text-align:left;padding:16px 20px 16px 0;
  border-bottom:1px solid var(--hair-dark);vertical-align:top;font-weight:400}
.on-bone .facts th,.on-bone .facts td{border-bottom-color:var(--stone)}
.facts th{font-size:11px;font-weight:500;letter-spacing:0.16em;text-transform:uppercase;
  white-space:nowrap;width:1%;padding-right:40px}
.on-black .facts th{color:var(--stone)}
.on-bone .facts th{color:var(--graphite)}
.table-wrap{overflow-x:auto}

/* --- the enquiry form --- */
.form{display:grid;gap:clamp(18px,2vw,26px);max-width:620px;
  margin:clamp(30px,4vw,48px) auto 0}
.form-centred{text-align:center}
.form-centred .field{text-align:left}
.form button{justify-self:center}
.field{display:grid;gap:9px}
.field label{font-size:11px;font-weight:500;letter-spacing:0.16em;text-transform:uppercase;
  color:var(--graphite)}
.field input,.field textarea{font-family:var(--body);font-size:16px;color:var(--black);
  background:transparent;border:0;border-bottom:1px solid var(--stone);padding:10px 0;
  border-radius:0;-webkit-appearance:none;transition:border-color .3s var(--ease)}
.field textarea{min-height:130px;resize:vertical;line-height:1.55}
.field input:focus,.field textarea:focus{outline:0;border-bottom-color:var(--black)}
.field input::placeholder,.field textarea::placeholder{color:var(--stone)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form button{margin-top:8px;padding:16px 34px;background:var(--black);
  color:var(--bone);border:0;border-radius:0;font-family:var(--body);font-size:11px;
  font-weight:600;letter-spacing:0.16em;text-transform:uppercase;cursor:pointer;
  transition:transform .3s var(--ease),opacity .3s var(--ease)}
.form button:hover:not(:disabled){transform:translateY(-2px)}
.form button:disabled{opacity:.5;cursor:default}
.form-note{font-size:13px;color:var(--graphite);max-width:52ch;margin:0 auto}
.form-msg{font-size:15px;line-height:1.5;padding-top:6px}
.form-msg.err{color:#8A1F11}
.form-msg.ok{font-family:var(--display);font-weight:600;font-size:1.25rem;
  letter-spacing:-0.02em}

/* --- contact --- */
.mail{font-family:var(--display);font-weight:600;letter-spacing:-0.025em;
  font-size:clamp(1.15rem,2.2vw,1.7rem);text-decoration:none;
  border-bottom:1px solid currentColor;padding-bottom:4px;display:inline-block}

/* --- footer --- */
footer.site{background:var(--black);color:var(--bone);
  padding:clamp(56px,8vw,110px) var(--pad);border-top:1px solid var(--hair-dark)}
.foot-top{display:flex;align-items:center;justify-content:flex-start;
  gap:clamp(22px,3vw,46px);margin-bottom:clamp(34px,5vw,60px)}
.foot-pillars{font-family:var(--display);font-weight:700;letter-spacing:-0.035em;
  line-height:1.02;font-size:clamp(1.25rem,2.5vw,2.15rem);text-transform:uppercase;
  max-width:none}
.foot-block{width:clamp(58px,6.2vw,82px);flex:none}
.foot-nav{display:flex;flex-wrap:wrap;justify-content:center;
  gap:14px clamp(22px,3.4vw,52px);padding-top:26px;border-top:1px solid var(--hair-dark)}
.foot-nav a{font-size:11px;font-weight:500;letter-spacing:0.16em;text-transform:uppercase;
  color:var(--stone);text-decoration:none;padding-bottom:3px;
  border-bottom:1px solid transparent;transition:color .3s var(--ease)}
.foot-nav a:hover,.foot-nav a:focus-visible{color:var(--bone);border-bottom-color:var(--bone)}
.legal{margin:clamp(26px,3.6vw,42px) auto 0;font-size:12px;
  color:var(--stone);letter-spacing:.01em;opacity:.62;text-align:center;max-width:76ch}
.legal a{color:var(--stone)}

/* --- legal page prose --- */
.prose h3{margin:clamp(32px,4vw,52px) 0 12px;text-transform:uppercase}
.prose p{margin-bottom:14px}

/* --- reveal on scroll. Opt-in class, so nothing is hidden if the script never runs. --- */
.js .rv{opacity:0;transform:translateY(26px);
  transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .rv{opacity:1;transform:none}}

@media (max-width:719px){
  .adv{grid-template-columns:1fr;gap:8px}
  .bar{padding-top:12px;padding-bottom:12px}
  .bar-in{justify-content:flex-start}
  .bar nav{flex-wrap:wrap;overflow:visible;gap:8px 18px}
  /* The wrapped nav makes the bar about 105px tall. Fixed, that is a permanent lid on a
     844px screen, so on phones the header scrolls away instead. The hero loses its bleed
     to the very top edge; it keeps 92svh, which is the trade worth making. */
  header.site{position:static;background:var(--black);border-bottom-color:var(--hair-dark)}
  header.site::before{display:none}
  .bleed-tall{min-height:min(92svh,760px)}
}