/* Northern Rivers Labour Hire, shared mechanics for the three homepage directions.
   Brand values come from the client's own site: ultramarine #10069F, black, white, Archivo.
   The orange is sampled from the crew's hi-vis shirts. Each page sets its own look on top. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:"Archivo",Helvetica,Arial,sans-serif;font-variation-settings:"wdth" 100;line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
h1,h2,h3,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
button,input,select,textarea{font:inherit;color:inherit}
:root{
  --blue:#10069F;      /* his brand colour */
  --navy:#1C2C6F;      /* his footer colour */
  --ink:#08080C;
  --paper:#F4F3EF;
  --hivis:#F4511E;     /* the crew shirts, lifted to how they read in daylight */
}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* the layered letters: one wide row on desktop, two stacked rows on a phone */
.lt{position:absolute;left:0;right:0;pointer-events:none}
.lt svg{width:100%;height:auto;overflow:visible}
.lt .s1,.lt .s2{display:none;overflow:hidden}
#f path,#e path{vector-effect:non-scaling-stroke}
@media(max-width:760px){
  .lt .w{display:none}
  .lt .s1{display:block;width:100%}
  .lt .s2{display:block;width:88.4%;margin-top:3.2vw}
}

/* two doors and the two forms */
.forms [role=tabpanel][hidden]{display:none}
.forms form{display:grid;gap:18px}
.forms .row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.forms label{display:grid;gap:7px;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.forms input,.forms select,.forms textarea{width:100%;padding:14px 14px;border:1px solid currentColor;background:transparent;border-radius:0;font-size:16px;letter-spacing:0;text-transform:none;font-weight:400}
.forms textarea{min-height:110px;resize:vertical}
.forms fieldset{border:0;padding:0;margin:0;display:grid;gap:10px}
.forms legend{padding:0;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;margin-bottom:10px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips label{display:inline-flex;align-items:center;gap:0;cursor:pointer;letter-spacing:.04em;text-transform:none;font-size:14px;font-weight:500}
.chips input{position:absolute;opacity:0;width:1px;height:1px}
.chips span{display:block;padding:9px 14px;border:1px solid currentColor}
.chips input:focus-visible+span{outline:2px solid currentColor;outline-offset:2px}
.forms .note{font-size:14px;line-height:1.5;min-height:1.5em}
@media(max-width:760px){.forms .row{grid-template-columns:1fr}}

/* quiet reveal, only when the script has switched motion on */
html.motion .rv{opacity:0;transform:translateY(18px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
html.motion .rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){html.motion .rv{opacity:1;transform:none;transition:none}}