/* ==========================================================================
   Watchroute agency system.
   Written 17 Aug 2026. The site is the product for an agency, so it carries
   the same craft we would charge for: real typographic scale, texture, motion
   and restraint. Comments here are publicly readable, so nothing about former
   positioning belongs in them.
   ========================================================================== */

:root{
  --black:#08080a;
  --near:#0d0d10;
  --panel:#121218;
  --line:#23232c;
  --line-soft:#1a1a21;
  --paper:#f4f2ee;
  --muted:#9d9aa6;
  --dim:#6b6875;
  --lime:#ccff33;
  --lime-dim:#a8d626;
  --max:1280px;
  --display:"Bricolage Grotesque","Space Grotesk",system-ui,sans-serif;
  --body:"Inter",system-ui,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace;
  --ease:cubic-bezier(.19,1,.22,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--black);color:var(--paper);font-family:var(--body);font-weight:400;line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
::selection{background:var(--lime);color:#000}

/* film grain. the single cheapest thing that stops flat dark looking like a template */
body::after{content:"";position:fixed;inset:0;z-index:200;pointer-events:none;opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}

.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:clamp(20px,4.6vw,56px)}

h1,h2,h3,h4{font-family:var(--display);font-weight:700;line-height:1.02;letter-spacing:-.035em}
.mono{font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.lime{color:var(--lime)}

/* ---------------- header ---------------- */
.hdr{position:fixed;inset:0 0 auto;z-index:100;transition:background .5s var(--ease),border-color .5s,backdrop-filter .5s;border-bottom:1px solid transparent}
.hdr.stuck{background:rgba(8,8,10,.78);backdrop-filter:blur(16px) saturate(140%);border-bottom-color:var(--line-soft)}
.hdr__in{display:flex;align-items:center;justify-content:space-between;height:80px}
.brand{display:flex;align-items:baseline;gap:9px;font-family:var(--display);font-weight:700;font-size:1.02rem;letter-spacing:-.03em}
.brand i{width:7px;height:7px;border-radius:50%;background:var(--lime);display:inline-block;transform:translateY(-2px)}
.nav{display:flex;gap:32px}
.nav a{font-size:.86rem;color:var(--muted);position:relative;padding:4px 0;transition:color .3s}
.nav a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--lime);transition:width .35s var(--ease)}
.nav a:hover{color:var(--paper)}
.nav a:hover::after,.nav a[aria-current]::after{width:100%}
.nav a[aria-current]{color:var(--paper)}
@media(max-width:880px){.nav{display:none}}

/* ---------------- buttons ---------------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--display);font-weight:600;font-size:.92rem;letter-spacing:-.01em;padding:15px 28px;border-radius:2px;overflow:hidden;max-width:100%;overflow-wrap:anywhere;transition:transform .45s var(--ease),color .3s;will-change:transform}
.btn svg{flex:none;transition:transform .45s var(--ease)}
.btn:hover svg{transform:translateX(5px)}
.btn--lime{background:var(--lime);color:#07070a}
.btn--lime:hover{transform:translateY(-3px)}
.btn--line{border:1px solid var(--line);color:var(--paper)}
.btn--line:hover{border-color:var(--lime);color:var(--lime);transform:translateY(-3px)}

/* ---------------- hero ---------------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;isolation:isolate}
.hero__media{position:absolute;inset:0;z-index:-2}
.hero__media img,.hero__media video{width:100%;height:100%;object-fit:cover}
.hero__media video{position:absolute;inset:0;opacity:0;transition:opacity 1.6s ease}
.hero__media video.on{opacity:1}
.hero__veil{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(8,8,10,.62) 0%,rgba(8,8,10,.46) 38%,rgba(8,8,10,.93) 88%,var(--black) 100%)}
.hero__in{padding:150px 0 clamp(48px,7vh,80px);width:100%}
.hero__meta{display:flex;gap:26px;flex-wrap:wrap;margin-bottom:26px}
.hero h1{font-size:clamp(2.7rem,min(9.4vw,13.4vh),8.2rem);font-weight:800;margin-bottom:clamp(20px,3vh,32px)}
.hero__foot{display:grid;grid-template-columns:1fr auto;gap:32px;align-items:end;border-top:1px solid var(--line-soft);padding-top:26px}
.hero__foot p{color:var(--muted);max-width:52ch;font-size:clamp(.98rem,1.5vw,1.1rem);font-weight:300}
@media(max-width:760px){.hero__foot{grid-template-columns:1fr}}

/* ---------------- marquee ---------------- */
.marq{border-block:1px solid var(--line-soft);overflow:hidden;padding:20px 0;background:var(--near)}
.marq__t{display:flex;gap:56px;width:max-content;animation:slide 38s linear infinite;font-family:var(--display);font-weight:600;font-size:clamp(1rem,2vw,1.35rem);letter-spacing:-.02em;color:var(--dim)}
.marq__t span{display:flex;align-items:center;gap:56px;white-space:nowrap}
.marq__t b{color:var(--lime);font-weight:600}
@keyframes slide{to{transform:translateX(-50%)}}

/* ---------------- sections ---------------- */
.sec{padding:clamp(80px,11vw,160px) 0;position:relative}
.sec__head{display:grid;grid-template-columns:auto 1fr;gap:clamp(24px,5vw,70px);margin-bottom:clamp(44px,6vw,76px);align-items:start}
@media(max-width:760px){.sec__head{grid-template-columns:1fr;gap:18px}}
.sec__head h2{font-size:clamp(1.9rem,5vw,3.7rem);max-width:17ch}
.sec__head .lede{color:var(--muted);font-weight:300;max-width:56ch;margin-top:18px;font-size:1.03rem}

/* ---------------- work ---------------- */
.works{display:grid;gap:clamp(18px,2.4vw,30px)}
.work{position:relative;display:grid;grid-template-columns:1fr 1fr;background:var(--near);border:1px solid var(--line-soft);overflow:hidden;transition:border-color .55s var(--ease)}
.work:hover{border-color:var(--line)}
@media(max-width:940px){.work{grid-template-columns:1fr}}
.work__vis{position:relative;overflow:hidden;min-height:clamp(280px,34vw,440px)}
.work__vis>*{position:absolute;inset:0}
.work__shot{display:grid;place-items:center;padding:clamp(20px,3vw,40px);transition:transform 1.2s var(--ease)}
.work:hover .work__shot{transform:scale(1.035)}
.work__body{padding:clamp(28px,3.6vw,56px);display:flex;flex-direction:column;justify-content:center}
.work__idx{font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;color:var(--lime);margin-bottom:18px}
.work__body h3{font-size:clamp(1.5rem,3.1vw,2.4rem);margin-bottom:16px}
.work__body p{color:var(--muted);font-weight:300;margin-bottom:14px;max-width:52ch}
.tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:24px;list-style:none}
.tags li{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;padding:7px 12px;border:1px solid var(--line);color:var(--muted)}
.golink{display:inline-flex;align-items:center;gap:9px;margin-top:28px;font-family:var(--display);font-weight:600;font-size:.92rem;color:var(--lime);width:fit-content;border-bottom:1px solid transparent;transition:border-color .35s}
.golink:hover{border-bottom-color:var(--lime)}

/* browser frame used inside work__shot */
.bw{width:100%;max-width:440px;border:1px solid rgba(255,255,255,.09);border-radius:7px;overflow:hidden;box-shadow:0 30px 70px -28px rgba(0,0,0,.9)}
.bw__bar{display:flex;align-items:center;gap:6px;padding:9px 12px;background:#101019;border-bottom:1px solid rgba(255,255,255,.05)}
.bw__d{width:8px;height:8px;border-radius:50%;background:#2a2a37}
.bw__u{margin-left:8px;font-family:var(--mono);font-size:.62rem;color:#6b6875;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bw__b{padding:32px 26px 36px}
.bw__e{font-family:var(--mono);font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;margin-bottom:14px}
.bw__t{font-family:var(--display);font-size:1.35rem;line-height:1.14;letter-spacing:-.035em;margin-bottom:11px;font-weight:700}
.bw__s{font-size:.79rem;line-height:1.62;color:#8e8b9c}
.bw__r{height:1px;margin:20px 0 14px}
.bw__m{display:flex;gap:16px;font-family:var(--mono);font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;color:#5f5c6b}

/* ---------------- capability list ---------------- */
.caps{border-top:1px solid var(--line-soft)}
.cap{display:grid;grid-template-columns:80px 1.1fr 1.4fr;gap:clamp(16px,3vw,44px);padding:clamp(26px,3.4vw,40px) 0;border-bottom:1px solid var(--line-soft);transition:background .5s var(--ease),padding-left .5s var(--ease)}
.cap:hover{background:linear-gradient(90deg,rgba(204,255,51,.045),transparent 60%);padding-left:14px}
.cap h3{font-size:clamp(1.15rem,2.1vw,1.5rem)}
.cap p{color:var(--muted);font-weight:300;font-size:.97rem}
@media(max-width:820px){.cap{grid-template-columns:52px 1fr;gap:14px}.cap p{grid-column:2}}

/* ---------------- statement ---------------- */
.stmt{border-block:1px solid var(--line-soft);background:var(--near)}
.stmt p{font-family:var(--display);font-weight:600;font-size:clamp(1.5rem,4.2vw,3rem);line-height:1.14;letter-spacing:-.035em;max-width:20ch}
.stmt .mono{margin-top:26px;display:block}

/* ---------------- cta ---------------- */
.cta{position:relative;overflow:hidden;border:1px solid var(--line);background:
  radial-gradient(90% 130% at 88% 10%,rgba(204,255,51,.13),transparent 58%),var(--near);padding:clamp(40px,6vw,86px)}
.cta h2{font-size:clamp(1.8rem,4.6vw,3.3rem);max-width:18ch;margin-bottom:20px}
.cta p{color:var(--muted);max-width:50ch;font-weight:300;margin-bottom:34px}

/* ---------------- footer ---------------- */
.ftr{border-top:1px solid var(--line-soft);padding:60px 0 44px}
.ftr__g{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px;margin-bottom:48px}
@media(max-width:760px){.ftr__g{grid-template-columns:1fr 1fr}}
.ftr h4{font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);font-weight:400;margin-bottom:16px}
.ftr ul{list-style:none}
.ftr li{margin-bottom:9px}
.ftr li a{color:var(--muted);font-size:.92rem;transition:color .3s}
.ftr li a:hover{color:var(--lime)}
.ftr__b{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;padding-top:26px;border-top:1px solid var(--line-soft);color:var(--dim);font-size:.82rem}

/* ---------------- reveal. visible by default; hidden only once JS can undo it ---------------- */
.js-rv .rv{opacity:0;transform:translateY(30px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.js-rv .rv.in{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .rv{opacity:1!important;transform:none!important}
  html{scroll-behavior:auto}
}

/* CLICK TO CALL. Desktop shows the number in the header; a phone shows a full width
   tap target above the form instead, because on a phone a call is one tap and a form
   is a keyboard. Added 23 Aug 2026 on the operator's instruction. */
.hdr__tel{font-size:.9rem;font-weight:500;text-decoration:none;color:var(--paper);
          white-space:nowrap;margin-right:14px}
.hdr__tel:hover{color:var(--lime)}
.callbtn{display:none;align-items:center;justify-content:center;gap:9px;width:100%;
  padding:15px 20px;margin:0 0 14px;border:1px solid var(--lime);color:var(--lime);
  background:transparent;font-family:var(--body);font-weight:600;font-size:1rem;
  text-decoration:none;border-radius:2px}
.callbtn:hover{background:rgba(204,255,51,.08)}
.callbtn small{display:block;font-weight:400;font-size:.76rem;color:var(--muted)}
@media(max-width:620px){.callbtn{display:flex;flex-direction:column;gap:2px}}

/* CALL INVITATION GATE. Operator 23 Aug 2026: "calls are fine for NZ only", said of the
   Canada, Ireland and New Zealand campaign. The class is set by an inline head script from
   the visitor's own timezone. The NUMBER stays in the footer everywhere; only the
   invitation is suppressed. */
.wr-nocall .callbtn{display:none !important}
.wr-nocall .hdr__tel{display:none !important}

/* SHOP VERSUS STORE. Two columns on a desktop, stacked on a phone. The two lists reuse
   .inc and .exc so the ticks and crosses match the rest of the site rather than
   introducing a second visual language for the same idea. */
.cmp{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,40px);
     margin-top:clamp(24px,3vw,36px)}
.cmp__col h3{margin:0 0 14px;font-size:1.05rem}
@media(max-width:820px){.cmp{grid-template-columns:1fr}}

/* ---------------------------------------------------------------------------
   INTRODUCTORY PRICING BAR. Added 25 Aug 2026. Shared by every page paid traffic
   lands on: /pricing/, /online-store/, /website-rebuild/.
   IT ANCHORS ON THE 1 OCTOBER PRICE, NEVER ON A FORMER ONE, AND NOTHING IS EVER
   STRUCK THROUGH. Watchroute went live last week and has sold no builds, so a
   struck-out higher figure would represent a saving nobody has been charged.
   `wr-sale-over` is set by the deadline script on each page once 1 October
   arrives, so the bar removes itself rather than waiting for somebody to notice.
   --------------------------------------------------------------------------- */
.salebar{background:var(--lime);color:#08080a}
.salebar__in{display:flex;flex-wrap:wrap;align-items:baseline;gap:3px 16px;padding:11px 0}
.salebar__tag{font-family:var(--mono);font-size:.63rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;opacity:.66}
.salebar__msg{font-family:var(--display);font-weight:800;font-size:clamp(.98rem,2.2vw,1.24rem);letter-spacing:-.025em;line-height:1.25}
.salebar__sub{font-size:.83rem;font-weight:600;opacity:.72}
.wr-sale-over .salebar{display:none}

/* THE BAR HAS TO SIT ABOVE A FIXED HEADER, AND ITS HEIGHT IS NOT A CONSTANT.
   `.hdr` is position:fixed with inset:0 0 auto, so anything placed at the top of the
   document flow ends up UNDERNEATH it. Hard-coding a header offset does not work either:
   the bar wraps to two and sometimes three lines on a phone, so its height changes with
   the viewport. The deadline script measures it and publishes --sb-h, and these rules
   move the header and the page content down by exactly that. If the script never runs,
   --sb-h falls back to 0 and the layout is precisely what it was before today. */
.salebar{position:fixed;top:0;left:0;right:0;z-index:101}
.has-salebar .hdr{top:var(--sb-h,0px)}
.has-salebar main{padding-top:var(--sb-h,0px)}

/* CALL LINE IN THE HERO. Added 26 Aug 2026 on the operator's instruction that a visitor
   should be able to pick the phone up and ring from the landing page. The header number
   is small and the .callbtn sits above the form near the foot of the page, so on a long
   sales page neither is in front of somebody who is ready to call in the first ten
   seconds. This one is, on a phone and on a desktop, and it is the same +61 number so it
   dials from Australia and from overseas without a second version to keep in step. */
.herocall{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:22px 0 0}
.herocall__a{display:inline-flex;align-items:baseline;gap:9px;text-decoration:none;
  padding:12px 20px;border:1px solid var(--lime);border-radius:2px;color:var(--lime);
  font-weight:700;font-size:1.12rem;letter-spacing:.01em;white-space:nowrap;
  transition:background .3s}
.herocall__a:hover{background:rgba(204,255,51,.08)}
.herocall__a span{font-weight:500;font-size:.8rem;color:var(--muted)}
.herocall__n{font-size:.84rem;color:var(--muted);line-height:1.5}
@media(max-width:620px){.herocall__a{width:100%;justify-content:center;font-size:1.18rem}}

/* ── SERVICES MEGA MENU, 30 Aug 2026 ────────────────────────────────────────
   Ten service pages under one nav item, grouped so nobody has to read a list
   of ten to find the one they came for. Desktop only by inheritance: `.nav`
   is already display:none below 880px, and the footer carries the same links
   for phones, so nothing here needs a mobile branch of its own.

   Opens on hover AND on focus-within, so it works from the keyboard. The
   pad above the panel is deliberate: the header is 80px tall and the panel
   hangs below it, so without a bridging pad the pointer crosses dead space
   on the way down and the menu shuts under the cursor. */
.nav__has{position:relative;display:inline-flex;align-items:center}
.nav__has>a::after{display:none}
.nav__has>a{display:inline-flex;align-items:center;gap:6px}
.nav__has>a i{width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .3s var(--ease),color .3s;font-style:normal}
.nav__has:hover>a,.nav__has:focus-within>a{color:var(--paper)}
.nav__has:hover>a i,.nav__has:focus-within>a i{transform:rotate(225deg) translate(-1px,-1px)}
.nav__mega{position:absolute;top:100%;left:50%;margin-top:22px;transform:translate(-50%,8px);
  display:grid;grid-template-columns:repeat(3,minmax(178px,1fr));gap:16px 30px;
  padding:26px 30px 24px;background:rgba(13,13,16,.97);backdrop-filter:blur(18px) saturate(140%);
  border:1px solid var(--line);box-shadow:0 26px 60px rgba(0,0,0,.55);
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .24s var(--ease),transform .24s var(--ease),visibility .24s}
.nav__mega::before{content:"";position:absolute;left:0;right:0;top:-24px;height:24px}
.nav__has:hover .nav__mega,.nav__has:focus-within .nav__mega{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0)}
.nav__ct{display:block;font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--lime);margin-bottom:14px}
.nav__mega a{display:block;font-size:.84rem;color:var(--muted);padding:6px 0;line-height:1.35;white-space:nowrap}
.nav__mega a::after{display:none}
.nav__mega a:hover{color:var(--paper)}
.nav__mega a b{display:block;font-weight:500;color:inherit}
.nav__mega a small{display:block;font-size:.72rem;color:var(--dim);white-space:normal;max-width:22ch;margin-top:2px}
.nav__mega a:hover small{color:var(--muted)}
.nav__all{grid-column:1/-1;border-top:1px solid var(--line-soft);margin-top:4px;padding-top:14px}
.nav__all a{font-size:.8rem;color:var(--lime)!important}

/* ── THREE LINES OF WORK, 30 Aug 2026 ───────────────────────────────────────
   The services index, grouped. Lives in the shared stylesheet rather than in
   one page's inline block, because this site is two families of page and a
   rule added to only one of them covers eight pages out of nineteen while
   looking, from the file, like it covers all of them. */
.sgrp{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,30px)}
@media(max-width:940px){.sgrp{grid-template-columns:1fr}}
.sgrp__c{border:1px solid var(--line-soft);background:var(--near);padding:clamp(24px,2.8vw,34px);display:flex;flex-direction:column}
.sgrp__c h3{font-size:clamp(1.2rem,2.1vw,1.55rem);margin:12px 0 10px}
.sgrp__c>p{color:var(--muted);font-weight:300;font-size:.93rem;line-height:1.6;margin-bottom:20px}
.sgrp__l{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:2px;border-top:1px solid var(--line-soft)}
.sgrp__l li{border-bottom:1px solid var(--line-soft)}
.sgrp__l a{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:11px 0;
  font-size:.9rem;color:var(--paper);font-weight:400;transition:color .25s}
.sgrp__l a:hover{color:var(--lime)}
.sgrp__l a span{color:var(--dim);font-size:.78rem;font-weight:300;white-space:nowrap}
.sgrp__go{margin-top:auto;align-self:flex-start;font-size:.86rem;font-weight:500;color:var(--lime);text-decoration:none}
.sgrp__go:hover{text-decoration:underline}