/* ==========================================================================
   Home page
   --------------------------------------------------------------------------
   The design is a single 1200px canvas with no breakpoints of its own, so the
   responsive behaviour below is an addition rather than a translation: one
   column on a phone, the design's own composition from 64rem up. The floating
   hero cards, which overlap the logo panel on the desktop canvas, sit in the
   flow underneath it on narrow screens where there is nothing to overlap.
   ========================================================================== */

/* --- Hero --------------------------------------------------------------- */

/* Clipped sideways only: a floating card near the bottom must be able to cast its
   shadow past the section instead of being cut off in a hard line. It also sits
   above the next section so that shadow is not painted over. */
.hero {
    position: relative;
    z-index: 1;
    overflow-x: clip;
}

.hero__inner {
    padding-block: var(--space-10) var(--space-12);
}

.hero__title {
    font-size: var(--text-hero);
    line-height: var(--leading-tight);
    letter-spacing: -0.01em;
    text-wrap: balance;
}

.hero__title-emphasis {
    color: var(--color-accent);
    font-style: italic;
}

.hero__lead {
    max-width: 30rem;
    margin-top: var(--space-5);
    font-size: var(--text-lead);
    line-height: 1.62;
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-top: var(--space-8);
}

/* Left out on a phone: at that width the world map shrinks to a strip whose
   pins and labels are too small to read or tap, and it only pushes the pillars
   further down. From 40rem it has room to be a map again. */
.hero__figure {
    display: none;
    margin-top: var(--space-10);
}

@media (min-width: 40rem) {
    .hero__figure {
        display: block;
    }
}

/* A world map drawn for this spot (the whole world, fit with "meet" so it is
   never cropped — see the block's own docblock), reusing page_region's pin and
   tooltip rules (.pg-map__*) as-is. No background and no frame: the sea is
   transparent and the country outlines and label halos are drawn in the
   canvas colour, so the land sits straight on the hero. The box's height
   follows the SVG's own viewBox ratio. */
.hero__map {
    position: relative;
}

.hero__map svg,
.hero__map img {
    display: block;
    width: 100%;
    height: auto;
}

/* Side by side from 64rem, the map taking the right two thirds of the shell
   and running under the text column (the title and lead stack above it),
   where mostly open Pacific and the west of the Americas sit. */
@media (min-width: 64rem) {
    .hero__inner {
        display: grid;
        grid-template-columns: repeat(12, minmax(0, 1fr));
        align-items: center;
        padding-block: var(--space-12) var(--space-16);
    }

    /* Eight columns rather than six, so the title can run out over the map
       and settle into two balanced lines; the lead and buttons keep their own
       narrower width. The box itself lets the pointer through to the map's
       pins beneath it — only the text and buttons themselves catch it. */
    .hero__intro {
        position: relative;
        z-index: 1;
        grid-row: 1;
        grid-column: 1 / span 8;
        pointer-events: none;
    }

    .hero__title > *,
    .hero__lead,
    .hero__actions > * {
        pointer-events: auto;
    }

    /* Where the text lies over the map, a soft halo in the page's own colour
       lifts it off the land without a box or a visible edge. Stacked blurs,
       sized in em so the title's halo grows with it. */
    .hero__title,
    .hero__lead {
        text-shadow:
            0 0 0.15em var(--color-canvas),
            0 0 0.3em var(--color-canvas),
            0 0 0.6em var(--color-canvas),
            0 0 1em var(--color-canvas),
            0 0 1.6em var(--color-canvas),
            0 0 2.4em var(--color-canvas);
    }

    .hero__figure {
        grid-row: 1;
        grid-column: 5 / -1;
        margin-top: 0;
    }
}

/* --- Pillars ------------------------------------------------------------ */

.pillars {
    padding-block: var(--space-5) var(--section-gap);
}

.pillars__grid {
    display: grid;
    gap: var(--space-6);
}

.pillar {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--color-surface);
    border: 1px solid var(--color-border-card);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: transform var(--transition), box-shadow var(--transition);
}

.pillar:hover {
    transform: translateY(-7px);
    box-shadow: var(--shadow-card);
}

.pillar__media {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 4 / 3;
    padding: var(--space-4);
    background: var(--color-surface-sunken);
    overflow: hidden;
}

.pillar__glow {
    position: absolute;
    width: 80%;
    height: 80%;
    border-radius: 50%;
    animation: glowpulse 6s ease-in-out infinite;
}

.pillar--care .pillar__glow {
    background: radial-gradient(circle, var(--color-care-glow) 0%, rgba(176, 102, 47, 0) 60%);
}

.pillar--travel .pillar__glow {
    background: radial-gradient(circle, var(--color-travel-glow) 0%, rgba(130, 160, 110, 0) 60%);
}

.pillar--education .pillar__glow {
    background: radial-gradient(circle, var(--color-education-glow) 0%, rgba(208, 131, 107, 0) 60%);
}

.pillar__image {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.pillar__body {
    display: block;
    padding: var(--space-6) var(--space-6) var(--space-7);
}

.pillar__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.4375rem;
    font-size: var(--text-eyebrow);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
}

.pillar__dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
}

.pillar--care .pillar__eyebrow {
    color: var(--color-care);
}

.pillar--care .pillar__dot {
    background: var(--color-care);
}

.pillar--travel .pillar__eyebrow {
    color: var(--color-travel);
}

.pillar--travel .pillar__dot {
    background: var(--color-travel);
}

.pillar--education .pillar__eyebrow {
    color: var(--color-education);
}

.pillar--education .pillar__dot {
    background: var(--color-education);
}

.pillar__title {
    margin-top: var(--space-2);
    font-size: var(--text-h3);
    font-weight: var(--weight-medium);
}

.pillar__text {
    display: block;
    margin-top: var(--space-2);
    color: var(--color-text);
    font-size: var(--text-sm);
}

.pillar__link {
    display: inline-block;
    margin-top: var(--space-4);
    color: var(--color-accent-text);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
}

.pillar:hover .pillar__link .arrow {
    transform: translateX(3px);
}

/* --- Gallery ------------------------------------------------------------ */

/* Both sides get the standard section rhythm now — it used to rely on the
   pillars section above it for its own top gap (0 here), back when it
   always followed pillars directly; now it can sit after any section. */
.gallery {
    padding-block: var(--section-gap);
}

.gallery__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}

.gallery__title {
    font-size: var(--text-section);
}

.gallery__text {
    max-width: 32.5rem;
    margin-top: var(--space-3);
    color: var(--color-text-muted);
}

.gallery__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
}

.gallery__cell {
    aspect-ratio: 1 / 1;
    background: var(--color-surface-sunken);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.gallery__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

.gallery__cell:hover .gallery__image {
    transform: scale(1.08);
}

.gallery__link {
    display: block;
    width: 100%;
    height: 100%;
    cursor: zoom-in;
}

/* --- About -------------------------------------------------------------- */

.about {
    padding-block: var(--section-gap);
    background: var(--color-surface-warm);
}

.about__inner {
    max-width: 48.75rem;
    margin-inline: auto;
    padding-inline: var(--shell-gutter);
    text-align: center;
}

.about__title {
    font-size: var(--text-display);
    line-height: 1.08;
}

.about__subtitle {
    margin-top: var(--space-1);
    color: var(--color-accent-text);
    font-family: var(--font-display);
    font-size: var(--text-subtitle);
    font-style: italic;
}

.about__body {
    margin-top: var(--space-6);
    color: var(--color-text-strong);
    font-size: var(--text-body);
    line-height: var(--leading-relaxed);
}

.about__stats {
    display: grid;
    gap: var(--space-5);
    max-width: 51.25rem;
    margin: var(--space-12) auto 0;
    padding-inline: var(--shell-gutter);
}

/* --- Quote -------------------------------------------------------------- */

.quote {
    padding: var(--section-gap) var(--shell-gutter);
    text-align: center;
}

.quote__figure {
    max-width: 47.5rem;
    margin-inline: auto;
}

.quote__figure::before {
    content: '\201C';
    display: block;
    height: 2.125rem;
    color: var(--color-accent-light);
    font-family: var(--font-display);
    font-size: 4rem;
    line-height: 0;
}

.quote__text {
    color: var(--color-ink);
    font-family: var(--font-display);
    font-size: var(--text-quote);
    font-style: italic;
    line-height: 1.4;
    text-wrap: balance;
}

.quote__attribution {
    margin-top: var(--space-5);
    color: var(--color-text-subtle);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* --- Book --------------------------------------------------------------- */

.book {
    padding-block: var(--section-gap);
    background: var(--color-surface-dark);
    color: var(--color-ink-inverse);
}

.book__inner {
    display: grid;
    gap: var(--space-8);
    justify-items: center;
    align-items: center;
    text-align: center;
}

.book__cover {
    width: 12.5rem;
    height: auto;
    border-radius: var(--radius-xs);
    box-shadow: var(--shadow-cover);
}

.book__eyebrow {
    color: var(--color-accent-light);
    font-size: var(--text-eyebrow);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
}

.book__title {
    margin-top: var(--space-2);
    color: var(--color-ink-inverse);
    font-size: var(--text-title);
    line-height: 1.12;
}

.book__subtitle {
    margin-top: var(--space-1);
    color: var(--color-accent-light);
    font-family: var(--font-display);
    font-size: 1.375rem;
    font-style: italic;
}

.book__text {
    max-width: 35rem;
    margin-top: var(--space-4);
    color: var(--color-text-on-dark);
    font-size: var(--text-body);
    line-height: 1.66;
}

.book__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-4);
    margin-top: var(--space-7);
}

/* ==========================================================================
   Wider viewports
   ========================================================================== */

@media (min-width: 34rem) {
    .gallery__grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .about__stats {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* A tablet has room beside the picture but not for three columns: the
   picture on the left, the text beside it, rather than a stack of three cards
   each with a picture as wide as the page. */
@media (min-width: 40rem) and (max-width: 53.999rem) {
    .pillar {
        flex-direction: row;
    }

    .pillar__media {
        flex: 0 0 38%;
        aspect-ratio: auto;
        min-height: 13rem;
    }

    .pillar__body {
        align-self: center;
    }
}

@media (min-width: 54rem) {
    .pillars__grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .book__inner {
        grid-template-columns: auto 1fr;
        gap: var(--space-12);
        justify-items: start;
        text-align: left;
    }

    .book__actions {
        justify-content: flex-start;
    }
}

@media (min-width: 60rem) {
    .gallery__grid {
        grid-template-columns: repeat(6, 1fr);
    }
}

@media (min-width: 64rem) {
    .book__cover {
        width: 12.5rem;
    }
}