/* ============================================================
   pro4labs — Working Dog Intelligence
   Static build for S3 + CloudFront
   ============================================================ */
:root{
  --teal:#296A6D;
  --teal-mid:#1f585b;
  --teal-deep:#123b3e;
  --orange:#E18235;
  --orange-deep:#c96e26;
  --red:#E98076;
  --gold:#CA9E67;
  --cream:#EDD4B5;
  --sand:#EFE1C7;
  --paper:#FBF7F0;
  --ink:#22302e;
  --font:"Helvetica Neue",Helvetica,Arial,sans-serif;
  --pad-x:clamp(22px,5vw,72px);
  --pad-y:clamp(40px,7vh,100px);
  --maxw:1200px;
  --measure:min(100%,47rem);
  color-scheme:light;
}
@media (min-width:1800px){ :root{ --maxw:1360px; } }

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{margin:0;font-family:var(--font);background:var(--paper);color:var(--ink);
  font-size:clamp(1.05rem,0.5vw + 0.97rem,1.25rem);line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;}
h1,h2,h3,h4{margin:0;font-weight:700;line-height:1.04;letter-spacing:-0.022em;text-wrap:balance;color:var(--teal);}
p{margin:0;text-wrap:pretty;}
img{display:block;max-width:100%;height:auto;}
a{color:var(--orange);text-decoration:none;}
a:hover{text-decoration:underline;}
:focus-visible{outline:3px solid var(--orange);outline-offset:3px;border-radius:3px;}

.skip{position:absolute;left:-9999px;top:0;background:#fff;color:var(--teal-deep);padding:0.7em 1.1em;z-index:200;font-weight:700;border-radius:0 0 8px 0;}
.skip:focus{left:0;}

.band{position:relative;width:100%;}
.inner{position:relative;max-width:var(--maxw);margin:0 auto;padding:var(--pad-y) max(var(--pad-x),3.75rem) var(--pad-y) var(--pad-x);z-index:2;}
.dark{color:#e9f0ec;}
.dark h1,.dark h2,.dark h3{color:#fff;}

.kicker{font-size:0.98rem;letter-spacing:0.04em;font-weight:700;color:var(--orange-deep);font-variant-numeric:tabular-nums;margin-bottom:0.9em;text-transform:uppercase;}
.kicker.word{letter-spacing:0.2em;font-size:0.82rem;}

h2{font-size:clamp(2.05rem,1rem + 4vw,3.6rem);}
h3{font-size:clamp(1.35rem,0.8rem + 1.8vw,2.05rem);margin-bottom:0.6em;}

.prose{max-width:var(--measure);}
.prose p + p{margin-top:1.15em;}
.lead{font-size:clamp(1.35rem,0.9rem + 1.8vw,2.35rem);line-height:1.28;font-weight:500;letter-spacing:-0.015em;max-width:min(100%,30ch);}
.subhead{font-size:clamp(1.3rem,0.8rem + 1.6vw,2.05rem);font-weight:700;color:var(--teal);line-height:1.15;letter-spacing:-0.018em;max-width:min(100%,22ch);}

/* ===== Photo bands ===== */
.photo{overflow:hidden;background:var(--teal-deep);isolation:isolate;}
.photo > .bg{position:absolute;inset:0;z-index:0;display:block;line-height:0;}
.photo > .bg img{width:100%;height:100%;object-fit:cover;}
.photo > .scrim{position:absolute;inset:0;z-index:1;}
.photo .inner{color:#fff;}
.photo h2,.photo h3{color:#fff;}
.photo .prose{color:#f3f6f3;text-shadow:0 1px 22px rgba(8,28,29,0.4);}
.photo .kicker{color:var(--cream);text-shadow:0 1px 12px rgba(8,28,29,0.6);}
.photo h2{text-shadow:0 2px 28px rgba(8,28,29,0.45);}

.grid{display:grid;gap:clamp(28px,5vw,64px);align-items:center;}
.grid-2{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}

/* ===== Full-bleed image band ===== */
.imgband{line-height:0;}
.imgband picture{display:block;}
.imgband img{width:100%;height:clamp(300px,52vh,600px);object-fit:cover;object-position:50% 42%;}
@media (orientation:portrait){ .imgband img{height:clamp(260px,40vh,500px);object-position:50% 40%;} }

/* ===== HERO ===== */
.hero{min-height:clamp(560px,90vh,920px);min-height:clamp(560px,90svh,920px);display:flex;}
.hero .bg img{object-position:50% 20%;}
@media (orientation:portrait){ .hero .bg img{object-position:56% 15%;} }
.hero .scrim{background:linear-gradient(180deg,
    rgba(251,247,240,0.9) 0%, rgba(251,247,240,0.4) 8%, rgba(251,247,240,0) 19%,
    rgba(18,59,62,0) 38%, rgba(18,59,62,0.34) 55%, rgba(18,59,62,0.72) 78%, rgba(18,59,62,0.96) 100%);}
.hero .inner{display:flex;flex-direction:column;width:100%;padding-left:var(--pad-x);padding-right:var(--pad-x);padding-top:clamp(22px,3vh,42px);padding-bottom:clamp(38px,6vh,76px);}
.hero__top{display:flex;justify-content:flex-end;}
.hero__logo{width:clamp(190px,24vw,340px);height:auto;}
.hero__bottom{margin-top:auto;}
.hero h1{color:#fff;font-size:clamp(2.2rem,1rem + 6.2vw,5.2rem);line-height:1.0;max-width:min(100%,15ch);
  text-shadow:0 2px 26px rgba(8,28,29,0.75), 0 1px 3px rgba(8,28,29,0.55);}
@media (max-width:700px){ .hero__top{justify-content:flex-start;} }
@media (orientation:landscape) and (max-height:560px){
  .hero{min-height:100svh;}
  .hero h1{font-size:clamp(1.9rem,0.6rem + 4.4vw,3rem);}
  .hero__logo{width:clamp(150px,17vw,220px);}
}
.cta{display:inline-flex;align-items:center;gap:0.6em;margin-top:clamp(26px,3.5vh,40px);
  background:var(--orange);color:#fff;font-weight:700;font-size:1.06rem;padding:0.95em 2.3em;border-radius:999px;
  letter-spacing:0.01em;box-shadow:0 20px 40px -18px rgba(180,90,20,0.8);transition:background .18s ease,transform .18s ease;}
.cta:hover{background:var(--orange-deep);text-decoration:none;transform:translateY(-2px);}
.cta::after{content:"\2192";}

/* ===== INTRO ===== */
.intro{background:var(--sand);}
.intro .inner{max-width:1040px;}
.intro h2{max-width:min(100%,20ch);}
.intro h2 .reg{font-size:0.5em;vertical-align:0.55em;}
.intro .body{margin:1.1em 0 1.3em;max-width:min(100%,54ch);color:#33423f;font-size:clamp(1.12rem,0.7rem + 0.8vw,1.4rem);line-height:1.5;}

/* ===== EMPHASIS ===== */
.emph{background:var(--orange);}
.emph .inner{padding-top:clamp(58px,9vh,110px);padding-bottom:clamp(58px,9vh,110px);}
.emph p{font-size:clamp(1.8rem,0.9rem + 3.4vw,3.3rem);line-height:1.12;font-weight:700;color:var(--teal-deep);max-width:min(100%,22ch);letter-spacing:-0.02em;text-wrap:balance;}
.emph .reg{font-size:0.5em;vertical-align:0.55em;}

/* ===== Photo crops ===== */
.cracking .bg img{object-position:68% 38%;}
@media (orientation:portrait){ .cracking .bg img{object-position:72% 40%;} }
.why .bg img{object-position:50% 36%;}
@media (orientation:portrait){ .why .bg img{object-position:52% 30%;} }
.s3open .bg img{object-position:40% 46%;}
@media (orientation:portrait){ .s3open .bg img{object-position:44% 46%;} }

/* ===== PLATFORM ===== */
.platform{background:var(--teal-deep);}
.platform .prose{color:#dfeae6;max-width:min(100%,42ch);}
.devices{margin:0;}
.devices__pair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,1.4vw,18px);align-items:start;}
.devices__pair picture{display:block;width:100%;aspect-ratio:4/3;border-radius:14px;overflow:hidden;background:#0d2f31;
  box-shadow:0 26px 50px -28px rgba(4,18,19,0.8);}
.devices__pair img{width:100%;height:100%;object-fit:cover;}
.devices__pair .handheld img{object-position:50% 50%;}
.devices figcaption{margin-top:clamp(16px,2.6vh,24px);font-size:0.86rem;color:#9fbdb6;max-width:42ch;}
@media (max-width:560px){ .devices__pair{grid-template-columns:1fr 1fr;gap:10px;} }

/* ===== FIVE SOURCES ===== */
.sources-sec{background:var(--paper);}
.s3open{min-height:clamp(360px,52vh,560px);display:flex;}
.s3open .inner{display:flex;flex-direction:column;justify-content:flex-end;}
.sources{list-style:none;margin:0;padding:0;}
.sources li{padding:clamp(18px,2.4vh,28px) 0;border-top:1px solid #e6dcc8;display:grid;grid-template-columns:auto 1fr;gap:clamp(16px,2.2vw,28px);align-items:start;}
.sources li:last-child{border-bottom:1px solid #e6dcc8;}
.sources .num{font-weight:700;color:var(--teal);font-variant-numeric:tabular-nums;padding-top:0.12em;font-size:1.05rem;}
.sources .txt{font-size:clamp(1.06rem,0.6rem + 0.6vw,1.26rem);max-width:70ch;}
.sources .txt b{color:var(--teal);}
.followon .prose{max-width:min(100%,64ch);}
.trainerband img{object-position:50% 32%;}
@media (orientation:portrait){ .trainerband img{object-position:50% 30%;} }

/* ===== HELPING (red sand) ===== */
.helping{background:var(--red);}
.helping h2{color:var(--teal-deep);}
.helping .kicker{color:var(--teal-deep);}
.helping .prose{color:#3a201b;max-width:min(100%,60ch);}

/* ===== BUILT (gold) ===== */
.built{background:var(--gold);}
.built h2{color:var(--teal-deep);}
.built .kicker{color:var(--teal-deep);}
.built .lead{color:var(--teal-deep);}
.built .prose{color:#3d3521;max-width:min(100%,62ch);}

/* ===== CONTACT ===== */
.contact-band{background:var(--paper);}
.contact-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,0.92fr);gap:0;align-items:stretch;border-radius:20px;overflow:hidden;box-shadow:0 40px 80px -40px rgba(10,30,31,0.4);}
.contact-form-col{background:var(--teal-deep);color:#e9f0ec;padding:clamp(30px,5vw,60px);}
.contact-form-col h2{color:#fff;}
.contact-form-col .kicker{color:var(--cream);}
form.contact{margin-top:1.5em;}
.field{margin-bottom:1.1rem;}
.field label{display:block;font-weight:700;color:#fff;margin-bottom:0.4rem;font-size:0.95rem;}
.field input,.field textarea{width:100%;font-family:inherit;font-size:1rem;color:var(--ink);background:#fff;border:1.5px solid transparent;border-radius:10px;padding:0.8em 0.9em;}
.field textarea{min-height:140px;resize:vertical;}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--orange);}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.send{background:var(--orange);color:#fff;font-weight:700;font-family:inherit;font-size:1.02rem;border:none;border-radius:999px;padding:0.9em 2.4em;cursor:pointer;transition:background .18s ease;}
.send:hover{background:var(--orange-deep);}
.send:disabled{opacity:0.6;cursor:default;}
.form-note{font-size:0.85rem;color:#a8bdb7;margin-top:1rem;}
.form-status{margin-top:1rem;font-weight:700;min-height:1.2em;}
.form-status.ok{color:#bfe3c9;}
.form-status.err{color:#f4b8ad;}
.contact-photo-col{position:relative;min-height:320px;}
.contact-photo-col picture{position:absolute;inset:0;display:block;}
.contact-photo-col img{width:100%;height:100%;object-fit:cover;}

/* ===== FOOTER ===== */
footer{background:var(--teal-deep);color:#dbe6e1;}
footer .inner{padding-top:clamp(52px,7vh,92px);padding-bottom:clamp(32px,4vh,50px);}
.footer-top{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:clamp(30px,5vw,64px);align-items:center;margin-bottom:clamp(40px,5vh,64px);}
.footer-line{font-size:clamp(1.35rem,0.8rem + 2vw,2.3rem);font-weight:700;color:#fff;max-width:22ch;line-height:1.16;letter-spacing:-0.015em;}
.founder{margin:0;}
.founder picture{display:block;border-radius:16px;overflow:hidden;box-shadow:0 26px 50px -28px rgba(0,0,0,0.6);}
.founder img{width:100%;aspect-ratio:4/3;object-fit:cover;}
.founder figcaption{font-size:0.85rem;color:#a9c0b8;padding:0.7em 0.2em 0;}
.footer-enq{margin-bottom:clamp(32px,4vh,46px);font-size:1.02rem;color:#cde0da;}
.footer-enq a{color:#fff;text-decoration:underline;}
.footer-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:clamp(24px,4vw,46px);}
.footer-cols h4{color:#fff;font-size:0.78rem;letter-spacing:0.14em;text-transform:uppercase;margin-bottom:0.6em;}
.footer-cols p{color:#b9ccc5;font-size:0.94rem;line-height:1.55;}
.footer-bottom{margin-top:clamp(36px,4vh,54px);padding-top:1.5em;border-top:1px solid rgba(255,255,255,0.15);
  font-size:0.85rem;color:#93aca5;display:flex;flex-wrap:wrap;gap:0.6em 1.6em;align-items:center;}
.footer-mark{width:clamp(172px,20vw,232px);height:auto;margin-bottom:clamp(26px,4vh,38px);}

/* ===== SCROLL ARROWS ===== */
.scroll-arrow{position:fixed;left:50%;transform:translateX(-50%);z-index:80;width:48px;height:48px;border-radius:50%;
  border:1.5px solid rgba(255,255,255,0.5);background:rgba(18,59,62,0.34);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;cursor:pointer;color:#fff;
  transition:opacity .35s ease,background .2s ease,visibility .35s;}
.scroll-arrow svg{width:22px;height:22px;animation:breathe 1s ease-in-out infinite alternate;}
.scroll-arrow.down{bottom:clamp(14px,2.4vh,26px);}
.scroll-arrow.up{top:clamp(14px,2.4vh,26px);}
.scroll-arrow[hidden]{opacity:0;visibility:hidden;pointer-events:none;}
.scroll-arrow:hover{background:rgba(18,59,62,0.6);}
@keyframes breathe{ from{transform:scale(1);} to{transform:scale(1.25);} }
@media (max-width:560px){ .scroll-arrow{width:42px;height:42px;} }

/* ===== VIDEO STUB + OVERLAY ===== */
/* Fixed height in both states: the box only ever grows leftwards, so the
   pointer can never fall outside it mid-transition (which caused a
   mouseleave/mouseenter loop and made the tab flicker). */
.vstub{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:85;
  background:var(--orange);color:#fff;border:none;cursor:pointer;font-family:inherit;font-weight:700;
  border-radius:12px 0 0 12px;box-shadow:-6px 8px 24px -8px rgba(0,0,0,0.4);
  width:56px;height:190px;padding:0;overflow:hidden;text-align:left;line-height:1.3;
  display:flex;align-items:center;justify-content:center;
  transition:width .3s ease,background .2s ease;font-size:0.95rem;}
.vstub .v-short{writing-mode:vertical-rl;transform:rotate(180deg);letter-spacing:0.04em;
  transition:opacity .16s ease;}
.vstub .v-long{position:absolute;left:1.25em;right:1.25em;top:50%;transform:translateY(-50%);
  opacity:0;pointer-events:none;transition:opacity .22s ease .06s;}
.vstub.open{width:270px;background:var(--orange-deep);}
.vstub.open .v-short{opacity:0;}
.vstub.open .v-long{opacity:1;}
@media (max-width:560px){
  .vstub{font-size:0.82rem;height:168px;}
  .vstub.open{width:min(70vw,270px);}
}
@media (prefers-reduced-motion:reduce){ .vstub{transition:background .2s ease;} }

.voverlay{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;padding:clamp(12px,3vw,48px);}
.voverlay[hidden]{display:none;}
.voverlay__backdrop{position:absolute;inset:0;background:rgba(8,24,25,0.82);}
.voverlay__inner{position:relative;width:min(1920px,92vw,calc(88vh * 16 / 9));z-index:1;}
.voverlay video{width:100%;height:auto;aspect-ratio:16/9;border-radius:12px;background:#000;display:block;}
.voverlay__close{position:absolute;top:-14px;right:-14px;width:44px;height:44px;border-radius:50%;border:none;background:#fff;color:var(--teal-deep);font-size:1.5rem;line-height:1;cursor:pointer;box-shadow:0 6px 20px rgba(0,0,0,0.4);}
@media (max-width:560px){ .voverlay__close{top:6px;right:6px;} }

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .scroll-arrow svg{animation:none;}
  .cta{transition:background .18s ease;}
  .cta:hover{transform:none;}
}

/* ===== RESPONSIVE ===== */
@media (max-width:900px){
  .grid-2{grid-template-columns:1fr;}
  .grid-2.media-first .devices{order:-1;}
  .contact-grid{grid-template-columns:1fr;}
  .contact-photo-col{min-height:0;aspect-ratio:4/3;order:-1;}
  .contact-photo-col picture{position:static;}
  .contact-photo-col img{height:100%;}
  .footer-top{grid-template-columns:1fr;}
  .founder{max-width:420px;}
}
@media (max-width:560px){
  .inner{padding-right:max(var(--pad-x),3.25rem);}
  .sources li{grid-template-columns:1fr;gap:0.3em;}
  .sources .num{padding-top:0;}
  .cta{width:100%;justify-content:center;}
}