/* ==========================================================================
   FAMILY & SENIOR TRAVEL, and the two Experience doors.

   The Family & Senior Travel page, the Senior Travel Host and Family Host
   pages, the Experience hub (/experience) and Active & Language Exchange
   (/activity-experience). Tokens come from elite.css: one large line, one
   lead, the action, then chapters on white, sand and espresso.

   These pages speak to families about a parent, a grandparent or the
   children, so they are the quietest on the site: warm sand, room to
   breathe, Elite line art rather than a stranger's family photograph, and
   no clinical colour or iconography. Icon frames are the Elite arch: round
   top, flat feet. On a phone, small tiles sit two to a row and the service
   lists become one sideways row.
   ========================================================================== */

.cf-page { min-width: 0; }

/* --------------------------------------------------------------------------
   THE FIRST SCREEN
   -------------------------------------------------------------------------- */

.cf-hero { padding: clamp(44px, 7vw, 96px) 0 clamp(48px, 7vw, 96px); background: var(--c-bg); }

.cf-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: clamp(32px, 5vw, 72px);
    align-items: center;
}

.cf-eyebrow {
    margin-bottom: 12px;
    font-size: var(--t-lead);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.011em;
    color: var(--c-bronze);
}

.cf-title {
    font-size: var(--t-hero);
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -0.015em;
    color: var(--c-ink);
    text-wrap: balance;
}

.cf-lead {
    margin-top: 20px;
    font-size: var(--t-sub);
    line-height: 1.25;
    letter-spacing: 0.007em;
    color: var(--c-ink);
    text-wrap: balance;
}

.cf-lede {
    max-width: 640px;
    margin-top: 16px;
    font-size: var(--t-body);
    line-height: 1.55;
    color: var(--c-muted);
    text-wrap: pretty;
}

.cf-hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 28px;
    margin-top: 32px;
}
.cf-hero-actions .ap-link { font-size: 1.1875rem; }
.cf-hero-actions--center { justify-content: center; }
/* A long request label must wrap inside its pill rather than widen a phone. */
.cf-page .et-btn { white-space: normal; }

/* Centred first screen for the single-service pages. */
.cf-hero--center .cf-hero__copy { max-width: 900px; margin-inline: auto; text-align: center; }
.cf-hero--center .cf-title { font-size: var(--t-display); line-height: 1.07; }
.cf-hero--center .cf-lede { margin-inline: auto; }
.cf-hero--center .cf-hero-actions { justify-content: center; }

.cf-hero__mark {
    display: inline-grid;
    place-items: center;
    width: 60px;
    height: 60px;
    margin-bottom: 22px;
    border-radius: 30px;
    background: var(--c-espresso);
    color: #fff;
    font-size: 1.6rem;
}

/* The arch line art, in a warm sand panel. */
.cf-art {
    display: grid;
    place-items: center;
    padding: clamp(28px, 4vw, 56px);
    border-radius: var(--r-xl);
    background: var(--c-bg-alt);
    aspect-ratio: 5 / 4;
}
.cf-art svg {
    width: min(440px, 100%);
    height: auto;
    fill: none;
    stroke: var(--c-ink);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.cf-art .cx-soft { stroke: var(--c-line-2); }
.cf-art .cx-fine { stroke-width: 1.4; }
.cf-art .cx-accent { stroke: var(--c-bronze); fill: var(--c-warn-bg); }
.cf-art .cx-accent-2 { stroke: var(--c-gold); }

/* The limit of a non-medical service, stated plainly, early, calmly. */
.cf-limit {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    max-width: 860px;
    margin: clamp(40px, 5vw, 56px) auto 0;
    padding: clamp(20px, 2.6vw, 28px);
    border-radius: var(--r-lg);
    background: var(--c-warn-bg);
    text-align: left;
}
.cf-limit__ico {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: 21px;
    background: var(--c-espresso);
    color: #fff;
    font-size: 1.2rem;
}
.cf-limit strong { display: block; margin-bottom: 6px; font-size: 1.1875rem; font-weight: 600; color: var(--c-ink); }
.cf-limit p, .cf-limit li { margin: 0; font-size: var(--t-body); line-height: 1.5; color: var(--c-ink-2); }

/* --------------------------------------------------------------------------
   THE TWO LOCAL HOSTS, and the door tiles
   -------------------------------------------------------------------------- */

.cf-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(16px, 2vw, 24px);
}

.cf-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
    padding: clamp(26px, 3vw, 36px);
    border-radius: var(--r-xl);
    background: var(--c-bg);
}
/* h2 where the cards sit directly under the h1 (hub, activity), h3 under a
   chapter heading (Family & Senior Travel); one look for both. */
.cf-card h2, .cf-card h3 { margin-top: 6px; font-size: var(--t-sub); line-height: 1.14; letter-spacing: 0.007em; color: var(--c-ink); }
.cf-card p { font-size: var(--t-body); line-height: 1.5; color: var(--c-muted); }
.cf-card .cf-sub { font-size: var(--t-body); font-weight: 600; color: var(--c-bronze); }
.cf-card .cf-support { font-size: var(--t-small); }
.cf-card__actions { display: grid; gap: 14px; margin-top: auto; padding-top: 12px; }
.cf-secondary-link { text-align: center; }

.cf-ico {
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    border-radius: 25px;
    background: var(--c-espresso);
    color: #fff;
    font-size: 1.4rem;
}
.cf-ico-sm {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    margin-bottom: 16px;
    border-radius: 20px;
    background: var(--c-espresso);
    color: #fff;
    font-size: 1.15rem;
}

/* Status is never colour alone: each pill carries its own word. */
.cf-status {
    position: absolute;
    top: 22px;
    right: 22px;
    padding: 4px 11px;
    border-radius: var(--r-pill);
    font-size: var(--t-micro);
    font-weight: 600;
}
.cf-status-on   { background: var(--c-success-bg); color: var(--c-success); }

.cf-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 4px; padding: 0; list-style: none; }
.cf-tags li {
    padding: 4px 11px;
    border-radius: var(--r-pill);
    background: var(--c-bg-alt);
    color: var(--c-ink-2);
    font-size: var(--t-micro);
}

/* What these Local Hosts are, and are not. */
.cf-boundary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 40px;
    margin-top: clamp(40px, 5vw, 64px);
    padding-top: clamp(28px, 3.4vw, 40px);
    border-top: 1px solid var(--c-line-2);
}
.cf-boundary h3 { margin-bottom: 8px; font-size: 1.1875rem; color: var(--c-ink); }
.cf-boundary p { font-size: var(--t-body); line-height: 1.5; color: var(--c-muted); }
.cf-boundary a { color: var(--c-link); }

/* --------------------------------------------------------------------------
   WHAT A FAMILY CAN COUNT ON, WHEN FAMILIES ASK
   -------------------------------------------------------------------------- */

.cf-benefits { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 2vw, 20px); }
.cf-benefit {
    min-width: 0;
    padding: clamp(24px, 2.6vw, 32px);
    border-radius: var(--r-md);
    background: var(--c-bg-alt);
}
.cf-benefit .cf-ico-sm { margin-bottom: 14px; }
.cf-benefit h3 { margin-bottom: 8px; font-size: 1.3125rem; line-height: 1.2; color: var(--c-ink); }
.cf-benefit p { font-size: var(--t-body); line-height: 1.5; color: var(--c-muted); }

/* --------------------------------------------------------------------------
   HOW A REQUEST WORKS (the espresso chapter): four steps
   -------------------------------------------------------------------------- */

.cf-steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    list-style: none;
    border-radius: var(--r-lg);
    background: rgba(255, 255, 255, 0.08);
}
.cf-steps li { display: flex; flex-direction: column; gap: 18px; padding: clamp(24px, 2.6vw, 32px); background: var(--c-espresso-2); }
.cf-steps .cf-n {
    font-size: clamp(2.5rem, 4vw, 3.25rem);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.03em;
    color: transparent;
    background: linear-gradient(180deg, var(--c-gold), var(--c-bronze));
    -webkit-background-clip: text;
    background-clip: text;
}
.cf-steps strong { display: block; margin-bottom: 6px; font-size: 1.1875rem; font-weight: 600; line-height: 1.25; color: #fff; }
.cf-steps p { font-size: var(--t-small); line-height: 1.5; color: var(--c-on-dark-2); }
.ap-chapter--dark .cf-close { margin-top: clamp(32px, 4vw, 48px); }

/* --------------------------------------------------------------------------
   THE SERVICE LISTS (Senior Travel Host, Family Host)
   -------------------------------------------------------------------------- */

.cf-services { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 20px); }
.cf-service {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    padding: clamp(24px, 2.6vw, 32px);
    border-radius: var(--r-lg);
    background: var(--c-bg);
}
.cf-service .cf-ico-sm { margin-bottom: 8px; }
.cf-service h3 { font-size: 1.3125rem; line-height: 1.2; color: var(--c-ink); }
.cf-service p { font-size: var(--t-body); line-height: 1.5; color: var(--c-muted); }
.cf-service ul { display: grid; gap: 4px; margin: 4px 0 0; padding-left: 18px; }
.cf-service li { font-size: var(--t-small); line-height: 1.5; color: var(--c-ink-2); }
.cf-service .cf-dur {
    align-self: flex-start;
    margin-top: auto;
    padding: 4px 11px;
    border-radius: var(--r-pill);
    background: var(--c-bg-alt);
    color: var(--c-ink-2);
    font-size: var(--t-micro);
    font-weight: 600;
}
.cf-service p + .cf-dur, .cf-service ul + .cf-dur { margin-top: 8px; }
.cf-service .ap-link { font-size: var(--t-small); white-space: normal; }

.cf-close { margin-top: clamp(40px, 5vw, 64px); }

/* A list of rules, plainly: the Family Host's rules with children. */
.cf-rules {
    padding: clamp(26px, 3.4vw, 44px);
    border-radius: var(--r-xl);
    background: var(--c-bg-alt);
}
.cf-rules > .et-ico { margin-bottom: 18px; }
.cf-rules h2 { font-size: var(--t-title); }
.cf-rules h2 + p { margin-top: 14px; font-size: var(--t-body); line-height: 1.5; color: var(--c-ink-2); }
.cf-rules ul { display: grid; gap: 0; margin: 18px 0 0; padding: 0; list-style: none; }
.cf-rules li {
    position: relative;
    padding: 12px 0 12px 30px;
    border-top: 1px solid var(--c-line-2);
    font-size: var(--t-body);
    line-height: 1.45;
    color: var(--c-ink);
}
.cf-rules li:first-child { border-top: 0; }
.cf-rules li::before {
    content: "\2022";
    position: absolute;
    left: 8px;
    top: 12px;
    color: var(--c-gold);
    font-weight: 600;
}

/* --------------------------------------------------------------------------
   THE EXPERIENCE HUB AND ACTIVE & LANGUAGE EXCHANGE: two door tiles
   -------------------------------------------------------------------------- */

.xh-hero { padding: clamp(44px, 7vw, 92px) 0 clamp(32px, 4vw, 52px); text-align: center; }
.xh-hero .cf-title { max-width: 17ch; margin-inline: auto; font-size: var(--t-display); line-height: 1.07; }
.xh-hero .cf-lead { max-width: 720px; margin-inline: auto; }

.xh-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 0 12px;
}
.xh-tiles > .cf-card {
    align-items: center;
    overflow: hidden;
    min-height: 640px;
    padding: clamp(40px, 5vw, 56px) 24px 0;
    border-radius: var(--r-xl);
    background: var(--c-bg-alt);
    text-align: center;
}
.xh-tiles > .cf-card h2 { margin-top: 4px; font-size: clamp(1.9rem, 3.2vw, 2.75rem); line-height: 1.08; }
.xh-tiles > .cf-card > p { max-width: 34ch; font-size: var(--t-lead); line-height: 1.38; color: var(--c-ink-2); }
.xh-tiles > .cf-card .cf-tags { justify-content: center; }
.xh-tiles > .cf-card .cf-tags li { background: var(--c-bg); }
.xh-tile--dark,
.xh-tiles > .cf-card + .cf-card { background: var(--c-espresso); color: var(--c-on-dark); }
.xh-tile--dark h2,
.xh-tiles > .cf-card + .cf-card h2 { color: #fff; }
.xh-tile--dark > p,
.xh-tiles > .cf-card + .cf-card > p { color: var(--c-on-dark-2); }
.xh-tiles > .cf-card + .cf-card .cf-tags li { background: rgba(255, 255, 255, 0.1); color: var(--c-on-dark); }
.xh-tiles > .cf-card + .cf-card .cf-ico { background: rgba(255, 255, 255, 0.1); }
.xh-tile__links { margin-top: 10px; }
.xh-tile__art { width: calc(100% + 48px); margin: auto -24px 0; padding-top: 32px; }
.xh-tile__art img {
    display: block;
    width: 100%;
    height: clamp(240px, 26vw, 340px);
    object-fit: cover;
    border-radius: var(--r-lg) var(--r-lg) 0 0;
}
.xh-tile--sand .xh-tile__art img { object-position: 50% 40%; }

.xh-more {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: clamp(40px, 5vw, 64px) 0 var(--sp-chapter);
    text-align: center;
}
.xh-more .ap-link { white-space: normal; font-size: 1.1875rem; }

/* A balanced pair rather than a three-up grid: Active & Language Exchange
   holds Active and Language Exchange only. */
.cf-grid-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* --------------------------------------------------------------------------
   RESPONSIVE
   -------------------------------------------------------------------------- */

@media (max-width: 1068px) {
    .cf-grid, .cf-services { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cf-benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cf-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cf-hero__grid { grid-template-columns: minmax(0, 1fr); }
    .cf-art { aspect-ratio: auto; }
    .xh-tiles > .cf-card { min-height: 560px; }
}

@media (max-width: 734px) {
    .cf-hero { padding: 28px 0 36px; }
    .cf-hero--center .cf-hero__copy,
    .xh-hero { text-align: left; }
    .cf-hero--center .cf-hero-actions { justify-content: flex-start; }
    .cf-hero--center .cf-lede,
    .xh-hero .cf-title, .xh-hero .cf-lead { margin-inline: 0; }
    .cf-lead { margin-top: 14px; }
    .cf-hero-actions { gap: 14px 20px; margin-top: 24px; }
    .cf-hero-actions .et-btn { width: 100%; }
    .cf-hero__mark { width: 48px; height: 48px; margin-bottom: 16px; border-radius: 24px; font-size: 1.3rem; }
    .cf-art { padding: 18px; }
    .cf-art svg { width: min(260px, 100%); }
    .cf-grid, .cf-services, .xh-tiles, .cf-grid-two { grid-template-columns: minmax(0, 1fr); }
    .cf-card { padding: 24px 20px; border-radius: var(--r-lg); }
    .cf-card h2, .cf-card h3 { padding-right: 84px; }
    .cf-status { top: 18px; right: 18px; }
    .cf-limit { gap: 14px; margin-top: 28px; padding: 18px; }
    .cf-limit strong { font-size: var(--t-body); }
    .cf-limit p { font-size: var(--t-small); }
    .cf-boundary { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 28px; padding-top: 22px; }
    .cf-boundary h3 { font-size: var(--t-body); }
    .cf-boundary p { font-size: var(--t-small); }

    /* Small tiles: two to a row, the words a size down. */
    .cf-benefits, .cf-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .cf-steps { gap: 1px; }
    .cf-benefit { padding: 16px; }
    .cf-benefit h3 { font-size: var(--t-body); }
    .cf-benefit p { font-size: var(--t-small); line-height: 1.45; }
    .cf-benefit .cf-ico-sm { width: 34px; height: 40px; margin-bottom: 10px; font-size: 1rem; }
    .cf-steps li { gap: 10px; padding: 18px 16px; }
    .cf-steps .cf-n { font-size: 2rem; }
    .cf-steps strong { font-size: var(--t-body); }
    .cf-steps p { font-size: var(--t-micro); }

    /* The service lists: one sideways row, a card and a glimpse of the next.
       position:relative keeps everything inside the scroller. */
    .cf-services--row {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        overflow: visible;
        position: relative;
        gap: 12px;
        margin-inline: calc(var(--pad) * -1);
        padding: 2px var(--pad) 14px;
    }
    .cf-services--row > * { flex: none; width: auto; min-width: 0; scroll-snap-align: none; grid-column: auto; }
    .cf-services--row::-webkit-scrollbar { display: none; }
    .cf-services--row > .cf-service { scroll-snap-align: start; padding: 20px; }
    .cf-service h3 { font-size: 1.125rem; }
    .cf-service p { font-size: var(--t-small); }

    .cf-rules { padding: 22px 18px; }
    .cf-hero-actions--center { justify-content: flex-start; }

    /* The two doors: the picture becomes a short banner. */
    .xh-hero { padding: 28px 0 22px; }
    .xh-tiles { gap: 12px; padding: 0; }
    .xh-tiles > .cf-card { align-items: flex-start; min-height: 0; padding: 24px 20px 0; text-align: left; }
    .xh-tiles > .cf-card > p { font-size: var(--t-body); }
    .xh-tiles > .cf-card .cf-tags { justify-content: flex-start; }
    .xh-tile__art { width: calc(100% + 40px); margin: auto -20px 0; padding-top: 20px; }
    .xh-tile__art img { height: 168px; }
    .xh-more { justify-content: flex-start; text-align: left; flex-wrap: nowrap; align-items: flex-start; padding-top: 32px; }
}