/* 15 Oct, seagey: the glyph portal hero, on every page. Flat, his two logo colours (PMS 072 C blue #000F9F
   and black #231F20, both read from his Illustrator file), his orange for anything you press.
   Home dives into the L of NRLH and comes out on his blue; the other pages open the same way without the dive.
   Own class names (gp-*) so none of the old 3D sign rules in nrlh.css can reach it. */

/* the menu, on every page: black on white, white once the home dive is through the L */
.nav{color:var(--black)}
.nav .brand svg{stroke:none}
.nav .brand svg .e,.nav .brand svg .f,.nav .brand svg .n{fill:var(--black)}
/* 16 Oct, seagey: his real logo in the header and footer, blue letters with the black edge (PMS 072 C) */
.nav .brand svg .f{fill:var(--blue)}
footer{background:#fff;color:var(--black);border-top:1px solid var(--line)}
footer .top{border-bottom-color:var(--line)}
footer .top svg{fill:none;stroke:none}
footer .top svg .e,footer .top svg .n{fill:var(--black)}
footer .top svg .f{fill:var(--blue)}
footer .bot{color:rgba(35,31,32,.62)}
footer a:hover,.fnav a:hover{color:var(--blue)}
footer .credit{color:rgba(35,31,32,.55)}
footer .credit:hover{color:var(--black)}
.links a{opacity:.82}
.links a:hover{opacity:1;color:var(--blue)}
.menu{display:none;align-items:center;gap:10px;padding:10px 4px;background:none;border:0;color:inherit;font:inherit;font-size:11px;font-weight:700;letter-spacing:.26em;text-transform:uppercase;cursor:pointer}
.menu b{position:relative;display:block;width:20px;height:2px;background:currentColor}
.menu b::before,.menu b::after{content:"";position:absolute;left:0;width:20px;height:2px;background:currentColor;transition:transform .25s ease}
.menu b::before{top:-6px}.menu b::after{top:6px}
.nav.open .menu b{background:transparent}
.nav.open .menu b::before{transform:translateY(6px) rotate(45deg)}
.nav.open .menu b::after{transform:translateY(-6px) rotate(-45deg)}
.gp.through .nav{color:#fff}
.gp.through .nav .brand svg .e,.gp.through .nav .brand svg .f,.gp.through .nav .brand svg .n{fill:#fff}
/* 15 Oct, seagey: the menu comes back when you scroll up. Fixed on every page; gp.js slides it away going down
   and brings it back going up, as a white bar so the logo and links read over anything */
.nav{position:fixed;z-index:60;transition:transform .35s cubic-bezier(.2,.7,.2,1),background .25s ease,padding .25s ease,box-shadow .25s ease}
.nav.hide{transform:translateY(-110%)}
.nav.bar{background:#fff;padding-top:12px;padding-bottom:12px;box-shadow:0 1px 0 rgba(35,31,32,.12),0 10px 30px rgba(20,18,40,.08)}
.gp.through .nav.bar{color:var(--black)}
.gp.through .nav.bar .brand svg .e,.gp.through .nav.bar .brand svg .n{fill:var(--black)}
.gp.through .nav.bar .brand svg .f{fill:var(--blue)}
@media(prefers-reduced-motion:reduce){.nav{transition:none}}
@media(max-width:980px){
  .gp-tiles{grid-template-columns:repeat(2,1fr)}
  /* nine services since 23 Oct: the odd one out takes the whole last row */
  .gp-tile:last-child:nth-child(odd){grid-column:1/-1}
}
/* six links since 20 Oct (Partners, Traffic control): they no longer fit on one line under ~1180px, so the
   Menu button takes over there, not only on phones */
@media(max-width:1180px){
  .links{display:none}
  .menu{display:inline-flex;margin-left:auto}
  .nav.open .links{display:flex;flex-direction:column;gap:0;position:absolute;left:0;right:0;top:100%;background:#fff;color:var(--black);padding:6px clamp(22px,5vw,80px) 18px;border-bottom:2px solid var(--black)}
  .nav.open .links a{padding:16px 0;font-size:13px;opacity:1;border-top:1px solid var(--line)}
  .nav.open .links a:first-child{border-top:0}
}
.links .tel.in-menu{display:none}
/* phones (seagey, 16 Oct): logo left, Menu right, the call button lives inside the menu */
@media(max-width:760px){
  .nav{gap:12px;padding:16px clamp(16px,4.4vw,22px)}
  .nav .brand svg{width:104px}
  .nav>.tel{display:none}
  .nav.open .links .tel.in-menu{display:inline-flex;align-self:flex-start;margin:18px 0 6px;padding:14px 18px;border:0;opacity:1;color:var(--ink);font-size:20px;letter-spacing:.02em}
  .nav.open .links .tel.in-menu small{display:inline}
  .nav.open .links .tel.in-menu:hover{color:var(--ink)}
}

/* a scaled photo further down (the forklift zoom) pushed phones 21px sideways, before 15 Oct too; clip, not hidden, so the sticky hero still works */
html,body{overflow-x:clip}

/* the hero */
.gp{position:relative;background:#fff;color:var(--black)}
.gp-stage{position:relative;min-height:100svh;display:flex;flex-direction:column;overflow:hidden;background:#fff;padding:0 clamp(22px,5vw,80px) clamp(28px,6svh,64px)}
.gp-body{position:relative;flex:1;display:flex;flex-direction:column;justify-content:center;padding-top:clamp(96px,14svh,150px)}
.gp-kick{font-weight:700;font-size:clamp(18px,1.8vw,26px);line-height:1.2;letter-spacing:-.005em}
.gp-kick a{color:inherit;text-decoration:none;opacity:.6}
.gp-kick a:hover{opacity:1}
.gp-word{position:relative;margin:clamp(12px,2.2svh,26px) 0 clamp(22px,3.6svh,44px)}
.gp-art{display:block}
.gp-art svg{display:block;width:100%;height:auto;overflow:visible}
.gp-art .stack{display:none}
.gp-art .e{fill:var(--black)}
.gp-art .f{fill:var(--blue)}
/* an inner page's word: his blue with a black edge, like the logo; gp.js fits it to the width */
.gp-text{display:inline-block;white-space:nowrap;font-variation-settings:"wdth" 125;font-weight:900;text-transform:uppercase;letter-spacing:-.01em;line-height:.8;
  font-size:min(22vw,34svh);color:var(--blue);-webkit-text-stroke:.05em var(--black);paint-order:stroke fill;padding:.04em .03em}
/* a short word (JOIN, CALL) does not fill the width: centre it so the page is not all on the left (seagey, 15 Oct) */
.gp-word:has(.gp-text) .gp-art{text-align:center}
.gp-guy{position:absolute;z-index:2;right:2%;top:30%;height:70svh;aspect-ratio:var(--r);pointer-events:none}
.gp-guy img{display:block;width:100%;height:100%;max-width:none}
.gp-cap{position:relative;z-index:3;max-width:min(580px,50%)}
.gp-lead{font-weight:800;font-variation-settings:"wdth" 88;font-size:clamp(21px,2.1vw,30px);line-height:1.15;letter-spacing:-.01em}
.gp-lead span{color:var(--blue)}
.gp-cap p{margin-top:12px;max-width:44ch;font-size:clamp(15px,1.2vw,18px);line-height:1.55;color:rgba(35,31,32,.74)}
.gp-cap .doorbtns{margin-top:28px;gap:14px}
.gp-gap{display:none}

/* the orange buttons, solid blocks with a stepped dark side (seagey, 14 Oct). 15 Oct, seagey: hover presses them
   into the wall (the side shrinks, the face moves into it), and the call button in the menu is one of them too. */
.gp .btn,.px .btn,.ph .btn,.gp-after .btn,.nav .tel{--x:6px;box-shadow:calc(var(--x)*1/8) calc(var(--x)*1/8) 0 #231F20,calc(var(--x)*2/8) calc(var(--x)*2/8) 0 #231F20,calc(var(--x)*3/8) calc(var(--x)*3/8) 0 #231F20,calc(var(--x)*4/8) calc(var(--x)*4/8) 0 #231F20,calc(var(--x)*5/8) calc(var(--x)*5/8) 0 #231F20,calc(var(--x)*6/8) calc(var(--x)*6/8) 0 #231F20,calc(var(--x)*7/8) calc(var(--x)*7/8) 0 #231F20,calc(var(--x)*8/8) calc(var(--x)*8/8) 0 #231F20,calc(var(--x) + 8px) calc(var(--x) + 12px) 18px rgba(20,18,40,.22);
  transition:transform .18s cubic-bezier(.2,.7,.2,1),box-shadow .18s cubic-bezier(.2,.7,.2,1),background .3s ease,color .3s ease}
.nav .tel{--x:5px}
.gp .btn:hover,.px .btn:hover,.ph .btn:hover,.gp-after .btn:hover,.nav .tel:hover{--x:2px;transform:translate(4px,4px)}
.nav .tel:hover{transform:translate(3px,3px)}
.gp .btn:active,.px .btn:active,.ph .btn:active,.gp-after .btn:active,.nav .tel:active{--x:0px;transform:translate(6px,6px);transition-duration:.06s}
.nav .tel:active{transform:translate(5px,5px)}
.gp .btn.wh,.px .btn.wh,.ph .btn.wh{background:#fff;color:var(--black);box-shadow:inset 0 0 0 2px #231F20,calc(var(--x)*1/8) calc(var(--x)*1/8) 0 #231F20,calc(var(--x)*2/8) calc(var(--x)*2/8) 0 #231F20,calc(var(--x)*3/8) calc(var(--x)*3/8) 0 #231F20,calc(var(--x)*4/8) calc(var(--x)*4/8) 0 #231F20,calc(var(--x)*5/8) calc(var(--x)*5/8) 0 #231F20,calc(var(--x)*6/8) calc(var(--x)*6/8) 0 #231F20,calc(var(--x)*7/8) calc(var(--x)*7/8) 0 #231F20,calc(var(--x)*8/8) calc(var(--x)*8/8) 0 #231F20,calc(var(--x) + 8px) calc(var(--x) + 12px) 18px rgba(20,18,40,.22)}
.gp .btn.wh:hover,.px .btn.wh:hover,.ph .btn.wh:hover{background:#231F20;color:#fff}

/* a quiet entrance, the same on every page (the old 3D build is gone). backwards fill only, so it
   never holds a value the home dive needs to set afterwards */
@keyframes gpIn{from{opacity:0;transform:translateY(22px)}}
.js .gp-kick,.js .gp-art,.js .gp-guy img,.js .gp-cap{animation:gpIn .7s cubic-bezier(.2,.7,.2,1) backwards}
.js .gp-art{animation-delay:.08s}
.js .gp-guy img{animation-delay:.2s}
.js .gp-cap{animation-delay:.28s}

/* home: one short pin, the camera goes into the L and out into his blue */
.gp.dive{height:165svh}
.gp.dive .gp-stage{position:sticky;top:0;height:100svh}
/* when gp.js turns the dive off (no room even with a smaller logo), the hero is a normal block again:
   it grows to fit, so nothing is ever cut off (16 Oct: the second button was hidden on seagey's phone) */
.gp.dive.static{height:auto}
.gp.dive.static .gp-stage{position:relative;height:auto;min-height:100svh;overflow:visible}
/* 20 Oct, Darcy: "the first page a little plain ... because of all the white". The lower part of every hero
   is his blue: the logo or word stays on white, the words and the doors sit on the blue, and the crew member
   stands on it. gp.js sets --band and adds .banded; until then the hero is all white with dark text. */
.gp.banded .gp-stage{background:linear-gradient(#fff var(--band),var(--blue) var(--band))}
.gp.banded .gp-cap{color:#fff;padding-top:clamp(20px,3.2svh,40px)}
.gp.banded .gp-cap p{color:rgba(255,255,255,.84)}
.gp.banded .gp-cap .gp-lead{color:#fff}
.gp.banded .gp-lead span{color:var(--blue-lite)}
.gp.through .gp-stage,.gp.banded.through .gp-stage{background:var(--blue)}
/* 20 Oct, seagey: "use a hero image if there is a really good one". Home only: his sunny forklift photo fills
   the lower part instead of flat blue, washed with his blue on the left so the words read */
.gp.photo.banded .gp-stage::before{content:"";position:absolute;left:0;right:0;top:var(--band);bottom:0;
  background:linear-gradient(90deg,rgba(0,15,159,.94) 0%,rgba(0,15,159,.86) 34%,rgba(0,15,159,.42) 62%,rgba(0,15,159,.12) 100%),
  url(/assets/img/hero-forklift.webp) 50% 40%/cover no-repeat}
.gp.photo.through .gp-stage::before{display:none}
@media(max-width:760px){
  .gp.photo.banded .gp-stage::before{background:linear-gradient(180deg,rgba(0,15,159,.55) 0%,rgba(0,15,159,.9) 55%,rgba(0,15,159,.96) 100%),
    url(/assets/img/hero-forklift-1000.webp) 30% 30%/cover no-repeat}
}
.gp.dive .gp-word{transform-origin:0 0}

/* straight after the dive, on the blue: which hands we have */
.gp-after{position:relative;background:var(--blue);color:#fff;padding:clamp(72px,10vw,140px) 0 clamp(72px,9vw,130px)}
@media(prefers-reduced-motion:no-preference){
  /* 15 Oct, seagey: no empty blue screen. The section sits over the whole pinned hero (see-through until the
     hero is blue) and its contents rise in the moment the blue fills the screen, then the page scrolls on. */
  .js .gp.dive:not(.static)+main .gp-after{margin-top:-100svh;padding-top:clamp(100px,15svh,150px);background:linear-gradient(transparent 100svh,var(--blue) 100svh);pointer-events:none}
  .js .gp.dive:not(.static)+main .gp-after .wrap>*{pointer-events:auto;transition:opacity .55s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
  .js .gp.dive:not(.static)+main .gp-after .row{transition-delay:.05s}
  .js .gp.dive:not(.static)+main .gp-after .gp-tiles{transition-delay:.18s}
  .js .gp.dive:not(.static)+main .gp-after .gp-go{transition-delay:.3s}
  .js .gp.dive:not(.static):not(.through)+main .gp-after .wrap>*{opacity:0;transform:translateY(48px);pointer-events:none;transition-duration:.2s;transition-delay:0s}
}
.gp-after .row{display:grid;grid-template-columns:1.3fr 1fr;gap:28px 60px;align-items:end}
.gp-after .h2 em{color:var(--blue-lite)}
.gp-after .row p{color:rgba(255,255,255,.8);font-size:17px;line-height:1.6;max-width:40ch}
/* the 1 to 8, with the photo popping up from the bottom (seagey preferred the old site's tiles, 15 Oct) */
.gp-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:clamp(36px,4.4vw,64px);background:rgba(255,255,255,.3);border:1px solid rgba(255,255,255,.3)}
.gp-tile{position:relative;min-height:clamp(190px,16vw,240px);padding:22px;background:var(--blue);color:#fff;text-decoration:none;display:grid;grid-template-rows:auto 1fr auto;gap:12px;overflow:hidden;isolation:isolate}
.gp-tile img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;max-width:none;object-fit:cover;transform:translateY(101%);transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.gp-tile::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(0,10,110,.25),rgba(0,8,90,.82));opacity:0;transition:opacity .45s ease}
.gp-tile:hover img,.gp-tile.pop img{transform:none}
.gp-tile:hover::before,.gp-tile.pop::before{opacity:1}
.gp-tile .n{font-variation-settings:"wdth" 64;font-weight:900;font-size:44px;line-height:1;color:var(--blue-lite);transition:color .3s ease}
.gp-tile:hover .n,.gp-tile.pop .n{color:#fff}
.gp-tile span:nth-child(3){align-self:end}
.gp-tile strong{display:block;font-variation-settings:"wdth" 70;font-weight:900;font-size:clamp(22px,2vw,30px);line-height:.95;text-transform:uppercase}
.gp-tile small{display:block;margin-top:8px;font-size:13px;line-height:1.5;color:rgba(255,255,255,.78)}
.gp-tile i{position:absolute;right:20px;top:20px;font-style:normal;font-size:20px;color:var(--hivis);transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.gp-tile:hover i{transform:translateX(4px)}
.gp-after .gp-go{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;margin-top:clamp(36px,4vw,56px)}
.gp-after .gp-go a.or-tel{color:#fff;font-weight:800;font-size:18px;text-decoration:none}
.gp-after .gp-go a.or-tel b{color:var(--hivis)}
.gp-after .gp-go a.or-tel:hover{text-decoration:underline;text-underline-offset:4px}

/* 20 Oct, Darcy: "Trusted Partners", more companies after the big ones, and a link to the partners page */
.logos.more{grid-template-columns:repeat(6,1fr);border-top:0}
.logos.more li{height:92px;padding:16px}
.logos.more img{max-height:30px}
.logos .pname{font-variation-settings:"wdth" 70;font-weight:900;font-size:14px;line-height:1.15;letter-spacing:.05em;text-transform:uppercase;text-align:center;opacity:.62;transition:opacity .3s ease}
.logos li:hover .pname{opacity:1}
.allp{display:inline-flex;align-items:center;gap:12px;margin-top:30px;padding-bottom:6px;border-bottom:2px solid var(--hivis);color:var(--black);font-size:12px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;text-decoration:none}
.allp i{font-style:normal;transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.allp:hover{color:var(--blue)}
.allp:hover i{transform:translateX(4px)}
@media(max-width:980px){.logos.more{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){.logos.more{grid-template-columns:repeat(2,minmax(0,1fr))}.logos.more li{height:80px}}

/* 20 Oct: the towns on dark, one less white band down the page */
.where{background:var(--ink);color:#fff;padding:clamp(70px,9vw,130px) 0}
.where .k{color:rgba(255,255,255,.7)}
.where .towns span{color:var(--blue-lite)}
.where .towns span.o{-webkit-text-stroke:2px #fff;color:transparent}

/* the small pages (privacy, terms, thanks, 404) open on the same white, no word */
.phero,.plain{background:#fff;color:var(--black)}
.phero::before{display:none}
.phero h1,.plain h1{color:var(--black)}
.phero h1 span,.plain h1 span{color:var(--blue)}
.phero p,.plain p{color:rgba(35,31,32,.74)}
.plain p a{color:var(--black)!important}
.plain .btn.wh{background:#fff;color:var(--black);box-shadow:inset 0 0 0 2px #231F20}
.phero{border-bottom:1px solid var(--line)}

@media(max-width:760px){
  .gp-body{justify-content:flex-start;padding-top:clamp(92px,13svh,120px)}
  .gp-cap{max-width:none}
  .gp-gap{display:block;height:clamp(118px,24svh,260px)}
  /* home on a phone (16 Oct): NR stacked on LH fills the width, the hammer man stands in front of it */
  .gp-art .row{display:none}
  .gp-art .stack{display:block}
  .gp-word:not(:has(.gp-guy))+.gp-gap{display:none}  /* traffic control has no crew member, so no room for one */
  .gp.dive .gp-gap{height:clamp(10px,2svh,20px)}
  .gp.dive .gp-word{width:100%;margin-left:auto;margin-right:auto}
  .gp.dive .gp-kick{font-size:clamp(21px,5.8vw,26px);line-height:1.15;max-width:15ch}
  .gp.dive .gp-lead{font-size:clamp(21px,5.6vw,24px)}
  .gp-kick,.gp-lead{text-wrap:balance}
  .gp-word{margin-bottom:0}
  .gp-cap .doorbtns .btn{flex:1 1 auto;justify-content:center}
  .gp-after .row{grid-template-columns:1fr}
  .gp-tiles{grid-template-columns:1fr 1fr}
  .gp-tile{min-height:178px;padding:16px}
  .gp-tile .n{font-size:34px}
  .gp-tile strong{font-size:19px}
  .gp-tile small{display:none}
  .gp-tile i{right:14px;top:14px}
}
/* short phones (iPhone SE and the like): a slightly smaller stack so the whole hero fits and the dive stays on */
@media(max-width:760px) and (max-height:740px){
  .gp.dive .gp-body{padding-top:84px}
  .gp.dive .gp-word{margin-top:10px}
  .gp.dive .gp-kick{font-size:20px}
  .gp.dive .gp-cap p:not(.gp-lead){margin-top:8px;font-size:14px}
  .gp.dive .gp-lead{font-size:min(18px,4.7vw)}
  .gp.dive .gp-stage{padding-bottom:14px}
  /* 16 Oct, seagey: the logo and the man take the full width, so the two doors sit side by side to make room */
  .gp.dive .gp-cap .doorbtns{margin-top:18px;gap:10px;flex-wrap:nowrap}
  .gp.dive .gp-cap .doorbtns .btn{flex:1 1 0;min-width:0;justify-content:center;gap:8px;padding:15px 6px;font-size:11px;letter-spacing:.12em;white-space:nowrap}
}
@media(prefers-reduced-motion:reduce){
  .gp.dive{height:auto}
  .gp.dive .gp-stage{position:relative;height:auto}
  .js .gp-kick,.js .gp-art,.js .gp-guy img,.js .gp-cap{animation:none}
  .gp-tile img,.gp-tile::before,.gp-tile i{transition:none}
}

/* ===== 20 Oct, seagey: the image hero trial (/new-home/). One generated Northern Rivers scene in layers, after
   the osmo parallax component: the full scene, the land without its sky, NRLH, then the crew on the grass.
   gp.js sizes the scene like object-fit: cover, tucks NRLH behind the crew's heads and moves each layer at
   its own speed. The words and both doors sit in a blue bar under the picture, so they stay on the first screen. */
.px{position:relative;background:var(--blue);--caph:150px}
.px-stage{position:relative;height:calc(100svh - var(--caph));min-height:380px;overflow:hidden;background:#bcd7f0}
.px-scene{position:absolute;left:50%;top:0;width:max(100%,calc((100svh - var(--caph)) * 4 / 3));aspect-ratio:4/3;translate:-50% 0;z-index:1}
.px-scene picture{display:contents}
.px-front{z-index:3;pointer-events:none}
.px-l{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;will-change:transform}
.px-title{position:absolute;z-index:2;left:50%;top:18%;width:min(60vw,1000px);translate:-50% 0;will-change:transform;text-align:center}
.px-title svg{display:block;width:100%;height:auto;overflow:visible}
.px-title .e{fill:var(--black)}
.px-title .f{fill:var(--blue)}
.px-kick{white-space:nowrap;margin-bottom:clamp(8px,1.2vw,16px);font-weight:700;font-size:clamp(17px,1.7vw,24px);line-height:1.2;color:var(--black);text-shadow:0 1px 14px rgba(255,255,255,.55)}
.px-fade{position:absolute;left:0;right:0;bottom:0;height:22%;z-index:4;background:linear-gradient(to bottom,rgba(0,15,159,0),var(--blue));pointer-events:none}
.px-cap{position:relative;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:20px 48px;min-height:var(--caph);padding:18px clamp(22px,5vw,80px) 30px;color:#fff;background:var(--blue)}
.px-words{max-width:620px}
.px-kick2{display:none}
.px-words .gp-lead{color:#fff}
.px-words p+p{margin-top:8px;color:rgba(255,255,255,.84);font-size:clamp(15px,1.15vw,17px);line-height:1.55}
.px-cap .doorbtns{flex:none;margin:0;gap:14px}
.js .px-title,.js .px-front .px-l{animation:gpIn .8s cubic-bezier(.2,.7,.2,1) backwards}
.js .px-front .px-l{animation-delay:.12s}
@media(max-width:760px){
  .px{--caph:250px}
  .px-stage{min-height:230px}
  .px-cap{display:block;padding-top:6px}
  .px-cap .doorbtns{margin-top:18px;flex-wrap:nowrap}
  .px-cap .doorbtns .btn{flex:1 1 0;min-width:0;justify-content:center;gap:8px;padding:15px 6px;font-size:11px;letter-spacing:.12em;white-space:nowrap}
  .px-words .gp-lead{font-size:min(20px,5.2vw)}
  .px-words p+p{font-size:14px}
  .px-kick{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .px-kick2{display:block;margin-bottom:6px;font-weight:700;font-size:15px;color:rgba(255,255,255,.78)}
}
@media(prefers-reduced-motion:reduce){.px-l,.px-title{will-change:auto}.js .px-title,.js .px-front .px-l{animation:none}}

/* ===== 20 Oct, seagey: photo heroes on the inner pages (option A, flat). The scene fills the hero, the page word
   sits large over the sky in his blue with the black edge, the words and doors in the blue bar like home. */
.ph{position:relative;background:var(--blue);--caph:170px}
.ph-stage{position:relative;height:calc(100svh - var(--caph));min-height:380px;max-height:900px;overflow:hidden;background:#bcd7f0}
.ph-stage picture{display:contents}
.ph-img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 62%;will-change:transform}
.ph-word{position:absolute;z-index:2;left:clamp(16px,4vw,64px);right:clamp(16px,4vw,64px);top:calc(var(--navh,100px) + 1.5svh);text-align:center;pointer-events:none}
.ph-word .gp-text{font-size:clamp(56px,11vw,190px)}
.ph .px-fade{height:26%}
.ph-label{margin-bottom:8px;font-size:12px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.ph-label a{color:inherit;text-decoration:none}
.ph-label a:hover{color:#fff}
.ph .gp-lead{color:#fff}
.ph .gp-lead span{color:var(--blue-lite)}
.js .ph-word{animation:gpIn .8s cubic-bezier(.2,.7,.2,1) backwards}
@media(max-width:760px){
  .ph{--caph:300px}
  .ph-img{object-position:var(--pos,50% 62%)}
  .ph-stage{min-height:300px}
  .ph .px-cap{display:block;padding-top:4px}
  .ph .px-cap .doorbtns{margin-top:18px;flex-wrap:nowrap}
  .ph .px-cap .doorbtns .btn{flex:1 1 0;min-width:0;justify-content:center;gap:8px;padding:15px 6px;font-size:11px;letter-spacing:.12em;white-space:nowrap}
  .ph .gp-lead{font-size:min(21px,5.4vw)}
  .ph .px-words p+p{font-size:14px}
}
@media(prefers-reduced-motion:reduce){.ph-img{will-change:auto}.js .ph-word{animation:none}}
/* 20 Oct: the word sat across faces on several photos (Call, Join, Labour, the STOP bat), so it moved to the foot
   of the photo, white over a deeper blue fade, where the ground and legs are */
.ph-word{top:auto;bottom:clamp(10px,2svh,22px);z-index:5}
.ph-word .gp-text{color:#fff;-webkit-text-stroke:0;font-size:clamp(52px,9.5vw,170px);text-shadow:0 2px 18px rgba(0,8,90,.35)}
.ph .px-fade{height:42%;background:linear-gradient(to bottom,rgba(0,15,159,0),rgba(0,15,159,.55) 45%,var(--blue))}
@media(max-width:760px){.ph .px-cap .doorbtns .btn,.px .px-cap .doorbtns .btn{padding-left:4px;padding-right:4px;letter-spacing:.06em;font-size:10.5px}}
@media(max-width:760px) and (max-height:620px){.ph-stage{min-height:200px}.ph .px-words p+p{font-size:13px;line-height:1.45}}