/* The site's chrome: the colour tokens, the base typography, and the header every
 page wears.
 
 This was inline in index.html while index.html was the whole site. It is not any
 more, and the area pages had a second copy of it -- which is how they ended up with
 a header that looked nearly but not quite right: a burger that appeared at a
 different width, a logo a few pixels shorter, and a bar that did not follow the page
 down into the evening because it was missing the two custom properties the theming
 engine writes.
 
 One copy now. The tokens here are daylight values and are meant to be overwritten:
 assets/theme.js rewrites them on :root from the real position of the sun, so any
 page that links this file and loads that script gets the whole day for free.
 
 Loaded before assets/theme.css, which is loaded before a page's own stylesheet --
 the same order these rules resolved in when they were all one inline block. */

:root{
  --ink:#0B2A4A;
  --ink-soft:#294A6B;
  --sky:#3E8FC1;
  --sky-deep:#1F6E9E;
  --ice:#DCEEF5;
  --ice-soft:#EFF7FA;
  --stone:#6B6459;
  --gold:#F2B705;
  /* The hard shadow under .btn-gold and the halo on the "Wakefield now" dot used
     to be fixed hexes derived from the brand gold. The season now moves --gold
     (see SEASONS in the theming script), so both have to move with it or a spring
     leaf-green button sits on a mustard shadow. */
  --gold-shade:#C99500;
  --gold-glow:rgba(242,183,5,0.25);
  --navy:#0B2A4A;
  /* Text that sits on --navy (the trust strip, the CTA band's lede). Seasonal,
     because --navy itself becomes forest green / chestnut / midnight ice. */
  --trust-ink:#DCEEF5;
  /* The heatwave chart is data, not decoration: its "hottest year" bar stays the
     same warm gold-to-red whatever the season, so a green spring --gold can't
     recolour a statement about heat. */
  --heat-warm:#F2B705;
  --heat-hot:#C0392B;
  --paper:#FFFFFF;
  --white:#FFFFFF;
  --line:#C9DCE4;
  --radius:14px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;color-scheme:light dark;background:var(--paper);}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Inter',sans-serif;
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.display{
  font-family:'Bricolage Grotesque',sans-serif;
  font-weight:700;
  letter-spacing:-0.01em;
  color:var(--ink);
  margin:0;
}
.mono{font-family:'JetBrains Mono',monospace;}
a{color:inherit;}
img{max-width:100%;display:block;}
.wrap{max-width:1180px;margin:0 auto;padding:0 28px;}
.eyebrow{
  font-family:'JetBrains Mono',monospace;
  font-size:0.78rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--sky-deep);
  font-weight:600;
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:14px;
}
.eyebrow::before{
  content:"";
  width:22px;height:2px;background:var(--gold);display:inline-block;
}

/* ---------- HEADER ---------- */
header{
  position:sticky; top:0; z-index:50;
  background:var(--dt-header-bg, rgba(247,249,250,0.9));
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.nav{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 28px;max-width:1180px;margin:0 auto;
}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;flex-shrink:0;}
.brand img{
  width:auto;height:88px;display:block;
  filter:var(--dt-logo-filter, none);
  transition:filter 6s ease;
}
/* ---------- THE MENU ----------
   Five entries and the quote button rather than seven links beside three contact
   routes. The sections are still all reachable -- they moved into two dropdowns,
   Services (what we do, and why it is worth doing) and Contact (every way to reach
   us) -- so the row has room for an icon on each entry and a Yorkshire hello on
   hover, and the burger no longer has to take over at the full 1180px cap. */
nav.links{display:flex;gap:4px;align-items:center;flex-wrap:nowrap;}
.nav-item{position:relative;}
.nav-link{
  position:relative;
  display:inline-flex;align-items:center;gap:7px;
  padding:9px 13px;border-radius:999px;
  background:none;border:0;cursor:pointer;
  font:inherit;font-weight:600;font-size:0.92rem;
  color:var(--ink-soft);text-decoration:none;white-space:nowrap;
  transition:background .18s ease, color .18s ease;
}
.nav-link:hover,.nav-link:focus-visible,.nav-item.open > .nav-link{
  background:var(--ice-soft);color:var(--sky-deep);
}
.nav-link:focus-visible,.nav-menu-item:focus-visible{outline:2px solid var(--sky);outline-offset:2px;}
.nav-ico{font-size:1.05em;line-height:1;display:inline-block;transition:transform .25s cubic-bezier(.3,1.6,.5,1);}
.nav-link:hover .nav-ico{transform:translateY(-2px) rotate(-8deg) scale(1.15);}
.nav-caret{
  width:7px;height:7px;margin-left:1px;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:translateY(-2px) rotate(45deg);transition:transform .2s ease;
}
.nav-item.open > .nav-link .nav-caret{transform:translateY(1px) rotate(225deg);}

/* The hello. A speech bubble in the brand gold that pops up over an entry on hover,
   in the voice the rest of the page is written in. Pointer-hover only: on a phone
   there is no hover to trigger it, and a bubble left behind by a tap would sit over
   the menu it had just opened. */
@media (hover:hover) and (min-width:901px){
  [data-hello]::after{
    content:attr(data-hello);
    position:absolute;left:50%;bottom:calc(100% + 6px);
    padding:4px 10px;border-radius:10px 10px 10px 2px;
    background:var(--gold);color:var(--navy);
    font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:0.78rem;
    white-space:nowrap;pointer-events:none;
    box-shadow:0 3px 0 var(--gold-shade);
    opacity:0;transform:translate(-30%,6px) scale(.8) rotate(-4deg);transform-origin:bottom left;
    transition:opacity .15s ease, transform .25s cubic-bezier(.3,1.6,.5,1);
  }
  [data-hello]:hover::after{opacity:1;transform:translate(-30%,0) scale(1) rotate(-4deg);}
  .nav-item.open > [data-hello]::after{opacity:0;}
}

/* The dropdowns. Opened by click (assets/nav.js toggles .open and aria-expanded)
   and, where there is a pointer, by hover as well; the transparent ::before bridges
   the gap under the button so the menu does not close on the way down to it. */
.nav-menu{
  position:absolute;top:calc(100% + 10px);left:50%;z-index:60;
  min-width:290px;padding:8px;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:0 18px 40px -18px rgba(11,42,74,0.45);
  display:grid;gap:2px;
  opacity:0;visibility:hidden;transform:translate(-50%,-6px);
  transition:opacity .16s ease, transform .2s ease, visibility 0s linear .2s;
}
.nav-menu::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px;}
.nav-item.open > .nav-menu{
  opacity:1;visibility:visible;transform:translate(-50%,0);
  transition:opacity .16s ease, transform .2s ease, visibility 0s;
}
@media (hover:hover) and (min-width:901px){
  .nav-item:hover > .nav-menu{
    opacity:1;visibility:visible;transform:translate(-50%,0);
    transition:opacity .16s ease, transform .2s ease, visibility 0s;
  }
  .nav-item:hover > .nav-link{background:var(--ice-soft);color:var(--sky-deep);}
}
.nav-menu-item{
  display:flex;align-items:center;gap:12px;
  padding:10px 12px;border-radius:10px;
  text-decoration:none;color:var(--ink);
  transition:background .15s ease, transform .15s ease;
}
.nav-menu-item:hover{background:var(--ice-soft);transform:translateX(3px);}
.nav-menu-ico{
  flex-shrink:0;width:38px;height:38px;border-radius:10px;
  display:grid;place-items:center;font-size:1.15rem;
  background:var(--ice-soft);border:1px solid var(--line);color:var(--sky-deep);
}
.nav-menu-item:hover .nav-menu-ico{background:var(--paper);}
.nav-menu-item strong{display:block;font-weight:700;font-size:0.92rem;line-height:1.25;}
.nav-menu-item small{display:block;font-size:0.8rem;color:var(--ink-soft);line-height:1.35;}
.nav-quote{position:relative;margin-left:10px;white-space:nowrap;}

@media (prefers-reduced-motion: reduce){
  .nav-ico,.nav-menu,.nav-menu-item,[data-hello]::after{transition:none !important;}
}
/* Sized in ems so the mark tracks whatever text it sits beside, and filled with
   currentColor so it takes that text's colour rather than needing a rule per
   placement. The one exception is the quote panel, which gets brand green. */
.wa-ico,.tt-ico{
  width:1.05em;height:1.05em;flex-shrink:0;
  fill:currentColor;vertical-align:-0.16em;
}
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:11px 22px;border-radius:999px;
  font-weight:700;font-size:0.92rem;text-decoration:none;
  border:2px solid transparent;cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease;
}
.btn:hover{transform:translateY(-2px);}
.btn-gold{background:var(--gold);color:var(--navy);box-shadow:0 4px 0 var(--gold-shade);}
.btn-gold:hover{box-shadow:0 6px 0 var(--gold-shade);}
.btn-outline{background:transparent;border-color:var(--ink);color:var(--ink);}
.btn-outline:hover{background:var(--ink);color:var(--white);}
.btn-sky{background:var(--sky-deep);color:var(--white);box-shadow:0 4px 0 #144a68;}
.burger{display:none;background:none;border:none;cursor:pointer;padding:8px;}
.burger span{display:block;width:24px;height:2px;background:var(--ink);margin:5px 0;transition:transform .2s ease, opacity .2s ease;}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0;}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
/* Where the burger takes over. Five entries and a button measure a little under
   800px beside the logo, so the row holds down to tablet width; below that the
   menu drops into a panel and each dropdown opens in place inside it. */
@media (max-width: 900px){
  .brand img{width:auto;height:70px;}
  nav.links{
    position:absolute;top:100%;left:0;right:0;background:var(--paper);
    flex-direction:column;align-items:stretch;padding:14px 20px 22px;border-bottom:1px solid var(--line);
    display:none;gap:4px;max-height:calc(100vh - 92px);overflow-y:auto;
    box-shadow:0 18px 30px -20px rgba(11,42,74,0.4);
  }
  nav.links.show{display:flex;}
  .nav-link{width:100%;justify-content:flex-start;padding:12px 14px;font-size:1rem;}
  .nav-caret{margin-left:auto;}
  .nav-menu{
    position:static;transform:none;min-width:0;
    box-shadow:none;border:0;background:none;padding:0 0 0 14px;
    display:none;opacity:1;visibility:visible;
  }
  .nav-menu::before{display:none;}
  .nav-item.open > .nav-menu{display:grid;transform:none;}
  .nav-quote{margin:10px 0 0;justify-content:center;}
  .burger{display:block;}
}