/* ==========================================================================
   HANGOUTBUDDY PREMIER, homepage chapter (templates/welcome.html only)

   Four blocks that serve one sentence, "skip the homework, enjoy the
   city": the promise with one photograph, three doors each told as a day,
   one Premier Buddy as a person, and how it works with the honest price
   line. Navy and gold stay as the mark of the tier; the chapter itself
   breathes: one photograph per idea, few boxes, plenty of air.

   Every selector is namespaced .home-page .pmr-* so nothing here can leak
   into the sections around it. Colors reuse the site's own gold family
   (base.html --gold #c9a227) and the homepage navy family.

   Photographs are laid out at their real ratio (width/height attributes
   plus height:auto) and are never cropped, zoomed or scale-animated.

   Lives in static/ because static/ is volume-mounted in docker-compose,
   a styling change reaches production without rebuilding the image.
   ========================================================================== */

.home-page .pmr-section {
    --pmr-navy:      #0a0a0b;
    --pmr-navy-2:    #161617;
    --pmr-navy-3:    #161617;
    --pmr-card:      rgba(255, 255, 255, 0.16);
    --pmr-gold:      #c9a227;
    --pmr-gold-soft: #e3c05a;
    --pmr-gold-pale: #f3dc8a;
    --pmr-ivory:     #f5f5f7;
    --pmr-muted:     #86868b;
    --pmr-body:      #d2d2d7;
    --pmr-line:      rgba(255, 255, 255, 0.22);
    /* a control's own edge must clear 3:1 (WCAG 1.4.11); card edges stay quiet */
    --pmr-line-ctl:  rgba(255, 255, 255, 0.55);
    --pmr-line-gold: rgba(201, 162, 39, 0.45);
    /* One typeface site-wide. This token stays so every call site
       keeps working, but it now resolves to Inter. */
    --pmr-serif:     var(--font-body, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);
    --pmr-ease:      cubic-bezier(0.22, 0.8, 0.3, 1);

    position: relative;
    padding: 0;
    /* The ground the chapter sits on, same paper as the stats ribbon. */
    background: #fdfbf6;
}

/* The navy chapter itself: edge to edge. The extra bottom padding is the
   room the absolutely-positioned skyline occupies. */
.home-page .pmr-shell {
    position: relative;
    margin-top: 26px;
    padding: clamp(56px, 6vw, 96px) var(--h-gutter) clamp(120px, 11vw, 156px);
    background:
        radial-gradient(120% 70% at 50% -12%, rgba(255, 255, 255, 0.35), transparent 55%),
        radial-gradient(70% 45% at 12% 100%, rgba(20, 20, 25, 0.30), transparent 62%),
        linear-gradient(178deg, var(--pmr-navy) 0%, var(--pmr-navy-2) 48%, var(--pmr-navy-3) 100%);
    color: var(--pmr-ivory);
    overflow: hidden;
}

/* Gold hairline along the top edge. */
.home-page .pmr-shell::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 4%,
        var(--pmr-line-gold) 30%, var(--pmr-gold-soft) 50%,
        var(--pmr-line-gold) 70%, transparent 96%);
}

/* The centred content column, the page's own layout system. */
.home-page .pmr-inner {
    position: relative;
    width: min(var(--h-wrap), 100%);
    margin-inline: auto;
    z-index: 1;
}

/* The script toggles blocks with the hidden attribute; a display rule
   below (grid, flex) must never win over it. */
.home-page .pmr-section [hidden] { display: none !important; }

/* Small letterspaced gold labels used throughout the chapter. */
.home-page .pmr-label {
    display: block;
    margin: 0;
    color: var(--pmr-gold-soft);
    font-family: var(--font-body);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.3em;
    text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   1. The promise: copy on the left, one photograph on the right
   -------------------------------------------------------------------------- */
.home-page .pmr-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: clamp(28px, 4.5vw, 72px);
    align-items: center;
}

.home-page .pmr-logo {
    display: block;
    width: clamp(56px, 5vw, 72px);
    height: auto;
    margin: 0 0 14px;
    filter: drop-shadow(0 8px 22px rgba(201, 162, 39, 0.30));
}

.home-page .pmr-kicker {
    display: block;
    color: var(--pmr-gold-soft);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.42em;
    text-transform: uppercase;
}

/* The headline speaks in the site's own voice, the same Manrope weight
   and tightness as the hero's "You'll never feel alone", the second line
   carrying the gold the way the hero carries its accent. */
.home-page .pmr-title {
    margin: 14px 0 0;
    font-family: var(--font-display);
    /* Ceiling tuned to the 585px column this sits in: Inter sets a little
       wider than the old face, and at 4rem "Skip the homework." broke to a
       third line on a 1440 screen. Two lines is the composition. */
    font-size: clamp(2.3rem, 4.4vw, 3.6rem);
    font-weight: 600;
    line-height: 1.04;
    letter-spacing: -0.035em;
    color: #fff;
}
.home-page .pmr-title em {
    font-style: normal;
    background: linear-gradient(100deg, var(--pmr-gold-pale) 0%, var(--pmr-gold-soft) 60%, var(--pmr-gold) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--pmr-gold-soft);
}

.home-page .pmr-lead {
    max-width: 44ch;
    margin: 18px 0 0;
    color: #f5f5f7;
    font-size: clamp(1rem, 1.15vw, 1.14rem);
    line-height: 1.7;
}

.home-page .pmr-hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 14px;
    margin-top: 26px;
}

/* Three short truths, dotted in gold. */
.home-page .pmr-trust-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 20px;
    margin: 20px 0 0;
    padding: 0;
    list-style: none;
}
.home-page .pmr-trust-row li {
    position: relative;
    padding-left: 14px;
    color: var(--pmr-muted);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    line-height: 1.6;
}
.home-page .pmr-trust-row li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--pmr-gold-soft);
}

/* The photograph, whole, at its own ratio. The caption hangs off the
   frame's bottom edge rather than sitting on the picture. */
.home-page .pmr-hero-photo {
    position: relative;
    margin: 0 0 14px;
}
.home-page .pmr-hero-photo img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    box-shadow:
        0 0 0 1px rgba(201, 162, 39, 0.10),
        0 34px 64px -34px rgba(0, 0, 0, 0.75);
}
.home-page .pmr-hero-tag {
    position: absolute;
    left: 20px;
    bottom: -16px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border: 1px solid var(--pmr-line-gold);
    border-radius: 999px;
    background: rgba(10, 10, 11, 0.92);
    color: var(--pmr-gold-pale);
    font-family: var(--pmr-serif);
    font-style: italic;
    font-size: 0.95rem;
    box-shadow: 0 12px 28px -12px rgba(0, 0, 0, 0.7);
}
.home-page .pmr-hero-tag i {
    color: var(--pmr-gold-soft);
    font-size: 0.72rem;
}

/* --------------------------------------------------------------------------
   Block headers, shared by doors, Buddy and how-it-works
   -------------------------------------------------------------------------- */
.home-page .pmr-block-head {
    max-width: 62ch;
    margin: clamp(52px, 6.5vw, 92px) 0 clamp(18px, 2.4vw, 28px);
}
.home-page .pmr-block-title {
    margin: 10px 0 0;
    font-family: var(--pmr-serif);
    font-size: clamp(1.5rem, 2.4vw, 2.1rem);
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: #f5f5f7;
}
.home-page .pmr-block-sub {
    margin: 8px 0 0;
    color: var(--pmr-muted);
    font-size: 0.95rem;
    line-height: 1.65;
}

/* --------------------------------------------------------------------------
   2. Three doors, each told as a day
   -------------------------------------------------------------------------- */
.home-page .pmr-day-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(14px, 1.8vw, 24px);
}

.home-page .pmr-day {
    position: relative;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--pmr-line);
    border-radius: 18px;
    background: var(--pmr-card);
    /* Depth on navy: an inner top highlight and a long soft drop. */
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 24px 44px -28px rgba(0, 0, 0, 0.65);
    overflow: hidden;
    transition: transform 260ms var(--pmr-ease), border-color 260ms ease;
}
/* the gold hairline that sweeps across the top edge on hover */
.home-page .pmr-day::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--pmr-gold-soft), transparent);
    transform: scaleX(0);
    transform-origin: 50% 50%;
    transition: transform 420ms var(--pmr-ease);
    z-index: 1;
}
.home-page .pmr-day:hover {
    transform: translateY(-4px);
    border-color: var(--pmr-line-gold);
}
.home-page .pmr-day:hover::before { transform: scaleX(1); }

/* the banner photograph, whole (the covers are 16:7) */
.home-page .pmr-day-photo img {
    display: block;
    width: 100%;
    height: auto;
}

.home-page .pmr-day-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 20px 22px 22px;
}
.home-page .pmr-day-title {
    margin: 0;
    font-family: var(--pmr-serif);
    font-size: 1.28rem;
    font-weight: 500;
    color: #f5f5f7;
}
.home-page .pmr-day-story {
    margin: 10px 0 0;
    color: var(--pmr-body);
    font-size: 0.93rem;
    line-height: 1.72;
}
/* the thing you never do again */
.home-page .pmr-day-never {
    margin: 16px 0 0;
    padding-top: 14px;
    border-top: 1px dashed var(--pmr-line);
    color: var(--pmr-gold-pale);
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.5;
}
.home-page .pmr-day-never i {
    margin-right: 6px;
    color: var(--pmr-gold);
    font-size: 0.8rem;
}
/* The door foot: the request first, the sample plan as the quieter read. */
.home-page .pmr-day-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 18px;
    margin-top: auto;
    padding-top: 18px;
}
.home-page .pmr-day-plan {
    color: var(--pmr-muted);
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: var(--pmr-line);
    transition: color 200ms ease, text-decoration-color 200ms ease;
}
.home-page .pmr-day-plan:hover {
    color: var(--pmr-gold-pale);
    text-decoration-color: var(--pmr-line-gold);
}
.home-page .pmr-day-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--pmr-gold-soft);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    transition: color 200ms ease;
}
.home-page .pmr-day-cta i { transition: transform 200ms var(--pmr-ease); }
.home-page .pmr-day-cta:hover { color: var(--pmr-gold-pale); }
.home-page .pmr-day-cta:hover i { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   3. One Premier Buddy, as a person. Real records only.
   -------------------------------------------------------------------------- */
/* Three areas: the portrait spans both rows on wide screens, the name
   sits low in the first row and the words high in the second, so they
   gather around the photo's middle whatever its ratio. */
.home-page .pmr-feature-card {
    display: grid;
    grid-template-columns: minmax(200px, 300px) minmax(0, 1fr);
    grid-template-areas:
        "photo head"
        "photo rest";
    column-gap: clamp(20px, 3vw, 44px);
    row-gap: 0;
    padding: clamp(18px, 2.4vw, 28px);
    border: 1px solid var(--pmr-line);
    border-radius: 20px;
    background: var(--pmr-card);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 24px 44px -28px rgba(0, 0, 0, 0.65);
}
.home-page .pmr-feature-photo { grid-area: photo; align-self: center; }
/* A readable measure, so the words never strand in a wide empty column. */
.home-page .pmr-feature-head  { grid-area: head;  align-self: end;   max-width: 60ch; }
.home-page .pmr-feature-rest  { grid-area: rest;  align-self: start; max-width: 60ch; }
.home-page .pmr-feature-photo img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 14px;
}
/* No photo yet: a monogram crest on a quiet ground, never an invented face. */
.home-page .pmr-feature-photo.is-crest,
.home-page .pmr-person-photo.is-crest {
    display: grid;
    place-items: center;
    border-radius: 14px;
    background:
        radial-gradient(90% 70% at 50% 16%, rgba(227, 192, 90, 0.07), transparent 62%),
        linear-gradient(165deg, var(--pmr-navy-3), var(--pmr-navy-2));
}
.home-page .pmr-feature-photo.is-crest { aspect-ratio: 4 / 5; }
.home-page .pmr-person-photo.is-crest { aspect-ratio: 1 / 1; border-radius: 0; }
.home-page .pmr-person-initial {
    width: 68px;
    height: 68px;
    display: grid;
    place-items: center;
    font-family: var(--pmr-serif);
    font-size: 1.6rem;
    color: var(--pmr-gold-pale);
    border: 1px solid rgba(227, 192, 90, 0.5);
    border-radius: 50%;
    background: radial-gradient(circle at 50% 28%,
        rgba(227, 192, 90, 0.16), rgba(227, 192, 90, 0.03) 72%);
    box-shadow: 0 0 0 6px rgba(227, 192, 90, 0.06);
}

.home-page .pmr-people-badge {
    display: inline-block;
    padding: 4px 10px;
    border: 1px solid var(--pmr-line-gold);
    border-radius: 999px;
    color: var(--pmr-gold-pale);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}
.home-page .pmr-feature-name {
    margin: 12px 0 0;
    font-family: var(--pmr-serif);
    font-size: clamp(1.5rem, 2.2vw, 1.9rem);
    font-weight: 500;
    line-height: 1.15;
    color: #f5f5f7;
}
.home-page .pmr-feature-langs {
    margin: 5px 0 0;
    color: var(--pmr-muted);
    font-size: 0.9rem;
}
/* in their own words */
.home-page .pmr-feature-quote {
    margin: 18px 0 0;
    padding: 2px 0 2px 20px;
    border-left: 2px solid var(--pmr-gold);
}
.home-page .pmr-feature-quote p {
    margin: 0;
    font-family: var(--pmr-serif);
    font-style: italic;
    font-size: 1.08rem;
    line-height: 1.6;
    color: #eee9db;
}
.home-page .pmr-feature-trust,
.home-page .pmr-person-trust {
    color: var(--pmr-muted);
    font-weight: 600;
    letter-spacing: 0.06em;
}
.home-page .pmr-feature-trust {
    margin: 16px 0 0;
    font-size: 0.78rem;
}
.home-page .pmr-feature-trust i,
.home-page .pmr-person-trust i { color: var(--pmr-gold-soft); }
.home-page .pmr-feature-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 22px;
    margin-top: 18px;
}
.home-page .pmr-feature-actions .pmr-day-cta { padding-top: 0; }
.home-page .pmr-feature-note {
    margin: 12px 0 0;
    color: var(--pmr-muted);
    font-size: 0.74rem;
    line-height: 1.5;
}

/* the rest of the group waits behind one quiet button */
.home-page .pmr-people-actions { margin-top: 16px; }
.home-page .pmr-people-more {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 11px 22px;
    border: 1px solid var(--pmr-line-ctl);
    border-radius: 999px;
    background: transparent;
    color: #f5f5f7;
    font-family: inherit;
    font-size: 0.84rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 240ms ease, border-color 240ms ease;
}
.home-page .pmr-people-more:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--pmr-line-gold);
}
.home-page .pmr-people-more i { font-size: 0.7rem; color: var(--pmr-gold-soft); }

.home-page .pmr-people-rail {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 16px;
}
.home-page .pmr-people-rail .pmr-person { flex: 0 1 186px; }
.home-page .pmr-person {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--pmr-line);
    border-radius: 14px;
    background: var(--pmr-card);
    overflow: hidden;
    transition: transform 240ms var(--pmr-ease), border-color 240ms ease;
}
.home-page .pmr-person:hover {
    transform: translateY(-3px);
    border-color: var(--pmr-line-gold);
}
.home-page .pmr-person-photo img {
    display: block;
    width: 100%;
    height: auto;
}
.home-page .pmr-person-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 10px 12px 12px;
}
.home-page .pmr-person-name {
    margin: 0;
    font-family: var(--pmr-serif);
    font-size: 0.98rem;
    font-weight: 500;
    color: #f5f5f7;
}
.home-page .pmr-person-langs {
    margin: 3px 0 0;
    color: var(--pmr-muted);
    font-size: 0.78rem;
}
.home-page .pmr-person-trust {
    margin: 6px 0 0;
    font-size: 0.68rem;
}
.home-page .pmr-person-view {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;
    padding: 12px 0 6px;
    color: var(--pmr-gold-soft);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
}
.home-page .pmr-person-view:hover { color: var(--pmr-gold-pale); }

/* the honest state before any Buddy is marked Premier */
.home-page .pmr-people-empty {
    max-width: 58ch;
    padding: 22px 24px;
    border: 1px dashed var(--pmr-line-gold);
    border-radius: 16px;
}
.home-page .pmr-people-empty-lead {
    margin: 0;
    font-family: var(--pmr-serif);
    font-size: 1.2rem;
    font-weight: 500;
    color: #f5f5f7;
}
.home-page .pmr-people-empty p {
    margin: 8px 0 0;
    color: var(--pmr-muted);
    font-size: 0.9rem;
    line-height: 1.6;
}
.home-page .pmr-people-empty .pmr-day-cta { margin-top: 14px; padding-top: 0; }

/* --------------------------------------------------------------------------
   4. How it works, the honest price line, the one action
   -------------------------------------------------------------------------- */
.home-page .pmr-foot {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
    gap: clamp(24px, 3.4vw, 56px);
    align-items: start;
    margin-top: clamp(52px, 6.5vw, 92px);
}

.home-page .pmr-how-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(14px, 1.8vw, 26px);
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
}
.home-page .pmr-how-list li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}
.home-page .pmr-how-n {
    flex: none;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border: 1px solid var(--pmr-line-gold);
    border-radius: 50%;
    color: var(--pmr-gold-pale);
    font-family: var(--pmr-serif);
    font-size: 1rem;
    background: radial-gradient(circle at 50% 30%,
        rgba(227, 192, 90, 0.18), rgba(227, 192, 90, 0.03) 72%);
}
.home-page .pmr-how-list h4 {
    margin: 6px 0 4px;
    font-family: var(--pmr-serif);
    font-size: 1.02rem;
    font-weight: 500;
    line-height: 1.3;
    color: #f5f5f7;
}
.home-page .pmr-how-list p {
    margin: 0;
    color: var(--pmr-muted);
    font-size: 0.82rem;
    line-height: 1.65;
}

/* the one honest line about money */
.home-page .pmr-price {
    margin: 22px 0 0;
    padding: 14px 18px;
    border-left: 2px solid var(--pmr-gold);
    border-radius: 0 12px 12px 0;
    background: rgba(201, 162, 39, 0.06);
    color: var(--pmr-muted);
    font-size: 0.9rem;
    line-height: 1.6;
}
.home-page .pmr-price b {
    color: var(--pmr-gold-pale);
    font-weight: 600;
}

.home-page .pmr-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding-top: 6px;
    text-align: center;
}
.home-page .pmr-cta .pmr-btn-primary { width: 100%; }

.home-page .pmr-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 28px;
    border-radius: 999px;
    background: linear-gradient(120deg, #f1de9c 0%, var(--pmr-gold) 85%);
    color: #161617;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    box-shadow: 0 14px 34px rgba(201, 162, 39, 0.32);
    transition: transform 240ms var(--pmr-ease), box-shadow 240ms ease;
}
.home-page .pmr-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 40px rgba(201, 162, 39, 0.42);
}
.home-page .pmr-btn-compact { padding: 13px 22px; }

.home-page .pmr-btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 12px 24px;
    border: 1px solid var(--pmr-line-ctl);
    border-radius: 999px;
    color: #f5f5f7;
    font-size: 0.86rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 240ms ease, border-color 240ms ease;
}
.home-page .pmr-btn-ghost:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--pmr-line-gold);
}
.home-page .pmr-btn-ghost i { color: var(--pmr-gold-soft); }

/* Every control says where the keyboard is. Pale gold reads on the navy
   ground and on the gold pill alike, so one rule covers the chapter. */
.home-page .pmr-section a:focus-visible,
.home-page .pmr-section button:focus-visible {
    outline: 3px solid var(--pmr-gold-pale);
    outline-offset: 3px;
    border-radius: 4px;
}
.home-page .pmr-btn-primary:focus-visible,
.home-page .pmr-btn-ghost:focus-visible,
.home-page .pmr-people-more:focus-visible { border-radius: 999px; }

.home-page .pmr-trust {
    display: grid;
    gap: 7px;
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
}
.home-page .pmr-trust li {
    color: var(--pmr-muted);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    line-height: 1.6;
}

/* --------------------------------------------------------------------------
   Skyline, brand line art along the base
   -------------------------------------------------------------------------- */
.home-page .pmr-skyline {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 110px;
    color: rgba(200, 210, 240, 0.07);
    pointer-events: none;
}
.home-page .pmr-skyline svg { width: 100%; height: 100%; display: block; }

/* --------------------------------------------------------------------------
   Entrance. Only once the script has added .pmr-js does anything hide, so
   a browser without JavaScript shows the whole chapter standing. The rise
   is an animation with a backwards fill: once it ends the element returns
   to its own styles, and the hover lifts above keep working.
   -------------------------------------------------------------------------- */
.home-page .pmr-js .pmr-reveal { opacity: 0; }
.home-page .pmr-js .pmr-reveal.pmr-in {
    opacity: 1;
    animation: pmr-rise 720ms var(--pmr-ease) backwards;
}
.home-page .pmr-js .pmr-hero-photo.pmr-in { animation-delay: 140ms; }
.home-page .pmr-js .pmr-day.pmr-in:nth-child(2) { animation-delay: 110ms; }
.home-page .pmr-js .pmr-day.pmr-in:nth-child(3) { animation-delay: 220ms; }
.home-page .pmr-js .pmr-cta.pmr-in { animation-delay: 120ms; }

@keyframes pmr-rise {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   Tablet
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
    .home-page .pmr-foot { grid-template-columns: 1fr; }
    .home-page .pmr-cta { width: 100%; max-width: 420px; margin-inline: auto; }
}

@media (max-width: 900px) {
    .home-page .pmr-hero { grid-template-columns: 1fr; gap: 30px; }
    .home-page .pmr-hero-photo { margin-bottom: 18px; }
    .home-page .pmr-day-grid { grid-template-columns: 1fr; }
    .home-page .pmr-feature-card { grid-template-columns: minmax(180px, 250px) minmax(0, 1fr); }
    .home-page .pmr-how-list { grid-template-columns: 1fr; gap: 18px; }
}

/* --------------------------------------------------------------------------
   Phone
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .home-page .pmr-shell { padding: 48px var(--h-gutter) 88px; }
    .home-page .pmr-kicker { letter-spacing: 0.32em; }
    .home-page .pmr-title { font-size: clamp(2rem, 9.4vw, 2.5rem); }
    .home-page .pmr-lead { font-size: 1rem; }
    .home-page .pmr-hero-actions { flex-direction: column; align-items: stretch; }
    .home-page .pmr-hero-actions .pmr-btn-primary,
    .home-page .pmr-hero-actions .pmr-btn-ghost { width: 100%; }
    .home-page .pmr-trust-row { gap: 4px 16px; }
    .home-page .pmr-hero-tag { left: 14px; font-size: 0.88rem; }

    .home-page .pmr-block-head { margin-top: 48px; }
    .home-page .pmr-day-body { padding: 18px 18px 20px; }

    /* the portrait beside the name, the words beneath both */
    .home-page .pmr-feature-card {
        grid-template-columns: minmax(0, 44%) minmax(0, 1fr);
        grid-template-areas:
            "photo head"
            "rest rest";
        column-gap: 14px;
        row-gap: 14px;
        padding: 14px;
    }
    .home-page .pmr-feature-head { align-self: center; }
    .home-page .pmr-feature-name { font-size: 1.3rem; }
    .home-page .pmr-feature-quote { margin-top: 4px; }
    .home-page .pmr-feature-actions .pmr-btn-primary { width: 100%; }

    /* the rest of the group swipes sideways rather than stacking */
    .home-page .pmr-people-rail {
        flex-wrap: nowrap;
        gap: 10px;
        overflow-x: auto;
        padding-bottom: 6px;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }
    .home-page .pmr-people-rail .pmr-person {
        flex: 0 0 min(62vw, 220px);
        scroll-snap-align: start;
    }

    .home-page .pmr-how-list li { gap: 12px; }
    .home-page .pmr-how-n { width: 32px; height: 32px; font-size: 0.9rem; }
}

/* Motion is a whisper here, and silent when asked to be. */
@media (prefers-reduced-motion: reduce) {
    .home-page .pmr-js .pmr-reveal { opacity: 1; }
    .home-page .pmr-js .pmr-reveal.pmr-in { animation: none; }
    .home-page .pmr-day,
    .home-page .pmr-day::before,
    .home-page .pmr-day-cta i,
    .home-page .pmr-person,
    .home-page .pmr-btn-primary,
    .home-page .pmr-btn-ghost,
    .home-page .pmr-people-more { transition: none; }
    .home-page .pmr-day:hover,
    .home-page .pmr-person:hover,
    .home-page .pmr-btn-primary:hover { transform: none; }
    .home-page .pmr-day-cta:hover i { transform: none; }
}