/* Maryke Rossouw Physiotherapy & Wellness -- "Evergreen".
   The site as it was, refined: the same deep green world and the same butterfly at
   the centre, but calm. No pulsing glow, no shimmer, no emoji; words instead of
   single-letter wing nav; Cormorant Garamond for headings and Lato for text.
   One stylesheet for all five pages so the look cannot drift apart between them. */

:root {
    --green-deep: #13301f;
    --green: #1f4430;
    --sage: #9bbc88;
    --cream: #f4efe6;
    --gold: #c8a96a;
    --ink: #2b3a31;
    --gold-line: rgba(200, 169, 106, 0.6);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: "Lato", sans-serif;
    font-weight: 300;
    line-height: 1.75;
    color: var(--cream);
    background: radial-gradient(ellipse 90% 70% at 50% 0%, #2f5a40 0%, var(--green-deep) 70%) var(--green-deep);
    min-height: 100vh;
}

a { color: inherit; }

.container { max-width: 1120px; margin: 0 auto; padding: 0 32px; }

/* --- navigation ------------------------------------------------------------ */

.top-nav {
    display: flex;
    justify-content: center;
    gap: 3rem;
    padding: 2rem 0 0;
    font-size: 0.78rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
}

.top-nav a {
    text-decoration: none;
    opacity: 0.85;
    padding-bottom: 4px;
    border-bottom: 1px solid transparent;
    transition: all 0.3s ease;
}

.top-nav a:hover,
.top-nav a:focus-visible { opacity: 1; border-color: var(--gold); }

/* The page you are on: shown, not clickable-looking. */
.top-nav a[aria-current="page"] { opacity: 1; border-color: var(--gold); }

/* --- shared type ---------------------------------------------------------- */

.eyebrow {
    font-size: 0.75rem;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 1.25rem;
}

h2 {
    font-family: "Cormorant Garamond", serif;
    font-weight: 400;
    font-size: 2.6rem;
    line-height: 1.2;
    margin-bottom: 1.5rem;
}

.button {
    display: inline-block;
    padding: 0.95rem 2.2rem;
    border: 1px solid var(--gold);
    color: var(--cream);
    text-decoration: none;
    font-size: 0.8rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    transition: all 0.3s ease;
}

.button:hover,
.button:focus-visible { background: var(--gold); color: var(--green-deep); }

footer {
    border-top: 1px solid rgba(244, 239, 230, 0.15);
    padding: 2rem 0 2.5rem;
    text-align: center;
    font-size: 0.8rem;
}

/* Phone and email sit on every page, so reaching Maryke never means finding the
   contact page first. Brighter than the copyright beneath them on purpose -- the
   dimming that used to be on the whole footer now sits on .footer-legal alone.
   The generous padding is tap target, not decoration: these are the two things a
   patient on a phone is most likely to reach for. */
.footer-contact {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0 1.75rem;
    margin-bottom: 0.6rem;
}

.footer-contact a {
    display: inline-block;
    font-size: 0.9rem;
    padding: 0.6rem 0.3rem 0.35rem;
    text-decoration: none;
    opacity: 0.9;
    border-bottom: 1px solid var(--gold-line);
    transition: all 0.3s ease;
}

.footer-contact a:hover,
.footer-contact a:focus-visible { opacity: 1; border-color: var(--gold); }

.footer-legal { opacity: 0.65; }

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

.hero {
    display: grid;
    grid-template-columns: auto auto auto;
    justify-content: center;
    align-items: center;
    gap: 3.5rem;
    padding: 4rem 0 5rem;
}

.vertical-name {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-family: "Cormorant Garamond", serif;
    font-weight: 300;
    font-size: 3.6rem;
    letter-spacing: 0.12em;
    line-height: 1;
    padding-left: 1.5rem;
    border-left: 1px solid var(--gold-line);
}

.butterfly-block { text-align: center; }

.butterfly {
    width: 340px;
    height: auto;
    filter: drop-shadow(0 0 28px rgba(244, 239, 230, 0.18));
}

.tagline {
    margin-top: 1.25rem;
    font-size: 0.8rem;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: var(--sage);
}

.arch {
    width: 280px;
    height: 420px;
    object-fit: cover;
    object-position: 50% 45%;
    border-radius: 140px 140px 6px 6px;
    outline: 1px solid rgba(200, 169, 106, 0.55);
    outline-offset: 10px;
}

.welcome {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
    padding: 1rem 0 5rem;
}

.welcome p { font-size: 1.08rem; opacity: 0.85; margin-bottom: 1rem; }

/* The second "Book your consultation", so it is met near the top of the home page
   rather than only after ~3,100px of scrolling on a phone. */
.welcome .button { margin-top: 1rem; }

.specialties {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3rem;
    padding: 0 0 5.5rem;
}

.specialty { border-top: 1px solid var(--gold-line); padding-top: 1.75rem; }

.specialty h3 {
    font-family: "Cormorant Garamond", serif;
    font-weight: 500;
    font-size: 1.65rem;
    margin-bottom: 0.75rem;
}

.specialty p { opacity: 0.78; font-size: 0.98rem; }

.book {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 3.5rem;
    align-items: center;
    background: var(--cream);
    color: var(--ink);
    padding: 3.5rem 4rem;
    border-radius: 4px;
    margin-bottom: 5.5rem;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.25);
}

.book img { width: 100%; box-shadow: 0 14px 30px rgba(0, 0, 0, 0.22); display: block; }

.book .eyebrow { color: #9a7b3f; }

.book h3 {
    font-family: "Cormorant Garamond", serif;
    font-weight: 500;
    font-size: 2.3rem;
    color: var(--green-deep);
    line-height: 1.1;
}

.book-title {
    font-family: "Cormorant Garamond", serif;
    font-style: italic;
    font-size: 1.35rem;
    color: #5c7d4c;
    margin: 0.4rem 0 1.1rem;
}

.book p { font-size: 1.02rem; margin-bottom: 1.6rem; }

.book .button { border-color: var(--green-deep); color: var(--green-deep); }
.book .button:hover,
.book .button:focus-visible { background: var(--green-deep); color: var(--cream); }

.cta { text-align: center; padding: 0 0 5rem; }
.cta h2 { font-size: 2.2rem; margin-bottom: 1.75rem; }

/* --- inner pages ---------------------------------------------------------- */

/* Butterfly and name, small, above the nav -- the way back to the home page on
   every inner page (the home page has the full hero instead). */
.masthead { text-align: center; padding: 2.75rem 0 0; }

.masthead a { text-decoration: none; display: inline-block; }

.masthead img { width: 96px; height: auto; display: block; margin: 0 auto; }

.masthead .name {
    font-family: "Cormorant Garamond", serif;
    font-weight: 300;
    font-size: 1.6rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    margin-top: 0.5rem;
}

.page-head {
    text-align: center;
    max-width: 760px;
    margin: 0 auto;
    padding: 3.5rem 0 3rem;
}

.page-head h1 {
    font-family: "Cormorant Garamond", serif;
    font-weight: 300;
    font-size: 3rem;
    line-height: 1.15;
}

.page-head p {
    margin-top: 1rem;
    font-size: 1.05rem;
    opacity: 0.82;
}

/* Cream "paper" for reading on -- the same panel as the book card on the home
   page, so long-form text is dark on light rather than light on dark. */
.panel {
    background: var(--cream);
    color: var(--ink);
    border-radius: 4px;
    padding: 3.5rem 4rem;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.25);
    margin-bottom: 3rem;
}

.panel h2,
.panel h3 {
    font-family: "Cormorant Garamond", serif;
    color: var(--green-deep);
}

.panel h2 { font-weight: 400; font-size: 2.2rem; margin-bottom: 1.25rem; }
.panel h3 { font-weight: 500; font-size: 1.75rem; margin-bottom: 0.9rem; }
.panel p { margin-bottom: 1.1rem; }
.panel p:last-child { margin-bottom: 0; }
.panel .eyebrow { color: #9a7b3f; }

.panel ul { list-style: none; margin: 0.5rem 0 0; }

/* A paragraph following a list needs the gap the list does not carry -- but only
   when there is one, so a card ending on its list keeps its padding tight. */
.panel ul + p { margin-top: 1.1rem; }

.panel li {
    padding-left: 1.4rem;
    position: relative;
    margin-bottom: 0.35rem;
}

.panel li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.85em;
    width: 8px;
    height: 1px;
    background: #9a7b3f;
}

/* A section inside a panel, separated by a gold hairline instead of a box. */
.section { border-top: 1px solid rgba(154, 123, 63, 0.35); padding-top: 2rem; margin-top: 2rem; }
.section:first-child { border-top: none; padding-top: 0; margin-top: 0; }

/* A pulled-out quote or note: tinted, hairline on the left, no rounded card. */
.pullquote {
    border-left: 2px solid var(--gold);
    background: rgba(155, 188, 136, 0.14);
    padding: 1.5rem 1.75rem;
    margin: 2rem 0;
}

.pullquote p {
    font-family: "Cormorant Garamond", serif;
    font-style: italic;
    font-size: 1.3rem;
    line-height: 1.55;
    color: var(--green-deep);
    margin: 0;
}

/* About: portrait beside the introduction. */
.intro {
    display: grid;
    grid-template-columns: 1fr 260px;
    gap: 3rem;
    align-items: center;
}

.intro .subtitle {
    font-family: "Cormorant Garamond", serif;
    font-style: italic;
    font-size: 1.3rem;
    color: #5c7d4c;
    margin: 0.3rem 0 1rem;
}

.portrait {
    width: 100%;
    height: 330px;
    object-fit: cover;
    border-radius: 130px 130px 4px 4px;
    outline: 1px solid rgba(154, 123, 63, 0.5);
    outline-offset: 8px;
    display: block;
}

/* A band on the green, between panels -- used for the "specialised expertise"
   and "holistic approach" statements rather than another white box. */
.band {
    max-width: 860px;
    margin: 0 auto 3.5rem;
    text-align: center;
    padding: 2.5rem 0;
    border-top: 1px solid var(--gold-line);
    border-bottom: 1px solid var(--gold-line);
}

.band h2 { font-size: 2.1rem; margin-bottom: 1rem; }
.band p { opacity: 0.85; }

/* Services and pricing grids: cream panels, two across. */
.card-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem;
    margin-bottom: 3.5rem;
}

.card-grid .panel { padding: 2.75rem 2.5rem; margin-bottom: 0; }

/* A card that runs the full width of the grid. For a rate that applies across the
   services above it rather than being one of them -- and it keeps an odd card out
   of a half-empty final row. Harmless once the grid collapses to one column. */
.card-grid .panel.wide { grid-column: 1 / -1; }

/* Cards in a grid carry an h2 where the page has no other second-level heading
   above them, so the heading order runs h1 -> h2 with no skip. They are sized
   like the h3 cards on purpose -- the level is about the outline, not the look. */
.card-grid .panel h2 { font-weight: 500; font-size: 1.75rem; margin-bottom: 0.9rem; }

/* Small label above a list ("Includes", "Conditions treated", "Email").
   Keyed on the class, not the tag, so each one can sit at whatever heading level
   its page's outline needs without changing how it looks. */
.panel .label {
    font-family: "Lato", sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #9a7b3f;
    margin: 1.4rem 0 0.4rem;
}

/* Pricing. */
.price {
    font-family: "Cormorant Garamond", serif;
    font-weight: 400;
    font-size: 3rem;
    line-height: 1;
    color: var(--green-deep);
    margin: 0.75rem 0 0.2rem;
}

.price-note {
    font-size: 0.78rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #7d8f74;
    margin-bottom: 1.25rem;
}

/* Only four of the six cards carry a price-note, and it was the note supplying
   the gap under the price -- so on the other two the description sat right up
   against it. Put the gap back where the note is absent. */
.price + p { margin-top: 1.25rem; }

.duration {
    font-family: "Cormorant Garamond", serif;
    font-style: italic;
    font-size: 1.2rem;
    color: #5c7d4c;
}

/* The one card worth pointing at, marked with a gold rule rather than a badge. */
.panel.featured { border-top: 2px solid var(--gold); }

/* Contact. */
.contact-panel { max-width: 640px; margin: 0 auto 3rem; }

.contact-panel .lead {
    font-family: "Lato", sans-serif;
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 0.2em;
    line-height: 1.9;
    text-transform: uppercase;
    color: #5c7d4c;
    margin-bottom: 0;
}

.contact-panel a { color: var(--green-deep); text-decoration: none; border-bottom: 1px solid rgba(154, 123, 63, 0.5); }
.contact-panel a:hover,
.contact-panel a:focus-visible { border-color: var(--green-deep); }

.contact-panel .section p { margin-bottom: 0.2rem; }

/* The enquiry form (MRW-7). The same cream panel as the details above it, and the
   field labels reuse .label so they read as the same kind of label as "Email" and
   "Mobile" rather than as a second style. */
.form-panel .form-intro {
    font-size: 0.9rem;
    color: #5c7d4c;
    margin-bottom: 1.75rem;
}

.form-panel .label { display: block; }
.form-panel .label .optional { text-transform: none; letter-spacing: 0.04em; color: #7d8f74; }

.form-panel input,
.form-panel textarea {
    font-family: "Lato", sans-serif;
    font-weight: 300;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--ink);
    width: 100%;
    padding: 0.7rem 0.85rem;
    background: #fbf8f2;
    border: 1px solid rgba(154, 123, 63, 0.4);
    border-radius: 3px;
}

.form-panel input:focus,
.form-panel textarea:focus {
    outline: none;
    border-color: var(--green);
    box-shadow: 0 0 0 2px rgba(31, 68, 48, 0.12);
}

.form-panel textarea { resize: vertical; }

/* The shared .button is cream-on-transparent for the dark pages; inside a cream
   panel it would be invisible, so the submit button inverts to green. */
.form-panel button {
    font-family: "Lato", sans-serif;
    font-size: 0.8rem;
    font-weight: 400;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--cream);
    background: var(--green);
    border: 1px solid var(--green);
    border-radius: 3px;
    padding: 0.95rem 2.2rem;
    margin-top: 1.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.form-panel button:hover,
.form-panel button:focus-visible { background: var(--gold); border-color: var(--gold); color: var(--green-deep); }

/* Off-screen rather than display:none -- a bot reading the markup still sees a
   field worth filling, which is the whole point of it. */
.honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.cta-band { text-align: center; padding: 0 0 5rem; }
.cta-band .button { margin: 0 0.4rem 0.75rem; }

/* --- tablet --------------------------------------------------------------- */

/* The hero's three columns are fixed-width: the name, a 340px butterfly and a
   280px photo need about 890px of viewport side by side. Below that they stack,
   which is well above where the rest of the page needs to change -- hence two
   tiers rather than one. */
@media (max-width: 900px) {
    .hero {
        grid-template-columns: 1fr;
        gap: 2.25rem;
        padding: 3rem 0 4rem;
        justify-items: center;
        text-align: center;
    }

    .vertical-name {
        writing-mode: horizontal-tb;
        transform: none;
        order: -1;
        font-size: 3rem;
        border-left: none;
        padding-left: 0;
        padding-bottom: 1rem;
        border-bottom: 1px solid var(--gold-line);
    }

    .butterfly { width: 290px; }
    .arch { width: 260px; height: 390px; border-radius: 130px 130px 6px 6px; }
}

/* --- narrow screens ------------------------------------------------------- */

@media (max-width: 760px) {
    .container { padding: 0 22px; }

    .top-nav { gap: 1.2rem; font-size: 0.68rem; letter-spacing: 0.18em; flex-wrap: wrap; }

    .hero { gap: 2rem; padding: 2.5rem 0 3.5rem; }

    .vertical-name { font-size: 2.7rem; }

    .butterfly { width: 250px; }
    .tagline { font-size: 0.68rem; letter-spacing: 0.3em; }
    .arch { width: 240px; height: 320px; border-radius: 120px 120px 6px 6px; }

    h2 { font-size: 2rem; }

    .specialties { grid-template-columns: 1fr; gap: 2.25rem; padding-bottom: 4rem; }

    .book { grid-template-columns: 1fr; padding: 2.5rem 1.75rem; gap: 2rem; text-align: center; }
    .book img { width: 150px; margin: 0 auto; }
    .book h3 { font-size: 2rem; }

    .button { letter-spacing: 0.16em; padding: 0.9rem 1.4rem; }

    .masthead { padding-top: 2rem; }
    .masthead img { width: 76px; }
    .masthead .name { font-size: 1.15rem; letter-spacing: 0.16em; }

    .page-head { padding: 2.25rem 0 2rem; }
    .page-head h1 { font-size: 2.25rem; }

    .panel { padding: 2.25rem 1.6rem; }
    .card-grid { grid-template-columns: 1fr; gap: 1.75rem; }
    .card-grid .panel { padding: 2.25rem 1.6rem; }

    .intro { grid-template-columns: 1fr; gap: 1.75rem; text-align: center; }
    .intro .portrait { width: 200px; height: 260px; margin: 0 auto; border-radius: 100px 100px 4px 4px; }

    .band { padding: 2rem 0; margin-bottom: 2.5rem; }
    .band h2 { font-size: 1.8rem; }

    .pullquote { padding: 1.25rem 1.25rem; }
    .pullquote p { font-size: 1.15rem; }

    .price { font-size: 2.5rem; }
}