/* Harbour Collective. Brush wordmark and HC monogram from Noah's Canva logo (2026-11-09). Cream #fffefa and charcoal #1e1e1e, square corners, one round dot: all taken from the logo. */
@font-face{font-family:Jost;src:url(../fonts/jost.woff2) format("woff2");font-weight:300 500;font-display:swap}
@font-face{font-family:Hanken;src:url(../fonts/hanken-grotesk.woff2) format("woff2");font-weight:100 900;font-display:swap}

:root{
  --cream:#fffefa;--ink:#1e1e1e;--ember:#1e1e1e;--frame:clamp(6px,.75vw,12px);
  --fg:var(--ink);--bg:var(--cream);
  --line:rgba(30,30,30,.22);--glass:rgba(255,254,250,.55);--navglass:rgba(255,254,250,.6);
  --serif:Jost,Futura,"Century Gothic",sans-serif;--sans:Hanken,system-ui,-apple-system,"Segoe UI",sans-serif;
  --r:0px;--ease:cubic-bezier(.2,.75,.2,1);
}
[data-tone=dark]{--fg:var(--cream);--bg:var(--ink);--line:rgba(255,254,250,.22);--glass:rgba(30,30,30,.4);--navglass:rgba(30,30,30,.55)}
@view-transition{navigation:auto}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--bg);overflow-x:clip;scroll-behavior:smooth}
.home,.offer,.contact{position:relative;scroll-margin-top:0}
.offer{padding-bottom:80px}
body{margin:0;min-height:100svh;background:var(--bg);color:var(--fg);font:400 16px/1.4 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:clip}
h1,h2,h3,p,ul,ol,dl,dd,table{margin:0;padding:0}
ul,ol{list-style:none}
a{color:inherit}
img,svg{display:block;max-width:100%}
button,input,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid currentColor;outline-offset:3px;border-radius:4px}
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.skip{position:fixed;left:12px;top:-60px;z-index:50;background:var(--ink);color:var(--cream);padding:12px 16px;border-radius:var(--r);min-height:44px}
.skip:focus{top:12px}

/* the logo's dot, used where the text needs a pause */
.sq{display:inline-block;width:.42em;height:.42em;margin:0 .32em;vertical-align:.12em;border-radius:50%;background:currentColor}

/* backdrop */
.liquid{position:fixed;inset:-3%;z-index:-1;width:106%;height:106%;max-width:none;object-fit:cover;
  transform:translate3d(var(--px,0),var(--py,0),0) scale(1.02);transition:transform 1.2s var(--ease);will-change:transform;animation:drift 42s ease-in-out infinite alternate}
@keyframes drift{to{scale:1.05;rotate:.6deg}}

/* bottom bar */

.sig{position:absolute;left:24px;top:22px;z-index:10;display:flex;align-items:center;gap:8px;font-size:13px;text-decoration:none;min-height:44px}
.sig svg{width:auto;height:68px;color:currentColor;overflow:visible}
.sig span{opacity:.75;white-space:nowrap}

/* shared glass */
.glass{border:1px solid var(--line);border-radius:var(--r);background:var(--glass);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.chip{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border:1px solid currentColor;border-radius:0;font-size:13px;text-decoration:none;white-space:nowrap;transition:background .3s,color .3s}
a.chip:hover{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.chip.solid{background:var(--fg);color:var(--bg);border-color:var(--fg)}
a.chip.solid:hover{background:transparent;color:var(--fg);border-color:var(--fg)}

/* entrance */
.in{animation:in 1.1s var(--ease) both;animation-delay:var(--d,0s)}
@keyframes in{from{opacity:0;transform:translateY(22px)}}

/* HOME */
.home{position:relative;display:flex;min-height:100svh;padding:clamp(70px,13vh,130px) clamp(16px,11.5vw,240px) clamp(60px,10vh,110px)}
.hero{--mw:min(46vw,calc((100svh - 430px)*2.6),820px);position:relative;flex:1;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.6fr) auto;grid-template-rows:auto 1fr;align-items:end;column-gap:clamp(18px,3vw,48px);padding:0 clamp(20px,3.2vw,48px) clamp(20px,3.2vw,40px)}
.mark{grid-column:1/-1;grid-row:1;align-self:start;justify-self:start;position:relative;z-index:1;width:var(--mw);margin:clamp(70px,14vh,150px) 0 0;pointer-events:none}
.mark svg{width:100%;height:auto;overflow:visible}
.mark .wd{position:relative;color:var(--fg);animation:in 1.2s var(--ease) both .05s}
.home .hero{border:var(--frame) solid var(--fg)}
@keyframes pop{from{transform:scale(0)}}
@keyframes draw{from{transform:scaleX(0)}}
.lede{grid-column:1;grid-row:2;position:relative;z-index:2;max-width:31em;padding-top:clamp(16px,3vh,32px);font-size:clamp(16px,1.25vw,20px);line-height:1.24;letter-spacing:-.005em}
.lede .row{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}

.who{grid-column:3;grid-row:2;align-self:end;position:relative;z-index:2;display:flex;align-items:flex-end;gap:18px}
.who .tag{order:-1;text-align:right;padding-bottom:2px}
.who small{display:block;margin-top:8px;font-size:13px}

/* PROCESS */
.roll{--step-bg:var(--ink);--step-fg:var(--cream);--fg:var(--step-fg);--bg:var(--step-bg);--line:color-mix(in srgb,var(--step-fg) 26%,transparent);position:relative;background:var(--step-bg);color:var(--step-fg);transition:background-color .7s linear,color .4s linear}
.drum{display:grid;gap:64px;width:min(100%,620px);margin:0 auto;padding:80px 20px 120px}
.step{--c:var(--ink);--cf:var(--cream)}
.card{width:min(86vw,520px);aspect-ratio:8/5;margin:0 auto 22px;border-radius:0;overflow:hidden;background:var(--c);color:var(--cf)}
.card svg{width:100%;height:100%}
.step h2{font:500 clamp(52px,13vw,100px)/.95 var(--serif);letter-spacing:-.02em;text-align:center}
.step .n{display:block;margin-bottom:10px;text-align:center;font-size:13px}
.step p{max-width:30em;margin:14px auto 0;font-size:17px;line-height:1.35;text-align:center}
.step .row{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:18px}

.js-roll .steps{position:relative;height:calc(100svh + 90svh*var(--count))}
.js-roll .drum{display:block;position:sticky;top:0;width:100%;max-width:none;height:100svh;padding:0;overflow:hidden}
.js-roll .step{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.js-roll .card{position:absolute;left:50%;top:46%;margin:0;width:var(--cw);height:var(--ch);transform-origin:50% 50%;backface-visibility:hidden;will-change:transform}
.js-roll .step h2{position:absolute;left:0;right:0;top:46%;transform:translateY(-50%);font-size:clamp(66px,10.4vw,180px);opacity:0;transition:opacity .3s,color .3s;color:var(--tc,inherit)}
.js-roll .step .n{display:none}
.js-roll .step .body{position:absolute;left:clamp(24px,5vw,90px);bottom:110px;width:min(26vw,320px);opacity:0;transition:opacity .3s;text-align:left}
.js-roll .step .body p{margin:0;text-align:left;font-size:clamp(16px,1.2vw,19px)}
.js-roll .step .row{justify-content:flex-start}
.js-roll .step.on{pointer-events:auto}
.js-roll .step.on h2,.js-roll .step.on .body{opacity:1}
.js-roll .step h2,.js-roll .step .body{z-index:40}
.js-roll .step.blend h2{color:#fff;mix-blend-mode:difference}

/* OFFER */
.bento{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;grid-template-rows:repeat(100,1fr);gap:6px;width:min(100vw - 32px,1280px);height:calc(100svh - 88px);min-height:600px;margin:0 auto;padding-top:clamp(14px,3.4vh,34px)}
.tile{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:10px;padding:18px 16px;overflow:hidden;border-radius:var(--r);min-width:0}
.tile h2{font-size:13px;font-weight:400;text-align:center}
.tile .foot{font-size:13px;text-align:center;max-width:26ch}
.price{display:grid;place-items:center;flex:1;width:min(100%,250px);max-height:190px;border-radius:0;background:rgba(255,254,250,.08);font:300 clamp(40px,3.9vw,64px)/1 var(--sans);letter-spacing:-.04em;box-shadow:inset 0 0 0 1px rgba(255,254,250,.14)}
.d{grid-area:1/1/46/3}.a{grid-area:46/1/101/2}.b{grid-area:46/2/101/3}.f{grid-area:1/3/101/5}
.b{background:var(--cream);color:var(--ink);border-color:transparent;--fg:var(--ink);--bg:var(--cream)}
.b ul{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}

.d{padding:18px 0}
.tick{display:flex;flex-direction:column;gap:8px;width:100%;flex:1;justify-content:center;overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);mask:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}
.tick ul{display:flex;gap:8px;width:max-content;animation:slide 26s linear infinite}
.tick ul+ul{animation-direction:reverse;animation-duration:32s}
.tick li{display:grid;place-items:center;padding:0 14px;height:clamp(52px,8.4vh,72px);border:1px solid var(--line);border-radius:0;font-size:13px;white-space:nowrap;background:rgba(255,254,250,.06)}
@keyframes slide{to{transform:translateX(-50%)}}
.f{padding:0;border:0;background:var(--ink);justify-content:flex-end;align-items:stretch}

.f table{position:relative;width:100%;border-collapse:collapse;font-size:13px;margin:0}
.f .tw{position:relative;padding:0 14px 14px}
.f caption{padding:0 0 10px;font-size:13px;text-align:center}
.f th,.f td{padding:9px 4px;border-top:1px solid var(--line);text-align:left;font-weight:400}
.f td{text-align:right}
.f .note{margin-top:0;padding-top:9px;border-top:1px solid var(--line);font-size:13px}

/* CONTACT */
.say{display:flex;align-items:center;justify-content:center;min-height:100svh;padding:24px 16px 96px}
.sayp{display:grid;grid-template-columns:1fr 1fr;gap:24px;width:min(100%,1040px);padding:clamp(14px,1.8vw,24px)}
.fw{padding:clamp(8px,3vw,44px) clamp(6px,3.4vw,54px);display:flex;flex-direction:column;justify-content:center;min-width:0}
.fw h1,.fw .big{font:500 clamp(56px,6.6vw,100px)/.92 var(--serif);letter-spacing:-.02em;text-align:center}

.fw label{display:block;margin:10px 0 5px;font-size:13px}
.fw input,.fw textarea{display:block;width:100%;min-height:46px;padding:11px 12px;border:1px solid var(--line);border-radius:0;background:rgba(255,254,250,.5);font-size:16px}
[data-tone=dark] .fw input,[data-tone=dark] .fw textarea{background:rgba(255,254,250,.06)}
.fw textarea{min-height:92px;resize:vertical}
.fw input:focus,.fw textarea:focus{outline:2px solid var(--fg);outline-offset:0;border-color:transparent}
.send{display:block;width:100%;min-height:48px;margin-top:14px;border:1px solid var(--fg);border-radius:0;background:var(--fg);color:var(--bg);font-size:15px;cursor:pointer;transition:background .3s,color .3s}
.send:hover{background:transparent;color:var(--fg)}
.fine{margin-top:10px;font-size:13px;text-align:center}

/* phones and small tablets */
@media (max-width:900px){
  .sig{left:16px;top:18px}
  .sig svg{height:58px}
  .nav{left:10px;right:10px;bottom:10px;translate:none;justify-content:space-between;gap:6px;padding:5px}
  .nav a{flex:1;min-width:0;padding:0 4px;font-size:12px;letter-spacing:.02em}
  .offer{padding-bottom:0}
  .home{display:block;padding:96px 10px 84px}
  .hero{display:block;padding:0;border:0;background:none;-webkit-backdrop-filter:none;backdrop-filter:none}
  .top{position:relative;display:flex;justify-content:center;padding:42vw 16px 16px;border:1px solid var(--line);border-radius:var(--r);background:var(--glass);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
  .mark{position:absolute;top:13vw;left:16px;width:86%;margin:0}
  .home .hero{border:0}
  .hero::before,.hero::after{content:none}
  .top{border:var(--frame) solid var(--fg)!important}
  .who{display:block}
  .who .tag{display:none}
  .lede{margin-top:6px;padding:20px 16px;max-width:none;text-align:center;font-size:19px;line-height:1.22;border:1px solid var(--line);border-radius:var(--r);background:var(--glass);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
  .lede .row{justify-content:center}
  .nameline{margin-top:16px}
  .nameline small{display:block;margin-top:6px;font-size:13px}
  .js-roll .steps{height:calc(100svh + 80svh*var(--count))}
  .js-roll .card{top:32%}
  .js-roll .step h2{top:32%;font-size:clamp(58px,19vw,120px)}
  .js-roll .step .body{left:12px;right:12px;width:auto;top:auto;bottom:80px;transform:none;padding:14px 16px;border-radius:var(--r);background:color-mix(in srgb,var(--step-bg) 62%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
  .js-roll .step .body p{font-size:16px;text-align:center}
  .js-roll .step .row{justify-content:center;margin-top:10px}
  .bento{display:flex;flex-direction:column;width:auto;height:auto;min-height:0;margin:0;padding:14px 10px 24px}
  .tile{min-height:260px}
  .a{min-height:300px}.d{min-height:230px;order:-1}.f{min-height:0}
  .price{min-height:170px}
  .say{padding:14px 10px 90px;align-items:flex-start}
  .sayp{grid-template-columns:1fr;gap:12px;padding:10px}
  .fw{padding:18px 6px 8px}
  .pic{min-height:0;aspect-ratio:4/5}
}
@media (min-width:901px){.nameline{display:none}.top{display:contents}}
@media (min-width:901px) and (max-height:700px){.home{padding-top:64px;padding-bottom:84px}.lede{font-size:16px}.lede .row{margin-top:12px}}

@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .liquid{transform:none}
  .tick{-webkit-mask:none;mask:none}
  .tick ul{width:100%;flex-wrap:wrap;justify-content:center}
  .tick ul[aria-hidden]{display:none}
}
.f{justify-content:center;border:1px solid var(--line)}
.offer{padding-bottom:40px}
.say{padding-bottom:60px}
.js-roll .step .body{bottom:60px}
@media (max-width:900px){.home{padding-bottom:24px}.say{padding-bottom:24px}.js-roll .step .body{bottom:24px}}
/* contact: one column, form sends to /api/message */
.sayp{grid-template-columns:1fr;width:min(100%,640px)}
.reach{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:14px 0 18px}
.reach .chip{min-height:40px;padding:0 14px;font-size:13px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.msg.sent .send{opacity:.5;pointer-events:none}
.down{position:absolute;left:50%;bottom:18px;translate:-50% 0;z-index:10;display:grid;place-items:center;width:44px;height:44px;color:var(--fg);opacity:.75;transition:opacity .2s}
.down:hover,.down:focus-visible{opacity:1}
.down svg{width:14px;height:22px;animation:nudge 2.4s ease-in-out infinite}
@keyframes nudge{50%{transform:translateY(5px)}}
@media (prefers-reduced-motion:reduce){.down svg{animation:none}}
.f .cap{margin-top:18px;padding-bottom:10px;font-size:13px;text-align:center}
.f .inc{list-style:none;font-size:13px}
.f .inc li{padding:8px 4px;border-top:1px solid var(--line)}
.faq{position:relative;display:flex;justify-content:center;padding:40px 16px;scroll-margin-top:0}
.faqp{width:min(100%,760px);padding:clamp(20px,3vw,44px)}
.faq .big{font:500 clamp(56px,6.6vw,100px)/.92 var(--serif);letter-spacing:-.02em;text-align:center;margin-bottom:clamp(18px,3vw,32px)}
.qs details{border-top:1px solid var(--line)}
.qs details:last-child{border-bottom:1px solid var(--line)}
.qs summary{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:56px;padding:12px 2px;cursor:pointer;list-style:none;font-size:17px;line-height:1.3}
.qs summary::-webkit-details-marker{display:none}
.qs summary::after{content:"";flex:none;width:12px;height:12px;background:linear-gradient(currentColor,currentColor) center/12px 1.5px no-repeat,linear-gradient(currentColor,currentColor) center/1.5px 12px no-repeat;transition:transform .25s var(--ease)}
.qs details[open] summary::after{transform:rotate(45deg)}
.qs summary:focus-visible{outline:2px solid var(--fg);outline-offset:2px}
.qs details p{max-width:60ch;padding:0 2px 18px;opacity:.85;line-height:1.5}
@media (prefers-reduced-motion:reduce){.qs summary::after{transition:none}}
.f .more{padding:0;border:0;background:none;color:inherit;font:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer;min-height:24px}
.f .more::after{content:" +";text-decoration:none;display:inline-block;margin-left:4px;transition:transform .2s}
.f .more[aria-expanded=true]::after{transform:rotate(45deg)}
.f .more:focus-visible{outline:2px solid var(--fg);outline-offset:3px}
/* contact panel matches the FAQ panel (D137) */
.say{min-height:0;padding:40px 16px 80px}
.sayp{width:min(100%,760px);padding:clamp(20px,3vw,44px)}
.contact .fw{padding:0}
.contact .fw .big{max-width:13ch;margin:0 auto;font-size:clamp(44px,5.4vw,84px);line-height:.95}
.contact .msg{width:min(100%,560px);margin:0 auto}
.contact .reach{margin:22px 0 26px}
/* FAQ: heading column left, questions right (D140) */
.faqp{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr);gap:clamp(24px,4vw,64px);align-items:start;width:min(100vw - 32px,1100px)}
.fq-h{position:sticky;top:40px;display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.faq .fq-h .big{margin:0;text-align:left}
.fq-h p{font-size:15px;opacity:.8}
@media (max-width:900px){.faqp{grid-template-columns:1fr;gap:18px}.fq-h{position:static;align-items:center;text-align:center}.faq .fq-h .big{text-align:center}}
.f .faq-link{display:flex;align-items:center;justify-content:flex-end;min-height:44px;margin-top:6px;padding:0 4px;font-size:13px;text-decoration:underline;text-underline-offset:3px;color:inherit}
.f .faq-link:hover,.f .faq-link:focus-visible{opacity:.75}
.faq{padding-bottom:80px}
.f .faq-link{position:absolute;right:14px;bottom:10px;margin:0}
@media (max-width:900px){.f .faq-link{position:static;margin-top:6px}}
.faq .fq-h .big{font-size:clamp(40px,4.4vw,68px);line-height:.98}
/* Our clients (D143): paid clients who agreed to be shown */
.clients{position:relative;display:flex;justify-content:center;padding:40px 16px}
.clp{width:min(100vw - 32px,1100px);padding:clamp(20px,3vw,44px)}
.clients .big{font:500 clamp(40px,4.4vw,68px)/.98 var(--serif);letter-spacing:-.02em;text-align:center;margin-bottom:clamp(18px,3vw,32px)}
.cl-grid{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.cl{display:flex;flex-direction:column;gap:4px;color:inherit;text-decoration:none;padding:0 0 12px;border:1px solid var(--line)}
.cl img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;margin-bottom:8px}
.cl-n{padding:0 12px;font-size:16px}
.cl-t{padding:0 12px;font-size:13px;opacity:.75}
.cl:hover .cl-n,.cl:focus-visible .cl-n{text-decoration:underline;text-underline-offset:3px}
.cl:focus-visible{outline:2px solid var(--fg);outline-offset:2px}
/* On your site: three seamless looping rows (D144) */
.tick{gap:8px}
.tick .tr{display:flex;gap:8px;width:max-content;animation:tickloop 48s linear infinite}
.tick .tr:nth-child(2){animation-direction:reverse;animation-duration:56s}
.tick .tr:nth-child(3){animation-duration:64s}
.tick .tr ul{display:flex;gap:8px;width:auto;animation:none;list-style:none}
.tick li{height:clamp(44px,6.2vh,58px)}
@keyframes tickloop{to{transform:translateX(calc(-50% - 4px))}}
@media (prefers-reduced-motion:reduce){.tick .tr{animation:none}}
@media (max-width:900px){.tick .tr{animation:none;width:100%}.tick .tr ul{width:100%;flex-wrap:wrap;justify-content:center}.tick .tr ul[aria-hidden]{display:none}}
/* Footer: the official end of the site (D146) */
.end{position:relative;margin:0 auto;width:min(100vw - 32px,1100px);padding:clamp(28px,4vw,48px) 0 28px;border-top:1px solid var(--line);color:var(--fg)}
.end-in{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
.end-mark{display:block;color:inherit}
.end-mark svg{display:block;height:72px;width:auto}
.end-links{display:flex;gap:4px 18px;flex-wrap:wrap;font-size:13px}
.end-links a{display:inline-flex;align-items:center;min-height:44px;color:inherit;text-decoration:underline;text-underline-offset:3px}
.end-links a:hover,.end-links a:focus-visible{opacity:.7}
.end-c{margin-top:18px;padding-top:14px;border-top:1px solid var(--line);font-size:13px;opacity:.75}
@media (max-width:700px){.end-in{flex-direction:column;align-items:flex-start}}
/* Contact: wide two-column panel (D147) */
.sayp{width:min(100vw - 32px,1100px)}
.contact .fw{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr);gap:clamp(24px,4vw,64px);align-items:start}
.ct-h{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.contact .fw .big{max-width:none;margin:0;font-size:clamp(34px,3.4vw,52px);line-height:1;text-align:left}
.contact .reach{flex-direction:column;align-items:flex-start;justify-content:flex-start;margin:0}
.contact .msg{width:100%;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:4px 14px}
.contact .msg .fld.wide,.contact .msg .send,.contact .msg .fine,.contact .msg .hp{grid-column:1/-1}
.contact .fld label{margin-top:4px}
.contact .msg .send{justify-self:start}
@media (max-width:900px){.contact .fw{grid-template-columns:1fr;gap:18px}.contact .msg{grid-template-columns:1fr}.ct-h{align-items:center;text-align:center}.contact .fw .big{text-align:center}.contact .reach{align-items:center}}
/* Lower panels line up with the price grid (D148) */
.say,.faq,.clients{padding-left:0;padding-right:0}
.sayp,.faqp,.clp,.end{width:min(100vw - 32px,1280px)}
@media (max-width:900px){.sayp,.faqp,.clp,.end{width:calc(100vw - 20px)}}
/* Hero backdrop: our own isometric devices line drawing (D149) */
.devs{position:absolute;right:clamp(16px,3vw,48px);top:50%;z-index:0;height:min(74%,600px);width:auto;max-width:52%;translate:0 -54%;opacity:.42;pointer-events:none;animation:in 1.4s var(--ease) both .4s}
@media (max-width:900px){.devs{display:none}}
.devs{max-width:36%;height:auto;right:clamp(16px,2.6vw,40px);top:44%}
/* Bigger HC badge (D151) */
.sig svg{height:104px}
@media (max-width:900px){.sig svg{height:76px}.home{padding-top:108px}}
/* Hand-drawn computer replaces the device drawing (D152) */
.devs{height:min(48%,380px);width:auto;max-width:30%;right:clamp(28px,6vw,110px);top:42%;opacity:.92}
/* Hero wordmark 20% smaller (D153) */
.hero{--mw:min(36.8vw,calc((100svh - 430px)*2.08),656px)}
@media (max-width:900px){.mark{width:69%}.top{padding-top:34vw}}
/* Computer as a see-through backdrop, wordmark back to full size (D154) */
.devs{opacity:.28}
.hero{--mw:min(48vw,calc((100svh - 430px)*2.7),860px)}
@media (max-width:900px){.mark{width:86%}.top{padding-top:42vw}}
/* Wordmark 5% smaller (D155) */
.hero{--mw:min(45.6vw,calc((100svh - 430px)*2.565),817px)}
@media (max-width:900px){.mark{width:81.7%}}
/* Phones get the moving parts too (D156) */
@media (max-width:900px){
  .devs{display:block;right:12px;top:50%;translate:0 -50%;height:auto;width:46%;max-width:none;opacity:.22}
  .tick .tr{animation:tickloop 48s linear infinite;width:max-content}
  .tick .tr:nth-child(2){animation-direction:reverse;animation-duration:56s}
  .tick .tr:nth-child(3){animation-duration:64s}
  .tick .tr ul{width:auto;flex-wrap:nowrap}
  .tick .tr ul[aria-hidden]{display:flex}
  .tick{-webkit-mask:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
}
@media (max-width:900px) and (prefers-reduced-motion:reduce){.tick .tr{animation:none}}
/* Computer: transparent white (D157) */
.devs{opacity:.5}
@media (max-width:900px){.devs{opacity:.38}}
/* Hero illustration: Higgsfield-retouched web team line art, white at 75% (D159) */
.devs{width:33%;max-width:33%;height:auto;right:clamp(20px,2.4vw,40px);top:44%;opacity:.75}
@media (max-width:900px){.devs{width:52%;max-width:none;opacity:.32}}
/* Nudge the hero illustration up and right (D160) */
@media (min-width:901px){.devs{top:40%;right:clamp(10px,1.5vw,24px)}}
/* Hero illustration: 10% smaller, higher, solid white (D161) */
@media (min-width:901px){.devs{width:29.7%;max-width:29.7%;top:35%;right:clamp(4px,.9vw,14px);opacity:1}}
/* Leaves removed: narrower drawing, same height (D163) */
@media (min-width:901px){.devs{width:21.3%;max-width:21.3%;right:clamp(30px,4vw,64px)}}
@media (max-width:900px){.devs{width:38%}}
/* Bigger, slightly lower and left (D164) */
@media (min-width:901px){.devs{width:24.5%;max-width:24.5%;top:38%;right:clamp(46px,5.4vw,84px)}}
/* Privacy note under the form (D165) */
.contact .msg .privacy{grid-column:1/-1;margin-top:6px;font-size:12px;line-height:1.45;text-align:center;opacity:.7}
/* Hero frame morphs into a phone that becomes the first how-we-work card (D174) */
/* Laptop instead of phone: screen with a camera dot, keyboard deck below (D184) */
.js-morph .step:first-child .card{box-sizing:border-box;overflow:visible;border:var(--frame) solid var(--cream);border-radius:calc(var(--cw)*.02)}
.js-morph .step:first-child .card svg{border-radius:calc(var(--cw)*.01)}
.js-morph .step:first-child .card::before{content:"";position:absolute;left:50%;top:calc(var(--cw)*.006);z-index:2;width:max(4px,calc(var(--cw)*.011));aspect-ratio:1;translate:-50% 0;border-radius:50%;background:var(--cream)}
.js-morph .step:first-child .card::after{content:"";position:absolute;left:50%;top:100%;width:calc(var(--cw)*1.16);height:max(6px,calc(var(--cw)*.032));translate:-50% 0;border-radius:0 0 calc(var(--cw)*.03) calc(var(--cw)*.03);background:var(--cream)}
.js-morph .home .hero{border-color:transparent}
.js-morph .top{border-color:transparent!important}
.js-morph.morph-rest .home .hero{border-color:var(--fg)}
.js-morph.morph-rest .top{border-color:var(--fg)!important}
.morph{position:fixed;inset:0;z-index:60;width:100%;height:100%;pointer-events:none;color:var(--cream);overflow:visible}
/* The how-we-work phone widens into a desktop monitor whose screen is the offer grid (D175) */
.js-morph .bento{--mr:22px;--neck:clamp(22px,4vh,40px);position:relative;box-sizing:border-box;border:var(--frame) solid transparent;border-radius:var(--mr);padding:clamp(10px,1.2vw,16px)}
.js-morph .bento::before{content:"";position:absolute;left:50%;top:100%;translate:-50% 0;width:max(28px,6%);height:var(--neck);background:var(--cream);opacity:0}
.js-morph .bento::after{content:"";position:absolute;left:50%;top:calc(100% + var(--neck));translate:-50% 0;width:max(110px,22%);height:var(--frame);border-radius:99px;background:var(--cream);opacity:0}
.js-morph.mon-done .bento{border-color:var(--cream)}
.js-morph.mon-done .bento::before,.js-morph.mon-done .bento::after{opacity:1}
.js-morph .offer{padding-bottom:calc(var(--frame) + clamp(22px,4vh,40px) + 36px)}
@media (max-width:900px){.js-morph .bento{--mr:18px;margin:0 10px;padding:10px}}
@media (min-width:901px){.js-morph .bento{height:auto;min-height:max(600px,calc(100svh - 88px - clamp(16px,3vh,32px)));margin:clamp(16px,3vh,32px) auto 0}}
/* How we design and build (D176) */
.how{position:relative;display:flex;justify-content:center;padding:40px 0}
.howp{width:min(100vw - 32px,1280px);padding:clamp(20px,3vw,44px)}
.how .big{font:500 clamp(40px,4.4vw,68px)/.98 var(--serif);letter-spacing:-.02em;margin-bottom:clamp(18px,3vw,32px)}
.hw{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 clamp(18px,3vw,44px)}
.hw li{padding:18px 0 22px;border-top:1px solid var(--line)}
.hw-n{display:block;font-size:13px;opacity:.7;margin-bottom:10px}
.hw h3{font:500 clamp(20px,1.7vw,26px)/1.1 var(--serif);margin:0 0 8px}
.hw p{max-width:38ch;font-size:15px;line-height:1.45;opacity:.85}
@media (max-width:900px){.howp{width:calc(100vw - 20px)}.hw{grid-template-columns:1fr}}
@media (min-width:901px) and (max-width:1160px){.hw{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Hero (D-skyline): centred wordmark, no drawing, no button */
.devs{display:none!important}
.lede .row{display:none}
@media (min-width:901px){
  .hero{display:flex!important;flex-direction:column;align-items:center;justify-content:center;text-align:center}
  .top{display:contents}
  .mark{position:relative;width:min(62vw,calc((100svh - 380px)*3),980px)!important;margin:0 auto!important;justify-self:auto;align-self:auto}
  .lede{max-width:none;margin-top:clamp(22px,4vh,40px);text-align:center;padding-top:0}
  .who{position:absolute;right:clamp(20px,3.2vw,48px);bottom:clamp(20px,3.2vw,40px)}
}

.paint{display:block}.paint .wd{display:block;width:100%;height:auto;animation:none!important}

@media (min-width:901px){.lede{font-size:clamp(18px,1.45vw,22px)}}


/* v6: wordmark paints in, then the real skyline draws, then the water and a junk boat */
.paint .wd{display:block;width:100%;height:auto;overflow:hidden!important;
  -webkit-mask-image:linear-gradient(90deg,#000 45%,transparent 55%);mask-image:linear-gradient(90deg,#000 45%,transparent 55%);
  -webkit-mask-size:240% 100%;mask-size:240% 100%;-webkit-mask-position:100% 0;mask-position:100% 0;
  animation:brush 1s cubic-bezier(.55,.1,.35,1) forwards!important}
.paint .l1{animation-delay:.2s!important}.paint .l2{animation-delay:.95s!important}
@keyframes brush{to{-webkit-mask-position:0 0;mask-position:0 0}}
@media (min-width:901px){.mark{width:min(54vw,calc((100svh - 420px)*2.9),900px)!important}}
.sky{display:block;width:min(66vw,1040px);height:auto;margin:clamp(6px,1.2vh,14px) auto 0;color:var(--fg);overflow:visible}
.sky path{fill:none;stroke:currentColor;stroke-linejoin:round;stroke-linecap:round}
.skyline{stroke-width:1.5;stroke-dasharray:1;stroke-dashoffset:1;animation:draw-sky 2.4s cubic-bezier(.55,.1,.3,1) 1.7s forwards}
.shore{stroke-width:1.2;stroke-dasharray:1;stroke-dashoffset:1;animation:draw-sky 1.2s ease 1.7s forwards}
.wave{stroke-width:1;opacity:0}
.w1{animation:fade-to .9s ease 3.6s forwards,drift 10s linear 3.6s infinite;--o:.6}
.w2{animation:fade-to .9s ease 3.8s forwards,drift 14s linear 3.8s infinite reverse;--o:.35}
.w3{animation:fade-to .9s ease 4s forwards,drift 18s linear 4s infinite;--o:.2}
.boat path{stroke-width:2.4}
.boat{opacity:0;animation:fade-to 1.2s ease 3.9s forwards;--o:1}
.bob{animation:bob 6s ease-in-out 3.9s infinite;transform-box:fill-box;transform-origin:center}
@keyframes draw-sky{to{stroke-dashoffset:0}}
@keyframes fade-to{to{opacity:var(--o)}}
@keyframes drift{to{transform:translateX(-100px)}}
@keyframes bob{0%,100%{transform:translate(0,0) rotate(0)}50%{transform:translate(-14px,2px) rotate(-1.2deg)}}
@media (max-width:900px){.sky{position:absolute;left:14px;right:14px;bottom:10px;width:auto;margin:0}}
@media (prefers-reduced-motion:reduce){.paint .wd{animation:none!important;-webkit-mask-image:none;mask-image:none}.skyline,.shore{animation:none;stroke-dashoffset:0}.wave{animation:none;opacity:var(--o)}.boat{animation:none;opacity:1}.bob{animation:none}}
/* white frame hidden at rest; it fades in only as the hero morphs into the phone */
.home .hero{border-color:transparent!important}
@media (max-width:900px){.top{border-color:transparent!important}}

@media (min-width:901px){
  .mark{width:min(46vw,calc((100svh - 470px)*2.9),780px)!important}
  .sky{width:min(58vw,calc((100svh - 330px)*2.6),900px)}
  .lede{margin-top:clamp(14px,2.4vh,26px)}
}
.boat path{stroke-width:1.8}
/* phones: no frame at rest, and a simple stack: wordmark, skyline, text */
.js-morph.morph-rest .top,.js-morph .top{border-color:transparent!important}
@media (max-width:900px){
  .top{display:block!important;padding:18px 0 0!important;background:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  .mark{position:static!important;width:88%!important;margin:0 auto!important}
  .sky{position:static!important;width:100%!important;margin:16px 0 0!important}
  .lede{border:0!important;background:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;padding:18px 10px!important}
}

/* D183: no grey at the top. The liquid backdrop stays hidden while the hero is on screen,
   and the page never rubber-bands past the top to show anything behind it. */
html,body{overscroll-behavior-y:none}
.liquid{transition:opacity .8s var(--ease),transform 1.2s var(--ease)}
.liquid.off{opacity:0}

/* D187: the line under the wordmark is one plain sentence (Handl-style), bold Hanken like the
   original logo lockup, lowercase, letters arriving after the boat, a fine rule drawn under it. */
.lede .type{position:relative;display:inline-block;max-width:min(92vw,46ch);margin:0;padding-bottom:.55em;font-family:var(--sans);font-weight:700;font-size:clamp(16px,1.35vw,21px);letter-spacing:.04em;line-height:1.35;text-wrap:balance}
.lede .type .w{white-space:nowrap}
.lede .type .w span{display:inline-block;opacity:0;translate:0 .35em;filter:blur(5px);animation:letter .8s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:calc(4.1s + var(--i) * 22ms)}
.lede .type::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;opacity:.55;transform:scaleX(0);transform-origin:0 50%;animation:rule 1.3s cubic-bezier(.65,0,.35,1) 5.5s forwards}
@keyframes letter{to{opacity:1;translate:0 0;filter:blur(0)}}
@keyframes rule{to{transform:scaleX(1)}}
@media (min-width:901px){.lede .type{max-width:none;white-space:nowrap;font-size:clamp(16px,1.25vw,21px)}}
@media (prefers-reduced-motion:reduce){.lede .type .w span{animation:none;opacity:1;translate:none;filter:none}.lede .type::after{animation:none;transform:none}}

/* D188: our clients as a Handl-style work gallery. Full bleed, two columns, 16:9 tiles with
   1px seams, the name small at the bottom left, a "view site" label that follows the pointer. */
.work{position:relative;padding:clamp(56px,10vh,120px) 0 0;scroll-margin-top:0}
.wk{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:1px;background:color-mix(in srgb,var(--cream) 14%,transparent)}
.wk li:last-child:nth-child(odd){grid-column:1/-1}
.wk li:last-child:nth-child(odd) .wt{aspect-ratio:21/9}
.wt{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:#151515;color:#fffefa;text-decoration:none}
.wt img,.wt video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease),opacity .6s}
.wt video{opacity:0}.wt video.on{opacity:1}
.wt::after{content:"";position:absolute;inset:auto 0 0;height:34%;background:linear-gradient(transparent,rgba(10,10,10,.62));pointer-events:none}
.wt-n{position:absolute;left:clamp(12px,1.3vw,20px);bottom:clamp(10px,1.2vw,18px);z-index:2;font-size:clamp(14px,1.05vw,16px);letter-spacing:.01em}
.wt-n i{font-style:normal;opacity:.66;margin-left:.5em}
.wt:hover img,.wt:hover video{transform:scale(1.035)}
.wt:focus-visible{outline:2px solid var(--cream);outline-offset:-4px}
.wk-cur{position:fixed;left:0;top:0;z-index:70;padding:7px 12px;border-radius:99px;background:var(--cream);color:var(--ink);font-size:13px;pointer-events:none;opacity:0;scale:.6;transition:opacity .25s,scale .25s var(--ease);translate:var(--x,-200px) var(--y,-200px)}
.wk-cur.on{opacity:1;scale:1}
@media (max-width:700px){.wk{grid-template-columns:1fr}.wk li:last-child:nth-child(odd) .wt{aspect-ratio:16/9}}
@media (pointer:coarse){.wk-cur{display:none}}
@media (prefers-reduced-motion:reduce){.wt img,.wt video{transition:none}.wt:hover img,.wt:hover video{transform:none}}

/* D190: Handl-style menu, plain words fixed at the top right; "work" appears once there are clients.
   Difference blend keeps it readable over dark, cream and photos. The gallery has no heading. */
.tnav{position:fixed;top:clamp(14px,2.2vh,24px);right:clamp(16px,2.4vw,36px);z-index:80;display:flex;gap:clamp(16px,2vw,30px);mix-blend-mode:difference}
.tnav a{color:#fff;text-decoration:none;font:500 clamp(15px,1.3vw,20px)/1 var(--sans);letter-spacing:-.01em;padding:12px 0;transition:opacity .2s}
.tnav:hover a{opacity:.55}.tnav a:hover,.tnav a:focus-visible{opacity:1}
.tnav a:focus-visible{outline:2px solid #fff;outline-offset:4px}

/* D194: pricing on desktop, Handl-minimal. No boxes, chips or ticker inside the monitor: the price large
   on the left, the pricing table on the right, who it's for and what's on your site as plain text,
   hairlines between. The monitor sits below the top-right menu. */
@media (min-width:901px){
  .offer{padding-top:clamp(60px,9vh,84px)}
  .js-morph .bento{margin-top:0;min-height:max(560px,calc(100svh - 88px - clamp(60px,9vh,84px)))}
  .offer .bento{grid-template-columns:1fr 1fr;grid-template-rows:1fr auto;gap:0}
  .offer .bento .a{grid-area:1/1/2/2}.offer .bento .f{grid-area:1/2/3/3}.offer .bento .b{grid-area:2/1/3/2}.offer .bento .d{grid-area:3/1/4/3}
  .offer .bento .tile{align-items:flex-start;justify-content:flex-start;gap:clamp(10px,1.6vh,18px);padding:clamp(20px,2.4vw,40px);border:0;border-radius:0;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;color:var(--cream);--fg:var(--cream);--bg:var(--ink);text-align:left}
  .offer .bento .f{border-left:1px solid var(--line)}
  .offer .bento .b,.offer .bento .d{border-top:1px solid var(--line)}
  .offer .tile h2{font-size:13px;font-weight:400;text-align:left;opacity:.55}
  .offer .tile h2 .sq,.offer .f caption .sq{display:none}
  .offer .price{display:block;flex:0 0 auto;width:auto;max-height:none;margin-top:auto;background:none;box-shadow:none;font:300 clamp(72px,8.2vw,148px)/.9 var(--sans);letter-spacing:-.055em}
  .offer .tile .foot{max-width:none;text-align:left;font-size:15px;opacity:.7}
  .offer .tile>*{max-width:100%}
  .offer .b ul{display:block;width:100%;box-sizing:border-box;margin:0;padding:0;list-style:none;font-size:clamp(17px,1.4vw,22px);line-height:1.35}
  .offer .b .chip{display:inline;min-height:0;padding:0;border:0;font-size:inherit;white-space:normal;background:none}
  .offer .b .chip:not(:last-child)::after{content:", "}
  .offer .b .foot{margin-top:auto}
  .offer .tick{display:block;-webkit-mask:none;mask:none;font-size:15px;line-height:1.55;opacity:.75}
  .offer .tick .tr{display:inline;width:auto;animation:none}
  .offer .tick .tr ul{display:inline;margin:0;padding:0}
  .offer .tick .tr ul[aria-hidden]{display:none}
  .offer .tick li{display:inline;height:auto;padding:0;border:0;background:none;font-size:inherit;white-space:normal}
  .offer .tick .tr ul:not([aria-hidden]) li::after{content:", "}
  .offer .tick .tr:last-child ul:not([aria-hidden]) li:last-child::after{content:none}
  .offer .f .tw{width:100%;padding:0}
  .offer .f caption{padding:0 0 clamp(14px,2vh,22px);text-align:left;opacity:.55}
  .offer .f table{width:100%}
}

/* D196: the skyline is the picture and draws in first; the wordmark is a single small line just above the left rooftops; no boat */
.stage{position:relative;width:min(100%,1180px);margin:clamp(40px,8vh,90px) auto 0}
.stage .sky{width:100%!important;margin:0!important;position:static!important}
.stage .mark{position:absolute!important;left:5%!important;top:37%!important;width:29%!important;margin:0!important;z-index:2}
.stage .mark .paint{display:flex!important;align-items:flex-end;gap:2.2%}
.stage .mark .paint .wd{width:auto!important;height:auto;flex:0 0 auto}
.stage .mark .paint .l1{width:41.5%!important}.stage .mark .paint .l2{width:56.3%!important}
.stage .mark .paint .wd{animation-delay:3.2s!important}.stage .mark .paint .l2{animation-delay:3.7s!important}
.home .lede{margin-top:clamp(56px,9vh,96px)!important}
@media (max-width:900px){
  .stage{width:100%;margin-top:40px}
  .stage .mark{position:static!important;width:92%!important;margin:22px auto 0!important}
}

/* D198: studio type for the hero sentence. General Sans (Fontshare, free licence), letters rise out of
   a hidden line word by word, a light glint passes across once, then the rule draws in. */
@font-face{font-family:"General Sans";src:url(../fonts/general-sans-500.woff2) format("woff2");font-weight:500;font-display:swap}
.lede .type{font-family:"General Sans",var(--sans)!important;font-weight:500!important;letter-spacing:-.012em!important;font-size:clamp(18px,1.6vw,27px)!important;line-height:1.25!important;padding-bottom:.6em!important}
.lede .type .w{display:inline-block;overflow:hidden;vertical-align:top;padding:.04em 0 .1em;margin-bottom:-.1em}
.lede .type .w span{opacity:1!important;filter:none!important;translate:0 110%;animation:rise .9s cubic-bezier(.16,1,.3,1) forwards,glint 1.1s ease-in-out forwards!important;animation-delay:calc(4.1s + var(--i) * 16ms),calc(5.6s + var(--i) * 22ms)!important}
@keyframes rise{to{translate:0 0}}
@keyframes glint{0%,100%{color:inherit;text-shadow:none}45%{color:#fff;text-shadow:0 0 14px rgba(255,255,255,.75),0 0 2px #fff}}
.lede .type::after{animation-delay:5.2s!important;opacity:.4!important}
@media (prefers-reduced-motion:reduce){.lede .type .w span{animation:none!important;translate:none}}

/* D199: no rule under the hero sentence */
.lede .type::after{content:none!important}
.lede .type{padding-bottom:0!important}

/* D202: phones match the desktop. The wordmark sits in the sky above the left rooftops, and the
   pricing area uses the same minimal style (no boxes, chips or cream tile; hairlines between). */
@media (max-width:900px){
  .stage{margin-top:56px}
  .offer{padding-top:64px}
  .stage .mark{position:absolute!important;left:3%!important;top:15%!important;width:37%!important;margin:0!important}
  .offer .bento .tile{min-height:0;align-items:flex-start;justify-content:flex-start;gap:12px;padding:22px 16px;border:0;border-radius:0;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;color:var(--cream);--fg:var(--cream);--bg:var(--ink);text-align:left}
  .offer .bento .tile+.tile{border-top:1px solid var(--line)}
  .offer .tile h2{font-size:13px;font-weight:400;text-align:left;opacity:.55}
  .offer .tile h2 .sq,.offer .f caption .sq{display:none}
  .offer .price{display:block;min-height:0;width:auto;max-height:none;background:none;box-shadow:none;font:300 clamp(64px,19vw,96px)/.9 var(--sans);letter-spacing:-.055em}
  .offer .tile .foot{max-width:none;text-align:left;font-size:15px;opacity:.7}
  .offer .b ul{display:block;width:100%;margin:0;padding:0;list-style:none;font-size:18px;line-height:1.35}
  .offer .b .chip{display:inline;min-height:0;padding:0;border:0;font-size:inherit;white-space:normal;background:none}
  .offer .b .chip:not(:last-child)::after{content:", "}
  .offer .f .tw{width:100%;padding:0}
  .offer .f caption{padding:0 0 14px;text-align:left;opacity:.55}
  .offer .f table{width:100%}
}

/* D203: Handl-minimal lower page. No outlined panels, plain underlined links instead of boxed chips,
   underline-only form fields, a smaller questions heading. */
.how .glass,.say .glass,.faq .glass{border:0;border-radius:0;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none}
.how,.contact,.faq{border-top:1px solid var(--line)}
.reach .chip,.fq-h .chip,.step .row .chip:not(.solid){min-height:44px;padding:0;border:0;background:none;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.reach{display:flex;flex-direction:column;align-items:flex-start;gap:0}
.reach .chip:hover,.fq-h .chip:hover{opacity:.65}
.contact .msg input,.contact .msg textarea{border:0;border-bottom:1px solid var(--line);border-radius:0;background:none;padding-left:0;padding-right:0}
.contact .msg input:focus,.contact .msg textarea:focus{outline:0;border-bottom-color:var(--cream)}
.contact .msg input:focus-visible,.contact .msg textarea:focus-visible{box-shadow:0 1px 0 var(--cream)}
.faq .fq-h .big{font-size:clamp(34px,3.6vw,56px)}

/* D207: pricing on one grid. Both columns start at the same top line and end on the same bottom line;
   table text sits flush with its label and note; the faq link sits in the column, not off its edge. */
.offer .f th,.offer .f td{padding-left:0;padding-right:0}
.offer .f .faq-link{position:static;display:inline-flex;justify-content:flex-start;align-self:flex-start;min-height:44px;margin:auto 0 0;padding:0}
@media (min-width:901px){
  .offer .bento .a{justify-content:flex-start}
  .offer .price{margin-top:0}
  .offer .bento .b{justify-content:flex-start}
  .offer .b .foot{margin-top:auto}
  .offer .bento .f{justify-content:flex-start}
  .offer .f table{font-size:15px}
  .offer .f .note{font-size:13px;opacity:.7}
}

/* D208: less empty space in the pricing monitor. On desktop the upkeep list starts open under the note,
   the monitor is only as tall as its content, and the price block no longer stretches. */
@media (min-width:901px){
  .js-morph .bento{min-height:0}
  .offer .bento{grid-template-rows:auto auto}
  .offer .bento .a{padding-bottom:clamp(28px,4vh,48px)}
  .offer .f .upk{margin-top:clamp(18px,3vh,30px)}
  .offer .f .upk .cap{font-size:13px;opacity:.55;margin:0;padding:0 0 10px;text-align:left}
  .offer .f .upk .inc{margin:0;padding:0;list-style:none;font-size:15px;line-height:1.45}
  .offer .f .upk .inc li{padding:8px 0;border-top:1px solid var(--line)}
  .offer .f .faq-link{margin-top:clamp(24px,4vh,40px)}
  .offer .bento .b{justify-content:flex-end;border-top:0}
}

/* D211: steps 1, 3 and 5 sit on the light background, 2 and 4 on dark. The morphing frame uses a
   difference blend so it reads on both the dark hero and the light first step; the landed laptop is ink. */
.morph{color:#fff;mix-blend-mode:difference}
.js-morph .step:first-child .card{border-color:var(--ink)}
.js-morph .step:first-child .card::before,.js-morph .step:first-child .card::after{background:var(--ink)}

/* D212: the step text sits top left on desktop, below the menu line */
@media (min-width:901px){.js-roll .step .body{top:clamp(76px,11vh,110px);bottom:auto}}

/* D220: the opening runs 1 second sooner; the longer global sentence stays on one line on desktop */
.skyline{animation-delay:.7s}.shore{animation-delay:.7s}
.w1{animation-delay:2.6s,2.6s}.w2{animation-delay:2.8s,2.8s}.w3{animation-delay:3s,3s}
.stage .mark .paint .wd{animation-delay:2.2s!important}.stage .mark .paint .l2{animation-delay:2.7s!important}
.lede .type .w span{animation-delay:calc(3.1s + var(--i) * 14ms),calc(4.4s + var(--i) * 18ms)!important}
@media (min-width:901px){.lede .type{font-size:clamp(17px,1.45vw,25px)!important}}

/* D222: line drawings in the skyline's style. Our approach: a shopfront (research), a web page (design),
   a shield (care). Need a website?: a Hong Kong tram that rolls in along its rail. Each draws once in view. */
.la{display:block;width:clamp(96px,9vw,132px);height:auto;margin:0 0 18px;overflow:visible}
.la path,.tram path{fill:none;stroke:currentColor;stroke-width:1.4;stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}
.la.on path{animation:draw-sky 1.6s cubic-bezier(.55,.1,.3,1) forwards}
.la.on path:nth-child(n+3){animation-delay:.25s}.la.on path:nth-child(n+5){animation-delay:.5s}
.tram{display:block;width:min(100%,460px);height:auto;margin-top:clamp(28px,5vh,56px);overflow:hidden}
.tram .rail,.tram .wire{opacity:.45}
.tram.on .rail,.tram.on .wire{animation:draw-sky 1.2s ease forwards}
.tram .car{transform:translateX(110%)}
.tram.on .car{animation:tram-in 2.6s cubic-bezier(.2,.7,.2,1) .3s forwards}
.tram.on .car path{animation:draw-sky 1.4s ease .5s forwards}
@keyframes tram-in{to{transform:translateX(18%)}}
@media (max-width:900px){.tram{margin-left:auto;margin-right:auto}.la{margin:0 auto 14px}}
@media (prefers-reduced-motion:reduce){.la path,.tram path{stroke-dashoffset:0;animation:none!important}.tram .car{transform:translateX(18%);animation:none!important}}

/* D225: need a website? is a transition, not a drawing. When the section arrives the heading rises out
   of a hidden line, the links fade up, each field's line draws in left to right in turn, and the send
   button wipes in last, so the form builds itself. Without JS or with reduced motion it is simply shown. */
.ct-t .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em}
.ct-t .w span{display:inline-block}
.contact .msg .fld{position:relative}
.contact .msg .fld::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--cream);transform:scaleX(0);transform-origin:0 50%;pointer-events:none}
.rv .contact .ct-t .w span{translate:0 110%;transition:translate .9s cubic-bezier(.16,1,.3,1) calc(var(--i) * 28ms)}
.rv .contact .reach,.rv .contact .msg label,.rv .contact .fine,.rv .contact .privacy{opacity:0;transition:opacity .8s ease .5s}
.rv .contact .send{clip-path:inset(0 100% 0 0);transition:clip-path .9s cubic-bezier(.65,0,.35,1) 1.5s}
.rv .contact .msg .fld::after{transition:transform 1s cubic-bezier(.65,0,.35,1)}
.rv .contact .msg .fld:nth-child(1)::after{transition-delay:.6s}.rv .contact .msg .fld:nth-child(2)::after{transition-delay:.75s}
.rv .contact .msg .fld:nth-child(3)::after{transition-delay:.9s}.rv .contact .msg .fld:nth-child(4)::after{transition-delay:1.05s}
.rv .contact.on .ct-t .w span{translate:0 0}
.rv .contact.on .reach,.rv .contact.on .msg label,.rv .contact.on .fine{opacity:1}
.rv .contact.on .privacy{opacity:.7}
.rv .contact.on .send{clip-path:inset(0 0 0 0)}
.rv .contact.on .msg .fld::after{transform:scaleX(1);opacity:.35}
.contact .msg .fld:focus-within::after{opacity:1}
@media (prefers-reduced-motion:reduce){.rv .contact *{transition:none!important}}
.rv .contact .msg input,.rv .contact .msg textarea{border-bottom-color:transparent}

/* D238: browser autofill keeps the form dark (no pale blue fill) */
.contact .msg input:-webkit-autofill,.contact .msg textarea:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--ink) inset;box-shadow:0 0 0 1000px var(--ink) inset;-webkit-text-fill-color:var(--cream);caret-color:var(--cream);transition:background-color 600000s 0s,color 600000s 0s}
.contact .msg input:autofill,.contact .msg textarea:autofill{box-shadow:0 0 0 1000px var(--ink) inset;-webkit-text-fill-color:var(--cream);caret-color:var(--cream)}
.contact .msg input:-webkit-autofill:focus-visible{-webkit-box-shadow:0 0 0 1000px var(--ink) inset,0 1px 0 var(--cream);box-shadow:0 0 0 1000px var(--ink) inset,0 1px 0 var(--cream)}

/* D237: underlined text links never fill with a highlight box (hover, tap or focus); FAQ offers whatsapp or email */
.reach .chip:hover,.fq-h .chip:hover,.step .row .chip:not(.solid):hover,.reach .chip:active,.fq-h .chip:active{background:none;color:inherit;border-color:transparent}
.reach .chip,.fq-h .chip,.step .row .chip{-webkit-tap-highlight-color:transparent}
.fq-h .fq-ask{display:flex;flex-wrap:wrap;align-items:center;gap:0 .45em;margin:0;font-size:13px;opacity:1}
.fq-h .fq-ask span{opacity:.8}
@media (max-width:900px){.fq-h .fq-ask{justify-content:center}}