:root{
  color-scheme:light;
  box-sizing:border-box;
  --travertine:#E7DFCB;
  --paper:#FBF8F2;
  --ink:#211C15;
  --brass:#A9803D;
  --bottle:#2B3B2E;
  --bottle-line:#3C4C3E;
  --line:#D9CFAE;
  --body:#55503F;
  --muted:#665D42;
  --brass-deep:#9A7230;
  --brass-text:#7E5C1F;
  --display:'Cormorant Garamond',Cambria,Georgia,serif;
  --sans:'Inter',-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
section[id]{scroll-margin-top:calc(92px - clamp(56px,7vw,100px))}
*{box-sizing:inherit}
body{margin:0;padding:0;font:15px/1.6 var(--sans);background:var(--travertine);color:var(--ink);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
[hidden]:not([hidden=until-found]){display:none!important}
a{color:inherit;text-decoration:none}
.wrap{max-width:1180px;margin:0 auto;padding:0 clamp(24px,5vw,64px)}
.rv{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s ease}
.rv.in{opacity:1;transform:none}

/* eyebrow / heading rhythm */
.eyebrow{font-size:20px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--brass-deep);margin:0 0 20px 0}
h1,h2,h3{font-family:var(--display);font-weight:400;margin:0;color:var(--ink)}
h1{font-size:clamp(34px,5vw,58px);line-height:1.12}
h2{font-size:clamp(28px,3.6vw,42px);line-height:1.18}
h3{font-size:20px;line-height:1.3;font-weight:500}
p{margin:0 0 1em 0;max-width:62ch;text-align:justify;hyphens:auto}
p:last-child{margin-bottom:0}
.lede{font-size:17px;color:var(--body);max-width:56ch}

section{padding:clamp(56px,7vw,100px) 0;box-sizing:border-box}
section.soft{background:var(--paper)}
section.dark{background:var(--bottle);color:var(--paper)}
section.dark .eyebrow,section.dark .tag-group h4{color:#C6A972}
section.dark h2{color:var(--paper)}
section.dark .tags span{background:transparent;color:var(--paper);border-color:rgba(243,238,223,.3)}

/* nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;padding-top:env(safe-area-inset-top,0px);
  background:transparent;transition:background .35s ease,box-shadow .35s ease}
.nav.show{background:rgba(231,223,203,.92);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:0 1px 0 var(--line)}
.nav-in{display:flex;align-items:center;justify-content:space-between;padding:18px clamp(24px,5vw,64px)}
.wordmark{font-family:var(--display);font-weight:500;letter-spacing:.02em}
.nav .wordmark{font-size:22px;color:var(--ink);opacity:0;pointer-events:none;transition:opacity .3s ease}
.nav.show .wordmark{opacity:1;pointer-events:auto}
.nav ul{list-style:none;display:flex;gap:34px;margin:0;padding:0}
.nav ul a{font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);opacity:0;transition:opacity .3s ease}
.nav.show ul a{opacity:.72}
.nav ul a:hover,.nav ul a.on{opacity:1!important}
.burger{display:none;background:none;border:0;width:34px;height:24px;position:relative;cursor:pointer;padding:0}
.burger span{position:absolute;left:0;right:0;height:1px;background:var(--ink);transition:transform .25s ease,opacity .25s ease}
.burger span:nth-child(1){top:2px}.burger span:nth-child(2){top:11px}.burger span:nth-child(3){top:20px}
.nav.open .burger span:nth-child(1){transform:translateY(9px) rotate(45deg)}
.nav.open .burger span:nth-child(2){opacity:0}
.nav.open .burger span:nth-child(3){transform:translateY(-9px) rotate(-45deg)}

/* mobile + tablet navigation */
@media (max-width:980px){
  .burger{display:block;opacity:0;pointer-events:none;transition:opacity .3s ease}
  .nav.show .burger{opacity:1;pointer-events:auto}
  .nav ul{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;
    background:rgba(231,223,203,.98);padding:6px clamp(24px,5vw,64px) 18px;border-bottom:1px solid var(--line)}
  .nav.open ul{display:flex}
  .nav ul a{display:block;padding:14px 0;opacity:1;font-size:13px}
  .nav ul li + li{border-top:1px solid var(--line)}
}

/* landing */
.landing{min-height:100svh;display:flex;flex-direction:column;justify-content:space-between;position:relative;
  padding:0;background:var(--bottle);color:var(--paper)}
.landing>div:first-child{display:none}
.landing .foot{position:absolute;left:0;right:0;bottom:40px}
.landing-in{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 24px;position:relative}
.landing-sub{position:absolute;left:0;right:0;top:calc(50% + clamp(60px,14vw,82px));display:flex;flex-direction:column;align-items:center}
.landing .mark{font-size:clamp(110px,26vw,150px);color:var(--paper);line-height:1}
.landing .line{margin-top:34px;font-family:var(--display);font-style:italic;font-weight:300;
  font-size:clamp(20px,2.4vw,30px);line-height:1.2;color:var(--paper);white-space:nowrap;max-width:none}
.landing .enter{display:inline-block;margin-top:44px;font-size:12px;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--paper);border:1px solid rgba(243,238,223,.4);padding:14px 30px;
  border-radius:1px;transition:border-color .25s ease}
.landing .enter:hover{border-color:var(--paper)}
.landing .foot{display:flex;justify-content:center;gap:28px;font-size:12px;color:#C0B592;
  letter-spacing:.02em;padding:0 24px;text-align:center;flex-wrap:wrap}

/* split layout */

.subsection{border-top:1px solid var(--line);padding-top:32px;margin-top:56px;margin-bottom:8px}
.subsection .eyebrow{margin:0}
.stats{display:flex;justify-content:center;gap:clamp(56px,12vw,160px);flex-wrap:wrap;margin:44px 0 0 0}
.stats > div{text-align:center}
.map-panel{margin:40px 0 0 0}
.map-panel{overflow-x:auto}
.map-panel img{display:block;width:100%;height:auto}
@media (max-width:720px){.map-panel img{min-width:640px}}
.stats .num{display:block;font-family:var(--display);font-size:34px;color:var(--ink)}
.stats .label{display:block;font-size:12px;color:var(--muted);letter-spacing:.03em;margin-top:4px;max-width:22ch;margin-left:auto;margin-right:auto}

.phases{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:auto auto 1fr;column-gap:32px;row-gap:0;margin-bottom:56px}
.phase{border-top:2px solid var(--brass);padding-top:26px;display:grid;grid-template-rows:subgrid;grid-row:span 3}
@media (max-width:940px){.phases{grid-template-columns:1fr;grid-template-rows:none}.phase{display:block;grid-row:auto;margin-bottom:32px}}
.phase h3{font-size:34px;font-weight:600;line-height:1.1;margin-bottom:16px}
.phase p{font-size:14px;color:var(--body);margin-bottom:16px;max-width:none}
/* narrow columns cannot be justified cleanly: keep normal word spacing and balance the line lengths instead */
.phase p,.wcard .scope,.sister p{text-align:left;hyphens:manual;text-wrap:balance}
/* Stages descriptions: two fixed lines per column, sized by script so every line fills the column */
.phase p.fit{font-size:13px;text-wrap:wrap}
.phase p.fit span{display:block;white-space:nowrap;text-align:justify;text-align-last:justify}
@media (max-width:940px){.phase p.fit span{display:inline;white-space:normal;text-align:left;text-align-last:auto}}
.phase ul{list-style:none;margin:0;padding:0}
.phase li{font-size:13px;color:var(--body);padding:9px 0 9px 17px;position:relative}
.phase li::before{content:'';position:absolute;left:0;top:16px;width:9px;height:1px;background:var(--brass)}

.tag-group{margin-top:28px}
.tag-group h4{font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--brass-text);margin:0 0 14px 0}
.tags{display:flex;flex-wrap:wrap;gap:10px}
.tags span{display:inline-block;font-size:14px;color:var(--ink);background:var(--paper);
  border:1px solid var(--line);border-radius:100px;padding:8px 18px}

/* expertise columns */

/* selected works grid */
.works{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:40px}
@media (max-width:920px){.works{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.works{grid-template-columns:1fr}}
.wcard figure{margin:0;overflow:hidden;border-radius:2px;aspect-ratio:4/5}
.wcard img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.wcard:hover img{transform:scale(1.035)}
.wcard h3{margin-top:14px;font-size:17px}
.wcard .where{font-size:13px;color:var(--muted);margin-top:4px}
.wcard .scope{font-size:13px;color:var(--body);margin-top:4px;max-width:none}

/* current developments (confidential) */
.devgrid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:44px}
@media (max-width:720px){.devgrid{grid-template-columns:1fr}}
.devcard{background:var(--bottle);color:var(--paper);border-radius:2px;padding:0;overflow:hidden}
.devcard .devplate{margin:0;aspect-ratio:16/10;overflow:hidden;background:#1F2B22;position:relative}
.devcard .devplate img{width:100%;height:100%;object-fit:cover;display:block}
.photo-badge{position:absolute;left:0;bottom:0;background:rgba(20,18,14,.62);color:#F8F4E9;
  font-family:var(--sans);font-size:7px;font-weight:500;letter-spacing:.07em;text-transform:uppercase;
  padding:2px 6px}
.devcard h3,.devcard .where,.devcard p{padding-left:34px;padding-right:34px}
.devcard h3{margin-top:28px;font-size:19px}
.devcard h3{color:var(--paper);font-size:19px}
.devcard .where{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#C0B592;margin:6px 0 14px 0}
.devcard p{color:#CFC9B4;font-size:14px;max-width:none}
.devcard p:last-child{padding-bottom:30px}

/* sister company */
.about-grid{display:grid;grid-template-columns:1fr 430px;gap:clamp(32px,5vw,64px);align-items:stretch;margin-top:32px}
@media (max-width:1000px){.about-grid{grid-template-columns:1fr}.sister{margin-top:0}}
.about-grid .bio{max-width:62ch}
.sister{background:var(--paper);border:1px solid var(--line);border-radius:2px;padding:48px clamp(28px,3.4vw,48px) 52px;
  margin-top:78px;display:flex;flex-direction:column;align-items:flex-start;gap:30px}
.sister p{margin:0;max-width:none;color:var(--body)}
.sister-logo-link{display:block;line-height:0}
.sister-logo{height:46px;width:auto;display:block}
.sister .go{flex-shrink:0;font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink);border-bottom:1px solid var(--brass);padding-bottom:4px;white-space:nowrap}

/* founder */
.founder-head{margin-top:44px}
.founder-head h3{font-size:26px}
.founder-head .role{font-size:13px;letter-spacing:.06em;color:var(--brass-text);margin:8px 0 0 0;font-weight:500}
.founder{display:grid;grid-template-columns:280px 1fr;gap:clamp(32px,5vw,64px);align-items:start;margin-top:28px}
@media (max-width:720px){.founder{grid-template-columns:1fr;max-width:320px}}
.founder img{width:100%;display:block}
.founder .bio{max-width:62ch;margin:0 auto}
.founder .bio p{max-width:none}
.founder-note{margin:34px auto 0 auto;font-family:var(--display);font-style:italic;font-size:19px;
  color:var(--body);max-width:780px;text-align:center}

/* contact */
.contact-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(32px,6vw,72px);margin-top:44px}
@media (max-width:820px){.contact-grid{grid-template-columns:1fr}}
address{font-style:normal;font-size:15px;line-height:1.9;color:var(--body)}
address a{color:var(--ink);border-bottom:1px solid var(--line)}
.field{margin-bottom:18px}
.field label{display:block;font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);margin-bottom:7px}
.field input,.field select,.field textarea{width:100%;font:16px/1.5 var(--sans);color:var(--ink);
  background:var(--paper);border:1px solid var(--line);border-radius:1px;padding:12px 14px;appearance:none}
.field select{background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 20px) 22px,calc(100% - 15px) 22px;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.field textarea{resize:vertical}
.field input.err,.field select.err{border-color:#A9403D}
.field.hp{position:absolute;left:-9999px}
.send{font:inherit;font-size:12px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  background:var(--bottle);color:var(--paper);border:0;border-radius:1px;padding:15px 32px;cursor:pointer;
  transition:background .25s ease}
.send:hover{background:#1f2b22}
.send:disabled{opacity:.5;cursor:default}
.form-note{margin-top:14px;font-size:13px;color:#A9403D}
.form-note.ok{color:var(--bottle)}

footer{background:var(--bottle);color:#C0B592;padding:56px 0 40px}
.foot-tag{display:flex;align-items:flex-start;gap:clamp(28px,5vw,72px);padding-bottom:32px;margin-bottom:28px;border-bottom:1px solid rgba(243,238,223,.18)}
.foot-tag p{margin:0;max-width:62ch;font-family:var(--display);font-size:clamp(18px,1.6vw,22px);line-height:1.45;color:var(--paper)}
@media (max-width:640px){.foot-tag{flex-direction:column;gap:14px}}
.foot-in{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;font-size:12px}
.foot-mark{font-size:19px;color:var(--paper)}
.foot-in .flinks a{color:#CFC9B4;margin-left:22px}
.foot-in .flinks a:hover{color:var(--paper)}

@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

.privacy{margin:16px 0 0 0;font-size:13px;line-height:1.5;color:var(--body);max-width:52ch;text-align:left}
.textlink{display:inline-block;margin-top:22px;font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink);border-bottom:1px solid var(--brass);padding-bottom:4px}
.textlink:hover{border-bottom-color:var(--ink)}

/* one section per screen on desktops and laptops, so a colour change and the next section never share the same view */
@media (min-width:981px) and (min-height:640px){
  html{scroll-snap-type:y proximity}
  .landing{scroll-snap-align:start}
  section[id]{min-height:100vh;min-height:100svh;scroll-snap-align:start;box-sizing:border-box;display:flex;align-items:center}
  section[id] > .wrap{width:100%}
}

/* ===== projects, press and awards ===== */
.filters{display:flex;flex-wrap:wrap;gap:10px;margin-top:34px}
.chip{font:500 12px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ink);background:transparent;
  border:1px solid var(--line);border-radius:100px;padding:11px 18px;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.chip:hover{border-color:var(--brass)}
.chip.on{background:var(--bottle);color:var(--paper);border-color:var(--bottle)}
/* three across, with a short last row centred (also works when the filters leave an odd count) */
.pgrid{display:flex;flex-wrap:wrap;justify-content:center;gap:34px 26px;margin-top:36px}
.pgrid>.pcard{flex:0 0 calc((100% - 52px) / 3)}
@media (max-width:980px){.pgrid>.pcard{flex-basis:calc((100% - 26px) / 2)}}
@media (max-width:620px){.pgrid>.pcard{flex-basis:100%}}
.pcard{display:block;color:inherit;text-decoration:none}
.pcard[hidden]{display:none}
.pimg{display:block;overflow:hidden;border-radius:2px;aspect-ratio:16/10;background:#d9d2bd}
.pimg img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s ease}
.pcard:hover .pimg img,.pcard:focus-visible .pimg img{transform:scale(1.04)}
.pcard:focus-visible{outline:2px solid var(--brass);outline-offset:6px}
.pbody{display:block;padding-top:14px}
.pwhere{display:block;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.ptitle{display:block;margin-top:6px;font-family:var(--display);font-size:25px;font-weight:600;line-height:1.15;color:var(--ink)}
.pline{display:block;margin-top:8px;font-size:14px;color:var(--body);line-height:1.5;text-align:left}
.pmore{display:inline-block;margin-top:12px;font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);
  border-bottom:1px solid var(--brass);padding-bottom:3px}
.further{margin-top:56px;padding-top:40px;border-top:1px solid var(--line);text-align:center}
.pill-link{display:inline-block;font:600 12px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--paper);background:var(--bottle);border:1px solid var(--bottle);border-radius:100px;padding:18px 40px;transition:background .2s,color .2s}
.pill-link:hover{background:transparent;color:var(--brass-text);border-color:var(--brass)}
.further h4{font-family:var(--sans);font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--brass-text);margin:0 0 16px 0}
.further-list{list-style:none;margin:0;padding:0;columns:2;column-gap:48px}
@media (max-width:760px){.further-list{columns:1}}
.further-list li{break-inside:avoid;position:relative;padding:8px 0 8px 18px;font-size:14px;color:var(--body);line-height:1.5}
.further-list li::before{content:'';position:absolute;left:0;top:19px;width:9px;height:1px;background:var(--brass)}
.further .textlink{margin-top:26px}

/* project window: title, large photo, then the words (same order as the old site) */
body.pm-lock{overflow:hidden}
.pmodal{position:fixed;inset:0;z-index:300;display:none;overflow-y:auto;overscroll-behavior:contain}
.pmodal.open{display:block}
.pm-backdrop{position:fixed;inset:0;background:rgba(18,25,20,.78)}
.pm-close{position:fixed;top:16px;right:16px;z-index:320;width:46px;height:46px;border-radius:50%;border:0;background:rgba(251,248,242,.97);
  color:var(--ink);font-size:30px;line-height:1;cursor:pointer;box-shadow:0 2px 12px rgba(0,0,0,.3)}
.pm-close:hover{background:#fff}
.pm-panel{position:relative;z-index:1;width:min(1200px,94vw);margin:4vh auto;background:var(--paper);box-shadow:0 24px 80px rgba(0,0,0,.45);outline:none}
.pm-head{padding:46px 56px 26px;padding-right:84px}
.pm-head h3{font-size:clamp(34px,4.2vw,54px);line-height:1.04;margin:0}
.pm-where{margin:14px 0 0;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.pm-sub{margin:10px 0 0;font-family:var(--display);font-style:italic;font-size:22px;color:var(--brass-text)}
.pm-gallery{width:100%;margin:0 auto}
/* wide cinematic band, fixed height like the old site's slider; photos fill it and are cropped from the centre */
.pm-stage{position:relative;height:clamp(320px,54vh,600px);background:#F3EEE0}
.pm-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.pm-nav{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;border:0;background:rgba(251,248,242,.94);
  color:var(--ink);font-size:26px;line-height:1;cursor:pointer;z-index:3;box-shadow:0 2px 10px rgba(0,0,0,.3)}
.pm-nav.prev{left:14px}.pm-nav.next{right:14px}
.pm-nav:hover{background:#fff}
.pmodal.single .pm-nav,.pmodal.single .pm-count,.pmodal.single .pm-thumbs{display:none}
.pm-count{position:absolute;left:14px;bottom:14px;z-index:3;font-size:12px;font-weight:600;letter-spacing:.12em;color:#fff;
  background:rgba(18,25,20,.6);padding:6px 10px;border-radius:2px}
.pm-thumbs{display:flex;gap:8px;padding:12px 3px 4px;overflow-x:auto}
.pm-thumbs button{flex:0 0 84px;height:56px;padding:0;border:2px solid transparent;background:none;cursor:pointer;opacity:.6;transition:opacity .2s}
.pm-thumbs button:hover{opacity:.95}
.pm-thumbs button.on{opacity:1;border-color:var(--brass)}
.pm-thumbs img{width:100%;height:100%;object-fit:cover;display:block}
.pm-body{padding:40px 56px 10px}
.pm-cols{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:0 64px}
.pm-cols.solo{grid-template-columns:minmax(0,760px)}
.pm-text p{font-size:16px;line-height:1.75;color:var(--body);text-align:left;max-width:none;margin:0 0 16px}
.pm-quote{margin:28px 0 0;padding:4px 0 4px 22px;border-left:2px solid var(--brass)}
.pm-quote p{font-family:var(--display);font-style:italic;font-size:24px;line-height:1.35;color:var(--ink);margin:0;text-align:left;max-width:none}
.pm-quote .pm-cite{margin:12px 0 0;font-family:var(--sans);font-style:normal;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--brass-text);text-align:left}
.pm-block{margin-bottom:30px}
.pm-block h4{font-family:var(--sans);font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--brass-text);margin:0 0 12px}
.pm-list{list-style:none;margin:0;padding:0}
.pm-list li{position:relative;padding:7px 0 7px 18px;font-size:14.5px;color:var(--body);line-height:1.5}
.pm-list li::before{content:'';position:absolute;left:0;top:18px;width:9px;height:1px;background:var(--brass)}
.pm-tags{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.pm-tags li{font-size:13px;color:var(--ink);border:1px solid var(--line);border-radius:100px;padding:6px 13px;line-height:1.3}
.pm-foot{padding:26px 56px 50px;text-align:center}
.pm-back{font:600 12px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--brass-text);background:transparent;border:1px solid var(--brass);
  border-radius:100px;padding:16px 34px;cursor:pointer;transition:background .2s,color .2s}
.pm-back:hover{background:var(--bottle);border-color:var(--bottle);color:var(--paper)}
@media (max-width:860px){
  .pm-panel{width:100%;margin:0;box-shadow:none;min-height:100vh}
  .pm-head{padding:70px 22px 20px}
  .pm-gallery{width:100%}
  .pm-thumbs{padding:10px 22px 0}
  .pm-body{padding:30px 22px 6px}
  .pm-cols,.pm-cols.solo{grid-template-columns:1fr;gap:0}
  .pm-foot{padding:20px 22px 44px}
}

/* press carousel */
.press-in{width:100%}
.qwrap{margin:26px auto 0;max-width:900px;text-align:center}
.qs{display:grid;grid-template:1fr/1fr;align-items:center;justify-items:center}
.q{grid-area:1/1;align-self:center;justify-self:stretch;margin:0;opacity:0;visibility:hidden;transition:opacity .7s ease,visibility .7s}
.q.on{opacity:1;visibility:visible}
html:not(.js) .qs{display:block}
html:not(.js) .q{opacity:1;visibility:visible;margin-bottom:36px}
.q blockquote{margin:0;font-family:var(--display);font-style:italic;font-weight:400;font-size:clamp(19px,1.85vw,25px);line-height:1.35;color:var(--ink)}
.q figcaption{margin-top:20px;height:48px;display:flex;align-items:center;justify-content:center}
.q figcaption img{display:block;max-width:100%;height:auto;opacity:.9}
.q-ctl{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:24px}
.q-btn{width:38px;height:38px;border-radius:50%;border:1px solid var(--brass);background:transparent;color:var(--ink);font-size:24px;line-height:1;cursor:pointer;transition:border-color .2s,background .2s}
.q-btn:hover{border-color:var(--ink);background:rgba(33,28,21,.05)}
html:not(.js) .q-ctl{display:none}
.q-dots{display:flex;gap:9px;flex-wrap:wrap;justify-content:center}
.q-dots button{width:9px;height:9px;border-radius:50%;border:0;padding:0;background:rgba(33,28,21,.18);cursor:pointer}
.q-dots button.on{background:var(--brass)}
.q-note{margin:18px auto 0;font-size:12.5px;color:var(--muted);max-width:980px;text-align:center}

/* awards band */
.awards{margin:0 auto;max-width:1180px;padding:24px clamp(24px,5vw,64px) 0;box-sizing:border-box}
.awards::after{content:'';display:block;height:2px;background:var(--brass);margin-top:24px}
.track-clip{overflow:hidden}
.awards-title{margin:0 0 16px;padding:0;font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--brass-text);text-align:left}
.track{display:flex;width:max-content;animation:rbwmarq 70s linear infinite}
.awards:hover .track,.awards:focus-within .track{animation-play-state:paused}
.award{flex:none;padding-right:80px;color:var(--ink)}
.award .at{display:block;font-family:var(--display);font-style:italic;font-size:20px;line-height:1.2}
.award .ai{display:block;margin-top:8px;font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--brass-text)}
@keyframes rbwmarq{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .track{animation:none;width:auto;flex-wrap:wrap;justify-content:center;gap:26px 0;padding:0 24px}
  .award[aria-hidden="true"]{display:none}
  .q{transition:none}
}

/* brands and press share one light band: logos first, then the quotes and the awards strip */
.brands{list-style:none;margin:36px auto 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:68px 32px;align-items:center;max-width:1000px}
.brands li{display:flex;align-items:center;justify-content:center;height:60px}
.brands img{display:block;max-width:100%;max-height:100%;height:auto;opacity:.95}
@media (max-width:860px){.brands{grid-template-columns:repeat(3,1fr);gap:52px 24px;margin-top:48px}}
@media (max-width:560px){.brands{grid-template-columns:repeat(2,1fr);gap:40px 20px}.brands li{height:56px}.brands img{max-width:80%}}
/* the quotes sit in a slightly deeper band so they read as their own part of the section */
.media-band{margin:48px auto 0;max-width:1180px;padding:0 clamp(24px,5vw,64px);box-sizing:border-box}
.media-band>.wrap{position:relative;padding:0}
.media-band>.wrap::before,.media-band>.wrap::after{content:'';display:block;height:2px;background:var(--brass)}
.media-band>.wrap::before{margin-bottom:40px}
.media-band>.wrap::after{margin-top:36px}
.media-head{margin:0}

/* current and previous projects share one section */
.previous-head{margin-top:96px;padding-top:56px;border-top:1px solid var(--line)}

/* the press section is tuned to fit one screen when reached from the menu */
#press{padding-top:16px;padding-bottom:40px;scroll-margin-top:56px}
#press .media-head h2,#press #brands h2{font-size:clamp(28px,3vw,40px)}

/* expertise: the how we work copy on the left, the two figures on the right beside it, then the stages */
.how-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:0 clamp(32px,5vw,72px);margin-top:28px;align-items:center}
.how-text p{font-size:15px;line-height:1.65;color:var(--body);margin:0 0 14px;max-width:none;text-align:left}
.how-text p:last-child{margin-bottom:0}
.stats.how-stats{flex-direction:column;justify-content:center;gap:28px;margin:0;padding-left:clamp(24px,4vw,56px);border-left:2px solid var(--brass)}
.stats.how-stats>div{text-align:left}
.stats.how-stats .num{font-size:44px;line-height:1}
.stats.how-stats .label{margin:6px 0 0;max-width:none;font-size:13px}
@media (max-width:760px){.how-grid{grid-template-columns:1fr}.stats.how-stats{margin-top:24px;border-left:0;padding-left:0;flex-direction:row;gap:40px}}
.phase p.intro{font-size:13.5px;line-height:1.55;text-wrap:pretty}
/* expertise is tuned to land neatly under the menu and run compactly */
#expertise{padding-top:36px;scroll-margin-top:56px}
#expertise .subsection{margin-top:36px;padding-top:24px}
#expertise .phases{margin-bottom:0}
#expertise .phase{padding-top:18px}
#expertise .phase h3{font-size:28px;margin-bottom:10px}
#expertise .phase li{padding:5px 0 5px 17px;font-size:13px}
#expertise .phase li::before{top:12px}

/* where we have worked now closes the Expertise section */
#expertise .tag-group{margin-top:28px}

/* expertise on the green band */
section.dark .lede,section.dark .how-text p,section.dark .phase p,section.dark .phase li,section.dark .stats .label{color:#D9D0B6}
section.dark h3,section.dark .stats .num{color:var(--paper)}
section.dark .subsection{border-top-color:rgba(243,238,223,.22)}
section.dark .stats.how-stats{border-left-color:#C6A972}
section.dark .phase{border-top-color:#C6A972}
section.dark .phase li::before{background:#C6A972}

/* about: the RBW Design panel, then two client testimonials set on project photographs as on the old site */
.about-side{display:flex;flex-direction:column;gap:22px}
.client-quotes{flex:1;display:grid;grid-template-rows:1fr 1fr;background:#EFE9D9;border-radius:2px;padding:0 clamp(24px,3vw,40px)}
.client-quote{margin:0;display:flex;align-items:center;justify-content:center;padding:28px 0}
.client-quote+.client-quote{border-top:1px solid var(--brass)}
.client-quote img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.cq-panel{position:relative;text-align:center;max-width:360px;width:100%}
.cq-panel blockquote{margin:0;font-family:var(--display);font-style:italic;font-size:19px;line-height:1.4;color:var(--ink)}
.cq-panel figcaption{margin-top:16px;display:flex;flex-direction:column;gap:8px}
.cq-name{font-family:var(--display);font-size:19px;color:var(--ink)}
.cq-org{font:600 14px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--brass-text)}
@media (max-width:1000px){.client-quote{min-height:0}}

/* RBW Design panel now sits under the address in Contact */
.sister-contact{margin-top:36px;padding:32px 28px 36px;font-style:normal}
.sister-contact .sister-logo{max-width:120px}

/* full screen photographs: the picture washed back with white, the RBW mark faded and dead centre */
.interlude{position:relative;overflow:hidden;height:100vh;height:100svh;padding:0;background:#fff;display:block}
.interlude .interlude-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;opacity:.65}
.interlude .mark{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:clamp(110px,26vw,150px);line-height:1;color:var(--paper);opacity:.65;margin:0}

.interlude .credit{position:absolute;right:clamp(16px,2.5vw,32px);bottom:calc(14px + env(safe-area-inset-bottom,0px));font:400 10px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink);opacity:.6}

/* in-text links to the sister company */
.txtlink{color:var(--brass-text);font-weight:600;text-decoration:underline;text-decoration-color:var(--brass);text-underline-offset:3px;text-decoration-thickness:1.5px}
.txtlink::after{content:' \2197';font-size:.8em}
.txtlink:hover{color:var(--ink);text-decoration-color:var(--ink)}

/* design band inside Expertise, pointing to RBW Design */
.design-band{margin-top:48px;padding:36px clamp(24px,3vw,44px);border:1px solid rgba(243,238,223,.25);border-radius:2px;display:grid;grid-template-columns:auto 1fr auto;gap:clamp(24px,4vw,56px);align-items:center}
.design-logo{display:block;line-height:0}
.design-logo img{height:54px;width:auto;display:block}
.design-text .eyebrow{margin:0 0 10px}
.design-text p:last-child{margin:0;max-width:72ch;color:#D9D0B6;font-size:15px;line-height:1.65}
section.dark .go.design-go{display:inline-block;font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--paper);border-bottom:1px solid #C6A972;padding-bottom:6px;white-space:nowrap}
section.dark .go.design-go:hover{color:#C6A972}
@media (max-width:860px){.design-band{grid-template-columns:1fr;gap:20px}}

/* small screens: project photos in a 4:3 frame rather than a thin letterbox, landing footer tucked in */
@media (max-width:640px){
  .pm-stage{height:auto;aspect-ratio:4/3}
  .landing .foot{bottom:18px}
  .client-quotes{padding:8px clamp(18px,4vw,28px)}
  .cq-panel blockquote{font-size:17px}
  .interlude .credit{font-size:9px}
}