/* ==========================================================================
   Luana Stamerra - Design system
   Used by the pages listed in MODERN_PAGES (inc/bootstrap.php).
   Legacy pages keep Bootstrap + css/main.css until they are migrated.

   1. Fonts         5. Components
   2. Tokens        6. Header and navigation
   3. Base          7. Panels (colored section blocks)
   4. Layout        8. Homepage sections
                    9. Contact, footer, action bar
                   10. Responsive
                   11. Motion
   ========================================================================== */

/* 1. Fonts (self-hosted, Fontsource builds of Google Fonts, OFL) */
@font-face {
    font-family: "Figtree";
    src: url("../fonts/site/figtree-latin-wght-normal.woff2") format("woff2");
    font-weight: 300 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Figtree";
    src: url("../fonts/site/figtree-latin-wght-italic.woff2") format("woff2");
    font-weight: 300 900;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: "Playfair Display";
    src: url("../fonts/site/playfair-display-latin-wght-normal.woff2") format("woff2");
    font-weight: 400 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Playfair Display";
    src: url("../fonts/site/playfair-display-latin-wght-italic.woff2") format("woff2");
    font-weight: 400 900;
    font-style: italic;
    font-display: swap;
}

/* 2. Tokens. Palette sampled from the logo: petrol ink, teal, sage, mist.
   Color roles: teal is the only interactive color (buttons, links, focus).
   Secondary (clay) and tertiary (slate) are tonal: emphasis, icons, tints, decoration.
   Every *-soft tint keeps --c-ink-soft and --c-teal above 4.5:1. */
:root {
    color-scheme: light;

    --c-ink: #0b2d33;              /* text, dark panels (12.5:1 on --c-base) */
    --c-ink-soft: #4a6366;         /* secondary text (5.5:1 on --c-base) */
    --c-teal: #3a6866;             /* interactive: buttons, links, focus */
    --c-teal-strong: #2f5957;      /* interactive hover */
    --c-sage: #86a18d;             /* decorative only */
    --c-sage-soft: #d6e3da;        /* panel tint */
    --c-mist: #c4d4cb;             /* decorative fills, text on dark (9.5:1 on ink) */
    --c-mist-soft: #e4ece8;
    --c-secondary: #c97b63;        /* clay rose: decorative only (dots, petals, stars) */
    --c-secondary-strong: #9a5340; /* text and icons on light tints */
    --c-secondary-soft: #f5e3da;   /* panel tint */
    --c-tertiary: #5f7f8c;         /* slate blue from the logo petal: decorative only */
    --c-tertiary-strong: #4d6d7a;  /* text and icons on light tints */
    --c-tertiary-soft: #dde8ed;    /* panel tint */
    --c-base: #e8efeb;             /* page background, never plain white */
    --c-bg: #f3f6f4;               /* light panels */
    --c-surface: #fbfcfb;          /* cards on any tint */
    --c-line: rgb(11 45 51 / 0.12);
    --c-line-strong: rgb(11 45 51 / 0.22);
    --c-on-dark: #f3f6f4;
    --c-on-dark-soft: #b9ccc3;     /* 8.7:1 on ink */
    --c-on-teal-soft: #e3ece7;     /* 5.2:1 on teal */

    --font-sans: "Figtree", "Segoe UI", system-ui, -apple-system, sans-serif;
    --font-serif: "Playfair Display", Georgia, "Times New Roman", serif;

    --fs-sm: 0.9375rem;
    --fs-base: 1.0625rem;
    --fs-lead: clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);
    --fs-h3: clamp(1.25rem, 1.15rem + 0.45vw, 1.5625rem);
    --fs-h2: clamp(2.125rem, 1.5rem + 2.3vw, 3.5rem);
    --fs-h1: clamp(2.75rem, 1.6rem + 4vw, 4.75rem);

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4rem;
    --section-y: clamp(3.5rem, 2.25rem + 4.5vw, 6.5rem);
    --gutter: clamp(1.125rem, 0.5rem + 2.4vw, 2.5rem);
    --container: 1240px;
    --inset: clamp(8px, 0.4rem + 0.6vw, 16px);   /* gap between panels and viewport */
    --facts-overlap: clamp(2.75rem, 2rem + 2vw, 3.25rem); /* home facts card over the hero edge */

    /* Shape rule: buttons and chips are pills, cards --radius, media --radius-lg, panels --radius-xl. */
    --radius-sm: 12px;
    --radius: 22px;
    --radius-lg: 30px;
    --radius-xl: clamp(26px, 1rem + 1.6vw, 44px);
    --radius-pill: 999px;

    --shadow-sm: 0 1px 2px rgb(11 45 51 / 0.06), 0 4px 12px rgb(11 45 51 / 0.05);
    --shadow: 0 2px 6px rgb(11 45 51 / 0.05), 0 24px 48px -20px rgb(11 45 51 / 0.25);

    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --dur: 220ms;

    --header-h: 96px;
    --header-h-compact: 76px;

    /* Layer scale: action bar 20, header 30, mobile nav 40, grain 50 (no pointer events). */
    --z-bar: 20;
    --z-header: 30;
    --z-nav: 40;
    --z-grain: 50;
}

/* 3. Base */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h-compact) + 1rem);
}

body {
    margin: 0;
    background: var(--c-base);
    color: var(--c-ink);
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    line-height: 1.65;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: clip;
}

/* Film grain: fixed, non-interactive, never on scrolling layers. */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: var(--z-grain);
    pointer-events: none;
    opacity: 0.05;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.04 0 0 0 0 0.18 0 0 0 0 0.2 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

body.nav-open {
    overflow: hidden;
}

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

img {
    height: auto;
}

h1,
h2,
h3,
h4,
p,
ul,
ol,
figure,
blockquote {
    margin: 0;
}

ul[role="list"],
ol[role="list"] {
    list-style: none;
    padding: 0;
}

a {
    color: inherit;
    text-decoration-color: var(--c-mist);
    text-underline-offset: 0.2em;
}

button {
    font: inherit;
    color: inherit;
}

:focus-visible {
    outline: 2px solid var(--c-teal);
    outline-offset: 3px;
    border-radius: 6px;
}

.panel--ink :focus-visible,
.panel--teal :focus-visible {
    outline-color: var(--c-on-dark);
}

.panel--teal .contact-card :focus-visible {
    outline-color: var(--c-teal);
}

::selection {
    background: var(--c-mist);
    color: var(--c-ink);
}

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

.skip-link {
    position: absolute;
    left: var(--gutter);
    top: -100px;
    z-index: 100;
    padding: var(--space-3) var(--space-5);
    background: var(--c-ink);
    color: var(--c-on-dark);
    border-radius: var(--radius-pill);
    font-weight: 600;
    text-decoration: none;
}

.skip-link:focus {
    top: var(--space-3);
}

/* Messages focused by script (e.g. a form error) are not controls: no focus ring. */
[tabindex="-1"]:focus {
    outline: none;
}

/* 4. Layout */
.container {
    width: 100%;
    max-width: calc(var(--container) + var(--gutter) * 2);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.page-main {
    display: flex;
    flex-direction: column;
    gap: var(--inset);
}

.section {
    padding-block: var(--section-y);
}

.section__head {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    justify-content: space-between;
    gap: var(--space-5) var(--space-6);
    margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem);
}

.section__head > :first-child {
    max-width: 46rem;
}

/* Typography */
.display,
.h2,
.h3 {
    font-family: var(--font-serif);
    font-weight: 500;
    letter-spacing: -0.015em;
    color: var(--c-ink);
    text-wrap: balance;
}

.display {
    font-size: var(--fs-h1);
    line-height: 1.06;
    letter-spacing: -0.03em;
}

.h2 {
    font-size: var(--fs-h2);
    line-height: 1.08;
    letter-spacing: -0.025em;
}

.h3 {
    font-size: var(--fs-h3);
    line-height: 1.25;
}

/* Italic emphasis in the same family; leading leaves room for descenders. */
.display em,
.h2 em {
    font-style: italic;
    font-weight: 400;
    color: var(--c-secondary-strong);
}

.lead {
    font-size: var(--fs-lead);
    line-height: 1.6;
    color: var(--c-ink-soft);
    max-width: 38rem;
    text-wrap: pretty;
}

/* Soft brush-stroke highlight for key words (<strong class="hl">): a thin, translucent clay stroke
   under the baseline, cloned on every line; it sweeps in once when motion is welcome. */
.hl {
    padding: 0 0.08em;
    margin: 0 -0.04em;
    font-weight: 500;
    color: var(--c-ink);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40' preserveAspectRatio='none'%3E%3Cpath d='M4 9.5C34 4.6 71 7.8 108 5.6c31-1.8 60-2.4 88 1.2 2.3 6.5 2.6 15.9 1.2 24.4-33 4.6-70 1.4-106 3.8-29 1.9-57 2.6-86 .2C2.6 27.6 2 17.2 4 9.5Z' fill='%23C97B63' fill-opacity='.26'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 100% 0.42em;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

/* Inside prose blocks the highlight keeps its softer weight. */
.prose .hl,
.article-prose .hl {
    font-weight: 500;
}

/* On dark panels: light text, lighter clay stroke. */
.panel--teal .hl,
.panel--ink .hl {
    color: var(--c-on-dark);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40' preserveAspectRatio='none'%3E%3Cpath d='M4 9.5C34 4.6 71 7.8 108 5.6c31-1.8 60-2.4 88 1.2 2.3 6.5 2.6 15.9 1.2 24.4-33 4.6-70 1.4-106 3.8-29 1.9-57 2.6-86 .2C2.6 27.6 2 17.2 4 9.5Z' fill='%23E8B6A5' fill-opacity='.4'/%3E%3C/svg%3E");
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--c-teal-strong);
    margin-bottom: var(--space-4);
}

.prose > * + * {
    margin-top: 1em;
}

.prose p {
    color: var(--c-ink-soft);
    max-width: 65ch;
    text-wrap: pretty;
}

.prose strong {
    color: var(--c-ink);
    font-weight: 600;
}

/* 5. Components */
.icon {
    width: 1.25em;
    height: 1.25em;
    flex: none;
    fill: currentColor;
}

/* Illustrative duotone icon in a soft round chip. Tone set by --chip-bg / --icon-duo. */
.icon-chip {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--chip-bg, var(--c-mist-soft));
    color: var(--chip-fg, var(--c-teal-strong));
    --icon-duo: var(--chip-duo, var(--c-secondary));
    --icon-duo-opacity: 0.45;
    flex: none;
}

.icon-chip .icon {
    width: 30px;
    height: 30px;
}

.tone-sage {
    --chip-bg: var(--c-sage-soft);
    --chip-fg: var(--c-teal-strong);
    --chip-duo: var(--c-sage);
}

.tone-clay {
    --chip-bg: var(--c-secondary-soft);
    --chip-fg: var(--c-secondary-strong);
    --chip-duo: var(--c-secondary);
}

.tone-slate {
    --chip-bg: var(--c-tertiary-soft);
    --chip-fg: var(--c-tertiary-strong);
    --chip-duo: var(--c-tertiary);
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: 52px;
    padding: 0.8rem 1.625rem;
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition:
        background-color var(--dur) var(--ease-out),
        border-color var(--dur) var(--ease-out),
        color var(--dur) var(--ease-out),
        transform var(--dur) var(--ease-out),
        box-shadow var(--dur) var(--ease-out);
}

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

.btn:active {
    transform: translateY(1px) scale(0.99);
}

.btn--primary {
    background: var(--c-teal);
    color: var(--c-surface);
    box-shadow: 0 10px 24px -12px rgb(47 89 87 / 0.8);
}

.btn--primary:hover {
    background: var(--c-teal-strong);
}

.btn--ghost {
    border-color: var(--c-line-strong);
    color: var(--c-ink);
    background: rgb(251 252 251 / 0.55);
}

.btn--ghost:hover {
    border-color: var(--c-teal);
    background: var(--c-surface);
}

.btn--light {
    background: var(--c-on-dark);
    color: var(--c-ink);
}

.btn--light:hover {
    background: #ffffff;
}

.btn--outline-light {
    border-color: rgb(243 246 244 / 0.4);
    color: var(--c-on-dark);
}

.btn--outline-light:hover {
    border-color: var(--c-on-dark);
}

.btn--sm {
    min-height: 46px;
    padding: 0.625rem 1.25rem;
    font-size: 0.9375rem;
}

.btn .icon {
    width: 1.125em;
    height: 1.125em;
}

.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 44px;
    font-weight: 600;
    color: var(--c-teal-strong);
    text-decoration: none;
}

.link-arrow .icon {
    transition: transform var(--dur) var(--ease-out);
}

.link-arrow:hover {
    color: var(--c-ink);
}

.link-arrow:hover .icon {
    transform: translateX(3px);
}

.link-arrow[target="_blank"]:hover .icon {
    transform: translate(2px, -2px);
}

.link-arrow--light {
    color: var(--c-mist);
}

.link-arrow--light:hover {
    color: var(--c-on-dark);
}

.stars {
    display: flex;
    gap: 2px;
    color: var(--c-secondary);
}

.stars .icon {
    width: 1rem;
    height: 1rem;
}

.monogram {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--c-secondary-soft);
    color: var(--c-secondary-strong);
    font-family: var(--font-serif);
    font-size: 1rem;
    font-weight: 600;
    flex: none;
}

/* 6. Header and navigation */
.site-header {
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    border-bottom: 1px solid transparent;
    transition:
        background-color var(--dur) var(--ease-out),
        border-color var(--dur) var(--ease-out);
}

.site-header.is-scrolled {
    background: rgb(232 239 235 / 0.88);
    border-bottom-color: var(--c-line);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    backdrop-filter: blur(16px) saturate(140%);
}

/* backdrop-filter would become the containing block of the fixed mobile panel. */
.nav-open .site-header {
    background: var(--c-base);
    border-bottom-color: var(--c-line);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

@media (prefers-reduced-transparency: reduce) {
    .site-header.is-scrolled {
        background: var(--c-base);
        backdrop-filter: none;
    }
}

.header-sentinel {
    position: absolute;
    top: 0;
    height: 24px;
    width: 1px;
    pointer-events: none;
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
    height: var(--header-h);
    transition: height 320ms var(--ease-out);
}

.is-scrolled .site-header__inner {
    height: var(--header-h-compact);
}

.brand {
    display: block;
    flex: none;
    border-radius: 6px;
}

.brand img {
    height: 64px;
    width: auto;
    transition: height 320ms var(--ease-out);
}

.is-scrolled .brand img {
    height: 52px;
}

.nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-right: -6px;
    border: 1px solid var(--c-line-strong);
    border-radius: 50%;
    background: rgb(251 252 251 / 0.6);
    cursor: pointer;
}

.nav-toggle .icon {
    width: 24px;
    height: 24px;
}

.nav-toggle .icon--close,
.nav-toggle[aria-expanded="true"] .icon--open {
    display: none;
}

.nav-toggle[aria-expanded="true"] .icon--close {
    display: block;
}

.site-nav {
    display: flex;
    align-items: center;
    gap: var(--space-5);
}

.site-nav__list {
    display: flex;
    align-items: center;
    gap: 2px;
    margin: 0;
    padding: 4px;
    list-style: none;
    background: rgb(251 252 251 / 0.6);
    border: 1px solid var(--c-line);
    border-radius: var(--radius-pill);
}

.site-nav__list > li {
    position: relative;
}

.site-nav__link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    min-height: 44px;
    padding: 0.5rem 1rem;
    border: 0;
    border-radius: var(--radius-pill);
    background: transparent;
    font-size: 0.9875rem;
    font-weight: 500;
    color: var(--c-ink);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}

.site-nav__link:hover {
    background: var(--c-mist-soft);
}

.site-nav__link[aria-current="page"],
.site-nav__link.is-current {
    background: var(--c-ink);
    color: var(--c-on-dark);
    font-weight: 600;
}

.site-nav__link .icon {
    width: 14px;
    height: 14px;
    transition: transform var(--dur) var(--ease-out);
}

.site-nav__link[aria-expanded="true"] .icon {
    transform: rotate(180deg);
}

/* Areas mega menu: area cards with icon and summary, plus a "where to start" aside. */
.mega__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.mega__item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: 0.625rem 0.75rem;
    border-radius: var(--radius-sm);
    text-decoration: none;
    color: var(--c-ink);
    transition: background-color var(--dur) var(--ease-out);
}

.mega__item:hover,
.mega__item[aria-current="page"] {
    background: var(--c-mist-soft);
}

.mega__item .icon-chip {
    width: 40px;
    height: 40px;
    transition: transform var(--dur) var(--ease-out);
}

.mega__item .icon-chip .icon {
    width: 22px;
    height: 22px;
}

.mega__item:hover .icon-chip {
    transform: scale(1.06) rotate(-4deg);
}

.mega__title {
    display: block;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.3;
}

.mega__item[aria-current="page"] .mega__title {
    color: var(--c-teal-strong);
}

.mega__desc {
    display: -webkit-box;
    margin-top: 2px;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--c-ink-soft);
}

.mega__more,
.mega__aside {
    display: none;
}

.site-nav__actions {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

/* Shortcuts of the collapsed navigation (tablet header CTA, call in the panel): never on desktop. */
.header-cta,
.site-nav__call {
    display: none;
}

@media (min-width: 1200px) {
    /* The panel is centred on the header, not on the toggle, so it can be wide. */
    .site-header__inner {
        position: relative;
    }

    .site-nav__list > li.has-sub {
        position: static;
    }

    .site-nav__sub {
        position: absolute;
        top: calc(100% - 6px);
        left: 50%;
        width: min(60rem, calc(100vw - 2 * var(--gutter)));
        display: grid;
        grid-template-columns: minmax(0, 1fr) 16.5rem;
        grid-template-rows: minmax(0, 1fr) auto;
        gap: 0 var(--space-3);
        padding: var(--space-3);
        background: var(--c-surface);
        border: 1px solid var(--c-line);
        border-radius: var(--radius-lg);
        box-shadow: 0 30px 60px -24px rgb(11 45 51 / 0.35), var(--shadow-sm);
        opacity: 0;
        visibility: hidden;
        transform: translate(-50%, -8px);
        transition:
            opacity var(--dur) var(--ease-out),
            transform 320ms var(--ease-out),
            visibility 0s linear var(--dur);
    }

    /* Invisible bridge so the pointer can travel from the toggle to the panel. */
    .site-nav__sub::before {
        content: "";
        position: absolute;
        inset: -34px 0 auto;
        height: 34px;
    }

    /* Rows share the height set by the aside: no empty band under the last area. */
    .mega__list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: 1fr;
        gap: 2px var(--space-2);
        padding: var(--space-2);
    }

    .mega__item {
        height: 100%;
    }

    .mega__more {
        display: block;
        margin-top: var(--space-1);
        padding: var(--space-1) 0.75rem 0;
        border-top: 1px solid var(--c-line);
    }

    .mega__aside {
        grid-row: 1 / -1;
        grid-column: 2;
        position: relative;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-3);
        padding: var(--space-5);
        border-radius: var(--radius);
        background:
            radial-gradient(80% 70% at 100% 0%, rgb(201 123 99 / 0.22), transparent 70%),
            linear-gradient(160deg, var(--c-sage-soft), var(--c-tertiary-soft));
        font-size: var(--fs-sm);
        line-height: 1.5;
        color: var(--c-ink-soft);
    }

    .mega__aside img {
        width: 64px;
    }

    .mega__claim {
        font-family: var(--font-serif);
        font-size: 1.375rem;
        line-height: 1.2;
        color: var(--c-ink);
    }

    .mega__aside .btn {
        margin-top: auto;
        width: 100%;
    }

    .site-nav__link[aria-expanded="true"] + .site-nav__sub,
    .no-js .has-sub:focus-within .site-nav__sub {
        opacity: 1;
        visibility: visible;
        transform: translate(-50%, 0);
        transition-delay: 0s;
    }

    @media (hover: hover) {
        .has-sub:hover .site-nav__sub {
            opacity: 1;
            visibility: visible;
            transform: translate(-50%, 0);
            transition-delay: 0s;
        }
    }
}

/* 7. Panels: each section is a rounded block of its own color, inset from the viewport. */
.panel {
    margin-inline: var(--inset);
    border-radius: var(--radius-xl);
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.panel--light {
    background: var(--c-bg);
}

.panel--sage {
    background: var(--c-sage-soft);
}

.panel--clay {
    background: var(--c-secondary-soft);
}

.panel--slate {
    background: var(--c-tertiary-soft);
}

.panel--ink {
    background: var(--c-ink);
    color: var(--c-on-dark);
}

.panel--teal {
    background: var(--c-teal);
    color: var(--c-on-dark);
}

.panel--ink .h2,
.panel--ink .h3,
.panel--teal .h2,
.panel--teal .h3 {
    color: var(--c-on-dark);
}

.panel--ink .eyebrow {
    color: var(--c-mist);
}

.panel--teal .eyebrow {
    color: var(--c-on-teal-soft);
}

.panel--ink .h2 em,
.panel--teal .h2 em {
    color: #e8b6a5;
}

/* 8. Homepage sections */

/* Hero: brand mesh gradient (clay, slate, mist), not a generic AI gradient. */
.hero {
    padding-block: clamp(1.5rem, 1rem + 2.5vw, 3.5rem) calc(var(--facts-overlap) + clamp(2.5rem, 2rem + 1.5vw, 3.5rem));
    background:
        radial-gradient(55% 75% at 92% 8%, rgb(201 123 99 / 0.26), transparent 65%),
        radial-gradient(45% 65% at 0% 100%, rgb(95 127 140 / 0.24), transparent 70%),
        radial-gradient(40% 50% at 45% 35%, rgb(251 252 251 / 0.9), transparent 70%),
        linear-gradient(165deg, var(--c-bg) 0%, var(--c-sage-soft) 100%);
}

.hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: center;
    gap: clamp(2rem, 1rem + 4vw, 5rem);
}

.hero__copy .display {
    margin-bottom: var(--space-5);
    padding-bottom: 0.05em;
}

.hero__copy .lead {
    margin-bottom: var(--space-6);
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.hero__media {
    position: relative;
    justify-self: end;
    width: min(100%, 470px);
}

/* Stacked-photo composition: a tilted brand-tinted card behind, a clay dot from the logo. */
.hero__media::before {
    content: "";
    position: absolute;
    inset: 4% -5% -4% 6%;
    border-radius: var(--radius-lg);
    background: linear-gradient(150deg, var(--c-secondary-soft) 0%, var(--c-tertiary-soft) 100%);
    box-shadow: inset 0 0 0 1px rgb(251 252 251 / 0.7);
    transform: rotate(4deg);
    z-index: -1;
}

.hero__media::after {
    content: "";
    position: absolute;
    top: -4%;
    left: -6%;
    width: clamp(52px, 5.5vw, 84px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--c-secondary);
}

.hero__media img {
    width: 100%;
    aspect-ratio: 4 / 5;
    max-height: min(64vh, 590px);
    object-fit: cover;
    object-position: 50% 25%;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    background: var(--c-mist-soft);
}

/* Quick facts: card that straddles the bottom edge of the hero panel.
   Same width as the hero content: the hero container sits inside a panel inset
   from the viewport, so this one is narrowed by the same inset. */
.facts-wrap {
    position: relative;
    z-index: 2;
    width: calc(100% - var(--inset) * 2);
    margin-top: calc(-1 * var(--facts-overlap) - var(--inset));
}

.facts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: var(--space-3);
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
}

/* Each fact is a link to the page that expands it. Dividers sit on the <li>,
   so the hover tint can stay an inset rounded shape inside its column. */
.facts > li {
    display: flex;
    min-width: 0;
}

.facts > li + li {
    border-left: 1px solid var(--c-line);
}

.fact {
    position: relative;
    display: flex;
    flex: 1;
    gap: var(--space-4);
    align-items: flex-start;
    margin: 0 var(--space-2);
    padding: var(--space-4) var(--space-3);
    border-radius: calc(var(--radius-lg) - var(--space-3));
    color: var(--c-ink);
    text-decoration: none;
    transition:
        background-color var(--dur) var(--ease-out),
        color var(--dur) var(--ease-out);
}

.fact .icon-chip {
    width: 48px;
    height: 48px;
    transition: transform var(--dur) var(--ease-out);
}

.fact .icon-chip .icon {
    width: 24px;
    height: 24px;
}

.fact__text {
    display: block;
    min-width: 0;
    padding-top: 2px;
    padding-right: 14px;
}

.fact strong {
    display: block;
    font-weight: 600;
    line-height: 1.3;
}

.fact__text > span {
    display: block;
    margin-top: 2px;
    font-size: var(--fs-sm);
    line-height: 1.45;
    color: var(--c-ink-soft);
    text-wrap: pretty;
}

.nowrap {
    white-space: nowrap;
}

/* The arrow only signals the link on hover/focus; it never takes text width. */
.fact__arrow {
    position: absolute;
    top: var(--space-4);
    right: var(--space-3);
    width: 18px;
    height: 18px;
    color: var(--c-teal);
    opacity: 0;
    transform: translateX(-4px);
    transition:
        opacity var(--dur) var(--ease-out),
        transform var(--dur) var(--ease-out);
}

/* Dark hover, like the reviews bubble: stands out on the pale hero gradient. */
.fact:hover,
.fact:focus-visible {
    background: var(--c-ink);
    color: var(--c-on-dark);
}

.fact__text > span {
    transition: color var(--dur) var(--ease-out);
}

.fact:hover .fact__text > span,
.fact:focus-visible .fact__text > span {
    color: var(--c-on-dark);
}

.fact:hover .fact__arrow,
.fact:focus-visible .fact__arrow {
    color: var(--c-on-dark);
}

.fact:hover .icon-chip {
    transform: scale(1.06);
}

.fact:hover .fact__arrow,
.fact:focus-visible .fact__arrow {
    opacity: 1;
    transform: none;
}

.fact:active {
    background: var(--c-teal-strong);
}

/* About: photo with an overlapping credentials badge, text with icon specialties. */
.about__grid {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(2.5rem, 1rem + 5vw, 6rem);
    align-items: center;
}

.about__visual {
    position: relative;
    padding-bottom: var(--space-7);
}

.about__media {
    border-radius: var(--radius-lg);
    overflow: hidden;
    aspect-ratio: 4 / 5;
    background: var(--c-mist-soft);
    box-shadow: var(--shadow);
}

.about__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 22%;
}

.about__badge {
    position: absolute;
    right: clamp(-2rem, -3vw, -1rem);
    bottom: 0;
    display: flex;
    align-items: center;
    gap: var(--space-4);
    max-width: min(22rem, 90%);
    padding: var(--space-4) var(--space-5);
    background: var(--c-surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.about__badge img {
    width: 64px;
    flex: none;
}

.about__badge strong {
    display: block;
    font-family: var(--font-serif);
    font-size: 1.1875rem;
    font-weight: 500;
    line-height: 1.25;
}

.about__badge span {
    display: block;
    margin-top: 2px;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--c-ink-soft);
}

.about__body .h2 {
    margin-bottom: var(--space-4);
}

.about__body .lead {
    margin-bottom: var(--space-6);
}

.specialties {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
    margin: 0 0 var(--space-5);
    padding: 0;
    list-style: none;
}

.specialties li {
    display: flex;
    gap: var(--space-4);
    align-items: flex-start;
    padding: var(--space-5);
    background: var(--c-surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}

.specialties li:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow);
}

.specialties .icon-chip {
    width: 48px;
    height: 48px;
}

.specialties .icon-chip .icon {
    width: 26px;
    height: 26px;
}

.specialties li > span:last-child {
    font-size: var(--fs-sm);
    line-height: 1.45;
    color: var(--c-ink-soft);
}

.specialties strong {
    display: block;
    margin-bottom: var(--space-1);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--c-ink);
}

/* Services bento on the ink panel: 1 tall photo cell + 4 cells, exact count. */
.bento {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) repeat(2, minmax(0, 1fr));
    grid-template-rows: auto auto;
    gap: var(--space-4);
}

.tile {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: clamp(1.5rem, 1.2rem + 1vw, 2.125rem);
    border-radius: var(--radius);
    background: var(--c-surface);
    color: var(--c-ink);
    min-height: 260px;
}

.tile .icon-chip {
    margin-bottom: auto;
    background: rgb(251 252 251 / 0.7);
}

.tile h3 {
    margin-top: var(--space-6);
}

.tile p {
    color: var(--c-ink-soft);
    font-size: var(--fs-sm);
    line-height: 1.55;
}

.tile--photo {
    grid-row: span 2;
    justify-content: flex-end;
    padding: 0;
    overflow: hidden;
    background: #123a40;
    color: var(--c-on-dark);
    min-height: 520px;
}

.tile--photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 45% 60%;
}

.tile--photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgb(11 45 51 / 0) 30%, rgb(11 45 51 / 0.9) 82%);
}

.tile__body {
    position: relative;
    z-index: 1;
    padding: clamp(1.5rem, 1.2rem + 1vw, 2.25rem);
}

/* Light tiles on the ink panel keep dark text. */
.panel--ink .tile .h3 {
    color: var(--c-ink);
}

.panel--ink .tile--photo .h3,
.panel--ink .tile--teal .h3 {
    color: var(--c-on-dark);
}

.tile--photo h3 {
    color: var(--c-on-dark);
    font-size: clamp(1.75rem, 1.4rem + 1vw, 2.25rem);
    margin: 0 0 var(--space-3);
}

.tile--photo p {
    color: var(--c-on-dark-soft);
    font-size: 1rem;
    max-width: 32ch;
}

/* Image tiles: photo in the upper part, fading into the tile color under icon and text.
   --focus (inline) keeps each subject visible in every crop; --tone is the tile color. */
.tile--image {
    overflow: hidden;
    isolation: isolate;
}

.tile__bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--focus, 50% 50%);
}

.tile--image::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(to top, rgb(var(--tone) / 1) 0%, rgb(var(--tone) / 0.96) 46%, rgb(var(--tone) / 0) 82%),
        rgb(var(--tone) / 0.12);
}

.tile--image.tile--tertiary { --tone: 221 232 237; }
.tile--image.tile--teal { --tone: 47 89 87; }
.tile--image.tile--sage { --tone: 214 227 218; }
.tile--image.tile--secondary { --tone: 245 227 218; }

.tile--image .icon-chip {
    background: rgb(251 252 251 / 0.88);
    box-shadow: var(--shadow-sm);
}

.tile--image.tile--teal .icon-chip {
    background: rgb(47 89 87 / 0.75);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.tile--sage {
    background: var(--c-sage-soft);
}

.tile--secondary {
    background: var(--c-secondary-soft);
}

.tile--tertiary {
    background: var(--c-tertiary-soft);
}

.tile--teal {
    background: var(--c-teal);
    color: var(--c-surface);
}

.tile--teal h3 {
    color: var(--c-surface);
}

.tile--teal p {
    color: var(--c-on-teal-soft);
}

.tile--teal .icon-chip {
    background: rgb(251 252 251 / 0.14);
    color: var(--c-surface);
    --icon-duo: #e8b6a5;
}

/* Intervention areas on the clay panel */
.areas-quote {
    margin-top: var(--space-5);
    max-width: 42rem;
    padding-left: var(--space-5);
    border-left: 2px solid var(--c-secondary);
    color: var(--c-ink-soft);
}

.areas-quote q {
    font-family: var(--font-serif);
    font-style: italic;
    color: var(--c-ink);
    quotes: "«" "»";
}

.areas {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-4);
    margin: 0;
    padding: 0;
    list-style: none;
}

.area {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    height: 100%;
    padding: var(--space-5);
    background: var(--c-surface);
    border: 1px solid transparent;
    border-radius: var(--radius);
    text-decoration: none;
    transition:
        border-color var(--dur) var(--ease-out),
        transform var(--dur) var(--ease-out),
        box-shadow var(--dur) var(--ease-out);
}

.area .icon-chip {
    margin-bottom: var(--space-4);
}

.area h2,
.area h3 {
    font-family: var(--font-sans);
    font-size: 1.0938rem;
    font-weight: 600;
    line-height: 1.3;
}

.area p {
    font-size: var(--fs-sm);
    line-height: 1.5;
    color: var(--c-ink-soft);
}

.area__go {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: auto;
    padding-top: var(--space-4);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--c-teal-strong);
}

.area__go .icon {
    transition: transform var(--dur) var(--ease-out);
}

.area:hover {
    border-color: var(--c-teal);
    transform: translateY(-3px);
    box-shadow: var(--shadow);
}

.area:hover .area__go .icon {
    transform: translateX(4px);
}

/* Invite card: closes an incomplete row of areas (home, area pages). */
.area--invite {
    background: var(--c-teal);
    color: var(--c-on-dark);
}

.area--invite .icon-chip {
    background: rgb(251 252 251 / 0.14);
    color: var(--c-on-dark);
    --icon-duo: #e8b6a5;
}

.area--invite h3 {
    color: var(--c-on-dark);
}

.area--invite p {
    color: var(--c-on-teal-soft);
}

.area--invite .area__go {
    color: var(--c-on-dark);
}

.area--invite:hover {
    border-color: var(--c-teal-strong);
    background: var(--c-teal-strong);
}

.area--invite:focus-visible {
    outline-offset: 3px;
}

/* The invite card stretches to close an incomplete row. */
.areas__invite:nth-child(4n + 2) {
    grid-column: span 3;
}

.areas__invite:nth-child(4n + 3) {
    grid-column: span 2;
}

/* Online therapy: doubts answered by direct experience */
.online__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(2.5rem, 1rem + 5vw, 6rem);
    align-items: center;
}

.online__copy .h2 {
    margin-bottom: var(--space-5);
}

.online__links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-6);
    margin-top: var(--space-6);
}

.dialogue {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.bubble {
    max-width: 80%;
    padding: var(--space-3) var(--space-5);
    border-radius: var(--radius) var(--radius) var(--radius) 6px;
    background: var(--c-surface);
    font-style: italic;
    color: var(--c-ink-soft);
    box-shadow: var(--shadow-sm);
}

.dialogue > .bubble:nth-child(even) {
    margin-left: var(--space-6);
}

.bubble--answer {
    align-self: flex-end;
    max-width: 92%;
    margin: var(--space-4) 0 0;
    padding: var(--space-6);
    border-radius: var(--radius-lg) var(--radius-lg) 6px var(--radius-lg);
    background: var(--c-ink);
    color: var(--c-on-dark);
    font-style: normal;
    box-shadow: var(--shadow);
}

.bubble--answer blockquote {
    font-family: var(--font-serif);
    font-size: 1.25rem;
    line-height: 1.5;
}

.bubble--answer figcaption {
    margin-top: var(--space-4);
    font-size: var(--fs-sm);
    color: var(--c-on-dark-soft);
}

/* Reviews carousel (native scroll-snap, buttons enhance it) */
.carousel__controls {
    display: flex;
    gap: var(--space-2);
}

.carousel__btn {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border: 1px solid var(--c-line-strong);
    border-radius: 50%;
    background: rgb(251 252 251 / 0.6);
    color: var(--c-ink);
    cursor: pointer;
    transition: background-color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), opacity var(--dur);
}

.carousel__btn:hover:not(:disabled) {
    border-color: var(--c-teal);
    background: var(--c-surface);
}

.carousel__btn:disabled {
    opacity: 0.35;
    cursor: default;
}

.no-js .carousel__controls {
    display: none;
}

.carousel__track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 2 * var(--space-4)) / 3);
    gap: var(--space-4);
    margin: 0;
    padding: 0 0 var(--space-3);
    list-style: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
}

.carousel__track::-webkit-scrollbar {
    display: none;
}

/* Reviews: compact two-column block, one large quote at a time,
   in the same dark answer bubble as the online-therapy experiences. */
.reviews {
    padding-block: clamp(3rem, 2rem + 3vw, 4.5rem);
}

.reviews__grid {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: var(--space-6) clamp(2rem, 1rem + 4vw, 5rem);
    align-items: center;
}

.reviews__intro .stars {
    margin-bottom: var(--space-4);
}

.reviews__intro .h2 {
    margin-bottom: var(--space-3);
}

.reviews__intro .carousel__controls {
    margin-top: var(--space-5);
}

.reviews__more {
    margin-top: var(--space-4);
}

.reviews__stage {
    position: relative;
    padding: clamp(1.75rem, 1rem + 2.5vw, 3rem);
    padding-top: clamp(3.5rem, 2.5rem + 2.5vw, 4.5rem);
    background: var(--c-ink);
    color: var(--c-on-dark);
    border-radius: var(--radius-lg) var(--radius-lg) 6px var(--radius-lg);
    box-shadow: var(--shadow);
}

.reviews__stage :focus-visible {
    outline-color: var(--c-on-dark);
}

.reviews__mark {
    position: absolute;
    top: clamp(1.25rem, 0.75rem + 1vw, 1.75rem);
    left: clamp(1.75rem, 1rem + 2.5vw, 3rem);
    width: 44px;
    height: 44px;
    color: var(--c-secondary);
    --icon-duo: var(--c-secondary);
    --icon-duo-opacity: 0.45;
}

.reviews__track {
    grid-auto-columns: 100%;
    gap: var(--space-6);
    padding: 0;
}

.review {
    scroll-snap-align: start;
}

/* Author pinned to the bottom: the stage is as tall as the longest review. */
.review figure {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.review blockquote {
    font-family: var(--font-serif);
    font-size: clamp(1.1875rem, 1.05rem + 0.55vw, 1.5rem);
    line-height: 1.5;
    color: var(--c-on-dark);
    text-wrap: pretty;
}

.review__by {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-top: auto;
    padding-top: var(--space-5);
    font-size: var(--fs-sm);
    line-height: 1.35;
    color: var(--c-on-dark-soft);
}

.review__by strong {
    display: block;
    font-weight: 600;
    color: var(--c-on-dark);
}

.review__by .monogram {
    background: rgb(251 252 251 / 0.1);
    color: #e8b6a5;
}

/* Articles: one featured, two compact */
.articles {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--space-4);
}

.post {
    position: relative;
    background: var(--c-surface);
    border-radius: var(--radius-lg);
    transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}

.post:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow);
}

.post a {
    text-decoration: none;
}

.post a::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
}

.post time {
    display: block;
    font-size: 0.875rem;
    color: var(--c-ink-soft);
    margin-bottom: var(--space-2);
}

.post h3 {
    transition: color var(--dur) var(--ease-out);
}

.post:hover h3 {
    color: var(--c-teal-strong);
}

.post__media {
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--c-mist-soft);
}

.post__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 600ms var(--ease-out);
}

.post:hover .post__media img {
    transform: scale(1.04);
}

.post--featured {
    padding: var(--space-3) var(--space-3) var(--space-6);
}

.post--featured .post__media {
    aspect-ratio: 16 / 9;
    margin-bottom: var(--space-5);
}

.post--featured > :not(.post__media) {
    margin-inline: var(--space-4);
}

.post--featured .h3 {
    font-size: clamp(1.5rem, 1.3rem + 0.8vw, 2rem);
    margin-bottom: var(--space-3);
}

.post--featured p {
    color: var(--c-ink-soft);
    max-width: 55ch;
}

.post-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin: 0;
    padding: 0;
    list-style: none;
}

.post-list > li {
    flex: 1;
}

.post--compact {
    display: grid;
    grid-template-columns: 140px minmax(0, 1fr);
    gap: var(--space-5);
    align-items: center;
    height: 100%;
    padding: var(--space-3);
}

.post--compact .post__media {
    aspect-ratio: 1;
}

.post--compact .h3 {
    font-size: 1.25rem;
}

.post--compact > div:last-child {
    padding-right: var(--space-3);
}

/* 9. Contact panel: "understand" (timeline) on the left, "act" (card) on the right. */
.contact {
    position: relative;
}

/* Brand emblem as a quiet watermark in the corner. */
.contact::before {
    content: "";
    position: absolute;
    right: -90px;
    top: -70px;
    width: min(480px, 60vw);
    aspect-ratio: 480 / 327;
    background: url("../images/logo/emblema-480.webp") no-repeat center / contain;
    opacity: 0.12;
    z-index: -1;
}

.contact__layout {
    display: grid;
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    gap: var(--space-7) clamp(2.5rem, 1rem + 5vw, 6rem);
    align-items: center;
}

.contact .h2 {
    margin-bottom: var(--space-4);
}

.contact .lead {
    color: var(--c-on-teal-soft);
    margin-bottom: var(--space-7);
}

/* Vertical numbered timeline */
.timeline {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: step;
}

.timeline__step {
    position: relative;
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    gap: var(--space-5);
    padding-bottom: var(--space-6);
    counter-increment: step;
}

.timeline__step:last-child {
    padding-bottom: 0;
}

/* Connecting line between markers */
.timeline__step:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 27px;
    top: 64px;
    bottom: 8px;
    width: 2px;
    border-radius: 2px;
    background: linear-gradient(to bottom, rgb(243 246 244 / 0.45), rgb(243 246 244 / 0.12));
}

.timeline__marker {
    position: relative;
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgb(251 252 251 / 0.14);
    border: 1px solid rgb(243 246 244 / 0.22);
    color: var(--c-surface);
    --icon-duo: #e8b6a5;
    --icon-duo-opacity: 0.5;
}

.timeline__marker .icon {
    width: 28px;
    height: 28px;
}

.timeline__marker::after {
    content: counter(step);
    position: absolute;
    top: -6px;
    right: -6px;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--c-on-dark);
    color: var(--c-ink);
    font-size: 0.75rem;
    font-weight: 700;
}

.timeline__step h3 {
    margin: 0.75rem 0 var(--space-1);
    font-size: 1.375rem;
}

.timeline__step p {
    max-width: 44ch;
    color: var(--c-on-teal-soft);
}

/* Action card */
.contact-card {
    position: relative;
    padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
    background: var(--c-surface);
    color: var(--c-ink);
    border-radius: var(--radius-lg);
    box-shadow: 0 30px 60px -24px rgb(11 45 51 / 0.55);
}

.contact-card__person {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
    font-size: var(--fs-sm);
    line-height: 1.35;
    color: var(--c-ink-soft);
}

.contact-card__person img {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
    object-position: 50% 22%;
    box-shadow: 0 0 0 3px var(--c-surface), 0 0 0 4px var(--c-line-strong);
}

.contact-card__person strong {
    display: block;
    color: var(--c-ink);
    font-weight: 600;
}

.contact-card__claim {
    margin-bottom: var(--space-5);
    font-family: var(--font-serif);
    font-size: clamp(1.5rem, 1.25rem + 0.8vw, 1.875rem);
    line-height: 1.2;
    letter-spacing: -0.015em;
    text-wrap: balance;
}

.contact-card__claim em {
    display: block;
    font-style: italic;
    color: var(--c-secondary-strong);
}

.contact-card__actions {
    display: grid;
    gap: var(--space-3);
}

.contact-card__actions .btn {
    width: 100%;
}

/* In studio or online: two equal choices, each opening the form with that mode selected.
   The "oppure" badge between them makes the alternative explicit. */
.choice__label {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    font-weight: 600;
    color: var(--c-ink);
}

.choice__label .icon {
    width: 18px;
    height: 18px;
    margin-top: 0.2em;
    color: var(--c-teal);
}

.choice {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-3);
    margin: 0 0 var(--space-1);
    padding: 0;
    list-style: none;
}

.choice__option {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
    height: 100%;
    padding: var(--space-4);
    border: 1.5px solid var(--c-line-strong);
    border-radius: var(--radius);
    background: var(--c-surface);
    color: var(--c-ink);
    text-decoration: none;
    transition: border-color var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out),
        transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}

.choice__option:hover {
    border-color: var(--c-teal);
    background: var(--c-bg);
    box-shadow: var(--shadow-sm);
    transform: translateY(-2px);
}

.choice__option:active {
    transform: translateY(0);
}

.choice__option .icon-chip {
    width: 44px;
    height: 44px;
}

.choice__option .icon-chip .icon {
    width: 22px;
    height: 22px;
}

.choice__text {
    font-size: var(--fs-sm);
    line-height: 1.35;
    color: var(--c-ink-soft);
}

.choice__text strong {
    display: block;
    font-family: var(--font-serif);
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.2;
    color: var(--c-ink);
}

.choice__go {
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
    width: 18px;
    height: 18px;
    color: var(--c-teal);
    transition: transform var(--dur) var(--ease-out);
}

.choice__option:hover .choice__go {
    transform: translateX(3px);
}

.choice__or {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 52px;
    height: 26px;
    border-radius: var(--radius-pill);
    background: var(--c-ink);
    color: var(--c-on-dark);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.offices {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
    margin-top: var(--space-6);
    padding-top: var(--space-5);
    border-top: 1px solid var(--c-line);
}

.office {
    font-style: normal;
    font-size: var(--fs-sm);
    line-height: 1.45;
    color: var(--c-ink-soft);
}

.office strong {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-1);
    font-family: var(--font-serif);
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--c-ink);
}

.office strong .icon {
    width: 18px;
    height: 18px;
    color: var(--c-secondary);
}

.office a {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    min-height: 40px;
    font-weight: 600;
    color: var(--c-teal-strong);
    text-decoration: none;
}

.office a .icon {
    width: 14px;
    height: 14px;
}

.office a:hover {
    color: var(--c-ink);
}

/* Studio address beside hours and email: one rule above, no half-empty rows. */
.contact-card__info {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: var(--space-4) var(--space-5);
    margin-top: var(--space-6);
    padding-top: var(--space-5);
    border-top: 1px solid var(--c-line);
}

.contact-card__info .offices {
    grid-template-columns: minmax(0, 1fr);
    margin: 0;
    padding: 0;
    border: 0;
}

.contact-card__meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
    padding-top: 2px;
    font-size: var(--fs-sm);
}

.contact-card__meta p,
.contact-card__meta a {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 40px;
    max-width: 100%;
    color: var(--c-ink-soft);
    overflow-wrap: anywhere;
}

.contact-card__meta a {
    color: var(--c-ink);
    text-decoration-color: var(--c-mist);
}

.contact-card__meta .icon {
    flex: none;
    width: 18px;
    height: 18px;
    color: var(--c-teal);
}

/* Tablet: the card spans the whole layout, so actions and contacts sit side by side. */
@media (min-width: 768px) and (max-width: 1023px) {
    .contact-card {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
        grid-template-areas:
            "person info"
            "claim info"
            "actions info";
        align-content: start;
        column-gap: clamp(2rem, 1rem + 2vw, 3rem);
    }

    .contact-card__person { grid-area: person; }
    .contact-card__claim { grid-area: claim; }
    .contact-card__actions { grid-area: actions; }

    .contact-card__info {
        grid-area: info;
        grid-template-columns: minmax(0, 1fr);
        align-self: center;
        margin: 0;
        padding: 0 0 0 clamp(2rem, 1rem + 2vw, 3rem);
        border-top: 0;
        border-left: 1px solid var(--c-line);
    }

    .contact-card__meta {
        padding-top: var(--space-3);
        border-top: 1px solid var(--c-line);
    }
}

@media (max-width: 559px) {
    .contact-card__info {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-2);
    }

    .choice {
        grid-template-columns: minmax(0, 1fr);
    }

    .choice__option {
        flex-direction: row;
        align-items: center;
        padding-right: var(--space-7);
    }

    .choice__go {
        top: 50%;
        margin-top: -9px;
    }
}

/* Footer: light warm panel (clear break after the teal contact panel), four useful columns,
   a tone-on-tone typographic signature, compact bottom bar. */
.site-footer {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    margin: var(--inset);
    padding-block: clamp(3rem, 2rem + 3vw, 4.5rem) var(--space-5);
    border-radius: var(--radius-xl);
    background: var(--c-surface);
    color: var(--c-ink-soft);
    font-size: var(--fs-sm);
    box-shadow: inset 0 0 0 1px var(--c-line);
}

/* Soft brand glow in the top corner */
.site-footer::before {
    content: "";
    position: absolute;
    top: -30%;
    right: -10%;
    width: 60%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgb(201 123 99 / 0.14), transparent 65%);
    z-index: -1;
}

.site-footer :focus-visible {
    outline-color: var(--c-teal);
}

.site-footer__grid {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 2fr) minmax(0, 2.4fr) minmax(0, 3fr);
    gap: var(--space-7) clamp(1.5rem, 1rem + 2vw, 3rem);
}

.site-footer__identity {
    display: inline-flex;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
    text-decoration: none;
    color: var(--c-ink);
}

.site-footer__identity img {
    width: 64px;
    flex: none;
}

.site-footer__identity strong {
    display: block;
    font-family: var(--font-serif);
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1.15;
}

.site-footer__identity span {
    font-size: var(--fs-sm);
    color: var(--c-ink-soft);
}

.site-footer__brand > p {
    max-width: 34ch;
    line-height: 1.6;
}

.site-footer__register {
    display: flex;
    gap: var(--space-2);
    align-items: flex-start;
    margin-top: var(--space-4);
    font-size: 0.875rem;
    color: var(--c-ink-soft);
}

.site-footer__register .icon {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    color: var(--c-secondary);
}

.site-footer h2 {
    margin-bottom: var(--space-4);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--c-secondary-strong);
}

.site-footer ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-footer__col a {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 36px;
    color: var(--c-ink);
    text-decoration: none;
    transition: color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}

.site-footer__col a:hover {
    color: var(--c-teal-strong);
    transform: translateX(2px);
}

.site-footer__contacts address {
    margin-bottom: var(--space-4);
    font-style: normal;
    line-height: 1.5;
}

.site-footer__contacts address strong {
    display: block;
    font-family: var(--font-serif);
    font-size: 1.125rem;
    font-weight: 500;
    color: var(--c-ink);
}

.site-footer__contacts address a {
    display: flex;
    width: fit-content;
    min-height: 32px;
    font-weight: 600;
    color: var(--c-teal-strong);
}

.site-footer__contacts .icon {
    width: 16px;
    height: 16px;
}

.site-footer__lines {
    padding-top: var(--space-3);
    border-top: 1px solid var(--c-line);
}

.site-footer__lines span {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 36px;
}

.site-footer__lines .icon {
    color: var(--c-secondary);
}

/* Oversized name in Playfair, tone on tone: echoes the logo without a light logo variant. */
.site-footer__signature {
    margin: clamp(2.5rem, 1.5rem + 3vw, 4rem) 0 0;
    font-family: var(--font-serif);
    font-size: min(11.5rem, 13.5vw); /* the full name always fits the container width */
    font-weight: 500;
    line-height: 0.9;
    letter-spacing: -0.045em;
    white-space: nowrap;
    color: rgb(11 45 51 / 0.06);
    user-select: none;
}

.site-footer__signature em {
    font-style: italic;
    font-weight: 400;
    color: rgb(201 123 99 / 0.2);
}

.socials {
    display: flex;
    gap: var(--space-2);
    margin-top: var(--space-5);
}

.socials a {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--c-line-strong);
    border-radius: 50%;
    color: var(--c-ink);
    transition: border-color var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}

.socials a:hover {
    border-color: var(--c-teal);
    background: var(--c-mist-soft);
    color: var(--c-teal-strong);
}

.site-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3) var(--space-6);
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--c-line);
    font-size: 0.875rem;
}

.site-footer__top {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 44px;
    padding: 0 var(--space-4);
    border: 1px solid var(--c-line-strong);
    border-radius: var(--radius-pill);
    color: var(--c-ink);
    font-weight: 600;
    text-decoration: none;
    transition: border-color var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out);
}

.site-footer__top:hover {
    border-color: var(--c-teal);
    background: var(--c-mist-soft);
}

.site-footer__top .icon {
    width: 16px;
    height: 16px;
}

/* Mobile action bar: call + appointment, shown once the hero is out of view. */
.action-bar {
    display: none;
}

/* 9b. Inner pages: shared components (page hero, breadcrumb, long-form prose, side navigation). */
.page-hero {
    padding-block: clamp(1.5rem, 1rem + 2vw, 3rem) clamp(3rem, 2rem + 3vw, 5rem);
    background:
        radial-gradient(50% 80% at 95% 0%, rgb(201 123 99 / 0.22), transparent 65%),
        radial-gradient(45% 70% at 0% 100%, rgb(95 127 140 / 0.2), transparent 70%),
        linear-gradient(165deg, var(--c-bg) 0%, var(--c-sage-soft) 100%);
}

.page-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6) clamp(2rem, 1rem + 4vw, 5rem);
    align-items: center;
}

.page-hero--media .page-hero__grid,
.page-hero:has(.page-hero__icon) .page-hero__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
}

.page-hero__title {
    font-size: clamp(2.375rem, 1.5rem + 3vw, 4rem);
    margin-bottom: var(--space-4);
}

.page-hero .lead {
    margin-bottom: var(--space-6);
}

.page-hero .lead:last-child {
    margin-bottom: 0;
}

.page-hero__media {
    position: relative;
    justify-self: end;
    width: min(100%, 420px);
}

.page-hero__media::before {
    content: "";
    position: absolute;
    inset: 5% -5% -5% 7%;
    border-radius: var(--radius-lg);
    background: linear-gradient(150deg, var(--c-secondary-soft), var(--c-tertiary-soft));
    box-shadow: inset 0 0 0 1px rgb(251 252 251 / 0.7);
    transform: rotate(4deg);
    z-index: -1;
}

.page-hero__media img {
    width: 100%;
    aspect-ratio: 4 / 5;
    max-height: min(56vh, 520px);
    object-fit: cover;
    object-position: 50% 25%;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
}

.page-hero__icon {
    justify-self: end;
    display: grid;
    place-items: center;
    width: clamp(160px, 14vw, 220px);
    aspect-ratio: 1;
    border-radius: 0 50% 0 50%;
    background: linear-gradient(150deg, rgb(251 252 251 / 0.85), var(--c-secondary-soft));
    box-shadow: var(--shadow);
}

.page-hero__icon .icon-chip {
    width: 60%;
    height: 60%;
    background: transparent;
}

.page-hero__icon .icon-chip .icon {
    width: 70%;
    height: 70%;
}

.breadcrumb {
    margin-bottom: var(--space-5);
    font-size: var(--fs-sm);
}

.breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1) var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.breadcrumb li {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--c-ink-soft);
}

.breadcrumb li > .icon {
    width: 12px;
    height: 12px;
    opacity: 0.6;
}

.breadcrumb a {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    color: var(--c-teal-strong);
    font-weight: 500;
    text-decoration: none;
}

.breadcrumb a:hover {
    text-decoration: underline;
}

.breadcrumb a .icon {
    width: 18px;
    height: 18px;
}

/* Icon-only home link: keep a 32px square target (WCAG 2.5.8) without moving the icon. */
.breadcrumb li:first-child a {
    justify-content: center;
    min-width: 32px;
    margin-left: -7px;
}

.breadcrumb [aria-current="page"] {
    color: var(--c-ink);
    font-weight: 500;
}

/* Long-form reading (articles, area details). Max 70ch, generous rhythm. */
.article-prose {
    max-width: 70ch;
    font-size: 1.0938rem;
    line-height: 1.75;
    color: var(--c-ink-soft);
}

.article-prose > * + * {
    margin-top: 1.1em;
}

.article-prose h2,
.article-prose h3,
.article-prose h4 {
    font-family: var(--font-serif);
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--c-ink);
    text-wrap: balance;
}

.article-prose h2 {
    margin-top: 2.2em;
    font-size: clamp(1.625rem, 1.4rem + 0.8vw, 2.125rem);
}

.article-prose h3 {
    margin-top: 2em;
    font-size: clamp(1.375rem, 1.25rem + 0.5vw, 1.625rem);
}

.article-prose h4 {
    margin-top: 1.8em;
    font-size: 1.25rem;
}

.article-prose > :first-child {
    margin-top: 0;
}

.article-prose :is(h2, h3, h4) em {
    font-style: italic;
    color: var(--c-secondary-strong);
}

.article-prose strong {
    color: var(--c-ink);
    font-weight: 600;
}

.article-prose a {
    color: var(--c-teal-strong);
    font-weight: 500;
    text-decoration-color: var(--c-mist);
}

.article-prose a:hover {
    text-decoration-color: currentColor;
}

.article-prose ul,
.article-prose ol {
    padding-left: 0;
    list-style: none;
}

.article-prose li {
    position: relative;
    padding-left: 1.75em;
}

.article-prose li + li {
    margin-top: 0.5em;
}

.article-prose ul > li::before {
    content: "";
    position: absolute;
    left: 0.35em;
    top: 0.62em;
    width: 0.5em;
    height: 0.5em;
    border-radius: 0 50% 0 50%;
    background: var(--c-secondary);
}

.article-prose ol {
    counter-reset: item;
}

.article-prose ol > li {
    counter-increment: item;
}

.article-prose ol > li::before {
    content: counter(item) ".";
    position: absolute;
    left: 0;
    font-weight: 600;
    color: var(--c-secondary-strong);
}

.article-prose blockquote {
    margin-block: 2em;
    padding: var(--space-5) var(--space-6);
    border-left: 3px solid var(--c-secondary);
    border-radius: 0 var(--radius) var(--radius) 0;
    background: var(--c-surface);
    font-family: var(--font-serif);
    font-size: 1.1875rem;
    line-height: 1.55;
    color: var(--c-ink);
}

.article-prose blockquote cite {
    display: block;
    margin-top: var(--space-3);
    font-family: var(--font-sans);
    font-size: var(--fs-sm);
    font-style: normal;
    color: var(--c-ink-soft);
}

/* Highlight box inside prose (e.g. "Questa categoria comprende") */
.article-prose .callout {
    padding: var(--space-5) var(--space-6);
    border-radius: var(--radius);
    background: var(--c-surface);
    box-shadow: var(--shadow-sm);
}

.article-prose .callout > :first-child {
    margin-top: 0;
}

/* Sticky side navigation (e.g. list of intervention areas) */
.side-nav {
    position: sticky;
    top: calc(var(--header-h-compact) + 1.5rem);
    padding: var(--space-3);
    background: var(--c-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.side-nav__title {
    padding: var(--space-3) var(--space-3) var(--space-2);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--c-ink-soft);
}

.side-nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.side-nav a {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: 48px;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    font-size: var(--fs-sm);
    font-weight: 500;
    line-height: 1.3;
    text-decoration: none;
    color: var(--c-ink);
    transition: background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}

.side-nav a:hover {
    background: var(--c-mist-soft);
}

.side-nav a[aria-current="page"] {
    background: var(--c-ink);
    color: var(--c-on-dark);
}

.side-nav a .icon {
    width: 22px;
    height: 22px;
    flex: none;
    color: var(--c-teal);
    --icon-duo: var(--c-secondary);
    --icon-duo-opacity: 0.45;
}

.side-nav a[aria-current="page"] .icon {
    color: var(--c-on-dark);
    --icon-duo: #e8b6a5;
}

@media (max-width: 1023px) {
    .page-hero--media .page-hero__grid,
    .page-hero:has(.page-hero__icon) .page-hero__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .page-hero__media,
    .page-hero__icon {
        justify-self: start;
    }

    .page-hero__icon {
        display: none;
    }

    .side-nav {
        position: static;
    }
}

/* Tablet portrait: the photo stays beside the title, as in the home hero. */
@media (min-width: 768px) and (max-width: 1023px) {
    .page-hero--media .page-hero__grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 0.72fr);
    }

    .page-hero__media {
        justify-self: end;
    }

    .page-hero--media .hero__actions .btn {
        flex: 1 1 auto;
    }
}

@media (max-width: 767px) {
    .page-hero__media {
        width: min(80%, 330px);
        justify-self: center;
    }

    .page-hero .hero__actions .btn {
        flex: 1 1 100%;
    }
}

/* 10. Responsive. The navigation collapses below 1200px (5 items + CTA), layouts below 1024px. */
@media (max-width: 1199px) {
    .js .nav-toggle {
        display: inline-flex;
    }

    .js .site-nav {
        position: fixed;
        inset: var(--header-h) 0 0;
        z-index: var(--z-nav);
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-6);
        padding: var(--space-5) var(--gutter) calc(var(--space-7) + env(safe-area-inset-bottom));
        background: var(--c-base);
        overflow-y: auto;
        overscroll-behavior: contain;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-8px);
        transition:
            opacity var(--dur) var(--ease-out),
            transform var(--dur) var(--ease-out),
            visibility 0s linear var(--dur);
    }

    .js .is-scrolled .site-nav {
        inset: var(--header-h-compact) 0 0;
    }

    .js .site-nav.is-open {
        opacity: 1;
        visibility: visible;
        transform: none;
        transition-delay: 0s;
    }

    .no-js .site-header__inner {
        height: auto;
        flex-wrap: wrap;
        padding-block: var(--space-3);
    }

    .no-js .site-nav {
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
    }

    .site-nav__list {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 0;
        background: transparent;
        border: 0;
        border-radius: 0;
    }

    .site-nav__list > li {
        border-bottom: 1px solid var(--c-line);
    }

    .site-nav__link,
    .site-nav__link[aria-current="page"],
    .site-nav__link.is-current {
        width: 100%;
        justify-content: space-between;
        min-height: 60px;
        padding-inline: 0;
        border-radius: 0;
        background: transparent;
        color: var(--c-ink);
        font-family: var(--font-serif);
        font-size: 1.625rem;
        font-weight: 500;
    }

    .site-nav__link[aria-current="page"],
    .site-nav__link.is-current {
        color: var(--c-secondary-strong);
    }

    /* Current page: a clay dot at the end of the row, not only a color change. */
    .site-nav__link[aria-current="page"]::after {
        content: "";
        width: 8px;
        height: 8px;
        margin-right: var(--space-2);
        border-radius: 50%;
        background: var(--c-secondary);
    }

    .site-nav__link:hover {
        background: transparent;
        color: var(--c-teal-strong);
    }

    .site-nav__link .icon {
        width: 20px;
        height: 20px;
    }

    .js .site-nav__sub {
        display: none;
        padding: 0 0 var(--space-4);
    }

    .js .site-nav__link[aria-expanded="true"] + .site-nav__sub {
        display: block;
    }

    .mega__list {
        display: grid;
        gap: 2px;
    }

    /* Inline padding pulled back by the margin: icons stay aligned, the tint gets room. */
    .mega__item {
        align-items: center;
        min-height: 52px;
        margin-inline: calc(-1 * var(--space-3));
        padding: var(--space-2) var(--space-3);
    }

    .mega__item .icon-chip {
        width: 36px;
        height: 36px;
    }

    .mega__desc {
        display: none;
    }

    .site-nav__actions {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-3);
    }

    .site-nav__actions .btn {
        width: 100%;
    }

    .site-nav__call {
        display: inline-flex;
    }

    /* Carousel arrows never shrink in a crowded control row. */
    .carousel__btn {
        flex: none;
    }

    /* Long arrow links wrap like text: the arrow follows the last word, not the box edge.
       Its negative end margin cancels its width, so it never wraps alone: it overhangs into
       the right padding. */
    .link-arrow {
        display: inline-block;
        padding-block: 0.65rem;
        padding-right: 1.75em;
        line-height: 1.4;
    }

    .link-arrow .icon {
        display: inline-block;
        margin: 0 -1.5em 0 0.25em;
        vertical-align: -0.25em;
    }
}

/* Tablet: booking CTA in the header, wider menu panel with areas in two columns. */
@media (min-width: 768px) and (max-width: 1199px) {
    .js .header-cta {
        display: inline-flex;
        margin-left: auto;
        margin-right: calc(var(--space-3) - var(--space-5));
    }

    .nav-open .header-cta {
        visibility: hidden;
    }

    .mega__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: var(--space-6);
    }

    .mega__item {
        align-items: flex-start;
        padding-block: var(--space-3);
    }

    .mega__desc {
        display: -webkit-box;
    }

    .site-nav__actions {
        flex-direction: row;
    }

    .site-nav__actions .btn {
        flex: 1;
        width: auto;
        min-height: 52px;
        font-size: 1rem;
    }
}

@media (max-width: 1023px) {
    :root {
        --header-h: 72px;
        --header-h-compact: 64px;
    }

    .brand img {
        height: 46px;
    }

    .is-scrolled .brand img {
        height: 40px;
    }

    .hero__grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
    }

    .facts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .facts > li:nth-child(3) {
        border-left: 0;
    }

    .facts > li:nth-child(n + 3) {
        border-top: 1px solid var(--c-line);
    }

    .fact {
        margin: var(--space-2);
    }

    .about__grid,
    .reviews__grid,
    .online__grid,
    .articles,
    .contact__layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .about__visual {
        max-width: 560px;
    }

    .about__media {
        aspect-ratio: 1;
    }

    .bento {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tile--photo {
        grid-column: 1 / -1;
        grid-row: auto;
        min-height: 400px;
    }

    .areas {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .site-footer__grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .site-footer__brand,
    .site-footer__contacts {
        grid-column: 1 / -1;
    }

    .site-footer__contacts {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: var(--space-6);
    }

    .site-footer__contacts h2,
    .site-footer__lines {
        grid-column: 1 / -1;
    }
}

/* Tablet portrait (768-1023): two columns where they read better than a stretched phone layout. */
@media (min-width: 768px) and (max-width: 1023px) {
    /* Both hero buttons fill the copy column: same width, no ragged pair. */
    .hero .hero__actions .btn {
        flex: 1 1 auto;
    }

    /* About: photo beside the intro, specialties full width below. */
    .about__grid {
        grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
        gap: var(--space-6);
    }

    .about__body {
        display: contents;
    }

    .about__visual {
        grid-column: 1;
        grid-row: 1;
        max-width: none;
    }

    .about__media {
        aspect-ratio: 4 / 5;
    }

    /* Badge under the photo, as on phones: the column is too narrow to overhang it. */
    .about__visual {
        padding-bottom: 0;
    }

    .about__badge {
        position: relative;
        right: auto;
        margin: -2.5rem var(--space-3) 0;
        max-width: none;
        padding: var(--space-3) var(--space-4);
    }

    .about__badge img {
        width: 52px;
    }

    .about__body > :first-child {
        grid-column: 2;
        grid-row: 1;
    }

    .about__body > .specialties,
    .about__body > .link-arrow {
        grid-column: 1 / -1;
    }

    .about__body > .specialties {
        margin: var(--space-2) 0 0;
    }

    .about__body > .link-arrow {
        margin-top: calc(var(--space-2) - var(--space-6));
    }

    /* Getting started: the three steps side by side, joined by a horizontal line. */
    .timeline {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--space-5);
    }

    .timeline__step {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-3);
        padding-bottom: 0;
    }

    .timeline__step:not(:last-child)::before {
        left: 68px;
        right: calc(var(--space-3) - var(--space-5));
        top: 27px;
        bottom: auto;
        width: auto;
        height: 2px;
        background: linear-gradient(to right, rgb(243 246 244 / 0.45), rgb(243 246 244 / 0.12));
    }

    .timeline__step h3 {
        margin-top: 0;
        font-size: 1.25rem;
    }

    /* Footer: identity beside studios and contacts, the two link lists below. */
    .site-footer__brand {
        grid-column: auto;
    }

    .site-footer__contacts {
        display: block;
        grid-column: 2;
        grid-row: 1;
    }
}

/* Tablet landscape (1024-1199): desktop grids, narrower columns. */
@media (min-width: 1024px) and (max-width: 1199px) {
    /* Chip above the text, so four facts and four specialties keep a readable measure. */
    .fact,
    .specialties li {
        flex-direction: column;
        gap: var(--space-3);
    }

    .fact__text {
        padding-right: 0;
    }

    .specialties li {
        padding: var(--space-4) var(--space-5);
    }

    /* Narrow action card: address, hours and email in one column (the email never breaks). */
    .contact-card__info {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-3);
    }

    .contact-card__meta {
        padding-top: var(--space-3);
        border-top: 1px solid var(--c-line);
    }
}

/* Tablet (768-1199): areas as two columns of horizontal cards, icon beside the text. */
@media (min-width: 768px) and (max-width: 1199px) {
    .areas {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .areas__invite:nth-child(n) {
        grid-column: auto;
    }

    .areas__invite:nth-child(odd) {
        grid-column: 1 / -1;
    }

    .area {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-rows: auto auto 1fr;
        gap: var(--space-1) var(--space-4);
    }

    .area .icon-chip {
        grid-row: 1 / span 3;
        width: 52px;
        height: 52px;
        margin: 0;
    }

    .area__go {
        align-self: end;
        padding-top: var(--space-3);
    }
}

/* Reviews below 1024: arrows and "all reviews" share a row right above the quote. */
@media (max-width: 1023px) {
    .reviews__intro {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0 var(--space-5);
    }

    .reviews__intro .stars,
    .reviews__intro .h2 {
        flex-basis: 100%;
    }

    .reviews__intro .carousel__controls,
    .reviews__more {
        margin-top: var(--space-3);
    }
}

@media (max-width: 767px) {
    .hero {
        padding-top: var(--space-4);
    }

    .hero__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-6);
    }

    .hero__media {
        justify-self: center;
        width: min(80%, 330px);
    }

    .hero__actions .btn {
        flex: 1 1 100%;
    }

    /* Compact 2 x 2: chip above the text halves the height of a stacked list. */
    .facts {
        padding: var(--space-1);
    }

    .fact {
        flex-direction: column;
        gap: var(--space-3);
        margin: var(--space-1);
        padding: var(--space-4) var(--space-3);
    }

    .fact .icon-chip {
        width: 40px;
        height: 40px;
    }

    .fact .icon-chip .icon {
        width: 22px;
        height: 22px;
    }

    .fact__text {
        padding: 0;
    }

    .fact__text > span {
        font-size: 0.875rem;
    }

    .fact__arrow {
        display: none;
    }

    .about__visual {
        padding-bottom: 0;
    }

    .about__badge {
        position: relative;
        right: auto;
        margin: -2.5rem var(--space-3) 0;
        max-width: none;
    }

    .reviews__stage {
        padding: var(--space-6) var(--space-5) var(--space-5);
        padding-top: 4rem;
    }

    .specialties,
    .bento {
        grid-template-columns: minmax(0, 1fr);
    }

    .tile {
        min-height: 0;
    }

    .tile h3 {
        margin-top: var(--space-4);
    }

    .tile--photo {
        min-height: 360px;
    }

    .areas {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-3);
    }

    .areas__invite:nth-child(n) {
        grid-column: auto;
    }

    .area {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        gap: var(--space-1) var(--space-4);
        padding: var(--space-4);
    }

    .area .icon-chip {
        grid-row: 1 / span 2;
        width: 48px;
        height: 48px;
        margin: 0;
    }

    .area .icon-chip .icon {
        width: 26px;
        height: 26px;
    }

    /* Compact rows (as the "other areas" list of the area pages), summaries kept to help choose:
       only the arrow of "Approfondisci" stays, the label is still read by screen readers. */
    .area {
        grid-template-columns: auto minmax(0, 1fr) auto;
    }

    .area p {
        grid-column: 2 / -1;
    }

    .area__go {
        grid-column: 3;
        grid-row: 1;
        align-self: start;
        margin: 0;
        padding: 0.2em 0 0;
        font-size: 0;
    }

    .area__go .icon {
        width: 18px;
        height: 18px;
    }

    .bubble,
    .dialogue > .bubble:nth-child(even) {
        max-width: 92%;
        margin-left: 0;
    }

    .dialogue > .bubble:nth-child(even) {
        margin-left: var(--space-4);
    }

    .bubble--answer {
        max-width: 100%;
        margin-left: 0;
    }

    .post--compact {
        grid-template-columns: 96px minmax(0, 1fr);
        gap: var(--space-4);
    }

    .post--compact .h3 {
        font-size: 1.125rem;
    }

    .contact .lead {
        margin-bottom: var(--space-6);
    }

    .timeline__step {
        grid-template-columns: 48px minmax(0, 1fr);
        gap: var(--space-4);
    }

    .timeline__marker {
        width: 48px;
        height: 48px;
    }

    .timeline__step:not(:last-child)::before {
        left: 23px;
        top: 56px;
    }

    .timeline__step h3 {
        margin-top: 0.5rem;
        font-size: 1.25rem;
    }

    .offices {
        grid-template-columns: minmax(0, 1fr);
    }

    .site-footer__grid {
        gap: var(--space-6) var(--space-5);
    }

    /* Shorter footer on phones: areas are already in the menu, links and studios in two columns. */
    .site-footer__col[aria-labelledby="footer-areas-title"] {
        display: none;
    }

    .site-footer__col[aria-labelledby="footer-nav-title"] {
        grid-column: 1 / -1;
    }

    .site-footer__col[aria-labelledby="footer-nav-title"] ul {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: var(--space-5);
    }

    /* Touch: footer links get a 44px row. */
    .site-footer__col a {
        min-height: 44px;
        line-height: 1.35;
    }

    /* One studio: the address takes the full width instead of half a grid. */
    .site-footer__contacts {
        display: block;
    }

    .site-footer__bottom {
        flex-direction: column-reverse;
        align-items: flex-start;
    }

    .js .action-bar {
        position: fixed;
        inset: auto 0 0;
        z-index: var(--z-bar);
        display: grid;
        grid-template-columns: auto 1fr;
        gap: var(--space-2);
        padding: var(--space-3) var(--gutter) calc(var(--space-3) + env(safe-area-inset-bottom));
        background: rgb(232 239 235 / 0.94);
        border-top: 1px solid var(--c-line);
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
        transform: translateY(110%);
        transition: transform 320ms var(--ease-out);
    }

    .js .action-bar.is-visible {
        transform: none;
    }

    /* Two pills must fit 320-390px screens: let them shrink instead of overflowing. */
    .js .action-bar .btn {
        min-width: 0;
        padding-inline: 1rem;
        font-size: 0.9375rem;
    }

    .js .site-footer {
        margin-bottom: calc(var(--inset) + 84px);
    }
}

/* 11. Motion. Content is visible without JS; reveals only run when motion is welcome. */
@media (prefers-reduced-motion: no-preference) {
    .js [data-reveal] {
        opacity: 0;
        transform: translateY(22px);
        transition:
            opacity 800ms var(--ease-out),
            transform 800ms var(--ease-out);
        transition-delay: calc(var(--i, 0) * 90ms);
    }

    .js [data-reveal].is-visible {
        opacity: 1;
        transform: none;
    }

    .hero__copy > *,
    .hero__media {
        animation: rise 1000ms var(--ease-out) both;
        animation-delay: calc(var(--i, 0) * 110ms);
    }

    .hero .hl,
    .page-hero .hl {
        animation: hl-sweep 900ms var(--ease-out) both;
        animation-delay: calc(900ms + var(--hl, 0) * 220ms);
    }

    /* Elsewhere the stroke sweeps in when its block is revealed on scroll. */
    .js [data-reveal].is-visible .hl {
        animation: hl-sweep 900ms var(--ease-out) both;
        animation-delay: 450ms;
    }

    @keyframes hl-sweep {
        from {
            background-size: 0% 0.42em;
        }
    }

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

    /* Scroll-driven depth (progressive enhancement, no JS). */
    @supports (animation-timeline: view()) {
        .tile--photo img,
        .about__media img {
            animation: settle linear both;
            animation-timeline: view();
            animation-range: entry 0% cover 60%;
        }

        @keyframes settle {
            from {
                transform: scale(1.14);
            }
            to {
                transform: scale(1);
            }
        }

        .hero__media::before {
            animation: float linear both;
            animation-timeline: scroll(root);
            animation-range: 0 700px;
        }

        @keyframes float {
            to {
                transform: translateY(-40px) rotate(-4deg);
            }
        }
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}