/* =========================================================
   ABPropertyUK - Commercial Property Consultancy
   ========================================================= */

:root{
  --ink:#111213;
  --ink-2:#3d4044;
  --ink-3:#7a7f86;
  --line:#e2e3e5;
  --paper:#fbfbfb;
  --paper-2:#f2f2f3;
  --grey-panel:#d6d7d9;
  --red:#e2231a;
  --red-dark:#c11c14;

  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;
  --serif:'Instrument Serif',Georgia,'Times New Roman',serif;

  --gut:clamp(20px,5vw,80px);
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  font-weight:400;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
body.is-locked{overflow:hidden;}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,h4{margin:0;font-weight:400;letter-spacing:-.03em;line-height:1.02;}
p{margin:0 0 1em;}
ul,ol,dl{margin:0;padding:0;list-style:none;}
::selection{background:var(--red);color:#fff;}

/* ---------- shared bits ---------- */
.link-underline{
  display:inline-flex;align-items:center;gap:.5em;font-size:13px;letter-spacing:.02em;
  padding-bottom:3px;position:relative;color:var(--ink);
}
.link-underline__arrow{
  width:1.1em;height:.7em;flex:none;overflow:visible;
  fill:none;stroke:currentColor;stroke-width:1.2;
  stroke-linecap:round;stroke-linejoin:round;
  transition:transform .5s var(--ease);
}
.link-underline:hover .link-underline__arrow{transform:translateX(4px);}
.link-underline::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:var(--ink);transform-origin:right;transition:transform .5s var(--ease);
}
.link-underline:hover::after{transform:scaleX(0);transform-origin:left;}

/* =========================================================
   SCROLL PROGRESS
   ========================================================= */
.scroll-progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:120;pointer-events:none;}
.scroll-progress span{display:block;height:100%;width:0;background:var(--red);}

/* =========================================================
   HEADER
   ========================================================= */
.header{
  position:fixed;top:0;left:0;right:0;z-index:110;
  display:flex;align-items:center;justify-content:space-between;
  height:84px;padding:0 0 0 var(--gut);
  background:rgba(251,251,251,0);
  border-bottom:1px solid transparent;
  transition:background .45s var(--ease),border-color .45s var(--ease);
}
.header.is-solid{background:rgba(251,251,251,.88);backdrop-filter:blur(14px);border-bottom-color:var(--line);}

/* Only the home page has a hero photo behind the transparent bar, so the
   white treatment is scoped to it. Interior pages (body.page) keep the
   dark type on their light ground at all times. */
body:not(.page) .header:not(.is-solid) .brand__logo{display:none;}
body:not(.page) .header:not(.is-solid) .brand__logo--light{display:block;}
body:not(.page) .header:not(.is-solid) .nav__list>li>a,
body:not(.page) .header:not(.is-solid) .nav__drop-btn{color:rgba(255,255,255,.82);}
body:not(.page) .header:not(.is-solid) .nav__list>li>a:hover,
body:not(.page) .header:not(.is-solid) .nav__drop-btn:hover{color:#fff;}
body:not(.page) .header:not(.is-solid) .header__cta{color:#fff;border-color:rgba(255,255,255,.5);}
body:not(.page) .header:not(.is-solid) .burger span{background:#fff;}

.brand{display:flex;align-items:center;}
/* Two stacked prints of the wordmark: the full-colour one is the default and
   the all-white one is swapped in wherever the brand sits on a dark ground
   (the transparent home header, the footer). */
.brand__logo{display:block;width:auto;height:60px;transition:opacity .4s;}
.brand__logo--light{display:none;}
.brand:hover .brand__logo{opacity:.78;}

.nav__list{display:flex;align-items:center;gap:34px;}
.nav__list a,.nav__drop-btn{
  font-size:13.5px;color:var(--ink-2);position:relative;padding:6px 0;
  background:none;border:0;font-family:inherit;cursor:pointer;
  display:inline-flex;align-items:center;gap:6px;transition:color .35s;
}
.nav__list a:hover,.nav__drop-btn:hover{color:var(--ink);}
.nav__list > li > a::after,.nav__drop-btn::after{
  content:"";position:absolute;left:0;bottom:2px;height:1px;width:100%;
  background:var(--red);transform:scaleX(0);transform-origin:left;
  transition:transform .45s var(--ease);
}
.nav__list > li > a:hover::after,.nav__drop-btn:hover::after{transform:scaleX(1);}
.chev{width:10px;height:7px;fill:none;stroke:currentColor;stroke-width:1.5;transition:transform .35s;}
.has-drop{position:relative;}
.has-drop.is-open .chev{transform:rotate(180deg);}
.nav__drop{
  position:absolute;top:calc(100% + 14px);left:-22px;min-width:250px;
  background:#fff;border:1px solid var(--line);padding:10px;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .35s var(--ease),transform .35s var(--ease),visibility .35s;
  box-shadow:0 20px 50px -25px rgba(0,0,0,.22);
}
.has-drop.is-open .nav__drop{opacity:1;visibility:visible;transform:translateY(0);}
.nav__drop a{display:flex;gap:12px;padding:11px 14px;font-size:13.5px;color:var(--ink-2);
  transition:background .3s,padding .35s,color .3s;}
.nav__drop a span{color:var(--red);font-size:10px;letter-spacing:.1em;padding-top:3px;}
.nav__drop a:hover{background:var(--paper-2);padding-left:20px;color:var(--ink);}

.header__right{display:flex;align-items:center;align-self:stretch;}
.header__cta{color:#fff;border-color:rgba(255,255,255,.5);}
body:not(.page) .header:not(.is-solid) .burger span{background:#fff;}


.nav__list{display:flex;align-items:center;gap:34px;}
.nav__list a,.nav__drop-btn{
  font-size:13.5px;color:var(--ink-2);position:relative;padding:6px 0;
  background:none;border:0;font-family:inherit;cursor:pointer;
  display:inline-flex;align-items:center;gap:6px;transition:color .35s;
}
.nav__list a:hover,.nav__drop-btn:hover{color:var(--ink);}
.nav__list > li > a::after,.nav__drop-btn::after{
  content:"";position:absolute;left:0;bottom:2px;height:1px;width:100%;
  background:var(--red);transform:scaleX(0);transform-origin:left;
  transition:transform .45s var(--ease);
}
.nav__list > li > a:hover::after,.nav__drop-btn:hover::after{transform:scaleX(1);}
.chev{width:10px;height:7px;fill:none;stroke:currentColor;stroke-width:1.5;transition:transform .35s;}
.has-drop{position:relative;}
.has-drop.is-open .chev{transform:rotate(180deg);}
.nav__drop{
  position:absolute;top:calc(100% + 14px);left:-22px;min-width:250px;
  background:#fff;border:1px solid var(--line);padding:10px;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .35s var(--ease),transform .35s var(--ease),visibility .35s;
  box-shadow:0 20px 50px -25px rgba(0,0,0,.22);
}
.has-drop.is-open .nav__drop{opacity:1;visibility:visible;transform:translateY(0);}
.nav__drop a{display:flex;gap:12px;padding:11px 14px;font-size:13.5px;color:var(--ink-2);
  transition:background .3s,padding .35s,color .3s;}
.nav__drop a span{color:var(--red);font-size:10px;letter-spacing:.1em;padding-top:3px;}
.nav__drop a:hover{background:var(--paper-2);padding-left:20px;color:var(--ink);}

.header__right{display:flex;align-items:center;align-self:stretch;}
.header__cta{
  display:grid;place-items:center;padding:0 32px;align-self:stretch;
  background:var(--ink);color:#fff;font-size:12.5px;letter-spacing:.08em;
  transition:background .4s var(--ease);
}
.header__cta:hover{background:var(--red);}

.burger{display:none;width:56px;height:84px;background:none;border:0;cursor:pointer;
  flex-direction:column;justify-content:center;align-items:center;gap:6px;}
.burger span{display:block;width:22px;height:1.5px;background:var(--ink);transition:transform .4s var(--ease),opacity .3s;}
.burger.is-open span:nth-child(1){transform:translateY(3.75px) rotate(45deg);}
.burger.is-open span:nth-child(2){transform:translateY(-3.75px) rotate(-45deg);}

/* mobile menu */
.mobile-menu{
  position:fixed;inset:84px 0 0;z-index:105;background:var(--paper);
  padding:40px var(--gut);display:flex;flex-direction:column;justify-content:space-between;
  clip-path:inset(0 0 100% 0);transition:clip-path .7s var(--ease);
}
.mobile-menu.is-open{clip-path:inset(0 0 0 0);}
.mobile-menu nav{display:flex;flex-direction:column;gap:4px;}

/* the menu itself scrolls when the services panel is open on a short screen */
.mobile-nav{overflow-y:auto;-webkit-overflow-scrolling:touch;}

/* the Services toggle is a top-level line like any other - same type,
   same rule, same red index. Only the panel it reveals looks different. */
.mobile-menu nav > a,
.mobile-nav__toggle{
  font-size:clamp(30px,9vw,46px);letter-spacing:-.03em;padding:10px 0;
  border-bottom:1px solid var(--line);display:flex;align-items:baseline;gap:16px;
}
.mobile-menu nav > a i,
.mobile-nav__toggle i{font-style:normal;font-size:11px;letter-spacing:.15em;color:var(--red);}

.mobile-nav__toggle{
  width:100%;background:none;border:0;border-bottom:1px solid var(--line);
  font-family:inherit;font-weight:inherit;color:inherit;text-align:left;
  cursor:pointer;-webkit-appearance:none;appearance:none;
}
.mobile-nav__toggle .chev{
  width:14px;height:10px;margin-left:auto;align-self:center;flex:none;color:var(--red);
  transition:transform .4s var(--ease);
}
.mobile-nav__group.is-open .mobile-nav__toggle .chev{transform:rotate(180deg);}

/* ---- the revealed panel --------------------------------------------
   This is the part that must not read as more top-level links: it is a
   tinted, inset tray of smaller entries, indented under the toggle. */
.mobile-nav__panel{
  overflow:hidden;height:0;
  transition:height .45s var(--ease);
}
/* the tray is inset from the big links and carries its own tint + red spine.
   Vertical breathing room is padding on this element, not margin, so the
   scrollHeight the JS animates to is exactly what gets painted. */
.mobile-nav__panel-inner{
  background:var(--paper-2);border-left:2px solid var(--red);
  margin-left:18px;padding:6px 0;
}
/* the gap that separates the tray from the next big link */
.mobile-nav__panel::after{content:"";display:block;height:12px;}
.mobile-nav__panel a{
  display:flex;align-items:baseline;gap:14px;
  font-size:clamp(15px,4vw,19px);letter-spacing:.01em;
  padding:12px 18px;color:var(--ink-2);
}
.mobile-nav__panel a + a{border-top:1px solid var(--line);}
.mobile-nav__panel a i{font-style:normal;font-size:10px;letter-spacing:.15em;color:var(--red);}
.mobile-nav__panel a.is-current{color:var(--ink);}

@media (prefers-reduced-motion:reduce){
  .mobile-nav__panel{transition:none;}
  .mobile-nav__toggle .chev{transition:none;}
}

.mobile-menu__foot{display:flex;flex-direction:column;gap:8px;padding-top:24px;
  border-top:1px solid var(--line);}

.mobile-menu__foot a{font-size:14px;color:var(--ink-3);letter-spacing:.01em;}

/* =========================================================
   HERO
   ========================================================= */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden;}
.hero__bg{position:absolute;inset:0;z-index:0;will-change:transform;}
.hero__photo{
  position:absolute;inset:0;
  background-image:url(../img/hero.avif);
  background-size:cover;
  background-position:50% 50%;   /* pre-cropped 16:9 - bus, crowd and lit facades */
  background-color:#1a1418;      /* warm dark, matches the dusk while decoding */
  filter:grayscale(.42) contrast(1.04) brightness(.82) saturate(.9);
  transform:scale(1.04);         /* headroom so parallax never bares an edge */
}
.hero__scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(14,15,17,.72) 0%,rgba(14,15,17,.26) 40%,rgba(14,15,17,.34) 64%,rgba(14,15,17,.88) 100%),
    radial-gradient(85% 68% at 20% 48%,rgba(14,15,17,.62) 0%,rgba(14,15,17,0) 72%);
}

.hero__content{position:relative;z-index:2;padding:0 var(--gut);width:100%;color:#fff;}
.hero__title{
  font-size:clamp(46px,8.4vw,124px);
  line-height:.86;letter-spacing:-.045em;font-weight:400;color:#fff;
  text-shadow:0 1px 40px rgba(0,0,0,.28);
}
.hero__title .line{display:block;overflow:hidden;}
.hero__title .line span{
  display:block;transform:translateY(105%);
  transition:transform 1.05s var(--ease);
}
/* All three lines sit flush left; only the reveal is staggered. */
.hero__title .line:nth-child(1) span{transition-delay:.06s;}
.hero__title .line:nth-child(2) span{transition-delay:.14s;}
.hero__title .line:nth-child(3) span{transition-delay:.22s;}
.is-ready .hero__title .line span{transform:translateY(0);}

.hero__aside{
  position:absolute;right:var(--gut);bottom:14vh;z-index:2;max-width:270px;
  opacity:0;transform:translateY(24px);
  transition:opacity 1s var(--ease) .6s,transform 1s var(--ease) .6s;
}
.is-ready .hero__aside{opacity:1;transform:none;}
.hero__aside p{font-size:17px;line-height:1.4;letter-spacing:-.01em;margin-bottom:18px;
  color:rgba(255,255,255,.82);}
.hero__aside .link-underline{color:#fff;}

/* brochure figures along the base */
.hero__figs{
  position:absolute;left:var(--gut);bottom:6.5vh;z-index:2;
  display:flex;gap:clamp(26px,4.4vw,64px);
  opacity:0;transform:translateY(18px);
  transition:opacity 1s var(--ease) .78s,transform 1s var(--ease) .78s;
}
.is-ready .hero__figs{opacity:1;transform:none;}
.hfig b{display:block;font-family:var(--serif);font-weight:400;
  font-size:clamp(24px,2.9vw,40px);line-height:1;color:#fff;letter-spacing:-.01em;}
.hfig b i{font-style:normal;font-size:.44em;letter-spacing:0;}
.hfig span{display:block;margin-top:7px;font-size:9.5px;letter-spacing:.19em;
  text-transform:uppercase;color:rgba(255,255,255,.56);}

.hero__scroll{
  position:absolute;right:var(--gut);bottom:6.5vh;z-index:2;
  display:flex;align-items:center;gap:12px;
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.6);
  opacity:0;transition:opacity .9s var(--ease) 1s;
}
.is-ready .hero__scroll{opacity:1;}
.hero__scroll i{display:block;width:46px;height:1px;background:rgba(255,255,255,.32);position:relative;overflow:hidden;}
.hero__scroll i::after{
  content:"";position:absolute;inset:0;background:var(--red);
  transform:translateX(-100%);animation:slide 2.4s var(--ease-io) infinite;
}
@keyframes slide{0%{transform:translateX(-100%);}55%,100%{transform:translateX(100%);}}

/* =========================================================
   STATEMENT
   ========================================================= */
.statement{
  min-height:88vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:16vh var(--gut);
}
.statement--sm{min-height:70vh;}
.statement__title{
  font-size:clamp(30px,5.1vw,66px);max-width:17ch;line-height:1.08;letter-spacing:-.035em;
}
.statement__title .w{
  display:inline-block;opacity:.12;
  transition:opacity .55s var(--ease),transform .55s var(--ease);
  transform:translateY(6px);
}
.statement__title .w.is-lit{opacity:1;transform:none;}

/* statement over a photograph.
   The words animate from opacity .12, so on a dark ground the unlit state
   must come from colour, not from the page showing through: the words are
   white throughout and the scrim carries the contrast. Scrim weighted to
   the centre, where this statement's text sits. */
.statement--photo{
  position:relative;overflow:hidden;background:var(--ink);isolation:isolate;
  margin-block:13vh;
}
.statement--photo__img{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background-color:var(--ink);background-size:cover;background-position:center 58%;background-repeat:no-repeat;
}
.statement--photo__scrim{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(92% 72% at 50% 50%,rgba(10,10,11,.80) 0%,rgba(10,10,11,.68) 58%,rgba(10,10,11,.52) 100%),
    linear-gradient(180deg,rgba(10,10,11,.46) 0%,rgba(10,10,11,.30) 42%,rgba(10,10,11,.54) 100%);
}
.statement--photo .statement__title{position:relative;z-index:1;color:#fff;}
.statement--photo .statement__title .w{opacity:.26;}
.statement--photo .statement__title .w.is-lit{opacity:1;}

/* =========================================================
   STATS
   ========================================================= */
.stats{
  display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(40px,7vw,110px);
  padding:0 var(--gut) 18vh;align-items:start;
}
.stats__lead{position:sticky;top:26vh;}
.stats__lead p{font-size:clamp(16px,1.35vw,19px);line-height:1.55;max-width:34ch;color:var(--ink-2);}
.stats__grid{
  display:grid;grid-template-columns:repeat(2,1fr);
  column-gap:26px;
}
.stat{
  border:1px solid var(--line);background:#fff;
  padding:30px 26px;min-height:290px;
  display:flex;flex-direction:column;justify-content:space-between;
  transition:border-color .5s var(--ease),transform .5s var(--ease),box-shadow .5s var(--ease);
}
.stats__grid .stat:nth-child(odd){margin-bottom:26px;}
.stats__grid .stat:nth-child(even){margin-top:52px;margin-bottom:26px;}
.stat:hover{border-color:#c9cacc;transform:translateY(-5px);box-shadow:0 26px 60px -34px rgba(0,0,0,.28);}
.stat__num{
  font-family:var(--serif);color:var(--red);
  font-size:clamp(42px,4.6vw,68px);line-height:1;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
.stat__label{font-size:13px;color:var(--ink-3);letter-spacing:.01em;max-width:22ch;}

/* =========================================================
   SERVICE PANELS
   ========================================================= */
.services{position:relative;scroll-margin-top:84px;}
.panel{
  position:relative;min-height:104vh;
  background:transparent;
  display:grid;
  grid-template-columns:1fr;
  align-content:center;
  padding:16vh var(--gut);
}
/* The panel's ground is a pseudo-element so we control whether it sits
   above the shape stage (cutting the shape at the boundary) while the
   panel's own text stays above everything. */
.panel::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:var(--grey-panel);
}
#s-leasing::before,#s-advisory::before{background:#dcdddf;}
.panel > *{position:relative;z-index:4;}
.services{position:relative;z-index:0;isolation:isolate;}
.panel__art{position:absolute;inset:0;z-index:1;display:grid;place-items:center;
  overflow:hidden;}
/* --- red shape pieces ---------------------------------------
   Each panel assembles its own shape from four pieces as it
   scrolls through. Three shapes converge from the left and right
   edges; the leasing icon-block arrives from top and bottom.
   Pieces are translucent, so the title, the line art and the
   grey ground all read through them.
   ------------------------------------------------------------ */
.pieces{
  position:relative;z-index:2;
  width:var(--unit);height:var(--unit);
  --unit:min(21vw,232px);
  transform:translateY(-4vh);
}
.pc{
  position:absolute;left:0;top:0;
  width:100%;height:100%;
  background:rgba(226,35,26,.72);
  transform:
    translate3d(calc(var(--tx,0) * 100%), calc(var(--ty,0) * 100%), 0)
    scale(var(--sx,1), var(--sy,1));
  transform-origin:center;
  /* transform is driven per-frame from scroll, so only opacity transitions
     here - a transition on transform would fight the script and lag it. */
  will-change:transform;
  /* the fade resolves early in the panel's travel, so the pieces are solid
     for the convergence itself rather than arriving already composed */
  opacity:0;
  transition:opacity .55s var(--ease);
}
.panel.is-in .pc{opacity:1;}
@media (prefers-reduced-motion:reduce){
  .pc{opacity:1;transition:none;will-change:auto;}
}

/* --- scene line art -----------------------------------------
   Each panel's drawing is inline SVG, so it carries no ground of
   its own -- the panel grey shows straight through and the site
   keeps a single background colour. Strokes use the same ink as
   the old line art, and the red pieces sit above at 72% so the
   lines read through them.
   ------------------------------------------------------------ */
.panel__scene{
  position:absolute;inset:0;z-index:0;
  width:100%;height:100%;
  fill:none;stroke:#1a1b1c;
  stroke-linecap:round;stroke-linejoin:round;
  pointer-events:none;
}
.panel__scene .ln--h{stroke-width:2.1;}
.panel__scene .ln--l{stroke-width:1.15;opacity:.85;}
/* the drawing traces itself in as the panel arrives */
.panel__scene path{
  stroke-dasharray:1400;stroke-dashoffset:1400;
  transition:stroke-dashoffset 1.8s var(--ease);
}
.panel.is-in .panel__scene path{stroke-dashoffset:0;}
@media (prefers-reduced-motion:reduce){
  .panel__scene path{stroke-dasharray:none;stroke-dashoffset:0;transition:none;}
}

.panel__title{
  position:relative;z-index:2;justify-self:center;text-align:center;
  font-size:clamp(46px,9vw,138px);line-height:.9;letter-spacing:-.045em;
  color:#2b2c2e;
}
.panel__title span{display:block;}
.panel__title span:nth-child(2){padding-left:.22em;}

.panel__copy{
  position:absolute;right:var(--gut);bottom:16vh;z-index:3;max-width:250px;
  text-align:right;
  padding:18px 20px;border-radius:3px;
  background:rgba(255,255,255,.28);
  -webkit-backdrop-filter:blur(18px) saturate(1.1);
  backdrop-filter:blur(18px) saturate(1.1);
  box-shadow:0 4px 18px rgba(20,22,26,.05);
  opacity:0;transform:translateY(20px);
  transition:opacity .9s var(--ease) .35s,transform .9s var(--ease) .35s;
}
.panel.is-in .panel__copy{opacity:1;transform:none;}
.panel__copy p{font-size:13.5px;line-height:1.5;color:#2b2c2e;margin-bottom:14px;}
.panel__copy .link-underline{margin-left:auto;}

.panel__meta{
  position:absolute;left:var(--gut);bottom:16vh;z-index:3;
  display:flex;flex-direction:column;gap:20px;text-align:left;
  padding:18px 20px;border-radius:3px;
  background:rgba(255,255,255,.28);
  -webkit-backdrop-filter:blur(18px) saturate(1.1);
  backdrop-filter:blur(18px) saturate(1.1);
  box-shadow:0 4px 18px rgba(20,22,26,.05);
  opacity:0;transform:translateY(20px);
  transition:opacity .9s var(--ease) .5s,transform .9s var(--ease) .5s;
}
.panel.is-in .panel__meta{opacity:1;transform:none;}
.panel__meta dt{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:#6b6d70;margin-bottom:3px;}
.panel__meta dd{margin:0;font-size:13.5px;color:#1c1d1e;}

/* =========================================================
   SECTORS
   ========================================================= */
.sectors{padding:18vh var(--gut);}
.sectors__head{margin-bottom:60px;}
.sectors__head h2{font-size:clamp(30px,4.4vw,58px);}
.sector{
  border-top:1px solid var(--line);
  position:relative;overflow:hidden;
}
.sector__link{
  display:grid;grid-template-columns:minmax(0,1fr) 40px;
  align-items:center;column-gap:24px;
  padding:28px 0;padding-left:clamp(70px,9vw,118px);
  color:inherit;text-decoration:none;
  position:relative;z-index:1;
}
.sector:last-child{border-bottom:1px solid var(--line);}
.sector::before{
  content:"";position:absolute;left:0;right:0;top:0;bottom:0;
  background:var(--paper-2);transform:scaleY(0);transform-origin:bottom;z-index:0;
  transition:transform .55s var(--ease);
}
.sector:hover::before{transform:scaleY(1);transform-origin:top;}
.sector__num{
  position:absolute;left:-.06em;top:50%;transform:translateY(-50%);
  z-index:0;pointer-events:none;user-select:none;
  font-size:clamp(76px,9vw,124px);font-weight:600;
  letter-spacing:-.05em;line-height:.74;
  color:rgba(17,18,19,.055);
  transition:color .6s var(--ease);
}
.sector:hover .sector__num{color:rgba(226,35,26,.09);}
.sector__body{min-width:0;transition:transform .55s var(--ease);}
.sector:hover .sector__body{transform:translateX(14px);}
.sector__head{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 20px;}
.sector__name{font-size:clamp(20px,2.5vw,32px);letter-spacing:-.03em;}
.sector__desc{display:block;font-size:14px;line-height:1.55;color:var(--ink-3);
  margin-top:10px;max-width:70ch;}
.sector__arrow{
  font-size:19px;color:var(--ink-3);justify-self:end;align-self:center;
  opacity:0;transform:translateX(-10px);
  transition:opacity .45s var(--ease),transform .45s var(--ease),color .45s;
}
.sector:hover .sector__arrow{opacity:1;transform:none;color:var(--red);}

/* =========================================================
   NETWORK
   ========================================================= */
.network{padding:16vh var(--gut) 18vh;text-align:center;overflow:hidden;}
.network__title{font-size:clamp(30px,4.9vw,62px);max-width:19ch;margin:0 auto 34px;line-height:1.06;}
.network__title em{font-style:normal;color:var(--red);}
.network__lead{max-width:56ch;margin:0 auto;color:var(--ink-2);font-size:15.5px;}

/* --- network carousel ---------------------------------------
   Cards ride a wide arc ("rainbow") and rotate clockwise as the
   section scrolls. Each card is an image (60% of its height) above
   a black info panel with red and white text.
   ------------------------------------------------------------ */
.network__cards{
  position:relative;
  height:clamp(340px,35vw,450px);
  margin:64px auto 8px;
  max-width:1180px;
  overflow:hidden;
}
.netcards__arc{
  /* pivot sits a full radius below the box, so the arc's crown
     lands just inside the top of the container */
  position:absolute;left:50%;top:calc(var(--r) + 2%);
  --r:clamp(620px,64vw,820px);
  width:0;height:0;
}
.netcard{
  position:absolute;left:0;top:0;
  width:clamp(104px,9.4vw,132px);
  margin:0;
  /* The card hangs below a pivot far above the stage, so rotating by
     --a sweeps it along a shallow rainbow. The second rotate keeps
     the card itself upright. --a is written by JS each scroll frame. */
  transform-origin:50% 0;
  transform:
    translateX(-50%)
    rotate(calc(var(--a,0) * 1deg))
    translateY(calc(-1 * var(--radius)))
    rotate(calc(var(--a,0) * -1deg));
  --radius:var(--r,clamp(620px,64vw,820px));
  opacity:0;
  transition:opacity .7s var(--ease);
  transition-delay:calc(var(--i) * .06s);
  background:#111213;
  box-shadow:0 26px 50px -30px rgba(0,0,0,.55);
}
.network.is-in .netcard{opacity:1;}

.netcard__img{
  aspect-ratio:4/3;              /* image is ~60% of the card's height */
  width:100%;display:block;
  background-color:#1a1c1e;      /* shows while the AVIF decodes */
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  backface-visibility:hidden;    /* keeps the bitmap crisp under rotate() */
}
.netcard__info{
  display:flex;flex-direction:column;gap:2px;
  padding:11px 12px 13px;
  background:#111213;
  text-align:left;
}
.netcard__city{
  font-size:12.5px;color:#fff;letter-spacing:.01em;line-height:1.25;
}
.netcard__region{
  font-size:9.5px;color:#8b8e92;letter-spacing:.09em;text-transform:uppercase;
}
.netcard__deals{
  font-size:10px;color:var(--red);letter-spacing:.04em;margin-top:3px;
}


.network__map{margin:40px auto 0;max-width:560px;}
.netmap{position:relative;width:100%;}
.netmap picture{display:block;}
.netmap__uk{width:100%;height:auto;display:block;
  opacity:0;transform:translateY(22px);
  transition:opacity 1.1s var(--ease),transform 1.1s var(--ease);}
.network.is-in .netmap__uk{opacity:1;transform:none;}

.netmap__pins{position:absolute;inset:0;}
.netmap__pins li{
  position:absolute;left:var(--x);top:var(--y);
  display:flex;align-items:center;gap:9px;
  transform:translate(-50%,-50%);
  opacity:0;transition:opacity .6s var(--ease);
  transition-delay:calc(.55s + var(--d) * .09s);
}
.netmap__pins li.left{flex-direction:row-reverse;}
.network.is-in .netmap__pins li{opacity:1;}
.netmap__pins span{
  width:9px;height:9px;border-radius:50%;background:var(--red);flex:none;position:relative;
}
.netmap__pins span::after{
  content:"";position:absolute;inset:-5px;border-radius:50%;
  border:1px solid var(--red);opacity:.35;
  animation:ping 2.8s var(--ease-io) infinite;
  animation-delay:calc(var(--d) * .3s);
}
@keyframes ping{0%{transform:scale(.6);opacity:.5;}70%,100%{transform:scale(1.9);opacity:0;}}
.netmap__pins b{
  font-weight:400;font-size:11.5px;color:var(--ink-2);letter-spacing:.04em;white-space:nowrap;
}


/* =========================================================
   PROCESS
   ========================================================= */
.process{padding:0 var(--gut) 18vh;}
.process__head{margin-bottom:60px;}
.process__head h2{font-size:clamp(30px,4.4vw,58px);}
.process__steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);}
.step{background:var(--paper);padding:38px 30px 46px;transition:background .5s var(--ease);}
.step:hover{background:#fff;}
.step__n{font-size:11px;letter-spacing:.16em;color:var(--red);display:block;margin-bottom:44px;}
.step h3{font-size:24px;margin-bottom:12px;letter-spacing:-.03em;}
.step p{font-size:14px;color:var(--ink-3);margin:0;}

/* =========================================================
   QUOTE
   ========================================================= */
.quote{padding:0 var(--gut) 18vh;display:grid;place-items:center;text-align:center;}
.quote blockquote{margin:0;width:min(100%,720px);}
.quote p{font-family:var(--serif);font-size:clamp(28px,4.4vw,56px);line-height:1.16;letter-spacing:-.015em;margin-bottom:30px;}
.quote footer{display:flex;flex-direction:column;gap:3px;font-size:12px;color:var(--ink-3);letter-spacing:.04em;}

/* =========================================================
   CTA / FORM
   ========================================================= */
/* =========================================================
   ENQUIRY FORM - light ground, shared with the contact page
   The fields sit on paper like the rest of the interior pages,
   so the form reads as part of the same grid system.
   ========================================================= */
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:26px;}
.field{position:relative;margin-bottom:30px;}
.field--full{margin-bottom:30px;}
.field input,.field textarea,.field select{
  width:100%;background:transparent;border:0;border-bottom:1px solid var(--line);
  color:var(--ink);font-family:inherit;font-size:16px;padding:12px 0;
  border-radius:0;transition:border-color .45s var(--ease);
}
.field select{appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);
  background-position:calc(100% - 10px) calc(50% + 2px),calc(100% - 5px) calc(50% + 2px);
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:28px;}
.field select option{background:#fff;color:var(--ink);}
.field textarea{resize:vertical;min-height:92px;line-height:1.55;}
.field input:focus,.field textarea:focus,.field select:focus{outline:0;border-bottom-color:var(--red);}
.field label{
  position:absolute;left:0;top:12px;font-size:16px;color:var(--ink-3);
  pointer-events:none;transform-origin:left top;
  transition:transform .4s var(--ease),color .4s var(--ease);
}
.field input:focus+label,.field input:not(:placeholder-shown)+label,
.field textarea:focus+label,.field textarea:not(:placeholder-shown)+label{
  transform:translateY(-20px) scale(.7);color:var(--ink-3);
}
.field label.label--static{transform:translateY(-20px) scale(.7);color:var(--ink-3);}
.field.is-invalid input,.field.is-invalid textarea{border-bottom-color:var(--red);}

.btn{
  display:inline-flex;align-items:center;gap:14px;
  background:var(--red);color:#fff;border:0;cursor:pointer;
  font-family:inherit;font-size:14px;letter-spacing:.04em;
  padding:17px 34px;position:relative;overflow:hidden;
}
.btn span,.btn i{position:relative;z-index:1;}
.btn i{font-style:normal;transition:transform .5s var(--ease);}
.btn::before{
  content:"";position:absolute;inset:0;background:var(--ink);
  transform:translateY(101%);transition:transform .5s var(--ease);
}
.btn:hover{color:#fff;}
.btn:hover::before{transform:translateY(0);}
.btn:hover i{transform:translateX(6px);}
/* Honeypot - off-screen rather than display:none, which the better
   scrapers know to skip. Never focusable, never announced. */
.form__hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;}
.form__status{margin:18px 0 0;font-size:13px;color:var(--ink-3);min-height:20px;}
.form__status.is-ok{color:#1d7a4c;}
.form__status.is-err{color:var(--red);}

/* =========================================================
   DARK FORM GROUND
   Shared by the homepage/service CTA band and the contact
   page form panel - both invert the standard .field rules.
   ========================================================= */
.cta{background:var(--ink);color:#fff;padding:16vh var(--gut) 12vh;}
.cta__inner{max-width:900px;margin:0 auto;}
.cta__title{font-size:clamp(34px,5.4vw,72px);margin-bottom:60px;line-height:1.03;}

.cta .field input,.cta .field textarea,.cta .field select,
.formwrap .field input,.formwrap .field textarea,.formwrap .field select{
  border-bottom-color:#35373a;color:#fff;}
.cta .field select,
.formwrap .field select{
  background-image:linear-gradient(45deg,transparent 50%,#6f7276 50%),linear-gradient(135deg,#6f7276 50%,transparent 50%);}
.cta .field select option,
.formwrap .field select option{background:#111213;color:#fff;}
.cta .field label,
.formwrap .field label{color:#6f7276;}
.cta .field input:focus+label,.cta .field input:not(:placeholder-shown)+label,
.cta .field textarea:focus+label,.cta .field textarea:not(:placeholder-shown)+label,
.cta .field label.label--static,
.formwrap .field input:focus+label,.formwrap .field input:not(:placeholder-shown)+label,
.formwrap .field textarea:focus+label,.formwrap .field textarea:not(:placeholder-shown)+label,
.formwrap .field label.label--static{color:#9a9da1;}
.cta .btn::before,
.formwrap .btn::before{background:#fff;}
.cta .btn:hover,
.formwrap .btn:hover{color:var(--ink);}
.cta .form__status,
.formwrap .form__status{color:#9a9da1;}
.cta .form__status.is-ok,
.formwrap .form__status.is-ok{color:#7fd3a1;}
.cta .form__status.is-err,
.formwrap .form__status.is-err{color:#ff8b84;}

/* =========================================================
   FOOTER
   ========================================================= */
.footer{background:var(--ink);color:#8b8e92;padding:0 var(--gut) 34px;}
.footer__top{
  display:grid;grid-template-columns:1fr 2fr;gap:50px;
  padding:60px 0 56px;border-top:1px solid #26282a;
}
.brand--foot .brand__logo{display:none;}
.brand--foot .brand__logo--light{display:block;height:72px;}
.footer__cols{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;}
.footer__cols h2{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:#5c5f63;margin-bottom:18px;}
.footer__cols a,.footer__cols span{display:block;font-size:13.5px;margin-bottom:9px;transition:color .35s;}
.footer__cols a:hover{color:#fff;}
.footer__bottom{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px 24px;
  padding-top:26px;border-top:1px solid #26282a;font-size:12px;
}
.footer__tag{justify-self:start;}
.footer__copy{justify-self:center;text-align:center;}
.footer__legal{display:flex;gap:22px;justify-self:end;}
.footer__legal a:hover{color:#fff;}

/* =========================================================
   REVEALS
   ========================================================= */
.reveal,.reveal-card,.reveal-row{
  opacity:0;transform:translateY(26px);
  transition:opacity .85s var(--ease),transform .85s var(--ease);
}
.reveal-row{transform:translateY(20px);}
.reveal.is-in,.reveal-card.is-in,.reveal-row.is-in{opacity:1;transform:none;}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1100px){
  .stats{grid-template-columns:1fr;}
  .stats__lead{position:static;}
  .process__steps{grid-template-columns:repeat(2,1fr);}
  .footer__top{grid-template-columns:1fr;}
}
@media (max-width:900px){
  .nav,.header__cta{display:none;}
  .burger{display:flex;}
  .header{padding-right:0;}
  .hero{flex-direction:column;align-items:stretch;justify-content:flex-end;
    padding-bottom:40px;min-height:100svh;}
  .hero__content{flex:none;padding-bottom:0;}
  .hero__aside{position:static;max-width:none;width:100%;padding:26px var(--gut) 0;}
  .hero__aside p{font-size:15.5px;max-width:32ch;}
  .hero__title{font-size:clamp(44px,13vw,74px);}
  /* figures join the stack instead of floating over the aside */
  .hero__figs{position:static;padding:28px var(--gut) 0;gap:0;
    justify-content:space-between;width:100%;}
  .hfig b{font-size:clamp(20px,6vw,28px);}
  .hfig span{font-size:8.5px;letter-spacing:.15em;}
  .hero__photo{background-position:56% 50%;}
  .hero__scroll{display:none;}
  /* The panel__meta lists repeat in plain text what the copy above them
     already says, and carry no link of their own -- on a phone they are a
     long tail of stray labels under every panel, so they are dropped. The
     copy block, which holds the Learn more link, stays. */
  .panel__meta{display:none;}

  /* The statements are built to fill a desktop viewport: a 70-88vh floor
     plus 16vh of padding. On a phone that floor is far taller than the few
     lines it holds, so it collapses to the padding alone -- and the band
     between the stats and the services headline, where .stats also ends on
     18vh, is trimmed to match. */
  .statement:not(.statement--photo){min-height:0;padding:11vh var(--gut);}
  .statement--sm{min-height:0;}
  .stats{padding-bottom:11vh;}

  /* On a phone the art and the title share one overlay cell -- the words
     sit on the buildings, as they do on desktop -- and the copy takes its
     own row underneath, clear of the drawing. With the meta lists dropped
     the panel is short, so the padding is trimmed too: the old 9/10vh left
     a large empty band under the copy. */
  .panel{
    min-height:auto;padding:7vh var(--gut) 8vh;gap:0;
    grid-template-columns:1fr;
    grid-template-rows:auto auto;
    align-content:start;
  }
  /* z-index:auto is deliberate: on desktop the art is a stacking context
     at z-1, which would trap the scene and the pieces together and leave
     no layer between them for the title. Dropping it lets the scene (z-0),
     the title (z-1) and the pieces (z-2) interleave in one context. */
  .panel__art{
    position:relative;inset:auto;z-index:auto;
    grid-area:1 / 1;
    width:100%;aspect-ratio:1010/572;height:auto;
    display:grid;place-items:center;overflow:visible;
  }
  .panel__scene{position:absolute;inset:0;z-index:0;opacity:.55;}
  /* The composed shapes run up to 3 units wide and 2.26 units tall, so the
     unit is taken from the shorter axis -- the stage height -- or the tall
     arrangements would spill past the drawing. A unit of 0.38 of the stage
     height puts the tallest shape at ~86% of the stage and the widest at
     ~64% of its width. */
  .pieces{
    --stage-h:calc((100vw - 2 * var(--gut)) * 0.5663);
    --unit:min(calc(var(--stage-h) * .38),104px);
    transform:none;
  }
  /* The title sits centred in the art cell at z-1 -- above the line art
     (z-0), below the red pieces (z-2) -- so the words read on the buildings
     and the blocks pass over them. "Shopping Centre" is the longest line
     and sets the size: at the desktop floor of 46px it runs past the
     gutters on a narrow phone. */
  .panel__title{
    grid-area:1 / 1;
    align-self:center;
    position:relative;z-index:1;
    margin:0;
    font-size:clamp(30px,8.2vw,56px);
  }
  .panel__title span:nth-child(2){padding-left:.12em;}

  /* The copy takes the row below the art, so the paragraph and its Learn
     more link sit on clean ground rather than over the drawing.
     position:relative is essential: the desktop rule pins the copy with
     position:absolute, which takes it out of flow and makes the grid row
     placement a no-op, dropping the block back over the title. */
  .panel__copy{
    position:relative;inset:auto;
    grid-area:2 / 1;
    z-index:4;
    margin-top:24px;
    max-width:none;text-align:left;
    background:none;padding:0;box-shadow:none;
    -webkit-backdrop-filter:none;backdrop-filter:none;
  }
  .panel__copy .link-underline{margin-left:0;}
  .panel__copy p{font-size:14.5px;}
  .sector__link{grid-template-columns:minmax(0,1fr);column-gap:12px;
    padding:24px 0;padding-left:56px;}
  .sector__num{font-size:clamp(58px,14vw,80px);}
  .sector__head{gap:8px;}
  .sector__desc{margin-top:8px;}
  .sector__arrow{display:none;}
  .form__row{grid-template-columns:1fr;gap:0;}
  .footer__cols{grid-template-columns:1fr 1fr;}
  
}
@media (max-width:560px){
  .stats__grid{grid-template-columns:1fr;}
  .stats__grid .stat:nth-child(even){margin-top:0;}
  .stat{min-height:200px;}
  .process__steps{grid-template-columns:1fr;}
  .step__n{margin-bottom:24px;}
  .footer__bottom{grid-template-columns:1fr;justify-items:center;text-align:center;}
  .footer__tag,.footer__copy,.footer__legal{justify-self:center;}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s!important;transition-duration:.001s!important;}
  .reveal,.reveal-card,.reveal-row,.hero__aside,.panel__copy,.panel__meta{opacity:1;transform:none;}
  .hero__title .line span{transform:none;}
  .statement__title .w{opacity:1;transform:none;}
}

/* =========================================================
   CONTACT PAGE
   ========================================================= */
/* the page has no hero photo, so the fixed header needs a solid
   ground from the start - .page paints it and offsets the content */
.page .header{background:rgba(251,251,251,.88);backdrop-filter:blur(14px);
  border-bottom-color:var(--line);}
.nav__list a.is-current,.nav__drop-btn[aria-current]{color:var(--ink);}
.nav__list a.is-current::after,.nav__drop-btn[aria-current]::after{transform:scaleX(1);}

.phead{padding:clamp(130px,17vh,200px) var(--gut) 0;}
.phead__inner{max-width:900px;}
.phead__title{
  font-size:clamp(38px,6.6vw,88px);line-height:1.02;letter-spacing:-.045em;
  font-weight:400;margin:0 0 32px;
}
.phead__lead{font-size:clamp(16px,1.5vw,19px);line-height:1.55;color:var(--ink-2);
  max-width:56ch;margin:0;}
.phead__meta{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);
  margin-top:9vh;
}
.pmeta{background:var(--paper);padding:30px 28px 34px;}
.pmeta b{display:block;font-family:var(--serif);font-weight:400;
  font-size:clamp(26px,3.2vw,40px);line-height:1;letter-spacing:-.01em;margin-bottom:12px;}
.pmeta span{display:block;font-size:10px;letter-spacing:.19em;text-transform:uppercase;
  color:var(--ink-3);}

/* --- promises: the time commitments, above the ask --- */
.promise{padding:clamp(48px,8vh,90px) var(--gut) 0;}
.promise__grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);
}
.promise__grid > div{background:var(--paper);padding:30px 28px 34px;}
.promise b{display:block;font-family:var(--serif);font-weight:400;
  font-size:clamp(26px,3.2vw,40px);line-height:1;letter-spacing:-.01em;margin-bottom:12px;}
.promise b i{font-style:normal;font-size:.42em;letter-spacing:.02em;}
.promise > .promise__grid > div > span{display:block;font-size:10px;letter-spacing:.19em;
  text-transform:uppercase;color:var(--ink-3);line-height:1.5;}
/* the counter span inside <b> must keep the big serif, not the caption rule */
.promise__num{display:inline;font:inherit;letter-spacing:inherit;text-transform:none;color:inherit;}

/* --- enquiry: process rail beside the form --- */
.contact{padding:clamp(48px,9vh,100px) var(--gut) 0;}
.contact__grid{
  display:grid;grid-template-columns:minmax(260px,.85fr) 1.35fr;gap:1px;
  background:var(--line);border:1px solid var(--line);
  align-items:stretch;
}
.rail{background:var(--paper);padding:clamp(30px,3.4vw,44px) clamp(24px,2.6vw,36px);}
.rail__h{font-size:clamp(22px,2.6vw,32px);letter-spacing:-.035em;line-height:1.1;
  color:var(--ink);margin:0 0 32px;}
/* the connecting line is the sequence - the steps are a real order */
.track{list-style:none;margin:0 0 34px;padding:0;position:relative;}
.track::before{content:"";position:absolute;left:5px;top:11px;width:1px;
  height:calc(100% - 11px - 1.6em);background:var(--line);}
.track li{position:relative;padding:0 0 28px 30px;}
.track li:last-child{padding-bottom:0;}
.track li::before{content:"";position:absolute;left:0;top:6px;width:11px;height:11px;
  border-radius:50%;border:1px solid var(--line);background:var(--paper);}
.track li:first-child::before{background:var(--red);border-color:var(--red);}
.track h3{font-size:15px;font-weight:500;letter-spacing:-.015em;margin:0 0 6px;}
.track p{margin:0 0 10px;font-size:13.5px;line-height:1.55;color:var(--ink-3);}
.track__time{display:inline-block;font-size:12.5px;line-height:1.5;color:var(--ink-3);}
.track li:first-child .track__time{color:var(--red);}
.rail__foot{border-top:1px solid var(--line);padding-top:24px;}
.rail__foot p{margin:0;font-size:13.5px;line-height:1.6;color:var(--ink-3);}
.rail__foot strong{color:var(--ink);font-weight:500;}

/* the form panel inverts - it is the one thing on the page
   asking for action, so it carries the ink ground */
.formwrap{background:var(--ink);color:#fff;
  padding:clamp(30px,3.4vw,46px) clamp(26px,3vw,42px) clamp(32px,3.2vw,42px);}
.formwrap__h{font-size:clamp(22px,2.6vw,32px);letter-spacing:-.035em;line-height:1.1;
  margin:0 0 8px;color:#fff;}
.formwrap__sub{font-size:13.5px;color:#9a9da1;margin:0 0 36px;}

/* --- direct contact: the fallback path, deliberately quieter --- */
.direct{padding:clamp(48px,8vh,86px) var(--gut) clamp(60px,10vh,110px);}
.direct__head{margin-bottom:28px;}
.direct__head h2{font-size:clamp(19px,2.2vw,27px);letter-spacing:-.035em;margin:0;}
.direct__grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);
}
.dcard{background:var(--paper);padding:24px 24px 26px;transition:background .5s var(--ease);}
.dcard:hover{background:#fff;}
.dcard__label{display:block;font-size:9.5px;letter-spacing:.19em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:14px;}
.dcard__val{display:block;font-size:15px;letter-spacing:-.015em;color:var(--ink);
  margin-bottom:10px;text-decoration:none;}
a.dcard__val{border-bottom:1px solid var(--line);padding-bottom:3px;
  transition:border-color .35s var(--ease),color .35s var(--ease);}
a.dcard__val:hover{color:var(--red);border-bottom-color:var(--red);}
.dcard p{font-size:12.5px;line-height:1.55;color:var(--ink-3);margin:0;}

@media (max-width:1100px){
  .direct__grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:980px){
  /* the rail stacks above the form, keeping the same read order */
  .contact__grid{grid-template-columns:1fr;}
}
@media (max-width:900px){
  .phead{padding-top:clamp(110px,14vh,150px);}
  .phead__meta{grid-template-columns:1fr;margin-top:7vh;}
  .promise__grid{grid-template-columns:1fr;}
  /* On a phone the process rail is a long preamble standing between the
     page and the form it explains, so the form comes first instead. */
  .rail{display:none;}
}
@media (max-width:560px){
  .direct__grid{grid-template-columns:1fr;}
  .dcard{padding:22px 20px 24px;}
}

/* =========================================================
   INTERIOR PAGES - shared components
   (no reveal classes here: these pages render at rest)
   ========================================================= */
.phead--svc{padding-bottom:0;}
.phead__spec{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);margin:9vh 0 0;
}
.phead__spec>div{background:var(--paper);padding:26px 24px 30px;}
.phead__spec dt{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:8px;}
.phead__spec dd{margin:0;font-size:14.5px;line-height:1.45;color:var(--ink);}

/* facts row */
.pfacts{padding:12vh var(--gut) 0;}
.pfacts__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);}
.pfact{background:var(--paper);padding:32px 26px 36px;}
.pfact b{display:block;font-family:var(--serif);font-weight:400;
  font-size:clamp(24px,2.9vw,38px);line-height:1;letter-spacing:-.01em;margin-bottom:12px;}
.pfact span{display:block;font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-3);line-height:1.5;}

/* two-column narrative */
.pcols{display:grid;grid-template-columns:minmax(200px,1fr) 2.1fr;gap:clamp(30px,6vw,90px);
  padding:14vh var(--gut);}
.pcols__side h2{font-size:clamp(22px,2.6vw,32px);letter-spacing:-.03em;margin:0;
  position:sticky;top:110px;}
.pcols__body p{font-size:15.5px;line-height:1.72;color:var(--ink-2);margin:0 0 22px;max-width:62ch;}
.pcols__body p:last-child{margin-bottom:0;}
.pcols__body .lede-p{font-size:clamp(18px,2.1vw,25px);line-height:1.44;
  letter-spacing:-.02em;color:var(--ink);margin-bottom:30px;}

/* method steps */
.pmethod{padding:0 var(--gut) 14vh;}
.pmethod__head{margin-bottom:52px;}
.pmethod__head h2{font-size:clamp(26px,3.4vw,44px);letter-spacing:-.035em;margin:0 0 14px;}
.pmethod__head p{font-size:15px;color:var(--ink-3);margin:0;}
.pmethod__steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);list-style:none;padding:0;margin:0;}
.pmethod__steps li{background:var(--paper);padding:34px 26px 40px;
  transition:background .5s var(--ease);}
.pmethod__steps li:hover{background:#fff;}
.pmethod__steps span{font-size:11px;letter-spacing:.16em;color:var(--red);
  display:block;margin-bottom:38px;}
.pmethod__steps h3{font-size:21px;margin:0 0 10px;letter-spacing:-.03em;}
.pmethod__steps p{font-size:14px;line-height:1.6;color:var(--ink-3);margin:0;}

/* testimonials - auto-rolling carousel */
.ptestis{padding:0 var(--gut) 14vh;}
.ptestis__head{display:flex;align-items:flex-end;justify-content:space-between;
  gap:24px;margin-bottom:48px;}
.ptestis__head h2{font-size:clamp(26px,3.4vw,44px);letter-spacing:-.035em;margin:0;}
.ptestis__nav{display:flex;gap:10px;flex:none;}
.ptestis__arrow{
  width:46px;height:46px;flex:none;display:grid;place-items:center;
  background:transparent;border:1px solid var(--line);border-radius:50%;
  color:var(--ink);cursor:pointer;padding:0;
  transition:background .4s var(--ease),border-color .4s var(--ease),color .4s var(--ease);
}
.ptestis__arrow:hover{background:var(--ink);border-color:var(--ink);color:#fff;}
.ptestis__arrow svg{width:16px;height:12px;fill:none;stroke:currentColor;
  stroke-width:1.2;stroke-linecap:square;}

.ptestis__carousel{border:1px solid var(--line);background:var(--paper);}
/* The track holds every quote stacked in the same cell; the tallest one sets
   the height so the band never jumps as slides change. */
.ptestis__track{display:grid;padding:clamp(36px,5vw,72px) clamp(28px,5vw,72px);
  min-height:340px;}
.ptesti{
  grid-area:1/1;margin:0;
  display:flex;flex-direction:column;justify-content:space-between;gap:30px;
  opacity:0;visibility:hidden;transform:translateY(14px);
  transition:opacity .7s var(--ease),transform .7s var(--ease),visibility .7s;
}
.ptesti.is-active{opacity:1;visibility:visible;transform:none;}
.ptesti p{font-family:var(--serif);font-size:clamp(21px,2.4vw,32px);line-height:1.32;
  letter-spacing:-.02em;color:var(--ink);margin:0;max-width:46ch;}
.ptesti footer{display:flex;flex-direction:column;align-items:flex-start;gap:3px;}
/* Client marks vary wildly in aspect, so height is fixed and width follows;
   the reserved width/height attrs keep the slide from reflowing on load. */
.ptesti__logo{height:56px;width:auto;margin-bottom:18px;}
.ptesti b{font-size:13px;font-weight:500;}
.ptesti span{font-size:11.5px;color:var(--ink-3);letter-spacing:.03em;}

/* One bar per quote; the active one fills over the 4.5s dwell. */
.ptestis__dots{display:flex;gap:8px;padding:0 clamp(28px,5vw,72px) 30px;}
.ptestis__dot{
  position:relative;width:52px;height:2px;padding:0;border:0;
  background:var(--line);cursor:pointer;overflow:hidden;
}
.ptestis__dot::after{
  content:"";position:absolute;inset:0;background:var(--red);
  transform:scaleX(0);transform-origin:left;
}
.ptestis__dot.is-done::after{transform:scaleX(1);}
.ptestis__dot.is-active::after{animation:testiFill var(--testi-dwell,4500ms) linear forwards;}
.ptestis__carousel.is-paused .ptestis__dot.is-active::after{animation-play-state:paused;}
@keyframes testiFill{from{transform:scaleX(0);}to{transform:scaleX(1);}}

@media (prefers-reduced-motion:reduce){
  .ptesti{transition:none;}
  .ptestis__dot.is-active::after{animation:none;transform:scaleX(1);}
}

/* sector rows */
.psectors{padding:12vh var(--gut) 14vh;border-top:1px solid var(--line);
  margin-top:12vh;}
.psector{display:grid;grid-template-columns:70px 1fr;gap:20px;
  padding:40px 0;border-bottom:1px solid var(--line);}
.psector:first-child{border-top:0;padding-top:0;}
.psector__num{font-size:11px;letter-spacing:.16em;color:var(--red);padding-top:8px;}
.psector__body h3{font-size:clamp(24px,3.2vw,40px);letter-spacing:-.035em;margin:0 0 14px;}
.psector__body p{font-size:15.5px;line-height:1.6;color:var(--ink-2);margin:0 0 20px;max-width:62ch;}

/* city grid */
.pcities{padding:12vh var(--gut) 0;}
.pcities__head{margin-bottom:48px;max-width:620px;}
.pcities__head h2{font-size:clamp(26px,3.4vw,44px);letter-spacing:-.035em;margin:0 0 16px;}
.pcities__head p{font-size:15.5px;line-height:1.6;color:var(--ink-3);margin:0;}
.pcities__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.pcity{margin:0;background:var(--ink);}
.pcity__img{aspect-ratio:4/3;background-size:cover;background-position:center;
  background-color:#1a1c1e;}
.pcity figcaption{padding:14px 16px 17px;display:flex;flex-direction:column;gap:3px;}
.pcity b{font-size:13.5px;color:#fff;font-weight:400;letter-spacing:.01em;}
.pcity span{font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:#8b8e92;}

/* "wherever you're interested in" card */
.pcity__link{display:block;color:inherit;text-decoration:none;}
.pcity--any .pcity__img{position:relative;overflow:hidden;}
.pcity__over{
  position:absolute;inset:0;
  display:flex;flex-direction:column;justify-content:flex-end;gap:12px;
  padding:clamp(16px,1.8vw,22px);
  background:linear-gradient(to top,rgba(17,18,19,.94) 0%,rgba(17,18,19,.86) 55%,rgba(17,18,19,.72) 100%);
  opacity:0;transition:opacity .45s var(--ease);}
.pcity__over p{margin:0;font-size:13.5px;line-height:1.55;color:#fff;letter-spacing:-.005em;}
.pcity__cue{display:inline-flex;align-items:center;gap:8px;
  font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:#fff;}
.pcity__cue i{font-style:normal;color:var(--red);transition:transform .45s var(--ease);}
.pcity--any:hover .pcity__over,
.pcity__link:focus-visible .pcity__over{opacity:1;}
.pcity--any:hover .pcity__cue i{transform:translateX(5px);}
.pcity__link:focus-visible{outline:2px solid var(--red);outline-offset:3px;}

@media (hover:none){
  .pcity__over{opacity:1;
    background:linear-gradient(to top,rgba(17,18,19,.92) 30%,rgba(17,18,19,0) 100%);}
}
@media (prefers-reduced-motion:reduce){
  .pcity__over,.pcity__cue i{transition-duration:.01ms;}
}

/* service points */
.ppoints{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;
  background:var(--line);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.ppoint{background:var(--paper);padding:44px clamp(24px,4vw,60px) 48px;
  transition:background .5s var(--ease);}
.ppoint:hover{background:#fff;}
.ppoint h3{font-size:20px;letter-spacing:-.025em;margin:0 0 12px;}
.ppoint p{font-size:14.5px;line-height:1.65;color:var(--ink-3);margin:0;max-width:52ch;}

/* other services */
.pother{padding:14vh var(--gut);}
.pother h2{font-size:clamp(22px,2.6vw,32px);letter-spacing:-.03em;margin:0 0 34px;}
.pother__list{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);}
.pother__list a{background:var(--paper);padding:28px 26px 32px;display:block;
  font-size:17px;letter-spacing:-.02em;color:var(--ink);
  transition:background .45s var(--ease),color .45s var(--ease);}
.pother__list a span{display:block;font-size:11px;letter-spacing:.16em;
  color:var(--red);margin-bottom:26px;}
.pother__list a:hover{background:#fff;color:var(--red);}

/* closing band */
.pband{background:var(--ink);color:#fff;padding:14vh var(--gut);}
.pband__inner{display:grid;grid-template-columns:7fr 5fr;
  gap:38px clamp(32px,6vw,96px);align-items:end;}
.pband h2{font-size:clamp(28px,4.2vw,54px);letter-spacing:-.04em;line-height:1.06;
  margin:0 0 18px;max-width:16ch;}
.pband p{font-size:16px;color:rgba(255,255,255,.62);margin:0;max-width:44ch;}
.btn--band{background:var(--red);color:#fff;}
.btn--band::before{background:#fff;}
.btn--band:hover{color:var(--ink);}

@media (max-width:1100px){
  .phead__spec{grid-template-columns:repeat(2,1fr);}
  .pfacts__grid{grid-template-columns:repeat(2,1fr);}
  .pmethod__steps{grid-template-columns:repeat(2,1fr);}
  .ptestis__head{flex-direction:column;align-items:flex-start;}
  .ptesti p{max-width:none;}
  .ptestis__dot{flex:1;width:auto;}
  .ptesti__logo{height:44px;}
  .pcities__grid{grid-template-columns:repeat(3,1fr);}
  .pother__list{grid-template-columns:1fr 1fr;}
}
@media (max-width:900px){
  .pcols{grid-template-columns:1fr;gap:26px;padding-top:11vh;padding-bottom:11vh;}
  .pcols__side h2{position:static;}
  .ppoints{grid-template-columns:1fr;}
  .pcities__grid{grid-template-columns:repeat(2,1fr);}
  .psector{grid-template-columns:52px 1fr;gap:12px;padding:30px 0;}
  .pband__inner{grid-template-columns:1fr;align-items:start;gap:30px;}
}
@media (max-width:560px){
  .brand__logo{height:44px;}
  .phead__spec,.pfacts__grid,.pmethod__steps{grid-template-columns:1fr;}
  .pcities__grid{grid-template-columns:1fr;}
  .statement--photo{margin-block:10vh;}
}


/* centred statement - replaces the two-column narrative on the network
   page. No heading: the copy itself carries the section, so it is set
   large and centred with a measure that keeps it readable. */
.pstatement{padding:14vh var(--gut);}
.pstatement__inner{max-width:1000px;margin:0 auto;text-align:center;}
/* the measure sits on each paragraph, so each is bounded by its own
   font size rather than the wrapper's inherited one */
.pstatement__lead{
  font-size:clamp(26px,4.2vw,52px);line-height:1.1;letter-spacing:-.035em;
  color:var(--ink);margin:0 auto 34px;max-width:19ch;
}
.pstatement__inner p:last-child{
  font-size:clamp(15.5px,1.5vw,18px);line-height:1.62;color:var(--ink-2);
  max-width:56ch;margin:0 auto;
}
@media (max-width:900px){
  .pstatement{padding:11vh var(--gut);}
  .pstatement__lead{margin-bottom:26px;}
}

/* =========================================================
   NETWORK PAGE - motion
   The interior pages otherwise render at rest; this page opts in,
   reusing the hero's line-mask intro and the shared .reveal* set
   so the timing and easing match the rest of the site.
   ========================================================= */

/* page title - each line wipes up from behind its own mask, on load */
.phead__title--lines .line{display:block;overflow:hidden;}
.phead__title--lines .line>span{
  display:block;transform:translateY(105%);
  transition:transform 1.05s var(--ease);
}
.phead__title--lines .line:nth-child(1)>span{transition-delay:.06s;}
.phead__title--lines .line:nth-child(2)>span{transition-delay:.14s;}
.is-ready .phead__title--lines .line>span{transform:translateY(0);}

/* the lead follows the last line in */
.phead__lead--in{
  opacity:0;transform:translateY(18px);
  transition:opacity 1s var(--ease) .42s,transform 1s var(--ease) .42s;
}
.is-ready .phead__lead--in{opacity:1;transform:none;}

/* city cards - the photograph settles as the card arrives, then
   eases in again under the cursor */
.pcity__img{transition:transform 1.1s var(--ease);transform-origin:center;}
.pcity.reveal-card .pcity__img{transform:scale(1.06);}
.pcity.reveal-card.is-in .pcity__img{transform:none;}
.pcity{transition:transform .6s var(--ease);}
.pcity:hover{transform:translateY(-4px);}
.pcity:hover .pcity__img{transform:scale(1.04);}

@media (prefers-reduced-motion:reduce){
  .phead__title--lines .line>span{transform:none;}
  .phead__lead--in{opacity:1;transform:none;}
  .pcity.reveal-card .pcity__img,
  .pcity:hover,
  .pcity:hover .pcity__img{transform:none;}
}

/* =========================================================
   CONTACT PAGE MOTION
   Two layers that hand off to each other:
   (a) a one-shot scroll entrance per section, and
   (b) interaction feedback in the form once it has arrived.
   The handoff matters where both want the same property -
   see .track li and .dcard below.
   ========================================================= */

/* ---- page head: line-by-line rise, matching the hero ---- */
.phead__title .ln{display:block;overflow:hidden;}
.phead__title .ln > span{
  display:block;transform:translateY(105%);
  transition:transform 1.05s var(--ease);
}
.phead__title .ln:nth-child(2) > span{transition-delay:.1s;}
.is-ready .phead__title .ln > span{transform:none;}

.contact-page .phead__lead{
  opacity:0;transform:translateY(16px);
  transition:opacity .9s var(--ease) .34s,transform .9s var(--ease) .34s;
}
.contact-page.is-ready .phead__lead{opacity:1;transform:none;}

/* ---- promise tiles ---- */
.contact-page .promise__grid > div{
  opacity:0;transform:translateY(22px);
  transition:opacity .8s var(--ease),transform .8s var(--ease);
}
.contact-page .promise__grid.is-in > div{opacity:1;transform:none;}
.contact-page .promise__grid.is-in > div:nth-child(2){transition-delay:.1s;}
.contact-page .promise__grid.is-in > div:nth-child(3){transition-delay:.2s;}

/* ---- the track: line draws down, dots pop in sequence ---- */
.contact-page .track::before{
  transform:scaleY(0);transform-origin:top;
  transition:transform 1.5s var(--ease-io) .15s;
}
.contact-page .track.is-in::before{transform:scaleY(1);}

/* Entrance and form-progress both want `opacity` here. The entrance
   owns it until the track has landed; from then on .is-live does,
   resting at .45 so completing the form visibly advances the rail. */
.contact-page .track li{
  opacity:0;transform:translateY(14px);
  transition:opacity .7s var(--ease),transform .7s var(--ease);
}
.contact-page .track li::before{
  transform:scale(0);
  transition:transform .5s cubic-bezier(.34,1.56,.64,1),background .4s,border-color .4s;
}
/* The base sheet paints step one red as a static accent. Here the red
   means "reached", so reset it and let .is-live drive it. */
.contact-page .track li:first-child::before{background:#fff;border-color:var(--line);}
.contact-page .track li:first-child .track__time{color:var(--ink-3);border-color:var(--line);}
.contact-page .track li:first-child.is-live::before{background:var(--red);border-color:var(--red);}
.contact-page .track li:first-child.is-live .track__time{color:var(--red);border-color:var(--red);}

/* Steps stay fully legible once landed - this is copy the reader needs
   whether or not they ever touch the form. Progress is carried by the
   dot and the time pill instead of by dimming the text. */
.contact-page .track.is-in li{opacity:1;transform:none;}
.contact-page .track.is-in li::before{transform:scale(1);}
.contact-page .track.is-in li.is-live::before{
  background:var(--red);border-color:var(--red);transform:scale(1.18);
}
.contact-page .track li .track__time{
  transition:color .4s var(--ease),border-color .4s var(--ease);
}
.contact-page .track.is-in li.is-live .track__time{
  color:var(--red);border-color:var(--red);
}
.contact-page .track.is-in li:nth-child(1){transition-delay:.25s;}
.contact-page .track.is-in li:nth-child(1)::before{transition-delay:.25s;}
.contact-page .track.is-in li:nth-child(2){transition-delay:.55s;}
.contact-page .track.is-in li:nth-child(2)::before{transition-delay:.55s;}
.contact-page .track.is-in li:nth-child(3){transition-delay:.85s;}
.contact-page .track.is-in li:nth-child(3)::before{transition-delay:.85s;}
.contact-page .track.is-in li:nth-child(4){transition-delay:1.15s;}
.contact-page .track.is-in li:nth-child(4)::before{transition-delay:1.15s;}
/* once the user is driving, drop the entrance stagger so the rail
   responds immediately instead of up to 1.15s late */
.contact-page .track.is-live-driven li,
.contact-page .track.is-live-driven li::before{transition-delay:0s;}

/* ---- form fields: cascade in, then respond to focus ---- */
.contact-page .form .field,.contact-page .form .form__row,
.contact-page .form .btn,.contact-page .form .form__note{
  opacity:0;transform:translateY(16px);
  transition:opacity .7s var(--ease),transform .7s var(--ease);
}
.contact-page .formwrap.is-in .form .field,
.contact-page .formwrap.is-in .form .form__row,
.contact-page .formwrap.is-in .form .btn,
.contact-page .formwrap.is-in .form .form__note{opacity:1;transform:none;}

/* focus lift only applies after the entrance has finished, so the two
   transforms never contend for the same element */
.contact-page .formwrap.is-in .form .field.is-focus{transform:translateY(-2px);}

.field::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;
  background:var(--red);transform:scaleX(var(--u,0));transform-origin:left;
  transition:transform .45s var(--ease);pointer-events:none;
}
.field.is-focus{--u:1;}
.field.is-filled:not(.is-focus)::after{
  transform:scaleX(1);background:#3f8f63;opacity:.7;
}

/* ---- live completion meter above the form ---- */
.ometer{
  display:flex;align-items:center;gap:14px;
  margin:0 0 26px;padding-bottom:18px;border-bottom:1px solid #26282a;
}
.ometer__bar{flex:1;height:2px;background:#2b2d30;position:relative;overflow:hidden;}
.ometer__bar span{
  position:absolute;inset:0;background:var(--red);
  transform:scaleX(var(--done,0));transform-origin:left;
  transition:transform .55s var(--ease),background .55s var(--ease);
}
.ometer.is-complete .ometer__bar span{background:#3f8f63;}
.ometer__txt{
  font-size:10px;letter-spacing:.19em;text-transform:uppercase;color:#9a9da1;
  white-space:nowrap;transition:color .4s;
}
.ometer.is-complete .ometer__txt{color:#7fd3a1;}

/* ---- submit button working state ---- */
.form .btn{position:relative;overflow:hidden;}
.form .btn.is-working{pointer-events:none;color:transparent;}
.form .btn.is-working::after{
  content:"";position:absolute;left:50%;top:50%;width:15px;height:15px;
  margin:-7.5px 0 0 -7.5px;border:1.5px solid rgba(17,18,19,.25);
  border-top-color:var(--ink);border-radius:50%;
  animation:btnspin .7s linear infinite;
}
@keyframes btnspin{to{transform:rotate(360deg);}}

/* ---- direct contact cards ----
   Entrance uses translateY on .dcard; hover uses translateX on an
   inner wrapper-free element via a separate property, so the two
   never overwrite one another mid-flight. */
.contact-page .dcard{
  position:relative;padding-right:34px;
  opacity:0;transform:translateY(20px);
  transition:opacity .75s var(--ease),transform .75s var(--ease);
}
.contact-page .direct__grid.is-in .dcard{opacity:1;transform:none;}
.contact-page .direct__grid.is-in .dcard:nth-child(2){transition-delay:.08s;}
.contact-page .direct__grid.is-in .dcard:nth-child(3){transition-delay:.16s;}
.contact-page .direct__grid.is-in .dcard:nth-child(4){transition-delay:.24s;}
/* hover only once landed, and the delay is cleared so it feels instant */
.contact-page .direct__grid.is-in .dcard:hover{
  transform:translateX(4px);transition-delay:0s;
}
.dcard::after{
  content:"";position:absolute;right:14px;top:50%;width:14px;height:1px;
  background:var(--red);opacity:0;transform:translateX(-8px);
  transition:opacity .4s var(--ease),transform .4s var(--ease);
}
.contact-page .direct__grid.is-in .dcard:hover::after{opacity:1;transform:translateX(0);}
.dcard__label{transition:color .4s var(--ease),letter-spacing .4s var(--ease);}
.contact-page .direct__grid.is-in .dcard:hover .dcard__label{
  color:var(--red);letter-spacing:.24em;
}

@media (prefers-reduced-motion:reduce){
  .phead__title .ln > span,
  .contact-page .phead__lead,
  .contact-page .promise__grid > div,
  .contact-page .track li,
  .contact-page .track.is-in li,
  .contact-page .dcard,
  .contact-page .form .field,.contact-page .form .form__row,
  .contact-page .form .btn,.contact-page .form .form__note{
    opacity:1!important;transform:none!important;
  }
  .contact-page .track::before{transform:scaleY(1)!important;}
  .contact-page .track li::before{transform:scale(1)!important;}
  .contact-page .direct__grid.is-in .dcard:hover{transform:none;}
  .form .btn.is-working::after{animation:none;}
}

/* =========================================================
   404 PAGE
   Reuses .phead for the head and the .direct card grid for the
   routes out, so there is nothing bespoke to maintain beyond the
   oversized code and the action row.
   ========================================================= */
.phead--error{padding-bottom:0;}

/* The code is decorative - the <h1> carries the meaning - so it sits
   behind the title in the serif, at the weight of a section number. */
.err__code{
  display:block;font-family:var(--serif);font-weight:400;
  font-size:clamp(76px,15vw,190px);line-height:.86;letter-spacing:-.04em;
  color:var(--grey-panel);margin:0 0 clamp(10px,1.4vw,18px);
  opacity:0;transform:translateY(18px);
  transition:opacity 1s var(--ease),transform 1s var(--ease);
}
.is-ready .err__code{opacity:1;transform:none;}

.error-page .phead__lead{
  opacity:0;transform:translateY(16px);
  transition:opacity .9s var(--ease) .34s,transform .9s var(--ease) .34s;
}
.error-page.is-ready .phead__lead{opacity:1;transform:none;}

.err__actions{
  display:flex;align-items:center;gap:clamp(20px,3vw,40px);flex-wrap:wrap;
  margin-top:clamp(30px,4vw,46px);
  opacity:0;transform:translateY(16px);
  transition:opacity .9s var(--ease) .48s,transform .9s var(--ease) .48s;
}
.error-page.is-ready .err__actions{opacity:1;transform:none;}

/* the routes grid: same tiles as .direct, but each one is a link */
.error-page .direct{padding-top:clamp(56px,9vh,100px);}
.error-page .dcard{position:relative;}
.error-page a.dcard .dcard__val{
  transition:color .35s var(--ease);
}
.error-page a.dcard:hover .dcard__val{color:var(--red);}
.error-page a.dcard:hover .dcard__label{color:var(--red);letter-spacing:.24em;}
.error-page .dcard__label{transition:color .4s var(--ease),letter-spacing .4s var(--ease);}
/* red keyline on hover, matching the contact page's cards */
.error-page a.dcard::after{
  content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--red);opacity:0;transform:translateX(-8px);
  transition:opacity .4s var(--ease),transform .4s var(--ease);
}
.error-page a.dcard:hover::after{opacity:1;transform:translateX(0);}

@media (max-width:560px){
  .err__actions{gap:20px;}
  .err__actions .btn{width:100%;justify-content:center;}
}

@media (prefers-reduced-motion:reduce){
  .err__code,
  .error-page .phead__lead,
  .err__actions{opacity:1!important;transform:none!important;}
}

/* =========================================================
   LEGAL PAGES  (privacy.html, terms.html, cookies.html)
   Long-form prose. Sticky contents rail on the left at
   desktop width, collapsing to a plain stack below 900px.
   ========================================================= */
.legal{
  padding:clamp(60px,8vh,100px) var(--gut) clamp(80px,12vh,140px);
}
.legal__grid{
  display:grid;grid-template-columns:230px minmax(0,760px);
  gap:clamp(40px,6vw,90px);align-items:start;
}

/* ---------- contents rail ---------- */
.legal__toc{position:sticky;top:120px;}
.legal__toc h2{
  font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:18px;font-weight:500;
}
.legal__toc a{
  display:block;font-size:13.5px;line-height:1.35;color:var(--ink-2);
  padding:7px 0 7px 14px;border-left:1px solid var(--line);
  transition:color .35s var(--ease),border-color .35s var(--ease);
}
.legal__toc a:hover,.legal__toc a.is-active{
  color:var(--ink);border-left-color:var(--red);
}

/* ---------- prose ---------- */
.legal__body{max-width:760px;}
.legal__body section{scroll-margin-top:110px;}
.legal__body section + section{
  margin-top:clamp(44px,6vh,70px);
  padding-top:clamp(44px,6vh,70px);border-top:1px solid var(--line);
}
.legal__body h2{
  font-size:clamp(22px,2.4vw,30px);line-height:1.1;margin-bottom:.7em;
}
.legal__body h2 .num{
  display:block;font-family:var(--sans);font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--red);margin-bottom:14px;
}
.legal__body h3{
  font-size:16px;font-weight:500;letter-spacing:-.01em;
  margin:2em 0 .6em;line-height:1.3;
}
.legal__body p{font-size:15.5px;line-height:1.65;color:var(--ink-2);}
.legal__body a:not(.legal__toc a){
  color:var(--ink);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--line);transition:text-decoration-color .3s var(--ease);
}
.legal__body a:hover{text-decoration-color:var(--red);}
.legal__body strong{font-weight:500;color:var(--ink);}

/* bulleted + numbered lists - the base reset strips markers, so
   they are drawn back on here rather than inherited */
.legal__body ul,.legal__body ol{margin:0 0 1.3em;}
.legal__body li{
  position:relative;padding-left:22px;margin-bottom:.65em;
  font-size:15.5px;line-height:1.6;color:var(--ink-2);
}
.legal__body ul > li::before{
  content:'';position:absolute;left:2px;top:.78em;
  width:5px;height:1px;background:var(--red);
}
.legal__body ol{counter-reset:legal-ol;}
.legal__body ol > li{counter-increment:legal-ol;}
.legal__body ol > li::before{
  content:counter(legal-ol) '.';position:absolute;left:0;top:0;
  font-size:13px;color:var(--ink-3);
}

/* ---------- definition table (data / purpose / basis) ---------- */
.legal__table{
  border-top:1px solid var(--line);margin:0 0 1.5em;
}
.legal__table > div{
  display:grid;grid-template-columns:200px 1fr;gap:10px 24px;
  padding:16px 0;border-bottom:1px solid var(--line);
}
.legal__table dt{
  font-size:13px;color:var(--ink);font-weight:500;letter-spacing:-.01em;
}
.legal__table dd{margin:0;font-size:14.5px;line-height:1.55;color:var(--ink-2);}

/* ---------- callout ---------- */
.legal__note{
  background:var(--paper-2);padding:24px 26px;margin:0 0 1.5em;
  border-left:2px solid var(--red);
}
.legal__note p:last-child{margin-bottom:0;}
.legal__note p{font-size:14.5px;}

/* ---------- meta strip under the page title ---------- */
.legal__meta{
  display:flex;flex-wrap:wrap;gap:8px 32px;margin-top:34px;
  padding-top:22px;border-top:1px solid var(--line);
}
.legal__meta div{font-size:12.5px;color:var(--ink-3);}
.legal__meta b{font-weight:400;color:var(--ink);}

@media (max-width:900px){
  .legal__grid{grid-template-columns:1fr;gap:34px;}
  .legal__toc{position:static;padding-bottom:26px;border-bottom:1px solid var(--line);}
  .legal__toc a{display:inline-block;border-left:0;padding:5px 16px 5px 0;}
  .legal__toc a:hover,.legal__toc a.is-active{border-left:0;color:var(--red);}
  .legal__table > div{grid-template-columns:1fr;gap:4px;}
}

/* =========================================================
   RIZER-STUDIO FOOTER TAG
   ========================================================= */
.rz{
  --rz-orange:#E2571F;
  --rz-cream:#F2EFE9;
  --rz-ink:#161513;
  --rz-swap:.34s;

  display:inline-flex;
  align-items:baseline;
  gap:.45em;

  font-family:"Space Grotesk",ui-sans-serif,system-ui,sans-serif;
  font-weight:500;
  font-size:.8125rem;
  line-height:1.4;
  letter-spacing:.02em;

  color:currentColor;
  opacity:.7;

  text-decoration:none;
  white-space:nowrap;
  cursor:pointer;

  padding:.4em .55em;
  margin:-.4em -.55em;
  transition:opacity .28s ease;
}
.rz:hover,.rz:focus-visible{opacity:1;outline:none;}
.rz:focus-visible .rz__mark{outline:2px solid var(--rz-orange);outline-offset:3px;}

.rz__mark{display:inline-flex;align-items:baseline;font-weight:700;letter-spacing:.055em;}
.rz__br{display:inline-block;color:inherit;transition:color var(--rz-swap) ease;}
.rz:hover .rz__br,.rz:focus-visible .rz__br{color:var(--rz-orange);}
.rz__br--r{margin-left:-.055em;}

.rz__slot{
  position:relative;
  display:inline-block;
  overflow:hidden;
  vertical-align:bottom;
  width:var(--rz-w-1,auto);
  transition:width var(--rz-swap) cubic-bezier(.65,0,.35,1);
}
.rz__line{
  display:block;
  transition:transform var(--rz-swap) cubic-bezier(.65,0,.35,1),
             opacity calc(var(--rz-swap) * .6) ease;
}
.rz__line--2,.rz__line--3{position:absolute;inset:0 auto 0 0;width:max-content;}

.rz__line--1{transform:translateY(0);opacity:1;}
.rz__line--2{transform:translateY(-105%);opacity:0;color:var(--rz-cream);}
.rz__line--3{transform:translateY(-105%);opacity:0;color:var(--rz-cream);}

.rz[data-beat="2"] .rz__slot{width:var(--rz-w-2,auto);}
.rz[data-beat="2"] .rz__line--1{transform:translateY(105%);opacity:0;}
.rz[data-beat="2"] .rz__line--2{transform:translateY(0);opacity:1;}

.rz[data-beat="3"] .rz__slot{width:var(--rz-w-3,auto);}
.rz[data-beat="3"] .rz__line--1{transform:translateY(105%);opacity:0;}
.rz[data-beat="3"] .rz__line--2{transform:translateY(105%);opacity:0;}
.rz[data-beat="3"] .rz__line--3{transform:translateY(0);opacity:1;}

.rz__arrow{
  display:inline-block;
  margin-left:.3em;
  color:var(--rz-orange);
  transform:translateX(-.22em);
  opacity:0;
  transition:transform .3s cubic-bezier(.2,.9,.25,1) .06s,opacity .3s ease .06s;
}
.rz[data-beat="3"] .rz__arrow{transform:translateX(0);opacity:1;}

.rz--light .rz__line--2,.rz--light .rz__line--3{color:var(--rz-ink);}

@media (prefers-reduced-motion:reduce){
  .rz__slot,.rz__line,.rz__arrow{transition-duration:.01ms;}
}