/* ============================================================================
   HIS HEADER — Header.svg, to his own coordinates.
   ==========================================================================
   The first pass built this as a flex row: logo hard left, nav pushed right
   with margin-left:auto, button at the edge. That is a header, and it is not
   HIS header — his lockup sits a fifth of the way in and his nav and button
   sit well short of the right edge, and a row that fills the bar can never
   land on either. Everything below is placed at the percentage his file puts
   it at, so the bar is his drawing with live type in it.

   HIS NUMBERS. The file is 1923.11 across with the bar 114.28 of the 158.15
   tall (the rest is the shadow), and everything in it is:

     bar        114.28 / 1923.11  =  5.943% of the window's WIDTH
     moon       centred at 5.82% across
     lockup     x 18.49%, baseline 49.5% of the bar
     rule       18.49% -> 35.20%, at 58.6% of the bar, 1.44 tall, #29abe2
     tagline    x 17.94%, baseline 77.2% of the bar, 12.97 = 11.35% of it
     nav        x 56.66%, baseline 55.4% of the bar, 21.11 = 18.47% of it
     CONTACT    x 83.10%, baseline 55.3% of the bar, 16.14 = 14.12% of it

   Type is sized off the BAR and positions are off the WINDOW, which is what
   his file does: the lockup keeps its proportions while the row it sits in
   spreads with the screen.
   ========================================================================= */
:root{
  --hh:clamp(66px, 5.943vw, 124px);
  /* THE BAR AS TOKENS, so the night palette can reach it the way it reaches
     everything else: night.css sets these three, this file only says what
     they are at noon. See the block at the end of night.css. */
  --hdr-bg:linear-gradient(90deg,#00287d 0%,#0459bd 42%,#0358bc 48%,
    #02459e 62%,#013887 75%,#002f7a 88%,#002d76 100%);
  --hdr-edge:rgba(0,8,26,.55);
  --hdr-cast:0 3px 4px rgba(0,10,35,.42), 0 14px 26px rgba(0,16,50,.30);
  /* the strip under the bar, which is a lighter run of the same sky */
  --hdr-bar-bg:linear-gradient(90deg,#013a86 0%,#0a6ec9 46%,#0a6ec9 54%,#013a86 100%);
  /* AND THE DRAWER IS PAPER, NOT SKY. It was the bar's own blue, which put his
     five links on the same colour as the thing they dropped out of and read as
     the header growing rather than a menu opening. White by day and black at
     night: the one place on this page that is not his palette, and is not
     meant to be - a menu is a sheet over the page, and a sheet is not sky. */
  --hdr-menu-bg:#fff;
  --hdr-menu-ink:#0b1f3f;
  --hdr-menu-rule:rgba(4,24,64,.13);
  --hdr-cta-bg:#ffde17;
  --hdr-cta-ink:#0b1f3f;
  --hdr-cta-cast:0 3px 9px rgba(0,10,40,.40);
}

.hdr{
  position:fixed; left:0; right:0; top:0; z-index:9000;
  height:var(--hh);
  background:var(--hdr-bg);
  /* HIS SHADOW LAYER: the 44 units under the bar in his file are a hard dark
     edge with a soft fall below it. A box-shadow alone is the soft half and
     misses the line, which is the half you notice. */
  border-bottom:2px solid var(--hdr-edge);
  box-shadow:var(--hdr-cast);
  font-family:"Be Vietnam Pro","Helvetica Neue",Arial,sans-serif;
  /* retracts on the way down, back on the way up - a transform, so the page
     under it never reflows */
  transform:translateY(0);
  transition:transform .28s cubic-bezier(.3,.7,.3,1),
    background-image .9s linear, border-color .9s linear, box-shadow .9s linear;
  will-change:transform;
}
.hdr[data-hide="1"]{ transform:translateY(calc(-1 * var(--hh) - 20px)) }
.hdr-in{ position:relative; height:100% }

/* HIS SWITCH, at his moon's own place in the bar rather than fixed to the
   corner of the window the way it used to be. */
.hdr .mode-switch{
  position:absolute; left:5.82%; top:50%; translate:-50% -50%;
  width:calc(var(--hh) * .62); height:calc(var(--hh) * .62);
  background:none; box-shadow:none; padding:0;
  /* AND NOTHING HERE MAY ISOLATE. His sun and his moon are six `screen`
     circles each - that is how the glow is drawn, and screen over black IS the
     backdrop, so the ramps are meant to disappear into his blue. A
     backdrop-filter makes the element a stacking context that isolates
     blending, and the blends then composite against nothing and come out as
     what they are: a hard grey ring round the sun. It is inherited from the
     floating button this used to be, and it has no work to do on a bar. */
  backdrop-filter:none; -webkit-backdrop-filter:none;
}
.hdr .mode-switch:hover{ background:none; transform:scale(1.07) }
/* NO display HERE. night.css shows one icon and hides the other with
   display:block/none on .is-day and .is-night; a rule with one more class in
   it that also sets display wins, and both the moon and the sun paint at
   once - which is what was stacked in the corner. Size only. */
.hdr .mode-switch img,
.hdr .mode-switch svg{ width:100%; height:100%; overflow:visible }

.hdr-logo{ position:absolute; left:17.94%; top:0; height:100%;
  text-decoration:none; display:flex; flex-direction:column;
  justify-content:center; line-height:1 }
.hdr-lock{ display:block; white-space:nowrap; color:#fff;
  font-weight:900; letter-spacing:.005em; font-size:calc(var(--hh) * .298);
  margin-left:.55%; }
.hdr-lock i{ font-style:normal; color:#29abe2; font-size:calc(var(--hh) * .352);
  margin:0 .14em }
.hdr-rule{ display:block; width:16.71vw; max-width:321px;
  height:max(1px, calc(var(--hh) * .0126));
  background:#29abe2; margin:calc(var(--hh) * .075) 0 calc(var(--hh) * .06);
  margin-left:.55% }
.hdr-tag{ display:block; white-space:nowrap; color:#fff;
  font-weight:600; font-size:calc(var(--hh) * .1135); letter-spacing:.055em;
  text-transform:uppercase }

/* HIS SHIELD, on the middle of the WINDOW - which is what he means by the
   logo being centred, and which a flex row cannot do because it centres on
   whatever is left after its neighbours have taken their share. It hangs
   below the bar the way a badge does. */
.hdr-shield{ position:absolute; left:50%; top:calc(var(--hh) * .06);
  translate:-50% 0; height:calc(var(--hh) * 1.14); width:auto;
  filter:drop-shadow(0 4px 9px rgba(0,10,35,.55)); pointer-events:none }

.hdr-nav{ position:absolute; left:56.66%; top:50%; translate:0 -50%;
  display:flex; gap:3.2vw; white-space:nowrap }
.hdr-nav a{ color:#fff; text-decoration:none;
  font-weight:500; font-size:calc(var(--hh) * .1847);
  opacity:.94; transition:opacity .18s linear }
.hdr-nav a:hover,.hdr-nav a:focus-visible{ opacity:1; text-decoration:underline;
  text-underline-offset:.4em; text-decoration-thickness:.08em;
  text-decoration-color:#29abe2 }

.hdr-cta{
  position:absolute; left:81.6%; top:50%; translate:0 -50%;
  display:flex; align-items:center; gap:.6em;
  background:var(--hdr-cta-bg); color:var(--hdr-cta-ink); text-decoration:none;
  font-weight:900; font-size:calc(var(--hh) * .1412); letter-spacing:.045em;
  text-transform:uppercase; white-space:nowrap;
  padding:calc(var(--hh) * .125) calc(var(--hh) * .20)
          calc(var(--hh) * .125) calc(var(--hh) * .125);
  border-radius:calc(var(--hh) * .075);
  box-shadow:var(--hdr-cta-cast);
  transition:transform .18s ease, box-shadow .18s ease,
    background-color .9s linear, color .9s linear;
}
.hdr-cta:hover{ transform:translateY(-1px) scale(1.015);
  box-shadow:0 5px 16px rgba(0,10,40,.5) }
/* his own phone, from Phone.svg - the white tile with the blue field and the
   handset in it, not a glyph that looks a bit like one */
.hdr-cta img{ width:calc(var(--hh) * .225); height:auto; display:block }
/* and the handset alone, which only the phone's square button uses */
.hdr-cta-g{ display:none }

/* ---------------------------------------------------------------------------
   HIS STRIP, AND THE MENU IT PULLS DOWN
   Off above the breakpoint - up there the nav is already across the bar - and
   the whole of it lives inside .hdr so it retracts with the bar as one object.
   --hbar is nought here, so every sum below that adds it is the desktop's own
   number until a phone gives it a height.
   ------------------------------------------------------------------------- */
:root{ --hbar:0px }
.hdr-bar,.hdr-menu{ display:none }

/* the page starts under the bar */
body{ padding-top:calc(var(--hh) + var(--hbar)) }

/* AND ON A PHONE THE MIDDLE GOES. Three nav items, a lockup and a badge do
   not fit across 390 pixels at any size worth reading, so what is left is the
   switch, his name and the one thing the header is for. */
@media (max-width:900px){
  :root{ --hh:76px; --hbar:26px }

  /* THE BAR IS NO LONGER THE WHOLE HEADER. The strip hangs under it, so the
     header's own height is the two of them and the retract has to take both -
     which -100% does, whatever they add up to. The shield is why the desktop
     cannot use that: up there it hangs BELOW the bar, and down here it is
     hidden. */
  .hdr{ height:auto }
  .hdr-in{ height:var(--hh) }
  .hdr[data-hide="1"]{ transform:translateY(calc(-100% - 4px)) }

  .hdr-nav,.hdr-shield{ display:none }
  .hdr .mode-switch{ left:7.5%; width:calc(var(--hh) * .50); height:calc(var(--hh) * .50) }

  /* HIS LOCKUP GOES TO THE MIDDLE, and it keeps its rule and its strapline -
     that is the whole of what his phone drawing changes about the bar. Centred
     on the WINDOW, not on what is left between the switch and the button,
     because those two are not the same width and a flex row would put his name
     off centre by the difference. */
  .hdr-logo{ left:50%; right:auto; translate:-50% 0;
    align-items:center; text-align:center; max-width:62vw }
  /* AND A SHARE OF THE BAR IS NOT ENOUGH ON ITS OWN. --hh is a fixed 76 on
     every phone, so the lockup came out the same 222 pixels on a 430 screen
     and on a 320 one - where it ran under the button. Whichever is smaller:
     his proportion of the bar, or a share of the actual screen. */
  .hdr-lock{ font-size:min(calc(var(--hh) * .285), 5.55vw);
    letter-spacing:0; margin-left:0 }
  .hdr-rule{ display:block; width:78%; max-width:none;
    margin:calc(var(--hh) * .055) auto calc(var(--hh) * .05);
    height:max(1px, calc(var(--hh) * .018)) }
  /* AND THE STRAPLINE IS THE THING THAT HAS TO FIT. Forty-three characters of
     uppercase across 390 pixels with a switch on one side and a button on the
     other: at his desktop tracking it is 210 wide and lands on the button.
     .028em and .092 of the bar is 196, which leaves 97 a side - and the
     button, now that it is a square with his handset in it, is 38. */
  .hdr-tag{ display:block; font-size:min(calc(var(--hh) * .092), 1.80vw);
    letter-spacing:.028em }

  /* AND THE BUTTON IS THE HANDSET AND NOTHING ELSE. Set as words it is 75
     pixels wide and his lockup is 202, and on a 381-wide phone those two meet:
     CONTACT US prints over the A of MEDIA. A square with his own phone in it
     is 38, which gives the strapline back its room AND lets the lockup grow,
     and says the same thing. The name survives in aria-label on the link. */
  .hdr-cta-t{ display:none }
  .hdr-cta{ left:auto; right:4%; gap:0;
    width:calc(var(--hh) * .50); height:calc(var(--hh) * .50);
    padding:0; display:grid; place-items:center;
    border-radius:calc(var(--hh) * .125) }
  /* the sign goes and the ink stays: a square button with a white tile with a
     blue field with a handset in it is three boxes saying one thing */
  /* `.hdr-cta img` is a class AND a type, so a bare class here loses to it and
     both the sign and the ink paint, one under the other */
  .hdr-cta img.hdr-cta-i{ display:none }
  .hdr-cta-g{ display:block; height:56%; width:auto }

  /* -- HIS STRIP ---------------------------------------------------------- */
  /* The whole strip is the button: his drawing has three rules centred in a
     band the full width of the screen, and a 26-pixel target that only counts
     where the rules are is a 34-pixel target. */
  .hdr-bar{
    display:grid; place-items:center;
    width:100%; height:var(--hbar); padding:0; border:0;
    border-top:1px solid rgba(0,6,20,.55);
    background:var(--hdr-bar-bg); cursor:pointer;
    transition:background-image .9s linear;
  }
  .hdr-bar:focus-visible{ outline:2px solid #ffde17; outline-offset:-3px }
  /* three rules drawn as one box and two shadows of itself, so the gap between
     them is one number and the burger is one element */
  .hdr-burger{
    display:block; position:relative;
    width:34px; height:3px; border-radius:2px; background:#fff;
    box-shadow:0 -7px 0 #fff, 0 7px 0 #fff;
    transition:transform .22s cubic-bezier(.3,.7,.3,1), box-shadow .18s linear;
  }
  /* open, it is a cross: the outer two rules come in under the middle one and
     that one crosses with a rule of its own - same element, no second drawing */
  .hdr-bar[aria-expanded="true"] .hdr-burger{
    box-shadow:0 0 0 #fff, 0 0 0 #fff; transform:rotate(45deg);
  }
  .hdr-bar[aria-expanded="true"] .hdr-burger::after{
    content:""; position:absolute; inset:0;
    border-radius:2px; background:#fff; transform:rotate(90deg);
  }

  /* -- AND WHAT IT PULLS DOWN --------------------------------------------- */
  .hdr-menu{
    display:grid; position:absolute; left:0; right:0; top:100%;
    background:var(--hdr-menu-bg);
    /* CLOSED IS A ROW OF NOTHING, NOT display:none. A drawer that is
       display:none cannot be animated to anywhere, and one that snaps open is
       the single thing that makes a page feel unfinished. 0fr collapses the
       row with the links still laid out inside it - and it is ONE row, so the
       five links live in one box. Straight children would be five rows, four
       of them implicit and auto-sized, and grid-template-rows would only
       collapse the first: the drawer stayed its full height with its
       background painting over whatever was under the bar. */
    grid-template-rows:0fr; overflow:hidden;
    transition:grid-template-rows .26s cubic-bezier(.3,.7,.3,1);
  }
  /* AND NEITHER THE RULE NOR THE SHADOW MAY SIT ON A BOX THAT HAS TO REACH
     ZERO. min-height:0 takes an element's CONTENT to nothing and leaves its
     border outside that, so two pixels of edge on the drawer or on this box is
     two pixels of row that never collapses - a hairline of white, or of black,
     under his bar at all times. They go on the last link, which is inside the
     clip and disappears with it. */
  .hdr-menu-in{ min-height:0; overflow:hidden }
  .hdr-menu-in a:last-child{
    border-bottom:2px solid var(--hdr-edge);
    box-shadow:var(--hdr-cast);
  }
  /* the attribute is the STATE, and the paint is this file's business - so
     [hidden] has to be told not to take the element away, or there is nothing
     left to animate from */
  .hdr-menu[hidden]{ display:grid }
  .hdr-menu.is-open{ grid-template-rows:1fr }
  .hdr-menu a{
    display:block; color:var(--hdr-menu-ink); text-decoration:none;
    font-weight:700; font-size:calc(var(--hh) * .175); letter-spacing:.01em;
    /* a row a thumb can hit without aiming: 22 above and below his cap height
       is a 59-pixel row, against the 44 a phone asks for as a minimum */
    padding:calc(var(--hh) * .29) 7vw;
    border-top:1px solid var(--hdr-menu-rule);
  }
  .hdr-menu-in a:first-child{ border-top:0 }
  .hdr-menu a:active{ background:var(--hdr-menu-rule) }
  /* and a collapsed row still holds focusable children, so they are taken out
     of the tab order until it is open */
  .hdr-menu:not(.is-open) a{ visibility:hidden }
}

/* AN ANCHOR HAS TO CLEAR THE BAR. The header is fixed, so a jump to #services
   lands the section's top edge under it and the first line of his headline is
   simply gone. scroll-margin moves where the browser thinks the top is, and
   nothing about the layout changes. */
section[id]{ scroll-margin-top:calc(var(--hh) + var(--hbar) + 8px) }
html{ scroll-behavior:smooth }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto } }