/*
  Direction B · Harbour Night. Motion language "Squeegee": a sky-blue blade wipes text into view,
  the way a squeegee pass reveals clear glass.
  Radius rule: all interactive controls are pills; photos and panels are square-cornered (0).
  Desktop: type index with a pointer-following photo. Touch: swipe reel with scroll-driven parallax.
*/
:root{
  --ground:#0F1C24; --surface:#172A34; --raise:#1E3440; --ink:#EAF0EE; --muted:#9DB0B3;
  --sky:#A8D8F0; --on-sky:#0F1C24;
  --line:rgba(234,240,238,.14); --dim:rgba(234,240,238,.26);
  --display:"Bricolage Grotesque","Arial Narrow","Helvetica Neue",system-ui,sans-serif;
  --text:"Hanken Grotesk","Helvetica Neue",system-ui,sans-serif;
  --ease-out:cubic-bezier(.23,1,.32,1); --ease-in-out:cubic-bezier(.77,0,.175,1);
  --pad:clamp(20px,5vw,56px);
  --wrap:min(1280px, 100% - 2*var(--pad));
  --logo:var(--ink); --accent-ui:var(--sky); --dirs-bg:#0A141A; --dirs-fg:#DCE6E4;
  --sel-bg:var(--sky); --sel-fg:var(--on-sky); --scroll-thumb:rgba(168,216,240,.4);
  --ft-bg:#0A141A; --ft-fg:var(--ink); --ft-muted:#A7B8BB;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:80px;background:var(--ground)}
body{margin:0;background:var(--ground);color:var(--ink);font:400 17px/1.6 var(--text);-webkit-tap-highlight-color:transparent;overflow-x:clip}
img{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3{font-family:var(--display);margin:0;text-wrap:balance;font-weight:600}
p{margin:0}
.wrap{width:var(--wrap);margin-inline:auto}
:focus-visible{outline:2px solid var(--sky);outline-offset:3px;border-radius:4px}
.ph{display:inline-flex;align-items:center;font:600 11px/1 var(--text);letter-spacing:.06em;text-transform:uppercase;color:#FFD99A;border:1px dashed #D9A441;background:rgba(217,164,65,.12);padding:4px 7px;border-radius:3px;vertical-align:middle;white-space:nowrap}


/* ---------- Squeegee wipe ---------- */
.wipe{position:relative;display:block}
.wipe .t{display:block;position:relative}
.wipe[data-text]::before{content:attr(data-text);position:absolute;inset:0;color:var(--dim);pointer-events:none}
.wipe::after{content:"";position:absolute;inset:-.04em -.2em;pointer-events:none;opacity:0;
  background:linear-gradient(90deg,transparent calc(100% - .14em),var(--sky) calc(100% - .14em))}
@media (prefers-reduced-motion:no-preference){
  .wipe.play .t{animation:wipe-t .95s var(--ease-in-out) both}
  .wipe.play::after{animation:wipe-b .95s var(--ease-in-out) both}
  @supports (animation-timeline: view()){
    .wipe.sd .t{animation:wipe-t linear both;animation-timeline:view();animation-range:entry 30% cover 38%}
    .wipe.sd::after{animation:wipe-b linear both;animation-timeline:view();animation-range:entry 30% cover 38%}
  }
}
@keyframes wipe-t{from{clip-path:inset(-.2em 100% -.2em 0)}to{clip-path:inset(-.2em 0 -.2em 0)}}
@keyframes wipe-b{0%{opacity:1;clip-path:inset(0 100% 0 0);transform:translateX(-.2em)}85%{opacity:1}100%{opacity:0;clip-path:inset(0);transform:translateX(0)}}

/* ---------- Header ---------- */
.sentinel{position:absolute;top:0;height:1px;width:1px}
.hdr{position:sticky;top:0;z-index:30;transition:background .35s ease,box-shadow .35s ease}
.hdr.stuck{background:rgba(15,28,36,.86);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line)}
.hdr .wrap{display:flex;align-items:center;gap:18px;height:68px}
.nav{display:flex;gap:4px}
.nav a{text-decoration:none;font-size:15px;font-weight:500;padding:10px 14px;border-radius:999px;color:var(--muted);transition:color .2s ease,background .2s ease}
.nav a:active{background:var(--line);color:var(--ink)}
.tel{display:inline-flex;align-items:center;gap:8px;text-decoration:none;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap;padding:12px 4px}
/* The quote button: a sky circle that grows into a labelled pill on hover; always labelled on touch */
.go{position:relative;display:inline-flex;align-items:center;gap:0;height:48px;padding:0 6px 0 20px;border-radius:999px;background:var(--sky);color:var(--on-sky);font:700 15px/1 var(--text);text-decoration:none;border:0;cursor:pointer;white-space:nowrap;transition:transform .14s var(--ease-out)}
.go .ic{display:grid;place-items:center;width:36px;height:36px;margin-left:12px;border-radius:999px;background:var(--on-sky);color:var(--sky);transition:transform .5s var(--ease-out)}
.go .ic .i{width:17px;height:17px}
.go:active{transform:scale(.96)}
.go--ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--dim)}
.go--ghost .ic{background:var(--line);color:var(--ink)}
.menu-btn .i{width:18px;height:18px}
.menu-btn{display:none;gap:8px;align-items:center;height:48px;padding:0 18px;border-radius:999px;border:0;background:var(--raise);color:var(--ink);font:600 15px/1 var(--text);cursor:pointer;transition:background .2s ease,transform .14s var(--ease-out)}
.menu-btn:active{transform:scale(.96);background:#28424F}
.drawer{position:fixed;inset:0;z-index:40;background:var(--ground);display:grid;grid-template-rows:auto 1fr auto;padding:0 var(--pad) 28px;clip-path:circle(0 at calc(100% - 50px) 34px);visibility:hidden;transition:clip-path .6s var(--ease-in-out),visibility 0s linear .6s}
.drawer.open{clip-path:circle(150% at calc(100% - 50px) 34px);visibility:visible;transition:clip-path .7s var(--ease-in-out),visibility 0s}
.drawer .top{display:flex;justify-content:space-between;align-items:center;height:68px}
.drawer .top .brand{margin-right:auto}
.drawer nav{display:grid;align-content:center;gap:4px}
.drawer nav a{text-decoration:none;font:600 clamp(40px,12vw,64px)/1.05 var(--display);font-variation-settings:"wdth" 80;letter-spacing:-.02em;min-height:56px;opacity:0;transform:translateY(24px);transition:opacity .3s ease,transform .6s var(--ease-out),color .2s ease}
.drawer.open nav a{opacity:1;transform:none}
.drawer.open nav a:nth-child(1){transition-delay:.18s}.drawer.open nav a:nth-child(2){transition-delay:.23s}.drawer.open nav a:nth-child(3){transition-delay:.28s}.drawer.open nav a:nth-child(4){transition-delay:.33s}
.drawer nav a:active{color:var(--sky)}
.drawer .foot{display:grid;gap:12px}
@media (hover:hover) and (pointer:fine){
  .nav a:hover{color:var(--ink);background:var(--line)}
  .go:hover .ic{transform:rotate(-45deg)}
  .tel:hover{color:var(--sky)}
}
@media (max-width:920px){ .nav,.hdr .tel,.hdr .go{display:none} .menu-btn{display:inline-flex;align-items:center} }

/* ---------- Hero ---------- */
.hero{position:relative;margin-top:-68px;min-height:min(820px,100svh);display:grid;align-items:end;isolation:isolate;overflow:hidden}
.hero .bg{position:absolute;inset:0;z-index:-1}
.hero .bg img{width:100%;height:100%;object-fit:cover;object-position:60% 40%}
.hero .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,28,36,.55) 0%,rgba(15,28,36,.15) 35%,rgba(15,28,36,.82) 72%,var(--ground) 100%)}
.hero .wrap{padding:140px 0 clamp(40px,6vw,72px);display:grid;grid-template-columns:1fr auto;gap:28px;align-items:end}
.hero h1{font-size:clamp(56px,10.5vw,152px);line-height:.86;letter-spacing:-.035em;font-variation-settings:"wdth" 78,"opsz" 96;font-weight:650;max-width:9.5ch}
.hero .side{display:grid;gap:22px;max-width:330px;padding-bottom:10px}
.hero .side p{color:#C8D5D6;font-size:18px}
@media (prefers-reduced-motion:no-preference){
  .hero .bg img{animation:hero-zoom 2.4s var(--ease-out) both}
  .hero .side{animation:lift .9s var(--ease-out) both .75s}
}
@keyframes hero-zoom{from{transform:scale(1.12)}to{transform:scale(1)}}
@keyframes lift{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@media (max-width:820px){
  .hero{min-height:0}
  .hero .wrap{grid-template-columns:1fr;padding-top:300px}
  .hero .side{max-width:none}
  .hero .side .go{justify-self:start}
}

/* ---------- Service index (fine pointers) ---------- */
section.block{padding:clamp(72px,10vw,140px) 0}
.h2{font-size:clamp(40px,6vw,88px);line-height:.92;letter-spacing:-.03em;font-variation-settings:"wdth" 82,"opsz" 96;max-width:14ch}
.lead{color:var(--muted);max-width:50ch;font-size:18px;margin-top:20px}
.index{list-style:none;margin:clamp(40px,5vw,64px) 0 0;padding:0;box-shadow:0 -1px 0 var(--line)}
.irow{box-shadow:0 1px 0 var(--line)}
.irow a{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:24px;padding:14px 0;text-decoration:none;transition:opacity .35s ease}
.irow .nm{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 22px;max-width:calc(100% - 320px)}
.irow h3{font-size:clamp(38px,5.4vw,78px);line-height:1;letter-spacing:-.03em;font-variation-settings:"wdth" 80,"opsz" 96;font-weight:600;transition:transform .6s var(--ease-out),color .3s ease}
.irow .d{color:var(--muted);font-size:15px;opacity:0;transform:translateX(-10px);transition:opacity .35s ease,transform .6s var(--ease-out)}
.irow .ar .i{width:20px;height:20px}
.irow .ar{display:grid;place-items:center;width:52px;height:52px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line);transition:background .3s ease,color .3s ease,transform .6s var(--ease-out),box-shadow .3s ease}
.index:is(:hover,:focus-within) .irow a{opacity:.32}
.index .irow a:is(:hover,:focus-visible){opacity:1}
.irow a:is(:hover,:focus-visible) h3{transform:translateX(18px);color:var(--sky)}
.irow a:is(:hover,:focus-visible) .d{opacity:1;transform:none}
.irow a:is(:hover,:focus-visible) .ar{background:var(--sky);color:var(--on-sky);box-shadow:none;transform:rotate(-45deg)}
.irow a:focus-visible{outline:none}
.follow{position:fixed;left:0;top:0;width:260px;height:325px;pointer-events:none;z-index:25;opacity:0;transform:translate3d(-999px,0,0);transition:opacity .3s ease}
.follow.on{opacity:1}
.follow .fr{position:absolute;inset:0;overflow:hidden;clip-path:inset(0 100% 0 0);transition:clip-path .55s var(--ease-in-out)}
.follow .fr::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent calc(100% - 3px),var(--sky) calc(100% - 3px));transform:translateX(-100%);opacity:0}
.follow.on .fr{clip-path:inset(0)}
.follow.on .fr::after{animation:blade .55s var(--ease-in-out) both}
.follow img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.12);transition:opacity .35s ease,transform .8s var(--ease-out)}
.follow img.on{opacity:1;transform:scale(1)}
.follow-cap{position:absolute;left:0;top:100%;margin:10px 0 0;font-size:14px;color:var(--sky);white-space:nowrap;opacity:0;transform:translateY(-6px);transition:opacity .3s ease .15s,transform .5s var(--ease-out) .15s}
.follow.on .follow-cap{opacity:1;transform:none}
@media (hover:hover) and (pointer:fine){ .irow .d{display:none} .irow .nm{max-width:calc(100% - 330px)} }

/* ---------- Service reel (touch) ---------- */
.reel-wrap{display:none;margin-top:36px}
.reel{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 var(--pad) 8px;scroll-padding-inline:var(--pad);scrollbar-width:none;overscroll-behavior-x:contain;scroll-timeline:--reel inline}
.reel::-webkit-scrollbar{display:none}
.card{flex:0 0 min(78vw,380px);scroll-snap-align:start;background:var(--surface);display:grid;grid-template-rows:auto 1fr;text-decoration:none;overflow:clip;transition:transform .14s var(--ease-out)}
.card:active{transform:scale(.98)}
.card .cap{display:grid}
.card .ph-img{display:block;aspect-ratio:4/5;overflow:clip;position:relative}
.card .ph-img img{width:100%;height:100%;object-fit:cover;transform:scale(1.18)}
.card .cap{padding:18px 18px 20px;display:grid;gap:6px}
.card .cap-t{display:block;font:600 30px/1.05 var(--display);letter-spacing:-.02em;font-variation-settings:"wdth" 82}
.card .cap-d{display:block;color:var(--muted);font-size:15px}
.card .more .i{width:16px;height:16px}
.card .more{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:600;color:var(--sky)}
.track{height:2px;background:var(--line);margin:18px var(--pad) 0;position:relative;overflow:hidden}
.track i{position:absolute;inset:0;background:var(--sky);transform-origin:left;transform:scaleX(.125)}
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline: view(inline)){
    .card .ph-img img{animation:reel-par linear both;animation-timeline:view(inline);animation-range:cover}
    .card .cap{animation:cap-in linear both;animation-timeline:view(inline);animation-range:entry 40% contain 10%}
  }
}
@keyframes reel-par{from{transform:scale(1.18) translateX(9%)}to{transform:scale(1.18) translateX(-9%)}}
@keyframes cap-in{from{opacity:.25;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (max-width:600px){ .irow h3{font-size:32px} .irow .nm{max-width:none} .irow .d{display:none} }
@media (max-width:1100px){ .irow .nm{max-width:calc(100% - 280px)} .irow .d{flex-basis:100%} }
@media (hover:none),(pointer:coarse){
  .index,.follow{display:none}
  .reel-wrap{display:block}
}

/* ---------- Details marquee ---------- */
.details{padding:30px 0;box-shadow:0 -1px 0 var(--line),0 1px 0 var(--line);overflow:hidden;background:var(--surface)}
.marq{display:flex;width:max-content;gap:0}
.marq ul{list-style:none;display:flex;margin:0;padding:0}
.marq li{display:flex;align-items:center;gap:28px;padding-right:28px;font:500 clamp(22px,2.6vw,34px)/1 var(--display);font-variation-settings:"wdth" 85;white-space:nowrap}
.marq li::after{content:"";width:2px;height:22px;border-radius:2px;background:var(--sky);transform:rotate(28deg)}
@media (prefers-reduced-motion:no-preference){
  .marq{animation:marq 48s linear infinite}
  .details:is(:hover,:focus-within) .marq{animation-play-state:paused}
}
@keyframes marq{to{transform:translateX(-50%)}}
.details .cap{width:var(--wrap);margin:0 auto 18px;color:var(--muted);font-size:15px}

/* ---------- Guarantee: words brighten as you scroll ---------- */
.promise{max-width:22ch;font:600 clamp(34px,5vw,72px)/1.1 var(--display);letter-spacing:-.025em;font-variation-settings:"wdth" 86;view-timeline:--promise block}
.promise .w{color:var(--ink)}
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline: view()){
    .promise .w{color:var(--dim);animation:bright linear both;animation-timeline:--promise}
  }
}
@keyframes bright{to{color:var(--ink)}}
.promise .hl{color:var(--sky)}
@keyframes bright-hl{to{color:var(--sky)}}
.promise-note{margin-top:28px;display:flex;gap:12px;flex-wrap:wrap;align-items:center;color:var(--muted)}

/* ---------- Process timeline ---------- */
.proc{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(32px,6vw,96px);align-items:start}
.proc .stick{position:sticky;top:110px}
.steps{list-style:none;margin:0;padding:0 0 0 40px;position:relative;view-timeline:--steps block}
.steps::before,.steps::after{content:"";position:absolute;left:11px;top:8px;bottom:8px;width:2px;background:var(--line)}
.steps::after{background:var(--sky);transform-origin:top;transform:scaleY(1)}
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline: view()){ .steps::after{animation:fill linear both;animation-timeline:--steps;animation-range:entry 40% exit 30%} }
}
@keyframes fill{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.steps li{position:relative;padding:0 0 48px}
.steps li:last-child{padding-bottom:0}
.steps li::before{content:"";position:absolute;left:-36px;top:6px;width:16px;height:16px;border-radius:999px;background:var(--ground);box-shadow:inset 0 0 0 2px var(--sky)}
.steps h3{font-size:clamp(26px,2.6vw,36px);letter-spacing:-.02em;font-variation-settings:"wdth" 86}
.steps p{color:var(--muted);margin-top:8px;max-width:44ch}
@media (max-width:820px){ .proc{grid-template-columns:1fr} .proc .stick{position:static} }

/* ---------- Reviews ---------- */
.revs{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:1px;background:var(--line);margin-top:clamp(40px,5vw,64px);box-shadow:0 0 0 1px var(--line)}
.rev{margin:0;background:var(--ground);padding:clamp(24px,3vw,40px);display:grid;gap:24px;align-content:space-between}
.rev blockquote{margin:0;font:500 clamp(20px,1.8vw,24px)/1.3 var(--display);font-variation-settings:"wdth" 92}
.rev--real{background:var(--sky);color:var(--on-sky)}
.rev--real blockquote{font-size:clamp(30px,3.4vw,46px);line-height:1.1;letter-spacing:-.02em;font-weight:650;font-variation-settings:"wdth" 82}
.rev figcaption{display:grid;gap:8px;justify-items:start;font-size:15px;color:var(--muted)}
.rev figcaption b{color:var(--ink);font-weight:600}
.rev--real figcaption,.rev--real figcaption b{color:var(--on-sky)}
.src{font:700 11px/1 var(--text);letter-spacing:.06em;text-transform:uppercase;box-shadow:inset 0 0 0 1px rgba(15,28,36,.45);padding:5px 7px;border-radius:3px}
@media (max-width:900px){ .revs{grid-template-columns:1fr} }

/* ---------- Quote ---------- */
.q{background:var(--surface);padding:clamp(28px,5vw,64px);display:grid;gap:36px}
.q .h2{max-width:12ch}
.qform{display:grid;grid-template-columns:1.2fr 1fr 1fr auto;gap:12px;align-items:end}
.field{display:grid;gap:8px}
.field label{font-weight:600;font-size:15px}
.field select,.field input{appearance:none;font:400 16px/1.2 var(--text);height:56px;padding:0 16px;border-radius:14px;border:1px solid var(--dim);background:var(--ground);color:var(--ink);width:100%;transition:border-color .2s ease,box-shadow .2s ease}
.field select{background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 22px) 25px,calc(100% - 16px) 25px;background-size:6px 6px;background-repeat:no-repeat;padding-right:40px}
.field input::placeholder{color:#8599A0}
.field select:focus,.field input:focus{outline:0;border-color:var(--sky);box-shadow:0 0 0 3px rgba(168,216,240,.22)}
.qform .go{height:56px}
.q .foot{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 28px;color:var(--muted);font-size:15px;align-items:center}
.q .foot li{display:flex;align-items:center;gap:10px;min-height:44px}
.q .foot .i{color:var(--sky)}
.q .foot a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink);font-weight:600}
.status{min-height:1.6em;color:var(--sky);font-weight:500}
.status.err{color:#FFB4A8}
@media (max-width:920px){ .qform{grid-template-columns:1fr} .qform .go{justify-self:stretch;justify-content:space-between} }

/* ---------- Footer ---------- */

@media (prefers-reduced-motion:reduce){ .follow{display:none} .wipe[data-text]::before{content:none} }
}
@media print{ *,*::before,*::after{animation:none!important} .wipe[data-text]::before{content:none} .promise .w{color:var(--ink)} }

/* ---------- Motion pass 2 ---------- */
@keyframes blade{0%{transform:translateX(-100%);opacity:1}85%{opacity:1}100%{transform:translateX(0);opacity:0}}
.stars{--star:var(--sky)}
.rev .ex{color:var(--muted)}
.rev{position:relative;overflow:clip;transition:background-color .35s ease}
.rev::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;background:linear-gradient(90deg,transparent calc(100% - 3px),var(--blade,var(--sky)) calc(100% - 3px))}
.rev--real{--blade:var(--on-sky)}
.rev:not(.rev--real):active{background:var(--raise)}
@media (hover:hover) and (pointer:fine){
  .rev:not(.rev--real):hover{background:var(--surface)}
  .rev blockquote{transition:transform .6s var(--ease-out)}
  .rev:hover blockquote{transform:translateX(6px)}
}
.q .lead{margin-top:-18px}
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline: view()){
    /* Reviews: a blade sweeps each card clear, one after another */
    .revs{view-timeline:--revs block}
    .rev::after{animation:blade linear both;animation-timeline:--revs}
    .rev>*{animation:clear-up linear both;animation-timeline:--revs}
      .rev:nth-child(1)::after,.rev:nth-child(1)>*{animation-range:entry 0% entry 65%}
    .rev:nth-child(2)::after,.rev:nth-child(2)>*{animation-range:entry 15% entry 82%}
    .rev:nth-child(3)::after,.rev:nth-child(3)>*{animation-range:entry 30% entry 100%}
    /* Timeline: each dot fills as the progress line reaches it */
    .steps li::before{animation:dot-fill linear both;animation-timeline:view();animation-range:entry 60% cover 42%}
    .steps li>*{animation:clear-up linear both;animation-timeline:view();animation-range:entry 40% cover 40%}
    /* Quote: fields arrive in reading order */
    .qform{view-timeline:--qform block}
    .qform>*{animation:field-in linear both;animation-timeline:--qform}
    .qform>*:nth-child(1){animation-range:entry 10% entry 60%}
    .qform>*:nth-child(2){animation-range:entry 20% entry 70%}
    .qform>*:nth-child(3){animation-range:entry 30% entry 80%}
    .qform>*:nth-child(4){animation-range:entry 40% entry 90%}
    .q .foot li{animation:clear-up linear both;animation-timeline:view();animation-range:entry 20% entry 80%}
  }
}
@keyframes clear-up{from{opacity:.35}to{opacity:1}}
@keyframes dot-fill{from{background:var(--ground);box-shadow:inset 0 0 0 2px var(--sky)}to{background:var(--sky);box-shadow:inset 0 0 0 2px var(--sky)}}
@keyframes field-in{from{opacity:.35;transform:translateY(18px)}to{opacity:1;transform:none}}