/*
Theme Name: West One
Theme URI: https://westone.ae
Author: West One Interiors & Contracting
Description: A luxury interior design and fit-out contracting theme. Navy and champagne palette, Poiret One wordmark, Avenir Next LT Pro body. Includes Projects and Services custom post types and a fully editable homepage.
Version: 1.72.3
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: westone
Tags: business, portfolio, custom-menu, custom-logo, featured-images, translation-ready
*/

/* ============================================================
   1. TOKENS
   Colours sampled directly from the West One logo artwork.
   ============================================================ */
:root{
  --navy:        #0C2130;
  --navy-deep:   #0A1B27;
  --navy-ink:    #0C2130;
  --champagne:   #EBCC9D;
  --champagne-d: #A0794A;   /* gold for light grounds; the pale gold reads at 2.2:1 on white */
  --bone:        #F4F1EC;
  --bone-warm:   #E9E3DA;
  --white:       #FFFFFF;

  --brand: 'Poiret One', 'Avenir Next LT Pro', sans-serif;
  --body:  'Avenir Next LT Pro', 'Avenir Next', Avenir, 'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --gutter: clamp(1.25rem, 5.5vw, 8rem);
  --maxw: 80rem;
  --rule: 1px solid rgba(235,204,157,.28);
  --ease: cubic-bezier(.22,.8,.3,1);
  --ease-glide: cubic-bezier(.16,1,.3,1);   /* expo-out, matches the JS curve */
}

/* ============================================================
   2. AVENIR NEXT LT PRO
   Drop licensed .woff2 files into /assets/fonts/ and these
   declarations pick them up. Until then the stack falls back
   to Nunito Sans, which is visually very close.
   See assets/fonts/README.txt for the licensing routes.
   ============================================================ */
@font-face{
  font-family:'Avenir Next LT Pro';
  src:url('assets/fonts/AvenirNextLTPro-UltraLight.woff2') format('woff2');
  font-weight:200; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Avenir Next LT Pro';
  src:url('assets/fonts/AvenirNextLTPro-Light.woff2') format('woff2');
  font-weight:300; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Avenir Next LT Pro';
  src:url('assets/fonts/AvenirNextLTPro-Regular.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Avenir Next LT Pro';
  src:url('assets/fonts/AvenirNextLTPro-Demi.woff2') format('woff2');
  font-weight:600; font-style:normal; font-display:swap;
}

/* ============================================================
   3. RESET & BASE
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{
  /* The whole page is sized in rem, so this one value drives every
     dimension. See section 19 for how it scales across devices. */
  font-size:14.08px;
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
body{
  margin:0; background:var(--navy); color:var(--white);
  font-family:var(--body); font-weight:300; font-size:0.935rem; line-height:1.75;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
/* Nothing may push the page sideways. */
h1,h2,h3,h4,h5,p,li,a,span{overflow-wrap:break-word}
img,video,svg{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit}
:focus-visible{outline:2px solid var(--champagne);outline-offset:4px}
.screen-reader-text{
  position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(1px,1px,1px,1px);white-space:nowrap;
}
.skip-link:focus{
  position:fixed;top:1rem;left:1rem;z-index:999;width:auto;height:auto;clip:auto;
  background:var(--champagne);color:var(--navy);padding:0.774rem 1.204rem;font-size:0.66rem;letter-spacing:0.14em;text-transform:uppercase;
}

/* ============================================================
   4. SHARED TYPE & COMPONENTS
   ============================================================ */
.wrap{max-width:var(--maxw);margin-inline:auto}
.section{padding:clamp(4.3rem,9.46vw,8.6rem) var(--gutter)}
.section--tight{padding-block:clamp(3.01rem,6.02vw,5.16rem)}

.eyebrow{
  font-size:0.5984rem;letter-spacing:0.3em;text-transform:uppercase;
  font-weight:400;color:var(--champagne);margin:0 0 1.75rem;
}
.eyebrow--dark{color:var(--navy);opacity:.55}

.display{font-family:var(--brand);font-weight:400;line-height:1.06;letter-spacing:.06em;margin:0}
h1.display{font-size:clamp(1.848rem,1.144rem + 2.64vw,3.872rem)}
h2.display{font-size:clamp(1.848rem,1.232rem + 2.288vw,3.432rem)}
h3.display{font-size:clamp(1.32rem,2.288vw,1.936rem)}

.lede{font-size:clamp(0.88rem,1.1vw,1.012rem);font-weight:200;line-height:1.9;max-width:62ch}

/* The signature device: the gold ring from the "O" in ONE. */

.btn{
  display:inline-flex;align-items:center;gap:0.731rem;
  font-size:0.6336rem;letter-spacing:0.22em;text-transform:uppercase;font-weight:400;
  padding:0.946rem 1.806rem;border:1px solid rgba(235,204,157,.45);color:var(--champagne);
  background:none;cursor:pointer;
  transition:background .45s ease,color .45s ease,border-color .45s ease;
}
.btn:hover,.btn:focus-visible{background:var(--champagne);color:var(--navy);border-color:var(--champagne)}
.btn--dark{border-color:rgba(27,65,86,.35);color:var(--navy)}
.btn--dark:hover,.btn--dark:focus-visible{background:var(--navy);color:var(--bone);border-color:var(--navy)}
.btn--sm{padding:0.731rem 1.376rem}

.text-link{
  display:inline-flex;align-items:center;gap:0.602rem;
  font-size:0.5808rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--champagne);
}
.text-link--dark{color:var(--navy)}

.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:1.72rem;flex-wrap:wrap;margin-bottom:clamp(2.5rem,5vw,4rem)}

/* Scroll reveal */
.rise{opacity:0;transform:translateY(34px);transition:opacity 1.5s var(--ease-glide),transform 1.5s var(--ease-glide)}
.rise.is-in{opacity:1;transform:none}

/* Media placeholder for empty featured images */
.media-empty{background:var(--navy-ink);position:relative}
.media-empty::after{
  content:'';position:absolute;top:50%;left:50%;translate:-50% -50%;
  width:22%;aspect-ratio:1;border:1px solid rgba(235,204,157,.3);border-radius:50%;
}

.ring{display:none}   /* retired: the small circle before link labels */

/* ============================================================
   5. HEADER  —  [ Menu | Home ]      WEST ONE      [ email ]
   ============================================================ */
.site-header{
  position:fixed;inset:0 0 auto;z-index:80;
  display:flex;align-items:center;justify-content:space-between;
  gap:0.86rem;padding:1.161rem var(--gutter);
  border-bottom:1px solid transparent;
  transition:background .5s var(--ease),padding .5s var(--ease),border-color .5s ease;
}
/* No backdrop-filter. Blurring whatever sits behind a fixed bar means
   re-rendering that strip on every scrolled frame, and profiling showed
   it was the single largest cause of dropped frames. A solid wash with
   a soft lower edge reads the same and costs nothing. */
.site-header{background:rgba(12,33,48,0)}
.site-header::after{
  content:'';position:absolute;left:0;right:0;top:100%;height:2.5rem;
  background:linear-gradient(rgba(12,33,48,.55),rgba(12,33,48,0));
  opacity:0;transition:opacity .5s ease;pointer-events:none;
}
.site-header.is-stuck{
  background:rgba(12,33,48,.94);
  padding-block:0.817rem;border-bottom-color:rgba(235,204,157,.16);
}
.site-header.is-stuck::after{opacity:1}
.admin-bar .site-header{top:32px}
@media(max-width:672.52px){.admin-bar .site-header{top:46px}}

.hdr-left{display:flex;align-items:center;gap:0.946rem}
.hdr-right{display:flex;align-items:center}

.nav-btn{
  display:inline-flex;align-items:center;gap:0.602rem;
  font-size:0.5984rem;letter-spacing:0.2em;text-transform:uppercase;font-weight:400;
  padding:0.43rem 0;position:relative;color:var(--white);background:none;border:0;cursor:pointer;
}
.nav-btn::after{
  content:'';position:absolute;left:0;right:100%;bottom:.15rem;height:1px;
  background:var(--champagne);transition:right .45s var(--ease);
}
.nav-btn:hover::after,.nav-btn:focus-visible::after{right:0}

.bars{display:block;width:20px;flex:none}
.bars i{display:block;height:1px;background:currentColor;margin:5px 0;transition:transform .45s var(--ease),opacity .25s}
.menu-open .bars i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.menu-open .bars i:nth-child(2){opacity:0}
.menu-open .bars i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

.divider{width:1px;height:1.15rem;background:rgba(255,255,255,.32);flex:none}

/* Centred wordmark. Absolutely positioned rather than sitting in the
   flex row, so it locks to the true centre of the page and cannot be
   nudged off by the controls on either side changing width. --track
   keeps the optical correction in step with the letter-spacing. */
.wordmark{
  --track:.18em;
  position:absolute;left:50%;top:50%;translate:-50% -50%;
  font-family:var(--brand);font-weight:400;
  font-size:clamp(1.1rem,0.484rem + 1.848vw,2.288rem);
  letter-spacing:var(--track);text-transform:uppercase;
  line-height:1;white-space:nowrap;padding-left:var(--track);
  color:var(--white);
}
.wordmark .o{color:var(--champagne)}
.wordmark img{max-height:2.752rem;width:auto}

/* Contact icon. The ring is the brand device, lifted from the O. */
.contact-btn{
  position:relative;display:grid;place-items:center;
  width:clamp(2.3rem,1.85rem + 1.1vw,2.6rem);height:clamp(2.3rem,1.85rem + 1.1vw,2.6rem);border-radius:50%;
  border:1px solid rgba(235,204,157,.45);color:var(--champagne);
  transition:background .45s var(--ease),color .45s var(--ease),border-color .45s var(--ease);
}
.contact-btn svg{width:1.05rem;height:1.05rem;stroke:currentColor;fill:none;stroke-width:1.25}
.contact-btn:hover,.contact-btn:focus-visible{background:var(--champagne);color:var(--navy-ink);border-color:var(--champagne)}
.contact-btn__tip{
  position:absolute;top:calc(100% + .7rem);right:0;
  font-size:0.4928rem;letter-spacing:0.17em;text-transform:uppercase;white-space:nowrap;
  color:var(--champagne);opacity:0;transform:translateY(-4px);pointer-events:none;
  transition:opacity .35s var(--ease),transform .35s var(--ease);
}
.contact-btn:hover .contact-btn__tip,.contact-btn:focus-visible .contact-btn__tip{opacity:1;transform:none}
@media(hover:none){.contact-btn__tip{display:none}}

/* ------------------------------------------------------------
   Off-canvas menu
   A translucent panel that arrives from the left, with the items
   following it in one after another.
   ------------------------------------------------------------ */
.overlay-nav{
  position:fixed;inset:0;z-index:70;
  visibility:hidden;pointer-events:none;
}
.menu-open .overlay-nav{visibility:visible;pointer-events:auto}
.menu-open .overlay-nav__panel,
.menu-open .overlay-nav__scrim{will-change:transform,opacity}

.overlay-nav__scrim{
  position:absolute;inset:0;
  background:rgba(6,17,26,.34);
  opacity:0;transition:opacity .7s var(--ease-glide);
  cursor:pointer;
}
.menu-open .overlay-nav__scrim{opacity:1}

.overlay-nav__panel{
  position:absolute;left:0;top:0;bottom:0;
  width:min(26rem,80vw);
  /* Semi-transparent: the page reads through it. The blur is added
     only once the panel has landed — running it during the slide costs
     roughly two thirds of the frames. */
  background:rgba(12,33,48,.58);
  border-right:1px solid rgba(235,204,157,.2);
  display:flex;flex-direction:column;justify-content:center;
  padding:5.16rem clamp(1.376rem,3.44vw,2.58rem) 1.72rem;
  transform:translateX(-100%) translateZ(0);
  transition:transform .85s var(--ease-glide);
  contain:layout paint;
  overflow-y:auto;
}
.menu-open .overlay-nav__panel{transform:translateX(0) translateZ(0)}
.overlay-nav__panel.is-settled{
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
}

.overlay-nav__list{list-style:none;margin:0;padding:0;text-align:right}
.overlay-nav__list li{
  opacity:0;transform:translateX(-1.6rem);
  transition:opacity .7s var(--ease-glide),transform .8s var(--ease-glide);
}
.menu-open .overlay-nav__list li{opacity:1;transform:none}
.overlay-nav__list a{
  font-family:var(--brand);font-weight:400;
  font-size:clamp(1.1rem,0.792rem + 1.32vw,1.848rem);
  letter-spacing:.09em;text-transform:uppercase;
  display:inline-block;padding:0.1892em 0;position:relative;color:#FFFFFF;
}
.overlay-nav__list a::after{
  content:'';position:absolute;right:0;left:100%;bottom:.2em;height:1px;
  background:var(--champagne);transition:left .55s var(--ease-glide);
}
.overlay-nav__list a:hover::after,
.overlay-nav__list a:focus-visible::after,
.overlay-nav__list .current-menu-item > a::after{left:0}
.overlay-nav__list .current-menu-item > a{color:var(--champagne)}

.overlay-nav__foot{
  margin-top:auto;padding-top:1.72rem;text-align:right;
  opacity:0;transform:translateX(-1rem);
  transition:opacity .7s var(--ease-glide) .35s,transform .8s var(--ease-glide) .35s;
}
.menu-open .overlay-nav__foot{opacity:1;transform:none}
.overlay-nav__tagline{
  font-size:0.4928rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--champagne);margin:0 0 1rem;
}
.overlay-nav__foot .socials{justify-content:flex-end}

@media(max-height:481.6px){
  .overlay-nav__panel{padding-top:3.87rem;justify-content:flex-start}
  .overlay-nav__list a{font-size:clamp(0.88rem,0.704rem + 0.88vw,1.232rem)}
}

.socials{display:flex;gap:1.204rem;list-style:none;margin:0;padding:0}
.socials a{font-size:0.5808rem;letter-spacing:0.14em;text-transform:uppercase;opacity:.7;transition:opacity .3s,color .3s}
.socials a:hover{opacity:1;color:var(--champagne)}

/* ============================================================
   6. HERO — full-bleed video or animation
   ============================================================ */
.hero{
  position:relative;height:100vh;height:100svh;min-height:29.24rem;
  overflow:hidden;background:var(--navy-ink);
  display:grid;place-items:end center;
}
.hero__media{position:absolute;inset:0;z-index:0}
.hero__media video,.hero__media img{width:100%;height:100%;object-fit:cover}

/* Grade the footage towards the brand navy, so any clip reads as
   West One whatever its own colour temperature. */
/* A flat wash rather than a blend mode. mix-blend-mode forces the
   browser to recomposite the whole viewport on every scrolled frame;
   this reads almost identically and costs nothing. */
.hero__tint{display:none;
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:rgba(12,33,48,.34);
}
.hero__grade{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(to bottom, rgba(12,33,48,var(--veil-top,.72)) 0%, rgba(12,33,48,.18) 32%,
                               rgba(12,33,48,.30) 65%, rgba(12,33,48,.86) 100%),
    radial-gradient(120% 80% at 50% 40%, rgba(12,33,48,0) 0%, rgba(12,33,48,.55) 100%);
}
.hero__ring{
  position:absolute;top:50%;left:50%;translate:-50% -50%;z-index:1;
  width:min(60vmin,32rem);aspect-ratio:1;
  border:1px solid rgba(235,204,157,.22);border-radius:50%;pointer-events:none;
}

.scroll-cue{
  position:relative;z-index:2;margin-bottom:2.2rem;
  display:flex;flex-direction:column;align-items:center;gap:0.731rem;
  font-size:0.4928rem;letter-spacing:0.29em;text-transform:uppercase;opacity:.7;
}
.scroll-cue i{display:block;width:1px;height:3rem;background:linear-gradient(var(--champagne),transparent)}
.scroll-cue i::after{
  content:'';display:block;width:1px;height:1rem;background:var(--champagne);
  animation:trickle 2.6s var(--ease) infinite;
}
@keyframes trickle{
  0%{transform:translateY(-1rem);opacity:0}
  35%{opacity:1}
  100%{transform:translateY(3rem);opacity:0}
}

/* Interior page hero */
.page-hero{
  position:relative;padding:clamp(7.74rem,13.76vw,12.04rem) var(--gutter) clamp(3.01rem,6.02vw,5.16rem);
  background:var(--navy-deep);overflow:hidden;
}
.page-hero__media{position:absolute;inset:0}
.page-hero__media img{width:100%;height:100%;object-fit:cover;opacity:.42}
.page-hero__media::after{content:'';position:absolute;inset:0;background:linear-gradient(to bottom,rgba(12,33,48,.7),rgba(12,33,48,.9))}
.page-hero__inner{position:relative;z-index:2;max-width:var(--maxw);margin-inline:auto}

/* Nothing animates while it is scrolled out of view, or while the menu
   is open over it — a translucent panel sliding across a repainting
   hero is what makes the slide stutter. */
.menu-open .plate,
.menu-open .sun,
.menu-open .dust,
.menu-open .sheer,
.menu-open .scroll-cue i::after,
.is-offscreen .plate,
.is-offscreen .sun,
.is-offscreen .dust,
.is-offscreen .sheer,
.is-offscreen .scroll-cue i::after{animation-play-state:paused}

/* ============================================================
   6b. STATEMENT — first section under the hero
   White ground by default. Adding .statement--navy inverts the whole
   block; the Customizer exposes that as a background choice.
   ============================================================ */
.statement{
  --paper:#FFFFFF;
  --ink:var(--navy);
  background:var(--paper);color:var(--ink);text-align:center;
  padding:clamp(3.612rem,6.536vw,6.192rem) var(--gutter);
}
.statement--bone{--paper:var(--bone,#F4F1EC)}
.statement--navy{--paper:var(--navy);--ink:#FFFFFF}

.statement__inner{max-width:41.28rem;margin-inline:auto}

.statement__title{
  --track:.16em;
  font-family:var(--brand);font-weight:400;
  font-size:clamp(1.276rem,0.748rem + 1.848vw,2.42rem);
  letter-spacing:var(--track);text-transform:uppercase;
  line-height:1.1;margin:0;padding-left:var(--track);
}
.statement__title .amp{color:var(--champagne-d)}
.statement--navy .statement__title .amp{color:var(--champagne)}

.statement__body{
  font-size:clamp(0.836rem,0.792rem + 0.1584vw,0.9328rem);
  font-weight:300;line-height:1.6;
  max-width:36.12rem;margin:clamp(.7rem,1.2vw,1rem) auto 0;opacity:.86;
}
.statement--navy .statement__body{font-weight:200;opacity:.85}

.statement__cta{
  display:inline-flex;align-items:center;gap:0.688rem;
  margin-top:clamp(1.2rem,2vw,1.6rem);
  font-size:0.5632rem;letter-spacing:0.19em;text-transform:uppercase;
  padding:0.774rem 1.548rem;border:1px solid rgba(27,65,86,.4);color:var(--ink);
  transition:background .45s var(--ease),color .45s var(--ease),border-color .45s var(--ease);
}
.statement__cta:hover,.statement__cta:focus-visible{background:var(--navy);color:#FFFFFF;border-color:var(--navy)}
.statement--navy .statement__cta{border-color:rgba(235,204,157,.45);color:var(--champagne)}
.statement--navy .statement__cta:hover{background:var(--champagne);color:var(--navy);border-color:var(--champagne)}

/* ============================================================
   6c. ABOUT BAND — full-bleed photo left, copy right
   The photo runs to the left edge of the viewport with no gutter, and
   the section carries no padding of its own; the copy column supplies
   its own instead. Both columns stretch, so the photo and the text
   panel are always exactly the same height.
   ============================================================ */
.about-band{
  --paper:var(--navy);          /* West One blue, straight off the logo */
  --ink:#FFFFFF;
  --accent:var(--champagne);
  background:var(--paper);color:var(--ink);
  padding:0;
}
.about-band--white{--paper:#FFFFFF;--ink:var(--navy);--accent:var(--champagne-d)}
.about-band--bone{--paper:var(--bone);--ink:var(--navy);--accent:var(--champagne-d)}

.about-band__inner{
  max-width:none;margin:0;
  display:grid;grid-template-columns:1fr;gap:0;align-items:stretch;
}

/* ---- photo ---- */
/* The photo stretches to match the copy beside it, but never past a
   landscape shape. Without the cap, pasting three long paragraphs into
   the About field would stretch the photo upright. The cap is in vw
   because the column is a fixed share of the viewport. */
.about-band__figure{position:relative;margin:0}
.about-band__media{position:absolute;inset:0;overflow:hidden;background:var(--navy-ink)}
.about-band__media img{width:100%;height:100%;object-fit:cover;transition:transform 1.6s var(--ease)}
.about-band__figure:hover img{transform:scale(1.03)}

/* Optional name plate. Hidden unless a name is entered. */
.about-band__caption{
  position:absolute;left:0;right:0;bottom:0;z-index:3;margin:0;
  padding:2.58rem 1.634rem 1.29rem;
  background:linear-gradient(to top,rgba(12,33,48,.88) 0%,rgba(12,33,48,.45) 55%,transparent 100%);
  font-size:0.528rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--champagne);
}
.about-band__caption span{display:block;margin-top:.4rem;opacity:.7;letter-spacing:0.14em;color:#FFFFFF}

/* ---- copy panel ---- */
.about-band__body{
  display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
  padding:clamp(2.58rem,5.59vw,5.16rem) clamp(1.29rem,4.3vw,5.59rem);
}
.about-band__title{
  --track:0.14em;
  font-family:var(--brand);font-weight:400;color:var(--ink);
  font-size:clamp(0.924rem,0.616rem + 1.012vw,1.54rem);
  letter-spacing:var(--track);text-transform:uppercase;
  line-height:1.15;margin:0;padding-left:var(--track);
}
.about-band__text{
  font-size:clamp(0.704rem,0.6864rem + 0.088vw,0.7744rem);
  font-weight:200;line-height:1.8;opacity:.82;
  margin:clamp(1.1rem,1.8vw,1.5rem) 0 0;max-width:25.8rem;
}
.about-band__text + .about-band__text{margin-top:.8rem}

.about-band__cta{
  display:inline-flex;align-items:center;gap:0.688rem;
  /* These meet the narrow-screen ramp exactly at 653px, so the button
     grows continuously rather than jumping at the breakpoint. */
  margin-top:clamp(.9rem,1.35vw,1.75rem);
  font-size:clamp(0.44rem,0.32rem + 0.2vw,0.4928rem);letter-spacing:0.17em;text-transform:uppercase;
  padding:clamp(.44rem,0.86vw,0.688rem) clamp(.7rem,1.6vw,1.29rem);
  border:1px solid var(--accent);color:var(--accent);
  transition:background .45s var(--ease),color .45s var(--ease),border-color .45s var(--ease);
}
.about-band__cta:hover,.about-band__cta:focus-visible{background:var(--accent);color:var(--paper);border-color:var(--accent)}






/* ============================================================
   6d. PROJECTS SLIDER — latest work, traversed with end arrows
   Native scroll-snap does the moving, so it drags on touch and
   works with a trackpad; the arrows just nudge the scroll by one
   card. No carousel library, nothing to break.
   ============================================================ */
.pslider{
  --paper:#FFFFFF;
  --ink:var(--navy);
  --accent:var(--champagne-d);
  background:var(--paper);color:var(--ink);
  padding:clamp(2.924rem,5.59vw,5.16rem) 0;
  overflow:hidden;
}
.pslider--navy{--paper:var(--navy);--ink:#FFFFFF;--accent:var(--champagne)}
.pslider--bone{--paper:var(--bone,#F4F1EC)}

.pslider__head{
  text-align:center;max-width:37.84rem;
  margin:0 auto clamp(2rem,4vw,3.2rem);
  padding-inline:var(--gutter);
}
.pslider__title{
  --track:0.14em;
  font-family:var(--brand);font-weight:400;color:var(--accent);
  font-size:clamp(1.012rem,0.66rem + 1.144vw,1.76rem);
  letter-spacing:var(--track);text-transform:uppercase;
  line-height:1.15;margin:0;padding-left:var(--track);
}
.pslider__sub{
  font-size:clamp(0.704rem,0.6864rem + 0.088vw,0.792rem);
  font-weight:200;line-height:1.8;opacity:.82;margin:.9rem 0 0;
}

/* ---- stage ---- */
/* One padding value for the whole range, no breakpoint. It starts at the
   page gutter on a phone and grows into room for the arrows on a desktop,
   so nothing steps at 1100px. */
.pslider__stage{
  position:relative;
  --rail-pad:clamp(1.075rem, 0.35rem + 3.35vw, 8.17rem);
}

.pslider__track{
  display:flex;gap:clamp(0.774rem,1.548vw,1.462rem);
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  padding-inline:var(--rail-pad);
  scroll-padding-inline:var(--rail-pad);
  scrollbar-width:none;-ms-overflow-style:none;
}
.pslider__track::-webkit-scrollbar{display:none}

.pcard{
  flex:0 0 calc((100% - 2 * clamp(.9rem,1.8vw,1.7rem)) / 3);
  scroll-snap-align:start;min-width:0;
  display:flex;flex-direction:column;
}
.pcard__art{
  position:relative;aspect-ratio:5/4;overflow:hidden;background:var(--navy-ink);
}
.pcard__art img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.pcard:hover .pcard__art img{transform:scale(1.05)}
.pcard__loc{
  margin:1.1rem 0 0;font-size:0.4928rem;letter-spacing:0.22em;text-transform:uppercase;
  color:var(--accent);opacity:.9;
}
.pcard__name{
  --track:.16em;
  font-family:var(--brand);font-weight:400;color:var(--accent);
  font-size:clamp(0.88rem,0.616rem + 0.792vw,1.32rem);
  letter-spacing:var(--track);text-transform:uppercase;
  line-height:1.2;margin:.55rem 0 0;
}
.pcard__desc{
  font-size:clamp(0.6864rem,0.6688rem + 0.0704vw,0.7568rem);
  font-weight:200;line-height:1.75;opacity:.82;
  margin:.7rem 0 0;
}
.pcard__cta{
  align-self:flex-start;margin-top:1.2rem;
  display:inline-flex;align-items:center;gap:0.602rem;
  font-size:0.484rem;letter-spacing:0.17em;text-transform:uppercase;
  padding:0.645rem 1.204rem;border:1px solid var(--accent);color:var(--accent);
  transition:background .45s var(--ease),color .45s var(--ease);
}
.pcard__cta:hover,.pcard__cta:focus-visible{background:var(--accent);color:var(--paper)}

/* ---- end arrows ---- */
.pslider__nav{
  position:absolute;top:calc((100% - 11rem) / 2);
  z-index:4;width:clamp(2.4rem,1.75rem + 0.9vw,2.9rem);height:clamp(2.4rem,1.75rem + 0.9vw,2.9rem);border-radius:50%;
  display:grid;place-items:center;cursor:pointer;
  background:var(--paper);border:1px solid var(--accent);color:var(--accent);
  transition:background .4s var(--ease),color .4s var(--ease),opacity .4s ease;
}
.pslider__nav svg{width:.85rem;height:.85rem;fill:none;stroke:currentColor;stroke-width:1.4}
.pslider__nav:hover:not([disabled]){background:var(--accent);color:var(--paper)}
.pslider__nav[disabled]{opacity:.28;cursor:default}

/* ---- progress rail ---- */
.pslider__foot{display:flex;justify-content:center;margin-top:clamp(1.8rem,3vw,2.6rem);padding-inline:var(--gutter)}
.pslider__rail{
  position:relative;height:1px;margin:clamp(1.8rem,3vw,2.6rem) var(--gutter) 0;
  background:currentColor;opacity:.16;
}
.pslider__rail span{
  position:absolute;inset:-1px auto;height:3px;background:var(--accent);
  transition:left .35s var(--ease),width .35s var(--ease);
}

/* ---- cards per view ---- */
@media(max-width:945.14px){
  .pcard{flex-basis:calc((100% - clamp(.9rem,1.8vw,1.7rem)) / 2)}
}
@media(max-width:601.14px){
  .pcard{flex-basis:100%}
  .pslider__nav{background:rgba(12,33,48,.72);border-color:rgba(235,204,157,.6);color:var(--champagne)}
  .pslider--navy .pslider__nav{background:rgba(12,33,48,.82)}
}
/* The arrows track that same value: rail-pad less their own width and a
   gap, floored so they stay on screen on the narrowest phones. */
.pslider__nav--prev{left:max(0.35rem, calc(var(--rail-pad) - 3.9rem))}
.pslider__nav--next{right:max(0.35rem, calc(var(--rail-pad) - 3.9rem))}

/* ============================================================
   6e. DEPARTMENTS — "Continue your journey"
   At rest each card is a full-bleed photograph with a quiet label.
   On hover the photograph draws back inside its frame, a champagne
   hairline catches the new edge, and the description rises over it.
   ============================================================ */
.depts{
  --paper:var(--navy);
  --ink:#FFFFFF;
  --accent:var(--champagne);
  background:var(--paper);color:var(--ink);
  padding:clamp(2.924rem,5.59vw,5.16rem) var(--gutter);
}
.depts--white{--paper:#FFFFFF;--ink:var(--navy);--accent:var(--champagne-d)}
.depts--bone{--paper:var(--bone);--ink:var(--navy);--accent:var(--champagne-d)}

.depts__head{text-align:center;max-width:37.84rem;margin:0 auto clamp(2rem,4vw,3.2rem)}
.depts__title{
  --track:0.14em;
  font-family:var(--brand);font-weight:400;color:var(--accent);
  font-size:clamp(1.012rem,0.66rem + 1.144vw,1.76rem);
  letter-spacing:var(--track);text-transform:uppercase;
  line-height:1.15;margin:0;padding-left:var(--track);
}
.depts__sub{
  font-size:clamp(0.704rem,0.6864rem + 0.088vw,0.792rem);
  font-weight:200;line-height:1.8;opacity:.82;margin:.9rem 0 0;
}

.depts__grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(0.43rem,1.032vw,1.204rem);
  max-width:55.04rem;margin-inline:auto;
}

/* ---- card ---- */
.dept{
  position:relative;display:block;overflow:hidden;
  /* One shape at every width. It used to switch from 4:3 to 3:2 at
     1200px, which snapped mid-resize; a single ratio is the only way to
     keep it continuous, since aspect-ratio cannot be interpolated. */
  aspect-ratio:1.42;
  background:var(--navy-ink);
  isolation:isolate;
}

/* The photograph. Scaling this down is the "minimize": the card
   background is revealed around it as it pulls away from the edges. */
.dept__img{
  position:absolute;inset:0;z-index:1;
  transition:transform 1.1s var(--ease-glide);
}
.dept:hover .dept__img{will-change:transform}
.dept__img img{width:100%;height:100%;object-fit:cover}

/* Hairline that catches the photograph's new edge as it draws in. */
.dept__frame{
  position:absolute;inset:0;z-index:3;pointer-events:none;
  border:1px solid rgba(235,204,157,0);
  transition:inset 1.1s var(--ease-glide),border-color .8s ease;
}

.dept__veil{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(to top,rgba(12,33,48,.85) 0%,rgba(12,33,48,.25) 45%,rgba(12,33,48,.1) 100%);
  opacity:.55;transition:opacity .9s var(--ease-glide);
}

/* Quiet label at rest. */
.dept__label{
  position:absolute;left:0;right:0;bottom:0;z-index:4;
  /* one ramp from phone to desktop; the narrow tier used to restate
     a smaller fixed value and step at 774px */
  padding:clamp(0.43rem,1.35vw,1.462rem);
  font-family:var(--brand);font-weight:400;
  font-size:clamp(0.836rem,0.616rem + 0.66vw,1.188rem);
  letter-spacing:.16em;text-transform:uppercase;line-height:1.2;
  color:#FFFFFF;
  transition:opacity .55s var(--ease-glide),transform .8s var(--ease-glide);
}

/* The block that arrives on hover. */
.dept__reveal{
  position:absolute;inset:0;z-index:5;overflow:hidden;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:clamp(0.516rem,1.95vw,2.236rem);
  opacity:0;transform:translateY(1.2rem);
  transition:opacity .8s var(--ease-glide),transform 1s var(--ease-glide);
}
.dept__name{
  font-family:var(--brand);font-weight:400;color:var(--champagne);
  font-size:clamp(0.88rem,0.6336rem + 0.704vw,1.276rem);
  letter-spacing:.16em;text-transform:uppercase;line-height:1.2;margin:0;
}
.dept__desc{
  font-size:clamp(0.6864rem,0.6688rem + 0.0704vw,0.7568rem);
  font-weight:200;line-height:1.7;color:#FFFFFF;opacity:.88;
  margin:.7rem 0 0;
  /* however long the excerpt, it stops at three lines rather than
     pushing the link out of the card */
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;
}
.dept__more{
  display:inline-flex;align-items:center;gap:0.516rem;margin-top:1.1rem;
  font-size:0.484rem;letter-spacing:0.17em;text-transform:uppercase;color:var(--champagne);
}

/* ---- the hover itself ---- */
@media(hover:hover){
  .dept:hover .dept__img,
  .dept:focus-visible .dept__img{transform:scale(.82)}

  .dept:hover .dept__frame,
  .dept:focus-visible .dept__frame{
    inset:clamp(.9rem,2.2vw,1.9rem);
    border-color:rgba(235,204,157,.75);
  }

  .dept:hover .dept__veil,
  .dept:focus-visible .dept__veil{opacity:.88}

  .dept:hover .dept__label,
  .dept:focus-visible .dept__label{opacity:0;transform:translateY(.6rem)}

  .dept:hover .dept__reveal,
  .dept:focus-visible .dept__reveal{opacity:1;transform:none}
}

/* No hover to give: show the description permanently instead. */
@media(hover:none){
  .dept__label{display:none}
  .dept__reveal{opacity:1;transform:none}
  .dept__veil{opacity:.85}
}

/* The three cards stay side by side at every width. As the columns
   narrow there is no longer room for a paragraph over a thumbnail,
   so the reveal sheds the description, then the link, keeping the
   department name legible down to the smallest screens. */
@media(max-width:773.14px){
  .dept__label{letter-spacing:.1em}
  .dept__name{letter-spacing:.1em}
  .dept__desc{display:none}
  .dept__more{letter-spacing:.14em}
}
@media(max-width:515.14px){
  .dept__more{display:none}
  .dept__label,.dept__name{letter-spacing:.06em}
}
@media(prefers-reduced-motion:reduce){
  .dept__img,.dept__frame,.dept__veil,.dept__label,.dept__reveal{transition:none}
  .dept__label{display:none}
  .dept__reveal{opacity:1;transform:none}
}

/* ============================================================
   6f. JOIN OUR COMMUNITY — social links left, poster right
   ============================================================ */
.community{
  --paper:#FFFFFF;
  --ink:var(--navy);
  --accent:var(--champagne-d);
  background:var(--paper);color:var(--ink);
  padding:clamp(2.924rem,5.59vw,5.16rem) var(--gutter);
}
.community--navy{--paper:var(--navy);--ink:#FFFFFF;--accent:var(--champagne)}
.community--bone{--paper:var(--bone,#F4F1EC)}

.community__inner{
  max-width:58.48rem;margin-inline:auto;
  display:grid;grid-template-columns:1.05fr .95fr;
  gap:clamp(1.376rem,3.44vw,3.44rem);align-items:center;
}

/* ---- left ---- */
.community__title{
  --track:0.14em;
  font-family:var(--brand);font-weight:400;color:var(--accent);
  font-size:clamp(0.924rem,0.616rem + 1.012vw,1.54rem);
  letter-spacing:var(--track);text-transform:uppercase;
  line-height:1.15;margin:0;padding-left:var(--track);
}
.community__sub{
  font-size:clamp(0.704rem,0.6864rem + 0.088vw,0.7744rem);
  font-weight:200;line-height:1.8;opacity:.84;
  margin:clamp(.7rem,1.2vw,1rem) 0 0;max-width:25.8rem;
}

.socials-list{
  list-style:none;margin:clamp(1.4rem,2.6vw,2.2rem) 0 0;padding:0;
  border-top:1px solid currentColor;
}
.socials-list > li{border-bottom:1px solid currentColor}
.socials-list > li,.socials-list{border-color:color-mix(in srgb, currentColor 18%, transparent)}

.social-row{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;
  gap:clamp(0.602rem,1.376vw,1.032rem);
  padding:clamp(0.645rem,1.29vw,0.903rem) 0;
  position:relative;
}
.social-row__icon{
  width:1.15rem;height:1.15rem;flex:none;color:var(--accent);
  transition:transform .6s var(--ease-glide);
}
.social-row__icon svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.3}
.social-row__name{
  font-size:0.5456rem;letter-spacing:0.19em;text-transform:uppercase;font-weight:400;
}
.social-row__handle{
  font-size:0.6688rem;font-weight:200;opacity:.6;justify-self:end;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:10.32rem;
}
.social-row::after{
  content:'';position:absolute;left:0;right:100%;bottom:-1px;height:1px;
  background:var(--accent);transition:right .7s var(--ease-glide);
}
.social-row:hover::after,.social-row:focus-visible::after{right:0}
.social-row:hover .social-row__icon,
.social-row:focus-visible .social-row__icon{transform:translateX(.2rem)}
.social-row:hover .social-row__handle{opacity:.95}

/* ---- right: the poster ---- */
.community__poster{position:relative;justify-self:center;width:100%;text-align:center}
/* width:auto with a height cap means the element box matches the image
   exactly. Sizing by width instead leaves letterbox gaps inside the box
   once the height cap bites. */
/* Capped in rem as well as vw. The cap was 30vw with a high ceiling, so
   on a wide monitor the picture kept growing while the copy beside it
   did not — right at 1440 and oversized beyond it. */
.community__poster img{
  width:auto;max-width:100%;height:auto;
  /* The ceiling is in px, not rem. A rem cap grows with the root font
     size, which itself grows with the screen — so the picture kept
     widening on a large monitor no matter what the cap said. */
  max-height:min(clamp(16.27rem,30vw,27.52rem), 400px);
  margin-inline:auto;display:block;
}
.community__poster .media-empty{aspect-ratio:4/5;width:100%;max-width:20.64rem;margin-inline:auto}

/* Side by side down to 600px. Below that the poster would be about
   150px wide and the link rows would have nowhere to sit, so it stacks
   with the poster first. */
@media(min-width:600px) and (max-width:773.14px){
  .community__inner{grid-template-columns:1fr .85fr;gap:clamp(1.032rem,2.58vw,1.72rem)}

  .social-row__handle{display:none}
  .community__sub{max-width:none}
}
@media(max-width:515.14px){
  .community__inner{grid-template-columns:1fr;gap:clamp(1.548rem,3.44vw,2.236rem)}
  /* The poster follows the links rather than leading them: the heading
     and the list are what the reader came for, and a tall picture above
     them pushed the whole point of the section off the screen. */
  .community__poster{order:1}
  .community__poster img{max-height:18.92rem}
  .community__sub{max-width:none}
  .social-row__handle{max-width:7.74rem}
}
@media(max-width:361.2px){
  .social-row{grid-template-columns:auto 1fr auto;gap:0.516rem}
  .social-row__name{font-size:0.4928rem;letter-spacing:.18em}
  .social-row__handle{font-size:0.5984rem;max-width:6.02rem}
}

/* ============================================================
   7. INTRO / MANIFESTO
   ============================================================ */
.intro{background:var(--bone);color:var(--navy)}
.intro__grid{display:grid;grid-template-columns:1fr;gap:clamp(2.15rem,6.02vw,6.02rem);align-items:start}
.intro__body p{font-weight:300;line-height:1.95;margin:0 0 1.4rem}

/* ============================================================
   8. TRUST STRIP
   ============================================================ */
.trust{background:var(--navy-deep);text-align:center}
.trust .lede{margin:1.6rem auto 0;text-align:center}
.stat-row{display:flex;justify-content:center;flex-wrap:wrap;gap:clamp(1.72rem,5.16vw,4.3rem);margin-top:clamp(2.5rem,5vw,4rem)}
.stat b{display:block;font-family:var(--brand);font-size:clamp(2.112rem,4.4vw,3.168rem);line-height:1;letter-spacing:.04em;color:var(--champagne)}
.stat span{font-size:0.5456rem;letter-spacing:0.2em;text-transform:uppercase;opacity:.65}
.logo-row{
  display:flex;justify-content:center;align-items:center;flex-wrap:wrap;
  gap:clamp(1.72rem,4.3vw,3.44rem);margin-top:clamp(2.5rem,5vw,4rem);
  padding-top:clamp(2.15rem,4.3vw,3.44rem);border-top:var(--rule);
}
.logo-row img{max-height:3.44rem;width:auto;opacity:.65;filter:grayscale(1) brightness(1.6);transition:opacity .4s,filter .4s}
.logo-row img:hover{opacity:1;filter:none}
.trust__cta{margin-top:clamp(2.5rem,5vw,3.5rem)}

/* ============================================================
   9. SERVICES
   ============================================================ */
.services{background:var(--navy)}
.svc-grid{display:grid;grid-template-columns:1fr;gap:0.86px;background:rgba(235,204,157,.18)}
.svc{
  background:var(--navy);padding:clamp(1.548rem,2.58vw,2.408rem);
  display:flex;flex-direction:column;transition:background .5s ease;
}
.svc:hover{background:var(--navy-deep)}
.svc__art{aspect-ratio:4/3;margin-bottom:2rem;overflow:hidden;position:relative}
.svc__art img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.svc:hover .svc__art img{transform:scale(1.05)}
.svc h3{font-family:var(--brand);font-size:clamp(1.188rem,1.936vw,1.54rem);letter-spacing:.1em;margin:0 0 .9rem;font-weight:400}
.svc p{font-size:0.836rem;font-weight:200;opacity:.78;margin:0 0 2rem;line-height:1.85}
.svc .text-link{margin-top:auto}

/* ============================================================
   10. PROJECTS
   ============================================================ */
.projects{background:var(--navy-deep)}
.proj-grid{display:grid;grid-template-columns:1fr;gap:clamp(0.86rem,2.064vw,1.892rem)}
.proj{position:relative;display:block;overflow:hidden;background:var(--navy-ink)}
.proj__art{aspect-ratio:3/2;position:relative;overflow:hidden}
.proj__art img{width:100%;height:100%;object-fit:cover;transition:transform 1.3s var(--ease)}
.proj:hover .proj__art img{transform:scale(1.05)}
.proj__veil{position:absolute;inset:0;background:linear-gradient(to top,rgba(12,33,48,.92) 0%,rgba(12,33,48,.14) 58%,transparent 100%)}
.proj__meta{position:absolute;left:0;right:0;bottom:0;padding:clamp(1.204rem,2.064vw,1.892rem);z-index:2}
.proj__loc{font-size:0.528rem;letter-spacing:0.23em;text-transform:uppercase;color:var(--champagne);margin:0 0 .6rem}
.proj__name{font-family:var(--brand);font-size:clamp(1.144rem,2.024vw,1.76rem);letter-spacing:.08em;margin:0 0 .5rem;font-weight:400}
.proj__desc{font-size:0.7744rem;font-weight:200;opacity:.75;margin:0;max-width:44ch}
.proj__more{
  display:inline-flex;align-items:center;gap:0.516rem;margin-top:1.1rem;
  font-size:0.5456rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--champagne);
  opacity:0;transform:translateY(8px);transition:opacity .5s,transform .5s;
}
.proj:hover .proj__more,.proj:focus-visible .proj__more{opacity:1;transform:none}
.sec-foot{display:flex;justify-content:center;margin-top:clamp(2.5rem,5vw,4rem)}

/* ============================================================
   11. FEATURED BAND
   ============================================================ */
.feature{position:relative;min-height:70vh;min-height:70svh;display:grid;align-items:center;padding:clamp(3.44rem,7.74vw,6.88rem) var(--gutter);overflow:hidden;background:var(--navy-ink)}
.feature__media{position:absolute;inset:0}
.feature__media img{width:100%;height:100%;object-fit:cover}
.feature__media::after{content:'';position:absolute;inset:0;background:linear-gradient(105deg,rgba(12,33,48,.94) 0%,rgba(12,33,48,.72) 45%,rgba(12,33,48,.35) 100%)}
.feature__inner{position:relative;z-index:2;max-width:30.96rem;margin-inline:auto;width:100%}
.feature__wrap{max-width:var(--maxw);margin-inline:auto;width:100%;position:relative;z-index:2}
.feature__inner .lede{margin:1.8rem 0 2.6rem}

/* ============================================================
   12. ABOUT
   ============================================================ */
.about{background:var(--bone);color:var(--navy)}
.about__grid{display:grid;grid-template-columns:1fr;gap:clamp(2.15rem,6.02vw,5.16rem);align-items:center}
.about__media{position:relative;aspect-ratio:4/5;overflow:hidden}
.about__media img{width:100%;height:100%;object-fit:cover}
.about__body p{margin:0 0 1.4rem;line-height:1.95;font-weight:300}

/* ============================================================
   13. PROCESS
   ============================================================ */
.process{background:var(--bone-warm);color:var(--navy)}
.steps{display:grid;grid-template-columns:1fr;gap:0.86px;background:rgba(27,65,86,.16);margin-top:clamp(2.5rem,5vw,4rem)}
.step{background:var(--bone-warm);padding:clamp(1.376rem,2.064vw,1.892rem);transition:background .5s}
.step:hover{background:var(--bone)}
.step b{display:block;font-family:var(--brand);font-size:2.112rem;line-height:1;color:var(--champagne-d);margin-bottom:1.4rem}
.step h4{font-size:0.6336rem;letter-spacing:0.17em;text-transform:uppercase;margin:0 0 .8rem;font-weight:600}
.step p{font-size:0.7568rem;font-weight:300;line-height:1.8;opacity:.72;margin:0}

/* ============================================================
   14. JOURNAL / PRESS
   ============================================================ */
.journal{background:var(--navy)}
.journal-grid{display:grid;grid-template-columns:1fr;gap:clamp(1.376rem,2.58vw,2.236rem)}
.card{display:flex;flex-direction:column}
.card__art{aspect-ratio:3/2;overflow:hidden;margin-bottom:1.6rem}
.card__art img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.card:hover .card__art img{transform:scale(1.05)}
.card__cat{font-size:0.528rem;letter-spacing:0.22em;text-transform:uppercase;color:var(--champagne);margin:0 0 .8rem}
.card__title{font-family:var(--brand);font-size:clamp(1.056rem,1.76vw,1.408rem);letter-spacing:.06em;margin:0 0 .9rem;font-weight:400}
.card__excerpt{font-size:0.8096rem;font-weight:200;opacity:.75;line-height:1.85;margin:0 0 1.4rem}
.card .text-link{margin-top:auto}

/* ============================================================
   15. CONTINUE YOUR JOURNEY
   ============================================================ */
.journey{background:var(--navy-ink);text-align:center}
.journey .lede{margin:1.4rem auto 0;text-align:center}
.journey-grid{display:grid;grid-template-columns:1fr;gap:clamp(1.204rem,2.236vw,1.892rem);margin-top:clamp(2.5rem,5vw,4rem);text-align:left}
.jcard{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:20.64rem;padding:clamp(1.376rem,2.236vw,2.064rem);overflow:hidden;background:var(--navy-deep)}
.jcard__media{position:absolute;inset:0}
.jcard__media img{width:100%;height:100%;object-fit:cover;transition:transform 1.3s var(--ease)}
.jcard:hover .jcard__media img{transform:scale(1.06)}
.jcard__media::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(12,33,48,.94),rgba(12,33,48,.35) 65%,rgba(12,33,48,.15))}
.jcard__body{position:relative;z-index:2}
.jcard h3{font-family:var(--brand);font-size:clamp(1.144rem,1.848vw,1.496rem);letter-spacing:.08em;margin:0 0 .8rem;font-weight:400}
.jcard p{font-size:0.792rem;font-weight:200;opacity:.8;line-height:1.8;margin:0 0 1.6rem}

/* ============================================================
   16. CONTACT
   ============================================================ */
.contact{background:var(--navy);text-align:center}
.contact .lede{margin:0 auto 3rem;text-align:center}
.contact__title{margin-bottom:1.6rem}

/* ============================================================
   17. FOOTER
   Wordmark tile on the left, everything else in columns on the right.
   ============================================================ */
.site-footer{
  background:var(--navy);color:#FFFFFF;   /* #0C2130, straight off the logo */
  padding:clamp(1.29rem,2.064vw,1.892rem) var(--gutter) 0.946rem;
  border-top:var(--rule);
}
.foot__inner{max-width:67.08rem;margin-inline:auto}

.foot__top{
  display:grid;grid-template-columns:.7fr 1.3fr;
  /* The mark centres against the column block beside it rather than
     hanging from the top, so the two halves read as one band. */
  gap:clamp(1.204rem,2.58vw,2.58rem);align-items:center;
  padding-bottom:clamp(0.946rem,1.548vw,1.29rem);
  border-bottom:1px solid rgba(255,255,255,.12);
}

/* ---- the wordmark ---- */
.foot__tile{display:flex;align-items:center}
.foot a.wordmark--foot{
  position:static;translate:none;left:auto;top:auto;
  --track:.16em;
  display:inline-block;
  font-size:clamp(1.408rem,0.616rem + 2.992vw,3.344rem);
  padding-left:var(--track);
  color:#FFFFFF;opacity:1;line-height:1;
}
.foot a.wordmark--foot:hover{color:#FFFFFF}
.foot a.wordmark--foot .o{color:var(--champagne)}

/* ---- right hand columns ---- */
.foot__cols{
  display:grid;grid-template-columns:.85fr 1.15fr;
  gap:clamp(1.032rem,2.064vw,2.064rem);
}
.foot h3{
  font-size:0.5456rem;letter-spacing:0.2em;text-transform:uppercase;
  color:#FFFFFF;margin:0 0 .95rem;font-weight:400;
}
.foot ul{list-style:none;margin:0;padding:0}
.foot__cols nav ul{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(0.688rem,1.376vw,1.376rem)}
.foot li{margin-bottom:.34rem}
.foot a{font-size:0.704rem;font-weight:200;line-height:1.5;opacity:.75;transition:opacity .3s,color .3s}
.foot a:hover{opacity:1;color:var(--champagne)}

/* ---- contact rows with icons ---- */
.foot-contact ul li{
  display:grid;grid-template-columns:1.5rem 1fr;
  gap:0.602rem;align-items:start;margin-bottom:.65rem;
}
.foot-contact__icon{
  width:1.05rem;height:1.05rem;margin-top:.15rem;color:var(--champagne);
}
.foot-contact__icon svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.4}
.foot-contact__text{
  font-size:0.704rem;font-weight:200;line-height:1.5;opacity:.8;
}
.foot-contact a.foot-contact__text{opacity:.8}

/* ---- bottom bar ---- */
.foot__bottom{
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;
  gap:0.516rem 1.376rem;padding-top:0.774rem;
}
.foot__socials{display:flex;flex-wrap:wrap;gap:0.774rem;list-style:none;margin:0;padding:0}
.foot__socials a{
  display:grid;place-items:center;width:1.8rem;height:1.8rem;border-radius:50%;
  border:1px solid rgba(235,204,157,.35);color:var(--champagne);opacity:1;
  transition:background .45s var(--ease),color .45s var(--ease),border-color .45s var(--ease);
}
.foot__socials svg{width:.8rem;height:.8rem;fill:none;stroke:currentColor;stroke-width:1.3}
.foot__socials a:hover{background:var(--champagne);color:var(--navy);border-color:var(--champagne)}
.foot__legal{display:flex;flex-wrap:wrap;gap:1.204rem;list-style:none;margin:0;padding:0}
.foot__legal li{margin:0}
.foot__legal a{font-size:0.5808rem;letter-spacing:.14em}
.foot__copy{font-size:0.5808rem;letter-spacing:.12em;opacity:.68;margin:0}
.foot__note{
  font-size:0.5104rem;font-weight:200;line-height:1.55;opacity:.62;
  margin:.7rem 0 0;max-width:60.2rem;
}

/* The mark stays on the left down to 760px. Between there and 1000px
   the two right-hand columns stack instead, so the address has room
   to sit on two lines rather than five. */
/* Company and Contact sit side by side from 760px, matching the point
   where the mark moves left. The links only split into two sub-columns
   once there is width for it, otherwise they wrap mid-phrase. */
@media(max-width:945.14px){
  .foot__cols nav ul{grid-template-columns:1fr}
}
@media(max-width:652.74px){
  .foot__cols{grid-template-columns:1fr;gap:1.29rem}
}
@media(max-width:652.74px){
  .foot__top{grid-template-columns:1fr;gap:1.892rem}
}
@media(max-width:480.74px){
  .foot__cols nav ul{grid-template-columns:1fr}
  .foot__bottom{flex-direction:column;align-items:flex-start;gap:1.204rem}
}

/* ============================================================
   18. SINGLE / ARCHIVE / EDITOR CONTENT
   ============================================================ */
.entry{background:var(--bone);color:var(--navy)}
.entry__content{max-width:70ch;margin-inline:auto;font-weight:300;line-height:1.95}
.entry__content > * + *{margin-top:1.5rem}
.entry__content h2{font-family:var(--brand);font-size:clamp(1.496rem,2.64vw,2.112rem);letter-spacing:.05em;font-weight:400;margin-top:3rem}
.entry__content h3{font-family:var(--brand);font-size:clamp(1.188rem,1.936vw,1.584rem);letter-spacing:.05em;font-weight:400;margin-top:2.4rem}
.entry__content h4{font-size:0.6864rem;letter-spacing:0.17em;text-transform:uppercase;font-weight:600;margin-top:2rem}
.entry__content a{color:var(--navy);border-bottom:1px solid var(--champagne-d);transition:background .3s}
.entry__content a:hover{background:rgba(235,204,157,.3)}
.entry__content blockquote{
  margin:2.5rem 0;padding:1.376rem 0 1.376rem 1.72rem;border-left:1px solid var(--champagne-d);
  font-family:var(--brand);font-size:clamp(1.1rem,1.936vw,1.496rem);line-height:1.5;letter-spacing:.04em;
}
.entry__content blockquote p{margin:0}
.entry__content ul,.entry__content ol{padding-left:1.4rem}
.entry__content li{margin-bottom:.7rem}
.entry__content img,.entry__content figure{margin-block:2.5rem}
.entry__content figcaption{font-size:0.6864rem;letter-spacing:.1em;opacity:.6;margin-top:.8rem;text-align:center}
.entry__content table{width:100%;border-collapse:collapse;font-size:0.8096rem}
.entry__content th,.entry__content td{padding:0.774rem 0.86rem;border-bottom:1px solid rgba(27,65,86,.15);text-align:left}
.entry__content th{font-size:0.5984rem;letter-spacing:0.14em;text-transform:uppercase;font-weight:600}
.alignwide{max-width:min(946px,79.12vw);margin-inline:auto}
.alignfull{max-width:none;width:100%}
.alignleft{float:left;margin:0 2rem 1.5rem 0}
.alignright{float:right;margin:0 0 1.5rem 2rem}
.aligncenter{margin-inline:auto}
.wp-caption{max-width:100%}
.sticky{position:relative}

/* Project meta panel */
.proj-facts{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:0.86px;
  background:rgba(235,204,157,.22);margin-top:clamp(2rem,4vw,3rem);
}
.proj-facts div{background:var(--navy-deep);padding:1.376rem}
.proj-facts dt{font-size:0.528rem;letter-spacing:0.22em;text-transform:uppercase;color:var(--champagne);margin:0 0 .6rem}
.proj-facts dd{margin:0;font-size:0.88rem;font-weight:200}

.gallery-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(18rem,1fr));gap:clamp(0.688rem,1.376vw,1.204rem)}
.gallery-grid img{width:100%;aspect-ratio:3/2;object-fit:cover}

/* Pagination */
.pagination{display:flex;justify-content:center;gap:0.516rem;margin-top:clamp(3rem,6vw,5rem);flex-wrap:wrap}
.pagination .page-numbers{
  min-width:3rem;padding:0.688rem 0.86rem;text-align:center;border:1px solid rgba(235,204,157,.3);
  font-size:0.6336rem;letter-spacing:.16em;transition:background .35s,color .35s;
}
.pagination .page-numbers:hover,.pagination .current{background:var(--champagne);color:var(--navy);border-color:var(--champagne)}

/* Comments (kept minimal) */
.comment-respond{max-width:70ch;margin:4rem auto 0}
.comment-respond input,.comment-respond textarea{
  width:100%;padding:0.86rem;background:transparent;border:1px solid rgba(27,65,86,.3);
  font-family:var(--body);font-size:0.88rem;color:inherit;margin-bottom:1rem;
}

/* ============================================================
   19. RESPONSIVE — one continuous system
   ------------------------------------------------------------
   The page is laid out in rem, so the root font size below is the
   single control for how big everything is. It grows smoothly from
   a 360px phone up to a 4K display, which keeps the proportions
   identical on every device instead of freezing at a desktop size.

   Column tiers are explicit rather than auto-fit, so a given
   screen width always produces the same layout — no surprises
   between an iPad and a small laptop.
   ============================================================ */

/* ---------- Root scale ---------- */
/* One continuous curve rather than four steps. The stepped version
   jumped the root by half a pixel at 768 and 1200, and because the whole
   page is sized in rem, every heading and every gap jumped with it —
   visible as a snap while resizing.

   16px at 360 wide, rising to 24px at 2560, interpolated the whole way.
   The vw coefficient and the offset are derived from those two anchors:
     slope   = (24 - 16) / (2560 - 360) = 0.3636vw
     offset  = 16 - 0.3636 * 3.60       = 14.69px                        */
html{font-size:clamp(16px, 14.69px + 0.3636vw, 24px)}

/* ---------- Tier: 600px and up (large phone, tablet portrait) ---------- */
@media(min-width:600px){
  .steps{grid-template-columns:repeat(2,1fr)}
  .foot-grid{grid-template-columns:repeat(2,1fr)}
}

/* ---------- Tier: 700px and up ---------- */
@media(min-width:700px){
  .journal-grid{grid-template-columns:repeat(2,1fr)}
}

/* ---------- Tier: 900px and up (tablet landscape) ---------- */
@media(min-width:900px){
  .proj-grid{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(3,1fr)}
  .foot-grid{grid-template-columns:1.4fr 1fr 1fr}
}

/* ---------- Tier: 1000px and up (small laptop) ---------- */
@media(min-width:1000px){
  .intro__grid{grid-template-columns:1fr 1.15fr}
  .about__grid{grid-template-columns:.9fr 1.1fr}
  .svc-grid{grid-template-columns:repeat(3,1fr)}
  .journey-grid{grid-template-columns:repeat(3,1fr)}
}

/* ---------- Tier: 1280px and up (full desktop) ---------- */
@media(min-width:1280px){
  .steps{grid-template-columns:repeat(5,1fr)}
}

/* ---------- Header: shed the left cluster before the wordmark shrinks ---------- */
/* The "Menu" label used to be pulled out of the flow here, which took
   16px of header height with it in one frame. It stays in the flow and
   fades to zero width instead, so the header height is unaffected. */
@media(max-width:516px){
  .hdr-left .divider,.hdr-left .nav-btn--context{display:none}
  .nav-btn__label{width:0;overflow:hidden;opacity:0;white-space:nowrap}
  .wordmark{--track:.15em}
}
@media(max-width:344px){
  .wordmark{--track:.12em}

}
@media(max-width:296.7px){
  .wordmark{--track:.1em}
}

/* ---------- Small phones: tighten type that would otherwise crowd ---------- */
@media(max-width:411.94px){
  .eyebrow{letter-spacing:0.22em}
  .btn{padding:0.86rem 1.29rem;letter-spacing:0.16em}
  .overlay-nav__list a{letter-spacing:.06em}
  .statement__title{--track:.1em}
  .stat-row{gap:1.72rem}
}

/* ---------- Short and landscape screens ----------
   A phone held sideways is only ~390px tall. A full-height hero with
   desktop padding would clip, so it becomes an auto-height band. */
@media(max-height:447.2px) and (orientation:landscape){
  .hero{height:auto;min-height:0;aspect-ratio:16/7}
  .hero__ring{width:min(50vmin,18rem)}
  .scroll-cue{display:none}
  .feature{min-height:0}
  .overlay-nav__panel{padding-block:3.87rem 1.29rem}
  .overlay-nav__list a{font-size:clamp(1.056rem,3.52vw,1.584rem)}
  .section{padding-block:clamp(2.58rem,6.88vw,4.3rem)}
}

/* ---------- Very large displays ----------
   Beyond the point where the root scale caps out, hold the reading
   measure steady and let the margins take the extra width. Long lines
   are harder to read, not more impressive. */
@media(min-width:2200px){
  .lede{max-width:56ch}
  .entry__content{max-width:66ch}
  .hero__claim{max-width:29.24rem}
}

/* ---------- Print ---------- */
@media print{
  .site-header,.overlay-nav,.hero__media,.scroll-cue,.jcard__media,.feature__media{display:none!important}
  body{background:#fff;color:#000;font-size:11pt}
  .section{padding:1.29rem 0}
  .display,.hero__name{color:#0C2130}
}

/* ---------- Motion ---------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .rise{opacity:1;transform:none}
  html{scroll-behavior:auto}
}

/* ---------- Devices that cannot hover (touch) ----------
   Hover-revealed content must be visible by default, or half the
   copy is invisible on every phone and tablet. */
@media(hover:none){
  .proj__more{opacity:1;transform:none}
  .logo-row img{opacity:.85;filter:none}
}

/* ============================================================
   20. INTERIOR PAGES
   ============================================================ */

/* Without a full-bleed hero behind it, the fixed header has nothing to
   sit on — white text on a white section. It goes solid instead, and the
   content is pushed clear of it. */
body:not(.has-full-hero) .site-header{
  background:rgba(12,33,48,.94);
  border-bottom-color:rgba(235,204,157,.16);
}
body:not(.has-full-hero) .site-header::after{opacity:1}
body:not(.has-full-hero) #main{padding-top:clamp(3.956rem,3.096rem + 2.408vw,6.45rem)}

/* Two buttons side by side under a statement block. */
.statement__actions{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:clamp(0.516rem,1.204vw,0.86rem);
  margin-top:clamp(1.5rem,2.4vw,2rem);
}
.statement__actions .statement__cta{margin-top:0}

/* Our Team: the same cards as the departments, in a square grid. */
/* Four across at every width, exactly as the homepage cards are three
   across at every width. The cards inherit the homepage proportions
   rather than being square, so the two pages read at the same scale —
   a square card was noticeably taller, and on a tablet the two-column
   fallback made them nearly half the screen. */
.depts--team .depts__grid{grid-template-columns:repeat(4,1fr);max-width:55.04rem}

/* ============================================================
   21. REFINEMENT LAYER
   Luxury on the web is mostly restraint plus detail: a little more
   air around a little less content, finer hairlines, slower reveals,
   and type that opens up at display size while the small labels get
   wider. Nothing here adds ornament.
   ============================================================ */

/* ---- 1. Paper. A full-viewport grain overlay was the first idea and
   it cost two thirds of the frame budget — a blended layer over the
   whole page has to recomposite on every scrolled frame. The depth
   comes from gradients instead, which are painted once per section. ---- */
.about-band,
.depts:not(.depts--white):not(.depts--bone),
.pslider--navy,
.community--navy,
.site-footer{
  background-image:
    radial-gradient(120% 90% at 50% 0%, rgba(43,88,114,.55) 0%, rgba(12,33,48,0) 62%),
    linear-gradient(rgba(255,255,255,.02), rgba(0,0,0,.10));
}
.statement,
.depts--white,
.depts--bone,
.pslider:not(.pslider--navy),
.community:not(.community--navy){
  background-image:linear-gradient(rgba(27,65,86,.03), rgba(12,33,48,0) 40%);
}

/* ---- 2. A hairline above every section heading. The eye reads it as
   care taken, and it costs nothing. ---- */
.statement__inner::before,
.depts__head::before,
.pslider__head::before,
.community__title::before,
.about-band__title::before{
  content:'';display:block;width:2.4rem;height:1px;
  background:var(--accent,var(--champagne-d));opacity:.85;
  margin:0 0 clamp(1rem,1.8vw,1.5rem);
}
.statement__inner::before,
.depts__head::before,
.pslider__head::before{margin-inline:auto}

/* ---- 3. Display type opens up; micro labels tighten in the other
   direction. The gap between the two is what reads as editorial. ---- */
.statement__title{--track:.1em;font-size:clamp(1.32rem,0.704rem + 1.32vw,2.64rem)}
.about-band__title,
.depts__title,
.pslider__title,
.community__title{--track:.12em}
.pcard__loc,.proj__loc{letter-spacing:.26em;opacity:.85}
.foot h3,.dept__more,.social-row__name{letter-spacing:.24em}

/* ---- 4. Headings arrive from behind a line rather than fading in. ---- */
.statement__title.rise,
.about-band__title.rise,
.depts__title.rise,
.pslider__title.rise,
.community__title.rise{
  clip-path:inset(0 0 108% 0);
  transition:opacity 1.1s var(--ease-glide),
             transform 1.4s var(--ease-glide),
             clip-path 1.4s var(--ease-glide);
}
.statement__title.rise.is-in,
.about-band__title.rise.is-in,
.depts__title.rise.is-in,
.pslider__title.rise.is-in,
.community__title.rise.is-in{clip-path:inset(-30% -30% -30% -30%)}

/* ---- 5. Buttons: the fill wipes across rather than switching on, and
   the label opens slightly as it does. ---- */
.statement__cta,.about-band__cta,.pcard__cta{
  position:relative;overflow:hidden;isolation:isolate;
  border-width:1px;
  transition:color .55s var(--ease-glide),letter-spacing .55s var(--ease-glide),border-color .55s ease;
}
.statement__cta::before,.about-band__cta::before,.pcard__cta::before{
  content:'';position:absolute;inset:0;z-index:-1;
  background:var(--accent,var(--champagne));
  transform:scaleX(0);transform-origin:left center;
  transition:transform .65s var(--ease-glide);
}
.statement__cta:hover::before,.statement__cta:focus-visible::before,
.about-band__cta:hover::before,.about-band__cta:focus-visible::before,
.pcard__cta:hover::before,.pcard__cta:focus-visible::before{transform:scaleX(1)}
.statement__cta:hover,.about-band__cta:hover,.pcard__cta:hover{letter-spacing:.3em}
.statement__cta{--accent:var(--navy)}
.statement--navy .statement__cta{--accent:var(--champagne)}

/* ---- 6. Photography settles into colour rather than starting there.
   Done with a tint rather than a CSS filter: a filter on a large photo
   makes it repaint as it scrolls, which cost more than the effect was
   worth. ---- */
.pcard__art::after,.about-band__media::before{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:rgba(12,33,48,.2);
  transition:opacity 1.1s var(--ease-glide);
}
.pcard:hover .pcard__art::after,
.about-band__figure:hover .about-band__media::before{opacity:0}

/* ---- 7. A touch more air around each band, without loosening the
   text inside it. ---- */
.statement{padding-block:clamp(3.268rem,6.02vw,5.59rem)}
.depts,.pslider{padding-block:clamp(3.268rem,6.02vw,5.59rem)}
.community{padding-block:clamp(3.268rem,6.02vw,5.59rem)}

@media(prefers-reduced-motion:reduce){
  .statement__title.rise,.about-band__title.rise,.depts__title.rise,
  .pslider__title.rise,.community__title.rise{clip-path:none}
  .pcard__art::after,.about-band__media::before{display:none}
}


/* ============================================================
   22. DISPLAY SCALE
   The sizes from the serif draft, kept — but set in Poiret One.

   One adjustment was unavoidable. The serif was tracked at almost
   zero, because a high-contrast serif closes up naturally at display
   size. Poiret One is a wide, even geometric; at the same tracking
   the letters collide. It is set at .05em instead — enough to breathe,
   far tighter than the .14em it carried before.
   ============================================================ */
.statement__title,
.about-band__title,
.depts__title,
.pslider__title,
.community__title{
  --track:.05em;
  font-family:var(--brand);
  font-weight:400;
  text-transform:none;
  line-height:1.1;
  padding-left:0;
}
.statement__title{font-size:clamp(1.848rem,0.88rem + 2.728vw,4.048rem)}
.depts__title,
.pslider__title,
.community__title,
.about-band__title{font-size:clamp(1.584rem,0.836rem + 2.2vw,3.168rem)}

.pcard__name,.dept__name,.dept__label{
  --track:.05em;
  font-family:var(--brand);
  font-weight:400;text-transform:none;line-height:1.16;
}
.pcard__name{font-size:clamp(1.056rem,0.704rem + 1.012vw,1.672rem)}
/* Department names run long — "Construction & Project Management" has to
   sit inside a card a third of the row wide. Sized to fit rather than to
   match the headings, and set to break rather than spill if one ever
   exceeds the box. */
.dept__name,.dept__label{
  /* A single ramp across the whole range — every narrower tier used to
     restate its own size, which stepped at 515, 774 and 1200px. The
     floor is a hard 10px: three names across a phone screen gets very
     small, and tracked capitals stop being readable before body text
     does. */
  font-size:max(10px, clamp(0.44rem,0.34rem + 0.56vw,1.05rem));
  overflow-wrap:anywhere;
}

.overlay-nav__list a{
  font-family:var(--brand);
  font-weight:400;text-transform:none;letter-spacing:.05em;
  font-size:clamp(1.32rem,0.88rem + 1.672vw,2.464rem);
}

.foot h3{font-family:var(--brand);font-weight:400;letter-spacing:.2em;font-size:0.6336rem}

/* The ampersand carries a little more weight at this size. */
.statement__title .amp,
.about-band__title .amp{font-weight:400}

/* The section index (01, 02, 03) was removed. */


/* ============================================================
   23. LEGIBILITY FLOOR
   The scale-down took several tracked micro-labels to 6–8px, which
   is below the point where widely letterspaced uppercase stays
   readable. These are held at a minimum instead; everything else
   keeps the smaller scale.
   ============================================================ */
.dept__more,
.pcard__cta,
.about-band__cta,
.statement__cta,
.pcard__loc,
.proj__loc,
.contact-btn__tip,
.overlay-nav__tagline,
.social-row__name,
.foot__note,
.foot__copy,
.foot__legal a,
.foot-contact dt,
.eyebrow,
.scroll-cue{font-size:max(0.62rem, 10px)}

.foot__note{font-size:max(0.6rem, 10px);line-height:1.65}
.pcard__loc,.proj__loc{font-size:max(0.58rem, 10px)}

/* the last two: the caption role line and the menu's social links */
.about-band__caption{font-size:max(0.58rem, 10px)}
.about-band__caption span{font-size:max(0.55rem, 9.5px)}
.socials a{font-size:max(0.58rem, 10px)}
.about-band__text,.dept__desc,.pcard__desc,.statement__body,
.depts__sub,.pslider__sub,.community__sub{font-size:max(0.8rem, 13px)}

/* ============================================================
   24. FINAL PASS
   Four changes: the darker blue everywhere, tighter wordmark
   tracking, smaller type, justified body copy, uppercase titles.
   ============================================================ */

/* ---- 1. The blue ----
   Everything that was West One blue (#0C2130) becomes the header's
   darker blue (#0C2130). The old mid-navy is kept only for the soft
   radial lift inside the darker sections, which is what stops a very
   dark ground from reading flat. */
:root{
  --navy:#0C2130;
  --navy-deep:#0A1B27;
  --navy-ink:#071520;
  --navy-lift:#1B4156;
}
.about-band,
.depts:not(.depts--white):not(.depts--bone),
.pslider--navy,
.community--navy{
  background-image:
    radial-gradient(120% 90% at 50% 0%, rgba(27,65,86,.62) 0%, rgba(12,33,48,0) 64%),
    linear-gradient(rgba(255,255,255,.02), rgba(0,0,0,.10));
}
/* The footer takes the flat blue. It carried the radial lift, which made
   its top read a shade lighter than every other navy band above it. */
.site-footer{background-image:none}
.hero{
  background:radial-gradient(120% 90% at 50% 15%, #12303F 0%, var(--navy) 45%, var(--navy-ink) 100%);
}

/* ---- 2. The wordmark ----
   Tracking cut hard. Poiret One is wide enough that the letters still
   read as separate at this spacing. The optical centring correction is
   tied to the same variable, so it follows automatically. */
.wordmark{--track:.06em}
@media(max-width:600px){ .wordmark{--track:.05em} }
@media(max-width:400px){ .wordmark{--track:.04em} }
.wordmark--foot,.foot a.wordmark--foot{--track:.06em}

/* ---- 3. Smaller, tighter type ----
   Display sizes come down again and the leading closes with them. The
   micro-labels keep their floor, so nothing drops below legibility. */
.statement__title{font-size:clamp(1.5rem,.85rem + 1.9vw,2.9rem);line-height:1.12}
.depts__title,.pslider__title,.community__title,.about-band__title{
  font-size:clamp(1.3rem,.8rem + 1.5vw,2.35rem);line-height:1.14;
}
.pcard__name{font-size:clamp(.95rem,.7rem + .72vw,1.4rem);line-height:1.18}
.dept__name,.dept__label{font-size:clamp(.72rem,.5rem + .5vw,1.05rem)}
.overlay-nav__list a{font-size:clamp(1.15rem,.85rem + 1.2vw,2rem)}
.foot a.wordmark--foot{font-size:clamp(1.15rem,.75rem + 1.1vw,2.6rem)}

/* ---- 4. Justified body copy ----
   Justification only looks right with hyphenation; without it the word
   spacing opens into rivers. Centred blocks stay centred — justifying a
   centred column would fight the centring. */
.statement__body,
.about-band__text,
.entry__content p,
.foot__note{
  text-align:justify;
  text-justify:inter-word;
  hyphens:auto;
  -webkit-hyphens:auto;
}
.statement{text-align:left}
.statement__inner{max-width:44rem}
.statement__title,.statement__actions,.statement__inner::after{text-align:left}
.statement__actions{justify-content:flex-start}
/* These were pushed left during the justification pass and never put
   back when the rest of the page was centred. */
.depts__head,.pslider__head{text-align:center;margin-inline:auto;max-width:46rem}
.depts__head::before,.pslider__head::before{margin-inline:auto}
.depts__sub,.pslider__sub{text-align:justify;hyphens:auto;-webkit-hyphens:auto}
.depts__head::after,.pslider__head::after{text-align:left}
.community__sub{text-align:justify;hyphens:auto;-webkit-hyphens:auto}
.trust,.contact,.journey{text-align:left}

/* Justification needs room. Below this the lines are short enough that
   the word spacing opens into visible rivers, so it reverts to ragged. */
@media(max-width:680px){
  .statement__body,.about-band__text,.depts__sub,.pslider__sub,
  .community__sub,.foot__note,.entry__content p{text-align:left}
}

/* ---- 5. Titles in upper case ---- */
.statement__title,
.about-band__title,
.depts__title,
.pslider__title,
.community__title,
.pcard__name,
.dept__name,
.dept__label,
.overlay-nav__list a,
.entry__content h2,
.entry__content h3,
.card__title,
.proj__name{
  text-transform:uppercase;
}
/* Uppercase needs a little more tracking than mixed case to stay open. */
.statement__title,.about-band__title,.depts__title,
.pslider__title,.community__title{--track:.08em}
.pcard__name,.dept__name,.dept__label{--track:.07em;letter-spacing:.07em}
.overlay-nav__list a{letter-spacing:.07em}

/* The About column is a fixed share of a two-column band, so between
   680 and 900 it is narrower than the page and needs its own threshold. */
@media(max-width:899px){
  .about-band__text{text-align:left;hyphens:manual;-webkit-hyphens:manual}
}

/* ============================================================
   25. COMMITMENTS
   A numbered list rather than a grid of cards: the content is
   sequential prose, and a plate number beside each line reads as a
   document rather than a brochure.
   ============================================================ */
.commit{
  --paper:var(--navy);
  --ink:#FFFFFF;
  --accent:var(--champagne);
  background:var(--paper);color:var(--ink);
  padding:clamp(2.6rem,5.6vw,4.7rem) var(--gutter);
}
.commit--white{--paper:#FFFFFF;--ink:var(--navy);--accent:var(--champagne-d)}
.commit--bone{--paper:var(--bone);--ink:var(--navy);--accent:var(--champagne-d)}

.commit__inner{max-width:58rem;margin-inline:auto}

.commit__head{max-width:40rem;margin-bottom:clamp(1.6rem,3vw,2.6rem)}
.commit__head::before{
  content:'';display:block;width:2rem;height:1px;
  background:var(--accent);opacity:.85;margin-bottom:clamp(.8rem,1.5vw,1.2rem);
}
.commit__title{
  --track:.08em;
  font-family:var(--brand);font-weight:400;color:var(--accent);
  font-size:clamp(1.3rem,.8rem + 1.5vw,2.35rem);
  letter-spacing:var(--track);text-transform:uppercase;
  line-height:1.14;margin:0;
}
.commit__sub{
  font-size:max(.72rem,12px);font-weight:200;line-height:1.75;opacity:.82;
  margin:.8rem 0 0;text-align:justify;hyphens:auto;-webkit-hyphens:auto;
}

.commit__list{list-style:none;margin:0;padding:0;border-top:1px solid rgba(235,204,157,.18)}
.commit--white .commit__list,.commit--bone .commit__list{border-top-color:rgba(27,65,86,.16)}

.commit__item{
  display:grid;grid-template-columns:2.6rem 1fr;
  gap:clamp(.8rem,1.8vw,1.6rem);
  padding:clamp(.9rem,1.8vw,1.4rem) 0;
  border-bottom:1px solid rgba(235,204,157,.18);
}
.commit--white .commit__item,.commit--bone .commit__item{border-bottom-color:rgba(27,65,86,.16)}

.commit__item-title{
  --track:.07em;
  font-family:var(--brand);font-weight:400;
  font-size:clamp(.85rem,.6rem + .55vw,1.15rem);
  letter-spacing:var(--track);text-transform:uppercase;
  line-height:1.2;margin:0;
}
.commit__text{
  font-size:max(.72rem,12px);font-weight:200;line-height:1.7;opacity:.8;
  margin:.5rem 0 0;text-align:justify;hyphens:auto;-webkit-hyphens:auto;
}

@media(max-width:680px){
  .commit__sub,.commit__text{text-align:left;hyphens:manual;-webkit-hyphens:manual}
  .commit__item{grid-template-columns:2rem 1fr}
}

/* ============================================================
   26. ENVIRONMENT PAGE
   ============================================================ */

/* ---- Hero: same video treatment as the homepage, with a line of
   copy sitting beneath it rather than over it. ---- */
.env-hero{
  position:relative;height:78vh;height:78svh;min-height:24rem;
  overflow:hidden;background:var(--navy-ink);
}
.env-hero__media{position:absolute;inset:0;z-index:0}
.env-hero__media video,.env-hero__media img{width:100%;height:100%;object-fit:cover}
.env-hero__media svg{width:100%;height:100%}
.env-hero__tint{display:none}
.env-hero__grade{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to bottom, rgba(12,33,48,.62) 0%, rgba(12,33,48,.16) 34%,
                             rgba(12,33,48,.28) 66%, rgba(12,33,48,.9) 100%);
}

.env-claim{
  background:var(--navy);color:#FFFFFF;
  padding:clamp(1.8rem,3.6vw,3.2rem) var(--gutter);
}
.env-claim__inner{max-width:58rem;margin-inline:auto}
.env-claim__inner::before{
  content:'';display:block;width:2rem;height:1px;
  background:var(--champagne);opacity:.85;margin-bottom:clamp(.7rem,1.3vw,1.1rem);
}
.env-claim h1{
  --track:.08em;
  font-family:var(--brand);font-weight:400;
  font-size:clamp(1.3rem,.8rem + 1.5vw,2.35rem);
  letter-spacing:var(--track);text-transform:uppercase;
  line-height:1.14;margin:0;
}

/* ---- Wellbeing: a compact band, image slideshow on one side ---- */
.wellbeing{
  --paper:#FFFFFF;--ink:var(--navy);--accent:var(--champagne-d);
  background:var(--paper);color:var(--ink);
  padding:clamp(2.4rem,5vw,4.2rem) var(--gutter);
}
.wellbeing--navy{--paper:var(--navy);--ink:#FFFFFF;--accent:var(--champagne)}
.wellbeing--bone{--paper:var(--bone,#F4F1EC)}

.wellbeing__inner{
  max-width:66rem;margin-inline:auto;
  display:grid;grid-template-columns:1fr 1.15fr;
  gap:clamp(1.2rem,3vw,2.6rem);align-items:center;
}
.wellbeing__copy::before{
  content:'';display:block;width:2rem;height:1px;
  background:var(--accent);opacity:.85;margin-bottom:clamp(.7rem,1.3vw,1.1rem);
}
.wellbeing__title{
  --track:.08em;
  font-family:var(--brand);font-weight:400;color:var(--accent);
  font-size:clamp(1.1rem,.75rem + 1.1vw,1.85rem);
  letter-spacing:var(--track);text-transform:uppercase;line-height:1.16;margin:0;
}
.wellbeing__text{
  font-size:max(.72rem,12px);font-weight:200;line-height:1.7;opacity:.84;
  margin:.7rem 0 0;text-align:justify;hyphens:auto;-webkit-hyphens:auto;
}

/* The slideshow: slides stacked, cross-fading. No layout shift. */
.slideshow{position:relative;overflow:hidden;aspect-ratio:16/9;background:var(--navy-ink)}
.slideshow__slide{
  position:absolute;inset:0;opacity:0;
  transition:opacity 1.4s var(--ease-glide);
}
.slideshow__slide.is-on{opacity:1}
.slideshow__slide img,.slideshow__slide svg{width:100%;height:100%;object-fit:cover}
.slideshow__dots{
  position:absolute;left:0;right:0;bottom:.7rem;z-index:3;
  display:flex;justify-content:center;gap:.4rem;
}
.slideshow__dots button{
  width:1.4rem;height:2px;border:0;padding:0;cursor:pointer;
  background:rgba(255,255,255,.35);transition:background .5s ease;
}
.slideshow__dots button[aria-current="true"]{background:var(--champagne)}

@media(max-width:759px){
  .wellbeing__inner{grid-template-columns:1fr}
  .wellbeing__text{text-align:left;hyphens:manual;-webkit-hyphens:manual}
}

/* ---- Policies: full-bleed bands, each on its own image ---- */
.policy{
  position:relative;overflow:hidden;
  padding:clamp(2.6rem,5.6vw,4.8rem) var(--gutter);
  color:#FFFFFF;background:var(--navy-ink);
}
.policy__media{position:absolute;inset:0;z-index:0}
.policy__media img,.policy__media svg{width:100%;height:100%;object-fit:cover}
.policy__veil{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(100deg, rgba(7,21,32,.95) 0%, rgba(7,21,32,.86) 45%, rgba(7,21,32,.55) 100%);
}
.policy:nth-of-type(even) .policy__veil{
  background:linear-gradient(260deg, rgba(7,21,32,.95) 0%, rgba(7,21,32,.86) 45%, rgba(7,21,32,.55) 100%);
}
.policy__inner{position:relative;z-index:2;max-width:60rem;margin-inline:auto}
.policy__body{max-width:38rem}
.policy:nth-of-type(even) .policy__body{margin-left:auto}
.policy__body::before{
  content:'';display:block;width:2rem;height:1px;
  background:var(--champagne);opacity:.85;margin-bottom:clamp(.7rem,1.3vw,1.1rem);
}
.policy__title{
  --track:.08em;
  font-family:var(--brand);font-weight:400;
  font-size:clamp(1.15rem,.78rem + 1.2vw,1.95rem);
  letter-spacing:var(--track);text-transform:uppercase;line-height:1.16;margin:0;
}
.policy__text{
  font-size:max(.72rem,12px);font-weight:200;line-height:1.75;opacity:.86;
  margin:.8rem 0 0;text-align:justify;hyphens:auto;-webkit-hyphens:auto;
}
.policy__text + .policy__text{margin-top:.6rem}

@media(max-width:680px){
  .policy__text{text-align:left;hyphens:manual;-webkit-hyphens:manual}
  .policy__veil{background:linear-gradient(rgba(7,21,32,.82), rgba(7,21,32,.94))}
  .policy:nth-of-type(even) .policy__veil{background:linear-gradient(rgba(7,21,32,.82), rgba(7,21,32,.94))}
  .policy:nth-of-type(even) .policy__body{margin-left:0}
}
@media(max-height:520px) and (orientation:landscape){
  .env-hero{height:auto;min-height:0;aspect-ratio:16/7}
}

/* ============================================================
   26. ENVIRONMENT PAGE
   ============================================================ */

/* ---- 1. Video band with a caption beneath ----
   Shorter than the homepage hero: this page has to get to its content,
   so the video is a band rather than a full screen. */
.envhero{
  /* Full screen, as on the homepage. svh rather than vh so a phone's
     collapsing address bar does not leave a gap at the bottom. */
  position:relative;height:100vh;height:100svh;min-height:30rem;
  overflow:hidden;background:var(--navy-ink);
  display:grid;place-items:end center;
}
.envhero__media{position:absolute;inset:0;z-index:0}
.envhero__media video,.envhero__media img{width:100%;height:100%;object-fit:cover}
.envhero__tint{display:none}
.envhero__grade{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to bottom,rgba(7,21,32,.7) 0%,rgba(7,21,32,.15) 34%,rgba(7,21,32,.9) 100%);
}
.envhero__caption{
  position:relative;z-index:2;width:100%;
  padding:0 var(--gutter) clamp(1.6rem,3.4vw,3rem);
  max-width:64rem;
}
.envhero__caption::before{
  content:'';display:block;width:2rem;height:1px;
  background:var(--champagne);opacity:.85;margin-bottom:clamp(.7rem,1.4vw,1.1rem);
}
.envhero__title{
  --track:.08em;
  font-family:var(--brand);font-weight:400;color:#FFFFFF;
  font-size:clamp(1.25rem,.8rem + 1.45vw,2.3rem);
  letter-spacing:var(--track);text-transform:uppercase;
  line-height:1.14;margin:0;
}

/* ---- 2. Wellbeing band: copy left, slideshow right ---- */
.wellbeing{
  --paper:#FFFFFF;--ink:var(--navy);--accent:var(--champagne-d);
  background:var(--paper);color:var(--ink);
  padding:clamp(2.4rem,5vw,4.2rem) var(--gutter);
}
.wellbeing--navy{--paper:var(--navy);--ink:#FFFFFF;--accent:var(--champagne)}
.wellbeing--bone{--paper:var(--bone,#F4F1EC)}

.wellbeing__inner{
  max-width:62rem;margin-inline:auto;
  display:grid;grid-template-columns:1fr 1.15fr;
  gap:clamp(1.2rem,3vw,2.6rem);align-items:center;
}
.wellbeing__copy::before{
  content:'';display:block;width:2rem;height:1px;
  background:var(--accent);opacity:.85;margin-bottom:clamp(.7rem,1.4vw,1.1rem);
}
.wellbeing__title{
  --track:.08em;
  font-family:var(--brand);font-weight:400;color:var(--accent);
  font-size:clamp(1.1rem,.75rem + 1.1vw,1.8rem);
  letter-spacing:var(--track);text-transform:uppercase;line-height:1.16;margin:0;
}
.wellbeing__text{
  font-size:max(.72rem,12px);font-weight:200;line-height:1.7;opacity:.84;
  margin:.7rem 0 0;text-align:justify;hyphens:auto;-webkit-hyphens:auto;
}

/* The slideshow: frames stacked, cross-fading. No layout thrash — only
   opacity changes, so it costs nothing while scrolling. */
.slideshow{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--navy-ink)}
.slideshow__frame{
  position:absolute;inset:0;opacity:0;
  transition:opacity 1.4s var(--ease-glide);
}
.slideshow__frame.is-on{opacity:1}
.slideshow__frame img,.slideshow__frame svg{width:100%;height:100%;object-fit:cover;display:block}
.slideshow__dots{
  position:absolute;left:0;right:0;bottom:.7rem;z-index:3;
  display:flex;justify-content:center;gap:.5rem;
}
.slideshow__dots button{
  width:1.4rem;height:1px;padding:0;border:0;cursor:pointer;
  background:rgba(255,255,255,.4);transition:background .5s ease;
}
.slideshow__dots button[aria-current="true"]{background:var(--champagne)}

@media(max-width:759px){
  .wellbeing__inner{grid-template-columns:1fr}
  .wellbeing__text{text-align:left;hyphens:manual;-webkit-hyphens:manual}
}

/* ---- 3. Policies: full-bleed image bands, text over ---- */
.policies{background:var(--navy);color:#FFFFFF}
.policy{
  position:relative;overflow:hidden;
  min-height:clamp(17rem,40vh,24rem);
  display:grid;align-items:center;
  border-bottom:1px solid rgba(235,204,157,.14);
}
.policy:last-child{border-bottom:0}
.policy__media{position:absolute;inset:0;z-index:0}
.policy__media img,.policy__media svg{width:100%;height:100%;object-fit:cover;display:block}
/* The scrim runs from the side the text sits on, so the copy always has
   a dark ground under it and the photograph stays visible opposite. */
.policy__veil{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(100deg, rgba(7,21,32,.94) 0%, rgba(7,21,32,.82) 38%, rgba(7,21,32,.42) 72%, rgba(7,21,32,.3) 100%);
}
.policy:nth-child(even) .policy__veil{
  background:linear-gradient(260deg, rgba(7,21,32,.94) 0%, rgba(7,21,32,.82) 38%, rgba(7,21,32,.42) 72%, rgba(7,21,32,.3) 100%);
}
.policy__inner{
  position:relative;z-index:2;
  width:100%;max-width:66rem;margin-inline:auto;
  padding:clamp(1.8rem,3.6vw,3rem) var(--gutter);
}
.policy__body{max-width:33rem}
.policy:nth-child(even) .policy__body{margin-left:auto}
.policy__title{
  --track:.08em;
  font-family:var(--brand);font-weight:400;
  font-size:clamp(1.1rem,.75rem + 1.15vw,1.85rem);
  letter-spacing:var(--track);text-transform:uppercase;
  line-height:1.16;margin:0;
}
.policy__text{
  font-size:max(.72rem,12px);font-weight:200;line-height:1.7;opacity:.86;
  margin:.7rem 0 0;text-align:justify;hyphens:auto;-webkit-hyphens:auto;
}
.policy__text + .policy__text{margin-top:.6rem}

@media(max-width:759px){
  .policy__veil,.policy:nth-child(even) .policy__veil{
    background:linear-gradient(to top, rgba(7,21,32,.95) 0%, rgba(7,21,32,.8) 55%, rgba(7,21,32,.55) 100%);
  }
  .policy__body,.policy:nth-child(even) .policy__body{max-width:none;margin-left:0}
  .policy__text{text-align:left;hyphens:manual;-webkit-hyphens:manual}
}

/* The wellbeing copy sits in a column narrower than the page between
   680 and 900, so justification opens rivers there even though the
   page-level threshold has passed. */
@media(max-width:899px){
  .wellbeing__text{text-align:left;hyphens:manual;-webkit-hyphens:manual}
}

/* ============================================================
   27. ENVIRONMENT — reference architecture
   Video with caption → display headline → intro prose → alternating
   text/image bands → commitment strip → projects.
   ============================================================ */

/* ---- Display headline under the video ---- */
.envlead{
  --paper:#FFFFFF;--ink:var(--navy);--accent:var(--champagne-d);
  background:var(--paper);color:var(--ink);
  padding:clamp(2.4rem,5vw,4.4rem) var(--gutter) clamp(1.6rem,3vw,2.6rem);
  text-align:center;
}
.envlead--bone{--paper:var(--bone,#F4F1EC)}
.envlead__inner{max-width:52rem;margin-inline:auto}
.envlead__title{
  --track:.07em;
  font-family:var(--brand);font-weight:400;
  font-size:clamp(1.35rem,.8rem + 1.75vw,2.7rem);
  letter-spacing:var(--track);text-transform:uppercase;
  line-height:1.16;margin:0;
}
.envlead__kicker{
  font-size:max(.6rem,10px);letter-spacing:.24em;text-transform:uppercase;
  color:var(--accent);margin:clamp(.8rem,1.6vw,1.2rem) 0 0;
}

/* ---- Intro prose: two columns of body copy, no image ---- */
.envintro{
  --paper:#FFFFFF;--ink:var(--navy);--accent:var(--champagne-d);
  background:var(--paper);color:var(--ink);
  padding:clamp(1.6rem,3.4vw,3rem) var(--gutter) clamp(2.4rem,5vw,4.2rem);
}
.envintro--bone{--paper:var(--bone,#F4F1EC)}
.envintro__inner{max-width:56rem;margin-inline:auto}
.envintro__title{
  --track:.08em;
  font-family:var(--brand);font-weight:400;color:var(--accent);
  font-size:clamp(1.05rem,.75rem + 1vw,1.6rem);
  letter-spacing:var(--track);text-transform:uppercase;line-height:1.18;margin:0 0 clamp(.8rem,1.6vw,1.2rem);
}
.envintro__cols{columns:2;column-gap:clamp(1.6rem,3.4vw,3rem)}
.envintro__cols p{
  font-size:max(.72rem,12px);font-weight:200;line-height:1.75;opacity:.84;
  margin:0 0 .9rem;text-align:justify;hyphens:auto;-webkit-hyphens:auto;
  break-inside:avoid;
}
@media(max-width:759px){
  .envintro__cols{columns:1}
  .envintro__cols p{text-align:left;hyphens:manual;-webkit-hyphens:manual}
}

/* ---- Alternating text / image bands ---- */
.envband{
  --paper:#FFFFFF;--ink:var(--navy);--accent:var(--champagne-d);
  background:var(--paper);color:var(--ink);
  padding:clamp(1.8rem,3.6vw,3.2rem) var(--gutter);
}
.envband--bone{--paper:var(--bone,#F4F1EC)}
.envband--navy{--paper:var(--navy);--ink:#FFFFFF;--accent:var(--champagne)}
.envband__inner{
  max-width:62rem;margin-inline:auto;
  display:grid;grid-template-columns:1fr 1.05fr;
  gap:clamp(1.2rem,3vw,2.8rem);align-items:center;
}
/* Every other band puts the picture on the left. Set explicitly rather
   than with nth-of-type, which counts every section on the page and so
   depends on what happens to sit above. */
.envband--flip .envband__copy{order:2}
.envband__copy::before{
  content:'';display:block;width:2rem;height:1px;
  background:var(--accent);opacity:.85;margin-bottom:clamp(.6rem,1.2vw,1rem);
}
.envband__title{
  --track:.08em;
  font-family:var(--brand);font-weight:400;color:var(--accent);
  font-size:clamp(1.05rem,.72rem + 1.05vw,1.7rem);
  letter-spacing:var(--track);text-transform:uppercase;line-height:1.18;margin:0;
}
.envband__text{
  font-size:max(.72rem,12px);font-weight:200;line-height:1.72;opacity:.84;
  margin:.7rem 0 0;text-align:justify;hyphens:auto;-webkit-hyphens:auto;
}
.envband__text + .envband__text{margin-top:.6rem}
.envband__media{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--navy-ink)}
.envband__media img,.envband__media svg{width:100%;height:100%;object-fit:cover;display:block}

@media(max-width:759px){
  .envband__inner{grid-template-columns:1fr}
  .envband--flip .envband__copy{order:0}
  .envband__text{text-align:left;hyphens:manual;-webkit-hyphens:manual}
}

/* ---- Commitment strip: a pledge, then captioned image cards ---- */
.pledge{
  --paper:var(--navy);--ink:#FFFFFF;--accent:var(--champagne);
  background:var(--paper);color:var(--ink);
  padding:clamp(2.4rem,5vw,4.2rem) var(--gutter);
}
.pledge--white{--paper:#FFFFFF;--ink:var(--navy);--accent:var(--champagne-d)}
.pledge--bone{--paper:var(--bone,#F4F1EC);--ink:var(--navy);--accent:var(--champagne-d)}
.pledge__inner{max-width:62rem;margin-inline:auto}
.pledge__head{text-align:center;max-width:44rem;margin:0 auto clamp(1.6rem,3vw,2.4rem)}
.pledge__head::before{
  content:'';display:block;width:2rem;height:1px;background:var(--accent);
  opacity:.85;margin:0 auto clamp(.7rem,1.4vw,1.1rem);
}
.pledge__title{
  --track:.08em;
  font-family:var(--brand);font-weight:400;color:var(--accent);
  font-size:clamp(1.05rem,.75rem + 1vw,1.6rem);
  letter-spacing:var(--track);text-transform:uppercase;line-height:1.18;margin:0;
}
.pledge__text{
  font-size:max(.74rem,12px);font-weight:200;line-height:1.75;opacity:.86;
  margin:.8rem 0 0;
}
.pledge__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.6rem,1.4vw,1.3rem)}
.pledge__item{display:block}
.pledge__art{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--navy-ink)}
.pledge__art img,.pledge__art svg{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.3s var(--ease-glide)}
.pledge__item:hover .pledge__art img,.pledge__item:hover .pledge__art svg{transform:scale(1.04)}
.pledge__label{
  --track:.07em;
  font-family:var(--brand);font-weight:400;
  font-size:clamp(.72rem,.55rem + .38vw,1rem);
  letter-spacing:var(--track);text-transform:uppercase;line-height:1.2;
  margin:.7rem 0 0;
}
@media(max-width:559px){
  .pledge__grid{grid-template-columns:1fr}
}

/* A phone held sideways is only ~390px tall; a full-height band would
   crop the caption, so it becomes a proportional band there. */
@media(max-height:520px) and (orientation:landscape){
  .envhero{height:auto;min-height:0;aspect-ratio:16/7}
}

/* A phone held sideways is only ~390px tall, so the full-height band
   becomes a 16:7 letterbox rather than clipping the caption. */
@media(max-height:520px) and (orientation:landscape){
  .envhero{height:auto;min-height:0;aspect-ratio:16/7}
}

/* The scroll cue on a full-height band sits centred at the foot. */
.envhero__cue{position:absolute;left:50%;translate:-50% 0;bottom:1.6rem;z-index:3;margin-bottom:0}

/* ============================================================
   28. CONTACT PAGE
   ============================================================ */
.contactband{
  --paper:#FFFFFF;--ink:var(--navy);--accent:var(--champagne-d);
  background:var(--paper);color:var(--ink);
  padding:clamp(2.4rem,5vw,4.2rem) var(--gutter);
}
.contactband--navy{--paper:var(--navy);--ink:#FFFFFF;--accent:var(--champagne)}
.contactband--bone{--paper:var(--bone,#F4F1EC)}

.contactband__inner{
  max-width:62rem;margin-inline:auto;
  display:grid;grid-template-columns:1fr 1.15fr;
  gap:clamp(1.2rem,3vw,2.8rem);align-items:start;
}
.contactband__copy::before{
  content:'';display:block;width:2rem;height:1px;
  background:var(--accent);opacity:.85;margin-bottom:clamp(.6rem,1.2vw,1rem);
}
.contactband__title{
  --track:.08em;
  font-family:var(--brand);font-weight:400;color:var(--accent);
  font-size:clamp(1.05rem,.72rem + 1.05vw,1.7rem);
  letter-spacing:var(--track);text-transform:uppercase;line-height:1.18;margin:0;
}

/* Coordinates read as a survey reference: monospaced tabular figures. */
.contactband__coords{
  font-size:max(.68rem,11px);letter-spacing:.14em;
  font-variant-numeric:tabular-nums;
  opacity:.7;margin:.7rem 0 0;
}
.contactband__maplink{
  display:inline-flex;align-items:center;gap:.6rem;
  margin-top:.9rem;
  font-size:max(.6rem,10px);letter-spacing:.24em;text-transform:uppercase;
  color:var(--accent);border-bottom:1px solid currentColor;padding-bottom:.25rem;
  transition:opacity .4s ease;
}
.contactband__maplink:hover{opacity:.7}

.contactband__list{list-style:none;margin:clamp(1.2rem,2.4vw,2rem) 0 0;padding:0;
  border-top:1px solid rgba(27,65,86,.16)}
.contactband--navy .contactband__list{border-top-color:rgba(235,204,157,.18)}
.contactband__list li{
  display:grid;grid-template-columns:1.4rem 1fr;
  gap:.75rem;align-items:start;
  padding:clamp(.65rem,1.3vw,.95rem) 0;
  border-bottom:1px solid rgba(27,65,86,.16);
}
.contactband--navy .contactband__list li{border-bottom-color:rgba(235,204,157,.18)}
.contactband__icon{width:1rem;height:1rem;margin-top:.15rem;color:var(--accent)}
.contactband__icon svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.4}
.contactband__value{font-size:max(.74rem,12px);font-weight:200;line-height:1.65;opacity:.85}
a.contactband__value:hover{opacity:1;color:var(--accent)}

/* Map. An iframe is only loaded once the user asks for it, so the page
   does not pull a third-party script and a set of cookies on load. */
.mapframe{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--navy-ink)}
.mapframe iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.mapframe__still{position:absolute;inset:0}
.mapframe__still img,.mapframe__still svg{width:100%;height:100%;object-fit:cover;display:block}
.mapframe__load{
  position:absolute;inset:0;z-index:2;display:grid;place-items:center;
  background:rgba(12,33,48,.55);border:0;cursor:pointer;
  font-size:max(.6rem,10px);letter-spacing:.24em;text-transform:uppercase;
  color:var(--champagne);transition:background .5s ease;
}
.mapframe__load:hover{background:rgba(12,33,48,.35)}
.mapframe.is-live .mapframe__load,.mapframe.is-live .mapframe__still{display:none}

@media(max-width:759px){
  .contactband__inner{grid-template-columns:1fr}
}

/* ---- Join us strip ---- */
.joinus{
  --paper:var(--navy);--ink:#FFFFFF;--accent:var(--champagne);
  background:var(--paper);color:var(--ink);
  padding:clamp(2.4rem,5vw,4.2rem) var(--gutter);
  text-align:center;
}
.joinus--white{--paper:#FFFFFF;--ink:var(--navy);--accent:var(--champagne-d)}
.joinus--bone{--paper:var(--bone,#F4F1EC);--ink:var(--navy);--accent:var(--champagne-d)}
.joinus__inner{max-width:42rem;margin-inline:auto}
.joinus__inner::before{
  content:'';display:block;width:2rem;height:1px;background:var(--accent);
  opacity:.85;margin:0 auto clamp(.7rem,1.4vw,1.1rem);
}
.joinus__title{
  --track:.08em;
  font-family:var(--brand);font-weight:400;color:var(--accent);
  font-size:clamp(1.05rem,.75rem + 1vw,1.6rem);
  letter-spacing:var(--track);text-transform:uppercase;line-height:1.18;margin:0;
}
.joinus__text{
  font-size:max(.74rem,12px);font-weight:200;line-height:1.75;opacity:.86;
  margin:.8rem 0 0;
}

/* ============================================================
   29. RECRUITMENT
   ============================================================ */
.recruit{
  --paper:#FFFFFF;--ink:var(--navy);--accent:var(--champagne-d);
  background:var(--paper);color:var(--ink);
  padding:clamp(2.4rem,5vw,4.2rem) var(--gutter);
}
.recruit--navy{--paper:var(--navy);--ink:#FFFFFF;--accent:var(--champagne)}
.recruit--bone{--paper:var(--bone,#F4F1EC)}
.recruit__inner{
  max-width:62rem;margin-inline:auto;
  display:grid;grid-template-columns:1.1fr 1fr;
  gap:clamp(1.2rem,3vw,2.8rem);align-items:center;
}
.recruit__media{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--navy-ink)}
.recruit__media img,.recruit__media svg{width:100%;height:100%;object-fit:cover;display:block}
.recruit__copy::before{
  content:'';display:block;width:2rem;height:1px;
  background:var(--accent);opacity:.85;margin-bottom:clamp(.6rem,1.2vw,1rem);
}
.recruit__title{
  --track:.08em;
  font-family:var(--brand);font-weight:400;color:var(--accent);
  font-size:clamp(1.05rem,.72rem + 1.05vw,1.7rem);
  letter-spacing:var(--track);text-transform:uppercase;line-height:1.18;margin:0;
}
.recruit__text{
  font-size:max(.74rem,12px);font-weight:200;line-height:1.72;opacity:.84;margin:.7rem 0 0;
}
.recruit__links{list-style:none;margin:clamp(1rem,2vw,1.6rem) 0 0;padding:0;
  border-top:1px solid rgba(27,65,86,.16)}
.recruit--navy .recruit__links{border-top-color:rgba(235,204,157,.18)}
.recruit__links li{border-bottom:1px solid rgba(27,65,86,.16)}
.recruit--navy .recruit__links li{border-bottom-color:rgba(235,204,157,.18)}
.recruit__links a{
  display:grid;grid-template-columns:1.2rem 1fr auto;align-items:center;gap:.8rem;
  padding:clamp(.6rem,1.2vw,.9rem) 0;position:relative;
}
.recruit__links svg{width:1rem;height:1rem;fill:none;stroke:var(--accent);stroke-width:1.4}
.recruit__linkname{font-size:max(.62rem,10px);letter-spacing:.2em;text-transform:uppercase}
.recruit__linkval{font-size:max(.72rem,12px);font-weight:200;opacity:.7;justify-self:end}
.recruit__links a::after{
  content:'';position:absolute;left:0;right:100%;bottom:-1px;height:1px;
  background:var(--accent);transition:right .7s var(--ease-glide);
}
.recruit__links a:hover::after{right:0}

@media(max-width:759px){
  .recruit__inner{grid-template-columns:1fr}
  .recruit__linkval{display:none}
}

/* ---- Vacancy list ---- */
.vacancies{
  --paper:var(--navy);--ink:#FFFFFF;--accent:var(--champagne);
  background:var(--paper);color:var(--ink);
  padding:clamp(2.4rem,5vw,4.2rem) var(--gutter);
}
.vacancies--white{--paper:#FFFFFF;--ink:var(--navy);--accent:var(--champagne-d)}
.vacancies--bone{--paper:var(--bone,#F4F1EC);--ink:var(--navy);--accent:var(--champagne-d)}
.vacancies__inner{max-width:58rem;margin-inline:auto}
.vacancies__head{margin-bottom:clamp(1.2rem,2.4vw,2rem)}
.vacancies__head::before{
  content:'';display:block;width:2rem;height:1px;background:var(--accent);
  opacity:.85;margin-bottom:clamp(.6rem,1.2vw,1rem);
}
.vacancies__title{
  --track:.08em;
  font-family:var(--brand);font-weight:400;color:var(--accent);
  font-size:clamp(1.05rem,.75rem + 1vw,1.6rem);
  letter-spacing:var(--track);text-transform:uppercase;line-height:1.18;margin:0;
}
.vacancy{
  display:grid;grid-template-columns:1fr auto;align-items:center;gap:1rem;
  padding:clamp(.8rem,1.6vw,1.2rem) 0;
  border-bottom:1px solid rgba(235,204,157,.18);position:relative;
}
.vacancies--white .vacancy,.vacancies--bone .vacancy{border-bottom-color:rgba(27,65,86,.16)}
.vacancy:first-child{border-top:1px solid rgba(235,204,157,.18)}
.vacancies--white .vacancy:first-child,.vacancies--bone .vacancy:first-child{border-top-color:rgba(27,65,86,.16)}
.vacancy__name{
  --track:.07em;
  font-family:var(--brand);font-weight:400;
  font-size:clamp(.85rem,.62rem + .5vw,1.15rem);
  letter-spacing:var(--track);text-transform:uppercase;line-height:1.2;margin:0;
}
.vacancy__meta{
  font-size:max(.62rem,10px);letter-spacing:.18em;text-transform:uppercase;
  opacity:.6;margin:.4rem 0 0;
}
.vacancy__go{
  font-size:max(.6rem,10px);letter-spacing:.22em;text-transform:uppercase;
  color:var(--accent);white-space:nowrap;
}
.vacancy::after{
  content:'';position:absolute;left:0;right:100%;bottom:-1px;height:1px;
  background:var(--accent);transition:right .7s var(--ease-glide);
}
.vacancy:hover::after{right:0}
.vacancies__none{font-size:max(.74rem,12px);font-weight:200;opacity:.8;margin:0}

/* ---- Application form ---- */
.applyform{
  --paper:#FFFFFF;--ink:var(--navy);--accent:var(--champagne-d);
  background:var(--paper);color:var(--ink);
  padding:clamp(2.4rem,5vw,4.2rem) var(--gutter);
}
.applyform--bone{--paper:var(--bone,#F4F1EC)}
.applyform__inner{max-width:44rem;margin-inline:auto}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(.8rem,1.6vw,1.3rem)}
.field{display:flex;flex-direction:column}
.field--wide{grid-column:1 / -1}
.field label{
  font-size:max(.58rem,10px);letter-spacing:.2em;text-transform:uppercase;
  opacity:.7;margin-bottom:.45rem;
}
.field label .req{color:var(--accent)}
.field input,.field select,.field textarea{
  font-family:var(--body);font-size:max(.78rem,13px);font-weight:300;
  color:inherit;background:transparent;
  border:0;border-bottom:1px solid rgba(27,65,86,.28);
  padding:.55rem 0;border-radius:0;
  transition:border-color .4s ease;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-bottom-color:var(--accent);
}
.field select{appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 10px) 1.05em,calc(100% - 5px) 1.05em;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:1.4rem}

/* File input: the native control cannot be styled, so it is hidden and
   the label acts as the button, with the chosen filename echoed back. */
.field--file input[type=file]{position:absolute;width:1px;height:1px;opacity:0}
.filepick{
  display:inline-flex;align-items:center;gap:.7rem;cursor:pointer;
  border:1px solid rgba(27,65,86,.3);padding:.6rem 1.1rem;
  font-size:max(.6rem,10px);letter-spacing:.2em;text-transform:uppercase;
  transition:border-color .4s ease,background .4s ease;
}
.filepick:hover{border-color:var(--accent)}
.filename{font-size:max(.7rem,11px);font-weight:200;opacity:.7;margin-left:.8rem}

.consent{display:grid;grid-template-columns:1.1rem 1fr;gap:.7rem;align-items:start;margin-top:.4rem}
.consent input{margin-top:.2rem;accent-color:var(--accent);width:1.1rem;height:1.1rem}
.consent span{font-size:max(.68rem,11px);font-weight:200;line-height:1.6;opacity:.8;text-align:left}

.applyform__submit{margin-top:clamp(1.2rem,2.4vw,1.8rem)}
.formnote{
  font-size:max(.62rem,10px);font-weight:200;line-height:1.6;opacity:.55;
  margin:1rem 0 0;
}

@media(max-width:559px){
  .form-grid{grid-template-columns:1fr}
}

/* ============================================================
   30. ENQUIRY FORM
   Reuses the field styling from the application form; only the
   section wrapper and the two-up layout differ.
   ============================================================ */
.enquiry{
  --paper:var(--bone,#F4F1EC);--ink:var(--navy);--accent:var(--champagne-d);
  background:var(--paper);color:var(--ink);
  padding:clamp(2.4rem,5vw,4.2rem) var(--gutter);
}
.enquiry--white{--paper:#FFFFFF}
.enquiry--navy{--paper:var(--navy);--ink:#FFFFFF;--accent:var(--champagne)}
.enquiry__inner{max-width:52rem;margin-inline:auto}
.enquiry__head{margin-bottom:clamp(1.2rem,2.4vw,1.9rem);max-width:38rem}
.enquiry__head::before{
  content:'';display:block;width:2rem;height:1px;background:var(--accent);
  opacity:.85;margin-bottom:clamp(.6rem,1.2vw,1rem);
}
.enquiry__title{
  --track:.08em;
  font-family:var(--brand);font-weight:400;color:var(--accent);
  font-size:clamp(1.05rem,.75rem + 1vw,1.6rem);
  letter-spacing:var(--track);text-transform:uppercase;line-height:1.18;margin:0;
}
.enquiry__sub{
  font-size:max(.74rem,12px);font-weight:200;line-height:1.72;opacity:.84;margin:.7rem 0 0;
}

/* On a dark ground the field rules need to be light, not navy. */
.enquiry--navy .field input,
.enquiry--navy .field select,
.enquiry--navy .field textarea{border-bottom-color:rgba(235,204,157,.3)}
.enquiry--navy .filepick{border-color:rgba(235,204,157,.3)}
.enquiry--navy .statement__cta{border-color:rgba(235,204,157,.45);color:var(--champagne)}
.enquiry--navy .statement__cta::before{background:var(--champagne)}
.enquiry--navy .statement__cta:hover{color:var(--navy)}

.field textarea{resize:vertical;min-height:5.5rem;line-height:1.6}

/* ============================================================
   31. SERVICES PAGE
   The cards are the department cards from the homepage — same
   markup, same hover, so the two stay in step by construction.
   Only the grid and the intro differ.
   ============================================================ */
.depts--services .depts__grid{max-width:64rem}

/* Six to nine cards need a wider grid than three. Three across on a
   desktop keeps each card large enough to read a caption over. */
@media(min-width:1100px){
  .depts--services .depts__grid{grid-template-columns:repeat(3,1fr)}
}
@media(min-width:700px) and (max-width:1099px){
  .depts--services .depts__grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:699px){
  .depts--services .depts__grid{grid-template-columns:repeat(2,1fr)}
}

/* With more cards on the page, the label needs to stay readable at a
   smaller card size than the homepage ever reaches. */
.depts--services .dept__label,
.depts--services .dept__name{font-size:clamp(.62rem,.42rem + .5vw,1.05rem)}
@media(max-width:520px){
  .depts--services .dept__desc{display:none}
  .depts--services .dept__more{margin-top:.5rem}
}

/* Intro sits above the grid, left aligned like the other page heads. */
.depts--services .depts__head{max-width:44rem}

/* ============================================================
   32. PROJECTS PAGE
   ============================================================ */
.projintro{
  --paper:#FFFFFF;--ink:var(--navy);--accent:var(--champagne-d);
  background:var(--paper);color:var(--ink);
  padding:clamp(2.4rem,5vw,4.2rem) var(--gutter);
}
.projintro--bone{--paper:var(--bone,#F4F1EC)}
.projintro__inner{max-width:58rem;margin-inline:auto}
.projintro__head{max-width:44rem}
.projintro__head::before{
  content:'';display:block;width:2rem;height:1px;background:var(--accent);
  opacity:.85;margin-bottom:clamp(.6rem,1.2vw,1rem);
}
.projintro__title{
  --track:.08em;
  font-family:var(--brand);font-weight:400;color:var(--accent);
  font-size:clamp(1.1rem,.75rem + 1.1vw,1.8rem);
  letter-spacing:var(--track);text-transform:uppercase;line-height:1.18;margin:0;
}
.projintro__text{
  font-size:max(.74rem,12px);font-weight:200;line-height:1.72;opacity:.84;
  margin:.7rem 0 0;text-align:justify;hyphens:auto;-webkit-hyphens:auto;
}

/* The three client types, as a set of lettered notes. */
.clienttypes{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(.9rem,2vw,2rem);
  margin-top:clamp(1.4rem,2.8vw,2.4rem);
  padding-top:clamp(1.2rem,2.4vw,1.8rem);
  border-top:1px solid rgba(27,65,86,.16);
}
.projintro--navy .clienttypes{border-top-color:rgba(235,204,157,.18)}
.clienttype__name{
  --track:.07em;
  font-family:var(--brand);font-weight:400;color:var(--accent);
  font-size:clamp(.8rem,.6rem + .45vw,1.05rem);
  letter-spacing:var(--track);text-transform:uppercase;line-height:1.2;margin:0;
}
.clienttype__text{
  font-size:max(.7rem,11.5px);font-weight:200;line-height:1.65;opacity:.78;margin:.45rem 0 0;
}
@media(max-width:699px){
  .clienttypes{grid-template-columns:1fr;gap:1.2rem}
  .projintro__text{text-align:left;hyphens:manual;-webkit-hyphens:manual}
}

/* Each sector gets its own slider; they reuse the project slider. */
.pslider + .pslider{padding-top:0}
.pslider__head .pslider__eyebrow{
  font-size:max(.56rem,10px);letter-spacing:.24em;text-transform:uppercase;
  color:var(--accent,var(--champagne-d));opacity:.75;margin:0 0 .5rem;
}

/* ---- Single project: gallery ---- */
.pgallery{
  --paper:var(--navy);--ink:#FFFFFF;--accent:var(--champagne);
  background:var(--paper);color:var(--ink);
  padding:clamp(2.4rem,5vw,4.2rem) var(--gutter);
}
.pgallery--white{--paper:#FFFFFF;--ink:var(--navy);--accent:var(--champagne-d)}
.pgallery__inner{max-width:70rem;margin-inline:auto}
.pgallery__grid{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:clamp(.5rem,1.2vw,1.2rem);
}
/* Every third frame runs the full width, so the run reads as a spread
   rather than a uniform contact sheet. */
.pgallery__item:nth-child(3n+1){grid-column:1 / -1}
.pgallery__item{
  position:relative;display:block;overflow:hidden;
  aspect-ratio:3/2;background:var(--navy-ink);cursor:zoom-in;border:0;padding:0;
}
.pgallery__item:nth-child(3n+1){aspect-ratio:2/1}
.pgallery__item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.3s var(--ease-glide)}
.pgallery__item:hover img{transform:scale(1.03)}
@media(max-width:599px){
  .pgallery__grid{grid-template-columns:1fr}
  .pgallery__item,.pgallery__item:nth-child(3n+1){aspect-ratio:3/2}
}

/* ---- Lightbox ---- */
.lightbox{
  position:fixed;inset:0;z-index:120;
  display:grid;place-items:center;
  background:rgba(7,21,32,.94);
  opacity:0;visibility:hidden;
  transition:opacity .6s var(--ease-glide),visibility .6s;
}
.lightbox.is-open{opacity:1;visibility:visible}
.lightbox img{max-width:92vw;max-height:82vh;object-fit:contain;display:block}
.lightbox__close,.lightbox__prev,.lightbox__next{
  position:absolute;background:none;border:1px solid rgba(235,204,157,.4);
  color:var(--champagne);cursor:pointer;
  display:grid;place-items:center;
  width:2.6rem;height:2.6rem;border-radius:50%;
  transition:background .4s ease,color .4s ease;
}
.lightbox__close:hover,.lightbox__prev:hover,.lightbox__next:hover{background:var(--champagne);color:var(--navy-ink)}
.lightbox__close{top:1.2rem;right:1.2rem}
.lightbox__prev{left:1.2rem;top:50%;translate:0 -50%}
.lightbox__next{right:1.2rem;top:50%;translate:0 -50%}
.lightbox svg{width:.9rem;height:.9rem;fill:none;stroke:currentColor;stroke-width:1.4}
.lightbox__count{
  position:absolute;bottom:1.4rem;left:50%;translate:-50% 0;
  font-size:max(.6rem,10px);letter-spacing:.24em;color:var(--champagne);opacity:.75;
}

/* Small tracked labels in gold sit at 12px, so they need the 4.5:1
   threshold rather than the 3:1 that applies to large headings. This is
   a shade darker again, used only where the label is small. */
.pcard__loc,.proj__loc,
.pcard__cta,
.contactband__maplink,
.envlead__kicker,
.formnote,
.vacancy__go,
.recruit__linkname,
.dept__more{
  --gold-small:#8A6438;
}
.pslider:not(.pslider--navy) .pcard__loc,
.pslider:not(.pslider--navy) .pcard__cta,
.contactband:not(.contactband--navy) .contactband__maplink,
.envlead .envlead__kicker,
.applyform .formnote,
.enquiry:not(.enquiry--navy) .formnote,
.vacancies--white .vacancy__go,.vacancies--bone .vacancy__go,
.recruit:not(.recruit--navy) .recruit__linkname{
  color:var(--gold-small);
}

/* The remaining low-contrast cases, all small text on light grounds:
   the project location line carries an extra opacity, the form note is
   deliberately quiet, and the client-type name sits below 24px so it
   needs the small-text threshold rather than the heading one. */
.pslider:not(.pslider--navy) .pcard__loc{opacity:1;color:#8A6438}
.applyform .formnote,.enquiry:not(.enquiry--navy) .formnote{opacity:.78;color:var(--navy)}
.clienttype__name{color:#8A6438}
.social-row__handle{opacity:.78}

/* ============================================================
   33. SERVICES — full-width clickable bands
   Each band is one link: a faded photograph with the title over it.
   On hover the photograph lifts out of the fade and comes forward.
   ============================================================ */
.svcintro{
  --paper:#FFFFFF;--ink:var(--navy);--accent:var(--champagne-d);
  background:var(--paper);color:var(--ink);
  padding:clamp(2.4rem,5vw,4.2rem) var(--gutter);
}
.svcintro--bone{--paper:var(--bone,#F4F1EC)}
.svcintro__inner{max-width:56rem;margin-inline:auto}
.svcintro__head{max-width:44rem}
.svcintro__head::before{
  content:'';display:block;width:2rem;height:1px;background:var(--accent);
  opacity:.85;margin-bottom:clamp(.6rem,1.2vw,1rem);
}
.svcintro__title{
  --track:.08em;
  font-family:var(--brand);font-weight:400;color:var(--accent);
  font-size:clamp(1.1rem,.75rem + 1.1vw,1.8rem);
  letter-spacing:var(--track);text-transform:uppercase;line-height:1.18;margin:0;
}
.svcintro__text{
  font-size:max(.74rem,12px);font-weight:200;line-height:1.72;opacity:.84;
  margin:.7rem 0 0;text-align:justify;hyphens:auto;-webkit-hyphens:auto;
}
@media(max-width:680px){
  .svcintro__text{text-align:left;hyphens:manual;-webkit-hyphens:manual}
}

/* ---- the bands ---- */
.svcband{
  position:relative;display:block;overflow:hidden;
  min-height:clamp(11rem,26vh,17rem);
  display:grid;align-items:center;
  background:var(--navy-ink);
  border-bottom:1px solid rgba(235,204,157,.14);
}
.svcband:last-of-type{border-bottom:0}

.svcband__media{position:absolute;inset:0;z-index:0}
.svcband__media img,.svcband__media svg{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1.6s var(--ease-glide);
}
.svcband:hover .svcband__media img,
.svcband:hover .svcband__media svg,
.svcband:focus-visible .svcband__media img,
.svcband:focus-visible .svcband__media svg{transform:scale(1.05)}

/* The fade. It lifts on hover so the photograph comes forward. */
.svcband__veil{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg, rgba(7,21,32,.9) 0%, rgba(7,21,32,.78) 45%, rgba(7,21,32,.6) 100%);
  transition:opacity .9s var(--ease-glide);
}
.svcband:hover .svcband__veil,
.svcband:focus-visible .svcband__veil{opacity:.72}
/* The scrim runs from whichever side the copy sits on, so the text
   always has a dark ground and the photograph stays open opposite. */
.svcband--flip .svcband__veil{
  background:linear-gradient(270deg, rgba(7,21,32,.9) 0%, rgba(7,21,32,.78) 45%, rgba(7,21,32,.6) 100%);
}

.svcband__inner{
  position:relative;z-index:2;width:100%;
  max-width:66rem;margin-inline:auto;
  padding:clamp(1.4rem,3vw,2.4rem) var(--gutter);
}
/* The flipped band uses the whole page width rather than the centred
   column, so its copy can sit two thirds across as intended. Capped
   inside a 66rem column it could never reach past the middle. */
.svcband--flip .svcband__inner{max-width:none;padding-inline:clamp(1.1rem,5vw,6rem)}
.svcband__body{max-width:30rem}
/* Alternating sides. The flipped band starts roughly two thirds across
   rather than at the right edge — far enough that it reads as a
   deliberate opposite, close enough that it does not strand the copy
   against the frame. An earlier attempt sat it near the middle, which
   read as neither one thing nor the other. */
.svcband--flip .svcband__body{margin-left:auto;margin-right:0}
.svcband--flip .svcband__inner{padding-right:clamp(1.1rem,7vw,9rem)}
/* Left bands use the full width too, so they start near the page edge
   at every size. Inside the centred column they crept inward as the
   screen grew — 8% of the way across at 1440 but 23% at 2560. */
.svcband:not(.svcband--flip) .svcband__inner{
  max-width:none;padding-inline:clamp(1.1rem,5vw,6rem);
}

.svcband__title{
  --track:.08em;
  font-family:var(--brand);font-weight:400;color:#FFFFFF;
  font-size:clamp(1.05rem,.7rem + 1.15vw,1.85rem);
  letter-spacing:var(--track);text-transform:uppercase;
  line-height:1.18;margin:0;
}
.svcband__text{
  font-size:max(.72rem,12px);font-weight:200;line-height:1.7;
  color:#FFFFFF;opacity:.82;margin:.6rem 0 0;
}
.svcband__go{
  display:inline-flex;align-items:center;gap:.7rem;margin-top:.9rem;
  font-size:max(.6rem,10px);letter-spacing:.22em;text-transform:uppercase;
  color:var(--champagne);position:relative;padding-bottom:.25rem;
}
.svcband__go::after{
  content:'';position:absolute;left:0;right:100%;bottom:0;height:1px;
  background:var(--champagne);transition:right .7s var(--ease-glide);
}
.svcband:hover .svcband__go::after,
.svcband:focus-visible .svcband__go::after{right:0}

@media(max-width:699px){
  .svcband__veil,.svcband--flip .svcband__veil{
    background:linear-gradient(to top, rgba(7,21,32,.93) 0%, rgba(7,21,32,.8) 60%, rgba(7,21,32,.66) 100%);
  }
  .svcband__body,.svcband--flip .svcband__body{max-width:none;margin-left:0}
}

/* ---- Individual service page ---- */
.svchero{
  position:relative;overflow:hidden;
  min-height:clamp(13rem,34vh,22rem);
  display:grid;align-items:end;
  background:var(--navy-ink);
}
.svchero__media{position:absolute;inset:0;z-index:0}
.svchero__media img,.svchero__media svg{width:100%;height:100%;object-fit:cover;display:block}
.svchero__veil{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top, rgba(7,21,32,.92) 0%, rgba(7,21,32,.5) 55%, rgba(7,21,32,.4) 100%);
}
.svchero__inner{
  position:relative;z-index:2;width:100%;max-width:66rem;margin-inline:auto;
  padding:clamp(1.4rem,3vw,2.6rem) var(--gutter);
}
.svchero__title{
  --track:.08em;
  font-family:var(--brand);font-weight:400;color:var(--champagne);
  font-size:clamp(1.2rem,.75rem + 1.5vw,2.3rem);
  letter-spacing:var(--track);text-transform:uppercase;line-height:1.16;margin:0;
}

/* ============================================================
   34. CENTRED STATEMENT HEADINGS
   The heading and the buttons centre; the body copy stays justified.
   Centring justified prose fights itself — the last line centres while
   every line above is stretched to both edges — so only the heading and
   the buttons move.
   ============================================================ */
.statement__title{text-align:center}
.statement__actions{justify-content:center}
.statement__inner{margin-inline:auto}
.statement .eyebrow{text-align:center}

/* The copy keeps its own measure, centred as a block. */
.statement__body{margin-inline:auto}

/* ============================================================
   35. THE REMAINING HEADINGS
   Several homepage sections use the older .display class, which was
   never picked up by the uppercase and centring rules — so half the
   page read in capitals and half in mixed case. Brought into line.
   ============================================================ */
h1.display,h2.display,h3.display{
  --track:.08em;
  text-transform:uppercase;
  letter-spacing:var(--track);
  line-height:1.14;
}
h2.display{font-size:clamp(1.3rem,.8rem + 1.5vw,2.35rem)}
h1.display{font-size:clamp(1.5rem,.85rem + 1.9vw,2.9rem)}
h3.display{font-size:clamp(1.05rem,.7rem + 1.1vw,1.7rem)}

/* Centre the bands that read as statements, and give the section
   heads the same hairline the newer sections carry. */
.trust,.feature,.process,.journal,.contact{text-align:center}
.trust .wrap,.process .wrap,.journal .wrap,.contact .wrap{margin-inline:auto}
.feature__inner{margin-inline:auto;text-align:center}
.feature__inner .lede{margin-inline:auto}
.trust .lede,.process .lede,.contact .lede{margin-inline:auto}
.sec-head{justify-content:center;text-align:center}

.trust .display::before,
.process .display::before,
.journal .display::before,
.contact .display::before,
.feature__inner .display::before{
  content:'';display:block;width:2rem;height:1px;
  background:var(--champagne);opacity:.85;
  margin:0 auto clamp(.6rem,1.2vw,1rem);
}
.process .display::before{background:var(--champagne-d)}

/* The process steps lose their numerals, so the title sits at the top. */
.step b{display:none}
.steps{text-align:left}

/* ============================================================
   36. CENTRED THROUGHOUT, AND A SMALLER DISPLAY SCALE
   Every section head, body block and button row centres. Display
   type comes down again; the small labels keep their floor so
   nothing drops below readable.
   ============================================================ */

/* ---- 1. Centre every section ---- */
.statement,.depts,.pslider,.community,.commit,.pledge,
.envlead,.envintro,.svcintro,.projintro,.vacancies,
.applyform,.enquiry,.joinus,.trust,.feature,.process,.journal,.contact{
  text-align:center;
}
.statement__inner,.depts__head,.pslider__head,.community__copy,
.commit__inner,.commit__head,.pledge__inner,.pledge__head,
.envlead__inner,.envintro__inner,.svcintro__inner,.svcintro__head,
.projintro__inner,.projintro__head,.vacancies__head,.vacancies__inner,
.applyform__inner,.enquiry__inner,.enquiry__head,.joinus__inner{
  margin-inline:auto;
}

/* Hairlines above headings centre with them. */
.depts__head::before,.pslider__head::before,.commit__head::before,
.pledge__head::before,.svcintro__head::before,.projintro__head::before,
.vacancies__head::before,.enquiry__head::before,.envintro__title::before,
.community__title::before,.about-band__copy::before,.envband__copy::before,
.contactband__copy::before,.recruit__copy::before,.wellbeing__copy::before{
  margin-inline:auto;
}

/* Body copy centres as a block but keeps its own measure. */
.statement__body,.depts__sub,.pslider__sub,.community__sub,
.commit__sub,.pledge__text,.svcintro__text,.projintro__text,
.enquiry__sub,.joinus__text,.envintro__cols,.lede{
  margin-inline:auto;
}

/* Button rows centre. */
.statement__actions,.sec-foot,.pslider__foot,.projects__foot,
.trust__cta,.contact__cta{
  display:flex;justify-content:center;flex-wrap:wrap;
}
.svcintro__head .statement__cta,.enquiry .statement__cta{margin-inline:auto}

/* Two-column bands keep their own alignment — centring a column that
   sits beside a photograph would push it away from the picture. */
.about-band__body,.envband__copy,.contactband__copy,
.recruit__copy,.wellbeing__copy,.svcband__body{text-align:left}
.about-band,.envband,.contactband,.recruit,.wellbeing{text-align:left}
@media(max-width:759px){
  .about-band__body,.envband__copy,.contactband__copy,
  .recruit__copy,.wellbeing__copy{text-align:center}
  .about-band__copy::before,.envband__copy::before,
  .contactband__copy::before,.recruit__copy::before,
  .wellbeing__copy::before{margin-inline:auto}
}

/* Card text stays left — a grid of centred captions reads unsettled. */
.pcard,.dept__reveal,.step,.foot,.commit__item,.vacancy,.field{text-align:left}
.pcard__cta,.dept__more{margin-inline:0}

/* ---- 2. Smaller display type ---- */
h1.display,.statement__title{font-size:clamp(1.3rem,.8rem + 1.4vw,2.35rem)}
h2.display,.depts__title,.pslider__title,.community__title,
.about-band__title,.commit__title,.pledge__title,.envintro__title,
.svcintro__title,.projintro__title,.vacancies__title,.enquiry__title,
.joinus__title,.contactband__title,.recruit__title,.wellbeing__title,
.envband__title,.envlead__title,.svcband__title,.svchero__title{
  font-size:clamp(1.1rem,.72rem + 1.05vw,1.75rem);
}
h3.display,.pcard__name{font-size:clamp(.88rem,.65rem + .5vw,1.2rem)}
.dept__name,.dept__label{font-size:clamp(.68rem,.48rem + .42vw,.92rem)}
.envhero__title{font-size:clamp(1.1rem,.7rem + 1.15vw,1.9rem)}
.overlay-nav__list a{font-size:clamp(1rem,.75rem + .95vw,1.6rem)}
.stat b{font-size:clamp(1.4rem,.9rem + 1.5vw,2.6rem)}
.step h4,.commit__item-title,.vacancy__name,.clienttype__name,
.pledge__label{font-size:clamp(.74rem,.58rem + .34vw,.95rem)}

/* Body copy down a touch, with the floor holding it readable. */
.statement__body,.depts__sub,.pslider__sub,.community__sub,
.svcintro__text,.projintro__text,.about-band__text,.envband__text,
.commit__text,.pledge__text,.joinus__text,.enquiry__sub,
.recruit__text,.wellbeing__text,.contactband__value,
.pcard__desc,.dept__desc,.lede{
  font-size:max(.63rem,11.5px);
}
.wordmark{font-size:clamp(1.05rem,.5rem + 1.7vw,2.1rem)}
.foot a.wordmark--foot{font-size:clamp(1rem,.65rem + .95vw,2.2rem)}

/* ============================================================
   37. SPACING ON THE INNER PAGES
   Section padding was sized for a full band of content. On a single
   service or project page the intro is one short paragraph, so the
   same padding left more empty space than text. These bands get
   their own, tighter rhythm.
   ============================================================ */

/* The short intro under a page heading. */
.svcintro:has(.svcintro__head:only-child),
.single-service .svcintro,
.svchero + .svcintro{
  padding-block:clamp(1.4rem,2.6vw,2.2rem);
}

/* Belt and braces for browsers without :has — target the intro that
   follows a page hero, which is the case that was wrong. */
.svchero + .svcintro .svcintro__inner,
.envhero + .svcintro .svcintro__inner{max-width:46rem}

/* The written content on a service or project page. Its own padding
   was set for a standalone article. */
.entry{padding-block:clamp(1.8rem,3.4vw,3rem)}
.entry__content > *:first-child{margin-top:0}
.entry__content > *:last-child{margin-bottom:0}
.entry__content h2:first-child,
.entry__content h3:first-child{margin-top:0}

/* Gallery and the following bands sit closer to what precedes them. */
.pgallery{padding-block:clamp(1.6rem,3vw,2.6rem)}

/* A run of service bands after the content needs a little air above,
   but not a full section gap. */
.entry + .svcband,
.pgallery + .svcband{margin-top:clamp(1rem,2vw,1.8rem)}

/* Project pages: the facts strip sat in a full section wrapper. */
.section--tight{padding-block:clamp(1.2rem,2.4vw,2rem)}

/* ============================================================
   38. SERVICE BAND BUTTON
   The marker under each band becomes an outlined button carrying
   the service name, as in the reference layout.
   ============================================================ */
.svcband__go{
  display:inline-flex;align-items:center;gap:.7rem;
  margin-top:clamp(.8rem,1.6vw,1.2rem);
  padding:.7rem 1.4rem;
  border:1px solid rgba(235,204,157,.55);
  font-size:max(.56rem,10px);letter-spacing:.22em;text-transform:uppercase;
  color:var(--champagne);
  transition:background .5s var(--ease-glide),color .5s var(--ease-glide),border-color .5s ease;
}
.svcband__go::after{
  content:'';width:.32rem;height:.32rem;flex:none;
  border-top:1px solid currentColor;border-right:1px solid currentColor;
  transform:rotate(45deg);
  position:static;left:auto;right:auto;bottom:auto;background:none;
  transition:transform .5s var(--ease-glide);
}
.svcband:hover .svcband__go,
.svcband:focus-visible .svcband__go{
  background:var(--champagne);color:var(--navy-ink);border-color:var(--champagne);
}
.svcband:hover .svcband__go::after{transform:rotate(45deg) translate(2px,-2px)}

/* Room for a title, a description and a button. */
.svcband{min-height:clamp(13rem,30vh,20rem)}
.svcband__text{max-width:30rem}

/* Mirrored, like the room bands on a project page: the flipped copy
   is pushed to the far right and right-aligned, so the gap from the
   right edge to its last letter equals the gap from the left edge to
   the first letter on the band above. Sitting it at a fixed share of
   the width read as centred rather than as a deliberate opposite. */
@media(min-width:900px){
  .svcband__body{max-width:min(30rem,40%)}
  .svcband--flip .svcband__body{
    margin-left:auto;margin-right:0;text-align:right;
  }
  .svcband--flip .svcband__go{margin-left:auto}
}

/* ============================================================
   39. PROJECT STORY CONTENT
   The written part of a project page is built from what you type
   into WordPress: headings, paragraphs, images, galleries. These
   rules make that content read editorially — room-by-room sections
   with images between them — rather than as a plain article.
   ============================================================ */

/* Section headings inside a project or service story. */
.entry__content h2{
  --track:.08em;
  font-family:var(--brand);font-weight:400;
  font-size:clamp(1.05rem,.72rem + 1.05vw,1.7rem);
  letter-spacing:var(--track);text-transform:uppercase;
  line-height:1.18;color:var(--champagne-d);
  margin:clamp(2rem,4vw,3.4rem) 0 0;text-align:center;
}
.entry__content h2::before{
  content:'';display:block;width:2rem;height:1px;
  background:var(--champagne-d);opacity:.85;
  margin:0 auto clamp(.6rem,1.2vw,1rem);
}
.entry__content h2 + p{margin-top:.8rem}

/* A room name: smaller, sitting directly above its description. */
.entry__content h3{
  --track:.07em;
  font-family:var(--brand);font-weight:400;
  font-size:clamp(.85rem,.62rem + .5vw,1.15rem);
  letter-spacing:var(--track);text-transform:uppercase;
  line-height:1.2;color:var(--navy);
  margin:clamp(1.6rem,3vw,2.4rem) 0 .5rem;text-align:center;
}

.entry__content p{
  font-size:max(.72rem,12px);font-weight:200;line-height:1.75;
  opacity:.86;max-width:38rem;margin-inline:auto;
  text-align:center;
}
@media(min-width:760px){
  .entry__content h2 + p,
  .entry__content h3 + p{text-align:center}
}

/* Images inside the story run wider than the text column and sit
   clear of it, so the page reads as picture, words, picture. */
.entry__content figure,
.entry__content .wp-block-image{
  margin-block:clamp(1.6rem,3.4vw,3rem);
  max-width:none;
}
.entry__content .wp-block-image img{
  width:100%;height:auto;display:block;
}

/* A gallery block becomes an even grid with the theme's gaps. */
.entry__content .wp-block-gallery{
  display:grid !important;
  grid-template-columns:repeat(2,1fr);
  gap:clamp(.5rem,1.2vw,1.1rem);
  margin-block:clamp(1.6rem,3.4vw,3rem);
}
.entry__content .wp-block-gallery figure{margin:0;width:auto !important}
.entry__content .wp-block-gallery img{
  width:100%;height:100%;object-fit:cover;aspect-ratio:3/2;display:block;
}
/* Every third frame runs full width, as on the project gallery. */
.entry__content .wp-block-gallery > figure:nth-child(3n+1){grid-column:1 / -1}
.entry__content .wp-block-gallery > figure:nth-child(3n+1) img{aspect-ratio:2/1}
@media(max-width:599px){
  .entry__content .wp-block-gallery{grid-template-columns:1fr}
  .entry__content .wp-block-gallery > figure:nth-child(3n+1) img{aspect-ratio:3/2}
}

/* The story column is wider than a plain article so pictures breathe. */
.entry .wrap{max-width:70rem}
.entry__content{max-width:none}

/* Project facts, as labelled columns rather than a boxed strip. */
.proj-facts{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(8rem,1fr));
  gap:clamp(1rem,2.4vw,2.4rem);
  background:none;max-width:52rem;margin:clamp(1.4rem,2.8vw,2.2rem) auto 0;
  padding-top:clamp(1rem,2vw,1.6rem);
  border-top:1px solid rgba(235,204,157,.2);
}
.proj-facts div{background:none;padding:0;text-align:center}
.proj-facts dt{
  font-size:max(.54rem,10px);letter-spacing:.24em;text-transform:uppercase;
  color:var(--champagne);opacity:.75;margin:0 0 .4rem;
}
.proj-facts dd{
  margin:0;font-size:max(.74rem,12px);font-weight:200;line-height:1.5;opacity:.9;
}

/* ============================================================
   40. ROOM BANDS
   Each photograph runs full width as the background of its own
   band, lightly darkened, with the room name and description in
   white over it. Bands alternate which side the copy sits on and
   all share one height, so the run reads as a set.
   ============================================================ */
.rooms{background:var(--navy-ink)}

.room{
  position:relative;display:grid;align-items:center;
  /* A fixed height rather than a minimum. With min-height the bands
     drifted apart on wide screens as the copy reflowed, so the run
     stopped reading as a set. */
  height:clamp(19rem,56vh,32rem);
  overflow:hidden;
  border-bottom:1px solid rgba(235,204,157,.12);
}
.room:last-child{border-bottom:0}

.room__media{position:absolute;inset:0;z-index:0}
.room__media img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1.8s var(--ease-glide);
}
.room:hover .room__media img{transform:scale(1.04)}

/* A light veil — enough to hold white text, not so much that the
   photograph goes dark. It runs from the side the copy sits on. */
.room__veil{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,
    rgba(7,21,32,.72) 0%, rgba(7,21,32,.58) 38%,
    rgba(7,21,32,.28) 68%, rgba(7,21,32,.2) 100%);
}
/* The scrim mirrors the copy: from the right on flipped bands. */
.room--flip .room__veil{
  background:linear-gradient(270deg,
    rgba(7,21,32,.72) 0%, rgba(7,21,32,.58) 38%,
    rgba(7,21,32,.28) 68%, rgba(7,21,32,.2) 100%);
}

.room__inner{
  position:relative;z-index:2;width:100%;
  padding:clamp(1.4rem,3vw,2.6rem) clamp(1.1rem,5vw,6rem);
}
/* The copy sits at a fixed share of the width. The inner wrapper is
   uncapped so the flipped side can actually reach across — inside a
   centred column it could only ever manage a 20% shift. */
.room__inner{max-width:none;margin-inline:0}
.room__copy{max-width:min(26rem,36%)}
/* Alternating sides, mirrored exactly. The copy is pushed to the far
   right on flipped bands and its text right-aligned, so the gap from
   the right edge to the last letter matches the gap from the left edge
   to the first letter on the band above. */
@media(min-width:760px){
  .room--flip .room__copy{margin-left:auto;margin-right:0;text-align:right}
  .room--flip .room__copy::before{margin-left:auto;margin-right:0}
}
/* On a tall screen the band grows, so the copy is capped to what fits
   rather than running past the bottom edge. */
.room__copy{max-height:100%;overflow:hidden}
/* A long description must not make its band taller than the others.
   Capped at four lines; anything longer is trimmed with an ellipsis. */
.room__text{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;
  overflow:hidden;
}

.room__copy::before{
  content:'';display:block;width:2rem;height:1px;
  background:var(--champagne);opacity:.9;
  margin-bottom:clamp(.5rem,1vw,.9rem);
}
.room__name{
  --track:.08em;
  font-family:var(--brand);font-weight:400;color:#FFFFFF;
  font-size:clamp(.95rem,.68rem + .9vw,1.5rem);
  letter-spacing:var(--track);text-transform:uppercase;
  line-height:1.18;margin:0;
}
.room__text{
  font-size:max(.72rem,12px);font-weight:200;line-height:1.72;
  color:#FFFFFF;opacity:.88;margin:.6rem 0 0;
}

@media(max-width:759px){
  .room{height:clamp(15rem,42vh,20rem)}
  .room__copy,.room--flip .room__copy{max-width:none;margin-left:0}
  .room__veil,.room--flip .room__veil{
    background:linear-gradient(to top,
      rgba(7,21,32,.82) 0%, rgba(7,21,32,.6) 55%, rgba(7,21,32,.4) 100%);
  }
}

/* ============================================================
   41. CENTRE-FOCUS RAIL
   A swipeable run of images where the one in the middle sits
   larger than its neighbours. Dots below carry the room names.
   ============================================================ */
.rail{
  --paper:var(--navy);--ink:#FFFFFF;--accent:var(--champagne);
  background:var(--paper);color:var(--ink);
  padding:clamp(2rem,4vw,3.6rem) 0;overflow:hidden;
}
.rail--white{--paper:#FFFFFF;--ink:var(--navy);--accent:var(--champagne-d)}
.rail__head{text-align:center;max-width:44rem;margin:0 auto clamp(1.2rem,2.4vw,2rem);padding-inline:var(--gutter)}
.rail__title{
  --track:.08em;
  font-family:var(--brand);font-weight:400;color:var(--accent);
  font-size:clamp(1.05rem,.72rem + 1.05vw,1.7rem);
  letter-spacing:var(--track);text-transform:uppercase;line-height:1.18;margin:0;
}

.rail__track{
  display:flex;gap:clamp(.6rem,1.4vw,1.4rem);
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  padding-inline:calc(50% - min(22rem,34vw));
  scrollbar-width:none;-ms-overflow-style:none;
}
.rail__track::-webkit-scrollbar{display:none}

.rail__item{
  flex:0 0 min(44rem,68vw);
  scroll-snap-align:center;
  position:relative;
  transform:scale(.86);opacity:.55;
  transition:transform .9s var(--ease-glide),opacity .9s var(--ease-glide);
}
.rail__item.is-centre{transform:scale(1);opacity:1}
.rail__item img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block}

.rail__caption{
  text-align:center;margin:clamp(.9rem,1.8vw,1.4rem) auto 0;
  max-width:36rem;padding-inline:var(--gutter);
  min-height:3.4rem;
}
.rail__name{
  --track:.07em;
  font-family:var(--brand);font-weight:400;color:var(--accent);
  font-size:clamp(.8rem,.6rem + .45vw,1.05rem);
  letter-spacing:var(--track);text-transform:uppercase;margin:0;
}
.rail__text{
  font-size:max(.7rem,11.5px);font-weight:200;line-height:1.65;opacity:.8;margin:.4rem 0 0;
}

/* Named dots. Each takes you to its image. */
.rail__dots{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:.5rem clamp(.8rem,2vw,1.6rem);
  margin-top:clamp(1rem,2vw,1.6rem);padding-inline:var(--gutter);
}
.rail__dots button{
  background:none;border:0;cursor:pointer;padding:.35rem 0;
  font-family:var(--body);
  font-size:max(.56rem,10px);letter-spacing:.2em;text-transform:uppercase;
  color:currentColor;opacity:.45;position:relative;
  transition:opacity .45s ease;
}
.rail__dots button::after{
  content:'';position:absolute;left:0;right:100%;bottom:0;height:1px;
  background:var(--accent);transition:right .5s var(--ease-glide);
}
.rail__dots button[aria-current="true"]{opacity:1;color:var(--accent)}
.rail__dots button[aria-current="true"]::after,
.rail__dots button:hover::after{right:0}

@media(max-width:699px){
  .rail__item{flex-basis:82vw;transform:scale(.94)}
  .rail__track{padding-inline:9vw}
}

/* ============================================================
   42. RAIL ARROWS
   ============================================================ */
.rail__stage{position:relative}
.rail__nav{
  position:absolute;top:50%;translate:0 -50%;z-index:3;
  width:clamp(2.2rem,3.4vw,3rem);aspect-ratio:1;
  display:grid;place-items:center;
  background:rgba(12,33,48,.55);border:1px solid rgba(235,204,157,.4);
  border-radius:50%;cursor:pointer;color:var(--accent,var(--champagne));
  transition:background .45s ease,color .45s ease,opacity .45s ease;
}
.rail--white .rail__nav{background:rgba(255,255,255,.72);border-color:rgba(12,33,48,.25)}
.rail__nav svg{width:.85rem;height:.85rem;fill:none;stroke:currentColor;stroke-width:1.4}
.rail__nav:hover{background:var(--accent,var(--champagne));color:var(--navy-ink)}
.rail__nav:disabled{opacity:.25;cursor:default}
.rail__nav:disabled:hover{background:rgba(12,33,48,.55);color:var(--accent,var(--champagne))}
.rail__nav--prev{left:clamp(.5rem,2vw,1.6rem)}
.rail__nav--next{right:clamp(.5rem,2vw,1.6rem)}

@media(max-width:559px){
  .rail__nav{background:rgba(12,33,48,.75)}
}

/* The room bands run the full width of the window regardless of any
   container they sit inside, and the copy is capped so it can never
   push past the band's edge. */
.rooms{width:100%;max-width:none;margin-inline:0}
.room__inner{width:100%;max-width:none}
.room__copy{max-height:calc(100% - 1rem)}

/* One column. An earlier two-column version of this band left a rule
   behind that split it in half, which stopped the flipped copy from
   ever reaching the right edge. */
.room{grid-template-columns:1fr}

/* The written part of a project page holds one or two paragraphs, so
   it takes a tighter rhythm than a full article section. */
.single-project .entry,
.single-service .entry{padding-block:clamp(1.2rem,2.4vw,2rem)}
.single-project .entry__content p:first-child,
.single-service .entry__content p:first-child{margin-top:0}
.single-project .entry__content p:last-child,
.single-service .entry__content p:last-child{margin-bottom:0}
.single-project .entry__content,
.single-service .entry__content{max-width:44rem;margin-inline:auto}

/* ============================================================
   43. PROJECT HERO AND VISION BAND
   A full-screen video opens each project, then a second band with
   the photograph behind it carrying the description and the facts.
   ============================================================ */
.projhero{
  position:relative;overflow:hidden;
  height:100vh;height:100svh;min-height:30rem;
  display:grid;place-items:end center;
  background:var(--navy-ink);
}
.projhero__media{position:absolute;inset:0;z-index:0}
.projhero__media video,.projhero__media img{width:100%;height:100%;object-fit:cover;display:block}
.projhero__tint{display:none}
.projhero__grade{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to bottom,rgba(7,21,32,.62) 0%,rgba(7,21,32,.12) 34%,rgba(7,21,32,.86) 100%);
}
.projhero__caption{
  position:relative;z-index:2;width:100%;text-align:center;
  padding:0 var(--gutter) clamp(2.2rem,4vw,3.4rem);
  max-width:60rem;
  display:flex;flex-direction:column;align-items:center;
}
.projhero__title{
  --track:.08em;
  font-family:var(--brand);font-weight:400;color:#FFFFFF;
  font-size:clamp(1.3rem,.8rem + 1.5vw,2.4rem);
  letter-spacing:var(--track);text-transform:uppercase;
  line-height:1.14;margin:0;
}
.projhero__line{
  font-size:max(.6rem,10px);letter-spacing:.26em;text-transform:uppercase;
  color:var(--champagne);margin:.8rem 0 0;
}
/* The cue sits in the flow under the caption rather than pinned to the
   bottom of the band. Pinned, it collided with the title on shorter
   screens — the two were positioned from the same edge. */
.projhero__cue{
  position:static;translate:none;z-index:3;
  margin:clamp(1.8rem,3.4vw,2.8rem) auto 0;
}

/* A phone held sideways is short; letterbox rather than clip. */
@media(max-height:520px) and (orientation:landscape){
  .projhero{height:auto;min-height:0;aspect-ratio:16/7}
}

/* ---- The vision band ---- */
.vision{
  position:relative;overflow:hidden;
  display:grid;place-items:center;
  /* The same height as the video above it, so a large photograph here
     gets the same presence. It still grows if the copy needs more. */
  min-height:100vh;min-height:100svh;
  padding-block:clamp(3rem,7vw,6rem);
  background:var(--navy-ink);
}
@media(max-height:520px) and (orientation:landscape){
  .vision{min-height:0}
}
.vision__media{position:absolute;inset:0;z-index:0}
.vision__media img{width:100%;height:100%;object-fit:cover;display:block}
/* Faded enough to read white text over, light enough that the
   photograph is still clearly a photograph. */
.vision__veil{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to bottom,
    rgba(7,21,32,.78) 0%, rgba(7,21,32,.72) 50%, rgba(7,21,32,.82) 100%);
}
.vision__inner{
  position:relative;z-index:2;
  max-width:46rem;margin-inline:auto;padding-inline:var(--gutter);
  text-align:center;color:#FFFFFF;
}
.vision__title{
  --track:.08em;
  font-family:var(--brand);font-weight:400;color:#FFFFFF;
  font-size:clamp(1.1rem,.72rem + 1.15vw,1.9rem);
  letter-spacing:var(--track);text-transform:uppercase;
  line-height:1.18;margin:0;
}
.vision__lede{
  font-size:max(.74rem,12px);font-weight:200;line-height:1.75;
  color:#FFFFFF;opacity:.9;margin:clamp(.8rem,1.6vw,1.2rem) 0 0;
}
.vision__body{margin-top:clamp(.6rem,1.2vw,1rem)}
.vision__body p{
  font-size:max(.72rem,12px);font-weight:200;line-height:1.75;
  color:#FFFFFF;opacity:.84;margin:0 0 .8rem;
}
.vision__body p:last-child{margin-bottom:0}

.vision__facts{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(7rem,1fr));
  gap:clamp(.9rem,2vw,2rem);
  margin:clamp(1.4rem,2.8vw,2.2rem) 0 0;
  padding-top:clamp(1rem,2vw,1.6rem);
  border-top:1px solid rgba(235,204,157,.24);
}
.vision__facts div{text-align:center}
.vision__facts dt{
  font-size:max(.54rem,10px);letter-spacing:.24em;text-transform:uppercase;
  color:var(--champagne);opacity:.85;margin:0 0 .35rem;
}
.vision__facts dd{
  margin:0;font-size:max(.72rem,12px);font-weight:200;
  color:#FFFFFF;opacity:.9;line-height:1.5;
}

/* ============================================================
   44. VIDEO IN PROJECT CARDS
   A project with a video shows it in its card, muted and looping.
   It only starts when the card is on screen and the pointer is over
   it, so a page of cards never decodes several videos at once.
   ============================================================ */
.pcard__video{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1.3s var(--ease-glide);
}
.pcard:hover .pcard__video{transform:scale(1.03)}

/* A small play mark, so it reads as a video before it starts. */
.pcard__art{position:relative}
.pcard__art:has(.pcard__video)::after{
  content:'';position:absolute;left:50%;top:50%;translate:-50% -50%;
  width:2.4rem;aspect-ratio:1;border-radius:50%;
  border:1px solid rgba(235,204,157,.6);
  background:rgba(12,33,48,.4);
  transition:opacity .6s var(--ease-glide);
  pointer-events:none;
}
.pcard__art:has(.pcard__video)::before{
  content:'';position:absolute;left:calc(50% + .12rem);top:50%;
  translate:-50% -50%;z-index:1;
  border-left:.42rem solid var(--champagne);
  border-top:.28rem solid transparent;
  border-bottom:.28rem solid transparent;
  transition:opacity .6s var(--ease-glide);
  pointer-events:none;
}
.pcard:hover .pcard__art::after,
.pcard:hover .pcard__art::before{opacity:0}

/* Both sides use the whole page width so the mirrored gaps are equal.
   Inside a centred column the flipped copy could not reach the edge. */
.svcband__inner{max-width:none;margin-inline:0;padding-inline:clamp(1.1rem,5vw,6rem)}
.svcband--flip .svcband__inner,
.svcband:not(.svcband--flip) .svcband__inner{padding-inline:clamp(1.1rem,5vw,6rem)}

/* Mirrored alternation, as on the room bands of a project page: the gap
   from the right edge to the last letter matches the gap from the left
   edge to the first letter above it. Set explicitly rather than with a
   percentage offset, which put the copy near the middle. */
@media(min-width:900px){
  .svcband__body{max-width:min(30rem,40%)}
  .svcband:not(.svcband--flip) .svcband__body{margin-left:0;margin-right:auto;text-align:left}
  .svcband--flip .svcband__body{margin-left:auto;margin-right:0;text-align:right}
  .svcband--flip .svcband__text{margin-left:auto}
  .svcband--flip .svcband__go{flex-direction:row-reverse}
  .svcband--flip .svcband__go::after{transform:rotate(-135deg)}
}

/* ============================================================
   45. DEPARTMENT GRID FITS ITS CONTENTS
   The grid was fixed at three columns, so a fourth card dropped
   onto a row of its own. The column count now follows how many
   cards there are: two, three or four across, six as two rows
   of three.
   ============================================================ */
@media(min-width:1000px){
  /* exactly two */
  .depts__grid:has(> :nth-child(2):last-child){grid-template-columns:repeat(2,1fr);max-width:44rem}
  /* exactly four */
  .depts__grid:has(> :nth-child(4):last-child){grid-template-columns:repeat(4,1fr);max-width:68rem}
  /* five or more falls back to three across, which fills evenly at six */
  .depts__grid:has(> :nth-child(5)){grid-template-columns:repeat(3,1fr)}
}

/* Four across needs the label to hold at a smaller card size. */
@media(min-width:1000px){
  .depts__grid:has(> :nth-child(4):last-child) .dept__label,
  .depts__grid:has(> :nth-child(4):last-child) .dept__name{
    font-size:clamp(.62rem,.42rem + .45vw,.9rem);
  }
}

/* ============================================================
   46. PROJECT FACTS — BALANCED ROWS
   The auto-fitting grid packed as many as would go on the first row
   and left the remainder stranded on the left of the second. These
   wrap into even rows instead, centred, with at most three across:
   six reads as 3 + 3, five as 3 + 2 centred, four as 2 + 2.
   ============================================================ */
.vision__facts,
.proj-facts{
  --fact-gap:clamp(.9rem,2vw,2.4rem);
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:clamp(1rem,2vw,1.6rem) var(--fact-gap);
}
.vision__facts > div,
.proj-facts > div{
  flex:0 1 calc(33.333% - var(--fact-gap));
  min-width:7rem;
}

/* Four sits better as two rows of two than three and a straggler. */
.vision__facts:has(> :nth-child(4):last-child) > div,
.proj-facts:has(> :nth-child(4):last-child) > div{
  flex-basis:calc(50% - var(--fact-gap));
}

/* Two side by side rather than stretched across the whole width. */
.vision__facts:has(> :nth-child(2):last-child) > div,
.proj-facts:has(> :nth-child(2):last-child) > div{
  flex-basis:calc(50% - var(--fact-gap));
  max-width:14rem;
}

@media(max-width:559px){
  .vision__facts > div,
  .proj-facts > div{flex-basis:calc(50% - var(--fact-gap))}
  .vision__facts:has(> :nth-child(4):last-child) > div,
  .proj-facts:has(> :nth-child(4):last-child) > div{flex-basis:calc(50% - var(--fact-gap))}
}

/* ============================================================
   46. PROJECT FACTS, EVENLY BALANCED
   The facts sat in an auto-fitting grid, so six items came out as
   four on top and two below, hard against the left. They now wrap
   in rows that divide evenly, and any short final row centres
   itself under the one above.
   ============================================================ */
.vision__facts{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:clamp(1.1rem,2.4vw,2.4rem) clamp(1.4rem,3.4vw,3.4rem);
  grid-template-columns:none;
}
.vision__facts div{
  flex:0 1 auto;
  min-width:6rem;
  text-align:center;
}

@media(min-width:760px){
  /* Five or six facts read best as rows of three. */
  .vision__facts:has(> :nth-child(5)) > div{
    flex-basis:calc(33.333% - clamp(1.4rem,3.4vw,3.4rem));
  }
  /* Four sit in one row. */
  .vision__facts:has(> :nth-child(4):last-child) > div{
    flex-basis:calc(25% - clamp(1.4rem,3.4vw,3.4rem));
  }
  /* Seven or more go four to a row. */
  .vision__facts:has(> :nth-child(7)) > div{
    flex-basis:calc(25% - clamp(1.4rem,3.4vw,3.4rem));
  }
}

/* A label that wraps to two lines must not shift its value out of
   line with the others on the row. */
.vision__facts dt{min-height:1.1em}
.vision__facts dd{text-wrap:balance}

@media(max-width:759px){
  .vision__facts > div{flex-basis:calc(50% - 1.4rem)}
}

/* ============================================================
   47. THE ABOUT BAND, ONE LAYOUT
   This had six different column splits across six breakpoints, so
   the photograph came out a different size on every device. It is
   now a single rule: two equal columns, with the picture stretched
   to exactly the height of the copy beside it. Below 760px the two
   stack, because side by side in a narrow column leaves the text
   too cramped to read.
   ============================================================ */
.about-band__inner{
  display:grid;
  grid-template-columns:1fr;
  align-items:stretch;
  gap:0;
}
.about-band__figure{
  position:relative;margin:0;
  aspect-ratio:3/2;
  min-height:0;max-height:none;
}
.about-band__body{
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(1.4rem,4vw,3rem) clamp(1.1rem,4vw,3rem);
}

@media(min-width:760px){
  .about-band__inner{grid-template-columns:1fr 1fr}
  /* The picture matches the copy height exactly rather than holding a
     shape of its own, so the two columns always finish level. */
  .about-band__figure{aspect-ratio:auto;height:100%}
  .about-band__text + .about-band__text{display:block}
}

/* ============================================================
   48. SECTION HEADS CENTRED
   ============================================================ */
.depts__head,.pslider__head,.commit__head,.pledge__head,
.vacancies__head,.enquiry__head,.svcintro__head,.projintro__head{
  text-align:center;margin-inline:auto;
}
.depts__head::before,.pslider__head::before,.commit__head::before,
.pledge__head::before,.vacancies__head::before,.enquiry__head::before,
.svcintro__head::before,.projintro__head::before{margin-inline:auto}
.depts__sub,.pslider__sub{text-align:center;margin-inline:auto}

/* The About band stacks below 760 so the copy is not squeezed into a
   narrow column beside the photograph. */
@media(max-width:759.98px){
  .about-band__inner{grid-template-columns:1fr}
  .about-band__figure{aspect-ratio:3/2;height:auto}
}

/* ============================================================
   49. THE PROCESS GRID, BALANCED
   Five steps in a two-column grid left the last one alone against
   the left edge with a grey box beside it. A row that cannot be
   filled now centres what it holds instead.
   ============================================================ */
.steps{
  /* The hairline between cells came from the grid's own background
     showing through a gap. That only works when every cell is filled,
     so the rules are drawn on the cells themselves and the grid takes
     no background of its own. */
  background:none;
  gap:0;
}
.step{
  border-right:1px solid rgba(27,65,86,.16);
  border-bottom:1px solid rgba(27,65,86,.16);
}

/* Two columns: an odd last step spans both and centres. */
@media(min-width:600px) and (max-width:899.98px){
  .step:nth-child(odd):last-child{
    grid-column:1 / -1;
    text-align:center;
    border-right:0;
  }
  .step:nth-child(2n){border-right:0}
}

/* Three columns. A trailing row of one or two is centred beneath the
   row above rather than left hanging against the left edge. */
@media(min-width:900px) and (max-width:1279.98px){
  .step:nth-child(3n){border-right:0}

  /* four steps: the fourth sits in the middle column */
  .steps:has(> :nth-child(4):last-child) > :nth-child(4){grid-column:2 / 3}

  /* five steps: the last two straddle the centre, so the pair is
     centred as a unit. Each takes two of six half-columns. */
  .steps:has(> :nth-child(5):last-child){grid-template-columns:repeat(6,1fr)}
  .steps:has(> :nth-child(5):last-child) > .step{grid-column:span 2}
  .steps:has(> :nth-child(5):last-child) > :nth-child(4){grid-column:2 / span 2}
  .steps:has(> :nth-child(5):last-child) > :nth-child(5){grid-column:4 / span 2}
  .steps:has(> :nth-child(5):last-child) > :nth-child(3){border-right:0}
}

/* The last row of any layout needs no rule beneath it. */
.step:last-child{border-bottom:0}
@media(min-width:1280px){
  .step{border-bottom:0}
  .step:last-child{border-right:0}
}

/* Desktop is five columns because the process has five steps. With a
   different number that leaves a gap on the right, so the count sets
   the column tracks instead. */
@media(min-width:1280px){
  .steps:has(> :nth-child(2):last-child){grid-template-columns:repeat(2,1fr)}
  .steps:has(> :nth-child(3):last-child){grid-template-columns:repeat(3,1fr)}
  .steps:has(> :nth-child(4):last-child){grid-template-columns:repeat(4,1fr)}
  .steps:has(> :nth-child(6):last-child){grid-template-columns:repeat(3,1fr)}
  .steps:has(> :nth-child(6):last-child) > :nth-child(3){border-right:0}
  .steps:has(> :nth-child(6):last-child) > .step{border-bottom:1px solid rgba(27,65,86,.16)}
  .steps:has(> :nth-child(6):last-child) > :nth-child(n+4){border-bottom:0}
}

/* Two steps in a three-column grid, and seven in a five, leave the same
   ragged edge. The column count follows the content in both bands. */
@media(min-width:900px) and (max-width:1279.98px){
  .steps:has(> :nth-child(2):last-child){grid-template-columns:repeat(2,1fr)}
  /* Seven across is far too narrow on a tablet, so it runs four then
     three, with the shorter row centred beneath. */
  .steps:has(> :nth-child(7):last-child){grid-template-columns:repeat(8,1fr)}
  .steps:has(> :nth-child(7):last-child) > .step{grid-column:span 2}
  .steps:has(> :nth-child(7):last-child) > :nth-child(5){grid-column:2 / span 2}
}
@media(min-width:1280px){
  .steps:has(> :nth-child(7):last-child){grid-template-columns:repeat(7,1fr)}
}

/* ============================================================
   50. THE ABOUT PHOTOGRAPH KEEPS ITS SHAPE
   The band is full-bleed and the photo took half of it, so the wider
   the screen the flatter the picture became — 1.37:1 at 900px but
   2.62:1 at 2560. It now has a width ceiling and a shape of its own,
   and the copy takes whatever is left.
   ============================================================ */
@media(min-width:760px){
  /* Two halves, edge to edge: the photograph fills the left, the copy
     panel the right, with nothing showing between or beside them. The
     band was capped and centred, which left navy either side of the
     picture — three things across the row instead of two. */
  .about-band__inner{
    grid-template-columns:1fr 1fr;
    max-width:none;margin-inline:0;
  }
  .about-band__figure{
    aspect-ratio:4/3;
    height:auto;
    align-self:center;
    max-height:none;
  }
  /* The copy sits centred against the picture rather than stretching,
     so a short paragraph does not leave the column looking empty. */
  .about-band__body{align-self:center}
}

/* Past about 1500px the column would keep growing with the page, so
   the ceiling is held in px — rem would grow with the root size. */
@media(min-width:760px){
  /* The picture fills its half completely and crops to fit, so the row
     reads as two panels rather than a picture floating on a ground. The
     band height is capped in px — in rem it would grow with the root
     size and the photograph would flatten out on a large screen. */
  .about-band__figure{
    width:100%;max-width:none;justify-self:stretch;
    aspect-ratio:auto;height:100%;
    min-height:clamp(20rem,34vw,560px);
  }
  .about-band__body{
    max-width:none;
    padding-inline:clamp(1.6rem,4vw,4.5rem);
  }
  /* The copy itself keeps a readable measure inside the panel. */
  .about-band__title,.about-band__text{max-width:34rem}
}

/* The About band takes the flat navy of the section beneath it. It
   carried a radial lift across the top, which read as a different,
   lighter blue against the band below. */
.about-band{background-image:none}

/* Past 2000px the two halves would each be a thousand pixels wide and
   the photograph would flatten out. The band stops there and centres,
   which on a screen that large reads as deliberate rather than as a
   gap. Below it — every ordinary laptop and monitor — it stays flush
   to both edges. */
@media(min-width:2000px){
  .about-band__inner{max-width:2000px;margin-inline:auto}
}

/* ============================================================
   51. NO COLOUR CAST OVER PHOTOGRAPHY
   Every image and video carried a navy wash, so a warm interior came
   out cold and a white wall came out blue. The washes are gone. The
   gradients that remain exist only to keep white text readable, and
   they are now neutral black rather than navy — a shadow rather than
   a colour.
   ============================================================ */
.hero__tint,.envhero__tint,.env-hero__tint,.projhero__tint{display:none !important}
.pcard__art::after,.about-band__media::before{display:none !important}

/* Text scrims, neutral. */
.hero__grade{
  background:linear-gradient(to bottom,rgba(0,0,0,.45) 0%,rgba(0,0,0,.05) 34%,rgba(0,0,0,.62) 100%) !important;
}
.envhero__grade,.env-hero__grade{
  background:linear-gradient(to bottom,rgba(0,0,0,.5) 0%,rgba(0,0,0,.08) 34%,rgba(0,0,0,.7) 100%) !important;
}
.projhero__grade{
  background:linear-gradient(to bottom,rgba(0,0,0,.5) 0%,rgba(0,0,0,.08) 34%,rgba(0,0,0,.72) 100%) !important;
}
.svcband__veil{
  background:linear-gradient(90deg,rgba(0,0,0,.78) 0%,rgba(0,0,0,.62) 45%,rgba(0,0,0,.3) 100%) !important;
}
.svcband--flip .svcband__veil{
  background:linear-gradient(270deg,rgba(0,0,0,.78) 0%,rgba(0,0,0,.62) 45%,rgba(0,0,0,.3) 100%) !important;
}
.svchero__veil{
  background:linear-gradient(to top,rgba(0,0,0,.8) 0%,rgba(0,0,0,.35) 55%,rgba(0,0,0,.25) 100%) !important;
}
.room__veil{
  background:linear-gradient(90deg,rgba(0,0,0,.68) 0%,rgba(0,0,0,.5) 38%,rgba(0,0,0,.2) 68%,rgba(0,0,0,.14) 100%) !important;
}
.room--flip .room__veil{
  background:linear-gradient(270deg,rgba(0,0,0,.68) 0%,rgba(0,0,0,.5) 38%,rgba(0,0,0,.2) 68%,rgba(0,0,0,.14) 100%) !important;
}
.policy__veil{
  background:linear-gradient(100deg,rgba(0,0,0,.85) 0%,rgba(0,0,0,.7) 38%,rgba(0,0,0,.34) 72%,rgba(0,0,0,.24) 100%) !important;
}
.policy:nth-child(even) .policy__veil,
.policy:nth-of-type(even) .policy__veil{
  background:linear-gradient(260deg,rgba(0,0,0,.85) 0%,rgba(0,0,0,.7) 38%,rgba(0,0,0,.34) 72%,rgba(0,0,0,.24) 100%) !important;
}
.vision__veil{
  background:linear-gradient(to bottom,rgba(0,0,0,.66) 0%,rgba(0,0,0,.6) 50%,rgba(0,0,0,.7) 100%) !important;
}
.proj__veil{
  background:linear-gradient(to top,rgba(0,0,0,.86) 0%,rgba(0,0,0,.12) 58%,transparent 100%) !important;
}
/* Department and team cards: the veil only appears on hover, when the
   description needs a ground. At rest the photograph is untouched. */
.dept__veil{background:rgba(0,0,0,.28) !important}
.dept:hover .dept__veil,
.dept:focus-visible .dept__veil{background:rgba(0,0,0,.6) !important}

@media(max-width:759px){
  .room__veil,.room--flip .room__veil{
    background:linear-gradient(to top,rgba(0,0,0,.78) 0%,rgba(0,0,0,.5) 55%,rgba(0,0,0,.28) 100%) !important;
  }
  .policy__veil,.policy:nth-child(even) .policy__veil{
    background:linear-gradient(to top,rgba(0,0,0,.88) 0%,rgba(0,0,0,.7) 55%,rgba(0,0,0,.45) 100%) !important;
  }
  .svcband__veil,.svcband--flip .svcband__veil{
    background:linear-gradient(to top,rgba(0,0,0,.85) 0%,rgba(0,0,0,.66) 60%,rgba(0,0,0,.5) 100%) !important;
  }
}

/* ============================================================
   52. NO NAVY RIBBON BELOW THE HEADER
   The fixed bar carried a soft navy gradient just under its lower
   edge, to blur the join with whatever scrolled past. On the pale
   pages it read as a band of colour sitting under the hairline
   rather than as a shadow. The hairline stays; the wash goes.
   ============================================================ */
.site-header::after,
.site-header.is-stuck::after{content:none !important}

/* ============================================================
   53. ONE BUTTON, EVERYWHERE
   Every call to action is now a hollow gold rectangle: gold rule,
   gold label, no fill. On hover the champagne wipes across and the
   label flips to navy, so it lands as a solid gold block.

   Two golds, deliberately. The pale champagne reads at about 2.2:1
   on white, which is not a legible label, so on light grounds the
   resting rule and label use the deeper --champagne-d and only the
   hover fill is the pale one. On navy grounds both are the pale
   gold. The theme already draws that distinction per band through
   --accent, so this mostly just stops overriding it.
   ============================================================ */
.btn,
.btn--dark,
.statement__cta,
.about-band__cta,
.pcard__cta{
  background:transparent !important;
  border:1px solid var(--btn-gold,var(--champagne-d)) !important;
  color:var(--btn-gold,var(--champagne-d)) !important;
}

/* Which gold, by ground. Light bands take the deeper one. */
.btn{--btn-gold:var(--champagne)}
.btn--dark{--btn-gold:var(--champagne-d)}
.statement__cta{--btn-gold:var(--champagne-d)}
.statement--navy .statement__cta,
.enquiry--navy .statement__cta{--btn-gold:var(--champagne)}
/* .about-band and .pcard already resolve --accent per band. */
.about-band__cta,
.pcard__cta{--btn-gold:var(--accent,var(--champagne-d))}

/* .btn had no wipe layer of its own. Give it the same one so the
   whole set behaves identically. */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn::before{
  content:'';position:absolute;inset:0;z-index:-1;
  transform:scaleX(0);transform-origin:left center;
  transition:transform .65s var(--ease-glide);
}
.btn:hover::before,.btn:focus-visible::before{transform:scaleX(1)}

/* The fill is the pale champagne in every context, so the hovered
   button matches whatever ground it sits on. Some bands used to set
   this to a darker gold; it is pinned here. */
.btn::before,
.btn--dark::before,
.statement__cta::before,
.statement--navy .statement__cta::before,
.enquiry--navy .statement__cta::before,
.about-band__cta::before,
.pcard__cta::before{
  background:var(--champagne) !important;
}

/* Hovered: navy label on the gold, and the rule joins the fill so it
   reads as one solid block rather than an outlined one. The ground
   itself is left to the wipe — setting a background here would kill
   the animation. */
.btn:hover,.btn:focus-visible,
.btn--dark:hover,.btn--dark:focus-visible,
.statement__cta:hover,.statement__cta:focus-visible,
.statement--navy .statement__cta:hover,
.enquiry--navy .statement__cta:hover,
.about-band__cta:hover,.about-band__cta:focus-visible,
.pcard__cta:hover,.pcard__cta:focus-visible{
  color:var(--navy) !important;
  border-color:var(--champagne) !important;
}

/* ============================================================
   54. NO HAIRLINE ABOVE HEADINGS
   Every section head carried a short gold rule above the title.
   Removed site-wide. The rule also supplied the gap beneath it,
   so each title now sits a little higher in its band.
   ============================================================ */
.statement__inner::before,
.depts__head::before,
.pslider__head::before,
.community__title::before,
.about-band__title::before,
.commit__head::before,
.env-claim__inner::before,
.envhero__caption::before,
.wellbeing__copy::before,
.policy__body::before,
.envband__copy::before,
.pledge__head::before,
.contactband__copy::before,
.joinus__inner::before,
.recruit__copy::before,
.vacancies__head::before,
.enquiry__head::before,
.projintro__head::before,
.svcintro__head::before,
.room__copy::before,
.trust .display::before,
.process .display::before,
.journal .display::before,
.contact .display::before,
.feature__inner .display::before{
  content:none !important;
}

/* ============================================================
   55. HEADER AND FOOTER CARRY MORE WEIGHT
   Nunito Sans already loads 600, so this costs no extra request.
   The footer links also come up in opacity — at 200 weight the
   .75 wash was doing the work of a lighter colour, and once the
   letters thicken it reads as grey rather than white.
   ============================================================ */
.site-header .nav-btn,
.site-header .nav-btn__label{font-weight:600 !important}

.foot h3{font-weight:600 !important}
.foot a,
.foot-contact__text,
.foot-contact a.foot-contact__text,
.foot__legal a,
.foot__copy,
.foot__note{font-weight:400 !important}
.foot a{opacity:.88}
.foot-contact__text,
.foot-contact a.foot-contact__text{opacity:.9}
.foot__copy{opacity:.8}
.foot__note{opacity:.72}

/* ============================================================
   57. DEPARTMENT AND TEAM CARDS — ZOOM, NOT MINIMISE
   Two things were wrong here.

   The photograph pulled away to 82% on hover and a gold hairline
   drew in around its new edge. It now zooms instead.

   And the veil, cut back in section 51 to lift the colour cast,
   had gone too far: 28% black at .55 opacity is an effective 15%
   wash, which is not a ground for white type. The gradient is
   back, in navy, and the hover panel now carries its own wash so
   the three-line description has something to sit on.
   ============================================================ */
.dept__veil{
  background:linear-gradient(to top,
    rgba(12,33,48,.9) 0%,
    rgba(12,33,48,.5) 48%,
    rgba(12,33,48,.28) 100%) !important;
  opacity:1;
}

/* The reveal brings its own ground, so it fades in with the copy
   rather than needing a second veil to animate behind it. */
.dept__reveal{background:rgba(12,33,48,.5)}

@media(hover:hover){
  .dept:hover .dept__img,
  .dept:focus-visible .dept__img{transform:scale(1.06)}

  /* On hover the veil flattens to an even wash. Leaving the bottom
     of the gradient at .9 under a reveal panel would have stacked
     to near-solid navy, and the photograph would have gone. Flat
     .35 under the panel's .5 lands at about two thirds, which
     carries white type and still reads as a photograph. */
  .dept:hover .dept__veil,
  .dept:focus-visible .dept__veil{
    opacity:1 !important;
    background:rgba(12,33,48,.35) !important;
  }

  /* The drawn-in frame belonged to the minimise. */
  .dept:hover .dept__frame,
  .dept:focus-visible .dept__frame{
    inset:0;border-color:rgba(235,204,157,0);
  }
}

/* Touch screens show the description permanently, so the veil below
   it can ease off — the reveal wash is already doing the work. */
@media(hover:none){
  .dept__veil{opacity:1}
}

/* ============================================================
   58. THE FOOTER WORDMARK, LARGER
   It had been stepped down twice (sections 3 and 36) and ended up
   smaller than the block of links beside it deserved. Up by about
   a third at every width.

   The column it sits in is .7fr of the footer grid, which is
   roughly 286px at 946px viewport and 361px at full width. At the
   new ceiling the mark measures around 260px, so it still clears
   its column — and the mark is nowrap, so an overflow here would
   be visible rather than silent.
   ============================================================ */
.foot a.wordmark--foot{
  font-size:clamp(1.3rem,0.85rem + 1.25vw,2.85rem);
}

/* ============================================================
   59. DEPARTMENT CARDS KEEP THEIR OWN COLOUR
   Section 57 rebuilt the veil in navy, which put the blue cast
   back over the photography that section 51 had just taken off.
   Neutral black instead: it lowers luminance without touching hue
   or saturation, so a warm interior stays warm and only gets
   darker.

   The hover wash is also bottom-weighted rather than even. The
   copy sits at the foot of the card, so that is the only part
   that needs a ground — the top two thirds, where the zoom
   actually reads, comes back to near-true colour.
   ============================================================ */
.dept__veil{
  background:linear-gradient(to top,
    rgba(0,0,0,.82) 0%,
    rgba(0,0,0,.42) 45%,
    rgba(0,0,0,.2) 100%) !important;
  opacity:1;
}

.dept__reveal{
  background:linear-gradient(to top,
    rgba(0,0,0,.86) 0%,
    rgba(0,0,0,.5) 52%,
    rgba(0,0,0,.14) 100%);
}

@media(hover:hover){
  /* Almost nothing left on the veil at hover: the reveal gradient
     above it is carrying the text, so stacking a second wash here
     would only take the colour back out. */
  .dept:hover .dept__veil,
  .dept:focus-visible .dept__veil{
    opacity:1 !important;
    background:rgba(0,0,0,.12) !important;
  }
}

/* ============================================================
   60. THE ABOUT HEADING CARRIES THE GILDED O
   Same treatment as the wordmark. --accent already resolves to the
   pale gold on the navy panel and the deeper gold on the white and
   bone ones, so the O stays legible whichever background the client
   picks for the band.
   ============================================================ */
.about-band__title .o{color:var(--accent,var(--champagne))}

/* ============================================================
   61. FOOTER COLUMNS — CONTACT FIRST, LINKS IN ONE RUN
   The two columns swap: contact details lead, the company links
   follow. Done in the markup rather than with `order`, so the
   reading order a screen reader gets matches the visual one.

   The widths swap with them. Contact holds a five-line address and
   needs the wider column; the link list is one short word per row.
   ============================================================ */
.foot__cols{grid-template-columns:1.15fr .85fr}

/* The links ran in two sub-columns to keep the block short. With
   two items removed there is no longer enough to split, and a
   single run reads better against the address beside it. */
.foot__cols nav ul{grid-template-columns:1fr}

/* ============================================================
   62. QUIET LINK
   A heading that happens to be clickable. At rest it is
   indistinguishable from the heading around it: same colour, same
   weight, no underline, no marker. The only cue is on hover — a
   gold hairline draws in from the left, the same gesture the menu
   button uses.

   The cursor still turns to a pointer, which is the affordance
   that matters: it costs nothing visually and is how someone
   discovers the link is there.
   ============================================================ */
.quiet-link{
  color:inherit;text-decoration:none;
  position:relative;display:inline-block;
}
.quiet-link::after{
  content:'';position:absolute;left:0;right:100%;bottom:-.18em;height:1px;
  background:currentColor;opacity:.5;
  transition:right .45s var(--ease);
}
.quiet-link:hover::after,
.quiet-link:focus-visible::after{right:0}

/* Keyboard users get a visible ring; the heading is otherwise
   silent about being a link. */
.quiet-link:focus-visible{outline:1px solid var(--accent,var(--champagne));outline-offset:.35em}

/* ============================================================
   63. AWARDS ROW IN THE ABOUT BAND
   A horizontal run of badges under the button. Each sits on its
   own white tile, because the artwork is black and gold on
   transparency — dropped straight onto the navy panel the type
   would disappear.

   The row wraps rather than scrolls, and blank Customizer slots
   are skipped, so it absorbs new awards without touching code.
   ============================================================ */
.about-band__awards{
  margin-top:clamp(1.5rem,2.8vw,2.3rem);
}
.about-band__awards-label{
  font-size:0.5104rem;letter-spacing:0.22em;text-transform:uppercase;
  color:var(--accent,var(--champagne));opacity:.75;
  margin:0 0 clamp(.6rem,1.1vw,.9rem);font-weight:400;
}
.about-band__awards-row{
  display:flex;flex-wrap:wrap;align-items:stretch;
  gap:clamp(.4rem,1vw,.7rem);
  list-style:none;margin:0;padding:0;
}

/* Fixed height, free width: a square badge and a wide one both sit
   on the same baseline without either being distorted. */
.about-band__award{
  background:#FFFFFF;
  display:grid;place-items:center;
  height:clamp(3rem,5.2vw,4.2rem);
  min-width:clamp(3rem,5.2vw,4.2rem);
  padding:clamp(.3rem,.7vw,.5rem);
  margin:0;
  transition:transform .5s var(--ease-glide);
}
.about-band__award img{
  display:block;
  max-width:100%;max-height:100%;width:auto;height:auto;
  object-fit:contain;
}
.about-band__award:hover{transform:translateY(-2px)}

/* On a white or bone panel the tile would vanish into the ground,
   so it takes a hairline instead. */
.about-band--white .about-band__award,
.about-band--bone .about-band__award{
  border:1px solid rgba(27,65,86,.14);
}

@media(max-width:515.14px){
  .about-band__award{height:2.7rem;min-width:2.7rem}
}
@media(prefers-reduced-motion:reduce){
  .about-band__award{transition:none}
  .about-band__award:hover{transform:none}
}

/* ============================================================
   64. AWARDS AS ONE PANEL, NOT SEPARATE TILES
   Section 63 gave each badge its own white chip. With five badges
   of differing widths that wrapped four-and-one, and the chips
   read as stickers pasted onto the panel.

   One white field instead, with the badges spaced evenly inside
   it. It reads as a deliberate awards bar, a wrap is contained
   rather than looking broken, and adding a sixth award just
   extends the same field.
   ============================================================ */
.about-band__awards-row{
  background:#FFFFFF;
  align-items:center;
  gap:clamp(1rem,2.6vw,2rem);
  padding:clamp(.75rem,1.5vw,1.1rem) clamp(1rem,2.2vw,1.6rem);
  width:fit-content;max-width:100%;
}

/* The chip is gone; each badge is now just a sized box on the
   shared field. */
.about-band__award{
  background:none;
  padding:0;
  min-width:0;
  height:clamp(2.4rem,4.2vw,3.2rem);
}
.about-band__award:hover{transform:none}
.about-band--white .about-band__award,
.about-band--bone .about-band__award{border:0}

/* On a light panel the white field would disappear, so it takes a
   hairline. */
.about-band--white .about-band__awards-row,
.about-band--bone .about-band__awards-row{
  border:1px solid rgba(27,65,86,.14);
}

@media(max-width:515.14px){
  .about-band__award{height:2.2rem}
  .about-band__awards-row{gap:.9rem;padding:.7rem .9rem}
}

/* ============================================================
   65. AWARDS AS EQUAL WHITE SQUARES
   The shared panel goes. Each badge gets its own white square
   instead — same size for every one, whatever the shape of the
   artwork inside it, so the row reads as a set rather than as
   five different objects.

   Square is set with width plus aspect-ratio rather than a
   matching height, so one value governs both and they cannot
   drift apart at a breakpoint. The artwork is contained inside
   with padding, never cropped.
   ============================================================ */
.about-band__awards-row{
  background:none;
  border:0;
  padding:0;
  width:auto;
  align-items:flex-start;
  gap:clamp(.45rem,1vw,.75rem);
}
.about-band--white .about-band__awards-row,
.about-band--bone .about-band__awards-row{border:0}

.about-band__award{
  background:#FFFFFF;
  width:clamp(3.4rem,5.6vw,4.8rem);
  height:auto;
  aspect-ratio:1;
  min-width:0;
  padding:clamp(.35rem,.75vw,.55rem);
  display:grid;place-items:center;
}
.about-band__award img{
  max-width:100%;max-height:100%;
  width:auto;height:auto;
  object-fit:contain;
}

@media(max-width:515.14px){
  .about-band__award{width:3.1rem;height:auto}
  .about-band__awards-row{gap:.45rem;padding:0}
}

/* ============================================================
   66. AWARDS — EQUAL HEIGHT, FREE WIDTH, NO PADDING
   The square was the problem. Three of the four marks are wide
   lockups; forcing them into a square letterboxed them, so the
   artwork shrank until its width fitted and the leftover height
   showed as a thick white band.

   Equal height with free width instead. Every mark is set to the
   same cap height, which is what the eye actually compares, and
   each plate is only as wide as its own artwork. The padding is
   gone: the supplied files carry their own small margin, so any
   added here reads as a border.
   ============================================================ */
.about-band__award{
  width:auto;
  aspect-ratio:auto;
  height:clamp(2.8rem,5vw,4rem);
  min-width:0;
  padding:0;
  display:block;
  background:#FFFFFF;
}
.about-band__award img{
  height:100%;width:auto;
  max-width:none;max-height:100%;
  display:block;object-fit:contain;
}
.about-band__awards-row{align-items:center}

@media(max-width:515.14px){
  .about-band__award{height:2.4rem;width:auto}
}

/* ============================================================
   67. AWARDS, A LITTLE LARGER
   The badges carry two lines of caption under the logo, and at
   the previous ceiling those were legible but strained. Up to
   4.6rem. The supplied files are 240px tall, so even here they
   are rendering at better than 3x and stay crisp.
   ============================================================ */
.about-band__award{height:clamp(3rem,5.6vw,4.6rem)}
@media(max-width:515.14px){
  .about-band__award{height:2.7rem}
}

/* ============================================================
   68. NO PLATE BEHIND THE AWARDS
   The marks are supplied as gold-and-white artwork on
   transparency now, so they sit straight on the navy and the
   white rectangles go.

   Set to `none` rather than deleted: a badge supplied on a white
   background still carries its own white and renders exactly as
   before, so both kinds of file work in these slots.
   ============================================================ */
.about-band__award{background:none}

/* A reversed mark on a light panel would disappear. If the band is
   ever switched to white or bone the plate comes back, so the
   badges stay visible whichever ground is chosen. */
.about-band--white .about-band__award,
.about-band--bone .about-band__award{
  background:var(--navy);
  padding:clamp(.3rem,.6vw,.45rem);
}


/* ============================================================
   70. COMMUNITY ROWS SHARE A CENTRE LINE
   The network names were already centred, but each row is its own
   grid and the handle column was sized to its content. A long
   handle like @west_oneinteriors squeezed that row's middle
   column; a short one like 1GY5ztpCk1 left it wide. Every name
   centred correctly inside a column of a different width, so none
   of them lined up with each other.

   Fixing the handle column makes the middle column identical in
   every row, and the names fall on one axis. The width matches
   the max-width the handles already carried, so nothing truncates
   that did not truncate before.
   ============================================================ */
.social-row{grid-template-columns:auto 1fr 10.32rem}

/* The handle is hidden at this width, so the track goes with it —
   an empty 10.32rem column would drag the names off-centre. */
@media(min-width:600px) and (max-width:773.14px){
  .social-row{grid-template-columns:auto 1fr}
}
@media(max-width:515.14px){
  .social-row{grid-template-columns:auto 1fr 7.74rem}
}
@media(max-width:361.2px){
  .social-row{grid-template-columns:auto 1fr 6.02rem;gap:0.516rem}
}

/* ============================================================
   71. CENTRED HEADS TAKE CENTRED COPY
   Where a section heading is centred, the paragraph under it now
   centres with it. Where the heading sits left — the two-column
   bands beside a photograph, the project write-ups, the footer
   note — the copy is left exactly as it was.

   The set below is the theme's own list of body copy that already
   centres as a block (it carries margin-inline:auto a few hundred
   lines up). It excludes .about-band__text, .envband__text,
   .wellbeing__text, .recruit__text and .commit__text, which is
   right: those all sit in left-aligned columns.

   Hyphenation goes with the justification. Breaking a word across
   lines only earns its keep when it evens out word spacing on a
   flush edge; on ragged centred lines it just costs legibility.
   ============================================================ */
.statement__body,
.depts__sub,
.pslider__sub,
.community__sub,
.commit__sub,
.pledge__text,
.svcintro__text,
.projintro__text,
.enquiry__sub,
.joinus__text,
.envintro__cols p,
.lede{
  text-align:center;
  hyphens:manual;
  -webkit-hyphens:manual;
}

/* Several breakpoints dropped these back to left, because justified
   text breaks up in a narrow measure and opens rivers of white.
   Centred text has no such problem, so the centring holds all the
   way down. */
@media(max-width:899px){
  .statement__body,.depts__sub,.pslider__sub,.community__sub,
  .commit__sub,.svcintro__text,.projintro__text,
  .envintro__cols p,.lede{text-align:center}
}

/* ============================================================
   72. PROCESS STEPS CENTRE
   The step titles and their copy now centre inside each column.
   Two earlier rules had pinned them left — .steps at the section
   level and .step at the card level — so both are lifted here.

   The dividing rules between columns are untouched: they sit on
   the step's border, not its text, so the vertical lines stay
   where they are and only the content moves.
   ============================================================ */
.steps,
.step,
.step h4,
.step p{text-align:center}

/* The measure is what makes centred copy readable — a centred line
   that runs the full width of its column has too far to travel back
   to the start of the next one. This holds each block to a
   comfortable width and centres it in the column. */
.step p{margin-inline:auto;max-width:15rem}

/* ============================================================
   NOTE ON THE NUMBERING
   Sections 56 and 69 are deliberately absent. They set the footer,
   and then the whole site, in large-and-small capitals: a
   full-height capital opening each word with the rest of the word
   in small capitals, built from text-transform:capitalize plus
   font-variant-caps:small-caps.

   Both were removed at the client's request in 1.28.0. Every
   uppercase element is back to its original single-size capitals,
   governed by the text-transform:uppercase declarations that were
   already in this file — those were never edited, only overridden,
   so removing the overrides restores them exactly.

   Section 55 stays: the heavier header and footer weights were a
   separate change and were not part of what was rolled back.
   ============================================================ */

/* ============================================================
   73. OUR TEAM — THE PORTRAIT FIELD
   Replaces the four department bands. Every published team member
   sits on one navy field as a circular portrait; opening one shows
   the name, the designation and their line.

   The layout is set in team-field.js, which is where the spacing
   guarantee lives: portraits are placed so no two can come closer
   than their diameter plus 10px, and the field drifts as a single
   body so that clearance never changes while it moves.
   ============================================================ */
.teamfield{
  background:var(--navy);color:#FFFFFF;
  padding:clamp(3rem,7vw,5.5rem) var(--gutter) clamp(3rem,7vw,5rem);
}
.teamfield__head{max-width:var(--maxw);margin-inline:auto;text-align:center}
.teamfield__title{
  font-family:var(--brand);font-weight:400;margin:0;
  font-size:clamp(1.6rem,4vw,2.9rem);
  letter-spacing:.13em;text-transform:uppercase;line-height:1.15;
}
.teamfield__title .o{color:var(--champagne)}
.teamfield__body{
  max-width:36rem;margin:1.2rem auto 0;
  font-size:clamp(.72rem,1.3vw,.86rem);line-height:1.85;
  opacity:.66;text-align:center;
}
.teamfield__count{
  margin:1.3rem 0 0;font-size:.6rem;letter-spacing:.26em;
  text-transform:uppercase;color:var(--champagne);opacity:.85;
}

.teamfield__finder{position:relative;margin:1.5rem auto 0;width:min(16rem,80%)}
.teamfield__finder input{
  width:100%;background:none;border:0;
  border-bottom:1px solid rgba(235,204,157,.3);
  padding:.45rem .2rem .5rem 1.5rem;color:#FFFFFF;
  font-family:var(--body);font-weight:300;font-size:.76rem;letter-spacing:.05em;
  transition:border-color .4s;
}
.teamfield__finder input::placeholder{color:rgba(255,255,255,.4)}
.teamfield__finder input:focus{outline:0;border-bottom-color:var(--champagne)}
.teamfield__finder svg{position:absolute;left:0;top:.55rem;opacity:.45;color:#FFFFFF}
.teamfield__miss{
  margin:.55rem 0 0;font-size:.68rem;color:var(--champagne);
  opacity:0;transition:opacity .3s;min-height:1em;
}
.teamfield__miss.is-on{opacity:1}

.teamfield__stage{max-width:var(--maxw);margin:clamp(1.8rem,4vw,2.8rem) auto 0}
.teamfield__grid{position:relative;width:100%}

.teamfield__pop{
  position:absolute;border-radius:50%;padding:0;cursor:pointer;overflow:hidden;
  display:grid;place-items:center;
  background:#16344A;border:1px solid rgba(235,204,157,.24);
  color:var(--champagne);font-family:var(--brand);line-height:1;
  transition:opacity .5s,border-color .35s,transform .6s var(--ease-glide);
}
.teamfield__pop img{width:100%;height:100%;object-fit:cover;display:block}
.teamfield__pop:hover{border-color:var(--champagne)}
.teamfield__pop.is-open{border-color:var(--champagne);border-width:2px;transform:scale(1.35);z-index:5}
.teamfield__pop.is-dim{opacity:.12 !important}
.teamfield__pop.is-miss{opacity:.06 !important}

.teamfield__caption{
  position:relative;text-align:center;
  padding:clamp(1.8rem,4vw,2.6rem) 0 0;min-height:13rem;
}
.teamfield__hint{
  position:absolute;left:0;right:0;top:clamp(1.8rem,4vw,2.6rem);margin:0;
  font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;
  opacity:.34;transition:opacity .4s;pointer-events:none;
}
.teamfield__hint.is-off{opacity:0}
.teamfield__card{
  opacity:0;transform:translateY(10px);
  transition:opacity .45s,transform .45s var(--ease-glide);
}
.teamfield__card.is-on{opacity:1;transform:translateY(0)}
.teamfield__portrait{
  width:5.6rem;height:5.6rem;border-radius:50%;overflow:hidden;
  margin:0 auto 1.1rem;background:#16344A;
  border:1px solid rgba(235,204,157,.4);
  display:grid;place-items:center;
  color:var(--champagne);font-family:var(--brand);font-size:2rem;
}
.teamfield__portrait img{width:100%;height:100%;object-fit:cover;display:block}
.teamfield__name{
  font-family:var(--brand);font-size:clamp(1.1rem,2.4vw,1.5rem);
  letter-spacing:.11em;text-transform:uppercase;
}
.teamfield__role{
  margin-top:.5rem;font-size:.6rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--champagne);
}
/* Their own words, set in the display face at nearly the size of the
   name. It is the human part of the page and should not read as a
   footnote. */
.teamfield__line{
  margin:1rem auto 0;padding-top:.95rem;max-width:24rem;
  border-top:1px solid rgba(235,204,157,.28);
  font-family:var(--brand);font-size:clamp(.9rem,1.8vw,1.1rem);
  line-height:1.55;letter-spacing:.03em;opacity:.92;
}

@media(max-width:515.14px){
  .teamfield__caption{min-height:14rem}
  .teamfield__portrait{width:4.6rem;height:4.6rem;font-size:1.6rem}
}
@media(prefers-reduced-motion:reduce){
  .teamfield__pop,.teamfield__card{transition:opacity .3s}
}

/* Joined date, quietest line on the card. */
.teamfield__since{
  margin-top:.6rem;font-size:.64rem;letter-spacing:.14em;opacity:.45;
}

/* ============================================================
   74. THE OPENED PORTRAIT, LARGER
   The picture is the reason to click, so it now leads the card at
   roughly twice its previous size, with the name, designation,
   line and joined date reading beneath it.

   It arrives with a short rise rather than appearing at full size,
   which links it to the circle that was clicked instead of having
   it simply materialise.
   ============================================================ */
.teamfield__portrait{
  width:clamp(7rem,13vw,10.5rem);
  height:clamp(7rem,13vw,10.5rem);
  margin:0 auto clamp(1.2rem,2.4vw,1.7rem);
  border-color:rgba(235,204,157,.55);
  font-size:clamp(2.2rem,4vw,3.2rem);
  transform:scale(.86);
  transition:transform .55s var(--ease-glide);
}
.teamfield__card.is-on .teamfield__portrait{transform:scale(1)}

/* The card is taller now, so the caption reserves more room and the
   layout does not jump when someone opens their first portrait. */
.teamfield__caption{min-height:21rem}

@media(max-width:515.14px){
  .teamfield__portrait{
    width:6.6rem;height:6.6rem;font-size:2.1rem;
  }
  .teamfield__caption{min-height:20rem}
}
@media(prefers-reduced-motion:reduce){
  .teamfield__portrait{transition:none;transform:none}
}

/* ============================================================
   75. ABOUT PAGE — THE TEAM SECTION IS NOW AN INTRODUCTION
   The four department cards have gone with the departments. What
   is left is a heading, its line and a way through to the Our Team
   page, so the band needs its own spacing rather than inheriting
   the room a grid used to fill.
   ============================================================ */
.depts--intro{
  padding-bottom:clamp(3rem,6vw,4.5rem);
}
.depts--intro .depts__head{margin-bottom:0}
.depts__go{margin:clamp(1.6rem,3vw,2.4rem) 0 0}

/* ============================================================
   76. OUR TEAM — SQUARE MOSAIC
   Circles become a two-tier collage. A large square is exactly two
   by two of the small ones, which is the whole trick: any other
   ratio would produce rectangles, and any other size would leave
   gaps the packer could not close.

   Sizing and placement are in team-field.js. What is here is only
   the look.
   ============================================================ */
.teamfield__pop{
  border-radius:0;
  border-color:rgba(235,204,157,.18);
}
.teamfield__pop.is-large{
  border-color:rgba(235,204,157,.34);
}

/* The squares sit four pixels apart, so the old scale would have
   buried its neighbours. A small lift and a gold edge instead, with
   the tile raised above the rest. */
.teamfield__pop.is-open{
  transform:scale(1.07);
  border-width:1px;
  border-color:var(--champagne);
  box-shadow:0 0.75rem 2rem rgba(4,14,22,.55);
  z-index:6;
}
.teamfield__pop.is-dim{opacity:.22 !important}
.teamfield__pop.is-miss{opacity:.08 !important}

/* The opened portrait follows the mosaic rather than staying round. */
.teamfield__portrait{
  border-radius:0;
}

@media(max-width:515.14px){
  .teamfield__pop.is-open{transform:scale(1.04)}
}

/* ============================================================
   77. NO BORDERS ON THE MOSAIC
   The gold hairline came off the circles, where it separated one
   portrait from its neighbour on a dark ground. Squares do not
   need it: they already have straight edges, and the gap between
   them does the separating.

   The gap itself goes from four pixels to nine, so the tiles read
   as individual photographs rather than one continuous sheet.
   Set in team-field.js, since the layout maths depends on it.
   ============================================================ */
.teamfield__pop,
.teamfield__pop.is-large{
  border:0;
}

/* Hover and focus are carried by the lift and the shadow instead of
   a ring. Keyboard focus keeps a visible outline, since a shadow
   alone is not a reliable focus cue. */
.teamfield__pop.is-open{
  border:0;
  box-shadow:0 0.8rem 2.2rem rgba(4,14,22,.6);
}
.teamfield__pop:focus-visible{
  outline:2px solid var(--champagne);
  outline-offset:2px;
}

/* The opened portrait loses its ring too. */
.teamfield__portrait{
  border:0;
}

/* ============================================================
   78. FIVE AWARDS ON ONE LINE
   With the fifth badge the row came to roughly 643px against a
   644px column, so it wrapped by a hair and dropped one badge
   onto a line of its own.

   Rather than shrink the artwork again, the room comes from two
   places: the gap between badges closes by about half, and the
   badges come down about 6%. That buys roughly 40px of slack, so
   the row holds even if the column narrows slightly or a heading
   reflows.
   ============================================================ */
.about-band__awards-row{
  gap:clamp(.25rem,.55vw,.42rem);
  flex-wrap:wrap;
}
.about-band__award{
  height:clamp(2.8rem,5.25vw,4.3rem);
}

@media(max-width:515.14px){
  .about-band__award{height:2.5rem}
  .about-band__awards-row{gap:.3rem}
}

/* ============================================================
   79. THE VACANCY DESCRIPTION PANEL
   The summary and the PDF link sit in one panel. As two sections
   the link's top margin collapsed out of a section with no top
   padding, which opened a gap and let the navy body colour show
   through between them.

   The section itself is white, not transparent: transparent let
   the navy body show around the narrowed panel. White carries
   straight through from the title block above to the form below,
   so the cream panel is the only thing that reads as a block.
   ============================================================ */
.single-vacancy .entry{
  background:var(--bone);
  color:var(--navy);
  padding-block:clamp(2.2rem,4.5vw,3.4rem);
}

/* The cream runs the full width of the page; only the text inside it
   is held to a measure. Backing the panel rather than the section made
   the description read as a card floating on white — one continuous
   band reads as a document. */
.entry--vacancy .wrap{
  max-width:min(52rem, 100%);
  background:none;
  padding:0;
}

/* The three blocks on this page were spaced as though each were a
   section of its own. They are one sequence — role, description,
   apply — so the air between them closes up. */
.single-vacancy .statement{
  padding-top:clamp(2.6rem,5.5vw,4.4rem);
  padding-bottom:clamp(1.2rem,2.4vw,2rem);
}
.single-vacancy .applyform{
  padding-top:clamp(1.6rem,3.2vw,2.6rem);
}

/* The link sits close under the description — near enough to read as
   part of it, far enough not to crowd the last line. */
.jobdoc{
  margin:clamp(1rem,2vw,1.4rem) 0 0;
  text-align:center;
}
.jobdoc__link{
  display:inline-flex;align-items:center;gap:.55rem;
  color:var(--champagne-d);text-decoration:none;
  font-size:clamp(.74rem,1.3vw,.86rem);
  letter-spacing:.1em;
  padding-bottom:.28rem;
  border-bottom:1px solid rgba(160,121,74,.4);
  transition:color .35s,border-color .35s;
}
.jobdoc__link:hover,
.jobdoc__link:focus-visible{
  color:var(--navy);
  border-bottom-color:var(--navy);
}
.jobdoc__icon{flex:0 0 auto}
.jobdoc__meta{opacity:.7;letter-spacing:.04em}

@media(max-width:515.14px){
  .entry--vacancy .wrap{padding:1.6rem 1.2rem}
}

/* ============================================================
   80. THE OVERLAY MENU
   The panel now carries the same round gold icons as the footer
   instead of a second row of text links, so the two places the
   site lists its social accounts look like each other.

   The list inherits .foot__socials for the circles themselves and
   only overrides what the overlay needs: alignment with the menu
   above it, and a little more room between them.
   ============================================================ */
.overlay-nav__socials{
  justify-content:flex-end;
  gap:.85rem;
  margin-top:clamp(1rem,2vw,1.5rem);
}
.overlay-nav__socials a{
  width:2.1rem;height:2.1rem;
  border-color:rgba(235,204,157,.45);
}
.overlay-nav__socials svg{width:.95rem;height:.95rem}

/* The panel is right-aligned, so the icons sit under the last
   letter of the menu rather than under its first. */
.overlay-nav__foot{text-align:right}

@media(max-width:719px){
  .overlay-nav__socials{justify-content:flex-start}
  .overlay-nav__foot{text-align:left}
}

/* ============================================================
   81. THE MENU ARRIVES ONE ITEM AT A TIME
   The items used to fade in together, which read as one block
   appearing. They now travel in from beyond the panel's edge and
   land in sequence, so the eye follows them down the list.

   The stagger is on nth-child rather than a JS-set index: no
   script has to run for the animation to work, and it cannot fall
   out of step with the markup.

   The delays sit under .menu-open only. On the way out the class
   is gone, so every item leaves at once — a reverse stagger on
   closing makes a menu feel slow to dismiss.
   ============================================================ */
.overlay-nav__list li{
  opacity:0;
  transform:translateX(-3.4rem);
  transition:opacity .62s var(--ease-glide), transform .72s var(--ease-glide);
}
.menu-open .overlay-nav__list li{opacity:1;transform:none}

.menu-open .overlay-nav__list li:nth-child(1){transition-delay:0.260s}
.menu-open .overlay-nav__list li:nth-child(2){transition-delay:0.332s}
.menu-open .overlay-nav__list li:nth-child(3){transition-delay:0.404s}
.menu-open .overlay-nav__list li:nth-child(4){transition-delay:0.476s}
.menu-open .overlay-nav__list li:nth-child(5){transition-delay:0.548s}
.menu-open .overlay-nav__list li:nth-child(6){transition-delay:0.620s}
.menu-open .overlay-nav__list li:nth-child(7){transition-delay:0.692s}
.menu-open .overlay-nav__list li:nth-child(8){transition-delay:0.764s}
.menu-open .overlay-nav__list li:nth-child(9){transition-delay:0.836s}
.menu-open .overlay-nav__list li:nth-child(10){transition-delay:0.908s}
.menu-open .overlay-nav__list li:nth-child(11){transition-delay:0.980s}
.menu-open .overlay-nav__list li:nth-child(12){transition-delay:1.052s}
.menu-open .overlay-nav__list li:nth-child(13){transition-delay:1.124s}
.menu-open .overlay-nav__list li:nth-child(14){transition-delay:1.196s}

/* The tagline and icons come last, after the final menu item has
   landed rather than alongside it. */
.overlay-nav__foot{
  transform:translateX(-2rem);
  transition:opacity .62s var(--ease-glide), transform .72s var(--ease-glide);
}
.menu-open .overlay-nav__foot{transition-delay:1.02s}

@media(prefers-reduced-motion:reduce){
  .overlay-nav__list li,
  .overlay-nav__foot{
    transform:none;
    transition:opacity .3s;
  }
  .menu-open .overlay-nav__list li,
  .menu-open .overlay-nav__foot{transition-delay:0s}
}


/* ============================================================
   82. THE GILDED O IN SECTION HEADINGS
   The wordmark gilds the O of "One"; the headings that carry the
   brand name now do the same. --champagne-d on a light ground,
   because the pale gold reads at about 2.2:1 on white and would
   lose the letter rather than mark it.
   ============================================================ */
.statement__title .o{color:var(--champagne-d)}
.statement--navy .statement__title .o{color:var(--champagne)}

/* ============================================================
   83. THE PROJECTS HERO, TIGHTENED
   The page hero carries up to 12rem of top padding because it is
   built to hold a background photograph behind the title. The
   project and sector archives never set one, so all that room was
   empty navy above the word and a second gap below it.

   Kept clear of the fixed header at the small end: the floor here
   is 5rem against a header of roughly 4.5rem.
   ============================================================ */
.post-type-archive-project .page-hero,
.tax-sector .page-hero{
  padding-top:clamp(5rem,8.5vw,6.8rem);
  padding-bottom:clamp(1.2rem,2.4vw,2rem);
}

/* The gap under the title was the hero's bottom padding and the
   next section's top padding stacked together. */
.post-type-archive-project .projects,
.tax-sector .projects{
  padding-top:clamp(1.6rem,3vw,2.4rem);
}

/* ============================================================
   84. PROJECT PLATES
   Replaces the full-bleed room bands and the Step Inside rail.

   The rule that makes this work: a photograph is never cropped. It
   is given a ceiling in both directions and finds its own shape
   inside that box, so a portrait comes out tall and a landscape
   wide, and both arrive whole. The bands cropped because a fixed
   height forces the photograph to fill it — take the fixed height
   away and the cropping goes with it.

   The space around each photograph is doing the work here. A
   full-bleed image shouts; one hung with air around it says the
   thing is worth looking at.
   ============================================================ */
.plates{background:var(--navy);color:#FFFFFF}

.plate{
  display:grid;
  gap:clamp(1.4rem,3.5vw,3rem);
  align-items:center;
  max-width:82rem;margin-inline:auto;
  padding:clamp(2.4rem,6vw,5rem) var(--gutter);
}
.plate__figure{margin:0;justify-self:center;max-width:100%}
.plate__figure img{
  max-height:76vh;
  max-width:100%;
  width:auto;height:auto;
  display:block;
  box-shadow:0 2rem 4rem rgba(4,12,20,.45);
}

.plate__index{
  font-family:var(--brand);font-size:1.05rem;
  color:var(--champagne);letter-spacing:.12em;margin:0 0 .9rem;
}
.plate__name{
  font-family:var(--brand);font-weight:400;margin:0 0 .9rem;
  font-size:clamp(1.1rem,2.2vw,1.65rem);
  letter-spacing:.14em;text-transform:uppercase;line-height:1.2;
}
.plate__rule{width:2.4rem;height:1px;background:var(--champagne);opacity:.7;margin:0 0 1.1rem}
.plate__text{
  margin:0;font-size:clamp(.78rem,1.4vw,.9rem);
  line-height:1.95;opacity:.74;max-width:26rem;
}
.plate__detail{
  margin:1.3rem 0 0;font-size:.62rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--champagne);opacity:.85;
}

/* Centred: the words sit beneath the photograph, both centred. */
.plate--centre{justify-items:center;text-align:center}
.plate--centre .plate__rule{margin-inline:auto}
.plate--centre .plate__text{max-width:34rem}

/* Beside: photograph one side, words the other. A portrait shot gets
   a narrower column than a landscape one, or the words are squeezed. */
@media(min-width:860px){
  .plate--left{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr)}
  .plate--right{grid-template-columns:minmax(0,1fr) minmax(0,1.45fr)}
  .plate--right .plate__figure,
  .plate--right .plate__pair{order:2}
  .plate--right .plate__body{order:1}
  .plate--tall.plate--left{grid-template-columns:minmax(0,.9fr) minmax(0,1fr)}
  .plate--tall.plate--right{grid-template-columns:minmax(0,1fr) minmax(0,.9fr)}
}

/* A pair of detail shots reading as one thought. */
.plate--pair{justify-items:center;text-align:center}
.plate--pair .plate__rule{margin-inline:auto}
.plate__pair{display:grid;gap:clamp(.7rem,1.6vw,1.4rem);grid-template-columns:1fr}
@media(min-width:700px){
  .plate__pair{grid-template-columns:1fr 1fr;align-items:end}
}
.plate__pair img{max-height:60vh;max-width:100%;width:auto;height:auto;margin-inline:auto;display:block}

/* A plate on bone, for the lighter rooms. Full width so the ground
   changes rather than a panel floating on navy. */
.plate--bone{
  background:var(--bone);color:var(--navy);
  max-width:none;
}
.plate--bone > *{max-width:82rem}
.plate--bone .plate__index,
.plate--bone .plate__detail{color:var(--champagne-d)}
.plate--bone .plate__rule{background:var(--champagne-d)}
.plate--bone .plate__figure img,
.plate--bone .plate__pair img{box-shadow:0 1.5rem 3rem rgba(12,33,48,.16)}

/* A line of words alone between photographs, to slow the eye. */
.interlude{
  padding:clamp(2.6rem,7vw,5.5rem) var(--gutter);
  text-align:center;max-width:44rem;margin-inline:auto;
}
.interlude p{
  font-family:var(--brand);margin:0;
  font-size:clamp(1.05rem,2.4vw,1.75rem);
  line-height:1.6;letter-spacing:.04em;opacity:.92;
}

@media(max-width:859px){
  .plate{justify-items:center;text-align:center}
  .plate__rule{margin-inline:auto}
  .plate__text{margin-inline:auto}
}

/* ============================================================
   85. THE TEAM CARD OPENS IN PLACE
   The details used to appear in a panel at the foot of the field.
   At 200 people that block runs two thousand pixels tall, so
   hovering someone near the top meant scrolling to read about
   them — by which point the cursor had left and the card had gone.

   It now opens over the tile itself, sized from that tile and
   clamped inside the field, growing from the tile's own centre so
   it reads as that portrait enlarging rather than a panel
   appearing from nowhere.
   ============================================================ */
.teamfield__pop-card{
  position:absolute;z-index:40;
  background:var(--navy-ink,#0A1B27);
  border:1px solid rgba(235,204,157,.35);
  padding:clamp(.8rem,1.6vw,1.15rem);
  text-align:center;pointer-events:none;
  opacity:0;transform:scale(.86);
  transition:opacity .3s var(--ease-glide),transform .38s var(--ease-glide);
  box-shadow:0 1.4rem 3rem rgba(4,12,20,.55);
}
.teamfield__pop-card.is-on{opacity:1;transform:scale(1)}

.teamfield__pop-photo{
  width:100%;aspect-ratio:1;overflow:hidden;
  background:#16344A;margin-bottom:.8rem;
  display:grid;place-items:center;
  color:var(--champagne);font-family:var(--brand);font-size:2rem;
}
.teamfield__pop-photo img{width:100%;height:100%;object-fit:cover;display:block}
.teamfield__pop-name{
  font-family:var(--brand);font-size:clamp(.9rem,1.6vw,1.1rem);
  letter-spacing:.1em;text-transform:uppercase;line-height:1.25;color:#FFFFFF;
}
.teamfield__pop-role{
  margin-top:.4rem;font-size:.56rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--champagne);
}
.teamfield__pop-line{
  margin-top:.7rem;padding-top:.6rem;
  border-top:1px solid rgba(235,204,157,.24);
  font-family:var(--brand);font-size:.84rem;line-height:1.5;
  color:#FFFFFF;opacity:.9;
}
.teamfield__pop-since{margin-top:.45rem;font-size:.58rem;letter-spacing:.12em;opacity:.5;color:#FFFFFF}

/* The caption at the foot is now only for touch, where there is no
   hover to open a card with. */
@media(hover:hover){
  .teamfield__caption{min-height:0;padding-bottom:0}
  .teamfield__card{display:none}
}

@media(prefers-reduced-motion:reduce){
  .teamfield__pop-card{transition:opacity .2s;transform:none}
  .teamfield__pop-card.is-on{transform:none}
}

/* ============================================================
   86. THE SERVICE BANDS DRIFT AS YOU SCROLL
   The photograph is taller than the band that holds it, so it has
   somewhere to travel. The extra 15% above and below is the room
   the parallax moves within — without it the image would pull
   away from an edge and show the ground behind.

   The movement itself is in main.js, driven by where the band
   sits in the viewport rather than by the scroll position, so it
   behaves the same wherever the band appears on the page.
   ============================================================ */
.svcband__media{
  will-change:transform;
}

/* The hover scale sits on the image and the parallax on its parent,
   so the two compose instead of overwriting each other. */
.svcband__media img,
.svcband__media svg{transform-origin:center}

@media(prefers-reduced-motion:reduce){
  .svcband__media{inset:0;transform:none !important}
}

/* ============================================================
   87. THE SERVICE BANDS FILL THE SCREEN
   Each band was about a quarter of the viewport, which made the
   photograph a strip across the page. At roughly three quarters
   one service occupies the screen at a time and you move from one
   to the next — the photograph becomes a room rather than a band.

   A ceiling in rem as well as vh, so the bands do not become
   absurd on a tall desktop monitor, and a floor so they still
   work on a laptop.
   ============================================================ */
.svcband{
  min-height:clamp(24rem,74vh,42rem);
}

/* The copy needs more room to breathe in a band this tall, and the
   title can carry more weight without shouting. */
.svcband__title{font-size:clamp(1.35rem,3.2vw,2.4rem)}
.svcband__text{max-width:30rem}
.svcband__body{max-width:34rem}

/* ============================================================
   88. A STRONGER DRIFT
   The travel was deliberately quiet. With bands three times the
   height there is room for more of it, and at this size the
   subtler version reads as nothing at all.

   The slack widens with it. The image is 150% of the band and the
   travel 16% of the image, which works out at 24% of the band
   against 25% of slack on each side. Inside its room at every
   point, so no edge can be exposed — the first attempt at this
   used 20% of slack and overshot by 2.4%.
   ============================================================ */
.svcband__media{inset:-25% 0}

@media(prefers-reduced-motion:reduce){
  .svcband__media{inset:0}
}

/* On a phone a band that tall becomes a wall of photograph with the
   words stranded at the bottom, so it comes back down. */
@media(max-width:719px){
  .svcband{min-height:clamp(18rem,56vh,26rem)}
}

/* ============================================================
   89. VIDEO IN SERVICES
   A service can now carry a video behind its title and inside its
   card on the homepage. The existing rules only ever addressed
   img, so a video element fell through them and sat at its own
   intrinsic size instead of covering its box.

   Matched to the img rules rather than given their own, so the
   card behaves identically whichever it holds — the zoom on hover
   and the parallax both apply to either.
   ============================================================ */
.dept__img video{width:100%;height:100%;object-fit:cover;display:block}
.svchero__media video{width:100%;height:100%;object-fit:cover;display:block}
.svcband__media video{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.6s var(--ease-glide)}
.svcband:hover .svcband__media video,
.svcband:focus-visible .svcband__media video{transform:scale(1.05)}

/* No zoom rule for the department card: that transform already sits on
   .dept__img itself, so adding one to the video inside would compound
   the two and scale it to 1.12 instead of 1.06. */

/* ============================================================
   90. THE SERVICE HERO RUNS FULL SCREEN
   Matched to the project hero rather than given its own
   treatment: same height, same gradient, same caption at the
   foot. A service and a project now open the same way, which is
   the point — both are a piece of work being introduced.

   The title comes off gold and onto white. Gold over a moving
   photograph sits too close to the warm tones in the footage and
   loses its edge; white holds against anything.
   ============================================================ */
.svchero--full{
  height:100vh;height:100svh;min-height:30rem;
  display:grid;place-items:end center;
  align-items:end;
}
.svchero--full .svchero__media video,
.svchero--full .svchero__media img{width:100%;height:100%;object-fit:cover;display:block}

/* The project hero's gradient: dark at the top so the fixed header
   holds, clear through the middle so the footage is seen, dark again
   at the foot so the title has a ground. */
.svchero--full .svchero__veil{
  background:linear-gradient(to bottom,
    rgba(7,21,32,.62) 0%,
    rgba(7,21,32,.12) 34%,
    rgba(7,21,32,.86) 100%);
}

.svchero--full .svchero__inner{
  width:100%;max-width:60rem;text-align:center;
  padding:0 var(--gutter) clamp(2.2rem,4vw,3.4rem);
}
.svchero--full .svchero__title{
  color:#FFFFFF;
  font-size:clamp(1.3rem,.8rem + 1.5vw,2.4rem);
}

@media(max-width:719px){
  .svchero--full{min-height:24rem}
}

/* ============================================================
   91. THE TRANSPARENT HEADER ON INNER PAGES
   With the service hero now full-bleed, and the team, environment
   and archive pages all opening on something dark, those pages
   join the front page in letting the header sit over the content
   until you scroll.

   The archives open on .page-hero, which carries generous top
   padding partly to clear a solid header. With the bar transparent
   there, the title can come up — but not past the header itself,
   hence the floor.
   ============================================================ */
.has-full-hero.post-type-archive-project .page-hero,
.has-full-hero.post-type-archive-service .page-hero,
.has-full-hero.tax-sector .page-hero{
  padding-top:clamp(6.5rem,11vw,8.5rem);
}

/* The service hero's own top gradient already darkens behind the bar,
   so nothing more is needed there. */

/* ============================================================
   92. THE INTERLUDE SITS CLOSER
   The space around a line of words was three paddings stacked:
   the plate's bottom, the interlude's own, and the next plate's
   top. Together that came to roughly thirteen rem, which read as
   the page having ended.

   All three come down. The line still has air around it — it is
   meant to slow the eye — but it now belongs to the photographs
   either side of it rather than floating between two sections.
   ============================================================ */
.interlude{
  padding-block:clamp(1.1rem,2.6vw,2rem);
}

/* The plate before an interlude gives up most of its lower padding,
   and the one after it most of its upper. */
.plate:has(+ .interlude){padding-bottom:clamp(1rem,2.4vw,1.8rem)}
.interlude + .plate{padding-top:clamp(1rem,2.4vw,1.8rem)}

/* ============================================================
   93. THE PROJECT RIBBONS DRIFT TOO
   The same treatment the service bands got. The photograph is
   taller than the band that holds it, and that surplus is the
   room the parallax travels within.

   Geometry checked rather than guessed: the image is 150% of the
   band, giving 25% of slack on each side, and the travel is 16%
   of the image — 24% of the band. Inside its room at every point,
   so no edge can be exposed at the extremes of a scroll.
   ============================================================ */
.room__media{
  inset:-25% 0;
  will-change:transform;
}

/* The hover scale sits on the image and the drift on its parent, so
   the two compose rather than overwrite each other. */
.room__media img{transform-origin:center}

@media(prefers-reduced-motion:reduce){
  .room__media{inset:0;transform:none !important}
}

/* ============================================================
   94. THE RULE ABOVE A ROOM NAME RETURNS
   Section 54 removed the short gold rule from every heading on the
   site. That was right for the section heads it was aimed at, but
   it also caught this one — where the rule is not decoration but
   the thing that separates the copy from the photograph behind it.

   Restored only here. Every other heading stays as it is.
   ============================================================ */
.room__copy::before{
  content:'' !important;
  display:block;width:2rem;height:1px;
  background:var(--champagne);opacity:.9;
  margin-bottom:clamp(.5rem,1vw,.9rem);
}

/* On a flipped band the copy sits right, so its rule does too. */
@media(min-width:760px){
  .room--flip .room__copy::before{margin-left:auto;margin-right:0}
}

/* ============================================================
   95. VIDEOS NO LONGER TREMBLE ON HOVER
   A transform starting and finishing makes the browser promote the
   element to its own compositing layer and then drop it again,
   re-rasterising the frame at both ends. On a photograph that is
   invisible. On a video, which is decoding new frames throughout,
   it shows as a shimmer for about a second as the hover begins and
   again as it ends.

   Keeping these elements on a layer permanently removes both
   events — there is nothing left to promote or demote.

   backface-visibility rather than will-change: will-change asks the
   browser to reserve memory for every element carrying it, and six
   autoplaying videos on the homepage grid is already enough to be
   holding. This gets the same layer without the reservation.
   ============================================================ */
.dept__img,
.dept__img video,
.dept__img img,
.svchero__media video,
.projhero__media video,
.room__media video,
.room__media img,
.hero__media video{
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}

/* The service band scales the video itself, so its resting state needs
   a transform of its own for the layer to exist before the hover —
   and the hover value has to carry it, or it would undo it. */
.svcband__media video{
  transform:translateZ(0);
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
.svcband:hover .svcband__media video,
.svcband:focus-visible .svcband__media video{transform:scale(1.05) translateZ(0)}

/* The card was only hinted at the moment the hover began, which is
   exactly too late to prevent the promotion it was meant to smooth. */
.dept:hover .dept__img{will-change:auto}

/* ============================================================
   96. TALLER PROJECT RIBBONS
   From clamp(19rem, 56vh, 32rem) to clamp(24rem, 68vh, 40rem).

   The photograph fills the band with object-fit:cover, which crops
   whichever dimension has the surplus — on a landscape shot in a
   short band that is the top and the bottom. A taller band brings
   the crop closer to the photograph's own proportions, so less of
   the ceiling and floor is lost.

   The parallax is unaffected: its slack and travel are both
   percentages of the band, so the 25%-against-24% margin holds at
   any height.
   ============================================================ */
.room{
  height:clamp(24rem,68vh,40rem);
}

@media(max-width:719px){
  .room{height:clamp(18rem,52vh,26rem)}
}

/* ============================================================
   97. A WEIGHTIER WORDMARK
   Poiret One has one weight and no bold, so font-weight here would
   only get the browser's synthetic bold — which smears a hairline
   display face rather than drawing it heavier.

   A stroke thickens the letterforms themselves instead, evenly and
   at any size. currentColor means the gilded O strokes gold while
   the rest strokes white, without a second rule.

   Set in em so it holds its proportion as the mark scales: the
   stroke grows with the type rather than becoming heavy on the
   small header and invisible on a large one.
   ============================================================ */
.site-header .wordmark{
  -webkit-text-stroke:0.022em currentColor;
  paint-order:stroke fill;
}

/* ============================================================
   97. A HEAVIER WORDMARK
   Poiret One ships in one weight only, so font-weight:600 would be
   synthesised — the browser smears the glyph sideways, which on a
   hairline display face thickens the verticals and leaves the
   curves thin. It reads as a rendering fault rather than a bolder
   cut.

   A stroke on the outline itself thickens every part of the letter
   evenly and keeps the shapes exactly as drawn. currentColor, so
   the gilded O takes gold and the rest takes white without needing
   a rule of its own.

   paint-order puts the stroke behind the fill, which keeps the
   inner edge crisp instead of the stroke eating into it.
   ============================================================ */
.site-header .wordmark{
  -webkit-text-stroke:0.45px currentColor;
  text-stroke:0.45px currentColor;
  paint-order:stroke fill;
}

/* The stroke is a fixed width while the mark scales, so it carries
   more visual weight at the small end. A touch less on narrow
   screens keeps it looking like the same wordmark. */
@media(max-width:719px){
  .site-header .wordmark{
    -webkit-text-stroke-width:0.3px;
    text-stroke-width:0.3px;
  }
}

/* ============================================================
   98. VIDEOS DO NOT SCALE ON HOVER
   My earlier reading of this was wrong. It is not the promotion at
   the start and end of the transform — it is the transform itself,
   running for its full 1.6 seconds.

   Scaling a photograph is cheap: one bitmap, resampled once and
   handed to the compositor. Scaling a video is not. Twenty-five new
   frames a second arrive while the target size is still changing,
   so each is rasterised at a slightly different scale. That is the
   shimmer, and it lasts exactly as long as the transition.

   It was invisible before only because reduced motion had disabled
   the transition along with everything else.

   Photographs keep the zoom. Videos do not — they already carry
   motion of their own, so the hover cue is the veil lifting and the
   copy shifting, which is enough.
   ============================================================ */
.svcband:hover .svcband__media video,
.svcband:focus-visible .svcband__media video{
  transform:translateZ(0) !important;
}

/* The department card scales its wrapper, so the test has to be on
   what the wrapper holds. */
.dept__img:has(video),
.dept:hover .dept__img:has(video),
.dept:focus-visible .dept__img:has(video){
  transform:none !important;
}

/* Without :has, an older browser keeps the scale — the shimmer
   returns there, but nothing breaks. The transition is shortened so
   it is over quickly rather than dwelling. */
@supports not selector(:has(video)){
  .dept__img{transition-duration:.45s}
}

/* ============================================================
   99. THE PAGE NO LONGER OPENS AT THE RAIL
   Clicking a project from the homepage landed part-way down the
   page rather than at the hero.

   The cause was the Step Inside rail. Its track is a mandatory
   snap container whose items align to their centres, and it sits
   in the middle of the page. Mandatory snapping has to resolve a
   snap position the moment the container is laid out — and since
   the first item's centre is not at scrollLeft 0, the browser
   performs a scroll to satisfy it. That scroll brings the
   container into view, which drags the whole page down to the
   rail before the visitor has touched anything.

   Proximity snapping fixes it. The difference is that proximity
   only engages when a scroll ends near a snap point, so nothing
   is forced on load. Dragging the rail still settles onto an
   image exactly as before; it simply no longer insists on doing
   so before the page has been read.
   ============================================================ */
.rail__track{
  scroll-snap-type:x proximity;
}

/* The project slider aligns to start, so its first snap point is
   scrollLeft 0 and it never had to move — left as it was. */

/* ============================================================
   100. THE SERVICE HERO SITS HIGHER
   The title was pinned to the very foot of the screen, which left
   it reading as a caption stuck to the bottom edge rather than a
   title placed on the image.

   It now sits roughly a fifth up, with the scroll cue beneath it —
   the same component the homepage uses, so the two open the same
   way rather than one imitating the other.
   ============================================================ */
.svchero--full{
  grid-template-rows:1fr auto auto;
  place-items:end center;
}
.svchero--full .svchero__inner{
  padding-bottom:0;
  align-self:end;
}
.svchero--full .svchero__title{
  margin-bottom:clamp(1.4rem,3vw,2.2rem);
}

/* The cue carries the rest of the space beneath the title, so the
   pair sits above the bottom edge rather than on it. */
.svchero--full .scroll-cue{
  margin-bottom:clamp(2.4rem,5vh,4.5rem);
}

/* The gradient's dark foot was tuned for a title sitting on the very
   edge. With the pair lifted, it lifts with them. */
.svchero--full .svchero__veil{
  background:linear-gradient(to bottom,
    rgba(7,21,32,.62) 0%,
    rgba(7,21,32,.10) 30%,
    rgba(7,21,32,.55) 72%,
    rgba(7,21,32,.88) 100%);
}

@media(prefers-reduced-motion:reduce){
  .svchero--full .scroll-cue i::after{animation:none}
}

/* ============================================================
   101. SERVICE SECTION TWO — THE QUEUED SLIDER
   Photograph at full height on the left, its words in the middle,
   the one coming next held on the right. Cream ground, so it
   separates cleanly from the navy hero above it.

   Driven by the same Plates repeater the projects use: one place
   to manage content rather than a second admin panel saying
   almost the same thing.
   ============================================================ */
.svcslide{
  background:var(--bone);color:var(--navy);
  display:grid;gap:clamp(1.4rem,3vw,2.8rem);
  padding:clamp(2rem,5vw,3rem) var(--gutter);
  align-items:center;
}
@media(min-width:980px){
  .svcslide{
    grid-template-columns:minmax(0,1.35fr) minmax(0,1fr) minmax(0,.78fr);
    padding-block:0;
    min-height:100vh;min-height:100svh;
  }
}

/* ---- the stage ---- */
.svcslide__stage{position:relative;align-self:stretch;display:flex;align-items:center}
.svcslide__frame{
  position:relative;overflow:hidden;width:100%;
  aspect-ratio:4/3;background:#E6E1D9;
}
@media(min-width:980px){
  /* Full height of the screen; the width is still its column's. */
  .svcslide__frame{aspect-ratio:auto;height:100vh;height:100svh}
}
.svcslide__frame img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  backface-visibility:hidden;
}
.svcslide__frame img.is-next{transform:translateX(100%)}
.svcslide__frame img.is-out{transform:translateX(-100%)}
.svcslide__frame.is-moving img{transition:transform .78s cubic-bezier(.22,.68,.24,1)}

/* A mark rather than a labelled button: at this size the word was
   doing less work than the arrow. */
.svcslide__next{
  position:absolute;right:0;bottom:0;z-index:3;
  display:grid;place-items:center;
  width:clamp(3rem,4.5vw,3.9rem);height:clamp(3rem,4.5vw,3.9rem);
  border:0;cursor:pointer;
  background:rgba(12,33,48,.86);color:var(--champagne);
  transition:background .4s,color .4s;
}
.svcslide__next:hover,
.svcslide__next:focus-visible{background:var(--champagne);color:var(--navy)}
.svcslide__next svg{width:18px;height:18px}

/* The measure sits on the photograph, since a full-height frame
   leaves nowhere beneath it. No counter: the bar already says where
   you are, and the numbers were saying it twice. */
.svcslide__marks{
  position:absolute;left:0;bottom:0;z-index:3;
  display:flex;gap:.5rem;align-items:center;
  padding:clamp(.9rem,1.6vw,1.2rem) clamp(1rem,1.8vw,1.35rem);
  background:rgba(12,33,48,.72);
}
.svcslide__marks button{
  width:1.4rem;height:1px;padding:0;border:0;cursor:pointer;
  background:rgba(255,255,255,.38);
  transition:background .4s,transform .4s;
}
.svcslide__marks button[aria-current="true"]{
  background:var(--champagne);transform:scaleY(3);
}

/* ---- the words ---- */
.svcslide__copy{padding-block:clamp(1rem,3vw,2rem)}
.svcslide__eyebrow{
  font-size:.58rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--champagne-d);margin:0 0 .9rem;
}
.svcslide__swap{transition:opacity .34s var(--ease-glide),transform .44s var(--ease-glide)}
.svcslide__swap.is-swapping{opacity:0;transform:translateY(.55rem)}
.svcslide__title{
  font-family:var(--brand);font-weight:400;margin:0 0 1rem;
  font-size:clamp(1.2rem,2.4vw,1.8rem);
  letter-spacing:.12em;text-transform:uppercase;line-height:1.22;
}
.svcslide__rule{width:2.4rem;height:1px;background:var(--champagne-d);opacity:.8;margin:0 0 1.15rem}
.svcslide__copy p{margin:0 0 .95rem;font-size:clamp(.78rem,1.25vw,.86rem);line-height:1.95;opacity:.78}
.svcslide__copy p:last-child{margin-bottom:0}
.svcslide__detail{
  margin-top:1.3rem !important;font-size:.6rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--champagne-d);opacity:.9;
}

/* ---- the queue ---- */
.svcslide__queue{align-self:start;padding-top:clamp(1.5rem,6vh,5rem)}
.svcslide__qlabel{
  font-size:.56rem;letter-spacing:.26em;text-transform:uppercase;
  opacity:.45;margin:0 0 .7rem;
}
.svcslide__qframe{position:relative;overflow:hidden;aspect-ratio:3/4;background:#E6E1D9}
.svcslide__qframe img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.svcslide__qframe img.is-fading{opacity:0;transition:opacity .45s var(--ease-glide)}

@media(max-width:979px){
  .svcslide__queue{max-width:20rem;padding-top:0}
  .svcslide__qframe{aspect-ratio:4/3}
}
@media(prefers-reduced-motion:reduce){
  .svcslide__frame.is-moving img,
  .svcslide__swap,
  .svcslide__qframe img.is-fading{transition:none}
}

/* ============================================================
   102. NO LABEL OVER THE QUEUED PHOTOGRAPH
   The "Next" caption is gone. The photograph's position beside the
   arrow already says what it is, and the word was the only piece
   of interface language in an otherwise quiet section.

   The rule that styled it stays harmless, but the padding it used
   to occupy is returned so the queued image keeps its alignment
   against the copy beside it.
   ============================================================ */
.svcslide__queue{padding-top:clamp(2.2rem,9vh,7rem)}

/* ============================================================
   104. THE QUEUED PHOTOGRAPH ARRIVES WHOLE
   It was being cropped: the frame held a fixed 3:4 shape and the
   image filled it with object-fit:cover, so anything that was not
   3:4 lost its edges. Only the full-height frame on the left
   showed the real photograph.

   The fixed shape existed so two images could be stacked and
   cross-faded, which needs absolute positioning, which needs a
   height to be positioned against. Reusing one element instead
   removes that requirement, so the image sets its own height and
   shows complete — landscape wide and short, portrait tall and
   narrow, both entire.
   ============================================================ */
.svcslide__qframe{
  position:relative;
  aspect-ratio:auto;
  background:none;
  overflow:visible;
}
.svcslide__qframe img{
  position:static;
  width:100%;height:auto;
  object-fit:fill;
  display:block;
  transition:opacity .4s var(--ease-glide);
}
.svcslide__qframe img.is-fading{opacity:0}

/* ============================================================
   105. BOTH FRAMES LANDSCAPE, NEITHER CROPPED
   The stage was the full height of the screen. It is now a
   landscape frame with real presence but a ceiling, and the queue
   is the same shape at roughly half the width — so the two read
   as a pair rather than as two different components.

   Both use contain rather than cover. A fixed landscape frame is
   precisely what was cropping the queued photograph, so filling
   these would reintroduce it on the left as well. Fitting inside
   means a portrait shot sits complete with cream either side, and
   the cream is the section's own ground, so the space around it
   does not read as a box.
   ============================================================ */
.svcslide{
  align-items:center;
  padding-block:clamp(2.6rem,6vw,5rem) !important;
}
@media(min-width:980px){
  .svcslide{min-height:0}
}

/* ---- the stage ---- */
.svcslide__frame{
  aspect-ratio:16/10;
  height:auto !important;
  max-height:72vh;
  background:var(--bone);
}
.svcslide__frame img{
  object-fit:contain;
}

/* ---- the queue: same shape, smaller ---- */
.svcslide__queue{align-self:center;padding-top:0}
.svcslide__qframe{
  aspect-ratio:16/10;
  background:var(--bone);
}
.svcslide__qframe img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:contain;
}

@media(max-width:979px){
  .svcslide__frame{max-height:none}
  .svcslide__queue{max-width:24rem}
  .svcslide__qframe{aspect-ratio:16/10}
}

/* ============================================================
   106. BOTH PHOTOGRAPHS LARGER
   Sized against the proportions marked on the layout: the stage
   at roughly 836px and the queue at 502px on a 1888px screen,
   against 865 and 550 asked for.

   The width comes from three places — wider outer columns, a
   narrower middle, and tighter gutters. The middle lands at about
   51 characters a line, which is inside the comfortable range for
   a short paragraph; taking more from it would have bought a few
   pixels of photograph at the cost of the copy.

   3:2 rather than 16:10. It is the taller of the two, which is
   what the marked boxes show, and it is the ratio most cameras
   shoot at, so more photographs fill the frame exactly.
   ============================================================ */
@media(min-width:980px){
  .svcslide{
    grid-template-columns:minmax(0,1.75fr) minmax(0,.75fr) minmax(0,1.05fr);
    gap:clamp(1.2rem,2.2vw,2.5rem);
    padding-inline:clamp(1.25rem,3vw,3.5rem) !important;
  }
}

.svcslide__frame{
  aspect-ratio:3/2;
  max-height:80vh;
}
.svcslide__qframe{
  aspect-ratio:3/2;
}

/* ============================================================
   107. SLOWER, ALIGNED AND A LARGER QUEUE
   Three changes to the same section.

   The slide runs at 1.35s rather than 0.78s. The duration in the
   script and the duration here have to agree, or the image is
   removed from the DOM part-way through its own animation.

   The queued photograph aligns to the top of the row rather than
   its middle, so the two frames start on the same line. It was
   centred, which on a row as tall as this one dropped it well
   below the stage.

   And it grows: the right column takes a little from the left and
   a little from the middle. The middle holds at about 46
   characters a line, which is the floor for a paragraph before it
   starts reading as fragments.
   ============================================================ */
.svcslide__frame.is-moving img{
  transition:transform 1.35s cubic-bezier(.22,.68,.24,1);
}

.svcslide__queue{
  align-self:start;
  padding-top:0;
}

@media(min-width:980px){
  .svcslide{
    grid-template-columns:minmax(0,1.72fr) minmax(0,.72fr) minmax(0,1.2fr);
    align-items:start;
  }
  /* The words sit against the top of the frames rather than floating
     midway down a row that is now taller than they are. */
  .svcslide__copy{padding-top:clamp(1rem,3vh,2.6rem)}
}

/* ============================================================
   108. A HEADING ON THE SERVICE COPY
   The white band between the hero and the cream is gone. It held
   the excerpt, which the services listing already shows, so on
   this page it was a strip of white interrupting the run from
   video into content for the sake of a line most visitors had
   just read.

   The cream band now opens with a heading and the short gold rule
   the rest of the site uses, so it starts like a section instead
   of a paragraph that happens to appear.
   ============================================================ */
.entry--service .entry__head{
  max-width:70ch;margin:0 auto clamp(1.4rem,3vw,2.2rem);
  text-align:center;
}
.entry__title{
  font-family:var(--brand);font-weight:400;margin:0 0 1rem;
  font-size:clamp(1.25rem,2.6vw,1.9rem);
  letter-spacing:.13em;text-transform:uppercase;line-height:1.2;
}
.entry__rule{
  width:2.4rem;height:1px;background:var(--champagne-d);
  opacity:.85;margin:0 auto;
}

/* Without the white band above it, the cream needs its own room at
   the top rather than inheriting the gap that band used to leave. */
.entry--service{padding-top:clamp(2.6rem,6vw,4.6rem)}

/* ============================================================
   109. LESS AIR BETWEEN THE COPY AND THE SLIDER
   The gap was two paddings meeting: the bottom of the cream copy
   band and the top of the slider beneath it. Each was set for a
   section standing on its own, and together they came to roughly
   eight rem.

   They are not separate sections though — the slider carries on
   the argument the copy opens. Closing the gap makes them read as
   one band of cream rather than two stacked on top of each other.
   ============================================================ */
.entry--service{
  padding-bottom:clamp(1rem,2vw,1.6rem);
}
.svcslide{
  padding-top:clamp(1rem,2.2vw,1.8rem) !important;
}

/* ============================================================
   110. NO NAVY EDGE ABOVE A BAND
   A thin navy strip was showing along the top of the service
   bands. It is the parallax reaching the end of its slack: the
   image had 25% of room above the band and travelled 24% of the
   band's height, leaving a margin of one per cent. At this band
   height that is about seven pixels before rounding, and rounding
   is not on our side — the band height, the image height and the
   translate are each rounded separately.

   The image is now 168% of the band, so 34% of slack against the
   same 24% of travel. Ten per cent of margin rather than one, and
   the same on the room bands, which share the geometry.
   ============================================================ */
.svcband__media,
.room__media{inset:-34% 0}

@media(prefers-reduced-motion:reduce){
  .svcband__media,
  .room__media{inset:0}
}

/* ============================================================
   111. THE ABOUT PHOTOGRAPH RUNS TO THE EDGE
   A navy strip showed down the left of the picture, and another
   beneath it where the copy column ran taller.

   The cause is that the figure is set three different ways across
   three breakpoints — 4:3 and centred in one, full height in
   another, a fixed shape in a third. Which one you get depends on
   the window width, so the strip appeared at some sizes and not
   others, which is why it is easy to miss in testing.

   One rule for every desktop width instead: the photograph fills
   its half completely, flush to the left edge of the page and
   level with the copy beside it. The row becomes two panels
   meeting, with no ground visible between or beside them.
   ============================================================ */
@media(min-width:760px){
  .about-band__inner{
    max-width:none;
    margin-inline:0;
    padding-inline:0;
  }
  .about-band__figure{
    width:100%;max-width:none;
    justify-self:stretch;
    align-self:stretch;
    aspect-ratio:auto;
    height:100%;
    min-height:clamp(20rem,34vw,560px);
  }
  .about-band__media{inset:0}
}



/* ============================================================
   112. CONTINUE YOUR JOURNEY, ON A SERVICE PAGE
   The other five services, on the horizontal slider the projects
   already use rather than a grid. One row deep whatever the count,
   with prev and next, so the foot of a service page resolves
   instead of unrolling into five more screens.

   Reusing the component means the arrows, the drag, the snapping
   and the rail all behave exactly as they do elsewhere — and any
   fix to that slider reaches this one too.
   ============================================================ */
.pslider--svc .pslider__sub{
  text-align:center;margin:.9rem auto 0;
  max-width:34rem;font-size:clamp(.76rem,1.3vw,.86rem);
  opacity:.72;
}


/* The justified setting suits a long homepage paragraph and leaves
   ragged gaps in a short centred line, so this one stays ranged. */
.pslider--svc .pslider__sub{text-align:center;hyphens:manual;-webkit-hyphens:manual}

/* ============================================================
   113. THE HOVER CARDS, ON THE SLIDER
   The card is the one from the homepage — video behind, the name
   in white over it, the description appearing on hover — carried
   into the horizontal slider so it has arrows rather than wrapping
   into rows.

   The card was built to sit in a grid, where the column sets its
   width. In a flex track nothing does, so the width is given here:
   three across on a desktop, matching what the project slider
   shows, with the same snap behaviour as any other track item.
   ============================================================ */
.pslider--svc .pslider__track > .dept{
  flex:0 0 calc((100% - 2 * clamp(.9rem,1.8vw,1.7rem)) / 3);
  scroll-snap-align:start;
  min-width:0;
}

@media(max-width:1023.98px){
  .pslider--svc .pslider__track > .dept{
    flex-basis:calc((100% - clamp(.9rem,1.8vw,1.7rem)) / 2);
  }
}
@media(max-width:639.98px){
  .pslider--svc .pslider__track > .dept{flex-basis:82%}
}

/* The track carries the gap the grid used to. */
.pslider--svc .pslider__track{gap:clamp(.9rem,1.8vw,1.7rem)}

/* ============================================================
   114. THE ARROWS SIT ON THE CARD
   The nav is offset by 11rem from the middle, which is the height
   of the name, the line and the link that sit beneath a project
   card's photograph. It centres the arrow on the picture rather
   than on the whole card, which is right there.

   The services slider carries the hover card instead, where
   everything is inside the photograph and nothing sits below it.
   With no text to allow for, that 11rem pushed the arrows above
   the middle.
   ============================================================ */
.pslider--svc .pslider__nav{
  top:50%;
  transform:translateY(-50%);
}

/* ============================================================
   115. THE DESCRIPTION SHOWS AT NARROW WIDTHS TOO
   There is already a rule that reveals the description on devices
   with no hover. It is correct, and on a real phone it works.

   It does not cover a narrow window on a machine that does have a
   pointer — which is what the Customizer's tablet and mobile
   previews are, and also what someone gets by dragging a desktop
   browser narrow. There the card waits for a hover that may be
   possible but is far less likely at that size.

   Width is the better test for this. Below the point where the
   cards stop sitting three across, the description stays visible
   whether or not hovering is available.
   ============================================================ */
@media(max-width:1023.98px){
  .dept__label{display:none}
  .dept__reveal{opacity:1;transform:none}
  .dept__veil{opacity:.85}
}

/* ============================================================
   116. NO LINE UNDER THE MENU ITEMS
   Each item in the overlay menu drew a gold rule that wiped in
   from the right on hover. Removed.

   Hover still has to say something, or the menu reads as
   unresponsive rather than clean — so the item goes gold instead.
   That also keeps it consistent with the current page, which was
   already marked in gold and would otherwise have been the only
   coloured item on the list with nothing to explain why.

   Written as content:none rather than a deletion, so the original
   ::after in section 5 stays untouched and this reverses by
   removing this block alone.
   ============================================================ */
.overlay-nav__list a::after{content:none}

.overlay-nav__list a{transition:color .4s var(--ease-glide)}
.overlay-nav__list a:hover,
.overlay-nav__list a:focus-visible{color:var(--champagne)}

/* ============================================================
   117. CORMORANT GARAMOND FOR EVERY TITLE
   Every title on the site is set from one token, --brand, which
   sixty-eight rules use. Pointing that token at Cormorant
   Garamond moves every title on every page at once — homepage,
   projects, services, team, archives — including any added later,
   rather than editing sixty-eight rules and missing some.

   The wordmark also used --brand, so it would have changed with
   them and redrawn the logo. It is pinned to Poiret One through a
   token of its own, --logo, so the brand mark stays exactly as it
   was while everything around it changes.

   Weights 400, 500 and 600 are loaded. Titles keep the weight they
   already declare, which is 400 almost everywhere.
   ============================================================ */
:root{
  --logo:  'Poiret One', 'Avenir Next LT Pro', sans-serif;
  --brand: 'Cormorant Garamond', Cormorant, Garamond, 'Times New Roman', serif;
}

/* The logo keeps its own face, header and footer alike. */
.wordmark{font-family:var(--logo)}

/* Cormorant can set figures in the old style, where numbers rise
   and fall like lowercase letters. In a capitalised title such as
   "Excellence Awards 2026" that makes the year look misaligned.
   Lining figures sit on the line with the capitals. The body font
   already uses lining figures, so this changes nothing there. */
body{font-variant-numeric:lining-nums}

/* ============================================================
   118. ACCREDITATION LOGOS THAT SIT ON THE BLUE
   The old row (section 8) greyed each logo and brightened it.
   That suits pale logos but loses dark ones: a black mark such as
   RIBA's or BIID's stayed near-black on the navy and all but
   vanished. Hover then restored the original colours, so logos
   flashed blue, purple and black against the band.

   Now every logo is redrawn in a single colour, chosen in
   Customize → Homepage — Credentials:

     White     — each logo becomes a white silhouette
     Gold      — the same, in --champagne
     Original  — untouched, each on its own bone tile, for a
                 body whose rules forbid recolouring its mark

   How the recolouring works: the logo file is used as a mask
   (the --mark URL set on each item in front-page.php) and the
   colour shows through wherever the logo has ink. That gives the
   exact brand colour, which a CSS filter can only approximate.
   The <img> stays in place, invisible, so it still sizes the box
   and screen readers still hear its alt text.

   The one requirement: a transparent background. A logo saved on
   a white box has ink everywhere and would become a solid block.
   ============================================================ */
.logo-row{list-style:none;margin-inline:auto;padding-inline:0}
.logo-row__mark{position:relative;display:flex;align-items:center;justify-content:center}

/* Same height for every mark, with a cap on width so a long
   wordmark can't dominate a square badge. */
.logo-row .logo-row__mark img{
  display:block;height:3.2rem;width:auto;max-width:9.5rem;object-fit:contain;
  filter:none;opacity:1;transition:none;
}

/* ---- White and gold: one colour through a mask ---- */
.logo-row--white .logo-row__mark img,
.logo-row--champagne .logo-row__mark img,
.logo-row--white .logo-row__mark img:hover,
.logo-row--champagne .logo-row__mark img:hover{opacity:0}

.logo-row--white .logo-row__mark::after,
.logo-row--champagne .logo-row__mark::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  -webkit-mask:var(--mark) center / contain no-repeat;
          mask:var(--mark) center / contain no-repeat;
  opacity:.72;transition:opacity .4s var(--ease-glide);
}
.logo-row--white .logo-row__mark::after{background:#fff}
.logo-row--champagne .logo-row__mark::after{background:var(--champagne)}

.logo-row--white .logo-row__mark:hover::after,
.logo-row--champagne .logo-row__mark:hover::after{opacity:1}

/* Touch screens have no hover, so show them at full strength. */
@media(hover:none){
  .logo-row--white .logo-row__mark::after,
  .logo-row--champagne .logo-row__mark::after{opacity:.9}
}

/* ---- Original colours, each on a bone tile ---- */
.logo-row--original .logo-row__mark{
  background:var(--bone);padding:.85rem 1.15rem;
}
.logo-row--original .logo-row__mark img{height:2.6rem}

/* ---- Phones: a touch smaller so four fit in two rows ---- */
@media(max-width:599.98px){
  .logo-row{gap:1.6rem 2rem}
  .logo-row .logo-row__mark img{height:2.6rem;max-width:7.5rem}
  .logo-row--original .logo-row__mark img{height:2.1rem}
}

/* ============================================================
   119. THE SERVICES PAGE AS FULL-SCREEN RIBBONS
   The Services page now reads like the ribbons on a project page,
   but each service fills the screen on its own. A small turn of
   the wheel glides to the next service rather than scrolling
   freely — the snapping is in main.js ("Service ribbons"), and the
   photograph drifts inside each ribbon as it moves, using the same
   parallax as the project ribbons.

   --ribbon-top is the height of the fixed header, measured by
   main.js. A ribbon is the screen minus the header, so when one is
   in place it runs exactly from under the header to the bottom
   edge. 4.5rem is the fallback until the script has measured.

   Only ribbons carry .svcband--ribbon, so nothing else that uses
   .svcband is touched.
   ============================================================ */
.svcribbons{background:var(--navy-ink)}

.svcband.svcband--ribbon{
  height:calc(100vh - var(--ribbon-top,4.5rem));
  height:calc(100svh - var(--ribbon-top,4.5rem));
  min-height:22rem;
  scroll-margin-top:var(--ribbon-top,4.5rem);
  border-bottom:1px solid rgba(235,204,157,.12);
}
.svcband.svcband--ribbon:last-child{border-bottom:0}

/* The veil the project ribbons use: light enough that the
   photograph stays the subject, dark only behind the words. */
.svcband--ribbon .svcband__veil{
  background:linear-gradient(90deg,rgba(0,0,0,.68) 0%,rgba(0,0,0,.5) 38%,rgba(0,0,0,.2) 68%,rgba(0,0,0,.14) 100%) !important;
}
.svcband--ribbon.svcband--flip .svcband__veil{
  background:linear-gradient(270deg,rgba(0,0,0,.68) 0%,rgba(0,0,0,.5) 38%,rgba(0,0,0,.2) 68%,rgba(0,0,0,.14) 100%) !important;
}

/* The short gold rule above the name, as on a project ribbon. */
.svcband--ribbon .svcband__body::before{
  content:'';display:block;width:2rem;height:1px;
  background:var(--champagne);opacity:.9;
  margin-bottom:clamp(.6rem,1.1vw,1rem);
}
/* 900px: where section 44 right-aligns the flipped copy. */
@media(min-width:900px){
  .svcband--ribbon.svcband--flip .svcband__body::before{margin-left:auto;margin-right:0}
}

/* A full screen gives the description room for a few more lines. */
.svcband--ribbon .svcband__text{max-width:32rem;line-height:1.8}

/* Phones: the words sit low, over a veil rising from the bottom. */
@media(max-width:759px){
  .svcband.svcband--ribbon{align-items:end}
  .svcband--ribbon .svcband__veil,
  .svcband--ribbon.svcband--flip .svcband__veil{
    background:linear-gradient(to top,rgba(0,0,0,.8) 0%,rgba(0,0,0,.5) 50%,rgba(0,0,0,.18) 100%) !important;
  }
  .svcband--ribbon .svcband__inner{padding-bottom:clamp(2rem,8vh,4rem)}
}

/* Touch screens scroll natively, so the browser does the settling:
   a swipe that ends near a ribbon comes to rest on it. */
@media(hover:none),(pointer:coarse){
  html:has(.svcribbons){
    scroll-snap-type:y proximity;
    scroll-padding-top:var(--ribbon-top,4.5rem);
  }
  .svcband--ribbon{scroll-snap-align:start}
}

/* ============================================================
   120. FIVE SERVICE CARDS: THREE ABOVE TWO, CENTRED
   Section 45 put five or more cards three across, which left the
   last two stranded on the left of the second row. On a six-column
   grid each card spans two, and the fourth starts at column two —
   so the pair sits centred under the three.
   ============================================================ */
/* Scoped to the homepage services (#journey), so the team grid on
   the About page, which shares these classes, is left alone. */
#journey .depts__grid:has(> :nth-child(5):last-child){grid-template-columns:repeat(6,1fr)}
#journey .depts__grid:has(> :nth-child(5):last-child) > *{grid-column:span 2}
#journey .depts__grid:has(> :nth-child(5):last-child) > :nth-child(4){grid-column:2 / span 2}

/* ============================================================
   121. VIDEO IN THE SERVICE RIBBONS
   A service with a video now plays it in its ribbon instead of
   showing the photograph. main.js starts each video when its
   ribbon comes on screen and pauses it when it leaves, so only
   the one in view is decoding.

   The parallax still applies: it moves the frame around the
   video, not the video itself.

   No zoom on hover. Section 89 scales band videos to 1.05 on
   hover, which makes a playing video shimmer for the whole
   transition. Photographs in a ribbon still zoom.
   ============================================================ */
.svcband--ribbon .svcband__media video{transition:none}
.svcband--ribbon:hover .svcband__media video,
.svcband--ribbon:focus-visible .svcband__media video{transform:translateZ(0)}

/* ============================================================
   122. THE TITLE MOVES DOWN, ONTO THE WORDS
   On every service and project page the name used to sit over the
   hero video. The video now plays clean, with only the scroll cue,
   and the name opens the section with the writing:

   Service — the cream copy band. The name, then the short gold
   rule. The optional heading from the "Service page" box, if one
   is filled in, sits beneath the rule as a smaller line.

   Project — the vision band. The name, then its location and year
   line in gold, then the words. That band's heading used to read a
   setting that no longer exists and printed nothing, so the name
   takes its place.

   The old hero title rules (svchero__title, projhero__title) are
   left in place; nothing uses them now.
   ============================================================ */

/* ---- Service ---- */
.entry--service .entry__title--name{
  font-size:clamp(1.4rem,.9rem + 1.8vw,2.5rem);
  letter-spacing:.1em;line-height:1.16;
  margin:0 0 clamp(.9rem,1.6vw,1.2rem);
}
.entry__sub{
  font-family:var(--brand);font-weight:400;
  font-size:clamp(1rem,.8rem + .6vw,1.35rem);
  letter-spacing:.06em;line-height:1.35;
  color:var(--champagne-d);
  margin:clamp(.9rem,1.6vw,1.2rem) 0 0;
}

/* ---- Project ---- */
.vision .vision__title{
  font-size:clamp(1.4rem,.9rem + 1.8vw,2.6rem);
  letter-spacing:.1em;line-height:1.14;
}
.vision__line{
  font-size:max(.6rem,10px);letter-spacing:.26em;text-transform:uppercase;
  color:var(--champagne);margin:clamp(.7rem,1.2vw,1rem) 0 0;
}
/* With only the cue left in the hero, lift it clear of the edge. */
.projhero__cue{margin-bottom:clamp(1.2rem,3vh,2.4rem)}

/* ============================================================
   123. GOLD TITLES, ON ONE LINE
   Every service and project name is now gold:

   - the name on a service page (cream ground, so the deeper
     --champagne-d, which holds its contrast on light)
   - the name on a project page (dark ground, --champagne)
   - the service ribbons on the Services page
   - the service cards on the homepage, and the "Continue Your
     Journey" cards on each service page

   The team cards on the About page share the card classes, so the
   card rules are scoped to #journey and .pslider--svc to leave
   them alone.

   The name on a service or project page also stays on one line,
   however long it is. It is set at its full size and main.js
   ("One-line titles") shrinks it only when it would not fit the
   width available — so a short name is untouched and a long one on
   a phone comes down just enough. It is given the full content
   width to use, not the narrower column the paragraphs sit in.
   ============================================================ */

/* ---- Gold ---- */
.entry--service .entry__title--name{color:var(--champagne-d)}
.vision .vision__title{color:var(--champagne)}
.svcband--ribbon .svcband__title{color:var(--champagne)}
#journey .dept__label,
#journey .dept__name,
.pslider--svc .dept__label,
.pslider--svc .dept__name{color:var(--champagne)}

/* ---- One line ---- */
.fit-line{white-space:nowrap;display:block;overflow:visible}

.entry--service .entry__head{max-width:none}

/* The vision column is 46rem for the reading width of the words.
   The name breaks out of it to use up to 90% of the screen. */
.vision .vision__title{
  width:min(90vw,70rem);
  margin-left:calc((100% - min(90vw,70rem)) / 2);
}

/* ============================================================
   124. SERVICE CARD NAMES ON ONE LINE
   The names on the homepage service cards, and on the "Continue
   Your Journey" cards on each service page, stay on one line —
   the resting label and the name in the hover panel alike. They
   start at their usual size; main.js ("One-line titles") brings a
   long one down only as far as it needs to fit the card.
   ============================================================ */
#journey .dept__label,
#journey .dept__name,
.pslider--svc .dept__label,
.pslider--svc .dept__name{
  white-space:nowrap;
}

/* On narrower screens three cards across leave each name about a
   hundred pixels to fit in, and one line at that width means text
   too small to read. So the homepage cards go two across on a
   tablet (the fifth centred beneath) and one across on a phone,
   where a name has the full width of the screen. */
@media(max-width:999.98px){
  #journey .depts__grid:has(> :nth-child(5):last-child){grid-template-columns:repeat(4,1fr);max-width:44rem}
  #journey .depts__grid:has(> :nth-child(5):last-child) > *{grid-column:span 2}
  #journey .depts__grid:has(> :nth-child(5):last-child) > :nth-child(4){grid-column:span 2}
  #journey .depts__grid:has(> :nth-child(5):last-child) > :nth-child(5){grid-column:2 / span 2}
}
@media(max-width:599.98px){
  #journey .depts__grid:has(> :nth-child(5):last-child){grid-template-columns:1fr}
  #journey .depts__grid:has(> :nth-child(5):last-child) > *,
  #journey .depts__grid:has(> :nth-child(5):last-child) > :nth-child(4),
  #journey .depts__grid:has(> :nth-child(5):last-child) > :nth-child(5){grid-column:auto}
}

/* ============================================================
   125. THE SERVICES PAGE OPENS AT THE TOP
   Section 119 asked touch screens to settle a swipe onto the
   nearest ribbon (scroll-snap on the page). Browsers also apply
   that on load, and with the first ribbon close to the top they
   "settled" straight onto it — so a laptop with a touch screen, or
   a phone, opened the page part-way down, past the intro.

   Switched off. Touch scrolling on this page is now ordinary
   scrolling; the one-service-at-a-time glide with a mouse or
   trackpad (main.js) is unaffected.
   ============================================================ */
html:has(.svcribbons){scroll-snap-type:none !important;scroll-padding-top:0}
.svcband--ribbon{scroll-snap-align:none}

/* ============================================================
   126. THE STATEMENT TITLE IN GOLD
   "Luxury Design & Build" on the homepage, and any statement title
   like it, is now gold throughout. On white or bone it takes the
   deeper --champagne-d, which holds its contrast on a light ground;
   if the section is switched to navy it takes the pale --champagne.
   The ampersand and the O were already gold, so they now match the
   rest of the line.
   ============================================================ */
.statement__title,
.statement__title .amp,
.statement__title .o{color:var(--champagne-d)}
.statement--navy .statement__title,
.statement--navy .statement__title .amp,
.statement--navy .statement__title .o{color:var(--champagne)}

/* ============================================================
   127. WHITE TITLES ON NAVY
   Any title sitting on a navy ground is white, and the O of
   "West One" in it is gold — throughout the site, except the
   header, the footer and the overlay menu. main.js ("White titles
   on navy") works out which titles sit on navy and adds .on-navy;
   these rules colour them.

   The ampersand, which some titles set in gold, goes white with
   the rest: only the O is gold.

   Titles over a photograph or video are not on navy, so the gold
   names on the service cards, the Services page ribbons and the
   project pages are unchanged. Titles on white or cream are
   unchanged too.
   ============================================================ */
.on-navy,
.on-navy .amp{color:#FFFFFF !important}
.on-navy .o{color:var(--champagne) !important}

/* ============================================================
   128. EVERY PARAGRAPH BOX-JUSTIFIED
   All paragraphs are set like the About band: flush on both
   edges, with hyphenation so long words break rather than leaving
   gaps between words.

   main.js ("Box-justified paragraphs") adds .box-justify and sets
   --last to wherever the paragraph sat before — so the last line,
   and any one-line label or caption, stays left, centred or right
   exactly as it was.

   Phones: under 600px a line holds only a handful of words, and
   justifying that few opens wide gaps however well it hyphenates.
   There the paragraphs keep their previous alignment.
   ============================================================ */
.box-justify{
  text-align:justify !important;
  text-align-last:var(--last,start) !important;
  text-justify:inter-word;
  hyphens:auto !important;
  -webkit-hyphens:auto !important;
}
@media(max-width:599.98px){
  .box-justify{text-align:var(--last,start) !important}
}

/* ============================================================
   129. SERVICE SLIDER: DOTS AND A GOLD DIAMOND, BELOW THE PHOTO
   The arrow on the photograph is gone, and so is the dark strip
   of dashes that sat over its corner. Beneath the photograph now:
   a row of small dots, one per photograph, with the current one
   held inside a thin gold diamond. Any dot can be clicked.

   Clicking the large photograph or the queued one on the right
   also brings the next in, and on a phone a swipe goes either way
   (main.js, "Service section two").
   ============================================================ */
.svcslide__stage{flex-direction:column;align-items:stretch}

.svcslide__marks{
  position:static;background:none;
  justify-content:center;gap:clamp(.6rem,1.2vw,.95rem);
  padding:clamp(1rem,2vw,1.5rem) 0 0;
}

/* Each dot is a 1.6rem target — easy to hit — drawing a 4px dot and,
   when current, a diamond around it. */
.svcslide__marks button{
  position:relative;
  width:1.6rem;height:1.6rem;padding:0;border:0;
  background:none;transform:none;cursor:pointer;
}
.svcslide__marks button::before{
  content:'';position:absolute;left:50%;top:50%;
  width:4px;height:4px;margin:-2px 0 0 -2px;border-radius:50%;
  background:var(--navy);opacity:.35;
  transition:background .4s,opacity .4s;
}
.svcslide__marks button::after{
  content:'';position:absolute;left:50%;top:50%;
  width:.8rem;height:.8rem;margin:-.4rem 0 0 -.4rem;
  border:1px solid var(--champagne-d);
  transform:rotate(45deg) scale(.4);opacity:0;
  transition:transform .5s var(--ease-glide),opacity .4s;
}
.svcslide__marks button:hover::before{opacity:.7}

.svcslide__marks button[aria-current="true"]{background:none;transform:none}
.svcslide__marks button[aria-current="true"]::before{background:var(--champagne-d);opacity:1}
.svcslide__marks button[aria-current="true"]::after{transform:rotate(45deg) scale(1);opacity:1}

.svcslide__marks button:focus-visible{outline:1px solid var(--champagne-d);outline-offset:2px}

@media(prefers-reduced-motion:reduce){
  .svcslide__marks button::after{transition:none}
}

/* ============================================================
   130. THE DOTS END AT THE PHOTOGRAPH'S RIGHT EDGE
   The row sits to the right under the photograph, so the dot for
   the last photograph lands at the end of the picture area.

   Each dot is drawn in the middle of a 1.6rem target, which would
   leave the last one 0.8rem short of the edge. The row is pulled
   out by that amount less the dot's own radius, so the last dot's
   right side lines up exactly with the photograph's.
   ============================================================ */
.svcslide__marks{
  justify-content:flex-end;
  margin-right:calc(-.8rem + 2px);
}

/* ============================================================
   130. THE DOTS END WHERE THE PHOTOGRAPH ENDS
   The row of dots under the service slider sits to the right, so
   the dot for the last photograph lands on the photograph's right
   edge. Each dot is centred in a 1.6rem target, so the row is
   nudged out by half a target (.8rem) to put that last dot's
   centre exactly on the edge rather than .8rem inside it.
   ============================================================ */
.svcslide__marks{justify-content:flex-end;margin-right:-.8rem}

/* ============================================================
   131. A TALL, THIN DIAMOND
   The current-photograph mark was a square turned on its corner.
   It is now a tall, narrow rhombus — about two-thirds as wide as
   it is high — drawn as a hairline in SVG, so the line stays the
   same fine weight on every side (stretching a turned square with
   CSS would thin two sides and thicken the others).

   The colour is --champagne-d written out (#A0794A), because an
   SVG background can't read a CSS variable.
   ============================================================ */
.svcslide__marks button{height:2.2rem}
.svcslide__marks button::after{
  width:1rem;height:1.6rem;margin:-.8rem 0 0 -.5rem;
  border:0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 26'%3E%3Cpath d='M8 .6 15.4 13 8 25.4 .6 13Z' fill='none' stroke='%23A0794A' stroke-width='.9'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  transform:scale(.4);
}
.svcslide__marks button[aria-current="true"]::after{transform:scale(1)}

/* ============================================================
   132. THE NEW SERVICE PAGE: SECTIONS 3 TO 6
   A service page now runs:
     1 hero video          (unchanged)
     2 the description     (unchanged)
     3 filler photograph   .filler
     4 slideshow           .rail.rail--svc
     5 words, then the photograph slider   .svcslide-head + .svcslide
     6 Renders to Reality  .r2r  (only where pairs are added)
   Everything is managed in the service's "Service page — sections
   3 to 6" box. A section with nothing in it does not appear.
   ============================================================ */

/* ---- 3. Filler: full width, not a screen tall, drifting ----
   The photograph is 168% of the band (inset -34%), the same
   headroom the project ribbons use against the 16% travel in the
   parallax script, so no edge is ever exposed. */
.filler{
  position:relative;overflow:hidden;
  height:clamp(16rem,52vh,32rem);
  background:var(--navy-ink);
}
.filler__media{position:absolute;inset:-34% 0}
.filler__media img{display:block;width:100%;height:100%;object-fit:cover}
@media(prefers-reduced-motion:reduce){.filler__media{inset:0}}

/* ---- 4. Slideshow: the Step Inside rail on navy ---- */
.rail--svc{background:var(--navy);padding-block:clamp(3rem,6vw,5rem)}

/* ---- The dot-and-diamond marks, shared by the slideshow (4) and
   Renders to Reality (6). Same shape as the slider in 5 (sections
   129 and 131), drawn in the pale gold for a navy ground. ---- */
.rail--svc .rail__dots{gap:clamp(.5rem,1vw,.8rem)}
.rail--svc .rail__dots button,
.r2r__marks button{
  position:relative;width:1.6rem;height:2.2rem;padding:0;border:0;
  background:none;cursor:pointer;font-size:0;opacity:1;color:inherit;
}
.rail--svc .rail__dots button::before,
.r2r__marks button::before{
  content:'';position:absolute;left:50%;top:50%;
  width:4px;height:4px;margin:-2px 0 0 -2px;border-radius:50%;
  background:#FFFFFF;opacity:.4;transition:background .4s,opacity .4s;
}
.rail--svc .rail__dots button::after,
.r2r__marks button::after{
  content:'';position:absolute;left:50%;top:50%;right:auto;bottom:auto;
  width:1rem;height:1.6rem;margin:-.8rem 0 0 -.5rem;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 26'%3E%3Cpath d='M8 .6 15.4 13 8 25.4 .6 13Z' fill='none' stroke='%23EBCC9D' stroke-width='.9'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  transform:scale(.4);opacity:0;
  transition:transform .5s var(--ease-glide),opacity .4s;
}
.rail--svc .rail__dots button:hover::before,
.r2r__marks button:hover::before{opacity:.8}
.rail--svc .rail__dots button[aria-current="true"]::before,
.r2r__marks button[aria-current="true"]::before{background:var(--champagne);opacity:1}
.rail--svc .rail__dots button[aria-current="true"]::after,
.r2r__marks button[aria-current="true"]::after{transform:scale(1);opacity:1}
.rail--svc .rail__dots button:focus-visible,
.r2r__marks button:focus-visible{outline:1px solid var(--champagne);outline-offset:2px}

/* ---- 5. Words above the photograph slider ----
   Ample room above, then a gold title, a small line in capitals and
   a paragraph, centred on the cream. */
.svcslide-head{
  background:var(--bone);color:var(--navy);text-align:center;
  padding:clamp(4.5rem,10vw,8rem) var(--gutter) clamp(2rem,4vw,3.2rem);
}
.svcslide-head--empty{padding-bottom:0}
.svcslide-head__title{
  font-family:var(--brand);font-weight:400;text-transform:uppercase;
  font-size:clamp(1.4rem,1rem + 1.4vw,2.3rem);letter-spacing:.12em;line-height:1.2;
  color:var(--champagne-d);margin:0;
}
.svcslide-head__sub{
  font-family:var(--body);font-weight:500;text-transform:uppercase;
  font-size:max(.62rem,10.5px);letter-spacing:.14em;
  color:var(--navy);opacity:.6;margin:clamp(.9rem,1.6vw,1.2rem) 0 0;
}
.svcslide-head__text{
  max-width:44rem;margin:clamp(.9rem,1.6vw,1.2rem) auto 0;
  font-size:max(.8rem,13px);font-weight:300;line-height:1.8;
}
/* The slider's own top padding is not needed under the words. */
.svcslide-head + .svcslide{padding-top:0}

/* ---- 6. Renders to Reality ---- */
.r2r{
  background:var(--navy);color:#FFFFFF;
  padding:clamp(3rem,6vw,5rem) 0 clamp(2.5rem,5vw,4rem);
}
.r2r__head{text-align:center;padding-inline:var(--gutter);margin-bottom:clamp(2rem,4vw,3.2rem)}
.r2r__title{
  font-family:var(--brand);font-weight:400;text-transform:uppercase;
  font-size:clamp(1.4rem,1rem + 1.4vw,2.3rem);letter-spacing:.12em;line-height:1.2;
  color:#FFFFFF;margin:0;
}
/* Edge to edge, the two halves meeting in the middle. */
.r2r__pair{display:grid;grid-template-columns:1fr 1fr}
.r2r__frame{
  position:relative;overflow:hidden;aspect-ratio:5/4;
  background:var(--navy-ink);cursor:pointer;
}
.r2r__frame img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .9s var(--ease-glide);
}
.r2r__frame img.is-on{opacity:1}
.r2r__marks{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:clamp(.4rem,.9vw,.7rem);padding:clamp(.8rem,1.6vw,1.2rem) var(--gutter) 0;
}
@media(max-width:699.98px){
  .r2r__pair{grid-template-columns:1fr;gap:clamp(1.6rem,5vw,2.4rem)}
}
@media(prefers-reduced-motion:reduce){
  .r2r__frame img{transition:none}
}

/* ============================================================
   133. TALLER FILLER, SHORTER RENDERS
   Filler (section 3): taller, so the photograph shows more of the
   room — about three-quarters of the screen, up to 52rem. The
   parallax headroom scales with the band, so no edge is exposed.

   Renders to Reality (section 6): the photographs were so tall that
   by the time they filled the screen the title had scrolled away.
   They are now sized so the title, both photographs and the dots
   all fit on one screen together: the screen's height, less the
   header (--ribbon-top, measured by main.js, or 4.5rem), less
   about 13rem for the title and the dots. Never shorter than 15rem.
   On phones, where the two stack, each keeps a 4:3 shape instead.
   ============================================================ */
.filler{height:clamp(22rem,74vh,52rem)}

.r2r{padding-top:clamp(2rem,4vw,3.2rem)}
.r2r__head{margin-bottom:clamp(1.2rem,2.4vw,2rem)}
.r2r__frame{
  aspect-ratio:auto;
  height:max(15rem,calc(100vh - 4.5rem - 13rem));
  height:max(15rem,calc(100svh - var(--ribbon-top,4.5rem) - 13rem));
}
@media(max-width:699.98px){
  .r2r__frame{height:auto;aspect-ratio:4/3}
}

/* ============================================================
   134. ENVIRONMENT PAGE: TITLE ON THE VIDEO, ONE COLUMN BELOW
   The page opens on the video with, centred near its foot: a small
   line in spaced capitals, the title, and an optional gold line.
   The separate headline band that used to follow the video is gone,
   so the first scroll lands on Doing Our Part.

   The caption is lifted clear of the scroll cue, which sits centred
   at the very bottom (section 29) and used to run through the title.

   Doing Our Part: the paragraphs now run in a single centred column,
   one under another, instead of two side-by-side columns.
   ============================================================ */
.envhero__caption{
  max-width:80rem;margin-inline:auto;text-align:center;
  padding-bottom:clamp(8.5rem,17vh,10.5rem);
}
.envhero__caption::before{display:none}
.envhero__eyebrow{
  font-family:var(--body);font-weight:400;text-transform:uppercase;
  font-size:max(.68rem,11px);letter-spacing:.22em;color:#FFFFFF;
  margin:0 0 clamp(.7rem,1.3vw,1rem);
}
.envhero .envhero__title{
  font-size:clamp(1.25rem,.8rem + 1.5vw,2.4rem);
  letter-spacing:.08em;line-height:1.2;color:#FFFFFF;
}
.envhero__kicker{
  font-family:var(--body);font-weight:400;text-transform:uppercase;
  font-size:max(.62rem,10.5px);letter-spacing:.2em;color:var(--champagne);
  margin:clamp(.7rem,1.3vw,1rem) 0 0;
}

.envintro__cols.envintro__cols--single{
  columns:auto;column-count:1;max-width:46rem;margin-inline:auto;
}
.envintro__cols--single p{margin:0}
.envintro__cols--single p + p{margin-top:clamp(1rem,1.8vw,1.4rem)}

/* ============================================================
   135. THE SERVICE SLIDER: BIGGER PHOTOGRAPH, TIGHTER WORDS
   The left photograph takes more of the row and stands taller
   (16:10 rather than 3:2), which is the shape the marked-up box
   asked for. The middle column loses the width the photograph
   gains, so the two balance.

   The words are set smaller and justified — both edges flush,
   last line to the left, with hyphenation so a long word breaks
   rather than leaving a gap. A paragraph the length of the Vision
   copy now sits in about the space it was marked to fill.

   The site-wide justification (section 128) can't reach these
   paragraphs: the slider writes them in as you move between
   photographs, after that script has run. So they are set here.
   ============================================================ */
@media(min-width:980px){
  .svcslide{
    grid-template-columns:minmax(0,2.15fr) minmax(0,.78fr) minmax(0,.95fr);
  }
  .svcslide__frame{aspect-ratio:16/10;max-height:74vh}
}

.svcslide__copy p{
  font-size:clamp(.66rem,.92vw,.71rem);
  line-height:1.62;
  margin-bottom:.65rem;
  text-align:justify;
  text-align-last:left;
  hyphens:auto;
  -webkit-hyphens:auto;
}

/* ============================================================
   136. THE THREE PARTS, AS MARKED UP
   The queued photograph on the right was much smaller than the
   other two parts and sat low. It now takes about half as much
   width again, in the same 16:10 shape as the photograph on the
   left, and the words move left with it. The left photograph
   gives up a little of its width so the row still fits.
   ============================================================ */
@media(min-width:980px){
  .svcslide{
    grid-template-columns:minmax(0,2.35fr) minmax(0,.85fr) minmax(0,1.5fr);
    /* Tighter gaps, so the width goes to the photographs. */
    gap:clamp(.9rem,1.4vw,1.7rem);
  }
  .svcslide__queue{max-width:none;align-self:center;padding-top:0}
  .svcslide__qframe{aspect-ratio:16/10}
}

/* ============================================================
   137. THE QUEUED PHOTOGRAPH SITS HIGH
   It was centred against the large photograph, which left it
   floating in the middle of the row. It now starts at the top of
   the row, level with the large photograph and lifted a little
   above it, as marked. Its size is unchanged.
   ============================================================ */
@media(min-width:980px){
  .svcslide__queue{
    align-self:start;
    margin-top:clamp(-2.4rem,-1.6vw,-1rem);
  }
}

/* ============================================================
   138. PROCESS NAMES ON ONE LINE
   A long name in the service slider — ARCHITECTURE, CRAFTSMANSHIP,
   ENGINEERING — was breaking after the second-to-last letter. The
   name now stays on one line and is brought down only as far as it
   needs to fit its column, by the same measuring main.js does for
   the page titles ("One-line titles"). The slider asks for it again
   each time it writes a new name.
   ============================================================ */
.svcslide__title{white-space:nowrap}

/* ============================================================
   139. THE HERO REEL FADES BETWEEN VIDEOS
   With more than one hero video, main.js ("Hero reel") fades the
   picture down as one ends and back up once the next is really
   playing, so the change never shows a frame of black or of the
   poster image. Everything over the video — the wordmark, the
   words, the scroll cue — stays where it is.
   ============================================================ */
.hero__media video{transition:opacity .42s var(--ease-glide)}
.hero__media video.is-turning{opacity:0}
@media(prefers-reduced-motion:reduce){
  .hero__media video{transition:none}
}

/* ============================================================
   140. PROJECT CARDS: THE THREE LINES SIT CLOSER
   On a project card the location line, the project name and the
   short description were spaced as though each were its own
   paragraph. They belong together as one block, so the gaps above
   and below the name are roughly halved and the name's own line
   height is tightened. Nothing changes size.
   ============================================================ */
.proj__loc{margin-bottom:.28rem}
.proj__name{margin-bottom:.22rem;line-height:1.14}
.proj__desc{line-height:1.6}

/* ============================================================
   141. SERVICE NAMES ON THE SERVICES PAGE, A LITTLE SMALLER
   The names on the full-screen ribbons were set at nearly the
   size of a page title, which made them loom over the
   photographs. Brought down about a fifth; the ribbons on
   individual service pages and every other title are untouched.
   ============================================================ */
.svcband--ribbon .svcband__title{font-size:clamp(1.1rem,2.5vw,1.9rem)}

/* ============================================================
   142. ENVIRONMENT POLICIES AS FULL-SCREEN RIBBONS
   Each policy now reads like a service on the Services page: the
   photograph fills the screen, the words sit over it, and each
   policy takes the opposite side from the one before. The markup
   is the same (.svcband--ribbon), so sections 119, 125 and 141
   give it the height, the veil, the wheel behaviour and the title
   size for nothing.

   Two differences from a service ribbon. A policy is not a link,
   so nothing lifts or zooms under the pointer. And a policy is
   several paragraphs rather than one line, so the words take a
   little more width and sit closer together.

   The old side-by-side bands (.envband) are no longer built; those
   rules stay in the stylesheet, unused.
   ============================================================ */
.svcband--policy{cursor:default}
.svcband--policy .svcband__media img{transform:none !important}

.svcband--policy .svcband__body{max-width:44rem}
.svcband--policy .svcband__text{max-width:none;line-height:1.75}
.svcband--policy .svcband__text + .svcband__text{margin-top:clamp(.6rem,1.1vw,.9rem)}

/* The policy title is a heading rather than a name to click, so it
   keeps a little more presence than a service ribbon's (141). */
.svcband--policy .svcband__title{font-size:clamp(1.2rem,2.8vw,2.1rem)}

/* ============================================================
   143. THE ABOUT PHOTOGRAPH ON A PHONE (SAFARI)
   On an iPhone the About photograph collapsed: the name plate
   became a narrow strip of letters down the left edge, printed
   over the section above it.

   The cause. .about-band__figure holds nothing in normal flow —
   the photograph and the name plate are both positioned over it —
   so its own content measures zero. Given a shape (aspect-ratio)
   and no width, Safari sizes such a grid item by that content
   rather than stretching it across the column, so the figure comes
   out zero wide and, through the ratio, zero tall. The name plate
   then has nowhere to sit: its text breaks a letter at a time and
   it spills out of the band.

   Chrome stretches the item instead, which is why this never
   appeared on a laptop, and why the Customizer's mobile preview —
   a narrow window in the same browser — looked correct.

   The desktop rules already set an explicit width (section 111),
   so only the stacked phone layout was ever exposed. Setting the
   width here closes it at every size: with a width to work from,
   the ratio gives the height and the plate has its full column
   back.

   The same shape of rule — a ratio, and nothing in flow inside —
   appears on the homepage service cards and on the large slider
   photograph, so they are given the same guarantee rather than
   waiting to break in the same way.
   ============================================================ */
.about-band__figure,
.dept,
.svcslide__frame{
  width:100%;
  justify-self:stretch;
}

/* ============================================================
   144. EVERY BUTTON AT THE SAME WEIGHT
   On an iPhone the label inside VIEW PROJECT, OUR TEAM and ABOUT
   WEST ONE looked washed out beside VIEW ALL PROJECTS, while on a
   Windows laptop and on Android all of them looked the same.

   Two things combined. The .btn buttons — VIEW ALL PROJECTS, GET
   IN TOUCH — set their label to weight 400. Every other boxed
   button set no weight at all, so each inherited the body's 300.
   At ten pixels in gold that difference is nearly invisible.

   What makes it visible is -webkit-font-smoothing:antialiased on
   the body, which only Safari on iOS and macOS acts on; Chrome on
   Windows and Android ignore it. It renders type a little thinner,
   and a 300-weight ten-pixel gold label thinned that way reads as
   faded. The same label at 400 does not.

   So every boxed button now carries the same 400 as VIEW ALL
   PROJECTS. Colours, sizes and spacing are untouched; only the
   stroke weight of the four that were lighter changes.

   The quieter text links — Step inside, Explore, Discover — are
   deliberately a step lighter than the buttons and are left as
   they are.
   ============================================================ */
.pcard__cta,
.statement__cta,
.about-band__cta,
.svcband__go{
  font-weight:400;
}

/* ============================================================
   145. THE SERVICE CARDS GET THEIR WORDS BACK ON A PHONE
   On a phone each card showed only the service name: no
   description, and no "Discover" beneath it.

   The reason is historical rather than anything to do with the
   device. These cards once sat three across at every width, so on
   a phone each was a third of the screen — far too narrow for a
   paragraph over a thumbnail. Two rules therefore dropped the
   description below 773px and the link below 515px, which was
   right at the time.

   Section 124 then changed the grid: two cards across on a tablet
   and one across on a phone. A card on a phone is now the full
   width of the screen, with room for all three lines, but the old
   rules were still measuring the window rather than the card.

   Below 600px — where the cards are one per row — the description
   and the link come back. The two-across tablet range is left as
   it is: those cards really are narrow, and the name with the link
   beneath it is the right amount there.
   ============================================================ */
@media(max-width:599.98px){
  #journey .dept__desc,
  .pslider--svc .dept__desc{display:block}
  #journey .dept__more,
  .pslider--svc .dept__more{display:inline-flex}
}

/* ============================================================
   146. THE SAME TYPEFACE ON EVERY DEVICE
   On an iPhone almost all the writing looked thin and faded, while
   on Android and Windows it looked right. The headings were fine
   everywhere. That difference is the clue: the headings are
   Cormorant Garamond, which is fetched from Google Fonts by every
   device, so they are the same for everyone. The body text was not.

   The body stack asked for Avenir Next LT Pro first. That is a
   licensed Monotype face and its files were never added to
   assets/fonts (the folder holds only its README), so the webfont
   never loads. The stack then named 'Avenir Next' and Avenir as the
   next choices — and those are installed as system fonts on iPhones
   and Macs, and on nothing else.

   So Apple devices were quietly rendering the whole site in Avenir,
   whose 200 weight is an Ultra Light far thinner than anything the
   other platforms were showing, while Android and Windows skipped
   past it to Nunito Sans. Two different typefaces, which is why
   nudging weights only ever half-helped.

   The two system names are dropped. Every device now falls to
   Nunito Sans, the face Android and Windows were already using, so
   the site reads identically everywhere. If Avenir Next LT Pro is
   licensed later and its files are added to assets/fonts, it is
   still first in the stack and will take over on every device at
   once — which is the right way for it to arrive.
   ============================================================ */
:root{
  --body: 'Avenir Next LT Pro', 'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ============================================================
   147. NO RULE DOWN THE RIGHT OF THE PROCESS STEPS
   A long vertical line ran down the right-hand side of the
   process block on a phone, and on nothing wider.

   Each step draws a rule on its right and its bottom, and the
   right-hand one is cleared again at the end of every row — but
   only inside the two, three and five column rules, all of which
   start at 600px. Below that the steps are a single column, so
   every step is the end of its row, and all those uncleared rules
   stacked into one continuous line down the edge.

   At one column a step needs no rule to its right at all.
   ============================================================ */
@media(max-width:599.98px){
  .step{border-right:0}
}

/* ============================================================
   148. THE SIGNED POLICY, LINKED UNDER EACH ONE
   A policy with a PDF uploaded shows a line beneath its words:
   "Click here to view this policy". It opens in a new tab, so the
   reader gets their own browser's PDF viewer rather than a file
   dropped into their downloads.

   Set as a line in gold with a rule under it that draws itself in
   from the left on hover, the same gesture the Discover More links
   use, so it reads as part of the set rather than a bare link.
   ============================================================ */
.svcband__doc{margin:clamp(1.1rem,2vw,1.6rem) 0 0}
.svcband__doc a{
  display:inline-block;position:relative;padding-bottom:.3rem;
  font-size:max(.62rem,10.5px);letter-spacing:.2em;text-transform:uppercase;
  font-weight:400;color:var(--champagne);
}
.svcband__doc a::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--champagne);opacity:.45;
  transform:scaleX(1);transform-origin:left center;
  transition:opacity .4s var(--ease-glide);
}
.svcband__doc a:hover::after,
.svcband__doc a:focus-visible::after{opacity:1}
.svcband__doc a:focus-visible{outline:1px solid var(--champagne);outline-offset:4px}

/* On a flipped policy the words sit right, so the link does too. */
@media(min-width:900px){
  .svcband--flip .svcband__doc{text-align:right}
}

/* ============================================================
   149. THE PAGE NAME STOPS SHORT OF THE WORDMARK
   On a phone the header read "ENVIRONMENTWEST ONE": the page name
   on the left ran straight into the centred wordmark. RECRUITMENT
   did the same. The shorter names never did.

   The wordmark is positioned at the true centre of the page rather
   than sitting in the row, so nothing can push it aside — a name
   long enough to reach it simply overlaps it. Measured, the
   collision runs from 520px to 570px wide for both of the eleven
   letter names. Below 520 the name is already hidden; above 570
   there is room. That narrow band is where phones of this width
   land, which is why laptops and tablets looked right.

   The name now hides below 640px, which clears that band with room
   to spare. The Menu button keeps its label there, so nothing is
   lost but a word that was unreadable anyway.

   A second guard for the future: the name is the page's own title,
   so a long one could reach the mark at wider sizes too. It is
   capped and trimmed with an ellipsis, at a width measured against
   the space actually beside the mark rather than guessed. No
   current page comes close to it.
   ============================================================ */
@media(max-width:639.98px){
  .hdr-left .divider,
  .hdr-left .nav-btn--context{display:none}
}

/* Where it does show, the name is capped so it can never reach the
   mark. Measured rather than guessed: ENVIRONMENT and RECRUITMENT are
   the longest real names at about 99px, and the space beside the mark
   is 111px at 640 and grows from there. */
.hdr-left .nav-btn--context{
  max-width:9rem;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
@media(max-width:767.98px){
  .hdr-left .nav-btn--context{max-width:6.5rem}
}

/* ============================================================
   150. THE MAP'S BUTTON COMES OFF THE PHOTOGRAPH

   Two things on the Contact page.

   First, the cursor. Hovering OPEN IN GOOGLE MAPS showed the
   not-allowed cursor — a circle with a line through it. That is
   not the theme. It is the WordPress Customizer: while the
   preview panel is open, WordPress adds a class of its own to
   every link that would navigate out of the preview frame and
   sets cursor:not-allowed on it, so a stray click cannot throw
   away unsaved changes. The link itself is sound — the browser's
   status bar in the preview showed the right Google Maps address
   — and it opens normally on the published page. Nothing here
   needed fixing, so nothing was changed. The coordinates line
   above it is now a link to the same place as well, since it
   reads like one.

   Second, LOAD THE MAP. It was a full-size panel laid over the
   placeholder photograph with a navy wash behind the words, so
   the photograph was half hidden and the words sat in the middle
   of it. The button now sits below the photograph, in the same
   boxed form as VIEW ALL PROJECTS and GET IN TOUCH: a hairline
   gold rule, ten-pixel uppercase letters tracked wide, weight
   400 like every other boxed button (section 144), and the gold
   filling in on hover. The photograph is left alone.

   The frame and the button sit in a .mapwrap together, which is
   what the grid column now holds; once the map loads, the frame
   fills with the Google embed and the button's row is removed.
   ============================================================ */
.mapwrap{display:block;min-width:0}
.mapframe{width:100%}

.mapframe__foot{
  display:flex;flex-wrap:wrap;align-items:center;
  gap:.9rem;margin-top:clamp(.8rem,1.6vw,1.15rem);
}
.mapwrap.is-live .mapframe__foot{display:none}

.mapframe__load{
  /* off the photograph: the overlay positioning is undone */
  position:static;inset:auto;z-index:auto;
  width:auto;height:auto;background:none;
  display:inline-flex;align-items:center;justify-content:center;
  /* and into the theme's boxed-button language */
  font-family:inherit;font-size:0.6336rem;font-weight:400;
  letter-spacing:0.22em;text-transform:uppercase;line-height:1;
  padding:0.86rem 1.65rem;
  color:#8A6438;border:1px solid rgba(138,100,56,.45);
  cursor:pointer;
  transition:background .45s ease,color .45s ease,border-color .45s ease;
}
.mapframe__load:hover,.mapframe__load:focus-visible{
  background:#8A6438;color:#FFFFFF;border-color:#8A6438;
}
.contactband--navy .mapframe__load{
  color:var(--champagne);border-color:rgba(235,204,157,.45);background:none;
}
.contactband--navy .mapframe__load:hover,
.contactband--navy .mapframe__load:focus-visible{
  background:var(--champagne);color:var(--navy);border-color:var(--champagne);
}

/* The coordinates now open the same map. They keep their quiet
   weight; the gold and full strength arrive on hover. */
a.contactband__coords{
  display:block;width:fit-content;
  color:inherit;text-decoration:none;
  transition:opacity .4s ease,color .4s ease;
}
a.contactband__coords:hover,a.contactband__coords:focus-visible{
  opacity:1;color:var(--accent);
}