/*
 * Yourcall art direction layer
 * Loaded after page-specific styles so the public site keeps one visual voice.
 */
:root {
  --display: 'Bricolage Grotesque', system-ui, sans-serif;
  --serif: 'Bricolage Grotesque', system-ui, sans-serif;
  --serif-italic: 'Bricolage Grotesque', system-ui, sans-serif;
  --sans: 'Bricolage Grotesque', system-ui, sans-serif;
  --accent-gold: #BA9F5F;
  --accent-gold-soft: rgba(186, 159, 95, .14);
  --section-space: clamp(104px, 10vw, 168px);
}

body,
button,
input,
select,
textarea {
  font-family: var(--sans);
}

h1,
h2,
h3,
h4,
.em-i,
.article-title {
  font-family: var(--display);
}

/* Small upper titles use the warm accent; blue remains the action colour. */
.eyebrow,
.hero-tag,
.owner-kicker,
.section-kicker,
.section-label,
.mini-label,
.calc-kicker,
.calc-result-kicker,
.proof-label,
.article-tag,
.pilot-eyebrow,
.case-kicker,
.page-kicker,
.overline,
.flow b,
.cards b,
.factor b,
.guide b,
.integration-card > b,
.system-card > b,
.pilot-step::before {
  color: var(--accent-gold);
}

.eyebrow::before,
.hero-tag .line,
.owner-kicker::before {
  background: var(--accent-gold);
}

/* Give every editorial block its own breathing room and a quiet boundary. */
section.block {
  padding-block: var(--section-space);
}

section.block.tight {
  padding-block: clamp(88px, 8vw, 132px);
}

section.block + section.block,
section.block + .cta-page,
.cta-page + section.block {
  border-top: 1px solid rgba(12, 30, 63, .09);
}

.section-head {
  margin-bottom: clamp(52px, 6vw, 84px);
}

/* Recurrent information groups read as editorial columns, not UI cards. */
.feature-card,
.vert-card,
.related-card,
.lane-card,
.answer-card,
.factor,
.guide,
.faq-item,
.mode-item,
.cap-item,
.integ,
.integ2,
.system-card,
.integration-card,
.flow article,
.cards article,
.included article,
.related a {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  box-shadow: none;
  padding-inline: 0;
}

.feature-card:hover,
.vert-card:hover,
.related-card:hover,
.lane-card:hover,
.answer-card:hover,
.factor:hover,
.guide:hover,
.faq-item:hover,
.mode-item:hover,
.cap-item:hover,
.integ:hover,
.integ2:hover,
.system-card:hover,
.integration-card:hover,
.flow article:hover,
.cards article:hover,
.included article:hover,
.related a:hover {
  box-shadow: none;
}

/* Dark surfaces stay dark, including all nested information groups. */
.dark,
.dark-section,
.surface-dark,
[class*='-dark'] {
  --surface-on-dark: rgba(255, 255, 255, .055);
}

:is(.dark, .dark-section, .surface-dark, [class*='-dark'])
  :is(.feature-card, .vert-card, .related-card, .lane-card, .answer-card, .factor, .guide, .faq-item, .mode-item, .cap-item, .integ, .integ2, .system-card, .integration-card) {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, .18);
}

/* Homepage: an editorial sales journey with only contextual photography. */
.hero {
  padding-block: clamp(58px, 7vw, 96px);
}

.hero-grid {
  gap: clamp(64px, 8vw, 112px);
  align-items: center;
}

.hero-tag {
  font-style: normal;
  font-weight: 650;
  letter-spacing: .04em;
}

.hero-visual {
  border-radius: 18px;
  box-shadow: 0 32px 76px -48px rgba(12, 30, 63, .55);
}

.hero-trust {
  margin-top: 38px;
  padding: 24px 0 0;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  box-shadow: none;
}

.hero-trust-label {
  margin-bottom: 18px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 650;
}

.hero-trust-label em,
.hero-trust-label .em {
  color: var(--accent-gold);
  font-family: inherit;
  font-style: normal;
  font-weight: inherit;
}

.hero-trust-logos {
  justify-content: flex-start;
  gap: 20px 28px;
}

/* One full-bleed, tone-on-tone omnichannel surface. */
.omni-section {
  padding: clamp(92px, 9vw, 144px) 0;
  background: var(--ink);
  color: #fff;
}

.omni-shell {
  overflow: visible;
  padding: 0;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}

.omni-shell::before {
  opacity: .45;
}

.omni-head h2 .em-i {
  color: #aebdff;
}

.omni-channels {
  gap: 12px;
  margin-top: 46px;
}

.omni-channel {
  min-height: 92px;
  padding: 14px 8px;
  background: rgba(255, 255, 255, .055);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 10px;
  box-shadow: none;
}

.omni-channel > span:last-child {
  color: rgba(255, 255, 255, .72);
}

.omni-symbol {
  background: rgba(186, 159, 95, .14);
  color: #d9c58f;
}

.omni-core {
  min-height: 82px;
  background: #14294e;
  border: 1px solid rgba(186, 159, 95, .72);
  border-radius: 12px;
  box-shadow: 0 24px 60px -38px rgba(0, 0, 0, .9);
}

.omni-core > img {
  filter: brightness(0) invert(1);
}

.omni-core-intelligence {
  color: #dbc990;
  border-color: rgba(255, 255, 255, .2);
}

.omni-brain {
  color: var(--accent-gold);
}

.omni-action {
  background: rgba(255, 255, 255, .045);
  border-color: rgba(255, 255, 255, .15);
  border-radius: 8px;
}

.omni-action .n {
  background: var(--accent-gold-soft);
  color: #dbc990;
}

.conversion-prompt-dark {
  padding: 24px 0 0;
  background: transparent;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, .18);
  border-radius: 0;
}

.conversion-prompt-dark .btn {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 18px 40px -22px rgba(30, 64, 223, .9);
}

/* Measured results are a proof line, not a floating dashboard card. */
.proof-bar {
  padding: clamp(64px, 7vw, 96px) 0;
}

.proof-card {
  padding: 32px 0;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  box-shadow: none;
}

.proof-m .v {
  color: var(--accent);
  font-family: var(--display);
  font-style: normal;
  font-weight: 760;
}

/* Contextual owner scenes alternate between open editorial layouts. */
.owner-intro {
  margin-bottom: clamp(72px, 9vw, 122px);
}

.owner-hotel-media,
.owner-ferry-media,
.owner-airport-media,
.brand-story-media,
.article-feature-media {
  border-radius: 16px;
}

.owner-ferry {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr);
  gap: clamp(48px, 7vw, 104px);
  align-items: center;
  margin-top: clamp(112px, 12vw, 176px);
}

.owner-ferry-media {
  height: auto;
  aspect-ratio: 1.12 / 1;
}

.owner-ferry-panel {
  width: auto;
  margin: 0;
  padding: 0;
  background: transparent;
  color: var(--ink);
  border-radius: 0;
  box-shadow: none;
}

.owner-ferry-brand {
  margin-bottom: 28px;
  padding: 0;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}

.owner-ferry-brand img {
  width: clamp(190px, 17vw, 240px);
}

.owner-ferry-panel h2 {
  color: var(--ink);
  font-size: clamp(40px, 4.5vw, 60px);
}

.owner-ferry-panel > p {
  margin-top: 20px;
  color: var(--ink-soft);
  font-size: 17px;
  line-height: 1.62;
}

.owner-metrics {
  gap: 28px;
  margin-top: 34px;
  padding-top: 26px;
  border-color: var(--line);
}

.owner-metric {
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.owner-metric strong {
  color: var(--accent);
  font-size: clamp(38px, 4vw, 54px);
}

.owner-metric span {
  color: var(--ink-soft);
  font-size: 13px;
}

.owner-ferry-panel .owner-link {
  color: var(--accent);
  border-color: rgba(30, 64, 223, .28);
}

.owner-airport {
  margin-top: clamp(112px, 12vw, 176px);
  padding: clamp(58px, 6vw, 88px);
  border-radius: 0;
}

.owner-airport .owner-kicker,
.launch-copy .owner-kicker {
  color: #dbc990;
}

.owner-airport-media {
  height: min(480px, 42vw);
}

/* Premium case study: warm editorial band with no card outline. */
#brand-service {
  background: #eee9df;
}

.brand-story {
  gap: clamp(52px, 7vw, 106px);
  background: transparent;
  border-radius: 0;
  overflow: visible;
}

.brand-story-media {
  height: min(620px, 50vw);
  overflow: hidden;
}

.brand-story-copy {
  padding: 28px 0;
}

/* Product flow is deliberately image-free: the process is the evidence. */
.journey-shell,
.journey-shell-open {
  display: block;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}

.journey-copy {
  display: grid;
  grid-template-columns: minmax(290px, .78fr) minmax(0, 1.22fr);
  column-gap: clamp(58px, 9vw, 132px);
  padding: 0;
}

.journey-copy > .owner-kicker,
.journey-copy > h2,
.journey-copy > p {
  grid-column: 1;
}

.journey-flow {
  grid-column: 2;
  grid-row: 1 / span 5;
  margin-top: 0;
  border-top-color: var(--line-strong);
}

.journey-step {
  grid-template-columns: 58px 1fr;
  min-height: 78px;
  padding: 20px 0;
  font-size: 17px;
}

.journey-step span:first-child {
  background: transparent;
  color: var(--accent-gold);
  border: 1px solid rgba(186, 159, 95, .52);
}

.journey-products,
.journey-conversion {
  grid-column: 1 / -1;
}

.journey-products {
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

.journey-conversion {
  margin-top: 34px;
  padding: 26px 0 0;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  box-shadow: none;
}

/* The calculator remains grouped because it is an interactive tool. */
.calculator-shell {
  border-radius: 14px;
  box-shadow: none;
}

.calculator-result {
  border-radius: 0;
}

/* The rollout is a continuous dark band, not a light card placed on one. */
#pilot {
  background: var(--ink);
  color: #fff;
  border-top: 0;
}

.launch-shell,
.launch-shell-open {
  display: block;
  background: transparent;
  border-radius: 0;
  overflow: visible;
}

.launch-copy {
  padding: 0;
}

.launch-copy h2 {
  max-width: 920px;
}

.launch-copy > p {
  max-width: 760px;
}

.launch-step {
  grid-template-columns: 52px minmax(180px, .45fr) 1fr;
  gap: 26px;
  padding: 26px 0;
}

.launch-step .n {
  color: #dbc990;
}

.launch-footer {
  margin-top: 38px;
}

/* Keep one relevant editorial image; supporting articles become clean rows. */
.article-side,
.article-side-text {
  display: block;
  padding: 32px 0;
}

.article-side-text::after {
  content: '↗';
  float: right;
  margin-top: -28px;
  color: var(--accent);
}

.article-tag {
  padding: 0;
  background: transparent;
  border-radius: 0;
}

/* Final call to action stays native to its dark surface. */
.cta-page.editorial-cta {
  padding-block: clamp(92px, 10vw, 152px);
}

.cta-centered-shell {
  padding: clamp(72px, 9vw, 124px) 32px;
  border-radius: 0;
}

.cta-centered-panel {
  padding: 0;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}

.cta-centered-panel h2 {
  color: #fff;
}

.cta-centered-panel h2 .em-i {
  color: #aebdff;
}

.cta-centered-panel > p {
  color: rgba(255, 255, 255, .72);
}

@media (max-width: 900px) {
  :root {
    --section-space: clamp(88px, 13vw, 124px);
  }

  .owner-ferry,
  .journey-copy {
    grid-template-columns: 1fr;
  }

  .owner-ferry {
    gap: 44px;
  }

  .owner-ferry-panel {
    width: 100%;
    margin: 0;
  }

  .owner-ferry-media {
    aspect-ratio: 16 / 10;
  }

  .journey-copy > .owner-kicker,
  .journey-copy > h2,
  .journey-copy > p,
  .journey-flow,
  .journey-products,
  .journey-conversion {
    grid-column: 1;
    grid-row: auto;
  }

  .journey-flow {
    margin-top: 42px;
  }

  .brand-story-media {
    height: 500px;
  }

  .owner-airport-media {
    height: 420px;
  }
}

@media (max-width: 640px) {
  .hero {
    padding-block: 42px 72px;
  }

  .hero-trust {
    padding-inline: 0;
  }

  .omni-section {
    padding-block: 78px;
  }

  .omni-shell {
    padding: 0;
    border-radius: 0;
  }

  .omni-channel {
    min-height: 84px;
  }

  .proof-card {
    padding: 26px 0;
  }

  .owner-ferry {
    margin-top: 96px;
  }

  .owner-ferry-media {
    aspect-ratio: 4 / 3;
    border-radius: 14px;
  }

  .owner-ferry-panel {
    padding: 0;
    border-radius: 0;
  }

  .owner-ferry-brand {
    padding: 0;
  }

  .owner-airport {
    margin-inline: -20px;
    padding: 54px 20px;
    border-radius: 0;
  }

  .owner-airport .owner-copy,
  .brand-story-copy,
  .journey-copy,
  .launch-copy {
    padding: 0;
  }

  .owner-airport-media,
  .brand-story-media {
    height: 390px;
  }

  .brand-story,
  .journey-shell,
  .launch-shell {
    border-radius: 0;
  }

  .journey-products {
    margin-top: 42px;
  }

  .launch-step {
    grid-template-columns: 34px 1fr;
    gap: 14px;
  }

  .launch-step p {
    grid-column: 2;
  }

  .articles-feed {
    gap: 48px;
  }

  .article-feature-media {
    border-radius: 14px;
  }

  .cta-centered-shell {
    margin-inline: -20px;
    padding: 76px 20px;
    border-radius: 0;
  }

  .cta-centered-panel {
    padding: 0;
    border-radius: 0;
  }
}