:root{
  --navy:#0E1D2E;
  --gold:#907138;
  --gold-light:#C2A565;
  --gold-deep:#7C6130;
  --ink:#232A33;
  --slate:#5A616B;
  --tint:#F7F6F2;
  --hair:#E2E0D8;
  --wrap:1160px;
  --gutter:32px;
  --sans:Arial,'Helvetica Neue',Helvetica,sans-serif;
  --serif:Arial,'Helvetica Neue',Helvetica,sans-serif;

  /* Mark sizes. Set from BC-LOGO-002 section 05. Clear space is the height of
     the b on all four sides, and the b is the full height of the compact mark
     and 0.662 of the height of the stacked primary mark. Minimum on screen:
     primary 96px wide, compact 64px wide, standalone b 16px. */
  --mark-compact-h:30px;   /* 106px wide, clear space 30px */
  --mark-primary-h:46px;   /* 108px wide, clear space 30.5px */
  --mark-b-h:32px;         /* 25px wide, clear space 32px */
  --mark-b-footer-h:44px;  /* 34px wide, clear space 44px */
  --mark-member-h:48px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:hidden}
body{margin:0;background:#fff;color:var(--ink);font-family:var(--serif);font-size:17px;line-height:1.6;overflow-x:hidden;max-width:100%}
img{max-width:100%;height:auto;display:block}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* The skip link has to sit above the fixed header when it is focused, or it
   is both invisible and a 2.4.11 failure: the first thing a keyboard user
   reaches would be entirely hidden behind the header. */
.skip{position:fixed;left:-9999px;top:0;z-index:200;background:var(--gold-deep);color:#fff;padding:14px 22px;font-family:var(--sans);font-weight:700;text-decoration:none}
.skip:focus{left:12px;top:12px;outline:3px solid #fff;outline-offset:2px}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}

/* Approved artwork. Marks are placed as artwork and are never recoloured,
   stretched or given effects in CSS. No filter, no opacity, no fill override
   is applied to any element inside .mark. */
.mark{display:block;width:auto;height:auto}
.mark img{display:block;width:auto;height:100%}

h1,h2,h3,h4{font-family:var(--sans);color:var(--navy);margin:0 0 .6em;font-weight:700;letter-spacing:-0.012em}
h1{font-size:clamp(2.15rem,4.7vw,3.4rem);line-height:1.07}
h2{line-height:1.16}
.section-h2{font-size:clamp(1.3rem,2vw,1.6rem);max-width:20em;margin-bottom:0}
.lead-h2{font-size:clamp(1.6rem,3vw,2.4rem);max-width:17em}
h3{font-size:1.02rem;line-height:1.32;letter-spacing:0}
p{margin:0 0 1.15em}
a{color:inherit}
.link{font-family:var(--sans);font-size:.95rem;font-weight:700;color:var(--navy);text-decoration:none;border-bottom:2px solid var(--gold);padding-bottom:2px}
.link:hover{color:var(--gold-deep)}
.eyebrow{font-family:var(--sans);font-size:.7rem;font-weight:700;letter-spacing:.17em;text-transform:uppercase;color:var(--gold-deep);margin:0 0 1.1rem}
.rule{display:block;width:34px;height:2px;background:var(--gold);margin-bottom:1.1rem}

/* ---------------------------------------------------------- buttons */
.btn{display:inline-block;font-family:var(--sans);font-size:.9rem;font-weight:700;letter-spacing:.02em;text-decoration:none;padding:15px 28px;min-height:44px;border:1px solid transparent;transition:background .18s,color .18s,border-color .18s}
.btn-primary{background:var(--gold);color:#fff;border-color:var(--gold)}
.btn-primary:hover{background:var(--gold-deep);border-color:var(--gold-deep)}
.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}
.btn-ghost:hover{border-color:var(--gold-light);color:var(--gold-light)}

/* ----------------------------------------------------------- header */
.site-header{position:fixed;top:0;left:0;right:0;z-index:60;transition:background .25s,box-shadow .25s;padding-top:env(safe-area-inset-top,0px)}
.site-header.solid{background:var(--navy);box-shadow:0 1px 0 rgba(255,255,255,.08)}
.topband{height:3px;background:var(--gold)}
/* The header carries the stacked primary lockup. BC-LOGO-002 section 05 sets
   clear space at the height of the b, which is 0.662 of the primary mark, so
   a 46px mark needs 30.5px above and below and the bar is 112px. */
.header-inner{display:flex;align-items:center;gap:40px;height:112px}
/* Two approved lockups, one shown at a time. The stacked primary mark needs
   46px plus 30.5px of clear space above and below, which does not fit a phone
   header without pushing the bar to about 98px. BC-LOGO-002 provides the
   compact mark for constrained placements, so the phone header uses it at 26px,
   which is 92px wide and above the 64px minimum. Neither file is altered. */
.brand{display:flex;align-items:center;flex:0 0 auto;height:var(--mark-primary-h)}
.brand-compact{display:none}
.brand img{height:var(--mark-primary-h);width:auto;display:block}
.brand .mark{display:block}
.nav{margin-left:auto}
.nav-list{display:flex;gap:30px;list-style:none;margin:0;padding:0;align-items:center}
.nav-list a{font-family:var(--sans);font-size:.87rem;font-weight:600;color:#fff;text-decoration:none;padding:6px 0;letter-spacing:.01em}
.nav-list a:hover{color:var(--gold-light)}
.header-cta{padding:12px 20px}
.menu-btn{display:none;background:none;border:0;width:44px;height:44px;cursor:pointer}
.bars,.bars::before,.bars::after{display:block;width:22px;height:2px;background:#fff;content:'';position:relative}
.bars::before{top:-7px}.bars::after{top:5px}
.mobile-nav{background:var(--navy);border-top:1px solid rgba(255,255,255,.12);padding:16px 24px 24px}
.mobile-nav ul{list-style:none;margin:0 0 16px;padding:0}
.mobile-nav a{display:block;padding:13px 0;font-family:var(--sans);font-weight:600;color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.1)}

/* ------------------------------------------------------------- hero */
.hero{position:relative;background:var(--navy);color:#fff;padding:230px 0 128px;overflow:hidden}
.hero-bg{position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(14,29,46,.30) 0%,rgba(14,29,46,.72) 62%,rgba(14,29,46,.96) 100%),
    radial-gradient(130% 100% at 76% 0%,#1E3550 0%,#0E1D2E 66%);
}
.hero-rule{display:block;width:56px;height:3px;background:var(--gold);margin:0 0 1.5rem}
/* The hero inner is a full .wrap, so its left edge is the site gutter and the
   hero copy lines up with the header mark and every section below it. The
   measure is set on .hero-copy, which is not centred. */
.hero-inner{position:relative}
.hero-copy{max-width:880px;margin:0}
.hero h1{color:#fff;max-width:14.5em;margin-bottom:1.1rem}
.campaign{font-family:var(--sans);font-size:.7rem;font-weight:700;letter-spacing:.17em;text-transform:uppercase;color:var(--gold-light);margin:0 0 1.6rem}
.campaign-explain{display:block;text-transform:none;letter-spacing:.03em;font-weight:500;font-size:.8rem;color:#A9B7C6;margin-top:.5rem}
.standfirst{font-size:1.1rem;color:#D7DEE7;max-width:32em;margin-bottom:2.2rem}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin:0}

/* ------------------------------------- selected organisations we support */
/* Shallow light band below the hero. The treatment is carried over from the
   ticker already built and approved: greyscale, held back in opacity, and
   returning to full colour on hover so a reader can identify a mark they
   recognise. The mask fades both edges so logos do not cut off hard. None of
   this recolours a Beers mark: the filter applies inside .client-track only. */
/* White rather than panel tint. Not every supplied logo is transparent, and a
   logo with a white ground shows as a pale box on a tinted band. On white it
   disappears into the ground, which is the honest fix rather than knocking a
   background out of someone else's artwork. */
/* Property Management Awards 2026 finalist, in the hero. Rev AV.
   The organiser's white-on-dark artwork, placed as supplied on the navy plate:
   no box, no knockout, no recolour, no filter, and not set against the Beers
   mark, which sits in the header well clear of it.
   Wide: on the right, its right edge on the content column and its bottom edge
   on the hero buttons' baseline. The vignette is a gradient on the plate, not a
   panel on the badge: the hero is a film, so the frame behind the artwork
   changes, and this keeps the white readable whatever frame is showing.
   Narrow: back into the flow under the buttons, where there is no room beside
   the copy, and the hero's bottom padding tightens to match. */
.hero-award{display:block;width:260px;margin:2.2rem 0 0;line-height:0;
  text-decoration:none;position:relative}
.hero-award img{width:260px;height:95px}
@media (min-width:1001px){
  .hero-award{position:absolute;right:var(--gutter);bottom:0;width:340px;margin:0;z-index:3}
  .hero-award img{width:340px;height:124px}
  .hero-award::before{content:"";position:absolute;left:-60px;right:-52px;top:-62px;bottom:-56px;
    background:radial-gradient(62% 58% at 50% 50%,rgba(14,29,46,.78) 0%,
      rgba(14,29,46,.52) 46%,rgba(14,29,46,0) 100%);
    z-index:-1;pointer-events:none}
}
@media (max-width:1000px){
  /* badge back in the flow, so the band under it tightens to match */
  .hero{padding-bottom:2.2rem}
}
@media (max-width:620px){
  .hero-award{width:230px;margin-top:2rem}
  .hero-award img{width:230px;height:84px}
}
.client-band{background:#fff;border-bottom:1px solid var(--hair);padding-block:30px 32px;overflow:hidden}
.client-band-label{font-family:var(--sans);font-size:.66rem;font-weight:700;letter-spacing:.17em;text-transform:uppercase;color:var(--slate);margin:0 0 1.5rem}
.client-marquee{position:relative;display:flex;align-items:center;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
/* The negative delay starts the roll part way through its cycle, so the first
   painted frame has a logo clear of the edge rather than under the fade. */
.client-track{display:flex;align-items:center;gap:76px;padding-right:76px;flex:0 0 auto;
  animation:client-roll 52s linear infinite;animation-delay:-6s;will-change:transform}
/* Each logo sits in a box sized to its own ink. The image is scaled so the ink
   fills that box and the whitespace the supplier left around the mark is
   clipped. Nothing is cropped off the artwork itself. */
.client-track .lg{height:var(--h);width:calc(var(--w) + 6px);flex:0 0 auto;display:flex;
  align-items:center;justify-content:center;overflow:hidden}
.client-track .lg img{height:var(--ih);width:auto;max-width:none;flex:0 0 auto;
  transform:translateX(var(--ox,0));
  /* grayscale only. The contrast() in the original ticker pulled a white
     ground down to grey, which showed every non-transparent logo as a box. */
  filter:grayscale(1);opacity:.62;transition:filter .35s,opacity .35s}
.client-track .lg:hover img{filter:none;opacity:1}
.client-marquee:hover .client-track,
.client-marquee:focus-within .client-track{animation-play-state:paused}
@keyframes client-roll{from{transform:translate3d(0,0,0)}to{transform:translate3d(-100%,0,0)}}

/* --------------------------------------------------------- sections */
/* Rev AC. Was 104px top and bottom, so two adjacent sections put 208px, about
   two inches, between one block of text and the next. Where the two sections
   shared a background there was nothing in that gap to say a section had
   ended, and it read as a mistake rather than as a division. The padding comes
   in, and where two sections of the same ground meet, a hairline marks the
   boundary so the space is doing visible work. */
.section{padding:72px 0}
.section:not(.tint):not(.navy) + .section:not(.tint):not(.navy){border-top:1px solid var(--hair)}
.section.tint + .section.tint{border-top:1px solid #E0DDD2}
.section.tint{background:var(--tint)}
.lede{font-size:1.14rem;line-height:1.62;max-width:36em;color:var(--ink)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:0}

/* diagnostic cards, where we are usually called in */
.diag{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;list-style:none;margin:0;padding:0}
.diag li{background:var(--tint);border-left:3px solid var(--gold);padding:30px 28px 32px;display:flex;flex-direction:column}
/* Rev AC. The numbers were .72rem uppercase label text. They are numerals,
   so they are now set as numerals: large, gold, and quiet enough not to
   compete with the heading beside them. */
.diag .num{font-family:var(--sans);font-size:2.3rem;font-weight:700;letter-spacing:-0.02em;
  color:var(--gold);line-height:1;opacity:.9}
.diag .num::after{content:"";display:block;width:26px;height:2px;background:var(--gold);margin:.85rem 0 1.15rem}
.diag h3{font-size:1.06rem;margin-bottom:.6em}
.diag p{font-size:.97rem;color:var(--slate);margin:0}

/* difference points */
.points{list-style:none;margin:0;padding:0;display:grid;gap:0}
.points li{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:14px 52px;padding:22px 0;
  border-top:1px solid var(--hair);align-items:baseline}
.points li:last-child{border-bottom:1px solid var(--hair)}
.pt-h{font-family:var(--sans);font-weight:700;font-size:.95rem;color:var(--navy)}
.pt-b{font-size:1rem;color:var(--slate)}

/* Client quotations, Rev Y. Previously these ran through the .dl treatment,
   which is built for a scope list: the words read as a specification item
   rather than as something a client said. Their own block, two up on desktop
   and one on a phone, a gold rule above each, and the attribution split so the
   organisation reads first and the role sits under it. */
.quotes{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:1fr 1fr;gap:34px 40px}
.quote{border-top:1px solid var(--hair);padding-top:20px}
.quote blockquote{margin:0}
.quote blockquote p{margin:0;font-size:1.06rem;line-height:1.66;color:var(--ink);font-style:italic}
.qa{margin:18px 0 0;font-family:var(--sans);line-height:1.4}
.qo{display:block;font-weight:700;font-size:.92rem;color:var(--navy)}
.qr{display:block;font-size:.82rem;color:var(--slate);margin-top:3px}
/* The link that follows a set of quotations needs its own air. Without this it
   sits against the last attribution and reads as part of it. */
.quotes + .proof-link{margin-top:2.4rem}
@media (max-width:760px){
  .quotes{grid-template-columns:1fr;gap:28px}
  .quote blockquote p{font-size:1.02rem}
  .quotes + .proof-link{margin-top:2rem}
}

/* routes */
.routes{gap:32px}
.route{display:flex;flex-direction:column;background:#fff;border:1px solid var(--hair);box-shadow:0 -3px 0 0 var(--gold);padding:30px 28px 26px;text-decoration:none;transition:transform .18s,box-shadow .18s,border-color .18s}
.route:hover{transform:translateY(-3px);box-shadow:0 -3px 0 0 var(--gold),0 18px 36px rgba(14,29,46,.10);border-color:#D4D1C7}
.route h3{margin-bottom:.6em}
.route p{font-size:.97rem;color:var(--slate);margin:0 0 1.6rem;flex:1 0 auto}
.route-go{font-family:var(--sans);font-size:.78rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gold-deep);margin-top:auto;align-self:start}
.route-go::after{content:" \2192"}

/* ------------------------------------------------------------ proof */
.proof{background:var(--navy);color:#fff;padding:76px 0}
/* Standalone b used as a stamp. Full opacity, own colourway, clear space equal
   to its own height on all four sides. BC-LOGO-002 sections 02 and 05. */
.stamp{height:var(--mark-b-h);margin:0 0 var(--mark-b-h)}
.stamp img{height:var(--mark-b-h);width:auto;display:block}
.fig-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:34px 36px;list-style:none;margin:0 0 2rem;padding:0}
.section:not(.navy) .fig-grid li{border-top:1px solid var(--hair);padding-top:16px}
.section.tint .fig-grid li{border-top-color:#E0DDD2}
.fig-grid .fig{display:block;font-family:var(--sans);font-weight:700;font-size:2.5rem;color:#fff;line-height:1.02;letter-spacing:-0.02em}
.fig-grid .cap{display:block;font-family:var(--sans);font-size:.78rem;line-height:1.5;color:var(--gold-light);margin-top:.5rem;max-width:18em}
.proof .qualifier{font-family:var(--sans);font-size:.78rem;line-height:1.55;color:#9FADBC;max-width:54em;margin:0 0 1.4rem;padding-top:1.4rem;border-top:1px solid rgba(255,255,255,.16)}
.proof-link{margin:0}
.proof .link{color:#fff;border-bottom-color:var(--gold-light)}
.proof .link:hover{color:var(--gold-light)}

/* ---------------------------------------------------------- closing */
.closing{background:var(--tint);box-shadow:inset 0 3px 0 var(--gold);padding:72px 0}

/* ----------------------------------------------------------- footer */
.site-footer{background:var(--navy);color:#B9C4D0;font-size:.88rem;padding:62px 0 0}
.footer-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1.1fr;gap:48px;padding-bottom:46px}
.footer-logo{height:var(--mark-b-footer-h);margin-bottom:34px}
.footer-logo img{height:var(--mark-b-footer-h);width:auto;display:block}

/* ------------------------------------- memberships and affiliations strip */
.members{border-top:1px solid rgba(255,255,255,.12);padding-block:34px 30px}
.members h4{font-family:var(--sans);font-size:.68rem;letter-spacing:.17em;text-transform:uppercase;color:var(--gold-light);margin:0 0 1.5em}
.member-row{display:flex;flex-wrap:wrap;align-items:center;gap:52px;margin:0 0 32px;padding:0;list-style:none}
/* Rev AH. White versions of the issued artwork, on a transparent ground, so
   the marks sit directly on the navy without a tile behind them. Each is a
   mono rendering of the supplied file: the shapes are the supplied shapes and
   only the colour is replaced. */
.member-row li{display:flex;align-items:center;min-height:var(--mark-member-h)}
.member-row img{height:var(--mark-member-h);width:auto;display:block}
.member-row .rics img{height:34px}
.members p{font-family:var(--sans);font-size:.76rem;line-height:1.6;color:#9FADBC;max-width:60em;margin:0}
.brand-col p{max-width:24em;font-size:.88rem}
.brandline-sm{font-family:var(--sans);font-weight:700;color:var(--gold-light);
  letter-spacing:.14em;text-transform:uppercase;font-size:.66rem;max-width:none;line-height:1.7}
.footer-col h4,.footer-col .footer-h{font-family:var(--sans);font-size:.68rem;letter-spacing:.17em;text-transform:uppercase;color:var(--gold-light);margin:0 0 1.2em}
.footer-col ul{list-style:none;margin:0;padding:0}
.footer-col li{margin-bottom:9px;line-height:1.45}
.footer-col a{color:#B9C4D0;text-decoration:none}
.footer-col a:hover{color:var(--gold-light)}
.footer-col ul.legal{margin-top:18px;padding-top:16px;border-top:1px solid rgba(255,255,255,.12)}
.footer-base{border-top:1px solid rgba(255,255,255,.12);padding-top:22px;padding-bottom:calc(30px + env(safe-area-inset-bottom,0px))}
.footer-base p{margin:0 0 6px;font-family:var(--sans);font-size:.74rem;color:#8A97A6}
.proto-note{color:var(--gold-light)!important}

a:focus-visible,button:focus-visible{outline:3px solid var(--gold-light);outline-offset:3px}

/* ------------------------------------------------------- responsive */
@media (max-width:1000px){
  .nav,.header-cta{display:none}
  .menu-btn{display:block;margin-left:auto}
  .fig-grid{grid-template-columns:repeat(2,1fr);gap:32px}
  .diag{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr;gap:38px}
}
@media (max-width:840px){
  .grid-3{grid-template-columns:1fr;gap:34px}
  .diag{grid-template-columns:repeat(2,1fr);gap:20px}
  .hero{padding:188px 0 2.2rem}
  .section,.closing{padding:64px 0}
  .points li{grid-template-columns:1fr;gap:6px}
}
@media (max-width:760px){
  /* No roll on a narrow screen. A static wrapped row is quieter and does not
     fight the hero for attention. The duplicate track is hidden, not animated. */
  .client-marquee{display:block}
  .client-track{animation:none;flex-wrap:wrap;padding-right:0;gap:26px 40px;justify-content:flex-start}
  .client-track[aria-hidden="true"]{display:none}
  .client-marquee::before,.client-marquee::after{display:none}
  .client-band{padding-block:26px 28px}
  /* Scale the whole measured geometry rather than forcing a flat height,
     which would break the ink-to-box relationship each logo is built on. */
  .client-track .lg{height:calc(var(--h) * .82);width:calc(var(--w) * .82 + 6px)}
  .client-track .lg img{height:calc(var(--ih) * .82)}
}
@media (max-width:620px){
  body{font-size:17px}
  :root{--gutter:28px;--mark-compact-h:26px;--mark-primary-h:42px;--mark-b-h:28px;--mark-b-footer-h:38px}
  .header-inner{height:80px;gap:20px}
  .brand{height:var(--mark-compact-h)}
  .brand img{height:var(--mark-compact-h)}
  .brand-primary{display:none}
  .brand-compact{display:block}
  .member-row{flex-direction:column;align-items:flex-start;gap:18px}
  .hero{padding:140px 0 2rem}
  .standfirst{font-size:1.02rem}
  .fig-grid{grid-template-columns:1fr;gap:26px}
  .diag{grid-template-columns:1fr;gap:18px}
  .footer-grid{grid-template-columns:1fr;gap:32px}
  .section,.closing{padding:52px 0}
  .btn{width:100%;text-align:center}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}
  /* Static fallback. With the roll stopped, the duplicate track has no job and
     the row wraps rather than running off the edge. */
  .client-marquee{display:block}
  .client-track{flex-wrap:wrap;padding-right:0;gap:26px 56px}
  .client-track[aria-hidden="true"]{display:none}
  .client-marquee::before,.client-marquee::after{display:none}
}

/* ===================================================== interior pages ====
   Interior pages share the header, footer, wrapper, gutter and type scale of
   the homepage. Only the hero is shorter, because there is no client band
   beneath it and the page below it is the point. */
.page-hero{position:relative;background:var(--navy);color:#fff;padding:176px 0 74px;overflow:hidden}
.page-hero .hero-bg{position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(14,29,46,.34) 0%,rgba(14,29,46,.78) 64%,rgba(14,29,46,.97) 100%),
    radial-gradient(120% 110% at 78% 0%,#1E3550 0%,#0E1D2E 68%);
}
.page-hero h1{color:#fff;margin-bottom:1.05rem;font-size:clamp(1.95rem,3.9vw,2.9rem)}
.page-hero .standfirst{margin-bottom:2rem}
.page-hero .campaign a{color:var(--gold-light);text-decoration:none;border-bottom:1px solid rgba(194,165,101,.4)}
.page-hero .campaign a:hover{color:#fff;border-bottom-color:#fff}
/* ================================================ section grid, Rev AC ====
   Every section is a two column editorial grid. The eyebrow and the h2 sit in
   a left rail, the lede and the running prose in a right column, and anything
   that needs the page width spans both. The point is that the left placement
   of the text is now structural: the reader sees a label column and a text
   column, not a paragraph that has drifted to one side of an empty page. */
.sec-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);
  column-gap:52px;row-gap:0;align-items:start}
/* Rev AD. The eyebrow spans the grid on a row of its own, so the heading in
   the rail and the paragraph in the column start on the same line. */
.sec-eyebrow{grid-column:1 / -1;margin:0 0 1.4rem}
.sec-head{grid-column:1;position:sticky;top:132px}
.closing .sec-head,.proof .sec-head{position:static}
.sec-head h2{margin-bottom:0;max-width:none;font-size:clamp(1.5rem,2.4vw,2.05rem)}
.sec-copy{grid-column:2}
.sec-wide{grid-column:1 / -1;margin-top:2rem}
/* Rev AD. Back to the prose column. A section now has exactly two vertical
   edges: the page edge, which every full width block starts from, and the
   prose edge, which every paragraph starts from, whether it comes before or
   after a table. Mixing the two was what made the reading feel unsettled. */
.sec-wide + .sec-copy{grid-column:1 / -1;margin-top:2rem;max-width:44em}
.sec-copy > :last-child{margin-bottom:0}
/* Within the right hand column the measure is the column, not an arbitrary
   34em set against a much wider page. */
.sec-copy .copy,.sec-copy .lede,.sec-copy .bullets{max-width:38em}
.sec-copy .form{margin-top:1.6rem}
.sec-copy .lede{margin-bottom:1.5rem}
.sec-copy .lede + .copy{margin-top:0}
/* A section whose head is the only left column content and whose body is all
   full width: the head should not float in the middle of nothing. */
.sec-grid:not(:has(.sec-copy)) .sec-head{position:static}
@media (max-width:1000px){
  .sec-grid{grid-template-columns:1fr;column-gap:0}
  .sec-head{grid-column:1;position:static;margin-bottom:1.6rem}
  .sec-copy,.sec-wide,.sec-wide + .sec-copy{grid-column:1;max-width:none}
  .sec-wide{margin-top:2.2rem}
  .sec-wide + .sec-copy{margin-top:2rem}
}

/* A reading measure for running prose. A line of 110 characters is not a
   paragraph anyone finishes. */
.copy{max-width:34em}
.section.navy .copy{max-width:36em}
.diag.two-up{grid-template-columns:repeat(2,1fr)}
@media (max-width:840px){.diag.two-up{grid-template-columns:1fr}}
/* Rev AB. Same reasoning as the route cards. At one card per row the numbered
   card chrome is paid six times: 62px of padding and a 46px number block per
   card. Tightened, the homepage diagnostic section loses roughly 270px of
   scrolling on a phone without losing a word. */
@media (max-width:620px){
  .diag{gap:14px;margin-top:2.2rem}
  .diag li{padding:20px 20px 22px}
  .diag .num::after{margin:.5rem 0 .8rem}
  .diag h3{margin-bottom:.45em}
  .diag p{font-size:.94rem}
}

/* Definition rows. A term and what it means, in two columns on a wide screen
   and stacked on a narrow one. */
.dl{list-style:none;margin:0;padding:0;border-top:1px solid var(--hair)}
.dl li{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:14px 52px;
  padding:22px 0;border-bottom:1px solid var(--hair)}
.dl .t{font-family:var(--sans);font-weight:700;color:var(--navy);font-size:1rem;line-height:1.35}
.dl .d{color:var(--slate);margin:0}
.tint .dl,.tint .dl li,.tint .quote{border-color:#E0DDD2}

/* Three-column lifecycle table. Same rhythm as .dl. */
.dl3{list-style:none;margin:0;padding:0;border-top:1px solid var(--hair)}
.dl3 li{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,5fr) minmax(0,3fr);
  gap:10px 52px;padding:22px 0;border-bottom:1px solid var(--hair)}
.dl3 .t{font-family:var(--sans);font-weight:700;color:var(--navy);font-size:.97rem;line-height:1.35}
.dl3 .d{color:var(--slate);margin:0}
.dl3 .g{color:var(--ink);margin:0}
.dl3-head{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,5fr) minmax(0,3fr);
  gap:52px;padding:0 0 12px;font-family:var(--sans);font-size:.7rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep)}
.tint .dl3,.tint .dl3 li{border-color:#E0DDD2}

/* Two-column may / may not. */
.two-head{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:52px;padding:0 0 12px;
  font-family:var(--sans);font-size:.7rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold-deep)}
.two{list-style:none;margin:0;padding:0;border-top:1px solid var(--hair)}
.two li{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:12px 64px;padding:20px 0;
  border-bottom:1px solid var(--hair)}
.two .y{color:var(--ink);margin:0}
.two .n{color:var(--slate);margin:0}
.tint .two,.tint .two li{border-color:#E0DDD2}

/* Cream callout with a gold keyline. A qualification the reader has to see,
   not a footnote. */
/* Rev AG. The callout was a tinted box with a left rule and 28px of padding,
   so its text sat inset from the paragraph above it and its box ran wider than
   the paragraph's measure. Two edges again. It is now a top-ruled block with
   no side padding, so its heading and its text start on exactly the same line
   as the body text. The gold rule and the navy heading mark it; the tint was
   doing the same job twice. */
.callout{background:none;border-left:0;border-top:2px solid var(--gold);
  padding:16px 0 0;margin:30px 0}
.callout:last-child{margin-bottom:0}

.callout h3{font-size:1rem;margin:0 0 .5rem}
.callout p{max-width:none}
.callout p{margin:0;color:var(--slate)}

/* Navy panel inside a light section, and a full navy section. */
.panel{background:var(--navy);color:#fff;padding:34px 36px;margin:38px 0}
.panel:last-child{margin-bottom:0}
.panel h3{color:#fff;font-size:1.08rem;margin:0 0 .6rem}
.panel p{margin:0;color:#C9D3DE}
.section.navy{background:var(--navy);color:#fff}
.section.navy h2,.section.navy h3{color:#fff}
.section.navy p{color:#C9D3DE}
.section.navy .eyebrow{color:var(--gold-light)}

/* Link list, used where a page points at its siblings. */
.linklist{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));gap:0 44px}
.linklist li{border-bottom:1px solid var(--hair)}
.linklist a{display:block;padding:16px 0;font-family:var(--sans);font-weight:700;
  color:var(--navy);text-decoration:none}
.linklist a:hover{color:var(--gold-deep)}
.linklist a::after{content:' \2192';color:var(--gold)}

/* Enquiry form. No third-party script and no tracking. */
.form{display:grid;grid-template-columns:1fr 1fr;gap:18px 24px;max-width:100%}
.form .full{grid-column:1 / -1}
.form label{display:block;font-family:var(--sans);font-size:.82rem;font-weight:700;
  color:var(--navy);margin:0 0 7px}
.form input,.form textarea{width:100%;font:inherit;font-size:.97rem;color:var(--ink);
  background:#fff;border:1px solid #CFCCC1;padding:12px 14px}
.form textarea{min-height:150px;resize:vertical}
.form input:focus,.form textarea:focus{outline:2px solid var(--gold);outline-offset:1px;border-color:var(--gold)}
.form .consent{display:flex;gap:12px;align-items:flex-start;font-size:.92rem;color:var(--slate)}
.form .consent input{width:auto;flex:0 0 auto;margin-top:3px}
.form .hint{font-size:.86rem;color:var(--slate);margin:.4rem 0 0}

/* A page that is built but not approved for publication. */
.holding{border:1px solid var(--gold);background:var(--tint);padding:28px 30px}
.holding .tag{display:inline-block;font-family:var(--sans);font-size:.68rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:#fff;background:var(--gold-deep);
  padding:5px 10px;margin:0 0 14px}
.holding p{margin:0 0 .8rem;color:var(--ink)}
.holding p:last-child{margin-bottom:0}

@media (max-width:840px){
  .page-hero{padding:152px 0 58px}
  .dl li{grid-template-columns:1fr;gap:6px}
  .dl3 li{grid-template-columns:1fr;gap:6px}
  .dl3-head{display:none}
  .linklist{grid-template-columns:1fr}
}
@media (max-width:620px){
  .page-hero{padding:120px 0 50px}
  .two-head{display:none}
  .two li{grid-template-columns:1fr;gap:6px}
  .two .n::before{content:'We do not: ';font-weight:700;color:var(--navy)}
  .two .y::before{content:'We may: ';font-weight:700;color:var(--navy)}
  .form{grid-template-columns:1fr}
  .panel{padding-inline:20px}
}

/* ================================================= accessibility fixes ===
   Measured against WCAG 2.2 AA on the Rev Q build, 20 September 2026. Each
   rule below closes a criterion that was failing, and the criterion is named
   so the next person can tell why the rule exists. */

/* 2.4.11 Focus Not Obscured (Minimum). The header is fixed and 112px tall, so
   a focused element scrolled to by the keyboard could sit underneath it. */
html{scroll-padding-top:132px}
@media (max-width:620px){html{scroll-padding-top:96px}}

/* 2.4.7 Focus Visible, stated rather than left to the browser default, and
   given a light and a dark variant so it is visible on both grounds. */
:focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-radius:1px}
.site-header :focus-visible,.hero :focus-visible,.page-hero :focus-visible,
.site-footer :focus-visible,.proof :focus-visible,.closing :focus-visible,
.section.navy :focus-visible,.panel :focus-visible{outline-color:var(--gold-light)}

/* 2.5.8 Target Size (Minimum), 24 by 24 CSS pixels. The footer link columns
   and the form checkbox were below it. Inline links inside a sentence are
   exempt and are left alone. */
.footer-col ul a,.footer-col ul li{min-height:24px}
.footer-col ul a{display:inline-flex;align-items:center;min-height:24px}
.footer-col ul li{margin-bottom:2px}
.form .consent input[type="checkbox"]{width:24px;height:24px;accent-color:var(--gold-deep)}
/* Rev T. This was display:flex, which made every text run and the Privacy
   Policy link separate flex items and dropped the spaces between them, so the
   line read "I have read thePrivacy Policy". A label holding a sentence stays
   a block and the text flows. The 24px minimum is kept for 2.5.8. */
.form .consent label{min-height:24px;display:block;padding-top:2px;line-height:1.45;
  font-weight:400;color:var(--slate);margin:0}

/* Footer column headings are h2 now, so that a page whose last heading is an
   h2 does not jump to h4. The appearance is unchanged. */
.footer-h{font-family:var(--sans);font-size:.7rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold-light);margin:0 0 14px}

/* 2.2.2 Pause, Stop, Hide. The control, and the paused state it sets. */
.client-band-head{display:flex;align-items:baseline;justify-content:space-between;gap:20px}
.motion-toggle{display:inline-flex;align-items:center;gap:7px;min-height:24px;
  background:none;border:0;padding:4px 2px;cursor:pointer;font-family:var(--sans);
  font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gold-deep)}
.motion-toggle:hover{color:var(--navy)}
.motion-ico{width:10px;height:11px;flex:0 0 auto;box-sizing:border-box;
  border-left:3px solid currentColor;border-right:3px solid currentColor}
.motion-toggle[aria-pressed="true"] .motion-ico{width:0;height:0;border:0;
  border-left:10px solid currentColor;border-top:6px solid transparent;
  border-bottom:6px solid transparent}
.client-band.paused .client-track{animation-play-state:paused}
@media (max-width:620px){
  .client-band-head{flex-direction:column;align-items:flex-start;gap:8px}
}


/* 2.5.8 continued. A standalone link that is the whole of its paragraph, and a
   link that is the whole of a definition value, are targets in their own right
   rather than words inside a sentence, so the 24px minimum applies to them. */
p > .link:only-child,.dl .d > a:only-child,.proof-link a{display:inline-flex;
  align-items:center;min-height:24px}

/* ==================================================== legal pages ========
   The three footer pages carry drafted copy that is not yet approved. What
   is still open is shown on the page rather than hidden in a comment. */
.draftbox{border:1px solid var(--gold);background:var(--tint);padding:24px 28px;margin:0 0 40px}
.draftbox .tag{display:inline-block;font-family:var(--sans);font-size:.66rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:#fff;background:var(--gold-deep);
  padding:5px 10px;margin:0 0 14px}
.draftbox p{margin:0 0 .7rem;color:var(--ink);max-width:40em}
.draftbox ul{margin:0;padding-left:1.1rem;color:var(--slate)}
.draftbox li{margin-bottom:.35rem}
mark.confirm{background:#F6E6B8;color:#4A3B12;padding:1px 5px;font-family:var(--sans);
  font-size:.86em;font-weight:700;border-radius:2px}
.bullets{margin:0 0 1.2rem;padding-left:1.15rem;max-width:36em;color:var(--ink)}
.bullets li{margin-bottom:.45rem}

/* The lawful basis table. Four columns on a wide screen, stacked below. */
.dl4{list-style:none;margin:0;padding:0;border-top:1px solid var(--hair)}
.dl4 li{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,3fr) minmax(0,3fr) minmax(0,2fr);
  gap:10px 52px;padding:20px 0;border-bottom:1px solid var(--hair)}
.dl4 .t{font-family:var(--sans);font-weight:700;color:var(--navy);font-size:.94rem;line-height:1.35}
.dl4 .d{color:var(--slate);margin:0;font-size:.95rem}
.dl4 .g{color:var(--ink);margin:0;font-size:.95rem}
.dl4-head{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,3fr) minmax(0,3fr) minmax(0,2fr);
  gap:52px;padding:0 0 12px;font-family:var(--sans);font-size:.66rem;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:var(--gold-deep)}
.tint .dl4,.tint .dl4 li{border-color:#E0DDD2}
@media (max-width:1000px){
  .dl4 li{grid-template-columns:1fr;gap:6px}
  .dl4-head{display:none}
  .dl4 .d::before,.dl4 .g::before{font-family:var(--sans);font-size:.64rem;font-weight:700;
    letter-spacing:.12em;text-transform:uppercase;color:var(--gold-deep);display:block;margin-bottom:2px}
  .dl4 .d:nth-of-type(1)::before{content:'Personal data'}
  .dl4 .d:nth-of-type(2)::before{content:'Lawful basis'}
  .dl4 .g::before{content:'Retention'}
}
@media (max-width:620px){.draftbox{padding:20px 20px}}

/* A section whose only content is the draft notice should not leave a full
   section gap before the copy it introduces. */
.section:has(> .wrap > .draftbox){padding-bottom:0}

/* ---- team: person profile, people strip, tags (Rev Q, Wix alignment) ---- */
.person{display:grid;grid-template-columns:minmax(220px,340px) 1fr;gap:48px;align-items:start}
.person-img{width:100%;height:auto;display:block;border-bottom:3px solid var(--gold);
  filter:saturate(.62) contrast(1.05) brightness(1.01)}
.person-body .eyebrow{margin-top:0}
.person-name{font-family:var(--sans);font-size:2rem;line-height:1.15;margin:.1em 0 .2em;color:var(--navy)}
.person .post{font-family:var(--sans);font-weight:700;font-size:.95rem;color:var(--slate);margin:0 0 1rem}
.tags{list-style:none;margin:0 0 1.4rem;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.tags li{font-family:var(--sans);font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--navy);border:1px solid var(--hair);background:#fff;padding:6px 10px}
.people{list-style:none;margin:2rem 0 1.5rem;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,300px));gap:32px}
.people img{width:100%;height:auto;display:block;border-bottom:3px solid var(--gold);margin-bottom:.8rem}
.people span{display:block;font-family:var(--sans)}
.pp-role{font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-deep)}
.pp-name{font-size:1.3rem;font-weight:700;color:var(--navy);margin:.2em 0}
.pp-post{font-size:.88rem;color:var(--slate)}
.section:not(.navy) .fig-grid .fig{color:var(--gold-deep)}
.section:not(.navy) .fig-grid .cap{color:var(--slate)}
.section.navy .qualifier{color:var(--gold-light)}
@media (max-width:760px){
  .person{grid-template-columns:1fr;gap:24px}
  .person-img{max-width:340px}
  .people{grid-template-columns:1fr 1fr;gap:16px}
  .person-name{font-size:1.6rem}
}
.group-h{font-family:var(--sans);font-size:.85rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-deep);margin:3rem 0 -1.4rem}
@media (min-width:1025px){.fig-grid:has(> li:nth-child(6):last-child){grid-template-columns:repeat(3,1fr)}}
/* Rev AB. Route cards stack one per row on a phone, so their desktop chrome
   is paid six times over. Padding and gap come in, and the Read more line
   goes: the whole card is the link and the heading is the label, so on a
   phone it was a third line of furniture per card and nothing more. */
@media (max-width:620px){
  .routes{gap:16px}
  .route{padding:20px 20px 20px;box-shadow:0 -3px 0 0 var(--gold)}
  .route h3{margin-bottom:.45em}
  .route p{margin:0;font-size:.94rem}
  .route .route-go{display:none}
}
.portrait{float:right;width:320px;max-width:40%;height:auto;margin:0 0 24px 44px;
  border-bottom:3px solid var(--gold);filter:saturate(.62) contrast(1.05) brightness(1.01)}
.section .portrait + .copy{margin-top:0}
@media (max-width:760px){.portrait{float:none;width:280px;max-width:70%;margin:0 0 20px}}
.draftindex{border:1px solid var(--gold-light);background:#FBF8F1;padding:24px 26px;margin-top:2rem}

/* ---- film hero, Rev R. The film is decorative, muted and pausable. ---- */
.hero{position:relative;overflow:hidden}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:sepia(1) contrast(1.04) brightness(.78) saturate(1.05);z-index:0}
.hero-scrim{position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,rgba(14,29,46,.90) 0%,rgba(14,29,46,.66) 38%,rgba(14,29,46,.22) 100%)}
.hero-scrim::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(14,29,46,.45) 0%,rgba(14,29,46,0) 34%,rgba(14,29,46,.55) 100%)}
.hero .hero-inner{position:relative;z-index:2}
.hero-motion{position:absolute;right:20px;bottom:18px;z-index:3;display:inline-flex;align-items:center;
  gap:8px;background:rgba(10,22,34,.72);border:1px solid rgba(194,165,101,.5);color:#E8E4DA;
  font-family:var(--sans);font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:8px 12px;cursor:pointer;min-height:24px}
.hero-motion:hover{background:rgba(10,22,34,.92)}
@media (prefers-reduced-motion:reduce){.hero-video{display:none}}
/* ---- site photography, Rev S. One treatment, matching the hero film, so the
   photographs read as one set and as brand rather than as licensed stock. The
   treatment is applied here and not baked into the files, so it changes in one
   place and the source files stay unmodified. ---- */
.shot-band{position:relative;overflow:hidden;background:var(--navy);line-height:0}
.shot{display:block;width:100%;height:clamp(210px,26vw,400px);object-fit:cover;
  filter:sepia(.92) contrast(1.03) saturate(.95) brightness(.94)}
.shot-band::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
  background:var(--gold)}
@media (max-width:760px){.shot{height:clamp(150px,40vw,230px)}}
.footer-base p.photo-note{color:#7E8B99}

.post-nom{font-family:var(--sans);font-size:.92rem;font-weight:700;letter-spacing:.04em;
  color:var(--gold-deep);margin:.6rem 0 0}
.section.navy .post-nom{color:var(--gold-light)}

.sub-h{font-family:var(--sans);font-size:.8rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--gold-deep);margin:2.2rem 0 .8rem}
.section.navy .sub-h{color:var(--gold-light)}

/* Rev AC. The team portrait moves out of a float in the prose column and into
   the left rail under the name, where it has room and the text beside it is no
   longer a ribbon. Full colour, lightly desaturated so it sits with the sepia
   photography without becoming an archive print: these are the people a client
   is deciding whether to instruct, and a tinted face works against that. */
.rail-portrait{display:block;width:100%;max-width:300px;height:auto;margin:0;
  border-bottom:3px solid var(--gold);filter:saturate(.62) contrast(1.05) brightness(1.01)}
@media (max-width:1000px){.rail-portrait{max-width:240px}}
@media (max-width:620px){.rail-portrait{max-width:200px}}

/* Rev AD. A one item link list was still laid out on a two column grid, so the
   single link sat over half the column with a rule running past it. It now
   takes only the width it needs. */
.linklist:has(li:only-child){grid-template-columns:auto;justify-content:start}
.linklist li:only-child{max-width:30em}
.sec-wide:has(> .linklist){margin-top:1.6rem}

/* Rev AF. The .link treatment, a 2px gold rule under the words, is for a link
   that is the whole of its own line. Inside a sentence it reads as a stray
   bar with the full stop hanging off the end of it. */
.copy .link,.lede .link,.callout p .link,.panel p .link{
  border-bottom:0;padding-bottom:0;font-weight:600;
  text-decoration:underline;text-decoration-color:var(--gold);
  text-decoration-thickness:1.5px;text-underline-offset:3px}
.copy .link:hover,.lede .link:hover{text-decoration-color:var(--gold-deep);color:var(--gold-deep)}
p > .link:only-child{border-bottom:2px solid var(--gold);padding-bottom:2px;text-decoration:none}

/* Rev AF. A head that carries the message itself spans the grid, and its
   heading is set at full size rather than the reduced size used in the rail. */
.sec-head-wide{grid-column:1 / -1;position:static}
.sec-head-wide h2{font-size:clamp(1.8rem,3.2vw,2.6rem);max-width:none}
.sec-head-wide + .sec-wide,.sec-head-wide + .sec-copy{margin-top:2.2rem}
/* The photograph column of a person section. */
.sec-rail{grid-column:1;margin-top:2rem}
.sec-rail + .sec-copy{grid-column:2;margin-top:2rem}
@media (max-width:1000px){.sec-rail{grid-column:1}.sec-rail + .sec-copy{grid-column:1;margin-top:1.4rem}}

/* Contact details and other sets of facts inside a callout: one per line. */
.callout p.lines,.panel p.lines{line-height:1.85}

/* ---- footer tidy, Rev AG ---------------------------------------------- */
/* The services column was the narrowest of the three link columns and carried
   the longest labels, so four of the six wrapped to a ragged second line. The
   column is wider and the labels shorter. */
.footer-grid{grid-template-columns:1.45fr 1.25fr .85fr 1.15fr}
.footer-col li{margin-bottom:7px;line-height:1.5}
.footer-col ul.legal{margin-top:20px;padding-top:14px}
.brand-col p{max-width:26em}
@media (max-width:1000px){.footer-grid{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.footer-grid{grid-template-columns:1fr}}

/* The legal list is empty while the three legal pages are held back, and
   an empty list still drew its rule. :empty does not catch it because the
   element contains whitespace. */
.footer-col ul.legal:not(:has(li)){display:none}