/* ==========================================================================
   ADLINGTON PLUMBING
   Design system  ·  Business Brother  ·  v1.1

   Brand colours are two only: Slate Dark Olive and Bone.
   Tints of the olive handle hairlines and secondary type.

   TYPEFACE
   Brandon Text (HvD Fonts). Regular, Medium, Bold and Black are self-hosted
   as woff2 in /assets/fonts/.

   LICENCE NOTE: the files currently installed are HvD TRIAL versions.
   A webfont licence must be purchased from HvD Fonts before this site goes
   live. When the licensed files arrive, overwrite the four woff2 files with
   the same names and nothing else needs to change.
   ========================================================================== */

@font-face{font-family:'AP Sans';src:url('../fonts/brandon-text-regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'AP Sans';src:url('../fonts/brandon-text-medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'AP Sans';src:url('../fonts/brandon-text-bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'AP Sans';src:url('../fonts/brandon-text-black.woff2') format('woff2');font-weight:900;font-style:normal;font-display:swap}

:root{
  --slate:#2E322D;
  --bone:#FFF9F7;
  --slate-80:rgba(46,50,45,.80);
  --slate-60:rgba(46,50,45,.60);
  --slate-40:rgba(46,50,45,.40);
  --slate-20:rgba(46,50,45,.20);
  --slate-12:rgba(46,50,45,.12);
  --slate-06:rgba(46,50,45,.06);
  --bone-70:rgba(255,249,247,.70);
  --bone-45:rgba(255,249,247,.45);
  --bone-20:rgba(255,249,247,.20);
  --bone-10:rgba(255,249,247,.10);

  --pad:clamp(20px,5vw,80px);
  --gap:clamp(24px,3vw,48px);
  --sec:clamp(72px,10vw,160px);

  --ease:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.65,0,.35,1);

  --nav-h:126px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:'AP Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-weight:400;
  background:var(--bone);
  color:var(--slate);
  line-height:1.62;
  font-size:clamp(15.5px,1.02vw,16.5px);
  letter-spacing:.005em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--slate);color:var(--bone)}

/* ---------- type ---------- */
/* No single word stranded on its own line. text-wrap does most of it;
   site.js also binds the last two words with a non-breaking space as a fallback. */
h1,h2,h3,h4,.h-xxl,.h-xl,.h-lg,.h-md,.h-sm,blockquote{text-wrap:balance}
p,li,figcaption,.idx__d,.dont .lbl,.ph__label{text-wrap:pretty}

.h-xxl,.h-xl,.h-lg,.h-md,.h-sm{font-weight:400;line-height:1.02;text-transform:uppercase}
/* Black is reserved for the wordmark and the one display headline per page. */
.h-xxl{font-size:clamp(1.95rem,4.5vw,4.3rem);letter-spacing:.06em;line-height:1.14;font-weight:700}
.h-xl {font-size:clamp(1.55rem,3vw,2.6rem);letter-spacing:.045em;line-height:1.08}
.h-lg {font-size:clamp(1.2rem,2vw,1.72rem);letter-spacing:.055em;line-height:1.16}
.h-md {font-size:clamp(1rem,1.4vw,1.26rem);letter-spacing:.07em;line-height:1.26}
.h-sm {font-size:clamp(.86rem,.98vw,.95rem);letter-spacing:.12em;line-height:1.4}

.eyebrow{font-size:.66rem;letter-spacing:.34em;text-transform:uppercase;color:var(--slate-60)}
.on-slate .eyebrow{color:var(--bone-45)}

.lead{font-size:clamp(1rem,1.3vw,1.2rem);line-height:1.5;max-width:34ch}
.muted{color:var(--slate-60)}
.on-slate .muted{color:var(--bone-45)}
.label{font-size:.66rem;letter-spacing:.26em;text-transform:uppercase;color:var(--slate-60)}
.on-slate .label{color:var(--bone-45)}
.num{font-variant-numeric:tabular-nums;letter-spacing:.02em}

/* ---------- layout ---------- */
.wrap{width:100%;padding-inline:var(--pad);margin-inline:auto;max-width:1680px}
.section{padding-block:var(--sec)}
.on-slate{background:var(--slate);color:var(--bone)}
.on-bone{background:var(--bone);color:var(--slate)}
.hr{height:1px;background:var(--slate-12);border:0}
.on-slate .hr{background:var(--bone-10)}
.grid{display:grid;gap:var(--gap)}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}
.g-12{grid-template-columns:repeat(12,1fr)}
@media(max-width:900px){
  .g-2,.g-3,.g-4{grid-template-columns:1fr}
  .g-12{grid-template-columns:repeat(6,1fr)}
}

/* ---------- scroll progress ---------- */
.progress{position:fixed;top:0;left:0;height:2px;width:100%;transform-origin:0 50%;
  transform:scaleX(0);background:var(--slate);z-index:200;pointer-events:none;mix-blend-mode:difference}

/* ---------- nav ---------- */
.nav{
  color:var(--bone);
  position:fixed;top:0;left:0;right:0;z-index:150;height:var(--nav-h);
  display:flex;align-items:center;justify-content:space-between;
  padding-inline:var(--pad);
  transition:background .45s var(--ease),border-color .45s var(--ease),height .45s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.is-solid{background:rgba(46,50,45,.94);backdrop-filter:blur(14px);border-bottom-color:var(--bone-10);height:96px}
.nav.is-solid .nav__brand img{height:64px}
.nav.on-bone-page{color:var(--slate)}
.nav.on-bone-page.is-solid{background:rgba(255,249,247,.94);border-bottom-color:var(--slate-12);color:var(--slate)}
.nav__brand{display:flex;align-items:center;gap:14px;z-index:2}
.nav__brand img{height:88px;width:auto;transition:transform .5s var(--ease)}
.nav__brand:hover img{transform:translateY(-2px)}
.nav__links{display:flex;align-items:center;gap:clamp(18px,2vw,34px)}
.nav__links a{
  font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  position:relative;padding-block:6px;white-space:nowrap;
}
.nav__links a::after{
  content:'';position:absolute;left:0;bottom:0;width:100%;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:100% 50%;transition:transform .5s var(--ease);
}
.nav__links a:hover::after,.nav__links a[aria-current]::after{transform:scaleX(1);transform-origin:0 50%}
.nav__cta{display:flex;align-items:center;gap:16px}
.nav__burger{display:none;width:44px;height:44px;position:relative;z-index:2}
.nav__burger i{position:absolute;left:11px;width:22px;height:1.5px;background:currentColor;transition:transform .45s var(--ease),opacity .3s}
.nav__burger i:nth-child(1){top:19px}
.nav__burger i:nth-child(2){top:25px}
.is-open .nav__burger i:nth-child(1){transform:translateY(3px) rotate(45deg)}
.is-open .nav__burger i:nth-child(2){transform:translateY(-3px) rotate(-45deg)}
@media(max-width:1100px){
  .nav__links,.nav__cta .btn{display:none}
  .nav__burger{display:block}
}
@media(max-width:900px){
  :root{--nav-h:104px}
  .nav__brand img{height:72px}
  .nav.is-solid .nav__brand img{height:56px}
}
@media(max-width:640px){
  :root{--nav-h:92px}
  .nav__brand img{height:60px}
  .nav.is-solid .nav__brand img{height:50px}
}

/* mobile drawer */
.drawer{
  position:fixed;inset:0;background:var(--slate);color:var(--bone);z-index:140;
  padding:calc(var(--nav-h) + 40px) var(--pad) 40px;
  display:flex;flex-direction:column;justify-content:space-between;
  clip-path:inset(0 0 100% 0);transition:clip-path .8s var(--ease);
  overflow-y:auto;
}
.is-open .drawer{clip-path:inset(0 0 0 0)}
.drawer a.dl{
  display:block;font-size:clamp(1.08rem,3.3vw,1.55rem);text-transform:uppercase;letter-spacing:.04em;
  padding-block:.28em;border-bottom:1px solid var(--bone-10);
  opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease),transform .6s var(--ease);
}
.is-open .drawer a.dl{opacity:1;transform:none}
.drawer__foot{display:flex;flex-wrap:wrap;gap:18px 34px;padding-top:34px}

/* ---------- buttons ---------- */
.btn{
  --bg:var(--slate);--fg:var(--bone);
  position:relative;display:inline-flex;align-items:center;gap:.85em;
  padding:1.05em 1.9em;font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--fg);overflow:hidden;isolation:isolate;border:1px solid var(--bg);
  background:var(--bg);white-space:nowrap;
}
.btn::before{
  content:'';position:absolute;inset:0;background:var(--fg);z-index:-1;
  transform:translateY(101%);transition:transform .55s var(--ease);
}
.btn:hover::before{transform:translateY(0)}
.btn:hover{color:var(--bg)}
.btn--ghost{--bg:transparent;--fg:currentColor;border-color:currentColor}
.btn--ghost::before{background:currentColor;opacity:.15}
.btn--ghost:hover{color:inherit}
.btn--bone{--bg:var(--bone);--fg:var(--slate)}
.btn--bone::before{background:var(--slate)}
.btn--bone:hover{color:var(--bone)}
.btn .arrow{transition:transform .5s var(--ease)}
.btn:hover .arrow{transform:translateX(4px)}

.link-u{
  display:inline-flex;align-items:center;gap:.6em;font-size:.72rem;letter-spacing:.2em;
  text-transform:uppercase;position:relative;padding-bottom:6px;
}
.link-u::after{content:'';position:absolute;left:0;bottom:0;height:1px;width:100%;background:currentColor;
  transform:scaleX(1);transform-origin:100% 50%;transition:transform .5s var(--ease)}
.link-u:hover::after{transform:scaleX(0)}
.link-u .arrow{transition:transform .5s var(--ease)}
.link-u:hover .arrow{transform:translateX(5px)}

/* ---------- reveal ---------- */
[data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
[data-reveal].in{opacity:1;transform:none}
[data-reveal-line]{overflow:hidden;display:block}
[data-reveal-line]>span{display:block;transform:translateY(105%);transition:transform 1s var(--ease)}
[data-reveal-line].in>span{transform:none}
/* A split headline is built by JS. Until it is, the raw text sits there in the
   fallback face at display size, wraps to more lines than the real face will,
   then jumps when Brandon Text swaps in. Hold it until the words exist. */
html.js [data-split]:not([data-done]){visibility:hidden}
.word{display:inline-block;overflow:hidden;vertical-align:top}
.word>i{display:inline-block;font-style:normal;transform:translateY(105%);
  transition:transform 1.05s var(--ease)}
.in .word>i,.word.in>i{transform:none}

/* ---------- hero ---------- */
.hero{
  /* .hero carries the on-slate class in markup for token inheritance */
  position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;
  background:var(--slate);color:var(--bone);overflow:hidden;
  padding-top:calc(var(--nav-h) + 40px);
}
/* Photo bed. Sits under the water canvas and under the content. The overlay is
   deliberately heavy: the picture is texture and depth, not the subject. */
.hero__media,.phead__media{position:absolute;inset:0;overflow:hidden;z-index:0}
.hero__media img,.phead__media img{
  width:100%;height:100%;object-fit:cover;object-position:50% 45%;
  filter:grayscale(.34) contrast(1.05) brightness(.74);
  transform:scale(1.04);
}
.hero__media::after,.phead__media::after{
  content:'';position:absolute;inset:0;
  background:
    linear-gradient(96deg,rgba(46,50,45,.88) 0%,rgba(46,50,45,.80) 44%,rgba(46,50,45,.52) 100%),
    linear-gradient(to top,rgba(46,50,45,.90) 0%,rgba(46,50,45,0) 46%);
}

/* The home header is the one shot we want people to actually look at, so it
   carries the lightest treatment on the site. Enough tint to hold the type. */
.hero__media img{filter:grayscale(.26) contrast(1.04) brightness(.8)}
.hero__media::after{
  background:
    linear-gradient(96deg,rgba(46,50,45,.84) 0%,rgba(46,50,45,.72) 44%,rgba(46,50,45,.42) 100%),
    linear-gradient(to top,rgba(46,50,45,.88) 0%,rgba(46,50,45,0) 46%);
}
.hero__inner,.hero .marquee,.phead .wrap{position:relative;z-index:2}

#water{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 18%,#000 82%,transparent);
  mask-image:linear-gradient(to bottom,transparent,#000 18%,#000 82%,transparent)}
@media(prefers-reduced-motion:reduce){#water{display:none}}
.hero__inner{position:relative;z-index:2;padding-inline:var(--pad);padding-bottom:clamp(28px,4vw,54px);width:100%}
.hero__top{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;flex-wrap:wrap;
  margin-bottom:clamp(26px,4vw,50px)}
.hero__top>div:first-child{flex:1 1 auto;min-width:0}

/* What we specialise in is the headline. The rest of the trade is the footnote. */
.hero__h1{max-width:none;font-size:clamp(1.5rem,4.5vw,4.3rem)}
.hero__h1>span{display:block}
.hero__h1b .word>i{transition-delay:.28s!important}
.hero__h1sub{
  font-size:.36em;font-weight:400;letter-spacing:.06em;
  color:var(--bone-70);margin-top:.6em;max-width:none;
}

.hero__meta{display:flex;gap:clamp(24px,4vw,56px);flex-wrap:wrap;align-items:center}
.hero__meta>div{max-width:40ch}
.hero__meta>.row{max-width:none}
.hero__scroll{display:flex;align-items:center;gap:12px;font-size:.62rem;letter-spacing:.3em;
  text-transform:uppercase;color:var(--bone-45)}
.hero__scroll span{display:none}

/* marquee */
.marquee{
  border-block:1px solid var(--bone-10);overflow:hidden;position:relative;
  display:flex;white-space:nowrap;padding-block:14px;
}
.on-bone .marquee{border-color:var(--slate-12)}
.marquee__track{display:flex;gap:0;animation:slide 38s linear infinite;flex:none;will-change:transform}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__track span{
  padding-inline:clamp(26px,3.4vw,56px);font-size:.68rem;letter-spacing:.28em;text-transform:uppercase;
  display:inline-flex;align-items:center;color:var(--bone-45)
}
.on-bone .marquee__track span{color:var(--slate-60)}

@keyframes slide{to{transform:translateX(-50%)}}
.marquee--big{padding-block:clamp(16px,2vw,26px)}
.marquee--big .marquee__track span{font-size:clamp(1.05rem,2.2vw,1.85rem);letter-spacing:.03em;
  text-transform:uppercase;color:inherit;padding-inline:clamp(26px,3.6vw,64px)}


/* ---------- service index ---------- */
.idx{border-top:1px solid var(--slate-12)}
.on-slate .idx{border-color:var(--bone-10)}
.idx__row{
  position:relative;display:grid;
  grid-template-columns:4.5rem minmax(0,1fr) minmax(0,30ch) 2.5rem;
  gap:clamp(16px,2.6vw,40px);align-items:center;
  padding:clamp(20px,2.5vw,30px) clamp(14px,1.6vw,24px);
  margin-inline:calc(clamp(14px,1.6vw,24px) * -1);
  border-bottom:1px solid var(--slate-12);
  transition:background .4s var(--ease);
}
.on-slate .idx__row{border-color:var(--bone-10)}
.idx__row:hover{background:var(--slate-06)}
.on-slate .idx__row:hover{background:rgba(255,249,247,.045)}
.idx__n{font-size:.66rem;letter-spacing:.2em;color:var(--slate-40);font-variant-numeric:tabular-nums}
.on-slate .idx__n{color:var(--bone-45)}
.idx__t{
  font-size:clamp(1.02rem,1.8vw,1.5rem);text-transform:uppercase;letter-spacing:.045em;
  line-height:1.1;transition:transform .55s var(--ease);
}
.idx__row:hover .idx__t{transform:translateX(10px)}
.idx__d{font-size:.82rem;line-height:1.55;color:var(--slate-60);text-align:left}
.on-slate .idx__d{color:var(--bone-45)}
.idx__go{
  justify-self:end;width:2.5rem;height:2.5rem;position:relative;flex:none;
  border:1px solid var(--slate-20);
  display:flex;align-items:center;justify-content:center;font-size:.8rem;
  transition:background .45s var(--ease),color .45s var(--ease),border-color .45s var(--ease);
}
.on-slate .idx__go{border-color:var(--bone-20)}
.idx__row:hover .idx__go{background:var(--slate);color:var(--bone);border-color:var(--slate)}
.on-slate .idx__row:hover .idx__go{background:var(--bone);color:var(--slate);border-color:var(--bone)}
@media(max-width:1000px){
  .idx__row{grid-template-columns:3.5rem minmax(0,1fr) 2.5rem}
  .idx__d{display:none}
}
@media(max-width:560px){
  .idx__row{grid-template-columns:2.8rem minmax(0,1fr)}
  .idx__go{display:none}
}

/* ---------- media placeholder ---------- */
.ph{
  position:relative;overflow:hidden;background:var(--slate-06);
  border:1px solid var(--slate-12);display:flex;align-items:center;justify-content:center;
}
.on-slate .ph{background:var(--bone-10);border-color:var(--bone-10)}
.ph::after{
  content:'';position:absolute;inset:0;
  background:repeating-linear-gradient(135deg,transparent 0 14px,var(--slate-06) 14px 15px);
  pointer-events:none;
}
.on-slate .ph::after{background:repeating-linear-gradient(135deg,transparent 0 14px,var(--bone-10) 14px 15px)}
.ph__label{
  position:relative;z-index:1;font-size:.6rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--slate-40);text-align:center;padding:1em;
}
.on-slate .ph__label{color:var(--bone-45)}
.ph--4x5{aspect-ratio:4/5}
.ph--3x2{aspect-ratio:3/2}
.ph--1x1{aspect-ratio:1}
.ph--16x9{aspect-ratio:16/9}
.ph--tall{aspect-ratio:3/4}
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2}
.ph:has(img){background:var(--slate);border-color:transparent}
.ph:has(img)::after{display:none}

.parallax{will-change:transform}

/* The closing block eases from cream into the olive.
   Three things keep it from looking like a CSS gradient: the ramp is
   smootherstepped so no part of it has an edge; it curves through a warm taupe
   rather than neutral grey, so it reads as the cream being shaded rather than
   mixed with black; and a fine grain sits over it, which kills the banding
   flat gradients show on wide screens.
   The negative margin pulls the block up into the empty bottom padding of the
   section above, so the ramp stays long without adding dead space. */
.cta-close{
  position:relative;
  margin-top:0;
  background:linear-gradient(to bottom,
    #FFF9F7 0px,
    #FFF9F7 11px,
    #FEF8F6 23px,
    #FDF7F5 34px,
    #FBF5F2 46px,
    #F7F1EE 58px,
    #F2ECE9 69px,
    #EBE6E2 81px,
    #E3DEDA 92px,
    #DAD5D1 104px,
    #D0CBC6 116px,
    #C5C0BB 127px,
    #B8B4AE 139px,
    #ABA7A1 150px,
    #9E9A94 161px,
    #908D86 173px,
    #827F78 184px,
    #75726B 196px,
    #67655E 208px,
    #5A5953 219px,
    #4E4E48 231px,
    #44453F 242px,
    #3B3D37 254px,
    #343732 266px,
    #30342F 277px,
    #2E322D 289px,
    #2E322D 300px,
    var(--slate) 300px);
  padding-top:clamp(150px,16vw,200px);
  padding-bottom:clamp(50px,5vw,86px);
  text-align:center;
}

/* Trim the air above the closing panel. Done on the section above rather than
   with a negative margin, so the gradient can never sit over its content. */
section:has(+ .cta-close),
div:has(+ .cta-close){padding-bottom:clamp(36px,3.6vw,56px)}

.cta-close::before{
  content:'';position:absolute;left:0;right:0;top:0;height:370px;
  background:url('../img/grain.png');
  background-size:96px 96px;
  opacity:.05;mix-blend-mode:overlay;pointer-events:none;
}
.cta-close .wrap{position:relative;z-index:1}
.cta-close .eyebrow{color:var(--bone-70)}
@media(max-width:1000px){
  
}
@media(max-width:700px){
  .cta-close{padding-top:clamp(120px,20vw,170px)}
}

/* ---------- map ---------- */
.map{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--slate-06);
  border:1px solid var(--slate-12)}
.map--3x2{aspect-ratio:3/2}
.map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;
  filter:grayscale(1) contrast(.92) brightness(1.02)}

/* ---------- stats ---------- */
.stat{border-top:1px solid var(--bone-10);padding-top:22px}
.on-bone .stat{border-color:var(--slate-12)}
.stat b{display:block;font-weight:400;font-size:clamp(1.6rem,2.9vw,2.4rem);line-height:1;letter-spacing:.01em}
.stat p{margin-top:12px;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--bone-45)}
.on-bone .stat p{color:var(--slate-60)}

/* ---------- cards ---------- */
.card{
  position:relative;border:1px solid var(--slate-12);padding:clamp(24px,2.6vw,40px);
  display:flex;flex-direction:column;gap:16px;overflow:hidden;isolation:isolate;
  transition:border-color .5s var(--ease),transform .6s var(--ease);
}
.on-slate .card{border-color:var(--bone-10)}
.card::before{content:'';position:absolute;inset:0;background:var(--slate);z-index:-1;
  transform:translateY(101%);transition:transform .6s var(--ease)}
.on-slate .card::before{background:var(--bone)}
.card:hover{transform:translateY(-4px)}
.card:hover::before{transform:translateY(0)}
.card:hover,.card:hover .muted,.card:hover .label{color:var(--bone)}
.on-slate .card:hover,.on-slate .card:hover .muted,.on-slate .card:hover .label{color:var(--slate)}
.card__n{font-size:.66rem;letter-spacing:.24em;color:var(--slate-40)}
.on-slate .card__n{color:var(--bone-45)}

/* article cards */
.post{display:flex;flex-direction:column;gap:18px;group:post}
.post .ph{transition:transform .8s var(--ease)}
.post:hover .ph{transform:scale(.985)}
.post .ph img,.post .ph::after{transition:transform 1s var(--ease)}
.post:hover .ph img{transform:scale(1.06)}
.post h3{font-size:clamp(.92rem,1.1vw,1.04rem);text-transform:uppercase;letter-spacing:.05em;
  font-weight:400;line-height:1.2}
.post__meta{display:flex;gap:14px;align-items:center;font-size:.62rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--slate-40)}
.on-slate .post__meta{color:var(--bone-45)}

/* ---------- accordion ---------- */
.acc{border-top:1px solid var(--slate-12)}
.acc__item{border-bottom:1px solid var(--slate-12)}
.on-slate .acc,.on-slate .acc__item{border-color:var(--bone-10)}
.acc__q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:24px;
  padding-block:clamp(18px,2.1vw,26px);text-align:left;
  font-size:clamp(.9rem,1.15vw,1.02rem);text-transform:uppercase;letter-spacing:.05em;line-height:1.25}
.acc__ic{flex:none;width:16px;height:16px;position:relative}
.acc__ic::before,.acc__ic::after{content:'';position:absolute;background:currentColor;
  transition:transform .5s var(--ease)}
.acc__ic::before{top:50%;left:0;width:16px;height:1px;margin-top:-.5px}
.acc__ic::after{left:50%;top:0;height:16px;width:1px;margin-left:-.5px}
.acc__item.open .acc__ic::after{transform:scaleY(0)}
.acc__a{max-height:0;overflow:hidden;transition:max-height .6s var(--ease)}
.acc__a p{padding-bottom:clamp(20px,2.4vw,30px);max-width:70ch;color:var(--slate-60)}
.on-slate .acc__a p{color:var(--bone-45)}

/* ---------- process ---------- */
.step{position:relative;padding-top:26px;border-top:1px solid var(--bone-10)}
.on-bone .step{border-color:var(--slate-12)}
.step__n{font-size:.66rem;letter-spacing:.26em;color:var(--bone-45);margin-bottom:18px;display:block}
.on-bone .step__n{color:var(--slate-40)}
.step h3{font-size:clamp(.92rem,1.12vw,1.04rem);text-transform:uppercase;letter-spacing:.05em;
  font-weight:400;margin-bottom:12px;line-height:1.2}

/* ---------- quote ---------- */
.quote blockquote{max-width:22ch}
.quote blockquote{font-size:clamp(1.02rem,1.75vw,1.5rem);line-height:1.36;letter-spacing:.01em;
  text-transform:uppercase;font-weight:400}
.quote figcaption{margin-top:26px;font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--bone-45)}
.on-bone .quote figcaption{color:var(--slate-60)}

/* ---------- forms ---------- */
.field{position:relative;border-bottom:1px solid var(--slate-20);padding-top:22px}
.on-slate .field{border-color:var(--bone-20)}
.field input,.field textarea,.field select{
  width:100%;background:none;border:0;outline:0;font:inherit;color:inherit;
  padding-block:10px 14px;font-size:.95rem;
}
.field textarea{resize:vertical;min-height:110px}
.field label{position:absolute;top:22px;left:0;font-size:.66rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--slate-40);pointer-events:none;transition:all .4s var(--ease)}
.on-slate .field label{color:var(--bone-45)}
.field input:focus~label,.field textarea:focus~label,
.field input:not(:placeholder-shown)~label,.field textarea:not(:placeholder-shown)~label{
  top:4px;font-size:.58rem;opacity:.7}
.field select~label{top:4px;font-size:.58rem;opacity:.7}
.field::after{content:'';position:absolute;left:0;bottom:-1px;height:1px;width:100%;background:currentColor;
  transform:scaleX(0);transform-origin:0 50%;transition:transform .55s var(--ease)}
.field:focus-within::after{transform:scaleX(1)}
.field select{appearance:none;cursor:pointer}
.field--sel::before{content:'';position:absolute;right:2px;top:38px;width:7px;height:7px;
  border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:rotate(45deg);opacity:.5}

/* the page's single display headline matches the ADLINGTON wordmark weight */
.phead h1{font-weight:700;letter-spacing:.06em;line-height:1.16;max-width:26ch}
.phead .rich h1,.phead h1.long{max-width:32ch}

/* ---------- page head (inner pages) ---------- */
.phead{background:var(--slate);color:var(--bone);padding-top:calc(var(--nav-h) + clamp(60px,9vw,140px));
  padding-bottom:clamp(50px,7vw,110px);position:relative;overflow:hidden}
.phead__media::after{background:
    linear-gradient(96deg,rgba(46,50,45,.97) 0%,rgba(46,50,45,.93) 40%,rgba(46,50,45,.80) 100%),
    linear-gradient(to top,rgba(46,50,45,.99) 0%,rgba(46,50,45,0) 55%)}
.phead .wrap{position:relative;z-index:2}
.crumb{display:flex;gap:12px;align-items:center;font-size:.62rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--bone-45);margin-bottom:clamp(26px,4vw,50px)}

/* ---------- footer ---------- */
.foot{background:var(--slate);color:var(--bone);padding-top:clamp(48px,4.5vw,78px)}
.foot__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:var(--gap)}
@media(max-width:980px){.foot__grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.foot__grid{grid-template-columns:1fr}}
.foot h4{font-size:.64rem;letter-spacing:.26em;text-transform:uppercase;color:var(--bone-45);
  font-weight:400;margin-bottom:22px}
.foot ul{list-style:none;display:flex;flex-direction:column;gap:11px}
.foot ul a{font-size:.86rem;position:relative;display:inline-block}
.foot ul a::after{content:'';position:absolute;left:0;bottom:-2px;width:100%;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:0 50%;transition:transform .5s var(--ease)}
.foot ul a:hover::after{transform:scaleX(1)}
.foot__mark{height:clamp(96px,9vw,150px);width:auto;margin-bottom:30px}
.foot__base{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  border-top:1px solid var(--bone-10);margin-top:clamp(50px,6vw,90px);padding-block:26px;
  font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;color:var(--bone-45)}

/* emergency bar */
.ebar{background:var(--bone);color:var(--slate);padding-block:14px}
.ebar .wrap{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.ebar p{font-size:.68rem;letter-spacing:.22em;text-transform:uppercase}
.ebar .dot{display:inline-block;width:6px;height:6px;background:var(--slate);
  margin-right:12px;vertical-align:middle;animation:pulse 2.4s var(--ease-io) infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.25;transform:scale(.8)}}

/* sticky mobile call */
.callbar{
  position:fixed;left:0;right:0;bottom:0;z-index:130;display:none;
  background:var(--slate);color:var(--bone);
  border-top:1px solid var(--bone-10);
}
.callbar a{flex:1;text-align:center;padding:16px 8px;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase}
.callbar a+a{border-left:1px solid var(--bone-10)}
@media(max-width:760px){.callbar{display:flex}body{padding-bottom:53px}}

/* ---------- utility ---------- */
.stack-sm{display:flex;flex-direction:column;gap:14px}
.stack{display:flex;flex-direction:column;gap:26px}
.stack-lg{display:flex;flex-direction:column;gap:clamp(30px,4vw,56px)}
.row{display:flex;gap:18px;flex-wrap:wrap;align-items:center}
.mt-a{margin-top:auto}
.tight{max-width:62ch}
.rich p+p{margin-top:1.15em}
.rich h2{font-size:clamp(1.08rem,1.55vw,1.32rem);text-transform:uppercase;letter-spacing:.05em;
  font-weight:400;margin-top:2.2em;margin-bottom:.7em;line-height:1.15}
.rich h3{font-size:clamp(.94rem,1.15vw,1.04rem);text-transform:uppercase;letter-spacing:.06em;
  font-weight:400;margin-top:1.9em;margin-bottom:.6em}
.rich ul{margin:1.1em 0;padding-left:0;list-style:none}
.rich li{position:relative;padding-left:26px;margin-bottom:.6em}
.rich li::before{content:'';position:absolute;left:0;top:.72em;width:12px;height:1px;background:var(--slate-40)}
.rich blockquote{border-left:1px solid var(--slate-20);padding-left:26px;margin:2em 0;
  font-size:1.15em;line-height:1.4}

.tick{display:flex;gap:14px;align-items:flex-start}
.tick::before{content:'';flex:none;width:13px;height:7px;border-left:1px solid currentColor;
  border-bottom:1px solid currentColor;transform:rotate(-45deg);margin-top:8px;opacity:.55}

/* ---------- reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  [data-reveal],[data-reveal-line]>span,.word>i{opacity:1!important;transform:none!important}
  #grid-canvas{display:none}
}

/* ---------- filter chips ---------- */
.chips{display:flex;gap:10px;flex-wrap:wrap}
.chip{
  padding:.8em 1.5em;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;
  border:1px solid var(--slate-20);transition:background .45s var(--ease),color .45s var(--ease),border-color .45s var(--ease);
}
.chip:hover{border-color:var(--slate)}
.chip.is-on{background:var(--slate);color:var(--bone);border-color:var(--slate)}
.on-slate .chip{border-color:var(--bone-20)}
.on-slate .chip.is-on{background:var(--bone);color:var(--slate);border-color:var(--bone)}

/* ==========================================================================
   LOADER
   The monogram fills like a pipe under pressure, then lifts away.
   Only on the first page of a session. Skipped entirely for reduced motion.
   ========================================================================== */
.loader{
  position:fixed;inset:0;z-index:999;
  background:var(--slate);
  display:flex;align-items:center;justify-content:center;
  transition:opacity .7s var(--ease),visibility .7s;
}
.loader__mark{position:relative;width:clamp(76px,9vw,116px);line-height:0}
.loader__mark img{display:block;width:100%;height:auto}
.loader__mark img.g{opacity:.18}
.loader__mark .f{
  position:absolute;inset:0;
  clip-path:inset(100% 0 0 0);
  transition:clip-path 1.15s cubic-bezier(.5,0,.2,1);
}
.loader__line{
  position:absolute;left:-14%;right:-14%;top:100%;height:1px;
  background:var(--bone);opacity:.5;
  transition:top 1.15s cubic-bezier(.5,0,.2,1),opacity .5s ease;
}
.loader__word{
  position:absolute;left:50%;top:calc(100% + 26px);transform:translateX(-50%);
  font-size:.6rem;letter-spacing:.34em;text-transform:uppercase;
  color:var(--bone-45);white-space:nowrap;
  opacity:0;transition:opacity .6s ease .25s;
}
html.is-loading .loader__word{opacity:1}
html.is-loading{overflow:hidden}
.loader.is-fill .f{clip-path:inset(0 0 0 0)}
.loader.is-fill .loader__line{top:0}
.loader.is-done{opacity:0;visibility:hidden}
.loader.is-done .loader__line{opacity:0}
.loader.is-done .loader__mark{transform:scale(1.06);transition:transform .8s var(--ease)}

/* ==========================================================================
   AUDIENCE STRIP
   Who the work is for, said once, immediately under the hero.
   ========================================================================== */
.aud{background:var(--bone);color:var(--slate);padding-block:18px;overflow:hidden}
.aud .wrap{display:flex;justify-content:center;align-items:center;
  gap:clamp(18px,3.4vw,54px);flex-wrap:wrap;text-align:center}
.aud span{font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--slate-60);white-space:nowrap;transition:color .4s var(--ease)}
.aud span:hover{color:var(--slate)}
@media(max-width:640px){.aud span{font-size:.56rem;letter-spacing:.22em}
  .aud .wrap{gap:12px 20px}}

/* ==========================================================================
   FEATURE BANNER
   One service pulled out of the list and given the whole width.
   ========================================================================== */
.feat{position:relative;overflow:hidden;background:var(--slate);color:var(--bone)}
.feat__media{position:absolute;inset:0;z-index:0}
.feat__media img{width:100%;height:100%;object-fit:cover;object-position:50% 45%;
  filter:grayscale(.62) contrast(1.05) brightness(.5);transform:scale(1.04)}
.feat__media::after{content:'';position:absolute;inset:0;background:
  linear-gradient(92deg,rgba(46,50,45,.96) 0%,rgba(46,50,45,.88) 46%,rgba(46,50,45,.66) 100%)}
.feat .wrap{position:relative;z-index:2;
  padding-block:clamp(66px,9vw,132px);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,25rem);
  gap:clamp(28px,4vw,72px);align-items:end}
.feat h2{font-weight:400;text-transform:uppercase;
  font-size:clamp(1.5rem,3.2vw,3rem);letter-spacing:.05em;line-height:1.08;
  max-width:none;margin-top:.4em}
.feat h2>span{display:block;white-space:nowrap}
.feat h2 .l2{color:var(--bone-45)}
.feat__aside{padding-bottom:6px}
.feat__aside p{max-width:34ch}
@media(max-width:900px){
  .feat .wrap{grid-template-columns:1fr;align-items:start;gap:clamp(22px,4vw,34px)}
  .feat__aside{padding-bottom:0}
}

/* the everyday work note that sits under the specialist list */
.note-line{
  display:flex;justify-content:space-between;align-items:baseline;
  gap:clamp(16px,3vw,44px);flex-wrap:wrap;
  margin-top:clamp(30px,3.6vw,52px);padding-top:clamp(24px,3vw,38px);
  border-top:1px solid var(--bone-10);
}
.note-line p{max-width:52ch}
.on-bone .note-line{border-top-color:var(--slate-12)}

/* Agency byline. Sits in the legal row, not below it, and reads a step
   brighter than the licence line so it is actually legible. */
.foot__made{color:var(--bone-70)}
.foot__made a{color:var(--bone);border-bottom:1px solid var(--bone-20);padding-bottom:2px;
  transition:border-color .3s var(--ease)}
.foot__made a:hover{border-bottom-color:var(--bone)}