/* Homepage flow draft, 2026-10-11.
   One pinned screen on a fixed ground. The first downward gesture advances to services; subsequent scrolling is free.
   Colour is the brand book's: a white room with a faint floor in neutral greys, ink for words and for what is fixed,
   and the Light (amber, always carrying ink) for the mark's light and the one button that takes you forward. No blue. */

:root{
  --ink:#161616;
  --slate:#505050;
  --steel:#6A6A6A;
  --line:#DFDFDF;
  --fog:#F6F6F6;
  --light:#F3BA32;
  --light-up:#F8C143;
  --curve:cubic-bezier(.2,.7,.2,1);
  --pad:clamp(20px,5vw,72px);
  --floor:72vh;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scrollbar-width:none}
html::-webkit-scrollbar{display:none}
body{margin:0;background:#fff;color:var(--ink);font:400 17px/1.5 Geist,system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
h1,h2,p,ol{margin:0}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.skip{position:fixed;left:16px;top:-60px;z-index:60;background:var(--ink);color:#fff;padding:10px 16px;border-radius:999px}
.skip:focus{top:12px}

/* Seamless white room: a gradual floor sheen with no wall/floor edge. */
.ground{position:fixed;inset:0;z-index:-1;background:
  radial-gradient(ellipse 70% 26% at 50% 100%,#fff 0,rgba(255,255,255,0) 100%),
  linear-gradient(to bottom,#fff 0,#fff 34%,#f4f4f4 var(--floor),#f7f7f7 calc(var(--floor) + 9vh),#fcfcfc 100%)}

.btn{cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;height:50px;padding:0 26px;border-radius:999px;background:var(--ink);color:#fff;font-size:16px;font-weight:560;border:1px solid var(--ink);transition:background .24s var(--curve),color .24s var(--curve),border-color .24s var(--curve)}
.btn:hover{background:#2e2e2e;border-color:#2e2e2e}
.btn.go{padding:0 18px 0 24px;background:var(--light);color:var(--ink);border-color:var(--light)}
.btn.go:hover{background:var(--light-up);border-color:var(--light-up)}
.btn svg{width:18px;height:18px;transition:transform .24s var(--curve)}
.btn:hover svg{transform:translateX(3px)}

/* Shared scene layout */
.scene{position:relative;min-height:100vh}
.in{max-width:1380px;min-height:100vh;margin:0 auto;padding:48px var(--pad) 96px;display:grid;align-items:center}
.col{max-width:620px}
h1,h2{font-weight:600;letter-spacing:-.032em;line-height:1.04;text-wrap:balance}
h1{font-size:clamp(40px,5.1vw,78px)}
h1 span{display:block;color:var(--steel)}
h2{font-size:clamp(34px,4vw,60px)}
.lede{margin-top:24px;max-width:46ch;font-size:clamp(17px,1.25vw,20px);color:var(--slate)}
.actions{margin-top:40px;display:flex;flex-wrap:wrap;gap:12px}

.pair{position:relative;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(40px,7vw,128px);align-items:center}

/* Placeholder frames */
.frame{position:relative;height:min(60vh,580px);border:1px solid var(--line);border-radius:14px;overflow:hidden;background:rgba(255,255,255,.6)}
.frame.film{border-color:var(--line)}
.ph{position:absolute;inset:0;display:grid;place-items:center;text-align:center;opacity:0;transform:scale(1.03);transition:opacity .48s var(--curve),transform .7s var(--curve)}
.ph.on{opacity:1;transform:none}
.ph svg{position:absolute;inset:0;width:100%;height:100%}
.ph path{stroke:rgba(22,22,22,.08);stroke-width:1;fill:none}
.ph p{position:relative;padding:12px 18px;border-radius:10px;background:#fff;border:1px solid var(--line);font-size:14px;color:var(--slate)}
.ph b{display:block;font-size:17px;font-weight:600;color:var(--ink)}

/* The services pictures are needle-felted wool models, cut out so they stand on the room's white with no box round them.
   All three are to one scale: --w is each one's width as a share of the container ship's. */
.s-team .frame{border:0;border-radius:0;background:none;overflow:visible}
.s-team .ph img{position:absolute;left:50%;bottom:0;translate:-50% 0;width:var(--w,100%);height:auto;max-height:100%;object-fit:contain;object-position:50% 100%}
.s-team .ph .wool-crane{position:absolute;inset:auto;left:50%;bottom:0;translate:-50% 0;width:var(--w,72%);height:auto;max-height:100%;overflow:visible}
/* A small heave and roll, separate from the existing scene/crossfade transforms. */
.wool-vessel{transform-origin:50% 74%;animation:wool-float 6.2s ease-in-out infinite;animation-play-state:paused}
.wool-cargo{animation-name:wool-float-cargo;animation-duration:7.2s}
.s-team.live .ph.on .wool-vessel{animation-play-state:running}
html.wool-motion-paused .wool-vessel{animation-play-state:paused!important}
@keyframes wool-float{0%,100%{transform:translateY(3px) rotate(-1.1deg)}25%{transform:translateY(-4px) rotate(-.25deg)}50%{transform:translateY(-11px) rotate(1.05deg)}75%{transform:translateY(-3px) rotate(.2deg)}}
@keyframes wool-float-cargo{0%,100%{transform:translateY(4px) rotate(.65deg)}50%{transform:translateY(-10px) rotate(-.7deg)}}

/* 1. First screen. The mark stands on the floor line, lit, and the floor gives back a faint reflection. */
.s-hero .pair{position:static}
.s-hero .pair{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}
.s-hero .col{grid-column:1}
.hero-stand{display:contents}
.hero-mark-slot{position:absolute;right:calc(max(0px,(100vw - 1380px) / 2) + var(--pad) + 4vw);bottom:calc(100% - var(--floor));width:min(46vh,30vw);aspect-ratio:1240/1251}
.mark{width:100%;line-height:0;color:var(--ink)}
/* Standard black/yellow enamel emblem: faithful outline, shallow depth and a near-front-on angle.
   This still is what shows until mark-3d.js draws the same thing live, and where it cannot. */
.mark img{display:block;width:100%;height:auto}

/* 2. Services: three names in large type and nothing else. The chosen one is ink and carries the mark's light;
   the others stand back in grey. No rules, no boxes, no connecting line. */
.svc{margin-top:clamp(28px,4.4vh,44px);display:grid;gap:clamp(16px,2.5vh,26px);max-width:500px}
.svc button{position:relative;display:block;width:100%;text-align:left;padding:0 0 0 26px;border:0;border-radius:0;background:none;cursor:pointer;color:#b4b4b4;transition:color .28s var(--curve)}
.svc button::before{content:"";position:absolute;left:0;top:calc(.6em - 4px);width:9px;height:9px;background:var(--light);opacity:0;transform:scale(.4);transition:opacity .28s var(--curve),transform .28s var(--curve);font-size:clamp(23px,1.95vw,29px)}
.svc button:hover,.svc button:focus-visible{color:var(--slate)}
.svc button.on{color:var(--ink)}
.svc button.on::before{opacity:1;transform:scale(1)}
.svc b{display:block;font-size:clamp(23px,1.95vw,29px);font-weight:600;letter-spacing:-.02em;line-height:1.2}
.svc span{display:block;margin-top:4px;font-size:15.5px;color:#b4b4b4;transition:color .28s var(--curve)}
.svc button.on span{color:var(--slate)}

/* 3. Give us the keys */
.steps{margin-top:30px;padding:0;list-style:none;max-width:500px;border-top:1px solid var(--line)}
.steps li{display:grid;grid-template-columns:28px 1fr;column-gap:10px;padding:13px 0;border-bottom:1px solid var(--line)}
.steps i{grid-row:span 2;font-style:normal;font-size:14px;color:var(--steel);padding-top:3px}
.steps b{font-size:17px;font-weight:600}
.steps span{font-size:15px;color:var(--slate)}

/* 4. Your Harbour */
.s-dash .in{align-items:start}
.s-dash .top{padding-top:9vh;text-align:center;justify-self:center}
.s-dash .lede{margin-left:auto;margin-right:auto;max-width:52ch}
.dash{margin:0 var(--pad) 48px;aspect-ratio:16/10;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#f6f6f6}
.dash iframe{display:block;width:100%;height:100%;border:0;pointer-events:none;filter:grayscale(1)}
/* The frame's legend: what it shows is a sample account. It sits on the frame's top edge */
.sample{position:relative;z-index:1;width:max-content;margin:0 auto -13px;padding:6px 12px;border:1px solid var(--line);border-radius:999px;background:#fff;font-size:12.5px;font-weight:500;line-height:1;color:var(--steel)}

/* 5. Where to next */
.wide{width:100%;max-width:1080px;margin:0 auto}
.tiles{margin-top:40px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.tiles a{position:relative;display:block;min-height:150px;padding:22px 22px 24px;border:1px solid transparent;border-radius:14px;background:var(--fog);transition:border-color .24s var(--curve),background .24s var(--curve),color .24s var(--curve)}
.tiles a:hover{border-color:var(--ink);background:#fff}
/* The next step stands out from the rest: ink, with the light on its arrow */
.tiles a.lead{background:var(--ink);color:#fff}
.tiles a.lead span{color:#b9b9b9}
.tiles a.lead em{display:grid;place-items:center;right:16px;bottom:14px;width:30px;height:30px;border-radius:50%;background:var(--light);color:var(--ink);font-size:17px}
.tiles a.lead:hover{background:#2a2a2a;border-color:transparent}
.tiles b{display:block;font-size:22px;font-weight:600;letter-spacing:-.015em}
.tiles span{display:block;margin-top:6px;max-width:30ch;font-size:15px;color:var(--slate)}
.tiles em{position:absolute;right:20px;bottom:18px;font-style:normal;font-size:20px;color:var(--ink);transition:transform .24s var(--curve)}
.tiles a:hover em{transform:translateX(4px)}
.legal{margin-top:44px;display:flex;flex-wrap:wrap;gap:8px 22px;font-size:13.5px;color:var(--steel)}
.legal a:hover{color:var(--ink)}

/* Next, bottom centre */
.next{display:none;position:absolute;left:50%;bottom:26px;z-index:20;translate:-50% 0;height:46px;opacity:var(--next,0)}
.next.off{visibility:hidden}

/* ---------- Pinned mode (needs script) ---------- */
.js .track{height:calc(var(--units,7) * 100vh);height:calc(var(--units,7) * 100svh)}
.js .stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;touch-action:pinch-zoom}
.js.zoomed .stage{touch-action:auto}   /* pinched larger: one finger moves around it (flow.js) */
.js .scene{position:absolute;inset:0;min-height:0;--a:0;--b:0;--x:0}
.js .scene.off{visibility:hidden;pointer-events:none}
.js .in{min-height:0;height:100%}
.js .next{display:inline-flex}

/* Each piece arrives a beat after the one before it (--i), and they all leave together. */
.js .r{
  --ai:clamp(0,calc(var(--a) * 2 - var(--i,0) * .16),1);
  opacity:calc(var(--ai) * (1 - var(--b)) * (1 - var(--x)));
  transform:translate3d(0,calc((1 - var(--ai)) * 30px - var(--b) * 46px),0);
  filter:blur(calc((1 - var(--ai)) * 6px + var(--b) * 9px));
  will-change:opacity,transform,filter;
}
.js .s-hero .r{animation:arrive .9s var(--curve) backwards;animation-delay:calc(var(--i) * 90ms + 80ms)}
@keyframes arrive{from{opacity:0;transform:translate3d(0,22px,0);filter:blur(6px)}}

/* The dashboard is laid out at full screen size and held small, so growing it is one cheap transform.
   It goes from --s0 to --s1 of the screen and stops there. */
.js .s-dash{--o:0;--s0:.6;--s1:.76;--y0:42vh;--y1:33vh}
.js .dash{position:absolute;inset:0;margin:0;aspect-ratio:auto;transform-origin:50% 0;
  transform:translate3d(0,calc(var(--y0) + (var(--y1) - var(--y0)) * var(--o) + (1 - var(--a)) * 70px - var(--b) * 46px),0) scale(calc(var(--s0) + (var(--s1) - var(--s0)) * var(--o)));
  border-radius:22px;border-color:rgba(22,22,22,.2);
  opacity:calc(clamp(0,calc(var(--a) * 2 - .5),1) * (1 - var(--b)));
  filter:blur(calc(var(--b) * 9px));
  box-shadow:0 50px 120px rgba(0,0,0,.13),0 8px 24px rgba(0,0,0,.05);will-change:transform,opacity}
/* The legend rides the frame's top edge: the same journey and the same fade as the frame, without the scaling */
.js .sample{position:absolute;left:50%;top:-13px;margin:0;translate:-50% 0;border-color:rgba(22,22,22,.2);
  transform:translate3d(0,calc(var(--y0) + (var(--y1) - var(--y0)) * var(--o) + (1 - var(--a)) * 70px - var(--b) * 46px),0);
  opacity:calc(clamp(0,calc(var(--a) * 2 - .5),1) * (1 - var(--b)));filter:blur(calc(var(--b) * 9px));will-change:transform,opacity}

/* On a wide screen the pictures reach down to the floor line and the models stand a little in front of it (5vh).
   The frame is centred in a screen padded 48px above and 96px below, so its foot is at 50vh - 24px + half its height. */
@media (min-width:901px){
  .js .s-team .ph{bottom:calc(min(30vh,290px) + 45vh - 24px - var(--floor))}
}

/* ---------- Upright screens: phones, and tablets held upright ----------
   The same room turned on end: the words on the wall above, the picture standing on the floor below them, and Next
   on the floor in front. Each screen is sized from the screen's height as well as its width, so it fits in one look.
   --band is the strip of floor under the floor line. */
@media (max-width:900px) and (max-aspect-ratio:11/10),(max-width:480px){
  :root{--pad:clamp(20px,5.4vw,48px);--band:min(18vh,168px);--floor:calc(100vh - var(--band))}
  @supports (height:1svh){:root{--band:min(18svh,168px);--floor:calc(100svh - var(--band))}}
  h1{font-size:clamp(36px,10.3vw,46px)}
  h2{font-size:clamp(26px,7.9vw,56px)}
  .lede{margin-top:clamp(10px,1.6vh,20px);max-width:44ch;font-size:clamp(15.5px,2.5vw,20px)}
  .actions{margin-top:clamp(22px,3.4vh,40px)}
  .in{align-items:stretch;padding:clamp(56px,11vh,132px) var(--pad) var(--band)}
  .js .scene:not(.s-hero) .in{padding-top:84px}
  .pair{display:flex;flex-direction:column;align-items:stretch;gap:0;height:100%;min-height:0}
  .col{flex:none;max-width:none}

  /* 1. The mark stands on the floor under the words, as large as the room left over allows */
  .s-hero .pair{display:flex}
  .hero-stand{display:flex;flex:1 1 0;min-height:112px;margin-top:clamp(18px,4.2vh,56px);align-items:flex-end;justify-content:flex-end;container-type:size}
  .hero-mark-slot{position:static;flex:none;width:auto;height:min(30vh,62vw);height:min(90cqh,64cqw);aspect-ratio:1240/1251;
    margin-right:max(0px,min(90cqh,64cqw) * .2 - var(--pad) + 4px)}   /* in from the edge by what a tipped corner needs */
  /* The words are close overhead here, so a tipped mark turns in place rather than rising towards them */
  .site-nav .mark{--mark-lift:0}

  /* 2. Only the chosen service says what it is; the model takes the rest of the wall */
  .svc{margin-top:clamp(14px,2.6vh,30px);gap:clamp(9px,1.5vh,18px);max-width:none}
  .svc button{padding-left:22px}
  .svc button::before{width:8px;height:8px;font-size:clamp(21px,3.4vw,28px)}
  .svc b{font-size:clamp(21px,3.4vw,28px)}
  .svc span{display:none;margin-top:2px;font-size:clamp(14px,2vw,16px)}
  .svc button.on span{display:block}
  .s-team .frame{flex:1 1 0;height:auto;min-height:96px;margin-top:clamp(10px,2.4vh,32px)}

  /* 4. The words' height decides where the dashboard starts (flow.js) */
  .s-dash .top{padding-top:0}
  .js .s-dash{--s0:.86;--s1:.93}

  /* 5. The last screen has no Next, so it uses the floor too */
  .s-next .in{align-items:center;padding-bottom:28px}
  .tiles{margin-top:clamp(16px,2.6vh,32px);grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .tiles a{min-height:clamp(112px,13vh,150px);padding:18px 18px 20px}
  .tiles b{font-size:20px}
  .legal{margin-top:clamp(18px,3vh,36px)}

  .next{bottom:calc((var(--band) - 46px) / 2)}
}
/* A tablet held upright has room for the headline in three lines */
@media (min-width:561px) and (max-width:900px) and (max-aspect-ratio:11/10){
  h1{font-size:clamp(46px,7.6vw,66px)}
  .btn{height:54px;padding:0 30px;font-size:17px}
  .btn.go{padding:0 22px 0 28px}
  .next{height:50px}
  .hero-mark-slot{height:min(88cqh,70cqw);margin-right:max(0px,min(88cqh,70cqw) * .2 - var(--pad) + 4px)}
}
/* A phone: a narrower strip of floor, so the pictures get the room. The last screen is a plain list, so every
   destination keeps its line of explanation */
@media (max-width:560px) and (max-aspect-ratio:11/10),(max-width:480px){
  :root{--band:96px}
  .js .scene:not(.s-hero) .in{padding-top:78px}
  .tiles{grid-template-columns:1fr;gap:0;border-top:1px solid var(--line)}
  .tiles a{min-height:0;padding:13px 40px 14px 0;border:0;border-bottom:1px solid var(--line);border-radius:0;background:none}
  .tiles a:hover{background:none}
  .tiles b{font-size:19px}
  .tiles span{margin-top:1px;max-width:none;font-size:14.5px}
  .tiles em{right:4px;top:50%;bottom:auto;translate:0 -50%}
  .tiles a.lead{margin-top:14px;padding:13px 54px 14px 18px;border:0;border-radius:14px;background:var(--ink)}
  .tiles a.lead:hover{background:var(--ink)}
  .tiles a.lead em{right:14px;top:50%;bottom:auto}
}
/* Short upright screens (a phone with the browser's bars showing): the words give way to the pictures */
@media (max-width:900px) and (max-aspect-ratio:11/10) and (max-height:700px),(max-width:480px) and (max-height:700px){
  .s-team .lede{display:none}
}
@media (max-width:560px) and (max-height:700px){
  :root{--band:88px}
  h2{font-size:clamp(25px,7.3vw,29px)}
  .js .scene:not(.s-hero) .in{padding-top:72px}
  .s-next .in{padding-bottom:16px}
  .tiles{margin-top:12px}
  .tiles a{padding:10px 40px 11px 0}
  .tiles b{font-size:18px}
  .tiles span{font-size:14px}
  .legal{margin-top:14px;gap:4px 20px}
}
@media (max-width:560px) and (max-height:600px){
  .tiles a{padding:11px 40px 12px 0}
  .tiles span{display:none}
}

/* ---------- Low screens in between: a small tablet on its side, a short browser window ----------
   The wide layout with a little less air, so the list and Next do not meet. */
@media (min-height:561px) and (max-height:660px) and (min-aspect-ratio:11/10){
  .in{padding:32px var(--pad) 84px}
  h2{font-size:clamp(30px,6.2vh,60px)}
  .lede{margin-top:14px;font-size:16px}
  .svc{margin-top:20px;gap:14px}
  .svc button::before{font-size:22px}
  .svc b{font-size:22px}
  .svc span{font-size:14px}
  .next{bottom:18px;height:42px}
}

/* ---------- Low, wide screens: a phone on its side ----------
   The wide layout, drawn smaller: two columns, short type, Next tucked into the corner. */
@media (max-height:560px) and (min-aspect-ratio:11/10){
  :root{--pad:clamp(20px,4.6vw,56px);--floor:80vh}
  h1{font-size:clamp(24px,8.4vh,44px)}
  h2{font-size:clamp(22px,7.4vh,40px)}
  .lede{margin-top:10px;font-size:15px}
  .btn{height:42px;padding:0 20px;font-size:15px}
  .btn.go{padding:0 14px 0 20px}
  .actions{margin-top:18px}
  .in{padding:22px var(--pad) 22px}
  .pair{gap:clamp(24px,5vw,64px)}
  .hero-mark-slot{width:min(50vh,26vw)}
  .s-team .lede{display:none}
  .svc{margin-top:14px;gap:9px}
  .svc button{padding-left:20px}
  .svc button::before{width:7px;height:7px;font-size:19px}
  .svc b{font-size:19px}
  .svc span{display:none;margin-top:1px;font-size:13.5px}
  .svc button.on span{display:block}
  .frame{height:min(62vh,300px)}
  .js .s-team .ph{bottom:0}
  .s-dash .top{padding-top:0}
  .s-dash .lede{display:none}
  .tiles{margin-top:14px;gap:10px}
  .tiles a{min-height:0;padding:12px 14px 13px}
  .tiles b{font-size:17px}
  .tiles span{display:none}
  .tiles em,.tiles a.lead em{display:none}
  .legal{margin-top:14px}
  .next{left:auto;right:var(--pad);bottom:16px;height:40px;translate:none}
}

@media (prefers-reduced-motion:reduce){
  .js .r{transform:none;filter:none}
  .js .s-hero .r{animation:none}
  .ph{transition:opacity .2s linear;transform:none}
  .wool-vessel{animation:none;transform:none}
}