@charset "UTF-8";
/* RWD — the site sheet
   ==========================================================================
   Split out of hero.css, which was never really a hero sheet: it carried the
   header, the Projects panel, the footer, the phone action bar, the page
   heroes, the brand lockup, the project sheet, the contact forms and the
   label scale alongside the descent. The old site was a single page that
   loaded every stylesheet at once, so nothing revealed it. On real routes it
   showed immediately — the Projects panel hung open and unstyled on /about/,
   because the rules that position and hide it live here, not in chrome.css.

   What belongs here: anything the shell or more than one page draws.
   What stays in hero.css: the descent, the keyhole, the key, the preloader
   and the homepage's own blocks — about eleven hundred lines that no other
   page has any use for.

   Load order is preserved exactly. This sheet holds the ranges in their
   original sequence and is loaded straight after shell.css, in the slot
   hero.css used to occupy, so every cascade that resolved before still
   resolves the same way.
   ========================================================================= */

/* ---- Header over the film ----------------------------------------------
   The site's header is a solid ink bar. Over the scrub it starts as frost so
   the picture is not boxed in, and the solid bar drops in behind the labels
   once the headline arrives.
------------------------------------------------------------------------- */
/* body>header, not header: this is the site bar, and unscoped it painted
   every <header> in the page's content — the projects hero came out as a
   grey frosted slab, and the project sheet's own hero was tinted under its
   render. chrome.css already scopes its header rules this way. */
body>header{
  background:rgba(11,11,12,.42);
  -webkit-backdrop-filter:blur(20px) saturate(1.4);
          backdrop-filter:blur(20px) saturate(1.4);
  border-bottom-color:rgba(246,246,242,.12);
  /* Frosted ink and solid ink are the same colour at different strengths, so
     this interpolates along one hue and never passes through a muddy middle —
     the mud earlier came from the bar heading for paper, not from the length
     of the fade. The blur goes with it: transitioning to a real blur(0px)
     rather than to `none` is what keeps that half animating instead of
     snapping a frame in. */
  transition:background .42s cubic-bezier(.4,0,.2,1),
             border-color .42s cubic-bezier(.4,0,.2,1),
             -webkit-backdrop-filter .42s cubic-bezier(.4,0,.2,1),
             backdrop-filter .42s cubic-bezier(.4,0,.2,1);
}

/* Sitting on a project hero: solid ink, no frost. A static render is not a
   film — frosting it only lightens the bar to grey and takes the labels down
   with it, which is exactly what a bright sky at the top of a plate did. */
header.plate{
  background:var(--ink);
  /* blur(0px), not none — `none` is not a filter list, so it cannot be
     interpolated and the blur would drop out in a single frame. */
  -webkit-backdrop-filter:blur(0px) saturate(1);
          backdrop-filter:blur(0px) saturate(1);
  border-bottom-color:var(--line-dark);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  body>header{ background:rgba(11,11,12,.80) }
}

/* On its own layer so it can drop in from above the way a header does,
   travelling behind labels that never move. */
body>header::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:var(--ink);
  transform:translateY(-100%);
  transition:transform .5s cubic-bezier(.22,.61,.36,1);
}
header.solid::after,
header.menu-open::after{ transform:none }
header.solid{ border-bottom-color:var(--line-dark) }

/* White over the film, where --grey is too dark to hold against a noon sky;
   the site's own --grey once the ink bar is behind it. Crossfaded on the
   bar's own timing so the two change together. The site ships this rule with
   display:none, so showing it at all is also this rule's job. */


/* ---- Enquire button -----------------------------------------------------
   The site declares this as .nav-cta, but the bar's own rule — nav.main a —
   is more specific (0,1,2 against 0,1,0), so none of it ever applied. The
   button inherited padding:6px 0: no horizontal padding at all, which is why
   the green sat flush against the letters and the box read as clipped.

   The markup had a style="color:var(--ink)" patch for the same reason, which
   also defeated the hover state — an inline style outranks every rule, so
   the label stayed near-black as the background went blue. Restating both at
   the specificity the cascade actually needs fixes the shape and the hover,
   and the patch is gone from the HTML.
------------------------------------------------------------------------- */
nav.main a.nav-cta{
  display:inline-flex; align-items:center;
  padding:12px 22px;
  /* letter-spacing adds its space after the last letter too, so the right
     side measures wider than the left. Trim that back for optical balance. */
  padding-right:calc(22px - .05em);
  line-height:1;
  color:var(--ink);
  /* Carried in both states, transparent when filled. Swapping between
     border:none and a real border would resize the button by 2px at the
     moment the bar changes, and the label would visibly step sideways. */
  border:1px solid transparent;
  transition:background .45s ease, color .45s ease, border-color .45s ease;
}
nav.main a.nav-cta:hover{ background:var(--blue); color:var(--white) }

/* Over the film: outlined in white, so the picture reads through the button
   and the label holds against a plate that runs from a noon sky to a lit
   night — green on bright concrete is the one pairing that does not.
   Filled green once the bar is ink behind it, where the fill is what makes
   it the loudest thing on the header. :not(.menu-open) too — an open drawer
   puts ink behind the bar as well. */
header:not(.solid):not(.menu-open):not(.plate) nav.main a.nav-cta{
  background:transparent;
  border-color:rgba(255,255,255,.6);
  color:var(--white);
}
header:not(.solid):not(.menu-open):not(.plate) nav.main a.nav-cta:hover{
  background:#F4F1EA;
  border-color:#F4F1EA;
  color:var(--ink);
}

/* It is a button, not a section, and must never take the nav underline. */
nav.main a.nav-cta.active::after{ display:none }


/* ---- Projects dropdown --------------------------------------------------
   Three groups — Ongoing, Completed, Coming Soon — side by side and all open
   at once. Nothing nested behind a second hover: the whole portfolio in one
   glance, ruled into thirds.
------------------------------------------------------------------------- */
/* Deliberately NOT positioned. The panel inside it is absolute, and the
   nearest positioned ancestor is what it centres on — with position:relative
   here that was the Projects button, so a 1140px panel centred on a 90px
   word and ran off the right edge. Static, and it resolves against the
   header instead, which is fixed and full-width. The active underline is
   unaffected: it hangs off .subtoggle, which has its own position:relative. */
.has-sub{ display:inline-flex; align-items:center }

.subtoggle{
  display:inline-flex; align-items:center; gap:6px;
  background:none; border:0; padding:6px 0; cursor:pointer;
  font:500 16px/1 var(--body); letter-spacing:.04em;
  color:#C9C9C4; transition:color .2s;
}
.subtoggle:hover,
.has-sub.open .subtoggle{ color:var(--white) }

/* The router marks the current section on every [data-nav]; the site styles
   that for anchors only, and Projects is a button. Same rule, same split
   green/blue rule underneath, stopping short of the chevron. */
.subtoggle.active{ color:var(--white) }
.subtoggle.active::after{
  content:""; position:absolute; left:0; bottom:-4px; right:17px; height:2px;
  background:linear-gradient(90deg,var(--green) 50%,var(--blue) 50%);
}
.subtoggle{ position:relative }
.subtoggle:focus-visible{ outline:2px solid var(--green); outline-offset:3px }

.chev{
  width:11px; height:11px; flex:none;
  stroke:currentColor; fill:none; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round;
  transition:transform .22s ease;
}
.has-sub.open .chev{ transform:rotate(180deg) }

/* Fixed and centred on the viewport — the header carries no transform, so
   this resolves against the screen. Anchoring it to the button would push
   1140px of panel off the right-hand edge. It meets the header with no gap,
   which is also what keeps hover from dropping out on the way down. */
.sub{
  /* Absolute inside the header, which is itself fixed and full-width — so
     top:100% is always the underside of the bar and left:50% is always the
     centre of the screen. It was position:fixed at a hardcoded 68px, which
     resolves against whatever containing block the header happens to create:
     backdrop-filter makes one, and .plate turns that filter off, so the same
     panel landed in two different places depending on the page. */
  position:absolute; top:100%; left:50%;
  width:min(1140px, calc(100vw - 40px));
  display:grid; grid-template-columns:repeat(3, 1fr);
  padding:6px;
  background:rgba(22,22,24,.86);
  -webkit-backdrop-filter:blur(26px) saturate(1.5);
          backdrop-filter:blur(26px) saturate(1.5);
  border:1px solid var(--line-dark); border-top:0;
  box-shadow:0 24px 60px rgba(0,0,0,.55);
  opacity:0; visibility:hidden; transform:translate(-50%,-8px);
  transition:opacity .2s ease, transform .2s ease, visibility .2s;
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .sub{ background:#161618 }
}
.has-sub.open > .sub{ opacity:1; visibility:visible; transform:translate(-50%,0) }

/* A short menu, hung under its own toggle rather than centred on the screen.
   The wide Projects panel is deliberately unpositioned so it can centre on
   the header; a four-item list centred on the viewport would float off in
   the middle of the bar with nothing above it, so this one gets a
   positioning context of its own. */
.has-sub.is-sm{ position:relative }
.sub.sub-sm{
  left:0; width:max-content; min-width:230px;
  grid-template-columns:1fr;
  transform:translate(0,-8px);
}
.has-sub.is-sm.open > .sub{ transform:translate(0,0) }
.sub-sm .col{ padding:14px 10px }
@media (pointer:fine){
  .has-sub.is-sm:hover > .sub,
  .has-sub.is-sm:focus-within > .sub{ transform:translate(0,0) }
}
@media (pointer:fine){
  .has-sub:hover > .sub,
  .has-sub:focus-within > .sub{
    opacity:1; visibility:visible; transform:translate(-50%,0);
  }
}

.col{ min-width:0; padding:22px 26px }
/* The division the three groups need — a rule between them, not just a gap. */
.col + .col{ border-left:1px solid var(--line-dark) }

.colhead{
  margin:0 0 18px; padding:0 10px 12px;
  font:500 16px/1 var(--mono);
  letter-spacing:.15em; text-transform:uppercase; color:var(--green);
  border-bottom:1px solid var(--line-dark);
}
.sub ul{ list-style:none; margin:0; padding:0 }
.sub a{
  display:block; padding:7px 10px;
  font:400 16px/1.4 var(--body); color:rgba(246,246,242,.80);
  transition:color .18s ease, background .18s ease;
}
.sub a:hover{ color:var(--white); background:rgba(246,246,242,.08) }
.sub a:focus-visible{ outline:2px solid var(--green); outline-offset:-2px }

/* The panel is chrome the phone header has no room for; the drawer lists
   projects on its own page instead. */
@media (max-width:900px){
  .has-sub{ display:none }
}


/* ---- Open roles ---------------------------------------------------------
   The four positions rwd.in lists as recruiting now. Function leads, because
   that is what a candidate scans for; the level sits above it as a label.
------------------------------------------------------------------------- */
.roles{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(2,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line);
}
@media (max-width:760px){ .roles{ grid-template-columns:1fr } }

.role{ background:var(--white); padding:28px 30px 26px; display:grid; align-content:start }
.role-fn{
  margin:0 0 8px; font:400 16px/1 var(--mono);
  letter-spacing:.16em; text-transform:uppercase; color:var(--green);
}
.role h3{ margin:0; font:600 20px/1.25 var(--body); letter-spacing:-.01em }
.role-req{ margin:12px 0 0; font-size:16px; color:var(--grey); line-height:1.6 }
.role-apply{
  margin-top:20px; justify-self:start;
  font:500 16px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink); border-bottom:2px solid var(--green); padding-bottom:5px;
  transition:color .2s ease, border-color .2s ease;
}
.role-apply:hover{ color:var(--green); border-color:var(--blue) }

/* ---- Footer social ------------------------------------------------------ */
.foot-social{ display:flex; flex-wrap:wrap; gap:18px; margin-top:18px }
.foot-social a{
  font:400 16px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase;
  color:var(--grey); border-bottom:1px solid transparent; padding-bottom:4px;
  transition:color .2s ease, border-color .2s ease;
}
.foot-social a:hover{ color:var(--white); border-bottom-color:var(--green) }

/* ---- Sticky action bar --------------------------------------------------
   Phones only. Fixed to the bottom edge, so the three things a visitor most
   often wants are always one thumb away — which is the whole point of it,
   and why the scrub bar and the landscape hint move up to make room rather
   than the bar moving out of the way.
------------------------------------------------------------------------- */
.actionbar{ display:none }

@media (max-width:900px){
  :root{ --bar-h:58px }

  .actionbar{
    position:fixed; left:0; right:0; bottom:0; z-index:95;
    height:var(--bar-h);
    display:grid; grid-template-columns:1fr 1fr 1.15fr;
    background:var(--ink);
    border-top:1px solid var(--line-dark);
    padding-bottom:env(safe-area-inset-bottom);
  }
  .actionbar a{
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:4px;
    font:500 16px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase;
    color:#C9C9C4;
    border-left:1px solid var(--line-dark);
    -webkit-tap-highlight-color:transparent;
  }
  .actionbar a:first-child{ border-left:0 }
  .actionbar a:active{ background:rgba(246,246,242,.06) }
  .actionbar svg{ width:19px; height:19px; fill:currentColor }
  .actionbar .ab-cta{
    background:var(--green); color:var(--ink); font-weight:700;
    border-left:0;
  }
  .actionbar a:focus-visible{ outline:2px solid var(--green); outline-offset:-3px }

  /* Room for it: the footer must not end underneath the bar, and the hero's
     own furniture has to sit above it rather than behind it. */
  body{ padding-bottom:var(--bar-h) }
  .rotate{ bottom:calc(var(--bar-h) + 18px) }
}


/* ==== LIGHT GROUND =======================================================
   The site shipped with ink as its default and paper as the exception. That
   reads as one long black slab: a project page opened with ~800px of it
   before the render arrived. Inverted here — paper is the ground, ink is
   punctuation, kept for the film, the Chairman band, the closing CTA, the
   stat band and the footer.

   The wordmark is only type, so it takes ink on paper; the dots and the
   green button are unchanged. rwd.in's own header is white, so this is the
   brand's native state rather than a departure from it.
========================================================================= */

/* --green on paper is about 2.3:1 — fine as a fill, fails as text. This is
   the same hue taken down to where it passes. */
:root{ --green-deep:#4E7A17 }

/* ---- Page heroes -------------------------------------------------------- */
.page-hero{ background:var(--paper); color:var(--ink) }
.page-hero .sub{ color:var(--grey) }

.pd-hero{ background:var(--paper); color:var(--ink) }
.pd-hero .pd-loc{ color:var(--green-deep) }
.pd-specs{ border-top-color:var(--line) }
.pd-specs>div{ border-right-color:var(--line); border-bottom-color:var(--line) }
.pd-specs .k{ color:var(--grey) }
.pd-back{ color:var(--grey) }
.pd-back:hover{ color:var(--green-deep) }
.pd-hero .eyebrow{ color:var(--grey) }

/* ---- Header, once it is off the film -----------------------------------
   Over the scrub the bar stays frosted dark — a white slab on a night render
   is a hard edge, and it would undo the opening. Everywhere else it is paper.
------------------------------------------------------------------------- */
header.solid{ border-bottom-color:var(--line) }
header.solid::after{ background:var(--paper) }

header.solid .brand .wordmark{ color:var(--ink) }

header.solid nav.main a,
header.solid .subtoggle{ color:#4C534E }
header.solid nav.main a:hover,
header.solid nav.main a.active,
header.solid .subtoggle:hover,
header.solid .subtoggle.active,
header.solid .has-sub.open .subtoggle{ color:var(--ink) }

header.solid .burger span{ background:var(--ink) }

/* The panel belongs to the bar it hangs from. */
header.solid .sub{
  background:rgba(255,255,255,.94);
  border-color:var(--line);
  box-shadow:0 24px 60px rgba(11,11,12,.14);
}
header.solid .col + .col{ border-left-color:var(--line) }
header.solid .colhead{ color:var(--green-deep); border-bottom-color:var(--line) }
header.solid .sub a{ color:#4C534E }
header.solid .sub a:hover{ color:var(--ink); background:rgba(11,11,12,.05) }

header.solid .mobile-menu{
  background:var(--paper); border-top-color:var(--line);
}
header.solid .mobile-menu a{ color:#4C534E; border-bottom-color:var(--line) }
header.solid .mobile-menu a.active{ color:var(--green-deep) }


/* ==== PROJECT SHEET ======================================================
   The page reads as an architect's sheet: the building fills the top, the
   numbers run as a reversed strip beneath it, and a title block sits down
   the left holding identity and actions while the sheet scrolls past it.

   What it replaces was a stack of equal full-width bands on a centred
   measure — nothing led, nothing was subordinate, and every section was the
   same shape as the one above it.
========================================================================= */

.pj{ --gut:clamp(22px,4vw,64px) }

/* ---- Hero: the building, at full bleed --------------------------------- */
/* z-index:0 pins the hero to the bottom of the positioned layer. Without it
   the header's z-index:100 is competing with an auto-stacked element and the
   bar can end up painted behind the plate. */
.pj-hero{
  position:relative; z-index:0;
  min-height:min(78vh,720px);
  display:flex; align-items:flex-end;
  background:var(--ink); color:var(--white);
  overflow:hidden;
}
/* Layered upward from 1 rather than down from -1. Negative z-index children
   paint behind their ancestor's background, which is why this needed an
   isolation guard before; counting up needs no guard at all. */
.pj-plate{
  position:absolute; inset:0; z-index:1;
  width:100%; height:100%; object-fit:cover;
}
/* Weighted to the bottom, where the type is. The top of a render is usually
   sky and needs no help. */
.pj-scrim{
  position:absolute; inset:0; z-index:2;
  background:linear-gradient(180deg,
    rgba(11,11,12,.62) 0%, rgba(11,11,12,.12) 34%, rgba(11,11,12,.86) 100%);
}
.pj-hero-in{
  position:relative; z-index:3;
  width:100%; max-width:1360px; margin:0 auto;
  padding:120px var(--gut) clamp(38px,6vh,64px);
}

.pj-back{
  display:inline-block; margin-bottom:clamp(40px,10vh,110px);
  font:400 16px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase;
  color:rgba(246,246,242,.72);
}
.pj-back:hover{ color:var(--white) }

.pj-status{
  display:flex; align-items:center; gap:10px; margin:0 0 18px;
  font:400 16px/1 var(--mono); letter-spacing:.16em; text-transform:uppercase;
  color:rgba(246,246,242,.9);
}
.pj-status i{ width:7px; height:7px; border-radius:50%; background:var(--green); flex:none }

/* RWD is the developer, the project is the subject. At the same size they
   read as a two-word label; set apart, they read as a name. */
.pj-hero h1{
  margin:0; font-family:var(--disp); text-transform:uppercase;
  font-size:clamp(40px,8.4vw,116px); line-height:.86; letter-spacing:-.025em;
  text-wrap:balance;
}
.pj-hero h1 em{
  display:block; font-style:normal;
  font-size:clamp(16px,1.5vw,20px); line-height:1;
  letter-spacing:.34em; margin-bottom:clamp(10px,1.6vh,18px);
  color:var(--green);
}
.pj-tag{
  margin:22px 0 0; max-width:46ch;
  font:400 clamp(16px,1.9vw,21px)/1.45 var(--body); color:rgba(246,246,242,.86);
}

/* ---- Facts: reversed strip, the page's one dark bar -------------------- */
.pj-facts{
  background:var(--ink); color:var(--white);
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  border-bottom:1px solid var(--line-dark);
}
.pj-fact{
  padding:26px var(--gut) 30px;
  border-right:1px solid var(--line-dark);
}
.pj-fact:last-child{ border-right:0 }
.pj-fact b{
  display:block; font:400 clamp(22px,2.6vw,32px)/1 var(--disp);
  font-variant-numeric:tabular-nums;
}
.pj-fact span{
  display:block; margin-top:9px;
  font:400 16px/1.3 var(--mono); letter-spacing:.15em; text-transform:uppercase;
  color:var(--grey);
}

/* ---- Body: title block, then the sheet -------------------------------- */
.pj-body{
  max-width:1360px; margin:0 auto;
  padding:clamp(56px,8vh,96px) var(--gut) clamp(72px,10vh,120px);
  display:grid; gap:clamp(40px,5vw,80px);
  grid-template-columns:minmax(210px,264px) minmax(0,1fr);
  align-items:start;
}
@media (max-width:900px){
  .pj-body{ grid-template-columns:1fr; gap:44px }
}

.pj-rail{ position:sticky; top:96px }
@media (max-width:900px){ .pj-rail{ position:static } }

.pj-rail dl{ margin:0 0 30px; border-top:2px solid var(--ink) }
.pj-rail dt{
  margin-top:18px;
  font:500 16px/1 var(--mono); letter-spacing:.15em; text-transform:uppercase;
  color:var(--grey);
}
.pj-rail dd{ margin:6px 0 0; font:500 16px/1.45 var(--body); color:var(--ink) }

/* Just the phone line now. The Book a Site Visit button lives at the foot of
   the sheet, in the Enquire section, where it follows everything the reader
   needed to see before booking. */
.pj-act{ display:grid; gap:12px; justify-items:start }
.pj-call{
  font:400 16px/1.5 var(--mono); letter-spacing:.05em; color:var(--grey);
  border-bottom:1px solid var(--line); padding-bottom:10px;
}
.pj-call:hover{ color:var(--ink); border-bottom-color:var(--green) }

.pj-rera{
  margin:26px 0 0; padding:14px 16px;
  background:var(--white); border:1px solid var(--line);
  border-left:3px solid var(--green);
  font:400 16px/1.6 var(--mono); color:var(--grey); word-break:break-word;
}

/* ---- Sections: one device, repeated ----------------------------------- */
.pj-sec{ margin-bottom:clamp(56px,8vh,92px) }
.pj-sec:last-child{ margin-bottom:0 }

.pj-rule{ display:flex; align-items:center; gap:18px; margin-bottom:26px }
.pj-rule span{
  flex:none;
  font:500 16px/1 var(--mono); letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink);
}
.pj-rule i{ flex:1 1 auto; height:1px; background:var(--line) }

.pj-lede{
  margin:0; max-width:64ch;
  font:400 clamp(17px,1.9vw,21px)/1.62 var(--body); color:#333834;
}
.pj-note{ margin:0 0 22px; max-width:56ch; font-size:16px; color:var(--grey) }

/* ---- Amenities: a schedule, not a box of chips ------------------------ */
.pj-amen{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:0 clamp(20px,3vw,44px);
}
.pj-amen li{
  padding:13px 0 13px 20px; position:relative;
  border-bottom:1px solid var(--line);
  font-size:16px; color:#333834;
}
.pj-amen li::before{
  content:""; position:absolute; left:0; top:19px;
  width:6px; height:6px; border-radius:50%; background:var(--green);
}
.pj-amen li:nth-child(even)::before{ background:var(--blue) }

/* ---- Walkthrough ------------------------------------------------------- */
.pj-film{ position:relative; aspect-ratio:16/9; background:var(--ink) }
.pj-film iframe{ position:absolute; inset:0; width:100%; height:100%; border:0 }

/* ---- Floor plans: a rail, because plans are wide ----------------------- */
.pj-plans{
  display:flex; gap:16px; overflow-x:auto; padding-bottom:14px;
  scroll-snap-type:x mandatory; overscroll-behavior-x:contain;
}
.pj-plan{
  flex:0 0 clamp(230px,32vw,320px); scroll-snap-align:start;
  background:var(--white); border:1px solid var(--line);
  transition:border-color .2s ease;
}
.pj-plan:hover{ border-color:var(--green) }
.pj-plan:focus-visible{ outline:2px solid var(--green); outline-offset:2px }
.pj-plan img{
  width:100%; aspect-ratio:4/3; object-fit:contain;
  background:var(--white); padding:14px;
}
.pj-plan span{
  display:block; padding:11px 14px; border-top:1px solid var(--line);
  font:400 16px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase;
  color:var(--grey);
}

/* ---- Gallery: the first shot earns more room -------------------------- */
.pj-shots{
  display:grid; gap:14px;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
}
.pj-shot{ margin:0; overflow:hidden; background:var(--ink) }
.pj-shot img{
  width:100%; height:100%; aspect-ratio:4/3; object-fit:cover;
  transition:transform .6s cubic-bezier(.22,.61,.36,1);
}
.pj-shot:hover img{ transform:scale(1.04) }
@media (min-width:700px){
  .pj-shots{ grid-template-columns:repeat(4,1fr) }
  .pj-shot.lead{ grid-column:span 2; grid-row:span 2 }
  .pj-shot.lead img{ aspect-ratio:auto }
}

/* ---- Close ------------------------------------------------------------- */
.pj-close h2{
  margin:0; max-width:18ch;
  font:400 clamp(28px,4vw,52px)/1.04 var(--disp);
  text-transform:uppercase; letter-spacing:-.015em;
}
.pj-close p{ margin:18px 0 0; max-width:48ch; color:var(--grey); font-size:16px }
.pj-close-act{ margin-top:30px; display:flex; gap:12px; flex-wrap:wrap }

@media (prefers-reduced-motion:reduce){
  .pj-shot img{ transition:none }
}


/* ---- Location -----------------------------------------------------------
   Their own embed, so the pin is the one RWD placed rather than one geocoded
   from an address string and quietly landing on the wrong side of a road.
------------------------------------------------------------------------- */
.pj-map{
  position:relative; aspect-ratio:16/10;
  border:1px solid var(--line); background:var(--paper);
}
.pj-map iframe{ position:absolute; inset:0; width:100%; height:100%; border:0 }
@media (max-width:600px){ .pj-map{ aspect-ratio:4/5 } }

.pj-dir{
  display:inline-block; margin-top:18px;
  font:500 16px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink); border-bottom:2px solid var(--green); padding-bottom:6px;
  transition:color .2s ease, border-color .2s ease;
}
.pj-dir:hover{ color:var(--green-deep); border-bottom-color:var(--blue) }
.pj-dir:focus-visible{ outline:2px solid var(--green); outline-offset:3px }


/* ==== CONTACT ============================================================
   Five routes, because they need different fields and reach different desks.
   Switched with radio inputs and sibling selectors — a tab strip is the one
   pattern that genuinely does not need JavaScript, and this page should work
   with none.
========================================================================= */

.ct-hero{ background:var(--paper); color:var(--ink); padding:clamp(70px,10vh,110px) 0 clamp(44px,6vh,66px) }
.ct-in{ width:min(1360px, calc(100% - 44px)); margin:0 auto }
.ct-hero h1{
  margin:16px 0 0; max-width:18ch;
  font:400 clamp(34px,5.6vw,72px)/1.02 var(--disp);
  text-transform:uppercase; letter-spacing:-.02em; text-wrap:balance;
}
.ct-lede{ margin:22px 0 0; max-width:56ch; font:400 clamp(16px,1.8vw,19px)/1.6 var(--body); color:var(--grey) }

/* ---- Direct lines ------------------------------------------------------- */
.ct-lines{
  background:var(--ink); color:var(--white);
  display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  border-bottom:1px solid var(--line-dark);
}
.ct-lines a{
  padding:26px clamp(22px,3vw,40px) 30px;
  border-right:1px solid var(--line-dark);
  transition:background .2s ease;
}
.ct-lines a:last-child{ border-right:0 }
.ct-lines a:hover{ background:#141416 }
.ct-lines a:focus-visible{ outline:2px solid var(--green); outline-offset:-3px }
.ct-lines span{
  display:block; margin-bottom:10px;
  font:500 16px/1 var(--mono); letter-spacing:.16em; text-transform:uppercase;
  color:var(--grey);
}
.ct-lines b{ font:400 clamp(17px,1.9vw,22px)/1.2 var(--disp); word-break:break-word }
.ct-lines a:hover b{ color:var(--green) }

/* ---- Route tabs --------------------------------------------------------- */
.ct-body{ width:min(1360px, calc(100% - 44px)); margin:0 auto; padding:clamp(50px,7vh,84px) 0 }

.rt-in{ position:absolute; width:1px; height:1px; opacity:0; pointer-events:none }

.rt-tabs{
  display:flex; flex-wrap:wrap; gap:0;
  border-bottom:1px solid var(--line); margin-bottom:clamp(30px,4vh,46px);
}
.rt-tabs label{
  padding:14px 20px; cursor:pointer; position:relative; white-space:nowrap;
  font:500 16px/1 var(--mono); letter-spacing:.11em; text-transform:uppercase;
  color:var(--grey); transition:color .2s ease;
}
.rt-tabs label:hover{ color:var(--ink) }
.rt-tabs label::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px;
  background:var(--green); transform:scaleX(0); transform-origin:left;
  transition:transform .25s cubic-bezier(.4,0,.2,1);
}
@media (max-width:620px){
  .rt-tabs{ display:grid; grid-template-columns:1fr 1fr }
  .rt-tabs label{ text-align:center; padding:13px 10px; font-size:16px; letter-spacing:.08em }
}

/* One rule per tab, because :checked has to reach a sibling by id. */
#r1:checked ~ .rt-tabs label[for=r1],
#r2:checked ~ .rt-tabs label[for=r2],
#r3:checked ~ .rt-tabs label[for=r3],
#r4:checked ~ .rt-tabs label[for=r4],
#r5:checked ~ .rt-tabs label[for=r5],
#r6:checked ~ .rt-tabs label[for=r6]{ color:var(--ink) }

#r1:checked ~ .rt-tabs label[for=r1]::after,
#r2:checked ~ .rt-tabs label[for=r2]::after,
#r3:checked ~ .rt-tabs label[for=r3]::after,
#r4:checked ~ .rt-tabs label[for=r4]::after,
#r5:checked ~ .rt-tabs label[for=r5]::after,
#r6:checked ~ .rt-tabs label[for=r6]::after{ transform:scaleX(1) }

/* The inputs are off-screen but still focusable, so the keyboard ring has to
   be put back on the label they control. */
#r1:focus-visible ~ .rt-tabs label[for=r1],
#r2:focus-visible ~ .rt-tabs label[for=r2],
#r3:focus-visible ~ .rt-tabs label[for=r3],
#r4:focus-visible ~ .rt-tabs label[for=r4],
#r5:focus-visible ~ .rt-tabs label[for=r5],
#r6:focus-visible ~ .rt-tabs label[for=r6]{ outline:2px solid var(--green); outline-offset:-2px }

.rt-p{ display:none }
#r1:checked ~ .rt-panels .p1,
#r2:checked ~ .rt-panels .p2,
#r3:checked ~ .rt-panels .p3,
#r4:checked ~ .rt-panels .p4,
#r5:checked ~ .rt-panels .p5,
#r6:checked ~ .rt-panels .p6{ display:grid }

/* ---- Form --------------------------------------------------------------- */
.f{
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:22px clamp(20px,3vw,36px); align-items:start;
  max-width:960px;
}
.f-note{ grid-column:1/-1; margin:0; max-width:60ch; color:var(--grey); font-size:16px }
.f label{ display:grid; gap:9px }
.f label.wide{ grid-column:1/-1 }
.f label span{
  font:500 16px/1 var(--mono); letter-spacing:.15em; text-transform:uppercase;
  color:var(--grey);
}
.f input, .f select, .f textarea{
  width:100%; padding:13px 14px; font:400 16px/1.4 var(--body);
  color:var(--ink); background:var(--white);
  border:1px solid var(--line); border-radius:0;
  transition:border-color .2s ease;
}
.f textarea{ resize:vertical }
.f input:focus, .f select:focus, .f textarea:focus{
  outline:none; border-color:var(--ink);
}
.f input:focus-visible, .f select:focus-visible, .f textarea:focus-visible{
  outline:2px solid var(--green); outline-offset:1px;
}
.f-act{ grid-column:1/-1; display:flex; gap:12px; flex-wrap:wrap; margin-top:4px }

.rt-plain{ gap:20px; max-width:60ch }
.rt-say{ margin:0; font:400 clamp(17px,1.9vw,20px)/1.6 var(--body); color:#333834 }

/* ---- Office card + map -------------------------------------------------- */
.ct-office{ background:var(--paper); padding:0 0 clamp(64px,9vh,110px) }
.ct-office-in{
  width:min(1360px, calc(100% - 44px)); margin:0 auto;
  display:grid; gap:clamp(24px,3vw,40px);
  grid-template-columns:minmax(300px,400px) minmax(0,1fr);
  align-items:stretch;
}
@media (max-width:860px){ .ct-office-in{ grid-template-columns:1fr } }

.ct-card{
  background:var(--white); border:1px solid var(--line);
  border-top:3px solid var(--green);
  padding:clamp(28px,3vw,38px);
  align-self:start;
}
.ct-card h2{
  margin:0 0 24px; font:400 22px/1.1 var(--disp);
  text-transform:uppercase; letter-spacing:-.01em;
}
.ct-row{
  display:flex; gap:14px; margin:0 0 20px;
  font:400 16px/1.65 var(--body); color:#333834;
}
.ct-row svg{
  width:17px; height:17px; flex:none; margin-top:4px;
  fill:var(--green);
}
.ct-row b{ font-weight:600; color:var(--ink) }
.ct-row a{ color:#333834; border-bottom:1px solid var(--line) }
.ct-row a:hover{ color:var(--ink); border-bottom-color:var(--green) }

.ct-map{
  position:relative; min-height:clamp(320px,46vh,520px);
  border:1px solid var(--line); background:var(--white);
}
.ct-map iframe{ position:absolute; inset:0; width:100%; height:100%; border:0 }

.ct-social{
  list-style:none; margin:26px 0 0; padding:22px 0 0;
  border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:16px;
}
.ct-social a{
  font:500 16px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase;
  color:var(--grey); border-bottom:1px solid transparent; padding-bottom:5px;
}
.ct-social a:hover{ color:var(--ink); border-bottom-color:var(--green) }

@media (prefers-reduced-motion:reduce){
  .rt-tabs label::after{ transition:none }
}


/* ==== LABEL SCALE ========================================================
   Every small mono label on the site, brought onto one scale. They had drifted
   between 10px and 12px at weight 400 across the artifact's own CSS and the
   sections added since, which is small enough that they read as captions
   rather than as the structure they actually are.

   The scale: 13px for a section label, 12px for a field or a caption inside a
   component, weight 500 throughout. Tracking comes down slightly as the size
   goes up — letter-spacing is a ratio of the type size, so a value tuned at
   10px opens into gaps at 13px.
========================================================================= */

/* Section labels — the eyebrow device, used on every page. */
.eyebrow{
  font-size:16px; font-weight:500; letter-spacing:.15em;
}
.eyebrow .dots i{ width:8px; height:8px }

/* Component captions: stat labels, key facts, card meta, plan numbers. */
.stat .lbl,
.pj-fact span,
.ct-lines span,
.role-fn,
.pj-plan span,
.proj-media.type-card .tc-loc,
.testi .who .pj,
.chair-meta .rl{
  font-size:16px; font-weight:500; letter-spacing:.14em;
}

/* Slightly tighter for the pill on a project card — it sits on the image and
   grows into the artwork if it takes the full step. */
.proj-status{ font-size:16px; font-weight:500; letter-spacing:.13em }

/* Footer column heads are section labels, not captions. */
.foot-col h5{ font-size:16px; font-weight:500; letter-spacing:.15em }

/* Form field labels stay a step down: they repeat every few centimetres, and
   at 13px a column of them competes with the values being typed in. */
.f label span{ font-size:16px; font-weight:500; letter-spacing:.14em }

/* Standing links set in mono. */
.ct-social a,
.foot-social a{ font-size:16px; font-weight:500; letter-spacing:.12em }

/* The title-block terms on a project sheet, matched to the caption step. */
.pj-rail dt{ font-size:16px; letter-spacing:.14em }

/* The project detail location line is a heading in mono, so it takes the
   section step rather than the caption step. */
.pj-status{ font-size:16px; letter-spacing:.15em }


/* ---- Section nav in the title block -------------------------------------
   Generated from the same list that builds the sheet, so a project with no
   plans and no film simply has a shorter nav. Buttons rather than anchors:
   an href="#gallery" is a hash change, and the router treats every hash
   change as a page request.
------------------------------------------------------------------------- */
.pj-nav{ margin:0 0 30px }
.pj-nav ul{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line) }
.pj-nav li{ border-bottom:1px solid var(--line) }

.pj-nav button{
  display:block; width:100%; text-align:left;
  padding:12px 0 12px 16px; position:relative;
  background:none; border:0; cursor:pointer;
  font:400 16px/1.35 var(--body); color:var(--grey);
  transition:color .2s ease, padding-left .2s ease;
}
.pj-nav button::before{
  content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:3px; height:0; background:var(--green);
  transition:height .25s cubic-bezier(.4,0,.2,1);
}
.pj-nav button:hover{ color:var(--ink) }

/* Set by the scroll spy, not by :focus — the highlight tracks where the reader
   is, not what they last clicked. */
.pj-nav button.on{
  color:var(--ink); font-weight:600; padding-left:20px;
}
.pj-nav button.on::before{ height:20px }
.pj-nav button:focus-visible{ outline:2px solid var(--green); outline-offset:-2px }

/* The rail scrolls with the page below the breakpoint, so the nav would just
   be a list you have already passed. */
@media (max-width:900px){
  .pj-nav{ display:none }
}


/* ==== BOOK A SITE VISIT ==================================================
   The highest-intent page on the site. Six fields — exactly the brief's Book a
   Site Visit route — beside a panel showing the project being booked, drawn
   from the project data rather than described in prose.
========================================================================= */
.eq-in{ width:min(1360px, calc(100% - 44px)); margin:0 auto }

.eq-hero{
  background:var(--ink); color:var(--white);
  padding:clamp(96px,14vh,150px) 0 clamp(40px,6vh,64px);
}
.eq-kicker{
  display:flex; align-items:center; gap:10px; margin:0 0 20px;
  font:500 16px/1 var(--mono); letter-spacing:.16em; text-transform:uppercase;
  color:rgba(246,246,242,.8);
}
.eq-kicker i{ width:7px; height:7px; border-radius:50%; background:var(--green); flex:none }
.eq-hero h1{
  margin:0; font:400 clamp(34px,6vw,80px)/1 var(--disp);
  text-transform:uppercase; letter-spacing:-.025em;
}
.eq-sub{ margin:22px 0 0; max-width:48ch; font:400 clamp(16px,1.8vw,19px)/1.6 var(--body); color:#C9C9C4 }

/* ---- Split -------------------------------------------------------------- */
.eq-body{
  display:grid; gap:clamp(28px,4vw,64px);
  grid-template-columns:minmax(0,1.25fr) minmax(300px,420px);
  align-items:start;
  padding:clamp(48px,7vh,84px) 0 clamp(72px,10vh,120px);
}
@media (max-width:900px){ .eq-body{ grid-template-columns:1fr } }

.eq-grid{
  display:grid; gap:20px clamp(18px,2.5vw,30px);
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  margin-top:26px;
}
.eq-grid label{ display:grid; gap:9px }
.eq-grid label.wide{ grid-column:1/-1 }
.eq-grid span{
  font:500 16px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase;
  color:var(--grey);
}
.eq-grid input, .eq-grid select{
  width:100%; padding:14px; font:400 16px/1.4 var(--body);
  color:var(--ink); background:var(--white);
  border:1px solid var(--line); border-radius:0;
  transition:border-color .2s ease;
}
.eq-grid input:focus, .eq-grid select:focus{ outline:none; border-color:var(--ink) }
.eq-grid input:focus-visible, .eq-grid select:focus-visible{ outline:2px solid var(--green); outline-offset:1px }

.eq-act{ margin-top:34px; display:flex; align-items:center; gap:22px; flex-wrap:wrap }
.eq-alt{
  font:400 16px/1 var(--mono); letter-spacing:.06em; color:var(--grey);
  border-bottom:1px solid var(--line); padding-bottom:6px;
}
.eq-alt:hover{ color:var(--ink); border-bottom-color:var(--green) }

/* ---- The project being booked ------------------------------------------- */
.eq-side{ position:sticky; top:96px }
@media (max-width:900px){ .eq-side{ position:static } }

.eq-card{ background:var(--white); border:1px solid var(--line) }
.eq-shot{ width:100%; aspect-ratio:16/10; object-fit:cover; display:block; background:var(--ink) }
.eq-card-in{ padding:clamp(22px,2.4vw,30px) }
.eq-card-plain .pj-rule{ margin:clamp(22px,2.4vw,30px) clamp(22px,2.4vw,30px) 20px }
.eq-say{
  margin:0 clamp(22px,2.4vw,30px) 26px; font:400 16px/1.65 var(--body); color:#333834;
}
.eq-loc{
  margin:0 0 8px;
  font:500 16px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase;
  color:var(--grey);
}
.eq-card h2{
  margin:0; font:400 clamp(20px,2.2vw,26px)/1.1 var(--disp);
  text-transform:uppercase; letter-spacing:-.01em; color:var(--ink);
}
.eq-tag{ margin:12px 0 0; font-size:16px; line-height:1.6; color:var(--grey) }

.eq-facts{
  display:grid; grid-template-columns:1fr 1fr; gap:0;
  margin-top:22px; border-top:1px solid var(--line);
}
.eq-facts > div{ padding:16px 14px 14px 0 }
.eq-facts b{
  display:block; font:400 20px/1 var(--disp); color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.eq-facts span{
  display:block; margin-top:6px;
  font:500 16px/1.3 var(--mono); letter-spacing:.13em; text-transform:uppercase;
  color:var(--grey);
}
.eq-rera{ margin:18px 0 0; font:400 16px/1.6 var(--mono); color:var(--grey); word-break:break-word }
.eq-more{
  display:inline-block; margin-top:22px;
  font:500 16px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink); border-bottom:2px solid var(--green); padding-bottom:6px;
}
.eq-more:hover{ color:var(--green-deep) }

/* Two real numbers, because the fastest route for some people is not a form. */
.eq-lines{ display:grid; grid-template-columns:1fr 1fr; border-top:1px solid var(--line) }
.eq-lines a{ padding:18px 16px; border-right:1px solid var(--line) }
.eq-lines a:last-child{ border-right:0 }
.eq-lines a:hover{ background:var(--paper) }
.eq-lines span{
  display:block; margin-bottom:7px;
  font:500 16px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase;
  color:var(--grey);
}
.eq-lines b{ font:400 16px/1.25 var(--disp); color:var(--ink); word-break:break-word }


/* ==== THE LOCKUP =========================================================
   The real mark. Two circles sit over the W like an umlaut, and BUILDS
   LASTING RELATIONSHIPS is ranged beneath the full width of the wordmark.

       ● ●
      R W D
   BUILDS LASTING RELATIONSHIPS

   Proportions measured off the supplied artwork rather than guessed. Against
   a cap height of 174px there: circles 72px across (.414), 54px apart (.310),
   sitting 16px clear of the cap line (.092). Archivo Black's cap height is
   about .72 of its font size, so each ratio is multiplied through by that to
   express it against --lock.
========================================================================= */
.lock{
  --lock: 26px;                       /* wordmark font-size; all else derives */
  --cap:  calc(var(--lock) * .72);    /* Archivo Black cap height */
  --dot:  calc(var(--cap) * .414);
  --gap:  calc(var(--cap) * .310);
  display:inline-grid; justify-items:start; gap:0; line-height:1;
}
.lock-lg{ --lock: 34px }

/* width:max-content is the whole fix. This is a grid item, so it was
   stretching to the column — and the column is sized by the tagline, which is
   the wider of the two. The circles were then centred on that box rather than
   on the word, which put them over the D. Hugging the text makes 50% mean
   50% of RWD. */
.lock-mark{
  position:relative; display:block; width:max-content;
  font:400 var(--lock)/1 var(--disp);
  letter-spacing:.02em; text-transform:uppercase;
  color:currentColor;
  padding-top:calc(var(--dot) + var(--cap) * .092);
}

/* Two real circles, not a gradient: border-radius:50% on a square box cannot
   render as anything else, and each is positioned independently so the pair
   stays put at every size.

   Centred on the wordmark, which centres them on the W — W is the middle of
   three glyphs, and in the artwork the pair's centre and the wordmark's
   centre are two pixels apart. The -.01em corrects for letter-spacing, which
   adds a trailing gap after the D and drags the optical centre right. */
.lock-dots{
  position:absolute; top:0; left:50%;
  /* In the artwork the pair sits 1.3% of the wordmark's width left of its
     centre — letter-spacing adds a trailing gap after the D that drags the
     optical centre right, and this takes it back. */
  transform:translateX(calc(-50% - var(--lock) * .026));
  display:block;
  width:calc(var(--dot) * 2 + var(--gap));
  height:var(--dot);
}
.lock-dots::before,
.lock-dots::after{
  content:""; position:absolute; top:0;
  width:var(--dot); height:var(--dot);
  border-radius:50%;
}
.lock-dots::before{ left:0;  background:var(--green) }
.lock-dots::after { right:0; background:var(--blue)  }

/* The supplied artwork itself, in place of the drawn wordmark. White on
   transparent, so it only ever goes on the dark bar, the footer and the
   splash. Height is tied to --lock so every existing size still applies:
   the drawn mark (dots + caps) stood about 1.36 × --lock tall, and the full
   logo is that plus its tagline (301/242 of the mark's height). */
.lock-img{ display:block; height:calc(var(--lock) * 1.36); width:auto }
.foot-brand .lock-img,
.boot-mark .lock-img{ height:calc(var(--lock) * 1.36 * 301 / 242) }
/* The bar carries the boxed logo — white on its own black plate — so it
   reads the same over the film, the ink bar and the paper bar. */
header .brand .lock-box{ height:46px; border-radius:4px }
@media (max-width:900px){ header .brand .lock-box{ height:38px } }

/* Ranged to the wordmark's width, which is what the artwork does. */
.lock-tag{
  display:block;
  margin-top:calc(var(--lock) * .20);
  font:400 calc(var(--lock) * .215)/1 var(--body);
  letter-spacing:calc(var(--lock) * .0355);
  text-transform:uppercase;
  color:currentColor; opacity:.78;
  white-space:nowrap;
}

/* In the bar the tagline sits beside the wordmark rather than under it —
   the header is 68px tall and a stacked lockup eats most of it. The circles
   stay over the W; only the tagline moves.

   Switching the lockup's own grid to two columns keeps one set of markup
   working in both arrangements. */
header .brand{ display:inline-flex; align-items:center; color:var(--white) }
header.solid .brand{ color:var(--ink) }

/* White over the film where the render is behind it, the site's own --grey
   once the ink or paper bar is doing the contrast. */
header .brand .lock-tag{ color:var(--white); transition:color .45s ease }
header.solid .brand .lock-tag,
header.plate .brand .lock-tag,
header.menu-open .brand .lock-tag{ color:var(--grey) }

/* Both figures are the site's own, not derived: the wordmark was 26px and
   the tagline 9px mono at .14em before the lockup went in, and the lockup
   should not have quietly resized either. */
header .brand .lock{
  --lock:26px;
  grid-template-columns:auto auto;
  align-items:center;
  column-gap:14px;
}
header .brand .lock-tag{
  margin-top:0;
  /* Down onto the wordmark's baseline rather than floating at the centre of
     a box the circles have made taller. The nudge is optical: a mono cap
     sits a little above its own box bottom. */
  align-self:end;
  padding-bottom:calc(var(--lock) * .085);
  font:400 16px/1 var(--mono);
  letter-spacing:.14em;
  opacity:1;
}

/* The tagline goes first when the bar runs out of room; the wordmark and its
   circles hold to the smallest width. */
@media (max-width:1100px){ header .brand .lock-tag{ display:none } }
@media (max-width:900px){ header .brand .lock{ --lock:22px } }

.foot-brand .lock{ color:var(--white) }
/* On the splash the lockup is stacked and the tagline is the wider of the
   two, so the wordmark has to be centred over it — .lock is justify-items:
   start everywhere else, which left RWD ranged to the tagline's left edge.
   The circles are positioned against .lock-mark, which hugs the word, so
   they travel with it and stay over the W. */
.boot-mark .lock{
  --lock:clamp(38px,7vw,60px);
  color:var(--white);
  justify-items:center;
}
.boot-mark .lock-tag{ opacity:.6 }