@font-face{font-family:Roboto;src:url('/assets/Roboto-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Roboto;src:url('/assets/Roboto-Medium.ttf') format('truetype');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Roboto;src:url('/assets/Roboto-Bold.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:Roboto;src:url('/assets/Roboto-Black.ttf') format('truetype');font-weight:900;font-style:normal;font-display:swap}

:root{
  --brand-orange:#ff5b00;
  --brand-blue:#0099dd;
  --brand-sky:#94d9f8;
  --brand-peach:#fff2ea;
  --brand-ink:#17313b;
  --brand-muted:#65777e;
  --brand-content:1240px;
  --brand-radius:24px;
  --brand-section-space:64px;
  --orange:#ff5b00;
  --blue:#0099dd;
  --sky:#94d9f8;
  --cream:#fff2ea;
  --ink:#17313b;
}

/* Breadcrumbs use one normal-flow row directly above every lead photograph. */
.page-breadcrumbs{position:relative;z-index:8;display:flex;align-items:center;gap:12px;width:min(1320px,calc(100% - 32px));max-width:1320px;margin:18px auto 10px;padding:0;color:var(--brand-ink);font-size:14px;font-weight:500;line-height:1.35}
.page-breadcrumbs a{color:var(--brand-ink)!important;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.page-breadcrumbs>span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.careers-page .page-breadcrumbs,body:has(.fleet-hero) .page-breadcrumbs,body:has(>section.hero) .page-breadcrumbs{width:min(1320px,calc(100% - 32px));max-width:1320px}
.breadcrumb-separator{flex:none;color:var(--brand-blue);font-size:18px}
.breadcrumb-photo-strip{position:relative;width:min(1320px,calc(100% - 32px));height:430px;min-height:430px;margin:0 auto;overflow:hidden;border-radius:28px;background:linear-gradient(90deg,rgba(6,44,59,.62),rgba(6,44,59,.12)),url('/assets/valday-alt.jpg') center 54%/cover}
@media(max-width:680px){.page-breadcrumbs{width:calc(100% - 28px);margin:12px auto 8px;gap:9px;font-size:12px}.breadcrumb-separator{font-size:15px}.breadcrumb-photo-strip{width:100%;height:360px;min-height:360px;margin-top:0;border-radius:0}}

html{font-family:Roboto,Arial,sans-serif;color:var(--brand-ink)}
body,button,input,select,textarea{font-family:Roboto,Arial,sans-serif!important}
body{color:var(--brand-ink)}
h1,h2,h3,h4,h5,h6{font-family:Roboto,Arial,sans-serif!important;font-weight:700}
.eyebrow,[class*="eyebrow"]{font-family:Roboto,Arial,sans-serif!important;font-weight:900}

/* Black is reserved for short display statements from the brand guide. */
.hero-title,.fleet-card h3,.route-card h3,.product-card h3{font-weight:900}
.routes-hero h1,.fleet-hero h1,.commerce-hero h1,.rent-hero h1,.berth-hero h1,
.city-hero h1,.news-hero h1,.article-hero h1,.hero h1{font-size:clamp(40px,5vw,72px)!important;font-weight:700!important;line-height:.98!important;letter-spacing:-.035em!important}

/* One geometry system for the large page intros. */
.routes-hero,.fleet-hero,.commerce-hero,.rent-hero,.berth-hero,.city-hero,.news-hero,.article-hero,
.schedule-hero,.contact-hero,body>section.hero{
  width:min(1320px,calc(100% - 32px))!important;
  max-width:1320px!important;
  height:430px!important;
  min-height:430px!important;
  max-height:430px!important;
  margin:0 auto!important;
  border-radius:28px;
  overflow:hidden;
}

/* Calm, consistent rhythm across sections without changing page structure. */
.section,.fleet-intro,.vessel,.commerce-content,.booking-shell,.berths-section,.route-body,.news-list{
  scroll-margin-top:104px;
}
.section-title h2,.section-head h2,.fleet-intro h2,.vessel-head h2,.booking-intro h2{
  font-size:clamp(32px,4vw,58px)!important;
  font-weight:700!important;
  letter-spacing:-.025em!important;
}

/* Shared header: balanced columns, one type style, highlighted service actions. */
.site-header{display:grid!important;grid-template-columns:1fr auto 1fr;gap:28px!important;padding-inline:max(28px,4vw)!important}
.site-logo{justify-self:start}.site-nav{justify-self:center;margin-left:0!important;white-space:nowrap}
.site-actions{justify-self:end;white-space:nowrap}
.site-contact{display:flex;flex-direction:column;align-items:flex-end;gap:2px;line-height:1.05;white-space:nowrap}
.site-contact a{color:var(--brand-ink);font-size:14px;font-weight:700;text-decoration:none}
.site-contact span{color:var(--brand-muted);font-size:11px;font-weight:500}
.site-nav>a,.site-nav-group>button,.site-order{font-family:Roboto,Arial,sans-serif!important;font-size:14px!important;font-weight:700!important;line-height:1.2}
.site-order{color:var(--brand-orange)!important}
.mobile-buy{display:none!important}

/* Reduce oversized gaps while retaining clear section boundaries. */
.section{padding-top:64px!important;padding-bottom:64px!important}
.section+.section{padding-top:28px!important}
.section-title{margin-bottom:32px!important}
.trip-card{margin-bottom:0!important}
.trip-card+.section{padding-top:36px!important}
.fleet-intro,.commerce-content,.booking-shell{padding-top:64px!important;padding-bottom:64px!important}
.excursion-book{background:var(--brand-blue)!important}

/* Shared content width and component proportions. */
.content,.routes-content,.fleet-intro,.vessel,.commerce-content,.booking-shell,
.section-head,.berth-list,.excursion-head,.excursion-layout,.route-body,.article-body{
  width:min(var(--brand-content),calc(100% - 48px));
  max-width:var(--brand-content);
  margin-left:auto;
  margin-right:auto;
}
.card,.route-card,.product-card,.berth-card,.document-card,.news-card,.trip-card,
.certificate-panel,.form-section{border-radius:var(--brand-radius)!important}
.route-card,.product-card,.berth-card,.news-card{box-shadow:0 12px 34px rgba(23,49,59,.07)}
.route-card:hover,.product-card:hover,.berth-card:hover,.news-card:hover{box-shadow:0 18px 42px rgba(23,49,59,.11)}

/* Forms use the same geometry, focus colour and legible compact scale. */
input,select,textarea{color:var(--brand-ink);accent-color:var(--brand-orange)}
.berth-form input,.berth-form select,.fields input,.fields select,.fields textarea,
.order-form input,.order-form select,.certificate-form input,.certificate-form textarea,
.refund-form input,.refund-form select,.refund-form textarea{
  border-color:rgba(0,153,221,.24)!important;
  border-radius:12px!important;
  background:#fff!important;
}
.berth-form input:focus,.berth-form select:focus,.fields input:focus,.fields select:focus,.fields textarea:focus,
.order-form input:focus,.order-form select:focus,.certificate-form input:focus,.certificate-form textarea:focus,
.refund-form input:focus,.refund-form select:focus,.refund-form textarea:focus{
  border-color:var(--brand-blue)!important;
  outline:3px solid rgba(148,217,248,.55)!important;
}
.buy-button,.primary,.site-buy,.orange-button,.berth-form button,.calc-result button,
.refund-form button[type="submit"]{background:var(--brand-orange)!important;color:#fff!important}
.buy-button:hover,.primary:hover,.site-buy:hover,.orange-button:hover,.berth-form button:hover,
.calc-result button:hover,.refund-form button[type="submit"]:hover{filter:none!important;transform:translateY(-2px);box-shadow:0 10px 24px rgba(255,91,0,.22)}

/* Brand backgrounds: light blue and peach replace miscellaneous tinted panels. */
.schedule-band{background:var(--brand-blue)!important}
.text-route,.calculator,.berths-section{background:rgba(148,217,248,.18)!important}
.text-route.orange,.staro-excursion{background:var(--brand-peach)!important}
.pill.pale{background:var(--brand-sky)!important;color:var(--brand-ink)!important}

a,button{transition:color .18s,background-color .18s,border-color .18s,transform .18s,box-shadow .18s}
button:not(:disabled),a[href]{cursor:pointer}
:focus-visible{outline:3px solid var(--brand-sky);outline-offset:3px}

@media(max-width:1180px){
  .site-header{grid-template-columns:auto 1fr!important}
  .site-nav,.site-order,.site-contact{display:none!important}
  .site-actions{grid-column:2;justify-self:end;margin:0!important}
  .site-menu{display:block!important;color:var(--brand-ink);cursor:pointer}
  .site-nav.is-open{position:fixed;z-index:80;inset:72px 0 auto;display:flex!important;flex-direction:column;align-items:stretch;gap:0!important;max-height:calc(100vh - 72px);padding:18px 24px 28px;overflow:auto;background:#fff;border-top:1px solid rgba(0,153,221,.16);box-shadow:0 24px 50px rgba(23,49,59,.15)}
  .site-nav.is-open>a,.site-nav.is-open .site-nav-group>button{display:block;width:100%;padding:14px 0;text-align:left}
  .site-nav.is-open .site-nav-group{width:100%}
  .site-nav.is-open .site-mega{position:static;display:grid;width:100%;padding:4px 0 12px;box-shadow:none}
  .site-nav.is-open .site-mega a{padding:10px 12px;background:rgba(148,217,248,.12)}
  .site-nav.is-open .mobile-buy{display:block!important;margin-top:12px;padding:14px 18px!important;border-radius:999px;background:var(--brand-orange);color:#fff;text-align:center!important}
}

@media(max-width:900px){
  :root{--brand-section-space:48px}
  .site-header{display:flex!important;padding-inline:20px!important}
  .site-actions{margin-left:auto!important}
  .routes-hero,.fleet-hero,.commerce-hero,.rent-hero,.berth-hero,.city-hero,.news-hero,.article-hero,
  .schedule-hero,.contact-hero,body>section.hero{width:calc(100% - 24px)!important}
  .content,.routes-content,.fleet-intro,.vessel,.commerce-content,.booking-shell,
  .section-head,.berth-list,.excursion-head,.excursion-layout,.route-body,.article-body{width:min(calc(100% - 32px),var(--brand-content))}
}
@media(max-width:620px){
  .site-header{gap:8px!important;padding-inline:12px!important}
  .site-logo img{width:100px!important;height:34px!important}
  .site-actions{position:absolute!important;right:12px;top:18px;display:flex!important;gap:8px!important}
  .site-buy{display:none!important}
  .site-menu{position:fixed!important;right:14px!important;top:18px!important;z-index:99;display:block!important;padding:4px;font-size:24px}
  .routes-hero,.fleet-hero,.commerce-hero,.rent-hero,.berth-hero,.city-hero,.news-hero,.article-hero,
  .schedule-hero,.contact-hero,body>section.hero{width:100%!important;border-radius:0}
  .section{padding-top:44px!important;padding-bottom:44px!important}
  .section+.section{padding-top:18px!important}
  .section-title{display:block!important;margin-bottom:24px!important}
  .section-title>p{margin-top:14px}
  .content,.routes-content,.fleet-intro,.vessel,.commerce-content,.booking-shell,
  .section-head,.berth-list,.excursion-head,.excursion-layout,.route-body,.article-body{width:calc(100% - 28px)}
  .routes-hero h1,.fleet-hero h1,.commerce-hero h1,.rent-hero h1,.berth-hero h1,
  .city-hero h1,.news-hero h1,.article-hero h1,.hero h1{font-size:clamp(36px,11vw,48px)!important}
}

/* Every page hero uses the same text anchor and type rhythm. This prevents the
   copy from appearing to jump when visitors move between sections. */
.routes-hero,.fleet-hero,.commerce-hero,.rent-hero,.berth-hero,
.schedule-hero,.contact-hero,body>section.hero{
  display:flex!important;
  align-items:flex-start!important;
  justify-content:flex-start!important;
  padding:54px 60px!important;
}
.routes-hero>div,.fleet-hero>div,.commerce-hero>div,.rent-hero>div,
.berth-hero>div,.schedule-hero>div,.contact-hero>div,body>section.hero>div{
  width:min(820px,100%)!important;
  max-width:820px!important;
  margin:0!important;
}
.routes-hero h1,.fleet-hero h1,.commerce-hero h1,.rent-hero h1,.berth-hero h1,
.schedule-hero h1,.contact-hero h1,body>section.hero h1,.city-hero h1{
  margin:12px 0 0!important;
  font-size:clamp(44px,4.4vw,72px)!important;
  font-weight:700!important;
  line-height:.98!important;
  letter-spacing:-.035em!important;
  text-transform:uppercase;
}
.routes-hero .eyebrow,.fleet-hero .eyebrow,.commerce-hero .eyebrow,
.berth-hero .eyebrow,.schedule-hero .eyebrow,.contact-hero .eyebrow,
body>section.hero .eyebrow,.rent-hero>div>p:first-child{
  margin:0!important;
  color:var(--brand-sky)!important;
  font-size:13px!important;
  font-weight:900!important;
  line-height:1.2!important;
  letter-spacing:.14em!important;
  text-transform:uppercase!important;
}
.routes-hero h1+p,.fleet-hero h1+p,.commerce-hero h1+p,.berth-hero h1+p,
.contact-hero h1+p,body>section.hero h1+p,.rent-hero h1+span{
  display:block;
  max-width:760px!important;
  margin:20px 0 0!important;
  font-size:18px!important;
  line-height:1.5!important;
}
.rent-hero a{margin-top:22px!important}
.city-title{
  top:54px!important;
  right:60px!important;
  bottom:auto!important;
  left:60px!important;
  align-items:flex-start!important;
}
.city-title>div:first-child>p{margin:0!important;font-size:13px!important;line-height:1.2!important;letter-spacing:.14em!important;text-transform:uppercase}

@media(max-width:620px){
  .routes-hero,.fleet-hero,.commerce-hero,.rent-hero,.berth-hero,
  .schedule-hero,.contact-hero,body>section.hero{padding:34px 20px!important}
  .routes-hero>div,.fleet-hero>div,.commerce-hero>div,.rent-hero>div,
  .berth-hero>div,.schedule-hero>div,.contact-hero>div,body>section.hero>div{max-width:100%!important}
  .routes-hero h1,.fleet-hero h1,.commerce-hero h1,.rent-hero h1,.berth-hero h1,
  .schedule-hero h1,.contact-hero h1,body>section.hero h1,.city-hero h1{font-size:clamp(36px,10vw,46px)!important}
  .routes-hero h1+p,.fleet-hero h1+p,.commerce-hero h1+p,.berth-hero h1+p,
  .contact-hero h1+p,body>section.hero h1+p,.rent-hero h1+span{margin-top:16px!important;font-size:16px!important;line-height:1.4!important}
  .rent-hero a{margin-top:18px!important}
  .city-title{top:34px!important;right:20px!important;left:20px!important}
}

/* Fleet and careers now follow the same edge-to-edge lead-photo scale. */
.fleet-hero,.careers-page>section.hero{
  width:min(1320px,calc(100% - 32px))!important;
  max-width:1320px!important;
  margin:0 auto!important;
  height:430px!important;
  min-height:430px!important;
  max-height:430px!important;
  border-radius:28px;
  overflow:hidden;
}
.fleet-hero h1,.careers-page>section.hero h1{
  font-size:clamp(44px,5.5vw,76px)!important;
  font-weight:700!important;
  line-height:.94!important;
  letter-spacing:-.04em!important;
}
@media(max-width:760px){
  .fleet-hero,.careers-page>section.hero{width:100%!important;height:360px!important;min-height:360px!important;max-height:360px!important;border-radius:0}
}
@media(max-width:620px){
  .routes-hero,.commerce-hero,.rent-hero,.berth-hero,.city-hero,.news-hero,.article-hero,
  .schedule-hero,.contact-hero,body>section.hero{height:360px!important;min-height:360px!important;max-height:360px!important}
}

/* Keep the final cascade identical for fleet/careers too. */
.fleet-hero h1,.careers-page>section.hero h1{
  margin:12px 0 0!important;
  font-size:clamp(44px,4.4vw,72px)!important;
  line-height:.98!important;
  letter-spacing:-.035em!important;
}
@media(max-width:620px){
  .fleet-hero h1,.careers-page>section.hero h1{font-size:clamp(36px,10vw,46px)!important}
}

/* Mobile polish shared by every page. */
@media(max-width:620px){
  html,body{max-width:100%;overflow-x:hidden}
  body{font-size:15px}
  .site-header{position:sticky!important;top:0!important;z-index:90!important;display:flex!important;height:68px!important;padding:0 14px!important;background:#fff!important}
  .site-logo img{width:108px!important;height:34px!important}
  .site-actions{position:static!important;display:flex!important;margin-left:auto!important;gap:0!important}
  .site-menu{position:static!important;display:grid!important;place-items:center;width:44px;height:44px;padding:0!important;border:1px solid rgba(0,153,221,.28)!important;border-radius:50%!important;background:#fff!important;color:var(--brand-ink)!important;font-size:23px!important;line-height:1!important}
  .site-nav.is-open{inset:68px 0 0!important;max-height:calc(100vh - 68px)!important;padding:18px 20px 30px!important}
  .site-nav.is-open>a,.site-nav.is-open .site-nav-group>button{min-height:48px;padding:14px 4px!important;font-size:17px!important}
  .site-nav.is-open .site-mega{gap:6px!important}
  .site-nav.is-open .site-mega a{min-height:50px;padding:11px 13px!important}
  .page-breadcrumbs{min-height:32px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
  .routes-hero h1,.fleet-hero h1,.commerce-hero h1,.rent-hero h1,.berth-hero h1,
  .schedule-hero h1,.contact-hero h1,body>section.hero h1,.city-hero h1,.careers-page>section.hero h1{
    max-width:100%!important;font-size:clamp(32px,9.5vw,38px)!important;line-height:.98!important;letter-spacing:-.025em!important;white-space:normal!important;overflow-wrap:anywhere
  }
  .routes-hero h1+p,.fleet-hero h1+p,.commerce-hero h1+p,.berth-hero h1+p,
  .contact-hero h1+p,body>section.hero h1+p,.rent-hero h1+span{max-width:100%!important;font-size:15px!important;line-height:1.42!important}
  .hero-content{right:20px!important;left:20px!important;width:auto!important;max-width:none!important}
  .hero-content .eyebrow{max-width:100%;font-size:10px!important;line-height:1.35!important}
  .hero-content .hero-lead{max-width:100%;font-size:15px!important;line-height:1.45!important}
  .section-title h2,.booking-intro h2,.section-head h2,.routes-intro h2,.fleet-intro h2,
  .commerce-intro h2,.content h1,.content h2,.route-lead h2,.next-routes h2,.news-title h1{
    max-width:100%;font-size:clamp(30px,8.5vw,36px)!important;line-height:1!important;letter-spacing:-.025em!important;overflow-wrap:anywhere
  }
  .section-title>p,.booking-intro>p,.section-head>p,.routes-intro>p{font-size:15px!important;line-height:1.55!important}
  .booking-shell,.berths-section,.routes-catalog,.commerce-content,.content,.route-body{padding-right:18px!important;padding-left:18px!important}
  .berth-form,.career-form,.rent-form,.refund-form,.refund-grid{padding:20px!important;border-radius:18px!important}
  input,select,textarea{font-size:16px!important}
  button,a{touch-action:manipulation}
  .buy-button,.primary,.search-button,.berth-form button[type=submit]{min-height:50px}
  dialog,.booking-results-dialog,.map-dialog,.order-dialog,.refund-dialog{width:calc(100% - 20px)!important;max-height:calc(100dvh - 20px)!important;border-radius:20px!important}
  .route-actions,.route-bottom{gap:10px!important}
  .route-actions strong,.route-bottom strong{white-space:normal!important;font-size:17px!important;line-height:1.15!important}
  .route-title-row,.route-heading{align-items:flex-start!important}
  .route-title-row h3,.route-heading h3{min-width:0;overflow-wrap:anywhere}
  .vessel-head{margin-bottom:24px!important}
  .vessel-facts{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;width:100%!important}
  .vessel-facts b{min-width:0!important}
  .vessel-facts b:last-child:nth-child(odd){grid-column:1/-1}
  .gallery-main{border-radius:18px!important}
  .gallery-thumbs{gap:8px!important}
  .tour-block,.valday-walkthrough{border-radius:18px!important}
  .booking-result-card{min-width:0}
  .booking-result-action{width:100%}
  .booking-result-action button{width:100%;min-height:48px;display:flex;align-items:center;justify-content:space-between}
  .global-footer{padding:48px 20px 24px!important}
  .global-footer .footer-main{gap:28px!important}
  .global-footer .footer-bottom{margin-top:38px!important;gap:14px!important}
}

/* The calculator now follows the group-trip hero directly. */
.rent-hero + .intro{display:none!important}
.rent-benefits{display:none!important}

/* Home sections share one bounded grid, so cards never grow with ultrawide screens. */
.section.routes,.home-partner-offers,.section.fleet,.section.news{
  width:min(1320px,calc(100% - 32px))!important;
  max-width:1320px!important;
  margin-left:auto!important;
  margin-right:auto!important;
  padding-left:0!important;
  padding-right:0!important;
  box-sizing:border-box!important;
}
.section.routes{padding-bottom:18px!important}
.home-partner-offers{margin-top:0!important;margin-bottom:0!important}
.section.fleet{padding-top:24px!important}
@media(max-width:1000px){
  .route-carousel .route-card{flex-basis:calc((100% - 18px)/2)!important}
}
@media(max-width:680px){
  .section.routes,.home-partner-offers,.section.fleet,.section.news{width:calc(100% - 28px)!important}
  .section.routes{padding-bottom:12px!important}
  .section.fleet{padding-top:18px!important}
  .route-carousel .route-card{flex-basis:100%!important}
}