/* A single visual language for the foreground of the living Quayside.
   Weather changes these static tints; it adds no animation or rendering loop. */
:root{
 --studio-paper:rgb(241 247 240 / .91);
 --studio-glint:rgb(255 255 248 / .34);
 --studio-edge:rgb(123 168 160 / .09);
 --studio-heading:#1e3b36;
 --studio-copy:#39544e;
 --studio-muted:#576e65;
 --studio-accent:#376b58;
 --studio-field:rgb(34 79 65 / .065);
 --studio-hover:rgb(34 79 65 / .12);
 --studio-button:#216d60;
 --studio-popup:#f0f5ee;
 --studio-shadow:0 24px 65px -38px rgb(7 28 30 / .4);
}
html[data-scene-tone="dark"]{
 --studio-paper:rgb(9 30 34 / .82);
 --studio-glint:rgb(155 203 197 / .085);
 --studio-edge:rgb(49 93 103 / .12);
 --studio-heading:#f3f1e7;
 --studio-copy:#d4e1da;
 --studio-muted:#adbfba;
 --studio-accent:#bad5c2;
 --studio-field:rgb(187 219 204 / .085);
 --studio-hover:rgb(187 219 204 / .14);
 --studio-button:#337d6c;
 --studio-popup:#10272a;
 --studio-shadow:0 24px 70px -38px rgb(0 12 18 / .55);
}
html:is([data-scene-solar-phase="sunrise"],[data-scene-solar-phase="sunset"]){
 --studio-glint:rgb(234 190 130 / .12);
 --studio-edge:rgb(132 88 72 / .06);
}

/* One calm surface, with the main introduction leading the conversation. */
html[data-scene-layout]:not([data-scene-view="immersive"]) body{overflow:clip}
html[data-scene-layout] .hero > .hero-inner{
 --copy-ink:var(--studio-copy);--copy-accent:var(--studio-accent);
 max-width:1120px;padding:34px 40px;column-gap:54px;row-gap:0;
 border:0;border-radius:24px;min-height:0;overflow:visible;
 background:radial-gradient(ellipse at 10% 0,var(--studio-glint),transparent 62%),
  linear-gradient(145deg,transparent 55%,var(--studio-edge)),var(--studio-paper);
 box-shadow:var(--studio-shadow);
}
html[data-scene-layout] .hero > .hero-inner::before,
html[data-scene-layout] .hero > .hero-inner::after{content:none}
html[data-scene-tone] .hero > .hero-inner > h1.hero-editorial-heading{
 max-width:20ch;margin:0 0 22px;
 font:400 clamp(38px,3.3vw,48px)/1.06 var(--serif);
 letter-spacing:-.025em;color:var(--studio-heading);text-wrap:balance;
}
html[data-scene-tone] .hero > .hero-inner > .lede{
 max-width:52ch;margin:0;font:400 15.5px/1.65 var(--sans);
 color:var(--studio-copy);letter-spacing:0;text-shadow:none;
}
html[data-scene-layout] .hero > .hero-inner > .cta-row{
 margin:26px 0 0;gap:10px;align-items:center;
}
@media(min-width:761px){
 html[data-scene-layout] .hero > .hero-inner{
  display:grid;grid-template-columns:minmax(0,1.22fr) minmax(0,.9fr);
  grid-template-rows:minmax(0,1fr) auto auto auto minmax(0,1fr);
 }
 html[data-scene-layout] .hero > .hero-inner > .hero-bridge-stage{
  grid-column:2;grid-row:1/6;width:100%;height:430px;min-height:0;margin:0;
  align-self:center;background:none;box-shadow:none;
 }
 html[data-scene-layout] .hero > .hero-inner > .hero-bridge-stage:has(.is-booking){height:440px}
 html[data-scene-layout] .hero.is-chat-collapsed > .hero-inner{
  grid-template-columns:1fr;max-width:900px;padding:38px 56px;
 }
 html[data-scene-layout] .hero.is-chat-collapsed > .hero-inner > .hero-bridge-stage{display:none}
 html[data-scene-layout] .hero.is-chat-collapsed > .hero-inner > .lede{max-width:68ch}
}

/* Chat becomes part of the composition, with a smaller editorial greeting. */
html[data-scene-tone] #tyne-hero-chat{
 --chat-copy:var(--studio-heading);--chat-muted:var(--studio-muted);
 --chat-field:var(--studio-field);
 height:100%;border:0;border-radius:0;background:none;box-shadow:none;
 backdrop-filter:none;-webkit-backdrop-filter:none;
}
#tyne-hero-chat .tyne-chat-persona{margin:22px 0 0;gap:11px;padding:0 0 12px}
#tyne-hero-chat .tyne-chat-persona > img{width:42px;height:42px;box-shadow:none}
#tyne-hero-chat .tyne-chat-persona strong{font-size:16px;font-weight:500;letter-spacing:.01em}
#tyne-hero-chat .tyne-chat-persona > div > span{font-size:11px}
#tyne-hero-chat .tyne-chat-body{padding:8px 0 14px;gap:12px}
#tyne-hero-chat .tyne-chat-welcome-copy{gap:15px}
#tyne-hero-chat .tyne-chat-welcome-copy h2{
 font:400 34px/1.12 var(--serif);letter-spacing:-.015em;color:var(--studio-heading);
}
#tyne-hero-chat .tyne-chat-welcome-copy p{font:400 14px/1.65 var(--sans);color:var(--studio-copy);max-width:34ch}
#tyne-hero-chat .tyne-chat-welcome{flex:0 0 auto;min-height:0;padding:0;place-items:start;overflow:visible}
#tyne-hero-chat .tyne-chat-welcome-inner{
 max-width:94%;width:100%;padding:17px 19px;border-radius:14px 14px 14px 4px;
 background:var(--studio-field);border:0;box-shadow:none;
}
html[data-scene-tone="dark"] #tyne-hero-chat .tyne-chat-welcome-inner{background:#24454b}
#tyne-hero-chat .tyne-chat-welcome .tyne-chat-welcome-copy{gap:10px;opacity:1;transform:none}
#tyne-hero-chat .tyne-chat-welcome .tyne-chat-welcome-copy h2{font:500 16px/1.4 var(--sans);letter-spacing:0}
#tyne-hero-chat .tyne-chat-welcome .tyne-chat-welcome-copy p{font-size:13.5px;line-height:1.65;max-width:none}
#tyne-hero-chat .tyne-chat-close,#tyne-hero-chat .tyne-chat-refresh{top:0;right:0;border-radius:50%;opacity:.8}
#tyne-hero-chat .tyne-chat-refresh{right:34px}
#tyne-hero-chat .tyne-chat-composer{margin:4px 0 0;padding:5px;border-radius:13px;background:var(--studio-field)}
#tyne-hero-chat .tyne-chat-input{font-size:13px;line-height:1.5;padding-left:12px}
#tyne-hero-chat .tyne-chat-send{border-radius:10px;background:var(--studio-button);width:38px;height:38px}
#tyne-hero-chat .tyne-chat-mic{height:38px}
#tyne-hero-chat .tyne-chat-message.tyne{background:var(--studio-field);color:var(--studio-heading)}
html[data-scene-tone="dark"] #tyne-hero-chat .tyne-chat-message.tyne{background:#24454b;color:var(--studio-heading)}
#tyne-hero-chat.is-booking .tyne-chat-persona{margin-top:22px;padding-bottom:8px}
#tyne-hero-chat .tyne-booking-submit{background:var(--studio-button);border-radius:10px}
#tyne-hero-chat .tyne-chat-voice-controls{margin:8px 2px 0}

/* All actions share a shape and a quiet, predictable response. */
html[data-scene-tone] .hero .cta-row .btn,
html[data-scene-tone] .sheet .about-actions > .btn,
html[data-scene-tone] .sheet .about-actions > .tyne-tools-menu > summary{
 min-height:44px;padding:11px 18px;border:0;border-radius:11px;
 font:500 13px/1.35 var(--sans);gap:10px;box-shadow:none;
 transition:background .18s ease,transform .18s ease,box-shadow .18s ease;
}
html[data-scene-tone] .hero .cta-row .btn-primary,
html[data-scene-tone] .sheet .about-actions .btn-primary{
 background:var(--studio-button);color:#f7f7ee;
}
html[data-scene-tone] .hero .cta-row .btn-ghost,
html[data-scene-tone] .sheet .about-actions > .tyne-tools-menu > summary{
 background:var(--studio-field);color:var(--studio-heading);
}
html[data-scene-tone] .hero .cta-row :is(.arrow,.play){
 width:17px;height:17px;flex:none;background:none;border:0;border-radius:0;box-shadow:none;color:inherit;
}
html[data-scene-tone] .hero .cta-row :is(.arrow,.play) svg{width:17px;height:17px;stroke-width:1.5}
html[data-scene-tone] .hero .cta-row .btn:hover .arrow{transform:none}
@media(hover:hover){
 html[data-scene-tone] .hero .cta-row .btn:hover,
 html[data-scene-tone] .sheet .about-actions > .btn:hover,
 html[data-scene-tone] .sheet .about-actions > .tyne-tools-menu > summary:hover{
  transform:translateY(-1px);box-shadow:0 7px 18px -12px rgb(1 20 22 / .55);
 }
 html[data-scene-tone] .hero .cta-row .btn-ghost:hover,
 html[data-scene-tone] .sheet .about-actions > .tyne-tools-menu > summary:hover{background:var(--studio-hover)}
}
.hero .cta-row .btn:active,.sheet .about-actions .btn:active{transform:translateY(0)}
html[data-scene-tone] .tyne-tool-options{
 border:0;border-radius:13px;background:var(--studio-popup);color:var(--studio-heading);
 box-shadow:0 12px 35px -14px rgb(0 19 24 / .4);padding:7px;
}
html[data-scene-tone] .tyne-tool-options button{color:var(--studio-heading);border-radius:8px}
html[data-scene-tone] .tyne-tool-options small{color:var(--studio-muted)}
html[data-scene-tone] .tyne-tool-options button:hover{background:var(--studio-field)}

/* A tighter signature: custom lettering, fine rule, readable human-scale type. */
.tyne-sky-wordmark{width:558px;grid-template-columns:370px 1px 1fr;gap:12px}
.tyne-brand-divider{height:50px;opacity:.42}
.tyne-brand-promise{font:400 13.5px/1.55 var(--sans);letter-spacing:.02em;text-transform:none}
.tyne-brand-divider,.tyne-brand-promise{transform:translateX(-14px)}
.tyne-wordmark-surface{filter:drop-shadow(0 2px 4px rgb(5 31 40 / .24))}
html[data-scene-layout] .hero > .bridge-client-logos{margin-top:8px;opacity:.9}
.bridge-logo-stage{opacity:.95}
@media(min-width:761px), (max-height:780px){
 html[data-scene-tone="dark"] .bridge-logo,
 html[data-scene-tone="dark"] .bridge-logo--shoplevers span{color:#e0e8de}
 html[data-scene-tone="dark"] .bridge-logo-stage > :is(img,svg){filter:brightness(0) invert(.9) drop-shadow(0 1px 2px #092325);opacity:.95}
}

/* About, Map and their controls inherit the same materials and type. */
html[data-scene-tone] .sheet:is(.is-map,.is-about,.is-demo){
 --map-paper:var(--studio-popup);--map-ink:var(--studio-heading);
 --map-muted:var(--studio-muted);--map-field:var(--studio-field);
 --map-hover:var(--studio-hover);--map-accent:var(--studio-accent);
 border-radius:24px;
 background:radial-gradient(ellipse at 0 0,var(--studio-glint),transparent 65%),var(--studio-popup);
 box-shadow:0 30px 90px -36px rgb(0 18 24 / .55);
}
.sheet:is(.is-map,.is-about,.is-demo) .sheet-close{border-radius:50%;transition:background .18s,color .18s}
.sheet.is-about .founder-card{border:0;background:var(--studio-field);box-shadow:none;border-radius:12px}
.sheet.is-about .founder-link{border:0;background:var(--studio-field);border-radius:8px;color:var(--studio-heading)}
.sheet.is-about .founder-card .name{color:var(--studio-heading)}
.sheet.is-about .founder-card :is(.role,.bio){color:var(--studio-muted)}
.sheet.is-about .about-founders-photo,.tyne-map-stage{border-radius:14px}
html[data-scene-tone] .sheet .tyne-map-field{border:0;background:var(--studio-field);border-radius:12px}
html[data-scene-tone] .sheet .tyne-map-field:focus-within{box-shadow:0 0 0 2px color-mix(in srgb,var(--studio-accent) 45%,transparent)}
html[data-scene-tone] .sheet .tyne-map-check{background:var(--studio-button);border:0;border-radius:11px;box-shadow:none;color:#f7f7ee}
html[data-scene-tone] .sheet .tyne-map-set-time{border:0;border-radius:11px;box-shadow:none;background:var(--studio-field);color:var(--studio-heading)}
.tyne-map-option{border-radius:9px}
html.tyne-workspace-open #sheet-backdrop{background:rgb(5 20 25 / .42);backdrop-filter:blur(4px)}
@media(min-width:901px){html[data-scene-tone] .sheet:is(.is-map,.is-about,.is-demo){top:50dvh}}
@media(max-width:900px){html[data-scene-tone] .sheet:is(.is-map,.is-about,.is-demo){top:12px;height:calc(100dvh - 24px - env(safe-area-inset-bottom))}}

@media(min-width:761px) and (max-width:1100px){
 html[data-scene-layout] .hero > .hero-inner{padding:28px;column-gap:30px;width:calc(100% - 56px)}
 html[data-scene-layout] .hero > .hero-inner > .hero-bridge-stage{height:430px}
 html[data-scene-tone] .hero > .hero-inner > h1.hero-editorial-heading{font-size:37px}
 html[data-scene-tone] .hero > .hero-inner > .lede{font-size:14px;line-height:1.58}
 html[data-scene-tone] .hero .cta-row .btn{padding:10px 12px;gap:7px;font-size:12px}
 .tyne-sky-wordmark{width:448px;grid-template-columns:280px 1px 1fr;gap:10px}
 .tyne-brand-promise{font-size:12px}
}
@media(min-width:761px) and (max-height:850px){
 html[data-scene-layout] .hero > .hero-inner{padding:28px 34px;column-gap:42px}
 html[data-scene-tone] .hero > .hero-inner > h1.hero-editorial-heading{font-size:39px;margin-bottom:18px}
 html[data-scene-tone] .hero > .hero-inner > .lede{font-size:14.5px;line-height:1.58}
 html[data-scene-layout] .hero > .hero-inner > .hero-bridge-stage{height:390px}
 html[data-scene-layout] .hero > .hero-inner > .hero-bridge-stage:has(.is-booking){height:440px}
 html[data-scene-layout] .hero > .hero-inner > .cta-row{margin-top:22px}
 #tyne-hero-chat .tyne-chat-welcome-copy h2{font-size:31px}
 #tyne-hero-chat .tyne-chat-welcome-copy p{font-size:13px}
 .tyne-sky-wordmark{width:438px;grid-template-columns:270px 1px 1fr;gap:10px}
 .tyne-brand-promise{font-size:12px}
}

@media(max-width:760px){
 html[data-scene-layout] .hero > .hero-inner{
  width:calc(100% - 32px);max-width:440px;padding:23px 22px;
  border-radius:22px;display:flex;gap:0;
 }
 html[data-scene-tone] .hero > .hero-inner > h1.hero-editorial-heading{
  font-size:32px;line-height:1.08;max-width:20ch;margin:0 0 17px;letter-spacing:-.02em;
 }
 html[data-scene-tone] .hero > .hero-inner > .lede{
  font-size:14px;line-height:1.65;text-align:center;max-width:none;
 }
 html[data-scene-layout] .hero > .hero-inner > .cta-row{margin-top:22px;gap:7px}
 html[data-scene-tone] .hero .cta-row .btn{padding:10px 7px;gap:5px;font-size:12px;min-height:44px;border-radius:10px}
 html[data-scene-layout] .hero > .bridge-client-logos{margin-top:5px;width:calc(100% - 48px)}
 .tyne-sky-wordmark{width:min(330px,calc(100vw - 36px));grid-template-columns:minmax(0,1fr) 1px 126px;gap:8px}
 .tyne-brand-divider{height:34px}
 .tyne-brand-divider,.tyne-brand-promise{transform:translateX(-6px)}
 .tyne-brand-promise{font-size:11px;line-height:1.5;letter-spacing:0}
 html[data-scene-tone] .hero .hero-bridge-stage.is-mobile-chat #tyne-hero-chat{
  border-radius:20px;background:var(--studio-popup);box-shadow:var(--studio-shadow);padding:0 20px 18px;
 }
 #tyne-hero-chat .tyne-chat-persona{margin:42px 0 0}
 #tyne-hero-chat .tyne-chat-body{padding:10px 0 14px}
 #tyne-hero-chat .tyne-chat-welcome-copy h2{font-size:33px}
 #tyne-hero-chat .tyne-chat-welcome-inner{padding:16px 17px}
 #tyne-hero-chat .tyne-chat-welcome .tyne-chat-welcome-copy p{font-size:14px}
 #tyne-hero-chat .tyne-chat-input{font-size:16px}
 #tyne-hero-chat .tyne-booking-form :is(input,textarea){font-size:16px}
 #tyne-hero-chat .tyne-chat-close{top:9px;right:10px}
 #tyne-hero-chat .tyne-chat-refresh{top:9px;right:44px}
 #tyne-hero-chat.is-booking .tyne-chat-persona{margin-top:42px}
 html[data-scene-tone] .sheet:is(.is-map,.is-about,.is-demo){border-radius:20px}
}
@media(prefers-reduced-motion:reduce){
 .hero .cta-row .btn,.sheet .about-actions .btn,.sheet .about-actions summary{transition:none!important}
 .hero .cta-row .btn:hover,.sheet .about-actions .btn:hover{transform:none!important}
}

/* The closing line opens the conversation without another row of buttons. */
html[data-scene-tone] .hero > .hero-inner > .lede .hero-chat-invite{
 display:inline;color:var(--studio-accent);font:inherit;font-weight:500;text-decoration:none;
 transition:color .22s ease;
}
.hero .hero-lede-opening{color:var(--studio-heading);font-weight:550}
.hero-chat-invite:hover{color:var(--studio-heading)}
.hero-chat-invite:focus-visible{outline:2px solid var(--studio-accent);outline-offset:5px;border-radius:2px}

#tyne-hero-chat .tyne-chat-expand{
 position:absolute;z-index:10;top:0;right:68px;width:30px;height:30px;
 display:grid;place-items:center;padding:0;border:0;border-radius:50%;
 background:transparent;color:var(--chat-muted);cursor:pointer;opacity:.8;
 transition:background .18s ease,color .18s ease,opacity .18s ease;
}
#tyne-hero-chat .tyne-chat-expand:hover{background:var(--chat-field);color:var(--chat-copy);opacity:1}
#tyne-hero-chat .tyne-chat-expand:focus-visible{outline:2px solid var(--studio-accent);outline-offset:2px}
#tyne-hero-chat .tyne-chat-expand svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
#tyne-hero-chat .tyne-chat-expand .icon-restore{display:none}
.hero.is-chat-expanded #tyne-hero-chat .tyne-chat-expand .icon-expand{display:none}
.hero.is-chat-expanded #tyne-hero-chat .tyne-chat-expand .icon-restore{display:block}

@media(min-width:761px){
 html[data-scene-layout] .hero > .hero-inner{top:calc(var(--home-content-top,18vh) - 12px)}
 html[data-scene-layout] .hero:not(.is-chat-collapsed) > .hero-inner{grid-template-rows:22px auto auto minmax(0,1fr)}
 html[data-scene-layout] .hero:not(.is-chat-collapsed) > .hero-inner > h1.hero-editorial-heading,
 html[data-scene-layout] .hero:not(.is-chat-collapsed) > .hero-inner > .lede{align-self:start}
 html[data-scene-layout] .hero:not(.is-chat-collapsed) > .hero-inner > .hero-bridge-stage{grid-row:1/5}
 html[data-scene-layout] .hero > .hero-inner{transition:grid-template-columns .58s cubic-bezier(.22,1,.36,1),column-gap .58s cubic-bezier(.22,1,.36,1)}
 html[data-scene-layout] .hero.is-chat-expanded > .hero-inner{grid-template-columns:minmax(0,0fr) minmax(0,1fr);column-gap:0}
 html[data-scene-layout] .hero.is-chat-expanded > .hero-inner > :is(h1,.lede,.cta-row){display:none}
 html[data-scene-layout] .hero.is-chat-expanded > .hero-inner > .hero-bridge-stage{grid-column:2;width:100%}
 .hero.is-chat-expanded #tyne-hero-chat .tyne-chat-message{max-width:min(75%,680px)}
 .hero.is-chat-expanded #tyne-hero-chat .tyne-chat-welcome-inner{max-width:600px}
}
@media(min-width:761px){
 html[data-scene-tone] .hero > .hero-inner > h1.hero-editorial-heading{
  max-width:none;font-size:clamp(25px,2.8vw,31px);white-space:nowrap;text-wrap:nowrap;
 }
}
@media(min-width:1200px){
 html[data-scene-tone] .hero > .hero-inner > h1.hero-editorial-heading{font-size:clamp(31px,2.4vw,37px)}
}
@media(max-width:760px){#tyne-hero-chat .tyne-chat-expand{display:none}}
@media(prefers-reduced-motion:reduce){
 html[data-scene-layout] .hero > .hero-inner,.hero-chat-invite svg{transition:none}
}