/* ============================================================================
   INTEGRATING SELF — site stylesheet
   One file for the whole site: marketing pages (home, about, approach,
   sessions, packages, faq, policies) AND the booking / bundle / reschedule
   flows. Design comes from the Basic-website template (Playfair Display +
   DM Sans, paper/blue palette, wave dividers); the interactive components
   (booking card, calendar, chips, appointment card, etc.) are the working
   app UI, re-themed onto these same tokens so the whole site reads as one
   piece. All design decisions live in the :root token blocks below.
   ============================================================================ */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@400;500;600&display=swap');

:root {
    /* ---- core palette (from the Basic-website design) ---- */
    --ink: #31434b;
    --muted: #5e6c72;
    --paper: #fbfaf6;
    --white: #fff;
    --mist: #edf3ef;
    --blue: #5d8794;
    --blue-dark: #446c78;
    --line: #d9e2de;
    --yellow: #fff5cf;
    --footer: #35475a;
    --container: 1240px;
    --radius: 18px;
}

:root {
    /* ---- app-component tokens, mapped onto the palette above ---- */
    --surface: var(--white);
    --ink-soft: var(--muted);
    --brand: var(--blue);
    --brand-deep: var(--blue-dark);
    --brand-wash: var(--mist);
    --seal: #c9a24b;
    --seal-wash: var(--yellow);
    --warn: #8a5a2b;
    --warn-wash: var(--yellow);
    --radius-sm: 10px;
    --maxw: 560px;
    --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
    --font-body: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --shadow: 0 1px 2px rgba(49, 67, 75, .05), 0 14px 34px -14px rgba(49, 67, 75, .16);
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 18px;
    line-height: 1.65;
}

img {
    display: block;
    max-width: 100%;
}

a {
    color: inherit;
}

strong {
    font-weight: 600;
}

.container {
    width: min(calc(100% - 48px), var(--container));
    margin-inline: auto;
}

.section {
    padding: clamp(40px, 5vw, 64px) 0;
}

/* closing CTA sections with just a button or two — much less top/bottom air
   than a normal section, now that the lede line above them is gone */
.cta-slim {
    padding: clamp(18px, 2.4vw, 28px) 0;
}

.section--white {
    background: var(--white);
}

.section--soft {
    background: var(--mist);
}

/* ============================================================================
   SITE HEADER / NAV — shared by every page (marketing + app)
   ============================================================================ */
.site-header {
    position: sticky;
    z-index: 5;
    top: 0;
    border-bottom: 1px solid rgba(217, 226, 222, .8);
    background: rgba(251, 250, 246, .94);
    backdrop-filter: blur(10px);
}

.nav {
    min-height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.brand,
h1,
h2,
h3 {
    font-family: var(--font-display);
    font-weight: 500;
}

.brand {
    font-size: 1.55rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 18px 25px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.nav-links a {
    font-size: 1rem;
    text-decoration: none;
}

.nav-links a:hover {
    color: var(--blue-dark);
}

.nav-links a.active {
    color: var(--blue-dark);
    font-weight: 600;
}

.nav-cta,
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--blue);
    border-radius: 999px;
    text-decoration: none;
    transition: .2s ease;
}

.nav-cta {
    padding: 9px 17px;
    color: var(--blue);
}

.menu-toggle {
    display: none;
    border: 0;
    background: transparent;
    font-size: 1.6rem;
    cursor: pointer;
}

/* the DEMO badge that sits beside the brand mark on the app pages */
.demoflag {
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .1em;
    color: var(--seal);
    border: 1px solid var(--seal);
    border-radius: 999px;
    padding: 2px 7px;
    vertical-align: middle;
}

h1,
h2,
h3 {
    color: var(--ink);
    line-height: 1.13;
    margin: 0 0 20px;
}

h1 {
    font-size: clamp(3.2rem, 7vw, 6.1rem);
    letter-spacing: -.045em;
}

h2 {
    font-size: clamp(2.5rem, 5vw, 4.3rem);
    letter-spacing: -.035em;
}

h3 {
    font-size: 1.75rem;
}

p {
    margin: 0 0 18px;
}

.lede {
    max-width: 760px;
    color: var(--muted);
    font-size: clamp(1.2rem, 1.8vw, 1.45rem);
}

.eyebrow {
    margin: 0 0 12px;
    color: var(--blue-dark);
    font-size: .87rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.btn {
    min-height: 55px;
    padding: 13px 34px;
    font-size: 1.05rem;
}

.btn:hover {
    transform: translateY(-2px);
}

.btn--primary {
    color: #fff;
    background: var(--blue);
}

.btn--primary:hover {
    background: var(--blue-dark);
}

.btn--light {
    color: var(--blue-dark);
    background: #fff;
}

.actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 13px;
    margin-top: 30px;
}

.actions .btn {
    min-width: 248px;
}

/* two CTAs side by side on desktop, stacked on mobile (see media query below) */
.actions--row {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}

/* ============================================================================
   HERO / MARKETING LAYOUT
   ============================================================================ */
.hero {
    overflow: hidden;
    padding: clamp(36px, 5vw, 64px) 0;
    background: linear-gradient(115deg, #fbfaf6 40%, #eff4f1);
}

.hero-grid,
.split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: clamp(45px, 8vw, 100px);
}

.hero-media {
    position: relative;
    min-height: 560px;
}

.hero-main,
.hero-frame img,
.split-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius);
}

.hero-main {
    height: 560px;
    box-shadow: 0 16px 44px rgba(47, 68, 73, .12);
}

.hero-frame {
    position: absolute;
    width: 61%;
    right: -5%;
    bottom: -6%;
    padding: 10px;
    background: var(--paper);
    border-radius: var(--radius);
    box-shadow: 0 14px 34px rgba(47, 68, 73, .13);
}

.hero-frame img {
    aspect-ratio: 1/.78;
}

.split-media img {
    min-height: 520px;
}

.copy p {
    color: var(--muted);
    font-size: 1.08rem;
}

.split.reverse .split-media {
    order: 2;
}

.wave {
    height: 46px;
    margin-bottom: -1px;
    background-position: center bottom;
    background-repeat: repeat-x;
    background-size: auto 46px;
}

.wave-1 {
    background-image: url('/images/Wave_01.png');
}

.wave-2 {
    background-image: url('/images/Wave_02.png');
    transform: rotate(180deg);
}

.wave-3 {
    background-image: url('/images/Wave_03-02.png');
}

.center {
    text-align: center;
}

.center .lede {
    margin-inline: auto;
}

.cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 48px;
    text-align: left;
}

/* .svc-card — the clickable "ways to work together" tiles on the home page.
   (Named apart from the app's own .card, which is the booking-flow panel.) */
.svc-card {
    display: block;
    padding: 30px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    text-decoration: none;
    transition: transform .2s, box-shadow .2s;
}

.svc-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 14px 32px rgba(45, 65, 70, .12);
}

.svc-card-top {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: start;
}

.svc-card h3 {
    margin: 0;
    font-size: 1.65rem;
}

.svc-price {
    color: var(--blue-dark);
    font-size: 1.1rem;
    font-weight: 700;
    white-space: nowrap;
}

.svc-duration {
    margin: 16px 0 18px;
    color: var(--blue-dark);
    font-size: 1rem;
}

.svc-card p {
    color: var(--muted);
    margin: 0;
}

.page-hero {
    padding: 40px 0 34px;
    text-align: center;
    background: var(--mist);
}

.page-hero .lede {
    margin-inline: auto;
}

.page-hero h1 {
    margin-bottom: 0;
}

.service {
    padding-block: clamp(70px, 9vw, 110px);
    border-bottom: 1px solid var(--line);
}

.service:last-child {
    border-bottom: 0;
}

.service-details {
    display: flex;
    gap: 18px;
    margin: 24px 0;
    font-size: 1.04rem;
    color: var(--blue-dark);
    font-weight: 600;
    flex-wrap: wrap;
}

.safety-note {
    width: min(calc(100% - 48px), var(--container));
    margin: 0 auto 42px;
    padding: 20px 24px;
    background: var(--yellow);
    border: 1px solid #eadba5;
    border-radius: 12px;
    color: #65501d;
    font-size: 1rem;
}

.safety-note strong {
    color: #523f10;
}

.faq-section {
    max-width: 920px;
    margin: 0 auto 58px;
}

.faq-section h2 {
    font-size: 2.45rem;
    margin-bottom: 18px;
}

.faq-item {
    border-top: 1px solid var(--line);
}

.faq-item:last-child {
    border-bottom: 1px solid var(--line);
}

.faq-question {
    width: 100%;
    padding: 21px 0;
    background: transparent;
    border: 0;
    display: flex;
    justify-content: space-between;
    gap: 24px;
    text-align: left;
    color: var(--ink);
    cursor: pointer;
    font-size: 1.16rem;
    font-weight: 600;
    font-family: inherit;
}

.faq-answer {
    display: none;
    padding: 0 42px 22px 0;
    color: var(--muted);
}

.faq-answer a {
    color: var(--blue-dark);
    text-decoration: underline;
}

.faq-answer a:hover {
    color: var(--blue);
}

.faq-item.is-open .faq-answer {
    display: block;
}

.faq-icon {
    color: var(--blue);
    font-size: 1.5rem;
}

.form {
    display: grid;
    gap: 18px;
}

.field {
    display: grid;
    gap: 7px;
}

.field input,
.field textarea {
    width: 100%;
    padding: 14px;
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: 10px;
    font: inherit;
}

.field textarea {
    min-height: 150px;
    resize: vertical;
}

.site-footer {
    padding: 64px 0 28px;
    background: var(--footer);
    color: #fff;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.25fr .8fr 1.2fr;
    gap: 48px;
    padding-bottom: 42px;
}

.site-footer h3,
.site-footer p,
.site-footer a {
    color: #fff;
}

.site-footer h3 {
    font-size: 1.65rem;
}

.site-footer a {
    text-decoration: none;
}

.footer-links {
    display: grid;
    gap: 9px;
}

.newsletter {
    display: flex;
    margin-top: 16px;
}

.newsletter input {
    min-width: 0;
    flex: 1;
    border: 1px solid rgba(255, 255, 255, .55);
    border-right: 0;
    border-radius: 999px 0 0 999px;
    padding: 11px 14px;
    color: var(--ink);
    font: inherit;
}

.newsletter button {
    border: 1px solid #fff;
    border-radius: 0 999px 999px 0;
    padding: 10px 18px;
    background: #fff;
    color: var(--footer);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.newsletter button:disabled {
    opacity: .6;
    cursor: default;
}

.newsletter-msg {
    margin: 12px 0 0;
    font-weight: 600;
}

.newsletter-msg:empty {
    display: none;
}

.newsletter-msg.is-error {
    color: #ffd7d2;
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, .2);
    color: rgba(255, 255, 255, .75);
    font-size: .9rem;
}

.privacy-policy {
    max-width: 800px;
    margin: 0 auto;
    text-align: left;
}

.privacy-policy h4 {
    text-align: left;
    margin-bottom: 5px;
    margin-top: 30px;
    padding: 0 30px;
    line-height: 1.13;
    /* so a deep link (e.g. #packages-terms) doesn't land under the sticky header */
    scroll-margin-top: 80px;
}

.privacy-policy p {
    text-align: left;
    padding: 0 30px;
    line-height: 1.13;
}

@media (max-width:800px) {
    body {
        font-size: 17px;
    }

    .container,
    .safety-note {
        width: min(calc(100% - 30px), var(--container));
    }

    .nav {
        min-height: 68px;
    }

    .menu-toggle {
        display: block;
    }

    .nav-links {
        display: none;
        position: absolute;
        left: 15px;
        right: 15px;
        top: 68px;
        padding: 14px;
        flex-direction: column;
        align-items: stretch;
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 14px;
        box-shadow: 0 12px 30px rgba(45, 65, 70, .12);
    }

    .nav-links.is-open {
        display: flex;
    }

    .nav-links a {
        padding: 8px;
    }

    .hero-grid,
    .split {
        grid-template-columns: 1fr;
    }

    .split.reverse .split-media {
        order: initial;
    }

    .hero-media {
        min-height: 430px;
    }

    .hero-main {
        height: 430px;
    }

    .cards {
        grid-template-columns: 1fr;
    }

    .actions {
        align-items: stretch;
    }

    .actions--row {
        flex-direction: column;
    }

    .actions .btn,
    .copy .btn {
        width: 100%;
        min-width: 0;
    }

    .split-media img {
        min-height: 360px;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .footer-bottom {
        flex-direction: column;
    }
}

@media (max-width: 600px) {
    .privacy-policy {
        padding-left: 20px;
        padding-right: 20px;
    }
}

/* ============================================================================
   APP UI — booking / bundle / reschedule flows. Scoped under .wrap so these
   compact, form-dense defaults never bleed onto the marketing pages, which
   keep the bigger editorial type above.
   ============================================================================ */
.wrap {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 22px 20px 48px;
}

.wrap .card {
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}

/* Wider desktop layout: the .wrap itself grows, and any step that opts into
   .card--wide (choosing a session/bundle, and the calendar/time-picking step)
   is allowed to use the full width instead of being capped like the simple
   one-column form steps. */
@media (min-width: 768px) {
    .wrap {
        max-width: 720px;
    }

    .wrap .card.card--wide {
        max-width: none;
    }
}

/* The deposit-email form sits below the (now wide) bundle grid on the
   packages page — keep it a normal form width instead of stretching its
   inputs and button across the whole wide card, and center it (its
   separator line included, since the border is drawn on this same box)
   under the wide grid instead of sitting flush left. */
.bundle-form {
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 1100px) {
    .wrap {
        max-width: 960px;
    }
}

/* Calendar + time list: stacked (time list under the calendar) on narrow
   screens, side-by-side on desktop so both are visible together instead of
   forcing a long scroll. */
.cal-times-grid {
    display: block;
}

.cal-times-grid>div {
    /* Without this, a CSS grid item's default min-width:auto lets its content's
       intrinsic min size override the minmax() track size below, so the
       calendar can render wider than its column and spill into the time list
       next to it. min-width:0 forces it to actually respect the track. */
    min-width: 0;
}

@media (min-width: 860px) {
    .cal-times-grid {
        display: grid;
        grid-template-columns: minmax(260px, 360px) 1fr;
        gap: 8px 28px;
        align-items: start;
    }

    .cal-times-grid .daylabel {
        margin-top: 0;
    }
}

/* :where(.wrap) keeps these scoped to the app pages without raising their
   specificity above the original bare-element selector — otherwise these
   resets would outrank single-class component rules like .chip, .cal-day,
   .code-in, .apptcard-session, etc. and silently override their padding,
   font-size and margin. */
:where(.wrap) h1,
:where(.wrap) h2 {
    font-family: var(--font-display);
    font-weight: 500;
    letter-spacing: -.01em;
    color: var(--ink);
}

:where(.wrap) h1 {
    font-size: 28px;
    margin: .1em 0;
}

:where(.wrap) h2 {
    font-size: 21px;
    line-height: 1.25;
    margin: 0 0 10px;
}

:where(.wrap) p {
    margin: 0 0 2px;
}

:where(.wrap) a {
    color: var(--brand);
}

.sub {
    color: var(--ink-soft);
    margin: 2px 0 12px;
    font-size: 15.5px;
}

.muted {
    color: var(--ink-soft);
    font-size: 13.5px;
}

/* ---- step thread ---- */
.stepbar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-bottom: 12px;
}

.stepseg {
    position: relative;
    padding-top: 12px;
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-soft);
    font-weight: 500;
}

.stepseg::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    border-radius: 3px;
    background: var(--line);
    transition: background .2s;
}

.stepseg.done {
    color: var(--brand);
}

.stepseg.done::before {
    background: var(--brand-wash);
}

.stepseg.now {
    color: var(--ink);
}

.stepseg.now::before {
    background: var(--brand);
}

/* ---- card ---- */
.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 20px 20px;
    margin-bottom: 12px;
    animation: rise .34s cubic-bezier(.2, .7, .3, 1) both;
}

@keyframes rise {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* ---- forms ---- */
:where(.wrap) label {
    display: block;
    font-size: 13px;
    color: var(--ink-soft);
    margin: 14px 0 5px;
    font-weight: 500;
}

:where(.wrap) input[type=text],
:where(.wrap) input[type=email],
:where(.wrap) input[type=tel],
:where(.wrap) select {
    width: 100%;
    padding: 13px 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    font: inherit;
    font-size: 15.5px;
    background: #fff;
    color: var(--ink);
    transition: border-color .15s, box-shadow .15s;
}

:where(.wrap) input::placeholder {
    color: #9aa49c;
}

:where(.wrap) input:focus,
:where(.wrap) select:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-wash);
}

:where(.wrap) button:focus-visible,
:where(.wrap) a:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

/* ---- buttons ---- */
:where(.wrap) button {
    font: inherit;
    font-weight: 500;
    cursor: pointer;
    border: none;
    border-radius: var(--radius-sm);
    padding: 13px 18px;
    transition: background .15s, transform .05s, border-color .15s;
}

:where(.wrap) button:active {
    transform: translateY(1px);
}

.btn-primary {
    background: var(--brand);
    color: #fff;
    font-weight: 600;
    width: 100%;
    font-size: 15.5px;
    letter-spacing: .01em;
}

.btn-primary:hover {
    background: var(--brand-deep);
}

.btn-primary:disabled {
    opacity: .4;
    cursor: not-allowed;
    background: var(--brand);
}

.btn-ghost {
    background: transparent;
    color: var(--brand);
    padding: 8px 6px;
    font-weight: 500;
}

.btn-ghost:hover {
    color: var(--brand-deep);
}

.backlink {
    display: inline-block;
    margin-bottom: 10px;
}

/* session-type rows */
.btn-block {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    text-align: left;
    background: var(--surface);
    border: 1px solid var(--line);
    padding: 16px 18px;
    margin-bottom: 10px;
    border-radius: var(--radius-sm);
}

.btn-block:hover {
    border-color: var(--brand);
    background: var(--brand-wash);
}

.btn-block .t {
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 500;
    color: var(--ink);
}

.btn-block .d {
    font-size: 13.5px;
    color: var(--ink-soft);
    margin-top: 1px;
}

/* name and its detail (duration/credits) stay on one line — the "—" separator
   (see the booking/packages templates) is what keeps them from touching, so
   nothing here forces a line break the way an earlier version of this rule did. */
.btn-block > span > .d {
    margin-top: 0;
}

/* one bundle-credit-type's own box on the packages page — holds a heading
   plus that type's bundles, so "cr60" and "cr80" (or whatever types the db
   has) read as separate boxes instead of one flat, interleaved list. */
.bundle-group {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 16px;
}

.bundle-group .btn-block:last-child {
    margin-bottom: 0;
}

.bundle-type-label {
    margin: 0 0 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--line);
    color: var(--ink-soft);
    font-family: var(--font-body);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* Session / bundle picker (booking's "choose a session", packages' "choose a
   bundle", where each grid item is a .bundle-group box): one column,
   full-width rows on mobile — unchanged. From ~700px the (now wide) card has
   room to spare, so it becomes a multi-column grid instead of one long
   vertical list; auto-fit expands items to fill the row rather than leaving
   an empty track when there are fewer groups/types than columns would fit. */
@media (min-width: 700px) {
    .pick-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 14px;
        align-items: stretch;
    }

    .pick-grid > .btn-block {
        margin-bottom: 0;
        height: 100%;
    }

    .pick-grid > .bundle-group {
        height: 100%;
    }
}

/* ---- time slots ---- */
.daylabel {
    font-size: 11.5px;
    color: var(--ink-soft);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 600;
    margin: 14px 0 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--line);
}

.slotgrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
    gap: 8px;
}

.chip {
    border: 1px solid var(--line);
    background: #fff;
    border-radius: var(--radius-sm);
    padding: 11px 10px;
    font-size: 14.5px;
    font-weight: 500;
    color: var(--ink);
    text-align: center;
}

.chip:hover {
    border-color: var(--brand);
    background: var(--brand-wash);
    color: var(--brand-deep);
}

.chip[aria-pressed=true],
.chip.sel {
    background: var(--brand);
    color: #fff;
    border-color: var(--brand);
    font-weight: 600;
}

.row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.slot-hint {
    margin-top: 12px;
}

/* ---- calendar (day picker) ---- */
.cal {
    margin-top: 6px;
}

.cal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.cal-title {
    font-family: var(--font-display);
    font-size: 16.5px;
    font-weight: 500;
}

.cal-nav {
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 9px;
    width: 34px;
    height: 34px;
    padding: 0;
    color: var(--ink);
    font-size: 18px;
    line-height: 1;
}

.cal-nav:hover:not(:disabled) {
    border-color: var(--brand);
    color: var(--brand);
    background: var(--brand-wash);
}

.cal-nav:disabled {
    opacity: .3;
    cursor: not-allowed;
}

.cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
}

.cal-dow {
    margin-bottom: 8px;
}

.cal-dow>div {
    text-align: center;
    font-size: 10.5px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-soft);
    font-weight: 600;
}

.cal-day {
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    border-radius: 10px;
    border: 1px solid transparent;
    background: transparent;
    padding: 0;
    font-size: 14.5px;
    color: var(--ink-soft);
}

.cal-day.empty {
    visibility: hidden;
}

.cal-day.off {
    color: #b9c2b6;
    cursor: default;
}

.cal-day.available {
    color: var(--ink);
    border-color: var(--line);
    background: #fff;
    font-weight: 500;
    cursor: pointer;
}

.cal-day.available:hover {
    border-color: var(--brand);
    background: var(--brand-wash);
    color: var(--brand-deep);
}

.cal-day.available::after {
    content: "";
    position: absolute;
    bottom: 6px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--brand);
}

.cal-day.sel {
    background: var(--brand);
    color: #fff;
    border-color: var(--brand);
    font-weight: 600;
}

.cal-day.sel::after {
    background: #fff;
}

/* ---- bundle select ---- */
.btn-block.sel {
    border-color: var(--brand);
    background: var(--brand-wash);
}

.btn-block.sel .t {
    color: var(--brand-deep);
}

/* ---- code input ---- */
.code-in {
    letter-spacing: 10px;
    font-size: 24px;
    text-align: center;
    font-family: var(--font-body);
    font-weight: 600;
}

/* ---- pills / notes ---- */
.pill {
    display: inline-block;
    background: var(--brand-wash);
    color: var(--brand-deep);
    border-radius: 999px;
    padding: 4px 11px;
    font-size: 13px;
    font-weight: 600;
    margin: 2px 8px 2px 0;
}

.note {
    background: var(--warn-wash);
    color: var(--warn);
    border-radius: var(--radius-sm);
    padding: 13px 14px;
    font-size: 14px;
}

.ok {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--brand-wash);
    color: var(--brand-deep);
    border-radius: 999px;
    padding: 6px 13px;
    font-size: 13.5px;
    font-weight: 600;
}

.err {
    color: var(--warn);
    font-size: 13px;
    margin-top: 8px;
    min-height: 1em;
}

/* ---- bundle history ---- */
:where(.wrap) details {
    border-top: 1px solid var(--line);
    margin-top: 14px;
    padding-top: 12px;
}

:where(.wrap) summary {
    cursor: pointer;
    font-size: 14px;
    color: var(--brand);
    font-weight: 500;
}

.hist {
    font-size: 13px;
    color: var(--ink-soft);
    margin-top: 10px;
    padding-left: 18px;
}

.hist li {
    margin: 5px 0;
}

/* ---- consent ---- */
.consent {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    margin: 6px 0;
    font-size: 14.5px;
    color: var(--ink);
}

.consent input {
    margin-top: 4px;
    width: 17px;
    height: 17px;
    accent-color: var(--brand);
    flex: none;
}

/* ---- forget / demo ---- */
.forget {
    font-size: 12.5px;
    color: var(--ink-soft);
    margin-top: 10px;
}

.forget a {
    color: var(--brand);
    cursor: pointer;
}

.emailpreview {
    border: 1px dashed var(--line);
    border-radius: var(--radius-sm);
    margin-top: 12px;
    overflow: hidden;
}

.emailpreview .h {
    font-size: 12px;
    color: var(--ink-soft);
    padding: 9px 12px;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
}

.emailpreview .b {
    padding: 12px;
    font-size: 14px;
}

.spinner {
    color: var(--ink-soft);
    font-size: 14px;
    padding: 10px 0;
}

/* ============================================================================
   SIGNATURE — the appointment card (confirmation screen)
   ============================================================================ */
.apptcard {
    position: relative;
    padding-top: 30px;
    text-align: center;
}

.apptcard::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: linear-gradient(90deg, var(--brand), var(--seal));
    border-radius: var(--radius) var(--radius) 0 0;
}

.apptcard-brand {
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--brand);
}

.apptcard-rule {
    width: 34px;
    height: 2px;
    background: var(--seal);
    border-radius: 2px;
    margin: 14px auto 18px;
}

.apptcard-check {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--brand-deep);
    background: var(--brand-wash);
    border-radius: 999px;
    padding: 6px 14px;
}

.apptcard-session {
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 500;
    margin: 18px 0 4px;
}

.apptcard-when {
    font-size: 16px;
    color: var(--ink);
    margin-bottom: 16px;
}

.apptcard-note {
    color: var(--ink-soft);
    font-size: 14.5px;
    max-width: 40ch;
    margin: 0 auto;
}

.apptcard .forget,
.apptcard details,
.apptcard h2:not(.apptcard-session) {
    text-align: left;
}

/* Online / in-person filter + slot badges */
.modeseg {
    display: inline-flex;
    gap: 4px;
    margin: 0 0 12px;
}

.modeseg button {
    border: 1px solid var(--line);
    background: #fff;
    color: var(--ink);
    padding: 6px 12px;
    font-size: 13px;
    border-radius: 6px;
    cursor: pointer;
}

.modeseg button.on {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}

/* Slot mode colour coding: online = light blue, in person = light green. `.sel`
   (selected) keeps the brand fill via :not(.sel). */
.chip.online:not(.sel) {
    background: #eaf2fb;
    border-color: #cfe0f4;
}

.chip.in_person:not(.sel) {
    background: #eaf6ec;
    border-color: #cfe8d5;
}

.chip.online:not(.sel):hover,
.chip.in_person:not(.sel):hover {
    border-color: var(--brand);
}

.slotlegend {
    display: flex;
    gap: 16px;
    margin: 8px 0 2px;
    font-size: 12px;
    color: var(--ink-soft);
}

.slotlegend .key {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.slotlegend .key i {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    display: inline-block;
    border: 1px solid rgba(0, 0, 0, .08);
}

.slotlegend .key.online i {
    background: #eaf2fb;
}

.slotlegend .key.in_person i {
    background: #eaf6ec;
}

/* ---- consent row with a "View" opener (booking / reschedule) ---- */
.consent-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 4px;
}

.consent-row .consent {
    flex: 1;
    margin: 0;
}

.consent-view {
    flex: 0 0 auto;
    background: transparent;
    color: var(--brand);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 2px 9px;
    font-size: 11px;
    font-weight: 600;
    margin-top: 1px;
}

.consent-view:hover {
    border-color: var(--brand);
    background: var(--brand-wash);
    color: var(--brand-deep);
}

/* ---- policy modal ---- */
.pmodal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(32, 40, 43, .44);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 1000;
}

.pmodal {
    background: var(--surface, #fff);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    width: min(680px, 100%);
    max-height: min(80vh, 720px);
    display: flex;
    flex-direction: column;
    box-shadow: 0 18px 50px rgba(32, 40, 43, .28);
}

.pmodal-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--line);
}

.pmodal-head h3 {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 17px;
    color: var(--ink);
    flex: 1;
}

.pmodal-ver {
    font-size: 12px;
    color: var(--ink-soft);
}

.pmodal-x {
    flex: 0 0 auto;
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 8px;
    width: 32px;
    height: 32px;
    padding: 0;
    font-size: 18px;
    line-height: 1;
    color: var(--ink);
}

.pmodal-x:hover {
    background: var(--brand-wash);
    border-color: var(--brand);
    color: var(--brand-deep);
}

.pmodal-body {
    padding: 18px;
    overflow-y: auto;
    font-size: 14px;
    line-height: 1.6;
    color: var(--ink);
}

.pmodal-body .pol-h {
    margin: 16px 0 6px;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--ink);
}

.pmodal-body .pol-h:first-child {
    margin-top: 0;
}

.pmodal-body .pol-p {
    margin: 0 0 9px;
}

.pmodal-body .pol-li {
    margin: 2px 0 2px 14px;
}

.pmodal-foot {
    padding: 12px 18px;
    border-top: 1px solid var(--line);
    text-align: right;
}

/* ---- selected time splits into [ time | Confirm ] ---- */
.slot-split {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr auto;
    border: 1px solid var(--brand);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.slot-split-time {
    background: var(--brand-wash);
    color: var(--brand-deep);
    font-weight: 600;
    padding: 11px 14px;
    border: none;
    border-radius: 0;
    text-align: center;
}

.slot-split-time:hover {
    background: #d7e8dd;
}

.slot-split-go {
    background: var(--brand);
    color: #fff;
    font-weight: 600;
    border: none;
    border-radius: 0;
    padding: 11px 20px;
}

.slot-split-go:hover {
    background: var(--brand-deep);
}

/* ---- busy buttons (see withBusy in /lib/format.js) ---- */
button.is-busy,
button.is-busy:disabled {
    opacity: .85;
    cursor: progress;
}
button.is-busy::after {
    content: "";
    display: inline-block;
    flex: 0 0 auto;
    width: .95em;
    height: .95em;
    margin-left: .55em;
    vertical-align: -0.15em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: btn-spin .7s linear infinite;
}
@keyframes btn-spin {
    to { transform: rotate(360deg); }
}

/* ---- motion / a11y ---- */
@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
    }
}

@media (max-width: 420px) {
    .wrap {
        padding: 20px 14px 56px;
    }

    .card {
        padding: 22px 18px;
    }

    .stepseg {
        font-size: 10px;
        letter-spacing: .05em;
    }
}

/* ============================================================================
   HOME HERO — full-bleed colour image as the first screen, transparent nav on
   top of it, portrait centred. (Scoped to body.home so other pages keep the
   normal sticky header.)
   ============================================================================ */
.home-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 100vh;
    min-height: 100svh;              /* exactly the first view on load */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 84px 0 56px;            /* clears the floating nav */
    text-align: center;
    background: #e8503a;             /* shown only until the image loads */
}

/* Fills the viewport: on phones it crops the sides to the screen size, on wide
   screens it scales up to the full width and the vertical crop is biased so the
   top is trimmed more than the bottom. */
.home-hero-bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 72%;
    max-width: none;
}

.home-hero-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.home-hero-portrait {
    width: min(500px, 70vw, 54vh);
}

/* ---- PORTRAIT FADE CONTROLS ------------------------------------------------
   Everything is a percentage of the photo's own width/height. 0% = no fade
   there (crisp), bigger = softer / further in. Tweak these values only.

   Edges   (each edge fades on its own):
     --fade-top / --fade-right / --fade-bottom / --fade-left
   Corners (EXTRA rounded fade layered on top of the edges, one per corner —
            raise one to melt just that corner away; leave 0% for none):
     --fade-tl (top-left)  --fade-tr (top-right)
     --fade-bl (bottom-left) --fade-br (bottom-right)
   ------------------------------------------------------------------------ */
.home-hero-portrait img {
    --fade-top: 16%;
    --fade-right: 16%;
    --fade-bottom: 5%;
    --fade-left: 16%;

    --fade-tl: 40%;
    --fade-tr: 40%;
    --fade-bl: 10%;
    --fade-br: 10%;

    width: 100%;
    aspect-ratio: 1 / .82;
    object-fit: cover;
    object-position: 50% 30%;

    -webkit-mask-image:
        linear-gradient(to bottom, transparent, #000 var(--fade-top)),
        linear-gradient(to left, transparent, #000 var(--fade-right)),
        linear-gradient(to top, transparent, #000 var(--fade-bottom)),
        linear-gradient(to right, transparent, #000 var(--fade-left)),
        radial-gradient(ellipse 100% 100% at 0 0, transparent, #000 var(--fade-tl)),
        radial-gradient(ellipse 100% 100% at 100% 0, transparent, #000 var(--fade-tr)),
        radial-gradient(ellipse 100% 100% at 0 100%, transparent, #000 var(--fade-bl)),
        radial-gradient(ellipse 100% 100% at 100% 100%, transparent, #000 var(--fade-br));
    -webkit-mask-composite: source-in, source-in, source-in, source-in, source-in, source-in, source-in;
    mask-image:
        linear-gradient(to bottom, transparent, #000 var(--fade-top)),
        linear-gradient(to left, transparent, #000 var(--fade-right)),
        linear-gradient(to top, transparent, #000 var(--fade-bottom)),
        linear-gradient(to right, transparent, #000 var(--fade-left)),
        radial-gradient(ellipse 100% 100% at 0 0, transparent, #000 var(--fade-tl)),
        radial-gradient(ellipse 100% 100% at 100% 0, transparent, #000 var(--fade-tr)),
        radial-gradient(ellipse 100% 100% at 0 100%, transparent, #000 var(--fade-bl)),
        radial-gradient(ellipse 100% 100% at 100% 100%, transparent, #000 var(--fade-br));
    mask-composite: intersect;
}

.home-hero h1 {
    color: #fff;
    max-width: 16ch;
    margin: 28px 0 0;
    font-size: clamp(2.1rem, 4.6vw, 3.6rem);
    letter-spacing: -.03em;
    text-shadow: 0 2px 22px rgba(60, 20, 30, .45);
}

.home-hero .actions {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin-top: 24px;
}

/* ---- transparent nav over the hero; solid again after scrolling ---- */
body.home .site-header {
    position: fixed;
    left: 0;
    right: 0;
    background: transparent;
    border-bottom-color: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transition: background .25s ease, border-color .25s ease;
}

body.home .site-header:not(.is-scrolled) .brand,
body.home .site-header:not(.is-scrolled) .menu-toggle,
body.home .site-header:not(.is-scrolled) .nav-links a {
    color: #fff;
    text-shadow: 0 1px 14px rgba(60, 20, 30, .45);
}

body.home .site-header:not(.is-scrolled) .nav-cta {
    border-color: rgba(255, 255, 255, .85);
    background: rgba(255, 255, 255, .12);
}

body.home .site-header.is-scrolled {
    background: rgba(251, 250, 246, .94);
    border-bottom-color: rgba(217, 226, 222, .8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

@media (max-width: 800px) {
    .home-hero {
        padding: 76px 0 36px;
    }

    .home-hero-portrait {
        width: min(340px, 78vw);
    }

    .home-hero h1 {
        margin-top: 20px;
        font-size: clamp(1.8rem, 8vw, 2.4rem);
    }

    .home-hero .actions {
        margin-top: 18px;
        gap: 10px;
    }

    .home-hero .actions .btn {
        width: auto;
        min-width: 0;
        min-height: 48px;
        padding: 10px 22px;
    }

    /* the opened mobile menu is a white card — keep its links dark */
    body.home .site-header:not(.is-scrolled) .nav-links a {
        color: var(--ink);
        text-shadow: none;
    }

    body.home .site-header:not(.is-scrolled) .nav-links .nav-cta {
        color: var(--blue);
        border-color: var(--blue);
        background: transparent;
    }
}

/* ============================================================================
   HOME — quote / explanation sections (between "Is this for you?" and
   "Ways to work together")
   ============================================================================ */
/* colour-image band with a soft dark wash so the white text stays readable */
.quote-band {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(64px, 9vw, 120px) 0;
    text-align: center;
    color: #fff;
    background: #5a2f6b;
}

.quote-band::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(38, 20, 58, .62), rgba(38, 20, 58, .48));
}

.quote-band-bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: 50% 85%;
}

.quote-band-inner {
    max-width: 820px;
}

.quote-band p {
    margin-inline: auto;
    max-width: 34em;
    font-size: clamp(1.05rem, 1.6vw, 1.25rem);
    text-shadow: 0 1px 18px rgba(30, 10, 40, .4);
}

.quote-big {
    margin: 0 0 22px;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(3rem, 9vw, 6rem);
    line-height: 1.05;
    letter-spacing: -.035em;
    text-shadow: 0 2px 26px rgba(30, 10, 40, .45);
}

.quote-band .quote-lead {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 3vw, 2.1rem);
    line-height: 1.25;
}

.quote-band .quote-questions {
    margin-top: 26px;
    margin-bottom: 0;
    font-family: var(--font-display);
    font-style: italic;
    font-size: clamp(1.25rem, 2.4vw, 1.7rem);
    line-height: 1.4;
}

/* "By staying curious…" — statement left, the "Perhaps…" list right */
.curious-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(36px, 7vw, 90px);
    align-items: start;
}

.curious h2 {
    font-size: clamp(1.9rem, 3.6vw, 3rem);
    letter-spacing: -.025em;
}

.curious-foot {
    color: var(--muted);
    font-size: 1.08rem;
}

.curious-foot strong {
    color: var(--ink);
}

.perhaps-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.perhaps-list li {
    padding: 18px 0 18px 22px;
    border-left: 3px solid var(--blue);
    margin-bottom: 14px;
    background: linear-gradient(90deg, var(--mist), rgba(237, 243, 239, 0));
    font-family: var(--font-display);
    font-size: clamp(1.15rem, 1.7vw, 1.4rem);
    line-height: 1.4;
}

.perhaps-list li span {
    display: block;
    margin-bottom: 2px;
    color: var(--blue-dark);
    font-family: var(--font-body);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.perhaps-list li .emo {
    color: var(--seal);
    font-weight: 700;
    font-style: italic;
}

@media (max-width: 800px) {
    .curious-grid {
        grid-template-columns: 1fr;
    }
}

/* "Beyond understanding" — insight vs. lived experience */
.beyond {
    border-top: 1px solid var(--line);
}

.beyond-head {
    max-width: 860px;
    margin: 0 auto clamp(32px, 5vw, 56px);
    text-align: center;
}

.beyond-head h1,
.beyond-head h2 {
    font-size: clamp(1.9rem, 3.6vw, 3rem);
    letter-spacing: -.025em;
}

.beyond-head .lede {
    margin-inline: auto;
}

.beyond-sub {
    color: var(--ink);
    font-family: var(--font-display);
    font-size: clamp(1.2rem, 2vw, 1.5rem);
    line-height: 1.45;
}

/* two boxes: what you say / what you may need */
.beyond-story {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(8px, 1.2vw, 14px);
    max-width: 960px;
    margin: 0 auto;
}

.beyond-label {
    display: inline-block;
    margin-bottom: 16px;
    padding: 3px 12px;
    border-radius: 999px;
    background: var(--white);
    color: var(--blue-dark);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}

/* "A common experience" — open text, no box (matches the "I freeze" block) */
.beyond-say {
    max-width: 860px;
    margin: 0 auto clamp(20px, 3vw, 36px);
    text-align: center;
}

.beyond-say .eyebrow {
    margin-bottom: 14px;
}

.beyond-say-quote {
    margin: 0;
    color: var(--blue-dark);
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 3.4vw, 2.5rem);
    font-style: normal;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -.01em;
}

.beyond-need {
    max-width: 860px;
    margin: clamp(36px, 5vw, 60px) auto 0;
    padding: 0;
    border-radius: 0;
    background: none;
}

.beyond-need .beyond-label {
    background: var(--white);
    color: var(--blue-dark);
}

.beyond-need-lead {
    margin: 0 0 18px;
    font-family: var(--font-display);
    font-size: clamp(1.15rem, 1.8vw, 1.4rem);
}

.beyond-need-list {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: need;
}

.beyond-need-list li {
    position: relative;
    margin: 0 0 14px;
    padding: 0 0 0 44px;
    color: var(--muted);
    font-size: 1rem;
    line-height: 1.55;
    counter-increment: need;
}

.beyond-need-list li::before {
    content: "✓";
    position: absolute;
    top: 1px;
    left: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #3f8f5f;
    color: #fff;
    font-size: .95rem;
    font-weight: 700;
    line-height: 28px;
    text-align: center;
}

.beyond-need-list strong {
    display: block;
    color: var(--ink);
    font-family: var(--font-display);
    font-size: 1.1rem;
}

.beyond-compassion {
    max-width: 860px;
    margin: 0 auto 32px;
    color: var(--muted);
    font-size: 1.08rem;
    text-align: center;
}

.beyond-cta {
    margin-top: clamp(28px, 4vw, 44px);
    text-align: center;
}

/* From -> To -> To : a quiet timeline */
#complement {
    scroll-margin-top: 70px;
}

.journey {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    max-width: 960px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}

.journey li {
    position: relative;
    padding: 34px 18px 0;
    text-align: center;
}

.journey li::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    z-index: 1;
    width: 16px;
    height: 16px;
    border: 2px solid var(--blue);
    border-radius: 50%;
    background: var(--mist);
    transform: translateX(-50%);
}

.journey li:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 7px;
    left: 50%;
    width: 100%;
    height: 2px;
    background: var(--blue);
    opacity: .35;
}

.journey li:last-child::before {
    border-color: var(--blue-dark);
    background: var(--blue-dark);
    box-shadow: 0 0 0 5px rgba(93, 135, 148, .25);
}

.journey span {
    display: block;
    margin-bottom: 6px;
    color: var(--blue-dark);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.journey p {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(1.15rem, 1.9vw, 1.45rem);
    line-height: 1.35;
}

.journey li:last-child p {
    color: var(--blue-dark);
    font-style: italic;
}

/* what I offer */
.beyond-human {
    margin-top: clamp(48px, 7vw, 88px);
    padding: clamp(28px, 4vw, 48px);
    border-radius: var(--radius);
    background: var(--mist);
}

.beyond-human--flush {
    margin-top: 0;
}

.beyond-human h3 {
    margin: 0 0 28px;
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 2.6vw, 2rem);
    line-height: 1.25;
    text-align: center;
}

.beyond-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.beyond-list li {
    padding: 20px 22px;
    border-radius: var(--radius-sm);
    background: var(--white);
    color: var(--muted);
    font-size: 1rem;
    line-height: 1.55;
}

.beyond-list em {
    color: var(--ink);
    font-family: var(--font-display);
}

.beyond-list strong {
    display: block;
    margin-bottom: 4px;
    color: var(--blue-dark);
    font-family: var(--font-display);
    font-size: 1.15rem;
}

@media (max-width: 900px) {
    .beyond-list {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 800px) {
    .beyond-list {
        grid-template-columns: 1fr;
    }

    .journey {
        grid-template-columns: 1fr;
        gap: 26px;
        max-width: 420px;
    }

    .journey li {
        padding: 0 0 0 38px;
        text-align: left;
    }

    .journey li::before {
        top: 4px;
        left: 0;
        transform: none;
    }

    .journey li:not(:last-child)::after {
        top: 22px;
        left: 7px;
        width: 2px;
        height: calc(100% + 8px);
    }
}


/* red cross before "Not more information or insight." */
.beyond-need-lead {
    display: flex;
    align-items: center;
    gap: 12px;
}

.beyond-x {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #c0483e;
    color: #fff;
    font-family: var(--font-body);
    font-size: .85rem;
    font-weight: 700;
    line-height: 28px;
    text-align: center;
}

/* statement inside a colour band (upright, not italic) */
.quote-band--slim {
    padding: clamp(48px, 6vw, 84px) 0;
}

.quote-band--slim .quote-band-inner {
    max-width: 820px;
}

.quote-band .quote-statement {
    max-width: none;
    margin: 0 auto;
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 3.2vw, 2.4rem);
    font-style: normal;
    font-weight: 500;
    line-height: 1.35;
    text-shadow: 0 2px 22px rgba(30, 10, 40, .45);
}

/* note under the prices */
.pricing-note {
    margin: 28px auto 0;
    color: var(--ink);
    font-family: var(--font-display);
    font-size: clamp(1.1rem, 1.8vw, 1.35rem);
    font-style: italic;
}

/* About: small round portrait beside the intro */
.about-intro {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(20px, 3.5vw, 40px);
    max-width: 820px;
}

.about-portrait {
    flex: 0 0 auto;
    width: clamp(112px, 14vw, 160px);
    aspect-ratio: 1;
    border-radius: 50%;
    object-fit: cover;
    object-position: 50% 20%;
    box-shadow: var(--shadow);
}

.about-intro .copy h2 {
    margin-top: 0;
}

@media (max-width: 560px) {
    .about-intro {
        flex-direction: column;
        text-align: center;
    }
}


/* "Seeing the intelligence…" — title above, text left and Perhaps list right */
.curious-title {
    max-width: 920px;
    margin: 0 auto clamp(32px, 5vw, 56px);
    text-align: center;
}

.curious .curious-grid {
    align-items: center;
}


/* "Perhaps" cards: intro text on top, four cards below */
.curious .curious-grid {
    display: block;
}

.curious .curious-intro {
    max-width: 900px;
    margin: 0 auto clamp(28px, 4vw, 48px);
    text-align: center;
}

.curious .perhaps-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.curious .perhaps-list li {
    margin: 0;
    padding: 22px 22px 24px;
    border-left: 0;
    border-top: 3px solid var(--blue);
    border-radius: var(--radius-sm);
    background: var(--mist);
    font-size: clamp(1.05rem, 1.4vw, 1.25rem);
}

@media (max-width: 1000px) {
    .curious .perhaps-list {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 560px) {
    .curious .perhaps-list {
        grid-template-columns: 1fr;
    }
}

/* colour band with the three authenticity lines */
.quote-band .quote-lead {
    margin-bottom: 14px;
}

.quote-band .quote-lead--final {
    margin: 26px 0 0;
    font-size: clamp(1.9rem, 4vw, 3rem);
    font-style: italic;
}

/* "I freeze" — plain text under the band */
.freeze-inner {
    max-width: 860px;
    text-align: center;
}

.freeze-quote {
    margin: 0 0 14px;
    color: var(--blue-dark);
    font-family: var(--font-display);
    font-size: clamp(2.6rem, 7vw, 4.4rem);
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -.03em;
}

.freeze-lead {
    margin: 0 0 18px;
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 2.6vw, 1.9rem);
    line-height: 1.3;
}

.freeze-inner p:last-child {
    margin-bottom: 0;
    color: var(--muted);
}

.curious .curious-intro .curious-foot {
    color: var(--ink);
    font-family: var(--font-display);
    font-size: clamp(1.25rem, 2vw, 1.6rem);
    line-height: 1.5;
}

.freeze-inner .eyebrow {
    margin-bottom: 14px;
}


/* "What you may need" — open list, no box */
.beyond-need > .eyebrow {
    margin-bottom: 14px;
    text-align: center;
}

.beyond-need-lead {
    justify-content: center;
    margin-bottom: 26px;
}

.beyond-need-lead strong {
    color: var(--muted);
    font-weight: 500;
    text-decoration: line-through;
    text-decoration-color: #c0483e;
    text-decoration-thickness: 2px;
}

.beyond-need-list li {
    margin: 0;
    padding: 18px 0 18px 46px;
    border-top: 1px solid var(--line);
}

.beyond-need-list li:last-child {
    border-bottom: 1px solid var(--line);
}

.beyond-need-list li::before {
    top: 19px;
}

/* ============================================================================
   APPROACH PAGE — process work / UnShaming
   ============================================================================ */
.approach-head {
    max-width: 860px;
    margin: 0 auto clamp(20px, 3vw, 32px);
}

.approach-head h2 {
    font-size: clamp(1.9rem, 3.4vw, 2.6rem);
}

.approach-body {
    max-width: 820px;
    margin: 0 auto 20px;
    color: var(--muted);
    font-size: 1.08rem;
}

/* pulls this line closer to the list above and the section end below */
.approach-body--tight {
    margin-top: -16px;
    margin-bottom: 0;
}

.approach-body--strong {
    color: var(--ink);
    font-family: var(--font-display);
    font-size: clamp(1.2rem, 2vw, 1.5rem);
    line-height: 1.5;
}

.approach-intro-line {
    margin: clamp(28px, 4vw, 40px) 0 20px;
    font-family: var(--font-display);
    font-size: 1.2rem;
}

/* short quotes / questions in a light card grid */
.quote-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    max-width: 960px;
    margin: 0 auto clamp(28px, 4vw, 44px);
    padding: 0;
    list-style: none;
}

.quote-grid li {
    margin: 0;
    padding: 22px 24px;
    border-top: 3px solid var(--blue);
    border-radius: var(--radius-sm);
    background: var(--mist);
    font-family: var(--font-display);
    font-size: clamp(1.05rem, 1.5vw, 1.25rem);
    font-style: italic;
    line-height: 1.4;
}

@media (max-width: 700px) {
    .quote-grid {
        grid-template-columns: 1fr;
    }
}

/* open, divided list — no icons, no box */
.plain-list {
    max-width: 780px;
    margin: 0 auto clamp(28px, 4vw, 44px);
    padding: 0;
    list-style: none;
}

.plain-list li {
    padding: 16px 0 16px 26px;
    border-top: 1px solid var(--line);
    position: relative;
    color: var(--ink);
    font-size: 1.06rem;
    line-height: 1.5;
}

.plain-list li::before {
    content: "\2014";
    position: absolute;
    left: 0;
    color: var(--blue);
}

.plain-list li:last-child {
    border-bottom: 1px solid var(--line);
}

/* one emphasised line, centred */
.pull-quote {
    max-width: 760px;
    margin: clamp(24px, 4vw, 40px) auto;
    padding: 0;
    color: var(--blue-dark);
    font-family: var(--font-display);
    font-size: clamp(1.35rem, 2.6vw, 1.9rem);
    font-style: italic;
    line-height: 1.45;
    text-align: center;
}

/* "instead of asking / we can ask" — two columns, no boxes */
.ask-compare {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: clamp(28px, 5vw, 64px);
    max-width: 1000px;
    margin: clamp(32px, 5vw, 52px) auto 0;
}

.ask-compare-old {
    padding-right: clamp(28px, 5vw, 64px);
    border-right: 1px solid var(--line);
    text-align: center;
}

.ask-compare-quote {
    margin: 0;
    color: var(--muted);
    font-family: var(--font-display);
    font-size: clamp(1.2rem, 2vw, 1.5rem);
    font-style: italic;
    line-height: 1.4;
    text-decoration: line-through;
    text-decoration-color: #c0483e;
    text-decoration-thickness: 2px;
}

.ask-compare-new {
    text-align: center;
}

.ask-compare-new .plain-list {
    margin: 0 auto;
    text-align: left;
}

@media (max-width: 700px) {
    .ask-compare {
        grid-template-columns: 1fr;
    }

    .ask-compare-old {
        padding-right: 0;
        padding-bottom: 24px;
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }
}


/* ---- bundle prices: full price crossed out, bundle price, saving ----
   The full price is (single-session price from session_types) × credits, worked
   out on the packages page, so it follows whatever prices are in the db. */
.bprice {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex-shrink: 0;
    text-align: right;
    line-height: 1.25;
}

.bprice .was {
    font-size: 13px;
    color: var(--ink-soft);
}

.bprice .was s {
    text-decoration-thickness: 1.5px;
}

.bprice .now {
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 600;
    color: var(--brand-deep);
}

.bprice .save {
    margin-top: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--seal-wash);
    color: var(--warn);
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Mobile: bundle groups stack in one column, so give each group clear
   breathing room from the next so the session types don't run together. */
@media (max-width: 699px) {
    .pick-grid > .bundle-group + .bundle-group {
        margin-top: 36px;
    }
}

/* Packages page only: the bundle name uses the same body font as the rest of
   the row (the booking page's session names keep the display font). */
.bundle-group .btn-block .t {
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 600;
}

/* Packages page: line 1 = bundle name — credits, line 2 = "Valid for N months". */
.binfo {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1 1 auto;
}

/* name — credits never breaks; if the row is too narrow for it AND the price,
   the price block drops underneath (see .bundle-group .btn-block below). */
.binfo .bline {
    white-space: nowrap;
}

/* Mobile: the credit count moves to its own line under the bundle name
   (no " — " separator) so long names don't overflow the row. */
@media (max-width: 600px) {
    .binfo .bline {
        white-space: normal;
    }
    .binfo .bsep {
        display: none;
    }
    .binfo .bcredits {
        display: block;
        margin-top: 2px;
    }
}

.bundle-group .btn-block {
    flex-wrap: wrap;
    row-gap: 10px;
}

/* Price sits on its own line under the text, laid out side by side:
   ~~full~~  bundle price  [Save …]. Same layout on every screen size. */
.bundle-group .btn-block .bprice {
    flex: 1 1 100%;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 4px 10px;
    padding-top: 10px;
    border-top: 1px solid var(--line);
    text-align: left;
}

.bundle-group .btn-block .bprice .save {
    margin-top: 0;
}

.binfo .bvalid {
    margin-top: 0;
    font-size: 13px;
}

/* Safety note as a full-width yellow band (edge to edge, no outline or rounded
   corners) with the text centred. Used on the home and FAQ pages. */
.safety-note.safety-note--band {
    width: 100%;
    max-width: none;
    margin: 0;
    border: 0;
    border-radius: 0;
    text-align: center;
    padding: 28px max(24px, calc((100% - 860px) / 2));
}

/* Home page: menu links like "Sessions" (#ways-to-work-together) jump straight
   to the section instead of visibly scrolling down the whole page. */
html:has(body.home) {
    scroll-behavior: auto;
}

/* "See who this service is not for" link at the end of the safety note */
.safety-note .safety-link {
    display: inline-block;
    margin-top: 10px;
    color: #523f10;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.safety-note .safety-link:hover {
    color: var(--blue-dark);
}

/* FAQ deep link (#not-for) lands below the sticky header */
.faq-item[id] {
    scroll-margin-top: 90px;
}

/* ---- shared 404 / error page (views/error.html) ---- */
.error-hero {
    padding: clamp(70px, 12vw, 140px) 0 clamp(80px, 12vw, 150px);
}

.error-hero .error-code {
    margin: 0 0 10px;
    color: var(--ink-soft);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.error-hero .lede {
    max-width: 520px;
    margin-top: 16px;
}

.error-hero .error-actions {
    margin-top: 28px;
}

.error-hero .error-help {
    margin-top: 26px;
    color: var(--ink-soft);
    font-size: .95rem;
}


/* ============================================================================
   LOADING STATE — shown instantly in the page's HTML, replaced once the data arrives
   ============================================================================ */
.loading-card {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 180px;
    color: var(--ink-soft);
    font-size: 15px;
}
.loading-card .load-ring {
    width: 22px;
    height: 22px;
    flex: none;
    border: 2.5px solid var(--line);
    border-top-color: var(--brand);
    border-radius: 50%;
    animation: btn-spin .8s linear infinite;
}
.loading-card .load-slow { display: none; }
.loading-card.is-slow .load-slow { display: inline; }