/* ==========================================================================
   School Travel landing page  (FULL FILE - drop-in replace)
   Scope: .st-scope  |  Brand: blue #466289 | gold #c0b55e | red #b63327
   Fonts: Georgia-Bold (headings) + Raleway (body) - same as site
   Icons: FontAwesome 4.7.0 (local assets/style/font-awesome.min.css)
   ========================================================================== */

.st-scope {
    --st-blue: #466289;
    --st-blue-dark: #35496a;
    --st-teal: #4885a2;
    --st-gold: #c0b55e;
    --st-red: #b63327;
    --st-ink: #2e2e2e;
    --st-muted: #5c5c5c;
    --st-line: #e1e1e1;
    --st-soft: #f7f8fa;
    font-family: Raleway, 'Helvetica Neue', Arial, Verdana, sans-serif;
    color: var(--st-ink);
    overflow-x: clip; /* reveal translateX + gain frame offset se side-scroll na aaye */
}

.st-scope * { box-sizing: border-box; }

/* ---------- shared bits ---------- */
.st-section { padding: 90px 0; position: relative; }
.st-section--soft { background: var(--st-soft); }
.st-section--tight { padding: 70px 0; }

.st-head { text-align: center; max-width: 860px; margin: 0 auto 55px; }
.st-head h1,
.st-head h2 {
    font-family: 'Georgia-Bold', Georgia, serif;
    font-size: 38px;
    line-height: 1.25;
    color: var(--st-blue);
    margin: 0 0 18px;
    text-transform: none;
}
.st-head h2.st-sub {
    font-size: 24px;
    color: var(--st-ink);
    margin-top: -4px;
}
.st-head p { font-size: 17px; line-height: 1.8; color: var(--st-muted); margin: 0 0 12px; }
.st-head--light h1, .st-head--light h2, .st-head--light p { color: #fff; }

.st-rule {
    width: 82px; height: 3px; margin: 0 auto 22px;
    background: var(--st-gold); border-radius: 3px; position: relative;
}
.st-rule:before, .st-rule:after {
    content: ''; position: absolute; top: 1px; width: 26px; height: 1px; background: var(--st-gold); opacity: .55;
}
.st-rule:before { left: -36px; }
.st-rule:after { right: -36px; }
.st-rule--light { background: #fff; }
.st-rule--light:before, .st-rule--light:after { background: #fff; }

.st-btn {
    display: inline-block;
    padding: 15px 40px;
    background: var(--st-blue);
    color: #fff !important;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    border: 2px solid var(--st-blue);
    border-radius: 2px;
    text-decoration: none !important;
    position: relative;
    overflow: hidden;
    transition: color .35s ease, border-color .35s ease;
    z-index: 1;
}
.st-btn:before {
    content: ''; position: absolute; left: 0; top: 0; width: 0; height: 100%;
    background: var(--st-gold); transition: width .4s ease; z-index: -1;
}
.st-btn:hover { border-color: var(--st-gold); }
.st-btn:hover:before { width: 100%; }
.st-btn--gold { background: var(--st-gold); border-color: var(--st-gold); }
.st-btn--gold:before { background: var(--st-blue); }
.st-btn--gold:hover { border-color: var(--st-blue); }
.st-btn--ghost { background: transparent; border-color: #fff; }
.st-btn--ghost:before { background: #fff; }
.st-btn--ghost:hover { color: var(--st-blue) !important; }

/* ---------- SECTION 1 : static banner + content below ----------
   Fixed-height banner. overflow:hidden -> Ken Burns / parallax clip hote he.
   .st-hero__bg upar 50px extra he -> JS parallax (max 36px) kabhi gap nahi banata. */
.st-hero {
    position: relative;
    height: 600px;
    max-height: 90vh;
    overflow: clip;
    background: var(--st-blue-dark);
}
.st-hero__bg {
    position: absolute;
    left: 0; right: 0;
    top: -50px; bottom: 0;
    will-change: transform;
}
.st-hero__bg img {
    width: 100%; height: 100%;
    display: block;
    object-fit: cover;
    object-position: center 42%;
    animation: st-kenburns 22s ease-out forwards;
}
@keyframes st-kenburns {
    from { transform: scale(1.12); }
    to   { transform: scale(1.02); }
}
.st-hero__overlay {
    position: absolute; left: 0; right: 0; bottom: 0;
    height: 45%; z-index: 2;
    background: linear-gradient(180deg, rgba(26,37,54,0) 0%, rgba(26,37,54,.6) 100%);
    pointer-events: none;
}

/* content below the static image */
.st-intro {
    position: relative;
    background: #fff;
    padding: 50px 0 46px;
    text-align: center;
}
.st-intro__inner { max-width: 900px; margin: 0 auto; padding: 0 20px; }
.st-hero__eyebrow {
    display: inline-block;
    color: var(--st-gold);
    letter-spacing: 4px;
    text-transform: uppercase;
    font-size: 12px; font-weight: 700;
    margin-bottom: 16px; padding-bottom: 10px;
    border-bottom: 1px solid rgba(192,181,94,.55);
}
.st-intro h1 {
    font-family: 'Georgia-Bold', Georgia, serif;
    color: var(--st-blue);
    font-size: 44px; line-height: 1.22;
    margin: 0 0 20px;
}
.st-intro p {
    color: var(--st-muted);
    font-size: 17.5px; line-height: 1.85;
    max-width: 820px;
    margin: 0 auto 32px;
}
.st-intro__scroll {
    display: inline-block;
    margin-top: 34px;
    color: var(--st-blue);
    font-size: 22px; opacity: .55;
    text-decoration: none !important;
    animation: st-bounce 2s infinite;
}
.st-intro__scroll:hover { color: var(--st-gold); opacity: 1; }
@keyframes st-bounce {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(9px); }
}

/* ---------- SECTION 2 : why schools choose ---------- */
.st-pillars { display: flex; flex-wrap: wrap; margin: 0 -15px; }
.st-pillar { padding: 0 15px; margin-bottom: 30px; }
.st-pillar__inner {
    background: #fff;
    border: 1px solid var(--st-line);
    border-radius: 4px;
    padding: 45px 28px 38px;
    text-align: center;
    height: 100%;
    position: relative;
    overflow: hidden;
    transition: transform .4s ease, box-shadow .4s ease, border-color .4s ease;
}
.st-pillar__inner:before {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 3px;
    background: var(--st-gold); transform: scaleX(0); transform-origin: left; transition: transform .45s ease;
}
.st-pillar__inner:hover { transform: translateY(-10px); box-shadow: 0 18px 40px rgba(70,98,137,.18); border-color: transparent; }
.st-pillar__inner:hover:before { transform: scaleX(1); }
.st-pillar__icon {
    width: 78px; height: 78px; margin: 0 auto 22px;
    border-radius: 50%;
    background: rgba(70,98,137,.08);
    color: var(--st-blue);
    display: flex; align-items: center; justify-content: center;
    font-size: 30px;
    transition: background .4s ease, color .4s ease, transform .4s ease;
}
.st-pillar__inner:hover .st-pillar__icon { background: var(--st-blue); color: #fff; transform: rotateY(180deg); }
.st-pillar h3 {
    font-family: 'Georgia-Bold', Georgia, serif;
    font-size: 19px; color: var(--st-blue); margin: 0 0 12px;
}
.st-pillar p { font-size: 15px; line-height: 1.75; color: var(--st-muted); margin: 0; }

/* ---------- SECTION 3 : five elements ---------- */
.st-elements { display: flex; flex-wrap: wrap; justify-content: center; margin: 0 -15px; }
.st-element { padding: 0 15px; margin-bottom: 30px; }
.st-element__inner {
    display: flex; gap: 18px;
    background: #fff;
    border-left: 3px solid var(--st-gold);
    border-radius: 3px;
    padding: 30px 26px;
    height: 100%;
    box-shadow: 0 4px 18px rgba(0,0,0,.05);
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.st-element__inner:hover { transform: translateX(6px); border-left-color: var(--st-blue); box-shadow: 0 12px 32px rgba(0,0,0,.1); }
.st-element__icon {
    width: 52px; height: 52px; flex: 0 0 52px;
    border-radius: 12px;
    background: rgba(192,181,94,.14);
    color: var(--st-gold);
    display: flex; align-items: center; justify-content: center;
    font-size: 21px;
    transition: background .35s ease, color .35s ease, transform .35s ease;
}
.st-element__inner:hover .st-element__icon {
    background: var(--st-gold); color: #fff;
    transform: rotate(-6deg) scale(1.06);
}
.st-element h3 { font-family: 'Georgia-Bold', Georgia, serif; font-size: 18px; color: var(--st-blue); margin: 0 0 9px; }
.st-element p { font-size: 15px; line-height: 1.75; color: var(--st-muted); margin: 0; }

/* ---------- SECTION 4 : what students gain ---------- */
.st-gain { display: flex; flex-wrap: wrap; align-items: center; margin: 0 -20px; }
.st-gain__media, .st-gain__body { padding: 0 20px; }
.st-gain__frame { position: relative; }
.st-gain__frame img { width: 100%; border-radius: 4px; display: block; position: relative; z-index: 2; }
.st-gain__frame:after {
    content: ''; position: absolute; right: -16px; bottom: -16px;
    width: 65%; height: 65%; border: 3px solid var(--st-gold); border-radius: 4px; z-index: 1;
}
.st-gain__body h1 { font-family: 'Georgia-Bold', Georgia, serif; font-size: 36px; color: var(--st-blue); margin: 0 0 8px; }
.st-gain__body h2 { font-family: 'Georgia-Bold', Georgia, serif; font-size: 22px; color: var(--st-ink); margin: 0 0 16px; }
.st-gain__body > p { font-size: 16px; line-height: 1.8; color: var(--st-muted); margin: 0 0 26px; }
.st-gain__list { list-style: none; padding: 0; margin: 0; }
.st-gain__list li {
    position: relative;
    padding: 11px 0 11px 40px;
    font-size: 16px;
    color: var(--st-ink);
    border-bottom: 1px dashed var(--st-line);
}
.st-gain__list li:last-child { border-bottom: 0; }
.st-gain__list li:before {
    content: '\f00c';
    font-family: FontAwesome;
    position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    width: 26px; height: 26px; line-height: 26px; text-align: center;
    font-size: 11px; border-radius: 50%;
    background: rgba(192,181,94,.18); color: var(--st-gold);
    transition: background .3s ease, color .3s ease;
}
.st-gain__list li:hover:before { background: var(--st-gold); color: #fff; }

/* ---------- SECTION 5 : every tour includes ---------- */
.st-includes {
    background: #fff;
    border: 1px solid var(--st-line);
    border-radius: 4px;
    padding: 40px 40px 24px;
    box-shadow: 0 8px 30px rgba(0,0,0,.05);
}
.st-includes__label {
    display: inline-block;
    font-family: 'Georgia-Bold', Georgia, serif;
    font-size: 20px; color: var(--st-blue);
    border-bottom: 2px solid var(--st-gold);
    padding-bottom: 8px; margin-bottom: 26px;
}
.st-includes__cols { column-count: 2; column-gap: 50px; padding: 0; margin: 0; }
.st-includes__cols li {
    list-style: none;
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    position: relative;
    padding: 12px 0 12px 34px;
    font-size: 16px;
    border-bottom: 1px solid #f0f0f0;
}
.st-includes__cols li:before {
    content: '\f058';
    font-family: FontAwesome;
    position: absolute; left: 0; top: 12px;
    color: var(--st-teal); font-size: 16px;
    transition: transform .3s ease;
}
.st-includes__cols li:hover:before { transform: scale(1.25); }

/* ---------- SECTION 6 : destinations ---------- */
.st-dests { display: flex; flex-wrap: wrap; margin: 0 -12px; }
.st-dest { padding: 0 12px; margin-bottom: 24px; }
.st-dest__card {
    position: relative;
    display: block;
    height: 330px;
    border-radius: 4px;
    overflow: hidden;
    text-decoration: none !important;
}
.st-dest__img {
    position: absolute; inset: 0;
    background-size: cover; background-position: center;
    transition: transform 1s cubic-bezier(.2,.7,.3,1);
}
.st-dest__card:hover .st-dest__img { transform: scale(1.12); }
.st-dest__card:after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(46,46,46,0) 30%, rgba(53,73,106,.85) 100%);
    transition: background .45s ease;
}
.st-dest__card:hover:after { background: linear-gradient(180deg, rgba(46,46,46,.15) 0%, rgba(53,73,106,.94) 100%); }
.st-dest__body {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
    padding: 26px 24px;
    transition: transform .45s ease;
}
.st-dest__card:hover .st-dest__body { transform: translateY(-6px); }
.st-dest__body h3 {
    font-family: 'Georgia-Bold', Georgia, serif;
    color: #fff; font-size: 22px; margin: 0 0 6px;
}
.st-dest__body p {
    color: #eaeaea; font-size: 14.5px; line-height: 1.6; margin: 0;
    max-height: 0; opacity: 0; overflow: hidden;
    transition: max-height .45s ease, opacity .45s ease;
}
.st-dest__card:hover .st-dest__body p { max-height: 90px; opacity: 1; }
.st-dest__body span.st-dest__bar {
    display: block; width: 40px; height: 2px; background: var(--st-gold); margin: 12px 0 0;
    transition: width .45s ease;
}
.st-dest__card:hover .st-dest__bar { width: 90px; }

/* ---------- SECTION 7 : school leaders (blue bg) ---------- */
.st-leaders {
    background: var(--st-blue);
    position: relative;
    overflow: hidden;
}
.st-leaders:before {
    content: '\f19c';
    font-family: FontAwesome;
    position: absolute; right: -30px; top: -40px;
    font-size: 320px; color: rgba(255,255,255,.05); line-height: 1;
}
.st-leaders__grid { display: flex; flex-wrap: wrap; justify-content: center; margin: 0 -12px; }
.st-leaders__grid > div { padding: 0 12px; margin-bottom: 20px; }
.st-leaders__item {
    display: flex; align-items: center; gap: 14px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 3px;
    padding: 20px 22px;
    height: 100%;
    color: #fff;
    font-size: 16px;
    transition: background .35s ease, transform .35s ease;
}
.st-leaders__item:hover { background: rgba(255,255,255,.16); transform: translateY(-5px); }
.st-leaders__item i { color: var(--st-gold); font-size: 17px; flex: 0 0 auto; }

/* ---------- SECTION 8 : how it works timeline ---------- */
.st-steps { position: relative; }
.st-steps__track {
    position: absolute; top: 34px; left: 8%; right: 8%; height: 2px;
    background: var(--st-line);
}
.st-steps__fill {
    position: absolute; top: 0; left: 0; height: 100%; width: 100%;
    background: var(--st-gold);
}
.st-scope.st-anim .st-steps__fill { width: 0; transition: width 1.8s ease .2s; }
.st-scope.st-anim .st-steps.is-inview .st-steps__fill { width: 100%; }
.st-steps__row { display: flex; flex-wrap: wrap; margin: 0 -10px; position: relative; z-index: 2; }
.st-step { padding: 0 10px; text-align: center; margin-bottom: 30px; }
.st-step__num {
    width: 68px; height: 68px; margin: 0 auto 20px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--st-line);
    color: var(--st-blue);
    font-family: 'Georgia-Bold', Georgia, serif;
    font-size: 24px;
    display: flex; align-items: center; justify-content: center;
    transition: background .4s ease, color .4s ease, border-color .4s ease, transform .4s ease;
}
.st-step:hover .st-step__num { background: var(--st-blue); border-color: var(--st-blue); color: #fff; transform: scale(1.08); }
.st-step h3 { font-family: 'Georgia-Bold', Georgia, serif; font-size: 16.5px; color: var(--st-blue); margin: 0 0 8px; line-height: 1.4; }
.st-step p { font-size: 14.5px; line-height: 1.7; color: var(--st-muted); margin: 0; }

/* ---------- SECTION 9 : ground team ---------- */
.st-team { display: flex; flex-wrap: wrap; align-items: center; margin: 0 -20px; }
.st-team__body, .st-team__media { padding: 0 20px; }
.st-team__body h1 { font-family: 'Georgia-Bold', Georgia, serif; font-size: 36px; color: var(--st-blue); margin: 0 0 10px; }
.st-team__body h2 { font-family: 'Georgia-Bold', Georgia, serif; font-size: 22px; color: var(--st-ink); margin: 0 0 18px; }
.st-team__body p { font-size: 16px; line-height: 1.85; color: var(--st-muted); margin: 0 0 16px; }
.st-team__mosaic { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 14px; }
.st-team__mosaic figure { margin: 0; overflow: hidden; border-radius: 4px; }
.st-team__mosaic figure:first-child { grid-column: 1 / -1; }
.st-team__mosaic img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .9s cubic-bezier(.2,.7,.3,1); }
.st-team__mosaic figure:first-child img { height: 260px; }
.st-team__mosaic figure:not(:first-child) img { height: 175px; }
.st-team__mosaic figure:hover img { transform: scale(1.09); }

/* ---------- SECTION 10 : more than a tour ---------- */
.st-more {
    position: relative;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}
.st-more:before { content: ''; position: absolute; inset: 0; background: rgba(53,73,106,.9); }
.st-more .container { position: relative; z-index: 2; }
.st-more__lead { max-width: 900px; margin: 0 auto; text-align: center; }
.st-more__lead h1 { font-family: 'Georgia-Bold', Georgia, serif; font-size: 38px; color: #fff; margin: 0 0 16px; }
.st-more__lead > p { color: #e6e6e6; font-size: 17px; line-height: 1.85; }
.st-more__wants { list-style: none; padding: 0; margin: 34px 0; }
.st-more__wants li {
    font-family: 'Georgia-Bold', Georgia, serif;
    color: #fff; font-size: 21px; line-height: 1.6;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255,255,255,.14);
}
.st-more__wants li:last-child { border-bottom: 0; }
.st-more__wants li span { color: var(--st-gold); }

/* ---------- SECTION 11 : CTA + form ---------- */
.st-cta { background: var(--st-soft); }
.st-cta__grid { display: flex; flex-wrap: wrap; margin: 0 -20px; }
.st-cta__info, .st-cta__form { padding: 0 20px; }
.st-cta__info h1 { font-family: 'Georgia-Bold', Georgia, serif; font-size: 38px; color: var(--st-blue); margin: 0 0 14px; }
.st-cta__info > p { font-size: 17px; line-height: 1.8; color: var(--st-muted); margin: 0 0 30px; }
.st-contactline {
    display: flex; align-items: center; gap: 16px;
    background: #fff;
    border: 1px solid var(--st-line);
    border-radius: 3px;
    padding: 18px 20px;
    margin-bottom: 14px;
    transition: transform .3s ease, box-shadow .3s ease;
}
.st-contactline:hover { transform: translateX(6px); box-shadow: 0 10px 26px rgba(0,0,0,.07); }
.st-contactline i {
    width: 44px; height: 44px; flex: 0 0 44px;
    border-radius: 50%;
    background: rgba(70,98,137,.09);
    color: var(--st-blue);
    display: flex; align-items: center; justify-content: center;
    font-size: 17px;
}
.st-contactline span { display: block; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: #999; }
.st-contactline a, .st-contactline strong { font-size: 17px; color: var(--st-ink); font-weight: 600; text-decoration: none; }
.st-contactline a:hover { color: var(--st-blue); }

.st-formcard {
    background: #fff;
    border-radius: 4px;
    padding: 38px 34px;
    box-shadow: 0 14px 44px rgba(0,0,0,.09);
    border-top: 4px solid var(--st-gold);
}
.st-formcard h3 { font-family: 'Georgia-Bold', Georgia, serif; font-size: 22px; color: var(--st-blue); margin: 0 0 22px; }
.st-formcard .form-group { margin-bottom: 16px; }
.st-formcard .form-control {
    height: 48px;
    border: 1px solid var(--st-line);
    border-radius: 2px;
    box-shadow: none;
    font-size: 15px;
    padding: 10px 14px;
    transition: border-color .3s ease, box-shadow .3s ease;
}
.st-formcard textarea.form-control { height: 120px; resize: vertical; }
.st-formcard .form-control:focus { border-color: var(--st-blue); box-shadow: 0 0 0 3px rgba(70,98,137,.1); outline: 0; }
.st-formcard input[type="submit"] { width: 100%; cursor: pointer; }

/* ---------- scroll reveal ----------
   CSS me kabhi opacity:0 NAHI. JS inline hide karta hai.
   JS mare -> kuch hide nahi -> blank impossible. */
.st-scope .st-reveal {
    transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.3,1);
}
.st-scope .st-reveal.is-inview {
    opacity: 1 !important;
    transform: none !important;
}
@media (prefers-reduced-motion: reduce) {
    .st-scope .st-reveal { opacity: 1 !important; transform: none !important; transition: none; }
}

/* ---------- responsive ---------- */
@media (max-width: 991px) {
    .st-section { padding: 65px 0; }
    .st-hero { height: 400px; max-height: none; }
    .st-intro { padding: 46px 0 40px; }
    .st-intro h1 { font-size: 30px; }
    .st-intro p { font-size: 16px; }
    .st-head h1, .st-head h2, .st-gain__body h1, .st-team__body h1, .st-more__lead h1, .st-cta__info h1 { font-size: 30px; }
    .st-steps__track { display: none; }
    .st-more { background-attachment: scroll; }
    .st-gain__media { margin-bottom: 40px; }
    .st-team__media { margin-top: 40px; }
    .st-cta__form { margin-top: 40px; }
}
@media (max-width: 767px) {
    .st-hero { height: 260px; }
    .st-intro { padding: 40px 0 36px; }
    .st-intro h1 { font-size: 25px; }
    .st-includes { padding: 28px 22px 12px; }
    .st-includes__cols { column-count: 1; }
    .st-more__wants li { font-size: 18px; }
    .st-btn { padding: 13px 28px; font-size: 12px; }
    .st-dest__card { height: 260px; }
    .st-dest__body p { max-height: 90px; opacity: 1; }
    .st-gain__frame:after { right: -8px; bottom: -8px; }
    .st-formcard { padding: 28px 20px; }
    .st-formcard .g-recaptcha { transform: scale(.86); transform-origin: 0 0; }
}