/*
 * LKT Counselling theme.
 *
 * Brand from the old site: navy #2D3956 and the red of the figure mark,
 * a serif wordmark, the swirl texture. Colours below are checked for WCAG
 * AA contrast on the backgrounds they are used on.
 */

/* ------------------------------------------------------------------ fonts */

@font-face {
    font-family: "Fraunces";
    src: url("../fonts/fraunces-normal.woff2") format("woff2");
    font-weight: 300 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Fraunces";
    src: url("../fonts/fraunces-italic.woff2") format("woff2");
    font-weight: 300 700;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: "Source Sans 3";
    src: url("../fonts/source-sans-3-normal.woff2") format("woff2");
    font-weight: 300 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Source Sans 3";
    src: url("../fonts/source-sans-3-italic.woff2") format("woff2");
    font-weight: 300 700;
    font-style: italic;
    font-display: swap;
}

/* ----------------------------------------------------------------- tokens */

:root {
    --paper: #FBF8F4;
    --white: #FFFFFF;
    --sand: #F3ECE2;
    --mist: #E8ECF3;
    --ink: #222B43;
    --navy: #2D3956;
    --text: #3B4256;
    --muted: #5A6075;
    --coral: #B63E2C;
    --brand-red: #D14636;   /* the old site's wordmark red; large text only */
    /* The wordmark is Times New Roman Bold, which is what the old site's
       header actually rendered in (its PT Serif link was blocked as mixed
       content), and what Lee's other branding uses. */
    --wordmark: "Times New Roman", Times, "Liberation Serif", Tinos, serif;
    --coral-dark: #9A3323;
    --coral-soft: #F6E1DA;
    --coral-light: #E9A898;
    --sage: #7F9C8A;
    --sage-soft: #E4ECE6;
    --amber: #D9A85F;
    --line: #E6DFD4;
    --rule: #C6B6AB;        /* the bar under the header (Lee's mock-up, 2026-10-20) */
    --on-ink: #C9D0E0;

    --serif: "Fraunces", Georgia, "Times New Roman", serif;
    --sans: "Source Sans 3", "Segoe UI", system-ui, -apple-system, sans-serif;

    --radius: 12px;
    --shadow: 0 1px 2px rgba(34, 43, 67, .06), 0 10px 30px rgba(34, 43, 67, .08);
    --container: 1100px;
    --gutter: clamp(1.25rem, 4vw, 2.5rem);
    --panel: calc(var(--container) + 2 * var(--gutter));
    --swirl-bg: #EEE6DB;
}

/* ------------------------------------------------------------------- base */

*, *::before, *::after { box-sizing: border-box; }

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

body {
    margin: 0;
    /* The old site's swirl wallpaper, recoloured from its cool blue at Lee's
       request: the ground is --sand, the taupe of the nav bar and the Areas
       of focus band (same pattern; the blue original is in git history). It
       shows beside the content panel (<main>) on wide screens; the header and
       footer bars run full width. --swirl-bg is the tile's average colour.
       Images are cached for 30 days: bump ?v= whenever swirl.jpg changes. */
    background: var(--swirl-bg) url("../images/swirl.jpg?v=4") center top repeat;
    color: var(--text);
    font-family: var(--sans);
    font-size: 1.125rem;
    line-height: 1.7;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }

a {
    color: var(--navy);
    text-decoration-color: rgba(182, 62, 44, .5);
    text-decoration-thickness: 1px;
    text-underline-offset: .2em;
    transition: color .15s, text-decoration-color .15s;
}
a:hover { color: var(--coral); text-decoration-color: currentColor; }

:focus-visible { outline: 3px solid var(--coral); outline-offset: 3px; border-radius: 4px; }

h1, h2, h3, h4 {
    font-family: var(--serif);
    font-optical-sizing: auto;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.15;
    letter-spacing: -.01em;
    margin: 0 0 .55em;
}
h1 { font-size: clamp(2.25rem, 4.4vw, 3.5rem); }
h2 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); margin-top: 1.5em; }
h3 { font-size: 1.32rem; margin-top: 1.4em; }
h4 { font-size: 1.1rem; }

p, ul, ol, table { margin: 0 0 1.1em; }
strong, b { font-weight: 650; color: var(--ink); }

.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.skip-link {
    position: absolute;
    left: 1rem; top: -4rem;
    z-index: 100;
    padding: .6rem 1rem;
    background: var(--ink);
    color: #fff;
    border-radius: 8px;
}
.skip-link:focus { top: 1rem; color: #fff; }

.container {
    width: 100%;
    max-width: var(--panel);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

/* The content panel: paper on the swirl, like the old site's white box. */
main {
    position: relative;
    z-index: 1;
    max-width: var(--panel);
    margin: clamp(1rem, 2.5vw, 1.75rem) auto 0;
    background: var(--paper);
    box-shadow: 0 0 0 1px rgba(45, 57, 86, .06), 0 14px 36px rgba(45, 57, 86, .16);
}

/* ------------------------------------------------------ editor text styles */

.lead { font-size: clamp(1.2rem, 1.8vw, 1.35rem); line-height: 1.55; }

.eyebrow {
    font-family: var(--sans);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--coral);
    margin-bottom: .8rem;
}

.callout {
    background: var(--coral-soft);
    border-left: 4px solid var(--coral);
    border-radius: 0 12px 12px 0;
    padding: 1.1rem 1.35rem;
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5em;
    padding: .8em 1.55em;
    border: 2px solid var(--coral);
    border-radius: 999px;
    background: var(--coral);
    color: #fff;
    font-family: var(--sans);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    transition: background .2s, border-color .2s, color .2s, transform .2s;
}
.button:hover { background: var(--coral-dark); border-color: var(--coral-dark); color: #fff; }
.button:active { transform: translateY(1px); }
.button--outline { background: transparent; border-color: var(--navy); color: var(--navy); }
.button--outline:hover { background: var(--navy); border-color: var(--navy); color: #fff; }
.button--small { padding: .55em 1.2em; font-size: .95rem; }

/* "More about me →" style links. */
.link-arrow { font-weight: 600; text-decoration: none; color: var(--coral); }
.link-arrow::after { content: "\2192"; display: inline-block; margin-left: .4em; transition: transform .2s; }
.link-arrow:hover { color: var(--coral-dark); }
.link-arrow:hover::after { transform: translateX(3px); }

/* A paragraph of buttons lays them out in a row. */
p:has(> .button) { display: flex; flex-wrap: wrap; gap: .75rem; }

/* Lists in page text: coral dots; "Checklist" style: ticks. */
.prose ul:not([class]), .callout ul:not([class]) { list-style: none; padding-left: 0; }
.prose ul:not([class]) > li, .callout ul:not([class]) > li { position: relative; padding-left: 1.5em; margin-bottom: .45em; }
.prose ul:not([class]) > li::before, .callout ul:not([class]) > li::before {
    content: "";
    position: absolute;
    left: .3em; top: .7em;
    width: .45em; height: .45em;
    border-radius: 50%;
    background: var(--coral);
}
.prose ol:not([class]) { padding-left: 1.4em; }
.prose ol:not([class]) > li { padding-left: .3em; margin-bottom: .5em; }
.prose ol:not([class]) > li::marker { color: var(--coral); font-weight: 700; }

.checklist, .welcome__aside ul { list-style: none; padding-left: 0; }
.checklist > li, .welcome__aside ul > li { position: relative; padding-left: 2.1rem; margin-bottom: .7rem; line-height: 1.5; }
.checklist > li::before, .welcome__aside ul > li::before {
    content: "";
    position: absolute;
    left: 0; top: .1rem;
    width: 1.4rem; height: 1.4rem;
    border-radius: 50%;
    background: var(--coral-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23B63E2C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / .85rem no-repeat;
}

/* ------------------------------------------------------------------ header */

/* A darker taupe bar closes the header, with a soft shadow onto the swirl,
   to set the nav apart from the page (Lee's mock-up, 2026-10-20). It is the
   header's edge rather than the nav's so that on phones, where the nav is
   folded away, it still sits under the masthead. */
.site-header {
    position: relative;
    z-index: 50;
    background: var(--paper);
    border-bottom: 8px solid var(--rule);
    box-shadow: 0 2px 4px rgba(45, 57, 86, .14);
}

.site-header__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-block: 1.2rem .9rem;  /* room for the mark's tip above the wordmark */
}

/* Masthead: the old site's header. The mark, the name, the tagline, then
   phone, email and address. */
/* The mark's top sits level with the wordmark and its foot runs below the address, as on the old site. */
.masthead { display: flex; align-items: flex-start; gap: 1.6rem; min-width: 0; }
.masthead__mark { flex: none; display: block; margin-top: -.2rem; }
.masthead__mark img { display: block; height: 160px; width: auto; }
.masthead__text { display: flex; flex-direction: column; min-width: 0; }
.masthead__name {
    align-self: flex-start;
    font-family: var(--wordmark);
    font-size: clamp(1.9rem, 3.6vw, 3rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
    color: var(--brand-red);
    text-decoration: none;
}
.masthead__name:hover { color: var(--coral-dark); }
.masthead__tagline {
    margin: .45rem 0 .7rem;
    font-size: clamp(.85rem, 1.5vw, 1.2rem);
    font-weight: 700;
    letter-spacing: .01em;
    text-transform: uppercase;
    color: #565656;
}
.masthead__contact {
    display: flex;
    flex-wrap: wrap;
    gap: 0 .5rem;
    margin: 0;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--muted);
}
.masthead__contact strong { color: var(--text); font-weight: 650; }
.masthead__contact a { color: var(--navy); font-weight: 600; text-decoration: none; }
.masthead__contact a:hover { color: var(--coral); }
.masthead__sep { color: var(--line); }
.masthead__address { flex-basis: 100%; }

.brand {
    display: inline-flex;
    align-items: center;
    gap: .85rem;
    color: var(--ink);
    text-decoration: none;
}
.brand:hover { color: var(--ink); }
.brand__mark { height: 58px; width: auto; flex: none; }
.brand__text { display: flex; flex-direction: column; }
.brand__name {
    font-family: var(--wordmark);
    font-size: clamp(1.45rem, 2.4vw, 1.8rem);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -.015em;
    color: var(--coral);
}

.nav-toggle {
    display: none;
    align-items: center;
    gap: .55rem;
    padding: .55rem .9rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--white);
    color: var(--navy);
    font: 600 .95rem var(--sans);
    cursor: pointer;
}
.nav-toggle__bars, .nav-toggle__bars::before, .nav-toggle__bars::after {
    display: block;
    width: 18px; height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: transform .2s, opacity .2s;
}
.nav-toggle__bars { position: relative; }
.nav-toggle__bars::before, .nav-toggle__bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after { top: 6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { transform: translateY(-6px) rotate(-45deg); }

/* Navigation: a row of links with hover dropdowns on wide screens. */
.site-nav { background: var(--sand); border-top: 1px solid var(--line); }
.site-nav__list { display: flex; flex-wrap: wrap; list-style: none; margin: 0 0 0 -.85rem; padding: 0; }
.site-nav__item { position: relative; }
.site-nav__link {
    position: relative;
    display: block;
    border: 0;
    background: none;
    font-family: var(--sans);
    line-height: inherit;
    cursor: pointer;
    padding: .9rem .85rem;
    color: var(--navy);
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
}
.site-nav__link::after {
    content: "";
    position: absolute;
    left: .85rem; right: .85rem; bottom: .55rem;
    height: 2px;
    background: var(--coral);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .2s;
}
.site-nav__link:hover { color: var(--ink); }
.site-nav__link:hover::after,
.is-current > .site-nav__link::after,
.is-ancestor > .site-nav__link::after { transform: scaleX(1); }

.site-nav__sub { list-style: none; margin: 0; padding: 0; }
.site-nav__sub a { display: block; text-decoration: none; color: var(--text); }
.site-nav__sub a[aria-current] { color: var(--coral); font-weight: 600; }
.site-nav__mobile { display: none; }

@media (min-width: 1024px) {
    .has-children > .site-nav__link { padding-right: 1.6rem; }
    .has-children > .site-nav__link::before {
        content: "";
        position: absolute;
        right: .75rem; top: 50%;
        width: .4rem; height: .4rem;
        border-right: 1.5px solid currentColor;
        border-bottom: 1.5px solid currentColor;
        transform: translateY(-70%) rotate(45deg);
        opacity: .6;
    }
    .has-children > .site-nav__link::after { right: 1.6rem; }

    .site-nav__sub {
        position: absolute;
        top: 100%; left: .25rem;
        min-width: 15.5rem;
        padding: .5rem;
        background: var(--white);
        border: 1px solid var(--line);
        border-radius: var(--radius);
        box-shadow: var(--shadow);
        opacity: 0;
        visibility: hidden;
        transform: translateY(6px);
        transition: opacity .18s, transform .18s, visibility .18s;
    }
    .site-nav__item:hover > .site-nav__sub,
    .site-nav__item.is-open > .site-nav__sub,
    .no-js .site-nav__item:focus-within > .site-nav__sub { opacity: 1; visibility: visible; transform: none; }
    .site-nav__item.is-open > .site-nav__toggle::before { transform: translateY(-20%) rotate(-135deg); }
    .site-nav__sub a { padding: .5rem .8rem; border-radius: 6px; font-size: 1rem; }
    .site-nav__sub a:hover { background: var(--sand); color: var(--ink); }
}

/* Narrow screens: a menu button opens the navigation as a panel. */
@media (max-width: 1023.98px) {
    .nav-toggle { display: inline-flex; flex: none; }

    .site-nav { display: none; }
    .site-nav.is-open, .no-js .site-nav { display: block; }
    .site-nav__list { flex-direction: column; margin: 0; padding-block: .25rem; }
    .site-nav__item { display: flex; flex-wrap: wrap; align-items: center; border-bottom: 1px solid var(--line); }
    .site-nav__link { flex: 1; padding: .85rem 0; font-size: 1.05rem; }
    .site-nav__link::after { display: none; }
    .is-current > .site-nav__link, .is-ancestor > .site-nav__link { color: var(--coral); }

    .site-nav__toggle { text-align: left; padding-right: 2.5rem; }
    .site-nav__toggle::before {
        content: "";
        position: absolute;
        right: .9rem; top: 50%;
        width: .55rem; height: .55rem;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        transform: translateY(-70%) rotate(45deg);
        transition: transform .2s;
    }
    .is-open > .site-nav__toggle::before { transform: translateY(-20%) rotate(-135deg); }

    .site-nav__sub { display: none; width: 100%; padding: 0 0 .6rem 1rem; }
    .is-open > .site-nav__sub, .no-js .site-nav__sub { display: block; }
    .site-nav__sub a { padding: .45rem 0; }

    .site-nav__mobile {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: .75rem 1.5rem;
        padding-block: 1.25rem 1.75rem;
    }
    .site-nav__mobile a:not(.button) { font-weight: 600; text-decoration: none; }
}

@media (max-width: 640px) {
    .masthead { gap: .85rem; }
    .masthead__mark img { height: 104px; }
    .masthead__tagline { margin: .3rem 0 .35rem; font-size: .8rem; }
    .masthead__contact { flex-direction: column; font-size: .85rem; }
    .masthead__sep { display: none; }
    .masthead__address { font-size: .76rem; }
}

/* Small phones: a compact masthead, and the menu button is its icon alone
   (the label stays for screen readers). */
@media (max-width: 480px) {
    .site-header__bar { gap: .75rem; padding-block: .8rem; }
    .masthead { gap: .7rem; }
    .masthead__mark img { height: 84px; }
    .masthead__name { font-size: 1.5rem; }
    .masthead__tagline { margin: .25rem 0 .3rem; font-size: .7rem; }
    .masthead__contact { font-size: .78rem; line-height: 1.4; }
    .masthead__address { font-size: .72rem; }
    .nav-toggle { min-width: 44px; min-height: 44px; padding: 0; justify-content: center; }  /* a full touch target */
    .nav-toggle__label {
        position: absolute !important;
        width: 1px; height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
}

/* --------------------------------------------------------------- page hero */

.page-hero {
    padding-block: clamp(2.25rem, 5vw, 3.5rem) clamp(1.75rem, 4vw, 2.75rem);
    background: var(--sand);
    border-bottom: 1px solid var(--line);
}
.page-hero h1 { margin: 0; max-width: 22ch; }

.breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin: 0 0 .9rem;
    padding: 0;
    list-style: none;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.breadcrumb li + li::before { content: "/"; margin-right: .4rem; color: var(--coral); }
.breadcrumb a { color: var(--muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--coral); }

/* --------------------------------------------------------------- page body */

.page-body {
    display: grid;
    gap: clamp(2.5rem, 5vw, 4.5rem);
    padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(3.5rem, 7vw, 5.5rem);
}
@media (min-width: 960px) {
    .page-body { grid-template-columns: minmax(0, 1fr) 21rem; }
    .page-body--full { grid-template-columns: minmax(0, 1fr); }
}

.prose { max-width: 44rem; }
.prose--wide { max-width: none; }
.prose > :first-child > :first-child,
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }

.sidebar { display: flex; flex-direction: column; gap: 1.5rem; }
.sidebar__quote { display: flex; flex-direction: column; gap: 1.5rem; }
.sidebar__quote:empty { display: none; }

.section-nav {
    padding: 1.25rem 1.1rem 1rem;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}
.section-nav__title {
    margin: 0 0 .5rem .65rem;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--muted);
}
.section-nav ul { list-style: none; margin: 0; padding: 0; }
.section-nav a {
    display: block;
    padding: .45rem .65rem;
    border-radius: 6px;
    color: var(--text);
    font-size: 1rem;
    line-height: 1.4;
    text-decoration: none;
}
.section-nav a:hover { background: var(--sand); color: var(--ink); }
.section-nav a[aria-current] { background: var(--coral-soft); color: var(--coral-dark); font-weight: 600; }

/* Sidebar quote. */
.sidebar blockquote {
    position: relative;
    margin: 0;
    padding: 2.6rem 1.5rem 1.4rem;
    background: var(--sage-soft);
    border-radius: var(--radius);
}
.sidebar blockquote::before {
    content: "\201C";
    position: absolute;
    top: .35rem; left: 1.2rem;
    font: 600 4rem/1 var(--serif);
    color: var(--sage);
}
.sidebar blockquote p {
    margin: 0 0 .8rem;
    font-family: var(--serif);
    font-size: 1.12rem;
    font-style: italic;
    line-height: 1.5;
    color: var(--ink);
}
.sidebar blockquote p:last-child:not(:first-child) {
    margin: 0;
    font: 600 .92rem/1.4 var(--sans);
    letter-spacing: .03em;
    color: var(--muted);
}

/* Booking card. */
.booking-card {
    position: relative;
    overflow: hidden;
    padding: 1.75rem 1.5rem 1.6rem;
    background: var(--ink);
    border-radius: var(--radius);
    color: var(--on-ink);
}
.booking-card::after {
    content: "";
    position: absolute;
    right: -18px; bottom: -28px;
    width: 92px; height: 200px;
    background: url("../images/logo-mark-white.png") center / contain no-repeat;
    opacity: .08;
    pointer-events: none;
}
.booking-card h2, .booking-card h3 { margin: 0 0 .5rem; color: #fff; font-size: 1.35rem; }
.booking-card p { position: relative; z-index: 1; font-size: 1rem; line-height: 1.55; }
.booking-card p:last-child { margin-bottom: 0; }
.booking-card a:not(.button) { color: #fff; text-decoration-color: rgba(255, 255, 255, .45); }
.booking-card a:not(.button):hover { color: var(--coral-light); }

/* Page List block: cards. */
.page-cards { margin-top: 2.5rem; }
.page-cards__title { margin-bottom: 1rem; }
.page-cards__list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.page-card a {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 1.35rem 1.35rem 1.2rem;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--text);
    text-decoration: none;
    transition: transform .2s, box-shadow .2s, border-color .2s;
}
.page-card a:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: transparent; color: var(--text); }
.page-card__title { margin-bottom: .4rem; font: 600 1.22rem/1.25 var(--serif); color: var(--ink); }
.page-card__desc { flex: 1; margin-bottom: 1rem; font-size: 1rem; line-height: 1.55; }
.page-card__more { font-size: .95rem; font-weight: 600; color: var(--coral); }
.page-card a:hover .page-card__more { color: var(--coral-dark); }

/* The disordered-eating continuum (from the old site's arrow diagram). */
.continuum { position: relative; display: grid; gap: .85rem; margin: 1.75rem 0 2.25rem; padding: 0; list-style: none; }
.continuum > li {
    padding: 1rem 1.1rem;
    background: var(--white);
    border: 1px solid var(--line);
    border-top: 4px solid var(--sage);
    border-radius: 12px;
    font-size: 1rem;
    line-height: 1.5;
}
.continuum > li:nth-child(2) { border-top-color: var(--amber); }
.continuum > li:nth-child(3) { border-top-color: var(--coral); }
.continuum strong { display: block; margin-bottom: .3rem; font: 600 1.1rem/1.3 var(--serif); }
@media (min-width: 640px) {
    .continuum { grid-template-columns: repeat(3, 1fr); padding-top: 2.4rem; }
    .continuum::before {
        content: "";
        position: absolute;
        top: 0; left: 0; right: 0;
        height: 22px;
        background: linear-gradient(90deg, var(--sage), var(--amber) 50%, var(--coral));
        clip-path: polygon(0 50%, 16px 0, 16px 32%, calc(100% - 16px) 32%, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, calc(100% - 16px) 68%, 16px 68%, 16px 100%);
    }
}

/* Contact page map. */
.map { overflow: hidden; aspect-ratio: 4 / 3; margin: 1.5rem 0; border-radius: var(--radius); background: var(--mist); }
.map iframe { display: block; width: 100%; height: 100%; border: 0; }

/* -------------------------------------------------------------------- home */

/* The top of the home page is laid out like the old site: the welcome and the
   small portrait on the left, the booking card and the quote on the right. */
.home-body {
    display: grid;
    gap: clamp(2.5rem, 5vw, 4rem);
    padding-block: clamp(2.25rem, 5vw, 3.5rem) clamp(3rem, 6vw, 4.5rem);
}
@media (min-width: 960px) {
    .home-body { grid-template-columns: minmax(0, 1fr) 21rem; }
}
/* One column: the booking card follows the welcome, before the reasons list. */
@media (max-width: 959.98px) {
    .home-main, .home-body > .sidebar { display: contents; }
    .home-intro { order: 1; }
    .home-body .booking-card { order: 2; }
    .home-body .welcome__aside { order: 3; margin-top: 0; }
    .home-body .sidebar__quote { order: 4; }
}

.home-intro { display: grid; gap: 1.5rem 2rem; align-items: start; }
@media (min-width: 600px) {
    .home-intro { grid-template-columns: 210px minmax(0, 1fr); }
}
.home-intro h1 { margin: 0 0 .6em; font-size: clamp(1.8rem, 3vw, 2.4rem); }
.home-intro .lead { margin-bottom: .9em; }
.home-intro__text > :last-child { margin-bottom: 0; }

/* The portrait: a true square with rounded corners (Jeff, 2026-10-14), with
   "Private practice ... since 2002" under it. The photo is 4:5 with the face
   in the upper half, so the crop is anchored near the top. */
.home-portrait { margin: 0; max-width: 210px; }
.home-portrait img, .home-portrait picture {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: 50% 12%;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.home-portrait__caption {
    margin: .75rem 0 0;
    max-width: 210px;
    font-size: .9rem;
    line-height: 1.35;
    color: var(--muted);
}

/* "You might be here because..." */
.welcome__aside {
    margin-top: clamp(2rem, 4vw, 2.75rem);
    padding: 2rem 1.75rem 1.4rem;
    background: var(--white);
    border-top: 4px solid var(--coral);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.welcome__aside h2, .welcome__aside h3 { margin-top: 0; font-size: 1.4rem; }
.welcome__aside ul { margin-bottom: 0; }
.welcome__aside li { font-size: 1.02rem; }
@media (min-width: 700px) {
    .welcome__aside ul { columns: 2; column-gap: 2rem; }
    .welcome__aside li { break-inside: avoid; }
}

.section { padding-block: clamp(3.5rem, 8vw, 6rem); }
.section--sand { background: var(--sand); }

.services > :first-child { max-width: 40rem; }
.services h2 { margin-top: 0; }
.services .page-cards { margin-top: 2rem; }
.services .page-cards__list { grid-template-columns: repeat(auto-fit, minmax(14.5rem, 1fr)); }
/* Tablets: two by two rather than three and an orphan. */
@media (min-width: 640px) and (max-width: 1023.98px) {
    .services .page-cards__list { grid-template-columns: repeat(2, 1fr); }
}

.steps > :first-child { max-width: 40rem; }
.steps h2 { margin-top: 0; }
.steps ol {
    display: grid;
    gap: 1.25rem;
    margin: 2.25rem 0 0;
    padding: 0;
    list-style: none;
    counter-reset: step;
}
@media (min-width: 860px) { .steps ol { grid-template-columns: repeat(3, 1fr); } }
.steps ol > li {
    counter-increment: step;
    padding: 1.75rem 1.5rem 1.25rem;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}
.steps ol > li::before {
    content: counter(step);
    display: grid;
    place-items: center;
    width: 2.5rem; height: 2.5rem;
    margin-bottom: 1rem;
    border-radius: 50%;
    background: var(--coral-soft);
    color: var(--coral-dark);
    font: 600 1.15rem/1 var(--serif);
}
.steps ol h3 { margin: 0 0 .5rem; font-size: 1.25rem; }
.steps ol p { font-size: 1.02rem; line-height: 1.6; }

/* ------------------------------------------------- call to action + footer */

.cta-band { background: var(--navy); color: var(--on-ink); }
.cta-band__inner { padding-block: clamp(2.75rem, 6vw, 3.75rem) 2rem; }
.cta-band h2 { margin: 0 0 .75rem; color: #fff; font-size: clamp(1.6rem, 3vw, 2.15rem); }
.cta-band p { margin: 0 0 1.25rem; max-width: 34rem; }
.cta-band p:has(> .button) { margin: 0; }
.cta-band a:not(.button) { color: #fff; }
.cta-band .button { background: #fff; border-color: #fff; color: var(--navy); }
.cta-band .button:hover { background: var(--coral); border-color: var(--coral); color: #fff; }
.cta-band .button--outline { background: transparent; border-color: rgba(255, 255, 255, .6); color: #fff; }
.cta-band .button--outline:hover { background: #fff; border-color: #fff; color: var(--navy); }
@media (min-width: 1024px) {
    .cta-band__inner {
        display: grid;
        grid-template-columns: minmax(0, .8fr) minmax(0, 1.25fr) auto;
        align-items: center;
        gap: 2.5rem;
    }
    .cta-band h2, .cta-band p { margin: 0; max-width: none; }
    .cta-band__inner > p:not(:has(> .button)) { padding-left: 2.5rem; border-left: 1px solid rgba(255, 255, 255, .2); }
    .cta-band p:has(> .button) { flex-wrap: nowrap; }
}
.cta-band .cta-band__contact {
    max-width: none;
    display: flex;
    flex-wrap: wrap;
    gap: .35rem .9rem;
    margin: 0;
    padding-block: 1.1rem 1.4rem;
    border-top: 1px solid rgba(255, 255, 255, .15);
    font-size: .95rem;
    color: var(--on-ink);
}
.cta-band__contact a { text-decoration: none; font-weight: 600; }
.cta-band__contact a:hover { color: var(--coral-light); }

.site-footer { background: var(--ink); color: var(--on-ink); font-size: 1rem; }
.site-footer a { color: #fff; text-decoration-color: rgba(255, 255, 255, .35); }
.site-footer a:hover { color: var(--coral-light); }
.site-footer__grid { display: grid; gap: 2.5rem; padding-block: clamp(3rem, 7vw, 4.5rem); }
@media (min-width: 860px) { .site-footer__grid { grid-template-columns: 1.5fr .9fr 1.1fr; gap: 3.5rem; } }
.brand--footer { margin-bottom: 1.1rem; }
.brand--footer .brand__mark { height: 48px; }
.brand--footer .brand__name { color: #fff; font-size: 1.5rem; }
.site-footer p { margin-bottom: .9rem; }
.site-footer__rcc { display: block; margin-top: 1.25rem; }
.site-footer__heading {
    margin: 0 0 1rem;
    font: 700 .8rem/1.4 var(--sans);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--coral-light);
}
.site-footer ul { margin: 0; padding: 0; list-style: none; }
.site-footer li { margin-bottom: .45rem; }
.site-footer__nav a { text-decoration: none; }
.site-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .5rem 2rem;
    padding-block: 1.3rem;
    border-top: 1px solid rgba(255, 255, 255, .12);
    font-size: .9rem;
    color: #9AA3BC;
}
.site-footer__bottom { align-items: center; }
.site-footer__bottom p { margin: 0; }
.site-footer__bottom a { color: #C9D0E0; }

/* ABC Web Link credit: same logos and behaviour as the other ABC sites. */
#Credit { display: flex; align-items: flex-end; margin-right: -10px; }
#Credit a { display: block; padding-inline: 10px; opacity: .6; border: 0; text-decoration: none; transition: opacity .2s; }
#Credit a:hover { opacity: .8; }
#Credit img { display: block; height: 30px; width: auto; filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, .75)); }
/* The admin icon is a two-state sprite: top half normally, bottom half on hover. */
#Credit #Admin { height: 30px; overflow: hidden; }
#Credit #Admin img { position: relative; top: 0; height: 60px; }
#Credit #Admin:hover img, #Credit #Admin:focus-visible img { top: -30px; }

/* ------------------------------------------- single pages (log in, errors) */

.single-page { max-width: 34rem; }
.single-page .form-group, .single-page .mb-3 { margin-bottom: 1rem; }
.single-page label, .single-page .form-label, .single-page .control-label { display: block; margin-bottom: .35rem; font-weight: 600; color: var(--ink); }
.single-page input[type="text"], .single-page input[type="email"], .single-page input[type="password"], .single-page .form-control {
    display: block;
    width: 100%;
    padding: .7rem .9rem;
    border: 1px solid #CFC6B8;
    border-radius: 10px;
    background: var(--white);
    font: inherit;
    color: var(--ink);
}
.single-page .form-control:focus, .single-page input:focus { outline: 3px solid rgba(182, 62, 44, .3); border-color: var(--coral); }
.single-page .btn, .single-page button[type="submit"], .single-page input[type="submit"] {
    display: inline-flex;
    padding: .7em 1.5em;
    border: 2px solid var(--coral);
    border-radius: 999px;
    background: var(--coral);
    color: #fff;
    font: 600 1rem var(--sans);
    cursor: pointer;
    text-decoration: none;
}
.single-page .btn:hover, .single-page button[type="submit"]:hover { background: var(--coral-dark); border-color: var(--coral-dark); color: #fff; }
.single-page .btn-secondary, .single-page .btn-link { background: transparent; color: var(--navy); border-color: transparent; }
.single-page .alert { padding: .9rem 1.1rem; border-radius: 10px; background: var(--coral-soft); color: var(--coral-dark); }
.single-page .alert-success { background: var(--sage-soft); color: #2F4A3A; }

/* --------------------------------------------------------------- utilities */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; }
}

@media print {
    .nav-toggle, .site-nav, .cta-band, .sidebar .booking-card { display: none !important; }
    body, main { background: #fff; box-shadow: none; }
}