/* ═══════════════════════════════════════════════════════════════
   inner-pages.css — Service page full-design template
   Palette mirrors preview.html but uses Five Star brand (sky/navy)
   ═══════════════════════════════════════════════════════════════ */
.ip-page {
    --ip-navy    : #06264a;
    --ip-navy-2  : #0b3b70;
    --ip-sky     : #54B6F4;
    --ip-sky-soft: #EAF4FB;
    --ip-text    : #17324d;
    --ip-muted   : #66788a;
    --ip-light   : #f4f8fc;
    --ip-white   : #ffffff;
    --ip-border  : #dbe7f3;
    --ip-shadow  : 0 22px 55px rgba(6,38,74,.14);
    --ip-shadow-s: 0 12px 30px rgba(6,38,74,.10);
    --ip-radius  : 28px;
    font-family  : Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
    line-height  : 1.7;
    color        : var(--ip-text);
}
.ip-page * { box-sizing: border-box; }
.ip-page img { max-width: 100%; display: block; }
.ip-page a { text-decoration: none; color: inherit; }
.ip-page h1, .ip-page h2, .ip-page h3 { margin: 0; letter-spacing: -.03em; }
.ip-page p { margin: 0; }

/* Container */
.ip-wrap {
    width : min(1180px, calc(100% - 48px));
    margin: 0 auto;
}

/* Section spacing */
.ip-section { padding: 84px 0; }
.ip-bg-light { background: var(--ip-light); }

/* ── Eyebrow badge ────────────────────────────────────────────── */
.ip-eyebrow {
    display        : inline-flex;
    align-items    : center;
    gap            : 8px;
    padding        : 8px 14px;
    border-radius  : 999px;
    background     : var(--ip-sky-soft);
    color          : var(--ip-navy);
    font-weight    : 800;
    font-size      : .82rem;
    text-transform : uppercase;
    letter-spacing : .08em;
    margin-bottom  : 18px;
}
.ip-eyebrow::before {
    content      : "";
    width        : 8px;
    height       : 8px;
    background   : var(--ip-sky);
    border-radius: 50%;
    flex-shrink  : 0;
}
.ip-eyebrow-inv {
    background: rgba(84,182,244,.18);
    color      : #fff;
}

/* ── Headings ─────────────────────────────────────────────────── */
.ip-page h1 {
    font-size    : clamp(2.4rem, 5.5vw, 5rem);
    font-weight  : 900;
    line-height  : 1.1;
    letter-spacing: -.04em;
    color        : var(--ip-navy);
}
.ip-page h2 {
    font-size    : clamp(1.8rem, 3.6vw, 3.1rem);
    font-weight  : 800;
    line-height  : 1.13;
    letter-spacing: -.03em;
    color        : var(--ip-navy);
}
.ip-page h3 {
    font-size  : 1.15rem;
    font-weight: 700;
    color      : var(--ip-navy);
    margin     : 0 0 8px;
}

/* ── Buttons ──────────────────────────────────────────────────── */
.ip-btn {
    display        : inline-flex;
    align-items    : center;
    justify-content: center;
    min-height     : 52px;
    padding        : 14px 26px;
    border-radius  : 999px;
    font-weight    : 900;
    font-size      : .96rem;
    transition     : transform .2s ease, box-shadow .2s ease, background .2s;
    cursor         : pointer;
    white-space    : nowrap;
    border         : 2px solid transparent;
}
.ip-btn:hover { transform: translateY(-2px); }

.ip-btn-sky {
    background: var(--ip-sky) !important;
    color     : var(--ip-navy) !important;
    box-shadow: 0 12px 28px rgba(84,182,244,.32);
}
.ip-btn-sky:hover { box-shadow: 0 20px 40px rgba(84,182,244,.45) !important; }

.ip-btn-ghost {
    background   : rgba(255,255,255,.12) !important;
    color        : #fff !important;
    border-color : rgba(255,255,255,.30) !important;
    backdrop-filter: blur(10px);
}
.ip-btn-ghost:hover { background: rgba(255,255,255,.22) !important; }

.ip-btn-ghost-inv {
    background  : rgba(255,255,255,.12) !important;
    color       : #fff !important;
    border-color: rgba(255,255,255,.28) !important;
}
.ip-btn-ghost-inv:hover { background: rgba(255,255,255,.22) !important; }

.ip-btn-navy {
    background: var(--ip-navy) !important;
    color     : #fff !important;
    box-shadow: 0 10px 24px rgba(6,38,74,.26);
}
.ip-btn-dark {
    background: #25D366 !important;
    color     : #fff !important;
    box-shadow: 0 10px 24px rgba(37,211,102,.28);
}
.ip-btn-dark:hover { background: #1da851 !important; }

.ip-actions {
    display    : flex;
    flex-wrap  : wrap;
    align-items: center;
    gap        : 14px;
    margin-top : 28px;
}
.ip-mt { margin-top: 28px; }

/* ── HERO ─────────────────────────────────────────────────────── */
.ip-hero {
    position  : relative;
    padding   : 56px 0 82px;
    background: radial-gradient(circle at top right, rgba(84,182,244,.22), transparent 38%),
                linear-gradient(135deg, #041a33 0%, #07315f 52%, #0b467e 100%);
    color     : #fff;
    overflow  : hidden;
}
.ip-hero::after {
    content     : "";
    position    : absolute;
    inset       : auto -10% -1px -10%;
    height      : 110px;
    background  : #fff;
    clip-path   : polygon(0 62%, 100% 22%, 100% 100%, 0 100%);
}
html[data-theme="dark"] .ip-hero::after { background: #071827; }

.ip-hero-grid {
    position              : relative;
    z-index               : 2;
    display               : grid;
    grid-template-columns : 1.05fr .95fr;
    align-items           : center;
    gap                   : 54px;
}
.ip-hero h1 { color: #fff; max-width: 760px; }
.ip-lead {
    color      : #d8e9f7;
    font-size  : clamp(1rem, 1.8vw, 1.16rem);
    max-width  : 680px;
    margin-top : 22px;
    line-height: 1.75;
}
.ip-quick {
    display              : grid;
    grid-template-columns: repeat(2, max-content);
    gap                  : 13px 36px;
    margin-top           : 26px;
    align-items          : start;
}
.ip-quick span {
    display    : flex;
    align-items: center;
    gap        : 9px;
    color      : rgba(255,255,255,.92);
    font-size  : .95rem;
    font-weight: 600;
    padding    : 0;
    background : none;
    border     : none;
}
.ip-quick span::before {
    content        : '✓';
    display        : inline-flex;
    align-items    : center;
    justify-content: center;
    width          : 21px;
    height         : 21px;
    border-radius  : 50%;
    background     : var(--ip-sky);
    color          : var(--ip-navy);
    font-size      : .72rem;
    font-weight    : 900;
    flex-shrink    : 0;
}

/* Contact row inside story section (no checkmark icon, navy text) */
.ab-contact-row { margin-top: 22px; }
.ab-contact-row span { color: var(--ip-navy) !important; font-weight: 700 !important; }
.ab-contact-row span::before { display: none !important; }

/* Service card links */
.ip-card h3 a { color: inherit !important; text-decoration: none; }
.ip-card h3 a:hover { color: var(--ip-sky) !important; text-decoration: underline; text-underline-offset: 3px; }

/* Hero image card */
.ip-hero-media { position: relative; }
.ip-img-card {
    position     : relative;
    overflow     : hidden;
    border-radius: var(--ip-radius);
    box-shadow   : var(--ip-shadow);
    border       : 7px solid rgba(255,255,255,.88);
    background   : #d0e4f7;
}
.ip-img-card img  { width: 100%; height: 500px; object-fit: cover; display: block; background: none; }
.ip-img-card.ip-img-placeholder { height: 500px; background: linear-gradient(135deg, #0b3b70 0%, #1a6fa8 55%, #54B6F4 100%); }

.ip-float-card {
    position     : absolute;
    left         : -24px;
    bottom       : 34px;
    width        : min(290px, 82%);
    padding      : 20px;
    background   : rgba(255,255,255,.94);
    border-radius: 22px;
    box-shadow   : var(--ip-shadow);
    color        : var(--ip-navy);
    backdrop-filter: blur(8px);
}
.ip-float-card strong { display: block; font-size: 2rem; line-height: 1; font-weight: 900; }
.ip-float-card span   { display: block; color: var(--ip-muted); font-weight: 700; margin-top: 5px; font-size: .92rem; }

/* ── STATS STRIP ──────────────────────────────────────────────── */
.ip-stats-offset {
    margin-top: -40px;
    position  : relative;
    z-index   : 3;
}
.ip-stats-strip {
    background   : #fff;
    border-radius: var(--ip-radius);
    box-shadow   : var(--ip-shadow);
    padding      : 28px;
    display      : grid;
    grid-template-columns: repeat(4, 1fr);
    gap          : 16px;
    border       : 1px solid var(--ip-border);
}
.ip-stat {
    padding      : 18px;
    border-radius: 18px;
    background   : var(--ip-light);
}
.ip-stat b    { display: block; color: var(--ip-navy); font-size: 1.5rem; font-weight: 900; line-height: 1.1; }
.ip-stat span { color: var(--ip-muted); font-weight: 700; font-size: .93rem; }

/* ── INTRO SPLIT ──────────────────────────────────────────────── */
.ip-split {
    display              : grid;
    grid-template-columns: .95fr 1.05fr;
    gap                  : 54px;
    align-items          : center;
}
.ip-flow h2       { margin-bottom: 20px; }
.ip-flow p        { color: var(--ip-muted); font-size: 1.04rem; line-height: 1.8; }
.ip-flow p + p    { margin-top: 18px; }
.ip-highlight {
    margin-top  : 26px;
    padding     : 20px 24px;
    border-radius: 20px;
    background  : var(--ip-sky-soft);
    border      : 1px solid rgba(84,182,244,.28);
    color       : var(--ip-navy);
    font-weight : 800;
    font-size   : 1rem;
    line-height : 1.6;
}
.ip-img-tall { height: 430px !important; }

/* Highlight box — after-cards variant (full width below grid) */
.ip-highlight-after-cards {
    margin-top: 32px;
}

/* Highlight box — inverted (inside dark pricing section) */
.ip-highlight-inv {
    background : rgba(255,255,255,.10) !important;
    border     : 1px solid rgba(255,255,255,.20) !important;
    color      : #e0eef8 !important;
}

/* Highlight box links — clearly visible in both themes */
.ip-highlight a {
    color                : #0a6abf !important;
    text-decoration      : underline;
    text-underline-offset: 3px;
    text-decoration-color: rgba(10,106,191,.5);
    font-weight          : 900 !important;
    transition           : color .2s;
}
.ip-highlight a:hover {
    color                : #054d8c !important;
    text-decoration-color: #054d8c;
}
.ip-highlight-inv a {
    color                : #54B6F4 !important;
    text-decoration-color: rgba(84,182,244,.55) !important;
}
.ip-highlight-inv a:hover {
    color                : #fff !important;
    text-decoration-color: rgba(255,255,255,.7) !important;
}
html[data-theme="dark"] .ip-highlight a {
    color                : #54B6F4 !important;
    text-decoration-color: rgba(84,182,244,.55) !important;
}
html[data-theme="dark"] .ip-highlight a:hover {
    color                : #fff !important;
    text-decoration-color: rgba(255,255,255,.7) !important;
}

/* ── BENEFITS SECTION HEAD ────────────────────────────────────── */
.ip-section-head {
    display        : flex;
    justify-content: space-between;
    gap            : 32px;
    align-items    : flex-end;
    margin-bottom  : 36px;
}
.ip-section-head h2    { margin-bottom: 0; }
.ip-section-head > p   { max-width: 420px; color: var(--ip-muted); font-size: 1.04rem; line-height: 1.75; }

/* ── CARD GRID ────────────────────────────────────────────────── */
.ip-card-grid {
    display              : grid;
    grid-template-columns: repeat(4, 1fr);
    gap                  : 22px;
}
.ip-card {
    background   : #fff;
    padding      : 20px 22px;
    border-radius: 20px;
    box-shadow   : var(--ip-shadow-s);
    border       : 1px solid var(--ip-border);
    min-height   : 200px;
}
.ip-card h3 { margin-bottom: 10px; }
.ip-card p  { color: var(--ip-muted); font-size: .98rem; line-height: 1.75; }
.ip-icon {
    width        : 46px;
    height       : 46px;
    display      : grid;
    place-items  : center;
    border-radius: 14px;
    background   : var(--ip-sky-soft);
    color        : var(--ip-navy);
    font-size    : 1.3rem;
    margin-bottom: 14px;
    border       : 1px solid rgba(84,182,244,.22);
}

/* ── PRICING ──────────────────────────────────────────────────── */
.ip-pricing {
    background   : linear-gradient(135deg, rgba(4,26,51,.96), rgba(11,59,112,.92)),
                   radial-gradient(circle at top left, rgba(84,182,244,.28), transparent 38%);
    border-radius: var(--ip-radius);
    padding      : 44px;
    color        : #fff;
    box-shadow   : var(--ip-shadow);
}
.ip-pricing h2        { color: #fff; margin-bottom: 14px; }
.ip-pricing-sub       { color: #c8dcf0; max-width: 640px; font-size: 1.04rem; line-height: 1.75; }
.ip-pricing-note      { margin-top: 22px; color: #d2e6f5; font-size: .98rem; }
.ip-fare-grid {
    display              : grid;
    grid-template-columns: repeat(5, 1fr);
    gap                  : 14px;
    margin-top           : 30px;
}
.ip-fare {
    padding      : 18px;
    border-radius: 16px;
    background   : rgba(255,255,255,.10);
    border       : 1px solid rgba(255,255,255,.16);
}
.ip-fare span { display: block; color: #bdd4ec; font-size: .87rem; font-weight: 700; line-height: 1.45; }
.ip-fare span a { color: var(--ip-sky) !important; text-decoration: underline; text-underline-offset: 3px; }
.ip-fare span a:hover { color: #fff !important; }
.ip-fare b    { display: block; color: var(--ip-sky); font-size: 1.65rem; font-weight: 900; margin-top: 6px; }

/* ── BOOKING STEPS ────────────────────────────────────────────── */
.ip-booking-visual {
    min-height   : 440px;
    border-radius: 24px;
    overflow     : hidden;
    background   : linear-gradient(135deg, #0b3b70 0%, #1a6fa8 60%, #54B6F4 100%);
    position     : relative;
    box-shadow   : var(--ip-shadow-s);
    border       : 7px solid rgba(255,255,255,.88);
}
.ip-booking-visual img {
    width        : 100%;
    height       : 100%;
    min-height   : 440px;
    object-fit   : cover;
    display      : block;
    border-radius: 0;
    border       : none;
    box-shadow   : none;
}
.ip-steps {
    list-style: none;
    padding   : 0;
    margin    : 24px 0;
    display   : grid;
    gap       : 14px;
}
.ip-step {
    display              : grid;
    grid-template-columns: 44px 1fr;
    gap                  : 14px;
    align-items          : start;
    padding              : 16px;
    border-radius        : 18px;
    background           : var(--ip-light);
    border               : 1px solid var(--ip-border);
}
.ip-step h3 { margin-bottom: 4px; font-size: 1.05rem; }
.ip-step p  { color: var(--ip-muted); font-size: .96rem; line-height: 1.6; }
.ip-step-num {
    width        : 44px;
    height       : 44px;
    display      : grid;
    place-items  : center;
    border-radius: 14px;
    background   : var(--ip-navy);
    color        : #fff;
    font-weight  : 900;
    font-size    : 1.05rem;
    flex-shrink  : 0;
}

/* ── CTA BAND ─────────────────────────────────────────────────── */
.ip-cta {
    padding      : 50px;
    border-radius: var(--ip-radius);
    background   : radial-gradient(circle at top right, rgba(84,182,244,.20), transparent 36%),
                   linear-gradient(135deg, #061f3c, #0a427b);
    color        : #fff;
    display      : flex;
    justify-content: space-between;
    gap          : 28px;
    align-items  : center;
    box-shadow   : var(--ip-shadow);
}
.ip-cta h2        { color: #fff; max-width: 580px; }
.ip-cta > div > p { margin-top: 12px; color: #c8dcf0; max-width: 660px; font-size: 1.04rem; line-height: 1.7; }

/* ── DARK MODE ────────────────────────────────────────────────── */
html[data-theme="dark"] .ip-stats-strip { background: #0E2236; border-color: rgba(84,182,244,.14); }
html[data-theme="dark"] .ip-stat        { background: #071827; }
html[data-theme="dark"] .ip-stat b      { color: #EAF4FB; }
html[data-theme="dark"] .ip-stat span   { color: rgba(234,244,251,.65); }
html[data-theme="dark"] .ip-page h2,
html[data-theme="dark"] .ip-page h3     { color: #EAF4FB; }
html[data-theme="dark"] .ip-card        { background: #0E2236; border-color: rgba(84,182,244,.14); }
html[data-theme="dark"] .ip-card p,
html[data-theme="dark"] .ip-flow p,
html[data-theme="dark"] .ip-section-head > p { color: rgba(234,244,251,.72); }
html[data-theme="dark"] .ip-bg-light    { background: #0a1e30; }
html[data-theme="dark"] .ip-step        { background: #071827; border-color: rgba(84,182,244,.14); }
html[data-theme="dark"] .ip-step p      { color: rgba(234,244,251,.72); }
html[data-theme="dark"] .ip-step h3     { color: #EAF4FB; }
html[data-theme="dark"] .ip-img-card,
html[data-theme="dark"] .ip-booking-visual { border-color: rgba(84,182,244,.24); }
html[data-theme="dark"] .ip-float-card  { background: rgba(14,34,54,.92); color: #EAF4FB; }
html[data-theme="dark"] .ip-float-card span { color: rgba(234,244,251,.65); }
html[data-theme="dark"] .ip-highlight   { background: rgba(84,182,244,.10); border-color: rgba(84,182,244,.22); color: #EAF4FB; }
html[data-theme="dark"] .ip-icon        { background: rgba(84,182,244,.12); color: #54B6F4; border-color: rgba(84,182,244,.22); }
html[data-theme="dark"] .ip-eyebrow     { background: rgba(84,182,244,.14); color: #7ECEF7; }

/* ── RESPONSIVE ───────────────────────────────────────────────── */
@media (max-width: 1040px) {
    .ip-hero-grid, .ip-split { grid-template-columns: 1fr; gap: 32px; }
    .ip-hero-media { order: -1; }
    .ip-float-card { position: static; width: 100%; margin-top: 16px; }
    .ip-img-card img, .ip-img-card.ip-img-placeholder { height: 360px; }
    .ip-img-tall { height: 360px !important; }
    .ip-stats-strip, .ip-card-grid { grid-template-columns: repeat(2, 1fr); }
    .ip-fare-grid { grid-template-columns: repeat(3, 1fr); }
    .ip-section-head { display: block; }
    .ip-section-head > p { margin-top: 16px; max-width: 100%; }
    .ip-cta { display: block; }
    .ip-cta .ip-actions { margin-top: 22px; }
}
@media (max-width: 680px) {
    .ip-wrap    { width: calc(100% - 28px); }
    .ip-section { padding: 54px 0; }
    .ip-hero    { padding: 56px 0 64px; }
    .ip-stats-strip, .ip-card-grid { grid-template-columns: 1fr; }
    .ip-fare-grid { grid-template-columns: repeat(2, 1fr); }
    .ip-img-card img, .ip-img-card.ip-img-placeholder,
    .ip-booking-visual { height: 300px; min-height: 300px; }
    .ip-img-tall { height: 300px !important; }
    .ip-pricing { padding: 24px; }
    .ip-cta { padding: 28px; }
    .ip-btn { width: 100%; justify-content: center; }
    .ip-stats-offset { margin-top: -20px; }
    .ip-hero::after { height: 70px; }
}