/*
Theme Name: Dr. Nuno Maria
Theme URI: https://mymoment.pt/
Author: MyMoment Clinic
Version: 2.0.8
License: GNU General Public License v2 or later
Text Domain: dr-nuno-maria
*/

@font-face {
    font-family: 'DidactGothic';
    src: url('fonts/DidactGothic-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

:root {
    --green:       #19322f;
    --green-dk:    #122623;
    --green-lt:    #234742;
    --gold:        #b39b7e;
    --gold-dk:     #9a8668;
    --cream:       #f4f2ed;
    --cream-dk:    #e9e4d9;
    --text:        #19322f;
    --text-soft:   #4a5a56;
    --muted:       rgba(25,50,47,.55);
    --border:      rgba(25,50,47,.12);
    --white:       #ffffff;
    --font:        'DidactGothic', 'Helvetica Neue', Arial, sans-serif;
    --serif:       'DidactGothic', 'Helvetica Neue', Arial, sans-serif;
    --ease:        .3s ease;
    --r:           2px;
}

*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
html  {
    scroll-behavior: smooth;
    overflow-x: hidden;
    overflow-x: clip;
    overscroll-behavior-x: none;
}
body  {
    font-family: var(--font);
    background: var(--cream);
    color: var(--text);
    line-height: 1.6;
    overflow-x: hidden;
    overflow-x: clip;
    max-width: 100vw;
    width: 100%;
    position: relative;
}

/* Hide reCAPTCHA v3 badge; Google's ToS are satisfied by the
   .recaptcha-notice link rendered below the contact form. */
.grecaptcha-badge { visibility: hidden !important; }
img   { max-width: 100%; height: auto; display: block; }
a     { text-decoration: none; color: inherit; }
ul    { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: var(--font); color: inherit; }
input,select,textarea { font-family: var(--font); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.container { max-width: 1280px; margin: 0 auto; padding: 0 2rem; }

/* ── Buttons ── */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    padding: .85rem 1.9rem;
    font-family: var(--font); font-size: .72rem;
    letter-spacing: .18em; text-transform: uppercase;
    border-radius: var(--r); transition: var(--ease); white-space: nowrap;
    border: 1px solid transparent;
}
.btn-outline { border-color: rgba(244,242,237,.7); color: var(--cream); background: transparent; }
.btn-outline:hover { background: rgba(244,242,237,.1); border-color: var(--cream); }
.btn-gold { background: var(--gold); color: #fff; border-color: var(--gold); font-weight: 500; }
.btn-gold:hover { background: var(--gold-dk); border-color: var(--gold-dk); }
.btn-green { background: var(--gold); color: #fff; border-color: var(--gold); padding: .95rem 2.4rem; font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; border-radius: var(--r); display: inline-block; transition: var(--ease); }
.btn-green:hover { background: var(--gold-dk); border-color: var(--gold-dk); color: #fff; }

.section-label { display: block; font-size: .7rem; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); margin-bottom: .5rem; }
.section-title { font-family: var(--serif); font-size: clamp(2rem,3.5vw,2.8rem); color: var(--gold); font-weight: 400; -webkit-text-stroke: 1px currentColor; text-stroke: 1px currentColor; }

/* Shared outlined-title style used on hero, about, contact, testimonials, insta, treatment labels */
.title-outlined {
    -webkit-text-stroke: 1px currentColor;
    text-stroke: 1px currentColor;
}

/* ═══════════════════════════════════
   HEADER
   ═══════════════════════════════════ */
#site-header {
    position: fixed; top: 0; left: 0; width: 100%;
    z-index: 1000;
    background: linear-gradient(180deg, rgba(15,35,30,.85) 0%, rgba(15,35,30,.55) 100%);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: background var(--ease), box-shadow var(--ease), backdrop-filter var(--ease);
}
#site-header.scrolled {
    background: var(--green-dk);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: 0 2px 20px rgba(0,0,0,.25);
}

/* ── TOP ROW: logo | MM centre | actions ── */
.hdr-top {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: .9rem 3.5rem .4rem;
    gap: 1rem;
}
.hdr-top::after { display: none; }

.logo-dr {
    display: inline-flex; align-items: center;
    transition: opacity var(--ease), transform var(--ease);
    transform-origin: left center;
}
.logo-dr img {
    height: 120px; width: auto;
    transition: height var(--ease);
}

/* MY MOMENT always truly centred via grid centre column */
.logo-mm { justify-self: center; display: flex; flex-direction: column; align-items: center; }
.logo-mm img { height: 42px; width: auto; }

.hdr-actions {
    display: flex; align-items: center; gap: 1.4rem;
    justify-self: end;
}

.lnk-duvidas {
    color: var(--cream); font-size: .78rem;
    letter-spacing: .18em; text-transform: uppercase;
    transition: color var(--ease);
}
.lnk-duvidas:hover { color: var(--gold); }

.btn-marcacao {
    color: var(--cream);
    border: 1.5px solid rgba(244,242,237,.7);
    padding: .65rem 1.6rem;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    border-radius: var(--r);
    transition: var(--ease);
    white-space: nowrap;
}
.btn-marcacao:hover { background: var(--cream); color: var(--green); border-color: var(--cream); }

/* ── BOTTOM ROW: nav links ── */
.hdr-nav {
    display: flex; justify-content: center; gap: 3rem;
    padding: 1.3rem 0 .9rem;
    border-top: 1px solid rgba(244,242,237,.18);
    margin: 0 auto;
    max-width: min(1100px, 80%);
}
.hdr-nav .nav-link,
.hdr-nav-inline .nav-link {
    color: rgba(244,242,237,.75);
    font-size: .78rem;
    letter-spacing: .15em;
    text-transform: capitalize;
    transition: color var(--ease);
    position: relative;
    padding-bottom: 2px;
}
.hdr-nav .nav-link::after,
.hdr-nav-inline .nav-link::after {
    content: ''; position: absolute; bottom: 0; left: 50%;
    width: 0; height: 1px; background: var(--gold);
    transition: width .3s, left .3s;
}
.hdr-nav .nav-link:hover { color: var(--cream); }
.hdr-nav .nav-link:hover::after,
.hdr-nav-inline .nav-link:hover::after { width: 100%; left: 0; }

/* ── When scrolled: collapse to single row, nav moves inline ── */
#site-header.scrolled .hdr-top {
    padding: .6rem 3.5rem;
}
#site-header.scrolled .hdr-top::after { opacity: 0; }
/* Dr. Nuno Maria logo stays visible on scroll, just scaled down */
#site-header.scrolled .logo-dr img { height: 72px; }
#site-header.scrolled .logo-mm img { height: 30px; }
#site-header.scrolled .hdr-nav     { display: none; }
#site-header.scrolled .hdr-nav-inline { display: flex; }

/* Inline nav (scrolled state only) */
.hdr-nav-inline { display: none; gap: 2rem; margin-right: .5rem; }
.hdr-nav-inline .nav-link { color: rgba(244,242,237,.75); font-size: .78rem; letter-spacing: .15em; text-transform: capitalize; }

.hamburger { display: none; flex-direction: column; gap: 5px; padding: .5rem; }
.hamburger span { width: 24px; height: 1.5px; background: var(--cream); transition: var(--ease); }
.hamburger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile nav overlay */
#mobile-nav {
    position: fixed; inset: 0; background: var(--green);
    z-index: 1100;
    display: flex; flex-direction: column;
    padding: 1rem 1.4rem 1.6rem;
    opacity: 0; pointer-events: none; transition: opacity var(--ease);
}
#mobile-nav.active { opacity: 1; pointer-events: auto; }

.mob-nav-top {
    display: flex; align-items: center; justify-content: space-between;
    padding-bottom: 1.2rem;
}
.mob-logo img { height: 58px; width: auto; display: block; }
.mob-close {
    background: transparent; border: none; padding: .4rem;
    color: var(--cream); cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
}
.mob-close:hover { color: var(--gold); }

.mob-nav-links {
    display: flex; flex-direction: column;
    margin-top: .5rem;
    border-top: 1px solid rgba(244,242,237,.18);
}
.mob-link {
    color: var(--cream);
    font-size: 1.25rem;
    letter-spacing: .04em;
    padding: 1.1rem .2rem;
    border-bottom: 1px solid rgba(244,242,237,.18);
    transition: color var(--ease);
}
.mob-link:hover { color: var(--gold); }

.mob-nav-footer {
    margin-top: auto;
    padding-top: 1rem;
    display: flex; justify-content: flex-end;
}
.mob-cta {
    color: var(--cream);
    border: 1px solid rgba(244,242,237,.7);
    padding: .85rem 1.6rem;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    transition: var(--ease);
}
.mob-cta:hover { background: var(--cream); color: var(--green); }

/* ═══════════════════════════════════
   HERO
   ═══════════════════════════════════ */
#hero {
    position: relative;
    min-height: 100vh;
    display: flex; align-items: flex-end; justify-content: center;
    overflow: hidden;
    color: var(--cream);
    /* Keep clear of the fixed header and push copy toward the lower third */
    padding-top: 8rem;
    padding-bottom: clamp(3rem, 8vh, 6rem);
}
.hero-image-wrap {
    position: absolute; inset: 0; z-index: 0;
}
.hero-image-wrap img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center 20%;
}
/* Very light, even overlay so photo reads clearly across full width */
.hero-image-wrap::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(
        180deg,
        rgba(15,35,30,.30) 0%,
        rgba(15,35,30,.15) 40%,
        rgba(15,35,30,.45) 100%
    );
}
#hero .container { position: relative; z-index: 2; text-align: center; }

.hero-content h1 {
    font-family: var(--serif);
    font-size: clamp(1.9rem, 4vw, 3.4rem);
    font-weight: 500;
    line-height: 1.15;
    color: var(--cream);
    margin-bottom: 2.5rem;
    text-shadow: 0 2px 22px rgba(0,0,0,.55), 0 0 2px rgba(0,0,0,.4);
    -webkit-text-stroke: 2px currentColor;
    text-stroke: 2px currentColor;
    paint-order: stroke fill;
}
.hero-content h1 em { font-style: italic; }

.hero-cta { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* ═══════════════════════════════════
   ABOUT
   ═══════════════════════════════════ */
#about {
    background: var(--cream);
    padding: 0;
}
.about-grid {
    max-width: none;
    margin: 0;
    display: grid;
    grid-template-columns: minmax(0, 560px) minmax(0, 1fr);
    gap: 3.5rem;
    padding-left: max(2rem, calc((100vw - 1400px) / 2 + 2rem));
    padding-right: 0;
    align-items: start;
}
.about-text {
    padding: 6rem 0 4rem;
}
.about-text h2 {
    font-family: var(--serif);
    font-size: clamp(2rem, 3.4vw, 2.8rem);
    color: var(--green);
    font-weight: 400;
    line-height: 1.1;
    margin-bottom: .3rem;
    -webkit-text-stroke: 1px currentColor;
    text-stroke: 1px currentColor;
}
.doctor-title {
    display: block;
    font-size: .95rem;
    color: var(--gold);
    letter-spacing: .1em;
    margin-bottom: 2rem;
}
.about-description p {
    font-size: .92rem;
    line-height: 1.7;
    color: var(--text);
    margin-bottom: .9rem;
}
.about-extra {
    max-height: 0; overflow: hidden;
    transition: max-height .6s ease;
}
.about-extra.expanded { max-height: 5000px; }
.about-extra p em { font-style: italic; }

.about-expand-btn {
    display: inline-flex; align-items: center; gap: .4rem;
    color: var(--gold);
    font-size: .85rem;
    margin-top: .5rem;
    transition: var(--ease);
}
.about-expand-btn:hover { color: var(--gold-dk); }
.about-expand-btn svg { transition: transform .3s; }
.about-expand-btn[aria-expanded="true"] svg { transform: rotate(180deg); }

.about-cta { margin-top: 2rem; }

/* Right column - the photo hugs the right edge with a fixed 4/5 aspect (so it
   never zooms/crops) and is sticky to the top while the user scrolls through
   the expanded bio, so the image is always on screen next to the text without
   needing to stretch or fill empty space. */
.about-image {
    position: sticky;
    top: 80px;
    align-self: start;
    border-radius: 0;
    overflow: hidden;
    width: 100%;
    height: calc(100vh - 80px);
}
.about-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center 30%;
}

.video-trigger {
    position: absolute;
    bottom: 1.25rem; left: 1.25rem;
    display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
    padding: .85rem 2.2rem;
    background: transparent;
    border: 1px solid rgba(244,242,237,.85);
    color: var(--cream);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    width: auto;
    min-width: 230px;
    transition: var(--ease);
    cursor: pointer;
}
.video-trigger:hover { background: rgba(244,242,237,.08); border-color: var(--cream); }
.video-trigger svg { width: 14px; height: 14px; transition: transform .3s; }
.video-trigger:hover svg { transform: rotate(180deg); }

/* ═══════════════════════════════════
   PARTNERS TICKER
   ═══════════════════════════════════ */
#partners {
    background: var(--green);
    padding: 2rem 0;
    overflow: hidden;
    position: relative;
}
.ticker-wrap {
    display: flex;
    animation: ticker 45s linear infinite;
    width: max-content;
}
.ticker-item {
    flex-shrink: 0;
    width: 100px; height: 100px;
    margin-right: 2.4rem;
    border-radius: 50%;
    background: var(--cream);
    display: flex; align-items: center; justify-content: center;
    padding: 6px;
    overflow: hidden;
}
.ticker-item img {
    width: 88%; height: 88%;
    max-width: none; max-height: none;
    object-fit: contain;
}

@keyframes ticker {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-25%); }
}

/* ═══════════════════════════════════
   TREATMENTS
   ═══════════════════════════════════ */
#treatments {
    background: var(--cream);
    padding: 0;
    position: relative;
}
.treatments-header {
    text-align: center;
    padding: 1.2rem 2rem .9rem;
}
.treatments-header .section-title {
    color: var(--gold);
    margin-bottom: .5rem;
}
.treatments-header p {
    color: var(--text-soft);
    font-size: .95rem;
}
/* Desktop: hide mobile-only carousel controls */
.carousel-arrow { display: none; }
.treatments-cta-mobile { display: none; }

.treatments-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0;
    position: relative;
}
.treatment-card {
    position: relative;
    aspect-ratio: 5/6;
    overflow: hidden;
    cursor: pointer;
    background: var(--green);
}
.treatment-card img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .5s ease, filter .4s ease;
    display: block;
}
.treatment-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 55%, rgba(25,50,47,.85) 100%);
    transition: opacity .3s;
    pointer-events: none;
}
.treatment-label {
    position: absolute;
    left: 1.2rem; bottom: 1rem;
    z-index: 3;
    display: flex; align-items: center; gap: .35rem;
    color: var(--cream);
    font-family: var(--serif);
    font-size: 1.1rem;
    pointer-events: none;
    -webkit-text-stroke: .6px currentColor;
    text-stroke: .6px currentColor;
}
.treatment-label svg { width: 12px; height: 12px; }

.treatment-tooltip {
    position: absolute;
    inset: 0;
    background: rgba(244,242,237,.95);
    color: var(--text);
    padding: 2rem 1.4rem 1.4rem;
    display: flex; flex-direction: column; justify-content: center;
    opacity: 0;
    transition: opacity .3s ease;
    pointer-events: none;
    z-index: 4;
}
.treatment-card:hover .treatment-tooltip,
.treatment-card:focus-within .treatment-tooltip,
.treatment-card.focused .treatment-tooltip { opacity: 1; pointer-events: auto; }
.treatment-card:hover img,
.treatment-card:focus-within img,
.treatment-card.focused img { transform: scale(1.05); }

.treatment-tooltip h4 {
    font-family: var(--serif);
    color: var(--green);
    font-size: 1.1rem;
    margin-bottom: .8rem;
}
.treatment-tooltip p {
    font-size: .82rem;
    line-height: 1.55;
    color: var(--text);
    margin-bottom: 1rem;
}
.treatment-tooltip a {
    color: var(--gold);
    font-size: .82rem;
    letter-spacing: .05em;
    align-self: flex-start;
}

/* ═══════════════════════════════════
   TESTIMONIALS
   ═══════════════════════════════════ */
#testimonials {
    background: #fff;
    padding: 1.4rem 0 2.2rem;
}
.testimonials-header {
    max-width: 1280px;
    margin: 0 auto .9rem;
    padding: 0 2rem;
}
.testimonials-header h2 {
    font-family: var(--serif);
    color: var(--gold);
    font-weight: 400;
    font-size: clamp(1.8rem, 3.2vw, 2.4rem);
    margin-bottom: .3rem;
    -webkit-text-stroke: 1px currentColor;
    text-stroke: 1px currentColor;
}

.testimonials-layout {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 2rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
    align-items: start;
}
.testimonial-source { display: flex; flex-direction: column; }

/* Widget containers — host third-party review widgets (Crisalix, Google Reviews plugin).
   Widgets bring their own styles; the wrapper only fixes size/overflow. */
.testimonial-widget {
    width: 100%;
    min-height: 320px;
}
.testimonial-widget > div,
.testimonial-widget iframe {
    max-width: 100%;
}
.testimonial-widget-fallback {
    padding: 1.2rem;
    border: 1px dashed var(--border);
    border-radius: 6px;
    color: var(--text-soft);
    font-size: .88rem;
    text-align: center;
}

/* Google Reviews widget (Rich Plugins) — force vertical stacking of the header
   panel above the slider cards. The plugin's default "grw-row-m" layout places
   the header beside the slider, which breaks in a narrow testimonials column.
   Selector is scoped through .testimonial-widget-google .wp-gr to outrank the
   plugin's own 0,2,0 specificity rules that load inline after this stylesheet. */
.testimonial-widget-google .wp-gr {
    max-width: 520px;
    margin: 0 auto;
}
.testimonial-widget-google .wp-gr .grw-row,
.testimonial-widget-google .wp-gr .grw-row-m {
    display: block !important;
    flex-wrap: wrap !important;
}
.testimonial-widget-google .wp-gr .grw-header,
.testimonial-widget-google .wp-gr .grw-content,
.testimonial-widget-google .wp-gr .rpi-slides-root {
    flex: 1 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
}
.testimonial-widget-google .wp-gr .grw-header {
    margin-bottom: 1rem !important;
}

/* ═══════════════════════════════════
   INSTAGRAM CLIENTS SLIDER
   ═══════════════════════════════════ */
#instagram {
    background: var(--cream);
    padding: .9rem 0 2.2rem;
    position: relative;
    overflow: hidden;
}
.insta-header {
    max-width: 1280px; margin: 0 auto;
    padding: 0 2rem;
    display: flex; justify-content: space-between; align-items: center;
    flex-wrap: wrap; gap: 1rem;
    margin-bottom: 1.4rem;
}
.insta-title {
    font-family: var(--serif);
    color: var(--gold);
    font-weight: 400;
    font-size: clamp(1.8rem, 3.2vw, 2.4rem);
    -webkit-text-stroke: 1px currentColor;
    text-stroke: 1px currentColor;
}
.insta-sub { color: var(--text-soft); font-size: .95rem; }

.insta-account {
    display: inline-flex; align-items: center; gap: .6rem;
    color: var(--text);
}
.insta-account > div { display: flex; flex-direction: column; line-height: 1.25; }
.insta-handle { font-size: .85rem; font-weight: 500; }
.insta-tag { font-size: .72rem; color: var(--muted); }

/* Native horizontal scroll lets touch devices swipe out of the box; the
   JS in main.js drives gentle autoplay via scrollLeft and adds mouse-drag
   on desktop. Scrollbar is hidden but scroll is still active. */
.insta-slider-wrap {
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0 1rem;
    cursor: grab;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}
.insta-slider-wrap::-webkit-scrollbar { display: none; }
.insta-slider-wrap.dragging { cursor: grabbing; }
.insta-slider-wrap.dragging .insta-card { pointer-events: none; }
.insta-track {
    display: flex;
    width: max-content;
}
.insta-card { margin-right: 1rem; }

.insta-card {
    flex-shrink: 0;
    width: 340px; aspect-ratio: 3/5;
    border-radius: 22px;
    overflow: hidden;
    background: #d4cfc8;
    position: relative;
    display: block;
    text-decoration: none;
    color: inherit;
}
.insta-card-inner { position: relative; width: 100%; height: 100%; }
.insta-card img { width: 100%; height: 100%; object-fit: cover; }

.insta-card-overlay {
    position: absolute; inset: 0;
    background: rgba(0,0,0,.45);
    display: flex; align-items: center; justify-content: center;
    opacity: 0;
    transition: opacity .25s ease;
    z-index: 2;
}
.insta-card:hover .insta-card-overlay,
.insta-card:focus-visible .insta-card-overlay { opacity: 1; }
.insta-card-cta {
    color: #fff;
    font-size: .95rem;
    font-weight: 500;
    letter-spacing: .02em;
    padding: .55rem 1.1rem;
    border: 1px solid rgba(255,255,255,.85);
    border-radius: 999px;
    backdrop-filter: blur(2px);
}
@media (hover: none) {
    .insta-card-overlay { display: none; }
}
.insta-card-top {
    position: absolute; top: .6rem; left: .6rem; z-index: 3;
    display: flex; align-items: center; gap: .4rem;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,.5);
}
.insta-avatar {
    width: 22px; height: 22px; border-radius: 50%;
    background: rgba(255,255,255,.25);
    backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center;
}
.insta-username { font-size: .74rem; font-weight: 500; }
.insta-heart {
    position: absolute; bottom: .7rem; left: .7rem; z-index: 3;
    width: 28px; height: 28px;
    border-radius: 50%;
    background: rgba(255,255,255,.2);
    backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center;
    color: #fff;
}
.insta-heart[data-liked="true"] { color: #ff4d6a; }
.insta-heart .heart-path { transition: fill .2s; }

/* ═══════════════════════════════════
   CONTACT
   ═══════════════════════════════════ */
.bottom-leaf-wrap {
    position: relative;
    background: var(--cream);
}
.bottom-leaf-wrap::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('images/leaf-bg.webp') no-repeat center bottom / cover;
    opacity: .25;
    pointer-events: none;
    mix-blend-mode: multiply;
    z-index: 0;
}
.bottom-leaf-wrap > * { position: relative; z-index: 1; }

#contact {
    background: transparent;
    padding: 5rem 0 2.5rem;
    position: relative;
}
.contact-grid {
    position: relative;
    max-width: 1280px; margin: 0 auto;
    padding: 0 2rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: start;
}
.contact-left h2 {
    font-family: var(--serif);
    color: var(--green);
    font-size: clamp(2.4rem, 5vw, 4rem);
    font-weight: 400;
    line-height: 1.05;
    margin-bottom: 1.5rem;
    -webkit-text-stroke: 1px currentColor;
    text-stroke: 1px currentColor;
}
.contact-left p { color: var(--text-soft); font-size: .95rem; margin-bottom: .4rem; }
.phone-link {
    display: inline-flex; align-items: center; gap: .4rem;
    color: var(--green);
    font-size: 1.1rem; font-weight: 600;
    margin-top: .3rem;
}
.phone-note { font-size: .75rem !important; color: var(--muted) !important; margin-top: .3rem; }

.contact-form form {
    display: flex; flex-direction: column; gap: 1rem;
}
.hp-field {
    position: absolute !important;
    left: -9999px !important;
    width: 1px; height: 1px;
    overflow: hidden;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-group { display: flex; flex-direction: column; }
.form-group label {
    font-size: .75rem; color: var(--text-soft);
    letter-spacing: .08em; margin-bottom: .3rem;
    text-transform: uppercase;
}
.form-group input,
.form-group select,
.form-group textarea {
    padding: .75rem .9rem;
    border: 1px solid var(--border);
    background: rgba(255,255,255,.85);
    color: var(--text);
    font-size: .88rem;
    border-radius: var(--r);
    outline: none;
    transition: border-color var(--ease), background var(--ease);
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: var(--gold);
    background: #fff;
}
.form-group textarea { min-height: 90px; resize: vertical; font-family: var(--font); }

.btn-submit {
    align-self: flex-end;
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    background: var(--green);
    color: var(--cream);
    padding: .95rem 3rem;
    font-size: .75rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    border-radius: var(--r);
    transition: var(--ease);
    margin-top: .5rem;
}
.btn-submit:hover { background: var(--green-dk); }
.btn-submit[disabled] { opacity: .6; cursor: wait; }

.form-feedback {
    font-size: .85rem;
    padding: .6rem .9rem;
    border-radius: var(--r);
    display: none;
}
.form-feedback.ok { display: block; background: #e6f4ea; color: #1e5631; border: 1px solid #bcdfc4; }
.form-feedback.err { display: block; background: #fdecea; color: #8a1f11; border: 1px solid #f4c7c3; }

/* ── Contact Form 7 overrides ──────────
   CF7 template reuses the theme .form-row / .form-group / .btn-submit class
   names, so the existing field styling above applies directly. These rules
   only add CF7-specific behaviour: strip paragraph margins, make CF7's span
   wrappers block-level, and style the acceptance / legal / response blocks. */
.contact-form .wpcf7 { padding: 0; }
.contact-form form.wpcf7-form { display: flex; flex-direction: column; gap: 1rem; }
.contact-form .wpcf7-form p { margin: 0; }
.contact-form .wpcf7-form-control-wrap { display: block; }
.contact-form .wpcf7-form input[type="text"],
.contact-form .wpcf7-form input[type="email"],
.contact-form .wpcf7-form input[type="tel"],
.contact-form .wpcf7-form select,
.contact-form .wpcf7-form textarea { width: 100%; }
.contact-form .wpcf7-form select {
    appearance: none; -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23666'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right .9rem center;
    padding-right: 2.5rem;
}

/* RGPD checkbox row. */
.contact-form .form-acceptance { margin-top: .25rem; }
.contact-form .form-acceptance .wpcf7-list-item { margin: 0; }
.contact-form .form-acceptance label {
    display: flex; align-items: flex-start; gap: .6rem;
    font-size: .85rem; color: var(--text); line-height: 1.45;
}
.contact-form .form-acceptance input[type="checkbox"] {
    width: 18px; height: 18px; min-width: 18px;
    margin-top: .15rem;
    accent-color: var(--gold);
    cursor: pointer;
}

/* Small legal note under the checkbox. */
.contact-form .form-legal {
    font-size: .7rem; color: var(--muted);
    line-height: 1.5; margin-top: .25rem;
}

/* Response banners + inline validation tip. */
.contact-form .wpcf7 form .wpcf7-response-output {
    margin: 1rem 0 0; padding: .6rem .9rem;
    font-size: .85rem; border-radius: var(--r); border-width: 1px;
}
.contact-form .wpcf7 form.sent .wpcf7-response-output {
    background: #e6f4ea; color: #1e5631; border-color: #bcdfc4;
}
.contact-form .wpcf7 form.invalid .wpcf7-response-output,
.contact-form .wpcf7 form.unaccepted .wpcf7-response-output,
.contact-form .wpcf7 form.failed .wpcf7-response-output,
.contact-form .wpcf7 form.spam .wpcf7-response-output {
    background: #fdecea; color: #8a1f11; border-color: #f4c7c3;
}
.contact-form .wpcf7-not-valid-tip {
    color: #8a1f11; font-size: .75rem; margin-top: .3rem;
}

/* reCAPTCHA attribution — Google's ToS require this when the v3 badge is hidden. */
.recaptcha-notice {
    font-size: .65rem; color: var(--muted);
    line-height: 1.4; margin-top: .75rem;
}
.recaptcha-notice a { color: var(--muted); text-decoration: underline; }
.recaptcha-notice a:hover { color: var(--gold); }

/* ═══════════════════════════════════
   FOOTER
   ═══════════════════════════════════ */
#site-footer {
    background: transparent;
    padding: 0 0 1.5rem;
    color: var(--text);
}
#site-footer > .container { position: relative; }
#site-footer > .container::before {
    content: '';
    display: block;
    height: 1px;
    background: var(--border);
    margin-bottom: 2rem;
}
.footer-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 3rem;
    align-items: center;
}
.footer-logo { overflow: visible; position: relative; z-index: 2; margin-left: -1rem; }
.footer-logo img {
    height: 160px;
    width: auto;
    max-width: none;
    margin-bottom: 1rem;
    display: block;
}
.footer-contacts {
    display: flex; flex-direction: column; gap: .6rem;
    justify-self: end;
}
.f-contact {
    display: inline-flex; align-items: center; gap: .55rem;
    font-size: .88rem; color: var(--text);
}
.f-contact a { color: var(--text); transition: color var(--ease); }
.f-contact a:hover { color: var(--gold); }
.f-contact svg { flex-shrink: 0; fill: var(--green); }
.f-contact img { width: 16px; height: 16px; }

.footer-bottom {
    margin-top: 1.5rem;
    padding-top: 0;
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: .8rem;
    font-size: .72rem; color: var(--muted);
}
.footer-legal { display: flex; flex-wrap: wrap; gap: .6rem; }
.footer-legal a { color: var(--muted); transition: color var(--ease); }
.footer-legal a:hover { color: var(--gold); }

#scroll-top {
    position: fixed; right: 1.5rem; bottom: 1.5rem;
    width: 44px; height: 44px;
    background: var(--green);
    color: var(--cream);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none;
    transition: var(--ease);
    z-index: 500;
}
#scroll-top.show { opacity: 1; pointer-events: auto; }
#scroll-top:hover { background: var(--green-dk); }

/* WhatsApp floating button */
.wa-float {
    position: fixed;
    right: 1.5rem; bottom: 5rem;
    z-index: 500;
    width: 54px; height: 54px;
    border-radius: 50%;
    background: #25d366;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 14px rgba(37,211,102,.4);
    transition: transform .3s;
}
.wa-float:hover { transform: scale(1.08); }
.wa-float svg { width: 30px; height: 30px; fill: #fff; display: block; }
.wa-float svg path { fill: #fff; }

/* ═══════════════════════════════════
   MODAL
   ═══════════════════════════════════ */
.modal-bg {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.85);
    z-index: 2000;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none;
    transition: opacity var(--ease);
    padding: 1rem;
}
.modal-bg.active { opacity: 1; pointer-events: auto; }
.modal-box {
    position: relative;
    width: 100%; max-width: 900px;
    aspect-ratio: 16/9;
    background: #000;
}
.modal-close {
    position: absolute; top: -2.5rem; right: 0;
    color: #fff; font-size: 1.5rem;
    width: 40px; height: 40px;
}
.modal-box iframe { width: 100%; height: 100%; border: 0; }

/* ═══════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════ */
@media (max-width: 960px) {
    .hdr-top { grid-template-columns: auto 1fr auto; padding: .8rem 1.2rem; }
    .logo-mm { justify-self: center; }
    .logo-dr img { height: 64px; }
    .logo-mm img { height: 22px; }
    .hdr-actions { gap: .6rem; }
    .lnk-duvidas, .btn-marcacao, .hdr-nav, .hdr-nav-inline { display: none !important; }
    .hamburger { display: flex; }

    /* Scrolled mobile: collapse to just the hamburger button */
    #site-header.scrolled .hdr-top {
        grid-template-columns: 1fr auto;
        padding: .4rem 1.2rem;
    }
    #site-header.scrolled .logo-dr,
    #site-header.scrolled .logo-mm { display: none; }

    #hero { min-height: 80vh; padding-top: 6rem; }
    .hero-content h1 { font-size: clamp(1.3rem, 5vw, 1.75rem); line-height: 1.25; margin-bottom: 1.8rem; }

    #about { padding: 0 0 2.5rem; }
    .about-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        max-width: none !important;
        width: 100% !important;
    }
    .about-image {
        order: -1;
        position: relative;
        display: block;
        width: 100%;
        max-width: none;
        margin: 0;
        padding: 0;
        height: 62vh;
        min-height: 380px;
        max-height: 540px;
        aspect-ratio: auto;
        overflow: hidden;
        z-index: 0;
        flex: 0 0 auto;
    }
    .about-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: 35% 15%;
        display: block;
    }
    .video-trigger {
        position: absolute;
        left: 50%;
        right: auto;
        top: auto;
        bottom: 22%;
        transform: translateX(-50%);
        width: auto;
        min-width: 220px;
        padding: .8rem 2.8rem;
        background: rgba(0,0,0,.35);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        border: 1.5px solid rgba(255,255,255,.8);
        color: #fff;
        font-size: .78rem;
        font-weight: 600;
        letter-spacing: .2em;
        text-transform: uppercase;
        gap: .5rem;
        text-shadow: none;
        text-align: center;
        justify-content: center;
    }
    .video-trigger:hover {
        background: rgba(0,0,0,.45);
        border-color: #fff;
    }
    .video-trigger svg {
        width: 13px;
        height: 13px;
        filter: none;
    }

    .about-text {
        position: relative;
        z-index: 2;
        display: block;
        padding: 1.8rem 1.2rem 0;
        text-align: center;
        background: var(--cream);
    }
    .about-text h2 {
        font-size: 2.1rem;
        margin-bottom: .25rem;
        line-height: 1.1;
        color: var(--green);
    }
    .doctor-title {
        display: block;
        margin-bottom: 1.4rem;
        font-size: 1.25rem;
        color: var(--gold);
    }
    .about-description { text-align: left; }
    .about-description p { font-size: .88rem; line-height: 1.55; margin-bottom: .9rem; }
    .about-expand-btn { margin-top: 0; font-size: .85rem; }

    .about-cta { margin-top: 1.2rem; padding: 0; }
    .about-cta .btn-green { display: block; width: 100%; text-align: center; padding: 1rem; }

    /* ── Treatments: coverflow carousel on mobile ── */
    .treatments-header {
        padding: .8rem 2rem .2rem;
    }
    .treatments-carousel-wrap {
        position: relative;
        overflow: hidden;
        padding: .5rem 0 1.5rem;
    }
    .treatments-grid {
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        height: 420px;
        perspective: 900px;
        grid-template-columns: none;
    }
    .treatment-card {
        position: absolute;
        width: 260px;
        aspect-ratio: 3/4;
        border-radius: 16px;
        overflow: hidden;
        transition: transform .5s ease, opacity .5s ease, filter .5s ease, z-index 0s;
        will-change: transform, opacity, filter;
        box-shadow: 0 8px 30px rgba(0,0,0,.18);
    }
    .treatment-card img {
        border-radius: 16px;
    }
    .treatment-card::after {
        border-radius: 16px;
    }

    /* Active (center) card */
    .treatment-card.coverflow-active {
        z-index: 5;
        transform: translateX(-50%) scale(1);
        left: 50%;
        opacity: 1;
        filter: none;
    }

    /* Left neighbour */
    .treatment-card.coverflow-left-1 {
        z-index: 3;
        left: 50%;
        transform: translateX(-130%) scale(.78);
        opacity: .55;
        filter: blur(1.5px) brightness(.85);
    }

    /* Right neighbour */
    .treatment-card.coverflow-right-1 {
        z-index: 3;
        left: 50%;
        transform: translateX(30%) scale(.78);
        opacity: .55;
        filter: blur(1.5px) brightness(.85);
    }

    /* Further left */
    .treatment-card.coverflow-left-2 {
        z-index: 1;
        left: 50%;
        transform: translateX(-190%) scale(.6);
        opacity: .2;
        filter: blur(3px) brightness(.7);
    }

    /* Further right */
    .treatment-card.coverflow-right-2 {
        z-index: 1;
        left: 50%;
        transform: translateX(90%) scale(.6);
        opacity: .2;
        filter: blur(3px) brightness(.7);
    }

    /* Hidden cards */
    .treatment-card.coverflow-hidden {
        opacity: 0;
        pointer-events: none;
        z-index: 0;
        left: 50%;
        transform: translateX(-50%) scale(.5);
    }

    /* Carousel arrows */
    .carousel-arrow {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 10;
        background: rgba(255,255,255,.85);
        border: none;
        border-radius: 50%;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        box-shadow: 0 2px 8px rgba(0,0,0,.15);
        color: var(--green);
    }
    .carousel-arrow svg { width: 22px; height: 22px; }
    .carousel-prev { left: 10px; }
    .carousel-next { right: 10px; }

    /* CTA below carousel */
    .treatments-cta-mobile {
        display: block;
        text-align: center;
        padding: 0 1.5rem 1.5rem;
    }
    .treatments-cta-mobile .btn-green {
        display: block;
        width: 100%;
        text-align: center;
        padding: 1rem;
        font-size: 1rem;
        text-transform: uppercase;
        letter-spacing: .08em;
        font-weight: 600;
    }

    /* Mobile tooltip: hidden by default, shown on tap via .tooltip-open */
    .treatment-card .treatment-tooltip {
        display: flex;
        opacity: 0;
        pointer-events: none;
        transition: opacity .35s ease;
        border-radius: 16px;
        padding: 1.8rem 1.6rem 1.6rem;
        background: rgba(244,242,237,.97);
    }
    .treatment-card:hover .treatment-tooltip,
    .treatment-card:focus-within .treatment-tooltip { opacity: 0; pointer-events: none; }
    .treatment-card.tooltip-open .treatment-tooltip {
        opacity: 1;
        pointer-events: auto;
    }
    .treatment-card.tooltip-open .treatment-tooltip h4 {
        font-size: 1.2rem;
        margin-bottom: .6rem;
    }
    .treatment-card.tooltip-open .treatment-tooltip p {
        font-size: .88rem;
        line-height: 1.6;
        margin-bottom: 1.2rem;
    }
    .treatment-card.tooltip-open .treatment-tooltip a {
        color: var(--gold);
        font-size: .82rem;
        letter-spacing: .05em;
        align-self: flex-start;
        background: none;
        padding: 0;
        border-radius: 0;
        font-weight: inherit;
        text-decoration: none;
    }

    #testimonials { padding: 1.8rem 0 2rem; }
    .testimonials-header { padding: 0 1.2rem; text-align: center; margin-bottom: 1.2rem; }
    .testimonials-layout {
        grid-template-columns: 1fr;
        padding: 0 1rem;
        gap: 2rem;
    }
    /* Widget wrappers stay at their native width (420px) and are centred
       by the flex-centered .testimonial-source parent. overflow:hidden on
       the outer source row clips any arrow overhang without breaking the
       plugins' internal slide positioning (which is calculated against the
       natural widget width at init time). */
    .testimonial-source {
        align-items: center;
        width: 100%;
        overflow: hidden;
    }
    .testimonial-widget {
        max-width: 420px;
        width: 100%;
        margin: 0 auto;
        min-height: 260px;
        position: relative;
    }
    /* Crisalix widget footer ("Mostrando as avaliações..." + "Ver todas") renders
       in its own container with its own flex layout. Force-centre every descendant
       on mobile since we can't target the widget's injected classes reliably. */
    .testimonial-widget-crisalix,
    .testimonial-widget-crisalix * {
        text-align: center !important;
        justify-content: center !important;
    }

    /* Google Reviews (Rich Plugins) header — centre the title/stars/rating
       block on mobile to match mymoment.pt. Plugin default aligns them left. */
    .testimonial-widget-google .wp-gr .grw-header,
    .testimonial-widget-google .wp-gr .grw-header * {
        text-align: center !important;
        justify-content: center !important;
        align-items: center !important;
    }

    .contact-grid { grid-template-columns: 1fr; gap: 2.5rem; }
    .contact-left h2 { font-size: 3rem; }

    /* ── Mobile: a clone of #contact is appended as .contact-lead below hero via JS (see main.js) ── */
    .contact-lead {
        background: var(--cream);
        padding: 2.2rem 1.2rem 0;
        margin-bottom: 0;
    }
    #mobile-contact-slot .contact-grid {
        gap: 1.2rem;
        padding: 0;
    }
    #mobile-contact-slot .contact-left {
        text-align: left;
    }
    #mobile-contact-slot .contact-left h2 {
        font-size: 3rem;
        line-height: 1;
        font-weight: 700;
        margin-bottom: 1rem;
    }
    #mobile-contact-slot .contact-left p {
        display: inline;
        font-size: .92rem;
        color: var(--text-soft);
    }
    #mobile-contact-slot .phone-link {
        display: inline;
        font-size: .92rem;
        font-weight: 600;
        color: var(--text-soft);
        margin-top: 0;
        margin-left: .25rem;
    }
    #mobile-contact-slot .phone-link svg { display: none; }
    #mobile-contact-slot .contact-form form { gap: .65rem; }
    #mobile-contact-slot .form-row {
        display: flex;
        flex-direction: column;
        gap: .65rem;
    }
    #mobile-contact-slot .form-group label {
        position: absolute;
        width: 1px; height: 1px;
        padding: 0; margin: -1px;
        overflow: hidden;
        clip: rect(0,0,0,0);
        white-space: nowrap;
        border: 0;
    }
    #mobile-contact-slot .form-group input,
    #mobile-contact-slot .form-group textarea {
        padding: 1rem 1.1rem;
        border: 1px solid rgba(179,155,126,.55);
        background: transparent;
        border-radius: 2px;
        font-size: .92rem;
    }
    #mobile-contact-slot .form-group input::placeholder,
    #mobile-contact-slot .form-group textarea::placeholder {
        color: var(--text);
        opacity: .75;
    }
    #mobile-contact-slot .form-group textarea { min-height: 110px; }
    #mobile-contact-slot .form-group select {
        padding: 1rem 1.1rem;
        background-color: var(--gold);
        color: #fff;
        border: 1px solid var(--gold);
        border-radius: 2px;
        font-size: .92rem;
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><path d='M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z'/></svg>");
        background-repeat: no-repeat;
        background-position: right .85rem center;
        background-size: 14px;
        padding-right: 2.4rem;
    }
    #mobile-contact-slot .form-group select option {
        background: #fff;
        color: var(--text);
    }
    #mobile-contact-slot .btn-submit {
        width: 100%;
        align-self: stretch;
        background: var(--green);
        padding: 1.1rem;
        font-size: .82rem;
        letter-spacing: .18em;
        margin-top: 1rem;
    }

    .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
    .footer-contacts { justify-self: start; }
    .footer-bottom { flex-direction: column; align-items: flex-start; }

    .insta-card { width: 260px; }
    .form-row { grid-template-columns: 1fr; }
    .btn-submit { align-self: stretch; }
}

@media (max-width: 560px) {
    .container { padding: 0 1.2rem; }
    .hero-cta { flex-direction: column; width: 100%; }
    .hero-cta .btn { width: 100%; justify-content: center; }
    .contact-left h2 { font-size: 2.5rem; }
    .insta-card { width: 220px; }
}

/* ─── 404 page ─── */
.page-404 { padding: 10rem 0 8rem; background: var(--cream); min-height: 70vh; display: flex; align-items: center; }
.page-404 .err-wrap { max-width: 620px; margin: 0 auto; text-align: center; }
.page-404 .err-eyebrow { text-transform: uppercase; letter-spacing: .25em; font-size: .8rem; color: var(--gold-dk); margin: 0 0 1rem; }
.page-404 .err-title { font-size: 3.2rem; color: var(--green); margin: 0 0 1.6rem; line-height: 1.1; }
.page-404 .err-text { font-size: 1.1rem; color: var(--text-soft); line-height: 1.6; margin: 0 0 2.4rem; }
.page-404 .err-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.page-404 .err-btn { display: inline-block; padding: 1rem 1.8rem; font-size: .95rem; letter-spacing: .05em; text-decoration: none; border-radius: 2px; transition: all .2s ease; }
.page-404 .err-btn-primary { background: var(--green); color: var(--white); }
.page-404 .err-btn-primary:hover { background: var(--green-dk); }
.page-404 .err-btn-secondary { background: transparent; color: var(--green); border: 1px solid var(--green); }
.page-404 .err-btn-secondary:hover { background: var(--green); color: var(--white); }

@media (max-width: 560px) {
    .page-404 .err-title { font-size: 2.2rem; }
    .page-404 .err-actions { flex-direction: column; }
    .page-404 .err-btn { width: 100%; }
}

/* ===== About expand (Dr. Nuno Maria) ===== */
.about-extra {
    max-height: 0; overflow: hidden;
    transition: max-height .6s ease;
}
.about-extra.expanded { max-height: 5000px; }
.about-extra p em { font-style: italic; }

.about-expand-btn {
    display: inline-flex; align-items: center; gap: .4rem;
    color: var(--gold);
    font-size: .85rem;
    margin-top: .5rem;
    background: none; border: 0; padding: 0; cursor: pointer;
    transition: var(--ease);
}
.about-expand-btn:hover { color: var(--gold-dk); }
.about-expand-btn svg { transition: transform .3s; }
.about-expand-btn[aria-expanded="true"] svg { transform: rotate(180deg); }