/* Harbour site, October 2026.
   Fog: the page stands in the same grey water as the first screen.
   White is for things we built, ink is for words, and one warm light per screen.
   Built is square, living is round. Nothing loops; things arrive once and stay. */

:root{
  --ground:#E2E6EA; --sky:#F2F5F8; --water:#CFD5DB;
  --panel:#FFFFFF; --well:#D3D9DF; --line:#C2CAD1;
  --ink:#161616; --slate:#454B52; --steel:#58606A;
  --light:#F3BA32; --on-light:#161616;
  --night:#0F1011; --night-ink:#F2F2F2; --night-soft:rgba(255,255,255,.72);
  --shadow:0 1px 2px rgba(18,22,28,.05),0 14px 34px rgba(18,22,28,.09);
  --float:0 1px 2px rgba(0,0,0,.05),0 16px 36px -14px rgba(16,18,22,.28);
  --sans:"Geist",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  --dock:cubic-bezier(.2,.7,.2,1); --t1:120ms; --t2:240ms; --t3:480ms;
  --pad:clamp(20px,3.4vw,48px);
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
html.home{scroll-snap-type:y proximity}
html.home.assist{scroll-snap-type:none;scroll-behavior:auto} /* with a mouse or trackpad, site-1.js settles the page instead */
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,p,figure,dl,dd,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
button,input,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
[hidden]{display:none!important}
.w{max-width:1120px;margin:0 auto;padding-inline:24px;width:100%}
.mk,.ic{display:block;width:1em;height:1em;flex:none}
.mk .lamp{fill:var(--light)}
.ic2{display:block;width:84px;height:60px;flex:none}
.ic2 .lit{fill:var(--light)}
.skip{position:fixed;left:12px;top:-60px;z-index:20;padding:10px 16px;border-radius:999px;background:var(--ink);color:#fff;font-size:15px;font-weight:520;transition:top var(--t1) linear}
.skip:focus{top:12px}

/* the name and the mark */
.lock{display:inline-flex;align-items:baseline;gap:.266em;font-size:22.5px;line-height:1;font-weight:668;letter-spacing:-.015em;white-space:nowrap}
.lock .mk{width:.71em;height:.71em}

/* buttons: round, because a person is on the other side */
.btn{display:inline-flex;align-items:center;justify-content:center;height:50px;padding:0 24px;border:0;border-radius:999px;font-size:16px;font-weight:520;letter-spacing:-.005em;white-space:nowrap;cursor:pointer;background:var(--light);color:var(--on-light);transition:transform var(--t1) var(--dock),box-shadow var(--t2) var(--dock),background var(--t2) var(--dock),color var(--t2) var(--dock)}
.btn:hover{transform:translateY(-1px);box-shadow:var(--float)}
.btn:active{transform:none;box-shadow:none}
.btn.sm{height:40px;padding:0 18px;font-size:15px}
.btn.ink{background:var(--ink);color:#fff}
.btn.glass{background:rgba(255,255,255,.6);color:var(--ink);box-shadow:inset 0 0 0 1px rgba(22,22,22,.13);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.btn.glass:hover{background:var(--ink);color:#fff;box-shadow:inset 0 0 0 1px var(--ink);transform:none}
.btn[disabled]{opacity:.55;cursor:default;transform:none;box-shadow:none}
.lnk{font-weight:560;background:linear-gradient(currentColor,currentColor) 0 100%/100% 1.5px no-repeat;padding-bottom:3px;transition:background-size var(--t2) var(--dock)}
.lnk:hover{background-size:0 1.5px;background-position:100% 100%}
.acts{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.acts .lnk{margin-left:12px}

/* the bar at the top: clear at the top of a page, glass once you move */
.topbar{position:fixed;inset:0 0 auto 0;z-index:8;padding-top:env(safe-area-inset-top,0px);transition:background var(--t2) var(--dock),box-shadow var(--t2) var(--dock)}
.topbar .in{position:relative;display:flex;align-items:center;justify-content:space-between;gap:20px;height:72px;padding:0 var(--pad)}
.topbar.glass{background:rgba(255,255,255,.78);-webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3);box-shadow:0 1px 0 color-mix(in srgb,var(--ink) 10%,transparent)}
.topbar .links{display:none;align-items:center;gap:30px;font-size:15px;font-weight:450;color:var(--slate)}
.topbar .links a{background:linear-gradient(currentColor,currentColor) 0 100%/0 1.5px no-repeat;padding-bottom:3px;transition:background-size var(--t2) var(--dock),color var(--t2) var(--dock)}
.topbar .links a:hover,.topbar .links a[aria-current]{color:var(--ink);background-size:100% 1.5px}
.topbar .right{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:450}
.topbar .login{display:none;color:var(--slate);margin-right:12px}
.topbar .login:hover{color:var(--ink)}
.mbtn{background:none;border:0;padding:0 6px;height:40px;font-size:15px;font-weight:520;cursor:pointer}
.drop{position:relative;display:inline-flex}
.dd{position:absolute;left:-18px;top:100%;padding-top:12px;opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity var(--t1) linear,transform var(--t2) var(--dock),visibility 0s linear var(--t2)}
.dd span{display:grid;gap:2px;min-width:200px;padding:8px;border-radius:14px;background:color-mix(in srgb,var(--panel) 86%,transparent);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:0 0 0 1px color-mix(in srgb,var(--ink) 8%,transparent),var(--shadow)}
.topbar .dd a{padding:9px 12px;border-radius:8px;background:none;color:var(--ink);white-space:nowrap}
.topbar .dd a:hover{background:var(--ground)}
.drop:hover .dd,.drop:focus-within .dd{opacity:1;visibility:visible;transform:none;transition-delay:0s}
@media (min-width:980px){
  .topbar .links{display:flex;position:absolute;left:50%;transform:translateX(-50%)}
  .topbar .login{display:inline}
  .mbtn{display:none}
}
@media (max-width:420px){.topbar .right .btn{display:none}}

/* the menu on a phone */
.sheet{position:fixed;inset:0;z-index:7;display:flex;flex-direction:column;justify-content:center;padding:96px var(--pad) 40px;background:color-mix(in srgb,var(--ground) 94%,transparent);-webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);overflow:auto;animation:on var(--t2) linear both}
.sheet a{display:block;padding:9px 0;font-size:clamp(26px,7vw,34px);font-weight:480;letter-spacing:-.035em;line-height:1.15;animation:rise var(--t3) var(--dock) both;animation-delay:var(--d,0ms)}
.sheet small{display:block;margin:22px 0 6px;font-size:13px;font-weight:600;color:var(--steel);letter-spacing:0}
.sheet .sub{font-size:19px;font-weight:450;letter-spacing:-.01em;color:var(--slate);padding:6px 0}

/* sections. A section arrives once, when it reaches the screen. */
.berth{position:relative;padding-block:clamp(64px,10vw,120px)}
.berth.tight{padding-top:0}
.berth.full{min-height:100vh;min-height:100svh;scroll-snap-align:start;display:flex;flex-direction:column;justify-content:center;padding-block:96px 104px}
.head{display:flex;flex-direction:column;gap:14px;max-width:38em;margin-bottom:40px}
h2{font-size:clamp(32px,5.2vw,54px);font-weight:480;letter-spacing:-.042em;line-height:1.03;text-wrap:balance}
h3{font-size:22px;font-weight:620;letter-spacing:-.02em;line-height:1.2}
.head p{font-size:clamp(17px,2vw,20px);line-height:1.45;color:var(--slate)}
.head.lab{margin-bottom:26px}
.head.lab h2{font-size:15px;font-weight:600;letter-spacing:0;line-height:1.4;color:var(--steel)}
.split>.head.lab{padding-top:22px}
.fine{font-size:14px;color:var(--steel);margin-top:16px;max-width:44em}
.more{margin-top:28px}
.ph{display:inline-block;font-size:13px;font-weight:450;letter-spacing:0;line-height:1.35;color:var(--steel);border:1px dashed #A4A9AF;border-radius:8px;padding:3px 9px;vertical-align:middle}
p+.ph,h3+.ph{margin-top:10px}

.js .berth .a{opacity:0;transform:translateY(14px)}
.js .berth.in .a{opacity:1;transform:none;transition:opacity var(--t2) var(--dock) var(--d,0ms),transform var(--t3) var(--dock) var(--d,0ms)}
.js .berth .on{opacity:0}
.js .berth.in .on{opacity:1;transition:opacity var(--t1) linear var(--d,0ms)}
.js .berth .drawp{stroke-dasharray:1;stroke-dashoffset:1}
.js .berth.in .drawp{stroke-dashoffset:0;transition:stroke-dashoffset .9s var(--dock) var(--d,0ms)}
.js .berth .gx{transform:scaleX(0)}.js .berth .gy{transform:scaleY(0)}
.js .berth.in .gx,.js .berth.in .gy{transform:none;transition:transform var(--t2) var(--dock) var(--d,0ms)}

/* the top of an inner page: sky above, water below, and the top edge of the mark as the waterline */
.phero{padding-block:calc(72px + clamp(48px,11vh,124px)) clamp(88px,13vw,150px);background:linear-gradient(180deg,var(--sky) 0%,var(--ground) 82%)}
.phero .kick{display:flex;gap:8px;font-size:14.5px;font-weight:500;color:var(--steel);margin-bottom:18px}
.phero .kick a:hover{color:var(--ink)}
.phero h1{font-size:clamp(40px,6.6vw,88px);font-weight:460;letter-spacing:-.045em;line-height:1;max-width:13.5em;text-wrap:balance}
.phero h1 span{color:var(--steel)}
.phero .lede{margin-top:clamp(18px,2.6vh,26px);max-width:34em;font-size:clamp(18px,1.6vw,21px);line-height:1.45;letter-spacing:-.008em;color:var(--slate);text-wrap:pretty}
.phero .acts{margin-top:clamp(24px,3.4vh,34px)}
.phero .note{margin-top:16px}

/* layouts */
.g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media (max-width:820px){.g3{grid-template-columns:1fr}}
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:48px;align-items:center}
.two .head{margin-bottom:0}
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,6vw,96px);align-items:start}
.split>.head{margin-bottom:0;position:sticky;top:112px}
@media (max-width:900px){.two,.split{grid-template-columns:1fr;gap:28px}.split>.head{position:static}}

/* a door: a white card that lifts */
.door{border-radius:14px;padding:26px;display:flex;flex-direction:column;gap:10px;background:var(--panel);min-height:236px;box-shadow:var(--shadow);transition:transform var(--t2) var(--dock),box-shadow var(--t2) var(--dock)}
a.door:hover{transform:translateY(-3px);box-shadow:0 1px 2px rgba(18,22,28,.06),0 22px 48px rgba(18,22,28,.14)}
.door .ic2{transition:transform var(--t3) var(--dock)}
a.door:hover .ic2{transform:translateX(5px)}
.door h3{margin-top:26px;font-size:24px;font-weight:650;letter-spacing:-.022em;line-height:1.15}
.door p{color:var(--slate);font-size:16px;line-height:1.45}
.door .from{margin-top:auto;padding-top:10px;font-size:14px;font-weight:560;color:var(--ink)}
.door.flat{min-height:0}
.door.flat h3{margin-top:0}

/* a ruled list */
.list{border-bottom:1px solid var(--line)}
.item{padding-block:20px;border-top:1px solid var(--line)}
.item h3{font-size:20px;font-weight:620;letter-spacing:-.015em;margin-bottom:4px}
.item p{color:var(--slate);max-width:36em}
.rows .row{display:grid;grid-template-columns:minmax(0,9em) 1fr auto;gap:8px 20px;padding-block:15px;align-items:baseline}
.rows .row+.row{border-top:1px solid var(--line)}
.row b{font-weight:650;font-size:18px}
.row span{color:var(--slate);font-size:16px;line-height:1.45}
.row em{font-style:normal;display:block;font-size:13.5px;color:var(--steel);margin-top:2px}
@media (max-width:620px){.rows .row{grid-template-columns:1fr auto}.row>span:not(.pill){grid-column:1/-1}.rows .row .pill{grid-row:1;grid-column:2;justify-self:end;align-self:center}}
.panel{border-radius:14px;background:var(--panel);padding:6px 24px;box-shadow:var(--shadow)}
.pill{border-radius:999px;padding:3px 10px;font-size:12px;font-weight:600;white-space:nowrap;background:var(--well);color:var(--slate)}
.panel .pill,.bub .pill{background:#ECEDEF}

/* people talking: glass bubbles */
.bubs{display:flex;flex-direction:column;gap:16px}
.bub{display:flex;gap:14px;align-items:center;padding:14px 22px 14px 14px;border-radius:18px;max-width:31em;background:color-mix(in srgb,var(--panel) 74%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 0 0 1px color-mix(in srgb,var(--ink) 9%,transparent),var(--shadow)}
.bub.ask{align-self:flex-start}.bub.ans{align-self:flex-end}
.bub p{font-size:17px;line-height:1.4}
.bub b{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;font-size:13px;font-weight:500;color:var(--steel);min-height:20px}
.who{flex:none;width:40px;height:40px;display:grid;place-items:center;background:var(--well);border-radius:10px}
.who.you{border-radius:50%;color:var(--slate)}
.who.h{background:none}.who .ic{width:22px;height:22px}.who .mk{width:26px;height:26px}
.pilot{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--slate)}
.pilot .ic{width:13px;height:13px;color:var(--ink)}

/* steps along a line */
.steps{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;padding-top:26px}
.steps.n3{grid-template-columns:repeat(3,minmax(0,1fr))}
.steps .rail{position:absolute;left:0;right:0;top:0;height:1px;background:var(--ink);opacity:.5;transform-origin:left}
.js .berth .rail{transform:scaleX(0)}
.js .berth.in .rail{transform:none;transition:transform 1.1s var(--dock) 120ms}
@media (max-width:820px){.steps,.steps.n3{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.steps.n3{grid-template-columns:1fr}}
.step{display:flex;flex-direction:column;gap:8px}
.step i{font-style:normal;display:grid;place-items:center;width:26px;height:26px;background:var(--panel);color:var(--ink);box-shadow:0 0 0 1px rgba(22,22,22,.06),0 4px 12px rgba(18,22,28,.08);font-size:13px;font-weight:650;margin-bottom:10px;font-variant-numeric:tabular-nums}
.step i.dot{width:9px;height:9px;margin-bottom:18px;margin-top:-5px}
.step p{color:var(--slate);font-size:16px;line-height:1.45}

/* steps down a line */
.tl{position:relative}
.tl .rail{position:absolute;left:12.5px;top:8px;bottom:8px;width:1px;background:var(--ink);opacity:.4;transform-origin:top}
.js .berth .tl .rail{transform:scaleY(0)}
.js .berth.in .tl .rail{transform:none;transition:transform 1.4s var(--dock) 120ms}
.tl li{position:relative;display:grid;grid-template-columns:26px 1fr;gap:22px;padding-block:17px}
.tl i{position:relative;font-style:normal;display:grid;place-items:center;width:26px;height:26px;background:var(--panel);color:var(--ink);box-shadow:0 0 0 1px rgba(22,22,22,.06),0 4px 12px rgba(18,22,28,.08);font-size:13px;font-weight:650;font-variant-numeric:tabular-nums}
.tl h3{font-size:21px;margin-bottom:4px}
.tl p{color:var(--slate);max-width:34em}

/* the harbour: a list that sits inside the mark */
.hf{position:relative;padding:46px 46px 40px 50px;--t:10px}
@media (max-width:620px){.hf{padding:34px 26px 30px 30px;--t:8px}}
.hf>i{position:absolute;background:var(--ink);display:block}
.hf .wt{left:0;top:0;height:var(--t);width:calc(100% - var(--t)*2);transform-origin:right}
.hf .wl{left:0;top:0;bottom:0;width:var(--t);transform-origin:top}
.hf .wb{left:0;right:0;bottom:0;height:var(--t);transform-origin:left}
.hf .wr{right:0;bottom:0;width:var(--t);height:calc(100% - var(--t)*2);transform-origin:bottom}
.hf .lamp{right:0;top:0;width:var(--t);height:var(--t);background:var(--light)}

/* plans */
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media (max-width:820px){.plans{grid-template-columns:1fr}}
.plan{border-radius:14px;background:var(--panel);padding:26px;display:flex;flex-direction:column;gap:10px;box-shadow:var(--shadow);transition:transform var(--t2) var(--dock),box-shadow var(--t2) var(--dock)}
.plan:hover{transform:translateY(-3px);box-shadow:0 1px 2px rgba(18,22,28,.06),0 22px 48px rgba(18,22,28,.14)}
.plan h3{font-size:24px;font-weight:650;letter-spacing:-.022em}
.plan p{color:var(--slate);font-size:16px;line-height:1.45}
.plan>p{flex:1}
.plan .price{font-size:30px;font-weight:700;letter-spacing:-.025em;font-variant-numeric:tabular-nums;margin-top:14px}
.plan .price small{font-size:15px;font-weight:500;color:var(--slate);letter-spacing:0}
.plan.long{padding:30px 28px 28px;gap:0}
.plan.long .price{font-size:clamp(38px,4.4vw,52px);font-weight:480;letter-spacing:-.045em;line-height:1;margin-top:22px}
.plan.long .store{font-size:14px;color:var(--steel);margin-top:8px}
.plan.long .for{margin-top:20px;flex:0;min-height:3em;color:var(--ink)}
.ticks{margin:18px 0 26px;padding-top:18px;border-top:1px solid #E6E7E9;display:grid;gap:9px;flex:1;align-content:start}
.ticks li{position:relative;padding-left:18px;font-size:15.5px;line-height:1.4;color:var(--slate)}
.ticks li::before{content:"";position:absolute;left:0;top:.5em;width:6px;height:6px;background:var(--ink)}
.plan.long .btn{align-self:flex-start}
.facts3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 40px;margin-top:56px}
@media (max-width:820px){.facts3{grid-template-columns:1fr}}
.facts3 div{border-top:1.5px solid var(--ink);padding-top:14px}
.facts3 p{color:var(--slate);margin-top:4px}
.care{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px 40px;align-items:center;margin-top:14px;padding:24px 28px;border-radius:14px;background:color-mix(in srgb,var(--panel) 55%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ink) 7%,transparent)}
.care p{color:var(--slate);max-width:40em;margin-top:4px}
@media (max-width:720px){.care{grid-template-columns:1fr}}

/* the table that compares plans */
.tblwrap{border-radius:14px;background:var(--panel);box-shadow:var(--shadow);overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;min-width:680px;border-collapse:collapse;font-size:15.5px;line-height:1.4}
th,td{text-align:left;padding:15px 20px;vertical-align:top}
thead th{font-size:14px;font-weight:620;padding-top:20px}
tbody tr{border-top:1px solid #E6E7E9}
tbody th{font-weight:560;width:26%}
td{color:var(--slate)}
td.no{color:var(--steel)}

/* questions */
.faq{border-bottom:1px solid var(--line)}
.q{border-top:1px solid var(--line)}
.q summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:flex-start;gap:24px;padding:21px 0;font-size:20px;font-weight:560;letter-spacing:-.015em;line-height:1.3}
.q summary::-webkit-details-marker{display:none}
.q summary i{position:relative;flex:none;width:14px;height:14px;margin-top:6px}
.q summary i::before,.q summary i::after{content:"";position:absolute;background:var(--ink)}
.q summary i::before{left:0;right:0;top:6px;height:2px}
.q summary i::after{top:0;bottom:0;left:6px;width:2px;transition:transform var(--t2) var(--dock)}
.q[open] summary i::after{transform:scaleY(0)}
.q>div{padding:0 38px 24px 0;color:var(--slate);max-width:40em}

/* pictures of real work */
.shot{display:block;aspect-ratio:16/10;border-radius:14px;overflow:hidden;background:var(--panel);box-shadow:var(--shadow);transition:transform var(--t3) var(--dock),box-shadow var(--t3) var(--dock)}
.shot img{width:100%;height:100%;object-fit:cover;object-position:top}
a.shot:hover{transform:translateY(-4px);box-shadow:0 1px 2px rgba(18,22,28,.06),0 28px 60px rgba(18,22,28,.18)}
.shot.todo{display:grid;place-items:center;text-align:center;padding:20px;font-size:14px;color:var(--steel);background:color-mix(in srgb,var(--panel) 35%,transparent);box-shadow:none;border:1px dashed #A4A9AF}
.work{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:36px;align-items:center}
.work h3{margin-bottom:8px;font-size:30px;font-weight:650;letter-spacing:-.03em}
.work p{color:var(--slate);max-width:26em}
.case{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(24px,5vw,72px);align-items:center}
.case+.case{margin-top:clamp(64px,9vw,120px)}
.case.flip .shot{order:2}
@media (max-width:820px){.work,.case{grid-template-columns:1fr}.case.flip .shot{order:0}}
.case .x{font-size:14.5px;font-weight:560;color:var(--steel);margin-bottom:14px}
.case h2{font-size:clamp(26px,3.3vw,40px);letter-spacing:-.038em;line-height:1.08}
.case h2 .ph{font-size:13px}
.case p{color:var(--slate);margin-top:18px;max-width:30em}
.meta{display:grid;grid-template-columns:auto 1fr;gap:6px 22px;margin-top:22px;padding-top:18px;border-top:1px solid var(--line);font-size:15px}
.meta dt{color:var(--steel)}

/* large plain statements */
.say{font-size:clamp(26px,3.5vw,44px);font-weight:480;letter-spacing:-.036em;line-height:1.13;max-width:21em;text-wrap:balance}
.say span{display:block;margin-top:.55em;max-width:34em;font-size:clamp(17px,1.9vw,20px);font-weight:400;letter-spacing:-.008em;line-height:1.5;color:var(--slate);text-wrap:pretty}
.say.sm{font-size:clamp(22px,2.5vw,30px);letter-spacing:-.03em}
.say+.say{margin-top:1.1em}
.bigprice{font-size:clamp(52px,7vw,84px);font-weight:460;letter-spacing:-.05em;line-height:.95;font-variant-numeric:tabular-nums}
.bigprice small{font-size:.2em;font-weight:500;letter-spacing:-.01em;color:var(--slate);margin-left:.3em}
.bigmark{width:min(100%,360px);height:auto;aspect-ratio:1;margin-inline:auto}
.bigmark .lamp{fill:var(--light)}

/* the form */
.form{display:grid;gap:18px;padding:28px;border-radius:18px;background:var(--panel);box-shadow:var(--shadow)}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:560px){.f2{grid-template-columns:1fr}.form{padding:22px}}
.field{display:grid;gap:7px}
.field label,.field legend{font-size:14px;font-weight:560;padding:0}
.field small{font-size:13px;color:var(--steel)}
.field input[type=text],.field input[type=email],.field input[type=url],.field textarea{width:100%;border:0;border-radius:10px;background:#F1F2F3;padding:13px 14px;font-size:16px;line-height:1.4;box-shadow:inset 0 0 0 1px transparent;transition:box-shadow var(--t1) linear,background var(--t1) linear}
.field textarea{min-height:132px;resize:vertical}
.field input:focus,.field textarea:focus{outline:0;background:#fff;box-shadow:inset 0 0 0 1.5px var(--ink)}
fieldset.field{border:0;margin:0;padding:0;min-width:0}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:2px}
.chips label{position:relative;cursor:pointer}
.chips input{position:absolute;opacity:0;inset:0;cursor:pointer}
.chips span{display:inline-flex;align-items:center;height:38px;padding:0 15px;border-radius:999px;background:#F1F2F3;font-size:15px;font-weight:450;transition:background var(--t1) linear,color var(--t1) linear}
.chips input:checked+span{background:var(--ink);color:#fff}
.chips input:focus-visible+span{outline:2px solid var(--ink);outline-offset:3px}
.form .send{display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px}
.form .status{font-size:15px;color:var(--slate)}
.side .item:first-child{border-top:1.5px solid var(--ink)}
.side .item a{font-weight:560}



/* the homepage index: small squares on the right edge */
.idx{position:fixed;right:10px;top:50%;transform:translateY(-50%);z-index:5;display:flex;flex-direction:column;gap:9px;padding:14px 8px 14px 22px;opacity:0;transition:opacity 480ms linear}
.idx.show,.idx:hover,.idx:focus-within{opacity:1;transition-duration:120ms}
.idx button{width:4px;height:4px;padding:0;border:0;background:var(--steel);opacity:.55;cursor:pointer;transition:transform var(--t2) var(--dock),background var(--t2) var(--dock),opacity var(--t2) linear}
.idx button::before{content:"";position:absolute;inset:-4px -8px;margin-top:0}
.idx button{position:relative}
.idx button.cur{background:var(--ink);opacity:1;transform:scale(1.75)}
.idx.ondark button{background:#fff}
.idx.ondark button.cur{background:#fff}
@media (max-width:620px){.idx{display:none}}

/* An inner page opens on the same harbour from another place, at another time of day. The words sit in
   the sky, the wall and the light stand on the waterline under them, and the water runs into the page. */
.stage.view{min-height:calc(var(--horizon) + var(--below,200px));padding-block:calc(72px + clamp(26px,5vh,56px)) 0;background:none}
.stage.view{overflow:visible}
.stage.view .scene{bottom:-380px;-webkit-mask-image:linear-gradient(to bottom,#000 0,#000 calc(100% - 560px),transparent);mask-image:linear-gradient(to bottom,#000 0,#000 calc(100% - 560px),transparent);pointer-events:none}
.stage.view h1{font-size:clamp(36px,5vw,64px)}
.stage.view .lede{font-size:clamp(17px,1.5vw,19.5px)}
@media (min-width:1000px){.stage.view .w>*{max-width:56%}}
.stage.view .kick a:hover{color:var(--ink)}
.berth.after{padding-top:clamp(36px,5vw,72px)}

/* the first berth after the scene starts in the scene's water, so there is no seam */
.afterscene{background-image:linear-gradient(180deg,var(--water) 0,var(--ground) min(92vh,820px))}

/* first screen of the homepage: the mark built as a place, drawn live in assets/scene.js */
.stage{
  --ink:#161616; --slate:#505050; --steel:#6a6a6a; --light:#f3ba32;
  --horizon:63vh; /* where the far water meets the fog; scene.js keeps it clear of the words */
  --unit:22px;    /* one unit of the mark at the entrance */
  scroll-snap-align:start;color:var(--ink);font-size:17px;line-height:1.5;position:relative;padding-top:72px;
  min-height:100vh;min-height:max(100svh,calc(var(--horizon) + 286px));overflow:hidden;isolation:isolate;
}
.scene{position:absolute;inset:0;z-index:-1;background:linear-gradient(#ffffff 0,#e9eaec var(--horizon),#dfe1e4 calc(var(--horizon) + 120px),var(--water) 100%)}
.scene canvas{display:block;width:100%;height:100%;opacity:0;transition:opacity 480ms linear}
.ready .scene canvas{opacity:1}
.copy{position:relative;display:grid;justify-items:center;text-align:center;padding:clamp(28px,8vh,92px) 20px 0}
.copy .eyebrow{display:inline-flex;align-items:center;gap:9px;margin-bottom:clamp(14px,2.2vh,22px);font-size:14.5px;font-weight:520;letter-spacing:-.003em;color:var(--slate)}
.copy .eyebrow::before{content:"";width:8px;height:8px;background:var(--light)}
.copy h1{font-size:clamp(32px,4.5vw,70px);font-weight:460;letter-spacing:-.043em;line-height:1.03;text-wrap:balance}
.copy h1 span{display:block;color:var(--steel)}
.copy .lede{margin-top:clamp(16px,2.4vh,24px);max-width:37em;font-size:clamp(17px,1.3vw,19.5px);line-height:1.5;letter-spacing:-.008em;color:var(--slate);text-wrap:balance}
.copy .actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:clamp(22px,3.4vh,32px)}
.talk{position:absolute;left:0;right:0;top:calc(var(--horizon) + var(--unit) + 30px);display:grid;grid-template-columns:minmax(0,1fr);gap:10px;max-width:470px;margin:0 auto;padding:0 20px;pointer-events:none}
.said{display:grid;grid-template-columns:38px auto;align-items:center;gap:12px;width:max-content;max-width:100%;padding:12px 22px 12px 12px;border-radius:14px;background:rgba(255,255,255,.74);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 0 0 1px rgba(255,255,255,.5),0 0 0 1px rgba(22,22,22,.07),var(--float);-webkit-backdrop-filter:blur(20px) saturate(1.4);backdrop-filter:blur(20px) saturate(1.4);text-align:left;pointer-events:auto;will-change:transform}
.said.ask{justify-self:start}
.said.done{justify-self:end}
.said .hwho{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;background:rgba(22,22,22,.07)}
.said .hwho svg{width:21px;height:21px}
.said .hwho.h{background:none}
.said .hwho.you{border-radius:50%;color:var(--slate)}
.said .hwho.h svg{width:24px;height:24px}
.said .hwho .lamp{fill:var(--light)}
.said b{display:block;font-size:12.5px;font-weight:500;line-height:1.3;color:var(--steel)}
.said p{font-size:16.5px;line-height:1.32;letter-spacing:-.011em}
@media (min-width:900px){
  .talk{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(120px,11.5vw,176px);align-items:start;max-width:none}
  .said.ask{justify-self:end}
  .said.done{justify-self:start;margin-top:62px}
}

/* arrival. On every page the mark draws itself and its light comes on last. */
@media (prefers-reduced-motion:no-preference){
  .anim .topbar .lock .wall{stroke-dasharray:1;stroke-dashoffset:1}
  .ready .topbar .lock .wall{animation:draw 720ms var(--dock) both}
  .anim .topbar .lock .lamp{opacity:0}
  .ready .topbar .lock .lamp{animation:on 120ms linear 720ms both}
  .anim .copy .eyebrow,.anim .copy h1,.anim .copy .lede,.anim .copy .actions,.anim .said{opacity:0}
  .ready .copy .eyebrow{animation:on 360ms linear 0ms both}
  .ready .copy h1{animation:rise 480ms var(--dock) 80ms both}
  .ready .copy .lede{animation:rise 480ms var(--dock) 160ms both}
  .ready .copy .actions{animation:on 240ms linear 420ms both}
  .ready .stage .btn.primary{animation:lit 480ms linear 1700ms both}
  .ready .said.ask{animation:dock 480ms var(--dock) 900ms both}
  .ready .said.done{animation:dock 480ms var(--dock) 2300ms both}
  @view-transition{navigation:auto}
  ::view-transition-old(root),::view-transition-new(root){animation-duration:240ms;animation-timing-function:cubic-bezier(.2,.7,.2,1)}
}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes on{from{opacity:0}to{opacity:1}}
@keyframes lit{from{background-color:#e4e5e7}to{background-color:var(--light)}}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes dock{from{opacity:0;translate:0 14px}to{opacity:1;translate:0 0}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}html.home{scroll-snap-type:none}}

/* promises, and anything else that reads as a name on the left and the detail on the right */
.prow{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:8px clamp(28px,6vw,96px);padding-block:28px;border-top:1px solid var(--line)}
.prow:first-child{border-top:0;padding-top:0}
.prow h3{font-size:clamp(21px,2.2vw,26px);font-weight:520;letter-spacing:-.028em}
.prow p{color:var(--slate);max-width:34em}
.prow .ph{margin-top:12px}
@media (max-width:820px){.prow{grid-template-columns:1fr}}
.row b em{font-weight:450}
.rows.wide .row{grid-template-columns:minmax(0,11em) 1fr auto}
@media (max-width:620px){.rows.wide .row{grid-template-columns:1fr auto}}
.center{text-align:center;display:grid;justify-items:center}

/* small pictures of other work, beside the main one */
.also{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:26px}
.thumb img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top;border-radius:8px;box-shadow:var(--shadow);transition:transform var(--t2) var(--dock)}
.thumb:hover img{transform:translateY(-2px)}
.thumb span{display:block;margin-top:8px;font-size:13px;line-height:1.3;color:var(--steel)}
.work p.more{margin-top:22px}
/* a piece of work with no picture yet: the claim on the left, the detail on the right */
.case.solo{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);align-items:start;padding-top:clamp(40px,6vw,72px);border-top:1px solid var(--line)}
.case.solo p{margin-top:0}
/* pictures settle as they arrive */
.js .berth .shot.a img{transform:scale(1.045)}
.js .berth.in .shot.a img{transform:none;transition:transform 900ms var(--dock) var(--d,0ms)}
/* answers open and close smoothly where the browser can do it */
@supports (interpolate-size:allow-keywords){
  :root{interpolate-size:allow-keywords}
  .q::details-content{block-size:0;overflow:hidden;transition:block-size var(--t2) var(--dock),content-visibility var(--t2) allow-discrete}
  .q[open]::details-content{block-size:auto}
}
.planline{font-size:15px;font-weight:560;padding:12px 14px;border-radius:10px;background:var(--ground)}
.close .addr{font-size:16px;color:var(--c-soft);margin-left:14px;user-select:all}

/* a dab of the colour being talked about, on the rules page */
.sw{display:inline-block;width:.72em;height:.72em;margin-left:.3em;vertical-align:baseline;box-shadow:0 0 0 1px rgba(22,22,22,.14)}

/* Liquid glass. White things are a pane of glass on the fog: a little of what is behind shows through. */
.door,.plan,.panel,.tblwrap,.form{background:rgba(255,255,255,.7);-webkit-backdrop-filter:blur(18px) saturate(1.35);backdrop-filter:blur(18px) saturate(1.35);box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 0 0 1px rgba(255,255,255,.5),0 0 0 1px rgba(22,22,22,.05),var(--shadow)}
a.door:hover,.plan:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 0 0 1px rgba(255,255,255,.5),0 0 0 1px rgba(22,22,22,.06),0 22px 48px rgba(18,22,28,.14)}
/* ways to reach us: round, because each one is a person */
.ways{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.ways span{display:inline-flex;align-items:center;height:36px;padding:0 15px;border-radius:999px;font-size:15px;font-weight:500;background:rgba(255,255,255,.6);box-shadow:inset 0 0 0 1px rgba(255,255,255,.6),0 0 0 1px rgba(22,22,22,.07);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}


/* headlines take shape as they come out of the fog */
.js .berth h1.a,.js .berth h2.a,.js .berth .say.a{filter:blur(7px)}
.js .berth.in h1.a,.js .berth.in h2.a,.js .berth.in .say.a{filter:none;transition:opacity var(--t3) var(--dock) var(--d,0ms),transform var(--t3) var(--dock) var(--d,0ms),filter 900ms var(--dock) var(--d,0ms)}

/* THE END OF EVERY PAGE is one picture (.end): open water at the hour and in the weather it is in Vancouver right now
   (scene.js sets .dark and the sky's colours on it). The last thing to do stands in its sky, with no ground of its
   own; the footer's links stand lower down, over the water, where the light comes on as you arrive. One sky, one fog.
   The page above runs into the sky's own colour, so there is no line where the picture starts. */
.end{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;min-height:calc(var(--horizon,760px) + 170px);
  --c-ink:#161616;--c-soft:#454B52;--f-ink:#161616;--f-soft:#454B52;--f-faint:#58606A;--f-chip:rgba(255,255,255,.5);--f-edge:rgba(22,22,22,.10)}
.end.dark{--c-ink:#F2F2F2;--c-soft:rgba(255,255,255,.74);--f-ink:#F2F2F2;--f-soft:rgba(255,255,255,.8);--f-faint:rgba(255,255,255,.6);--f-chip:rgba(18,20,24,.4);--f-edge:rgba(255,255,255,.14)}
.end .scene{background:linear-gradient(var(--sky-top,#fff) 0,var(--sky-hz,#e9eaec) var(--horizon,760px),var(--sea,#d3d5d8) 100%)}
.end::before{content:"";position:absolute;z-index:0;inset:0 0 auto 0;height:190px;pointer-events:none;
  background:linear-gradient(180deg,var(--ground) 0,color-mix(in oklab,var(--ground) 92%,transparent) 16%,color-mix(in oklab,var(--ground) 68%,transparent) 36%,color-mix(in oklab,var(--ground) 36%,transparent) 58%,color-mix(in oklab,var(--ground) 12%,transparent) 80%,transparent 100%)}
.end.bare{min-height:calc(var(--horizon,330px) + 170px)}
.end.bare::before{content:none}
.close{position:relative;z-index:1;scroll-snap-align:start;padding-block:clamp(88px,10.5vw,136px) clamp(48px,6vw,80px);color:var(--c-ink)}
.close .w{position:relative;display:flex;flex-direction:column;gap:18px;align-items:flex-start}
.close h2{font-size:clamp(38px,6.6vw,68px)}
.close p.lead{font-size:20px;line-height:1.45;color:var(--c-soft);max-width:28em}
.close .acts{margin-top:12px}
.end.dark .close .btn{background:#F8C143;color:#161616}
.end.dark .close .btn.glass{background:rgba(255,255,255,.07);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.26)}
.end.dark .close .btn.glass:hover{background:#fff;color:var(--ink);box-shadow:none}
.close .lnk{color:inherit}
.end.dark :focus-visible{outline-color:#fff}

/* THE FOOTER. The layout comes first: five columns with room to breathe and a bar along the bottom. Behind it is the
   lower half of the page's last picture: the water, the light coming on as you arrive, and fog rising behind the links. */
.foot{position:relative;z-index:1;flex:1;padding-block:76px 0;color:var(--f-ink)}
.foot>.w{position:relative;z-index:2}
.fcols{display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:40px 32px;font-size:15px}
.fcols .brand p{margin-top:16px;max-width:17em;color:var(--f-soft);line-height:1.45}
.fcols h4{margin-bottom:12px;font-size:13px;font-weight:600;color:var(--f-soft)}
.fcols a:not(.lock){display:block;padding-block:5px;color:var(--f-soft)}
.fcols a:not(.lock):hover{color:var(--f-ink)}
@media (max-width:900px){.fcols{grid-template-columns:1fr 1fr}.fcols .brand{grid-column:1/-1}}
.fbar{position:absolute;z-index:2;left:0;right:0;bottom:0}
.fbar .w{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 20px;padding-block:16px 20px;border-top:1px solid var(--f-edge);font-size:13.5px;color:var(--f-soft)}
.fbar .legal{display:flex;flex-wrap:wrap;gap:4px 18px}
.fbar .legal a:hover{color:var(--f-ink)}
.now{display:flex;flex-wrap:wrap;gap:4px 14px;padding:6px 14px;border-radius:999px;font-size:13px;font-weight:500;color:var(--f-soft);font-variant-numeric:tabular-nums;
  background:var(--f-chip);box-shadow:0 0 0 1px var(--f-edge);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.now span:first-child{color:var(--f-ink)}
.now span:empty{display:none}
/* the fog over the footer's water. It moves like weather: slowly, one way, without stopping, thicker when Vancouver is foggy */
.fog{position:absolute;left:0;width:200%;z-index:1;pointer-events:none;background-color:var(--fogc,#fff);
  -webkit-mask-image:var(--fogtex);mask-image:var(--fogtex);-webkit-mask-size:50% 100%;mask-size:50% 100%;-webkit-mask-repeat:repeat-x;mask-repeat:repeat-x;
  opacity:0;animation:drift 140s linear infinite;will-change:transform;transition:opacity 2.4s linear}
@keyframes drift{to{transform:translate3d(-50%,0,0)}}
.fog.low{top:6%;height:96%}
.fog.high{top:-10%;height:80%;animation-duration:230s;animation-direction:reverse;-webkit-mask-size:38% 100%;mask-size:38% 100%}
.fogged .fog.low{opacity:calc(.34 * var(--fogk,1))}
.fogged .fog.high{opacity:calc(.20 * var(--fogk,1))}

/* What clients say. Their words, large, with who said it. No stars. */
.quotes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,4vw,56px) clamp(28px,5vw,72px)}
.quotes.one{grid-template-columns:1fr}
@media (max-width:820px){.quotes{grid-template-columns:1fr}}
.quote{display:flex;flex-direction:column;gap:18px;padding-top:22px;border-top:1px solid var(--line)}
.quote blockquote{margin:0;font-size:clamp(20px,2.1vw,26px);font-weight:480;letter-spacing:-.026em;line-height:1.26;text-wrap:pretty}
.quote figcaption{font-size:15px;color:var(--steel);line-height:1.4}
.quote figcaption b{display:block;color:var(--ink);font-weight:600}
/* more pictures of the same piece of work, under the main one */
.strip{display:grid;grid-template-columns:1.6fr 1.6fr .58fr;gap:12px;margin-top:12px}
.strip img{width:100%;height:100%;aspect-ratio:16/10;object-fit:cover;object-position:top;border-radius:10px;box-shadow:var(--shadow)}
.strip img.tall{aspect-ratio:auto;object-position:top}

/* the two legal pages: plain reading */
.legaltext{max-width:44em}
.legaltext h2{font-size:21px;font-weight:620;letter-spacing:-.018em;line-height:1.25;margin:38px 0 8px}
.legaltext p{color:var(--slate)}
.phero.legalhead{padding-bottom:clamp(28px,4vw,48px)}

/* Pieces of a Harbour: small panes drawn the way the real thing draws them, with sample content. */
.two.wide{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
@media (max-width:900px){.two.wide{grid-template-columns:1fr}}
/* A sample Harbour, in the app's own clothes: its white surface, Fog tiles, hairlines, type sizes and stage glyphs. */
.ha,.ha-pill{--hl:rgba(22,22,22,.13);--hl2:rgba(22,22,22,.2);--mut:#6A6A6A;--fog:#F6F6F6}
.ha{background:#fff;border-radius:14px;padding:22px;font-size:14px;line-height:1.5;letter-spacing:0;color:#161616;box-shadow:0 0 0 1px rgba(22,22,22,.07),0 1px 2px rgba(18,22,28,.05),0 30px 70px -24px rgba(18,22,28,.26)}
.ha p{margin:0;max-width:none}
.ha-h{font-size:20px;font-weight:500;letter-spacing:-.01em;line-height:1.2;margin:26px 0 12px!important}
.ha-h:first-child{margin-top:0!important}
.ha-h span{font-size:13px;font-weight:400;letter-spacing:0;color:var(--mut);margin-left:6px;font-variant-numeric:tabular-nums}
.ha-card{border:1px solid var(--hl);border-radius:14px;background:#fff;overflow:hidden}
.ha-pad{padding:16px 18px 14px}
.ha-l{font-size:12px;font-weight:500;color:var(--mut)}
.ha-t{font-size:15px;font-weight:500;line-height:1.35}
.ha-need{display:flex;align-items:center;gap:16px;padding:14px 18px}
.ha-need>div{min-width:0;flex:1}
.ha-m{display:flex;align-items:baseline;gap:8px;margin-top:3px!important;font-size:13px}
.ha-ask{font-weight:500}
.ha-ask::before{content:"";display:inline-block;width:.5em;height:.5em;margin-right:.45em;vertical-align:.08em;background:var(--light)}
.ha-code{font-size:11px;letter-spacing:.01em;color:var(--mut);font-variant-numeric:tabular-nums}
.ha-s{margin-top:5px!important;font-size:13px;line-height:1.45;color:var(--mut);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ha-btn{flex:none;display:inline-flex;align-items:center;height:30px;padding:0 13px;border:1px solid var(--hl2);border-radius:999px;font-size:13px;font-weight:500;color:var(--mut)}
.ha-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:14px}
.ha-tile{border:1px solid var(--hl);border-radius:14px;background:var(--fog);padding:12px 16px 13px}
.ha-n{font-size:26px;font-weight:500;letter-spacing:-.01em;line-height:1;margin-top:7px!important;font-variant-numeric:tabular-nums}
.ha-x2{font-size:12px;line-height:1.35;color:var(--mut);margin-top:6px!important}
.ha-x2 b{font-weight:500;color:#161616}
.ha-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 18px;transition:background-color 120ms linear}
.ha-row+.ha-row{border-top:1px solid var(--hl)}
.ha-row>div{min-width:0}
.ha-u{font-size:13px;color:var(--mut);margin-top:1px!important}
.ha-pill{flex:none;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;border:1px solid var(--hl2);border-radius:999px;padding:2px 8px;font-size:12px;font-weight:500;line-height:18px;color:var(--mut)}
.ha-pill.prog{border-color:transparent;background:rgba(22,22,22,.1);color:#161616}
.ha-l.prog{display:flex;align-items:center;gap:6px;color:#161616}
@media (hover:hover) and (pointer:fine){.ha-row:hover{background:var(--fog)}}
.ha-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--hl)}
.ha-facts>div{padding:13px 18px 14px}
.ha-facts>div:nth-child(even){border-left:1px solid var(--hl)}
.ha-facts>div:nth-child(n+3){border-top:1px solid var(--hl)}
.ha-f{font-size:15px;font-weight:500;margin-top:4px!important}
/* The chart: zero at the floor, a round top, the highest day named. site-1.js adds the dot and the card. */
.ha-chart{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:150px auto;margin-top:8px;border-radius:6px;outline:0;touch-action:pan-y pinch-zoom;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.ha-chart:focus-visible{box-shadow:0 0 0 3px rgba(22,22,22,.5)}
.ha-y{position:relative;margin-top:20px;padding-right:8px;min-width:22px;text-align:right;font-size:11px;line-height:1;color:var(--mut);font-variant-numeric:tabular-nums}
.ha-y span{position:absolute;right:8px;transform:translateY(-50%)}
.ha-plot{position:relative;min-width:0;margin-top:20px}
.ha-plot svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.ha-plot polygon{fill:var(--fog);opacity:.9}
.ha-plot line{stroke:var(--hl);stroke-width:1;vector-effect:non-scaling-stroke;shape-rendering:crispEdges}
.ha-plot line.base{stroke:var(--hl2)}
.ha-plot polyline{fill:none;stroke:#161616;stroke-width:1.5;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.ha-peak,.ha-dot{position:absolute;pointer-events:none}
.ha-peak i{position:absolute;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:#161616;box-shadow:0 0 0 2px #fff}
.ha-peak span{position:absolute;bottom:6px;left:0;transform:translateX(-50%);white-space:nowrap;font-size:11px;line-height:16px;color:var(--mut);font-variant-numeric:tabular-nums}
.ha-peak b{font-weight:500;color:#161616}
.ha-x{grid-column:2;position:relative;height:16px;margin-top:6px;white-space:nowrap;font-size:11px;line-height:16px;color:var(--mut);font-variant-numeric:tabular-nums}
.ha-x span{position:absolute;transform:translateX(-50%)}
.ha-x span:first-child,.ha-x span:last-child{transform:none}
.ha-rule{position:absolute;top:0;bottom:0;width:1px;background:var(--hl2);pointer-events:none}
.ha-dot{width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:#161616;box-shadow:0 0 0 2px #fff}
.ha-tip{position:absolute;left:0;top:0;z-index:2;width:max-content;min-width:128px;max-width:220px;padding:10px 12px;border:1px solid var(--hl);border-radius:14px;background:#fff;pointer-events:none;box-shadow:0 0 0 1px rgba(22,22,22,.05),0 1px 2px rgba(0,0,0,.04),0 10px 28px rgba(0,0,0,.1)}
.ha-tip .d{font-size:12px;color:var(--mut)}
.ha-tip .n{margin-top:4px!important;font-size:15px;font-weight:500;line-height:1.25;font-variant-numeric:tabular-nums}
.ha-tip .n span{font-size:12px;font-weight:400;color:var(--mut)}
.ha-tip dl{margin:6px 0 0}
.ha-tip dl div{display:flex;align-items:baseline;justify-content:space-between;gap:16px;font-size:12px;color:var(--mut)}
.ha-tip dl div+div{margin-top:2px}
.ha-tip dd{margin:0;font-variant-numeric:tabular-nums}
.ha-chart:not(.on) .ha-rule,.ha-chart:not(.on) .ha-dot,.ha-chart:not(.on) .ha-tip,.ha-chart.on .ha-peak span{display:none}
.ha-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (prefers-reduced-motion:no-preference){.ha-rule{transition:left 75ms ease-out}.ha-dot{transition:left 75ms ease-out,top 75ms ease-out}}
@media (max-width:520px){.ha{padding:16px}.ha-x .wide{display:none}.ha-need{padding:13px 14px}.ha-row{padding:12px 14px}.ha-pad{padding:14px 14px 12px}.ha-btn{display:none}.ha-facts>div{padding:12px 14px}}

/* A look round a Harbour: real pictures of it in a window, one tab each. */
.tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.tabs button{height:38px;padding:0 16px;border:0;border-radius:999px;font-size:15px;font-weight:500;cursor:pointer;background:rgba(255,255,255,.6);color:var(--ink);box-shadow:inset 0 0 0 1px rgba(255,255,255,.6),0 0 0 1px rgba(22,22,22,.07);transition:background var(--t1) linear,color var(--t1) linear}
.tabs button:hover{background:#fff}
.tabs button[aria-selected=true]{background:var(--ink);color:#fff;box-shadow:none}
.win{border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 0 0 1px rgba(22,22,22,.07),0 1px 2px rgba(18,22,28,.05),0 30px 70px -20px rgba(18,22,28,.28)}
.win .bar{display:flex;gap:7px;align-items:center;height:34px;padding:0 14px;background:#EEF0F2;border-bottom:1px solid #E0E3E6}
.win .bar i{width:9px;height:9px;border-radius:50%;background:#CDD2D7}
.win a{display:block;cursor:zoom-in}
.win img{display:block;width:100%;height:auto;aspect-ratio:16/10;opacity:0;transition:opacity var(--t2) linear}
.win img.in,html:not(.js) .win img{opacity:1}
.tour .cap{margin-top:18px;max-width:44em;font-size:17px;color:var(--slate);min-height:3.1em}

/* A picture, large, over the page. */
.lb{position:fixed;inset:0;z-index:30;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px;padding:clamp(52px,7vh,72px) clamp(8px,2vw,28px) clamp(16px,4vh,36px);background:rgba(15,16,17,.9);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);animation:on var(--t2) linear both}
.lb figure{grid-column:2;display:grid;justify-items:center;gap:14px;min-width:0;height:100%;align-content:center}
.lb img{max-width:100%;max-height:calc(100vh - clamp(52px,7vh,72px) - clamp(16px,4vh,36px) - 44px);max-height:calc(100dvh - clamp(52px,7vh,72px) - clamp(16px,4vh,36px) - 44px);width:auto;height:auto;border-radius:10px;box-shadow:0 30px 80px rgba(0,0,0,.5);opacity:0;transition:opacity var(--t2) linear}
.lb img.in{opacity:1}
.lb figcaption{font-size:14px;line-height:1.4;color:rgba(255,255,255,.76);text-align:center;max-width:52em;white-space:pre-wrap}
.lbx{position:absolute;right:clamp(12px,2vw,28px);top:14px;height:38px;padding:0 16px;border:0;border-radius:999px;background:rgba(255,255,255,.12);color:#fff;font-size:15px;font-weight:520;cursor:pointer}
.lbx:hover,.lbn:hover{background:rgba(255,255,255,.24)}
.lbn{width:44px;height:44px;border:0;border-radius:50%;background:rgba(255,255,255,.12);cursor:pointer;position:relative}
.lbn::before{content:"";position:absolute;left:50%;top:50%;width:9px;height:9px;border:solid #fff;border-width:2px 2px 0 0;transform:translate(-70%,-50%) rotate(45deg)}
.lbn.prev{grid-column:1}.lbn.next{grid-column:3}
.lbn.prev::before{transform:translate(-30%,-50%) rotate(-135deg)}
.lb :focus-visible{outline:2px solid #fff;outline-offset:3px}
@media (max-width:620px){.lb{grid-template-columns:minmax(0,1fr);padding-inline:10px}.lb figure{grid-column:1}.lbn{position:absolute;bottom:14px}.lbn.prev{left:14px}.lbn.next{right:14px}.lb img{max-height:calc(100dvh - 190px)}}

/* THE WORK. One piece of work to a section: who it is for, what we did in one line, the pictures large and whole,
   the numbers we can count, and what we did. Every picture opens larger. */
.logos{display:flex;flex-wrap:wrap;align-items:center;gap:22px clamp(28px,5vw,56px);padding-block:36px 8px}
.logos a{display:block;opacity:.72;filter:grayscale(1);transition:opacity var(--t2) linear,filter var(--t2) linear}
.logos a:hover,.logos a:focus-visible{opacity:1;filter:none}
.logo{display:block;height:28px;width:auto;max-width:none}
.logo.word{height:auto;font-size:17px;font-weight:650;letter-spacing:-.02em}
.cs{padding-block:clamp(56px,8vw,104px)}
.cs+.cs{border-top:1px solid var(--line)}
.cs-head{max-width:46em}
.cs-id{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;font-size:14.5px;font-weight:500;color:var(--steel);margin-bottom:22px}
.cs-id span{padding-left:18px;border-left:1px solid var(--line)}
.cs-head h2{font-size:clamp(30px,4.6vw,56px)}
.cs-head .lead{margin-top:20px;max-width:36em;font-size:clamp(17px,1.7vw,20px);line-height:1.5;color:var(--slate);text-wrap:pretty}
.pic{display:block;border-radius:12px;overflow:hidden;background:var(--panel);box-shadow:0 0 0 1px rgba(22,22,22,.06),var(--shadow);cursor:zoom-in;transition:transform var(--t2) var(--dock),box-shadow var(--t2) var(--dock)}
.pic img{display:block;width:100%;height:auto}
.pic:hover{transform:translateY(-3px);box-shadow:0 0 0 1px rgba(22,22,22,.08),0 22px 48px rgba(18,22,28,.16)}
.cs-lead{margin-top:clamp(32px,5vw,56px)}
.pic.big{border-radius:16px}
.cs-row{display:flex;gap:12px;margin-top:12px}
.cs-row .pic{flex:1.6 1 0;min-width:0}
.cs-row .pic.tallpic{flex:.462 1 0}
@media (max-width:700px){.cs-row{flex-wrap:wrap}.cs-row .pic{flex:1 1 calc(50% - 6px)}.cs-row .pic.tallpic{display:none}}
.cs-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:clamp(40px,6vw,64px);border-top:1.5px solid var(--ink)}
.cs-stats.n2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cs-stats div{padding:22px 28px 0 0}
.cs-stats div+div{padding-left:28px;border-left:1px solid var(--line)}
.cs-stats b{display:block;font-size:clamp(38px,5.6vw,72px);font-weight:460;letter-spacing:-.05em;line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap}
.cs-stats span{display:block;margin-top:12px;max-width:17em;font-size:15.5px;line-height:1.4;color:var(--slate)}
@media (max-width:700px){.cs-stats,.cs-stats.n2{grid-template-columns:1fr}.cs-stats div{padding:20px 0}.cs-stats div+div{padding-left:0;border-left:0;border-top:1px solid var(--line)}}
.cs-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,88px);margin-top:clamp(40px,6vw,64px);align-items:start}
@media (max-width:820px){.cs-body{grid-template-columns:1fr}}
.lbl{font-size:14px;font-weight:600;letter-spacing:0;line-height:1.4;color:var(--steel);margin-bottom:12px}
.did{border-bottom:1px solid var(--line)}
.did li{position:relative;padding:13px 0 13px 20px;border-top:1px solid var(--line);font-size:17px;line-height:1.4}
.did li::before{content:"";position:absolute;left:0;top:1.28em;width:6px;height:6px;background:var(--ink)}
.nxt{margin-top:18px;color:var(--slate);max-width:32em}
.nxt b{color:var(--ink);font-weight:600}
.cs-body .quote{padding-top:0;border-top:0;margin-bottom:34px}
.cs-meta .lbl{margin-bottom:12px}
.tools{display:flex;flex-wrap:wrap;gap:8px}
.tools span{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 12px 0 10px;border-radius:999px;font-size:13.5px;font-weight:500;color:var(--slate);background:rgba(255,255,255,.55);box-shadow:0 0 0 1px rgba(22,22,22,.07)}
.tools img{width:15px;height:15px;opacity:.78}
.cs-link{margin-top:22px}
.cs .fine{margin-top:34px}
.minis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px 28px}
@media (max-width:820px){.minis{grid-template-columns:1fr}}
.mini .cs-id{margin:22px 0 10px}
.mini>p{color:var(--slate)}
.mini .tools{margin-top:14px}
.mini .cs-link{margin-top:16px}

/* on a phone the footer's columns wrap, so leave room under them for the bar; and say that the plan table moves sideways */
@media (max-width:900px){.foot>.w{padding-bottom:132px}}
.swipe{display:none;font-size:13.5px;color:var(--steel);margin:-12px 0 12px}
@media (max-width:760px){.swipe{display:block}}

/* the homepage water lets go of the picture gently: the drawing fades over its last stretch into the same grey water the next
   section begins in, so there is no line where one stops and the other starts */
.stage:not(.view) .scene canvas{-webkit-mask-image:linear-gradient(to bottom,#000 0,#000 calc(100% - 300px),transparent 100%);mask-image:linear-gradient(to bottom,#000 0,#000 calc(100% - 300px),transparent 100%)}

/* The three service icons, barely alive. Each rides the swell by about a pixel at its own pace, the crane lowers its block
   and raises it again on its cable, and the lights come on last, after the card has arrived. */
.js .berth .ic2 .lit{fill:#C9CED4}
.js .berth.in .ic2 .lit{fill:var(--light);transition:fill 420ms linear calc(var(--d,0ms) + 760ms)}
@media (prefers-reduced-motion:no-preference){
  .berth.in .ic2 .ride{animation:swell 6.2s ease-in-out calc(var(--d,0ms) + 600ms) infinite}
  .berth.in .door:nth-child(2) .ic2 .ride{animation-duration:7.4s}
  .berth.in .door:nth-child(3) .ic2 .ride{animation-duration:8.6s;animation-name:swell-heavy}
  .berth.in .ic2 .load{animation:lower 11s cubic-bezier(.45,0,.55,1) calc(var(--d,0ms) + 1600ms) infinite}
  .berth.in .ic2 .cable{transform-box:fill-box;transform-origin:50% 0;animation:payout 11s cubic-bezier(.45,0,.55,1) calc(var(--d,0ms) + 1600ms) infinite}
}
@keyframes swell{0%,100%{transform:translateY(0)}50%{transform:translateY(.75px)}}
@keyframes swell-heavy{0%,100%{transform:translateY(0)}50%{transform:translateY(.4px)}}
@keyframes lower{0%,12%{transform:translateY(0)}42%,62%{transform:translateY(3.6px)}92%,100%{transform:translateY(0)}}
@keyframes payout{0%,12%{transform:scaleY(1)}42%,62%{transform:scaleY(1.8)}92%,100%{transform:scaleY(1)}}

/* ================================================================================================
   THE HOMEPAGE, SECOND PASS (October 2026).
   One gap between sections. One picture in every section, and each picture moves. Colour comes from
   the light, from the water and from real work; there is still only one warm colour.
   ================================================================================================ */

/* Sections are as tall as what is in them. Only the first screen fills the window. */
.home .berth.full{min-height:0;padding-block:clamp(68px,8.4vw,112px)}
.home .head{margin-bottom:clamp(28px,3.6vw,44px)}
/* a heading with its sentence beside it, for a section whose picture needs the full width */
.head.side{max-width:none;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px 48px;align-items:end}
.head.side>div{display:flex;flex-direction:column;gap:14px;align-items:flex-start;padding-bottom:6px}
@media (max-width:900px){.head.side{grid-template-columns:1fr}}

/* The signs people wear in the app, when they have no photo: ink on a quiet round tile. */
.av{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:rgba(22,22,22,.08);color:var(--ink);flex:none}
.av svg{display:block;width:56%;height:56%}
.said .hwho.you{background:none}
.said .hwho .av{width:38px;height:38px}
.said .hwho .av svg{width:21px;height:21px}
.who{position:relative}
.who.you{color:var(--ink)}
.who .av{width:40px;height:40px;background:none}
.who .av svg{width:22px;height:22px}
.li{display:block;width:16px;height:16px;flex:none}

/* The round arrow on anything that takes you somewhere. */
.go{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;flex:none;color:var(--ink);box-shadow:inset 0 0 0 1px rgba(22,22,22,.16);transition:background var(--t2) var(--dock),color var(--t2) var(--dock),transform var(--t2) var(--dock),box-shadow var(--t2) var(--dock)}
a:hover .go{background:var(--ink);color:#fff;box-shadow:none;transform:translateX(3px)}

/* Tags. Lit means it is on: live, shipped. Dashed means it is still being made. */
.tag{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:999px;font-size:12.5px;font-weight:600;line-height:1;white-space:nowrap;color:var(--slate);box-shadow:inset 0 0 0 1px rgba(22,22,22,.2)}
.tag.live,.pill.lit,.panel .pill.lit,.bub .pill.lit{background:var(--light);color:var(--on-light);box-shadow:none}
.tag.proto{box-shadow:none;border:1px dashed rgba(22,22,22,.4)}

/* A card with a moving picture in it is plain white glass with no blur behind it: the fog behind is flat, so the
   blur showed nothing and cost a great deal while the picture moved. */
.door.dock,.plan.pl,.crew,.fstep{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(255,255,255,.8)}
.door.dock{background:rgba(255,255,255,.95)}

/* ---- One team does all three. Each service is its vessel, drawn live in the same world as the first screen
   (scene.js). A still picture of the same view lies under each one: it is there at once, and it is what stays
   if the live one cannot run. ---- */
.door.dock{padding:0;gap:0;min-height:0;overflow:hidden}
.dk{position:relative;overflow:hidden;aspect-ratio:376/313;background:#E4E7EB}
.dk img,.dk canvas,.dk video{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.dk canvas{opacity:0;transition:opacity 700ms linear}
.dk canvas.on{opacity:1}
.dt{position:relative;flex:1;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto 1fr;gap:8px 16px;align-items:start;padding:22px 24px 24px}
.dt h3,.door.dock h3{grid-column:1/-1;margin:0;font-size:24px;font-weight:650;letter-spacing:-.022em;line-height:1.15}
.dt p{color:var(--slate);font-size:16px;line-height:1.45}
.dt .go{align-self:end}

/* ---- Talk to us however you like. Five ways in, and the same answer. ---- */
.ways[data-ways]{gap:6px;margin-top:8px}
.ways .li{width:15px;height:15px}
.ways button{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 13px 0 11px;border:0;border-radius:999px;font-size:14.5px;font-weight:500;cursor:pointer;color:var(--ink);background:rgba(255,255,255,.6);box-shadow:inset 0 0 0 1px rgba(255,255,255,.6),0 0 0 1px rgba(22,22,22,.07);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);transition:background var(--t2) var(--dock),color var(--t2) var(--dock),box-shadow var(--t2) var(--dock)}
.ways button:hover{background:#fff}
.ways button[aria-selected=true]{background:var(--ink);color:#fff;box-shadow:none}
.asks{display:grid;flex:1;min-width:0}
.asks>p{grid-area:1/1;align-self:center;opacity:0;visibility:hidden;transform:translateY(5px);transition:opacity var(--t1) linear,transform var(--t2) var(--dock),visibility 0s linear var(--t2)}
[data-way=phone] .v-phone,[data-way=text] .v-text,[data-way=email] .v-email,[data-way=slack] .v-slack,[data-way=tickets] .v-tickets{opacity:1;visibility:visible;transform:none;transition-delay:100ms,100ms,0s}
.asks strong{display:block;font-size:16px;font-weight:620;letter-spacing:-.01em}
.asks em{font-style:normal;font-weight:560;padding:1px 6px;margin-right:2px;border-radius:5px;background:rgba(22,22,22,.07)}
.asks .tk{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:16.5px;font-weight:520;letter-spacing:-.008em}
.asks .ha-pill{background:#fff}
.conv{display:flex;flex-direction:column}
.thread{border-radius:18px;overflow:hidden;background:rgba(255,255,255,.82);box-shadow:inset 0 0 0 1px rgba(255,255,255,.5),0 0 0 1px rgba(22,22,22,.06),var(--shadow)}
.th-h{display:grid;padding:11px 18px;border-bottom:1px solid rgba(22,22,22,.08);background:rgba(22,22,22,.03);font-size:13px;font-weight:560;color:var(--steel)}
.th-h span{grid-area:1/1;display:flex;align-items:center;gap:8px;opacity:0;transition:opacity var(--t2) linear}
.th-h .li{width:14px;height:14px}
.msg{display:flex;align-items:flex-start;gap:14px;padding:16px 20px 17px 16px}
.msg+.msg{border-top:1px solid rgba(22,22,22,.07)}
.msg p{font-size:17px;line-height:1.4}
.msg b{display:block;margin-bottom:1px;font-size:13px;font-weight:500;color:var(--steel)}
.msg .who{margin-top:1px}
.then{display:flex;align-items:center;gap:12px;margin-left:35px;padding:10px 0;font-size:13.5px;font-weight:560;color:var(--steel)}
.then i{display:block;width:1px;height:30px;background:rgba(22,22,22,.28)}
.ha.shipc{padding:15px 18px 17px;box-shadow:0 0 0 1px rgba(22,22,22,.07),var(--shadow)}
.shipc .ha-l{display:flex;justify-content:space-between;gap:12px;margin-bottom:11px}
.shipc .ha-l span{font-weight:400}
.shiprow{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:4px 11px;align-items:start}
.shiprow>svg{margin-top:4px}
.shipc .ha-u{margin-top:2px!important}
.shipc .ha-m{gap:8px;margin-top:7px!important;font-size:12px;color:var(--mut)}
.shipc .ha-code{flex:none;white-space:nowrap}
.wv{display:inline-flex;align-items:center;gap:2.5px;height:16px;margin-right:10px;vertical-align:-2px}
.wv s{display:block;width:2.5px;height:6px;border-radius:2px;background:var(--ink)}
.wv s:nth-child(2){height:12px}.wv s:nth-child(3){height:16px}.wv s:nth-child(4){height:9px}.wv s:nth-child(5){height:14px}.wv s:nth-child(6){height:7px}.wv s:nth-child(7){height:4px}

/* ---- Something ships every week. One request, followed through its four stages. ---- */
.flow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
@media (max-width:980px){.flow{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.flow{grid-template-columns:1fr}}
.fstep{position:relative;display:flex;flex-direction:column;border-radius:14px;overflow:hidden;background:rgba(255,255,255,.7);-webkit-backdrop-filter:blur(18px) saturate(1.35);backdrop-filter:blur(18px) saturate(1.35);box-shadow:inset 0 0 0 1px rgba(255,255,255,.5),0 0 0 1px rgba(22,22,22,.05),var(--shadow)}
.fstep .sbar{display:block;height:3px;background:rgba(22,22,22,.07)}
.fstep .sbar i{display:block;height:100%;background:var(--ink);transform-origin:left}
.fv{display:grid;align-items:center;height:136px;padding:18px 18px 0}
.fb{padding:16px 20px 22px}
.fstep .fn{display:grid;place-items:center;width:26px;height:26px;margin-bottom:12px;font-style:normal;font-size:13px;font-weight:650;font-variant-numeric:tabular-nums;background:var(--ink);color:#fff;transition:background var(--t2) linear,color var(--t2) linear,box-shadow var(--t2) linear}
.fstep h3{font-size:21px;font-weight:640;letter-spacing:-.02em;margin-bottom:6px;white-space:nowrap}
.fstep .fb p{color:var(--slate);font-size:15.5px;line-height:1.45;text-wrap:pretty}
.fstep .fb p span{display:block}
.vg{position:relative;display:flex;align-items:center;gap:10px;width:100%;padding:11px 12px;border-radius:10px;background:#fff;color:var(--ink);box-shadow:0 0 0 1px rgba(22,22,22,.07),0 8px 18px -10px rgba(18,22,28,.28);transition:opacity var(--t3) linear,transform var(--t3) var(--dock)}
.vg p{min-width:0;font-size:13px;line-height:1.35;color:var(--ink)}
.vg b{display:block;font-weight:600}
.vg.v-say b{font-size:11.5px;font-weight:500;color:var(--steel)}
.vm{display:grid;place-items:center;flex:none;width:26px;height:26px}
.vm .mk{width:18px;height:18px}
.vg .av{width:26px;height:26px}
.vi{display:grid;place-items:center;flex:none;width:26px;height:26px;border-radius:7px;background:rgba(22,22,22,.07)}
.vi .li{width:15px;height:15px}
.swp{display:inline-grid;vertical-align:top}
.swp>*{grid-area:1/1;justify-self:start;transition:opacity var(--t2) linear}
.vg.v-pick .swp{margin-top:5px}
.vg.v-ship{flex-direction:column;align-items:stretch;gap:0;padding:0;overflow:hidden}
.vg .v-url{display:flex;align-items:center;gap:4px;padding:7px 10px;background:#F1F3F5;font-size:11px;color:var(--steel)}
.vg .v-url i{width:5px;height:5px;border-radius:50%;background:#C9CED4}
.vg .v-url span{margin-left:6px}
.vg .v-ln{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 12px 10px}
.vg .tag{height:21px;padding:0 9px;font-size:11.5px}
.vg.v-land{flex-direction:column;align-items:stretch;gap:0;padding:3px 12px}
.v-r{display:flex;align-items:center;gap:8px;padding:7px 0;font-size:12.5px;transition:opacity var(--t2) linear}
.v-r+.v-r{border-top:1px solid rgba(22,22,22,.07)}
.vg .v-r b{display:inline;font-size:12.5px;font-weight:600;color:var(--ink)}
.v-r span{margin-left:auto;color:var(--steel)}
.v-r .li{width:13px;height:13px;color:var(--steel)}
.v-r .v-new{flex:none;width:7px;height:7px;margin:0 3px;background:var(--light);transition:opacity var(--t2) linear}
.flow.play .fstep.done .r2{transition-delay:500ms}
.flow.play .fstep.done .r3{transition-delay:1000ms}
/* Without the script, every stage shows its finished state. With it, a stage waits until its turn. */
.flow .s0{opacity:0}
.flow.play .fstep .sbar i{transform:scaleX(0)}
.flow.play .fstep.done .sbar i{transform:none}
.flow.play .fstep.act .sbar i{transition:transform var(--step,2400ms) linear}
.flow.play .fstep .fn{background:#fff;color:var(--ink);box-shadow:0 0 0 1px rgba(22,22,22,.1)}
.flow.play .fstep.done .fn{background:var(--ink);color:#fff;box-shadow:none}
.flow.play .fstep.act .fn{background:var(--light);color:var(--on-light);box-shadow:none}
.flow.play .fstep:not(.done) .vg{opacity:.45}
.flow.play .fstep:not(.done) .vg.v-say{transform:translateY(6px)}
.flow.play .fstep:not(.done) .v-r{opacity:.35}
.flow.play .fstep:not(.done) .s0{opacity:1}
.flow.play .fstep:not(.done) .s1,.flow.play .fstep:not(.done) .v-new{opacity:0}

/* ---- See all of it, in your Harbour. The app's own first page, in its own frame. ---- */
.haw{display:grid;grid-template-columns:200px minmax(0,1fr);padding:8px;border-radius:18px;background:#F6F6F6;font-size:14px;line-height:1.5;color:#161616;box-shadow:0 0 0 1px rgba(22,22,22,.07),0 1px 2px rgba(18,22,28,.05),0 40px 90px -34px rgba(18,22,28,.34)}
.haw p{margin:0;max-width:none}
.haw-side{display:flex;flex-direction:column;padding:12px 12px 8px 6px}
.haw-co{display:flex;align-items:center;gap:9px;padding:2px 9px 16px;font-weight:600}
.haw-co .mk{width:15px;height:15px}
.haw-nav{display:grid;gap:2px}
.haw-nav span{display:flex;align-items:center;gap:10px;height:34px;padding:0 10px;border-radius:9px;color:#6A6A6A}
.haw-nav span.on{background:rgba(22,22,22,.08);color:#161616;font-weight:500}
.haw-nav i{margin-left:auto;font-style:normal;font-size:12px;font-variant-numeric:tabular-nums}
.haw-me{display:flex;align-items:center;gap:9px;margin-top:auto!important;padding:10px 8px 4px;font-weight:500}
.haw .ha{box-shadow:none;border:1px solid rgba(22,22,22,.13);padding:22px 24px 24px}
.haw-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.haw-title{font-size:24px;font-weight:500;letter-spacing:-.015em;line-height:1.2}
.haw-new{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 14px 0 11px;border-radius:999px;background:#161616;color:#fff;font-size:13px;font-weight:500}
.haw-new .li{width:14px;height:14px}
.ha-tiles.n3{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:0}
.haw-cols{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,1fr);gap:22px;margin-top:22px}
.haw-cols .ha-h{margin-top:20px!important}
.haw-cols .ha-h:first-child{margin-top:0!important}
.haw-cols>div{display:flex;flex-direction:column}
.haw-cols>div>.ha-card:last-child{flex:1}
.haw .ha-need{padding:13px 16px}
.haw .ha-row{padding:12px 16px}
.haw .ha-chart{grid-template-rows:minmax(150px,1fr) auto;flex:1}
.haw .ha-pad{display:flex;flex-direction:column;height:100%}
@media (max-width:900px){
  .haw{grid-template-columns:1fr;padding:6px}
  .haw-side{display:none}
  .haw-cols{grid-template-columns:1fr}
  .ha-tiles.n3{grid-template-columns:repeat(2,minmax(0,1fr))}.ha-tiles.n3>:first-child{display:none}
}
@media (max-width:520px){.haw .ha{padding:16px}.haw-new{display:none}}

/* ---- Software that fits. Add people: a rented app's bill climbs, the one we build stays where it is. ---- */
.crew{display:flex;flex-direction:column;gap:20px;padding:22px 24px 20px;border-radius:14px;background:rgba(255,255,255,.7);-webkit-backdrop-filter:blur(18px) saturate(1.35);backdrop-filter:blur(18px) saturate(1.35);box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 0 0 1px rgba(255,255,255,.5),0 0 0 1px rgba(22,22,22,.05),var(--shadow)}
.crew-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.crew-l{font-size:15px;font-weight:600}
.stepper{display:inline-flex;align-items:center;gap:2px;padding:3px;border-radius:999px;background:rgba(22,22,22,.06)}
.stepper button{display:grid;place-items:center;width:32px;height:32px;padding:0 0 2px;border:0;border-radius:50%;background:#fff;font-size:19px;line-height:1;cursor:pointer;box-shadow:0 1px 2px rgba(18,22,28,.14);transition:transform var(--t1) var(--dock),opacity var(--t1) linear}
.stepper button:active{transform:scale(.93)}
.stepper button[disabled]{opacity:.38;cursor:default}
.stepper output{min-width:5.8em;text-align:center;font-size:14.5px;font-weight:560;font-variant-numeric:tabular-nums}
.crew-av{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:5px}
.crew-av .av{width:auto;height:auto;aspect-ratio:1;max-width:44px;background:#fff;box-shadow:0 0 0 1px rgba(22,22,22,.08);opacity:0;transform:scale(.5);transition:opacity var(--t2) linear,transform var(--t2) var(--dock)}
.crew-av .av.in{opacity:1;transform:none}
.bars{display:grid;gap:16px}
.cbar p{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:8px;font-size:14.5px}
.cbar p b{font-weight:600}
.cbar p span{font-size:13px;color:var(--steel)}
.bt{display:block;height:14px;overflow:hidden;background:rgba(22,22,22,.06)}
.bt i{display:block;width:100%;height:100%;transform-origin:left;transition:transform 420ms var(--dock)}
.cbar.rent i{background:#8A929C;transform:scaleX(calc(var(--n,8) / 12))}
.cbar.own i{background:var(--light);transform:scaleX(.1)}
.crew-x{font-size:13px;color:var(--steel);margin-top:-6px}
.kinds{margin-top:clamp(36px,4.6vw,56px)}
.kinds .lbl{margin-bottom:14px}
.kgrid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.kind{display:flex;flex-direction:column;align-items:flex-start;gap:18px;padding:20px 20px 18px;border-radius:14px;background:rgba(255,255,255,.55);box-shadow:inset 0 0 0 1px rgba(255,255,255,.6),0 0 0 1px rgba(22,22,22,.06);font-size:16.5px;font-weight:560;letter-spacing:-.012em;line-height:1.25}
.kind .li{width:26px;height:26px}
/* on a small screen the five are a row of tags that wraps, so none is left alone on a line of its own */
@media (max-width:760px){.kgrid{display:flex;flex-wrap:wrap;gap:8px}.kind{flex-direction:row;align-items:center;gap:9px;padding:10px 15px 10px 12px;border-radius:999px;font-size:15px}.kind .li{width:18px;height:18px}}

/* ---- Priced in the open. Each plan is the fleet you get. ---- */
.plan.pl{padding:0;gap:0;overflow:hidden}
.pb{position:relative;flex:1;display:flex;flex-direction:column;gap:10px;padding:22px 24px 24px}
.pb>p{flex:1}
.plan.pl .price{margin-top:18px;font-size:clamp(34px,3.5vw,44px);font-weight:480;letter-spacing:-.04em;line-height:1}
.plan.pl .price small{font-size:15px;font-weight:500;letter-spacing:0;color:var(--slate)}
.pb .go{position:absolute;right:22px;bottom:22px}

/* ---- See it working. Four clients as a set: what we run for them, one counted number, a corner of their site. ---- */
.cases{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.kase{position:relative;display:flex;flex-direction:column;border-radius:14px;overflow:hidden;background:rgba(255,255,255,.95);box-shadow:inset 0 0 0 1px rgba(255,255,255,.5),0 0 0 1px rgba(22,22,22,.05),var(--shadow);transition:transform var(--t2) var(--dock),box-shadow var(--t2) var(--dock)}
.kpic{display:block;aspect-ratio:4/3;overflow:hidden;background:#101214}
.kpic img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--dock)}
.kase:hover .kpic img{transform:scale(1.04)}
.kbody{position:relative;flex:1;display:flex;flex-direction:column;gap:3px;padding:16px 18px 18px}
.ksvc{display:flex;flex-direction:column;align-items:flex-start;gap:7px;margin-bottom:12px}
.ksvc>span{display:flex;align-items:center;gap:5px}
.ksvc .ic2{width:34px;height:24px}
.ksvc em{font-style:normal;font-size:12.5px;font-weight:560;color:var(--steel)}
.kase b{font-size:20px;font-weight:650;letter-spacing:-.02em;line-height:1.2}
.kwhat{font-size:14px;line-height:1.4;color:var(--steel)}
.kstat{display:flex;flex-direction:column;gap:3px;margin-top:auto;padding-top:18px}
.kstat i{font-style:normal;font-size:40px;font-weight:480;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.kstat span{padding-right:42px;font-size:14px;line-height:1.4;color:var(--slate)}
.kase .go{position:absolute;right:16px;bottom:16px}
@media (max-width:980px){.cases{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.cases{grid-template-columns:1fr}.kpic{aspect-ratio:16/9}}

/* A card that takes you somewhere answers the pointer the same way everywhere: it lifts, and a firm line goes round it. */
a.door.dock:hover,a.plan.pl:hover,a.kase:hover{transform:translateY(-3px);box-shadow:0 0 0 2px var(--ink),0 22px 48px rgba(18,22,28,.16)}

/* tide:start */
/* THE PAGE GOES DOWN INTO DEEP WATER AND COMES BACK UP. (These lines are written by a script from two colours, the
   water under the first screen and the deep sea, in even steps. Change the colours there, not here.)
   One part of the homepage is dark: the work you do not have to watch, which goes on under the surface. The page does
   not cut to it. It sinks all the way down the services, behind their cards, and is only fully dark half way down the
   dark section itself; and it rises again behind the frame of the section after. No words stand on the part that is
   changing, and nowhere does the colour change fast enough to see it happen. */
.home{--deep:#0F2538}
.home #doors{background-image:linear-gradient(180deg,#CFD5DB 0%,#CDD3D9 7.14%,#C9D0D7 14.29%,#C3CBD3 21.43%,#BCC5CE 28.57%,#B4BEC8 35.71%,#ABB6C2 42.86%,#A1AEBB 50%,#96A5B4 57.14%,#8A9BAC 64.29%,#7F91A3 71.43%,#728699 78.57%,#667B8F 85.71%,#596F84 92.86%,#4D6378 100%)}
.home #doors .head p{color:#30363C}
.home #how{background:var(--deep) linear-gradient(180deg,#4D6378 0px,#40576C 60px,#354C60 120px,#2C4257 180px,#243A4E 240px,#1E3447 300px,#192E42 360px,#142A3D 420px,#11273A 480px,#102639 540px,#0F2538 600px) top/100% 600px no-repeat}
.home #harbour{background:var(--deep);padding-bottom:0}
.rise{padding-bottom:clamp(68px,8.4vw,112px);background-image:linear-gradient(180deg,#0F2538 0%,#0F2538 6.25%,#12273A 12.5%,#172C40 18.75%,#1F3549 25%,#2B4156 31.25%,#3A5166 37.5%,#4D6479 43.75%,#63788C 50%,#7A8D9F 56.25%,#91A1B0 62.5%,#A6B3BF 68.75%,#B7C1CB 75%,#C4CCD3 81.25%,#CBD2D8 87.5%,#CFD5DB 93.75%,#CFD5DB 100%);color:var(--ink)}
.rise .fine{color:var(--slate)}
.home #people{background-image:linear-gradient(180deg,var(--water) 0,var(--ground) min(80vh,600px))}
/* tide:end */
/* And at its foot the page runs into the sky of its last picture, whatever colour that is at this hour: slowly, behind
   the cards of its last section, the same way. (By day that is next to nothing. At night it is the whole of it.) */
.home #work{background-image:linear-gradient(180deg,var(--ground) 0,color-mix(in oklab,var(--sky-top,var(--ground)) 0.9%,var(--ground)) 8.33%,color-mix(in oklab,var(--sky-top,var(--ground)) 3.3%,var(--ground)) 16.67%,color-mix(in oklab,var(--sky-top,var(--ground)) 7.2%,var(--ground)) 25%,color-mix(in oklab,var(--sky-top,var(--ground)) 12.4%,var(--ground)) 33.33%,color-mix(in oklab,var(--sky-top,var(--ground)) 18.9%,var(--ground)) 41.67%,color-mix(in oklab,var(--sky-top,var(--ground)) 26.8%,var(--ground)) 50%,color-mix(in oklab,var(--sky-top,var(--ground)) 35.9%,var(--ground)) 58.33%,color-mix(in oklab,var(--sky-top,var(--ground)) 46.3%,var(--ground)) 66.67%,color-mix(in oklab,var(--sky-top,var(--ground)) 57.9%,var(--ground)) 75%,color-mix(in oklab,var(--sky-top,var(--ground)) 70.7%,var(--ground)) 83.33%,color-mix(in oklab,var(--sky-top,var(--ground)) 84.8%,var(--ground)) 91.67%,var(--sky-top,var(--ground)) 100%)}
.home .end::before{background:linear-gradient(180deg,var(--sky-top,var(--ground)),transparent)} /* the page has already arrived at the sky; this only covers the join */
.home.skydark #work .fine{color:rgba(255,255,255,.74)}
.home.skydark #work .fine .lnk{color:#fff}
.deep{color:var(--night-ink)}
.deep .head h2{color:var(--night-ink)}
.deep .head p{color:var(--night-soft)}
.deep .lnk{color:#fff}
.deep .fstep{background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.09);transition:background var(--t3) linear,box-shadow var(--t3) linear}
.deep .fstep .sbar{background:rgba(255,255,255,.09)}
.deep .fstep .sbar i{background:var(--light)}
.deep .fstep .fb p{color:var(--night-soft)}
.deep .fstep .fn{background:#fff;color:var(--ink)}
.deep .flow.play .fstep .fn{background:transparent;color:rgba(255,255,255,.72);box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}
.deep .flow.play .fstep.done .fn{background:#fff;color:var(--ink);box-shadow:none}
.deep .flow.play .fstep.act .fn{background:var(--light);color:var(--on-light);box-shadow:none}
.deep .flow.play .fstep.act{background:rgba(255,255,255,.085);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),0 34px 70px -44px rgba(243,186,50,.55)}
.deep .flow.play .fstep:not(.done) .vg{opacity:.3}
.deep .vg{box-shadow:0 10px 26px -12px rgba(0,0,0,.7)}
.deep :focus-visible{outline-color:#fff}
.rise :focus-visible{outline-color:var(--ink)}
/* On a tablet the three services stay side by side, and a plan's picture never grows taller than a strip. */
@media (min-width:641px) and (max-width:820px){#doors .g3{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}#doors .dt{padding:16px 16px 18px}#doors .dt h3{font-size:20px}#doors .dt p{font-size:14.5px}#doors .go{display:none}}
.dk.fl{aspect-ratio:376/148;max-height:176px}
.dk.fl img{object-position:50% 16%} /* where a plan is as wide as the page its picture is cut to a strip: keep the top of the crane */
@media (max-width:640px){.crew-av{grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}}
/* on the narrowest phones the price needs the whole line; the card is still the link */
@media (max-width:380px){.pb .go{display:none}}

/* ---- See all of it, in your Harbour. On a wide screen: the app itself, frozen on its sample account, in a frame
   wider than the column so it reads at its real size. On a phone: its first page, drawn here. ---- */
.hxw{display:none}
@media (min-width:900px){.hxw{display:block}.hxp{display:none}}
.hx{--hxh:clamp(600px,calc(100svh - 148px),780px);position:relative;width:min(1296px,calc(100vw - 48px));margin-left:50%;translate:-50% 0;height:calc(var(--hxh) * var(--k,1));border-radius:18px;overflow:hidden;background:#F6F6F6;
  box-shadow:0 0 0 1px rgba(22,22,22,.08),0 1px 2px rgba(18,22,28,.05),0 50px 100px -40px rgba(18,22,28,.42)}
.hx iframe{display:block;border:0;width:calc(100% / var(--k,1));height:var(--hxh);transform:scale(var(--k,1));transform-origin:0 0}

/* ---------- The white room (October 2026) ----------
   Every page stands in the same white room as the first screen: a white ground, ink words, quiet grey panels and
   one light. The harbour pictures that opened and closed each page are out while new artwork is made, so a page
   starts with its words and ends in a plain footer. These rules come last and win over the fog and water above. */
:root{--ground:#FFFFFF;--sky:#FFFFFF;--water:#FFFFFF;--panel:#FFFFFF;--well:#EDEDED;--line:#DFDFDF;--fog:#F6F6F6;
  --slate:#505050;--steel:#6A6A6A;
  --shadow:0 1px 2px rgba(0,0,0,.04),0 14px 34px -14px rgba(0,0,0,.12);
  --float:0 1px 2px rgba(0,0,0,.05),0 16px 36px -14px rgba(0,0,0,.22)}
body{background:#fff}
/* The top of a page: its words, set like the first screen's */
.phero,.phero.plain{background:none;padding-block:max(132px,calc(72px + 9vh)) clamp(28px,4vw,56px)}
.phero h1{font-size:clamp(38px,5.2vw,72px);font-weight:600;letter-spacing:-.034em;line-height:1.03}
.phero .lede{color:var(--slate)}
.afterscene{background-image:none}
/* What was a pane of glass on fog is a quiet grey panel on white */
.door,.plan,.panel,.tblwrap,.form,.care{background:var(--fog);-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none}
a.door:hover,.plan:hover{box-shadow:inset 0 0 0 1px var(--ink)}
.btn.glass{background:#fff;box-shadow:inset 0 0 0 1px var(--line);-webkit-backdrop-filter:none;backdrop-filter:none}
.ways span,.said,.bub{background:var(--fog);box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.field input[type=text],.field input[type=email],.field input[type=url],.field textarea,.chips span{background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.panel .pill,.bub .pill{background:#E9E9E9}
/* The end of a page: the last thing to do on a grey band, then the footer on white */
.end,.end.bare{display:block;min-height:0;overflow:visible;isolation:auto}
.end::before{content:none}
.close{background:var(--fog);padding-block:clamp(72px,9vw,120px)}
.foot{flex:none;padding-block:72px 0}
.fbar{position:static;margin-top:64px}
/* The bar sits under the columns at every width, so a phone holds no room back for it */
@media (max-width:900px){.foot>.w{padding-bottom:0}}
/* The quieter words down here are the room's own greys: slate, and steel for the faintest */
.end{--c-soft:var(--slate);--f-soft:var(--slate);--f-faint:var(--steel)}
/* Legal: three parts that open in place */
.legalfaq{max-width:52em}
.lq summary{align-items:center;padding:24px 0;font-size:clamp(21px,2.2vw,27px);font-weight:600;letter-spacing:-.02em}
.lq summary span{display:grid;gap:4px}
.lq summary small{font-size:14px;font-weight:450;letter-spacing:0;color:var(--steel)}
.lq summary i{margin-top:0}
.lq>div.legaltext{max-width:44em;padding:0 0 36px}
.lq>div.legaltext>p:first-child{color:var(--ink)}
.lq:last-child{border-bottom:1px solid var(--line)}
.lq{scroll-margin-top:96px}
/* One weight for every heading, the first screen's: 600. Large statements are headings in all but name, so they
   follow, and so do large numbers. Tracking is opened a little to suit the heavier weight, as on the homepage. */
.berth :is(h1,h2,h3,h4),.say{font-weight:600}
.head h2,.close h2,.cs-head h2,.case h2{letter-spacing:-.032em}
.say{letter-spacing:-.03em}
.say.sm{letter-spacing:-.022em}
.prow h3{letter-spacing:-.02em}
.plan.long .price,.plan.pl .price,.bigprice,.cs-stats b,.kstat i{font-weight:600;letter-spacing:-.035em}
.bigprice small{margin-left:.45em}
/* A heavier figure is a wider one: the counts on Work step down a size so the longest ("Sept 2026") stays in its column */
.cs-stats b{font-size:clamp(34px,4.9vw,62px)}
@media (max-width:700px){.cs-stats b{font-size:38px}}
/* Every Book a call link lands on the contact form */
#call{scroll-margin-top:104px}