/* ==========================================================================
   Tooreen Construction — homepage loader, navigation bar and hero

   Layout and motion carried over from the Tooreen_DEPLOY homepage (London
   skyline video, featured project card, loader), set in the same type and
   forest / ivory / gold colours as the rest of the site.

   Everything here is namespaced (`city-`) so it never collides with the
   older `.hero` and `.tn` rules still used by the other pages.
   ========================================================================== */

:root{
  --ch-forest:#0b211b;
  --ch-forest-deep:#07170f;
  --ch-ivory:#efedda;
  --ch-white:#fafaf6;
  --ch-sage:#c6d0b4;
  --ch-gold:#d5b65f;
  --ch-gold-soft:#dfc45c;
  --ch-gold-deep:#b89a48;
  --ch-gutter:clamp(24px,4.6vw,78px);
  --ch-nav-h:104px;
  --ch-video-fade:1400ms;   /* keep in step with FADE in city-hero.js */
  --ch-ease:cubic-bezier(.22,.75,.18,1);
  --ch-display:"Barlow Condensed","Barlow","Arial Narrow",sans-serif;
  --ch-body:"Manrope","Segoe UI",sans-serif;
}

html{scrollbar-gutter:stable;scroll-padding-top:24px}
body.is-loading{overflow:hidden}

/* ================================================================ LOADER === */

.city-loader{
  position:fixed;
  inset:0;
  z-index:100000;
  display:grid;
  place-items:center;
  background:
    radial-gradient(circle at 50% 42%,rgba(239,237,218,.04),transparent 34%),
    var(--ch-forest-deep);
  color:var(--ch-ivory);
  font-family:var(--ch-body);
  transform:translate3d(0,0,0);
  will-change:transform;
  transition:transform .78s cubic-bezier(.76,0,.24,1);
}

.city-loader::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.16;
  background:repeating-linear-gradient(168deg,transparent 0 22px,rgba(239,237,218,.03) 22px 23px,transparent 23px 47px);
}

.city-loader__inner{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:28px;
  transform:translateY(-2vh);
  transition:transform .78s cubic-bezier(.76,0,.24,1),opacity .42s ease;
}

.city-loader__brand{display:flex;flex-direction:column;align-items:center}

.city-loader__brand strong{
  padding-left:.34em;   /* balances the trailing letter-spacing so it centres */
  font-family:var(--ch-display);
  font-size:clamp(26px,2.5vw,36px);
  line-height:1;
  font-weight:600;
  letter-spacing:.34em;
  text-transform:uppercase;
}

.city-loader__brand span{
  margin-top:10px;
  color:rgba(213,182,95,.8);
  font-size:8px;
  line-height:1;
  font-weight:700;
  letter-spacing:.29em;
  text-transform:uppercase;
}

.city-loader__spinner{
  width:22px;
  height:22px;
  fill:none;
  stroke:var(--ch-gold);
  stroke-width:1.65;
  stroke-linecap:round;
  animation:city-loader-spin .82s linear infinite;
}

@keyframes city-loader-spin{to{transform:rotate(360deg)}}

body.loader-complete .city-loader{transform:translate3d(0,-100%,0);pointer-events:none}
body.loader-complete .city-loader__inner{transform:translateY(-9vh);opacity:.72}

/* ============================================================ NAV BAR === */

.city-nav{
  position:fixed;
  z-index:900;
  top:0;
  left:0;
  right:0;
  height:var(--ch-nav-h);
  padding:0 var(--ch-gutter);
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  border-bottom:1px solid rgba(239,237,218,.08);
  color:var(--ch-white);
  font-family:var(--ch-body);
  transition:transform .28s cubic-bezier(.22,.61,.36,1),background-color .28s ease,border-color .28s ease,box-shadow .28s ease;
  will-change:transform;
}

.city-nav.is-scrolled{
  background:rgba(8,27,21,.92);
  border-bottom-color:rgba(213,182,95,.16);
  box-shadow:0 9px 28px rgba(0,0,0,.14);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
}

.city-nav.is-hidden{transform:translate3d(0,calc(-100% - 8px),0);pointer-events:none}

.city-nav a{text-decoration:none}

.city-nav__logo{
  justify-self:start;
  display:flex;
  align-items:center;
  width:clamp(120px,13vw,180px);
  line-height:0;
}
.city-nav__logo img{display:block;width:100%;height:auto;object-fit:contain}

.city-nav__links{
  display:flex;
  align-items:center;
  gap:34px;
  font-family:var(--ch-display);
  font-size:16px;
  font-weight:600;
  line-height:1;
  letter-spacing:2.2px;
  text-transform:uppercase;
}

.city-nav__links a{position:relative;padding:10px 0;color:var(--ch-ivory)}
.city-nav__links a::after{
  content:"";
  position:absolute;
  left:0;
  right:100%;
  bottom:2px;
  height:2px;
  background:var(--ch-gold);
  transition:right .25s var(--ch-ease);
}
.city-nav__links a:hover::after,
.city-nav__links a[aria-current="page"]::after{right:0}

.city-nav__end{justify-self:end;display:flex;align-items:center;gap:8px}

/* `.city-nav .city-nav__quote` rather than a single class: services.css and
   contact.css reset `.services-page a{font:inherit}`, which would otherwise
   win and strip the button's type */
.city-nav .city-nav__quote{
  min-width:150px;
  height:48px;
  padding:0 22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(213,182,95,.78);
  color:var(--ch-ivory);
  font-family:var(--ch-display);
  font-size:15px;
  font-weight:600;
  line-height:1;
  letter-spacing:2.2px;
  text-transform:uppercase;
  white-space:nowrap;
  transition:background-color .25s var(--ch-ease),color .25s var(--ch-ease),border-color .25s var(--ch-ease);
}
.city-nav__quote:hover{background:var(--ch-gold);border-color:var(--ch-gold);color:var(--ch-forest)}
.city-nav__quote:active{transform:translateY(1px) scale(.99)}

.city-nav a:focus-visible,
.city-nav button:focus-visible{outline:2px solid var(--ch-gold);outline-offset:4px}

/* phone / tablet menu */
.city-nav__toggle{display:none}
.city-nav__panel{display:none}

@media (max-width:920px){
  .city-nav{grid-template-columns:1fr auto}
  .city-nav__links{display:none}

  .city-nav__toggle{
    position:relative;
    display:block;
    width:44px;
    height:48px;
    padding:0;
    border:1px solid rgba(239,237,218,.58);
    background:rgba(239,237,218,.04);
    color:var(--ch-ivory);
    cursor:pointer;
    transition:background .22s ease,border-color .22s ease;
  }
  .city-nav__toggle:hover{background:rgba(239,237,218,.08);border-color:rgba(239,237,218,.82)}
  .city-nav__toggle span,
  .city-nav__toggle::before,
  .city-nav__toggle::after{
    content:"";
    position:absolute;
    left:50%;
    width:18px;
    height:1.5px;
    border-radius:999px;
    background:var(--ch-ivory);
    transform:translateX(-50%);
    transition:transform .24s var(--ch-ease),top .24s var(--ch-ease),opacity .18s ease;
  }
  .city-nav__toggle::before{top:16px}
  .city-nav__toggle span{top:23px}
  .city-nav__toggle::after{top:30px}
  .city-nav__toggle[aria-expanded="true"]{background:rgba(8,27,21,.8);border-color:var(--ch-gold)}
  .city-nav__toggle[aria-expanded="true"] span{opacity:0}
  .city-nav__toggle[aria-expanded="true"]::before{top:23px;transform:translateX(-50%) rotate(45deg)}
  .city-nav__toggle[aria-expanded="true"]::after{top:23px;transform:translateX(-50%) rotate(-45deg)}

  .city-nav__panel{
    position:absolute;
    top:calc(100% - 8px);
    right:var(--ch-gutter);
    width:min(230px,calc(100vw - 40px));
    padding:10px 16px 12px;
    display:block;
    background:rgba(8,27,21,.97);
    border:1px solid rgba(213,182,95,.3);
    box-shadow:0 16px 40px rgba(0,0,0,.3);
    opacity:0;
    visibility:hidden;
    transform:translateY(-9px) scale(.985);
    transform-origin:top right;
    transition:opacity .2s ease,transform .24s var(--ch-ease),visibility 0s linear .24s;
  }
  .city-nav__panel.is-open{opacity:1;visibility:visible;transform:none;transition:opacity .2s ease,transform .24s var(--ch-ease)}
  .city-nav__panel::before{content:"";display:block;width:34px;height:1px;margin:2px 0 6px;background:var(--ch-gold)}
  .city-nav .city-nav__panel a{
    min-height:46px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:12px 0;
    border-bottom:1px solid rgba(239,237,218,.08);
    color:var(--ch-ivory);
    font-family:var(--ch-display);
    font-size:18px;
    font-weight:600;
    line-height:1;
    letter-spacing:2.2px;
    text-transform:uppercase;
  }
  .city-nav__panel a:last-child{border-bottom:0}
  .city-nav__panel a::after{content:"→";color:var(--ch-gold);font-family:var(--ch-body);font-size:16px;letter-spacing:0}
  .city-nav__panel a[aria-current="page"]{color:var(--ch-gold)}
}

@media (max-width:620px){
  :root{--ch-nav-h:80px}
  .city-nav{padding:0 20px}
  .city-nav__logo{width:120px}
  .city-nav .city-nav__quote{min-width:112px;height:42px;padding:0 12px;font-size:14px;letter-spacing:1.6px}
  .city-nav__toggle{width:42px;height:42px}
  .city-nav__toggle::before{top:13px}
  .city-nav__toggle span{top:20px}
  .city-nav__toggle::after{top:27px}
  .city-nav__toggle[aria-expanded="true"]::before,
  .city-nav__toggle[aria-expanded="true"]::after{top:20px}
  .city-nav__panel{right:16px;width:min(220px,calc(100vw - 32px))}
}

@media (max-width:380px){
  .city-nav .city-nav__quote{display:none}
}

/* =============================================================== HERO === */

.city-hero{
  position:relative;
  isolation:isolate;
  min-height:100svh;
  overflow:hidden;
  background:var(--ch-forest-deep);
  color:var(--ch-white);
  font-family:var(--ch-body);
  -webkit-font-smoothing:antialiased;
}

.city-hero__video-stage{
  position:absolute;
  inset:-2%;
  z-index:-4;
  overflow:hidden;
  pointer-events:none;
  opacity:0;
  transition:opacity .6s ease;
}
.city-hero__video-stage.is-ready{opacity:1}

/* two players for the crossfade loop: the incoming clip is raised above the
   outgoing one and fades in over it (see city-hero.js) */
.city-hero__video{
  position:absolute;
  z-index:1;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center center;
  opacity:0;
  transition:opacity var(--ch-video-fade) ease-in-out;
}
.city-hero__video.is-front{z-index:2}
.city-hero__video.is-visible{opacity:1}

/* neutral black shading, a touch lighter than the Tooreen_DEPLOY original:
   darkest behind the copy on the left, clearing towards the right, with a
   soft fade top (under the nav) and bottom */
.city-hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-3;
  background:
    linear-gradient(90deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.5) 32%,rgba(0,0,0,.1) 62%,rgba(0,0,0,.04) 100%),
    linear-gradient(180deg,rgba(0,0,0,.32) 0%,transparent 24%,transparent 68%,rgba(0,0,0,.34) 100%);
}
.city-hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  pointer-events:none;
  background:radial-gradient(circle at 55% 48%,transparent 28%,rgba(0,0,0,.12) 100%);
}

.city-hero a{text-decoration:none}

.city-hero__inner{
  min-height:100svh;
  padding:170px var(--ch-gutter) 74px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
}

.city-hero__content{
  width:min(880px,62vw);
  margin-top:1.5vh;
  transform:translateY(-12px);
}

.city-hero__kicker,
.city-hero__title,
.city-hero__tagline,
.city-hero__subcopy{text-shadow:0 2px 10px rgba(0,0,0,.28),0 10px 30px rgba(0,0,0,.18)}

.city-hero__kicker{
  margin:0 0 24px;
  display:flex;
  align-items:center;
  gap:14px;
  color:var(--ch-sage);
  font-size:11px;
  font-weight:700;
  line-height:1.4;
  letter-spacing:.35em;
  text-transform:uppercase;
}
.city-hero__kicker .slash{color:var(--ch-gold)}

/* `.city-hero .city-hero__title` outranks the site-wide h1 rules in
   styles.css, which also carry their own entrance animation */
.city-hero .city-hero__title{
  margin:0;
  font-family:var(--ch-display);
  font-size:clamp(64px,6.1vw,112px);
  font-weight:700;
  font-style:normal;
  line-height:.9;
  letter-spacing:.005em;
  text-transform:uppercase;
  color:var(--ch-white);
  animation:none;
  text-shadow:0 3px 12px rgba(0,0,0,.34),0 14px 40px rgba(0,0,0,.2);
}
.city-hero .city-hero__title span{display:block;white-space:nowrap;color:var(--ch-white)}
.city-hero .city-hero__title .city-hero__accent{color:var(--ch-gold)}
.city-hero .city-hero__title::after{
  content:"";
  display:block;
  width:76px;
  height:2px;
  margin-top:.22em;
  background:linear-gradient(90deg,var(--ch-gold-soft),var(--ch-gold-deep));
}

/* the promise, set as a second, smaller heading under the gold rule */
.city-hero__tagline{
  margin:26px 0 0;
  font-family:var(--ch-display);
  font-size:clamp(26px,2.1vw,36px);
  font-weight:600;
  line-height:1.05;
  letter-spacing:.03em;
  text-transform:uppercase;
  color:var(--ch-white);
}
.city-hero__tagline-accent{color:var(--ch-gold)}

.city-hero__subcopy{
  width:min(560px,100%);
  margin:14px 0 0;
  color:rgba(235,238,231,.9);
  font-size:clamp(16px,1.2vw,19px);
  line-height:1.6;
  text-wrap:pretty;
}

.city-hero__actions{
  margin-top:32px;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:16px;
}

.city-hero .city-hero__primary,
.city-hero .city-hero__secondary{
  height:60px;
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  border-radius:10px;
  font-size:13px;
  font-weight:700;
  line-height:1;
  letter-spacing:.1em;
  text-transform:uppercase;
  white-space:nowrap;
}

.city-hero__primary{
  min-width:250px;
  padding:0 11px 0 24px;
  gap:22px;
  background:var(--ch-ivory);
  color:var(--ch-forest);
  box-shadow:0 18px 42px rgba(0,0,0,.2);
  transition:transform .25s var(--ch-ease),box-shadow .25s var(--ch-ease),background .25s var(--ch-ease);
}
.city-hero__primary:hover{transform:translateY(-2px);background:#fffef1;box-shadow:0 22px 52px rgba(0,0,0,.25)}
.city-hero__chip{
  flex:none;
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:999px;
  background:rgba(11,33,27,.1);
  color:var(--ch-forest);
  font-size:16px;
  line-height:1;
  transition:background .25s ease,color .25s ease;
}
.city-hero__chip svg{
  display:block;
  width:16px;
  height:16px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.city-hero__primary:hover .city-hero__chip{background:var(--ch-forest);color:var(--ch-gold)}

.city-hero__secondary{
  min-width:210px;
  padding:0 20px 0 23px;
  gap:24px;
  border:1px solid rgba(239,237,218,.68);
  background:rgba(8,27,21,.14);
  color:var(--ch-white);
  transition:transform .25s var(--ch-ease),background .25s ease,border-color .25s ease;
}
.city-hero__secondary:hover{transform:translateY(-2px);background:rgba(239,237,218,.1);border-color:var(--ch-gold)}
.city-hero__arrow{font-size:17px;font-weight:400;line-height:1;transition:transform .25s var(--ch-ease)}
.city-hero__secondary:hover .city-hero__arrow{transform:translateX(3px);color:var(--ch-gold)}

.city-hero__primary:active,
.city-hero__secondary:active{transform:translateY(1px) scale(.99)}

.city-hero a:focus-visible{outline:2px solid var(--ch-gold);outline-offset:4px}

/* scroll cue */
.city-hero__scroll{
  position:absolute;
  left:50%;
  bottom:15px;
  z-index:6;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  transform:translateX(-50%);
  color:rgba(239,237,218,.88);
  font-size:10px;
  font-weight:700;
  line-height:1;
  letter-spacing:.29em;
  text-transform:uppercase;
  white-space:nowrap;
  transition:color .22s ease;
}
.city-hero__scroll:hover{color:var(--ch-gold)}
.city-hero__scroll-line{
  display:block;
  width:1px;
  height:27px;
  background:linear-gradient(to bottom,transparent,rgba(213,182,95,.9));
  transform-origin:top;
  animation:city-scroll-line 1.8s ease-in-out infinite;
}
.city-hero__scroll-line--bottom{
  height:21px;
  background:linear-gradient(to bottom,rgba(213,182,95,.9),transparent);
  animation-delay:.25s;
}
@keyframes city-scroll-line{
  0%,100%{opacity:.35;transform:scaleY(.72)}
  50%{opacity:1;transform:scaleY(1)}
}

/* featured project card — wide screens only */
.city-hero__project{display:none}
@media (min-width:1180px){
  .city-hero__project{
    position:absolute;
    z-index:6;
    right:var(--ch-gutter);
    bottom:max(120px,calc(100% - 100vh + 120px));
    width:324px;
    padding:10px 20px 10px 10px;
    display:grid;
    grid-template-columns:84px 1fr auto;
    align-items:center;
    gap:16px;
    background:rgba(8,27,21,.5);
    border:1px solid rgba(239,237,218,.22);
    -webkit-backdrop-filter:blur(10px);
    backdrop-filter:blur(10px);
    color:var(--ch-ivory);
    transition:background .25s ease,border-color .25s ease;
  }
  .city-hero__project img{display:block;width:84px;height:63px;object-fit:cover}
  .city-hero__project-text{display:block;min-width:0}
  .city-hero__project-label{
    display:block;
    color:var(--ch-gold);
    font:700 9px/1 var(--ch-body);
    letter-spacing:.24em;
    text-transform:uppercase;
    white-space:nowrap;
  }
  .city-hero__project-title{
    display:block;
    margin:8px 0 5px;
    color:var(--ch-white);
    font:600 23px/1 var(--ch-display);
    letter-spacing:.04em;
    text-transform:uppercase;
  }
  .city-hero__project-meta{display:block;color:rgba(239,237,218,.68);font:500 11.5px/1.2 var(--ch-body)}
  .city-hero__project-arrow{color:var(--ch-gold);font-size:16px;transition:transform .25s ease}
  .city-hero__project:hover{background:rgba(8,27,21,.72);border-color:rgba(213,182,95,.6)}
  .city-hero__project:hover .city-hero__project-arrow{transform:translateX(3px)}
}

@media (max-width:900px){
  .city-hero .city-hero__title{font-size:clamp(58px,9.2vw,84px)}
  .city-hero__content{width:min(760px,88vw);transform:translateY(-8px)}
  .city-hero__scroll{display:none}
}

/* phones: the hero is as tall as its content rather than a full screen */
@media (max-width:700px){
  .city-hero,
  .city-hero__inner{min-height:0}
  .city-hero__inner{padding:138px 20px 46px;justify-content:flex-start}
  .city-hero__content{width:100%;margin-top:0;transform:none}
  .city-hero__kicker{margin-bottom:18px}
  .city-hero__tagline{margin-top:22px}
  .city-hero__subcopy{margin-top:12px}
  .city-hero__actions{margin-top:25px}
  .city-hero__video-stage{inset:0}
  .city-hero__video{transform:scale(1.025)}
}

@media (max-width:620px){
  .city-hero .city-hero__title{font-size:clamp(46px,13.4vw,66px);line-height:.92}
  .city-hero .city-hero__title span{white-space:normal}
  .city-hero .city-hero__title::after{width:58px;height:1.5px}
  .city-hero__kicker{font-size:10px;letter-spacing:.29em}
  .city-hero__tagline{font-size:24px}
  .city-hero__tagline > span{display:block}
  .city-hero__subcopy{font-size:15px}
  .city-hero__actions{width:100%;flex-direction:column;align-items:stretch;gap:12px}
  .city-hero .city-hero__primary,
  .city-hero .city-hero__secondary{width:100%;min-width:0;height:56px}
}

@media (max-width:480px){
  .city-hero__kicker{flex-wrap:wrap;row-gap:9px}
  .city-hero__kicker > span{white-space:nowrap}
  .city-hero__kicker > .slash:nth-last-child(2){display:none}
  .city-hero__kicker > span:last-child{flex-basis:100%}
}

/* ======================================================= FIRST VIEW === */
/* `city-motion` is set in <head> only when motion is allowed; the page stays
   fully visible if the script never runs. */

.city-motion .city-nav > :not(.city-nav__panel),
.city-motion .city-hero__kicker,
.city-motion .city-hero__title > span,
.city-motion .city-hero__tagline,
.city-motion .city-hero__subcopy,
.city-motion .city-hero__actions,
.city-motion .city-hero__project{opacity:0;will-change:transform,opacity}

.city-motion .city-nav > :not(.city-nav__panel){
  transform:translate3d(0,-14px,0);
  transition:opacity .7s var(--ch-ease),transform .85s var(--ch-ease);
}
.city-motion .city-hero__kicker,
.city-motion .city-hero__tagline,
.city-motion .city-hero__subcopy,
.city-motion .city-hero__actions{
  transform:translate3d(0,22px,0);
  transition:opacity .72s var(--ch-ease),transform .92s var(--ch-ease);
}
.city-motion .city-hero__title > span{
  padding-bottom:.08em;
  margin-bottom:-.08em;
  transform:translate3d(0,42px,0);
  /* the mask reaches 60px past each line, so the soft text shadow is never
     cut off at the line's edges (that left a faint box behind the words) */
  clip-path:inset(-60px -60px calc(100% + 60px) -60px);
  transition:opacity .78s var(--ch-ease),transform 1.02s cubic-bezier(.16,1,.3,1),clip-path 1.02s cubic-bezier(.16,1,.3,1);
}
.city-motion .city-hero__project{transition:opacity .7s ease}
.city-motion .city-hero .city-hero__title::after{
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .8s var(--ch-ease);
}
.city-motion.city-loaded .city-hero .city-hero__title::after{transform:scaleX(1);transition-delay:.5s}

.city-motion.city-loaded .city-nav > :not(.city-nav__panel),
.city-motion.city-loaded .city-hero__kicker,
.city-motion.city-loaded .city-hero__title > span,
.city-motion.city-loaded .city-hero__tagline,
.city-motion.city-loaded .city-hero__subcopy,
.city-motion.city-loaded .city-hero__actions,
.city-motion.city-loaded .city-hero__project{opacity:1;transform:translate3d(0,0,0)}
.city-motion.city-loaded .city-hero__title > span{clip-path:inset(-60px -60px -60px -60px)}

.city-motion.city-loaded .city-nav__logo{transition-delay:.05s}
.city-motion.city-loaded .city-nav__links{transition-delay:.12s}
.city-motion.city-loaded .city-nav__end{transition-delay:.18s}
.city-motion.city-loaded .city-hero__kicker{transition-delay:.18s}
.city-motion.city-loaded .city-hero__title > span:nth-child(1){transition-delay:.24s}
.city-motion.city-loaded .city-hero__title > span:nth-child(2){transition-delay:.32s}
.city-motion.city-loaded .city-hero__title > span:nth-child(3){transition-delay:.4s}
.city-motion.city-loaded .city-hero__tagline{transition-delay:.46s}
.city-motion.city-loaded .city-hero__subcopy{transition-delay:.54s}
.city-motion.city-loaded .city-hero__actions{transition-delay:.62s}
.city-motion.city-loaded .city-hero__project{transition-delay:.9s}

@media (prefers-reduced-motion:reduce){
  .city-loader,
  .city-loader__inner,
  .city-nav{transition:none}
  .city-loader__spinner,
  .city-hero__scroll-line{animation:none}
}

.skip-link{z-index:100001}

/* ===================================================== SERVICES HERO === */
/* The Tooreen_DEPLOY services hero: the same layout and type as the homepage
   hero, over a still photograph instead of the video, with a breadcrumb and
   a small location note. */

.city-hero__image-stage{
  position:absolute;
  inset:-2%;
  z-index:-4;
  overflow:hidden;
  pointer-events:none;
}
.city-hero__image{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  max-width:none;
  display:block;
  object-fit:cover;
  object-position:center center;
  transform:scale(1.035);
}
.city-hero--services .city-hero__image{filter:saturate(.76) contrast(1.025) brightness(.73)}
@media (prefers-reduced-motion:no-preference){
  .city-hero__image{animation:city-image-drift 12s cubic-bezier(.22,.75,.18,1) both}
}
@keyframes city-image-drift{
  from{transform:scale(1.075) translate3d(0,8px,0)}
  to{transform:scale(1.035) translate3d(0,0,0)}
}

/* the photograph is already darkened, so the shading is lighter at the left */
.city-hero--services::before{
  background:
    linear-gradient(90deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.58) 18%,rgba(0,0,0,.4) 36%,rgba(0,0,0,.2) 58%,rgba(0,0,0,.1) 100%),
    linear-gradient(180deg,rgba(0,0,0,.26) 0%,transparent 28%,transparent 72%,rgba(0,0,0,.34) 100%);
}

.city-hero__breadcrumb{
  position:absolute;
  z-index:6;
  top:calc(var(--ch-nav-h) + 14px);
  left:var(--ch-gutter);
  display:flex;
  align-items:center;
  gap:10px;
  color:rgba(239,237,218,.7);
  font-family:var(--ch-body);
  font-size:10px;
  font-weight:700;
  line-height:1;
  letter-spacing:.24em;
  text-transform:uppercase;
}
.city-hero .city-hero__breadcrumb a{color:rgba(239,237,218,.78);font:inherit;transition:color .2s ease}
.city-hero .city-hero__breadcrumb a:hover{color:var(--ch-white)}
.city-hero__breadcrumb i{font-style:normal;color:var(--ch-gold)}
.city-hero__breadcrumb [aria-current="page"]{color:var(--ch-white)}

.city-hero__note{
  position:absolute;
  z-index:6;
  right:var(--ch-gutter);
  bottom:27px;
  margin:0;
  color:rgba(239,237,218,.52);
  font-family:var(--ch-body);
  font-size:9px;
  font-weight:700;
  line-height:1.7;
  letter-spacing:.24em;
  text-align:right;
  text-transform:uppercase;
}

@media (max-width:900px){
  .city-hero__note{display:none}
}
@media (max-width:620px){
  .city-hero__breadcrumb{left:20px;font-size:9px}
}

.city-motion .city-hero__breadcrumb,
.city-motion .city-hero__note{opacity:0;transition:opacity .7s ease}
.city-motion.city-loaded .city-hero__breadcrumb{opacity:1;transition-delay:.12s}
.city-motion.city-loaded .city-hero__note{opacity:1;transition-delay:.7s}

/* ===================================================== PROJECTS HERO === */
/* The Tooreen_DEPLOY gallery hero: the Thames photograph, left-weighted
   shading, and a row of jump links in place of buttons. */

.city-hero--projects::before{
  background:
    linear-gradient(90deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.46) 35%,rgba(0,0,0,.08) 75%),
    linear-gradient(180deg,rgba(0,0,0,.3) 0%,transparent 30%,transparent 72%,rgba(0,0,0,.3) 100%);
}

.city-hero__jump{
  max-width:700px;
  margin-top:34px;
  padding-top:22px;
  display:flex;
  flex-wrap:wrap;
  gap:14px 34px;
  border-top:1px solid rgba(239,237,218,.26);
}
.city-hero .city-hero__jump a{
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:var(--ch-ivory);
  font-family:var(--ch-body);
  font-size:12px;
  font-weight:700;
  line-height:1;
  letter-spacing:.14em;
  text-transform:uppercase;
  transition:color .2s ease,transform .25s var(--ch-ease);
}
.city-hero__jump b{color:var(--ch-gold);font-weight:700}
.city-hero__jump-arrow{color:var(--ch-gold);font-size:14px;letter-spacing:0;transition:transform .25s var(--ch-ease)}
.city-hero .city-hero__jump a:hover{color:var(--ch-white);transform:translateY(-2px)}
.city-hero__jump a:hover .city-hero__jump-arrow{transform:translate(2px,-2px)}
.city-hero__jump a:last-child:hover .city-hero__jump-arrow{transform:translateY(2px)}

.city-motion .city-hero__jump{
  opacity:0;
  transform:translate3d(0,22px,0);
  transition:opacity .72s var(--ch-ease),transform .92s var(--ch-ease);
}
.city-motion.city-loaded .city-hero__jump{opacity:1;transform:translate3d(0,0,0);transition-delay:.56s}

@media (max-width:620px){
  .city-hero__jump{flex-direction:column;gap:16px;margin-top:26px}
}

/* ================================================= PAGE RESET GUARD === */
/* projects.css resets `.projects-page p{margin:0;line-height:1.7}`, which
   outranks the single-class hero rules above; restate the hero's spacing. */
.projects-page .city-hero__kicker{margin:0 0 24px;line-height:1.4}
.projects-page .city-hero__subcopy{margin:14px 0 0;line-height:1.6}

@media (max-width:700px){
  .projects-page .city-hero__kicker{margin-bottom:18px}
  .projects-page .city-hero__subcopy{margin-top:12px}
}

/* ====================================================== CONTACT HERO === */
/* The Tooreen_DEPLOY contact hero: aerial London photograph, one call to
   action, the featured project card and a signed-off note. */

.city-hero--contact::before{
  background:
    linear-gradient(90deg,rgba(0,0,0,.78) 0%,rgba(0,0,0,.52) 35%,rgba(0,0,0,.08) 73%),
    linear-gradient(0deg,rgba(0,0,0,.4) 0%,transparent 40%),
    linear-gradient(180deg,rgba(0,0,0,.26) 0%,transparent 24%);
}

/* a short gold rule above the note, as on the original signature */
.city-hero__note--signed::before{
  content:"";
  display:block;
  width:22px;
  height:2px;
  margin:0 0 12px auto;
  background:var(--ch-gold);
}

/* ======================================================= NAV: PHONE === */
/* "Speak to us" + the number, as on the green site's original header.
   Full at wide sizes; the label drops first, then it becomes an icon
   button (the number stays readable to screen readers). */

.city-nav .city-nav__call{
  display:inline-flex;
  align-items:center;
  gap:11px;
  margin-right:clamp(10px,1.6vw,26px);
  color:var(--ch-ivory);
  text-decoration:none;
  transition:background-color .22s ease,border-color .22s ease;
}
.city-nav__call-ico{
  width:16px;
  height:16px;
  flex:none;
  fill:var(--ch-gold);
  transition:transform .42s cubic-bezier(.23,1,.32,1);
}
.city-nav__call:hover .city-nav__call-ico{transform:rotate(-14deg) scale(1.08)}
.city-nav__call-text{display:grid;gap:4px}
.city-nav__call-text em{
  font-family:var(--ch-body);
  font-style:normal;
  font-size:8px;
  font-weight:700;
  line-height:1.1;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:rgba(213,182,95,.9);
}
.city-nav__call-text b{
  font-family:var(--ch-display);
  font-size:19px;
  font-weight:600;
  line-height:1;
  letter-spacing:.6px;
  white-space:nowrap;
  color:var(--ch-white);
}
.city-nav__call-text b::after{
  content:"";
  display:block;
  height:1px;
  margin-top:4px;
  background:var(--ch-gold);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .34s cubic-bezier(.23,1,.32,1);
}
.city-nav__call:hover .city-nav__call-text b::after{transform:scaleX(1)}

@media (max-width:1280px){
  .city-nav__call-text em{display:none}
  .city-nav__call-text b{font-size:17px}
}

@media (max-width:1200px){
  .city-nav .city-nav__call{
    width:44px;
    height:48px;
    margin-right:0;
    justify-content:center;
    border:1px solid rgba(239,237,218,.38);
  }
  .city-nav .city-nav__call:hover{border-color:var(--ch-ivory);background:rgba(239,237,218,.08)}
  .city-nav__call-ico{width:18px;height:18px}
  .city-nav__call-text{
    position:absolute;
    width:1px;
    height:1px;
    overflow:hidden;
    clip:rect(0 0 0 0);
    white-space:nowrap;
  }
}

@media (max-width:620px){
  .city-nav .city-nav__call{width:42px;height:42px}
}

/* ============================================ SCROLL PROGRESS + TO TOP === */

/* a thin gold line across the very top showing how far down the page you are */
.site-progress{
  position:fixed;
  z-index:950;
  top:0;
  left:0;
  right:0;
  height:3px;
  pointer-events:none;
  background:rgba(11,33,27,.18);
}
.site-progress span{
  display:block;
  height:100%;
  background:linear-gradient(90deg,var(--ch-gold-deep),var(--ch-gold-soft));
  box-shadow:0 0 8px rgba(213,182,95,.45);
  transform:scaleX(0);
  transform-origin:left center;
  will-change:transform;
}

/* back to top: a small green-and-gold circle stacked above the WhatsApp button */
.site-to-top{
  position:fixed;
  z-index:70;
  right:calc(clamp(16px,2.2vw,30px) + 5px);
  bottom:calc(clamp(16px,2.2vw,30px) + 54px + 12px);
  width:44px;
  height:44px;
  padding:0;
  display:grid;
  place-items:center;
  border:1px solid rgba(213,182,95,.62);
  border-radius:50%;
  background:rgba(11,43,33,.92);
  color:var(--ch-ivory);
  box-shadow:0 10px 24px rgba(8,37,29,.28);
  cursor:pointer;
  opacity:0;
  visibility:hidden;
  transform:translateY(10px);
  transition:opacity .3s ease,visibility 0s linear .3s,transform .4s var(--ch-ease),background-color .22s ease,color .22s ease,border-color .22s ease;
}
.site-to-top.is-visible{
  opacity:1;
  visibility:visible;
  transform:none;
  transition-delay:0s;
}
.site-to-top svg{
  width:18px;
  height:18px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
  transition:transform .3s var(--ch-ease);
}
/* the doubled class outranks page resets such as `.projects-page button{color:inherit}` */
.site-to-top.site-to-top{color:var(--ch-ivory)}
.site-to-top.site-to-top:hover{background:var(--ch-gold);border-color:var(--ch-gold);color:var(--ch-forest)}
.site-to-top:hover svg{transform:translateY(-2px)}
.site-to-top:focus-visible{outline:2px solid var(--ch-gold);outline-offset:4px}

/* contact page, phones: rises with the WhatsApp button above the brief bar */
.wa-lifted .site-to-top.is-visible{transform:translateY(calc(-1 * var(--wa-lift,0px)))}

@media (hover:none){
  .site-to-top{right:calc(clamp(16px,2.2vw,30px) + 4px);bottom:calc(clamp(16px,2.2vw,30px) + 52px + 12px)}
}
@media (prefers-reduced-motion:reduce){
  .site-to-top,.site-to-top svg{transition:opacity .01s linear,visibility 0s}
}
@media print{.site-progress,.site-to-top{display:none}}

/* footer policy links (were plain text) */
.footer-policies a{color:inherit;text-decoration:none;border-bottom:1px solid transparent;padding-bottom:2px;transition:color .2s ease,border-color .2s ease}
.footer-policies a:hover{color:var(--ch-gold);border-bottom-color:rgba(213,182,95,.6)}
.footer-policies a:focus-visible{outline:2px solid var(--ch-gold);outline-offset:4px}

/* ======================================================= COMPACT HERO === */
/* shorter photo hero for utility pages (privacy, terms, 404) */
.city-hero--compact,
.city-hero--compact .city-hero__inner{min-height:0}
.city-hero--compact .city-hero__inner{
  min-height:clamp(480px,66svh,660px);
  padding-top:170px;
  padding-bottom:clamp(56px,7vh,84px);
  justify-content:flex-end;
}
.city-hero--compact .city-hero__title{font-size:clamp(56px,5.4vw,96px)}
.city-hero--compact::before{
  background:
    linear-gradient(90deg,rgba(0,0,0,.78) 0%,rgba(0,0,0,.56) 38%,rgba(0,0,0,.16) 72%,rgba(0,0,0,.08) 100%),
    linear-gradient(180deg,rgba(0,0,0,.3) 0%,transparent 30%,transparent 62%,rgba(0,0,0,.4) 100%);
}
.city-hero--notfound .city-hero__inner{min-height:100svh;justify-content:center}
@media (max-width:700px){
  .city-hero--compact .city-hero__inner{min-height:0;padding:138px 20px 46px}
}

/* ================================================ PHONES: READABILITY === */
/* The desktop design uses very small uppercase labels (7–9px). On a phone
   they drop below comfortable reading size, so they get a 10px floor here,
   content lists get a proper body size, and small links get a larger tap
   area without shifting the layout. `body …` so these win over the page
   stylesheets, which load earlier. */
@media (max-width:700px){
  /* shared */
  body .city-hero__breadcrumb,
  body .footer-policies,
  body .footer-policies a,
  body .footer-location{font-size:10px}

  /* homepage */
  body .section-kicker,
  body .services-signoff,
  body .service-tags,
  body .service-visual > span,
  body .about-motto,
  body .about-cta,
  body .projects-cta,
  body .project-card-media > span,
  body .project-link,
  body .projects-signoff,
  body .process-footer span,
  body .process-footer a,
  body .micro-label{font-size:10px}

  /* services */
  body .services-label,
  body .s-stage-label,
  body .s-panel-eyebrow,
  body .s-panel-note,
  body .s-index-count,
  body .s-index-spine > span,
  body .s-index-foot span,
  body .s-prog-hint,
  body .s-prog-track-label,
  body .s-prog-note span,
  body .s-contact-call span{font-size:10px}
  body .s-panel-points li{font-size:11px;letter-spacing:.08em;line-height:1.5}

  /* projects */
  body .feature-before span,
  body .feature-after span,
  body .feature-benefits span,
  body .inline-link,
  body .project-type,
  body .collection-foot span,
  body .closer-note-aside,
  body .photo-action,
  body .projects-page .label,
  body .kitchen-process-step span,
  body .kitchen-foot span{font-size:10px}

  /* contact */
  body .c-route-k,
  body .c-box-step span,
  body .c-preview-k,
  body .c-preview-foot span,
  body .c-dock-k{font-size:10px}

  /* larger tap areas: padding added, the same amount taken back as margin */
  body .city-hero__breadcrumb a{padding:12px 4px;margin:-12px -4px}
  body .footer-policies a{display:inline-block;padding:10px 0;margin:-10px 0}
  body .city-hero__jump a{padding:6px 0;margin:-6px 0}
  body .project-link{padding:10px 0;margin:-10px 0}
}

/* homepage: a still frame of the skyline video, shown straight away and left
   in place when the video is skipped (data-saver, slow connection, reduced motion) */
.city-hero__poster{
  position:absolute;
  z-index:-5;
  inset:-2%;
  width:104%;
  height:104%;
  max-width:none;
  object-fit:cover;
  object-position:center center;
  pointer-events:none;
}
@media (max-width:700px){
  .city-hero__poster{inset:0;width:100%;height:100%;transform:scale(1.025)}
}

/* Phones, second tier: labels the page stylesheets size with two-class or
   !important rules. Repeating the class (.x.x) outranks those without
   resorting to IDs. */
@media (max-width:700px){
  html body .about-section .section-kicker.section-kicker,
  html body .services-intro > .section-kicker.section-kicker,
  html body .service-directory .service-tags.service-tags,
  html body .story-bottom .micro-label.micro-label,
  html body .contact-layout .micro-label.micro-label,
  html body .service-visual.service-visual > span,
  html body .s-index-count.s-index-count,
  html body .s-index-spine figcaption span,
  html body .s-index-foot.s-index-foot span,
  html body .s-prog-hint.s-prog-hint,
  html body .collection-copy .inline-link.inline-link,
  html body .card-caption .label.label,
  html body .care-caption .label.label,
  html body .intro-top .label.label,
  html body .feature-topline .label.label,
  html body .archive-contact > .label.label{font-size:10px}
  html body .projects-signoff.projects-signoff,
  html body .s-prog-hint.s-prog-hint,
  html body .s-index-count.s-index-count{font-size:10px!important}
}

/* ====================================================== PHONES: HEROES === */
/* On phones every hero fills the screen: the words sit at the top, just
   under the bar, on a fade that clears downwards so the photograph or video
   shows below, with one button and a scroll cue. The second button ("Get a
   quote" is already in the bar), the breadcrumb and the extra jump links are
   left out. `.city-hero.city-hero` outranks the page-specific hero rules. */
.city-hero__scroll--added{display:none}

@media (max-width:700px){
  .city-hero.city-hero,
  .city-hero.city-hero .city-hero__inner{min-height:100vh;min-height:100svh}
  .city-hero.city-hero .city-hero__inner{justify-content:flex-start;padding:104px 20px 100px}
  .city-hero.city-hero::before{
    background:linear-gradient(180deg,rgba(0,0,0,.74) 0%,rgba(0,0,0,.6) 38%,rgba(0,0,0,.36) 62%,rgba(0,0,0,.1) 80%,rgba(0,0,0,.38) 100%);
  }

  .city-hero.city-hero .city-hero__breadcrumb,
  .city-hero.city-hero .city-hero__secondary,
  .city-hero--projects.city-hero--projects .city-hero__jump{display:none}
  /* the 404 page keeps its jump links, minus the second route to the quote */
  .city-hero--notfound .city-hero__jump a:last-child{display:none}

  /* the kicker stays on one line */
  .city-hero.city-hero .city-hero__kicker{flex-wrap:nowrap;gap:7px;margin-bottom:16px;font-size:10px;letter-spacing:.15em}
  .city-hero.city-hero .city-hero__kicker > span{white-space:nowrap}
  .city-hero.city-hero .city-hero__kicker > .slash:nth-last-child(2){display:inline}
  .city-hero.city-hero .city-hero__kicker > span:last-child{flex-basis:auto}

  .city-hero.city-hero .city-hero__title{font-size:clamp(46px,13.6vw,62px);line-height:.92}
  .city-hero.city-hero .city-hero__tagline{margin-top:20px;font-size:23px}
  .city-hero.city-hero .city-hero__subcopy{margin-top:12px;font-size:15px;line-height:1.55}
  .city-hero.city-hero .city-hero__actions{margin-top:24px}
  .city-hero.city-hero .city-hero__jump{margin-top:22px;padding-top:18px}

  .city-hero.city-hero .city-hero__scroll{display:flex;bottom:18px;gap:7px;padding:6px 12px;font-size:10px;letter-spacing:.3em}
  .city-hero.city-hero .city-hero__scroll-line{height:16px}
  .city-hero.city-hero .city-hero__scroll-line--bottom{height:12px}
}
@media (max-width:370px){
  .city-hero.city-hero .city-hero__kicker{gap:5px;letter-spacing:.1em}
}
/* the very narrowest phones: the last kicker item drops to its own line */
@media (max-width:350px){
  .city-hero.city-hero .city-hero__kicker{flex-wrap:wrap;row-gap:8px}
  .city-hero.city-hero .city-hero__kicker > .slash:nth-last-child(2){display:none}
  .city-hero.city-hero .city-hero__kicker > span:last-child{flex-basis:100%}
}

/* ======================================================= ACCREDITATION === */
/* "Fully insured / SafeContractor approved" in every footer, with the company
   registration line under the copyright. The SafeContractor logo is optional:
   until assets/badges/safecontractor-approved.webp exists, a gold shield stands
   in (city-hero.js adds .has-badge once the logo loads). */
[data-badge]{position:relative}
[data-badge]:not(.has-badge) img[data-optional]{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
[data-badge].has-badge [class$="__icon"]{display:none}

.site-footer .footer-connect{flex-direction:column;align-items:center;justify-content:center;gap:18px}
.footer-accreditation{display:flex;align-items:center;gap:12px;text-align:left}
.footer-accreditation__badge{flex:none;width:58px;height:58px;border-radius:50%;object-fit:contain;background:#fff}
.footer-accreditation__icon{flex:none;display:grid;place-items:center;width:42px;height:42px;border:1px solid rgba(213,182,95,.6);border-radius:50%;color:var(--ch-gold)}
.footer-accreditation__icon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.site-footer .footer-accreditation p{display:grid;gap:4px;margin:0;width:auto;order:0}
.footer-accreditation strong{color:#f3f1e5;font-family:var(--ch-display);font-size:18px;font-weight:600;line-height:1;letter-spacing:.06em;text-transform:uppercase}
.footer-accreditation span{color:var(--ch-gold);font-family:var(--ch-body);font-size:10px;font-weight:700;line-height:1.3;letter-spacing:.16em;text-transform:uppercase}

.site-footer .footer-registration{display:block;max-width:760px;margin-top:6px;color:rgba(200,212,201,.66);font-size:11px;line-height:1.55}

@media (max-width:1000px){
  .site-footer .footer-connect{display:flex;flex-direction:row;align-items:center;justify-content:space-between}
}
@media (max-width:600px){
  .site-footer .footer-connect{flex-direction:column;align-items:flex-start;gap:24px}
}
/* the homepage sets `.homepage img{width:100%;object-fit:cover}`; keep the logo round and whole */
.site-footer .footer-accreditation .footer-accreditation__badge{width:58px;height:58px;max-width:none;object-fit:contain}

/* ======================================================= SITE CREDIT === */
/* The designer credit: a slim strip under the legal line on every page,
   quiet enough not to compete with Tooreen's own brand. */
.footer-credit{
  display:flex;
  justify-content:center;
  margin-top:22px;
  padding-top:14px;
  border-top:1px solid rgba(232,234,215,.12);
}
.site-footer .footer-credit a{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:32px;
  padding:4px 2px;
  color:rgba(216,224,214,.58);
  font-family:var(--ch-body);
  font-size:10px;
  font-weight:600;
  line-height:1;
  letter-spacing:.2em;
  text-decoration:none;
  text-transform:uppercase;
  transition:color .2s ease;
}
.site-footer .footer-credit strong{
  color:#efedda;
  font-weight:700;
  letter-spacing:.24em;
  transition:color .2s ease;
}
.footer-credit__arrow{
  color:var(--ch-gold);
  font-size:12px;
  letter-spacing:0;
  transition:transform .25s var(--ch-ease);
}
.site-footer .footer-credit a:hover{color:rgba(239,237,218,.86)}
.site-footer .footer-credit a:hover strong{color:var(--ch-gold)}
.footer-credit a:hover .footer-credit__arrow{transform:translate(2px,-2px)}
.footer-credit a:focus-visible{outline:2px solid var(--ch-gold);outline-offset:4px}

.visually-hidden{
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
}

/* Arrows and symbols keep their plain text form; phones otherwise fall back
   to the colour emoji font (the characters also carry U+FE0E in the markup). */
body{font-variant-emoji:text}