:root {
  --ink: #0a2435;
  --muted: #526879;
  --line: #cfe0e7;
  --paper: #edf5f6;
  --blue: #087ca8;
  --cyan: #00bad3;
  --deep: #06283a;
  --green: #08a37f;
  --amber: #f3aa3d;
  --shadow: 0 24px 64px rgba(5, 65, 88, .13);
}

body { background: linear-gradient(180deg, #f2f8f9 0%, #eaf3f4 100%); }
.brand img { width: 130px; }
.site-footer img { width: 160px; height: auto !important; aspect-ratio: 2 / 1; object-fit: contain; filter: none; }
.site-nav { background: rgba(244, 250, 250, .91); border-bottom-color: rgba(9, 124, 168, .14); }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: #007fa8; }
.btn-primary { background: linear-gradient(120deg, #087ca8 0%, #00a9c4 58%, #08a37f 130%); box-shadow: 0 11px 28px rgba(0, 142, 174, .28); }
.btn-primary:hover { background: linear-gradient(120deg, #066a92, #009bb5); box-shadow: 0 14px 34px rgba(0, 142, 174, .34); }
.btn-ghost { border-color: #9fc5d1; background: rgba(255, 255, 255, .48); }
.btn-ghost:hover { border-color: #49aec2; background: #fff; }

.hero { background: radial-gradient(circle at 88% 10%, rgba(0, 186, 211, .22), transparent 30%), radial-gradient(circle at 8% 88%, rgba(8, 163, 127, .13), transparent 26%), linear-gradient(135deg, #f9fcfc 0%, #edf7f8 52%, #dcedf1 100%); }
.eyebrow { color: #007fa8; }
.flow { background: linear-gradient(145deg, rgba(255, 255, 255, .94), rgba(239, 251, 251, .88)); border-color: #aed6df; box-shadow: 0 28px 70px rgba(3, 85, 111, .17); }
.flow::before { background: radial-gradient(circle, rgba(0, 186, 211, .25), transparent 63%); }
.node { border-color: #cee3e8; }
.node.active { border-color: #41bfd0; background: linear-gradient(135deg, #e8fbfc, #f5fffb); color: #075d75; }
.engine { border-color: #4bc4d5; background: linear-gradient(145deg, #dff9fb, #fff 58%, #eafaf5); }

.trustline { background: linear-gradient(90deg, #e5f8f8, #f8fcfc 48%, #eaf7f2); border-color: #bfe2e5; }
.trust-items span::before { background: linear-gradient(135deg, var(--cyan), var(--green)); box-shadow: 0 0 0 4px rgba(0, 186, 211, .1); }
.express-usp { padding: 40px 0; background: #fff; }
.express-usp + .section { padding-top: 60px; }
.express-usp-card { display: grid; grid-template-columns: 155px minmax(0, 1fr); gap: 34px; align-items: center; padding: 30px 34px; border: 1px solid #b9dfe3; border-radius: 20px; background: radial-gradient(circle at 92% 15%, rgba(0, 186, 211, .1), transparent 27%), linear-gradient(135deg, #f8fdfd, #eef9f7); box-shadow: 0 14px 42px rgba(5, 82, 103, .08); }
.express-time { min-height: 112px; display: flex; flex-direction: column; justify-content: center; padding-right: 28px; border-right: 1px solid #b9dfe3; }
.express-time strong { display: block; color: #067f9c; font-size: 2rem; line-height: 1; letter-spacing: -.04em; }
.express-time span { display: block; margin-top: .55rem; color: var(--muted); font-size: .76rem; line-height: 1.35; }
.express-copy h2 { margin: .3rem 0 .55rem; font-size: clamp(1.35rem, 2.4vw, 2rem); line-height: 1.15; letter-spacing: -.03em; }
.express-copy p { max-width: 850px; margin: 0; color: var(--muted); font-size: .94rem; }
.express-copy a { display: inline-block; margin-top: .8rem; color: #057d99; font-size: .86rem; font-weight: 750; text-decoration: none; }
.express-copy a:hover { text-decoration: underline; }
.section:not(.white):not(.dark) { background: linear-gradient(180deg, #eef6f7, #e9f2f3); }
.card { border-color: #c9e0e5; box-shadow: 0 10px 30px rgba(7, 83, 105, .06); position: relative; overflow: hidden; }
.card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: linear-gradient(var(--cyan), var(--green)); }
.card:nth-child(2)::before { background: linear-gradient(var(--blue), var(--cyan)); }
.card:nth-child(3)::before { background: linear-gradient(var(--amber), #ed7f58); }
.solution-icon { background: linear-gradient(145deg, #d7f7fa, #e5f8ef); color: #057c91; box-shadow: inset 0 0 0 1px rgba(0, 159, 180, .1); }

.case { border-color: #c4dde3; box-shadow: 0 14px 40px rgba(5, 72, 94, .08); }
.case-visual { background: radial-gradient(circle at 20% 15%, rgba(0, 186, 211, .25), transparent 32%), linear-gradient(135deg, #06283a, #07506a); }
.case:nth-child(2) .case-visual { background: radial-gradient(circle at 80% 15%, rgba(8, 163, 127, .3), transparent 34%), linear-gradient(135deg, #06283a, #0a4d4b); }
.mini-flow span { border-color: #36788e; background: rgba(5, 38, 55, .72); }
.mini-flow i { background: linear-gradient(90deg, var(--cyan), #70e1c1); }
.subhero { background: radial-gradient(circle at 88% 20%, rgba(0, 186, 211, .18), transparent 29%), linear-gradient(145deg, #f9fcfc, #e2f1f3); }
.model.preferred { border-color: #4fc5d2; box-shadow: 0 20px 54px rgba(0, 135, 166, .13); }
.pill { background: linear-gradient(120deg, #d8f7f9, #dcf7ec); color: #037288; }
.quote { background: linear-gradient(145deg, #fff, #f0f9f8); border-color: #c8e4e4; }
.steps { background: #1d6174; border-color: #1d6174; }
.step { background: linear-gradient(150deg, #06283a, #09374a); }
.step b { color: #65e1e8; }
.cta-box { background: radial-gradient(circle at 8% 15%, rgba(0, 186, 211, .27), transparent 28%), radial-gradient(circle at 92% 90%, rgba(8, 163, 127, .23), transparent 29%), linear-gradient(135deg, #05283b, #07556c); box-shadow: 0 24px 65px rgba(3, 61, 82, .22); }
.booking-panel, .calendar { border-color: #bcdde2; box-shadow: 0 14px 40px rgba(5, 72, 94, .08); }
.express-note { margin-top: 1.5rem; padding: 18px; border: 1px solid #b8dfe3; border-radius: 14px; background: linear-gradient(145deg, #eefbfd, #f2faf6); }
.express-note h3 { margin: .75rem 0 .35rem; }
.express-note p { margin: 0; color: var(--muted); font-size: .9rem; }
.site-footer { background: linear-gradient(145deg, #041b29, #063248); }

/* Mobile containment: reflow complex diagrams instead of clipping them. */
html, body { max-width: 100%; overflow-x: clip; }
.hero-grid > *, .flow-row > *, .solution > div, .case, .model, .booking-grid > * { min-width: 0; }
.title, .section-title, .lede, .kicker, .node, .engine, .contact-row a, .site-footer a { overflow-wrap: anywhere; }

@media (max-width: 640px) {
  .nav-inner { gap: 14px; }
  .brand { min-width: 0; }
  .brand img { width: min(124px, 38vw); }
  .nav-toggle { flex: 0 0 auto; }

  .hero-visual { min-height: 0; }
  .flow { width: 100%; padding: 18px; border-radius: 20px; }
  .flow-row { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .flow-stack { grid-template-columns: 1fr 1fr; }
  .node { font-size: .74rem; padding: .65rem; overflow-wrap: anywhere; }
  .engine { width: 100%; padding: 1rem; font-size: .82rem; }
  .engine small { display: block; }
  .arrow { width: 2px; height: 24px; margin: 0 auto; background: linear-gradient(180deg, var(--line), var(--cyan)); }
  .arrow::after { right: auto; left: -4px; top: auto; bottom: -1px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 7px solid var(--cyan); border-bottom: 0; }
  .signal { align-items: flex-start; line-height: 1.4; }
  .signal i { flex: 0 0 8px; margin-top: .3rem; }

  .express-usp { padding: 24px 0; }
  .express-usp + .section { padding-top: 48px; }
  .express-usp-card { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 24px 21px; }
  .express-time { min-height: 0; padding: 0 0 18px; border-right: 0; border-bottom: 1px solid #b9dfe3; }
  .express-time strong { font-size: 1.75rem; }
  .express-time span { margin-top: .35rem; }

  .case-visual { height: auto; min-height: 310px; padding: 24px 18px; }
  .mini-flow { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: stretch; gap: 10px; text-align: center; }
  .mini-flow span { min-width: 0; overflow-wrap: anywhere; }
  .mini-flow i { width: 2px; height: 20px; margin: 0 auto; background: linear-gradient(180deg, var(--cyan), #70e1c1); }
  .case-body, .card, .model, .booking-panel { padding-left: 21px; padding-right: 21px; }

  .solution { padding-left: 8px; padding-right: 8px; }
  .trust-items { justify-content: flex-start; gap: 14px; }
  .trust-items span { width: 100%; }
  .contact-row { gap: 10px 16px; }
  .contact-row a { max-width: 100%; }
  .calendar, .calendar iframe { width: 100%; max-width: 100%; }
  .mobile-booking { max-width: calc(100vw - 32px); }
}

@media (max-width: 380px) {
  .title { font-size: 2.25rem; letter-spacing: -.045em; }
  .section-title { font-size: 1.75rem; }
  .flow-stack { grid-template-columns: minmax(0, 1fr); }
  .cta-box { padding-left: 17px; padding-right: 17px; }
}
